body { margin: 0; overflow: hidden; background-color: #000; font-family: 'Quicksand', sans-serif; color: white; cursor: none; }
        /* Bottom HUD (#ui-layer): one value for reserve space so DJ decks sit above the bar */
        :root {
            --ui-bottom-hud-inner: clamp(46px, 5.6vh, 70px);
            --ui-bottom-hud-clearance: calc(var(--ui-bottom-hud-inner) + env(safe-area-inset-bottom, 0px));
        }
		/* Tiled start-screen GIF: hidden until load/decode, then fades in over 1.2s
		   (see revealStartScreenAfterAssets). The transition only runs after all
		   start GIFs resolve, so the user sees a clean black → tiled-gif ramp. */
		#pta-start-bg {
			position: fixed;
			inset: 0;
			z-index: 0;
			pointer-events: none;
			background-color: #000;
			background-image: url('../assets/gifs/pta.gif');
			background-repeat: repeat;
			background-position: top left;
			background-size: auto;
			opacity: 0;
			transition: opacity 1.2s ease-in-out;
			will-change: opacity;
		}
		#pta-start-bg.pta-visible {
			opacity: 1;
		}
		/* Ensure Quicksand applies across the UI */
		*, *::before, *::after { font-family: 'Quicksand', sans-serif !important; }
        
        /* Layout */
        #canvas-container { 
            position: absolute; top: 0; left: 0;
            width: 100vw; height: 100vh; 
            overflow: hidden;
            z-index: 1;
        }

        
        canvas {
            display: block;
            width: 100%;
            height: 100%;
        }
        
        /* UI Overlays */
        #overlay {
			position: absolute; top: 0; left: 0; width: 100vw; height: 100vh;
            background: rgba(0,0,0,0.95);
            display: flex; flex-direction: column; justify-content: center; align-items: center;
            z-index: 100; transition: opacity 0.5s; backdrop-filter: blur(10px);
            cursor: default;
        }
		/* Lighter overlay when background GIF is present so it doesn't look too dark */
		#overlay.bg-lite {
			background: rgba(0,0,0,0.4);
		}
		/* Disable backdrop blur when tiling pta.gif to keep it crisp */
		#overlay.no-blur {
			backdrop-filter: none !important;
			-webkit-backdrop-filter: none !important;
		}
		/* Overlay border glow (random color set via --glowColor) */
		#overlay.glow-on {
			box-shadow: inset 0 0 60px var(--glowColor, #66ccff), 0 0 120px var(--glowColor, #66ccff);
			animation: borderGlow 2400ms ease-in-out infinite alternate;
			position: relative; /* allow border frame layering */
			border-radius: 70px; /* more rounded corners as requested */
		}
		/* Volume slider (top-center, fades like other overlays) */
		#volume-slider-container {
			position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
			width: 80vw; height: 32px;
			display: none; /* hidden on start overlay; shown after playback starts */
			align-items: center; justify-content: center; z-index: 80;
			pointer-events: auto; opacity: 1; transition: opacity 1s ease-in-out;
		}
		#volume-slider {
			-webkit-appearance: none; appearance: none; width: 100%; height: 14px;
			background: rgba(255,255,255,0.08); /* almost transparent track */
			cursor: pointer; border-radius: 7px;
		}
		/* Thumb */
		#volume-slider::-webkit-slider-thumb {
			-webkit-appearance: none; appearance: none;
			width: 56px; height: 56px; border-radius: 50%;
			background: transparent url('../assets/images/vol.png') center center / 100% 100% no-repeat;
			border: none;
			margin-top: -21px;
		}
		#volume-slider::-moz-range-thumb {
			width: 56px; height: 56px; border-radius: 50%;
			background: transparent url('../assets/images/vol.png') center center / 100% 100% no-repeat;
			border: none;
		}
		/* Full-screen rounded border frame over everything */
		#border-frame {
			/* Offset by half the stroke so it extends inside and outside evenly */
			/* Push slightly further to ensure full edge coverage */
			position: fixed; top: -22.5px; left: -22.5px; right: -22.5px; bottom: -22.5px;
			/* Use a repeating GIF around the edge instead of solid black */
			border: 45px solid transparent;
			border-image-source: url('../assets/gifs/tap.gif');
			border-image-slice: 45;
			border-image-repeat: round;
			border-radius: 55px;
			/* variables for curved dissolve */
			--frameOuter: 55px;       /* matches border-radius */
			--frameStroke: 45px;      /* matches border width */
			--dissolve: 10px;         /* inner fade thickness */
			--innerR: calc(var(--frameOuter) - var(--frameStroke)); /* inner corner radius */
			--overlap: 10px;          /* push dissolve outward by a few more pixels */
			--cornerSpan: calc(var(--innerR) + var(--dissolve) + var(--overlap)); /* span consumed by corner */
			box-sizing: border-box;
			pointer-events: none;
			z-index: 100000; /* ensure frame sits above overlay glow */
			opacity: 0;
			transition: opacity 600ms ease;
		}
		#border-frame.visible { opacity: 1; }
		/* Curved inner dissolve at the inside edge of the frame */
		#border-frame::after {
			content: none; /* remove dissolve overlay */
		}
		/* Corner seam cover: solid black caps to guarantee no color gap shows */
		#border-frame::before {
			content: none; /* remove seam caps when dissolve is disabled */
		}
		@keyframes borderGlow {
			0% { box-shadow: inset 0 0 24px var(--glowColor, #66ccff), 0 0 40px var(--glowColor, #66ccff); }
			100% { box-shadow: inset 0 0 90px var(--glowColor, #66ccff), 0 0 160px var(--glowColor, #66ccff); }
		}
		/* OMNI logo shimmer */
		#logo-omni {
			color: transparent !important; /* ensure background-clip shows through */
			position: relative; display: inline-block;
			font-weight: 700;
			letter-spacing: 10px;
			text-transform: uppercase;
			margin-bottom: 0px; /* minimal gap below title */
			font-size: clamp(96px, 18vw, 280px); /* doubled size */
			text-shadow: 0 0 20px rgba(255,255,255,0.15), 0 0 24px var(--glowColor, rgba(102,204,255,0.6)), 0 0 48px var(--glowColor, rgba(102,204,255,0.35));
			opacity: 0;
			transition: opacity 1.2s ease-in-out;
			will-change: opacity;
		}
		#logo-omni.pat-revealed {
			opacity: 1;
		}
		/* Per-letter pattern fill. pat.gif is preloaded in <head>; the parent
		   #logo-omni stays hidden until the gif decodes, then the whole word
		   ("OMNI>" + clipped pat.gif texture + caret) fades in together over 1.2s.
		   Keeping the letters themselves at opacity:1 avoids the ">" caret pulse
		   fighting a per-letter opacity transition. */
		#logo-omni .logo-letter {
			display: inline-block;
			position: relative;
			isolation: isolate;
			color: transparent;
			-webkit-text-fill-color: transparent;
			-webkit-background-clip: text;
			background-clip: text;
			background-image: url('../assets/gifs/pat.gif');
			background-repeat: no-repeat; /* reuse but do not tile */
			background-position: center center;
			background-size: cover; /* fill the glyph area */
			--omni-letter-border: rgba(255, 255, 255, 0.65);
			opacity: 1;
		}
		@media (prefers-reduced-motion: reduce) {
			#logo-omni {
				transition: none;
			}
		}
		/*
		  Hover halo follows glyph curves: duplicate character behind with text-stroke + slight scale.
		  Random stroke colour from JS (--omni-letter-border).
		*/
		#logo-omni .logo-letter::before {
			content: attr(data-ch);
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -52%) scale(1.09);
			transform-origin: center center;
			font: inherit;
			font-weight: inherit;
			line-height: 1;
			text-transform: inherit;
			letter-spacing: 0;
			color: transparent;
			-webkit-text-fill-color: transparent;
			background: none !important;
			-webkit-background-clip: unset !important;
			background-clip: unset !important;
			-webkit-text-stroke-width: clamp(2px, 0.042em, 8px);
			-webkit-text-stroke-color: var(--omni-letter-border, rgba(255, 255, 255, 0.85));
			paint-order: stroke fill;
			pointer-events: none;
			opacity: 0;
			transition: opacity 0.55s ease-out;
			z-index: -1;
		}
		/* Pulse scale while hovered (opacity stays 1) so outline fades out smoothly on mouseleave */
		#logo-omni .logo-letter.omni-letter-hover-active::before {
			opacity: 1;
			animation: omniLetterContourPulse 1.35s ease-in-out infinite;
		}
		@keyframes omniLetterContourPulse {
			0%, 100% { transform: translate(-50%, -52%) scale(1.055); }
			50% { transform: translate(-50%, -52%) scale(1.115); }
		}
		/* Pulse the start-screen “>” caret (click starts radio).
		   The pulse is gated behind `.pat-revealed` AND deferred by the same 3s
		   `animation-delay` as the texture-fill fade so the caret participates
		   in the OMNI fade-in instead of slamming straight to opacity:1 from
		   the 0% keyframe (which otherwise wins over our base .logo-letter
		   `opacity: 0` and made `>` appear before the rest of the word). */
		#logo-omni.pat-revealed .logo-letter.logo-start {
			animation: omniCaretPulse 1.15s ease-in-out 1.2s infinite;
		}
		@keyframes omniCaretPulse {
			0%, 100% {
				opacity: 1;
				transform: translateX(0) scale(1);
				filter: brightness(1);
			}
			50% {
				opacity: 0.82;
				transform: translateX(4px) scale(1.08);
				filter: brightness(1.22);
			}
		}
		@media (prefers-reduced-motion: reduce) {
			#logo-omni .logo-letter.omni-letter-hover-active::before {
				animation: none;
				opacity: 0.88;
			}
			/* Match the pat-revealed selector specificity above so the caret
			   pulse stays off for reduced-motion users (a plain
			   `#logo-omni .logo-letter.logo-start` rule would have lower
			   specificity than the gated rule and lose). */
			#logo-omni.pat-revealed .logo-letter.logo-start {
				animation: none;
			}
		}
		#logo-omni.logo-animate {
			animation: omniShimmer 1400ms ease forwards;
		}
		/* Persistent glow pulse around OMNI */
		#logo-omni.logo-glow {
			animation: logoGlow 2400ms ease-in-out infinite alternate;
		}
		@keyframes logoGlow {
			0% { text-shadow: 0 0 3px rgba(255,255,255,0.2), 0 0 8px var(--glowColor, #66ccff), 0 0 16px var(--glowColor, #66ccff); }
			100% { text-shadow: 0 0 16px rgba(255,255,255,0.4), 0 0 36px var(--glowColor, #66ccff), 0 0 76px var(--glowColor, #66ccff); }
		}
		@keyframes omniShimmer {
			0% { transform: translateY(8px) scale(0.98); color: var(--omniColor, #66ccff); text-shadow: 0 0 0 var(--omniColor, #66ccff); }
			35% { transform: translateY(0) scale(1.0); color: var(--omniColor, #66ccff); text-shadow: 0 0 16px var(--omniColor, #66ccff), 0 0 28px var(--omniColor, #66ccff); }
			70% { color: #dfefff; text-shadow: 0 0 10px rgba(255,255,255,0.5); }
			100% { color: #ffffff; text-shadow: 0 0 0 rgba(255,255,255,0); }
		}
        /* Digital transition when starting visuals */
        #overlay.digital-out {
            animation: digitalOut 520ms ease forwards;
        }
        @keyframes digitalOut {
            0% { opacity: 1; transform: none; filter: none; }
            15% { transform: translateY(-2px) skewX(-2deg); filter: contrast(120%) saturate(110%); }
            30% { transform: translateY(1px) skewX(2deg); filter: contrast(140%) saturate(120%); }
            55% { opacity: 0.6; transform: translateY(-1px) skewX(-1deg); }
            75% { opacity: 0.25; transform: translateY(0) skewX(0deg); filter: contrast(160%) saturate(130%); }
            100% { opacity: 0; transform: none; filter: none; }
        }

        #ui-layer {
            position: absolute; bottom: 0; left: 0; width: 100%;
            min-height: 0;
            display: flex; justify-content: space-between; align-items: center;
            padding: 2px clamp(12px, 3vw, 40px) max(0px, env(safe-area-inset-bottom, 0px));
            box-sizing: border-box;
            /* Shorter fade so less black blocks the canvas behind the bar */
            background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.35) 55%, transparent 100%);
            background-size: 100% min(100%, 72px);
            background-repeat: no-repeat;
            background-position: bottom center;
            z-index: 50;
            transition: opacity 1s ease-in-out;
            opacity: 1;
        }
        html.ui-hud-at-top #ui-layer {
            top: 0;
            bottom: auto;
            padding: max(0px, env(safe-area-inset-top, 0px)) clamp(12px, 3vw, 40px) 2px;
            background: linear-gradient(to bottom, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.35) 55%, transparent 100%);
            background-position: top center;
        }

        /* Center Control Group */
        .center-controls {
            display: flex; align-items: center; justify-content: center;
            gap: clamp(8px, 2vw, 24px); 
            flex-wrap: nowrap;
            flex: 1 1 auto;
            min-width: 0; /* allow shrinking */
        }

        /* Interactive Elements */
        .interactive { pointer-events: auto; cursor: pointer; }

        h1 { font-weight: 200; letter-spacing: 8px; text-transform: uppercase; margin-bottom: 30px; text-shadow: 0 0 20px rgba(255,255,255,0.2); text-align: center; }

        .control-group {
            display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; justify-content: center;
        }

        .btn-main {
            padding: 15px 30px; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.05); color: #fff;
            font-size: 13px; text-transform: uppercase; letter-spacing: 2px; transition: 0.3s;
            border-radius: 4px; min-width: 150px;
        }
        .btn-main:hover { background: #fff; color: #000; box-shadow: 0 0 20px rgba(255,255,255,0.4); border-color: #fff; }

        /* Secondary Icon Buttons (Fullscreen / Skip) */
        .icon-btn {
            background: transparent; border: none; color: rgba(255,255,255,0.6);
            font-size: clamp(18px, 2.5vw, 28px); padding: 10px; transition: 0.2s; display: flex; align-items: center;
        }
        .icon-btn:hover { color: #fff; transform: scale(1.2); text-shadow: 0 0 10px #fff; }
        /* Enlarge bottom bar icon buttons specifically */
        .center-controls .icon-btn {
            font-size: clamp(22px, 3vw, 32px);
            padding: 6px 8px;
            -webkit-tap-highlight-color: transparent;
        }
        /* Remove persistent blue focus ring on Chrome for bottom bar buttons */
        .center-controls .icon-btn:focus,
        .center-controls .icon-btn:focus-visible {
            outline: none !important;
            box-shadow: none !important;
        }
        .center-controls .icon-btn::-moz-focus-inner {
            border: 0;
        }
        /* Precise hitbox for the WebM close (✕) button */
        #btn-webm-close {
            width: 32px; height: 32px;
            display: inline-flex; align-items: center; justify-content: center;
            padding: 0; line-height: 1; font-size: 20px;
            cursor: pointer; user-select: none;
        }

        .radio-input {
			padding: 15px; background: rgba(0,0,0,0.5); border: 2px solid rgba(255,20,147,1.0); color: #0f0; 
			width: 320px; border-radius: 14px; box-shadow: 0 0 18px rgba(255,20,147,0.9), 0 0 3px rgba(255,20,147,0.85);
			transition: box-shadow 220ms ease, border-color 220ms ease;
		}
		.radio-input:focus {
			outline: none; border-color: rgba(255,20,147,1.0);
			box-shadow: 0 0 24px rgba(255,20,147,0.95), 0 0 6px rgba(255,20,147,0.9);
        }

        /* Navigation Arrows (bottom HUD prev/next only — keep compact so the bar stays low) */
        .nav-btn {
            font-size: clamp(36px, 6vw, 64px); opacity: 0.3; transition: 0.3s; user-select: none; padding: clamp(10px, 2vh, 20px);
        }
        #ui-layer > .nav-btn {
            font-size: clamp(22px, 3.8vw, 40px);
            padding: clamp(2px, 0.8vh, 8px) clamp(6px, 1.5vw, 14px);
            flex-shrink: 0;
            align-self: center;
        }
        .nav-btn:hover { opacity: 1; text-shadow: 0 0 15px #fff; transform: scale(1.1); }

        #mode-info { 
            text-align: center; 
            min-width: 0; 
            white-space: nowrap; 
            overflow: hidden; 
            text-overflow: ellipsis; 
            flex: 1 1 auto;
            touch-action: manipulation;
            user-select: none;
        }
        #mode-title { 
            font-size: clamp(16px, 2vw, 26px); 
            font-weight: 600; 
            display: inline; 
            letter-spacing: 2px; 
            margin-right: 8px; 
            color: #f2ecff;
            text-shadow: 0 0 12px rgba(180, 160, 255, 0.45), 0 0 10px rgba(0, 0, 0, 0.5);
        }
		#mode-sub { 
			font-size: clamp(16px, 2vw, 26px); 
			color: #5ee8c8;
			letter-spacing: 2px; 
			display: inline; 
			text-shadow: 0 0 12px rgba(40, 220, 180, 0.4), 0 0 10px rgba(0, 0, 0, 0.45);
		}

        .hidden { opacity: 0 !important; pointer-events: none; }
        .display-none { display: none !important; }
        
		/* Start-screen loader — same ring style as Digital Radio AI video loader */
		#start-loader {
			position: fixed;
			inset: 0;
			z-index: 102;
			display: none;
			align-items: center;
			justify-content: center;
			pointer-events: none;
			background: rgba(0, 0, 0, 0.35);
		}
		#start-loader.is-visible {
			display: flex;
		}
		.start-loader-shell {
			position: relative;
			display: grid;
			place-items: center;
			--shell-size: clamp(108px, 24vw, 136px);
			width: var(--shell-size);
			height: var(--shell-size);
			/* Ring midline: 14% inset → 72% diameter, minus half the 3px stroke */
			--orbit-radius: calc(var(--shell-size) * 0.36 - 1.5px);
			isolation: isolate;
		}
		.start-loader-ring {
			position: absolute;
			inset: 14%;
			box-sizing: border-box;
			border-radius: 50%;
			border: 3px solid rgba(0, 200, 255, 0.18);
			border-top-color: #8ef;
			border-right-color: #b060ff;
			box-shadow:
				0 0 12px rgba(0, 220, 255, 0.45),
				0 0 22px rgba(176, 96, 255, 0.25);
			animation: start-loader-spin 0.9s linear infinite;
			pointer-events: none;
		}
		.start-loader-orbit-spin {
			position: absolute;
			inset: 0;
			animation: start-loader-orbit-spin 16s linear infinite;
			pointer-events: none;
		}
		.start-loader-phrase {
			position: absolute;
			inset: 0;
			opacity: var(--phrase-opacity, 0);
			transition: opacity 0.15s ease;
			--phrase-color: #9ffcff;
			--phrase-glow: #00e8ff;
		}
		.start-loader-phrase.is-active {
			opacity: var(--phrase-opacity, 1);
		}
		.start-loader-char {
			position: absolute;
			left: 50%;
			top: 50%;
			margin: 0;
			padding: 0;
			font-family: 'Audiowide', 'Orbitron', 'Electrolize', 'Share Tech Mono', sans-serif;
			font-size: clamp(10px, 2.65vw, 13px);
			font-weight: 700;
			line-height: 1;
			letter-spacing: 0.02em;
			color: var(--phrase-color, #9ffcff);
			text-shadow:
				0 0 4px color-mix(in srgb, var(--phrase-glow) 90%, transparent),
				0 0 10px color-mix(in srgb, var(--phrase-glow) 70%, transparent),
				0 0 18px color-mix(in srgb, var(--phrase-glow) 45%, transparent);
			transform:
				translate(-50%, -50%)
				rotate(var(--char-angle, 0deg))
				translateY(calc(-1 * var(--orbit-radius)))
				rotate(var(--char-upright, 210deg));
			transform-origin: center center;
			user-select: none;
			will-change: transform;
		}
		#start-loader .start-loader-pct {
			position: absolute;
			width: 1px;
			height: 1px;
			padding: 0;
			margin: -1px;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			white-space: nowrap;
			border: 0;
		}
		.visually-hidden {
			position: absolute;
			width: 1px;
			height: 1px;
			padding: 0;
			margin: -1px;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			white-space: nowrap;
			border: 0;
		}
		@keyframes start-loader-spin {
			to { transform: rotate(360deg); }
		}
		@keyframes start-loader-orbit-spin {
			to { transform: rotate(360deg); }
		}
		#loading-status { color: #39ff14; margin-top: 6px; font-size: 12px; height: 20px; transition: opacity 0.6s ease; }
		#overlay #loading-status:empty { display: none; margin: 0; height: 0; }
		#shortcuts-status { 
			color: #ff1493; margin-top: 8px; font-size: 12px; min-height: 18px; 
			white-space: pre-line; text-align: center;
			position: absolute; left: 50%; transform: translateX(-50%);
			pointer-events: none; width: 86vw; max-width: 1200px; line-height: 1.35;
			overflow: hidden; /* ensure at most 3 lines visible */
			transition: opacity 0.6s ease;
		}
		/* Toggleable URL input (now sits below the title, reserves space) */
		#url-flyover {
			position: static; left: auto; transform: none;
			z-index: auto;
			margin-top: 8px;
			display: flex; align-items: center; justify-content: center;
			min-height: 56px; /* reserve space so title stays centered */
			opacity: 1; transition: opacity 260ms ease;
		}
		#url-flyover.is-hidden {
			opacity: 0; pointer-events: none;
		}

        /* Quick Radio Button (Top-right) */
        #radio-quick {
            position: absolute; 
            top: 14px; 
            right: 14px;
            z-index: 80;
            width: 80px; height: 80px;
            background-color: transparent;
            background-image: url('../assets/images/radio.png');
            background-repeat: no-repeat;
            background-position: center center;
            background-size: contain;
            border: none;
            cursor: pointer;
            user-select: none;
            transition: opacity 1s ease-in-out;
        }
        #radio-quick:hover {
            filter: brightness(1.15);
        }
		/* Hide the radio quick button whenever the start overlay is visible */
		#overlay:not(.hidden) ~ #radio-quick { 
			display: none !important; 
		}
		/* Top bar container to align volume and radio buttons */
		#top-bar {
			position: fixed; top: 10px; left: 14px; right: 14px;
			display: none; z-index: 80;
			display: flex; align-items: center; justify-content: center;
			pointer-events: auto; opacity: 1; transition: opacity 1s ease-in-out;
		}
		/* Radio quick - large top-right button */
		#top-bar #radio-quick {
			position: absolute !important; right: 14px; top: 0;
			width: 80px !important; height: 80px !important;
			background-size: contain !important;
		}
		/* Center the volume slider and ensure it doesn't overlap the right button */
		#top-bar #volume-slider-container {
			position: absolute; left: 50%; transform: translateX(-50%);
			width: calc(100% - 140px); max-width: 80vw; height: 64px;
			display: flex; align-items: center; justify-content: center;
			min-width: 360px;
		}
        /* UI Options (bottom HUD, after ⌨️) */
        .center-controls #btn-options {
            position: static;
            width: auto;
            height: auto;
            min-width: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: none;
            border-radius: 0;
            backdrop-filter: none;
            font-size: clamp(22px, 3vw, 32px);
            padding: 6px 8px;
            opacity: 1;
            pointer-events: auto;
        }
        .center-controls #btn-options:hover { filter: brightness(1.15); }
        .options-lock-btn.on {
            color: #e8c86a;
            border-color: rgba(212, 175, 55, 0.65);
            box-shadow: 0 0 14px rgba(212, 175, 55, 0.28);
        }
        /* Shield to block interactions when locked */
        #ui-lock-shield {
            position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            z-index: 140; /* above panels, below top menu (>=150) */
            background: transparent;
            display: none;
            pointer-events: auto;
        }
        #ui-lock-shield.active { display: block; }
        /* Hide lock button/shield on start overlay (before playback) */
        #overlay:not(.hidden) ~ #ui-layer #btn-options,
        #overlay:not(.hidden) ~ #ui-lock-shield {
            display: none !important;
        }
        
        /* Shuffle Toggle (Top-left) */
        #shuffle-toggle {
            position: absolute; 
            top: clamp(24px, 12vh, 140px); 
            left: 14px;
            z-index: 80;
            width: 80px; height: 80px;
            display: flex; align-items: center; justify-content: center;
            background: rgba(0,0,0,0.5);
            color: rgba(255,255,255,0.9);
            border: 1px solid rgba(255,255,255,0.18);
            border-radius: 6px;
            cursor: pointer;
            user-select: none;
            backdrop-filter: blur(6px);
            transition: opacity 1s ease-in-out, filter 0.2s;
            font-size: 36px;
        }
        #shuffle-toggle:hover { filter: brightness(1.15); }
        #shuffle-toggle.shuffle-on {
            border: 1px solid rgba(212,175,55,0.6);
            box-shadow: 0 0 16px rgba(212,175,55,0.25);
        }

        /* Radio Panel */
        #radio-panel {
            position: absolute; top: 54px; right: 14px;
            width: 360px; max-height: 60vh; overflow: auto;
            z-index: 90;
            background: rgba(0,0,0,0.8);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 8px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.6);
            backdrop-filter: blur(8px);
            transition: opacity 1s ease-in-out;
        }
        #radio-panel h3 {
            margin: 0; padding: 12px 14px; font-weight: 500; font-size: 14px;
            border-bottom: 1px solid rgba(255,255,255,0.12);
            letter-spacing: 1px; text-transform: uppercase; color: #ddd;
        }
        #radio-list { padding: 8px; }
        .radio-item {
            padding: 10px 12px; margin: 6px 0; border-radius: 6px;
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.12);
            cursor: pointer; transition: 0.15s;
            display: flex; align-items: center; justify-content: space-between;
            font-size: 13px;
        }
        .radio-item:hover {
            background: rgba(255,255,255,0.15);
            border-color: rgba(255,255,255,0.4);
            box-shadow: 0 0 20px rgba(255,255,255,0.08) inset;
        }
        .radio-item.active {
            border-color: #d4af37;
            box-shadow: 0 0 0 2px rgba(212,175,55,0.3) inset, 0 0 16px rgba(212,175,55,0.15);
            background: rgba(212,175,55,0.08);
        }

        /* Text-In sliding panel (left) */
        #textin-panel {
            position: absolute; top: 0; left: 0;
            width: 50vw; max-width: 50vw; height: 100vh; overflow: hidden;
            z-index: 90;
            background: rgba(0,0,0,0.85);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 0 10px 10px 0;
            box-shadow: 0 10px 30px rgba(0,0,0,0.6);
            backdrop-filter: blur(8px);
            transform: translateX(-110%);
            transition: transform 0.35s ease, opacity 0.4s ease;
            opacity: 0;
            display: flex; flex-direction: column;
        }
        #textin-panel.open {
            transform: translateX(0);
            opacity: 1;
        }
        #textin-panel h3 {
            margin: 0; padding: 12px 14px; font-weight: 500; font-size: 14px;
            border-bottom: 1px solid rgba(255,255,255,0.12);
            letter-spacing: 1px; text-transform: uppercase; color: #ddd;
            display:flex; align-items:center; justify-content:space-between;
        }
        #textin-content { padding: 12px 12px 36px; display: grid; grid-template-columns: 1fr; gap: 12px; flex: 1; overflow: auto; box-sizing: border-box; }
        .textin-row { display:flex; gap:10px; align-items:flex-start; flex-wrap: wrap; }
        .textin-col { display:flex; gap:10px; }
        .textin-label { width: 88px; flex-shrink: 0; font-size:12px; color:#bbb; padding-top: 8px; }
        .textin-field-grow {
            flex: 1;
            min-width: min(100%, 220px);
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        /* Grid keeps the track in column 1 and the checkbox in column 2 — flex + slider-col
           (only absolutely positioned ranges) could collapse or paint under the checkbox. */
        .textin-slider-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 12px;
            flex: 1;
            min-width: 0;
            width: 100%;
        }
        .textin-slider-row .slider-col {
            min-width: 0;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }
        .textin-slider-row > .textin-check-label {
            justify-self: end;
        }
        .textin-row--borderglow {
            align-items: center;
            flex-wrap: wrap;
        }
        .textin-row--borderglow .textin-label {
            padding-top: 0;
        }
        .textin-borderglow-line {
            display: flex;
            flex: 1;
            min-width: min(100%, 160px);
            align-items: center;
            gap: 10px;
            flex-wrap: nowrap;
        }
        .textin-borderglow-line .textin-slider-row {
            flex: 1 1 0;
            min-width: 0;
            width: auto;
        }
        .textin-borderglow-line .textin-color,
        .textin-borderglow-line .btn-mini,
        .textin-borderglow-line > .textin-check-label {
            flex-shrink: 0;
        }
        .textin-font-color-group {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px 10px;
        }
        .textin-row--font .textin-select {
            flex: 1 1 160px;
            min-width: 140px;
            max-width: 100%;
        }
        .textin-row--font {
            align-items: center;
        }
        .textin-row--font .textin-label {
            padding-top: 0;
        }
        .textin-row--inline {
            align-items: center;
        }
        .textin-row--inline .textin-label {
            padding-top: 0;
        }
        .textin-row--flash {
            align-items: center;
            flex-wrap: wrap;
        }
        .textin-row--flash .textin-label {
            padding-top: 0;
        }
        .textin-flash-line {
            display: flex;
            flex: 1;
            min-width: min(100%, 200px);
            align-items: center;
            gap: 10px;
            flex-wrap: nowrap;
        }
        .textin-flash-line > .textin-check-label {
            flex-shrink: 0;
        }
        .textin-flash-line .textin-field-grow {
            flex: 1;
            min-width: 0;
        }
        .textin-check-label {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            color: #bbb;
            cursor: pointer;
            user-select: none;
        }
        .textin-input, .textin-select, .textin-color, .textin-range {
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.2);
            color: #fff; border-radius: 6px; padding: 10px 12px; font-size: 13px;
        }
        .textin-input { width: 100%; font-family: inherit; }
        .textin-select { min-width: 160px; }
        .textin-color { padding: 4px; height: 36px; width: 48px; }
        .textin-range { width: 100%; height: 36px; }
        .textin-btn {
            padding: 10px 16px; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.05); color: #fff;
            font-size: 12px; text-transform: uppercase; letter-spacing: 1px; transition: 0.2s;
            border-radius: 6px;
        }
        .textin-btn:hover { background: #fff; color: #000; }
        #textin-panel #btn-textin-close {
            border: 1px solid rgba(255,255,255,0.3);
            background: rgba(255,255,255,0.05);
            border-radius: 6px;
            padding: 10px 14px;
            font-size: 18px;
            line-height: 1;
            color: rgba(255,255,255,0.9);
        }
        #textin-panel #btn-textin-close:hover {
            background: #fff;
            color: #000;
            transform: none;
            text-shadow: none;
        }
        #ti-auto.on {
            background: #FFD700;
            color: #000;
            border-color: #FFD700;
            box-shadow: 0 0 10px rgba(255, 215, 0, 0.55), 0 0 18px rgba(255, 215, 0, 0.25) inset;
            font-weight: 700;
        }
        #ti-auto.on:hover {
            background: #fff48a;
            color: #000;
            border-color: #fff48a;
        }
        .textin-num {
            width: 72px;
            padding: 10px 8px;
            border: 1px solid rgba(255,255,255,0.25);
            background: rgba(255,255,255,0.06);
            color: #fff; border-radius: 6px; font-size: 12px;
            box-sizing: border-box;
            line-height: 1.2;
        }
        .slider-col { position: relative; flex: 1; min-height: 30px; padding-bottom: 6px; box-sizing: content-box; }
        /* All three handles (min, current, max) share the same visual track line */
        .slider-col .main-range { position: absolute; inset: 0; height: 16px; z-index: 2; }
        .slider-col .range-sub { position: absolute; inset: 0; pointer-events: auto; display: none; }
        .slider-col .range-sub .sub-range { position: absolute; inset: 0; height: 16px; background: transparent; z-index: 3; }
        .btn-mini {
            padding: 4px 8px; border: 1px solid rgba(255,255,255,0.3);
            background: rgba(255,255,255,0.06); color: #fff; border-radius: 6px;
            font-size: 11px; line-height: 1; cursor: pointer;
        }
        .btn-mini:hover { background: rgba(255,255,255,0.18); }
        #textin-content .textin-row:first-of-type {
            align-items: center;
        }
        #textin-content .textin-row:first-of-type .textin-label {
            padding-top: 0;
        }
        #textin-content .textin-row > .textin-input {
            flex: 1 1 200px;
            min-width: 0;
        }
        #textin-preview-wrap {
            border: 1px dashed rgba(255,255,255,0.2);
            border-radius: 8px; padding: 14px; min-height: 80px;
            display:flex; align-items:center; justify-content:center;
            background: rgba(0,0,0,0.3);
            margin-bottom: 18px;
        }
        #textin-preview {
            pointer-events: none; user-select: none;
            white-space: pre-wrap; text-align: center;
        }
        /* FORCE CROSSFADER IMAGE HANDLE */
