/* ============================================================
   Wallet: a local-first net worth / investment / tax tracker
   Pure CSS, no framework. Premium soft-obsidian dark theme.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* Dark-only app: tell the UA so native controls - including the native <select>
     option-list popup - render their chrome/border dark instead of a bright light-mode
     outline. Without this the expanded dropdown gets a high-contrast white border. */
  color-scheme: dark;
  /* ============================================================
     Wallet refined dark theme - canonical design tokens.
     One typeface, one accent, layered cool-charcoal surfaces,
     a cohesive oklch data palette, opaque icon greys.
     ============================================================ */

  /* ---- Surfaces: deep cool charcoal, clear elevation steps ---- */
  --canvas:    #0a0c11;   /* app background */
  --surface:   #13161e;   /* primary cards */
  --surface-2: #191d27;   /* nested cells, inputs */
  --surface-3: #222734;   /* hover / active wash */

  /* ---- Hairlines ---- */
  --line:   rgba(255, 255, 255, 0.055);
  --line-2: rgba(255, 255, 255, 0.10);

  /* ---- Text ramp ---- */
  --text:   #eef0f4;                       /* primary */
  --text-2: rgba(238, 240, 244, 0.62);     /* secondary */
  --text-3: rgba(238, 240, 244, 0.54);     /* labels / faint */
  /* opaque icon greys - same look as text-2/3 but NO alpha, so overlapping
     strokes inside an icon don't composite into darker construction lines */
  --ico-mid:   #95979e;
  --ico-faint: #64666d;

  /* ---- One accent (interactive, focus) ---- */
  --accent:       #5b8def;
  --accent-press: #4274dd;
  --accent-soft:  rgba(91, 141, 239, 0.14);
  --accent-line:  rgba(91, 141, 239, 0.32);

  /* ---- P/L only (never decoration) ---- */
  --pos:      #4cc38a;
  --pos-soft: rgba(76, 195, 138, 0.13);
  --neg:      #e3796d;
  --neg-soft: rgba(227, 121, 109, 0.13);

  /* ---- Cohesive data palette (charts, tags, badges) - oklch-harmonized ---- */
  --d-blue:   oklch(0.70 0.13 256);
  --d-violet: oklch(0.70 0.13 300);
  --d-teal:   oklch(0.74 0.10 200);
  --d-cash:   oklch(0.72 0.14 248);   /* "Cash" bucket - azure (keep in sync with BUCKET_COLOR.Cash in app.js) */
  --d-green:  oklch(0.74 0.12 155);
  --d-amber:  oklch(0.78 0.10 75);
  --d-rose:   oklch(0.72 0.12 10);

  /* ---- Geometry ---- */
  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 9px;
  --r-pill: 999px;
  --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 28px rgba(0,0,0,0.30);

  --font: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;

  /* ============================================================
     Compatibility aliases - existing class rules reference these
     legacy names; they now resolve onto the canonical tokens above
     so the whole app recolors at once. New work should use the
     canonical tokens directly.
     ============================================================ */
  --canvas-bg: var(--canvas);
  --card-bg:   var(--surface);
  --cell-bg:   var(--surface-2);
  --bg:        var(--canvas);
  --bg-2:      var(--surface);
  --bg-3:      var(--surface-2);
  --panel:     var(--surface);
  --panel-2:   var(--surface-2);

  --accent-primary: var(--accent);
  --accent-2:       var(--accent-press);
  --accent-rgb:     91, 141, 239;

  --white:      var(--text);
  --text-main:  var(--text);
  --text-dim:   var(--text-2);
  --text-muted: var(--text-3);
  --text-faint: var(--text-3);

  --border-subtle: var(--line);
  --border:        var(--line);
  --border-2:      var(--line-2);

  --green:    var(--pos);
  --green-bg: var(--pos-soft);
  --red:      var(--neg);
  --red-bg:   var(--neg-soft);
  --yellow:   var(--d-amber);
  --purple:   var(--d-violet);
  --cyan:     var(--d-teal);

  --radius:      var(--r-md);
  --radius-main: var(--r-md);
  --radius-sm:   var(--r-sm);
  --pad-tight:   12px;
  --pad-normal:  18px;
}

* { box-sizing: border-box; }

