/* ============================================================================
   VPS // COMMAND  —  Cyberpunk Command Center theme
   Full design system: tokens, FX layers, components, responsive.
   No build step. No external fonts/CDN. Pure CSS.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   Design tokens
---------------------------------------------------------------------------- */
:root{
  --bg:#05060b; --bg-2:#0a0e1a;
  --panel:rgba(13,19,33,.62); --panel-solid:#0c1120; --panel-2:rgba(20,28,48,.55);
  --border:rgba(0,240,255,.14); --border-2:rgba(255,255,255,.06); --grid:rgba(0,240,255,.05);
  --text:#e6f2ff; --text-dim:#9fb3cc; --text-mute:#5d6f88;
  --cyan:#00f0ff; --magenta:#ff2bd6; --violet:#8b5cff; --blue:#2b8bff;
  --ok:#27f5a5; --warn:#ffb020; --crit:#ff3b5c; --info:#39c8ff;
  --sev-info:var(--info); --sev-low:#39c8ff; --sev-med:#ffb020; --sev-high:#ff7a18; --sev-crit:#ff3b5c;
  --glow-cyan:0 0 18px rgba(0,240,255,.45); --glow-mag:0 0 18px rgba(255,43,214,.4);
  --radius:14px; --radius-sm:9px; --gap:16px;
  --font-display: ui-sans-serif, "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  /* derived */
  --nav-w:232px; --nav-w-collapsed:64px; --statbar-h:56px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow-1: 0 8px 30px rgba(0,0,0,.45);
  --shadow-2: 0 18px 60px rgba(0,0,0,.55);
  --inner-glow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 0 32px rgba(0,240,255,.03);
}

/* ----------------------------------------------------------------------------
   Reset / base
---------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-display); font-size:14px; line-height:1.45;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow:hidden; /* shell scrolls internally */
}
body::before{ /* base radial wash so the page is never flat black */
  content:""; position:fixed; inset:0; z-index:-3; pointer-events:none;
  background:
    radial-gradient(1200px 700px at 78% -8%, rgba(139,92,255,.12), transparent 60%),
    radial-gradient(1000px 620px at 6% 108%, rgba(0,240,255,.10), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
h1,h2,h3,h4,p{ margin:0; }
a{ color:var(--cyan); text-decoration:none; }
a:hover{ text-decoration:underline; }
button{ font-family:inherit; color:inherit; }
canvas{ display:block; }
img,svg{ vertical-align:middle; }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; border-radius:6px; }
.mono{ font-family:var(--font-mono); }
.dim{ color:var(--text-dim); } .mute{ color:var(--text-mute); }
.up{ text-transform:uppercase; letter-spacing:.14em; }
.nowrap{ white-space:nowrap; }
.hidden{ display:none !important; }

/* thin neon scrollbars */
*{ scrollbar-width:thin; scrollbar-color: rgba(0,240,255,.30) transparent; }
*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(0,240,255,.42), rgba(255,43,214,.32));
  border-radius:999px; border:2px solid transparent; background-clip:padding-box;
}
*::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg, var(--cyan), var(--magenta)); background-clip:padding-box; }

