/* ============================================================
     THEME TOKENS — MOVE brand: white / black / #7ED2AD (mint)
     Light is the default. Dark mode applies when
     <html data-theme="dark">. The toggle in app.js writes that
     attribute based on user preference (auto / light / dark).
     Per-entity colors (MOVE/MOVE360/Women's/WildSide) are
     deliberately preserved — they're functional, not brand.
     ============================================================ */
  :root {
    color-scheme: light;
    --bg: #f6f7f9;
    --surface: #ffffff;
    --surface-2: #fafbfc;
    --surface-3: #eef0f3;
    --border: #e6e8ec;
    --border-strong: #d1d5db;
    --ink: #0a0c10;
    --ink-2: #475569;
    --ink-3: #94a3b8;
    --ink-inverted: #ffffff;
    --accent: #7ED2AD;
    --accent-strong: #4FB088;
    --accent-soft: rgba(126, 210, 173, 0.18);
    --on-accent: #0a0c10;
    --move: #185FA5;
    --move360: #2E7D32;
    --wildside: #B8860B;
    --pension: #E65100;
    --ni: #b91c1c;
    --proposed: #16a34a;
    --proposed-bg: #dcfce7;
    --good: #16a34a;
    --warn: #d97706;
    --bad: #dc2626;
    --info-bg: #f0f9ff;
    --info-border: #bae6fd;
    --info-ink: #075985;
    --warn-bg: #fffbeb;
    --warn-border: #fde68a;
    --warn-ink: #78350f;
    --bad-bg: #fef2f2;
    --bad-border: #fecaca;
    --bad-ink: #991b1b;
    --good-bg: #dcfce7;
    --good-border: #bbf7d0;
    --good-ink: #14532d;
    --chart-axis: #94a3b8;
    --chart-label: #475569;
    --chart-grid: rgba(15,23,41,0.06);
    --donut-border: #ffffff;
    --shadow: 0 1px 2px rgba(15,23,41,0.04), 0 1px 1px rgba(15,23,41,0.03);
    --shadow-lg: 0 4px 12px rgba(15,23,41,0.06), 0 2px 4px rgba(15,23,41,0.04);
    --radius: 10px;
    --radius-sm: 6px;
  }

  [data-theme="dark"] {
    color-scheme: dark;
    --bg: #0a0c10;
    --surface: #13161b;
    --surface-2: #181b21;
    --surface-3: #1f232a;
    --border: #262b33;
    --border-strong: #3a4049;
    --ink: #f1f5f9;
    --ink-2: #9aa5b6;
    --ink-3: #6b7585;
    --ink-inverted: #0a0c10;
    --accent: #7ED2AD;
    --accent-strong: #A4E4C5;
    --accent-soft: rgba(126, 210, 173, 0.16);
    --on-accent: #0a0c10;
    --move: #4A8FCC;
    --move360: #5BB061;
    --wildside: #D4A93D;
    --pension: #FF9248;
    --ni: #ef4444;
    --proposed: #22c55e;
    --proposed-bg: rgba(34,197,94,0.16);
    --good: #22c55e;
    --warn: #f59e0b;
    --bad: #ef4444;
    --info-bg: rgba(56,189,248,0.08);
    --info-border: rgba(56,189,248,0.28);
    --info-ink: #7dd3fc;
    --warn-bg: rgba(245,158,11,0.10);
    --warn-border: rgba(245,158,11,0.32);
    --warn-ink: #fbbf24;
    --bad-bg: rgba(239,68,68,0.10);
    --bad-border: rgba(239,68,68,0.32);
    --bad-ink: #fca5a5;
    --good-bg: rgba(34,197,94,0.10);
    --good-border: rgba(34,197,94,0.32);
    --good-ink: #86efac;
    --chart-axis: #6b7585;
    --chart-label: #9aa5b6;
    --chart-grid: rgba(241,245,249,0.06);
    --donut-border: #13161b;
    --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 1px 1px rgba(0,0,0,0.3);
    --shadow-lg: 0 4px 12px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.35);
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  html { transition: background-color 0.18s ease, color 0.18s ease; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.18s ease, color 0.18s ease;
  }
  .wrap { max-width: 1280px; margin: 0 auto; padding: 0 20px 80px; }

  a { color: var(--accent-strong); }
  [data-theme="dark"] a { color: var(--accent); }

  /* OS-level chrome */
  .os-bar {
    display: flex;
    align-items: center;
    padding: 18px 0 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 12px;
  }
  .brand-block { display: flex; align-items: center; gap: 14px; }
  .brand-mark {
    display: inline-flex; align-items: baseline;
    font-size: 19px; font-weight: 600; letter-spacing: -0.01em;
  }
  .brand-mark .lo { color: var(--ink-2); font-weight: 500; }
  .brand-mark .hi { color: var(--accent-strong); font-weight: 700; letter-spacing: 0.01em; }
  [data-theme="dark"] .brand-mark .hi { color: var(--accent); }
  .brand-divider { width: 1px; height: 22px; background: var(--border-strong); }
  .ctx-line { font-size: 12px; color: var(--ink-3); }
  .ctx-line b { color: var(--ink-2); font-weight: 500; }

  /* Module tabs (top-level navigation across moveOS) */
  .module-tabs {
    display: flex;
    gap: 2px;
    background: var(--surface);
    padding: 4px;
    border-radius: 10px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    flex-wrap: wrap;
    margin-left: auto;
  }
  .module-tab {
    border: 0;
    background: transparent;
    padding: 8px 14px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.15s;
    white-space: nowrap;
  }
  .module-tab:hover { color: var(--ink); background: var(--surface-3); }
  .module-tab.active { background: var(--ink); color: var(--ink-inverted); }
  .module-tab.active:hover { background: var(--ink); }
  .module-tab .icon { font-size: 13px; opacity: 0.85; }
  .module-tab .badge-soon {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--warn-bg);
    color: var(--warn-ink);
    margin-left: 4px;
  }
  .module-tab.active .badge-soon { background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.9); }
  [data-theme="dark"] .module-tab.active .badge-soon { background: rgba(0,0,0,0.20); color: rgba(0,0,0,0.85); }

  /* Theme toggle (cycles Auto → Light → Dark) */
  .theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-2);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
  }
  .theme-toggle:hover { color: var(--ink); border-color: var(--border-strong); }
  .theme-toggle svg { width: 14px; height: 14px; }

  /* Entity tabs (sub-nav inside Expenses) */
  .entity-tabs { display: flex; gap: 4px; flex-wrap: wrap; background: var(--surface); padding: 4px; border-radius: 999px; border: 1px solid var(--border); margin-bottom: 14px; box-shadow: var(--shadow); }
  .entity-tab { border: 0; background: transparent; padding: 7px 14px; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--ink-2); display: inline-flex; align-items: center; gap: 7px; transition: all 0.15s; }
  .entity-tab:hover { color: var(--ink); }
  .entity-tab.active { background: var(--ink); color: var(--ink-inverted); }
  .entity-tab .dot { width: 8px; height: 8px; border-radius: 50%; }

  /* Section tabs (sub-sub-nav inside Expenses) */
  .section-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 18px; overflow-x: auto; }
  .section-tab { border: 0; background: transparent; padding: 11px 16px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
  .section-tab:hover { color: var(--ink); }
  .section-tab.active { color: var(--ink); border-bottom-color: var(--accent); }

  /* Cards */
  .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
  .card.padded { padding: 18px; }
  .card-title { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin: 0 0 6px; }

  /* Banner: new starter */
  .banner { background: var(--good-bg); border: 1px solid var(--good-border); color: var(--good-ink); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .banner .stats { display: flex; gap: 18px; flex-wrap: wrap; flex: 1; }
  .banner .stat { font-size: 12px; }
  .banner .stat b { display: block; font-size: 15px; color: var(--good-ink); }
  .banner .label { font-weight: 600; font-size: 13px; }
  .toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-size: 12px; }
  .toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
  .toggle .track { width: 36px; height: 20px; background: var(--border-strong); border-radius: 999px; position: relative; transition: background 0.15s; }
  .toggle .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: white; border-radius: 50%; transition: transform 0.15s; box-shadow: 0 1px 2px rgba(0,0,0,0.15); }
  .toggle input:checked + .track { background: var(--proposed); }
  .toggle input:checked + .track::after { transform: translateX(16px); }

  /* NI bar */
  .ni-bar { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--ni); border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 14px; font-size: 12.5px; color: var(--ink-2); }
  .ni-bar b { color: var(--ink); }

  /* AMEX control */
  .amex-control { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px; box-shadow: var(--shadow); }
  .amex-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; gap: 12px; flex-wrap: wrap; }
  .amex-head h3 { margin: 0; font-size: 13px; font-weight: 600; }
  .amex-head .help { font-size: 11.5px; color: var(--ink-3); }
  .amex-head .amex-val { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .amex-slider { width: 100%; appearance: none; height: 4px; background: var(--border-strong); border-radius: 999px; outline: none; }
  .amex-slider::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; background: var(--accent); border-radius: 50%; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.2); border: 2px solid var(--surface); }
  .amex-slider::-moz-range-thumb { width: 18px; height: 18px; background: var(--accent); border-radius: 50%; cursor: pointer; border: 2px solid var(--surface); }
  .scenarios { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
  .scenario { background: var(--surface-2); border: 1px solid var(--border); padding: 6px 12px; border-radius: 999px; font-size: 12px; cursor: pointer; color: var(--ink-2); transition: all 0.15s; }
  .scenario:hover { color: var(--ink); border-color: var(--border-strong); }
  .scenario.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

  /* Metric cards */
  .metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
  .metric { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
  .metric .label { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
  .metric .value { font-size: 22px; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; }
  .metric .sub { font-size: 11.5px; color: var(--ink-2); margin-top: 2px; }
  .metric.accent .value { color: var(--accent-strong); }
  [data-theme="dark"] .metric.accent .value { color: var(--accent); }

  /* Charts */
  .chart-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; margin-bottom: 14px; }
  .chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
  .chart-card h3 { margin: 0 0 12px; font-size: 13px; font-weight: 600; }
  .chart-wrap { position: relative; height: 320px; }

  /* Category table */
  .cat-table { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
  .cat-table h3 { margin: 0; padding: 14px 18px; font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--border); }
  .cat-row { padding: 11px 18px; border-bottom: 1px solid var(--border); cursor: pointer; display: grid; grid-template-columns: 18px 1fr auto auto; gap: 14px; align-items: center; transition: background 0.1s; }
  .cat-row:last-child { border-bottom: 0; }
  .cat-row:hover { background: var(--surface-2); }
  .cat-row .chev { font-size: 10px; color: var(--ink-3); transition: transform 0.15s; display: inline-block; }
  .cat-row.expanded .chev { transform: rotate(90deg); }
  .cat-row .name { font-weight: 500; font-size: 13.5px; }
  .cat-row .pct { color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
  .cat-row .amt { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 90px; text-align: right; }
  .cat-children { background: var(--surface-2); border-bottom: 1px solid var(--border); padding: 4px 0; }
  .cat-child { padding: 7px 18px 7px 50px; display: grid; grid-template-columns: 1fr auto; gap: 14px; font-size: 13px; color: var(--ink-2); }
  .cat-child.ni { color: var(--ni); }
  .cat-child.proposed { color: var(--proposed); font-weight: 500; }
  .cat-child.pension { color: var(--pension); font-style: italic; }
  .cat-child .amt { font-variant-numeric: tabular-nums; font-weight: 500; }
  .cat-row.pension-cat .name { color: var(--pension); }

  /* Salary Register */
  .salary-section { margin-bottom: 18px; }
  .salary-head { padding: 10px 16px; border-radius: var(--radius) var(--radius) 0 0; color: white; font-weight: 600; font-size: 14px; display: flex; justify-content: space-between; align-items: center; }
  .salary-head .total { font-variant-numeric: tabular-nums; font-size: 13px; opacity: 0.95; font-weight: 500; }
  table.salary { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; box-shadow: var(--shadow); }
  table.salary th { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); background: var(--surface-2); }
  table.salary th.num, table.salary td.num { text-align: right; font-variant-numeric: tabular-nums; }
  table.salary td { padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 13px; }
  table.salary tr:last-child td { border-bottom: 0; }
  table.salary tr.subtotal td { background: var(--surface-2); font-weight: 600; }
  table.salary tr.pension td { color: var(--pension); font-style: italic; }
  table.salary td.ni { color: var(--ni); }
  .badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; background: var(--surface-3); color: var(--ink-2); margin-left: 8px; }
  .badge.clinical { background: #dbeafe; color: #1e40af; }
  .badge.coach { background: #dcfce7; color: #166534; }
  .badge.director { background: #ede9fe; color: #5b21b6; }
  .badge.contractor { background: #fef3c7; color: #92400e; }
  .badge.consultant { background: #fef3c7; color: #92400e; }
  .badge.proposed { background: #dcfce7; color: #166534; }
  .badge.pension { background: #ffedd5; color: #9a3412; }
  .badge.pt { background: #f3e8ff; color: #6b21a8; }
  [data-theme="dark"] .badge.clinical   { background: rgba(59,130,246,0.18); color: #93c5fd; }
  [data-theme="dark"] .badge.coach      { background: rgba(34,197,94,0.18);  color: #86efac; }
  [data-theme="dark"] .badge.director   { background: rgba(139,92,246,0.20); color: #c4b5fd; }
  [data-theme="dark"] .badge.contractor { background: rgba(245,158,11,0.18); color: #fcd34d; }
  [data-theme="dark"] .badge.consultant { background: rgba(245,158,11,0.18); color: #fcd34d; }
  [data-theme="dark"] .badge.proposed   { background: rgba(34,197,94,0.18);  color: #86efac; }
  [data-theme="dark"] .badge.pension    { background: rgba(249,115,22,0.20); color: #fdba74; }
  [data-theme="dark"] .badge.pt         { background: rgba(168,85,247,0.20); color: #d8b4fe; }
  .group-total { margin-top: 6px; padding: 14px 18px; background: var(--ink); color: var(--ink-inverted); border-radius: var(--radius); display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
  .group-total .v { font-variant-numeric: tabular-nums; font-size: 15px; }
  .ea-note { margin-top: 14px; padding: 12px 16px; background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: var(--radius-sm); font-size: 12.5px; color: var(--warn-ink); }

  /* Revenue ratios */
  .ratio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .ratio-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); border-top: 3px solid var(--accent); }
  .ratio-card h3 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
  .ratio-card .rev { font-size: 12px; color: var(--ink-2); margin-bottom: 14px; }
  .ratio-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
  .ratio-metric { background: var(--surface-2); border-radius: var(--radius-sm); padding: 12px; }
  .ratio-metric .label { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
  .ratio-metric .v { font-size: 24px; font-weight: 600; margin: 4px 0; font-variant-numeric: tabular-nums; }
  .ratio-metric .v.good { color: var(--good); }
  .ratio-metric .v.warn { color: var(--warn); }
  .ratio-metric .v.bad { color: var(--bad); }
  .ratio-metric .desc { font-size: 11.5px; color: var(--ink-2); line-height: 1.45; }
  .person-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 8px; }
  .person-table th { text-align: left; padding: 6px 8px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); font-weight: 600; border-bottom: 1px solid var(--border); }
  .person-table th.num, .person-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
  .person-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); }
  .person-table tr:last-child td { border-bottom: 0; }
  .bar-cell { position: relative; height: 6px; background: var(--surface-3); border-radius: 999px; overflow: hidden; min-width: 60px; }
  .bar-cell .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 999px; }
  .insight-box { margin-top: 12px; padding: 12px 14px; background: var(--info-bg); border: 1px solid var(--info-border); border-radius: var(--radius-sm); font-size: 12.5px; color: var(--info-ink); line-height: 1.55; }
  .insight-box.warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-ink); }
  .insight-box.bad { background: var(--bad-bg); border-color: var(--bad-border); color: var(--bad-ink); }

  /* Module placeholders */
  .module-hero {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px 24px;
    margin-bottom: 14px;
  }
  .module-hero h2 { margin: 0 0 4px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
  .module-hero .lede { color: var(--ink-2); font-size: 13.5px; line-height: 1.55; max-width: 640px; }
  .status-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    background: var(--warn-bg); color: var(--warn-ink);
    margin-bottom: 12px;
  }
  .status-chip.live { background: var(--good-bg); color: var(--good-ink); }
  .status-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .placeholder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
  }
  .placeholder-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    box-shadow: var(--shadow);
  }
  .placeholder-card h4 { margin: 0 0 6px; font-size: 13px; font-weight: 600; }
  .placeholder-card .meta {
    font-size: 11px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: 6px;
  }
  .placeholder-card ul { margin: 8px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 12.5px; line-height: 1.55; }
  .placeholder-card li { margin-bottom: 3px; }
  .placeholder-card .owner-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
    font-size: 12px;
    color: var(--ink-2);
  }
  .placeholder-card .owner-row .pill {
    background: var(--surface-3);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    color: var(--ink-2);
  }
  .roadmap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    box-shadow: var(--shadow);
  }
  .roadmap h3 { margin: 0 0 10px; font-size: 13px; font-weight: 600; }
  .roadmap-step {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 12.5px;
  }
  .roadmap-step:last-child { border-bottom: 0; }
  .roadmap-step .num {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--surface-3);
    color: var(--ink-2);
    font-size: 11px;
    font-weight: 600;
    display: flex; align-items: center; justify-content: center;
  }
  .roadmap-step.done .num { background: var(--good); color: white; }
  .roadmap-step .body b { display: block; color: var(--ink); margin-bottom: 2px; }
  .roadmap-step .body { color: var(--ink-2); }

  /* KPI vertical sub-tabs (inside KPI tracker) */
  .vertical-tabs { display: flex; gap: 4px; flex-wrap: wrap; background: var(--surface); padding: 4px; border-radius: 999px; border: 1px solid var(--border); margin-bottom: 14px; box-shadow: var(--shadow); }
  .vertical-tab { border: 0; background: transparent; padding: 7px 14px; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--ink-2); display: inline-flex; align-items: center; gap: 7px; transition: all 0.15s; }
  .vertical-tab:hover { color: var(--ink); }
  .vertical-tab.active { background: var(--ink); color: var(--ink-inverted); }
  .vertical-tab .dot { width: 8px; height: 8px; border-radius: 50%; }

  /* Payroll communications log (Admin module) */
  .pay-log-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 14px; }
  .pay-log-card .head { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; }
  .pay-log-card .head h3 { margin: 0; font-size: 13px; font-weight: 600; }
  .pay-log-card .head .meta { font-size: 11px; color: var(--ink-3); font-weight: 500; }
  .upcoming-banner { background: var(--warn-bg); border-bottom: 1px solid var(--warn-border); padding: 12px 18px; font-size: 12.5px; color: var(--warn-ink); }
  .upcoming-banner .label { font-weight: 600; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
  .upcoming-banner .label::before { content: "▲"; color: var(--warn); }
  .upcoming-banner ul { margin: 4px 0 0; padding-left: 18px; }
  .upcoming-banner li { margin-bottom: 3px; }
  .upcoming-banner li b { color: var(--warn-ink); }
  table.pay-log-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
  table.pay-log-table th { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 600; padding: 10px 14px; text-align: left; background: var(--surface-2); border-bottom: 1px solid var(--border); }
  table.pay-log-table td { padding: 9px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
  table.pay-log-table tr:last-child td { border-bottom: 0; }
  table.pay-log-table tr:hover td { background: var(--surface-2); }
  table.pay-log-table .event { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; white-space: nowrap; }
  table.pay-log-table .event.starter  { background: #dcfce7; color: #166534; }
  table.pay-log-table .event.increase { background: #dbeafe; color: #1e40af; }
  table.pay-log-table .event.bonus    { background: #fef3c7; color: #92400e; }
  [data-theme="dark"] table.pay-log-table .event.starter  { background: rgba(34,197,94,0.18); color: #86efac; }
  [data-theme="dark"] table.pay-log-table .event.increase { background: rgba(59,130,246,0.18); color: #93c5fd; }
  [data-theme="dark"] table.pay-log-table .event.bonus    { background: rgba(245,158,11,0.18); color: #fcd34d; }
  table.pay-log-table .date { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .gaps-note { padding: 10px 18px; background: var(--surface-2); border-top: 1px solid var(--border); font-size: 11.5px; color: var(--ink-2); line-height: 1.55; }
  .gaps-note b { color: var(--ink); }

  /* Staff toggle + per-staff timeline */
  .staff-toggle { display: flex; gap: 4px; flex-wrap: wrap; padding: 12px 18px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
  .staff-pill { border: 1px solid var(--border); background: var(--surface); padding: 5px 11px; border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 500; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; transition: all 0.15s; white-space: nowrap; }
  .staff-pill:hover { color: var(--ink); border-color: var(--border-strong); }
  .staff-pill.active { background: var(--ink); color: var(--ink-inverted); border-color: var(--ink); }
  .staff-pill.upcoming:not(.active) { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-ink); }
  .staff-pill.gap:not(.active) { background: var(--bad-bg); border-color: var(--bad-border); color: var(--bad-ink); }
  .staff-pill .pdot { width: 7px; height: 7px; border-radius: 50%; }
  .staff-pill .glyph { font-size: 11px; }

  .staff-summary { padding: 16px 18px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
  .staff-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
  .staff-name-row h3 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.005em; }
  .entity-tag { font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 500; }
  .status-tag { font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
  .status-tag.upcoming { background: var(--warn-bg); color: var(--warn-ink); }
  .status-tag.gap { background: var(--bad-bg); color: var(--bad-ink); }
  .status-tag.active { background: var(--good-bg); color: var(--good-ink); }
  .staff-stats { display: flex; gap: 22px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); }
  .staff-stats .stat span { display: block; color: var(--ink-3); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; margin-bottom: 1px; }
  .staff-stats .stat b { color: var(--ink); font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

  .timeline { padding: 4px 0; }
  .timeline-item { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 13px 18px; border-bottom: 1px solid var(--border); position: relative; }
  .timeline-item:last-child { border-bottom: 0; }
  .timeline-item.upcoming { background: var(--warn-bg); }
  .time-cell { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
  .time-date { font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--ink); font-weight: 600; }
  .time-body { font-size: 12.5px; color: var(--ink); }
  .time-effective { font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; margin-bottom: 3px; }
  .time-detail { line-height: 1.5; margin-bottom: 5px; }
  .time-link { font-size: 11.5px; color: var(--accent-strong); text-decoration: none; font-weight: 500; }
  [data-theme="dark"] .time-link { color: var(--accent); }
  .time-link:hover { text-decoration: underline; }
  table.pay-log-table .event.flag, .event.flag { background: var(--bad-bg); color: var(--bad-ink); }
  .empty-timeline { padding: 22px 18px; text-align: center; color: var(--ink-3); font-size: 12.5px; }

  /* ============================================================
     Birthday banner (top of moveOS)
     ============================================================ */
  .birthday-banner {
    display: flex; align-items: center; gap: 14px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-strong);
    border-radius: var(--radius);
    padding: 10px 16px;
    margin: 0 0 14px;
  }
  [data-theme="dark"] .birthday-banner { border-color: var(--accent); }
  .birthday-banner-emoji { font-size: 22px; line-height: 1; flex-shrink: 0; }
  .birthday-banner-content { flex: 1; min-width: 0; }
  .birthday-banner-title {
    font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink-2); font-weight: 600; margin-bottom: 2px;
  }
  .birthday-banner-list { font-size: 13px; color: var(--ink); line-height: 1.5; }
  .birthday-banner-list b { font-weight: 600; }

  /* ============================================================
     People register — inline edit grid (Admin > Staff)
     ============================================================ */
  .people-edit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
  }
  .people-edit-grid .field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .people-edit-grid label {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em;
    font-weight: 600; color: var(--ink-3);
  }
  .people-edit-grid input,
  .people-edit-grid select,
  .people-edit-grid textarea {
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--border); border-radius: 5px;
    padding: 7px 9px; font: inherit; font-size: 12.5px; min-height: 32px;
    width: 100%; min-width: 0;
  }
  .people-edit-grid input:focus,
  .people-edit-grid select:focus,
  .people-edit-grid textarea:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }
  .people-edit-grid .annual-hint {
    font-size: 10.5px; color: var(--ink-3); margin-top: 2px;
    font-variant-numeric: tabular-nums;
  }

  /* ============================================================
     Statements (Expenses sub-tab: bank statement uploads)
     ============================================================ */
  .stmt-uploader-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; padding: 16px 18px; }
  .stmt-uploader-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow); }
  .stmt-uploader-head { display: flex; flex-direction: column; gap: 2px; }
  .stmt-uploader-name { font-weight: 600; font-size: 13.5px; color: var(--ink); }
  .stmt-uploader-sub { font-size: 11.5px; color: var(--ink-3); }
  .stmt-drop {
    display: flex; align-items: center; justify-content: center;
    border: 1.5px dashed var(--border-strong); border-radius: var(--radius-sm);
    padding: 18px 12px; cursor: pointer; transition: all 0.15s;
    background: var(--surface-2); min-height: 54px;
  }
  .stmt-drop:hover { border-color: var(--accent); background: var(--accent-soft); }
  .stmt-drop-cta { font-size: 12px; color: var(--ink-2); font-weight: 500; text-align: center; }

  .stmt-review-card { padding: 0; }
  .stmt-review-head { display: flex; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap; align-items: flex-start; }
  .stmt-review-actions { display: flex; gap: 6px; flex-wrap: wrap; }
  .stmt-totals-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
  .stmt-totals-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; }
  .stmt-totals-label { font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-bottom: 4px; }
  .stmt-totals-value { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .stmt-totals-sub { font-size: 10.5px; color: var(--ink-3); margin-top: 2px; }

  .stmt-review-tablewrap { max-height: 70vh; overflow-y: auto; }
  table.stmt-review-table { width: 100%; border-collapse: collapse; font-size: 12px; }
  table.stmt-review-table th { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 600; padding: 10px 12px; text-align: left; background: var(--surface-2); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1; }
  table.stmt-review-table th.num, table.stmt-review-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
  table.stmt-review-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
  table.stmt-review-table tr.stmt-row-skip td { background: var(--surface-3); color: var(--ink-3); }
  table.stmt-review-table tr.stmt-row-unset td { background: var(--warn-bg); }
  table.stmt-review-table select, table.stmt-review-table input { background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: 5px; padding: 4px 6px; font: inherit; font-size: 11.5px; min-width: 90px; }
  table.stmt-review-table select:focus, table.stmt-review-table input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
  table.stmt-review-table select:disabled { opacity: 0.45; cursor: not-allowed; }
  .stmt-row-date { white-space: nowrap; color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .stmt-row-desc { max-width: 360px; }
  .stmt-row-detail { font-size: 11px; color: var(--ink-2); margin-top: 2px; line-height: 1.4; }
  .stmt-row-reason { font-size: 10.5px; color: var(--accent-strong); margin-top: 3px; font-style: italic; }
  [data-theme="dark"] .stmt-row-reason { color: var(--accent); }
  .stmt-amt-out { color: var(--bad); font-weight: 600; }
  .stmt-amt-in  { color: var(--good); font-weight: 600; }
  .stmt-tag { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; background: var(--surface-3); color: var(--ink-2); margin-left: 6px; }

  @media (max-width: 540px) {
    .stmt-review-head { flex-direction: column; }
    .stmt-row-desc { max-width: 180px; }
  }

  /* ============================================================
     KPI tracker module
     ============================================================ */
  .kpi-hero {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px 20px;
    margin-bottom: 14px;
  }
  .kpi-hero-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
  .kpi-hero-eyebrow { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 600; margin-bottom: 2px; }
  .kpi-hero h3 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.005em; }
  .kpi-hero-meta { display: flex; gap: 6px; flex-wrap: wrap; }
  .kpi-hero-meta .pill { background: var(--surface-2); border: 1px solid var(--border); padding: 5px 10px; border-radius: 999px; font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }
  .kpi-hero-meta .pill b { color: var(--ink); font-weight: 600; }

  /* Period picker bar (Group view, sheet source only) */
  .kpi-period-bar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
  .period-unit-group { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px; }
  .period-unit-group .period-unit { background: transparent; border: 0; padding: 5px 12px; font-size: 12px; font-weight: 500; color: var(--ink-2); cursor: pointer; border-radius: 6px; transition: background 0.12s, color 0.12s; }
  .period-unit-group .period-unit:hover:not(.active) { color: var(--ink); }
  .period-unit-group .period-unit.active { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
  .period-nav { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink); font-variant-numeric: tabular-nums; }
  .period-nav .period-arrow { background: var(--surface-2); border: 1px solid var(--border); width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: var(--ink); cursor: pointer; transition: background 0.12s, opacity 0.12s; }
  .period-nav .period-arrow:hover:not(:disabled) { background: var(--surface-3); }
  .period-nav .period-arrow:disabled { opacity: 0.35; cursor: not-allowed; }
  .period-nav .period-current { font-weight: 600; min-width: 110px; text-align: center; }

  /* Forecast tiles — different visual treatment so they're obviously
     not raw period values. Tone classes drive the left-border accent. */
  .kpi-tile--forecast { background: var(--surface); border-style: dashed; }
  .kpi-tile-value--forecast { font-size: 17px; letter-spacing: -0.005em; }
  .kpi-tile--good     { border-left: 3px solid var(--good); }
  .kpi-tile--warn     { border-left: 3px solid var(--warn); }
  .kpi-tile--bad      { border-left: 3px solid var(--bad); }
  .kpi-tile--neutral  { border-left: 3px solid var(--border); }

  .kpi-section { margin-bottom: 16px; }
  .kpi-section-head {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 600;
    margin: 0 0 8px;
    padding: 0 2px;
  }
  .kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
  }
  .kpi-tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 12px 14px;
    display: flex; flex-direction: column; gap: 4px;
    min-height: 86px;
  }
  .kpi-tile--empty { opacity: 0.65; }
  .kpi-tile-label { font-size: 11.5px; color: var(--ink-2); font-weight: 500; letter-spacing: 0.01em; line-height: 1.35; }
  .kpi-tile-value-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 1px; }
  .kpi-tile-value { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
  .kpi-tile-delta { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
  .kpi-delta { font-weight: 600; }
  .kpi-delta--good { color: var(--good); }
  .kpi-delta--bad { color: var(--bad); }
  .kpi-delta--neutral { color: var(--ink-2); }
  .kpi-spark { display: block; flex-shrink: 0; }
  .kpi-spark-empty { display: inline-block; width: 78px; height: 26px; }
  .kpi-footnote {
    margin-top: 8px;
    padding: 10px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 11.5px;
    color: var(--ink-2);
    line-height: 1.55;
  }
  .kpi-footnote a { color: var(--accent-strong); text-decoration: none; }
  [data-theme="dark"] .kpi-footnote a { color: var(--accent); }
  .kpi-footnote a:hover { text-decoration: underline; }

  .kpi-empty-banner {
    background: var(--warn-bg);
    border: 1px solid var(--warn-border);
    border-radius: var(--radius);
    padding: 14px 18px;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--warn-ink);
    line-height: 1.55;
  }
  .kpi-empty-banner b { color: var(--warn-ink); display: block; font-size: 13.5px; margin-bottom: 2px; }

  .kpi-notes-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 14px 18px;
    margin: 12px 0 10px;
  }
  .kpi-notes-head { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-bottom: 10px; }
  .kpi-notes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
  .kpi-note { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; }
  .kpi-note-label { font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-bottom: 4px; }
  .kpi-note-body { font-size: 12.5px; color: var(--ink); line-height: 1.5; white-space: pre-wrap; }
  .kpi-note-empty { color: var(--ink-3); font-size: 12px; padding: 6px 4px; }
  .kpi-notes-prior { margin-top: 14px; }
  .kpi-notes-prior summary { font-size: 11.5px; color: var(--ink-2); cursor: pointer; padding: 6px 0; user-select: none; }
  .kpi-notes-prior summary:hover { color: var(--ink); }
  .kpi-notes-week { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
  .kpi-notes-week-head { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-bottom: 6px; }

  @media (max-width: 540px) {
    .kpi-grid { grid-template-columns: 1fr 1fr; }
    .kpi-tile-value { font-size: 18px; }
  }

  /* ============================================================
     Employee register (Admin > Staff)
     ============================================================ */
  .emp-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--border); background: var(--surface-2); flex-wrap: wrap; }
  .emp-toolbar .emp-summary { font-size: 11.5px; color: var(--ink-3); }
  .emp-toolbar .emp-summary b { color: var(--ink-2); }
  .emp-toolbar .actions { display: flex; gap: 6px; flex-wrap: wrap; }

  table.emp-register { width: 100%; border-collapse: collapse; font-size: 12.5px; }
  table.emp-register th { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 600; padding: 10px 12px; text-align: left; background: var(--surface-2); border-bottom: 1px solid var(--border); }
  table.emp-register th.num, table.emp-register td.num { text-align: right; font-variant-numeric: tabular-nums; }
  table.emp-register td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
  table.emp-register tr:last-child td { border-bottom: 0; }
  table.emp-register tr:hover td { background: var(--surface-2); }
  table.emp-register tr.editing td { background: var(--surface-2); }
  table.emp-register .name-cell { font-weight: 600; display: flex; align-items: center; gap: 8px; }
  table.emp-register .name-cell .ent-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  table.emp-register .edit-tag { font-size: 9.5px; padding: 1px 6px; border-radius: 999px; background: var(--info-bg); color: var(--info-ink); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-left: 6px; }
  table.emp-register .add-tag { font-size: 9.5px; padding: 1px 6px; border-radius: 999px; background: var(--good-bg); color: var(--good-ink); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-left: 6px; }
  table.emp-register .row-actions { display: flex; gap: 4px; justify-content: flex-end; }
  table.emp-register input, table.emp-register select { background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: 5px; padding: 6px 8px; font: inherit; font-size: 12.5px; width: 100%; min-width: 0; }
  table.emp-register input:focus, table.emp-register select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  table.emp-register input[type="checkbox"] { width: auto; }
  table.emp-register .annual-hint { font-size: 10.5px; color: var(--ink-3); margin-top: 2px; font-variant-numeric: tabular-nums; }
  table.emp-register .ni-hint { font-size: 10.5px; color: var(--ink-3); margin-top: 2px; font-variant-numeric: tabular-nums; }

  .emp-btn { border: 1px solid transparent; padding: 5px 10px; border-radius: 6px; font-size: 11.5px; font-weight: 600; cursor: pointer; letter-spacing: 0.02em; transition: filter 0.15s, transform 0.05s; white-space: nowrap; }
  .emp-btn:hover { filter: brightness(0.96); }
  .emp-btn:active { transform: translateY(1px); }
  .emp-btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .emp-btn.primary { background: var(--accent); color: var(--on-accent); }
  .emp-btn.save { background: var(--good); color: white; }
  .emp-btn.danger { background: var(--bad); color: white; }
  [data-theme="dark"] .emp-btn.save,
  [data-theme="dark"] .emp-btn.danger { color: #0a0c10; }
  .emp-btn.ghost { background: var(--surface); border-color: var(--border); color: var(--ink-2); }
  .emp-btn.ghost:hover { color: var(--ink); border-color: var(--border-strong); }
  .emp-btn.reset { background: transparent; border-color: var(--border); color: var(--ink-3); font-weight: 500; }
  .emp-btn.reset:hover { color: var(--bad); border-color: var(--bad); }

  .ni-display { font-variant-numeric: tabular-nums; }
  .ni-display.zero { color: var(--ink-3); }

  /* ============================================================
     Annual leave module
     ============================================================ */
  .leave-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: -4px 0 14px; font-size: 11.5px; color: var(--ink-3); }
  .leave-meta-row .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--ink-2); }
  .leave-meta-row .pill b { color: var(--ink); font-weight: 600; }
  .leave-meta-row .pill.warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-ink); }
  .leave-meta-row .pill.warn b { color: var(--warn-ink); }

  .leave-pending-list { display: flex; flex-direction: column; }
  .leave-request { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: start; padding: 14px 18px; border-bottom: 1px solid var(--border); }
  .leave-request:last-child { border-bottom: 0; }
  .leave-request .who { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .leave-request .who .ent-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
  .leave-request .dates { font-size: 13px; color: var(--ink); margin-top: 4px; font-variant-numeric: tabular-nums; }
  .leave-request .meta { font-size: 11.5px; color: var(--ink-3); margin-top: 5px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
  .leave-request .meta .age-warn { color: var(--warn-ink); font-weight: 600; }
  .leave-request .meta .age-bad { color: var(--bad-ink); font-weight: 600; }
  .leave-request .meta .dismiss-link { background: transparent; border: 0; padding: 0; font: inherit; font-size: 11.5px; color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
  .leave-request .meta .dismiss-link:hover { color: var(--bad-ink); }
  .leave-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
  .leave-btn { border: 1px solid transparent; padding: 6px 12px; border-radius: 7px; font-size: 12px; font-weight: 600; cursor: pointer; letter-spacing: 0.02em; transition: filter 0.15s, transform 0.05s; white-space: nowrap; }
  .leave-btn:hover { filter: brightness(0.96); }
  .leave-btn:active { transform: translateY(1px); }
  .leave-btn.accept { background: var(--good); color: white; }
  .leave-btn.modify { background: var(--warn); color: white; }
  .leave-btn.decline { background: var(--bad); color: white; }
  [data-theme="dark"] .leave-btn.accept,
  [data-theme="dark"] .leave-btn.modify,
  [data-theme="dark"] .leave-btn.decline { color: #0a0c10; }
  .leave-btn.ghost { background: var(--surface); border-color: var(--border); color: var(--ink-2); font-weight: 500; }
  .leave-btn.ghost:hover { color: var(--ink); border-color: var(--border-strong); }

  .leave-empty { padding: 22px 18px; text-align: center; color: var(--ink-3); font-size: 13px; }
  .leave-empty b { color: var(--ink-2); font-weight: 600; }

  .decision-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }
  .decision-chip.approved { background: var(--good-bg); color: var(--good-ink); }
  .decision-chip.declined { background: var(--bad-bg); color: var(--bad-ink); }
  .decision-chip.modified { background: var(--warn-bg); color: var(--warn-ink); }

  .sheet-sync { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }
  .sheet-sync.synced { background: var(--good-bg); color: var(--good-ink); }
  .sheet-sync.drift { background: var(--warn-bg); color: var(--warn-ink); }
  .sheet-sync.local { background: var(--info-bg); color: var(--info-ink); }
  .sheet-sync.na { background: var(--surface-3); color: var(--ink-3); }

  table.leave-log { width: 100%; border-collapse: collapse; font-size: 12.5px; }
  table.leave-log th { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 600; padding: 10px 14px; text-align: left; background: var(--surface-2); border-bottom: 1px solid var(--border); }
  table.leave-log td { padding: 9px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
  table.leave-log tr:last-child td { border-bottom: 0; }
  table.leave-log tr:hover td { background: var(--surface-2); }
  table.leave-log .date { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
  table.leave-log .row-notes { color: var(--ink-2); font-size: 11.5px; margin-top: 3px; line-height: 1.45; }

  .leave-add-form { padding: 16px 18px; display: grid; grid-template-columns: 1.2fr 1fr 0.6fr 1.4fr; gap: 10px; align-items: end; }
  .leave-add-form .field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .leave-add-form label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; color: var(--ink-3); }
  .leave-add-form input, .leave-add-form select, .leave-add-form textarea {
    background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: 6px;
    padding: 7px 10px; font: inherit; font-size: 13px; min-height: 32px;
  }
  .leave-add-form input:focus, .leave-add-form select:focus, .leave-add-form textarea:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
  }
  .leave-add-form .dates-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
  .leave-add-form .date-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
  .leave-add-form .date-chip { background: var(--surface-3); color: var(--ink); padding: 2px 8px; border-radius: 999px; font-size: 11.5px; display: inline-flex; align-items: center; gap: 6px; }
  .leave-add-form .date-chip button { background: transparent; border: 0; color: var(--ink-3); cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }
  .leave-add-form .date-chip button:hover { color: var(--bad); }
  .leave-add-form .submit-row { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
  .leave-add-form .half-day { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-2); cursor: pointer; }
  .leave-add-form .half-day input { width: auto; min-height: auto; margin: 0; }

  table.allowance { width: 100%; border-collapse: collapse; font-size: 12.5px; }
  table.allowance th { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 600; padding: 10px 14px; text-align: left; background: var(--surface-2); border-bottom: 1px solid var(--border); }
  table.allowance th.num, table.allowance td.num { text-align: right; font-variant-numeric: tabular-nums; }
  table.allowance td { padding: 10px 14px; border-bottom: 1px solid var(--border); }
  table.allowance tr:last-child td { border-bottom: 0; }
  table.allowance tr:hover td { background: var(--surface-2); }
  table.allowance .staff-name { font-weight: 600; display: flex; align-items: center; gap: 8px; }
  table.allowance .staff-name .ent-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
  table.allowance .util-bar { position: relative; height: 6px; background: var(--surface-3); border-radius: 999px; overflow: hidden; min-width: 70px; max-width: 130px; margin-top: 5px; }
  table.allowance .util-bar .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; }
  table.allowance .util-bar .fill.taken { background: var(--ink-2); }
  table.allowance .util-bar .fill.booked { background: var(--accent); opacity: 0.55; }
  table.allowance .util-label { font-size: 10.5px; color: var(--ink-3); margin-top: 3px; }
  table.allowance .status-row td { padding: 7px 14px; background: var(--surface-2); font-size: 11.5px; color: var(--ink-2); }
  table.allowance .leaving-tag { font-size: 10px; padding: 1px 7px; border-radius: 999px; background: var(--warn-bg); color: var(--warn-ink); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; margin-left: 6px; }

  /* "Coming up — next 7 days" list */
  .leave-upcoming-list { display: flex; flex-direction: column; gap: 8px; }
  .leave-upcoming-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
  .leave-upcoming-row .who { display: flex; align-items: center; gap: 8px; font-size: 13px; flex-wrap: wrap; }
  .leave-upcoming-row .who .ent-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
  .leave-upcoming-row .date-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
  .leave-upcoming-row .date-chip { background: var(--surface-1); border: 1px solid var(--border); color: var(--ink); padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-variant-numeric: tabular-nums; }
  .leave-upcoming-row .date-chip b { color: var(--accent-ink, var(--ink)); }
  .leave-upcoming-row .sheet-sync.local, .leave-upcoming-row .decision-chip { margin-left: 4px; }

  /* Per-person allowance dropdown view */
  #leave-allowance-mount { padding: 16px 18px; }
  #leave-allowance-mount + #leave-drift-mount:not(:empty) { padding: 0 18px 16px; }
  .leave-allowance-picker { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; max-width: 360px; }
  .leave-allowance-picker label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 600; }
  .leave-allowance-select { padding: 9px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-1); color: var(--ink); font-size: 13.5px; font-weight: 500; min-height: 38px; width: 100%; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 10px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 32px; }
  .leave-allowance-select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
  .leave-allowance-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
  .leave-allowance-head { display: flex; flex-direction: column; gap: 4px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
  .leave-allowance-head .staff-name { font-weight: 600; display: flex; align-items: center; gap: 8px; font-size: 15px; }
  .leave-allowance-head .staff-name .ent-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
  .leave-allowance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
  .leave-allowance-grid .metric { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-sm); }
  .leave-allowance-grid .metric-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 600; }
  .leave-allowance-grid .metric-value { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
  .leave-allowance-util .util-bar { position: relative; height: 8px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
  .leave-allowance-util .util-bar .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; }
  .leave-allowance-util .util-bar .fill.taken { background: var(--ink-2); }
  .leave-allowance-util .util-bar .fill.booked { background: var(--accent); opacity: 0.55; }
  .leave-allowance-util .util-label { font-size: 11px; color: var(--ink-3); margin-top: 5px; }
  .leave-allowance-card .leaving-tag { font-size: 10px; padding: 1px 7px; border-radius: 999px; background: var(--warn-bg); color: var(--warn-ink); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; margin-left: 6px; }

  @media (max-width: 700px) {
    .leave-upcoming-row { grid-template-columns: 1fr; }
    .leave-upcoming-row .date-chips { justify-content: flex-start; }
    .leave-allowance-grid { grid-template-columns: 1fr; }
  }

  .drift-card { background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 12.5px; color: var(--warn-ink); margin-top: 12px; }
  .drift-card b { color: var(--warn-ink); }
  .drift-card ul { margin: 6px 0 0; padding-left: 18px; }
  .drift-card li { margin-bottom: 3px; }

  @media (max-width: 880px) {
    .leave-add-form { grid-template-columns: 1fr 1fr; }
    .leave-add-form .submit-row { grid-column: 1 / -1; justify-content: flex-end; }
  }
  @media (max-width: 540px) {
    .leave-add-form { grid-template-columns: 1fr; }
    .leave-request { grid-template-columns: 1fr; }
    .leave-actions { justify-content: flex-start; }
  }

  @media (max-width: 540px) {
    .timeline-item { grid-template-columns: 1fr; gap: 6px; }
    .staff-stats { gap: 14px; }
  }

  @media (max-width: 880px) {
    .metrics { grid-template-columns: repeat(2, 1fr); }
    .chart-row { grid-template-columns: 1fr; }
    .ratio-grid { grid-template-columns: 1fr; }
    .ratio-metrics { grid-template-columns: 1fr; }
    .os-bar { flex-direction: column; align-items: flex-start; }
    .module-tabs { margin-left: 0; }
    table.pay-log-table { font-size: 11.5px; }
    table.pay-log-table th, table.pay-log-table td { padding: 7px 8px; }
  }
  @media (max-width: 540px) {
    .wrap { padding: 0 12px 60px; }
    .metric .value { font-size: 18px; }
    .brand-mark { font-size: 17px; }
  }