html { overflow-y: scroll; scrollbar-gutter: stable; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* primary numerical indicators, balances and headers: crisp, with stable digit tracking */
.nw-value, .stat .value, .calc-cell .cv, .bk-card .bk-rate,
.num, .alloc-val, .donut .center .v, .side-networth .nw-value,
td.num, th.num, .kpi-val, h1, h2, h3 {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
/* auxiliary / descriptive copy: lighter weight, unified soft-white token */
.hint, .stat .label, .stat .sub, .head-label, .badge-curr,
.modal .modal-sub, .tut-body {
  color: var(--text-dim);
  font-weight: 400;
}

a { color: var(--accent); text-decoration: none; }
button { font-family: inherit; }

/* ---------- Layout ---------- */
/* Desktop-only floor: below ~1024px the fixed sidebar + content panels would squeeze and break, so we hold
   the layout at its tested-clean desktop width and let the page scroll horizontally instead. (A responsive
   mobile layout - collapsing the sidebar into a top/bottom nav - can be added later; this just guards the
   narrow state in the meantime.) */
#app { display: flex; min-height: 100vh; min-width: 1024px; }

.sidebar {
  width: 248px;
  flex-shrink: 0;
  background: var(--canvas);
  border-right: 1px solid var(--line);
  padding: 22px 16px 18px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand { display: flex; align-items: center; gap: 11px; padding: 2px 6px 20px; }
.brand .mark {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.brand .mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand .mark .ico { width: 19px; height: 19px; color: #fff; }
.brand .name {
  flex: 1; min-width: 0; background: none; border: none; color: inherit;
  font: inherit; font-size: 16px; font-weight: 700; letter-spacing: -0.02em;
  text-align: left; cursor: pointer; padding: 0; display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.brand .name .sub { display: block; font-size: 11px; font-weight: 500; color: var(--text-3); letter-spacing: 0.01em; }
.brand .name:hover { color: var(--text); }

.side-period {
  display: flex; flex-direction: column; gap: 8px;
  padding: 2px 8px 8px; margin-bottom: 2px;
}
.side-row { display: flex; align-items: center; gap: 8px; }
.side-row .head-label { flex: 0 0 42px; }
.side-row select { flex: 1; min-width: 0; padding: 7px 9px; font-size: 13px; }
/* frozen month select: soft matte cell, muted (no loud red) */
/* Frozen month: use background-COLOR (not the `background` shorthand) so the custom chevron
   background-image is never wiped - the drop arrow stays visible on every view. Text renders 5% darker. */
.side-row select.frozen-sel { background-color: var(--cell-bg); border-color: var(--border-2); color: color-mix(in oklch, var(--text-dim) 95%, #000); }
.hidden-soft { visibility: hidden; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  cursor: pointer;
  font-weight: 500;
  border: none; background: none; width: 100%; text-align: left;
  font-size: 14px;
  transition: background 0.13s, color 0.13s;
}
.nav-item .ico { width: 19px; height: 19px; flex-shrink: 0; color: var(--ico-faint); transition: color 0.13s; }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item:hover .ico { color: var(--ico-mid); }
.nav-item.active { background: var(--accent-soft); color: var(--text); font-weight: 600; }
.nav-item.active .ico { color: var(--accent); }
.nav-sep { height: 1px; background: var(--line); margin: 12px 6px; }

.side-action {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 9px 11px; margin: 0; white-space: nowrap;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text);
  font-weight: 600; font-size: 13px; cursor: pointer;
  transition: background 0.13s, border-color 0.13s;
}
.side-action:hover { background: var(--surface-3); }
.side-action .ico { width: 16px; height: 16px; flex-shrink: 0; color: var(--ico-mid); }

.side-networth {
  padding: 4px 8px 16px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.side-networth .nw-label {
  display: block; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3);
  margin-bottom: 2px;
}
.side-networth .nw-value {
  font-size: 25px; font-weight: 700; color: var(--text); letter-spacing: -0.03em;
}
.side-networth .chg { font-size: 12.5px; font-weight: 600; margin-top: 4px; display: flex; align-items: center; gap: 5px; }
.side-networth .chg .ico { width: 13px; height: 13px; }
.side-networth .chg.up { color: var(--pos); }
.side-networth .chg.down { color: var(--neg); }

.main { flex: 1; min-width: 0; padding: 28px 40px 60px; max-width: 2000px; margin: 0 auto; width: 100%; }

.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 26px; gap: 18px; flex-wrap: wrap;
}
.page-head h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.025em; display: inline-flex; align-items: center; gap: 11px; flex-wrap: wrap; }
/* Status badge: a split pill - a neutral period segment + a colored status segment. */
.title-badge {
  display: inline-flex; align-items: stretch; vertical-align: middle;
  border-radius: var(--r-pill); overflow: hidden; border: 1px solid var(--line-2);
  font-size: 12.1px; font-weight: 600; letter-spacing: 0.01em; line-height: 1;
}
.title-badge .tb-date {
  display: inline-flex; align-items: center; padding: 3.3px 11px;
  background: var(--surface-2); color: var(--text-2);
}
.title-badge .tb-status {
  display: inline-flex; align-items: center; gap: 5px; padding: 3.3px 11px;
  background: var(--surface-3); color: var(--text-2);
}
.title-badge .tb-status .ico-svg, .title-badge .tb-status .ico { width: 12px; height: 12px; color: var(--ico-mid); }
/* live: green status segment with a leading status dot */
.title-badge.live .tb-status { background: var(--pos-soft); color: var(--pos); }
.title-badge.live .tb-status::before { content: ""; width: 6.6px; height: 6.6px; border-radius: 50%; background: var(--pos); flex: 0 0 auto; }
/* frozen: muted status segment (carries the lock glyph from markup) */
.title-badge.frozen .tb-status { background: var(--surface-3); color: var(--text-2); }
/* single-segment neutral pill (period only, no status word) */
.title-badge .tb-date:only-child { background: var(--surface-2); color: var(--text-2); }
.page-head .sub { color: var(--text-dim); margin-top: 4px; font-size: 13px; }
.head-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.head-label { align-self: center; color: var(--text-dim); font-weight: 600; font-size: 13.5px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 9px 15px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--surface-2);
  color: var(--text); cursor: pointer; font-weight: 600; font-size: 13px;
  transition: background 0.13s, border-color 0.13s;
}
.btn .ico { width: 15px; height: 15px; color: var(--ico-mid); }
.btn:hover { background: var(--surface-3); border-color: var(--line-2); }
.btn.primary { background: color-mix(in oklch, var(--accent) 75%, transparent); border-color: var(--accent); color: #fff; }
.btn.primary .ico { color: #fff; }
.btn.primary:hover { background: var(--accent-press); border-color: var(--accent-press); }
.btn.accent-soft { background: var(--accent-soft); border-color: var(--accent-line); color: var(--text); }
.btn.accent-soft .ico { color: var(--accent); }
.btn.accent-soft:hover { background: rgba(91, 141, 239, 0.22); }
.btn.danger { color: var(--neg); border-color: color-mix(in oklch, var(--neg) 35%, transparent); }
.btn.danger .ico { color: var(--neg); }
.btn.danger:hover { background: var(--neg-soft); }
.btn.ghost { background: none; border-color: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.btn.sm { padding: 6px 11px; font-size: 12px; }
.btn .bico { font-size: 16px; line-height: 1; display: inline-flex; align-items: center; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Cards / panels ---------- */
.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px 22px;
}
.panel h2 { margin: 0 0 4px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
/* secondary / hint typography: one shared definition across panels, modals and help boxes */
.hint, .modal .modal-sub, .help-box {
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 12px;
  line-height: 1.5;
}
.panel .hint { margin: 0 0 16px; }

.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1200px) { .grid.cols-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1000px) { .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .grid.cols-2, .grid.cols-3, .grid.cols-4, .grid.cols-5 { grid-template-columns: 1fr; } }

/* Expenses / Income: a single grid governs both rows so the summary/breakdown column (left, spanning
   Total+Avg) and the Add desk + table column (right) share identical track lines and gaps - clean
   vertical + horizontal alignment, no asymmetric gutters. */
.ledger-grid { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 16px; align-items: start; }
.ledger-grid > .lg-left { grid-column: 1 / 3; min-width: 0; }
.ledger-grid > .lg-right { grid-column: 3 / 4; min-width: 0; }
.ledger-grid > .lg-left > .panel, .ledger-grid > .stat { margin-bottom: 0; }
@media (max-width: 1000px) { .ledger-grid { grid-template-columns: 1fr 1fr; } .ledger-grid > .lg-left, .ledger-grid > .lg-right { grid-column: 1 / 3; } }
@media (max-width: 680px) { .ledger-grid { grid-template-columns: 1fr; } .ledger-grid > .lg-left, .ledger-grid > .lg-right { grid-column: auto; } }

/* ---------- Stat cards ---------- */
/* compact, snug stat cards: tighter padding, data scaled up to fill the frame */
.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 16px 18px;
}
.stat .label { color: var(--text-3); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
/* hero tiles (Net Worth Gross / after-tax) read in a brighter label */
.stat.tint-blue .label { color: rgba(238, 240, 244, 0.78); }
.stat .value { font-size: 25px; font-weight: 700; margin-top: 9px; letter-spacing: -0.03em; }
.stat .value.sm { font-size: 21px; }
.stat .delta { font-size: 12.5px; margin-top: 5px; font-weight: 600; }
.stat .sub { color: var(--text-2); font-size: 12px; margin-top: 6px; font-weight: 400; }
/* tax summary row: nudge inner content down a touch for breathing room */
.tax-summary .stat { padding-top: 18px; padding-bottom: 16px; }
.up { color: var(--green); }
.down { color: var(--red); }
.pill-up { background: var(--green-bg); color: var(--green); padding: 2px 7px; border-radius: 20px; font-size: 12px; white-space: nowrap; font-weight: 600; }
.pill-down { background: var(--red-bg); color: var(--red); padding: 2px 7px; border-radius: 20px; font-size: 12px; white-space: nowrap; font-weight: 600; }

/* hero tiles get the subtle accent gradient (feature look); P/L tiles tint pos/neg */
.stat.tint-blue  { background: linear-gradient(160deg, rgba(91, 141, 239, 0.10), rgba(91, 141, 239, 0.03)); border-color: var(--accent-line); }
.stat.tint-red   { background: var(--neg-soft); border-color: color-mix(in oklch, var(--neg) 32%, transparent); }
.stat.tint-green { background: var(--pos-soft); border-color: color-mix(in oklch, var(--pos) 30%, transparent); }
.stat.tint-blue  .value { color: var(--text); }
.stat.tint-red   .value { color: var(--neg); }
.stat.tint-green .value { color: var(--pos); }
/* primary-blue value text (synced with the .calc-cell.total totals on the Tax page) */
.stat .value.accent { color: var(--accent); }

/* KPI strip (What Changed) - reference parity: one connected strip, hairline dividers */
/* Elastic auto-fit tracks: KPIs reflow to fewer columns as the (now half-width) card narrows or the
   user zooms in, so values never overflow the card. */
.kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)); gap: 1px; background: var(--line); border-radius: var(--r-md); overflow: hidden; }
.kpi { background: var(--surface); padding: 15px 20px; min-width: 0; }
.kpi .kpi-lbl { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .kpi-val { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; margin-top: 7px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* Selectable KPI slot: a faint corner caret reveals a native dropdown (transparent select overlay) to swap the metric. */
.kpi.has-pick { position: relative; }
.kpi.has-pick .kpi-lbl { padding-right: 22px; }
.kpi-caret { position: absolute; top: 12px; right: 11px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--text-3); border-radius: 5px; pointer-events: none; opacity: 0.45; transition: opacity 0.12s ease, color 0.12s ease, background 0.12s ease; }
.kpi.has-pick:hover .kpi-caret { opacity: 1; color: var(--text); background: var(--surface-3); }
/* Invisible select host (the caret is the visible affordance) - but NOT appearance:none, so it keeps the
   app's global select styling and the dark base-select popup instead of the browser's native white menu. */
.kpi-pick { position: absolute; top: 7px; right: 6px; width: 30px; height: 30px; margin: 0; padding: 0; border: 0; cursor: pointer; z-index: 2; background: transparent; color: transparent; background-image: none; }
.kpi-pick:focus-visible + .kpi-caret { opacity: 1; color: var(--text); background: var(--surface-3); box-shadow: 0 0 0 2px var(--accent); }

/* Settings -> Colors: per-entity swatch picker */
.color-row { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.color-row:last-child { border-bottom: none; padding-bottom: 0; }
.color-name { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; min-width: 150px; }
.color-dot { width: 13px; height: 13px; border-radius: 4px; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.color-swatches { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.swatch { width: 20px; height: 20px; border-radius: 5px; border: 0; padding: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10); transition: transform 0.1s ease, box-shadow 0.1s ease; }
.swatch:hover { transform: scale(1.12); }
.swatch.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
.swatch-auto { height: 20px; padding: 0 9px; border-radius: 5px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text-2); font-size: 11px; font-weight: 600; cursor: pointer; transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease; }
.swatch-auto:hover { background: var(--surface-3); color: var(--text); }
.swatch-auto.on { border-color: var(--text-2); color: var(--text); }

/* History: category trend chart beside a ranked "totals for the year" list */
.cat-split { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.cat-chart { flex: 1 1 440px; min-width: 0; }
.cat-aside { flex: 0 1 250px; min-width: 200px; display: flex; flex-direction: column; }
.cat-total-row { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; min-width: 0; }
.cat-total-row:last-of-type { border-bottom: none; }
.cat-total-row .dot { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }
.ctr-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.ctr-val { font-variant-numeric: tabular-nums; font-weight: 600; }
.ctr-pct { width: 46px; text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; font-size: 12px; }
.cat-total-foot { display: flex; align-items: center; gap: 9px; padding: 9px 0 0; margin-top: 4px; border-top: 1px solid var(--line-2); font-weight: 700; font-size: 13px; }
.cat-total-foot .ctr-name { color: var(--text); }

/* History: category panel with switchable views (Donut / Treemap / Bar / List) */
.cat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 4px; flex-wrap: wrap; }
.cat-head h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
/* Donut + compact legend (6 rows visible, then scroll) */
/* Bars - horizontal ranked bar per category (single tone) */
.cat-hb { display: flex; flex-direction: column; gap: 11px; max-height: 240px; overflow-y: auto; padding-right: 4px; }
.cat-hb-row { display: grid; grid-template-columns: 132px 1fr auto 46px; align-items: center; gap: 12px; font-size: 13px; }
.cat-hb-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-hb-track { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.cat-hb-fill { display: block; height: 100%; border-radius: 999px; }
.cat-hb-val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.cat-hb-pc { text-align: right; color: var(--text-2); font-size: 12px; font-variant-numeric: tabular-nums; }
/* Intensity - relative-size fill bar per row, fill colour graded by share */
.cat-int { display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow-y: auto; padding-right: 4px; }
.cat-int-row { position: relative; display: grid; grid-template-columns: 1fr auto 52px; align-items: center; gap: 10px; min-height: 34px; padding: 0 12px; border-radius: 8px; overflow: hidden; font-size: 13px; }
.cat-int-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; z-index: 0; }
.cat-int-row > :not(.cat-int-fill) { position: relative; z-index: 1; }
.cat-int-row .nm { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-int-row .vl { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.cat-int-row .pc { text-align: right; color: var(--text-2); font-size: 12px; font-variant-numeric: tabular-nums; }
/* Legend - two-column list with hue-graded squares */
.cat-lg { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; gap: 0 28px; }
.cat-lg-row { display: grid; grid-template-columns: 12px 1fr auto 52px; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.cat-lg-dot { width: 12px; height: 12px; border-radius: 3px; }
.cat-lg-row .nm { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-lg-row .vl { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.cat-lg-row .pc { text-align: right; color: var(--text-2); font-size: 12px; font-variant-numeric: tabular-nums; }
/* Treemap - single-hue tiles, opacity graded by share */
.cat-tm { position: relative; width: 100%; height: 280px; }
.cat-tm-tile { position: absolute; border-radius: 7px; padding: 9px 11px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid var(--line); }
.cat-tm-tile .tn { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-tm-tile .tv { font-size: 12px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
/* Lollipop - baseline + stem + knob per category (single tone) */
.cat-lp { display: flex; flex-direction: column; gap: 2px; max-height: 230px; overflow-y: auto; padding-right: 4px; }
.cat-lp-row { display: grid; grid-template-columns: 132px 1fr auto 46px; align-items: center; gap: 12px; min-height: 32px; font-size: 13px; }
.cat-lp-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-lp-track { position: relative; height: 18px; }
.cat-lp-base { position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); background: var(--surface-3); border-radius: 2px; }
.cat-lp-stem { position: absolute; left: 0; top: 50%; height: 3px; transform: translateY(-50%); border-radius: 2px; }
.cat-lp-knob { position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%; transform: translate(-50%, -50%); }
.cat-lp-val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Quiet bar list - thin rows, ~6 visible then scroll */
.cat-ql { display: flex; flex-direction: column; gap: 2px; max-height: 206px; overflow-y: auto; }
.cat-ql-row { position: relative; display: grid; grid-template-columns: 1fr auto 50px; align-items: center; gap: 10px; min-height: 32px; padding: 0 11px; border-radius: 8px; overflow: hidden; font-size: 13px; }
.cat-ql-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; z-index: 0; background: var(--surface-3); }
.cat-ql-row > :not(.cat-ql-fill) { position: relative; z-index: 1; }
.cat-ql-dot { width: 9px; height: 9px; border-radius: 3px; }
.cat-ql-row .nm { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-ql-row .vl { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.cat-ql-row .pc { text-align: right; color: var(--text-2); font-size: 12px; font-variant-numeric: tabular-nums; }

/* Allocation legend (dashboard) - borderless 2-col, no bars */
.legend { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; }
/* Container-elastic: auto-fit collapses the legend from two columns to one when the card narrows or
   the user zooms, keeping rows inside the card; long bucket names clamp with an ellipsis. */
.legend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); column-gap: 28px; row-gap: 0; }
.legend-row { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.legend-row:last-child { border-bottom: none; }
.tax-legend .legend-row { border-bottom: none; }
.legend-row .dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; margin-top: 5px; }
.legend-row .lg-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; white-space: normal; overflow-wrap: anywhere; }
.legend-row .lg-val { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.legend-row .lg-pct { width: 48px; text-align: right; font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* Dashboard Allocation legend - two-line rows (Option C): name on top, amount + % directly beneath,
   in a 2-column grid. Keeps the amount/percentage tight under each label; names get a full column so
   they no longer clip. */
.alloc-legend { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); column-gap: 26px; row-gap: 0; }
.alloc-row { display: flex; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.alloc-row .dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; margin-top: 4px; }
.alloc-txt { min-width: 0; }
.alloc-name { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alloc-meta { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; margin-top: 2px; }
.alloc-meta b { color: var(--text); font-weight: 600; }

/* tax page top: compact Brackets column beside a priority-width Invoices column.
   Rigid min/max tracks keep the split stable across zoom levels and monitor sizes. */
.tax-top {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) { .tax-top { grid-template-columns: 1fr; } }

/* tax brackets as small square cards */
.bk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bk-card {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 12px 10px; text-align: center; height: 104px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.bk-card { transition: transform 0.13s ease, border-color 0.13s ease, box-shadow 0.13s ease; }
/* Every bracket box is a fixed, identical size regardless of its range text. Only the active "YOU"
   bracket scales up slightly; the scroll container's padding gives it room so it never clips the card. */
.bk-card.active { border-color: var(--accent); background: var(--accent-soft); position: relative; z-index: 1; box-shadow: inset 0 0 0 1px var(--accent); transform: scale(1.07); }
.bk-card .bk-rate { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.bk-card.active .bk-rate { color: var(--accent); }
.bk-card .bk-range { font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.bk-card .bk-you { font-size: 10.5px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.04em; }

/* tax calculation: 5-column grid. Each cell is a 2-row subgrid (label row + value row) sharing the
   strip's row tracks, so every label in a row takes the tallest label's height and the values always
   line up - at any width, no matter how many lines a label wraps to. */
.calc-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; align-items: start; }
/* nested depth, gentle step-down (not overly dark): Calculation panel = base #12141a;
   Incomes / Taxes wells = 5% darker (#111319); inner cells = a further 5% darker (#101218). */
.calc-group {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 16px; margin-bottom: 14px;
}
.calc-group-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-dim); margin: 0 0 11px;
}
/* Settlement well now matches Incomes / Taxes (titled, same surface + border); no special treatment. */
/* dark surface cards: darker than their group well (which is darker than the panel) */
.calc-cell {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 12px 15px; min-width: 0;
  display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 6px;
}
.calc-cell .cl { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; line-height: 1.32; }
.calc-cell .cv { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; align-self: end; }
.calc-cell.total { background: var(--accent-soft); border-color: var(--accent-line); }
.calc-cell.total .cv { color: var(--accent); }
.calc-cell.up .cv { color: var(--green); }
.calc-cell.down .cv { color: var(--red); }
.calc-cell.rpl .cv { color: var(--white); }

/* brief highlight when jumped to from the Add Holding "how to" link */
@keyframes help-flash {
  0% { box-shadow: 0 0 0 2px var(--accent); }
  100% { box-shadow: 0 0 0 2px rgba(var(--accent-rgb),0); }
}
.help-box.flash, .panel.flash { animation: help-flash 1.6s ease-out 1; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  background: var(--surface); text-align: left; padding: 12px 16px;
  color: var(--text-3); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
/* Tables whose header row (and the invoices total footer) take the deeper surface-2, to match the
   Settings category sub-cards: Tax Invoices, Currencies & FX, History Monthly Detail. */
.tax-invoices-card thead th, .tax-invoices-card tfoot td,
.fx-table thead th,
.month-detail thead th { background: var(--surface-2); }
tbody td { padding: 13px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; }
td.num.cost { color: var(--red); }
.act-col, td.act-col { width: 240px; min-width: 240px; }
/* investments action cluster: lock + Buy / Sell / refresh SVG / X glyph onto one
   pixel-perfect horizontal centre line, sat ~25px to the right of the Realized column */
.row-actions { display: flex; align-items: center; justify-content: flex-start; gap: 4px; }
/* tighten the actions cell's left padding so the buttons sit ~25px from the Realized values */
.inv-table tbody td:last-child { padding-left: 6px; }
.row-actions .btn { display: inline-flex; align-items: center; }

/* Investments table: rigid columns so widths never shift between month selections.
   table-layout:fixed makes column widths depend on the colgroup, not the cell text.
   A min-width keeps them locked; .table-wrap scrolls horizontally on narrow viewports. */
.inv-table { table-layout: fixed; min-width: 1300px; }
/* Dense 13-column table: tighter side padding + let multi-word headers wrap (the base thead th is nowrap),
   so e.g. "Monthly Change %" stacks instead of overflowing into the next column. */
.inv-table thead th, .inv-table tbody td { padding-left: 10px; padding-right: 10px; }
/* Titles all share ONE vertical anchor (middle) so none sits higher than the rest, regardless of
   how many lines a label wraps to. Titles are centered horizontally; the Holding column's DATA stays
   left-aligned (not centered). Uniform 12px titles. */
.inv-table thead th { text-align: center; font-size: 12px; vertical-align: middle; }
.inv-table tbody td, .inv-table tfoot td { text-align: center; }
.inv-table tbody td:first-child, .inv-table tfoot td:first-child { text-align: left; }
.inv-table thead th:not(:first-child) { white-space: normal; line-height: 1.2; vertical-align: middle; }
/* Holding column never wraps or breaks the row. A muted-grey ticker sits to the left of the name;
   the name is visible by default and a JS fit pass (fitInvestmentNames) collapses the cell to a
   compact ticker-only view when [ticker + name] would overflow, so row height stays fixed. */
.inv-table th:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-table td:first-child { white-space: nowrap; overflow: hidden; vertical-align: middle; }
.inv-table td:first-child .hold-inner { display: flex; align-items: baseline; max-width: 100%; overflow: hidden; }
.inv-table .inv-tkr { color: var(--text-3); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; margin-right: 7px; flex: none; }
.inv-table .inv-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-table .inv-tkr[data-act] { cursor: pointer; }
.inv-table .inv-tkr[data-act]:hover { color: var(--text-2); }
/* Percentage tracks rebalance fluidly within the min-width; the data columns (Holding, prices
   and P/L figures) get more room, the terser Type / Shares / Return % columns get less. */
.inv-table .c-name { width: 10.04%; }  /* ~130px @1300 - ticker + name; the name ellipsizes */
.inv-table .c-type { width: 5.41%; }   /* ~70px - the type tag ("Crypto"/"Stock") */
.inv-table .c-px   { width: 7.72%; }   /* ~100px - "€164.62 EUR" value + currency badge */
.inv-table .c-prev { width: 7.34%; }   /* ~95px - "€163.11" */
.inv-table .c-chg  { width: 6.18%; }   /* ~80px - "+0.9%"; header wraps to 2 lines */
.inv-table .c-sh   { width: 5.41%; }   /* ~70px - "352" */
.inv-table .c-avg  { width: 6.56%; }   /* ~85px - "€120.50" */
.inv-table .c-cost { width: 7.72%; }   /* ~100px - totals "€42,400" */
.inv-table .c-val  { width: 7.72%; }   /* ~100px */
.inv-table .c-unr  { width: 7.72%; }   /* ~100px - "+€5,600" with sign */
.inv-table .c-ret  { width: 6.18%; }   /* ~80px - "+13.2%" */
.inv-table .c-real { width: 6.95%; }   /* ~90px */
.inv-table .c-act  { width: 15.05%; }  /* ~195px - tightened so the buttons sit closer to Realized */
tfoot td { padding: 13px 16px; font-weight: 700; border-top: 1px solid var(--line-2); background: var(--surface); }
.muted { color: var(--text-3); }
.tag { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; letter-spacing: 0.01em; background: var(--surface-2); color: var(--text-2); }
.tag.stock,  .tag.t-stock   { background: color-mix(in oklch, var(--d-blue) 18%, transparent); color: var(--d-blue); }
.tag.etf,    .tag.t-etf     { background: color-mix(in oklch, var(--d-violet) 18%, transparent); color: var(--d-violet); }
.tag.crypto, .tag.t-crypto  { background: color-mix(in oklch, var(--d-amber) 18%, transparent); color: var(--d-amber); }
.tag.cash,   .tag.t-cash    { background: color-mix(in oklch, var(--d-cash) 18%, transparent); color: var(--d-cash); }
.tag.savings,.tag.t-savings { background: color-mix(in oklch, var(--d-green) 18%, transparent); color: var(--d-green); }
.tag.pension,.tag.t-pension { background: color-mix(in oklch, var(--d-violet) 18%, transparent); color: var(--d-violet); }
.tag.other,  .tag.t-other   { background: color-mix(in oklch, var(--d-blue) 18%, transparent); color: var(--d-blue); }

/* entity identity cell: tinted square badge whose color matches the row's type */
.acct { display: flex; align-items: center; gap: 12px; }
.acct .avatar {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; letter-spacing: -0.02em;
}
.acct .nm { font-weight: 600; font-size: 13.5px; }
.acct .mt { font-size: 11.5px; color: var(--text-3); font-family: var(--mono); margin-top: 1px; }

/* ---------- Forms ---------- */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12.5px; color: var(--text-dim); margin-bottom: 6px; font-weight: 600; }
input, select, textarea {
  width: 100%; padding: 9px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text);
  font-size: 13.5px; font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* Dropdowns: no bright/white ring when clicked, focused or expanded - a subtle accent-line
   border (and a flat outline reset for :focus-visible) keeps the dark theme seamless. */
select:focus, select:focus-visible, select:active {
  outline: none; border-color: var(--accent-line); box-shadow: none;
}
/* inline checkbox + label row (e.g. Include in Net Worth Calculations) */
.check-row { display: flex; flex-direction: row; align-items: center; gap: 9px; cursor: pointer; color: var(--text); font-weight: 600; }
.check-row input[type="checkbox"] { width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--accent); cursor: pointer; }
.row { display: flex; gap: 12px; align-items: flex-end; }
.row > * { flex: 1; }
/* keep input labels from pushing inputs to different heights */
.field label { min-height: 16px; }
.inline-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.inline-form .field { margin-bottom: 0; }

/* ---------- Modal ---------- */
.modal-bg {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center; z-index: 100;
  padding: 20px;
}
.modal {
  background: var(--panel); border: 1px solid var(--border-2);
  border-radius: var(--radius); padding: 24px; width: 100%; max-width: 460px;
  box-shadow: var(--shadow); max-height: 90vh; overflow-y: auto;
}
.modal.wide { max-width: 640px; }
.modal.pro-modal { max-width: 440px; }
/* Bare modal: no default chrome/padding - the body provides its own layout (Pro upgrade). */
.modal.m-bare { padding: 0; overflow: hidden; position: relative; }
/* first-run welcome dialog: larger, more premium presence with proportionally scaled type */
.modal.welcome-modal { max-width: 560px; padding: 34px 38px; }
.modal.welcome-modal h3 { font-size: 26px; margin-bottom: 6px; }
.modal.welcome-modal .modal-sub { font-size: 14px; line-height: 1.45; margin-bottom: 16px; }
.modal.welcome-modal .help-box { font-size: 13px; line-height: 1.5; padding: 13px 15px; }
.modal.welcome-modal label { font-size: 14px; }
.modal.welcome-modal input, .modal.welcome-modal select, .modal.welcome-modal textarea { font-size: 15.5px; padding: 11px 13px; }
.modal.welcome-modal .modal-foot { margin-top: 26px; }
.modal.welcome-modal .modal-foot .btn { font-size: 15px; padding: 11px 22px; }
.modal h3 { margin: 0 0 4px; font-size: 18px; }
.modal .modal-sub { margin-bottom: 18px; }
.modal-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }

/* Dialog style A - header & footer bands, scrolling body, close ✕ in the header */
.modal.m-banded { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.modal.m-banded .m-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 22px; border-bottom: 1px solid var(--line); background: var(--surface-2); flex: 0 0 auto;
}
.modal.m-banded .m-hd h3 { margin: 0; font-size: 16px; }
.modal.m-banded form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.modal.m-banded .m-bd { padding: 20px 22px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.modal.m-banded .modal-foot {
  margin: 0; padding: 14px 22px; border-top: 1px solid var(--line); background: var(--surface-2); flex: 0 0 auto;
}
.m-x {
  width: 28px; height: 28px; border-radius: var(--r-sm); flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--ico-mid); cursor: pointer;
  transition: background 0.13s, color 0.13s;
}
.m-x:hover { background: var(--surface-3); color: var(--text); }
.m-x .ico-svg, .m-x .ico { width: 15px; height: 15px; }

/* ---------- Allocation / bars ---------- */
.alloc-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.alloc-dot { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.alloc-label { width: 120px; flex-shrink: 0; font-size: 13px; }
.alloc-bar { flex: 1; height: 9px; background: var(--bg-3); border-radius: 20px; overflow: hidden; }
.alloc-bar > div { height: 100%; border-radius: 20px; }

/* Compact "minimal line" page header (Option B) - Accounts / Assets / Debts / Goals */
.mhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; padding: 2px 2px 16px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.mhead-lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); margin-bottom: 5px; }
.mhead-val { font-size: 32px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.05; }
.mhead-r { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mhead .legend-inline { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.mhead .legend-inline .li, .mhead .legend-inline .li2 { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-2); }
.mhead .legend-inline .li .d { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }
.mhead .legend-inline .v { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Header D (bar header) + data-bar rows (Accounts / Assets / Debts) */
.bhead { position: relative; padding: 2px 2px 18px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.bhead-extra { position: absolute; top: 0; right: 2px; }
.bhead .mhead-lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); }
.bhead-val { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.05; margin-top: 4px; }
.bhead .stack-bar { margin: 14px 0 11px; }
.bhead .legend-inline { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.bhead .legend-inline .li { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); }
.bhead .legend-inline .li .d { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }
.bhead .legend-inline .v { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.dblist { margin-top: 2px; }
.dbar { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r-sm); overflow: hidden; margin-bottom: 5px; background: var(--surface); border: 1px solid var(--line); }
.dbar-fill { position: absolute; inset: 0; opacity: 0.12; pointer-events: none; }
.dbar-dot { position: relative; width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.dbar-main { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dbar-nm { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbar-meta { font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbar-right { position: relative; margin-left: auto; text-align: right; flex: 0 0 auto; }
.dbar-v { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dbar-pc { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; margin-top: 2px; }
.dbar-act { position: relative; white-space: nowrap; flex: 0 0 auto; }

/* Debts: card with stat grid (Option 3) */
.dcards { margin-top: 2px; }
.dcard { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0; margin-bottom: 8px; overflow: hidden; }
.dcard-fill { position: absolute; inset: 0; opacity: 0.12; pointer-events: none; }
.dcard-top { position: relative; display: flex; align-items: center; gap: 11px; padding: 15px 18px; flex-wrap: wrap; }
.dcard-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.dcard-nm { font-size: 15px; font-weight: 600; }
.dcard-bal { margin-left: auto; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dcard-act { flex: 0 0 auto; white-space: nowrap; }
.dcard-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 14px 18px; background: rgba(0, 0, 0, 0.23); border-top: 1px solid var(--line); }
@media (max-width: 640px) { .dcard-grid { grid-template-columns: repeat(2, 1fr); } }
.dcard .dc-k { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-3); }
.dcard .dc-v { font-size: 14px; font-weight: 600; margin-top: 3px; font-variant-numeric: tabular-nums; }

/* Grouped proportion list (Accounts / Assets / Debts): category dividers + per-row share bars */
.gplist { margin-top: 2px; }
.gplist .grp { margin-bottom: 4px; }
.gplist .grp-head { display: flex; align-items: center; gap: 11px; padding: 18px 4px 9px; border-bottom: 1px solid var(--line-2); }
.gplist .grp-head .gdot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.gplist .grp-head .gname { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.gplist .grp-head .gcount { color: var(--text-3); font-size: 12px; font-weight: 500; }
.gplist .grp-head .gsum { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.gplist .prow { display: grid; grid-template-columns: minmax(170px, 1.4fr) 1fr 118px auto; align-items: center; gap: 18px; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.gplist .prow:last-child { border-bottom: none; }
.gplist .who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.gplist .mk { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.gplist .who-t { min-width: 0; }
.gplist .nm { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gplist .prow .sub { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }
.gplist .track { height: 8px; border-radius: 20px; background: var(--bg-3); overflow: hidden; }
.gplist .track > span { display: block; height: 100%; border-radius: 20px; }
.gplist .amt { text-align: right; }
.gplist .amt .b { font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gplist .amt .p { font-size: 11px; color: var(--text-3); margin-top: 1px; }
.gplist .act { text-align: right; white-space: nowrap; }
@media (max-width: 820px) { .gplist .prow { grid-template-columns: 1fr auto auto; } .gplist .track { display: none; } }

.alloc-pct { width: 52px; text-align: right; color: var(--text-dim); font-size: 12.5px; }

/* donut */
.donut-wrap { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.donut { position: relative; width: 180px; height: 180px; flex-shrink: 0; }
.donut.lg { width: 220px; height: 220px; }
.donut .center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.donut .center .t { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
.donut .center .v { font-size: 20px; font-weight: 700; margin-top: 2px; }

/* sparkline / chart */
.chart { width: 100%; }
.chart-empty { color: var(--text-faint); text-align: center; padding: 40px; font-size: 13px; }
.hero-side .chart-empty { text-align: left; padding: 6px 2px 0; }

/* ---------- Misc ---------- */
/* empty-state blueprint: centred, airy, a light geometric emblem over muted copy */
.empty {
  text-align: center; padding: 54px 20px; color: var(--text-muted);
  border: 1px dashed var(--border-2); border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.empty .big { font-size: 34px; margin-bottom: 6px; opacity: 0.6; }
.empty .emblem { color: var(--text-muted); opacity: 0.55; margin-bottom: 6px; }
.empty .emblem svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.5px; }
.empty .empty-cta {
  margin-top: 12px; background: none; border: none; color: var(--accent);
  font-weight: 600; font-size: 13.5px; cursor: pointer; font-family: inherit;
}
.empty .empty-cta:hover { text-decoration: underline; }
.section-title { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); font-weight: 700; margin: 28px 0 14px; }
.flex { display: flex; }
.between { justify-content: space-between; }
.center { align-items: center; }
.gap { gap: 10px; }
.wrap { flex-wrap: wrap; }
.mt { margin-top: 16px; }
.mb { margin-bottom: 16px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.badge-curr { font-family: var(--mono); font-size: 11px; color: var(--text-faint); }
.link-name {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--accent); font-weight: 700; font-size: 13px; font-family: inherit;
}
.link-name:hover { text-decoration: underline; }

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--panel-2); border: 1px solid var(--border-2);
  padding: 12px 20px; border-radius: 30px; box-shadow: var(--shadow);
  z-index: 200; font-size: 13.5px; font-weight: 600;
  animation: toastin 0.2s ease;
}
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 10px); } }
.toast.toast-action { display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 20px; }
.toast-undo {
  display: inline-flex; align-items: center; gap: 5px; font-family: inherit; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--accent-line); border-radius: 20px; padding: 5px 12px;
}
.toast-undo:hover { background: rgba(91, 141, 239, 0.22); }
.toast-undo .ico-svg { width: 13px; height: 13px; }
/* recurring cash flow */
.recur-tag { display: inline-flex; align-items: center; padding: 2px 5px; color: var(--accent); }
.recur-tag .ico-svg { width: 12px; height: 12px; }
.qa-recur .ico-svg, .recur-chip .ico-svg { width: 13px; height: 13px; vertical-align: middle; }

/* Printable tax/net-worth report (Pro) - hidden on screen, only shown while printing */
#print-portal { display: none; }
.report { color: #111; background: #fff; font-family: var(--font); padding: 8px 4px; max-width: 760px; }
.report .rep-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #111; padding-bottom: 12px; margin-bottom: 18px; }
.report .rep-name { font-size: 22px; font-weight: 800; }
.report .rep-sub { font-size: 12.5px; color: #555; margin-top: 3px; }
.report .rep-date { font-size: 12.5px; color: #555; white-space: nowrap; }
.report h3 { font-size: 14px; font-weight: 700; margin: 22px 0 8px; color: #111; }
.report table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 4px; }
.report th, .report td { text-align: left; padding: 6px 4px; border-bottom: 1px solid #ddd; }
.report th { font-weight: 700; color: #333; border-bottom: 1.5px solid #999; }
.report td.r, .report th.r { text-align: right; font-variant-numeric: tabular-nums; }
.report .muted { color: #888; }
.report .rep-foot { margin-top: 24px; padding-top: 10px; border-top: 1px solid #ddd; font-size: 11px; color: #777; }
@media print {
  body.printing > *:not(#print-portal) { display: none !important; }
  body.printing #print-portal { display: block !important; }
  @page { margin: 16mm; }
}

/* wizard */
.wizard-steps { display: flex; gap: 8px; margin-bottom: 24px; }
.wizard-steps .step {
  flex: 1; height: 4px; border-radius: 4px; background: var(--bg-3);
}
.wizard-steps .step.done { background: var(--accent); }
/* category / entity pills: borderless, subtle tint, compact and modern (no social-tag border) */
.chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 500; letter-spacing: 0.01em; color: var(--text);
  margin: 0 8px 8px 0;
}
.chip .chip-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.chip .x {
  cursor: pointer; color: var(--text-faint); font-weight: 700; font-size: 13px; line-height: 1;
  display: inline-flex; align-items: center; transition: color 0.12s;
}
.chip .x:hover { color: var(--red); }

/* delete button that lines up with an input inside a .row (fields carry a 14px bottom margin) */
.bk-del { flex: 0 0 auto; width: 38px; height: 38px; padding: 0; font-size: 14px; margin-bottom: 14px; justify-content: center; gap: 0; }

.backup-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: color-mix(in oklch, var(--d-amber) 18%, transparent); border: 1px solid color-mix(in oklch, var(--d-amber) 32%, transparent);
  color: var(--text); border-radius: var(--r-md); padding: 8px 16px; margin-bottom: 16px; font-size: 13.5px;
}
.backup-banner .btn.primary { background: var(--d-amber); border-color: var(--d-amber); color: #241a06; }
.backup-banner .btn.ghost { background: var(--surface); border-color: var(--line-2); color: var(--text); }
.backup-banner > span { flex: 1; min-width: 200px; }
.backup-banner .ico { width: 17px; height: 17px; color: var(--d-amber); flex-shrink: 0; }
.backup-banner > span { flex: 1; min-width: 200px; }

.icon-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.icon-pick {
  width: 40px; height: 40px; border-radius: 9px; font-size: 19px; cursor: pointer;
  background: var(--bg-3); border: 1px solid var(--border); line-height: 1;
}
.icon-pick:hover { border-color: var(--accent); background: var(--panel-2); }

/* sophisticated hint banners: ultra-subtle, borderless, low-saturation surface
   that sits quietly in the page flow rather than grabbing attention */
.help-box {
  background: var(--surface); border: none;
  border-radius: var(--radius-sm); padding: 13px 16px;
  margin-bottom: 18px; font-size: 12.5px; line-height: 1.5;
}
/* microscopic blue tint for informational callouts */
.help-box.info { background: rgba(59, 130, 246, 0.03); }
/* microscopic yellow tint for soft warnings (e.g. search-without-API-key feedback) */
.help-box.warn {
  background: rgba(216, 166, 87, 0.03); border: none;
  padding: 12px 15px;
}
/* higher-contrast Replay Tutorial trigger with a clear, proportionate icon */
.replay-btn { font-size: 13.5px; padding: 9px 16px; gap: 8px; line-height: 1.1; align-items: center; }
.replay-btn .bico { font-size: 17px; width: 17px; height: 17px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
/* replay-tutorial glyph: sized + weighted to match the standardized app icons
   (higher specificity so it wins over the generic .btn .ico-svg footprint) */
.btn.replay-btn .ico-svg { width: 21px; height: 21px; stroke-width: 1.75px; }

/* Settings: nested category sub-cards inside the single Categories master card.
   Background matches the ultra-subtle hint card (the "Free keys" help-box). */
.subcard {
  background: var(--surface-2); border: none;
  border-radius: var(--radius-sm); padding: 14px 16px;
}
.subcard .section-title { margin-top: 0; }
/* merged Profile + Currencies top row: align tops rather than stretch the shorter card */
.grid.settings-merge { align-items: start; }
.grid.settings-merge > .panel { margin-bottom: 0; }
.set-masonry { columns: 2; column-gap: 16px; }
.set-masonry > .panel { break-inside: avoid; -webkit-column-break-inside: avoid; margin-bottom: 16px; }
@media (max-width: 1000px) { .set-masonry { columns: 1; } }

/* holding search results (Add/Edit Holding) */
.search-results { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; }
.search-results:empty { margin-top: 0; }
.search-result {
  display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer; width: 100%;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 11px; color: var(--text);
}
.search-result:hover { border-color: var(--accent); background: var(--bg-3); }
.search-result .sr-name { font-weight: 600; font-size: 13px; }
.search-result .sr-meta { font-size: 11.5px; color: var(--text-dim); font-family: var(--mono); }

/* ---------- First-run interactive tutorial (fixed-center walkthrough) ---------- */
/* full-screen dim backdrop; also catches clicks so the page stays inert during the tour */
.tut-blocker { position: fixed; inset: 0; z-index: 999; background: rgba(0, 0, 0, 0.4); }
/* Monthly Detail (History): months across the columns, metrics down the rows. The metric-label
   column stays pinned while the month columns scroll horizontally. */
.month-detail th:first-child, .month-detail td:first-child { text-align: left; position: sticky; left: 0; background: var(--surface); z-index: 1; }
.month-detail thead th:first-child { z-index: 2; background: var(--surface-2); }

/* the popup locks dead-center of the viewport and never drifts between steps.
   A rigid min-height + flex column keeps the card from jumping or jittering up
   and down as step copy of different lengths swaps in via Next. */
.tut-card {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); padding: 30px 28px 22px;
  width: calc(100% - 48px); max-width: 400px; box-shadow: var(--shadow);
  min-height: 380px; height: 430px; display: flex; flex-direction: column; overflow: hidden;
}
.tut-progress { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--surface-3); }
.tut-progress-fill { height: 100%; background: var(--accent); border-radius: 0 3px 3px 0; transition: width 0.25s ease; }
.tut-ico {
  width: 56px; height: 56px; border-radius: 16px; margin: 4px auto 16px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.tut-ico .ico { width: 27px; height: 27px; color: var(--accent); }
.tut-step { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); flex: 0 0 auto; margin-bottom: 6px; text-align: center; }
.tut-card h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 11px; flex: 0 0 auto; text-align: center; }
.tut-body { color: var(--text-2); font-size: 14px; line-height: 1.6; margin: 0 0 20px; flex: 1 1 auto; min-height: 0; overflow-y: auto; text-align: center; }
.tut-body strong { color: var(--text); font-weight: 600; }
.tut-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.tut-dot { width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%; background: var(--surface-3); cursor: pointer; transition: background 0.15s, transform 0.15s; }
.tut-dot:hover { background: var(--accent-press); transform: scale(1.25); }
.tut-dot.done { background: var(--accent-line); }
.tut-dot.on { background: var(--accent); transform: scale(1.3); }
.tut-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex: 0 0 auto; }
.tut-foot-nav { display: flex; gap: 8px; }

/* ---------- Inline SVG icon engine ---------- */
/* every utility glyph shares one elegant line-art footprint */
.ico-svg, .ico {
  width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7px;
  stroke-linecap: round; stroke-linejoin: round;
  display: inline-block; vertical-align: middle; flex-shrink: 0;
}
.side-action .ico-svg { width: 16px; height: 16px; }
.btn .ico-svg { width: 15px; height: 15px; }
/* empty-state emblem (opaque grey, lighter stroke) */
.empty .emblem .stub-ico { width: 42px; height: 42px; color: var(--ico-mid); stroke-width: 1.4px; }

/* ---------- Custom select chevron (replaces the native dropdown arrow) ---------- */
select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.55' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  padding-right: 30px;
}

/* ---------- Customizable select: render the option-list popup in-page so its frame
   uses a design token instead of the browser's bright native white outline (Chrome 146+).
   The whole popup is now author-styled: dark surface, hairline border, soft shadow. ---------- */
@supports (appearance: base-select) {
  select, select::picker(select) { appearance: base-select; }
  /* keep our custom chevron; drop the duplicate native picker glyph */
  select::picker-icon { display: none; }
  /* the popup frame - subtle --line-2 hairline, no high-contrast UA outline */
  select::picker(select) {
    background: var(--surface-2);
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    box-shadow: var(--shadow);
    padding: 5px;
    margin-top: 6px;
  }
  select option {
    padding: 8px 11px; border-radius: var(--r-sm);
    background: transparent; color: var(--text); font-size: 13.5px;
  }
  select option:hover { background: var(--surface-3); }
  select option:checked { background: var(--accent-soft); color: var(--text); }
  /* frozen months: muted text only (no inline background, so the hover highlight still shows), 5% darker */
  select option.opt-frozen { color: color-mix(in oklch, var(--text-2) 95%, #000); }
  /* even, gutter-free rows: hide the default selected-tick column */
  select option::checkmark { display: none; }
  /* Stable popup: a fixed-size, self-scrolling panel anchored to its button. position-try-fallbacks:none
     stops the browser re-fitting (flipping/resizing) the picker to the shrinking viewport gap as the page
     scrolls - that recompute was the "stuck + changes size" jank. The page still scrolls normally and the
     picker simply travels with its button. */
  select::picker(select) { max-height: 320px; overflow-y: auto; position-try-fallbacks: none; }
}

/* ---------- Custom minimalist scrollbars ---------- */
/* thin, trackless, softly rounded charcoal capsules; faint when idle */
* { scrollbar-width: thin; scrollbar-color: rgba(248, 250, 252, 0.08) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(248, 250, 252, 0.06); border-radius: 20px;
  border: 2px solid transparent; background-clip: padding-box;
  transition: background 0.2s ease;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(248, 250, 252, 0.18); background-clip: padding-box; }

/* ---------- Shimmer skeleton loaders ---------- */
@keyframes shimmer { 0% { background-position: -480px 0; } 100% { background-position: 480px 0; } }
.skeleton {
  display: inline-block; height: 0.9em; min-width: 60px; border-radius: 6px; vertical-align: middle;
  background: linear-gradient(90deg, rgba(248,250,252,0.04) 25%, rgba(248,250,252,0.09) 37%, rgba(248,250,252,0.04) 63%);
  background-size: 480px 100%; animation: shimmer 1.4s ease infinite; color: transparent;
}
.skeleton.bar-lg { height: 1.4em; min-width: 120px; }

/* ---------- Sidebar "Help & Support" footer node ---------- */
.side-help {
  margin-top: auto; display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left; border: none; background: none; cursor: pointer;
  padding: 12px; border-radius: var(--radius-sm);
  color: var(--text-muted); font-size: 13px; font-weight: 500; font-family: inherit;
  transition: color 0.14s ease;
}
/* Help & Support: hover transitions the text colour ONLY - no background box, no border outline. */
.side-help:hover { color: var(--white); background: none; }
.side-help .ico-svg { width: 16px; height: 16px; }

/* ---------- Tax page header actions: single row, [Year] [Tax Settings] [Add Invoice] ---------- */
/* 16px gap matches the global grid gutter between main content cards. */
.tax-actions { display: flex; flex-direction: row; gap: 16px; align-items: center; flex-wrap: wrap; }
.tax-actions-row { display: flex; gap: 16px; align-items: center; }
/* Year select frame hugs the exact length of the selected period string (no fixed width). */
select.tax-year-sel { width: auto; min-width: 0; flex: 0 0 auto; }

/* Tax row shares the 4-col summary grid: Brackets = col 1 (as wide as Total Income), Invoices spans
   cols 2-4 (its left edge lines up under the Estimated Tax card). */
.tax-row > .tax-brackets-card { grid-column: 1 / 2; }
.tax-row > .tax-invoices-card { grid-column: 2 / 5; }
@media (max-width: 1000px) { .tax-row > .tax-brackets-card, .tax-row > .tax-invoices-card { grid-column: auto; } }
/* Empty invoices state still fills the fixed 5-row height so the card never collapses. */
.inv-scroll.inv-empty { display: flex; align-items: center; justify-content: center; }

/* ============================================================
   Refined design system - additions for the ported look
   ============================================================ */

/* sidebar footer node: Refresh Rates sits directly above Help & Support, pinned to the bottom */
/* No top divider above Refresh Rates - clean, borderless footer. */
.side-foot { margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.side-foot .side-action { margin: 0; }
.side-help { margin-top: 0; gap: 11px; padding: 9px 11px; color: var(--text-3); width: auto; align-self: flex-start; }
.side-help .ico-svg, .side-help .ico { width: 17px; height: 17px; color: var(--ico-faint); }
.side-help:hover { color: var(--text); background: none; }
.side-help:hover .ico-svg, .side-help:hover .ico { color: var(--ico-mid); }

/* Sidebar "Upgrade to Pro" node - subtle brand-green tile above Help & Support */
.side-pro {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 9px 11px; border-radius: 10px; cursor: pointer; font-family: inherit;
  background: rgba(87, 211, 146, 0.08); border: 1px solid rgba(87, 211, 146, 0.22);
  transition: background 0.13s, border-color 0.13s;
}
.side-pro:hover { background: rgba(87, 211, 146, 0.14); border-color: rgba(87, 211, 146, 0.4); }
.side-pro .pro-tag {
  flex-shrink: 0; font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  padding: 2px 6px; border-radius: 5px; background: #57D392; color: #0a0c11;
}
.side-pro .pro-txt { font-size: 12px; font-weight: 600; color: var(--text-2); line-height: 1.3; }

/* ===== Pro upgrade modal - bold hero (Option 5) ===== */
.modal.pro-modal .modal-x {
  position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.10); color: rgba(255,255,255,.8);
  font-size: 15px; line-height: 1; cursor: pointer; z-index: 3;
  display: flex; align-items: center; justify-content: center; padding: 0; font-family: inherit;
}
.modal.pro-modal .modal-x:hover { background: rgba(255,255,255,.18); color: #fff; }
.pro-hero {
  position: relative; padding: 32px 30px 26px;
  background: linear-gradient(155deg, #1a5138, #0d2a1d 70%);
  border-bottom: 1px solid rgba(87,211,146,.30);
}
.pro-hero .protag { display: inline-flex; margin-bottom: 16px; }
.pro-hero .protag .b {
  font-size: 11px; font-weight: 800; letter-spacing: .07em; padding: 3px 9px;
  border-radius: 5px; background: #57D392; color: #06140c;
}
.pro-hero h2 { font-size: 27px; font-weight: 800; letter-spacing: -.03em; margin: 0 0 8px; line-height: 1.12; color: #fff; }
.pro-hero h2 em { font-style: normal; color: #57D392; }
.pro-hero p { font-size: 14px; color: rgba(255,255,255,.62); margin: 0; line-height: 1.5; max-width: 240px; }
.pro-hero-price { position: absolute; right: 30px; bottom: 26px; text-align: right; }
.pro-hero-price .p { font-size: 33px; font-weight: 800; letter-spacing: -.03em; color: #fff; line-height: 1; }
.pro-hero-price .u { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 3px; }
.pro-body { padding: 22px 30px 26px; }
.pro-feats { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 16px; margin-bottom: 22px; align-items: start; }
.pro-feat { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; line-height: 1.4; color: var(--text); }
.pro-feat .ico-svg, .pro-feat .ico { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; color: #57D392; }
.pro-feat strong { font-weight: 700; }
.pro-cta.btn.primary { width: 100%; justify-content: center; background: #57D392; color: #06140c; font-weight: 700; border-color: transparent; font-size: 15px; }
.pro-cta.btn.primary:hover { background: #57D392; filter: brightness(1.06); }
/* Lock glyph on every "Unlock Pro" CTA (modal + in-page gate): dark on the green button, consistent size. */
.pro-cta.btn.primary .ico-svg { width: 16px; height: 16px; color: currentColor; }
.pro-note { font-size: 12.5px; color: var(--text-3); text-align: center; line-height: 1.5; margin: 11px 0 0; }

/* ===== First-run desktop-install popup ===== */
.modal.install-modal { max-width: 396px; }
.modal.install-modal .modal-x {
  position: absolute; top: 13px; right: 13px; width: 30px; height: 30px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.08); color: var(--text-2);
  font-size: 14px; line-height: 1; cursor: pointer; z-index: 3;
  display: flex; align-items: center; justify-content: center; padding: 0; font-family: inherit;
}
.modal.install-modal .modal-x:hover { background: rgba(255,255,255,.16); color: var(--text); }
.install-card { padding: 36px 30px 28px; text-align: center; }
.install-card .install-icon {
  width: 62px; height: 62px; border-radius: 16px; display: block; margin: 0 auto 18px;
  box-shadow: 0 16px 38px -14px rgba(76,195,138,.5);
}
.install-card h2 { font-size: 21px; font-weight: 800; letter-spacing: -.03em; margin: 0 0 10px; line-height: 1.15; color: var(--text); }
.install-card p { font-size: 14px; color: var(--text-2); line-height: 1.55; margin: 0 auto 22px; max-width: 304px; }
.install-acts { display: flex; flex-direction: column; gap: 10px; }
.install-acts .btn { width: 100%; justify-content: center; }
.install-acts .btn.primary { background: #57D392; color: #06140c; font-weight: 700; border-color: transparent; font-size: 15px; }
.install-acts .btn.primary:hover { background: #57D392; filter: brightness(1.06); }
.install-acts .btn.primary .ico-svg { width: 16px; height: 16px; color: currentColor; }

/* ===== Pro gating - in-page upsell (visible-but-locked) ===== */
.pro-gate { display: flex; justify-content: center; padding: 8px 0 4px; }
.pro-gate-card {
  position: relative; width: 100%; max-width: 560px; text-align: center;
  padding: 40px 36px 30px; border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(87,211,146,.09), var(--surface) 62%);
  border: 1px solid rgba(87,211,146,.26); box-shadow: var(--shadow);
}
.pro-gate-tag {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .07em;
  padding: 3px 9px; border-radius: 5px; background: #57D392; color: #06140c; margin-bottom: 18px;
}
.pro-gate-lock {
  width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(87,211,146,.12); border: 1px solid rgba(87,211,146,.3);
}
.pro-gate-lock .ico-svg { width: 24px; height: 24px; color: #57D392; }
.pro-gate-card h2 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; color: var(--text); }
.pro-gate-blurb { font-size: 14.5px; color: var(--text-2); line-height: 1.5; margin: 0 auto 20px; max-width: 410px; }
.pro-gate-feats {
  list-style: none; margin: 0 auto 24px; padding: 0; max-width: 370px;
  display: grid; gap: 11px; text-align: left;
}
.pro-gate-feats li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; color: var(--text); line-height: 1.4; }
.pro-gate-feats .ico-svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: #57D392; }
.pro-gate-card .pro-cta { display: inline-flex; width: auto; min-width: 232px; gap: 7px; }
.pro-gate-card .pro-cta .ico-svg { width: 16px; height: 16px; color: currentColor; }
.pro-gate-note { font-size: 12.5px; color: var(--text-3); line-height: 1.5; margin: 13px auto 0; max-width: 390px; }

/* Slim banner atop a partially-gated page (History 12-month cap) */
.pro-cap-band {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 8px 18px; margin-bottom: 18px; border-radius: var(--r-md);
  background: linear-gradient(120deg, rgba(87,211,146,.10), var(--surface));
  border: 1px solid rgba(87,211,146,.26);
}
.pro-cap-band .btn.primary { padding: 7px 13px; }
.pro-cap-band .pcb-l { display: flex; align-items: center; gap: 13px; }
.pro-cap-band .pro-gate-tag { margin-bottom: 0; }
.pro-cap-band .pcb-t { font-size: 14px; font-weight: 700; color: var(--text); }
.pro-cap-band .pcb-s { font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.pro-cap-band .btn .ico-svg { width: 15px; height: 15px; }
.pro-cap-band .pcb-r { display: flex; align-items: center; gap: 10px; }
.pcb-x {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border-radius: 8px;
  border: 1px solid transparent; background: none; color: var(--text-3);
  cursor: pointer; font-family: inherit; transition: background .13s, color .13s, border-color .13s;
}
.pcb-x:hover { background: var(--surface-3); color: var(--text); border-color: var(--line-2); }
.pcb-x .ico-svg { width: 15px; height: 15px; }

/* History scope toggle (Year to Date / Last 12 Months / Everything) */
.hist-scope .rc-btn { display: inline-flex; align-items: center; gap: 5px; }
.hist-scope .rc-btn .ico-svg { width: 12px; height: 12px; }
.hist-scope .rc-locked { color: var(--text-3); }
.hist-scope .rc-locked .ico-svg { color: #57D392; }

/* Inline PRO pill beside a gated field label / section heading */
.pro-inline {
  display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; vertical-align: middle;
  padding: 2px 5px; border-radius: 4px; background: rgba(87,211,146,.16); color: #57D392; margin-left: 6px;
}

/* Developer plan-testing readout */
.plan-now { font-size: 14px; color: var(--text-2); }
.plan-now strong { font-size: 12px; font-weight: 800; letter-spacing: .05em; padding: 2px 8px; border-radius: 5px; margin: 0 2px; }
.plan-now strong.is-pro { background: #57D392; color: #06140c; }
.plan-now strong.is-free { background: var(--surface-3); color: var(--text); }
.plan-now .muted { font-size: 12.5px; }

/* shared callout (privacy note, tax disclaimer, info rows) */
.callout {
  display: flex; gap: 11px; align-items: flex-start; padding: 13px 15px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); font-size: 13px; line-height: 1.5;
}
.callout .ico { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; color: var(--ico-mid); }
.callout strong { color: var(--text); font-weight: 600; }

/* segmented control (Settings -> Monthly Snapshot) */
.seg { display: flex; gap: 8px; }
.seg-btn { flex: 1; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left; padding: 13px 15px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--text-2); transition: border-color 0.13s, background 0.13s, color 0.13s; }
.seg-btn .seg-sub { font-size: 11.5px; font-weight: 500; color: var(--text-3); }
.seg-btn:hover { background: var(--surface-3); }
.seg-btn.active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--text); }
.seg-btn.active .seg-sub { color: var(--text-2); }
/* live status pill */
.tag-live { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: var(--r-pill); background: var(--pos-soft); color: var(--pos); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.tag-live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pos); }

/* welcome / setup wizard (standalone, no sidebar) */
#app.full { display: block; }
#app.full .main { max-width: 820px; margin: 0 auto; padding: 56px 32px 80px; }
.wizard { display: flex; flex-direction: column; gap: 16px; }
.wiz-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 8px; }
.wiz-mark {
  width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.wiz-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.wiz-mark .ico { width: 30px; height: 30px; color: #fff; }
.wlc-title { display: flex; flex-direction: column; align-items: center; gap: 9px; margin: 0; }
.wlc-eyebrow { font-size: 15px; font-weight: 600; color: var(--text-3); letter-spacing: 0.01em; white-space: nowrap; }
.wlc-wordmark { height: 44px; width: auto; display: block; }
.wiz-head h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.03em; white-space: nowrap; }
.wiz-sub { margin: 0; color: var(--text-2); font-size: 14.5px; }
.wiz-privacy { margin-bottom: 4px; }
.wiz-finish { text-align: center; }
.wiz-go { padding: 12px 30px; font-size: 15px; margin: 0 auto; justify-content: center; }

/* opaque icon greys on the in-prose / card-head glyphs (never alpha text tokens) */
.btn .ico, .head-actions .btn .ico { color: var(--ico-mid); }
.btn.primary .ico { color: #fff; }

/* ---- approved in-preview refinements ---- */
#app .chg >.ico { height: 15px !important; stroke-width: 2.6px !important }
#app .cols-5 >div:nth-child(1) >div:nth-child(3) { margin: 3px 0px 0px !important }
#app .tint-blue >.delta { margin: 8px 0px 0px !important }
#app .stat >div:nth-child(5) { margin: 3px 0px 0px !important }
#app .cols-5 >div:nth-child(1) >div:nth-child(3) { margin: 0px !important }
#app .stat >div:nth-child(5) { margin: 0px !important }
#app .stat >div:nth-child(5) { margin: 3px 0px 0px !important }
#app .inv-table >tfoot td:nth-child(4) { padding: 13px 13px 13px 16px !important }
#app .inv-table >tfoot td:nth-child(4) { padding: 13px !important }
#app .inv-table >tfoot td:nth-child(5) { padding: 13px !important }

/* Tax page: invoices scroll past 5 rows; Tax Brackets column matches that fixed height.
   Height = header row + 5 body rows + footer row; sticky head/foot keep totals in view. */
.inv-scroll { height: 380px; overflow-y: auto; }
.inv-scroll thead th { position: sticky; top: 0; z-index: 2; }
.inv-scroll tfoot td { position: sticky; bottom: 0; z-index: 2; }
.bk-scroll { height: 380px; overflow-y: auto; align-content: start; padding: 7px; }
/* Tax row: the Brackets and Invoices cards stay equal height with their scroll areas flexing to
   fill, so the two cards align top AND bottom regardless of header/hint length. */
.tax-row > .panel { display: flex; flex-direction: column; }
.tax-row .bk-scroll, .tax-row .inv-scroll { flex: 1 1 auto; height: auto; min-height: 360px; }

/* Holding detail → Transactions ledger: cap the default view to ~10 rows (header + 10 body rows at
   ~44px) and scroll the rest vertically; sticky header keeps the column labels in view while paging
   through long action logs. Reuses the shared .table-wrap surface/border. */
.txn-scroll { max-height: 486px; overflow-y: auto; }
.txn-scroll thead th { position: sticky; top: 0; z-index: 2; }
/* Dividends card: ~25% shorter than the ledger, scrolls internally once the list outgrows it. */
.div-scroll { max-height: 364px; overflow-y: auto; }
.div-scroll thead th { position: sticky; top: 0; z-index: 2; }

/* Retirement tracker: maps onto the shared .panel / .stat / .field / grid system only.
   Output metrics force tabular figures; compounding + cap-alert highlights draw from the
   authorized OKLCH data palette (never a new hue). */
.rt-metric { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.rt-compound { color: var(--d-green); }
.rt-teal { color: var(--d-teal); }
.rt-rows { display: flex; flex-direction: column; gap: 9px; margin-top: 2px; }
.rt-line { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--text-2); }
.rt-line strong { color: var(--text); font-weight: 600; }
.rt-pill { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.rt-pill .ico { width: 13px; height: 13px; }

/* Retirement "Compounding Path" milestone timeline: connected nodes from Now to 20yrs.
   Dots ring against the panel surface; the final node tints teal to match the 20yr metric. */
.rt-mstone { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 12px; }
.rt-ms { text-align: center; position: relative; padding-top: 28px; }
.rt-ms::before { content: ""; position: absolute; top: 7px; left: 0; right: 0; height: 2px; background: var(--line); }
.rt-ms:first-child::before { left: 50%; }
.rt-ms:last-child::before { right: 50%; }
.rt-ms-dot { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; border-radius: 50%; background: var(--d-blue); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--d-blue); }
.rt-ms.fin .rt-ms-dot { background: var(--d-teal); box-shadow: 0 0 0 1px var(--d-teal); }
.rt-ms-y { font-size: 11px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; }
.rt-ms-v { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; margin-top: 5px; font-variant-numeric: tabular-nums; }
.rt-ms.fin .rt-ms-v { color: var(--d-teal); }
/* Retirement "Your Inputs": compact panel - tighter padding, no per-field sub-hints. */
.rt-inputs { padding-top: 16px; padding-bottom: 18px; }
.rt-inputs h2 { margin-bottom: 4px; }
.rt-inputs > .hint { margin-bottom: 14px; }

/* Chart axis/value text keeps the system's tabular figure styling (incl. the holding
   "Value Over Time" graph), so compact numeric labels stay aligned and on-system. */
.chart text, .chart .chart-num { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; font-size: 8.5px; }

/* Pre-import guidance modal: amber warning callout + scannable keyword mini-tutorial. Reuses the
   shared .callout box and stays on the data palette / surface tokens (no new hues). */
.callout.import-warn { background: color-mix(in oklch, var(--d-amber) 12%, var(--surface-2)); border-color: color-mix(in oklch, var(--d-amber) 32%, transparent); }
.callout.import-warn .ico { color: var(--d-amber); }
.callout.import-warn strong { color: var(--text); }
.kw-rows { display: flex; flex-direction: column; gap: 11px; margin-top: 6px; }
.kw-row { display: flex; gap: 12px; align-items: baseline; }
.kw-label { flex: 0 0 132px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); }
.kw-list { display: flex; flex-wrap: wrap; gap: 6px; }
.kw-list code { font-family: var(--font); font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text-2); border: 1px solid var(--line); }
.kw-list code::first-letter { text-transform: uppercase; }

/* Global card-subtext typography: the secondary descriptive line under a primary number always
   opens with a capital letter, app-wide (Dashboard, Accounts, Investments, Tax, etc.). */
.stat .sub::first-letter, .stat .delta::first-letter, .calc-cell .cl::first-letter { text-transform: uppercase; }

/* ============================================================
   Dashboard "Focal Hero" layout
   A single dominant net-worth panel fuses the headline figure, after-tax value
   and YTD growth with the detailed net-worth trend chart; everything else
   demotes to a slim KPI rail, then an Allocation + What-Changed two-up.
   ============================================================ */
/* ============================================================
   Focal hero - a page's primary metric, optionally fused with a chart/visual on
   the right. The Dashboard's net worth uses .hero.accent (blue gradient); every
   other page's primary metric uses the neutral .hero. Shared structure app-wide.
   ============================================================ */
.hero {
  display: grid;
  grid-template-columns: minmax(270px, 0.78fr) 1.6fr;
  gap: 32px;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 30px;
}
.hero.accent {
  background: linear-gradient(150deg, rgba(91, 141, 239, 0.10), rgba(91, 141, 239, 0.03));
  border-color: var(--accent-line);
}
.hero.solo { grid-template-columns: 1fr; }
/* Chart-bearing page heroes (Dashboard, Investments, History, Retirement) share a min-height so their KPI
   rails line up across pages regardless of how the sub-stat text wraps. Cash Flow (no chart) is unaffected.
   Sits between the old taller hero and the compact Tax hero - tightened figs spacing lets it reach ~350. */
.hero:has(svg.chart) { min-height: 350px; }
.hero:has(svg.chart) .hero-subs { margin-top: 14px; }
.hero:has(svg.chart) .hero-subcol { gap: 10px; }
/* Hero charts fill their hero's height so they're large and line up across pages (Dashboard, Investments,
   History, Retirement). The cell stretches to the full hero height and the chart grows to fill it. */
.hero:has(svg.chart) { align-items: stretch; }
.hero:has(svg.chart) .hero-side { display: flex; flex-direction: column; }
.hero:has(svg.chart) .hero-side svg.chart { flex: 1 1 auto; min-height: 120px; }
.hero-figs { min-width: 0; }
.hero-label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); }
.hero-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hero.accent .hero-label { color: rgba(238, 240, 244, 0.78); }
.hero-value { font-size: 52px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.02; margin-top: 8px; font-variant-numeric: tabular-nums; }
.hero-value.sm { font-size: 42px; }
.hero-delta {
  margin-top: 13px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 13px; font-weight: 600; padding: 5px 11px; border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
}
.hero-delta.up { background: var(--pos-soft); color: var(--pos); }
.hero-delta.down { background: var(--neg-soft); color: var(--neg); }
.hero-delta.flat { background: var(--surface-2); color: var(--text-2); }
.hero-delta .ico, .hero-delta .ico-svg { width: 14px; height: 14px; }
/* Secondary hero metrics sit in their own grouped zone, separated from the primary value + delta by a
   hairline so the figure stack reads as two tiers instead of one dense column. Shared by every hero. */
.hero-subs { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; gap: 30px; flex-wrap: wrap; align-items: flex-start; }
.hero-subcol { display: flex; flex-direction: column; gap: 14px; }
.hero-subs .lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); }
.hero-subs .val { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.hero-side { min-width: 0; }
/* Hero-side category / bucket legends: one full-width column so each row keeps its name, value and
   percentage together on a SINGLE line (the narrow two-column layout was wrapping them). The wider
   in-panel legends - e.g. the Dashboard Allocation card - are unaffected. */
.hero-side .legend-grid { grid-template-columns: 1fr; column-gap: 32px; }
@media (min-width: 1150px) { .hero-side .legend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hero-side .legend-row { align-items: center; }
.hero-side .legend-row .dot { margin-top: 0; }
.hero-side .legend-row .lg-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-head { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; margin-bottom: 8px; flex-wrap: wrap; min-height: 28px; }
.hero-head .t { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); white-space: nowrap; flex: 0 1 auto; }
.hero-head .r { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; }
/* Trend range selector chips (Dashboard net worth + Investments charts) */
.range-chips { display: inline-flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px; flex: 0 0 auto; }
.rc-btn { border: none; background: none; color: var(--text-3); font-family: inherit; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: var(--r-pill); cursor: pointer; transition: background 0.12s, color 0.12s; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.rc-btn:hover { color: var(--text); }
.rc-btn.on { background: var(--accent-soft); color: var(--accent); }
.range-chips.lg { padding: 3px; }
.range-chips.lg .rc-btn { font-size: 12.5px; padding: 5px 12px; color: var(--text); border: 1px solid transparent; }
.range-chips.lg .rc-btn.on { background: color-mix(in oklch, var(--accent) 75%, transparent); border-color: var(--accent); color: var(--text); }
/* Portfolio Mix toggle: fits its buttons (doesn't stretch in the flex column) with slightly smaller chips */
.mix-toggle.range-chips.lg .rc-btn { font-size: 11.5px; padding: 4px 10px; }
@media (max-width: 920px) { .hero { grid-template-columns: 1fr; gap: 22px; } .hero-value { font-size: 44px; } }

/* Horizontal stacked bar (page-hero data-viz, e.g. Accounts "by bucket") */
.stack-bar { display: flex; gap: 2px; height: 12px; border-radius: var(--r-pill); overflow: hidden; background: var(--surface-2); }
.stack-bar > div { height: 100%; }

/* KPI rail: the four supporting figures as one connected strip (reuses .kpi-strip chrome) */
.dash-rail { grid-template-columns: repeat(4, 1fr); }
.kpi .kpi-sub { font-size: 12px; color: var(--text-2); margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi .kpi-sub::first-letter { text-transform: uppercase; }
.kpi .kpi-sub.up { color: var(--pos); }
.kpi .kpi-sub.down { color: var(--neg); }
@media (max-width: 920px) { .dash-rail { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .dash-rail { grid-template-columns: 1fr; } }

/* Savings-rate block inside the What-Changed panel */
.sr-block { margin-top: 18px; }
.sr-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 12px; color: var(--text-2); }
.sr-head .sr-pct { font-size: 13px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.sr-bar { height: 8px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.sr-bar > div { height: 100%; border-radius: var(--r-pill); background: var(--accent); }
.sr-foot { display: flex; justify-content: space-between; margin-top: 9px; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* Dashboard two-up: Allocation + What Changed stay equal height; the savings-rate block
   pins to the bottom of the What-Changed card so it tracks the Allocation card as that grows. */
/* Dashboard two-up: Allocation gets more width than What Changed (donut needs the room). */
.grid.cols-2.dash-twoup { align-items: stretch; grid-template-columns: 1.22fr 1fr; }
.panel.whatchanged { display: flex; flex-direction: column; }
.panel.whatchanged .sr-block { margin-top: auto; padding-top: 18px; }

/* What Changed - Option C: headline net-worth move + two ledger rows, savings-rate ring at right. */
.wc-flex { display: flex; gap: 22px; align-items: center; margin-top: auto; padding-top: 4px; }
.wc-left { flex: 1; min-width: 0; }
.wc-totlbl { font-size: 12px; color: var(--text-2); margin-bottom: 2px; }
.wc-total { font-size: 27px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.wc-total.up { color: var(--pos); } .wc-total.down { color: var(--neg); }
.wc-rows { margin-top: 16px; }
.wc-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.wc-row:last-child { border-bottom: none; }
.wc-ic { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wc-ic-mkt { background: color-mix(in oklch, var(--d-teal) 15%, transparent); color: var(--d-teal); }
.wc-ic-sav { background: var(--pos-soft); color: var(--pos); }
.wc-rn { flex: 1; min-width: 0; font-size: 13px; }
.wc-rn small { display: block; color: var(--text-3); font-size: 11px; margin-top: 1px; }
.wc-rv { font-weight: 600; font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wc-rv.up { color: var(--pos); } .wc-rv.down { color: var(--neg); }
.wc-ring { position: relative; width: 116px; height: 116px; flex-shrink: 0; }
.wc-ring-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.wc-ring-c .p { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.wc-ring-c .l { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); margin-top: 1px; }
@media (max-width: 560px) { .wc-flex { flex-direction: column-reverse; align-items: stretch; } .wc-ring { align-self: center; } }

/* Retirement: the Concessional Cap and Compounding Outlook cards stay equal height (aligned). */
.rt-twoup { align-items: stretch; }

/* Assets table: fixed layout so columns size to content - the short % of Net Worth and Net worth
   columns stay narrow, Asset/Value get the room. Headers wrap instead of forcing width; the asset
   name ellipsizes rather than overflowing. */
.asset-table { table-layout: fixed; }
.asset-table thead th { white-space: normal; }
.asset-table .acct { min-width: 0; }
.asset-table .acct .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Category / entity chips never wrap their label across lines. */
.chip { white-space: nowrap; }

/* Holding transactions ledger: uniform fixed column widths, Cost / Sold Value a touch wider. */
.txn-table { table-layout: fixed; }
.txn-table thead th { white-space: normal; }

/* Holding detail (Option C): left "Position" summary card listing every figure, chart on the right. */
.hd-grid { grid-template-columns: 300px 1fr; align-items: stretch; }
.hd-position { display: flex; flex-direction: column; }
.hd-position .hero-delta { align-self: flex-start; white-space: nowrap; }
.hd-position .hd-mv { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; margin-top: 5px; font-variant-numeric: tabular-nums; }
.hd-rows { margin-top: 18px; display: flex; flex-direction: column; flex: 1; justify-content: space-between; }
.hd-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.hd-row:last-child { border-bottom: none; }
.hd-row .hd-k { color: var(--text-2); }
.hd-row .hd-v { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hd-row .hd-v .btn.sm { padding: 2px 7px; margin-left: 4px; }
.hd-row .hd-v-price { display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px; }
.hd-row .hd-v-price .btn.sm { margin-left: 0; }
@media (max-width: 920px) { .hd-grid { grid-template-columns: 1fr; } }

/* Combined "Viewing period" control - a Year selector scopes the Month dropdown (max 12 entries). */
.side-period .period-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); }
.side-period .period-row { display: flex; gap: 8px; }
.side-period .period-year { flex: 0 0 66px; }
.side-period .period-month { flex: 1; min-width: 0; }
.side-period select { padding: 9px 22px 9px 9px; font-size: 13px; font-weight: 600; background-position: right 7px center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Settings "section sidebar" layout: a sub-nav lists the sections; the selected one renders full-width. */
.settings-shell { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; }
.settings-nav { display: flex; flex-direction: column; gap: 3px; position: sticky; top: 28px; }
.settings-nav-item { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: var(--r-sm); border: none; background: none; color: var(--text-2); font-family: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; transition: background 0.13s, color 0.13s; }
.settings-nav-item:hover { background: var(--surface-2); color: var(--text); }
.settings-nav-item.active { background: var(--accent-soft); color: var(--text); font-weight: 600; }
.settings-content { min-width: 0; }
.settings-content > .panel:last-child { margin-bottom: 0; }
@media (max-width: 820px) { .settings-shell { grid-template-columns: 1fr; } .settings-nav { flex-direction: row; flex-wrap: wrap; position: static; } }

/* Expenses / Income entries table: thinner rows and a fixed height that shows ~6 entries, then
   scrolls. Header + footer stay pinned (sticky) while the rows scroll underneath. */
.ledger-scroll { max-height: 316px; overflow-y: auto; }
.ledger-scroll tbody td { padding-top: 6px; padding-bottom: 6px; }
.ledger-scroll .btn.sm { padding: 4px 10px; font-size: 11.5px; }
.ledger-scroll thead th { position: sticky; top: 0; z-index: 2; padding-top: 9px; padding-bottom: 9px; }
.ledger-scroll tfoot td { position: sticky; bottom: 0; z-index: 2; padding-top: 10px; padding-bottom: 10px; }
/* Cash Flow combined ledger: fixed ~10-row height with the column header and the Net footer pinned while rows scroll. */
.cf-ledger thead th { position: sticky; top: 0; z-index: 2; }
.cf-ledger tfoot td { position: sticky; bottom: 0; z-index: 2; }

/* ============================================================
   First-run Welcome screen ("Focal" direction): premium accent
   hero + trust chips, de-numbered section cards, and a light-blue
   sticky finish bar. Tokens only; reuses .wiz-mark / .panel.
   ============================================================ */
.wlc-hero {
  position: relative; overflow: hidden; text-align: center;
  border-radius: var(--r-lg); border: 1px solid var(--accent-line);
  background:
    radial-gradient(130% 170% at 84% -35%, rgba(91,141,239,0.22), transparent 55%),
    linear-gradient(155deg, rgba(91,141,239,0.13), rgba(91,141,239,0.03));
  padding: 44px 40px 34px; margin-bottom: 22px;
}
.wlc-hero .wiz-mark { margin: 0 auto 18px; width: 64px; height: 64px; border-radius: 18px; }
.wlc-hero .wiz-mark .ico { width: 32px; height: 32px; }
.wlc-hero h1 { font-size: 34px; letter-spacing: -0.03em; margin: 0 0 9px; white-space: normal; }
.wlc-hero .lede { margin: 0 auto; max-width: 500px; color: var(--text-2); font-size: 15px; line-height: 1.55; }
.wlc-props { display: flex; justify-content: center; gap: 9px; margin-top: 22px; flex-wrap: wrap; }
.wlc-prop {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600;
  color: var(--text-2); background: var(--surface); border: 1px solid var(--line-2);
  padding: 7px 13px; border-radius: var(--r-pill);
}
.wlc-prop .ico { width: 14px; height: 14px; color: var(--accent); }
/* sticky finish bar - light-blue accent tint */
.finishbar {
  position: sticky; bottom: 18px; margin-top: 8px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; background: color-mix(in oklch, var(--accent) 16%, var(--surface));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--accent-line); border-radius: var(--r-lg); padding: 15px 18px 15px 22px;
  box-shadow: 0 12px 30px -16px rgba(0,0,0,0.6);
}
.finishbar .fb-txt { font-size: 13px; color: var(--text-2); }
.finishbar .fb-txt strong { color: var(--text); font-weight: 600; }
.finishbar .wiz-go { margin: 0; }
@media (max-width: 620px) {
  .wlc-hero h1 { font-size: 28px; }
  .finishbar { flex-direction: column; align-items: stretch; gap: 12px; text-align: center; }
}

/* ============================================================
   Capital Gains Reserve - "show the math": taxable gains × rate = owed,
   for both the UNREALIZED reserve and the REALIZED tax this FY. Adapts to
   countries with / without a holding-period long-short split.
   ============================================================ */
.cgr-block:first-of-type { margin-top: 14px; }
.cgr-block + .cgr-block { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
.cgr-eq { display: flex; align-items: stretch; gap: 9px; flex-wrap: wrap; }
.cgr-tile { flex: 1 1 0; min-width: 120px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; }
.cgr-tile .tl { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-3); white-space: nowrap; }
.cgr-tile .tv { font-size: 17px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.cgr-tile .ts { font-size: 10.5px; color: var(--text-2); margin-top: 4px; }
.cgr-tile.result { background: var(--neg-soft); border-color: color-mix(in oklch, var(--neg) 32%, transparent); }
.cgr-tile.result .tv { color: var(--neg); }
.cgr-op { display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--text-3); font-weight: 600; flex: 0 0 auto; }

/* ============================================================
   Cash Flow Quick Add - compact command bar: flow-signed amount ·
   currency · category · note · (Joint) · Add, all on one tidy line.
   ============================================================ */
.qa-cmd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qa-cmd .qa-amt { display: flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 0 12px; flex: 0 0 auto; }
.qa-cmd .qa-amt .qa-sign { font-weight: 700; font-size: 15px; white-space: nowrap; }
.qa-cmd .qa-amt input { border: none; background: none; width: 116px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; padding: 9px 0; }
.qa-cmd .qa-cur { flex: 0 0 128px; width: 128px; }
.qa-cmd .qa-cat { flex: 0 0 204px; width: 204px; }
.qa-cmd .qa-note { flex: 1 1 160px; min-width: 140px; }
.qa-cmd .qa-joint { flex: 0 0 auto; font-weight: 600; }
.qa-cmd .qa-share { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; color: var(--text-2); font-size: 13px; white-space: nowrap; }
.qa-cmd .qa-share input { width: 58px; }
.qa-cmd .qa-add { flex: 0 0 auto; }
/* the amount input is borderless inside .qa-amt - suppress its own focus ring and let the WRAPPER
   show the same accent highlight as the Note input (matching input:focus). */
.qa-cmd .qa-amt input:focus { box-shadow: none; border: none; outline: none; }
.qa-cmd .qa-amt:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ============================================================
   Help & Onboarding - searchable FAQ: search box + category chips
   above a native <details> accordion.
   ============================================================ */
.faq-search { margin-bottom: 14px; }
.faq-search input { width: 100%; }
.fchips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.fchip { padding: 6px 13px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line-2); color: var(--text-2); font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; transition: color 0.12s, background 0.12s; }
.fchip:hover { color: var(--text); }
.fchip.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--text); }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 2px; font-size: 14.5px; font-weight: 600; color: var(--text-2); -webkit-tap-highlight-color: transparent; outline: none; }
.faq summary:focus, .faq summary:focus-visible { outline: none; } }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { width: 9px; height: 9px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(45deg); transition: transform 0.18s; flex: 0 0 auto; margin-right: 4px; }
.faq details[open] summary .chev { transform: rotate(-135deg); border-color: var(--accent); }
.faq details[open] summary { color: var(--accent); }
.faq .a { padding: 0 30px 18px 2px; color: var(--text-2); font-size: 13.5px; line-height: 1.6; }
.faq .a strong { color: var(--text); font-weight: 600; }
.faq-empty { padding: 22px 2px; color: var(--text-3); font-size: 13.5px; }
/* in-list category dividers - a grouping cue on the unfiltered view (not real grouping) */
.faq-cat-div { font-size: 13.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(238, 240, 244, 0.82); padding: 22px 2px 9px; }
.faq .faq-cat-div:first-child { padding-top: 8px; }
/* "ask a question" footer */
.faq-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 22px; padding: 18px 20px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.faq-foot-t { font-size: 14px; font-weight: 700; }
.faq-foot-s { font-size: 13px; color: var(--text-2); margin-top: 3px; }