*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg0:#02060E;--bg1:#060D1A;--bg2:#091422;--bg3:#0D1C30;
  --surface:rgba(9,20,34,0.92);--glass:rgba(30,100,200,0.05);
  --b1:rgba(30,120,255,0.12);--b2:rgba(30,120,255,0.25);--b3:rgba(30,120,255,0.5);
  --blue:#1E78FF;--blue-dim:rgba(30,120,255,0.7);--blue-glow:rgba(30,120,255,0.2);
  --cyan:#00D4FF;--cyan-glow:rgba(0,212,255,0.15);
  --green:#00E887;--green-dim:rgba(0,232,135,0.7);--green-glow:rgba(0,232,135,0.12);
  --red:#FF3A5C;--red-dim:rgba(255,58,92,0.7);--red-glow:rgba(255,58,92,0.12);
  --amber:#FFAA00;--amber-glow:rgba(255,170,0,0.12);
  --violet:#9B6DFF;
  --t1:#EDF2FF;--t2:rgba(180,210,255,0.7);--t3:rgba(120,160,210,0.45);--t4:rgba(80,120,180,0.3);
  --mono:'IBM Plex Mono',monospace;--display:'Barlow Condensed',sans-serif;--body:'Barlow',sans-serif;
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:20px;
  --sidebar-w:62px;
  --ease:cubic-bezier(.4,0,.2,1);
  --header-bg:rgba(2,6,14,0.85);
  --sidebar-bg:linear-gradient(180deg,rgba(6,13,26,.98),rgba(3,8,18,.99));
  --card-shadow:0 8px 32px rgba(0,0,0,.3);
}

:root[data-theme="light"]{
  --bg0:#F4F6FC;--bg1:#FFFFFF;--bg2:#EBF0F9;--bg3:#DFE6F5;
  --surface:#FFFFFF;--glass:rgba(30,100,200,0.04);
  --b1:rgba(30,90,200,0.15);--b2:rgba(30,90,200,0.3);--b3:rgba(30,90,200,0.55);
  --blue:#1E66FF;--blue-dim:rgba(30,102,255,0.8);--blue-glow:rgba(30,102,255,0.15);
  --cyan:#009BBF;--cyan-glow:rgba(0,155,191,0.12);
  --green:#04A760;--green-dim:rgba(4,167,96,0.8);--green-glow:rgba(4,167,96,0.12);
  --red:#E11D48;--red-dim:rgba(225,29,72,0.8);--red-glow:rgba(225,29,72,0.12);
  --amber:#D97706;--amber-glow:rgba(217,119,6,0.12);
  --violet:#8B5CF6;
  --t1:#0F172A;--t2:#334155;--t3:#64748B;--t4:#94A3B8;
  --header-bg:rgba(255,255,255,0.92);
  --sidebar-bg:linear-gradient(180deg,#FFFFFF,#F1F5F9);
  --card-shadow:0 8px 24px rgba(15,23,42,.06);
}

:root[data-theme="cyber"]{
  --bg0:#050014;--bg1:#0D0028;--bg2:#16003B;--bg3:#210052;
  --surface:rgba(13,0,40,0.94);--glass:rgba(255,0,212,0.06);
  --b1:rgba(255,0,212,0.2);--b2:rgba(255,0,212,0.4);--b3:rgba(255,0,212,0.7);
  --blue:#00F0FF;--blue-dim:rgba(0,240,255,0.8);--blue-glow:rgba(0,240,255,0.25);
  --cyan:#FF00D4;--cyan-glow:rgba(255,0,212,0.2);
  --green:#00FF88;--green-dim:rgba(0,255,136,0.8);--green-glow:rgba(0,255,136,0.2);
  --red:#FF0055;--red-dim:rgba(255,0,85,0.8);--red-glow:rgba(255,0,85,0.2);
  --amber:#FFB800;--amber-glow:rgba(255,184,0,0.2);
  --violet:#BD00FF;
  --t1:#FFFFFF;--t2:rgba(230,200,255,0.8);--t3:rgba(180,140,220,0.6);--t4:rgba(140,100,180,0.4);
  --header-bg:rgba(5,0,20,0.9);
  --sidebar-bg:linear-gradient(180deg,#0D0028,#050014);
  --card-shadow:0 8px 32px rgba(255,0,212,.15);
}

html,body{height:100%;background:var(--bg0);color:var(--t1);font-family:var(--body);overflow-x:hidden;font-size:14px;transition:background-color .3s var(--ease),color .3s var(--ease);}
body, .sidebar, .header, .panel, .kpi, .pro-input, .lat-row, .svc-tbl, .modal, .modal-back{transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease);}

/* ─── BG LAYERS ─── */
#bg-grid{position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--b1) 1px,transparent 1px),
    linear-gradient(90deg,var(--b1) 1px,transparent 1px);
  background-size:48px 48px;opacity:0.6;}
