:root{--ink:#13211C;--ground:#F3F5F1;--tea:#0E6B4F;--tint:#E3F0EA;--saffron:#F2A93B;--muted:#5A6862;--line:#DCE3DE;--bad:#B3261E;--card:#fff}
*{box-sizing:border-box}body{margin:0;font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--ground);color:var(--ink)}
header{background:var(--ink);color:#F7F3EA;padding:14px 24px;display:flex;align-items:center;gap:14px}
header b{font-size:18px}header .sp{flex:1}header small{color:#A9B8B1}
.logo{width:34px;height:34px;border-radius:10px;background:var(--saffron);display:grid;place-items:center;color:var(--ink);font-weight:800}
nav{display:flex;gap:6px;padding:12px 24px;flex-wrap:wrap;border-bottom:1px solid var(--line);background:#fff}
nav button{border:0;background:none;padding:8px 14px;border-radius:999px;font:inherit;cursor:pointer;color:var(--muted)}
nav button.on{background:var(--tint);color:var(--tea);font-weight:600}
main{max-width:1100px;margin:0 auto;padding:24px}
.card{background:var(--card);border-radius:16px;padding:18px;margin-bottom:14px;border:1px solid var(--line)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.stat .k{color:var(--muted);font-size:13px}.stat .v{font-size:26px;font-weight:800}
h2{margin:0 0 12px;font-size:18px}h3{margin:0 0 8px;font-size:15px}
label{display:block;font-size:13px;color:var(--muted);margin:10px 0 4px}
input,select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;background:#fff}
input[type=checkbox]{width:auto}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.row>*{flex:1}
button.p{background:var(--tea);color:#fff;border:0;border-radius:10px;padding:10px 18px;font:inherit;font-weight:600;cursor:pointer}
button.s{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 14px;font:inherit;cursor:pointer}
button.d{background:#fff;color:var(--bad);border:1px solid #E7B9B2;border-radius:10px;padding:8px 14px;font:inherit;cursor:pointer}
table{width:100%;border-collapse:collapse;font-size:14px}th,td{text-align:left;padding:8px;border-bottom:1px solid var(--line)}th{color:var(--muted);font-weight:600}
.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600;background:var(--tint);color:var(--tea)}
.pill.warn{background:#FCEFD9;color:#8A5A00}.pill.bad{background:#F9E1DE;color:var(--bad)}
.muted{color:var(--muted);font-size:13px}.hide{display:none}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:10px;display:none}
.center{max-width:420px;margin:60px auto;text-align:center}
.packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.pack{border:2px solid var(--line);border-radius:16px;padding:14px;cursor:pointer;background:#fff;text-align:left}
.pack.on{border-color:var(--ink);background:var(--ink);color:#F7F3EA}
.pack b{font-size:20px;display:block}
