/* Polanco Ledger — design system carried over from the approved mockup */
:root{
  --bg:#E9EEEC; --app-bg:#F2F5F4; --card:#FFFFFF; --ink:#17211F; --muted:#5C6B67;
  --line:#DCE3E1; --accent:#0E6B5E; --accent-ink:#FFFFFF; --chip:#EAF0EE;
  --good:#2E7D5B; --warn:#A66A1E; --crit:#B3423A; --warn-bg:#F6EDDD; --good-bg:#E3EFE8;
  --sheet-shadow:0 -12px 40px rgba(23,33,31,.18);
  --frame-shadow:0 24px 60px rgba(23,33,31,.16);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0A100F; --app-bg:#0E1513; --card:#161E1C; --ink:#E6ECEA; --muted:#8FA09B;
    --line:#25302D; --accent:#3FA08F; --accent-ink:#0A100F; --chip:#1E2926;
    --good:#5CB98F; --warn:#D29A4A; --crit:#D97066; --warn-bg:#2A2318; --good-bg:#16281F;
    --sheet-shadow:0 -12px 40px rgba(0,0,0,.5);
    --frame-shadow:0 24px 60px rgba(0,0,0,.5);
  }
}
*{box-sizing:border-box; margin:0}
[hidden]{display:none !important}
html,body{background:var(--bg)}
body{
  font-family:"Schibsted Grotesk",system-ui,sans-serif; color:var(--ink);
  -webkit-font-smoothing:antialiased; min-height:100dvh;
}
.num{font-family:"Spline Sans Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}
.eyebrow{
  font-family:"Spline Sans Mono",ui-monospace,monospace; font-size:.66rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.app{
  position:relative; max-width:410px; margin:0 auto; background:var(--app-bg);
  min-height:100dvh; display:flex; flex-direction:column; overflow:clip;
}
@media (min-width:560px){
  .app{margin:36px auto; min-height:820px; border:1px solid var(--line);
    border-radius:30px; box-shadow:var(--frame-shadow)}
}

/* login */
.login-screen{flex:1; display:flex; align-items:center; justify-content:center; padding:24px}
.login-box{display:flex; flex-direction:column; gap:12px; width:100%; max-width:300px; text-align:center}
.login-box h1{font-size:1.5rem; font-weight:700; letter-spacing:-.01em}
.login-box .dom{font-family:"Spline Sans Mono",ui-monospace,monospace; font-size:.66rem; color:var(--muted); letter-spacing:.1em; margin-bottom:14px}
.login-box > div{display:flex; flex-direction:column; gap:10px}
.login-note{font-size:.82rem; color:var(--muted); line-height:1.5}
.login-input{
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  border-radius:12px; padding:12px 14px; font:inherit; font-size:1rem; text-align:center; outline:none;
}
.login-input:focus{border-color:var(--accent)}
.login-err{font-size:.8rem; color:var(--crit)}

/* headers */
header.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px 12px; gap:10px;
  padding-top:calc(16px + env(safe-area-inset-top));
}
.brand{display:flex; flex-direction:column; gap:2px}
.brand h1{font-size:1.02rem; font-weight:700; letter-spacing:-.01em}
.brand .dom{font-family:"Spline Sans Mono",ui-monospace,monospace; font-size:.62rem; color:var(--muted); letter-spacing:.08em}
.syncbtn{
  display:flex; align-items:center; gap:7px; font:inherit; font-size:.72rem; color:var(--muted);
  background:none; border:1px solid var(--line); border-radius:99px; padding:6px 12px; cursor:pointer;
}
.syncbtn .dot{width:8px; height:8px; border-radius:50%; background:var(--muted)}
.syncbtn.ok .dot{background:var(--good)}
.syncbtn.off .dot{background:var(--warn)}
/* header financial-status indicator (replaces the plain sync chip) */
.statusbtn{
  display:flex; flex-direction:column; align-items:flex-end; gap:1px;
  background:none; border:0; padding:0; cursor:pointer; font:inherit;
}
.status-word{font-size:1.18rem; font-weight:700; letter-spacing:-.01em; line-height:1.1; color:var(--muted)}
.status-sub{font-family:"Spline Sans Mono",ui-monospace,monospace; font-size:.6rem;
  color:var(--muted); letter-spacing:.06em}
.statusbtn.ontrack  .status-word{color:var(--good)}
.statusbtn.atrisk   .status-word{color:var(--warn)}
.statusbtn.offtrack .status-word{color:var(--crit)}
.backbtn{background:none; border:0; color:var(--accent); font:inherit; font-size:.9rem; font-weight:500;
  cursor:pointer; padding:0; display:flex; align-items:center; gap:5px}
.screen-title{font-size:1.02rem; font-weight:700}

main{display:flex; flex-direction:column; gap:12px; padding:0 12px 120px; flex:1}
.card{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:16px}
.screen{display:none; flex-direction:column; gap:12px}
.screen.on{display:flex}
.login-screen.on{display:flex}

/* hero */
.hero{display:flex; flex-direction:column; gap:6px}
.hero .big{font-size:2.55rem; font-weight:600; letter-spacing:-.02em; line-height:1.05}
.hero .sub{font-size:.8rem; color:var(--muted)}
.hero .bar{height:8px; border-radius:99px; background:var(--chip); overflow:hidden; margin-top:8px}
.hero .bar i{display:block; height:100%; width:0; background:var(--accent); border-radius:99px; transition:width .4s ease}

/* month bar */
.monthcard{cursor:pointer; -webkit-tap-highlight-color:transparent}
.monthcard:hover{border-color:var(--accent)}
.mbar-wrap{position:relative; margin-top:6px}
.mbar{height:14px; border-radius:99px; background:var(--chip); overflow:hidden; display:flex}
.mbar .fill{height:100%; width:0; background:var(--accent); transition:width .4s ease}
.mbar .seg{height:100%; width:0; transition:width .4s ease}
.mlegend{display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:10px; font-size:.72rem; color:var(--muted)}
.mlegend .num{color:var(--ink)}
.mlegend .k{display:flex; align-items:center; gap:5px}
.swatch{width:9px; height:9px; border-radius:3px; background:var(--accent); display:inline-block}
.swatch.good{background:var(--good); border-radius:50%}
.est-note{font-size:.7rem; color:var(--muted); margin-top:12px; line-height:1.5}

/* meters */
.meters{display:flex; flex-direction:column; gap:12px; margin-top:10px}
.row{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.meter .row{margin-bottom:5px}
.meter .lbl{font-size:.82rem}
.meter .val{font-size:.78rem; color:var(--muted)}
.meter .bar{height:6px; border-radius:99px; background:var(--chip); overflow:hidden}
.meter .bar i{display:block; height:100%; width:0; background:var(--accent); border-radius:99px; transition:width .4s ease}
.meter .bar i.over{background:var(--warn)}
.total-line{display:flex; justify-content:space-between; border-top:1px dashed var(--line); padding-top:11px}
.total-line .lbl{font-size:.82rem; font-weight:700}
.total-line .val{font-size:.85rem; font-weight:600}

/* list rows */
.sched{display:flex; flex-direction:column; margin-top:6px}
.sched .item{display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line)}
.sched .item:first-child{border-top:0}
.sched .date{font-family:"Spline Sans Mono",ui-monospace,monospace; font-size:.68rem; color:var(--muted); width:52px; flex-shrink:0}
.sched .what{flex:1; font-size:.86rem; min-width:0}
.sched .what small{display:block; font-size:.68rem; color:var(--muted)}
.sched .amt{font-size:.86rem; font-weight:500}
.amt.in{color:var(--good)}
.tag{
  font-family:"Spline Sans Mono",ui-monospace,monospace; font-size:.58rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; padding:2px 6px; border-radius:6px;
  background:var(--chip); color:var(--muted); vertical-align:1px;
}
.tag.watch{background:var(--warn-bg); color:var(--warn)}
.tag.deadline{background:var(--good-bg); color:var(--good)}
.item.done .what{color:var(--muted); text-decoration:line-through}
.date-check{background:none; border:1px solid var(--line); border-radius:8px; color:var(--muted);
  width:26px; height:26px; cursor:pointer; flex-shrink:0; font-size:.8rem; line-height:1}
.item.done .date-check{color:var(--good); border-color:var(--good)}

/* fold */
details.fold{background:var(--card); border:1px solid var(--line); border-radius:18px}
details.fold summary{
  list-style:none; cursor:pointer; padding:14px 16px; display:flex;
  justify-content:space-between; align-items:center; gap:10px;
}
details.fold summary::-webkit-details-marker{display:none}
details.fold summary .lbl{font-size:.84rem; color:var(--muted)}
details.fold summary .chev{color:var(--muted); transition:transform .2s; font-size:.7rem}
details.fold[open] summary .chev{transform:rotate(90deg)}
details.fold .fold-body{padding:0 16px 14px}

/* sync */
.drift-rows{display:flex; flex-direction:column; gap:9px; margin-top:10px}
.drift-rows .lbl{font-size:.84rem; color:var(--muted)}
.drift-rows .val{font-size:.95rem; font-weight:500}
.drift-cell{display:flex; align-items:center; gap:8px}
.pill{font-family:"Spline Sans Mono",ui-monospace,monospace; font-size:.66rem; font-weight:600;
  padding:3px 9px; border-radius:99px; letter-spacing:.05em; background:var(--chip); color:var(--muted)}
.pill.warn{background:var(--warn-bg); color:var(--warn)}
.pill.good{background:var(--good-bg); color:var(--good)}
.bal-form{display:flex; flex-direction:column; gap:9px; margin-top:14px; border-top:1px dashed var(--line); padding-top:12px}
.bal-hint{font-size:.72rem; color:var(--muted)}
.bal-row{display:flex; align-items:center; gap:10px}
.bal-row label{flex:1; font-size:.8rem; color:var(--muted)}
.bal-row input{
  width:120px; border:1px solid var(--line); background:var(--app-bg); color:var(--ink);
  border-radius:10px; padding:8px 10px; font-family:"Spline Sans Mono",ui-monospace,monospace;
  font-size:.85rem; text-align:right; outline:none;
}
.bal-row input:focus{border-color:var(--accent)}
.upload-zone{
  display:block; border:1.5px dashed var(--line); border-radius:14px; padding:22px 16px; text-align:center;
  color:var(--muted); font-size:.82rem; cursor:pointer; line-height:1.5; margin-top:10px;
}
.upload-zone:hover{border-color:var(--accent); color:var(--accent)}
.upload-zone small{display:block; margin-top:4px; font-size:.7rem}
.parse-status{font-size:.78rem; color:var(--muted); padding:10px 2px 0}
.cand-actions{display:flex; gap:8px; margin-top:12px}
.cand-check{width:18px; height:18px; accent-color:var(--accent); flex-shrink:0}
.footnote{font-size:.7rem; color:var(--muted); margin-top:10px; line-height:1.5}

/* fab + sheets */
.fab-wrap{position:sticky; bottom:0; display:flex; justify-content:flex-end;
  padding:0 18px calc(20px + env(safe-area-inset-bottom)); pointer-events:none}
.fab{
  pointer-events:auto; background:var(--accent); color:var(--accent-ink); border:0; cursor:pointer;
  border-radius:99px; padding:15px 24px; font:inherit; font-size:1rem; font-weight:700;
  box-shadow:0 8px 24px rgba(14,107,94,.35); display:flex; align-items:center; gap:8px;
}
.fab:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.backdrop{position:absolute; inset:0; background:rgba(10,16,15,.45); opacity:0; pointer-events:none; transition:opacity .25s; z-index:5}
.backdrop.on{opacity:1; pointer-events:auto}
.sheet{
  position:absolute; left:0; right:0; bottom:0; z-index:6; background:var(--card);
  border-radius:24px 24px 0 0; box-shadow:var(--sheet-shadow);
  padding:14px 18px calc(26px + env(safe-area-inset-bottom));
  transform:translateY(105%); transition:transform .3s ease;
}
.sheet.on{transform:none}
@media (prefers-reduced-motion: reduce){
  .sheet,.backdrop,.mbar .fill,.hero .bar i,.meter .bar i{transition:none}
}
.grab{width:38px; height:4px; border-radius:99px; background:var(--line); margin:0 auto 14px}
.sheet h2{font-size:.95rem; font-weight:700; margin-bottom:12px}
.amount-line{display:flex; align-items:center; gap:8px; border-bottom:2px solid var(--line); padding-bottom:8px}
.amount-line .cur{font-size:1.6rem; color:var(--muted)}
.amount-line input{
  border:0; background:none; color:var(--ink); font-family:"Spline Sans Mono",ui-monospace,monospace;
  font-size:2.1rem; font-weight:500; width:100%; outline:none; font-variant-numeric:tabular-nums;
}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 4px}
.chips .hint{width:100%; font-size:.66rem; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; font-family:"Spline Sans Mono",ui-monospace,monospace}
.chip-btn{background:var(--chip); color:var(--ink); border:1px solid transparent; border-radius:99px;
  padding:7px 14px; font:inherit; font-size:.8rem; cursor:pointer}