#bg-glow{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 55% 40% at 75% 15%,var(--blue-glow) 0%,transparent 65%),
    radial-gradient(ellipse 35% 50% at 5% 85%,var(--cyan-glow) 0%,transparent 55%),
    radial-gradient(ellipse 25% 30% at 50% 50%,var(--glass) 0%,transparent 70%);}

/* ─── SIDEBAR ─── */
.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);
  background:var(--sidebar-bg);
  border-right:1px solid var(--b1);z-index:200;
  display:flex;flex-direction:column;align-items:center;padding:16px 0 20px;gap:4px;}
.s-logo{width:36px;height:36px;border-radius:10px;margin-bottom:20px;
  background:linear-gradient(135deg,var(--blue),#0040CC);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:14px;font-weight:800;color:#fff;letter-spacing:.5px;
  box-shadow:0 0 24px rgba(30,120,255,0.45),0 0 60px rgba(30,120,255,0.15);}
.s-btn{width:40px;height:40px;border-radius:var(--r-sm);border:none;background:transparent;
  color:var(--t3);cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:16px;transition:all .2s var(--ease);position:relative;}
.s-btn:hover{background:var(--glass);color:var(--blue);}
.s-btn.act{background:rgba(30,120,255,0.12);color:var(--blue);
  box-shadow:inset 0 0 0 1px var(--b2);}
.s-btn.act::before{content:'';position:absolute;left:-1px;top:50%;transform:translateY(-50%);
  width:3px;height:18px;background:var(--blue);border-radius:0 3px 3px 0;
  box-shadow:0 0 10px var(--blue);}
.s-btn svg{width:16px;height:16px;}
.s-spacer{flex:1;}
.s-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#1a3a7a,#0d2050);
  border:1px solid var(--b2);display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:var(--blue);font-family:var(--mono);}

/* ─── APP ─── */
.app{margin-left:var(--sidebar-w);min-height:100vh;position:relative;z-index:1;}

/* ─── ALERT BANNER ─── */
.alert-banner{
  background:linear-gradient(90deg,rgba(255,58,92,0.15),rgba(255,58,92,0.08),transparent);
  border-bottom:1px solid rgba(255,58,92,0.25);
  padding:8px 28px;display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:11px;color:var(--red);
  display:none; /* hidden by default */
}
.alert-banner-dot{width:6px;height:6px;border-radius:50%;background:var(--red);
  animation:pulse-red 1.2s infinite;}
@keyframes pulse-red{0%,100%{box-shadow:0 0 0 0 rgba(255,58,92,.6);}50%{box-shadow:0 0 0 6px rgba(255,58,92,0);}}
.alert-banner-sep{width:1px;height:12px;background:rgba(255,58,92,0.3);}
.alert-banner-text{color:var(--t2);}

/* ─── HEADER ─── */
.header{display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px;border-bottom:1px solid var(--b1);
  background:var(--header-bg);backdrop-filter:blur(24px);
  position:sticky;top:0;z-index:100;}