/* ----------------------------------------------------------------------------
   Background FX (fixed): perspective grid, top glow, scanline, vignette
---------------------------------------------------------------------------- */
.fx{ position:fixed; inset:0; z-index:-2; pointer-events:none; overflow:hidden; }
.fx-grid{
  position:absolute; left:-25%; right:-25%; bottom:-10%; height:75%;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:46px 46px;
  transform:perspective(420px) rotateX(62deg);
  transform-origin:bottom center;
  -webkit-mask-image:linear-gradient(to top, #000 0%, transparent 82%);
          mask-image:linear-gradient(to top, #000 0%, transparent 82%);
  animation:gridDrift 22s linear infinite;
  opacity:.9;
}
@keyframes gridDrift{ from{ background-position:0 0,0 0; } to{ background-position:0 46px,46px 0; } }
.fx-glowtop{
  position:absolute; left:50%; top:-30%; width:140vmax; height:60vmax; transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(0,240,255,.10), transparent 70%);
  filter:blur(8px);
}
.fx-scan{
  position:absolute; inset:0;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay; opacity:.5;
}
.fx-scan::after{
  content:""; position:absolute; left:0; right:0; height:180px;
  background:linear-gradient(180deg, transparent, rgba(0,240,255,.06), transparent);
  animation:scanMove 7.5s linear infinite;
}
@keyframes scanMove{ 0%{ top:-20%; } 100%{ top:120%; } }
.fx-vignette{
  position:absolute; inset:0;
  box-shadow:inset 0 0 220px rgba(0,0,0,.7), inset 0 0 60px rgba(0,0,0,.5);
}
@media (prefers-reduced-motion: reduce){
  .fx-grid,.fx-scan::after{ animation:none; }
}

/* ----------------------------------------------------------------------------
   Boot splash (replaced by app.js)
---------------------------------------------------------------------------- */
.app-root{ height:100vh; height:100dvh; }
.boot{ height:100vh; display:grid; place-content:center; gap:18px; text-align:center; }
.boot-logo{ font-size:30px; font-weight:800; letter-spacing:.32em; text-transform:uppercase; text-shadow:var(--glow-cyan); }
.boot-logo span{ color:var(--magenta); margin:0 .25em; }
.boot-bar{ width:240px; height:4px; border-radius:999px; background:rgba(255,255,255,.07); overflow:hidden; margin:0 auto; }
.boot-bar span{ display:block; height:100%; width:40%; border-radius:999px;
  background:linear-gradient(90deg,var(--cyan),var(--magenta)); animation:bootSlide 1.1s var(--ease) infinite; }
@keyframes bootSlide{ 0%{ transform:translateX(-110%);} 100%{ transform:translateX(320%);} }
.boot-msg{ color:var(--text-mute); letter-spacing:.18em; text-transform:uppercase; font-size:11px; }
.noscript{ position:fixed; inset:0; display:grid; place-content:center; background:var(--bg); color:var(--text); padding:24px; text-align:center; }

/* ============================================================================
   LOGIN SCREEN
   ========================================================================== */
.login-wrap{ height:100vh; height:100dvh; display:grid; place-items:center; padding:24px; }
.login-card{
  width:min(420px,92vw); padding:34px 30px 28px; position:relative;
  background:var(--panel); border:1px solid var(--border); border-radius:20px;
  backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:var(--shadow-2), var(--inner-glow);
  animation:cardIn .5s var(--ease) both;
}
@keyframes cardIn{ from{ opacity:0; transform:translateY(14px) scale(.985);} to{ opacity:1; transform:none;} }
.login-card::before{ /* neon edge */
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(140deg, rgba(0,240,255,.5), transparent 40%, transparent 60%, rgba(255,43,214,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.login-logo{ text-align:center; font-size:26px; font-weight:800; letter-spacing:.26em; text-transform:uppercase; text-shadow:var(--glow-cyan); }
.login-logo span{ color:var(--magenta); margin:0 .3em; }
.login-sub{ text-align:center; color:var(--text-mute); font-size:11px; letter-spacing:.2em; text-transform:uppercase; margin-top:8px; }
.login-form{ margin-top:26px; display:grid; gap:14px; }
.login-field{ position:relative; }
.login-field .ico{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--text-mute); width:18px; height:18px; pointer-events:none; }
.login-input{
  width:100%; padding:13px 14px 13px 40px; font-size:15px; color:var(--text);
  background:rgba(5,8,16,.7); border:1px solid var(--border); border-radius:11px; outline:none;
  font-family:var(--font-mono); letter-spacing:.04em; transition:border-color .15s, box-shadow .15s;
}
.login-input::placeholder{ color:var(--text-mute); letter-spacing:.06em; }
.login-input:focus{ border-color:var(--cyan); box-shadow:var(--glow-cyan); }
.login-btn{ margin-top:4px; width:100%; padding:13px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; font-size:13px; }
.login-err{ min-height:18px; text-align:center; color:var(--crit); font-size:12.5px; letter-spacing:.04em; }
.login-foot{ margin-top:18px; text-align:center; color:var(--text-mute); font-size:11px; letter-spacing:.08em; }
.shake{ animation:shake .42s var(--ease); }
@keyframes shake{ 10%,90%{transform:translateX(-2px);} 20%,80%{transform:translateX(4px);} 30%,50%,70%{transform:translateX(-8px);} 40%,60%{transform:translateX(8px);} }

/* ============================================================================
   APP SHELL  (nav + statbar + content)
   ========================================================================== */
.shell{ display:grid; grid-template-columns:var(--nav-w) 1fr; grid-template-rows:var(--statbar-h) 1fr;
  grid-template-areas:"nav statbar" "nav content"; height:100vh; height:100dvh; }
.shell.nav-collapsed{ grid-template-columns:var(--nav-w-collapsed) 1fr; }

/* ---- NAV ---- */
.nav{ grid-area:nav; position:relative; display:flex; flex-direction:column; min-height:0;
  background:linear-gradient(180deg, rgba(10,14,26,.86), rgba(8,11,20,.92));
  border-right:1px solid var(--border); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.nav-brand{ display:flex; align-items:center; gap:11px; padding:0 16px; height:var(--statbar-h); border-bottom:1px solid var(--border-2); flex:none; }
.nav-brand .mark{ width:30px; height:30px; flex:none; display:grid; place-items:center; border-radius:9px;
  background:linear-gradient(135deg, rgba(0,240,255,.18), rgba(255,43,214,.18)); border:1px solid var(--border); color:var(--cyan); box-shadow:var(--glow-cyan); }
.nav-brand .txt{ font-weight:800; letter-spacing:.18em; text-transform:uppercase; font-size:14px; white-space:nowrap; }
.nav-brand .txt span{ color:var(--magenta); }
.nav-list{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:12px 10px; display:flex; flex-direction:column; gap:4px; }
.nav-item{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:11px; cursor:pointer;
  color:var(--text-dim); border:1px solid transparent; position:relative; transition:background .15s,color .15s,border-color .15s; }
.nav-item svg{ width:20px; height:20px; flex:none; }
.nav-item .label{ font-size:13px; letter-spacing:.06em; white-space:nowrap; }
.nav-item .count{ margin-left:auto; font-family:var(--font-mono); font-size:11px; padding:1px 7px; border-radius:999px;
  background:rgba(255,59,92,.16); color:var(--crit); border:1px solid rgba(255,59,92,.3); }
.nav-item:hover{ color:var(--text); background:rgba(0,240,255,.06); border-color:var(--border-2); }
.nav-item.active{ color:var(--text); background:linear-gradient(90deg, rgba(0,240,255,.14), rgba(0,240,255,.03));
  border-color:var(--border); box-shadow:var(--inner-glow); }
.nav-item.active::before{ content:""; position:absolute; left:-10px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,var(--cyan),var(--magenta)); box-shadow:var(--glow-cyan); }
.nav-foot{ flex:none; padding:10px; border-top:1px solid var(--border-2); display:flex; flex-direction:column; gap:6px; }
.nav-toggle{ display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:11px; cursor:pointer; color:var(--text-mute); }
.nav-toggle:hover{ color:var(--text); background:rgba(0,240,255,.06); }
.nav-toggle svg{ width:18px; height:18px; flex:none; }
.shell.nav-collapsed .nav-brand .txt,
.shell.nav-collapsed .nav-item .label,
.shell.nav-collapsed .nav-item .count,
.shell.nav-collapsed .nav-toggle .label{ display:none; }
.shell.nav-collapsed .nav-item,
.shell.nav-collapsed .nav-toggle{ justify-content:center; }

/* ---- STATBAR ---- */
.statbar{ grid-area:statbar; display:flex; align-items:center; gap:16px; padding:0 18px;
  border-bottom:1px solid var(--border); background:rgba(8,11,20,.55); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.statbar .sb-host{ display:flex; align-items:center; gap:9px; font-weight:700; letter-spacing:.08em; }
.statbar .sb-host .dom{ color:var(--text-mute); font-weight:500; letter-spacing:.04em; }
.statbar .sb-host svg{ width:18px; height:18px; color:var(--cyan); }
.statbar .sb-ip{ font-family:var(--font-mono); color:var(--text-dim); font-size:12px; padding:3px 9px; border:1px solid var(--border-2); border-radius:8px; }
.statbar .sb-spacer{ flex:1 1 auto; }
.sb-chip{ display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px; color:var(--text-dim);
  padding:5px 11px; border:1px solid var(--border-2); border-radius:10px; background:rgba(255,255,255,.02); }
.sb-chip svg{ width:15px; height:15px; }
.sb-clock{ font-variant-numeric:tabular-nums; letter-spacing:.06em; }
.ws-dot{ width:9px; height:9px; border-radius:50%; background:var(--text-mute); box-shadow:0 0 0 0 transparent; }
.ws-dot.online{ background:var(--ok); box-shadow:0 0 10px var(--ok); animation:pulseDot 2.4s ease infinite; }
.ws-dot.connecting{ background:var(--warn); box-shadow:0 0 10px var(--warn); animation:pulseDot 1s ease infinite; }
.ws-dot.offline{ background:var(--crit); box-shadow:0 0 10px var(--crit); }
@keyframes pulseDot{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
.sb-threat{ cursor:pointer; position:relative; }
.sb-threat .n{ color:var(--text); font-weight:700; }
.sb-threat.alarm{ border-color:var(--crit); color:var(--crit); animation:threatPulse 1.1s var(--ease) 3; }
@keyframes threatPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,59,92,0);} 50%{ box-shadow:0 0 16px 1px rgba(255,59,92,.6);} }
.sb-icon-btn{ display:grid; place-items:center; width:34px; height:34px; border-radius:10px; cursor:pointer; color:var(--text-dim);
  border:1px solid var(--border-2); background:rgba(255,255,255,.02); }
.sb-icon-btn:hover{ color:var(--text); border-color:var(--border); box-shadow:var(--glow-cyan); }
.sb-icon-btn svg{ width:17px; height:17px; }

/* ---- CONTENT ---- */
.content{ grid-area:content; min-height:0; overflow-y:auto; overflow-x:hidden; padding:var(--gap); }
.view{ animation:viewIn .32s var(--ease) both; }
@keyframes viewIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
.view-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.view-head h1{ font-size:18px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; display:flex; align-items:center; gap:10px; }
.view-head h1 svg{ width:20px; height:20px; color:var(--cyan); }
.view-head .sub{ color:var(--text-mute); font-size:12px; letter-spacing:.04em; }
.view-head .spacer{ flex:1 1 auto; }

/* ============================================================================
   COMPONENTS
   ========================================================================== */
/* panel / card */
.panel,.card{ position:relative; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  backdrop-filter:blur(14px) saturate(1.1); -webkit-backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:var(--shadow-1), var(--inner-glow); }
.panel{ padding:16px; }
.card{ padding:14px; }
.panel.tight,.card.tight{ padding:0; }
.panel-head,.card-head{ display:flex; align-items:center; gap:10px; margin:-2px 0 12px; }
.panel-head h3,.card-head h3{ font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--text-dim); }
.panel-head svg,.card-head svg{ width:17px; height:17px; color:var(--cyan); }
.panel-head .spacer,.card-head .spacer{ flex:1 1 auto; }
.glow{ box-shadow:var(--glow-cyan); }
.glow-mag{ box-shadow:var(--glow-mag); }

/* layout grids */
.grid{ display:grid; gap:var(--gap); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-auto{ grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.grid-kpi{ grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.row{ display:flex; gap:var(--gap); }
.row.wrap{ flex-wrap:wrap; }
.col{ display:flex; flex-direction:column; gap:var(--gap); }
.span-2{ grid-column:span 2; } .span-3{ grid-column:span 3; } .span-4{ grid-column:span 4; }
.fill{ flex:1 1 auto; min-width:0; }
.center{ align-items:center; } .between{ justify-content:space-between; }
.gap-sm{ gap:8px; } .gap-lg{ gap:24px; }

/* stat / kpi */
.stat{ display:flex; flex-direction:column; gap:4px; }
.stat .label{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-mute); }
.stat .value{ font-family:var(--font-mono); font-size:24px; font-weight:600; line-height:1; color:var(--text); font-variant-numeric:tabular-nums; }
.stat .value.sm{ font-size:18px; }
.stat .unit{ font-size:12px; color:var(--text-dim); margin-left:3px; }
.stat .delta{ font-size:11px; font-family:var(--font-mono); }
.stat .delta.up{ color:var(--ok); } .stat .delta.down{ color:var(--crit); }
.kpi{ padding:14px 16px; display:flex; align-items:center; gap:14px; }
.kpi .ic{ width:42px; height:42px; flex:none; display:grid; place-items:center; border-radius:12px;
  background:linear-gradient(135deg, rgba(0,240,255,.14), rgba(139,92,255,.14)); border:1px solid var(--border); color:var(--cyan); }
.kpi .ic svg{ width:22px; height:22px; }
.kpi.mag .ic{ color:var(--magenta); background:linear-gradient(135deg, rgba(255,43,214,.16), rgba(139,92,255,.14)); }
.kpi.ok .ic{ color:var(--ok); } .kpi.warn .ic{ color:var(--warn); } .kpi.crit .ic{ color:var(--crit); }

/* buttons */
.btn,.btn-ghost,.btn-danger{ display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  padding:9px 16px; border-radius:11px; font-size:12.5px; font-weight:600; letter-spacing:.04em; line-height:1;
  border:1px solid var(--border); background:linear-gradient(180deg, rgba(0,240,255,.16), rgba(0,240,255,.06));
  color:var(--text); transition:transform .08s var(--ease), box-shadow .15s, border-color .15s, background .15s; user-select:none; }
.btn svg,.btn-ghost svg,.btn-danger svg{ width:16px; height:16px; }
.btn:hover{ box-shadow:var(--glow-cyan); border-color:var(--cyan); }
.btn:active{ transform:translateY(1px); }
.btn-ghost{ background:rgba(255,255,255,.03); color:var(--text-dim); }
.btn-ghost:hover{ color:var(--text); border-color:var(--border); background:rgba(0,240,255,.07); }
.btn-danger{ background:linear-gradient(180deg, rgba(255,59,92,.2), rgba(255,59,92,.08)); border-color:rgba(255,59,92,.4); color:#ffd7de; }
.btn-danger:hover{ box-shadow:0 0 18px rgba(255,59,92,.45); border-color:var(--crit); color:#fff; }
.btn[disabled],.btn-ghost[disabled],.btn-danger[disabled]{ opacity:.45; cursor:not-allowed; box-shadow:none; transform:none; }
.btn.sm,.btn-ghost.sm,.btn-danger.sm{ padding:6px 11px; font-size:11.5px; border-radius:9px; }
.btn.icon,.btn-ghost.icon{ padding:8px; }
.btn-group{ display:inline-flex; gap:6px; }

/* pill / tag */
.pill,.tag{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:11px;
  letter-spacing:.05em; border:1px solid var(--border-2); background:rgba(255,255,255,.03); color:var(--text-dim); white-space:nowrap; }
.pill svg,.tag svg{ width:13px; height:13px; }
.tag.mono{ font-family:var(--font-mono); }
.pill.on{ color:var(--ok); border-color:rgba(39,245,165,.3); background:rgba(39,245,165,.1); }
.pill.off{ color:var(--text-mute); }
.pill.cyan{ color:var(--cyan); border-color:var(--border); }
.pill.mag{ color:var(--magenta); border-color:rgba(255,43,214,.3); background:rgba(255,43,214,.08); }

/* badge (sev / status) */
.badge{ display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:7px; font-size:10.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; border:1px solid currentColor; line-height:1.5; }
.badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 7px currentColor; }
.badge.info{ color:var(--info); } .badge.low{ color:var(--sev-low); } .badge.med{ color:var(--sev-med); }
.badge.high{ color:var(--sev-high); } .badge.crit{ color:var(--sev-crit); }
.badge.ok,.badge.success,.badge.active,.badge.online,.badge.up,.badge.running{ color:var(--ok); }
.badge.warn{ color:var(--warn); }
.badge.err,.badge.fail,.badge.crit,.badge.down,.badge.dead,.badge.stopped,.badge.inactive{ color:var(--crit); }
.badge.neutral,.badge.unknown{ color:var(--text-mute); }
.badge.solid{ color:#05060b; background:currentColor; border-color:transparent; }
.badge.solid::before{ display:none; }

/* progress bar */
.bar{ height:7px; border-radius:999px; background:rgba(255,255,255,.07); overflow:hidden; }
.bar > span{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--cyan),var(--violet));
  box-shadow:0 0 10px rgba(0,240,255,.4); transition:width .5s var(--ease); }
.bar.warn > span{ background:linear-gradient(90deg,var(--warn),#ff7a18); box-shadow:0 0 10px rgba(255,176,32,.4); }
.bar.crit > span{ background:linear-gradient(90deg,#ff7a18,var(--crit)); box-shadow:0 0 10px rgba(255,59,92,.5); }

/* table */
.table-wrap{ overflow-x:auto; border-radius:var(--radius); }
table.table{ width:100%; border-collapse:collapse; font-size:12.5px; }
table.table th,table.table td{ padding:9px 12px; text-align:left; white-space:nowrap; }
table.table thead th{ position:sticky; top:0; z-index:2; background:rgba(10,14,26,.96); backdrop-filter:blur(6px);
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-mute); font-weight:700;
  border-bottom:1px solid var(--border); }
table.table tbody tr{ border-bottom:1px solid var(--border-2); transition:background .12s; }
table.table tbody tr:hover{ background:rgba(0,240,255,.05); }
table.table tbody tr:last-child{ border-bottom:none; }
table.table td.num,table.table th.num{ text-align:right; font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
table.table td.mono{ font-family:var(--font-mono); }
table.table .muted{ color:var(--text-mute); }
.table-empty{ padding:28px; text-align:center; color:var(--text-mute); letter-spacing:.08em; }

/* feed (event stream) */
.feed{ display:flex; flex-direction:column; gap:7px; max-height:100%; overflow-y:auto; }
.feed-item{ position:relative; display:flex; gap:11px; align-items:flex-start; padding:9px 12px 9px 15px;
  border-radius:11px; background:rgba(255,255,255,.02); border:1px solid var(--border-2); animation:feedIn .3s var(--ease) both; }
@keyframes feedIn{ from{ opacity:0; transform:translateX(-6px);} to{ opacity:1; transform:none;} }
.feed-item::before{ content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--text-mute); }
.feed-item.info::before{ background:var(--sev-info); } .feed-item.low::before{ background:var(--sev-low); }
.feed-item.med::before{ background:var(--sev-med); } .feed-item.high::before{ background:var(--sev-high); box-shadow:0 0 10px var(--sev-high); }
.feed-item.crit::before{ background:var(--sev-crit); box-shadow:0 0 12px var(--sev-crit); }
.feed-item .fi-ic{ flex:none; width:26px; height:26px; display:grid; place-items:center; border-radius:8px;
  background:rgba(255,255,255,.04); color:var(--text-dim); }
.feed-item .fi-ic svg{ width:15px; height:15px; }
.feed-item .fi-body{ min-width:0; flex:1 1 auto; }
.feed-item .fi-top{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.feed-item .fi-title{ font-weight:600; font-size:12.5px; }
.feed-item .fi-ts{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-mute); margin-left:auto; }
.feed-item .fi-msg{ font-size:12px; color:var(--text-dim); word-break:break-word; }
.feed-item .fi-msg .mono{ color:var(--text); }

/* code / log lines */
.logbox{ font-family:var(--font-mono); font-size:12px; line-height:1.55; background:rgba(3,5,10,.6);
  border:1px solid var(--border-2); border-radius:11px; padding:12px 14px; overflow:auto; max-height:100%; }
.logline{ white-space:pre-wrap; word-break:break-word; padding:1px 0; }
.logline .ts{ color:var(--text-mute); }
.logline.err{ color:#ffb3bf; } .logline.warn{ color:#ffd98a; } .logline.ok{ color:#9af5d0; }

/* chart canvas holders */
.chart{ position:relative; width:100%; }
.chart canvas{ width:100%; height:100%; display:block; }
.chart.h-sm{ height:60px; } .chart.h-md{ height:120px; } .chart.h-lg{ height:200px; }
.gauge{ position:relative; width:100%; aspect-ratio:1/1; max-width:200px; margin:0 auto; }
.gauge canvas{ position:absolute; inset:0; width:100%; height:100%; }

/* empty / skeleton */
.empty{ display:grid; place-items:center; gap:8px; padding:36px 18px; text-align:center; color:var(--text-mute); }
.empty svg{ width:34px; height:34px; opacity:.6; }
.skeleton{ position:relative; overflow:hidden; background:rgba(255,255,255,.04); border-radius:8px; }
.skeleton::after{ content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(0,240,255,.08), transparent); animation:shimmer 1.4s infinite; }
@keyframes shimmer{ 100%{ transform:translateX(100%);} }

/* misc */
.divider{ height:1px; background:var(--border-2); margin:4px 0; }
.dot{ width:7px; height:7px; border-radius:50%; display:inline-block; background:var(--text-mute); }
.dot.ok{ background:var(--ok); box-shadow:0 0 7px var(--ok); }
.dot.warn{ background:var(--warn); box-shadow:0 0 7px var(--warn); }
.dot.crit{ background:var(--crit); box-shadow:0 0 7px var(--crit); }
.kbd{ font-family:var(--font-mono); font-size:11px; padding:2px 7px; border-radius:6px; border:1px solid var(--border);
  background:rgba(255,255,255,.04); color:var(--text-dim); box-shadow:0 2px 0 rgba(0,0,0,.3); }
.input{ width:100%; padding:9px 12px; font-size:13px; color:var(--text); font-family:var(--font-mono);
  background:rgba(5,8,16,.6); border:1px solid var(--border); border-radius:10px; outline:none; transition:border-color .15s,box-shadow .15s; }
.input:focus{ border-color:var(--cyan); box-shadow:var(--glow-cyan); }
.input.with-ico{ padding-left:36px; }
.search{ position:relative; }
.search svg{ position:absolute; left:11px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--text-mute); }
select.input{ appearance:none; cursor:pointer; }

/* ============================================================================
   TOASTS
   ========================================================================== */
.toast-stack{ position:fixed; right:18px; bottom:18px; z-index:9000; display:flex; flex-direction:column; gap:10px; max-width:min(380px,92vw); }
.toast{ display:flex; gap:11px; align-items:flex-start; padding:12px 14px; border-radius:13px; position:relative; overflow:hidden;
  background:rgba(12,17,32,.92); border:1px solid var(--border); box-shadow:var(--shadow-2); backdrop-filter:blur(10px);
  animation:toastIn .32s var(--ease) both; }
.toast.out{ animation:toastOut .28s var(--ease) both; }
@keyframes toastIn{ from{ opacity:0; transform:translateX(30px) scale(.96);} to{ opacity:1; transform:none;} }
@keyframes toastOut{ to{ opacity:0; transform:translateX(30px) scale(.96);} }
.toast::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--cyan); }
.toast.info::before{ background:var(--sev-info); } .toast.low::before{ background:var(--sev-low); }
.toast.med::before,.toast.warn::before{ background:var(--sev-med); }
.toast.high::before{ background:var(--sev-high); } .toast.crit::before,.toast.err::before{ background:var(--sev-crit); }
.toast.ok::before,.toast.success::before{ background:var(--ok); }
.toast .t-ic{ flex:none; width:24px; height:24px; display:grid; place-items:center; color:var(--cyan); }
.toast.crit .t-ic,.toast.err .t-ic,.toast.high .t-ic{ color:var(--crit); }
.toast.ok .t-ic,.toast.success .t-ic{ color:var(--ok); }
.toast.warn .t-ic,.toast.med .t-ic{ color:var(--warn); }
.toast .t-ic svg{ width:18px; height:18px; }
.toast .t-body{ flex:1 1 auto; min-width:0; }
.toast .t-title{ font-weight:700; font-size:12.5px; letter-spacing:.04em; }
.toast .t-msg{ font-size:12px; color:var(--text-dim); word-break:break-word; }
.toast .t-close{ flex:none; cursor:pointer; color:var(--text-mute); background:none; border:none; padding:2px; }
.toast .t-close:hover{ color:var(--text); }

/* ============================================================================
   MODAL
   ========================================================================== */
.modal-root{ position:fixed; inset:0; z-index:9500; display:none; }
.modal-root.open{ display:grid; place-items:center; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(2,4,9,.7); backdrop-filter:blur(4px); animation:fade .2s var(--ease) both; }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
.modal-card{ position:relative; width:min(460px,92vw); padding:22px; border-radius:18px;
  background:var(--panel-solid); border:1px solid var(--border); box-shadow:var(--shadow-2), var(--inner-glow);
  animation:cardIn .26s var(--ease) both; }
.modal-card.danger{ border-color:rgba(255,59,92,.4); }
.modal-card .m-head{ display:flex; align-items:center; gap:11px; margin-bottom:12px; }
.modal-card .m-head .m-ic{ width:36px; height:36px; flex:none; display:grid; place-items:center; border-radius:11px;
  background:rgba(0,240,255,.1); color:var(--cyan); border:1px solid var(--border); }
.modal-card.danger .m-head .m-ic{ background:rgba(255,59,92,.12); color:var(--crit); border-color:rgba(255,59,92,.35); }
.modal-card .m-head .m-ic svg{ width:20px; height:20px; }
.modal-card .m-title{ font-size:15px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.modal-card .m-body{ color:var(--text-dim); font-size:13px; line-height:1.5; }
.modal-card .m-body .mono{ color:var(--text); }
.modal-card .m-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .span-4,.span-3{ grid-column:span 2; }
}
@media (max-width:860px){
  :root{ --gap:12px; }
  .shell{ grid-template-columns:var(--nav-w-collapsed) 1fr; }
  .shell .nav-brand .txt,.shell .nav-item .label,.shell .nav-item .count,.shell .nav-toggle .label{ display:none; }
  .shell .nav-item,.shell .nav-toggle{ justify-content:center; }
  .statbar .sb-ip,.statbar .sb-host .dom{ display:none; }
}
@media (max-width:680px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .span-2,.span-3,.span-4{ grid-column:span 1; }
  .row{ flex-direction:column; }
  .content{ padding:12px; }
  .view-head h1{ font-size:16px; }
  .statbar{ gap:10px; padding:0 12px; }
  .sb-chip .lbl{ display:none; }
  .toast-stack{ right:10px; left:10px; bottom:10px; max-width:none; }
}

/* utility spacing */
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}
.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}
.p-0{padding:0}.text-c{text-align:center}.text-r{text-align:right}
.w-100{width:100%}.flex-1{flex:1 1 auto;min-width:0}
.scroll-y{ overflow-y:auto; } .scroll-x{ overflow-x:auto; }
.fade-in{ animation:viewIn .3s var(--ease) both; }

/* ============================================================================
   VIEW EXTRAS  (classes used by the view modules)
   ========================================================================== */
.grid-5{ grid-template-columns:repeat(5,1fr); }
@media (max-width:1100px){ .grid-5{ grid-template-columns:repeat(2,1fr); } .sec-grid{ grid-template-columns:1fr !important; } }
@media (max-width:760px){ .grid-5,.grid-4,.grid-3,.grid-2{ grid-template-columns:1fr; } }

/* small button + tag modifiers */
.btn.sm,.btn-ghost.sm,.btn-danger.sm{ padding:5px 10px; font-size:11.5px; letter-spacing:.04em; }
.icon-btn{ padding:5px; display:inline-grid; place-items:center; }
.icon-btn svg{ width:16px; height:16px; }
.chip{ background:rgba(255,255,255,.03); border:1px solid var(--border-2); color:var(--text-dim);
  padding:5px 11px; border-radius:999px; font-size:12px; cursor:pointer; transition:all .15s var(--ease); white-space:nowrap; }
.chip:hover{ color:var(--text); border-color:var(--border); }
.chip.active{ color:var(--bg); background:var(--cyan); border-color:var(--cyan); box-shadow:var(--glow-cyan); font-weight:700; }
.tag.cc{ font-family:var(--font-mono); font-size:10px; padding:1px 5px; margin-left:6px; text-transform:uppercase;
  color:var(--text-mute); border:1px solid var(--border-2); border-radius:5px; }

/* kpi cards */
.kpi-card .panel-head{ margin-bottom:10px; }
.kpi-card{ min-height:0; }
.sec-kpi .ic{ width:18px; height:18px; }
.sec-kpi{ position:relative; overflow:hidden; }
.sec-kpi::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--sev-med); opacity:.8; }
.sec-kpi[data-sev="crit"]::after{ background:var(--sev-crit); } .sec-kpi[data-sev="high"]::after{ background:var(--sev-high); }
.sec-kpi[data-sev="med"]::after{ background:var(--sev-med); }
.ov-seckpi .value{ font-size:22px; }

