:root{
  --sidebar:#1b1f2e; --sidebar-2:#262c40; --sidebar-line:#333a54;
  --accent:#4f46e5; --accent-2:#6366f1; --accent-ink:#fff;
  --bg:#f2f4f7; --card:#fff; --ink:#1b2330; --ink-2:#5a6577; --ink-3:#8a94a4;
  --border:#e3e8ef; --border-2:#d6dce5;
  --green:#22a06b; --red:#e0483d; --amber:#e0a63a; --blue:#2f7ff0;
  --shadow:0 1px 2px rgba(17,24,39,.04),0 6px 20px -10px rgba(17,24,39,.14);
  --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);font-size:14px}
button{font-family:inherit;cursor:pointer}
a{color:var(--blue);text-decoration:none}
[hidden]{display:none!important}

/* ---------- Login ---------- */
.login{position:fixed;inset:0;display:grid;place-items:center;
  background:radial-gradient(1200px 600px at 70% -10%,#3a3f49,#20242b)}
.login-card{background:#fff;border-radius:16px;padding:34px 30px;width:340px;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:14px}
.login-logo{font-weight:800;letter-spacing:.06em;font-size:20px}
.login-logo .mark,.logo .mark{background:var(--accent);color:#fff;padding:2px 7px;border-radius:6px;margin-right:1px}
.login-sub{margin:-6px 0 6px;color:var(--ink-3);font-size:13px}
.login-card label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:var(--ink-2)}
.login-card input{padding:10px 12px;border:1px solid var(--border-2);border-radius:9px;font-size:14px}
.login-card button{background:var(--accent);color:#fff;border:0;padding:11px;border-radius:9px;font-weight:700;font-size:15px}
.login-err{color:var(--red);font-size:13px;min-height:16px;text-align:center}

/* ---------- Shell ---------- */
.app{display:flex;height:100vh;overflow:hidden}
.sidebar{width:210px;flex:none;background:var(--sidebar);color:#c7cdd6;display:flex;flex-direction:column;overflow:hidden}
.logo{display:flex;align-items:center;gap:2px;font-weight:800;letter-spacing:.04em;padding:16px 16px;font-size:15px;color:#fff}
.nav{flex:1;overflow-y:auto;padding:6px 0}
.nav::-webkit-scrollbar{width:8px}.nav::-webkit-scrollbar-thumb{background:#3a404a;border-radius:8px}
.nav-item{display:flex;align-items:center;gap:11px;padding:10px 16px;color:#aab2be;font-weight:600;font-size:13px;cursor:pointer;border-left:3px solid transparent}
.nav-item:hover{background:var(--sidebar-2);color:#fff}
.nav-item.active{background:var(--sidebar-2);color:#fff;border-left-color:var(--accent)}
.nav-item .ic{width:18px;text-align:center;opacity:.9;font-size:15px}
.nav-foot{padding:10px 16px;font-size:10.5px;color:#6b7480;border-top:1px solid var(--sidebar-line)}

.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{height:58px;flex:none;background:linear-gradient(100deg,var(--accent),var(--accent-2));
  color:#fff;display:flex;align-items:center;gap:14px;padding:0 18px}
.topbar h1{font-size:19px;font-weight:700;margin:0;flex:1;letter-spacing:.01em}
.icon-btn{background:rgba(255,255,255,.16);border:0;color:#fff;width:34px;height:34px;border-radius:8px;font-size:16px}
.icon-btn:hover{background:rgba(255,255,255,.28)}
.top-right{display:flex;align-items:center;gap:12px}
.live-dot{width:9px;height:9px;border-radius:50%;background:#7CFFA0;box-shadow:0 0 0 3px rgba(124,255,160,.25)}
.live-dot.off{background:#ffd27c;box-shadow:0 0 0 3px rgba(255,210,124,.25)}
.admin-chip{display:flex;align-items:center;gap:8px}
.avatar{width:34px;height:34px;border-radius:50%;background:#fff;color:var(--accent);display:grid;place-items:center;font-weight:800;font-size:13px}
.me-name{font-size:13px;font-weight:700;line-height:1.1}.me-role{font-size:11px;opacity:.85}
.view{flex:1;overflow-y:auto;padding:22px}

/* ---------- Common UI ---------- */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.toolbar .spacer{flex:1}
.pill{background:#fff;border:1px solid var(--border);border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.pill b{color:var(--ink)}
.btn{background:var(--accent);color:#fff;border:0;border-radius:9px;padding:9px 15px;font-weight:700;font-size:13px}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--border-2)}
.btn.sm{padding:6px 11px;font-size:12px}
select,input[type=text],input[type=date],input[type=number],input[type=email]{font-family:inherit;font-size:13px;padding:8px 10px;border:1px solid var(--border-2);border-radius:9px;background:#fff}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:18px}
.stat{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.stat .n{font-size:28px;font-weight:800;letter-spacing:-.02em}
.stat .k{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin-top:4px}
.stat .n.g{color:var(--green)}.stat .n.r{color:var(--red)}.stat .n.o{color:var(--accent)}.stat .n.b{color:var(--blue)}

.panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:18px;overflow:hidden}
.panel-h{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border)}
.panel-h h3{margin:0;font-size:14px;font-weight:700}
.panel-h .spacer{flex:1}
.panel-b{padding:14px 18px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.grid2,.grid3{grid-template-columns:1fr}}

table{width:100%;border-collapse:collapse;font-size:13px}
thead th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);
  font-weight:700;padding:10px 12px;border-bottom:1px solid var(--border-2);white-space:nowrap}
tbody td{padding:11px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
tbody tr:hover{background:#fafbfc}
.tbl-wrap{overflow-x:auto}
.emp{display:flex;align-items:center;gap:9px}
.emp .av{width:28px;height:28px;border-radius:50%;background:#e9edf3;color:var(--ink-2);display:grid;place-items:center;font-weight:700;font-size:11px;flex:none}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--ink-2)}
.tag{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:700}
.tag.on{background:#e4f7ee;color:var(--green)} .tag.off{background:#f1f3f6;color:var(--ink-3)}
.tag.idle{background:#fdf1dc;color:var(--amber)}
.tag.prod{background:#e4f7ee;color:var(--green)}.tag.unprod{background:#fdeceb;color:var(--red)}.tag.neu{background:#eef1f5;color:var(--ink-3)}
.sev{font-weight:800}.sev.hi{color:var(--red)}.sev.md{color:var(--amber)}.sev.lo{color:var(--ink-2)}
.bar{height:8px;background:#eef1f5;border-radius:6px;overflow:hidden;min-width:90px}
.bar>span{display:block;height:100%;background:var(--accent)}
.spark{display:flex;align-items:flex-end;gap:1px;height:24px}
.spark i{width:3px;background:var(--accent);opacity:.75;border-radius:1px}
.muted{color:var(--ink-3)}
.right{text-align:right}
.tabs{display:flex;gap:4px;margin-bottom:14px;flex-wrap:wrap}
.tabs .t{padding:8px 13px;border-radius:8px 8px 0 0;font-size:12.5px;font-weight:700;color:var(--ink-2);cursor:pointer;border-bottom:2px solid transparent}
.tabs .t.active{color:var(--accent);border-bottom-color:var(--accent)}
.toggle{position:relative;width:40px;height:22px;background:#cdd4de;border-radius:999px;cursor:pointer;transition:.15s}
.toggle.on{background:var(--green)}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:50%;transition:.15s}
.toggle.on::after{left:20px}
.empty{padding:40px;text-align:center;color:var(--ink-3)}
.shot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.shot{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#fff}
.shot img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover;background:#eef1f5}
.shot .cap{padding:7px 9px;font-size:11px;color:var(--ink-2)}
.modal-bg{position:fixed;inset:0;background:rgba(15,20,28,.55);display:grid;place-items:center;z-index:50;padding:20px}
.modal{background:#fff;border-radius:14px;width:min(520px,94vw);max-height:90vh;overflow:auto;box-shadow:0 30px 80px -20px rgba(0,0,0,.5)}
.modal-h{padding:16px 20px;border-bottom:1px solid var(--border);font-weight:700;display:flex}
.modal-b{padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.modal-b label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:var(--ink-2)}
.field-row{display:flex;gap:10px}.field-row>*{flex:1}
.note{background:#fff8ec;border:1px solid #f3e2c0;color:#8a6d2f;border-radius:10px;padding:11px 13px;font-size:12.5px;margin-bottom:16px}
code.k{background:#eef1f5;padding:2px 6px;border-radius:5px;font-family:ui-monospace,monospace;font-size:12px}