.h-left{display:flex;align-items:center;gap:16px;}
.h-title{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.2px;}
.h-sub{font-size:11px;color:var(--t3);font-family:var(--mono);margin-top:1px;}
.h-right{display:flex;align-items:center;gap:8px;}
.live-chip{display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;
  background:rgba(0,232,135,0.08);border:1px solid rgba(0,232,135,0.2);
  font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:2px;color:var(--green);}
.live-chip-dot{width:5px;height:5px;border-radius:50%;background:var(--green);animation:pulse-g 1.6s infinite;}
@keyframes pulse-g{0%,100%{box-shadow:0 0 0 0 rgba(0,232,135,.6);}50%{box-shadow:0 0 0 5px rgba(0,232,135,0);}}
.theme-btn {
  display: flex; align-items: center; gap: 6px; padding: 6px 12px;
  border-radius: 20px; border: 1px solid var(--b2);
  background: var(--glass); color: var(--t1);
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  cursor: pointer; transition: all 0.25s var(--ease);
}
.theme-btn:hover {
  background: var(--blue-glow); border-color: var(--blue);
  transform: translateY(-1px); box-shadow: 0 4px 14px var(--blue-glow);
}
.hbtn{padding:7px 14px;border-radius:var(--r-sm);font-size:11px;font-weight:600;
  cursor:pointer;transition:all .2s;font-family:var(--body);letter-spacing:.3px;
  display:flex;align-items:center;gap:6px;}
.hbtn-ghost{border:1px solid var(--b1);background:transparent;color:var(--t2);}
.hbtn-ghost:hover{border-color:var(--b2);color:var(--blue);}
.hbtn-prim{border:1px solid var(--b2);background:rgba(30,120,255,0.12);color:var(--blue);}
.hbtn-prim:hover{background:rgba(30,120,255,0.2);}
.clock-box{font-family:var(--mono);font-size:11px;color:var(--t3);
  padding:5px 12px;border:1px solid var(--b1);border-radius:var(--r-sm);letter-spacing:1px;}
.region-sel{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--r-sm);
  color:var(--t2);font-family:var(--body);font-size:11px;padding:6px 10px;cursor:pointer;outline:none;}
.region-sel:focus{border-color:var(--b2);}

/* ─── TABS ─── */
.main-tab { display: none; padding:20px 28px; flex-direction:column; gap:20px; }
.main-tab.act { display: flex; animation: fadein 0.3s var(--ease); }
@keyframes fadein { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

/* ─── KPI ROW ─── */
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.kpi{background:var(--surface);border:1px solid var(--b1);border-radius:var(--r-lg);
  padding:18px 20px;position:relative;
  transition:border-color .3s,transform .2s,box-shadow .3s;cursor:default;
  backdrop-filter:blur(12px);}
.kpi:hover{border-color:var(--b2);transform:translateY(-1px);box-shadow:0 8px 32px rgba(0,0,0,.3);}
.kpi-accent-line{position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent 0%,var(--ac,var(--blue)) 40%,var(--ac,var(--blue)) 60%,transparent 100%);}
.kpi-icon{position:absolute;right:16px;top:16px;font-size:22px;opacity:0.12;}
.kpi-label{font-size:9px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--t3);margin-bottom:8px;display:flex;align-items:center;gap:6px;font-family:var(--mono);}
.kpi-val{font-family:var(--display);font-size:38px;font-weight:700;line-height:1;letter-spacing:-.5px;
  color:var(--vc,var(--blue));}
.kpi-delta{display:inline-flex;align-items:center;gap:4px;margin-top:6px;
  padding:2px 7px;border-radius:4px;font-size:10px;font-family:var(--mono);font-weight:500;}
