:root{
  --bg:#060f22;--side:#081329;--panel:#0b1a35;--panel2:#10234a;--line:#1a3059;--text:#e9f0ff;--muted:#8ba0c6;
  --accent:#2563eb;--accent2:#3b82f6;--cyan:#22d3ee;--red:#ef4444;--green:#22c55e;--yellow:#fbbf24;--white:#fff;
  --ok-bg:#0e2a22;--ok-line:#1c6b4d;--bad-bg:#2c1420;--bad-line:#7a2a3a;--shadow:0 10px 30px #0006;
  --font:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace;
}
:root[data-theme=light]{
  --bg:#eef3fb;--side:#fff;--panel:#fff;--panel2:#f1f5fc;--line:#d7e1f1;--text:#0e1b36;--muted:#5b6d8d;
  --ok-bg:#e3f8ee;--ok-line:#8fd6b5;--bad-bg:#fde8ec;--bad-line:#f0a3b0;--shadow:0 8px 24px #1b2f5a1a;
}
*{box-sizing:border-box}
html{color-scheme:dark}:root[data-theme=light]{color-scheme:light}
body{margin:0;background:radial-gradient(1200px 600px at 80% -10%,#10285a55,transparent),var(--bg);color:var(--text);font:14.5px/1.5 var(--font);min-height:100vh}
a{color:inherit}h1,h2,h3{margin:0;line-height:1.2}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}

.app{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;background:var(--side);border-right:1px solid var(--line);padding:18px 14px;display:flex;flex-direction:column;gap:22px;z-index:30}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;padding:0 6px}
.brand b{display:block;font-size:16px}.brand small{display:block;color:var(--muted);font-size:11px;margin-top:1px}
.nav{display:grid;gap:4px}
.nav a{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;text-decoration:none;color:var(--muted);transition:background .15s,color .15s}
.nav a svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav a:hover{background:var(--panel2);color:var(--text)}
.nav a.on{background:var(--accent);color:#fff;box-shadow:0 8px 20px #2563eb55}
.side-foot{margin-top:auto;display:flex;gap:10px;align-items:flex-start;font-size:12px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.side-foot .dot{margin-top:5px}
.side-foot b{display:block;font-size:12.5px}.side-foot span{color:var(--muted)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex:none}
.on-ONLINE .dot,.dot.ONLINE{background:var(--green);box-shadow:0 0 8px var(--green)}
.on-CONNECTING .dot,.on-RECONNECTING .dot{background:var(--yellow);animation:blink 1s infinite}
.on-OFFLINE .dot{background:var(--red)}
@keyframes blink{50%{opacity:.25}}
.blink{animation:blink .7s steps(2,jump-none) infinite}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:flex-end;gap:20px;padding:12px 26px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(8px);position:sticky;top:0;z-index:20}
.menu-btn{display:none;margin-right:auto;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:7px 10px;cursor:pointer}
.clock{display:flex;align-items:center;gap:10px}
.clock b{font:700 15px var(--mono)}.clock small{display:block;color:var(--muted);font-size:11px;line-height:1.1}
.conn{display:flex;align-items:center;gap:8px;font-size:13px}
.user{display:flex;align-items:center;gap:9px;font-size:13px;text-decoration:none}
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#22d3ee);display:grid;place-items:center;font-weight:700;color:#04122b}
.banner{background:var(--bad-bg);color:#ffc9d3;border-bottom:1px solid var(--bad-line);padding:9px 26px;font-size:13.5px}
.banner[hidden]{display:none}
:root[data-theme=light] .banner{color:#7a1226}
.page{padding:24px 26px 40px;max-width:1560px;width:100%}
.page-head{margin-bottom:18px}.page-head h1{font-size:22px}.page-head p{margin:4px 0 0;color:var(--cyan);font-size:13.5px}

.card{background:linear-gradient(180deg,color-mix(in srgb,var(--panel2) 55%,var(--panel)),var(--panel));border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:var(--shadow)}
.card h2{font-size:15px;margin-bottom:14px}
.grid{display:grid;gap:14px}
.kpi{display:flex;align-items:center;gap:14px}
.kpi .ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:#2563eb26;color:#6ea8ff;flex:none}
.kpi .ico svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kpi .ico.c{background:#22d3ee22;color:var(--cyan)}.kpi .ico.o{background:#fb923c22;color:#fdba74}.kpi .ico.g{background:#22c55e22;color:#6ee7a0}.kpi .ico.r{background:#ef444426;color:#ff8a8a}
.kpi small{display:block;color:var(--muted);font-size:12.5px}
.kpi b{font-size:26px;font-weight:700;letter-spacing:-.01em}.kpi b em{font-style:normal;font-size:14px;color:var(--muted);font-weight:500;margin-left:4px}
.kpi .sub{font-size:12px;color:var(--muted)}

.badge{display:inline-block;padding:3px 10px;border-radius:7px;font:700 12px var(--mono);letter-spacing:.04em;border:1px solid var(--line);background:var(--panel2)}
.badge.run{color:#4ade80;border-color:var(--ok-line);background:var(--ok-bg)}
.badge.stop{color:#ff8a8a;border-color:var(--bad-line);background:var(--bad-bg)}
:root[data-theme=light] .badge.run{color:#0b7a45}:root[data-theme=light] .badge.stop{color:#b4233a}
.btn{border:1px solid var(--line);background:var(--panel2);padding:10px 18px;border-radius:10px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;justify-content:center;font-weight:600;transition:filter .15s,background .15s}
.btn:hover{filter:brightness(1.12)}.btn:disabled{opacity:.4;cursor:not-allowed;filter:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 8px 20px #2563eb44}
.btn.go{background:#15803d;border-color:#15803d;color:#fff}.btn.no{background:#dc2626;border-color:#dc2626;color:#fff}
.btn.ghost{background:transparent}
.lamp{display:inline-flex;gap:5px;padding:5px 7px;background:#050a14;border-radius:999px;border:1px solid #223457}
.lamp i{width:12px;height:12px;border-radius:50%;opacity:.2}
.lamp i:nth-child(1){background:var(--red)}.lamp i:nth-child(2){background:var(--yellow)}.lamp i:nth-child(3){background:var(--green)}
.lamp[data-c=R] i:nth-child(1),.lamp[data-c=Y] i:nth-child(2),.lamp[data-c=G] i:nth-child(3){opacity:1;box-shadow:0 0 10px currentColor}
.lamp[data-c=R] i:nth-child(1){color:var(--red)}.lamp[data-c=Y] i:nth-child(2){color:var(--yellow)}.lamp[data-c=G] i:nth-child(3){color:var(--green)}
.lamp.v{flex-direction:column;border-radius:12px}

label.f{display:grid;gap:6px;font-size:13px;color:var(--muted)}
input[type=text],input[type=password],input[type=number],select{background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:9px 11px;color:var(--text);width:100%}
:root[data-theme=light] input[type=text],:root[data-theme=light] input[type=password],:root[data-theme=light] input[type=number],:root[data-theme=light] select{background:#fff}
input:focus,select:focus{border-color:var(--accent2)}
input[type=range]{accent-color:var(--accent2);width:100%}
.switch{position:relative;display:inline-block;width:44px;height:24px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;background:#2a3b60;border-radius:99px;transition:.2s;cursor:pointer}
.switch span:before{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s}
.switch input:checked+span{background:var(--accent2)}.switch input:checked+span:before{transform:translateX(20px)}
.switch input:focus-visible+span{outline:2px solid var(--cyan)}
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translateX(-50%);background:#e9f0ff;color:#06122b;padding:10px 16px;border-radius:10px;font-weight:600;z-index:60;box-shadow:0 10px 30px #0008;transition:opacity .25s;max-width:90vw}
.toast.err{background:#ffd5db;color:#5a0d1e}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th,.tbl td{padding:8px 6px;text-align:left;border-bottom:1px solid var(--line)}
.tbl th{color:var(--muted);font-weight:600;font-size:12px}
.tbl td:last-child{text-align:right}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;inset:0 auto 0 0;width:260px;transform:translateX(-105%);transition:transform .25s;box-shadow:var(--shadow)}
  .sidebar.open{transform:none}
  .menu-btn{display:block}
  .page{padding:16px 14px 34px}.topbar{padding:10px 14px;gap:12px}.clock small{display:none}.user span.nm{display:none}
}