:root{--bg:#faf3e6;--card:#fffaf0;--ink:#3b2a1e;--mut:#7d6853;--or:#b5541f;--am:#e0a030;--sage:#6f8a63;--line:#ecdcc3;--bad:#b3392b;box-sizing:border-box}
@media(prefers-color-scheme:dark){:root{--bg:#241a13;--card:#33261c;--ink:#f6e9d6;--mut:#c4ad92;--line:#4a3a2c;--sage:#9bb68e}}
*{box-sizing:border-box}html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;padding-bottom:env(safe-area-inset-bottom)}
.top{background:linear-gradient(135deg,#b5541f,#d9822b);color:#fff8ec;padding:calc(14px + env(safe-area-inset-top)) 16px 14px;display:flex;justify-content:space-between;align-items:center;gap:8px}
h1{margin:0;font-size:19px}.top small{opacity:.9}
.demo{background:#fff8ec;color:#b5541f;font-weight:700;font-size:11px;padding:2px 8px;border-radius:99px;letter-spacing:.05em;vertical-align:middle}
nav{display:flex;gap:6px;overflow-x:auto;padding:8px 12px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
nav button{background:transparent;color:var(--ink);border:1px solid transparent;white-space:nowrap}
nav button.on{background:var(--or);color:#fff}
main{max-width:1000px;margin:0 auto;padding:12px 14px 40px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:0 3px 10px rgba(120,70,20,.08);margin-bottom:12px}
.k{color:var(--mut);font-size:12px}.v{font-size:19px;font-weight:700}
h2{font-size:16px;margin:0 0 8px;color:var(--or)}
button,select,input,textarea{font:inherit;border-radius:10px;border:1px solid var(--line);padding:9px 12px;background:var(--card);color:var(--ink);min-height:42px}
button{background:var(--or);color:#fff;border:0;font-weight:600;cursor:pointer}
button.ghost,.ghost{background:transparent;color:inherit;border:1px solid currentColor}
button.sm{min-height:32px;padding:4px 10px;font-size:13px}button.bad{background:var(--bad)}
button:disabled{opacity:.6}
form{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}form.one{grid-template-columns:1fr;max-width:380px}
label{display:grid;gap:2px;font-size:12px;color:var(--mut)}
.bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0}
.sc{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:7px 4px;border-bottom:1px solid var(--line);vertical-align:top}th{color:var(--mut);font-size:12px}
.r{text-align:right}.note{font-size:12px;color:var(--mut)}.void{text-decoration:line-through;opacity:.6}
.b{padding:2px 8px;border-radius:99px;font-size:12px;font-weight:600;white-space:nowrap}
.paid,.confirmed{background:#dfe9d8;color:#3d5a33}.partial,.tentative{background:#fbe6b8;color:#7a5200}
.unpaid,.cancelled{background:#f6d3cc;color:#8c2b1f}.overpaid,.done{background:#d8e4f0;color:#2a4a6b}
.row{display:flex;justify-content:space-between;gap:8px;padding:7px 0;border-bottom:1px solid var(--line)}
.in{color:var(--sage);font-weight:700}.out{color:var(--or);font-weight:700}
.banner{background:#fbe6b8;color:#7a5200;border-radius:12px;padding:8px 12px;margin-bottom:10px;font-weight:600}
.bi{fill:var(--sage)}.be{fill:var(--or)}svg text{fill:currentColor;font-size:10px}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom));background:#3b2a1e;color:#fff8ec;padding:10px 16px;border-radius:12px;opacity:0;pointer-events:none;transition:opacity .25s;max-width:90%}
#toast.show{opacity:1}
.login{max-width:380px;margin:30px auto}
@media print{.top button,nav,#toast,.noprint,form,button{display:none!important}body{background:#fff;color:#000}.card{box-shadow:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}