/* =============================================================================
   ⚡ ZOTH STUDIO — MASTER CYBERPUNK VIDEO GAME HUD SYSTEM (v5.0 SOVEREIGN)
   =============================================================================
   Architectural Blueprint & Whiteboard Reference:
   
   1. TOP HEADER (54px fixed):
      - Left: Logo '⚡ ZOTH STUDIO' + Help button '(?)' + Deck Toggle
      - Center: Real-Time Cyber Audio Oscilloscope & Frequency Spectrum Bar
      - Right: '[ PORTS ]', '[ TIME ]', '[ THEMES ]', '[ TOOL MGR ]'
   
   2. LEFT OPERATIONS & TELEMETRY DECK (340px-380px fixed width, full height):
      - 'ACTIVE AGENTS' roster with avatar glow auras, domain chips, and pulsing beacons
      - 'POLAR RADAR & SENSORS' tactical polar sweep canvas with target blips & range rings
      - 'MEMORY GRAPH' mini canvas / synaptic telemetry card with live node flow
      - 'COMMAND LINE' interactive terminal REPL panel with prompt and output
      - 'MESSAGE LOG' real-time event & message stream
      - '6 SACRED MATH PILLARS' live mathematical telemetry grid:
        1. Category Sheaves (Sheaf Topos E)
        2. Info Geometry (Fisher-Rao Metric g_ij)
        3. STDP Plasticity (Spike Timing Plasticity Δw)
        4. Shannon Entropy (Information Theory H(X))
        5. KAN B-Splines (Kolmogorov-Arnold Network Φ)
        6. Hopfield Recall (Attractor Energy E)
   
   3. CENTER STAGE (Dynamic Modular Workspace & Split-Screen View):
      - Stage Header: Tool Name, Taxonomy Tags, Aspect Ratio Pills (16:9, 4:3, 9:16, 1:1),
        Stage History Navigation (< >), Resolution Badges (4K UHD, 1080P),
        Actions: '[ SPLIT ]', '[ OMNI POST ]', '[ FULLSCREEN ]', '[ DETACH ↗ ]'
      - Dual-Stage Split Screen Viewport (.hud-stage-split, divider, left/right panes)
      - Reticle overlay with micro-scale crosshairs, compass ticks, and glowing bolts
   
   4. BOTTOM QUICK-DOCK (46px fixed):
      - Quick launch tabs: '[ SWARM ]', '[ MEMORY ]', '[ WEB GEN ]', '[ PETS ]', '[ VAULT ]'
      - Live dock telemetry badges and link monitors
   
   5. ZERO ROOT SCROLL COCKPIT:
      - 100vh / 100dvh fixed desktop cockpit, overflow hidden on body/root.
   
   6. 4 COMPLETE HIGH-CONTRAST THEMES:
      - 'dark'   : Midnight Void (Obsidian #030408, Neon Cyan #00f0ff, Gold #fbbf24)
      - 'light'  : Solar Light (Pure Crisp #ffffff, Dark Slate #0f172a, Cobalt #0071e3)
      - 'matrix' : Phosphor CRT (Pure Black #000000, Radioactive Green #00ff66)
      - 'gold'   : Hermetic Gold (Bronze-Black #050300, 24K Alchemical Gold #ffd700)
   
   7. HOLOGRAPHIC SHADER & TACTICAL ATMOSPHERE:
      - Holographic grid backdrop with drifting dust motes (.hud-holo-backdrop, .hud-dust-motes)
      - CRT curvature vignette & scanline flicker (.hud-crt-fx)
      - RGB chromatic aberration glitch channels (.hud-glitch-active)
      - Animated glowing energy tracks & high-voltage meter shimmers
   ============================================================================= */

/* =============================================================================
   1. Dynamic Font Imports for Cyberpunk HUD Aesthetics
   ============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;900&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=JetBrains+Mono:wght@400;500;600;700;800&family=Orbitron:wght@500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Share+Tech+Mono&family=Syne:wght@700;800;900&display=swap');

/* =============================================================================
   2. Theme Color Palettes & CSS Custom Properties (4 Complete Themes)
   ============================================================================= */

/* 2.1 Dark Void Theme (Default Obsidian / Neon Cyan & Amber Gold) */
:root,
html[data-theme="dark"],
html.theme-dark,
body[data-theme="dark"],
body.theme-dark {
  --hud-theme: "dark";
  color-scheme: dark;

  /* Backgrounds */
  --hud-bg: #030408;
  --hud-bg-elevated: #060914;
  --hud-deck-bg: rgba(6, 9, 20, 0.94);
  --hud-card-bg: rgba(10, 15, 32, 0.88);
  --hud-card-solid: #0a0f20;
  --hud-header-bg: rgba(4, 6, 14, 0.96);
  --hud-dock-bg: rgba(4, 6, 14, 0.96);
  --hud-viewport-bg: #020306;
  --hud-input-bg: #040712;

  /* High-Contrast Cyberpunk Palette & Edgerunners Signature Tokens */
  --hud-cyan: #00f0ff;
  --hud-cyan-soft: #38bdf8;
  --hud-gold: #fbbf24;
  --hud-gold-bright: #ffd700;
  --hud-green: #00ff66;
  --hud-green-glow: rgba(0, 255, 102, 0.35);
  --hud-magenta: #ff007f;
  --hud-violet: #a855f7;
  --hud-red: #ff3366;
  --hud-blue: #0088ff;
  --hud-orange: #ff7700;

  /* Edgerunners Signature Color Tokens */
  --kiroshi-yellow: #ffe600;
  --kiroshi-yellow-glow: rgba(255, 230, 0, 0.45);
  --arasaka-red: #ff0055;
  --arasaka-red-glow: rgba(255, 0, 85, 0.5);
  --sandevistan-green: #00ff66;
  --sandevistan-green-glow: rgba(0, 255, 102, 0.45);
  --cyber-cyan: #00f0ff;
  --cyber-cyan-glow: rgba(0, 240, 255, 0.4);
  --deep-void: #030712;
  --edgerunner-yellow: #ffe600;
  --edgerunner-red: #ff0055;
  --edgerunner-green: #00ff66;
  --edgerunner-cyan: #00f0ff;
  --edgerunner-void: #030712;
  --optic-ladder-color: rgba(255, 230, 0, 0.75);
  --optic-reticle-color: rgba(0, 240, 255, 0.85);
  --optic-lock-color: #ff0055;

  /* 6 Sacred Math Pillar Colors */
  --hud-pillar-1: #00f0ff; /* Sheaves - Cyan */
  --hud-pillar-2: #c084fc; /* Info Geometry - Violet */
  --hud-pillar-3: #00ff66; /* STDP Plasticity - Emerald */
  --hud-pillar-4: #fbbf24; /* Shannon Entropy - Amber Gold */
  --hud-pillar-5: #ff3366; /* KAN B-Splines - Crimson Flame */
  --hud-pillar-6: #38bdf8; /* Hopfield Recall - Azure Sky */

  /* Borders & Accents */
  --hud-border: rgba(0, 240, 255, 0.22);
  --hud-border-subtle: rgba(255, 255, 255, 0.08);
  --hud-border-strong: rgba(0, 240, 255, 0.7);
  --hud-border-glow: rgba(0, 240, 255, 0.35);
  --hud-border-gold: rgba(251, 191, 36, 0.5);
  --hud-border-green: rgba(0, 255, 102, 0.45);
  --hud-accent: #00f0ff;
  --hud-accent-glow: rgba(0, 240, 255, 0.32);

  /* Typography Colors */
  --hud-text-primary: #ffffff;
  --hud-text-body: #f1f5f9;
  --hud-text-secondary: #94a3b8;
  --hud-text-muted: #64748b;
  --hud-text-dim: #475569;
  --hud-text-on-accent: #02040a;

  /* Fonts */
  --hud-font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hud-font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  --hud-font-display: "Orbitron", "Syne", sans-serif;
  --hud-font-hud: "Orbitron", "JetBrains Mono", monospace;

  /* Dimensions */
  --hud-header-h: 54px;
  --hud-dock-h: 50px;
  --hud-deck-w: 380px;
  --hud-stage-header-h: 48px;

  /* Holographic Shader & Scanlines */
  --hud-holo-grid-color: rgba(0, 240, 255, 0.07);
  --hud-holo-beam: rgba(0, 240, 255, 0.15);
  --hud-scanline-color: rgba(0, 240, 255, 0.04);
  --hud-crt-curvature: rgba(0, 0, 0, 0.85);
  --hud-shadow-ambient: 0 10px 40px rgba(0, 0, 0, 0.85);
  --hud-shadow-glow: 0 0 24px rgba(0, 240, 255, 0.25);
  --hud-shadow-gold: 0 0 20px rgba(251, 191, 36, 0.25);
  --hud-shadow-green: 0 0 20px rgba(0, 255, 102, 0.25);

  /* Radar & Audio Oscilloscope */
  --hud-radar-sweep: rgba(0, 240, 255, 0.25);
  --hud-radar-ring: rgba(0, 240, 255, 0.18);
  --hud-scope-line: #00f0ff;
  --hud-scope-glow: rgba(0, 240, 255, 0.5);

  scrollbar-color: rgba(0, 240, 255, 0.35) rgba(4, 7, 16, 0.8);
}

/* 2.2 Solar Light Theme (Pure Crisp White / Swiss Architectural Cyber / Slate & Cobalt) */
html[data-theme="light"],
html.theme-light,
body[data-theme="light"],
body.theme-light {
  --hud-theme: "light";
  color-scheme: light;

  /* Backgrounds */
  --hud-bg: #f4f6fb;
  --hud-bg-elevated: #ffffff;
  --hud-deck-bg: rgba(255, 255, 255, 0.97);
  --hud-card-bg: rgba(255, 255, 255, 0.98);
  --hud-card-solid: #ffffff;
  --hud-header-bg: rgba(255, 255, 255, 0.98);
  --hud-dock-bg: rgba(255, 255, 255, 0.98);
  --hud-viewport-bg: #eef2f8;
  --hud-input-bg: #f8fafc;

  /* High-Contrast Solar Palette */
  --hud-cyan: #0071e3;
  --hud-cyan-soft: #0284c7;
  --hud-gold: #d97706;
  --hud-gold-bright: #b45309;
  --hud-green: #059669;
  --hud-green-glow: rgba(5, 150, 105, 0.2);
  --hud-magenta: #c026d3;
  --hud-violet: #7c3aed;
  --hud-red: #dc2626;
  --hud-blue: #2563eb;
  --hud-orange: #ea580c;

  /* Edgerunners Signature Color Tokens (Solar High-Visibility) */
  --kiroshi-yellow: #b45309;
  --kiroshi-yellow-glow: rgba(217, 119, 6, 0.3);
  --arasaka-red: #dc2626;
  --arasaka-red-glow: rgba(220, 38, 38, 0.35);
  --sandevistan-green: #059669;
  --sandevistan-green-glow: rgba(5, 150, 105, 0.3);
  --cyber-cyan: #0071e3;
  --cyber-cyan-glow: rgba(0, 113, 227, 0.25);
  --deep-void: #0f172a;
  --edgerunner-yellow: #d97706;
  --edgerunner-red: #dc2626;
  --edgerunner-green: #059669;
  --edgerunner-cyan: #0071e3;
  --edgerunner-void: #0f172a;
  --optic-ladder-color: rgba(217, 119, 6, 0.85);
  --optic-reticle-color: rgba(0, 113, 227, 0.85);
  --optic-lock-color: #dc2626;

  /* 6 Sacred Math Pillar Colors (Light Mode Adjusted) */
  --hud-pillar-1: #0071e3; /* Sheaves - Cobalt */
  --hud-pillar-2: #7c3aed; /* Info Geometry - Deep Violet */
  --hud-pillar-3: #059669; /* STDP Plasticity - Emerald */
  --hud-pillar-4: #d97706; /* Shannon Entropy - Amber */
  --hud-pillar-5: #dc2626; /* KAN B-Splines - Crimson */
  --hud-pillar-6: #0284c7; /* Hopfield Recall - Sapphire */

  /* Borders & Accents */
  --hud-border: rgba(15, 23, 42, 0.14);
  --hud-border-subtle: rgba(15, 23, 42, 0.08);
  --hud-border-strong: rgba(0, 113, 227, 0.6);
  --hud-border-glow: rgba(0, 113, 227, 0.2);
  --hud-border-gold: rgba(217, 119, 6, 0.45);
  --hud-border-green: rgba(5, 150, 105, 0.35);
  --hud-accent: #0071e3;
  --hud-accent-glow: rgba(0, 113, 227, 0.18);

  /* Typography Colors - WCAG AAA Compliant */
  --hud-text-primary: #0f172a;
  --hud-text-body: #1e293b;
  --hud-text-secondary: #475569;
  --hud-text-muted: #64748b;
  --hud-text-dim: #94a3b8;
  --hud-text-on-accent: #ffffff;

  /* Fonts */
  --hud-font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hud-font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;
  --hud-font-display: "Plus Jakarta Sans", "Orbitron", sans-serif;
  --hud-font-hud: "Plus Jakarta Sans", "IBM Plex Mono", monospace;

  /* Holographic Shader & Scanlines */
  --hud-holo-grid-color: rgba(15, 23, 42, 0.05);
  --hud-holo-beam: rgba(0, 113, 227, 0.08);
  --hud-scanline-color: rgba(15, 23, 42, 0.02);
  --hud-crt-curvature: rgba(15, 23, 42, 0.15);
  --hud-shadow-ambient: 0 4px 20px rgba(15, 23, 42, 0.08);
  --hud-shadow-glow: 0 0 16px rgba(0, 113, 227, 0.14);
  --hud-shadow-gold: 0 0 16px rgba(217, 119, 6, 0.14);
  --hud-shadow-green: 0 0 16px rgba(5, 150, 105, 0.14);

  /* Radar & Audio Oscilloscope */
  --hud-radar-sweep: rgba(0, 113, 227, 0.18);
  --hud-radar-ring: rgba(15, 23, 42, 0.12);
  --hud-scope-line: #0071e3;
  --hud-scope-glow: rgba(0, 113, 227, 0.35);

  scrollbar-color: rgba(15, 23, 42, 0.25) #f1f5f9;
}

/* 2.3 Matrix Theme (Phosphor CRT Terminal & Radioactive Green Glow) */
html[data-theme="matrix"],
html.theme-matrix,
body[data-theme="matrix"],
body.theme-matrix {
  --hud-theme: "matrix";
  color-scheme: dark;

  /* Backgrounds */
  --hud-bg: #000000;
  --hud-bg-elevated: #000a02;
  --hud-deck-bg: rgba(0, 12, 3, 0.96);
  --hud-card-bg: rgba(0, 16, 4, 0.92);
  --hud-card-solid: #000e03;
  --hud-header-bg: rgba(0, 8, 2, 0.98);
  --hud-dock-bg: rgba(0, 8, 2, 0.98);
  --hud-viewport-bg: #000000;
  --hud-input-bg: #000601;

  /* Matrix Phosphor Palette */
  --hud-cyan: #00ff66;
  --hud-cyan-soft: #33ff88;
  --hud-gold: #a3e635;
  --hud-gold-bright: #bef264;
  --hud-green: #00ff66;
  --hud-green-glow: rgba(0, 255, 102, 0.45);
  --hud-magenta: #00cc44;
  --hud-violet: #00aa33;
  --hud-red: #ff3344;
  --hud-blue: #00dd55;
  --hud-orange: #84cc16;

  /* Edgerunners Signature Color Tokens (Matrix Phosphor) */
  --kiroshi-yellow: #bef264;
  --kiroshi-yellow-glow: rgba(190, 242, 100, 0.45);
  --arasaka-red: #ff3344;
  --arasaka-red-glow: rgba(255, 51, 68, 0.5);
  --sandevistan-green: #00ff66;
  --sandevistan-green-glow: rgba(0, 255, 102, 0.55);
  --cyber-cyan: #33ff88;
  --cyber-cyan-glow: rgba(51, 255, 136, 0.45);
  --deep-void: #000000;
  --edgerunner-yellow: #bef264;
  --edgerunner-red: #ff3344;
  --edgerunner-green: #00ff66;
  --edgerunner-cyan: #33ff88;
  --edgerunner-void: #000000;
  --optic-ladder-color: rgba(190, 242, 100, 0.85);
  --optic-reticle-color: rgba(0, 255, 102, 0.9);
  --optic-lock-color: #ff3344;

  /* 6 Sacred Math Pillar Colors (Matrix Mode) */
  --hud-pillar-1: #00ff66; /* Sheaves - Phosphor Green */
  --hud-pillar-2: #33ff88; /* Info Geometry - Bright Matrix */
  --hud-pillar-3: #a3e635; /* STDP Plasticity - Lime Matrix */
  --hud-pillar-4: #bef264; /* Shannon Entropy - Gold Lime */
  --hud-pillar-5: #00dd55; /* KAN B-Splines - Cyber Mint */
  --hud-pillar-6: #10b981; /* Hopfield Recall - Emerald */

  /* Borders & Accents */
  --hud-border: rgba(0, 255, 102, 0.35);
  --hud-border-subtle: rgba(0, 255, 102, 0.14);
  --hud-border-strong: rgba(0, 255, 102, 0.85);
  --hud-border-glow: rgba(0, 255, 102, 0.45);
  --hud-border-gold: rgba(163, 230, 53, 0.55);
  --hud-border-green: rgba(0, 255, 102, 0.7);
  --hud-accent: #00ff66;
  --hud-accent-glow: rgba(0, 255, 102, 0.45);

  /* Typography Colors */
  --hud-text-primary: #eaffea;
  --hud-text-body: #b6f5b6;
  --hud-text-secondary: #6ee7b7;
  --hud-text-muted: #34d399;
  --hud-text-dim: #15803d;
  --hud-text-on-accent: #001202;

  /* Fonts */
  --hud-font-sans: "Share Tech Mono", "IBM Plex Mono", monospace;
  --hud-font-mono: "Share Tech Mono", "IBM Plex Mono", monospace;
  --hud-font-display: "Share Tech Mono", monospace;
  --hud-font-hud: "Share Tech Mono", monospace;

  /* Holographic Shader & Scanlines */
  --hud-holo-grid-color: rgba(0, 255, 102, 0.12);
  --hud-holo-beam: rgba(0, 255, 102, 0.22);
  --hud-scanline-color: rgba(0, 255, 102, 0.08);
  --hud-crt-curvature: rgba(0, 15, 4, 0.95);
  --hud-shadow-ambient: 0 10px 40px rgba(0, 0, 0, 0.95);
  --hud-shadow-glow: 0 0 24px rgba(0, 255, 102, 0.45);
  --hud-shadow-gold: 0 0 20px rgba(163, 230, 53, 0.35);
  --hud-shadow-green: 0 0 24px rgba(0, 255, 102, 0.5);

  /* Radar & Audio Oscilloscope */
  --hud-radar-sweep: rgba(0, 255, 102, 0.35);
  --hud-radar-ring: rgba(0, 255, 102, 0.25);
  --hud-scope-line: #00ff66;
  --hud-scope-glow: rgba(0, 255, 102, 0.6);

  scrollbar-color: rgba(0, 255, 102, 0.5) #000902;
}

/* 2.4 Hermetic Gold Theme (Bronze-Black Obsidian & 24K Alchemical Gold) */
html[data-theme="gold"],
html.theme-gold,
body[data-theme="gold"],
body.theme-gold {
  --hud-theme: "gold";
  color-scheme: dark;

  /* Backgrounds */
  --hud-bg: #050300;
  --hud-bg-elevated: #0d0801;
  --hud-deck-bg: rgba(16, 10, 2, 0.96);
  --hud-card-bg: rgba(22, 14, 4, 0.92);
  --hud-card-solid: #160e04;
  --hud-header-bg: rgba(10, 6, 1, 0.98);
  --hud-dock-bg: rgba(10, 6, 1, 0.98);
  --hud-viewport-bg: #030200;
  --hud-input-bg: #080501;

  /* Alchemical Gold Palette */
  --hud-cyan: #ffd700;
  --hud-cyan-soft: #fde047;
  --hud-gold: #fbbf24;
  --hud-gold-bright: #ffd700;
  --hud-green: #34d399;
  --hud-green-glow: rgba(52, 211, 153, 0.35);
  --hud-magenta: #f59e0b;
  --hud-violet: #d97706;
  --hud-red: #ef4444;
  --hud-blue: #eab308;
  --hud-orange: #f97316;

  /* Edgerunners Signature Color Tokens (Alchemical Gold) */
  --kiroshi-yellow: #ffd700;
  --kiroshi-yellow-glow: rgba(255, 215, 0, 0.5);
  --arasaka-red: #ef4444;
  --arasaka-red-glow: rgba(239, 68, 68, 0.45);
  --sandevistan-green: #34d399;
  --sandevistan-green-glow: rgba(52, 211, 153, 0.45);
  --cyber-cyan: #fbbf24;
  --cyber-cyan-glow: rgba(251, 191, 36, 0.45);
  --deep-void: #050300;
  --edgerunner-yellow: #ffd700;
  --edgerunner-red: #ef4444;
  --edgerunner-green: #34d399;
  --edgerunner-cyan: #fbbf24;
  --edgerunner-void: #050300;
  --optic-ladder-color: rgba(255, 215, 0, 0.85);
  --optic-reticle-color: rgba(251, 191, 36, 0.9);
  --optic-lock-color: #ef4444;

  /* 6 Sacred Math Pillar Colors (Gold Mode) */
  --hud-pillar-1: #ffd700; /* Sheaves - Radiant Gold */
  --hud-pillar-2: #fbbf24; /* Info Geometry - Warm Amber */
  --hud-pillar-3: #34d399; /* STDP Plasticity - Emerald Alchemical */
  --hud-pillar-4: #fde047; /* Shannon Entropy - Solar Gold */
  --hud-pillar-5: #f97316; /* KAN B-Splines - Alchemical Fire */
  --hud-pillar-6: #eab308; /* Hopfield Recall - Topaz */

  /* Borders & Accents */
  --hud-border: rgba(251, 191, 36, 0.35);
  --hud-border-subtle: rgba(251, 191, 36, 0.12);
  --hud-border-strong: rgba(255, 215, 0, 0.85);
  --hud-border-glow: rgba(251, 191, 36, 0.45);
  --hud-border-gold: rgba(255, 215, 0, 0.75);
  --hud-border-green: rgba(52, 211, 153, 0.45);
  --hud-accent: #fbbf24;
  --hud-accent-glow: rgba(251, 191, 36, 0.4);

  /* Typography Colors */
  --hud-text-primary: #fff6dc;
  --hud-text-body: #f3e6c4;
  --hud-text-secondary: #d4b26f;
  --hud-text-muted: #a1824a;
  --hud-text-dim: #71582c;
  --hud-text-on-accent: #150c02;

  /* Fonts */
  --hud-font-sans: "Fraunces", "Plus Jakarta Sans", serif;
  --hud-font-mono: "IBM Plex Mono", "JetBrains Mono", monospace;
  --hud-font-display: "Cinzel", "Fraunces", serif;
  --hud-font-hud: "Cinzel", "IBM Plex Mono", monospace;

  /* Holographic Shader & Scanlines */
  --hud-holo-grid-color: rgba(251, 191, 36, 0.08);
  --hud-holo-beam: rgba(255, 215, 0, 0.18);
  --hud-scanline-color: rgba(251, 191, 36, 0.05);
  --hud-crt-curvature: rgba(18, 10, 2, 0.95);
  --hud-shadow-ambient: 0 10px 40px rgba(0, 0, 0, 0.95);
  --hud-shadow-glow: 0 0 24px rgba(251, 191, 36, 0.4);
  --hud-shadow-gold: 0 0 26px rgba(255, 215, 0, 0.5);
  --hud-shadow-green: 0 0 20px rgba(52, 211, 153, 0.35);

  /* Radar & Audio Oscilloscope */
  --hud-radar-sweep: rgba(255, 215, 0, 0.3);
  --hud-radar-ring: rgba(251, 191, 36, 0.2);
  --hud-scope-line: #ffd700;
  --hud-scope-glow: rgba(255, 215, 0, 0.55);

  scrollbar-color: rgba(251, 191, 36, 0.45) #0c0801;
}