/* Updated to target #mix-panel so it works in the header too */

#mix-panel .mix-crossfader-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 56px;
    display: flex;
    align-items: center;
    --cross-x: 0;
    --cross-deck-a: rgba(208, 18, 18, 0.6);
    --cross-deck-b: rgba(30, 26, 77, 0.6);
    --cross-thumb-half: 28px;
}

#mix-panel .mix-crossfader-wrap::before {
    content: '';
    position: absolute;
    left: var(--cross-thumb-half);
    right: var(--cross-thumb-half);
    top: 50%;
    height: 14px;
    transform: translateY(-50%);
    border-radius: 7px;
    border: 1px solid rgba(212, 175, 55, 0.9);
    box-sizing: border-box;
    background: linear-gradient(
        to right,
        var(--cross-deck-b) 0%,
        var(--cross-deck-b) calc(var(--cross-x) * 100%),
        var(--cross-deck-a) calc(var(--cross-x) * 100%),
        var(--cross-deck-a) 100%
    );
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.45), 0 0 10px rgba(212, 175, 55, 0.28);
    pointer-events: none;
}

#mix-panel #mix-crossfader {
    -webkit-appearance: none;
    appearance: none;
    height: 14px !important; /* Match volume track height */
    position: relative;
    z-index: 1;
    background: transparent !important;
    box-shadow: none;
    border: none;
    opacity: 1;
}

