:root {
  --bg:#080b10; --bg2:#0c1118; --card:#11171f; --card-hi:#141b25;
  --line:#1e2834; --line-hi:#2a3747; --txt:#eaf0f6; --dim:#93a1b0; --faint:#5d6b7a;
  --accent:#38bdf8; --accent2:#818cf8; --ok:#34d399; --warn:#fbbf24; --crit:#f87171;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --shadow:0 2px 10px rgba(0,0,0,.35); --radius:14px;
}
* { box-sizing:border-box; }
html,body { height:100%; }
body {
  margin:0; color:var(--txt);
  font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:
    radial-gradient(1200px 600px at 12% -5%, #11202e 0%, transparent 55%),
    radial-gradient(1000px 500px at 95% 0%, #1a1530 0%, transparent 50%),
    var(--bg);
  background-attachment:fixed;
  min-height:100vh; display:flex; flex-direction:column;
}
main { flex:1 0 auto; }
.mono { font-family:var(--mono); }

/* full-height fill layout (e.g. live Queries page): the page is pinned to the
   viewport and the two cards scroll inside instead of growing the page. */
main.fill { display:flex; flex-direction:column; min-height:0; }
.qfill { display:flex; gap:18px; }
.qfill > .card { flex:1 1 0; min-width:0; display:flex; flex-direction:column; }
.qfill > .card > .body { flex:1; min-height:0; }
@media (min-width:821px){
  body.fixedpage { height:100vh; overflow:hidden; }
  body.fixedpage main.fill { flex:1; min-height:0; }
  body.fixedpage .qfill { flex:1; min-height:0; }
  body.fixedpage .qfill > .card { min-height:0; }
  body.fixedpage .qfill > .card > .body { max-height:none !important; }
}
@media (max-width:820px){
  .qfill { flex-direction:column; }
  .qfill > .card > .body { max-height:48vh !important; }
}

/* attention / blinking (eye-catching for critical states) */
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.28} }
.blink { animation:blink 1.1s ease-in-out infinite; }
.value.crit { animation:blink 1.15s ease-in-out infinite; }
.tbadge.c { animation:blink 1.05s ease-in-out infinite; }
.node .abadge { animation:blink 1.05s ease-in-out infinite; }
.alertbar .ab-ico { animation:blink .85s ease-in-out infinite; }
@keyframes rowflash { from{background:rgba(56,189,248,.30)} to{background:transparent} }
.flash { animation:rowflash 1.3s ease-out 1; }
.ok{color:var(--ok)} .warn{color:var(--warn)} .crit{color:var(--crit)} .dim{color:var(--dim)}
.right{text-align:right} .nowrap{white-space:nowrap}

/* header + nav */
header {
  display:flex; align-items:center; gap:18px; padding:12px 24px;
  background:linear-gradient(180deg, rgba(17,23,31,.95), rgba(10,14,20,.85));
  border-bottom:1px solid var(--line); backdrop-filter:blur(8px);
  position:sticky; top:0; z-index:20;
}
.brand { display:flex; align-items:center; gap:11px; }
.logo { width:30px; height:30px; border-radius:8px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#04131d; font-weight:800; font-size:16px; }
header h1 { font-size:15px; margin:0; font-weight:650; }
.nav { display:flex; gap:4px; }
.nav a { color:var(--dim); text-decoration:none; font-size:13px; font-weight:600; padding:6px 13px;
  border-radius:8px; transition:all .15s; }
.nav a:hover { color:var(--txt); background:var(--card-hi); }
.nav a.active { color:#04131d; background:linear-gradient(135deg,var(--accent),var(--accent2)); }
.status { display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600;
  padding:4px 11px; border-radius:999px; border:1px solid var(--line-hi); color:var(--dim);
  text-transform:uppercase; letter-spacing:.5px; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--faint); }
.status.up { color:var(--ok); border-color:rgba(52,211,153,.4); }
.status.up .dot { background:var(--ok); animation:pulse 2s infinite; }
.status.down { color:var(--crit); border-color:rgba(248,113,113,.4); }
.status.down .dot { background:var(--crit); }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(52,211,153,.5)} 70%{box-shadow:0 0 0 7px rgba(52,211,153,0)} 100%{box-shadow:0 0 0 0 rgba(52,211,153,0)} }
.spacer { flex:1; }
.hmeta { text-align:right; line-height:1.3; }
.hmeta .clock { font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; }
.hmeta .sub { font-size:11.5px; color:var(--faint); }

