:root{--bg:#FCFCFB;--panel:#F5F3EE;--card:#fff;--ink:#1A1A19;--ink2:#4A463F;--ink3:#767068;--rule:#E0DCD2;--acc:#A81E45;--good:#2C6B4F;--goodbg:#E2EDE6;--warn:#8A6A12;--warnbg:#F5EEDC;--bad:#A8351F;--badbg:#F6E3DE}
@media (prefers-color-scheme: dark){:root:not([data-theme=light]){--bg:#171615;--panel:#211f1d;--card:#1c1b19;--ink:#ECE8E1;--ink2:#C9C3B8;--ink3:#9C958A;--rule:#38342F;--acc:#E0708F;--good:#8FCFA9;--goodbg:#1F3329;--warn:#E3C26A;--warnbg:#332B17;--bad:#F2937E;--badbg:#3A221D}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 "Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--acc)}
header{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:2px solid var(--ink);padding:10px 20px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
header .brand{font-weight:700;font-size:17px;margin-right:8px;color:var(--ink);text-decoration:none}
nav{display:flex;gap:4px;flex-wrap:wrap;flex:1}
nav a{color:var(--ink2);text-decoration:none;padding:5px 10px;border-radius:5px}
nav a.on{background:var(--ink);color:var(--bg)}
nav a:hover:not(.on){background:var(--panel)}
.who{color:var(--ink3);font-size:13px}
.sandbox{background:var(--warnbg);color:var(--warn);font-size:12px;font-weight:700;padding:3px 8px;border-radius:4px}
main{max-width:1280px;margin:0 auto;padding:22px 20px 60px}
h1{font-size:24px;margin:0 0 4px}
h2{font-size:18px;margin:28px 0 8px}
.lead{color:var(--ink2);margin:0 0 18px;max-width:760px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.card{background:var(--panel);border-radius:8px;padding:16px 18px}
.card h3{margin:0 0 6px;font-size:15px;color:var(--ink2);font-weight:600}
.card .big{font-size:28px;font-weight:700;font-variant-numeric:tabular-nums}
.card.bad{background:var(--badbg)} .card.good{background:var(--goodbg)} .card.warn{background:var(--warnbg)}
table{border-collapse:collapse;width:100%;font-size:14px;margin:6px 0 10px}
.scroll{overflow-x:auto}
th,td{padding:6px 8px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
th{color:var(--ink3);font-weight:600;white-space:nowrap}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.total td{font-weight:700;border-top:2px solid var(--ink)}
.muted{color:var(--ink3);font-size:13px}
.pill{display:inline-block;padding:1px 8px;border-radius:10px;font-size:12px;font-weight:600}
.pill.good{background:var(--goodbg);color:var(--good)} .pill.bad{background:var(--badbg);color:var(--bad)} .pill.warn{background:var(--warnbg);color:var(--warn)} .pill.plain{background:var(--panel);color:var(--ink2)}
form.inline{display:inline}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin:8px 0}
label{display:flex;flex-direction:column;font-size:13px;color:var(--ink2);gap:3px}
input,select,textarea{font:inherit;padding:6px 8px;border:1px solid var(--rule);border-radius:5px;background:var(--card);color:var(--ink)}
button{font:inherit;padding:6px 12px;border:1px solid var(--rule);background:var(--card);color:var(--ink);border-radius:5px;cursor:pointer}
button:hover{border-color:var(--ink3)}
button.p{background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:600}
button.g{background:var(--good);color:#fff;border-color:var(--good);font-weight:600}
button.small{padding:3px 8px;font-size:13px}
.msg{background:var(--goodbg);color:var(--good);padding:10px 14px;border-radius:6px;margin:0 0 14px}
.msg.bad{background:var(--badbg);color:var(--bad)}
.login{max-width:360px;margin:12vh auto;background:var(--panel);padding:26px;border-radius:10px}
.login label{margin-bottom:10px}
@media (max-width:640px){header{padding:8px 16px}main{padding:16px 16px 40px}nav a{padding:4px 8px}}
.login.setup{max-width:420px;margin:6vh auto}
.login h2{font-size:1rem;margin:18px 0 8px}
.qr{background:#fff;display:inline-block;padding:8px;border-radius:6px}
.secret{word-break:break-all}
form.who{display:inline;margin:0}
button.link{background:none;border:0;padding:0;color:inherit;text-decoration:underline;cursor:pointer;font:inherit}
button:disabled{opacity:.6;cursor:wait}
.sandbox.live{background:#1f6f3f;color:#fff}
.sandbox.unknown{background:#8a8a8a;color:#fff}
.billgrid > div{min-width:0}
.billgrid table{display:block;overflow-x:auto;max-width:100%}
.billgrid input,.billgrid select{max-width:100%}
html{scroll-padding-top:90px}
select{max-width:100%}
@media (max-width:700px){header{padding:8px 12px;gap:8px}nav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}nav a{white-space:nowrap}header .brand{font-size:15px}}