/* ============================================================================
   EXPENSE MANAGER — DESIGN SYSTEM  ("Modern", dark-first)
   Canonical stylesheet. Blazor WASM consumes this directly; WPF mirrors the
   same token names into Dark.xaml / Light.xaml ResourceDictionaries.
   Tokens live on :root + [data-theme]; theme is a class-free attribute swap.
   Canonical home: docs/design/expense-manager-ds/system.css. The served copy at
   src/ExpenseManager.BlazorClient/wwwroot/css/system.css MUST stay byte-identical:
   edit the canonical file, then re-copy. Drift check (must print nothing):
     git diff --no-index docs/design/expense-manager-ds/system.css \
       src/ExpenseManager.BlazorClient/wwwroot/css/system.css
   ============================================================================ */

/* ---- Static tokens (theme-independent) ---------------------------------- */
:root{
  /* Brand & data hues (constant across themes; the per-theme block re-states
     the few that shift for light-mode contrast — see below) */
  --accent:#2DD4BF; --accent-2:#22D3EE;
  --pos:#34D399; --neg:#FB7185;
  --blue:#60A5FA; --amber:#FBBF24; --violet:#A78BFA; --pink:#F472B6; --slate:#94A3B8;
  --tenant-avatar-bg:#334155;

  /* Type */
  --sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",monospace;

  /* Radii */
  --r:16px;     /* card        */
  --r-sm:10px;  /* control / inner */
  --r-pill:20px;/* pill / chip */
}

/* ---- Dark theme (default) ----------------------------------------------- */
html[data-theme="dark"]{
  --bg:#0A0C10;
  --g1:rgba(45,212,191,.10); --g2:rgba(34,211,238,.06);   /* ambient glow stops */
  --surface:#12161D; --surface-2:#181E27; --surface-h:#1C232E;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.12);
  --text:#EAEEF5; --text-2:#98A2B3; --text-3:#5C6675;
  --shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 14px 40px -16px rgba(0,0,0,.7);
  --chip-pos:rgba(52,211,153,.14); --chip-neg:rgba(251,113,133,.14); --chip-warn:rgba(251,191,36,.16);
  --accent-soft:rgba(45,212,191,.13); --sel:rgba(45,212,191,.10);
  color-scheme:dark;
}

/* ---- Light theme (token-swap, no re-layout) ----------------------------- */
html[data-theme="light"]{
  --bg:#F6F7F9;
  --g1:rgba(13,148,136,.10); --g2:rgba(8,145,178,.05);
  --surface:#FFFFFF; --surface-2:#F3F5F8; --surface-h:#EEF1F5;
  --line:rgba(12,18,28,.08); --line-2:rgba(12,18,28,.14);
  --text:#0E141B; --text-2:#5A6573; --text-3:#98A2B3;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 12px 32px -18px rgba(16,24,40,.28);
  --chip-pos:rgba(5,150,105,.12); --chip-neg:rgba(225,29,72,.10); --chip-warn:rgba(217,119,6,.14);
  /* hues deepened one step for contrast on white */
  --accent:#0D9488; --accent-2:#0891B2; --pos:#047857; --neg:#E11D48;
  --blue:#2563EB; --amber:#B45309; --violet:#7C3AED; --pink:#DB2777; --slate:#64748B;
  --accent-soft:rgba(13,148,136,.10); --sel:rgba(13,148,136,.08);
  color-scheme:light;
}

/* ---- Reset & base ------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-family:var(--sans);color:var(--text);background:var(--bg);line-height:1.5;letter-spacing:-.011em}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
::selection{background:var(--accent-soft)}

/* Ambient corner glow — apply to a fixed full-bleed pseudo-layer behind app */
.glow::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(680px 380px at 16% -6%,var(--g1),transparent 70%),
             radial-gradient(560px 340px at 96% 4%,var(--g2),transparent 72%)}

/* ============================================================================
   SHELL — sidebar + topbar
   ============================================================================ */
.app{position:relative;z-index:1;display:grid;grid-template-columns:248px 1fr;min-height:100vh}

