@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;800;900&family=JetBrains+Mono:wght@300;400;500&family=Bebas+Neue&family=Russo+One&family=Share+Tech+Mono&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Inter:wght@300;400;500;600&display=swap');
        
        :root {
            --accent: #00f3ff; --accent-dim: rgba(0, 243, 255, 0.2); --accent-glow: rgba(0, 243, 255, 0.5);
            --p: #ff0055; --c: #00f3ff; --g: #00ff88; --y: #ffcc00; --r: #ff3333; --o: #ff9d00; --v: #b000ff;
            --bg: #050508; --panel: #08080c; --panel-light: #0c0c12; --border: #151520; --border-light: #202030;
            --text: #a0a0a8; --text-dim: #505058; --text-bright: #e8e8ec;
            --theme-color: #00f3ff;
            --theme-bg-tint: rgba(0, 243, 255, 0.05);
            --theme-glow: 0 0 20px rgba(0, 243, 255, 0.15);
            --theme-border: rgba(0, 243, 255, 0.3);
            /* STRUCTURAL THEME ENGINE — CYBER_CORE (Default) */
            --bg-main: #070707;
            --bg-panel: #111111;
            --text-main: #ffffff;
            --accent-struct: #00ff85;
            --font-primary: 'JetBrains Mono', monospace;
            --font-header: 'Bebas Neue', sans-serif;
            --radius: 0px;
            --border-style: 1px solid rgba(255,255,255,0.06);
            --shadow-style: 0 2px 8px rgba(0,0,0,0.7);
            /* ── TRIPLE-ALPHA KINEMATIC HUD ── */
            --ghost-bg: rgba(6,6,10,0.08);
            --ghost-blur: 14px;
            --ghost-border: rgba(0,243,255,0.07);
            --glass-bg: rgba(6,6,10,0.38);
            --glass-blur: 24px;
            --glass-border: rgba(0,243,255,0.32);
            --core-bg: rgba(6,6,10,0.94);
            --core-blur: 30px;
            --core-glow: 0 0 30px rgba(0, 243, 255, 0.35), inset 0 0 20px rgba(0, 243, 255, 0.07);
            --hud-transition: background 0.5s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.5s cubic-bezier(0.19, 1, 0.22, 1), border-color 0.5s cubic-bezier(0.19, 1, 0.22, 1), transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
            --rim-top: 1px solid rgba(255, 255, 255, 0.10);
            --rim-left: 1px solid rgba(255, 255, 255, 0.10);
        }

        body.theme-magenta { --accent: #ff0055; --accent-dim: rgba(255,0,85,0.2); --accent-glow: rgba(255,0,85,0.5); --theme-color: #ff0055; --theme-bg-tint: rgba(255,0,85,0.05); --theme-glow: 0 0 20px rgba(255,0,85,0.15); --theme-border: rgba(255,0,85,0.3); }
        body.theme-green { --accent: #00ff88; --accent-dim: rgba(0,255,136,0.2); --accent-glow: rgba(0,255,136,0.5); --theme-color: #00ff88; --theme-bg-tint: rgba(0,255,136,0.05); --theme-glow: 0 0 20px rgba(0,255,136,0.15); --theme-border: rgba(0,255,136,0.3); }
        body.theme-purple { --accent: #b000ff; --accent-dim: rgba(176,0,255,0.2); --accent-glow: rgba(176,0,255,0.5); --theme-color: #b000ff; --theme-bg-tint: rgba(176,0,255,0.05); --theme-glow: 0 0 20px rgba(176,0,255,0.15); --theme-border: rgba(176,0,255,0.3); }
        body.theme-gold { --accent: #ffd700; --accent-dim: rgba(255,215,0,0.2); --accent-glow: rgba(255,215,0,0.5); --theme-color: #ffd700; --theme-bg-tint: rgba(255,215,0,0.05); --theme-glow: 0 0 20px rgba(255,215,0,0.15); --theme-border: rgba(255,215,0,0.3); }
        body.theme-night { --accent: #334455; --accent-dim: rgba(51,68,85,0.2); --bg: #020204; --panel: #040408; --theme-color: #334455; --theme-bg-tint: rgba(51,68,85,0.05); --theme-glow: 0 0 20px rgba(51,68,85,0.15); --theme-border: rgba(51,68,85,0.3); }

        /* STRUCTURAL THEME ENGINE — BROADCAST_PRO */
        body.theme-broadcast {
            /* Override every legacy var → full light silver palette */
            --bg: #dde1e8;
            --panel: #eaecf2;
            --panel-light: #f5f6f9;
            --border: rgba(0,0,0,0.09);
            --border-light: rgba(0,0,0,0.05);
            --text: #2c3444;
            --text-dim: #6a7284;
            --text-bright: #080c18;
            /* Structural vars */
            --bg-main: #dde1e8;
            --bg-panel: #eaecf2;
            --text-main: #080c18;
            --accent-struct: #b8001a;
            --font-primary: 'Space Mono', monospace;
            --font-header: 'Arial Black', sans-serif;
            --radius: 0px;
            --border-style: 1px solid rgba(0,0,0,0.1);
            --shadow-style: 0 1px 5px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.75);
        }
        /* Top/bottom bars — light silver, no red lines */
        body.theme-broadcast #top-bar,
        body.theme-broadcast #bottom-bar {
            background: linear-gradient(180deg, #f0f2f7 0%, #d8dce5 100%) !important;
            border-color: rgba(0,0,0,0.14) !important;
        }
        /* Sidebar */
        body.theme-broadcast .sidebar {
            background: linear-gradient(180deg, #eaecf2 0%, #dde0e8 100%) !important;
            border-color: rgba(0,0,0,0.1) !important;
        }
        /* Canvas — no border on light background */
        body.theme-broadcast #stage {
            border-color: transparent !important;
            box-shadow: none !important;
        }
        /* Section headers — red left accent bar */
        body.theme-broadcast .sec-head {
            background: linear-gradient(90deg, rgba(184,0,26,0.07) 0%, rgba(0,0,0,0.02) 80%) !important;
            border-left: 3px solid #b8001a !important;
        }
        body.theme-broadcast .sec-head:hover {
            background: linear-gradient(90deg, rgba(184,0,26,0.13) 0%, rgba(0,0,0,0.04) 80%) !important;
        }
        body.theme-broadcast .sec-title {
            color: #b8001a !important;
            font-weight: 800;
            letter-spacing: 2.5px;
        }
        body.theme-broadcast .sec-dot {
            background: #b8001a !important;
            box-shadow: 0 0 4px rgba(184,0,26,0.5) !important;
        }
        body.theme-broadcast .sec-dot.off {
            background: #b0b8c4 !important;
            box-shadow: none !important;
        }
        body.theme-broadcast .section {
            border-bottom: 1px solid rgba(0,0,0,0.07) !important;
        }
        /* Buttons — silver bevel with dark readable text */
        body.theme-broadcast .btn {
            background: linear-gradient(180deg, #f4f6fa 0%, #d8dce6 100%) !important;
            color: #1a2030 !important;
            border: 1px solid rgba(0,0,0,0.2) !important;
            box-shadow: 0 1px 3px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.9) !important;
            text-shadow: none !important;
        }
        body.theme-broadcast .btn:hover {
            background: linear-gradient(180deg, #ffffff 0%, #e4e8f0 100%) !important;
            border-color: #b8001a !important;
            color: #080c18 !important;
        }
        body.theme-broadcast .btn.on {
            background: linear-gradient(180deg, #f0d0d4 0%, #dca0a8 100%) !important;
            border-color: #b8001a !important;
            color: #6a0010 !important;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.2) !important;
        }
        /* Inputs */
        body.theme-broadcast input,
        body.theme-broadcast select,
        body.theme-broadcast textarea {
            background: rgba(255,255,255,0.8) !important;
            border-color: rgba(0,0,0,0.2) !important;
            color: #1a2030 !important;
        }
        /* Force dark text on all text-bearing elements */
        body.theme-broadcast .sec-body,
        body.theme-broadcast label,
        body.theme-broadcast span:not(.sec-title):not(.accent),
        body.theme-broadcast p,
        body.theme-broadcast .log-entry,
        body.theme-broadcast .info-val,
        body.theme-broadcast .info-label { color: #2c3444 !important; }
        /* Palette swatches — dark border so on-state is visible on light bg */
        body.theme-broadcast .pal.on { border-color: #1a2030 !important; box-shadow: 0 0 5px rgba(0,0,0,0.3) !important; }

        /* === TOP BAR: logo, badges, clock === */
        /* Disable exclusion blend — neon colors show fine on silver without it */
        body.theme-broadcast #main-logo { mix-blend-mode: normal !important; }
        /* CORE span readable */
        body.theme-broadcast #main-logo span { color: #b8001a !important; opacity: 1 !important; }
        body.theme-broadcast .sub-tag { color: #1a2030 !important; opacity: 0.75 !important; }
        body.theme-broadcast .version { color: #b8001a !important; background: rgba(184,0,26,0.08) !important; border-color: #b8001a !important; }
        /* Generic badges → dark text */
        body.theme-broadcast .badge { border-color: rgba(0,0,0,0.22) !important; color: #1a2030 !important; background: rgba(255,255,255,0.4) !important; }
        body.theme-broadcast #fps-badge { color: #146b30 !important; border-color: #146b30 !important; background: rgba(20,107,48,0.08) !important; }
        body.theme-broadcast #wallet-badge { color: #7a4800 !important; border-color: #7a4800 !important; background: rgba(122,72,0,0.06) !important; }
        body.theme-broadcast #btn-open-p2p-modal { color: #005080 !important; border-color: #005080 !important; background: rgba(0,80,128,0.06) !important; }
        body.theme-broadcast .stat,
        body.theme-broadcast #status-text { color: #1a2030 !important; }
        body.theme-broadcast #clock { color: #1a2030 !important; font-weight: 700; }

        /* === BOTTOM BAR: ticker + info bar === */
        /* Remove dark overlay from ticker strip */
        body.theme-broadcast #ticker-wrap { background: rgba(0,0,0,0.06) !important; border-color: rgba(0,0,0,0.1) !important; }
        body.theme-broadcast #ticker-label { color: #b8001a !important; background: rgba(184,0,26,0.08) !important; border-color: rgba(0,0,0,0.1) !important; }
        body.theme-broadcast #ticker-text,
        body.theme-broadcast #ticker-text * { color: #1a2030 !important; }
        body.theme-broadcast .tick-up { color: #146b30 !important; }
        body.theme-broadcast .tick-down { color: #b8001a !important; }
        body.theme-broadcast #info-bar { border-color: rgba(0,0,0,0.08) !important; }
        body.theme-broadcast .info-item { color: #5a6878 !important; }
        body.theme-broadcast .info-item span { color: #1a2030 !important; }
        body.theme-broadcast .info-item .hl { color: #b8001a !important; }

        /* Broadcast ticker text: dark navy — JS injects !important inline, CSS provides base */
        body.theme-broadcast .tick-up { color: #146b30 !important; }
        body.theme-broadcast .tick-down { color: #b8001a !important; }

        /* === LOGO MORPH: keep neon morphing visible on silver === */
        /* m4 = white stroke → dark stroke */
        body.theme-broadcast .logo.m4 { color: transparent !important; -webkit-text-stroke: 1.5px #1a2030 !important; text-shadow: none !important; }
        /* m5 = white text → dark with coloured shadows */
        body.theme-broadcast .logo.m5 { color: #1a2030 !important; text-shadow: 2px 0 #b8001a, -2px 0 #005080 !important; }

        /* === ALL INPUTS / TEXT AREAS: light bg, dark text === */
        body.theme-broadcast .inp,
        body.theme-broadcast input:not([type="range"]):not([type="checkbox"]):not([type="radio"]) {
            background: rgba(255,255,255,0.88) !important;
            border-color: rgba(0,0,0,0.18) !important;
            color: #1a2030 !important;
        }
        body.theme-broadcast .inp:focus,
        body.theme-broadcast input:focus {
            border-color: #b8001a !important;
            box-shadow: 0 0 0 2px rgba(184,0,26,0.12) !important;
        }

        /* === ALL SELECTS (including ID-specific ones): light bg === */
        body.theme-broadcast select,
        body.theme-broadcast select.inp,
        body.theme-broadcast .slot-select,
        body.theme-broadcast #ai-model-select,
        body.theme-broadcast #bug-style-select,
        body.theme-broadcast #bug-mode-select,
        body.theme-broadcast #lt-style-select,
        body.theme-broadcast #audio-input-select,
        body.theme-broadcast #audio-output {
            background: rgba(255,255,255,0.88) !important;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%231a2030' opacity='0.55'/%3E%3C/svg%3E") !important;
            background-repeat: no-repeat !important;
            background-position: right 7px center !important;
            background-size: 7px 5px !important;
            border: 1px solid rgba(0,0,0,0.2) !important;
            color: #1a2030 !important;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
        }
        body.theme-broadcast select:focus,
        body.theme-broadcast select.inp:focus,
        body.theme-broadcast .slot-select:focus,
        body.theme-broadcast #ai-model-select:focus,
        body.theme-broadcast #bug-style-select:focus,
        body.theme-broadcast #lt-style-select:focus,
        body.theme-broadcast #audio-input-select:focus,
        body.theme-broadcast #audio-output:focus {
            border-color: #b8001a !important;
            box-shadow: 0 0 0 2px rgba(184,0,26,0.12) !important;
        }
        /* Dropdown option items */
        body.theme-broadcast select option,
        body.theme-broadcast .slot-select option {
            background: #f4f5f8 !important;
            color: #1a2030 !important;
        }

        /* STRUCTURAL THEME ENGINE — ETHEREAL_MINIMAL */
        body.theme-ethereal {
            --bg-main: #1c1c1e;
            --bg-panel: #2c2c2e;
            --text-main: #e5e5ea;
            --accent-struct: #a78bfa;
            --font-primary: 'Inter', sans-serif;
            --font-header: 'Inter', sans-serif;
            --radius: 16px;
            --border-style: 1px solid rgba(255,255,255,0.05);
            --shadow-style: 0 10px 40px rgba(0,0,0,0.4);
        }
        /* Ethereal — explicit overrides so hardcoded console elements pick up the theme */
        body.theme-ethereal #top-bar {
            background: #2c2c2e !important;
            border-color: rgba(255,255,255,0.05) !important;
            box-shadow: 0 10px 40px rgba(0,0,0,0.4) !important;
            border-radius: 0 !important;
        }
        /* Bottom bar: Obsidian hardware frame — pure black so ticker reads like a news chyron */
        body.theme-ethereal #bottom-bar {
            background: #000000 !important;
            border-color: rgba(167,139,250,0.15) !important;
            box-shadow: 0 -4px 20px rgba(0,0,0,0.8) !important;
            border-radius: 0 !important;
        }
        /* Ticker strip inside the black bar */
        body.theme-ethereal #ticker-wrap { background: transparent !important; border-color: rgba(167,139,250,0.12) !important; }
        body.theme-ethereal #ticker-label { color: #a78bfa !important; background: rgba(167,139,250,0.15) !important; border-color: rgba(167,139,250,0.3) !important; font-weight: 700 !important; }
        body.theme-ethereal #ticker-text  { color: #e5e5ea !important; }
        body.theme-ethereal #ticker-text *{ color: #e5e5ea !important; }
        body.theme-ethereal .sidebar {
            background: #2c2c2e !important;
            border-color: rgba(255,255,255,0.05) !important;
            box-shadow: 0 10px 40px rgba(0,0,0,0.4) !important;
        }
        body.theme-ethereal .section {
            border-top-color: rgba(255,255,255,0.03) !important;
            border-bottom-color: rgba(255,255,255,0.05) !important;
        }
        body.theme-ethereal .btn {
            background: linear-gradient(180deg, #3a3a3c 0%, #2c2c2e 100%) !important;
            border-radius: 16px !important;
            border-top: 1px solid rgba(255,255,255,0.08) !important;
            border-left: 1px solid rgba(255,255,255,0.05) !important;
            border-right: 1px solid rgba(255,255,255,0.03) !important;
            border-bottom: 1px solid rgba(0,0,0,0.3) !important;
            box-shadow: 0 10px 40px rgba(0,0,0,0.4) !important;
            color: #e5e5ea !important;
            font-family: 'Inter', sans-serif !important;
        }
        body.theme-ethereal .btn:hover {
            background: linear-gradient(180deg, #48484a 0%, #3a3a3c 100%) !important;
            border-color: rgba(167,139,250,0.5) !important;
        }
        body.theme-ethereal .btn.on {
            border-color: #a78bfa !important;
            color: #a78bfa !important;
            box-shadow: 0 0 14px rgba(167,139,250,0.3) !important;
        }

        /* --- WEB DNA KILL SWITCH --- */
        * { 
            box-sizing: border-box; margin: 0; padding: 0; 
            -webkit-user-select: none;
            user-select: none;
            -webkit-user-drag: none;
        }
        
        /* CURSOR: NORMAL BY DEFAULT */
        body { cursor: default; }
        .btn, button { cursor: pointer; }
        input[type="range"] { cursor: ew-resize; }
        input[type="text"] { cursor: text; }
        
        /* CURSOR: CROSSHAIR ONLY IN SHOOTING MODE */
        body.shooting-mode { cursor: crosshair; }
        body.shooting-mode #stage { cursor: crosshair !important; }
        body.shooting-mode .sidebar { cursor: default; }
        body.shooting-mode .sidebar .btn { cursor: pointer; }

        /* GPU PROMOTION - THE ENGINE CORE */
        /* NOTE: backface-visibility:hidden is intentionally absent from #stage —
           it freezes GIF animation at frame 1 in Chromium compositor layers */
        #sys-log, .sidebar {
            will-change: transform;
            backface-visibility: hidden;
            transform: translate3d(0,0,0);
        }
        #stage {
            will-change: transform;
            transform: translate3d(0,0,0);
        }
        
        /* OPTIMIZED DRAGGING - NO TRANSITION DURING DRAG */
        .dragging {
            transition: none !important;
            pointer-events: auto !important;
        }
        
        /* Hide helper class */
        .hidden { display: none !important; }
        
        /* Hide Scrollbars Globally */
        ::-webkit-scrollbar { display: none; }
        html, body { 
            scrollbar-width: none; 
            -ms-overflow-style: none; 
            overflow: hidden; 
            height: 100vh; width: 100vw; 
            background: var(--bg); color: var(--text); 
            font-family: var(--font-primary);
            font-size: 12px;
            overscroll-behavior: none;
            touch-action: none;
            transition: background 0.1s linear;
        }

        input, textarea { 
            user-select: text; 
            cursor: text !important; 
        }

        /* SYSTEM FAILURE MODE (REPLACES PSYCHOSIS STROBE) */
        body.system-failure {
            animation: system-failure-anim 4s infinite linear;
            background: #000 !important;
        }
        body.system-failure .sidebar, body.system-failure #top-bar, body.system-failure #bottom-bar {
            border-color: var(--r) !important;
        }
        body.system-failure * {
            color: var(--r) !important;
            text-shadow: 2px 0 var(--c), -2px 0 var(--y);
        }
        @keyframes system-failure-anim {
            0% { transform: skewX(0deg) scale(1); filter: hue-rotate(0deg); }
            20% { transform: skewX(2deg) scale(1.02); filter: hue-rotate(90deg) contrast(1.5); }
            40% { transform: skewX(-2deg) scale(0.98); filter: hue-rotate(180deg) invert(0.1); }
            60% { transform: skewX(1deg); filter: hue-rotate(270deg) blur(2px); }
            80% { transform: skewX(-1deg); filter: hue-rotate(300deg); }
            100% { transform: skewX(0deg) scale(1); filter: hue-rotate(360deg); }
        }

        /* PARTY MODE CONSOLE GLOW - RESTORED LIGHT PLAY */
        body.party-active .sidebar, body.party-active header, body.party-active footer {
            animation: console-breathe 0.5s infinite alternate;
        }
        @keyframes console-breathe {
            0% { border-color: var(--c); box-shadow: inset 0 0 5px rgba(0, 243, 255, 0.1); }
            100% { border-color: var(--v); box-shadow: inset 0 0 15px rgba(176, 0, 255, 0.2); }
        }

        /* NEW LOGO ANIMATIONS */
        .logo { font-family: 'Orbitron', sans-serif; font-size: 36px; font-weight: 900; letter-spacing: -2px; color: #fff; transition: all 0.05s ease; }
        .logo:hover { transform: scale(1.02); filter: brightness(1.1); text-shadow: 4px 4px 0px var(--accent-dim); }
        
        #main-logo span { animation: core-flicker 4s infinite; display:inline-block; will-change: opacity, color; }
        @keyframes core-flicker {
            0%, 90% { opacity: 0.6; color: var(--accent); }
            92% { opacity: 1; color: #fff; }
            94% { opacity: 0.6; color: var(--accent); }
            96% { opacity: 0; }
            98% { opacity: 1; color: var(--r); }
            100% { opacity: 0.6; color: var(--accent); }
        }

        .logo.m1 { color: #00f3ff; text-shadow: 0 0 20px #00f3ff; animation: pulse-glow 2s infinite; }
        .logo.m2 { color: #ff0055; text-shadow: 2px 2px 0px #fff; animation: glitch-text 0.3s infinite; }
        .logo.m3 { background: linear-gradient(90deg, #00f3ff, #ff0055, #00ff88); -webkit-background-clip: text; color: transparent; animation: gradient-slide 3s linear infinite; }
        .logo.m4 { color: transparent; -webkit-text-stroke: 1px #fff; animation: hollow-pulse 1s infinite alternate; }
        .logo.m5 { color: #fff; text-shadow: 2px 0 #f00, -2px 0 #0ff; animation: chromatic-shake 0.2s infinite; }
        .logo.m6 { background: linear-gradient(180deg, #fff, #555); -webkit-background-clip: text; color: transparent; opacity: 0.8; }

        @keyframes pulse-glow { 0%,100% { opacity: 1; filter: drop-shadow(0 0 5px var(--accent)); } 50% { opacity: 0.8; filter: drop-shadow(0 0 15px var(--accent)); } }
        @keyframes glitch-text { 0% { transform: translate(0,0); } 20% { transform: translate(-2px, 2px); } 40% { transform: translate(-2px, -2px); } 60% { transform: translate(2px, 2px); } 80% { transform: translate(2px, -2px); } 100% { transform: translate(0,0); } }
        @keyframes gradient-slide { 0% { background-position: 0% 50%; background-size: 200% 200%; } 100% { background-position: 100% 50%; background-size: 200% 200%; } }
        @keyframes hollow-pulse { from { stroke-opacity: 1; } to { stroke-opacity: 0.3; } }
        @keyframes chromatic-shake { 0% { transform: translate(1px, 0); } 50% { transform: translate(-1px, 0); } 100% { transform: translate(1px, 0); } }

        .sub-tag { font-size: 11px; letter-spacing: 3px; color: var(--accent); margin-left: 10px; opacity: 0.7; position: relative; display: inline-block; overflow: hidden; }
        .sub-tag::after { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); animation: vngrd-shine 8s ease-in-out infinite; }
        @keyframes vngrd-shine { 0%, 85%, 100% { left: -100%; opacity: 0; } 90%, 95% { opacity: 1; } 92% { left: 150%; } }
        .version { font-size: 10px; color: var(--accent); padding: 3px 8px; background: var(--accent-dim); border: 1px solid var(--accent); margin-left: 10px; }

        #stage { position: fixed; top: 45px; left: 200px; right: 200px; bottom: 55px; background: #000; border: 1px solid var(--border); overflow: hidden; }
        #vj-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; pointer-events: none !important; }
        #overlay-layer { position: absolute; inset: 0; z-index: 2000; pointer-events: none; }
        
        #stage::before { content: ""; position: absolute; inset: 0; z-index: 3000; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,10,0,0.03) 0px, rgba(255,10,0,0.03) 1px, rgba(0,255,10,0.025) 1px, rgba(0,255,10,0.025) 2px, rgba(0,10,255,0.04) 2px, rgba(0,10,255,0.04) 3px, transparent 3px, transparent 4px); opacity: 0.5; }
        #stage::after { content: ""; position: absolute; inset: 0; z-index: 3001; pointer-events: none; background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.5) 100%); }

        body.fullscreen #stage { position: fixed; inset: 0; z-index: 9999; border: none; }
        body.fullscreen .sidebar, body.fullscreen #top-bar, body.fullscreen #bottom-bar, body.fullscreen #ghost-terminal { opacity: 0; pointer-events: none; }
        /* FULLSCREEN H-HINT — small persistent badge so performer remembers exit key */
        #fs-hint {
            display: none; position: fixed; bottom: 14px; right: 16px; z-index: 99998;
            align-items: center; gap: 4px; padding: 3px 8px;
            background: rgba(0,0,0,0.45); border: 1px solid rgba(0,243,255,0.20);
            border-radius: 2px; pointer-events: none;
            transition: opacity 0.8s ease;
        }
        body.fullscreen #fs-hint { display: flex; opacity: 0.55; }
        body.fullscreen #fs-hint:hover { opacity: 0; }
        /* ESC WARNING TOAST */
        #esc-warn {
            display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
            z-index: 99999; padding: 10px 22px;
            background: rgba(0,0,0,0.88); border: 1px solid rgba(255,80,0,0.7);
            color: #ff5000; font-family: 'Orbitron', sans-serif; font-size: 10px;
            letter-spacing: 2.5px; text-transform: uppercase; pointer-events: none;
            box-shadow: 0 0 30px rgba(255,80,0,0.30); text-align: center;
            animation: esc-warn-pulse 0.6s ease-in-out infinite;
        }
        #esc-warn.visible { display: block; }
        @keyframes esc-warn-pulse { 0%,100% { border-color: rgba(255,80,0,0.7); box-shadow: 0 0 30px rgba(255,80,0,0.30); } 50% { border-color: rgba(255,140,0,1); box-shadow: 0 0 40px rgba(255,140,0,0.55); } }

        #lower-third {
            display: none !important;
            position: absolute;
            bottom: 30px;
            left: 30px;
            z-index: 2100;
            pointer-events: none;
        }
        /* .visible overrides display:none with higher specificity + !important */
        #lower-third.visible { display: block !important; }
        .lt-container { 
            display: flex; flex-direction: column; 
            background: linear-gradient(90deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 100%);
            border-left: 3px solid var(--accent); 
            padding: 12px 25px 12px 15px; 
            min-width: 280px; max-width: 400px;
            opacity: 0; transform: translateX(-20px);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        #lower-third.visible .lt-container { opacity: 1; transform: translateX(0); }
        .lt-title { font-family: 'Orbitron', sans-serif; font-size: 20px; font-weight: 700; color: #fff; letter-spacing: 1px; line-height: 1.2; }
        .lt-subtitle { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: 2px; margin-top: 2px; }
        .lt-container.lt-guest { border-color: var(--c); }
        .lt-container.lt-guest .lt-subtitle { color: var(--c); }
        .lt-container.lt-track { border-color: var(--g); }
        .lt-container.lt-track .lt-subtitle { color: var(--g); }
        .lt-container.lt-breaking { border-color: var(--r); animation: lt-pulse 1s infinite; }
        .lt-container.lt-breaking .lt-subtitle { color: var(--r); }
        @keyframes lt-pulse { 0%, 100% { border-color: var(--r); } 50% { border-color: #fff; } }
        /* NEON: glowing magenta border all four sides */
        .lt-container.lt-neon { border: 2px solid #ff00cc; border-left-width: 2px; box-shadow: 0 0 18px rgba(255,0,204,0.45), inset 0 0 12px rgba(255,0,204,0.08); background: linear-gradient(90deg, rgba(20,0,20,0.92) 0%, rgba(10,0,15,0.82) 100%); }
        .lt-container.lt-neon .lt-subtitle { color: #ff00cc; }
        /* SPLIT: two-column bar — name left, role right */
        .lt-container.lt-split { flex-direction: row; align-items: center; gap: 0; border-left: none; border-bottom: 3px solid #ffaa00; border-top: 1px solid rgba(255,170,0,0.25); border-right: none; border-left: 3px solid #ffaa00; background: linear-gradient(90deg, rgba(18,10,0,0.95) 0%, rgba(12,8,0,0.8) 100%); padding: 10px 20px 10px 12px; }
        .lt-container.lt-split .lt-title { flex: 1; font-size: 18px; }
        .lt-container.lt-split .lt-subtitle { color: #ffaa00; border-left: 2px solid rgba(255,170,0,0.5); padding-left: 14px; margin-top: 0; font-size: 10px; letter-spacing: 3px; flex: 1; }
        /* GLITCH: rounded pill, electric violet, chromatic aberration reveal */
        .lt-container.lt-glitch {
            border: 2px solid #bf00ff;
            border-radius: 40px;
            background: linear-gradient(110deg, rgba(12,0,22,0.94) 0%, rgba(8,0,14,0.88) 100%);
            box-shadow: 0 0 22px rgba(191,0,255,0.35), inset 0 0 16px rgba(191,0,255,0.06);
            overflow: hidden;
        }
        .lt-container.lt-glitch .lt-title  { color: #fff; text-shadow: 2px 0 #ff0040, -2px 0 #00f3ff; }
        .lt-container.lt-glitch .lt-subtitle { color: #bf00ff; letter-spacing: 3px; }
        /* Glitch entrance — slide + chromatic burst that settles */
        @keyframes lt-glitch-in {
            0%   { opacity: 0; transform: translateX(-28px) scaleX(0.92); filter: hue-rotate(90deg) saturate(3); }
            35%  { opacity: 1; transform: translateX(4px)  scaleX(1.01); filter: hue-rotate(0deg)  saturate(1.5); }
            55%  { transform: translateX(-2px) scaleX(0.99); filter: none; }
            100% { transform: translateX(0)   scaleX(1);    filter: none; }
        }
        #lower-third.visible .lt-container.lt-glitch {
            animation: lt-glitch-in 0.55s cubic-bezier(0.22,1,0.36,1) both;
        }

        /* ========================================
           TRIPLE-STACK IDENTITY - HEADER BRAND
           ======================================== */
        #brand {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        /* Brand Logo Slot (uploaded image) */
        #brand-logo-slot {
            max-height: 32px;
            max-width: 60px;
            object-fit: contain;
            filter: drop-shadow(0 0 8px var(--accent));
            display: none;
        }
        #brand-logo-slot.active {
            display: block;
        }
        
        /* Main Logo Text - mix-blend-mode: exclusion by default */
        #main-logo {
            mix-blend-mode: exclusion;
        }
        #main-logo.hidden { display: none; }

        /* Legacy style classes — kept for backward compatibility */
        #main-logo.style-solid    { mix-blend-mode: normal; color: #fff; text-shadow: 0 0 15px var(--accent); }
        #main-logo.style-hollow   { mix-blend-mode: normal; color: transparent; -webkit-text-stroke: 1px var(--accent); text-shadow: none; }
        #main-logo.style-inverted { mix-blend-mode: exclusion; color: #fff; text-shadow: none; }
        
        /* V29 MANUAL LAYER ELEMENTS */
       /* --- V29 INDUSTRIAL OVERRIDE (NO GLOW) --- */
 #station-bug {
            position: absolute; top: 30px; left: 30px; z-index: 2600;
            font-family: 'Orbitron', sans-serif; font-size: 28px; font-weight: 800;
            color: #ffffff;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
            mix-blend-mode: difference;
            background: transparent !important;
            border: none !important;
            backdrop-filter: none !important;
            cursor: move;
            pointer-events: auto !important;
        }
        #station-bug.hidden { opacity: 0; pointer-events: none; }
        #station-bug img { max-height: 60px; filter: drop-shadow(0 0 10px var(--accent)); }
        
      #user-logo-layer {
    /* POSITION & SCALE — offscreen parking; canvas drawImage reads pixel data directly.
       Visibility is controlled by APP.trinity.logo.visible in the render loop,
       NOT by display:none (which kills Chrome's GIF frame decoder). */
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    pointer-events: none;
    /* Hide broken-image placeholder before src is loaded */
    opacity: 0 !important;

    /* SURGICAL CLEANUP: NO GLOW, NO BOX, NO FILTERS
       filter: drop-shadow freezes GIF animation in Chromium compositor layers */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
        

/* STRUCTURAL INTEGRITY BAR (FLAT) */
#integrity-bar {
    position: fixed; top: 50px; left: 50%; transform: translateX(-50%);
    width: 200px; height: 6px;
    background: #111; /* Solid dark background */
    border: 1px solid var(--border-light);
    z-index: 99998; display: none;
    box-shadow: none !important;
}

#integrity-fill {
    height: 100%; width: 100%;
    /* Solid colors feel more industrial than soft gradients */
    background: var(--g); 
    transition: width 0.1s;
}

#integrity-text {
    position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
    font-size: 9px; 
    color: var(--text-bright); 
    text-shadow: none !important; /* GLOW REMOVED */
    font-family: 'Orbitron', sans-serif;
}
        
        /* LENS FAILURE STATE */
        body.lens-shattered #stage { backdrop-filter: none !important; filter: none !important; }
        
        /* CAMERA PREVIEW BOX - INLINE SIDEBAR */
        #cam-preview-float {
            position: relative;
            width: 100%;
            aspect-ratio: 16 / 9;
            background: #000;
            border: 1px solid var(--border);
            border-radius: 2px;
            display: none;
            overflow: hidden;
            margin: 6px 0;
        }
        #cam-preview-float.active { display: block; border-color: var(--accent); }
        #p2p-bug-overlay {
            display: none;
            position: absolute;
            top: 4px; left: 4px;
            font-family: 'Orbitron', sans-serif;
            font-size: 8px; font-weight: 800;
            color: #ffffff;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.9);
            pointer-events: none;
            z-index: 20;
            letter-spacing: 0.5px;
            max-width: 80%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        #cam-preview-float video {
            width: 100%;
            height: 100%;
            object-fit: contain;
            background: #000;
            display: block;
        }
        #cam-preview-float .preview-label {
            position: absolute;
            top: 3px;
            left: 3px;
            font-size: 7px;
            color: var(--accent);
            background: rgba(0,0,0,0.7);
            padding: 1px 5px;
            border-left: 1px solid var(--accent);
            letter-spacing: 1.5px;
            font-family: 'Orbitron', sans-serif;
        }
        #cam-preview-float .rec-indicator {
            position: absolute;
            top: 3px;
            right: 3px;
            width: 6px;
            height: 6px;
            background: var(--r);
            border-radius: 50%;
            display: none;
            animation: rec-blink 1s infinite;
        }
        #cam-preview-float .rec-indicator.on { display: block; }
        #btn-flip-cam-overlay {
            display: none;
            position: absolute;
            bottom: 4px;
            right: 4px;
            z-index: 30;
            background: rgba(0,0,0,0.55);
            border: 1px solid rgba(0,243,255,0.35);
            border-radius: 50%;
            width: 20px;
            height: 20px;
            padding: 0;
            cursor: pointer;
            font-size: 11px;
            line-height: 20px;
            text-align: center;
            color: var(--accent);
            transition: background 0.15s, border-color 0.15s, transform 0.15s;
        }
        #btn-flip-cam-overlay:hover,
        #btn-flip-cam-overlay:active {
            background: rgba(0,243,255,0.18);
            border-color: var(--accent);
            transform: scale(1.1);
        }
        /* Desktop: always hidden regardless of JS */
        @media (min-width: 1025px) {
            #btn-flip-cam-overlay { display: none !important; }
        }

        /* LT preview overlay: shows what the sender is broadcasting via P2P */
        #lt-preview-canvas {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: auto;
            pointer-events: none;
            z-index: 2;
            display: none;
        }
        #cam-preview-float.active #lt-preview-canvas { display: block; }
        
        /* AUTO-INVERT FOR TV LEGIBILITY — merged into primary #station-bug above */
        #ticker-text {
            mix-blend-mode: difference;
        }
        
        /* MIDI LEARN MODE */
        body.midi-learn-active .btn,
        body.midi-learn-active input[type="range"] {
            animation: midi-learn-pulse 0.5s infinite alternate;
        }
        @keyframes midi-learn-pulse {
            0% { box-shadow: 0 0 5px var(--v); }
            100% { box-shadow: 0 0 20px var(--v), inset 0 0 10px rgba(176,0,255,0.2); }
        }
        .midi-bound {
            position: relative;
        }
        .midi-bound::after {
            content: 'M';
            position: absolute;
            top: -4px;
            right: -4px;
            width: 12px;
            height: 12px;
            background: var(--v);
            color: #fff;
            font-size: 7px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 2px;
            z-index: 10;
        }
        

        

        
        /* REFRACTIVE GLASS SHARDS - WebGL */
        .glass-shard-webgl {
            position: absolute;
            pointer-events: none;
            backdrop-filter: blur(2px) brightness(1.2);
            -webkit-backdrop-filter: blur(2px) brightness(1.2);
            background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(255,255,255,0.05) 100%);
            border: 1px solid rgba(255,255,255,0.3);
            mix-blend-mode: overlay;
        }
        
        /* DEPTH HOLES - Physical Console Punctures */
        .bullet-hole-depth {
            position: absolute;
            border-radius: 50%;
            background: radial-gradient(circle, #000 0%, #111 40%, #222 70%, transparent 100%);
            box-shadow: inset 3px 3px 8px rgba(0,0,0,0.9), 
                        inset -1px -1px 4px rgba(50,50,50,0.5),
                        0 0 10px rgba(0,0,0,0.5);
            pointer-events: none;
        }

        #ghost-terminal {
            position: fixed; bottom: 70px; right: 210px;
            width: 280px;
            background: rgba(2,8,12,0.82);
            border: 1px solid rgba(0,243,255,0.18);
            z-index: 6000; font-family: 'JetBrains Mono', monospace; font-size: 10px;
            display: none; flex-direction: column;
            box-shadow: 0 4px 18px rgba(0,0,0,0.45);
            transition: box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
            border-radius: 2px;
        }
        #ghost-terminal.active { display: flex; }
        /* Expanded: header + body revealed */
        #ghost-terminal.expanded {
            border-color: rgba(0,243,255,0.32);
            background: rgba(2,8,12,0.94);
            box-shadow: 0 0 28px rgba(0,243,255,0.12), 0 6px 24px rgba(0,0,0,0.6);
        }
        /* Header — collapsed by default, slides in when expanded */
        #ghost-terminal-header {
            display: flex; justify-content: space-between; align-items: center;
            padding: 0 10px; flex-shrink: 0; overflow: hidden;
            max-height: 0; opacity: 0;
            background: linear-gradient(90deg, rgba(0,243,255,0.09) 0%, rgba(0,243,255,0.03) 100%);
            border-bottom: 1px solid rgba(0,243,255,0.0);
            transition: max-height 0.28s ease, opacity 0.22s ease, padding 0.28s ease, border-color 0.28s ease;
        }
        #ghost-terminal.expanded #ghost-terminal-header {
            max-height: 38px; opacity: 1; padding: 5px 10px;
            border-bottom-color: rgba(0,243,255,0.15);
        }
        #ghost-terminal-title {
            font-family: 'Orbitron', sans-serif; font-size: 8px; letter-spacing: 2px;
            color: rgba(0,243,255,0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            min-width: 0; flex: 1; padding-right: 8px;
        }
        #ghost-terminal-controls { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
        #ghost-terminal-status { font-size: 7px; color: var(--g); letter-spacing: 1px; opacity: 0.7; }
        /* Body — collapsed by default */
        #ghost-terminal-body {
            padding: 0 10px; overflow-y: auto; scrollbar-width: none;
            max-height: 0; opacity: 0;
            transition: max-height 0.32s ease, opacity 0.25s ease, padding 0.28s ease;
        }
        #ghost-terminal.expanded #ghost-terminal-body {
            max-height: 148px; opacity: 1; padding: 7px 10px;
        }
        .ghost-log { margin-bottom: 3px; line-height: 1.4; font-size: 9px; }
        .ghost-log .ts { color: rgba(255,255,255,0.2); margin-right: 5px; font-size: 8px; }
        .ghost-log .ai { color: var(--accent); }
        .ghost-log .cmd { color: rgba(255,255,255,0.5); }
        .ghost-log .user { color: rgba(255,255,255,0.9); }
        .ghost-log .crit { color: var(--r); }
        .ghost-log .success { color: var(--g); }
        /* Input bar — always visible, styled as a minimal prompt */
        #ghost-input-line {
            display: flex; align-items: center;
            border-top: 1px solid rgba(0,243,255,0.0);
            padding: 7px 10px; background: transparent; flex-shrink: 0;
            transition: border-color 0.28s ease, background 0.28s ease;
        }
        #ghost-terminal.expanded #ghost-input-line {
            border-top-color: rgba(0,243,255,0.12);
            background: rgba(0,0,0,0.18);
        }
        #ghost-prompt { color: rgba(0,243,255,0.6); margin-right: 7px; font-size: 9px; font-weight: 700; letter-spacing: 1px; transition: color 0.2s ease; }
        #ghost-terminal.expanded #ghost-prompt { color: var(--accent); }
        #ghost-input { background: transparent; border: none; color: #fff; flex: 1; font-family: 'JetBrains Mono', monospace; font-size: 10px; outline: none; }
        #ghost-input::placeholder { color: rgba(255,255,255,0.2); }

        /* ── PODCAST TRAY ── */
        #podcast-tray {
            position: fixed; bottom: 70px; left: 0;
            width: 100%; padding-right: 390px;
            box-sizing: border-box; z-index: 5500;
            display: flex; gap: 6px; padding-left: 12px;
            transform: translateY(120%); opacity: 0;
            transition: transform 0.4s cubic-bezier(.4,0,.2,1), opacity 0.3s ease;
            pointer-events: none;
        }
        #podcast-tray.on-air { transform: translateY(0); opacity: 1; pointer-events: auto; }
        .podcast-slot {
            flex: 1; min-width: 0;
            background: rgba(0,5,12,0.92);
            border: 1px solid rgba(0,243,255,0.25);
            border-top: 2px solid var(--accent);
            padding: 6px 10px; font-family: 'JetBrains Mono', monospace;
            font-size: 9px; color: var(--text-dim); letter-spacing: 1px;
            overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
        }
        .podcast-slot .slot-lang { font-size: 7px; color: var(--accent); letter-spacing: 2px; margin-bottom: 3px; }
        .podcast-slot .slot-text { color: #fff; font-size: 10px; }

        #top-bar { position: fixed; top: 0; left: 0; right: 0; height: 45px; background: var(--panel); border-bottom: 2px solid rgba(255,255,255,0.08); box-shadow: 0 2px 8px rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: space-between; padding: 0 15px; z-index: 5000; border-radius: 0; overflow: hidden; }
        #brand { display: flex; align-items: center; min-width: 0; flex-shrink: 1; overflow: hidden; }
        #status-bar { display: flex; align-items: center; gap: 15px; flex-shrink: 0; }
        .stat { display: flex; align-items: center; gap: 5px; font-size: 10px; }
        .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--g); box-shadow: 0 0 6px var(--g); }
        .dot.live { background: var(--r); box-shadow: 0 0 8px var(--r); animation: dot-pulse 0.5s infinite; }
        @keyframes dot-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
        #clock { font-family: 'Orbitron', sans-serif; font-size: 16px; color: var(--accent); letter-spacing: 2px; }
        #tally { display: none; padding: 4px 12px; background: var(--r); color: #fff; font-size: 10px; font-weight: bold; letter-spacing: 2px; animation: tally-blink 1s infinite; }
@keyframes tally-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }
        /* NEW RECORDING INDICATOR IN HEADER */
        #rec-status { display: none; padding: 4px 12px; background: var(--r); color: #fff; font-size: 10px; font-weight: bold; letter-spacing: 2px; animation: rec-header-blink 1s infinite; border-radius: 2px; }
        @keyframes rec-header-blink { 0%,100% { opacity: 1; box-shadow: 0 0 10px var(--r); } 50% { opacity: 0.3; box-shadow: none; } }

        .badge { display: flex; align-items: center; gap: 5px; padding: 3px 8px; border: 1px solid; font-size: 9px; transition: all 0.2s; white-space: nowrap; }
        .badge:hover { box-shadow: 0 0 10px currentColor; }
        @keyframes snap-flash-anim { 0%,100% { opacity:1; box-shadow:0 0 10px rgba(0,255,136,0.6); } 50% { opacity:0.35; box-shadow:none; } }
        #btn-snapshot.snap-flash { animation: snap-flash-anim 0.55s ease; }
        #fps-badge { border-color: var(--g); color: var(--g); background: rgba(0,255,136,0.05); }
        #cycle-badge { border-color: var(--y); color: var(--y); background: rgba(255,204,0,0.05); display: none; }
        #cycle-badge.on { display: flex; }

        /* Sidebar: neutral borders — no theme color bleed, party mode animates border-color via console-breathe */
        .sidebar { position: fixed; top: 45px; bottom: 55px; width: 200px; max-width: 320px !important; background: var(--core-bg); backdrop-filter: blur(var(--core-blur)) saturate(120%); -webkit-backdrop-filter: blur(var(--core-blur)) saturate(120%); border: 1px solid rgba(255,255,255,0.06); border-top: var(--rim-top); box-shadow: inset 0 0 20px rgba(0,0,0,0.65); overflow-y: auto; overflow-x: hidden; z-index: 4000; scrollbar-width: none; transition: var(--hud-transition), transform 0.52s cubic-bezier(0.34,1.56,0.64,1); will-change: transform, background; }
        /* ═══ TRIPLE-ALPHA KINEMATIC STATES ═══
           Per-element background overrides (same pattern as Tracker ghost mode).
           Container opacity is NEVER touched — all text/buttons stay at 100% visible.
           Only background rgba + backdrop-filter change per state.                   */

        /* ── GLASS: frosted mid-opacity — video bleeds through, classic glassmorphism ── */
        .sidebar.hud-glass {
            background: rgba(6,6,10,0.20) !important;
            backdrop-filter: blur(22px) saturate(180%) brightness(1.08) !important;
            -webkit-backdrop-filter: blur(22px) saturate(180%) brightness(1.08) !important;
            border-color: rgba(0,243,255,0.28) !important;
            border-top: var(--rim-top) !important; border-left: var(--rim-left) !important;
            box-shadow: 0 0 32px rgba(0,243,255,0.12), inset 0 1px 0 rgba(255,255,255,0.10) !important;
            transform: perspective(1000px) translateZ(4px);
        }
        .sidebar.hud-glass .sec-head   { background: rgba(0,0,0,0.38) !important; border-left-color: rgba(0,243,255,0.30) !important; }
        .sidebar.hud-glass .sec-body   { background: rgba(0,0,0,0.10) !important; }
        .sidebar.hud-glass .section    { border-top-color: rgba(0,0,0,0.55) !important; border-bottom-color: rgba(255,255,255,0.07) !important; }
        .sidebar.hud-glass .btn        { background: rgba(18,18,28,0.58) !important; }
        .sidebar.hud-glass .btn:hover  { background: rgba(26,26,40,0.80) !important; }
        /* sub-panels that carry their own bg */
        .sidebar.hud-glass #sfx-sampler-wrap { background: rgba(6,6,10,0.30) !important; }

        /* ── GHOST: almost invisible lens — maximum stage visibility ── */
        .sidebar.hud-ghost {
            background: rgba(6,6,10,0.05) !important;
            backdrop-filter: blur(14px) saturate(220%) brightness(1.12) !important;
            -webkit-backdrop-filter: blur(14px) saturate(220%) brightness(1.12) !important;
            border-color: rgba(0,243,255,0.10) !important;
            border-top: var(--rim-top) !important; border-left: var(--rim-left) !important;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04) !important;
            transform: none;
        }
        .sidebar.hud-ghost .sec-head   { background: rgba(0,0,0,0.28) !important; border-left-color: rgba(0,243,255,0.15) !important; }
        .sidebar.hud-ghost .sec-body   { background: rgba(0,0,0,0.05) !important; }
        .sidebar.hud-ghost .section    { border-top-color: rgba(0,0,0,0.45) !important; border-bottom-color: rgba(255,255,255,0.05) !important; }
        .sidebar.hud-ghost .btn        { background: rgba(10,10,18,0.45) !important; }
        .sidebar.hud-ghost .btn:hover  { background: rgba(20,20,32,0.72) !important; }
        .sidebar.hud-ghost #sfx-sampler-wrap { background: rgba(6,6,10,0.12) !important; }
        /* keep text sharp with subtle backing shadow in ghost mode */
        .sidebar.hud-ghost .btn, .sidebar.hud-ghost .sec-title,
        .sidebar.hud-ghost label, .sidebar.hud-ghost .info-val { text-shadow: 0 1px 5px rgba(0,0,0,0.95); }
        /* HUD STATE PILL — sticky mini-toggle at top of each sidebar */
        .hud-state-pill {
            position: sticky; top: 0; z-index: 100;
            display: flex; align-items: center; gap: 5px;
            padding: 4px 10px 4px 8px;
            background: rgba(0,0,0,0.55);
            border-bottom: 1px solid rgba(255,255,255,0.05);
            cursor: pointer; user-select: none;
            backdrop-filter: blur(6px);
            transition: background 0.2s;
        }
        .hud-state-pill:hover { background: rgba(0,243,255,0.06); border-bottom-color: rgba(0,243,255,0.15); }
        .hud-pill-dot {
            width: 5px; height: 5px; border-radius: 50%;
            background: rgba(0,243,255,0.9);
            box-shadow: 0 0 5px rgba(0,243,255,0.9);
            flex-shrink: 0; transition: background 0.4s, box-shadow 0.4s;
        }
        .hud-pill-label {
            font-family: 'Orbitron', sans-serif; font-size: 6px;
            letter-spacing: 2px; color: var(--accent);
            opacity: 0.7; transition: opacity 0.3s;
            flex: 1;
        }
        .hud-state-pill:hover .hud-pill-label { opacity: 1; }
        .hud-pill-arrow {
            font-size: 8px; color: rgba(0,243,255,0.35);
            transition: color 0.2s, transform 0.2s;
        }
        .hud-state-pill:hover .hud-pill-arrow { color: rgba(0,243,255,0.8); transform: translateX(1px); }
        /* Lock sidebars: no horizontal pan, no content drag */
        .sidebar, .sidebar * { overscroll-behavior-x: none; -webkit-user-drag: none; user-drag: none; }
        #left-panel { left: 0; border-left: var(--rim-left); border-right: 1px solid rgba(255,255,255,0.07); transform: translateX(0); }
        #right-panel { right: 0; border-right: var(--rim-top); border-left: 1px solid rgba(255,255,255,0.07); transform: translateX(0); }

        /* SYSTEM SLIDE — panels out, stage expands — spring feel */
        #left-panel  { transition: transform 0.52s cubic-bezier(0.34,1.56,0.64,1), opacity 0.35s ease, background 0.5s cubic-bezier(0.19,1,0.22,1), box-shadow 0.5s cubic-bezier(0.19,1,0.22,1), border-color 0.5s cubic-bezier(0.19,1,0.22,1); }
        #right-panel { transition: transform 0.52s cubic-bezier(0.34,1.56,0.64,1), opacity 0.35s ease, background 0.5s cubic-bezier(0.19,1,0.22,1), box-shadow 0.5s cubic-bezier(0.19,1,0.22,1), border-color 0.5s cubic-bezier(0.19,1,0.22,1); }
        body.system-slide #left-panel  { transform: translateX(-102%); opacity: 0; pointer-events: none; }
        body.system-slide #right-panel { transform: translateX(102%);  opacity: 0; pointer-events: none; }
        #stage { transition: left 0.48s cubic-bezier(0.34,1.2,0.64,1), right 0.48s cubic-bezier(0.34,1.2,0.64,1); }
        body.system-slide #stage { left: 0; right: 0; }
        /* Slide glow: canvas border pulses on expand */
        body.system-slide #stage { box-shadow: inset 0 0 0 1px rgba(0,243,255,0.12), 0 0 40px rgba(0,243,255,0.04); }
        /* ── SECTION CARDS — sampler-rim treatment applied to all panels ── */
        .section {
            position: relative;
            margin: 6px 6px 0;
            background: linear-gradient(180deg, rgba(10,10,16,0.96) 0%, rgba(6,6,10,0.96) 100%);
            border: 1px solid rgba(255,255,255,0.07);
            border-top: 3px solid rgba(0,243,255,0.18);
            border-radius: 4px;
            box-shadow: 0 4px 18px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.05);
            overflow: hidden;
            transition: var(--hud-transition);
        }
        .section:last-child { margin-bottom: 6px; }
        .section:first-child { margin-top: 4px; border-top: 3px solid rgba(0,243,255,0.18); }
        /* Themed top accent uses --accent so colour themes work */
        .sec-head {
            border-left: 3px solid rgba(0,243,255,0.22);
        }

        /* ═══════════════════════════════════════════════════
           SECTION HELP OVERLAY — integrated HUD "How to Use"
           ═══════════════════════════════════════════════════ */
        @keyframes sho-fadein { from { opacity: 0; } to { opacity: 1; } }
        .section-help-overlay {
            position: absolute;
            top: 0; left: 0; right: 0;          /* no bottom:0 — grow freely downward */
            min-height: max(100%, 240px);        /* cover full section OR at least 240px */
            z-index: 200;
            background: rgba(2,4,10,0.97);
            border: 1px solid rgba(0,243,255,0.25);
            border-radius: 6px;
            flex-direction: column;
            padding: 12px;
            box-shadow: 0 0 24px rgba(0,243,255,0.12), inset 0 0 40px rgba(0,0,0,0.8);
            display: none;
        }
        .section-help-overlay.visible {
            display: flex;
            animation: sho-fadein 0.2s ease forwards;
        }
        .sho-header {
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 10px; padding-bottom: 7px;
            border-bottom: 1px solid rgba(0,243,255,0.12);
        }
        .sho-header > span {
            font-family: 'Orbitron', sans-serif; font-size: 8px; font-weight: 700;
            letter-spacing: 2.5px; color: var(--accent); text-transform: uppercase;
        }
        .sho-close {
            background: transparent; border: none; color: rgba(0,243,255,0.45);
            font-size: 10px; cursor: pointer; line-height: 1; padding: 1px 3px;
            transition: color 0.15s;
        }
        .sho-close:hover { color: var(--accent); }
        .sho-rows { display: flex; flex-direction: column; gap: 7px; flex: 1; overflow-y: auto; scrollbar-width: none; }
        .sho-row { display: flex; gap: 8px; align-items: flex-start; }
        .sho-key {
            font-family: 'Orbitron', sans-serif; font-size: 6px; font-weight: 700;
            letter-spacing: 1px; color: var(--accent); opacity: 0.75;
            border: 1px solid rgba(0,243,255,0.2);
            padding: 2px 5px; border-radius: 3px;
            flex-shrink: 0; white-space: nowrap; line-height: 1.4;
        }
        .sho-desc {
            font-size: 7px; color: rgba(255,255,255,0.55); line-height: 1.5;
            letter-spacing: 0.02em;
        }
        .sho-footer {
            margin-top: 10px; padding-top: 7px;
            border-top: 1px solid rgba(255,255,255,0.05);
            font-size: 6px; color: rgba(255,255,255,0.45);
            letter-spacing: 1.5px; font-family: 'Orbitron', sans-serif;
            text-align: center;
        }
        /* Intra-section divider utility */
        .sec-divider {
            height: 1px;
            background: rgba(255,255,255,0.06);
            margin: 10px -12px;
        }
        /* SCANNING ANIMATION FOR CYCLE MODE */
        .sec-head {
            display: flex; align-items: center; justify-content: space-between;
            padding: 7px 12px 7px 10px;
            background: rgba(255,255,255,0.025);
            border-bottom: 1px solid rgba(255,255,255,0.07);
            border-left: 2px solid rgba(255,255,255,0.06);
            border-radius: 0;
            position: relative; overflow: hidden;
        }
        .sec-head:hover { background: rgba(255,255,255,0.04); border-left-color: var(--accent); }
        .sec-head.scanning::after {
            content: ''; position: absolute; bottom: 0; left: -100%; width: 50%; height: 2px; background: var(--y);
            box-shadow: 0 0 10px var(--y); animation: scan-line 2s linear infinite;
        }
        @keyframes scan-line { 0% { left: -50%; } 100% { left: 150%; } }

        .sec-title { font-family: 'Orbitron', sans-serif; font-size: 9px; font-weight: 600; letter-spacing: 2px; color: var(--accent); }
        .sec-dot { width: 5px; height: 5px; background: var(--g); border-radius: 50%; box-shadow: 0 0 4px var(--g); }
        .sec-dot.off { background: var(--text-dim); box-shadow: none; }
        .sec-dot.gold { background: var(--y); box-shadow: 0 0 6px var(--y); }
        @keyframes pulse-rec {
            0%,100% { box-shadow: 0 0 4px var(--o); opacity: 1; }
            50%      { box-shadow: 0 0 10px var(--o), 0 0 20px rgba(255,157,0,0.4); opacity: 0.7; }
        }
        .sec-body { padding: 6px 8px; }
        .sec-body > :last-child { margin-bottom: 0; }
        .sec-head.collapsible { cursor: pointer; }
        /* Arrow hugs title; dot is pushed to far right */
        .sec-arrow { font-size: 8px; color: var(--text-dim); margin-left: 5px; margin-right: auto; transition: color 0.2s; }
        .sec-head.collapsible.open .sec-arrow { color: var(--accent); }
        /* Collapsible bodies: collapsed by default; JS restores padding on open */
        #session-lab-body, #p2p-call-body, #midi-host-body, #nft-vault-body, #lexica-nano-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding: 0 12px; }

        /* ═══ P2P HUD — SOLID TERMINAL SKIN ════════════════════════════════ */
        #p2p-modal {
            font-family: 'JetBrains Mono', 'Courier New', monospace !important;
            background: rgba(10, 10, 10, 0.98) !important;
            border: 1px solid #00f3ff !important;
            color: #00f3ff !important;
            box-shadow: 0 0 15px rgba(0, 243, 255, 0.2), 0 4px 24px rgba(0,0,0,0.85) !important;
        }
        /* Incoming call — whole panel border pulses yellow */
        #p2p-modal.incoming {
            border-color: #ffcc00 !important;
            animation: incoming-border-pulse 0.7s ease-in-out infinite;
        }
        @keyframes incoming-border-pulse {
            0%,100% { box-shadow: 0 0 12px rgba(255,204,0,0.3), 0 4px 24px rgba(0,0,0,0.85); }
            50%      { box-shadow: 0 0 28px rgba(255,204,0,0.65), 0 4px 24px rgba(0,0,0,0.85); }
        }
        #p2p-titlebar {
            background: rgba(0, 12, 18, 0.99) !important;
            border: 1px solid #00f3ff !important;
            border-bottom: 1px solid rgba(0,243,255,0.25) !important;
            border-radius: 0 !important;
            padding: 6px 10px !important;
            letter-spacing: 1.5px;
        }
        #p2p-modal.incoming #p2p-titlebar { border-color: #ffcc00 !important; }
        #p2p-body {
            background: rgba(10, 10, 10, 0.98) !important;
            border: 1px solid #00f3ff !important;
            border-top: none !important;
            border-radius: 0 !important;
        }
        #p2p-modal.incoming #p2p-body { border-color: #ffcc00 !important; border-top: none !important; }
        /* Terminal-style flat rectangular buttons inside the HUD */
        #p2p-body .btn {
            font-family: 'JetBrains Mono', 'Courier New', monospace !important;
            letter-spacing: 1.5px !important;
            text-transform: uppercase !important;
            border-radius: 0 !important;
            border-width: 1px !important;
            background: transparent !important;
            /* Override the global display:block;width:100% so flex rows work */
            display: inline-block !important;
            width: auto !important;
            margin-bottom: 0 !important;
            padding: 5px 8px !important;
            transition: color 0.12s, border-color 0.12s, box-shadow 0.12s !important;
        }
        #p2p-body .btn:hover { box-shadow: 0 0 7px currentColor !important; background: rgba(0,243,255,0.06) !important; }
        /* Monospaced inputs */
        #p2p-body .inp {
            font-family: 'JetBrains Mono', 'Courier New', monospace !important;
            border-radius: 0 !important;
            background: rgba(0, 18, 24, 0.85) !important;
            border: 1px solid rgba(0,243,255,0.28) !important;
            color: #00f3ff !important;
        }
        /* Labels */
        #p2p-body .lbl {
            font-family: 'JetBrains Mono', 'Courier New', monospace !important;
            letter-spacing: 1.5px !important;
            color: rgba(0,243,255,0.5) !important;
        }
        /* Active call — CALL button turns green */
        #btn-call-guest.call-active {
            color: var(--g) !important;
            border-color: var(--g) !important;
            box-shadow: 0 0 8px rgba(0,255,136,0.45) !important;
        }
        /* Incoming — ACCEPT button pulses yellow */
        #btn-call-guest.accepting {
            color: #ffcc00 !important;
            border-color: #ffcc00 !important;
            animation: accept-pulse 0.6s ease-in-out infinite;
        }
        /* Contacts overlay */
        #p2p-contacts-overlay {
            display: none;
            position: absolute;
            top: calc(100% + 2px);
            left: 0; right: 0;
            background: rgba(5, 5, 5, 0.99);
            border: 1px solid rgba(0,243,255,0.4);
            z-index: 20;
            padding: 4px;
        }
        #p2p-contacts-overlay .contact-item {
            font-family: 'JetBrains Mono', monospace;
            font-size: 8px;
            color: #00f3ff;
            letter-spacing: 1px;
            padding: 5px 6px;
            cursor: pointer;
            border: 1px solid transparent;
            text-transform: uppercase;
        }
        #p2p-contacts-overlay .contact-item:hover {
            border-color: rgba(0,243,255,0.35);
            background: rgba(0,243,255,0.07);
        }
        #p2p-contacts-overlay .contacts-empty {
            font-family: 'JetBrains Mono', monospace;
            font-size: 8px;
            color: rgba(0,243,255,0.35);
            letter-spacing: 1px;
            padding: 5px 6px;
        }
        /* ════════════════════════════════════════════════════════════════════ */
        /* GIF-HOST: near-invisible container that keeps GIF decoding alive.
           RULES FOR ANIMATED GIF SURVIVAL IN CHROMIUM:
           1. opacity > 0 (NOT 0) — Chrome stops GIF frame advance at opacity:0
           2. display: block (NOT none) — display:none kills the GIF decoder entirely
           3. NO filter: drop-shadow/blur — forces rasterization, freezes frame
           4. NO crossOrigin on blob: URLs — tainted canvas + frame freeze
           5. NO clip-path — Chrome halts GIF animation on clipped elements
           6. overflow:visible — lets img render at natural size for drawImage
           7. will-change:auto on img — avoid GPU layer promotion that can freeze frames */
        #gif-host { position: fixed; top: 0; left: 0; width: 1px; height: 1px; overflow: visible; opacity: 0.01; pointer-events: none; z-index: 0; }
        #gif-host img { position: absolute; display: block !important; width: auto !important; height: auto !important; max-width: none; pointer-events: none; }
        
        /* VNGRD BUTTONS - DIGITAL SNAP */
        .btn {
            display: block; width: 100%; padding: 8px 10px; margin-bottom: 6px;
            position: relative;
            background: linear-gradient(180deg, #121218 0%, #090910 100%);
            border-radius: 0;
            border-top: 1px solid rgba(255,255,255,0.09);
            border-left: 1px solid var(--border);
            border-right: 1px solid rgba(0,0,0,0.35);
            border-bottom: 1px solid rgba(0,0,0,0.55);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 2px 3px rgba(0,0,0,0.45);
            color: var(--text); font-family: 'Share Tech Mono', 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1.2px; text-align: left;
            text-transform: uppercase; position: relative;
            transition: all 0.15s ease;
        }
        .btn:hover {
            background: linear-gradient(180deg, #1a1a26 0%, #111118 100%);
            color: #ffffff; border-color: var(--accent);
            box-shadow: var(--theme-glow), 0 0 0 1px var(--theme-border), inset 0 1px 0 rgba(255,255,255,0.06), 0 3px 8px rgba(0,0,0,0.6), 0 0 28px rgba(0,243,255,0.18);
            text-shadow: 0 0 8px var(--accent);
            transform: translateY(-1px);
        }
        .btn:active {
            /* pressed in: top highlight inverts, drop-shadow collapses; CORE glow bleeds */
            background: linear-gradient(180deg, #070709 0%, #0d0d12 100%);
            border-top-color: rgba(0,0,0,0.5); border-bottom-color: rgba(255,255,255,0.05);
            box-shadow: inset 0 2px 6px rgba(0,0,0,0.75), 0 0 40px rgba(0,243,255,0.25), inset 0 0 12px rgba(0,243,255,0.10);
            color: #ffffff;
            transform: translateY(1px);
        }
        .btn.on { border-color: var(--accent); color: var(--accent); box-shadow: var(--theme-glow), 0 0 22px rgba(0,243,255,0.20); }
        .btn.active-mode {
            background: var(--accent-dim) !important;
            border-color: var(--accent) !important;
            color: #ffffff !important;
            box-shadow: var(--theme-glow), inset 0 0 15px var(--accent-dim), 0 0 32px rgba(0,243,255,0.25);
            text-shadow: 0 0 8px var(--accent);
            font-weight: bold;
        }

        /* CYCLE TOGGLE GOLD STATE */
        .btn.cycle-active {
            border-color: var(--y) !important; color: var(--y) !important;
            box-shadow: 0 0 10px rgba(255,204,0,0.2);
            animation: cycle-pulse 2s infinite;
        }
        @keyframes cycle-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.7; } }
        
        #btn-ui-react { animation: party-breathe 2s ease-in-out infinite; }
        #btn-ui-react.on { animation: none; color: #ff00ff; text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff; border-color: #ff00ff; background: rgba(255,0,255,0.1); }
        @keyframes party-breathe { 0%, 100% { color: var(--text); } 50% { color: #ff00ff; text-shadow: 0 0 8px #ff00ff; } }
        
        #btn-rumble { animation: seismic-breathe 2.5s ease-in-out infinite; }
        #btn-rumble.on { animation: none; color: #ff6600; text-shadow: 0 0 10px #ff6600, 0 0 20px #ff3300; border-color: #ff6600; background: rgba(255,102,0,0.1); }
        @keyframes seismic-breathe { 0%, 100% { color: var(--text); } 50% { color: #ff6600; text-shadow: 0 0 6px #ff6600; } }

        #btn-psychosis { border-color: #ff00ff; color: #ff00ff; text-align: center; font-weight: bold; letter-spacing: 1px; }
        #btn-psychosis:hover { background: #ff00ff; color: #000; box-shadow: 0 0 20px #ff00ff; }
        #btn-vr { color: var(--v); border-color: var(--v); }
        #btn-vr.on { color: var(--accent); border-color: var(--accent); box-shadow: var(--theme-glow); }
        #btn-mic-engine { color: var(--text-dim); }
        #btn-mic-engine.on { color: var(--g); border-color: var(--g); box-shadow: 0 0 8px rgba(0,255,136,0.3); }
        
        .btn.panic { background: #000; border-color: #ff0000; color: #ff0000; text-shadow: 0 0 5px #ff0000; font-weight: bold; text-align: center; }
        .btn.panic:hover { background: #ff0000; color: #000; box-shadow: 0 0 20px #ff0000; }
        .btn.warn { border-color: #ff9900; color: #ff9900; text-align: center; }
        .btn.warn:hover { background: #ff9900; color: #000; }
        .btn.eject { border-color: var(--text-dim); color: var(--text); text-align: center; }
        .btn.eject:hover { border-color: #fff; color: #fff; }
        
        .btn.impact { background: linear-gradient(180deg, #1a1000 0%, #0f0800 100%); border-color: var(--o); color: var(--o); }
        .btn.donate { background: linear-gradient(180deg, #0a1a0a 0%, #051005 100%); border-color: var(--g); color: var(--g); }
        .btn.donate:hover { background: var(--g); color: #000; box-shadow: 0 0 20px var(--g); }
        
        .btn-row { display: flex; gap: 6px; }
        .btn-row .btn { flex: 1; text-align: center; }
        .btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
        .btn-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; }
        .btn-grid-3 .btn { text-align: center; font-size: 9px; padding: 6px 4px; }
        .btn-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
        .btn-grid-2 .btn { text-align: center; font-size: 9px; padding: 6px 4px; }

        .audio-ctrl-row { display: flex; gap: 4px; margin-bottom: 6px; }
        .btn-compact { flex: 1; text-align: center; padding: 8px 0; }
        .btn-compact svg { display: block; margin: 0 auto; pointer-events: none; width: 10px; height: 10px; }
        
        .inp { width: 100%; padding: 7px 10px; margin-bottom: 6px; background: #040406; border: 1px solid var(--border); color: var(--text-bright); font-family: 'JetBrains Mono', monospace; font-size: 10px; }
        .inp:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 8px var(--accent-dim); }
        .lbl { font-size: 9px; color: var(--text-dim); letter-spacing: 1px; margin-bottom: 4px; text-transform: uppercase; }
        .slider-wrap { margin-bottom: 10px; }
        .slider-top { display: flex; justify-content: space-between; margin-bottom: 4px; }
        .slider-lbl { font-size: 9px; color: var(--text-dim); }
        .slider-val { font-size: 10px; color: var(--accent); font-family: 'Orbitron', sans-serif; }
        input[type="range"] { -webkit-appearance: none; width: 100%; height: 4px; background: var(--border); border-radius: 2px; }
        input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; background: var(--accent); border-radius: 2px; box-shadow: 0 0 8px var(--accent-dim); }

        /* Camera preview removed - using full stage instead */

        #audio-box { background: #000; border: 1px solid var(--border); padding: 8px; margin-bottom: 8px; border-radius: 3px; }
        #vu { display: flex; gap: 2px; height: 30px; align-items: flex-end; }
        .vu-bar { flex: 1; background: linear-gradient(to top, var(--g) 0%, var(--y) 60%, var(--r) 90%); min-height: 2px; border-radius: 1px; transition: height 0.05s; }
        #track-info { font-family: 'Orbitron', sans-serif; font-size: 9px; color: var(--y); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        /* ══════════════════════════════════════════════════════════════════ */
        /* ── 8-PAD HYBRID SAMPLER — MPC/MASCHINE STYLE ──────────────────── */
        /* ══════════════════════════════════════════════════════════════════ */
        #sfx-sampler-wrap {
            margin-top: 10px;
            background: linear-gradient(180deg, #0a0a0f 0%, #060608 100%);
            border: 1px solid rgba(255,255,255,0.08);
            border-top: 2px solid rgba(0,243,255,0.18);
            border-radius: 6px;
            padding: 10px 10px 12px;
            box-shadow: 0 4px 24px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.04);
            position: relative;
        }
        #sfx-sampler-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
            padding-bottom: 6px;
            border-bottom: 1px solid rgba(255,255,255,0.06);
            user-select: none;
        }
        #sfx-sampler-header:hover .sampler-collapse-arrow { color: var(--accent) !important; }
        #sfx-pad-body { overflow: hidden; transition: max-height 0.3s ease; max-height: 900px; }
        #sfx-pad-body.collapsed { max-height: 0; margin-bottom: 0; }
        /* Allow gear dropdown to escape the overflow:hidden clip when open */
        #sfx-pad-body.gear-open { overflow: visible; }
        #sfx-sampler-header .sampler-title {
            font-family: 'Orbitron', sans-serif;
            font-size: 8px;
            font-weight: 700;
            letter-spacing: 3px;
            color: var(--accent);
            text-transform: uppercase;
        }
        #sfx-sampler-header .sampler-badge {
            font-size: 6px;
            letter-spacing: 2px;
            color: rgba(255,255,255,0.25);
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.08);
            padding: 2px 5px;
        }
        #sfx-pad-grid { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 4px; row-gap: 5px; padding: 2px 2px 2px; }
        .sfx-bank-block { display: contents; }
        .sfx-bank-label {
            grid-column: 1 / -1;
            font-size: 6px;
            letter-spacing: 2.5px;
            font-family: 'Orbitron', sans-serif;
            color: rgba(255,255,255,0.2);
            text-transform: uppercase;
            padding: 2px 0 1px;
            border-top: 1px solid rgba(255,255,255,0.05);
        }
        .sfx-bank-label:first-child { border-top: none; padding-top: 0; }
        .sfx-bank-label em { font-style: normal; opacity: 0.6; }

        /* ── CORE PAD SHAPE — thick rubber, 3D recessed ── */
        .sfx-pad {
            font-size: 7px !important;
            padding: 0 !important;
            height: 34px;
            letter-spacing: 0.04em;
            text-align: center;
            min-width: 0;
            cursor: pointer;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 1px;
            position: relative;
            overflow: visible;
            border-radius: 3px;
            /* Heavy rubber inactive state */
            background: linear-gradient(145deg, #111118 0%, #0c0c12 50%, #0f0f16 100%) !important;
            border: 2px solid #1c1c28 !important;
            /* 3D recessed look: outer shadow + deep inner recession */
            box-shadow:
                2px 3px 8px rgba(0,0,0,0.95),
                0 1px 0 rgba(255,255,255,0.04),
                inset 0 3px 12px rgba(0,0,0,0.85),
                inset 0 1px 3px rgba(0,0,0,0.9),
                inset 0 -2px 6px rgba(255,255,255,0.025) !important;
            transition: transform 0.06s ease, box-shadow 0.1s ease, border-color 0.15s ease;
            color: rgba(255,255,255,0.25) !important;
        }
        /* Elevate pad above siblings when its dropdown is open */
        .sfx-pad:has(.pad-gear.open),
        .sfx-pad.z-elevated { z-index: 200; position: relative; }
        .sfx-pad:hover {
            transform: translateY(-1px);
            z-index: 2;
            border-color: rgba(255,255,255,0.18) !important;
            box-shadow:
                3px 5px 14px rgba(0,0,0,0.95),
                0 1px 0 rgba(255,255,255,0.06),
                inset 0 3px 12px rgba(0,0,0,0.75),
                inset 0 -2px 6px rgba(255,255,255,0.03) !important;
        }
        .sfx-pad:active {
            transform: scale(0.97) translateY(1px);
        }

        /* Pad index chip — top-left corner */
        .sfx-pad::before {
            content: attr(data-pad-num);
            position: absolute;
            top: 5px;
            left: 7px;
            font-size: 5.5px;
            font-family: 'Orbitron', sans-serif;
            opacity: 0.22;
            letter-spacing: 0;
            line-height: 1;
            pointer-events: none;
        }

        /* ── PAD CONTENT LAYOUT ── */
        .sfx-pad .pad-id   { display: none; }
        .sfx-pad .pad-name {
            font-size: 7px; font-weight: 900; letter-spacing: 0.02em; line-height: 1;
            font-family: 'Orbitron', sans-serif;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            max-width: 100%; padding: 0 8px; box-sizing: border-box;
        }
        /* Hover: slide the name left to reveal full text */
        @keyframes pad-name-slide {
            0%, 20%   { transform: translateX(0); }
            80%, 100% { transform: translateX(-28px); }
        }
        .sfx-pad:hover:not(.z-elevated) .pad-name {
            animation: pad-name-slide 3s ease-in-out 0.5s infinite alternate;
        }
        .sfx-pad .pad-hint  { font-size: 5.5px; opacity: 0.45; letter-spacing: 0.02em; line-height: 1; display: none; }
        .sfx-pad .pad-sub   { font-size: 5px; opacity: 0.28; letter-spacing: 0.03em; line-height: 1.2; font-style: italic; display: none; }
        .sfx-pad .pad-timer { font-size: 14px; font-weight: 900; letter-spacing: 0; line-height: 1; font-family: 'Orbitron', sans-serif; display: none; }
        /* LCD filename strip at the bottom */
        @keyframes lcd-pan {
            0%, 20%   { left: 5px; }
            80%, 100% { left: -65px; }
        }
        .sfx-pad .pad-lcd {
            position: absolute;
            bottom: 4px;
            left: 5px; right: 5px;
            font-size: 5px;
            font-family: 'JetBrains Mono', monospace;
            letter-spacing: 0.05em;
            opacity: 0.28;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding: 0;
            line-height: 1;
            pointer-events: none;
            transition: opacity 0.2s;
        }
        /* Hover: pan filename within clipped strip */
        .sfx-pad:hover:not(.z-elevated) .pad-lcd {
            opacity: 0.65;
            animation: lcd-pan 4s ease-in-out 0.3s infinite alternate;
        }

        /* ── GEAR DROPDOWN ── */
        .pad-gear {
            position: absolute;
            top: 0;
            right: 0;
            padding: 3px 4px;
            z-index: 10;
            /* Ensure clicks land on the dot even at 7px font size */
            cursor: pointer;
        }
        /* Discoverable pulse — subtle cyan breathe, draws the eye */
        @keyframes gear-discover-pulse {
            /* dims for 40% of the cycle, then lights up with a clear cyan glow */
            0%, 40%, 100% { opacity: 0.18; filter: drop-shadow(0 0 0px transparent); }
            55%, 70%      { opacity: 0.75; filter: drop-shadow(0 0 5px rgba(0,243,255,0.75)); }
        }
        .pad-gear-icon {
            display: block;
            font-size: 8px;
            opacity: 0.18;
            cursor: pointer;
            line-height: 1;
            padding: 3px 4px;
            transition: opacity 0.12s, color 0.12s, text-shadow 0.12s;
            user-select: none;
            animation: gear-discover-pulse 3.5s ease-in-out infinite;
        }
        .pad-gear:hover .pad-gear-icon,
        .pad-gear.open .pad-gear-icon {
            opacity: 1 !important;
            animation: none;
            color: var(--accent);
            text-shadow: 0 0 8px rgba(0,243,255,0.9), 0 0 18px rgba(0,243,255,0.4);
        }
        /* Coupled: gear icon stays lit in its FX color — "Armed" indicator */
        .sfx-pad.coupled-nvg .pad-gear-icon                                  { opacity: 0.85 !important; animation: none; color: #00ff41; text-shadow: 0 0 6px rgba(0,255,65,0.85); }
        .sfx-pad.coupled-shoot .pad-gear-icon,
        .sfx-pad.coupled-reset .pad-gear-icon                                { opacity: 0.85 !important; animation: none; color: #ff2233; text-shadow: 0 0 6px rgba(255,34,51,0.85); }
        .sfx-pad.coupled-void .pad-gear-icon,
        .sfx-pad.coupled-failure .pad-gear-icon,
        .sfx-pad.coupled-lucy .pad-gear-icon                                 { opacity: 0.85 !important; animation: none; color: #cc00ff; text-shadow: 0 0 6px rgba(204,0,255,0.85); }
        .sfx-pad.coupled-seismic .pad-gear-icon,
        .sfx-pad.coupled-punch .pad-gear-icon                                { opacity: 0.85 !important; animation: none; color: #ff6600; text-shadow: 0 0 6px rgba(255,102,0,0.85); }
        .sfx-pad.coupled-party .pad-gear-icon                                { opacity: 0.85 !important; animation: none; color: #ff00ff; text-shadow: 0 0 6px rgba(255,0,255,0.85); }
        /* Hover on armed pad: snap to max brightness */
        .sfx-pad.coupled .pad-gear:hover .pad-gear-icon,
        .sfx-pad.coupled .pad-gear.open .pad-gear-icon { opacity: 1 !important; filter: brightness(1.4); }
        /* ── GEAR MENU — positioned above the gear icon, clamped within sidebar ── */
        .pad-gear-menu {
            display: none;
            position: fixed; /* JS sets top/left via getBoundingClientRect — never clipped */
            background: #0c0c14;
            border: 1px solid rgba(0,243,255,0.25);
            border-radius: 4px;
            box-shadow: 0 4px 24px rgba(0,0,0,0.95), 0 0 0 1px rgba(0,243,255,0.08);
            min-width: 110px;
            z-index: 99999;
            overflow-y: auto;
        }
        .pad-gear.open .pad-gear-menu { display: block; }
        .pad-gear-menu [data-fx] {
            display: block;
            font-size: 7px;
            font-family: 'Orbitron', sans-serif;
            letter-spacing: 0.1em;
            padding: 4px 8px;
            cursor: pointer;
            color: rgba(255,255,255,0.45);
            transition: background 0.1s, color 0.1s;
            white-space: nowrap;
        }
        .pad-gear-menu [data-fx]:hover { background: rgba(0,243,255,0.1); color: #fff; }
        .pad-gear-menu [data-fx].active-fx-opt { color: var(--accent); background: rgba(0,243,255,0.07); }
        /* color tints per FX in menu */
        .pad-gear-menu [data-fx="nvg"]:hover      { color: #00ff41; background: rgba(0,255,65,0.08); }
        .pad-gear-menu [data-fx="shoot"]:hover    { color: #ff2233; background: rgba(255,34,51,0.08); }
        .pad-gear-menu [data-fx="void"]:hover,
        .pad-gear-menu [data-fx="failure"]:hover,
        .pad-gear-menu [data-fx="lucy"]:hover     { color: #cc00ff; background: rgba(204,0,255,0.08); }
        .pad-gear-menu [data-fx="seismic"]:hover,
        .pad-gear-menu [data-fx="punch"]:hover    { color: #ff6600; background: rgba(255,102,0,0.08); }
        .pad-gear-menu [data-fx="party"]:hover    { color: #ff00ff; background: rgba(255,0,255,0.08); }
        /* Bank B shader entries in gear menu */
        .pad-gear-menu .gear-bank-sep { font-size:6px; letter-spacing:1.5px; color:rgba(0,243,255,0.25); padding:5px 8px 3px; border-top:1px solid rgba(0,243,255,0.12); pointer-events:none; }
        .pad-gear-menu [data-fx^="vb-"] { color:rgba(0,243,255,0.55); }
        .pad-gear-menu [data-fx^="vb-"]:hover { color:var(--accent); background:rgba(0,243,255,0.1); }
        .pad-gear-menu [data-fx^="vb-"].active-fx-opt { color:var(--accent); background:rgba(0,243,255,0.12); text-shadow:0 0 6px rgba(0,243,255,0.6); }
        /* VB-coupled pad icon: cyan */
        .sfx-pad[class*="coupled-vb-"] .pad-gear-icon { opacity:0.85 !important; animation:none; color:var(--accent); text-shadow:0 0 6px rgba(0,243,255,0.85); }
        /* Bank switcher active state */
        #fx-bank-a-btn.bank-active { border-color:rgba(255,255,255,0.7); color:#fff; box-shadow:0 0 8px rgba(255,255,255,0.15); }
        #fx-bank-b-btn.bank-active { border-color:var(--accent); color:var(--accent); box-shadow:0 0 8px rgba(0,243,255,0.25); }

        /* ── BANK B: .vb-btn on/locked state ── */
        .vb-btn.on {
            border-color: var(--va-color, var(--accent)) !important;
            color:         var(--va-color, var(--accent)) !important;
            box-shadow: 0 0 10px var(--va-color, var(--accent)),
                        inset 0 0 8px rgba(0,0,0,0.6) !important;
            background: rgba(0,0,0,0.6) !important;
        }
        .vb-btn.vb-locked {
            animation: vb-lock-pulse 1s ease-in-out infinite;
        }
        @keyframes vb-lock-pulse {
            0%,100% { box-shadow:0 0 10px var(--va-color,var(--accent)); }
            50%     { box-shadow:0 0 22px var(--va-color,var(--accent)), 0 0 44px var(--va-color,var(--accent)); }
        }

        /* ── BANK B: CSS-filter shader effects on the main VJ canvas ── */
        /* SLIT_SCAN — stroboscopic horizontal skew distortion */
        body.vb-SLIT_SCAN #vj-canvas {
            animation: vb-slit 0.09s steps(1,end) infinite;
        }
        @keyframes vb-slit {
            0%   { transform: scaleX(1.025) skewY(-1.8deg) translateY(3px); }
            33%  { transform: scaleX(0.975) skewY(1.2deg)  translateY(-2px); }
            66%  { transform: scaleX(1.01)  skewY(-0.6deg) translateY(1px); }
            100% { transform: scaleX(1)     skewY(0deg)    translateY(0); }
        }
        /* LUMA_BLOOM — luminance bloom / cinematic overexposure */
        body.vb-LUMA_BLOOM #vj-canvas {
            filter: brightness(1.55) contrast(0.78) saturate(1.9) blur(1.2px);
        }
        /* DITHER_LUXE — high-contrast dithered posterization */
        body.vb-DITHER_LUXE #vj-canvas {
            filter: contrast(3.2) saturate(0.35) brightness(1.05);
            image-rendering: pixelated;
        }
        /* CAUSTICS — rippling light with slow hue drift */
        body.vb-CAUSTICS #vj-canvas {
            animation: vb-caustics 2.6s ease-in-out infinite;
        }
        @keyframes vb-caustics {
            0%   { filter: hue-rotate(0deg)   brightness(1.15) contrast(1.25); }
            25%  { filter: hue-rotate(28deg)  brightness(1.45) contrast(0.88); }
            50%  { filter: hue-rotate(-18deg) brightness(1.25) contrast(1.35); }
            75%  { filter: hue-rotate(14deg)  brightness(1.50) contrast(0.82); }
            100% { filter: hue-rotate(0deg)   brightness(1.15) contrast(1.25); }
        }
        /* GHOST_ECHO + SPECTRAL_MOSH are handled by vb-canvas render loop */

        /* ── INPUT LANG SELECT — visually identical to adjacent sfx-pad sfx-sig buttons ── */
        #vngrd-input-lang {
            -webkit-appearance: none;
            appearance: none;
            height: 38px;
            background: linear-gradient(145deg, #111118 0%, #0c0c12 50%, #0f0f16 100%);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%2300f3ff' opacity='0.5'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 6px center;
            background-size: 7px 5px;
            border: 2px solid rgba(0,243,255,0.35) !important;
            border-radius: 3px;
            color: rgba(0,243,255,0.8) !important;
            font-family: 'Orbitron', sans-serif !important;
            font-size: 7px !important;
            font-weight: 600;
            letter-spacing: 0.06em;
            padding: 0 20px 0 6px !important;
            cursor: pointer;
            text-align: center;
            box-shadow:
                2px 3px 8px rgba(0,0,0,0.95),
                0 1px 0 rgba(255,255,255,0.04),
                inset 0 3px 12px rgba(0,0,0,0.7),
                inset 0 -2px 6px rgba(0,243,255,0.05),
                0 0 8px rgba(0,243,255,0.15) !important;
            text-shadow: 0 0 8px rgba(0,243,255,0.6) !important;
            transition: transform 0.06s ease, box-shadow 0.1s ease, border-color 0.15s ease;
        }
        #vngrd-input-lang:hover {
            border-color: rgba(0,243,255,0.7) !important;
            color: rgba(0,243,255,1.0) !important;
            transform: translateY(-1px);
            box-shadow:
                2px 3px 8px rgba(0,0,0,0.95),
                0 1px 0 rgba(255,255,255,0.06),
                inset 0 3px 12px rgba(0,0,0,0.6),
                inset 0 -2px 6px rgba(0,243,255,0.1),
                0 0 16px rgba(0,243,255,0.35),
                0 0 32px rgba(0,243,255,0.15) !important;
        }
        #vngrd-input-lang option {
            background: #0c0c14;
            color: rgba(0,243,255,0.9);
            font-family: 'Orbitron', sans-serif;
            font-size: 7px;
        }

        /* ── SLOT BLINK — subtle pulse to show interactivity ────────────── */
        @keyframes slot-beacon {
            0%, 75%, 100% { border-color: #1c1c28; box-shadow: 2px 3px 8px rgba(0,0,0,0.95), 0 1px 0 rgba(255,255,255,0.04), inset 0 3px 12px rgba(0,0,0,0.85), inset 0 -2px 6px rgba(255,255,255,0.025); }
            85% { border-color: rgba(0,243,255,0.45); box-shadow: 2px 3px 8px rgba(0,0,0,0.95), 0 0 8px rgba(0,243,255,0.18), inset 0 3px 12px rgba(0,0,0,0.85); }
        }
        .slot-select { animation: slot-beacon 5s ease-in-out infinite; }
        .slot-select:hover, .slot-select:focus { animation: none; }
        /* ── LANG label glow — pulses softly when slot-grid is open ─────── */
        @keyframes lbl-glow {
            0%, 60%, 100% { opacity: 0.45; text-shadow: none; }
            80% { opacity: 0.85; text-shadow: 0 0 6px rgba(0,243,255,0.55), 0 0 12px rgba(0,243,255,0.25); }
        }
        .slot-grid.open .slot-lbl { animation: lbl-glow 3.5s ease-in-out infinite; }
        .slot-grid.open .slot-row:nth-child(2) .slot-lbl { animation-delay: 0.6s; }
        .slot-grid.open .slot-row:nth-child(3) .slot-lbl { animation-delay: 1.2s; }
        .slot-grid.open .slot-row:nth-child(4) .slot-lbl { animation-delay: 1.8s; }

        /* ── VNGRD UNIFIED SELECT / DROPDOWN STYLE — matches sampler gear menu ── */
        select.inp, #ai-model-select, #bug-style-select, #bug-mode-select, #lt-style-select,
        #audio-input-select, #audio-output {
            -webkit-appearance: none;
            appearance: none;
            background: #0c0c14;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%2300f3ff' opacity='0.5'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 7px center;
            background-size: 7px 5px;
            border: 1px solid rgba(0,243,255,0.25) !important;
            border-radius: 3px !important;
            color: rgba(255,255,255,0.75) !important;
            font-family: 'Orbitron', sans-serif !important;
            font-size: 7px !important;
            letter-spacing: 0.1em !important;
            padding: 4px 22px 4px 8px !important;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.03);
            transition: border-color 0.15s, box-shadow 0.15s;
        }
        select.inp:hover, #ai-model-select:hover, #bug-style-select:hover,
        #lt-style-select:hover, #audio-input-select:hover, #audio-output:hover {
            border-color: rgba(0,243,255,0.55) !important;
            box-shadow: 0 2px 8px rgba(0,0,0,0.8), 0 0 8px rgba(0,243,255,0.2), inset 0 1px 0 rgba(255,255,255,0.04);
            color: #fff !important;
        }
        select.inp:focus, #ai-model-select:focus, #bug-style-select:focus,
        #lt-style-select:focus, #audio-input-select:focus, #audio-output:focus {
            outline: none;
            border-color: rgba(0,243,255,0.7) !important;
            box-shadow: 0 0 0 2px rgba(0,243,255,0.15), 0 2px 8px rgba(0,0,0,0.9);
        }
        select.inp option, #ai-model-select option, #bug-style-select option,
        #lt-style-select option, #audio-input-select option, #audio-output option {
            background: #0c0c14;
            color: rgba(255,255,255,0.8);
            font-family: 'Orbitron', sans-serif;
            font-size: 7px;
            letter-spacing: 0.08em;
        }

        /* ── SIG BANK base — overridden by coupling classes ── */
        .sfx-sig:not([class*="coupled-"]) {
            border-color: rgba(0,243,255,0.35) !important;
            color: rgba(0,243,255,0.8) !important;
            box-shadow:
                2px 3px 8px rgba(0,0,0,0.95),
                0 1px 0 rgba(255,255,255,0.04),
                inset 0 3px 12px rgba(0,0,0,0.7),
                inset 0 -2px 6px rgba(0,243,255,0.05),
                0 0 8px rgba(0,243,255,0.15) !important;
            text-shadow: 0 0 8px rgba(0,243,255,0.6) !important;
        }
        .sfx-sig:not([class*="coupled-"]):hover {
            border-color: rgba(0,243,255,0.7) !important;
            color: rgba(0,243,255,1.0) !important;
            box-shadow:
                2px 3px 8px rgba(0,0,0,0.95),
                0 1px 0 rgba(255,255,255,0.06),
                inset 0 3px 12px rgba(0,0,0,0.6),
                inset 0 -2px 6px rgba(0,243,255,0.1),
                0 0 16px rgba(0,243,255,0.35),
                0 0 32px rgba(0,243,255,0.15) !important;
            text-shadow: 0 0 12px rgba(0,243,255,0.9) !important;
        }

        /* ── CUSTOM BANK — amber base ── */
        .sfx-cust:not(.loaded):not(.armed):not(.recording):not([class*="coupled-"]) {
            border-color: rgba(255,140,0,0.22) !important;
            color: rgba(255,140,0,0.4) !important;
        }
        .sfx-cust.loaded:not([class*="coupled-"]) {
            border-color: rgba(255,140,0,0.6) !important;
            color: rgba(255,140,0,0.85) !important;
            box-shadow:
                2px 3px 8px rgba(0,0,0,0.95),
                0 1px 0 rgba(255,255,255,0.04),
                inset 0 3px 12px rgba(0,0,0,0.7),
                inset 0 -2px 6px rgba(255,140,0,0.06),
                0 0 8px rgba(255,140,0,0.12) !important;
        }
        /* ARMED — red pulsing glow */
        .sfx-cust.armed {
            border-color: #ff0032 !important;
            color: #ff3355 !important;
            animation: rec-arm-glow 0.75s ease-in-out infinite;
        }
        @keyframes rec-arm-glow {
            0%, 100% {
                border-color: #ff0032;
                box-shadow: 2px 3px 8px rgba(0,0,0,0.95), inset 0 3px 12px rgba(0,0,0,0.8),
                    0 0 20px rgba(255,0,50,0.55), inset 0 0 18px rgba(255,0,30,0.12);
            }
            50% {
                border-color: rgba(255,0,50,0.22);
                box-shadow: 2px 3px 8px rgba(0,0,0,0.95), inset 0 3px 12px rgba(0,0,0,0.85),
                    0 0 4px rgba(255,0,50,0.12);
            }
        }
        /* RECORDING — hard red pulse */
        .sfx-cust.recording {
            background: linear-gradient(145deg, #1a0808 0%, #0f0404 100%) !important;
            border-color: #ff0000 !important;
            color: #ff4444 !important;
            animation: sfx-rec-pulse 0.55s ease-in-out infinite !important;
        }
        @keyframes sfx-rec-pulse {
            0%, 100% { box-shadow: 2px 3px 8px rgba(0,0,0,0.95), inset 0 3px 12px rgba(0,0,0,0.7),
                0 0 22px rgba(255,0,0,0.65), inset 0 0 16px rgba(255,0,0,0.15); border-color: #ff0000; }
            50%       { box-shadow: 2px 3px 8px rgba(0,0,0,0.95), inset 0 3px 12px rgba(0,0,0,0.85),
                0 0 5px rgba(255,0,0,0.18); border-color: rgba(255,0,0,0.3); }
        }
        .sfx-cust.recording .pad-timer { display: block; }
        .sfx-cust.recording .pad-id,
        .sfx-cust.recording .pad-name,
        .sfx-cust.recording .pad-hint,
        .sfx-cust.recording .pad-sub,
        .sfx-cust.recording .pad-lcd  { display: none; }
        /* Blinking red REC dot — top-left corner while recording */
        @keyframes rec-dot-blink {
            0%, 49% { opacity: 1; }
            50%, 100% { opacity: 0; }
        }
        .sfx-cust.recording::after {
            content: '●';
            position: absolute;
            top: 5px; left: 6px;
            font-size: 6px;
            color: #ff2233;
            text-shadow: 0 0 6px rgba(255,0,0,0.9);
            animation: rec-dot-blink 0.5s step-end infinite;
            pointer-events: none;
            line-height: 1;
        }
        /* Show LOAD SAMPLE hint on unloaded custom pads so the action is obvious */
        .sfx-cust:not(.loaded):not(.armed):not(.recording) .pad-hint { display: block; }
        /* On hover reveal the R-CLICK instruction, hide name */
        .sfx-cust:not(.loaded):not(.armed):not(.recording):hover .pad-sub  { display: block; }
        .sfx-cust:not(.loaded):not(.armed):not(.recording):hover .pad-name { display: none; }

        /* ── ACTIVE FILL — pad lit while sample is playing ── */
        .sfx-pad.sfx-playing {
            transition: background 0.05s ease, box-shadow 0.05s ease, border-color 0.05s ease;
        }
        /* Signature bank (cyan) */
        .sfx-sig.sfx-playing:not([class*="coupled-"]) {
            background: rgba(0,243,255,0.22) !important;
            border-color: var(--accent) !important;
            box-shadow: 0 0 14px rgba(0,243,255,0.55), inset 0 0 18px rgba(0,243,255,0.18) !important;
        }
        /* Custom bank (amber) */
        .sfx-cust.sfx-playing:not([class*="coupled-"]) {
            background: rgba(255,170,0,0.22) !important;
            border-color: #ffaa00 !important;
            box-shadow: 0 0 14px rgba(255,170,0,0.55), inset 0 0 18px rgba(255,170,0,0.18) !important;
        }
        /* Coupled FX fills use the coupling color */
        .sfx-pad.coupled-nvg.sfx-playing {
            background: rgba(0,255,65,0.22) !important;
            border-color: #00ff41 !important;
            box-shadow: 0 0 14px rgba(0,255,65,0.6), inset 0 0 18px rgba(0,255,65,0.2) !important;
        }
        .sfx-pad.coupled-shoot.sfx-playing,
        .sfx-pad.coupled-reset.sfx-playing {
            background: rgba(255,34,51,0.22) !important;
            border-color: #ff2233 !important;
            box-shadow: 0 0 14px rgba(255,34,51,0.6), inset 0 0 18px rgba(255,34,51,0.2) !important;
        }
        .sfx-pad.coupled-void.sfx-playing,
        .sfx-pad.coupled-failure.sfx-playing,
        .sfx-pad.coupled-lucy.sfx-playing {
            background: rgba(204,0,255,0.22) !important;
            border-color: #cc00ff !important;
            box-shadow: 0 0 14px rgba(204,0,255,0.6), inset 0 0 18px rgba(204,0,255,0.2) !important;
        }
        .sfx-pad.coupled-seismic.sfx-playing,
        .sfx-pad.coupled-punch.sfx-playing {
            background: rgba(255,102,0,0.22) !important;
            border-color: #ff6600 !important;
            box-shadow: 0 0 14px rgba(255,102,0,0.6), inset 0 0 18px rgba(255,102,0,0.2) !important;
        }
        .sfx-pad.coupled-party.sfx-playing {
            background: rgba(255,0,255,0.22) !important;
            border-color: #ff00ff !important;
            box-shadow: 0 0 14px rgba(255,0,255,0.6), inset 0 0 18px rgba(255,0,255,0.2) !important;
        }

        /* ── HIT FLASH — bright internal glow ── */
        .sfx-pad.sfx-pulse { animation: sfx-pad-pulse 0.28s ease-out forwards; }
        @keyframes sfx-pad-pulse {
            0%  {
                transform: scale(0.97) translateY(1px);
                box-shadow:
                    1px 2px 4px rgba(0,0,0,0.9),
                    inset 0 2px 8px rgba(0,0,0,0.5),
                    inset 0 0 18px rgba(255,255,255,0.22),
                    0 0 8px currentColor;
            }
            100% {
                transform: scale(1) translateY(0);
                box-shadow:
                    2px 3px 8px rgba(0,0,0,0.95),
                    inset 0 3px 12px rgba(0,0,0,0.85),
                    inset 0 -2px 6px rgba(255,255,255,0.025);
            }
        }

        /* ── COUPLING ENGINE — color-coded glow per FX ── */
        .sfx-pad .pad-fx-label {
            position: absolute;
            bottom: 3px;
            left: 0; right: 0;
            font-size: 5px; letter-spacing: 0.12em; line-height: 1;
            text-transform: uppercase; opacity: 0; display: block;
            font-family: 'Orbitron', sans-serif;
            pointer-events: none;
            transition: opacity 0.2s;
        }
        .sfx-pad.coupled .pad-fx-label { opacity: 0.9; }

        /* NVG — Neon Green underglow */
        .sfx-pad.coupled-nvg {
            border-color: rgba(0,255,65,0.8) !important;
            color: rgba(0,255,65,0.9) !important;
            box-shadow:
                2px 3px 8px rgba(0,0,0,0.95),
                inset 0 3px 12px rgba(0,0,0,0.7),
                0 0 10px rgba(0,255,65,0.45),
                inset 0 0 12px rgba(0,255,65,0.08) !important;
        }
        /* SHOOT / RESET — Sharp Red underglow */
        .sfx-pad.coupled-shoot,
        .sfx-pad.coupled-reset {
            border-color: rgba(255,30,50,0.85) !important;
            color: rgba(255,60,80,0.9) !important;
            box-shadow:
                2px 3px 8px rgba(0,0,0,0.95),
                inset 0 3px 12px rgba(0,0,0,0.7),
                0 0 10px rgba(255,30,50,0.45),
                inset 0 0 12px rgba(255,30,50,0.08) !important;
        }
        /* VOID / FAILURE / LUCY — Deep Purple/Magenta underglow */
        .sfx-pad.coupled-void,
        .sfx-pad.coupled-failure,
        .sfx-pad.coupled-lucy {
            border-color: rgba(180,0,255,0.85) !important;
            color: rgba(200,60,255,0.9) !important;
            box-shadow:
                2px 3px 8px rgba(0,0,0,0.95),
                inset 0 3px 12px rgba(0,0,0,0.7),
                0 0 10px rgba(180,0,255,0.45),
                inset 0 0 12px rgba(180,0,255,0.08) !important;
        }
        /* PUNCH / SEISMIC — Amber/Industrial Orange underglow */
        .sfx-pad.coupled-punch,
        .sfx-pad.coupled-seismic {
            border-color: rgba(255,102,0,0.85) !important;
            color: rgba(255,140,30,0.9) !important;
            box-shadow:
                2px 3px 8px rgba(0,0,0,0.95),
                inset 0 3px 12px rgba(0,0,0,0.7),
                0 0 10px rgba(255,102,0,0.45),
                inset 0 0 12px rgba(255,102,0,0.08) !important;
        }
        /* PARTY — Magenta/Cyan strobe */
        .sfx-pad.coupled-party {
            border-color: rgba(255,0,255,0.8) !important;
            color: rgba(255,60,255,0.9) !important;
            box-shadow:
                2px 3px 8px rgba(0,0,0,0.95),
                inset 0 3px 12px rgba(0,0,0,0.7),
                0 0 10px rgba(255,0,255,0.4),
                inset 0 0 12px rgba(255,0,255,0.07) !important;
        }
        /* Backward-compat alias */
        .sfx-pad.coupled-glitch {
            border-color: rgba(255,0,100,0.85) !important;
            color: rgba(255,60,140,0.9) !important;
            box-shadow: 2px 3px 8px rgba(0,0,0,0.95), inset 0 3px 12px rgba(0,0,0,0.7),
                0 0 18px rgba(255,0,100,0.5), inset 0 0 12px rgba(255,0,100,0.08) !important;
        }
        /* BANK B GPU shaders — cyan accent glow */
        .sfx-pad[class*="coupled-vb-"] {
            border-color: rgba(0,243,255,0.85) !important;
            color: rgba(0,243,255,0.9) !important;
            box-shadow:
                2px 3px 8px rgba(0,0,0,0.95),
                inset 0 3px 12px rgba(0,0,0,0.7),
                0 0 10px rgba(0,243,255,0.45),
                inset 0 0 12px rgba(0,243,255,0.08) !important;
        }
        .sfx-pad[class*="coupled-vb-"].sfx-playing {
            animation: sfx-pad-pulse 0.3s ease-out;
            box-shadow:
                0 0 20px rgba(0,243,255,0.7),
                0 0 40px rgba(0,243,255,0.35),
                inset 0 0 12px rgba(0,243,255,0.15) !important;
        }

        /* ── SAMPLER HELP BUTTON & MODAL ── */
        @keyframes help-discover-pulse {
            0%, 100% { border-color: rgba(0,243,255,0.14); color: rgba(0,243,255,0.32); box-shadow: none; }
            50%       { border-color: rgba(0,243,255,0.42); color: rgba(0,243,255,0.68); box-shadow: 0 0 8px rgba(0,243,255,0.28); }
        }
        .sampler-help-btn {
            background: transparent;
            border: 1px solid rgba(0,243,255,0.2);
            border-radius: 50%;
            width: 16px; height: 16px;
            font-family: 'Orbitron', sans-serif;
            font-size: 8px; font-weight: 700;
            color: rgba(0,243,255,0.5);
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
            line-height: 1; padding: 0;
            animation: help-discover-pulse 2.5s ease-in-out infinite;
        }
        .sampler-help-btn:hover {
            animation: none;
            border-color: var(--accent);
            color: var(--accent);
            box-shadow: 0 0 10px rgba(0,243,255,0.45);
        }
        #sampler-help-modal {
            display: none;
            position: absolute;
            inset: 0;
            z-index: 10000;
            background: rgba(2,4,10,0.97);
            border: 1px solid rgba(0,243,255,0.25);
            border-radius: 6px;
            flex-direction: column;
            padding: 12px;
            box-shadow: 0 0 24px rgba(0,243,255,0.12), inset 0 0 40px rgba(0,0,0,0.8);
        }
        #sampler-help-modal.visible { display: flex; }
        #sampler-help-header {
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 10px; padding-bottom: 7px;
            border-bottom: 1px solid rgba(0,243,255,0.12);
        }
        #sampler-help-header span {
            font-family: 'Orbitron', sans-serif; font-size: 8px; font-weight: 700;
            letter-spacing: 2.5px; color: var(--accent); text-transform: uppercase;
        }
        #sampler-help-close {
            background: transparent; border: none; color: rgba(0,243,255,0.45);
            font-size: 10px; cursor: pointer; line-height: 1; padding: 1px 3px;
            transition: color 0.15s;
        }
        #sampler-help-close:hover { color: var(--accent); }
        .sampler-help-rows { display: flex; flex-direction: column; gap: 7px; flex: 1; overflow-y: auto; scrollbar-width: none; }
        .sampler-help-row {
            display: flex; gap: 8px; align-items: flex-start;
        }
        .sampler-help-key {
            font-family: 'Orbitron', sans-serif; font-size: 6px; font-weight: 700;
            letter-spacing: 1px; color: var(--accent); opacity: 0.75;
            border: 1px solid rgba(0,243,255,0.2);
            padding: 2px 5px; border-radius: 3px;
            flex-shrink: 0; white-space: nowrap; line-height: 1.4;
        }
        .sampler-help-desc {
            font-size: 7px; color: rgba(255,255,255,0.55); line-height: 1.5;
            letter-spacing: 0.02em;
        }
        .sampler-help-footer {
            margin-top: 10px; padding-top: 7px;
            border-top: 1px solid rgba(255,255,255,0.05);
            font-size: 6px; color: rgba(255,255,255,0.2);
            letter-spacing: 1.5px; font-family: 'Orbitron', sans-serif;
            text-align: center;
        }

        /* ── GROOVEBOX / 12-PAD ADDITIONS ── */
        .sfx-wide { grid-column: 1 / -1 !important; height: 32px !important; }
        /* Liquid bank — deep indigo/violet tint */
        .sfx-liq:not([class*="coupled-"]) {
            border-color: rgba(100,60,255,0.45) !important;
            color: rgba(140,90,255,0.85) !important;
            box-shadow:
                2px 3px 8px rgba(0,0,0,0.95),
                0 1px 0 rgba(255,255,255,0.04),
                inset 0 3px 12px rgba(0,0,0,0.7),
                inset 0 -2px 6px rgba(100,60,255,0.06),
                0 0 8px rgba(100,60,255,0.18) !important;
            text-shadow: 0 0 8px rgba(140,90,255,0.7) !important;
        }
        .sfx-liq:not([class*="coupled-"]):hover {
            border-color: rgba(140,90,255,0.8) !important;
            color: rgba(170,120,255,1.0) !important;
            box-shadow:
                2px 3px 8px rgba(0,0,0,0.95),
                0 1px 0 rgba(255,255,255,0.06),
                inset 0 3px 12px rgba(0,0,0,0.6),
                inset 0 -2px 6px rgba(100,60,255,0.12),
                0 0 16px rgba(140,90,255,0.45),
                0 0 32px rgba(140,90,255,0.18) !important;
            text-shadow: 0 0 12px rgba(170,120,255,0.9) !important;
        }
        .sfx-liq.sfx-playing:not([class*="coupled-"]) {
            background: rgba(100,60,255,0.22) !important;
            border-color: rgba(140,90,255,1.0) !important;
            box-shadow: 0 0 14px rgba(100,60,255,0.6), inset 0 0 18px rgba(100,60,255,0.2) !important;
        }
        /* 0.75x rate badge bottom-right of liquid pad */
        .pad-rate {
            position: absolute;
            bottom: 4px; right: 5px;
            font-size: 5px; font-family: 'Orbitron', sans-serif;
            color: rgba(140,90,255,0.6); opacity: 1;
            line-height: 1; pointer-events: none; letter-spacing: 0;
        }
        /* Liquid library select */
        #liq-lib-select {
            -webkit-appearance: none; appearance: none;
            width: 100%; margin-top: 5px; height: 26px;
            background: #0c0c14;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%238050ff' opacity='0.6'/%3E%3C/svg%3E");
            background-repeat: no-repeat; background-position: right 7px center; background-size: 7px 5px;
            border: 1px solid rgba(100,60,255,0.38) !important; border-radius: 3px;
            color: rgba(140,90,255,0.88) !important;
            font-family: 'Orbitron', sans-serif; font-size: 6.5px; font-weight: 600;
            letter-spacing: 0.08em; padding: 0 20px 0 8px; cursor: pointer;
            box-shadow: 0 2px 8px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.02), 0 0 6px rgba(100,60,255,0.12);
            transition: border-color 0.15s, box-shadow 0.15s;
        }
        #liq-lib-select:hover { border-color: rgba(140,90,255,0.68) !important; color: rgba(170,120,255,1.0) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.8), 0 0 12px rgba(100,60,255,0.3), inset 0 1px 0 rgba(255,255,255,0.03); }
        #liq-lib-select option { background: #0c0c14; color: rgba(160,110,255,0.9); font-family: 'Orbitron', sans-serif; font-size: 7px; }

        /* ── GHOST TERMINAL — HUD corner edges (expanded state only) ── */
        #ghost-terminal {
            border-top: 1px solid rgba(0,243,255,0.18) !important;
            border-radius: 2px !important;
        }
        #ghost-terminal.expanded {
            border-top: 2px solid var(--c) !important;
            border-radius: 0 !important;
        }
        #ghost-terminal.expanded::before,
        #ghost-terminal.expanded::after {
            content: '';
            position: absolute;
            width: 10px; height: 10px;
            z-index: 2; pointer-events: none;
        }
        #ghost-terminal.expanded::before {
            top: -2px; left: -1px;
            border-top: 2px solid rgba(255,255,255,0.28);
            border-left: 2px solid rgba(255,255,255,0.28);
        }
        #ghost-terminal.expanded::after {
            top: -2px; right: -1px;
            border-top: 2px solid rgba(255,255,255,0.28);
            border-right: 2px solid rgba(255,255,255,0.28);
        }
        #ghost-terminal-header {
            position: relative;
            overflow: hidden;
        }
        /* Animated scan line — only visible when expanded */
        #ghost-terminal.expanded #ghost-terminal-header::after {
            content: '';
            position: absolute;
            bottom: 0; left: -60%;
            width: 50%; height: 1px;
            background: linear-gradient(90deg, transparent 0%, rgba(0,243,255,0.6) 50%, transparent 100%);
            animation: ghost-header-scan 4s linear infinite;
            pointer-events: none;
        }
        @keyframes ghost-header-scan { 0% { left: -50%; } 100% { left: 120%; } }

        /* ── BROADCAST RECORDING CONTROLS ── */
        .btn.rec {
            background: linear-gradient(180deg, #1a0000 0%, #0e0000 100%) !important;
            border-color: var(--r) !important;
            color: var(--r) !important;
            text-align: center;
            font-weight: bold;
            letter-spacing: 2px;
        }
        .btn.rec:hover {
            background: linear-gradient(180deg, #260000 0%, #1a0000 100%) !important;
            box-shadow: 0 0 14px rgba(255,51,51,0.35) !important;
        }
        /* Recording active — radiate outward */
        .btn.rec.active {
            color: #ff5555 !important;
            border-color: #ff2222 !important;
            animation: bcast-rec-radiate 1.1s ease-in-out infinite !important;
        }
        @keyframes bcast-rec-radiate {
            0%, 100% {
                box-shadow: 0 0 8px rgba(255,30,30,0.5), 0 0 24px rgba(255,30,30,0.18);
                border-color: #ff2222;
                text-shadow: 0 0 8px rgba(255,80,80,0.6);
            }
            50% {
                box-shadow: 0 0 22px rgba(255,30,30,0.8), 0 0 50px rgba(255,30,30,0.3);
                border-color: rgba(255,120,120,0.85);
                text-shadow: 0 0 16px rgba(255,100,100,0.95);
            }
        }
        /* END LIVE — blinks when recording is active (CSS sibling selector) */
        #btn-rec.active + #btn-end {
            border-color: var(--r) !important;
            color: rgba(255,80,80,0.8) !important;
            animation: btn-end-warning 1.4s ease-in-out infinite !important;
        }
        @keyframes btn-end-warning {
            0%, 100% { opacity: 1; box-shadow: inset 0 0 10px rgba(255,51,51,0.12); color: rgba(255,80,80,0.8) !important; }
            50%       { opacity: 0.55; box-shadow: none; }
        }

        /* ── Broadcast solid-block panel — ON-AIR aesthetic ── */
        .bcast-block {
            border: 1px solid #252535;
            border-radius: 2px;
            overflow: hidden;
            margin-bottom: 6px;
            position: relative;
        }
        .bcast-btn {
            font-family: 'Orbitron', sans-serif !important;
            font-size: 9px !important;
            font-weight: 700 !important;
            letter-spacing: 2.5px !important;
            text-align: center !important;
            background: linear-gradient(180deg, #0e0e14 0%, #08080c 100%) !important;
            border: none !important;
            border-bottom: 1px solid #1c1c2a !important;
            border-radius: 0 !important;
            padding: 11px 12px !important;
            margin: 0 !important;
            width: 100%;
            display: block;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            transition: color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.06s ease !important;
        }
        .bcast-block .bcast-btn:last-child { border-bottom: none !important; }
        /* Diagonal scanlines — matches ON-AIR button */
        .bcast-btn::before {
            content: '';
            position: absolute; inset: 0;
            background: repeating-linear-gradient(
                -48deg,
                transparent, transparent 5px,
                rgba(255,255,255,0.012) 5px, rgba(255,255,255,0.012) 10px
            );
            pointer-events: none;
            z-index: 0;
        }
        /* REC active — override border-based animation with shadow-based glow for block context */
        .bcast-btn.rec.active {
            color: #ff5555 !important;
            animation: bcast-rec-radiate-block 1.1s ease-in-out infinite !important;
        }
        @keyframes bcast-rec-radiate-block {
            0%, 100% {
                background: linear-gradient(180deg, #120002 0%, #0a0001 100%);
                box-shadow: inset 0 0 18px rgba(255,30,30,0.2), 0 0 0 1px rgba(255,30,30,0.5);
                text-shadow: 0 0 8px rgba(255,80,80,0.6);
            }
            50% {
                background: linear-gradient(180deg, #1c0004 0%, #110002 100%);
                box-shadow: inset 0 0 32px rgba(255,30,30,0.35), 0 0 0 1px rgba(255,120,120,0.8), 0 0 12px rgba(255,30,30,0.3);
                text-shadow: 0 0 16px rgba(255,100,100,0.95);
            }
        }
        /* REC default */
        .bcast-btn.rec { color: #ff2222 !important; }
        .bcast-btn.rec:hover {
            background: linear-gradient(180deg, #140004 0%, #0a0002 100%) !important;
            color: #ff4444 !important;
            box-shadow: inset 0 0 24px rgba(255,0,30,0.1), 0 0 0 1px rgba(255,0,30,0.35) !important;
            transform: translateY(-1px) !important;
        }
        /* END LIVE default */
        #btn-end.bcast-btn { color: #404050 !important; }
        #btn-end.bcast-btn:hover {
            color: #ff6600 !important;
            background: linear-gradient(180deg, #120800 0%, #0a0500 100%) !important;
            box-shadow: inset 0 0 24px rgba(255,100,0,0.08), 0 0 0 1px rgba(255,100,0,0.3) !important;
            transform: translateY(-1px) !important;
        }
        /* SHUTDOWN CAM — standalone pill (outside .bcast-block) */
        .bcast-kill {
            background: linear-gradient(180deg, #0e0e14 0%, #08080c 100%) !important;
            border: 1px solid #252535 !important;
            border-radius: 2px !important;
            font-family: 'Orbitron', sans-serif !important;
            font-size: 9px !important;
            font-weight: 700 !important;
            letter-spacing: 2.5px !important;
            text-align: center !important;
            color: #404050 !important;
        }
        .bcast-kill:hover {
            color: #ff2222 !important;
            border-color: rgba(255,0,30,0.45) !important;
            box-shadow: 0 0 8px rgba(255,0,30,0.18), 0 0 0 1px rgba(255,0,30,0.25), inset 0 0 16px rgba(255,0,30,0.06) !important;
            transform: translateY(-1px) !important;
        }

        /* ── Camera control buttons — ON-AIR panel aesthetic, original colour/size kept ── */
        .cam-panel-btn {
            background: linear-gradient(180deg, #0e0e14 0%, #08080c 100%) !important;
            border: 1px solid #252535 !important;
            border-radius: 2px !important;
            font-family: 'Orbitron', sans-serif !important;
            font-size: 9px !important;
            font-weight: 700 !important;
            letter-spacing: 2px !important;
            text-align: center !important;
            position: relative;
            overflow: hidden;
            transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.06s ease !important;
        }
        .cam-panel-btn::before {
            content: '';
            position: absolute; inset: 0;
            background: repeating-linear-gradient(
                -48deg,
                transparent, transparent 5px,
                rgba(255,255,255,0.012) 5px, rgba(255,255,255,0.012) 10px
            );
            pointer-events: none;
            z-index: 0;
        }
        /* GO LIVE yellow hover */
        #btn-go-live.cam-panel-btn:hover {
            border-color: rgba(255,204,0,0.45) !important;
            box-shadow: 0 0 8px rgba(255,204,0,0.18), 0 0 0 1px rgba(255,204,0,0.25), inset 0 0 16px rgba(255,204,0,0.05) !important;
            transform: translateY(-1px) !important;
        }
        /* INJECT & MIC — accent-coloured hover */
        #btn-inject.cam-panel-btn:hover,
        #btn-mic.cam-panel-btn:hover {
            border-color: var(--accent) !important;
            box-shadow: var(--theme-glow), 0 0 0 1px var(--theme-border) !important;
            transform: translateY(-1px) !important;
        }

        .palette-grid { display: flex; gap: 4px; flex-wrap: nowrap; align-items: center; }
        .pal { width: 14px; height: 14px; border: 1.5px solid var(--border); border-radius: 3px; transition: all 0.15s; cursor: pointer; flex-shrink: 0; }
        .pal:hover { transform: scale(1.2); }
        .pal.on { border-color: #fff; box-shadow: 0 0 6px rgba(255,255,255,0.5); }
        .pal[data-t="cyan"] { background: #00f3ff; }
        .pal[data-t="magenta"] { background: #ff0055; }
        .pal[data-t="green"] { background: #00ff88; }
        .pal[data-t="purple"] { background: #b000ff; }
        .pal[data-t="gold"] { background: #ffd700; }
        .pal[data-t="night"] { background: linear-gradient(135deg, #0a1a15, #1a1a2a); border-color: #334455; }

        #bottom-bar { position: fixed; bottom: 0; left: 0; right: 0; height: 55px; background: var(--panel); border-top: 2px solid rgba(255,255,255,0.08); box-shadow: 0 -2px 8px rgba(0,0,0,0.7); z-index: 5000; display: flex; flex-direction: column; border-radius: 0; }
        #ticker-wrap { flex: 1; display: flex; align-items: center; background: rgba(0,0,0,0.3); border-bottom: 1px solid var(--border); overflow: hidden; }
        #ticker-label { padding: 0 12px; font-size: 8px; letter-spacing: 2px; color: var(--accent); background: var(--accent-dim); height: 100%; display: flex; align-items: center; border-right: 1px solid var(--border); }
        #ticker-scroll { flex: 1; overflow: hidden; white-space: nowrap; }
        #ticker-text { display: inline-block; padding-left: 100%; animation: scroll-ticker 60s linear infinite; font-size: 10px; display: flex; gap: 30px; }
        @keyframes scroll-ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
        .tick-up { color: var(--g); } .tick-down { color: var(--r); }
        #info-bar { display: flex; align-items: center; justify-content: space-between; padding: 4px 15px; font-size: 9px; flex-shrink: 0; min-height: 22px; border-top: 1px solid rgba(255,255,255,0.04); }
        .info-group { display: flex; gap: 20px; }
        .info-item { color: var(--text-dim); }
        .info-item span { color: var(--text); }
        .info-item .hl { color: var(--accent); }

        #sys-log {
            position: fixed; bottom: 55px; right: 200px;
            width: 230px;
            background: rgba(4,6,14,0.94);
            border: 1px solid rgba(0,243,255,0.1);
            border-radius: 4px;
            font-size: 8px; color: var(--text-dim);
            z-index: 4400;
            overflow: hidden;
            opacity: 0.12;
            transition: opacity 0.5s ease, border-color 0.4s, box-shadow 0.4s;
            pointer-events: all;
        }
        /* Opacity states */
        #sys-log.sl-idle   { opacity: 0.42; }
        #sys-log.sl-active { opacity: 0.88; border-color: rgba(0,243,255,0.25); }
        #sys-log.sl-alert  { opacity: 1;    border-color: rgba(255,200,0,0.55); box-shadow: 0 0 14px rgba(255,200,0,0.18); }
        #sys-log.sl-pinned { opacity: 0.72; border-color: rgba(0,243,255,0.18); }
        /* Drag handle */
        #sys-log-handle {
            display: flex; align-items: center; gap: 5px;
            padding: 3px 7px 3px 6px;
            background: rgba(0,243,255,0.03);
            border-bottom: 1px solid rgba(0,243,255,0.07);
            cursor: grab; user-select: none;
            font-family: 'Orbitron', sans-serif; font-size: 6px;
            letter-spacing: 1.2px; color: rgba(0,243,255,0.28);
        }
        #sys-log-handle:active { cursor: grabbing; }
        #sys-log-handle-label { flex: 1; }
        #sys-log-badge {
            background: rgba(255,200,0,0.8); color: #000;
            border-radius: 8px; font-size: 6px; font-weight: 700;
            padding: 1px 5px; display: none; min-width: 14px; text-align: center;
        }
        #sys-log-pin-btn, #sys-log-clear-btn {
            background: none; border: none; cursor: pointer;
            color: rgba(0,243,255,0.28); font-size: 10px; padding: 0 1px;
            line-height: 1; font-family: monospace; transition: color 0.15s;
        }
        #sys-log-pin-btn:hover, #sys-log-clear-btn:hover { color: rgba(0,243,255,0.8); }
        #sys-log-pin-btn.pinned { color: rgba(255,200,0,0.7); }
        /* Log lines body */
        #sys-log-body { max-height: 60px; overflow-y: auto; padding: 4px 6px 5px; }
        .log-line { margin-bottom: 2px; }
        .log-line .ts { color: var(--accent); margin-right: 5px; }

        #countdown { position: absolute; inset: 0; background: rgba(0,0,0,0.95); display: none; align-items: center; justify-content: center; z-index: 5000; }
        #countdown-num { font-family: 'Orbitron', sans-serif; font-size: 140px; font-weight: 900; color: var(--accent); text-shadow: 0 0 60px var(--accent); }
        #nft-hud { position: fixed; bottom: 70px; left: 50%; transform: translateX(-50%); z-index: 9999; background: rgba(0,0,0,0.95); border: 2px solid var(--r); padding: 12px 24px 15px; font-family: 'Orbitron', sans-serif; display: none; text-align: center; cursor: grab; user-select: none; transition: opacity 0.2s; }
        #nft-hud.active { display: block; }
        #nft-hud.dragging { cursor: grabbing; }
        #nft-hud-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; gap: 10px; }
        #nft-dim-btn { background: none; border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.5); cursor: pointer; font-size: 13px; line-height:1; padding: 1px 5px; font-family: inherit; border-radius: 2px; }
        #nft-dim-btn:hover { color: #fff; border-color: rgba(255,255,255,0.5); }
        #nft-drag-handle { color: rgba(255,255,255,0.3); font-size: 14px; cursor: grab; letter-spacing: -1px; }
        #nft-timer { font-size: 36px; color: var(--r); font-weight: 900; }
        #nft-label { font-size: 10px; color: #fff; margin-top: 5px; letter-spacing: 2px; }
        .nft-bar { width: 200px; height: 4px; background: #333; margin-top: 10px; }
        .nft-fill { height: 100%; background: var(--r); transition: width 0.1s linear; }

        .blur-reveal { position: fixed; inset: 0; backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); z-index: 99999; pointer-events: none; animation: material-reveal 0.5s ease forwards; }
        @keyframes material-reveal { 0% { backdrop-filter: blur(50px); opacity: 1; } 100% { backdrop-filter: blur(0px); opacity: 0; } }

       input[type="file"] { display: none; }

/* --- ENHANCED VHS & CRT FX --- */

/* 1. VHS: Color Degradation & RGB Bleed */
body.vhs #stage {
    filter: contrast(1.3) saturate(0.8) sepia(0.2) drop-shadow(3px 0px 0 rgba(255,0,0,0.5)) drop-shadow(-3px 0px 0 rgba(0,255,255,0.5)) !important;
}

/* 2. VHS: scanlines now drawn in canvas — suppress CSS duplicate */
body.vhs #stage::before {
    display: none !important;
}

/* 3. VHS: Rolling Tracking Bar */
body.vhs #stage::after {
    content: "";
    position: absolute;
    left: 0; 
    top: -20%;
    width: 100%; 
    height: 10%;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(4px) invert(0.1);
    -webkit-backdrop-filter: blur(4px) invert(0.1);
    animation: vhs-roll 6s linear infinite !important;
    z-index: 3002;
    pointer-events: none;
}

@keyframes vhs-track { 
    0% { background-position: 0 0; } 
    100% { background-position: 0 5px; } 
}

@keyframes vhs-roll {
    0% { top: -20%; opacity: 0; }
    5% { opacity: 1; }
    25% { top: 120%; opacity: 0; }
    100% { top: 120%; opacity: 0; }
}

/* 4. CRT: Glass Tube & Phosphor Mesh */
body.crt #stage {
    border-radius: 20px !important; /* Rounds the corners of the feed like an old monitor */
    overflow: hidden;
}

body.crt #stage::after { 
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Creates the tight phosphor grid + heavy glass vignette */
    background: 
        linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
        linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)),
        radial-gradient(circle at center, transparent 40%, rgba(0,0,0,0.95) 100%);
    background-size: 100% 3px, 3px 100%, 100% 100%;
    pointer-events: none;
    z-index: 3003;
}
        /* CONSOLE_HARDWARE — merged into primary .btn rules above */
        
        /* METAL DENT EFFECT - PERMANENT INSET */
        .dented {
            box-shadow: inset 4px 4px 10px rgba(0,0,0,0.8), inset -2px -2px 6px rgba(30,30,30,0.5) !important;
        }
        /* --- V34 FINAL SHOOTING MODE --- */

/* 1. FORCE CROSSHAIR EVERYWHERE */
body.shooting-mode, 
body.shooting-mode * {
    cursor: crosshair !important;
}

/* 2. MAKE CONSOLE "GHOSTLY" BUT VISIBLE */
/* This allows bullets to hit the buttons instead of clicking them */
body.shooting-mode .sidebar .btn, 
body.shooting-mode .sidebar input,
body.shooting-mode .logo-layer {
    pointer-events: none !important; /* IGNORE CLICKS (So you can shoot through) */
    /* NO OPACITY CHANGE - KEEPS IT LOOKING NORMAL */
}

/* 3. THE DISARM BUTTON (MUST WORK) */
body.shooting-mode #btn-shooting {
    pointer-events: auto !important; /* CLICKABLE */
    cursor: cell !important;
    background: var(--r) !important; /* RED ALERT */
    color: #000 !important;
    font-weight: 900 !important;
    box-shadow: 0 0 20px var(--r);
    z-index: 999999;
}
        /* MACHINE_GUN SHOOTING FX */
        #btn-shooting {
            z-index: 9999 !important;
            position: relative;
        }
        .bullet-hole {
            position: fixed;
            width: 20px;
            height: 20px;
            pointer-events: none;
            z-index: 99999;
        }
        .bullet-hole::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle, #000 30%, #333 50%, transparent 70%);
            border-radius: 50%;
            box-shadow: inset 0 0 5px #000, 0 0 3px rgba(0,0,0,0.8);
        }
        .bullet-hole::after {
            content: '';
            position: absolute;
            top: -5px; left: -5px; right: -5px; bottom: -5px;
            background: radial-gradient(circle, transparent 40%, rgba(50,50,50,0.3) 60%, transparent 80%);
            border-radius: 50%;
        }
        .smoke-puff {
            position: fixed;
            width: 40px;
            height: 40px;
            pointer-events: none;
            z-index: 99998;
            background: radial-gradient(circle, rgba(150,150,150,0.6) 0%, rgba(100,100,100,0.3) 40%, transparent 70%);
            border-radius: 50%;
            animation: smoke-rise 1.5s ease-out forwards;
        }
        @keyframes smoke-rise {
            0% { opacity: 1; transform: scale(0.5) translateY(0); }
            100% { opacity: 0; transform: scale(2) translateY(-50px); }
        }
        
        /* GLASS FRACTURE - REFRACTIVE VECTORS WITH LIGHTER COMPOSITE */
        #glass-fracture-layer {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 99997;
            mix-blend-mode: lighter;
        }
        .glass-fracture {
            position: absolute;
            pointer-events: none;
            mix-blend-mode: lighter;
        }
        .glass-fracture svg {
            overflow: visible;
            mix-blend-mode: lighter;
        }
        .fracture-line {
            stroke: rgba(200,220,255,0.9);
            stroke-width: 1.5;
            filter: drop-shadow(0 0 4px rgba(200,220,255,1)) drop-shadow(0 0 8px rgba(150,200,255,0.6));
        }
        .fracture-glow {
            stroke: rgba(255,255,255,0.4);
            stroke-width: 3;
            filter: blur(2px);
        }
        
        #shooting-overlay {
            position: fixed;
            top: 45px; left: 200px; right: 200px; bottom: 55px;
            z-index: 99990;
            pointer-events: none;
            display: none;
        }
        body.shooting-mode #shooting-overlay { display: block; pointer-events: auto; }

        @keyframes voice-flash {
            0% { filter: brightness(2.5); }
            100% { filter: brightness(1); }
        }
        .voice-flash { animation: voice-flash 0.1s ease-out; }
        
        /* SEISMIC SHAKE - BASS AND MIC REACTIVITY */
        @keyframes seismic-shake {
            0%, 100% { transform: translate(0, 0); }
            20% { transform: translate(-3px, 2px); }
            40% { transform: translate(3px, -2px); }
            60% { transform: translate(-2px, 3px); }
            80% { transform: translate(2px, -3px); }
        }
        /* seismic-shake: body-level shake for visible feedback even without canvas media */
        body.seismic-active { animation: seismic-body-shake 0.10s ease-in-out infinite; }
        @keyframes seismic-body-shake {
            0%   { transform: translate3d(0,    0,    0); }
            20%  { transform: translate3d(-2px,  1px,  0); }
            40%  { transform: translate3d( 2px, -1px,  0); }
            60%  { transform: translate3d(-1px,  2px,  0); }
            80%  { transform: translate3d( 2px,  0px,  0); }
            100% { transform: translate3d(0,    0,    0); }
        }

        /* ── KINETIC RACK: OVERSCAN BUFFER ──────────────────────────────────────
           During seismic events the body translates ±2px, which as a transform-
           ancestor of #stage (position:fixed) shifts the entire stage. Scaling
           #vj-canvas 1.05× ensures the 5% bleed area absorbs that shift and
           #stage's overflow:hidden clips the excess — no black edges exposed.
           Scale is applied to the canvas only, keeping HUD elements unaffected. */
        body.vb-seismic #vj-canvas,
        body.seismic-active #vj-canvas {
            animation: kr-seismic-overscan 0.10s ease-in-out infinite;
        }
        @keyframes kr-seismic-overscan {
            0%   { transform: scale(1.05) translate(0,      0);     }
            10%  { transform: scale(1.05) translate(-10px,  10px);  }
            20%  { transform: scale(1.05) translate( 10px, -10px);  }
            30%  { transform: scale(1.05) translate(-8px,    6px);  }
            40%  { transform: scale(1.05) translate(  8px,  -6px);  }
            50%  { transform: scale(1.05) translate(-6px,    8px);  }
            60%  { transform: scale(1.05) translate(  6px,  -8px);  }
            70%  { transform: scale(1.05) translate(-4px,    4px);  }
            80%  { transform: scale(1.05) translate(  4px,  -4px);  }
            90%  { transform: scale(1.05) translate(-2px,    2px);  }
            100% { transform: scale(1.05) translate(0,      0);     }
        }

        /* PUNCH: canvas scales UP on beat (outward zoom — never inward, which exposes edges) */
        body.vb-punch #vj-canvas {
            animation: kr-punch-zoom 0.20s ease-out forwards;
        }
        @keyframes kr-punch-zoom {
            0%   { transform: scale(1.00); }
            15%  { transform: scale(1.08); }
            60%  { transform: scale(1.04); }
            100% { transform: scale(1.00); }
        }

        /* Suppress scrollbar flash caused by body-translate during shake events */
        body.seismic-active,
        body.vb-seismic,
        body.vb-punch { overflow: hidden; }

    /* ═══ MIRROR COCKPIT — MOBILE ═══ */

    /* PORTRAIT LOCK OVERLAY — rotate-to-landscape gate */
    #portrait-lock {
        display: none;
        position: fixed; inset: 0; z-index: 99999;
        background: var(--bg);
        flex-direction: column; align-items: center; justify-content: center;
        gap: 24px;
        text-align: center;
    }
    #portrait-lock .lock-brand {
        font-family: 'Orbitron', sans-serif; font-weight: 900;
        font-size: clamp(28px, 8vw, 48px);
        color: var(--accent);
        text-shadow: 0 0 20px var(--accent-glow), 0 0 60px var(--accent-dim);
        letter-spacing: 0.15em;
    }
    #portrait-lock .lock-icon {
        width: 64px; height: 64px;
        border: 3px solid var(--accent);
        border-radius: 8px;
        position: relative;
        animation: lock-rotate 2s ease-in-out infinite;
    }
    #portrait-lock .lock-icon::after {
        content: ''; position: absolute;
        top: 50%; left: 50%; transform: translate(-50%,-50%);
        width: 0; height: 0;
        border-left: 12px solid var(--accent);
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
    }
    @keyframes lock-rotate {
        0%, 100% { transform: rotate(0deg); }
        25% { transform: rotate(90deg); }
        50% { transform: rotate(90deg); }
        75% { transform: rotate(0deg); }
    }
    #portrait-lock .lock-msg {
        font-family: 'JetBrains Mono', monospace;
        font-size: clamp(11px, 3vw, 15px);
        color: var(--text);
        letter-spacing: 0.2em;
        text-transform: uppercase;
        max-width: 80vw;
        line-height: 1.8;
    }
    #portrait-lock .lock-line {
        width: 40vw; height: 1px;
        background: linear-gradient(90deg, transparent, var(--accent), transparent);
    }

    /* Show overlay ONLY in portrait */
    @media (orientation: portrait) {
        #portrait-lock { display: flex !important; }
        body > *:not(#portrait-lock) { display: none !important; }
    }

    /* LANDSCAPE MOBILE — 1:1 desktop parity (full UI mirrored) */
    /* LANDSCAPE MOBILE — 1:1 desktop mirror, full UI, 0→1 coords intact */
    @media (max-width: 1024px) and (orientation: landscape) {
        html, body { font-size: 10px; }
        .sidebar {
            width: 200px; min-width: 160px;
            overflow-y: auto; overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
        }
        #stage { top: 36px; bottom: 40px; }
        #top-bar { height: 36px; }
        /* Scale down logo + brand elements to fit mobile header */
        .logo { font-size: 20px !important; }
        #main-logo span { font-size: 10px !important; }
        .sub-tag { font-size: 8px; margin-left: 5px; }
        .version { font-size: 7px; padding: 2px 5px; margin-left: 5px; }
        #status-bar { gap: 8px; }
        #clock { font-size: 12px; }
        .badge { font-size: 7px; padding: 2px 5px; }
        #bottom-bar { height: 40px; }
        #sys-log { font-size: 9px; } #sys-log-body { max-height: 70px; }
        #lower-third { bottom: 40px; left: 15px; }
        .lt-container { min-width: 200px; max-width: 300px; padding: 8px 16px 8px 10px; }
        .lt-title { font-size: 14px; }
        .lt-subtitle { font-size: 9px; }

        /* Kill P2P badge hover glow + party animations — too heavy for mobile GPU */
        .badge:hover { box-shadow: none !important; }
        body.party-active .sidebar, body.party-active header, body.party-active footer {
            animation: none !important;
        }
        body.seismic-active { animation: none !important; }

        /* P2P modal: fit mobile viewport */
        #p2p-modal { right: 10px !important; left: 10px !important; width: auto !important; }

        /* P2P LOBBY: badge flash when a guest is waiting to be accepted */
        @keyframes lobby-ring {
            0%, 100% { border-color: var(--g); color: var(--g); box-shadow: 0 0 0 rgba(0,255,136,0); }
            50%       { border-color: #fff;    color: #fff;    box-shadow: 0 0 10px rgba(0,255,136,0.7); }
        }
        #btn-open-p2p-modal.lobby { animation: lobby-ring 0.7s ease-in-out infinite; }
        /* P2P active call: steady low glow on the button so user can see call is on */
        @keyframes call-active-glow {
            0%, 100% { box-shadow: 0 0 4px rgba(0,255,136,0.4); border-color: var(--g); color: var(--g); }
            50%       { box-shadow: 0 0 12px rgba(0,255,136,0.7); border-color: var(--g); color: var(--g); }
        }
        #btn-open-p2p-modal.call-active { animation: call-active-glow 2s ease-in-out infinite; cursor: pointer; }

        /* ACCEPT button: yellow pulse while a staged incoming call is waiting */
        @keyframes accept-pulse {
            0%, 100% { border-color: var(--y); color: var(--y); box-shadow: 0 0 0 rgba(255,220,0,0); }
            50%       { border-color: #fff;    color: #fff;    box-shadow: 0 0 8px rgba(255,220,0,0.8); }
        }
        #btn-call-guest.accepting { animation: accept-pulse 0.6s ease-in-out infinite; }

        /* P2P remote feed: keep visually invisible but DO NOT use display:none —
           browsers stop delivering frames to the compositor when an element is
           hidden via display:none. opacity:0 + offscreen position keeps the
           video pipeline alive so drawImage() can capture frames. */
        #p2p-remote-feed {
            opacity: 0;
            position: fixed;
            bottom: 0;
            right: 0;
            width: 320px;
            height: 240px;
            pointer-events: none;
            z-index: -1;
        }

        /* Ghost terminal: mobile — compact corner widget, not full-width */
        #ghost-terminal {
            left: auto !important; right: 8px !important;
            bottom: 50px !important;
            width: 190px !important; max-width: 200px !important;
            height: auto !important; max-height: none !important;
            font-size: 9px !important;
            opacity: 0.88;
        }
        #ghost-terminal.expanded #ghost-terminal-body {
            max-height: 110px !important;
        }
        #ghost-input { font-size: 9px !important; }
        #ghost-close-btn { display: block !important; }
        #btn-ghost-mic.on { color: var(--accent) !important; border-color: var(--accent) !important; background: rgba(0,243,255,0.08) !important; box-shadow: 0 0 8px rgba(0,243,255,0.5), 0 0 0 1px rgba(0,243,255,0.25) !important; text-shadow: 0 0 6px var(--accent); animation: mic-pulse 1.4s ease-in-out infinite; }
        @keyframes mic-pulse { 0%,100%{opacity:1; box-shadow: 0 0 8px rgba(0,243,255,0.5), 0 0 0 1px rgba(0,243,255,0.25);} 50%{opacity:0.65; box-shadow: 0 0 4px rgba(0,243,255,0.2), 0 0 0 1px rgba(0,243,255,0.1);} }
        #top-center-controls button { font-size: 7px; padding: 2px 7px; }
    }