.kpi-delta.up{background:rgba(0,232,135,0.1);color:var(--green);}
.kpi-delta.down{background:rgba(255,58,92,0.1);color:var(--red);}
.kpi-delta.neutral{background:rgba(30,120,255,0.1);color:var(--blue);}
.kpi-bar{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(30,120,255,0.06);}
.kpi-bar-fill{height:100%;background:var(--ac,var(--blue));opacity:.4;transition:width 1.5s var(--ease);}

/* ─── GRID 3-COL ─── */
.row2{display:grid;grid-template-columns:1fr 1fr 340px;gap:16px;}
.row3{display:grid;grid-template-columns:1fr 320px;gap:16px;}

/* ─── PANEL ─── */
.panel{background:var(--surface);border:1px solid var(--b1);border-radius:var(--r-lg);
  backdrop-filter:blur(12px);}
.ph{padding:14px 20px;border-bottom:1px solid var(--b1);
  display:flex;align-items:center;justify-content:space-between;}
.ph-title{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--t2);display:flex;align-items:center;gap:8px;}
.ph-icon{color:var(--blue);}
.ph-badge{font-family:var(--mono);font-size:9px;padding:2px 8px;border-radius:4px;
  font-weight:700;letter-spacing:1.5px;}
.ph-badge.live{background:rgba(0,232,135,0.12);color:var(--green);border:1px solid rgba(0,232,135,.2);}
.ph-badge.warn{background:rgba(255,58,92,0.12);color:var(--red);}
.pb{padding:16px 20px;}

/* ─── LATENCY MATRIX ─── */
.lat-row{display:grid;grid-template-columns:155px 1fr 72px;
  align-items:center;gap:12px;padding:7px 4px;
  border-radius:var(--r-sm);transition:background .2s;cursor:default;}
.lat-row:hover{background:rgba(30,120,255,0.04);}
.lat-name{font-size:11px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lat-track{height:3px;background:rgba(30,120,255,0.08);border-radius:2px;overflow:hidden;position:relative;}
.lat-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,rgba(30,120,255,0.4),var(--cyan));
  transition:width 1.2s var(--ease);}
.lat-fill.hot{background:linear-gradient(90deg,rgba(255,170,0,0.5),var(--amber));}
.lat-ms{font-family:var(--mono);font-size:10px;color:var(--cyan);text-align:right;}

/* ─── UPTIME HEATMAP ─── */
.heatmap{display:flex;flex-direction:column;gap:8px;}
.hm-label{font-family:var(--mono);font-size:8px;color:var(--t4);letter-spacing:1px;}
.hm-grid{display:flex;gap:2px;}
.hm-cell{width:10px;height:10px;border-radius:2px;cursor:pointer;transition:transform .15s;}
.hm-cell:hover{transform:scale(1.3);}
.hm-legend{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9px;color:var(--t4);}
.hm-leg-cell{width:8px;height:8px;border-radius:1px;}

/* ─── INCIDENT FEED ─── */
.inc-list{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow-y:auto;}
.inc-item{padding:12px 14px;border-radius:var(--r-sm);border:1px solid;position:relative;overflow:hidden;
  transition:transform .2s,border-color .2s;}
.inc-item:hover{transform:translateX(2px);}
.inc-item.crit{background:rgba(255,58,92,0.05);border-color:rgba(255,58,92,0.2);}
.inc-item.warn{background:rgba(255,170,0,0.05);border-color:rgba(255,170,0,0.2);}
.inc-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;}
.inc-item.crit::before{background:var(--red);}
.inc-item.warn::before{background:var(--amber);}
.inc-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.inc-name{font-size:12px;font-weight:700;}
.inc-tag{font-size:8px;font-weight:800;letter-spacing:1.5px;padding:2px 7px;
  border-radius:4px;font-family:var(--mono);text-transform:uppercase;}
.inc-tag.down{background:rgba(255,58,92,0.2);color:var(--red);}
.inc-tag.warn{background:rgba(255,170,0,0.2);color:var(--amber);}
.inc-msg{font-size:11px;color:var(--t3);line-height:1.5;}
.inc-time{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:9px;color:var(--t4);font-family:var(--mono);}
.inc-elapsed{padding:1px 6px;background:rgba(255,255,255,0.06);border-radius:3px;}