.side{padding:22px 16px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:24px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:11px;padding:4px 8px}
.brand .mark{width:32px;height:32px;border-radius:9px;background:var(--accent);display:grid;place-items:center;color:#04201d;font-weight:700;font-size:17px;box-shadow:0 6px 18px -6px var(--accent)}
.brand .name{font-weight:600;font-size:15px}
.brand .name span{color:var(--text-2);font-weight:400;display:block;font-size:11px}

.nav{display:flex;flex-direction:column;gap:2px}
.nav .lbl{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);padding:0 10px 8px}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--r-sm);color:var(--text-2);text-decoration:none;font-size:13.5px;font-weight:500;transition:.15s}
.nav a svg{width:17px;height:17px;opacity:.85}
.nav a:hover{background:var(--surface-2);color:var(--text)}
.nav a.on{background:var(--accent-soft);color:var(--text)}
.nav a.on svg{opacity:1}
.side .foot{margin-top:auto}
.imp{display:flex;align-items:center;gap:10px;padding:11px;border-radius:var(--r-sm);border:1px dashed var(--line-2);font-size:12px;color:var(--text-2)}
.imp .ring{width:8px;height:8px;border-radius:50%;background:var(--neg);box-shadow:0 0 0 3px var(--chip-neg)}

.topbar{display:flex;align-items:center;gap:14px;padding:16px 30px;border-bottom:1px solid var(--line);position:sticky;top:0;backdrop-filter:blur(12px);background:color-mix(in srgb,var(--bg) 78%,transparent);z-index:5}
.topbar h1{font-size:18px;font-weight:600;letter-spacing:-.02em;margin-right:auto}
.search{flex:1;max-width:360px;display:flex;align-items:center;gap:9px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 12px;color:var(--text-2);font-size:13px}
.search svg{width:15px;height:15px}
.search .k{margin-left:auto;font-size:11px;border:1px solid var(--line-2);border-radius:5px;padding:1px 6px}
.live{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--text-2)}
.live .dot{width:7px;height:7px;border-radius:50%;background:var(--pos);animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--chip-pos)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.tenant{display:flex;align-items:center;gap:9px;padding:6px 8px 6px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);cursor:pointer;font-size:13px;font-weight:500}
.tenant .av{width:22px;height:22px;border-radius:6px;background:var(--tenant-avatar-bg);display:grid;place-items:center;font-size:11px;color:#fff}
.tenant .chev{color:var(--text-2);font-size:10px}

/* ============================================================================
   CONTROLS — buttons, icon buttons, segmented control
   ============================================================================ */
.btn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);color:var(--text);font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.btn:hover{background:var(--surface-h)}
.btn:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#04201d}
.btn svg{width:15px;height:15px}
.iconbtn{width:36px;height:36px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);color:var(--text-2);display:grid;place-items:center;cursor:pointer;transition:.15s}
.iconbtn:hover{background:var(--surface-h);color:var(--text)}
.iconbtn:focus-visible,.tenant:focus-visible,.nav a:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.iconbtn svg{width:17px;height:17px}
.iconbtn.sm{width:34px;height:34px}.iconbtn.sm svg{width:16px;height:16px}

.seg{display:inline-flex;gap:2px;padding:3px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm)}
.seg button{border:0;background:transparent;color:var(--text-2);font:inherit;font-size:12.5px;font-weight:500;padding:6px 13px;border-radius:7px;cursor:pointer;transition:.15s}
.seg button.on{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.18)}

/* ============================================================================
   CARD / PANEL / CHIPS / PILLS
   ============================================================================ */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.panel{padding:20px}
.ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.ph h3{font-size:15px;font-weight:600;letter-spacing:-.02em}
.ph .sub{font-size:12px;color:var(--text-2)}

/* Chip — sentiment is COLOR, direction (▲/▼) is DATA. See sentiment rule.
   Prefer semantic .pos/.neg/.warn. .up/.down are direction→color aliases. */
.chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:2px 7px;border-radius:var(--r-pill)}
.chip.pos,.chip.up,.chip.ok{color:var(--pos);background:var(--chip-pos)}
.chip.neg,.chip.down,.chip.bad{color:var(--neg);background:var(--chip-neg)}
.chip.warn{color:var(--amber);background:var(--chip-warn)}

/* Category pill (ledger / legends) */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:500;color:var(--text-2);background:var(--surface-2);border:1px solid var(--line);padding:2px 8px;border-radius:var(--r-pill)}
.pill i{width:7px;height:7px;border-radius:2px}

