:root{
  --bg:#0a1628; --bg2:#081222; --bg3:#04121f;
  --panel:#0e1f38; --line:#1d3a5f; --line2:#274d7d;
  --cyan:#00d4ff; --cyan-dim:#4d6a8a; --blue:#0066ff;
  --txt:#d7e8f7; --txt-dim:#9fd8f5; --muted:#6f8ba8;
  --ok:#22c55e; --warn:#ffb74d; --err:#ff5d6c; --gold:#ffd75e;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:14px;
}
.hidden{display:none!important}

/* ---------- login ---------- */
#login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at 50% 30%, #0e2a4d 0%, var(--bg) 65%);
}
.login-card{
  width:380px; padding:34px 32px; background:var(--bg2);
  border:1px solid var(--line); border-radius:14px;
  box-shadow:0 0 40px rgba(0,212,255,.12), inset 0 0 60px rgba(0,102,255,.05);
}
.login-card h1{margin:0 0 4px; color:var(--cyan); font-size:24px; letter-spacing:2px}
.login-card .sub{margin:0 0 22px; color:var(--muted); font-size:12.5px; letter-spacing:1px}
.login-card label{display:block; margin:12px 0 5px; font-size:12px; color:var(--txt-dim)}
.login-card input{
  width:100%; padding:10px 12px; border-radius:8px; font-size:14px;
  background:var(--bg3); border:1px solid var(--line); color:var(--txt);
}
.login-card input:focus{outline:none; border-color:var(--cyan); box-shadow:0 0 0 2px rgba(0,212,255,.25)}
.btn{
  display:inline-block; padding:9px 18px; border-radius:8px; font-size:13.5px;
  font-weight:600; cursor:pointer; border:1px solid var(--cyan);
  background:rgba(0,212,255,.12); color:var(--cyan);
}
.btn:hover{background:rgba(0,212,255,.25)}
.btn.primary{width:100%; margin-top:20px; padding:12px}
.btn.danger{border-color:var(--err); color:var(--err); background:rgba(255,93,108,.08)}
.btn.danger:hover{background:rgba(255,93,108,.2)}
.btn.ghost{border-color:var(--line2); color:var(--txt-dim); background:transparent}
.btn:disabled{opacity:.45; cursor:default}
.login-error{margin-top:14px; color:var(--err); font-size:13px; min-height:18px}

/* ---------- app shell ---------- */
#app{display:flex; height:100vh}
#sidebar{
  width:225px; flex-shrink:0; background:var(--bg2); border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:18px 12px;
}
.brand{color:var(--cyan); font-size:19px; letter-spacing:2px; padding:0 8px 2px; font-weight:700}
.brand-sub{color:var(--muted); font-size:11px; letter-spacing:3px; padding:0 8px 18px}
.nav-item{
  display:block; width:100%; text-align:left; padding:11px 14px; margin:2px 0;
  background:none; border:1px solid transparent; border-radius:8px;
  color:var(--txt-dim); font-size:13.5px; cursor:pointer;
}
.nav-item:hover{background:rgba(0,212,255,.08); color:var(--txt)}
.nav-item.active{background:rgba(0,212,255,.12); border-color:var(--line2); color:var(--cyan)}
#sidebar .spacer{flex:1}
#admin-who{padding:10px 14px; font-size:12px; color:var(--muted); border-top:1px solid var(--line)}
#main{flex:1; overflow-y:auto; padding:28px 34px}
#page-title{margin:0 0 4px; color:var(--cyan); font-size:22px; letter-spacing:1px}
#page-desc{margin:0 0 22px; color:var(--muted); font-size:13px}

/* ---------- cards & tables ---------- */
.stat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; margin-bottom:26px}
.stat-card{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:18px; box-shadow:inset 0 0 30px rgba(0,102,255,.06);
}
.stat-card .label{font-size:11.5px; color:var(--muted); letter-spacing:1px; text-transform:uppercase}
.stat-card .value{font-size:32px; color:var(--cyan); font-weight:700; margin-top:6px}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:20px; margin-bottom:20px;
}
.card h3{margin:0 0 14px; color:var(--cyan); font-size:15px; letter-spacing:1px}
table{width:100%; border-collapse:collapse; font-size:13.5px}
th{
  text-align:left; padding:10px 12px; color:var(--muted); font-size:11.5px;
  letter-spacing:1px; text-transform:uppercase; border-bottom:1px solid var(--line2);
}
td{padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle}
tr:hover td{background:rgba(0,212,255,.04)}
td.actions{white-space:nowrap}
td.actions .btn{padding:6px 12px; font-size:12px; margin-right:6px}
.pill{
  display:inline-block; padding:3px 10px; border-radius:20px; font-size:11.5px; font-weight:600;
  border:1px solid;
}
.pill.ok{color:var(--ok); border-color:var(--ok); background:rgba(34,197,94,.08)}
.pill.warn{color:var(--warn); border-color:var(--warn); background:rgba(255,183,77,.08)}
.pill.err{color:var(--err); border-color:var(--err); background:rgba(255,93,108,.08)}
.pill.dim{color:var(--muted); border-color:var(--muted); background:transparent}
.mono{font-family:Consolas,monospace; font-size:12.5px}