/* Chrome / Edge / Safari */
#mix-panel #mix-crossfader::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 56px !important;
    height: 56px !important;
    background: transparent url('../assets/images/vol.png') center center / 100% 100% no-repeat !important;
    border: none !important;
    border-radius: 50%;
    margin-top: -21px !important; /* Centers the 56px thumb on the 14px track */
    box-shadow: none !important;
}

/* Firefox */
#mix-panel #mix-crossfader::-moz-range-thumb {
    width: 56px !important;
    height: 56px !important;
    background: transparent url('../assets/images/vol.png') center center / 100% 100% no-repeat !important;
    border: none !important;
    border-radius: 50%;
    box-shadow: none !important;
}

/* Remove the "filled" progress bar effect on Firefox */
#mix-panel #mix-crossfader::-moz-range-progress {
    background: transparent !important;
}
        /* Overlay layer for rising texts */
        #text-overlay-layer {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            z-index: 45; pointer-events: none;
        }
        .rising-text {
            position: absolute; left: 50%; transform: translate(-50%, 0);
            will-change: transform, opacity, text-shadow, filter;
            white-space: pre;
        }
        /* Mic / MIDI confirm modals */
        #mic-confirm,
        #midi-confirm {
            position: fixed; inset: 0; z-index: 140;
            background: rgba(0,0,0,0.6);
            display: none;
            align-items: center; justify-content: center;
            backdrop-filter: blur(6px);
        }
        #mic-confirm .panel,
        #midi-confirm .panel {
            background: rgba(0,0,0,0.9);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.6);
            min-width: 320px; max-width: 90vw;
            padding: 18px;
            color: #fff;
            text-align: center;
        }
        #mic-confirm .title,
        #midi-confirm .title {
            font-size: 16px; margin-bottom: 10px; letter-spacing: 1px;
        }
        #mic-confirm .desc,
        #midi-confirm .desc {
            font-size: 12px; color: #bbb; margin-bottom: 14px;
        }
        #mic-confirm .actions,
        #midi-confirm .actions { display: flex; gap: 10px; justify-content: center; }
        #mic-confirm .btn,
        #midi-confirm .btn {
            padding: 10px 16px; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.05); color: #fff;
            font-size: 12px; text-transform: uppercase; letter-spacing: 1px; transition: 0.2s;
            border-radius: 6px; cursor: pointer;
        }
        #mic-confirm .btn:hover,
        #midi-confirm .btn:hover { background: #fff; color: #000; }

        /* Mix Settings Panel (Moved to Bottom) */
