:root {
  --bg:         #060404;
  --bg-2:       #0b0606;
  --panel:      #0f0808;
  --panel-2:    #150c0c;
  --panel-3:    #1c1010;
  --accent:     #e53935;
  --accent-2:   #ff5252;
  --accent-dim: rgba(229,57,53,.14);
  --accent-glow:rgba(229,57,53,.32);
  --text:       #f0d8d8;
  --text-2:     #a08080;
  --muted:      #5a3a3a;
  --danger:     #ff1744;
  --warn:       #fbbf24;
  --border:     rgba(229,57,53,.12);
  --glass:      rgba(15,8,8,.9);
  --font-mono:  'Space Mono', ui-monospace, monospace;
  --font-display:'Syncopate', sans-serif;
  --font-body:  'Cormorant Garamond', serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background:
    radial-gradient(ellipse at 20% 10%, rgba(229,57,53,.08), transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(180,0,0,.06),   transparent 45%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent-dim); color: var(--accent); }

/* CRT overlay */
.crt-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.09) 2px, rgba(0,0,0,.09) 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.01) 0, rgba(255,255,255,.01) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: overlay;
  opacity: .8;
}

/* Background canvas */
#bg-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

.hidden { display: none !important; }
.view { position: fixed; inset: 0; z-index: 1; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--panel-3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ===== BOOT ===== */
#boot { display: grid; place-items: center; background: var(--bg); z-index: 100; transition: opacity .5s ease; }
#boot.done { opacity: 0; pointer-events: none; }
.boot-terminal {
  width: min(680px,90vw);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 32px;
  box-shadow: 0 0 60px rgba(0,0,0,.6), inset 0 0 40px rgba(0,240,200,.03);
  position: relative;
  overflow: hidden;
}
.boot-terminal::before {
  content: '';
  position: absolute;
  top:0; left:0; right:0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.boot-header { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 14px; letter-spacing: 3px; color: var(--accent); margin-bottom: 20px; }
.boot-blink { animation: blink 1s step-end infinite; }
#boot-logs { min-height: 160px; max-height: 220px; overflow: hidden; font-size: 11px; color: var(--text-2); line-height: 2; letter-spacing: .5px; }
.boot-progress-wrap { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.boot-progress-track { flex: 1; height: 3px; background: var(--panel-3); border-radius: 2px; overflow: hidden; }
#boot-bar { width: 0%; height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); box-shadow: 0 0 10px var(--accent); transition: width .2s linear; }
#boot-pct { color: var(--accent); font-family: var(--font-display); font-size: 11px; min-width: 36px; text-align: right; }
@keyframes blink { 0%,100% {opacity:1} 50% {opacity:0} }

/* ===== LOGIN ===== */
#login { display: flex; flex-direction: column; z-index: 10; }
.login-container { flex: 1; display: flex; align-items: center; justify-content: center; gap: 80px; padding: 40px; position: relative; }
.login-visual { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.login-tagline h1 {
  font-family: var(--font-display);
  font-size: 72px;
  font-weight: 900;
  letter-spacing: 8px;
  color: var(--text);
  
  position: relative;
}
.login-tagline h1::after {
  content: 'STORMC2';
  position: absolute;
  left: 0; top: 0;
  color: transparent;
  -webkit-text-stroke: 1px rgba(0,240,200,.12);
  z-index: -1;
  transform: translate(4px, 4px);
}
.login-tagline h1 .accent { color: var(--accent); }
.typewriter { font-family: var(--font-body); font-size: 20px; letter-spacing: 6px; color: var(--text-2); text-transform: uppercase; font-weight: 400; }
.typewriter::after { content: '▋'; animation: blink 1s step-end infinite; color: var(--accent); }

/* ── Skull on login page ──────────────────────────────────────────────────── */
.skull-wrap {
  width: 200px; height: 200px;
  display: flex; align-items: center; justify-content: center;
}
/* ── Skull <object> — background transparent, no scrollbars ────────────── */
.skull-img,
.sidebar-skull,
.dash-skull-bg {
  display: block;
  background: transparent !important;
  border: none;
  overflow: hidden;
}

.skull-img {
  /* SVG aspect 1092:1280 ≈ 0.853 — at 180px height → 154px wide */
  width: 154px; height: 180px;
  opacity: 0.88;
}

.sidebar-skull {
  /* 44px height → 38px wide */
  width: 38px; height: 44px;
  flex-shrink: 0;
  opacity: 0.82;
}

.dash-skull-bg {
  position: absolute;
  right: 20px; top: 0;
  /* aspect: 273px wide × 320px tall */
  width: 273px; height: 320px;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}
.sidebar-brand { display: flex; flex-direction: column; }

/* Globe removed — replaced by skull */
.globe, .globe-core, .globe-ring, .globe-dots { display: none; }
@keyframes rotate3d { 0% { transform: rotateX(60deg) rotateZ(0deg); } 100% { transform: rotateX(60deg) rotateZ(360deg); } }

/* Login card */
.login-card { width: min(400px, 90vw); position: relative; }
.card-glow { position: absolute; inset: -1px; background: linear-gradient(135deg, var(--accent), transparent 50%, var(--accent-2)); border-radius: 8px; opacity: .2; filter: blur(8px); }
/* pulseGlow removed — static subtle glow only */
.card-content {
  position: relative;
  background: var(--glass);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 40px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.03);
  overflow: hidden;
}
.card-content::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: conic-gradient(from 0deg, transparent, rgba(0,240,200,.06), transparent 30%);
  /* rotateConic removed — static subtle tint */
  pointer-events: none;
}
.login-title { margin-bottom: 32px; position: relative; z-index: 1; }
.login-title h2 { font-family: var(--font-display); font-size: 22px; letter-spacing: 2px; margin-bottom: 6px; }
.login-title .sub { font-size: 10px; letter-spacing: 4px; color: var(--muted); }

.field { position: relative; margin-bottom: 26px; z-index: 1; }
.field label { display: block; font-size: 10px; letter-spacing: 2px; color: var(--muted); margin-bottom: 8px; transition: .3s; }
.field input { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--border); padding: 0 0 10px; color: var(--text); font-family: var(--font-mono); font-size: 14px; outline: none; transition: border-color .3s; }
.field input:focus { border-bottom-color: var(--accent); }
.field input:focus + .field-line { transform: scaleX(1); }
.field-line { position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: var(--accent); transform: scaleX(0); transition: transform .3s ease; transform-origin: left; box-shadow: 0 0 8px var(--accent); }
.field-focus { position: absolute; bottom: -2px; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); transform: translateX(-50%) scale(0); transition: transform .3s ease; box-shadow: 0 0 12px var(--accent); }
.field input:focus ~ .field-focus { transform: translateX(-50%) scale(1); }

