:root{--bg:#071018;--panel:#101820;--line:#2c3d48;--text:#eef3f5;--muted:#8b9aa5;--accent:#2196f3}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font:14px Inter,system-ui,sans-serif}
a{color:inherit}
button,input,select{font:inherit}
button{cursor:pointer}
.login-wrap{min-height:100%;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 80% -10%,#102a3d 0,#071018 42%)}
.login-card{width:min(420px,100%);background:#101c25;border:1px solid var(--line);border-radius:22px;padding:32px}
.eyebrow{font-size:10px;letter-spacing:.22em;color:#748d9a}
h1{margin:8px 0 10px;font-size:28px}
h2,h3{margin:0 0 8px}
p,.page-description,.hint{color:var(--muted);line-height:1.55}
label{display:grid;gap:7px;margin:12px 0;color:#a7b5be;font-size:12px}
input,select{width:100%;background:#0b151e;color:#eef3f5;border:1px solid #283842;border-radius:10px;padding:11px 12px}
.primary{background:var(--accent);color:#071722;border:0;border-radius:10px;padding:12px 16px;font-weight:800}
.wide{width:100%}
.alert{padding:12px 14px;border-radius:10px;margin:0 0 16px}
.alert.good{background:#10251c;border:1px solid #2a6a48;color:#9fe0bf}
.alert.bad{background:#28171c;border:1px solid #74303c;color:#ff9aa7}
.shell{display:grid;grid-template-columns:240px 1fr;min-height:100%}
aside{border-right:1px solid var(--line);background:#0c151c;padding:18px 14px;display:flex;flex-direction:column}
.brand{display:flex;gap:10px;align-items:center;padding:8px 8px 18px}
.brand-mark{width:36px;height:36px;border-radius:10px;background:#12283a;color:#8fd3ff;display:grid;place-items:center;font-weight:800}
.brand b{display:block}
.brand small{color:var(--muted)}
nav a{display:block;padding:10px 12px;border-radius:10px;text-decoration:none;color:#b1bdc5;margin-bottom:4px}
nav a.active,nav a:hover{background:#112333;color:#fff}
.side-foot{margin-top:auto;color:var(--muted);font-size:12px;padding:12px 8px}
.logout{display:inline-block;margin-top:8px;color:#9fe0bf}
main{padding:22px 28px 40px}
header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:22px}
.header-pill{border:1px solid var(--line);border-radius:99px;padding:8px 12px;color:#b1bdc5}
.dot{width:7px;height:7px;border-radius:50%;background:#3dd68c;display:inline-block;margin-right:6px}
.hero{display:flex;justify-content:space-between;gap:20px;background:#101c25;border:1px solid var(--line);border-radius:18px;padding:22px;margin-bottom:18px}
.hero-orb{min-width:110px;text-align:center;background:#0b151e;border-radius:16px;padding:16px}
.hero-orb span{font-size:28px;font-weight:800}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.stats div,.quick-card,.panel{background:#101c25;border:1px solid var(--line);border-radius:16px;padding:16px}
.stats span,.quick-card small{color:var(--muted);font-size:12px}
.stats b{display:block;font-size:22px;margin-top:6px}
.page-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.quick-card{text-decoration:none;display:block}
.quick-card strong{display:block;margin:6px 0}
.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid #1a2731}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:12px}
.status{border-radius:99px;padding:3px 8px;font-size:11px}
.status.on{background:#10251c;color:#9fe0bf}
.status.off{background:#28171c;color:#ff9aa7}
.actions{display:flex;gap:6px}
.actions button,.actions .btn{border:1px solid var(--line);background:#0c1822;color:#b1bdc5;border-radius:8px;padding:7px 10px}
.empty{color:var(--muted);text-align:center;padding:24px}
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);place-items:center;z-index:20}
.modal.open{display:grid}
.modal-card{width:min(480px,92vw);background:#101c25;border:1px solid var(--line);border-radius:18px;padding:22px;position:relative}
.close{position:absolute;top:10px;right:12px;border:0;background:transparent;color:#8b9aa5;font-size:22px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.check{display:flex;align-items:center;gap:8px}
footer{margin-top:28px;color:var(--muted);font-size:12px}
@media(max-width:900px){
  .shell{grid-template-columns:1fr}
  .stats,.page-grid,.grid2{grid-template-columns:1fr}
}