/* --- KINETIC SHUTTER TRANSITION --- */
.kinetic-shutter {
    animation: shutter-wipe 0.4s cubic-bezier(0.85, 0, 0.15, 1) forwards;
}

@keyframes shutter-wipe {
    0% { 
        clip-path: inset(0 0 0 0);
        transform: scale(1);
        filter: brightness(1) contrast(1);
    }
    45% { 
        clip-path: inset(0 100% 0 0); /* Horizontal wipe */
        transform: scale(1.03);
        filter: brightness(1.4) contrast(1.1);
    }
    50% { 
        clip-path: inset(0 0 0 100%); /* Reset wipe position */
    }
    100% { 
        clip-path: inset(0 0 0 0);
        transform: scale(1);
        filter: brightness(1) contrast(1);
    }
}/* --- TACTICAL FX MODULES --- */

/* --- TACTICAL FX v4.0 (FINAL POLISH) --- */

/* GLOBAL FIX: Ensure all FX overlays don't block mouse clicks */
.fx-scan::after, .fx-tear::after,  .fx-punch::after {
    pointer-events: none !important;
}

/* 1. X-RAY (Replaces Old Scan) - Inverted Tactical Thermal */
body.fx-scan #stage {
    /* Inverts all colors, crushes contrast, and forces a glowing cyan tint */
    filter: invert(1) contrast(1.5) grayscale(0.2) sepia(1) hue-rotate(135deg) saturate(2) !important;
    box-shadow: inset 0 0 80px rgba(0, 255, 255, 0.15) !important;
}

