:root{
  --g:#176334;--gm:#1c793f;--gl:#f0f7f3;--gd:#0d361d;--gx:#f7faf8;--gb:#a2cdb3;
  --am:#9A5A0A;--al:#FEF3E2;--ab:#F0C070;
  --rd:#8B2020;--rl:#FDEAEA;--rb:#E8A0A0;
  --bl:#1A4A80;--bll:#E8F0FA;--bb:#A0C0E8;
  --pu:#5A2E8A;--pul:#F2EAFA;--pub:#D4BFE8;
  --tl:#684a33;--tll:#f5efea;--tlb:#c09a7c;
  --s50:#FAFAF8;--s100:#F0EEE8;--s150:#E8E5DE;--s200:#D8D4CA;
  --s400:#928E84;--s500:#706C62;--s600:#524E46;--s700:#3A3630;--s900:#1C1814;
  --bdr:1px solid var(--s200);
  --xs:0 1px 2px rgba(0,0,0,.04);--sm:0 2px 8px rgba(0,0,0,.07);
  --md:0 4px 16px rgba(0,0,0,.08);--lg:0 12px 32px rgba(0,0,0,.10);
  --rsm:var(--radius-sm);--rmd:var(--radius-md);--rlg:var(--radius-lg);--rxl:var(--radius-xl);
  --font:'Poppins','DM Sans',system-ui,sans-serif;--fdisp:'Poppins','DM Sans',system-ui,sans-serif;
  --tr:all .18s cubic-bezier(.4,0,.2,1);--sidebar:260px;--sidebar-collapsed:68px;--fnav:'Poppins',var(--font);

  /* ============================================================
     CONSOLIDATED FROM .cx-scope's "tokens.css" block (Complaints/
     Compliments/Cancellation modules) — Design System Phase 3,
     step 1 (token consolidation). These values are copied up
     verbatim from .cx-scope so they're now available portal-wide,
     not just within those four modules. .cx-scope's own copy of
     this block (further down) is left in place untouched for now —
     removing that duplicate is a separate, later cleanup once
     nothing depends on it being locally scoped (it also carries
     dark-mode tokens per its header comment, not yet audited).
     Nothing above this comment changed in value — only --rsm/--rmd/
     --rlg/--rxl now alias the --radius-* equivalents below, which
     is a zero-risk consolidation since the pixel values were
     already identical (6/10/14/20px) under both names. Shadow
     values were NOT aliased the same way: --shadow-* below has
     different (richer, layered) values than --xs/--sm/--md/--lg
     above, so retargeting those would be a visible change — that
     decision is deferred to the "cards & containers" step, done
     with visual regression checks, not folded into this step. */

  /* Semantic status/priority/risk colors — kept exactly as originally
     defined (not shifted into the green/brown brand palette): these
     are universal UX signals (red=critical, green=low/resolved,
     amber=pending), the same reasoning already applied to --rd/--am
     when the module banners were recolored. */
  --status-new:       #6366f1;
  --status-open:      #3b82f6;
  --status-pending:   #f59e0b;
  --status-resolved:  #22c55e;
  --status-closed:    #7c8a9a;
  --priority-critical: #ef4444;
  --priority-high:     #f97316;
  --priority-medium:   #eab308;
  --priority-low:      #22c55e;
  --risk-critical: #dc2626;
  --risk-high:     #ea580c;
  --risk-medium:   #ca8a04;
  --risk-low:      #16a34a;

  /* Semantic surface/text tokens (slate neutral scale) */
  --slate-950: #0a0d0f;--slate-900: #111417;--slate-800: #1c2026;--slate-750: #232830;
  --slate-700: #2c3340;--slate-600: #404a58;--slate-500: #5a6578;--slate-400: #7c8a9a;
  --slate-300: #a2adb9;--slate-200: #c8d0d9;--slate-150: #dde3ea;--slate-100: #eef1f4;
  --slate-50:  #f6f8fa;
  --bg-base:       var(--slate-50);
  --bg-surface:    #ffffff;
  --bg-overlay:    var(--slate-100);
  --bg-hover:      var(--slate-100);
  --bg-sunken:     var(--slate-100);
  --border:        var(--slate-150);
  --border-strong: var(--slate-200);
  --text-primary:   var(--slate-900);
  --text-secondary: var(--slate-500);
  --text-tertiary:  var(--slate-400);
  --text-inverse:   #ffffff;

  /* Elevation — canonical shadow scale going forward (see note above
     re: --xs/--sm/--md/--lg not yet retargeted to these) */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.07), 0 4px 6px rgba(0,0,0,0.04);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.08), 0 10px 10px rgba(0,0,0,0.03);

  /* Radius scale — canonical names going forward; --r{sm/md/lg/xl}
     above now alias these (same pixel values, zero visual change) */
  --radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 20px;--radius-full: 9999px;

  /* Spacing scale — did not exist at root before this consolidation.
     Nothing currently uses these outside .cx-scope, so adding them
     here changes nothing yet; components adopt this scale as they're
     migrated (Phase 3, steps 4 onward), not all at once. */
  --space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;
  --space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;

  /* Typography scale — did not exist in EITHER token system before
     this. Values are calibrated to the actual dominant font-sizes
     already in use (see audit doc), not invented from scratch, so
     that when applied later most text barely changes: --text-base
     (13px) and --text-sm (12.5px) are literally the two most-used
     sizes in the file today (1,122 and 643 occurrences). DEFINED
     HERE ONLY — not yet applied anywhere, per the instruction to
     validate against real screens before any global replacement. */
  --text-2xs: 10px;--text-xs: 11px;--text-sm: 12.5px;--text-base: 13px;
  --text-md: 14px;--text-lg: 15px;--text-xl: 16px;--text-2xl: 18px;
  --text-3xl: 22px;--text-4xl: 26px;

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --font-sans: 'Poppins','DM Sans',system-ui,sans-serif;

  /* Found missing during the Design System Phase 3 button/card work:
     these were never actually consolidated to :root in Step 1, only
     the status/priority/risk/surface/shadow/radius/spacing tokens
     were. Every .btn-primary, .btn-danger, .btn-danger-ghost and
     .menu-item-danger built during Steps 3-4 references --accent/
     --danger/--danger-soft, which only ever existed inside .cx-scope
     - meaning every one of those outside .cx-scope (the Tasks modal's
     "Save Task", the bulk-bar's "Delete", the task row menu's
     "Delete", etc.) has been rendering with a background that fails
     to resolve at all: invisible white text on a transparent
     background inside a white modal. Values below are copied from
     .cx-scope's own resolved hex (--forest-500/600), not re-derived,
     so nothing inside .cx-scope changes - its own local copies still
     win there via normal cascade, this only fixes everywhere else.
     --transition (plain, no -fast/-slow suffix) had the identical gap
     - .btn/.card's own transition properties reference it directly. */
  --accent: #2f8058;
  --accent-hover: #276948;
  --accent-soft: #edf7f1;
  --danger: #ef4444;
  --danger-soft: #fef2f2;
  --success: #22c55e;
  --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Focus ring — Design System Phase 3, Step 3 (shared button system).
     Buttons previously had no custom focus style at all (relied on the
     browser default outline). This gives every .btn a consistent,
     on-brand focus treatment, the same pattern already used for form
     inputs (outline:none + a custom ring on :focus). */
  --focus-ring-color: rgba(23,99,52,.35);

  /* Responsive breakpoint STANDARD (documentation only — CSS custom
     properties cannot be referenced inside @media queries, so this
     cannot be a real token the way colors/spacing are). Target for
     future work: 768px (mobile), 1024px (tablet), 1280px (small
     desktop). Apply only where a component's layout genuinely needs
     to change at that width, with visual testing — not as a find/
     replace across the 11 breakpoint values currently in use. See
     Phase 3, step 9. */
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--font);background:var(--s50);color:var(--s900);font-size:15px;line-height:1.55;display:flex;min-height:100vh;overflow-x:hidden;}
/* Onboarding Admin renders its buttons with inline style="" attributes
   (background/border/radius/padding set per-button), not CSS classes —
   which means there was never a hover state possible for any button
   here, since inline styles can't express :hover. This rule is purely
   additive: it only sets properties (box-shadow, transform) that none
   of those inline styles touch, so it can't override or conflict with
   anything already set inline. */
