/* Product foundation. Theme variables own the complete surface/text pair. */
:root {
  color-scheme: light;
  --bg: #F3F1E9; --surface: #FFFDF7; --elevated: #FFFFFF; --soft: #E8DFC8;
  --text: #3D2B1F; --secondary: #655E52; --tertiary: #706B60; --border: #D8D7CC;
  --accent: #2D4A35; --on-accent: #FFFDF7; --positive: #3D6545; --negative: #A33F32;
  --warning: #825B23; --info: #3F6577; --tint: #E7EDDF;
  --ink: var(--text); --muted: var(--secondary); --paper: var(--bg); --card: var(--surface);
  --line: var(--border); --deep: #2D4A35; --deep-2: var(--accent); --moss: var(--positive);
  --lime: #8AAB7E; --coral: var(--negative); --shadow: 0 2px 8px #3D2B1F08; --radius: 20px;
  --plan-ink: var(--text); --plan-muted: var(--secondary); --plan-surface: var(--surface);
  --plan-elevated: var(--elevated); --plan-strong: var(--accent); --plan-border: var(--border);
  --plan-success: var(--positive); --plan-title: 20px; --plan-caption: 13px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px;
  --r-control: 12px; --r-card: 20px; --r-sheet: 24px;
  --motion-micro: 120ms; --motion-interaction: 200ms; --motion-enter: 320ms; --motion-exit: 160ms;
  --ease-enter: cubic-bezier(.2,.8,.2,1); --ease-exit: cubic-bezier(.4,0,1,1);
  --nav-height: 74px; --dock-space: 148px;
}
@media (prefers-color-scheme:dark) {
  :root:not(.telegram-light) {
    color-scheme:dark; --bg:#17201A; --surface:#222D25; --elevated:#2D3930; --soft:#344036;
    --text:#F5F1E5; --secondary:#C3C9BA; --tertiary:#ACB5A6; --border:#435044;
    --accent:#B8CEA7; --on-accent:#1C3021; --positive:#B3D19F; --negative:#F1A190;
    --warning:#E2C088; --info:#A7C9D6; --tint:#303E30;
  }
}
:root.telegram-dark {
  color-scheme:dark; --bg:#17201A; --surface:#222D25; --elevated:#2D3930; --soft:#344036;
  --text:#F5F1E5; --secondary:#C3C9BA; --tertiary:#ACB5A6; --border:#435044;
  --accent:#B8CEA7; --on-accent:#1C3021; --positive:#B3D19F; --negative:#F1A190;
  --warning:#E2C088; --info:#A7C9D6; --tint:#303E30;
}
:root body { background:var(--bg); color:var(--text); font-size:16px; line-height:1.5; padding:0; }
:root .app { max-width:1184px; width:100%; padding:calc(var(--safe-top) + 24px) max(20px,var(--safe-right)) calc(var(--dock-space) + var(--safe-bottom)) max(20px,var(--safe-left)); box-shadow:none; border-radius:0; overflow:visible; }
main, section, article, .card-heading > div, .stack-row > div, .route-card-top > div { min-width:0; }
[hidden] { display:none !important; }
:root h1,:root h2,:root h3,:root h4 { letter-spacing:-.025em; line-height:1.2; font-weight:650; overflow-wrap:anywhere; }
:root .app-header h1,:root .screen-title h2 { font-size:28px; line-height:1.15; }
:root .screen-title { margin:0 0 24px; }
:root .app-header { margin:0 0 28px; }
body:not(.debt-mode) .app-header { display:flex; }
body:has(.screen:not([data-screen="today"]).active) .app-header { display:none; }
:root .eyebrow { font-size:13px; letter-spacing:0; text-transform:none; font-weight:500; color:var(--secondary); }
.card-heading .eyebrow,.screen-title .eyebrow { display:none; }
:root .subtle,:root .empty-state { color:var(--secondary); font-size:14px; line-height:1.5; }
:root .card,:root .menu-list,:root .transaction-card,:root .goal-card,:root .route-card,:root .recommendation { background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:none; }
:root .card { margin:0; padding:24px; }
:root .screen.active { display:grid; gap:20px; animation:product-enter var(--motion-enter) var(--ease-enter) both; }
.ui-icon { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; flex:none; vertical-align:middle; }
:root button { cursor:pointer; min-height:44px; border-width:1px; font-weight:600; transition:background-color var(--motion-interaction),color var(--motion-interaction),transform var(--motion-micro) var(--ease-enter); }
:root button:active,:root button.is-pressed { transform:scale(.98); }
:root button:disabled { cursor:default; opacity:.5; transform:none; }
:root button:focus-visible,:root input:focus-visible,:root select:focus-visible,:root textarea:focus-visible,:root summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
:root .primary-button,:root .launch-primary { background:var(--accent); color:var(--on-accent); border:0; box-shadow:none; border-radius:var(--r-control); font-size:16px; min-height:50px; padding:12px 18px; }
:root .secondary-button,:root .pill-button,:root .goal-actions button { background:var(--tint); color:var(--accent); border-radius:var(--r-control); font-size:14px; }
:root .text-button { color:var(--accent); font-size:14px; padding:8px; background:transparent; }
:root .danger-button { color:var(--negative); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-control); }
:root .circle-button,:root .close-button { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; padding:0; border:0; border-radius:50%; color:var(--accent); background:var(--tint); box-shadow:none; }
:root .close-button { color:var(--secondary); background:transparent; }
@media (hover:hover) { :root button:hover:not(:disabled) { filter:brightness(.95); } :root .close-button:hover { background:var(--tint); } }
:root input,:root select,:root textarea { font-size:16px; color:var(--text); caret-color:var(--accent); min-width:0; max-width:100%; }
:root input::placeholder,:root textarea::placeholder { color:var(--tertiary); opacity:1; font-weight:400; }
:root .field { font-size:14px; color:var(--secondary); font-weight:500; gap:8px; }
:root .field input,:root .field select,:root .field textarea { background:var(--elevated); border:1px solid var(--border); color:var(--text); border-radius:var(--r-control); min-height:48px; padding:12px; }
:root .sheet { background:var(--surface); color:var(--text); max-height:92dvh; border-radius:var(--r-sheet) var(--r-sheet) 0 0; width:min(100%,600px); box-shadow:0 -8px 40px #0002; }
:root .sheet form { max-height:92dvh; padding:12px 24px calc(24px + var(--safe-bottom)); overscroll-behavior:contain; scrollbar-width:thin; }
:root .sheet-header { margin-bottom:24px; gap:12px; }
:root .sheet-header h2 { color:var(--text); font-size:26px; max-width:440px; }
:root .sheet::backdrop { background:#14201899; backdrop-filter:none; }
:root .sheet[open] { animation:product-enter var(--motion-enter) var(--ease-enter) both; }
:root .sheet.closing { animation:product-exit var(--motion-exit) var(--ease-exit) both; }
:root .sheet-actions { gap:10px; margin-top:24px; }
:root .sheet-grabber { width:32px; height:4px; margin:0 auto 20px; background:var(--border); }
:root .wizard-lead,:root .wizard-helper,:root .scenario-suggestion,:root .sheet .legal-note,:root .legal-note { color:var(--secondary); font-size:14px; line-height:1.5; font-weight:400; }
:root .wizard-number,:root .wizard-fields label { background:var(--elevated); border:1px solid var(--border); border-radius:var(--r-control); padding:16px; color:var(--text); }
:root .wizard-number span,:root .wizard-fields em { color:var(--secondary); font-size:13px; font-style:normal; }
:root .wizard-fields input,:root .wizard-number input { color:var(--text); background:transparent; -webkit-text-fill-color:var(--text); box-shadow:none; border:0; padding:4px 0; min-height:36px; }
:root .wizard-fields input { font-size:18px; font-weight:550; }
:root .wizard-number input { font-size:30px; letter-spacing:-.025em; }
:root .wizard-fields input::placeholder,:root .wizard-number input::placeholder { -webkit-text-fill-color:var(--tertiary); font-size:16px; }
:root .wizard-fields input[type=date] { color-scheme:normal; }
:root .wizard-help { color:var(--accent); font-size:14px; }
:root .wizard-progress { gap:6px; margin-bottom:20px; }
:root .wizard-progress span { height:3px; background:var(--border); }
:root .wizard-progress span.active { background:var(--accent); }
.wizard-back { background:none; color:var(--secondary); border:0; padding:8px 0; margin-bottom:8px; display:flex; gap:8px; align-items:center; }
:root .field-error { color:var(--negative); font-size:14px; margin:6px 0; }
:root .term-check { background:var(--tint); color:var(--secondary); border:0; border-radius:12px; padding:16px; font-size:14px; }
:root .term-check strong { color:var(--text); }
:root .tab-bar { height:calc(var(--nav-height) + var(--safe-bottom)); width:100%; max-width:720px; bottom:0; padding:8px 8px var(--safe-bottom); background:var(--surface); border:1px solid var(--border); border-bottom:0; border-radius:20px 20px 0 0; }
:root .tab-bar button { color:var(--secondary); gap:4px; border-radius:12px; }
:root .tab-bar button.active { color:var(--accent); background:var(--tint); }
:root .tab-bar button.active::before { display:none; }
:root .tab-bar b { font-size:12px; font-weight:550; }
:root .floating-add { bottom:calc(var(--nav-height) + 12px + var(--safe-bottom)); background:var(--accent); color:var(--on-accent); box-shadow:0 3px 12px #0002; font-size:15px; padding:10px 20px; }
:root .floating-add:active,:root .floating-add.is-pressed { transform:translateX(-50%) scale(.98); }
:root .avatar-button { background:var(--tint); box-shadow:none; width:44px; height:44px; display:grid; place-items:center; color:var(--accent); }
:root .avatar-button img { display:none; }
:root .avatar-button span { display:none; }
:root .hero-card { background:var(--deep); border-radius:var(--r-card); box-shadow:none; color:#FFFDF7; padding:24px; }
:root .hero-top { align-items:start; gap:12px; }
:root .status-label { color:#DCE7D3; font-size:13px; letter-spacing:0; font-weight:500; text-transform:none; }
:root .quality-badge { color:#DCE7D3; white-space:nowrap; font-size:11px; font-weight:500; }
:root .safe-summary { align-items:start; padding:24px 0 12px; }
:root .safe-summary span { color:#DCE7D3; font-size:14px; }
:root .safe-summary strong { font-size:clamp(30px,8vw,48px); letter-spacing:-.035em; overflow-wrap:anywhere; }
:root .safe-summary b { color:#DCE7D3; font-weight:500; }
:root .safe-horizon { display:none; }
:root .hero-hint { color:#DCE7D3; text-align:left; font-size:13px; margin-bottom:0; }
.today-overview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.today-overview span { display:block; color:var(--secondary); font-size:13px; }
.today-overview strong { display:block; font-size:18px; margin-top:4px; overflow-wrap:anywhere; }
:root .flow-bars { display:grid; height:auto; gap:8px; padding:12px 0 0; }
.flow-track { display:grid; grid-template-columns:60px minmax(0,1fr); align-items:center; gap:8px; color:var(--secondary); font-size:12px; }
:root .flow-track span { height:auto; width:auto; background:none; }
.flow-track i { display:block; height:5px; border-radius:5px; background:var(--accent); }
.flow-track.expense i { background:var(--warning); }
:root .quick-actions { margin:0; gap:12px; }
:root .quick-actions button { border:1px solid var(--border); background:var(--surface); box-shadow:none; border-radius:var(--r-control); color:var(--text); padding:16px 8px; }
:root .quick-actions b { font-size:14px; font-weight:550; }
:root .action-icon { width:32px; height:32px; background:transparent; }
:root .journey-card { min-height:0; background:var(--tint); color:var(--text); padding:20px; border-radius:var(--r-card); box-shadow:none; margin:0; }
:root .journey-card img { display:none; }
:root .journey-copy { width:100%; }
:root .journey-copy p:not(.eyebrow) { color:var(--secondary); font-size:14px; }
:root .journey-progress { position:static; margin:16px 0; background:var(--border); }
:root .insight-card { background:var(--surface); border:1px solid var(--border); color:var(--text); box-shadow:none; border-radius:var(--r-card); margin:0; }
:root .insight-card p:not(.eyebrow) { color:var(--secondary); font-size:14px; }
:root .insight-symbol { background:var(--tint); color:var(--accent); }
:root .checkin-card { grid-template-columns:minmax(0,1fr) auto; }
:root .checkin-card > .round-icon { display:none; }
:root .checkin-card p,:root .route-card p,:root .goal-card p { font-size:14px; }
:root .card h3 { font-size:20px; }
:root .card-heading { align-items:center; gap:12px; margin-bottom:16px; }
:root .flow-comparison span,:root .metric-card span { font-size:13px; }
:root .flow-comparison strong { font-size:18px; overflow-wrap:anywhere; }
:root .segment-control,:root .strategy-switch { background:var(--soft); border-radius:var(--r-control); }
:root .segment-control button,:root .strategy-switch button { color:var(--secondary); font-size:14px; }
:root .segment-control button.active,:root .strategy-switch button.active { color:var(--text); background:var(--surface); box-shadow:0 1px 4px #0001; }
:root .search-field { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-control); margin:0; }
:root .stack-row,:root .transaction-row,:root .goal-card-top { grid-template-columns:auto minmax(0,1fr) auto; }
:root .stack-row strong,:root .transaction-amount { font-size:14px; overflow-wrap:anywhere; text-align:right; max-width:140px; }
:root .transaction-row b,:root .stack-row b,:root .menu-list b { overflow-wrap:anywhere; }
:root .date-group h3 { text-transform:none; letter-spacing:0; font-size:14px; }
:root .goal-hero { background:var(--deep); box-shadow:none; border-radius:var(--r-card); }
:root .goal-actions { flex-wrap:wrap; }
:root .profile-summary { grid-template-columns:minmax(0,1fr) auto; }
:root .profile-summary img { display:none; }
:root .menu-icon,:root .row-icon,:root .goal-symbol { background:var(--tint); color:var(--accent); }
:root .privacy-copy { font-size:13px; padding:0; }
:root .sync-status { font-size:13px; color:var(--accent); background:var(--tint); }
:root .screen.active[data-screen=compass] { gap:20px; color:var(--text); }
:root .screen[data-screen=compass] .screen-title h2 { color:var(--text); font-size:28px; }
:root .debt-launchpad { padding:28px; min-height:0; background:var(--surface); color:var(--text); border:1px solid var(--border); box-shadow:none; border-radius:var(--r-card); }
:root .debt-launchpad::after,:root .plan-launch-art { display:none; }
:root .debt-launchpad h3 { font-size:28px; max-width:none; line-height:1.2; }
:root .debt-launchpad > p { color:var(--secondary); max-width:520px; font-size:16px; }
:root .launch-steps { max-width:none; gap:8px; }
:root .launch-steps span { background:var(--tint); color:var(--accent); font-size:13px; }
:root .launch-steps b { background:transparent; color:inherit; }
:root .launch-demo { color:var(--secondary); font-size:14px; }
:root .freedom-hero { display:block; background:var(--surface); color:var(--text); padding:24px; border:1px solid var(--border); box-shadow:none; border-radius:var(--r-card); min-height:0; }
:root .freedom-copy > p { color:var(--secondary); font-size:14px; letter-spacing:0; margin:0; }
.plan-total { display:block; font-size:clamp(32px,8vw,48px); line-height:1.2; margin:4px 0 16px; font-weight:650; letter-spacing:-.035em; overflow-wrap:anywhere; }
:root .freedom-copy h3 { font-size:18px; margin:0 0 4px; }
:root .freedom-copy > span { color:var(--secondary); font-size:14px; }
:root .freedom-metrics { gap:16px; margin-top:24px; }
:root .freedom-metrics > div { padding:0; background:none; border:0; }
:root .freedom-metrics span { color:var(--secondary); font-size:13px; }
:root .freedom-metrics strong { font-size:22px; color:var(--text); overflow-wrap:anywhere; }
.plan-progress { margin-top:20px; display:grid; gap:8px; }
.plan-progress span { color:var(--secondary); font-size:13px; }
progress { appearance:none; height:6px; width:100%; border:0; overflow:hidden; border-radius:10px; background:var(--soft); }
progress::-webkit-progress-bar { background:var(--soft); } progress::-webkit-progress-value { background:var(--accent); transition:width var(--motion-interaction); } progress::-moz-progress-bar { background:var(--accent); }
:root .what-if-card,:root .monthly-plan-card,:root .strategy-card,:root .debt-road-card,:root .debt-more { background:var(--surface); color:var(--text); box-shadow:none; border:1px solid var(--border); border-radius:var(--r-card); padding:24px; }
:root .what-if-card .card-heading > strong { font-size:24px; color:var(--accent); white-space:nowrap; }
:root .what-if-card p { color:var(--secondary); font-size:14px; line-height:1.5; }
:root .debt-main-slider,:root #scenario-extra { appearance:none; width:100%; height:44px; background:transparent; border:0; margin:8px 0; cursor:ew-resize; }
:root input[type=range]::-webkit-slider-runnable-track { height:6px; border:0; border-radius:10px; background:var(--soft); box-shadow:none; }
:root input[type=range]::-webkit-slider-thumb { appearance:none; margin-top:-11px; height:28px; width:28px; border:4px solid var(--surface); border-radius:50%; background:var(--accent); box-shadow:0 0 0 1px var(--border),0 2px 6px #0002; }
:root input[type=range]::-moz-range-track { height:6px; background:var(--soft); border:0; }
:root input[type=range]::-moz-range-thumb { height:20px; width:20px; border:4px solid var(--surface); border-radius:50%; background:var(--accent); }
:root .slider-scale { font-size:12px; color:var(--secondary); }
:root .debt-extra-controls { display:grid; grid-template-columns:52px minmax(0,1fr) 52px; gap:8px; }
:root .debt-extra-controls button { background:var(--tint); color:var(--accent); border:0; border-radius:var(--r-control); padding:0; }
:root .debt-extra-controls label { background:var(--elevated); border:1px solid var(--border); display:flex; gap:4px; padding:8px; border-radius:var(--r-control); }
:root .debt-extra-controls input { width:100%; min-width:0; color:var(--text); background:transparent; border:0; padding:0; font-size:18px; text-align:right; }
:root .debt-extra-controls label span { font-size:12px; color:var(--secondary); white-space:nowrap; }
:root .debt-live-impact { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding-top:20px; }
:root .debt-live-impact > div,:root .debt-live-impact > div:first-child { background:none; color:var(--text); border:0; padding:0; border-radius:0; }
:root .debt-live-impact > div:first-child { grid-column:1/-1; padding-bottom:12px; border-bottom:1px solid var(--border); }
:root .debt-live-impact span { text-transform:none; letter-spacing:0; color:var(--secondary); font-size:13px; opacity:1; font-weight:400; }
:root .debt-live-impact strong { font-size:22px; color:var(--accent); overflow-wrap:anywhere; }
.payoff-timeline { margin-top:20px; display:grid; gap:12px; }
.payoff-track { display:grid; grid-template-columns:85px minmax(0,1fr) auto; gap:10px; align-items:center; color:var(--secondary); font-size:12px; }
.payoff-track i { display:block; height:5px; background:var(--soft); border-radius:5px; transform-origin:left; transition:transform var(--motion-interaction) var(--ease-enter); }
.payoff-track:last-child i { background:var(--accent); }
.payoff-track b { font-weight:550; color:var(--text); }
:root .debt-compare-grid { display:none; }
:root .monthly-debt-step { padding:0; background:none; border:0; }
:root .monthly-debt-step strong { color:var(--text); font-size:22px; }
:root .monthly-debt-step p { color:var(--secondary); font-size:14px; }
.next-payment-line { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; }
.next-payment-line p { margin:0; }
.status-badge { display:inline-flex; padding:4px 8px; border-radius:8px; font-size:12px; background:var(--tint); color:var(--accent); }
.status-badge.overdue { color:var(--negative); background:var(--surface); border:1px solid var(--negative); }
:root .strategy-switch { margin-top:12px; }
:root .strategy-switch button { padding:12px; border:0; border-radius:10px; min-height:72px; }
:root .strategy-switch small { color:var(--secondary); font-size:12px; }
:root .debt-item { display:grid; grid-template-columns:40px minmax(0,1fr); gap:8px 12px; padding:20px 0; border-bottom:1px solid var(--border); }
:root .debt-item:last-child { border-bottom:0; }
:root .debt-item-icon { width:40px; height:40px; background:var(--tint); color:var(--accent); }
:root .debt-item h4 { font-size:16px; margin:0 0 4px; }
:root .debt-item p { color:var(--secondary); font-size:13px; margin:0; }
:root .debt-item > strong { grid-column:2; font-size:24px; color:var(--text); }
:root .debt-item progress { grid-column:2; margin:4px 0; }
:root .debt-detail-button { min-height:44px; grid-column:2; color:var(--accent); font-size:14px; }
:root .debt-more { padding:0 24px; }
:root .debt-more summary { color:var(--text); font-size:16px; min-height:64px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
summary::marker { content:''; } summary::-webkit-details-marker { display:none; }
details[open] > :not(summary) { animation:product-enter var(--motion-interaction) var(--ease-enter); }
:root .debt-tool-actions button { background:var(--tint); color:var(--accent); border:0; border-radius:12px; font-size:14px; }
:root .debt-kind-card,:root .debt-kind-card:first-child { display:grid; grid-template-columns:64px minmax(0,1fr); min-height:100px; padding:12px; gap:4px 12px; border:1px solid var(--border); color:var(--text); background:var(--elevated); align-content:center; border-radius:var(--r-control); }
:root .debt-kind-cards { grid-template-columns:1fr; }
:root .debt-kind-card .debt-kind-art { grid-row:1/3; width:64px; height:64px; aspect-ratio:1; border-radius:12px; }
:root .debt-kind-card b { align-self:end; font-size:16px; }
:root .debt-kind-card small { color:var(--secondary); font-size:13px; }
:root .scenario-control { background:var(--tint); color:var(--text); border:0; border-radius:16px; }
:root .scenario-control span,:root .scenario-control output { color:var(--secondary); font-size:14px; }
:root .scenario-control strong,:root .scenario-control label b { color:var(--accent); }
:root .scenario-control > div:first-child { display:block; }
:root .scenario-control > div:first-child strong { display:block; font-size:26px; margin-top:4px; }
:root .scenario-control label { display:grid; grid-template-columns:1fr 1.3fr auto; align-items:center; gap:8px; }
:root .scenario-control label input { width:100%; padding:10px; }
:root .wizard-fields small { color:var(--secondary); font-size:12px; font-weight:400; line-height:1.4; }
:root .wizard-fields label { display:grid; gap:4px; }
:root .scenario-control label input { background:var(--elevated); color:var(--text); border:1px solid var(--border); font-size:16px; }
:root .scenario-picks button { background:var(--elevated); border:1px solid var(--border); color:var(--text); border-radius:12px; min-height:72px; font-size:16px; }
:root .scenario-picks button.selected { background:var(--tint); color:var(--accent); border-color:var(--accent); }
:root .scenario-picks small { color:var(--secondary); font-size:12px; }
:root .scenario-result { background:var(--tint); color:var(--text); border-radius:16px; }
:root .scenario-result span,:root .scenario-lines b { color:var(--text); }
:root .scenario-result strong { font-size:24px; color:var(--accent); }
:root .scenario-result span { display:block; font-size:14px; margin-top:4px; }
:root .scenario-lines > div { color:var(--secondary); }
:root .debt-detail-hero { background:var(--tint); color:var(--text); border-radius:16px; }
:root .debt-detail-hero p,:root .debt-detail-hero small { color:var(--secondary); font-size:13px; }
:root .debt-detail-grid div { background:var(--elevated); border:1px solid var(--border); border-radius:12px; }
:root .debt-detail-grid span { color:var(--secondary); font-size:13px; }
:root .debt-detail-grid strong { color:var(--text); font-size:17px; }
:root .toast { border-radius:12px; background:var(--text); color:var(--bg); bottom:calc(var(--dock-space) + var(--safe-bottom)); box-shadow:0 2px 16px #0002; }
:root strong,:root input[data-money-input],.plan-total { font-variant-numeric:tabular-nums lining-nums; }
@keyframes product-enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes product-exit { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(6px); } }
@media(min-width:768px) {
  :root .app { padding:40px 32px 120px; }
  :root .screen[data-screen=today].active { grid-template-columns:1fr 1fr; align-items:start; }
  [data-screen=today] .hero-card,[data-screen=today] .today-overview,[data-screen=today] .quick-actions { grid-column:1/-1; }
  [data-screen=today] .hero-card { padding:32px; }
  :root .screen.active[data-screen=compass] { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:start; }
  [data-screen=compass] .screen-title,[data-screen=compass] .debt-launchpad { grid-column:1/-1; }
  [data-screen=compass] .freedom-hero { grid-column:1; }
  [data-screen=compass] .monthly-plan-card { grid-column:1; }
  [data-screen=compass] .what-if-card { grid-column:2; grid-row:2/4; }
  [data-screen=compass] .debt-road-card { grid-column:1/-1; }
  :root .goals-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  :root .sheet { margin:auto; border-radius:24px; max-height:86dvh; }
  :root .sheet form { max-height:86dvh; padding:24px; }
  :root .sheet-grabber { display:none; }
  :root .tab-bar { width:620px; border:1px solid var(--border); bottom:16px; border-radius:18px; }
  :root .floating-add { left:auto; right:24px; bottom:28px; transform:none; }
  :root .floating-add:active,:root .floating-add.is-pressed { transform:scale(.98); }
}
@media(max-width:374px) {
  :root .app { padding-left:12px; padding-right:12px; }
  :root .card,:root .what-if-card,:root .monthly-plan-card,:root .strategy-card,:root .debt-road-card,:root .freedom-hero { padding:16px; }
  :root .sheet form { padding-left:16px; padding-right:16px; }
  :root .what-if-card .card-heading { flex-wrap:wrap; }
  :root .form-grid { grid-template-columns:1fr; }
  :root .today-overview strong,:root .flow-comparison strong { font-size:16px; }
  :root .tab-bar b { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) {
  :root *, :root *::before,:root *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}