/* The Sweeping X-Ray Laser Bar */
body.fx-scan #stage::after {
    content: "";
    position: absolute;
    left: 0; 
    width: 100%; 
    height: 4px;
    background: rgba(0, 255, 255, 0.8);
    box-shadow: 0 0 15px rgba(0, 255, 255, 1), 0 0 30px rgba(0, 255, 255, 0.5);
    animation: xray-sweep 3s ease-in-out infinite alternate !important;
    z-index: 3005;
    pointer-events: none;
}

@keyframes xray-sweep {
    0% { top: 0%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: calc(100% - 4px); opacity: 0; }
}

/* 2. TEAR (Horizontal Data Glitch) */
/* body.fx-tear is only a state flag — visual is rendered directly into canvas pixels */
/* Shake is scoped to the canvas element only, not the whole console */
body.fx-tear #vj-canvas {
    animation: tear-shake 0.18s steps(2) infinite;
}
@keyframes tear-shake {
    0%   { transform: translate(3px, 0); }
    50%  { transform: translate(-3px, 0); }
    100% { transform: translate(0, 0); }
}


/* 5. PUNCH — state flag; animation fires on kick drum via .punch-hit */
.fx-punch {
    /* armed state — no infinite loop; kick detection drives .punch-hit */
}

/* punch-hit: brief full-screen brightness flash — visible even without canvas media */
.punch-hit::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(255, 210, 60, 0.13);
    pointer-events: none;
    z-index: 9998;
    animation: punch-flash 0.20s ease-out forwards;
}
@keyframes punch-flash {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}
/* Console-mode indicator: subtle dot on top-right of button */
.btn.console-mode::after { content: '●'; position: absolute; top: 2px; right: 3px; font-size: 5px; color: var(--accent); opacity: 0.8; pointer-events: none; }
.btn.on { color: var(--accent) !important; border-color: var(--accent) !important; background: rgba(0,243,255,0.08) !important; text-shadow: 0 0 8px var(--accent) !important; }
/* PUNCH LOCKED: slow Cyan pulse on button while punchLocked is active */
@keyframes punch-lock-pulse {
    0%, 100% { box-shadow: 0 0 6px rgba(0,243,255,0.4), inset 0 0 8px rgba(0,243,255,0.08); border-color: var(--accent); }
    50%       { box-shadow: 0 0 18px rgba(0,243,255,0.75), inset 0 0 16px rgba(0,243,255,0.18); border-color: rgba(0,243,255,0.9); }
}
#btn-punch.punch-locked { animation: punch-lock-pulse 1.8s ease-in-out infinite !important; color: #00f3ff !important; border-color: var(--accent) !important; background: rgba(0,243,255,0.12) !important; }
.btn.active-fx { color: var(--accent) !important; border-color: var(--accent) !important; background: rgba(0,243,255,0.06) !important; }
/* NVG active: surface above the z-9998 vignette overlay, unmissable green glow */
/* NVG active: the sidebar has transform:translate3d(0,0,0) which creates a stacking context,
   so child z-index can't compete with body::after at z-9998. Lift the WHOLE sidebar above the
   vignette overlay so buttons stay visible and interactive. */