/* =============================================================================
   3. Zero Root Scroll Cockpit Core System & Chamfer Clip-Paths
   ============================================================================= */
html.hud-mode,
html.hud-mode body,
body.cyberpunk-hud,
body.cockpit-hud-body {
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  width: 100vw !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background-color: var(--hud-bg) !important;
  color: var(--hud-text-body) !important;
  font-family: var(--hud-font-sans) !important;
  position: relative !important;
  user-select: none;
  -webkit-user-select: none;
}

body.cyberpunk-hud footer.site,
body.cockpit-hud-body footer.site {
  display: none !important;
}

/* Universal Chamfer Polygon Clip-Paths */
:root {
  --hud-clip-sm: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
  --hud-clip-md: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  --hud-clip-lg: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  --hud-clip-tr-bl: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  --hud-clip-tl-br: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  --hud-clip-notch: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px));
  --hud-clip-tab: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
  --hud-clip-hex: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

/* Custom Cockpit Scrollbar */
.hud-custom-scroll::-webkit-scrollbar,
.hud-deck::-webkit-scrollbar,
.hud-term-output::-webkit-scrollbar,
.hud-msg-stream::-webkit-scrollbar,
.hud-modal-body::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.hud-custom-scroll::-webkit-scrollbar-track,
.hud-deck::-webkit-scrollbar-track,
.hud-term-output::-webkit-scrollbar-track,
.hud-msg-stream::-webkit-scrollbar-track,
.hud-modal-body::-webkit-scrollbar-track {
  background: var(--hud-bg);
}
.hud-custom-scroll::-webkit-scrollbar-thumb,
.hud-deck::-webkit-scrollbar-thumb,
.hud-term-output::-webkit-scrollbar-thumb,
.hud-msg-stream::-webkit-scrollbar-thumb,
.hud-modal-body::-webkit-scrollbar-thumb {
  background: var(--hud-border-glow);
  border-radius: 2px;
}
.hud-custom-scroll::-webkit-scrollbar-thumb:hover,
.hud-deck::-webkit-scrollbar-thumb:hover,
.hud-term-output::-webkit-scrollbar-thumb:hover,
.hud-msg-stream::-webkit-scrollbar-thumb:hover,
.hud-modal-body::-webkit-scrollbar-thumb:hover {
  background: var(--hud-accent);
}

/* =============================================================================
   4. Holographic HUD Atmosphere & Tactical Shaders
   ============================================================================= */
.hud-app-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
  position: relative;
  background-color: var(--hud-bg);
  box-sizing: border-box;
}

/* 4.1 Subtle Animated Holographic Grid Backdrop */
.hud-holo-backdrop {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  opacity: 0.85;
}

.hud-holo-grid {
  position: absolute;
  inset: -100px;
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, var(--hud-holo-grid-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hud-holo-grid-color) 1px, transparent 1px);
  mask-image: radial-gradient(circle at 50% 40%, black 20%, rgba(0,0,0,0.6) 60%, transparent 95%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, black 20%, rgba(0,0,0,0.6) 60%, transparent 95%);
  animation: holoGridDrift 45s linear infinite;
}

@keyframes holoGridDrift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(40px, 40px); }
}

/* Drifting Tactical Dust Motes */
.hud-dust-motes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.hud-dust-mote {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--hud-accent);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--hud-accent);
  opacity: 0.4;
  animation: dustMoteFloat 16s ease-in-out infinite alternate;
}

.hud-dust-mote:nth-child(1) { top: 18%; left: 24%; animation-duration: 18s; animation-delay: 0s; }
.hud-dust-mote:nth-child(2) { top: 62%; left: 78%; animation-duration: 22s; animation-delay: -4s; width: 3px; height: 3px; }
.hud-dust-mote:nth-child(3) { top: 35%; left: 82%; animation-duration: 26s; animation-delay: -8s; }
.hud-dust-mote:nth-child(4) { top: 80%; left: 15%; animation-duration: 20s; animation-delay: -12s; width: 2.5px; height: 2.5px; }
.hud-dust-mote:nth-child(5) { top: 48%; left: 45%; animation-duration: 30s; animation-delay: -16s; }

@keyframes dustMoteFloat {
  0% { transform: translateY(0) translateX(0) scale(0.8); opacity: 0.2; }
  50% { transform: translateY(-40px) translateX(25px) scale(1.3); opacity: 0.65; }
  100% { transform: translateY(-80px) translateX(-20px) scale(0.7); opacity: 0.25; }
}

/* 4.2 CRT Curvature & Scanlines Shader Overlay (.hud-crt-fx) */
.hud-scanline-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%, 
    var(--hud-scanline-color) 50%
  );
  background-size: 100% 4px;
  opacity: 0.7;
}

/* CRT FX Toggle: simulates curved glass, phosphors & barrel vignette */
.hud-crt-fx {
  position: relative;
}
.hud-crt-fx::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  box-shadow: 
    inset 0 0 100px rgba(0, 0, 0, 0.75),
    inset 0 0 40px var(--hud-crt-curvature);
  border-radius: 12px;
}
.hud-crt-fx::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent);
  pointer-events: none;
  z-index: 9999;
  opacity: 0.6;
  animation: crtScanRoll 9s linear infinite;
}

@keyframes crtScanRoll {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

/* 4.3 Chromatic Aberration & Glitch Toggle (.hud-glitch-active) */
.hud-glitch-active {
  animation: hudGlitchJitter 0.28s ease-in-out infinite alternate;
}
.hud-glitch-active .hud-brand-text,
.hud-glitch-active .hud-stage-tool-name,
.hud-glitch-active .hud-card-title {
  text-shadow: 
    -1.5px 0 0 rgba(255, 0, 80, 0.75),
    1.5px 0 0 rgba(0, 240, 255, 0.75);
}

@keyframes hudGlitchJitter {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-1px, 0.5px); }
  50% { transform: translate(1px, -0.5px); }
  75% { transform: translate(-0.5px, -1px); }
  100% { transform: translate(0.5px, 1px); }
}

/* Ambient Radial Cyber Glow */
.hud-ambient-glow {
  position: fixed;
  top: -20%;
  left: 20%;
  width: 60vw;
  height: 60vh;
  border-radius: 50%;
  background: radial-gradient(circle, var(--hud-accent-glow) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  filter: blur(80px);
  opacity: 0.4;
  animation: hudGlowPulse 8s ease-in-out infinite alternate;
}

@keyframes hudGlowPulse {
  0% { transform: scale(0.95); opacity: 0.25; }
  100% { transform: scale(1.1); opacity: 0.45; }
}

/* 4.4 Chamfered Corner Brackets with Micro-Scale Crosshairs & Bolts */
.hud-viewport-brackets {
  position: absolute;
  inset: 10px;
  pointer-events: none;
  z-index: 10;
}

.hud-bracket {
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: var(--hud-border-strong);
  opacity: 0.85;
  transition: all 0.25s ease;
}

.hud-bracket-tl {
  top: 0;
  left: 0;
  border-top: 2px solid;
  border-left: 2px solid;
}
.hud-bracket-tr {
  top: 0;
  right: 0;
  border-top: 2px solid;
  border-right: 2px solid;
}
.hud-bracket-bl {
  bottom: 0;
  left: 0;
  border-bottom: 2px solid;
  border-left: 2px solid;
}
.hud-bracket-br {
  bottom: 0;
  right: 0;
  border-bottom: 2px solid;
  border-right: 2px solid;
}

/* Micro-Scale Crosshairs in Corner Brackets */
.hud-bracket::before {
  content: "+";
  position: absolute;
  font-family: var(--hud-font-mono);
  font-size: 8px;
  line-height: 1;
  color: var(--hud-cyan);
  font-weight: 800;
  opacity: 0.7;
}
.hud-bracket-tl::before { top: 3px; left: 3px; }
.hud-bracket-tr::before { top: 3px; right: 3px; }
.hud-bracket-bl::before { bottom: 3px; left: 3px; }
.hud-bracket-br::before { bottom: 3px; right: 3px; }

/* Neon Glowing Corner Bolts */
.hud-corner-bolt {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--hud-card-solid);
  border: 1px solid var(--hud-cyan);
  box-shadow: 0 0 6px var(--hud-cyan);
  z-index: 12;
}
.hud-bolt-tl { top: 6px; left: 6px; }
.hud-bolt-tr { top: 6px; right: 6px; }
.hud-bolt-bl { bottom: 6px; left: 6px; }
.hud-bolt-br { bottom: 6px; right: 6px; }

/* Compass Ticks & Sub-Ticks */
.hud-compass-ticks {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--hud-font-mono);
  font-size: 0.55rem;
  color: var(--hud-text-muted);
  letter-spacing: 0.12em;
  pointer-events: none;
}
.hud-compass-tick-mark {
  width: 1px;
  height: 6px;
  background: var(--hud-border-strong);
}
.hud-compass-tick-mark.major {
  height: 10px;
  background: var(--hud-gold);
}

/* 4.5 Animated Glowing Energy Tracks for Meters & Progress Bars */
.hud-meter-track {
  width: 100%;
  height: 5px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}

.hud-meter-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--hud-cyan), var(--hud-green));
  box-shadow: 0 0 10px var(--hud-accent-glow);
  position: relative;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* High-Voltage Energy Shimmer Texture */
.hud-meter-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: 16px 16px;
  background-image: linear-gradient(
    45deg, 
    rgba(255, 255, 255, 0.22) 25%, 
    transparent 25%, 
    transparent 50%, 
    rgba(255, 255, 255, 0.22) 50%, 
    rgba(255, 255, 255, 0.22) 75%, 
    transparent 75%, 
    transparent
  );
  animation: energyStripeFlow 1.8s linear infinite;
}

/* Glowing Leading Bead / Spark Head */
.hud-meter-fill::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 4px;
  background: #ffffff;
  box-shadow: 0 0 8px #ffffff, 0 0 14px var(--hud-accent);
  border-radius: 1px;
}

.hud-meter-fill.gold {
  background: linear-gradient(90deg, var(--hud-gold), var(--hud-gold-bright));
}
.hud-meter-fill.violet {
  background: linear-gradient(90deg, var(--hud-violet), var(--hud-magenta));
}
.hud-meter-fill.red {
  background: linear-gradient(90deg, var(--hud-red), var(--hud-orange));
}

@keyframes energyStripeFlow {
  0% { background-position: 0 0; }
  100% { background-position: 16px 0; }
}

/* =============================================================================
   5. Top Header & Cyber Audio Oscilloscope Bar (54px Fixed)
   ============================================================================= */
.hud-header {
  height: var(--hud-header-h, 54px);
  min-height: var(--hud-header-h, 54px);
  max-height: var(--hud-header-h, 54px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: var(--hud-header-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--hud-border);
  position: relative;
  z-index: 100;
  box-sizing: border-box;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.hud-header::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg, 
    transparent 0%, 
    var(--hud-cyan) 20%, 
    var(--hud-gold) 50%, 
    var(--hud-green) 80%, 
    transparent 100%
  );
  opacity: 0.6;
}

/* Header Left: Logo + Help + Deck Toggle */
.hud-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hud-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  outline: none;
}

.hud-logo-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid var(--hud-border-strong);
  padding: 5px 12px;
  clip-path: var(--hud-clip-sm);
  box-shadow: 0 0 12px var(--hud-accent-glow);
  transition: all 0.2s ease;
}
html[data-theme="light"] .hud-logo-badge {
  background: rgba(0, 113, 227, 0.08);
}
html[data-theme="matrix"] .hud-logo-badge {
  background: rgba(0, 255, 102, 0.12);
}
html[data-theme="gold"] .hud-logo-badge {
  background: rgba(251, 191, 36, 0.12);
}

.hud-brand:hover .hud-logo-badge {
  background: var(--hud-accent);
  box-shadow: 0 0 20px var(--hud-accent);
}
.hud-brand:hover .hud-logo-badge .hud-brand-text,
.hud-brand:hover .hud-logo-badge .hud-logo-icon {
  color: var(--hud-text-on-accent) !important;
}

.hud-logo-icon {
  font-size: 1.05rem;
  color: var(--hud-gold);
  text-shadow: 0 0 8px var(--hud-gold);
  line-height: 1;
}

.hud-brand-text {
  font-family: var(--hud-font-display);
  font-size: 0.88rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--hud-text-primary);
  text-transform: uppercase;
}

.hud-brand-tag {
  font-family: var(--hud-font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--hud-cyan);
  background: rgba(0, 240, 255, 0.15);
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.06em;
}

.hud-topbar-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(0, 240, 255, 0.06);
  border: 1px solid rgba(0, 240, 255, 0.25);
  padding: 4px 10px;
  clip-path: var(--hud-clip-sm);
  font-family: var(--hud-font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--hud-cyan);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
html[data-theme="light"] .hud-topbar-breadcrumb {
  background: rgba(0, 113, 227, 0.06);
  border-color: rgba(0, 113, 227, 0.25);
  color: #0071e3;
}
html[data-theme="matrix"] .hud-topbar-breadcrumb {
  background: rgba(0, 255, 102, 0.08);
  border-color: rgba(0, 255, 102, 0.3);
  color: var(--hud-green);
}
html[data-theme="gold"] .hud-topbar-breadcrumb {
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.3);
  color: var(--hud-gold);
}

.hud-breadcrumb-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hud-cyan);
  box-shadow: 0 0 8px var(--hud-cyan);
  animation: hudBeaconPulse 2s ease-in-out infinite alternate;
}
html[data-theme="matrix"] .hud-breadcrumb-dot { background: var(--hud-green); box-shadow: 0 0 8px var(--hud-green); }
html[data-theme="gold"] .hud-breadcrumb-dot { background: var(--hud-gold); box-shadow: 0 0 8px var(--hud-gold); }

.hud-help-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hud-border);
  color: var(--hud-text-secondary);
  font-family: var(--hud-font-mono);
  font-size: 0.78rem;
  font-weight: 800;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  clip-path: var(--hud-clip-sm);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.hud-help-btn:hover {
  background: var(--hud-gold);
  color: #05060a;
  border-color: var(--hud-gold);
  box-shadow: 0 0 14px var(--hud-gold);
  transform: translateY(-1px) scale(1.05);
}
.hud-help-btn:active {
  transform: translateY(1px) scale(0.95);
}

.hud-deck-toggle-btn {
  display: none;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid var(--hud-border);
  color: var(--hud-cyan);
  font-family: var(--hud-font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 5px 10px;
  clip-path: var(--hud-clip-sm);
  cursor: pointer;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}
.hud-deck-toggle-btn:hover {
  background: var(--hud-cyan);
  color: var(--hud-text-on-accent);
}

/* 5.1 Center Audio Oscilloscope & Waveform Spectrum Bar */
.hud-header-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex: 1;
  max-width: 440px;
  margin: 0 12px;
}

.hud-header-audio-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--hud-input-bg);
  border: 1px solid var(--hud-border-subtle);
  clip-path: var(--hud-clip-sm);
  padding: 2px 8px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.hud-header-audio-strip:hover {
  border-color: var(--hud-cyan);
  box-shadow: 0 0 10px var(--hud-accent-glow);
}

.hud-oscilloscope-container {
  display: flex;
  align-items: center;
  height: 28px;
}

.hud-oscilloscope-canvas {
  width: 160px;
  height: 28px;
  display: block;
}

.hud-header-status-beacon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 255, 102, 0.06);
  border: 1px solid rgba(0, 255, 102, 0.25);
  padding: 4px 9px;
  clip-path: var(--hud-clip-sm);
  font-family: var(--hud-font-mono);
  font-size: 0.60rem;
  font-weight: 800;
  color: var(--hud-green);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
html[data-theme="light"] .hud-header-status-beacon {
  background: rgba(0, 160, 60, 0.08);
  border-color: rgba(0, 160, 60, 0.3);
  color: #058535;
}

.hud-beacon-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hud-green);
  box-shadow: 0 0 8px var(--hud-green);
  animation: hudBeaconPulse 1.4s ease-in-out infinite alternate;
}
html[data-theme="light"] .hud-beacon-pulse { background: #058535; box-shadow: 0 0 8px rgba(5, 133, 53, 0.6); }

@keyframes hudBeaconPulse {
  0% { opacity: 0.35; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1.2); }
}

.hud-badge-toolmgr-highlight {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.18), rgba(251, 191, 36, 0.12));
  border: 1px solid var(--hud-cyan);
  color: var(--hud-cyan);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.25);
  font-weight: 800;
}
.hud-badge-toolmgr-highlight:hover {
  background: var(--hud-cyan) !important;
  color: var(--hud-text-on-accent) !important;
  box-shadow: 0 0 22px var(--hud-cyan) !important;
  border-color: var(--hud-cyan) !important;
}

.hud-audio-scope-wrap {
  flex: 1;
  height: 28px;
  background: var(--hud-input-bg);
  border: 1px solid var(--hud-border-subtle);
  clip-path: var(--hud-clip-sm);
  padding: 2px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.hud-audio-scope-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.hud-eq-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
}

.hud-eq-bar {
  width: 3px;
  background: var(--hud-cyan);
  border-radius: 1px;
  animation: eqBounce 1.2s ease-in-out infinite alternate;
}
.hud-eq-bar:nth-child(1) { height: 30%; animation-delay: 0.1s; }
.hud-eq-bar:nth-child(2) { height: 60%; animation-delay: 0.3s; }
.hud-eq-bar:nth-child(3) { height: 95%; animation-delay: 0.15s; background: var(--hud-gold); }
.hud-eq-bar:nth-child(4) { height: 45%; animation-delay: 0.4s; }
.hud-eq-bar:nth-child(5) { height: 75%; animation-delay: 0.25s; }
.hud-eq-bar:nth-child(6) { height: 85%; animation-delay: 0.35s; background: var(--hud-green); }

@keyframes eqBounce {
  0% { transform: scaleY(0.2); }
  100% { transform: scaleY(1); }
}

.hud-audio-channel-badge {
  font-family: var(--hud-font-mono);
  font-size: 0.58rem;
  font-weight: 800;
  color: var(--hud-text-muted);
  display: flex;
  align-items: center;
  gap: 3px;
}

/* 5.2 Header Right Actions: [ PORTS ], [ TIME ], [ THEMES ], [ TOOL MGR ] */
.hud-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Cyberpunk Badge Tactile Hover Elevation & Micro Click Animation */
.hud-badge-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--hud-card-bg);
  border: 1px solid var(--hud-border);
  padding: 5px 11px;
  clip-path: var(--hud-clip-sm);
  font-family: var(--hud-font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--hud-text-body);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

/* Micro Specular Light Sweep on Hover */
.hud-badge-action::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  transform: skewX(-25deg);
  transition: all 0.5s ease;
  pointer-events: none;
}
.hud-badge-action:hover::before {
  left: 140%;
}

.hud-badge-action:hover {
  border-color: var(--hud-accent);
  box-shadow: 0 4px 18px var(--hud-accent-glow), 0 0 0 1px var(--hud-border-strong);
  transform: translateY(-2px) scale(1.02);
}
.hud-badge-action:active {
  transform: translateY(1px) scale(0.97);
  box-shadow: 0 1px 6px var(--hud-accent-glow);
}

/* Ports Badge */
.hud-badge-ports {
  color: var(--hud-green);
  border-color: rgba(0, 255, 102, 0.3);
}
.hud-badge-ports:hover {
  border-color: var(--hud-green);
  box-shadow: 0 4px 18px var(--hud-green-glow);
}

