:root{
  --bg:#0b101c; --bg2:#0e1524; --panel:#121a2b; --panel2:#16203a; --line:#1f2b46;
  --txt:#dbe4f3; --dim:#8494ad; --dim2:#5c6c88;
  --acc:#58e0a8; --acc2:#38b2f0; --warn:#f0b429; --bad:#ef5d7a; --vio:#9d7bf5;
  --rad:12px; --shadow:0 8px 30px rgba(3,8,20,.55);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(160deg,var(--bg) 0%,var(--bg2) 55%,#0a1c2c 100%) fixed;color:var(--txt);font-family:var(--sans);font-size:14.5px;line-height:1.45;min-height:100vh}
a{color:var(--acc2);text-decoration:none}
.boot-splash{display:flex;align-items:center;justify-content:center;height:70vh}
.spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--acc);animation:rot .8s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}

/* ---------- layout ---------- */
.shell{display:grid;grid-template-columns:218px 1fr;min-height:100vh}
.side{background:rgba(13,19,33,.86);border-right:1px solid var(--line);padding:18px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px;backdrop-filter:blur(6px)}
.logo{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.logo .lg{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#123527,#0e2a3f);display:grid;place-items:center;color:var(--acc);font-weight:800;font-size:16px;letter-spacing:-.5px;border:1px solid #1d4a3a}
.logo b{font-size:15.5px}
.logo span{display:block;font-size:11px;color:var(--dim2)}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;color:var(--dim);font-weight:500;text-decoration:none;border:1px solid transparent}
.nav a:hover{background:var(--panel);color:var(--txt)}
.nav a.on{background:linear-gradient(90deg,rgba(88,224,168,.13),rgba(56,178,240,.08));color:var(--txt);border-color:#1d3a35}
.nav .sep{margin:12px 6px 4px;font-size:10.5px;letter-spacing:.14em;color:var(--dim2);text-transform:uppercase}
.main{padding:26px 30px;max-width:1220px;width:100%}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:14px;flex-wrap:wrap}
.topbar h1{font-size:20px;margin:0;letter-spacing:-.3px}
.topbar .who{display:flex;align-items:center;gap:12px;color:var(--dim);font-size:13px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;font-size:11.5px;border:1px solid var(--line);background:var(--panel)}
.pill.ok{color:var(--acc)}.pill.err{color:var(--bad)}.pill.mut{color:var(--dim)}

/* ---------- cards/grids ---------- */
.grid{display:grid;gap:14px}
.g-kpi{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.card{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:var(--rad);padding:16px 18px;box-shadow:var(--shadow)}
.kpi .lbl{color:var(--dim);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.kpi .val{font-size:30px;font-weight:750;margin-top:6px;letter-spacing:-1px;font-family:var(--mono)}
.kpi .sub{color:var(--dim2);font-size:12px;margin-top:3px}
.row2{display:grid;grid-template-columns:1.6fr 1fr;gap:14px}
@media(max-width:980px){.row2{grid-template-columns:1fr}.shell{grid-template-columns:64px 1fr}.side .logo b,.side .logo span,.nav a .t,.nav .sep{display:none}}

/* ---------- tables ---------- */
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--rad);background:rgba(13,19,33,.6)}
table{width:100%;border-collapse:collapse;font-size:13.5px}
thead th{text-align:left;color:var(--dim);font-weight:600;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
tbody td{padding:10px 14px;border-bottom:1px solid rgba(31,43,70,.55);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:rgba(56,178,240,.05)}
.mono{font-family:var(--mono);font-size:12.8px}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:7px}
.dot.live{background:var(--acc);box-shadow:0 0 7px rgba(88,224,168,.8)}
.dot.dead{background:var(--bad)}
.dot.pause{background:var(--warn)}
.empty{padding:34px;text-align:center;color:var(--dim2)}

/* ---------- forms ---------- */
label.fl{display:block;font-size:12px;color:var(--dim);margin:12px 0 5px;letter-spacing:.04em}
input,select,textarea{width:100%;background:#0d1526;border:1px solid var(--line);color:var(--txt);border-radius:9px;padding:9px 11px;font-size:13.5px;font-family:inherit;outline:none;transition:border .15s}
input:focus,select:focus,textarea:focus{border-color:var(--acc2)}
.check{display:flex;align-items:center;gap:9px;margin:8px 0;color:var(--txt);font-size:13.5px}
.check input{width:auto}
.btn{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(135deg,#1b6f52,#155f46);border:1px solid #23876b;color:#eafff5;font-weight:600;padding:9px 16px;border-radius:10px;cursor:pointer;font-size:13.5px;font-family:inherit;transition:filter .15s, transform .05s}
.btn:hover{filter:brightness(1.12)}
.btn:active{transform:translateY(1px)}
.btn.blue{background:linear-gradient(135deg,#1b5e8f,#174a75);border-color:#2b7db5;color:#eaf6ff}
.btn.gray{background:#1a2337;border-color:var(--line);color:var(--txt)}
.btn.red{background:linear-gradient(135deg,#8f2b41,#75232f);border-color:#b6475c}
.btn.sm{padding:5px 11px;font-size:12.5px;border-radius:8px}
.btn.gh{background:transparent;border:1px dashed var(--line);color:var(--dim)}
.actions{display:flex;gap:9px;flex-wrap:wrap}

/* ---------- tabs & modals ---------- */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:14px;overflow-x:auto;padding-bottom:1px}
.tabs a{padding:8px 14px;border-radius:8px 8px 0 0;color:var(--dim);text-decoration:none;font-weight:600;font-size:13px;border:1px solid transparent;border-bottom:none;cursor:pointer;white-space:nowrap}
.tabs a.on{color:var(--txt);background:var(--panel);border-color:var(--line)}
.overlay{position:fixed;inset:0;background:rgba(5,9,18,.72);display:grid;place-items:center;z-index:50;backdrop-filter:blur(3px)}
.modal{width:min(660px,94vw);max-height:88vh;overflow:auto;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:var(--shadow)}
.modal h3{margin:0 0 4px}
.modal .hint{color:var(--dim);font-size:12.5px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media(max-width:620px){.two{grid-template-columns:1fr}}

/* ---------- code blocks ---------- */
.codeblk{position:relative}
pre.code{background:#0a1120;border:1px solid var(--line);border-radius:10px;padding:14px;overflow:auto;font-family:var(--mono);font-size:12.3px;line-height:1.55;color:#b8cbe8;white-space:pre;max-height:340px}
.copybtn{position:absolute;top:10px;right:10px;opacity:.85}

/* ---------- misc ---------- */
.bar{display:flex;align-items:center;gap:10px;margin:7px 0}
.bar .nm{width:110px;color:var(--dim);font-size:12px;text-align:right;flex:none}
.bar .track{flex:1;background:#101a30;border-radius:6px;height:16px;position:relative;overflow:hidden}
.bar .fill{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--acc),var(--acc2));border-radius:6px;opacity:.9}
.bar .v{font-family:var(--mono);font-size:11.5px;color:var(--dim);width:38px}
.feed{max-height:330px;overflow-y:auto;font-family:var(--mono);font-size:12.4px}
.feed div{padding:6px 8px;border-bottom:1px dashed rgba(31,43,70,.5);display:flex;gap:10px}
.feed .t{color:var(--dim2);flex:none}
.toast{position:fixed;bottom:20px;right:20px;background:#13233a;border:1px solid var(--line);color:var(--txt);padding:11px 16px;border-radius:11px;box-shadow:var(--shadow);z-index:99;font-size:13.5px;animation:slide .25s ease}
.toast.bad{border-color:#7e2b40}
@keyframes slide{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.badge{font-size:10.5px;padding:2px 8px;border-radius:99px;border:1px solid var(--line);color:var(--dim)}
.badge.g{color:var(--acc);border-color:#1d4a3a}.badge.o{color:var(--warn);border-color:#5b4a13}.badge.r{color:var(--bad);border-color:#5b2430}
.authwrap{max-width:420px;margin:9vh auto;padding:0 18px}
.authwrap .card{padding:28px}
.authwrap h2{margin:0 0 4px;letter-spacing:-.4px}
.authwrap .sub{color:var(--dim);margin-bottom:10px;font-size:13.5px}
canvas.spark{width:100%;height:170px;display:block}
footer.ft{color:var(--dim2);font-size:11.5px;margin-top:26px;text-align:center}
.masked{letter-spacing:2px}
.switch{position:relative;width:38px;height:21px;background:#22304e;border-radius:20px;cursor:pointer;transition:background .18s;border:1px solid var(--line)}
.switch.on{background:#1c6f52}
.switch i{position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#cfe3dd;transition:left .18s}
.switch.on i{left:19px}