body.fx-nvg .sidebar { z-index: 9999; }
/* Unmissable green glow on the active NVG button */
#btn-nvg.active-fx { color: #00ff41 !important; border-color: #00ff41 !important; background: rgba(0,255,65,0.30) !important; filter: drop-shadow(0 0 8px #00ff41) drop-shadow(0 0 18px rgba(0,255,65,0.55)) !important; text-shadow: 0 0 6px #00ff41, 0 0 16px #00ff41 !important; }

/* ── va-btn: unified FX button style for Bank A + Bank B ── */
.va-btn {
    font-size: 7.5px !important;
    padding: 6px 2px !important;
    text-align: center !important;
    letter-spacing: 0.4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: var(--va-color, rgba(255,255,255,0.55)) !important;
    border-color: color-mix(in srgb, var(--va-color, rgba(255,255,255,0.2)) 45%, transparent) !important;
    transition: color 0.15s, border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.va-btn:hover {
    color: var(--va-color, var(--accent)) !important;
    border-color: var(--va-color, var(--accent)) !important;
    box-shadow: 0 0 8px color-mix(in srgb, var(--va-color, var(--accent)) 60%, transparent) !important;
    text-shadow: 0 0 6px var(--va-color, var(--accent)) !important;
    background: color-mix(in srgb, var(--va-color, var(--accent)) 8%, #090910) !important;
}
.va-btn.active-fx,
.va-btn.active-mode,
.va-btn.on {
    color: var(--va-color, var(--accent)) !important;
    border-color: var(--va-color, var(--accent)) !important;
    background: color-mix(in srgb, var(--va-color, var(--accent)) 14%, #090910) !important;
    box-shadow: 0 0 12px color-mix(in srgb, var(--va-color, var(--accent)) 70%, transparent) !important;
    text-shadow: 0 0 8px var(--va-color, var(--accent)) !important;
    filter: none !important;
}

/* Ensure no FX overlay blocks clicks */
.fx-punch::after, .punch-hit::after {
    pointer-events: none !important;
}

/* VINYL VISUAL LOCK — clip canvas during seismic/punch so overscan buffer
   absorbs body-translate and punch-zoom without exposing black edges. */
body.seismic-active #vj-canvas,
body.vb-seismic #vj-canvas,
body.vb-punch #vj-canvas,
body.fx-punch #vj-canvas {
    overflow: hidden;
}
#kr-ai-video {
    object-fit: contain !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
}

/* VOID: Full Collapse — harsh grayscale crunch + visible warp */
body.fx-void {
    will-change: transform, filter;
    filter: saturate(0) contrast(3.5) brightness(1.4) invert(0.08) !important;
    animation: console-warp 0.6s ease-in-out infinite alternate !important;
}
@keyframes console-warp {
    /* 6% scale swing + ±1.5deg rotation — compositor-only, no paint */
    0%   { transform: translateZ(0) scale(1.03) rotate(-1.5deg); }
    100% { transform: translateZ(0) scale(0.97) rotate( 1.5deg); }
}

/* LUCY: Full Hallucination — GPU-accelerated, hits the entire console */
body.fx-lucy {
    will-change: transform, filter;
    transform: translateZ(0);
    background: #000 !important;
    animation: lucy-full-hue 3s linear infinite !important;
}
body.fx-lucy::after {
    content: ""; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    backdrop-filter: hue-rotate(90deg) saturate(2);
    background: radial-gradient(circle, rgba(255,0,255,0.05), transparent);
    pointer-events: none; z-index: 9999;
}
@keyframes lucy-full-hue {
    0%   { filter: hue-rotate(0deg)   saturate(4) brightness(1.1); }
    100% { filter: hue-rotate(360deg) saturate(4) brightness(1.1); }
}

/* NVG: Cinematic Military Night Vision */
/* 1. Stage: phosphor-green desaturated image */
body.fx-nvg #stage {
    filter: grayscale(1) brightness(1.6) contrast(2.2) sepia(1) hue-rotate(78deg) saturate(5) url(#nvg-grain) !important;
    will-change: filter;
    animation: nvg-stage-flicker 7s steps(1) infinite;
}
/* 2. Vignette is drawn by canvas in main.js (mouse-tracked binocular).
      Disable the old fixed-position overlay so it doesn't bleed over the console UI. */
body.fx-nvg::after {
    content: none;
}
/* 3. Scope reticle — drawn in canvas; suppress CSS version */
body.fx-nvg #stage::after {
    content: none;
}
@keyframes nvg-stage-flicker {
    0%, 88%, 92%, 100% { opacity: 1; }
    89% { opacity: 0.82; }
    91% { opacity: 0.95; }
}