.chip-btn.sel{border-color:var(--accent); color:var(--accent); font-weight:600}
.memo-input{
  width:100%; border:1px solid var(--line); background:var(--app-bg); color:var(--ink);
  border-radius:10px; padding:9px 12px; font:inherit; font-size:.85rem; outline:none; margin-top:8px;
}
.memo-input:focus{border-color:var(--accent)}
.sheet-actions{display:flex; flex-direction:column; gap:9px; margin-top:14px}
.btn-primary{background:var(--accent); color:var(--accent-ink); border:0; border-radius:14px;
  padding:14px; font:inherit; font-size:.95rem; font-weight:700; cursor:pointer}
.btn-primary:disabled{opacity:.5; cursor:default}
.btn-ghost{background:none; border:1px solid var(--line); color:var(--ink); border-radius:14px;
  padding:12px; font:inherit; font-size:.86rem; cursor:pointer}
.toast{
  position:fixed; left:50%; bottom:96px; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:var(--app-bg); font-size:.78rem; padding:10px 16px;
  border-radius:12px; opacity:0; transition:.3s; pointer-events:none; z-index:9;
  max-width:90vw; text-align:center;
}
.toast.on{opacity:1; transform:translateX(-50%)}
.login-google{display:flex; align-items:center; justify-content:center; gap:10px}
.login-google svg{background:#fff; border-radius:50%; padding:2px}