/* Time Clock Badge */
.hud-badge-time {
  color: var(--hud-cyan);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* Themes Selector Button */
.hud-badge-themes {
  color: var(--hud-gold);
  border-color: var(--hud-border-gold);
  position: relative;
}
.hud-badge-themes:hover {
  background: rgba(251, 191, 36, 0.12);
  border-color: var(--hud-gold);
  box-shadow: 0 4px 18px var(--hud-shadow-gold);
}

.hud-theme-swatches {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.hud-swatch-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.hud-swatch-dot.dark { background: #00f0ff; }
.hud-swatch-dot.light { background: #ffffff; }
.hud-swatch-dot.matrix { background: #00ff66; }
.hud-swatch-dot.gold { background: #fbbf24; }

/* Tool Manager Button */
.hud-badge-toolmgr {
  background: rgba(0, 240, 255, 0.12);
  border-color: var(--hud-border-strong);
  color: var(--hud-cyan);
}
.hud-badge-toolmgr:hover {
  background: var(--hud-cyan);
  color: var(--hud-text-on-accent);
}

/* LED Status Indicator Dots */
.hud-led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  position: relative;
}
.hud-led::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: inherit;
  opacity: 0.4;
  animation: hudLedPulse 2s infinite ease-in-out;
}
.hud-led.green { background: #00ff66; box-shadow: 0 0 8px #00ff66; }
.hud-led.cyan { background: #00f0ff; box-shadow: 0 0 8px #00f0ff; }
.hud-led.amber { background: #fbbf24; box-shadow: 0 0 8px #fbbf24; }
.hud-led.red { background: #ff3366; box-shadow: 0 0 8px #ff3366; }

@keyframes hudLedPulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.6); opacity: 0.1; }
}

/* =============================================================================
   6. Main Workspace Grid (Desktop 2-Column Cockpit)
   ============================================================================= */
.hud-workspace {
  flex: 1;
  display: grid;
  grid-template-columns: var(--hud-deck-w, 380px) minmax(0, 1fr);
  height: calc(100vh - var(--hud-header-h, 54px) - var(--hud-dock-h, 50px));
  height: calc(100dvh - var(--hud-header-h, 54px) - var(--hud-dock-h, 50px));
  width: 100vw;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

/* =============================================================================
   7. Left Operations & Telemetry Deck (360px-420px Fixed Width)
   ============================================================================= */
.hud-deck {
  width: var(--hud-deck-w, 380px);
  min-width: 360px;
  max-width: 420px;
  height: 100%;
  background: var(--hud-deck-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-right: 1px solid var(--hud-border);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 16px 36px;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  position: relative;
  z-index: 50;
  box-shadow: 6px 0 24px rgba(0, 0, 0, 0.4);
}

/* Cyber Deck Panels General Card */
.hud-card {
  background: var(--hud-card-bg);
  border: 1px solid var(--hud-border);
  clip-path: var(--hud-clip-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  box-shadow: var(--hud-shadow-ambient);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.hud-card:hover {
  border-color: var(--hud-border-strong);
  box-shadow: var(--hud-shadow-glow);
}

/* Card Header Strip with Corner Brackets */
.hud-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--hud-border-subtle);
  position: relative;
}

.hud-card-title {
  font-family: var(--hud-font-hud);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--hud-gold);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}

.hud-card-badge {
  font-family: var(--hud-font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--hud-cyan);
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid var(--hud-border);
  padding: 1px 6px;
  clip-path: var(--hud-clip-sm);
}

/* ── Panel 1: Polished ACTIVE AGENTS Roster & Avatar Glow Auras ── */
.hud-agents-roster {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 240px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  scrollbar-width: thin;
}

.hud-agent-radio-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--hud-border-subtle);
  clip-path: var(--hud-clip-sm);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--hud-text-body);
  user-select: none;
  position: relative;
  overflow: hidden;
  gap: 6px;
}

.hud-agent-radio-item:hover {
  background: rgba(0, 240, 255, 0.08);
  border-color: var(--hud-border);
  transform: translateX(3px);
}

.hud-agent-radio-item.active {
  background: rgba(0, 240, 255, 0.15);
  border-color: var(--hud-cyan);
  box-shadow: inset 0 0 16px rgba(0, 240, 255, 0.22), 0 0 12px var(--hud-accent-glow);
}
html[data-theme="light"] .hud-agent-radio-item.active {
  background: rgba(0, 113, 227, 0.12);
  border-color: var(--hud-cyan);
}
html[data-theme="matrix"] .hud-agent-radio-item.active {
  background: rgba(0, 255, 102, 0.18);
  border-color: var(--hud-green);
  box-shadow: inset 0 0 16px rgba(0, 255, 102, 0.3), 0 0 12px var(--hud-green-glow);
}
html[data-theme="gold"] .hud-agent-radio-item.active {
  background: rgba(251, 191, 36, 0.18);
  border-color: var(--hud-gold);
  box-shadow: inset 0 0 16px rgba(251, 191, 36, 0.3), 0 0 12px var(--hud-shadow-gold);
}

.hud-agent-radio-left {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
}

/* Agent Avatar Glow Aura */
.hud-agent-avatar-wrap {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 0.78rem;
  flex-shrink: 0;
}
.hud-agent-aura {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--hud-accent);
  opacity: 0;
  filter: blur(4px);
  transition: opacity 0.3s ease;
}
.hud-agent-radio-item.active .hud-agent-aura {
  opacity: 0.6;
  animation: agentAuraPulse 2.4s ease-in-out infinite alternate;
}

@keyframes agentAuraPulse {
  0% { transform: scale(0.9); opacity: 0.4; }
  100% { transform: scale(1.3); opacity: 0.8; }
}

/* Custom Cyber Radio Indicator: (•) vs ( ) */
.hud-radio-ring {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--hud-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.hud-agent-radio-item.active .hud-radio-ring {
  border-color: var(--hud-cyan);
  box-shadow: 0 0 8px var(--hud-cyan);
}
.hud-radio-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--hud-cyan);
  opacity: 0;
  transform: scale(0);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.hud-agent-radio-item.active .hud-radio-dot {
  opacity: 1;
  transform: scale(1);
}

.hud-agent-name {
  font-family: var(--hud-font-mono);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--hud-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hud-agent-right-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.hud-agent-domain-chip {
  font-family: var(--hud-font-mono);
  font-size: 0.54rem;
  font-weight: 700;
  padding: 1px 5px;
  clip-path: var(--hud-clip-sm);
  background: rgba(0, 240, 255, 0.1);
  color: var(--hud-cyan);
  border: 1px solid var(--hud-border-subtle);
  white-space: nowrap;
  flex-shrink: 0;
}

.hud-agent-role-pill {
  font-family: var(--hud-font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  padding: 2px 5px;
  clip-path: var(--hud-clip-sm);
  background: rgba(255, 255, 255, 0.05);
  color: var(--hud-text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Active Pulsing LED Beacon on Active Agent */
.hud-agent-beacon {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hud-cyan);
  box-shadow: 0 0 8px var(--hud-cyan);
  position: relative;
  display: none;
}
.hud-agent-radio-item.active .hud-agent-beacon {
  display: inline-block;
}
.hud-agent-beacon::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--hud-cyan);
  animation: beaconRipple 1.6s ease-out infinite;
}

@keyframes beaconRipple {
  0% { transform: scale(0.8); opacity: 0.9; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Add Slot Button */
.hud-agent-slot-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  background: transparent;
  border: 1px dashed var(--hud-border);
  clip-path: var(--hud-clip-sm);
  color: var(--hud-text-muted);
  font-family: var(--hud-font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.hud-agent-slot-add:hover {
  border-color: var(--hud-gold);
  color: var(--hud-gold);
  background: rgba(251, 191, 36, 0.06);
}

/* ── Panel 2: POLAR RADAR & SENSORS CANAVAS (.hud-radar-container) ── */
.hud-radar-container {
  width: 100%;
  height: 105px;
  background: var(--hud-input-bg);
  border: 1px solid var(--hud-border-subtle);
  clip-path: var(--hud-clip-sm);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hud-radar-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Rotating 360° Polar Radar Sweep Beam */
.hud-radar-sweep-beam {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin-top: -60px;
  margin-left: -60px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--hud-radar-sweep) 0deg, transparent 65deg);
  pointer-events: none;
  animation: radarSweep360 4s linear infinite;
  mask-image: radial-gradient(circle, black 65%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle, black 65%, transparent 70%);
}

@keyframes radarSweep360 {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.hud-radar-rings {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: 
    radial-gradient(circle at center, transparent 18px, var(--hud-radar-ring) 19px, transparent 20px),
    radial-gradient(circle at center, transparent 38px, var(--hud-radar-ring) 39px, transparent 40px),
    radial-gradient(circle at center, transparent 58px, var(--hud-radar-ring) 59px, transparent 60px);
}

.hud-radar-crosshair {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: 
    linear-gradient(to right, transparent calc(50% - 0.5px), var(--hud-radar-ring) calc(50% - 0.5px), var(--hud-radar-ring) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to bottom, transparent calc(50% - 0.5px), var(--hud-radar-ring) calc(50% - 0.5px), var(--hud-radar-ring) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}

.hud-radar-blip {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--hud-cyan);
  box-shadow: 0 0 8px var(--hud-cyan);
  animation: radarBlipPing 2s ease-in-out infinite;
}
.hud-radar-blip.blip-1 { top: 32%; left: 60%; animation-delay: 0.2s; }
.hud-radar-blip.blip-2 { top: 68%; left: 38%; animation-delay: 1.1s; background: var(--hud-gold); box-shadow: 0 0 8px var(--hud-gold); }
.hud-radar-blip.blip-3 { top: 40%; left: 28%; animation-delay: 1.8s; background: var(--hud-green); box-shadow: 0 0 8px var(--hud-green); }

@keyframes radarBlipPing {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.8); opacity: 0.3; }
}

/* ── Panel 3: MEMORY GRAPH Synaptic Telemetry ── */
.hud-mem-canvas-container {
  width: 100%;
  height: 85px;
  background: var(--hud-input-bg);
  border: 1px solid var(--hud-border-subtle);
  clip-path: var(--hud-clip-sm);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hud-mem-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.hud-mem-grid-wireframe {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(var(--hud-border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--hud-border-subtle) 1px, transparent 1px);
  background-size: 16px 16px;
  pointer-events: none;
  opacity: 0.5;
}

.hud-mem-stats-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.hud-stat-cell {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--hud-border-subtle);
  padding: 4px 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  text-align: center;
}
.hud-stat-lbl {
  font-family: var(--hud-font-mono);
  font-size: 0.54rem;
  color: var(--hud-text-muted);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hud-stat-val {
  font-family: var(--hud-font-mono);
  font-size: 0.70rem;
  font-weight: 800;
  color: var(--hud-cyan);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Panel 4: COMMAND LINE Interactive Terminal REPL ── */
.hud-terminal-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hud-term-output {
  background: var(--hud-input-bg);
  border: 1px solid var(--hud-border-subtle);
  clip-path: var(--hud-clip-sm);
  padding: 8px 10px;
  font-family: var(--hud-font-mono);
  font-size: 0.70rem;
  line-height: 1.45;
  color: var(--hud-text-secondary);
  height: 84px;
  max-height: 84px;
  overflow-y: auto;
  scrollbar-width: thin;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hud-term-line {
  white-space: pre-wrap;
  word-break: break-word;
}
.hud-term-line.cmd { color: var(--hud-cyan); font-weight: 700; }
.hud-term-line.stdout { color: var(--hud-text-body); }
.hud-term-line.success { color: var(--hud-green); }
.hud-term-line.warn { color: var(--hud-gold); }
.hud-term-line.error { color: var(--hud-red); }
.hud-term-line.cyan { color: var(--hud-cyan); }
.hud-term-line.gold { color: var(--hud-gold); font-weight: 700; }
.hud-term-line.agent-athena { color: #00d4aa; font-weight: 600; }
.hud-term-line.agent-draco { color: #ff5533; font-weight: 600; }
.hud-term-line.agent-hermes { color: #ffaa40; font-weight: 600; }
.hud-term-line.agent-azoth { color: #fbbf24; font-weight: 700; text-shadow: 0 0 8px rgba(251, 191, 36, 0.4); }
.hud-term-line.agent-grok { color: #00f0ff; font-weight: 600; }

.hud-term-prompt-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--hud-input-bg);
  border: 1px solid var(--hud-border);
  clip-path: var(--hud-clip-sm);
  padding: 4px 8px;
}
.hud-term-prompt-row:focus-within {
  border-color: var(--hud-cyan);
  box-shadow: 0 0 10px var(--hud-accent-glow);
}

.hud-term-prefix {
  font-family: var(--hud-font-mono);
  font-size: 0.70rem;
  font-weight: 800;
  color: var(--hud-green);
  user-select: none;
}

.hud-term-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--hud-font-mono);
  font-size: 0.72rem;
  color: var(--hud-text-primary);
  padding: 0;
}
.hud-term-input::placeholder {
  color: var(--hud-text-dim);
}

.hud-term-send-btn {
  background: var(--hud-cyan);
  color: var(--hud-text-on-accent);
  border: none;
  font-family: var(--hud-font-mono);
  font-size: 0.65rem;
  font-weight: 800;
  padding: 3px 8px;
  clip-path: var(--hud-clip-sm);
  cursor: pointer;
  transition: all 0.18s ease;
}
.hud-term-send-btn:hover {
  filter: brightness(1.2);
  transform: scale(1.05);
}

/* ── Panel 5: MESSAGE LOG Real-Time Stream ── */
.hud-msg-stream {
  background: var(--hud-input-bg);
  border: 1px solid var(--hud-border-subtle);
  clip-path: var(--hud-clip-sm);
  padding: 6px 8px;
  height: 85px;
  max-height: 85px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scrollbar-width: thin;
}

.hud-msg-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-family: var(--hud-font-mono);
  font-size: 0.66rem;
  line-height: 1.35;
  padding: 2px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.04);
}

.hud-msg-time {
  color: var(--hud-text-muted);
  font-size: 0.60rem;
  flex-shrink: 0;
}

.hud-msg-tag {
  font-weight: 800;
  flex-shrink: 0;
}
.hud-msg-tag.azoth { color: var(--hud-cyan); }
.hud-msg-tag.system { color: var(--hud-green); }
.hud-msg-tag.consensus { color: var(--hud-gold); }
.hud-msg-tag.daemon { color: var(--hud-violet); }
.hud-msg-tag.alert { color: var(--hud-red); }

.hud-msg-text {
  color: var(--hud-text-body);
  word-break: break-word;
}

/* ── Panel 6: Interactive 6-PILLAR Sacred Math Telemetry Grid ── */
.hud-pillar-grid {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.hud-pillar-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 3px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.hud-pillar-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--hud-font-mono);
  font-size: 0.62rem;
}

.hud-pillar-name {
  color: var(--hud-text-body);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
}

.hud-pillar-glyph {
  font-family: var(--hud-font-display);
  font-size: 0.66rem;
  font-weight: 900;
  display: inline-block;
  min-width: 14px;
  text-align: center;
}
.hud-pillar-glyph.p1 { color: var(--hud-pillar-1); text-shadow: 0 0 6px var(--hud-pillar-1); }
.hud-pillar-glyph.p2 { color: var(--hud-pillar-2); text-shadow: 0 0 6px var(--hud-pillar-2); }
.hud-pillar-glyph.p3 { color: var(--hud-pillar-3); text-shadow: 0 0 6px var(--hud-pillar-3); }
.hud-pillar-glyph.p4 { color: var(--hud-pillar-4); text-shadow: 0 0 6px var(--hud-pillar-4); }
.hud-pillar-glyph.p5 { color: var(--hud-pillar-5); text-shadow: 0 0 6px var(--hud-pillar-5); }
.hud-pillar-glyph.p6 { color: var(--hud-pillar-6); text-shadow: 0 0 6px var(--hud-pillar-6); }

.hud-pillar-val {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--hud-text-primary);
}

/* Individual Glowing Gradient Fills for 6 Pillars */
.hud-meter-fill.p1 { background: linear-gradient(90deg, #0088ff, var(--hud-pillar-1)); box-shadow: 0 0 8px var(--hud-pillar-1); }
.hud-meter-fill.p2 { background: linear-gradient(90deg, #7c3aed, var(--hud-pillar-2)); box-shadow: 0 0 8px var(--hud-pillar-2); }
.hud-meter-fill.p3 { background: linear-gradient(90deg, #059669, var(--hud-pillar-3)); box-shadow: 0 0 8px var(--hud-pillar-3); }
.hud-meter-fill.p4 { background: linear-gradient(90deg, #d97706, var(--hud-pillar-4)); box-shadow: 0 0 8px var(--hud-pillar-4); }
.hud-meter-fill.p5 { background: linear-gradient(90deg, #ff0055, var(--hud-pillar-5)); box-shadow: 0 0 8px var(--hud-pillar-5); }
.hud-meter-fill.p6 { background: linear-gradient(90deg, #0284c7, var(--hud-pillar-6)); box-shadow: 0 0 8px var(--hud-pillar-6); }

/* =============================================================================
   8. Center Stage Viewport & Split-Screen View
   ============================================================================= */
.hud-stage {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--hud-viewport-bg);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

/* 8.1 Stage Header Strip (48px) */
.hud-stage-header {
  height: var(--hud-stage-header-h, 48px);
  min-height: var(--hud-stage-header-h, 48px);
  max-height: var(--hud-stage-header-h, 48px);
  background: var(--hud-card-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--hud-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  box-sizing: border-box;
  z-index: 20;
}

/* Stage Header Left: Tool Name, Taxonomy Tags, History Arrows */
.hud-stage-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  overflow: hidden;
}

.hud-stage-nav-group {
  display: flex;
  align-items: center;
  gap: 3px;
}

.hud-stage-nav-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hud-border-subtle);
  color: var(--hud-text-secondary);
  font-family: var(--hud-font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  clip-path: var(--hud-clip-sm);
  cursor: pointer;
  transition: all 0.18s ease;
}
.hud-stage-nav-btn:hover {
  background: var(--hud-accent);
  color: var(--hud-text-on-accent);
  border-color: var(--hud-accent);
}

/* Interactive Stage Tool Dropdown Switcher */
.hud-stage-tool-dropdown-wrap {
  position: relative;
  display: flex;
  align-items: center;
  z-index: 120;
}

.hud-stage-tool-dropdown-btn {
  font-family: var(--hud-font-display);
  font-size: 0.80rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--hud-text-primary);
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(0, 240, 255, 0.06);
  border: 1px solid var(--hud-border);
  padding: 4px 10px;
  clip-path: var(--hud-clip-sm);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}
.hud-stage-tool-dropdown-btn:hover {
  background: rgba(0, 240, 255, 0.15);
  border-color: var(--hud-cyan);
  box-shadow: 0 0 12px var(--hud-accent-glow);
  color: #ffffff;
}
.hud-stage-tool-dropdown-btn[aria-expanded="true"] {
  background: rgba(251, 191, 36, 0.15);
  border-color: var(--hud-gold);
  color: var(--hud-gold);
  box-shadow: 0 0 14px var(--hud-shadow-gold);
}

.hud-stage-tool-icon {
  font-size: 0.92rem;
}
.hud-stage-tool-label {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hud-dropdown-caret {
  font-size: 0.70rem;
  color: var(--hud-cyan);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
  margin-left: 2px;
}
.hud-stage-tool-dropdown-btn[aria-expanded="true"] .hud-dropdown-caret {
  transform: rotate(180deg);
  color: var(--hud-gold);
}

/* Tool Dropdown Menu Overlay */
.hud-tool-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 380px;
  max-width: 90vw;
  max-height: 480px;
  background: var(--hud-deck-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--hud-cyan);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.8), 0 0 24px var(--hud-accent-glow);
  clip-path: var(--hud-clip-md);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  box-sizing: border-box;
  animation: hudDropdownFade 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.hud-tool-dropdown-menu[hidden] {
  display: none !important;
}

@keyframes hudDropdownFade {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.hud-tool-dropdown-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hud-border-subtle);
}

.hud-tool-dropdown-search-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--hud-input-bg);
  border: 1px solid var(--hud-border);
  padding: 4px 8px;
  clip-path: var(--hud-clip-sm);
}
.hud-tool-dropdown-search-wrap:focus-within {
  border-color: var(--hud-cyan);
  box-shadow: 0 0 8px var(--hud-accent-glow);
}

.hud-tool-search-icon {
  font-size: 0.78rem;
  color: var(--hud-cyan);
}

.hud-tool-dropdown-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--hud-text-primary);
  font-family: var(--hud-font-mono);
  font-size: 0.72rem;
  outline: none;
}
.hud-tool-dropdown-input::placeholder {
  color: var(--hud-text-muted);
}

.hud-tool-dropdown-clear {
  background: transparent;
  border: none;
  color: var(--hud-text-muted);
  cursor: pointer;
  font-size: 0.72rem;
  padding: 0 2px;
}
.hud-tool-dropdown-clear:hover {
  color: var(--hud-gold);
}

.hud-tool-dropdown-kicker {
  font-family: var(--hud-font-mono);
  font-size: 0.54rem;
  font-weight: 700;
  color: var(--hud-text-muted);
  letter-spacing: 0.05em;
  padding: 0 2px;
}

.hud-tool-dropdown-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 4px;
}

.hud-tool-dropdown-cat-header {
  font-family: var(--hud-font-hud);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--hud-gold);
  padding: 6px 6px 2px;
  border-bottom: 1px solid var(--hud-border-subtle);
  margin-top: 4px;
  text-transform: uppercase;
}

.hud-tool-dropdown-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--hud-border-subtle);
  clip-path: var(--hud-clip-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  gap: 10px;
  min-height: 48px;
}
.hud-tool-dropdown-item:hover {
  background: rgba(0, 240, 255, 0.12);
  border-color: var(--hud-cyan);
  transform: translateX(3px);
}
.hud-tool-dropdown-item.active {
  background: rgba(0, 240, 255, 0.18);
  border-color: var(--hud-cyan);
  box-shadow: inset 0 0 12px rgba(0, 240, 255, 0.2);
}

.hud-tool-dropdown-item-left {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.hud-tool-dropdown-item-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.hud-tool-dropdown-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.hud-tool-dropdown-item-name {
  font-family: var(--hud-font-display);
  font-size: 0.80rem;
  font-weight: 700;
  color: var(--hud-text-primary);
  line-height: 1.3;
  white-space: normal;
  word-break: break-word;
}
.hud-tool-dropdown-item.active .hud-tool-dropdown-item-name {
  color: var(--hud-cyan);
  font-weight: 800;
}

.hud-tool-dropdown-item-desc {
  font-family: var(--hud-font-mono);
  font-size: 0.66rem;
  color: var(--hud-text-muted);
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
  margin-top: 1px;
}

.hud-tool-dropdown-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
  margin-top: 2px;
}

.hud-tool-dropdown-hotkey {
  font-family: var(--hud-font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--hud-gold);
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid var(--hud-border-gold);
  padding: 1px 4px;
  clip-path: var(--hud-clip-sm);
  white-space: nowrap;
}

.hud-tool-dropdown-empty {
  font-family: var(--hud-font-mono);
  font-size: 0.72rem;
  color: var(--hud-text-muted);
  text-align: center;
  padding: 20px 10px;
}

.hud-stage-tool-name {
  font-family: var(--hud-font-display);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--hud-text-primary);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}

.hud-stage-tags {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}

.hud-tool-tag {
  font-family: var(--hud-font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  padding: 1px 5px;
  clip-path: var(--hud-clip-sm);
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid var(--hud-border);
  color: var(--hud-cyan);
  white-space: nowrap;
}
.hud-tool-tag.gold {
  background: rgba(251, 191, 36, 0.1);
  border-color: var(--hud-border-gold);
  color: var(--hud-gold);
}
.hud-tool-tag.green {
  background: rgba(0, 255, 102, 0.1);
  border-color: rgba(0, 255, 102, 0.3);
  color: var(--hud-green);
}
.hud-tool-tag.purple {
  background: rgba(180, 0, 255, 0.1);
  border-color: rgba(180, 0, 255, 0.3);
  color: #c77dff;
}
.hud-tool-tag.orange {
  background: rgba(255, 140, 0, 0.12);
  border-color: rgba(255, 140, 0, 0.35);
  color: #ffab40;
}
.hud-tool-tag.active {
  background: var(--hud-cyan);
  border-color: var(--hud-cyan);
  color: #000;
}

/* ─── Tool Manager Card Grid ──────────────────────────────────────────────── */
.hud-toolmgr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--hud-border-subtle);
  clip-path: var(--hud-clip-sm);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.18s ease;
  min-height: 110px;
}
/* Left accent bar — color set via --card-accent CSS var */
.hud-toolmgr-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--card-accent, var(--hud-cyan));
  opacity: 0.7;
  transition: opacity 0.2s ease, width 0.2s ease;
}
/* Scan-line shimmer on hover */
.hud-toolmgr-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.03) 0%, transparent 50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.hud-toolmgr-card:hover {
  border-color: var(--card-accent, var(--hud-cyan));
  background: rgba(0, 240, 255, 0.05);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.12), inset 0 0 20px rgba(0, 240, 255, 0.03);
  transform: translateY(-2px);
}
.hud-toolmgr-card:hover::before {
  opacity: 1;
  width: 4px;
}
.hud-toolmgr-card:hover::after {
  opacity: 1;
}
.hud-toolmgr-card:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Primary / Flagship variant */
.hud-toolmgr-card.primary {
  background: rgba(251, 191, 36, 0.04);
  border-color: rgba(251, 191, 36, 0.25);
  --card-accent: var(--hud-gold);
}
.hud-toolmgr-card.primary:hover {
  background: rgba(251, 191, 36, 0.08);
  border-color: var(--hud-gold);
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.15), inset 0 0 20px rgba(251, 191, 36, 0.04);
}

/* Category color accents */
.hud-toolmgr-card[data-cat*="security"] { --card-accent: #ff4757; }
.hud-toolmgr-card[data-cat*="ai"],
.hud-toolmgr-card[data-cat*="swarm"]    { --card-accent: #c77dff; }
.hud-toolmgr-card[data-cat*="creative"],
.hud-toolmgr-card[data-cat*="media"]    { --card-accent: #ff6b9d; }
.hud-toolmgr-card[data-cat*="learning"],
.hud-toolmgr-card[data-cat*="cognitive"] { --card-accent: var(--hud-green); }
.hud-toolmgr-card[data-cat*="games"],
.hud-toolmgr-card[data-cat*="pets"]     { --card-accent: #ffab40; }

/* Card header: icon + name row */
.hud-toolmgr-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.hud-toolmgr-card-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 1px;
}
.hud-toolmgr-card-meta {
  flex: 1;
  min-width: 0;
}
.hud-toolmgr-card-name {
  font-family: var(--hud-font-display);
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--hud-text-primary);
  line-height: 1.25;
  word-break: break-word;
  letter-spacing: 0.01em;
}
.hud-toolmgr-card-desc {
  font-size: 0.68rem;
  color: var(--hud-text-muted);
  line-height: 1.45;
  margin-top: 5px;
  word-break: break-word;
}
.hud-toolmgr-card-runtime {
  font-family: var(--hud-font-mono);
  font-size: 0.52rem;
  font-weight: 700;
  color: var(--hud-text-muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hud-border-subtle);
  padding: 2px 6px;
  clip-path: var(--hud-clip-sm);
  flex-shrink: 0;
  margin-top: 1px;
  letter-spacing: 0.05em;
}

/* Card footer: contract label + action buttons */
.hud-toolmgr-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: auto;
}
.hud-toolmgr-card-contract {
  font-family: var(--hud-font-mono);
  font-size: 0.55rem;
  color: var(--card-accent, var(--hud-cyan));
  opacity: 0.7;
  letter-spacing: 0.06em;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hud-toolmgr-card-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* Status dot */
.hud-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--hud-green);
  box-shadow: 0 0 6px var(--hud-green);
  animation: hud-pulse-dot 2.4s ease-in-out infinite;
}
@keyframes hud-pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Mobile WS Card — rich row */
.hud-ws-card {
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.hud-ws-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--hud-cyan);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.hud-ws-card:hover,
.hud-ws-card:focus-within {
  border-color: var(--hud-cyan) !important;
  background: rgba(0, 240, 255, 0.06) !important;
  transform: translateX(2px);
}
.hud-ws-card:hover::before,
.hud-ws-card.active::before {
  opacity: 1;
}
.hud-ws-card.active {
  background: rgba(0, 240, 255, 0.08) !important;
  border-color: var(--hud-cyan) !important;
}

