:root { --bg:#f6f7f9; --card:#fff; --ink:#1d2430; --muted:#667085; --line:#e3e6eb; --accent:#1f5f99; --ok:#1e8a4c; --soon:#b7791f; --late:#c0392b; --wait:#667085; }
@media (prefers-color-scheme: dark) { :root { --bg:#14181f; --card:#1d232d; --ink:#e8ebf0; --muted:#98a2b3; --line:#2b3340; --accent:#6aa9e0; --ok:#4cc38a; --soon:#e0b04a; --late:#ff7b6b; --wait:#98a2b3; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
.top { display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; padding:12px 16px; background:var(--card); border-bottom:1px solid var(--line); }
.top nav { display:flex; gap:14px; flex:1; }
.top a { color:var(--muted); text-decoration:none; padding:4px 0; }
.top a.on { color:var(--ink); border-bottom:2px solid var(--accent); }
.logout { margin:0; font-size:14px; }
main { max-width:820px; margin:0 auto; padding:16px; }
h1 { font-size:24px; margin:8px 0 12px; } h2 { font-size:18px; margin:0 0 10px; } h2 small { font-weight:400; color:var(--muted); font-size:14px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; margin:0 0 16px; }
.muted { color:var(--muted); } .small { font-size:13px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; }
.row { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:4px; }
.bar { height:10px; background:var(--line); border-radius:6px; overflow:hidden; }
.fill { display:block; height:100%; background:var(--wait); } .fill.ok { background:var(--ok); } .fill.soon { background:var(--soon); } .fill.late { background:var(--late); }
.status { margin-top:4px; font-size:14px; } .ok { color:var(--ok); } .soon { color:var(--soon); } .late { color:var(--late); } .wait { color:var(--wait); }
.next .row { padding:6px 0; border-bottom:1px solid var(--line); } .next .row:last-child { border:0; }
form.entry { display:grid; gap:12px; }
label { display:grid; gap:4px; font-size:14px; color:var(--muted); }
label.check { display:flex; gap:8px; align-items:center; }
input, select { font:inherit; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink); width:100%; }
input[type=checkbox] { width:auto; }
button, .button { font:inherit; cursor:pointer; }
button.primary, .button { background:var(--accent); color:#fff; border:0; border-radius:8px; padding:11px 16px; text-decoration:none; display:inline-block; }
button.link { background:none; border:0; color:var(--accent); padding:0; }
a { color:var(--accent); }
.login { max-width:360px; margin:40px auto; display:grid; gap:12px; }
.flash { padding:10px 14px; border-radius:8px; border:1px solid var(--line); background:var(--card); }
.flash.ok { border-color:var(--ok); } .flash.late { border-color:var(--late); }
.list { list-style:none; margin:0; padding:0; }
.list li { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.list li:last-child { border:0; }
.void { opacity:.55; } .ledger .void strong, .ledger .void .muted:first-of-type { text-decoration:line-through; }
.voidform { display:flex; gap:8px; align-items:flex-start; } .voidform input { width:120px; padding:6px 8px; }
.filters a { margin-left:8px; } .filters a.on { font-weight:700; }
.scroll { overflow-x:auto; } table { width:100%; border-collapse:collapse; font-size:15px; }
th, td { text-align:left; padding:8px 8px; border-bottom:1px solid var(--line); white-space:nowrap; } th { color:var(--muted); font-weight:500; font-size:13px; }
.n { text-align:right; } tfoot td { border-bottom:0; }
h3 { font-size:15px; margin:16px 0 6px; color:var(--muted); font-weight:600; }
.sect { font-size:20px; margin:20px 0 8px; }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin:6px 0 14px; }
.stats > div { display:flex; flex-direction:column; gap:2px; }
.k { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; }
.v { font-size:22px; font-weight:650; }
.free .v { font-size:26px; }
.inline-form { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.inline-form label { flex:1; min-width:180px; }
.two { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; }
.paygrid { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); align-items:end; }
input.num { width:64px; } input.amt { width:110px; text-align:right; } input[type=date] { min-width:140px; }
table.bills input { padding:6px 8px; }
tr.picked td { background:color-mix(in srgb, var(--accent) 12%, transparent); }
.button.ghost { background:none; color:var(--accent); border:1px solid var(--line); }
.snap .free { grid-column:auto; }