#mix-panel {
    position: fixed; bottom: 0; left: 0; right: 0;
    width: 100%; max-width: 100%; height: 50vh; overflow: hidden;
    z-index: 120;
    background: rgba(0,0,0,0.85);
    border-top: 1px solid rgba(255,255,255,0.2);
    border-radius: 10px 10px 0 0;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    transform: translateY(100%);
    transition: transform 0.35s ease, opacity 0.4s ease;
    opacity: 0; display:flex; flex-direction:column;
}
#mix-panel.open { transform: translateY(0); opacity: 1; }
        /* Keyboard shortcuts sheet (HUD ⌨️ button) */
        #keyboard-shortcuts-panel {
            position: fixed; bottom: 0; left: 0; right: 0;
            width: 100%; max-height: min(58vh, 520px);
            z-index: 125;
            background: rgba(8, 8, 12, 0.94);
            border-top: 1px solid rgba(255,255,255,0.22);
            border-radius: 12px 12px 0 0;
            box-shadow: 0 -12px 36px rgba(0,0,0,0.55);
            backdrop-filter: blur(10px);
            transform: translateY(100%);
            transition: transform 0.35s ease, opacity 0.35s ease;
            opacity: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        #keyboard-shortcuts-panel.open {
            transform: translateY(0);
            opacity: 1;
        }
        #keyboard-shortcuts-panel h3 {
            margin: 0;
            padding: 12px 14px;
            font-weight: 500;
            font-size: 14px;
            border-bottom: 1px solid rgba(255,255,255,0.12);
            letter-spacing: 1px;
            text-transform: uppercase;
            color: #ddd;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-shrink: 0;
        }
        #keyboard-shortcuts-body {
            padding: 12px 14px 16px;
            overflow-y: auto;
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }
        .kbd-board-wrap {
            font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
        }
        .kbd-board-title {
            font-size: 11px;
            color: #888;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            margin-bottom: 8px;
        }
        .kbd-row {
            display: flex;
            gap: 5px;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 6px;
        }
        .kbd-key {
            min-width: 30px;
            padding: 7px 6px 5px;
            border-radius: 6px;
            border: 1px solid rgba(255,255,255,0.2);
            background: rgba(255,255,255,0.05);
            color: #888;
            font-size: 13px;
            font-weight: 600;
            text-align: center;
            line-height: 1.1;
            box-shadow: 0 2px 0 rgba(0,0,0,0.35);
        }
        .kbd-key.kbd-lit {
            border-color: rgba(57, 255, 20, 0.65);
            background: rgba(57, 255, 20, 0.1);
            color: #e8ffe8;
        }
        /* Avatar / WebM overlay keys (neon pink) */
        .kbd-key.kbd-lit-avatar {
            border-color: rgba(255, 45, 170, 0.9);
            background: rgba(255, 45, 170, 0.14);
            color: #ffe8f4;
            box-shadow: 0 0 14px rgba(255, 45, 170, 0.4), 0 2px 0 rgba(0, 0, 0, 0.35);
        }
        .kbd-key.kbd-lit-avatar .kbd-hint {
            color: #ffb8e4;
        }
        /* Deck B — QUEUE / VIDEO / KARAOKE (neon purple) */
        .kbd-key.kbd-lit-deckb {
            border-color: rgba(186, 85, 255, 0.92);
            background: rgba(140, 70, 255, 0.16);
            color: #f4e8ff;
            box-shadow: 0 0 14px rgba(170, 90, 255, 0.45), 0 2px 0 rgba(0, 0, 0, 0.35);
        }
        .kbd-key.kbd-lit-deckb .kbd-hint {
            color: #d4b8ff;
        }
        /* Top menu / Mixer (neon red) */
        .kbd-key.kbd-lit-hot {
            border-color: rgba(255, 65, 105, 0.92);
            background: rgba(255, 55, 95, 0.14);
            color: #ffeef2;
            box-shadow: 0 0 14px rgba(255, 65, 105, 0.42), 0 2px 0 rgba(0, 0, 0, 0.35);
        }
        .kbd-key.kbd-lit-hot .kbd-hint {
            color: #ffb0c4;
        }
        /* Sample pad keys (1..0) — neon blue, unified across both decks so the row
           reads as one logical block ("samples") regardless of which deck each .wav
           triggers. */
        .kbd-key.kbd-lit-sample {
            border-color: rgba(80, 180, 255, 0.92);
            background: rgba(80, 180, 255, 0.13);
            color: #e6f4ff;
            box-shadow: 0 0 14px rgba(80, 180, 255, 0.45), 0 2px 0 rgba(0, 0, 0, 0.35);
        }
        .kbd-key.kbd-lit-sample .kbd-hint {
            color: #b3dcff;
        }
        /* Standalone neon-colour variants used to spotlight specific keys outside
           the semantic groups above (e.g. Space, B, N, L). Glow values mirror the
           14px halo + 2px ground-shadow pattern shared by every lit variant. */
        .kbd-key.kbd-lit-yellow {
            border-color: rgba(255, 230, 60, 0.92);
            background: rgba(255, 230, 60, 0.13);
            color: #fffbe0;
            box-shadow: 0 0 14px rgba(255, 230, 60, 0.45), 0 2px 0 rgba(0, 0, 0, 0.35);
        }
        .kbd-key.kbd-lit-yellow .kbd-hint {
            color: #ffec9a;
        }
        .kbd-key.kbd-lit-pink {
            border-color: rgba(255, 60, 180, 0.92);
            background: rgba(255, 60, 180, 0.14);
            color: #ffe8f4;
            box-shadow: 0 0 14px rgba(255, 60, 180, 0.45), 0 2px 0 rgba(0, 0, 0, 0.35);
        }
        .kbd-key.kbd-lit-pink .kbd-hint {
            color: #ffb8e4;
        }
        .kbd-key.kbd-lit-purple {
            border-color: rgba(186, 85, 255, 0.92);
            background: rgba(140, 70, 255, 0.16);
            color: #f4e8ff;
            box-shadow: 0 0 14px rgba(170, 90, 255, 0.45), 0 2px 0 rgba(0, 0, 0, 0.35);
        }
        .kbd-key.kbd-lit-purple .kbd-hint {
            color: #d4b8ff;
        }
        .kbd-key.kbd-lit-orange {
            border-color: rgba(255, 140, 30, 0.92);
            background: rgba(255, 140, 30, 0.13);
            color: #fff1e0;
            box-shadow: 0 0 14px rgba(255, 140, 30, 0.45), 0 2px 0 rgba(0, 0, 0, 0.35);
        }
        .kbd-key.kbd-lit-orange .kbd-hint {
            color: #ffc99b;
        }
        /* Dark neon blue — deeper / more saturated than the light .kbd-lit-sample
           pad blue so the two read as distinct families (samples vs. spotlight). */
        .kbd-key.kbd-lit-darkblue {
            border-color: rgba(60, 90, 255, 0.92);
            background: rgba(50, 70, 230, 0.18);
            color: #e0e6ff;
            box-shadow: 0 0 14px rgba(60, 90, 255, 0.5), 0 2px 0 rgba(0, 0, 0, 0.35);
        }
        .kbd-key.kbd-lit-darkblue .kbd-hint {
            color: #a8b8ff;
        }
        .kbd-key.kbd-wide { min-width: 120px; flex: 1; max-width: 200px; }
        .kbd-key.kbd-arrow { min-width: 36px; font-size: 15px; }
        .kbd-key.kbd-esc-lead { margin-right: 10px; }
        .kbd-hint {
            display: block;
            font-size: 8px;
            font-weight: 400;
            color: #9abd9a;
            margin-top: 3px;
            line-height: 1.15;
            max-width: 72px;
            word-break: break-word;
        }
        .kbd-key:not(.kbd-lit):not(.kbd-lit-avatar):not(.kbd-lit-deckb):not(.kbd-lit-hot):not(.kbd-lit-sample):not(.kbd-lit-yellow):not(.kbd-lit-pink):not(.kbd-lit-purple):not(.kbd-lit-orange):not(.kbd-lit-darkblue) .kbd-hint { color: #555; }
        /* Sample-pad icon shown above the cap on the 1..0 row so each key visually
           advertises the .wav it triggers (e.g. "FX3" for FX3.wav). Styled like a
           mini sample pad in neon blue so it reads as an icon rather than label text. */
        .kbd-sample-icon {
            display: block;
            font-size: 9px;
            font-weight: 700;
            line-height: 1;
            padding: 3px 4px;
            margin: 0 auto 4px;
            border-radius: 5px;
            background: linear-gradient(180deg, rgba(80, 180, 255, 0.32), rgba(40, 130, 220, 0.18));
            color: #e0eeff;
            border: 1px solid rgba(80, 180, 255, 0.65);
            box-shadow: 0 0 8px rgba(80, 180, 255, 0.32), inset 0 1px 0 rgba(190, 220, 255, 0.18);
            letter-spacing: 0.3px;
            max-width: 64px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55);
        }
        .kbd-shortcut-groups {
            display: grid;
            gap: 12px;
            font-size: 12px;
            color: #ccc;
        }
        .kbd-group h4 {
            margin: 0 0 6px;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.6px;
            text-transform: uppercase;
            color: #9aa;
        }
        .kbd-group ul {
            margin: 0;
            padding-left: 18px;
            line-height: 1.55;
        }
        .kbd-note {
            font-size: 11px;
            color: #777;
            line-height: 1.45;
            padding-top: 4px;
            border-top: 1px solid rgba(255,255,255,0.08);
        }
        #mix-panel h3 {
            margin: 0; padding: 12px 14px; font-weight: 500; font-size: 14px;
            border-bottom: 1px solid rgba(255,255,255,0.12);
            letter-spacing: 1px; text-transform: uppercase; color: #ddd;
            display:flex; align-items:center; justify-content:space-between;
        }
        #mix-content { 
            padding: 12px; 
            display: flex; 
            flex-direction: column; 
            gap: 12px; 
            flex: 1; 
            overflow: auto; 
            justify-content: flex-start; /* Stacks items at the top */
        }
        /* EQ rotaries: 50% larger than base .knob-wrap (32→48px). Only column width follows; eq-col gap, strip padding, eq-divider margins unchanged */
        #mix-panel .eq-strip .eq-col {
            width: 48px;
        }
        #mix-panel .eq-strip .knob-wrap {
            width: 48px;
            height: 48px;
        }
        #mix-effects { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 3px; }
        /* Generic Mix Panel buttons (Play B, BPM row, etc.): btn.png only — no xim.gif */
        #mix-panel .btn {
            padding: 6px 12px;
            border: 1px solid rgba(255,255,255,0.25);
            background: rgba(255,255,255,0.08);
            color: #fff;
            border-radius: 6px;
            cursor: pointer;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.2s ease;
            background-image: url('../assets/images/btn.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        #mix-panel .btn:hover {
            background: rgba(217,2,45,0.1);
            color: #f5d20f;
            box-shadow: 0 0 10px rgba(255,255,255,0.15);
            border-color: rgba(245,210,15,0.3);
            background-image: url('../assets/images/btn.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        /* Mixer FX grid only (Low-pass … FLANGER / NO VOCAL): btn.png over xim.gif */
        #mix-effects .btn {
            position: relative;
            overflow: hidden;
            padding: 10px;
            border: 1px solid rgba(255,0,0,0.25);
            background-color: rgba(0,0,0,0.25);
            background-image: url('../assets/images/btn.png'), url('../assets/gifs/xim.gif');
            background-position: center, center;
            background-repeat: no-repeat, no-repeat;
            background-size: 100% 100%, 100% 100%;
            color: #fff;
            border-radius: 6px;
            font-size: 14px;
            text-shadow: 0 0 4px rgba(0,0,0,0.8), 0 0 10px rgba(0,0,0,0.6);
        }
        #mix-effects .btn.on {
            border-color: rgba(255, 55, 72, 0.65);
            box-shadow: 0 0 12px rgba(255, 45, 60, 0.22) inset, 0 0 14px rgba(255, 40, 55, 0.18);
            background-color: rgba(255, 35, 55, 0.08);
            background-image: url('../assets/images/btn.png'), url('../assets/gifs/xim.gif');
            background-position: center, center;
            background-repeat: no-repeat, no-repeat;
            background-size: 100% 100%, 100% 100%;
            color: #ff2a3d;
            text-shadow:
                0 0 10px rgba(255, 55, 70, 0.95),
                0 0 20px rgba(255, 35, 50, 0.45),
                0 0 4px rgba(0, 0, 0, 0.9),
                0 0 10px rgba(0, 0, 0, 0.55);
        }
        #mix-effects .btn.sample-playing {
            color: #FFD700;
            text-shadow: 0 0 6px rgba(255, 215, 0, 0.45), 0 0 4px rgba(0,0,0,0.85), 0 0 10px rgba(0,0,0,0.55);
            background-image: url('../assets/images/btn.png'), url('../assets/gifs/xim.gif');
            background-position: center, center;
            background-repeat: no-repeat, no-repeat;
            background-size: 100% 100%, 100% 100%;
        }
        #mix-effects .btn:hover {
            background-color: rgba(217,2,45,0.1);
            color: #f5d20f;
            box-shadow: 0 0 10px rgba(255,255,255,0.15);
            border-color: rgba(245,210,15,0.3);
            background-image: url('../assets/images/btn.png'), url('../assets/gifs/xim.gif');
            background-position: center, center;
            background-repeat: no-repeat, no-repeat;
            background-size: 100% 100%, 100% 100%;
        }
        #mix-effects .btn.on:hover {
            color: #ff5063;
            border-color: rgba(255, 80, 95, 0.75);
            box-shadow: 0 0 14px rgba(255, 55, 70, 0.28) inset, 0 0 18px rgba(255, 45, 60, 0.22);
            background-color: rgba(255, 45, 60, 0.1);
            text-shadow:
                0 0 12px rgba(255, 75, 88, 0.95),
                0 0 22px rgba(255, 50, 65, 0.5),
                0 0 4px rgba(0, 0, 0, 0.9),
                0 0 10px rgba(0, 0, 0, 0.55);
            background-image: url('../assets/images/btn.png'), url('../assets/gifs/xim.gif');
            background-position: center, center;
            background-repeat: no-repeat, no-repeat;
            background-size: 100% 100%, 100% 100%;
        }
        /* BPM scope row */
        #mix-bpm-row {
            display: flex;
            align-items: center;
            gap: 4px;
            margin: 2px 0 10px;
            min-width: 0;
        }
        #mix-bpm-row #mix-scope-stack {
            order: 2;
            flex: 1 1 auto;
        }
        #mix-bpm-row #mix-bpm-legend {
            order: 3;
        }
        #mix-bpm-row:not(.is-digital-hub-mounted) .mix-bpm-controls {
            display: contents;
        }
        #mix-bpm-row:not(.is-digital-hub-mounted) #mix-bpm-a { order: 1; }
        #mix-bpm-row:not(.is-digital-hub-mounted) #mix-bpm-b { order: 4; }
        #mix-bpm-row:not(.is-digital-hub-mounted) #mix-bpm-grid { order: 5; }
        #mix-bpm-row:not(.is-digital-hub-mounted) #mix-bpm-tap-a { order: 6; }
        #mix-bpm-row:not(.is-digital-hub-mounted) #mix-bpm-tap-b { order: 7; }
        #mix-bpm-row:not(.is-digital-hub-mounted) #mix-bpm-nudge-bm { order: 8; }
        #mix-bpm-row:not(.is-digital-hub-mounted) #mix-bpm-nudge-bp { order: 9; }
        #mix-bpm-a, #mix-bpm-b {
            flex: 0 0 auto;
        }
        #mix-scope-stack {
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            min-width: 0;
            height: 44px;
            gap: 2px;
        }
        .mix-scope-wrap {
            position: relative;
            flex: 1 1 50%;
            min-height: 0;
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.18);
            border-radius: 6px;
            overflow: hidden;
        }
        .mix-scope-wrap--a {
            border-color: rgba(0, 255, 255, 0.22);
        }
        .mix-scope-wrap--b {
            border-color: rgba(255, 0, 255, 0.22);
        }
        .mix-scope-wrap canvas {
            width: 100%;
            height: 100%;
            display: block;
        }
        #mix-bpm-legend {
            flex: 0 0 auto; display: grid; gap: 2px; font-size: 11px; color: #ccc;
            min-width: 84px;
        }
        #mix-bpm-legend .row { display: flex; align-items: center; gap: 6px; }
        .legend-dot {
            width: 10px; height: 10px; border-radius: 50%;
            display: inline-block;
        }
        .legend-a { background: #00ffff; box-shadow: 0 0 8px rgba(0,255,255,0.6); }
        .legend-b { background: #ff00ff; box-shadow: 0 0 8px rgba(255,0,255,0.6); }
       
        /* Optional: Hover effect to brighten the image */
        #mix-b-play:hover,
        #mix-b-stop:hover {
            filter: brightness(1.2);
            border-color: rgba(217,2,45,0.2);
            cursor: pointer;
        }
        .status-row { display:flex; align-items:center; gap:8px; font-size:12px; color:#bbb; }
        .status-dot {
            width: 10px; height: 10px; border-radius: 50%;
            background: rgba(255,255,255,0.3);
            box-shadow: 0 0 0 0 rgba(0,0,0,0);
            transition: background 0.2s, box-shadow 0.2s;
        }
        /* Options Panel (center card, fade in/out; semi-translucent shell, opaque text) */
        #options-panel {
            position: fixed; inset: 0; display: none; place-items: center; z-index: 180;
            opacity: 0; transition: opacity 0.35s ease;
            pointer-events: none;
        }
        #options-panel.show { display: grid; opacity: 1; pointer-events: auto; }
        #options-modal {
            width: min(92vw, 420px);
            max-height: min(82vh, 640px);
            background: rgba(8, 16, 32, 0.58);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(120, 200, 255, 0.28);
            border-radius: 14px;
            box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
            position: relative;
            display: grid;
            grid-template-rows: auto minmax(0, 1fr);
            overflow: hidden;
            pointer-events: auto;
        }
        #options-head {
            padding: 12px 14px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.12);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            color: #f2f6ff;
            font-size: 14px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            font-weight: 700;
        }
        #options-body {
            overflow: auto;
            padding: 12px 14px 16px;
            color: #eef4ff;
            scrollbar-width: thin;
            scrollbar-color: rgba(0, 0, 0, 0.58) transparent;
        }
        #options-body::-webkit-scrollbar {
            width: 10px;
        }
        #options-body::-webkit-scrollbar-track {
            background: transparent;
        }
        #options-body::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.58);
            border-radius: 8px;
        }
        #options-body::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 0, 0, 0.72);
        }
        .options-section + .options-section {
            margin-top: 14px;
            padding-top: 12px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        .options-section-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 10px;
        }
        .options-section-head .options-section-title {
            margin: 0;
            flex: 1;
            min-width: 0;
        }
        .options-section-title {
            margin: 0 0 10px;
            font-size: 11px;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: #9fdcff;
            font-weight: 700;
        }
        .options-section-reset {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            padding: 0;
            border-radius: 6px;
            border: 1px solid rgba(120, 200, 255, 0.28);
            background: rgba(8, 28, 52, 0.55);
            color: #dff4ff;
            font-size: 14px;
            line-height: 1;
            cursor: pointer;
            transition: background 0.15s, border-color 0.15s, transform 0.08s;
        }
        .options-section-reset:hover {
            background: rgba(18, 48, 82, 0.82);
            border-color: rgba(120, 200, 255, 0.5);
        }
        .options-section-reset:active {
            transform: scale(0.94);
        }
        .options-upload-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px;
        }
        .options-import-export-row {
            margin-top: 8px;
        }
        .options-import-export-row .options-btn--compact {
            flex: 1 1 0;
            min-width: 7rem;
        }
        .options-file-input {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }
        .options-btn--compact {
            width: auto;
            min-width: 0;
            margin-top: 0;
            padding: 6px 10px;
            font-size: 11px;
        }
        .options-subsection-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin: 10px 0 6px;
        }
        .options-subsection-head .options-subsection-title {
            margin: 0;
            flex: 1;
            min-width: 0;
        }
        .options-subsection-title {
            margin: 10px 0 6px;
            font-size: 10px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: rgba(180, 220, 255, 0.82);
            font-weight: 600;
        }
        /* Neon section / subsection titles for visual grouping */
        #options-panel .options-section--tone-gold .options-section-title {
            color: #ffe566;
            text-shadow:
                0 0 6px rgba(255, 229, 102, 0.95),
                0 0 14px rgba(255, 210, 70, 0.72),
                0 0 24px rgba(255, 180, 40, 0.42);
        }
        #options-panel .options-section--tone-magenta .options-section-title {
            color: #ff7df2;
            text-shadow:
                0 0 6px rgba(255, 92, 232, 0.95),
                0 0 14px rgba(220, 70, 255, 0.75),
                0 0 24px rgba(180, 50, 255, 0.45);
        }
        #options-panel .options-section--tone-orange .options-section-title {
            color: #ffb35a;
            text-shadow:
                0 0 6px rgba(255, 153, 68, 0.95),
                0 0 14px rgba(255, 120, 40, 0.72),
                0 0 24px rgba(255, 90, 20, 0.4);
        }
        #options-panel .options-section--tone-cyan .options-section-title {
            color: #6ef4ff;
            text-shadow:
                0 0 6px rgba(0, 232, 255, 0.95),
                0 0 14px rgba(0, 190, 255, 0.72),
                0 0 24px rgba(0, 150, 255, 0.42);
        }
        #options-panel .options-section--tone-silver .options-section-title {
            color: #e8f2ff;
            text-shadow:
                0 0 6px rgba(220, 235, 255, 0.9),
                0 0 14px rgba(180, 210, 255, 0.55),
                0 0 22px rgba(140, 180, 255, 0.35);
        }
        #options-panel .options-section--tone-violet .options-section-title {
            color: #c89bff;
            text-shadow:
                0 0 6px rgba(180, 100, 255, 0.95),
                0 0 14px rgba(140, 70, 255, 0.72),
                0 0 24px rgba(100, 40, 220, 0.42);
        }
        #options-panel .options-subsection-head--cyan .options-subsection-title {
            color: #6eefff;
            text-shadow:
                0 0 5px rgba(0, 220, 255, 0.9),
                0 0 12px rgba(0, 180, 255, 0.65),
                0 0 20px rgba(0, 140, 255, 0.38);
        }
        #options-panel .options-subsection-head--amber .options-subsection-title {
            color: #ffbf66;
            text-shadow:
                0 0 5px rgba(255, 153, 60, 0.9),
                0 0 12px rgba(255, 120, 40, 0.62),
                0 0 20px rgba(255, 90, 20, 0.35);
        }
        #options-panel .options-subsection-head--blue .options-subsection-title {
            color: #7ef5ff;
            text-shadow:
                0 0 5px rgba(0, 232, 255, 0.98),
                0 0 12px rgba(0, 190, 255, 0.82),
                0 0 20px rgba(0, 140, 255, 0.55),
                0 0 28px rgba(0, 100, 255, 0.32);
        }
        #options-panel .options-subsection-head--purple .options-subsection-title {
            color: #e88cff;
            text-shadow:
                0 0 5px rgba(255, 92, 232, 0.98),
                0 0 12px rgba(200, 80, 255, 0.82),
                0 0 20px rgba(160, 60, 255, 0.55),
                0 0 28px rgba(120, 40, 220, 0.35);
        }
        #options-panel .options-subsection-head--orange .options-subsection-title {
            color: #ffb347;
            text-shadow:
                0 0 5px rgba(255, 160, 60, 0.98),
                0 0 12px rgba(255, 120, 40, 0.82),
                0 0 20px rgba(230, 90, 20, 0.55),
                0 0 28px rgba(200, 70, 10, 0.35);
        }
        #options-panel .options-subsection-head--lime .options-subsection-title {
            color: #8fff9a;
            text-shadow:
                0 0 5px rgba(92, 255, 158, 0.92),
                0 0 12px rgba(60, 220, 120, 0.65),
                0 0 20px rgba(40, 180, 90, 0.38);
        }
        #options-panel .options-subsection-head--magenta .options-subsection-title {
            color: #ff84f0;
            text-shadow:
                0 0 5px rgba(255, 92, 232, 0.92),
                0 0 12px rgba(230, 70, 255, 0.68),
                0 0 20px rgba(190, 50, 255, 0.4);
        }
        #options-panel .options-subsection-head--violet .options-subsection-title {
            color: #c9a0ff;
            text-shadow:
                0 0 5px rgba(180, 120, 255, 0.92),
                0 0 12px rgba(150, 90, 255, 0.68),
                0 0 20px rgba(120, 60, 220, 0.4);
        }
        #options-panel .options-subsection-head--pink .options-subsection-title {
            color: #ff8ec8;
            text-shadow:
                0 0 5px rgba(255, 100, 180, 0.92),
                0 0 12px rgba(255, 70, 150, 0.65),
                0 0 20px rgba(220, 50, 120, 0.38);
        }
        #options-panel .options-subsection-head--orchid .options-subsection-title {
            color: #d4a8ff;
            text-shadow:
                0 0 5px rgba(200, 130, 255, 0.92),
                0 0 12px rgba(170, 100, 255, 0.65),
                0 0 20px rgba(140, 70, 230, 0.38);
        }
        .options-subsection-reset {
            width: 24px;
            height: 24px;
            font-size: 15px;
        }
        .options-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto auto;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
        }
        .options-row--stack {
            grid-template-columns: 1fr;
            margin-bottom: 4px;
        }
        .options-select--full {
            width: 100%;
            min-width: 0;
        }
        .options-hint--inline {
            margin: 0 0 10px;
        }
        .options-label {
            font-size: 12px;
            color: #eef4ff;
            letter-spacing: 0.03em;
        }
        .options-color {
            width: 42px;
            height: 28px;
            padding: 0;
            border: 1px solid rgba(255, 255, 255, 0.28);
            border-radius: 6px;
            background: transparent;
            cursor: pointer;
        }
        .options-select {
            grid-column: 2 / -1;
            width: 100%;
            min-width: 0;
            padding: 6px 8px;
            border-radius: 6px;
            border: 1px solid rgba(255, 255, 255, 0.22);
            background: rgba(0, 0, 0, 0.35);
            color: #fff;
            font-size: 12px;
        }
        .options-range {
            grid-column: 2;
            width: 100%;
            min-width: 0;
        }
        .options-readout {
            font-size: 11px;
            color: #8ef;
            min-width: 2.8em;
            text-align: right;
            font-variant-numeric: tabular-nums;
        }
        .options-toggle-row {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: space-between;
            gap: 6px 10px;
            margin: 0 0 10px;
        }
        .options-toggle-row .options-check {
            flex: 1 1 0;
            min-width: 0;
            margin: 0;
            font-size: 10px;
            gap: 5px;
            white-space: nowrap;
        }
        .options-toggle-row .options-check span {
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .options-check {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 0 0 8px;
            font-size: 12px;
            color: #eef4ff;
            cursor: pointer;
        }
        .options-check input {
            accent-color: #38d9ff;
        }
        .options-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            width: 100%;
            margin-top: 4px;
            padding: 9px 12px;
            border-radius: 8px;
            border: 1px solid rgba(120, 200, 255, 0.35);
            background: rgba(12, 40, 72, 0.72);
            color: #f2f8ff;
            font-size: 13px;
            letter-spacing: 0.04em;
            cursor: pointer;
        }
        .options-btn:hover { filter: brightness(1.12); }
        .options-btn--ghost {
            width: auto;
            margin-top: 6px;
            padding: 6px 10px;
            font-size: 11px;
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(255, 255, 255, 0.18);
        }
        .options-lock-btn {
            font-weight: 600;
        }
        .options-hint {
            margin: 10px 0 0;
            font-size: 11px;
            line-height: 1.45;
            color: rgba(220, 232, 255, 0.88);
        }
        .options-hint strong {
            color: #fff;
            font-weight: 700;
        }
        #btn-options-close {
            font-size: 18px;
            line-height: 1;
            padding: 4px 8px;
        }
        .status-dot.on {
            background: #22cc66;
            box-shadow: 0 0 10px rgba(34,204,102,0.8);
        }
        .vertical-range {
            writing-mode: bt-lr; /* IE/Edge */
            -webkit-appearance: slider-vertical; /* WebKit */
            appearance: slider-vertical;
            width: 26px; height: 220px;
        }
        /* Station Banner (Top-left) — retired; station name lives in #mode-sub */
        #station-banner {
            display: none !important;
            position: absolute; top: 14px; left: 14px;
            z-index: 80;
            padding: 8px 12px;
            border-radius: 6px;
            background: rgba(0,0,0,0.55);
            border: 1px solid rgba(255,255,255,0.18);
            color: #fff;
            font-size: 18px;
            letter-spacing: 0.5px;
            pointer-events: auto;
            transition: opacity 1s ease-in-out;
            max-width: min(92vw, 820px);
        }
        #station-banner-inner {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
            flex-wrap: nowrap;
        }
        #station-banner-name {
            flex-shrink: 0;
            white-space: nowrap;
        }
        #station-banner-meta-wrap {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
            flex: 1 1 auto;
            font-size: 15px;
            font-weight: 500;
            color: rgba(255,255,255,0.92);
            overflow: hidden;
        }
        .station-banner-dot { opacity: 0.65; flex-shrink: 0; }
        #station-banner-nowplaying {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            min-width: 0;
        }
        #btn-banner-shazam {
            flex-shrink: 0;
            padding: 4px 12px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            border: 1px solid rgba(255,255,255,0.3);
            border-radius: 6px;
            color: #fff;
            cursor: pointer;
            background-color: rgba(0,0,0,0.25);
            background-image: url('../assets/images/btn.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            text-shadow: 0 0 4px rgba(0,0,0,0.75);
            -webkit-tap-highlight-color: transparent;
        }
        #btn-banner-shazam:hover {
            filter: brightness(1.12);
            border-color: rgba(245,210,15,0.45);
            color: #ffe866;
        }
        #station-banner.shuffle-on {
            border: 1px solid rgba(212,175,55,0.6);
            box-shadow: 0 0 16px rgba(212,175,55,0.25);
        }
        
        /* Settings Panel */
        #settings-panel {
            position: absolute; bottom: 160px; right: 14px;
            width: 360px; max-height: 60vh; overflow: auto;
            z-index: 90;
            background: rgba(0,0,0,0.55);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 8px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.6);
            backdrop-filter: blur(8px);
            transition: opacity 0.3s ease-in-out;
        }
        #settings-panel h3 {
            margin: 0; padding: 12px 14px; font-weight: 500; font-size: 14px;
            border-bottom: 1px solid rgba(255,255,255,0.12);
            letter-spacing: 1px; text-transform: uppercase; color: #ddd;
        }
        #settings-content { padding: 12px; }
        .settings-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0; }
        .settings-row label { font-size: 12px; color: #ccc; }
        .settings-row--webm-dup,
        #bottom-avatar-content .row--webm-dup {
            align-items: center;
        }
        .webm-dup-controls {
            display: flex;
            flex: 1;
            align-items: center;
            gap: 10px;
            min-width: 0;
        }
        .webm-dup-knob-col {
            flex: 0 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .webm-dup-knob {
            width: 36px;
            height: 36px;
        }
        .webm-dup-controls input[type="range"] {
            flex: 1;
            min-width: 0;
        }
        .settings-row input[type="number"] { width: 96px; padding: 6px 8px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); color: #fff; border-radius: 4px; }
        .settings-row input[type="range"] { flex: 1; }
        
        /* Unified slider styling (transparent tracks) */
        #settings-panel input[type="range"],
        #webm-settings-panel input[type="range"] {
            -webkit-appearance: none;
            appearance: none;
            height: 16px;
            background: transparent;
            cursor: pointer;
        }
        /* ROTARY KNOB STYLES (Final Layout Fix) */
        .eq-strip {
            display: flex;
            align-items: stretch;   /* Ensures divider line stretches full height */
            justify-content: space-between; 
            margin-top: 12px;
            padding: 8px 12px;
            background: rgba(0,0,0,0.3);
            border-radius: 6px;
            border: 1px solid rgba(255,255,255,0.1);
        }
        .eq-group {
            display: flex;
            flex: 1;                /* Force groups to take up equal width */
            justify-content: space-between; /* Spread knobs evenly inside the group */
        }
        .eq-divider {
            width: 2px;
            background: rgba(255,255,255,0.15);
            margin: 0 48px;         /* Adds 24px space on both sides (48px total gap) */
            flex-shrink: 0;         /* Prevents line from disappearing if squeezed */
        }
        .eq-col {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            width: 32px; 
        }
        .knob-wrap {
            position: relative;
            width: 32px; height: 32px;
            border-radius: 50%;
            background: radial-gradient(100% 100% at 50% 20%, #444 0%, #111 100%);
            border: 1px solid rgba(255, 255, 255, 0.32);
            box-shadow: 0 4px 6px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.2);
            cursor: ns-resize; /* Indicates drag up/down */
        }
        /* The colored line on the knob */
        .knob-indicator {
            position: absolute;
            top: 50%; left: 50%;
            width: 2px; height: 45%;
            background: var(--knob-color, #fff);
            transform-origin: 50% 0; /* Pivot from center */
            transform: translate(-50%, 0) rotate(180deg); /* Point down by default */
            border-radius: 2px;
            pointer-events: none;
            box-shadow: 0 0 4px var(--knob-color, #fff);
        }
        .eq-label {
            font-size: 9px;
            color: #888;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            text-align: center;
        }
        /* Tooltip for value while dragging */
        .knob-value {
            position: absolute;
            top: -18px; left: 50%;
            transform: translateX(-50%);
            background: rgba(0,0,0,0.8);
            color: #fff;
            font-size: 10px;
            padding: 2px 4px;
            border-radius: 3px;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s;
            white-space: nowrap;
        }
        .knob-wrap:active .knob-value, .knob-wrap:hover .knob-value {
            opacity: 1;
        }
        /* WebKit track */
        #settings-panel input[type="range"]::-webkit-slider-runnable-track,
        #webm-settings-panel input[type="range"]::-webkit-slider-runnable-track {
            height: 6px;
            background: rgba(255,255,255,0.14);
            border-radius: 6px;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
        }
        /* WebKit thumb */
        #settings-panel input[type="range"]::-webkit-slider-thumb,
        #webm-settings-panel input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 14px; height: 14px;
            border-radius: 50%;
            background: rgba(255,255,255,0.85);
            border: 1px solid rgba(255,255,255,0.35);
            margin-top: -4px;
            box-shadow: 0 0 8px rgba(0,0,0,0.25);
        }
        /* Firefox track */
        #settings-panel input[type="range"]::-moz-range-track,
        #webm-settings-panel input[type="range"]::-moz-range-track {
            height: 6px;
            background: rgba(255,255,255,0.14);
            border-radius: 6px;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
        }
        /* Firefox progress (filled portion) */
        #settings-panel input[type="range"]::-moz-range-progress,
        #webm-settings-panel input[type="range"]::-moz-range-progress {
            height: 6px;
            background: rgba(212,175,55,0.28); /* subtle gold on filled part */
            border-radius: 6px 0 0 6px;
        }
        /* Firefox thumb */
        #settings-panel input[type="range"]::-moz-range-thumb,
        #webm-settings-panel input[type="range"]::-moz-range-thumb {
            width: 14px; height: 14px;
            border-radius: 50%;
            background: rgba(255,255,255,0.85);
            border: 1px solid rgba(255,255,255,0.35);
            box-shadow: 0 0 8px rgba(0,0,0,0.25);
        }
        /* Hover/active states to increase opacity */
        #settings-panel input[type="range"]:hover::-webkit-slider-runnable-track,
        #webm-settings-panel input[type="range"]:hover::-webkit-slider-runnable-track {
            background: rgba(255,255,255,0.2);
        }
        #settings-panel input[type="range"]:active::-webkit-slider-runnable-track,
        #webm-settings-panel input[type="range"]:active::-webkit-slider-runnable-track {
            background: rgba(255,255,255,0.28);
        }
        #settings-panel input[type="range"]:hover::-moz-range-track,
        #webm-settings-panel input[type="range"]:hover::-moz-range-track {
            background: rgba(255,255,255,0.2);
        }
        #settings-panel input[type="range"]:active::-moz-range-track,
        #webm-settings-panel input[type="range"]:active::-moz-range-track {
            background: rgba(255,255,255,0.28);
        }
        .settings-note { font-size: 11px; color: #8aa; margin-top: 8px; line-height: 1.35; }
        .settings-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
        .btn-small {
            padding: 8px 12px; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); color: #fff;
            font-size: 12px; letter-spacing: 1px; border-radius: 4px;
        }
        .btn-small:hover { background: #fff; color: #000; }
        
        /* WebM Overlay */
        #webm-overlay {
            position: absolute; top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            z-index: 45;
            pointer-events: none;
        }
        /* Above Deck B viz mount when it is element-fullscreen (avatar stays visible with ProjectM / AUDIO:BAR). */
        #webm-overlay.webm-overlay--deck-b-viz-fs {
            z-index: 2147483640;
        }
        #webm-overlay video {
            width: 100vw; height: auto; display: block;
            pointer-events: none;
            border: none;
            border-radius: 0;
            box-shadow: none;
        }
        .webm-nav {
            position: absolute; top: 50%; transform: translateY(-50%);
            z-index: 60;
            font-size: 56px; color: rgba(255,255,255,0.7);
            background: transparent; border: none; padding: 12px; cursor: pointer;
            transition: opacity 1s ease-in-out, transform 0.2s;
            opacity: 1;
        }
        .webm-nav:hover { color: #fff; text-shadow: 0 0 15px #fff; transform: translateY(-50%) scale(1.1); }
        #webm-prev { left: 14px; }
        #webm-next { right: 14px; }
        
        /* WebM Settings Panel (mirror of settings-panel) */
        #webm-settings-panel {
            position: absolute; bottom: 160px; left: 14px;
            width: 360px; max-height: 60vh; overflow: auto;
            z-index: 90;
            background: rgba(0,0,0,0.55);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 8px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.6);
            backdrop-filter: blur(8px);
            transition: opacity 0.3s ease-in-out;
        }
        #webm-settings-panel h3 {
            margin: 0; font-weight: 500; font-size: 14px;
            letter-spacing: 1px; text-transform: uppercase; color: #ddd;
        }
        #webm-settings-panel .panel-head {
            display: flex; align-items: center; justify-content: space-between;
            padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.12);
        }
        #webm-settings-content { padding: 12px; }
        .settings-row input[type="range"] { flex: 1; }

		/* Top Menu Panel (slides from top, 50vh) */
		#top-menu-panel {
			position: fixed; top: 0; left: 0; right: 0; height: 50vh;
			z-index: 150; /* Above right/left panels and mix panel */
			background: rgba(0,0,0,0.8);
			border-bottom: 1px solid rgba(255,255,255,0.2);
			backdrop-filter: blur(10px);
			box-shadow: 0 10px 30px rgba(0,0,0,0.6);
			transform: translateY(-100%);
			transition: transform 0.35s ease-in-out, opacity 0.2s ease-in-out;
			opacity: 0; pointer-events: none;
			display: flex; flex-direction: column;
		}
		#top-menu-panel.open {
			transform: translateY(0);
			opacity: 1; pointer-events: auto;
		}
		#top-menu-header {
			display: flex; align-items: center; justify-content: space-between;
			padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.12);
		}
		#top-menu-content { padding: 12px; display: grid; gap: 10px; grid-template-columns: 1fr; flex: 1; overflow: auto; }
		#top-menu-webm { display: grid; gap: 8px; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; }
		#top-menu-content .row { display: flex; gap: 8px; align-items: center; }
		#top-menu-content input[type="text"] {
			flex: 1; padding: 10px 12px; background: rgba(255,255,255,0.06);
			border: 1px solid rgba(255,255,255,0.25); color: #fff; border-radius: 8px;
		}
		#top-menu-content .btn {
			padding: 8px 12px; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); color: #fff;
			font-size: 12px; letter-spacing: 1px; border-radius: 6px; cursor: pointer;
		}
		#top-menu-content .btn:hover { background: #fff; color: #000; }
		/* Footer with volume slider pinned to the bottom of the panel */
		#top-menu-footer { padding: 8px 14px; border-top: 1px solid rgba(255,255,255,0.12); }
		#top-menu-footer #volume-slider-container {
			/* Override global fixed/top styles so it lives inside the panel footer */
			position: static; left: auto; top: auto; transform: none; z-index: auto;
			display:flex; align-items:center; justify-content: center; width:100%; height:48px;
			opacity: 1 !important; pointer-events: auto;
		}
		/* Themed select (WebM dropdown) */
		#avatar-webm-select {
			appearance: none; -webkit-appearance: none; -moz-appearance: none;
			padding: 0 12px; min-width: 220px;
			background: rgba(255,255,255,0.06);
			border: 1px solid rgba(255,255,255,0.25);
			color: #fff; border-radius: 8px;
			flex: 1; min-width: 0; width: auto; max-width: 100%;
			height: 42px; box-sizing: border-box;
		}
		#avatar-webm-select:focus { outline: none; border-color: rgba(255,255,255,0.45); }
		/* Allow left header group to expand, enabling the select to stretch */
		#bottom-avatar-header > div:first-child { flex: 1; min-width: 0; }
		/* Add a bit of spacing before the right-side controls group */
		#bottom-avatar-header > div:last-child { margin-left: 10px; flex-shrink: 0; }
		/* Enlarge all buttons on the Avatar Settings top line by ~50% with rounded corners */
		#bottom-avatar-header .btn {
			font-size: 1.5em;
			height: 42px;
			padding: 0 16px;
			border-radius: 10px;
			display: inline-flex; align-items: center; justify-content: center;
			line-height: 1; box-sizing: border-box;
			/* Theme colors (avoid white buttons) */
			background: rgba(255,255,255,0.08);
			border: 1px solid rgba(255,255,255,0.25);
			color: #fff;
			cursor: pointer;
			transition: background 160ms ease;
		}
		#bottom-avatar-header .btn:hover { background: rgba(212,175,55,0.28); color: #fff; }
		/* Icon buttons after the WebM dropdown: make square with rounded corners */
		#avatar-webm-open,
		#avatar-webm-prev,
		#avatar-webm-next,
		#btn-bottommenu-close {
			width: 42px; height: 42px;
			padding: 0;
			display: inline-flex; align-items: center; justify-content: center;
			border-radius: 10px;
			line-height: 1;
		}
		/* Ensure right-side header buttons use the same theme */
		#avatar-btn-auto,
		#avatar-btn-reset,
		#btn-bottommenu-close {
			background: rgba(255,255,255,0.08);
			border: 1px solid rgba(255,255,255,0.25);
			color: #fff;
		}
		/* Auto toggle "on" state uses text color only */
		#avatar-btn-auto.on,
		#btn-webm-auto.on {
			color: #ffd700;
		}
		#avatar-btn-auto:hover,
		#avatar-btn-reset:hover,
		#btn-bottommenu-close:hover {
			background: rgba(212,175,55,0.28);
			color: #fff;
		}
		/* Top menu: dual Deck A / Deck B station columns */
		.top-menu-stations-wrap {
			display: grid;
			gap: 8px;
			flex: 1;
			min-height: 0;
			overflow: hidden;
			border: 1px solid rgba(255,255,255,0.15);
			border-radius: 8px;
			padding: 8px;
			background: rgba(255,255,255,0.04);
		}
		.top-menu-stations-wrap.is-focus-a {
			grid-template-columns: minmax(0, 1fr) minmax(68px, 21%);
		}
		.top-menu-stations-wrap.is-split {
			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		}
		.top-menu-stations-col {
			display: flex;
			flex-direction: column;
			min-width: 0;
			min-height: 0;
			overflow: hidden;
			border-radius: 6px;
			background: rgba(0, 0, 0, 0.18);
			border: 1px solid rgba(255, 255, 255, 0.08);
		}
		.top-menu-stations-head {
			display: flex;
			align-items: center;
			gap: 8px;
			padding: 6px 8px;
			border-bottom: 1px solid rgba(255, 255, 255, 0.1);
			flex-shrink: 0;
			min-height: 36px;
		}
		.top-menu-stations-head-tools {
			display: flex;
			align-items: center;
			gap: 4px;
			margin-left: auto;
			flex: 1;
			min-width: 0;
			justify-content: flex-end;
		}
		.top-menu-stations-head--a .top-menu-stations-title {
			flex: 0 0 auto;
		}
		.topmenu-stations-nav-btn {
			width: 24px;
			height: 24px;
			min-width: 24px;
			padding: 0;
			font-size: 10px;
			line-height: 1;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			border-radius: 4px;
			flex-shrink: 0;
		}
		.topmenu-stations-close-btn {
			width: 24px;
			height: 24px;
			min-width: 24px;
			padding: 0;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			border-radius: 4px;
			line-height: 1;
			flex-shrink: 0;
			margin-left: 4px;
			background: rgba(255,255,255,0.08);
			border: 1px solid rgba(255,255,255,0.25);
			color: #fff;
			cursor: pointer;
		}
		.topmenu-stations-close-btn:hover {
			background: rgba(212,175,55,0.28);
			color: #fff;
		}
		.top-menu-stations-knobs {
			display: flex;
			align-items: flex-end;
			gap: 2px;
			flex: 1;
			min-width: 0;
			justify-content: center;
			padding: 0 4px;
		}
		.top-menu-knob-col {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 1px;
			flex-shrink: 0;
		}
		.top-menu-knob-col .eq-label {
			font-size: 7px;
			line-height: 1;
			color: rgba(255, 255, 255, 0.45);
		}
		.top-menu-knob {
			width: 22px;
			height: 22px;
		}
		.top-menu-knob .knob-value {
			top: -14px;
			font-size: 9px;
			padding: 1px 3px;
		}
		.top-menu-stations-deck {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 1.35em;
			height: 1.35em;
			border-radius: 4px;
			font-size: 11px;
			font-weight: 800;
			letter-spacing: 0.04em;
			flex-shrink: 0;
		}
		.top-menu-stations-deck--a {
			color: #ff0b55;
			background: rgba(255, 11, 85, 0.14);
			border: 1px solid rgba(255, 11, 85, 0.35);
		}
		.top-menu-stations-deck--b {
			color: #5800ff;
			background: rgba(88, 0, 255, 0.14);
			border: 1px solid rgba(88, 0, 255, 0.35);
		}
		.top-menu-stations-title {
			font-size: 11px;
			font-weight: 600;
			letter-spacing: 0.08em;
			text-transform: uppercase;
			color: rgba(255, 255, 255, 0.72);
			flex: 1;
			min-width: 0;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.top-menu-stations-wrap.is-focus-a .top-menu-stations-col--b .top-menu-stations-title {
			display: none;
		}
		.top-menu-stations-b-tools {
			display: flex;
			align-items: center;
			gap: 4px;
			flex-shrink: 0;
		}
		.topmenu-stations-mini-btn {
			min-width: 28px;
			height: 28px;
			padding: 0 6px;
			font-size: 13px;
			line-height: 1;
		}
		.top-menu-stations-wrap.is-deck-b-loaded #topmenu-stations-b-expand {
			opacity: 0.45;
			pointer-events: none;
		}
		.top-menu-stations-scroll {
			flex: 1;
			min-height: 0;
			overflow: auto;
			padding: 6px;
			scrollbar-color: rgba(255,255,255,0.35) rgba(255,255,255,0.08);
			scrollbar-width: thin;
		}
		.top-menu-stations-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
		.top-menu-stations-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,0.06); border-radius: 8px; }
		.top-menu-stations-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.32); border-radius: 8px; border: 2px solid rgba(0,0,0,0.15); }
		.top-menu-stations-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.45); }
		#top-menu-stations-wrap .radio-item {
			font-size: 13px;
			padding: 8px 10px;
			margin: 4px 0;
		}
		.top-menu-stations-wrap.is-focus-a .top-menu-stations-col--b .radio-item {
			font-size: 10px;
			padding: 6px 5px;
			margin: 4px 0;
		}
		.top-menu-stations-wrap.is-focus-a .top-menu-stations-col--b .radio-item > div:last-child {
			display: none;
		}
		#radio-list-b .radio-item.active {
			border-color: #5800ff;
			box-shadow: 0 0 0 2px rgba(88, 0, 255, 0.28) inset, 0 0 16px rgba(88, 0, 255, 0.12);
			background: rgba(88, 0, 255, 0.08);
		}
		/* Make the volume slider clearly visible inside the top menu footer */
		#top-menu-footer #volume-slider {
			height: 16px;
			background: rgba(255,255,255,0.18);
			border-radius: 8px;
		}
		#top-menu-footer #volume-slider::-webkit-slider-runnable-track {
			height: 6px; background: rgba(255,255,255,0.24); border-radius: 6px;
		}
		#top-menu-footer #volume-slider::-moz-range-track {
			height: 6px; background: rgba(255,255,255,0.24); border-radius: 6px;
		}
		#top-menu-footer #volume-slider::-moz-range-progress {
			height: 6px; background: rgba(212,175,55,0.35); border-radius: 6px 0 0 6px;
		}
		/* Unify slider style across panels to match volume theme (track color, thumb style) */
		#top-menu-content input[type="range"],
        #mix-content input[type="range"],
        #textin-content input[type="range"],
		#bottom-avatar-content input[type="range"],
		#settings-panel input[type="range"],
		#webm-settings-panel input[type="range"] {
			-webkit-appearance: none; appearance: none;
			height: 16px; background: transparent; cursor: pointer;
		}
        #top-menu-content input[type="range"]::-webkit-slider-runnable-track,
        #mix-content input[type="range"]::-webkit-slider-runnable-track,
        #textin-content input[type="range"]::-webkit-slider-runnable-track,
		#bottom-avatar-content input[type="range"]::-webkit-slider-runnable-track,
		#settings-panel input[type="range"]::-webkit-slider-runnable-track,
		#webm-settings-panel input[type="range"]::-webkit-slider-runnable-track {
			height: 6px; background: rgba(255,255,255,0.24); border-radius: 6px;
		}
        #top-menu-content input[type="range"]::-moz-range-track,
        #mix-content input[type="range"]::-moz-range-track,
        #textin-content input[type="range"]::-moz-range-track,
		#bottom-avatar-content input[type="range"]::-moz-range-track,
		#settings-panel input[type="range"]::-moz-range-track,
		#webm-settings-panel input[type="range"]::-moz-range-track {
			height: 6px; background: rgba(255,255,255,0.24); border-radius: 6px;
		}
        #top-menu-content input[type="range"]::-moz-range-progress,
        #mix-content input[type="range"]::-moz-range-progress,
        #textin-content input[type="range"]::-moz-range-progress,
		#bottom-avatar-content input[type="range"]::-moz-range-progress,
		#settings-panel input[type="range"]::-moz-range-progress,
		#webm-settings-panel input[type="range"]::-moz-range-progress {
			height: 6px; background: rgba(212,175,55,0.35); border-radius: 6px 0 0 6px;
		}
        #top-menu-content input[type="range"]::-webkit-slider-thumb,
        #mix-content input[type="range"]::-webkit-slider-thumb,
        #textin-content input[type="range"]::-webkit-slider-thumb,
		#bottom-avatar-content input[type="range"]::-webkit-slider-thumb,
		#settings-panel input[type="range"]::-webkit-slider-thumb,
		#webm-settings-panel input[type="range"]::-webkit-slider-thumb {
			-webkit-appearance: none; appearance: none;
			width: 14px; height: 14px; border-radius: 50%;
			background: rgba(0,0,0,0.9); /* black thumb */
			border: 2px solid rgba(212,175,55,0.9); /* gold border */
			margin-top: -4px;
			box-shadow: 0 0 8px rgba(0,0,0,0.25);
		}
        #top-menu-content input[type="range"]::-moz-range-thumb,
        #mix-content input[type="range"]::-moz-range-thumb,
        #textin-content input[type="range"]::-moz-range-thumb,
		#bottom-avatar-content input[type="range"]::-moz-range-thumb,
		#settings-panel input[type="range"]::-moz-range-thumb,
		#webm-settings-panel input[type="range"]::-moz-range-thumb {
			width: 14px; height: 14px; border-radius: 50%;
			background: rgba(0,0,0,0.9); /* black thumb */
			border: 2px solid rgba(212,175,55,0.9); /* gold border */
			box-shadow: 0 0 8px rgba(0,0,0,0.25);
		}

		/* Bottom Avatar Menu Panel (Moved to Right) */
