:root{--brand:#1F6FEB;--ink:#111827;--muted:#6B7280;--surface:#FFFFFF;--panel:#F9FAFB;--line:#E5E7EB;--ok:#15803D;--warn:#B45309;--danger:#B91C1C;--radius:12px}
@media (prefers-color-scheme:dark){:root{--ink:#F3F4F6;--muted:#9CA3AF;--surface:#0B0F17;--panel:#111827;--line:#1F2937;--ok:#4ADE80;--warn:#FBBF24;--danger:#F87171}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--brand)}
h1{font-size:1.5rem;line-height:1.3;margin:0 0 16px}
h2{font-size:1.1rem;margin:24px 0 8px}
p{margin:0 0 12px}
.muted,.hint{color:var(--muted)}
.hint{font-size:.875rem;margin-top:-4px}
main{padding:16px;margin:0 auto}
main.app{max-width:760px}
main.narrow{max-width:420px;padding-top:48px}
.top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:12px 16px;border-bottom:1px solid var(--line)}
.top .brand{font-weight:700;text-decoration:none;color:var(--ink)}
.top nav{display:flex;gap:4px;flex:1;overflow-x:auto}
.top nav a{padding:8px 10px;border-radius:8px;text-decoration:none;color:var(--ink);white-space:nowrap;min-height:44px;display:flex;align-items:center}
.top nav a[aria-current=page]{background:var(--panel);font-weight:600}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
button.link{background:none;border:0;padding:8px 0;color:var(--brand);font:inherit;cursor:pointer;min-height:44px}
button.link.danger{color:var(--danger)}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;flex-wrap:wrap;gap:8px}
.row.end{justify-content:flex-end}
label{display:flex;flex-direction:column;gap:4px;font-weight:600}
label.check{flex-direction:row;align-items:center;gap:8px;font-weight:400}
input,select{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-height:44px;width:100%}
input[type=checkbox]{width:20px;min-height:20px}
.combo-search{margin-bottom:4px}
.err{color:var(--danger);font-size:.875rem;margin-top:-4px}
.toast{padding:12px 16px;border-radius:var(--radius);background:var(--panel);border-left:4px solid var(--ok);margin-bottom:16px}
.toast.warn{border-left-color:var(--warn)}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:8px}
.stat{padding:16px;border:1px solid var(--line);border-radius:var(--radius);display:flex;flex-direction:column}
.stat .num{font-size:1.75rem;font-weight:700}
.list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--radius)}
.list li+li{border-top:1px solid var(--line)}
.item{display:flex;flex-direction:column;padding:12px 16px;text-decoration:none;color:var(--ink);min-height:44px}
.card-row{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;padding:12px 16px}
.badge{display:inline-block;font-size:.75rem;font-weight:600;padding:2px 8px;border-radius:999px;border:1px solid var(--line);margin-left:4px}
.badge.ok{color:var(--ok)}
.badge.off{color:var(--muted)}
.badge.warn{color:var(--warn);margin-left:0}
.badge.tier-premium{border-color:var(--brand);color:var(--brand)}
.gear{position:relative}
.gear summary{list-style:none;cursor:pointer;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:1.25rem}
.gear summary::-webkit-details-marker{display:none}
.gear .menu{position:absolute;right:0;top:44px;z-index:10;min-width:180px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:4px 12px;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.gear .menu a,.gear .menu button{display:flex;align-items:center;min-height:44px;width:100%;text-align:left}
.filter{margin-bottom:16px}
.empty{padding:24px 16px;border:1px dashed var(--line);border-radius:var(--radius);text-align:center}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:0 0 16px}
.kv dt{color:var(--muted)}
.kv dd{margin:0}
.modal{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);max-width:min(420px,calc(100vw - 32px));padding:20px}
.modal::backdrop{background:rgba(0,0,0,.4)}
[hidden]{display:none!important}
.data{width:100%;border-collapse:collapse;margin:0 0 8px}
.data th,.data td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line)}
.data thead th{color:var(--muted);font-weight:600;font-size:.875rem}
.bars{width:100%;border-collapse:collapse}
.bars th{text-align:left;font-weight:400;color:var(--muted);padding:4px 8px 4px 0;white-space:nowrap;width:1%}
.bars td{padding:4px 0}
.bar{position:relative;height:24px;background:var(--panel);border-radius:6px;overflow:hidden}
.bar::before{content:"";position:absolute;inset:0;width:0;background:var(--brand);opacity:.85;border-radius:6px}
.bar.p5::before{width:5%}
.bar.p10::before{width:10%}
.bar.p15::before{width:15%}
.bar.p20::before{width:20%}
.bar.p25::before{width:25%}
.bar.p30::before{width:30%}
.bar.p35::before{width:35%}
.bar.p40::before{width:40%}
.bar.p45::before{width:45%}
.bar.p50::before{width:50%}
.bar.p55::before{width:55%}
.bar.p60::before{width:60%}
.bar.p65::before{width:65%}
.bar.p70::before{width:70%}
.bar.p75::before{width:75%}
.bar.p80::before{width:80%}
.bar.p85::before{width:85%}
.bar.p90::before{width:90%}
.bar.p95::before{width:95%}
.bar.p100::before{width:100%}
.bar span{position:relative;display:inline-block;padding:0 8px;line-height:24px;font-size:.875rem;font-weight:600}
input[type=date]{min-width:10em}
/* Admin QR sticker sheet: round stickers ø 50 mm on A4 (SPEC §6). Sizes are
   physical so the print matches the sticker paper at 100% scale; the sheet is
   always black on white, also in dark mode. */
.sheet{display:grid;grid-template-columns:repeat(auto-fill,50mm);gap:6mm;justify-content:center;background:#fff;color:#000;padding:6mm;border-radius:8px}
.sticker{width:50mm;height:50mm;margin:0;border:.3mm dashed #9CA3AF;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2mm;break-inside:avoid}
.sticker .qr{display:block;width:27mm;height:27mm}
.sticker figcaption{display:flex;flex-direction:column;align-items:center;gap:.8mm;line-height:1}
.sticker b{font:700 4.2mm/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.5mm}
.sticker span{font-size:2.6mm}
@media print{
  @page{size:A4;margin:10mm}
  .top,.noprint,.toast{display:none!important}
  body,main,main.app{background:#fff!important;margin:0!important;padding:0!important;max-width:none!important}
  .sheet{padding:0;border-radius:0}
}