/* New Experience: presentation only. Existing IDs, actions and form names remain unchanged. */
:root {
  --bg:#f3f4fa; --surface:#ffffff; --subtle:#eef0f7;
  --text:#22263d; --muted:#596178; --border:#d8ddea; --divider:#e0e4ee;
  --control-border:#8b94aa; --brand:#5149a8; --link:#4b409d; --on-brand:#fff;
  --brand-soft:#eae8fa; --accent:var(--brand); --accent-soft:var(--brand-soft);
  --income:#176e62; --income-soft:#e0f1eb; --expense:#a24a40; --expense-soft:#f8e8e4;
  --warning:#885b13; --warning-soft:#fbf0d9; --error:#b63845;
  --positive:var(--income); --negative:var(--expense); --coral:var(--expense);
  --chart-1:var(--income); --chart-2:#7466b2; --chart-3:#498c99;
  --chart-4:#b07543; --chart-5:#677894; --chart-6:#a25c78;
  --chart-7:#417c68; --chart-8:#8571a1; --chart-9:#94713b;
  --chart-track:#dfe4ee; --budget-bg:#eef3f3; --scrim:#141b355c;
  --hero-bg:var(--bg); --hero-surface:var(--surface); --hero-text:var(--text);
  --hero-muted:var(--muted); --hero-border:var(--border); --hero-track:var(--chart-track);
  --hero-active:var(--brand-soft); --hero-accent:var(--brand); --hero-guidance:var(--subtle);
  --hero-error:var(--error); --sync-active:var(--income);
  --validation-bg:var(--expense-soft); --validation-text:var(--error);
  --glass-tint:rgba(255,255,255,.84); --glass-solid:#fff;
  --glass-edge:rgba(255,255,255,.9); --glass-rim:rgba(115,123,157,.2);
  --glass-shade:rgba(37,42,76,.1); --glass-selection:var(--brand-soft);
  --glass-label:var(--muted); --glass-active-text:var(--brand);
  --experience-surface:rgba(255,255,255,.84);
  --experience-edge:rgba(255,255,255,.85);
  --experience-mesh:radial-gradient(ellipse at 10% 5%,#a9a3e339,transparent 48%),radial-gradient(ellipse at 95% 38%,#9dd5cc38,transparent 48%),radial-gradient(ellipse at 40% 95%,#c5a7de2b,transparent 48%);
  --font-ui:InterVariable,Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-money:var(--font-ui);
  --radius-xs:8px; --radius-sm:12px; --radius-md:16px; --radius-lg:20px; --radius-xl:24px;
  --elevation-1:inset 0 1px 0 var(--experience-edge),0 2px 4px #20274103,0 12px 32px #20274106;
  --elevation-2:inset 0 1px 0 var(--experience-edge),0 4px 8px #20274106,0 20px 48px #20274112;
  --elevation-3:inset 0 1px 0 var(--experience-edge),0 8px 24px #10172c14,0 32px 88px #10172c26;
}
:root[data-theme=dark] {
  --bg:#10131e; --surface:#1c2231; --subtle:#252d40;
  --text:#f0f2fa; --muted:#adb7cd; --border:#3b465e; --divider:#333e54; --control-border:#75839f;
  --brand:#b7acf3; --link:#c0b7ff; --on-brand:#201b3c; --brand-soft:#36304e;
  --income:#83d1b9; --income-soft:#203b35; --expense:#edaa9d; --expense-soft:#422c30;
  --warning:#edc884; --warning-soft:#403522; --error:#ffb0b8;
  --chart-2:#ac9dde; --chart-3:#86b8c2; --chart-4:#d5af84; --chart-5:#96a7c6;
  --chart-6:#d79ab5; --chart-7:#90c8aa; --chart-8:#c0aad6; --chart-9:#cabc8c;
  --chart-track:#374156; --budget-bg:#202a33; --scrim:#080c19b8;
  --glass-tint:rgba(28,34,49,.9); --glass-solid:#1c2231;
  --experience-surface:rgba(28,34,49,.91); --experience-edge:rgba(199,210,249,.1);
  --glass-rim:rgba(153,168,204,.25); --glass-edge:rgba(220,227,255,.13);
  --experience-mesh:radial-gradient(ellipse at 10% 5%,#6456a62d,transparent 50%),radial-gradient(ellipse at 95% 40%,#347c7422,transparent 48%),radial-gradient(ellipse at 40% 100%,#854b9420,transparent 48%);
}
:root[data-theme=grey-glass] {
  --bg:#253047; --surface:#34415a; --subtle:#3b4963;
  --text:#f5f6fc; --muted:#cbd4e6; --border:#61718e; --divider:#53647f; --control-border:#99abc8;
  --brand:#e5d49b; --link:#f0dfa9; --on-brand:#2e3548; --brand-soft:#505066;
  --income:#99ddcb; --income-soft:#2b514d; --expense:#f2b4a6; --expense-soft:#604448;
  --warning:#f0d79c; --warning-soft:#584c37; --error:#ffc0c6;
  --chart-2:#c3b5ee; --chart-3:#a4d3da; --chart-4:#e1c39b; --chart-5:#b4c5e5;
  --chart-6:#e9b6cb; --chart-7:#b2ddbd; --chart-8:#d1bbeb; --chart-9:#ddd0a7;
  --chart-track:#4b5b76; --budget-bg:#344658; --scrim:#111a2bc0;
  --glass-tint:rgba(52,65,90,.91); --glass-solid:#34415a;
  --experience-surface:rgba(52,65,90,.92); --experience-edge:rgba(225,234,255,.16);
  --glass-rim:rgba(195,210,240,.24); --glass-edge:rgba(235,239,255,.18);
  --experience-mesh:radial-gradient(ellipse at 10% 5%,#9c8cbe24,transparent 50%),radial-gradient(ellipse at 95% 40%,#66abac1f,transparent 48%),radial-gradient(ellipse at 40% 100%,#b386b01c,transparent 48%);
}
html { background:var(--bg); scrollbar-gutter:stable; }
html[data-theme] body { background:var(--bg); background-image:none; isolation:isolate; font-family:var(--font-ui); font-size:15px; line-height:1.6; font-variant-numeric:tabular-nums; }
body::before { content:''; position:fixed; inset:0; background:var(--experience-mesh); pointer-events:none; z-index:-1; }
body,button,input,select,textarea { font-family:var(--font-ui); }
strong,b { font-weight:600; }
h1,h2,h3 { color:var(--text); font-weight:600; letter-spacing:-.025em; }
html[data-theme] #app .page-heading h1 { color:var(--text); font-size:28px; font-weight:600; line-height:1.25; margin:4px 0; }
h2,.section-heading h2 { font-size:19px; line-height:1.4; }
h3 { font-size:16px; }
.eyebrow { text-transform:none; letter-spacing:.025em; font-size:12px; font-weight:500; color:var(--muted); }
.small,.section-heading p,.page-heading p,.page-footer,.transaction-meta,.transaction-account,.transaction-date { font-size:12px; line-height:1.6; }
.muted { color:var(--muted); }
[data-value-changing] { animation:none!important; background:transparent; }
html[data-theme] #app h2 { color:var(--text)!important; }
html[data-theme] #app [data-stats-number] { font:inherit!important; color:inherit!important; letter-spacing:inherit; }
.icon { stroke-width:1.75; }
.income { color:var(--income); }.expense { color:var(--expense); }
html[data-theme][data-theme] #app .metric-value,
html[data-theme][data-theme] #app .account-balance,
html[data-theme][data-theme] #app .stats-number,
html[data-theme][data-theme] #app .budget-numbers strong { color:var(--text); font-family:var(--font-money); font-variant-numeric:tabular-nums; }
html[data-theme][data-theme] #app .transaction-amount.income { color:var(--income); }
html[data-theme][data-theme] #app .transaction-amount.expense { color:var(--expense); }
.navigation { width:216px; padding:32px 16px 24px; border-right:1px solid var(--border); background:var(--surface); box-shadow:inset -1px 0 0 var(--experience-edge); }
.brand { gap:12px; font-size:16px; font-weight:600; }
.brand-mark { width:36px; height:36px; border-radius:12px; }
.brand small { font-size:10px; font-weight:400; letter-spacing:0; }
.nav-items { margin-top:44px; gap:8px; }
.nav-item { border-radius:14px; padding:12px 14px; min-height:48px; font-size:14px; font-weight:500; }
.nav-highlight { background:var(--brand-soft); border-radius:14px; box-shadow:inset 0 1px 0 var(--experience-edge); }
.nav-item.active { color:var(--brand); font-weight:600; }
.nav-add { margin-top:auto; }
.workspace { margin-left:216px; }
.topbar { height:72px; padding:0 32px; background:transparent; border-bottom:1px solid var(--divider); box-shadow:none; }
.topbar-date { font-size:12px; }
.topbar-glyph { color:var(--muted); }
.local-status { font-size:12px; }
main { max-width:1280px; padding:32px 32px 24px; }
.page-heading { margin-bottom:24px; gap:24px; }
.page-heading>div:first-child,.page-footer { padding:0; background:none; box-shadow:none; }
.page-heading .eyebrow { font-size:12px; }
.heading-actions { gap:12px; }
.button { min-height:44px; padding:10px 16px; font-size:14px; font-weight:500; border-radius:12px; border-color:var(--border); box-shadow:none; transition:transform 100ms var(--motion-ease); }
.button.primary { font-weight:600; box-shadow:0 4px 12px #22264310; }
.icon-button { min-width:44px; min-height:44px; border-radius:12px; }
.text-button { font-size:13px; font-weight:500; }
.button:active,.icon-button:active,.nav-add:active,.category-row:active { transform:scale(.97); }
:focus-visible { outline:2px solid var(--brand); outline-offset:3px; }
input,select,textarea { min-height:44px; font-size:16px; font-weight:400; border-radius:12px; background:var(--surface); border-color:var(--control-border); transition:none; }
input:focus,select:focus,textarea:focus,.category-trigger:focus-visible { outline:2px solid var(--brand); outline-offset:2px; box-shadow:0 0 0 5px var(--brand-soft); }
input[type=checkbox] { min-height:20px; }
label { font-size:14px; font-weight:500; }
html[data-theme] #app .card,html[data-theme] #app .metric,html[data-theme] #app .stats-scope,html[data-theme] #app .stats-insight {
  background:var(--surface); border:1px solid var(--border); border-radius:20px; box-shadow:var(--elevation-1); min-width:0;
}
.card { padding:24px; }
.card.ledger { padding:0; }
.section-heading { margin-bottom:20px; gap:16px; }
.section-heading p { margin-top:4px; }
.section-heading .eyebrow { margin-bottom:4px; }
.metrics { display:grid; grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr)); gap:16px; margin-bottom:24px; }
.metric { padding:24px; gap:0; }
.metric-icon { width:28px; height:28px; top:20px; right:20px; background:transparent; color:var(--muted); }
.metric .eyebrow { font-size:12px; letter-spacing:0; }
html[data-theme][data-theme] #app .metric-value { font-size:26px; font-weight:600; margin:16px 0 6px; letter-spacing:-.035em; white-space:normal; overflow-wrap:anywhere; line-height:1.18; }
html[data-theme][data-theme] #app .metric:first-child .metric-value { font-size:clamp(36px,3.6vw,48px); font-weight:700; }
.metric .small { font-size:12px; }
.two-column { grid-template-columns:minmax(0,8fr) minmax(0,4fr); gap:24px; margin-bottom:24px; }
.calendar-layout { grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
.view-tabs { border:0; border-radius:16px; background:var(--subtle); gap:4px; padding:4px; margin-bottom:24px; width:fit-content; max-width:100%; position:relative; }
.view-tabs button { padding:10px 20px; min-height:44px; border:0; border-radius:12px; font-size:14px; font-weight:500; position:relative; z-index:1; }
.view-tabs.motion-indicated button[aria-selected=true] { background:transparent; color:var(--brand); }
.tab-indicator,.tab-indicator[data-shape=line],.tab-indicator[data-shape=pill] { background:var(--surface); box-shadow:var(--elevation-1); border-radius:12px; border:1px solid var(--border); pointer-events:none; }
.toolbar { gap:12px; margin-bottom:20px; }
.search { max-width:460px; background:var(--surface); border-color:var(--border); border-radius:12px; min-height:44px; }
.search input { font-size:14px; box-shadow:none; }
.sort-control select { font-size:13px; }
.filter-fields { padding:16px; gap:16px; border-radius:16px; background:var(--surface); }
.filter-chip { font-size:12px; background:var(--subtle); border-radius:24px; }
.ledger>.section-heading { padding:24px 24px 0; }
.ledger-head { font-size:11px; letter-spacing:.02em; text-transform:none; padding:12px 24px; background:var(--subtle); }
.transaction { min-height:80px; padding:16px 24px; border-bottom-color:var(--divider); position:relative; }
.transaction-main { gap:12px; }
html[data-theme] #app .transaction-main strong { font-size:15px; font-weight:500; }
html[data-theme] #app .transaction-meta { font-size:12px; }
.transaction-icon { width:36px; height:36px; border-radius:12px; }
.transaction-icon.expense { background:var(--expense-soft); }.transaction-icon.income { background:var(--income-soft); }
html[data-theme] #app .transaction-amount { font-size:15px; font-weight:600; white-space:normal; overflow-wrap:anywhere; }
.ledger-day-heading { background:transparent; border-bottom:1px solid var(--divider); padding:12px 24px; font-size:12px; }
.ledger-day-heading strong { font-weight:500; }.ledger-day-heading span { font-size:12px; }
.count,.badge { font-size:11px; font-weight:500; }
.budget-numbers strong { font-size:28px; font-weight:600; }
.budget-card h2,.categories-card .section-heading h2 { font-size:19px; }
.budget-card .eyebrow { font-size:12px; }
.budget-card p { font-size:13px; }
.category-info { font-size:13px; gap:12px; }.category-info strong { font-weight:500; }.category-info small { font-size:12px; }
.category-number { font-size:12px; }.category-list { gap:16px; }
.category-info { display:grid; grid-template-columns:24px minmax(0,1fr); gap:2px 8px; }
.category-info>.category-number { grid-column:1; grid-row:1/3; }
.category-info>strong { grid-column:2; }
.category-info>span:last-child { grid-column:2; margin-left:0; white-space:normal; overflow-wrap:anywhere; }
.budget-progress rect:last-child,.mobile-pace svg:not(.icon) rect:last-child,.bar-track rect:last-child { transform-origin:left center; transform-box:fill-box; }
.calendar-studio { --calendar-accent:var(--brand); --calendar-selected:var(--brand-soft); --calendar-tile:var(--surface); --calendar-panel:var(--subtle); --calendar-cap:var(--brand); --calendar-bar:var(--chart-2); }
.calendar-controls { padding:20px 20px 8px; }.calendar-controls h2 { font-size:19px; }
.calendar-selection-summary { padding:12px 20px; font-size:12px; }
.calendar-day { border-radius:12px; min-height:64px; }
.calendar-day small { font-size:11px; }
.calendar-legend { font-size:12px; flex-wrap:wrap; }
.calendar-day-totals strong { font-size:24px; }
.stats-studio { gap:24px; }
html[data-theme] #app .stats-scope { padding:16px 20px; border-radius:16px; }
.stats-hero { padding:32px; gap:32px; }
html[data-theme] #app .stats-hero-number,html[data-theme] #app .stats-hero-number .stats-number { color:var(--text); font-size:clamp(40px,4.5vw,56px); font-weight:700; line-height:1.15; letter-spacing:-.045em; overflow-wrap:anywhere; }
.stats-total-label { font-size:14px; font-weight:500; color:var(--muted); }
.stats-hero-copy .eyebrow { font-size:12px; margin-bottom:12px; }
.stats-hero-sub { gap:24px; margin-top:24px; }
html[data-theme] #app .stats-hero-sub .stats-number { font-size:24px; font-weight:600; }
.stats-hero-comparison,.stats-budget-glance { font-size:13px; }
.stats-insights { gap:16px; }.stats-insight { padding:20px; }.stats-insight p { font-size:13px; }.stats-insight strong { font-weight:500; }
.stats-spark-line { stroke:var(--brand); stroke-width:2; }
.stats-bar.income { fill:var(--income); }.stats-bar.expense,.stats-bar-pair.current .stats-bar.expense { fill:var(--expense); }
[data-theme=grey-glass] .stats-bar-pair.current .stats-bar.income { fill:var(--income); }
[data-theme=grey-glass] .stats-bar-pair.current .stats-bar.expense { fill:var(--expense); }
.stats-rank-row { gap:12px; padding:12px 4px; }.stats-rank-main strong { font-weight:500; }.stats-rank-main small,.stats-rank-val small { font-size:12px; }
.stats-segment { border-radius:12px; background:var(--subtle); }
.stats-segment button { min-height:44px; font-size:13px; font-weight:500; }
.stats-seg-ind { transition:none; border-radius:10px; }
.stats-chart-explorer output,.stats-spark-axis,.stats-bars-axis,.stats-legend { font-size:12px; }
.stats-budget-limit .stats-number { font-size:28px; font-weight:600; }
.stats-budget-totals .stats-number { font-size:24px; }
.stats-budget-scope,.stats-budget-legend,.stats-budget-totals span { font-size:12px; }
.stats-inspector { border-radius:20px 0 0 20px; background:var(--surface); }
.stats-selected-amount .stats-number { font-size:28px; }.stats-insight-totals .stats-number { font-size:22px; }
.accounts-summary { grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr)); }
.account-grid { gap:20px; }.account-card { text-align:left; padding:24px; }
.account-card h2 { font-size:19px; font-weight:500; }.account-card .account-balance { font-size:28px; font-weight:600; overflow-wrap:anywhere; white-space:normal; }
.settings-grid { gap:24px; }.settings-profile { padding:20px 24px; }.settings-profile-copy strong { font-size:15px; font-weight:500; }
.settings-jump { background:transparent; padding:0; margin-bottom:24px; gap:8px; }
.settings-jump button { font-size:13px; border-radius:12px; font-weight:500; }
.setting-row { padding-block:16px; gap:20px; }.setting-row strong { font-size:14px; font-weight:500; }.setting-row small { font-size:12px; }
.setting-action { font-size:14px; min-height:56px; border-radius:12px; }.setting-action strong { font-weight:500; }
.goal { padding-block:16px; }.goal strong { font-weight:500; }
dialog { background:var(--surface); border:1px solid var(--border); border-radius:24px; box-shadow:var(--elevation-3); }
dialog::backdrop { background:var(--scrim); -webkit-backdrop-filter:none; backdrop-filter:none; animation:none; }
dialog[data-closing]::backdrop { animation:none; }
.dialog-heading { padding:24px 24px 16px; border-bottom:1px solid var(--divider); }.dialog-heading h2 { font-size:20px; }
.entry-fields { padding:24px; gap:20px; }.dialog-footer { padding:16px 24px 24px; gap:12px; border-top-color:var(--divider); background:var(--surface); }
.type-switch { margin:20px 24px 0; border-radius:14px; background:var(--subtle); }.type-switch button { min-height:44px; font-size:14px; font-weight:500; border-radius:11px; }
.amount-field { padding:24px 24px 4px; font-size:14px; }.amount-field input { font-size:44px; font-weight:600; letter-spacing:-.035em; }
.amount-field input:focus { box-shadow:none; }.amount-live-preview { font-size:13px; }.field-error { font-size:12px; }
#editor #transaction-form .amount-field { text-align:left; text-transform:none; letter-spacing:0; }
#editor #transaction-form .amount-field input { font-size:clamp(32px,8vw,44px)!important; font-weight:600; line-height:1.2; text-align:left; letter-spacing:-.035em; }
#editor #transaction-form .amount-field>span>b { font-size:24px; }
.category-trigger { border-radius:12px; font-size:16px; }.category-chooser { padding:24px; }.chooser-list { border-radius:16px; }
.chooser-row-text strong,.chooser-action-text strong { font-weight:500; }.chooser-row-text span,.chooser-action-text span { font-size:12px; }
.detail-amount { font-size:36px; font-weight:700; white-space:normal; overflow-wrap:anywhere; }
dialog.transaction-detail-dialog .detail-amount { font-size:36px; }.receipt-history-totals strong { font-size:24px; }
.private-overview>div:first-child>strong,.private-loan-total { font-size:40px; font-weight:700; letter-spacing:-.035em; }
.private-overview>div:last-child>strong { font-size:24px; font-weight:600; }
.private-loan-row { border-radius:16px; background:var(--surface); border:1px solid var(--divider); }
.private-row-name strong { font-weight:500; }.private-row-amount strong { font-weight:600; }
.private-loan-metrics dd { font-size:22px; }.private-loan-metrics dt,.private-terms,.private-stacked-legend { font-size:12px; }
.private-history h4 { font-size:18px; font-weight:600; }.private-form fieldset { border-radius:16px; padding:16px; }
.toast { border-radius:16px; background:var(--surface); color:var(--text); border:1px solid var(--border); box-shadow:var(--elevation-2); font-size:14px; }
.toast-action { color:var(--link); font-weight:600; min-height:44px; }
.toast::after { content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--brand); transform-origin:left; transform:scaleX(0); border-radius:3px; }
.toast:has(.toast-action)::after { transform:scaleX(1); }
.startup-status { border-radius:24px; }
.startup-status p { position:relative; overflow:hidden; padding-block:8px; }
.startup-status p::after { content:''; position:absolute; inset:0; background:linear-gradient(100deg,transparent, var(--brand-soft),transparent); opacity:.5; animation:experience-shimmer 700ms ease-in-out infinite alternate; }
.login-card { width:min(440px,calc(100vw - 40px)); padding:36px; border-radius:24px; border-color:#cbd7f02e; background:#152035ed; box-shadow:inset 0 1px 0 #dce9ff1a,0 24px 80px #00000040; color:#f3f5fc; }
.login-card h1 { font-size:32px; font-weight:600; color:#f3f5fc; }.login-intro { color:#c4ccdd; font-size:15px; }
.login-card label { color:#e1e7f3; font-weight:500; }.login-card input { background:#1d2a40; color:#f3f5fc; border-color:#8191af; }
.login-card input::placeholder { color:#b4bfd4; }.login-card .text-button { color:#c7bdff; }.login-card .button.primary { background:#c2b9f3; color:#201b3c; border-color:#c2b9f3; }
.login-card .form-error { color:#ffb9c2; }.login-footnote { font-size:12px; color:#d0d9eb; }
#app[data-route=login] .login-card .login-field-header label,#app[data-route=login] .login-card label { color:#e1e7f3; font-size:14px; }
#app[data-route=login] .login-card input:not([type=checkbox]) { background:#1d2a40; color:#f3f5fc; border-color:#8191af; font-size:16px; box-shadow:none; }
#app[data-route=login] .login-card input:not([type=checkbox]):focus { border-color:#c2b9f3; outline:2px solid #c2b9f3; outline-offset:2px; box-shadow:0 0 0 5px #c2b9f322; }
#app[data-route=login] .login-card .button.primary.login-submit-btn { background:#c2b9f3!important; background-image:none!important; color:#201b3c!important; border-color:#c2b9f3!important; box-shadow:none!important; font-size:14px; font-weight:600!important; transition:transform 100ms var(--motion-ease)!important; }
#app[data-route=login] .login-card .button.primary.login-submit-btn:hover { box-shadow:none!important; transform:none!important; }
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  html[data-theme] #app .card,html[data-theme] #app .metric,html[data-theme] #app .stats-scope,html[data-theme] #app .stats-insight,
  .navigation,dialog,.login-card {
    background:var(--experience-surface); -webkit-backdrop-filter:blur(24px) saturate(150%); backdrop-filter:blur(24px) saturate(150%);
  }
  .login-card { background:#152035ed; }
  .card .card,.week .ledger,.private-workspace .card { -webkit-backdrop-filter:none; backdrop-filter:none; }
}
@media(min-width:640px) {
  .mobile-home-header { display:flex; width:fit-content; gap:12px; padding:0; margin-bottom:12px; border:0; background:transparent; box-shadow:none; }
  .screen { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); }
  .screen>* { grid-column:1/-1; min-width:0; }
  .view-tabs.motion-indicated button[aria-selected=true] { border:0; }
  .topbar { -webkit-backdrop-filter:none; backdrop-filter:none; }
  #app .stats-studio[data-stats-enter] .stats-hero,#app .stats-studio[data-stats-enter] .stats-analyzer,#app .stats-studio[data-stats-enter] .stats-trend,#app .stats-studio[data-stats-enter] .stats-budget-block,#app .stats-studio[data-stats-enter] .stats-ledger { animation:experience-rise 260ms var(--motion-ease) backwards; }
  #app .stats-studio[data-stats-enter] .stats-analyzer { animation-delay:50ms; }
  #app .stats-studio[data-stats-enter] .stats-trend { animation-delay:100ms; }
  #app .stats-studio[data-stats-enter] .stats-budget-block { animation-delay:150ms; }
  #app .stats-studio[data-stats-enter] .stats-ledger { animation-delay:200ms; }
}
@media(min-width:640px) and (max-width:1023px) {
  .navigation { width:80px; padding:24px 12px; }.workspace { margin-left:80px; }
  .navigation .brand>span:last-child,.navigation .nav-item>span:not(.nav-badge),.navigation .nav-add>span { display:none; }
  .navigation .brand { justify-content:center; }.navigation .nav-item { padding:12px; justify-content:center; }
  main { padding:24px; }.topbar { padding-inline:24px; }
  .two-column { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .main-layout { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); }
  .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }.metric:first-child { grid-column:1/-1; }
  .accounts-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .account-grid,.settings-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .transaction { padding-inline:16px; }.ledger>.section-heading { padding-inline:16px; }
  .transaction-account,.transaction-date,.ledger-head { display:none; }
  .transaction { grid-template-columns:minmax(0,1fr) auto; }.mobile-date { display:inline; }
  .stats-hero { padding:24px; }
}
@media(max-width:639px) {
  html { scrollbar-gutter:auto; }
  .workspace { margin-left:0; }.topbar { padding-inline:16px; }
  main { padding:20px 16px calc(112px + env(safe-area-inset-bottom)); }
  html[data-theme] #app .page-heading h1 { font-size:24px; }.page-heading { gap:12px; margin-bottom:20px; }
  .navigation { inset:auto 12px calc(12px + env(safe-area-inset-bottom)); width:auto; height:72px; padding:6px; border:1px solid var(--border); border-radius:24px; box-shadow:var(--elevation-2); background:var(--glass-tint); }
  .navigation::before,.navigation::after { display:none; }
  .navigation .nav-items { display:grid; grid-template-columns:1fr 1fr 52px 1fr 1fr; margin:0; gap:0; height:100%; align-items:center; }
  .navigation .nav-item { min-height:56px; padding:6px 2px; gap:3px; border:0; background:transparent; border-radius:18px; font-weight:500; }
  .navigation .nav-item span { font-size:11px; }.navigation .nav-item .icon { width:20px; height:20px; }
  .nav-highlight { border-radius:18px; }.navigation .nav-add { width:48px!important; height:48px!important; min-height:48px!important; border-radius:16px!important; bottom:12px; border:0; box-shadow:0 4px 12px #0e142a24; }
  .navigation .nav-add .icon { width:22px!important; height:22px!important; }
  .nav-badge { font-size:10px!important; right:calc(50% - 24px)!important; }
  #app[data-route=home] { --hero-bg:var(--bg)!important; --hero-surface:var(--surface)!important; --hero-text:var(--text)!important; --hero-muted:var(--muted)!important; --hero-active:var(--brand-soft)!important; --hero-accent:var(--brand)!important; --hero-border:var(--border)!important; --hero-guidance:var(--subtle)!important; --hero-track:var(--chart-track)!important; }
  #app[data-route=home] main { padding-top:0; }
  #app[data-route=home] .mobile-home-header { grid-template-columns:44px minmax(86px,auto) 44px minmax(0,1fr) 44px 44px 44px; gap:0; padding:8px; min-height:60px; background:transparent; }
  #app[data-route=home] .mobile-home-header .tool-icon { min-width:44px!important; width:44px!important; max-width:44px!important; height:44px!important; min-height:44px!important; }
  #app[data-route=home] .mobile-home-header .mobile-month { min-width:0; width:auto; font-size:14px; min-height:44px; padding:8px 0; }
  #app[data-route=home] .view-tabs { margin:0 16px 16px; padding:4px; width:auto; border-radius:16px; background:var(--subtle); }
  #app[data-route=home] .view-tabs button { min-width:0; flex:1; padding:8px 4px; font-size:13px; min-height:44px; }
  #app[data-route=home] .mobile-budget-summary { margin:0 16px; padding:24px 20px; border:1px solid var(--border); border-radius:24px; background:var(--surface); box-shadow:var(--elevation-1); }
  #app[data-route=home] .mobile-summary-date { font-size:12px; line-height:1.6; }
  #app[data-route=home] .mobile-remaining strong,#app[data-route=home] .mobile-unset-overview strong { font-size:clamp(36px,11vw,48px); font-weight:700; letter-spacing:-.045em; line-height:1.15; color:var(--text); overflow-wrap:anywhere; }
  #app[data-route=home] .mobile-budget-values { grid-template-columns:1fr; gap:16px; margin:16px 0; }
  #app[data-route=home] .mobile-budget-values button { text-align:left; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
  #app[data-route=home] .mobile-budget-values button strong { font-size:20px; font-weight:600; }
  #app[data-route=home] .mobile-budget-values span { font-size:12px; color:var(--muted); }
  #app[data-route=home] .mobile-pace { margin-top:16px; padding:12px; border-radius:12px; background:var(--subtle); border-color:var(--border); }
  #app[data-route=home] .mobile-pace svg rect:first-child { fill:var(--chart-track); }
  #app[data-route=home] .mobile-pace svg rect:last-child { fill:var(--brand); }
  #app[data-route=home] .mobile-budget-summary[data-over-budget=true] .mobile-pace svg rect:last-child { fill:var(--expense); }
  #app[data-route=home] .mobile-guidance { padding-top:8px; font-size:12px; line-height:1.6; }
  #app[data-route=home] .mobile-category-chips { margin:0; padding:16px; gap:8px; flex-wrap:wrap; overflow:visible; }
  #app[data-route=home] .mobile-category-chips button { min-height:44px; font-size:12px; border-radius:24px; padding:8px 12px; }
  #app[data-route=home] .main-layout { margin:0 16px; display:block; }
  #app[data-route=home] .main-layout>.ledger { margin:0; border-radius:20px; border:1px solid var(--border); background:var(--surface); }
  html[data-theme] #app[data-route=home] .main-layout { margin:0 16px 24px!important; display:block; }
  html[data-theme] #app[data-route=home] .main-layout>.ledger { margin:0!important; border:1px solid var(--border)!important; border-radius:20px!important; background:var(--surface)!important; }
  #app[data-route=home] .main-layout>.ledger .section-heading { padding:20px 16px 0; }
  #app[data-route=home] .transaction { padding:16px; }
  #app[data-route=home] .transaction-main strong { font-size:15px; }
  #app[data-route=home] .transaction-meta { font-size:12px; }
  #app[data-route=home] .ledger-day-heading { padding:12px 16px; }
  .metrics,.accounts-summary { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .metric { padding:20px 16px; }.metric:first-child { grid-column:1/-1; }
  html[data-theme][data-theme] #app .metric-value { font-size:22px; }
  html[data-theme][data-theme] #app .metric:first-child .metric-value { font-size:40px; }
  .two-column,.calendar-layout,.account-grid,.settings-grid { grid-template-columns:1fr; gap:16px; }
  .card { padding:20px; }.section-heading h2 { font-size:18px; }
  .account-card { padding:20px; }.account-card .account-balance { font-size:26px; }
  .settings-profile { padding:16px; }.settings-jump { margin-bottom:16px; }.setting-row { gap:12px; }
  html[data-theme] #app .stats-scope { padding:16px; }
  .stats-hero { padding:24px 20px; }
  html[data-theme] #app .stats-hero-number,html[data-theme] #app .stats-hero-number .stats-number { font-size:clamp(36px,11vw,48px); }
  html[data-theme] #app .stats-hero-sub .stats-number { font-size:22px; }
  .stats-hero-sub { gap:16px; margin-top:20px; }.stats-breakdown { gap:20px; }
  .stats-insight { padding:16px; }.stats-rank-row { gap:8px; }
  #app .calendar-studio .calendar-grid { padding-inline:8px; gap:4px; }
  #app .calendar-studio .calendar-day { min-height:64px; border-radius:10px; }
  #app .calendar-studio .calendar-day small { font-size:9px; letter-spacing:-.03em; }
  .calendar-selection-summary { padding:12px 16px; align-items:flex-start; flex-direction:column; gap:2px; }
  .calendar-controls { padding:16px 16px 8px; }.calendar-controls h2 { font-size:17px; }
  .calendar-day-totals strong { font-size:22px; }
  .calendar-month-chart { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px 8px; overflow:visible; }
  .calendar-month-chart .calendar-month-bar { min-width:0; width:100%; min-height:96px; }
  .simple-dialog { inset:auto 0 0; margin:0; width:100%; max-width:none; max-height:88dvh; border-radius:24px 24px 0 0; }
  .entry-dialog { inset:auto 0 0; margin:0; width:100%; height:var(--keyboard-height,100dvh); max-height:var(--keyboard-height,100dvh); border-radius:24px 24px 0 0; }
  .dialog-heading { padding:20px 20px 16px; }.entry-fields { padding:20px; gap:16px; }.dialog-footer { padding:16px 20px calc(16px + env(safe-area-inset-bottom)); }
  .type-switch { margin:16px 20px 0; }.amount-field { padding:20px 20px 4px; }.amount-field input { font-size:40px; }
  .entry-dialog input,.entry-dialog select,.entry-dialog textarea { font-size:16px; scroll-margin-block:80px; }
  .entry-dialog .dialog-footer { position:sticky; bottom:0; }.entry-dialog form { min-height:0; }
  .private-overview>div:first-child>strong,.private-loan-total { font-size:36px; overflow-wrap:anywhere; }.private-loan-metrics dd { font-size:20px; }
  html[data-theme] #app .card,html[data-theme] #app .metric,html[data-theme] #app .stats-scope,html[data-theme] #app .stats-insight,dialog { background:var(--surface); backdrop-filter:none; -webkit-backdrop-filter:none; }
  .login-card { padding:28px 24px; }.login-card input { font-size:16px; }
}
@keyframes experience-rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes experience-shimmer { from { transform:translateX(-100%); } to { transform:translateX(100%); } }
/* Financial chart values stay exact; entry effects reveal the finished SVG. */
#app .stats-studio[data-stats-enter] .stats-spark-line { stroke-dasharray:none; stroke-dashoffset:0; animation:experience-fade 300ms var(--motion-ease) both; }
#app .stats-studio[data-stats-enter] .stats-donut { animation:experience-fade 300ms var(--motion-ease) both; }
#app .stats-studio[data-stats-enter] .stats-bar { animation:stats-grow 300ms var(--motion-ease) both; }
@keyframes experience-fade { from { opacity:0; } to { opacity:1; } }
.transaction-changing::after { content:''; position:absolute; inset:0; background:var(--brand-soft); pointer-events:none; animation:experience-highlight 650ms ease-out both; }
@keyframes experience-highlight { from { opacity:.6; } to { opacity:0; } }
::view-transition-old(root),::view-transition-new(root) { animation-duration:240ms; animation-timing-function:var(--motion-ease); }
[data-simple-glass=true] .navigation,[data-simple-glass=true] #app .card,[data-simple-glass=true] #app .metric,[data-simple-glass=true] dialog { background:var(--surface)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; box-shadow:none; }
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
  body::before { display:none; }
  html[data-theme] #app .card,html[data-theme] #app .metric,html[data-theme] #app .stats-scope,html[data-theme] #app .stats-insight,.navigation,dialog { background:var(--surface); backdrop-filter:none!important; -webkit-backdrop-filter:none!important; box-shadow:none; }
  .login-card { background:#152035; backdrop-filter:none; -webkit-backdrop-filter:none; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .button:active,.icon-button:active,.nav-add:active,.category-row:active { transform:none; }
  ::view-transition-old(root),::view-transition-new(root) { animation:none!important; }
}
@media(forced-colors:active) {
  body::before { display:none; } html[data-theme] body { background:Canvas; color:CanvasText; }
  html[data-theme] #app .card,html[data-theme] #app .metric,html[data-theme] #app .stats-scope,html[data-theme] #app .stats-insight,.navigation,dialog,.toast,.login-card { background:Canvas!important; color:CanvasText!important; border-color:CanvasText; box-shadow:none; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; }
  .nav-highlight,.tab-indicator { background:Canvas; border:2px solid Highlight; }
}
@media print { body::before { display:none; } html[data-theme] body { background:white; color:black; }.workspace { margin:0; }main { max-width:none; padding:0; }html[data-theme] #app .card { background:white; box-shadow:none; backdrop-filter:none; } }