@keyframes kinetic-punch {
    0% {
        transform: scale(1) translate(0, 0);
        filter: brightness(1) contrast(1);
    }
    15% {
        transform: scale(1.06) translate(-4px, 3px) skewX(-2deg);
        filter: brightness(1.6) contrast(1.4) drop-shadow(4px 0px 0px rgba(255,0,0,0.5));
    }
    30% {
        transform: scale(1.02) translate(4px, -2px) skewX(2deg);
        filter: brightness(1.2) contrast(1.2) drop-shadow(-4px 0px 0px rgba(0,255,255,0.5));
    }
    50% {
        transform: scale(0.98) translate(-2px, 1px) skewX(0deg);
        filter: brightness(0.9) contrast(1.1);
    }
    75% {
        transform: scale(1.01) translate(1px, -1px);
        filter: brightness(1) contrast(1);
    }
    100% {
        transform: scale(1) translate(0, 0);
        filter: brightness(1) contrast(1);
    }
}

/* 6. HARD RESET (Smooth flash — no scale/split) */
@keyframes crt-collapse {
    0%   { filter: brightness(1); opacity: 1; }
    20%  { filter: brightness(6); opacity: 1; }
    38%  { filter: brightness(0); opacity: 0; }
    62%  { filter: brightness(0); opacity: 0; }
    80%  { filter: brightness(2); opacity: 1; }
    100% { filter: brightness(1); opacity: 1; }
}
.anim-hard-reset {
    animation: crt-collapse 0.55s ease-in-out;
}