.neon-btn {
  position: relative;
  width: 100%;
  padding: 14px 20px;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 3px;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  transition: .3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.neon-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(0,240,200,.2), transparent);
  transform: translateX(-100%);
  transition: transform .5s;
}
.neon-btn:hover::before { transform: translateX(100%); }
.neon-btn:hover { background: var(--accent-dim); box-shadow: 0 0 24px rgba(0,240,200,.2), inset 0 0 20px rgba(0,240,200,.05); }
.neon-btn:active { transform: translateY(1px); }
.neon-btn .btn-arrow { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 2; transition: transform .3s; }
.neon-btn:hover .btn-arrow { transform: translateX(4px); }
.neon-btn.small { padding: 10px 16px; font-size: 11px; letter-spacing: 2px; width: auto; }

#login-msg { text-align: center; margin-top: 14px; font-size: 11px; color: var(--danger); min-height: 16px; }

.footer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 30px;
  border-top: 1px solid var(--border);
  background: var(--panel);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--muted);
  position: relative;
}
.footer-bar::before {
  content: '';
  position: absolute;
  top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .4;
}
.footer-center { color: var(--accent); }

/* ===== APP ===== */
#app { display: flex; }
.sidebar {
  width: 240px;
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
}
.sidebar::after { content: ''; position: absolute; top:0; right:0; bottom:0; width: 1px; background: linear-gradient(180deg, transparent, var(--accent), transparent); opacity: .2; }
.sidebar-header { padding: 20px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; }
.logo-mark { font-family: var(--font-display); font-size: 22px; font-weight: 900; color: var(--accent); letter-spacing: 1px; line-height: 1; }
.logo-mark span { color: var(--text); font-size: 16px; }
.logo-sub { font-size: 8px; color: var(--muted); letter-spacing: 3px; text-transform: uppercase; margin-top: 3px; }