/* ─── SERVICE TABLE ─── */
.svc-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.svc-search{flex:1;position:relative;}
.svc-search input{width:100%;background:rgba(30,120,255,0.04);border:1px solid var(--b1);
  border-radius:var(--r-sm);padding:9px 14px 9px 36px;color:var(--t1);
  font-size:12px;font-family:var(--body);outline:none;transition:border .2s;}
.svc-search input:focus{border-color:var(--b2);}
.svc-search input::placeholder{color:var(--t4);}
.svc-search-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--t4);font-size:12px;pointer-events:none;}
.filter-chip{padding:5px 12px;border-radius:20px;font-size:10px;font-weight:600;cursor:pointer;
  border:1px solid var(--b1);background:transparent;color:var(--t3);
  transition:all .2s;font-family:var(--mono);}
.filter-chip:hover,.filter-chip.sel{border-color:var(--b2);background:rgba(30,120,255,0.1);color:var(--blue);}
.filter-chip.red.sel{border-color:rgba(255,58,92,.35);background:rgba(255,58,92,0.1);color:var(--red);}

.svc-tbl{width:100%;border-collapse:collapse;}
.svc-tbl thead tr{border-bottom:1px solid var(--b1);}
.svc-tbl th{font-family:var(--mono);font-size:8px;font-weight:600;letter-spacing:2px;
  text-transform:uppercase;color:var(--t4);padding:7px 12px;text-align:left;cursor:pointer;
  user-select:none;transition:color .2s;white-space:nowrap;}
.svc-tbl th:hover{color:var(--blue);}
.svc-tbl th.sort-asc::after{content:' ↑';}
.svc-tbl th.sort-desc::after{content:' ↓';}
.svc-tbl tbody tr{border-bottom:1px solid rgba(30,120,255,0.04);
  transition:background .15s;cursor:pointer;}
.svc-tbl tbody tr:hover{background:rgba(30,120,255,0.04);}
.svc-tbl td{padding:11px 12px;vertical-align:middle;}
.td-name{font-size:12px;font-weight:600;margin-bottom:2px;}
.td-url{font-size:9px;color:var(--t4);font-family:var(--mono);}
.scope-tag{display:inline-block;padding:2px 8px;border-radius:4px;
  font-size:8px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  border:1px solid var(--b1);color:var(--t4);font-family:var(--mono);}
.sla-bar-wrap{width:80px;height:4px;background:rgba(255,255,255,0.06);border-radius:2px;overflow:hidden;}
.sla-bar{height:100%;border-radius:2px;transition:width 1s var(--ease);}
.sla-pct{font-family:var(--mono);font-size:9px;color:var(--t3);margin-top:2px;}

.spark30{display:flex;gap:1.5px;align-items:flex-end;height:20px;}
.sp-bar{width:3px;border-radius:1px;transition:height .4s;}
.sp-up{background:var(--green);opacity:.8;}
.sp-down{background:var(--red);opacity:.9;}

.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;
  border-radius:5px;font-size:9px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;font-family:var(--mono);}
.pill.online{background:rgba(0,232,135,0.09);border:1px solid rgba(0,232,135,.2);color:var(--green);}
.pill.down{background:rgba(255,58,92,0.09);border:1px solid rgba(255,58,92,.2);color:var(--red);}
.pill.degraded{background:rgba(255,170,0,0.09);border:1px solid rgba(255,170,0,.2);color:var(--amber);}
.pill-dot{width:4px;height:4px;border-radius:50%;background:currentColor;}
.pill.down .pill-dot{animation:blink .9s step-start infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.2;}}

.lat-td{font-family:var(--mono);font-size:11px;text-align:right;}

