:root{
  --bg:#F8FAFC; --surface:#FFFFFF; --surface-2:#F1F5F9; --border:#AEBACA;
  --text:#020617; --text-2:#475569; --accent:#0369A1; --on-accent:#FFFFFF;
  --danger:#B91C1C; --ok:#15803D; --warn:#B45309; --focus:#0369A1; --border-strong:#64748B;
  --r:12px; --tap:52px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0D1117; --surface:#161B22; --surface-2:#1F252E; --border:#454C56;
    --text:#F0F3F6; --text-2:#9BA5B0; --accent:#58A6FF; --on-accent:#08111F;
    --danger:#F85149; --ok:#3FB950; --warn:#D29922; --focus:#58A6FF; --border-strong:#6E7681;
  }
}
:root[data-theme="dark"]{
  --bg:#0D1117; --surface:#161B22; --surface-2:#1F252E; --border:#454C56;
  --text:#F0F3F6; --text-2:#9BA5B0; --accent:#58A6FF; --on-accent:#08111F;
  --danger:#F85149; --ok:#3FB950; --warn:#D29922; --focus:#58A6FF; --border-strong:#6E7681;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Fira Sans',system-ui,sans-serif; background:var(--bg); color:var(--text);
  padding:40px 24px 80px; -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

.phone{
  width:390px;height:844px;background:var(--bg);border:1px solid var(--border);
  border-radius:28px;overflow:hidden;display:flex;flex-direction:column;position:relative;
  box-shadow:0 8px 24px -8px rgb(2 6 23 / .18);
}
@media (max-width:480px){
  .phone{width:100%;height:100dvh;border:none;border-radius:0;box-shadow:none}
}
.scroll{flex:1;overflow-y:auto;overscroll-behavior:contain}
.scroll::-webkit-scrollbar{width:6px}
.scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

.appbar{
  display:flex;align-items:center;gap:12px;padding:16px;background:var(--surface);
  border-bottom:1px solid var(--border);position:sticky;top:0;z-index:2;
}
.appbar h1{font-size:1.0625rem;font-weight:600;flex:1;letter-spacing:-.01em}
.saldo-badge{
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  font-size:.75rem;color:var(--text-2);min-width:64px;
}
.saldo-badge .saldo-val{font-size:1.125rem;font-weight:700;color:var(--accent)}
.saldo-badge.low .saldo-val{color:var(--warn)}
.saldo-badge.critical .saldo-val{color:var(--danger)}
.iconbtn{
  width:44px;height:44px;display:grid;place-items:center;border:none;background:none;
  color:var(--text);border-radius:10px;cursor:pointer;flex:none;
}
.iconbtn:hover{background:var(--surface-2)}

.section-label{
  display:flex;align-items:baseline;justify-content:space-between;
  padding:18px 16px 8px;font-size:.75rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-2);
}
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  margin:0 16px 12px;padding:16px;
}

.row{
  display:flex;align-items:center;gap:12px;padding:14px 16px;
  border-bottom:1px solid var(--border);min-height:var(--tap);
}
.row:last-child{border-bottom:none}
.row .body{flex:1;min-width:0}
.row .title{font-size:.9375rem;font-weight:500}
.row .meta{font-size:.8125rem;color:var(--text-2);margin-top:2px}
.row .val{font-size:.9375rem;font-weight:600}

.hero-figure{margin-bottom:16px}
.hero-figure .k{font-size:.75rem;color:var(--text-2);margin-bottom:2px}
.hero-figure .v{font-size:2.5rem;font-weight:700;letter-spacing:-.03em;line-height:1.05}
.hero-figure .sub{font-size:.8125rem;color:var(--text-2);margin-top:4px}

.ledger{margin:0 16px 16px;border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.ledger .li{display:flex;justify-content:space-between;gap:12px;padding:11px 14px;font-size:.9375rem}
.ledger .li+.li{border-top:1px solid var(--border)}
.ledger .li .k{color:var(--text-2)}
.ledger .li.total{background:var(--surface-2);font-weight:700;font-size:1.0625rem}
.ledger .li.total .k{color:var(--text)}

.btn{
  min-height:var(--tap);display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-size:.9375rem;font-weight:600;border-radius:10px;cursor:pointer;
  border:1px solid var(--border-strong);background:var(--surface);color:var(--text);
  transition:background 160ms ease,border-color 160ms ease;
}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{border-style:dashed;color:var(--text-2)}
.btn.full{width:100%}

.scarto-actions-row{
  display:flex;justify-content:flex-end;padding:8px 16px 12px;border-top:1px solid var(--border);
}
.scarta-btn{
  min-height:var(--tap);padding:0 20px;background:var(--danger);color:var(--on-accent);
  border-color:var(--danger);font-weight:600;
}
.scarta-btn:hover{filter:brightness(1.1)}

.scarto-menu{
  position:absolute;bottom:100%;left:16px;right:16px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r) var(--r) 0 0;
  box-shadow:0 -4px 16px rgb(2 6 23 / .15);z-index:10;display:none;flex-direction:column;
  padding:16px;gap:8px;
}
.scarto-header{
  font-size:.8125rem;font-weight:600;color:var(--text-2);padding-bottom:8px;
  border-bottom:1px solid var(--border);
}
.scarto-option{
  min-height:var(--tap);width:100%;text-align:left;justify-content:flex-start;
  padding:0 16px;font-size:.9375rem;
}
.scarto-cancel{
  min-height:var(--tap);width:100%;margin-top:4px;
}

.tabbar{
  display:flex;border-top:1px solid var(--border);background:var(--surface);
}
.tabbar a:active{background:var(--surface-2)}
.tabbar a{
  flex:1;min-height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;text-decoration:none;color:var(--text-2);font-size:.6875rem;font-weight:600;
}
.tabbar a[aria-current="page"]{color:var(--accent)}

.pill{
  display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;
  font-size:.75rem;font-weight:600;letter-spacing:.02em;white-space:nowrap;flex:none;
  border:1px solid var(--border);color:var(--text-2);background:var(--surface);
}
.pill.alert{color:var(--warn);border-color:var(--warn)}
.pill.won{color:var(--ok);border-color:var(--ok)}
.pill.lost{color:var(--danger);border-color:var(--danger)}

.empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:32px 16px;text-align:center;color:var(--text-2);
}

.card[style*="padding:0"] .row{margin:0;padding:14px 16px}
.card[style*="padding:0"]{padding:0}