.sidebar nav { padding: 12px 0; flex: 1; overflow-y: auto; overflow-x: hidden; }
.sidebar nav a {
  display: flex;
  align-items: center;
  padding: 7px 16px;
  text-decoration: none;
  color: var(--text-2);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-left: 2px solid transparent;
  transition: color .15s, border-color .15s, background .15s;
}
.sidebar nav a::before { display: none; }
.sidebar nav a:hover { color: var(--text); background: rgba(229,57,53,.06); }
.sidebar nav a.active { color: var(--accent); border-left-color: var(--accent); background: rgba(229,57,53,.08); }
.sidebar nav a .ico { display: none; } /* icons removed — text only, enterprise */
.sidebar nav a .badge { margin-left: auto; background: var(--accent-dim); color: var(--accent); font-size: 9px; padding: 1px 6px; border-radius: 3px; min-width: 18px; text-align: center; }

.sidebar-footer { padding: 16px 20px; border-top: 1px solid var(--border); }
.conn-status { margin-bottom: 12px; font-size: 10px; letter-spacing: 2px; }
#status-text { color: var(--muted); }
#status-text.live { color: var(--accent); }
.conn-dot { display: none; } /* dot removed */
.logout-btn { width: 100%; padding: 10px; background: rgba(255,56,100,.08); border: 1px solid rgba(255,56,100,.25); color: var(--danger); font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; cursor: pointer; border-radius: 3px; transition: .2s; }
.logout-btn:hover { background: var(--danger); color: var(--bg); box-shadow: 0 0 16px rgba(255,56,100,.3); }

.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); position: relative; z-index: 1; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 0 30px; height: 68px; background: var(--panel); border-bottom: 1px solid var(--border); }
.page-info .crumb { font-size: 12px; color: var(--accent); letter-spacing: 2px; }
.page-info .crumb span { color: var(--text); font-family: var(--font-display); font-size: 18px; font-weight: 700; margin-left: 4px; }
.page-desc { font-size: 10px; color: var(--muted); letter-spacing: 2px; margin-top: 3px; }
.topbar-right { display: flex; align-items: center; gap: 28px; }
.clock { text-align: right; }
#clock-time { color: var(--accent); font-size: 16px; letter-spacing: 1px; font-family: var(--font-display); }
#clock-date { color: var(--muted); font-size: 10px; letter-spacing: 1px; margin-top: 2px; }
.operator { text-align: right; }
.op-label { font-size: 9px; color: var(--muted); letter-spacing: 2px; }
.op-name { color: var(--text); font-size: 13px; letter-spacing: 1px; margin-top: 2px; }

.content-area { flex: 1; overflow: auto; padding: 28px 30px; }

/* Hero stats — enterprise: flat, data-dense, no decoration */
.hero-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin-bottom: 24px; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.hstat {
  background: var(--panel);
  padding: 20px 18px;
  border-right: 1px solid var(--border);
  transition: background .15s;
  cursor: default;
}
.hstat:last-child { border-right: none; }
.hstat::before { display: none; }
.hstat::after  { display: none; }
.hstat:hover { background: var(--panel-2); }
.hs-val { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--accent); line-height: 1; }
.hs-label { margin-top: 8px; font-size: 9px; letter-spacing: 2px; color: var(--muted); text-transform: uppercase; }
.hs-dot { display: none; } /* colored dots removed — AI slop */

/* Dash layout */
.dash-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px; }
.network-panel { min-height: 480px; }
#network-map { height: 420px; border: 1px solid var(--border); border-radius: 6px; position: relative; overflow: hidden; background: #060404; }
/* grid drawn on canvas — ::before removed */
.map-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 11px; letter-spacing: 3px; }
.map-node {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--panel-2);
  border: 1px solid var(--accent);
  display: grid;
  place-items: center;
  font-size: 8px;
  color: var(--accent);
  cursor: pointer;
  transition: .2s;
  z-index: 4;
}
.map-node:hover { transform: scale(1.3); background: var(--accent-dim); z-index: 6; }
.map-center {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 8px;
  color: var(--accent);
  background: var(--panel-2);
  z-index: 5;
}
.map-center::after { display: none; }
.map-line { display: none; }

/* Panel */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 20px;
  position: relative;
}
.panel::before {
  content: '';
  position: absolute;
  top:0; left:0; right:0; height: 1px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  opacity: .4;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.panel-head h3 { font-family: var(--font-display); font-size: 12px; letter-spacing: 2px; font-weight: 500; }
.panel-badge { display: flex; align-items: center; font-size: 9px; letter-spacing: 2px; }
.panel-badge.live { color: var(--accent); }
.panel-badge.live span { display: none; }
.panel-badge.live::before { display: none; }
.panel-actions { display: flex; gap: 8px; align-items: center; }

button, select {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .5px;
  border-radius: 4px;
  cursor: pointer;
  transition: .2s;
  position: relative;
  overflow: hidden;
}
button::after, select::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent);
  transform: translateX(-100%);
  transition: transform .4s;
  pointer-events: none;
}
button:hover::after { transform: translateX(100%); }
button:hover, select:hover { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 12px var(--accent-dim); }
button.primary, button.glass.primary { background: rgba(0,240,200,.12); border-color: var(--accent); color: var(--accent); }
button.icon-btn { padding: 6px 10px; font-size: 14px; background: transparent; }
select { background: var(--panel-2); }
.glass { background: rgba(255,255,255,.03); border-color: var(--border); }
.glass:hover { background: rgba(0,240,200,.06); }

