/* Scales Bank — visual layer only. Accounting remains in the unchanged app.js.
   Graphite surfaces, warm total, blue liquidity, mint broker, orange spending. */
:root {
  color-scheme: dark;
  --bg: #080a0d;
  --bg-elevated: #101318;
  --surface: #101318;
  --surface-solid: #161b22;
  --surface-inset: #0c0f13;
  --surface-hover: #1c232d;
  --ink: #eef1f6;
  --muted: #9ba7b8;
  --line: #242c36;
  --line-strong: #34404e;
  --field-border: #586576;
  --accent: #9abdff;
  --accent-dim: #17263e;
  --accent-glow: transparent;
  --action: #afcaff;
  --on-action: #0e203d;
  --total: #f2c66d;
  --total-dim: #231e15;
  --invest: #45dbad;
  --invest-dim: #102720;
  --save: #54c5a8;
  --save-dim: #102720;
  --expense: #ff8e9c;
  --expense-dim: #311920;
  --spending: #f2a16c;
  --income: #b6a1ef;
  --cash: #75baff;
  --comparison: #abb7c9;
  --asset-action: #8aafff;
  --asset-etf: #54c5a8;
  --asset-crypto: #efc16b;
  --asset-bond: #b6a1ef;
  --asset-realestate: #e6966b;
  --asset-other: #a8b5c7;
  --asset-unallocated: #34404e;
  --chart-grid: #242b34;
  --chart-well: #090f16;
  --metal-highlight: #ffffff12;
  --panel-shadow: #00000030;
  --radius: 12px;
  --radius-sm: 7px;
  --shadow: none;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 0.9375rem;
  --gap: 24px;
  --panel-pad: clamp(20px, 2.2vw, 32px);
  --font-display: "Sora", var(--font);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #dfe5e8;
  --bg-elevated: #edf1f2;
  --surface: #edf1f2;
  --surface-solid: #e9eff1;
  --surface-inset: #e4eaee;
  --surface-hover: #d9e3ec;
  --ink: #132536;
  --muted: #3f5365;
  --line: #c2cdd4;
  --line-strong: #9cabb7;
  --field-border: #758897;
  --accent: #184ec7;
  --accent-dim: #dce6f7;
  --action: #1647aa;
  --on-action: #ffffff;
  --total: #805000;
  --total-dim: #ede4ce;
  --invest: #00664d;
  --invest-dim: #dbeae2;
  --save: #00664d;
  --save-dim: #dbeae2;
  --expense: #ac203c;
  --expense-dim: #f0dde2;
  --spending: #9d3b15;
  --income: #6335a0;
  --cash: #184ec7;
  --comparison: #465a71;
  --asset-action: #184ec7;
  --asset-etf: #00664d;
  --asset-crypto: #805000;
  --asset-bond: #6335a0;
  --asset-realestate: #9d3b15;
  --asset-other: #3f5365;
  --asset-unallocated: #becbd4;
  --chart-grid: #cbd5dc;
  --chart-well: #e8eef1;
  --metal-highlight: #ffffff65;
  --panel-shadow: #2037580f;
}