/* Insight / discipline callout */
.note{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;border-radius:var(--r-sm);background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);font-size:12.5px;color:var(--text)}
.note svg{width:16px;height:16px;color:var(--accent);flex-shrink:0;margin-top:1px}
.note.warn{background:var(--chip-warn);border-color:color-mix(in srgb,var(--amber) 30%,transparent)}
.note.warn svg{color:var(--amber)}

/* ============================================================================
   KPI / SUMMARY CARDS
   ============================================================================ */
.kpi{padding:16px}
.kpi .cap,.scard .cap{font-size:11.5px;color:var(--text-2);font-weight:500}
.kpi .big,.scard .big{font-size:23px;font-weight:600;margin-top:9px;letter-spacing:-.03em}
.kpi .big.neg,.scard .big.neg,.scard .big.danger{color:var(--neg)}
.kpi .big.posv{color:var(--pos)}
.kpi .row{display:flex;align-items:center;gap:7px;margin-top:9px}
.kpi .muted,.scard .row{font-size:11.5px;color:var(--text-3)}
.scard{padding:16px}.scard .row{margin-top:8px;font-size:12px}

/* ============================================================================
   CHARTS — hand-rendered SVG; donut via conic-gradient
   ============================================================================ */
.chart{width:100%;height:200px;display:block}
.gl{stroke:var(--line);stroke-width:1}
.xlab{fill:var(--text-3);font-size:10px;font-family:var(--sans)}
.vlab{fill:var(--text-3);font-size:9.5px;font-family:var(--mono)}
.endlab{font-family:var(--mono);font-size:11px;font-weight:600}
.legend{display:flex;gap:14px;font-size:12px;color:var(--text-2)}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:6px;vertical-align:middle}
.legend .it{display:inline-flex;align-items:center;gap:7px}
.legend .it i{width:14px;height:3px;border-radius:2px;margin:0}