.table-wrap { overflow: auto; border: 1px solid var(--border); border-radius: 4px; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); }
th { color: var(--accent); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; background: rgba(0,240,200,.04); font-weight: 600; }
tr { transition: background .15s; }
tr:hover td { background: rgba(0,240,200,.04); }
.status-online { color: var(--accent); }
.status-offline { color: var(--muted); }

pre { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 16px; max-height: 60vh; overflow: auto; white-space: pre-wrap; font-size: 11px; color: var(--text); line-height: 1.6; }

/* Shell */
.shell-panel { display: flex; flex-direction: column; height: calc(100vh - 150px); }
#shell-output { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 16px; overflow: auto; font-size: 12px; line-height: 1.7; margin-bottom: 12px; min-height: 200px; }
.shell-input { display: flex; gap: 10px; align-items: center; }
.prompt { color: var(--accent); font-size: 12px; white-space: nowrap; }
#shell-cmd { flex: 1; background: var(--panel-2); border: 1px solid var(--border); padding: 10px 14px; color: var(--text); font-family: var(--font-mono); font-size: 12px; outline: none; border-radius: 4px; }
#shell-cmd:focus { border-color: var(--accent); box-shadow: 0 0 12px var(--accent-dim); }

/* Files */
.file-path-bar { padding: 10px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; margin-bottom: 10px; font-size: 11px; color: var(--accent); font-family: var(--font-mono); letter-spacing: .5px; }
#file-list { list-style: none; }
#file-list li { padding: 10px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; transition: .15s; cursor: pointer; }
#file-list li:hover { background: rgba(0,240,200,.05); }
#file-list li .fi { color: var(--accent); margin-right: 10px; }

/* Logs */
.log-entry { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 11px; align-items: center; }
.log-time { color: var(--muted); min-width: 150px; font-size: 10px; }
.log-tag { text-transform: uppercase; font-size: 8px; letter-spacing: 1px; padding: 3px 8px; border-radius: 3px; }
.log-tag.info { color: var(--accent); background: rgba(0,240,200,.1); border: 1px solid rgba(0,240,200,.2); }
.log-tag.warn { color: var(--warn); background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.2); }
.log-tag.error { color: var(--danger); background: rgba(255,56,100,.1); border: 1px solid rgba(255,56,100,.2); }
.log-msg { color: var(--text-2); }

/* Settings */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.setting { display: flex; justify-content: space-between; padding: 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; align-items: center; }
.sk { color: var(--muted); font-size: 10px; letter-spacing: 1px; }
.sv { color: var(--accent); font-size: 11px; letter-spacing: .5px; font-family: var(--font-mono); }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; }
.modal-overlay { position: absolute; inset: 0; background: rgba(5,6,8,.8); backdrop-filter: blur(4px); }
.modal-box {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  width: min(700px,92vw);
  max-height: 85vh;
  overflow: auto;
  box-shadow: 0 0 80px rgba(0,0,0,.6);
  z-index: 1;
}
.modal-box::before {
  content: '';
  position: absolute;
  top:0; left:0; right:0; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), transparent);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.modal-head h2 { font-family: var(--font-display); font-size: 15px; letter-spacing: 1px; }
.modal-head button { background: none; border: none; font-size: 24px; color: var(--muted); cursor: pointer; transition: .2s; }
.modal-head button:hover { color: var(--danger); }
#modal-body { padding: 22px; font-size: 12px; line-height: 1.8; }

/* Form row */
.form-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.form-row .field { flex: 1; min-width: 180px; margin-bottom: 0; }