body { padding: 0; background: var(--bg); }
body::before { display: none; }
::selection { background: var(--accent); color: var(--bg); }
button, input, select, textarea, summary { touch-action: manipulation; }
button, summary { -webkit-tap-highlight-color: transparent; }
:is(button, input, select, textarea, a, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
:is(h1, h2, h3) { text-wrap: balance; scroll-margin-top: 90px; }
input, select, textarea { color: var(--ink); accent-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.8; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 12px 18px; background: var(--action); color: var(--on-action); transform: translateY(-180%); border-radius: 6px; }
.skip-link:focus { transform: none; }
.shell { display: flex; flex-direction: column; max-width: 1920px; width: 100%; margin: auto; min-height: 100dvh; border: 0; border-radius: 0; background: var(--bg); box-shadow: none; overflow: visible; }
.topbar { position: relative; top: auto; display: flex; min-height: 86px; padding: 16px clamp(20px, 3vw, 56px); background: var(--bg); border-bottom: 1px solid var(--line); }
.brand { color: var(--ink); gap: 12px; }
.brand-mark { width: 40px; height: 40px; }
.brand-mark-shell { fill: var(--surface-solid); stroke: var(--line-strong); }
.brand-mark-structure, .brand-mark-scale { stroke: var(--total); }
.brand-mark-pivot { fill: var(--total); }
.brand-name { color: var(--ink); font-size: 1.18rem; letter-spacing: -0.05em; }
.brand-signature, .brand-future { color: var(--muted); }
.brand-signature .brand-future { color: var(--muted); }
.topbar-actions { gap: 16px; }
.user-chip { background: none; border: 0; border-left: 1px solid var(--line-strong); border-radius: 0; color: var(--muted); font: 0.8rem var(--font); padding: 8px 0 8px 16px; }
#btn-logout { width: auto; min-height: 40px; font-size: 0.8rem; padding: 8px 12px; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); color: var(--ink); font: 500 0.8rem var(--font); cursor: pointer; }
.theme-toggle:hover { background: var(--surface-hover); border-color: var(--field-border); }
.theme-toggle-icon { display: inline-flex; }
.theme-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bottom-nav { position: sticky; top: 0; inset-inline: auto; bottom: auto; z-index: 20; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; width: 100%; max-width: none; min-height: 60px; height: auto; gap: 6px; padding: 0 clamp(20px, 3vw, 56px); transform: none; background: var(--bg); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; backdrop-filter: none; }
.bottom-nav .nav-btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: 9px; min-height: 60px; padding: 0 18px; border: 0; border-radius: 0; color: var(--muted); background: none; font: 500 0.875rem var(--font); }
.bottom-nav .nav-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bottom-nav .nav-btn:hover { color: var(--ink); background: var(--surface); }
.bottom-nav .nav-btn.active { color: var(--accent); background: none; }
.bottom-nav .nav-btn::before { top: auto; right: 18px; bottom: -1px; left: 18px; width: auto; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); }
main { width: 100%; min-width: 0; padding: 36px clamp(20px, 3vw, 56px) 64px; outline: none; }
.shell main { padding-inline: clamp(20px, 3vw, 56px); }
#main-content { padding: 36px clamp(20px, 3vw, 56px) 64px; overflow: visible; }
.view-layout { width: 100%; max-width: none; gap: var(--gap); padding-bottom: 0; }
.view-layout > * { min-width: 0; }
.view-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; grid-column: 1 / -1; padding: 4px 0 8px; }
.view-heading h1, .allocation-heading h1, .tools-hero-title, .settings-header .dash-title { max-width: none; margin: 0; color: var(--ink); font: 500 clamp(1.6rem, 2.5vw, 2.35rem)/1.25 var(--font-display); letter-spacing: -0.055em; }
.view-heading p { margin: 0 0 3px; color: var(--muted); font-size: 0.85rem; }
.interface-eyebrow { display: block; margin-bottom: 10px; color: var(--muted); font: 500 0.75rem/1.4 var(--font); letter-spacing: 0; }
.panel, .allocation-board, .holdings-ledger, .asset-composer { padding: var(--panel-pad); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: none; }
.panel-title, .chart-panel-head .panel-title, .dash-zone-head .panel-title, .allocation-board h2, .holdings-ledger h2, .asset-composer h2, .tools-block-title { margin-top: 0; color: var(--ink); font-family: var(--font-display); font-size: clamp(1.15rem, 1.45vw, 1.45rem); font-weight: 500; line-height: 1.35; letter-spacing: -0.035em; text-transform: none; }
.panel-title--flush { margin-bottom: 0; }
.dash-zone-tag { color: var(--muted) !important; font: 500 0.75rem/1.4 var(--font); letter-spacing: 0; }
.dash-zone-head { margin-bottom: 18px; gap: 8px; }
.chart-panel-head, .tools-chart-head { margin-bottom: 20px; align-items: flex-start; padding: 0; border: 0; gap: 12px; }
.chart-panel-meta, .tools-chart-meta { color: var(--muted); font: 400 0.75rem/1.5 var(--font); }
.day-hint, .hero-sub, .chart-note, .tools-chart-note, .tools-field-hint, .tools-fiscal-note, .currency-help, .asset-search-help, .portfolio-form-status { color: var(--muted); font-size: 0.8rem; line-height: 1.65; }
.hero-total, .dash-hero-total { color: var(--total); font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4.6rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.panel-hero, .view-layout--day .panel-hero, .dash-header { position: relative; overflow: hidden; border-color: var(--line-strong); background: var(--surface); }
.panel-hero::before, .dash-header::before, .tools-hero::before, .settings-header::before, .allocation-masthead::after { display: none; }
.panel-hero::after, .dash-header::after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 48px; height: 3px; background: var(--total); }
.kpi-breakdown { color: var(--muted); margin-top: 22px; padding-top: 20px; }
.kpi-breakdown strong { color: var(--ink); font-family: var(--font-data); }
.panel-hero--compact .hero-total { font-size: clamp(2.5rem, 4vw, 4.1rem); }
.day-status { margin-top: 20px; border: 0; border-radius: 0; background: none; padding: 0; color: var(--muted); font-size: 0.8rem; }
.day-status--closed { color: var(--save); }
.day-status--catchup { color: var(--total); }
.day-date, .day-date--catchup { color: var(--muted); background: var(--surface-inset); border: 1px solid var(--line); padding: 6px 10px; border-radius: 6px; }
.day-nav { background: var(--surface-inset); border: 1px solid var(--line); border-radius: 8px; padding: 16px; }
.day-missed-banner, .day-missed-banner--warn, .day-missed-banner--ok { background: none; border: 0; padding: 0; color: var(--muted); }
.day-nav-oldest { color: var(--accent); min-height: 32px; }
.daily-grid { border: 1px solid var(--line); border-radius: 8px; }
.daily-row { min-height: 70px; padding: 12px 14px; background: var(--surface-inset); border-color: var(--line); }
.daily-row:focus-within { background: var(--accent-dim); box-shadow: inset 2px 0 var(--accent); }
.daily-row-label, .daily-custom-label { color: var(--ink); font-size: 0.8rem; }
.daily-row input.daily-input { min-height: 40px; color: var(--ink); background: var(--surface); border: 1px solid var(--field-border); border-radius: 6px; font-size: 1rem; padding: 6px 9px; }
.onboarding-fixed-grid .daily-row { grid-template-columns: minmax(0, 1fr) minmax(104px, 30%); }
.onboarding-fixed-grid .daily-input { width: 100%; }
.daily-divider { margin: 24px 0 12px; color: var(--muted); font: 500 0.8rem var(--font); }
.daily-divider--in-grid { grid-column: 1 / -1; padding: 14px; margin: 0; border-block: 1px solid var(--line); }
.fixed-custom-label { color: var(--ink); }
.day-form-summary { margin-top: 24px; border-color: var(--line); }
.day-balance, .day-total { padding: 16px; background: var(--surface-inset); color: var(--muted); }
.day-balance strong { color: var(--save); }
.day-total strong { color: var(--spending); }
.btn { min-height: 44px; padding: 11px 18px; border-radius: 7px; font-size: 0.875rem; font-weight: 600; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; transform: none; }
.btn:hover { transform: none; }
.btn-primary { border: 1px solid transparent; background: var(--action); color: var(--on-action); box-shadow: none; }
.btn-primary:hover:not(:disabled) { background: var(--accent); color: var(--on-action); filter: none; box-shadow: none; }
.btn-ghost { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); }
.btn-ghost:hover { background: var(--surface-hover); border-color: var(--field-border); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.field label, .asset-composer .field label, .asset-search-block > label { color: var(--muted); font-size: 0.8rem; line-height: 1.5; }
.field input, .field textarea, .field select, .day-picker, .asset-composer .field input, .asset-composer .field select { min-height: 46px; border: 1px solid var(--field-border); border-radius: 7px; background: var(--surface-inset); color: var(--ink); }
.field input:focus, .field textarea:focus, .field select:focus, .day-picker:focus { border-color: var(--accent); box-shadow: none; }
.amount-input { color: var(--ink); background: var(--surface-inset) !important; border-color: var(--field-border) !important; }
.invest-source-panel { background: var(--surface-inset); border-color: var(--line); border-radius: 8px; }
.invest-source-title { color: var(--ink); }
.invest-source-option { background: var(--surface); border-color: var(--line-strong); border-radius: 7px; }
.invest-source-option:has(input:checked) { background: var(--accent-dim); border-color: var(--accent); }
.invest-source-option-text strong { color: var(--ink); }
.invest-source-option-text small { color: var(--muted); }

/* Overview: one total, a continuous metric rail, then wide analytical canvases. */
.view-layout--stats { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.view-layout--stats > * { grid-column: 1 / -1; }
.dash-header { min-height: 170px; padding: 30px 36px; }
.dash-title { color: var(--ink); font-size: 1.4rem; font-weight: 500; letter-spacing: -0.035em; }
.dash-header .hero-sub { margin-bottom: 0; }
.dash-kpi-grid { margin-top: -25px; border: 1px solid var(--line-strong); border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; background: var(--surface); position: relative; }
.view-layout--stats > .dash-kpi-grid { margin-top: calc(-1 * (var(--gap) + 1px)); }
.dash-header { border-radius: 12px 12px 0 0; }
.dash-kpi { min-height: 110px; padding: 20px 28px; border-color: var(--line); }
.dash-kpi-label { color: var(--muted); font-size: 0.8rem; }
.dash-kpi-value { margin-top: 10px; color: var(--ink); font: 500 clamp(1.2rem, 1.9vw, 1.75rem)/1.3 var(--font-data); letter-spacing: -0.04em; }
.dash-kpi--liquid .dash-kpi-label::before, .dash-kpi--invest .dash-kpi-label::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 7px 2px 0; border-radius: 50%; background: var(--cash); }
.dash-kpi--invest .dash-kpi-label::before { background: var(--invest); }
.dash-kpi--liquid .dash-kpi-value { color: var(--cash); }
.dash-kpi--invest .dash-kpi-value { color: var(--invest); }
.dash-kpi--gain .dash-kpi-value, .portfolio-stat--gain strong { color: var(--income); }
.dash-kpi-link { color: var(--accent); min-height: 24px; }
.dash-currency, .dash-month, .dash-portfolio, .dash-projection, .dash-wealth-projection { background: var(--surface); }
.view-layout--stats > .dash-currency { display: block; }
.dash-currency > * { min-width: 0; max-width: 100%; }
.currency-panel-head { display: flex; gap: 20px; }
.currency-panel-head > div:first-child { display: block; }
.currency-panel-head .day-hint { white-space: normal; width: auto; margin-top: 10px; }
.dash-currency .currency-basket { margin-block: 18px; }
.dash-currency .currency-form { display: block; }
.dash-currency .currency-input-row { display: flex; flex-wrap: wrap; }
.dash-currency .currency-help { margin-bottom: 0; }
.fx-rate-card { background: var(--surface-inset); border: 1px solid var(--line); padding: 12px 16px; border-radius: 7px; }
.fx-rate-card strong { color: var(--ink); }
.fx-rate-label, .fx-rate-card small { color: var(--muted); }
.currency-basket { border-color: var(--line); }
.currency-basket-item { background: var(--surface-inset); border: 0; }
.currency-code { color: var(--cash); background: var(--accent-dim); border-color: var(--line); }
.currency-basket-name, .currency-basket-item > small { color: var(--muted); }
.currency-basket-item > strong { color: var(--ink); }
.currency-input-shell { box-sizing: border-box; width: 100%; min-width: 0; background: var(--surface-inset); border: 1px solid var(--field-border); border-radius: 7px; }
.currency-input-shell input { color: var(--ink); background: transparent; border: 0; }
.currency-input-shell > span { flex: 0 0 auto; color: var(--muted); background: transparent; }
.currency-transfer-panel { border-color: var(--line-strong); background: var(--surface-inset); }
.currency-transfer-head span, .currency-transfer-row p { color: var(--muted); }
.currency-transfer-row, .currency-transfer-row > * { min-width: 0; max-width: 100%; }
.currency-transfer-row .currency-input-shell { width: 100%; }
.month-stats, .portfolio-stats, .projection-stats, .tools-derived { background: var(--surface-inset); border-color: var(--line); border-radius: 8px; }
.month-stat, .portfolio-stat, .projection-stat, .tools-derived-item { padding: 16px; border-color: var(--line); }
.month-stat > span, .portfolio-stat > span, .projection-stat > span, .tools-derived-item > span { color: var(--muted); font-size: 0.75rem; }
.month-stat > span, .month-goal-label, .dash-recent-footer-title { text-transform: none; letter-spacing: 0; }
.month-stat strong, .portfolio-stat strong, .projection-stat strong, .tools-derived-item strong { color: var(--ink); font-size: 1.05rem; line-height: 1.5; letter-spacing: -0.025em; }
.projection-stat { flex-direction: column; gap: 10px; }
.projection-stat strong { text-align: left; }
.month-stat--highlight { background: var(--accent-dim); }
.month-compare, .month-tracking, .month-goal-hint, .month-goal-label { color: var(--muted); font-size: 0.8rem; }
.month-tracking--warn { color: var(--total); }
.month-goal { background: none; border-color: var(--line); }
.month-goal-track { background: var(--surface-hover); }
.month-goal-fill { background: var(--cash); box-shadow: none; }
.dash-section-label { border-bottom: 1px solid var(--line); padding: 6px 0 14px; margin: 10px 0 -4px; }
.dash-section-desc { color: var(--muted); font-size: 0.8rem; }
.dashboard-analysis { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.view-layout--stats .dashboard-analysis > .panel { grid-column: auto; }
.chart-stage, .wealth-chart-shell, .tools-chart-stage { border: 0; border-radius: 0; background: transparent; padding: 0; box-shadow: none; }
.chart-stage::before { display: none; }
.chart-wrap { min-width: 0; }
.dash-chart-main .chart-wrap--tall { height: 440px; }
.dash-chart-side .chart-wrap, .chart-wrap--categories { height: 220px; }
.chart-wrap--portfolio { height: 430px; }
.chart-wrap--wealth-proj, .chart-wrap--tools-proj { height: 420px; }
.portfolio-breakdown { border-color: var(--line); background: none; }
.portfolio-stat--sub { padding: 12px 0; }
.broker-source-rail { background: var(--surface-inset); border-color: var(--line); border-radius: 8px; }
.broker-source-rail strong { color: var(--ink); }
.broker-source-rail .btn { color: var(--ink); }
.broker-source-kicker, .broker-source-rail p { color: var(--muted); }
.portfolio-manual-disclosure { border-color: var(--line); background: var(--surface-inset); }
.portfolio-manual-disclosure summary { color: var(--muted); padding-block: 14px; min-height: 44px; }
.portfolio-manual-disclosure summary:hover, .portfolio-manual-disclosure[open] summary { color: var(--ink); background: var(--surface-hover); }
.portfolio-conversion-preview { color: var(--muted); }
.wealth-horizon { background: none; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 5px; font-size: 0.75rem; padding: 6px 10px; }
#wealth-proj-hint { color: var(--muted); border-color: var(--line-strong); }
.wealth-proj-summary { background: var(--total-dim); border: 1px solid color-mix(in srgb, var(--total) 22%, var(--line)); border-radius: 9px; padding: 28px; margin: 24px 0 28px; }
.wealth-proj-hero > span, .wealth-proj-mini-item > span, .wealth-proj-delta { color: var(--muted); }
.wealth-proj-hero { background: transparent; padding: 0 28px 0 0; border-color: var(--line); }
.wealth-proj-hero::after { display: none; }
.wealth-proj-hero > strong { color: var(--total); font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 4vw, 3.75rem); letter-spacing: -0.06em; }
.wealth-proj-mini-item { border-color: color-mix(in srgb, var(--total) 15%, var(--line)); background: transparent; }
.wealth-proj-mini-item > strong { color: var(--ink); font-family: var(--font-data); }
.wealth-proj-mini-item:nth-child(2) strong { color: var(--cash); }
.wealth-chart-head { border-bottom: 1px solid var(--line); margin-bottom: 24px; padding-bottom: 18px; }
.wealth-chart-head > div:first-child > strong { color: var(--ink); }
.wealth-chart-kicker, .wealth-chart-scale-note { color: var(--muted); }
.wealth-chart-scale-note { font-size: 0.75rem; gap: 10px; }
.wealth-chart-scale-note span:first-child { color: var(--total); }
.wealth-chart-scale-note span:last-child { color: var(--cash); }
.dash-wealth-projection > .chart-note { color: var(--muted); border-color: var(--invest); background: color-mix(in srgb, var(--invest) 3%, var(--surface)); }
.wealth-chart-chip { background: var(--surface-inset); border-color: var(--line); font-size: 0.75rem; border-radius: 6px; }
.wealth-chart-chip strong { color: inherit; }
.wealth-chart-chip--cash { color: var(--cash); }
.wealth-chart-chip--invest { color: var(--invest); }
.dash-recent-footer { background: transparent; border-color: var(--line); }
.dash-recent-footer-title, .entry-label { color: var(--ink); }
.dash-recent-footer-sub, .entry-meta { color: var(--muted); }
.recent-strip li, .entry-item { background: var(--surface); border-color: var(--line); }

/* Portfolio: a holdings ledger and a clearly separate order-free editor. */
.allocation-masthead { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: var(--panel-pad); }
.allocation-heading p { color: var(--muted); font-size: 0.875rem; }
.allocation-totals { border-color: var(--line); }
.allocation-total { border-color: var(--line); }
.allocation-total span { color: var(--muted); }
.allocation-total strong { color: var(--ink); }
.allocation-accounted strong { color: var(--ink); }
.allocation-total--primary strong { color: var(--total); font-family: var(--font-display); font-size: clamp(2rem, 3vw, 3rem); letter-spacing: -0.05em; }
.allocation-refresh-btn, .allocation-sync-btn { min-height: 44px; background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); border-radius: 7px; padding: 10px 14px; }
.allocation-refresh-btn:hover, .allocation-sync-btn:hover { background: var(--surface-hover); border-color: var(--accent); }
.allocation-market-dot { animation: none; }
.allocation-board-head p, .holdings-ledger-head p { font-size: 0.8rem; }
.allocation-bar { height: 64px; border: 0; border-radius: 5px; background: var(--surface-inset); box-shadow: none; }
.allocation-segment { transition: none; border-color: var(--surface); }
.allocation-segment span { color: #0b141b; text-shadow: none; }
[data-theme="light"] .allocation-segment span { color: #fff; }
.allocation-ticks { color: var(--muted); font-size: 0.72rem; }
.allocation-legend-name, .allocation-legend-value strong { color: var(--ink); }
.allocation-legend-value small { color: var(--muted); }
.allocation-legend-dot[style*="#82aaff"] { background: var(--asset-action); }
.allocation-legend-dot[style*="#50d2b4"] { background: var(--asset-etf); }
.allocation-legend-dot[style*="#f3bd62"] { background: var(--asset-crypto); }
.allocation-legend-dot[style*="#b9a0ff"] { background: var(--asset-bond); }
.allocation-legend-dot[style*="#e88975"] { background: var(--asset-realestate); }
.allocation-legend-dot[style*="#93a4ba"] { background: var(--asset-other); }
.holdings-table-wrap { scrollbar-color: var(--line-strong) var(--surface-inset); }
.holdings-table-head { color: var(--muted); font-size: 0.75rem; background: var(--surface-inset); padding-inline: 10px; }
.holding-row { padding: 16px 10px; border-color: var(--line); }
.holding-row:hover { background: var(--surface-inset); }
.holding-identity strong { font-size: 0.875rem; }
.holding-identity small, .holding-number small { color: var(--muted); font-size: 0.7rem; }
.holding-number { color: var(--ink); font-size: 0.8rem; }
.holding-number--value { font-size: 0.9rem; }
.holding-type { color: var(--muted); font-size: 0.75rem; }
.holding-action-btn { width: 32px; height: 36px; border-color: var(--line-strong); color: var(--muted); }
.holding-symbol-mark, .asset-result-logo, .asset-selected-logo { background: var(--surface-inset); border-color: var(--line-strong); }
.asset-composer { background: var(--surface); border-color: var(--line-strong); position: sticky; top: 84px; }
.asset-composer-head > div > span { color: var(--muted); font: 500 0.75rem var(--font); }
.asset-composer-close { min-width: 36px; min-height: 36px; background: var(--surface-inset); color: var(--ink); border-color: var(--line-strong); }
.asset-source-tabs { border-color: var(--line); background: var(--surface-inset); border-radius: 7px; padding: 4px; }
.asset-source-tab { min-height: 40px; color: var(--muted); font-size: 0.75rem; }
.asset-source-tab.active { background: var(--surface); color: var(--accent); box-shadow: inset 0 0 0 1px var(--line-strong); border-radius: 4px; }
.asset-search-shell { border: 1px solid var(--field-border); background: var(--surface-inset); border-radius: 7px; min-height: 46px; }
.asset-search-shell > span, .asset-search-shell input { color: var(--ink); }
.asset-search-results { background: var(--surface); border-color: var(--line-strong); box-shadow: 0 12px 30px #0002; }
.asset-result { background: var(--surface); color: var(--ink); border-color: var(--line); min-height: 68px; }
.asset-result:hover, .asset-result:focus-visible { background: var(--accent-dim); }
.asset-result strong { font-size: 0.8rem; }
.asset-result small, .asset-result-price, .asset-selected small { color: var(--muted); font-size: 0.7rem; }
.asset-selected { background: var(--accent-dim); border-color: var(--line-strong); }
.asset-selected button { color: var(--accent); min-height: 32px; }
.asset-value-preview { background: var(--surface-inset); border-color: var(--line); border-radius: 8px; }
.asset-value-preview span, .asset-value-preview small { color: var(--muted); }
.asset-value-preview strong { color: var(--ink); }
.holdings-empty { background: var(--surface-inset); border: 1px dashed var(--line-strong); border-radius: 8px; padding: 24px; }
.holdings-empty strong { color: var(--ink); }
.holdings-empty p { color: var(--muted); }
.holdings-empty-mark { color: var(--accent); background: var(--accent-dim); }

/* Simulation and settings preserve every original control and value. */
.tools-hero, .settings-header { background: transparent; border: 0; padding: 4px 0 12px; min-height: 0; }
.tools-hero-lead { color: var(--muted); font-size: 0.875rem; max-width: 72ch; }
.tools-shell { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); align-items: start; gap: var(--gap); }
.tools-form { position: static; }
#tools-form .tools-form-grid--budget { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tools-outcome { position: sticky; top: 84px; gap: var(--gap); }
.tools-block-title { font-size: 1.15rem; }
.tools-form-block + .tools-form-block { margin-top: 28px; padding-top: 28px; border-color: var(--line); }
.tools-input-wrap { background: var(--surface-inset); border: 1px solid var(--field-border); border-radius: 7px; }
.tools-input-wrap .amount-input { background: transparent !important; border: 0 !important; font-size: 1rem; }
.tools-input-suffix { color: var(--muted); background: transparent; border-color: var(--line); }
.tools-input-wrap .tools-input-suffix { min-width: 34px; padding-inline: 8px; font-size: 0.75rem; }
.tools-return-toggle { border-color: var(--line-strong); background: var(--surface-inset); }
.tools-return-pill span { color: var(--muted); min-height: 44px; border-color: var(--line); }
.tools-return-pill:has(input:checked) span { color: var(--accent); background: var(--accent-dim); box-shadow: inset 0 -2px var(--accent); }
.tools-return-pill:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.tools-bonus-split, .tools-bonus-split-head { color: var(--muted); background: transparent; border-color: var(--line); }
.tools-bonus-split-head strong { color: var(--ink); }
.tools-bonus-split-ends { color: var(--muted); }
.tools-bonus-slider { background: var(--line-strong); accent-color: var(--accent); }
.tools-kpis { background: none; border: 0; border-radius: 0; }
.tools-kpi { border-color: var(--line); padding: 18px 20px; }
.tools-kpi > span { color: var(--muted); font-size: 0.75rem; }
.tools-kpi > strong { color: var(--ink); font-family: var(--font-data); font-weight: 500; }
.tools-kpi--hero { background: var(--total-dim); border: 1px solid color-mix(in srgb, var(--total) 25%, var(--line)); border-radius: 9px; padding: 24px; margin-bottom: 12px; }
.tools-kpi--hero > strong { color: var(--total); font-family: var(--font-display); font-size: clamp(2rem, 3.7vw, 3.4rem); letter-spacing: -0.06em; }
.tools-outcome-hint { color: var(--muted); font-size: 0.8rem; line-height: 1.6; }
.tools-chart-panel { padding: var(--panel-pad); }
.fixed-costs-total { background: var(--surface-inset); border: 1px solid var(--line); color: var(--muted); border-radius: 8px; }
.fixed-costs-total strong { color: var(--ink); }
.settings-goal-help { background: var(--surface-inset); color: var(--muted); border-left-color: var(--accent); }
.type-tabs { background: var(--surface-inset); border: 1px solid var(--line-strong); }
.type-tab { color: var(--muted); min-height: 44px; border-color: var(--line); }
.type-tab.active { color: var(--accent); background: var(--accent-dim); }
.msg--error, .currency-transfer-preview--error, .tools-derived--negative, .day-balance--negative strong, .month-stat-value--down, .tools-kpi .tools-kpi-value--loss { color: var(--expense) !important; }
.msg--ok, .month-stat-value--up, .tools-kpi .tools-kpi-value--gain { color: var(--save) !important; }
.month-stat-value--warn { color: var(--total) !important; }

/* Sign-in: same product, a quieter single-purpose surface. */
.auth-screen { background: var(--bg); padding: 32px 20px; }
.auth-card { max-width: 520px; padding: clamp(24px, 4vw, 44px); background: var(--surface); border-color: var(--line-strong); }
.auth-card h1 { color: var(--ink); font: 500 clamp(1.8rem, 4vw, 2.6rem)/1.2 var(--font-display); letter-spacing: -0.055em; }
.auth-identity { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.auth-identity .interface-eyebrow { margin: 0; }
.auth-card > p, .demo-box-note, .demo-box-creds { color: var(--muted); }
.auth-toggle { background: var(--surface-inset); border: 1px solid var(--line); padding: 4px; border-radius: 8px; }
.demo-box { background: var(--surface-inset); border-color: var(--line); }
.demo-box-title, .demo-box code { color: var(--ink); }
.onboarding-step-dot { background: var(--surface-inset); color: var(--muted); border-color: var(--line-strong); }
.onboarding-step-dot.active { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }
.onboarding-step-line { background: var(--line); }

@media (min-width: 1200px) {
  /* The currency card occupies a narrow dashboard column. Keep the optional
     broker transfer form inside that column instead of letting its three-column
     desktop layout overflow and stretch the neighbouring month card. */
  .view-layout--stats > .dash-currency,
  .view-layout--stats > .dash-month { align-self: start; }
  .dash-currency .currency-transfer-panel { width: 100%; box-sizing: border-box; }
  .dash-currency .currency-transfer-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
  .dash-currency .currency-transfer-row .btn { width: 100%; }

  .view-layout--day { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
  .view-layout--day .view-heading, .view-layout--day > .panel.panel-hero { grid-column: 1 / -1; grid-row: auto; }
  .view-layout--day > .panel:not(.panel-hero):not(.chart-panel) { grid-column: 1; grid-row: 3; }
  .view-layout--day > .chart-panel { grid-column: 2; grid-row: 3; align-self: start; position: sticky; top: 84px; }
  .view-layout--day .chart-wrap--compact { height: 350px; }
  .view-layout--stats > .dash-currency { grid-column: 1 / 5; }
  .view-layout--stats > .dash-month { grid-column: 5 / -1; }
  .dash-currency .currency-panel-head { flex-direction: column; gap: 12px; }
  .dash-currency .fx-rate-card { display: grid; grid-template-columns: 1fr auto; text-align: left; gap: 6px 12px; padding: 12px; }
  .dash-currency .fx-rate-label { justify-content: start; }
  .dash-currency .fx-rate-card small { grid-column: 1 / -1; }
  .dash-currency .currency-input-row { flex-wrap: wrap; }
  .dash-currency .currency-input-shell { flex: 1 1 120px; }
  .dash-currency .currency-input-row .btn { flex: 1 1 auto; font-size: 0.8rem; }
  .dash-month .month-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 28px; }
  .dash-month .month-stat { min-height: 108px; }
  .dashboard-analysis { grid-template-columns: minmax(0, 1.85fr) minmax(320px, 1fr); align-items: stretch; }
  .view-layout--stats .dashboard-analysis > .dash-chart-main { grid-column: 1; grid-row: 1 / 3; }
  .view-layout--stats .dashboard-analysis > .dash-chart-side, .view-layout--stats .dashboard-analysis > .dash-chart-categories { grid-column: 2; }
  .dashboard-analysis .dash-chart-main { display: flex; flex-direction: column; }
  .dashboard-analysis .dash-chart-main .chart-stage { flex: 1; display: flex; }
  .dashboard-analysis .dash-chart-main .chart-wrap--tall { flex: 1; height: auto; min-height: 500px; }
  .dashboard-analysis .chart-panel-head { flex-direction: column; gap: 8px; }
  .allocation-workbench { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--gap); }
}
@media (min-width: 1600px) {
  .allocation-workbench { grid-template-columns: minmax(0, 1fr) 380px; }
  .dashboard-analysis { grid-template-columns: minmax(0, 2.2fr) minmax(340px, 1fr); }
}
@media (max-width: 1199px) {
  .view-layout--day { display: flex; flex-direction: column; }
  .view-layout--day .panel-hero, .view-layout--day > .panel { grid-column: auto; }
  .view-layout--day .chart-wrap--compact { height: 300px; }
  .asset-composer { position: static; }
  .tools-outcome { position: static; }
}
@media (min-width: 768px) {
  .daily-grid:not(.daily-grid--short) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .daily-grid:not(.daily-grid--short) .daily-row { border-right: 0; }
  .daily-grid:not(.daily-grid--short) .daily-row:nth-child(odd) { border-right: 1px solid var(--line); }
  .daily-grid--short { grid-template-columns: 1fr; }
  .daily-grid--short .daily-row { border: 0; border-bottom: 1px solid var(--line); }
  .daily-grid--short .daily-row:last-child { border-bottom: 0; }
}
@media (max-width: 1023px) {
  .tools-shell { grid-template-columns: minmax(0, 1fr); }
  .view-layout--settings { display: flex; flex-direction: column; }
  .view-layout--settings > .panel { width: 100%; }
  .allocation-workbench { display: flex; flex-direction: column; }
  .asset-composer { width: 100%; }
}
@media (max-width: 767px) {
  :root { --gap: 18px; --panel-pad: 20px; --nav-h: calc(72px + env(safe-area-inset-bottom)); }
  .topbar { min-height: 76px; padding: 14px 18px; gap: 12px; }
  .brand { gap: 9px; }
  .brand-mark { width: 32px; height: 32px; }
  .brand-name { font-size: 1rem; }
  .brand-signature { font-size: 0.6rem; }
  .topbar-actions { gap: 8px; }
  .user-chip { display: none; }
  .topbar .theme-toggle { width: 42px; padding: 0; }
  .topbar [data-theme-label] { display: none; }
  #btn-logout { padding: 8px; border: 0; }
  .bottom-nav { position: fixed; top: auto; bottom: 0; left: 0; right: 0; min-height: var(--nav-h); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-strong); border-bottom: 0; background: var(--surface); }
  .bottom-nav .nav-btn { min-width: 0; min-height: 60px; flex-direction: column; gap: 5px; padding: 8px 2px; font-size: 0.65rem; line-height: 1.2; }
  .bottom-nav .nav-btn svg { width: 20px; height: 20px; }
  .bottom-nav .nav-btn::before { top: -4px; bottom: auto; left: 24%; right: 24%; height: 2px; border-radius: 0; }
  .shell main { padding: 24px 16px calc(var(--nav-h) + 30px); }
  #main-content { padding: 24px 16px calc(var(--nav-h) + 30px); }
  .view-heading { display: block; margin-bottom: 2px; }
  .view-heading h1, .allocation-heading h1, .tools-hero-title { font-size: 1.65rem; }
  .view-heading p { margin-top: 10px; font-size: 0.8rem; }
  .interface-eyebrow { margin-bottom: 8px; }
  .panel-title, .chart-panel-head .panel-title, .dash-zone-head .panel-title { font-size: 1.18rem; }
  .hero-total, .panel-hero--compact .hero-total { font-size: clamp(2rem, 8vw, 3rem); }
  .dash-header { display: block; padding: 24px 20px; min-height: 0; }
  .dash-header .hero-total { margin: 22px 0 0; }
  .dash-kpi-grid { margin-top: -19px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-kpi { min-height: 116px; padding: 18px; }
  .dash-kpi-value { font-size: clamp(1rem, 4.25vw, 1.35rem); }
  .dash-kpi-label { font-size: 0.75rem; }
  .kpi-breakdown { display: grid; grid-template-columns: 1fr; }
  .kpi-breakdown > span { min-width: 0; padding: 10px 0; border: 0; display: flex; justify-content: space-between; gap: 12px; font-size: 0.8rem; }
  .day-header { align-items: start; }
  .day-nav-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; }
  .day-nav-btn { font-size: 0.7rem; padding-inline: 8px; }
  .day-picker { min-width: 0; width: 100%; padding-inline: 6px; }
  .daily-row { min-height: 64px; }
  .daily-row input.daily-input, .field input, .field select, .asset-search-shell input { font-size: 16px; }
  .day-form-summary { grid-template-columns: 1fr; }
  .day-total { border-top: 1px solid var(--line); }
  .chart-panel-head, .tools-chart-head { flex-direction: column; }
  .dash-chart-main .chart-wrap--tall { height: 340px; }
  .chart-wrap--portfolio, .chart-wrap--wealth-proj, .chart-wrap--tools-proj { height: 320px; }
  .currency-panel-head { flex-direction: column; gap: 16px; }
  .currency-input-row { flex-wrap: wrap; }
  .currency-input-shell { flex: 1 1 160px; }
  .currency-input-row .btn { flex: 1 1 auto; }
  .month-stats, .portfolio-stats, .projection-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .month-stat, .portfolio-stat, .projection-stat { padding: 14px 12px; }
  .portfolio-stats .portfolio-stat:last-child { grid-column: 1 / -1; }
  .wealth-proj-summary { padding: 20px; }
  .wealth-proj-hero { padding: 0 0 20px; border-right: 0; }
  .wealth-proj-hero > strong { font-size: clamp(1.8rem, 7vw, 2.7rem); }
  .wealth-proj-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wealth-chart-head, .wealth-chart-allocation { align-items: start; flex-direction: column; }
  .wealth-chart-chip { width: 100%; }
  .wealth-chart-scale-note { display: block; font-size: 0.7rem; }
  .wealth-chart-scale-note span { display: block; }
  .tools-kpi { padding: 16px 10px; }
  .tools-kpi > strong { font-size: 1rem; }
  .tools-kpi--hero { padding: 22px; }
  .tools-kpi--hero > strong { font-size: 2rem; }
  .tools-hero-top { align-items: start; }
  .allocation-totals { grid-template-columns: 1fr 1fr; }
  .allocation-total--primary { grid-column: 1 / -1; }
  .allocation-board-head { flex-wrap: wrap; }
  .allocation-accounted { text-align: left; }
  .holdings-ledger-head { flex-wrap: wrap; }
  .holdings-table-head, .holding-row { min-width: 740px; }
  .holding-action-btn { width: 34px; min-height: 40px; }
  .allocation-bar { height: 52px; }
  .allocation-segment span { font-size: 0.6rem; }
  .asset-composer.is-open { display: block; }
  .auth-card { padding: 24px; }
}
@media (max-width: 374px) {
  .shell main { padding-inline: 12px; }
  #main-content { padding-inline: 12px; }
  :root { --panel-pad: 16px; }
  .topbar { padding-inline: 12px; }
  .brand-signature { gap: 4px; }
  .dash-kpi { padding: 16px 12px; }
  .topbar-actions { gap: 3px; }
  .allocation-legend { grid-template-columns: 1fr; }
  .allocation-legend-row:nth-child(even), .allocation-legend-row:nth-child(odd) { border-left: 0; padding-inline: 0; }
  .wealth-proj-mini { grid-template-columns: 1fr; }
}
/* Investment instrument: engraved metal, semantic light and inset chart canvases.
   No decorative market prices, invented trends or looping animations. */
.brand-mark { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--total) 20%, transparent)); }
.bottom-nav .nav-btn.active {
  background: linear-gradient(0deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 85%);
}
.bottom-nav .nav-btn.active::before { box-shadow: 0 -2px 12px color-mix(in srgb, var(--accent) 35%, transparent); }
.dash-header, .view-layout--day .panel-hero, .allocation-masthead {
  background: linear-gradient(115deg, var(--surface) 48%, color-mix(in srgb, var(--total) 8%, var(--surface)));
  box-shadow: inset 0 1px var(--metal-highlight), 0 16px 48px var(--panel-shadow);
  isolation: isolate;
}
.dash-header::before, .view-layout--day .panel-hero::before {
  content: ""; display: block; position: absolute; inset: -90px -120px -140px 48%;
  width: auto; height: auto; border: 0; border-radius: 0; transform: none;
  background: repeating-radial-gradient(ellipse at 100% 15%, transparent 0 16px, color-mix(in srgb, var(--total) 13%, transparent) 17px, transparent 18px 27px);
  mask-image: linear-gradient(90deg, transparent, #000);
  pointer-events: none; z-index: -1; opacity: 0.8;
}
.dash-header::after, .panel-hero::after { width: 100%; height: 1px; background: linear-gradient(90deg, var(--total), transparent 65%); }
.dash-hero-total, .hero-total, .wealth-proj-hero > strong, .allocation-total--primary strong {
  text-shadow: 0 0 28px color-mix(in srgb, var(--total) 18%, transparent);
}
.dash-kpi--liquid { --metric-light: var(--cash); }
.dash-kpi--invest { --metric-light: var(--invest); }
.dash-kpi--gain { --metric-light: var(--income); }
.dash-kpi:is(.dash-kpi--liquid, .dash-kpi--invest, .dash-kpi--gain) {
  background: linear-gradient(160deg, color-mix(in srgb, var(--metric-light) 5%, transparent), transparent 70%);
  box-shadow: inset 0 2px color-mix(in srgb, var(--metric-light) 60%, transparent);
}
.dash-kpi--liquid .dash-kpi-label::before, .dash-kpi--invest .dash-kpi-label::before {
  box-shadow: 0 0 9px color-mix(in srgb, var(--metric-light) 70%, transparent);
}
.chart-panel, .dash-wealth-projection, .tools-chart-panel { --panel-accent: var(--total); }
.dash-portfolio { --panel-accent: var(--invest); }
.dash-chart-side { --panel-accent: var(--spending); }
.dash-chart-categories { --panel-accent: var(--income); }
.chart-panel, .dash-portfolio, .dash-wealth-projection, .tools-chart-panel {
  border-color: color-mix(in srgb, var(--panel-accent) 18%, var(--line));
  background: linear-gradient(145deg, color-mix(in srgb, var(--panel-accent) 4%, var(--surface)), var(--surface) 38%);
  box-shadow: inset 0 1px var(--metal-highlight), 0 14px 38px var(--panel-shadow);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.chart-panel-head, .tools-chart-head { border-left: 2px solid var(--panel-accent, var(--total)); padding-left: 14px; }
.chart-stage, .tools-chart-stage {
  background: radial-gradient(ellipse at 50% 0, color-mix(in srgb, var(--panel-accent, var(--total)) 5%, transparent), transparent 72%), var(--chart-well);
  border: 1px solid color-mix(in srgb, var(--panel-accent, var(--total)) 13%, var(--line));
  border-radius: 10px; padding: clamp(8px, 1vw, 16px);
  box-shadow: inset 0 1px 12px #00000008;
}
.chart-stage > .chart-wrap { width: 100%; }
.chart-stage canvas { border-radius: 4px; }
.wealth-chart-head { border-color: color-mix(in srgb, var(--total) 25%, var(--line)); }
.wealth-chart-chip--cash { background: color-mix(in srgb, var(--cash) 7%, var(--surface)); border-color: color-mix(in srgb, var(--cash) 24%, var(--line)); }
.wealth-chart-chip--invest { background: color-mix(in srgb, var(--invest) 7%, var(--surface)); border-color: color-mix(in srgb, var(--invest) 24%, var(--line)); }
.wealth-proj-summary {
  background: linear-gradient(110deg, var(--total-dim), color-mix(in srgb, var(--total) 4%, var(--surface)));
  border-color: color-mix(in srgb, var(--total) 34%, var(--line));
  box-shadow: inset 0 1px color-mix(in srgb, var(--total) 24%, transparent);
}
.allocation-bar { position: relative; box-shadow: 0 8px 26px var(--panel-shadow); }
.allocation-bar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, #ffffff24, transparent 50%, #00000014); pointer-events: none; }
.holding-row { transition: background-color 160ms ease, box-shadow 160ms ease; }
.holding-row:hover, .holding-row:focus-within { background: color-mix(in srgb, var(--invest) 5%, var(--surface)); box-shadow: inset 2px 0 var(--invest); }
.btn-primary { box-shadow: inset 0 1px #ffffff30, 0 3px 12px color-mix(in srgb, var(--action) 9%, transparent); }
@media (hover: hover) {
  .chart-panel:hover, .dash-portfolio:hover, .dash-wealth-projection:hover, .tools-chart-panel:hover {
    border-color: color-mix(in srgb, var(--panel-accent) 42%, var(--line));
    box-shadow: inset 0 1px var(--metal-highlight), 0 12px 36px var(--panel-shadow);
  }
}
[data-theme="light"] .dash-hero-total, [data-theme="light"] .hero-total,
[data-theme="light"] .wealth-proj-hero > strong, [data-theme="light"] .allocation-total--primary strong { text-shadow: none; }
/* Pearl light mode: stronger labels without changing the dark theme. */
[data-theme="light"] :is(.dash-kpi-label, .month-stat > span, .portfolio-stat > span,
  .projection-stat > span, .wealth-proj-mini-item > span, .tools-kpi > span,
  .holding-type, .holding-number small, .allocation-total > span) { font-weight: 500; }
[data-theme="light"] :is(.dash-kpi-value, .portfolio-stat strong, .month-stat strong,
  .wealth-proj-mini-item > strong, .holding-number--value) { font-weight: 600; }
[data-theme="light"] .allocation-bar::after { background: linear-gradient(180deg, #ffffff10, transparent 50%, #0000000a); }
@media (max-width: 599px) {
  .chart-panel-head, .tools-chart-head { padding-left: 10px; }
  .chart-stage, .tools-chart-stage { padding: 8px 4px; border-radius: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}