/* Donut */
.donutwrap{display:flex;align-items:center;gap:22px}
.donut{width:150px;height:150px;border-radius:50%;flex-shrink:0;position:relative;-webkit-mask:radial-gradient(transparent 55%,#000 56%);mask:radial-gradient(transparent 55%,#000 56%)}
.donut .ctr{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.dlegend{display:flex;flex-direction:column;gap:9px;flex:1}
.dlegend .li{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;font-size:12.5px}
.dlegend .li i{width:9px;height:9px;border-radius:3px}
.dlegend .li .nm{color:var(--text-2)}
.dlegend .li .vl{font-weight:600}
.dlegend .li.click{cursor:pointer;padding:3px 6px;margin:-3px -6px;border-radius:7px;transition:.12s}
.dlegend .li.click:hover{background:var(--surface-2)}

/* Utilization / payoff bars */
.ub{padding:13px 0;border-bottom:1px solid var(--line)}
.ub:last-child{border-bottom:0}
.ub .top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.ub .nm{font-size:13.5px;font-weight:500}.ub .nm small{color:var(--text-3);font-weight:400;margin-left:6px}
.ub .pct{font-size:12.5px;font-weight:600;font-family:var(--mono)}
.ub .track{height:8px;border-radius:4px;background:var(--surface-2);overflow:hidden;position:relative}
.ub .fill{height:100%;border-radius:4px;transform-origin:left;transform:scaleX(var(--w,1))}
.ub .sub{display:flex;justify-content:space-between;font-size:11.5px;color:var(--text-3);margin-top:6px}
.danger{color:var(--neg)!important}

/* Budget-vs-actual */
.bva{padding:13px 0;border-bottom:1px solid var(--line)}.bva:last-child{border-bottom:0}
.bva .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.bva .cat{font-size:13.5px;font-weight:500}.bva .num{font-family:var(--mono);font-size:12px;color:var(--text-2)}
.bva .bar{height:8px;border-radius:4px;background:var(--surface-2);position:relative;overflow:hidden}
.bva .act{position:absolute;inset:0 auto 0 0;border-radius:4px;background:var(--accent)}
.bva .act.over{background:var(--neg)}
.bva .pctline{position:absolute;top:0;bottom:0;width:1.5px;background:var(--text-3)}
.bva .st{font-size:11px;margin-top:6px;color:var(--text-3)}
.bva .st .over{color:var(--neg);font-weight:600}.bva .st .under{color:var(--pos);font-weight:600}

/* Projection bar */
.projbar{height:30px;border-radius:8px;background:var(--surface-2);position:relative;overflow:hidden;margin:6px 0 10px}
.projbar .spent{position:absolute;inset:0 auto 0 0;border-radius:8px;background:var(--accent)}
.projbar .proj{position:absolute;inset:0 auto 0 0;border-radius:8px;background:repeating-linear-gradient(45deg,var(--neg),var(--neg) 6px,transparent 6px,transparent 12px);opacity:.5}
.projbar .budgetline{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--text)}
.projlabels{display:flex;justify-content:space-between;font-size:12px}

/* Sparkline */
.spark{width:54px;height:18px}
.trendchip{font-family:var(--mono);font-size:11px;font-weight:600}
.trendchip.up{color:var(--neg)}.trendchip.dn{color:var(--pos)}

/* Prediction strip (Credit & Loans) — cadence-predicted next payment */
.pred{display:flex;align-items:center;gap:14px;margin-top:11px;padding-top:11px;border-top:1px dashed var(--line-2);font-size:12px;flex-wrap:wrap}
.pred .it{display:flex;align-items:center;gap:7px}
.pred .it .lab{color:var(--text-3)}
.pred .it .val{font-weight:600;font-family:var(--mono)}
.pred .due{color:var(--text);font-weight:600}
.pred .ahead{color:var(--pos);font-weight:600}
.brandic{width:30px;height:20px;border-radius:4px;background:linear-gradient(135deg,#334155,#1e293b);display:grid;place-items:center;font-size:8px;color:#fff;font-weight:700}
.state{font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:1px 7px;border-radius:var(--r-pill)}
.state.active{color:var(--accent);background:var(--accent-soft)}
.state.final{color:var(--text-3);background:var(--surface-2)}

/* Category YoY bars (Compare) — ghost = prior period, now = current */
.cyo{padding:13px 0;border-bottom:1px solid var(--line)}.cyo:last-child{border-bottom:0}
.cyo .top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.cyo .nm{font-size:13.5px;font-weight:500}
.cyo .cat-label{display:inline-flex;align-items:center;gap:7px}
.cyo .cat-swatch{width:8px;height:8px;border-radius:3px;display:inline-block;box-shadow:0 0 0 1px var(--line)}
.cyo .nums{font-family:var(--mono);font-size:12px;color:var(--text-2)}.cyo .nums b{color:var(--text)}
.cyo .track{height:9px;position:relative}
.cyo .ghost{position:absolute;left:0;top:0;height:100%;border-radius:4px;background:var(--surface-2);border:1px solid var(--line-2)}
.cyo .now{position:absolute;left:0;top:0;height:100%;border-radius:4px;background:var(--accent);transform-origin:left;transform:scaleX(1)}
.cyo .d{font-size:11.5px;font-weight:600;font-family:var(--mono)}.cyo .d.up{color:var(--neg)}.cyo .d.dn{color:var(--pos)}

/* ============================================================================
   LEDGER TABLE
   ============================================================================ */
.tablewrap{overflow:auto}
table.lg{width:100%;border-collapse:collapse;font-size:13px}
table.lg thead th{position:sticky;top:0;background:var(--surface);text-align:left;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);font-weight:600;padding:10px 14px;border-bottom:1px solid var(--line);cursor:pointer;white-space:nowrap;z-index:1}
table.lg thead th.r,table.lg td.r{text-align:right}
table.lg thead th .ar{color:var(--accent);font-size:9px;margin-left:3px}
table.lg .grouprow td{background:var(--surface-2);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);font-weight:600;padding:7px 14px}
table.lg tbody td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}
table.lg tbody tr:hover td{background:var(--surface-2)}
table.lg tbody tr.sel td{background:var(--sel);box-shadow:inset 2px 0 0 var(--accent)}
.date{color:var(--text-2);font-size:12px;width:78px}
.desc{font-weight:500}
.acct{color:var(--text-2);font-size:12px}
.amt{font-weight:600}.amt.out::before{content:"−";color:var(--text-3)}
.amt.in{color:var(--pos)}.amt.in::before{content:"+"}
.bal{color:var(--text-2);font-size:12.5px}

/* ============================================================================
   TABS + SPLIT PANES + STATUS BAR
   ============================================================================ */
.tabs{display:flex;align-items:stretch;padding:0 14px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.tab{display:flex;align-items:center;gap:8px;padding:10px 14px;border-right:1px solid var(--line);color:var(--text-2);font-size:12.5px;font-weight:500;cursor:pointer;position:relative;white-space:nowrap}
.tab .dot{width:8px;height:8px;border-radius:3px}
.tab .ct{font-family:var(--mono);font-size:11px;color:var(--text-3)}
.tab .x{opacity:0;color:var(--text-3);font-size:13px;width:14px;text-align:center}
.tab:hover{color:var(--text);background:var(--surface-h)}.tab:hover .x{opacity:.7}
.tab.on{color:var(--text);background:var(--surface)}
.tab.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent)}
.tab.add{color:var(--text-3);font-size:16px;padding:10px 13px}
.tabs .spacer{flex:1;border-right:0}
.tabtool{display:flex;align-items:center;gap:6px;padding:0 8px}
.tabtool button{width:30px;height:30px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--text-2);cursor:pointer;display:grid;place-items:center}
.tabtool button.on,.tabtool button:hover{background:var(--surface);border-color:var(--line);color:var(--text)}
.tabtool button svg{width:16px;height:16px}