/* ---------- forms ---------- */
.form-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; margin-bottom:16px}
.field label{display:block; margin-bottom:5px; font-size:12px; color:var(--txt-dim)}
.field input,.field select,.field textarea{
  width:100%; padding:9px 11px; border-radius:8px; font-size:13.5px;
  background:var(--bg3); border:1px solid var(--line); color:var(--txt);
}
.field textarea{min-height:90px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--cyan); box-shadow:0 0 0 2px rgba(0,212,255,.2);
}
.form-note{font-size:12px; color:var(--muted); margin:8px 0 0}
.err-msg{color:var(--err); font-size:13px; margin:10px 0 0; min-height:18px}
.ok-msg{color:var(--ok); font-size:13px; margin:10px 0 0; min-height:18px}

/* ---------- tickets ---------- */
.ticket-list-item{
  padding:14px 16px; border:1px solid var(--line); border-radius:10px; margin-bottom:10px;
  background:var(--bg3); cursor:pointer; display:flex; justify-content:space-between; align-items:center;
}
.ticket-list-item:hover{border-color:var(--cyan)}
.ticket-list-item .t-subject{font-weight:600}
.ticket-list-item .t-meta{font-size:12px; color:var(--muted); margin-top:4px}
.reply{
  border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:10px; background:var(--bg3);
}
.reply .r-who{font-size:12px; color:var(--cyan); margin-bottom:6px; letter-spacing:1px}
.reply .r-body{font-size:13.5px; white-space:pre-wrap}
.reply .r-when{font-size:11.5px; color:var(--muted); margin-top:8px}
#back-btn{margin-bottom:16px}

/* ---------- telemetry charts ---------- */
.chart-box{margin-bottom:26px}
.chart-box h4{margin:0 0 8px; color:var(--txt-dim); font-size:13px; letter-spacing:1px}
canvas.chart{
  width:100%; height:260px; background:var(--bg3);
  border:1px solid var(--line); border-radius:10px;
}
.chart-legend{font-size:12px; color:var(--muted); margin-top:6px}

/* ---------- misc ---------- */
.toolbar{display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; align-items:center}
.toolbar input,.toolbar select{
  padding:9px 11px; border-radius:8px; background:var(--bg3);
  border:1px solid var(--line); color:var(--txt); font-size:13.5px;
}
/* ---------- feature flags ---------- */
.flags-box{display:flex; flex-direction:column; gap:8px; margin:12px 0}
.flag-row{display:flex; align-items:center; gap:10px; padding:8px 12px;
  border:1px solid var(--line); border-radius:8px; background:var(--bg3);
  cursor:pointer; font-size:13.5px}
.flag-row input{width:16px; height:16px; accent-color:var(--cyan)}
.empty{color:var(--muted); padding:24px; text-align:center; font-size:13.5px}
.toast{
  position:fixed; bottom:26px; right:26px; padding:13px 20px; border-radius:10px;
  background:var(--bg2); border:1px solid var(--cyan); color:var(--txt);
  box-shadow:0 0 24px rgba(0,212,255,.3); z-index:999; font-size:13.5px; max-width:340px;
}
.toast.err{border-color:var(--err)}
/* ---------- teams ---------- */
.team-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:4px}
.team-head h3{margin:0}
.muted{color:var(--muted); font-size:13px}
@media(max-width:800px){
  #sidebar{width:64px} .brand,.brand-sub,#admin-who{display:none}
  .nav-item{padding:11px 0; text-align:center; font-size:16px}
  #main{padding:18px}
}
.kv{display:grid;grid-template-columns:140px 1fr;gap:6px 12px;margin:10px 0}
.kv .k{color:var(--muted);font-size:13px}
.kv .v{font-size:14px}