#bottom-avatar-panel {
    position: fixed; top: 0; right: 0; bottom: 0; height: 100vh;
    width: 50vw;
    z-index: 95;
    background: rgba(0,0,0,0.8);
    border-left: 1px solid rgba(255,255,255,0.2);
    border-radius: 10px 0 0 10px;
    backdrop-filter: blur(10px);
    box-shadow: -10px 0 30px rgba(0,0,0,0.6);
    transform: translateX(100%);
    transition: transform 0.35s ease-in-out, opacity 0.2s ease-in-out;
    opacity: 0; pointer-events: none;
    display: flex; flex-direction: column;
}
#bottom-avatar-panel.open {
    transform: translateX(0);
    opacity: 1; pointer-events: auto;
}
		#bottom-avatar-header {
			display: flex; align-items: center; justify-content: space-between;
			padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.12);
		}
		#bottom-avatar-content { padding: 12px; display: grid; gap: 10px; grid-template-columns: 1fr; flex: 1; overflow: auto; }
		#bottom-avatar-actions { display: grid; gap: 8px; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; }
		#bottom-avatar-content .row { display: flex; gap: 8px; align-items: center; }
		#bottom-avatar-content input[type="range"] {
			flex: 1; padding: 0; background: rgba(255,255,255,0.06);
		}
		#bottom-avatar-content .btn {
			padding: 8px 12px; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); color: #fff;
			font-size: 12px; letter-spacing: 1px; border-radius: 6px; cursor: pointer;
		}
		#bottom-avatar-content .btn:hover { background: #fff; color: #000; }
