:root { --bg:#f4f5f7; --card:#fff; --text:#1b1f24; --muted:#6b7280; --on:#16a34a; --off:#cbd5e1; --acc:#2563eb; --warn:#d97706; }
@media (prefers-color-scheme: dark) { :root { --bg:#0f1318; --card:#1a2028; --text:#e6e9ee; --muted:#8b95a3; --off:#3a4452; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:system-ui,sans-serif; }
main { max-width:760px; margin:0 auto; padding:20px 16px 40px; }
a { color:var(--acc); text-decoration:none; }
header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; gap:12px; }
h1 { font-size:1.3rem; margin:0; display:flex; align-items:center; gap:10px; }
h2 { font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:22px 0 8px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.card { background:var(--card); border-radius:12px; padding:14px; }
.pend { border:2px solid var(--warn); }
.label { font-size:.85rem; color:var(--muted); }
.val { font-size:1.6rem; font-weight:600; margin:4px 0 8px; }
.bar { height:8px; background:var(--off); border-radius:4px; overflow:hidden; }
.bar > div { height:100%; background:var(--acc); }
.dot { display:inline-block; width:12px; height:12px; border-radius:50%; background:var(--off); margin-right:8px; vertical-align:middle; }
.dot.on { background:var(--on); } .dot.warn { background:var(--warn); }
button { font:inherit; cursor:pointer; border:0; border-radius:8px; padding:10px 14px; background:var(--off); color:var(--text); width:100%; margin-top:6px; }
button.on { background:var(--on); color:#fff; }
.small { width:auto; padding:6px 12px; margin:0; }
input { font:inherit; width:100%; padding:10px; border-radius:8px; border:1px solid var(--off); background:var(--card); color:var(--text); margin-bottom:6px; }
.num { display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; border-radius:10px; background:var(--acc); color:#fff; font-weight:700; }
.row { display:grid; grid-template-columns:auto 1fr; gap:10px 14px; align-items:center; margin-bottom:10px; }
.row .acc, .row .adm { grid-column:1 / -1; display:grid; grid-template-columns:1fr auto; gap:8px; align-items:start; }
.row .adm { grid-template-columns:1fr 1fr auto; border-top:1px dashed var(--off); padding-top:10px; }
.row button { width:auto; margin:0; }
.badges { display:flex; gap:18px; flex-wrap:wrap; font-size:.9rem; margin:8px 0; }
.hidden { display:none; }
#login, #adminbox { max-width:340px; margin:14vh auto 0; }
#adminbox { margin:0 0 16px; max-width:none; }
@media (max-width:520px) { .row .adm { grid-template-columns:1fr; } }