:root {
  --bg: #f6f7f4;
  --card: #ffffff;
  --ink: #171a17;
  --muted: #747a74;
  --line: #e5e8e2;
  --accent: #1f6f4a;
  --accent-soft: #e8f3ec;
  --income: #357e57;
  --outflow: #bd6b5d;
  --outflow-muted: #c78770;
  --outflow-warm: #b9966a;
  --save: #5b8f9b;
  --invest: #7489af;
  --save-invest: #7489af;
  --sankey-surface: #ffffff;
  --sankey-border: #e4e9e4;
  --danger: #a84444;
  --warning: #9a6b22;
  --warning-soft: #fbf1dc;
  --surface-subtle: #fbfcfa;
  --control: #f4f6f2;
  --premium-surface: #eef7f0;
  --premium-line: #cfe2d4;
  --shadow: 0 10px 30px rgba(30, 38, 31, 0.05);
}

/* Investment overview: make the portfolio feel like a place to orient first,
   then investigate. The hierarchy stays calm, but the account and holding
   rows now expose the useful next action instead of reading like a ledger. */
.investment-support-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 16px; margin-top: 16px; }
.investment-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.investment-card-heading .spending-context { margin: 5px 0 0; }
.allocation-heading-mark { color: var(--invest); background: color-mix(in srgb, var(--invest) 13%, var(--card)); border-color: color-mix(in srgb, var(--invest) 25%, var(--line)); }
.investment-accounts-card, .allocation-card { margin-top: 0; }
.investment-accounts { gap: 0; margin-top: 16px; }
.investment-account-row { min-height: 78px; padding: 13px 0; border-radius: 13px; transition: background .16s ease, transform .16s ease; }
.investment-account-row:hover { padding-inline: 10px; color: var(--ink); background: var(--surface-subtle); transform: translateX(2px); }
.investment-account-leading { display: flex; align-items: center; min-width: 0; gap: 11px; }
.investment-account-mark { display: grid; flex: 0 0 auto; width: 38px; height: 38px; place-items: center; border: 1px solid #d5e5d8; border-radius: 12px; color: var(--accent); background: linear-gradient(145deg, var(--accent-soft), var(--card)); font-size: 14px !important; font-weight: 780 !important; }
.investment-account-copy { display: grid; min-width: 0; gap: 3px; }
.investment-account-copy strong { overflow: hidden; font-size: 14px; letter-spacing: -.015em; text-overflow: ellipsis; white-space: nowrap; }
.investment-account-copy > span { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.investment-account-meter { display: block; width: min(145px, 100%); height: 4px; overflow: hidden; margin-top: 3px; border-radius: 99px; background: color-mix(in srgb, var(--accent-soft) 72%, var(--line)); }
.investment-account-meter b { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.investment-account-value { gap: 4px; }
.investment-account-value b { font-size: 15px; letter-spacing: -.025em; }
.investment-account-value small { font-size: 10px; }
.investment-account-tracking { color: var(--muted) !important; }
.investment-account-chevron { color: var(--muted); font-size: 20px; font-style: normal; }
.investment-movers-card { margin-top: 16px; padding: 24px; min-width: 0; }
.investment-movers-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 3px 2px 4px; }
.investment-movers-heading h2 { margin: 0; align-self: center; color: var(--ink); font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.investment-movers-heading .spending-context { margin: 5px 0 0; }
.investment-mover-tabs { display: inline-flex; flex: 0 0 auto; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-subtle); }
.investment-mover-tabs button { min-width: 66px; padding: 7px 11px; border: 0; border-radius: 999px; color: var(--muted); background: transparent; cursor: pointer; font: inherit; font-size: 11px; font-weight: 720; }
.investment-mover-tabs button.active { color: var(--ink); background: var(--card); box-shadow: 0 2px 8px rgba(24, 33, 25, .12); }
.investment-movers-grid { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 18px; }
.investment-mover-group { min-width: 0; }
.investment-mover-group h3 { display: none; }
.investment-mover-group > div { display: grid; grid-auto-flow: column; grid-auto-columns: 176px; gap: 12px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--muted) transparent; }
.investment-mover-row { scroll-snap-align: start; }
.investment-mover-navigation { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 10px; color: var(--muted); }
.investment-mover-navigation > div { display: flex; gap: 6px; }
.investment-mover-navigation button { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: transparent; font: inherit; font-size: 22px; cursor: pointer; }
.investment-mover-navigation button:disabled { opacity: .35; cursor: default; }
.investment-mover-row { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 36px auto; align-items: center; gap: 12px; min-width: 0; min-height: 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: var(--surface-subtle); text-align: left; cursor: pointer; font: inherit; transition: border-color .16s ease, background .16s ease; }
.investment-mover-heading { display: grid; min-width: 0; gap: 3px; }
.investment-mover-heading strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.investment-mover-heading span { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.investment-mover-sparkline { display: block; width: 100%; height: 36px; color: var(--accent); }
.investment-mover-row.is-negative .investment-mover-sparkline { color: var(--outflow); }
.investment-mover-change { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--accent); font-size: 14px; font-weight: 780; white-space: nowrap; }
.investment-mover-row.is-negative .investment-mover-change { color: var(--outflow); }
.investment-mover-change small { color: inherit; font-size: 10px; }
.investment-mover-row:hover { border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); background: color-mix(in srgb, var(--accent-soft) 68%, var(--card)); }
.investment-movers-empty { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
html[data-theme="dark"] .investment-mover-row:hover { background: #222a24; }
.holdings-card { margin-top: 16px; }
.holdings-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 21px 22px 14px; }
.holdings-head .spending-context { margin: 5px 0 0; }
.holdings-list { border-top: 1px solid var(--line); }
.holding-row { min-height: 78px; padding-block: 15px; }
.holding-row:hover { background: var(--surface-subtle); }
.holding-copy { gap: 4px; }
.holding-ticker { font-size: 14px !important; }
.holding-weight { margin-top: 6px; }
.holding-weight > i { width: min(120px, 100%); height: 5px; background: color-mix(in srgb, var(--accent-soft) 76%, var(--line)); }
.holding-weight > i b { background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #a5cfad)); }
.position-value b { font-size: 15px; }
.position-value small { font-weight: 720; }
html[data-theme="dark"] .investment-account-mark { border-color: var(--line); background: #253027; }
html[data-theme="dark"] .investment-account-row:hover, html[data-theme="dark"] .holding-row:hover { background: #222a24; }
html[data-theme="dark"] .investment-account-meter, html[data-theme="dark"] .holding-weight > i { background: #303a32; }
@media (max-width: 760px) {
  .investment-support-grid { grid-template-columns: 1fr; gap: 14px; }
  .investment-movers-card { padding: 22px 20px; }
  .investment-movers-heading { gap: 12px; flex-wrap: wrap; padding: 0; }
  .investment-mover-tabs button { min-width: 58px; padding-inline: 8px; }
  .investment-movers-grid { grid-template-columns: 1fr; gap: 18px; }
  .investment-mover-group > div { grid-auto-columns: 44%; gap: 10px; }
  .investment-mover-navigation button { width: 44px; height: 44px; }
  .investment-account-row { min-height: 72px; }
  .investment-account-mark { width: 35px; height: 35px; border-radius: 11px; }
  .investment-account-meter { width: min(120px, 100%); }
  .holdings-head { padding: 19px 16px 13px; }
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101214;
  --card: #181b1f;
  /* Avoid pure white against charcoal. A soft mineral white maintains an
     accessible hierarchy without making every heading compete for attention. */
  --ink: #edf0f2;
  --muted: #9aa3ad;
  --line: #353b43;
  /* Green is reserved for actions and genuinely positive financial signals.
     Supporting surfaces stay neutral so those signals retain their meaning. */
  --accent: #5bc486;
  --accent-soft: #252a30;
  --income: #67cf91;
  --outflow: #df887d;
  --outflow-muted: #c28b82;
  --outflow-warm: #b79b75;
  --save: #7fa9c2;
  --invest: #91a9d9;
  --save-invest: #91a9d9;
  --sankey-surface: #1d2126;
  --sankey-border: #3b424b;
  --danger: #ed918a;
  --warning: #e0b36b;
  --warning-soft: #352d22;
  --surface-subtle: #20242a;
  --control: #282d34;
  --premium-surface: #1d3025;
  --premium-line: #386248;
  --text-primary: #edf0f2;
  --text-secondary: #b2bac3;
  --text-tertiary: #7f8994;
  --shadow: 0 10px 30px rgba(0,0,0,.16);
}
html[data-theme="dark"] .notice { border-color: #364239; background: #202720; box-shadow: 0 12px 34px rgba(0,0,0,.3); }html[data-theme="dark"] .notice[data-tone="success"] { border-color: #3f6148; background: #1f2a22; color: #a8cfb1; }html[data-theme="dark"] .notice[data-tone="error"] { border-color: #694842; background: #2c211f; color: #e7aaa3; }
* { box-sizing: border-box; }
body:has(dialog[open]) { overflow: hidden; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--bg); }
.auth-screen { isolation: isolate; position: relative; min-height: 100dvh; display: grid; place-items: center; overflow: hidden; padding: 28px 20px; background: #f5f7f3; }
.auth-halo { position: absolute; z-index: -1; width: min(72vw, 760px); aspect-ratio: 1; border-radius: 50%; filter: blur(2px); opacity: .68; }
.auth-halo-one { top: -44%; left: -23%; background: radial-gradient(circle, #d9ecdf 0, rgba(217,236,223,0) 68%); }.auth-halo-two { right: -34%; bottom: -48%; background: radial-gradient(circle, #e5eee2 0, rgba(229,238,226,0) 69%); }
.auth-card { width: min(430px, 100%); padding: 34px; border: 1px solid rgba(218,224,216,.92); border-radius: 28px; background: rgba(255,255,255,.88); box-shadow: 0 28px 72px rgba(25,42,29,.1), 0 2px 5px rgba(25,42,29,.025); backdrop-filter: blur(18px); }
.auth-brand { padding: 0; margin-bottom: 24px; }.auth-card h1 { margin: 10px 0 12px; font-size: clamp(34px, 8vw, 43px); line-height: .99; letter-spacing: -.065em; }.auth-card h1 em { color: var(--accent); font-style: normal; }
.auth-kicker { display: flex; align-items: center; gap: 7px; color: #5f7564; font-size: 10px; font-weight: 760; letter-spacing: .12em; }.auth-kicker i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px #e8f3ec; }
.auth-intro { max-width: 320px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }.auth-preview { position: relative; min-height: 148px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; margin: 28px 0 23px; padding: 18px; border: 1px solid #e8eee8; border-radius: 18px; background: linear-gradient(140deg, #f6faf6 0%, #fff 80%); }.auth-preview > div { position: relative; z-index: 1; display: grid; gap: 3px; }.auth-preview span { color: #7d877e; font-size: 9px; font-weight: 760; letter-spacing: .11em; }.auth-preview strong { font-size: 28px; letter-spacing: -.055em; }.auth-preview small { color: var(--accent); font-size: 11px; font-weight: 700; }.auth-preview svg { position: absolute; right: 0; bottom: 0; left: 0; width: 100%; height: 82px; }
.auth-divider { display: flex; align-items: center; gap: 11px; margin-bottom: 17px; color: #8c938c; font-size: 10px; font-weight: 680; letter-spacing: .06em; text-transform: uppercase; }.auth-divider::before, .auth-divider::after { content: ''; height: 1px; flex: 1; background: #e9ede8; }.google-signin-wrap { min-height: 42px; display: flex; justify-content: center; }.google-signin-wrap > div { width: 100% !important; }.google-signin-wrap iframe { width: 100% !important; }.auth-signup-note { margin: 9px 0 0; color: var(--muted); text-align: center; font-size: 11px; line-height: 1.4; }.auth-message { min-height: 0; margin: 0; color: var(--danger); text-align: center; font-size: 12px; line-height: 1.4; }.auth-message:not(:empty) { min-height: 18px; margin-top: 12px; }.auth-note { margin: 16px 0 0; color: #899089; text-align: center; font-size: 11px; }.auth-note span { color: var(--accent); font-size: 15px; vertical-align: -1px; }
.auth-access-code { display: grid; gap: 6px; margin: 0 0 17px; color: #59675c; font-size: 11px; font-weight: 720; }.auth-access-code-field { position: relative; display: block; }.auth-access-code input { width: 100%; border: 1px solid #dce4dd; border-radius: 11px; padding: 11px 58px 11px 12px; color: var(--ink); background: #fbfcfa; font: inherit; font-size: 14px; font-weight: 550; letter-spacing: .04em; }.auth-access-code input:focus { outline: 0; border-color: #8fb89a; box-shadow: 0 0 0 3px #e7f2e9; }.auth-access-code-submit { position: absolute; top: 5px; right: 5px; bottom: 5px; min-width: 42px; border: 0; border-radius: 8px; padding: 0 10px; color: #fff; background: var(--accent); font-size: 12px; font-weight: 760; }.auth-access-code-submit:hover { background: #185d3d; }.auth-access-code-submit:focus-visible { outline: 3px solid #b9d9c2; outline-offset: 2px; }.auth-access-code small { color: #808980; font-size: 10px; font-weight: 550; }
.auth-access-code-status { min-height: 0; margin: 0; color: var(--muted); text-align: center; font-size: 11px; line-height: 1.4; }.auth-access-code-status:not(:empty) { min-height: 18px; margin: -8px 0 12px; }
.demo-preview-button { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; margin-top: 12px; padding: 12px 16px; border: 1px solid #dfe6df; border-radius: 12px; background: #fff; color: #36523e; font-weight: 720; font-size: 13px; transition: border-color .18s, background .18s, transform .18s; }.demo-preview-button:hover { border-color: #b9cfbe; background: #f7fbf8; }.demo-preview-button:active { transform: translateY(1px); }.demo-preview-button span { color: var(--accent); font-size: 17px; line-height: 0; }.auth-demo-note { margin: 8px 0 -1px; color: #8b928b; text-align: center; font-size: 11px; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 230px; padding: 28px 18px; background: #f0f2ee; border-right: 1px solid var(--line); display: flex; flex-direction: column; z-index: 10; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 750; padding: 0 8px 28px; }
.brand-home { width: 100%; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 10px; }.brand-home:hover { color: var(--accent); }.brand-home:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 36%, transparent); outline-offset: 2px; }
.cashflow-controls { display: flex; align-items: center; gap: 7px; }.diagram-expand { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--muted); cursor: pointer; }.diagram-expand svg { width: 15px; height: 15px; }.diagram-expand:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 24%, var(--line)); }.diagram-expand:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 32%, transparent); outline-offset: 2px; }
.cashflow-payroll > div { flex: 1; grid-template-columns: minmax(0, 1fr) auto; }.cashflow-payroll p { max-width: 58ch; }
@media (min-width: 700px) { .cashflow-payroll { width: 100%; max-width: none; }.cashflow-payroll-mark { width: 28px; height: 28px; border-radius: 9px; }.cashflow-payroll > div { flex: 1 1 auto; }.cashflow-payroll-chevron { margin-left: 2px; font-size: 18px; } }
.brand-mark { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--ink); color: white; font-size: 14px; }
.nav { display: grid; gap: 5px; }
.nav-item { border: 0; background: transparent; color: #4d534d; border-radius: 12px; padding: 11px 12px; text-align: left; display: flex; align-items: center; gap: 10px; }
.nav-item:hover, .nav-item.active { background: white; color: var(--ink); }
.nav-item.active { box-shadow: 0 2px 10px rgba(20,30,20,.04); }
.sidebar-footer { margin-top: auto; }
.tiny { color: var(--muted); font-size: 11px; text-align: center; margin-top: 10px; }
.main { margin-left: 230px; padding: 36px 46px 64px; max-width: 1440px; }
.topbar { display: flex; justify-content: space-between; gap: 24px; align-items: center; margin-bottom: 28px; }
.profile-back { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 5px -7px; padding: 5px 7px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 650; }.profile-back:hover { color: var(--ink); background: rgba(110,125,112,.09); }.profile-back svg { width: 15px; height: 15px; }
h1,h2,h3,p { margin-top: 0; }
h1 { font-size: 30px; margin-bottom: 0; letter-spacing: -0.03em; }
h2 { font-size: 20px; margin-bottom: 0; letter-spacing: -0.02em; }
h3 { font-size: 16px; }
.eyebrow { font-size: 12px; color: var(--muted); margin-bottom: 5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; }
.top-actions { display: flex; gap: 10px; }
input[type="month"], .search { border: 1px solid var(--line); background: white; border-radius: 12px; padding: 10px 12px; color: var(--ink); outline: none; }
.primary { border: 0; background: var(--ink); color: white; padding: 11px 15px; border-radius: 12px; font-weight: 650; box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.primary:hover { transform: translateY(-1px); }
.secondary { background: white; color: var(--ink); }
.text-button { border: 0; background: transparent; color: var(--accent); font-weight: 650; padding: 4px; }
.notice { position: fixed; z-index: 55; right: 18px; bottom: 18px; max-width: min(390px, calc(100vw - 36px)); padding: 10px 13px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--card) 94%, var(--control)); color: var(--ink); box-shadow: 0 12px 34px rgba(20,30,21,.13); font-size: 12px; font-weight: 650; line-height: 1.4; }.notice[data-tone="success"] { border-color: #cfe2d4; background: #f1f8f3; color: #216b46; }.notice[data-tone="error"] { border-color: #efcfca; background: #fff6f4; color: #9c4944; }.notice[data-tone="info"] { color: var(--muted); }
.notice[data-tone="info"]::before, .notice[data-tone="success"]::before, .notice[data-tone="error"]::before { display: inline-block; margin-right: 7px; font-weight: 800; }.notice[data-tone="info"]::before { color: var(--muted); content: '•'; }.notice[data-tone="success"]::before { color: var(--accent); content: '✓'; }.notice[data-tone="error"]::before { color: var(--danger); content: '!'; }
.app-status { position: fixed; z-index: 54; right: 18px; bottom: 72px; display: inline-flex; align-items: center; gap: 8px; max-width: min(390px, calc(100vw - 36px)); padding: 8px 11px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--card) 94%, var(--control)); color: var(--muted); box-shadow: 0 9px 24px rgba(20,30,21,.09); font-size: 11px; font-weight: 650; }.app-status::before { content: ''; width: 7px; height: 7px; border: 2px solid #bdd0c1; border-top-color: var(--accent); border-radius: 50%; animation: clarity-spin .7s linear infinite; }@keyframes clarity-spin { to { transform: rotate(360deg); } }
.loading-skeleton { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(220px, .7fr); gap: 18px; }.skeleton-hero, .skeleton-stack, .skeleton-insight { border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: var(--shadow); overflow: hidden; }.skeleton-hero { min-height: 310px; padding: 24px; }.skeleton-copy { display: grid; gap: 12px; }.skeleton-copy i, .skeleton-copy b, .skeleton-copy em, .skeleton-chart, .skeleton-stack > div, .skeleton-insight { background: linear-gradient(100deg, var(--card) 15%, color-mix(in srgb, var(--line) 72%, var(--card)) 45%, var(--card) 75%); background-size: 220% 100%; animation: clarity-skeleton 1.35s ease-in-out infinite; }.skeleton-copy i { width: 74px; height: 11px; border-radius: 99px; }.skeleton-copy b { width: min(54%, 250px); height: 43px; border-radius: 9px; }.skeleton-copy em { width: 145px; height: 12px; border-radius: 99px; }.skeleton-chart { height: 142px; margin-top: 39px; border-radius: 14px; }.skeleton-stack { display: grid; align-content: center; gap: 28px; padding: 24px; }.skeleton-stack > div { height: 55px; border-radius: 10px; }.skeleton-insight { min-height: 126px; }.loading-skeleton .skeleton-insight { grid-column: span 1; }@keyframes clarity-skeleton { to { background-position: -120% 0; } }.initial-loading .view.active { display: none; }
.hidden { display: none !important; }
.view { display: none; }
.view.active { display: block; }
.investment-hero { margin-bottom: 16px; }.investment-total-card { display: flex; align-items: center; justify-content: space-between; padding: 25px; }.investment-total-card p { margin: 7px 0 0; color: var(--muted); font-size: 13px; }.investment-total-mark { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 19px; color: var(--accent); background: var(--accent-soft); font-size: 30px; }.investment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.investment-card, .positions-card { padding: 21px; }.allocation-list, .investment-accounts { display: grid; margin-top: 14px; }.allocation-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 11px 0; font-size: 13px; }.allocation-row + .allocation-row, .investment-account-row + .investment-account-row { border-top: 1px solid var(--line); }.allocation-row > div { display: flex; align-items: center; gap: 8px; min-width: 0; }.allocation-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--accent); }.allocation-1 { background: #7ea98b; }.allocation-2 { background: #d5a75f; }.allocation-3 { background: #b88692; }.allocation-4 { background: #9ca9bd; }.allocation-row strong, .investment-account-row b, .position-row b { font-variant-numeric: tabular-nums; }.allocation-row i { grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 99px; background: #edf0eb; }.allocation-row i b { display: block; height: 100%; border-radius: inherit; background: var(--accent); }.investment-account-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 14px 0; }.investment-account-row div { display: grid; gap: 3px; min-width: 0; }.investment-account-row strong, .position-row strong { font-size: 13px; }.investment-account-row span, .position-row span { color: var(--muted); font-size: 11px; }.positions-card { margin-top: 16px; }.position-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }.position-row > div:nth-child(2) { min-width: 0; display: grid; gap: 3px; }.position-row strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.position-symbol { display: grid; width: 33px; height: 33px; place-items: center; overflow: hidden; border-radius: 9px; color: var(--accent); background: var(--accent-soft); font-size: 10px; font-weight: 800; }.positions-empty { margin: 17px 0 3px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .7fr); gap: 18px; }
.overview-side-rail { display: grid; align-content: start; gap: 14px; min-width: 0; }
.networth-card { padding: 24px 24px 14px; min-height: 310px; }
.networth-movement-inline { display: grid; gap: 4px; margin-top: 12px; padding: 13px 0 2px; border-top: 1px solid var(--line); }.networth-movement-inline strong { font-size: 16px; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }.networth-movement-inline p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; }.networth-movement-inline[data-tone="positive"] strong { color: var(--accent); }.networth-movement-inline[data-tone="watch"] strong { color: #a16a28; }
.balance-sheet-card { display: block; align-self: start; padding: 21px 22px; }.balance-sheet-card .overview-glance-values { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 13px; }.balance-sheet-card .overview-glance-values div, .balance-sheet-card .overview-glance-values div + div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; min-width: 0; padding: 11px 0; border-left: 0; border-bottom: 1px solid var(--line); }.balance-sheet-card .overview-glance-values strong { flex: 0 0 auto; overflow: visible; font-size: clamp(19px, 1.7vw, 24px); text-overflow: clip; white-space: nowrap; }.balance-sheet-card p { margin: 13px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.card-label { color: var(--muted); font-size: 13px; font-weight: 600; }
.hero-number { font-size: clamp(38px, 5vw, 62px); font-weight: 760; letter-spacing: -0.055em; margin-top: 9px; }
.hero-number.small { font-size: 40px; }
.delta { min-height: 36px; margin-top: 6px; color: var(--accent); font-size: 13px; font-weight: 650; line-height: 1.4; }
.line-chart { height: 150px; margin-top: 18px; }
.line-chart svg { width: 100%; height: 100%; overflow: visible; }
.split-card { padding: 24px; display: grid; align-content: center; gap: 28px; }
.networth-insights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }.networth-insight { min-height: 126px; padding: 20px 22px; }.networth-insight strong { display: block; margin-top: 8px; font-size: 24px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }.networth-insight p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }.runway-insight { display: flex; align-items: center; justify-content: space-between; gap: 16px; }.runway-mark { display: grid; flex: 0 0 auto; width: 42px; height: 42px; place-items: center; border-radius: 14px; color: var(--accent); background: var(--accent-soft); font-size: 23px; }@media (max-width: 760px) { .networth-insights { grid-template-columns: 1fr; gap: 14px; } }
.monthly-review { min-height: auto; border-color: #dfe9e1; background: linear-gradient(135deg, #fbfdfb, #fff); }.goal-insight, .connection-attention { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: auto; }.goal-insight .text-button, .connection-attention .text-button { flex: 0 0 auto; color: var(--accent); font-size: 12px; font-weight: 700; }.goal-progress { display: block; width: min(260px, 100%); height: 6px; margin-top: 13px; overflow: hidden; border-radius: 99px; background: #e7ede7; }.goal-progress b { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .2s ease; }.connection-attention { padding: 20px 22px; border-color: #eadfc8; background: #fffdf8; }.connection-attention strong { font-size: 17px; }
.clarity-checkin { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-top: 18px; padding: 20px 22px; border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); background: linear-gradient(120deg, color-mix(in srgb, var(--accent-soft) 66%, var(--card)), var(--card) 56%); }.clarity-checkin strong { display: block; margin-top: 5px; font-size: 18px; letter-spacing: -.025em; }.clarity-checkin p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }.clarity-checkin .text-button { color: var(--accent); font-size: 12px; font-weight: 750; white-space: nowrap; }.checkin-mark { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 13px; background: var(--accent); color: #fff; font-size: 18px; font-weight: 800; }.clarity-checkin[data-tone="watch"] .checkin-mark { color: #755a1d; background: #f5e4b7; }.clarity-checkin[data-tone="attention"] .checkin-mark { color: #fff; background: var(--danger); }@media (max-width: 620px) { .clarity-checkin { grid-template-columns: auto minmax(0, 1fr); align-items: start; }.clarity-checkin .text-button { grid-column: 2; justify-self: start; padding-left: 0; } }
.overview-guidance { display: grid; gap: 12px; }
.overview-briefing-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 18px; margin-top: 18px; }.overview-movement, .overview-glance { min-height: 122px; padding: 20px 22px; }.overview-movement strong { display: block; margin-top: 8px; font-size: 22px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }.overview-movement p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }.overview-glance-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }.overview-glance-values div { display: grid; gap: 4px; min-width: 0; }.overview-glance-values div + div { border-left: 1px solid var(--line); padding-left: 10px; }.overview-glance-values span { color: var(--muted); font-size: 11px; font-weight: 650; }.overview-glance-values strong { overflow: hidden; font-size: clamp(16px, 2vw, 21px); letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }@media (max-width: 760px) { .overview-briefing-grid { grid-template-columns: 1fr; gap: 14px; } }.overview-movement[data-tone="positive"] strong { color: var(--accent); }.overview-movement[data-tone="watch"] strong { color: #a16a28; }
.overview-story { margin-top: 18px; padding: 20px 22px; }.overview-story-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }.overview-story-heading p { margin: 0; color: var(--muted); font-size: 11px; text-align: right; }.overview-story .overview-glance { min-height: 0; padding: 0; }.overview-story .overview-glance-values { margin-top: 15px; }.overview-goal { margin-top: 18px; }.overview-side-rail .overview-goal { margin-top: 0; padding: 19px 22px; }.overview-side-rail .goal-insight { align-items: flex-start; }.overview-side-rail .goal-insight strong { display: block; margin-top: 7px; font-size: 18px; letter-spacing: -.025em; }.overview-side-rail .goal-insight p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.42; }.overview-side-rail .goal-progress { margin-top: 11px; }
.metric { font-size: 30px; font-weight: 720; margin-top: 7px; letter-spacing: -.035em; }
.divider { height: 1px; background: var(--line); }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin: 34px 2px 14px; }
.csp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.csp-card { padding: 18px; }
.csp-title { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 13px; font-weight: 680; }
.csp-amount { font-size: 23px; font-weight: 720; letter-spacing: -.03em; margin: 16px 0 4px; }
.csp-sub { font-size: 12px; color: var(--muted); }
.progress { height: 6px; border-radius: 99px; background: #edf0eb; overflow: hidden; margin-top: 14px; }
.progress > span { display: block; height: 100%; background: var(--ink); border-radius: inherit; }
.progress.over > span { background: var(--danger); }
.account-list { overflow: hidden; }
.account-preview-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.account-preview-item { display: grid; gap: 4px; padding: 18px; border-right: 1px solid var(--line); }
.account-preview-item:last-child { border-right: 0; }
.account-preview-item > span, .account-preview-item small { color: var(--muted); font-size: 12px; }
.account-preview-item strong { font-size: 20px; letter-spacing: -.03em; }
.account-preview-item.asset { border-top: 3px solid var(--accent); }
.account-preview-item.debt { border-top: 3px solid #d8a1a1; }
.account-preview-details { border-top: 1px solid var(--line); }
.account-preview-details summary { padding: 13px 18px; color: var(--accent); cursor: pointer; font-size: 12px; font-weight: 650; }
.account-preview-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; border-top: 1px solid var(--line); background: var(--line); }
.account-preview-group { display: grid; gap: 4px; padding: 14px 18px; background: #fbfcfa; }
.account-preview-group span { color: var(--muted); font-size: 12px; }
.account-preview-group strong { font-size: 16px; letter-spacing: -.02em; }
.account-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.account-row:last-child { border-bottom: 0; }
.account-meta { display: flex; align-items: center; gap: 12px; min-width: 0; }
.account-icon { width: 36px; height: 36px; border-radius: 11px; background: var(--accent-soft); display: grid; place-items: center; color: var(--accent); font-weight: 800; }
.account-name { font-weight: 650; font-size: 14px; }
.account-inst { font-size: 12px; color: var(--muted); margin-top: 2px; }
.account-balance { font-weight: 720; font-variant-numeric: tabular-nums; }
.spending-head { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.income-card { padding: 22px; }
.target-card { padding: 14px 16px; }
.target-card { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }
.target-summary { font-size: 30px; font-weight: 720; margin: 12px 0; letter-spacing: -.04em; }
.subtle, .legend-note { color: var(--muted); font-size: 12px; }
.sankey-card { margin-top: 16px; padding: 22px; }
.card-top { display: flex; justify-content: space-between; align-items: end; gap: 12px; }
.range-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 2px 16px; }
.range-control { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: #f4f6f2; }
.range-control button { border: 0; border-radius: 7px; padding: 5px 8px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 700; }
.range-control button:hover { color: var(--ink); }
.range-control button.active { background: white; color: var(--ink); box-shadow: 0 1px 4px rgba(30, 38, 31, .1); }
#sankey { min-height: 330px; margin-top: 18px; }
#sankey svg { width: 100%; height: auto; display: block; }
.sankey-label { font-size: 12px; fill: #4a504a; }
.sankey-value { font-size: 12px; font-weight: 700; fill: #191d19; }
.transaction-card { overflow: hidden; }
.transaction-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: #fbfcfa; }
.search { width: min(280px, 42vw); }
.tx-row { display: grid; grid-template-columns: 40px minmax(180px, 1fr) auto 36px; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.tx-row:last-child { border-bottom: 0; }
.tx-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #edf0eb; color: #5b625a; font-weight: 800; }
.tx-icon.fixed { background: #eef2ec; color: #55734e; }
.tx-icon.savings, .tx-icon.investments, .tx-icon.income { background: var(--accent-soft); color: var(--accent); }
.tx-icon.guilt_free { background: #f8f1e7; color: #9b6c32; }
.tx-icon.transfer { background: #f1f2f0; color: #727a72; }
.tx-main { min-width: 0; }
.tx-merchant { font-weight: 640; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-date, .tx-account { color: var(--muted); font-size: 12px; margin-top: 2px; }
.tx-actions { display: grid; justify-items: end; gap: 4px; }
.tx-amount { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.tx-amount.income { color: var(--accent); }
.bucket-select { border: 0; border-radius: 8px; padding: 2px 0; background: transparent; color: var(--muted); font-size: 11px; max-width: 110px; min-width: 0; text-align-last: right; }
.exclude-button { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line); background: white; color: var(--muted); }
.exclude-button.active { background: #f2eeee; color: var(--danger); }
.accounts-summary:empty { display: none; }
.manual-account-prompt { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-top: 16px; padding: 18px 20px; border-style: dashed; background: color-mix(in srgb, var(--card) 94%, #eef5ef); }.manual-account-heading { min-width: 180px; }.manual-account-prompt strong { display: block; margin-top: 4px; font-size: 15px; letter-spacing: -.025em; }.manual-account-options { display: grid; grid-template-columns: repeat(2, minmax(170px, 1fr)); gap: 8px; width: min(490px, 100%); }.manual-account-option { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; text-align: left; transition: border-color .15s ease, background .15s ease, transform .15s ease; }.manual-account-option:hover { transform: translateY(-1px); }.manual-account-option.primary { color: #fff; background: var(--ink); border-color: var(--ink); box-shadow: none; }.manual-account-option.primary:hover { background: color-mix(in srgb, var(--ink) 90%, var(--accent)); }.manual-account-option.secondary { color: var(--ink); background: var(--card); }.manual-account-option.secondary:hover { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); background: var(--accent-soft); }.manual-account-option-icon { display: grid; flex: 0 0 auto; width: 27px; height: 27px; place-items: center; border-radius: 9px; color: var(--accent); background: var(--accent-soft); font-size: 17px; font-weight: 760; }.manual-account-option.primary .manual-account-option-icon { color: var(--ink); background: #dcefe2; }.manual-account-option span:last-child { display: grid; gap: 2px; min-width: 0; }.manual-account-option b { font-size: 12px; }.manual-account-option small { color: inherit; opacity: .68; font-size: 10px; white-space: nowrap; }@media (max-width: 680px) { .manual-account-prompt { align-items: stretch; flex-direction: column; gap: 13px; padding: 16px; }.manual-account-heading { min-width: 0; }.manual-account-options { width: 100%; } }@media (max-width: 420px) { .manual-account-options { grid-template-columns: 1fr; } }
.accounts-summary { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 22px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: white; }
.accounts-summary div { display: grid; gap: 5px; padding: 16px 18px; border-right: 1px solid var(--line); }
.accounts-summary div:last-child { border-right: 0; }
.accounts-summary span { color: var(--muted); font-size: 12px; font-weight: 600; }
.accounts-summary strong { font-size: 22px; letter-spacing: -.03em; }
.debt-payoff-card { margin: -4px 0 18px; padding: 0; border-color: var(--line); background: var(--card); overflow: hidden; }
.debt-plan-summary { display: grid; width: 100%; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 14px 16px; border: 0; background: transparent; color: var(--text); text-align: left; }
.debt-plan-summary:hover { background: rgba(31,111,74,.035); }.debt-plan-summary > span:not(.debt-plan-mark) { display: grid; gap: 2px; }.debt-plan-summary small { color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .08em; }.debt-plan-summary strong { font-size: 14px; font-weight: 680; }.debt-plan-summary b { color: var(--accent); font-size: 12px; font-weight: 700; white-space: nowrap; }.debt-plan-summary b i { display: inline-block; font-size: 18px; font-style: normal; line-height: .5; transform: translateY(1px); }.debt-plan-summary[aria-expanded="true"] b i { transform: translateY(1px) rotate(-90deg); }
.debt-plan-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: #f2f4f0; color: #667068; font-size: 17px; font-weight: 700; }
.debt-plan-expanded { border-top: 1px solid var(--line); padding: 18px; }
.debt-payoff-head h2 { margin: 5px 0 3px; font-size: 25px; letter-spacing: -.04em; }
.debt-payoff-head p { margin: 0; color: var(--muted); font-size: 13px; }
.debt-strategy-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 16px; }
.debt-strategy-choice button { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); text-align: left; }
.debt-strategy-choice button.active { border-color: #c97b68; background: #fff6f3; box-shadow: inset 0 0 0 1px rgba(201,123,104,.12); }
.debt-strategy-choice strong, .debt-strategy-choice span { display: block; }
.debt-strategy-choice strong { font-size: 13px; }.debt-strategy-choice span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.debt-next-step { display: grid; gap: 3px; margin-top: 14px; padding: 11px 12px; border-radius: 11px; background: rgba(177,76,61,.06); }
.debt-next-step > span { color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.debt-next-step p { margin: 0; font-size: 13px; line-height: 1.4; }.debt-next-step strong { font-weight: 750; }
.debt-rate-editor { margin-top: 13px; border-top: 1px solid var(--line); padding-top: 12px; }.debt-rate-editor summary { cursor: pointer; color: var(--accent); font-size: 12px; font-weight: 700; }.debt-rate-editor summary span { color: var(--muted); font-weight: 500; }.debt-rate-editor p { margin: 9px 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.debt-rate-list { display: grid; gap: 8px; }.debt-rate-list label { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text); font-size: 12px; font-weight: 650; }.debt-rate-list label > span { display: inline-flex; align-items: center; gap: 5px; }.debt-rate-list input { width: 74px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; text-align: right; }.debt-rate-list b { color: var(--muted); font-size: 12px; }.debt-rate-save { margin-top: 10px; padding: 7px 10px; border-radius: 8px; font-size: 12px; }
.account-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.account-tile { padding: 19px; }
.account-tile .account-balance { font-size: 25px; margin-top: 18px; }
.account-type { display: inline-block; margin-top: 10px; padding: 4px 8px; border-radius: 999px; background: #f1f3ef; color: var(--muted); font-size: 11px; }
.code-row code { display: inline-block; background: #f1f3ef; padding: 9px 11px; border-radius: 10px; font-size: 12px; }
dialog { border: 0; border-radius: 22px; padding: 0; box-shadow: 0 30px 90px rgba(0,0,0,.2); width: min(520px, calc(100vw - 30px)); max-height: calc(100dvh - 30px); overflow: auto; }
dialog::backdrop { background: rgba(10,15,10,.28); backdrop-filter: blur(3px); }
#targetForm { padding: 28px; }
.dialog-head { display: flex; justify-content: space-between; align-items: flex-start; }
.icon-button { border: 0; background: #f2f3f1; width: 34px; height: 34px; border-radius: 50%; font-size: 20px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 22px 0; }
.form-grid label { color: var(--muted); font-size: 12px; display: grid; gap: 7px; }
.form-grid input { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.dialog-total { padding: 12px 0 18px; color: var(--muted); }
.full { width: 100%; }
.mobile-nav { display: none; }
.empty { padding: 30px; text-align: center; color: var(--muted); }
.chart-empty { min-height: 150px; display: grid; place-content: center; gap: 7px; text-align: center; color: var(--muted); font-size: 12px; }
.chart-empty span { color: var(--accent); font-size: 26px; line-height: 1; }
.onboarding-preview-banner, .onboarding-tab-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 18px; padding: 15px 18px; border: 1px solid #d6e5d9; border-radius: 16px; background: linear-gradient(100deg, #f4faf5, var(--card)); }.onboarding-preview-banner div, .onboarding-tab-cta div { display: grid; gap: 3px; }.onboarding-preview-banner strong, .onboarding-tab-cta strong { font-size: 14px; letter-spacing: -.015em; }.onboarding-preview-banner span, .onboarding-tab-cta span { color: var(--muted); font-size: 11px; line-height: 1.4; }.onboarding-preview-banner .primary, .onboarding-tab-cta .primary { flex: 0 0 auto; white-space: nowrap; }
/* A first-run preview should explain the product—not resemble a stalled load
   or a populated personal account. Preserve the actual information design,
   mute only individual financial facts, and leave feature headings legible. */
html[data-onboarding-preview="true"] .view:not(#profileView) > :not(#onboardingPreviewBanner):not(.onboarding-tab-cta) { pointer-events: none; user-select: none; }
#investmentsView.investment-coverage-preview > :not(.onboarding-tab-cta) { pointer-events: none; user-select: none; }
html[data-onboarding-preview="true"] .view:not(#profileView) :is(.hero-number, .delta, .portfolio-total, .spending-total, .retirement-total, .retirement-spend-number, .overview-glance-values strong, #accountsSummary strong, .account-collection-total strong, .account-collection-head p, .account-inline-balance, .account-balance, .investment-account-row strong, .investment-account-row span, .investment-account-value b, .investment-account-value small, .position-value b, .position-value small, .investment-allocation-row strong, .investment-allocation-row small, .allocation-row strong, .account-name, .account-inst, .position-row strong, .position-row span, .position-symbol, .retirement-milestone strong, .retirement-milestone-detail, .retirement-milestone em, .retirement-lifestyle strong, .retirement-lifestyle small, .retirement-value) { color: var(--muted) !important; background: transparent !important; border-radius: 0; filter: blur(4px); opacity: .58; text-shadow: none; }
#investmentsView.investment-coverage-preview :is(.portfolio-total, .investment-account-row strong, .investment-account-row span, .investment-account-value b, .investment-account-value small, .position-value b, .position-value small, .investment-allocation-row strong, .investment-allocation-row small, .position-symbol) { color: var(--muted) !important; background: transparent !important; border-radius: 0; filter: blur(4px); opacity: .58; text-shadow: none; }
/* Preview copy is product guidance, not a personal financial fact. The broad
   fact-masking selector above contains ID-level selectors, so these resets
   intentionally use !important to keep headings like “Your portfolio” crisp. */
html[data-onboarding-preview="true"] .view:not(#profileView) .preview-copy { color: var(--muted) !important; background: transparent !important; filter: none !important; opacity: 1 !important; text-shadow: none; }
html[data-onboarding-preview="true"] .view:not(#profileView) :is(.hero-number, .portfolio-total, .spending-total, .retirement-total).preview-copy { color: var(--ink) !important; font-size: clamp(24px, 3vw, 36px); letter-spacing: -.04em; }
html[data-onboarding-preview="true"] :is(#balanceSheetCard p, #goalAction, #clarityCheckinAction) { visibility: hidden; }
html[data-onboarding-preview="true"] .view:not(#profileView) :is(.line-chart, .portfolio-chart, .cashflow-sankey, .spending-trend, .retirement-path, .retirement-lifestyle-paths, .spending-transactions #spendingTransactions, .spending-transaction-controls) { filter: grayscale(1) saturate(.25) blur(1.4px) opacity(.38); }
#investmentsView.investment-coverage-preview :is(.portfolio-chart, .investment-donut, .allocation-visual) { filter: grayscale(1) saturate(.25) blur(1.4px); opacity: .38; }
html[data-onboarding-preview="true"] .view:not(#profileView) :is(.range-control, .spending-period-selector, .investment-donut, .spending-donut, .allocation-visual) { opacity: .6; filter: grayscale(.75) saturate(.35); }

/* First-run is guidance, not an empty dashboard. A single composed surface
   gives a new member one clear next action and explains its payoff. */
.fresh-account-hidden { display: none !important; }
.fresh-account-state { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: 48px; align-items: center; min-height: 390px; padding: clamp(30px, 5vw, 68px); border: 1px solid #dbe8de; border-radius: 24px; background: radial-gradient(circle at 100% 0%, #e4f1e7 0, transparent 39%), linear-gradient(135deg, #fbfdfb, var(--card) 72%); box-shadow: var(--shadow); overflow: hidden; }
.fresh-account-copy { max-width: 570px; }.fresh-account-copy h2 { max-width: 560px; margin: 10px 0 12px; font-size: clamp(28px, 3.4vw, 43px); line-height: 1.03; letter-spacing: -.055em; }.fresh-account-copy p { max-width: 530px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.58; }.fresh-account-copy .primary { margin-top: 24px; }.fresh-account-copy small { display: block; max-width: 350px; margin-top: 15px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.fresh-preview-panel { position: relative; min-height: 254px; padding: 20px; overflow: hidden; border: 1px solid #dbe8de; border-radius: 18px; color: var(--accent); background: rgba(255,255,255,.68); }.fresh-preview-head { display: grid; gap: 7px; max-width: 110px; color: var(--muted); font-size: 10px; font-weight: 760; letter-spacing: .1em; }.fresh-preview-head i { display: block; height: 10px; border-radius: 99px; background: #dce9df; }.fresh-preview-head i:last-child { width: 68%; height: 6px; }.fresh-preview-line { display: block; width: 100%; height: 142px; margin-top: 5px; color: var(--accent); }.fresh-preview-caption { display: grid; gap: 3px; margin-top: -4px; color: var(--muted); font-size: 10px; }.fresh-preview-caption strong { color: var(--ink); font-size: 12px; }.fresh-account-compact { grid-template-columns: minmax(0, 1.15fr) minmax(220px, .7fr); min-height: 330px; }.fresh-account-compact .fresh-account-copy { max-width: 620px; }
.fresh-investment-preview { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 20px; }.fresh-donut { width: 110px; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--accent) 0 58%, #80aa8d 58% 80%, #c1d7c6 80% 100%); }.fresh-donut i { display: block; width: 58px; height: 58px; margin: 26px; border-radius: 50%; background: var(--card); }.fresh-preview-rows { display: grid; gap: 11px; }.fresh-preview-rows span { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 7px; align-items: center; color: var(--muted); font-size: 11px; }.fresh-preview-rows span::after { height: 6px; border-radius: 99px; background: #e5eee6; content: ''; }.fresh-preview-rows i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }.fresh-preview-rows span:nth-child(2) i { background: #80aa8d; }.fresh-preview-rows span:nth-child(3) i { background: #c1d7c6; }
.fresh-retirement-preview { display: grid; align-content: end; gap: 10px; }.fresh-retirement-preview > span { color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .06em; }.fresh-retirement-preview svg { width: 100%; height: 142px; }.fresh-retirement-preview > div:last-child { display: flex; justify-content: space-between; align-items: end; gap: 12px; color: var(--muted); font-size: 10px; }.fresh-retirement-preview strong { color: var(--ink); font-size: 11px; }
.fresh-spending-preview > span { color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .08em; }.fresh-bars { display: flex; align-items: end; justify-content: space-between; height: 128px; padding: 18px 5px 0; border-bottom: 1px solid #dce7de; }.fresh-bars i { width: 11%; border-radius: 6px 6px 0 0; background: linear-gradient(to top, #c9dece 0 48%, var(--accent) 48%); }.fresh-bars i:nth-child(1) { height: 39%; }.fresh-bars i:nth-child(2) { height: 65%; }.fresh-bars i:nth-child(3) { height: 53%; }.fresh-bars i:nth-child(4) { height: 76%; }.fresh-bars i:nth-child(5) { height: 59%; }.fresh-bars i:nth-child(6) { height: 88%; }.fresh-spending-preview .fresh-preview-caption { margin-top: 13px; }
.fresh-accounts-preview { display: grid; align-content: center; gap: 0; }.fresh-accounts-preview > div:not(.fresh-preview-label) { display: grid; grid-template-columns: minmax(0, 1fr) 74px; align-items: center; gap: 12px; padding: 14px 0; color: var(--ink); border-bottom: 1px solid #e0e9e1; font-size: 12px; font-weight: 700; }.fresh-accounts-preview > div i { height: 8px; border-radius: 99px; background: #dce9df; }.fresh-accounts-preview > div:nth-child(3) i { width: 78%; justify-self: end; }.fresh-accounts-preview > div:nth-child(4) i { width: 48%; justify-self: end; }.fresh-accounts-preview small { margin-top: 14px; color: var(--muted); font-size: 10px; }
html[data-theme="dark"] .fresh-account-state { border-color: #34523c; background: radial-gradient(circle at 100% 0%, #263d2d 0, transparent 42%), linear-gradient(135deg, #19211c, var(--card) 74%); }html[data-theme="dark"] .fresh-preview-panel { border-color: #395541; background: rgba(24,32,27,.74); }html[data-theme="dark"] .fresh-donut i { background: var(--card); }html[data-theme="dark"] .fresh-preview-rows span::after, html[data-theme="dark"] .fresh-accounts-preview > div i { background: #344a39; }

.fresh-feature-tour { grid-column: 1 / -1; padding-top: 8px; }.fresh-feature-tour-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 12px; }.fresh-feature-tour-head strong { display: block; max-width: 500px; margin-top: 4px; font-size: 15px; letter-spacing: -.02em; }.fresh-feature-tour-head > span { color: var(--muted); font-size: 11px; white-space: nowrap; }.fresh-feature-tour-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #dbe8de; border-radius: 17px; overflow: hidden; background: rgba(255,255,255,.55); }.fresh-feature-card { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-width: 0; padding: 15px 13px; border: 0; border-right: 1px solid #e0e9e1; color: var(--ink); background: transparent; text-align: left; }.fresh-feature-card:last-child { border-right: 0; }.fresh-feature-card:hover { background: #f6faf6; }.fresh-feature-card:focus-visible { position: relative; z-index: 1; outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: -3px; }.fresh-feature-card > span { display: grid; min-width: 0; gap: 3px; }.fresh-feature-card strong { font-size: 12px; }.fresh-feature-card small { color: var(--muted); font-size: 10px; line-height: 1.35; }.fresh-feature-card > b { color: var(--muted); font-size: 18px; font-weight: 400; }.fresh-feature-mark { position: relative; display: block; width: 27px; height: 27px; overflow: hidden; border-radius: 9px; background: var(--accent-soft); }.fresh-feature-mark.donut::before { position: absolute; inset: 5px; border: 5px solid var(--accent); border-right-color: #8cb397; border-bottom-color: #c7decf; border-radius: 50%; content: ''; }.fresh-feature-mark.path::before { position: absolute; right: 4px; bottom: 5px; left: 4px; height: 13px; border-top: 3px solid var(--accent); transform: skewY(-27deg); content: ''; }.fresh-feature-mark.path::after { position: absolute; top: 5px; right: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); content: ''; }.fresh-feature-mark.accounts::before, .fresh-feature-mark.accounts::after { position: absolute; right: 5px; left: 5px; height: 3px; border-radius: 99px; background: var(--accent); content: ''; }.fresh-feature-mark.accounts::before { top: 8px; }.fresh-feature-mark.accounts::after { top: 16px; width: 12px; }.fresh-feature-mark.bars { background: linear-gradient(to top, var(--accent) 0 42%, transparent 42%), linear-gradient(to top, #83aa8d 0 67%, transparent 67%), linear-gradient(to top, #bed5c5 0 85%, transparent 85%); background-repeat: no-repeat; background-size: 5px 19px, 5px 19px, 5px 19px; background-position: 4px 4px, 11px 4px, 18px 4px; }
html[data-theme="dark"] .fresh-feature-tour-grid { border-color: #395541; background: rgba(24,32,27,.5); }.fresh-feature-card { border-color: #395541; }.fresh-feature-card:hover { background: #243328; }

/* The mark is a single clear financial path, ending in a highlighted present point. */
.brand-mark { overflow: hidden; }.brand-mark svg { width: 19px; height: 19px; }

@media (max-width: 1000px) {
  .csp-grid { grid-template-columns: repeat(2, 1fr); }
  .account-grid { grid-template-columns: repeat(2, 1fr); }
  .tx-row { grid-template-columns: 40px minmax(150px, 1fr) auto 36px; }
}
/* A 768px device has only 538px of usable content with the desktop sidebar.
   Give tablets the full canvas and the touch navigation instead of allowing
   adjacent dashboard cards to overlap their controls. */
@media (min-width: 761px) and (max-width: 1000px) {
  .sidebar { display: none; }
  .main { margin-left: 0; padding: 30px 28px 118px; max-width: none; }
  .hero-grid, .loading-skeleton, .investment-focus-grid { grid-template-columns: 1fr; }
  .mobile-nav { position: fixed; z-index: 20; left: 18px; right: 18px; bottom: 14px; height: 66px; border: 1px solid var(--line); border-radius: 20px; padding: 7px; background: rgba(255,255,255,.92); box-shadow: 0 10px 35px rgba(0,0,0,.1); backdrop-filter: blur(18px); display: grid; grid-template-columns: repeat(5, 1fr); }
  .mobile-nav button { display: grid; place-items: center; gap: 3px; border: 0; border-radius: 14px; color: var(--muted); background: transparent; font-weight: 600; }
  .mobile-nav button span { font-size: 10px; }
  .mobile-nav button.active { color: var(--ink); background: #f3f5f1; }
}
@media (max-width: 760px) {
  .onboarding-preview-banner, .onboarding-tab-cta { align-items: stretch; flex-direction: column; padding: 15px; }.onboarding-preview-banner .primary, .onboarding-tab-cta .primary { width: 100%; }
  .fresh-account-state { grid-template-columns: 1fr; gap: 28px; min-height: 0; padding: 30px 24px; border-radius: 21px; }.fresh-account-copy h2 { font-size: 30px; }.fresh-account-copy p { font-size: 14px; }.fresh-account-compact { min-height: 0; }.fresh-preview-panel { min-height: 228px; }.fresh-investment-preview { grid-template-columns: 104px minmax(0, 1fr); }.fresh-donut { width: 102px; }.fresh-donut i { width: 54px; height: 54px; margin: 24px; }.fresh-feature-tour-head { align-items: start; flex-direction: column; gap: 5px; }.fresh-feature-tour-grid { grid-template-columns: 1fr 1fr; }.fresh-feature-card:nth-child(2) { border-right: 0; }.fresh-feature-card:nth-child(-n + 2) { border-bottom: 1px solid #e0e9e1; }.fresh-feature-card { padding: 14px 11px; }
  .sidebar { display: none; }
  .main { margin-left: 0; padding: 24px 16px 132px; }
  .topbar { align-items: flex-start; }
  .top-actions { align-items: stretch; }
  #connectButton { width: 44px; font-size: 0; padding: 0; }
  #connectButton::after { content: '+'; font-size: 22px; }
  .hero-grid, .spending-head { grid-template-columns: 1fr; }
  .networth-insights { grid-template-columns: 1fr; }
  .split-card { grid-template-columns: 1fr 1px 1fr; gap: 18px; }
  .divider { width: 1px; height: auto; }
  .networth-card { min-height: 290px; }
  .line-chart { height: 132px; }
  .csp-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .csp-card { padding: 15px; }
  .csp-target-amount { display: none; }
  .account-grid { grid-template-columns: 1fr; }
  .accounts-summary { margin-bottom: 18px; }
  .account-preview-summary { grid-template-columns: 1fr; }
  .account-preview-item { border-right: 0; border-bottom: 1px solid var(--line); }
  .account-preview-item:last-child { border-bottom: 0; }
  .range-toolbar { align-items: flex-start; flex-direction: column; gap: 8px; }
  .transaction-toolbar { align-items: center; padding: 12px; }
  .transaction-toolbar .range-control button { padding: 5px 6px; }
  .search { width: 120px; }
  .tx-row { grid-template-columns: 38px minmax(0, 1fr) auto 32px; gap: 10px; padding: 12px; }
  .tx-icon { width: 36px; height: 36px; border-radius: 11px; }
  .bucket-select { max-width: 90px; }
  .mobile-nav { position: fixed; z-index: 20; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); height: 66px; border-radius: 20px; padding: 7px; background: rgba(255,255,255,.92); backdrop-filter: blur(18px); border: 1px solid var(--line); box-shadow: 0 10px 35px rgba(0,0,0,.1); display: grid; grid-template-columns: repeat(5, 1fr); }
  .mobile-nav button { border: 0; background: transparent; color: var(--muted); border-radius: 14px; display: grid; justify-items: center; align-content: center; gap: 3px; }
  .mobile-nav button span { font-size: 10px; }
  .mobile-nav button.active { color: var(--ink); background: #f3f5f1; }
}
@media (max-width: 460px) {
  .auth-screen { padding: 18px; }.auth-card { padding: 27px 23px; border-radius: 24px; }.auth-brand { margin-bottom: 30px; }.auth-preview { min-height: 136px; margin: 24px 0 21px; }
  h1 { font-size: 26px; }
  .topbar { gap: 10px; }
  input[type="month"] { max-width: 145px; }
  .hero-number { font-size: 44px; }
  .metric { font-size: 24px; }
  .csp-grid { grid-template-columns: 1fr; }
  .section-heading { margin-top: 28px; }
  .form-grid { grid-template-columns: 1fr; }
}

/* v2 refinements */
.positive { color: var(--accent) !important; }
.negative { color: var(--danger) !important; }

.chart-context { min-height: 17px; margin-top: 8px; color: var(--muted); font-size: 11px; }
/* Scrub metadata must reserve its line even before a point is selected;
   otherwise toggling it moves the chart under a stationary pointer. */
#netWorthChartContext.hidden, #investmentChartContext.hidden { display: block !important; visibility: hidden; }
.line-chart { position: relative; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }.line-chart *, .portfolio-chart, .portfolio-chart * { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; }
.scrub-line { stroke: #aab0aa; stroke-width: 1; stroke-dasharray: 3 4; opacity: 0; transition: opacity .12s ease; }
.chart-unavailable { fill: var(--line); opacity: .46; }.chart-unavailable-label { fill: var(--muted); font-size: 10px; font-weight: 650; paint-order: stroke; stroke: var(--card); stroke-width: 4px; stroke-linejoin: round; }
.chart-unavailable-line { stroke: var(--line); stroke-width: 2; stroke-dasharray: 3 5; stroke-linecap: round; }.chart-start-line { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }.chart-start-point { fill: var(--card); stroke: var(--accent); stroke-width: 4; }.chart-start-value { fill: var(--ink); font-size: 11px; font-weight: 720; }.chart-start-detail { fill: var(--muted); font-size: 10px; font-weight: 600; }
/* Keep selected-date metadata in its own reserved line. Making it an
   overlay caused it to collide with the chart's top Y-axis label. */
.networth-card .chart-context { pointer-events: none; }
.scrub-dot { fill: #fff; stroke: var(--accent); stroke-width: 3; opacity: 0; transition: opacity .12s ease; vector-effect: non-scaling-stroke; }
.scrub-line.visible, .scrub-dot.visible { opacity: 1; }
.chart-tooltip { position: absolute; top: 4px; box-sizing: border-box; width: max-content; max-width: calc(100% - 16px); overflow-wrap: anywhere; transform: translateX(-50%); pointer-events: none; background: rgba(23,26,23,.92); color: white; padding: 7px 10px; border-radius: 8px; font-size: 11px; font-weight: 700; line-height: 1.3; text-align: center; white-space: normal; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.chart-grid { stroke: #e8ece7; stroke-width: 1; }.chart-axis-label { fill: #7b827a; font-size: 10px; font-weight: 600; }
.networth-separator { color: var(--muted); }

.target-caption { display: none; }
.target-breakdown { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 6px 0; }
.target-item { display: grid; justify-items: center; gap: 2px; padding: 5px 2px; color: var(--muted); font-size: 10px; text-align: center; }
.target-item strong { color: var(--ink); font-size: 14px; }

.account-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.account-collection { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: var(--shadow); }
.account-collection-head { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 15px 14px 12px; list-style: none; }
.account-collection-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-weight: 800; }
.account-collection-icon svg { width: 19px; height: 19px; }
.account-collection.debt .account-collection-icon { background: #f8eeee; color: var(--danger); }
.account-collection-head h2 { margin: 0; font-size: 17px; }
.account-collection-head p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.account-collection-total { display: grid; justify-items: end; gap: 2px; padding-right: 16px; font-variant-numeric: tabular-nums; }.account-collection-total span { color: var(--muted); font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; }.account-collection-total strong { font-size: 14px; }
.account-collection-items { display: grid; }
.account-group-more { width: 100%; border: 0; border-top: 1px solid var(--line); padding: 11px 14px; background: #fbfcfa; color: var(--accent); text-align: left; font-size: 12px; font-weight: 700; }.account-group-more:hover { background: var(--accent-soft); }
.account-item { display: flex; align-items: flex-start; gap: 11px; padding: 15px 16px; }
.account-item + .account-item { border-top: 1px solid var(--line); }
.account-investment-detail, .account-detail { display: flex; align-items: flex-start; flex: 1; min-width: 0; gap: 11px; margin: -6px; padding: 6px; border: 0; border-radius: 10px; color: var(--ink); background: transparent; text-align: left; cursor: pointer; font: inherit; }
.account-investment-detail:hover, .account-detail:hover { background: var(--accent-soft); }
.account-investment-detail:focus-visible, .account-detail:focus-visible { outline: 3px solid rgba(31,111,74,.22); outline-offset: 1px; }
.account-investment-detail > .account-copy, .account-detail > .account-copy { flex: 1; }
.account-investment-detail > i, .account-detail > i { align-self: center; color: var(--muted); font-size: 20px; font-style: normal; line-height: 1; }
.account-item-actions { display: inline-flex; align-self: center; align-items: center; gap: 2px; flex: 0 0 auto; }
.account-connection-action { display: grid; width: 29px; height: 29px; place-items: center; border: 0; border-radius: 50%; color: #9a6b22; background: #fbf1dc; cursor: pointer; }
.account-connection-action i { display: grid; width: 14px; height: 14px; place-items: center; border: 1.5px solid currentColor; border-radius: 50%; font-size: 10px; font-style: normal; font-weight: 800; line-height: 1; }
.account-connection-action.attention { color: #aa554b; background: #f9e9e7; }
.account-connection-action:hover, .account-connection-action:focus-visible { filter: brightness(.96); outline: 3px solid rgba(176,122,41,.18); outline-offset: 1px; }
.institution-logo, .institution-fallback { display: grid; flex: 0 0 auto; width: 32px; height: 32px; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: white; object-fit: contain; overflow: hidden; }
.institution-logo { padding: 3px; }
.institution-fallback { color: #68726a; background: #f7f9f6; }
.institution-fallback svg { width: 18px; height: 18px; }
.account-copy { min-width: 0; flex: 1; }
.account-item .account-name { font-size: 14px; font-weight: 690; }
.account-item .account-inst { margin-top: 2px; font-size: 11px; }
.account-inline-balance { margin-top: 8px; font-size: 17px; font-weight: 740; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.account-rename { align-self: center; width: 29px; height: 29px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); font-size: 16px; opacity: .58; }.account-item:hover .account-rename, .account-rename:focus-visible { opacity: 1; }.account-rename:hover { border-color: var(--line); background: #f7f9f6; color: var(--accent); }
.nickname-dialog { width: min(390px, calc(100vw - 36px)); padding: 0; border: 1px solid var(--line); border-radius: 20px; color: var(--ink); background: white; box-shadow: 0 24px 70px rgba(22,34,24,.22); }.nickname-dialog::backdrop { background: rgba(18,27,20,.34); backdrop-filter: blur(3px); }.nickname-dialog form { position: relative; padding: 25px; }.nickname-dialog h2 { margin: 5px 0 7px; font-size: 24px; letter-spacing: -.04em; }.nickname-dialog p { margin: 0 0 19px; color: var(--muted); font-size: 13px; line-height: 1.5; }.nickname-dialog input { width: 100%; border: 1px solid var(--line); border-radius: 11px; padding: 12px; outline: none; color: var(--ink); background: #fbfcfa; }.nickname-dialog input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }.dialog-close { position: absolute; top: 15px; right: 16px; width: 28px; height: 28px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; font-size: 22px; line-height: 1; }.dialog-close:hover { background: #f2f4f0; }.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }.dialog-actions button { border: 0; padding: 9px 12px; border-radius: 10px; font-weight: 700; }.dialog-actions .secondary { border: 1px solid var(--line); }
.category-change-dialog { width: min(440px, calc(100vw - 32px)); }.category-change-preview { display: grid; gap: 3px; margin-top: 16px; padding: 13px 14px; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); border-radius: 13px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 62%, var(--card)), var(--card)); }.category-change-preview small { color: var(--muted); font-size: 11px; font-weight: 650; }.category-change-preview strong { font-size: 14px; letter-spacing: -.02em; }.category-change-similar { display: flex; align-items: flex-start; gap: 10px; margin-top: 11px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--card); cursor: pointer; }.category-change-similar input { flex: 0 0 auto; width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--accent); }.category-change-similar span { display: grid; gap: 2px; }.category-change-similar strong { font-size: 12px; }.category-change-similar small { color: var(--muted); font-size: 11px; line-height: 1.35; }.category-change-dialog .dialog-actions { align-items: center; }.category-change-dialog .dialog-actions .secondary { margin-right: auto; }.category-change-dialog .primary { background: var(--accent); color: #fff; }.category-change-dialog .primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
@media (max-width: 460px) { .category-change-dialog form { padding: 23px 20px; }.category-change-dialog .dialog-actions { align-items: stretch; flex-direction: column-reverse; }.category-change-dialog .dialog-actions .secondary { margin-right: 0; }.category-change-dialog .dialog-actions button { width: 100%; min-height: 44px; } }
.goal-remove-dialog form { padding: 25px; }.goal-remove-mark { display: grid; width: 36px; height: 36px; margin-bottom: 15px; place-items: center; border-radius: 12px; color: #a84848; background: #faeeee; font-size: 24px; font-weight: 650; line-height: 1; }.goal-remove-dialog h2 { margin-top: 6px; }.goal-remove-dialog p { max-width: 285px; }.danger-button { color: white; background: #af4747; }.danger-button:hover { background: #973b3b; }.danger-button:focus-visible { outline: 3px solid rgba(175,71,71,.28); outline-offset: 3px; }
.connections-panel { margin-top: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.58); }
.connections-panel summary { padding: 13px 15px; color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 680; }
.connections-panel[open] summary { border-bottom: 1px solid var(--line); }
.connection-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 15px; }
.connection-row + .connection-row { border-top: 1px solid var(--line); }
.connection-actions { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }.reconnect-button { border: 0; background: var(--accent-soft); color: var(--accent); border-radius: 9px; padding: 7px 9px; font: inherit; font-size: 11px; font-weight: 750; }
.connection-row > div { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 13px; font-weight: 650; }
.connection-logo, .connection-fallback { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; border: 1px solid var(--line); border-radius: 7px; background: white; object-fit: contain; padding: 2px; }
.connection-fallback { padding: 0; color: var(--muted); background: #f5f7f4; font-size: 12px; }
.connection-status { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; font-weight: 500; }.connection-status.stale, .connection-status.attention { color: #9a6b22; }
.connection-demo-label { color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.connection-row-focused { border-radius: 10px; background: var(--accent-soft); outline: 2px solid rgba(31,111,74,.18); outline-offset: -2px; }
.unlink-button { border: 0; border-radius: 8px; padding: 6px 8px; color: var(--red); background: var(--red-soft); font-size: 11px; font-weight: 700; }
.unlink-button:disabled { opacity: .55; }
.profile-button { height: 38px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 19px; padding: 0 11px; background: white; color: var(--muted); font-size: 15px; }.profile-button b { font-size: 12px; }
.topbar #monthLabel { display: none; }
.profile-connect { margin: -6px 8px 16px 0; }
.appearance-setting { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 16px; padding: 18px 20px; }.appearance-setting p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }.theme-toggle { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; color: var(--muted); font-size: 12px; font-weight: 650; cursor: pointer; }.theme-toggle input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }.theme-toggle i { position: relative; width: 38px; height: 23px; border: 1px solid #cfd8d0; border-radius: 99px; background: #e8ede8; pointer-events: none; transition: background .18s ease, border-color .18s ease; }.theme-toggle i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgba(18,28,20,.2); transition: transform .18s ease; }.theme-toggle input:checked + i { border-color: var(--accent); background: var(--accent); }.theme-toggle input:checked + i::after { transform: translateX(15px); }.theme-toggle input:focus-visible + i { outline: 3px solid rgba(77,155,104,.32); outline-offset: 3px; }

/* Profile is a settings space, not another dashboard: quiet groups make
   sensitive controls easy to find without turning every option into a card. */
.profile-shell { display: grid; gap: 22px; width: min(760px, 100%); padding-bottom: 26px; }
.profile-intro { padding: 0 2px 2px; border-bottom: 1px solid var(--line); }.profile-intro p, .profile-group-head p { max-width: 500px; margin: 0 0 15px; color: var(--muted); font-size: 13px; line-height: 1.5; }.profile-group-head h3, .demo-setting h3 { margin: 5px 0 0; font-size: 18px; letter-spacing: -.035em; }
.profile-group { display: grid; gap: 10px; }.profile-group + .profile-group { padding-top: 21px; border-top: 1px solid var(--line); }.profile-group-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; }.profile-group-head.compact { align-items: start; }.profile-connect { flex: 0 0 auto; margin: 0; padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px; box-shadow: none; white-space: nowrap; }
.profile-shell .connections-panel { margin-top: 0; border-radius: 14px; background: var(--card); box-shadow: none; }.profile-shell .connections-panel summary { padding: 14px 16px; color: var(--ink); font-size: 13px; }.profile-shell .connection-row { padding: 13px 16px; }
.connection-status.healthy::before, .connection-status.stale::before, .connection-status.attention::before { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--accent); content: ''; }.connection-status.stale::before, .connection-status.attention::before { background: #b07a29; }
.profile-shell .appearance-setting { margin-top: 0; padding: 15px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; }.appearance-setting > div > strong, .beta-help strong { font-size: 14px; letter-spacing: -.015em; }
.demo-setting { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 0; margin: 0; padding: 17px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }.demo-setting-copy { min-width: 0; }.demo-setting h3 { font-size: 17px; }.demo-setting p { max-width: 445px; margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }.demo-setting-status { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; padding: 4px 8px; border-radius: 99px; color: #59675c; background: #eef2ee; font-size: 10px; font-weight: 720; }.demo-setting-status::before { width: 6px; height: 6px; border-radius: 50%; background: #8c978d; content: ''; }.demo-setting[data-demo-state="active"] { border-color: #a9cdb2; background: transparent; }.demo-setting[data-demo-state="active"] .demo-setting-status { color: #1f6f4a; background: #e0f1e4; }.demo-setting[data-demo-state="active"] .demo-setting-status::before { background: var(--accent); box-shadow: 0 0 0 3px rgba(31,111,74,.12); }.demo-toggle { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; }
.profile-shell .data-controls { margin-top: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }.profile-shell .data-controls summary { padding: 15px 0; color: var(--ink); font-size: 13px; }.profile-shell .data-controls > div { padding: 0 0 16px; }
.profile-shell .beta-help { margin-top: 0; padding: 17px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; }.profile-shell .beta-help p { margin-top: 5px; }.sign-out-button { justify-self: start; color: var(--muted); font-size: 12px; }.sign-out-button:hover { color: var(--ink); }
html[data-theme="dark"] .profile-shell .connections-panel, html[data-theme="dark"] .profile-shell .data-controls { background: var(--card); }.profile-shell .demo-setting[data-demo-state="active"] { background: linear-gradient(125deg, #1e2b22, #1a201c 62%); }
@media (max-width: 760px) { .profile-shell { gap: 18px; padding-bottom: 92px; }.profile-group + .profile-group { padding-top: 18px; }.profile-group-head { align-items: flex-start; flex-direction: column; gap: 10px; }.profile-connect { width: 100%; }.profile-shell .appearance-setting, .demo-setting { padding: 16px 0; }.demo-setting { align-items: stretch; flex-direction: column; min-height: 0; }.demo-toggle { width: 100%; }.profile-shell .connections-panel summary, .profile-shell .connection-row { padding-inline: 15px; } }

/* Paired bars make income and spending directly comparable without occlusion. */
.trend-key i, .trend-detail i { width: 8px; height: 8px; border-radius: 3px; }.trend-detail .income { background: #5b9a70; }.trend-detail .spend { background: #c87862; }.trend-detail .save { background: var(--save-invest); }.trend-detail { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 13px; min-height: 30px; margin-top: 15px; color: var(--muted); font-size: 11px; }.trend-detail > span { flex-basis: 100%; font-weight: 680; }.trend-detail strong, .trend-detail b { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); font-size: 12px; white-space: nowrap; }.trend-detail strong small { color: var(--muted); font-size: 10px; font-weight: 700; }.trend-detail b { margin-left: auto; }.trend-key { justify-content: flex-start; margin-top: 6px; }.spending-trend { margin-top: 6px; }.trend-bars { position: static; display: flex; align-items: end; justify-content: center; gap: 3px; width: min(36px, 100%); height: 100%; }.trend-bar { position: static; display: block; width: calc(50% - 2px); min-height: 0; border-radius: 6px 6px 2px 2px; }.trend-bar.income { z-index: auto; inset-inline: auto; background: #5b9a70; opacity: .82; }.trend-bar.spending { z-index: auto; left: auto; width: calc(50% - 2px); background: #c87862; }.trend-column.active .trend-bar.income, .trend-column:hover .trend-bar.income { background: #287143; opacity: 1; }.trend-column.active .trend-bar.spending, .trend-column:hover .trend-bar.spending { background: #aa4f42; }

/* Investments: lead with a calm portfolio picture, then reveal detail on demand. */
.portfolio-card { padding: 24px; }.portfolio-total { margin-top: 8px; font-size: clamp(38px, 5vw, 58px); font-weight: 760; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }.portfolio-chart { height: 190px; margin-top: 17px; touch-action: pan-y; user-select: none; }.portfolio-chart svg { width: 100%; height: 100%; display: block; }.investment-focus-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(230px, .65fr); gap: 16px; margin-top: 16px; }.allocation-card, .investment-card { padding: 21px; }.allocation-visual { display: flex; align-items: center; gap: 26px; min-height: 210px; margin-top: 8px; }.investment-donut { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 158px; aspect-ratio: 1; border-radius: 50%; }.investment-donut::before { content: ''; position: absolute; inset: 25px; border-radius: 50%; background: white; }.investment-donut span { position: relative; z-index: 1; color: var(--muted); text-align: center; font-size: 11px; line-height: 1.3; }.investment-allocation { display: grid; width: 100%; gap: 3px; }.investment-allocation-row { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; width: 100%; padding: 8px 7px; border: 0; border-radius: 9px; color: var(--ink); background: transparent; text-align: left; cursor: pointer; font-size: 12px; }.investment-allocation-row:hover, .investment-allocation-row.active { background: var(--accent-soft); }.investment-allocation-row i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }.investment-allocation-row:first-child i { opacity: 0; }.investment-allocation-row small { color: var(--muted); }.investment-allocation-row strong { font-size: 12px; font-variant-numeric: tabular-nums; }.investment-accounts { margin-top: 12px; }.investment-account-row { padding: 13px 0; }.holdings-card { margin-top: 16px; overflow: hidden; }.holdings-card summary { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 720; }.holdings-card summary::-webkit-details-marker { display: none; }.holdings-card summary small { color: var(--muted); font-size: 12px; font-weight: 600; }.holdings-card[open] summary { border-bottom: 1px solid var(--line); }.holdings-controls { padding: 13px 18px; background: #fbfcfa; border-bottom: 1px solid var(--line); }.holdings-controls select { border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px; background: white; color: var(--ink); font-size: 12px; }.position-row { padding: 14px 18px; }.position-value { display: grid; justify-items: end; gap: 3px; min-width: 0; }.position-value small { font-size: 11px; white-space: nowrap; }.income-transaction .transaction-plan b { color: var(--accent); }
@media (max-width: 760px) { .investment-focus-grid { grid-template-columns: 1fr; }.allocation-visual { gap: 18px; }.investment-donut { width: 138px; }.portfolio-chart { height: 168px; } }
@media (max-width: 420px) { .allocation-visual { align-items: flex-start; flex-direction: column; }.investment-donut { width: 150px; }.investment-allocation { margin-bottom: 4px; } }
.position-class-select { width: max-content; max-width: 100%; margin-top: 6px; border: 0; padding: 0; color: var(--muted); background: transparent; font: inherit; font-size: 11px; cursor: pointer; }.position-class-select:focus { outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 2px; border-radius: 3px; }

/* A visual focal point for the portfolio, without adding a decorative dashboard. */
.portfolio-card { position: relative; overflow: hidden; border-color: #dce9df; background: linear-gradient(135deg, #f6fbf7 0%, #fff 54%); box-shadow: 0 16px 40px rgba(31,111,74,.08); }.portfolio-card::after { content: ''; position: absolute; width: 250px; height: 250px; right: -100px; top: -145px; border-radius: 50%; background: radial-gradient(circle, rgba(54,136,88,.17) 0, rgba(54,136,88,0) 70%); pointer-events: none; }.portfolio-card > * { position: relative; z-index: 1; }.portfolio-total { color: #155a39; }.portfolio-chart { position: relative; border-top: 1px solid rgba(31,111,74,.11); padding-top: 12px; }.allocation-card { border-color: #e0e9df; }.investment-donut { box-shadow: inset 0 0 0 1px rgba(23,26,23,.03), 0 12px 27px rgba(38,74,48,.10); }.investment-donut::after { content: ''; position: absolute; inset: -7px; border: 1px solid rgba(31,111,74,.12); border-radius: inherit; pointer-events: none; }.investment-allocation-row { transition: background .16s ease, transform .16s ease; }.investment-allocation-row:hover { transform: translateX(2px); }.investment-card { background: linear-gradient(150deg, #fff 0%, #fafcf9 100%); }.investment-card .card-label { color: #526657; }.holdings-card summary { transition: background .16s ease; }.holdings-card summary:hover { background: #f7faf7; }
.portfolio-snapshot { min-height: 150px; display: flex; align-items: center; gap: 15px; padding: 18px 4px; }.portfolio-snapshot-mark { display: grid; flex: 0 0 auto; width: 47px; height: 47px; place-items: center; border-radius: 15px; color: var(--accent); background: var(--accent-soft); font-size: 23px; }.portfolio-snapshot strong { font-size: 15px; letter-spacing: -.015em; }.portfolio-snapshot p { max-width: 370px; margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }.portfolio-snapshot[data-history-state="preparing"] .portfolio-snapshot-mark { color: #8d6b2f; background: #fbf4e5; }
.investment-donut, .spending-donut { cursor: pointer; }.investment-donut span { display: grid; gap: 3px; padding: 0 14px; }.investment-donut span strong { color: var(--ink); font-size: 16px; letter-spacing: -.045em; line-height: 1.1; }.investment-donut span small { color: var(--muted); font-size: 10px; line-height: 1.25; }.spending-donut span small { max-width: 94px; margin-top: 2px; overflow-wrap: anywhere; color: var(--muted); font-size: 10px; line-height: 1.15; }.investment-donut:focus-visible, .spending-donut:focus-visible { outline: 3px solid rgba(31,111,74,.28); outline-offset: 4px; }
.investment-accounts-card, .allocation-card { margin-top: 16px; }.investment-accounts-card .spending-context { margin-bottom: 2px; }.investment-accounts-card .investment-account-row:first-child { border-top: 0; }
.demo-setting, .beta-help { margin-top: 16px; padding: 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }.demo-setting p, .beta-help p { margin: 5px 0 0; max-width: 500px; color: var(--muted); font-size: 13px; line-height: 1.45; }.demo-toggle, .beta-help .secondary { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-weight: 700; text-decoration: none; }
.data-controls { margin-top: 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.58); }.data-controls summary { padding: 13px 15px; color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 680; }.data-controls[open] summary { border-bottom: 1px solid var(--line); }.data-controls > div { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 15px; }.data-controls p { flex-basis: 100%; margin: 0 0 2px; color: var(--muted); font-size: 12px; line-height: 1.45; }.data-controls button { border-radius: 9px; padding: 8px 10px; font-size: 12px; font-weight: 680; }.danger-button { color: var(--red); }

/* Profile uses one calm settings rhythm. Groups—not a collage of cards—show
   where each choice belongs, while destructive/session actions remain clear. */
.profile-shell .demo-setting, .profile-shell .beta-help { margin-top: 0; padding: 16px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.profile-shell .demo-setting { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.profile-shell .demo-setting h3 { margin: 4px 0 0; font-size: 15px; }
.profile-shell .demo-setting p, .profile-shell .beta-help p { margin: 5px 0 0; font-size: 12px; }
.profile-shell .beta-help { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.profile-shell .beta-help > div { min-width: 0; }
.profile-shell .profile-session { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 0 0; border-top: 1px solid var(--line); }
.profile-session strong { font-size: 14px; letter-spacing: -.015em; }
.profile-session p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.profile-shell .sign-out-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: 0 0 auto; min-height: 38px; border: 0; border-radius: 10px; padding: 9px 12px; color: #526057; background: #eff3ef; box-shadow: inset 0 0 0 1px #e2e9e2; font-size: 12px; font-weight: 700; }
.profile-shell .sign-out-button svg { width: 15px; height: 15px; }
.profile-shell .sign-out-button:hover { color: #245f3b; background: #e5efe7; box-shadow: inset 0 0 0 1px #cfe0d1; }
@media (max-width: 760px) { .profile-shell .demo-setting, .profile-shell .beta-help, .profile-shell .profile-session { align-items: stretch; flex-direction: column; gap: 12px; }.profile-shell .demo-toggle, .profile-shell .beta-help .secondary, .profile-shell .sign-out-button { width: 100%; }.profile-shell .profile-session { padding-top: 16px; } }

/* A profile needs one point of identity and one settings surface. This avoids
   treating every preference as a separate dashboard card. */
.profile-shell { width: min(920px, 100%); gap: 18px; }
.profile-identity { display: flex; align-items: center; gap: 16px; padding: 25px 28px; border: 1px solid #dfe6df; border-radius: 20px; background: linear-gradient(135deg, #f8fbf8, #fff 64%); box-shadow: 0 8px 24px rgba(30, 45, 33, .045); }
.profile-monogram { display: grid; width: 50px; height: 50px; flex: 0 0 auto; place-items: center; border-radius: 16px; color: #1f6f4a; background: #e7f1e9; font-size: 17px; font-weight: 780; letter-spacing: -.04em; }
.profile-identity h2 { margin: 4px 0 2px; font-size: 22px; letter-spacing: -.045em; }
.profile-identity p { margin: 0; color: var(--muted); font-size: 13px; }
.profile-settings-panel { overflow: hidden; border: 1px solid #dfe6df; border-radius: 20px; background: var(--card); box-shadow: 0 8px 24px rgba(30, 45, 33, .035); }
.profile-settings-panel .profile-group { gap: 13px; padding: 25px 28px; }
.profile-settings-panel .profile-group + .profile-group { padding-top: 25px; border-top: 1px solid var(--line); }
.profile-settings-panel .profile-group-head p { margin: 5px 0 0; }
.profile-plan-card { position: relative; overflow: hidden; padding: 22px 28px; border: 1px solid #cfe2d4; border-radius: 20px; background: linear-gradient(110deg, color-mix(in srgb, var(--accent-soft) 58%, var(--card)), var(--card) 72%); box-shadow: 0 8px 24px rgba(30, 45, 33, .035); }
.profile-plan-card::before { position: absolute; inset: 0 auto 0 0; width: 4px; border-radius: inherit; background: var(--accent); content: ''; }
.profile-plan-card .profile-group-head { align-items: center; }
.profile-plan-card .card-label { color: var(--accent); }
.profile-plan-card #profilePlanTitle { margin: 5px 0 0; letter-spacing: -.04em; }
.profile-plan-card #profilePlanDetail { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.profile-plan-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; max-width: 760px; margin: 16px 0 0; color: var(--muted); font-size: 11px; }
.profile-plan-benefit-group { min-width: 0; }
.profile-plan-benefit-heading { margin-bottom: 7px; color: var(--ink); font-size: 10px; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; }
.profile-plan-benefit-group ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.profile-plan-benefit-group li { display: flex; align-items: flex-start; gap: 7px; line-height: 1.35; }
.profile-plan-benefit-group li > span:first-child { flex: 0 0 auto; width: 14px; color: var(--accent); text-align: center; font-size: 14px; line-height: 13px; font-weight: 850; }
.profile-plan-benefit-group.excluded li > span:first-child { color: var(--accent); font-size: 13px; }
.profile-plan-card #profilePlanAction { flex: 0 0 auto; border: 1px solid var(--accent); border-radius: 999px; padding: 11px 18px; color: #fff; background: var(--accent); font: inherit; font-size: 13px; font-weight: 750; box-shadow: 0 5px 14px rgba(31,111,74,.16); }
.profile-plan-card #profilePlanAction:hover { border-color: #185d3d; background: #185d3d; transform: translateY(-1px); }
.profile-plan-card #profilePlanAction:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent); outline-offset: 3px; }
@media (max-width: 760px) { .profile-plan-benefits { grid-template-columns: 1fr; } }
.profile-settings-panel .connections-panel { overflow: visible; border: 0; border-radius: 0; background: transparent; }
.profile-settings-panel .connections-panel summary { display: none; }
.profile-settings-panel .connection-row { padding: 13px 0; }
.profile-settings-panel .connection-row + .connection-row { border-top: 1px solid var(--line); }
.profile-settings-panel .connections-panel .empty { padding: 8px 0 2px; color: var(--muted); font-size: 13px; }
.profile-settings-panel .appearance-setting, .profile-settings-panel .demo-setting { padding: 16px 0; }
.profile-settings-panel .data-controls { border-top: 1px solid var(--line); }
.profile-settings-panel .beta-help { padding: 0; border-top: 0; }
.profile-settings-panel .beta-help strong { display: block; margin-top: 4px; }
.upgrade-dialog { width: min(470px, calc(100vw - 32px)); padding: 0; overflow: hidden; border: 1px solid #cfe2d4; border-radius: 24px; color: var(--ink); background: var(--card); box-shadow: 0 24px 70px rgba(20, 30, 23, .2); }.upgrade-dialog::before { display: block; height: 5px; background: var(--accent); content: ''; }.upgrade-dialog::backdrop { background: rgba(20, 27, 22, .22); backdrop-filter: blur(4px); }.upgrade-dialog form { position: absolute; z-index: 1; top: 16px; right: 16px; }.upgrade-dialog .dialog-close { position: static; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; background: color-mix(in srgb, var(--card) 88%, transparent); }.upgrade-dialog .dialog-close:hover { border-color: #bcd6c2; background: var(--accent-soft); color: var(--ink); }.upgrade-dialog-body { padding: 27px 29px 29px; }.upgrade-dialog-mark { display: grid; width: 38px; height: 38px; place-items: center; margin-bottom: 17px; border-radius: 13px; color: var(--accent); background: var(--accent-soft); font-size: 23px; font-weight: 760; }.upgrade-dialog .card-label { color: var(--accent); }.upgrade-dialog h2 { max-width: 330px; margin: 7px 0 8px; font-size: 27px; letter-spacing: -.05em; }.upgrade-dialog p { max-width: 370px; margin: 0; color: var(--muted); line-height: 1.5; }.upgrade-benefits { display: grid; gap: 8px; margin: 21px 0 15px; padding: 0; list-style: none; }.upgrade-benefits li { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; line-height: 1.35; }.upgrade-benefits li span:first-child, .upgrade-dialog-note span { display: grid; flex: 0 0 auto; width: 20px; height: 20px; place-items: center; border-radius: 50%; color: var(--accent); background: var(--accent-soft); font-size: 11px; font-weight: 800; }.upgrade-dialog-note { display: flex; align-items: center; gap: 8px; margin-bottom: 19px; color: var(--muted); font-size: 11px; font-weight: 650; }.upgrade-dialog .full { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }.upgrade-dialog .full span { font-size: 16px; line-height: 0; }
.plus-prompt { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-color: color-mix(in srgb, var(--accent) 22%, var(--line)); background: linear-gradient(110deg, color-mix(in srgb, var(--accent-soft) 58%, var(--card)), var(--card)); }
.plus-prompt > div { min-width: 0; }
.plus-prompt .card-label { color: var(--accent); }
.plus-prompt strong { display: block; margin-top: 4px; font-size: 16px; letter-spacing: -.02em; }
.plus-prompt p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.plus-prompt button { flex: 0 0 auto; white-space: nowrap; }
.plus-inline-lock { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 8px 0; padding: 18px 20px; border: 1px solid #cfe2d4; border-left: 4px solid var(--accent); border-radius: 16px; background: linear-gradient(110deg, color-mix(in srgb, var(--accent-soft) 64%, var(--card)), var(--card) 76%); }
.plus-preview-copy { min-width: 220px; }
.plus-inline-lock strong { display: block; margin-top: 3px; font-size: 14px; letter-spacing: -.02em; }
.plus-inline-lock p { max-width: 520px; margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.plus-preview-list { display: grid; flex: 1 1 270px; gap: 6px; min-width: 220px; padding: 2px 0; opacity: .62; }
.plus-preview-list > div { display: grid; grid-template-columns: 9px minmax(0, 1fr) 58px; align-items: center; gap: 8px; }
.plus-preview-list i, .plus-preview-list b, .plus-preview-list em { display: block; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--muted) 28%, var(--card)); }
.plus-preview-list i { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 48%, var(--card)); }
.plus-preview-list b { width: min(100%, 160px); }
.plus-preview-list em { width: 58px; justify-self: end; }
.cashflow-plus-preview { display: grid; align-content: start; gap: 9px; min-height: 0; padding: 22px 10px 18px; }.cashflow-plus-preview .card-label { color: var(--accent); }.cashflow-plus-preview h2 { margin: 0; font-size: 24px; letter-spacing: -.045em; }.cashflow-plus-preview p { max-width: 420px; margin: 0 0 8px; color: var(--muted); font-size: 13px; line-height: 1.5; }.cashflow-plus-preview-rows { display: grid; gap: 10px; margin: 10px 0 14px; padding: 15px 16px; border: 1px solid #cfe2d4; border-radius: 14px; background: linear-gradient(140deg, color-mix(in srgb, var(--accent-soft) 72%, var(--card)), var(--card)); opacity: .86; }.cashflow-plus-preview-rows > div { display: grid; grid-template-columns: 8px minmax(80px, .8fr) minmax(90px, 1fr) 62px; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }.cashflow-plus-preview-rows .cashflow-plus-preview-head { padding-bottom: 7px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }.cashflow-plus-preview-rows i { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 52%, var(--card)); }.cashflow-plus-preview-rows span { color: color-mix(in srgb, var(--ink) 70%, var(--muted)); }.cashflow-plus-preview-rows b { justify-self: end; color: var(--muted); font-size: 11px; letter-spacing: .08em; }.cashflow-plus-preview .primary { justify-self: start; background: var(--accent); }
.cashflow-plus-preview-rows .cashflow-plus-preview-head span:nth-child(1) { grid-column: 2; }.cashflow-plus-preview-rows .cashflow-plus-preview-head span:nth-child(2) { grid-column: 3; }.cashflow-plus-preview-rows .cashflow-plus-preview-head span:nth-child(3) { grid-column: 4; }
.cashflow-plus-preview-rows span { display: grid; gap: 2px; }.cashflow-plus-preview-rows span small { color: var(--muted); font-size: 10px; }.cashflow-plus-preview-empty { grid-column: 1 / -1; padding: 10px 0; color: var(--muted); font-size: 11px; }
.plus-inline-lock .card-label { color: var(--accent); }
.plus-inline-lock button, .plus-prompt button { display: inline-flex; align-items: center; gap: 7px; border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line)); border-radius: 999px; padding: 10px 15px; color: var(--accent); background: var(--card); font-size: 12px; font-weight: 750; box-shadow: 0 2px 8px rgba(31,111,74,.06); }
.plus-inline-lock button:hover, .plus-prompt button:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
@media (max-width: 760px) { .plus-inline-lock { align-items: stretch; flex-direction: column; }.plus-inline-lock button { width: 100%; } }
@media (max-width: 760px) { .plus-prompt { align-items: flex-start; flex-direction: column; gap: 12px; }.plus-prompt button { width: 100%; text-align: left; } }
@media (max-width: 760px) { .plus-preview-list { width: 100%; min-width: 0; flex-basis: auto; } }
@media (max-width: 560px) { .cashflow-plus-preview-rows > div { grid-template-columns: 8px minmax(70px, .8fr) minmax(70px, 1fr) 48px; gap: 6px; }.cashflow-plus-preview-rows .cashflow-plus-preview-head { font-size: 8px; }.cashflow-plus-preview-rows b { width: auto; font-size: 10px; } }
@media (max-width: 560px) { .upgrade-dialog { width: 100vw; max-width: 100vw; margin: auto 0 0; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 24px 24px 0 0; }.upgrade-dialog-handle { display: block; width: 38px; height: 4px; margin: 10px auto -2px; border-radius: 99px; background: #c7cec7; }.upgrade-dialog-body { padding: 21px 20px calc(22px + env(safe-area-inset-bottom)); }.upgrade-dialog form { top: 17px; right: 17px; }.upgrade-dialog .dialog-close { display: none; }.upgrade-dialog h2 { font-size: 25px; }.plus-inline-lock { align-items: flex-start; flex-direction: column; gap: 13px; }.plus-inline-lock button { width: 100%; justify-content: center; } }
@media (min-width: 561px) { .upgrade-dialog-handle { display: none; } }
.profile-settings-panel .profile-signout-footer { padding: 18px 28px 22px; border-top: 1px solid var(--line); }
html[data-theme="dark"] .profile-identity { border-color: var(--line); background: linear-gradient(135deg, #1e271f, #192019 64%); }
html[data-theme="dark"] .profile-monogram { color: #a6d5b0; background: #274231; }
html[data-theme="dark"] .profile-settings-panel { border-color: var(--line); background: var(--card); }
@media (max-width: 760px) { .profile-shell { gap: 14px; }.profile-identity { gap: 13px; padding: 20px; border-radius: 17px; }.profile-monogram { width: 44px; height: 44px; border-radius: 14px; }.profile-identity h2 { font-size: 20px; }.profile-settings-panel { border-radius: 17px; }.profile-settings-panel .profile-group, .profile-settings-panel .profile-group + .profile-group { padding: 21px 19px; }.profile-settings-panel .profile-signout-footer { padding: 18px 19px 21px; }.profile-settings-panel .profile-group-head { gap: 11px; }.profile-settings-panel .connection-row { padding: 13px 0; } }
.spending-hero-card { position: relative; overflow: hidden; padding: 26px; border-color: color-mix(in srgb, var(--accent) 16%, var(--line)); background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 34%, var(--card)), var(--card) 38%); }.spending-hero-card::before { position: absolute; top: -110px; right: -80px; width: 280px; height: 280px; border-radius: 50%; background: color-mix(in srgb, var(--accent-soft) 56%, transparent); content: ''; pointer-events: none; }.spending-hero-card > * { position: relative; z-index: 1; }.spending-total { margin-top: 8px; font-size: clamp(40px, 5vw, 60px); font-weight: 760; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }.spending-context { max-width: 54ch; margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }.spending-visual-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }.spending-mix-card, .spending-trend-card { padding: 22px; }.spending-mix-content { display: flex; align-items: center; gap: 28px; min-height: 218px; }.spending-donut { width: 164px; aspect-ratio: 1; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; position: relative; }.spending-donut::before { content: ''; position: absolute; inset: 25px; border-radius: 50%; background: white; }.spending-donut span { position: relative; z-index: 1; display: grid; text-align: center; color: var(--muted); font-size: 11px; }.spending-donut strong { color: var(--ink); font-size: 24px; letter-spacing: -.04em; }.spending-legend { display: grid; width: 100%; gap: 10px; }.legend-row { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 13px; }.legend-row i { width: 8px; height: 8px; border-radius: 50%; }.legend-row strong { font-variant-numeric: tabular-nums; }.spending-trend-card { margin-top: 16px; }.trend-key { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 11px; font-weight: 650; }.trend-key span { display: inline-flex; align-items: center; gap: 5px; }.trend-key i { width: 8px; height: 8px; border-radius: 3px; }.trend-key .income { background: #5b9a70; }.trend-key .spend { background: #c87862; }.spending-trend { height: 170px; display: flex; align-items: end; gap: 9px; margin-top: 18px; padding-top: 14px; }.trend-column { height: 100%; min-width: 22px; flex: 1; display: flex; flex-direction: column; justify-content: end; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; border: 0; background: transparent; padding: 0; }.trend-bars { position: relative; width: min(32px, 100%); height: 100%; }.trend-bar { position: absolute; bottom: 0; border-radius: 7px 7px 3px 3px; transition: background .15s ease, opacity .15s ease; }.trend-bar.income { z-index: 1; inset-inline: 0; background: #5b9a70; opacity: .68; }.trend-bar.spending { z-index: 2; left: 16%; width: 68%; background: #c87862; }.trend-column.active .trend-bar.income, .trend-column:hover .trend-bar.income { background: #287143; opacity: .9; }.trend-column.active .trend-bar.spending, .trend-column:hover .trend-bar.spending { background: #aa4f42; }.spending-empty { color: var(--muted); font-size: 13px; line-height: 1.5; }

/* One period picker governs both cash-flow views. It avoids duplicated,
   competing date controls while making the relationship explicit. */
.spending-period-selector, .investment-period-selector { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 16px; padding: 14px 17px; border: 1px solid var(--line); border-left: 3px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 15px; background: color-mix(in srgb, var(--card) 92%, #eef5ef); }
.spending-period-selector p, .investment-period-selector p { margin: 3px 0 0; color: var(--muted); font-size: 12px; font-weight: 620; }
.spending-period-actions, .investment-period-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.spending-period-note { margin: 4px 0 0; color: var(--muted); font-size: 11px; font-weight: 620; }
/* One persistent, view-level control is easier to use than making people
   scroll back to a chart. It stays visually quiet until it is needed. */
.spending-period-selector, .investment-period-selector { position: sticky; z-index: 8; top: 8px; }
.spending-period-selector, .investment-period-selector { isolation: isolate; box-shadow: 0 9px 22px rgba(24, 33, 25, .11); }
.spending-period-selector::after, .investment-period-selector::after { content: ''; position: absolute; right: 16px; bottom: -1px; left: 16px; height: 1px; background: color-mix(in srgb, var(--line) 88%, var(--ink)); pointer-events: none; }
.spending-period-selector[data-month-selected] { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); border-left-color: var(--accent); background: color-mix(in srgb, var(--card) 90%, #e6f1e8); }
@media (max-width: 560px) {
  .spending-period-selector, .investment-period-selector { align-items: flex-start; flex-direction: column; gap: 11px; padding: 13px 14px; }
  .spending-period-actions, .investment-period-actions { width: 100%; justify-content: space-between; }
  .spending-period-actions .range-control, .investment-period-actions .range-control { display: flex; flex: 1; width: 100%; }
  .spending-period-actions .range-control button, .investment-period-actions .range-control button { flex: 1; min-width: 0; padding-inline: 3px; }
}
.spending-summary { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; font-size: 12px; font-weight: 650; }.spending-summary span { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }.spending-summary .income-flow { color: var(--accent); }.spending-summary .spend-flow { color: #ae5547; }.spending-summary .save-flow, .spending-summary .retirement-flow { color: var(--muted); }.spending-summary .negative { color: var(--danger); }.spending-summary i { width: 7px; height: 7px; border-radius: 3px; background: #5b9a70; }.spending-summary .spend-flow i { background: #c87862; }.spending-summary .save-flow i { background: var(--save-invest); }.spending-summary .retirement-flow i { background: #8391ae; }.spending-summary small { color: var(--muted); font-size: 10px; font-weight: 600; }.spending-summary strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.cashflow-headline { margin-top: 1px; color: var(--accent); font-size: 13px; font-weight: 720; }.cashflow-headline.negative { color: var(--danger); }
.cashflow-visual-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 13px; color: var(--muted); font-size: 11px; font-weight: 650; }.cashflow-payroll { display: flex; width: 100%; align-items: center; gap: 11px; margin-top: 13px; padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--save-invest) 24%, var(--line)); border-radius: 13px; color: inherit; background: color-mix(in srgb, var(--save-invest) 5%, var(--card)); text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }.cashflow-payroll:hover { border-color: color-mix(in srgb, var(--save-invest) 48%, var(--line)); background: color-mix(in srgb, var(--save-invest) 10%, var(--card)); transform: translateY(-1px); }.cashflow-payroll:focus-visible { outline: 3px solid color-mix(in srgb, var(--save-invest) 32%, transparent); outline-offset: 3px; }.cashflow-payroll-mark { display: grid; flex: 0 0 auto; width: 31px; height: 31px; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--save-invest) 14%, var(--card)); color: var(--save-invest); font-size: 17px; font-weight: 800; }.cashflow-payroll div { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 8px; min-width: 0; }.cashflow-payroll span { color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .07em; }.cashflow-payroll strong { color: var(--ink); font-size: 15px; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }.cashflow-payroll p { grid-column: 1 / -1; margin: 3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.35; }.cashflow-payroll-chevron { margin-left: auto; color: var(--muted); font-size: 22px; font-style: normal; line-height: 1; }
.cashflow-sankey { height: 232px; margin-top: 18px; padding-top: 14px; overflow: hidden; border-top: 1px solid var(--line); }.cashflow-sankey svg { width: 100%; height: 100%; display: block; overflow: visible; }.cashflow-label { fill: #6e766f; font-size: 11px; font-weight: 700; }.cashflow-value { fill: #202420; font-size: 12px; font-weight: 760; }.cashflow-share { fill: #7b827b; font-size: 9px; font-weight: 700; }.cashflow-target { cursor: pointer; }.cashflow-target:hover rect { filter: brightness(.94); }.cashflow-target:hover .cashflow-label { fill: var(--accent); }
.cashflow-sankey:fullscreen { box-sizing: border-box; width: min(1100px, 100vw); height: min(680px, 100vh); padding: 42px; background: var(--card); border: 0; }.cashflow-sankey:fullscreen svg { height: 100%; }
.cashflow-dialog { width: min(980px, calc(100vw - 24px)); height: min(680px, calc(100vh - 24px)); overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 18px; background: var(--card); color: var(--ink); padding: 0; }.cashflow-dialog::backdrop { background: rgba(17,22,18,.5); }.cashflow-dialog header { position: relative; display:flex; justify-content:space-between; align-items:center; padding:16px 18px; font-weight:750; }.cashflow-dialog #cashflowDialogContent { height:calc(100% - 60px); overflow:auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding:0 12px 12px; }.cashflow-dialog svg { width:100%; height:auto; min-height:320px; display:block; }
.cashflow-dialog:has(.cashflow-plus-preview) { height: auto; max-height: min(680px, calc(100vh - 24px)); }.cashflow-dialog:has(.cashflow-plus-preview) #cashflowDialogContent { height: auto; min-height: 0; }
.cashflow-dialog.plus-preview { height: auto; max-height: min(680px, calc(100vh - 24px)); }
.cashflow-dialog.plus-preview #cashflowDialogContent { height: auto; min-height: 0; }
@media (max-width: 640px) { .cashflow-dialog { position: fixed; top: auto; right: 0; bottom: 0; left: 0; width: 100%; max-width: none; height: min(78dvh, 700px); max-height: calc(100dvh - 18px); margin: 0; border-radius: 20px 20px 0 0; border-inline-width: 1px; border-bottom: 0; }.cashflow-dialog header { min-height: 58px; padding: 14px 20px; }.cashflow-dialog .dialog-close { display: none; }.cashflow-dialog-drag-handle { display: grid; position: absolute; top: 5px; left: 50%; width: 52px; height: 22px; place-items: center; padding: 0; border: 0; border-radius: 99px; background: transparent; transform: translateX(-50%); touch-action: none; cursor: grab; }.cashflow-dialog-drag-handle::after { display: block; width: 38px; height: 4px; border-radius: 99px; background: color-mix(in srgb, var(--muted) 45%, transparent); content: ''; }.cashflow-dialog-drag-handle:active { cursor: grabbing; }.cashflow-dialog[data-dragging], .cashflow-dialog[data-settling] { animation: none !important; will-change: transform; }.cashflow-dialog #cashflowDialogContent { height: calc(100% - 58px); padding: 0 16px calc(16px + env(safe-area-inset-bottom)); } }
@media (max-width: 640px) { .cashflow-dialog:has(.cashflow-plus-preview) { height: auto; max-height: calc(100dvh - 18px); }.cashflow-dialog:has(.cashflow-plus-preview) #cashflowDialogContent { height: auto; } }
@media (max-width: 640px) { .cashflow-dialog.plus-preview { height: auto; max-height: calc(100dvh - 18px); } }
.cashflow-dialog-drag-handle { display: none; }
@media (max-width: 640px) { .cashflow-dialog-drag-handle { display: grid; } }
@media (max-width: 640px) { .cashflow-dialog #cashflowDialogContent { touch-action: pan-y; } }
@media (max-width: 460px) { .cashflow-sankey { height: 116px; }.cashflow-label, .cashflow-value { font-size: 9px; } }
.cashflow-target:focus-visible rect:first-child { stroke: var(--accent); stroke-width: 2px; }

/* The flow is the primary category visual, so it earns enough space to read. */
.cashflow-sankey { height: 232px; margin-top: 18px; padding-top: 14px; }
.cashflow-label { font-size: 11px; font-weight: 700; }.cashflow-value { font-size: 12px; font-weight: 760; }
@media (max-width: 460px) { .cashflow-sankey { height: 218px; }.cashflow-label { font-size: 10px; }.cashflow-value { font-size: 11px; } }
.cashflow-sankey { height: 270px; display: flex; flex-direction: column; gap: 8px; overflow: visible; }
.cashflow-sankey svg { height: auto; min-height: 0; flex: 1 1 auto; overflow: visible; }
.cashflow-sankey.has-transaction-action { height: 318px; }
.cashflow-more { display: flex; width: 100%; align-items: center; justify-content: space-between; min-height: 42px; padding: 9px 13px; border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); border-radius: 12px; color: var(--accent); background: linear-gradient(110deg, color-mix(in srgb, var(--accent-soft) 62%, var(--card)), var(--card)); font: inherit; font-size: 12px; font-weight: 750; text-align: left; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.cashflow-more:hover { border-color: color-mix(in srgb, var(--accent) 52%, var(--line)); background: var(--accent-soft); transform: translateY(-1px); }
.cashflow-more:focus-visible { outline: 3px solid color-mix(in srgb, var(--save) 32%, transparent); outline-offset: 2px; }
.cashflow-more span { font-size: 14px; line-height: 1; }
.cashflow-transactions-action { display: grid; grid-template-columns: minmax(0, 1fr) auto 12px; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 9px 13px; border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line)); border-radius: 12px; color: var(--ink); background: var(--card); font: inherit; font-size: 12px; font-weight: 740; text-align: left; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }.cashflow-transactions-action:hover { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); background: var(--accent-soft); transform: translateY(-1px); }.cashflow-transactions-action:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 32%, transparent); outline-offset: 2px; }.cashflow-transactions-action span { color: var(--muted); font-size: 10px; font-weight: 650; }.cashflow-transactions-action b { color: var(--muted); font-size: 16px; font-weight: 500; line-height: 1; }
@media (max-width: 460px) { .cashflow-sankey { height: 270px; } .cashflow-more { min-height: 31px; } }

/* Sankey: the blocks are the deliberate interaction targets. Flows stay
   proportional but quiet until a person asks to follow one category. */
.cashflow-sankey { height: 270px; gap: 10px; }
.cashflow-sankey svg { overflow: visible; }
.cashflow-flow { vector-effect: non-scaling-stroke; transition: stroke-opacity .16s ease, filter .16s ease; }
.cashflow-flow.is-muted { stroke-opacity: .055 !important; }
.cashflow-flow.is-connected { stroke-opacity: .58 !important; filter: saturate(1.12); }
.cashflow-target { transition: opacity .16s ease; }
.cashflow-target rect:first-of-type { transition: stroke .16s ease, filter .16s ease; }
.cashflow-target:hover rect:first-of-type, .cashflow-target.is-selected rect:first-of-type { fill: color-mix(in srgb, var(--accent) 7%, transparent); stroke: color-mix(in srgb, var(--accent) 35%, transparent); stroke-width: 1px; filter: brightness(.99); }
.cashflow-detail-actions { display: grid; gap: 0; margin-top: 2px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--accent-soft) 28%, var(--card)); }
.cashflow-detail-actions .cashflow-more, .cashflow-detail-actions .cashflow-transactions-action { min-height: 42px; border: 0; border-radius: 0; background: transparent; transform: none; }
.cashflow-detail-actions .cashflow-more + .cashflow-transactions-action { border-top: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line)); }
.cashflow-detail-actions .cashflow-more:hover, .cashflow-detail-actions .cashflow-transactions-action:hover { background: color-mix(in srgb, var(--accent-soft) 64%, var(--card)); transform: none; }

/* Keep the detail rail cohesive: one surface, two navigation rows, and one
   supporting payroll insight rather than three competing cards. */
.cashflow-plus-preview { position: relative; isolation: isolate; overflow: hidden; padding: 28px 12px 24px; background: radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--accent-soft) 86%, transparent), transparent 34%), linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 40%, var(--card)), var(--card) 58%); }
.cashflow-plus-preview::before { position: absolute; z-index: -1; top: -90px; right: -90px; width: 260px; height: 260px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 8%, transparent); content: ''; filter: blur(2px); }
.cashflow-plus-preview .card-label { letter-spacing: .12em; }
.cashflow-plus-preview h2 { font-size: clamp(26px, 3vw, 34px); }
.cashflow-plus-preview p { max-width: 520px; font-size: 14px; }
.cashflow-plus-preview-rows { position: relative; box-shadow: 0 12px 26px rgba(34, 75, 48, .07); }
.cashflow-plus-preview .primary { min-height: 46px; padding-inline: 20px; border-radius: 12px; box-shadow: 0 9px 20px rgba(29, 112, 72, .16); font-weight: 760; }
.cashflow-payroll-lock { grid-column: 1 / -1; justify-self: start; margin-top: 5px; padding: 3px 7px; border-radius: 999px; color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 72%, var(--card)); font-size: 10px; font-weight: 720; }
.cashflow-target.is-selected .cashflow-label { fill: var(--accent); }
.cashflow-target.is-selected .cashflow-value { fill: var(--ink); }
.cashflow-action-mark { fill: var(--muted); font-size: 16px; font-weight: 500; }
.cashflow-target:hover .cashflow-action-mark, .cashflow-target.is-selected .cashflow-action-mark { fill: var(--accent); }
@media (max-width: 460px) {
  .cashflow-sankey { height: 270px; }
  .cashflow-flow.is-connected { stroke-opacity: .5 !important; }
}
@media (max-width: 599px) {
  /* Let the SVG keep its natural aspect ratio as allocation rows grow. A
     fixed short box letterboxes the flow horizontally on phones, leaving
     unused side margins and making labels harder to read. */
  .cashflow-sankey, .cashflow-sankey.has-transaction-action { height: auto; overflow: visible; }
  .cashflow-sankey svg { width: 100%; min-width: 0; height: auto; flex: 0 0 auto; }
}
.cashflow-category-list { display: grid; gap: 6px; margin-top: 8px; }.cashflow-category-list button { display: grid; grid-template-columns: minmax(0, 1fr) auto 12px; align-items: center; gap: 10px; width: 100%; min-height: 39px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--card); text-align: left; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; transition: border-color .16s ease, background .16s ease; }.cashflow-category-list button:hover, .cashflow-category-list button.is-selected { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); background: var(--accent-soft); }.cashflow-category-list button span { display: inline-flex; align-items: center; min-width: 0; gap: 7px; }.cashflow-category-list button i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; }.cashflow-category-list button strong { flex: 0 0 auto; font-variant-numeric: tabular-nums; }.cashflow-category-list button small { color: var(--muted); font-size: 10px; }.cashflow-category-list button > b { color: var(--muted); font-size: 16px; font-weight: 500; line-height: 1; }.cashflow-category-list button:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 32%, transparent); outline-offset: 2px; }
.cashflow-activity-detail { position: relative; padding: 6px 8px 16px; }.cashflow-activity-back { display: grid; width: 30px; height: 30px; place-items: center; margin: 0 0 14px; padding: 0; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--card); font: inherit; font-size: 21px; font-weight: 500; line-height: 1; }.cashflow-activity-back:hover { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); background: var(--accent-soft); }.cashflow-activity-back:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 32%, transparent); outline-offset: 2px; }.cashflow-activity-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 17px; }.cashflow-activity-detail h2 { margin: 5px 0 4px; font-size: 25px; letter-spacing: -.045em; }.cashflow-activity-heading p { margin: 0; color: var(--muted); font-size: 12px; }.cashflow-activity-controls { display: flex; flex: 0 0 auto; gap: 7px; }.cashflow-activity-controls select { min-height: 34px; max-width: 145px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--ink); padding: 6px 26px 6px 9px; font: inherit; font-size: 12px; font-weight: 650; }.cashflow-activity-controls select:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 32%, transparent); outline-offset: 2px; }.cashflow-activity-rows { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; }.cashflow-activity-rows > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border-bottom: 1px solid var(--line); }.cashflow-activity-rows > div:last-child { border-bottom: 0; }.cashflow-activity-rows span { display: grid; min-width: 0; gap: 3px; }.cashflow-activity-rows strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.cashflow-activity-rows small { color: var(--muted); font-size: 10px; }.cashflow-activity-value { display: grid; justify-items: end; gap: 4px; }.cashflow-activity-rows b { white-space: nowrap; font-size: 12px; font-variant-numeric: tabular-nums; }.cashflow-activity-rows b.positive { color: var(--accent); }.cashflow-activity-value :is(select, .transaction-category-label), .account-history-activity-value :is(select, .transaction-category-label) { max-width: 150px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 10px; line-height: 1.2; text-align-last: right; }.cashflow-activity-value .transaction-category-label, .account-history-activity-value .transaction-category-label { display: block; text-align: right; }
.spending-transactions { scroll-margin-top: 16px; }
.recurring-card { margin-top: 16px; overflow: hidden; }
.recurring-card summary { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; cursor: pointer; list-style: none; color: var(--ink); font-size: 14px; font-weight: 720; }
.recurring-card summary::-webkit-details-marker { display: none; }
.recurring-card summary small { color: var(--muted); font-size: 12px; font-weight: 600; }
.recurring-card[open] summary { border-bottom: 1px solid var(--line); }
.recurring-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 310px); }
.recurring-list { min-width: 0; }
.recurring-card button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.recurring-card button:last-child { border-bottom: 0; }
.recurring-card button:hover { background: var(--accent-soft); }
.recurring-card button > span { display: grid; gap: 3px; min-width: 0; }
.recurring-card button strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.recurring-card button small { color: var(--muted); font-size: 11px; }
.recurring-card button > b { flex: 0 0 auto; white-space: nowrap; font-size: 13px; font-variant-numeric: tabular-nums; }
.recurring-context { display: grid; align-content: start; gap: 11px; padding: 20px; border-left: 1px solid var(--line); background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 68%, var(--card)), var(--card) 68%); }
.recurring-context > strong { font-size: 16px; letter-spacing: -.025em; }
.recurring-context > p { margin: -5px 0 2px; color: var(--muted); font-size: 12px; }
.recurring-context-stat { display: grid; gap: 3px; padding: 10px 11px; border: 1px solid color-mix(in srgb, var(--accent) 15%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--card) 78%, transparent); }
.recurring-context-stat span { color: var(--muted); font-size: 10px; font-weight: 720; letter-spacing: .05em; text-transform: uppercase; }
.recurring-context-stat b { font-size: 12px; font-variant-numeric: tabular-nums; }
.recurring-context > small { color: var(--muted); font-size: 10px; line-height: 1.45; }

/* Compare two equal-width bars rather than disguising one as an overlay. */
.trend-bars { display: flex; align-items: end; gap: 3px; width: min(34px, 100%); }
.trend-bar { position: relative; bottom: auto; flex: 1 1 0; min-width: 0; }

/* Keep the mobile retirement hero focused on the outlook before the detail
   ladder. Status chips share a row, while the two inputs read as one compact
   supporting summary instead of competing cards. */
@media (max-width: 560px) {
  .retirement-hero { padding: 18px; }
  .retirement-hero .card-top { display: block; }
  .retirement-total { margin-top: 4px; font-size: clamp(34px, 10vw, 46px); }
  .retirement-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 10px; padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .retirement-inputs > span { display: grid; gap: 2px; min-width: 0; padding: 0 10px; border: 0; border-radius: 0; background: transparent; font-size: 9px; }
  .retirement-inputs > span + span { border-left: 1px solid var(--line); }
  .retirement-inputs > span strong { font-size: 15px; }
  .retirement-inputs > span small { font-size: 9px; }
  .retirement-context-chips { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin-top: 12px; }
  .retirement-age-chip, .retirement-coverage-chip { width: auto; flex: 0 1 auto; box-sizing: border-box; padding: 0; border-radius: 0; color: var(--muted); background: transparent; font-size: 10px; }
  .retirement-coverage-chip { padding-left: 8px; border-left: 1px solid var(--line); }
  .retirement-review-plan { flex: 0 0 auto; margin-left: auto; width: auto; padding: 6px 10px; font-size: 11px; }
  .retirement-next-milestone { margin-top: 13px; padding: 11px 12px; }
  .retirement-path { gap: 8px; margin-top: 17px; }
  .retirement-milestone { min-height: 145px; gap: 6px; padding: 13px; }
}
.trend-bar.income { inset-inline: auto; opacity: .78; }
.trend-bar.spending { left: auto; width: auto; }

/* The monthly view deliberately uses one diverging bar per month: above the
   baseline means cash left; below means cash outflow exceeded income. */
.spending-trend { display: block; height: 210px; padding: 0; overflow: hidden; }
.spending-trend svg { width: 100%; height: 100%; display: block; overflow: visible; }
.trend-grid { stroke: var(--line); stroke-width: 1; }.trend-grid.zero { stroke: var(--muted); stroke-width: 1.4; }.trend-axis, .trend-month { fill: var(--muted); font-size: 10px; font-weight: 650; }.spending-trend .trend-column { display: inline; cursor: pointer; }.trend-column rect { transition: filter .15s ease, stroke .15s ease; }.trend-column:hover rect { filter: brightness(.9); }.trend-column.active rect, .trend-column:focus-visible rect { stroke: var(--ink); stroke-width: 2px; }.trend-column.active .trend-month { fill: var(--ink); font-weight: 800; }

/* Holdings begin as a short portfolio preview; per-holding settings stay tucked
   behind the row a person intentionally opens. */
.holdings-card { margin-top: 16px; overflow: hidden; }
.holdings-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; padding: 19px 20px 14px; }.holdings-head .spending-context { margin-bottom: 0; }.holdings-head select { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px; background: white; color: var(--ink); font-size: 12px; }
.holdings-list { border-top: 1px solid var(--line); }.holding-row { display: block; border-bottom: 1px solid var(--line); }.holding-row summary { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto 12px; align-items: center; gap: 11px; padding: 13px 20px; cursor: pointer; list-style: none; }.holding-row summary::-webkit-details-marker { display: none; }.holding-row summary::after { content: '›'; grid-column: 4; grid-row: 1; justify-self: end; color: var(--muted); font-size: 18px; transition: transform .16s ease; }.holding-row[open] summary::after { transform: rotate(90deg); }.holding-copy { display: grid; min-width: 0; gap: 3px; }.holding-copy strong { overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }.holding-copy span { overflow: hidden; color: var(--muted); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }.holding-row .position-value { margin-right: 0; }.holding-detail { display: flex; align-items: center; min-height: 44px; margin: -2px 20px 12px 73px; padding: 9px 10px; border-radius: 9px; background: #f7faf7; color: var(--muted); font-size: 12px; }.holding-detail label { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 12px; }.holding-detail select { max-width: 190px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: white; color: var(--ink); font-size: 12px; }.holdings-more { width: 100%; padding: 13px 20px; border: 0; background: #fbfcfa; color: var(--accent); font-size: 13px; font-weight: 650; text-align: left; }.holdings-more:hover { background: var(--accent-soft); }
@media (max-width: 560px) { .holdings-head { align-items: center; padding-inline: 16px; }.holdings-head .spending-context { display: none; }.holding-row summary { padding-inline: 16px; }.holding-detail { margin-left: 61px; margin-right: 16px; }.holdings-more { padding-inline: 16px; } }

.holding-row .position-symbol { width: 42px; height: 36px; font-size: 9px; font-weight: 700; letter-spacing: -.04em; }.holding-ticker { color: var(--ink); font-size: 15px !important; font-weight: 600 !important; letter-spacing: -.02em; }.holding-weight { display: flex; align-items: center; gap: 7px; margin-top: 5px; }.holding-weight > i { display: block; width: min(86px, 100%); height: 5px; overflow: hidden; border-radius: 99px; background: #e4ebe4; }.holding-weight > i b { display: block; height: 100%; border-radius: inherit; background: var(--accent); }.holding-weight > span { color: var(--muted); font-size: 10px; font-weight: 650; }.holding-detail { display: grid; align-items: start; gap: 3px; }.holding-detail > strong { color: var(--ink); font-size: 12px; font-weight: 600; line-height: 1.35; }.holding-detail > span { color: var(--muted); font-size: 11px; }.holding-detail label { margin-top: 5px; }
.holding-account-list { display: grid; width: 100%; margin-top: 7px; overflow: hidden; border: 1px solid #e1e7e1; border-radius: 8px; background: white; }.holding-account { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 8px 9px; }.holding-account + .holding-account { border-top: 1px solid #e8ede8; }.holding-account > div { display: grid; min-width: 0; gap: 1px; }.holding-account span { overflow: hidden; color: var(--ink); font-size: 11px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }.holding-account small { color: var(--muted); font-size: 10px; }.holding-account b { font-size: 11px; font-variant-numeric: tabular-nums; }.holding-account select { max-width: 128px; padding: 5px 6px; font-size: 11px; }
.unclassified-account-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 14px 20px; border-bottom: 1px solid var(--line); }.unclassified-mark { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: var(--muted); background: #edf1ed; font-size: 16px; font-weight: 750; }.unclassified-account-row > div:nth-child(2), .unclassified-actions { display: grid; min-width: 0; gap: 3px; }.unclassified-actions { justify-items: end; }.unclassified-account-row strong { overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }.unclassified-account-row span { color: var(--muted); font-size: 11px; line-height: 1.35; }.unclassified-account-row b { white-space: nowrap; font-size: 13px; font-variant-numeric: tabular-nums; }.manual-holding-button, .manual-holding-remove { border: 0; border-radius: 7px; padding: 5px 7px; color: var(--accent); background: var(--accent-soft); font-size: 10px; font-weight: 700; white-space: nowrap; }.manual-holding-remove { color: var(--muted); background: #edf1ed; }.manual-holding-button:hover, .manual-holding-remove:hover { filter: brightness(.96); }.manual-holding-controls { display: grid; justify-items: end; gap: 4px; }.manual-holding-controls select { max-width: 128px; padding: 5px 6px; font-size: 11px; }
.manual-holding-dialog label { display: grid; gap: 5px; margin-top: 12px; color: var(--muted); font-size: 11px; font-weight: 650; }.manual-holding-dialog input, .manual-holding-dialog select { box-sizing: border-box; width: 100%; border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; color: var(--ink); background: #fbfcfa; font: inherit; font-weight: 500; }.manual-holding-dialog select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
#manualAccountDialog label, #goalDialog label { display: grid; gap: 5px; margin-top: 12px; color: var(--muted); font-size: 11px; font-weight: 650; }#manualAccountDialog input, #manualAccountDialog select, #goalDialog input, #goalDialog select { box-sizing: border-box; width: 100%; border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; color: var(--ink); background: #fbfcfa; font: inherit; font-weight: 500; }

/* Shared interaction and hierarchy rules: content leads, controls support it. */
button:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid rgba(31,111,74,.24); outline-offset: 2px; }
.nav-icon { width: 18px; height: 18px; flex: 0 0 auto; }.nav-item .nav-icon { color: #778078; }.nav-item.active .nav-icon { color: var(--accent); }
.profile-button { width: 38px; padding: 0; justify-content: center; color: #5e685f; }.profile-button svg { width: 18px; height: 18px; }.profile-button:hover { color: var(--accent); border-color: #c8d9ca; background: #f8fbf8; }
.card-label { font-size: 11px; font-weight: 650; letter-spacing: .055em; text-transform: uppercase; }.spending-context { font-size: 12px; line-height: 1.45; }
.topbar { margin-bottom: 24px; }.topbar h1 { letter-spacing: -.045em; }.card { box-shadow: 0 8px 26px rgba(30,38,31,.045); }.card-top { align-items: flex-start; }
.split-card .metric, .accounts-summary strong { font-weight: 680; }.accounts-summary { border-radius: 18px; }.account-collection { border-radius: 18px; box-shadow: 0 6px 20px rgba(30,38,31,.04); }
@media (max-width: 760px) { .range-control { flex-wrap: wrap; width: 100%; }.range-control button { flex: 1 1 calc(33.333% - 4px); min-width: 0; padding-inline: 4px; font-size: 10px; white-space: nowrap; }.mobile-nav .nav-icon { width: 19px; height: 19px; }.mobile-nav button { font-weight: 600; }.mobile-nav button.active .nav-icon { color: var(--accent); }.topbar { margin-bottom: 20px; }.card-label { font-size: 10px; }.spending-context { font-size: 11px; }.profile-button { width: 40px; height: 40px; border-radius: 50%; }.accounts-summary div { padding: 14px 12px; }.accounts-summary strong { font-size: 19px; } }
@media (max-width: 560px) { .cashflow-activity-heading { align-items: stretch; flex-direction: column; gap: 10px; }.cashflow-activity-controls { width: 100%; }.cashflow-activity-controls select { flex: 1 1 0; max-width: none; min-width: 0; } }

.retirement-hero { padding: 24px; overflow: hidden; border-color: #dce9df; background: linear-gradient(135deg, #f5faf6 0%, #fff 62%); }.retirement-total, .retirement-spend-number { margin-top: 8px; font-size: clamp(36px, 5vw, 56px); font-weight: 760; letter-spacing: -.055em; font-variant-numeric: tabular-nums; color: #155a39; }.retirement-inputs { display: flex; flex-wrap: wrap; gap: 4px 13px; margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 650; }.retirement-context-chips { display: grid; justify-items: end; gap: 6px; }.retirement-age-chip, .retirement-assumption, .retirement-coverage-chip { align-self: flex-start; padding: 7px 10px; border-radius: 99px; background: #e8f3ec; color: var(--accent); font-size: 11px; font-weight: 700; white-space: nowrap; }.retirement-coverage-chip { color: var(--muted); background: #f0f3ef; }.retirement-next-milestone { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; margin-top: 19px; padding: 13px 15px; border: 1px solid #c9dfce; border-radius: 13px; color: var(--ink); background: rgba(255,255,255,.68); cursor: pointer; text-align: left; }.retirement-next-milestone:hover { border-color: #9cc6a7; background: #fbfdfb; }.retirement-next-milestone span { display: grid; gap: 2px; }.retirement-next-milestone small { color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }.retirement-next-milestone strong { font-size: 14px; }.retirement-next-milestone > b { color: var(--accent); font-size: 12px; white-space: nowrap; }.retirement-next-milestone i { font-size: 18px; font-style: normal; vertical-align: -1px; }.retirement-path { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 24px; }.retirement-milestone { position: relative; display: grid; align-content: start; min-height: 156px; gap: 8px; padding: 15px; overflow: hidden; border: 1px solid #dfe8e0; border-radius: 15px; background: linear-gradient(145deg, rgba(255,255,255,.98), #f8fbf8); color: var(--ink); text-align: left; box-shadow: 0 4px 13px rgba(27,49,32,.045); }.retirement-milestone::before { position: absolute; top: 0; right: 15px; left: 15px; height: 3px; border-radius: 0 0 99px 99px; background: #c6d9ca; content: ''; }.retirement-milestone.complete::before { background: var(--accent); }.retirement-milestone-name { padding-top: 4px; color: #59675b; font-size: 11px; font-weight: 730; }.retirement-milestone strong { font-size: 20px; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }.retirement-milestone-detail { min-height: 26px; color: var(--muted); font-size: 10px; font-weight: 620; line-height: 1.3; }.retirement-milestone i { height: 5px; margin-top: auto; overflow: hidden; border-radius: 99px; background: #e5ebe5; }.retirement-milestone i b { display: block; height: 100%; border-radius: inherit; background: var(--accent); }.retirement-milestone em { justify-self: start; padding: 4px 7px; border-radius: 99px; background: #eaf4ed; color: #26744c; font-size: 10px; font-style: normal; font-weight: 730; }.retirement-spend { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 16px; padding: 21px 24px; }.retirement-spend-number { font-size: 30px; color: var(--ink); }.retirement-adjust { margin-top: 16px; overflow: hidden; }.retirement-adjust summary { display: flex; justify-content: space-between; padding: 18px 20px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 700; }.retirement-adjust summary::-webkit-details-marker { display: none; }.retirement-adjust summary small { color: var(--muted); font-size: 11px; font-weight: 600; }.retirement-adjust > p { margin: 0; padding: 0 20px 14px; color: var(--muted); font-size: 12px; line-height: 1.45; }.retirement-form { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; padding: 14px 20px 20px; border-top: 1px solid var(--line); background: #fbfcfa; }.retirement-form label { display: grid; grid-template-columns: 1fr auto; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 650; }.retirement-form .retirement-value { width: 48px; min-width: 0; border: 0; padding: 0; color: var(--ink); background: transparent; font: inherit; font-size: 11px; font-variant-numeric: tabular-nums; text-align: right; }.retirement-form .retirement-value:focus { outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 2px; border-radius: 3px; }.retirement-form input[type="range"] { grid-column: 1 / -1; min-width: 0; width: 100%; accent-color: var(--accent); cursor: pointer; }.retirement-form-actions { display: flex; grid-column: 1 / -1; align-items: center; justify-content: flex-end; gap: 10px; }.retirement-form-actions small { margin-right: auto; color: var(--muted); font-size: 11px; }.retirement-form-actions .text-button { color: var(--muted); font-size: 11px; }.retirement-form-actions .primary { white-space: nowrap; }
.retirement-review-plan { border: 1px solid #b9d7c1; border-radius: 99px; padding: 7px 10px; color: var(--accent); background: transparent; font: inherit; font-size: 11px; font-weight: 750; cursor: pointer; }.retirement-review-plan:hover, .retirement-review-plan:focus-visible { background: #e8f3ec; outline: 2px solid color-mix(in srgb, var(--accent) 28%, transparent); outline-offset: 2px; }.retirement-review-plan.needs-setup { color: #145a38; background: #dcefe2; border-color: #8fc3a0; }
.retirement-hero.needs-setup { border-color: #b9d7c1; box-shadow: 0 8px 26px rgba(31,111,74,.08); }
@media (max-width: 560px) { .holding-history-range { flex-wrap: wrap; }.holding-history-range button { flex: 1 1 calc(33.333% - 4px); min-width: 0; padding-inline: 3px; font-size: 10px; white-space: nowrap; } }
@media (max-width: 760px) { .mobile-nav { grid-template-columns: repeat(5, 1fr); }.mobile-nav button span { font-size: 9px; }.retirement-path { grid-template-columns: repeat(2, 1fr); }.retirement-spend { align-items: flex-start; flex-direction: column; gap: 8px; }.retirement-assumption { align-self: auto; }.retirement-form { grid-template-columns: 1fr 1fr; }.retirement-form .primary { grid-column: 1 / -1; } }
@media (max-width: 560px) { .holding-detail { margin-left: 73px; } }

/* A holding is a concise invitation to learn, not an expandable pile of
   metadata. The full explanation and history live in a focused detail sheet. */
.holding-row { box-sizing: border-box; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto 12px; align-items: center; width: 100%; gap: 11px; padding: 14px 20px; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); background: var(--card); text-align: left; cursor: pointer; transition: background .16s ease; }
.holding-row { -webkit-tap-highlight-color: transparent; }.holding-row:focus-visible { position: relative; z-index: 1; outline: 3px solid rgba(31,111,74,.22); outline-offset: -3px; }.holding-row .holding-chevron { color: var(--muted); font-size: 19px; font-style: normal; }.investment-account-row { box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) minmax(8ch, max-content) 12px; align-items: center; width: 100%; gap: 11px; border: 0; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }.investment-account-row:hover { color: var(--accent); }.investment-account-row b { justify-self: end; min-width: 8ch; text-align: right; white-space: nowrap; }.investment-account-value { justify-items: end; text-align: right; }.investment-account-value small { color: var(--muted); font-size: 10px; font-weight: 650; line-height: 1.2; white-space: nowrap; }.investment-account-value small.positive { color: var(--accent); }.investment-account-value small.negative { color: #b14b45; }.investment-account-row i { width: 12px; color: var(--muted); font-size: 19px; font-style: normal; text-align: right; }
@media (hover: hover) {
  .holding-row:hover { background: #f8fbf8; }
  html[data-theme="dark"] .holding-row:hover { background: #222522; }
}
@media (hover: none) {
  .holding-row:active { background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
}
.holding-history-dialog { width: min(700px, calc(100vw - 24px)); max-height: min(760px, calc(100dvh - 24px)); padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; color: var(--ink); background: var(--card); box-shadow: 0 26px 80px rgba(19,31,22,.25); outline: none; }.holding-history-dialog:focus, .holding-history-dialog:focus-visible { outline: none; }.holding-history-dialog::backdrop { background: rgba(18,27,20,.48); backdrop-filter: blur(3px); }.holding-history-shell { max-height: inherit; overflow: auto; padding: 24px; }.holding-history-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; }.holding-history-head h2 { margin: 5px 0 3px; font-size: 28px; letter-spacing: -.045em; }.holding-history-head p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }.holding-history-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }.holding-history-metrics.single { grid-template-columns: 1fr; }.holding-history-metrics > div { display: grid; gap: 3px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 13px; background: #fbfcfa; }.holding-history-metrics span, .holding-history-metrics small { color: var(--muted); font-size: 10px; font-weight: 650; }.holding-history-metrics strong { font-size: 20px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }.holding-history-tabs { display: inline-flex; gap: 3px; margin-top: 20px; padding: 3px; border-radius: 10px; background: #edf1ed; }.holding-history-tabs button { border: 0; border-radius: 8px; padding: 7px 10px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 700; cursor: pointer; }.holding-history-tabs button.active { color: var(--ink); background: white; box-shadow: 0 1px 3px rgba(15,25,17,.1); }.holding-history-note { min-height: 20px; margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }.holding-history-chart { position: relative; height: 250px; margin-top: 8px; border-bottom: 1px solid var(--line); touch-action: pan-y; user-select: none; -webkit-user-select: none; }.holding-history-chart svg { width: 100%; height: 100%; display: block; }.holding-history-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: holding-line-draw .55s cubic-bezier(.2,.8,.2,1) forwards; }.holding-scrub-line { stroke: #7b847c; stroke-dasharray: 4 4; opacity: 0; }.holding-scrub-dot { fill: var(--card); stroke: var(--accent); stroke-width: 3; opacity: 0; }.holding-scrub-line.visible, .holding-scrub-dot.visible { opacity: 1; }.holding-history-axis { position: absolute; bottom: 7px; color: var(--muted); font-size: 10px; font-weight: 650; }.holding-history-axis.start { left: 0; }.holding-history-axis.end { right: 0; }.holding-history-empty, .holding-history-state { display: grid; place-items: center; align-content: center; height: 100%; gap: 5px; color: var(--muted); text-align: center; font-size: 12px; }.holding-history-empty b, .holding-history-state b { color: var(--ink); font-size: 14px; }.holding-history-empty span, .holding-history-state span { max-width: 290px; line-height: 1.45; }.holding-history-skeleton i { display: block; width: min(68%, 320px); height: 9px; border-radius: 99px; background: linear-gradient(90deg, #edf1ed 25%, #f6f8f5 42%, #edf1ed 58%); background-size: 200% 100%; animation: history-shimmer 1.25s ease-in-out infinite; }.holding-history-skeleton i:last-child { width: min(47%, 230px); }@keyframes history-shimmer { to { background-position: -200% 0; } }.holding-history-where { display: grid; gap: 0; margin-top: 18px; }.holding-history-where > span { margin-bottom: 7px; color: var(--muted); font-size: 11px; font-weight: 720; }.holding-history-where > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--line); }.holding-history-where b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.holding-history-where small { grid-column: 1; color: var(--muted); font-size: 10px; }.holding-history-where strong { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 12px; font-variant-numeric: tabular-nums; }@keyframes holding-line-draw { to { stroke-dashoffset: 0; } }@media (prefers-reduced-motion: reduce) { .holding-history-line { animation: none; stroke-dashoffset: 0; }.holding-history-skeleton i { animation: none; } }.holding-history-dialog:has(.holding-history-chart) { overscroll-behavior: contain; }html[data-theme="dark"] .holding-history-metrics > div { background: #1c211d; }html[data-theme="dark"] .holding-history-tabs { background: #262d27; }html[data-theme="dark"] .holding-history-tabs button.active { background: #363e37; color: #f4f7f4; }.holding-history-dialog .chart-tooltip { max-width: calc(100% - 18px); overflow: hidden; text-overflow: ellipsis; }
.holding-history-dialog[open] { animation: holding-detail-enter .2s cubic-bezier(.2,.8,.2,1) backwards; }.holding-history-dialog[open]::backdrop { animation: holding-backdrop-enter .2s ease-out backwards; }@keyframes holding-detail-enter { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }@keyframes holding-backdrop-enter { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 560px) { .holding-row { grid-template-columns: 38px minmax(0, 1fr) auto 10px; gap: 9px; padding-inline: 16px; }.holding-row .position-symbol { width: 38px; }.holding-history-dialog { width: 100vw; max-height: min(760px, 100dvh); margin: auto 0 0; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 22px 22px 0 0; }.holding-history-shell { padding: 21px 18px calc(92px + env(safe-area-inset-bottom)); }.holding-history-head h2 { font-size: 25px; }.holding-history-chart { height: 215px; }.holding-history-metrics strong { font-size: 18px; } }
@media (max-width: 560px) { .holding-history-dialog[open] { animation-name: holding-sheet-enter; animation-duration: .28s; }.holding-history-dialog[open]::backdrop { animation-duration: .28s; } }@keyframes holding-sheet-enter { from { opacity: 0; transform: translateY(44px); } to { opacity: 1; transform: translateY(0); } }@media (prefers-reduced-motion: reduce) { .holding-history-dialog[open], .holding-history-dialog[open]::backdrop { animation: none; } }
.holding-history-class { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-self: start; gap: 5px; margin-top: 6px; color: var(--muted); font-size: 10px; font-weight: 620; }.holding-history-class select { max-width: 180px; border: 0; border-bottom: 1px solid transparent; border-radius: 0; padding: 1px 14px 1px 0; color: var(--muted); background: transparent; font: inherit; font-size: 10px; font-weight: 720; cursor: pointer; }.holding-history-class select:hover { color: var(--accent); border-bottom-color: color-mix(in srgb, var(--accent) 38%, transparent); }.holding-history-class select:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 28%, transparent); outline-offset: 3px; border-radius: 3px; }
.main-history-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: main-history-line-draw .42s cubic-bezier(.2,.8,.2,1) forwards; }@keyframes main-history-line-draw { to { stroke-dashoffset: 0; } }@media (prefers-reduced-motion: reduce) { .main-history-line { animation: none; stroke-dashoffset: 0; } }
.range-control button:disabled { cursor: not-allowed; opacity: .42; }
.holding-history-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.holding-history-range { position: relative; display: inline-flex; gap: 1px; padding: 3px; border-radius: 10px; background: #edf1ed; }.holding-history-range button { min-width: 29px; border: 0; border-radius: 7px; padding: 7px 4px; color: var(--muted); background: transparent; font-size: 10px; font-weight: 750; cursor: pointer; }.holding-history-range button.active { color: var(--ink); background: var(--card); box-shadow: 0 1px 3px rgba(15,25,17,.1); }.holding-history-range[aria-busy="true"]::after { content: ''; position: absolute; top: 50%; right: 5px; width: 5px; height: 5px; border: 1.5px solid var(--accent); border-left-color: transparent; border-radius: 50%; transform: translateY(-50%); animation: clarity-spin .7s linear infinite; pointer-events: none; }.holding-history-range[aria-busy="true"] { padding-right: 13px; }.holding-history-range[aria-busy="true"] button { opacity: .72; }html[data-theme="dark"] .holding-history-range { background: #262d27; }html[data-theme="dark"] .holding-history-range button.active { background: #363e37; color: #f4f7f4; }@media (max-width: 560px) { .holding-history-controls { align-items: flex-start; flex-direction: column; }.holding-history-tabs { margin-top: 18px; }.holding-history-range { width: 100%; justify-content: space-between; box-sizing: border-box; }.holding-history-range button { flex: 1; } }
@media (max-width: 560px) { .holding-history-head h2 { overflow-wrap: anywhere; line-height: 1.04; }.holding-history-head p { max-width: 270px; }.holding-history-metrics { grid-template-columns: 1fr; gap: 8px; margin-top: 16px; }.holding-history-metrics > div { min-width: 0; padding: 12px 13px; }.holding-history-metrics strong { overflow-wrap: anywhere; font-size: clamp(18px, 6vw, 22px); }.holding-history-chart { height: 196px; }.holding-history-where b { white-space: normal; overflow-wrap: anywhere; }.holding-history-class select { min-width: 0; max-width: 64%; }.holding-history-range button { min-width: 0; } }
/* On phones, investment detail is a true bottom drawer: it keeps the
   Investments view visually present while the person explores one position. */
.holding-history-drag-handle { display: none; }
@media (max-width: 560px) {
  .holding-history-dialog, .holding-history-dialog:focus, .holding-history-dialog:focus-visible { width: 100vw; max-width: 100vw; height: min(84dvh, 760px); max-height: min(84dvh, 760px); margin: auto 0 0; border: 0 !important; outline: 0 !important; border-radius: 24px 24px 0 0; box-shadow: 0 -14px 44px rgba(19,31,22,.16); -webkit-tap-highlight-color: transparent; }
  .holding-history-dialog::backdrop { background: rgba(18,27,20,.28); backdrop-filter: none; }
  .holding-history-shell { height: 100%; max-height: none; padding: 9px 18px calc(30px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
  /* The visible pill stays quiet; its full-width 44px region is the actual
     touch target, so a thumb does not have to land on four pixels of chrome. */
  .holding-history-drag-handle { display: grid; width: 100%; height: 44px; margin: -9px 0 2px; padding: 0; place-items: center; border: 0; border-radius: 14px; background: transparent; touch-action: none; cursor: grab; }.holding-history-drag-handle::after { display: block; width: 38px; height: 4px; border-radius: 99px; background: #c7cec7; content: ''; }.holding-history-drag-handle:active { cursor: grabbing; }
  .holding-history-dialog[data-dragging], .holding-history-dialog[data-settling] { animation: none !important; will-change: transform; }
  .holding-history-dialog[data-dragging] { transition: none !important; }
  .holding-history-head { position: sticky; z-index: 2; top: -9px; margin: 0 -18px; padding: 10px 18px 12px; background: var(--card); border-bottom: 1px solid var(--line); }
  .holding-history-head .dialog-close { display: none; }
  .holding-history-head h2 { padding-right: 0; }
  .holding-history-dialog[open] { animation-name: holding-sheet-enter; animation-duration: .32s; animation-timing-function: cubic-bezier(.22,.9,.25,1); }
}
html[data-theme="dark"] .holding-history-drag-handle::after { background: #59645b; }
html[data-theme="dark"] .spending-period-selector, html[data-theme="dark"] .investment-period-selector { box-shadow: 0 9px 22px rgba(0, 0, 0, .28); }
html[data-theme="dark"] .holding-history-head .dialog-close { background: #29312b; }
.legend-row { width: 100%; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }.legend-row:hover { color: var(--accent); }.spending-transactions { margin-top: 16px; overflow: hidden; }.spending-transactions summary { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; cursor: pointer; font-size: 14px; font-weight: 720; list-style: none; }.spending-transactions summary::-webkit-details-marker { display: none; }.spending-transactions summary small { color: var(--muted); font-size: 12px; font-weight: 600; }.spending-transactions[open] summary { border-bottom: 1px solid var(--line); }.spending-transaction-controls { display: flex; gap: 8px; padding: 14px 18px; background: #fbfcfa; border-bottom: 1px solid var(--line); }.spending-transaction-controls :is(select, input) { border: 1px solid var(--line); border-radius: 9px; background: white; padding: 7px 9px; color: var(--ink); font-size: 12px; }.spending-transaction-controls input { min-width: 150px; flex: 1; }.spending-transaction-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }.spending-transaction-row:last-child { border-bottom: 0; }.spending-transaction-row > div { min-width: 0; display: grid; gap: 3px; }.spending-transaction-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }.spending-transaction-row span { color: var(--muted); font-size: 11px; }.spending-transaction-row b { white-space: nowrap; font-size: 13px; font-variant-numeric: tabular-nums; }.transaction-plan { max-width: 154px; min-width: 0; }
.allocation-toggle { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: #f0f3ef; }.allocation-toggle button { width: 26px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 750; }.allocation-toggle button.active { color: var(--ink); background: white; box-shadow: 0 1px 3px rgba(20,30,20,.08); }
.transaction-plan { display: grid; justify-items: end; gap: 5px; }.transaction-plan select { max-width: 120px; border: 0; background: transparent; color: var(--muted); font-size: 11px; text-align-last: right; }

@media (max-width: 760px) {
  .section-heading .eyebrow { display: none; }
  .account-groups { grid-template-columns: 1fr; gap: 8px; }
  .investment-grid { grid-template-columns: 1fr; }
  .spending-visual-grid { grid-template-columns: 1fr; }.spending-mix-content { gap: 18px; }.spending-donut { width: 142px; }
  .target-breakdown { grid-template-columns: 1fr 1fr; }
  #sankey { min-height: 0; }
}

@media (max-width: 460px) {
  .target-breakdown { grid-template-columns: repeat(4, 1fr); }
}

/* Dark mode uses layered charcoal surfaces—not black and white—so the visual
   hierarchy stays quiet and extended reading remains comfortable. */
html[data-theme="dark"] body, html[data-theme="dark"] .auth-screen { background: var(--bg); }
html[data-theme="dark"] .sidebar { background: #151a17; }
html[data-theme="dark"] .nav-item { color: #b5bdb6; }
html[data-theme="dark"] .profile-back:hover { color: var(--ink); background: #252e27; }
html[data-theme="dark"] .nav-item:hover, html[data-theme="dark"] .nav-item.active { background: #222a24; color: var(--ink); }
html[data-theme="dark"] .secondary, html[data-theme="dark"] input, html[data-theme="dark"] select { border-color: var(--line); background: #202720; color: var(--ink); }
html[data-theme="dark"] .mobile-nav { border-color: #303a32; background: rgba(23,29,25,.95); }
html[data-theme="dark"] .mobile-nav button { color: #9da89f; }
html[data-theme="dark"] .mobile-nav button.active { background: #263128; color: var(--ink); }
html[data-theme="dark"] .range-control, html[data-theme="dark"] .allocation-toggle { background: #222a24; }
html[data-theme="dark"] .range-control button.active, html[data-theme="dark"] .allocation-toggle button.active { background: #303b32; color: var(--ink); box-shadow: none; }
html[data-theme="dark"] .retirement-hero, html[data-theme="dark"] .portfolio-card { border-color: #363f38; background: linear-gradient(135deg, #1d221f 0%, #1a201c 62%); }
html[data-theme="dark"] .retirement-milestone, html[data-theme="dark"] .retirement-milestone.featured { border-color: #354239; background: #202820; box-shadow: none; }
html[data-theme="dark"] .retirement-age-chip, html[data-theme="dark"] .retirement-assumption, html[data-theme="dark"] .retirement-info-metrics { background: #262d28; }
html[data-theme="dark"] .retirement-total, html[data-theme="dark"] .retirement-info-metrics strong { color: #8bcaa0; }
html[data-theme="dark"] .holding-detail, html[data-theme="dark"] .holding-account-list, html[data-theme="dark"] .holdings-more, html[data-theme="dark"] .spending-transaction-controls, html[data-theme="dark"] .retirement-form { border-color: var(--line); background: #202720; }
html[data-theme="dark"] .holding-account, html[data-theme="dark"] .holding-account-list { background: #1c231e; }
html[data-theme="dark"] .investment-donut::before, html[data-theme="dark"] .spending-donut::before { background: var(--card); }
html[data-theme="dark"] .account-collection, html[data-theme="dark"] .accounts-summary { background: var(--card); }
html[data-theme="dark"] .account-investment-detail:hover, html[data-theme="dark"] .account-detail:hover, html[data-theme="dark"] .connection-row-focused { background: #253127; }
html[data-theme="dark"] .account-connection-action { color: #dfb566; background: #3a3020; }
html[data-theme="dark"] .account-connection-action.attention { color: #e49a91; background: #3a2726; }
html[data-theme="dark"] .debt-payoff-card { border-color: var(--line); background: var(--card); }
html[data-theme="dark"] .debt-plan-summary:hover { background: rgba(255,255,255,.025); }
html[data-theme="dark"] .debt-plan-mark { background: #252d28; color: #aeb8af; }
html[data-theme="dark"] .debt-strategy-choice button { background: #1a201d; border-color: var(--line); }
html[data-theme="dark"] .debt-strategy-choice button.active { background: #2b211f; border-color: #93584c; }
html[data-theme="dark"] .debt-next-step { background: rgba(196,112,91,.12); }
html[data-theme="dark"] .debt-rate-list input { background: #151a17; color: var(--text); }
html[data-theme="dark"] .account-group-more { background: #1e261f; }
html[data-theme="dark"] .institution-logo, html[data-theme="dark"] .institution-fallback, html[data-theme="dark"] .connection-logo, html[data-theme="dark"] .connection-fallback { border-color: var(--line); background: #252d27; }
html[data-theme="dark"] .connections-panel { border-color: var(--line); background: #1a201c; }
html[data-theme="dark"] .data-controls { border-color: var(--line); background: #1a201c; }
html[data-theme="dark"] .theme-toggle i { border-color: #4a554b; background: #303a32; }
html[data-theme="dark"] .theme-toggle i::after { background: #dfe8e0; }
html[data-theme="dark"] dialog, html[data-theme="dark"] .nickname-dialog, html[data-theme="dark"] .retirement-info-dialog { border-color: #374239; background: #1b211d; }
html[data-theme="dark"] .retirement-info-head, html[data-theme="dark"] .retirement-info-footer { border-color: var(--line); background: transparent; }
html[data-theme="dark"] .retirement-info-metrics { border-color: var(--line); }
html[data-theme="dark"] .dialog-close:hover { background: #2a332c; }
html[data-theme="dark"] .connection-onboarding-dialog { border-color: #374239; background: #1b211d; }html[data-theme="dark"] .onboarding-steps > div { border-color: var(--line); background: #202720; }html[data-theme="dark"] .update-toast { border-color: #3b4b3e; background: #202820; color: var(--ink); }
@media (max-width: 560px) { .appearance-setting { padding-inline: 16px; }.theme-toggle > span { display: none; } }

/* Tapping a milestone teaches the term without making the retirement view denser. */
.retirement-milestone[data-retirement-milestone] { cursor: pointer; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.retirement-milestone[data-retirement-milestone]:hover { transform: translateY(-2px); border-color: #bcd6c2; box-shadow: 0 8px 18px rgba(31,111,74,.09); }
.retirement-info-dialog { width: min(430px, calc(100vw - 32px)); overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 20px; color: var(--ink); background: var(--card); box-shadow: 0 26px 80px rgba(19,31,22,.2); }
.retirement-info-dialog::backdrop { background: rgba(25,34,26,.24); backdrop-filter: blur(2px); }
.retirement-info-dialog form { display: grid; }
.retirement-info-head { position: relative; display: flex; align-items: center; min-height: 52px; padding: 16px 20px 0; background: transparent; }
.retirement-info-head .card-label { color: var(--muted); }
.retirement-info-head .dialog-close { position: static; margin-left: auto; width: 30px; height: 30px; border: 1px solid transparent; border-radius: 50%; font-size: 20px; }
.retirement-info-head .dialog-close:hover { border-color: var(--line); background: var(--surface-subtle); color: var(--ink); }
.retirement-info-body { padding: 14px 20px 16px; }
.retirement-info-dialog h2 { margin: 0 0 8px; font-size: 26px; font-weight: 720; letter-spacing: -.045em; }
.retirement-info-dialog #retirementInfoDescription { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.retirement-info-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 20px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-subtle); }.retirement-info-metrics > div { display: grid; gap: 4px; min-width: 0; }.retirement-info-metrics > div + div { padding-left: 14px; border-left: 1px solid var(--line); }.retirement-info-metrics span { color: var(--muted); font-size: 10px; font-weight: 700; }.retirement-info-metrics strong { overflow: hidden; color: var(--accent); font-size: 18px; font-weight: 730; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }.retirement-info-metrics > div:last-child strong { font-size: 14px; letter-spacing: -.02em; }.retirement-info-metrics small { overflow: hidden; color: var(--muted); font-size: 10px; font-weight: 620; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.retirement-info-note { margin: 13px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.retirement-info-footer { display: flex; justify-content: flex-end; padding: 0 20px 20px; background: transparent; }
.retirement-info-footer .primary { min-width: 88px; padding-block: 9px; border-radius: 10px; }
@media (max-width: 560px) { .retirement-info-dialog { width: 100vw; max-width: 100vw; margin: auto 0 0; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 22px 22px 0 0; }.retirement-info-head { min-height: 50px; padding: 16px 18px 0; }.retirement-info-body { padding: 14px 18px 16px; }.retirement-info-dialog h2 { font-size: 25px; }.retirement-info-metrics { padding: 12px 13px; }.retirement-info-metrics > div + div { padding-left: 12px; }.retirement-info-footer { padding: 0 18px calc(18px + env(safe-area-inset-bottom)); }.retirement-info-footer .primary { width: 100%; } }

/* A short post-connection explanation prevents a blank or one-point chart from
   feeling like an error. It appears once, then stays out of the way. */
.connection-onboarding-dialog { width: min(430px, calc(100vw - 30px)); padding: 0; overflow: hidden; border: 1px solid #dbe4dc; border-radius: 20px; color: var(--ink); background: var(--card); box-shadow: 0 24px 70px rgba(22,34,24,.22); }.connection-onboarding-dialog::backdrop { background: rgba(18,27,20,.34); backdrop-filter: blur(3px); }.connection-onboarding-dialog form { padding: 27px; }.connection-onboarding-dialog h2 { margin: 11px 0 8px; font-size: 27px; line-height: 1.04; letter-spacing: -.05em; }.connection-onboarding-dialog p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }.connection-onboarding-mark { display: grid; width: 38px; height: 38px; place-items: center; margin-bottom: 20px; border-radius: 13px; background: var(--accent-soft); color: var(--accent); font-size: 20px; font-weight: 800; }.onboarding-steps { display: grid; gap: 7px; margin: 21px 0; }.onboarding-steps > div { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border: 1px solid #e7ece7; border-radius: 12px; background: #fbfcfa; }.onboarding-steps i { display: grid; flex: 0 0 auto; width: 21px; height: 21px; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 10px; font-style: normal; font-weight: 750; }.onboarding-steps span { display: grid; gap: 2px; }.onboarding-steps strong { font-size: 12px; }.onboarding-steps small { color: var(--muted); font-size: 11px; line-height: 1.35; }.update-toast { position: fixed; z-index: 50; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 14px; padding: 11px 12px 11px 15px; border: 1px solid #d9e3da; border-radius: 14px; background: #fff; color: var(--ink); box-shadow: 0 12px 36px rgba(19,30,21,.16); font-size: 12px; font-weight: 650; }.update-toast button { border: 0; border-radius: 9px; padding: 7px 9px; background: var(--accent); color: white; font: inherit; font-size: 11px; font-weight: 750; }@media (max-width: 760px) { .update-toast { right: 14px; bottom: calc(88px + env(safe-area-inset-bottom)); left: 14px; justify-content: space-between; }.connection-onboarding-dialog form { padding: 23px 20px; } }

/* Keep component-specific light gradients from punching bright holes through
   the dark palette. These sit last intentionally, after component styles. */
html[data-theme="dark"] .investment-card { border-color: var(--line); background: #1a201c; }
html[data-theme="dark"] .investment-card .card-label { color: #a8b5aa; }
html[data-theme="dark"] .allocation-card { border-color: var(--line); background: var(--card); }
html[data-theme="dark"] .holdings-card summary:hover { background: #222a24; }
html[data-theme="dark"] .retirement-info-dialog { border-color: #374239; background: #1b211d; }
html[data-theme="dark"] .retirement-info-head, html[data-theme="dark"] .retirement-info-footer { border-color: var(--line); background: transparent; }
html[data-theme="dark"] .retirement-info-head .card-label, html[data-theme="dark"] .retirement-info-dialog #retirementInfoDescription, html[data-theme="dark"] .retirement-info-note { color: var(--muted); }
html[data-theme="dark"] .retirement-info-head .dialog-close:hover { background: #2a332c; }

/* In low light, the balance is the visual destination. Chart furniture and
   decorative green stay restrained so they cannot outrank that number. */
html[data-theme="dark"] .portfolio-card { border-color: #363f38; background: linear-gradient(135deg, #1d221f 0%, #1a201c 68%); box-shadow: 0 12px 30px rgba(0,0,0,.14); }
html[data-theme="dark"] .portfolio-card::after { opacity: .28; }
html[data-theme="dark"] .portfolio-card .card-label { color: #aeb9b0; }
html[data-theme="dark"] .portfolio-total { color: var(--ink); }
html[data-theme="dark"] .portfolio-card .spending-context, html[data-theme="dark"] .portfolio-card .chart-context { color: #9ba69d; }
html[data-theme="dark"] .portfolio-chart { border-color: rgba(135,174,144,.12); }
html[data-theme="dark"] .chart-grid { stroke: #2d3930; }
html[data-theme="dark"] .chart-axis-label { fill: #889489; }
html[data-theme="dark"] .scrub-line { stroke: #6f7d72; }
html[data-theme="dark"] .scrub-dot { fill: #1a201c; }
.upgrade-dialog-price { margin: 18px 0 11px; color: var(--ink); font-size: 12px; font-weight: 730; }

/* Cash-flow actions are a compact next-step cluster, not three unrelated
   full-width bars beneath the Sankey. */
.cashflow-detail-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.cashflow-action-grid { display: contents; }
.cashflow-action-grid.hidden { display: none; }
.cashflow-action-card { display: grid; grid-template-columns: 34px minmax(0, 1fr) 16px; align-items: center; gap: 10px; min-height: 86px; width: 100%; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 15px; color: var(--ink); background: linear-gradient(145deg, color-mix(in srgb, var(--card) 92%, var(--accent-soft)), var(--card)); font: inherit; text-align: left; box-shadow: 0 5px 15px rgba(24, 38, 27, .035); transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease; }
.cashflow-action-card:hover { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); background: linear-gradient(145deg, var(--accent-soft), var(--card)); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(24, 65, 40, .08); }
.cashflow-action-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 30%, transparent); outline-offset: 3px; }
.cashflow-action-card .cashflow-action-icon, .cashflow-payroll .cashflow-action-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 80%, var(--card)); font-size: 16px; font-style: normal; font-weight: 780; }
.cashflow-action-copy { display: grid; min-width: 0; gap: 2px; }
.cashflow-action-copy small, .cashflow-payroll .cashflow-action-copy > span { overflow: hidden; color: var(--muted); font-size: 9px; font-weight: 760; letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; }
.cashflow-action-copy b { overflow: hidden; font-size: 13px; font-weight: 740; letter-spacing: -.015em; text-overflow: ellipsis; white-space: nowrap; }
.cashflow-action-copy em { color: var(--muted); font-size: 10px; font-style: normal; font-weight: 620; }
.cashflow-action-card > i, .cashflow-payroll-chevron { color: var(--muted); font-size: 20px; font-style: normal; font-weight: 500; line-height: 1; }
.cashflow-more, .cashflow-transactions-action { min-height: 86px; border-color: var(--line); border-radius: 15px; background: linear-gradient(145deg, color-mix(in srgb, var(--card) 92%, var(--accent-soft)), var(--card)); }
.cashflow-more { color: var(--ink); }
.cashflow-more:hover, .cashflow-transactions-action:hover { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); background: linear-gradient(145deg, var(--accent-soft), var(--card)); transform: translateY(-2px); }
.cashflow-detail-actions { display: grid; gap: 9px; margin-top: 12px; border: 0; background: transparent; }
.cashflow-detail-actions .cashflow-action-card { min-height: 56px; }
.cashflow-detail-actions-grounded { margin: 4px 12px 0; padding-top: 10px; border-top: 1px solid var(--line); }
.cashflow-detail-actions-grounded .cashflow-transactions-action { min-height: 48px; padding: 8px 2px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.cashflow-detail-actions-grounded .cashflow-transactions-action:hover { border: 0; background: color-mix(in srgb, var(--accent-soft) 52%, transparent); transform: none; }
.cashflow-payroll { grid-template-columns: 34px minmax(0, 1fr) auto 16px; min-height: 86px; padding: 14px; border-color: var(--line); background: linear-gradient(145deg, color-mix(in srgb, var(--card) 92%, var(--accent-soft)), var(--card)); }
.cashflow-payroll .cashflow-action-copy { grid-template-columns: minmax(0, 1fr); }
.cashflow-payroll .cashflow-action-copy strong { grid-column: 1; color: var(--ink); font-size: 17px; font-weight: 760; letter-spacing: -.035em; }
.cashflow-payroll .cashflow-action-copy p { margin: 2px 0 0; max-width: 35ch; color: var(--muted); font-size: 10px; line-height: 1.35; }
.cashflow-payroll .cashflow-payroll-lock { grid-column: 1; margin-top: 4px; }
.cashflow-payroll > .cashflow-action-copy + .cashflow-payroll-chevron { grid-column: 4; }
@media (min-width: 761px) {
  .cashflow-detail-cards:has(.cashflow-payroll) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cashflow-detail-cards .cashflow-payroll { grid-column: 1 / -1; }
}
@media (max-width: 760px) { .cashflow-detail-cards { grid-template-columns: 1fr; gap: 8px; }.cashflow-action-card, .cashflow-more, .cashflow-transactions-action, .cashflow-payroll { min-height: 64px; }.cashflow-payroll { grid-template-columns: 34px minmax(0, 1fr) 16px; }.cashflow-payroll .cashflow-action-copy strong { font-size: 15px; }.cashflow-payroll .cashflow-action-copy p { display: none; } }
/* Three small cards make labels feel cramped on an iPad. Keep the two simple
   actions paired, then give the richer payroll explanation a full row. */
@media (min-width: 761px) and (max-width: 1200px) { .cashflow-detail-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }.cashflow-detail-cards .cashflow-payroll { grid-column: 1 / -1; }.cashflow-payroll .cashflow-action-copy > span { overflow: visible; text-overflow: clip; } }

/* A protected cash-flow view should feel like a premium continuation of the
   app, not a generic disabled table. */
.cashflow-dialog.plus-preview { height: fit-content !important; }
.cashflow-dialog.plus-preview #cashflowDialogContent { overflow: visible; }
.cashflow-plus-preview { gap: 18px; padding: 0 18px 20px; background: radial-gradient(circle at 90% 0, rgba(187, 225, 202, .72), transparent 29%), linear-gradient(145deg, #f5faf6 0%, #fff 58%); }
.cashflow-plus-preview::before { top: -130px; right: -130px; width: 360px; height: 360px; background: rgba(42, 126, 83, .09); filter: blur(9px); }
.cashflow-plus-preview-hero { display: grid; grid-template-columns: minmax(0, 1fr) 180px; align-items: end; gap: 18px; min-height: 176px; padding: 30px 2px 4px; }
.cashflow-plus-preview h2 { max-width: 560px; margin: 8px 0 9px; font-size: clamp(30px, 4vw, 42px); letter-spacing: -.06em; }
.cashflow-plus-preview p { max-width: 520px; margin: 0; font-size: 14px; line-height: 1.48; }
.cashflow-plus-preview-spark { position: relative; align-self: stretch; min-height: 116px; overflow: hidden; border: 1px solid rgba(55, 132, 88, .16); border-radius: 22px 22px 10px 22px; background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(221, 240, 227, .66)); box-shadow: inset 0 1px rgba(255,255,255,.72), 0 15px 34px rgba(32, 88, 54, .08); }
.cashflow-plus-preview-spark::after { position: absolute; right: 12px; bottom: 12px; left: 12px; height: 46%; border-radius: 14px 14px 4px 4px; background: linear-gradient(90deg, rgba(43, 124, 82, .08), rgba(43, 124, 82, .28)); clip-path: polygon(0 90%, 18% 72%, 40% 80%, 62% 35%, 80% 50%, 100% 0, 100% 100%, 0 100%); content: ''; }
.cashflow-plus-preview-spark i { position: absolute; bottom: 20px; width: 12px; border-radius: 99px; background: linear-gradient(#b7dac2, #2b7c52); box-shadow: 0 5px 10px rgba(29, 102, 64, .16); }
.cashflow-plus-preview-spark i:nth-child(1) { left: 20px; height: 28px; }.cashflow-plus-preview-spark i:nth-child(2) { left: 52px; height: 43px; }.cashflow-plus-preview-spark i:nth-child(3) { left: 84px; height: 36px; }.cashflow-plus-preview-spark i:nth-child(4) { left: 116px; height: 66px; }
.cashflow-plus-preview-rows { gap: 11px; margin: 0; padding: 17px 18px; border: 1px solid rgba(82, 144, 107, .2); border-radius: 18px; background: rgba(255,255,255,.68); box-shadow: 0 18px 34px rgba(37, 80, 51, .06); opacity: 1; backdrop-filter: blur(10px); }
.cashflow-plus-preview-rows > div { min-height: 31px; }
.cashflow-plus-preview-rows > div:not(.cashflow-plus-preview-head) { padding: 4px 0; }
.cashflow-plus-preview-rows i { width: 10px; height: 10px; background: #8fc5a4; box-shadow: 0 0 0 4px rgba(143,197,164,.16); }
.cashflow-plus-preview-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 3px 0 0; }
.cashflow-plus-preview-footer > div { display: grid; gap: 3px; }
.cashflow-plus-preview-footer small { color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.cashflow-plus-preview-footer strong { color: var(--ink); font-size: 20px; letter-spacing: -.04em; }.cashflow-plus-preview-footer strong span { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0; }
.cashflow-plus-preview-footer em { color: var(--muted); font-size: 10px; font-style: normal; font-weight: 620; }
.cashflow-plus-preview-footer .primary { min-height: 50px; padding: 0 19px; border-radius: 14px; background: linear-gradient(135deg, #1a2a20, #204c35); box-shadow: 0 13px 24px rgba(24, 60, 39, .2); font-size: 13px; }.cashflow-plus-preview-footer .primary:hover { background: linear-gradient(135deg, #132018, #1a5e3d); transform: translateY(-1px); }
@media (max-width: 640px) { .cashflow-plus-preview { padding: 0 16px calc(18px + env(safe-area-inset-bottom)); }.cashflow-plus-preview-hero { grid-template-columns: 1fr; min-height: 0; padding-top: 25px; }.cashflow-plus-preview-spark { display: none; }.cashflow-plus-preview-footer { align-items: stretch; flex-direction: column; gap: 13px; }.cashflow-plus-preview-footer .primary { width: 100%; }.cashflow-plus-preview-rows { padding: 14px; } }
.premium-badge { display: inline-flex; align-items: center; justify-self: start; width: fit-content; min-height: 20px; margin-top: 4px; padding: 4px 8px; border: 1px solid var(--premium-line); border-radius: 999px; color: var(--accent); background: var(--premium-surface); font-size: 9px; font-weight: 760; letter-spacing: .01em; line-height: 1; white-space: nowrap; }
.cashflow-more .premium-badge, .cashflow-transactions-action .premium-badge, .cashflow-payroll .premium-badge { margin-top: 4px; }
.cashflow-action-card:disabled { cursor: default; opacity: .62; }.cashflow-action-card:disabled:hover { border-color: var(--line); background: linear-gradient(145deg, color-mix(in srgb, var(--card) 92%, var(--accent-soft)), var(--card)); box-shadow: 0 5px 15px rgba(24, 38, 27, .035); transform: none; }

/* Full dark-surface audit: interactive controls must never inherit the light
   theme's white surfaces or use the light text token as a background. */
html[data-theme="dark"] .primary { background: #2d744a; color: #edf2ee; box-shadow: 0 3px 10px rgba(0,0,0,.18); }
html[data-theme="dark"] .primary:hover { background: #368456; }
html[data-theme="dark"] .brand-mark { background: #2d744a; color: #edf2ee; }
html[data-theme="dark"] .profile-button { border-color: #3a463d; background: #202720; color: #b6c0b8; }
html[data-theme="dark"] .profile-button:hover { border-color: #4c7357; background: #273128; color: #a7d9b4; }
html[data-theme="dark"] .account-preview-group, html[data-theme="dark"] .account-group-head, html[data-theme="dark"] .transaction-toolbar { border-color: var(--line); background: #202720; }
html[data-theme="dark"] .accounts-summary, html[data-theme="dark"] .account-collection { background: var(--card); }
html[data-theme="dark"] .account-type, html[data-theme="dark"] .code-row code, html[data-theme="dark"] .tx-icon { background: #273029; color: #b6c0b8; }
html[data-theme="dark"] .exclude-button { border-color: var(--line); background: #202720; }
html[data-theme="dark"] .exclude-button.active { background: #422b2c; color: var(--danger); }
html[data-theme="dark"] .account-rename:hover { background: #273128; }
html[data-theme="dark"] .sankey-label, html[data-theme="dark"] .cashflow-label { fill: #a7b1a9; }
html[data-theme="dark"] .sankey-value, html[data-theme="dark"] .cashflow-value { fill: var(--ink); }
html[data-theme="dark"] .cashflow-share { fill: #a7b1a9; }
html[data-theme="dark"] .cashflow-flow { stroke-opacity: .25; }
html[data-theme="dark"] .auth-screen { background: #111513; }
html[data-theme="dark"] .auth-card { border-color: #344036; background: rgba(26,32,28,.94); box-shadow: 0 28px 72px rgba(0,0,0,.2); }
html[data-theme="dark"] .auth-halo-one { background: radial-gradient(circle, rgba(46,116,74,.24) 0, rgba(46,116,74,0) 68%); }
html[data-theme="dark"] .auth-halo-two { background: radial-gradient(circle, rgba(67,89,69,.2) 0, rgba(67,89,69,0) 69%); }
html[data-theme="dark"] .auth-preview { border-color: #344036; background: linear-gradient(140deg, #1c281f 0%, #1a201c 80%); }
html[data-theme="dark"] .auth-kicker, html[data-theme="dark"] .auth-preview span, html[data-theme="dark"] .auth-divider, html[data-theme="dark"] .auth-note, html[data-theme="dark"] .auth-demo-note { color: var(--muted); }
html[data-theme="dark"] .auth-kicker i { box-shadow: 0 0 0 4px #262d28; }
html[data-theme="dark"] .auth-divider::before, html[data-theme="dark"] .auth-divider::after { background: var(--line); }
html[data-theme="dark"] .demo-preview-button { border-color: #3a493d; background: #202720; color: var(--ink); }
html[data-theme="dark"] .demo-preview-button:hover { border-color: #52735b; background: #273128; }

/* Dark mode is intentionally neutral. Green is a signal for an action or a
   positive financial event—not a wash behind every piece of information. */
html[data-theme="dark"] .card,
html[data-theme="dark"] .account-collection,
html[data-theme="dark"] .accounts-summary,
html[data-theme="dark"] .connections-panel,
html[data-theme="dark"] .data-controls,
html[data-theme="dark"] dialog,
html[data-theme="dark"] .nickname-dialog,
html[data-theme="dark"] .retirement-info-dialog,
html[data-theme="dark"] .auth-card { border-color: #353936; background: #1c1f1d; }
html[data-theme="dark"] .portfolio-card,
html[data-theme="dark"] .retirement-hero { background: #1c1f1d; }
html[data-theme="dark"] .retirement-review-plan { border-color: #486a53; color: #a6d8b2; }
html[data-theme="dark"] .retirement-review-plan:hover, html[data-theme="dark"] .retirement-review-plan:focus-visible { background: #27372c; }
html[data-theme="dark"] .retirement-review-plan.needs-setup { border-color: #6f9f7b; color: #d6f0dc; background: #2b4933; }
html[data-theme="dark"] .portfolio-card::after { display: none; }
html[data-theme="dark"] .retirement-milestone,
html[data-theme="dark"] .retirement-milestone.featured,
html[data-theme="dark"] .holding-detail,
html[data-theme="dark"] .holding-account,
html[data-theme="dark"] .holding-account-list,
html[data-theme="dark"] .holdings-more,
html[data-theme="dark"] .spending-transaction-controls,
html[data-theme="dark"] .retirement-form,
html[data-theme="dark"] .account-preview-group,
html[data-theme="dark"] .account-group-head,
html[data-theme="dark"] .transaction-toolbar { border-color: #353936; background: #222522; }
html[data-theme="dark"] .auth-halo { display: none; }
/* The first-run invitation is a deliberate dark-surface component, not a
   light banner carried over from the default theme. */
html[data-theme="dark"] :is(.onboarding-preview-banner, .onboarding-tab-cta) {
  /* Explicit, opaque surface: a translucent or inherited light gradient
     makes the first-run invitation wash out against the dark application. */
  border-color: #38513f !important;
  background: #1d2821 !important;
  box-shadow: none;
}
html[data-theme="dark"] :is(.onboarding-preview-banner, .onboarding-tab-cta) > div { background: transparent !important; }
html[data-theme="dark"] :is(.onboarding-preview-banner, .onboarding-tab-cta) strong { color: var(--ink); }
html[data-theme="dark"] :is(.onboarding-preview-banner, .onboarding-tab-cta) span { color: #aeb9b0; }
html[data-theme="dark"] :is(.onboarding-preview-banner, .onboarding-tab-cta) .primary { background: #287a4d; color: #fff; }

/* Keep infrequent dark states inside the same token system as the app shell.
   These rules are deliberately last: several legacy component rules carry
   light-only literals with equal specificity. */
html[data-theme="dark"] .networth-movement-inline[data-tone="watch"] strong,
html[data-theme="dark"] .overview-movement[data-tone="watch"] strong,
html[data-theme="dark"] .connection-status.stale,
html[data-theme="dark"] .connection-status.attention,
html[data-theme="dark"] .account-connection-action { color: var(--warning); }
html[data-theme="dark"] .account-connection-action { background: var(--warning-soft); }
html[data-theme="dark"] .connection-status.stale::before,
html[data-theme="dark"] .connection-status.attention::before { background: var(--warning); }
html[data-theme="dark"] .investment-account-value small.negative { color: var(--outflow); }
html[data-theme="dark"] .spending-transaction-controls { background: var(--surface-subtle); }
html[data-theme="dark"] .spending-transaction-controls select { background: var(--card); color: var(--ink); }
html[data-theme="dark"] .holding-history-metrics > div { background: var(--surface-subtle); }
html[data-theme="dark"] .holding-history-tabs,
html[data-theme="dark"] .holding-history-range,
html[data-theme="dark"] .range-control,
html[data-theme="dark"] .allocation-toggle { background: var(--control); }
html[data-theme="dark"] .holding-history-tabs button.active,
html[data-theme="dark"] .holding-history-range button.active,
html[data-theme="dark"] .range-control button.active,
html[data-theme="dark"] .allocation-toggle button.active { background: var(--card); color: var(--ink); }
html[data-theme="dark"] .holding-history-skeleton i {
  background: linear-gradient(90deg, var(--control) 25%, var(--surface-subtle) 42%, var(--control) 58%);
}
html[data-theme="dark"] .debt-rate-list input { color: var(--ink); }

/* Dark mode uses charcoal layers for structure. Green is intentionally scarce:
   it marks positive movement and primary actions, rather than every surface. */
html[data-theme="dark"] .sidebar { background: #15181c; }
html[data-theme="dark"] .nav-item:hover,
html[data-theme="dark"] .nav-item.active,
html[data-theme="dark"] .account-investment-detail:hover,
html[data-theme="dark"] .account-detail:hover,
html[data-theme="dark"] .connection-row-focused { background: #252a30; }
html[data-theme="dark"] .secondary,
html[data-theme="dark"] input,
html[data-theme="dark"] select { background: #22272d; }
html[data-theme="dark"] .mobile-nav { border-color: var(--line); background: rgba(22,25,29,.96); }
html[data-theme="dark"] .mobile-nav button.active { background: #292e35; }
html[data-theme="dark"] .range-control,
html[data-theme="dark"] .allocation-toggle,
html[data-theme="dark"] .holding-history-tabs,
html[data-theme="dark"] .holding-history-range { background: var(--control); }
html[data-theme="dark"] .range-control button.active,
html[data-theme="dark"] .allocation-toggle button.active,
html[data-theme="dark"] .holding-history-tabs button.active,
html[data-theme="dark"] .holding-history-range button.active { background: #343a42; }
html[data-theme="dark"] .investment-account-mark,
html[data-theme="dark"] .institution-logo,
html[data-theme="dark"] .institution-fallback,
html[data-theme="dark"] .connection-logo,
html[data-theme="dark"] .connection-fallback { background: #252a30; }
html[data-theme="dark"] .investment-account-row:hover,
html[data-theme="dark"] .holding-row:hover,
html[data-theme="dark"] .holdings-card summary:hover { background: #252a30; }
html[data-theme="dark"] .investment-range-chip { border-color: #414851; color: var(--muted); background: #252a30; }
html[data-theme="dark"] .portfolio-card,
html[data-theme="dark"] .retirement-hero,
html[data-theme="dark"] .card,
html[data-theme="dark"] .account-collection,
html[data-theme="dark"] .accounts-summary,
html[data-theme="dark"] .connections-panel,
html[data-theme="dark"] .data-controls,
html[data-theme="dark"] dialog,
html[data-theme="dark"] .nickname-dialog,
html[data-theme="dark"] .retirement-info-dialog,
html[data-theme="dark"] .auth-card { border-color: #353b43; background: var(--card); }
html[data-theme="dark"] .retirement-milestone,
html[data-theme="dark"] .retirement-milestone.featured,
html[data-theme="dark"] .holding-detail,
html[data-theme="dark"] .holding-account,
html[data-theme="dark"] .holding-account-list,
html[data-theme="dark"] .holdings-more,
html[data-theme="dark"] .spending-transaction-controls,
html[data-theme="dark"] .retirement-form,
html[data-theme="dark"] .account-preview-group,
html[data-theme="dark"] .account-group-head,
html[data-theme="dark"] .transaction-toolbar { border-color: #3b424b; background: #22272d; }
html[data-theme="dark"] :is(.onboarding-preview-banner, .onboarding-tab-cta) { border-color: #3b424b !important; background: #20252b !important; }
html[data-theme="dark"] :is(.onboarding-preview-banner, .onboarding-tab-cta) span { color: var(--muted); }
html[data-theme="dark"] .investment-donut::before,
html[data-theme="dark"] .spending-donut::before { background: var(--card); }
html[data-theme="dark"] .notice { border-color: #3b424b; background: #22272d; }
html[data-theme="dark"] .notice[data-tone="success"] { border-color: #386248; background: #1d3025; color: #8dd8a9; }
html[data-theme="dark"] .update-toast { border-color: #3b424b; background: #22272d; }
html[data-theme="dark"] .portfolio-chart { border-color: rgba(198,205,213,.14); }
html[data-theme="dark"] .chart-grid { stroke: #353b43; }
html[data-theme="dark"] .chart-axis-label { fill: #8f99a4; }
html[data-theme="dark"] .sankey-label,
html[data-theme="dark"] .cashflow-label,
html[data-theme="dark"] .cashflow-share { fill: #aab2bc; }
html[data-theme="dark"] .sankey-value,
html[data-theme="dark"] .cashflow-value { fill: var(--ink); }

/* Keep equivalent text roles equivalent across the investment overview. */
html[data-theme="dark"] :is(
  .investment-account-copy strong,
  .holding-ticker,
  .position-value b,
  .investment-allocation-row span,
  .investment-allocation-row strong,
  .investment-card-heading strong,
  .holdings-head strong
) { color: var(--text-primary); }
html[data-theme="dark"] :is(
  .investment-account-copy > span,
  .holding-name,
  .holding-copy > span,
  .holding-weight span,
  .investment-account-tracking,
  .investment-card .spending-context,
  .holdings-head .spending-context
) { color: var(--text-secondary); }
html[data-theme="dark"] :is(
  .investment-card .card-label,
  .holdings-head .card-label,
  .investment-allocation-row small,
  .investment-range-chip
) { color: var(--text-tertiary); }

/* Classification is an optional edit, so it should recede beneath the
   verified value and performance rather than read like a second headline. */
.holding-history-class { align-items: baseline; gap: 4px; margin-top: 4px; color: var(--muted); font-size: 10px; font-weight: 650; opacity: .78; }
.holding-history-class:hover, .holding-history-class:focus-within { opacity: 1; }
.holding-history-class select { min-height: 20px; max-width: 150px; border: 0; border-bottom: 1px solid transparent; border-radius: 0; padding: 1px 13px 1px 0; color: inherit; background: transparent; font-size: 10px; font-weight: 720; }
.holding-history-class select:hover { border-bottom-color: color-mix(in srgb, var(--muted) 45%, transparent); color: var(--ink); }
.holding-history-class select:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); outline-offset: 2px; }
html[data-theme="dark"] .holding-history-class { color: var(--text-tertiary); }

/* Public legal pages deliberately use the same quiet visual system as the app. */
.legal-body { min-height: 100vh; background: radial-gradient(circle at 12% -12%, #e3f1e6 0, transparent 33%), var(--bg); }
.legal-page { width: min(760px, calc(100% - 40px)); margin: 0 auto; padding: clamp(25px, 5vw, 52px) 0 72px; color: var(--ink); line-height: 1.65; }
.legal-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:clamp(28px, 6vw, 56px); }
.legal-brand { display:flex; align-items:center; gap:10px; color:var(--ink); font-size:18px; font-weight:750; letter-spacing:-.025em; text-decoration:none; }
.legal-brand .brand-mark { width:31px; height:31px; border-radius:10px; }.legal-brand .brand-mark svg { width:18px; }
.legal-back { display:inline-flex; align-items:center; gap:6px; color:var(--accent); font-size:13px; font-weight:720; text-decoration:none; }.legal-back:hover { color:#185d3d; }.legal-back:focus-visible, .legal-brand:focus-visible { outline:3px solid #b9d9c2; outline-offset:4px; border-radius:8px; }
.legal-card { padding:clamp(27px, 5vw, 46px); border:1px solid #dfe7df; border-radius:24px; background:rgba(255,255,255,.9); box-shadow:0 20px 52px rgba(30,48,33,.06); }
.legal-card h1 { margin:10px 0 29px; font-size:clamp(2.15rem, 6vw, 3.5rem); letter-spacing:-.06em; line-height:1; }.legal-content h2 { margin:31px 0 8px; font-size:1.05rem; letter-spacing:-.02em; }.legal-content p { margin:0 0 17px; color:var(--muted); }.legal-content a { color:var(--accent); font-weight:700; }.legal-kicker, .legal-updated { color:#718074; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }.legal-kicker { margin:0; }.legal-updated { margin:31px 0 0; padding-top:17px; border-top:1px solid var(--line); }
@media (max-width:560px) { .legal-page { width:min(100% - 28px, 760px); padding-top:22px; }.legal-header { margin-bottom:29px; }.legal-card { padding:25px 21px; border-radius:20px; }.legal-card h1 { font-size:2.25rem; }.legal-back { font-size:12px; } }
.auth-legal { margin: 14px 0 0; color: var(--subtle); font-size: .78rem; }
.auth-legal a { display: inline-block; padding: 3px 1px; border-radius: 4px; color: var(--accent); font-weight: 720; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 42%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.auth-legal a:hover, .auth-legal a:focus-visible { color: var(--green); text-decoration-color: currentColor; outline: none; }
.auth-legal span { margin: 0 7px; }

/* Retirement is a short path, not a wall of calculator inputs. */
.retirement-ladder-heading { margin-top: 24px; }
.retirement-ladder-heading, .retirement-lifestyles-tools { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.retirement-ladder-heading p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.retirement-path { margin-top: 12px; }
.retirement-milestone.complete { border-color: #c6dfcc; background: #f8fcf8; }
.retirement-lifestyles { display: block; margin-top: 16px; padding: 0; overflow: hidden; }.retirement-lifestyles > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer; list-style: none; }.retirement-lifestyles > summary::-webkit-details-marker { display: none; }.retirement-lifestyles > summary > span { display: grid; gap: 3px; }.retirement-lifestyles > summary .card-label { font-size: 10px; }.retirement-lifestyles > summary strong { font-size: 14px; }.retirement-lifestyles > summary small { color: var(--muted); font-size: 12px; line-height: 1.35; }.retirement-lifestyles > summary > i { color: var(--muted); font-size: 20px; font-style: normal; transition: transform .16s ease; }.retirement-lifestyles[open] > summary > i { transform: rotate(90deg); }.retirement-lifestyles-content { display: grid; gap: 16px; padding: 0 22px 21px; border-top: 1px solid var(--line); }
.retirement-lifestyles-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.retirement-lifestyle-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.retirement-lifestyle { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fafcf9; }
.retirement-lifestyle.featured { border-color: #bcd6c2; background: #f5faf6; }
.retirement-lifestyle span, .retirement-lifestyle small { color: var(--muted); font-size: 10px; font-weight: 650; }
.retirement-lifestyle strong { font-size: 18px; letter-spacing: -.035em; }
.retirement-scenario-paywall { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 16px; border: 1px solid #cfe2d4; border-left: 4px solid var(--accent); border-radius: 14px; background: linear-gradient(110deg, var(--accent-soft), var(--card)); }
.retirement-scenario-preview { display: grid; flex: 0 0 110px; gap: 6px; padding: 5px 0; opacity: .62; }
.retirement-scenario-preview i { display: block; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--muted) 28%, var(--card)); }
.retirement-scenario-preview i:nth-child(1) { width: 92%; background: color-mix(in srgb, var(--accent) 44%, var(--card)); }
.retirement-scenario-preview i:nth-child(2) { width: 72%; }
.retirement-scenario-preview i:nth-child(3) { width: 84%; }
.retirement-scenario-paywall > div { display: grid; gap: 4px; min-width: 0; }
.retirement-scenario-paywall .card-label { color: var(--accent); font-size: 10px; }
.retirement-scenario-paywall strong { font-size: 14px; letter-spacing: -.02em; }
.retirement-scenario-paywall p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.retirement-scenario-paywall button { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line)); border-radius: 999px; padding: 9px 13px; color: var(--accent); background: var(--card); font: inherit; font-size: 11px; font-weight: 750; }
.retirement-scenario-paywall button:hover { border-color: var(--accent); background: var(--accent-soft); }
.retirement-milestone em { color: var(--accent); font-size: 10px; font-style: normal; font-weight: 750; }
.retirement-method { position: relative; flex: 0 0 auto; }.retirement-method summary { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: var(--card); cursor: pointer; font-size: 12px; font-weight: 800; list-style: none; }.retirement-method summary::-webkit-details-marker { display: none; }.retirement-method summary:hover { border-color: #a9c2af; color: var(--accent); }.retirement-method > div { position: absolute; z-index: 4; right: 0; bottom: 28px; width: min(300px, calc(100vw - 40px)); padding: 15px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: var(--card); box-shadow: 0 12px 30px rgba(20,30,20,.12); }.retirement-method-popover { pointer-events: none; }.retirement-method-popover > strong { display: block; font-size: 12px; }.retirement-method-popover > p { margin: 5px 0 11px; color: var(--muted); font-size: 11px; line-height: 1.4; }.retirement-method-popover ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }.retirement-method-popover li { display: grid; gap: 2px; padding: 8px 9px; border-radius: 9px; background: var(--surface); }.retirement-method-popover li b { font-size: 10px; }.retirement-method-popover li span, .retirement-method-popover > small { color: var(--muted); font-size: 10px; line-height: 1.35; }.retirement-method-popover > small { display: block; margin-top: 10px; }
.retirement-hero .retirement-method > .retirement-method-popover { top: 34px; bottom: auto; }
.retirement-milestone::before { display: none; }
.retirement-milestone[data-retirement-milestone]::after { position: absolute; top: 11px; right: 12px; color: var(--muted); content: '›'; font-size: 18px; font-style: normal; line-height: 1; }
.retirement-milestone[data-retirement-milestone]:hover::after { color: var(--accent); }
/* Help tips open above their trigger. Let them extend past the decorative
   retirement card instead of clipping their heading on smaller screens. */
.retirement-hero { overflow: visible; }
html[data-theme="dark"] .retirement-lifestyles { background: #1c1f1d; }
html[data-theme="dark"] .retirement-milestone.complete, html[data-theme="dark"] .retirement-lifestyle, html[data-theme="dark"] .retirement-lifestyle.featured { border-color: #353936; background: #222522; }
@media (max-width: 760px) { .retirement-context-chips { justify-items: start; }.retirement-next-milestone { align-items: flex-start; flex-direction: column; gap: 7px; }.retirement-lifestyles > summary { padding: 17px 18px; }.retirement-lifestyles-content { padding: 0 18px 18px; }.retirement-lifestyles-head { align-items: flex-start; flex-direction: column; gap: 8px; }.retirement-lifestyle-paths { grid-template-columns: 1fr; }.retirement-scenario-paywall { align-items: stretch; flex-direction: column; gap: 12px; }.retirement-scenario-preview { width: 100%; flex-basis: auto; }.retirement-scenario-paywall button { width: 100%; justify-content: center; } }
/* On a phone, a narrow anchored popover competes with the card edge. Treat
   calculation help as a small bottom sheet instead: it has a stable reading
   width, stays inside the viewport, and dismisses with the existing tap-outside
   behavior. */
@media (max-width: 560px) { .retirement-method[open] > .retirement-method-popover { position: fixed; z-index: 60; top: auto; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); left: 16px; width: auto; max-height: min(420px, calc(100dvh - 116px)); overflow: auto; padding: 18px; border-radius: 18px; box-shadow: 0 20px 54px rgba(20,30,20,.2); }.retirement-method-popover > strong { font-size: 13px; }.retirement-method-popover > p { font-size: 12px; }.retirement-method-popover li { padding: 10px; }.retirement-method-popover li b, .retirement-method-popover li span, .retirement-method-popover > small { font-size: 11px; } }

/* A range metric belongs visually with each holding, but stays quieter than
   the reported value so an account drawer remains easy to scan. */
.holding-history-where strong { grid-row: 1; align-self: end; justify-self: end; }
.holding-history-performance { grid-column: 2; grid-row: 2; display: grid; justify-items: end; align-self: start; color: var(--accent); font-size: 10px; font-style: normal; font-weight: 720; font-variant-numeric: tabular-nums; white-space: nowrap; }
.holding-history-performance.negative { color: var(--danger); }
.holding-history-performance small { color: inherit; font-size: 9px; font-weight: 620; }
.holding-history-where > .holding-history-where-heading { display: flex; grid-template-columns: none; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; padding: 0; border: 0; }
.holding-history-where-heading > span { color: var(--muted); font-size: 11px; font-weight: 720; }
.holding-history-where-heading > small { color: var(--muted); font-size: 10px; font-weight: 650; text-transform: lowercase; }
.holding-history-where > div:not(.holding-history-where-heading) { grid-template-columns: minmax(0, 1fr) minmax(132px, auto); }
.holding-history-performance { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 4px; }

/* Timeframe is the one control that changes every number in this sheet. Keep
   it in reach while a person compares individual holdings, without making it
   a page-level floating widget. */
.holding-history-controls { position: sticky; z-index: 3; top: 0; margin: 0 -4px; padding: 8px 4px; background: var(--card); border-bottom: 1px solid var(--line); }
.holding-history-controls[data-timeframe-scope="detail"] .holding-history-range { border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--card) 58%, transparent); }
@media (max-width: 560px) { .holding-history-controls { top: 94px; margin-inline: -4px; } }
@media (max-width: 560px) { .account-history-dialog .holding-history-head .dialog-close { display: grid; } }

.account-history-activity { display: grid; gap: 0; margin-top: 18px; }
.account-history-activity h3 { margin: 0 0 7px; color: var(--muted); font-size: 11px; font-weight: 720; }
.account-history-activity > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.account-history-activity span { display: grid; min-width: 0; gap: 2px; }
.account-history-activity b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.account-history-activity small { color: var(--muted); font-size: 10px; }
.account-history-activity strong { flex: 0 0 auto; font-size: 12px; font-variant-numeric: tabular-nums; }.account-history-activity-value { display: grid; justify-items: end; gap: 4px; }

/* These follow the retirement component's late light-mode refinements so
   their dark equivalents cannot be displaced by CSS order. */
html[data-theme="dark"] .retirement-next-milestone {
  border-color: #39453d;
  background: #222a24;
  color: var(--ink);
  box-shadow: none;
}
html[data-theme="dark"] .retirement-next-milestone:hover { border-color: #52705a; background: #263128; }
html[data-theme="dark"] .retirement-next-milestone small { color: var(--muted); }
html[data-theme="dark"] .retirement-next-milestone > b { color: #a7cfb1; }
html[data-theme="dark"] .retirement-age-chip,
html[data-theme="dark"] .retirement-coverage-chip,
html[data-theme="dark"] .retirement-assumption { background: #262d27; color: #aeb9b0; }
html[data-theme="dark"] .retirement-milestone,
html[data-theme="dark"] .retirement-milestone.complete { border-color: #353e37; background: #1f2521; box-shadow: none; }
html[data-theme="dark"] .retirement-milestone[data-retirement-milestone]:hover { border-color: #4c6653; background: #222a24; box-shadow: none; }
html[data-theme="dark"] .retirement-milestone-name { color: #aeb9b0; }
html[data-theme="dark"] .retirement-milestone i { background: #343d36; }
html[data-theme="dark"] .retirement-milestone em { background: #27362d; color: #a7cfb1; }

/* App-wide dark-surface hierarchy. Neutral layers do the organizational work;
   green, coral, and blue remain reserved for meaning rather than decoration. */
html[data-theme="dark"] :is(
  .monthly-review,
  .connection-attention,
  .retirement-form,
  .transaction-toolbar,
  .spending-transaction-controls,
  .holding-detail,
  .holdings-more,
  .account-preview-group,
  .account-group-head,
  .account-group-more,
  .profile-shell .sign-out-button,
  .holding-history-metrics > div
) {
  border-color: var(--line);
  background: var(--surface-subtle);
  color: var(--ink);
  box-shadow: none;
}
html[data-theme="dark"] :is(
  .range-control,
  .allocation-toggle,
  .holding-history-tabs,
  .holding-history-range,
  .theme-toggle i
) { background: var(--control); }
html[data-theme="dark"] :is(
  .range-control button.active,
  .allocation-toggle button.active,
  .holding-history-tabs button.active,
  .holding-history-range button.active
) { background: var(--card); color: var(--ink); }
html[data-theme="dark"] :is(
  input[type="month"],
  .search,
  .holdings-head select,
  .holding-detail select,
  .spending-transaction-controls select,
  .manual-holding-dialog input,
  .manual-holding-dialog select,
  #manualAccountDialog input,
  #manualAccountDialog select,
  #goalDialog input,
  #goalDialog select
) { border-color: var(--line); background: var(--surface-subtle); color: var(--ink); }
html[data-theme="dark"] :is(
  .goal-progress,
  .retirement-milestone i,
  .holding-weight > i,
  .allocation-row i
) { background: #343d36; }
html[data-theme="dark"] :is(
  .retirement-coverage-chip,
  .demo-setting-status
) { background: #262d27; color: #aeb9b0; }
html[data-theme="dark"] .profile-shell .sign-out-button:hover {
  color: #a7cfb1;
  background: #263128;
  box-shadow: inset 0 0 0 1px #3c5141;
}

/* Accounts are an inventory, not a performance report. In dark mode their
   values stay calm and neutral; green and coral retain their meaning for a
   genuine gain or money owed. */
html[data-theme="dark"] .accounts-summary strong:not(.negative),
html[data-theme="dark"] .account-collection.asset .account-collection-total strong,
html[data-theme="dark"] .account-item.asset .account-inline-balance { color: #bdc8c0; }
html[data-theme="dark"] .account-collection-head h2 { color: #cbd5cd; }
html[data-theme="dark"] .account-item .account-name { color: #c3cdc5; }
html[data-theme="dark"] :is(
  .account-collection-head p,
  .account-collection-total span,
  .account-inst,
  .account-detail > i,
  .account-rename
) { color: var(--muted); }

/* Keep the two retirement planning inputs easy to scan independently. */
.retirement-inputs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.retirement-inputs > span { display: inline-flex; align-items: baseline; gap: 5px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: color-mix(in srgb, var(--card) 86%, var(--accent-soft)); font-size: 10px; font-weight: 650; }
.retirement-inputs > span strong { color: var(--ink); font-size: 11px; font-variant-numeric: tabular-nums; }
.retirement-inputs > span small { color: var(--muted); font-size: 9px; }
html[data-theme="dark"] .retirement-inputs > span { border-color: #39443b; background: #222a24; }
html[data-theme="dark"] .retirement-inputs > span strong { color: var(--ink); }
/* Keep chart value/date bubbles readable on narrow screens. */
.holding-history-dialog .chart-tooltip { max-width: calc(100% - 18px); overflow: visible; text-overflow: clip; }
.plus-history-preview { display: grid; align-content: end; gap: 7px; height: 100%; min-height: 180px; padding: 15px 12px 12px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(160deg, var(--surface-subtle), var(--accent-soft)); }.plus-history-preview svg { width: 100%; height: 100%; min-height: 145px; display: block; }.plus-history-grid { fill: none; stroke: var(--line); stroke-width: 1; }.plus-history-area { fill: color-mix(in srgb, var(--accent) 16%, transparent); }.plus-history-line { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }.plus-history-preview > span { color: var(--muted); font-size: 10px; font-weight: 650; }
.plus-history-cta { display: grid !important; gap: 6px !important; padding: 15px !important; border: 1px solid #cfe2d4; border-radius: 14px; background: var(--accent-soft); }.plus-history-cta .card-label { color: var(--accent); }.plus-history-cta strong { font-size: 13px; }.plus-history-cta button { justify-self: start; margin-top: 5px; }
.plus-history-teasers { display: grid; gap: 8px; padding: 4px 0 10px; }.plus-history-teaser-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 12px; }.plus-history-teaser-row b { color: var(--muted); letter-spacing: .08em; }

/* The protected investment view should feel like the same intentional Plus
   experience as Cash Flow: recognizable data structure, no invented values,
   and one calm path to the feature the person asked for. */
.holding-history-dialog.plus-history-gate { width: min(720px, calc(100vw - 24px)); max-height: min(720px, calc(100dvh - 24px)); background: linear-gradient(145deg, #ffffff 0%, #fbfdfb 55%, #eef8f1 100%); }
.plus-history-gate .holding-history-shell { padding: 28px; }
.plus-history-gate .holding-history-head { position: relative; padding: 0 0 18px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line)); }
.plus-history-gate .holding-history-head::after { content: ''; position: absolute; right: 30px; top: -28px; width: 146px; height: 146px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent), transparent 68%); }
.plus-history-gate .holding-history-head > div { position: relative; z-index: 1; max-width: 510px; }
.plus-history-gate .holding-history-head h2 { margin-top: 6px; font-size: clamp(30px, 4vw, 38px); }
.plus-history-gate .holding-history-head p { max-width: 470px; font-size: 14px; }
.plus-history-gate .holding-history-metrics { margin-top: 16px; }
.plus-history-gate .holding-history-metrics > div { min-height: 88px; padding: 14px 16px; border-color: color-mix(in srgb, var(--accent) 16%, var(--line)); background: rgba(255,255,255,.7); box-shadow: 0 8px 22px rgba(27,75,45,.035); }
.plus-history-gate .holding-history-metrics strong { font-size: 18px; }
.plus-history-gate .holding-history-metrics small { font-size: 10px; font-weight: 600; }
.plus-history-gate .holding-history-note { margin-top: 16px; }
.plus-history-gate .holding-history-chart { height: 212px; margin-top: 10px; border: 0; }
.plus-history-gate .plus-history-preview { position: relative; min-height: 0; padding: 22px 16px 12px; overflow: hidden; border-color: color-mix(in srgb, var(--accent) 20%, var(--line)); border-radius: 18px; background: linear-gradient(135deg, #f9fdf9 0%, #eef8f1 100%); box-shadow: inset 0 1px rgba(255,255,255,.85), 0 12px 24px rgba(27,75,45,.045); }
.plus-history-gate .plus-history-preview::after { content: ''; position: absolute; top: -70px; right: -34px; width: 180px; height: 180px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 11%, transparent); filter: blur(2px); }
.plus-history-preview-label { position: absolute; z-index: 1; inset: 12px 14px auto; display: flex; align-items: center; justify-content: space-between; color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .11em; }
.plus-history-preview-label i { display: grid; place-items: center; width: 19px; height: 19px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 50%; font-style: normal; font-size: 14px; line-height: 1; }
.plus-history-gate .plus-history-preview svg { position: relative; z-index: 1; min-height: 148px; }
.plus-history-gate .plus-history-preview > span { position: relative; z-index: 1; }
.plus-history-gate .holding-history-where { gap: 12px; margin-top: 16px; }
.plus-history-gate .plus-history-teasers { padding: 0; }
.plus-history-gate .plus-history-teaser-row { padding: 7px 2px; }
.plus-history-gate .plus-history-cta { grid-template-columns: minmax(150px, .82fr) minmax(0, 1.18fr) !important; gap: 18px !important; align-items: center; padding: 18px !important; border-color: color-mix(in srgb, var(--accent) 24%, var(--line)); border-radius: 18px; background: linear-gradient(135deg, #e9f6ee 0%, #f7fcf8 58%, #e6f3ea 100%); box-shadow: 0 12px 30px rgba(27,75,45,.07); }
.plus-history-gate .plus-history-cta > div { display: grid; gap: 4px; padding: 0; border: 0; }
.plus-history-gate .plus-history-cta :is(strong, small) { grid-column: auto; grid-row: auto; align-self: auto; justify-self: auto; }
.plus-history-gate .plus-history-cta strong { color: var(--ink); font-size: 15px; }
.plus-history-gate .plus-history-cta strong b { font-size: 25px; letter-spacing: -.055em; }
.plus-history-gate .plus-history-cta strong span, .plus-history-gate .plus-history-cta em { color: var(--muted); font-size: 10px; font-style: normal; font-weight: 650; }
.plus-history-gate .plus-history-cta-copy { align-items: start; }
.plus-history-gate .plus-history-cta-copy > b { font-size: 14px; line-height: 1.25; }
.plus-history-gate .plus-history-cta-copy > small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.plus-history-gate .plus-history-cta button { margin-top: 5px; padding: 10px 14px; border-radius: 12px; background: #17231a; box-shadow: 0 9px 18px rgba(22,48,31,.16); }
.plus-history-gate .plus-history-cta button:hover { background: #214c32; transform: translateY(-1px); }
html[data-theme="dark"] .holding-history-dialog.plus-history-gate { background: linear-gradient(145deg, #1b231e, #1d2920); }
html[data-theme="dark"] .plus-history-gate .holding-history-metrics > div { background: rgba(28,38,31,.8); }
html[data-theme="dark"] .plus-history-gate .plus-history-preview { background: linear-gradient(135deg, #1d2d22, #243528); }
html[data-theme="dark"] .plus-history-gate .plus-history-cta { background: linear-gradient(135deg, #203928, #1e2c22); }
@media (max-width: 560px) {
  .holding-history-dialog.plus-history-gate { max-height: min(84dvh, 760px); }
  .plus-history-gate .holding-history-shell { padding: 18px 18px calc(30px + env(safe-area-inset-bottom)); }
  .plus-history-gate .holding-history-head { margin: 0; padding: 0 0 15px; background: transparent; }
  .plus-history-gate .holding-history-head::after { right: -45px; top: -38px; width: 120px; height: 120px; }
  .plus-history-gate .holding-history-chart { height: 185px; }
  .plus-history-gate .plus-history-preview svg { min-height: 124px; }
  .plus-history-gate .plus-history-cta { grid-template-columns: 1fr !important; gap: 13px !important; }
  .plus-history-gate .plus-history-cta button { width: 100%; }
}
@media (max-width: 560px) {
  .account-history-dialog .holding-history-head .dialog-close { display: none; }
}

/* Account groups share one disclosure pattern: the header controls whether
   the group is open, while the existing footer reveals additional rows. */
.account-collection-head { width: 100%; border: 0; color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.account-collection-head:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.account-collection-head:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent); outline-offset: -3px; }
.account-collection-head { grid-template-columns: 32px minmax(0, 1fr) auto 20px; }
.account-collection-chevron { color: var(--muted); font-size: 19px; font-style: normal; line-height: 1; transform: rotate(0deg); transition: transform .16s ease; }
.account-collection-head.is-collapsed .account-collection-chevron { transform: rotate(-90deg); }
.account-collection-head .account-collection-total { padding-right: 0; }

/* Give the longer first timeframe a little more room on phones so its
   selected pill never crowds the label. */
@media (max-width: 560px) {
  .spending-period-actions .range-control,
  .investment-period-actions .range-control {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) repeat(5, minmax(0, 1fr));
  }
  .spending-period-actions .range-control button,
  .investment-period-actions .range-control button {
    padding-inline: 5px;
  }
}

/* Mobile retirement is a compact plan snapshot: one outcome, the two inputs
   that drive it, then quiet provenance. This override intentionally lives
   last because older desktop rules share these selectors. */
@media (max-width: 560px) {
  .retirement-hero { position: relative; padding: 18px; }
  .retirement-hero .card-top { display: block; }
  .retirement-total { margin-top: 5px; font-size: clamp(36px, 10.5vw, 46px); }
  #retirementProjectionContext { margin-bottom: 0; }
  #retirementProjectionContext::after { content: ' · ' attr(data-mobile-timeline); }
  .retirement-inputs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-top: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .retirement-inputs > span {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 4px;
    min-width: 0;
    padding: 0 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 9px;
  }
  .retirement-inputs > span + span { border-left: 1px solid var(--line); }
  .retirement-inputs > span > span { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .retirement-inputs > span strong { grid-column: 1; font-size: 15px; }
  .retirement-inputs > span small { grid-column: 2; align-self: end; font-size: 9px; }
  .retirement-context-chips { display: block; margin-top: 6px; }
  .retirement-age-chip { display: none; }
  .retirement-coverage-chip { display: block; padding: 0; border: 0; border-radius: 0; color: var(--muted); background: transparent; font-size: 10px; font-weight: 650; }
  .retirement-review-plan { position: absolute; top: 18px; right: 18px; margin: 0; padding: 5px 0; border: 0; border-radius: 0; color: var(--accent); background: transparent; font-size: 11px; }
  .retirement-review-plan:hover, .retirement-review-plan:focus-visible { background: transparent; text-decoration: underline; }
  .retirement-next-milestone { margin-top: 13px; padding: 11px 12px; }
  .retirement-path { gap: 8px; margin-top: 17px; }
}

/* The outlook context belongs with the projected value on every screen.
   Timeline and tracking are explanatory metadata, not a second visual column. */
.retirement-hero { position: relative; }
.retirement-hero .card-top { display: block; }
.retirement-context-chips { display: block; height: 0; margin: 0; }
.retirement-age-chip, .retirement-coverage-chip { display: none !important; }
.retirement-review-plan { position: absolute; top: 24px; right: 24px; margin: 0; }
@media (max-width: 560px) {
  #retirementProjectionContext::after { content: none; }
  .retirement-review-plan { top: 18px; right: 18px; }
  /* These are paired inputs to one outlook, not two separate cards or a
     miniature table. Let proximity rather than rules express that pairing. */
  .retirement-inputs { gap: 16px; margin-top: 12px; padding: 0; border: 0; }
  .retirement-inputs > span { padding: 0; }
  .retirement-inputs > span + span { border: 0; }
  .retirement-inputs > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 4px; }
  .retirement-inputs > span > span { flex: 0 0 100%; }
  .retirement-inputs > span small { align-self: baseline; }
}

@media (max-width: 760px) { .notice { right: 14px; bottom: calc(88px + env(safe-area-inset-bottom)); left: 14px; max-width: none; }.app-status { right: 14px; bottom: calc(140px + env(safe-area-inset-bottom)); left: 14px; max-width: none; } }

.retirement-history-window { grid-template-columns: 1fr !important; align-content: start; gap: 5px !important; }
.retirement-history-window select { width: 100%; min-height: 32px; border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; color: var(--ink); background: var(--surface); font: inherit; font-size: 11px; }
.retirement-history-window small { color: var(--muted); font-size: 10px; font-weight: 500; line-height: 1.25; }

/* Cash-flow activity earns its desktop width by pairing the list with the
   context that explains a person's saved category choice. On a phone the
   context stays compact and leads into the same list. */
.spending-transaction-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 310px); align-items: stretch; }
.spending-transaction-list { min-width: 0; }
.spending-transaction-row { grid-template-columns: minmax(0, 1fr) minmax(130px, auto); }
.spending-transaction-context { display: grid; align-content: start; gap: 11px; padding: 20px; border-left: 1px solid var(--line); background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 68%, var(--card)), var(--card) 68%); }
.spending-transaction-context > strong { font-size: 16px; letter-spacing: -.025em; }
.spending-transaction-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--accent-soft) 30%, var(--card)); }
.spending-transaction-pagination span { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.spending-transaction-pagination button { margin: 0; padding: 5px 3px; font-size: 11px; }
.spending-transaction-pagination button:disabled { color: var(--muted); cursor: default; opacity: .52; }
.spending-transaction-empty { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 118px; padding: 24px 22px; color: var(--ink); background: linear-gradient(115deg, color-mix(in srgb, var(--accent-soft) 42%, var(--card)), var(--card) 68%); }
.spending-transaction-empty-mark { position: relative; display: block; width: 32px; height: 32px; border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--accent-soft) 72%, var(--card)); }
.spending-transaction-empty-mark::before { position: absolute; top: 9px; left: 9px; width: 10px; height: 10px; border: 2px solid var(--accent); border-radius: 50%; content: ''; }
.spending-transaction-empty-mark::after { position: absolute; width: 7px; height: 2px; right: 7px; bottom: 8px; border-radius: 99px; background: var(--accent); content: ''; transform: rotate(45deg); transform-origin: center; }
.spending-transaction-empty strong { display: block; font-size: 14px; letter-spacing: -.015em; }
.spending-transaction-empty p { max-width: 54ch; margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.spending-transaction-empty .text-button { margin: 0; padding: 7px 0; white-space: nowrap; font-size: 12px; }
.spending-transaction-context > p { margin: -5px 0 2px; color: var(--muted); font-size: 12px; }
.spending-context-stat { display: grid; gap: 3px; padding: 10px 11px; border: 1px solid color-mix(in srgb, var(--accent) 15%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--card) 78%, transparent); }
.spending-context-stat span { color: var(--muted); font-size: 10px; font-weight: 720; text-transform: uppercase; letter-spacing: .05em; }
.spending-context-stat b { font-size: 12px; }
.spending-memory-note { display: grid; grid-template-columns: 21px minmax(0, 1fr); gap: 8px; align-items: start; padding-top: 2px; }
.spending-memory-note > span { display: grid; width: 21px; height: 21px; place-items: center; border-radius: 7px; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 800; }
.spending-memory-note p { margin: 1px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.spending-memory-note b { color: var(--ink); }
.spending-forget-memory { justify-self: start; margin-top: 1px; padding: 0; color: var(--muted); font-size: 11px; }

/* One small category treatment is shared by list, drawer, and account views.
   Payroll contributions are read-only cash-flow context, so they never look
   like a large secondary amount or a selectable category. */
.transaction-category-control { display: block; max-width: 150px; min-width: 0; }
.transaction-category-control select { width: 100%; max-width: 150px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 11px; line-height: 1.2; text-align-last: right; }
.cashflow-activity-value .transaction-category-control, .account-history-activity-value .transaction-category-control { display: block; justify-self: end; }
.cashflow-activity-value .transaction-category-control select, .account-history-activity-value .transaction-category-control select { font-size: 10px; }
.transaction-category-label { display: block; max-width: 150px; color: var(--muted); font-size: 11px; font-weight: 550; line-height: 1.2; white-space: nowrap; }
.cashflow-activity-value .transaction-category-label, .account-history-activity-value .transaction-category-label { justify-self: end; }
.spending-transaction-row .transaction-category-label { font-size: 11px; }
.transaction-category-label-context { color: var(--muted); }

@media (max-width: 760px) {
  .spending-hero-card { padding: 21px 16px 18px; }
  .spending-hero-card::before { top: -150px; right: -130px; width: 240px; height: 240px; opacity: .72; }
  .spending-total { font-size: clamp(38px, 13vw, 52px); }
  .cashflow-visual-tools { margin-top: 16px; }
  /* Search is the primary way to narrow a long history. Give it a complete
     first row, then keep the two supporting selectors in a deliberate pair
     so neither can be pushed beyond a phone viewport. */
  .spending-transaction-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 14px 16px; }
  .spending-transaction-controls input { grid-column: 1 / -1; width: 100%; min-width: 0; min-height: 42px; }
  .spending-transaction-controls select { width: 100%; min-width: 0; min-height: 42px; text-overflow: ellipsis; }
  .spending-transaction-layout { grid-template-columns: 1fr; }
  .spending-transaction-context { order: -1; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; padding: 15px 18px; border-right: 0; border-bottom: 1px solid var(--line); border-left: 0; }
  .spending-transaction-context > p, .spending-transaction-context .spending-context-stat { grid-column: 1; }
  .spending-memory-note { grid-column: 1 / -1; }
  .spending-forget-memory { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
  .spending-transaction-pagination { padding-inline: 15px; }
  .spending-transaction-empty { grid-template-columns: 32px minmax(0, 1fr); min-height: 0; padding: 20px 18px; }
  .spending-transaction-empty .text-button { grid-column: 2; justify-self: start; }
  .recurring-layout { grid-template-columns: 1fr; }
  .recurring-context { order: -1; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; padding: 15px 18px; border-right: 0; border-bottom: 1px solid var(--line); border-left: 0; }
  .recurring-context > p, .recurring-context .recurring-context-stat, .recurring-context > small { grid-column: 1; }
}
@media (max-width: 560px) {
  .spending-hero-card { border-radius: 16px; }
  .spending-context { font-size: 12px; }
  .cashflow-visual-tools > span { font-size: 10px; }
  .holding-history-dialog .holding-history-shell { touch-action: pan-y; }
}
@media (max-width: 760px) {
  /* The mobile transaction list already has its count, filter, and rows. The
     desktop context rail repeats those facts and only pushes the useful list
     farther below the fold on a phone. */
  .spending-transaction-context { display: none; }
}

/* The grab affordance is intentionally larger than the visible pill. Keep
   the hit area quiet so tapping it never adds an accent ring to the sheet. */
@media (max-width: 640px) {
  .cashflow-dialog-drag-handle {
    top: 0;
    width: min(100%, 280px);
    height: 44px;
    border-radius: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .cashflow-dialog-drag-handle:focus,
  .cashflow-dialog-drag-handle:focus-visible {
    outline: none;
    box-shadow: none;
  }
}
@media (max-width: 560px) {
  .holding-history-drag-handle {
    width: calc(100% + 36px);
    margin-inline: -18px;
    border-radius: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .holding-history-drag-handle:focus,
  .holding-history-drag-handle:focus-visible {
    outline: none;
    box-shadow: none;
  }
}

/* Keep the two account performance metrics above the fold on phones. A
   single metric still spans the available width via the existing `.single`
   state. */
@media (max-width: 560px) {
  #accountHistoryMetrics:not(.single) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  #accountHistoryMetrics:not(.single) > div {
    min-width: 0;
    padding: 11px 10px;
  }
  #accountHistoryMetrics:not(.single) strong {
    overflow-wrap: anywhere;
    font-size: clamp(16px, 5vw, 20px);
  }
  #accountHistoryMetrics:not(.single) small {
    overflow-wrap: anywhere;
  }
  #holdingHistoryMetrics:not(.single) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  #holdingHistoryMetrics:not(.single) > div {
    min-width: 0;
    padding: 11px 10px;
  }
  #holdingHistoryMetrics:not(.single) strong {
    overflow-wrap: anywhere;
    font-size: clamp(16px, 5vw, 20px);
  }
  #holdingHistoryMetrics:not(.single) small {
    overflow-wrap: anywhere;
  }
}

/* Investment overview refinements: a stronger focal point and clearer
   performance hierarchy without changing the underlying investment data. */
.portfolio-card .card-top { gap: 18px; }
.investment-range-chip { flex: 0 0 auto; align-self: flex-start; padding: 7px 10px; border: 1px solid #cfe2d3; border-radius: 999px; color: var(--accent); background: rgba(232,244,235,.72); font-size: 10px; font-weight: 750; letter-spacing: .02em; }
.investment-support-grid > .investment-card, .investment-support-grid > .allocation-card { margin-top: 0; }
.investment-support-grid .investment-card-heading { min-height: 41px; }
.investment-support-grid .investment-accounts { margin-top: 13px; }
.investment-account-row:focus-visible, .holding-row:focus-visible { outline-offset: -3px; }
html[data-theme="dark"] .investment-range-chip { border-color: #365440; color: #b9e0c2; background: #1f3024; }
@media (max-width: 760px) {
  .portfolio-card .card-top { align-items: flex-start; }
  .investment-range-chip { padding: 6px 8px; font-size: 9px; }
}

/* Account rows stay stable while hovering and give copy room to breathe. */
.investment-account-row { transition: background .16s ease; }
.investment-account-row:hover { padding-inline: 0; transform: none; }
.investment-account-value { display: grid; gap: 3px; justify-items: end; text-align: right; }
.investment-account-copy > span { display: block; overflow-wrap: anywhere; white-space: normal; }
.investment-account-copy strong { overflow-wrap: anywhere; }

/* A directional cue is enough here; the amount and selected range already
   carry the meaning, so the arrow stays outside the text flow. */
.investment-account-value small { position: relative; }
.investment-account-value small.positive::before, .investment-account-value small.negative::before { position: absolute; right: calc(100% + 4px); top: 50%; font-size: 11px; font-weight: 800; line-height: 1; transform: translateY(-50%); }
.investment-account-value small.positive::before { color: var(--accent); content: '↑'; }
.investment-account-value small.negative::before { color: var(--outflow); content: '↓'; }
.holding-name { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.holding-copy { gap: 3px; }
html[data-theme="dark"] .investment-account-value small.negative::before { color: var(--outflow); }

/* Drawers should read as a separate layer in dark mode. Keep the page visible
   for orientation, but lower its luminance and give the open surface a quiet
   neutral lift instead of another green treatment. */
html[data-theme="dark"] dialog::backdrop {
  background: rgba(0, 0, 0, .62);
  backdrop-filter: blur(5px) saturate(.82);
}
html[data-theme="dark"] :is(
  .cashflow-dialog,
  .holding-history-dialog,
  .upgrade-dialog,
  .retirement-info-dialog,
  .nickname-dialog,
  .connection-onboarding-dialog
) {
  border-color: #4a535d;
  background: #20252b;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .04);
}
html[data-theme="dark"] :is(
  .cashflow-dialog,
  .holding-history-dialog,
  .upgrade-dialog,
  .retirement-info-dialog,
  .nickname-dialog,
  .connection-onboarding-dialog
)::backdrop {
  background: rgba(0, 0, 0, .62);
  backdrop-filter: blur(5px) saturate(.82);
}
html[data-theme="dark"] .holding-history-head {
  background: #20252b;
}
html[data-theme="dark"] .holding-history-dialog.plus-history-gate {
  background: #20252b;
}
@media (max-width: 640px) {
  html[data-theme="dark"] .cashflow-dialog {
    border-top-color: #4a535d;
    box-shadow: 0 -18px 52px rgba(0, 0, 0, .55);
  }
}
@media (max-width: 560px) {
  html[data-theme="dark"] .holding-history-dialog {
    border-top: 1px solid #4a535d !important;
    box-shadow: 0 -18px 52px rgba(0, 0, 0, .55);
  }
}

/* Retirement dark mode: reserve green for outcomes and progress. Ordinary
   planning inputs and containers stay neutral so the page has a clear focal
   point instead of reading as one large green panel. */
html[data-theme="dark"] .retirement-hero {
  border-color: #353b43;
  background: #181b1f;
}
html[data-theme="dark"] .retirement-inputs > span {
  border-color: transparent;
  background: transparent;
}
html[data-theme="dark"] .retirement-inputs > span + span {
  border-left-color: #353b43;
}
html[data-theme="dark"] .retirement-next-milestone {
  border-color: #353b43;
  background: #20252b;
}
html[data-theme="dark"] .retirement-next-milestone:hover {
  border-color: #4a535d;
  background: #252b32;
}
html[data-theme="dark"] .retirement-milestone,
html[data-theme="dark"] .retirement-milestone.complete,
html[data-theme="dark"] .retirement-milestone.featured {
  border-color: #353b43;
  background: #1c2025;
}
html[data-theme="dark"] .retirement-milestone[data-retirement-milestone]:hover {
  border-color: #4a535d;
  background: #222830;
}
html[data-theme="dark"] .retirement-milestone i {
  background: #343b43;
}
html[data-theme="dark"] .retirement-milestone em {
  background: #24302a;
  color: #9dd4ac;
}
html[data-theme="dark"] .retirement-spend,
html[data-theme="dark"] .retirement-adjust,
html[data-theme="dark"] .retirement-lifestyles {
  border-color: #353b43;
  background: #181b1f;
}
html[data-theme="dark"] .retirement-form {
  background: #20252b;
}

/* The detail range is already a segmented control; the extra outline reads
   like an accidental nested input in dark mode. */
html[data-theme="dark"] .holding-history-controls[data-timeframe-scope="detail"] .holding-history-range {
  border: 0;
  box-shadow: none;
  background: var(--control);
}
html[data-theme="dark"] .holding-history-controls {
  background: transparent;
  border-bottom-color: transparent;
}

/* Accounts scan hierarchy: category totals, then account balances, then
   institution metadata. This keeps the inventory legible without hiding any
   of the verified identity details. */
html[data-theme="dark"] .accounts-summary span,
html[data-theme="dark"] .account-collection-total span {
  color: var(--text-tertiary);
}
html[data-theme="dark"] .accounts-summary strong,
html[data-theme="dark"] .account-collection-total strong,
html[data-theme="dark"] .account-item .account-name,
html[data-theme="dark"] .account-inline-balance {
  color: var(--text-primary);
}
html[data-theme="dark"] .accounts-summary strong {
  font-size: 24px;
  letter-spacing: -.04em;
}
html[data-theme="dark"] .account-collection-head h2 {
  color: var(--text-primary);
  font-size: 18px;
  letter-spacing: -.025em;
}
html[data-theme="dark"] .account-collection-head p,
html[data-theme="dark"] .account-item .account-inst {
  color: var(--text-tertiary);
}
html[data-theme="dark"] .account-inline-balance {
  margin-top: 7px;
  font-size: 18px;
}
html[data-theme="dark"] .account-collection-icon,
html[data-theme="dark"] .institution-logo,
html[data-theme="dark"] .institution-fallback {
  border-color: #353b43;
  background: #252a30;
}
html[data-theme="dark"] .institution-fallback {
  color: var(--text-tertiary);
}
html[data-theme="dark"] .account-group-more {
  border-top-color: #353b43;
  background: #20252b;
  color: var(--text-secondary);
}
html[data-theme="dark"] .account-group-more:hover {
  background: #252a30;
  color: var(--text-primary);
}
html[data-theme="dark"] .account-detail > i,
html[data-theme="dark"] .account-rename {
  color: var(--text-tertiary);
}

/* Classification is an infrequent correction, so keep it behind deliberate
   disclosure instead of repeating an editor in every holding row. */
.holding-history-class-editor {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 11px;
}
.holding-history-class-editor summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.holding-history-class-editor summary::-webkit-details-marker { display: none; }
.holding-history-class-editor summary::after { color: var(--muted); content: '›'; font-size: 16px; line-height: 1; transform: rotate(90deg); }
.holding-history-class-editor[open] summary::after { transform: rotate(-90deg); }
.holding-history-class-editor > div { display: grid; gap: 8px; margin-top: 10px; }
.holding-history-class-editor-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent); }
.holding-history-class-editor-row > span { min-width: 0; overflow: hidden; color: var(--ink); font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.holding-history-class-editor-row .holding-history-class { flex: 0 0 auto; margin-top: 0; }
html[data-theme="dark"] .holding-history-class-editor-row > span { color: var(--text-primary); }
.holding-history-tabs:empty { display: none; }