/* ── growth.wiser brand typeface ── */
  /* ── growth.wiser design system tokens — light is the brand default ── */
  :root{
    --gw-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='30' y='18' width='52' height='26' rx='13' fill='%23000'/%3E%3Crect x='18' y='52' width='52' height='26' rx='13' fill='%23000'/%3E%3C/svg%3E");
    --bg:#f7f8fb;--surface:#ffffff;--surface2:#eef0f6;--line:#e0e3ee;
    --txt:#141622;--muted:#5d6480;--faint:#68708d;
    --accent:#2e3192;--accent-d:#2e3192;
    --brand:#ef4136;--brand-d:#c72a21;--brand-soft:rgba(239,65,54,.10);
    --blue:#545bb4;--amber:#e08b1e;--red:#e5342a;--green:#1f9d6b;--purple:#7e84c9;
    --ok:#1f9d6b;--warn:#e08b1e;--danger:#e5342a;--info:#2e3192;--cyan:#4a63c0;--orange:#f37b6f;--slate:#6f7593;
    --panel3:#f2f3f8;--panel:#f7f8fb;--panel2:#eef0f6;--inputbg:#ffffff;
    --r:16px;
    /* WS1 — type scale: six steps, nothing between them */
    --fs-display:28px;   /* page titles */
    --fs-metric:22px;    /* KPI numbers (hero variant is 30px, WS3) */
    --fs-title:16px;     /* card and section titles */
    --fs-body:14px;      /* body, table cells, inputs, buttons */
    --fs-meta:12px;      /* sub-text, hints, dates */
    --fs-label:11px;     /* uppercase column headers, eyebrows, badges */
    --font-mono:'JetBrains Mono', ui-monospace, monospace;
    /* WS8 — one motion standard */
    --ease:160ms cubic-bezier(0,0,.2,1);
    /* WS2 — status pills, five states, light theme */
    --pill-pos-t:#1f9d6b;--pill-pos-b:#e7f6ef;
    --pill-prg-t:#a1660f;--pill-prg-b:#fdf3e3;
    --pill-inf-t:#2e3192;--pill-inf-b:#ecedf6;
    --pill-neu-t:#6f7593;--pill-neu-b:#eef0f6;
    --pill-alr-t:#c72a21;--pill-alr-b:#fdebe9;
    --shadow-rest:0 1px 2px rgba(20,22,34,.05);
    --es-mark:#c8ccdd;--accent-h:#212267;--notice-bg:#fbf0dc;
  }
  :root[data-theme="dark"]{
    --bg:#12141f;--surface:#1a1d2c;--surface2:#222639;--line:#2e3350;
    --txt:#e8eaf4;--muted:#9aa0ba;--faint:#8790ad;
    --accent:#7e84c9;--accent-d:#545bb4;
    --brand:#ef4136;--brand-d:#c72a21;--brand-soft:rgba(239,65,54,.13);
    --blue:#7e84c9;--amber:#e6a144;--red:#f37b6f;--green:#35b07f;--purple:#a9addb;
    --ok:#35b07f;--warn:#e6a144;--danger:#f37b6f;--info:#7e84c9;--cyan:#8f9bd8;--orange:#f7a79f;--slate:#9aa0ba;
    --panel:#161927;--panel2:#1e2233;--panel3:#141724;--inputbg:#1a1d2c;
    /* WS2 — pill counterparts for dark */
    --pill-pos-t:#35b07f;--pill-pos-b:rgba(53,176,127,.15);
    --pill-prg-t:#e6a144;--pill-prg-b:rgba(230,161,68,.15);
    --pill-inf-t:#a9addb;--pill-inf-b:rgba(126,132,201,.15);
    --pill-neu-t:#9aa0ba;--pill-neu-b:rgba(154,160,186,.15);
    --pill-alr-t:#f37b6f;--pill-alr-b:rgba(239,65,54,.15);
    --shadow-rest:0 1px 2px rgba(0,0,0,.4);
    --es-mark:#3a4160;--accent-h:#6a71bd;--notice-bg:rgba(230,161,68,.13);
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--txt);font-family:'Forma DJR Display',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:var(--fs-body);line-height:1.5;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
  /* Keyboard focus: a visible ring on any interactive element (accessibility). */
  :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:10px}
  /* Table rows respond to hover so scanning long lists is easier. */
  tbody tr{transition:background .12s}
  tbody tr:hover{background:var(--surface2)}
  /* Skeleton loaders: shimmering placeholders while data loads. */
  .skel{position:relative;overflow:hidden;background:var(--surface2);border-radius:10px}
  .skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);animation:skel 1.2s infinite}
  @keyframes skel{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

  /* Adapt to the screen: comfortable on laptops, uses the space on wide monitors.
     Capped so text lines stay readable rather than stretching edge to edge. */
  .wrap{max-width:1360px;margin:0 auto;padding:20px}
  @media(min-width:1500px){ .wrap{max-width:1560px} }
  @media(min-width:1800px){ .wrap{max-width:1800px;padding:20px 28px} }
  @media(min-width:2200px){ .wrap{max-width:2100px} }
  header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:0;position:sticky;top:0;z-index:50;background:var(--bg);padding:12px 0 12px;border-bottom:1px solid var(--line)}
  h1{font-size:var(--fs-metric);font-weight:700;margin:0;letter-spacing:-.2px;color:var(--accent)}
  h1 span{color:var(--brand)}
  .sub{color:var(--muted);font-size:var(--fs-meta);margin-top:2px}
  .toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  button{font-family:inherit;font-size:var(--fs-body);color:var(--txt);background:var(--surface2);border:1px solid var(--line);border-radius:999px;padding:8px 14px;cursor:pointer;transition:.12s;display:inline-flex;align-items:center;gap:6px}
  button:hover{background:var(--surface2);border-color:var(--line)}
  button:active{transform:scale(.98)}
  button.primary{background:var(--accent-d);border-color:var(--accent);color:#ffffff}
  button.primary:hover{background:var(--accent-h)}
  button.ghost{background:transparent}
  button.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,transparent)}
  button.danger:hover{background:var(--pill-alr-b)}
  .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px}
  .kpi{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden;box-shadow:var(--shadow-rest);transition:border-color var(--ease)}
  .kpi:hover{border-color:var(--faint)}
  .kpi .label{font-size:var(--fs-label);font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
  /* a label that wraps to two lines must not push its number below the others:
     every label gets the same two-line box, anchored at the bottom, so the big
     figures across the row share one baseline whatever the label length */
  #kpis .kpi .label{min-height:3.1em;display:flex;align-items:flex-end;line-height:1.5}
  .kpi .val{font-family:var(--font-mono);font-size:30px;font-weight:700;letter-spacing:-.02em}
  /* WS3 — value and delta share one baseline instead of stacking */
  .kpi .valrow{display:flex;align-items:baseline;gap:8px}
  .kpi .delta{font-size:var(--fs-meta);font-weight:700;color:var(--muted)}
  .kpi .delta.up{color:var(--ok)}
  .kpi .delta.down{color:var(--danger)}
  .kpi .delta.flat{color:var(--muted)}
  .grid2{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-bottom:20px}
  @media(max-width:900px){.grid2{grid-template-columns:1fr}}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow-rest)}
  .card h2{font-size:var(--fs-title);font-weight:700;margin:0 0 16px;color:var(--txt);text-transform:none;letter-spacing:-.01em}
  .bar-row{display:flex;align-items:center;gap:10px;margin-bottom:9px;font-size:var(--fs-body)}
  .bar-row .name{width:130px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bar-track{flex:1;height:18px;background:var(--surface2);border-radius:10px;overflow:hidden;display:flex}
  .bar-seg{height:100%}
  .bar-row .num{width:60px;text-align:right;flex-shrink:0;color:var(--muted);font-variant-numeric:tabular-nums}
  .legend{display:flex;gap:14px;flex-wrap:wrap;font-size:var(--fs-label);color:var(--muted);margin-top:10px}
  .legend span{display:flex;align-items:center;gap:5px}
  .dot{width:12px;height:12px;display:inline-block;border-radius:0;
    -webkit-mask:var(--gw-mark) center/contain no-repeat;mask:var(--gw-mark) center/contain no-repeat}
  .tabs{display:flex;gap:4px;margin-bottom:14px;flex-wrap:wrap}
  .tab{padding:7px 13px;font-size:var(--fs-body);border-radius:999px;cursor:pointer;color:var(--muted);border:1px solid transparent;position:relative;transition:color .15s;white-space:nowrap}
  .tab:hover{background:var(--surface2)}
  .tab.active{background:var(--surface2);color:var(--txt);border-color:var(--line)}
  /* main nav bar: one clean line, horizontal scroll instead of wrapping */
  #viewTabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;-ms-overflow-style:none;padding-bottom:8px;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent 100%);mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent 100%)}
  #viewTabs::-webkit-scrollbar{height:5px}
  #viewTabs::-webkit-scrollbar-thumb{background:var(--line,#2a2f3a);border-radius:10px}
  #viewTabs::-webkit-scrollbar-track{background:transparent}
  #viewTabs .tab{display:inline-flex;align-items:center;gap:0;flex:0 0 auto;height:34px;line-height:1}
  #viewTabs .count-badge{margin-left:6px;flex:0 0 auto}
  /* alert state: a badge turns red when it carries something overdue/urgent */
  .count-badge.alert{background:var(--pill-alr-b);color:var(--pill-alr-t)}
  /* group separators inside the nav row: a thin rule + tiny uppercase label */
  #viewTabs .nav-sep{flex:0 0 auto;align-self:center;width:1px;height:18px;background:var(--line);margin:0 8px}
  #viewTabs .nav-grp{flex:0 0 auto;align-self:center;font-size:var(--fs-label);font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--faint);padding:0 8px 0 0;user-select:none;pointer-events:none}
  #mainNavCard{padding-left:12px;padding-right:12px;position:sticky;z-index:40;background:var(--bg);border-radius:0;border-left:none;border-right:none;margin-bottom:14px}
  /* Tabs are neutral; colour is reserved for state (active tab, alert badges). */
  .tab[data-view]{--tabc:var(--accent)}
  /* colored toolbar buttons */
  .tbtn{background:var(--surface);border:1px solid var(--line);color:var(--accent);border-radius:999px;padding:8px 16px;font-size:var(--fs-body);font-weight:500;cursor:pointer;transition:background .12s,border-color .12s;font-family:inherit;white-space:nowrap}
  .tbtn:hover{background:var(--surface2)}
  .tbtn b{font-weight:700;margin-right:1px}

  /* ═══ Wiser Travel design system — sister brand skin (activated by the company
     switcher via html[data-company="travel"]). Inversion of growth.wiser:
     warm leads (sunset terracotta #e05b2e), cool accents (horizon indigo #2e3192),
     warm sand neutrals, warm-tinted shadows, Outfit typeface, JetBrains Mono for data.
     The whole desk is built on these tokens, so remapping them reskins everything. ═══ */
  :root[data-company="travel"]{
    --bg:#faf8f5;--surface:#ffffff;--surface2:#f4f0ea;--line:#e9e2d8;
    --txt:#1f1a16;--muted:#877b6c;--faint:#b0a494;
    --accent:#c44a20;--accent-d:#e05b2e;--accent-h:#c44a20;
    --brand:#e05b2e;--brand-d:#c44a20;--brand-soft:rgba(224,91,46,.10);
    --blue:#545bb4;--amber:#d98a1c;--red:#d3402a;--green:#1f9d6b;--purple:#7e84c9;
    --ok:#1f9d6b;--warn:#d98a1c;--danger:#d3402a;--info:#2e3192;--cyan:#4a63c0;--orange:#e97847;--slate:#877b6c;
    --panel:#faf8f5;--panel2:#f4f0ea;--panel3:#f6f2ec;--inputbg:#ffffff;
    --pill-pos-t:#1f9d6b;--pill-pos-b:#e4f5ee;
    --pill-prg-t:#a86407;--pill-prg-b:#faf0dc;
    --pill-inf-t:#2e3192;--pill-inf-b:#ecedf6;
    --pill-neu-t:#665c50;--pill-neu-b:#f4f0ea;
    --pill-alr-t:#a83322;--pill-alr-b:#fbe5e1;
    --shadow-rest:0 1px 2px rgba(31,26,22,.06);
    --notice-bg:#faf0dc;--es-mark:#d6ccbe;
  }
  :root[data-company="travel"][data-theme="dark"]{
    --bg:#1b1613;--surface:#251e19;--surface2:#2f2721;--line:#3c322a;
    --txt:#f4f0ea;--muted:#b0a494;--faint:#998c7c;
    --accent:#e97847;--accent-d:#c44a20;--accent-h:#9e3a19;
    --brand:#e97847;--brand-d:#c44a20;--brand-soft:rgba(224,91,46,.16);
    --blue:#7e84c9;--amber:#e6a144;--red:#f37b6f;--green:#35b07f;--purple:#a9addb;
    --ok:#35b07f;--warn:#e6a144;--danger:#f37b6f;--info:#a9addb;--cyan:#8f9bd8;--orange:#f5a284;--slate:#b0a494;
    --panel:#201a16;--panel2:#2a231d;--panel3:#1e1814;--inputbg:#251e19;
    --pill-pos-t:#35b07f;--pill-pos-b:rgba(53,176,127,.15);
    --pill-prg-t:#e6a144;--pill-prg-b:rgba(230,161,68,.15);
    --pill-inf-t:#a9addb;--pill-inf-b:rgba(126,132,201,.18);
    --pill-neu-t:#b0a494;--pill-neu-b:rgba(176,164,148,.15);
    --pill-alr-t:#f37b6f;--pill-alr-b:rgba(211,64,42,.18);
    --shadow-rest:0 1px 2px rgba(0,0,0,.4);
  }
  :root[data-company="travel"] body{
    font-family:'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  }
  /* the sister brand keeps the family's pill/radius signature; travel active nav = sunset */
  :root[data-company="travel"] #sideNav .tab.active{background:var(--accent-d)}
  :root[data-company="travel"][data-theme="dark"] #sideNav .tab.active{background:var(--accent-d)}
  :root[data-company="travel"] .wd-by{letter-spacing:.1em}

  /* ── Wiser Travel: company switcher (SHOGUN only) + travel accents ── */
  .co-switch{display:flex;background:var(--surface2);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px;margin:0 6px 14px}
  .co-switch button{flex:1;min-width:0;border:none;background:transparent;border-radius:999px;padding:5px 4px;font-size:10px;font-weight:700;color:var(--muted);cursor:pointer;font-family:inherit;white-space:nowrap;transition:background var(--ease),color var(--ease);display:inline-flex;align-items:center;justify-content:center;gap:4px}
  .co-switch .co-ic{width:15px;height:15px;flex:0 0 auto;border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,.07);display:inline-flex;align-items:center;justify-content:center}
  .co-switch .co-ic svg{width:9px;height:9px;display:block}
  .co-switch button.active{background:var(--accent-d);color:#fff}
  .co-switch button.co-tr.active{background:var(--brand-d)}
  #grpTravel{color:var(--brand-d)}
  :root[data-theme="dark"] #grpTravel{color:var(--brand)}
  .tpipe{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
  @media(max-width:900px){.tpipe{grid-template-columns:1fr 1fr}}
  .tpipe .tcol{background:var(--panel3);border:1px solid var(--line);border-radius:10px;padding:8px;min-height:90px}
  .tpipe .tcol .thead{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.1em;font-weight:700;margin:2px 2px 8px;display:flex;justify-content:space-between}
  .tpipe .tcol .thead .n{font-family:var(--font-mono);color:var(--faint);font-weight:500}
  .tmcard{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-bottom:7px;cursor:pointer;transition:border-color var(--ease)}
  .tmcard:hover{border-color:var(--accent)}
  .tmcard .t{font-weight:700;font-size:var(--fs-meta);line-height:1.3}
  .tmcard .m{font-size:var(--fs-label);color:var(--muted)}
  .tcomp-form{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:var(--panel3);border:1px solid var(--line);border-radius:10px;padding:12px;margin-top:10px}
  .tcomp-form .full{grid-column:1/-1}
  .tsrc{font-family:var(--font-mono);font-size:11px}

  /* ── Quote: preview + print. The document is always on white paper,
     whatever the theme — it is a document, not a screen. ── */
  #tOfferOverlay{position:fixed;inset:0;background:rgba(20,22,34,.72);z-index:120;display:none;overflow-y:auto;padding:26px 16px 60px}
  #tOfferOverlay.show{display:block}
  #tOfferBar{max-width:820px;margin:0 auto 12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:#fff}
  #tOfferBar .sp{flex:1}
  .tdoc{background:#fff;color:#141622;max-width:820px;margin:0 auto;border-radius:8px;box-shadow:0 24px 60px rgba(0,0,0,.4);
    padding:46px 54px;font-size:12.5px;line-height:1.55;font-family:'Outfit',system-ui,sans-serif}
  .tdoc .phead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;border-bottom:1.5px solid #c9cddc;padding-bottom:8px;margin-bottom:22px;font-size:11px;color:#5d6480}
  .tdoc .phead b{color:#2e3192;font-size:12.5px;display:block}
  .tdoc h3{color:#c44a20;font-size:14px;margin:22px 0 6px}
  .tdoc .note{font-size:10.5px;color:#5d6480;font-style:italic;margin:6px 0 0;line-height:1.5}
  .tdoc table{width:100%;border-collapse:collapse;font-size:11.5px;margin-top:6px}
  .tdoc th{background:#f4f0ea;text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.06em;padding:6px 8px;border:1px solid #e0d9cf;color:#4a423a}
  .tdoc td{padding:6px 8px;border:1px solid #e0d9cf;vertical-align:top}
  .tdoc td.n{font-family:'JetBrains Mono',monospace;text-align:right;white-space:nowrap}
  .tdoc tr.sub td{background:#faf8f5;font-weight:700}
  .tdoc .addr{text-align:center;margin-bottom:16px}
  .tdoc .bdg{display:inline-block;font-size:9.5px;font-weight:700;border-radius:999px;padding:1px 8px;background:#ecedf6;color:#2e3192}
  .tdoc .bdg.x{background:#e4f5ee;color:#1f9d6b}
  .tdoc .sig{margin-top:28px}
  @media print{
    body *{visibility:hidden !important}
    #tOfferOverlay,#tOfferOverlay *{visibility:visible !important}
    #tOfferOverlay{position:absolute;inset:0;background:#fff;padding:0;overflow:visible;display:block !important}
    #tOfferBar{display:none !important}
    .tdoc{box-shadow:none;border-radius:0;max-width:none;margin:0;padding:0 6mm}
    .tdoc h3{break-after:avoid}
    .tdoc table{break-inside:avoid}
    @page{margin:14mm 12mm}
  }
  /* ── iOS safe areas: keep content clear of the status bar, Dynamic Island and home indicator ── */
  body{
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
    padding-bottom:env(safe-area-inset-bottom);
  }
  /* the sticky header's own background fills the status-bar strip, so nothing scrolls under it */
  header{
    top:0;
    padding-top:calc(12px + env(safe-area-inset-top));
  }

  /* ── mobile (phones) ── */
  @media (max-width: 720px){
    .wrap{padding:12px}
    /* extra breathing room under the status bar / Dynamic Island */
    header{padding:calc(14px + env(safe-area-inset-top)) 12px 10px;gap:8px;margin-left:-12px;margin-right:-12px}
    header h1{font-size:var(--fs-metric);line-height:1.25}
    .toolbar{gap:6px !important}
    .tbtn{padding:7px 10px;font-size:var(--fs-meta)}
    .country-sel{flex-wrap:wrap;gap:5px}
    /* KPI cards: two per row instead of six across */
    .kpis{grid-template-columns:repeat(2,1fr) !important;gap:8px}
    .kpi{padding:11px 12px}
    .kpi .kpi-val,.kpi b{font-size:var(--fs-metric) !important}
    /* tabs scroll horizontally instead of wrapping into a tall block */
    .tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
    .tabs::-webkit-scrollbar{display:none}
    .tab{white-space:nowrap;flex:0 0 auto}
    /* cards + tables */
    .card{padding:16px}
    table{font-size:var(--fs-meta)}
    th,td{padding:7px 6px}
    /* modals: near full-screen sheets */
    .modal{max-width:100% !important;width:100%;max-height:92vh;overflow-y:auto;border-radius:16px 14px 0 0;margin-top:auto}
    .modal-bg{align-items:flex-end;padding:0}
    .modal-actions{position:sticky;bottom:0;background:var(--surface);padding-top:10px}
    .field-row{grid-template-columns:1fr !important}
    .frow{grid-template-columns:1fr !important}
    .frow .field{grid-column:auto !important}
    /* pipeline board: one column at a time, swipe across */
    #pipelineHost .pipe-cols{display:flex !important;grid-template-columns:none !important;overflow-x:auto;gap:10px;-webkit-overflow-scrolling:touch}
    #pipelineHost .pipe-cols > div{min-width:78vw;flex:0 0 auto}
    /* filters stack */
    .filters{flex-direction:column;align-items:stretch}
    .filters input,.filters select{width:100%}
    /* tap targets */
    button{min-height:34px}
    input,select,textarea{font-size:var(--fs-title)} /* prevents iOS zoom-on-focus */
  }
  .tab[data-view].active::after{content:"";position:absolute;left:11px;right:11px;bottom:2px;height:2px;border-radius:10px;background:var(--accent)}
  /* sub-tabs carry no view of their own; they are a filter, so they read as
     selected state rather than as five different colours */
  .tabs .tab.active{background:var(--surface2);color:var(--txt);font-weight:700}
  .tabs .tab{color:var(--muted);border:none}
  .tabs .tab:not([data-view]).active::after{content:none}
  .tabs .tab .count-badge{font-family:var(--font-mono);font-size:11px}
  .tabs .tab .count-badge.alert{color:var(--danger);background:transparent;font-weight:700}
  .filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
  input,select,textarea{font-family:inherit;font-size:var(--fs-body);color:var(--txt);background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:8px 10px;outline:none}
  input:focus,select:focus{border-color:var(--accent)}
  input::placeholder{color:var(--faint)}
  select option{background:var(--surface2);color:var(--txt)}
  table{width:100%;border-collapse:collapse;font-size:var(--fs-body)}
  th{text-align:left;font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700;padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer;user-select:none;white-space:nowrap;position:sticky;top:0;background:var(--surface);z-index:2}
  th:hover{color:var(--txt)}
  td{padding:12px;border-bottom:1px solid var(--panel3);vertical-align:middle}
  /* WS4 — numbers are read by column, so they get a fixed-width face and align right */
  td.money,th.money,td.num,th.num{text-align:right}
  td.money,td.num{font-family:var(--font-mono);font-weight:500}
  /* dead rows stay legible but stop competing for attention */
  tr.dead td{color:var(--muted)}
  /* WS4 — a date that has passed is the one thing in a row that must be read */
  .overdue{color:var(--brand-d);font-weight:700}
  :root[data-theme="dark"] .overdue{color:var(--danger)}
  tr:hover td{background:var(--surface2)}
  .pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:var(--fs-label);font-weight:700;white-space:nowrap}
  /* WS2 — the only five states a pill may express. Anything else is decoration. */
  .pill.pos{background:var(--pill-pos-b);color:var(--pill-pos-t)}
  .pill.prg{background:var(--pill-prg-b);color:var(--pill-prg-t)}
  .pill.inf{background:var(--pill-inf-b);color:var(--pill-inf-t)}
  .pill.neu{background:var(--pill-neu-b);color:var(--pill-neu-t)}
  .pill.alr{background:var(--pill-alr-b);color:var(--pill-alr-t)}
  .row-actions{display:flex;gap:4px;justify-content:flex-end;min-width:96px;visibility:hidden;transition:visibility var(--ease)}
  tr:hover .row-actions{visibility:visible}
  .row-actions button{padding:4px 7px;font-size:var(--fs-label)}
  .empty{text-align:center;color:var(--faint);padding:24px;font-size:var(--fs-body)}
  /* WS7 — an empty view still has to say what belongs here and how to start */
  .es{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px;
    background:var(--panel);border-radius:16px;text-align:center}
  .es .mark{width:34px;height:34px;flex:0 0 auto;background:var(--es-mark);
    -webkit-mask:var(--gw-mark) center/contain no-repeat;mask:var(--gw-mark) center/contain no-repeat}
  .es h4{margin:0;font-size:var(--fs-title);font-weight:700;color:var(--txt)}
  .es p{margin:0;font-size:var(--fs-meta);color:var(--muted);max-width:34ch;line-height:1.5}
  .es .acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:4px}
  .es .acts button{border-radius:999px;padding:8px 16px;font-size:var(--fs-body);font-weight:700;
    border:none;background:var(--accent);color:#fff;cursor:pointer;font-family:inherit;
    transition:background var(--ease),transform var(--ease)}
  .es .acts button:active{transform:scale(.97)}
  .es .acts button.ghost{background:transparent;border:1px solid var(--line);color:var(--accent);font-weight:500}

  .money{font-family:var(--font-mono);font-weight:500;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
  th.money{font-weight:700}
  /* an empty numeric cell means "not applicable", and must not read as zero */
  .money .na{color:var(--faint)}
  .modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:50;overflow-y:auto}
  .modal-bg.show{display:flex}
  .modal{background:var(--surface);border:1px solid var(--line);border-radius:16px;width:100%;max-width:560px;padding:22px;box-shadow:0 24px 60px rgba(0,0,0,.45)}
  .modal h3{margin:0 0 16px;font-size:var(--fs-title);font-weight:700}
  .field{margin-bottom:13px}
  .field label{display:block;font-size:var(--fs-meta);color:var(--muted);margin-bottom:5px}
  .lbl{display:block;font-size:var(--fs-label);color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin:12px 0 6px}
  .field input,.field select,.field textarea{width:100%}
  .field textarea{resize:vertical;min-height:50px}
  /* Multi-pick list (task ↔ clients). It lives inside .field, so every rule here
     must out-specify `.field label{display:block}` and `.field input{width:100%}` —
     without that the checkbox stretches the row and the name is pushed to the edge. */
  .pk{border:1px solid var(--line);border-radius:12px;background:var(--inputbg);overflow:hidden}
  .pk .pk-head{display:flex;align-items:center;gap:10px;padding:8px 10px;border-bottom:1px solid var(--line);background:var(--panel3)}
  .pk .pk-hint{flex:1 1 auto;min-width:0;font-size:var(--fs-label);color:var(--muted);line-height:1.35}
  .pk .pk-head button{flex:0 0 auto;padding:3px 11px;font-size:var(--fs-label);font-weight:600;font-family:inherit;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--accent);cursor:pointer}
  .pk .pk-head button:hover{background:var(--surface2)}
  .pk .pk-search{padding:8px 10px 2px}
  .pk .pk-search input{width:100%;padding:6px 9px;font-size:var(--fs-meta)}
  .pk .pk-list{max-height:196px;overflow-y:auto;padding:6px}
  .pk .pk-row{display:flex;align-items:center;gap:10px;margin:0;padding:7px 9px;border-radius:9px;cursor:pointer;font-size:var(--fs-body);color:var(--txt);text-transform:none;letter-spacing:normal}
  .pk .pk-row+.pk-row{margin-top:2px}
  .pk .pk-row:hover{background:var(--surface2)}
  .pk .pk-row.on{background:rgba(46,49,146,.10)}
  :root[data-theme="dark"] .pk .pk-row.on{background:rgba(126,132,201,.18)}
  :root[data-company="travel"] .pk .pk-row.on{background:rgba(224,91,46,.12)}
  :root[data-company="travel"] .pk .pk-list input[type="checkbox"],
  :root[data-company="travel"] .field .pk-opt input[type="checkbox"]{accent-color:#e05b2e}
  .pk .pk-list input[type="checkbox"]{width:17px;height:17px;flex:0 0 17px;margin:0;padding:0;accent-color:#2e3192;cursor:pointer}
  .pk .pk-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pk .pk-row.on .pk-name{font-weight:600}
  .pk .pk-meta{flex:0 0 auto;font-size:var(--fs-label);color:var(--muted);white-space:nowrap}
  .pk .pk-meta.new{color:#e08b1e;font-weight:600}
  .pk .pk-empty{padding:16px 12px;font-size:var(--fs-meta);color:var(--faint);text-align:center;line-height:1.45}
  .pk .pk-foot{display:flex;align-items:center;gap:10px;padding:8px 10px;border-top:1px solid var(--line);background:var(--panel3)}
  .pk .pk-count{flex:1 1 auto;min-width:0;font-size:var(--fs-label);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pk .pk-add{flex:0 0 auto;width:auto;max-width:52%;font-size:var(--fs-label);padding:4px 8px}
  .field .pk-opt{display:flex;align-items:flex-start;gap:8px;margin:8px 2px 0;font-size:var(--fs-label);color:var(--muted);cursor:pointer;line-height:1.45;text-transform:none;letter-spacing:normal}
  .field .pk-opt input[type="checkbox"]{width:15px;height:15px;flex:0 0 15px;margin:2px 0 0;padding:0;accent-color:#2e3192;cursor:pointer}
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .field-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
  .frow{display:grid;gap:10px}
  /* popup forms */
  dialog.dlg{border:0;background:transparent;padding:0;width:calc(100% - 32px);max-width:600px;max-height:calc(100vh - 32px);margin:auto;overflow:auto}
  dialog.dlg::backdrop{background:rgba(0,0,0,.6)}
  dialog.dlg .modal{margin:0;max-height:calc(100vh - 48px);overflow-y:auto}
  .modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
  .hint{font-size:var(--fs-label);color:var(--faint);margin-top:4px}
  .count-badge{background:var(--surface2);color:var(--muted);font-family:var(--font-mono);font-size:var(--fs-label);padding:1px 7px;border-radius:999px;margin-left:6px}
  .sub-link{color:var(--accent);cursor:pointer;font-size:var(--fs-meta)}
  .sub-link:hover{text-decoration:underline}
  .cal-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:8px;margin-bottom:20px}
  @media(max-width:1100px){.cal-grid{grid-template-columns:repeat(6,1fr)}}
  @media(max-width:600px){.cal-grid{grid-template-columns:repeat(3,1fr)}}
  .cal-month{background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:10px}
  .cal-month-label{font-size:var(--fs-label);font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:8px}
  .cal-bars{display:flex;flex-direction:column;gap:4px}
  .cal-bar-row{display:flex;align-items:center;gap:5px}
  .cal-bar-track{flex:1;height:10px;background:var(--surface2);border-radius:10px;overflow:hidden;display:flex}
  .cal-bar-fill{height:100%;border-radius:10px;transition:.3s}
  .cal-nums{font-size:var(--fs-label);color:var(--muted);white-space:nowrap;min-width:38px;text-align:right;font-variant-numeric:tabular-nums}
  .cal-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
  .cal-total-row{display:flex;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font-size:var(--fs-label)}
  .cal-total-row .actual{color:var(--green);font-weight:700}
  .cal-total-row .forecast{color:var(--muted)}
  .cal-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:var(--fs-meta);color:var(--muted);margin-bottom:14px}
  .cal-legend span{display:flex;align-items:center;gap:6px}
  .cal-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:20px}
  .cal-kpi{background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:12px}
  .cal-kpi .label{font-size:var(--fs-label);color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
  .cal-kpi .val{font-size:var(--fs-metric);font-weight:700;margin-top:4px}
  .cal-kpi .delta{font-size:var(--fs-label);color:var(--muted);margin-top:2px}
  .achieved{color:var(--green)}
  .section-title{font-size:var(--fs-meta);font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin:14px 0 8px;border-bottom:1px solid var(--line);padding-bottom:6px}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-thumb{background:var(--line);border-radius:10px}
  .toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--surface2);border:1px solid var(--accent);color:var(--txt);padding:10px 18px;border-radius:10px;font-size:var(--fs-body);opacity:0;transition:.25s;z-index:99;pointer-events:none}
  .toast.show{opacity:1}
  #loginScreen{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}
  .login-box{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:32px;width:100%;max-width:380px}
  .login-box h1{font-size:var(--fs-metric);margin:0 0 6px}
  .login-box .sub{margin-bottom:22px}
  .login-box .field{margin-bottom:14px}
  .login-box input{width:100%;padding:11px 12px}
  .login-err{color:var(--danger);font-size:var(--fs-meta);margin-top:8px;min-height:16px}
  .country-sel{display:flex;gap:4px;background:var(--surface2);border:1px solid var(--line);border-radius:999px;padding:3px}
  .country-sel button{padding:6px 12px;border:none;background:transparent;border-radius:999px;font-size:var(--fs-body)}
  .country-sel button.active{background:var(--accent-d);color:#ffffff}
  .flag{font-size:var(--fs-body);margin-right:4px}
  .scope-badge{font-size:var(--fs-label);padding:3px 9px;border-radius:16px;background:var(--surface2);border:1px solid var(--line);color:var(--muted)}
  #setupNotice{background:var(--notice-bg);border:1px solid var(--amber);border-radius:10px;padding:16px;margin-bottom:20px;font-size:var(--fs-body);color:var(--txt)}
  #setupNotice code{background:var(--bg);padding:2px 6px;border-radius:10px;font-size:var(--fs-meta)}
  .conn-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:5px}
@media print {
  body * { visibility: hidden !important; }
  #euReportArea, #euReportArea * { visibility: visible !important; }
  #euReportArea { position: absolute; left: 0; top: 0; width: 100%; padding: 0; color: #000 !important; background: #fff !important; }
  #euReportArea table, #euReportArea th, #euReportArea td { color: #000 !important; border-color: #ccc !important; }
  .report-controls { display: none !important; }
}
/* ── dropdown menus (header settings, + New) ── */
.gw-dd{position:relative;display:inline-block}
.gw-dd-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:190px;background:var(--panel,#151922);border:1px solid var(--line,#222);border-radius:10px;padding:5px;z-index:200;box-shadow:0 10px 30px rgba(0,0,0,.45);display:none}
.gw-dd.open .gw-dd-menu{display:block}
.gw-dd-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:none;color:var(--txt);font-size:var(--fs-body);padding:7px 10px;border-radius:10px;cursor:pointer;white-space:nowrap}
.gw-dd-item:hover{background:var(--surface2,#1c2230)}
.gw-dd-item .ic{width:16px;text-align:center;opacity:.85}
.gw-dd-sep{height:1px;background:var(--line,#222);margin:5px 6px}
@media print { .gw-dd{display:none!important} }
/* ── glossary: dotted underline on internal jargon, explained on hover ── */
.gw-term{border-bottom:1px dotted var(--muted);cursor:help}
@media print { .gw-term{border-bottom:none} }
/* ── compact mode: VAT/forecast pills only on hover ── */
.kpi:hover .kpi-detail{opacity:1!important}
/* ── EU timeline: activity column width (wider, so name + owner + status fit) ── */
:root{--eu-col:400px}
@media (max-width:1100px){ :root{--eu-col:300px} }
.eu-resp{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-label);font-weight:700;flex:0 0 auto;letter-spacing:.2px}
/* ── round task checkboxes (Google Tasks style) ──
   Needs high specificity + padding reset: the global `input{padding:8px 10px}`
   rule would otherwise inflate them into large empty circles. */
input[type="checkbox"].tk-check{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  width:16px;height:16px;min-width:16px;min-height:16px;
  padding:0;margin:0;border:1.5px solid var(--faint,#5c6470);border-radius:50%;
  background:transparent;cursor:pointer;position:relative;flex:0 0 auto;
  transition:border-color .12s,background .12s,box-shadow .12s;vertical-align:middle;box-sizing:border-box}
input[type="checkbox"].tk-check:hover{border-color:var(--ok);box-shadow:0 0 0 3px rgba(31,157,107,.14)}
input[type="checkbox"].tk-check:checked{background:var(--ok);border-color:var(--ok)}
input[type="checkbox"].tk-check:checked::after{
  content:"";position:absolute;left:5px;top:2px;width:3.5px;height:7.5px;
  border:solid #ffffff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* ── Skeleton loading: shimmering placeholders while data loads ── */
@keyframes gwShimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.sk{border-radius:10px;background:linear-gradient(90deg,var(--surface2) 25%,color-mix(in srgb,var(--surface2) 60%,var(--line)) 50%,var(--surface2) 75%);background-size:800px 100%;animation:gwShimmer 1.3s linear infinite}
.sk-row{height:14px;margin:10px 0}
.sk-card{height:78px;border-radius:16px;margin:0 0 12px}
/* WS7 — shaped like the thing that is loading: a KPI has a label bar and a value bar,
   a table row has cells at the real column widths */
.sk-kpi{display:flex;flex-direction:column;gap:10px;padding:18px;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;margin:0 0 12px}
.sk-kpi .sk{border-radius:10px}
.sk-kpi .sk.lbl{height:11px;width:40%}
.sk-kpi .sk.val{height:30px;width:60%}
.sk-trow{display:flex;gap:12px;padding:12px;border-bottom:1px solid var(--panel3)}
.sk-trow .sk{height:14px}
.sk-wrap{padding:4px 2px}
/* Full-app loading veil, shown during the initial data load and country switch */
#loadVeil{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;flex-direction:column;gap:16px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(3px)}
/* ── Global search (Cmd/Ctrl-K) ── */
#gsBg{position:fixed;inset:0;z-index:300;display:none;justify-content:center;align-items:flex-start;padding:80px 16px 16px;background:color-mix(in srgb,var(--bg) 70%,transparent);backdrop-filter:blur(4px)}
#gsBg.show{display:flex}
#gsBox{width:100%;max-width:600px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.55);overflow:hidden;max-height:70vh;display:flex;flex-direction:column}
#gsInput{width:100%;box-sizing:border-box;background:transparent;border:none;border-bottom:1px solid var(--line);color:var(--txt);font-size:var(--fs-title);font-family:inherit;padding:16px 18px;outline:none}
#gsInput::placeholder{color:var(--faint)}
#gsResults{overflow-y:auto;padding:6px}
.gs-group{font-size:var(--fs-label);font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--faint);padding:10px 12px 4px}
.gs-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;cursor:pointer}
.gs-item.sel{background:var(--surface2)}
.gs-item .gs-t{font-size:var(--fs-body);color:var(--txt);font-weight:500}
.gs-item .gs-s{font-size:var(--fs-meta);color:var(--muted);margin-left:auto}
.gs-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.gs-empty{padding:24px 16px;text-align:center;color:var(--faint);font-size:var(--fs-body)}
.gs-hint{font-size:var(--fs-label);color:var(--faint);padding:8px 14px;border-top:1px solid var(--line);display:flex;gap:14px}
.gs-hint kbd{background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:1px 5px;font-size:var(--fs-label);font-family:inherit}
@media(max-width:720px){ .myday-grid{grid-template-columns:1fr !important} }
#loadVeil.show{display:flex}
/* WS9 — Wiser Desk lockup. Four placements only: sidebar, boot screen, browser
   tab, export footers. Never on buttons, page titles, tables or notifications.
   The mark sits left of a left-aligned text block; when the by-line is present it
   stacks under the wordmark rather than under the whole lockup, so the left edge
   of the type stays a single line. */
/* One size drives the whole lockup: set font-size on .wd-lockup and the mark,
   gap, by-line and dot follow in em, holding the proportions measured off the
   wordmark artwork — mark 1.82 × cap height, gap 0.76, by-line 0.50 sitting
   0.56 below the baseline, dot 0.29. */
.wd-lockup{display:flex;align-items:center;gap:.56em;line-height:1}
.wd-lockup svg{flex:0 0 auto;width:1.32em;height:1.32em}
.wd-text{display:flex;flex-direction:column;align-items:flex-start;gap:.13em;min-width:0}
.wd-word{font-size:1em;font-weight:800;letter-spacing:-.03em;color:var(--accent);line-height:1;white-space:nowrap}
/* The period glyph reads as a gap at this weight and varies with whatever font
   actually loads, so the dot is drawn geometrically and scales with the type.
   The character stays in the DOM, so the wordmark still selects, copies and is
   announced as "wiser.desk". */
/* The period is pushed out of the box rather than made transparent, so it keeps
   no advance width of its own and the two halves of the wordmark stay tight.
   An inline-block with overflow:hidden takes its baseline from the bottom margin
   edge, which is exactly where the dot belongs. */
.wd-word .wd-dot{display:inline-block;width:.21em;height:.21em;margin:0 .01em 0 .04em;
  background:var(--brand);border-radius:50%;vertical-align:baseline;
  overflow:hidden;text-indent:100%;white-space:nowrap;
  -webkit-mask:none;mask:none}
:root[data-theme="dark"] .wd-word{color:#fff}
.wd-by{font-size:.5em;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);line-height:1;white-space:nowrap}
#loadVeil .spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:gwSpin .8s linear infinite}
@keyframes gwSpin{to{transform:rotate(360deg)}}
#loadVeil .lbl{font-size:var(--fs-body);color:var(--muted);letter-spacing:.2px}

  /* ═══════════ growth.wiser shell (Phase 2) ═══════════ */
  /* 100vh on iOS is the viewport with the browser bars expanded, so when they
     retract the frame stays taller than the screen and the last rows sit below
     the edge with nothing left to scroll. dvh follows the visible viewport;
     100vh stays as the fallback for browsers that lack it. */
  #app{height:100vh;height:100dvh;overflow:hidden;max-width:none;padding:0;margin:0}
  #sideNav{flex:0 0 236px;display:flex;flex-direction:column;background:var(--surface);border-right:1px solid var(--line);padding:20px 14px 14px;overflow:hidden}
  /* The module list scrolls on its own between the logo and the user card, so a
     short window never hides the last entries behind the card. */
  #viewTabs{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;margin:0 -6px;padding:0 6px}
  #sideLogo{cursor:pointer;padding:0 6px 18px}
  #sideLogo img{width:150px;display:block}
  #sideNav .nav-grp{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding:12px 10px 6px;display:flex;align-items:center;gap:6px;border:none;background:none;margin:0}
  /* WS6 — one hairline between groups, drawn above the label */
  .nav-grp::before{content:"";position:absolute;left:8px;right:8px;margin:10px 8px;margin-top:-12px;height:1px;background:var(--panel3)}
  .nav-grp{position:relative}
  #viewTabs .nav-grp.collapsible{cursor:pointer;pointer-events:auto;border-radius:10px;
    transition:background var(--ease),color var(--ease)}
  #viewTabs .nav-grp.collapsible:hover{background:var(--surface2);color:var(--muted)}
  .nav-grp .caret{margin-left:auto;transition:transform var(--ease);font-size:10px;opacity:.7}
  .nav-grp.collapsed .caret{transform:rotate(-90deg)}
  /* when the group is folded away, say how much is behind it — an unlabelled
     caret reads as decoration and the section looks deleted rather than closed */
  .nav-grp .hidden-n{font-family:var(--font-mono);font-size:10px;color:var(--faint);margin-left:auto}
  .nav-grp.collapsed .caret{margin-left:6px}
  #sideNav .tab{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:10px;font-size:var(--fs-body);color:var(--muted);cursor:pointer;border:none;margin:1px 0;background:transparent;white-space:nowrap;transition:background .15s cubic-bezier(.22,.61,.36,1)}
  #sideNav .tab:hover{background:var(--surface2);color:var(--txt)}
  #sideNav .tab.active{background:var(--accent);color:#fff;font-weight:700}
  #sideNav .tab.active .count-badge{background:transparent;color:#fff;opacity:.75}
  /* WS6 — in dark, --accent is #7e84c9 and white on it measures 3.48:1, under the
     4.5:1 body-text floor. The darker ramp step gets to 5.94:1. */
  :root[data-theme="dark"] #sideNav .tab.active{background:var(--accent-d)}
  
  #sideNav .tab .count-badge{margin-left:auto;font-family:var(--font-mono);font-size:11px;padding:1px 8px;border-radius:999px;background:transparent;color:var(--muted);border:none}
  #sideNav .tab .count-badge.alert{background:var(--pill-alr-b);color:var(--pill-alr-t);font-weight:700}
  #sideUser{margin-top:auto;flex:0 0 auto;background:var(--surface2);border-radius:10px;padding:12px}
  #sideUser #userBar{font-size:var(--fs-meta);color:var(--muted);line-height:1.55;word-break:break-word}
  #sideSetBtn{margin-top:8px;background:none;border:none;padding:0;font-size:var(--fs-label);font-weight:700;color:var(--accent);cursor:pointer;font-family:inherit}
  #sideSetBtn:hover{text-decoration:underline}
  #mainCol{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg)}
  #topBar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;background:var(--surface);border-bottom:1px solid var(--line);flex-wrap:wrap}
  #pageEyebrow{font-size:var(--fs-label);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
  /* WS5 — two or three numbers that say how the current view is doing */
  #pageSummary{display:flex;gap:18px;flex-wrap:wrap;font-size:var(--fs-meta);color:var(--muted);margin-top:4px}
  #pageSummary b{font-family:var(--font-mono);font-weight:700;color:var(--txt)}
  #pageSummary .warn b{color:var(--brand-d)}
  #pageSummary:empty{display:none}
  #pageTitle{font-size:var(--fs-display);font-weight:800;letter-spacing:-.025em;color:var(--txt);margin:2px 0 0;white-space:nowrap}
  #topActions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .country-sel{display:flex;background:var(--surface2);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
  .country-sel button{border:none;background:transparent;color:var(--muted);padding:6px 14px;border-radius:999px;font-size:var(--fs-meta);cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px;font-weight:500}
  .country-sel button.active{background:var(--accent);color:#fff;font-weight:700}
  #bnrChip{align-items:center;gap:5px;background:var(--surface2);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:var(--fs-meta);color:var(--muted);white-space:nowrap}
  #bnrChip b{color:var(--txt)}
  #searchPill{display:inline-flex;align-items:center;gap:8px;min-width:180px;background:var(--surface2);border:1px solid var(--line);border-radius:999px;padding:8px 8px 8px 14px;font-size:var(--fs-meta);color:var(--faint);cursor:pointer;font-family:inherit;text-align:left}
  #searchPill kbd{margin-left:auto;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:1px 6px;font-size:var(--fs-label);color:var(--muted);font-family:inherit}
  #newBtn{background:var(--brand);color:#fff;border:none;border-radius:999px;padding:8px 16px;font-weight:700;font-size:var(--fs-body);cursor:pointer;font-family:inherit;box-shadow:0 6px 16px rgba(239,65,54,.24);transition:background var(--ease),transform var(--ease)}
  #newBtn:active{transform:scale(.97)}
  #newBtn:hover{background:var(--brand-d);box-shadow:0 10px 24px rgba(239,65,54,.28)}
  #newBtn:active{transform:scale(.97)}
  #mainScroll{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:24px 28px 40px}
  @media(max-width:900px){
    #app{flex-direction:column}
    #sideNav{flex:0 0 auto;flex-direction:row;align-items:center;overflow-x:auto;overflow-y:hidden;padding:8px 10px;border-right:none;border-bottom:1px solid var(--line);gap:4px}
    #sideNav .nav-grp{display:none}
    #viewTabs{display:flex;gap:2px;flex:1;min-height:auto;overflow:visible;margin:0;padding:0}
    #sideUser{margin-top:0;margin-left:8px;padding:6px 10px;flex:0 0 auto}
    #sideUser #userBar{display:none}
    #sideSetBtn{margin-top:0}
    #sideLogo{padding:0 8px 0 0;flex:0 0 auto}
    #sideLogo img{width:104px}
    #mainScroll{padding:16px 14px 32px}
    #topBar{padding:12px 16px}
  }

  /* ── Phone (≤700px): a tasks-only companion. No module nav, no market switch,
        no search, no global "New" — the screen carries one job. ── */
  @media(max-width:700px){
    /* Pin the shell to the viewport so the document itself cannot scroll. On iOS
       it otherwise scrolls the whole page: the top bar slides up under the status
       bar and the last card ends below the fold with no way to reach it. Only
       #mainScroll moves. */
    html,body{height:100%;overflow:hidden;overscroll-behavior:none}
    #app{position:fixed;inset:0;height:100%;max-height:100dvh}
    #mainCol{min-height:0}
    #mainScroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
    #viewTabs,#countrySel,#bnrChip,#searchPill,#newDD,#topBar{display:none !important}
    #sideNav{flex:0 0 auto;flex-direction:row;align-items:center;justify-content:space-between;
      padding:calc(8px + env(safe-area-inset-top)) 14px 8px;border-bottom:1px solid var(--line);
      border-right:none;overflow:visible}
    #sideLogo{padding:0;flex:0 0 auto}
    #sideLogo img{width:112px}
    #sideUser{margin:0;background:none;padding:0;flex:0 0 auto}
    #sideUser #userBar{display:none}
    #sideSetBtn{margin-top:0;font-size:var(--fs-meta)}
    #mainScroll{padding:14px 14px calc(90px + env(safe-area-inset-bottom))}
    .card{border-radius:16px}
    /* The Settings button sits top-right here, so its menu must drop DOWN and
       align right — the desktop rule opens it upwards, off-screen on a phone. */
    #settingsDD .gw-dd-menu{top:calc(100% + 8px) !important;bottom:auto !important;
      left:auto !important;right:0 !important;min-width:200px}
    /* Admin work belongs on a desktop — keep the phone menu to what's useful here. */
    #ddAccounts,#ddBackup,#ddCompact{display:none !important}
  }

  /* ── growth.wiser: login card + table polish (Phase 3, global) ── */
  .login-box{width:380px;max-width:92vw;border-radius:24px;padding:36px;box-shadow:0 12px 28px rgba(20,22,34,.12),0 4px 8px rgba(20,22,34,.06)}
  .login-box input{border-radius:999px;padding:11px 16px;font-size:var(--fs-body)}
  .login-box input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(46,49,146,.25);outline:none}
  .login-box .primary{border-radius:999px;height:48px;font-weight:700}
  th{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700}
  td{border-bottom:1px solid var(--surface2)}
  tbody tr:hover{background:color-mix(in srgb,var(--surface2) 55%,transparent)}

  .money,.mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;font-size:var(--fs-meta)}

  .myday-col{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px}
  .myday-colh{display:flex;align-items:center;gap:8px;font-size:var(--fs-body);font-weight:700;margin-bottom:12px}
  .myday-colh svg{flex:0 0 auto}
  @media(max-width:1100px){.myday-grid{grid-template-columns:1fr !important}}

  .kpi{background:transparent !important;border:none !important;box-shadow:none !important;padding:8px 4px}
  .kpis{gap:26px}
  .bar-track{height:14px;border-radius:999px;overflow:hidden;background:var(--surface2)}
  .bar-seg{height:100%}
  .bar-row .name{font-size:var(--fs-body);font-weight:700}
  .bar-row .num{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:var(--fs-meta)}