/* Geist and Geist Mono by Vercel (SIL Open Font License, see fonts/LICENSE.txt). Served from this site:
   no third-party font requests, and the CSP allows fonts from 'self' only. Both include the ₱ sign. */
@font-face{font-family:"Geist";src:url("/fonts/Geist-1.7.2.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("/fonts/GeistMono-1.7.2.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --bg:#F2F4F8; --surface:#FFFFFF; --surface-2:#EDF0F5; --line:#E0E5ED;
  --ink:#0D1321; --ink-2:#4A5467; --ink-3:#5B667B;
  --accent:#4A63F5; --accent-ink:#FFFFFF;
  --in:#0E9F74; --bill:#E34948; --exp:#EDA100;
  /* Chart colours, validated with the dataviz palette checks (lightness band, chroma, colour-blind and
     normal-vision separation, contrast) against the card surface in each mode. */
  --c-line:#4A63F5; --c-in:#0E9F74; --c-bill:#E34948; --c-exp:#EDA100;
  --c-save:#4A63F5; --c-ess:#EDA100; --c-fun:#D55181;
  --st-good:#0CA30C; --st-warn:#FAB219; --st-crit:#D03B3B;
  --c-grid:#E9EDF3; --c-axis:#C3CBD7;
  --card:#0E1320; --card-2:#1A2134; --card-ink:#F3F5FA; --card-ink-2:#9AA4B8;
  --card-in:#43E0A0; --card-bill:#FF7D69; --card-exp:#FFBE55;
  --shadow:0 1px 2px rgba(13,19,33,.05),0 8px 24px rgba(13,19,33,.06);
  --display:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Text versions of the income / bill / expense colours: the bright ones are for fills (bars, dots,
     ticks); these pass WCAG AA (4.5:1) as small text on every background they sit on. */
  --in-t:#067152; --bill-t:#B8341E; --exp-t:#875800;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#090C13; --surface:#11161F; --surface-2:#181E2A; --line:#222A38;
    --ink:#ECEFF5; --ink-2:#A6AFC0; --ink-3:#8591A6;
    --accent:#7F95FF; --accent-ink:#0A0E18;
    --in:#3FD89A; --bill:#FF7B66; --exp:#FFB547; --in-t:#3FD89A; --bill-t:#FF7B66; --exp-t:#FFB547;
    --c-line:#7F95FF; --c-in:#16956A; --c-bill:#E25563; --c-exp:#C98500; --c-save:#6B80F2; --c-ess:#C98500; --c-fun:#D55181;
    --c-grid:#1D2431; --c-axis:#2F3949;
    --card:#141B2B; --card-2:#1E2638; --card-ink:#F3F5FA; --card-ink-2:#98A2B6;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.25);
  }
}
:root[data-theme="dark"]{
  --bg:#090C13; --surface:#11161F; --surface-2:#181E2A; --line:#222A38;
  --ink:#ECEFF5; --ink-2:#A6AFC0; --ink-3:#8591A6;
  --accent:#7F95FF; --accent-ink:#0A0E18;
  --in:#3FD89A; --bill:#FF7B66; --exp:#FFB547; --in-t:#3FD89A; --bill-t:#FF7B66; --exp-t:#FFB547;
    --c-line:#7F95FF; --c-in:#16956A; --c-bill:#E25563; --c-exp:#C98500; --c-save:#6B80F2; --c-ess:#C98500; --c-fun:#D55181;
    --c-grid:#1D2431; --c-axis:#2F3949;
  --card:#141B2B; --card-2:#1E2638; --card-ink:#F3F5FA; --card-ink-2:#98A2B6;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--body);letter-spacing:-.006em;padding:0 16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.wrap{max-width:1080px;margin:0 auto;padding-block:18px 110px;display:flex;flex-direction:column;gap:18px}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tnum{font-variant-numeric:tabular-nums}

/* top */
.top{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.brand{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.04em;margin:0 auto 0 0;display:flex;align-items:center;gap:9px}
.brand i{width:26px;height:26px;border-radius:8px;background:var(--ink);color:var(--bg);display:grid;place-content:center;font-style:normal;font-size:14px}
.month{display:flex;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:3px}
.month button{border:0;background:none;width:32px;height:32px;border-radius:9px;font-size:17px;color:var(--ink-2)}
.month button:hover{background:var(--surface-2);color:var(--ink)}
.month strong{min-width:132px;text-align:center;font-weight:700;font-size:14px}
.rate{display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:3px 4px 3px 12px;font-size:13px;color:var(--ink-2);font-weight:600}
.rate input{width:70px;border:0;background:var(--surface-2);border-radius:9px;padding:6px 8px;text-align:right;font-weight:700;color:var(--ink)}
.rate-badge{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:9px;padding:6px 10px;font-size:12px;font-weight:800;letter-spacing:.02em;white-space:nowrap}
.rate-badge[data-mode="live"]{background:color-mix(in srgb,var(--in) 14%,transparent);color:var(--in-t);cursor:help}
.rate-badge[data-mode="live"]::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,var(--in) 25%,transparent);animation:pulse 2.4s ease-in-out infinite}
.rate-badge[data-mode="manual"]{background:var(--surface-2);color:var(--ink-2)}
.rate-badge[data-mode="manual"]:hover{color:var(--ink);background:var(--line)}
.rate-badge[data-mode="offline"]{background:color-mix(in srgb,var(--exp) 15%,transparent);color:var(--exp-t)}
@keyframes pulse{50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--in) 0%,transparent)}}

