/* ═══════════════════════════════════════════════════════════════════
   NICE SPACESHIP — Shared Stylesheet
   All 7 theme tokens + every component used across all pages.
   Designed for easy extraction into Next.js CSS Modules / Tailwind.
═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   MODULE: THEME TOKENS
───────────────────────────────────────────────────────────────── */

/* Nice Spaceship — modern dark command center */
:root, [data-theme="spaceship"] {
  --bg:           #09090b;
  --bg2:          #18181b;
  --bg-alt:       #18181b;
  --surface:      #18181b;
  --surface2:     #27272a;
  --border:       #3f3f46;
  --border-hi:    #71717a;
  --accent:       #e0e7ff;
  --accent2:      #a5b4fc;
  --text:         #fafafa;
  --fg:           #fafafa;
  --text-muted:   #a1a1aa;
  --text-dim:     #3f3f46;
  --glow:         0 0 0 1px rgba(224,231,255,0.06);
  --glow-hi:      0 0 12px rgba(224,231,255,0.08);
  --font-d:       'Inter', sans-serif;
  --font-h:       'Inter', sans-serif;
  --font-b:       'Inter', sans-serif;
  --font-m:       'Fira Code', monospace;
  --font-brand:   'Orbitron', sans-serif;
  --radius:       10px;
  --scan:         0;
  --border-width: 1px;
  --nav-bg:       rgba(9,9,11,0.92);
  --panel-bg:     rgba(24,24,27,0.75);
  --hero-grad:    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(224,231,255,0.04) 0%, transparent 70%);
  --bg-pattern:   radial-gradient(circle, rgba(165,180,252,0.06) 1px, transparent 1px);
}

/* Robotech — light day mode, exact inversion of spaceship */
[data-theme="robotech"] {
  --bg:           #f8f8f8;
  --bg2:          #efefef;
  --surface:      #e4e4e4;
  --surface2:     #d8d8d8;
  --border:       #c8c8c8;
  --border-hi:    #888888;
  --accent:       #080808;
  --accent2:      #444444;
  --text:         #0f0f0f;
  --fg:           #0f0f0f;
  --text-muted:   #666666;
  --text-dim:     #bbbbbb;
  --glow:         none;
  --glow-hi:      none;
  --font-d:       'Orbitron', sans-serif;
  --font-h:       'Orbitron', sans-serif;
  --font-b:       'Inter', sans-serif;
  --font-m:       'Fira Code', monospace;
  --radius:       0px;
  --scan:         0;
  --border-width: 1px;
  --nav-bg:       rgba(248,248,248,0.97);
  --panel-bg:     rgba(239,239,239,0.97);
  --hero-grad:    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(0,0,0,0.04) 0%, transparent 70%);
  --bg-pattern:   none;
}

/* ═══ NICE SPACESHIP — Premium Dark Command Center ═══════════════════ */

@keyframes ns-scanline {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}
@keyframes ns-pulse-border {
  0%, 100% { border-color: #2a2a2a; }
  50% { border-color: #444; }
}

/* Scan line removed — was distracting on content pages */

/* Sidebar — glass panel */
[data-theme="spaceship"] .app-sidebar {
  background: #09090b;
  border-right: 1px solid var(--border);
}
[data-theme="spaceship"] .side-header {
  background: transparent;
  border-bottom: 1px solid var(--border);
}
[data-theme="spaceship"] .side-header::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224,231,255,0.1), transparent);
}
[data-theme="spaceship"] .side-header .app-brand-text {
  font-family: var(--font-brand, 'Orbitron', sans-serif);
  color: var(--accent);
  letter-spacing: .25em;
  text-transform: uppercase;
}
[data-theme="spaceship"] .side-link {
  border-radius: var(--radius);
  margin: 2px 6px;
  padding: 8px 12px;
  font-family: var(--font-b);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .58rem;
  color: var(--text-muted);
  transition: all .15s;
}
[data-theme="spaceship"] .side-link:hover {
  color: var(--text);
  background: rgba(224,231,255,0.05);
}
[data-theme="spaceship"] .side-link.active {
  color: var(--accent);
  background: rgba(224,231,255,0.08);
}
[data-theme="spaceship"] .side-link svg { opacity: 0.5; }
[data-theme="spaceship"] .side-link.active svg { opacity: 1; }
[data-theme="spaceship"] .side-footer {
  background: transparent;
  border-top: 1px solid var(--border);
}
[data-theme="spaceship"] .hdr-user-badge {
  background: transparent; color: var(--text-muted); border-color: var(--border);
}

/* Topbar — subtle gradient line */
[data-theme="spaceship"] .app-topbar {
  background: #09090b;
  border-bottom: none;
  position: relative;
}
[data-theme="spaceship"] .app-topbar::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--border) 30%, var(--border-hi) 50%, var(--border) 70%, transparent 100%);
}

/* Panels — glass cards */
[data-theme="spaceship"] .widget-card,
[data-theme="spaceship"] .tc-section,
[data-theme="spaceship"] .detail-section {
  border: 1px solid var(--border);
  background: var(--panel-bg);
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
[data-theme="spaceship"] .widget-card:hover,
[data-theme="spaceship"] .detail-section:hover {
  border-color: var(--border-hi);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

/* Buttons — soft command */
[data-theme="spaceship"] .btn {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-b);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .6rem;
  transition: all .15s;
}
[data-theme="spaceship"] .btn:hover {
  background: rgba(224,231,255,0.08);
  color: var(--text);
  border-color: var(--border-hi);
  box-shadow: var(--glow);
}
[data-theme="spaceship"] .btn-primary {
  background: var(--accent);
  color: #09090b;
  border-color: var(--accent);
}
[data-theme="spaceship"] .btn-primary:hover {
  background: var(--accent2);
  border-color: var(--accent2);
  box-shadow: 0 0 16px rgba(224,231,255,0.15);
}

/* Tabs — spaceship inherits base segmented-button style */
[data-theme="spaceship"] .bridge-hero-tab,
[data-theme="spaceship"] .log-view-tab {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-h);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .55rem;
  transition: all .15s;
}
[data-theme="spaceship"] .bridge-hero-tab.active,
[data-theme="spaceship"] .log-view-tab.active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(224,231,255,0.06);
}
[data-theme="spaceship"] .bridge-hero-tab:hover,
[data-theme="spaceship"] .log-view-tab:hover {
  color: var(--text);
  border-color: var(--border-hi);
}

/* Sub-tabs & filters */
[data-theme="spaceship"] .bp-sub-tab {
  border: 1px solid var(--border);
  background: transparent; color: var(--text-muted);
  font-family: var(--font-h); font-weight: 500;
  text-transform: uppercase; letter-spacing: .08em; font-size: .55rem;
}
[data-theme="spaceship"] .bp-sub-tab.active { color: var(--accent); border-color: var(--accent); background: rgba(224,231,255,0.06); }
[data-theme="spaceship"] .bp-rarity-btn {
  border: 1px solid var(--border);
  background: transparent; color: var(--text-dim);
  font-family: var(--font-h); font-size: .5rem;
}
[data-theme="spaceship"] .bp-rarity-btn.active { color: var(--text); border-color: var(--border-hi); background: rgba(224,231,255,0.06); }
[data-theme="spaceship"] .bp-view-btn {
  border: 1px solid var(--border); background: transparent;
}
[data-theme="spaceship"] .bp-view-btn.active { border-color: var(--border-hi); background: rgba(224,231,255,0.06); }

/* Mission cards */
[data-theme="spaceship"] .mc-card {
  border: 1px solid var(--border);
  border-left: 2px solid var(--border-hi);
  background: var(--panel-bg);
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
[data-theme="spaceship"] .mc-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
[data-theme="spaceship"] .mc-card-running { border-left-color: var(--accent); }
[data-theme="spaceship"] .mc-card-completed { border-left-color: var(--text-muted); }
[data-theme="spaceship"] .mc-card-failed { border-left-color: var(--color-error, #ef4444); }

/* Pipeline nodes */
[data-theme="spaceship"] .mc-pipe-node {
  border: 1px solid var(--border);
  background: transparent; color: var(--text-muted);
  transition: all .15s;
}
[data-theme="spaceship"] .mc-pipe-node:hover,
[data-theme="spaceship"] .mc-pipe-active {
  background: var(--accent); color: #09090b; border-color: var(--accent);
}

/* Inputs */
[data-theme="spaceship"] input[type="text"],
[data-theme="spaceship"] .search-input {
  border: 1px solid var(--border);
  background: rgba(9,9,11,0.8); color: var(--text);
  font-family: var(--font-b); font-size: .75rem;
  transition: border-color .15s, box-shadow .15s;
}
[data-theme="spaceship"] input[type="text"]:focus,
[data-theme="spaceship"] .search-input:focus { border-color: var(--accent2); box-shadow: 0 0 0 2px rgba(165,180,252,0.1); }
[data-theme="spaceship"] select {
  border: 1px solid var(--border); color: var(--text);
  background: rgba(9,9,11,0.8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
  appearance: none; -webkit-appearance: none;
}
[data-theme="spaceship"] .filter-select {
  border: 1px solid var(--border); color: var(--text);
  background: rgba(9,9,11,0.8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
  appearance: none; -webkit-appearance: none;
}
[data-theme="spaceship"] .search-box { background: rgba(9,9,11,0.8); border-color: var(--border); }

/* Prompt panel */
[data-theme="spaceship"] .nice-ai-input-area {
  border: 1px solid var(--border); border-radius: 16px;
  background: #09090b;
}
[data-theme="spaceship"] .nice-ai-input-area:focus-within { border-color: var(--accent2); box-shadow: 0 0 0 2px rgba(165,180,252,0.1); }
[data-theme="spaceship"] .nice-ai-input { color: var(--text); }
[data-theme="spaceship"] .nice-ai-input::placeholder { color: var(--text-dim); }
[data-theme="spaceship"] .nice-ai-chip {
  border: 1px solid var(--border);
  background: transparent; color: var(--text-muted);
  font-family: var(--font-b); text-transform: uppercase; font-size: .5rem;
  transition: all .15s;
}
[data-theme="spaceship"] .nice-ai-chip:hover { border-color: var(--border-hi); color: var(--text); }
[data-theme="spaceship"] .chat-pill {
  border-radius: 9999px; border: 1px solid var(--border);
  background: transparent; color: var(--text-muted);
  transition: all .15s;
}
[data-theme="spaceship"] .chat-pill:hover { border-color: var(--accent2); color: var(--text); background: rgba(224,231,255,0.04); }

/* Schematic */
[data-theme="spaceship"] .schematic-wired .tcg-card-mini { border-radius: var(--radius); }

/* HUD */
[data-theme="spaceship"] .app-hud-panel {
  background: rgba(9,9,11,0.95);
  border: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
[data-theme="spaceship"] .app-hud-panel .dock-lbl { color: var(--text-muted); }
[data-theme="spaceship"] .app-hud-panel .dock-lbl a { color: var(--accent2); }
[data-theme="spaceship"] .app-hud-panel .dock-lbl-val { color: var(--accent); font-weight: 500; }
[data-theme="spaceship"] .app-hud-panel .db { border: 2px solid var(--border); }
[data-theme="spaceship"] .app-hud-panel .db.active { border-color: var(--accent); box-shadow: 0 0 10px rgba(224,231,255,0.15); }
[data-theme="spaceship"] .app-hud-panel .fb { border-color: var(--border); color: var(--text-muted); }
[data-theme="spaceship"] .app-hud-panel .fb.active { background: rgba(224,231,255,0.08); color: var(--accent); border-color: var(--accent); }

/* Scrollbar */
[data-theme="spaceship"] ::-webkit-scrollbar { width: 5px; }
[data-theme="spaceship"] ::-webkit-scrollbar-track { background: transparent; }
[data-theme="spaceship"] ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 9999px; }
[data-theme="spaceship"] ::-webkit-scrollbar-thumb:hover { background: var(--border-hi); }

/* Popover */
[data-theme="spaceship"] .side-popover { background: #09090b; border: 1px solid var(--border); }
[data-theme="spaceship"] .side-popover-item {
  color: var(--text-muted); font-family: var(--font-b);
  text-transform: uppercase; letter-spacing: .08em; font-size: .58rem;
  transition: all .15s;
}
[data-theme="spaceship"] .side-popover-item:hover { background: rgba(224,231,255,0.06); color: var(--text); }

/* Sidebar folder */
[data-theme="spaceship"] .side-folder-toggle { color: var(--text-dim); border-color: var(--border); }
[data-theme="spaceship"] .side-folder-body { border-left-color: var(--border); }

/* ── Extended polish ── */

/* Greeting — gradient text */
[data-theme="spaceship"] .chat-home-greeting {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 50%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Prompt bar — glow on focus */
[data-theme="spaceship"] .nice-ai-input-area:focus-within {
  border-color: var(--accent2);
  box-shadow: 0 0 0 2px rgba(165,180,252,0.12), 0 0 20px rgba(165,180,252,0.06);
}

/* Chat pills — filled hover + glow */
[data-theme="spaceship"] .chat-pill:hover {
  border-color: var(--accent2);
  color: var(--accent);
  background: rgba(165,180,252,0.08);
  box-shadow: 0 0 12px rgba(165,180,252,0.08);
}

/* Active sidebar — left accent bar + icon glow */
[data-theme="spaceship"] .side-link.active {
  color: var(--accent);
  background: rgba(165,180,252,0.1);
  box-shadow: inset 3px 0 0 var(--accent2);
}
[data-theme="spaceship"] .side-link.active svg {
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(165,180,252,0.4));
}


/* Toggles — accent glow when checked */
[data-theme="spaceship"] .toggle-switch input:checked + .toggle-slider {
  background: var(--accent2);
  box-shadow: 0 0 8px rgba(165,180,252,0.3);
}
[data-theme="spaceship"] .bp-toggle-switch.on .toggle-track {
  background: var(--accent2);
  box-shadow: 0 0 8px rgba(165,180,252,0.3);
}

/* Scrollbar — accent on hover */
[data-theme="spaceship"] ::-webkit-scrollbar-thumb:hover { background: var(--accent2); }

/* Focus rings — accent for accessibility */
[data-theme="spaceship"] .btn:focus-visible,
[data-theme="spaceship"] input:focus-visible,
[data-theme="spaceship"] select:focus-visible,
[data-theme="spaceship"] textarea:focus-visible,
[data-theme="spaceship"] .side-link:focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(165,180,252,0.1);
}

/* Cards — subtle inner glow on hover */
[data-theme="spaceship"] .mc-card:hover {
  border-color: var(--border-hi);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3), inset 0 1px 0 rgba(165,180,252,0.06);
}
[data-theme="spaceship"] .integ-card:hover,
[data-theme="spaceship"] .fleet-card:hover,
[data-theme="spaceship"] .security-card:hover,
[data-theme="spaceship"] .settings-section:hover {
  border-color: var(--border-hi);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

/* Selects — focus ring */
[data-theme="spaceship"] select:focus {
  border-color: var(--accent2);
  box-shadow: 0 0 0 2px rgba(165,180,252,0.1);
  outline: none;
}

/* HUD button — subtle accent */
[data-theme="spaceship"] .hud-btn {
  border-color: var(--border);
  transition: all .15s;
}
[data-theme="spaceship"] .hud-btn:hover {
  border-color: var(--accent2);
  color: var(--accent);
  box-shadow: 0 0 8px rgba(165,180,252,0.1);
}

/* ── Background animations ── */

/* Ambient gradient orbs */
[data-theme="spaceship"] body::before,
[data-theme="spaceship"] body::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}
[data-theme="spaceship"] body::before {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(99,102,241,0.12) 0%, transparent 70%);
  top: -10%; left: -5%;
  animation: orbFloat1 25s ease-in-out infinite;
}
[data-theme="spaceship"] body::after {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(165,180,252,0.1) 0%, transparent 70%);
  bottom: -10%; right: -5%;
  animation: orbFloat2 30s ease-in-out infinite;
}

/* Third orb via app-main */
[data-theme="spaceship"] .app-main::before {
  content: '';
  position: fixed;
  width: 350px; height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,0.08) 0%, transparent 70%);
  filter: blur(100px);
  top: 40%; left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
  animation: orbFloat3 20s ease-in-out infinite;
}

@keyframes orbFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(80px, 60px) scale(1.1); }
  66% { transform: translate(-40px, 100px) scale(0.95); }
}
@keyframes orbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-60px, -80px) scale(1.15); }
  66% { transform: translate(50px, -40px) scale(0.9); }
}
@keyframes orbFloat3 {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-30%, -60%) scale(1.2); }
}

/* Radial pulse — breathing glow from center */
[data-theme="spaceship"] .app-main::after {
  content: '';
  position: fixed;
  top: 50%; left: 50%;
  width: 600px; height: 600px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(165,180,252,0.03) 0%, transparent 60%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: radialPulse 8s ease-in-out infinite;
}
@keyframes radialPulse {
  0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.3); }
}

/* Reduced motion — disable all background animations */
@media (prefers-reduced-motion: reduce) {
  [data-theme="spaceship"] body::before,
  [data-theme="spaceship"] body::after,
  [data-theme="spaceship"] .app-main::before,
  [data-theme="spaceship"] .app-main::after {
    animation: none !important;
    opacity: 0.3 !important;
  }
}
[data-theme="spaceship"] .side-mission-item { color: var(--text-dim); transition: all .15s; }
[data-theme="spaceship"] .side-mission-item:hover { background: rgba(224,231,255,0.04); color: var(--text); }


/* ═══════════════════════════════════════════════════════════════════════
   HAL-9000 — 2001: A Space Odyssey
   Sterile white Discovery interior. Chrome accents. HAL red eye.
   Clean, clinical, minimal. The only color is HAL's red.
═══════════════════════════════════════════════════════════════════════ */

@keyframes hal-eye-pulse {
  0%, 100% { filter:brightness(1) drop-shadow(0 0 8px rgba(239,68,68,0.3)); }
  50%      { filter:brightness(1.1) drop-shadow(0 0 16px rgba(239,68,68,0.5)); }
}

[data-theme="robotech"] {
  --bg:#f2f2f0; --bg2:#eaeae8; --surface:#fff; --surface2:#f8f8f6;
  --border:#d0d0ce; --border-hi:#999;
  --accent:#666; --accent2:#999;
  --text:#1a1a1a; --text-muted:#888;
  --glow:none; --panel-bg:#fff; --nav-bg:#f2f2f0;
  --font-h:'Inter', sans-serif; --font-b:'Inter', sans-serif;
  --radius:4px;
}

/* ── No background effects — pure sterile white ── */
[data-theme="robotech"] .bg-grid { opacity:0; }

/* ── Sidebar — white panel, chrome border ── */
[data-theme="robotech"] .app-sidebar {
  background:#f2f2f0; border-right:1px solid #d0d0ce;
}
[data-theme="robotech"] .side-header {
  background:transparent; border-bottom:1px solid #d0d0ce;
}
[data-theme="robotech"] .side-header .app-brand-text {
  color:#1a1a1a; letter-spacing:.2em; text-transform:uppercase;
}
[data-theme="robotech"] .side-link {
  border-radius:4px; margin:1px 8px; padding:8px 12px;
  font-weight:500; font-size:.7rem; color:#888; transition:all .15s;
}
[data-theme="robotech"] .side-link:hover { color:#1a1a1a; background:rgba(0,0,0,0.03); }
[data-theme="robotech"] .side-link.active {
  color:#1a1a1a; background:rgba(0,0,0,0.05); border-left:2px solid #1a1a1a;
}
[data-theme="robotech"] .side-link svg { opacity:0.3; }
[data-theme="robotech"] .side-link.active svg { opacity:0.7; }
[data-theme="robotech"] .side-footer { background:transparent; border-top:1px solid #d0d0ce; }
[data-theme="robotech"] .hdr-user-badge { background:#1a1a1a; color:#fff; border-color:#1a1a1a; }

/* ── Topbar — clean line ── */
[data-theme="robotech"] .app-topbar {
  background:#f2f2f0; border-bottom:none; position:relative;
}
[data-theme="robotech"] .app-topbar::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background:#d0d0ce;
}

/* ── Panels — pure white, thin borders ── */
[data-theme="robotech"] .widget-card,
[data-theme="robotech"] .tc-section,
[data-theme="robotech"] .detail-section {
  border:1px solid #e0e0de; border-radius:4px; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,0.04);
}

/* ── Cards — white, minimal ── */
[data-theme="robotech"] .tcg-card,
[data-theme="robotech"] .mcp-catalog-card {
  border:1px solid #e0e0de; border-radius:4px; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,0.04); transition:all .2s;
}
[data-theme="robotech"] .tcg-card:hover,
[data-theme="robotech"] .mcp-catalog-card:hover {
  box-shadow:0 4px 16px rgba(0,0,0,0.08); transform:translateY(-1px);
}

/* ── Buttons — clean, gray ── */
[data-theme="robotech"] .btn {
  border:1px solid #d0d0ce; border-radius:4px; background:#fff; color:#1a1a1a;
  font-weight:500; transition:all .15s;
}
[data-theme="robotech"] .btn:hover {
  background:#1a1a1a; color:#fff; border-color:#1a1a1a;
}
[data-theme="robotech"] .btn-primary {
  background:#1a1a1a; border:none; color:#fff;
}
[data-theme="robotech"] .btn-primary:hover {
  background:#333;
}

/* ── Tabs — clean segments ── */
[data-theme="robotech"] .bp-type-tabs {
  background:#eaeae8; border:1px solid #d0d0ce; border-radius:6px; padding:2px;
}
[data-theme="robotech"] .bp-type-tab,
[data-theme="robotech"] .bridge-hero-tab,
[data-theme="robotech"] .log-view-tab {
  border-radius:4px; border:none; background:transparent; color:#888;
  font-weight:500; font-size:.7rem; transition:all .15s;
}
[data-theme="robotech"] .bp-type-tab.active,
[data-theme="robotech"] .bridge-hero-tab.active,
[data-theme="robotech"] .log-view-tab.active {
  color:#1a1a1a; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.06);
}
[data-theme="robotech"] .bp-type-tab:hover,
[data-theme="robotech"] .bridge-hero-tab:hover,
[data-theme="robotech"] .log-view-tab:hover { color:#1a1a1a; }

/* ── Sub-tabs & filters ── */
[data-theme="robotech"] .bp-sub-tab {
  border-radius:4px; border:1px solid #d0d0ce; background:transparent; color:#888;
}
[data-theme="robotech"] .bp-sub-tab.active { color:#1a1a1a; border-color:#999; background:rgba(0,0,0,0.03); }
[data-theme="robotech"] .bp-rarity-btn {
  border-radius:4px; border:1px solid #e0e0de; background:transparent; color:#aaa; font-size:.6rem;
}
[data-theme="robotech"] .bp-rarity-btn.active { color:#1a1a1a; border-color:#999; background:rgba(0,0,0,0.03); }
[data-theme="robotech"] .bp-view-btn { border-radius:4px; border:1px solid #e0e0de; background:transparent; }
[data-theme="robotech"] .bp-view-btn.active { border-color:#999; background:rgba(0,0,0,0.03); }
[data-theme="robotech"] .bp-view-btn svg { stroke:#aaa; }
[data-theme="robotech"] .bp-view-btn.active svg { stroke:#1a1a1a; }

/* ── Mission Cards ── */
[data-theme="robotech"] .mc-card {
  border:1px solid #e0e0de; border-radius:4px; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,0.04);
  border-left:2px solid #d0d0ce;
}
[data-theme="robotech"] .mc-card-running { border-left-color:#1a1a1a; }
[data-theme="robotech"] .mc-card-completed { border-left-color:#888; }
[data-theme="robotech"] .mc-card-failed { border-left-color:#ef4444; }

/* ── Pipeline nodes ── */
[data-theme="robotech"] .mc-pipe-node {
  border-radius:4px; border:1px solid #d0d0ce; background:transparent; color:#888;
}
[data-theme="robotech"] .mc-pipe-node:hover,
[data-theme="robotech"] .mc-pipe-active {
  background:#1a1a1a; color:#fff; border-color:#1a1a1a;
}

/* ── Inputs ── */
[data-theme="robotech"] input[type="text"],
[data-theme="robotech"] .search-input {
  border-radius:4px; border:1px solid #d0d0ce; background:#fff; color:#1a1a1a; font-size:.75rem;
}
[data-theme="robotech"] input[type="text"]:focus,
[data-theme="robotech"] .search-input:focus { border-color:#999; }
[data-theme="robotech"] input::placeholder { color:#bbb; }
[data-theme="robotech"] select {
  border-radius:4px; border:1px solid #d0d0ce; color:#1a1a1a;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
  appearance:none; -webkit-appearance:none;
}
[data-theme="robotech"] .filter-select {
  border-radius:4px; border:1px solid #d0d0ce; color:#1a1a1a;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
  appearance:none; -webkit-appearance:none;
}
[data-theme="robotech"] .search-box { background:#fff; border-color:#d0d0ce; border-radius:4px; }

/* ── Prompt Panel ── */
[data-theme="robotech"] .nice-ai-input-area {
  border:1px solid #d0d0ce; border-radius:8px; background:#fff;
}
[data-theme="robotech"] .nice-ai-input-area:focus-within { border-color:#999; }
[data-theme="robotech"] .nice-ai-input { color:#1a1a1a; }
[data-theme="robotech"] .nice-ai-input::placeholder { color:#bbb; }
[data-theme="robotech"] .nice-ai-chip {
  border-radius:4px; border:1px solid #d0d0ce; background:transparent; color:#888; font-size:.6rem;
}
[data-theme="robotech"] .nice-ai-chip:hover { border-color:#999; color:#1a1a1a; }
[data-theme="robotech"] .chat-pill {
  border-radius:9999px; border:1px solid #d0d0ce; background:transparent; color:#888;
}
[data-theme="robotech"] .chat-pill:hover { border-color:#999; color:#1a1a1a; }
[data-theme="robotech"] .nice-ai-pills .nice-ai-pill {
  border:1px solid #d0d0ce; border-radius:4px; background:transparent; color:#888; transition:all .15s;
}
[data-theme="robotech"] .nice-ai-pills .nice-ai-pill:hover { border-color:#999; color:#1a1a1a; }

/* ── Schematic ── */
[data-theme="robotech"] .schematic-wired .tcg-card-mini { border-radius:4px; border-color:#d0d0ce; }
[data-theme="robotech"] .c-btn { border-radius:4px; }

/* ── HUD panel ── */
[data-theme="robotech"] .app-hud-panel {
  background:#fff; border:1px solid #d0d0ce; border-radius:4px;
  box-shadow:0 1px 4px rgba(0,0,0,0.04);
}
[data-theme="robotech"] .app-hud-panel .dock-lbl { color:#888; }
[data-theme="robotech"] .app-hud-panel .dock-lbl-val { color:#1a1a1a; }
[data-theme="robotech"] .app-hud-panel .db { border:1px solid #d0d0ce; }
[data-theme="robotech"] .app-hud-panel .db.active { border-color:#1a1a1a; }
[data-theme="robotech"] .app-hud-panel .fb { border-radius:4px; border-color:#d0d0ce; color:#888; }
[data-theme="robotech"] .app-hud-panel .fb.active { background:rgba(0,0,0,0.04); color:#1a1a1a; }

/* ── Scrollbar — minimal ── */
[data-theme="robotech"] ::-webkit-scrollbar { width:4px; }
[data-theme="robotech"] ::-webkit-scrollbar-track { background:#f2f2f0; }
[data-theme="robotech"] ::-webkit-scrollbar-thumb { background:#ccc; border-radius:4px; }
[data-theme="robotech"] ::-webkit-scrollbar-thumb:hover { background:#999; }

/* ── Security tabs ── */
[data-theme="robotech"] .security-tabs {
  border:1px solid #d0d0ce; border-radius:6px; background:#eaeae8; padding:2px;
}
[data-theme="robotech"] .security-tab { border-radius:4px; border:none; }
[data-theme="robotech"] .security-tab.security-tab--active {
  color:#1a1a1a; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.06);
}

/* ── Progress bars ── */
[data-theme="robotech"] progress,
[data-theme="robotech"] .progress-bar {
  background:#eaeae8; border:none; border-radius:4px; height:4px; overflow:hidden;
}
[data-theme="robotech"] progress::-webkit-progress-value,
[data-theme="robotech"] .progress-fill { background:#999; border-radius:4px; }
[data-theme="robotech"] progress::-webkit-progress-bar { background:#eaeae8; border-radius:4px; }

/* ── Popover ── */
[data-theme="robotech"] .side-popover {
  background:#fff; border:1px solid #d0d0ce; border-radius:4px;
  box-shadow:0 4px 16px rgba(0,0,0,0.08);
}
[data-theme="robotech"] .side-popover-item { color:#888; font-size:.7rem; }
[data-theme="robotech"] .side-popover-item:hover { background:rgba(0,0,0,0.03); color:#1a1a1a; }

/* ── Sidebar folder ── */
[data-theme="robotech"] .side-folder-toggle { color:#888; border-color:#d0d0ce; }
[data-theme="robotech"] .side-folder-body { border-left-color:#d0d0ce; }
[data-theme="robotech"] .side-mission-item { color:#888; }
[data-theme="robotech"] .side-mission-item:hover { background:rgba(0,0,0,0.03); color:#1a1a1a; }

/* ── Bridge hero header ── */
[data-theme="robotech"] .bridge-hero { background:#fff; border-color:#d0d0ce; }
[data-theme="robotech"] .bridge-hero-header { background:#fff; border-bottom-color:#e0e0de; }

/* ── Wizard overrides ── */
[data-theme="robotech"] .wizard-container { background:#fff; border-color:#d0d0ce; }
[data-theme="robotech"] .wizard-close { color:#888; }
[data-theme="robotech"] .wizard-close:hover { color:#1a1a1a; }
[data-theme="robotech"] .ship-wizard-slot { background:#f8f8f6; border-color:#e0e0de; }
[data-theme="robotech"] .ship-wizard-slot-label { color:#1a1a1a; }
[data-theme="robotech"] .ship-wizard-slot-select select { background:#fff; color:#1a1a1a; border-color:#d0d0ce; }
[data-theme="robotech"] .ship-wizard-mode-card { background:#fff; border-color:#d0d0ce; color:#1a1a1a; }
[data-theme="robotech"] .ship-wizard-mode-card:hover { border-color:#999; }
[data-theme="robotech"] .ship-wizard-mode-card.selected { border-color:#1a1a1a; background:rgba(0,0,0,0.02); }
[data-theme="robotech"] .ship-wizard-mode-label { color:#1a1a1a; }
[data-theme="robotech"] .ship-wizard-mode-hint { color:#888; }
[data-theme="robotech"] .modal-box { background:#fff; border-color:#d0d0ce; }

/* ═══════════════════════════════════════════════════════════════════════
   HAL-9000 EYE — The only red element. Schematic center core.
═══════════════════════════════════════════════════════════════════════ */
[data-theme="robotech"] .sch-radar-canvas { opacity:0; }

[data-theme="robotech"] .sch-core-hit-overlay {
  width:90px; height:90px;
  background:
    radial-gradient(circle at 44% 40%,
      #ffaa00 0%, #ef4444 16%, #dc2626 30%,
      #991b1b 50%, #450a0a 72%, #0a0202 100%
    );
  border:3px solid #111;
  border-radius:50%;
  box-shadow:
    /* Dark inner ring */
    0 0 0 2px #222,
    /* Chrome bezel */
    0 0 0 5px #888,
    0 0 0 9px #b0b0b6,
    0 0 0 12px #d0d0d6,
    0 0 0 14px #b8b8be,
    0 0 0 16px #8a8a90,
    /* Outer dark edge */
    0 0 0 17px #444,
    0 0 0 18px #1a1a1a,
    /* Red glow */
    0 0 25px 8px rgba(239,68,68,0.08),
    /* Inner depth */
    inset 0 0 20px rgba(0,0,0,0.6),
    inset 0 2px 4px rgba(0,0,0,0.4);
  animation:hal-eye-pulse 3s ease-in-out infinite;
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
}
/* Lens flare / reflection — slow rotation for animation feel */
@keyframes hal-reflect-rotate {
  0%   { transform:rotate(-10deg); opacity:0.18; }
  50%  { transform:rotate(5deg); opacity:0.12; }
  100% { transform:rotate(-10deg); opacity:0.18; }
}
[data-theme="robotech"] .sch-core-hit-overlay::after {
  content:''; position:absolute;
  top:8%; left:12%; width:55%; height:28%;
  background:linear-gradient(180deg, rgba(255,255,255,1), transparent);
  border-radius:50%; pointer-events:none;
  opacity:0.18;
  animation:hal-reflect-rotate 6s ease-in-out infinite;
}
/* Hover — keep red, brighten */
[data-theme="robotech"] .sch-core-hit-overlay:hover {
  background:
    radial-gradient(circle at 44% 40%,
      #ffbb00 0%, #ef4444 14%, #dc2626 28%,
      #991b1b 48%, #450a0a 70%, #0a0202 100%
    ) !important;
  box-shadow:
    0 0 0 2px #222,
    0 0 0 5px #929298,
    0 0 0 9px #b8b8be,
    0 0 0 12px #d8d8de,
    0 0 0 14px #c0c0c6,
    0 0 0 16px #929298,
    0 0 0 17px #444,
    0 0 0 18px #1a1a1a,
    0 0 35px 8px rgba(239,68,68,0.15),
    inset 0 0 20px rgba(0,0,0,0.4),
    inset 0 2px 4px rgba(0,0,0,0.2);
}

/* ── Small HAL eye — bottom-right indicator ── */
[data-theme="robotech"] .app-main::after {
  content:''; position:fixed; bottom:30px; right:30px;
  width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 40% 40%, #fca5a5, #ef4444 50%, #991b1b);
  box-shadow:0 0 6px rgba(239,68,68,0.3);
  pointer-events:none; z-index:1;
  animation:hal-eye-pulse 3s ease-in-out infinite;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion:reduce) {
  [data-theme="robotech"] .sch-core-hit-overlay { animation:none; }
  [data-theme="robotech"] .app-main::after { animation:none; }
}

/* Navigator — cyan HUD */
[data-theme="navigator"] {
  --bg:           #02090f;
  --bg2:          #041220;
  --surface:      rgba(0,200,240,0.05);
  --surface2:     rgba(0,200,240,0.09);
  --border:       rgba(0,229,255,0.25);
  --border-hi:    rgba(0,229,255,0.6);
  --accent:       #00e5ff;
  --accent2:      #0099bb;
  --text:         #cce8f0;
  --fg:           #cce8f0;
  --text-muted:   rgba(0,229,255,0.55);
  --text-dim:     rgba(0,229,255,0.18);
  --glow:         0 0 16px rgba(0,229,255,0.22);
  --glow-hi:      0 0 32px rgba(0,229,255,0.5), 0 0 64px rgba(0,229,255,0.18);
  --font-d:       'Orbitron', sans-serif;
  --font-h:       'Orbitron', sans-serif;
  --font-b:       'Inter', sans-serif;
  --font-m:       'Fira Code', monospace;
  --radius:       2px;
  --scan:         0.055;
  --border-width: 1px;
  --nav-bg:       rgba(2,9,15,0.97);
  --panel-bg:     rgba(2,9,15,0.95);
  --hero-grad:    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,229,255,0.1) 0%, transparent 70%);
  --bg-pattern:   none;
}

/* ═══ NAVIGATOR / TRON ═══════════════════════════════════════════════ */

/* Tron Grid Floor — forward travel animation (toward viewer) */
@keyframes tron-grid-scroll {
  0% { background-position: 0 0; }
  100% { background-position: 0 25px; }
}
@keyframes tron-grid-forward {
  0%   { transform: perspective(300px) rotateX(60deg) scale(1); }
  100% { transform: perspective(300px) rotateX(60deg) scale(1.08); }
}
@keyframes tron-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}
@keyframes tron-disc-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes tron-line-sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

/* Grid floor — on #tron-grid injected element + body fallback */
[data-theme="navigator"] .app-main {
  position: relative;
}
/* Perspective grid floor — traveling forward toward viewer.
   Uses dedicated #tron-grid element (not shared with other themes). */
#tron-grid {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 0;
}
[data-theme="navigator"] #tron-grid {
  display: block;
  background:
    linear-gradient(rgba(24,160,251,0.25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24,160,251,0.18) 1px, transparent 1px),
    linear-gradient(rgba(24,160,251,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24,160,251,0.06) 1px, transparent 1px);
  background-size: 25px 25px, 25px 25px, 5px 5px, 5px 5px;
  animation: tron-grid-scroll 1.8s linear infinite;
  transform: perspective(250px) rotateX(60deg);
  transform-origin: center 65%;
  mask-image: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 30%, rgba(0,0,0,0.1) 50%, transparent 62%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 30%, rgba(0,0,0,0.1) 50%, transparent 62%);
}

/* ── TRON Cityscape — horizon silhouette with towers & light beams ── */
#tron-city {
  display: none;
  position: fixed;
  left: 0; right: 0;
  bottom: 48%;
  height: 20vh;
  pointer-events: none;
  z-index: 0;
}
[data-theme="navigator"] #tron-city {
  display: block;
  /* Skyline silhouette built from layered gradients */
  background:
    /* ── Central spire (tall, narrow, bright) ── */
    linear-gradient(to top, #041220 0%, transparent 100%) no-repeat 50% 100% / 4px 100%,
    linear-gradient(to top, rgba(24,160,251,0.5) 0%, transparent 80%) no-repeat 50% 100% / 2px 100%,
    /* Spire glow */
    radial-gradient(ellipse 30px 60px at 50% 30%, rgba(24,160,251,0.15) 0%, transparent 100%),
    /* ── Tower pair flanking center ── */
    linear-gradient(#041220, #041220) no-repeat 47% 100% / 16px 55%,
    linear-gradient(#041220, #041220) no-repeat 53% 100% / 16px 55%,
    /* Tower caps */
    linear-gradient(#041220, #041220) no-repeat 46.2% 45% / 22px 4px,
    linear-gradient(#041220, #041220) no-repeat 52.2% 45% / 22px 4px,
    /* ── Light beams from towers ── */
    linear-gradient(to top, rgba(24,160,251,0.3), transparent) no-repeat 47.5% 0% / 2px 45%,
    linear-gradient(to top, rgba(24,160,251,0.3), transparent) no-repeat 53.5% 0% / 2px 45%,
    linear-gradient(to top, rgba(24,160,251,0.2), transparent) no-repeat 50% 0% / 1px 30%,
    /* ── Outer towers (shorter) ── */
    linear-gradient(#041220, #041220) no-repeat 38% 100% / 20px 35%,
    linear-gradient(#041220, #041220) no-repeat 62% 100% / 20px 35%,
    linear-gradient(#041220, #041220) no-repeat 35% 100% / 12px 25%,
    linear-gradient(#041220, #041220) no-repeat 65% 100% / 12px 25%,
    /* Outer tower caps */
    linear-gradient(#041220, #041220) no-repeat 37% 65% / 26px 3px,
    linear-gradient(#041220, #041220) no-repeat 61% 65% / 26px 3px,
    /* Outer light beams */
    linear-gradient(to top, rgba(24,160,251,0.15), transparent) no-repeat 39% 0% / 1px 65%,
    linear-gradient(to top, rgba(24,160,251,0.15), transparent) no-repeat 63% 0% / 1px 65%,
    /* ── Far outer structures ── */
    linear-gradient(#041220, #041220) no-repeat 28% 100% / 24px 20%,
    linear-gradient(#041220, #041220) no-repeat 72% 100% / 24px 20%,
    linear-gradient(#041220, #041220) no-repeat 22% 100% / 14px 15%,
    linear-gradient(#041220, #041220) no-repeat 78% 100% / 14px 15%,
    linear-gradient(#041220, #041220) no-repeat 16% 100% / 18px 10%,
    linear-gradient(#041220, #041220) no-repeat 84% 100% / 18px 10%,
    /* ── Low skyline fill (base of cityscape) ── */
    linear-gradient(#041220, #041220) no-repeat 30% 100% / 40% 8%,
    linear-gradient(#041220, #041220) no-repeat 10% 100% / 25% 5%,
    linear-gradient(#041220, #041220) no-repeat 65% 100% / 25% 5%,
    /* ── Horizon glow line ── */
    linear-gradient(90deg, transparent 5%, rgba(24,160,251,0.12) 30%, rgba(24,160,251,0.25) 50%, rgba(24,160,251,0.12) 70%, transparent 95%) no-repeat 0% 100% / 100% 2px,
    /* ── Atmospheric glow behind city ── */
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(24,160,251,0.08) 0%, transparent 100%);
}
@keyframes tron-beacon {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}
/* Pulsing beacon on central spire */
[data-theme="navigator"] #tron-city::before {
  content: '';
  position: absolute;
  left: calc(50% - 3px);
  top: 0;
  width: 6px; height: 6px;
  background: #18a0fb;
  border-radius: 50%;
  box-shadow: 0 0 8px 3px rgba(24,160,251,0.8), 0 0 20px 6px rgba(24,160,251,0.3);
  animation: tron-beacon 2s ease-in-out infinite;
}
/* Faint window lights on towers */
[data-theme="navigator"] #tron-city::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 60%;
  background:
    radial-gradient(circle 1px, rgba(24,160,251,0.4) 0%, transparent 100%) 47.5% 60% / 2px 2px no-repeat,
    radial-gradient(circle 1px, rgba(24,160,251,0.3) 0%, transparent 100%) 48.5% 70% / 2px 2px no-repeat,
    radial-gradient(circle 1px, rgba(24,160,251,0.4) 0%, transparent 100%) 52.5% 55% / 2px 2px no-repeat,
    radial-gradient(circle 1px, rgba(24,160,251,0.3) 0%, transparent 100%) 53.5% 75% / 2px 2px no-repeat,
    radial-gradient(circle 1px, rgba(24,160,251,0.25) 0%, transparent 100%) 38.5% 75% / 2px 2px no-repeat,
    radial-gradient(circle 1px, rgba(24,160,251,0.25) 0%, transparent 100%) 39.5% 85% / 2px 2px no-repeat,
    radial-gradient(circle 1px, rgba(24,160,251,0.25) 0%, transparent 100%) 62.5% 75% / 2px 2px no-repeat,
    radial-gradient(circle 1px, rgba(24,160,251,0.25) 0%, transparent 100%) 61.5% 85% / 2px 2px no-repeat;
  pointer-events: none;
}

/* ── Light Cycles — travel along perspective grid lines ── */
/* Cyan: from bottom-left toward vanishing point (center-top) */
@keyframes tron-cycle-inward {
  0%   { bottom: -5%; left: 25%; transform: scale(1); opacity: 1; }
  100% { bottom: 105%; left: 48%; transform: scale(0.2); opacity: 0; }
}
/* Orange: from vanishing point (center-top) out toward bottom-right */
@keyframes tron-cycle-outward {
  0%   { bottom: 105%; left: 52%; transform: scale(0.2); opacity: 0; }
  100% { bottom: -5%; left: 75%; transform: scale(1); opacity: 1; }
}

#tron-cycles {
  display: none;
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  height: 40vh;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
[data-theme="navigator"] #tron-cycles { display: block; }

/* Light cycle dot base */
[data-theme="navigator"] .tron-dot {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  pointer-events: none;
}
/* Cyan cycles — inward */
[data-theme="navigator"] #tron-cycles::before {
  content: '';
  position: absolute;
  width: 4px; height: 4px;
  background: #18a0fb;
  border-radius: 50%;
  box-shadow:
    0 0 6px 2px rgba(24,160,251,0.9),
    0 0 14px 4px rgba(24,160,251,0.3);
  animation: tron-cycle-inward 4s linear infinite;
}
/* Orange cycles — outward */
[data-theme="navigator"] #tron-cycles::after {
  content: '';
  position: absolute;
  width: 4px; height: 4px;
  background: #ff9500;
  border-radius: 50%;
  box-shadow:
    0 0 6px 2px rgba(255,149,0,0.9),
    0 0 14px 4px rgba(255,149,0,0.3);
  animation: tron-cycle-outward 5s linear infinite;
  animation-delay: 2s;
}

/* ── Extra scattered cycles (injected via #tron-cycles children) ── */
@keyframes tron-cycle-in2 {
  0%   { bottom: -5%; left: 15%; transform: scale(1); opacity: 0.8; }
  100% { bottom: 105%; left: 47%; transform: scale(0.15); opacity: 0; }
}
@keyframes tron-cycle-in3 {
  0%   { bottom: -5%; left: 35%; transform: scale(0.8); opacity: 0.7; }
  100% { bottom: 105%; left: 49%; transform: scale(0.1); opacity: 0; }
}
@keyframes tron-cycle-out2 {
  0%   { bottom: 105%; left: 53%; transform: scale(0.15); opacity: 0; }
  100% { bottom: -5%; left: 85%; transform: scale(1); opacity: 0.8; }
}
@keyframes tron-cycle-out3 {
  0%   { bottom: 105%; left: 51%; transform: scale(0.1); opacity: 0; }
  100% { bottom: -5%; left: 65%; transform: scale(0.8); opacity: 0.7; }
}
@keyframes tron-cycle-in4 {
  0%   { bottom: -5%; left: 8%; transform: scale(0.9); opacity: 0.6; }
  100% { bottom: 105%; left: 46%; transform: scale(0.1); opacity: 0; }
}
@keyframes tron-cycle-out4 {
  0%   { bottom: 105%; left: 54%; transform: scale(0.1); opacity: 0; }
  100% { bottom: -5%; left: 92%; transform: scale(0.9); opacity: 0.6; }
}
[data-theme="navigator"] .tron-c1 {
  background: #18a0fb;
  box-shadow: 0 0 5px 2px rgba(24,160,251,0.8), 0 0 10px 3px rgba(24,160,251,0.25);
  animation: tron-cycle-in2 5.5s linear infinite;
  animation-delay: 1s;
}
[data-theme="navigator"] .tron-c2 {
  background: #18a0fb;
  box-shadow: 0 0 4px 1px rgba(24,160,251,0.7), 0 0 8px 2px rgba(24,160,251,0.2);
  animation: tron-cycle-in3 3.5s linear infinite;
  animation-delay: 3s;
  width: 2px; height: 2px;
}
[data-theme="navigator"] .tron-c3 {
  background: #ff9500;
  box-shadow: 0 0 5px 2px rgba(255,149,0,0.8), 0 0 10px 3px rgba(255,149,0,0.25);
  animation: tron-cycle-out2 6s linear infinite;
  animation-delay: 0.5s;
}
[data-theme="navigator"] .tron-c4 {
  background: #ff9500;
  box-shadow: 0 0 4px 1px rgba(255,149,0,0.7), 0 0 8px 2px rgba(255,149,0,0.2);
  animation: tron-cycle-out3 4s linear infinite;
  animation-delay: 4s;
  width: 2px; height: 2px;
}
[data-theme="navigator"] .tron-c5 {
  background: #18a0fb;
  box-shadow: 0 0 4px 1px rgba(24,160,251,0.6), 0 0 8px 2px rgba(24,160,251,0.15);
  animation: tron-cycle-in4 7s linear infinite;
  animation-delay: 2.5s;
  width: 2px; height: 2px;
}
[data-theme="navigator"] .tron-c6 {
  background: #ff9500;
  box-shadow: 0 0 4px 1px rgba(255,149,0,0.6), 0 0 8px 2px rgba(255,149,0,0.15);
  animation: tron-cycle-out4 6.5s linear infinite;
  animation-delay: 5s;
  width: 2px; height: 2px;
}

/* Horizontal scan line sweeping across content */
[data-theme="navigator"] .app-main::after {
  content: '';
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(24,160,251,0.6), transparent);
  animation: tron-line-sweep 4s ease-in-out infinite;
  pointer-events: none; z-index: 1;
}

/* Sidebar — dark void with edge glow */
[data-theme="navigator"] .app-sidebar {
  background: #010509;
  border-right: 1px solid rgba(24,160,251,0.15);
  box-shadow: 1px 0 20px rgba(24,160,251,0.08);
}
[data-theme="navigator"] .side-header {
  background: transparent;
  border-bottom: 1px solid rgba(24,160,251,0.2);
  position: relative;
}
[data-theme="navigator"] .side-header::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(24,160,251,0.6), transparent);
}
[data-theme="navigator"] .side-header .app-brand-text {
  color: #18a0fb;
  text-shadow: 0 0 10px rgba(24,160,251,0.5), 0 0 20px rgba(24,160,251,0.2);
  font-family: var(--font-h);
}
[data-theme="navigator"] .side-link {
  border-radius: 2px;
  border: 1px solid transparent;
  margin: 2px 8px;
  font-family: var(--font-h);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: .55rem;
  color: rgba(24,160,251,0.6);
  transition: all .2s;
  position: relative;
}
[data-theme="navigator"] .side-link:hover {
  color: #18a0fb;
  background: rgba(24,160,251,0.06);
  border-color: rgba(24,160,251,0.2);
  text-shadow: 0 0 8px rgba(24,160,251,0.4);
}
[data-theme="navigator"] .side-link.active {
  color: #18a0fb;
  background: rgba(24,160,251,0.1);
  border-color: rgba(24,160,251,0.4);
  box-shadow: 0 0 12px rgba(24,160,251,0.15), inset 0 0 12px rgba(24,160,251,0.05);
  text-shadow: 0 0 10px rgba(24,160,251,0.6);
}
[data-theme="navigator"] .side-footer {
  background: transparent;
  border-top: 1px solid rgba(24,160,251,0.15);
}
[data-theme="navigator"] .side-footer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(24,160,251,0.6), transparent);
}
[data-theme="navigator"] .hdr-user-badge {
  background: transparent; color: #18a0fb;
  border-color: rgba(24,160,251,0.4);
  text-shadow: 0 0 6px rgba(24,160,251,0.4);
}

/* Topbar — edge-lit bar */
[data-theme="navigator"] .app-topbar {
  background: rgba(2,9,15,0.95);
  border-bottom: none;
  position: relative;
}
[data-theme="navigator"] .app-topbar::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(24,160,251,0.8) 20%,
    rgba(24,160,251,0.2) 50%,
    rgba(24,160,251,0.8) 80%, transparent 100%);
  box-shadow: 0 0 10px rgba(24,160,251,0.4), 0 2px 20px rgba(24,160,251,0.2);
}

/* Panels — glass with edge glow */
[data-theme="navigator"] .widget-card,
[data-theme="navigator"] .tc-section,
[data-theme="navigator"] .detail-section {
  border: 1px solid rgba(24,160,251,0.15);
  border-radius: 2px;
  background: rgba(2,9,15,0.85);
  box-shadow: 0 0 15px rgba(24,160,251,0.05), inset 0 0 20px rgba(24,160,251,0.02);
  backdrop-filter: blur(4px);
  position: relative;
  overflow: hidden;
}
/* Top edge glow line */
[data-theme="navigator"] .widget-card::before,
[data-theme="navigator"] .tc-section::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(24,160,251,0.5), transparent);
  pointer-events: none;
}

/* Buttons — light disc style */
[data-theme="navigator"] .btn {
  border: 1px solid rgba(24,160,251,0.3);
  border-radius: 2px;
  background: transparent;
  color: #18a0fb;
  font-family: var(--font-h);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .65rem;
  text-shadow: 0 0 6px rgba(24,160,251,0.3);
  transition: all .2s;
}
[data-theme="navigator"] .btn:hover {
  background: rgba(24,160,251,0.1);
  border-color: rgba(24,160,251,0.6);
  box-shadow: 0 0 15px rgba(24,160,251,0.2), inset 0 0 10px rgba(24,160,251,0.05);
  text-shadow: 0 0 10px rgba(24,160,251,0.5);
}
[data-theme="navigator"] .btn-primary {
  background: rgba(24,160,251,0.15);
  border-color: #18a0fb;
  color: #18a0fb;
  box-shadow: 0 0 10px rgba(24,160,251,0.2);
}
[data-theme="navigator"] .btn-primary:hover {
  background: rgba(24,160,251,0.25);
  box-shadow: 0 0 20px rgba(24,160,251,0.3);
}

/* Tab bars — Tron segments */
[data-theme="navigator"] .bp-type-tab,
[data-theme="navigator"] .bridge-hero-tab,
[data-theme="navigator"] .log-view-tab {
  border-radius: 2px;
  border: 1px solid rgba(24,160,251,0.15);
  background: transparent;
  color: rgba(24,160,251,0.5);
  font-family: var(--font-h);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .6rem;
}
[data-theme="navigator"] .bp-type-tab.active,
[data-theme="navigator"] .bridge-hero-tab.active,
[data-theme="navigator"] .log-view-tab.active {
  background: rgba(24,160,251,0.12);
  color: #18a0fb;
  border-color: #18a0fb;
  box-shadow: 0 0 12px rgba(24,160,251,0.2);
  text-shadow: 0 0 8px rgba(24,160,251,0.4);
  border-bottom: none;
}
[data-theme="navigator"] .bp-type-tab:hover,
[data-theme="navigator"] .bridge-hero-tab:hover,
[data-theme="navigator"] .log-view-tab:hover {
  border-color: rgba(24,160,251,0.4);
  color: #18a0fb;
  background: rgba(24,160,251,0.05);
}

/* Sub-tabs & filters */
[data-theme="navigator"] .bp-sub-tab {
  border-radius: 2px; border: 1px solid rgba(24,160,251,0.15);
  background: transparent; color: rgba(24,160,251,0.5);
  font-family: var(--font-h); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; font-size: .55rem;
}
[data-theme="navigator"] .bp-sub-tab.active {
  background: rgba(24,160,251,0.12); color: #18a0fb; border-color: #18a0fb;
  box-shadow: 0 0 10px rgba(24,160,251,0.2);
}
[data-theme="navigator"] .bp-rarity-btn {
  border-radius: 2px; border: 1px solid rgba(24,160,251,0.12);
  background: transparent; color: rgba(24,160,251,0.4);
  font-family: var(--font-h); font-size: .5rem; letter-spacing: .08em;
}
[data-theme="navigator"] .bp-rarity-btn.active {
  background: rgba(24,160,251,0.1); color: #18a0fb; border-color: rgba(24,160,251,0.5);
  box-shadow: 0 0 8px rgba(24,160,251,0.15);
}
[data-theme="navigator"] .bp-view-btn {
  border-radius: 2px; border: 1px solid rgba(24,160,251,0.12); background: transparent;
}
[data-theme="navigator"] .bp-view-btn.active {
  background: rgba(24,160,251,0.1); border-color: rgba(24,160,251,0.5);
  box-shadow: 0 0 8px rgba(24,160,251,0.15);
}
[data-theme="navigator"] .bp-view-btn svg { stroke: rgba(24,160,251,0.5); }
[data-theme="navigator"] .bp-view-btn.active svg { stroke: #18a0fb; }

/* Mission cards — circuit trace edge */
[data-theme="navigator"] .mc-card {
  border: 1px solid rgba(24,160,251,0.12);
  border-left: 2px solid rgba(24,160,251,0.4);
  border-radius: 2px;
  background: rgba(2,9,15,0.8);
  box-shadow: inset 0 0 15px rgba(24,160,251,0.03);
}
[data-theme="navigator"] .mc-card-running { border-left-color: #18a0fb; box-shadow: 0 0 10px rgba(24,160,251,0.1); }
[data-theme="navigator"] .mc-card-completed { border-left-color: #00ff88; }
[data-theme="navigator"] .mc-card-failed { border-left-color: #ff3344; }

/* Pipeline nodes */
[data-theme="navigator"] .mc-pipe-node {
  border-radius: 2px; border: 1px solid rgba(24,160,251,0.2);
  background: transparent; color: rgba(24,160,251,0.5);
}
[data-theme="navigator"] .mc-pipe-node:hover,
[data-theme="navigator"] .mc-pipe-active {
  background: rgba(24,160,251,0.12); color: #18a0fb;
  border-color: #18a0fb; box-shadow: 0 0 10px rgba(24,160,251,0.2);
}

/* Gauges */
[data-theme="navigator"] .mc-gauge,
[data-theme="navigator"] .log-gauge {
  border-radius: 2px; border-color: rgba(24,160,251,0.15);
}

/* Input fields — holographic */
[data-theme="navigator"] input[type="text"],
[data-theme="navigator"] .search-input {
  border-radius: 2px;
  border: 1px solid rgba(24,160,251,0.2);
  background: rgba(24,160,251,0.03);
  color: #18a0fb;
  font-family: var(--font-h);
  font-size: .7rem;
}
[data-theme="navigator"] input[type="text"]:focus,
[data-theme="navigator"] .search-input:focus {
  border-color: #18a0fb;
  box-shadow: 0 0 12px rgba(24,160,251,0.2), inset 0 0 8px rgba(24,160,251,0.05);
}
[data-theme="navigator"] select {
  border-radius: 2px; border: 1px solid rgba(24,160,251,0.2); color: #18a0fb;
  background: rgba(24,160,251,0.03) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2300e5ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
  font-family: var(--font-h); font-size: .65rem;
  appearance: none; -webkit-appearance: none;
}
[data-theme="navigator"] .filter-select {
  border-radius: 2px; border: 1px solid rgba(24,160,251,0.2); color: #18a0fb;
  background: rgba(24,160,251,0.03) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2300e5ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
  font-family: var(--font-h); font-size: .65rem;
  appearance: none; -webkit-appearance: none;
}
[data-theme="navigator"] .search-box {
  background: rgba(24,160,251,0.03); border-color: rgba(24,160,251,0.2); border-radius: 2px;
}

/* Prompt panel — identity disc communicator */
[data-theme="navigator"] .nice-ai-input-area {
  border: 1px solid rgba(24,160,251,0.2); border-radius: 16px;
  background: rgba(2,9,15,0.9);
  box-shadow: 0 0 15px rgba(24,160,251,0.05), inset 0 0 15px rgba(24,160,251,0.02);
}
[data-theme="navigator"] .nice-ai-input-area:focus-within {
  border-color: #18a0fb;
  box-shadow: 0 0 20px rgba(24,160,251,0.15), inset 0 0 15px rgba(24,160,251,0.03);
}
[data-theme="navigator"] .nice-ai-input { color: #c0d8f0; font-family: var(--font-h); font-size: .7rem; }
[data-theme="navigator"] .nice-ai-input::placeholder { color: rgba(24,160,251,0.25); }
[data-theme="navigator"] .nice-ai-chip {
  border-radius: 2px; border: 1px solid rgba(24,160,251,0.15);
  background: transparent; color: rgba(24,160,251,0.5);
  font-family: var(--font-h); font-size: .5rem;
  font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
}
[data-theme="navigator"] .nice-ai-chip:hover {
  background: rgba(24,160,251,0.1); color: #18a0fb; border-color: rgba(24,160,251,0.4);
  box-shadow: 0 0 8px rgba(24,160,251,0.15);
}
[data-theme="navigator"] .chat-pill {
  border-radius: 9999px; border: 1px solid rgba(24,160,251,0.15);
  background: transparent; color: rgba(24,160,251,0.5);
  font-family: var(--font-h);
}
[data-theme="navigator"] .chat-pill:hover {
  background: rgba(24,160,251,0.1); color: #18a0fb;
  box-shadow: 0 0 8px rgba(24,160,251,0.15);
}

/* Schematic cards — circuit board glow */
[data-theme="navigator"] .schematic-wired .tcg-card-mini {
  border-color: rgba(24,160,251,0.3);
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(24,160,251,0.08);
}

/* Card actions */
[data-theme="navigator"] .c-btn {
  border-radius: 2px; font-family: var(--font-h);
  font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: .55rem;
}

/* HUD panel */
[data-theme="navigator"] .app-hud-panel {
  background: rgba(2,9,15,0.95);
  border: 1px solid rgba(24,160,251,0.15); border-radius: 2px;
  box-shadow: 0 0 15px rgba(24,160,251,0.05);
}
[data-theme="navigator"] .app-hud-panel .dock-lbl { color: rgba(24,160,251,0.6); }
[data-theme="navigator"] .app-hud-panel .dock-lbl a { color: rgba(24,160,251,0.6); }
[data-theme="navigator"] .app-hud-panel .dock-lbl-val { color: #18a0fb; }
[data-theme="navigator"] .app-hud-panel .db {
  border: 1px solid rgba(24,160,251,0.15); border-radius: 50%;
}
[data-theme="navigator"] .app-hud-panel .db.active {
  border-color: #18a0fb; box-shadow: 0 0 8px rgba(24,160,251,0.3);
}
[data-theme="navigator"] .app-hud-panel .fb {
  color: rgba(24,160,251,0.5); border-color: rgba(24,160,251,0.15); border-radius: 2px;
}
[data-theme="navigator"] .app-hud-panel .fb.active {
  background: rgba(24,160,251,0.12); color: #18a0fb;
  box-shadow: 0 0 8px rgba(24,160,251,0.2);
}

/* Scrollbar — light trail */
[data-theme="navigator"] ::-webkit-scrollbar { width: 6px; }
[data-theme="navigator"] ::-webkit-scrollbar-track { background: #010509; }
[data-theme="navigator"] ::-webkit-scrollbar-thumb {
  background: rgba(24,160,251,0.2); border-radius: 2px;
}
[data-theme="navigator"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(24,160,251,0.5);
  box-shadow: 0 0 6px rgba(24,160,251,0.3);
}

/* Popover */
[data-theme="navigator"] .side-popover {
  background: rgba(2,9,15,0.95); border: 1px solid rgba(24,160,251,0.2); border-radius: 2px;
  box-shadow: 0 0 15px rgba(24,160,251,0.1);
}
[data-theme="navigator"] .side-popover-item {
  color: rgba(24,160,251,0.6); font-family: var(--font-h);
  font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: .55rem;
}
[data-theme="navigator"] .side-popover-item:hover {
  background: rgba(24,160,251,0.1); color: #18a0fb;
  text-shadow: 0 0 6px rgba(24,160,251,0.4);
}

/* Sidebar folder */
[data-theme="navigator"] .side-folder-toggle {
  color: rgba(24,160,251,0.5); border-color: rgba(24,160,251,0.1);
  font-family: var(--font-h);
}
[data-theme="navigator"] .side-folder-body { border-left-color: rgba(24,160,251,0.1); }
[data-theme="navigator"] .side-mission-item { color: rgba(24,160,251,0.5); }
[data-theme="navigator"] .side-mission-item:hover {
  background: rgba(24,160,251,0.06); color: #18a0fb;
}

/* ═══════════════════════════════════════════════════════════════════
   THE GRID v2 — TRON Legacy Immersion
   Identity discs, light trails, wireframe geometry, grid floor,
   energy pulse, derezz effects.
═══════════════════════════════════════════════════════════════════ */

/* ── 1. Identity Disc — rotating circle decoration ── */
@keyframes tron-disc-glow {
  0%, 100% { box-shadow:0 0 15px rgba(0,229,255,0.3), 0 0 30px rgba(0,229,255,0.1), inset 0 0 10px rgba(0,229,255,0.2); }
  50%      { box-shadow:0 0 25px rgba(0,229,255,0.5), 0 0 50px rgba(0,229,255,0.2), inset 0 0 15px rgba(0,229,255,0.3); }
}
[data-theme="navigator"] .bg-grid::after {
  content:''; position:fixed; bottom:60px; right:60px;
  width:100px; height:100px; border-radius:50%; pointer-events:none; z-index:0;
  border:2px solid rgba(0,229,255,0.08);
  background:
    radial-gradient(circle, transparent 35%, rgba(0,229,255,0.03) 36%, rgba(0,229,255,0.03) 37%, transparent 38%),
    radial-gradient(circle, transparent 55%, rgba(0,229,255,0.02) 56%, rgba(0,229,255,0.02) 57%, transparent 58%);
  animation:tron-disc-spin 12s linear infinite, tron-disc-glow 4s ease-in-out infinite;
}
/* Inner ring of disc */
[data-theme="navigator"] .bg-grid::before {
  content:''; position:fixed; bottom:85px; right:85px;
  width:50px; height:50px; border-radius:50%; pointer-events:none; z-index:0;
  border:1px solid rgba(0,229,255,0.12);
  animation:tron-disc-spin 8s linear infinite reverse;
}

/* ── 2. Lightcycles — horizontal AND vertical, traveling on grid lines ── */
@keyframes tron-cycle-right {
  0%   { left:-8%; opacity:0; }
  5%   { opacity:1; }
  95%  { opacity:1; }
  100% { left:108%; opacity:0; }
}
@keyframes tron-cycle-left {
  0%   { right:-8%; opacity:0; }
  5%   { opacity:1; }
  95%  { opacity:1; }
  100% { right:108%; opacity:0; }
}

/* Horizontal cycle 1 — travels right, upper grid */
[data-theme="navigator"] body::before {
  content:''; position:fixed; bottom:38%; left:-8%;
  width:3px; height:1px;
  background:#18a0fb;
  box-shadow:
    0 0 4px #18a0fb, 0 0 10px rgba(24,160,251,0.5),
    -8px 0 3px rgba(24,160,251,0.5),
    -20px 0 4px rgba(24,160,251,0.4),
    -36px 0 5px rgba(24,160,251,0.3),
    -56px 0 6px rgba(24,160,251,0.2),
    -80px 0 7px rgba(24,160,251,0.1);
  pointer-events:none; z-index:0;
  animation:tron-cycle-right 8s linear infinite;
}
/* Horizontal cycle 2 — travels left, mid grid */
[data-theme="navigator"] body::after {
  content:''; position:fixed; bottom:30%; right:-8%;
  width:3px; height:1px;
  background:rgba(24,160,251,0.9);
  box-shadow:
    0 0 4px rgba(24,160,251,0.6), 0 0 8px rgba(24,160,251,0.3),
    8px 0 3px rgba(24,160,251,0.4),
    20px 0 4px rgba(24,160,251,0.3),
    36px 0 5px rgba(24,160,251,0.2),
    56px 0 6px rgba(24,160,251,0.1);
  pointer-events:none; z-index:0;
  animation:tron-cycle-left 11s linear infinite 2s;
}
/* Horizontal cycle 3 — travels right, lower grid */
[data-theme="navigator"] .app-view-content::before {
  content:''; position:fixed; bottom:22%; left:-8%;
  width:2px; height:1px;
  background:rgba(0,229,255,0.8);
  box-shadow:
    0 0 3px rgba(0,229,255,0.5), 0 0 8px rgba(0,229,255,0.3),
    -8px 0 2px rgba(0,229,255,0.4),
    -18px 0 3px rgba(0,229,255,0.3),
    -32px 0 4px rgba(0,229,255,0.2),
    -50px 0 5px rgba(0,229,255,0.1);
  pointer-events:none; z-index:0;
  animation:tron-cycle-right 14s linear infinite 5s;
}
/* Horizontal cycle 4 — travels left, near bottom */
[data-theme="navigator"] .app-view-content::after {
  content:''; position:fixed; bottom:15%; right:-8%;
  width:2px; height:1px;
  background:rgba(0,229,255,0.7);
  box-shadow:
    0 0 3px rgba(0,229,255,0.5), 0 0 6px rgba(0,229,255,0.2),
    6px 0 2px rgba(0,229,255,0.3),
    16px 0 3px rgba(0,229,255,0.2),
    28px 0 4px rgba(0,229,255,0.15),
    44px 0 5px rgba(0,229,255,0.08);
  pointer-events:none; z-index:0;
  animation:tron-cycle-left 16s linear infinite 8s;
}
/* Horizontal cycle 5 — fast, travels right, top of grid */
[data-theme="navigator"] .app-main::after {
  content:''; position:fixed; bottom:44%; left:-6%;
  width:2px; height:1px;
  background:rgba(0,229,255,0.6);
  box-shadow:
    0 0 3px rgba(0,229,255,0.4), 0 0 6px rgba(0,229,255,0.2),
    -6px 0 2px rgba(0,229,255,0.3),
    -14px 0 3px rgba(0,229,255,0.2),
    -24px 0 4px rgba(0,229,255,0.1);
  pointer-events:none; z-index:0;
  animation:tron-cycle-right 6s linear infinite 1s;
}

/* ── 3. Grid handled by .app-sidebar-overlay rule above (perspective floor) ── */

/* ── 4. Energy Pulse on Active Elements ── */
@keyframes tron-energy-pulse {
  0%, 100% { box-shadow:0 0 8px rgba(0,229,255,0.2); }
  50%      { box-shadow:0 0 20px rgba(0,229,255,0.4), 0 0 40px rgba(0,229,255,0.1); }
}
[data-theme="navigator"] .btn-primary {
  animation:tron-energy-pulse 3s ease-in-out infinite;
}
[data-theme="navigator"] .side-link.active {
  animation:tron-energy-pulse 4s ease-in-out infinite;
}

/* ── 5. Card Edge-Lit Borders — TRON circuit lines ── */
[data-theme="navigator"] .tcg-card {
  border:3px solid rgba(24,160,251,0.25); border-radius:3px;
  background:rgba(2,9,15,0.85);
  position:relative; overflow:hidden;
}
[data-theme="navigator"] .tcg-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent 10%, rgba(0,229,255,0.6) 50%, transparent 90%);
  pointer-events:none;
}
[data-theme="navigator"] .tcg-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent 10%, rgba(0,229,255,0.3) 50%, transparent 90%);
  pointer-events:none;
}
/* Light trail sweep on card hover */
@keyframes tron-card-sweep {
  0%   { top:-100%; }
  100% { top:200%; }
}
[data-theme="navigator"] .tcg-card:hover {
  border-color:rgba(0,229,255,0.4);
  box-shadow:0 0 20px rgba(0,229,255,0.1), inset 0 0 30px rgba(0,229,255,0.02);
}

/* ── 6. Wireframe geometry now replaced by vertical lightcycles above ── */

/* ── 7. Derezz Hover Effect — pixelation on hover out ── */
[data-theme="navigator"] .mcp-catalog-card {
  border:1px solid rgba(0,229,255,0.12); border-radius:2px;
  background:rgba(2,9,15,0.85);
  transition:all .2s;
}
[data-theme="navigator"] .mcp-catalog-card:hover {
  border-color:rgba(0,229,255,0.5);
  box-shadow:0 0 15px rgba(0,229,255,0.1);
}
[data-theme="navigator"] .mcp-catalog-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,229,255,0.5), transparent);
  pointer-events:none;
}

/* ── 8. CRT overlay now replaced by vertical lightcycles above ── */

/* ── 9. Security Tabs — energy segments ── */
[data-theme="navigator"] .security-tabs {
  border:1px solid rgba(0,229,255,0.15); border-radius:2px;
  background:rgba(2,9,15,0.9);
}
[data-theme="navigator"] .security-tab { border-radius:2px; }
[data-theme="navigator"] .security-tab.security-tab--active {
  background:rgba(0,229,255,0.12); color:#00e5ff;
  box-shadow:0 0 10px rgba(0,229,255,0.2);
  text-shadow:0 0 8px rgba(0,229,255,0.4);
}

/* ── 10. Prompt Pills — disc fragments ── */
[data-theme="navigator"] .nice-ai-pills .nice-ai-pill {
  border:1px solid rgba(0,229,255,0.15); border-radius:2px;
  background:transparent; color:rgba(0,229,255,0.5);
  font-family:var(--font-h); text-transform:uppercase; letter-spacing:.08em; font-size:.6rem;
}
[data-theme="navigator"] .nice-ai-pills .nice-ai-pill:hover {
  border-color:#00e5ff; color:#00e5ff;
  box-shadow:0 0 12px rgba(0,229,255,0.2);
  background:rgba(0,229,255,0.06);
  text-shadow:0 0 6px rgba(0,229,255,0.4);
}

/* ── 11. Progress Bars — energy conduit ── */
[data-theme="navigator"] progress,
[data-theme="navigator"] .progress-bar {
  background:rgba(0,229,255,0.05); border:1px solid rgba(0,229,255,0.15);
  border-radius:2px; height:6px; overflow:hidden;
}
[data-theme="navigator"] progress::-webkit-progress-value,
[data-theme="navigator"] .progress-fill {
  background:linear-gradient(90deg, rgba(0,229,255,0.3), #00e5ff);
  box-shadow:0 0 8px rgba(0,229,255,0.3);
  border-radius:2px;
}
[data-theme="navigator"] progress::-webkit-progress-bar {
  background:rgba(0,229,255,0.05); border-radius:2px;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion:reduce) {
  [data-theme="navigator"] .bg-grid::before,
  [data-theme="navigator"] .bg-grid::after { animation:none; }
  [data-theme="navigator"] body::before,
  [data-theme="navigator"] body::after { animation:none; display:none; }
  [data-theme="navigator"] .btn-primary { animation:none; }
  [data-theme="navigator"] .side-link.active { animation:none; }
  [data-theme="navigator"] .app-main::before { animation:none; }
  [data-theme="navigator"] .app-main::after { animation:none; display:none; }
  [data-theme="navigator"] .app-view-content::before,
  [data-theme="navigator"] .app-view-content::after { animation:none; display:none; }
}

/* The Matrix — terminal green */
[data-theme="matrix"] {
  --bg:           #000800;
  --bg2:          #000c00;
  --surface:      rgba(0,255,65,0.04);
  --surface2:     rgba(0,255,65,0.08);
  --border:       rgba(0,255,65,0.2);
  --border-hi:    rgba(0,255,65,0.5);
  --accent:       #00ff41;
  --accent2:      #00aa2a;
  --text:         #00ff41;
  --fg:           #00ff41;
  --text-muted:   rgba(0,255,65,0.5);
  --text-dim:     rgba(0,255,65,0.18);
  --glow:         0 0 12px rgba(0,255,65,0.3);
  --glow-hi:      0 0 24px rgba(0,255,65,0.6), 0 0 48px rgba(0,255,65,0.18);
  --font-d:       'Fira Code', monospace;
  --font-h:       'Fira Code', monospace;
  --font-b:       'Fira Code', monospace;
  --font-m:       'Fira Code', monospace;
  --radius:       0px;
  --scan:         0.08;
  --border-width: 1px;
  --nav-bg:       rgba(0,5,0,0.98);
  --panel-bg:     rgba(0,6,0,0.97);
  --hero-grad:    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,255,65,0.07) 0%, transparent 70%);
  --bg-pattern:   none;
}

/* Matrix — Mythic component overrides */
[data-theme="matrix"] .app-sidebar {
  background: rgba(0,4,0,0.98);
  border-right: 1px solid rgba(0,255,65,0.15);
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent 2px, rgba(0,255,65,0.03) 2px, rgba(0,255,65,0.03) 4px
  );
}
[data-theme="matrix"] .side-header {
  border-bottom: 1px solid rgba(0,255,65,0.2);
  text-shadow: 0 0 8px rgba(0,255,65,0.6);
}
[data-theme="matrix"] .side-link {
  color: rgba(0,255,65,0.6); border-radius: 0; border: 1px solid transparent;
  font-family: 'Fira Code', monospace; font-size: 12px; letter-spacing: 0.5px;
}
[data-theme="matrix"] .side-link:hover {
  background: rgba(0,255,65,0.06); color: #00ff41; border-color: rgba(0,255,65,0.15);
  text-shadow: 0 0 6px rgba(0,255,65,0.4);
}
[data-theme="matrix"] .side-link.active {
  background: rgba(0,255,65,0.1); color: #00ff41; border-color: rgba(0,255,65,0.3);
  box-shadow: inset 3px 0 0 #00ff41; text-shadow: 0 0 8px rgba(0,255,65,0.5);
}
[data-theme="matrix"] .app-topbar {
  background: rgba(0,4,0,0.95); border-bottom: 1px solid rgba(0,255,65,0.15);
}
[data-theme="matrix"] .app-topbar::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,255,65,0.4), transparent);
}
[data-theme="matrix"] .widget-card,
[data-theme="matrix"] .tc-section,
[data-theme="matrix"] .detail-section {
  background: rgba(0,8,0,0.8); border: 1px solid rgba(0,255,65,0.15); border-radius: 0;
  box-shadow: 0 0 15px rgba(0,255,65,0.05), inset 0 0 30px rgba(0,255,65,0.02);
}
[data-theme="matrix"] .widget-card:hover {
  border-color: rgba(0,255,65,0.35); box-shadow: 0 0 20px rgba(0,255,65,0.1);
}
[data-theme="matrix"] .btn {
  border-radius: 0; font-family: 'Fira Code', monospace; font-size: 12px;
  text-transform: uppercase; letter-spacing: 1px;
  border: 1px solid rgba(0,255,65,0.3); background: rgba(0,255,65,0.06);
  color: #00ff41; transition: all 0.2s;
}
[data-theme="matrix"] .btn:hover {
  background: rgba(0,255,65,0.12); border-color: rgba(0,255,65,0.5);
  box-shadow: 0 0 10px rgba(0,255,65,0.2); text-shadow: 0 0 4px rgba(0,255,65,0.5);
}
[data-theme="matrix"] .btn-primary {
  background: rgba(0,255,65,0.15); border-color: #00ff41; color: #00ff41;
}
[data-theme="matrix"] .btn-primary:hover {
  background: rgba(0,255,65,0.25); box-shadow: 0 0 15px rgba(0,255,65,0.3);
}
[data-theme="matrix"] .bp-type-tab,
[data-theme="matrix"] .bridge-hero-tab,
[data-theme="matrix"] .log-view-tab {
  border-radius: 0; border: 1px solid rgba(0,255,65,0.15);
  background: transparent; color: rgba(0,255,65,0.5);
  font-family: 'Fira Code', monospace; font-size: 11px; text-transform: uppercase;
}
[data-theme="matrix"] .bp-type-tab.active,
[data-theme="matrix"] .bridge-hero-tab.active,
[data-theme="matrix"] .log-view-tab.active {
  background: rgba(0,255,65,0.12); color: #00ff41; border-color: #00ff41;
  text-shadow: 0 0 6px rgba(0,255,65,0.4);
}
[data-theme="matrix"] .mc-card {
  border-radius: 0; border: 1px solid rgba(0,255,65,0.15);
  background: rgba(0,8,0,0.7);
}
[data-theme="matrix"] .mc-card-running { border-left: 3px solid #00ff41; }
[data-theme="matrix"] .mc-card-completed { border-left: 3px solid #00aa2a; }
[data-theme="matrix"] .mc-card-failed { border-left: 3px solid #ff2020; }
[data-theme="matrix"] .mc-card-review { border-left: 3px solid #00ccaa; }
[data-theme="matrix"] input[type="text"],
[data-theme="matrix"] .search-input {
  border-radius: 0; background: rgba(0,8,0,0.6); border: 1px solid rgba(0,255,65,0.2);
  color: #00ff41; font-family: 'Fira Code', monospace;
}
[data-theme="matrix"] input[type="text"]:focus,
[data-theme="matrix"] .search-input:focus {
  border-color: #00ff41; box-shadow: 0 0 8px rgba(0,255,65,0.2);
}
[data-theme="matrix"] select {
  border-radius: 0; background: rgba(0,8,0,0.6); border: 1px solid rgba(0,255,65,0.2);
  color: #00ff41; font-family: 'Fira Code', monospace;
}
[data-theme="matrix"] .nice-ai-input-area {
  border-radius: 0; border: 1px solid rgba(0,255,65,0.25); background: rgba(0,6,0,0.8);
}
[data-theme="matrix"] .nice-ai-input-area:focus-within {
  border-color: #00ff41; box-shadow: 0 0 12px rgba(0,255,65,0.15);
}
[data-theme="matrix"] .nice-ai-input { color: #00ff41; font-family: 'Fira Code', monospace; }
[data-theme="matrix"] .nice-ai-input::placeholder { color: rgba(0,255,65,0.3); }
[data-theme="matrix"] .nice-ai-chip {
  border-radius: 0; border: 1px solid rgba(0,255,65,0.2); background: transparent;
  color: rgba(0,255,65,0.6); font-family: 'Fira Code', monospace; font-size: 11px;
}
[data-theme="matrix"] .nice-ai-chip:hover { background: rgba(0,255,65,0.1); color: #00ff41; }
[data-theme="matrix"] .chat-pill {
  border-radius: 0; border: 1px solid rgba(0,255,65,0.2); background: transparent;
  color: rgba(0,255,65,0.5);
}
[data-theme="matrix"] .chat-pill:hover { background: rgba(0,255,65,0.08); color: #00ff41; }
[data-theme="matrix"] .tcg-card {
  box-shadow: 0 0 20px rgba(0,255,65,0.08); border-color: rgba(0,255,65,0.25);
}
[data-theme="matrix"] .tcg-card:hover {
  box-shadow: 0 0 30px rgba(0,255,65,0.15); border-color: rgba(0,255,65,0.5);
}
[data-theme="matrix"] .tcg-card .tcg-name-bar {
  text-shadow: 0 0 8px rgba(0,255,65,0.5);
}
[data-theme="matrix"] .app-hud-panel { background: rgba(0,4,0,0.95); border-color: rgba(0,255,65,0.15); }
[data-theme="matrix"] .app-hud-panel .dock-lbl { color: rgba(0,255,65,0.5); }
[data-theme="matrix"] .app-hud-panel .dock-lbl a { color: #00ff41; }
[data-theme="matrix"] .app-hud-panel .dock-lbl-val { color: #00aa2a; }
[data-theme="matrix"] .app-hud-panel .db { border: 1px solid rgba(0,255,65,0.2); border-radius: 0; }
[data-theme="matrix"] .app-hud-panel .db.active { border-color: #00ff41; box-shadow: 0 0 6px rgba(0,255,65,0.3); }
[data-theme="matrix"] .app-hud-panel .fb { color: #00ff41; border-color: rgba(0,255,65,0.2); border-radius: 0; }
[data-theme="matrix"] .app-hud-panel .fb.active { background: rgba(0,255,65,0.1); color: #00ff41; }
[data-theme="matrix"] .schematic-wired .tcg-card-mini {
  border-color: rgba(0,255,65,0.2); box-shadow: 0 0 10px rgba(0,255,65,0.08);
}
[data-theme="matrix"] .c-btn {
  border-radius: 0; border: 1px solid rgba(0,255,65,0.2);
  color: rgba(0,255,65,0.6); background: transparent;
}
[data-theme="matrix"] .c-btn:hover { border-color: #00ff41; color: #00ff41; background: rgba(0,255,65,0.08); }
[data-theme="matrix"] ::-webkit-scrollbar { width: 6px; }
[data-theme="matrix"] ::-webkit-scrollbar-track { background: #000800; }
[data-theme="matrix"] ::-webkit-scrollbar-thumb { background: rgba(0,255,65,0.2); border-radius: 0; }
[data-theme="matrix"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,255,65,0.4); }
[data-theme="matrix"] .side-popover { background: rgba(0,6,0,0.98); border: 1px solid rgba(0,255,65,0.2); border-radius: 0; }
[data-theme="matrix"] .side-popover-item { color: rgba(0,255,65,0.6); }
[data-theme="matrix"] .side-popover-item:hover { background: rgba(0,255,65,0.08); color: #00ff41; }
[data-theme="matrix"] .side-folder-toggle { color: rgba(0,255,65,0.5); }
[data-theme="matrix"] .side-folder-body { border-left-color: rgba(0,255,65,0.15); }
[data-theme="matrix"] .bp-sub-tab {
  border-radius: 0; border: 1px solid rgba(0,255,65,0.12); background: transparent; color: rgba(0,255,65,0.4);
}
[data-theme="matrix"] .bp-sub-tab.active { background: rgba(0,255,65,0.12); color: #00ff41; border-color: #00ff41; }
[data-theme="matrix"] .bp-rarity-btn {
  border-radius: 0; border: 1px solid rgba(0,255,65,0.12); color: rgba(0,255,65,0.4);
}
[data-theme="matrix"] .bp-rarity-btn.active { background: rgba(0,255,65,0.1); color: #00ff41; border-color: #00ff41; }
[data-theme="matrix"] .bp-view-btn { border-radius: 0; }
[data-theme="matrix"] .bp-view-btn.active { background: rgba(0,255,65,0.1); border-color: #00ff41; }
/* CRT vignette overlay */
[data-theme="matrix"] .app-main::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.4) 100%);
}
/* Phosphor heading glow */
[data-theme="matrix"] h1, [data-theme="matrix"] h2, [data-theme="matrix"] h3 {
  text-shadow: 0 0 6px rgba(0,255,65,0.4), 0 0 12px rgba(0,255,65,0.15);
}

/* LCARS — Star Trek */
[data-theme="lcars"] {
  --bg:           #000000;
  --bg2:          #000000;
  --surface:      rgba(255,153,102,0.06);
  --surface2:     rgba(204,153,255,0.06);
  --border:       #cc7744;
  --border-hi:    #ff9966;
  --accent:       #ff9966;  /* butterscotch */
  --accent2:      #cc99ff;  /* african-violet */
  --text:         #ff9966;
  --fg:           #ff9966;
  --text-muted:   #cc99ff;
  --text-dim:     rgba(255,153,102,0.18);
  --glow:         none;
  --glow-hi:      none;
  --font-d:       'Antonio', sans-serif;
  --font-h:       'Antonio', sans-serif;
  --font-b:       'Antonio', sans-serif;
  --font-m:       'Share Tech Mono', monospace;
  --radius:       24px;
  --scan:         0;
  --border-width: 0px;
  --nav-bg:       #000000;
  --panel-bg:     #000000;
  --hero-grad:    none;
  --bg-pattern:   none;
  /* LCARS palette extras */
  --lcars-orange:    #ff9966;
  --lcars-peach:     #ffaa90;
  --lcars-sunflower: #ffcc99;
  --lcars-violet:    #cc99ff;
  --lcars-lilac:     #cc55ff;
  --lcars-blue:      #99ccff;
  --lcars-sky:       #aaaaff;
  --lcars-gold:      #ffaa00;
  --lcars-red:       #cc4444;
  --lcars-gray:      #666688;
}

/* ── LCARS Layout Overrides ── */

/* Sidebar — colored bars with elbows */
[data-theme="lcars"] .app-sidebar {
  background:#000;
  border-right:none;
  border-radius:0;
  overflow:visible;
}
[data-theme="lcars"] .app-sidebar.open {
  border-right:none;
}

/* Top elbow: horizontal bar that curves into sidebar */
[data-theme="lcars"] .side-header {
  background:#cc99ff;
  border-radius:0;
  padding:14px 16px;
  margin:0;
  position:relative;
  z-index:5;
}
/* Elbow curve — bottom-right corner */
[data-theme="lcars"] .side-header::after {
  content:'';
  position:absolute; bottom:-24px; left:0; right:0;
  height:24px;
  background:#cc99ff;
  border-radius:0 0 40px 0;
  z-index:1;
}
[data-theme="lcars"] .side-header .app-brand-text { color:#000; font-size:1.4rem; }
[data-theme="lcars"] .side-header-actions button,
[data-theme="lcars"] .side-header-actions .app-hdr-btn,
[data-theme="lcars"] .side-header-actions .side-toggle-btn { color:#000; }
[data-theme="lcars"] .side-header-actions svg { stroke:#000; }

/* Sidebar nav links — pill buttons */
[data-theme="lcars"] .app-side-nav {
  padding-top:28px; /* clear the elbow */
  flex:1;
}
[data-theme="lcars"] .side-link {
  border-radius:0 24px 24px 0;
  margin:3px 10px 3px 0;
  padding:7px 16px 7px 12px;
  background:#ff9966;
  color:#000;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.68rem;
  border:none;
  transition:background .15s;
  position:relative;
}
[data-theme="lcars"] .side-link:nth-child(even) { background:#ffcc99; }
[data-theme="lcars"] .side-link:nth-child(3n) { background:#ffaa90; }
[data-theme="lcars"] .side-link:hover {
  background:#ffeecc;
}
[data-theme="lcars"] .side-link.active {
  background:#cc99ff;
  color:#000;
}
[data-theme="lcars"] .side-link svg { display:none; }
[data-theme="lcars"] .side-link .side-link-label { margin-left:0; }

/* Fill empty sidebar space with colored bar — only when open */
[data-theme="lcars"] .app-sidebar.open .app-side-nav::after {
  content:'';
  display:block;
  flex:1;
  margin:4px 10px 4px 0;
  background:linear-gradient(180deg, #ff9966 0%, #ff9966 30%, #000 30.5%, #000 32%, #ffcc99 32%, #ffcc99 55%, #000 55.5%, #000 57%, #ffaa90 57%, #ffaa90 75%, #000 75.5%, #000 77%, #cc99ff 77%, #cc99ff 100%);
  border-radius:0 24px 24px 0;
  min-height:120px;
}
/* Hide filler when sidebar collapsed */
[data-theme="lcars"] .app-sidebar:not(.open) .app-side-nav::after { display:none; }

/* Bottom elbow */
[data-theme="lcars"] .side-footer {
  background:#99ccff;
  border-radius:0;
  margin:0;
  padding:8px 12px;
  position:relative;
}
[data-theme="lcars"] .side-footer::before {
  content:'';
  position:absolute; top:-24px; left:0; right:0;
  height:24px;
  background:#99ccff;
  border-radius:0 40px 0 0;
}
[data-theme="lcars"] .side-footer * { color:#000; }

/* Popover menu items — LCARS pill style */
[data-theme="lcars"] .side-popover {
  background:#000; border:2px solid #666688; border-radius:24px;
}
[data-theme="lcars"] .side-popover-item {
  color:#ff9966; border-radius:24px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:.65rem;
}
[data-theme="lcars"] .side-popover-item:hover { background:#ff9966; color:#000; }
[data-theme="lcars"] .side-popover-item svg { display:none; }

/* User card in footer */
[data-theme="lcars"] .side-user-card { color:#000; }
[data-theme="lcars"] .side-user-card svg { stroke:#000; }
[data-theme="lcars"] .hdr-user-badge { background:#ffaa00; color:#000; border-color:#ffaa00; }
[data-theme="lcars"] .side-more-btn { color:#000; }
[data-theme="lcars"] .side-more-btn svg { stroke:#000; }

/* Sidebar favorites */
[data-theme="lcars"] .sidebar-favorites { padding-top:4px; }

/* HUD panel — LCARS styled */
[data-theme="lcars"] .app-hud-panel {
  background:#000; border:2px solid #666688; border-radius:0 0 24px 0; margin:0;
  position:relative; z-index:10;
}
[data-theme="lcars"] .app-hud-panel .dock-lbl { color:#ff9966; }
[data-theme="lcars"] .app-hud-panel .dock-lbl a { color:#ff9966; }
[data-theme="lcars"] .app-hud-panel .dock-lbl-val { color:#cc99ff; }
[data-theme="lcars"] .app-hud-panel .db { border-radius:50%; border:2px solid #666688; }
[data-theme="lcars"] .app-hud-panel .db.active { border-color:#ff9966; }
[data-theme="lcars"] .app-hud-panel .fb { color:#ff9966; border-color:#666688; border-radius:24px; }
[data-theme="lcars"] .app-hud-panel .fb.active { background:#ff9966; color:#000; }
[data-theme="lcars"] .hud-row-sep { border-color:#666688; }

/* Top bar across content area */
[data-theme="lcars"] .app-topbar {
  background:#000;
  border-bottom:none;
  position:relative;
}
[data-theme="lcars"] .app-topbar::after {
  content:'';
  position:absolute; bottom:0; left:0; right:0;
  height:6px;
  background:linear-gradient(90deg, #ff9966 0%, #ff9966 30%, #000 30.5%, #000 31%, #cc99ff 31%, #cc99ff 60%, #000 60.5%, #000 61%, #99ccff 61%, #99ccff 100%);
}

/* Panels & cards — LCARS elbows */
[data-theme="lcars"] .widget-card,
[data-theme="lcars"] .tc-section,
[data-theme="lcars"] .detail-section {
  border:none;
  border-left:6px solid #ff9966;
  border-radius:0 0 0 24px;
  background:rgba(255,153,102,0.04);
}
[data-theme="lcars"] .widget-card:nth-child(even),
[data-theme="lcars"] .tc-section:nth-child(even) {
  border-left-color:#cc99ff;
  background:rgba(204,153,255,0.04);
}
[data-theme="lcars"] .widget-card:nth-child(3n),
[data-theme="lcars"] .tc-section:nth-child(3n) {
  border-left-color:#99ccff;
  background:rgba(153,204,255,0.04);
}

/* Buttons — pill-shaped LCARS */
[data-theme="lcars"] .btn {
  border-radius:24px;
  background:#ff9966;
  color:#000;
  border:none;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
}
[data-theme="lcars"] .btn:hover {
  background:#ffcc99;
  box-shadow:none;
}
[data-theme="lcars"] .btn-primary {
  background:#cc99ff;
  color:#000;
}
[data-theme="lcars"] .btn-primary:hover {
  background:#ddbbff;
}

/* Tab bars — LCARS colored segments */
[data-theme="lcars"] .bp-type-tab,
[data-theme="lcars"] .bridge-hero-tab,
[data-theme="lcars"] .log-view-tab {
  border-radius:24px;
  background:#666688;
  color:#000;
  border:none;
  font-weight:700;
  text-transform:uppercase;
  padding:6px 16px;
  margin:2px;
}
[data-theme="lcars"] .bp-type-tab.active,
[data-theme="lcars"] .bridge-hero-tab.active,
[data-theme="lcars"] .log-view-tab.active {
  background:#ff9966;
  color:#000;
  border-bottom:none;
}
[data-theme="lcars"] .bp-type-tab:hover,
[data-theme="lcars"] .bridge-hero-tab:hover,
[data-theme="lcars"] .log-view-tab:hover {
  background:#ffcc99;
  color:#000;
}

/* Mission cards */
[data-theme="lcars"] .mc-card {
  border:none;
  border-left:4px solid #ff9966;
  border-radius:0 0 0 20px;
  background:rgba(255,153,102,0.05);
}
[data-theme="lcars"] .mc-card-running {
  border-left-color:#cc99ff;
}
[data-theme="lcars"] .mc-card-completed {
  border-left-color:#99ccff;
}
[data-theme="lcars"] .mc-card-failed {
  border-left-color:#cc4444;
}

/* Pipeline nodes */
[data-theme="lcars"] .mc-pipe-node {
  border-radius:24px;
  background:#666688;
  color:#ffeecc;
  border:none;
}
[data-theme="lcars"] .mc-pipe-node:hover,
[data-theme="lcars"] .mc-pipe-active {
  background:#ff9966;
  color:#000;
}

/* Gauge strip */
[data-theme="lcars"] .mc-gauge,
[data-theme="lcars"] .log-gauge {
  border-radius:24px;
  border-color:#666688;
}

/* Blueprints — sub-tabs, rarity filters, view buttons */
[data-theme="lcars"] .bp-sub-tab {
  border-radius:24px; background:#666688; color:#000; border:none;
  font-weight:700; text-transform:uppercase; letter-spacing:.1em; padding:6px 16px; margin:2px;
}
[data-theme="lcars"] .bp-sub-tab.active { background:#ff9966; color:#000; }
[data-theme="lcars"] .bp-sub-tab:hover { background:#ffcc99; color:#000; }
[data-theme="lcars"] .bp-tab-count { color:#000; opacity:.6; }

[data-theme="lcars"] .bp-rarity-btn {
  border-radius:24px; background:#666688; color:#000; border:none;
  font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:4px 12px; font-size:.65rem;
}
[data-theme="lcars"] .bp-rarity-btn.active { background:#cc99ff; color:#000; }
[data-theme="lcars"] .bp-rarity-btn:hover { background:#ffcc99; color:#000; }

[data-theme="lcars"] .bp-view-btn {
  border-radius:24px; background:#666688; color:#000; border:none; padding:4px 8px;
}
[data-theme="lcars"] .bp-view-btn.active { background:#99ccff; color:#000; }
[data-theme="lcars"] .bp-view-btn:hover { background:#ffcc99; color:#000; }
[data-theme="lcars"] .bp-view-btn svg { stroke:#000; }

/* Card action buttons */
[data-theme="lcars"] .c-btn {
  border-radius:24px; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
}
[data-theme="lcars"] .c-btn.bp-activated {
  background:#ff9966; color:#000; border-color:#ff9966;
}
[data-theme="lcars"] .c-btn.bp-activated:hover { background:#cc4444; color:#000; border-color:#cc4444; }

[data-theme="lcars"] .filter-select {
  border-radius:24px; border:2px solid #666688; color:#ff9966;
  font-weight:700; text-transform:uppercase;
  appearance:none; -webkit-appearance:none;
  background:#000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ff9966' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
}

/* Schematic — reactor core + lines */
[data-theme="lcars"] .schematic-svg circle[fill="var(--accent,#fff)"] { fill:#ff9966; }
[data-theme="lcars"] .schematic-svg path[stroke="var(--accent,#fff)"] { stroke:#ff9966; }
[data-theme="lcars"] .schematic-svg line[stroke="var(--accent,#fff)"] { stroke:#ff9966; }

/* Schematic cards */
[data-theme="lcars"] .schematic-wired .tcg-card-mini {
  border-color:#ff9966;
  border-radius:20px;
}

/* Input fields */
[data-theme="lcars"] input[type="text"],
[data-theme="lcars"] .search-input {
  border-radius:24px;
  border:2px solid #666688;
  background:#000;
  color:#ff9966;
}
[data-theme="lcars"] select {
  border-radius:24px; border:2px solid #666688; color:#ff9966;
  appearance:none; -webkit-appearance:none;
  background:#000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ff9966' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
}
[data-theme="lcars"] .search-box {
  background:#000;
  border-color:#666688;
  border-radius:24px;
}
[data-theme="lcars"] input[type="text"]:focus,
[data-theme="lcars"] .search-input:focus {
  border-color:#cc99ff;
}

/* Prompt panel */
[data-theme="lcars"] .nice-ai-input-area {
  border:2px solid #666688; border-radius:24px; background:#000;
}
[data-theme="lcars"] .nice-ai-input-area:focus-within { border-color:#ff9966; }
[data-theme="lcars"] .nice-ai-input { color:#ff9966; }
[data-theme="lcars"] .nice-ai-input::placeholder { color:#666688; }
[data-theme="lcars"] .nice-ai-chip {
  border-radius:24px; background:#666688; color:#000; border:none;
  font-weight:700; text-transform:uppercase;
}
[data-theme="lcars"] .nice-ai-chip:hover { background:#ff9966; }
[data-theme="lcars"] .chat-pill {
  border-radius:9999px; background:#666688; color:#000; border:none;
  font-weight:700; text-transform:uppercase;
}
[data-theme="lcars"] .chat-pill:hover { background:#ff9966; color:#000; }

/* Scrollbar */
[data-theme="lcars"] ::-webkit-scrollbar { width:8px; }
[data-theme="lcars"] ::-webkit-scrollbar-track { background:#000; }
[data-theme="lcars"] ::-webkit-scrollbar-thumb { background:#666688; border-radius:24px; }
[data-theme="lcars"] ::-webkit-scrollbar-thumb:hover { background:#ff9966; }

/* ═══ J.A.R.V.I.S. ════════════════════════════════════════════════════ */
[data-theme="jarvis"] {
  --bg:           #070d1a;
  --bg2:          #0c1829;
  --surface:      rgba(0,229,255,0.04);
  --surface2:     rgba(0,229,255,0.08);
  --border:       rgba(0,229,255,0.18);
  --border-hi:    rgba(0,229,255,0.5);
  --accent:       #00e5ff;
  --accent2:      #18ffff;
  --text:         #b2ebf2;
  --text-muted:   rgba(0,229,255,0.55);
  --text-dim:     rgba(184,216,240,0.35);
  --glow:         0 0 16px rgba(0,229,255,0.2);
  --glow-hi:      0 0 24px rgba(0,229,255,0.4);
  --panel-bg:     rgba(7,13,26,0.95);
  --nav-bg:       rgba(7,13,26,0.95);
  --font-d:       'Exo 2', 'Inter', sans-serif;
  --font-h:       'Exo 2', 'Inter', sans-serif;
  --font-b:       'Inter', sans-serif;
  --font-m:       'Fira Code', 'Consolas', monospace;
  --radius:       3px;
  --border-width: 1px;
  --scan:         0;
  --bg-pattern:   none;
  --jv-blue:      #00e5ff;
  --jv-blue-dk:   #1a6b9e;
  --jv-blue-lt:   #18ffff;
  --jv-arc:       #e0f7fa;
  --jv-panel:     #0e1a2e;
  --jv-panel-lt:  #132340;
}

/* Sidebar — translucent glass panel */
[data-theme="jarvis"] .app-sidebar {
  background: linear-gradient(180deg, rgba(12,24,41,0.98) 0%, rgba(7,13,26,0.98) 100%);
  border-right: 1px solid rgba(0,229,255,0.15);
  box-shadow:inset -1px 0 0 rgba(0,229,255,0.08);
}
[data-theme="jarvis"] .side-header {
  background: rgba(14,26,46,0.9);
  border-bottom: 1px solid rgba(0,229,255,0.15);
  position: relative;
}
[data-theme="jarvis"] .side-header::after {
  content: ''; position: absolute; bottom: 0; left: 16px; right: 16px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,0.3), transparent);
  pointer-events: none;
}
[data-theme="jarvis"] .side-header .app-brand-text {
  color: #18ffff; font-family: 'Exo 2', sans-serif;
  text-shadow: 0 0 12px rgba(0,229,255,0.3);
  letter-spacing: .15em;
}
[data-theme="jarvis"] .side-link {
  border-radius: 3px;
  border: 1px solid transparent;
  border-left: 2px solid rgba(0,229,255,0.15);
  margin: 2px 8px;
  font-family: 'Exo 2', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .65rem;
  color: rgba(0,229,255,0.7);
  transition: all .2s;
}
[data-theme="jarvis"] .side-link:hover {
  background: rgba(0,229,255,0.06);
  border-left-color: #00e5ff;
  color: #b2ebf2;
}
[data-theme="jarvis"] .side-link.active {
  background: rgba(0,229,255,0.08);
  border-left-color: #00e5ff;
  border-color: rgba(0,229,255,0.2);
  color: #18ffff;
  box-shadow: inset 0 0 12px rgba(0,229,255,0.06);
}
[data-theme="jarvis"] .side-footer {
  background: rgba(7,13,26,0.95);
  border-top: 1px solid rgba(0,229,255,0.12);
}
[data-theme="jarvis"] .hdr-user-badge {
  background: rgba(0,229,255,0.1); color: #18ffff; border-color: rgba(0,229,255,0.3);
}

/* Topbar — holographic scan line */
[data-theme="jarvis"] .app-topbar {
  border-bottom: none;
  position: relative;
}
[data-theme="jarvis"] .app-topbar::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(0,229,255,0.4) 20%, rgba(24,255,255,0.6) 50%, rgba(0,229,255,0.4) 80%, transparent 100%);
}

/* Panels — translucent glass with blue edge glow */
[data-theme="jarvis"] .widget-card,
[data-theme="jarvis"] .tc-section,
[data-theme="jarvis"] .detail-section {
  border: 1px solid rgba(0,229,255,0.15);
  border-radius: 3px;
  background: rgba(14,26,46,0.6);
  backdrop-filter: blur(8px);
  box-shadow:
    0 2px 12px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(0,229,255,0.06);
  position: relative;
}
/* Top-edge glow line */
[data-theme="jarvis"] .widget-card::before,
[data-theme="jarvis"] .tc-section::before {
  content: '';
  position: absolute; top: 0; left: 12px; right: 12px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,0.25), transparent);
  pointer-events: none; z-index: 1;
}
[data-theme="jarvis"] .widget-card::after,
[data-theme="jarvis"] .tc-section::after {
  content: ''; display: none;
}

/* Buttons — clean geometric with blue glow */
[data-theme="jarvis"] .btn {
  border:1px solid rgba(0,229,255,0.25);
  border-radius:3px;
  background:rgba(0,229,255,0.06);
  color:#18ffff;
  font-family:'Exo 2', sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.1em;
  box-shadow:none;
}
[data-theme="jarvis"] .btn:hover {
  background:rgba(0,229,255,0.12);
  border-color:rgba(0,229,255,0.5);
  box-shadow:0 0 12px rgba(0,229,255,0.15);
}
[data-theme="jarvis"] .btn-primary {
  background:rgba(0,229,255,0.15);
  color:#e0f7fa;
  border-color:rgba(0,229,255,0.5);
  box-shadow:0 0 8px rgba(0,229,255,0.15);
}
[data-theme="jarvis"] .btn-primary:hover {
  background:rgba(0,229,255,0.25);
  box-shadow:0 0 16px rgba(0,229,255,0.3);
}

/* Tab bars — holographic segments */
[data-theme="jarvis"] .bp-type-tab,
[data-theme="jarvis"] .bridge-hero-tab,
[data-theme="jarvis"] .log-view-tab {
  border-radius:3px;
  border:1px solid rgba(0,229,255,0.15);
  background:rgba(0,229,255,0.04);
  color:rgba(0,229,255,0.6);
  font-family:'Exo 2', sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
}
[data-theme="jarvis"] .bp-type-tab.active,
[data-theme="jarvis"] .bridge-hero-tab.active,
[data-theme="jarvis"] .log-view-tab.active {
  background:rgba(0,229,255,0.12);
  color:#e0f7fa;
  border-color:rgba(0,229,255,0.5);
  box-shadow:0 0 10px rgba(0,229,255,0.15);
}
[data-theme="jarvis"] .bp-type-tab:hover,
[data-theme="jarvis"] .bridge-hero-tab:hover,
[data-theme="jarvis"] .log-view-tab:hover {
  background:rgba(0,229,255,0.08);
  border-color:rgba(0,229,255,0.3);
  color:#18ffff;
}

/* Sub-tabs & filters */
[data-theme="jarvis"] .bp-sub-tab {
  border-radius: 3px; border: 1px solid rgba(0,229,255,0.15);
  background: rgba(0,229,255,0.04);
  color: rgba(0,229,255,0.6); font-family: 'Exo 2', sans-serif;
  font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
}
[data-theme="jarvis"] .bp-sub-tab.active { background: rgba(0,229,255,0.15); color: #e0f7fa; border-color: rgba(0,229,255,0.5); }
[data-theme="jarvis"] .bp-rarity-btn {
  border-radius: 3px; border: 1px solid rgba(0,229,255,0.12);
  background: rgba(0,229,255,0.03); color: rgba(0,229,255,0.5);
  font-family: 'Exo 2', sans-serif; font-weight: 500;
  text-transform: uppercase; letter-spacing: .06em; font-size: .65rem;
}
[data-theme="jarvis"] .bp-rarity-btn.active { background: rgba(0,229,255,0.1); color: #18ffff; border-color: rgba(0,229,255,0.4); }
[data-theme="jarvis"] .bp-view-btn {
  border-radius: 3px; border: 1px solid rgba(0,229,255,0.12); background: rgba(0,229,255,0.03);
}
[data-theme="jarvis"] .bp-view-btn.active { background: rgba(0,229,255,0.1); border-color: rgba(0,229,255,0.4); }

/* Mission cards — holographic panel */
[data-theme="jarvis"] .mc-card {
  border:1px solid rgba(0,229,255,0.15);
  border-left:3px solid rgba(0,229,255,0.4);
  border-radius:3px;
  background:rgba(14,26,46,0.6);
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
/* TCG cards — holographic frame */
[data-theme="jarvis"] .tcg-card {
  border:1px solid rgba(0,229,255,0.2);
  border-radius:3px;
  box-shadow:0 2px 12px rgba(0,0,0,0.3), 0 0 1px rgba(0,229,255,0.2);
}
[data-theme="jarvis"] .mc-card-running { border-left-color: #00e5ff; }
[data-theme="jarvis"] .mc-card-completed { border-left-color: #66bb6a; }
[data-theme="jarvis"] .mc-card-failed { border-left-color: #ef5350; }

/* Pipeline nodes */
[data-theme="jarvis"] .mc-pipe-node {
  border-radius: 3px; border: 1px solid rgba(0,229,255,0.15);
  background: rgba(0,229,255,0.04);
  color: rgba(0,229,255,0.6);
}
[data-theme="jarvis"] .mc-pipe-node:hover,
[data-theme="jarvis"] .mc-pipe-active {
  background: rgba(0,229,255,0.15);
  color: #e0f7fa;
  border-color: rgba(0,229,255,0.5);
}

/* Gauges */
[data-theme="jarvis"] .mc-gauge,
[data-theme="jarvis"] .log-gauge {
  border-radius: 3px; border-color: rgba(0,229,255,0.2);
}

/* Input fields — holographic terminal */
[data-theme="jarvis"] input[type="text"],
[data-theme="jarvis"] .search-input {
  border-radius: 3px;
  border: 1px solid rgba(0,229,255,0.15);
  background: rgba(7,13,26,0.8);
  color: #b2ebf2;
  font-family: 'Inter', sans-serif;
}
[data-theme="jarvis"] input[type="text"]:focus,
[data-theme="jarvis"] .search-input:focus { border-color: #00e5ff; box-shadow: 0 0 8px rgba(0,229,255,0.15); }
[data-theme="jarvis"] select {
  border-radius: 3px; border: 1px solid rgba(0,229,255,0.15); color: #b2ebf2;
  background: rgba(7,13,26,0.8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234fc3f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
  appearance: none; -webkit-appearance: none;
}
[data-theme="jarvis"] .filter-select {
  border-radius: 3px; border: 1px solid rgba(0,229,255,0.15); color: #b2ebf2;
  background: rgba(7,13,26,0.8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234fc3f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
  appearance: none; -webkit-appearance: none;
}
[data-theme="jarvis"] .search-box {
  background: rgba(7,13,26,0.8); border-color: rgba(0,229,255,0.15); border-radius: 3px;
}

/* Prompt panel — holographic communicator */
[data-theme="jarvis"] .nice-ai-input-area {
  border: 1px solid rgba(0,229,255,0.2); border-radius: 16px;
  background: rgba(14,26,46,0.7);
}
[data-theme="jarvis"] .nice-ai-input-area:focus-within { border-color: #00e5ff; box-shadow: 0 0 12px rgba(0,229,255,0.15); }
[data-theme="jarvis"] .nice-ai-input { color: #b2ebf2; }
[data-theme="jarvis"] .nice-ai-input::placeholder { color: rgba(0,229,255,0.35); }
[data-theme="jarvis"] .nice-ai-chip {
  border-radius: 3px; border: 1px solid rgba(0,229,255,0.2);
  background: rgba(0,229,255,0.06);
  color: rgba(0,229,255,0.7); font-family: 'Exo 2', sans-serif;
  font-weight: 500; text-transform: uppercase;
}
[data-theme="jarvis"] .nice-ai-chip:hover { background: rgba(0,229,255,0.12); color: #18ffff; }
[data-theme="jarvis"] .chat-pill {
  border-radius: 9999px; border: 1px solid rgba(0,229,255,0.15);
  background: rgba(0,229,255,0.04); color: rgba(0,229,255,0.6);
}
[data-theme="jarvis"] .chat-pill:hover { background: rgba(0,229,255,0.1); color: #18ffff; }

/* Schematic cards */
[data-theme="jarvis"] .schematic-wired .tcg-card-mini {
  border-color: rgba(0,229,255,0.2);
  border-radius: 3px;
}
/* Filled card slots — reactor blue glow (override rarity colors) */
[data-theme="jarvis"] .schematic-wired .schematic-card-slot:not(.schematic-card-empty) .tcg-card-mini,
[data-theme="jarvis"] .schematic-wired .schematic-card-slot:not(.schematic-card-empty) .tcg-card-mini[data-rarity] {
  border-color: rgba(0,229,255,0.5) !important;
  box-shadow: 0 0 10px rgba(0,229,255,0.15), 0 0 20px rgba(0,229,255,0.06);
}
[data-theme="jarvis"] .schematic-wired .schematic-card-slot:not(.schematic-card-empty):hover .tcg-card-mini,
[data-theme="jarvis"] .schematic-wired .schematic-card-slot:not(.schematic-card-empty):hover .tcg-card-mini[data-rarity] {
  border-color: rgba(24,255,255,0.7) !important;
  box-shadow: 0 0 20px rgba(0,229,255,0.25), 0 0 40px rgba(0,229,255,0.1);
}
/* Rotating border ring on filled cards — reactor blue */
[data-theme="jarvis"] .schematic-wired .schematic-card-slot:not(.schematic-card-empty)::before {
  border-color: rgba(0,229,255,0.35);
}
[data-theme="jarvis"] .schematic-wired .schematic-card-slot:not(.schematic-card-empty)::after {
  --accent2: #e64a19;
  padding: 1.5px;
  opacity: .45;
}

/* Active buttons — orange glow */
[data-theme="jarvis"] .btn-primary {
  border-color: rgba(230,74,25,0.5);
  box-shadow: 0 0 10px rgba(230,74,25,0.25), 0 0 20px rgba(230,74,25,0.1);
}
[data-theme="jarvis"] .btn-primary:hover {
  border-color: rgba(230,74,25,0.7);
  box-shadow: 0 0 16px rgba(230,74,25,0.35), 0 0 30px rgba(230,74,25,0.15);
}
[data-theme="jarvis"] .bp-type-tab.active,
[data-theme="jarvis"] .bridge-hero-tab.active,
[data-theme="jarvis"] .log-view-tab.active {
  border-color: rgba(230,74,25,0.5);
  box-shadow: 0 0 10px rgba(230,74,25,0.2);
}
[data-theme="jarvis"] .bp-sub-tab.active {
  border-color: rgba(230,74,25,0.5);
  box-shadow: 0 0 8px rgba(230,74,25,0.15);
}
[data-theme="jarvis"] .bp-rarity-btn.active {
  border-color: rgba(230,74,25,0.4);
  box-shadow: 0 0 6px rgba(230,74,25,0.12);
}
[data-theme="jarvis"] .security-tab.security-tab--active {
  border-color: rgba(230,74,25,0.5);
  box-shadow: 0 0 10px rgba(230,74,25,0.2);
}
[data-theme="jarvis"] .side-link.active {
  border-color: rgba(230,74,25,0.25);
  box-shadow: inset 0 0 10px rgba(230,74,25,0.06), 0 0 8px rgba(230,74,25,0.08);
}

/* ── Arc Reactor — schematic core (JARVIS only) ── */
.jv-arc-reactor { display:none; }
[data-theme="jarvis"] .jv-arc-reactor {
  display:block; position:absolute; z-index:2;
  top:50%; left:50%; transform:translate(-50%,-50%);
  width:140px; height:140px;
}

/* Outer ring — 10 glowing segments arranged in a circle */
[data-theme="jarvis"] .jv-arc-ring {
  position:absolute; inset:0;
  border-radius:50%;
}
[data-theme="jarvis"] .jv-arc-seg {
  position:absolute; top:0; left:50%; margin-left:-8px;
  width:16px; height:140px;
  transform-origin:center center;
  pointer-events:none;
}
[data-theme="jarvis"] .jv-arc-seg::before {
  content:'';
  position:absolute; top:2px; left:50%; transform:translateX(-50%);
  width:14px; height:20px;
  border-radius:4px;
  background:linear-gradient(180deg, rgba(0,229,255,0.6), rgba(24,255,255,0.3));
  box-shadow:0 0 8px rgba(0,229,255,0.5), 0 0 16px rgba(0,229,255,0.2);
  animation:jv-seg-pulse 2.5s ease-in-out infinite;
}
[data-theme="jarvis"] .jv-arc-seg:nth-child(1)  { transform:rotate(0deg); }
[data-theme="jarvis"] .jv-arc-seg:nth-child(2)  { transform:rotate(36deg); }
[data-theme="jarvis"] .jv-arc-seg:nth-child(3)  { transform:rotate(72deg); }
[data-theme="jarvis"] .jv-arc-seg:nth-child(4)  { transform:rotate(108deg); }
[data-theme="jarvis"] .jv-arc-seg:nth-child(5)  { transform:rotate(144deg); }
[data-theme="jarvis"] .jv-arc-seg:nth-child(6)  { transform:rotate(180deg); }
[data-theme="jarvis"] .jv-arc-seg:nth-child(7)  { transform:rotate(216deg); }
[data-theme="jarvis"] .jv-arc-seg:nth-child(8)  { transform:rotate(252deg); }
[data-theme="jarvis"] .jv-arc-seg:nth-child(9)  { transform:rotate(288deg); }
[data-theme="jarvis"] .jv-arc-seg:nth-child(10) { transform:rotate(324deg); }
/* Stagger pulse per segment */
[data-theme="jarvis"] .jv-arc-seg:nth-child(2)::before  { animation-delay:.25s; }
[data-theme="jarvis"] .jv-arc-seg:nth-child(3)::before  { animation-delay:.5s; }
[data-theme="jarvis"] .jv-arc-seg:nth-child(4)::before  { animation-delay:.75s; }
[data-theme="jarvis"] .jv-arc-seg:nth-child(5)::before  { animation-delay:1s; }
[data-theme="jarvis"] .jv-arc-seg:nth-child(6)::before  { animation-delay:1.25s; }
[data-theme="jarvis"] .jv-arc-seg:nth-child(7)::before  { animation-delay:1.5s; }
[data-theme="jarvis"] .jv-arc-seg:nth-child(8)::before  { animation-delay:1.75s; }
[data-theme="jarvis"] .jv-arc-seg:nth-child(9)::before  { animation-delay:2s; }
[data-theme="jarvis"] .jv-arc-seg:nth-child(10)::before { animation-delay:2.25s; }

/* Inner ring — glowing circle border */
[data-theme="jarvis"] .jv-arc-inner-ring {
  position:absolute;
  top:28px; left:28px; right:28px; bottom:28px;
  border-radius:50%;
  border:2px solid rgba(0,229,255,0.3);
  box-shadow:0 0 12px rgba(0,229,255,0.15), inset 0 0 12px rgba(0,229,255,0.08);
  animation:jv-ring-pulse 3s ease-in-out infinite;
}

/* Core — bright white-blue center */
[data-theme="jarvis"] .jv-arc-core {
  position:absolute;
  top:50%; left:50%; transform:translate(-50%,-50%);
  width:40px; height:40px;
  border-radius:50%;
  background:radial-gradient(circle, #e0f7fa 0%, #18ffff 30%, rgba(0,229,255,0.4) 60%, transparent 80%);
  box-shadow:0 0 20px rgba(24,255,255,0.6), 0 0 40px rgba(0,229,255,0.3), 0 0 60px rgba(0,229,255,0.15);
  animation:jv-core-pulse 2s ease-in-out infinite;
}

@keyframes jv-seg-pulse {
  0%,100% { opacity:0.5; box-shadow:0 0 6px rgba(0,229,255,0.3); }
  50%     { opacity:1;   box-shadow:0 0 12px rgba(0,229,255,0.6), 0 0 24px rgba(0,229,255,0.2); }
}
@keyframes jv-ring-pulse {
  0%,100% { border-color:rgba(0,229,255,0.25); box-shadow:0 0 10px rgba(0,229,255,0.1), inset 0 0 10px rgba(0,229,255,0.05); }
  50%     { border-color:rgba(0,229,255,0.5);  box-shadow:0 0 18px rgba(0,229,255,0.25), inset 0 0 18px rgba(0,229,255,0.12); }
}
@keyframes jv-core-pulse {
  0%,100% { box-shadow:0 0 16px rgba(24,255,255,0.5), 0 0 35px rgba(0,229,255,0.25); transform:translate(-50%,-50%) scale(1); }
  50%     { box-shadow:0 0 24px rgba(24,255,255,0.8), 0 0 50px rgba(0,229,255,0.4), 0 0 80px rgba(0,229,255,0.15); transform:translate(-50%,-50%) scale(1.06); }
}

/* Hide default SVG reactor circles on JARVIS — arc reactor replaces them */
[data-theme="jarvis"] .schematic-svg circle:not([class]) { opacity:0; }
[data-theme="jarvis"] .schematic-svg .sch-core-hit { opacity:1; }

/* ── Schematic HUD — animated concentric rings ── */
.jv-sch-hud { display:none; }
[data-theme="jarvis"] .jv-sch-hud {
  display:block; position:absolute; z-index:1;
  top:50%; left:50%; transform:translate(-50%,-50%);
  width:600px; height:600px;
  pointer-events:none;
}
/* Shared ring base */
[data-theme="jarvis"] .jv-hud-r {
  position:absolute; border-radius:50%;
  top:50%; left:50%; transform:translate(-50%,-50%);
  border-style:solid; border-color:rgba(0,229,255,0.15);
}

/* R1 — outermost, thick, slow counter-rotate, dashed */
[data-theme="jarvis"] .jv-hud-r1 {
  width:580px; height:580px;
  border-width:3px;
  border-color:rgba(0,229,255,0.12);
  border-style:dashed;
  animation:jv-hud-spin-rev 40s linear infinite;
}
/* R2 — thick solid, slow rotate, pulsing glow */
[data-theme="jarvis"] .jv-hud-r2 {
  width:540px; height:540px;
  border-width:2px;
  border-color:rgba(0,229,255,0.2);
  box-shadow:0 0 15px rgba(0,229,255,0.08), inset 0 0 15px rgba(0,229,255,0.04);
  animation:jv-hud-spin 30s linear infinite, jv-hud-glow 4s ease-in-out infinite;
}
/* R3 — medium, dotted, counter-rotate */
[data-theme="jarvis"] .jv-hud-r3 {
  width:480px; height:480px;
  border-width:1px;
  border-style:dotted;
  border-color:rgba(0,229,255,0.18);
  animation:jv-hud-spin-rev 25s linear infinite;
}
/* R4 — thick accent ring, partial arc via clip-path, rotating */
[data-theme="jarvis"] .jv-hud-r4 {
  width:420px; height:420px;
  border-width:3px;
  border-color:rgba(230,74,25,0.2);
  border-top-color:rgba(230,74,25,0.6);
  border-right-color:transparent;
  border-bottom-color:rgba(230,74,25,0.1);
  border-left-color:transparent;
  box-shadow:0 0 20px rgba(230,74,25,0.1), inset 0 0 20px rgba(230,74,25,0.05);
  animation:jv-hud-spin-rev 18s linear infinite, jv-hud-glow-orange 3s ease-in-out infinite;
}
/* R5 — thin dashed, slow rotate */
[data-theme="jarvis"] .jv-hud-r5 {
  width:350px; height:350px;
  border-width:1px;
  border-style:dashed;
  border-color:rgba(0,229,255,0.15);
  animation:jv-hud-spin-rev 35s linear infinite;
}
/* R6 — inner accent, thick partial, fast rotate */
/* R6 — equalizer/spectrum ring */
[data-theme="jarvis"] .jv-hud-r6 {
  width:280px; height:280px;
  border:none;
  background:conic-gradient(
    from 0deg,
    rgba(0,229,255,0.5) 0deg, rgba(0,229,255,0.15) 4deg, transparent 5deg,
    transparent 7deg, rgba(0,229,255,0.7) 7deg, rgba(0,229,255,0.2) 12deg, transparent 13deg,
    transparent 15deg, rgba(0,229,255,0.4) 15deg, rgba(0,229,255,0.1) 18deg, transparent 19deg,
    transparent 21deg, rgba(0,229,255,0.8) 21deg, rgba(0,229,255,0.25) 27deg, transparent 28deg,
    transparent 30deg, rgba(0,229,255,0.3) 30deg, rgba(0,229,255,0.08) 33deg, transparent 34deg,
    transparent 36deg, rgba(0,229,255,0.6) 36deg, rgba(0,229,255,0.18) 41deg, transparent 42deg,
    transparent 44deg, rgba(0,229,255,0.45) 44deg, rgba(0,229,255,0.12) 48deg, transparent 49deg,
    transparent 51deg, rgba(0,229,255,0.9) 51deg, rgba(0,229,255,0.3) 58deg, transparent 59deg,
    transparent 61deg, rgba(0,229,255,0.35) 61deg, rgba(0,229,255,0.1) 64deg, transparent 65deg,
    transparent 67deg, rgba(0,229,255,0.55) 67deg, rgba(0,229,255,0.15) 72deg, transparent 73deg,
    transparent 75deg, rgba(0,229,255,0.7) 75deg, rgba(0,229,255,0.2) 81deg, transparent 82deg,
    transparent 84deg, rgba(0,229,255,0.4) 84deg, rgba(0,229,255,0.1) 87deg, transparent 88deg,
    transparent 90deg, rgba(0,229,255,0.85) 90deg, rgba(0,229,255,0.28) 97deg, transparent 98deg,
    transparent 100deg, rgba(0,229,255,0.3) 100deg, transparent 103deg,
    transparent 105deg, rgba(0,229,255,0.6) 105deg, transparent 110deg,
    transparent 112deg, rgba(0,229,255,0.5) 112deg, transparent 116deg,
    transparent 118deg, rgba(0,229,255,0.75) 118deg, transparent 124deg,
    transparent 126deg, rgba(0,229,255,0.35) 126deg, transparent 129deg,
    transparent 131deg, rgba(0,229,255,0.55) 131deg, transparent 136deg,
    transparent 138deg, rgba(0,229,255,0.4) 138deg, transparent 141deg,
    transparent 143deg, rgba(0,229,255,0.9) 143deg, transparent 150deg,
    transparent 152deg, rgba(0,229,255,0.3) 152deg, transparent 155deg,
    transparent 157deg, rgba(0,229,255,0.65) 157deg, transparent 162deg,
    transparent 164deg, rgba(0,229,255,0.45) 164deg, transparent 168deg,
    transparent 170deg, rgba(0,229,255,0.5) 170deg, transparent 174deg,
    transparent 176deg, rgba(0,229,255,0.8) 176deg, transparent 183deg,
    transparent 360deg
  );
  mask:radial-gradient(transparent 130px, #fff 132px, #fff 140px, transparent 142px);
  -webkit-mask:radial-gradient(transparent 130px, #fff 132px, #fff 140px, transparent 142px);
  box-shadow:0 0 16px rgba(0,229,255,0.1);
  animation:jv-hud-spin 12s linear infinite, jv-eq-pulse 2s ease-in-out infinite;
}
@keyframes jv-eq-pulse {
  0%,100% { opacity:0.7; filter:brightness(1); }
  25%     { opacity:0.9; filter:brightness(1.3); }
  50%     { opacity:0.6; filter:brightness(0.9); }
  75%     { opacity:1;   filter:brightness(1.5); }
}
/* Tick marks ring — generated with conic gradient */
[data-theme="jarvis"] .jv-hud-ticks {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:560px; height:560px; border-radius:50%;
  background:conic-gradient(
    from 0deg,
    rgba(0,229,255,0.3) 0deg, transparent 2deg,
    transparent 10deg, rgba(0,229,255,0.2) 10deg, transparent 11deg,
    transparent 20deg, rgba(0,229,255,0.3) 20deg, transparent 22deg,
    transparent 30deg, rgba(0,229,255,0.15) 30deg, transparent 31deg,
    transparent 40deg, rgba(0,229,255,0.3) 40deg, transparent 42deg,
    transparent 50deg, rgba(0,229,255,0.2) 50deg, transparent 51deg,
    transparent 60deg, rgba(0,229,255,0.3) 60deg, transparent 62deg,
    transparent 70deg, rgba(0,229,255,0.15) 70deg, transparent 71deg,
    transparent 80deg, rgba(0,229,255,0.3) 80deg, transparent 82deg,
    transparent 90deg, rgba(0,229,255,0.4) 90deg, transparent 93deg,
    transparent 100deg, rgba(0,229,255,0.2) 100deg, transparent 101deg,
    transparent 110deg, rgba(0,229,255,0.3) 110deg, transparent 112deg,
    transparent 120deg, rgba(0,229,255,0.15) 120deg, transparent 121deg,
    transparent 130deg, rgba(0,229,255,0.3) 130deg, transparent 132deg,
    transparent 140deg, rgba(0,229,255,0.2) 140deg, transparent 141deg,
    transparent 150deg, rgba(0,229,255,0.3) 150deg, transparent 152deg,
    transparent 160deg, rgba(0,229,255,0.15) 160deg, transparent 161deg,
    transparent 170deg, rgba(0,229,255,0.3) 170deg, transparent 172deg,
    transparent 180deg, rgba(0,229,255,0.4) 180deg, transparent 183deg,
    transparent 190deg, rgba(0,229,255,0.2) 190deg, transparent 191deg,
    transparent 200deg, rgba(0,229,255,0.3) 200deg, transparent 202deg,
    transparent 210deg, rgba(0,229,255,0.15) 210deg, transparent 211deg,
    transparent 220deg, rgba(0,229,255,0.3) 220deg, transparent 222deg,
    transparent 230deg, rgba(0,229,255,0.2) 230deg, transparent 231deg,
    transparent 240deg, rgba(0,229,255,0.3) 240deg, transparent 242deg,
    transparent 250deg, rgba(0,229,255,0.15) 250deg, transparent 251deg,
    transparent 260deg, rgba(0,229,255,0.3) 260deg, transparent 262deg,
    transparent 270deg, rgba(0,229,255,0.4) 270deg, transparent 273deg,
    transparent 280deg, rgba(0,229,255,0.2) 280deg, transparent 281deg,
    transparent 290deg, rgba(0,229,255,0.3) 290deg, transparent 292deg,
    transparent 300deg, rgba(0,229,255,0.15) 300deg, transparent 301deg,
    transparent 310deg, rgba(0,229,255,0.3) 310deg, transparent 312deg,
    transparent 320deg, rgba(0,229,255,0.2) 320deg, transparent 321deg,
    transparent 330deg, rgba(0,229,255,0.3) 330deg, transparent 332deg,
    transparent 340deg, rgba(0,229,255,0.15) 340deg, transparent 341deg,
    transparent 350deg, rgba(0,229,255,0.3) 350deg, transparent 352deg,
    transparent 360deg
  );
  mask:radial-gradient(transparent 268px, #fff 270px, #fff 278px, transparent 280px);
  -webkit-mask:radial-gradient(transparent 268px, #fff 270px, #fff 278px, transparent 280px);
  animation:jv-hud-spin 50s linear infinite;
}

/* HUD ring animations */
@keyframes jv-hud-spin { to { transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes jv-hud-spin-rev { to { transform:translate(-50%,-50%) rotate(-360deg); } }
@keyframes jv-hud-glow {
  0%,100% { box-shadow:0 0 12px rgba(0,229,255,0.06), inset 0 0 12px rgba(0,229,255,0.03); }
  50%     { box-shadow:0 0 25px rgba(0,229,255,0.15), inset 0 0 25px rgba(0,229,255,0.08); }
}
@keyframes jv-hud-glow2 {
  0%,100% { box-shadow:0 0 15px rgba(0,229,255,0.08); border-top-color:rgba(0,229,255,0.4); }
  50%     { box-shadow:0 0 30px rgba(0,229,255,0.2); border-top-color:rgba(0,229,255,0.7); }
}
@keyframes jv-hud-glow-orange {
  0%,100% { box-shadow:0 0 15px rgba(230,74,25,0.08); border-top-color:rgba(230,74,25,0.5); }
  50%     { box-shadow:0 0 30px rgba(230,74,25,0.2); border-top-color:rgba(230,74,25,0.8); }
}

@media (prefers-reduced-motion:reduce) {
  [data-theme="jarvis"] .jv-arc-seg::before { animation:none; opacity:0.7; }
  [data-theme="jarvis"] .jv-arc-inner-ring { animation:none; }
  [data-theme="jarvis"] .jv-arc-core { animation:none; }
}

/* Card actions */
[data-theme="jarvis"] .c-btn {
  border-radius: 3px; font-family: 'Exo 2', sans-serif;
  font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
}

/* HUD panel */
[data-theme="jarvis"] .app-hud-panel {
  background: rgba(14,26,46,0.85);
  border: 1px solid rgba(0,229,255,0.15); border-radius: 3px;
  backdrop-filter: blur(8px);
}
[data-theme="jarvis"] .app-hud-panel .dock-lbl { color: rgba(0,229,255,0.6); }
[data-theme="jarvis"] .app-hud-panel .dock-lbl a { color: rgba(0,229,255,0.6); }
[data-theme="jarvis"] .app-hud-panel .dock-lbl-val { color: #00e5ff; }
[data-theme="jarvis"] .app-hud-panel .db { border: 1px solid rgba(0,229,255,0.2); border-radius: 50%; }
[data-theme="jarvis"] .app-hud-panel .db.active { border-color: #00e5ff; box-shadow: 0 0 6px rgba(0,229,255,0.2); }
[data-theme="jarvis"] .app-hud-panel .fb { color: rgba(0,229,255,0.6); border-color: rgba(0,229,255,0.15); border-radius: 3px; }
[data-theme="jarvis"] .app-hud-panel .fb.active { background: rgba(0,229,255,0.1); color: #18ffff; }

/* Scrollbar */
[data-theme="jarvis"] ::-webkit-scrollbar { width: 6px; }
[data-theme="jarvis"] ::-webkit-scrollbar-track { background: rgba(7,13,26,0.5); }
[data-theme="jarvis"] ::-webkit-scrollbar-thumb { background: rgba(0,229,255,0.2); border-radius: 3px; }
[data-theme="jarvis"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,229,255,0.4); }

/* Popover */
[data-theme="jarvis"] .side-popover {
  background: rgba(14,26,46,0.95); border: 1px solid rgba(0,229,255,0.2); border-radius: 3px;
  backdrop-filter: blur(8px);
}
[data-theme="jarvis"] .side-popover-item {
  color: rgba(0,229,255,0.7); font-family: 'Exo 2', sans-serif;
  font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-size: .7rem;
}
[data-theme="jarvis"] .side-popover-item:hover { background: rgba(0,229,255,0.08); color: #18ffff; }

/* Sidebar folder */
[data-theme="jarvis"] .side-folder-toggle {
  color: rgba(0,229,255,0.6); border-color: rgba(0,229,255,0.12);
  font-family: 'Exo 2', sans-serif;
}
[data-theme="jarvis"] .side-folder-body { border-left-color: rgba(0,229,255,0.1); }
[data-theme="jarvis"] .side-mission-item { color: rgba(0,229,255,0.6); }
[data-theme="jarvis"] .side-mission-item:hover { background: rgba(0,229,255,0.06); }

/* Marketing page overrides */
[data-theme="jarvis"] nav:not(.app-side-nav) { border-bottom: 1px solid rgba(0,229,255,0.15); }

/* ═══════════════════════════════════════════════════════════════════
   J.A.R.V.I.S. — Holographic HUD Immersion
   Arc reactor glow, holographic scan lines, translucent panels,
   geometric HUD elements, data readout overlays, pulse animations.
═══════════════════════════════════════════════════════════════════ */

/* ── 1. Animations ── */
@keyframes jv-pulse { 0%,100% { opacity:0.4; } 50% { opacity:0.8; } }
@keyframes jv-arc-pulse { 0%,100% { opacity:0.1; } 50% { opacity:0.18; } }
@keyframes jv-data-scroll {
  0%   { transform:translateY(0); }
  100% { transform:translateY(-50%); }
}

/* ── 2. (removed — scan line) ── */
[data-theme="jarvis"] .app-view-content::before { display:none; }

/* ── 3. Arc reactor ambient glow — bottom-right corner ── */
[data-theme="jarvis"] .bg-hero-glow { background:none; }

/* ── 4. HUD grid overlay — fine geometric lines ── */
[data-theme="jarvis"] .bg-grid {
  opacity:1;
  background-image:none;
  background-size:auto;
}
/* JARVIS HUD background — concentric rings, circuit traces, data nodes */
[data-theme="jarvis"] .bg-grid::before {
  content:''; position:fixed; top:0; left:0; right:0; bottom:0;
  pointer-events:none; z-index:0;
  background:
    /* Ambient glow from center */
    radial-gradient(ellipse at 50% 50%, rgba(0,229,255,0.06) 0%, transparent 50%),
    /* Vignette */
    radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(7,13,26,0.5) 100%);
}
[data-theme="jarvis"] .bg-grid::after {
  content:''; position:fixed; top:0; left:0; right:0; bottom:0;
  pointer-events:none; z-index:0; opacity:0.18;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 800 800'%3E%3Cdefs%3E%3Cstyle%3Ecircle,path,line,rect%7Bfill:none;stroke:%234fc3f7%7D%3C/style%3E%3C/defs%3E%3C!-- Concentric rings --%3E%3Ccircle cx='400' cy='400' r='350' stroke-width='.5' stroke-dasharray='4 8'/%3E%3Ccircle cx='400' cy='400' r='300' stroke-width='.8'/%3E%3Ccircle cx='400' cy='400' r='250' stroke-width='.3' stroke-dasharray='2 6'/%3E%3Ccircle cx='400' cy='400' r='200' stroke-width='1'/%3E%3Ccircle cx='400' cy='400' r='150' stroke-width='.4' stroke-dasharray='8 4'/%3E%3Ccircle cx='400' cy='400' r='100' stroke-width='.6'/%3E%3C!-- Tick marks on outer ring --%3E%3Cg stroke-width='.6'%3E%3Cline x1='400' y1='50' x2='400' y2='65'/%3E%3Cline x1='400' y1='735' x2='400' y2='750'/%3E%3Cline x1='50' y1='400' x2='65' y2='400'/%3E%3Cline x1='735' y1='400' x2='750' y2='400'/%3E%3Cline x1='647' y1='153' x2='637' y2='163'/%3E%3Cline x1='153' y1='647' x2='163' y2='637'/%3E%3Cline x1='647' y1='647' x2='637' y2='637'/%3E%3Cline x1='153' y1='153' x2='163' y2='163'/%3E%3C/g%3E%3C!-- Circuit traces — top-left --%3E%3Cpath d='M60 120 L160 120 L180 100 L260 100' stroke-width='.5'/%3E%3Cpath d='M80 160 L140 160 L155 145 L220 145' stroke-width='.4'/%3E%3Crect x='260' y='95' width='12' height='10' stroke-width='.5'/%3E%3C!-- Circuit traces — top-right --%3E%3Cpath d='M740 100 L640 100 L620 120 L540 120' stroke-width='.5'/%3E%3Cpath d='M720 140 L660 140 L645 155 L580 155' stroke-width='.4'/%3E%3Crect x='528' y='115' width='12' height='10' stroke-width='.5'/%3E%3C!-- Circuit traces — bottom-left --%3E%3Cpath d='M40 680 L130 680 L150 660 L240 660' stroke-width='.5'/%3E%3Cpath d='M60 720 L120 720 L140 700 L200 700' stroke-width='.4'/%3E%3Ccircle cx='245' cy='660' r='4' stroke-width='.5'/%3E%3C!-- Circuit traces — bottom-right --%3E%3Cpath d='M760 700 L660 700 L640 680 L560 680' stroke-width='.5'/%3E%3Cpath d='M740 660 L680 660 L665 675 L600 675' stroke-width='.4'/%3E%3Ccircle cx='555' cy='680' r='4' stroke-width='.5'/%3E%3C!-- Data nodes — small dots --%3E%3Cg fill='%234fc3f7' stroke='none'%3E%3Ccircle cx='180' cy='100' r='2'/%3E%3Ccircle cx='620' cy='120' r='2'/%3E%3Ccircle cx='150' cy='660' r='2'/%3E%3Ccircle cx='640' cy='680' r='2'/%3E%3Ccircle cx='400' cy='50' r='2'/%3E%3Ccircle cx='400' cy='750' r='2'/%3E%3Ccircle cx='50' cy='400' r='2'/%3E%3Ccircle cx='750' cy='400' r='2'/%3E%3C/g%3E%3C!-- Cross-hair at center --%3E%3Cline x1='390' y1='400' x2='370' y2='400' stroke-width='.5'/%3E%3Cline x1='410' y1='400' x2='430' y2='400' stroke-width='.5'/%3E%3Cline x1='400' y1='390' x2='400' y2='370' stroke-width='.5'/%3E%3Cline x1='400' y1='410' x2='400' y2='430' stroke-width='.5'/%3E%3C!-- Arc segments on 200r ring --%3E%3Cpath d='M400 200 A200 200 0 0 1 565 270' stroke-width='1.5' stroke-dasharray='12 6'/%3E%3Cpath d='M400 600 A200 200 0 0 1 235 530' stroke-width='1.5' stroke-dasharray='12 6'/%3E%3C!-- Horizontal data bars --%3E%3Cg stroke-width='.4'%3E%3Cline x1='100' y1='300' x2='200' y2='300'/%3E%3Crect x='205' y='297' width='20' height='6' rx='1'/%3E%3Cline x1='600' y1='500' x2='700' y2='500'/%3E%3Crect x='575' y='497' width='20' height='6' rx='1'/%3E%3C/g%3E%3C/svg%3E");
  background-size:min(100vw, 100vh);
  background-position:center center;
  background-repeat:no-repeat;
}

/* ── 5. Data readout decoration — sidebar header ── */
@keyframes jv-ticker {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}
[data-theme="jarvis"] .side-header {
  padding-bottom:18px; margin-bottom:4px;
  overflow:hidden;
}
[data-theme="jarvis"] .side-header::after {
  content:'NICE SPACESHIP — J.A.R.V.I.S. ONLINE — SYSTEMS NOMINAL — ALL MODULES ACTIVE — NICE SPACESHIP — J.A.R.V.I.S. ONLINE — SYSTEMS NOMINAL — ALL MODULES ACTIVE — ';
  position:absolute; bottom:0; left:0; height:12px;
  width:max-content;
  font-family:'Fira Code', monospace; font-size:7px; letter-spacing:.1em;
  color:rgba(0,229,255,0.2); white-space:nowrap;
  line-height:12px;
  background:rgba(7,13,26,0.8);
  border-top:1px solid rgba(0,229,255,0.08);
  animation:jv-ticker 25s linear infinite;
}

/* ── 6. Translucent glass panels — clean edges ── */
[data-theme="jarvis"] .widget-card::after,
[data-theme="jarvis"] .tc-section::after { content:''; display:none; }
[data-theme="jarvis"] .mcp-catalog-card {
  border:1px solid rgba(0,229,255,0.15); border-radius:3px;
  background:rgba(14,26,46,0.6);
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
[data-theme="jarvis"] .mcp-catalog-card::before {
  content:''; position:absolute; top:0; left:8px; right:8px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,229,255,0.2), transparent);
  pointer-events:none; z-index:2;
}
[data-theme="jarvis"] .mcp-catalog-card:hover::before {
  background:linear-gradient(90deg, transparent, rgba(0,229,255,0.4), transparent);
}

/* ── 7. HUD pipe network — subtle geometry ── */
[data-theme="jarvis"] .app-main::before {
  content:''; position:fixed; top:60px; right:30px;
  width:1px; height:120px;
  background:linear-gradient(180deg, transparent, rgba(0,229,255,0.08), transparent);
  pointer-events:none; z-index:0;
}
[data-theme="jarvis"] .app-main::after {
  content:''; position:fixed; top:60px; right:30px;
  width:60px; height:1px;
  background:linear-gradient(90deg, rgba(0,229,255,0.08), transparent);
  pointer-events:none; z-index:0;
}

/* ── 8. Blueprint tab bars ── */
[data-theme="jarvis"] .bp-type-tabs {
  border:1px solid rgba(0,229,255,0.12); border-radius:3px;
  background:#070d1a;
}
[data-theme="jarvis"] .bp-type-tabs::before {
  content:''; position:absolute; top:-1px; left:20px; right:20px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,229,255,0.25), transparent);
}
[data-theme="jarvis"] .bp-type-tabs::after {
  content:''; position:absolute; bottom:-1px; left:20px; right:20px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,229,255,0.12), transparent);
}
[data-theme="jarvis"] .security-tabs {
  border:1px solid rgba(0,229,255,0.12); border-radius:3px;
  background:rgba(7,13,26,0.6);
}

/* ── 9. Heading accents — HUD markers ── */
[data-theme="jarvis"] .app-view-content h1::after,
[data-theme="jarvis"] .app-view-content h2::after {
  content:''; display:block;
  width:40px; height:1px; margin-top:8px;
  background:linear-gradient(90deg, #00e5ff, transparent);
}
[data-theme="jarvis"] .home-greeting {
  text-shadow:0 0 20px rgba(0,229,255,0.15);
  letter-spacing:.1em;
}
[data-theme="jarvis"] hr,
[data-theme="jarvis"] .section-divider {
  border:none; height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,229,255,0.2) 20%, rgba(0,229,255,0.2) 80%, transparent);
}

/* ── 10. Holographic hover glow ── */
@keyframes jv-card-glow {
  0%, 100% { box-shadow:0 0 8px rgba(230,74,25,0.15); }
  50%      { box-shadow:0 0 16px rgba(230,74,25,0.3); }
}
[data-theme="jarvis"] .tcg-card:hover,
[data-theme="jarvis"] .mcp-catalog-card:hover {
  border-color:rgba(0,229,255,0.4);
  box-shadow:0 0 16px rgba(0,229,255,0.15);
  transition:all .3s;
}
[data-theme="jarvis"] .btn-primary {
  animation:jv-card-glow 4s ease-in-out infinite;
}

/* ── 11. Edge vignette — dark corners ── */
[data-theme="jarvis"] .app-main { position:relative; }

/* ── 12. Progress bars — holographic fill ── */
[data-theme="jarvis"] progress,
[data-theme="jarvis"] .progress-bar {
  background:rgba(7,13,26,0.8); border:1px solid rgba(0,229,255,0.15);
  border-radius:3px; height:10px; overflow:hidden;
}
[data-theme="jarvis"] progress::-webkit-progress-value,
[data-theme="jarvis"] .progress-fill {
  background:linear-gradient(90deg, rgba(0,229,255,0.3), rgba(24,255,255,0.5));
  border-radius:2px;
}
[data-theme="jarvis"] progress::-webkit-progress-bar {
  background:rgba(7,13,26,0.8); border-radius:2px;
}

/* ── 13. Card headers — HUD data bar ── */
[data-theme="jarvis"] .tcg-card .tcg-name-bar {
  background:rgba(0,229,255,0.04);
  border-bottom:1px solid rgba(0,229,255,0.12);
  position:relative;
}
[data-theme="jarvis"] .tcg-card .tcg-name-bar::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,229,255,0.2), transparent);
}
[data-theme="jarvis"] .tcg-card .tcg-stats {
  background:rgba(0,229,255,0.02);
  border-top:1px solid rgba(0,229,255,0.08);
}
[data-theme="jarvis"] .tcg-card .tcg-stats::before {
  content:'DIAGNOSTICS';
  position:absolute; top:-9px; right:8px;
  font-family:'Exo 2', sans-serif; font-size:6px; letter-spacing:.15em;
  color:rgba(0,229,255,0.25); text-transform:uppercase;
}

/* ── 14. Scrollbar — slim holographic ── */
[data-theme="jarvis"] ::-webkit-scrollbar { width:6px; }
[data-theme="jarvis"] ::-webkit-scrollbar-track { background:rgba(7,13,26,0.5); }
[data-theme="jarvis"] ::-webkit-scrollbar-thumb { background:rgba(0,229,255,0.2); border-radius:3px; }
[data-theme="jarvis"] ::-webkit-scrollbar-thumb:hover { background:rgba(0,229,255,0.4); }

/* ── 15. Prompt panel — holographic input ── */
[data-theme="jarvis"] .nice-ai-input-area {
  border:1px solid rgba(0,229,255,0.2); border-radius:16px;
  background:rgba(14,26,46,0.7);
  box-shadow:0 0 12px rgba(0,229,255,0.05);
}
[data-theme="jarvis"] .nice-ai-pills .nice-ai-pill {
  border:1px solid rgba(0,229,255,0.15); border-radius:3px;
  background:rgba(0,229,255,0.04);
  color:rgba(0,229,255,0.6); font-family:'Exo 2', sans-serif;
  font-weight:500; text-transform:uppercase; letter-spacing:.08em; font-size:.65rem;
}
[data-theme="jarvis"] .nice-ai-pills .nice-ai-pill:hover {
  background:rgba(0,229,255,0.12); color:#18ffff;
  border-color:rgba(0,229,255,0.4);
}

/* ── 16. Security tabs ── */
[data-theme="jarvis"] .security-tab {
  border-radius:3px; font-family:'Exo 2', sans-serif;
  font-weight:600; text-transform:uppercase; letter-spacing:.08em;
}
[data-theme="jarvis"] .security-tab.security-tab--active {
  background:rgba(0,229,255,0.15); color:#e0f7fa;
  border-color:rgba(0,229,255,0.5);
  box-shadow:0 0 10px rgba(0,229,255,0.15);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion:reduce) {
  [data-theme="jarvis"] .jv-hud-r { animation:none !important; }
  [data-theme="jarvis"] .jv-hud-ticks { animation:none; }
  [data-theme="jarvis"] .side-header::after { animation:none; }
  [data-theme="jarvis"] .btn-primary { animation:none; }
  [data-theme="jarvis"] .mcp-catalog-card::before { animation:none; }
}

/* ═══════════════════════════════════════════════════════════════════
   THEME: Cyberpunk — Night City Terminal
   Neon dystopia: glitch scanlines, chromatic aberration, CRT vignette,
   holographic cards, corner notches, data rain, neon glow pulse.
═══════════════════════════════════════════════════════════════════ */

/* ── 0. Variables ── */
[data-theme="cyberpunk"] {
  --bg:#0a0a0f;--bg2:#12121a;--surface:#1a1a2e;--surface2:#222240;
  --border:#2a2a4a;--border-hi:#ff2d6f;
  --accent:#ff2d6f;--accent2:#00fff5;
  --text:#e0e0ff;--text-muted:#7a7a9e;
  --glow:0 0 15px rgba(255,45,111,0.3);--glow-hi:0 0 25px rgba(0,255,245,0.4);
  --panel-bg:rgba(10,10,15,0.97);--nav-bg:rgba(10,10,15,0.98);
  --font-h:'Orbitron', sans-serif;--font-b:'Fira Code', monospace;--font-m:'Fira Code', monospace;
  --radius:2px;
  --cp-pink:#ff2d6f;--cp-cyan:#00fff5;--cp-purple:#b026ff;
}

/* ── 1. Glitch Scanlines — horizontal noise lines across viewport ── */
[data-theme="cyberpunk"] .app-main::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9999;
  background:repeating-linear-gradient(
    0deg,
    transparent, transparent 2px,
    rgba(255,45,111,0.015) 2px, rgba(255,45,111,0.015) 4px
  );
  animation:cp-scanline-drift 8s linear infinite;
}
@keyframes cp-scanline-drift {
  0%   { background-position:0 0; }
  100% { background-position:0 200px; }
}

/* ── 2. Neon Glow Pulse — accent elements breathe ── */
@keyframes cp-neon-pulse {
  0%, 100% { box-shadow:0 0 8px rgba(255,45,111,0.3), 0 0 20px rgba(255,45,111,0.1); }
  50%      { box-shadow:0 0 16px rgba(255,45,111,0.5), 0 0 40px rgba(255,45,111,0.2); }
}
@keyframes cp-neon-pulse-cyan {
  0%, 100% { box-shadow:0 0 8px rgba(0,255,245,0.3), 0 0 20px rgba(0,255,245,0.1); }
  50%      { box-shadow:0 0 16px rgba(0,255,245,0.5), 0 0 40px rgba(0,255,245,0.2); }
}
[data-theme="cyberpunk"] .btn-primary {
  background:rgba(255,45,111,0.15); border-color:#ff2d6f; color:#ff2d6f;
  animation:cp-neon-pulse 3s ease-in-out infinite;
}
[data-theme="cyberpunk"] .btn-primary:hover {
  background:rgba(255,45,111,0.3);
  animation:cp-neon-pulse 1.5s ease-in-out infinite;
}

/* ── 3. CRT Screen Curvature — barrel distortion vignette ── */
[data-theme="cyberpunk"] .app-main::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9998;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(5,5,10,0.6) 100%);
}

/* ── 4. Chromatic Aberration — RGB split on headings ── */
[data-theme="cyberpunk"] h1,
[data-theme="cyberpunk"] h2,
[data-theme="cyberpunk"] h3,
[data-theme="cyberpunk"] .app-hdr-title,
[data-theme="cyberpunk"] .home-greeting {
  text-shadow:
    -1.5px 0 rgba(255,45,111,0.5),
     1.5px 0 rgba(0,255,245,0.5),
     0 0 12px rgba(176,38,255,0.3);
}

/* ── 5. Glitch Text — brand header flicker ── */
@keyframes cp-glitch {
  0%, 93%, 100% { transform:none; opacity:1; }
  94%  { transform:translate(-2px, 1px) skewX(-1deg); opacity:0.85; }
  95%  { transform:translate(3px, -1px) skewX(2deg); opacity:0.9; }
  96%  { transform:translate(-1px, 2px); opacity:0.8; clip-path:inset(20% 0 40% 0); }
  97%  { transform:translate(2px, -2px); opacity:0.95; clip-path:none; }
}
[data-theme="cyberpunk"] .app-brand-text,
[data-theme="cyberpunk"] .app-hdr-title {
  animation:cp-glitch 4s ease-in-out infinite;
  font-family:'Orbitron', sans-serif;
  letter-spacing:.15em;
}

/* ── 6. Monospace Everything ── */
[data-theme="cyberpunk"] * { font-family:'Fira Code', 'Orbitron', monospace; }
[data-theme="cyberpunk"] h1, [data-theme="cyberpunk"] h2, [data-theme="cyberpunk"] h3,
[data-theme="cyberpunk"] .app-brand-text { font-family:'Orbitron', sans-serif; }

/* ── 7. Neon Underline on Active Sidebar Links ── */
[data-theme="cyberpunk"] .side-link {
  border-left:none; position:relative;
}
[data-theme="cyberpunk"] .side-link::after {
  content:''; position:absolute; bottom:0; left:12px; right:12px; height:2px;
  background:transparent; transition:all .2s;
}
[data-theme="cyberpunk"] .side-link:hover::after {
  background:rgba(255,45,111,0.4);
  box-shadow:0 0 6px rgba(255,45,111,0.3);
}
[data-theme="cyberpunk"] .side-link.active::after {
  background:#ff2d6f;
  box-shadow:0 0 10px rgba(255,45,111,0.6), 0 0 20px rgba(255,45,111,0.2);
}
[data-theme="cyberpunk"] .side-link.active {
  background:rgba(255,45,111,0.06); color:#ff2d6f;
}

/* ── 8. Holographic Shimmer on Card Hover ── */
@keyframes cp-holo-sweep {
  0%   { left:-100%; }
  100% { left:200%; }
}
[data-theme="cyberpunk"] .tcg-card,
[data-theme="cyberpunk"] .mc-card,
[data-theme="cyberpunk"] .mcp-catalog-card,
[data-theme="cyberpunk"] .widget-card {
  position:relative; overflow:hidden;
}
[data-theme="cyberpunk"] .tcg-card::after,
[data-theme="cyberpunk"] .mc-card::after,
[data-theme="cyberpunk"] .mcp-catalog-card::after,
[data-theme="cyberpunk"] .widget-card::after {
  content:''; position:absolute; top:0; left:-100%; width:50%; height:100%;
  background:linear-gradient(105deg, transparent 30%, rgba(255,45,111,0.06) 45%, rgba(0,255,245,0.08) 55%, transparent 70%);
  pointer-events:none; transition:none;
}
[data-theme="cyberpunk"] .tcg-card:hover::after,
[data-theme="cyberpunk"] .mc-card:hover::after,
[data-theme="cyberpunk"] .mcp-catalog-card:hover::after,
[data-theme="cyberpunk"] .widget-card:hover::after {
  animation:cp-holo-sweep .8s ease-out forwards;
}

/* ── 9. Hacking Cursor on Inputs ── */
[data-theme="cyberpunk"] input[type="text"],
[data-theme="cyberpunk"] textarea,
[data-theme="cyberpunk"] .search-input,
[data-theme="cyberpunk"] .nice-ai-input {
  border-radius:2px; border:1px solid #2a2a4a; background:#0a0a0f; color:#00fff5;
  caret-color:#00fff5; font-family:'Fira Code', monospace;
}
[data-theme="cyberpunk"] input[type="text"]:focus,
[data-theme="cyberpunk"] textarea:focus,
[data-theme="cyberpunk"] .search-input:focus {
  border-color:#ff2d6f;
  box-shadow:0 0 8px rgba(255,45,111,0.2), inset 0 0 12px rgba(0,255,245,0.03);
}
[data-theme="cyberpunk"] input::placeholder,
[data-theme="cyberpunk"] textarea::placeholder { color:#4a4a6e; }

/* ── 10. Corner Notches — angular cyberpunk clipping ── */
[data-theme="cyberpunk"] .tcg-card,
[data-theme="cyberpunk"] .mc-card,
[data-theme="cyberpunk"] .mcp-catalog-card,
[data-theme="cyberpunk"] .widget-card,
[data-theme="cyberpunk"] .security-posture-card,
[data-theme="cyberpunk"] .nice-ai-input-area {
  clip-path:polygon(
    0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px,
    100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px)
  );
  border-radius:0;
}
[data-theme="cyberpunk"] .nice-ai-input-area {
  border:1px solid #2a2a4a; background:#12121a;
}
[data-theme="cyberpunk"] .nice-ai-input-area:focus-within {
  border-color:#ff2d6f; box-shadow:0 0 12px rgba(255,45,111,0.15);
}

/* ── 11. Noise Texture Overlay — surveillance feed grain ── */
[data-theme="cyberpunk"] body::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9997;
  opacity:0.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-repeat:repeat;
}

/* ── 12. Data Rain Particles — falling code in background grid ── */
@keyframes cp-data-fall {
  0%   { transform:translateY(-100vh); opacity:0; }
  10%  { opacity:0.6; }
  90%  { opacity:0.6; }
  100% { transform:translateY(100vh); opacity:0; }
}
[data-theme="cyberpunk"] .bg-grid {
  opacity:0.15;
  background-image:
    linear-gradient(rgba(255,45,111,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,245,0.06) 1px, transparent 1px);
  background-size:48px 48px;
}
[data-theme="cyberpunk"] .bg-grid::before,
[data-theme="cyberpunk"] .bg-grid::after {
  content:'01 FF A0 3C 7E D2 00 B4 1F 9A E6 C8 22 5D 88 AB 0D F1';
  position:absolute; top:0; font-family:'Fira Code', monospace; font-size:9px;
  color:rgba(0,255,245,0.12); white-space:nowrap; pointer-events:none;
  writing-mode:vertical-lr; letter-spacing:12px; line-height:48px;
  animation:cp-data-fall 12s linear infinite;
}
[data-theme="cyberpunk"] .bg-grid::before { left:15%; animation-delay:0s; }
[data-theme="cyberpunk"] .bg-grid::after  { left:72%; animation-delay:-5s; content:'D4 2B 97 E1 00 6F C3 58 AA 1E 7B 0C F5 39 84 B6 4D E8'; }

/* ── Component Overrides ── */
[data-theme="cyberpunk"] .btn { border-radius:2px; border-color:#2a2a4a; }

/* Tabs — angular neon segments */
[data-theme="cyberpunk"] .bp-type-tab,
[data-theme="cyberpunk"] .bridge-hero-tab,
[data-theme="cyberpunk"] .log-view-tab {
  border-radius:2px; border:1px solid #2a2a4a; background:transparent;
  color:#7a7a9e; font-family:'Orbitron',sans-serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.1em; font-size:.6rem;
  clip-path:polygon(0 4px, 4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px));
}
[data-theme="cyberpunk"] .bp-type-tab.active,
[data-theme="cyberpunk"] .bridge-hero-tab.active,
[data-theme="cyberpunk"] .log-view-tab.active {
  background:rgba(255,45,111,0.12); color:#ff2d6f; border-color:#ff2d6f;
  text-shadow:0 0 8px rgba(255,45,111,0.4);
}
[data-theme="cyberpunk"] .bp-type-tab:hover,
[data-theme="cyberpunk"] .bridge-hero-tab:hover,
[data-theme="cyberpunk"] .log-view-tab:hover { border-color:rgba(255,45,111,0.4); color:#ff2d6f; }

/* Sub-tabs & filters */
[data-theme="cyberpunk"] .bp-sub-tab { border-radius:2px; border:1px solid #2a2a4a; background:transparent; color:#7a7a9e; }
[data-theme="cyberpunk"] .bp-sub-tab.active { background:rgba(255,45,111,0.12); color:#ff2d6f; border-color:#ff2d6f; }
[data-theme="cyberpunk"] .bp-rarity-btn { border-radius:2px; border:1px solid #2a2a4a; background:#12121a; color:#7a7a9e; }
[data-theme="cyberpunk"] .bp-rarity-btn.active { background:rgba(255,45,111,0.15); color:#ff2d6f; border-color:#ff2d6f; }

/* Cards */
[data-theme="cyberpunk"] .mc-card { border-radius:0; border:1px solid #2a2a4a; background:rgba(18,18,26,0.9); }
[data-theme="cyberpunk"] .mc-card-running { border-left:3px solid #ff2d6f; }
[data-theme="cyberpunk"] .mc-card-completed { border-left:3px solid #00fff5; }

/* Security tabs */
[data-theme="cyberpunk"] .security-tab { border-radius:2px; }
[data-theme="cyberpunk"] .security-tab.security-tab--active { background:rgba(255,45,111,0.12); color:#ff2d6f; }
[data-theme="cyberpunk"] .security-tabs {
  clip-path:polygon(0 4px, 4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px));
}

/* Prompt panel — notched neon terminal */
[data-theme="cyberpunk"] .nice-ai-pills .nice-ai-pill {
  clip-path:polygon(0 3px, 3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px));
  border-color:#2a2a4a;
}
[data-theme="cyberpunk"] .nice-ai-pills .nice-ai-pill:hover {
  border-color:#ff2d6f; color:#ff2d6f;
  box-shadow:0 0 8px rgba(255,45,111,0.2);
}

/* Sidebar — dark with neon accents */
[data-theme="cyberpunk"] .app-sidebar {
  border-right:1px solid rgba(255,45,111,0.15);
}

/* Scrollbar — thin neon */
[data-theme="cyberpunk"] ::-webkit-scrollbar { width:6px; height:6px; }
[data-theme="cyberpunk"] ::-webkit-scrollbar-track { background:#0a0a0f; }
[data-theme="cyberpunk"] ::-webkit-scrollbar-thumb { background:rgba(255,45,111,0.3); border-radius:0; }
[data-theme="cyberpunk"] ::-webkit-scrollbar-thumb:hover { background:rgba(255,45,111,0.5); }

/* ── 13. Corner Bracket Borders — L-shaped HUD corners with node dots ── */
[data-theme="cyberpunk"] .widget-card,
[data-theme="cyberpunk"] .security-posture-card,
[data-theme="cyberpunk"] .mc-card {
  border:none; position:relative; background:rgba(18,18,26,0.85);
  /* Override the notch clip for these — brackets need visible corners */
  clip-path:none;
}
[data-theme="cyberpunk"] .widget-card::before,
[data-theme="cyberpunk"] .security-posture-card::before,
[data-theme="cyberpunk"] .mc-card::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  border:1px solid rgba(255,45,111,0.25);
  /* L-bracket corners via border-image */
  mask-image:
    linear-gradient(#000, #000) top left,
    linear-gradient(#000, #000) top right,
    linear-gradient(#000, #000) bottom left,
    linear-gradient(#000, #000) bottom right,
    linear-gradient(#000, #000) top,
    linear-gradient(#000, #000) bottom,
    linear-gradient(#000, #000) left,
    linear-gradient(#000, #000) right;
  mask-size:
    16px 16px, 16px 16px, 16px 16px, 16px 16px,
    calc(100% - 32px) 1px, calc(100% - 32px) 1px,
    1px calc(100% - 32px), 1px calc(100% - 32px);
  mask-position:
    0 0, 100% 0, 0 100%, 100% 100%,
    16px 0, 16px 100%, 0 16px, 100% 16px;
  mask-repeat:no-repeat;
  -webkit-mask-image:
    linear-gradient(#000, #000), linear-gradient(#000, #000),
    linear-gradient(#000, #000), linear-gradient(#000, #000),
    linear-gradient(#000, #000), linear-gradient(#000, #000),
    linear-gradient(#000, #000), linear-gradient(#000, #000);
  -webkit-mask-size:
    16px 16px, 16px 16px, 16px 16px, 16px 16px,
    calc(100% - 32px) 1px, calc(100% - 32px) 1px,
    1px calc(100% - 32px), 1px calc(100% - 32px);
  -webkit-mask-position:
    0 0, 100% 0, 0 100%, 100% 100%,
    16px 0, 16px 100%, 0 16px, 100% 16px;
  -webkit-mask-repeat:no-repeat;
}
/* Node dots at bracket junctions */
[data-theme="cyberpunk"] .widget-card::after,
[data-theme="cyberpunk"] .mc-card::after {
  content:''; position:absolute; top:-3px; left:-3px; width:6px; height:6px;
  border-radius:50%; background:#ff2d6f;
  box-shadow:
    calc(100% + 0px) 0 0 0 rgba(0,255,245,0.6),
    0 calc(100% + 0px) 0 0 rgba(0,255,245,0.6),
    calc(100% + 0px) calc(100% + 0px) 0 0 #ff2d6f;
  pointer-events:none; z-index:2;
}

/* ── 14. Hazard Stripe Accents — diagonal stripes on active elements ── */
@keyframes cp-hazard-scroll { 0% { background-position:0 0; } 100% { background-position:20px 0; } }
[data-theme="cyberpunk"] .bp-type-tab.active,
[data-theme="cyberpunk"] .security-tab.security-tab--active {
  border-bottom:3px solid transparent;
  border-image:repeating-linear-gradient(
    -45deg, #ff2d6f 0 4px, transparent 4px 8px
  ) 3;
  animation:cp-hazard-scroll 1s linear infinite;
}
/* Hazard bar under sidebar header */
[data-theme="cyberpunk"] .side-header::after {
  content:''; display:block; height:3px; margin-top:8px;
  background:repeating-linear-gradient(-45deg, #ff2d6f 0 4px, rgba(255,45,111,0.15) 4px 8px);
  animation:cp-hazard-scroll 1.5s linear infinite;
}

/* ── 15. Circuit-Line Sidebar + Wet Reflection ── */
[data-theme="cyberpunk"] .app-sidebar {
  background:linear-gradient(180deg, #08081a 0%, #0a0a1a 60%, rgba(255,45,111,0.03) 100%);
  border-right:1px solid rgba(255,45,111,0.2);
}
/* Wet reflection at bottom of sidebar */
[data-theme="cyberpunk"] .app-sidebar::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:120px;
  pointer-events:none;
  background:linear-gradient(0deg,
    rgba(255,45,111,0.06) 0%,
    rgba(0,255,245,0.03) 40%,
    transparent 100%
  );
  mask-image:linear-gradient(to top, black 0%, transparent 100%);
  -webkit-mask-image:linear-gradient(to top, black 0%, transparent 100%);
}
/* Circuit trace lines in sidebar */
[data-theme="cyberpunk"] .side-link {
  border-left:2px solid transparent; position:relative;
}
[data-theme="cyberpunk"] .side-link::before {
  content:''; position:absolute; left:-1px; top:50%; width:8px; height:1px;
  background:rgba(255,45,111,0.15); transition:all .2s;
}
[data-theme="cyberpunk"] .side-link:hover::before {
  width:14px; background:rgba(255,45,111,0.4);
}
[data-theme="cyberpunk"] .side-link.active::before {
  width:18px; background:#ff2d6f;
  box-shadow:0 0 8px rgba(255,45,111,0.5);
}

/* ── 16. Deeper Notch Clips — aggressive angular panels ── */
[data-theme="cyberpunk"] .bp-type-tabs,
[data-theme="cyberpunk"] .security-tabs {
  clip-path:polygon(
    0 6px, 6px 0, calc(100% - 12px) 0, 100% 12px,
    100% calc(100% - 6px), calc(100% - 6px) 100%, 12px 100%, 0 calc(100% - 12px)
  );
  border:1px solid rgba(255,45,111,0.2);
  background:rgba(10,10,20,0.9);
}
[data-theme="cyberpunk"] .nice-ai-input-area {
  clip-path:polygon(
    0 10px, 10px 0, calc(100% - 16px) 0, 100% 16px,
    100% calc(100% - 10px), calc(100% - 10px) 100%, 16px 100%, 0 calc(100% - 16px)
  );
}

/* ── 17. HUD Data Readout Decorations on Cards ── */
[data-theme="cyberpunk"] .tcg-card .tcg-stats {
  position:relative;
  border-top:1px solid rgba(255,45,111,0.2);
}
[data-theme="cyberpunk"] .tcg-card .tcg-stats::before {
  content:'// SYS.READOUT';
  position:absolute; top:-10px; right:8px;
  font-family:'Fira Code', monospace; font-size:7px; letter-spacing:.1em;
  color:rgba(0,255,245,0.3); text-transform:uppercase;
}
[data-theme="cyberpunk"] .tcg-card .tcg-name-bar {
  border-bottom:1px solid rgba(255,45,111,0.15);
  position:relative;
}
[data-theme="cyberpunk"] .tcg-card .tcg-name-bar::after {
  content:''; position:absolute; bottom:-1px; left:0; width:40px; height:2px;
  background:linear-gradient(90deg, #ff2d6f, transparent);
}
/* Status indicator line on card marquee */
[data-theme="cyberpunk"] .tcg-card .tcg-marquee {
  border-left:2px solid rgba(0,255,245,0.3);
  padding-left:8px;
}

/* ── 18. Purple/Magenta Grid — matching reference ── */
[data-theme="cyberpunk"] .bg-grid {
  opacity:0.12;
  background-image:
    linear-gradient(rgba(176,38,255,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(176,38,255,0.08) 1px, transparent 1px);
  background-size:40px 40px;
}

/* ── 19. HUD Status Bar Styling — segmented fills ── */
[data-theme="cyberpunk"] progress,
[data-theme="cyberpunk"] .progress-bar {
  background:rgba(42,42,74,0.5); border:1px solid rgba(255,45,111,0.2);
  border-radius:0; height:8px; overflow:hidden;
}
[data-theme="cyberpunk"] progress::-webkit-progress-value,
[data-theme="cyberpunk"] .progress-fill {
  background:repeating-linear-gradient(
    90deg, #ff2d6f 0 6px, rgba(255,45,111,0.3) 6px 8px
  );
  border-radius:0;
}
[data-theme="cyberpunk"] progress::-webkit-progress-bar {
  background:rgba(42,42,74,0.5); border-radius:0;
}

/* ── 20. Warning/Danger Badge styling ── */
[data-theme="cyberpunk"] .badge-danger,
[data-theme="cyberpunk"] .threat-high {
  background:rgba(255,45,111,0.15); border:1px solid #ff2d6f; color:#ff2d6f;
  clip-path:polygon(0 3px, 3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px));
  text-transform:uppercase; letter-spacing:.08em; font-size:.6rem;
}

/* ── 21. Prompt Pills — HUD button treatment ── */
[data-theme="cyberpunk"] .nice-ai-pills .nice-ai-pill {
  clip-path:polygon(0 4px, 4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px));
  border:1px solid rgba(255,45,111,0.2); background:rgba(18,18,38,0.8);
  font-family:'Fira Code', monospace; text-transform:uppercase; letter-spacing:.06em; font-size:.65rem;
  transition:all .15s;
}
[data-theme="cyberpunk"] .nice-ai-pills .nice-ai-pill:hover {
  border-color:#ff2d6f; color:#ff2d6f;
  box-shadow:0 0 10px rgba(255,45,111,0.2), inset 0 0 20px rgba(255,45,111,0.05);
  background:rgba(255,45,111,0.08);
}
[data-theme="cyberpunk"] .nice-ai-pills .nice-ai-pill svg { stroke:currentColor; }

/* ── 22. Select Dropdowns — angular ── */
[data-theme="cyberpunk"] select,
[data-theme="cyberpunk"] .filter-select {
  border-radius:0; border:1px solid #2a2a4a; background:#0a0a0f; color:#e0e0ff;
  font-family:'Fira Code', monospace; appearance:none; -webkit-appearance:none;
  clip-path:polygon(0 3px, 3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px));
}
[data-theme="cyberpunk"] select:focus,
[data-theme="cyberpunk"] .filter-select:focus { border-color:#ff2d6f; box-shadow:0 0 8px rgba(255,45,111,0.2); }

/* ── Reduced motion — disable all animations ── */
@media (prefers-reduced-motion:reduce) {
  [data-theme="cyberpunk"] .app-main::after { animation:none; }
  [data-theme="cyberpunk"] .btn-primary { animation:none; }
  [data-theme="cyberpunk"] .app-brand-text,
  [data-theme="cyberpunk"] .app-hdr-title { animation:none; }
  [data-theme="cyberpunk"] .tcg-card:hover::after,
  [data-theme="cyberpunk"] .mc-card:hover::after,
  [data-theme="cyberpunk"] .mcp-catalog-card:hover::after,
  [data-theme="cyberpunk"] .widget-card:hover::after { animation:none; }
  [data-theme="cyberpunk"] .bg-grid::before,
  [data-theme="cyberpunk"] .bg-grid::after { animation:none; }
  [data-theme="cyberpunk"] .bp-type-tab.active,
  [data-theme="cyberpunk"] .security-tab.security-tab--active { animation:none; }
  [data-theme="cyberpunk"] .side-header::after { animation:none; }
}

/* ─────────────────────────────────────────────────────────────────
   MODULE: BASE
───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background-color: var(--bg);
  background-image: var(--bg-pattern, none);
  background-size: 40px 40px;
  color: var(--text);
  font-family: var(--font-b);
  overflow-x: hidden;
  min-height: 100vh;
  transition: background-color 0.4s, color 0.4s;
}

/* ─────────────────────────────────────────────────────────────────
   MODULE: BACKGROUND LAYERS
───────────────────────────────────────────────────────────────── */
.bg-grid {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 52px 52px;
  opacity: 0.35;
  transition: opacity 0.4s;
}
[data-theme="lcars"] .bg-grid,

.bg-hero-glow {
  position: fixed; top: 0; left: 0; right: 0; height: 65vh;
  pointer-events: none; z-index: 0;
  background: var(--hero-grad);
  transition: background 0.4s;
}
.bg-scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,var(--scan)) 2px, rgba(0,0,0,var(--scan)) 4px
  );
}
.bg-retro-wave {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0; transition: opacity 0.5s;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(0,195,155,0.04) 20px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(230,100,50,0.03) 40px);
}

#matrix-canvas {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0; transition: opacity 0.6s;
}
[data-theme="matrix"] #matrix-canvas { opacity: 0.18; }

/* ─────────────────────────────────────────────────────────────────
   MODULE: TELEMETRY BAR (fixed top scrolling ticker)
───────────────────────────────────────────────────────────────── */
.tel-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 26px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  display: flex; align-items: center;
  transition: background 0.4s, border-color 0.4s;
}
.tel-track {
  display: flex; align-items: center;
  white-space: nowrap;
  animation: tel-scroll 50s linear infinite;
  font-family: var(--font-m);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  transition: color 0.4s, font-family 0.01s;
}
.tel-item {
  padding: 0 20px;
  border-right: 1px solid var(--border);
  display: flex; align-items: center; gap: 6px;
}
.tel-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent);
  box-shadow: var(--glow);
  animation: blink 2s ease-in-out infinite;
  flex-shrink: 0;
}
.tel-val { color: var(--accent); }

@keyframes tel-scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* ─────────────────────────────────────────────────────────────────
   MODULE: NAV
───────────────────────────────────────────────────────────────── */
nav:not(.app-side-nav) {
  position: fixed; top: 26px; left: 0; right: 0; z-index: 100;
  height: 56px;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(18px);
  box-shadow: var(--glow);
  transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
}
[data-theme="lcars"] nav:not(.app-side-nav) { border-bottom: 3px solid var(--accent); }
.nav-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 24px;
  height: 100%; display: flex; align-items: center; justify-content: space-between;
}
.nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-brand {
  font-family: var(--font-d); font-size: 13px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent);
  transition: color 0.4s, font-family 0.01s;
}
.nav-tagline {
  display: block; font-family: var(--font-m); font-size: 8px;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--text-muted); margin-top: 2px;
  transition: color 0.4s;
  text-align: justify; text-align-last: justify;
}
.ft-brand + span { text-align: justify !important; text-align-last: justify !important; }
.nav-links { display: flex; align-items: center; gap: 22px; list-style: none; }
.nav-links a {
  font-family: var(--font-b); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-muted); text-decoration: none;
  transition: color 0.2s;
}
.nav-links a:hover,
.nav-links a.active { color: var(--accent); }
.nav-icon-link { display: flex; align-items: center; padding: 4px 6px; }
.nav-icon-link svg { transition: color .2s; }
.nav-icon-link:hover svg { color: var(--accent); }
.nav-profile-btn { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); background:var(--panel-bg); cursor:pointer; transition:border-color .2s, box-shadow .2s; text-decoration:none; color:var(--text-muted); flex-shrink:0; }
.nav-profile-btn:hover { border-color:var(--border-hi); box-shadow:var(--glow); color:var(--accent); }
/* ── NAV USER ──────────────────────────────────────────────────────── */
.nav-user { display:flex; align-items:center; gap:8px; margin-right:4px; }
.nav-username { font-size:0.75rem; font-family:var(--font-m); color:var(--text-muted); letter-spacing:.05em; }
.nav-user-badge { font-size:0.55rem; font-family:var(--font-m); letter-spacing:.15em; padding:2px 8px; border:1px solid var(--accent); color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,transparent); border-radius:4px; white-space:nowrap; }
@media(max-width:768px){ .nav-user { display:none; } }

/* ── TCG BLUEPRINT CARDS ───────────────────────────────────────────── */
/* Border animations removed — static border colors only */
.tcg-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:20px; }
.tcg-card { position:relative; display:flex; flex-direction:column; border:15px solid var(--border); border-radius:25px; background:var(--panel-bg); transition:transform .2s ease, border-color .2s; cursor:pointer; overflow:hidden; margin:50px 0; padding:0; aspect-ratio:5/7; }
.tcg-card:hover { transform:translateY(-3px); z-index:5; border-color:var(--border-hi); }
/* Agent rarity card effects — progressively premium */
.tcg-card[data-rarity="common"]    { border-color:var(--border); }
.tcg-card[data-rarity="rare"]      { border-color:#6366f1; }
.tcg-card[data-rarity="epic"]      { }
.tcg-card[data-rarity="legendary"] { }
/* Spaceship class card effects */
.tcg-card[data-class="class-1"] { border-color:#94a3b8; }
.tcg-card[data-class="class-2"] { border-color:#22c55e; }
.tcg-card[data-class="class-3"] { }
.tcg-card[data-class="class-4"] { }
.tcg-card[data-class="class-5"] { }
/* Fleet tier card effects */
/* Station type card effects */
.ss-card-clickable[data-type="collaboration"] { border-color:#6366f1; }
.ss-card-clickable[data-type="service"]       { border-color:#22c55e; }
.ss-card-clickable[data-type="academy"]       { border-color:#a855f7; }
.ss-card-clickable[data-type="trade"]         { border-color:#f59e0b; }
/* Name bar */
.tcg-name-bar { padding:10px 14px; display:flex; align-items:center; justify-content:flex-start; background:var(--surface); border-bottom:1px solid var(--border); gap:6px; border-radius:3px 3px 0 0; }
.tcg-name  { font-family:var(--font-h); font-size:1.1rem; font-weight:700; letter-spacing:.04em; color:var(--text); line-height:1.2; text-align:left; }
.tcg-subtitle { margin-left:auto; font-family:var(--font-m); font-size:.55rem; letter-spacing:.08em; color:var(--text-muted); text-transform:uppercase; }
.tcg-name[contenteditable="true"] { cursor:text; outline:none; border-bottom:1px dashed var(--accent); min-width:40px; }
.tcg-name[contenteditable="true"]:focus { border-bottom:1px solid var(--accent); background:rgba(var(--accent-rgb, 59,130,246),.08); }
.tcg-rarity{ font-size:0.56rem; font-family:var(--font-m); color:var(--accent); letter-spacing:.12em; white-space:nowrap; flex-shrink:0; }
/* Art zone */
.tcg-art { flex:1 1 40%; min-height:0; background:var(--bg); border-bottom:1px solid var(--border); overflow:hidden; display:flex; align-items:center; justify-content:center; position:relative; }
.tcg-art svg { width:100%; height:100%; display:block; }
/* Serial overlay inside avatar art area (bottom-left) */
.tcg-art-serial { position:absolute; bottom:4px; left:4px; z-index:6; pointer-events:none; }
/* Role/title overlay inside avatar art area (top-left) */
.tcg-art-role { position:absolute; top:4px; left:4px; z-index:6; pointer-events:none; }
.tcg-art-role .tcg-serial-code { font-size:.46rem; letter-spacing:.06em; color:var(--accent2, var(--accent)); }
.tcg-art-role .tcg-serial-code[contenteditable="true"] { pointer-events:auto; cursor:text; }
.tcg-art-role .tcg-serial-code[contenteditable="true"]:focus { outline:none; border-bottom:1px solid var(--accent); }
/* Class/tier label overlay inside avatar art area (top-right) */
.tcg-art-class { position:absolute; top:4px; right:12px; z-index:6; pointer-events:none; }
/* Bottom-right overlay inside avatar art area */
.tcg-art-bottom-right { position:absolute; bottom:4px; right:12px; z-index:6; pointer-events:none; }
/* Type line */
.tcg-type-line { padding:5px 12px; font-size:0.56rem; font-family:var(--font-m); letter-spacing:.1em; color:var(--text-muted); border-bottom:1px solid var(--border); background:var(--surface); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Marquee screen (spaceship cards) */
.tcg-marquee { overflow:hidden; white-space:nowrap; background:#0a0e14; border-top:1px solid rgba(59,130,246,.15); border-bottom:1px solid rgba(59,130,246,.15); padding:4px 0; position:relative; }
.tcg-marquee::before, .tcg-marquee::after { content:''; position:absolute; top:0; bottom:0; width:18px; z-index:1; pointer-events:none; }
.tcg-marquee::before { left:0; background:var(--panel-bg, #0a0e14); }
.tcg-marquee::after  { right:0; background:var(--panel-bg, #0a0e14); }
.tcg-marquee-track { display:inline-flex; animation:tcg-scroll 18s linear infinite; }
.tcg-marquee-track span { font-family:var(--font-m); font-size:.52rem; letter-spacing:.08em; color:#3b82f6; padding:0 24px; }
@keyframes tcg-scroll { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }
/* Text box */
.tcg-text-box { flex:1 1 0px; padding:10px 12px; display:flex; flex-direction:column; gap:4px; overflow-y:auto; overflow-x:hidden; min-height:75px; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.tcg-text-box::-webkit-scrollbar { width:4px; }
.tcg-text-box::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
.tcg-text-box::-webkit-scrollbar-track { background:transparent; }
.tcg-flavor { font-size:0.65rem; font-style:italic; color:var(--text-muted); border-left:2px solid var(--accent); padding-left:6px; margin-bottom:2px; line-height:1.4; }
.tcg-cap { font-size:0.6rem; color:var(--text-muted); display:flex; align-items:flex-start; gap:5px; line-height:1.4; }
.tcg-cap::before { content:"◆"; color:var(--accent); font-size:.4rem; flex-shrink:0; margin-top:3px; }
/* Stats bar */
.tcg-stats { padding:6px 10px; display:grid; grid-template-columns:repeat(auto-fit, minmax(0,1fr)); border-top:1px solid var(--border); background:var(--surface); flex-shrink:0; margin-top:auto; }
.tcg-stat { text-align:center; }
.tcg-stat-val { font-family:var(--font-h); font-size:.7rem; color:var(--accent); display:block; line-height:1.3; font-weight:700; }
.tcg-stat-lbl { font-family:var(--font-m); font-size:.4rem; color:var(--text-muted); letter-spacing:.08em; }
/* Footer */
.tcg-footer { padding:5px 12px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--border); font-family:var(--font-m); font-size:.44rem; color:var(--text-muted); background:var(--surface); flex-shrink:0; }
.tcg-serial-code { font-family:var(--font-m); font-size:.42rem; letter-spacing:.12em; color:var(--text-muted); background:rgba(0,0,0,.55); padding:1px 5px; border-radius:2px; backdrop-filter:blur(4px); }
/* Actions (below card, outside border) */
.tcg-actions { padding:8px 4px; display:flex; gap:6px; border-top:none; background:transparent; margin:0 -15px -15px; border-radius:0 0 10px 10px; }
.tcg-actions .c-btn { font-size:0.62rem; padding:5px 10px; flex:1; justify-content:center; }
.bp-logo-btn { display:inline-flex; align-items:center; justify-content:center; background:transparent; border-width:1px; }
.bp-cert-btn { flex:0 0 auto !important; aspect-ratio:1; min-width:0; display:inline-flex; align-items:center; justify-content:center; }
/* Tier badge + logo */
.tcg-tier-group { display:inline-flex; align-items:center; gap:4px; }
.tcg-tier-logo { display:inline-flex; align-items:center; line-height:1; }
.tcg-tier-badge { font-family:var(--font-m); font-size:.44rem; padding:1px 6px; border:1px solid; border-radius:2px; letter-spacing:.12em; vertical-align:middle; }
.tier-lite  { color:#22c55e; border-color:rgba(34,197,94,.38); }
.tier-pro   { color:#6366f1; border-color:rgba(99,102,241,.38); }
.tier-elite { color:#f59e0b; border-color:rgba(245,158,11,.38); }
/* Agent rarity badge colors */
.tier-common    { color:#94a3b8; border-color:rgba(148,163,184,.38); }
.tier-rare      { color:#6366f1; border-color:rgba(99,102,241,.38); }
.tier-epic      { color:#a855f7; border-color:rgba(168,85,247,.38); }
.tier-legendary { color:#f59e0b; border-color:rgba(245,158,11,.38); }
/* Fleet tier badge colors */
.tier-squadron  { color:#06b6d4; border-color:rgba(6,182,212,.38); }
.tier-fleet   { color:#8b5cf6; border-color:rgba(139,92,246,.38); }
.tier-armada  { color:#ef4444; border-color:rgba(239,68,68,.38); }
/* Station type tier badge colors */
.tier-collaboration { color:#6366f1; border-color:rgba(99,102,241,.38); }
.tier-service       { color:#22c55e; border-color:rgba(34,197,94,.38); }
.tier-academy       { color:#a855f7; border-color:rgba(168,85,247,.38); }
.tier-trade         { color:#f59e0b; border-color:rgba(245,158,11,.38); }
/* Type tabs — segmented button bar */
.bp-type-tabs { display:inline-flex; gap:4px; margin-bottom:1.2rem; padding:4px; background:var(--bg2, #18181b); border-radius:var(--radius, 10px); border:1px solid var(--border); overflow-x:auto; max-width:100%; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.bp-type-tabs::-webkit-scrollbar { display:none; }
.bp-type-tab { padding:8px 18px; font-family:var(--font-b, Inter, sans-serif); font-size:.75rem; font-weight:500; letter-spacing:.03em; color:var(--text-muted); background:none; border:none; border-radius:calc(var(--radius, 10px) - 2px); cursor:pointer; transition:all .2s; display:flex; align-items:center; gap:8px; white-space:nowrap; flex-shrink:0; }
.bp-type-tab:hover { color:var(--text); background:rgba(255,255,255,.04); }
.bp-type-tab.active { color:var(--text, #fafafa); background:var(--surface2, #27272a); box-shadow:0 1px 3px rgba(0,0,0,.2); }
.bp-tab-count { font-size:.55rem; padding:1px 5px; border:1px solid var(--border); border-radius:3px; color:var(--text-muted); }
.bp-type-tab.active .bp-tab-count { border-color:var(--accent); color:var(--accent); }
/* Sub-tabs (Spaceships / Agents within Blueprints tab) */
.bp-sub-tabs { display:flex; gap:4px; margin-bottom:8px; }
.bp-sub-tab {
  padding:5px 14px; background:none; border:1px solid var(--border); border-radius:var(--radius);
  color:var(--text-muted); font-family:var(--font-b); font-size:.75rem; cursor:pointer; transition:all .2s;
}
.bp-sub-tab:hover { border-color:var(--text); color:var(--text); }
.bp-sub-tab.active { border-color:var(--accent); color:var(--accent); background:rgba(99,102,241,.08); }
.bp-sub-tab .bp-tab-count { font-size:.5rem; }
/* Overlay section (instance data: member lists, health bars, perf stats) */
.tcg-overlay { padding:4px 14px; font-size:.7rem; color:var(--text-muted); }
/* Assigned state (dock cards already slotted) */
.tcg-card.assigned { opacity:.45; pointer-events:none; }
/* Pixel theme adjustments */

/* ═══════════════════════════════════════════════════════════════
   TCG Card — Compact (horizontal, for operational views)
═══════════════════════════════════════════════════════════════ */
.tcg-card-compact { display:flex; align-items:stretch; border:2px solid var(--border); border-radius:var(--card-radius, 0px); background:var(--panel-bg); transition:transform .2s ease, border-color .2s; cursor:pointer; overflow:hidden; min-height:110px; }
.tcg-card-compact:hover { transform:translateY(-2px); z-index:5; border-color:var(--border-hi); }
/* Rarity/class/tier borders — compact */
.tcg-card-compact[data-rarity="rare"]      { border-color:#6366f1; }
.tcg-card-compact[data-rarity="epic"]      { }
.tcg-card-compact[data-rarity="legendary"] { }
.tcg-card-compact[data-class="class-1"]    { border-color:#94a3b8; }
.tcg-card-compact[data-class="class-2"]    { border-color:#22c55e; }
.tcg-card-compact[data-class="class-3"]    { }
.tcg-card-compact[data-class="class-4"]    { }
.tcg-card-compact[data-class="class-5"]    { }
/* Art thumbnail */
.tcg-compact-art { flex:0 0 90px; background:var(--bg); border-right:1px solid var(--border); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.tcg-compact-art svg { width:100%; height:100%; display:block; }
/* Body */
.tcg-compact-body { flex:1; padding:10px 12px; display:flex; flex-direction:column; gap:4px; min-width:0; justify-content:center; }
.tcg-compact-header { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.tcg-compact-name { font-family:var(--font-h); font-size:.78rem; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; }
.tcg-compact-badge { font-family:var(--font-m); font-size:.44rem; padding:1px 5px; border:1px solid; border-radius:2px; letter-spacing:.1em; white-space:nowrap; }
/* Meta tags row */
.tcg-compact-meta { display:flex; flex-wrap:wrap; gap:4px; }
.tcg-compact-meta .agent-tag { font-size:.6rem; }
/* Tools row */
.tcg-compact-tools { display:flex; flex-wrap:wrap; gap:3px; margin-top:2px; }
/* Stats bar */
.tcg-compact-stats { display:flex; gap:10px; margin-top:4px; }
.tcg-compact-stat { font-family:var(--font-m); font-size:.52rem; color:var(--text-muted); letter-spacing:.05em; }
.tcg-compact-stat b { color:var(--accent); font-weight:600; }
/* Actions */
.tcg-compact-actions { flex:0 0 auto; display:flex; flex-direction:column; gap:4px; padding:10px 8px; border-left:1px solid var(--border); align-items:center; justify-content:center; }
/* Pixel theme */

/* ═══════════════════════════════════════════════════════════════
   TCG Card — Mini (small vertical, for dock / inventory)
═══════════════════════════════════════════════════════════════ */
.tcg-card-mini { display:flex; flex-direction:column; align-items:center; justify-content:center; width:90px; aspect-ratio:5/7; border:4px solid var(--border); border-radius:10px; background:var(--panel-bg); cursor:pointer; overflow:hidden; transition:transform .2s, border-color .2s, box-shadow .2s; padding:6px; gap:4px; text-align:center; }
.tcg-card-mini:hover { transform:translateY(-2px); z-index:5; }
.tcg-card-mini.assigned { opacity:.45; pointer-events:none; }
/* Rarity borders — mini */
.tcg-card-mini[data-rarity="Rare"]      { border-color:#6366f1; }
.tcg-card-mini[data-rarity="Epic"]      { }
.tcg-card-mini[data-rarity="Legendary"] { }
.tcg-mini-name { font-family:var(--font-h); font-size:.52rem; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:80px; line-height:1.2; }
.tcg-mini-art { width:44px; height:44px; border-radius:0; overflow:hidden; background:var(--bg); display:flex; align-items:center; justify-content:center; }
.tcg-mini-art svg { width:100%; height:100%; }
.tcg-mini-badge { font-family:var(--font-m); font-size:.38rem; padding:1px 4px; border-radius:2px; color:#fff; letter-spacing:.08em; line-height:1.2; }
/* Pixel theme */

#hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 4px;
}
#hamburger span { display: block; width: 22px; height: 2px; background: var(--accent); }
#mobile-menu {
  display: none; flex-direction: column; gap: 14px;
  padding: 16px 24px 22px;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
}
#mobile-menu.open { display: flex; }
#mobile-menu a {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-muted); text-decoration: none; font-family: var(--font-b);
}

/* ─────────────────────────────────────────────────────────────────
   MODULE: LAYOUT
───────────────────────────────────────────────────────────────── */
.page { position: relative; z-index: 10; padding-top: 82px; }
.sec  { padding: 60px 24px; }
.inner { max-width: 1280px; margin: 0 auto; }

.sec-label {
  font-family: var(--font-m); font-size: 9px;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--text-muted);
  border-left: 2px solid var(--accent); padding-left: 10px;
  display: inline-block; margin-bottom: 12px;
  transition: color 0.4s, border-color 0.4s;
}
[data-theme="lcars"] .sec-label { border-left: none; border-bottom: 2px solid var(--accent2); padding-left: 0; padding-bottom: 4px; }

.sec-title {
  font-family: var(--font-d);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900; line-height: 1.1;
  color: var(--text);
  transition: font-family 0.01s, color 0.4s;
}
.hl { color: var(--accent); transition: color 0.4s; }

/* Sub-page header (compact, not full-height hero) */
.page-header {
  padding: 100px 24px 48px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  transition: background 0.4s, border-color 0.4s;
}
.page-header .inner { text-align: center; }

/* ─────────────────────────────────────────────────────────────────
   MODULE: PANEL / GLASS
───────────────────────────────────────────────────────────────── */
.panel, .glass {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  position: relative;
  transition: background 0.4s, border-color 0.4s, box-shadow 0.25s, transform 0.25s;
}
.panel:hover, .glass:hover {
  box-shadow: var(--glow-hi);
  transform: translateY(-2px);
  border-color: var(--border-hi);
}
[data-theme="spaceship"] .panel:hover,
[data-theme="spaceship"] .glass:hover { border-color: var(--border-hi); }

/* HUD corner marks */
.hud::before, .hud::after {
  content: ''; position: absolute;
  width: 10px; height: 10px;
  border-color: var(--accent); border-style: solid; opacity: 0.7;
  transition: border-color 0.4s;
}
.hud::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.hud::after  { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
[data-theme="lcars"] .hud::before,
[data-theme="lcars"] .hud::after { display: none; }
[data-theme="lcars"] .panel,
[data-theme="lcars"] .glass { border-radius: 0 20px 20px 0; border-left: 5px solid var(--accent); }

/* ─────────────────────────────────────────────────────────────────
   MODULE: BUTTONS
───────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 20px;
  font-family: var(--font-b); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; border: 1px solid var(--accent);
  color: var(--accent); background: transparent; cursor: pointer;
  border-radius: var(--radius);
  transition: background 0.2s, box-shadow 0.2s, color 0.2s;
}
[data-theme="lcars"] .btn { border-radius: 20px; }
.btn:hover { background: rgba(255,255,255,0.07); box-shadow: var(--glow-hi); }
[data-theme="spaceship"] .btn:hover { background: rgba(224,231,255,0.08); color: var(--text); box-shadow: var(--glow); }
.btn-solid { background: rgba(255,255,255,0.07); box-shadow: var(--glow); }
[data-theme="spaceship"] .btn-solid { background: var(--accent); color: #09090b; }
[data-theme="spaceship"] .btn-solid:hover { background: var(--accent2); color: #09090b; }

/* ─────────────────────────────────────────────────────────────────
   MODULE: HERO (full-height homepage)
───────────────────────────────────────────────────────────────── */
.hero {
  min-height: 90vh; display: flex; align-items: center;
  padding: 100px 24px 64px;
}
.hero-2col {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 48px; align-items: center; width: 100%;
}
@media (max-width: 960px) {
  .hero-2col { grid-template-columns: 1fr; text-align: center; }
  .hero-2col .hero-btns { justify-content: center; }
  .hero-2col .hero-stats { margin-left: auto; margin-right: auto; }
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 16px;
  border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--radius);
  font-family: var(--font-m); font-size: 9px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 22px;
  transition: background 0.4s, border-color 0.4s;
}
.pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: var(--glow);
  animation: blink 1.6s ease-in-out infinite;
}
.pulse-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); box-shadow: var(--glow);
  animation: blink 1.5s ease-in-out infinite;
  flex-shrink: 0;
}
.hero-title {
  font-family: var(--font-d);
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  font-weight: 900; line-height: 1.05; letter-spacing: -0.02em;
  margin-bottom: 20px;
  transition: font-family 0.01s;
}
[data-theme="lcars"] .hero-title { letter-spacing: 0.06em; }
.hero-title .l1 { display: block; color: var(--accent); }
.hero-title .l2 { display: block; color: var(--text); }
.hero-sub {
  font-size: clamp(0.85rem,2vw,1.05rem); line-height: 1.75;
  color: var(--text-muted); margin-bottom: 24px;
  transition: color 0.4s;
}
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.atm-badge {
  display: inline-block; margin-top: 20px;
  font-family: var(--font-d); font-size: clamp(0.55rem,1.5vw,0.7rem);
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--border-hi);
  padding: 5px 14px; border-radius: var(--radius); opacity: 0.85;
  transition: color 0.4s, border-color 0.4s;
}
.hero-stats {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 12px; max-width: 360px; margin-top: 24px;
}
.hero-stat { padding: 14px; text-align: center; }
.stat-val {
  display: block; font-family: var(--font-d);
  font-size: 1.5rem; font-weight: 700; color: var(--accent);
  transition: color 0.4s, font-family 0.01s;
}
.stat-label {
  display: block; font-family: var(--font-m); font-size: 8px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); margin-top: 4px;
}

/* Solar breathing */
@keyframes breathe {
  0%,100% { box-shadow: 0 0 18px rgba(255,110,0,0.28); }
  50%      { box-shadow: 0 0 48px rgba(255,150,0,0.55), 0 0 110px rgba(255,60,0,0.28); }
}

/* Flicker */
@keyframes flicker { 0%,19%,21%,23%,25%,54%,56%,100%{opacity:1} 20%,24%,55%{opacity:0.45} }
[data-theme="navigator"] .hl,
[data-theme="matrix"]    .hl { animation: flicker 9s linear infinite; }

/* Typewriter cursor */
.tw-cursor { color: var(--accent); animation: blink 1s step-end infinite; display: none; }
[data-theme="matrix"] .tw-cursor { display: inline; }

/* ─────────────────────────────────────────────────────────────────
   MODULE: MISSION CONTROL HUD PANEL
───────────────────────────────────────────────────────────────── */
.mc-panel { padding: 24px; }
.mc-header {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--border); padding-bottom: 14px; margin-bottom: 20px;
  transition: border-color 0.4s;
}
.mc-title {
  font-family: var(--font-m); font-size: 9px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted);
}
.mc-clock {
  font-family: var(--font-m); font-size: 10px; color: var(--accent);
  letter-spacing: 0.08em; transition: color 0.4s;
}
.mc-grid {
  display: grid; grid-template-columns: 5fr 7fr; gap: 20px; margin-bottom: 20px;
}
@media (max-width: 520px) { .mc-grid { grid-template-columns: 1fr; } }

/* Spinning dial */
.dial-wrap { display: flex; justify-content: center; margin-bottom: 16px; }
.dial-container { width: 110px; height: 110px; position: relative; display: flex; align-items: center; justify-content: center; }
.dial-ring {
  position: absolute; inset: 0;
  border: 8px solid var(--surface2);
  border-top: 8px solid var(--accent);
  border-radius: 50%;
  animation: spin-cw 4s linear infinite;
  transition: border-color 0.4s;
}
.dial-inner { position: absolute; text-align: center; }
.dial-val { font-family: var(--font-d); font-size: 1.4rem; font-weight: 700; color: var(--accent); display: block; transition: color 0.4s; }
.dial-lbl { font-family: var(--font-m); font-size: 7px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); }

/* Position vector */
.pos-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.pos-cell {
  background: var(--surface2); border: 1px solid var(--border);
  padding: 6px 4px; text-align: center;
  font-family: var(--font-m); font-size: 9px; color: var(--text-muted);
  border-radius: var(--radius);
  transition: background 0.4s, border-color 0.4s;
}
.pos-cell span { color: var(--accent); font-weight: 600; }

/* Command keypad */
.keypad { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-bottom: 16px; }
.key-btn {
  aspect-ratio: 1; border: var(--border-width) solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-m); font-weight: 700; font-size: 8px;
  letter-spacing: 0.1em;
  cursor: pointer; transition: background 0.15s, color 0.15s;
  background: transparent; color: var(--text-muted);
  border-radius: var(--radius);
  text-transform: uppercase;
}
.key-btn:hover { background: var(--accent); color: var(--bg); }
.key-btn:active { transform: scale(0.95); }
.key-btn.key-active { background: var(--accent); color: var(--bg); }

/* Toggle switches */
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.toggle-label { font-family: var(--font-m); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.toggle-wrap { display: flex; align-items: center; cursor: pointer; }
.toggle-switch {
  width: 44px; height: 22px;
  background: var(--surface2);
  border: var(--border-width) solid var(--border);
  border-radius: 999px; position: relative;
  transition: background 0.3s, border-color 0.4s;
}
.toggle-switch::after {
  content: ''; position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--text-muted); border-radius: 50%;
  transition: left 0.3s, background 0.3s;
}
.toggle-on .toggle-switch { background: var(--accent); border-color: var(--accent); }
.toggle-on .toggle-switch::after { left: 24px; background: var(--bg); }

/* Timeline */
.timeline-wrap { margin-bottom: 16px; }
.timeline-label {
  display: flex; justify-content: space-between;
  font-family: var(--font-m); font-size: 8px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px;
  opacity: 0.6;
}
.timeline-track {
  position: relative; height: 24px;
  border: var(--border-width) solid var(--border);
  background: var(--surface); overflow: hidden;
  border-radius: var(--radius);
  transition: background 0.4s, border-color 0.4s;
}
.timeline-marker {
  position: absolute; top: 0; bottom: 0; width: 3px;
  background: var(--accent); box-shadow: var(--glow);
  animation: drift 12s linear infinite;
  transition: background 0.4s;
}
@keyframes drift { 0%{left:0} 100%{left:100%} }

/* Console log */
.console-wrap { margin-bottom: 0; }
.console-log {
  font-family: 'Fira Code', monospace; font-size: 9px;
  height: 80px; overflow: hidden; line-height: 1.5;
  color: var(--text-muted); padding: 10px 12px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: background 0.4s, border-color 0.4s, color 0.4s;
}
[data-theme="matrix"] .console-log { color: var(--accent); }

/* ─────────────────────────────────────────────────────────────────
   MODULE: ATM ORBITAL VISUAL
───────────────────────────────────────────────────────────────── */
.atm-sec { background: var(--bg2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); transition: background 0.4s, border-color 0.4s; }
.atm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 768px) { .atm-grid { grid-template-columns: 1fr; gap: 32px; } }

.atm-visual { position: relative; aspect-ratio: 1; width: 100%; max-width: 340px; margin: 0 auto; }
@keyframes spin-cw  { from{transform:rotate(0)}   to{transform:rotate(360deg)} }
@keyframes spin-ccw { from{transform:rotate(0)}   to{transform:rotate(-360deg)} }
.ring {
  position: absolute; border-radius: 50%;
  border: 1px solid var(--border); transition: border-color 0.4s;
}
.ring-1 { inset: 0;   animation: spin-cw  22s linear infinite; }
.ring-2 { inset: 13%; animation: spin-ccw 16s linear infinite; border-color: var(--border-hi); }
.ring-3 { inset: 28%; animation: spin-cw  10s linear infinite; }
.atm-core {
  position: absolute; inset: 36%;
  background: var(--surface2); border-radius: 50%;
  border: 2px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--glow-hi);
  transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
}
.atm-core-txt {
  font-family: var(--font-d); font-size: clamp(0.5rem,1.8vw,0.75rem);
  font-weight: 700; color: var(--accent); text-align: center; letter-spacing: 0.1em;
  transition: color 0.4s, font-family 0.01s;
}
.orb {
  position: absolute; width: 10px; height: 10px;
  background: var(--accent); border-radius: 50%;
  box-shadow: var(--glow); animation: blink 2s ease-in-out infinite;
  transition: background 0.4s, box-shadow 0.4s;
}

/* Radar (Navigator only) */
.radar { width: 160px; height: 160px; position: relative; margin: 20px auto 0; display: none; }
[data-theme="navigator"] .radar { display: block; }
.radar-c { position: absolute; border-radius: 50%; border: 1px solid var(--border); }
.radar-c:nth-child(1){inset:0} .radar-c:nth-child(2){inset:25%} .radar-c:nth-child(3){inset:50%}
.radar-sweep {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(rgba(0,229,255,0.45) 0deg, transparent 65deg, transparent 360deg);
  animation: spin-cw 3.5s linear infinite;
}
.radar-blip {
  position: absolute; width: 5px; height: 5px;
  background: var(--accent); border-radius: 50%;
  box-shadow: 0 0 6px var(--accent); animation: blink 3s ease-in-out infinite;
}

/* ─────────────────────────────────────────────────────────────────
   MODULE: PILLARS / SOLUTIONS
───────────────────────────────────────────────────────────────── */
.pillars-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px,1fr));
  gap: 18px; margin-top: 48px;
}
.pillar { padding: 26px; }
.p-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-hi); color: var(--accent);
  margin-bottom: 16px; border-radius: var(--radius);
  box-shadow: var(--glow);
  transition: border-color 0.4s, color 0.4s, box-shadow 0.4s;
}
.p-num   { font-family: var(--font-m); font-size: 9px; letter-spacing: 0.2em; color: var(--text-dim); margin-bottom: 8px; }
.p-title { font-family: var(--font-d); font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 10px; transition: font-family 0.01s; }
.p-desc  { font-size: 0.82rem; line-height: 1.65; color: var(--text-muted); }

/* LCARS section bar */

/* In-page progress / meter bar */
.meter-bar { height: 6px; background: var(--surface2); border-radius: 999px; overflow: hidden; transition: background 0.4s; }
.meter-fill { height: 100%; background: var(--accent); box-shadow: var(--glow); transition: width 0.8s ease, background 0.4s, box-shadow 0.4s; }

/* ─────────────────────────────────────────────────────────────────
   MODULE: ACADEMY / FLIGHT SIMULATOR
───────────────────────────────────────────────────────────────── */
.academy-sec { background: var(--bg2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); transition: background 0.4s, border-color 0.4s; }
.academy-hdr { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 36px; }
.hud-stats { display: flex; gap: 20px; flex-wrap: wrap; }
.hud-stat-val { display: block; font-family: var(--font-m); font-size: 1.25rem; color: var(--accent); font-weight: 600; transition: color 0.4s; }
.hud-stat-lbl { display: block; font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }
.modules-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(275px,1fr)); gap: 22px; }
.mod { padding: 30px; }
.mod-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.mod-badge { font-family: var(--font-m); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; padding: 3px 10px; border: 1px solid var(--accent); color: var(--accent); border-radius: var(--radius); }
[data-theme="lcars"] .mod-badge { border-radius: 12px; }
.mod-status { font-family: var(--font-m); font-size: 8px; letter-spacing: 0.15em; color: var(--text-dim); }
.mod-title { font-family: var(--font-d); font-size: 1.2rem; font-weight: 700; color: var(--text); margin-bottom: 12px; transition: font-family 0.01s; }
.mod-desc { font-size: 0.82rem; line-height: 1.65; color: var(--text-muted); margin-bottom: 20px; }
.lessons { display: flex; flex-direction: column; gap: 6px; }
.lesson {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.76rem; color: var(--text-muted);
  padding: 8px 10px;
  border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius);
  font-family: var(--font-m); transition: background 0.4s, border-color 0.4s;
}
.lesson-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; transition: background 0.4s; }
.prog-track { height: 2px; background: var(--surface2); margin-top: 18px; transition: background 0.4s; }
.prog-fill { height: 100%; background: var(--accent); box-shadow: var(--glow); transition: background 0.4s, box-shadow 0.4s; }


/* ─────────────────────────────────────────────────────────────────
   MODULE: CONTACT FORM
───────────────────────────────────────────────────────────────── */
.contact-box { max-width: 680px; margin: 0 auto; }
.contact-form { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label {
  font-family: var(--font-m); font-size: 9px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted);
  transition: color 0.4s;
}
.contact-input, .contact-textarea {
  background: transparent;
  border: 1px solid var(--border); color: var(--text);
  padding: 12px 16px; font-family: var(--font-b); font-size: 13px;
  outline: none; border-radius: var(--radius);
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s, color 0.4s, background 0.4s;
}
.contact-textarea { resize: vertical; min-height: 140px; }
.contact-input:focus,
.contact-textarea:focus { border-color: var(--accent); box-shadow: var(--glow); }
.contact-input::placeholder,
.contact-textarea::placeholder { color: var(--text-dim); }

/* ─────────────────────────────────────────────────────────────────
   MODULE: FOOTER
───────────────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--border); background: var(--bg);
  padding: 48px 24px 32px;
  position: relative; z-index: 10;
  transition: background 0.4s, border-color 0.4s;
}
[data-theme="lcars"] footer { border-top: 3px solid var(--accent2); }
.footer-inner { max-width: 1280px; margin: 0 auto; }
.ft-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; }
@media (max-width: 900px) { .ft-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ft-grid { grid-template-columns: 1fr; } }
.ft-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-bottom: 16px; }
.ft-logo-svg { width: 26px; height: 26px; color: var(--accent); flex-shrink: 0; transition: color 0.4s; }
.ft-brand { font-family: var(--font-d); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); transition: color 0.4s, font-family 0.01s; }
.ft-desc { font-size: 0.78rem; line-height: 1.7; color: var(--text-muted); }
.ft-heading { font-family: var(--font-m); font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; transition: color 0.4s; }
.ft-links { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ft-links a { font-size: 0.78rem; color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
.ft-links a:hover { color: var(--accent); }
.ft-bottom { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 8px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-dim); font-family: var(--font-m); }

/* ─────────────────────────────────────────────────────────────────
   MODULE: THEME DOCK
───────────────────────────────────────────────────────────────── */
.dock {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 300;
  background: var(--panel-bg); border: 1px solid var(--border);
  backdrop-filter: blur(20px); box-shadow: var(--glow-hi);
  display: flex; align-items: center; gap: 6px; padding: 8px 14px;
  border-radius: 40px;
  transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
}
.dock-lbl {
  font-family: var(--font-b, Inter, sans-serif); font-size: .6rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted); padding-right: 8px;
  margin-right: 4px; white-space: nowrap; transition: color 0.4s;
}
.dock-lbl-sep { display: none; }
.dock-lbl a { text-decoration: none; }
.db {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; position: relative; flex-shrink: 0;
}
.db:hover { transform: scale(1.2); box-shadow: 0 0 8px rgba(255,255,255,0.15); }
.db.active { border-color: rgba(255,255,255,0.85); transform: scale(1.1); box-shadow: 0 0 12px rgba(255,255,255,0.2); }
.db::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--panel-bg); border: 1px solid var(--border);
  color: var(--text); font-family: var(--font-m); font-size: 8px;
  letter-spacing: 0.1em; padding: 4px 8px; white-space: nowrap;
  border-radius: 4px; pointer-events: none; opacity: 0; transition: opacity 0.15s;
}
.db:hover::after { opacity: 1; }
.d-sp { background: #0a0a0a url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1240.37 1240.21' fill='white'><path d='M962.08,762.91c-3.6,3.81-23,22.39-23.4,25.12s1.65,9.46,1.81,12.8c6.2,134.27-22.47,251.36-96.57,363.41-10.14,15.32-44.07,64.4-57.7,72.3-10.64,6.16-17.08,4.1-26.74-2.68l-205.91-206.08-2.61-1.47c-13.79,3.14-27.33,7.97-41.2,10.78-12.14,2.46-39.23,7.32-50.52,5.02-5.43-1.11-8.8-8.83-13.02-7.63-56.83,48.42-130.21,76.33-203.49,88.59-23.32,3.9-79.67,11.72-100.43,4.99-28.92-9.37-32.15-31.74-31.74-58.17,1.36-87.99,28.47-185.28,80.14-256.85,2.24-3.1,15.39-18.18,15.71-19.38.7-2.69-7.89-8.08-8.8-14.88-1.33-9.98,3.07-34.86,5.18-45.64,2.91-14.86,7.64-29.47,11.6-44.06L6.97,481.35c-6.58-10.16-9.77-14.46-3.86-25.92,4.89-9.48,28.96-27.24,38.49-34.51,113.03-86.2,243.65-127.64,386.44-121.64,5.01.21,23.34,2.94,26.44,1.52,117.49-117.68,260.78-215.29,420.81-265.18,95.99-29.93,217.05-45.19,316.54-29.13,13.03,2.1,32.43,2.67,37.16,16.84,5.97,17.89,9.64,56.02,10.55,75.45,12,255.12-107.2,483.74-277.46,664.12ZM842.3,261.63c-101.28,8.13-152.88,125.4-90.22,205.62,56.08,71.8,169.37,61.28,211.94-18.9,46.73-88.01-22.45-194.69-121.72-186.72ZM276.84,862.98c-1.02-.92-3.11-5.35-5.37-4.22-.87.43-8.43,11.31-9.79,13.25-32.97,47.21-49,105.67-56.19,162.31,1.77,1.77,42.17-6.13,48.04-7.46,31.2-7.03,64.74-18.77,92.63-34.37,4.52-2.53,34.5-21.3,35.27-23.8.34-1.12-.09-2.12-.89-2.92-35.52-32.96-67.86-70.35-103.71-102.79Z'/></svg>") center/72% no-repeat; }
.d-iv { background: #f8f8f8; }
.d-nv { background: #00e5ff; box-shadow: 0 0 8px #00e5ff; }
.d-sl { background: #ff8c00; box-shadow: 0 0 8px #ff8c00; }
.d-mx { background: #00ff41; box-shadow: 0 0 8px #00ff41; }
.d-rt { background: linear-gradient(135deg,#00c8a0,#e86c3a); }
.d-lc { background: linear-gradient(135deg,#ff9966,#bb88ff); }
.d-px { background: #ffff00; box-shadow: 0 0 4px #ffff00; }

/* ─────────────────────────────────────────────────────────────────
   MODULE: RESPONSIVE
───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-links, .nav-cta-d { display: none; }
  #hamburger { display: flex; }
  .hero-title { font-size: clamp(1.8rem,10vw,3.5rem); }
  .sec { padding: 48px 18px; }
  .hero-stats { max-width: 100%; }
  .dock { bottom: 14px; }
  .dock-lbl { display: none; }
}
@media (max-width: 480px) {
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .hero-stats > :last-child { grid-column: span 2; }
}

/* ─────────────────────────────────────────────────────────────────
   MODULE: UTILITIES
───────────────────────────────────────────────────────────────── */
.hr { border: none; border-top: 1px solid var(--border); transition: border-color 0.4s; }

.text-accent  { color: var(--accent); }
.text-muted   { color: var(--text-muted); }
.font-mono    { font-family: var(--font-m); }
.font-display { font-family: var(--font-d); }
.label-sm     { font-family: var(--font-m); font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); }
.status-dot   { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: blink 2s infinite; display: inline-block; }

/* ── Colored dot design system ────────────────────────────────────── */
.dot        { display: inline-block; width: 7px; height: 7px; border-radius: 50%; vertical-align: middle; flex-shrink: 0; }
.dot-sm     { width: 5px; height: 5px; }
.dot-lg     { width: 10px; height: 10px; }
.dot-green  { background: #22c55e; }
.dot-blue   { background: #60a5fa; }
.dot-cyan   { background: #22d3ee; }
.dot-amber  { background: #f59e0b; }
.dot-purple { background: #c084fc; }
.dot-red    { background: #f87171; }
.dot-gold   { background: #fbbf24; }
.dot-accent { background: var(--accent); }
.dot-blink  { animation: dot-blink 1.4s ease-in-out infinite; }
.dot-pulse  { animation: dot-pulse 2s ease-in-out infinite; }
.dot-slow   { animation-duration: 2.8s; }
@keyframes dot-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.1; }
}
@keyframes dot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.6); opacity: 0.5; }
}

/* NS Certified badge ─────────────────────────────────────────────── */
.ns-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border: 1px solid var(--border-hi); border-radius: 3px; font-family: var(--font-m); font-size: 9px; letter-spacing: 0.12em; color: var(--text); background: var(--panel-bg); vertical-align: middle; }
.ns-badge-i   { border-color: #60a5fa55; }
.ns-badge-ii  { border-color: #c084fc55; }
.ns-badge-iii { border-color: #fbbf2466; box-shadow: 0 0 10px #fbbf2420; }
.ns-badge-a1  { border-color: #f8717166; color: #f87171; }
.ns-badge-a2  { border-color: #fb923c66; color: #fb923c; }
.ns-badge-a3  { border-color: #e2e8f066; color: #e2e8f0; box-shadow: 0 0 10px #e2e8f015; }

/* cert level cards ───────────────────────────────────────────────── */
.cert-levels { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 36px; text-align: left; }
@media (max-width:640px) { .cert-levels { grid-template-columns: 1fr; } }
.cert-level-card { padding: 24px 22px; border: 1px solid var(--border); background: var(--panel-bg); }
.cert-level-card.lvl-i   { border-color: #60a5fa33; }
.cert-level-card.lvl-ii  { border-color: #c084fc33; }
.cert-level-card.lvl-iii { border-color: #fbbf2444; box-shadow: 0 0 20px #fbbf2410; }
.cert-pip-row { display: flex; gap: 5px; margin-bottom: 14px; align-items: center; }
.cert-track-req { font-family: var(--font-m); font-size: 8px; letter-spacing: 0.15em; color: var(--text-muted); margin-top: 8px; }
.cert-adv-divider { display: flex; align-items: center; gap: 10px; margin: 36px 0 16px; }
.cert-adv-divider::before, .cert-adv-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.cert-adv-cards .cert-adv-card { border-style: dashed; }
.cert-adv-card { border-color: var(--border) !important; }
.adv-milestone-list { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px; }
.adv-milestone { display: flex; align-items: center; gap: 7px; font-family: var(--font-m); font-size: 0.7rem; color: var(--text-muted); }

/* ── NS STUDIO — No-Code GUI ─────────────────────────────────────── */
.ns-studio           { border: 1px solid var(--border-hi); background: var(--panel-bg); overflow: hidden; }
.ns-studio.studio-open  { animation: studioReveal 1s cubic-bezier(.16,1,.3,1) forwards; }
.ns-studio.studio-close { animation: studioClose .55s ease-in forwards; }
@keyframes studioReveal {
  0%   { clip-path: circle(2px at 50% 14px); animation-timing-function: ease-in; }
  32%  { clip-path: inset(0 0 calc(100% - 2px) 0); animation-timing-function: cubic-bezier(.22,1,.36,1); }
  100% { clip-path: inset(0 0 0% 0); }
}
@keyframes studioClose {
  0%   { clip-path: inset(0 0 0% 0); animation-timing-function: ease-in; }
  65%  { clip-path: inset(0 0 calc(100% - 2px) 0); animation-timing-function: ease-out; }
  100% { clip-path: circle(2px at 50% 14px); }
}
.nss-chrome          { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--bg); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.nss-title           { font-family: var(--font-m); font-size: 9px; letter-spacing: 0.2em; color: var(--text-muted); }
.nss-mode-toggle     { display: flex; gap: 1px; background: var(--border); padding: 1px; }
.nss-mode-btn        { background: var(--bg); border: none; padding: 4px 11px; font-family: var(--font-m); font-size: 8px; letter-spacing: 0.12em; color: var(--text-muted); cursor: pointer; transition: all 0.1s; white-space: nowrap; }
.nss-mode-btn.active { background: var(--accent); color: var(--bg); }
.nss-body            { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) { .nss-body { grid-template-columns: 1fr; } }
.nss-panel           { padding: 20px 22px; }
.nss-panel + .nss-panel { border-top: 1px solid var(--border); }
@media (min-width: 700px) { .nss-panel + .nss-panel { border-top: none; border-left: 1px solid var(--border); } }
.nss-panel-hdr       { display: flex; align-items: center; gap: 7px; font-family: var(--font-m); font-size: 9px; letter-spacing: 0.2em; color: var(--text-muted); padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.nss-row             { margin-bottom: 16px; }
.nss-lbl             { font-family: var(--font-m); font-size: 8px; letter-spacing: 0.15em; color: var(--text-muted); margin-bottom: 6px; }
.nss-val             { font-family: var(--font-m); font-size: 0.8rem; color: var(--accent); border: 1px solid var(--border); padding: 4px 9px; display: inline-block; }
.nss-pills           { display: flex; gap: 5px; flex-wrap: wrap; }
.nss-pill            { background: none; border: 1px solid var(--border); padding: 3px 10px; font-family: var(--font-m); font-size: 0.68rem; letter-spacing: 0.04em; color: var(--text-muted); cursor: pointer; transition: all 0.12s; }
.nss-pill:hover      { border-color: var(--border-hi); color: var(--text); }
.nss-pill.on         { border-color: var(--accent); color: var(--accent); background: var(--bg); }
.nss-tools           { display: flex; flex-direction: column; gap: 8px; }
.nss-tool-row        { display: flex; align-items: center; gap: 8px; }
.nss-tog-btn         { display: flex; gap: 3px; padding: 4px 6px; border: 1px solid var(--border); background: none; cursor: pointer; transition: border-color 0.12s; align-items: center; }
.nss-tog-btn.on      { border-color: var(--accent); }
.nss-pip             { width: 10px; height: 10px; background: var(--border); transition: background 0.12s; flex-shrink: 0; }
.nss-pip.on          { background: var(--accent); }
.nss-tool-name       { font-family: var(--font-m); font-size: 0.72rem; color: var(--text); flex: 1; }
.nss-tool-state      { font-family: var(--font-m); font-size: 8px; letter-spacing: 0.1em; color: var(--text-muted); }
.nss-tool-state.on   { color: var(--accent); }
.nss-bar-row         { display: flex; align-items: center; gap: 9px; }
.nss-bar             { flex: 1; height: 5px; background: var(--bg); border: 1px solid var(--border); overflow: hidden; }
.nss-bar-fill        { height: 100%; background: var(--accent); }
.nss-bar-num         { font-family: var(--font-m); font-size: 0.7rem; color: var(--text-muted); min-width: 46px; text-align: right; }
.nss-temp-row        { display: flex; align-items: center; gap: 9px; }
.nss-temp-pips       { display: flex; gap: 3px; align-items: flex-end; }
.nss-tpip            { width: 7px; background: var(--border); transition: background 0.12s; }
.nss-tpip.on         { background: var(--accent); }
.nss-radios          { display: flex; flex-direction: column; gap: 8px; }
.nss-radio-row       { display: flex; align-items: center; gap: 8px; cursor: pointer; font-family: var(--font-m); font-size: 0.72rem; color: var(--text-muted); transition: color 0.12s; }
.nss-radio-row.on    { color: var(--text); }
.nss-agents          { display: flex; flex-direction: column; gap: 9px; }
.nss-agent-row       { display: flex; align-items: center; gap: 8px; }
.nss-agent-nm        { font-family: var(--font-m); font-size: 0.7rem; color: var(--text); min-width: 100px; }
.nss-pip-row         { display: flex; gap: 3px; }
.nss-rep-ct          { font-family: var(--font-m); font-size: 0.68rem; color: var(--text-muted); }
.nss-tog-big         { border: 1px solid var(--border); background: none; font-family: var(--font-m); font-size: 0.68rem; letter-spacing: 0.12em; padding: 4px 14px; cursor: pointer; color: var(--text-muted); transition: all 0.12s; }
.nss-tog-big.on      { border-color: var(--accent); color: var(--accent); background: var(--bg); }
.nss-metrics         { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); }
@media (max-width: 600px) { .nss-metrics { grid-template-columns: repeat(2, 1fr); } }
.nss-metric          { padding: 14px 16px; border-right: 1px solid var(--border); }
.nss-metric:last-child { border-right: none; }
.nss-metric-lbl      { display: flex; align-items: center; gap: 5px; font-family: var(--font-m); font-size: 8px; letter-spacing: 0.15em; color: var(--text-muted); margin-bottom: 6px; }
.nss-metric-val      { font-family: var(--font-h); font-size: 1.3rem; color: var(--text); margin-bottom: 8px; line-height: 1; }
.nss-metric-val span { font-size: 0.6em; color: var(--text-muted); }
.nss-deploy          { display: flex; align-items: center; gap: 12px; padding: 14px 22px; background: var(--bg); border-top: 1px solid var(--border); flex-wrap: wrap; }
.nss-btn-validate    { background: none; border: 1px solid var(--border-hi); padding: 7px 16px; font-family: var(--font-m); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--text); cursor: pointer; transition: all 0.12s; flex-shrink: 0; }
.nss-btn-validate:hover { border-color: var(--accent); color: var(--accent); }
.nss-status-items    { display: flex; gap: 12px; flex-wrap: wrap; }
.nss-si              { display: flex; align-items: center; gap: 5px; font-family: var(--font-m); font-size: 0.7rem; color: var(--text-muted); }
.nss-btn-deploy      { background: var(--accent); color: var(--bg); border: none; padding: 8px 18px; font-family: var(--font-m); font-size: 0.72rem; letter-spacing: 0.1em; cursor: pointer; display: flex; align-items: center; gap: 7px; transition: opacity 0.15s; flex-shrink: 0; }
.nss-btn-deploy:hover { opacity: 0.82; }
.nss-prog-wrap       { width: 100%; display: flex; align-items: center; gap: 8px; }
.nss-prog-bar        { flex: 1; height: 5px; background: var(--panel-bg); border: 1px solid var(--border); overflow: hidden; }
.nss-prog-fill       { height: 100%; background: var(--accent); width: 0%; transition: width 0.08s linear; }
.nss-prog-pct        { font-family: var(--font-m); font-size: 0.7rem; color: var(--text-muted); min-width: 60px; }
/* ── Terminal view ── */
.nss-term-view       { border-top: 1px solid var(--border); }
.nss-tv-tabs         { display: flex; background: var(--bg); border-bottom: 1px solid var(--border); }
.nss-tv-tab          { flex: 1; background: none; border: none; border-right: 1px solid var(--border); padding: 10px 14px; font-family: var(--font-m); font-size: 8px; letter-spacing: 0.14em; color: var(--text-muted); cursor: pointer; text-align: center; transition: all 0.1s; }
.nss-tv-tab:last-child { border-right: none; }
.nss-tv-tab.active   { color: var(--accent); background: var(--panel-bg); }
.nss-tv-body         { padding: 18px 22px; min-height: 300px; }
.nss-tv-prompt       { font-family: var(--font-m); font-size: 0.72rem; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border); color: var(--text-muted); }
.nss-tv-prompt .tv-host { color: var(--accent); }
.nss-cursor          { display: inline-block; width: 7px; height: 0.8em; background: var(--accent); animation: dotBlink 0.8s step-end infinite; vertical-align: baseline; margin-left: 2px; }
.nss-tv-rows         { display: flex; flex-direction: column; gap: 14px; }
.nss-tv-row          { display: flex; align-items: flex-start; gap: 0; flex-wrap: wrap; }
.nss-tv-key          { font-family: var(--font-m); font-size: 0.68rem; letter-spacing: 0.12em; color: var(--text-muted); min-width: 130px; padding-top: 3px; flex-shrink: 0; }
@media (max-width: 480px) { .nss-tv-key { min-width: 100px; } }

/* ── CODE WINDOW — Blueprint Studio ──────────────────────────────── */
.code-window         { border: 1px solid var(--border-hi); background: var(--panel-bg); overflow: hidden; }
.cw-chrome           { display: flex; align-items: center; gap: 12px; padding: 9px 14px; background: var(--bg); border-bottom: 1px solid var(--border); }
.cw-traffic          { display: flex; gap: 5px; align-items: center; flex-shrink: 0; }
.cw-tabs             { display: flex; flex: 1; gap: 2px; overflow-x: auto; }
.cw-tab              { background: none; border: none; border-bottom: 2px solid transparent; padding: 4px 14px 3px; font-family: var(--font-m); font-size: 0.72rem; letter-spacing: 0.05em; color: var(--text-muted); cursor: pointer; white-space: nowrap; transition: color 0.15s, border-color 0.15s; }
.cw-tab:hover        { color: var(--text); }
.cw-tab.is-active    { color: var(--text); border-bottom-color: var(--accent); }
.cw-run              { flex-shrink: 0; background: var(--accent); color: var(--bg); border: none; padding: 4px 13px; font-family: var(--font-m); font-size: 0.7rem; letter-spacing: 0.08em; cursor: pointer; transition: opacity 0.15s; }
.cw-run:hover        { opacity: 0.8; }
.cw-editor           { display: flex; min-height: 300px; max-height: 380px; overflow-y: auto; }
.cw-gutter           { padding: 14px 10px 14px 12px; text-align: right; font-family: var(--font-m); font-size: 0.74rem; color: var(--text-muted); opacity: 0.35; user-select: none; min-width: 38px; border-right: 1px solid var(--border); line-height: 1.75; flex-shrink: 0; }
.cw-gutter div       { min-height: 1.75em; }
.cw-code             { padding: 14px 18px; flex: 1; font-family: var(--font-m); font-size: 0.78rem; line-height: 1.75; color: var(--text); overflow-x: auto; }
.cw-line             { display: block; min-height: 1.75em; white-space: pre; opacity: 0; transition: opacity 0.08s ease; }
.cw-line.shown       { opacity: 1; }
.cw-terminal-wrap    { border-top: 1px solid var(--border); background: var(--bg); }
.cw-term-bar         { display: flex; align-items: center; gap: 7px; padding: 6px 14px 5px; border-bottom: 1px solid var(--border); }
.cw-term-label       { font-family: var(--font-m); font-size: 9px; letter-spacing: 0.15em; color: var(--text-muted); }
.cw-term-cwd         { font-family: var(--font-m); font-size: 9px; color: var(--text-muted); opacity: 0.4; margin-left: auto; }
.cw-term-body        { padding: 10px 14px 14px; font-family: var(--font-m); font-size: 0.75rem; line-height: 1.85; min-height: 76px; }
.cw-tl               { display: block; opacity: 0; transition: opacity 0.15s; }
.cw-tl.shown         { opacity: 1; }
.syn-kw  { color: var(--accent); }
.syn-str { color: #f59e0b; }
.syn-cmt { color: var(--text-muted); opacity: 0.55; font-style: italic; }
.syn-cls { color: #22d3ee; }
.syn-num { color: #c084fc; }
.syn-op  { color: var(--text-muted); }
.syn-ok  { color: #22c55e; }
@media (max-width: 600px) { .cw-tab { padding: 4px 10px 3px; font-size: 0.68rem; } .cw-term-cwd { display: none; } }

/* ─────────────────────────────────────────────────────────────────
   MODULE: SYSTEM DIAGNOSTICS PANEL
───────────────────────────────────────────────────────────────── */
.diag-panel { margin-top: 14px; }
.diag-grid  { display: flex; flex-direction: column; gap: 8px; }
.diag-item  { display: flex; align-items: center; gap: 10px; }
.diag-label { font-family: var(--font-m); font-size: 8px; letter-spacing: 0.15em; color: var(--text-muted); min-width: 72px; text-transform: uppercase; }
.diag-bar   { flex: 1; height: 6px; background: var(--surface2); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.diag-fill  { height: 100%; background: var(--accent); transition: width 0.6s ease; box-shadow: var(--glow); }
.diag-pct   { font-family: var(--font-m); font-size: 9px; color: var(--accent); min-width: 32px; text-align: right; }

/* ─────────────────────────────────────────────────────────────────
   MODULE: COORDINATE VECTOR GRID
───────────────────────────────────────────────────────────────── */
.coord-panel { margin-top: 14px; }
.coord-grid  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.coord-cell  { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.coord-lbl   { font-family: var(--font-m); font-size: 8px; letter-spacing: 0.15em; color: var(--text-muted); }
.coord-val   { font-family: var(--font-m); font-size: 11px; color: var(--accent); }
@media (max-width: 480px) { .coord-grid { grid-template-columns: repeat(2, 1fr); } }

/* ─────────────────────────────────────────────────────────────────
   MODULE: AUTH MODALS
───────────────────────────────────────────────────────────────── */
.auth-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.8);backdrop-filter:blur(8px);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px; }
.auth-modal { max-width:380px;width:100%;padding:36px;position:relative; }
.auth-close { position:absolute;top:12px;right:16px;background:none;border:none;color:var(--text-muted);font-size:1.4rem;cursor:pointer;font-family:var(--font-m); }
.auth-close:hover { color:var(--accent); }

/* ─────────────────────────────────────────────────────────────────
   MODULE: FLEET DASHBOARD
───────────────────────────────────────────────────────────────── */
.fleet-header { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:32px; }
.fleet-header h1 { font-family:var(--font-d);font-size:clamp(1.2rem,3vw,1.6rem);margin:0; }
.fleet-stats { display:flex;gap:24px;flex-wrap:wrap;margin-bottom:32px; }
.fleet-stat { padding:16px 24px; }
.fleet-stat .stat-val { font-family:var(--font-d);font-size:1.4rem;display:block;margin-bottom:4px; }
.fleet-stat .stat-label { font-family:var(--font-m);font-size:9px;letter-spacing:0.15em;text-transform:uppercase;color:var(--text-muted); }
.fleet-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px; }
.fleet-card { padding:24px;position:relative; }
.fleet-card-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:16px; }
.fleet-card-name { font-family:var(--font-d);font-size:0.95rem;background:none;border:none;color:var(--text);padding:0;outline:none;cursor:text;max-width:200px; }
.fleet-card-name:focus { border-bottom:1px solid var(--accent); }
.fleet-card-chassis { font-family:var(--font-m);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);padding:3px 8px;border:1px solid var(--border);border-radius:var(--radius); }
.fleet-card-stats { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px; }
.fleet-card-stat { text-align:center;padding:10px 8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); }
.fleet-card-stat span:first-child { font-family:var(--font-d);font-size:1.1rem;display:block;color:var(--accent); }
.fleet-card-stat span:last-child { font-family:var(--font-m);font-size:8px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);display:block;margin-top:4px; }
.fleet-card-actions { display:flex;gap:8px; }
.fleet-card-actions .btn { flex:1;justify-content:center;font-size:9px;padding:8px 12px; }
.fleet-empty { text-align:center;padding:60px 20px; }
.fleet-empty p { color:var(--text-muted);font-size:0.9rem;margin-bottom:20px; }

/* ═══════════════════════════════════════════════════════════════════
   MODULE: ATM™ APP SHELL — fleet.html
═══════════════════════════════════════════════════════════════════ */

/* App Header */
.atm-hdr { position:fixed;top:0;left:0;right:0;height:52px;background:var(--nav-bg);border-bottom:var(--border-width) solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 20px;z-index:200;gap:12px; }
.atm-hdr-l,.atm-hdr-r { display:flex;align-items:center;gap:12px; }
.atm-brand { font-family:var(--font-d);font-size:.85rem;font-weight:700;color:var(--accent);letter-spacing:.12em; }
.atm-sep { width:1px;height:18px;background:var(--border);flex-shrink:0; }
.atm-chip { font-family:var(--font-m);font-size:.55rem;letter-spacing:.14em;color:var(--text-muted);text-transform:uppercase; }
.atm-proj { font-family:var(--font-d);font-size:.78rem;color:var(--text); }
.atm-ind { display:flex;align-items:center;gap:6px;font-family:var(--font-m);font-size:.68rem;color:var(--text-muted); }
.btn-sm { font-size:.62rem;padding:5px 12px; }

/* Toolbar */
.atm-tb { position:fixed;top:52px;left:0;right:0;height:40px;background:var(--bg2);border-bottom:var(--border-width) solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 20px;z-index:199;gap:12px; }
.atm-tb-l,.atm-tb-r { display:flex;align-items:center;gap:4px; }
.tbtn { background:none;border:none;border-bottom:2px solid transparent;color:var(--text-muted);font-family:var(--font-m);font-size:.65rem;letter-spacing:.08em;padding:0 12px;height:40px;cursor:pointer;transition:color .2s,border-color .2s;text-transform:uppercase; }
.tbtn.active,.tbtn:hover { color:var(--accent);border-color:var(--accent); }

/* App Body */
.atm-body { margin-top:86px;display:grid;grid-template-columns:260px 1fr;height:calc(100vh - 86px);overflow:hidden; }
.atm-sidebar { border-right:var(--border-width) solid var(--border);overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px; }
.atm-main { overflow-y:auto;padding:20px; }

/* Status Dots */
.dot { display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--text-dim);flex-shrink:0; }
.dot-g { background:#22c55e; }
.dot-r { background:#ef4444; }
.dot-a { background:#f59e0b; }
.dot-pulse { animation:dpulse 2s ease-in-out infinite; }
@keyframes dpulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* Sidebar panels */
.side-panel { padding:14px;border:var(--border-width) solid var(--border);border-radius:var(--radius); }
.side-lbl { font-family:var(--font-m);font-size:.56rem;letter-spacing:.14em;color:var(--text-muted);text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:6px; }
.live-badge { background:var(--accent);color:var(--bg);font-size:.46rem;padding:1px 4px;letter-spacing:.1em;animation:blink 1.4s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* Mission Ring */
.m-ring-wrap { position:relative;width:108px;height:108px;margin:0 auto 12px; }
.m-ring-svg { width:100%;height:100%;transform:rotate(-90deg); }
.m-ring-bg { fill:none;stroke:var(--border);stroke-width:8; }
.m-ring-fill { fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round;stroke-dasharray:263.9;stroke-dashoffset:263.9;transition:stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1); }
.m-ring-center { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none; }
.m-ring-pct { font-family:var(--font-d);font-size:1.1rem;font-weight:700;color:var(--text);line-height:1; }
.m-ring-lbl { font-family:var(--font-m);font-size:.48rem;letter-spacing:.1em;color:var(--text-muted); }
.m-stats { display:flex;justify-content:space-around;border-top:var(--border-width) solid var(--border);padding-top:10px; }
.mst { display:flex;flex-direction:column;align-items:center;gap:3px; }
.mst-n { font-family:var(--font-d);font-size:1.05rem;color:var(--text); }
.mst-k { font-family:var(--font-m);font-size:.5rem;letter-spacing:.1em;color:var(--text-muted); }

/* Velocity Graph */
.vel-graph { width:100%;display:block; }

/* Mission Log */
.atm-log { max-height:180px;overflow-y:auto;display:flex;flex-direction:column;gap:3px; }
.log-row { display:flex;gap:8px;font-family:var(--font-m);font-size:.58rem;padding:2px 0;border-bottom:1px solid var(--border); }
.log-ts { color:var(--text-dim);flex-shrink:0; }
.log-src { color:var(--accent2);flex-shrink:0; }
.log-msg { flex:1;color:var(--text-muted); }

/* Empty State */
.atm-empty { display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:64px 24px;gap:14px; }
.atm-empty-svg { width:72px;height:72px;opacity:.2;color:var(--accent); }
.atm-empty h2 { font-family:var(--font-d);font-size:1.25rem;color:var(--text);margin:0; }
.atm-empty p { color:var(--text-muted);font-size:.88rem;margin:0;max-width:300px;line-height:1.65; }
.atm-empty-acts { display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:4px; }

/* Agent Grid */
.agent-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px; }

/* Agent Card */
.ac { background:var(--panel-bg);border:var(--border-width) solid var(--border);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:14px;transition:border-color .2s; }
.ac:hover { border-color:var(--border-hi); }
.ac-hd { display:flex;align-items:flex-start;justify-content:space-between; }
.ac-id { display:flex;align-items:center;gap:8px; }
.ac-name { font-family:var(--font-d);font-size:.8rem;font-weight:700;color:var(--text);letter-spacing:.04em; }
.ac-role { font-family:var(--font-m);font-size:.56rem;color:var(--text-muted);letter-spacing:.1em;margin-top:2px;text-transform:uppercase; }
.ac-acts { display:flex;gap:4px;opacity:0;transition:opacity .2s; }
.ac:hover .ac-acts { opacity:1; }
.c-btn { background:none;border:var(--border-width) solid var(--border);color:var(--text-muted);font-family:var(--font-m);font-size:.56rem;padding:3px 7px;border-radius:var(--radius);cursor:pointer;transition:color .2s,border-color .2s; }
.c-btn:hover { color:var(--accent);border-color:var(--accent); }
.c-btn-del:hover { color:#ef4444;border-color:#ef4444; }

/* Agent Ring + Stats */
.ac-body { display:flex;gap:14px;align-items:center; }
.ac-ring-wrap { position:relative;width:60px;height:60px;flex-shrink:0; }
.ac-ring-svg { width:60px;height:60px;transform:rotate(-90deg); }
.ac-ring-bg { fill:none;stroke:var(--border);stroke-width:7; }
.ac-ring-fill { fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round;stroke-dasharray:138.23;stroke-dashoffset:138.23;transition:stroke-dashoffset 1s ease; }
.ac-ring-center { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--font-d);font-size:.62rem;font-weight:700;color:var(--text);pointer-events:none; }
.ac-stats { flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:6px; }
.ac-stat { display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;background:var(--surface);border:var(--border-width) solid var(--border);border-radius:var(--radius); }
.ac-stat-n { font-family:var(--font-d);font-size:.88rem;color:var(--accent); }
.ac-stat-k { font-family:var(--font-m);font-size:.48rem;letter-spacing:.08em;color:var(--text-muted); }

/* Task List */
.ac-tasks { border-top:var(--border-width) solid var(--border);padding-top:12px;display:flex;flex-direction:column;gap:5px; }
.task-row { display:flex;align-items:center;gap:7px;font-family:var(--font-b);font-size:.7rem;color:var(--text-muted); }
.task-row.t-active { color:var(--text); }
.task-row.t-done { opacity:.38;text-decoration:line-through; }
.task-d { width:6px;height:6px;border-radius:50%;background:var(--border);flex-shrink:0; }
.task-row.t-active .task-d { background:#22c55e; }
.task-row.t-done .task-d { background:var(--text-dim); }
.task-row.t-error .task-d { background:#ef4444; }
.task-more { font-family:var(--font-m);font-size:.56rem;color:var(--text-dim);padding-left:13px; }
.ac-desc { font-family:var(--font-b);font-size:.66rem;color:var(--text-dim);font-style:italic;margin-top:2px; }
.add-task-btn { background:none;border:var(--border-width) dashed var(--border);color:var(--text-dim);font-family:var(--font-m);font-size:.56rem;padding:4px 8px;border-radius:var(--radius);cursor:pointer;transition:all .2s;letter-spacing:.08em;margin-top:4px;display:inline-block; }
.add-task-btn:hover { border-style:solid;border-color:var(--accent);color:var(--accent); }

/* Modals */
.m-ov { display:none;position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:9000;align-items:center;justify-content:center;padding:20px; }
.m-ov.open { display:flex; }
.m-box { background:var(--bg2);border:var(--border-width) solid var(--border-hi);border-radius:var(--radius);width:100%;max-width:440px;max-height:88vh;overflow-y:auto; }
.m-box-wide { max-width:680px; }
.m-hd { display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:var(--border-width) solid var(--border);font-family:var(--font-d);font-size:.72rem;letter-spacing:.1em;color:var(--text); }
.m-x { background:none;border:none;color:var(--text-muted);font-size:1.05rem;cursor:pointer;padding:0;line-height:1; }
.m-x:hover { color:var(--text); }
.m-bd { padding:18px; }
.m-ft { display:flex;justify-content:flex-end;gap:10px;padding:12px 18px;border-top:var(--border-width) solid var(--border); }
.m-hint { color:var(--text-muted);font-size:.78rem;margin-bottom:14px;line-height:1.6; }
.m-tabs { display:flex;border-bottom:var(--border-width) solid var(--border);padding:0 18px; }
.mtab { background:none;border:none;border-bottom:2px solid transparent;color:var(--text-muted);font-family:var(--font-m);font-size:.65rem;letter-spacing:.08em;padding:10px 14px;cursor:pointer;transition:color .2s,border-color .2s;margin-bottom:-1px; }
.mtab.active,.mtab:hover { color:var(--accent);border-color:var(--accent); }
.m-tab-pane { display:none; }
.m-tab-pane.active { display:block; }

/* Forms */
.fgrp { margin-bottom:14px; }
.fgrp label { display:block;font-family:var(--font-m);font-size:.6rem;letter-spacing:.1em;color:var(--text-muted);margin-bottom:5px;text-transform:uppercase; }
.fhint { font-size:.54rem;color:var(--text-dim);font-family:var(--font-m);margin-left:6px;text-transform:none;letter-spacing:0; }
textarea.contact-input { resize:vertical;min-height:72px; }
select.contact-input { appearance:none;cursor:pointer; }

/* LLM Grid */
.llm-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:10px; }
.llm-opt { background:var(--surface);border:var(--border-width) solid var(--border);border-radius:var(--radius);padding:14px;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:3px;transition:border-color .2s,background .2s; }
.llm-opt:hover,.llm-opt.sel { border-color:var(--accent);background:var(--panel-bg); }
.llm-abbr { font-family:var(--font-d);font-size:.76rem;color:var(--accent);letter-spacing:.06em; }
.llm-nm { font-family:var(--font-b);font-size:.8rem;color:var(--text);font-weight:500; }
.llm-pv { font-family:var(--font-m);font-size:.56rem;color:var(--text-muted); }
.llm-ok { display:flex;align-items:center;gap:6px;color:#22c55e;font-family:var(--font-m);font-size:.7rem;padding:6px 0; }

/* Blueprint Grid */
.bp-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:10px;margin-top:10px; }
.bp-card { background:var(--surface);border:var(--border-width) solid var(--border);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:6px;transition:border-color .2s; }
.bp-card:hover { border-color:var(--accent); }
.bp-ico { font-size:1.25rem;display:block; }
.bp-name { font-family:var(--font-d);font-size:.7rem;color:var(--text); }
.bp-desc { font-family:var(--font-b);font-size:.68rem;color:var(--text-muted);line-height:1.5; }
.bp-tags { display:flex;flex-wrap:wrap;gap:4px;margin-top:2px; }
.bp-tag { font-family:var(--font-m);font-size:.5rem;color:var(--text-dim);border:var(--border-width) solid var(--border);border-radius:2px;padding:1px 5px; }
.bp-deploy { width:100%;margin-top:8px;font-size:.6rem;padding:6px; }

/* Responsive */
@media (max-width:768px) {
  .atm-body { grid-template-columns:1fr; }
  .atm-sidebar { display:none; }
  .atm-tb-l { overflow-x:auto;gap:0; }
  .atm-tb-r .btn:not(.btn-solid) { display:none; }
  .llm-grid { grid-template-columns:1fr; }
  .bp-grid { grid-template-columns:repeat(2,1fr); }
  .agent-grid { grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   DEMO CTA STRIP
════════════════════════════════════════════════════════════════ */
.demo-strip { padding:64px 0; background:var(--bg-alt); border-top:var(--border-width) solid var(--border); border-bottom:var(--border-width) solid var(--border); }
.demo-strip-inner { display:flex; align-items:center; gap:52px; }
.demo-strip-viz { flex-shrink:0; width:160px; height:160px; position:relative; }
.dcs-svg { width:100%; height:100%; overflow:visible; }
.dcs-outer-g { transform-origin:80px 80px; animation:dcs-cw 9s linear infinite; }
.dcs-inner-g { transform-origin:80px 80px; animation:dcs-ccw 6s linear infinite; }
@keyframes dcs-cw { to { transform:rotate(360deg); } }
@keyframes dcs-ccw { to { transform:rotate(-360deg); } }
.demo-strip-copy { flex:1; }
.dcs-eyebrow { font-family:var(--font-m); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.dcs-title { font-family:var(--font-d); font-size:clamp(1.15rem,2.5vw,1.65rem); font-weight:700; color:var(--text); line-height:1.25; margin-bottom:12px; }
.dcs-desc { font-size:.86rem; line-height:1.7; color:var(--text-muted); margin-bottom:20px; max-width:480px; }
.dcs-btns { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.dcs-tags { display:flex; gap:8px; flex-wrap:wrap; }
.dcs-tag { font-family:var(--font-m); font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); border:var(--border-width) solid var(--border); padding:3px 10px; border-radius:20px; }

/* ═══════════════════════════════════════════════════════════════
   HOW IT WORKS
════════════════════════════════════════════════════════════════ */
.hiw-flow { display:grid; grid-template-columns:1fr 64px 1fr 64px 1fr; align-items:start; gap:0; margin-top:48px; }
.hiw-step { display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:0 8px; }
.hiw-icon-wrap { position:relative; width:72px; height:72px; display:flex; align-items:center; justify-content:center; }
.hiw-icon-bg { position:absolute; inset:0; background:var(--surface); border:var(--border-width) solid var(--border); border-radius:50%; }
.hiw-ring { position:absolute; inset:-8px; border-radius:50%; border:1px dashed var(--accent); opacity:.35; animation:hiw-spin-cw 7s linear infinite; }
.hiw-ring-2 { position:absolute; inset:-16px; border-radius:50%; border:1px dashed var(--border-hi); opacity:.18; animation:hiw-spin-ccw 12s linear infinite; }
@keyframes hiw-spin-cw { to { transform:rotate(360deg); } }
@keyframes hiw-spin-ccw { to { transform:rotate(-360deg); } }
.hiw-icon-inner { position:relative; z-index:1; color:var(--accent); }
.hiw-num { font-family:var(--font-m); font-size:8px; letter-spacing:.14em; color:var(--accent); text-transform:uppercase; }
.hiw-step-title { font-family:var(--font-d); font-size:.88rem; font-weight:700; color:var(--text); }
.hiw-step-desc { font-size:.76rem; line-height:1.65; color:var(--text-muted); }
.hiw-arrow { display:flex; align-items:center; justify-content:center; padding-top:28px; }
.hiw-arr-svg { width:48px; height:14px; overflow:visible; }
.hiw-arr-line { stroke-dasharray:5 4; stroke-dashoffset:0; animation:hiw-dash 1s linear infinite; }
@keyframes hiw-dash { to { stroke-dashoffset:-9; } }

/* ═══════════════════════════════════════════════════════════════
   INDUSTRY GRID
════════════════════════════════════════════════════════════════ */
.industry-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(195px,1fr)); gap:12px; margin-top:36px; }
/* Blueprint stat pills */
.bp-stat-pill { display:inline-flex; align-items:center; gap:10px; border:1px solid var(--border); padding:8px 8px 8px 18px; font-family:var(--font-m); font-size:0.78rem; letter-spacing:.06em; color:var(--text-muted); }
.bp-stat-count { background:var(--accent); color:var(--bg); padding:3px 11px; border-radius:20px; font-family:var(--font-h); font-size:0.75rem; font-weight:700; min-width:28px; text-align:center; line-height:1.5; }

.ic { background:var(--panel-bg); border:var(--border-width) solid var(--border); border-radius:var(--radius); padding:22px 18px; display:flex; flex-direction:column; gap:8px; transition:border-color .2s,box-shadow .2s,transform .18s; color:inherit; text-decoration:none; }
.ic:hover { border-color:var(--accent); box-shadow:var(--glow); transform:translateY(-2px); }
.ic-icon { width:38px; height:38px; background:var(--surface); border:var(--border-width) solid var(--border); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; color:var(--accent); }
.ic-name { font-family:var(--font-d); font-size:.8rem; font-weight:700; color:var(--text); }
.ic-agents { font-family:var(--font-m); font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); }
.ic-desc { font-size:.72rem; line-height:1.55; color:var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════
   PROOF NUMBERS
════════════════════════════════════════════════════════════════ */
.proof-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:var(--border-width) solid var(--border); border-radius:var(--radius); overflow:hidden; margin-top:36px; }
.proof-item { background:var(--panel-bg); padding:24px 16px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; }
.proof-arc { text-align:center; }
.proof-arc svg { display:block; margin:0 auto 10px; }
.proof-num { display:block; font-family:var(--font-d); font-size:clamp(1.8rem,4vw,2.7rem); font-weight:900; color:var(--accent); line-height:1; font-variant-numeric:tabular-nums; min-height:1.1em; }
.proof-suf { font-size:.55em; vertical-align:super; }
.proof-label { font-family:var(--font-m); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); margin-top:2px; }

/* ═══════════════════════════════════════════════════════════════
   DEMO PREVIEW PANEL
════════════════════════════════════════════════════════════════ */
.dp-wrap { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.dp-copy { display:flex; flex-direction:column; gap:18px; }
.dp-features { display:flex; flex-direction:column; gap:12px; }
.dp-feature { display:flex; align-items:flex-start; gap:12px; }
.dp-feature-icon { width:32px; height:32px; flex-shrink:0; background:var(--surface); border:var(--border-width) solid var(--border); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; color:var(--accent); margin-top:2px; }
.dp-feature-text h4 { font-family:var(--font-d); font-size:.82rem; font-weight:700; color:var(--text); margin-bottom:3px; }
.dp-feature-text p { font-size:.74rem; line-height:1.55; color:var(--text-muted); }
.demo-screen-wrap { position:relative; }
.demo-screen-link { display:block; text-decoration:none; }
.demo-screen { background:var(--bg2,var(--bg)); border:var(--border-width) solid var(--border-hi); border-radius:calc(var(--radius) + 2px); overflow:hidden; box-shadow:var(--glow-hi); transition:box-shadow .25s; }
.demo-screen-link:hover .demo-screen { box-shadow:var(--glow-hi),0 0 48px rgba(255,255,255,.04); }
.demo-chrome { background:var(--surface); border-bottom:1px solid var(--border); padding:8px 12px; display:flex; align-items:center; gap:8px; }
.demo-chrome-dots { display:flex; gap:4px; }
.demo-chrome-dots span { width:7px; height:7px; border-radius:50%; background:var(--border); }
.demo-chrome-dots span:nth-child(1) { background:#ef4444; }
.demo-chrome-dots span:nth-child(2) { background:#f59e0b; }
.demo-chrome-dots span:nth-child(3) { background:#22c55e; }
.demo-url { flex:1; font-family:var(--font-m); font-size:0.62rem; color:var(--text-muted); letter-spacing:.03em; }
.demo-body { padding:10px 12px; display:flex; flex-direction:column; gap:4px; }
.demo-hdr { display:flex; align-items:center; justify-content:space-between; padding:2px 0 8px; border-bottom:1px solid var(--border); margin-bottom:4px; }
.demo-agents { display:flex; flex-direction:column; gap:0; }
.demo-agent { display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid var(--border); font-family:var(--font-m); font-size:0.65rem; color:var(--text-muted); }
.demo-agent:last-child { border-bottom:none; }
.demo-ring { width:26px; height:26px; flex-shrink:0; }
.demo-ring svg { width:100%; height:100%; display:block; }
.demo-pct { font-size:0.6rem; color:var(--text-muted); margin-left:auto; }
.demo-scanline { position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:.2; animation:ds-scan 3.5s ease-in-out infinite; pointer-events:none; top:30px; }

/* ── MOBILE DEVICE MOCKUP ── */
.mob-wrap { display:flex; align-items:center; justify-content:center; gap:0; position:relative; }
.mob-side-l, .mob-side-r { display:flex; flex-direction:column; gap:8px; padding:20px 0; }
.mob-side-l { margin-right:-1px; }
.mob-side-r { margin-left:-1px; }
.mob-btn { width:3px; height:24px; background:var(--border-hi); border-radius:2px 0 0 2px; }
.mob-btn-lg { height:38px; border-radius:0 2px 2px 0; background:var(--border-hi); }
.mob-frame { width:220px; background:var(--panel-bg); border:2px solid var(--border-hi); border-radius:36px; position:relative; box-shadow:var(--glow-hi), 0 24px 64px rgba(0,0,0,.55); overflow:hidden; }
.mob-di { width:72px; height:22px; background:var(--panel-bg); border-bottom:1.5px solid var(--border); border-radius:0 0 14px 14px; margin:0 auto; position:relative; z-index:2; display:flex; align-items:center; justify-content:center; }
.mob-di::after { content:''; width:10px; height:10px; border-radius:50%; border:1.5px solid var(--border); }
.mob-screen { background:var(--bg); display:flex; flex-direction:column; min-height:460px; }
.mob-status-bar { display:flex; justify-content:space-between; align-items:center; padding:6px 16px 3px; font-family:var(--font-m); font-size:0.5rem; color:var(--text-muted); }
.mob-status-icons { display:flex; align-items:center; gap:5px; color:var(--text-muted); }
.mob-app-hdr { display:flex; justify-content:space-between; align-items:center; padding:8px 14px; border-bottom:1px solid var(--border); }
.mob-app-title { font-family:var(--font-h); font-size:0.82rem; color:var(--text); letter-spacing:.04em; }
.mob-live-badge { display:flex; align-items:center; gap:5px; font-family:var(--font-m); font-size:0.42rem; letter-spacing:.15em; color:#22c55e; border:1px solid rgba(34,197,94,.35); padding:2px 8px; }
.mob-live-dot { width:5px; height:5px; border-radius:50%; background:#22c55e; animation:mob-pulse 1.8s ease-in-out infinite; }
@keyframes mob-pulse { 0%,100%{opacity:1;} 50%{opacity:.3;} }
.mob-section-lbl { padding:8px 14px 3px; font-family:var(--font-m); font-size:0.45rem; letter-spacing:.1em; color:var(--text-muted); }
.mob-agents { padding:0 14px; }
.mob-agent-row { display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid var(--border); }
.mob-agent-row:last-child { border-bottom:none; }
.mob-agent-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.mob-dot-active { background:var(--accent); box-shadow:0 0 6px var(--accent); }
.mob-dot-idle   { background:var(--accent); opacity:.5; }
.mob-dot-dim    { background:var(--text-muted); opacity:.35; }
.mob-agent-info { flex:1; display:flex; flex-direction:column; gap:4px; min-width:0; }
.mob-agent-name { font-family:var(--font-m); font-size:0.52rem; letter-spacing:.08em; color:var(--text); }
.mob-agent-bar { height:3px; background:var(--border); border-radius:2px; overflow:hidden; }
.mob-agent-fill { height:100%; background:var(--accent); border-radius:2px; }
.mob-agent-pct { font-family:var(--font-m); font-size:0.47rem; color:var(--text-muted); flex-shrink:0; min-width:22px; text-align:right; }
.mob-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); margin:10px 14px; border:1px solid var(--border); }
.mob-metric { background:var(--panel-bg); padding:8px 4px; text-align:center; display:flex; flex-direction:column; gap:2px; }
.mob-metric-val { font-family:var(--font-h); font-size:0.65rem; color:var(--accent); line-height:1; }
.mob-metric-lbl { font-family:var(--font-m); font-size:0.38rem; letter-spacing:.08em; color:var(--text-muted); }
.mob-tab-bar { display:flex; border-top:1px solid var(--border); margin-top:auto; }
.mob-tab { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 2px 6px; color:var(--text-muted); font-family:var(--font-m); font-size:0.38rem; letter-spacing:.06em; }
.mob-tab-active { color:var(--accent); border-top:1.5px solid var(--accent); margin-top:-1px; }
.mob-home-ind { width:56px; height:3px; background:var(--border-hi); border-radius:2px; margin:6px auto 10px; opacity:.6; }
.mob-scanline { position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:.15; animation:ds-scan 4s ease-in-out infinite; pointer-events:none; top:40px; }

.ds-chrome { background:var(--surface); border-bottom:var(--border-width) solid var(--border); padding:9px 14px; display:flex; align-items:center; gap:7px; }
.ds-dot { width:8px; height:8px; border-radius:50%; }
.ds-url { flex:1; background:var(--bg); border:var(--border-width) solid var(--border); border-radius:4px; padding:3px 10px; font-family:var(--font-m); font-size:8px; color:var(--text-dim); letter-spacing:.04em; }
.ds-body { padding:12px; display:flex; flex-direction:column; gap:5px; }
.ds-hdr { display:flex; align-items:center; justify-content:space-between; padding:4px 0 10px; border-bottom:var(--border-width) solid var(--border); margin-bottom:4px; }
.ds-hdr-title { font-family:var(--font-d); font-size:.6rem; color:var(--text); }
.ds-hdr-badge { font-family:var(--font-m); font-size:7px; letter-spacing:.1em; color:#22c55e; border:1px solid rgba(34,197,94,.3); padding:2px 7px; border-radius:20px; }
.ds-row { display:grid; grid-template-columns:26px 1fr 58px 26px; align-items:center; gap:8px; padding:5px 4px; border-radius:4px; }
.ds-row-ring { width:22px; height:22px; }
.ds-row-info { display:flex; flex-direction:column; gap:1px; }
.ds-row-name { font-family:var(--font-d); font-size:.58rem; color:var(--text); }
.ds-row-chip { font-family:var(--font-m); font-size:7px; letter-spacing:.07em; color:var(--text-dim); }
.ds-row-bar { height:4px; background:var(--surface); border-radius:2px; overflow:hidden; }
.ds-row-fill { height:100%; border-radius:2px; }
.ds-row-pct { font-family:var(--font-m); font-size:8px; color:var(--text-muted); text-align:right; }
.ds-scan-line { position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:.2; animation:ds-scan 3.5s ease-in-out infinite; pointer-events:none; top:30px; }
@keyframes ds-scan { 0%,100% { top:28px; opacity:.08; } 50% { top:calc(100% - 28px); opacity:.28; } }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — NEW SECTIONS
════════════════════════════════════════════════════════════════ */
@media (max-width:900px) {
  .demo-strip-inner { flex-direction:column; text-align:center; }
  .dcs-desc { margin-left:auto; margin-right:auto; }
  .dcs-btns { justify-content:center; }
  .dcs-tags { justify-content:center; }
  .hiw-flow { grid-template-columns:1fr; gap:20px; }
  .hiw-arrow { transform:rotate(90deg); padding-top:0; }
  .dp-wrap { grid-template-columns:1fr; }
  .proof-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px) {
  .industry-grid { grid-template-columns:repeat(2,1fr); }
  .proof-grid { grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   HERO NETWORK SVG
════════════════════════════════════════════════════════════════ */
.hero-net { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; opacity:.55; }
.hero-net svg { width:100%; height:100%; }

/* ═══════════════════════════════════════════════════════════════
   PROOF ARC RINGS
════════════════════════════════════════════════════════════════ */
.proof-item { position:relative; }
.proof-arc-svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.proof-arc-1 { animation:proof-arc-spin 10s linear infinite; transform-origin:50% 50%; }
.proof-arc-2 { animation:proof-arc-spin 16s linear infinite reverse; transform-origin:50% 50%; }
@keyframes proof-arc-spin { to { transform:rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════
   DEMO TAB PANELS — AGENTS / TASKS / LOGS
════════════════════════════════════════════════════════════════ */
.ag-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(195px,1fr)); gap:12px; }
.ag-card { background:var(--panel-bg); border:var(--border-width) solid var(--border); border-radius:var(--radius); padding:18px; display:flex; flex-direction:column; gap:10px; transition:border-color .2s; }
.ag-card:hover { border-color:var(--border-hi); }
.ag-card-hd { display:flex; align-items:center; gap:10px; }
.ag-avatar { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-d); font-size:.7rem; font-weight:700; flex-shrink:0; }
.ag-info-name { font-family:var(--font-d); font-size:.85rem; font-weight:700; color:var(--text); }
.ag-info-role { font-family:var(--font-m); font-size:7px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); margin-top:1px; }
.ag-uptime-bar { height:2px; background:var(--surface); border-radius:99px; }
.ag-uptime-fill { height:100%; border-radius:99px; }
.ag-meta { display:flex; justify-content:space-between; }
.ag-meta-item { display:flex; flex-direction:column; gap:2px; }
.ag-meta-k { font-family:var(--font-m); font-size:7px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); }
.ag-meta-v { font-family:var(--font-d); font-size:.75rem; color:var(--text-muted); }
/* Task table */
.task-tbl { width:100%; border-collapse:collapse; }
.task-tbl th { font-family:var(--font-m); font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); padding:8px 12px; text-align:left; border-bottom:var(--border-width) solid var(--border); white-space:nowrap; }
.task-tbl td { padding:10px 12px; border-bottom:var(--border-width) solid var(--border); color:var(--text-muted); font-size:.74rem; vertical-align:middle; }
.task-tbl tr:last-child td { border-bottom:none; }
.task-tbl tr:hover td { background:var(--surface); }
.tbl-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:20px; font-family:var(--font-m); font-size:7px; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }
.tbl-badge-run   { background:rgba(34,197,94,.12); color:#22c55e; border:1px solid rgba(34,197,94,.25); }
.tbl-badge-queue { background:rgba(234,179,8,.12); color:#eab308; border:1px solid rgba(234,179,8,.25); }
.tbl-badge-done  { background:rgba(148,163,184,.1); color:var(--text-dim); border:1px solid var(--border); }
.tbl-prio { font-family:var(--font-m); font-size:8px; letter-spacing:.08em; text-transform:uppercase; }
.tbl-prio-hi { color:#ef4444; }
.tbl-prio-md { color:#f59e0b; }
.tbl-prio-lo { color:var(--text-dim); }
.tbl-bar-wrap { display:inline-block; width:64px; }
/* Logs view */
.log-view { padding:14px; }
.log-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; padding-bottom:10px; border-bottom:var(--border-width) solid var(--border); }
.log-filter-btn { background:none; border:var(--border-width) solid var(--border); color:var(--text-muted); font-family:var(--font-m); font-size:8px; letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border-radius:var(--radius); cursor:pointer; transition:all .18s; }
.log-filter-btn.act,.log-filter-btn:hover { border-color:var(--accent); color:var(--accent); }
.log-entry-full { display:grid; grid-template-columns:68px 56px 1fr; gap:10px; padding:8px 4px; border-bottom:var(--border-width) solid var(--border); align-items:baseline; }
.log-entry-full:last-child { border-bottom:none; }
.log-ts-f { font-family:var(--font-m); font-size:.58rem; color:var(--text-dim); letter-spacing:.04em; white-space:nowrap; }
.log-tag { font-family:var(--font-m); font-size:7px; letter-spacing:.08em; text-transform:uppercase; padding:2px 6px; border-radius:2px; display:inline-block; white-space:nowrap; }
.log-msg-f { font-family:var(--font-b); font-size:.72rem; color:var(--text-muted); line-height:1.45; }

/* ─────────────────────────────────────────────────────────────────
   MODULE: PAGE HERO BACKGROUNDS
───────────────────────────────────────────────────────────────── */

/* Shared container for all page hero SVG animations */
.page-hero-bg {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0; overflow: hidden;
  opacity: 0.45;
}
.page-hero-bg svg { width: 100%; height: 100%; }

/* ── SOLUTIONS: Building a Solution ── */
@keyframes sol-node-in  { from { opacity:0; transform:scale(0); } to { opacity:1; transform:scale(1); } }
@keyframes sol-edge-draw { to { stroke-dashoffset: 0; } }
@keyframes sol-pulse { 0%,100% { opacity:.4; } 50% { opacity:1; } }
@keyframes sol-bar { to { width: var(--tw); } }
.sol-node { transform-origin: center; animation: sol-node-in 0.5s ease forwards; opacity: 0; }
.sol-edge { stroke-dashoffset: var(--el); animation: sol-edge-draw 0.8s ease forwards; stroke-dasharray: var(--el); }
.sol-bar-fill { width: 0; animation: sol-bar 1.2s ease forwards; height: 100%; border-radius: 0; background: var(--accent); }
.sol-label { font-family: var(--font-m); font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--accent); opacity: 0.6; }
.sol-glow  { animation: sol-pulse 2.4s ease-in-out infinite; }

/* ── ATM: Agent Working ── */
@keyframes atm-bar-fill { to { width: var(--tw); } }
@keyframes atm-spark    { to { stroke-dashoffset: 0; } }
@keyframes atm-blink    { 0%,100% { opacity:.25; } 50% { opacity:.9; } }
@keyframes atm-count-up { from { opacity:.3; } to { opacity:.85; } }
.atm-bg-bar  { width: 0; animation: atm-bar-fill 1.4s ease forwards; height: 100%; background: var(--accent); }
.atm-bg-line { stroke-dashoffset: var(--el); stroke-dasharray: var(--el); animation: atm-spark 2s ease forwards; }
.atm-bg-cell { animation: atm-blink var(--dur,2s) var(--del,0s) ease-in-out infinite; opacity: .25; }
.atm-bg-lbl  { font-family: var(--font-m); font-size: 7px; letter-spacing: .1em; text-transform: uppercase; fill: var(--accent); opacity: .5; }

/* ── ACADEMY: Library & Learning ── */
@keyframes acad-book-in { from { opacity:0; transform:scaleY(0); } to { opacity:var(--op,.4); transform:scaleY(1); } }
@keyframes acad-scan    { 0% { transform:translateY(0); opacity:.7; } 90% { opacity:.7; } 100% { transform:translateY(240px); opacity:0; } }
@keyframes acad-arc     { to { stroke-dashoffset: 0; } }
@keyframes acad-pulse   { 0%,100% { opacity:.2; } 50% { opacity:.85; } }
.acad-book { transform-origin: bottom center; animation: acad-book-in 0.4s ease forwards; opacity: 0; }
.acad-scan-line { animation: acad-scan 4s linear infinite; }
.acad-arc  { stroke-dashoffset: var(--el); stroke-dasharray: var(--el); animation: acad-arc 1.5s ease forwards; }
.acad-active { animation: acad-pulse var(--dur,2s) var(--del,0s) ease-in-out infinite; }
.acad-lbl  { font-family: var(--font-m); font-size: 7px; letter-spacing: .1em; text-transform: uppercase; fill: var(--accent); opacity: .5; }

/* ── COMMUNICATIONS: High-Tech Comms ── */
@keyframes coms-ring-expand { 0% { r:20; opacity:.6; } 100% { r:260; opacity:0; } }
@keyframes coms-wave  { to { stroke-dashoffset: -600; } }
@keyframes coms-pulse { 0%,100% { opacity:.2; r:4; } 50% { opacity:.9; r:7; } }
@keyframes coms-tx    { 0%,100% { opacity:.3; } 50% { opacity:.9; } }
.coms-ring { animation: coms-ring-expand var(--dur,3s) var(--del,0s) ease-out infinite; }
.coms-wave { stroke-dasharray: 8 6; animation: coms-wave 3s linear infinite; }
.coms-node { animation: coms-pulse var(--dur,2s) var(--del,0s) ease-in-out infinite; }
.coms-lbl  { font-family: var(--font-m); font-size: 7px; letter-spacing: .12em; text-transform: uppercase; fill: var(--accent); }
.coms-tx   { animation: coms-tx 1.6s ease-in-out infinite; }

/* ═══════════════════════════════════════════════════════
   GLOBAL SVG ICON SYSTEM
═══════════════════════════════════════════════════════ */
.icon { display:inline-block; width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; flex-shrink:0; overflow:visible; }
.icon-sm  { width:.85em;  height:.85em;  }
.icon-lg  { width:1.25em; height:1.25em; }
.icon-xl  { width:2em;    height:2em;    }
.sec-icon { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; min-width:34px; border:1px solid var(--border); background:var(--surface); border-radius:var(--radius); color:var(--accent); flex-shrink:0; }
.h-icon   { display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* ── BG Grid hidden on matrix + robotech ── */
[data-theme="matrix"]   .bg-grid,

/* ═══════════════════════════════════════════════════════
   SOLUTIONS: ATM→FLEET WORKFLOW DIAGRAM
═══════════════════════════════════════════════════════ */
.wf-diagram { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:0; align-items:stretch; margin:40px 0 36px; }
@media (max-width:768px) { .wf-diagram { grid-template-columns:1fr; } .wf-arrow { transform:rotate(90deg); margin:8px auto; } }
.wf-panel { border:1px solid var(--border); background:var(--panel-bg); padding:28px 24px; display:flex; flex-direction:column; gap:8px; }
.wf-panel-hd { display:flex; align-items:center; gap:10px; font-family:var(--font-h); font-size:0.88rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:4px; font-weight:700; }
.wf-output-active { border-color:var(--border-hi); box-shadow:var(--glow); }
.wf-arrow  { display:flex; align-items:center; justify-content:center; padding:0 12px; color:var(--border-hi); }
.wf-arrow svg { width:32px; height:32px; }
.wf-steps  { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0; }
.wf-step   { padding:9px 0; font-size:0.82rem; color:var(--text-muted); display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--border); }
.wf-step:last-child { border-bottom:none; }
.wf-step::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--border); flex-shrink:0; }
.wf-step.wf-active { color:var(--accent); }
.wf-step.wf-active::before { background:var(--accent); box-shadow:0 0 8px var(--accent); }
.bp-cta-strip { display:flex; align-items:center; justify-content:space-between; gap:24px; border:1px solid var(--border-hi); background:var(--panel-bg); padding:28px 32px; margin-top:4px; flex-wrap:wrap; }
.bp-cta-strip p { font-size:0.88rem; color:var(--text-muted); margin:4px 0 0; }
.bp-cta-label { font-family:var(--font-h); font-size:0.75rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:4px; }

/* ═══════════════════════════════════════════════════════
   BLUEPRINT LIBRARY PAGE
═══════════════════════════════════════════════════════ */
.bp-lib-tabs  { display:flex; gap:0; }
.bp-lib-tab   { display:flex; align-items:center; gap:7px; padding:12px 20px; border:1px solid var(--border); background:var(--surface); cursor:pointer; font-size:0.82rem; color:var(--text-muted); transition:all .15s; }
.bp-lib-tab + .bp-lib-tab { border-left:none; }
.bp-lib-tab.active { border-color:var(--accent); color:var(--accent); background:var(--panel-bg); z-index:1; }
.bp-lib-search { border:none; background:transparent; color:var(--text); font-size:0.85rem; outline:none; width:100%; }
.bp-lib-grid  { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.bp-lib-card  { border:1px solid var(--border); background:var(--panel-bg); padding:24px; display:flex; flex-direction:column; gap:14px; transition:border-color .2s, box-shadow .2s; }
.bp-lib-card:hover { border-color:var(--border-hi); box-shadow:var(--glow); }
.bp-lib-hd    { display:flex; align-items:flex-start; gap:12px; }
.bp-lib-meta  { flex:1; min-width:0; }
.bp-lib-name  { font-family:var(--font-h); font-size:0.9rem; letter-spacing:.05em; color:var(--text); font-weight:700; }
.bp-lib-role  { color:var(--text-muted); margin-top:3px; }
.bp-lib-desc  { font-size:0.84rem; line-height:1.65; color:var(--text-muted); flex:1; }
.bp-lib-tags  { display:flex; gap:6px; flex-wrap:wrap; }
.bp-lib-actions { display:flex; gap:6px; flex-wrap:wrap; margin-top:auto; padding-top:4px; }
.bp-fav-btn   { background:none; border:1px solid var(--border); padding:5px 8px; cursor:pointer; color:var(--text-muted); transition:all .15s; border-radius:var(--radius); margin-left:auto; }
.bp-fav-btn:hover, .bp-fav-btn.active { color:var(--accent); border-color:var(--accent); }
.bp-build-btn { background:var(--accent); color:var(--bg); border-color:var(--accent); }
.bp-build-btn:hover { opacity:.85; }
.bp-filter-btn        { font-size:0.75rem; padding:5px 12px; }
.bp-filter-btn.active { border-color:var(--accent); color:var(--accent); }

/* ═══════════════════════════════════════════════════════
   ATM DEMO: EXPANSION STYLES
═══════════════════════════════════════════════════════ */
/* System health bars */
.sys-metric { display:flex; align-items:center; gap:8px; font-size:0.75rem; margin-bottom:10px; }
.sys-lbl    { width:30px; color:var(--text-muted); flex-shrink:0; font-family:var(--font-m); letter-spacing:.05em; }
.sys-bar    { flex:1; height:5px; background:var(--surface2,#1a1a1a); border-radius:2px; overflow:hidden; }
.sys-bar-fill { height:100%; background:var(--accent); border-radius:2px; transition:width 1.2s ease; }
.sys-val    { width:34px; text-align:right; color:var(--text-muted); font-family:var(--font-m); font-size:0.72rem; flex-shrink:0; }
/* Recommendations strip */
.atm-recs   { display:flex; align-items:center; gap:12px; padding:5px 14px; border-bottom:1px solid var(--border); font-size:0.75rem; overflow:hidden; min-height:32px; }
.rec-lbl    { color:var(--text-muted); letter-spacing:.15em; flex-shrink:0; font-size:0.65rem; font-family:var(--font-m); text-transform:uppercase; border:1px solid var(--border); padding:2px 7px; }
.rec-track  { display:flex; gap:8px; overflow:hidden; flex:1; }
.rec-chip   { border:1px solid var(--border); padding:2px 10px; white-space:nowrap; color:var(--text-muted); font-size:0.73rem; font-family:var(--font-m); flex-shrink:0; }
/* Command bar */
.atm-cmd    { display:flex; align-items:center; gap:8px; padding:8px 14px; border-top:1px solid var(--border); background:var(--bg); flex-shrink:0; }
.atm-cmd-input { flex:1; background:transparent; border:none; color:var(--text); font-size:0.82rem; font-family:var(--font-m); outline:none; }
.atm-cmd-input::placeholder { color:var(--text-muted); opacity:.6; }
/* Status bar */
.atm-status-bar { display:flex; align-items:center; gap:10px; padding:4px 14px; border-top:1px solid var(--border); font-size:0.7rem; color:var(--text-muted); letter-spacing:.08em; background:var(--bg); flex-shrink:0; font-family:var(--font-m); }
.sb-brand   { color:var(--accent); font-weight:700; letter-spacing:.12em; }
/* Analytics panel */
.ana-grid   { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px; }
@media (max-width:640px) { .ana-grid { grid-template-columns:1fr; } }
.ana-card   { padding:16px 20px; }
.ana-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:640px) { .ana-metrics { grid-template-columns:repeat(2,1fr); } }
.am-chip    { border:1px solid var(--border); padding:16px 12px; text-align:center; }
.am-val     { font-size:1.5rem; font-family:var(--font-h); color:var(--accent); font-weight:700; }
.am-lbl     { font-size:0.68rem; color:var(--text-muted); letter-spacing:.1em; text-transform:uppercase; margin-top:4px; font-family:var(--font-m); }
.ldr-row    { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); font-size:0.82rem; }
.ldr-rank   { width:20px; color:var(--text-muted); font-family:var(--font-m); font-size:0.72rem; flex-shrink:0; }
.ldr-name   { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ldr-score  { color:var(--accent); font-family:var(--font-m); font-size:0.82rem; flex-shrink:0; }
/* Settings panel */
.settings-group { margin-bottom:24px; display:flex; flex-direction:column; gap:8px; }
.tab-pane   { padding:20px 0; flex:1; overflow-y:auto; }
.w100       { width:100%; margin-bottom:6px; }
/* Quick actions */
.quick-btn  { display:flex; align-items:center; gap:8px; width:100%; margin-bottom:6px; }

/* ═══════════════════════════════════════════════════════
   ACADEMY: INTERACTIVE EXERCISES
═══════════════════════════════════════════════════════ */
.exercise-panel  { border:1px solid var(--border-hi); background:var(--panel-bg); padding:28px; margin-top:20px; animation:fadeIn .3s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.ex-hd           { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:8px; }
.ex-tabs         { display:flex; gap:4px; margin-bottom:20px; flex-wrap:wrap; }
.ex-tab          { padding:6px 14px; border:1px solid var(--border); background:var(--surface); font-size:0.8rem; cursor:pointer; color:var(--text-muted); transition:all .15s; }
.ex-tab.active   { border-color:var(--accent); color:var(--accent); background:var(--panel-bg); }
/* Prompt Lab */
.prompt-template { background:var(--surface); padding:20px 24px; margin-bottom:16px; font-size:0.9rem; line-height:2.2; border:1px solid var(--border); }
.pt-blank        { background:transparent; border:none; border-bottom:1px solid var(--accent); min-width:100px; font-size:0.88rem; color:var(--accent); font-family:var(--font-m); padding:2px 4px; outline:none; }
.pt-score        { font-size:0.78rem; color:var(--text-muted); margin-top:12px; font-family:var(--font-m); }
.pt-response     { margin-top:16px; padding:20px; font-size:0.88rem; line-height:1.75; font-style:italic; }
/* Workflow Builder */
.wfb-toolbar { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; align-items:center; }
.wfb-canvas  { min-height:160px; border:1px solid var(--border); background:var(--surface); padding:16px; display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; content:""; position:relative; }
.wfb-hint    { color:var(--text-muted); font-size:0.82rem; font-style:italic; align-self:center; }
.wfb-node    { border:1px solid var(--border-hi); padding:8px 14px; font-size:0.78rem; cursor:pointer; display:inline-flex; align-items:center; gap:6px; background:var(--panel-bg); transition:all .15s; font-family:var(--font-m); }
.wfb-node:hover { border-color:var(--accent); color:var(--accent); }
.wfb-node-input    { border-color:#22c55e; color:#22c55e; }
.wfb-node-output   { border-color:var(--accent); color:var(--accent); }
.wfb-node-agent    { border-color:#60a5fa; color:#60a5fa; }
.wfb-node-decision { border-color:#f59e0b; color:#f59e0b; }
.wfb-node-tool     { border-color:#a78bfa; color:#a78bfa; }
.wfb-node-loop     { border-color:#fb923c; color:#fb923c; }
.wfb-status { margin-top:10px; font-size:0.82rem; font-family:var(--font-m); padding:8px 12px; }
.wfb-ok     { color:#22c55e; border:1px solid #22c55e; }
.wfb-err    { color:#ef4444; border:1px solid #ef4444; }
/* Deployment Checklist */
.deploy-progress { height:4px; background:var(--surface2,#1a1a1a); margin-bottom:20px; border-radius:2px; overflow:hidden; }
.deploy-bar      { height:100%; background:var(--accent); border-radius:2px; transition:width .4s ease; }
.deploy-steps    { display:flex; flex-direction:column; }
.deploy-step     { display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); font-size:0.85rem; cursor:pointer; transition:background .15s; }
.deploy-step:last-child { border-bottom:none; }
.deploy-step input[type=checkbox] { margin-top:2px; accent-color:var(--accent); cursor:pointer; width:15px; height:15px; flex-shrink:0; }
.deploy-step-lbl  { flex:1; }
.deploy-step-name { font-size:0.85rem; }
.deploy-step-desc { font-size:0.76rem; color:var(--text-muted); margin-top:3px; }
.dep-log { padding:16px; font-family:var(--font-m); font-size:0.76rem; max-height:200px; overflow-y:auto; line-height:1.7; color:var(--text-muted); }
.dep-log-line { margin-bottom:2px; }
.dep-log-line.ok { color:#22c55e; }

/* ═══════════════════════════════════════════════════════
   COMMUNICATIONS: TABBED HUB
═══════════════════════════════════════════════════════ */
.comms-tabs-bar  { border-bottom:1px solid var(--border); background:var(--nav-bg,var(--panel-bg)); position:sticky; top:60px; z-index:90; }
.comms-tab-btns  { display:flex; gap:0; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:0 max(20px, calc((100vw - 1200px)/2)); }
.comms-tb        { padding:13px 22px; border:none; border-bottom:2px solid transparent; background:transparent; color:var(--text-muted); cursor:pointer; font-size:0.82rem; display:flex; align-items:center; gap:6px; white-space:nowrap; transition:color .15s, border-color .15s; font-family:var(--font-b); }
.comms-tb.active { color:var(--accent); border-bottom-color:var(--accent); }
.comms-tb:hover  { color:var(--text); }
.comms-tab-pane  { display:none; }
.comms-tab-pane.active { display:block; }
/* Profile */
.profile-avatar  { width:64px; height:64px; border-radius:50%; background:var(--accent); color:var(--bg); display:flex; align-items:center; justify-content:center; font-size:1.8rem; font-family:var(--font-h); margin-bottom:24px; font-weight:700; }
.profile-field   { display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid var(--border); font-size:0.88rem; }
.profile-field:last-child { border-bottom:none; }
/* Settings */
.settings-toggle-row  { display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid var(--border); font-size:0.88rem; }
.settings-toggle-row:last-child { border-bottom:none; }
.toggle-switch   { position:relative; width:40px; height:22px; cursor:pointer; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-slider   { position:absolute; inset:0; background:var(--border); border-radius:11px; transition:.3s; }
.toggle-slider::before { content:''; position:absolute; height:16px; width:16px; left:3px; bottom:3px; background:var(--text-muted); border-radius:50%; transition:.3s; }
input:checked + .toggle-slider { background:var(--accent); }
input:checked + .toggle-slider::before { transform:translateX(18px); background:var(--bg); }
.theme-swatch-grid { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.theme-swatch    { width:32px; height:32px; border:2px solid var(--border); cursor:pointer; border-radius:var(--radius); transition:border-color .15s; }
.theme-swatch.active { border-color:var(--accent); }
/* Integrations */
.int-grid        { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.int-card        { border:1px solid var(--border); background:var(--panel-bg); padding:24px; display:flex; flex-direction:column; gap:12px; transition:border-color .2s; }
.int-card:hover  { border-color:var(--border-hi); }
.int-card-hd     { display:flex; align-items:center; gap:10px; }
.int-card-name   { font-family:var(--font-h); font-size:0.88rem; font-weight:700; letter-spacing:.06em; }
.int-card-status { font-size:0.72rem; font-family:var(--font-m); letter-spacing:.1em; padding:2px 8px; border:1px solid var(--border); color:var(--text-muted); margin-left:auto; }
.int-card-status.connected { border-color:#22c55e; color:#22c55e; }
.int-card-coming { opacity:.45; pointer-events:none; }
.int-card-desc   { font-size:0.82rem; color:var(--text-muted); line-height:1.6; }

/* ═══════════════════════════════════════════════════════════════
   PRICING PAGE
═══════════════════════════════════════════════════════════════ */
.pricing-toggle-wrap { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:48px; font-size:0.82rem; }
.billing-lbl { color:var(--text-muted); transition:color .2s; }
.billing-lbl.active { color:var(--accent); font-weight:600; }
.billing-save { background:var(--accent); color:var(--bg); font-size:0.65rem; font-family:var(--font-m); padding:2px 8px; letter-spacing:.08em; }
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:780px) { .pricing-grid { grid-template-columns:1fr; } }
.pricing-card { border:1px solid var(--border); background:var(--panel-bg); padding:36px 28px; display:flex; flex-direction:column; gap:10px; position:relative; }
.pricing-card.featured { border-color:var(--border-hi); box-shadow:var(--glow-hi); }
.pricing-badge { position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--accent); color:var(--bg); padding:4px 18px; font-size:0.66rem; font-family:var(--font-m); letter-spacing:.12em; white-space:nowrap; }
.pricing-tier { font-size:0.68rem; font-family:var(--font-m); letter-spacing:.14em; color:var(--text-muted); margin-bottom:4px; }
.pricing-name { font-family:var(--font-h); font-size:1.5rem; font-weight:700; }
.pricing-tagline { font-size:0.8rem; color:var(--text-muted); min-height:36px; }
.pricing-divider { height:1px; background:var(--border); margin:8px 0; }
.pricing-price-row { display:flex; align-items:baseline; gap:4px; margin:4px 0; }
.pricing-price { font-size:2.6rem; font-family:var(--font-h); font-weight:700; color:var(--accent); line-height:1; }
.pricing-per { font-size:0.75rem; color:var(--text-muted); }
.pricing-feats { display:flex; flex-direction:column; gap:9px; margin:16px 0; flex:1; }
.pricing-feat { display:flex; align-items:flex-start; gap:9px; font-size:0.82rem; line-height:1.4; }
.pricing-feat-ck { color:var(--accent); flex-shrink:0; margin-top:1px; }
.pricing-feat-xx { color:var(--text-muted); opacity:.35; flex-shrink:0; margin-top:1px; }
.pricing-feat.dim { color:var(--text-muted); }
/* Compare table */
.compare-wrap { overflow-x:auto; margin-top:60px; }
.compare-table { width:100%; border-collapse:collapse; font-size:0.82rem; }
.compare-table th, .compare-table td { padding:13px 16px; border-bottom:1px solid var(--border); text-align:center; }
.compare-table th:first-child, .compare-table td:first-child { text-align:left; min-width:200px; }
.compare-table th { font-family:var(--font-m); font-size:0.7rem; letter-spacing:.1em; color:var(--text-muted); }
.compare-table td:not(:first-child) { font-family:var(--font-m); }
.ct-ck { color:var(--accent); font-size:1rem; }
.ct-xx { color:var(--text-muted); opacity:.3; }
/* Pricing FAQ */
.pricing-faq { display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.pfaq-item { border:1px solid var(--border); background:var(--panel-bg); padding:20px 24px; cursor:pointer; }
.pfaq-q { font-size:0.88rem; font-weight:600; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pfaq-a { font-size:0.83rem; color:var(--text-muted); line-height:1.7; margin-top:12px; display:none; }
.pfaq-item.open .pfaq-a { display:block; }
.pfaq-arrow { font-size:0.9rem; transition:transform .2s; flex-shrink:0; }
.pfaq-item.open .pfaq-arrow { transform:rotate(180deg); }

/* ═══════════════════════════════════════════════════════════════
   ROI CALCULATOR
═══════════════════════════════════════════════════════════════ */
.roi-progress { display:flex; gap:4px; margin-bottom:40px; }
.roi-prog-step { flex:1; height:3px; background:var(--surface2,#1a1a1a); border-radius:2px; transition:background .4s; }
.roi-prog-step.done { background:var(--accent); }
.roi-step { display:none; animation:fadeIn .3s ease; }
.roi-step.active { display:block; }
.roi-industry-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:24px 0; }
@media(max-width:600px) { .roi-industry-grid { grid-template-columns:repeat(2,1fr); } }
.roi-ind-card { border:1px solid var(--border); background:var(--panel-bg); padding:20px 14px; text-align:center; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.roi-ind-card:hover { border-color:var(--border-hi); box-shadow:var(--glow); }
.roi-ind-card.selected { border-color:var(--border-hi); box-shadow:var(--glow); background:color-mix(in srgb, var(--accent) 8%, var(--panel-bg)); }
.roi-ind-icon { font-size:1.6rem; display:block; margin-bottom:8px; }
.roi-ind-name { font-size:0.82rem; font-weight:600; }
.roi-slider-wrap { margin:24px 0; }
.roi-slider { width:100%; accent-color:var(--accent); cursor:pointer; }
.roi-slider-labels { display:flex; justify-content:space-between; font-size:0.72rem; color:var(--text-muted); margin-top:4px; font-family:var(--font-m); }
.roi-workflow-grid { display:flex; flex-direction:column; gap:10px; margin:20px 0; }
.roi-wf-item { display:flex; align-items:center; gap:12px; border:1px solid var(--border); padding:14px 18px; cursor:pointer; transition:border-color .15s; }
.roi-wf-item:hover { border-color:var(--border-hi); }
.roi-wf-item.selected { border-color:var(--border-hi); background:color-mix(in srgb, var(--accent) 6%, var(--panel-bg)); }
.roi-wf-cb { width:16px; height:16px; accent-color:var(--accent); flex-shrink:0; }
.roi-wf-label { font-size:0.85rem; }
.roi-result-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:28px 0; }
.roi-result-card { border:1px solid var(--border); background:var(--panel-bg); padding:24px; }
.roi-result-val { font-size:2.4rem; font-family:var(--font-h); font-weight:700; color:var(--accent); line-height:1; }
.roi-result-lbl { font-size:0.72rem; color:var(--text-muted); font-family:var(--font-m); margin-top:6px; letter-spacing:.06em; }
.roi-nav { display:flex; justify-content:space-between; align-items:center; margin-top:32px; gap:12px; }

/* ═══════════════════════════════════════════════════════════════
   MISSION LOGS
═══════════════════════════════════════════════════════════════ */
.logs-filter-bar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:32px; }
.log-filter-btn { padding:6px 16px; border:1px solid var(--border); background:transparent; color:var(--text-muted); cursor:pointer; font-size:0.75rem; font-family:var(--font-m); letter-spacing:.06em; transition:color .15s, border-color .15s; }
.log-filter-btn:hover { color:var(--text); border-color:var(--border-hi); }
.log-filter-btn.active { border-color:var(--accent); color:var(--accent); }
.logs-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:24px; }
.log-card { border:1px solid var(--border); background:var(--panel-bg); display:flex; flex-direction:column; overflow:hidden; transition:border-color .2s, box-shadow .2s; }
.log-card:hover { border-color:var(--border-hi); box-shadow:var(--glow); }
.log-card-header { border-bottom:1px solid var(--border); padding:24px 24px 16px; }
.log-card-header svg { width:100%; height:auto; color:var(--accent); opacity:0.6; }
.log-card-body { padding:20px 24px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.log-cat { font-size:0.66rem; font-family:var(--font-m); letter-spacing:.14em; color:var(--accent); }
.log-title { font-family:var(--font-h); font-size:1rem; line-height:1.45; }
.log-excerpt { font-size:0.82rem; line-height:1.7; color:var(--text-muted); flex:1; }
.log-meta { display:flex; align-items:center; gap:12px; font-size:0.7rem; color:var(--text-muted); font-family:var(--font-m); margin-top:4px; }
/* Log article */
.log-article-wrap { max-width:720px; margin:0 auto; }
.log-article-meta { display:flex; align-items:center; gap:14px; margin-bottom:36px; flex-wrap:wrap; }
.log-article-body h2 { font-size:1.12rem; margin:36px 0 14px; color:var(--text); font-family:var(--font-h); }
.log-article-body h3 { font-size:0.95rem; margin:24px 0 10px; color:var(--accent); font-family:var(--font-m); letter-spacing:.06em; }
.log-article-body p { font-size:0.9rem; line-height:1.9; color:var(--text-muted); margin-bottom:20px; }
.log-article-body ul { margin:0 0 20px 20px; }
.log-article-body li { font-size:0.88rem; line-height:1.8; color:var(--text-muted); }
.log-article-body code { font-family:var(--font-m); background:var(--surface); padding:2px 6px; font-size:0.82em; border:1px solid var(--border); }
.log-article-body pre { background:var(--surface); padding:20px; font-family:var(--font-m); font-size:0.82rem; line-height:1.7; overflow-x:auto; margin:24px 0; border:1px solid var(--border); }
.log-related { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:40px; }
.log-related-card { border:1px solid var(--border); background:var(--panel-bg); padding:20px; }

/* ═══════════════════════════════════════════════════════════════
   ONBOARDING WIZARD
═══════════════════════════════════════════════════════════════ */
.wiz-shell { max-width:700px; margin:0 auto; }
.wiz-progress { display:flex; gap:4px; margin-bottom:12px; }
.wiz-prog-seg { flex:1; height:3px; background:var(--surface2,#1a1a1a); border-radius:2px; transition:background .35s; }
.wiz-prog-seg.done { background:var(--accent); }
.wiz-step-label { font-size:0.7rem; font-family:var(--font-m); color:var(--text-muted); letter-spacing:.1em; margin-bottom:32px; }
.wiz-step { display:none; animation:fadeIn .3s ease; }
.wiz-step.active { display:block; }
.wiz-choices { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:20px 0; }
@media(max-width:560px) { .wiz-choices { grid-template-columns:repeat(2,1fr); } }
.wz-choice { border:1px solid var(--border); background:var(--panel-bg); padding:22px 14px; text-align:center; cursor:pointer; transition:border-color .15s, box-shadow .15s; display:flex; flex-direction:column; align-items:center; gap:8px; }
.wz-choice:hover { border-color:var(--border-hi); box-shadow:var(--glow); }
.wz-choice.selected { border-color:var(--border-hi); box-shadow:var(--glow); background:color-mix(in srgb, var(--accent) 8%, var(--panel-bg)); }
.wz-choice-icon { font-size:1.5rem; }
.wz-choice-lbl { font-size:0.82rem; font-weight:600; }
.wz-choice-desc { font-size:0.72rem; color:var(--text-muted); line-height:1.4; }
.wiz-task-list { display:flex; flex-direction:column; gap:10px; margin:20px 0; }
.wiz-task-item { display:flex; align-items:center; gap:12px; border:1px solid var(--border); padding:14px 18px; cursor:pointer; transition:border-color .15s; }
.wiz-task-item:hover { border-color:var(--border-hi); }
.wiz-task-item.selected { border-color:var(--border-hi); background:color-mix(in srgb, var(--accent) 6%, var(--panel-bg)); }
.wiz-task-cb { width:16px; height:16px; accent-color:var(--accent); pointer-events:none; }
.wiz-nav { display:flex; justify-content:space-between; align-items:center; margin-top:28px; gap:12px; }
.wiz-reveal { border:1px solid var(--border-hi); background:var(--panel-bg); padding:40px 36px; box-shadow:var(--glow-hi); text-align:center; animation:fadeIn .7s ease; }
.wiz-agent-card { border:1px solid var(--border); background:var(--surface); padding:24px; margin:24px 0; text-align:left; }
.wiz-agent-name { font-family:var(--font-h); font-size:1.3rem; color:var(--accent); margin-bottom:8px; }
.wiz-agent-tasks { display:flex; flex-direction:column; gap:6px; margin-top:14px; }
.wiz-agent-task { display:flex; align-items:center; gap:8px; font-size:0.82rem; color:var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════
   COMMUNITY BLUEPRINTS EXTENSION
═══════════════════════════════════════════════════════════════ */
.bp-comm-meta { display:flex; align-items:center; gap:12px; font-size:0.75rem; color:var(--text-muted); flex-wrap:wrap; }
.bp-stars { color:var(--accent); font-size:0.82rem; letter-spacing:-1px; }
.bp-author-badge { font-size:0.66rem; font-family:var(--font-m); letter-spacing:.08em; background:var(--surface); padding:2px 8px; border:1px solid var(--border); color:var(--text-muted); white-space:nowrap; }
.bp-votes-btn { display:inline-flex; align-items:center; gap:5px; padding:4px 12px; border:1px solid var(--border); background:transparent; cursor:pointer; font-size:0.75rem; color:var(--text-muted); font-family:var(--font-b); transition:color .15s, border-color .15s; line-height:1; }
.bp-votes-btn:hover, .bp-votes-btn.voted { color:var(--accent); border-color:var(--accent); }
.bp-submit-strip { border:1px dashed var(--border-hi); background:var(--panel-bg); padding:36px; text-align:center; margin-top:32px; }

/* ═══════════════════════════════════════════════════════
   ATM MOBILE APP PAGE
═══════════════════════════════════════════════════════ */
.atm-app-split { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
@media (max-width:860px) { .atm-app-split { grid-template-columns:1fr; } }
.atm-app-copy { display:flex; flex-direction:column; gap:0; }
.atm-phone-wrap { display:flex; justify-content:center; align-items:center; }
.atm-phone-svg { width:100%; max-width:300px; filter:drop-shadow(0 24px 48px color-mix(in srgb,var(--accent) 18%,transparent)); }
.platform-badges { display:flex; gap:8px; flex-wrap:wrap; margin:20px 0 28px; }
.platform-badge { font-size:0.65rem; font-family:var(--font-m); letter-spacing:.14em; padding:4px 12px; border:1px solid var(--border); color:var(--text-muted); background:var(--panel-bg); }
.app-dl-btns { display:flex; gap:12px; flex-wrap:wrap; }
.app-dl-btn { display:flex; align-items:center; gap:11px; padding:12px 20px; border:1px solid var(--border); background:var(--panel-bg); text-decoration:none; color:var(--text); transition:border-color .2s, box-shadow .2s; min-width:160px; }
.app-dl-btn:hover { border-color:var(--border-hi); box-shadow:var(--glow); color:var(--text); }
.app-dl-btn svg { flex-shrink:0; color:var(--accent); }
.app-dl-btn-label { display:flex; flex-direction:column; gap:1px; }
.app-dl-btn-sub { font-size:0.6rem; font-family:var(--font-m); letter-spacing:.08em; color:var(--text-muted); text-transform:uppercase; }
.app-dl-btn-name { font-size:0.88rem; font-family:var(--font-h); font-weight:700; line-height:1.2; }
.app-feat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; margin-top:36px; }
.app-feat-card { border:1px solid var(--border); background:var(--panel-bg); padding:22px 20px; display:flex; flex-direction:column; gap:10px; transition:border-color .2s,box-shadow .2s; }
.app-feat-card:hover { border-color:var(--border-hi); box-shadow:var(--glow); }
.app-feat-icon { color:var(--accent); display:flex; }
.app-feat-num { font-size:0.62rem; font-family:var(--font-m); letter-spacing:.14em; color:var(--text-muted); }
.app-feat-title { font-family:var(--font-h); font-size:0.88rem; font-weight:700; line-height:1.3; }
.app-feat-desc { font-size:0.78rem; line-height:1.65; color:var(--text-muted); }
.platform-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px; }
@media (max-width:640px) { .platform-grid { grid-template-columns:1fr; } }
.platform-card { border:1px solid var(--border); background:var(--panel-bg); padding:32px 24px; display:flex; flex-direction:column; gap:14px; align-items:center; text-align:center; }
.platform-card.featured { border-color:var(--border-hi); box-shadow:var(--glow); }
.platform-card-icon { width:48px; height:48px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); color:var(--accent); }
.platform-card-name { font-family:var(--font-h); font-size:1rem; font-weight:700; }
.platform-card-sub { font-size:0.78rem; color:var(--text-muted); line-height:1.6; }

/* ─────────────────────────────────────────────────────────────────
   NAV HUD DROPDOWN
───────────────────────────────────────────────────────────────── */
.nav-hud-btn {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--panel-bg); cursor: pointer;
  color: var(--text-muted); font-family: var(--font-m); font-size: 0.5rem; letter-spacing: .1em;
  flex-shrink: 0; transition: border-color .2s, color .2s; margin-right: 8px;
}
.nav-hud-btn:hover, .nav-hud-btn.active { border-color: var(--border-hi); color: var(--accent); }
.nav-hud-panel {
  position: absolute; top: 100%; right: 0;
  background: var(--nav-bg); border: 1px solid var(--border); border-top: none;
  backdrop-filter: blur(18px); padding: 10px 14px;
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; z-index: -1;
  transform: translateY(-100%); opacity: 0; pointer-events: none;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-hud-panel.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.hud-row { display: flex; align-items: center; gap: 5px; }
.hud-row-sep { height: 1px; background: var(--border); margin: 0; }
.nav-hud-panel .dock-lbl { font-size: 0.55rem; margin-right: 2px; padding-right: 6px; }
.nav-hud-panel .db { width: 18px; height: 18px; }
.nav-hud-panel .fb { width: 18px; height: 18px; font-size: 9px; }

/* ── Font switcher buttons ─────────────────────────── */
.fb {
  width: 28px; height: 28px;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-muted); cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  transition: all 0.15s; position: relative;
}
.fb:hover { border-color: var(--border-hi); color: var(--text); background: rgba(255,255,255,0.03); }
.fb.active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.fb::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--panel-bg); border: 1px solid var(--border);
  color: var(--text); font-size: 0.65rem; font-family: var(--font-m);
  letter-spacing: .06em; white-space: nowrap; padding: 3px 8px;
  pointer-events: none; opacity: 0; transition: opacity 0.15s;
}
.fb:hover::after { opacity: 1; }
.fb-auto   { font-family: var(--font-m); font-size: 10px; }
.fb-clean  { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; }
.fb-space  { font-family: 'Orbitron', sans-serif; font-size: 7px; font-weight: 700; }
.fb-tac    { font-family: 'Rajdhani', sans-serif; font-size: 12px; font-weight: 700; }
.fb-code   { font-family: 'Fira Code', monospace; font-size: 9px; }
.fb-serif  { font-family: 'Playfair Display', serif; font-size: 11px; font-style: italic; }
.fb-mono   { font-family: 'Share Tech Mono', monospace; font-size: 10px; }
.fb-pixel  { font-family: 'Press Start 2P', monospace; font-size: 5px; }

/* ── Font override layer (comes after theme vars — same specificity, wins by order) ── */
[data-font="clean"]  { --font-h: 'Inter', sans-serif;           --font-b: 'Inter', sans-serif;           --font-m: 'Fira Code', monospace; }
[data-font="space"]  { --font-h: 'Orbitron', sans-serif;        --font-b: 'Inter', sans-serif;           --font-m: 'Fira Code', monospace; }
[data-font="tac"]    { --font-h: 'Rajdhani', sans-serif;        --font-b: 'Rajdhani', sans-serif;        --font-m: 'Fira Code', monospace; }
[data-font="code"]   { --font-h: 'Fira Code', monospace;        --font-b: 'Fira Code', monospace;        --font-m: 'Fira Code', monospace; }
[data-font="serif"]  { --font-h: 'Playfair Display', serif;     --font-b: 'Playfair Display', serif;     --font-m: 'Share Tech Mono', monospace; }
[data-font="mono"]   { --font-h: 'Share Tech Mono', monospace;  --font-b: 'Share Tech Mono', monospace;  --font-m: 'Share Tech Mono', monospace; }
[data-font="pixel"]  { --font-h: 'Press Start 2P', monospace;   --font-b: 'Press Start 2P', monospace;   --font-m: 'Press Start 2P', monospace; }

/* ─────────────────────────────────────────────────────────────────
   TCG CARD — TRADING CARD ASPECT RATIO (5:7 ≈ 2.5 × 3.5 in)
───────────────────────────────────────────────────────────────── */
/* Uniform card height set on .tcg-card (380px) — no aspect-ratio needed */
/* Featured grids on index: tighter responsive columns */
.tcg-grid-featured { display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); }
@media (max-width: 640px) {
  .tcg-grid-featured { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tcg-grid           { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tcg-card           { min-width: 0; }
}

/* ─────────────────────────────────────────────────────────────────
   AUTH PAGE (account.html)
───────────────────────────────────────────────────────────────── */
.auth-card { width:100%; max-width:440px; border:1px solid var(--border); background:var(--panel-bg); padding:36px 40px; display:flex; flex-direction:column; gap:0; }
@media (max-width:480px) { .auth-card { padding:28px 22px; } }

.auth-tabs { display:flex; border-bottom:1px solid var(--border); margin-bottom:28px; }
.auth-tab { flex:1; padding:10px 0; background:none; border:none; font-family:var(--font-m); font-size:0.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); cursor:pointer; transition:color .2s; border-bottom:2px solid transparent; margin-bottom:-1px; }
.auth-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.auth-tab:hover { color:var(--text); }

.auth-form { display:flex; flex-direction:column; gap:18px; }
.auth-field { display:flex; flex-direction:column; gap:6px; }
.auth-label { font-size:0.72rem; font-family:var(--font-m); letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); display:flex; align-items:center; justify-content:space-between; }
.auth-forgot { background:none; border:none; color:var(--text-muted); font-size:0.68rem; font-family:var(--font-b); cursor:pointer; padding:0; text-decoration:underline; text-underline-offset:3px; }
.auth-forgot:hover { color:var(--accent); }

.auth-input-wrap { position:relative; display:flex; align-items:center; }
.auth-input-icon { position:absolute; left:12px; width:15px; height:15px; color:var(--text-muted); flex-shrink:0; stroke:currentColor; stroke-width:2; fill:none; }
.auth-input { width:100%; padding:10px 38px 10px 36px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-family:var(--font-b); font-size:0.88rem; outline:none; transition:border-color .2s; -webkit-appearance:none; }
.auth-input:focus { border-color:var(--border-hi); box-shadow:var(--glow); }
.auth-input::placeholder { color:var(--text-muted); }
.auth-eye { position:absolute; right:10px; background:none; border:none; cursor:pointer; color:var(--text-muted); padding:4px; display:flex; align-items:center; }
.auth-eye:hover { color:var(--accent); }

.auth-submit { width:100%; margin-top:4px; display:flex; align-items:center; justify-content:center; }
.auth-legal { font-size:0.7rem; color:var(--text-muted); text-align:center; line-height:1.7; margin-top:6px; }

.auth-divider { display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--text-muted); font-size:0.72rem; font-family:var(--font-m); letter-spacing:.08em; }
.auth-divider::before, .auth-divider::after { content:''; flex:1; height:1px; background:var(--border); }

.auth-google-btn { display:flex; align-items:center; justify-content:center; gap:10px; padding:11px 20px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-family:var(--font-b); font-size:0.85rem; cursor:pointer; transition:border-color .2s, box-shadow .2s; width:100%; }
.auth-google-btn:hover { border-color:var(--border-hi); box-shadow:var(--glow); }

.auth-msg { padding:12px 16px; font-size:0.82rem; margin-bottom:16px; }
.auth-msg-error { background:color-mix(in srgb,#e74c3c 10%,var(--surface)); border:1px solid #e74c3c; color:#e74c3c; }
.auth-msg-success { background:color-mix(in srgb,#27ae60 10%,var(--surface)); border:1px solid #27ae60; color:#27ae60; }

/* ─────────────────────────────────────────────────────────────────
   DASHBOARD (dashboard.html)
───────────────────────────────────────────────────────────────── */
.dash-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; padding-bottom:32px; border-bottom:1px solid var(--border); }
.dash-welcome { display:flex; align-items:center; gap:18px; }
.dash-avatar { width:52px; height:52px; border:2px solid var(--accent); background:var(--surface2); display:flex; align-items:center; justify-content:center; font-family:var(--font-h); font-size:1.3rem; font-weight:700; color:var(--accent); flex-shrink:0; }
.dash-greeting { font-family:var(--font-h); font-size:clamp(1.2rem,3vw,1.6rem); font-weight:700; margin:0; }
.dash-header-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.dash-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:860px) { .dash-stats { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px) { .dash-stats { grid-template-columns:1fr 1fr; } }
.dash-stat { padding:24px 22px; text-align:center; }
.dash-stat-num { font-family:var(--font-h); font-size:2rem; font-weight:700; color:var(--accent); line-height:1; }
.dash-stat-label { font-size:0.72rem; font-family:var(--font-m); letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-top:8px; }
.dash-stat-sub { font-size:0.68rem; color:var(--text-muted); margin-top:6px; }

.dash-grid { display:grid; grid-template-columns:1fr 340px; gap:20px; align-items:start; }
@media (max-width:1024px) { .dash-grid { grid-template-columns:1fr; } }
.dash-col-main { display:flex; flex-direction:column; gap:0; }
.dash-col-side { display:flex; flex-direction:column; gap:0; }

/* Onboarding checklist */
.dash-checklist { display:flex; flex-direction:column; gap:10px; }
.dash-check-item { display:flex; align-items:flex-start; gap:14px; padding:14px 16px; border:1px solid var(--border); background:var(--surface); cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.dash-check-item:hover { border-color:var(--border-hi); box-shadow:var(--glow); }
.dash-check-item.dash-check-done { opacity:.6; cursor:default; }
.dash-check-item.dash-check-done:hover { border-color:var(--border); box-shadow:none; }
.dash-check-icon { width:28px; height:28px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:0.72rem; font-family:var(--font-m); color:var(--text-muted); }
.dash-check-item.dash-check-done .dash-check-icon { background:var(--accent); border-color:var(--accent); color:var(--bg); }
.dash-check-num { color:var(--text-muted); }
.dash-check-body { flex:1; }
.dash-check-title { font-size:0.88rem; font-weight:600; margin-bottom:3px; }
.dash-check-desc { font-size:0.78rem; color:var(--text-muted); line-height:1.5; }

/* Agent list */
.dash-empty-state { display:flex; flex-direction:column; align-items:center; padding:40px 20px; text-align:center; }
.dash-agent-item { display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--border); background:var(--surface); margin-bottom:8px; }
.dash-agent-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.dash-agent-dot.running { background:#27ae60; box-shadow:0 0 8px #27ae60; }
.dash-agent-dot.pending { background:#f39c12; }
.dash-agent-dot.stopped { background:var(--text-muted); }
.dash-agent-name { font-size:0.88rem; font-weight:600; flex:1; }
.dash-agent-status { font-size:0.68rem; font-family:var(--font-m); letter-spacing:.1em; color:var(--text-muted); }

/* Quick actions */
.dash-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.dash-action-btn { display:flex; flex-direction:column; align-items:center; gap:8px; padding:18px 12px; border:1px solid var(--border); background:var(--surface); text-decoration:none; color:var(--text); font-size:0.72rem; font-family:var(--font-m); letter-spacing:.08em; text-transform:uppercase; transition:border-color .15s, box-shadow .15s; }
.dash-action-btn:hover { border-color:var(--border-hi); box-shadow:var(--glow); color:var(--accent); }
.dash-action-btn .icon { width:20px; height:20px; }

/* Activity feed */
.dash-activity { display:flex; flex-direction:column; gap:8px; max-height:300px; overflow-y:auto; }
.dash-activity-item { display:flex; gap:10px; font-size:0.78rem; align-items:flex-start; }
.dash-activity-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); margin-top:5px; flex-shrink:0; }
.dash-activity-text { flex:1; color:var(--text-muted); line-height:1.5; }
.dash-activity-time { font-family:var(--font-m); font-size:0.65rem; color:var(--text-muted); white-space:nowrap; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE-FIRST — COMPREHENSIVE RESPONSIVE ADDITIONS
   Three standard breakpoints: 768px · 640px · 480px
════════════════════════════════════════════════════════════════ */

/* ── Index page: new utility grid classes (replaces inline styles) ── */
.proof-nums-grid    { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.pillars-grid       { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.academy-tracks-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }

@media (max-width:768px) {
  .proof-nums-grid     { grid-template-columns:repeat(2,1fr); }
  .pillars-grid        { grid-template-columns:1fr; }
  .academy-tracks-grid { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  .proof-nums-grid { grid-template-columns:1fr 1fr; }
}

/* ── Fleet ───────────────────────────────────────────────────── */
@media (max-width:640px) { .fleet-grid { grid-template-columns:1fr; } }
@media (max-width:480px) { .fleet-card-stats { grid-template-columns:1fr 1fr; } }

/* ── Blueprint library ───────────────────────────────────────── */
@media (max-width:640px) { .bp-lib-grid { grid-template-columns:1fr; } }

/* ── Integrations & modules ──────────────────────────────────── */
@media (max-width:640px) { .int-grid { grid-template-columns:1fr; } }
@media (max-width:560px) { .modules-grid { grid-template-columns:1fr; } }

/* ── ROI calculator result grid ──────────────────────────────── */
@media (max-width:600px) { .roi-result-grid { grid-template-columns:1fr; } }

/* ── Mission Logs ─────────────────────────────────────────────── */
@media (max-width:640px) { .logs-grid { grid-template-columns:1fr; } }
@media (max-width:600px) { .log-related { grid-template-columns:1fr; } }

/* ── POS grid (ATM page point-of-sale section) ───────────────── */
@media (max-width:480px) { .pos-grid { grid-template-columns:1fr 1fr; } }

/* ── tel-bar: prevent text overflow on very narrow screens ────── */
@media (max-width:480px) {
  .tel-bar { font-size:0.52rem; letter-spacing:.04em; }
  .tel-sep { margin:0 6px; }
}

/* ── Inner padding on mobile ─────────────────────────────────── */
@media (max-width:480px) {
  .inner { padding:0 16px; }
  .sec   { padding:56px 0; }
}

/* ── Page-level horizontal overflow guard ────────────────────── */
body { overflow-x:hidden; }

/* ── Icon animation classes ───────────────────────────────────── */
.icon-spin  { animation:icon-rotate 8s linear infinite; transform-box:fill-box; transform-origin:center; }
.icon-pulse-beat { animation:icon-pulse-beat 2.2s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.icon-radar-sweep { animation:icon-rotate 4s linear infinite; transform-box:fill-box; transform-origin:center; }
.icon-signal-wave { animation:icon-signal-wave 1.8s ease-in-out infinite; }
.icon-trace { stroke-dasharray:120; stroke-dashoffset:120; animation:icon-trace-draw 1.2s ease forwards; }

@keyframes icon-rotate       { to { transform:rotate(360deg); } }
@keyframes icon-pulse-beat   { 0%,100%{transform:scale(1);opacity:1} 45%{transform:scale(1.18);opacity:.75} 55%{transform:scale(1.18);opacity:.75} }
@keyframes icon-signal-wave  { 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(1.3)} }
@keyframes icon-trace-draw   { to { stroke-dashoffset:0; } }

/* Blueprint circuit canvas */
#bp-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.sec-with-canvas { position:relative; overflow:hidden; }
.sec-with-canvas .inner { position:relative; z-index:1; }

/* Dispatch network canvas */
#dispatch-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; opacity:.7; }