/* Category pill filter bar */
.hud-toolmgr-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-bottom: 2px;
}
.hud-toolmgr-search-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.hud-toolmgr-count-badge {
  font-family: var(--hud-font-mono);
  font-size: 0.68rem;
  color: var(--hud-cyan);
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.2);
  padding: 6px 12px;
  clip-path: var(--hud-clip-sm);
  white-space: nowrap;
  flex-shrink: 0;
}
/* Grid scroll track */
#hud-toolmgr-grid::-webkit-scrollbar { width: 4px; }
#hud-toolmgr-grid::-webkit-scrollbar-track { background: transparent; }
#hud-toolmgr-grid::-webkit-scrollbar-thumb {
  background: var(--hud-border);
  border-radius: 2px;
}
#hud-toolmgr-grid::-webkit-scrollbar-thumb:hover {
  background: var(--hud-cyan);
}

/* 8.2 Stage Aspect Ratio Pills & Resolution Badges */
.hud-stage-aspect-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.hud-aspect-pill {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hud-border-subtle);
  color: var(--hud-text-muted);
  font-family: var(--hud-font-mono);
  font-size: 0.60rem;
  font-weight: 700;
  padding: 2px 6px;
  clip-path: var(--hud-clip-sm);
  cursor: pointer;
  transition: all 0.18s ease;
}
.hud-aspect-pill:hover {
  background: rgba(0, 240, 255, 0.12);
  color: var(--hud-text-primary);
  border-color: var(--hud-border);
}
.hud-aspect-pill.active {
  background: rgba(0, 240, 255, 0.2);
  border-color: var(--hud-cyan);
  color: var(--hud-cyan);
  box-shadow: 0 0 8px var(--hud-accent-glow);
}

.hud-res-badge {
  font-family: var(--hud-font-mono);
  font-size: 0.58rem;
  font-weight: 800;
  color: var(--hud-gold);
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid var(--hud-border-gold);
  padding: 2px 6px;
  clip-path: var(--hud-clip-sm);
  letter-spacing: 0.04em;
}

/* 8.3 Stage Header Right Actions: [ SPLIT ], [ OMNI POST ], [ FULLSCREEN ], [ DETACH ] */
.hud-stage-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.hud-stage-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hud-border);
  color: var(--hud-text-body);
  font-family: var(--hud-font-mono);
  font-size: 0.70rem;
  font-weight: 700;
  padding: 5px 11px;
  clip-path: var(--hud-clip-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  white-space: nowrap;
  text-decoration: none;
}

.hud-stage-btn:hover {
  background: rgba(0, 240, 255, 0.15);
  border-color: var(--hud-cyan);
  color: var(--hud-text-primary);
  box-shadow: 0 0 10px var(--hud-accent-glow);
  transform: translateY(-1px);
}
.hud-stage-btn:active {
  transform: translateY(1px);
}

.hud-stage-btn-split {
  background: rgba(0, 255, 102, 0.08);
  border-color: var(--hud-border-green);
  color: var(--hud-green);
}
.hud-stage-btn-split:hover {
  background: var(--hud-green);
  color: #001202;
  box-shadow: 0 0 14px var(--hud-green);
}

.hud-stage-btn-omnipost {
  background: rgba(251, 191, 36, 0.12);
  border-color: var(--hud-border-gold);
  color: var(--hud-gold);
}
.hud-stage-btn-omnipost:hover {
  background: var(--hud-gold);
  color: #05060a;
  border-color: var(--hud-gold);
  box-shadow: 0 0 14px var(--hud-gold);
}

/* 8.4 Modular Stage Viewport & Dual-Stage Split Mode */
.hud-stage-viewport {
  flex: 1;
  width: 100%;
  height: calc(100% - var(--hud-stage-header-h, 44px));
  position: relative;
  overflow: hidden;
  background: var(--hud-viewport-bg);
  box-sizing: border-box;
}

/* Dual-Stage Split Container (.hud-stage-split) */
.hud-stage-split {
  display: grid;
  grid-template-columns: 1fr 6px 1fr;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.hud-stage-split-left,
.hud-stage-split-right {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--hud-viewport-bg);
}

.hud-stage-split-divider {
  width: 6px;
  height: 100%;
  background: var(--hud-deck-bg);
  border-left: 1px solid var(--hud-border);
  border-right: 1px solid var(--hud-border);
  cursor: col-resize;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
  z-index: 25;
}
.hud-stage-split-divider:hover {
  background: var(--hud-cyan);
  box-shadow: 0 0 12px var(--hud-cyan);
}
.hud-divider-grip {
  width: 2px;
  height: 24px;
  background: var(--hud-border-strong);
  border-radius: 1px;
}

/* Stage Host Elements: iFrame, Canvas, or HTML Workspace */
.hud-tool-iframe,
.hud-tool-canvas,
.hud-tool-workspace {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  display: block;
  background: transparent;
  position: absolute;
  inset: 0;
}

/* Telemetry Coordinate Watermark Overlay */
.hud-viewport-telemetry-pill {
  position: absolute;
  bottom: 12px;
  right: 14px;
  background: rgba(3, 5, 12, 0.88);
  border: 1px solid var(--hud-border);
  padding: 3px 8px;
  clip-path: var(--hud-clip-sm);
  font-family: var(--hud-font-mono);
  font-size: 0.60rem;
  color: var(--hud-cyan);
  pointer-events: none;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* =============================================================================
   9. Bottom Quick-Dock (50px Fixed)
   ============================================================================= */
.hud-dock {
  height: var(--hud-dock-h, 50px);
  min-height: var(--hud-dock-h, 50px);
  max-height: var(--hud-dock-h, 50px);
  background: var(--hud-dock-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--hud-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  position: relative;
  z-index: 90;
  box-sizing: border-box;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
}

/* Bottom Quick Launch Tabs: [ DASH ], [ OMNIPOST ], [ SWARM ], [ MEMORY ], [ WEB GEN ], [ PETS ], [ VAULT ] */
.hud-dock-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.hud-dock-tabs::-webkit-scrollbar {
  display: none;
}

.hud-dock-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hud-border-subtle);
  clip-path: var(--hud-clip-sm);
  font-family: var(--hud-font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--hud-text-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  white-space: nowrap;
}

.hud-dock-tab:hover {
  background: rgba(0, 240, 255, 0.12);
  border-color: var(--hud-border);
  color: var(--hud-text-primary);
  transform: translateY(-2px);
}

.hud-dock-tab.active {
  background: rgba(0, 240, 255, 0.18);
  border-color: var(--hud-cyan);
  color: #ffffff;
  box-shadow: 0 0 14px var(--hud-accent-glow);
}
html[data-theme="light"] .hud-dock-tab.active {
  background: rgba(0, 113, 227, 0.15);
  border-color: var(--hud-cyan);
  color: var(--hud-cyan);
}
html[data-theme="matrix"] .hud-dock-tab.active {
  background: rgba(0, 255, 102, 0.2);
  border-color: var(--hud-green);
  color: #ffffff;
}
html[data-theme="gold"] .hud-dock-tab.active {
  background: rgba(251, 191, 36, 0.2);
  border-color: var(--hud-gold);
  color: #ffffff;
}

.hud-dock-tab.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 15%;
  right: 15%;
  height: 2px;
  background: var(--hud-accent);
  box-shadow: 0 0 8px var(--hud-accent);
}

/* Dock Right Telemetry Status */
.hud-dock-telemetry {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--hud-font-mono);
  font-size: 0.65rem;
  color: var(--hud-text-muted);
}

.hud-dock-stat-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* =============================================================================
   10. Slide-Up Sheets System for Tablet / Mobile HUD Operations
   ============================================================================= */
.hud-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 4, 10, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 99994;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.hud-sheet-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
.hud-sheet-backdrop[hidden] {
  display: none !important;
}

.hud-sheet-drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 85vh;
  max-height: 85dvh;
  background: var(--hud-card-solid, #070a14);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-top: 2px solid var(--hud-border-strong, rgba(0, 240, 255, 0.45));
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.95), 0 0 25px rgba(0, 240, 255, 0.2);
  z-index: 99995;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  padding-bottom: env(safe-area-inset-bottom, 12px);
  overflow: hidden;
}
.hud-sheet-drawer.is-open {
  transform: translateY(0);
}
.hud-sheet-drawer[hidden] {
  display: none !important;
}

.hud-sheet-handle-wrap,
.hud-sheet-handle-bar {
  width: 100%;
  padding: 10px 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: pan-y;
}
.hud-sheet-handle,
.hud-sheet-handle-pill {
  width: 48px;
  height: 5px;
  border-radius: 3px;
  background: var(--hud-cyan, #00f0ff);
  opacity: 0.5;
  box-shadow: 0 0 6px rgba(0, 240, 255, 0.3);
}

.hud-sheet-header {
  padding: 6px 18px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--hud-border-subtle, rgba(255, 255, 255, 0.08));
}
.hud-sheet-title {
  font-family: var(--hud-font-display, Orbitron, monospace);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--hud-gold, #fbbf24);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hud-sheet-body {
  padding: 14px 16px 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* =============================================================================
   11. Device-Specific Cockpit Controls & Layouts (Desktop, Tablet, Phone)
   ============================================================================= */

/* ── Mobile Top Header Buttons ── */
.hud-mobile-ws-btn {
  display: none;
  align-items: center;
  gap: 6px;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid var(--hud-border, rgba(0, 240, 255, 0.3));
  color: var(--hud-cyan, #00f0ff);
  font-family: var(--hud-font-display, Orbitron, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  clip-path: var(--hud-clip-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 34px;
  white-space: nowrap;
}
.hud-mobile-ws-btn:hover,
.hud-mobile-ws-btn:focus-visible {
  background: rgba(0, 240, 255, 0.18);
  border-color: var(--hud-cyan);
}
.hud-mobile-ws-caret {
  font-size: 0.65rem;
  color: var(--hud-gold, #fbbf24);
}

.hud-mobile-agent-btn {
  display: none;
  align-items: center;
  gap: 5px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid var(--hud-border-gold, rgba(251, 191, 36, 0.35));
  color: var(--hud-gold, #fbbf24);
  font-family: var(--hud-font-display, Orbitron, monospace);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 5px 8px;
  clip-path: var(--hud-clip-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 34px;
  white-space: nowrap;
}
.hud-mobile-agent-btn:hover,
.hud-mobile-agent-btn:focus-visible {
  background: rgba(251, 191, 36, 0.18);
  border-color: var(--hud-gold);
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.35);
}
.hud-mobile-agent-icon {
  font-size: 0.90rem;
  line-height: 1;
}
.hud-mobile-agent-name {
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hud-mobile-search-btn {
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid var(--hud-border, rgba(0, 240, 255, 0.3));
  color: var(--hud-cyan, #00f0ff);
  font-size: 0.85rem;
  padding: 6px 9px;
  clip-path: var(--hud-clip-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 34px;
  min-width: 34px;
}
.hud-mobile-search-btn:hover,
.hud-mobile-search-btn:focus-visible {
  background: rgba(0, 240, 255, 0.2);
  border-color: var(--hud-cyan);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
}

.hud-mobile-quick-btn {
  display: none;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.15), rgba(251, 191, 36, 0.1));
  border: 1px solid var(--hud-border-strong, rgba(0, 240, 255, 0.4));
  color: var(--hud-text-primary, #ffffff);
  font-family: var(--hud-font-display, Orbitron, monospace);
  font-size: 0.70rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 6px 10px;
  clip-path: var(--hud-clip-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 34px;
  white-space: nowrap;
}
.hud-mobile-quick-btn:hover,
.hud-mobile-quick-btn:focus-visible {
  border-color: var(--hud-gold);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
}

.hud-mobile-theme-btn {
  display: none;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hud-border, rgba(0, 240, 255, 0.3));
  color: var(--hud-text-primary, #ffffff);
  font-family: var(--hud-font-display, Orbitron, monospace);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 6px 9px;
  clip-path: var(--hud-clip-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 34px;
  white-space: nowrap;
}
.hud-mobile-theme-btn:hover,
.hud-mobile-theme-btn:focus-visible {
  background: rgba(0, 240, 255, 0.15);
  border-color: var(--hud-cyan);
}
.hud-mobile-theme-icon {
  font-size: 0.85rem;
}

/* 4-Theme Segmented Pill Bar in Desktop Header */
.hud-theme-picker-group {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--hud-border, rgba(0, 240, 255, 0.25));
  clip-path: var(--hud-clip-sm);
  padding: 2px;
  gap: 2px;
}

.hud-theme-pill {
  font-family: var(--hud-font-mono, monospace);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--hud-text-muted, #94a3b8);
  background: transparent;
  border: 1px solid transparent;
  padding: 3px 7px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  white-space: nowrap;
}
.hud-theme-pill:hover {
  color: var(--hud-text-primary, #ffffff);
  background: rgba(255, 255, 255, 0.06);
}
.hud-theme-pill.dark.active {
  color: #00f0ff;
  background: rgba(0, 240, 255, 0.15);
  border-color: rgba(0, 240, 255, 0.4);
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.3);
}
.hud-theme-pill.matrix.active {
  color: #00ff66;
  background: rgba(0, 255, 102, 0.15);
  border-color: rgba(0, 255, 102, 0.4);
  box-shadow: 0 0 8px rgba(0, 255, 102, 0.3);
}
.hud-theme-pill.gold.active {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.15);
  border-color: rgba(251, 191, 36, 0.4);
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.3);
}
.hud-theme-pill.light.active {
  color: #2563eb;
  background: rgba(37, 99, 235, 0.15);
  border-color: rgba(37, 99, 235, 0.4);
  box-shadow: 0 0 8px rgba(37, 99, 235, 0.3);
}

/* ── Common Device Controls (Device Switcher Badge, SFX Toggle, Backdrops) ── */
.hud-badge-device {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(0, 240, 255, 0.08);
  border-color: var(--hud-border-cyan, rgba(0, 240, 255, 0.3));
  color: var(--hud-cyan);
  font-family: var(--hud-font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  transition: all 0.2s ease;
}
.hud-badge-device:hover {
  background: rgba(0, 240, 255, 0.18);
  border-color: var(--hud-cyan);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

.hud-badge-audio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 7px;
  font-size: 0.78rem;
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--hud-border-subtle);
  color: var(--hud-text-primary);
  transition: all 0.2s ease;
}
.hud-badge-audio:hover {
  border-color: var(--hud-gold);
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.25);
}

/* Tablet Segmented Tactical Bar */
.hud-tablet-tactical-bar {
  display: none;
  background: var(--hud-header-bg, #070a14);
  border-bottom: 1px solid var(--hud-border, rgba(0, 240, 255, 0.2));
  padding: 6px 12px;
  gap: 8px;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  z-index: 85;
  scrollbar-width: none;
}
.hud-tablet-tactical-bar::-webkit-scrollbar {
  display: none;
}
.hud-tablet-pill {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hud-border-subtle, rgba(255, 255, 255, 0.1));
  color: var(--hud-text-secondary, #94a3b8);
  font-family: var(--hud-font-display, Orbitron, monospace);
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 8px 14px;
  min-height: 40px;
  clip-path: var(--hud-clip-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hud-tablet-pill:hover,
.hud-tablet-pill:focus-visible {
  color: var(--hud-cyan);
  border-color: var(--hud-cyan);
  background: rgba(0, 240, 255, 0.1);
}
.hud-tablet-pill.active {
  background: var(--hud-cyan, #00f0ff);
  color: #000000 !important;
  font-weight: 800;
  border-color: var(--hud-cyan);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
}

/* Deck Backdrop Overlay (For Tablet and Mobile) */
.hud-deck-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(3, 5, 12, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.hud-deck-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Mobile Tactical Bottom Navigation Bar (56px fixed) */
.hud-mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: var(--hud-header-bg, #070a14);
  border-top: 1px solid var(--hud-border-strong, rgba(0, 240, 255, 0.35));
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.9), 0 0 15px rgba(0, 240, 255, 0.15);
  z-index: 99990;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-sizing: border-box;
  align-items: stretch;
  justify-content: space-around;
}
.hud-mobile-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--hud-text-muted, #64748b);
  cursor: pointer;
  padding: 4px 2px;
  position: relative;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
  min-height: 48px;
}
.hud-mobile-tab:hover,
.hud-mobile-tab:focus-visible {
  color: var(--hud-cyan);
}
.hud-mobile-tab.active {
  color: var(--hud-cyan);
}
.hud-mobile-tab.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 2px;
  background: var(--hud-cyan, #00f0ff);
  box-shadow: 0 0 8px var(--hud-cyan);
}
.hud-mobile-tab-icon {
  font-size: 1.15rem;
  line-height: 1;
  margin-bottom: 2px;
  transition: transform 0.2s ease;
}
.hud-mobile-tab.active .hud-mobile-tab-icon {
  transform: scale(1.15);
  filter: drop-shadow(0 0 6px var(--hud-cyan));
}
.hud-mobile-tab-label {
  font-family: var(--hud-font-display, Orbitron, monospace);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Quick Hub and Mobile Cards */
.hud-mobile-quick-hub {
  font-family: var(--hud-font-hud, Orbitron, sans-serif);
}
.hud-quick-section {
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--hud-border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 6px;
  padding: 10px 12px;
}
.hud-quick-btn {
  transition: all 0.2s ease;
}
.hud-quick-btn:hover {
  filter: brightness(1.15);
}
/* .hud-ws-card hover handled by primary block above (no !important override needed) */

/* ─────────────────────────────────────────────────────────────────────────────
   A. DESKTOP COCKPIT LAYOUT (>= 1200px or data-device="desktop")
   ───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1200px) {
  html:not([data-device="tablet"]):not([data-device="mobile"]) .hud-workspace,
  html[data-device="desktop"] .hud-workspace {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
  }

  html:not([data-device="tablet"]):not([data-device="mobile"]) .hud-deck,
  html[data-device="desktop"] .hud-deck {
    display: flex;
    position: relative;
    transform: none !important;
    width: auto;
    z-index: 10;
  }

  html:not([data-device="tablet"]):not([data-device="mobile"]) .hud-mobile-nav,
  html[data-device="desktop"] .hud-mobile-nav,
  html:not([data-device="tablet"]):not([data-device="mobile"]) .hud-tablet-tactical-bar,
  html[data-device="desktop"] .hud-tablet-tactical-bar,
  html:not([data-device="tablet"]):not([data-device="mobile"]) .hud-mobile-ws-btn,
  html[data-device="desktop"] .hud-mobile-ws-btn,
  html:not([data-device="tablet"]):not([data-device="mobile"]) .hud-mobile-agent-btn,
  html[data-device="desktop"] .hud-mobile-agent-btn,
  html:not([data-device="tablet"]):not([data-device="mobile"]) .hud-mobile-search-btn,
  html[data-device="desktop"] .hud-mobile-search-btn,
  html:not([data-device="tablet"]):not([data-device="mobile"]) .hud-mobile-quick-btn,
  html[data-device="desktop"] .hud-mobile-quick-btn,
  html:not([data-device="tablet"]):not([data-device="mobile"]) .hud-mobile-theme-btn,
  html[data-device="desktop"] .hud-mobile-theme-btn {
    display: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   B. TABLET COCKPIT LAYOUT (769px - 1199px or data-device="tablet")
   ───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1199px) {
  .hud-workspace {
    grid-template-columns: 1fr;
  }

  .hud-deck-toggle-btn {
    display: inline-flex;
  }

  .hud-tablet-tactical-bar {
    display: flex;
  }

  .hud-deck {
    position: fixed;
    top: var(--hud-header-h, 54px);
    bottom: var(--hud-dock-h, 50px);
    left: 0;
    width: 380px;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 12px 0 40px rgba(0, 0, 0, 0.9);
    z-index: 95;
  }

  .hud-deck.is-open {
    transform: translateX(0);
  }

  .hud-header-center {
    max-width: 220px;
  }

  .hud-mobile-nav,
  .hud-mobile-ws-btn,
  .hud-mobile-agent-btn,
  .hud-mobile-search-btn,
  .hud-mobile-quick-btn,
  .hud-mobile-theme-btn {
    display: none !important;
  }
}

html[data-device="tablet"] .hud-workspace {
  grid-template-columns: 1fr !important;
}
html[data-device="tablet"] .hud-tablet-tactical-bar {
  display: flex !important;
}
html[data-device="tablet"] .hud-deck-toggle-btn {
  display: inline-flex !important;
}
html[data-device="tablet"] .hud-deck {
  position: fixed !important;
  top: var(--hud-header-h, 54px) !important;
  bottom: var(--hud-dock-h, 50px) !important;
  left: 0 !important;
  width: 380px !important;
  transform: translateX(-100%);
  z-index: 95 !important;
}
html[data-device="tablet"] .hud-deck.is-open {
  transform: translateX(0) !important;
}
html[data-device="tablet"] .hud-mobile-nav,
html[data-device="tablet"] .hud-mobile-ws-btn,
html[data-device="tablet"] .hud-mobile-agent-btn,
html[data-device="tablet"] .hud-mobile-search-btn,
html[data-device="tablet"] .hud-mobile-quick-btn,
html[data-device="tablet"] .hud-mobile-theme-btn {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   C. MOBILE PHONE TACTICAL DECK (<= 768px or data-device="mobile")
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --hud-header-h: 52px;
    --hud-dock-h: 60px;
  }

  body {
    overscroll-behavior-y: none;
    -webkit-text-size-adjust: 100%;
  }

  body.hud-sheet-open {
    overflow: hidden !important;
    touch-action: none;
  }

  .hud-header {
    padding: 0 max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left));
    height: 52px;
    gap: 8px;
  }

  .hud-header-left {
    gap: 8px;
    min-width: 0;
    flex-shrink: 1;
  }

  .hud-header-center,
  .hud-badge-ports,
  .hud-badge-time,
  .hud-badge-themes,
  .hud-badge-toolmgr,
  .hud-theme-picker-group,
  .hud-help-btn,
  .hud-brand-tag,
  .hud-topbar-breadcrumb,
  .hud-badge-device,
  .hud-mobile-ws-btn,
  .hud-mobile-agent-btn,
  .hud-mobile-search-btn,
  .hud-mobile-quick-btn,
  .hud-mobile-theme-btn,
  .hud-mobile-micro-tool,
  .hud-mobile-theme-circle-btn,
  .hud-mobile-symbol-btn,
  .hud-mobile-primary-btn,
  .hud-mobile-location-badge {
    display: none !important;
  }

  .hud-header-right {
    gap: 0;
    flex-shrink: 0;
  }

  .hud-mobile-cyber-burger-btn {
    display: inline-flex !important;
  }

  .hud-workspace {
    grid-template-columns: 1fr;
    height: calc(100vh - var(--hud-header-h) - var(--hud-dock-h));
    height: calc(100dvh - var(--hud-header-h) - var(--hud-dock-h));
    overflow: hidden;
  }

  .hud-deck,
  .hud-deck-toggle-btn,
  .hud-dock,
  .hud-tablet-tactical-bar {
    display: none !important;
  }

  .hud-stage {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .hud-stage-header {
    padding: 0 10px;
    gap: 8px;
    height: 42px;
    min-height: 42px;
  }

  .hud-stage-title-wrap {
    min-width: 0;
    flex: 1;
  }

  .hud-stage-name {
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hud-stage-tags,
  .hud-stage-ratio-group,
  .hud-stage-btn-omnipost,
  .hud-stage-btn-nav,
  .hud-split-btn {
    display: none !important;
  }

  .hud-stage-actions {
    gap: 6px;
  }

  .hud-stage-btn {
    min-height: 34px;
    min-width: 34px;
    padding: 6px 10px;
    font-size: 0.68rem;
  }

  .hud-stage-body,
  .hud-stage-iframe-wrap {
    flex: 1;
    height: calc(100% - 42px);
    -webkit-overflow-scrolling: touch;
    padding-top: 4px;
    padding-bottom: 8px;
    box-sizing: border-box;
  }

  .hud-mobile-nav {
    display: flex !important;
    height: calc(var(--hud-dock-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: max(6px, env(safe-area-inset-bottom, 0px));
  }

  .hud-mobile-tab {
    min-height: 46px;
    touch-action: manipulation;
  }

  .hud-viewport-telemetry-pill {
    font-size: 0.55rem;
    padding: 2px 6px;
  }

  .hud-modal-backdrop,
  .hud-sheet-backdrop {
    padding: 0 !important;
    margin: 0 !important;
  }

  .hud-modal-dialog,
  .hud-sheet-drawer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    clip-path: none !important;
  }

  .hud-sheet-body {
    padding: 12px 14px 28px;
    gap: 12px;
    height: calc(100dvh - 48px);
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Extra-Small Screens (<= 480px Phones) ── */
@media (max-width: 480px) {
  :root {
    --hud-header-h: 48px;
    --hud-dock-h: 58px;
  }

  .hud-header {
    height: 48px;
    padding: 0 6px;
  }

  .hud-logo-txt {
    font-size: 0.88rem;
    letter-spacing: 0.05em;
  }

  .hud-mobile-ws-btn {
    max-width: 92px;
    font-size: 0.60rem;
    padding: 4px 5px;
  }

  .hud-mobile-agent-btn {
    max-width: 78px;
    font-size: 0.58rem;
    padding: 3px 5px;
  }
  .hud-mobile-agent-name {
    max-width: 48px;
  }

  .hud-mobile-search-btn {
    min-width: 30px;
    min-height: 30px;
    padding: 3px 6px;
    font-size: 0.76rem;
  }

  .hud-mobile-quick-btn {
    font-size: 0.60rem;
    padding: 4px 6px;
  }

  .hud-mobile-theme-btn {
    padding: 4px 6px;
    font-size: 0.60rem;
  }
  .hud-mobile-theme-btn span:not(.hud-mobile-theme-icon) {
    display: none;
  }

  .hud-mobile-tab {
    padding: 2px 1px;
  }

  .hud-mobile-tab-icon {
    font-size: 1.05rem;
  }

  .hud-mobile-tab-label {
    font-size: 0.52rem;
    letter-spacing: 0.02em;
  }

  .hud-sheet-header {
    padding: 8px 12px 10px;
  }

  .hud-sheet-title {
    font-size: 0.76rem;
  }

  .hud-sheet-body {
    padding: 10px 10px 24px;
    gap: 10px;
  }
}

html[data-device="mobile"] :root {
  --hud-header-h: 52px;
  --hud-dock-h: 60px;
}
html[data-device="mobile"] .hud-header {
  padding: 0 10px !important;
  height: 52px !important;
}
html[data-device="mobile"] .hud-header-center,
html[data-device="mobile"] .hud-badge-ports,
html[data-device="mobile"] .hud-badge-time,
html[data-device="mobile"] .hud-badge-themes,
html[data-device="mobile"] .hud-badge-toolmgr,
html[data-device="mobile"] .hud-help-btn,
html[data-device="mobile"] .hud-brand-tag,
html[data-device="mobile"] .hud-topbar-breadcrumb {
  display: none !important;
}
html[data-device="mobile"] .hud-mobile-ws-btn,
html[data-device="mobile"] .hud-mobile-agent-btn,
html[data-device="mobile"] .hud-mobile-search-btn,
html[data-device="mobile"] .hud-mobile-quick-btn,
html[data-device="mobile"] .hud-mobile-theme-btn {
  display: inline-flex !important;
}
html[data-device="mobile"] .hud-workspace {
  grid-template-columns: 1fr !important;
  height: calc(100vh - 52px - 60px) !important;
  height: calc(100dvh - 52px - 60px) !important;
}
html[data-device="mobile"] .hud-deck {
  display: none !important;
}
html[data-device="mobile"] .hud-dock {
  display: none !important;
}
html[data-device="mobile"] .hud-mobile-nav {
  display: flex !important;
}
html[data-device="mobile"] .hud-tablet-tactical-bar {
  display: none !important;
}

/* =============================================================================
   12. Cyberpunk HUD Modals & Dialogs (Ports, Tool Manager, Help, Themes)
   ============================================================================= */
.hud-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(3, 5, 12, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 99990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}
.hud-modal-backdrop[hidden] {
  display: none !important;
}

.hud-modal-dialog {
  background: var(--hud-card-solid);
  border: 1px solid var(--hud-border-strong);
  clip-path: var(--hud-clip-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 0 0 30px var(--hud-accent-glow);
  width: min(720px, 94vw);
  max-height: min(85vh, 760px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  animation: hudModalEnter 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes hudModalEnter {
  from { opacity: 0; transform: scale(0.96) translateY(12px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.hud-modal-header {
  padding: 14px 18px;
  background: var(--hud-header-bg);
  border-bottom: 1px solid var(--hud-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hud-modal-title {
  font-family: var(--hud-font-hud);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--hud-gold);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hud-modal-close-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hud-border);
  color: var(--hud-text-secondary);
  font-family: var(--hud-font-mono);
  font-size: 0.82rem;
  font-weight: 800;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  clip-path: var(--hud-clip-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}
.hud-modal-close-btn:hover {
  background: var(--hud-red);
  color: #ffffff;
  border-color: var(--hud-red);
}

.hud-modal-body {
  padding: 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hud-modal-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--hud-input-bg);
  border: 1px solid var(--hud-border);
  clip-path: var(--hud-clip-sm);
  padding: 6px 12px;
}
.hud-modal-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--hud-font-mono);
  font-size: 0.78rem;
  color: var(--hud-text-primary);
}

.hud-tool-mgr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.hud-tool-mgr-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--hud-border-subtle);
  clip-path: var(--hud-clip-sm);
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.2s ease;
}
.hud-tool-mgr-card:hover {
  background: rgba(0, 240, 255, 0.08);
  border-color: var(--hud-cyan);
  transform: translateY(-2px);
  box-shadow: 0 0 14px var(--hud-accent-glow);
}
.hud-tool-mgr-card.active {
  border-color: var(--hud-gold);
  background: rgba(251, 191, 36, 0.1);
}

.hud-tool-mgr-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hud-tool-mgr-icon {
  font-size: 1.1rem;
}
.hud-tool-mgr-title {
  font-family: var(--hud-font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--hud-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hud-tool-mgr-desc {
  font-size: 0.68rem;
  color: var(--hud-text-secondary);
  line-height: 1.35;
  margin: 0;
}
.hud-tool-mgr-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}
.hud-tool-mgr-launch {
  font-family: var(--hud-font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--hud-cyan);
}

/* Ports Topology Grid */
.hud-ports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.hud-port-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--hud-border-subtle);
  clip-path: var(--hud-clip-sm);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.hud-port-num {
  font-family: var(--hud-font-mono);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--hud-cyan);
}
.hud-port-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hud-port-service {
  font-family: var(--hud-font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--hud-text-primary);
}
.hud-port-desc {
  font-size: 0.64rem;
  color: var(--hud-text-muted);
}
.hud-port-status {
  font-family: var(--hud-font-mono);
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 6px;
  clip-path: var(--hud-clip-sm);
  background: rgba(0, 255, 102, 0.1);
  border: 1px solid rgba(0, 255, 102, 0.3);
  color: var(--hud-green);
}

/* Help Shortcuts List */
.hud-shortcuts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
}
.hud-shortcut-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--hud-border-subtle);
  padding: 6px 10px;
  clip-path: var(--hud-clip-sm);
  font-size: 0.76rem;
  color: var(--hud-text-secondary);
}
.hud-shortcut-item kbd {
  font-family: var(--hud-font-mono);
  font-size: 0.70rem;
  font-weight: 800;
  color: var(--hud-cyan);
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid var(--hud-border);
  padding: 2px 6px;
  border-radius: 3px;
}

/* =============================================================================
   13. Tactical Visualizers (Audio Oscilloscope, Polar Radar, 6-Pillar Calculus)
   ============================================================================= */

/* 13.1 Real-Time Audio Oscilloscope */
.hud-oscilloscope-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hud-input-bg);
  border: 1px solid var(--hud-border);
  padding: 2px 4px;
  clip-path: var(--hud-clip-sm);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.hud-oscilloscope-canvas {
  display: block;
  width: 180px;
  height: 34px;
  border-radius: 2px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.hud-oscilloscope-canvas:hover {
  opacity: 0.9;
}

/* 13.2 360° Polar Radar Mini-Map */
.hud-radar-canvas-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 6, 12, 0.95);
  border: 1px solid var(--hud-border-subtle);
  clip-path: var(--hud-clip-sm);
  padding: 6px;
  position: relative;
  overflow: hidden;
}

.hud-radar-canvas {
  display: block;
  width: 220px;
  height: 220px;
  cursor: crosshair;
}

.hud-radar-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px;
  font-family: var(--hud-font-mono);
  font-size: 0.62rem;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
}

/* 13.3 6-Pillar Mathematical Calculus */
.hud-pillar-grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.hud-pillar-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hud-pillar-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--hud-font-mono);
  font-size: 0.62rem;
}

.hud-pillar-name {
  color: var(--hud-text-body);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
}
.hud-pillar-name span {
  color: var(--hud-cyan);
}

.hud-pillar-val {
  color: var(--hud-gold);
  font-weight: 800;
  font-family: var(--hud-font-mono);
}

.hud-meter-track {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.hud-meter-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--hud-cyan), var(--hud-green));
  box-shadow: 0 0 8px var(--hud-accent-glow);
  transition: width 0.4s ease;
}
.hud-meter-fill.gold {
  background: linear-gradient(90deg, var(--hud-gold), var(--hud-gold-bright));
}
.hud-meter-fill.violet {
  background: linear-gradient(90deg, var(--hud-violet), var(--hud-magenta));
}

/* =============================================================================
   13. Tool-Specific HUD Operations Deck Card & Action Dials
   ============================================================================= */
.hud-tool-context-card {
  border-color: var(--hud-border-strong);
  background: linear-gradient(180deg, rgba(0, 240, 255, 0.04), var(--hud-card-bg));
  position: relative;
  overflow: hidden;
}
.hud-tool-context-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--hud-gold);
}
.hud-tool-context-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.hud-tool-context-actions-grid.single-col {
  grid-template-columns: 1fr;
}
.hud-tool-act-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hud-border);
  color: var(--hud-text-primary);
  font-family: var(--hud-font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  clip-path: var(--hud-clip-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  user-select: none;
}
.hud-tool-act-btn:hover {
  background: rgba(0, 240, 255, 0.15);
  border-color: var(--hud-cyan);
  color: var(--hud-cyan);
  transform: translateY(-1px);
}
.hud-tool-act-btn.primary {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(0, 112, 243, 0.25));
  border-color: var(--hud-cyan);
  color: var(--hud-cyan);
  grid-column: span 2;
  font-weight: 800;
}
.hud-tool-act-btn.primary:hover {
  background: linear-gradient(135deg, var(--hud-cyan), var(--hud-blue));
  color: var(--hud-text-on-accent);
  box-shadow: 0 0 14px var(--hud-accent-glow);
}
.hud-tool-act-btn.gold {
  border-color: var(--hud-border-gold);
  color: var(--hud-gold);
}
.hud-tool-act-btn.gold:hover {
  background: rgba(251, 191, 36, 0.2);
  color: #ffffff;
}
.hud-tool-act-btn.green {
  border-color: var(--hud-border-green);
  color: var(--hud-green);
}
.hud-tool-act-btn.green:hover {
  background: rgba(0, 255, 102, 0.2);
  color: #ffffff;
}
.hud-tool-act-btn.violet {
  border-color: rgba(168, 85, 247, 0.5);
  color: var(--hud-violet);
}
.hud-tool-act-btn.violet:hover {
  background: rgba(168, 85, 247, 0.2);
  color: #ffffff;
}
.hud-tool-context-dials-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding-top: 4px;
  border-top: 1px dashed var(--hud-border-subtle);
}
.hud-tool-dial-label {
  font-family: var(--hud-font-mono);
  font-size: 0.60rem;
  color: var(--hud-text-muted);
  font-weight: 700;
  margin-right: 2px;
}
.hud-tool-dial-chip {
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--hud-border-subtle);
  font-family: var(--hud-font-mono);
  font-size: 0.62rem;
  color: var(--hud-text-secondary);
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.hud-tool-dial-chip:hover, .hud-tool-dial-chip.active {
  border-color: var(--hud-cyan);
  color: var(--hud-cyan);
  background: rgba(0, 240, 255, 0.1);
}
.hud-tool-context-telemetry-box {
  background: rgba(0, 5, 12, 0.6);
  border: 1px solid var(--hud-border-subtle);
  padding: 6px 8px;
  font-family: var(--hud-font-mono);
  font-size: 0.62rem;
  color: var(--hud-text-muted);
  display: flex;
  flex-direction: column;
  gap: 3px;
  clip-path: var(--hud-clip-sm);
}
.hud-tool-context-telemetry-box .tele-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hud-tool-context-telemetry-box .tele-val {
  color: var(--hud-cyan-soft);
  font-weight: 700;
}

/* =============================================================================
   14. Motion Safeguards (prefers-reduced-motion)
   ============================================================================= */
.hud-app-shell[data-hud-mode="dashboard"] .hud-stage-inner-wrap {
  opacity: 0;
  pointer-events: none;
}
.hud-app-shell[data-hud-mode="dashboard"] .hud-stage-actions,
.hud-app-shell[data-hud-mode="dashboard"] .hud-stage-ratio-group {
  opacity: 0.28;
  pointer-events: none;
}
.hud-app-shell[data-hud-mode="tool"] .hud-dashboard {
  display: none !important;
}
.hud-app-shell[data-hud-mode="tool"] .hud-card.hud-tool-context-card {
  order: -1;
  border-color: var(--hud-cyan);
  box-shadow: 0 0 18px var(--accent-glow, rgba(0, 240, 255, 0.12));
}
.hud-app-shell[data-hud-mode="tool"] .hud-radar-container {
  max-height: 88px;
  overflow: hidden;
}
/* =============================================================================
   14. ⚡ SOVEREIGN COMMAND DECK & HYPER-WORKSPACE DASHBOARD
   ============================================================================= */

/* Master Dashboard Scrollable Surface */
.hud-dashboard {
  position: absolute;
  inset: 0;
  z-index: 6;
  padding: 24px 28px 48px;
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--hud-accent, #00f0ff) 10%, transparent), transparent 60%),
    radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--hud-gold, #fbbf24) 5%, transparent), transparent 40%),
    linear-gradient(180deg, color-mix(in srgb, var(--hud-bg, #030408) 94%, transparent), var(--hud-bg, #030408));
  color: var(--hud-text-primary, #ffffff);
  overflow-y: auto;
  scrollbar-width: thin;
}
.hud-dashboard:not(.is-open) { display: none !important; }

/* 1. Hero Header Banner */
.hud-dash-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 22px 24px;
  background: color-mix(in srgb, var(--hud-card-bg, #0a0f20) 92%, transparent);
  border: 1px solid var(--hud-border, rgba(0, 240, 255, 0.28));
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 240, 255, 0.08);
}
.hud-dash-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--hud-cyan, #00f0ff), var(--hud-gold, #fbbf24), transparent);
}
.hud-dash-hero-left {
  flex: 1;
  min-width: 0;
}
.hud-dash-kicker {
  font-family: var(--hud-font-mono, ui-monospace, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--hud-gold, #fbbf24);
  text-transform: uppercase;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.hud-kicker-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hud-gold, #fbbf24);
  box-shadow: 0 0 8px var(--hud-gold, #fbbf24);
}
.hud-dash-title {
  margin: 0 0 6px;
  font-family: var(--hud-font-display, Orbitron, sans-serif);
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  font-weight: 900;
  letter-spacing: 0.03em;
  background: linear-gradient(135deg, #ffffff 30%, var(--hud-cyan, #00f0ff) 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
}
.hud-dash-subtitle {
  margin: 0;
  max-width: 65ch;
  color: var(--hud-text-secondary, #94a3b8);
  font-size: 0.88rem;
  line-height: 1.5;
}

.hud-dash-hero-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

/* Live Ports Matrix in Hero */
.hud-dash-ports-matrix {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  background: rgba(3, 7, 18, 0.75);
  padding: 5px 8px;
  border: 1px solid var(--hud-border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: 4px;
}
.hud-dash-port-pill {
  font-family: var(--hud-font-mono, ui-monospace, monospace);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 7px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--hud-text-secondary, #94a3b8);
  transition: all 0.2s ease;
}
.hud-dash-port-pill .hud-port-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.hud-dash-port-pill.ok {
  color: var(--hud-green, #00ff66);
  border-color: rgba(0, 255, 102, 0.4);
  background: rgba(0, 255, 102, 0.08);
  box-shadow: 0 0 8px rgba(0, 255, 102, 0.2);
}
.hud-dash-port-pill.down {
  color: #fb7185;
  border-color: rgba(251, 113, 133, 0.45);
  background: rgba(251, 113, 133, 0.08);
}
.hud-dash-port-pill.unk {
  color: var(--hud-gold, #fbbf24);
  border-color: rgba(251, 191, 36, 0.35);
}

.hud-dash-hero-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.hud-dash-hero-btn {
  font-family: var(--hud-font-mono, monospace);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 7px 12px;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(0, 240, 255, 0.06));
  border: 1px solid var(--hud-cyan, #00f0ff);
  color: var(--hud-cyan, #00f0ff);
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.18s ease;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.2);
}
.hud-dash-hero-btn:hover {
  background: var(--hud-cyan, #00f0ff);
  color: #02040a;
  transform: translateY(-1px);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
}
.hud-dash-hero-btn.secondary {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--hud-border, rgba(0, 240, 255, 0.22));
  color: var(--hud-text-secondary, #94a3b8);
  box-shadow: none;
}
.hud-dash-hero-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-color: var(--hud-text-primary, #ffffff);
}

/* 2. Interactive Search and Category Filter Bar */
.hud-dash-filter-bar {
  margin: 18px 0 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hud-dash-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.hud-dash-search-icon {
  position: absolute;
  left: 14px;
  font-size: 0.95rem;
  color: var(--hud-cyan, #00f0ff);
  pointer-events: none;
}
.hud-dash-search-input {
  width: 100%;
  padding: 11px 90px 11px 40px;
  font-family: var(--hud-font-mono, monospace);
  font-size: 0.86rem;
  background: color-mix(in srgb, var(--hud-card-bg, #0a0f20) 95%, transparent);
  border: 1px solid var(--hud-border, rgba(0, 240, 255, 0.25));
  border-radius: 5px;
  color: var(--hud-text-primary, #ffffff);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
  transition: all 0.2s ease;
}
.hud-dash-search-input:focus {
  outline: none;
  border-color: var(--hud-cyan, #00f0ff);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.35), inset 0 2px 8px rgba(0, 0, 0, 0.6);
}
.hud-dash-search-input::placeholder {
  color: var(--hud-text-muted, #64748b);
  font-style: italic;
}
.hud-dash-search-count {
  position: absolute;
  right: 12px;
  font-family: var(--hud-font-mono, monospace);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: var(--hud-cyan, #00f0ff);
  border-radius: 3px;
}

/* Category Filter Pills */
.hud-dash-cat-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.hud-dash-cat-pill {
  font-family: var(--hud-font-mono, monospace);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 5px 11px;
  background: rgba(10, 15, 32, 0.8);
  border: 1px solid var(--hud-border-subtle, rgba(255, 255, 255, 0.1));
  color: var(--hud-text-secondary, #94a3b8);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.hud-dash-cat-pill:hover {
  color: var(--hud-text-primary, #ffffff);
  border-color: var(--hud-border, rgba(0, 240, 255, 0.3));
  background: rgba(0, 240, 255, 0.08);
}
.hud-dash-cat-pill.active {
  color: var(--hud-text-on-accent, #02040a);
  background: var(--hud-cyan, #00f0ff);
  border-color: var(--hud-cyan, #00f0ff);
  font-weight: 800;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.4);
}

/* 3. Learned Recents Strip */
.hud-dash-recents-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  background: color-mix(in srgb, var(--hud-card-bg, #0a0f20) 70%, transparent);
  border: 1px solid var(--hud-border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 4px;
  margin-bottom: 18px;
}
.hud-dash-recents-lbl {
  font-family: var(--hud-font-mono, monospace);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--hud-gold, #fbbf24);
  white-space: nowrap;
}
.hud-dash-recents-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  flex: 1;
}
.hud-dash-recent-chip {
  font-family: var(--hud-font-mono, monospace);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 8px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.35);
  color: var(--hud-gold, #fbbf24);
  border-radius: 3px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
}
.hud-dash-recent-chip:hover {
  background: rgba(251, 191, 36, 0.22);
  border-color: var(--hud-gold, #fbbf24);
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
  transform: translateY(-1px);
}
.hud-recent-opens {
  font-size: 0.6rem;
  opacity: 0.75;
  padding: 1px 4px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 2px;
}
.hud-dash-empty-hint {
  font-size: 0.76rem;
  color: var(--hud-text-muted, #64748b);
  font-style: italic;
}

/* 4. Flagship Sovereign Shelf */
.hud-dash-flagship-shelf {
  margin-bottom: 26px;
}
.hud-dash-section-kicker {
  font-family: var(--hud-font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--hud-cyan, #00f0ff);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hud-dash-section-kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--hud-cyan, #00f0ff), transparent);
}
.hud-dash-flagship-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.hud-dash-flagship-card {
  background: color-mix(in srgb, var(--hud-card-bg, #0a0f20) 92%, transparent);
  border: 1px solid var(--hud-border, rgba(0, 240, 255, 0.3));
  border-radius: 6px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.hud-dash-flagship-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--hud-gold, #fbbf24), var(--hud-cyan, #00f0ff));
  opacity: 0.85;
}
.hud-dash-flagship-card:hover {
  transform: translateY(-2px);
  border-color: var(--hud-cyan, #00f0ff);
  box-shadow: 0 8px 24px rgba(0, 240, 255, 0.22), 0 0 16px rgba(0, 240, 255, 0.12);
}
.hud-flagship-top {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.hud-flagship-badge-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hud-flagship-cat {
  font-family: var(--hud-font-mono, monospace);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--hud-gold, #fbbf24);
}
.hud-flagship-runtime {
  font-family: var(--hud-font-mono, monospace);
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 5px;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: var(--hud-cyan, #00f0ff);
  border-radius: 2px;
}
.hud-flagship-title-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.hud-flagship-icon {
  font-size: 1.6rem;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.4));
}
.hud-flagship-title {
  margin: 0;
  font-family: var(--hud-font-display, Orbitron, sans-serif);
  font-size: 1rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.02em;
}
.hud-flagship-contract {
  font-family: var(--hud-font-mono, monospace);
  font-size: 0.62rem;
  color: var(--hud-text-muted, #64748b);
  letter-spacing: 0.05em;
}
.hud-flagship-desc {
  margin: 2px 0 0;
  font-size: 0.84rem;
  color: var(--hud-text-secondary, #94a3b8);
  line-height: 1.4;
}
.hud-flagship-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid var(--hud-border-subtle, rgba(255, 255, 255, 0.08));
}

/* Dashboard Action Buttons */
.hud-dash-btn {
  font-family: var(--hud-font-mono, monospace);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 6px 11px;
  border-radius: 3px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.15s ease;
  text-decoration: none;
}
.hud-dash-btn.primary {
  flex: 1;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.25), rgba(0, 240, 255, 0.08));
  border: 1px solid var(--hud-cyan, #00f0ff);
  color: var(--hud-cyan, #00f0ff);
  font-weight: 800;
}
.hud-dash-btn.primary:hover {
  background: var(--hud-cyan, #00f0ff);
  color: #02040a;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.45);
}
.hud-dash-btn.split {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hud-border, rgba(0, 240, 255, 0.22));
  color: var(--hud-text-secondary, #94a3b8);
}
.hud-dash-btn.split:hover {
  background: rgba(0, 255, 102, 0.15);
  border-color: var(--hud-green, #00ff66);
  color: var(--hud-green, #00ff66);
  box-shadow: 0 0 10px rgba(0, 255, 102, 0.3);
}
.hud-dash-btn.popout {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hud-border-subtle, rgba(255, 255, 255, 0.1));
  color: var(--hud-text-muted, #64748b);
  padding: 6px 9px;
}
.hud-dash-btn.popout:hover {
  color: #ffffff;
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
}

.hud-dash-btn.mini {
  font-size: 0.64rem;
  padding: 4px 7px;
}

/* 5. Categorized Tool Directory */
.hud-dash-directory-wrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.hud-dash-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hud-dash-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hud-dash-group-title {
  font-family: var(--hud-font-mono, monospace);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--hud-cyan, #00f0ff);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.hud-dash-group-count {
  color: var(--hud-text-muted, #64748b);
  font-weight: 600;
}
.hud-dash-group-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--hud-border, rgba(0, 240, 255, 0.25)), transparent);
}
.hud-dash-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}

/* Standard Tool Card */
.hud-dash-tool-card {
  background: color-mix(in srgb, var(--hud-card-bg, #0a0f20) 85%, transparent);
  border: 1px solid var(--hud-border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: 4px;
  padding: 11px 13px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 9px;
  transition: all 0.15s ease;
  position: relative;
}
.hud-dash-tool-card:hover {
  border-color: var(--hud-cyan, #00f0ff);
  background: color-mix(in srgb, var(--hud-card-bg, #0a0f20) 95%, transparent);
  box-shadow: 0 4px 16px rgba(0, 240, 255, 0.16);
  transform: translateY(-2px);
}
.hud-dash-tool-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.hud-dash-tool-title-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
}
.hud-dash-tool-icon {
  font-size: 1.2rem;
  line-height: 1;
}
.hud-dash-tool-name {
  display: block;
  font-family: var(--hud-font-sans, sans-serif);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--hud-text-primary, #ffffff);
  line-height: 1.2;
}
.hud-dash-tool-runtime {
  font-family: var(--hud-font-mono, monospace);
  font-size: 0.58rem;
  color: var(--hud-cyan, #00f0ff);
  opacity: 0.85;
}
.hud-dash-tool-contract {
  font-family: var(--hud-font-mono, monospace);
  font-size: 0.56rem;
  color: var(--hud-text-dim, #475569);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.hud-dash-tool-desc {
  margin: 0;
  font-size: 0.76rem;
  color: var(--hud-text-secondary, #94a3b8);
  line-height: 1.35;
}
.hud-dash-tool-actions {
  display: flex;
  gap: 5px;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--hud-border-subtle, rgba(255, 255, 255, 0.06));
}

.hud-dock-tabs {
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  scrollbar-width: thin;
}
.hud-dock-learned { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.hud-dock-tab.learned {
  border-color: color-mix(in srgb, var(--hud-gold, #fbbf24) 55%, transparent);
  color: var(--hud-gold, #fbbf24);
  background: rgba(251, 191, 36, 0.06);
}
.hud-dock-tab.learned:hover,
.hud-dock-tab.learned:focus-visible {
  border-color: var(--hud-gold, #fbbf24);
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.3);
}
.hud-dock-health { display: flex; gap: 4px; align-items: center; }

/* Stage Self-Healing Watchdog Overlay */
.hud-stage-heal {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--hud-bg, #030408) 88%, transparent);
  backdrop-filter: blur(8px);
}
.hud-stage-heal[hidden] { display: none !important; }
.hud-heal-card {
  max-width: 460px;
  width: 90%;
  padding: 24px 26px;
  border: 1px solid rgba(251, 113, 133, 0.45);
  background: var(--hud-card-solid, #0a0f20);
  border-radius: 6px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8), 0 0 24px rgba(251, 113, 133, 0.2);
}
.hud-heal-title {
  font-family: var(--hud-font-display, Orbitron, monospace);
  letter-spacing: 0.16em;
  font-size: 0.8rem;
  font-weight: 800;
  color: #fb7185;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hud-heal-title::before {
  content: "⚠️";
}
.hud-heal-copy { 
  margin: 0 0 18px; 
  color: var(--hud-text-secondary, #94a3b8); 
  font-size: 0.92rem; 
  line-height: 1.5;
}
.hud-heal-actions { display: flex; gap: 10px; }

/* Global Focus-Visible Accessibility Rings */
button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
.hud-dock-tab:focus-visible,
.hud-stage-btn:focus-visible,
.hud-header-btn:focus-visible,
.hud-agent-row:focus-visible,
.hud-dash-btn:focus-visible,
.hud-dash-cat-pill:focus-visible,
.hud-dash-recent-chip:focus-visible {
  outline: 2px solid var(--hud-cyan, #00f0ff) !important;
  outline-offset: 2px !important;
}

/* Light Theme High Contrast Overrides */
html[data-theme="light"] .hud-dashboard,
body[data-theme="light"] .hud-dashboard {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0, 113, 227, 0.08), transparent 60%),
    linear-gradient(180deg, #f8fafc, #ffffff);
  color: #0f172a;
}
html[data-theme="light"] .hud-dash-hero,
body[data-theme="light"] .hud-dash-hero {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .hud-dash-title,
body[data-theme="light"] .hud-dash-title {
  background: linear-gradient(135deg, #0f172a 30%, #0071e3 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
html[data-theme="light"] .hud-dash-flagship-card,
body[data-theme="light"] .hud-dash-flagship-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}
html[data-theme="light"] .hud-flagship-title,
body[data-theme="light"] .hud-flagship-title {
  color: #0f172a;
}
html[data-theme="light"] .hud-dash-tool-card,
body[data-theme="light"] .hud-dash-tool-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
html[data-theme="light"] .hud-dash-tool-name,
body[data-theme="light"] .hud-dash-tool-name {
  color: #0f172a;
}
html[data-theme="light"] .hud-dash-search-input,
body[data-theme="light"] .hud-dash-search-input {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}
html[data-theme="light"] .hud-dash-cat-pill,
body[data-theme="light"] .hud-dash-cat-pill {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}
html[data-theme="light"] .hud-dash-cat-pill.active,
body[data-theme="light"] .hud-dash-cat-pill.active {
  background: #0071e3;
  color: #ffffff;
  border-color: #0071e3;
}
html[data-theme="light"] .hud-heal-card,
body[data-theme="light"] .hud-heal-card {
  background: #ffffff;
  border-color: #fda4af;
}

@media (max-width: 1100px) {
  .hud-dash-hero { flex-direction: column; align-items: stretch; }
  .hud-dash-hero-right { align-items: flex-start; }
  .hud-dock-learned { display: none; }
}

/* =============================================================================
   15. ⚡ CYBERPUNK EDGERUNNERS POV VISOR & OCULAR HUD (KIROSHI MK.IV + SANDEVISTAN)
   ============================================================================= */

/* 15.1 Kiroshi Optics MK.IV POV Visor Frame & Vignette */
.kiroshi-visor-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 80;
  overflow: hidden;
  transition: opacity 0.3s ease;
}

.kiroshi-pov-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(3, 7, 18, 0.45) 85%, rgba(3, 7, 18, 0.92) 100%),
    linear-gradient(180deg, rgba(255, 230, 0, 0.03) 0%, transparent 15%, transparent 85%, rgba(0, 240, 255, 0.03) 100%);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.7);
}

/* 15.2 Kiroshi Corner Precision Brackets & Ocular Stamps */
.kiroshi-corner-frame {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 3px;
  pointer-events: none !important;
  z-index: 25;
}

.kiroshi-corner-tl { top: 12px; left: 16px; }
.kiroshi-corner-tr { top: 12px; right: 16px; align-items: flex-end; }
.kiroshi-corner-bl { bottom: 34px; left: 16px; }
.kiroshi-corner-br { bottom: 34px; right: 16px; align-items: flex-end; }

.kiroshi-corner-bracket {
  width: 32px;
  height: 32px;
  border-color: var(--kiroshi-yellow, #ffe600);
  opacity: 0.85;
  position: relative;
  transition: all 0.25s ease;
}

.kiroshi-corner-tl .kiroshi-corner-bracket {
  border-top: 2px solid var(--kiroshi-yellow, #ffe600);
  border-left: 2px solid var(--kiroshi-yellow, #ffe600);
  clip-path: polygon(0 0, 100% 0, 100% 4px, 4px 4px, 4px 100%, 0 100%);
}
.kiroshi-corner-tr .kiroshi-corner-bracket {
  border-top: 2px solid var(--kiroshi-yellow, #ffe600);
  border-right: 2px solid var(--kiroshi-yellow, #ffe600);
  clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - 4px) 100%, calc(100% - 4px) 4px, 0 4px);
}
.kiroshi-corner-bl .kiroshi-corner-bracket {
  border-bottom: 2px solid var(--cyber-cyan, #00f0ff);
  border-left: 2px solid var(--cyber-cyan, #00f0ff);
  clip-path: polygon(0 0, 4px 0, 4px calc(100% - 4px), 100% calc(100% - 4px), 100% 100%, 0 100%);
}
.kiroshi-corner-br .kiroshi-corner-bracket {
  border-bottom: 2px solid var(--cyber-cyan, #00f0ff);
  border-right: 2px solid var(--cyber-cyan, #00f0ff);
  clip-path: polygon(calc(100% - 4px) 0, 100% 0, 100% 100%, 0 100%, 0 calc(100% - 4px), calc(100% - 4px) calc(100% - 4px));
}

.kiroshi-corner-led {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--kiroshi-yellow, #ffe600);
  box-shadow: 0 0 8px var(--kiroshi-yellow, #ffe600);
  margin: 2px;
}
.kiroshi-corner-bl .kiroshi-corner-led,
.kiroshi-corner-br .kiroshi-corner-led {
  background: var(--cyber-cyan, #00f0ff);
  box-shadow: 0 0 8px var(--cyber-cyan, #00f0ff);
}

.kiroshi-stamp-txt {
  font-family: var(--hud-font-mono, "JetBrains Mono", monospace);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--kiroshi-yellow, #ffe600);
  text-shadow: 0 0 8px var(--kiroshi-yellow-glow, rgba(255, 230, 0, 0.45));
  line-height: 1.35;
  opacity: 0.88;
}
.kiroshi-stamp-txt.txt-right {
  text-align: right;
}
.kiroshi-dim {
  color: var(--hud-text-muted, #64748b);
  font-weight: 500;
  font-size: 0.52rem;
}

/* 15.3 Optical Artificial Horizon & Flight Attitude Ladder */
.kiroshi-horizon-ladder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 440px;
  max-width: 90vw;
  height: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  z-index: 82;
  opacity: 0.85;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.kiroshi-horizon-ladder.is-hidden {
  opacity: 0 !important;
  pointer-events: none;
}

/* Bearing Compass Tape */
.kiroshi-compass-tape {
  width: 320px;
  max-width: 80%;
  background: rgba(3, 7, 18, 0.7);
  border: 1px solid var(--hud-border, rgba(0, 240, 255, 0.22));
  clip-path: var(--hud-clip-sm);
  padding: 3px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
}

.compass-tape-track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-family: var(--hud-font-mono, monospace);
  font-size: 0.55rem;
  color: var(--hud-text-muted, #64748b);
  letter-spacing: 0.06em;
}

.compass-tape-track .cardinal {
  color: var(--kiroshi-yellow, #ffe600);
  font-weight: 800;
}
.compass-tape-track .active-hdg {
  color: var(--cyber-cyan, #00f0ff);
  font-weight: 800;
  background: rgba(0, 240, 255, 0.12);
  padding: 1px 4px;
  border-radius: 2px;
}
.compass-center-caret {
  font-size: 0.50rem;
  color: var(--cyber-cyan, #00f0ff);
  line-height: 1;
  margin-top: -1px;
}

/* Roll Bank Arc */
.kiroshi-roll-arc {
  position: relative;
  width: 240px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--hud-font-mono, monospace);
  font-size: 0.50rem;
  color: var(--hud-text-muted, #64748b);
}
.roll-arc-line {
  position: absolute;
  top: 10px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hud-border-strong, rgba(0, 240, 255, 0.6)), transparent);
}
.roll-pointer-triangle {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--kiroshi-yellow, #ffe600);
  font-size: 0.52rem;
}

/* Pitch Ladder Rungs */
.kiroshi-pitch-ladder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin: 10px 0;
}

.pitch-rung {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 280px;
  position: relative;
}

.rung-val {
  font-family: var(--hud-font-mono, monospace);
  font-size: 0.56rem;
  font-weight: 700;
  color: var(--optic-ladder-color, rgba(255, 230, 0, 0.75));
  width: 24px;
  text-align: center;
}
.rung-line {
  flex: 1;
  height: 1.5px;
  background: var(--optic-ladder-color, rgba(255, 230, 0, 0.75));
  box-shadow: 0 0 6px var(--kiroshi-yellow-glow, rgba(255, 230, 0, 0.35));
}
.rung-line.short {
  flex: 0.5;
  opacity: 0.6;
}
.rung-line.dashed {
  background: repeating-linear-gradient(90deg, var(--cyber-cyan, #00f0ff) 0, var(--cyber-cyan, #00f0ff) 6px, transparent 6px, transparent 10px);
  box-shadow: 0 0 6px var(--cyber-cyan-glow, rgba(0, 240, 255, 0.35));
}
.pitch-rung.negative .rung-val {
  color: var(--cyber-cyan, #00f0ff);
}
.rung-gap {
  width: 48px;
}

/* Central Horizon Zero Line with Diamond Aim Pip */
.pitch-rung.horizon-zero {
  width: 340px;
  gap: 16px;
}
.horizon-wing {
  flex: 1;
  height: 2px;
  background: var(--kiroshi-yellow, #ffe600);
  box-shadow: 0 0 10px var(--kiroshi-yellow, #ffe600);
}
.horizon-diamond-pip {
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--kiroshi-yellow, #ffe600);
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px var(--kiroshi-yellow-glow, rgba(255, 230, 0, 0.45));
  background: rgba(3, 7, 18, 0.4);
}
.horizon-cross {
  transform: rotate(-45deg);
  font-family: var(--hud-font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--kiroshi-yellow, #ffe600);
  line-height: 1;
}

/* 15.4 Tactical Ocular Crosshair & Targeting Reticle */
.kiroshi-targeting-reticle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  pointer-events: none;
}

.reticle-ring-outer {
  position: absolute;
  inset: 0;
  border: 1px dashed var(--cyber-cyan, #00f0ff);
  border-radius: 50%;
  opacity: 0.45;
  animation: reticleSpin 24s linear infinite;
}
.reticle-ring-inner {
  position: absolute;
  inset: 22px;
  border: 1px solid var(--kiroshi-yellow, #ffe600);
  border-radius: 50%;
  opacity: 0.55;
  box-shadow: 0 0 12px var(--kiroshi-yellow-glow, rgba(255, 230, 0, 0.3));
}

@keyframes reticleSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.reticle-brackets {
  position: absolute;
  inset: 12px;
}
.reticle-bracket {
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: var(--cyber-cyan, #00f0ff);
}
.reticle-bracket.r-tl { top: 0; left: 0; border-top: 1.5px solid; border-left: 1.5px solid; }
.reticle-bracket.r-tr { top: 0; right: 0; border-top: 1.5px solid; border-right: 1.5px solid; }
.reticle-bracket.r-bl { bottom: 0; left: 0; border-bottom: 1.5px solid; border-left: 1.5px solid; }
.reticle-bracket.r-br { bottom: 0; right: 0; border-bottom: 1.5px solid; border-right: 1.5px solid; }

.reticle-aim-cross {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  background: var(--arasaka-red, #ff0055);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--arasaka-red, #ff0055);
}

.reticle-telemetry {
  position: absolute;
  bottom: -44px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(3, 7, 18, 0.85);
  border: 1px solid var(--hud-border, rgba(0, 240, 255, 0.22));
  clip-path: var(--hud-clip-sm);
  padding: 3px 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  white-space: nowrap;
  font-family: var(--hud-font-mono, monospace);
  font-size: 0.52rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
}
.reticle-tele-row {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
}
.tele-k { color: var(--hud-text-muted, #64748b); font-weight: 700; }
.tele-v { color: var(--kiroshi-yellow, #ffe600); font-weight: 800; }
.tele-v.lock-on {
  color: var(--sandevistan-green, #00ff66);
  text-shadow: 0 0 6px var(--sandevistan-green, #00ff66);
}

/* 15.5 ⚡ SANDEVISTAN NEON AFTERIMAGE GLITCH OVERDRIVE (.sandevistan-active) */
body.sandevistan-active,
.hud-app-shell.sandevistan-active {
  animation: sandevistanPulse 0.35s ease-in-out infinite alternate;
}

body.sandevistan-active .hud-brand-text,
body.sandevistan-active .hud-stage-tool-name,
body.sandevistan-active .hud-card-title,
body.sandevistan-active .hud-pillar-val,
body.sandevistan-active .hud-term-prompt-row,
body.sandevistan-active #hud-header-clock {
  text-shadow: 
    -3px 0 0 rgba(255, 0, 85, 0.95),
    3px 0 0 rgba(0, 240, 255, 0.95),
    0 -2px 0 rgba(255, 230, 0, 0.9) !important;
  animation: sandevistanChromaShift 0.12s steps(2, start) infinite;
}

body.sandevistan-active .hud-card,
body.sandevistan-active .hud-stage,
body.sandevistan-active .hud-header,
body.sandevistan-active .hud-dock,
body.sandevistan-active .hud-badge-action {
  border-color: var(--kiroshi-yellow, #ffe600) !important;
  box-shadow: 
    0 0 35px rgba(0, 240, 255, 0.65),
    inset 0 0 22px rgba(255, 230, 0, 0.35) !important;
}

body.sandevistan-active .kiroshi-visor-overlay {
  opacity: 1 !important;
}
body.sandevistan-active .sandevistan-speed-lines {
  display: block;
  opacity: 1;
}
body.sandevistan-active .sandevistan-overdrive-banner {
  display: flex;
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Speed Lines & Warp Streaks Overlay */
.sandevistan-speed-lines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 81;
  display: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  overflow: hidden;
}

.sandy-streak {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--kiroshi-yellow, #ffe600), var(--cyber-cyan, #00f0ff), transparent);
  box-shadow: 0 0 10px var(--kiroshi-yellow, #ffe600);
  opacity: 0.75;
  animation: sandevistanSpeedWarp 0.25s linear infinite;
}

.sandy-streak-1 { top: 12%; left: -20%; width: 140%; animation-delay: 0s; }
.sandy-streak-2 { top: 28%; left: -30%; width: 160%; animation-delay: 0.08s; height: 3px; background: linear-gradient(90deg, transparent, var(--arasaka-red, #ff0055), var(--kiroshi-yellow, #ffe600), transparent); }
.sandy-streak-3 { top: 52%; left: -10%; width: 120%; animation-delay: 0.04s; }
.sandy-streak-4 { top: 70%; left: -25%; width: 150%; animation-delay: 0.12s; height: 3px; }
.sandy-streak-5 { top: 88%; left: -15%; width: 130%; animation-delay: 0.06s; }
.sandy-streak-6 { top: 40%; left: -20%; width: 140%; animation-delay: 0.16s; }

@keyframes sandevistanSpeedWarp {
  0% { transform: translateX(-15%) scaleX(0.8); opacity: 0.3; }
  50% { transform: translateX(5%) scaleX(1.4); opacity: 0.95; }
  100% { transform: translateX(20%) scaleX(0.9); opacity: 0.4; }
}

@keyframes sandevistanPulse {
  0% { filter: contrast(1.05) saturate(1.1); }
  100% { filter: contrast(1.25) saturate(1.4) brightness(1.08); }
}

@keyframes sandevistanChromaShift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2px, 1px); }
  50% { transform: translate(2px, -1px); }
  75% { transform: translate(-1px, -1.5px); }
  100% { transform: translate(1px, 1.5px); }
}

/* Sandevistan Overdrive Active Alert Banner */
.sandevistan-overdrive-banner {
  position: fixed;
  top: 56px;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  z-index: 99995;
  background: rgba(3, 7, 18, 0.94);
  border: 2px solid var(--kiroshi-yellow, #ffe600);
  box-shadow: 0 0 30px var(--kiroshi-yellow-glow, rgba(255, 230, 0, 0.5)), 0 10px 40px rgba(0, 0, 0, 0.9);
  clip-path: var(--hud-clip-md);
  padding: 8px 24px;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.sandy-hazard-stripe {
  width: 100%;
  height: 4px;
  background: repeating-linear-gradient(
    -45deg,
    var(--kiroshi-yellow, #ffe600),
    var(--kiroshi-yellow, #ffe600) 8px,
    #000000 8px,
    #000000 16px
  );
  border-radius: 2px;
}

.sandy-banner-content {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sandy-icon {
  font-size: 1.1rem;
  color: var(--kiroshi-yellow, #ffe600);
  animation: sandyIconFlash 0.3s infinite alternate;
}
.sandy-text {
  font-family: var(--hud-font-display, Orbitron, monospace);
  font-size: 0.84rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--kiroshi-yellow, #ffe600);
  text-shadow: 0 0 12px var(--kiroshi-yellow, #ffe600);
  text-transform: uppercase;
}
.sandy-gauge {
  font-family: var(--hud-font-mono, monospace);
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--sandevistan-green, #00ff66);
  background: rgba(0, 255, 102, 0.15);
  border: 1px solid var(--sandevistan-green, #00ff66);
  padding: 2px 8px;
  border-radius: 3px;
}

.sandy-meter-bar {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}
.sandy-meter-fill {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--kiroshi-yellow, #ffe600), var(--sandevistan-green, #00ff66));
  box-shadow: 0 0 10px var(--kiroshi-yellow, #ffe600);
  animation: sandyDrain 5s linear forwards;
}

@keyframes sandyDrain {
  0% { width: 100%; }
  100% { width: 0%; }
}

@keyframes sandyIconFlash {
  0% { transform: scale(0.9); opacity: 0.7; }
  100% { transform: scale(1.2); opacity: 1; }
}

/* 15.6 CRT Curvature & Scanlines Mode Toggle (.hud-crt-curvature) */
body.hud-crt-curvature,
.hud-app-shell.hud-crt-curvature {
  perspective: 1000px;
}
body.hud-crt-curvature .hud-workspace {
  transform: scale(0.992) rotateX(0.3deg);
  border-radius: 14px;
  box-shadow: 
    inset 0 0 120px rgba(0, 0, 0, 0.9),
    0 0 30px rgba(0, 240, 255, 0.15);
}
body.hud-crt-curvature::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99998;
  background: radial-gradient(circle at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.75) 100%);
  box-shadow: inset 0 0 140px rgba(0, 0, 0, 0.85);
}

/* 15.7 High-Contrast Tactical Mode Toggle (.hud-high-contrast-mode) */
body.hud-high-contrast-mode,
html.hud-high-contrast-mode {
  --hud-bg: #000000 !important;
  --hud-bg-elevated: #000000 !important;
  --hud-deck-bg: #000000 !important;
  --hud-card-bg: #000000 !important;
  --hud-card-solid: #000000 !important;
  --hud-header-bg: #000000 !important;
  --hud-dock-bg: #000000 !important;
  --hud-viewport-bg: #000000 !important;
  --hud-input-bg: #000000 !important;
  --hud-border: #00f0ff !important;
  --hud-border-strong: #ffe600 !important;
  --hud-text-primary: #ffffff !important;
  --hud-text-body: #ffffff !important;
  --hud-text-secondary: #00f0ff !important;
}
body.hud-high-contrast-mode .hud-card,
body.hud-high-contrast-mode .hud-badge-action,
body.hud-high-contrast-mode .hud-dock-tab,
body.hud-high-contrast-mode .hud-stage-btn {
  border-width: 2px !important;
  border-color: #00f0ff !important;
  background: #000000 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* 15.8 Ocular Target Lock Brackets on Card / Workstation Hover */
.hud-card,
.hud-dash-flagship-card,
.hud-dash-tool-card,
.hud-agent-radio-item,
.hud-tool-mgr-card {
  position: relative;
}

.hud-card::after,
.hud-dash-flagship-card::after,
.hud-dash-tool-card::after,
.hud-agent-radio-item::after,
.hud-tool-mgr-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border: 1.5px solid transparent;
  clip-path: polygon(
    0 0, 14px 0, 14px 2px, 2px 2px, 2px 14px, 0 14px,
    0 calc(100% - 14px), 2px calc(100% - 14px), 2px calc(100% - 2px), 14px calc(100% - 2px), 14px 100%, 0 100%,
    calc(100% - 14px) 100%, calc(100% - 14px) calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) calc(100% - 14px), 100% calc(100% - 14px), 100% 100%,
    100% 0, calc(100% - 14px) 0, calc(100% - 14px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 14px, 100% 14px
  );
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 15;
}

.hud-card:hover::after,
.hud-dash-flagship-card:hover::after,
.hud-dash-tool-card:hover::after,
.hud-agent-radio-item:hover::after,
.hud-tool-mgr-card:hover::after {
  border-color: var(--kiroshi-yellow, #ffe600);
  background: transparent;
  opacity: 1;
  transform: scale(1.008);
  box-shadow: 0 0 14px var(--kiroshi-yellow-glow, rgba(255, 230, 0, 0.4));
}

@media (max-width: 768px) {
  .kiroshi-horizon-ladder {
    width: 320px;
    height: 300px;
    transform: translate(-50%, -50%) scale(0.85);
  }
  .kiroshi-corner-frame {
    transform: scale(0.85);
  }
  .kiroshi-corner-tl { top: 8px; left: 8px; }
  .kiroshi-corner-tr { top: 8px; right: 8px; }
  .kiroshi-corner-bl { bottom: 28px; left: 8px; }
  .kiroshi-corner-br { bottom: 28px; right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .sandevistan-speed-lines,
  .hud-ambient-glow,
  .hud-dust-motes,
  .reticle-ring-outer {
    display: none !important;
  }
  body.sandevistan-active,
  .hud-app-shell.sandevistan-active {
    animation: none !important;
  }
  body.sandevistan-active .hud-brand-text,
  body.sandevistan-active .hud-stage-tool-name,
  body.sandevistan-active .hud-card-title {
    animation: none !important;
    text-shadow: 0 0 8px var(--kiroshi-yellow, #ffe600) !important;
  }
}

/* =============================================================================
   16. ACCESSIBILITY & EXPANDABLE WORKSTATION THEATER SYSTEM (WCAG AAA)
   ============================================================================= */

/* 16.1 Screen Reader Only Live Telemetry Announcer */
.hud-sr-only,
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* 16.2 High Contrast Tactical Visor Mode (WCAG AAA Compliance) */
.hud-high-contrast,
html[data-high-contrast="true"],
body.hud-high-contrast {
  --hud-bg: #000000 !important;
  --hud-bg-elevated: #050505 !important;
  --hud-card-bg: #000000 !important;
  --hud-card-solid: #000000 !important;
  --hud-deck-bg: #000000 !important;
  --hud-viewport-bg: #000000 !important;
  --hud-header-bg: #000000 !important;
  --hud-dock-bg: #000000 !important;
  --hud-text-primary: #ffffff !important;
  --hud-text-secondary: #ffffff !important;
  --hud-text-muted: #e2e8f0 !important;
  --hud-text-dim: #cbd5e1 !important;
  --hud-border: #00f0ff !important;
  --hud-border-subtle: #ffffff !important;
  --hud-border-strong: #00f0ff !important;
  filter: contrast(120%);
}

.hud-high-contrast .hud-card,
.hud-high-contrast .hud-stage-btn,
.hud-high-contrast .hud-badge-action,
.hud-high-contrast .hud-dock-tab,
.hud-high-contrast .hud-agent-radio-item {
  border-width: 2px !important;
  border-color: #00f0ff !important;
}

/* 16.3 Fullscreen / Theater Mode: Expand Central Stage to Full Viewport */
.hud-theater-mode .hud-deck,
.hud-fullscreen-stage .hud-deck {
  display: none !important;
}

.hud-theater-mode .hud-workspace,
.hud-fullscreen-stage .hud-workspace {
  grid-template-columns: 1fr !important;
}

.hud-theater-mode .hud-stage,
.hud-fullscreen-stage .hud-stage {
  width: 100% !important;
  max-width: 100vw !important;
}

.hud-theater-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(251, 191, 36, 0.15);
  color: var(--hud-gold);
  border: 1px solid var(--hud-gold);
  padding: 2px 8px;
  font-size: 0.65rem;
  font-family: var(--hud-font-mono);
}

/* =============================================================================
   17. TACTICAL POV COCKPIT VITALS, CYBERPSYCHOSIS & KIROSHI OPTICS
   ============================================================================= */

/* 17.1 POV Cockpit Vitals Card */
.hud-vitals-card {
  position: relative;
  overflow: hidden;
  border-left: 3px solid var(--hud-cyan);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hud-vitals-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hud-vitals-neural-section,
.hud-vitals-sande-section,
.hud-vitals-kiroshi-section {
  position: relative;
}

/* 17.2 Cyberpsychosis Alert Mode (>85% Neural Load) */
.hud-vitals-card.hud-cyberpsychosis-alert {
  border-color: var(--arasaka-red, #ff0055) !important;
  border-left: 3px solid var(--arasaka-red, #ff0055) !important;
  background: linear-gradient(135deg, rgba(255, 0, 85, 0.12), rgba(10, 10, 15, 0.85)) !important;
  box-shadow: 0 0 24px rgba(255, 0, 85, 0.4), inset 0 0 16px rgba(255, 0, 85, 0.2) !important;
  animation: cyberpsychosisCardPulse 0.8s ease-in-out infinite alternate;
}

.hud-vitals-card.hud-cyberpsychosis-alert #hud-cyberpsychosis-badge {
  background: rgba(255, 0, 85, 0.25) !important;
  color: var(--arasaka-red, #ff0055) !important;
  border-color: var(--arasaka-red, #ff0055) !important;
  box-shadow: 0 0 10px rgba(255, 0, 85, 0.6);
  animation: cyberpsychosisBadgeBlink 0.4s infinite alternate;
}

.hud-vitals-card.hud-cyberpsychosis-alert #hud-neural-load-bar {
  box-shadow: 0 0 12px rgba(255, 0, 85, 0.8);
}

@keyframes cyberpsychosisCardPulse {
  0% { box-shadow: 0 0 14px rgba(255, 0, 85, 0.3), inset 0 0 8px rgba(255, 0, 85, 0.15); }
  100% { box-shadow: 0 0 28px rgba(255, 0, 85, 0.6), inset 0 0 20px rgba(255, 0, 85, 0.35); }
}

@keyframes cyberpsychosisBadgeBlink {
  0% { opacity: 0.6; transform: scale(0.96); }
  100% { opacity: 1.0; transform: scale(1.04); }
}

/* 17.3 Kiroshi Optics Zoom Scaling & Tactical Viewport Lens */
.kiroshi-zoom-1x {
  transform: scale(1.0);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.kiroshi-zoom-125x {
  transform: scale(1.25);
  transform-origin: center center;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.kiroshi-zoom-15x {
  transform: scale(1.5);
  transform-origin: center center;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-kiroshi-zoom="1.25x"] #hud-stage-viewport,
[data-kiroshi-zoom="1.5x"] #hud-stage-viewport {
  box-shadow: inset 0 0 35px rgba(255, 230, 0, 0.25), 0 0 20px rgba(255, 230, 0, 0.15);
  border-color: rgba(255, 230, 0, 0.4);
}

[data-kiroshi-zoom="1.25x"] .kiroshi-visor-overlay,
[data-kiroshi-zoom="1.5x"] .kiroshi-visor-overlay {
  opacity: 0.85;
}

/* 17.4 Sandevistan Charge Overdrive Recharge HUD Meter */
.hud-vitals-sande-section .sande-charge-container {
  position: relative;
  width: 100%;
}

#hud-sande-charge-bar {
  transition: width 0.15s linear, background-color 0.3s ease;
}

#hud-sande-charge-bar.recharging {
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.6), var(--hud-gold));
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
}

#hud-sande-charge-bar.ready {
  background: linear-gradient(90deg, #00ff66, #00f0ff);
  box-shadow: 0 0 10px #00ff66;
}



/* =============================================================================
   ENHANCEMENT v5.6 — ELEVATED UI PASSES
   Swarm agent cards, modal polish, pill animations, drawer header,
   telemetry pillar bars, quick-hub sections, memory stat cards,
   theme selector preview swatches, REPL chips, and micro-interactions.
   ============================================================================= */

/* ── Agent Card (Swarm Sheet) ────────────────────────────────────────────── */
.hud-agent-radio-item {
  position: relative;
  border-radius: 6px;
  border: 1px solid var(--hud-border-subtle);
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.15s ease;
  overflow: hidden;
}
.hud-agent-radio-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--hud-cyan);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.hud-agent-radio-item:hover {
  border-color: var(--hud-border);
  background: rgba(0, 240, 255, 0.04) !important;
  transform: translateX(2px);
}
.hud-agent-radio-item.active {
  border-color: var(--hud-cyan) !important;
  background: rgba(0, 240, 255, 0.07) !important;
}
.hud-agent-radio-item.active::before {
  opacity: 1;
}

/* ── Mobile Sheet Drawer Header ──────────────────────────────────────────── */
#hud-sheet-drawer .hud-sheet-header,
.hud-sheet-header {
  background: linear-gradient(135deg, rgba(0,240,255,0.06) 0%, transparent 60%);
  border-bottom: 1px solid var(--hud-border);
  position: relative;
  overflow: hidden;
}
.hud-sheet-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hud-cyan), transparent);
  opacity: 0.5;
}

/* ── Telemetry Pillar Row (mobile sheet + desktop deck) ──────────────────── */
.hud-pillar-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hud-pillar-bar-track {
  height: 3px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 3px;
}
.hud-pillar-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--hud-cyan);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 6px currentColor;
}

/* ── Memory Stat Cards ───────────────────────────────────────────────────── */
.hud-mem-stat {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--hud-border-subtle);
  border-radius: 6px;
  padding: 10px 8px;
  text-align: center;
  transition: border-color 0.2s ease, background 0.2s ease;
  position: relative;
  overflow: hidden;
}
.hud-mem-stat::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center top, rgba(0,240,255,0.08), transparent 70%);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.hud-mem-stat:hover::before { opacity: 1; }
.hud-mem-stat-label {
  font-size: 0.54rem;
  color: var(--hud-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.hud-mem-stat-value {
  font-family: var(--hud-font-mono);
  font-size: 1rem;
  font-weight: 800;
  margin-top: 3px;
  line-height: 1;
}
.hud-mem-stat-value.cyan  { color: var(--hud-cyan); text-shadow: 0 0 10px var(--hud-cyan); }
.hud-mem-stat-value.gold  { color: var(--hud-gold); text-shadow: 0 0 10px rgba(251,191,36,0.5); }
.hud-mem-stat-value.green { color: var(--hud-green); text-shadow: 0 0 10px rgba(0,255,102,0.5); }

/* ── Memory Working Buffer Item ──────────────────────────────────────────── */
.hud-mem-buffer-item {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--hud-border-subtle);
  border-radius: 5px;
  padding: 8px 10px;
  transition: border-color 0.15s ease;
}
.hud-mem-buffer-item:hover {
  border-color: var(--hud-border);
}
.hud-mem-buffer-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.54rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 2px;
  letter-spacing: 0.04em;
}
.hud-mem-buffer-tag.core  { background: rgba(0,240,255,0.12); color: var(--hud-cyan); }
.hud-mem-buffer-tag.aeo   { background: rgba(251,191,36,0.12); color: var(--hud-gold); }
.hud-mem-buffer-tag.sys   { background: rgba(0,255,102,0.10); color: var(--hud-green); }

/* ── Quick Hub Section Headers ───────────────────────────────────────────── */
.hud-quick-section {
  position: relative;
  padding: 10px 0 0;
}
.hud-quick-section + .hud-quick-section {
  border-top: 1px solid var(--hud-border-subtle);
  padding-top: 12px;
}
.hud-quick-section-label {
  font-family: var(--hud-font-hud);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--hud-gold);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.hud-quick-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--hud-border-gold), transparent);
  opacity: 0.5;
}

/* ── REPL Quick Chips ────────────────────────────────────────────────────── */
.hud-term-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  font-family: var(--hud-font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--hud-cyan);
  background: rgba(0, 240, 255, 0.06);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}
.hud-term-chip:hover {
  background: rgba(0, 240, 255, 0.14);
  border-color: var(--hud-cyan);
  transform: translateY(-1px);
}
.hud-term-chip:active {
  transform: translateY(0);
  background: rgba(0, 240, 255, 0.22);
}

/* ── Loopback Daemon Port Row ────────────────────────────────────────────── */
.hud-port-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--hud-border-subtle);
  border-radius: 5px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.hud-port-row:hover {
  border-color: var(--hud-border);
  background: rgba(0,240,255,0.03);
}
.hud-port-number {
  font-family: var(--hud-font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--hud-text-primary);
}
.hud-port-desc {
  font-size: 0.58rem;
  color: var(--hud-text-muted);
  margin-top: 1px;
}

/* ── Theme Card (Desktop Modal) ──────────────────────────────────────────── */
.hud-theme-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  cursor: pointer;
}
.hud-theme-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

/* ── Device Profile Card (Desktop Modal) ─────────────────────────────────── */
.hud-device-card {
  transition: transform 0.18s ease, border-color 0.18s ease !important;
  cursor: pointer;
}
.hud-device-card:hover {
  transform: translateY(-1px);
  border-color: var(--hud-border) !important;
}

/* ── Animated Active Indicator on Quick Buttons ──────────────────────────── */
.hud-quick-btn.active {
  position: relative;
}
.hud-quick-btn.active::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(0,240,255,0.15), transparent);
  pointer-events: none;
}

/* ── Sheet Drag Handle ───────────────────────────────────────────────────── */
.hud-sheet-handle {
  display: flex;
  justify-content: center;
  padding: 8px 0 4px;
  cursor: grab;
}
.hud-sheet-handle::before {
  content: '';
  width: 40px;
  height: 4px;
  background: rgba(255,255,255,0.18);
  border-radius: 2px;
  transition: background 0.15s ease, width 0.15s ease;
}
.hud-sheet-handle:hover::before {
  background: var(--hud-cyan);
  width: 56px;
  box-shadow: 0 0 8px var(--hud-cyan);
}

/* ── Stage Nav Breadcrumb Pill ───────────────────────────────────────────── */
.hud-stage-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--hud-font-mono);
  font-size: 0.60rem;
  color: var(--hud-text-muted);
  padding: 2px 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hud-border-subtle);
  border-radius: 12px;
  user-select: none;
  -webkit-user-select: none;
}

/* ── Pulse Glow Keyframe (general reuse) ─────────────────────────────────── */
@keyframes hud-glow-pulse {
  0%   { box-shadow: 0 0 4px currentColor; }
  50%  { box-shadow: 0 0 14px currentColor, 0 0 28px rgba(0,240,255,0.2); }
  100% { box-shadow: 0 0 4px currentColor; }
}

/* ── Scan-Line Reveal on Sheet Open ──────────────────────────────────────── */
@keyframes hud-scanline-reveal {
  from { clip-path: inset(0 0 100% 0); opacity: 0; }
  to   { clip-path: inset(0 0 0% 0);   opacity: 1; }
}
.hud-sheet-body > * {
  animation: hud-scanline-reveal 0.22s ease-out both;
}
.hud-sheet-body > *:nth-child(1) { animation-delay: 0.02s; }
.hud-sheet-body > *:nth-child(2) { animation-delay: 0.06s; }
.hud-sheet-body > *:nth-child(3) { animation-delay: 0.10s; }
.hud-sheet-body > *:nth-child(4) { animation-delay: 0.14s; }
.hud-sheet-body > *:nth-child(5) { animation-delay: 0.18s; }

/* ── Light Theme Overrides for Enhanced Components ───────────────────────── */
html[data-theme="light"] .hud-agent-radio-item::before,
html.theme-light .hud-agent-radio-item::before {
  background: var(--hud-cyan);
}
html[data-theme="light"] .hud-term-chip,
html.theme-light .hud-term-chip {
  background: rgba(0,113,227,0.08);
  border-color: rgba(0,113,227,0.25);
  color: var(--hud-cyan);
}
html[data-theme="light"] .hud-term-chip:hover,
html.theme-light .hud-term-chip:hover {
  background: rgba(0,113,227,0.16);
  border-color: var(--hud-cyan);
}

/* ── Matrix Theme Overrides ──────────────────────────────────────────────── */
html[data-theme="matrix"] .hud-agent-radio-item::before,
html.theme-matrix .hud-agent-radio-item::before {
  background: var(--hud-green);
}
html[data-theme="matrix"] .hud-term-chip,
html.theme-matrix .hud-term-chip {
  color: var(--hud-green);
  background: rgba(0,255,102,0.06);
  border-color: rgba(0,255,102,0.2);
}
html[data-theme="matrix"] .hud-sheet-header::after,
html.theme-matrix .hud-sheet-header::after {
  background: linear-gradient(90deg, transparent, var(--hud-green), transparent);
}

/* ── Gold Theme Overrides ────────────────────────────────────────────────── */
html[data-theme="gold"] .hud-agent-radio-item::before,
html.theme-gold .hud-agent-radio-item::before {
  background: var(--hud-gold);
}
html[data-theme="gold"] .hud-term-chip,
html.theme-gold .hud-term-chip {
  color: var(--hud-gold);
  background: rgba(251,191,36,0.06);
  border-color: rgba(251,191,36,0.2);
}
html[data-theme="gold"] .hud-sheet-header::after,
html.theme-gold .hud-sheet-header::after {
  background: linear-gradient(90deg, transparent, var(--hud-gold), transparent);
}

/* =============================================================================
   ENHANCEMENT v5.7 — TOAST SYSTEM & MODAL ELEVATION
   Cyberpunk toast notifications, keyboard shortcut matrix, theme palette swatches,
   device hardware live banner, daemon curl chips, and cron scheduler cards.
   ============================================================================= */

/* ── Cyberpunk HUD Toast Notifications ───────────────────────────────────── */
#hud-toast-container {
  position: fixed;
  top: 64px;
  right: 20px;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 380px;
}
.hud-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(3, 4, 8, 0.95);
  border: 1px solid var(--hud-border);
  border-left: 3px solid var(--hud-cyan);
  clip-path: var(--hud-clip-sm);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.65), 0 0 14px rgba(0, 240, 255, 0.15);
  font-family: var(--hud-font-mono);
  font-size: 0.74rem;
  color: var(--hud-text-primary);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: hud-toast-slide-in 0.24s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.hud-toast.success {
  border-left-color: var(--hud-green);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.65), 0 0 14px rgba(0, 255, 102, 0.2);
}
.hud-toast.warning {
  border-left-color: var(--hud-gold);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.65), 0 0 14px rgba(251, 191, 36, 0.2);
}
.hud-toast.error {
  border-left-color: #ff4757;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.65), 0 0 14px rgba(255, 71, 87, 0.2);
}
.hud-toast-icon {
  font-size: 0.95rem;
  flex-shrink: 0;
}
.hud-toast-msg {
  flex: 1;
  line-height: 1.35;
}
@keyframes hud-toast-slide-in {
  from { opacity: 0; transform: translateX(35px) scale(0.96); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes hud-toast-slide-out {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to   { opacity: 0; transform: translateX(45px) scale(0.92); }
}

/* ── Keyboard Shortcuts Matrix ───────────────────────────────────────────── */
.hud-shortcut-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.hud-shortcut-group-title {
  font-family: var(--hud-font-hud);
  font-size: 0.66rem;
  font-weight: 800;
  color: var(--hud-gold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.hud-shortcut-group-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--hud-border-gold), transparent);
  opacity: 0.4;
}
.hud-shortcut-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--hud-border-subtle);
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  transition: all 0.18s ease;
  cursor: default;
}
.hud-shortcut-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--hud-cyan);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.hud-shortcut-item:hover {
  background: rgba(0, 240, 255, 0.04);
  border-color: var(--hud-border);
  transform: translateX(3px);
}
.hud-shortcut-item:hover::before {
  opacity: 1;
}
.hud-shortcut-desc {
  font-size: 0.72rem;
  color: var(--hud-text-primary);
  font-weight: 600;
}
.hud-shortcut-sub {
  font-size: 0.58rem;
  color: var(--hud-text-muted);
  margin-top: 1px;
}
.hud-shortcut-keys {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.hud-shortcut-keys kbd {
  font-family: var(--hud-font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--hud-cyan);
  background: rgba(0, 240, 255, 0.10);
  border: 1px solid var(--hud-border);
  padding: 3px 7px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  letter-spacing: 0.02em;
}
.hud-shortcut-keys span.sep {
  color: var(--hud-text-muted);
  font-size: 0.62rem;
  font-family: var(--hud-font-mono);
}

/* ── Theme Palette Swatches ──────────────────────────────────────────────── */
.hud-theme-swatches {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.hud-theme-swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s ease;
}
.hud-theme-swatch:hover {
  transform: scale(1.2);
}
.hud-theme-tag {
  display: inline-block;
  font-family: var(--hud-font-mono);
  font-size: 0.56rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--hud-text-secondary);
  border: 1px solid var(--hud-border-subtle);
  letter-spacing: 0.04em;
}

/* ── Device Hardware Live Banner & Badges ─────────────────────────────────── */
.hud-device-live-banner {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.08) 0%, rgba(251, 191, 36, 0.04) 100%);
  border: 1px solid var(--hud-border);
  padding: 10px 14px;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.hud-device-live-banner::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--hud-cyan), var(--hud-gold), transparent);
  opacity: 0.6;
}
.hud-device-spec-pill {
  font-family: var(--hud-font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  background: rgba(0, 240, 255, 0.12);
  color: var(--hud-cyan);
  border: 1px solid rgba(0, 240, 255, 0.3);
}

/* ── Port Row & Curl Test Chip ───────────────────────────────────────────── */
.hud-curl-chip {
  font-family: var(--hud-font-mono);
  font-size: 0.60rem;
  color: var(--hud-text-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hud-border-subtle);
  padding: 2px 6px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: all;
}
.hud-curl-chip:hover {
  background: rgba(0, 240, 255, 0.08);
  border-color: var(--hud-cyan);
  color: var(--hud-cyan);
}

/* ── Cron Task Scheduler Cards ───────────────────────────────────────────── */
.hud-cron-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--hud-border-subtle);
  border-radius: 5px;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.hud-cron-card:hover {
  border-color: var(--hud-border);
  background: rgba(0, 240, 255, 0.03);
}
.hud-cron-tag {
  font-size: 0.54rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 2px;
  letter-spacing: 0.05em;
  background: rgba(0, 240, 255, 0.12);
  color: var(--hud-cyan);
}

/* ── Theme Overrides for Toast & Modals ──────────────────────────────────── */
html[data-theme="light"] .hud-toast,
html.theme-light .hud-toast {
  background: rgba(255, 255, 255, 0.96);
  color: var(--hud-text-primary);
  border-color: var(--hud-border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 113, 227, 0.1);
}
html[data-theme="light"] .hud-shortcut-item::before,
html.theme-light .hud-shortcut-item::before {
  background: var(--hud-cyan);
}
html[data-theme="light"] .hud-shortcut-keys kbd,
html.theme-light .hud-shortcut-keys kbd {
  background: rgba(0, 113, 227, 0.10);
  border-color: rgba(0, 113, 227, 0.3);
  color: var(--hud-cyan);
}

html[data-theme="matrix"] .hud-toast,
html.theme-matrix .hud-toast {
  background: rgba(0, 10, 2, 0.96);
  border-color: rgba(0, 255, 102, 0.3);
  border-left-color: var(--hud-green);
  color: var(--hud-green);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.8), 0 0 14px rgba(0, 255, 102, 0.25);
}
html[data-theme="matrix"] .hud-shortcut-item::before,
html.theme-matrix .hud-shortcut-item::before {
  background: var(--hud-green);
}
html[data-theme="matrix"] .hud-shortcut-keys kbd,
html.theme-matrix .hud-shortcut-keys kbd {
  color: var(--hud-green);
  background: rgba(0, 255, 102, 0.08);
  border-color: rgba(0, 255, 102, 0.3);
}

html[data-theme="gold"] .hud-toast,
html.theme-gold .hud-toast {
  background: rgba(10, 7, 2, 0.96);
  border-color: rgba(251, 191, 36, 0.3);
  border-left-color: var(--hud-gold);
  color: #fef3c7;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.8), 0 0 14px rgba(251, 191, 36, 0.25);
}
html[data-theme="gold"] .hud-shortcut-item::before,
html.theme-gold .hud-shortcut-item::before {
  background: var(--hud-gold);
}
html[data-theme="gold"] .hud-shortcut-keys kbd,
html.theme-gold .hud-shortcut-keys kbd {
  color: var(--hud-gold);
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.3);
}

/* =============================================================================
   ENHANCEMENT v5.8 — MOBILE HUD ARCHITECTURE & TACTICAL POLISH
   Full-height sheet expansion, haptic active press, safe-area geometry,
   mobile theme palette cards, and 4-theme mobile navigation overrides.
   ============================================================================= */

/* ── Mobile Tactical Bar Micro-Interactions ──────────────────────────────── */
.hud-mobile-tab:active {
  transform: scale(0.92);
}
.hud-mobile-tab.active {
  text-shadow: 0 0 10px currentColor;
}

/* ── Sheet Expansion Engine ──────────────────────────────────────────────── */
.hud-sheet-expand-btn {
  background: transparent;
  border: 1px solid var(--hud-border-subtle);
  color: var(--hud-text-muted);
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.82rem;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
}
.hud-sheet-expand-btn:hover {
  border-color: var(--hud-cyan);
  color: var(--hud-cyan);
  background: rgba(0, 240, 255, 0.08);
}
.hud-sheet-drawer.expanded {
  max-height: 94vh !important;
  max-height: 94dvh !important;
  height: 94vh !important;
  height: 94dvh !important;
  border-radius: 12px 12px 0 0;
}
.hud-sheet-drawer.expanded .hud-sheet-body {
  max-height: calc(94vh - 75px) !important;
  max-height: calc(94dvh - 75px) !important;
}

/* ── Mobile Button Touch Targets (Apple HIG & WCAG 2.2 AA) ──────────────── */
.hud-mobile-ws-btn:active,
.hud-mobile-quick-btn:active,
.hud-mobile-theme-btn:active {
  transform: scale(0.95);
}

/* ── Mobile 4-Theme Navigation Overrides ─────────────────────────────────── */
html[data-theme="light"] .hud-mobile-nav,
html.theme-light .hud-mobile-nav {
  background: rgba(255, 255, 255, 0.96) !important;
  border-top: 1px solid rgba(0, 113, 227, 0.3) !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08), 0 0 15px rgba(0, 113, 227, 0.1) !important;
}
html[data-theme="light"] .hud-mobile-tab.active,
html.theme-light .hud-mobile-tab.active {
  color: var(--hud-cyan) !important;
}
html[data-theme="light"] .hud-mobile-tab.active::before,
html.theme-light .hud-mobile-tab.active::before {
  background: var(--hud-cyan) !important;
  box-shadow: 0 0 8px var(--hud-cyan) !important;
}

html[data-theme="matrix"] .hud-mobile-nav,
html.theme-matrix .hud-mobile-nav {
  background: rgba(1, 15, 5, 0.98) !important;
  border-top: 1px solid rgba(0, 255, 102, 0.4) !important;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.95), 0 0 20px rgba(0, 255, 102, 0.2) !important;
}
html[data-theme="matrix"] .hud-mobile-tab.active,
html.theme-matrix .hud-mobile-tab.active {
  color: var(--hud-green) !important;
}
html[data-theme="matrix"] .hud-mobile-tab.active::before,
html.theme-matrix .hud-mobile-tab.active::before {
  background: var(--hud-green) !important;
  box-shadow: 0 0 8px var(--hud-green) !important;
}

html[data-theme="gold"] .hud-mobile-nav,
html.theme-gold .hud-mobile-nav {
  background: rgba(12, 8, 2, 0.98) !important;
  border-top: 1px solid rgba(251, 191, 36, 0.4) !important;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.95), 0 0 20px rgba(251, 191, 36, 0.2) !important;
}
html[data-theme="gold"] .hud-mobile-tab.active,
html.theme-gold .hud-mobile-tab.active {
  color: var(--hud-gold) !important;
}
html[data-theme="gold"] .hud-mobile-tab.active::before,
html.theme-gold .hud-mobile-tab.active::before {
  background: var(--hud-gold) !important;
  box-shadow: 0 0 8px var(--hud-gold) !important;
}

/* =============================================================================
   MOBILE CYBERPUNK HUD POLISH & HAPTIC TOUCH REFINEMENTS
   Swarm filter category chips, active glowing indicators, REPL chips scroll,
   and mobile drawer touch ergonomics.
   ============================================================================= */

.hud-mobile-agent-btn:active,
.hud-mobile-search-btn:active {
  transform: scale(0.95);
}

/* Swarm Mobile Filter Category Chips */
.hud-swarm-filter-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hud-swarm-filter-chips::-webkit-scrollbar {
  display: none;
}
.hud-swarm-filter-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  font-family: var(--hud-font-mono, monospace);
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--hud-text-muted, #94a3b8);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hud-border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.16s ease;
  white-space: nowrap;
  touch-action: manipulation;
}
.hud-swarm-filter-chip:hover {
  color: var(--hud-cyan);
  border-color: var(--hud-border, rgba(0, 240, 255, 0.3));
  background: rgba(0, 240, 255, 0.06);
}
.hud-swarm-filter-chip.active {
  color: #000 !important;
  background: var(--hud-cyan, #00f0ff) !important;
  border-color: var(--hud-cyan, #00f0ff) !important;
  font-weight: 800;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
}
.hud-swarm-filter-chip:active {
  transform: scale(0.96);
}

/* Mobile REPL Chips Horizontal Scroll & Touch */
.hud-mobile-repl-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hud-mobile-repl-chips::-webkit-scrollbar {
  display: none;
}
.hud-mobile-repl-chips .hud-term-chip {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Tactical glowing line & elevation on mobile navigation */
.hud-mobile-nav {
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}
.hud-mobile-tab.active {
  text-shadow: 0 0 8px currentColor;
}

/* =============================================================================
   MOBILE HUD ELEVATION v6.0: STREAMLINED DUAL-BUTTON HEADER & FULLSCREEN HUBS
   Minimalist 2-button header ([🚀 STUDIO] + [🎛️ CONTROL]) and full-viewport
   immersive popup modals with nested slides, tabs, and tactile controls.
   ============================================================================= */

/* ── Base Fullscreen Modals & Backdrops ── */
.hud-fullscreen-hub-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(4, 7, 16, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99998;
}
.hud-fullscreen-hub {
  display: none;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 99999;
  background: var(--hud-card-solid, #060913);
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}
.hud-fullscreen-hub-backdrop.is-open {
  display: block !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.hud-fullscreen-hub.is-open {
  display: flex !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ── Desktop/Tablet Defaults: Hide Mobile Cyber Burger ── */
.hud-mobile-cyber-burger-btn,
.hud-mobile-symbol-btn,
.hud-mobile-primary-btn,
.hud-mobile-location-badge {
  display: none;
}

/* ── Mobile Viewport Overrides (<= 768px & <= 480px) ───────────────────────── */
@media (max-width: 768px) {
  /* Enforce clean, uncluttered top bar */
  .hud-header {
    height: 52px !important;
    padding: 0 14px !important;
    gap: 12px !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .hud-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    flex: 1 !important;
  }

  .hud-header-left .hud-brand {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .hud-header-left .hud-brand-text {
    font-size: 0.92rem !important;
    letter-spacing: 0.08em !important;
    font-weight: 800 !important;
    display: inline-block !important;
  }

  .hud-header-left .hud-brand-tag {
    display: none !important;
  }

  /* Hide center oscilloscope and status beacon on mobile */
  .hud-header-center {
    display: none !important;
  }

  /* Hide cluttered micro-buttons, tool badges, breadcrumbs and deck toggles from mobile top bar */
  .hud-topbar-breadcrumb,
  .hud-mobile-micro-tool,
  .hud-mobile-theme-circle-btn,
  .hud-mobile-symbol-btn,
  .hud-mobile-primary-btn,
  .hud-mobile-ws-btn,
  .hud-mobile-agent-btn,
  .hud-mobile-search-btn,
  .hud-mobile-theme-btn,
  .hud-mobile-quick-btn,
  .hud-mobile-location-badge,
  .hud-deck-toggle-btn,
  .hud-help-btn,
  .hud-badge-action,
  .hud-theme-picker-group {
    display: none !important;
  }

  /* Header Right: Only Cyberpunk Tactical Hamburger Menu Button */
  .hud-header-right {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    flex-shrink: 0 !important;
  }

  /* ── Cyberpunk Tactical Hamburger Button ───────────────────────────────── */
  .hud-mobile-cyber-burger-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 38px !important;
    padding: 0 13px !important;
    border-radius: 4px !important;
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.12) 0%, rgba(251, 191, 36, 0.08) 100%) !important;
    border: 1px solid var(--hud-cyan, #00f0ff) !important;
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.35), inset 0 0 6px rgba(0, 240, 255, 0.15) !important;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px) !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease !important;
    line-height: 1 !important;
  }
  .hud-mobile-cyber-burger-btn:active {
    transform: scale(0.94) !important;
    background: rgba(0, 240, 255, 0.28) !important;
    box-shadow: 0 0 18px rgba(0, 240, 255, 0.6) !important;
  }

  .hud-cyber-burger-box {
    width: 17px !important;
    height: 13px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  .hud-cb-line {
    height: 2px !important;
    border-radius: 1px !important;
    display: block !important;
    transition: all 0.2s ease !important;
  }
  .hud-cb-line.hud-cb-top {
    width: 100% !important;
    background: var(--hud-cyan, #00f0ff) !important;
    box-shadow: 0 0 4px var(--hud-cyan, #00f0ff) !important;
  }
  .hud-cb-line.hud-cb-mid {
    width: 65% !important;
    background: var(--hud-gold, #fbbf24) !important;
    box-shadow: 0 0 4px var(--hud-gold, #fbbf24) !important;
  }
  .hud-cb-line.hud-cb-bot {
    width: 100% !important;
    background: var(--hud-cyan, #00f0ff) !important;
    box-shadow: 0 0 4px var(--hud-cyan, #00f0ff) !important;
  }

  .hud-cb-label {
    font-family: var(--hud-font-hud, 'Rajdhani', sans-serif) !important;
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    color: var(--hud-cyan, #00f0ff) !important;
    text-shadow: 0 0 6px rgba(0, 240, 255, 0.5) !important;
  }

  /* 4-Theme Overrides for Cyber Burger Button */
  html[data-theme="matrix"] .hud-mobile-cyber-burger-btn {
    border-color: var(--hud-green, #00ff41) !important;
    background: rgba(0, 255, 65, 0.10) !important;
    box-shadow: 0 0 12px rgba(0, 255, 65, 0.35) !important;
  }
  html[data-theme="matrix"] .hud-cb-line.hud-cb-top,
  html[data-theme="matrix"] .hud-cb-line.hud-cb-mid,
  html[data-theme="matrix"] .hud-cb-line.hud-cb-bot,
  html[data-theme="matrix"] .hud-cb-label {
    background: var(--hud-green, #00ff41) !important;
    color: var(--hud-green, #00ff41) !important;
    box-shadow: 0 0 4px var(--hud-green, #00ff41) !important;
    text-shadow: 0 0 6px rgba(0, 255, 65, 0.6) !important;
  }

  html[data-theme="gold"] .hud-mobile-cyber-burger-btn {
    border-color: var(--hud-gold, #fbbf24) !important;
    background: rgba(251, 191, 36, 0.12) !important;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.35) !important;
  }
  html[data-theme="gold"] .hud-cb-line.hud-cb-top,
  html[data-theme="gold"] .hud-cb-line.hud-cb-mid,
  html[data-theme="gold"] .hud-cb-line.hud-cb-bot,
  html[data-theme="gold"] .hud-cb-label {
    background: var(--hud-gold, #fbbf24) !important;
    color: var(--hud-gold, #fbbf24) !important;
    box-shadow: 0 0 4px var(--hud-gold, #fbbf24) !important;
    text-shadow: 0 0 6px rgba(251, 191, 36, 0.6) !important;
  }

  html[data-theme="light"] .hud-mobile-cyber-burger-btn {
    border-color: #0a2540 !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  }
  html[data-theme="light"] .hud-cb-line.hud-cb-top,
  html[data-theme="light"] .hud-cb-line.hud-cb-mid,
  html[data-theme="light"] .hud-cb-line.hud-cb-bot,
  html[data-theme="light"] .hud-cb-label {
    background: #0a2540 !important;
    color: #0a2540 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* ── Master True Edge-to-Edge Fullscreen Popups (Zero Space at Top) ── */
  .hud-fullscreen-hub-backdrop,
  .hud-modal-backdrop,
  .hud-modal-overlay,
  .hud-sheet-backdrop {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: rgba(2, 4, 10, 0.94) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    z-index: 99998 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    transition: opacity 0.2s ease, visibility 0.2s ease !important;
  }

  .hud-fullscreen-hub-backdrop.is-open:not([hidden]),
  .hud-modal-backdrop.is-open:not([hidden]),
  .hud-modal-overlay.is-open:not([hidden]),
  .hud-sheet-backdrop.is-open:not([hidden]) {
    display: block !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .hud-fullscreen-hub,
  .hud-modal-dialog,
  .hud-sheet-drawer {
    display: none !important;
    pointer-events: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    z-index: 99999 !important;
    background: var(--hud-card-solid, #060913) !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    clip-path: none !important;
    box-shadow: none !important;
    transform: translateY(100%);
    transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .hud-fullscreen-hub.is-open,
  .hud-fullscreen-hub.is-open:not([hidden]),
  .hud-modal-dialog.is-open:not([hidden]),
  .hud-sheet-drawer.is-open:not([hidden]) {
    display: flex !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .hud-fullscreen-hub[hidden]:not(.is-open),
  .hud-modal-dialog[hidden],
  .hud-sheet-drawer[hidden] {
    display: none !important;
    pointer-events: none !important;
    transform: translateY(100%) !important;
  }

  /* Hub Header (Pinned Flush at Top 0) */
  .hud-fs-header {
    height: 48px !important;
    min-height: 48px !important;
    top: 0 !important;
    padding: 0 12px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid var(--hud-border-strong) !important;
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.08) 0%, rgba(251, 191, 36, 0.05) 100%) !important;
    position: relative !important;
    flex-shrink: 0 !important;
    gap: 8px !important;
  }
  .hud-fs-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  .hud-fs-icon {
    font-size: 1.35rem;
    flex-shrink: 0;
    line-height: 1;
  }
  .hud-fs-title {
    font-family: var(--hud-font-display, Orbitron, monospace);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--hud-gold, #fbbf24);
    text-transform: uppercase;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hud-fs-subtitle {
    font-size: 0.54rem;
    font-family: var(--hud-font-mono);
    color: var(--hud-text-muted);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
  }
  .hud-fs-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }
  .hud-fs-switch-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--hud-border-subtle);
    color: var(--hud-cyan);
    font-family: var(--hud-font-mono);
    font-size: 0.58rem;
    font-weight: 700;
    padding: 5px 8px;
    border-radius: 3px;
    cursor: pointer;
    touch-action: manipulation;
    white-space: nowrap;
    transition: all 0.15s ease;
  }
  .hud-fs-switch-btn:active {
    background: rgba(0, 240, 255, 0.15);
    border-color: var(--hud-cyan);
  }
  .hud-fs-close-btn {
    background: rgba(255, 71, 87, 0.15);
    border: 1px solid rgba(255, 71, 87, 0.5);
    color: #ff6b81;
    font-family: var(--hud-font-display, Orbitron, monospace);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 6px 12px;
    border-radius: 4px;
    clip-path: var(--hud-clip-sm);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    touch-action: manipulation;
    height: 32px;
    transition: all 0.15s ease;
    white-space: nowrap;
  }
  .hud-fs-close-btn:active {
    transform: scale(0.93);
    background: #ff4757;
    color: #ffffff;
  }

  /* Nested Slide Segmented Navigation Tabs Bar */
  .hud-fs-slide-nav {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 10px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: rgba(0, 0, 0, 0.6) !important;
    border-bottom: 1px solid var(--hud-border-subtle) !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-shrink: 0 !important;
    scrollbar-width: none !important;
  }
  .hud-fs-slide-nav::-webkit-scrollbar {
    display: none !important;
  }

  .hud-fs-slide-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    font-family: var(--hud-font-display, Orbitron, monospace);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--hud-text-secondary);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--hud-border-subtle);
    border-radius: 5px;
    cursor: pointer;
    touch-action: manipulation;
    transition: all 0.15s ease;
    user-select: none;
    -webkit-user-select: none;
    white-space: nowrap;
  }
  .hud-fs-slide-tab.active {
    color: #000000 !important;
    background: var(--hud-cyan, #00f0ff) !important;
    border-color: var(--hud-cyan, #00f0ff) !important;
    font-weight: 800 !important;
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.4) !important;
  }
  .hud-fs-slide-tab:not(.active):active {
    background: rgba(255, 255, 255, 0.08);
  }

  /* Slide Content Body */
  .hud-fs-slide-content {
    flex: 1 1 auto !important;
    height: calc(100dvh - 92px) !important;
    max-height: calc(100dvh - 92px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 12px 14px 24px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 0 !important;
  }

  /* Hero Attuned Agent Card inside Swarm slide */
  .hud-attuned-hero-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(0, 240, 255, 0.06) 100%);
    border: 1px solid var(--hud-gold);
    border-radius: 6px;
    clip-path: var(--hud-clip-sm);
    box-shadow: 0 0 14px rgba(251, 191, 36, 0.15);
  }

  /* Full-width Audio SFX toggle card */
  .hud-fs-audio-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--hud-border);
    border-radius: 6px;
    clip-path: var(--hud-clip-sm);
  }
  .hud-fs-audio-btn {
    font-family: var(--hud-font-display, Orbitron, monospace);
    font-size: 0.72rem;
    font-weight: 800;
    padding: 8px 14px;
    border-radius: 4px;
    border: 1px solid currentColor;
    cursor: pointer;
    touch-action: manipulation;
    transition: all 0.15s ease;
  }
  .hud-fs-audio-btn.unmuted {
    color: #000;
    background: var(--hud-green, #00ff66);
    border-color: var(--hud-green, #00ff66);
    box-shadow: 0 0 12px rgba(0, 255, 102, 0.4);
  }
  .hud-fs-audio-btn.muted {
    color: #ff6b81;
    background: rgba(255, 71, 87, 0.15);
    border-color: #ff4757;
  }
}

@media (max-width: 480px) {
  .hud-header {
    height: 46px !important;
    padding: 0 8px !important;
  }

  .hud-mobile-symbol-btn,
  .hud-mobile-primary-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
  }

  .hud-mobile-location-badge {
    display: none !important;
  }

  .hud-fs-header {
    height: 48px !important;
    padding: 0 10px !important;
  }
  .hud-fs-title {
    font-size: 0.80rem !important;
  }
  .hud-fs-close-btn {
    padding: 4px 10px !important;
    font-size: 0.65rem !important;
  }
}

/* =============================================================================
   📱 MINIMALIST MOBILE HUD HEADER & THEME-MATCHED VIEWPORT SPACERS
   ============================================================================= */

/* Theme-matched viewport spacers for top & bottom breathing room */
.hud-mobile-viewport-spacer {
  display: none;
}

@media (max-width: 768px) {
  /* Final Authoritative Mobile Top Header: ZOTH STUDIO (Left) + Cyberpunk Menu Button (Right) ONLY */
  .hud-header {
    height: 52px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: var(--hud-header-bg, #04060e) !important;
    gap: 12px !important;
  }

  .hud-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    flex: 1 !important;
  }

  .hud-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
  }

  .hud-brand .hud-brand-text {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    display: inline-block !important;
  }

  .hud-brand .hud-brand-tag {
    display: none !important;
  }

  /* Header Right: Cyberpunk Tactical Menu Button ONLY */
  .hud-header-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    flex-shrink: 0 !important;
  }

  .hud-mobile-cyber-burger-btn {
    display: inline-flex !important;
  }

  /* Aggressively suppress all other elements from mobile topbar */
  .hud-header-center,
  .hud-help-btn,
  .hud-deck-toggle-btn,
  .hud-topbar-breadcrumb,
  .hud-badge-action,
  .hud-theme-picker-group,
  .hud-mobile-micro-tool,
  .hud-mobile-theme-circle-btn,
  .hud-mobile-symbol-btn,
  .hud-mobile-primary-btn,
  .hud-mobile-ws-btn,
  .hud-mobile-agent-btn,
  .hud-mobile-search-btn,
  .hud-mobile-theme-btn,
  .hud-mobile-quick-btn,
  .hud-mobile-location-badge {
    display: none !important;
  }

  /* Viewport Theme-Matched Spacing Divs (Top & Bottom breathing room for stage iframe) */
  .hud-mobile-viewport-spacer {
    display: block !important;
    width: 100% !important;
    flex-shrink: 0 !important;
    background: var(--hud-bg-dark, #04060e) !important;
    transition: background 0.2s ease !important;
  }
  .hud-mobile-viewport-spacer.top {
    height: 8px !important;
    border-bottom: 1px solid var(--hud-border-subtle, rgba(255, 255, 255, 0.06)) !important;
  }
  .hud-mobile-viewport-spacer.bottom {
    height: 60px !important;
    border-top: 1px solid var(--hud-border-subtle, rgba(255, 255, 255, 0.06)) !important;
  }
}