:root{--brand:#1E40AF;--brand2:#2563EB;--ink:#0F172A;--mute:#64748B;--line:#E2E8F0;--bg:#F8FAFC;--card:#fff;
--ok:#16A34A;--okbg:#ECFDF5;--warn:#D97706;--warnbg:#FFFBEB;--down:#DC2626;--downbg:#FEF2F2;--maint:#2563EB;--maintbg:#EFF6FF;--na:#CBD5E1}
@media (prefers-color-scheme:dark){:root{--ink:#E2E8F0;--mute:#94A3B8;--line:#1E293B;--bg:#0B1120;--card:#111827;--okbg:#052e1a;--warnbg:#2b1d05;--downbg:#2a0b0b;--maintbg:#0b1a3a;--na:#334155}}
*{box-sizing:border-box}body{margin:0;font-family:Heebo,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5}
.pg{max-width:760px;margin-inline:auto;padding:20px}
.hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.logo{font-weight:800;font-size:20px;color:var(--brand)}.logo small{display:block;font-weight:500;font-size:13px;color:var(--mute)}
.sub{font-size:13px;color:var(--mute)}
.ban{border-radius:12px;padding:16px 18px;font-weight:700;font-size:18px;display:flex;gap:10px;align-items:center;margin-bottom:16px}
.ban .dot{width:14px;height:14px;border-radius:50%}
.b-ok{background:var(--okbg);color:var(--ok)}.b-ok .dot{background:var(--ok)}
.b-warn{background:var(--warnbg);color:var(--warn)}.b-warn .dot{background:var(--warn)}
.b-down{background:var(--downbg);color:var(--down)}.b-down .dot{background:var(--down)}
.b-maint{background:var(--maintbg);color:var(--maint)}.b-maint .dot{background:var(--maint)}
.note{border-radius:10px;padding:10px 14px;font-size:14px;margin-bottom:14px;background:var(--line);color:var(--ink)}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:14px}
.card h2{margin:0 0 8px;font-size:16px}
.comp{padding:12px 0;border-bottom:1px solid var(--line)}.comp:last-child{border:0}
.ctop{display:flex;justify-content:space-between;align-items:center;gap:8px}
.cname{font-weight:600}.core{white-space:nowrap;font-size:11px;background:var(--maintbg);color:var(--brand);border-radius:99px;padding:1px 8px;margin-inline-start:6px;font-weight:600}
.st{font-size:13px;font-weight:600;white-space:nowrap}.s-ok{color:var(--ok)}.s-warn{color:var(--warn)}.s-down{color:var(--down)}.s-maint{color:var(--maint)}
.bars{display:flex;gap:1px;height:26px;margin:8px 0 4px;direction:ltr}
.bars button{flex:1;min-width:0;border:0;padding:0;cursor:pointer;border-radius:2px;background:var(--ok)}
.bars button.y{background:var(--warn)}.bars button.r{background:var(--down)}.bars button.b{background:var(--maint)}.bars button.g{background:var(--na)}
.cfoot{display:flex;justify-content:space-between;font-size:12px;color:var(--mute)}
.upt{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink)}
.inc{border-inline-start:4px solid var(--down);background:var(--card);border-radius:10px;padding:12px 14px;margin-bottom:14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-inline-end:1px solid var(--line)}
.inc.w{border-inline-start-color:var(--warn)}.inc.m{border-inline-start-color:var(--maint)}.inc.res{border-inline-start-color:var(--ok)}
.inc h3{margin:0 0 4px;font-size:15px}.aff{font-size:12px;color:var(--mute)}
.upd{margin-top:8px;font-size:14px}.upd b{font-weight:700}.upd time{display:block;font-size:12px;color:var(--mute)}
.pill{display:inline-block;font-size:11px;border-radius:99px;padding:1px 8px;font-weight:700}
.p-inv{background:var(--downbg);color:var(--down)}.p-mon{background:var(--warnbg);color:var(--warn)}.p-res{background:var(--okbg);color:var(--ok)}.p-m{background:var(--maintbg);color:var(--maint)}
.month{font-weight:700;margin:12px 0 6px;font-size:14px;color:var(--mute)}
.ftr{font-size:12px;color:var(--mute);text-align:center;padding:14px 0 4px}
.sk{height:14px;border-radius:6px;background:linear-gradient(90deg,var(--line),var(--bg),var(--line));margin:10px 0}
.tip{position:relative;display:inline-block;background:var(--ink);color:var(--bg);font-size:12px;border-radius:6px;padding:4px 8px}
/* admin */
input,select,textarea{font:inherit;width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink)}
label{font-size:13px;font-weight:600;display:block;margin:10px 0 4px}
.btn{display:inline-block;background:var(--brand);color:#fff;border:0;border-radius:8px;padding:8px 14px;font-weight:700;font:inherit;font-weight:700}
.btn.sec{background:transparent;color:var(--brand);border:1px solid var(--brand)}.btn.red{background:var(--down)}
.err{color:var(--down);font-size:13px;margin-top:6px}
.warnbox{background:var(--warnbg);color:var(--warn);border-radius:8px;padding:8px 10px;font-size:13px;margin-top:8px}
table.adm{width:100%;border-collapse:collapse;font-size:14px}table.adm td,table.adm th{padding:8px;border-bottom:1px solid var(--line);text-align:right}
.chk{display:flex;gap:12px;flex-wrap:wrap}.chk label{font-weight:400;display:flex;gap:6px;align-items:center;margin:0}.chk input{width:auto}

body{font-family:Heebo,Arial,sans-serif}
a{color:var(--brand)}
h1{font-size:24px;margin-block:0 16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.subtitle{margin-block:-8px 16px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row>label{flex:1 1 220px}
.stale .st,.stale .bars{filter:grayscale(1)}
.b-unknown{background:var(--line)}
.b-unknown .dot{background:var(--na)}
[hidden]{display:none!important}
.cname,.inc,.note,td{overflow-wrap:anywhere}
.core{display:inline-block}
button,summary{cursor:pointer}
button:disabled{cursor:wait;opacity:.65}
:focus-visible{outline:2px solid var(--maint);outline-offset:2px}
.bars button:focus-visible{position:relative;z-index:1}
form>.btn{margin-block-start:12px}
form>.err:empty{display:none}
fieldset{min-width:0;border:0;padding:0;margin:12px 0}
legend{font-size:13px;font-weight:600;margin-block-end:6px}
.admin-item{padding-block:12px;border-block-end:1px solid var(--line)}
.admin-item:last-child{border:0}
.login{max-width:400px;margin:28px auto}
details{margin-block-start:10px}
@media(max-width:420px){.pg{padding:14px}.card{padding:12px}.ctop{align-items:flex-start}}
@media(prefers-color-scheme:dark){:root{--brand:#93c5fd;--ok:#4ade80;--warn:#fbbf24;--down:#f87171;--maint:#93c5fd}.btn{color:#0b1120}}
.previous th:first-child{width:48%}
.previous td,.previous th{overflow-wrap:anywhere}
.coverage{display:block;font-size:11px;color:var(--mute)}
@media(max-width:540px){
  .bars{height:auto;overflow-x:auto;scrollbar-width:thin;padding-block:2px}
  .bars button{flex:0 0 calc((100% - 44px)/45);height:26px}
  .previous th,.previous td{padding:6px 4px}
}