/* ═══════════════════════════════════════════════════════════════
   POLYTRANSLATOR // V1.0_SYNC  —  On-Air Tally + Transcription HUD
   ═══════════════════════════════════════════════════════════════ */

/* ── Tally pulse — heavy red broadcast lamp breathing ──────── */
@keyframes tally-pulse {
    0%, 100% {
        box-shadow: 0 0 6px rgba(255,0,85,0.4),
                    0 0 15px rgba(255,0,85,0.2),
                    inset 0 0 8px rgba(255,0,85,0.1);
        border-color: rgba(255,0,85,0.6);
    }
    50% {
        box-shadow: 0 0 14px rgba(255,0,85,1),
                    0 0 30px rgba(255,0,85,0.55),
                    0 0 60px rgba(255,0,85,0.2),
                    inset 0 0 12px rgba(255,0,85,0.2);
        border-color: #ff0055;
    }
}

/* ── On-Air button (pill style, overrides .btn base) ───────── */
#btn-on-air {
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3.5px;
    text-align: center;
    color: #404050;
    background: linear-gradient(180deg, #0e0e14 0%, #08080c 100%);
    border: 1px solid #252535;
    border-radius: 2px;
    padding: 10px 12px;
    width: 100%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: 0;
}
#btn-on-air::before {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
        -48deg,
        transparent, transparent 5px,
        rgba(255,255,255,0.012) 5px, rgba(255,255,255,0.012) 10px
    );
    pointer-events: none;
}
#btn-on-air:hover {
    color: #ff0055;
    border-color: rgba(255,0,85,0.5);
    box-shadow: 0 0 8px rgba(255,0,85,0.2);
}
#btn-on-air.active {
    color: #ff0055;
    background: linear-gradient(180deg, #140008 0%, #0a0005 100%);
    animation: tally-pulse 1.25s ease-in-out infinite;
    text-shadow: 0 0 10px rgba(255,0,85,0.9), 0 0 20px rgba(255,0,85,0.4);
}

