:root{--side:#1a4250;--bg:#0e232b;--card:#14323d;--line:#21495a;--tx:#e6f1f3;--mu:#8fb0b9;--ac:#3fc1a5;--ok:#2ecc71;--warn:#f5a623;--crit:#ff5b5b;--off:#7b8a91}
*{box-sizing:border-box}body{margin:0;font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--tx);display:flex;min-height:100vh}
a{color:inherit;text-decoration:none}h1{font-size:22px;margin:0}h2{font-size:16px;margin:0 0 12px}h3{font-size:13px;margin:14px 0 8px;color:var(--mu);text-transform:uppercase;letter-spacing:.05em}
.muted{color:var(--mu)}.side{width:230px;background:var(--side);display:flex;flex-direction:column;padding:18px 14px;position:sticky;top:0;height:100vh;flex-shrink:0}
.brand{display:flex;gap:10px;align-items:center;font-weight:700;font-size:17px;margin-bottom:24px}.brand img{width:34px}.brand small,h1 small{font-weight:400;color:var(--mu)}
.side nav a{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:8px;margin-bottom:3px;color:#cfe3e7}.side nav a:hover{background:#ffffff12}.side nav a.on{background:#3fc1a522;color:#fff;box-shadow:inset 3px 0 var(--ac)}
.side-foot{margin-top:auto}.langs{display:flex;gap:4px;margin:10px 0}.langs a{padding:3px 9px;border:1px solid var(--line);border-radius:6px;font-size:12px;color:var(--mu)}.langs a.on{background:var(--ac);color:#06231c;border-color:var(--ac);font-weight:700}
.logout{color:var(--mu);font-size:13px}.main{flex:1;padding:24px 28px;min-width:0}.top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:18px;margin-bottom:18px}.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:18px;display:block}.grid>.card{margin:0}
.srv{border-top:4px solid var(--ok);transition:transform .15s}.srv:hover{transform:translateY(-2px)}.st-warn{border-top-color:var(--warn)}.st-crit{border-top-color:var(--crit)}.st-offline{border-top-color:var(--off);background:#1a2c33}.st-unknown{border-top-color:var(--off)}
.srv-h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px}.srv-h h2{font-size:20px;margin:0}
.pill{display:inline-block;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:600;white-space:nowrap;vertical-align:middle}.s-ok{background:#2ecc7122;color:var(--ok)}.s-warn{background:#f5a62322;color:var(--warn)}.s-crit{background:#ff5b5b22;color:var(--crit)}.s-offline,.s-unknown{background:#7b8a9133;color:#c4ced2}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:6px}.dot.s-ok{background:var(--ok)}.dot.s-warn{background:var(--warn)}.dot.s-crit{background:var(--crit)}.dot.s-offline,.dot.s-unknown{background:var(--off)}
.meta{display:flex;flex-wrap:wrap;gap:4px 16px;color:var(--mu);font-size:12.5px;margin:6px 0 12px}.meta b{color:var(--tx)}
.bar{margin:10px 0}.bar-l{display:flex;justify-content:space-between;font-size:13px}.bar small{color:var(--mu);font-size:11.5px}.track{height:8px;background:#0b1d24;border-radius:6px;overflow:hidden;margin:4px 0 2px}.track i{display:block;height:100%;border-radius:6px}
i.l-ok{background:linear-gradient(90deg,#2a9d8f,var(--ac))}i.l-warn{background:var(--warn)}i.l-crit{background:var(--crit)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.chip{font-size:11.5px;padding:2px 8px;border-radius:6px;border:1px solid}.chip.l-ok{border-color:#2ecc7155;color:#9fe8bf}.chip.l-warn{border-color:var(--warn);color:var(--warn)}.chip.l-crit{border-color:var(--crit);color:var(--crit);background:#ff5b5b18}
.alert{padding:9px 12px;border-radius:8px;margin-bottom:8px;display:flex;gap:8px;align-items:center;border-left:4px solid}.alert .tag{margin-left:auto;font-size:11px;text-transform:uppercase;opacity:.8}
.alert.l-warn{background:#f5a62314;border-color:var(--warn)}.alert.l-crit{background:#ff5b5b14;border-color:var(--crit)}
.tbl{width:100%;border-collapse:collapse;font-size:13px}.tbl td,.tbl th{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left}.tbl th{color:var(--mu);font-weight:500}
.card-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.card-h h2{margin:0}.seg{display:flex;background:#0b1d24;border-radius:8px;padding:3px}.seg button{background:none;border:0;color:var(--mu);padding:5px 12px;border-radius:6px;cursor:pointer;font:inherit}.seg button.on{background:var(--side);color:#fff}
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}figure{margin:0}figcaption{font-size:12px;color:var(--mu);margin-bottom:4px}.chart{width:100%;height:170px;background:#0b1d24;border-radius:8px;display:block}
.chart text{fill:var(--mu);font-size:10px}.login-body{align-items:center;justify-content:center;background:radial-gradient(circle at 30% 20%,#1a4250,#0e232b 70%)}
.login{width:min(360px,92vw);text-align:center}.login-logo{width:56px}.login h1{margin:8px 0 2px}.login label{display:block;text-align:left;margin:12px 0;font-size:13px;color:var(--mu)}
.login input{width:100%;margin-top:4px;padding:10px 12px;border-radius:8px;border:1px solid var(--line);background:#0b1d24;color:var(--tx);font:inherit}.login button{width:100%;padding:11px;border:0;border-radius:8px;background:var(--ac);color:#06231c;font-weight:700;cursor:pointer;margin-top:6px}.login .langs{justify-content:center;margin-top:16px}
@media(max-width:900px){body{flex-direction:column}.side{width:auto;height:auto;position:sticky;z-index:5;flex-direction:row;flex-wrap:wrap;align-items:center;padding:10px 14px;gap:8px}.brand{margin:0}.side nav{display:flex;gap:4px;overflow-x:auto;flex:1}.side nav a{margin:0;white-space:nowrap;padding:6px 10px}.side-foot{margin:0;display:flex;align-items:center;gap:10px}.langs{margin:0}.main{padding:16px}}
@media(max-width:520px){.grid,.g2,.g3{grid-template-columns:1fr}.side nav{order:3;flex-basis:100%}.side-foot{margin-left:auto}h1{font-size:19px}}
.side-foot .logout{display:block;margin-top:4px}.side-foot .logout.on{color:#fff}.form{max-width:420px}.form label{display:block;margin:12px 0;font-size:13px;color:var(--mu)}.form input{width:100%;margin-top:4px;padding:10px 12px;border-radius:8px;border:1px solid var(--line);background:#0b1d24;color:var(--tx);font:inherit}.form button{padding:10px 18px;border:0;border-radius:8px;background:var(--ac);color:#06231c;font-weight:700;cursor:pointer}.alert.l-ok{background:#2ecc7114;border-color:var(--ok)}
@media(max-width:900px){.side-foot .logout{display:inline;margin:0}}