/* View transition */
.tab { animation: fadeIn .35s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Chart widgets */
.chart-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.chart-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 18px;
  position: relative;
  overflow: hidden;
  transition: .3s;
}
.chart-card:hover { border-color: rgba(0,240,200,.25); transform: translateY(-2px); }
.chart-card::before { content: ''; position: absolute; top:0; left:0; right:0; height: 2px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); opacity: .5; }
.chart-title { font-family: var(--font-display); font-size: 10px; letter-spacing: 2px; color: var(--text-2); margin-bottom: 14px; }
.chart-flex { display: flex; align-items: center; gap: 20px; }
.donut {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: conic-gradient(var(--accent) var(--pct, 0%), var(--panel-3) 0);
  position: relative;
  flex-shrink: 0;
}
.donut::after {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: var(--panel);
}
.bar-chart { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: flex; align-items: center; gap: 10px; font-size: 10px; color: var(--text-2); }
.bar-track { flex: 1; height: 6px; background: var(--panel-3); border-radius: 3px; overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius: 3px; transition: width .8s ease; }
.mini-stat { font-family: var(--font-display); font-size: 22px; color: var(--accent); }

/* Terminal card */
.terminal-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.8;
  color: var(--text-2);
  position: relative;
  overflow: hidden;
}
.terminal-card::before {
  content: '';
  position: absolute;
  top:0; left:0; right:0; height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
}
.term-line { display: flex; gap: 10px; }
.term-prompt { color: var(--accent); white-space: nowrap; }
.term-cursor { display: inline-block; width: 7px; height: 13px; background: var(--accent); animation: blink 1s step-end infinite; vertical-align: middle; }

/* Equalizer loader */
.eq { display: flex; align-items: flex-end; gap: 3px; height: 18px; }
.eq span { width: 3px; background: var(--accent); border-radius: 1px; animation: eq .8s ease-in-out infinite alternate; }
.eq span:nth-child(1) { height: 30%; animation-delay: 0s; }
.eq span:nth-child(2) { height: 70%; animation-delay: .1s; }
.eq span:nth-child(3) { height: 50%; animation-delay: .2s; }
.eq span:nth-child(4) { height: 90%; animation-delay: .15s; }
.eq span:nth-child(5) { height: 40%; animation-delay: .25s; }
@keyframes eq { from { transform: scaleY(.3); opacity:.5 } to { transform: scaleY(1); opacity:1 } }