.panes{display:grid;grid-template-columns:1fr}
.panes.split{grid-template-columns:1fr 1fr}
.pane{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--line)}
.pane:last-child{border-right:0}
.pane.second{display:none}.panes.split .pane.second{display:flex}
.panehdr{display:none;align-items:center;justify-content:space-between;padding:9px 16px;border-bottom:1px solid var(--line);background:var(--surface-2);font-size:12px}
.panes.split .panehdr{display:flex}
.panehdr .pick{display:inline-flex;align-items:center;gap:7px;font-weight:500;color:var(--text)}
.panehdr .pick .dot{width:8px;height:8px;border-radius:3px}
.panehdr .diff{font-family:var(--mono);font-size:11.5px}
.up{color:var(--pos)}.down{color:var(--neg)}

.statusbar{display:flex;align-items:center;border-top:1px solid var(--line);background:var(--surface-2);font-size:12px}
.statusbar .seg{padding:9px 16px;border:0;border-right:1px solid var(--line);display:flex;gap:8px;align-items:baseline;border-radius:0;background:none}
.statusbar .seg .k{color:var(--text-2)}
.statusbar .seg .v{font-family:var(--mono);font-weight:600}
.statusbar .seg .v.neg{color:var(--neg)}.statusbar .seg .v.pos{color:var(--pos)}
.statusbar .selnote{margin-left:auto;padding:9px 16px;color:var(--accent);font-weight:500}

/* ============================================================================
   FILTER BAR / CHIPS
   ============================================================================ */
.filterbar{display:flex;align-items:center;gap:8px;padding:11px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.fchip{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 6px 0 11px;border-radius:8px;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:500;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.fchip .x{cursor:pointer;opacity:.7;font-size:13px;width:16px;text-align:center}
.fchip.neutral{background:var(--surface-2);color:var(--text-2);border-color:var(--line)}
.addfilter{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:8px;border:1px dashed var(--line-2);color:var(--text-2);font-size:12px;cursor:pointer;background:transparent}
.fsearch{margin-left:auto;display:flex;align-items:center;gap:8px;height:30px;padding:0 11px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line);color:var(--text-3);font-size:12.5px;min-width:200px}
.fsearch svg{width:14px;height:14px}
.sortsel{height:30px;padding:0 11px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line);color:var(--text-2);font-size:12px;display:inline-flex;align-items:center}

/* ============================================================================
   DRILL-DOWN POPOVER
   ============================================================================ */
