/* V2 is presentation-only; the classic stylesheet remains the rollback shell. */
:root {
  color-scheme: light;
  --page: #f5f7f8; --surface: #fff; --surface-soft: #edf2f3;
  --border: #d6e0e2; --border-strong: #b7c8cb; --text: #10252b;
  --text-muted: #5d7076; --ink: #10252b; --text-on-ink: #f4fbfc;
  --accent: #087f95; --accent-soft: #d9f0f3; --focus: #0b6b82;
  --positive: #137a4b; --positive-soft: #dff3e8; --negative: #b34843;
  --negative-soft: #f8e5e3; --warning: #826114; --warning-soft: #f7eed2;
  --partial: #276782; --partial-soft: #e0eef3; --error: #b34843;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --radius: 16px;
  --pill: 999px; --touch: 44px; --gutter: 16px; --content: 1100px;
  --nav: 68px;
}
:root[data-theme="dark"] { color-scheme: dark; --page:#101719; --surface:#182225; --surface-soft:#202d30; --border:#304247; --border-strong:#4a6065; --text:#edf7f7; --text-muted:#a8babd; --ink:#0d2026; --text-on-ink:#f4ffff; --accent:#6dd2df; --accent-soft:#1d4249; --focus:#8be8f2; --positive:#75d6a3; --positive-soft:#1a3e2d; --negative:#f09b91; --negative-soft:#482a29; --warning:#e6ca78; --warning-soft:#41371e; --partial:#91cae0; --partial-soft:#203d48; --error:#f09b91; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme:dark; --page:#101719; --surface:#182225; --surface-soft:#202d30; --border:#304247; --border-strong:#4a6065; --text:#edf7f7; --text-muted:#a8babd; --ink:#0d2026; --text-on-ink:#f4ffff; --accent:#6dd2df; --accent-soft:#1d4249; --focus:#8be8f2; --positive:#75d6a3; --positive-soft:#1a3e2d; --negative:#f09b91; --negative-soft:#482a29; --warning:#e6ca78; --warning-soft:#41371e; --partial:#91cae0; --partial-soft:#203d48; --error:#f09b91; } }
*,*::before,*::after { box-sizing:border-box; }
html { font-size:100%; -webkit-text-size-adjust:100%; }
body { min-width:280px; margin:0; background:var(--page); color:var(--text); font:1rem/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; overflow-x:hidden; }
a,button,input,select { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.skip-link { position:absolute; left:-9999px; top:0; z-index:20; padding:8px 16px; background:var(--focus); color:#fff; }
.skip-link:focus { left:0; }
.app-header { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:60px; padding:8px var(--gutter); border-bottom:1px solid var(--border); background:var(--surface); }
.brand { display:inline-flex; align-items:center; gap:12px; min-height:var(--touch); color:var(--text); text-decoration:none; }
.brand-mark { display:grid; width:34px; height:34px; place-items:center; border-radius:10px; background:var(--accent); color:#fff; font-weight:800; }
.brand>span:last-child { display:grid; line-height:1.1; }.brand-name { font-weight:800; }.brand-context { margin-top:3px; color:var(--text-muted); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; }
.header-actions,.header-actions form { display:flex; align-items:center; gap:4px; margin:0; }.theme-toggle,.logout-button { min-width:var(--touch); min-height:var(--touch); padding:8px 12px; border:0; border-radius:8px; background:transparent; color:var(--text-muted); font:inherit; cursor:pointer; }.theme-toggle:hover,.logout-button:hover { background:var(--surface-soft); color:var(--text); }.theme-toggle-label { display:none; margin-left:5px; font-size:.875rem; }
.page { width:100%; max-width:var(--content); margin:0 auto; padding:32px var(--gutter); }.page-with-bottom-nav { padding-bottom:calc(var(--nav) + 32px); }.page-intro { margin-bottom:24px; }.eyebrow { margin:0 0 4px; color:var(--text-muted); font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; } h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:0; font-size:1.7rem; line-height:1.15; letter-spacing:-.035em; } h2 { margin-bottom:0; font-size:1.2rem; line-height:1.2; } h3 { margin:0; font-size:1rem; }.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.page-intro-copy,.panel-copy,.settings-copy { margin:8px 0 0; color:var(--text-muted); }.panel { margin-bottom:24px; padding:24px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }.section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; }.section-mark,.section-count { display:grid; min-width:30px; height:30px; padding:0 8px; place-items:center; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-weight:800; }.hero { position:relative; overflow:hidden; margin-bottom:24px; padding:32px 24px; border-radius:22px; background:var(--ink); color:var(--text-on-ink); }.hero-kicker { margin-bottom:12px; color:#a8c5c8; font-weight:650; }.hero-value { margin:0 0 16px; color:var(--text-on-ink); font-size:2.6rem; font-weight:800; letter-spacing:-.06em; line-height:1.05; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }.hero-label-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }.hero-label-detail,.hero-meta,.hero-note { color:#a8c5c8; font-size:.8rem; }.hero-freshness,.status-label { display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:var(--pill); font-size:.75rem; font-weight:750; }.hero-freshness-detail { font-weight:500; }.status-dot { width:6px; height:6px; flex:0 0 auto; border-radius:50%; background:currentColor; }.status-complete { background:var(--positive-soft); color:var(--positive); }.status-stale { background:var(--warning-soft); color:var(--warning); }.status-partial { background:var(--partial-soft); color:var(--partial); }.status-unavailable { background:var(--negative-soft); color:var(--negative); }.hero-meta { margin:20px 0 0; padding-top:12px; border-top:1px solid #ffffff2e; }.hero-draw { display:flex; justify-content:space-between; gap:12px; margin:20px 0 0; padding-top:16px; border-top:1px solid #ffffff2e; color:#a8c5c8; }.hero-draw strong { color:var(--text-on-ink); font-size:1.15rem; }.currency-choice { display:flex; gap:4px; }.currency-choice button { min-width:44px; min-height:var(--touch); padding:6px 9px; border:1px solid var(--border-strong); border-radius:var(--pill); background:transparent; color:var(--text-muted); font:inherit; font-size:.7rem; font-weight:800; cursor:pointer; }.hero-currency-choice button { border-color:#ffffff45; color:#a8c5c8; }.currency-choice button[aria-pressed="true"] { border-color:var(--accent); background:var(--accent); color:#fff; }.hero-currency-panel[hidden] { display:none; }
.metrics-grid { display:grid; gap:12px; margin-bottom:24px; }.metric-card { padding:20px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }.metric-card-accent { border-top:3px solid var(--accent); }.metric-label { margin-bottom:8px; color:var(--text-muted); font-size:.75rem; font-weight:750; text-transform:uppercase; }.metric-value,.return-primary { margin:0; font-size:2rem; font-weight:800; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }.metric-note { margin:8px 0 0; color:var(--text-muted); font-size:.8rem; }.growth-tone-positive,.pnl-tone-positive { color:var(--positive); }.growth-tone-negative,.pnl-tone-negative { color:var(--negative); }.growth-tone-zero,.pnl-tone-zero { color:var(--text); }.growth-tone-unavailable,.pnl-tone-unavailable { color:var(--text-muted); }
.stat-list,.status-details { margin:0; }.stat-list>div,.status-details>div { display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid var(--border); }.stat-list dt,.status-details dt { color:var(--text-muted); }.stat-list dd,.status-details dd { max-width:60%; margin:0; text-align:right; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }.timeframe-controls { display:flex; gap:4px; margin:16px 0 20px; overflow-x:auto; padding:2px; }.timeframe-controls a { display:inline-flex; min-width:44px; min-height:44px; align-items:center; justify-content:center; padding:8px 12px; border:1px solid var(--border-strong); border-radius:var(--pill); color:var(--text-muted); font-size:.75rem; font-weight:750; text-decoration:none; white-space:nowrap; }.timeframe-controls a[aria-current="page"],.timeframe-controls a[aria-pressed="true"] { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }.chart-frame { position:relative; min-height:220px; }.chart-frame canvas { display:block; width:100%!important; height:220px!important; }.chart-caption,.history-caption,.panel-copy,.return-period,.return-status { color:var(--text-muted); font-size:.875rem; }.history-unavailable,.return-unavailable,.return-error,.return-loading { padding:16px; border:1px solid var(--border); border-radius:8px; background:var(--surface-soft); color:var(--text-muted); }.history-unavailable-title,.return-unavailable-title { margin-bottom:4px; color:var(--text); font-weight:750; }.history-unavailable p:last-child,.return-unavailable p:last-child { margin-bottom:0; }
.owner-group { padding:12px 0; }.owner-group+.owner-group { border-top:1px solid var(--border); }.owner-name { display:flex; justify-content:space-between; gap:8px; }.owner-value { margin:4px 0 12px; font-size:1.2rem; font-weight:750; }.account-list,.next-list,.snapshot-accessible-list { list-style:none; margin:0; padding:0; }.account-row { display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-top:1px solid var(--border); }.account-name,.account-value { margin:0; font-weight:700; }.account-broker { margin:3px 0 0; color:var(--text-muted); font-size:.875rem; }.account-row-value { flex-shrink:0; text-align:right; }.account-value { font-variant-numeric:tabular-nums; }.next-list li+li { border-top:1px solid var(--border); }.next-list a { display:grid; grid-template-columns:1fr auto; min-height:54px; align-items:center; padding:12px 0; color:var(--text); text-decoration:none; }.next-list small { grid-column:1; color:var(--text-muted); }.link-arrow { grid-column:2; grid-row:1/span 2; color:var(--accent); font-size:1.2rem; }.bottom-nav { position:fixed; right:0; bottom:0; left:0; z-index:10; padding-bottom:env(safe-area-inset-bottom,0px); border-top:1px solid var(--border); background:var(--surface); }.bottom-nav ul { display:flex; max-width:var(--content); margin:0 auto; padding:0 8px; list-style:none; }.bottom-nav li { flex:1; min-width:0; }.bottom-nav a { position:relative; display:flex; min-height:var(--nav); flex-direction:column; align-items:center; justify-content:center; gap:2px; color:var(--text-muted); font-size:.7rem; font-weight:700; text-decoration:none; }.bottom-nav a[aria-current="page"] { color:var(--accent); }.bottom-nav a[aria-current="page"]::before { position:absolute; top:0; width:28px; height:3px; border-radius:0 0 3px 3px; background:var(--accent); content:""; }
.button { min-height:var(--touch); padding:8px 16px; border:0; border-radius:8px; background:var(--accent); color:#fff; font:inherit; font-weight:750; cursor:pointer; }.button-secondary { border:1px solid var(--accent); background:transparent; color:var(--accent); }.button-danger { background:var(--negative); }.form-error,.form-success { margin-bottom:16px; padding:12px; border-radius:8px; }.form-error { border:1px solid var(--error); background:var(--negative-soft); color:var(--error); }.form-success { border:1px solid var(--positive); background:var(--positive-soft); color:var(--positive); }.form-error p { margin:0; }.settings-form,.forecast-form,.forecast-action-form { display:grid; gap:12px; }.settings-form label,.forecast-form label,.forecast-action-form label { color:var(--text-muted); font-size:.875rem; font-weight:650; }.settings-form input,.forecast-form input,.forecast-form select,.forecast-action-form select,.forecast-selector select { width:100%; min-height:var(--touch); padding:8px 12px; border:1px solid var(--border-strong); border-radius:8px; background:var(--surface-soft); color:var(--text); font:inherit; }.forecast-selector-row { display:flex; gap:8px; }.forecast-selector-row select { flex:1; }.form-field { display:grid; gap:4px; }.field-help,.field-error { margin:0; color:var(--text-muted); font-size:.875rem; }.field-error { color:var(--error); }.forecast-create { margin-top:20px; padding-top:16px; border-top:1px solid var(--border); }.forecast-create summary { min-height:var(--touch); padding:8px 0; color:var(--accent); font-weight:750; cursor:pointer; }.forecast-actions { display:grid; gap:20px; margin-top:24px; padding-top:20px; border-top:1px solid var(--border); }.forecast-danger-form { padding-top:16px; border-top:1px solid var(--border); }.checkbox-label { display:flex; gap:8px; min-height:var(--touch); align-items:center; }.forecast-addition-list { list-style:none; margin:0; padding:0; }.forecast-addition-row { padding:16px 0; border-top:1px solid var(--border); }.forecast-addition-summary { color:var(--text-muted); }.forecast-addition-summary strong { color:var(--text); }.table-scroll { overflow-x:auto; }.portfolio-table,.forecast-table { width:100%; min-width:780px; border-collapse:collapse; font-size:.875rem; }.portfolio-table th,.portfolio-table td,.forecast-table th,.forecast-table td { padding:12px 8px; border-top:1px solid var(--border); text-align:left; vertical-align:top; }.portfolio-table .numeric,.forecast-table td:not(:first-child) { text-align:right; font-variant-numeric:tabular-nums; }.portfolio-table small { display:block; margin-top:3px; color:var(--text-muted); font-size:.75rem; font-weight:400; }.portfolio-disclaimer { color:var(--text-muted); font-size:.875rem; }.empty-state { color:var(--text-muted); }.login-shell { max-width:420px; margin:32px auto 0; padding:32px 24px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }.login-intro { color:var(--text-muted); }.login-form { display:grid; gap:8px; }.login-form label { margin-top:8px; color:var(--text-muted); font-size:.875rem; font-weight:650; }.login-form input { min-height:var(--touch); padding:8px 12px; border:1px solid var(--border-strong); border-radius:8px; background:var(--surface-soft); color:var(--text); font:inherit; }
@media (min-width:640px) { :root { --gutter:24px; }.theme-toggle-label { display:inline; }.metrics-grid { grid-template-columns:repeat(3,1fr); }.forecast-actions { grid-template-columns:1fr 1fr; }.forecast-danger-form { padding-top:0; border-top:0; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }