/* Clearspend — layout: fixed left rail (bottom bar on mobile) + scrolling main.
   Views stack summary tiles → charts → lists. Everything is tokenised so the
   three theme states (system/light/dark) stay in sync. */
:root{
  --bg:#f3f6f3; --surface:#ffffff; --surface-2:#eef2ee; --line:#dde5df;
  --fg:#10231c; --muted:#5d7066; --faint:#8a9a90;
  --brand:#0e3b2e; --brand-2:#145c43; --accent:#19c37d; --accent-soft:#d8f3e6;
  --pos:#17a673; --neg:#e4572e; --warn:#e3a008; --info:#3b82c4;
  --radius:16px; --radius-sm:11px; --shadow:0 2px 4px rgba(16,35,28,.05),0 10px 26px rgba(16,35,28,.06);
  --c1:#19c37d; --c2:#3b82c4; --c3:#e3a008; --c4:#e4572e; --c5:#8b5cf6; --c6:#0ea5a5; --c7:#ec4899;
  --d-display:"Sora",system-ui,sans-serif; --d-body:"IBM Plex Sans",system-ui,sans-serif; --d-mono:"IBM Plex Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0b140f; --surface:#121e18; --surface-2:#182821; --line:#243a30;
  --fg:#e8f1ec; --muted:#9fb3a8; --faint:#6f857a;
  --brand:#0f4634; --brand-2:#1c6e51; --accent:#2fe294; --accent-soft:#113327;
  --pos:#2fe294; --neg:#ff7a5c; --warn:#f0bc4a; --info:#5fa8e0;
  --shadow:0 2px 4px rgba(0,0,0,.3),0 12px 30px rgba(0,0,0,.4);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0b140f; --surface:#121e18; --surface-2:#182821; --line:#243a30;
  --fg:#e8f1ec; --muted:#9fb3a8; --faint:#6f857a;
  --brand:#0f4634; --brand-2:#1c6e51; --accent:#2fe294; --accent-soft:#113327;
  --pos:#2fe294; --neg:#ff7a5c; --warn:#f0bc4a; --info:#5fa8e0;
  --shadow:0 2px 4px rgba(0,0,0,.3),0 12px 30px rgba(0,0,0,.4);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--d-body);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
.mono{font-family:var(--d-mono);font-variant-numeric:tabular-nums}
h1,h2,h3,h4{font-family:var(--d-display);margin:0;line-height:1.15;text-wrap:balance}
button{font-family:inherit;cursor:pointer}
a{color:inherit}
[hidden]{display:none!important}

/* shell */
.app{display:grid;grid-template-columns:232px 1fr;min-height:100%}
.rail{position:sticky;top:env(safe-area-inset-top,0px);align-self:start;height:100vh;background:var(--brand);color:#eafaf2;padding:22px 16px;display:flex;flex-direction:column;gap:6px}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 18px}
.brand .logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--accent),#0bd37f);display:grid;place-items:center;flex:none;box-shadow:0 4px 12px rgba(25,195,125,.35)}
.brand .logo svg{width:20px;height:20px}
.brand b{font-family:var(--d-display);font-weight:800;font-size:18px;letter-spacing:-.3px;color:#fff}
.nav{display:flex;flex-direction:column;gap:3px;margin-top:4px}
.nav button{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border:0;border-radius:11px;background:transparent;color:#bfe3d2;font-size:14px;font-weight:600;text-align:left;transition:background .15s,color .15s}
.nav button svg{width:19px;height:19px;flex:none;opacity:.9}
.nav button:hover{background:rgba(255,255,255,.07);color:#fff}
.nav button.on{background:rgba(25,195,125,.18);color:#fff}
.nav button.on svg{color:var(--accent);opacity:1}
.rail-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:12px}
.railcard{background:rgba(255,255,255,.07);border-radius:12px;padding:12px}
.railcard .k{font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:#9fd3bd}
.railcard .v{font-family:var(--d-mono);font-weight:600;font-size:20px;color:#fff;margin-top:2px}
.acct{display:flex;align-items:center;gap:10px;width:100%;border:0;background:rgba(255,255,255,.06);border-radius:12px;padding:10px;text-align:left;color:#eafaf2}
.acct:hover{background:rgba(255,255,255,.12)}
.acct .circle{width:30px;height:30px;border-radius:50%;background:var(--accent);color:#06281a;display:grid;place-items:center;font-weight:800;flex:none}
.acct .who{min-width:0;flex:1;overflow:hidden}
.acct .who .nm{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct .who .em{font-size:11px;color:#9fd3bd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:12px;padding:14px 24px}
.topbar h1{font-size:21px;font-weight:700;letter-spacing:-.3px}
.topbar .sub{color:var(--muted);font-size:12.5px;margin-top:1px}
.spacer{flex:1}
.monthsel{display:flex;align-items:center;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px}
.monthsel button{border:0;background:transparent;color:var(--muted);width:30px;height:30px;border-radius:999px;font-size:16px;display:grid;place-items:center}
.monthsel button:hover{background:var(--surface-2);color:var(--fg)}
.monthsel .lbl{font-weight:700;font-size:13px;min-width:92px;text-align:center}
.iconbtn{border:1px solid var(--line);background:var(--surface);color:var(--fg);width:38px;height:38px;border-radius:11px;display:grid;place-items:center}
.iconbtn:hover{background:var(--surface-2)}
.iconbtn svg{width:18px;height:18px}
.btn{border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:11px;padding:9px 14px;font-weight:600;font-size:13.5px;display:inline-flex;align-items:center;gap:7px}
.btn:hover{background:var(--surface-2)}
.btn svg{width:16px;height:16px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#06281a}
.btn.primary:hover{filter:brightness(1.04)}
.btn.ghost{background:transparent}
.btn.sm{padding:6px 10px;font-size:12.5px;border-radius:9px}
.btn.danger{color:var(--neg);border-color:color-mix(in srgb,var(--neg) 40%,var(--line))}
.btn.block{width:100%;justify-content:center}

.view{padding:22px 24px 40px;display:flex;flex-direction:column;gap:18px;max-width:1180px;width:100%}
.view[hidden]{display:none!important}

/* cards & grids */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card.pad{padding:18px}
.grid{display:grid;gap:16px}
.tiles{grid-template-columns:repeat(4,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-2{grid-template-columns:1fr 1fr}
.span2{grid-column:span 2}
.sec-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.sec-head h3{font-size:16px;font-weight:700}
.sec-head .spacer{flex:1}
.sec-head .mini{color:var(--muted);font-size:12.5px}

/* summary tile */
.tile{padding:16px 16px 15px}
.tile .lab{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.tile .lab .dot{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--surface-2)}
.tile .lab .dot svg{width:15px;height:15px}
.tile .big{font-family:var(--d-mono);font-weight:600;font-size:27px;letter-spacing:-.5px;margin-top:11px}
.tile .delta{font-size:12.5px;font-weight:600;margin-top:4px;display:flex;align-items:center;gap:5px}
.up{color:var(--pos)} .down{color:var(--neg)}

/* progress */
.bar{height:9px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:999px;background:var(--accent);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.bar.over>i{background:var(--neg)}

/* lists */
.list{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.av{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;font-size:18px;background:var(--surface-2)}
.row .grow{flex:1;min-width:0}
.row .t{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .s{color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.amt{font-family:var(--d-mono);font-weight:600;white-space:nowrap}
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:700;background:var(--surface-2);color:var(--muted)}
.chip.g{background:var(--accent-soft);color:var(--pos)}
.chip.a{background:color-mix(in srgb,var(--warn) 20%,transparent);color:var(--warn)}
.chip.r{background:color-mix(in srgb,var(--neg) 16%,transparent);color:var(--neg)}
.rowbtns{display:flex;gap:6px;opacity:0;transition:opacity .15s}
.row:hover .rowbtns{opacity:1}
.x{border:0;background:var(--surface-2);color:var(--muted);width:28px;height:28px;border-radius:8px;display:grid;place-items:center}
.x:hover{background:var(--line);color:var(--fg)} .x svg{width:14px;height:14px}

/* chart box */
.chart-wrap{position:relative;height:230px}
.chart-wrap.sm{height:190px}
.legend{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:12px}
.legend span{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)}
.legend i{width:10px;height:10px;border-radius:3px;flex:none}

/* filter bar */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:11.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
input,select,textarea{font-family:inherit;font-size:14px;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:1px;border-color:var(--accent)}
.search{position:relative;min-width:200px;flex:1}
.search input{padding-left:36px}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--faint)}

/* table-ish transactions */
.tx .row .cat{font-size:11.5px;color:var(--muted)}

/* goal card */
.goal{padding:16px;display:flex;flex-direction:column;gap:12px}
.goal .top{display:flex;align-items:center;gap:12px}
.goal .ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:21px;background:var(--surface-2);flex:none}
.goal .nums{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted)}
.goal .nums b{color:var(--fg);font-family:var(--d-mono)}

/* modal */
.scrim{position:fixed;inset:0;background:rgba(6,16,12,.5);backdrop-filter:blur(3px);display:grid;place-items:center;padding:16px;z-index:60}
.scrim[hidden]{display:none!important}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.35);width:100%;max-width:440px;max-height:90vh;overflow:auto}
.modal .mh{display:flex;align-items:center;gap:10px;padding:18px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface)}
.modal .mh h3{font-size:17px;font-weight:700}
.modal .mb{padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.modal .mf{padding:14px 20px 18px;display:flex;gap:10px;justify-content:flex-end;border-top:1px solid var(--line)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.seg{display:flex;gap:6px;background:var(--surface-2);padding:4px;border-radius:12px}
.seg button{flex:1;border:0;background:transparent;color:var(--muted);padding:9px;border-radius:9px;font-weight:700;font-size:13px}
.seg button.on{background:var(--surface);color:var(--fg);box-shadow:var(--shadow)}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(16px);background:var(--brand);color:#eafaf2;padding:11px 18px;border-radius:12px;font-weight:600;font-size:13.5px;box-shadow:0 12px 30px rgba(0,0,0,.3);opacity:0;transition:.25s;z-index:80;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.empty{text-align:center;color:var(--muted);padding:34px 16px}
.empty .big{font-size:30px}
.sample-note{font-size:11.5px;color:var(--faint);display:flex;align-items:center;gap:6px}

/* ---- auth screen ---- */
.auth{min-height:100%;display:grid;grid-template-columns:1.05fr .95fr}
.auth-hero{background:linear-gradient(150deg,var(--brand),var(--brand-2));color:#eafaf2;padding:48px 52px;display:flex;flex-direction:column;justify-content:center;gap:22px}
.auth-hero .brand b{font-size:22px}
.auth-hero h2{font-size:34px;font-weight:800;letter-spacing:-.6px;color:#fff;max-width:14ch}
.auth-hero p{color:#cfe9db;font-size:15px;max-width:40ch;line-height:1.6}
.auth-hero .pts{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.auth-hero .pts div{display:flex;align-items:center;gap:11px;font-size:14px;color:#e5f5ec}
.auth-hero .pts .tk{width:26px;height:26px;border-radius:8px;background:rgba(25,195,125,.25);display:grid;place-items:center;flex:none}
.auth-hero .pts .tk svg{width:15px;height:15px;color:var(--accent)}
.auth-panel{display:grid;place-items:center;padding:40px 24px}
.auth-card{width:100%;max-width:380px;display:flex;flex-direction:column;gap:16px}
.auth-card h3{font-size:23px;font-weight:700}
.auth-card .muted{color:var(--muted)}
.auth-form{display:flex;flex-direction:column;gap:13px}
.auth-err{color:var(--neg);font-size:13px;font-weight:600;min-height:0}
.auth-switch{font-size:13.5px;color:var(--muted);text-align:center}
.auth-switch button{border:0;background:transparent;color:var(--accent);font-weight:700;padding:0}
.auth-or{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:12px}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line)}

/* onboarding section labels */
.ob-sec{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--accent);margin:6px 0 -2px}

/* mobile */
.mobbar{display:none}
@media(max-width:980px){.auth{grid-template-columns:1fr}.auth-hero{display:none}}
@media(max-width:860px){
  .app{grid-template-columns:1fr}
  .rail{display:none}
  .tiles{grid-template-columns:1fr 1fr}
  .cols-3,.cols-2{grid-template-columns:1fr}
  .span2{grid-column:auto}
  .topbar{padding:12px 16px}
  .topbar h1{font-size:18px}
  .view{padding:16px 16px 92px}
  .monthsel .lbl{min-width:78px;font-size:12px}
  .mobbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--surface);border-top:1px solid var(--line);
    padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));justify-content:space-around}
  .mobbar button{border:0;background:transparent;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;font-weight:600;padding:5px 8px;border-radius:10px;flex:1}
  .mobbar button svg{width:21px;height:21px}
  .mobbar button.on{color:var(--accent)}
  .rowbtns{opacity:1}
}
@media(max-width:420px){.tiles{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}