.theme{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);display:grid;place-content:center;transition:color .15s,transform .2s}
.theme:hover{color:var(--ink)}
.theme:active{transform:rotate(-20deg) scale(.92)}
.theme svg{width:19px;height:19px}
.theme .i-sun{display:none}
.theme[data-mode="dark"] .i-sun{display:block}
.theme[data-mode="dark"] .i-moon{display:none}
.logs-btn{height:40px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);display:inline-flex;align-items:center;gap:7px;padding:0 13px;font-weight:700;font-size:13.5px}
.logs-btn:hover{color:var(--ink)}
.logs-btn svg{width:17px;height:17px}
.log-sheet{max-width:520px;display:flex;flex-direction:column}
.log-filters{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:10px;scrollbar-width:none}
.log-filters button{flex:none;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:99px;padding:6px 12px;font-size:12.5px;font-weight:700}
.log-filters button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.log-list{flex:1;min-height:180px;max-height:56vh;overflow:auto;margin:0 -6px;padding:0 6px}
.log-day{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:14px 0 6px}
.log-day:first-child{margin-top:4px}
.log-e{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:start;padding:8px 0;border-bottom:1px solid var(--line)}
.log-e:last-child{border-bottom:0}
.log-ic{width:28px;height:28px;border-radius:9px;display:grid;place-content:center;font-size:13px;font-weight:800}
.log-e[data-type="add"] .log-ic{background:color-mix(in srgb,var(--in) 15%,transparent);color:var(--in-t)}
.log-e[data-type="edit"] .log-ic{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)}
.log-e[data-type="delete"] .log-ic{background:color-mix(in srgb,var(--bill) 14%,transparent);color:var(--bill-t)}
.log-e[data-type="tick"] .log-ic{background:color-mix(in srgb,var(--in) 15%,transparent);color:var(--in-t)}
.log-e[data-type="move"] .log-ic{background:color-mix(in srgb,var(--exp) 17%,transparent);color:var(--exp-t)}
.log-e[data-type="rate"] .log-ic,.log-e[data-type="cash"] .log-ic{background:var(--surface-2);color:var(--ink-2)}
.log-e[data-type="export"] .log-ic{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)}
.log-txt{font-size:14px;font-weight:600;line-height:1.4;overflow-wrap:anywhere;padding-top:4px}
.log-txt small{display:block;font-size:12px;color:var(--ink-3);font-weight:600;margin-top:1px}
.log-time{font-size:12px;color:var(--ink-3);font-weight:600;white-space:nowrap;padding-top:5px;font-variant-numeric:tabular-nums}
.log-empty{padding:40px 10px;text-align:center;color:var(--ink-3)}
.log-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.log-count{font-size:12.5px;color:var(--ink-3);font-weight:600}
.danger.small{padding:8px 14px;border-radius:11px;font-size:13px}
.danger.armed{background:var(--bill);color:#fff;border-color:var(--bill)}
@media (max-width:600px){.logs-btn span{display:none}.logs-btn{width:40px;padding:0;justify-content:center}.log-list{max-height:62vh}}
body.locked .wrap,body.locked .fab{display:none}
.auth{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding-block:32px}
.auth-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:30px 26px;box-shadow:var(--shadow);position:relative;overflow:hidden;isolation:isolate}
.auth-card::before{content:"";position:absolute;inset:-60% -40% auto auto;width:340px;height:340px;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,transparent),transparent 65%);z-index:-1}
.auth-brand{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.04em;margin-bottom:26px}
.auth-brand i{width:28px;height:28px;border-radius:9px;background:var(--ink);color:var(--bg);display:grid;place-content:center;font-style:normal;font-size:15px}
.auth h1{font-family:var(--display);font-weight:650;font-size:27px;line-height:1.15;letter-spacing:-.04em;margin:0 0 6px;text-wrap:balance}
.auth-sub{margin:0 0 20px;color:var(--ink-2);font-size:14.5px}
.auth-note{margin:0 0 16px;font-size:13.5px;font-weight:600;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--exp) 14%,transparent);color:var(--ink)}
.auth form{gap:14px}
.auth .primary{margin-top:4px}
.auth-foot{margin:18px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.auth-foot code{white-space:nowrap;font-size:12px;background:var(--surface-2);padding:1px 6px;border-radius:6px;color:var(--ink-2)}
.pw{position:relative;display:block}
.pw input{padding-right:64px}
.pw-show{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:var(--surface-2);border-radius:8px;padding:5px 9px;font-size:12px;font-weight:700;color:var(--ink-2)}
.acct-who{margin:-4px 0 18px;color:var(--ink-2);font-size:14px}
.acct-who b{color:var(--ink)}
.acct-h{margin:0;font-weight:800;font-size:14px}
.acct-out{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:flex;gap:8px}
.acct-out .primary{flex:1}
.acct-sec{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.acct-row{display:flex;flex-wrap:wrap;gap:8px}
.acct-small{margin:6px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.link{border:0;background:none;padding:0;color:var(--accent);font-weight:700;font-size:13.5px;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.link:hover{color:var(--ink)}
.link.inline{font-size:inherit;font-weight:600}
.auth-links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:16px}
.priv p{margin:0 0 12px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.priv p:last-child{margin:0}
.priv b{color:var(--ink)}
.day-sheet{max-width:480px}
.day-nav{display:flex;align-items:center;gap:10px;min-width:0}
.day-nav h2{font-family:var(--display);font-weight:650;font-size:19px;margin:0;letter-spacing:-.03em;white-space:nowrap}
.day-sub{margin:0;font-size:12.5px;color:var(--ink-3);font-weight:600}
.day-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:14px}
.day-sum div{background:var(--surface-2);border-radius:12px;padding:10px 12px;min-width:0}
.day-sum span{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.day-sum b{display:block;font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:2px;overflow-wrap:anywhere}
.day-sum b.in{color:var(--in-t)} .day-sum b.out{color:var(--bill-t)} .day-sum b.neg{color:var(--bill-t)}
.day-list{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}
.day-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:14px}
.day-item.done .di-name{text-decoration:line-through;color:var(--ink-3)}
.di-name{font-weight:700;overflow-wrap:anywhere}
.di-amt{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.di-amt.in{color:var(--in-t)}
.di-acts{grid-column:2 / 4;display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.di-acts button{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:9px;padding:5px 12px;font-size:12.5px;font-weight:700}
.di-acts button:hover{color:var(--ink);background:var(--surface-2)}
.di-acts button.armed{background:var(--bill);border-color:var(--bill);color:#fff}
.day-empty{padding:22px 10px;text-align:center;color:var(--ink-3);border:1.5px dashed var(--line);border-radius:14px}
.day-add{width:100%}
.rate{position:relative}
.info-btn{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);color:var(--ink-3);font-size:12px;font-weight:800;line-height:1;display:grid;place-content:center;padding:0;flex:none}
.info-btn:hover,.info-btn[aria-expanded="true"]{color:var(--ink);border-color:var(--ink-3)}
.tip{position:absolute;top:calc(100% + 10px);right:0;z-index:45;width:min(300px,calc(100vw - 32px));background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:0 14px 40px rgba(0,0,0,.18);font-size:13px;font-weight:500;line-height:1.5;text-align:left}
.tip::before{content:"";position:absolute;top:-6px;right:14px;width:10px;height:10px;background:var(--surface);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
.tip b{display:block;font-size:13.5px;margin-bottom:4px}
.tip p{margin:0 0 8px;color:var(--ink-2)}
.tip p:last-child{margin:0}
.tip .tip-meta{font-size:12px;color:var(--ink-3)}
@media (max-width:600px){.tip{right:auto;left:0}.tip::before{right:auto;left:auto;right:10px}}
.exp-sheet{max-width:560px}
.exp-h{margin:0 0 8px;font-weight:800;font-size:13px}
.exp-summary{margin:6px 0 16px;font-size:13px;color:var(--ink-2);font-weight:600}
#expPeriods{flex-wrap:wrap;overflow:visible}
#expCustom{margin-top:6px}
.exp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ef{display:flex;align-items:flex-start;gap:12px;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:12px;min-width:0;transition:border-color .15s,background .15s}
.ef:hover{border-color:var(--ink-3);background:var(--surface-2)}
.ef:disabled{opacity:.55;cursor:progress}
.ef b{display:block;font-size:14px;font-weight:800}
.ef small{display:block;font-size:12px;color:var(--ink-3);font-weight:600;line-height:1.35;margin-top:2px}
.ef-ic{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-content:center;font-size:11px;font-weight:900;letter-spacing:.02em;color:#fff;background:var(--c)}
.ef[data-f="pdf"]{--c:#E0503A} .ef[data-f="excel"]{--c:#107C41} .ef[data-f="sheets"]{--c:#0F9D58} .ef[data-f="word"]{--c:#2B579A}
.ef[data-f="docs"]{--c:#4285F4} .ef[data-f="csv"]{--c:#687286} .ef[data-f="ics"]{--c:#CC8200} .ef[data-f="json"]{--c:#4A63F5}
.exp-status{margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--surface-2);font-size:13.5px;font-weight:600}
.exp-status[data-tone="bad"]{color:var(--bill-t)}
.exp-status .next{display:block;margin-top:6px;color:var(--ink-2);font-weight:500;line-height:1.5}
.exp-status a{display:inline-block;margin-top:10px;background:var(--ink);color:var(--bg);text-decoration:none;border-radius:10px;padding:8px 14px;font-weight:800}
@media (max-width:480px){.exp-grid{grid-template-columns:1fr}}
.notice{margin:0;font-size:13px;padding:9px 14px;border-radius:12px;background:var(--surface-2);color:var(--ink-2)}
.notice[data-tone="bad"]{color:var(--bill-t)}

/* overview */
.overview{display:grid;grid-template-columns:1.25fr 1fr;gap:18px}
.bal{position:relative;overflow:hidden;background:var(--card);color:var(--card-ink);border-radius:22px;padding:26px;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;isolation:isolate}
.bal::before{content:"";position:absolute;inset:-40% -20% auto auto;width:360px;height:360px;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 45%,transparent),transparent 65%);z-index:-1;opacity:.55}
.bal .lbl{margin:0;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--card-ink-2)}
.bal .amt{font-family:var(--display);font-weight:700;font-size:clamp(40px,7vw,62px);line-height:1;letter-spacing:-.04em;margin:10px 0 6px;font-variant-numeric:proportional-nums;overflow-wrap:anywhere}
.bal .amt.neg{color:var(--card-bill)}
.bal .sub{margin:0;color:var(--card-ink-2);font-size:14px}
.bal .sub b{color:var(--card-ink);font-weight:700}
.startcash{margin-top:16px;display:inline-flex;align-items:center;gap:8px;background:var(--card-2);border-radius:12px;padding:4px 4px 4px 12px;font-size:12.5px;color:var(--card-ink-2);font-weight:600}
.startcash-wrap{display:flex;flex-direction:column;gap:6px;align-items:flex-start;margin-top:16px}
.startcash-wrap .startcash{margin-top:0}
.start-hint{margin:0;font-size:12px;color:var(--card-ink-2);line-height:1.45;max-width:340px}
.start-hint button{border:0;background:none;padding:0;color:var(--card-ink);font-weight:700;font-size:12px;text-decoration:underline;text-underline-offset:2px}
.startcash input{width:110px;border:0;border-radius:9px;background:rgba(255,255,255,.06);color:var(--card-ink);padding:6px 8px;text-align:right;font-weight:700}
.ring{position:relative;width:132px;height:132px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:12}
.ring .track{stroke:rgba(255,255,255,.08)}
.ring .seg{stroke-linecap:butt;transition:stroke-dasharray .5s ease,stroke-dashoffset .5s ease}
.ring .mid{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ring .mid b{font-family:var(--display);font-size:24px;font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.ring .mid span{font-size:11px;color:var(--card-ink-2);font-weight:600;text-transform:uppercase;letter-spacing:.08em}

.stats{display:grid;grid-template-rows:repeat(3,1fr);gap:10px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:center;box-shadow:var(--shadow)}
.stat .dot{width:34px;height:34px;border-radius:11px;display:grid;place-content:center;font-weight:800;font-size:16px;grid-row:span 2}
.stat[data-k="in"] .dot{background:color-mix(in srgb,var(--in) 15%,transparent);color:var(--in-t)}
.stat[data-k="out"] .dot{background:color-mix(in srgb,var(--bill) 15%,transparent);color:var(--bill-t)}
.stat[data-k="exp"] .dot{background:color-mix(in srgb,var(--exp) 17%,transparent);color:var(--exp-t)}
.stat .name{font-weight:700;font-size:14px}
.stat .val{font-weight:700;font-size:19px;letter-spacing:-.035em;text-align:right;font-variant-numeric:tabular-nums}
.stat .note{font-size:12px;color:var(--ink-3);grid-column:2 / 4}

.warn{display:flex;gap:12px;align-items:center;padding:13px 16px;border-radius:16px;background:color-mix(in srgb,var(--bill) 11%,var(--surface));border:1px solid color-mix(in srgb,var(--bill) 30%,transparent);color:var(--ink);font-size:14px}
.warn .ic{flex:none;width:26px;height:26px;border-radius:50%;background:var(--bill);color:#fff;display:grid;place-content:center;font-weight:800;font-size:14px}
.warn b{color:var(--bill-t)}

/* board */
.board{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;align-items:start}
.card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:var(--shadow);min-width:0}
.card-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 12px;margin-bottom:12px}
.card-h h2{font-family:var(--display);font-weight:650;font-size:17px;letter-spacing:-.03em;margin:0}
.legend{display:flex;gap:12px;font-size:12px;color:var(--ink-3);font-weight:600}
.legend span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:3px;margin-right:5px;vertical-align:0}
.legend .l-in::before{background:var(--in)} .legend .l-out::before{background:var(--bill)} .legend .l-exp::before{background:var(--exp)}
.hint{margin:-4px 0 12px;font-size:12.5px;color:var(--ink-3)}

/* calendar */
.dow,.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.dow span{font-size:11px;font-weight:700;color:var(--ink-3);text-align:center;padding-bottom:4px;letter-spacing:.04em}
.cell{min-height:92px;border-radius:12px;background:var(--surface-2);border:1.5px solid transparent;padding:6px;display:flex;flex-direction:column;gap:3px;cursor:pointer;min-width:0;transition:border-color .15s,background .15s}
.cell:hover{border-color:var(--line)}
.cell.blank{background:none;cursor:default}
.cell.over{border-color:var(--accent);border-style:dashed;background:color-mix(in srgb,var(--accent) 10%,var(--surface-2))}
.dn{font-size:12px;font-weight:700;color:var(--ink-3);width:22px;height:22px;display:grid;place-content:center;border-radius:7px}
.cell.today .dn{background:var(--ink);color:var(--bg)}
.chip{display:flex;align-items:center;justify-content:space-between;gap:4px;width:100%;border:0;border-radius:7px;padding:3px 6px;font-size:11.5px;font-weight:700;line-height:1.3;text-align:left;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;min-width:0}
.chip.in{background:color-mix(in srgb,var(--in) 16%,var(--surface));color:var(--in-t)}
.chip.out{background:color-mix(in srgb,var(--bill) 14%,var(--surface));color:var(--bill-t)}
.chip.exp{background:color-mix(in srgb,var(--exp) 17%,var(--surface));color:var(--exp-t)}
.chip.done{opacity:.5;text-decoration:line-through}
.chip .cl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-weight:600}
.chip .ca{flex-shrink:0;font-variant-numeric:tabular-nums}
.chip.lifting{opacity:.25}
.chip.ghost{position:fixed;z-index:60;pointer-events:none;width:auto;max-width:190px;box-shadow:0 14px 32px rgba(0,0,0,.28);transform:translate(-50%,-60%) rotate(-3deg) scale(1.05);cursor:grabbing}
.eod{margin-top:auto;font-size:10.5px;font-weight:700;color:var(--ink-3);text-align:right;white-space:nowrap;overflow:hidden;font-variant-numeric:tabular-nums}
.eod.neg{color:var(--bill-t)}
body.dragging{cursor:grabbing;user-select:none;-webkit-user-select:none}

/* list */
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.list li{display:grid;grid-template-columns:auto 44px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 6px;border-radius:12px;cursor:pointer}
.list li:hover{background:var(--surface-2)}
.list li.empty{display:flex;cursor:default}
.list li.empty:hover{background:none}
.list li + li{border-top:1px solid var(--line)}
.list li:hover + li,.list li:hover{border-top-color:transparent}
.chk{appearance:none;width:22px;height:22px;border:2px solid var(--line);border-radius:7px;margin:0;display:grid;place-content:center;background:var(--surface);cursor:pointer}
.chk:checked{background:var(--in);border-color:var(--in)}
.chk:checked::after{content:"";width:10px;height:6px;border:2.5px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.dd{text-align:center;line-height:1.05}
.dd b{display:block;font-family:var(--display);font-size:19px;font-weight:650;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.dd span{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);font-weight:700}
.what b{display:block;font-weight:700;overflow-wrap:anywhere}
.list li.done .what b{text-decoration:line-through;color:var(--ink-3)}
.meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;color:var(--ink-3);font-weight:600;margin-top:1px}
.tag{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:1px 7px;border-radius:6px}
.tag.in{background:color-mix(in srgb,var(--in) 15%,transparent);color:var(--in-t)}
.tag.out{background:color-mix(in srgb,var(--bill) 14%,transparent);color:var(--bill-t)}
.tag.exp{background:color-mix(in srgb,var(--exp) 17%,transparent);color:var(--exp-t)}
.money{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.money b{display:block;font-weight:800}
.money b.in{color:var(--in-t)}
.money span{font-size:11.5px;color:var(--ink-3);font-weight:600}
.money span.neg{color:var(--bill-t)}
.empty{padding:34px 10px;text-align:center;color:var(--ink-3);display:flex;flex-direction:column;align-items:center;gap:12px}
.soft-btn{border:0;border-radius:12px;padding:9px 16px;background:var(--surface-2);font-weight:700;color:var(--ink)}
.soft-btn:hover{background:var(--line)}

/* fab */
.fab{position:fixed;right:max(20px,calc((100vw - 1080px)/2 + 20px));bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;align-items:center;gap:8px;border:0;border-radius:18px;padding:15px 22px 15px 18px;background:var(--ink);color:var(--bg);font-weight:800;font-size:15px;box-shadow:0 12px 30px rgba(13,19,33,.3);transition:transform .15s}
.fab:hover{transform:translateY(-2px)}
.fab svg{width:20px;height:20px}

/* sheet */
.scrim{position:fixed;inset:0;z-index:70;background:rgba(6,9,16,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:grid;place-items:center;padding:16px}
.sheet{width:100%;max-width:440px;max-height:calc(100% - 16px);overflow:auto;background:var(--surface);border-radius:24px;padding:22px;box-shadow:0 30px 80px rgba(0,0,0,.35);animation:rise .22s ease}
@keyframes rise{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
.sheet-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.sheet-h h2{font-family:var(--display);font-weight:650;font-size:19px;margin:0;letter-spacing:-.03em}
.x{border:0;background:var(--surface-2);width:34px;height:34px;border-radius:11px;font-size:18px;color:var(--ink-2)}
form{display:flex;flex-direction:column;gap:14px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);background:var(--surface-2);border-radius:14px;padding:4px;gap:4px}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{text-align:center;padding:9px 6px;border-radius:11px;font-weight:700;font-size:14px;color:var(--ink-3);cursor:pointer;transition:background .15s,color .15s}
.seg input:checked + label{background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.seg #kindOut:checked + label{color:var(--bill-t)}
.seg #kindExp:checked + label{color:var(--exp-t)}
.seg #kindIn:checked + label{color:var(--in-t)}
.seg input:focus-visible + label{outline:2px solid var(--accent)}
.field{display:flex;flex-direction:column;gap:6px}
.field > span{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.field input,.field select{width:100%;padding:12px 13px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);font-weight:600}
.field input:focus,.field select:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.amtrow{display:grid;grid-template-columns:1fr 104px;gap:8px}
.amtrow input{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.conv{font-size:12.5px;color:var(--ink-3);font-weight:600;margin:-6px 0 0;min-height:18px}
.form-err{margin:0;font-size:13px;font-weight:600;color:var(--bill-t)}
.acts{display:flex;gap:8px;margin-top:4px}
.primary{flex:1;border:0;border-radius:14px;padding:14px;background:var(--ink);color:var(--bg);font-weight:800;font-size:15px}
.primary:hover{opacity:.9}
.danger{border:1.5px solid color-mix(in srgb,var(--bill) 40%,transparent);background:none;color:var(--bill-t);border-radius:14px;padding:14px 16px;font-weight:700}

.toast{position:fixed;left:50%;top:calc(16px + env(safe-area-inset-top,0px));transform:translate(-50%,-8px);z-index:80;background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:14px;font-size:14px;font-weight:700;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:820px){
  .overview,.board{grid-template-columns:1fr}
  .stats{grid-template-rows:none;grid-template-columns:repeat(3,minmax(0,1fr))}
  .stat{grid-template-columns:1fr;padding:12px}
  .stat .dot{grid-row:auto;width:28px;height:28px;font-size:14px;border-radius:9px}
  .stat .val{text-align:left;font-size:16px}
  .stat .note{grid-column:auto}
}
@media (max-width:600px){
  .bal{grid-template-columns:1fr;padding:22px}
  .ring{width:112px;height:112px;position:absolute;right:18px;top:18px}
  .bal .amt{margin-top:14px;padding-right:0}
  .bal .lbl,.bal .sub{padding-right:122px}
  .dow,.cal{gap:3px}
  .cell{min-height:64px;padding:3px;border-radius:9px}
  .chip{padding:2px 3px;font-size:10px;justify-content:center;border-radius:5px}
  .chip .cl{display:none}
  .eod{font-size:9px;text-align:center}
  .card{padding:14px;border-radius:18px}
  .stats{grid-template-columns:1fr}
  .stat{grid-template-columns:auto 1fr auto}
  .stat .dot{grid-row:span 2}
  .stat .val{text-align:right}
  .stat .note{grid-column:2 / 4}
  .scrim{place-items:end center;padding:0}
  .sheet{max-width:none;border-radius:24px 24px 0 0;padding-bottom:calc(22px + env(safe-area-inset-bottom,0px));max-height:92%}
  .fab{padding:16px}
  .fab span{display:none}
}
@media (max-width:420px){
  .list li{grid-template-columns:auto 36px minmax(0,1fr)}
  .list li .money{grid-column:3;text-align:left;display:flex;gap:10px;align-items:baseline}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .chip.ghost{transform:translate(-50%,-60%)}
}
.conflict{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;color:var(--ink);background:color-mix(in srgb,var(--exp) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--exp) 35%,transparent)}
.code-in{letter-spacing:.3em;font-variant-numeric:tabular-nums}
.captcha{min-height:0}
.mfa-setup{display:flex;flex-direction:column;gap:10px}
.mfa-qr{width:180px;height:180px;background:#fff;border-radius:12px;padding:8px;align-self:center}
.mfa-secret{font-size:12px;overflow-wrap:anywhere;background:var(--surface-2);padding:1px 6px;border-radius:6px;color:var(--ink)}
#delForm .acts{margin-top:0}

/* ---------- layout polish ---------- */
/* Add: a header button on wider screens; the round floating button stays for thumbs on phones. */
.add-btn{height:40px;border:0;border-radius:12px;background:var(--ink);color:var(--bg);display:inline-flex;align-items:center;gap:7px;padding:0 15px 0 12px;font-weight:800;font-size:13.5px;transition:transform .15s,box-shadow .2s}
.add-btn svg{width:17px;height:17px}
.add-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px color-mix(in srgb,var(--ink) 28%,transparent)}
.add-btn:active{transform:none;box-shadow:none}
@media (min-width:821px){.fab{display:none}}
@media (max-width:820px){.add-btn{display:none}}
@media (min-width:821px) and (max-width:1359px){.logs-btn span{display:none}.logs-btn{width:40px;padding:0;justify-content:center}}

/* Summary cards: how much of each total is already paid, received or spent. */
.stat .bar{grid-column:1 / -1;height:5px;border-radius:99px;background:var(--surface-2);overflow:hidden;margin-top:8px}
.stat .bar i{display:block;height:100%;width:0;border-radius:inherit;transition:width .5s ease}
.stat[data-k="in"] .bar i{background:var(--in)}
.stat[data-k="out"] .bar i{background:var(--bill)}
.stat[data-k="exp"] .bar i{background:var(--exp)}

/* Calendar: amount first, name under it, so a narrow day still says what it is. */
.chip{flex-direction:column;align-items:stretch;justify-content:center;gap:0;padding:3px 6px 4px;transition:filter .15s,transform .15s}
.chip .ca{order:-1;font-weight:800}
.chip .cl{font-size:10.5px;opacity:.8}
.chip:hover{filter:brightness(1.05)}
.cell.past{background:color-mix(in srgb,var(--surface-2) 45%,var(--surface))}
.cell.past .dn{opacity:.65}

/* Day by day: a line between what's already due and what's still coming. */
.list li.today-line{display:flex;align-items:center;gap:10px;padding:8px 6px;cursor:default;border-top:0 !important;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.list li.today-line::before,.list li.today-line::after{content:"";height:1.5px;flex:1;background:color-mix(in srgb,var(--accent) 45%,transparent)}
.list li.today-line::before{flex:0 0 14px}
.list li.today-line:hover{background:none}
.list li.today-line + li{border-top-color:transparent}
.chk{width:24px;height:24px}

/* Press feedback on buttons. */
.primary,.soft-btn,.logs-btn,.theme,.danger{transition:transform .12s,opacity .15s,background .15s,color .15s}
.primary:active,.soft-btn:active,.logs-btn:active,.danger:active{transform:scale(.97)}

@media (max-width:600px){
  /* Phone header: brand + account + theme, then the month, then rate + export + log. */
  .top{display:grid;grid-template-columns:minmax(0,1fr) 40px 40px 40px;grid-template-areas:"brand brand acct theme" "month month month month" "rate receipt export logs";gap:10px}
  #receiptBtn{grid-area:receipt}
  .brand{grid-area:brand;margin:0}
  #acctBtn{grid-area:acct} #themeBtn{grid-area:theme}
  .month{grid-area:month;justify-content:space-between}
  .month button{width:44px;height:38px}
  .rate{grid-area:rate;min-width:0}
  .rate input{flex:1;min-width:0}
  #exportOpen{grid-area:export} #logBtn{grid-area:logs}
  .chip{align-items:center;padding:2px 3px}
}
.list li.today-line span{flex:none}
.list li.today-line::after{min-width:24px}
/* Paid items stay readable in the calendar: faded, with only the name struck through. */
.chip.done{opacity:.62;text-decoration:none}
.chip.done .cl{text-decoration:line-through}
.chip .ca{white-space:nowrap}
@media (max-width:600px){.chip{overflow:hidden}.chip .ca{letter-spacing:-.02em}}

/* ---------- type: Geist Mono for small labels and running balances ---------- */
.bal .lbl,.day-sum span,.log-day,.ring .mid span,.dd span,.log-time,.money span,.eod,.chip .ca{font-family:var(--mono)}
.bal .lbl,.day-sum span,.log-day,.ring .mid span,.dd span{letter-spacing:.06em;font-weight:600}
.money span,.eod,.log-time{letter-spacing:-.01em;font-weight:500}
.chip .ca{letter-spacing:-.03em;font-weight:600}
.stat .note{font-size:12.5px}
.money b,.di-amt,.day-sum b,.stat .val{letter-spacing:-.03em}
.primary,.fab,.add-btn{letter-spacing:-.01em}

/* ---------- top bar: full width, frosted, stays put on wider screens ---------- */
body.locked .topbar{display:none}
.topbar{position:sticky;top:0;z-index:50;margin:0 -16px;padding:14px 16px;background:color-mix(in srgb,var(--bg) 80%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.topbar.scrolled{border-bottom-color:var(--line);box-shadow:0 10px 30px -24px rgba(13,19,33,.5)}
.top{max-width:1080px;margin:0 auto}
.wrap{padding-block:6px 110px}
@media (max-width:600px){.topbar{position:static;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:16px 16px 4px;border:0;box-shadow:none}}

/* ---------- balance card ---------- */
.per-day{margin:8px 0 0;font-size:13.5px;color:var(--card-ink-2);text-wrap:pretty}
.per-day b{color:var(--card-in);font-weight:700;letter-spacing:-.02em}

/* ---------- calendar and list details ---------- */
.cell.today{border-color:color-mix(in srgb,var(--ink) 38%,transparent)}
@keyframes pop{0%{transform:scale(.8)}55%{transform:scale(1.14)}100%{transform:scale(1)}}
.chk.pop{animation:pop .32s cubic-bezier(.3,1.5,.5,1)}
@keyframes fade{from{opacity:0}}
.scrim{animation:fade .18s ease}

/* ---------- sign-in: brand panel with a preview next to the form on wider screens ---------- */
.auth-shell{width:100%;max-width:400px;display:grid;gap:22px}
.auth-pitch{display:none}
.pitch-h{font-family:var(--display);font-weight:700;font-size:36px;line-height:1.06;letter-spacing:-.05em;margin:0;text-wrap:balance}
.pitch-sub{margin:0;color:var(--card-ink-2);font-size:15px;line-height:1.55;max-width:44ch}
.pitch-card{margin-top:6px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:18px 18px 6px;box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 20px 40px -20px rgba(0,0,0,.5)}
.pitch-lbl{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--card-ink-2);font-weight:600}
.pitch-amt{margin:6px 0 12px;font-family:var(--display);font-weight:700;font-size:42px;letter-spacing:-.04em;line-height:1}
.pitch-rows{list-style:none;margin:0;padding:0}
.pitch-rows li{display:grid;grid-template-columns:24px minmax(0,1fr) auto 64px;gap:10px;align-items:center;padding:10px 0;border-top:1px solid rgba(255,255,255,.07);font-size:13.5px}
.pd{font-family:var(--mono);color:var(--card-ink-2);font-size:12px}
.pn{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pa{font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;text-align:right}
.pa.in{color:var(--card-in)}
.pt{justify-self:end;font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px;background:rgba(255,255,255,.07);color:var(--card-ink-2)}
.pt.paid{background:color-mix(in srgb,var(--card-in) 18%,transparent);color:var(--card-in)}
.pitch-points{list-style:none;margin:auto 0 0;padding:6px 0 0;display:grid;gap:9px;font-size:13.5px;color:var(--card-ink-2)}
.pitch-points li{display:flex;gap:10px;align-items:center}
.pitch-points li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--card-in);flex:none}
@media (min-width:900px){
  .auth-shell{max-width:980px;grid-template-columns:1.08fr 1fr;align-items:stretch;gap:20px}
  .auth-pitch{display:flex;flex-direction:column;gap:16px;background:var(--card);color:var(--card-ink);border-radius:26px;padding:34px;position:relative;overflow:hidden;isolation:isolate}
  .auth-pitch::before{content:"";position:absolute;inset:-38% -32% auto auto;width:440px;height:440px;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 55%,transparent),transparent 65%);opacity:.5;z-index:-1}
  .auth-pitch .auth-brand{margin:0 0 4px}
  .auth-pitch .auth-brand i{background:var(--card-ink);color:var(--card)}
  .auth-card .auth-brand{display:none}
  .auth-card{max-width:none;display:flex;flex-direction:column;justify-content:center;padding:40px 38px;border-radius:26px}
}


/* ---------- tabs: Ledger / Insights ---------- */
.brand{margin:0}
.tabs{display:flex;gap:3px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:3px;margin-right:auto}
.tab{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px 0 11px;border:0;border-radius:9px;background:none;color:var(--ink-2);font-weight:600;font-size:13.5px;transition:background .15s,color .15s}
.tab svg{width:16px;height:16px}
.tab:hover{color:var(--ink);background:var(--surface-2)}
.tab[aria-selected="true"]{background:var(--ink);color:var(--bg)}
@media (min-width:601px) and (max-width:1199px){
  /* Logo and tabs on the first row, the controls on the next. */
  .top::after{content:"";flex-basis:100%;order:2}
  .brand,.tabs{order:1}
  .top > :not(.brand):not(.tabs){order:3}
  .tabs{margin-right:0}
  .month{margin-right:auto}
}
@media (max-width:600px){
  /* Phones: the tabs become a bottom bar within thumb reach; the Add button sits above it. */
  .tabs{position:fixed;left:0;right:0;bottom:0;z-index:45;margin:0;border:0;border-top:1px solid var(--line);border-radius:0;padding:6px 16px calc(6px + env(safe-area-inset-bottom,0px));gap:8px;background:color-mix(in srgb,var(--surface) 90%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)}
  .tab{flex:1;flex-direction:column;justify-content:center;gap:3px;height:52px;padding:0;font-size:11.5px;border-radius:12px}
  .tab svg{width:20px;height:20px}
  .tab[aria-selected="true"]{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
  .fab{bottom:calc(22px + 64px + env(safe-area-inset-bottom,0px))}
  .wrap{padding-bottom:180px}
  body.locked .tabs{display:none}
}

/* ---------- insights ---------- */
.view{display:flex;flex-direction:column;gap:18px}
.ins-head h2{font-family:var(--display);font-weight:650;font-size:24px;letter-spacing:-.035em;margin:0}
.ins-head .hint{margin:4px 0 0}
.ins-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:18px}
.verdict{--v:var(--st-good);position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:center;padding:24px}
.verdict[data-status="easy"]{--v:var(--st-warn)}
.verdict[data-status="hold"]{--v:var(--st-crit)}
.verdict[data-status="past"],.verdict[data-status="empty"]{--v:var(--accent)}
.verdict::before{content:"";position:absolute;right:-90px;bottom:-140px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--v) 20%,transparent),transparent 66%);z-index:-1}
.v-label{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin:0;padding:5px 12px 5px 6px;border-radius:99px;background:color-mix(in srgb,var(--v) 13%,var(--surface));font-weight:700;font-size:13.5px}
.v-icon{width:22px;height:22px;border-radius:50%;background:var(--v);color:#fff;display:grid;place-content:center}
.v-icon svg{width:13px;height:13px}
.verdict[data-status="easy"] .v-icon{color:#241800}
.v-amt{font-family:var(--display);font-weight:700;font-size:clamp(42px,6vw,58px);line-height:1;letter-spacing:-.045em;margin:18px 0 6px;overflow-wrap:anywhere}
.v-cap{margin:0;color:var(--ink-2);font-weight:600;font-size:14px}
.v-sub{margin:14px 0 0;font-size:14.5px;line-height:1.55;text-wrap:pretty}
.v-note{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--ink-2);padding:10px 12px;border-radius:12px;background:var(--surface-2)}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px;box-shadow:var(--shadow);min-width:0;display:flex;flex-direction:column}
.k-l{margin:0;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.k-v{margin:8px 0 6px;font-family:var(--display);font-weight:700;font-size:23px;line-height:1.1;letter-spacing:-.035em;overflow-wrap:anywhere}
.k-v.neg{color:var(--bill-t)}
.k-s{margin:auto 0 0;font-size:12px;line-height:1.4;color:var(--ink-3)}
.delta{font-weight:600;color:var(--ink-2)}
.delta.up{color:var(--in-t)}
.delta.down{color:var(--bill-t)}
.ins-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:980px){.ins-top{grid-template-columns:1fr}}
@media (max-width:820px){.ins-grid{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- charts (SVG; every colour comes from the tokens above) ---------- */
.chart{position:relative;border-radius:12px;outline:none;touch-action:pan-y}
.chart:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.chart svg{display:block;max-width:100%;height:auto;overflow:visible}
.chart .grid{stroke:var(--c-grid);stroke-width:1}
.chart .zero{stroke:var(--c-axis);stroke-width:1}
.chart .ax{fill:var(--ink-3);font:500 10.5px var(--mono);letter-spacing:-.02em}
.chart .ax.cur{fill:var(--ink);font-weight:700}
.chart .bal-line{fill:none;stroke:var(--c-line);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .bal-pos{fill:var(--c-line);opacity:.1}
.chart .bal-neg{fill:var(--st-crit);opacity:.13}
.chart .today{stroke:var(--ink-3);stroke-width:1}
.chart .today-t{fill:var(--ink-2);font:600 10.5px var(--body)}
.chart .dot-in{fill:var(--c-in);stroke:var(--surface);stroke-width:2}
.chart .lbl{fill:var(--ink);font:650 12px var(--body);letter-spacing:-.02em;paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}
.chart .xhair{stroke:var(--ink-2);stroke-width:1}
.chart .xdot{fill:var(--c-line);stroke:var(--surface);stroke-width:2}
.chart .hit,.chart .hitg{fill:transparent}
.chart .hit{cursor:crosshair}
.col-in{fill:var(--c-in)} .col-bill{fill:var(--c-bill)} .col-exp{fill:var(--c-exp)}
.grp path{transition:opacity .15s}
.chart.has-on .grp:not(.on) path{opacity:.5}
.grp.on path{opacity:1}
.viz-tip{position:absolute;z-index:5;pointer-events:none;min-width:180px;max-width:250px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:10px 12px;box-shadow:0 14px 34px rgba(0,0,0,.16);font-size:12.5px;line-height:1.4}
.viz-tip .v{display:block;font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:-.03em}
.viz-tip .tl{display:block;color:var(--ink-2)}
.viz-tip .tl-h{color:var(--ink);font-weight:700;font-size:13px}
.viz-tip ul{list-style:none;margin:8px 0 0;padding:8px 0 0;border-top:1px solid var(--line);display:grid;gap:4px}
.viz-tip li{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:6px;align-items:center}
.viz-tip li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.viz-tip li b{font-weight:650;font-variant-numeric:tabular-nums}
.viz-tip .k{width:12px;height:2px;border-radius:2px;background:var(--ink-3)}
.viz-tip .k.in{background:var(--c-in)} .viz-tip .k.out{background:var(--c-bill)} .viz-tip .k.exp{background:var(--c-exp)}
.viz-tip .tf{display:block;margin-top:8px;font-weight:650;color:var(--ink-2)}
.viz-tip .tf.good{color:var(--in-t)} .viz-tip .tf.hold{color:var(--bill-t)}

/* When to spend: a status strip on the chart's day scale, then the windows in words (icon + label). */
.windows svg{display:block;max-width:100%;height:auto;margin-top:10px}
.win.good{fill:var(--st-good)} .win.easy{fill:var(--st-warn)} .win.hold{fill:var(--st-crit)}
.win.past{opacity:.3}
.win-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.win-chip{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:8px 12px 8px 8px;border-radius:12px;background:var(--surface-2);font-size:13px}
.win-chip b{font-weight:700}
.win-chip .muted{color:var(--ink-2)}
.win-chip .wi{width:20px;height:20px;border-radius:50%;display:grid;place-content:center;color:#fff}
.win-chip .wi svg{width:12px;height:12px}
.win-chip.good .wi{background:var(--st-good)} .win-chip.easy .wi{background:var(--st-warn);color:#241800} .win-chip.hold .wi{background:var(--st-crit)}

/* Spending plan */
.plan-styles{display:flex;gap:3px;background:var(--surface-2);border-radius:12px;padding:3px}
.plan-styles button{border:0;background:none;border-radius:9px;padding:6px 12px;font-weight:600;font-size:13px;color:var(--ink-2);white-space:nowrap}
.plan-styles button:hover{color:var(--ink)}
.plan-styles button[aria-checked="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.plan-bar svg{display:block;max-width:100%;height:auto}
.seg-save{fill:var(--c-save)} .seg-ess{fill:var(--c-ess)} .seg-fun{fill:var(--c-fun)}
.legend-chart{margin-top:10px;flex-wrap:wrap}
.insights .legend span::before{width:10px;height:10px;border-radius:3px;vertical-align:-1px}
.insights .legend .l-in::before{background:var(--c-in)} .insights .legend .l-bill::before{background:var(--c-bill)} .insights .legend .l-exp::before{background:var(--c-exp)}
.insights .legend .l-save::before{background:var(--c-save)} .insights .legend .l-ess::before{background:var(--c-ess)} .insights .legend .l-fun::before{background:var(--c-fun)}
.plan-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.pc{border:1px solid var(--line);border-radius:16px;padding:14px 16px;min-width:0}
.pc-h{display:flex;align-items:center;gap:8px;margin:0;font-weight:650;font-size:13.5px}
.pc-h i{width:10px;height:10px;border-radius:3px;flex:none}
.pc-h span{margin-left:auto;font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--ink-3)}
.pc-save .pc-h i{background:var(--c-save)} .pc-ess .pc-h i{background:var(--c-ess)} .pc-fun .pc-h i{background:var(--c-fun)}
.pc-v{margin:10px 0 4px;font-family:var(--display);font-weight:700;font-size:26px;line-height:1.1;letter-spacing:-.035em}
.pc-s{margin:0;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.pc-x{margin:6px 0 0;font-size:12.5px;line-height:1.45;color:var(--ink-3)}
.plan-note{margin:14px 0 0;font-size:13px;line-height:1.5;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--st-warn) 14%,var(--surface));color:var(--ink)}
.coffee{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;font-weight:600;color:var(--ink-2)}
.coffee-in{display:inline-flex;align-items:center;gap:4px;background:var(--surface-2);border-radius:10px;padding:3px 3px 3px 10px;color:var(--ink)}
.coffee input{width:76px;border:0;border-radius:8px;background:var(--surface);padding:6px 8px;text-align:right;font-weight:700}
@media (max-width:700px){.plan-cards{grid-template-columns:1fr}}
@media (max-width:600px){.card-h .plan-styles{width:100%}.plan-styles button{flex:1;padding:7px 4px}}

/* Where the money goes */
.bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.bar-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) 84px;gap:12px;align-items:center}
.bar-name{min-width:0}
.bar-name b{display:block;font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-name small{display:block;font-size:11.5px;color:var(--ink-3)}
.bar-track{display:block;height:10px}
.bar-fill{display:block;height:10px;width:0;min-width:3px;border-radius:0 4px 4px 0;background:var(--ink-3);transition:width .4s ease}
.bar-fill.out{background:var(--c-bill)} .bar-fill.exp{background:var(--c-exp)} .bar-fill.in{background:var(--c-in)} .bar-fill.other{background:var(--c-axis)}
.bar-val{text-align:right;font-size:13px;font-weight:650;white-space:nowrap;font-variant-numeric:tabular-nums}
.bar-val small{display:block;font-family:var(--mono);font-weight:500;font-size:11px;color:var(--ink-3)}
.bars-h{margin:20px 0 10px;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.bars-empty{font-size:13px;color:var(--ink-3)}

/* Table views */
.chart-table{margin-top:14px;max-height:340px;overflow:auto;border:1px solid var(--line);border-radius:12px}
.chart-table table{width:100%;border-collapse:collapse;font-size:12.5px}
.chart-table th,.chart-table td{padding:7px 12px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap;font-variant-numeric:tabular-nums}
.chart-table th:first-child,.chart-table td:first-child{text-align:left}
.chart-table thead th{position:sticky;top:0;background:var(--surface-2);color:var(--ink-2);font-weight:700}
.chart-table tr.cur td{font-weight:700;background:color-mix(in srgb,var(--accent) 7%,transparent)}
.chart-table tbody tr:last-child td{border-bottom:0}

/* At a glance */
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;margin:0}
.facts div{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.facts dt{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.facts dd{margin:0;font-size:13.5px;line-height:1.45}
@media (max-width:820px){.facts{grid-template-columns:1fr}}
@media (max-width:420px){.facts div{grid-template-columns:1fr;gap:2px}}
.ins-col{display:flex;flex-direction:column;gap:18px;min-width:0}
.ins-col .facts{grid-template-columns:1fr}
.win-mask{fill:var(--surface);opacity:.62}
@media (max-width:600px){.bar-row{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) 76px;gap:10px}}

/* Summary cards open a list of their items. */
button.stat{width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer;transition:transform .15s,box-shadow .2s,border-color .15s}
button.stat:hover{transform:translateY(-1px);border-color:var(--ink-3)}
button.stat:active{transform:none}
/* Calendar and "Day by day" share one height on wider screens: the calendar's weeks grow to fill it. */
@media (min-width:821px){
  .board{align-items:stretch}
  .board > .card:first-child{display:flex;flex-direction:column}
  .board .cal{flex:1;grid-auto-rows:minmax(92px,1fr)}
}

/* ---------- receipts ---------- */
.rc-sheet{max-width:600px}
.rc-top{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;margin-bottom:14px}
.rc-photo{border:1px solid var(--line);border-radius:14px;padding:0;background:var(--surface-2);overflow:hidden;aspect-ratio:3/4;cursor:zoom-in}
.rc-photo img{width:100%;height:100%;object-fit:cover;display:block}
.rc-fields{display:flex;flex-direction:column;gap:10px;min-width:0}
.rc-status{margin:0;font-size:13px;font-weight:600;color:var(--ink-2);min-height:18px}
.rc-status[data-tone="busy"]{color:var(--accent)}
.rc-status[data-tone="bad"]{color:var(--bill-t)}
.rc-items-h{display:flex;align-items:baseline;justify-content:space-between;margin:4px 0 8px}
.rc-sum{font-size:12.5px;color:var(--ink-3);font-weight:600}
.rc-sum.off{color:var(--bill-t)}
.rc-items{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:6px;max-height:300px;overflow:auto}
.rc-items li{display:grid;grid-template-columns:minmax(0,1fr) 52px 104px 32px;gap:6px}
.rc-items input{width:100%;padding:9px 10px;border:1.5px solid var(--line);border-radius:10px;background:var(--surface);font-weight:600;font-size:13.5px}
.rc-items input:focus{border-color:var(--accent);outline:none}
.rc-items .tnum{text-align:right}
.rc-items button{border:0;border-radius:9px;background:var(--surface-2);color:var(--ink-2);font-size:16px}
.rc-items .rc-empty{display:block;font-size:13px;color:var(--ink-3);padding:6px 0}
@media (max-width:520px){.rc-top{grid-template-columns:96px minmax(0,1fr)}.rc-items li{grid-template-columns:minmax(0,1fr) 40px 88px 30px}}
.rc-ins{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 28px}
.rc-ins .bars-h{margin-top:4px}
@media (max-width:820px){.rc-ins{grid-template-columns:1fr}}
.rc-changes,.rc-recent{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.rc-changes li,.rc-recent li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px}
.rc-changes li:first-child,.rc-recent li:first-child{border-top:0}
.rc-changes b,.rc-recent b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-changes small,.rc-recent small{display:block;font-size:11.5px;color:var(--ink-3)}
.rc-chg{text-align:right;font-weight:650;white-space:nowrap;font-variant-numeric:tabular-nums}
.rc-chg small{font-family:var(--mono)}
.rc-chg.up{color:var(--bill-t)} .rc-chg.down{color:var(--in-t)}
.rc-recent button{border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:5px 12px;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.rc-recent button:hover{color:var(--ink);background:var(--surface-2)}
.rc-items li.check input[data-f="name"]{border-color:var(--st-warn);background:color-mix(in srgb,var(--st-warn) 10%,var(--surface))}
.rc-items li.learned input[data-f="name"]{border-color:color-mix(in srgb,var(--in) 55%,var(--line))}