:root{--bg:#0b1020;--panel:#121a2f;--panel2:#18223d;--line:#243052;--tx:#e6ecff;--mut:#8a97bd;--acc:#4f8cff;--acc2:#7c5cff;--dn:#38bdf8;--up:#f59e0b;--ok:#22c55e;--err:#ef4444;--warn:#f59e0b;--r:12px}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:radial-gradient(1200px 600px at 80% -10%,#1a2550 0,transparent 60%),var(--bg);color:var(--tx);font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
a{color:var(--acc);text-decoration:none}
h1{font-size:1.45rem;margin:.2rem 0 1rem}h2{font-size:1.1rem;margin:1.8rem 0 .7rem;color:#cfd8ff}
.muted{color:var(--mut)}.small{font-size:.82rem}.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9em}.nw{white-space:nowrap}.hidden{display:none!important}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:.6rem;padding:.6rem 1rem;background:rgba(11,16,32,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{color:var(--tx);font-weight:700;font-size:1.05rem}.logo{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--acc),var(--acc2));font-size:.95rem}
.logo.big{width:56px;height:56px;font-size:1.7rem;border-radius:16px;margin:0 auto 1rem}
.spacer{flex:1}.who{color:var(--mut);font-size:.85rem}.who em{font-style:normal;color:var(--acc);margin-left:.2rem}
.icon-btn{display:none;background:none;border:0;color:var(--tx);font-size:1.4rem;cursor:pointer}
.shell{display:flex;min-height:calc(100vh - 52px)}
nav#side{width:220px;flex:none;padding:1rem .6rem;border-right:1px solid var(--line)}
nav#side a{display:flex;align-items:center;gap:.7rem;padding:.6rem .8rem;border-radius:10px;color:#b9c4ea;margin-bottom:.15rem}
nav#side a:hover{background:var(--panel)}nav#side a.on{background:linear-gradient(135deg,rgba(79,140,255,.22),rgba(124,92,255,.18));color:#fff}
main{flex:1;min-width:0;padding:1.2rem 1.4rem 3rem;max-width:1200px}main.solo{max-width:420px;margin:8vh auto;padding:1rem}
.btn{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--line);background:var(--panel2);color:var(--tx);padding:.5rem .9rem;border-radius:9px;font:inherit;cursor:pointer}
.btn:hover{border-color:var(--acc)}.btn.primary{background:linear-gradient(135deg,var(--acc),var(--acc2));border:0;font-weight:600}
.btn.danger{color:#ffb4b4;border-color:#5a2230}.btn.danger:hover{background:#3a1520}.btn.ghost{background:none}.btn.sm{padding:.28rem .6rem;font-size:.85rem}.btn.block{width:100%;justify-content:center;margin-top:.6rem}
form.inline{display:inline}.row{display:flex;gap:.6rem;align-items:flex-end;flex-wrap:wrap;margin:.5rem 0}.row.nogap{gap:.3rem;margin:0}
label{display:block;font-size:.85rem;color:var(--mut);margin:.55rem 0}label.inl{display:inline-block;margin:0 .8rem .4rem 0}
input,select{display:block;width:100%;margin-top:.25rem;padding:.55rem .7rem;background:#0d1426;border:1px solid var(--line);border-radius:9px;color:var(--tx);font:inherit}
input:focus,select:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(79,140,255,.2)}input.sm{width:150px;padding:.3rem .5rem;font-size:.85rem;display:inline-block;margin:0}
.row input,.row select{width:auto;min-width:200px}label.inl select{min-width:200px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem}.card.narrow{max-width:560px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.8rem;margin-bottom:1rem}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:.9rem 1rem}
.stat .k{font-size:.78rem;color:var(--mut);text-transform:uppercase;letter-spacing:.04em}.stat .v{font-size:1.6rem;font-weight:700;margin:.15rem 0}.stat .sub{font-size:.8rem;color:var(--mut);min-height:1.1em}
.bar{height:6px;background:#0d1426;border-radius:9px;overflow:hidden;margin:.3rem 0}.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ok),var(--acc));border-radius:9px;transition:width .6s}
.bar i.warn{background:linear-gradient(90deg,var(--warn),#fb923c)}.bar i.crit{background:linear-gradient(90deg,#f97316,var(--err))}
.dn{color:var(--dn)}.up{color:var(--up)}
.chartcard{margin:1rem 0;padding:.8rem 1rem 1rem}.chead{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;margin-bottom:.4rem}
.legend{color:var(--mut);font-size:.82rem}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin:0 .25rem 0 .7rem;background:currentColor}
canvas.chart{width:100%;display:block}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
table{border-collapse:collapse;width:100%;min-width:560px}th,td{padding:.6rem .8rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);background:var(--panel2)}tr:last-child td{border-bottom:0}tr.dim{opacity:.55}
.pill{display:inline-block;padding:.12rem .55rem;border-radius:99px;font-size:.78rem;font-weight:600}.pill.ok{background:rgba(34,197,94,.15);color:#4ade80}.pill.off{background:rgba(138,151,189,.15);color:var(--mut)}.pill.bad{background:rgba(239,68,68,.15);color:#f87171}
.pulse{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:.4rem;background:var(--mut)}.pulse.on{background:var(--ok);box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:p 1.8s infinite}
@keyframes p{70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.flash{padding:.7rem 1rem;border-radius:10px;margin:0 0 1rem;border:1px solid var(--line);background:var(--panel)}.flash.ok{border-color:#1d6b3a;background:rgba(34,197,94,.1)}.flash.err{border-color:#7a2a35;background:rgba(239,68,68,.1)}.flash.warn{border-color:#7a5a1a;background:rgba(245,158,11,.1)}
pre.code{background:#070b17;border:1px solid var(--line);border-radius:10px;padding:1rem;overflow-x:auto;font-size:.85rem;line-height:1.55;white-space:pre-wrap;word-break:break-all;user-select:all}
code{background:#0d1426;padding:.1rem .35rem;border-radius:5px;font-size:.88em}
details{display:inline-block}summary{list-style:none;cursor:pointer}summary::-webkit-details-marker{display:none}
.pop{position:absolute;z-index:10;margin-top:.3rem;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:.9rem;width:300px;box-shadow:0 12px 30px rgba(0,0,0,.45)}.pop hr{border:0;border-top:1px solid var(--line);margin:.8rem 0}
.actions{white-space:nowrap}.actions form{margin:.1rem 0}ol.steps{padding-left:1.2rem}
.login{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:2rem 1.6rem;text-align:center}.login h1{margin:.2rem 0}.login label{text-align:left}
.pager{justify-content:space-between;align-items:center}
@media(max-width:820px){.icon-btn{display:block}.who{display:none}nav#side{position:fixed;z-index:15;top:52px;bottom:0;left:0;background:var(--bg);transform:translateX(-100%);transition:transform .2s;width:240px}nav#side.open{transform:none}main{padding:1rem .9rem 3rem}.grid2{grid-template-columns:1fr}.pop{position:fixed;left:5vw;right:5vw;width:auto;top:20vh}}