#page-onboarding-admin button { transition: box-shadow .18s ease, transform .18s ease; }
#page-onboarding-admin button:hover:not(:disabled) { box-shadow: var(--sm); transform: translateY(-1px); }
#page-onboarding-admin button:active:not(:disabled) { transform: translateY(0); box-shadow: var(--xs); }
/* LOGIN SCREEN */
#login-screen{position:fixed;inset:0;background:linear-gradient(135deg,var(--gd) 0%,var(--gm) 50%,#1a7a3a 100%);display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity .35s ease;}
#login-screen.hidden{opacity:0;pointer-events:none;display:none;}
.login-card{background:#fff;border-radius:20px;padding:40px 44px;width:min(420px,92vw);box-shadow:0 24px 64px rgba(0,0,0,.22);}
@keyframes login-spin{to{transform:rotate(360deg);}}
.login-logo{text-align:center;margin-bottom:28px;}
.login-logo-icon{width:52px;height:52px;background:linear-gradient(135deg,var(--gd),var(--gm));border-radius:14px;display:inline-flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:10px;}
.login-logo h1{font-family:var(--fdisp);font-size:22px;font-weight:600;color:var(--s900);letter-spacing:-.3px;}
.login-logo p{font-size:12.5px;color:var(--s400);margin-top:3px;}
.login-field{margin-bottom:14px;}
.login-field label{display:block;font-size:10.5px;font-weight:700;color:var(--s500);text-transform:uppercase;letter-spacing:.6px;margin-bottom:5px;}
.login-field input{width:100%;padding:11px 13px;border:1.5px solid var(--s200);border-radius:var(--rmd);font-size:14.5px;font-family:var(--font);color:var(--s900);background:#fff;outline:none;transition:border-color .15s,box-shadow .15s;}
.login-field input:focus{border-color:var(--g);box-shadow:0 0 0 3px rgba(30,92,30,.1);}
.login-btn{width:100%;padding:13px;background:linear-gradient(135deg,var(--gd),var(--gm));color:#fff;border:none;border-radius:var(--rmd);font-size:15px;font-weight:700;cursor:pointer;font-family:var(--font);transition:all .18s;margin-top:6px;letter-spacing:.2px;}
.login-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(30,92,30,.35);}
.login-btn:disabled{background:var(--s200);color:var(--s400);cursor:not-allowed;transform:none;box-shadow:none;}
.login-err{background:var(--rl);border:1px solid var(--rb);color:var(--rd);border-radius:var(--rmd);padding:10px 13px;font-size:13px;font-weight:500;margin-bottom:14px;display:none;}
.login-err.show{display:block;}
.login-footer{text-align:center;margin-top:18px;font-size:12px;color:var(--s400);}
#login-name-field{animation:fadeUp .25s ease;}
.logout-btn{background:var(--s100);border:none;border-radius:var(--rmd);padding:6px 13px;font-size:12.5px;font-weight:600;color:var(--s600);cursor:pointer;font-family:var(--font);transition:var(--tr);}
.logout-btn:hover{background:var(--rl);color:var(--rd);}
/* SIDEBAR */
.dash-range-btn{padding:7px 16px;font-size:12.5px;font-weight:600;border:1.5px solid var(--s200);border-radius:20px;background:#fff;color:var(--s600);cursor:pointer;font-family:var(--font);transition:all .15s;white-space:nowrap;}
.dash-range-btn:hover{border-color:var(--g);color:var(--g);background:var(--gl);}
.dash-range-btn.active{background:var(--g);color:#fff;border-color:var(--g);box-shadow:0 2px 8px rgba(30,92,30,.25);}
/* Pipeline / CRM tabs */
.pipe-tab-bar{display:flex;gap:2px;border-bottom:2px solid var(--s150);margin-bottom:20px;overflow-x:auto;scrollbar-width:none;}
.pipe-tab-bar::-webkit-scrollbar{display:none;}
.pipe-tab{padding:10px 18px;font-size:13px;font-weight:600;border:none;background:none;cursor:pointer;font-family:var(--font);color:var(--s400);border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap;transition:all .15s;display:flex;align-items:center;gap:6px;border-radius:0;}
.pipe-tab:hover{color:var(--s700);}
.pipe-tab.active{color:var(--g);border-bottom-color:var(--g);font-weight:700;}
.pipe-tab .pipe-tab-count{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:20px;background:var(--s100);color:var(--s500);}
.pipe-tab.active .pipe-tab-count{background:var(--gl);color:var(--g);}
.sidebar{flex-shrink:0;background:#fff;border-right:var(--bdr);display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;z-index:100;box-shadow:var(--sm);}
.sb-brand{padding:20px 20px 16px;border-bottom:var(--bdr);}
.sb-logo{height:36px;width:auto;display:block;}
.sb-tagline{font-size:10.5px;color:var(--s400);margin-top:5px;letter-spacing:.4px;font-weight:500;}
.sb-nav{flex:1;overflow-y:auto;padding:12px 10px;}
.sb-section{font-size:9.5px;font-weight:700;color:var(--s400);text-transform:uppercase;letter-spacing:.8px;padding:14px 10px 6px;}
.sb-section:first-child{padding-top:6px;}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--rmd);cursor:pointer;font-size:13.5px;font-weight:500;color:var(--s600);transition:var(--tr);border:none;background:transparent;width:100%;text-align:left;font-family:var(--font);}
.nav-item:hover{background:var(--s100);color:var(--s900);}
.kpi-chart-card{background:#fff;border:var(--bdr);border-radius:var(--rlg);padding:14px 16px;box-shadow:var(--xs);}
.kpi-chart-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px;flex-wrap:wrap;gap:4px;}
.kpi-target{font-size:13px;font-weight:700;color:var(--s900);}
.kpi-label{font-size:11px;color:var(--s500);text-align:center;flex:1;}
.kpi-avg{font-size:11px;color:var(--s400);}
.nav-item.active{background:var(--gl);color:var(--g);font-weight:600;}
.nav-item .ni{font-size:15px;width:20px;text-align:center;flex-shrink:0;}
.sb-bottom{padding:14px 10px;border-top:var(--bdr);}
.sb-user{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:var(--rmd);background:var(--gx);}
.sb-avatar{width:30px;height:30px;border-radius:50%;background:var(--g);display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;font-weight:700;flex-shrink:0;}
.sb-uname{font-size:12.5px;font-weight:600;color:var(--gd);}
.sb-urole{font-size:10.5px;color:var(--s400);}
/* MAIN */
.main{margin-left:var(--sidebar);flex:1;display:flex;flex-direction:column;min-height:100vh;min-width:0;}
.topbar{background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-bottom:var(--bdr);padding:0 28px;height:56px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50;box-shadow:var(--xs);}
.topbar-title{font-family:var(--fdisp);font-size:18px;font-weight:500;color:var(--s900);}
.topbar-actions{display:flex;align-items:center;gap:10px;}
.tb-btn{padding:7px 14px;border-radius:var(--rmd);border:1.5px solid var(--gb);background:#fff;font-size:12.5px;font-weight:600;color:var(--g);cursor:pointer;font-family:var(--font);transition:var(--tr);}
.tb-btn:hover{background:var(--gl);}
.tb-btn.primary{background:var(--g);color:#fff;border-color:var(--g);}
.tb-btn.primary:hover{background:var(--gd);}
.tb-time{font-size:12px;color:var(--s400);}
/* PAGES */
.page{display:none;flex:1;padding:28px 40px 80px;width:100%;max-width:1600px;margin-left:auto;margin-right:auto;}
#page-team-schedule{padding:0;display:none;flex-direction:column;}
#page-team-schedule.active{display:flex;}
#page-inbox.active{display:flex!important;flex-direction:column;height:calc(100vh - 56px);max-height:calc(100vh - 56px);overflow:hidden;}
#page-inbox #inbox-thread-view{min-height:0;}
#page-inbox #inbox-messages-body{min-height:0;flex:1;overflow-y:auto;}
#page-calendar{padding:0;display:none;flex-direction:column;}
#page-calendar.active{display:flex!important;}
/* Checkin KPI cards */
#checkin-kpis .kpi-card{background:#fff;border:var(--bdr);border-radius:var(--rlg);padding:14px 16px;box-shadow:var(--xs);}
#checkin-kpis .kpi-label{font-size:10px;color:var(--s400);text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-bottom:6px;}
#checkin-kpis .kpi-value{font-size:26px;font-weight:700;letter-spacing:-.5px;line-height:1;}
#checkin-kpis .kpi-sub{font-size:11px;color:var(--s400);margin-top:3px;}
.kv-g{color:var(--gm);}.kv-w{color:var(--am);}.kv-r{color:var(--rd);}.kv-n{color:var(--s700);}
/* Inbox thread items */
.ibf-tab{padding:10px 9px;font-size:11.5px;font-weight:500;border:none;background:none;cursor:pointer;font-family:var(--font);color:var(--s500);border-bottom:2px solid transparent;transition:var(--tr);white-space:nowrap;flex-shrink:0;}
.ibf-tab:hover{color:var(--s900);}
.ibf-active{color:var(--g)!important;font-weight:700;border-bottom-color:var(--g)!important;}
.inbox-thread-item{padding:10px 14px;border-bottom:1px solid var(--s100);cursor:pointer;transition:background .12s;}
.inbox-thread-item:hover{background:var(--s50);}
.inbox-thread-item.active{background:var(--gl);border-left:3px solid var(--g);}
.inbox-thread-item.unread .it-subject{font-weight:700;color:var(--s900);}
.it-subject{font-size:12px;font-weight:500;color:var(--s700);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.it-meta{display:flex;justify-content:space-between;align-items:center;margin-top:2px;}
.it-meta span{font-size:10.5px;color:var(--s400);}
.it-preview{font-size:11px;color:var(--s400);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Message bubbles */
.msg-bubble{padding:11px 15px;border-radius:14px;max-width:72%;font-size:13.5px;line-height:1.55;}
.msg-mine{background:var(--g);color:#fff;align-self:flex-end;border-bottom-right-radius:4px;}
.msg-theirs{background:#fff;color:var(--s900);align-self:flex-start;border-bottom-left-radius:4px;border:var(--bdr);}
.msg-meta{font-size:10.5px;margin-top:5px;opacity:.65;}
.msg-read-receipt{font-size:10px;color:rgba(255,255,255,.7);margin-top:2px;text-align:right;}
/* Checkin rows */
.checkin-row{display:flex;align-items:center;gap:12px;padding:10px 18px;border-bottom:1px solid var(--s100);transition:background .12s;}
.checkin-row:last-child{border-bottom:none;}
.checkin-row:hover{background:var(--s50);}
.checkin-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--gd),var(--gm));display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;font-weight:700;flex-shrink:0;}
.checkin-info{flex:1;min-width:0;}
.checkin-name-row{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.checkin-name{font-size:13.5px;font-weight:600;color:var(--s900);}
.checkin-time-detail{font-size:11px;color:var(--s400);margin-top:2px;}
.checkin-badge-on{background:var(--gl);color:var(--g);padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap;}
.checkin-badge-done{background:var(--s100);color:var(--s500);padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap;}
/* Inbox filter tab buttons */
.ibf-btn{flex:1;padding:11px 8px;font-size:12.5px;border:none;background:none;cursor:pointer;font-family:var(--font);color:var(--s500);border-bottom:2px solid transparent;transition:var(--tr);}
.ibf-btn.active{color:var(--g);border-bottom-color:var(--g);font-weight:600;}
.ts-report-scope .logo-wrap{padding:12px 20px 10px;border-bottom:1px solid var(--s200);background:linear-gradient(135deg,#0d361d 0%,#104323 55%,#13512b 100%);flex-shrink:0;}
.ts-report-scope .tabs{margin:0 20px;flex-shrink:0;}
/* Team Schedule: folded header (tabs row + changes line + one control row + legend line) */
#page-team-schedule .tabs{align-items:center;flex-wrap:wrap;margin-bottom:0;}
#page-team-schedule .sc-tabs-end{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:0 0 4px;}
#page-team-schedule .sc-ctl{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:8px 0 6px;}
#page-team-schedule .sc-ctl input[type=text]{flex:1;min-width:130px;max-width:340px;padding:6px 10px;border:var(--bdr);border-radius:var(--rmd);font-size:12.5px;font-family:var(--font);outline:none;background:#fff;color:var(--text);}
#page-team-schedule .sc-ctl input[type=text]:focus{border-color:var(--brand-mid);}
#page-team-schedule .sc-ctl .sc-ms-btn{padding:6px 9px !important;font-size:12.5px !important;}
#page-team-schedule .sc-btn{padding:6px 10px;border:var(--bdr);border-radius:var(--rmd);font-size:12.5px;font-weight:600;background:#fff;color:var(--s600);cursor:pointer;font-family:var(--font);white-space:nowrap;}
#page-team-schedule .sc-btn:hover{background:var(--brand-soft);color:var(--brand);}
#page-team-schedule .sc-wk{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:3px 8px;background:var(--brand-soft);border:1px solid var(--brand-light);border-radius:var(--rmd);}
#page-team-schedule .sc-wk label{font-size:10.5px;font-weight:700;color:var(--brand);text-transform:uppercase;letter-spacing:.05em;}
#page-team-schedule .sc-wk input[type=date]{font-size:11px;padding:3px 6px;border-radius:6px;border:1px solid var(--brand-light);background:#fff;color:var(--text);cursor:pointer;font-family:var(--font);}
#page-team-schedule .sc-wk .week-preview{flex:none;font-size:11.5px;font-weight:600;color:var(--brand);}
#page-team-schedule .sc-wk .date-preview-label{display:none !important;}
#page-team-schedule .sc-more{position:relative;display:inline-block;}
#page-team-schedule .sc-more-pop{position:absolute;right:0;top:calc(100% + 4px);z-index:60;background:#fff;border:1px solid var(--s150,#e5e7eb);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:6px;min-width:240px;text-align:left;}
#page-team-schedule .sc-more-pop button,#page-team-schedule .sc-more-pop a{display:block;width:100%;text-align:left;border:none;background:none;padding:8px 10px;border-radius:6px;font-size:12.5px;font-weight:600;font-family:var(--font);color:var(--s800);cursor:pointer;text-decoration:none;white-space:nowrap;line-height:1.3;}
#page-team-schedule .sc-more-pop svg{margin-right:5px;}
#page-team-schedule .sc-more-pop button:hover,#page-team-schedule .sc-more-pop a:hover{background:var(--brand-soft);}
#page-team-schedule .sc-more-pop small{display:block;font-size:11px;color:var(--s500);font-weight:400;white-space:normal;max-width:260px;}
#page-team-schedule .sc-more-pop hr{border:none;border-top:1px solid var(--s150,#e5e7eb);margin:4px 0;}
#page-team-schedule .sc-legend .stats{margin:0 0 0 auto;display:inline-flex;gap:0;font-size:12px;color:var(--text2);white-space:nowrap;}
#page-team-schedule .sc-legend .stat{background:none;border:none;padding:0;gap:4px;border-radius:0;}
#page-team-schedule .sc-legend .stat+.stat::before{content:'·';margin:0 7px;color:var(--s300,#d1d5db);}
#page-team-schedule .sc-legend .stat-label{font-size:12px;}
#page-team-schedule .sc-legend .stat-val{font-size:12.5px;}
#page-team-schedule .sc-legend{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:11px;color:var(--text2);padding:0 0 8px;}
#page-team-schedule .sc-legend .legend-tip{font-style:normal;color:var(--text2);}
#page-team-schedule .tbl-wrap{max-height:calc(100vh - 215px);}
@media (max-width:640px){#page-team-schedule .sc-legend .stats{margin-left:0;flex-wrap:wrap;white-space:normal;}}
.ts-report-scope .tab-panel{flex:1;overflow-y:auto;padding:12px 16px 20px;}
.ts-report-scope .tab-panel.active{display:flex;flex-direction:column;}
.page.active{display:block;animation:fadeUp .2s ease;}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ph{margin-bottom:24px;}
.ph h1{font-family:var(--fdisp);font-size:24px;font-weight:500;letter-spacing:-.3px;}
.ph p{font-size:13.5px;color:var(--s400);margin-top:4px;}
/* Shared gradient banner — same structure as Home's Welcome Bar, reused
   across every top-level nav page so each gets its own colored identity
   instead of a plain text .ph header. Structure is fixed here; each
   page sets its own gradient via an inline background (and, for pages
   whose header also needs a live button/filter, that content sits in
   .pb-extra alongside the text rather than the banner being replaced
   outright). */
/* Monthly Report (27 Oct 2026) */
.mr{display:grid;gap:16px}
.mr-top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.mr-top h2{font-size:22px;margin:2px 0 2px;color:var(--s900)}
.mr-lab{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--s500);margin-bottom:8px}
.mr-sub{font-size:12.5px;color:var(--s500)}
.mr-pick{padding:8px 12px;border:1.5px solid var(--s200);border-radius:10px;font-family:var(--font);font-size:13.5px;background:#fff}
.mr-card{background:#fff;border:1px solid var(--s150);border-radius:16px;padding:16px 18px}
.mr-miss{background:#fffbeb;border:1px solid #fde68a;color:#92400e;border-radius:12px;padding:10px 14px;font-size:13px;display:flex;gap:8px;align-items:center}
.mr-sum{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:1000px){.mr-sum{grid-template-columns:minmax(0,1fr)}}
.mr-scores{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:10px}
.mr-sc{background:var(--s50);border-radius:12px;padding:10px 12px;display:grid}
.mr-sc span{font-size:12px;color:var(--s500);font-weight:600}.mr-sc b{font-size:24px;line-height:1.15;font-variant-numeric:tabular-nums;color:var(--s900)}.mr-sc em{font-style:normal;font-size:11px;color:var(--s400)}
.mr-good,.mr-watch{border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.5;display:grid;gap:3px;margin-top:8px}
.mr-good{background:#f0fdf4}.mr-good b{color:#166534}.mr-watch{background:#fffbeb}.mr-watch b{color:#92400e}
.mr-ti{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--s100);font-size:13px;line-height:1.45}
.mr-box{width:14px;height:14px;border:2px solid var(--s300);border-radius:4px;flex:none;margin-top:2px}
.mr-own{font-size:12px;white-space:nowrap;color:var(--s700)}
.mr-res{font-size:11px;font-weight:700;border-radius:999px;padding:2px 9px;white-space:nowrap;flex:none;margin-top:1px}
.mr-res.y{background:#dcfce7;color:#166534}.mr-res.p{background:#fef3c7;color:#92400e}.mr-res.n{background:#fee2e2;color:#991b1b}
.mr-main{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.mr-why{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.mr-why>.mr-lab{grid-column:1/-1;margin:0}
.mr-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--s500);margin-bottom:8px}
.mr-tw{overflow-x:auto}
.mr-tbl{border-collapse:collapse;width:100%;min-width:760px;font-variant-numeric:tabular-nums;font-size:13px}
.mr-tbl th,.mr-tbl td{padding:7px 8px;text-align:right;border-bottom:1px solid var(--s100);vertical-align:top}
.mr-tbl th{font-size:11px;color:var(--s500);font-weight:700}
.mr-tbl th.m,.mr-tbl td.m{border-left:1px solid var(--s100)}
.mr-tbl th:first-child,.mr-tbl td:first-child{text-align:left;min-width:150px}
.mr-tbl th[colspan]{text-align:center}
.mr-wk{display:block;font-weight:500;color:var(--s400)}
.mr-d{display:block;font-size:11px;color:var(--s400);font-weight:400}
.mr-tbl td.y{color:#15803d;font-weight:700}.mr-tbl td.x{color:#b91c1c;font-weight:700}
.mr-legend .y{color:#15803d}.mr-legend .x{color:#b91c1c}
.mr-star{color:#c98a06;margin-left:3px;display:inline-flex;vertical-align:-1px}.mr-star svg{fill:#e0a526}
.mr-t{font-size:12px;color:var(--s500);white-space:nowrap}
.mr-tbl td.mr-wo{text-align:left;font-size:12px;max-width:200px}
.mr-pill{display:inline-block;border-radius:999px;padding:1px 8px;font-weight:700;font-size:11.5px;background:#fee2e2;color:#991b1b}
.mr-pill.ok{background:#dcfce7;color:#166534}
.mr-sec td{background:var(--s50);text-align:left!important;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--s500);padding:6px 8px}
.mr-score td{background:#f0fdf4;font-weight:700}
.mr-tog td{text-align:left!important;padding:4px 8px 8px}
.mr-tog span{color:var(--g);font-weight:600;font-size:12.5px;cursor:pointer}
.mr-why{display:grid;gap:14px}
.mr-why ol{margin:4px 0 0;padding-left:18px;font-size:13px;display:grid;gap:2px}
.mr-why ol span{color:var(--s400)}
.mr-rc{margin:4px 0 0;padding-left:18px;font-size:13px;display:grid;gap:2px}.mr-rc i{color:var(--s500);font-style:normal}.mr-rc span{color:var(--s400)}
.mr-h{font-size:13px;color:var(--s800)}
.mr-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}.mr-chips span{background:var(--s50);border-radius:999px;padding:2px 10px;font-size:12px}
.mr-news{margin:0;padding-left:18px;font-size:13px;display:grid;gap:4px}
.mr-link{color:var(--g);font-weight:600;font-size:12.5px;cursor:pointer;margin-top:6px}
.page-banner{border-radius:var(--rxl);padding:26px 32px;margin-bottom:22px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;box-shadow:0 4px 28px rgba(0,0,0,.14);position:relative;overflow:hidden;}
.page-banner .pb-circle-1{position:absolute;right:180px;top:-18px;width:80px;height:80px;background:rgba(255,255,255,.06);border-radius:50%;pointer-events:none;}
.page-banner .pb-circle-2{position:absolute;right:140px;bottom:-20px;width:60px;height:60px;background:rgba(255,255,255,.05);border-radius:50%;pointer-events:none;}
.page-banner .pb-eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:rgba(255,255,255,.55);margin-bottom:6px;}
.page-banner h1{font-family:var(--fdisp);font-size:24px;color:#fff;font-weight:500;margin:0 0 4px;letter-spacing:-.3px;}
.page-banner p{font-size:13px;color:rgba(255,255,255,.7);margin:0;}
.page-banner .pb-extra{position:relative;flex-shrink:0;}
/* Favourites (28 Sep 2026) */
.fav-nav{margin:6px 0 4px;}
.fav-nav-head{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--s400);padding:6px 12px 4px;display:flex;align-items:center;gap:6px;}
.fav-nav .fav-item{position:relative;}
.fav-nav .fav-item .fav-x{margin-left:auto;opacity:0;border:none;background:none;color:var(--s400);cursor:pointer;padding:0 2px;font-size:15px;line-height:1;}
.fav-nav .fav-item:hover .fav-x{opacity:1;}
.fav-nav .fav-item .fav-kind{font-size:10px;font-weight:700;color:var(--s400);text-transform:uppercase;letter-spacing:.04em;}
body.sb-collapsed .fav-nav .nav-label,body.sb-collapsed .fav-nav-head span,body.sb-collapsed .fav-nav .fav-x{display:none;}
#tb-fav[aria-pressed="true"]{color:#d99a1e!important;}
#tb-clock-pill{display:inline-flex;align-items:center;gap:6px;}
body.limited-user #tb-search{display:none!important;}
@media (max-width:1100px){#tb-search kbd{display:none;}}
@media (max-width:900px){#tb-search .tb-search-lbl{display:none;}#tb-search{padding:6px 8px;}}
.tb-clock-btn{display:inline-flex;align-items:center;gap:6px;border-radius:20px;padding:5px 12px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:var(--font);background:#fff;border:1.5px solid var(--s200);color:var(--s700);white-space:nowrap;}
.tb-clock-btn.go{border-color:var(--g);color:var(--g);}
.tb-clock-btn.go:hover{background:var(--gl);}
.tb-clock-btn.brk{border-color:#f5c26b;color:#92400e;}
.tb-clock-btn.brk:hover{background:#fef3c7;}
.tb-clock-btn.end{border-color:#fecaca;color:#b91c1c;}
.tb-clock-btn.end:hover{background:#fef2f2;}
.tb-who{display:inline-flex;align-items:center;gap:6px;border:none;border-radius:20px;padding:5px 11px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:var(--font);background:var(--s100);color:var(--s700);margin-right:6px;}
.tb-who:hover{background:var(--s150);}
#tb-clock{display:flex;align-items:center;}
#tb-clock-pill button,.tb-who{white-space:nowrap;flex-shrink:0;}
@media (max-width:1100px){.tb-clock-btn .tb-clock-lbl{display:none;}.tb-clock-btn{padding:6px 8px;}#topbar-time{display:none;}}
@media (max-width:900px){.tb-who span{display:none;}#topbar-greeting{display:none!important;}}
body.limited-user .sb-nav > *:not(#nav-limited-tasks):not([data-page="messages"]):not(#fav-nav){display:none!important;}
body.limited-user #topbar-new-report,body.limited-user #tb-clock,
body.limited-user #task-tab-all,body.limited-user #task-tab-given,body.limited-user #task-tab-overview,body.limited-user #task-tab-team,body.limited-user #task-tab-recurring,body.limited-user #task-tab-ceo,body.limited-user #task-tab-projects,body.limited-user .field-group:has(> #task-project),
body.limited-user #btn-manage-recurring,body.limited-user #page-tasks button[onclick^="openTaskTemplatesModal"]{display:none!important;}
.sb-nav .nav-item[data-page]{position:relative;}
.nav-fav-star{margin-left:auto;display:flex;align-items:center;padding:2px;border-radius:4px;color:var(--s400);opacity:0;transition:opacity .12s;flex-shrink:0;}
.sb-nav .nav-item:hover .nav-fav-star,.nav-fav-star:focus{opacity:1;}
.nav-fav-star:hover{color:#d99a1e;background:rgba(0,0,0,.05);}
.nav-fav-star.on{color:#d99a1e;}
.nav-fav-star.on svg{fill:#f2b53a;}
body.sb-collapsed .nav-fav-star{display:none;}
@media (hover:none){.nav-fav-star{display:none;}}
#tb-fav[aria-pressed="true"] svg{fill:#f2b53a;}
/* Needs Attention (28 Sep 2026) */
.na-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.na-total{font-size:28px;font-weight:800;color:var(--s900);letter-spacing:-.02em;line-height:1;}
.na-total span{display:block;font-size:12px;font-weight:600;color:var(--s500);letter-spacing:0;margin-top:3px;}
.na-seg{display:inline-flex;background:var(--s100);border-radius:20px;padding:3px;}
.na-seg button{border:none;background:none;border-radius:16px;padding:6px 14px;font:600 12.5px var(--font);color:var(--s600);cursor:pointer;}
.na-seg button.on{background:#fff;color:var(--s900);box-shadow:0 1px 2px rgba(0,0,0,.08);}
.na-areas{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin-bottom:16px;}
.na-area{background:#fff;border:var(--bdr);border-radius:12px;padding:10px 12px;cursor:pointer;text-align:left;font-family:var(--font);}
.na-area b{display:block;font-size:22px;color:var(--s900);line-height:1.1;}
.na-area span{font-size:12px;color:var(--s500);font-weight:600;}
.na-area.on{border-color:#b45309;box-shadow:0 0 0 1px #b45309;}
.na-area.zero b{color:var(--s300,#cbd5e1);}
.na-group{background:#fff;border:var(--bdr);border-radius:var(--rlg);margin-bottom:12px;overflow:hidden;}
.na-group h3{margin:0;padding:12px 16px;font-size:14px;border-bottom:1px solid var(--s100);display:flex;justify-content:space-between;align-items:center;}
.na-row{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--s100);}
.na-row:last-child{border-bottom:none;}
.na-age{flex:0 0 58px;text-align:center;font-size:11.5px;font-weight:800;border-radius:8px;padding:5px 0;background:var(--s100);color:var(--s600);}
.na-age.mid{background:#fef3c7;color:#92400e;}
.na-age.old{background:#fee2e2;color:#991b1b;}
.na-row-main{flex:1;min-width:0;}
.na-row-main b{display:block;font-size:13.5px;color:var(--s900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.na-row-main span{font-size:12px;color:var(--s500);}
.na-owner{font-size:11.5px;font-weight:700;background:var(--gl);color:var(--g);border-radius:12px;padding:2px 9px;white-space:nowrap;}
.na-open{border:var(--bdr);background:#fff;border-radius:8px;padding:6px 12px;font:600 12.5px var(--font);cursor:pointer;color:var(--s800);}
@media (max-width:640px){.na-row{flex-wrap:wrap;}.na-owner{order:3;}}
/* Help Guide (27 Sep 2026) */
.hg-wrap{display:grid;grid-template-columns:240px minmax(0,1fr);gap:20px;align-items:start;margin-top:4px;}
.hg-rail{position:sticky;top:12px;background:#fff;border:var(--bdr);border-radius:var(--rlg);padding:12px 8px;max-height:calc(100vh - 120px);overflow:auto;}
.hg-rail-head{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--s400);padding:2px 10px 6px;}
.hg-item{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;background:none;border:none;border-radius:8px;padding:7px 10px;font:600 13px var(--font);color:var(--s700);cursor:pointer;text-align:left;}
.hg-item:hover{background:var(--s50);color:var(--s900);}
.hg-item.on{background:var(--gl);color:var(--g);}
.hg-item.warn{color:#b45309;}
.hg-n{font-size:11px;font-weight:700;color:var(--s400);background:var(--s100);border-radius:10px;padding:0 7px;line-height:18px;}
.hg-item.on .hg-n{background:#fff;color:var(--g);}
.hg-dept.open > .hg-item.dept{color:var(--s900);}
.hg-cats{margin:2px 0 6px 10px;padding-left:8px;border-left:2px solid var(--s100);}
.hg-item.cat{font-weight:500;font-size:12.5px;padding:5px 10px;}
.hg-item.cat.none{color:var(--s400);}
@media (max-width:900px){.hg-wrap{grid-template-columns:1fr;}.hg-rail{position:static;max-height:none;}}
/* HOME */
.welcome-bar{background:linear-gradient(135deg,var(--gd),var(--gm));border-radius:var(--rxl);padding:22px 28px;margin-bottom:22px;display:flex;align-items:center;justify-content:space-between;}
.welcome-bar h2{font-family:var(--fdisp);font-size:22px;color:#fff;font-weight:500;}
.welcome-bar p{font-size:13px;color:rgba(255,255,255,.65);margin-top:3px;}
.welcome-date{text-align:right;color:rgba(255,255,255,.55);font-size:12px;}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:22px;}
.kpi-card{background:#fff;border:var(--bdr);border-radius:var(--rlg);padding:16px 18px;box-shadow:var(--xs);transition:var(--tr);cursor:default;}
.kpi-card:hover{box-shadow:var(--sm);transform:translateY(-1px);}
.kpi-label{font-size:10.5px;color:var(--s400);text-transform:uppercase;letter-spacing:.5px;font-weight:600;}
.kpi-value{font-size:26px;font-weight:700;letter-spacing:-.5px;line-height:1.1;margin:5px 0 2px;}
.kpi-sub{font-size:11.5px;color:var(--s400);}
.kv-g{color:var(--gm);}.kv-w{color:var(--am);}.kv-r{color:var(--rd);}.kv-n{color:var(--s700);}
.hc-link{font-size:12px;color:var(--g);font-weight:600;cursor:pointer;border:none;background:none;font-family:var(--font);}
.hc-link:hover{text-decoration:underline;}
/* SHARED CARDS */
.sec{background:#fff;border:var(--bdr);border-radius:var(--rlg);margin-bottom:10px;overflow:hidden;box-shadow:var(--xs);}

/* ---------- Team Success Report — tighter, cleaner layout ----------
   Scoped to #role-staff only, deliberately — CX/Sales/Finance keep
   their current spacing exactly as-is; this isn't a global density
   change, just this one report per request. Reduces padding/gaps
   throughout (section headers, form boxes, field grids, inputs),
   drops the tinted background from plain form-box sections (kept only
   where it's actually load-bearing — the amber "Reporting Period" and
   "Workforce Intelligence" boxes still stand out, everything else
   reads as one continuous card instead of a stack of nested boxes),
   and tightens the step icon/kpi row so more fits above the fold
   without needing to scroll into every step. */
#role-staff .sh{padding:10px 16px;gap:9px;}
#role-staff .si{width:26px;height:26px;font-size:12.5px;border-radius:7px;}
#role-staff .st{font-size:13px;}
#role-staff .ss{font-size:11px;margin-top:0;}
#role-staff .sb-inner{padding:12px 14px;}
#role-staff .form-box{background:transparent;border:none;border-radius:0;padding:0 0 12px;margin-bottom:12px;border-bottom:1px solid var(--s100);}
#role-staff .form-box:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0;}
#role-staff .form-box[style*="fffbeb"]{background:#fffbeb!important;border:1px solid #fbbf24!important;border-radius:10px!important;padding:12px 14px!important;margin-bottom:12px!important;}
#role-staff .sublbl{font-size:10px;margin:0 0 8px;padding-top:0;border-top:none;}
#role-staff .fg{gap:10px;}
#role-staff .f{gap:3px;}
#role-staff .f label{font-size:10px;}
#role-staff .f input,#role-staff .f select,#role-staff .f textarea{padding:7px 9px;font-size:13px;}
#role-staff .f textarea{min-height:60px;}
#role-staff .krow{gap:7px;margin-bottom:14px!important;}
#role-staff #pw-wizard-bar{padding:14px 16px!important;margin-bottom:10px!important;}
#role-staff .big-num{padding:8px!important;}
.sh{padding:13px 18px;border-bottom:1px solid var(--s100);background:var(--s50);display:flex;align-items:center;gap:10px;}
.si{width:32px;height:32px;border-radius:var(--rsm);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
.ics{background:var(--bll);}.ienq{background:var(--gl);}.ippl{background:var(--pul);}.imet{background:var(--al);}
.st{font-size:13.5px;font-weight:600;}.ss{font-size:11.5px;color:var(--s400);margin-top:1px;}
.sb-inner{padding:14px 16px;display:flex;flex-direction:column;gap:0;}
.form-box{background:#fafcf9;border:1px solid var(--s200);border-radius:var(--rmd);padding:14px 16px;margin-bottom:10px;}
.form-box:last-child{margin-bottom:0;}
.form-box>.sublbl{margin-top:0;border-top:none;padding-top:0;margin-bottom:10px;}
.form-box>.sublbl::after{background:var(--s100);}
/* FORMS */
.fg{display:grid;grid-template-columns:1fr 1fr;gap:13px;}
.fg.c3{grid-template-columns:1fr 1fr 1fr;}.fg.c4{grid-template-columns:1fr 1fr 1fr 1fr;}.fg.c1{grid-template-columns:1fr;}
.f{display:flex;flex-direction:column;gap:4px;}
.f label{font-size:10.5px;font-weight:600;color:var(--s500);text-transform:uppercase;letter-spacing:.6px;}
.f input,.f select,.f textarea{width:100%;padding:9px 11px;border:var(--bdr);border-radius:var(--rmd);font-size:14px;font-family:var(--font);color:var(--s900);background:#fff;outline:none;transition:border-color .15s,box-shadow .15s;}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--g);box-shadow:0 0 0 3px rgba(30,92,30,.08);}
.f textarea{resize:vertical;min-height:72px;line-height:1.6;}
.fh{font-size:11px;color:var(--s400);font-style:italic;}
.req{color:var(--rd);}
.sublbl{font-size:10.5px;font-weight:700;color:var(--g);text-transform:uppercase;letter-spacing:.7px;margin:16px 0 10px;padding-top:14px;border-top:1px solid var(--s100);display:flex;align-items:center;gap:7px;}
.sublbl:first-child{margin-top:0;border-top:none;padding-top:0;}
.sublbl::after{content:'';flex:1;height:1px;background:var(--s100);}
.form-box{background:#fafcf9;border:1px solid var(--s200);border-radius:var(--rmd);padding:16px;margin-bottom:12px;}
.form-box:last-child{margin-bottom:0;}
.form-box>.sublbl{margin-top:0;border-top:none;padding-top:0;font-size:10px;color:var(--s500);}
.form-box>.sublbl::after{background:var(--s100);}
.big-num{display:flex;flex-direction:column;gap:4px;}
.big-num label{font-size:10.5px;font-weight:600;color:var(--s500);text-transform:uppercase;letter-spacing:.6px;}
.big-num input{width:100%;padding:14px 16px;border:var(--bdr);border-radius:var(--rmd);font-size:28px;font-weight:700;font-family:var(--font);color:var(--s900);background:#fff;outline:none;text-align:center;transition:border-color .15s;}
.big-num input:focus{border-color:var(--g);box-shadow:0 0 0 3px rgba(30,92,30,.08);}
/* KPI ROW */
.krow{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:9px;margin-bottom:18px;}
.kc{background:#fff;border:var(--bdr);border-radius:var(--rlg);padding:13px 15px;box-shadow:var(--xs);display:flex;flex-direction:column;min-height:80px;}
.kl{font-size:10px;color:var(--s400);text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-bottom:auto;padding-bottom:6px;}
.kv{font-size:22px;font-weight:700;letter-spacing:-.5px;line-height:1;margin-top:auto;}
.ks{font-size:11px;color:var(--s400);margin-top:3px;}
.kg{color:var(--gm);}.kw{color:var(--am);}.kb{color:var(--rd);}.kn{color:var(--s700);}
.pw{margin-top:5px;background:var(--s100);border-radius:4px;height:3px;overflow:hidden;}
.pb{height:3px;border-radius:4px;transition:width .5s ease;}
.pbg{background:var(--gm);}.pba{background:var(--am);}.pbr{background:var(--rd);}
/* ROLE CARDS */
.rc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px;}
.rc{background:#fff;border:1.5px solid var(--s200);border-radius:var(--rlg);padding:16px 18px;cursor:pointer;transition:var(--tr);}
.rc:hover{border-color:var(--gb);box-shadow:var(--sm);}
.rc.active{border-color:var(--g);border-width:2px;background:var(--gx);box-shadow:0 0 0 3px rgba(30,92,30,.07);}
.rc-icon{font-size:20px;margin-bottom:7px;display:block;}
.rc-title{font-size:13.5px;font-weight:600;color:var(--s900);}
.rc.active .rc-title{color:var(--g);}
.rc-sub{font-size:11.5px;color:var(--s400);margin-top:2px;}
.rpane{display:none;}
.rpane.active{display:block;animation:fadeUp .2s ease;}
/* PERIOD TOGGLE */
.ptog{display:inline-flex;background:var(--s100);border-radius:var(--rmd);padding:3px;margin-bottom:18px;border:var(--bdr);}
.pbtn{padding:7px 26px;border-radius:8px;border:none;background:transparent;font-size:13px;font-weight:500;color:var(--s500);cursor:pointer;font-family:var(--font);transition:var(--tr);}
.pbtn.active{background:#fff;color:var(--s900);font-weight:600;box-shadow:var(--xs),0 0 0 .5px var(--s200);}
.daily-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;background:var(--al);color:var(--am);border-radius:20px;font-size:12px;font-weight:600;margin-bottom:14px;}
.weekly-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;background:var(--bll);color:var(--bl);border-radius:20px;font-size:12px;font-weight:600;margin-bottom:14px;}
/* ABSENCE TABLE */
.abtbl{width:100%;border-collapse:collapse;margin-bottom:10px;}
.abtbl th{font-size:10px;font-weight:600;color:var(--s500);text-transform:uppercase;letter-spacing:.5px;padding:7px 9px;background:var(--s50);border:var(--bdr);text-align:left;}
.abtbl td{padding:8px 10px;border:var(--bdr);vertical-align:middle;min-width:80px;}
.abtbl td input,.abtbl td select{width:100%;padding:6px 8px;border:var(--bdr);border-radius:var(--rsm);font-size:13px;font-family:var(--font);color:var(--s900);background:#fff;outline:none;}.abs-tag-group{display:flex;flex-wrap:wrap;gap:4px;}
.delbtn{background:var(--rl);border:none;color:var(--rd);width:24px;height:24px;border-radius:var(--rsm);cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;margin:auto;}
.addrow{background:var(--gl);color:var(--g);border:1px solid var(--gb);padding:7px 14px;border-radius:var(--rmd);font-size:12.5px;font-weight:600;cursor:pointer;font-family:var(--font);transition:var(--tr);display:inline-flex;align-items:center;gap:5px;}
.addrow:hover{background:#d4ecd4;}
.ab-empty{font-size:12.5px;color:var(--s400);font-style:italic;padding:8px 2px;}
.abs-tag-group{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;}
.abs-tag{padding:5px 12px;border-radius:20px;border:1.5px solid var(--s200);background:#fff;font-size:12px;font-weight:500;cursor:pointer;font-family:var(--font);transition:var(--tr);color:var(--s600);}
.abs-tag.sel-ok{background:var(--gl);border-color:var(--g);color:var(--g);font-weight:600;}
.abs-tag.sel-warn{background:var(--al);border-color:var(--ab);color:var(--am);font-weight:600;}
.abs-tag.sel-bad{background:var(--rl);border-color:var(--rb);color:var(--rd);font-weight:600;}
/* RE-ENGAGEMENT */
.retbl{width:100%;border-collapse:collapse;margin-bottom:10px;}
.retbl th{font-size:10px;font-weight:600;color:var(--s500);text-transform:uppercase;letter-spacing:.5px;padding:7px 10px;background:var(--s50);border:var(--bdr);text-align:left;}
.retbl td{padding:6px 8px;border:var(--bdr);vertical-align:middle;}
.retbl td input,.retbl td select{width:100%;padding:6px 8px;border:var(--bdr);border-radius:var(--rsm);font-size:13px;font-family:var(--font);color:var(--s900);background:#fff;outline:none;}
/* SUBMIT BAR */
.subbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:20px;padding:16px 20px;background:#fff;border:var(--bdr);border-radius:var(--rlg);box-shadow:var(--md);position:sticky;bottom:16px;z-index:10;}
.btnsub{background:var(--g);color:#fff;border:none;padding:11px 30px;border-radius:var(--rmd);font-size:14px;font-weight:600;cursor:pointer;font-family:var(--font);transition:var(--tr);}
.btnsub:hover{background:var(--gd);transform:translateY(-1px);box-shadow:0 4px 14px rgba(30,92,30,.28);}
.btnsub:disabled{background:var(--s200);color:var(--s400);cursor:not-allowed;transform:none;box-shadow:none;}
.btndraft{background:#fff;color:var(--g);border:1.5px solid var(--gb);padding:11px 20px;border-radius:var(--rmd);font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font);transition:var(--tr);}
.btndraft:hover{background:var(--gl);}
.smsg{font-size:12.5px;font-weight:500;}.smsg.ok{color:var(--gm);}.smsg.err{color:var(--rd);}
.sbl{display:flex;align-items:center;gap:9px;}
/* GENERATE BAR */
.genbar{background:linear-gradient(135deg,var(--gl),var(--s50));border:1.5px dashed var(--gb);border-radius:var(--rlg);padding:16px 20px;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;gap:14px;}
.genbar .gt{font-size:14px;font-weight:600;color:var(--gd);}
.genbar .gs{font-size:12px;color:var(--s500);margin-top:2px;}
.btn-gen{background:var(--g);color:#fff;border:none;padding:10px 18px;border-radius:var(--rmd);font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font);transition:var(--tr);white-space:nowrap;}
.btn-gen:hover{background:var(--gd);}.btn-gen:disabled{background:var(--s200);color:var(--s400);cursor:not-allowed;}
/* PIPELINE */
.pipe-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-bottom:14px;}
.pipe-toolbar{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;align-items:center;}
.pipe-toolbar input,.pipe-toolbar select{padding:8px 12px;border:var(--bdr);border-radius:var(--rmd);font-size:13.5px;font-family:var(--font);color:var(--s900);background:#fff;outline:none;box-shadow:var(--xs);}
.pipe-toolbar input{width:190px;}
.btn-pa{background:var(--g);color:#fff;border:none;padding:9px 18px;border-radius:var(--rmd);font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font);transition:var(--tr);}
.btn-pa:hover{background:var(--gd);}
.pipe-cards{display:flex;flex-direction:column;gap:8px;}
.pipe-card{background:#fff;border:var(--bdr);border-radius:var(--rlg);overflow:hidden;box-shadow:var(--xs);transition:var(--tr);}
.pipe-card:hover{box-shadow:var(--sm);}
.pipe-card-hd{padding:14px 18px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;gap:10px;}
.pipe-card-hd:hover{background:var(--s50);}
.pipe-card-l{display:flex;align-items:center;gap:11px;flex:1;min-width:0;}
.pipe-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pipe-meta{font-size:12px;color:var(--s400);margin-top:1px;}
.pipe-card-r{display:flex;align-items:center;gap:7px;flex-shrink:0;}
.sp{display:inline-flex;align-items:center;padding:3px 9px;border-radius:20px;font-size:11.5px;font-weight:600;}
.sp-new{background:#FFFBE6;color:#92720A;border:1px solid #E8CC70;}
.sp-photos{background:#E8F4FD;color:#1A5C80;border:1px solid #90C8E8;}
.sp-est{background:#EDF2FF;color:#2D4DB0;border:1px solid #A0B4F0;}
.sp-followup{background:#FFF0E6;color:#8B4A1A;border:1px solid #F0B880;}
.sp-won{background:var(--gl);color:var(--g);border:1px solid var(--gb);}
.sp-lostni,.sp-losto{background:var(--rl);color:var(--rd);border:1px solid var(--rb);}
.sp-lostna{background:#F5EAF0;color:#7A2060;border:1px solid #D8A0C8;}
.sp-retemp{background:var(--tll);color:var(--tl);border:1px solid #90D0D0;}
.sp-reperm{background:#EEE6FA;color:#5A2E8A;border:1px solid #C0A0E8;}
.src-pill{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;background:var(--s100);color:var(--s600);}
.tag-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:12px;font-size:11.5px;font-weight:500;background:var(--s100);color:var(--s600);border:var(--bdr);}
.tag-pill button{background:none;border:none;cursor:pointer;color:var(--s400);font-size:11px;line-height:1;padding:0 0 0 2px;}
.tag-pill button:hover{color:var(--rd);}
.tag-suggest{display:inline-flex;align-items:center;padding:4px 10px;border-radius:12px;font-size:11.5px;font-weight:500;background:var(--s100);color:var(--s600);border:var(--bdr);cursor:pointer;transition:var(--tr);}
.tag-suggest:hover,.tag-suggest.selected{background:var(--gl);color:var(--g);border-color:var(--gb);}
/* REPORT CARDS */
.rlist{display:flex;flex-direction:column;gap:9px;}
.rcard{background:#fff;border:var(--bdr);border-radius:var(--rlg);overflow:hidden;box-shadow:var(--xs);}
.rcard:hover{box-shadow:var(--sm);}
.rcard-hd{padding:14px 18px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;}
.rcard-hd:hover{background:var(--s50);}
.rcard-l{display:flex;align-items:center;gap:11px;}
.rcard-ico{width:36px;height:36px;border-radius:var(--rmd);display:flex;align-items:center;justify-content:center;font-size:16px;}
.isales{background:var(--gl);}.icx{background:var(--bll);}.istaff{background:var(--pul);}
.rcard-title{font-size:13.5px;font-weight:600;}
.rcard-meta{font-size:11.5px;color:var(--s400);margin-top:1px;}
.rcard-r{display:flex;align-items:center;gap:7px;}
.bdg{display:inline-flex;align-items:center;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;}
.bds{background:var(--gl);color:var(--g);}.bdc{background:var(--bll);color:var(--bl);}.bdp{background:var(--pul);color:var(--pu);}
.bdw{background:var(--bll);color:var(--bl);}.bdd{background:var(--al);color:var(--am);}
.chev{font-size:11px;color:var(--s400);transition:transform .2s;display:inline-block;}
.chev.open{transform:rotate(180deg);}
.rcard-bd{display:none;border-top:var(--bdr);}
.rcard-bd.open{display:block;}
.rgrid{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px;padding:16px 18px;}
.ri{display:flex;flex-direction:column;padding:7px 0;border-bottom:1px solid var(--s100);}
.rik{font-size:10px;color:var(--s400);text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-bottom:1px;}
.riv{font-size:13px;color:var(--s900);white-space:pre-wrap;line-height:1.4;}
.rdiv{grid-column:1/-1;font-size:10.5px;font-weight:700;color:var(--g);text-transform:uppercase;letter-spacing:.6px;padding:9px 0 3px;border-top:1px solid var(--s150);margin-top:3px;}
.rdiv:first-child{border-top:none;margin-top:0;padding-top:0;}
.atbl{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:4px;grid-column:1/-1;}
.atbl th{background:var(--s100);padding:6px 10px;text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--s500);border:var(--bdr);}
.atbl td{padding:6px 10px;border:var(--bdr);color:var(--s900);}
.atbl tr:nth-child(even) td{background:var(--s50);}
.rcard-edit-btn{background:var(--al);color:var(--am);border:1px solid var(--ab);padding:4px 10px;border-radius:var(--rsm);font-size:11.5px;font-weight:600;cursor:pointer;font-family:var(--font);transition:var(--tr);margin-left:6px;}
.rcard-edit-btn:hover{background:#f0c070;}
.rcard-del-btn{background:var(--rl);color:var(--rd);border:1px solid var(--rb);padding:4px 10px;border-radius:var(--rsm);font-size:11.5px;font-weight:600;cursor:pointer;font-family:var(--font);transition:var(--tr);margin-left:2px;}
.rcard-del-btn:hover{background:var(--rd);color:#fff;}
/* DASHBOARD */
.dcontrols{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;align-items:center;}
.dcontrols select,.dcontrols input[type=text]{padding:8px 12px;border:var(--bdr);border-radius:var(--rmd);font-size:13.5px;font-family:var(--font);color:var(--s900);background:#fff;outline:none;box-shadow:var(--xs);}
.dcontrols input[type=text]{width:200px;}
.btnref{background:#fff;color:var(--g);border:1.5px solid var(--gb);padding:8px 16px;border-radius:var(--rmd);font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font);transition:var(--tr);}
.btnref:hover{background:var(--gl);}
.boss-hdr{background:linear-gradient(135deg,var(--gd),var(--gm));border-radius:var(--rlg);padding:20px 24px;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;}
.boss-hdr h2{font-family:var(--fdisp);font-size:20px;color:#fff;font-weight:500;}
.boss-hdr p{font-size:12px;color:rgba(255,255,255,.65);margin-top:3px;}
.wor-section-hd{font-family:var(--fdisp);font-size:18px;font-weight:500;color:var(--s900);margin:0 0 4px;}
.wor-grid{display:grid;gap:14px;}
.wor-grid-2{grid-template-columns:repeat(2,1fr);}
.wor-grid-3{grid-template-columns:repeat(3,1fr);}
.wor-grid-4{grid-template-columns:repeat(4,1fr);}
.wor-kpi{background:#fff;border:var(--bdr);border-radius:var(--rlg);padding:16px 18px;box-shadow:var(--xs);display:flex;flex-direction:column;gap:4px;}
.wor-kpi-val{font-size:28px;font-weight:700;line-height:1.1;}
.wor-kpi-lbl{font-size:11.5px;color:var(--s500);font-weight:500;}
.wor-kpi-sub{font-size:11px;color:var(--s400);}
.wor-kpi.good .wor-kpi-val{color:var(--g);}
.wor-kpi.warn .wor-kpi-val{color:var(--am);}
.wor-kpi.bad  .wor-kpi-val{color:var(--rd);}
.wor-kpi.neutral .wor-kpi-val{color:var(--s700);}
.wor-card{background:#fff;border:var(--bdr);border-radius:var(--rlg);padding:18px 20px;box-shadow:var(--xs);}
.wor-card-ttl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--s500);margin-bottom:12px;display:flex;align-items:center;gap:6px;}
.wor-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--s100);font-size:13.5px;}
.wor-row:last-child{border-bottom:none;}
.wor-row-lbl{color:var(--s600);}
.wor-row-val{font-weight:700;color:var(--s900);}
.wor-row-val.good{color:var(--g);}
.wor-row-val.warn{color:var(--am);}
.wor-row-val.bad{color:var(--rd);}
.wor-highlight{background:var(--gl);border:1.5px solid var(--gb);border-radius:var(--rlg);padding:16px 20px;}
.wor-highlight.complaints-hl{background:var(--rl);border-color:var(--rb);}
.wor-quote{font-size:13.5px;font-style:italic;color:var(--s700);line-height:1.6;margin:8px 0 4px;}
.wor-quote-attr{font-size:12px;color:var(--s400);font-weight:600;}
.wor-cancel-list{list-style:none;padding:0;margin:0;}
.wor-cancel-list li{font-size:13px;color:var(--s700);padding:6px 0;border-bottom:1px solid var(--s100);line-height:1.5;}
.wor-cancel-list li:last-child{border-bottom:none;}
.wor-cancel-list li strong{color:var(--s900);}
.wor-badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:700;}
.wor-badge.good{background:var(--gl);color:var(--gd);}
.wor-badge.warn{background:var(--al);color:var(--am);}
.wor-badge.bad{background:var(--rl);color:var(--rd);}
@media(max-width:900px){.wor-grid-4{grid-template-columns:repeat(2,1fr);}.wor-grid-3{grid-template-columns:repeat(2,1fr);}.wor-grid-2{grid-template-columns:1fr;}}
@media(max-width:600px){.wor-grid-4,.wor-grid-3{grid-template-columns:1fr;}}

.bdash-row{display:grid;gap:10px;align-items:stretch;}
.bdash-summary{width:100%;}
.bcard{background:#fff;border:var(--bdr);border-radius:var(--rlg);overflow:hidden;box-shadow:var(--sm);}
.bcard-hd{padding:10px 12px;border-bottom:var(--bdr);display:flex;align-items:center;gap:8px;}
.bcard-ico{width:26px;height:26px;border-radius:var(--rsm);display:flex;align-items:center;justify-content:center;font-size:12px;}
.bcard-ttl{font-size:12.5px;font-weight:600;color:var(--s700);}
.bcard-bd{padding:10px 12px;}
.bst{display:flex;align-items:baseline;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--s100);}
.bst:last-child{border-bottom:none;}
.bst-lbl{font-size:12px;color:var(--s600);}
.bst-val{font-size:14px;font-weight:700;}
.good{color:var(--gm);}.warn{color:var(--am);}.bad{color:var(--rd);}

/* Shared Reporting Engine components — Architecture Section 7. Reuses
   .bcard/.bst above (already Reports-only) as the KPI/Group Card; these are
   the small additions for status, warnings, trend, and Report Health. */
.rpt-status-badge{font-size:9px;margin-left:5px;vertical-align:1px;cursor:default;}
.rpt-warn-badge{font-size:10px;margin-left:4px;color:var(--am);cursor:default;}
.rpt-trend{font-size:10.5px;font-weight:700;margin-left:6px;}
.rpt-trend-good{color:#16a34a;}
.rpt-trend-bad{color:#dc2626;}
.rpt-trend-flat{color:#9ca3af;font-weight:500;}
.rpt-health{background:#fff;border:var(--bdr);border-radius:var(--rlg);box-shadow:var(--xs);padding:12px 14px;margin-bottom:12px;}
.rpt-health-ttl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--s500);margin-bottom:8px;}
.rpt-health-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:10px;}
.rpt-health-stat{display:flex;flex-direction:column;align-items:flex-start;}
.rpt-health-val{font-size:20px;font-weight:800;line-height:1.1;}
.rpt-health-lbl{font-size:10.5px;color:var(--s400);margin-top:2px;}

.bflags{padding:10px 16px;border-top:var(--bdr);background:var(--s50);display:flex;flex-wrap:wrap;gap:4px;}
.bf{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;font-size:11.5px;font-weight:600;}
.bfok{background:var(--gl);color:var(--g);}.bfw{background:var(--al);color:var(--am);}.bfb{background:var(--rl);color:var(--rd);}
/* RECENT */
.rec-list{display:flex;flex-direction:column;gap:8px;}
.rec-card{background:#fff;border:var(--bdr);border-radius:var(--rlg);overflow:hidden;box-shadow:var(--xs);}
.rec-head{padding:13px 17px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;}
.rec-head:hover{background:var(--s50);}
.rec-title{font-size:13.5px;font-weight:600;}
.rec-meta{font-size:11.5px;color:var(--s400);margin-top:1px;}
.rec-body{display:none;border-top:var(--bdr);padding:14px 17px;}
.rec-body.open{display:block;}
/* MISC */
.empty{text-align:center;padding:56px 20px;color:var(--s400);background:#fff;border:var(--bdr);border-radius:var(--rlg);}
.empty-icon{font-size:36px;margin-bottom:8px;}
.loading{text-align:center;padding:44px;color:var(--s400);font-size:14px;background:#fff;border:var(--bdr);border-radius:var(--rlg);}
.spin{display:inline-block;width:16px;height:16px;border:2px solid var(--s200);border-top-color:var(--g);border-radius:50%;animation:sp .7s linear infinite;margin-right:7px;vertical-align:middle;}
@keyframes sp{to{transform:rotate(360deg);}}

/* ============================================================
   SHARED BUTTON/ACTION COMPONENT SYSTEM — Design System Phase 3,
   Step 3. Extends the more-complete of two prior partial systems
   found in the codebase (.cx-scope .btn) to portal-wide scope.
   .cx-scope's own copy of these rules is left untouched — since
   .cx-scope .btn has higher specificity than plain .btn, pages
   inside Compliments/Complaints/Cancellation keep using their own
   existing block exactly as before; this new one is for everywhere
   else. See the Button & Action Component System doc for the full
   audit, variant mapping, and exceptions (.crc-scope/.ts-report-scope
   are NOT covered by this — see that doc). */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  height:40px;padding:0 var(--space-5);border-radius:var(--radius-md);
  font-size:12.5px;font-weight:600;border:1px solid transparent;
  background:var(--bg-surface);color:var(--text-primary);
  cursor:pointer;white-space:nowrap;font-family:var(--font);
  transition:background var(--transition),border-color var(--transition),
             color var(--transition),transform var(--transition),box-shadow var(--transition);}
.btn svg{width:15px;height:15px;flex-shrink:0;}
.btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--shadow-sm);}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring-color);}
.btn:active{transform:scale(0.97);box-shadow:none;}
.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none;}

.btn-primary{background:var(--accent);color:#fff;}
.btn-secondary{background:var(--bg-surface);border-color:var(--border-strong);color:var(--text-primary);}
.btn-ghost{background:transparent;color:var(--text-secondary);}
.btn-ghost:hover:not(:disabled){border-color:var(--border-strong);}
.btn-danger{background:var(--danger);color:#fff;}
.btn-danger-ghost{background:transparent;color:var(--danger);border-color:transparent;}
.btn-danger-ghost:hover:not(:disabled){background:var(--danger-soft);}

.btn-sm{height:28px;padding:0 var(--space-3);font-size:12px;}
.btn-lg{height:48px;padding:0 var(--space-6);font-size:14px;}
.btn-icon{width:40px;padding:0;}
.btn-icon.btn-sm{width:28px;}
.btn-block{width:100%;}

.btn-toggle{background:transparent;color:var(--text-secondary);border-color:transparent;}
.btn-toggle.active{background:#fff;box-shadow:var(--shadow-xs);color:var(--text-primary);}

.btn-pill{border-radius:var(--radius-full);}

/* Context/dropdown menu items — a genuinely distinct pattern from
   standalone .btn actions, found while completing the Tasks pilot
   (the task row's "..." overflow menu). Full-width, left-aligned,
   no visible chrome except on hover — not a fit for .btn's own
   sizing/shape conventions, so documented as its own small
   component rather than forced into .btn. */
.menu-item{display:flex;align-items:center;gap:var(--space-2);width:100%;text-align:left;
  padding:var(--space-2) var(--space-3);background:none;border:none;
  font-size:12.5px;color:var(--text-primary);cursor:pointer;font-family:var(--font);}
.menu-item:hover{background:var(--bg-hover);}
.menu-item:focus-visible{outline:none;background:var(--bg-hover);box-shadow:inset 0 0 0 2px var(--focus-ring-color);}
.menu-item-danger{color:var(--danger);border-top:1px solid var(--border);}
.menu-item-danger:hover{background:var(--danger-soft);}

/* ============================================================
   TEAM CHAT / DM — hover-revealed message actions (react, +Task),
   reaction pills, and the emoji/GIF picker popups. Per explicit
   request: the +Task action moves from an always-visible pill to a
   floating icon button that only appears on hover, matching the
   react trigger next to it. */
.chat-msg-wrap{position:relative;}
.chat-hover-actions{opacity:0;pointer-events:none;transition:opacity .12s;display:flex;flex-wrap:wrap;gap:3px;align-items:center;
  /* Floats over the top corner of the bubble (24 Sep) - it used to sit beside
     the bubble and reserve ~350px even while hidden, squashing messages to a
     few letters wide in narrow windows. */
  position:absolute;top:-30px;z-index:6;background:#fff;border:1px solid var(--s150);border-radius:18px;padding:3px 4px;box-shadow:0 4px 14px rgba(0,0,0,.12);max-width:calc(100% - 16px);}
.chat-msg-wrap[data-mine="true"] .chat-hover-actions{right:6px;}
.chat-msg-wrap[data-mine="false"] .chat-hover-actions{left:6px;}
.chat-msg-wrap:hover .chat-hover-actions{opacity:1;pointer-events:auto;}
/* Easier to use (24 Sep): stays open while its emoji choices are open,
   waits a moment before hiding so a small mouse slip doesn't close it,
   one row (it wrapped to two rows in the chat window and covered the
   message below), and a bridge over the gap up to the emoji choices. */
.chat-hover-actions{flex-wrap:nowrap;width:max-content;max-width:none;transition:opacity .12s ease .35s;}
.chat-msg-wrap:hover .chat-hover-actions,.chat-hover-actions:hover,.chat-hover-actions:focus-within,.chat-hover-actions:has(.chat-reaction-picker){opacity:1;pointer-events:auto;transition-delay:0s;}
.chat-reaction-picker::after{content:'';position:absolute;left:0;right:0;top:100%;height:12px;}
#dm-messages{overflow-x:hidden;padding-top:40px !important;}
/* Nothing in the thread shrinks to fit (30 Sep 2026: a batch of photos was squeezed to nothing). */
#dm-messages > *{flex-shrink:0;}
.chat-msg-wrap[data-mine="true"] .chat-reaction-picker{right:0;left:auto;}
.chat-msg-wrap[data-mine="false"] .chat-reaction-picker{left:0;right:auto;}
/* Messenger-style (28 Sep 2026): React, Reply and More sit beside the
   bubble, vertically centred, instead of floating over the messages above;
   everything else is in the More menu. */
.chat-hover-actions{position:static;align-self:center;background:none;border:0;box-shadow:none;padding:0 2px;gap:2px;flex-shrink:0;}
.chat-hover-actions.menu-open{opacity:1;pointer-events:auto;}
.chat-hover-actions > .chat-icon-btn{background:transparent;box-shadow:none;color:var(--s400);width:28px;height:28px;}
.chat-hover-actions > .chat-icon-btn:hover{background:rgba(0,0,0,.06);color:var(--s700);}
.chat-more-pop{display:none;}
.chat-more-pop.open{display:flex;flex-direction:column;position:fixed;z-index:3000;background:#fff;border:1px solid var(--s150);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.16);padding:5px;min-width:200px;max-height:70vh;overflow-y:auto;}
.chat-more-pop .chat-icon-btn{width:100%;height:auto;border-radius:8px;justify-content:flex-start;gap:10px;padding:7px 10px;box-shadow:none;border:0;background:none;color:var(--s600);}
.chat-more-pop .chat-icon-btn::after{content:attr(title);font-size:13px;color:var(--s800);font-family:var(--font);white-space:nowrap;}
.chat-more-pop .chat-icon-btn:hover{background:var(--s50);}
.chat-more-pop .chat-icon-btn svg{flex-shrink:0;width:15px;height:15px;}
#dm-messages{padding-top:20px !important;}
#chat-dock .chat-hover-actions{gap:1px;padding:0 1px;}
#chat-dock .chat-hover-actions .chat-icon-btn{width:24px;height:24px;}
.chat-hover-actions .chat-icon-btn{border-color:transparent;width:25px;height:25px;}
.chat-icon-btn{background:#fff;border:1px solid var(--s200);color:var(--s500);cursor:pointer;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;padding:0;box-shadow:0 1px 3px rgba(0,0,0,.1);flex-shrink:0;font-family:var(--font);}
.chat-icon-btn:hover{background:var(--s50);color:var(--s700);border-color:var(--s300);}
.chat-reactions-row{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px;}
.chat-reaction-pill{display:inline-flex;align-items:center;gap:3px;background:#fff;border:1px solid var(--s200);border-radius:12px;padding:1px 8px;font-size:11.5px;cursor:pointer;font-family:var(--font);color:var(--s700);}
.chat-reaction-pill:hover{border-color:var(--s300);}
.chat-reaction-pill.mine{background:var(--gl);border-color:var(--gb);color:var(--gd);}
.chat-reaction-picker,.chat-emoji-picker,.chat-gif-picker{position:absolute;background:#fff;border:1px solid var(--s200);border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.16);z-index:80;}
.chat-reaction-picker{padding:5px 7px;display:flex;gap:3px;border-radius:24px;bottom:100%;margin-bottom:6px;}
.chat-reaction-picker button{background:none;border:none;cursor:pointer;font-size:19px;padding:3px;border-radius:50%;line-height:1;}
.chat-reaction-picker button:hover{background:var(--s100);transform:scale(1.15);}
.chat-emoji-picker{width:260px;max-height:280px;overflow-y:auto;padding:8px;bottom:100%;left:0;margin-bottom:8px;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;}
.chat-emoji-picker button{background:none;border:none;cursor:pointer;font-size:19px;padding:4px;border-radius:6px;line-height:1;}
.chat-emoji-picker button:hover{background:var(--s100);}
.chat-gif-picker{width:300px;max-height:340px;bottom:100%;left:0;margin-bottom:8px;display:flex;flex-direction:column;}

/* In-app image viewer — replaces window.open() so a pasted/sent photo
   opens without leaving the portal for a new browser tab. */
.chat-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:2000;display:flex;align-items:center;justify-content:center;cursor:zoom-out;}
.chat-lightbox img{max-width:90vw;max-height:88vh;object-fit:contain;border-radius:6px;cursor:default;}
.chat-lightbox-close{position:absolute;top:18px;right:22px;background:rgba(255,255,255,.15);border:none;color:#fff;width:38px;height:38px;border-radius:50%;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.chat-lightbox-close:hover{background:rgba(255,255,255,.28);}

/* Reply quote — the small "replying to" preview shown both in the
   composer banner context and, once sent, inside the message bubble
   itself (WhatsApp/Slack-style). */
.chat-reply-quote{border-left:3px solid var(--gb);background:rgba(0,0,0,.04);border-radius:6px;padding:4px 8px;margin-bottom:5px;cursor:pointer;font-size:12px;}
.chat-reply-quote .chat-reply-name{font-weight:700;color:var(--g);}
.chat-reply-quote .chat-reply-snippet{color:var(--s600);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;}
/* On a "mine" (green) bubble the default dark quote text is illegible
   against the green background - lighter variant for that case. */
.chat-msg-wrap[data-mine="true"] .chat-reply-quote{background:rgba(255,255,255,.15);border-left-color:rgba(255,255,255,.6);}
.chat-msg-wrap[data-mine="true"] .chat-reply-quote .chat-reply-name{color:#fff;}
.chat-msg-wrap[data-mine="true"] .chat-reply-quote .chat-reply-snippet{color:rgba(255,255,255,.75);}

/* Brief highlight when jumping to a message via its reply quote, so
   it's obvious which one just scrolled into view. */
@keyframes chatJumpHighlight{0%{background:var(--al,#fef3c7);}100%{background:transparent;}}
.chat-jump-highlight{animation:chatJumpHighlight 1.4s ease-out;border-radius:16px;}


/* ============================================================
   SHARED CARD/CONTAINER COMPONENT SYSTEM — Design System Phase 3,
   Step 4. Same approach as the button system: extends the more
   complete of the prior partial attempts (.cx-scope .card) to
   portal-wide scope, rather than inventing a new one. .cx-scope's
   own copy is left untouched (same specificity reasoning as .btn).
   Confirmed this is a safe direction before writing it: the
   already-global .home-card/.mtg-card/.wor-card/.md-card classes
   are already nearly identical to .cx-scope .card's values, so this
   consolidates real, pre-existing agreement rather than overriding
   real disagreement. */
.card{background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);
  transition:box-shadow var(--transition),border-color var(--transition),transform var(--transition);}
.card-pad{padding:var(--space-5);}
.card-interactive{cursor:pointer;}
.card-interactive:hover{box-shadow:var(--shadow-md);border-color:var(--border-strong);transform:translateY(-1px);}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border);}
.card-title{font-size:14px;font-weight:600;}
.card-body{padding:var(--space-5);}

/* Nested-card hierarchy rule (brief: "nested cards/boxes should have
   a clear visual hierarchy") — a card placed inside another .card
   drops its own shadow and border, keeping only a subtle background
   tint and reduced padding, so the eye reads one outer boundary
   instead of two competing ones. */
.card .card{box-shadow:none;border:none;background:var(--bg-sunken);}
.card .card .card-pad,.card .card .card-body{padding:var(--space-3);}

/* ============================================================
   SHARED FORM CONTROL SYSTEM — Design System Phase 3, Step 5.
   Same approach as .btn and .card: extends the more complete of two
   prior partial attempts (.cx-scope .input-field/.select-field/
   .textarea-field/.field-group/.field-label/.field-hint/.field-error)
   to portal-wide scope, rather than inventing a new one. .cx-scope's
   own copy — and its separate, smaller .cx-input/.cx-textarea
   attempt — are both left untouched; higher specificity there means
   pages inside Compliments/Complaints/Cancellation keep using
   whichever they already use, unaffected.
   Two deliberate value changes from the .cx-scope original, both
   aligning to the typography spec already agreed in Phase 3 Step 2
   rather than carrying over non-standard sizes:
     - font-size 13.5px -> 13px (--text-base, "Body text")
     - hint/error 11.5px -> 11px (--text-xs, "Helper text")
   Height changed from 36px to 40px, matching .btn's own default
   height — inputs and buttons sitting in the same row (a search bar
   next to a button, a form's own Save button) should line up, and
   .btn's 40px was already the portal-wide standard before this. */
.input-field,.select-field,.textarea-field{width:100%;background:var(--bg-surface);border:1px solid var(--border-strong);
  border-radius:var(--radius-md);padding:0 var(--space-3);height:40px;
  font-size:13px;font-family:var(--font);color:var(--text-primary);
  transition:border-color var(--transition),box-shadow var(--transition);}
.textarea-field{height:auto;padding:var(--space-3);resize:vertical;min-height:90px;line-height:1.5;}
.input-field:focus,.select-field:focus,.textarea-field:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.input-field:disabled,.select-field:disabled,.textarea-field:disabled{background:var(--bg-sunken);color:var(--text-tertiary);cursor:not-allowed;}
.input-field::placeholder,.textarea-field::placeholder{color:var(--text-tertiary);}

/* Field wrapper + label/hint/error - gap matches the typography spec's
   own "Form label-to-input: --space-1 (4px)" rule exactly, rather
   than .cx-scope's own 6px (close, but not one of the nine actual
   spacing tokens - this is the token that value was rounding toward). */
.field-group{display:flex;flex-direction:column;gap:var(--space-1);}
.field-label{font-size:12.5px;font-weight:600;color:var(--text-secondary);}
.field-label .req{color:var(--danger);}
.field-hint{font-size:11px;color:var(--text-tertiary);}
.field-error{font-size:11px;color:var(--danger);display:flex;align-items:center;gap:4px;}
.input-field.has-error,.select-field.has-error,.textarea-field.has-error{border-color:var(--danger);}
.input-field.has-error:focus,.select-field.has-error:focus,.textarea-field.has-error:focus{box-shadow:0 0 0 3px var(--danger-soft);}

/* Checkbox/radio — no rich prior system existed for these in
   .cx-scope (only two narrow, single-purpose rules), so this is a
   new, small convention rather than an extension of something that
   was already there. Sized and colored to match the rest of this
   system, not browser defaults. */
.field-checkbox,.field-radio{display:flex;align-items:center;gap:var(--space-2);font-size:13px;color:var(--text-primary);cursor:pointer;}
.field-checkbox input,.field-radio input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;flex-shrink:0;}

/* Layout rhythm between fields/sections - matches the typography
   spec's own "Form field spacing: --space-5" and "Form section
   spacing: --space-6" rules exactly, so a form built from these
   classes needs no per-form guessing about spacing. */
.form-row{margin-bottom:var(--space-5);}
.form-row:last-child{margin-bottom:0;}
.form-section{margin-bottom:var(--space-6);}
.form-section:last-child{margin-bottom:0;}

/* Spreadsheet-like inline editing for the Hours Log tables (Wage
   Subsidies modal + Accounts' Hours Monitoring accordion) - looks
   like plain text until hovered/focused, so the table doesn't look
   like a form full of boxes, but is still obviously editable once you
   interact with it. */
.hours-inline-edit{border:1px solid transparent;background:transparent;text-align:right;width:100%;font-size:12.5px;font-family:var(--font);padding:2px 5px;border-radius:4px;transition:background .1s,border-color .1s;color:inherit;}
.hours-inline-edit:hover{background:var(--s50);}
.hours-inline-edit:focus{outline:none;background:#fff;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);}

/* Per direct report ("its not clear in the table that the name is
   clickable too") - a dotted underline that's always visible (not
   just on hover, since hover alone isn't discoverable on touch) plus
   a color change on hover/focus, so a clickable name reads as one
   without needing to look and feel identical to a standard hyperlink. */
.clickable-name{text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;text-decoration-color:var(--s400,#9ca3af);transition:color .12s,text-decoration-color .12s;}
.clickable-name:hover{color:var(--g,#1a5c1a);text-decoration-color:var(--g,#1a5c1a);}




.btn.is-loading{position:relative;pointer-events:none;}
.btn.is-loading>*:not(.spin){visibility:hidden;}
.btn.is-loading .spin{position:absolute;margin-right:0;}

.toast{position:fixed;bottom:24px;right:24px;background:var(--s900);color:#fff;padding:12px 18px;border-radius:var(--rmd);font-size:13.5px;font-weight:500;box-shadow:var(--lg);z-index:3200;transform:translateY(100px);opacity:0;transition:all .3s cubic-bezier(.34,1.56,.64,1);}
.toast.show{transform:translateY(0);opacity:1;}
.toast.ok{background:var(--gd);}.toast.err{background:var(--rd);}
.wo{display:none;}
.edit-log{background:var(--al);border:1px solid var(--ab);border-radius:var(--rmd);padding:10px 14px;margin-top:12px;font-size:12px;color:var(--am);}
.edit-log-title{font-weight:700;margin-bottom:4px;font-size:11px;text-transform:uppercase;letter-spacing:.5px;}
.edit-log-entry{padding:3px 0;border-top:1px solid var(--ab);margin-top:3px;}
.edit-log-entry:first-of-type{border-top:none;margin-top:0;}
.csv-drop{border:2px dashed var(--gb);border-radius:var(--rlg);padding:28px 20px;text-align:center;background:var(--gx);cursor:pointer;transition:var(--tr);}
.csv-drop:hover,.csv-drop.drag{border-color:var(--g);background:var(--gl);}
.csv-drop p{font-size:13.5px;color:var(--s500);margin-top:6px;}
.csv-preview{margin-top:14px;overflow-x:auto;}
.csv-preview table{width:100%;border-collapse:collapse;font-size:12.5px;}
.csv-preview th{background:var(--s100);padding:6px 10px;text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--s500);border:var(--bdr);}
.csv-preview td{padding:6px 10px;border:var(--bdr);color:var(--s900);}
@media(max-width:768px){
  /* SIDEBAR */
  .sidebar{transform:translateX(-100%);transition:transform .3s ease;}
  .sidebar.open{transform:translateX(0);}
  .main{margin-left:0;}
  #mob-menu-btn{display:flex!important;align-items:center;justify-content:center;}

  /* TOPBAR */
  .topbar{display:flex;align-items:center;padding:0 16px;height:52px;}
  .topbar-title{font-size:15px;}

  /* PAGE */
  .page{padding:16px 14px 100px;font-size:14px;}

  /* GRIDS */
  .home-grid,.rc-grid{grid-template-columns:1fr!important;}
  .fg.c3,.fg.c4{grid-template-columns:1fr 1fr;}

  /* MESSAGES — show either the conversation list or the open thread,
     never both side by side (the fixed 260px sidebar + a flex:1 thread
     pane were both fighting for space that doesn't exist on a phone -
     reported directly as "doesnt fit my phone at all"). Default state
     is the list, full width; .dm-mobile-thread-open (added whenever a
     conversation is opened, removed by the new back button) swaps
     which pane is visible. */
  #dm-sidebar{width:100%!important;}
  #dm-thread-pane{display:none!important;}
  #dm-container.dm-mobile-thread-open #dm-sidebar{display:none!important;}
  #dm-container.dm-mobile-thread-open #dm-thread-pane{display:flex!important;}
  .dm-mobile-back{display:flex!important;}

  /* CARDS */
  .card{padding:16px 14px;}
  .card-title{font-size:15px;}

  /* QUICK ACTIONS */
  .qa-grid{grid-template-columns:1fr 1fr!important;gap:10px!important;}
  .qa-btn{padding:18px 10px!important;font-size:13px!important;}
  .qa-icon{font-size:26px!important;}

  /* DASHBOARD STATS */
  .home-stat{padding:14px 12px;}
  .home-stat-val{font-size:26px;}
  .home-stat-label{font-size:12px;}

  /* MEETINGS & TASKS */
  .mtg-title{font-size:13.5px;}
  .mtg-head{padding:12px 14px;}
  .action-row{padding:10px 10px;gap:8px;}
  .action-text{font-size:13.5px;}
  .apill{font-size:11px;padding:4px 9px;}

  /* KANBAN — stack columns on mobile */
  .sr-kanban-board{grid-template-columns:1fr!important;}
  .sr-kanban-col-cards{max-height:none;}

  /* TASKS BOARD — same stacking approach as the Service Register kanban
     above. Reported directly: columns beyond the first were only ever
     partially "peeking" at the screen edge with no clear way to tell
     it was scrollable, which read as broken rather than as a working
     side-scroller. Stacking vertically (scroll down, not sideways) is
     both clearer and consistent with the other kanban board in this
     app. overflow-x:auto is turned off too - with one column, there's
     nothing left to horizontally scroll to. */
  .task-kanban-grid{grid-template-columns:1fr!important;overflow-x:visible!important;}

  /* CHAT MESSAGE BUBBLES — reported directly: messages and shared
     attachments overflowing the screen in a DM thread, even after
     fixing the sidebar/thread toggle. Root cause: .chat-hover-actions
     (react/reply/forward/+task/edit/delete) is only ever revealed via
     .chat-msg-wrap:hover, which doesn't meaningfully exist on a touch
     device - but it's hidden with opacity:0, not display:none, so it
     was invisibly reserving its own full width (up to 6 icon buttons)
     as a flex sibling of the message bubble on every single message,
     every time, on every phone. That reserved-but-invisible width,
     alongside the bubble's own max-width:70%, is what was pushing
     rows past the viewport. Since :hover was already the only way to
     reach these actions at all, and that path was already dead on
     mobile, hiding this outright removes no working functionality -
     there wasn't any here to begin with on a touch screen. */
  .chat-hover-actions{display:none!important;}
  /* Tap a message to show its actions (14 Nov 2026 audit: on a narrow screen there was no way to react, reply, edit or delete). chat-actions.js adds .tapped. */
  .chat-msg-wrap.tapped .chat-hover-actions{display:flex!important;opacity:1!important;pointer-events:auto!important;position:absolute!important;top:-38px;flex-wrap:wrap;max-width:calc(100vw - 32px);}

  /* FORMS */
  .field-row{flex-direction:column!important;gap:12px!important;}
  .field label{font-size:14px;}
  input,select,textarea{font-size:15px!important;padding:11px 13px!important;}

  /* TABLES — make scrollable */
  .table-wrap,table{overflow-x:auto;display:block;width:100%;}
  th,td{font-size:13px;padding:9px 10px;}

  /* BUTTONS */
  .btn{padding:11px 18px;font-size:14px;}
  .btn-sm{padding:8px 14px;font-size:13px;}

  /* TASK CARDS */
  .task-card{padding:14px 12px;}
  .task-title{font-size:14px;}
  .task-meta{font-size:12px;}

  /* SR CARDS */
  .sr-kanban-card{padding:14px 14px;}
  .sr-card-title{font-size:14px;}

  /* PENDING TASKS OWNER GRID */
  .owner-grid{grid-template-columns:1fr!important;}

  /* NOTIF DROPDOWN */
  .notif-dropdown{width:calc(100vw - 24px);right:12px;}

  /* STAFF DIRECTORY TABLE */
  .staff-table td,.staff-table th{font-size:13px;padding:8px 10px;}

  /* MY REPORTS */
  .rec-card{padding:14px 12px;}
  .rec-title{font-size:14px;}
  .rec-meta{font-size:12px;}
  .rcard-edit-btn,.rcard-del-btn{padding:6px 10px;font-size:13px;}
}

/* Extra small phones */
@media(max-width:390px){
  .page{padding:12px 10px 100px;}
  input,select,textarea{font-size:16px!important;}
  .qa-btn{padding:14px 8px!important;font-size:12px!important;}
}