/* hamburger (mobile only) */
.hamburger { display:none; margin-left:auto; width:40px; height:36px; flex:none;
  background:var(--card-hi); border:1px solid var(--line-hi); border-radius:9px; cursor:pointer; padding:0; }
.hamburger span { display:block; width:18px; height:2px; margin:3px auto; border-radius:2px; background:var(--txt); }

@media (max-width:820px){
  header { flex-wrap:wrap; gap:10px 12px; padding:11px 16px; }
  .hamburger { display:block; order:2; }
  .brand { order:1; }
  .status { order:3; }
  .spacer { display:none; }
  .hmeta { display:none; }
  .nav { order:10; width:100%; flex-direction:column; gap:2px; display:none;
    background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:6px; }
  .nav.open { display:flex; }
  .nav a { padding:11px 13px; font-size:14px; }
  main { padding:14px 14px 32px; gap:14px; }
  .card > h2 { flex-wrap:wrap; gap:8px; }
  input.filter[type=text] { min-width:120px; flex:1; }
  .gauge, .gauge svg { width:92px; height:92px; }
}

main { padding:20px 24px 40px; display:grid; gap:18px; width:100%; align-content:start; }

/* alert banner */
.alertbar { position:sticky; top:59px; z-index:15; display:flex; align-items:center; gap:14px;
  padding:11px 18px; border-radius:12px; font-weight:600; font-size:13.5px;
  background:linear-gradient(180deg, rgba(248,113,113,.22), rgba(248,113,113,.12));
  border:1px solid rgba(248,113,113,.5); color:#fecaca;
  box-shadow:0 0 22px rgba(248,113,113,.25); animation:alertpulse 1.6s infinite; }