/* ─── CHART CANVAS ─── */
.chart-wrap{padding:0 16px 16px;position:relative;}
canvas{display:block;}
.chart-yaxis{position:absolute;left:20px;top:0;display:flex;flex-direction:column;
  justify-content:space-between;height:calc(100% - 20px);
  font-family:var(--mono);font-size:8px;color:var(--t4);pointer-events:none;}
.chart-xaxis{display:flex;justify-content:space-between;padding:4px 4px 0;
  font-family:var(--mono);font-size:8px;color:var(--t4);}

/* ─── WORLD MAP (SVG) ─── */
.world-wrap{padding:12px 16px 14px;position:relative;}
.map-node{cursor:pointer;transition:r .2s;}
.map-node circle{transition:r .2s,opacity .2s;}
.map-node:hover circle{r:6;}
.node-ring{animation:ping 2s ease-out infinite;}
@keyframes ping{0%{r:6;opacity:.6;}100%{r:16;opacity:0;}}

/* ─── MODAL ─── */
.modal-back{position:fixed;inset:0;z-index:500;
  background:rgba(1,4,10,.88);backdrop-filter:blur(12px);
  display:none;align-items:center;justify-content:center;}
.modal-back.open{display:flex;}
.modal{background:linear-gradient(135deg,rgba(6,14,28,.99),rgba(4,10,22,.99));
  border:1px solid var(--b2);border-radius:var(--r-xl);width:660px;max-width:95vw;
  max-height:90vh;overflow-y:auto;
  box-shadow:0 0 80px rgba(30,100,200,0.25),0 0 200px rgba(30,100,200,0.08);
  animation:mdin .22s var(--ease);}
@keyframes mdin{from{opacity:0;transform:scale(.96) translateY(14px);}to{opacity:1;transform:none;}}
.modal-hd{padding:22px 24px 18px;border-bottom:1px solid var(--b1);
  display:flex;align-items:flex-start;justify-content:space-between;position:sticky;top:0;
  background:rgba(6,14,28,.98);z-index:10;}
.modal-hd-info{}
.modal-title{font-family:var(--display);font-size:22px;font-weight:700;}
.modal-meta{display:flex;align-items:center;gap:10px;margin-top:5px;}
.modal-url{font-family:var(--mono);font-size:10px;color:var(--t4);}
.modal-status-chip{display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:5px;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:1px;}
.mclose{width:30px;height:30px;border-radius:var(--r-sm);border:1px solid var(--b1);
  background:transparent;color:var(--t3);cursor:pointer;font-size:14px;
  display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;}
.mclose:hover{border-color:var(--red);color:var(--red);}
.modal-tabs{display:flex;gap:0;border-bottom:1px solid var(--b1);}
.mtab{padding:11px 20px;font-size:11px;font-weight:600;cursor:pointer;border:none;
  background:transparent;color:var(--t3);border-bottom:2px solid transparent;
  transition:all .2s;font-family:var(--body);}
.mtab:hover{color:var(--t1);}
.mtab.act{color:var(--blue);border-bottom-color:var(--blue);}
.mtab-panel{padding:20px 24px;display:none;}
.mtab-panel.act{display:block;}
.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.m-card{background:rgba(30,120,255,0.03);border:1px solid var(--b1);
  border-radius:var(--r-md);padding:14px 16px;}
.m-card-title{font-family:var(--mono);font-size:8px;font-weight:600;letter-spacing:2px;
  text-transform:uppercase;color:var(--t3);margin-bottom:12px;
  display:flex;align-items:center;gap:6px;}
.mc-icon{font-size:11px;}
.m-stat{font-family:var(--display);font-size:28px;font-weight:700;color:var(--t1);}
.m-stat-unit{font-size:14px;font-weight:400;color:var(--t3);}
.m-stat-sub{font-size:10px;color:var(--t4);font-family:var(--mono);margin-top:4px;}
.nominal{display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:70px;gap:6px;}
.nominal-ico{font-size:22px;}
.nominal-txt{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:2px;color:var(--green);}
.incident-txt{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:1px;color:var(--red);}