.pop{width:286px;background:var(--surface);border:1px solid var(--line-2);border-radius:14px;box-shadow:0 22px 64px -20px rgba(0,0,0,.65);padding:16px}
.pop .ph2{display:flex;align-items:center;gap:9px}
.pop .ph2 i{width:11px;height:11px;border-radius:3px}
.pop .ph2 .nm{font-size:15px;font-weight:600}
.pop .tot{font-family:var(--mono);font-size:23px;font-weight:600;letter-spacing:-.02em;margin-top:6px}
.pop .g{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:13px 0;padding:13px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pop .st .k{font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em}
.pop .st .v{font-size:14px;font-weight:600;font-family:var(--mono);margin-top:2px}
.pop .st .v.up{color:var(--neg)}.pop .st .v.dn{color:var(--pos)}
.pop .merch{font-size:12px;color:var(--text-2);margin-bottom:12px}.pop .merch b{color:var(--text);font-weight:500}
.pop .acts{display:flex;gap:8px}
.pop .acts button{flex:1;height:34px;border-radius:9px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--line)}
.pop .acts .go{background:var(--accent);border-color:var(--accent);color:#04201d}
.pop .acts .cmp{background:var(--surface-2);color:var(--text)}

/* ============================================================================
   PERIOD PICKER (Compare) + aligned-overlay helpers
   ============================================================================ */
.picker{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.preset{display:flex;gap:2px;padding:3px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm)}
.preset button{border:0;background:transparent;color:var(--text-2);font:inherit;font-size:12.5px;font-weight:500;padding:7px 13px;border-radius:7px;cursor:pointer}
.preset button.on{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.range{display:inline-flex;align-items:center;gap:9px;height:36px;padding:0 14px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);font-size:13px;font-weight:500}
.range svg{width:15px;height:15px;color:var(--text-2)}
.range .len{font-family:var(--mono);font-size:11.5px;color:var(--text-3)}
.vs{margin-left:auto;display:flex;align-items:center;gap:8px}
.vs .lab{font-size:12px;color:var(--text-3)}
.ychip{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);color:var(--text-2);font-size:12.5px;font-weight:500;cursor:pointer;font-family:var(--mono)}
.ychip .sw{width:10px;height:10px;border-radius:3px;background:var(--text-3)}
.ychip.on{color:var(--text);border-color:var(--line-2)}
.ychip.y26.on{border-color:color-mix(in srgb,var(--accent) 50%,transparent)}.ychip.y26.on .sw{background:var(--accent)}
.ychip.y25.on .sw{background:var(--violet)}.ychip.y24.on .sw{background:var(--slate)}
.ychip.off{opacity:.45}

/* ============================================================================
   UPCOMING PAYMENTS / OBLIGATIONS  (Required vs Discipline)
   ============================================================================ */
.upcoming{display:grid;grid-template-columns:auto auto 1fr auto auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.upcoming:last-child{border-bottom:0}
.upcoming .when{font-family:var(--mono);font-size:12px;color:var(--text-2);width:54px}
.upcoming .dot{width:9px;height:9px;border-radius:3px}
.upcoming .who{font-size:13px;font-weight:500}.upcoming .who small{color:var(--text-3);font-weight:400}
.upcoming .amt{font-family:var(--mono);font-size:13px;font-weight:600;text-align:right}
.req{font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:var(--r-pill);white-space:nowrap}
.req.required{color:var(--amber);background:var(--chip-warn)}
.req.discipline{color:var(--text-2);background:var(--surface-2);border:1px dashed var(--line-2)}
.req.auto{color:var(--pos);background:var(--chip-pos)}

/* ============================================================================
   ENTRANCE ANIMATION  (gate decorative motion on reduced-motion)
   ============================================================================ */
@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0;transform:translateY(12px);animation:rise .6s cubic-bezier(.2,.7,.2,1) forwards}
  @keyframes rise{to{opacity:1;transform:none}}
  .ub .fill,.cyo .now{transform:scaleX(0);animation:grow 1s cubic-bezier(.2,.7,.2,1) forwards .2s}
  @keyframes grow{to{transform:scaleX(var(--w,1))}}
  .s1{animation-delay:.04s}.s2{animation-delay:.1s}.s3{animation-delay:.18s}.s4{animation-delay:.26s}.s5{animation-delay:.29s}.s6{animation-delay:.36s}.s7{animation-delay:.43s}
}

/* ---- Responsive shell --------------------------------------------------- */
@media(max-width:1100px){
  .app{grid-template-columns:1fr}
  .side{display:none}
  .panes.split{grid-template-columns:1fr}
}