/* feed item time + ip (extends foundation .feed-item) */
.fi-ip{ color:var(--cyan); font-size:12px; }
.fi-time{ margin-left:auto; flex:none; align-self:flex-start; font-size:11px; white-space:nowrap; padding-left:8px; }
.sec-feed .feed-item{ align-items:flex-start; }

/* sortable table headers */
.table th.sortable{ user-select:none; }
.table th.sortable:hover{ color:var(--cyan); }

/* thin bar variant */
.bar.sm{ height:6px; }

/* service / site cards */
.svc-card,.site-card{ transition:border-color .2s var(--ease), transform .2s var(--ease); }
.svc-card:hover,.site-card:hover{ border-color:var(--border); transform:translateY(-1px); }
.site-card.down{ opacity:.62; }
.sites-grid{ grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); }

/* generic icon holder inside kpi */
.kpi .ic{ width:34px; height:34px; display:grid; place-items:center; border-radius:9px; background:rgba(0,240,255,.06); flex:none; }
.kpi .ic svg{ width:18px; height:18px; }

/* ---- health banner (overview) ---- */
.hz-banner{ display:flex; align-items:center; gap:20px; padding:14px 18px; }
.hzb-score{ font-family:var(--font-mono); font-size:34px; font-weight:800; line-height:1; }
.hzb-of{ font-size:13px; color:var(--text-mute); font-weight:500; margin-left:2px; }
.hzb-band{ flex:none; min-width:120px; }
.hzb-threat{ flex:none; }
.hzb-top{ flex:1 1 auto; min-width:0; border-left:1px solid var(--border-2); padding-left:18px; }
.hzb-go{ color:var(--text-mute); display:flex; } .hzb-go svg{ width:18px; height:18px; }
@media (max-width:760px){ .hz-banner{ flex-wrap:wrap; gap:12px; } .hzb-top{ border-left:none; padding-left:0; flex-basis:100%; } }