/* history table */
.h-tbl{width:100%;border-collapse:collapse;}
.h-tbl th{font-family:var(--mono);font-size:8px;letter-spacing:2px;text-transform:uppercase;
  color:var(--t4);padding:6px 10px;text-align:left;border-bottom:1px solid var(--b1);}
.h-tbl td{padding:8px 10px;font-size:11px;border-bottom:1px solid rgba(30,120,255,0.04);}
.h-tbl td:last-child{font-family:var(--mono);font-size:10px;}

/* ─── TOAST ─── */
#toasts{position:fixed;bottom:20px;right:20px;z-index:999999;
  display:flex;flex-direction:column;gap:8px;align-items:flex-end;}
.toast{padding:12px 16px;border-radius:var(--r-md);
  background:#0F172A;border:1px solid #334155;
  box-shadow:0 12px 36px rgba(0,0,0,.6);
  display:flex;align-items:center;gap:10px;
  font-size:12px;min-width:280px;max-width:440px;
  animation:toast-in .3s var(--ease);cursor:pointer;color:#FFFFFF;}
.toast.exit{animation:toast-out .3s var(--ease) forwards;}
@keyframes toast-in{from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:none;}}
@keyframes toast-out{from{opacity:1;transform:none;}to{opacity:0;transform:translateX(20px);}}
.toast-ico{font-size:16px;flex-shrink:0;}
.toast-body{flex:1;}
.toast-title{font-weight:700;font-size:12px;color:#FFFFFF;}
.toast-msg{font-size:11px;color:#94A3B8;margin-top:2px;line-height:1.45;word-break:break-word;}
.toast.err{border-color:rgba(255,58,92,.6);background:#1E1018;}
.toast.ok{border-color:rgba(0,232,135,.6);background:#091A14;}
.toast.info{border-color:#334155;background:#0F172A;}

/* ─── LOADING OVERLAY ─── */
#loader{position:fixed;inset:0;z-index:9999;background:var(--bg0);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  transition:opacity .5s;}
#loader.hide{opacity:0;pointer-events:none;}
.loader-logo{font-family:var(--display);font-size:32px;font-weight:800;letter-spacing:4px;color:var(--t1);}
.loader-bar{width:200px;height:2px;background:rgba(30,120,255,0.15);border-radius:1px;overflow:hidden;}
.loader-fill{height:100%;background:linear-gradient(90deg,var(--blue),var(--cyan));
  border-radius:1px;animation:load-bar 1.4s var(--ease) forwards;}
@keyframes load-bar{from{width:0;}to{width:100%;}}
.loader-txt{font-family:var(--mono);font-size:10px;color:var(--t4);letter-spacing:2px;}

/* ─── ANIM ─── */
.fade-up{animation:fu .5s var(--ease) both;}
@keyframes fu{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.fade-up:nth-child(1){animation-delay:.06s;}
.fade-up:nth-child(2){animation-delay:.12s;}
.fade-up:nth-child(3){animation-delay:.18s;}
.fade-up:nth-child(4){animation-delay:.24s;}

/* ─── ADDITIONS FOR OPERATIONS AND TEST LAB ─── */
.ops-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ops-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.input-group { margin-bottom: 12px; }
.input-group label { display: block; font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--t3); margin-bottom: 6px; }
.pro-input { width: 100%; background: rgba(30,120,255,0.04); border: 1px solid var(--b1); border-radius: var(--r-sm); padding: 10px 14px; color: var(--t1); font-size: 13px; font-family: var(--body); outline: none; transition: border .2s; }
.pro-input:focus { border-color: var(--b2); }
.pro-input::placeholder { color: var(--t4); }
.btn-primary { width: 100%; padding: 10px; background: rgba(30,120,255,0.12); border: 1px solid var(--b2); border-radius: var(--r-sm); color: var(--blue); font-size: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: 0.2s; }
.btn-primary:hover { background: rgba(30,120,255,0.2); }
.btn-danger-outline { width: 100%; padding: 8px; background: rgba(255,58,92,0.05); border: 1px solid rgba(255,58,92,0.2); border-radius: var(--r-sm); color: var(--red); font-size: 11px; font-weight: 600; cursor: pointer; transition: 0.2s; margin-top:10px; }
.btn-danger-outline:hover { background: rgba(255,58,92,0.1); }
.manage-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: rgba(30,120,255,0.02); border: 1px solid var(--b1); border-radius: var(--r-sm); margin-bottom: 6px; }
.manage-item-info b { font-size: 12px; color: var(--t1); }
.manage-item-info span { font-size: 10px; color: var(--t4); font-family: var(--mono); display: block; margin-top:2px; }
.btn-remove { padding: 4px 10px; background: rgba(255,58,92,0.08); border: 1px solid rgba(255,58,92,0.15); border-radius: 4px; color: var(--red); font-size: 10px; font-weight: 600; cursor: pointer; transition: 0.2s; font-family:var(--mono); text-transform:uppercase; letter-spacing:1px; }
.btn-remove:hover { background: var(--red); color: #fff; }

/* ─── AUTH OVERLAY ─── */
.auth-overlay { position: fixed; inset: 0; background: rgba(2,6,14,0.95); display: flex; justify-content: center; align-items: center; z-index: 99999; backdrop-filter: blur(10px); }
.auth-box { width: 400px; max-width: 90%; background: var(--surface); border: 1px solid var(--b2); border-radius: var(--r-xl); padding: 32px; text-align: center; box-shadow: 0 20px 60px rgba(30,120,255,0.1); }
.auth-box .s-logo { margin: 0 auto 20px; }
.auth-box h3 { font-family: var(--display); font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.auth-box p { font-size: 12px; color: var(--t3); margin-bottom: 24px; }

/* ─── TOOLTIPS (HIGH CONTRAST & LEGIBILITY) ─── */
.tip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; border-radius: 50%;
    background: var(--cyan-glow); color: var(--cyan);
    font-size: 10px; font-weight: 800; cursor: help;
    position: relative; margin-left: 6px; border: 1px solid var(--b2);
    font-family: var(--mono); vertical-align: middle;
}
.tip:hover::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    background: #0F172A; color: #FFFFFF;
    padding: 8px 12px; border-radius: var(--r-sm); font-size: 11px; font-weight: 500;
    font-family: var(--body);
    white-space: normal; z-index: 10000; border: 1px solid #334155;
    box-shadow: 0 12px 32px rgba(0,0,0,0.6); pointer-events: none;
    width: max-content; max-width: 280px; line-height: 1.45; text-transform: none; letter-spacing: normal; text-align: left;
}

/* ─── TEST LAB DIAGNOSTIC SUITE ─── */
.testlab-grid { display: grid; grid-template-columns: 380px 1fr; gap: 16px; width: 100%; }
.console-box {
  background: #030712; border: 1px solid var(--b2); border-radius: var(--r-md);
  padding: 14px 16px; font-family: var(--mono); font-size: 11px;
  min-height: 240px; max-height: 320px; overflow-y: auto;
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.8);
}
.console-line { line-height: 1.6; margin-bottom: 4px; word-break: break-all; }
.console-line.text-dim { color: #64748B; }
.console-line.text-ok { color: #10B981; font-weight: 600; }
.console-line.text-warn { color: #F59E0B; }
.console-line.text-err { color: #EF4444; font-weight: 700; }
.console-line.text-cyan { color: #00D4FF; }
.testlab-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.t-kpi { background: var(--surface); border: 1px solid var(--b1); border-radius: var(--r-md); padding: 12px 14px; backdrop-filter: blur(12px); }
.t-kpi-label { font-family: var(--mono); font-size: 8px; font-weight: 700; letter-spacing: 1.5px; color: var(--t3); margin-bottom: 4px; }
.t-kpi-val { font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--t1); }