@keyframes alertpulse { 0%,100%{box-shadow:0 0 14px rgba(248,113,113,.18)} 50%{box-shadow:0 0 26px rgba(248,113,113,.4)} }
.alertbar .ab-ico { font-size:18px; }
.alertbar .ab-list { flex:1; color:#fff; font-weight:700; }
.alertbar .ab-list span { margin-right:14px; }
.alertbar button { background:rgba(0,0,0,.25); border-color:rgba(255,255,255,.2); color:#fff; }

/* gauges */
.gauges { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.gcard { background:linear-gradient(180deg,var(--card-hi),var(--card)); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); display:flex; gap:16px; align-items:center; }
.gauge { position:relative; width:112px; height:112px; flex:none; }
.gauge svg { transform:rotate(-90deg); display:block; }
.gauge .ctr { position:absolute; inset:0; display:grid; place-items:center; text-align:center; }
.gauge .ctr .num { font-size:25px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1; }
.gauge .ctr .unit { font-size:11px; color:var(--faint); margin-top:2px; }
.gmeta { min-width:0; }
.gmeta .label { font-size:11px; text-transform:uppercase; letter-spacing:.7px; color:var(--dim); font-weight:600; }
.gmeta .big { font-size:15px; font-weight:600; margin-top:3px; }
.gmeta .small { font-size:12px; color:var(--faint); margin-top:2px; }
.cores { display:grid; grid-template-columns:repeat(auto-fill,minmax(10px,1fr)); gap:3px; margin-top:9px; }
.core { height:22px; border-radius:3px; background:var(--line); position:relative; overflow:hidden; }
.core > i { position:absolute; bottom:0; left:0; right:0; display:block; transition:height .3s; }

/* stat strip */
.strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:13px 15px; box-shadow:var(--shadow); }
.stat .label { font-size:10.5px; text-transform:uppercase; letter-spacing:.7px; color:var(--dim); font-weight:600; }
.stat .value { font-size:23px; font-weight:700; margin-top:3px; font-variant-numeric:tabular-nums; }
.stat .sub { font-size:11.5px; color:var(--faint); margin-top:1px; }

/* charts */
.charts { display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:16px; }
.chart { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px 16px; }
.chart .chd { display:flex; align-items:baseline; gap:10px; margin-bottom:8px; }
.chart .ct { font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:var(--dim); font-weight:600; }
.chart .cv { font-size:18px; font-weight:700; font-variant-numeric:tabular-nums; margin-left:auto; }
.chart .legend { font-size:11px; color:var(--faint); display:flex; gap:12px; }
.chart .legend i { display:inline-block; width:9px; height:3px; border-radius:2px; vertical-align:middle; margin-right:4px; }
.chart canvas { width:100%; height:120px; display:block; }
.chart.wide { grid-column:1 / -1; }
.rangebar { display:flex; align-items:center; gap:7px; }
.rangebar button { padding:5px 13px; font-size:12.5px; font-weight:600; }
.rangebar button.active { background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#04131d; border:none; }

/* cards + tables */
.grid2 { display:grid; grid-template-columns:1.9fr 1fr; gap:18px; align-items:start; }
@media (max-width:950px){ .grid2{ grid-template-columns:1fr; } }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.card > h2 { font-size:13px; margin:0; padding:13px 16px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:10px; font-weight:650; }
.card .body { padding:12px 16px; }
.count { font-size:11px; color:var(--faint); font-weight:500; }
table { width:100%; border-collapse:collapse; font-size:12.5px; }
th,td { text-align:left; padding:7px 9px; border-bottom:1px solid var(--line); vertical-align:top; }
thead th { color:var(--dim); font-weight:600; position:sticky; top:0; background:var(--card);
  font-size:11px; text-transform:uppercase; letter-spacing:.4px; z-index:1; }
tbody tr:hover { background:var(--card-hi); }
th.sortable { cursor:pointer; user-select:none; white-space:nowrap; }
th.sortable:hover { color:var(--txt); }
th.sortable::after { content:"⇅"; opacity:.3; margin-left:5px; font-size:10px; }
th.sortable[data-dir=asc]::after { content:"▲"; opacity:1; color:var(--accent); }
th.sortable[data-dir=desc]::after { content:"▼"; opacity:1; color:var(--accent); }
td.q { font-family:var(--mono); color:var(--faint); max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tbadge { font-family:var(--mono); font-size:11px; padding:2px 7px; border-radius:6px; background:var(--line); color:var(--dim); }
.tbadge.w { background:rgba(251,191,36,.14); color:var(--warn); }
.tbadge.c { background:rgba(248,113,113,.16); color:var(--crit); }
tr.prot td { opacity:.45; }
tr.urow.sel { background:rgba(56,189,248,.12); }
tr.urow.sel td:first-child { box-shadow:inset 3px 0 var(--accent); }
.scroll { max-height:360px; overflow:auto; }
.scroll::-webkit-scrollbar { width:9px; height:9px; }
.scroll::-webkit-scrollbar-thumb { background:var(--line-hi); border-radius:6px; }

/* controls */
button { font:inherit; cursor:pointer; border-radius:7px; border:1px solid var(--line-hi);
  background:var(--card-hi); color:var(--txt); padding:4px 10px; transition:all .15s; }
button:hover { border-color:var(--accent); color:#fff; }
button.kill { border-color:rgba(248,113,113,.3); color:#fca5a5; padding:3px 9px; }
button.kill:hover { background:rgba(248,113,113,.15); border-color:var(--crit); }
button.primary { background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#04131d; border:none; font-weight:700; padding:7px 16px; }
.pill { font-size:10.5px; padding:3px 10px; border-radius:999px; border:1px solid var(--line-hi); color:var(--dim); font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.pill.on { color:var(--ok); border-color:rgba(52,211,153,.45); background:rgba(52,211,153,.08); }
.pill.dry { color:var(--warn); border-color:rgba(251,191,36,.45); background:rgba(251,191,36,.08); }
.form-row { display:flex; align-items:center; gap:10px; margin:9px 0; flex-wrap:wrap; }
.form-row > label { width:120px; color:var(--dim); font-size:12px; }
input[type=number],input[type=text] { background:var(--bg2); border:1px solid var(--line-hi); color:var(--txt); border-radius:7px; padding:6px 9px; font:inherit; }
input[type=text].wide, input[type=password].wide { flex:1; min-width:160px; }
input[type=password] { background:var(--bg2); border:1px solid var(--line-hi); color:var(--txt); border-radius:7px; padding:6px 9px; font:inherit; }
input[type=password]:focus { outline:none; border-color:var(--accent); }
select { background:var(--bg2); border:1px solid var(--line-hi); color:var(--txt); border-radius:7px; padding:6px 9px; font:inherit; cursor:pointer; }
select:focus { outline:none; border-color:var(--accent); }
input.filter { padding:5px 10px; font-size:12.5px; border-radius:7px; }
input.filter[type=text] { min-width:190px; }
.filterbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:2px; }
.filterbar .hint { font-size:11.5px; color:var(--faint); margin-left:auto; }
input:focus { outline:none; border-color:var(--accent); }
.checks { display:flex; gap:16px; flex-wrap:wrap; }
.sw { display:inline-flex; gap:7px; align-items:center; font-size:12.5px; cursor:pointer; user-select:none; }
.sw input { accent-color:var(--accent); width:15px; height:15px; }
.log { font-family:var(--mono); font-size:11.5px; }
.log > div { padding:2px 0; border-bottom:1px solid rgba(30,40,52,.5); }

/* kill-safety: arm toggle, danger button, confirm modal */
.killarm { padding:4px 10px; border:1px solid var(--line-hi); border-radius:8px; font-weight:600; }
.killarm span { color:var(--dim); }
.killarm.on { border-color:rgba(248,113,113,.55); background:rgba(248,113,113,.1); }
.killarm.on span { color:var(--crit); animation:blink 1s ease-in-out infinite; }
button.danger { border-color:rgba(248,113,113,.5); color:#fca5a5; background:rgba(248,113,113,.08); font-weight:600; }
button.danger:hover { background:rgba(248,113,113,.2); border-color:var(--crit); color:#fff; }
.modal-ov { position:fixed; inset:0; z-index:100; background:rgba(5,8,12,.72); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:20px; }
.modal-ov[hidden] { display:none; }
.modal { width:min(560px,100%); background:var(--card); border:1px solid var(--line-hi); border-radius:14px;
  box-shadow:0 12px 50px rgba(0,0,0,.6); padding:20px 22px; }
.modal h3 { margin:0 0 14px; font-size:16px; }
.modal .kmInfo { width:100%; margin-bottom:12px; }
.modal .kmInfo td { padding:4px 6px; border-bottom:1px solid var(--line); font-size:13px; }
.modal .kmQuery { background:var(--bg2); border:1px solid var(--line-hi); border-radius:8px; padding:11px 13px;
  font-size:12px; color:var(--txt); max-height:160px; overflow:auto; white-space:pre-wrap; word-break:break-word; margin:0 0 16px; }
.modal .kmActions { display:flex; gap:10px; flex-wrap:wrap; }
.modal .kmActions button { padding:8px 16px; }

/* clean single-line live feed */
.feed .fe { display:flex; align-items:center; gap:9px; padding:4px 0; border-bottom:1px solid rgba(30,40,52,.45);
  white-space:nowrap; font-size:11.5px; font-family:var(--mono); }
.feed .fe .ft { color:var(--faint); font-variant-numeric:tabular-nums; flex:none; }
.feed .fe .ftag { flex:none; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  padding:1px 7px; border-radius:5px; }
.ftag.ok2 { color:var(--ok); background:rgba(52,211,153,.13); }
.ftag.pend2 { color:var(--warn); background:rgba(251,191,36,.13); }
.ftag.kill2 { color:var(--crit); background:rgba(248,113,113,.15); }
.feed .fe .fid { color:var(--accent); flex:none; }
.feed .fe .fwho { color:var(--dim); flex:none; }
.feed .fe .fq { color:var(--faint); overflow:hidden; text-overflow:ellipsis; flex:1 1 auto; min-width:0; }
.empty { color:var(--faint); padding:14px 4px; text-align:center; font-size:12.5px; }

/* report grid */
.rep { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; }
.rep .k { font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--dim); }
.rep .v { font-size:18px; font-weight:700; font-variant-numeric:tabular-nums; margin-top:2px; }
.rep .v small { font-size:11px; color:var(--faint); font-weight:500; }

/* world map */
.mapwrap { display:grid; grid-template-columns:2.2fr 1fr; gap:18px; align-items:start; }
@media (max-width:950px){ .mapwrap{ grid-template-columns:1fr; } }
#worldMap { width:100%; aspect-ratio:2/1; display:block; background:#0a0f16; border-radius:10px; }
.geostat { display:flex; gap:22px; margin-bottom:10px; }
.geostat .v { font-size:24px; font-weight:700; }
.geostat .k { font-size:11px; color:var(--dim); text-transform:uppercase; letter-spacing:.5px; }
.demobadge { font-size:10.5px; color:var(--warn); border:1px solid rgba(251,191,36,.4); background:rgba(251,191,36,.08);
  padding:2px 9px; border-radius:999px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.flag { font-size:15px; }
.barcell { position:relative; }
.barcell > i { position:absolute; left:0; top:0; bottom:0; background:rgba(56,189,248,.14); border-radius:4px; z-index:0; }
.barcell > span { position:relative; z-index:1; }

/* service chips */
.svc { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; padding:6px 12px;
  border-radius:9px; border:1px solid var(--line-hi); background:var(--card-hi); }
.svc .d { width:8px; height:8px; border-radius:50%; }
.svc.up .d { background:var(--ok); box-shadow:0 0 7px var(--ok); }
.svc.down { border-color:rgba(248,113,113,.5); color:var(--crit); }
.svc.down .d { background:var(--crit); }
.svc b { color:var(--faint); font-weight:500; }

/* CCTV grid */
.cctv { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; }
.node { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:15px 16px;
  box-shadow:var(--shadow); cursor:pointer; transition:transform .12s, border-color .15s; display:block; color:inherit; text-decoration:none; }
.node:hover { transform:translateY(-2px); border-color:var(--accent); }
.node.warn { border-color:rgba(251,191,36,.55); box-shadow:0 0 18px rgba(251,191,36,.18); }
.node.crit { border-color:rgba(248,113,113,.6); box-shadow:0 0 20px rgba(248,113,113,.25); animation:alertpulse 1.8s infinite; }
.node.down { border-color:rgba(248,113,113,.6); opacity:.75; }
.node .nh { display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.node .nh .d { width:9px; height:9px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px var(--ok); }
.node.down .nh .d, .node.crit .nh .d { background:var(--crit); box-shadow:0 0 8px var(--crit); }
.node .nh .name { font-weight:650; font-size:14px; }
.node .nh .abadge { margin-left:auto; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:999px;
  background:rgba(248,113,113,.16); color:var(--crit); }
.node .metric { display:flex; align-items:center; gap:9px; margin:7px 0; font-size:12px; }
.node .metric .ml { width:42px; color:var(--dim); text-transform:uppercase; font-size:10px; letter-spacing:.5px; }
.node .metric .mv { width:52px; text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }
.node .mbar { flex:1; height:6px; background:var(--bg2); border-radius:4px; overflow:hidden; }
.node .mbar > i { display:block; height:100%; border-radius:4px; }
.node .foot { display:flex; gap:14px; margin-top:11px; padding-top:10px; border-top:1px solid var(--line);
  font-size:11.5px; color:var(--faint); }
.node .foot b { color:var(--txt); font-weight:600; }
.node .downmsg { color:var(--crit); font-size:12px; margin-top:8px; }