/* Agent cards grid */
.agent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-bottom: 20px; }
.agent-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 18px;
  position: relative;
  overflow: hidden;
  transition: .3s;
  cursor: pointer;
}
.agent-card:hover {
  border-color: rgba(0,240,200,.3);
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(0,0,0,.35), 0 0 24px rgba(0,240,200,.06);
}
.agent-card::before {
  content: '';
  position: absolute;
  top:0; left:0; right:0; height: 2px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  opacity: .4;
}
.agent-card.offline::before { background: var(--muted); opacity: .4; }
.agent-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.agent-card-id { font-family: var(--font-display); font-size: 10px; letter-spacing: 1px; color: var(--muted); }
.agent-card-status { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.agent-card.offline .agent-card-status { background: var(--muted); box-shadow: none; }
.agent-card-name { font-size: 15px; color: var(--text); margin-bottom: 4px; }
.agent-card-meta { font-size: 11px; color: var(--text-2); line-height: 1.6; }
.agent-card-actions { display: flex; gap: 8px; margin-top: 14px; }
.agent-card-actions button { flex: 1; padding: 8px; font-size: 10px; letter-spacing: 1px; }

/* Spotlight hover */
.spotlight { position: relative; }
.spotlight::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(300px circle at var(--x,50%) var(--y,50%), rgba(0,240,200,.12), transparent 60%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
  z-index: 0;
}
.spotlight:hover::before { opacity: 1; }

/* View transition */
.screen-panel { display: flex; flex-direction: column; height: calc(100vh - 140px); }
.screen-meta { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: 2px; color: var(--text-2); margin-bottom: 8px; }
#screen-status { color: var(--accent); }
.screen-viewport { flex: 1; background: #000; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; position: relative; display: flex; align-items: stretch; justify-content: stretch; min-height: 0; }
/* Fill entire viewport — JS sets the correct aspect-ratio so no letterboxing */
#screen-img { width: 100%; height: 100%; object-fit: fill; display: block; user-select:none; -webkit-user-drag:none; cursor: crosshair; }
#screen-placeholder { color: var(--muted); font-size: 11px; letter-spacing: 2px; }
#screen-img.active + #screen-placeholder { display: none; }

/* View transition */
.files-panel { display: flex; flex-direction: column; height: calc(100vh - 150px); }
.file-browser { flex: 1; display: flex; gap: 12px; overflow: hidden; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 12px; }
#file-list { list-style: none; flex: 1; overflow: auto; }
#file-list li { padding: 8px 10px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; transition: .15s; cursor: pointer; border-radius: 3px; }
#file-list li:hover { background: rgba(0,240,200,.06); }
#file-list li .fi { width: 18px; text-align: center; font-size: 12px; color: var(--accent); }
#file-list li .fname { flex: 1; font-size: 12px; color: var(--text); }
#file-list li .fext { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-left: auto; margin-right: 8px; }
#file-list li .factions { display: flex; gap: 6px; opacity: 0; transition: .2s; }
#file-list li:hover .factions { opacity: 1; }
#file-list li .factions button { padding: 4px 8px; font-size: 9px; letter-spacing: 1px; }
#file-preview { width: 380px; min-width: 380px; border-left: 1px solid var(--border); padding-left: 12px; display: flex; flex-direction: column; }
#file-preview.hidden { display: none; }
.preview-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
#preview-name { font-size: 12px; color: var(--accent); word-break: break-all; }
#preview-close { background: none; border: none; color: var(--danger); font-size: 20px; cursor: pointer; }
#preview-content { flex: 1; overflow: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 4px; padding: 12px; font-size: 11px; line-height: 1.6; white-space: pre-wrap; }
.file-drop-zone { margin-top: 12px; padding: 24px; border: 2px dashed var(--border); border-radius: 6px; text-align: center; color: var(--muted); font-size: 11px; letter-spacing: 1px; transition: .2s; }
.file-drop-zone.dragover { border-color: var(--accent); background: rgba(0,240,200,.06); color: var(--accent); }

/* View transition */
.tab { animation: fadeIn .35s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Responsive */
@media (max-width: 1200px) {
  .dash-layout { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: repeat(3, 1fr); }
  .chart-row { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .sidebar { width: 68px; }
  .logo-sub, .sidebar nav a span:not(.ico), .page-desc { display: none; }
  .logo-mark { font-size: 16px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .login-container { flex-direction: column; gap: 30px; }
  .login-visual { display: none; }
  .agent-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .hero-stats { grid-template-columns: 1fr; }
  .topbar { padding: 0 16px; }
  .content-area { padding: 16px; }
}

/* ── World map background on dashboard ─────────────────────────────────────── */
#dashboard {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500'%3E%3Cpath fill='none' stroke='rgba(229,57,53,0.08)' stroke-width='0.8' d='M180,120 Q200,100 240,110 Q260,115 280,105 Q310,95 340,100 Q370,105 390,95 Q420,85 450,90 Q470,92 490,85 Q520,78 550,82 Q580,86 600,80 Q630,74 650,78 Q670,82 690,78 Q720,72 740,76 Q760,80 780,76 L800,74 M160,160 Q200,150 240,155 Q280,160 320,152 Q360,144 400,150 Q440,156 480,148 Q520,140 560,146 Q600,152 640,144 Q680,136 720,142 Q760,148 800,140 M140,200 Q180,195 220,198 Q260,201 300,196 Q340,191 380,196 Q420,201 460,196 Q500,191 540,196 Q580,201 620,196 Q660,191 700,196 Q740,201 780,196 M200,240 Q240,238 280,240 Q320,242 360,238 Q400,234 440,238 Q480,242 520,238 Q560,234 600,238 Q640,242 680,238 Q720,234 760,238 M250,280 Q290,278 330,280 Q370,282 410,278 Q450,274 490,278 Q530,282 570,278 Q610,274 650,278 Q690,282 720,280 M100,140 Q120,130 140,140 Q160,150 170,145 M820,120 Q840,115 860,120 Q880,125 890,118 M80,180 Q100,175 115,180 Q130,185 135,178 M850,170 Q870,165 885,170 Q900,175 905,168'/%3E%3Ccircle cx='240' cy='180' r='2' fill='rgba(229,57,53,0.2)'/%3E%3Ccircle cx='480' cy='150' r='2' fill='rgba(229,57,53,0.2)'/%3E%3Ccircle cx='650' cy='160' r='3' fill='rgba(229,57,53,0.3)'/%3E%3Ccircle cx='380' cy='200' r='2' fill='rgba(229,57,53,0.2)'/%3E%3Ccircle cx='550' cy='190' r='2' fill='rgba(229,57,53,0.2)'/%3E%3Ccircle cx='720' cy='175' r='2' fill='rgba(229,57,53,0.2)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 30%;
}

/* ── Red-tinted network map grid ───────────────────────────────────────────── */
#network-map::before {
  background-image:
    linear-gradient(rgba(229,57,53,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(229,57,53,.05) 1px, transparent 1px) !important;
}

/* ── Agent cards online indicator — red pulse ring ─────────────────────────── */
.agent-card-status {
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(229,57,53,.25);
}

/* ── Sidebar active nav item ────────────────────────────────────────────────── */
.sidebar nav a.active {
  background: linear-gradient(90deg, rgba(229,57,53,.12), transparent) !important;
}

/* ── Login globe rings — red tint ───────────────────────────────────────────── */
.globe-core {
  background: radial-gradient(circle at 30% 30%, rgba(229,57,53,.2), transparent 60%);
}

/* map-node/center/line defined above in main section */

/* ── Table online status ────────────────────────────────────────────────────── */
.status-online { color: var(--accent); }

/* ── Neon button — red ──────────────────────────────────────────────────────── */
.neon-btn { border-color: var(--accent); color: var(--accent); }
.neon-btn:hover { background: var(--accent-dim); }

/* ── Scrollbar — red thumb ──────────────────────────────────────────────────── */
::-webkit-scrollbar-thumb { background: var(--panel-3); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── Boot progress bar ──────────────────────────────────────────────────────── */
#boot-bar { background: linear-gradient(90deg, #8b0000, var(--accent)); }

/* ── Shimmer on boot terminal ───────────────────────────────────────────────── */
.boot-terminal::before {
  background: linear-gradient(90deg, transparent, var(--accent), #ff5252, transparent);
}

/* ── hstat top stripe ───────────────────────────────────────────────────────── */
.hstat::before,
.chart-card::before,
.panel::before {
  background: linear-gradient(90deg, #8b0000, var(--accent));
}

/* ── Topbar border ───────────────────────────────────────────────────────────── */
.topbar { border-bottom: 1px solid rgba(229,57,53,.15); }
.sidebar { border-right: 1px solid rgba(229,57,53,.1); }

/* ── Cookie domain grid ─────────────────────────────────────────────────── */
.ck-br-btn { transition: opacity .15s, background .15s; }
.ck-br-btn.active { background: rgba(229,57,53,.25) !important; border-color: var(--accent) !important; color: var(--accent); opacity: 1; }
.ck-domain-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 12px; }
.ck-domain-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 4px; padding: 14px; }
.ck-domain-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ck-domain-name { color: var(--accent); font-size: 13px; font-family: var(--font-mono); font-weight: 700; }
.ck-domain-count { font-size: 10px; color: var(--muted); letter-spacing: 1px; }
.ck-cookie-list { background: var(--bg); border: 1px solid var(--border); border-radius: 3px; padding: 8px; margin-bottom: 10px; max-height: 160px; overflow: auto; }
.ck-cookie-row { display: flex; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 11px; }
.ck-cookie-row:last-child { border-bottom: none; }
.ck-cname { color: var(--accent); min-width: 100px; flex-shrink: 0; }
.ck-cval  { color: var(--text-2); word-break: break-all; font-size: 10px; }
.ck-actions { display: flex; gap: 8px; }
.ck-actions button { flex: 1; padding: 7px; font-size: 10px; letter-spacing: 1px; }

/* ── Troll cards ─────────────────────────────────────────────────────────── */
.troll-card { background: var(--panel-2); border: 1px solid rgba(229,57,53,.2); border-radius:6px; padding:14px; display:flex; flex-direction:column; gap:4px; }
.troll-label { color: var(--accent); font-size:12px; font-family:var(--font-display); letter-spacing:1px; }
.troll-desc  { color: var(--muted); font-size:10px; }

/* ── Video drop zone hover ──────────────────────────────────────────────── */
#video-drop:hover { border-color: rgba(229,57,53,.7); background: rgba(229,57,53,.05); }

.screen-viewport.locked #screen-img { cursor: none; }

.rblx-card { display:flex; align-items:center; gap:14px; background:var(--panel-2); border:1px solid var(--border); border-radius:6px; padding:12px 16px; min-width:280px; max-width:360px; }
.rblx-avatar { width:52px; height:52px; border-radius:50%; border:2px solid var(--accent); background:var(--bg2); object-fit:cover; flex-shrink:0; }
.rblx-info { flex:1; min-width:0; }
.rblx-username { font-size:14px; font-weight:700; color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rblx-display { font-size:11px; color:var(--muted); margin-top:2px; }
.rblx-browser { font-size:9px; letter-spacing:1px; color:var(--accent); margin-top:4px; text-transform:uppercase; }
.rblx-actions { display:flex; flex-direction:column; gap:6px; flex-shrink:0; }
.rblx-actions button { font-size:10px; padding:5px 10px; white-space:nowrap; }

/* ── Discord Tab ─────────────────────────────────────────────────────────── */
.dc-card { display:flex; align-items:center; gap:14px; background:var(--panel-2); border:1px solid var(--border); border-radius:6px; padding:12px 16px; min-width:300px; max-width:400px; }
.dc-avatar { width:52px; height:52px; border-radius:50%; border:2px solid #5865F2; background:var(--bg2); object-fit:cover; flex-shrink:0; }
.dc-info { flex:1; min-width:0; }
.dc-username { font-size:14px; font-weight:700; color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dc-global { font-size:11px; color:var(--muted); margin-top:2px; }
.dc-badges { display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; align-items:center; }
.dc-badge-icon { width:20px; height:20px; object-fit:contain; cursor:default; }
.dc-token { font-size:9px; color:var(--muted); margin-top:4px; font-family:var(--font-mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; }
.dc-actions { display:flex; flex-direction:column; gap:6px; flex-shrink:0; }
.dc-actions button { font-size:10px; padding:5px 10px; white-space:nowrap; }

/* ── Autofill Tab ────────────────────────────────────────────────────────── */
.af-subtabs { display:flex; gap:4px; padding:0 0 16px; border-bottom:1px solid var(--border); margin-bottom:16px; flex-wrap:wrap; }
.af-tab { background:transparent; border:1px solid var(--border); color:var(--muted); padding:6px 18px; border-radius:4px; font-size:11px; letter-spacing:1px; text-transform:uppercase; cursor:pointer; font-family:var(--font-mono); transition:all .15s; }
.af-tab:hover { border-color:var(--accent); color:var(--fg); }
.af-tab.active { background:rgba(229,57,53,.12); border-color:var(--accent); color:var(--accent); }
.af-section table { width:100%; border-collapse:collapse; font-size:12px; }
.af-section th { text-align:left; padding:8px 12px; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--border); font-family:var(--font-mono); font-weight:400; }
.af-section td { padding:9px 12px; border-bottom:1px solid rgba(255,255,255,.04); color:var(--fg); vertical-align:middle; }
.af-section tr:hover td { background:rgba(255,255,255,.02); }
.af-browser-badge { background:rgba(229,57,53,.12); color:var(--accent); border:1px solid rgba(229,57,53,.25); border-radius:3px; padding:2px 7px; font-size:9px; letter-spacing:1px; text-transform:uppercase; font-family:var(--font-mono); white-space:nowrap; }
.af-pw-mask { font-family:var(--font-mono); letter-spacing:2px; margin-right:8px; }
.af-show-btn { font-size:9px !important; padding:2px 8px !important; letter-spacing:.5px; }

/* ── Build Tab ───────────────────────────────────────────────────────────── */
.build-info-row { display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; }
.build-log { background:var(--bg2); border:1px solid var(--border); border-radius:6px;
  padding:14px 16px; font-family:var(--font-mono); font-size:11px; line-height:1.6;
  color:#7ef; max-height:420px; overflow-y:auto; white-space:pre-wrap;
  word-break:break-all; margin:0; }
.build-badge { font-size:14px; font-weight:700; letter-spacing:.5px; }
.build-ok      { color:#4caf50; }
.build-err     { color:var(--accent); }
.build-running { color:var(--warn); animation:pulse 1s infinite; }

/* ── Users Tab ───────────────────────────────────────────────────────────── */
.user-add-form { background:var(--bg2); border:1px solid var(--border); border-radius:6px; padding:16px; margin-top:14px; }
.tab-perms-grid { display:flex; flex-wrap:wrap; gap:8px; }
.tab-perm-check { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--muted);
  background:var(--panel-2); border:1px solid var(--border); border-radius:4px; padding:4px 10px;
  cursor:pointer; transition:all .15s; user-select:none; }
.tab-perm-check:hover { border-color:var(--accent); color:var(--fg); }
.tab-perm-check input[type=checkbox] { accent-color:var(--accent); }
.user-role-badge { font-size:9px; letter-spacing:1.5px; text-transform:uppercase; padding:2px 8px;
  border-radius:3px; font-family:var(--font-mono); }
.user-role-owner    { background:rgba(229,57,53,.15); color:var(--accent); border:1px solid rgba(229,57,53,.3); }
.user-role-operator { background:rgba(255,152,0,.1); color:#ffa000; border:1px solid rgba(255,152,0,.25); }
.user-role-user     { background:rgba(255,255,255,.05); color:var(--muted); border:1px solid var(--border); }