*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --grad-bg: linear-gradient(135deg, #080c14 0%, #0d1528 35%, #0a0f1e 65%, #060a12 100%);
  --bg-0: #080c14; --bg-1: rgba(13,21,40,0.95); --bg-2: rgba(18,28,52,0.95);
  --bg-3: rgba(26,38,68,0.7); --bg-4: rgba(34,50,88,0.6);
  --bd-0: rgba(255,255,255,0.05); --bd-1: rgba(255,255,255,0.09);
  --bd-2: rgba(255,255,255,0.15); --bd-3: rgba(77,157,224,0.2);
  --t-0: #eef0f8; --t-1: #9da8c4; --t-2: #5a6480; --t-3: #363d54;
  --ok: #34c95f; --warn: #f5a623; --crit: #e84040; --info: #4d9de0;
  --ok-bg: rgba(52,201,95,0.12); --warn-bg: rgba(245,166,35,0.12);
  --crit-bg: rgba(232,64,64,0.12); --info-bg: rgba(77,157,224,0.12);
  --ok-bd: rgba(52,201,95,0.28); --warn-bd: rgba(245,166,35,0.28);
  --crit-bd: rgba(232,64,64,0.28); --info-bd: rgba(77,157,224,0.28);
  --font: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', monospace;
  --sidebar-w: 192px; --radius: 8px; --radius-lg: 12px;
}

/* Base font (demo polish) */
body, #root {
  font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.font-mono-display {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

/* Sidebar hover utilities (demo polish) */
.nav-item:hover:not(.nav-item-active) {
  background: var(--bg-2, rgba(255,255,255,0.03));
  color: var(--t-0);
}
.nav-item:hover:not(.nav-item-active) .nav-icon {
  opacity: 0.7;
}
.user-row:hover { background: var(--bg-2, rgba(255,255,255,0.03)); }
.signout-link:hover { background: var(--bg-2, rgba(255,255,255,0.03)); color: var(--t-0); }

html, body, #root { height: 100%; font-size: 13px;
  color: var(--t-0); background: var(--grad-bg); background-attachment: fixed;
  -webkit-font-smoothing: antialiased; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bd-2); border-radius: 2px; }
.chip { display:inline-flex; align-items:center; gap:4px; font-size:11px; padding:3px 9px;
  border-radius:20px; border:0.5px solid var(--bd-1); color:var(--t-1); cursor:pointer;
  background:transparent; white-space:nowrap; transition:background .12s,border-color .12s; font-family:var(--font); }
.chip:hover { background:var(--bg-3); }
.chip.on { border-color:var(--bd-2); background:var(--bg-3); color:var(--t-0); font-weight:500; }
.chip.sev-0 { background:var(--ok-bg); color:var(--ok); border-color:var(--ok-bd); }
.chip.sev-1 { background:var(--warn-bg); color:var(--warn); border-color:var(--warn-bd); }
.chip.sev-2 { background:var(--crit-bg); color:var(--crit); border-color:var(--crit-bd); }
.vd { width:0.5px; height:16px; background:var(--bd-0); flex-shrink:0; }
.panel { background:var(--bg-1); border:0.5px solid var(--bd-1); border-radius:var(--radius-lg);
  overflow:hidden; backdrop-filter:blur(12px); }
.panel-head { padding:9px 14px; border-bottom:0.5px solid var(--bd-0); display:flex; align-items:center; gap:8px; }
.panel-title { font-size:12px; font-weight:500; color:var(--t-0); }
.metric-card { background:var(--bg-1); border:0.5px solid var(--bd-0); border-radius:var(--radius);
  padding:10px 12px; position:relative; overflow:hidden; backdrop-filter:blur(8px); }
.metric-card-icon { position:absolute; top:10px; left:10px; opacity:.55; color:var(--t-2); }
.metric-card:hover .metric-card-icon { opacity:.8; }
.metric-card-label { font-size:10px; color:var(--t-2); margin-bottom:4px; }
.metric-card-value { font-size:19px; font-weight:500; color:var(--t-0); line-height:1; }
.metric-card-value.ok { color:var(--ok); } .metric-card-value.warn { color:var(--warn); } .metric-card-value.crit { color:var(--crit); }
.metric-card-sub { font-size:10px; color:var(--t-2); margin-top:3px; }
.metric-card-bar { position:absolute; bottom:0; left:0; height:2px; border-radius:0 1px 0 0; }
.metric-card-scope { position:absolute; top:8px; right:8px; font-size:9px; padding:1px 5px;
  border-radius:6px; background:var(--info-bg); color:var(--info); }
.vms-table { width:100%; border-collapse:collapse; font-size:11px; table-layout:fixed; }
.vms-table th { text-align:left; padding:5px 8px; font-weight:500; color:var(--t-2);
  font-size:10px; border-bottom:0.5px solid var(--bd-0); }
.vms-table td { padding:5px 8px; border-bottom:0.5px solid var(--bd-0); color:var(--t-1);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vms-table tr:last-child td { border-bottom:none; }
.vms-table tbody tr:hover td { background:var(--bg-2); cursor:pointer; }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.35} }
.live-pip { width:6px; height:6px; border-radius:50%; background:var(--ok); animation:pulse 2s infinite; flex-shrink:0; }
@keyframes slideUp { from{transform:translateY(12px);opacity:0} to{transform:translateY(0);opacity:1} }
.toast-enter { animation:slideUp .2s ease; }

@keyframes hexInnerPulse {
  0%   { transform: scale(1); }
  45%  { transform: scale(0.84); }
  100% { transform: scale(1); }
}
.hex-inner-pulse {
  transform-origin: 14px 15px;
  animation: hexInnerPulse 220ms ease-out;
}