/* --- MOBILE OPTIMIZATIONS --- */
@media (max-width: 768px) {
    /* Menus take full screen width on mobile */
    * {
        -webkit-tap-highlight-color: transparent;
    }
    #textin-panel, 
    #bottom-avatar-panel,
    #keyboard-shortcuts-panel,
    #top-menu-panel,
    #webm-settings-panel,
    #settings-panel { 
        width: 100vw !important; 
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 0 !important;
    }
    /* Fix for mobile address bars covering bottom UI */
@supports (height: 100dvh) {
    body, #canvas-container, #overlay, #textin-panel, #bottom-avatar-panel {
        height: 100dvh !important;
    }
}
    /* Mix panel needs to be scrollable and taller */
    #mix-panel {
        height: 65vh !important;
    }
    #keyboard-shortcuts-panel {
        max-height: min(72vh, 560px) !important;
    }

    /* Stack EQ knobs vertically for space */
    .eq-strip {
        flex-direction: column;
        gap: 20px;
        padding: 15px;
    }
    
    /* Make the divider horizontal */
    .eq-divider {
        width: 100%;
        height: 1px;
        margin: 10px 0;
    }

    /* Bigger touch targets */
    .btn, .icon-btn, .nav-btn {
        min-height: 48px;
        min-width: 48px;
    }
}

/* Prevent accidental zooming/scrolling while swiping visuals */
#canvas-container {
    touch-action: none; 
}