:root{--bg:#0a0d0f;--panel:#11161a;--line:#1e2a30;--red:#ff2a2a;--red2:#8b0000;--txt:#d7e0e3;--muted:#6b7a82;--ok:#19c37d}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(1200px 600px at 70% -10%,#12191d,#0a0d0f);color:var(--txt);
 font-family:Tahoma,"Segoe UI",system-ui,sans-serif;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;border-bottom:1px solid var(--line);background:#0c1114}
.brand{font-weight:800;letter-spacing:2px;font-size:20px}
.brand span{color:var(--red)} .brand b{color:var(--red)}
.topbar nav{display:flex;gap:16px;align-items:center}
.topbar .who{color:var(--muted)} .topbar .out{color:var(--red)}
.wrap{flex:1;padding:24px;max-width:1200px;margin:0 auto;width:100%}
h1{font-size:24px;margin:0 0 18px;border-right:4px solid var(--red);padding-right:12px}
h2{font-size:16px;color:#aeb9bd;margin:0 0 10px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-bottom:26px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px;transition:.15s;display:block}
.card:hover{border-color:var(--red);transform:translateY(-2px)}
.card-h{display:flex;align-items:center;gap:8px;font-size:15px}
.card-h .dot{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}
.card.down .dot{background:var(--red);box-shadow:0 0 8px var(--red)}
.card-d{color:var(--muted);font-size:13px;margin:8px 0}
.card-m{display:flex;flex-wrap:wrap;gap:10px;font-size:11px;color:#8fa0a6}
.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:right;padding:6px 8px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:600}
.muted{color:var(--muted)}
.sev-high,.sev-critical,.sev-error{color:var(--red);font-weight:700}
.sev-medium,.sev-warn{color:#e6a700}
.sev-low,.sev-info{color:var(--ok)}
ul{list-style:none;padding:0;margin:0}
ul li{padding:6px 0;border-bottom:1px solid var(--line);font-size:13px}
form label{display:block;margin:8px 0;font-size:13px;color:#aeb9bd}
form input{width:100%;margin-top:4px;background:#0a0f12;border:1px solid var(--line);color:var(--txt);padding:9px;border-radius:7px}
button{background:linear-gradient(180deg,var(--red),var(--red2));color:#fff;border:0;padding:9px 16px;border-radius:7px;cursor:pointer;font-weight:700}
button:hover{filter:brightness(1.1)}
.inline{display:inline} .inline button{padding:3px 8px;font-size:11px}
.login{max-width:360px;margin:8vh auto;background:var(--panel);border:1px solid var(--line);padding:28px;border-radius:12px}
.alert{padding:10px;border-radius:7px;margin-bottom:12px}.alert.err{background:#2a0d0d;color:#ff8a8a;border:1px solid var(--red2)}
.back{color:var(--muted);font-size:13px} .desc{color:var(--muted)}
.statusbox{background:var(--panel);border:1px solid var(--line);border-right:4px solid var(--ok);padding:12px;border-radius:8px;margin:12px 0;font-size:13px}
.statusbox.down{border-right-color:var(--red)}
.foot{text-align:center;color:var(--muted);padding:16px;border-top:1px solid var(--line);font-size:12px}

.brand-ico{height:26px;vertical-align:middle;margin-left:6px;filter:drop-shadow(0 0 4px var(--red))}
.login-logo{display:block;width:150px;margin:0 auto 10px;filter:drop-shadow(0 0 12px rgba(255,42,42,.5))}