/* ── SUBS.LANG// text blink — only when ON-AIR is active ── */
@keyframes subs-lang-text-blink {
    0%, 80%, 100% { opacity: 0.65; text-shadow: none; }
    90%            { opacity: 1; text-shadow: 0 0 5px var(--accent); }
}
#btn-on-air.active ~ #btn-slots-toggle:not(.opened) {
    animation: subs-lang-text-blink 3s ease-in-out infinite;
}
#btn-slots-toggle.opened {
    animation: none;
    opacity: 1;
}
/* Suppress all hover glow on slots toggle — text-only interaction */
#btn-slots-toggle:hover {
    border-color: var(--border) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transform: none !important;
    background: linear-gradient(180deg, #151520 0%, #0d0d14 100%) !important;
}

/* On-Air tally dot inside sec-head */
#mcr-on-air-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #252535;
    box-shadow: none;
    transition: background 0.3s, box-shadow 0.3s;
    flex-shrink: 0;
}
#mcr-on-air-dot.hot {
    background: #ff0055;
    box-shadow: 0 0 6px #ff0055, 0 0 14px rgba(255,0,85,0.5);
}

/* WS connection LED */
#mcr-ws-led {
    display: inline-block;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #303040;
    flex-shrink: 0;
    transition: background 0.3s, box-shadow 0.3s;
}
#mcr-ws-led.connected { background: #00ff88; box-shadow: 0 0 5px #00ff88; }
#mcr-ws-led.error     { background: #ff3333; box-shadow: 0 0 5px #ff3333; }

/* MCR sub-status strip */
#mcr-status {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    letter-spacing: 0.5px;
    color: #404050;
    transition: color 0.25s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#mcr-status.hot { color: #ff0055; text-shadow: 0 0 6px rgba(255,0,85,0.5); }


/* ── #transcription-hud — viewport overlay ─────────────────── */
#transcription-hud {
    position: fixed;
    bottom: 62px;           /* above #bottom-bar (55px) + breathing room */
    left: 208px;            /* just outside left sidebar (200px) */
    right: 208px;           /* just outside right sidebar (200px) */
    z-index: 4500;          /* above sidebars (4000), below bars (5000) */
    pointer-events: none;   /* VJ canvas clicks pass through */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 0 16px;
    /* Stealth Mode — hidden off-screen by default */
    transform: translateY(120%);
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
#transcription-hud.hud-active {
    transform: translateY(0);
    opacity: 1;
}

/* CRT scanline wash over the whole HUD */
#transcription-hud::before {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent,  transparent 2px,
        rgba(0,0,0,0.07) 2px, rgba(0,0,0,0.07) 4px
    );
    z-index: 10;
}

/* Primary English slot */
#hud-en {
    max-width: 700px;
    width: 100%;
    background: rgba(0,0,0,0.75);
    border: 1px solid rgba(0,243,255,0.15);
    border-left: 2px solid var(--accent);
    padding: 7px 16px 8px;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    position: relative;
}
.hud-en-label {
    font-size: 7px;
    letter-spacing: 2.5px;
    color: var(--accent);
    opacity: 0.55;
    text-transform: uppercase;
    margin-bottom: 3px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 600;
}
#hud-en-text {
    font-size: 15px;
    font-weight: 400;
    color: #e8e8ec;
    line-height: 1.45;
    min-height: 22px;
    letter-spacing: 0.2px;
    text-shadow: 0 1px 10px rgba(0,0,0,0.95);
}

/* Text slide-in when new segment arrives */
@keyframes hud-flash {
    0%   { opacity: 0; transform: translateY(4px); }
    100% { opacity: 1; transform: translateY(0); }
}
.hud-new { animation: hud-flash 0.22s ease-out both; }

/* Collapse HUD when in fullscreen VJ mode */
body.fullscreen #transcription-hud { pointer-events: none !important; } /* keep visible — subtitles must show in broadcast */

/* ── PODCAST TRAY — fixed bottom bar ─────────────────────────── */
#podcast-tray {
    display: none;
    position: fixed;
    bottom: 58px; left: 0;       /* above #bottom-bar */
    width: 100%;
    background: rgba(0,0,0,0.92);
    border-top: 1px solid #00ffcc;
    border-bottom: 1px solid rgba(0,243,255,0.08);
    z-index: 4800;
    padding: 6px 16px;
    box-sizing: border-box;
    flex-direction: row;
    gap: 10px;
    align-items: stretch;
}
#podcast-tray.visible { display: flex; }
.podcast-slot.off { display: none; }
.podcast-slot {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.podcast-slot-label {
    font-family: 'Orbitron', monospace;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #00ffcc;
    opacity: 0.7;
}
.podcast-slot-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: #e0ffe8;
    line-height: 1.4;
    min-height: 18px;
    text-shadow: 0 0 6px rgba(0,255,204,0.25);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.podcast-slot-text.flash { animation: hud-flash 0.22s ease-out both; }
.podcast-slot-text[dir="rtl"] { direction: rtl; text-align: right; }

/* ── #vanguard-subtitles — pro-broadcast subtitle bar ─────────── */
#vanguard-subtitles {
    position: fixed;
    bottom: 128px;          /* above #transcription-hud (62px base + ~60px height) */
    left: 0;
    width: 100%;
    z-index: 4900;          /* below #bottom-bar (5000), above sidebars */
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 24px 8px;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
#vanguard-subtitles.visible {
    opacity: 1;
    transform: translateY(0);
}
#vanguard-subtitles .sub-line {
    display: flex;
    align-items: baseline;
    gap: 10px;
    max-width: 900px;
    width: 100%;
    background: #000000aa;
    color: #00f3ff;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-align: center;
    text-transform: uppercase;
    line-height: 1.45;
    padding: 5px 16px;
    box-sizing: border-box;
    text-shadow: 0 0 12px rgba(0,243,255,0.6);
    min-height: 28px;
}
#vanguard-subtitles .sub-line:first-child {
    border-top: 1px solid rgba(0,243,255,0.2);
    padding-top: 7px;
}
#vanguard-subtitles .sub-line:last-child {
    padding-bottom: 7px;
}
#vanguard-subtitles .sub-line[dir="rtl"] {
    direction: rtl;
    text-align: right;
}
#vanguard-subtitles .sub-lang {
    font-size: 8px;
    letter-spacing: 2px;
    opacity: 0.5;
    flex-shrink: 0;
    min-width: 28px;
    font-family: 'Orbitron', monospace;
}
#vanguard-subtitles .sub-body {
    flex: 1;
}
/* ── Slot select dropdowns (POLYTRANSLATOR panel) ── */
.slot-grid {
    background: linear-gradient(180deg, #0a0a0f 0%, #060608 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-top: 2px solid rgba(0,243,255,0.18);
    border-radius: 6px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.04);
    display: flex; flex-direction: column; gap: 5px;
    /* collapsed by default */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    padding: 0 8px;
    transition: max-height 0.28s cubic-bezier(0.22,1,0.36,1),
                opacity 0.2s ease,
                margin-top 0.2s ease,
                padding 0.2s ease;
}
.slot-grid.open {
    max-height: 200px;
    opacity: 1;
    margin-top: 6px;
    padding: 8px 8px 10px;
}
.slot-row { display: flex; align-items: center; gap: 6px; }
.slot-lbl {
    font-size: 7px; letter-spacing: 2px; opacity: 0.45;
    min-width: 36px; font-family: 'Orbitron', monospace; color: #00f3ff;
}
.slot-select {
    flex: 1;
    background: linear-gradient(145deg, #111118 0%, #0c0c12 50%, #0f0f16 100%);
    color: #00f3ff;
    border: 2px solid #1c1c28;
    border-radius: 3px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; font-weight: 600;
    letter-spacing: 1px;
    padding: 4px 6px;
    outline: none; cursor: pointer;
    box-shadow: 2px 3px 8px rgba(0,0,0,0.95),
                0 1px 0 rgba(255,255,255,0.04),
                inset 0 3px 12px rgba(0,0,0,0.85),
                inset 0 -2px 6px rgba(255,255,255,0.025);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.slot-select:focus, .slot-select:hover {
    border-color: rgba(0,243,255,0.45);
    box-shadow: 2px 3px 8px rgba(0,0,0,0.95),
                0 0 8px rgba(0,243,255,0.15),
                inset 0 3px 12px rgba(0,0,0,0.85);
}
.slot-select option { background: #0a0a0f; color: #00f3ff; }

/* ── SYNC LED ── */
#sync-led {
    width: 4px; height: 4px; border-radius: 50%;
    background: #00f3ff;
    box-shadow: 0 0 4px #00f3ff;
    flex-shrink: 0;
    margin-left: auto;
    opacity: 0.25;
    transition: opacity 0.15s, box-shadow 0.15s;
    cursor: default;
}
#sync-led.blink {
    opacity: 1;
    box-shadow: 0 0 8px #00f3ff, 0 0 18px rgba(0,243,255,0.6);
    animation: led-pulse 1s ease-out forwards;
}
@keyframes led-pulse {
    0%   { opacity: 1; box-shadow: 0 0 8px #00f3ff, 0 0 18px rgba(0,243,255,0.6); }
    100% { opacity: 0.25; box-shadow: 0 0 4px #00f3ff; }
}

/* ── SAVE MODAL ── */
#save-modal {
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center;
}
#save-modal-inner {
    background: rgba(8,8,12,0.94);
    border: 1px solid rgba(0,243,255,0.25);
    border-radius: 3px;
    padding: 16px 18px;
    width: 220px;
    box-shadow: 0 0 30px rgba(0,243,255,0.1);
    display: flex; flex-direction: column; gap: 10px;
}
#save-modal-title {
    font-family: 'Orbitron', monospace; font-size: 9px; font-weight: 700;
    color: var(--accent); letter-spacing: 2px; text-align: center;
}
#save-modal-actions { display: flex; gap: 6px; }

/* ── WALLET SYNC HUD ── */
#wallet-sync-hud {
    position: fixed; bottom: 60px; right: 16px; z-index: 9998;
    width: 180px;
    background: rgba(8,8,12,0.94);
    border: 1px solid rgba(0,243,255,0.25);
    border-radius: 3px;
    padding: 10px;
    box-shadow: 0 0 20px rgba(0,243,255,0.1);
    display: none; flex-direction: column; gap: 8px;
    font-family: 'JetBrains Mono', monospace;
}
#wallet-sync-hud.visible { display: flex; }
#ipfs-sync-indicator {
    display: flex; align-items: center; gap: 6px;
    font-size: 8px; letter-spacing: 1px; color: var(--accent);
}
#ipfs-sync-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); flex-shrink: 0;
}
@keyframes ipfs-sync-pulse {
    0%,100% { box-shadow: 0 0 4px var(--accent); opacity: 1; }
    50%      { box-shadow: 0 0 12px var(--accent), 0 0 20px var(--accent); opacity: 0.55; }
}
#wallet-sync-hud.syncing #ipfs-sync-dot { animation: ipfs-sync-pulse 1s ease-in-out infinite; }
#wallet-sync-hud.synced  #ipfs-sync-dot { background: #00ff88; box-shadow: 0 0 8px #00ff88; }
#wallet-sync-hud.error   #ipfs-sync-dot { background: #ff4040; box-shadow: 0 0 8px #ff4040; }
#wallet-sync-hud.synced  #ipfs-sync-label { color: #00ff88; }
#wallet-sync-hud.error   #ipfs-sync-label { color: #ff4040; }
#wallet-sync-thumbnail {
    width: 100%; aspect-ratio: 16/9;
    border: 1px solid rgba(0,243,255,0.15);
    border-radius: 2px; overflow: hidden; display: none;
}
#wallet-sync-thumbnail.visible { display: block; }
#wallet-sync-thumbnail img {
    object-fit: contain; width: 100%; height: 100%; display: block;
}
#wallet-sync-cid {
    font-size: 7px; color: rgba(0,243,255,0.5);
    word-break: break-all; display: none;
}
#wallet-sync-cid.visible { display: block; }
#wallet-sync-dismiss {
    font-size: 7px; color: rgba(255,255,255,0.35);
    cursor: pointer; text-align: right; letter-spacing: 1px;
}
#wallet-sync-dismiss:hover { color: var(--accent); }

/* ── QR MODAL ── */
#qr-modal {
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex; align-items: center; justify-content: center;
}
#qr-modal-inner {
    background: rgba(8,8,12,0.92);
    border: 1px solid rgba(0,243,255,0.3);
    border-radius: 4px;
    padding: 20px;
    width: 280px;
    box-shadow: 0 0 40px rgba(0,243,255,0.15), inset 0 0 60px rgba(0,243,255,0.03);
    display: flex; flex-direction: column; gap: 12px;
}
#qr-modal-header {
    display: flex; flex-direction: column; gap: 4px;
}
#qr-modal-title {
    font-family: 'Orbitron', monospace; font-size: 10px; font-weight: 700;
    color: var(--accent); letter-spacing: 2px;
}
#qr-modal-cid-label {
    font-family: 'JetBrains Mono', monospace; font-size: 8px;
    color: rgba(0,243,255,0.5); word-break: break-all;
}
#qr-code-container {
    display: flex; justify-content: center;
    background: #fff; padding: 8px; border-radius: 2px;
}
#qr-code-container canvas, #qr-code-container img { display: block; }
#qr-url-display {
    font-family: 'JetBrains Mono', monospace; font-size: 7px;
    color: rgba(0,243,255,0.6); word-break: break-all;
    background: rgba(0,243,255,0.05); padding: 4px 6px;
    border: 1px solid rgba(0,243,255,0.1); border-radius: 2px;
}
#qr-modal-actions { display: flex; gap: 6px; }
#logo-gif-overlay {
    display: none !important; /* Never shown as DOM element — canvas drawImage is the sole visual source */
    pointer-events: none !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    z-index: 2500;
}

