:root{--bg:#0F1417;--card:#171E23;--line:#2A353C;--text:#E6EDF0;--muted:#9AA9B2;--acc:#5CC8C0;--crit:#FF6B5E}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
.wrap{max-width:720px;margin:0 auto;padding:24px 16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:12px}
.card.narrow{max-width:420px;margin:8vh auto 0}
h1{margin:0;font-size:22px}h2{margin:8px 0 0;font-size:17px}
a{color:var(--acc)}
.muted{color:var(--muted);margin:0;font-size:14px}
label{display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--muted);margin-bottom:10px}
input{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px;min-height:44px}
input:focus{outline:2px solid var(--acc);outline-offset:1px}
.btn{font:inherit;min-height:44px;padding:0 16px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.btn.primary{background:var(--acc);color:#0F1417;border-color:var(--acc);font-weight:600}
.btn.small{min-height:36px;padding:0 12px;font-size:14px}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.flash{background:rgba(76,195,138,.14);color:#4CC38A;border-radius:8px;padding:10px 14px;margin-bottom:12px}
.flash.err{background:rgba(255,107,94,.14);color:var(--crit)}
.sep{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}
.sep::before,.sep::after{content:"";flex:1;border-top:1px solid var(--line)}
.keys{list-style:none;margin:0;padding:0}
.keys li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.status{min-height:1.4em}
.mono{font-family:ui-monospace,"IBM Plex Mono",Consolas,monospace}
.meters{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.meters{grid-template-columns:1fr}}
.meter{display:flex;flex-direction:column;gap:5px;margin-bottom:6px}
.mhead{display:flex;justify-content:space-between;gap:8px;font-size:14px;color:var(--muted)}
.bar{height:6px;border-radius:3px;background:var(--line)}
.fill{height:6px;border-radius:3px;background:#8FA3AD}
.fill.warn{background:#F2B544}.fill.crit{background:var(--crit)}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;color:var(--muted);font-weight:500;padding:6px 8px 6px 0}
.tbl td{padding:8px 8px 8px 0;border-top:1px solid var(--line)}
.t-ok{color:#4CC38A}.t-warn{color:#F2B544}.t-crit{color:var(--crit)}
.nw{white-space:nowrap}

.wrap{max-width:1360px}
.page-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:12px}
.page-head h1{margin:0}
.actions{display:flex;flex-wrap:wrap;gap:8px}
.actions form{margin:0}
.back{color:var(--acc);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.tiles{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:12px}
@media (min-width:760px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.tiles{grid-template-columns:repeat(5,minmax(0,1fr))}}
.tile{display:flex;flex-direction:column;justify-content:space-between;gap:12px;box-sizing:border-box;min-height:190px;padding:14px;border-radius:14px;text-decoration:none;color:var(--text);border:1px solid var(--line);background:var(--card)}
.tile:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.tile.ok{border-color:rgba(76,195,138,.55);background:linear-gradient(rgba(76,195,138,.12),rgba(76,195,138,.12)),var(--card)}
.tile.warn{border-color:rgba(242,181,68,.55);background:linear-gradient(rgba(242,181,68,.12),rgba(242,181,68,.12)),var(--card)}
.tile.crit{border-color:rgba(255,107,94,.55);background:linear-gradient(rgba(255,107,94,.12),rgba(255,107,94,.12)),var(--card)}
.tname{display:flex;flex-direction:column;gap:1px}
.tname strong{font-size:15px;font-weight:600}
.tname .muted,.tstat .muted{font-size:12px}
.tbars{display:flex;flex-direction:column;gap:8px}
.trow{display:flex;align-items:center;gap:6px}
.tl{flex:0 0 34px;font-size:12px;color:var(--muted)}
.trow .bar{flex:1 1 0;min-width:0}
.tv{flex:0 0 34px;text-align:right;font:500 12px ui-monospace,Consolas,monospace;color:var(--muted)}
.tv.warn{color:#F2B544}.tv.crit{color:var(--crit)}
.tstat{display:flex;flex-direction:column;gap:2px}
.reason{font-size:13px;line-height:1.3}
.sw{font-size:13px;font-weight:600}
.sw.ok{color:#4CC38A}.sw.warn{color:#F2B544}.sw.crit{color:var(--crit)}
.banner{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:12px;margin:8px 0 14px;border:1px solid var(--line)}
.banner.ok{border-color:rgba(76,195,138,.55);background:linear-gradient(rgba(76,195,138,.12),rgba(76,195,138,.12)),var(--card)}
.banner.warn{border-color:rgba(242,181,68,.55);background:linear-gradient(rgba(242,181,68,.12),rgba(242,181,68,.12)),var(--card)}
.banner.crit{border-color:rgba(255,107,94,.55);background:linear-gradient(rgba(255,107,94,.12),rgba(255,107,94,.12)),var(--card)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:18px 28px;margin-top:12px}
.col{display:flex;flex-direction:column;gap:12px;min-width:0}
.col h2{font-size:12px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;font-weight:500;margin:6px 0 0}
.mhead .warn{color:#F2B544}.mhead .crit{color:var(--crit)}
.drow{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-top:1px solid var(--line)}
.drow-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
/* ширина полосок: .w0 … .w100 (inline style запрещён CSP) */
.w0{width:0%}
.w1{width:1%}
.w2{width:2%}
.w3{width:3%}
.w4{width:4%}
.w5{width:5%}
.w6{width:6%}
.w7{width:7%}
.w8{width:8%}
.w9{width:9%}
.w10{width:10%}
.w11{width:11%}
.w12{width:12%}
.w13{width:13%}
.w14{width:14%}
.w15{width:15%}
.w16{width:16%}
.w17{width:17%}
.w18{width:18%}
.w19{width:19%}
.w20{width:20%}
.w21{width:21%}
.w22{width:22%}
.w23{width:23%}
.w24{width:24%}
.w25{width:25%}
.w26{width:26%}
.w27{width:27%}
.w28{width:28%}
.w29{width:29%}
.w30{width:30%}
.w31{width:31%}
.w32{width:32%}
.w33{width:33%}
.w34{width:34%}
.w35{width:35%}
.w36{width:36%}
.w37{width:37%}
.w38{width:38%}
.w39{width:39%}
.w40{width:40%}
.w41{width:41%}
.w42{width:42%}
.w43{width:43%}
.w44{width:44%}
.w45{width:45%}
.w46{width:46%}
.w47{width:47%}
.w48{width:48%}
.w49{width:49%}
.w50{width:50%}
.w51{width:51%}
.w52{width:52%}
.w53{width:53%}
.w54{width:54%}
.w55{width:55%}
.w56{width:56%}
.w57{width:57%}
.w58{width:58%}
.w59{width:59%}
.w60{width:60%}
.w61{width:61%}
.w62{width:62%}
.w63{width:63%}
.w64{width:64%}
.w65{width:65%}
.w66{width:66%}
.w67{width:67%}
.w68{width:68%}
.w69{width:69%}
.w70{width:70%}
.w71{width:71%}
.w72{width:72%}
.w73{width:73%}
.w74{width:74%}
.w75{width:75%}
.w76{width:76%}
.w77{width:77%}
.w78{width:78%}
.w79{width:79%}
.w80{width:80%}
.w81{width:81%}
.w82{width:82%}
.w83{width:83%}
.w84{width:84%}
.w85{width:85%}
.w86{width:86%}
.w87{width:87%}
.w88{width:88%}
.w89{width:89%}
.w90{width:90%}
.w91{width:91%}
.w92{width:92%}
.w93{width:93%}
.w94{width:94%}
.w95{width:95%}
.w96{width:96%}
.w97{width:97%}
.w98{width:98%}
.w99{width:99%}
.w100{width:100%}
.spark-row{display:flex;align-items:center;gap:10px;margin-top:4px;font-size:12px}
.spark{width:120px;height:28px;flex:0 0 120px;overflow:visible}
.spark polyline{fill:none;stroke:#8FA3AD;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.spark line{stroke:#F2B544;stroke-width:1;stroke-dasharray:3 3;opacity:.7}
.kv{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.kv .v{text-align:right;min-width:0;overflow-wrap:anywhere}
.free-n{font-weight:600}
.actions{display:flex;flex-wrap:wrap;gap:8px}

.banners{display:flex;flex-direction:column;gap:12px;margin:8px 0 14px}
.banners .banner{margin:0}
a.banner.link{color:inherit;text-decoration:none}
a.banner.link:hover{filter:brightness(1.08)}
.sechosts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:12px;margin:14px 0}
.sechost{display:flex;flex-direction:column;padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--card)}
.sechost.ok{border-color:rgba(76,195,138,.45)}
.sechost.warn{border-color:rgba(242,181,68,.55)}
.sechost.crit{border-color:rgba(255,107,94,.6)}
.sh-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding-bottom:8px}
.chk{display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:8px;padding:9px 0;border-top:1px solid var(--line)}
.chk .g{font-size:13px;line-height:20px;color:var(--muted)}
.chk .g.ok{color:#4CC38A}.chk .g.warn{color:#F2B544}.chk .g.crit{color:var(--crit)}
.chk .cl{font-size:12px;color:var(--muted)}
.chk .ct{font-size:14px;overflow-wrap:anywhere}
.chips{display:flex;flex-wrap:wrap;gap:6px;padding-top:4px}
.chip{padding:3px 10px;border:1px solid var(--line);border-radius:999px;font-size:13px}
.ph{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ph strong{font-size:16px}
.pl{font-size:15px;line-height:1.35}
a.banner.link{gap:6px}
.pgo{margin-top:2px}
.pl .g.ok{color:#4CC38A}.pl .g.warn{color:#F2B544}.pl .g.crit{color:var(--crit)}