/* ---- threat level ---- */
.tl-badge{ display:inline-block; padding:8px 18px; border:2px solid var(--text-mute); border-radius:10px;
  font-weight:800; letter-spacing:.18em; font-size:18px; text-transform:uppercase; }
.tl-badge.sm{ padding:3px 10px; font-size:11px; letter-spacing:.12em; border-width:1px; }
.tl-bars{ display:flex; gap:5px; align-items:flex-end; }
.tl-seg{ width:16px; height:26px; border-radius:3px; background:rgba(255,255,255,.06); transition:all .3s var(--ease); }
.tl-seg[data-i="2"]{ height:30px; } .tl-seg[data-i="3"]{ height:34px; } .tl-seg[data-i="4"]{ height:38px; } .tl-seg[data-i="5"]{ height:42px; }

/* ---- advisor action items ---- */
.advisor-item{ display:flex; align-items:flex-start; gap:12px; padding:12px 14px; border-radius:var(--radius-sm);
  background:rgba(255,255,255,.02); border:1px solid var(--border-2); border-left:3px solid var(--text-mute); }
.advisor-item.crit{ border-left-color:var(--crit); } .advisor-item.high{ border-left-color:var(--sev-high); }
.advisor-item.med{ border-left-color:var(--warn); } .advisor-item.low{ border-left-color:var(--info); }
.ai-lvl{ flex:none; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#04060c;
  padding:3px 8px; border-radius:6px; min-width:62px; text-align:center; }
.ai-cat{ flex:none; color:var(--text-mute); margin-top:1px; } .ai-cat svg{ width:18px; height:18px; }
.ai-body{ flex:1 1 auto; min-width:0; }
.ai-title{ font-weight:600; font-size:13.5px; }
.ai-detail{ color:var(--text-dim); font-size:12px; margin-top:3px; word-break:break-word; }
.ai-action{ color:var(--cyan); font-size:12px; margin-top:5px; }
.pass-row{ border-bottom:1px solid var(--border-2); }
.grid-3{ grid-template-columns:repeat(3,1fr); } .grid-4{ grid-template-columns:repeat(4,1fr); }