/* ═══ VNGRD SONIC SUITE — STUDIO SHELL ═══ */
/* ═══════════════════════════════════════════════════════════════════
   VNGRD//STUDIO — SONIC SUITE  DAW-grade styles
   ═══════════════════════════════════════════════════════════════════ */

/* ── Backdrop ───────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   VNGRD//STUDIO — Full DAW Layout
   Transport (top) → Instrument Rack (left) | Mixer + FX (right)
   No floating cards. No overlap. CSS Grid-driven.
   ═══════════════════════════════════════════════════════════════ */
#ss-backdrop {
    position: fixed; inset: 0; z-index: 4000;
    display: none; pointer-events: none;
    flex-direction: column;          /* transport top → workspace fills rest */
    background: rgba(1,4,9,.97);
    opacity: 0; transition: opacity .22s ease;
    font-family: 'JetBrains Mono', monospace;
}
/* Fine grid overlay */
#ss-backdrop::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image:
        linear-gradient(rgba(0,243,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,243,255,.018) 1px, transparent 1px);
    background-size: 48px 48px;
}
#ss-backdrop.visible { display: flex; pointer-events: auto; opacity: 1; }

/* Stealth / passthrough mode */
#ss-backdrop.stealth {
    background: transparent !important;
    pointer-events: none;
}
#ss-backdrop.stealth::before { display: none; }
#ss-backdrop.stealth #ss-master-bar { pointer-events: auto; }
#ss-backdrop.stealth .ss-card      { pointer-events: auto; }

/* ── Transport Bar — TOP of the DAW ─────────────────────────── */
#ss-master-bar {
    position: relative; z-index: 10;
    flex-shrink: 0;
    display: flex; align-items: center;
    height: 52px; padding: 0 12px; gap: 0;
    background: rgba(0,6,14,.98);
    border-bottom: 2px solid rgba(0,243,255,.3);
    box-shadow: 0 4px 24px rgba(0,0,0,.9), 0 1px 0 rgba(0,243,255,.08);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px; letter-spacing: 1px;
    color: rgba(0,243,255,.7);
    user-select: none;
    pointer-events: auto;
    overflow-x: auto; overflow-y: hidden;
}
/* Groups — logical sections within the bar */
.ss-mb-group {
    display: flex; align-items: center; gap: 6px;
    padding: 0 12px;
    flex-shrink: 0;
}
.ss-mb-sep {
    width: 1px; height: 28px; flex-shrink: 0;
    background: rgba(0,243,255,.14);
}
/* Brand */
.ss-mb-brand-group { padding-left: 4px; }
.ss-mb-brand {
    font-family: 'Orbitron', sans-serif;
    font-size: 9px; font-weight: 800; letter-spacing: 3px;
    color: rgba(0,243,255,.85);
}
.ss-mb-brand-sep { color: rgba(0,243,255,.3); }
/* BPM input */
.ss-mb-label {
    font-size: 6.5px; color: rgba(0,243,255,.38);
    letter-spacing: 2px; white-space: nowrap;
}
.ss-mb-bpm {
    width: 44px; height: 24px;
    background: rgba(0,0,0,.6); border: 1px solid rgba(0,243,255,.28);
    color: #00f3ff; font-family: 'JetBrains Mono', monospace; font-size: 12px;
    text-align: center; padding: 0; outline: none; border-radius: 2px;
}
.ss-mb-bpm::-webkit-inner-spin-button,
.ss-mb-bpm::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* All bar buttons */
.ss-mb-btn {
    height: 26px; padding: 0 9px; flex-shrink: 0;
    background: rgba(0,243,255,.04); border: 1px solid rgba(0,243,255,.22);
    color: rgba(0,243,255,.65); font-family: 'JetBrains Mono', monospace;
    font-size: 8px; font-weight: 600; letter-spacing: 1.5px;
    cursor: pointer; border-radius: 2px;
    transition: color .1s, border-color .1s, background .1s, box-shadow .1s;
    white-space: nowrap;
}
.ss-mb-btn:hover { color: #00f3ff; border-color: rgba(0,243,255,.6); background: rgba(0,243,255,.08); }
/* Transport-specific */
.ss-mb-play-btn { border-color: rgba(0,243,255,.35); }
.ss-mb-play-btn.playing { color: #ff5555; border-color: rgba(255,60,60,.6); background: rgba(255,40,40,.06); box-shadow: 0 0 10px rgba(255,60,60,.2); }
.ss-mb-stop-btn { border-color: rgba(255,140,0,.3); color: rgba(255,160,60,.7); }
.ss-mb-stop-btn:hover { border-color: rgba(255,140,0,.7); color: #ffaa30; background: rgba(255,140,0,.06); }
.ss-mb-rec-btn  { border-color: rgba(255,40,40,.35); color: rgba(255,100,100,.75); }
.ss-mb-rec-btn:hover { border-color: rgba(255,40,40,.8); color: #ff6060; background: rgba(255,40,40,.08); }
.ss-mb-rec-btn.playing { color: #ff3333; border-color: #ff3333; background: rgba(255,0,0,.14); box-shadow: 0 0 12px rgba(255,0,0,.35); animation: rec-pulse .9s ease-in-out infinite; }
@keyframes rec-pulse { 0%,100%{opacity:1;} 50%{opacity:.55;} }
.ss-mb-hide-btn { border-color: rgba(255,50,50,.25); color: rgba(255,100,100,.6); margin-left: 4px; }
.ss-mb-hide-btn:hover { border-color: rgba(255,50,50,.7); color: #ff6060; }
/* Canvas toggle active */
.ss-mb-btn.active { color: #00f3ff; border-color: rgba(0,243,255,.65); background: rgba(0,243,255,.1); box-shadow: 0 0 8px rgba(0,243,255,.2); }
/* Metro dots */
.ss-mb-metro { display: flex; gap: 5px; align-items: center; }
.ss-mb-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(0,243,255,.1); border: 1px solid rgba(0,243,255,.25);
    transition: background .06s, box-shadow .06s;
}
.ss-mb-dot.on          { background: #00f3ff; box-shadow: 0 0 8px rgba(0,243,255,.8); }
.ss-mb-dot.downbeat.on { background: #ff4444; box-shadow: 0 0 10px rgba(255,50,50,.8); }
/* Clock readout */
.ss-mb-clock-group { gap: 10px; }
.ss-mb-clock {
    display: inline-flex; flex-direction: column; align-items: center;
    font-family: 'JetBrains Mono', monospace; line-height: 1;
}
.ss-mb-clock-bar  { font-size: 13px; font-weight: 600; color: #00f3ff; letter-spacing: 2px; text-shadow: 0 0 8px rgba(0,243,255,.5); }
.ss-mb-clock-time { font-size: 8px; color: rgba(0,243,255,.42); letter-spacing: 1px; margin-top: 2px; }
/* VU meter canvas */
#ss-vu {
    border: 1px solid rgba(0,243,255,.18); border-radius: 2px;
    background: rgba(0,0,0,.55); flex-shrink: 0;
    align-self: center;
}
/* Sliders in master bar */
.ss-mb-slider { width: 72px; accent-color: #00f3ff; cursor: pointer; }
.ss-mb-slider-val { font-size: 8px; color: rgba(0,243,255,.6); min-width: 28px; }
/* Card toggle buttons */
.ss-mb-cardtoggles { display: flex; gap: 3px; padding: 0 4px; }
.ss-mb-ct {
    width: 24px; height: 24px; padding: 0;
    background: rgba(0,243,255,.05); border: 1px solid rgba(0,243,255,.25);
    color: rgba(0,243,255,.55); font-family: 'JetBrains Mono', monospace;
    font-size: 10px; font-weight: 700; cursor: pointer; border-radius: 2px;
    transition: all .1s;
}
.ss-mb-ct:hover { color: #00f3ff; border-color: rgba(0,243,255,.6); background: rgba(0,243,255,.1); }
.ss-mb-ct.muted { opacity: .28; text-decoration: line-through; }
.ss-mb-ct.focused { background: rgba(0,243,255,.2); color: #eafeff; border-color: #00f3ff; box-shadow: 0 0 8px rgba(0,243,255,.45); }

/* ── Workspace: relative container, cards float inside ── */
#ss-workspace {
    position: relative; z-index: 1;
    flex: 1; min-height: 0;
    overflow: hidden;
}

/* ═══ SONIC SUITE CARDS — DAW-grade instrument panels ═══ */

/* Accent colour variables per instrument */
.ss-card[data-card-id="mpc"]     { --acc: #00f3ff; --acc-rgb: 0,243,255;   --acc-dim: rgba(0,243,255,.18); }
.ss-card[data-card-id="bass303"] { --acc: #ff88ff; --acc-rgb: 255,136,255; --acc-dim: rgba(255,136,255,.16); }
.ss-card[data-card-id="xypad"]   { --acc: #ffb400; --acc-rgb: 255,180,0;   --acc-dim: rgba(255,180,0,.16); }
.ss-card[data-card-id="fxunit"]  { --acc: #aa44ff; --acc-rgb: 170,68,255;  --acc-dim: rgba(170,68,255,.16); }
.ss-card[data-card-id="mixer"]   { --acc: #00ff88; --acc-rgb: 0,255,136;   --acc-dim: rgba(0,255,136,.16); }

.ss-card {
    position: absolute;
    background: rgba(2,6,14,.96);
    border: 1px solid rgba(var(--acc-rgb,0,243,255),.14);
    border-top: 3px solid var(--acc, #00f3ff);
    border-left: 3px solid rgba(var(--acc-rgb,0,243,255),.55);
    border-radius: 4px;
    box-shadow: 0 8px 40px rgba(0,0,0,.85),
                0 0 0 0 transparent,
                inset 0 0 0 0 transparent;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    color: rgba(var(--acc-rgb, 0,243,255),.78);
    font-family: 'JetBrains Mono', monospace; font-size: 9px;
    display: flex; flex-direction: column;
    pointer-events: auto;
    overflow: hidden;
    transition: opacity .15s ease, box-shadow .2s ease, border-color .2s ease;
    min-width: 280px;
    resize: both;
    box-sizing: border-box;
}

/* Minimised = header-only */
.ss-card.minimised .ss-card-body { display: none; }
.ss-card.minimised { height: 36px !important; overflow: hidden !important; resize: none !important; }
.ss-card.focused {
    box-shadow: 0 16px 48px rgba(0,0,0,.95),
                0 0 0 1px rgba(var(--acc-rgb,0,243,255),.5),
                0 0 40px rgba(var(--acc-rgb,0,243,255),.18);
    border-left-color: var(--acc, #00f3ff);
    z-index: 100;
}
.ss-card:hover:not(.muted) {
    box-shadow: 0 10px 42px rgba(0,0,0,.9),
                0 0 0 1px rgba(var(--acc-rgb,0,243,255),.22),
                0 0 20px rgba(var(--acc-rgb,0,243,255),.07);
    border-left-color: rgba(var(--acc-rgb,0,243,255),.8);
}
.ss-card.muted { opacity: .42; }

/* ── Card header — drag handle ── */
.ss-card-head {
    display: flex; align-items: center;
    padding: 0 10px 0 8px;
    height: 36px; flex-shrink: 0;
    background: linear-gradient(180deg,
                rgba(var(--acc-rgb,0,243,255),.12) 0%,
                rgba(var(--acc-rgb,0,243,255),.04) 50%,
                rgba(0,0,0,0) 100%),
                rgba(0,5,12,.94);
    border-bottom: 1px solid rgba(var(--acc-rgb, 0,243,255),.2);
    cursor: grab;
    user-select: none; gap: 6px;
    position: relative;
}
.ss-card-head::after {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--acc, #00f3ff);
    opacity: 0;
    transition: opacity .15s;
}
.ss-card:hover .ss-card-head::after { opacity: .4; }
.ss-card.focused .ss-card-head::after { opacity: .9; }
.ss-card-head:active { cursor: grabbing; }

.ss-card-title {
    flex: 1;
    color: var(--acc, #00f3ff);
    font-family: 'Orbitron', sans-serif;
    font-size: 9px; font-weight: 700; letter-spacing: 2.5px;
    text-shadow: 0 0 16px rgba(var(--acc-rgb, 0,243,255),.6),
                 0 0 4px rgba(var(--acc-rgb, 0,243,255),.3);
}
.ss-card-tag {
    color: rgba(var(--acc-rgb, 0,243,255),.35);
    font-size: 6.5px; letter-spacing: 1px; margin-right: 5px;
}

/* ── Card action buttons (header + body) ── */
.ss-card-btn {
    height: 22px; min-width: 22px; margin-left: 2px; padding: 0 6px;
    background: rgba(var(--acc-rgb, 0,243,255),.04);
    border: 1px solid rgba(var(--acc-rgb, 0,243,255),.22);
    color: rgba(var(--acc-rgb, 0,243,255),.6);
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; font-weight: 700; letter-spacing: 1px;
    cursor: pointer; border-radius: 3px; white-space: nowrap;
    transition: color .1s, border-color .1s, background .1s, box-shadow .1s;
}
.ss-card-btn:hover {
    color: var(--acc, #00f3ff);
    border-color: rgba(var(--acc-rgb, 0,243,255),.65);
    background: rgba(var(--acc-rgb, 0,243,255),.1);
    box-shadow: 0 0 8px rgba(var(--acc-rgb, 0,243,255),.2);
}
/* Playing / active state — green glow, not red */
.ss-card-btn.playing {
    color: #00ff88;
    border-color: rgba(0,255,136,.7);
    background: rgba(0,255,136,.1);
    box-shadow: 0 0 10px rgba(0,255,136,.35);
}
/* Muted state */
.ss-card-btn.muted {
    color: #ff5555;
    border-color: rgba(255,60,60,.6);
    background: rgba(255,40,40,.1);
}
/* Focused/solo state */
.ss-card-btn.focused {
    color: #ffcc00;
    border-color: rgba(255,200,0,.7);
    background: rgba(255,200,0,.12);
    box-shadow: 0 0 8px rgba(255,200,0,.3);
}
.ss-card-btn.ss-card-play { min-width: 28px; }

/* ── Card body ── */
.ss-card-body {
    padding: 10px 12px;
    display: flex; flex-direction: column; gap: 7px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--acc-rgb,0,243,255),.2) transparent;
}
.ss-card-body::-webkit-scrollbar { width: 4px; }
.ss-card-body::-webkit-scrollbar-thumb { background: rgba(var(--acc-rgb,0,243,255),.2); border-radius: 2px; }

/* In side-panel zones: fill available height */
#ss-mixer-zone .ss-card-body,
#ss-fx-zone .ss-card-body {
    flex: 1; min-height: 0;
}
.ss-card-placeholder {
    padding: 22px 12px; text-align: center;
    color: rgba(var(--acc-rgb, 0,243,255),.28); font-size: 8px; letter-spacing: 2px;
}

/* ── Step sequencer ── */
/* Current-step playhead */
.ss-drums-step.cur {
    outline: 2px solid #00ff88 !important;
    outline-offset: -2px;
    background: rgba(0,255,136,.08) !important;
}
/* Selected/active step */
.mpc-active {
    outline: 2px solid var(--acc, #00f3ff) !important;
    outline-offset: -2px;
    box-shadow: inset 0 0 6px rgba(var(--acc-rgb, 0,243,255),.35);
}
/* Voice/row labels */
.mpc-lbl {
    font-size: 9px; color: rgba(var(--acc-rgb, 0,243,255),.55);
    letter-spacing: 1px; font-family: 'JetBrains Mono', monospace; white-space: nowrap;
}

/* Beat-group separators */
.ic-beat-sep    { border-left: 2px solid rgba(0,243,255,.4)   !important; }
.ic-beat-sep-b3 { border-left: 2px solid rgba(255,136,255,.4) !important; }
.ic-beat-sep-xy { border-left: 2px solid rgba(255,180,0,.4)   !important; }

/* Section divider inside a card body */
.ic-section {
    border-top: 1px solid rgba(255,255,255,.07);
    padding-top: 8px; margin-top: 5px;
}
/* Horizontal label above a group of controls */
.ic-group-lbl {
    font-size: 7.5px; letter-spacing: 2px; color: rgba(255,255,255,.3);
    font-family: 'JetBrains Mono', monospace;
    margin-bottom: 4px;
}

/* Per-voice mute button in MPC */
.ic-mute { width:18px !important; height:18px !important; font-size:8px !important; padding:0 !important; }
.ic-mute.on { color: #ff5555 !important; border-color: rgba(255,60,60,.7) !important; background: rgba(255,40,40,.12) !important; }

/* ── BEAT FORGE — live pad grid ── */
.bf-live-pad {
    flex: 1; min-width: 0;
    height: 52px;
    background: rgba(var(--acc-rgb, 0,243,255),.06);
    border: 1px solid rgba(var(--acc-rgb, 0,243,255),.22);
    border-radius: 4px;
    cursor: pointer;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px; font-weight: 700; letter-spacing: 1px;
    color: rgba(var(--acc-rgb, 0,243,255),.65);
    transition: background .06s, box-shadow .06s, border-color .06s;
    user-select: none;
}
.bf-live-pad:hover {
    background: rgba(var(--acc-rgb, 0,243,255),.12);
    border-color: rgba(var(--acc-rgb, 0,243,255),.5);
}
.bf-live-pad:active,
.bf-live-pad.flash {
    background: rgba(var(--acc-rgb, 0,243,255),.28) !important;
    border-color: var(--acc, #00f3ff) !important;
    box-shadow: 0 0 14px rgba(var(--acc-rgb, 0,243,255),.55), inset 0 0 8px rgba(var(--acc-rgb, 0,243,255),.2) !important;
    color: var(--acc, #00f3ff) !important;
}
.bf-live-pad .bf-pad-name { font-size: 8px; letter-spacing: 1.5px; }
.bf-live-pad .bf-pad-note { font-size: 6.5px; color: rgba(var(--acc-rgb, 0,243,255),.4); letter-spacing: 1px; }

@keyframes bf-flash {
    0%   { filter: brightness(2.2) saturate(1.6); }
    100% { filter: brightness(1) saturate(1); }
}
.bf-live-pad.bf-pad-flash { animation: bf-flash .1s ease-out forwards !important; }

/* ═══ VNGRD SONIC SUITE LAUNCHER (sidebar, between SFX and HAND SYNTH) ═══ */
#vt-sonic-rack { margin-top: 6px; position: relative; }
#vt-sonic-launch-btn {
    display: block; width: 100%; padding: 6px 4px;
    font-family: 'Orbitron', sans-serif; font-size: 7.5px; font-weight: 700; letter-spacing: 2px;
    color: rgba(0,243,255,.7);
    background: rgba(0,8,12,.55);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0,243,255,.25);
    border-top: 1px solid rgba(255,255,255,.16);
    border-left: 1px solid rgba(255,255,255,.09);
    border-radius: 2px; cursor: pointer; text-align: center; transition: all .16s ease;
}
#vt-sonic-launch-btn:hover { color: #00f3ff; box-shadow: 0 0 14px rgba(0,243,255,.22); }
#vt-sonic-launch-btn.active {
    color: #00f3ff; background: rgba(0,18,30,.85);
    border-top-color: rgba(0,243,255,.7); border-left-color: rgba(0,243,255,.32);
    box-shadow: 0 0 20px rgba(0,243,255,.25), inset 0 0 12px rgba(0,243,255,.07);
    text-shadow: 0 0 10px rgba(0,243,255,.65);
}
#vt-sonic-status {
    font-size: 6.5px; color: rgba(0,243,255,.32); letter-spacing: 1px;
    text-align: center; padding: 3px 0;
    font-family: 'JetBrains Mono', monospace;
}
#vt-sonic-status.live { color: rgba(0,255,136,.72); }




/* Per-pad kill button — custom pads only, bottom-right (away from gear at top-right) */
.pad-xclear {
    position: absolute; bottom: -16px; right: 2px;
    font-size: 5px; line-height: 1; padding: 1px 3px;
    background: transparent; border: 1px solid rgba(255,51,51,0.2);
    color: rgba(255,51,51,0.4); cursor: pointer;
    font-family: 'JetBrains Mono', monospace; letter-spacing: 0;
    z-index: 50; transition: all 0.1s; border-radius: 2px;
    opacity: 0;
}
.sfx-pad:hover .pad-xclear { opacity: 1; }
.pad-xclear:hover { background: rgba(255,51,51,0.2); color: #ff4444; border-color: rgba(255,51,51,0.6); }

/* Per-pad mute M — all pads, floats BELOW pad boundary (outside tap zone) */
.pad-mute {
    position: absolute; bottom: -16px; left: 2px;
    font-size: 6px; font-weight: 900; line-height: 1; padding: 1px 3px;
    background: transparent; border: 1px solid rgba(255,200,0,0.18);
    color: rgba(255,200,0,0.3); cursor: pointer;
    font-family: 'Orbitron', sans-serif; letter-spacing: 0;
    z-index: 50; transition: all 0.1s; border-radius: 2px;
    opacity: 0;
}
.sfx-pad:hover .pad-mute { opacity: 1; }
.pad-mute:hover { background: rgba(255,200,0,0.1); color: rgba(255,200,0,0.9); border-color: rgba(255,200,0,0.5); }
/* Muted state — M stays lit amber; content is visually quieted */
.sfx-pad.pad-muted { border-color: rgba(255,200,0,0.4) !important; }
.sfx-pad.pad-muted .pad-mute {
    opacity: 1 !important;
    color: #ffcc00 !important;
    border-color: rgba(255,200,0,0.65) !important;
    background: rgba(255,200,0,0.1) !important;
    text-shadow: 0 0 5px rgba(255,200,0,0.65);
}
.sfx-pad.pad-muted .pad-name { opacity: 0.3 !important; }
.sfx-pad.pad-muted .pad-lcd  { opacity: 0.1 !important; }

/* ─── NLE SEAM TRACK (canvas-integrated, no floating panel) ─── */
/* Cursor override when hovering seam zones */
#stage.seam-hover { cursor: col-resize !important; }

/* ─────────────────────────────────────────────────────────────────────────── */
/* VOICE_LAB  //  SYNESTHESIA VOICE ENGINE                                    */
/* ─────────────────────────────────────────────────────────────────────────── */
.sve-mood-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
}
.sve-mood-btn {
    font-family: 'Orbitron', sans-serif;
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 5px 2px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    color: var(--text-dim);
    cursor: pointer;
    text-align: center;
    transition: all 0.18s;
    text-transform: uppercase;
}
.sve-mood-btn:hover { color: var(--text-bright); border-color: var(--accent); background: rgba(0,243,255,0.06); }
.sve-mood-btn.active-mode { color: var(--accent); border-color: var(--accent); background: rgba(0,243,255,0.12); box-shadow: 0 0 5px rgba(0,243,255,0.2); }
#sve-mood-monster.active-mode { color: #ff4444; border-color: #ff4444; background: rgba(255,60,60,0.1); box-shadow: 0 0 5px rgba(255,60,60,0.25); }
#sve-mood-ghost.active-mode   { color: var(--v); border-color: var(--v); background: rgba(176,0,255,0.1); box-shadow: 0 0 5px rgba(176,0,255,0.25); }
#sve-gender-F.active-mode     { color: #ff69b4; border-color: #ff69b4; background: rgba(255,105,180,0.1); }
#sve-render-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.sve-ctrl-row { display: flex; gap: 4px; }
.sve-ctrl-row .btn { flex: 1; font-size: 8px; letter-spacing: 1px; }