:root {
      /* ══ Apple Design System — Dark Mode ══ */
      --bg-dark: #000000;
      --bg-panel: #1c1c1e;
      --panel-content-bg: #2c2c2e;
      --header-toolbar-bg: #1c1c1e;
      --panel-section-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
      /* Accent — Apple Blue */
      --accent: #0a84ff;
      --accent-light: #409cff;
      --accent-dark: #0071e3;
      /* Typography */
      --text: #f5f5f7;
      --text-secondary: #86868b;
      --text-tertiary: #6e6e73;
      /* Structure */
      --border: rgba(255, 255, 255, 0.08);
      --border-elevated: rgba(255, 255, 255, 0.12);
      --tab-active-color: #0a84ff;
      --button-border: rgba(255, 255, 255, 0.1);
      --button-live-border: rgba(255, 69, 58, 0.6);
      --button-shadow: rgba(0, 0, 0, 0.5);
      /* Semantic */
      --danger: #ff453a;
      --success: #30d158;
      --warning: #ffd60a;
      --section-label-color: var(--accent);
      --settings-footer-color: var(--text-secondary);
      --settings-footer-link-color: var(--accent);
      --header-btn-bg: rgba(255, 255, 255, 0.06);
      --gradient-start: #000000;
      --gradient-end: #0a0a0a;
      --preview-base-scale: 1;
      --settings-modal-width: 620px;
      --settings-modal-height: 90vh;
      /* Surfaces — Apple Vibrancy Materials */
      --activity-bar-bg: rgba(28, 28, 30, 0.92);
      --body-bg: #000000;
      --body-radial: radial-gradient(1400px 800px at 5% -15%, rgba(10, 132, 255, 0.04), transparent 60%);
      --studio-dock-bg: rgba(28, 28, 30, 0.95);
      --footer-bar-bg: #1c1c1e;
      --studio-pane-bg: rgba(44, 44, 46, 0.65);
      --studio-pane-title-bg: rgba(58, 58, 60, 0.45);
      --program-panel-bg: #000000;
      /* Apple Materials */
      --material-chrome: rgba(30, 30, 30, 0.78);
      --material-thin: rgba(44, 44, 46, 0.6);
      --material-thick: rgba(28, 28, 30, 0.92);
      --material-ultrathin: rgba(255, 255, 255, 0.03);
      /* Spacing System (4px grid) */
      --space-xs: 4px;
      --space-sm: 8px;
      --space-md: 12px;
      --space-lg: 16px;
      --space-xl: 24px;
      --page-nav-height: 36px;
      /* Radius */
      --radius-sm: 6px;
      --radius-md: 10px;
      --radius-lg: 14px;
      --radius-xl: 20px;
      /* Low-latency animation tokens */
      --ease-spring: cubic-bezier(0.2, 0.9, 0.3, 1.0);
      --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1.0);
      --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1.0);
      --duration-instant: 80ms;
      --duration-fast: 150ms;
      --duration-normal: 250ms;
      /* Pro Mixer premium surface tokens */
      --promix-overlay-bg:
        radial-gradient(1100px 520px at 50% 100%, rgba(10, 132, 255, 0.08), transparent 62%),
        linear-gradient(180deg, rgba(3, 6, 10, 0.36), rgba(2, 4, 8, 0.58));
      --promix-window-bg:
        linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.01) 22%),
        linear-gradient(165deg, rgba(17, 21, 28, 0.96) 0%, rgba(12, 16, 22, 0.98) 55%, rgba(10, 14, 19, 0.99) 100%);
      --promix-window-border: rgba(195, 212, 236, 0.18);
      --promix-window-border-inner: rgba(255, 255, 255, 0.08);
      --promix-window-shadow:
        0 30px 90px rgba(0, 0, 0, 0.72),
        0 12px 40px rgba(0, 0, 0, 0.46),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset;
      --promix-titlebar-bg:
        linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.015)),
        linear-gradient(90deg, rgba(34, 41, 53, 0.94), rgba(22, 28, 38, 0.96));
      --promix-titlebar-border: rgba(255, 255, 255, 0.13);
      --promix-body-rail-top: rgba(27, 33, 42, 0.92);
      --promix-body-rail-bottom: rgba(19, 24, 32, 0.98);
      --promix-strip-bg:
        linear-gradient(180deg, rgba(255, 255, 255, 0.042), rgba(255, 255, 255, 0.012)),
        linear-gradient(180deg, rgba(12, 16, 22, 0.94), rgba(14, 19, 26, 0.97));
      --promix-strip-border: rgba(255, 255, 255, 0.09);
      --promix-section-soft: rgba(255, 255, 255, 0.022);
    }
    
    * {
      box-sizing: border-box;
    }

    /* ══ Light Theme Mode Overrides ══ */
    [data-theme-mode="light"] .promix-window {
      border-color: rgba(0, 0, 0, 0.12);
      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18), 0 0 0 0.5px rgba(0,0,0,0.06) inset;
    }
    [data-theme-mode="light"] .promix-titlebar {
      background: rgba(0, 0, 0, 0.03);
      border-bottom-color: rgba(0, 0, 0, 0.08);
    }
    [data-theme-mode="light"] .promix-menu-group {
      background: rgba(0, 0, 0, 0.02);
      border-color: rgba(0, 0, 0, 0.08);
    }
    [data-theme-mode="light"] .promix-menu-btn {
      background: rgba(0, 0, 0, 0.03);
      border-color: rgba(0, 0, 0, 0.1);
      color: #536172;
    }
    [data-theme-mode="light"] .promix-menu-btn:hover {
      color: #0a84ff;
      border-color: rgba(10, 132, 255, 0.35);
      background: rgba(10, 132, 255, 0.1);
    }
    [data-theme-mode="light"] .promix-menu-btn.is-active-mute {
      background: rgba(244, 63, 94, 0.14);
      border-color: rgba(244, 63, 94, 0.42);
      color: #b4233e;
      box-shadow: inset 0 0 0 1px rgba(244, 63, 94, 0.12);
    }
    [data-theme-mode="light"] .promix-menu-btn.is-active-unmute {
      background: rgba(34, 197, 94, 0.14);
      border-color: rgba(34, 197, 94, 0.42);
      color: #116d38;
      box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.12);
    }
    [data-theme-mode="light"] .promix-menu-meta {
      color: #536172;
    }
    [data-theme-mode="light"] .promix-scene-select {
      color: #334155;
      background-color: rgba(0, 0, 0, 0.03);
      border-color: rgba(0, 0, 0, 0.1);
      background-image: linear-gradient(45deg, transparent 50%, rgba(63, 75, 91, 0.75) 50%), linear-gradient(135deg, rgba(63, 75, 91, 0.75) 50%, transparent 50%);
    }
    [data-theme-mode="light"] .promix-scene-select:hover {
      border-color: rgba(10, 132, 255, 0.3);
      background-color: rgba(10, 132, 255, 0.08);
    }
    [data-theme-mode="light"] .promix-strip {
      border-right-color: rgba(0, 0, 0, 0.06);
      background: rgba(0, 0, 0, 0.015);
    }
    [data-theme-mode="light"] .promix-strip.master {
      background: rgba(0, 0, 0, 0.015);
      border-left-color: rgba(0, 0, 0, 0.06);
    }
    [data-theme-mode="light"] .promix-fx-slot {
      background: linear-gradient(180deg, rgba(43, 132, 241, 0.9), rgba(30, 112, 214, 0.92));
      border-color: rgba(18, 90, 182, 0.58);
      color: #ffffff;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.32),
        0 1px 0 rgba(0, 0, 0, 0.08);
    }
    [data-theme-mode="light"] .promix-fx-slot:hover {
      background: linear-gradient(180deg, rgba(55, 145, 252, 0.96), rgba(36, 122, 230, 0.98));
      color: #ffffff;
    }
    [data-theme-mode="light"] .promix-fx-slot.active {
      background: linear-gradient(180deg, rgba(16, 119, 241, 0.98), rgba(12, 96, 205, 1));
      color: #fff;
    }
    [data-theme-mode="light"] .promix-fx-slot-empty {
      color: rgba(0, 0, 0, 0.25);
      border-color: rgba(0, 0, 0, 0.08);
    }
    [data-theme-mode="light"] .promix-fx-slot-empty:hover {
      background: rgba(0, 0, 0, 0.04);
      color: rgba(0, 0, 0, 0.45);
    }
    [data-theme-mode="light"] .promix-fx-slots {
      border-bottom-color: rgba(0, 0, 0, 0.06);
    }
    [data-theme-mode="light"] .promix-input-row {
      border-bottom-color: rgba(0, 0, 0, 0.06);
      background: rgba(0, 0, 0, 0.02);
    }
    [data-theme-mode="light"] .promix-input-opt {
      color: #4b5563;
      background: rgba(0, 0, 0, 0.03);
      border-color: rgba(0, 0, 0, 0.08);
    }
    [data-theme-mode="light"] .promix-input-opt:hover {
      background: rgba(10, 132, 255, 0.08);
      color: #0a84ff;
      border-color: rgba(10, 132, 255, 0.28);
    }
    [data-theme-mode="light"] .promix-input-opt.active {
      background: rgba(10, 132, 255, 0.14);
      border-color: rgba(10, 132, 255, 0.38);
      color: #0a84ff;
    }
    [data-theme-mode="light"] .promix-input-route-btn {
      color: #3f4b5b;
      background: rgba(0, 0, 0, 0.03);
      border-color: rgba(0, 0, 0, 0.1);
    }
    [data-theme-mode="light"] .promix-input-route-btn:hover {
      background: rgba(10, 132, 255, 0.08);
      color: #0a84ff;
      border-color: rgba(10, 132, 255, 0.28);
    }
    [data-theme-mode="light"] .promix-input-route-pop {
      background: rgba(245, 248, 252, 0.98);
      border-color: rgba(63, 75, 91, 0.2);
      box-shadow: 0 14px 30px rgba(14, 20, 30, 0.2);
      color: #1f2937;
    }
    [data-theme-mode="light"] .promix-input-route-pop .route-row label {
      color: rgba(0, 0, 0, 0.52);
    }
    [data-theme-mode="light"] .promix-input-route-pop select {
      color: #1f2937;
      background: rgba(0, 0, 0, 0.04);
      border-color: rgba(0, 0, 0, 0.1);
    }
    [data-theme-mode="light"] .promix-input-route-pop .route-presets button {
      color: #334155;
      background: rgba(0, 0, 0, 0.04);
      border-color: rgba(0, 0, 0, 0.1);
    }
    [data-theme-mode="light"] .promix-input-route-pop .route-presets button:hover {
      background: rgba(10, 132, 255, 0.08);
      border-color: rgba(10, 132, 255, 0.24);
      color: #0a84ff;
    }
    [data-theme-mode="light"] .promix-spatial-row {
      border-top-color: rgba(0, 0, 0, 0.06);
      border-bottom-color: rgba(0, 0, 0, 0.06);
      background: rgba(0, 0, 0, 0.02);
    }
    [data-theme-mode="light"] .promix-spatial-label {
      color: rgba(0, 0, 0, 0.45);
    }
    [data-theme-mode="light"] .promix-spatial-value {
      color: rgba(0, 0, 0, 0.65);
    }
    [data-theme-mode="light"] .promix-meter-bar-v {
      background: rgba(0, 0, 0, 0.08);
      border-color: rgba(0, 0, 0, 0.06);
    }
    [data-theme-mode="light"] .promix-fader::-webkit-slider-runnable-track {
      background: rgba(0, 0, 0, 0.12);
      border-color: rgba(0, 0, 0, 0.08);
    }
    [data-theme-mode="light"] .promix-fader::-moz-range-track {
      background: rgba(0, 0, 0, 0.12);
    }
    [data-theme-mode="light"] .promix-strip-bottom {
      border-top-color: rgba(0, 0, 0, 0.06);
      background: transparent;
      box-shadow: none;
    }
    [data-theme-mode="light"] .promix-sends-section,
    [data-theme-mode="light"] .promix-sends-placeholder {
      border-top-color: rgba(0, 0, 0, 0.06);
    }
    [data-theme-mode="light"] .promix-send-label { color: rgba(0, 0, 0, 0.4); }
    [data-theme-mode="light"] .promix-send-val { color: rgba(0, 0, 0, 0.3); }
    [data-theme-mode="light"] .promix-meter-scale-v span { color: rgba(0, 0, 0, 0.52); }
    [data-theme-mode="light"] .promix-knob:hover circle:last-of-type { fill: #e8eaef; }
    [data-theme-mode="light"] .promix-label-strip {
      background: var(--material-thick, #f5f5f5) !important;
      border-right-color: rgba(0, 0, 0, 0.08) !important;
    }
    [data-theme-mode="light"] .promix-label-strip .promix-fader-area,
    [data-theme-mode="light"] .promix-label-strip .promix-sends-section {
      border-top-color: rgba(0, 0, 0, 0.08);
    }
    [data-theme-mode="light"] .promix-label-strip .promix-input-row {
      border-bottom-color: rgba(0, 0, 0, 0.08);
    }
    [data-theme-mode="light"] .promix-label-strip .promix-spatial-row {
      border-top-color: rgba(0, 0, 0, 0.08);
      border-bottom-color: rgba(0, 0, 0, 0.08);
    }
    [data-theme-mode="light"] .promix-label-strip .promix-strip-bottom {
      border-top-color: rgba(0, 0, 0, 0.1);
    }
    [data-theme-mode="light"] .promix-cat-label { color: rgba(0, 0, 0, 0.22); }
    [data-theme-mode="light"] .promix-strip.bus {
      background: rgba(0, 0, 0, 0.015);
      border-left-color: rgba(0, 0, 0, 0.06);
    }
    [data-theme-mode="light"] .promix-strip.bus .promix-strip-name { color: #1c1c1e; }
    [data-theme-mode="light"] .promix-add-bus-strip {
      background: rgba(16, 185, 129, 0.02);
      border-left-color: rgba(16, 185, 129, 0.15);
      color: #059669;
    }
    [data-theme-mode="light"] .promix-add-bus-strip:hover { background: rgba(16, 185, 129, 0.08); }
    [data-theme-mode="light"] .promix-btn {
      border-color: rgba(0, 0, 0, 0.1);
      background: rgba(0, 0, 0, 0.04);
    }
    [data-theme-mode="light"] .promix-btn:hover {
      background: rgba(0, 0, 0, 0.08);
    }
    [data-theme-mode="light"] .promix-titlebar-text {
      color: #3f4c60;
    }
    [data-theme-mode="light"] .promix-db-label { color: #48535e; }
    [data-theme-mode="light"] .promix-strip-name { color: #1c1c1e; }
    [data-theme-mode="light"] .promix-strip.master .promix-strip-name { color: #1c1c1e; }
    [data-theme-mode="light"] .promix-resize-handle:hover::after {
      background: rgba(0, 0, 0, 0.15);
    }
    [data-theme-mode="light"] .promix-resize-handle-right:hover::after,
    [data-theme-mode="light"] .promix-resize-handle-bottom:hover::after {
      background: rgba(0, 0, 0, 0.15);
    }
    [data-theme-mode="light"] .promix-fx-param-pop {
      border-color: rgba(0, 0, 0, 0.12);
      box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
    }
    [data-theme-mode="light"] .promix-fx-param-pop .rec-fx-param input[type="range"]::-webkit-slider-runnable-track {
      background: rgba(0, 0, 0, 0.12);
    }
    [data-theme-mode="light"] .promix-fx-act + .promix-fx-act {
      border-left-color: rgba(0, 0, 0, 0.08);
    }
    [data-theme-mode="light"] .promix-fx-slot.active .promix-fx-act + .promix-fx-act {
      border-left-color: rgba(255, 255, 255, 0.18);
    }
    [data-theme-mode="light"] {
      --promix-overlay-bg:
        radial-gradient(900px 450px at 50% 100%, rgba(10, 132, 255, 0.08), transparent 64%),
        linear-gradient(180deg, rgba(12, 18, 28, 0.08), rgba(10, 15, 24, 0.15));
      --promix-window-bg:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(249, 251, 255, 0.9)),
        linear-gradient(165deg, rgba(248, 250, 255, 0.96) 0%, rgba(241, 245, 252, 0.98) 100%);
      --promix-window-border: rgba(60, 78, 106, 0.2);
      --promix-window-border-inner: rgba(255, 255, 255, 0.72);
      --promix-window-shadow:
        0 26px 72px rgba(15, 24, 38, 0.22),
        0 10px 30px rgba(19, 29, 44, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.82) inset;
      --promix-titlebar-bg:
        linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(245, 249, 255, 0.9)),
        linear-gradient(90deg, rgba(236, 241, 249, 0.92), rgba(233, 239, 248, 0.95));
      --promix-titlebar-border: rgba(79, 96, 124, 0.18);
      --promix-body-rail-top: rgba(227, 233, 244, 0.92);
      --promix-body-rail-bottom: rgba(222, 229, 240, 0.97);
      --promix-strip-bg:
        linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(247, 250, 255, 0.9)),
        linear-gradient(180deg, rgba(241, 246, 253, 0.96), rgba(236, 242, 250, 0.98));
      --promix-strip-border: rgba(73, 91, 118, 0.14);
      --promix-section-soft: rgba(0, 0, 0, 0.018);
    }
    [data-theme="apple-music"] {
      --promix-overlay-bg:
        radial-gradient(1100px 520px at 50% 100%, rgba(10, 132, 255, 0.08), transparent 62%),
        linear-gradient(180deg, rgba(3, 6, 10, 0.36), rgba(2, 4, 8, 0.58));
      --promix-window-bg:
        linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.01) 22%),
        linear-gradient(165deg, rgba(17, 21, 28, 0.96) 0%, rgba(12, 16, 22, 0.98) 55%, rgba(10, 14, 19, 0.99) 100%);
      --promix-window-border: rgba(195, 212, 236, 0.18);
      --promix-window-border-inner: rgba(255, 255, 255, 0.08);
      --promix-window-shadow:
        0 30px 90px rgba(0, 0, 0, 0.72),
        0 12px 40px rgba(0, 0, 0, 0.46),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset;
      --promix-titlebar-bg:
        linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.015)),
        linear-gradient(90deg, rgba(34, 41, 53, 0.94), rgba(22, 28, 38, 0.96));
      --promix-titlebar-border: rgba(255, 255, 255, 0.13);
      --promix-body-rail-top: rgba(27, 33, 42, 0.92);
      --promix-body-rail-bottom: rgba(19, 24, 32, 0.98);
      --promix-strip-bg:
        linear-gradient(180deg, rgba(255, 255, 255, 0.042), rgba(255, 255, 255, 0.012)),
        linear-gradient(180deg, rgba(12, 16, 22, 0.94), rgba(14, 19, 26, 0.97));
      --promix-strip-border: rgba(255, 255, 255, 0.09);
      --promix-section-soft: rgba(255, 255, 255, 0.022);
    }
    /* Source FX overlay — light mode */
    [data-theme-mode="light"] #source-fx-overlay .rec-fx-popup {
      border-color: rgba(0, 0, 0, 0.14);
      box-shadow: 0 28px 72px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0,0,0,0.08);
    }
    [data-theme-mode="light"] #source-fx-overlay .rec-fx-header {
      border-bottom-color: rgba(0, 0, 0, 0.08);
      background: rgba(0, 0, 0, 0.02);
    }
    [data-theme-mode="light"] .source-fx-row {
      border-color: rgba(0, 0, 0, 0.08) !important;
      background: rgba(0, 0, 0, 0.02) !important;
    }
    [data-theme-mode="light"] .source-fx-row:hover {
      background: rgba(0, 0, 0, 0.04) !important;
    }
    /* Settings / sp-modal — light mode */
    [data-theme-mode="light"] .sp-modal {
      border-color: rgba(0, 0, 0, 0.12);
      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0,0,0,0.06);
    }
    [data-theme-mode="light"] .sp-modal-header {
      border-bottom-color: rgba(0, 0, 0, 0.08);
    }
    [data-theme-mode="light"] .sp-modal-footer {
      border-top-color: rgba(0, 0, 0, 0.08);
    }
    [data-theme-mode="light"] .sp-modal-footer button {
      border-color: rgba(0, 0, 0, 0.1);
      background: rgba(0, 0, 0, 0.04);
    }
    [data-theme-mode="light"] .sp-modal-footer button:hover {
      background: rgba(0, 0, 0, 0.08);
    }
    /* Settings modal — light mode */
    [data-theme-mode="light"] .sm-body {
      border-color: rgba(0, 0, 0, 0.12) !important;
      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.12) !important;
    }
    [data-theme-mode="light"] .sm-sidebar {
      background: var(--bg-panel, #ffffff) !important;
      border-right-color: rgba(0, 0, 0, 0.08) !important;
      scrollbar-color: rgba(0, 0, 0, 0.08) transparent !important;
    }
    [data-theme-mode="light"] .sm-sidebar::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.08) !important; }
    [data-theme-mode="light"] .sm-sidebar-item {
      color: #6e6e73 !important;
    }
    [data-theme-mode="light"] .sm-sidebar-item:hover {
      background: rgba(0, 0, 0, 0.05) !important;
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .sm-sidebar-item.active {
      color: #007AFF !important;
      background: rgba(0, 122, 255, 0.08) !important;
    }
    [data-theme-mode="light"] .sm-content {
      background: var(--bg-panel, #ffffff) !important;
      scrollbar-color: rgba(0, 0, 0, 0.10) transparent !important;
    }
    [data-theme-mode="light"] .sm-content::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.10) !important; }
    [data-theme-mode="light"] .sm-panel-title {
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .settings-label {
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .settings-select,
    [data-theme-mode="light"] .settings-input,
    [data-theme-mode="light"] .settings-textarea {
      background: rgba(0, 0, 0, 0.04) !important;
      border-color: rgba(0, 0, 0, 0.12) !important;
      color: var(--text) !important;
    }
    [data-theme-mode="light"] .settings-hint {
      color: #86868b !important;
    }
    [data-theme-mode="light"] .color-row input[type="text"] {
      background: #f0f0f5 !important;
      border-color: rgba(0, 0, 0, 0.12) !important;
      color: #1c1c1e !important;
    }
    /* Activity bar popups — light mode */
    [data-theme-mode="light"] .ab-popup {
      background: rgba(255, 255, 255, 0.92) !important;
      border-color: rgba(0, 0, 0, 0.12) !important;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important;
    }
    [data-theme-mode="light"] .ab-popup-item {
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .ab-popup-item:hover {
      background: rgba(0, 0, 0, 0.05) !important;
    }
    [data-theme-mode="light"] .ab-popup-sep {
      background: rgba(0, 0, 0, 0.08) !important;
    }
    [data-theme-mode="light"] .ab-popup-sub {
      background: rgba(255, 255, 255, 0.95) !important;
      border-color: rgba(0, 0, 0, 0.10) !important;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10) !important;
    }
    /* Search / autocomplete — light mode */
    [data-theme-mode="light"] #search-autocomplete {
      background: #ffffff !important;
      border-color: rgba(0, 0, 0, 0.12) !important;
    }
    [data-theme-mode="light"] #search-autocomplete::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.12) !important; }
    /* Scrollbar — light mode */
    [data-theme-mode="light"] .promix-body {
      scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    }
    [data-theme-mode="light"] .promix-fx-slots {
      scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
    }
    /* FX add/swap picker — light mode */
    [data-theme-mode="light"] .promix-fx-add-picker {
      border-color: rgba(0, 0, 0, 0.12) !important;
      box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12) !important;
    }
    [data-theme-mode="light"] .promix-fx-add-picker .sfx-add-item {
      color: #48535e !important;
    }
    /* Footer bar — light mode */
    [data-theme-mode="light"] #footer-bar {
      border-top-color: rgba(0, 0, 0, 0.06) !important;
      color: #6e6e73 !important;
    }
    /* Header toolbar — light mode */
    [data-theme-mode="light"] .header-toolbar-btn,
    [data-theme-mode="light"] .ctrl-action-btn {
      border-color: rgba(0, 0, 0, 0.1) !important;
      color: #1c1c1e !important;
    }
    /* Studio dock — light mode */
    [data-theme-mode="light"] .studio-dock-section {
      border-color: rgba(0, 0, 0, 0.06) !important;
    }
    /* Studio pane — light mode */
    [data-theme-mode="light"] .studio-pane-title {
      color: #1c1c1e !important;
    }
    /* Tab bar — light mode */
    [data-theme-mode="light"] .tab-button {
      color: #6e6e73 !important;
    }
    [data-theme-mode="light"] .tab-button.active,
    [data-theme-mode="light"] .tab-button:hover {
      color: #1c1c1e !important;
    }
    /* Source items — light mode */
    [data-theme-mode="light"] .source-item {
      border-color: rgba(0, 0, 0, 0.06) !important;
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .source-item:hover {
      background: rgba(0, 0, 0, 0.04) !important;
    }
    /* Modal overlay — light mode */
    [data-theme-mode="light"] .modal-content {
      background: #ffffff !important;
      border-color: rgba(0, 0, 0, 0.12) !important;
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .modal-content .modal-scroll {
      scrollbar-color: rgba(0, 0, 0, 0.15) transparent !important;
    }
    [data-theme-mode="light"] .modal-content .modal-scroll::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.15) !important;
    }
    [data-theme-mode="light"] .modal-content .modal-scroll::-webkit-scrollbar-thumb:hover {
      background: rgba(0, 0, 0, 0.25) !important;
    }

    /* ═══════════════════════════════════════════
       COMPREHENSIVE LIGHT THEME OVERRIDES
       ═══════════════════════════════════════════ */

    /* ── Global text & SVG icon safety net ── */
    [data-theme-mode="light"] svg:not([fill]):not(.promix-knob) {
      color: currentColor;
    }

    /* ── Sidebar ── */
    [data-theme-mode="light"] #sidebar {
      border-right-color: rgba(0, 0, 0, 0.08) !important;
    }
    [data-theme-mode="light"] .sidebar-width-handle:hover {
      background: rgba(0, 0, 0, 0.08) !important;
    }
    [data-theme-mode="light"] .sidebar-tabs {
      border-bottom-color: rgba(0, 0, 0, 0.08) !important;
    }
    [data-theme-mode="light"] .tab:hover {
      background: rgba(0, 0, 0, 0.04) !important;
    }
    [data-theme-mode="light"] .tab.active {
      color: #1c1c1e !important;
      background: rgba(0, 0, 0, 0.04) !important;
    }
    [data-theme-mode="light"] .tab.active::after {
      background: var(--accent, #0a84ff) !important;
    }

    /* ── Search container & inputs ── */
    [data-theme-mode="light"] #song-search,
    [data-theme-mode="light"] #bible-search {
      background: rgba(0, 0, 0, 0.04) !important;
      border-color: rgba(0, 0, 0, 0.10) !important;
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] #song-search:focus,
    [data-theme-mode="light"] #bible-search:focus {
      background: rgba(0, 0, 0, 0.06) !important;
    }
    [data-theme-mode="light"] .clear-search:hover {
      background: rgba(0, 0, 0, 0.06) !important;
    }

    /* ── Song list items ── */
    [data-theme-mode="light"] .song-item:hover {
      background: rgba(0, 0, 0, 0.04) !important;
    }
    [data-theme-mode="light"] .song-item.active {
      background: rgba(0, 122, 255, 0.08) !important;
    }
    [data-theme-mode="light"] #song-list {
      scrollbar-color: rgba(0, 0, 0, 0.10) transparent !important;
    }
    [data-theme-mode="light"] #song-list::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.10) !important;
    }

    /* ── Version row / version buttons ── */
    [data-theme-mode="light"] .version-wrapper {
      background: rgba(0, 0, 0, 0.05) !important;
    }
    [data-theme-mode="light"] .version-wrapper:hover {
      background: rgba(0, 0, 0, 0.08) !important;
    }
    [data-theme-mode="light"] .version-wrapper.active {
      background: rgba(0, 122, 255, 0.10) !important;
    }
    [data-theme-mode="light"] .version-btn {
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .version-wrapper.active .version-btn {
      color: var(--accent) !important;
    }

    /* ── Lyric buttons (Bible verse / song lyric display) ── */
    [data-theme-mode="light"] #lyric-buttons {
      background: var(--bg-dark) !important;
      scrollbar-color: rgba(0, 0, 0, 0.10) transparent !important;
    }
    [data-theme-mode="light"] #lyric-buttons::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.10) !important;
    }
    [data-theme-mode="light"] .lyric-btn {
      background: rgba(0, 0, 0, 0.03) !important;
      border-color: rgba(0, 0, 0, 0.08) !important;
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .lyric-btn:hover {
      background: rgba(0, 0, 0, 0.06) !important;
      border-color: rgba(0, 0, 0, 0.12) !important;
    }
    [data-theme-mode="light"] .lyric-btn.active {
      background: rgba(0, 122, 255, 0.08) !important;
      border-color: var(--accent) !important;
    }

    /* ── Nav row / segmented picker / seg buttons ── */
    [data-theme-mode="light"] .segmented-picker {
      background: rgba(0, 0, 0, 0.04) !important;
      border-color: rgba(0, 0, 0, 0.08) !important;
    }
    [data-theme-mode="light"] .seg-btn.align-icon svg {
      stroke: var(--text-secondary) !important;
    }
    [data-theme-mode="light"] .seg-btn.align-icon.active svg {
      stroke: #fff !important;
    }

    /* ── Toolbar mode switch (.t-btn) ── */
    [data-theme-mode="light"] .toolbar-mode-switch {
      background: rgba(0, 0, 0, 0.04) !important;
      border-color: rgba(0, 0, 0, 0.08) !important;
    }
    [data-theme-mode="light"] .t-btn:not(:disabled):hover {
      background: rgba(0, 0, 0, 0.06) !important;
    }

    /* ── Section blocks ── */
    [data-theme-mode="light"] .section-block {
      background: rgba(0, 0, 0, 0.02) !important;
    }

    /* ── Buttons (.btn base) ── */
    [data-theme-mode="light"] .btn {
      border-color: rgba(0, 0, 0, 0.10) !important;
    }
    [data-theme-mode="light"] .btn-secondary,
    [data-theme-mode="light"] .btn-outline {
      background: rgba(0, 0, 0, 0.04) !important;
      border-color: rgba(0, 0, 0, 0.12) !important;
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .btn-secondary:hover,
    [data-theme-mode="light"] .btn-outline:hover {
      background: rgba(0, 0, 0, 0.08) !important;
    }

    /* ── Mini toggle ── */
    [data-theme-mode="light"] .mini-toggle {
      color: #6e6e73 !important;
    }
    [data-theme-mode="light"] .mini-toggle:hover {
      color: #1c1c1e !important;
    }

    /* ── Remote show row ── */
    [data-theme-mode="light"] .remote-show-row {
      border-color: rgba(0, 0, 0, 0.08) !important;
      background: rgba(0, 0, 0, 0.02) !important;
    }

    /* ── Slider header / slider value ── */
    [data-theme-mode="light"] .slider-header .settings-label {
      color: #48535e !important;
    }
    [data-theme-mode="light"] .slider-value {
      color: #1c1c1e !important;
      background: rgba(0, 0, 0, 0.05) !important;
      border-color: rgba(0, 0, 0, 0.10) !important;
    }
    [data-theme-mode="light"] .settings-slider {
      background: rgba(0, 0, 0, 0.08) !important;
    }
    [data-theme-mode="light"] .settings-slider::-webkit-slider-runnable-track {
      background-color: rgba(0, 0, 0, 0.06) !important;
    }
    [data-theme-mode="light"] .settings-slider::-webkit-slider-thumb {
      background: #48535e !important;
      border-color: #fff !important;
    }
    [data-theme-mode="light"] .settings-slider::-webkit-slider-thumb:hover {
      background: #1c1c1e !important;
    }

    /* ── Scene/Source list items ── */
    [data-theme-mode="light"] .scene-list-item,
    [data-theme-mode="light"] .source-list-item {
      background: rgba(0, 0, 0, 0.03) !important;
      border-color: rgba(0, 0, 0, 0.06) !important;
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .scene-list-item:hover,
    [data-theme-mode="light"] .source-list-item:hover {
      background: rgba(0, 0, 0, 0.06) !important;
      border-color: rgba(0, 0, 0, 0.10) !important;
    }
    [data-theme-mode="light"] .scene-list-item.selected,
    [data-theme-mode="light"] .source-list-item.selected {
      background: rgba(0, 122, 255, 0.08) !important;
    }
    [data-theme-mode="light"] .scene-list-item .sli-icon svg,
    [data-theme-mode="light"] .source-list-item .sli-icon svg {
      stroke: #6e6e73 !important;
    }
    [data-theme-mode="light"] .source-list-item .sli-color-dot {
      border-color: rgba(0, 0, 0, 0.18);
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
    }
    [data-theme-mode="light"] .source-list-item .sli-color-dot.default {
      background: rgba(0, 0, 0, 0.12);
      border-color: rgba(0, 0, 0, 0.14);
      box-shadow: none;
    }
    [data-theme-mode="light"] .sl-context-menu {
      background: #ffffff !important;
      border-color: rgba(0, 0, 0, 0.14) !important;
      box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16) !important;
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .sl-context-menu .sl-ctx-group-title {
      color: #6e6e73 !important;
    }
    [data-theme-mode="light"] .sl-context-menu .sl-ctx-sep {
      background: rgba(0, 0, 0, 0.08) !important;
    }
    [data-theme-mode="light"] .sl-context-menu .sl-ctx-item:hover {
      background: rgba(0, 0, 0, 0.06) !important;
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .sl-context-menu .sl-ctx-item.active {
      background: rgba(0, 122, 255, 0.12) !important;
      color: #0a4aa5 !important;
    }
    [data-theme-mode="light"] .sl-context-menu .sl-ctx-color-chip {
      border-color: rgba(0, 0, 0, 0.18) !important;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset !important;
    }
    [data-theme-mode="light"] .sl-context-menu .sl-ctx-color-chip.default {
      background: rgba(0, 0, 0, 0.14) !important;
      border-color: rgba(0, 0, 0, 0.16) !important;
      box-shadow: none !important;
    }
    [data-theme-mode="light"] .sl-context-menu .sl-ctx-color-swatch {
      border-color: rgba(0, 0, 0, 0.2) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.5) !important;
    }
    [data-theme-mode="light"] .sl-context-menu .sl-ctx-color-swatch.default {
      border-color: rgba(0, 0, 0, 0.24) !important;
      background:
        linear-gradient(45deg, rgba(0,0,0,0.14) 0 25%, rgba(0,0,0,0.05) 25% 50%, rgba(0,0,0,0.14) 50% 75%, rgba(0,0,0,0.05) 75% 100%) !important;
      background-size: 8px 8px !important;
    }
    [data-theme-mode="light"] .sl-context-menu .sl-ctx-color-swatch .sl-ctx-check {
      color: rgba(0,0,0,0.78) !important;
      text-shadow: 0 1px 0 rgba(255,255,255,0.66) !important;
    }
    [data-theme-mode="light"] .sl-context-menu .sl-ctx-item.danger {
      color: #d11a2a !important;
    }
    [data-theme-mode="light"] .sl-context-menu .sl-ctx-duration-input,
    [data-theme-mode="light"] .sl-context-menu .sl-ctx-duration-step {
      border-color: rgba(0, 0, 0, 0.14) !important;
      background: rgba(0, 0, 0, 0.06) !important;
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .sl-context-menu .sl-ctx-duration-input:hover,
    [data-theme-mode="light"] .sl-context-menu .sl-ctx-duration-step:hover {
      background: rgba(0, 0, 0, 0.1) !important;
    }

    /* ── Studio items (extras pane, etc.) ── */
    [data-theme-mode="light"] .studio-item {
      background: rgba(0, 0, 0, 0.03) !important;
      border-color: rgba(0, 0, 0, 0.06) !important;
    }

    /* ── Studio pane body ── */
    [data-theme-mode="light"] .studio-pane-body {
      scrollbar-color: rgba(0, 0, 0, 0.10) transparent !important;
    }
    [data-theme-mode="light"] .studio-pane-body::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.10) !important;
    }

    /* ── Studio pane footer buttons ── */
    [data-theme-mode="light"] .studio-pane-footer-btn:hover {
      background: rgba(0, 0, 0, 0.06) !important;
    }
    [data-theme-mode="light"] .studio-pane-footer-btn:active {
      background: rgba(0, 0, 0, 0.10) !important;
    }

    /* ── Streaming card ── */
    [data-theme-mode="light"] .pgm-stream-card {
      background: rgba(0, 0, 0, 0.03) !important;
      border-color: rgba(0, 0, 0, 0.10) !important;
      box-shadow: none !important;
    }
    [data-theme-mode="light"] .pgm-stream-title {
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .pgm-stream-help {
      color: #6e6e73 !important;
      background: rgba(0, 0, 0, 0.03) !important;
      border-color: rgba(0, 0, 0, 0.06) !important;
    }
    [data-theme-mode="light"] .pgm-stream-pill {
      color: #6e6e73 !important;
      background: rgba(0, 0, 0, 0.04) !important;
      border-color: rgba(0, 0, 0, 0.10) !important;
    }
    [data-theme-mode="light"] .pgm-stream-pill.live {
      color: #c62828 !important;
      background: rgba(198, 40, 40, 0.10) !important;
      border-color: rgba(198, 40, 40, 0.30) !important;
    }
    [data-theme-mode="light"] .pgm-stream-btn {
      background: rgba(0, 0, 0, 0.04) !important;
      border-color: rgba(0, 0, 0, 0.12) !important;
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .pgm-stream-btn:hover {
      background: rgba(0, 0, 0, 0.08) !important;
      border-color: rgba(0, 0, 0, 0.18) !important;
    }
    [data-theme-mode="light"] .pgm-stream-btn.primary {
      background: var(--accent) !important;
      border-color: var(--accent) !important;
      color: #fff !important;
    }
    [data-theme-mode="light"] .pgm-stream-btn.primary.live {
      background: linear-gradient(135deg, #e53935, #c62828) !important;
      border-color: rgba(198, 40, 40, 0.60) !important;
    }
    [data-theme-mode="light"] .pgm-stream-meta {
      color: #6e6e73 !important;
    }
    [data-theme-mode="light"] .pgm-stream-meta strong {
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .pgm-stream-input {
      background: rgba(0, 0, 0, 0.04) !important;
      border-color: rgba(0, 0, 0, 0.12) !important;
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .pgm-stream-input:focus {
      border-color: var(--accent) !important;
      box-shadow: 0 0 0 2px rgba(0, 113, 227, 0.18) !important;
    }
    [data-theme-mode="light"] .pgm-stream-label {
      color: #86868b !important;
    }
    [data-theme-mode="light"] .pgm-mix-debug-panel {
      background: rgba(255, 149, 0, 0.06) !important;
      border-color: rgba(255, 149, 0, 0.25) !important;
      color: #86868b !important;
    }
    [data-theme-mode="light"] .pgm-mix-debug-title strong {
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .pgm-mix-debug-row {
      color: #6e6e73 !important;
    }
    [data-theme-mode="light"] .pgm-mix-debug-level {
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .pgm-mix-debug-muted {
      color: #ff3b30 !important;
    }

    /* ── Header toolbar buttons — theme-aware ── */
    [data-theme-mode="light"] .header-toolbar .btn,
    [data-theme-mode="light"] .header-toolbar .btn-live {
      background: rgba(0, 0, 0, 0.04) !important;
      border-color: rgba(0, 0, 0, 0.10) !important;
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .header-toolbar .btn:hover,
    [data-theme-mode="light"] .header-toolbar .btn-live:hover {
      background: rgba(0, 0, 0, 0.08) !important;
    }
    [data-theme-mode="light"] .toolbar-mode-switch {
      background: rgba(0, 0, 0, 0.03) !important;
      border-color: rgba(0, 0, 0, 0.08) !important;
    }
    [data-theme-mode="light"] .t-btn:not(:disabled):hover {
      background: rgba(0, 0, 0, 0.06) !important;
      color: #1c1c1e !important;
    }

    /* ── Program display ── */
    [data-theme-mode="light"] #program-display-panel {
      border-left-color: rgba(0, 0, 0, 0.08) !important;
    }
    [data-theme-mode="light"] #program-display-stage {
      background: var(--bg-dark) !important;
    }
    [data-theme-mode="light"] #program-display-shell {
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12) !important;
    }
    [data-theme-mode="light"] #program-scale-controls {
      border-color: rgba(0, 0, 0, 0.08) !important;
    }

    /* ── Program output meter ── */
    [data-theme-mode="light"] #pgm-output-meter {
      background: rgba(0, 0, 0, 0.05) !important;
      border-color: rgba(0, 0, 0, 0.10) !important;
    }
    [data-theme-mode="light"] #pgm-output-meter .pgm-volume-col {
      background: rgba(0, 0, 0, 0.05) !important;
      border-color: rgba(0, 0, 0, 0.10) !important;
    }

    /* ── Audio Mixer ctrl-meter-row ── */
    [data-theme-mode="light"] .ctrl-meter-row {
      background: rgba(0, 0, 0, 0.02) !important;
      border-color: rgba(0, 0, 0, 0.06) !important;
    }
    [data-theme-mode="light"] .ctrl-input-mode-btn {
      color: #4b5563;
      background: rgba(0, 0, 0, 0.03);
      border-color: rgba(0, 0, 0, 0.08);
    }
    [data-theme-mode="light"] .ctrl-input-mode-btn.active {
      color: #0a84ff;
      background: rgba(10, 132, 255, 0.14);
      border-color: rgba(10, 132, 255, 0.38);
    }
    [data-theme-mode="light"] .ctrl-meter-btn {
      color: #4b5563;
      background: rgba(0, 0, 0, 0.03);
      border-color: rgba(0, 0, 0, 0.1);
    }
    [data-theme-mode="light"] .ctrl-meter-btn:hover {
      color: #1c1c1e;
      background: rgba(0, 0, 0, 0.08);
    }
    [data-theme-mode="light"] .ctrl-spatial-label { color: rgba(0, 0, 0, 0.5); }
    [data-theme-mode="light"] .ctrl-spatial-val { color: rgba(0, 0, 0, 0.7); }

    /* ── Toast notifications ── */
    [data-theme-mode="light"] .toast {
      background: #ffffff !important;
      color: #1c1c1e !important;
      border-color: rgba(0, 0, 0, 0.10) !important;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
    }

    /* ── Preset popover ── */
    [data-theme-mode="light"] .preset-popover {
      background: #ffffff !important;
      border-color: rgba(0, 0, 0, 0.12) !important;
      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.15) !important;
      color: #1c1c1e !important;
    }

    /* ── Confirm modal ── */
    [data-theme-mode="light"] .confirm-modal input {
      background: rgba(0, 0, 0, 0.04) !important;
      border-color: rgba(0, 0, 0, 0.12) !important;
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .confirm-modal h3 {
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .confirm-modal p {
      color: #6e6e73 !important;
    }

    /* ── Activity bar buttons ── */
    [data-theme-mode="light"] .ab-btn:hover {
      background: rgba(0, 0, 0, 0.06) !important;
    }
    [data-theme-mode="light"] .ab-btn.active {
      color: var(--accent) !important;
      background: rgba(0, 122, 255, 0.08) !important;
    }
    [data-theme-mode="light"] .ab-btn svg {
      stroke: currentColor;
    }

    /* ── Editor color input ── */
    [data-theme-mode="light"] .editor-color-input input[type="text"] {
      background: rgba(0, 0, 0, 0.04) !important;
      border-color: rgba(0, 0, 0, 0.10) !important;
      color: #1c1c1e !important;
    }

    /* ── Record page ── */
    [data-theme-mode="light"] #page-record {
      background: var(--bg-dark) !important;
    }
    [data-theme-mode="light"] .rec-topbar {
      background: var(--bg-dark) !important;
    }
    [data-theme-mode="light"] .rec-brand-text {
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .rec-hamburger-btn {
      color: #6e6e73 !important;
    }
    [data-theme-mode="light"] .rec-hamburger-btn:hover {
      background: rgba(0, 0, 0, 0.06) !important;
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .rec-menu-dropdown {
      background: #ffffff !important;
      border-color: rgba(0, 0, 0, 0.12) !important;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
    }
    [data-theme-mode="light"] .rec-menu-item {
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .rec-menu-item:hover {
      background: rgba(0, 0, 0, 0.05) !important;
    }
    [data-theme-mode="light"] .rec-menu-divider {
      background: rgba(0, 0, 0, 0.08) !important;
    }
    [data-theme-mode="light"] .rec-add-track-btn {
      background: rgba(0, 0, 0, 0.06) !important;
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .rec-add-track-btn:hover {
      background: rgba(0, 0, 0, 0.10) !important;
    }
    [data-theme-mode="light"] .rec-add-track-btn svg {
      stroke: #1c1c1e !important;
    }

    /* ── Record window ── */
    [data-theme-mode="light"] .rec-window {
      background: #ffffff !important;
      border-color: rgba(0, 0, 0, 0.14) !important;
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.18) !important;
    }
    [data-theme-mode="light"] .rec-window.design-studio {
      background: #ffffff !important;
      border-color: rgba(0, 0, 0, 0.14) !important;
      box-shadow: 0 34px 82px rgba(0, 0, 0, 0.18) !important;
    }
    [data-theme-mode="light"] .rec-w-title {
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .rec-w-title:hover {
      border-bottom-color: rgba(0, 0, 0, 0.12) !important;
    }
    [data-theme-mode="light"] .rec-w-title:focus {
      border-bottom-color: rgba(0, 0, 0, 0.25) !important;
    }
    [data-theme-mode="light"] .rec-w-label {
      color: rgba(0, 0, 0, 0.40) !important;
    }
    [data-theme-mode="light"] .rec-w-value {
      color: #48535e !important;
    }
    [data-theme-mode="light"] .rec-w-select {
      color: #48535e !important;
      background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='rgba(0,0,0,0.3)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    }
    [data-theme-mode="light"] .rec-w-select:hover {
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .rec-w-select option {
      background: #ffffff !important;
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .rec-w-divider {
      background: rgba(0, 0, 0, 0.08) !important;
    }
    [data-theme-mode="light"] .rec-w-mute-btn svg {
      color: rgba(0, 0, 0, 0.55) !important;
    }
    [data-theme-mode="light"] .rec-link-node {
      border-color: rgba(0, 0, 0, 0.45) !important;
      background: rgba(255, 255, 255, 0.85) !important;
    }
    [data-theme-mode="light"] .rec-window.design-studio .rec-w-head {
      background: rgba(0, 0, 0, 0.03) !important;
      border-color: rgba(0, 0, 0, 0.08) !important;
    }
    [data-theme-mode="light"] .rec-window.design-studio .rec-w-row {
      background: rgba(0, 0, 0, 0.03) !important;
      border-color: rgba(0, 0, 0, 0.08) !important;
    }

    /* ── Record FX popup (shared between record & source FX) ── */
    [data-theme-mode="light"] .rec-fx-popup {
      background: #ffffff !important;
      border-color: rgba(0, 0, 0, 0.14) !important;
      box-shadow: 0 28px 72px rgba(0, 0, 0, 0.12) !important;
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .rec-fx-header {
      border-bottom-color: rgba(0, 0, 0, 0.08) !important;
      background: rgba(0, 0, 0, 0.02) !important;
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .rec-fx-row {
      border-color: rgba(0, 0, 0, 0.06) !important;
      background: rgba(0, 0, 0, 0.02) !important;
    }
    [data-theme-mode="light"] .rec-fx-row:hover {
      background: rgba(0, 0, 0, 0.04) !important;
    }
    [data-theme-mode="light"] .rec-fx-label,
    [data-theme-mode="light"] .rec-fx-name {
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .rec-fx-param label {
      color: #6e6e73 !important;
    }
    [data-theme-mode="light"] .rec-fx-param input[type="range"]::-webkit-slider-runnable-track {
      background: rgba(0, 0, 0, 0.10) !important;
    }

    /* ── Scene / Source popup modals (sp-overlay) ── */
    [data-theme-mode="light"] .sp-overlay {
      background: rgba(0, 0, 0, 0.08) !important;
    }

    /* ── Global scrollbar overrides ── */
    [data-theme-mode="light"] ::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.12);
    }
    [data-theme-mode="light"] ::-webkit-scrollbar-thumb:hover {
      background: rgba(0, 0, 0, 0.20);
    }
    [data-theme-mode="light"] ::-webkit-scrollbar-track {
      background: transparent;
    }
    [data-theme-mode="light"] * {
      scrollbar-color: rgba(0, 0, 0, 0.12) transparent;
    }

    /* ── Header toolbar button SVG icons ── */
    [data-theme-mode="light"] .header-toolbar-btn svg,
    [data-theme-mode="light"] .ctrl-action-btn svg {
      stroke: currentColor !important;
    }
    [data-theme-mode="light"] .header-toolbar-btn:hover,
    [data-theme-mode="light"] .ctrl-action-btn:hover {
      background: rgba(0, 0, 0, 0.06) !important;
    }

    /* ── Studio dock overall ── */
    [data-theme-mode="light"] #studio-dock {
      border-top-color: rgba(0, 0, 0, 0.08) !important;
    }
    [data-theme-mode="light"] .studio-pane {
      border-right-color: rgba(0, 0, 0, 0.06) !important;
    }
    [data-theme-mode="light"] .studio-pane-title {
      border-bottom-color: rgba(0, 0, 0, 0.06) !important;
    }

    /* ── PGM AV-sync input ── */
    [data-theme-mode="light"] .pgm-av-sync-input {
      background: rgba(0, 0, 0, 0.04) !important;
      border-color: rgba(0, 0, 0, 0.10) !important;
      color: #1c1c1e !important;
    }

    /* ── Quick-add button ── */
    [data-theme-mode="light"] .quick-add {
      color: #6e6e73 !important;
    }
    [data-theme-mode="light"] .quick-add:hover {
      color: #1c1c1e !important;
    }

    /* ── Dock resize handle ── */
    [data-theme-mode="light"] .dock-resize-handle-bar {
      background: rgba(0, 0, 0, 0.15) !important;
    }

    /* ── Page navigation bar ── */
    [data-theme-mode="light"] #page-nav-bar {
      border-top-color: rgba(0, 0, 0, 0.08) !important;
    }
    [data-theme-mode="light"] .page-nav-btn {
      color: #86868b !important;
    }
    [data-theme-mode="light"] .page-nav-btn:hover {
      color: #1c1c1e !important;
      background: rgba(0, 0, 0, 0.04) !important;
    }
    [data-theme-mode="light"] .page-nav-btn.active {
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .page-nav-btn svg {
      stroke: currentColor !important;
    }
    [data-theme-mode="light"] .workspace-font-size-control {
      color: #1c1c1e !important;
      background: rgba(0, 0, 0, 0.04) !important;
      border-color: rgba(0, 0, 0, 0.10) !important;
    }
    [data-theme-mode="light"] .workspace-font-size-step,
    [data-theme-mode="light"] .workspace-font-size-value {
      border-color: rgba(0, 0, 0, 0.08) !important;
    }
    [data-theme-mode="light"] .workspace-font-size-step:hover,
    [data-theme-mode="light"] .workspace-font-size-value:hover {
      background: rgba(0, 0, 0, 0.08) !important;
    }

    /* ── Activity bar popup menu (gear menu) ── */
    [data-theme-mode="light"] .ab-popup-menu {
      background: rgba(255, 255, 255, 0.95) !important;
      border-color: rgba(0, 0, 0, 0.12) !important;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14) !important;
      color: #1c1c1e !important;
      backdrop-filter: blur(20px) !important;
    }
    [data-theme-mode="light"] .ab-popup-menu .ab-popup-item {
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .ab-popup-menu .ab-popup-item:hover {
      background: rgba(0, 0, 0, 0.06) !important;
    }
    [data-theme-mode="light"] .ab-popup-menu .ab-popup-sep {
      background: rgba(0, 0, 0, 0.08) !important;
    }
    [data-theme-mode="light"] .ab-popup-menu .ab-popup-sub {
      background: rgba(255, 255, 255, 0.97) !important;
      border-color: rgba(0, 0, 0, 0.10) !important;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
    }
    [data-theme-mode="light"] .ab-sub-search {
      background: rgba(0, 0, 0, 0.03) !important;
      border-bottom-color: rgba(0, 0, 0, 0.08) !important;
    }
    [data-theme-mode="light"] .ab-sub-search input {
      background: rgba(0, 0, 0, 0.04) !important;
      border-color: rgba(0, 0, 0, 0.10) !important;
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .ab-sub-search input::placeholder {
      color: #86868b !important;
    }

    /* ── Settings modal extras (title bar, category titles, toggles) ── */
    [data-theme-mode="light"] .settings-modal-title {
      background: var(--bg-panel, #ffffff) !important;
      border-bottom-color: rgba(0, 0, 0, 0.08) !important;
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .settings-category-title {
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .settings-category-title:hover {
      background: rgba(0, 122, 255, 0.08) !important;
      color: #007AFF !important;
    }
    [data-theme-mode="light"] .settings-category-title::after {
      color: #86868b !important;
    }
    [data-theme-mode="light"] .settings-category-title:hover::after {
      color: #007AFF !important;
    }
    [data-theme-mode="light"] .url-clear-btn {
      background: rgba(0, 0, 0, 0.04) !important;
      border-color: rgba(0, 0, 0, 0.10) !important;
      color: #6e6e73 !important;
    }
    [data-theme-mode="light"] .url-clear-btn:hover {
      color: #1c1c1e !important;
      border-color: var(--accent) !important;
    }
    [data-theme-mode="light"] .settings-input:hover,
    [data-theme-mode="light"] .settings-select:hover {
      border-color: rgba(0, 0, 0, 0.20) !important;
    }
    [data-theme-mode="light"] .settings-input:focus,
    [data-theme-mode="light"] .settings-select:focus {
      border-color: rgba(0, 122, 255, 0.5) !important;
      box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.12) !important;
      background: rgba(0, 0, 0, 0.02) !important;
    }

    /* ── Livestreaming page ── */
    [data-theme-mode="light"] #page-livestreaming {
      background: var(--bg-dark) !important;
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .ls-page {
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .ls-topbar {
      background: rgba(0, 0, 0, 0.04) !important;
      border-bottom-color: rgba(0, 0, 0, 0.08) !important;
    }
    [data-theme-mode="light"] .ls-btn {
      background: rgba(0, 0, 0, 0.05) !important;
      border-color: rgba(0, 0, 0, 0.10) !important;
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .ls-btn:hover {
      background: rgba(0, 0, 0, 0.08) !important;
    }
    [data-theme-mode="light"] .ls-btn-icon:hover {
      background: rgba(0, 0, 0, 0.06) !important;
    }
    [data-theme-mode="light"] .ls-encoder-status {
      background: rgba(0, 0, 0, 0.04) !important;
      border-color: rgba(0, 0, 0, 0.08) !important;
      color: #48535e !important;
    }
    [data-theme-mode="light"] .ls-live-indicator {
      background: rgba(0, 0, 0, 0.04) !important;
      border-color: rgba(0, 0, 0, 0.08) !important;
    }
    [data-theme-mode="light"] .ls-source-tabs {
      background: rgba(0, 0, 0, 0.04) !important;
      border-color: rgba(0, 0, 0, 0.06) !important;
    }
    [data-theme-mode="light"] .ls-source-tab {
      color: #6e6e73 !important;
    }
    [data-theme-mode="light"] .ls-source-tab:hover {
      background: rgba(0, 0, 0, 0.04) !important;
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .ls-source-tab.active {
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .ls-stream-title {
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .ls-stream-title:focus {
      border-color: rgba(0, 122, 255, 0.4) !important;
      background: rgba(0, 0, 0, 0.02) !important;
    }
    [data-theme-mode="light"] .ls-camera-select,
    [data-theme-mode="light"] .ls-audio-select {
      background: rgba(0, 0, 0, 0.04) !important;
      border-color: rgba(0, 0, 0, 0.10) !important;
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .ls-camera-refresh,
    [data-theme-mode="light"] .ls-audio-refresh {
      border-color: rgba(0, 0, 0, 0.10) !important;
      color: #6e6e73 !important;
    }
    [data-theme-mode="light"] .ls-camera-refresh:hover,
    [data-theme-mode="light"] .ls-audio-refresh:hover {
      background: rgba(0, 0, 0, 0.06) !important;
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .ls-aspect-btn {
      background: rgba(0, 0, 0, 0.03) !important;
      border-color: rgba(0, 0, 0, 0.08) !important;
      color: #48535e !important;
    }
    [data-theme-mode="light"] .ls-aspect-btn:hover {
      background: rgba(0, 0, 0, 0.06) !important;
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .ls-aspect-btn.active {
      color: #fff !important;
    }
    [data-theme-mode="light"] .ls-preview-ctx {
      background: rgba(255, 255, 255, 0.96) !important;
      border-color: rgba(0, 0, 0, 0.12) !important;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .ls-preview-ctx-item:hover {
      background: rgba(0, 0, 0, 0.05) !important;
    }
    [data-theme-mode="light"] .ls-preview-ctx-sep {
      background: rgba(0, 0, 0, 0.08) !important;
    }
    [data-theme-mode="light"] .ls-no-signal {
      color: #86868b !important;
    }
    [data-theme-mode="light"] .ls-preview-badge {
      background: rgba(0, 122, 255, 0.12) !important;
      color: #007AFF !important;
      border-color: rgba(0, 122, 255, 0.20) !important;
    }
    [data-theme-mode="light"] .ls-audio-meter {
      background: rgba(0, 0, 0, 0.05) !important;
      border-color: rgba(0, 0, 0, 0.10) !important;
    }
    [data-theme-mode="light"] .ls-meter-hp-btn {
      border-top-color: rgba(0, 0, 0, 0.06) !important;
      color: rgba(0, 0, 0, 0.35) !important;
    }
    [data-theme-mode="light"] .ls-meter-hp-btn:hover {
      background: rgba(0, 0, 0, 0.06) !important;
      color: rgba(0, 0, 0, 0.6) !important;
    }
    [data-theme-mode="light"] .ls-audio-bar {
      background: linear-gradient(to top, #f0f0f5 0%, #e8e8ed 100%) !important;
      border-color: rgba(0, 0, 0, 0.08) !important;
    }
    [data-theme-mode="light"] .ls-health-item {
      background: rgba(0, 0, 0, 0.03) !important;
      border-color: rgba(0, 0, 0, 0.06) !important;
    }
    /* Livestreaming sidebar */
    [data-theme-mode="light"] .ls-sidebar {
      background: rgba(0, 0, 0, 0.03) !important;
    }
    [data-theme-mode="light"] .ls-card {
      background: rgba(0, 0, 0, 0.02) !important;
    }
    [data-theme-mode="light"] .ls-card-header {
      background: rgba(0, 0, 0, 0.04) !important;
    }
    [data-theme-mode="light"] .ls-protocol-tabs {
      background: rgba(0, 0, 0, 0.06) !important;
    }
    [data-theme-mode="light"] .ls-proto-btn {
      color: #6e6e73 !important;
    }
    [data-theme-mode="light"] .ls-proto-btn:hover {
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .ls-input {
      background: rgba(0, 0, 0, 0.04) !important;
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .ls-dest-item {
      background: rgba(0, 0, 0, 0.03) !important;
      border-color: rgba(0, 0, 0, 0.06) !important;
    }
    [data-theme-mode="light"] .ls-dest-item:hover {
      background: rgba(0, 0, 0, 0.06) !important;
    }
    [data-theme-mode="light"] .ls-dest-icon {
      background: rgba(0, 0, 0, 0.06) !important;
    }
    [data-theme-mode="light"] .ls-dest-toggle {
      background: rgba(0, 0, 0, 0.12) !important;
    }
    [data-theme-mode="light"] .ls-quick-btn {
      border-color: rgba(0, 0, 0, 0.06) !important;
      background: rgba(0, 0, 0, 0.02) !important;
    }
    [data-theme-mode="light"] .ls-quick-btn:hover {
      background: rgba(0, 0, 0, 0.06) !important;
      border-color: rgba(0, 0, 0, 0.12) !important;
    }
    [data-theme-mode="light"] .ls-dest-modal-header {
      background: rgba(0, 0, 0, 0.03) !important;
    }
    [data-theme-mode="light"] .ls-dest-modal-footer {
      background: rgba(0, 0, 0, 0.03) !important;
    }
    [data-theme-mode="light"] .ls-lt-content {
      background: rgba(0, 0, 0, 0.75) !important;
    }
    /* Portrait layout panels */
    [data-theme-mode="light"] .ls-page.portrait-layout .ls-portrait-left-panel,
    [data-theme-mode="light"] .ls-page.portrait-layout .ls-portrait-right-panel {
      background: rgba(0, 0, 0, 0.03) !important;
    }

    /* ── Generic rgba(255,255,255,*) hardcoded colors in light mode ── */
    [data-theme-mode="light"] .rec-window.design-studio .rec-w-title {
      color: var(--accent) !important;
    }

    /* ── Source compositor (webview container in program view) ── */
    [data-theme-mode="light"] #source-compositor {
      border-color: rgba(0, 0, 0, 0.06) !important;
    }

    /* ── Bible nav panel ── */
    [data-theme-mode="light"] .nav-input {
      background: rgba(0, 0, 0, 0.04) !important;
      border-color: rgba(0, 0, 0, 0.10) !important;
      color: #1c1c1e !important;
    }

    /* ── Bible tool panel (dual version dropdown) ── */
    [data-theme-mode="light"] .bible-tool-panel {
      background: #ffffff !important;
      border-color: rgba(0, 0, 0, 0.12) !important;
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15) !important;
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .bible-tool-panel::before {
      background: #ffffff !important;
      border-left-color: rgba(0, 0, 0, 0.12) !important;
      border-top-color: rgba(0, 0, 0, 0.12) !important;
    }
    [data-theme-mode="light"] #annotate-toolbar {
      background: #ffffff !important;
      border-color: rgba(0, 0, 0, 0.12) !important;
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15) !important;
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .annotate-hex-input {
      background: rgba(0, 0, 0, 0.03) !important;
      border-color: rgba(0, 0, 0, 0.12) !important;
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .annotate-clear-btn {
      background: rgba(0, 0, 0, 0.06) !important;
      border-color: rgba(0, 0, 0, 0.12) !important;
      color: #1c1c1e !important;
    }

    /* ── Source FX close dot ── */
    [data-theme-mode="light"] #source-fx-overlay .source-fx-close-dot {
      background: rgba(0, 0, 0, 0.08) !important;
    }
    [data-theme-mode="light"] #source-fx-overlay .source-fx-close-dot svg {
      color: #1c1c1e !important;
    }

    /* ── Toolbar icon buttons (with SVG icons) ── */
    [data-theme-mode="light"] .toolbar-icon-btn {
      color: #1c1c1e !important;
    }
    [data-theme-mode="light"] .toolbar-icon-btn svg {
      stroke: currentColor !important;
    }

    /* ── Header toolbar button backgrounds (when they use .btn base) ── */
    [data-theme-mode="light"] .header-toolbar .btn {
      border-color: rgba(0, 0, 0, 0.10) !important;
    }

    /* ── Annotate swatches ── */
    [data-theme-mode="light"] .annotate-swatch.selected {
      box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25) !important;
    }

    /* ── EQ / FX parameter pops ── */
    [data-theme-mode="light"] .rec-fx-param input[type="range"]::-webkit-slider-runnable-track {
      background: rgba(0, 0, 0, 0.10) !important;
    }

    /* ── Recording add-track button SVGs ── */
    [data-theme-mode="light"] .rec-add-track-btn svg {
      stroke: currentColor !important;
    }

    /* ═══════════════════════════════════════════════════════
       LIQUID GLASS THEME — iOS 26 Liquid Glass Design
       Translucent, refractive, depth-aware glass surfaces
       ═══════════════════════════════════════════════════════ */

    /* ── Liquid Glass: Core glass layer mixins via custom props ── */
    [data-theme="liquid-glass"] {
      --lg-blur: 40px;
      --lg-blur-heavy: 60px;
      --lg-blur-light: 20px;
      --lg-surface: rgba(255, 255, 255, 0.32);
      --lg-surface-hover: rgba(255, 255, 255, 0.42);
      --lg-surface-active: rgba(255, 255, 255, 0.50);
      --lg-surface-elevated: rgba(255, 255, 255, 0.55);
      --lg-specular-top: rgba(255, 255, 255, 0.75);
      --lg-specular-bottom: rgba(255, 255, 255, 0.10);
      --lg-border: rgba(255, 255, 255, 0.50);
      --lg-border-strong: rgba(255, 255, 255, 0.65);
      --lg-border-inner: 0 0.5px 0 0 rgba(255, 255, 255, 0.60) inset, 0 -0.5px 0 0 rgba(0, 0, 0, 0.04) inset;
      --lg-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
      --lg-shadow-elevated: 0 16px 48px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
      --lg-shadow-popup: 0 24px 80px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.08);
      --lg-highlight: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.0) 50%);
      --lg-btn-bg: linear-gradient(180deg, rgba(255,255,255,0.52) 0%, rgba(255,255,255,0.22) 100%);
      --lg-btn-bg-hover: linear-gradient(180deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.32) 100%);
      --lg-pill-radius: 100px;
    }

    /* ── Body & Background ── */
    [data-theme="liquid-glass"] body {
      background: linear-gradient(145deg, #c2cce0 0%, #b0badb 25%, #d2cce8 55%, #bfc8e0 100%) !important;
    }
    [data-theme="liquid-glass"] body::before {
      content: '';
      position: fixed;
      inset: 0;
      background:
        radial-gradient(800px 500px at 20% 20%, rgba(120, 160, 255, 0.18), transparent 60%),
        radial-gradient(600px 400px at 80% 70%, rgba(200, 155, 255, 0.12), transparent 55%),
        radial-gradient(500px 300px at 50% 50%, rgba(255, 180, 200, 0.06), transparent 50%);
      pointer-events: none;
      z-index: 0;
    }

    /* ── Activity Bar — frosted glass rail ── */
    [data-theme="liquid-glass"] #activity-bar {
      background: var(--lg-surface) !important;
      backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.8) !important;
      -webkit-backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.8) !important;
      border-right: 0.5px solid var(--lg-border) !important;
      box-shadow: var(--lg-border-inner), 1px 0 12px rgba(0,0,0,0.04) !important;
    }
    [data-theme="liquid-glass"] .ab-btn {
      border-radius: 12px !important;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    [data-theme="liquid-glass"] .ab-btn:hover {
      background: var(--lg-surface-hover) !important;
      box-shadow: var(--lg-border-inner) !important;
    }
    [data-theme="liquid-glass"] .ab-btn.active {
      background: linear-gradient(180deg, rgba(0, 122, 255, 0.18) 0%, rgba(0, 122, 255, 0.08) 100%) !important;
      color: #007AFF !important;
      box-shadow: var(--lg-border-inner), 0 2px 8px rgba(0, 122, 255, 0.12) !important;
    }

    /* ── Activity Bar Popup / Gear Menu — elevated glass ── */
    [data-theme="liquid-glass"] .ab-popup-menu {
      background: var(--lg-surface-elevated) !important;
      backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.9) !important;
      -webkit-backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.9) !important;
      border: 0.5px solid var(--lg-border-strong) !important;
      border-radius: 16px !important;
      box-shadow: var(--lg-shadow-popup), var(--lg-border-inner) !important;
    }
    [data-theme="liquid-glass"] .ab-popup-item {
      border-radius: 10px !important;
      margin: 1px 6px !important;
      padding: 7px 12px !important;
      transition: all 0.15s !important;
    }
    [data-theme="liquid-glass"] .ab-popup-item:hover {
      background: var(--lg-surface-hover) !important;
      box-shadow: var(--lg-border-inner) !important;
    }
    [data-theme="liquid-glass"] .ab-popup-sep {
      background: var(--lg-border) !important;
      margin: 4px 12px !important;
      opacity: 0.4 !important;
    }
    [data-theme="liquid-glass"] .ab-popup-sub {
      background: var(--lg-surface-elevated) !important;
      backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.9) !important;
      -webkit-backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.9) !important;
      border: 0.5px solid var(--lg-border-strong) !important;
      border-radius: 14px !important;
      box-shadow: var(--lg-shadow-popup), var(--lg-border-inner) !important;
    }
    [data-theme="liquid-glass"] .ab-sub-search {
      background: transparent !important;
      border-bottom: 0.5px solid rgba(255,255,255,0.30) !important;
    }
    [data-theme="liquid-glass"] .ab-sub-search input {
      background: rgba(255, 255, 255, 0.25) !important;
      border: 0.5px solid var(--lg-border) !important;
      border-radius: var(--lg-pill-radius) !important;
      backdrop-filter: blur(8px) !important;
      color: #1c1c1e !important;
    }

    /* ── Header Toolbar — glass strip ── */
    [data-theme="liquid-glass"] .header-toolbar {
      background: var(--lg-surface) !important;
      backdrop-filter: blur(var(--lg-blur)) saturate(1.7) !important;
      -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(1.7) !important;
      border-bottom: 0.5px solid var(--lg-border) !important;
      box-shadow: var(--lg-border-inner), 0 1px 8px rgba(0,0,0,0.03) !important;
    }
    [data-theme="liquid-glass"] .header-toolbar-btn,
    [data-theme="liquid-glass"] .ctrl-action-btn {
      background: var(--lg-btn-bg) !important;
      border: 0.5px solid var(--lg-border) !important;
      border-radius: 10px !important;
      box-shadow: var(--lg-border-inner) !important;
      backdrop-filter: blur(12px) !important;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    [data-theme="liquid-glass"] .header-toolbar-btn:hover,
    [data-theme="liquid-glass"] .ctrl-action-btn:hover {
      background: var(--lg-btn-bg-hover) !important;
      box-shadow: var(--lg-border-inner), 0 2px 8px rgba(0,0,0,0.06) !important;
      transform: translateY(-0.5px) !important;
    }
    [data-theme="liquid-glass"] .header-toolbar-btn:active,
    [data-theme="liquid-glass"] .ctrl-action-btn:active {
      transform: translateY(0) scale(0.97) !important;
      background: var(--lg-surface-active) !important;
    }

    /* ── Sidebar — glass panel ── */
    [data-theme="liquid-glass"] #sidebar {
      background: var(--lg-surface) !important;
      backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.8) !important;
      -webkit-backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.8) !important;
      border-right: 0.5px solid var(--lg-border) !important;
      box-shadow: var(--lg-border-inner) !important;
    }
    [data-theme="liquid-glass"] .sidebar-tabs {
      border-bottom: 0.5px solid rgba(255,255,255,0.30) !important;
      background: transparent !important;
    }
    [data-theme="liquid-glass"] .tab:hover {
      background: var(--lg-surface-hover) !important;
      border-radius: 8px !important;
    }

    /* ── Search Inputs — glass pill fields ── */
    [data-theme="liquid-glass"] #song-search,
    [data-theme="liquid-glass"] #bible-search,
    [data-theme="liquid-glass"] .nav-input {
      background: rgba(255, 255, 255, 0.35) !important;
      border: 0.5px solid var(--lg-border) !important;
      border-radius: var(--lg-pill-radius) !important;
      box-shadow: var(--lg-border-inner) !important;
      backdrop-filter: blur(12px) !important;
      color: #1c1c1e !important;
      transition: all 0.2s !important;
    }
    [data-theme="liquid-glass"] #song-search:focus,
    [data-theme="liquid-glass"] #bible-search:focus,
    [data-theme="liquid-glass"] .nav-input:focus {
      background: rgba(255, 255, 255, 0.50) !important;
      border-color: rgba(0, 122, 255, 0.35) !important;
      box-shadow: var(--lg-border-inner), 0 0 0 3px rgba(0, 122, 255, 0.10) !important;
    }
    [data-theme="liquid-glass"] #search-autocomplete {
      background: var(--lg-surface-elevated) !important;
      backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.8) !important;
      -webkit-backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.8) !important;
      border: 0.5px solid var(--lg-border-strong) !important;
      border-radius: 16px !important;
      box-shadow: var(--lg-shadow-popup), var(--lg-border-inner) !important;
    }

    /* ── Song/Source List Items — glass rows ── */
    [data-theme="liquid-glass"] .song-item:hover,
    [data-theme="liquid-glass"] .source-item:hover {
      background: var(--lg-surface-hover) !important;
      border-radius: 10px !important;
    }
    [data-theme="liquid-glass"] .song-item.active {
      background: linear-gradient(180deg, rgba(0,122,255,0.15) 0%, rgba(0,122,255,0.06) 100%) !important;
      border-radius: 10px !important;
      box-shadow: var(--lg-border-inner) !important;
    }

    /* ── Version Buttons — glass pills ── */
    [data-theme="liquid-glass"] .version-wrapper {
      background: rgba(255, 255, 255, 0.25) !important;
      border-radius: 10px !important;
      box-shadow: var(--lg-border-inner) !important;
      backdrop-filter: blur(8px) !important;
    }
    [data-theme="liquid-glass"] .version-wrapper:hover {
      background: var(--lg-surface-hover) !important;
    }
    [data-theme="liquid-glass"] .version-wrapper.active {
      background: linear-gradient(180deg, rgba(0,122,255,0.18) 0%, rgba(0,122,255,0.08) 100%) !important;
      box-shadow: var(--lg-border-inner), 0 2px 8px rgba(0,122,255,0.10) !important;
    }

    /* ── Lyric Buttons — glass cards ── */
    [data-theme="liquid-glass"] .lyric-btn {
      background: var(--lg-surface) !important;
      border: 0.5px solid var(--lg-border) !important;
      border-radius: 14px !important;
      box-shadow: var(--lg-border-inner), var(--lg-shadow) !important;
      backdrop-filter: blur(var(--lg-blur-light)) !important;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    [data-theme="liquid-glass"] .lyric-btn:hover {
      background: var(--lg-surface-hover) !important;
      transform: translateY(-1px) !important;
      box-shadow: var(--lg-border-inner), var(--lg-shadow-elevated) !important;
    }
    [data-theme="liquid-glass"] .lyric-btn.active {
      background: linear-gradient(180deg, rgba(0,122,255,0.20) 0%, rgba(0,122,255,0.08) 100%) !important;
      border-color: rgba(0,122,255,0.30) !important;
      box-shadow: var(--lg-border-inner), 0 4px 16px rgba(0,122,255,0.12) !important;
    }

    /* ── Segmented Picker — glass capsule ── */
    [data-theme="liquid-glass"] .segmented-picker {
      background: rgba(255, 255, 255, 0.22) !important;
      border: 0.5px solid var(--lg-border) !important;
      border-radius: var(--lg-pill-radius) !important;
      box-shadow: var(--lg-border-inner) !important;
      backdrop-filter: blur(12px) !important;
      padding: 3px !important;
    }
    [data-theme="liquid-glass"] .seg-btn {
      border-radius: var(--lg-pill-radius) !important;
    }
    [data-theme="liquid-glass"] .seg-btn.active {
      background: rgba(255, 255, 255, 0.55) !important;
      box-shadow: 0 1px 4px rgba(0,0,0,0.06), var(--lg-border-inner) !important;
    }

    /* ── Toolbar Mode Switch — glass capsule ── */
    [data-theme="liquid-glass"] .toolbar-mode-switch {
      background: rgba(255, 255, 255, 0.22) !important;
      border: 0.5px solid var(--lg-border) !important;
      border-radius: var(--lg-pill-radius) !important;
      box-shadow: var(--lg-border-inner) !important;
      backdrop-filter: blur(12px) !important;
    }
    [data-theme="liquid-glass"] .t-btn:not(:disabled):hover {
      background: var(--lg-surface-hover) !important;
      border-radius: var(--lg-pill-radius) !important;
    }

    /* ── Buttons — glass pill buttons ── */
    [data-theme="liquid-glass"] .btn {
      border: 0.5px solid var(--lg-border) !important;
      border-radius: 12px !important;
      box-shadow: var(--lg-border-inner) !important;
      backdrop-filter: blur(8px) !important;
    }
    [data-theme="liquid-glass"] .btn-secondary,
    [data-theme="liquid-glass"] .btn-outline {
      background: var(--lg-btn-bg) !important;
      border: 0.5px solid var(--lg-border) !important;
      box-shadow: var(--lg-border-inner) !important;
    }
    [data-theme="liquid-glass"] .btn-secondary:hover,
    [data-theme="liquid-glass"] .btn-outline:hover {
      background: var(--lg-btn-bg-hover) !important;
      transform: translateY(-0.5px) !important;
      box-shadow: var(--lg-border-inner), 0 2px 8px rgba(0,0,0,0.06) !important;
    }
    [data-theme="liquid-glass"] .btn-primary {
      background: linear-gradient(180deg, rgba(0,122,255,0.85) 0%, rgba(0,100,220,0.90) 100%) !important;
      border: 0.5px solid rgba(255,255,255,0.25) !important;
      box-shadow: 0 0.5px 0 0 rgba(255,255,255,0.40) inset, 0 -0.5px 0 0 rgba(0,0,0,0.10) inset, 0 4px 12px rgba(0,122,255,0.25) !important;
      color: #fff !important;
      border-radius: 12px !important;
    }
    [data-theme="liquid-glass"] .btn-primary:hover {
      background: linear-gradient(180deg, rgba(0,135,255,0.90) 0%, rgba(0,110,230,0.95) 100%) !important;
      transform: translateY(-0.5px) !important;
    }

    /* ── Mini Toggle — glass toggle ── */
    [data-theme="liquid-glass"] .mini-toggle input[type="checkbox"] {
      appearance: none !important;
      -webkit-appearance: none !important;
      width: 34px !important;
      height: 20px !important;
      border-radius: var(--lg-pill-radius) !important;
      background: rgba(0, 0, 0, 0.10) !important;
      border: 0.5px solid rgba(255,255,255,0.45) !important;
      box-shadow: 0 0.5px 0 0 rgba(255,255,255,0.50) inset !important;
      position: relative !important;
      cursor: pointer !important;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
      flex-shrink: 0 !important;
    }
    [data-theme="liquid-glass"] .mini-toggle input[type="checkbox"]::after {
      content: '' !important;
      position: absolute !important;
      top: 2px !important;
      left: 2px !important;
      width: 16px !important;
      height: 16px !important;
      border-radius: 50% !important;
      background: linear-gradient(180deg, #fff 0%, #f0f0f0 100%) !important;
      box-shadow: 0 1px 3px rgba(0,0,0,0.15), 0 0.5px 1px rgba(0,0,0,0.08) !important;
      transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
      display: block !important;
    }
    [data-theme="liquid-glass"] .mini-toggle input[type="checkbox"]:checked {
      background: linear-gradient(180deg, rgba(0,190,80,0.75) 0%, rgba(0,170,70,0.85) 100%) !important;
      border-color: rgba(255,255,255,0.30) !important;
    }
    [data-theme="liquid-glass"] .mini-toggle input[type="checkbox"]:checked::after {
      transform: translateX(14px) !important;
    }

    /* ── Remote Show Row — glass card ── */
    [data-theme="liquid-glass"] .remote-show-row {
      background: var(--lg-surface) !important;
      border: 0.5px solid var(--lg-border) !important;
      border-radius: 16px !important;
      box-shadow: var(--lg-border-inner), var(--lg-shadow) !important;
      backdrop-filter: blur(var(--lg-blur-light)) !important;
    }

    /* ── Slider — glass track & thumb ── */
    [data-theme="liquid-glass"] .settings-slider {
      background: rgba(0, 0, 0, 0.06) !important;
      border-radius: var(--lg-pill-radius) !important;
    }
    [data-theme="liquid-glass"] .settings-slider::-webkit-slider-runnable-track {
      background: linear-gradient(90deg, rgba(0,122,255,0.45) var(--slider-fill), rgba(0,0,0,0.06) var(--slider-fill)) !important;
      border-radius: var(--lg-pill-radius) !important;
    }
    [data-theme="liquid-glass"] .settings-slider::-webkit-slider-thumb {
      background: linear-gradient(180deg, #fff 0%, #f2f2f2 100%) !important;
      border: 0.5px solid rgba(0,0,0,0.08) !important;
      box-shadow: 0 2px 6px rgba(0,0,0,0.12), 0 0.5px 1px rgba(0,0,0,0.06) !important;
      width: 18px !important;
      height: 18px !important;
    }
    [data-theme="liquid-glass"] .slider-value {
      background: var(--lg-surface) !important;
      border: 0.5px solid var(--lg-border) !important;
      border-radius: 8px !important;
      box-shadow: var(--lg-border-inner) !important;
      backdrop-filter: blur(8px) !important;
    }

    /* ── Scene / Source list items — glass rows ── */
    [data-theme="liquid-glass"] .scene-list-item,
    [data-theme="liquid-glass"] .source-list-item {
      background: var(--lg-surface) !important;
      border: 0.5px solid var(--lg-border) !important;
      border-radius: 12px !important;
      box-shadow: var(--lg-border-inner) !important;
      backdrop-filter: blur(8px) !important;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    [data-theme="liquid-glass"] .scene-list-item:hover,
    [data-theme="liquid-glass"] .source-list-item:hover {
      background: var(--lg-surface-hover) !important;
      transform: translateY(-0.5px) !important;
      box-shadow: var(--lg-border-inner), 0 2px 8px rgba(0,0,0,0.05) !important;
    }
    [data-theme="liquid-glass"] .scene-list-item.selected,
    [data-theme="liquid-glass"] .source-list-item.selected {
      background: linear-gradient(180deg, rgba(0,122,255,0.15) 0%, rgba(0,122,255,0.06) 100%) !important;
      border-color: rgba(0,122,255,0.25) !important;
    }
    [data-theme="liquid-glass"] .sl-context-menu {
      background: var(--lg-surface-elevated) !important;
      backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.9) !important;
      -webkit-backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.9) !important;
      border: 0.5px solid var(--lg-border-strong) !important;
      box-shadow: var(--lg-shadow-popup), var(--lg-border-inner) !important;
    }
    [data-theme="liquid-glass"] .sl-context-menu .sl-ctx-sep {
      background: var(--lg-border) !important;
    }
    [data-theme="liquid-glass"] .sl-context-menu .sl-ctx-item:hover {
      background: var(--lg-surface-hover) !important;
    }

    /* ── Studio Dock — glass tray ── */
    [data-theme="liquid-glass"] #studio-dock {
      background: var(--lg-surface) !important;
      backdrop-filter: blur(var(--lg-blur)) saturate(1.7) !important;
      -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(1.7) !important;
      border-top: 0.5px solid var(--lg-border) !important;
      box-shadow: 0 -1px 0 0 rgba(255,255,255,0.35) inset, 0 -4px 16px rgba(0,0,0,0.04) !important;
    }
    [data-theme="liquid-glass"] .studio-pane {
      background: transparent !important;
      border-right: 0.5px solid rgba(255,255,255,0.25) !important;
    }
    [data-theme="liquid-glass"] .studio-pane-title {
      border-bottom: 0.5px solid rgba(255,255,255,0.25) !important;
      background: transparent !important;
    }
    [data-theme="liquid-glass"] .studio-pane-footer-btn:hover {
      background: var(--lg-surface-hover) !important;
      border-radius: 8px !important;
    }

    /* ── Studio Items — glass cards ── */
    [data-theme="liquid-glass"] .studio-item {
      background: var(--lg-surface) !important;
      border: 0.5px solid var(--lg-border) !important;
      border-radius: 12px !important;
      box-shadow: var(--lg-border-inner) !important;
      backdrop-filter: blur(8px) !important;
    }

    /* ── Program Display Panel — glass frame ── */
    [data-theme="liquid-glass"] #program-display-panel {
      background: rgba(255, 255, 255, 0.15) !important;
      backdrop-filter: blur(var(--lg-blur-light)) !important;
      border-left: 0.5px solid var(--lg-border) !important;
    }
    [data-theme="liquid-glass"] #program-display-stage {
      background: rgba(255, 255, 255, 0.10) !important;
      border-radius: 12px !important;
    }
    [data-theme="liquid-glass"] #program-display-shell {
      border-radius: 10px !important;
      box-shadow: var(--lg-shadow-elevated) !important;
    }
    [data-theme="liquid-glass"] #program-scale-controls {
      border: 0.5px solid var(--lg-border) !important;
      background: var(--lg-surface) !important;
      border-radius: 10px !important;
      backdrop-filter: blur(12px) !important;
      box-shadow: var(--lg-border-inner) !important;
    }

    /* ── Audio Mixer — glass meters ── */
    [data-theme="liquid-glass"] .ctrl-meter-row {
      background: var(--lg-surface) !important;
      border: 0.5px solid var(--lg-border) !important;
      border-radius: 12px !important;
      box-shadow: var(--lg-border-inner) !important;
      backdrop-filter: blur(8px) !important;
    }
    [data-theme="liquid-glass"] #pgm-output-meter {
      background: var(--lg-surface) !important;
      border: 0.5px solid var(--lg-border) !important;
      border-radius: 12px !important;
      box-shadow: var(--lg-border-inner) !important;
    }

    /* ── Modal Content — frosted glass window ── */
    [data-theme="liquid-glass"] .modal-content {
      background: var(--lg-surface-elevated) !important;
      backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.9) !important;
      -webkit-backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.9) !important;
      border: 0.5px solid var(--lg-border-strong) !important;
      border-radius: 20px !important;
      box-shadow: var(--lg-shadow-popup), var(--lg-border-inner) !important;
    }

    /* ── Settings Modal — glass window ── */
    [data-theme="liquid-glass"] .sm-body {
      border: 0.5px solid var(--lg-border-strong) !important;
      border-radius: 18px !important;
      box-shadow: var(--lg-shadow-popup), var(--lg-border-inner) !important;
      overflow: hidden !important;
    }
    [data-theme="liquid-glass"] .sm-sidebar {
      background: var(--bg-panel, rgba(255, 255, 255, 0.30)) !important;
      backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.8) !important;
      -webkit-backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.8) !important;
      border-right: 0.5px solid rgba(255,255,255,0.30) !important;
    }
    [data-theme="liquid-glass"] .sm-sidebar-item {
      border-radius: 10px !important;
      margin: 1px 8px !important;
      transition: all 0.15s !important;
    }
    [data-theme="liquid-glass"] .sm-sidebar-item:hover {
      background: var(--lg-surface-hover) !important;
      box-shadow: var(--lg-border-inner) !important;
    }
    [data-theme="liquid-glass"] .sm-sidebar-item.active {
      background: linear-gradient(180deg, rgba(0,122,255,0.18) 0%, rgba(0,122,255,0.08) 100%) !important;
      box-shadow: var(--lg-border-inner) !important;
    }
    [data-theme="liquid-glass"] .sm-content {
      background: var(--bg-panel, rgba(255, 255, 255, 0.30)) !important;
      backdrop-filter: blur(var(--lg-blur)) saturate(1.5) !important;
      -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(1.5) !important;
    }
    [data-theme="liquid-glass"] .settings-modal-title {
      background: var(--bg-panel, rgba(255, 255, 255, 0.30)) !important;
      border-bottom: 0.5px solid rgba(255,255,255,0.30) !important;
      backdrop-filter: blur(var(--lg-blur-light)) !important;
    }
    [data-theme="liquid-glass"] .settings-category-title:hover {
      background: var(--lg-surface-hover) !important;
      border-radius: 10px !important;
    }
    [data-theme="liquid-glass"] .settings-input,
    [data-theme="liquid-glass"] .settings-select,
    [data-theme="liquid-glass"] .settings-textarea {
      background: rgba(255, 255, 255, 0.32) !important;
      border: 0.5px solid var(--lg-border) !important;
      border-radius: 10px !important;
      box-shadow: var(--lg-border-inner) !important;
      backdrop-filter: blur(8px) !important;
    }
    [data-theme="liquid-glass"] .settings-input:focus,
    [data-theme="liquid-glass"] .settings-select:focus,
    [data-theme="liquid-glass"] .settings-textarea:focus {
      background: rgba(255, 255, 255, 0.45) !important;
      border-color: rgba(0,122,255,0.35) !important;
      box-shadow: var(--lg-border-inner), 0 0 0 3px rgba(0,122,255,0.10) !important;
    }

    /* ── Settings Modal — JOvisuals (apple-music) ── */
    [data-theme="apple-music"] .sm-body {
      border: 1px solid rgba(255, 255, 255, 0.08) !important;
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35) !important;
    }
    [data-theme="apple-music"] .sm-sidebar {
      background: var(--bg-panel, #252527) !important;
      border-right-color: rgba(255, 255, 255, 0.08) !important;
      scrollbar-color: rgba(255, 255, 255, 0.12) transparent !important;
    }
    [data-theme="apple-music"] .sm-sidebar::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.12) !important;
    }
    [data-theme="apple-music"] .sm-sidebar-item {
      color: #a5a5ab !important;
    }
    [data-theme="apple-music"] .sm-sidebar-item:hover {
      background: rgba(252, 60, 68, 0.10) !important;
      color: #ffd9db !important;
    }
    [data-theme="apple-music"] .sm-sidebar-item.active {
      background: rgba(252, 60, 68, 0.16) !important;
      color: #fff2f3 !important;
    }
    [data-theme="apple-music"] .sm-sidebar-item.active::before {
      background: rgba(252, 60, 68, 0.95) !important;
    }
    [data-theme="apple-music"] .sm-content {
      background: var(--bg-panel, #252527) !important;
      scrollbar-color: rgba(255, 255, 255, 0.14) transparent !important;
    }
    [data-theme="apple-music"] .sm-content::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.14) !important;
    }
    [data-theme="apple-music"] .settings-modal-title {
      background: var(--bg-panel, #252527) !important;
      border-bottom-color: rgba(255, 255, 255, 0.08) !important;
      color: #f5f5f7 !important;
    }
    [data-theme="apple-music"] .settings-close-btn:hover {
      color: #fff !important;
      background: rgba(252, 60, 68, 0.16) !important;
    }

    /* ── sp-modal — glass window ── */
    [data-theme="liquid-glass"] .sp-modal {
      background: var(--lg-surface-elevated) !important;
      backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.9) !important;
      -webkit-backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.9) !important;
      border: 0.5px solid var(--lg-border-strong) !important;
      border-radius: 18px !important;
      box-shadow: var(--lg-shadow-popup), var(--lg-border-inner) !important;
    }
    [data-theme="liquid-glass"] .sp-modal-footer button {
      background: var(--lg-btn-bg) !important;
      border: 0.5px solid var(--lg-border) !important;
      border-radius: 10px !important;
      box-shadow: var(--lg-border-inner) !important;
    }
    [data-theme="liquid-glass"] .sp-modal-footer button:hover {
      background: var(--lg-btn-bg-hover) !important;
    }

    /* ── Confirm Modal — glass ── */
    [data-theme="liquid-glass"] .confirm-modal {
      background: var(--lg-surface-elevated) !important;
      backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.9) !important;
      -webkit-backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.9) !important;
      border: 0.5px solid var(--lg-border-strong) !important;
      border-radius: 18px !important;
      box-shadow: var(--lg-shadow-popup), var(--lg-border-inner) !important;
    }
    [data-theme="liquid-glass"] .confirm-modal input {
      background: rgba(255, 255, 255, 0.32) !important;
      border: 0.5px solid var(--lg-border) !important;
      border-radius: 10px !important;
      box-shadow: var(--lg-border-inner) !important;
    }

    /* ── Toast Notifications — glass pill ── */
    [data-theme="liquid-glass"] .toast {
      background: var(--lg-surface-elevated) !important;
      backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.9) !important;
      -webkit-backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.9) !important;
      border: 0.5px solid var(--lg-border-strong) !important;
      border-radius: 16px !important;
      box-shadow: var(--lg-shadow-popup), var(--lg-border-inner) !important;
    }

    /* ── Preset Popover — glass dropdown ── */
    [data-theme="liquid-glass"] .preset-popover {
      background: var(--lg-surface-elevated) !important;
      backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.9) !important;
      -webkit-backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.9) !important;
      border: 0.5px solid var(--lg-border-strong) !important;
      border-radius: 16px !important;
      box-shadow: var(--lg-shadow-popup), var(--lg-border-inner) !important;
    }

    /* ── Bible Tool Panel — glass dropdown ── */
    [data-theme="liquid-glass"] .bible-tool-panel {
      background: var(--lg-surface-elevated) !important;
      backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.9) !important;
      -webkit-backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.9) !important;
      border: 0.5px solid var(--lg-border-strong) !important;
      border-radius: 16px !important;
      box-shadow: var(--lg-shadow-popup), var(--lg-border-inner) !important;
    }
    [data-theme="liquid-glass"] .bible-tool-panel::before {
      background: var(--lg-surface-elevated) !important;
      border-left: 0.5px solid var(--lg-border-strong) !important;
      border-top: 0.5px solid var(--lg-border-strong) !important;
    }
    [data-theme="liquid-glass"] #annotate-toolbar {
      background: var(--lg-surface-elevated) !important;
      backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.9) !important;
      -webkit-backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.9) !important;
      border: 0.5px solid var(--lg-border-strong) !important;
      box-shadow: var(--lg-shadow-popup), var(--lg-border-inner) !important;
    }
    [data-theme="liquid-glass"] .annotate-hex-input,
    [data-theme="liquid-glass"] .annotate-clear-btn {
      background: var(--lg-surface) !important;
      border-color: var(--lg-border) !important;
    }

    /* ── Footer Bar — glass strip ── */
    [data-theme="liquid-glass"] #footer-bar {
      background: var(--lg-surface) !important;
      backdrop-filter: blur(var(--lg-blur)) saturate(1.7) !important;
      -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(1.7) !important;
      border-top: 0.5px solid var(--lg-border) !important;
      box-shadow: 0 -0.5px 0 0 rgba(255,255,255,0.40) inset !important;
    }
    [data-theme="liquid-glass"] .fb-cpu-bar,
    [data-theme="liquid-glass"] .fb-mem-bar {
      background: rgba(0, 0, 0, 0.06) !important;
      border: 0.5px solid var(--lg-border) !important;
      border-radius: var(--lg-pill-radius) !important;
    }

    /* ── Page Nav Bar — glass nav ── */
    [data-theme="liquid-glass"] #page-nav-bar {
      background: var(--lg-surface) !important;
      backdrop-filter: blur(var(--lg-blur)) saturate(1.7) !important;
      -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(1.7) !important;
      border-top: 0.5px solid var(--lg-border) !important;
      box-shadow: 0 -0.5px 0 0 rgba(255,255,255,0.35) inset !important;
    }
    [data-theme="liquid-glass"] .page-nav-btn:hover {
      background: var(--lg-surface-hover) !important;
      border-radius: 8px !important;
    }
    [data-theme="liquid-glass"] .page-nav-btn.active::after {
      background: #007AFF !important;
      border-radius: 2px !important;
      box-shadow: 0 0 8px rgba(0,122,255,0.30) !important;
    }

    /* ── Streaming Card — glass card ── */
    [data-theme="liquid-glass"] .pgm-stream-card {
      background: var(--lg-surface) !important;
      border: 0.5px solid var(--lg-border) !important;
      border-radius: 16px !important;
      box-shadow: var(--lg-border-inner), var(--lg-shadow) !important;
      backdrop-filter: blur(var(--lg-blur-light)) !important;
    }
    [data-theme="liquid-glass"] .pgm-stream-help {
      background: rgba(255,255,255,0.25) !important;
      border: 0.5px solid rgba(255,255,255,0.35) !important;
      border-radius: 10px !important;
    }

    /* ── Record Page Windows — glass panels ── */
    [data-theme="liquid-glass"] .rec-window {
      background: var(--lg-surface-elevated) !important;
      backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.8) !important;
      -webkit-backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.8) !important;
      border: 0.5px solid var(--lg-border-strong) !important;
      border-radius: 18px !important;
      box-shadow: var(--lg-shadow-popup), var(--lg-border-inner) !important;
    }
    [data-theme="liquid-glass"] .rec-menu-dropdown {
      background: var(--lg-surface-elevated) !important;
      backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.9) !important;
      -webkit-backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.9) !important;
      border: 0.5px solid var(--lg-border-strong) !important;
      border-radius: 14px !important;
      box-shadow: var(--lg-shadow-popup), var(--lg-border-inner) !important;
    }
    [data-theme="liquid-glass"] .rec-menu-item:hover {
      background: var(--lg-surface-hover) !important;
      border-radius: 8px !important;
    }
    [data-theme="liquid-glass"] .rec-fx-popup {
      background: var(--lg-surface-elevated) !important;
      backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.8) !important;
      -webkit-backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.8) !important;
      border: 0.5px solid var(--lg-border-strong) !important;
      border-radius: 18px !important;
      box-shadow: var(--lg-shadow-popup), var(--lg-border-inner) !important;
    }

    /* ── ProMix Window — glass mixer ── */
    [data-theme="liquid-glass"] .promix-window {
      background: var(--lg-surface-elevated) !important;
      backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.8) !important;
      -webkit-backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.8) !important;
      border: 0.5px solid var(--lg-border-strong) !important;
      border-radius: 18px !important;
      box-shadow: var(--lg-shadow-popup), var(--lg-border-inner) !important;
    }
    [data-theme="liquid-glass"] {
      --promix-overlay-bg:
        radial-gradient(950px 500px at 50% 100%, rgba(0, 122, 255, 0.08), transparent 64%),
        linear-gradient(180deg, rgba(148, 163, 184, 0.12), rgba(93, 114, 145, 0.18));
      --promix-window-border-inner: rgba(255, 255, 255, 0.42);
      --promix-section-soft: rgba(255, 255, 255, 0.08);
    }
    [data-theme="liquid-glass"] .promix-titlebar {
      background: rgba(255, 255, 255, 0.20) !important;
      border-bottom: 0.5px solid rgba(255,255,255,0.30) !important;
    }
    [data-theme="liquid-glass"] .promix-strip {
      border-right-color: rgba(255,255,255,0.20) !important;
      background: transparent !important;
    }
    [data-theme="liquid-glass"] .promix-fx-slot {
      background: linear-gradient(180deg, rgba(49, 146, 255, 0.86), rgba(26, 115, 225, 0.88)) !important;
      border: 0.5px solid rgba(18, 96, 198, 0.65) !important;
      border-radius: 8px !important;
      color: #fff !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.36),
        0 3px 10px rgba(6, 61, 128, 0.2) !important;
    }
    [data-theme="liquid-glass"] .promix-fx-slot:hover {
      background: linear-gradient(180deg, rgba(62, 157, 255, 0.92), rgba(34, 127, 235, 0.94)) !important;
    }
    [data-theme="liquid-glass"] .promix-btn {
      background: var(--lg-btn-bg) !important;
      border: 0.5px solid var(--lg-border) !important;
      border-radius: 8px !important;
      box-shadow: var(--lg-border-inner) !important;
    }
    [data-theme="liquid-glass"] .promix-btn:hover {
      background: var(--lg-btn-bg-hover) !important;
    }

    /* ── Livestreaming Page — glass controls ── */
    [data-theme="liquid-glass"] .ls-page {
      background: transparent !important;
    }
    [data-theme="liquid-glass"] .ls-topbar {
      background: var(--lg-surface) !important;
      backdrop-filter: blur(var(--lg-blur)) saturate(1.7) !important;
      -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(1.7) !important;
      border-bottom: 0.5px solid var(--lg-border) !important;
      box-shadow: var(--lg-border-inner) !important;
    }
    [data-theme="liquid-glass"] .ls-btn {
      background: var(--lg-btn-bg) !important;
      border: 0.5px solid var(--lg-border) !important;
      border-radius: 10px !important;
      box-shadow: var(--lg-border-inner) !important;
      backdrop-filter: blur(8px) !important;
    }
    [data-theme="liquid-glass"] .ls-btn:hover {
      background: var(--lg-btn-bg-hover) !important;
      transform: translateY(-0.5px) !important;
    }
    [data-theme="liquid-glass"] .ls-source-tabs {
      background: rgba(255, 255, 255, 0.20) !important;
      border: 0.5px solid var(--lg-border) !important;
      border-radius: var(--lg-pill-radius) !important;
      box-shadow: var(--lg-border-inner) !important;
    }
    [data-theme="liquid-glass"] .ls-source-tab.active {
      background: rgba(255, 255, 255, 0.50) !important;
      border-radius: var(--lg-pill-radius) !important;
      box-shadow: 0 1px 4px rgba(0,0,0,0.06), var(--lg-border-inner) !important;
    }
    [data-theme="liquid-glass"] .ls-sidebar {
      background: var(--lg-surface) !important;
      backdrop-filter: blur(var(--lg-blur)) saturate(1.7) !important;
      -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(1.7) !important;
      border-left: 0.5px solid var(--lg-border) !important;
    }
    [data-theme="liquid-glass"] .ls-card {
      background: var(--lg-surface) !important;
      border: 0.5px solid var(--lg-border) !important;
      border-radius: 14px !important;
      box-shadow: var(--lg-border-inner) !important;
      backdrop-filter: blur(8px) !important;
    }
    [data-theme="liquid-glass"] .ls-card-header {
      background: rgba(255,255,255,0.18) !important;
      border-bottom: 0.5px solid rgba(255,255,255,0.25) !important;
    }
    [data-theme="liquid-glass"] .ls-protocol-tabs {
      background: rgba(255, 255, 255, 0.18) !important;
      border: 0.5px solid var(--lg-border) !important;
      border-radius: var(--lg-pill-radius) !important;
    }
    [data-theme="liquid-glass"] .ls-input {
      background: rgba(255, 255, 255, 0.30) !important;
      border: 0.5px solid var(--lg-border) !important;
      border-radius: 10px !important;
      box-shadow: var(--lg-border-inner) !important;
    }
    [data-theme="liquid-glass"] .ls-camera-select,
    [data-theme="liquid-glass"] .ls-audio-select {
      background: rgba(255, 255, 255, 0.30) !important;
      border: 0.5px solid var(--lg-border) !important;
      border-radius: 10px !important;
      box-shadow: var(--lg-border-inner) !important;
    }
    [data-theme="liquid-glass"] .ls-dest-item {
      background: var(--lg-surface) !important;
      border: 0.5px solid var(--lg-border) !important;
      border-radius: 12px !important;
      box-shadow: var(--lg-border-inner) !important;
    }
    [data-theme="liquid-glass"] .ls-dest-item:hover {
      background: var(--lg-surface-hover) !important;
    }
    [data-theme="liquid-glass"] .ls-dest-toggle {
      background: rgba(0, 0, 0, 0.08) !important;
      border-radius: var(--lg-pill-radius) !important;
      border: 0.5px solid rgba(255,255,255,0.35) !important;
      box-shadow: 0 0.5px 0 0 rgba(255,255,255,0.45) inset !important;
    }
    [data-theme="liquid-glass"] .ls-dest-toggle.on {
      background: linear-gradient(180deg, rgba(0,190,80,0.70) 0%, rgba(0,170,70,0.80) 100%) !important;
    }
    [data-theme="liquid-glass"] .ls-quick-btn {
      background: var(--lg-surface) !important;
      border: 0.5px solid var(--lg-border) !important;
      border-radius: 12px !important;
      box-shadow: var(--lg-border-inner) !important;
      backdrop-filter: blur(8px) !important;
    }
    [data-theme="liquid-glass"] .ls-quick-btn:hover {
      background: var(--lg-surface-hover) !important;
      transform: translateY(-1px) !important;
    }
    [data-theme="liquid-glass"] .ls-dest-modal {
      background: var(--lg-surface-elevated) !important;
      backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.9) !important;
      -webkit-backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.9) !important;
      border: 0.5px solid var(--lg-border-strong) !important;
      border-radius: 18px !important;
      box-shadow: var(--lg-shadow-popup), var(--lg-border-inner) !important;
    }
    [data-theme="liquid-glass"] .ls-health-item {
      background: var(--lg-surface) !important;
      border: 0.5px solid var(--lg-border) !important;
      box-shadow: var(--lg-border-inner) !important;
      backdrop-filter: blur(8px) !important;
    }
    [data-theme="liquid-glass"] .ls-audio-meter {
      background: rgba(255,255,255,0.20) !important;
      border: 0.5px solid var(--lg-border) !important;
      border-radius: 10px !important;
      box-shadow: var(--lg-border-inner) !important;
      backdrop-filter: blur(12px) !important;
    }
    [data-theme="liquid-glass"] .ls-preview-ctx {
      background: var(--lg-surface-elevated) !important;
      backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.9) !important;
      -webkit-backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.9) !important;
      border: 0.5px solid var(--lg-border-strong) !important;
      border-radius: 14px !important;
      box-shadow: var(--lg-shadow-popup), var(--lg-border-inner) !important;
    }

    /* ── Scrollbars — glass thumb ── */
    [data-theme="liquid-glass"] ::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.10) !important;
      border-radius: var(--lg-pill-radius) !important;
      border: 2px solid transparent !important;
      background-clip: padding-box !important;
    }
    [data-theme="liquid-glass"] ::-webkit-scrollbar-thumb:hover {
      background: rgba(0, 0, 0, 0.18) !important;
      background-clip: padding-box !important;
    }

    /* ── Editor Color Input — glass pill ── */
    [data-theme="liquid-glass"] .editor-color-input input[type="text"] {
      background: rgba(255, 255, 255, 0.32) !important;
      border: 0.5px solid var(--lg-border) !important;
      border-radius: 10px !important;
      box-shadow: var(--lg-border-inner) !important;
    }

    /* ── Color Row — glass inputs ── */
    [data-theme="liquid-glass"] .color-row input[type="text"] {
      background: rgba(255, 255, 255, 0.32) !important;
      border: 0.5px solid var(--lg-border) !important;
      border-radius: 8px !important;
      box-shadow: var(--lg-border-inner) !important;
    }

    /* ── Source FX Overlay — glass popup ── */
    [data-theme="liquid-glass"] #source-fx-overlay .rec-fx-popup {
      background: var(--lg-surface-elevated) !important;
      backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.8) !important;
      -webkit-backdrop-filter: blur(var(--lg-blur-heavy)) saturate(1.8) !important;
      border: 0.5px solid var(--lg-border-strong) !important;
      border-radius: 18px !important;
      box-shadow: var(--lg-shadow-popup), var(--lg-border-inner) !important;
    }
    [data-theme="liquid-glass"] .source-fx-row {
      background: var(--lg-surface) !important;
      border: 0.5px solid var(--lg-border) !important;
      border-radius: 10px !important;
      box-shadow: var(--lg-border-inner) !important;
    }
    [data-theme="liquid-glass"] .source-fx-row:hover {
      background: var(--lg-surface-hover) !important;
    }

    /* ── Dock Resize Handle ── */
    [data-theme="liquid-glass"] .dock-resize-handle-bar {
      background: rgba(0, 0, 0, 0.12) !important;
      border-radius: var(--lg-pill-radius) !important;
    }

    /* ── Tab bar — glass tabs ── */
    [data-theme="liquid-glass"] .tab-button.active {
      background: rgba(255, 255, 255, 0.40) !important;
      border-radius: 8px !important;
      box-shadow: var(--lg-border-inner) !important;
    }

    /* ── Lyric buttons container ── */
    [data-theme="liquid-glass"] #lyric-buttons {
      background: transparent !important;
    }

    /* ── Section Block — glass card ── */
    [data-theme="liquid-glass"] .section-block {
      background: var(--lg-surface) !important;
      border: 0.5px solid var(--lg-border) !important;
      border-radius: 14px !important;
      box-shadow: var(--lg-border-inner) !important;
      backdrop-filter: blur(8px) !important;
    }

    /* End Liquid Glass Theme */

    html {
      width: 100%;
      height: 100%;
      background: var(--body-bg);
    }

    body {
      font-family: -apple-system, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      background: var(--body-bg);
      color: var(--text);
      margin: 0;
      width: 100%;
      height: 100vh;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      font-size: 13px;
      letter-spacing: -0.01em;
      /* GPU compositing for the entire app shell */
      contain: layout style;
    }

    /* ---- Activity Bar (VS Code-style vertical sidebar) ---- */
    /* ---- App Page System ---- */
    .app-page {
      display: none;
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
    }
    .app-page.active {
      display: flex;
    }
    .app-page-blank {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-secondary);
      font-size: 16px;
      opacity: 0.5;
      user-select: none;
    }

    /* ══════════════════════════════════
       Record Page
       ══════════════════════════════════ */
    #page-record {
      flex-direction: column;
      background: #010101;
      position: relative;
    }
    /* ── Top Menu Bar ── */
    .rec-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 40px;
      min-height: 40px;
      padding: 40px 12px 0 12px;
      background: #010101;
      border-bottom: none;
      flex-shrink: 0;
      position: relative;
      z-index: 5000;
    }
    .rec-topbar-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .rec-hamburger-btn {
      width: 30px;
      height: 30px;
      border-radius: 6px;
      border: none;
      background: transparent;
      color: #bbb;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: default;
      transition: background 0.15s, color 0.15s;
    }
    .rec-hamburger-btn:hover {
      background: rgba(255,255,255,0.08);
      color: #fff;
    }
    .rec-hamburger-btn svg {
      width: 18px;
      height: 18px;
    }
    .rec-topbar-brand {
      display: flex;
      align-items: center;
      gap: 7px;
    }
    .rec-brand-icon {
      width: 18px;
      height: 18px;
      filter: drop-shadow(0 0 4px rgba(241,44,24,0.4));
    }
    .rec-brand-text {
      font-size: 14px;
      font-weight: 700;
      color: #fff;
      letter-spacing: 0.3px;
    }
    /* ── Hamburger Dropdown Menu ── */
    .rec-menu-dropdown {
      display: none;
      position: absolute;
      top: 40px;
      left: 8px;
      width: 200px;
      background: #1c1c1c;
      border: 1px solid #333;
      border-radius: 8px;
      box-shadow: 0 8px 30px rgba(0,0,0,0.6);
      padding: 4px 0;
      z-index: 5100;
      flex-direction: column;
    }
    .rec-menu-dropdown.open {
      display: flex;
    }
    .rec-menu-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 14px;
      border: none;
      background: transparent;
      color: #ddd;
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.12s;
      text-align: left;
    }
    .rec-menu-item:hover {
      background: rgba(255,255,255,0.07);
      color: #fff;
    }
    .rec-menu-item svg {
      width: 15px;
      height: 15px;
      flex-shrink: 0;
      opacity: 0.7;
    }
    .rec-menu-divider {
      height: 1px;
      background: #333;
      margin: 4px 10px;
    }
    /* ── Main Content Area ── */
    .rec-main {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding-top: 30px;
      box-sizing: border-box;
      min-height: 0;
      overflow: hidden;
      position: relative;
      z-index: 1;
    }
    .rec-link-layer {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: auto;
      z-index: 2;
      overflow: visible;
    }
    .rec-link-path {
      pointer-events: stroke;
      cursor: pointer;
    }
    /* ── Add Track Button (in topbar) ── */
    .rec-add-track-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 14px;
      border: none;
      border-radius: 999px;
      background: #1a1a1a;
      color: #fff;
      font-size: 12px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      transition: background 0.15s;
      letter-spacing: 0.2px;
    }
    .rec-add-track-btn:hover {
      background: #252525;
    }
    .rec-add-track-btn svg {
      width: 14px;
      height: 14px;
      stroke: #fff;
      stroke-width: 2;
    }
    /* ── Record Window ── */
    .rec-window {
      --rec-accent: #B400FF;
      --rec-accent-rgb: 180, 0, 255;
      width: 400px;
      height: 450px;
      border-radius: 14px;
      background: linear-gradient(180deg, #0d141d 0%, #0a1118 100%);
      border: 1px solid rgba(132, 160, 196, 0.14);
      position: absolute;
      display: flex;
      flex-direction: column;
      box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.62),
        0 0 0 1px rgba(255, 255, 255, 0.02);
      overflow: hidden;
      z-index: 20;
    }
    .rec-link-node {
      appearance: none;
      -webkit-appearance: none;
      position: absolute;
      top: 8px;
      width: 9px;
      height: 9px;
      min-width: 9px;
      min-height: 9px;
      padding: 0;
      line-height: 0;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.82);
      background: rgba(18,24,34,0.78);
      box-shadow:
        0 0 0 1px rgba(0,0,0,0.55),
        0 0 0 2px rgba(var(--rec-accent-rgb, 132,160,196), 0.42),
        0 2px 6px rgba(0,0,0,0.35);
      cursor: crosshair;
      z-index: 30;
      transition: transform 0.1s ease, background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
    }
    .rec-link-node:hover {
      transform: scale(1.08);
      background: rgba(30,38,52,0.88);
    }
    .rec-link-node.left {
      left: 8px;
    }
    .rec-link-node.right {
      right: 8px;
    }
    .rec-window.design-studio .rec-link-node {
      top: 28px;
    }
    .rec-link-node.active {
      border-color: rgba(255,255,255,0.98);
      background: rgba(36,46,64,0.92);
      box-shadow:
        0 0 0 1px rgba(255,255,255,0.28),
        0 0 0 3px rgba(var(--rec-accent-rgb, 132,160,196), 0.55),
        0 0 12px rgba(var(--rec-accent-rgb, 132,160,196), 0.45);
    }
    .rec-link-node.armed {
      border-color: rgba(255,255,255,0.95);
      background: rgba(var(--rec-accent-rgb, 132,160,196), 0.95);
      box-shadow: 0 0 0 1px rgba(255,255,255,0.35), 0 0 14px rgba(var(--rec-accent-rgb, 132,160,196), 0.55);
    }
    .rec-window.is-hidden {
      display: none;
    }
    .rec-window.rec-window-pinned {
      z-index: 3000;
      box-shadow:
        0 36px 90px rgba(0, 0, 0, 0.68),
        0 0 0 1px rgba(180, 0, 255, 0.25);
    }
    .rec-window.rec-dragging {
      cursor: move;
      user-select: none;
      -webkit-user-select: none;
      opacity: 1;
    }
    /* ── Record Window Content ── */
    .rec-w-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 22px 24px 16px;
      gap: 16px;
      min-height: 0;
    }
    .rec-window.design-studio {
      height: 450px;
      background:
        radial-gradient(520px 210px at 14% -20%, rgba(var(--rec-accent-rgb, 132,160,196), 0.22), transparent 58%),
        linear-gradient(180deg, #0c121a 0%, #090f16 100%);
      border-color: rgba(var(--rec-accent-rgb, 132,160,196), 0.42);
      box-shadow:
        0 34px 82px rgba(0, 0, 0, 0.68),
        0 0 0 1px rgba(var(--rec-accent-rgb, 132,160,196), 0.24);
    }
    .rec-window.design-studio .rec-w-body {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      grid-template-areas:
        "head head"
        "format format"
        "input output"
        "divider divider"
        "strips strips";
      gap: 8px;
      align-content: space-between;
      padding: 12px 12px 10px;
    }
    .rec-window.design-studio .rec-w-head {
      grid-area: head;
      align-items: center;
      padding: 8px;
      border-radius: 11px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(var(--rec-accent-rgb, 132,160,196), 0.22);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .rec-window.design-studio .rec-w-title {
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.35px;
      color: rgba(var(--rec-accent-rgb, 132,160,196), 0.95);
    }
    .rec-window.design-studio .rec-w-top-actions {
      margin-top: 0;
      gap: 6px;
    }
    .rec-window.design-studio .rec-w-row {
      position: relative;
      min-height: 56px;
      height: auto;
      border-radius: 10px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(var(--rec-accent-rgb, 132,160,196), 0.16);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
      padding: 6px 8px;
      gap: 3px 8px;
      align-items: center;
    }
    .rec-window.design-studio .rec-w-row-format {
      grid-area: format;
      display: grid;
      grid-template-columns: 14px auto minmax(0, 1fr);
      grid-template-rows: 1fr;
      align-items: center;
      min-height: 48px;
      padding-top: 3px;
      padding-bottom: 3px;
    }
    .rec-window.design-studio .rec-w-row-format > svg {
      grid-column: 1;
      grid-row: 1;
      align-self: center;
      opacity: 0.72;
    }
    .rec-window.design-studio .rec-w-row-format > .rec-w-label {
      grid-column: 2;
      grid-row: 1;
      min-width: 0;
      white-space: nowrap;
      margin-right: 8px;
    }
    .rec-window.design-studio .rec-w-row-format > .rec-w-select {
      grid-column: 3;
      grid-row: 1;
      width: 100%;
      text-align: center;
      text-align-last: center;
    }
    .rec-window.design-studio .rec-w-row-input {
      grid-area: input;
      display: grid;
      grid-template-columns: 20px minmax(0, 1fr) 22px;
      grid-template-rows: auto auto;
    }
    .rec-window.design-studio .rec-w-row-output {
      grid-area: output;
      display: grid;
      grid-template-columns: 20px minmax(0, 1fr) 22px;
      grid-template-rows: auto auto;
    }
    .rec-window.design-studio .rec-w-row-input > .rec-w-mute-btn,
    .rec-window.design-studio .rec-w-row-output > .rec-w-mute-btn {
      grid-column: 1;
      grid-row: 1 / span 2;
      align-self: center;
      justify-self: start;
    }
    .rec-window.design-studio .rec-w-row-input > .rec-w-label,
    .rec-window.design-studio .rec-w-row-output > .rec-w-label {
      grid-column: 2;
      grid-row: 1;
      min-width: 0;
    }
    .rec-window.design-studio .rec-w-row-input > .rec-w-select,
    .rec-window.design-studio .rec-w-row-output > .rec-w-select {
      grid-column: 2;
      grid-row: 2;
      width: 100%;
      min-width: 0;
      text-align: center;
      text-align-last: center;
    }
    .rec-window.design-studio .rec-w-row-input > .rec-input-gain-btn {
      grid-column: 3;
      grid-row: 2;
      align-self: center;
      justify-self: end;
      margin: 0;
    }
    .rec-window.design-studio .rec-w-row .rec-w-label {
      font-size: 9px;
      letter-spacing: 0.45px;
      text-transform: uppercase;
      font-weight: 700;
      color: rgba(var(--rec-accent-rgb, 132,160,196), 0.78);
    }
    .rec-window.design-studio .rec-w-select {
      background: rgba(0,0,0,0.26);
      border-color: rgba(var(--rec-accent-rgb, 132,160,196), 0.28);
      height: 26px;
      border-radius: 7px;
      font-size: 10px;
      font-weight: 600;
      color: rgba(255,255,255,0.92);
      line-height: 24px;
      padding-top: 0;
      padding-bottom: 0;
    }
    .rec-window.design-studio .rec-w-divider {
      grid-area: divider;
      margin: 0;
      height: 1px;
      background: linear-gradient(90deg, rgba(255,255,255,0), rgba(var(--rec-accent-rgb, 132,160,196), 0.46), rgba(255,255,255,0));
    }
    .rec-window.design-studio .rec-w-strips {
      grid-area: strips;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas:
        "label routing"
        "strip-l strip-l"
        "strip-r strip-r";
      align-items: center;
      column-gap: 10px;
      row-gap: 0px;
      border-radius: 11px;
      min-height: 92px;
      padding: 4px 10px 6px;
      background: rgba(0,0,0,0.25);
      border: 1px solid rgba(var(--rec-accent-rgb, 132,160,196), 0.22);
    }
    .rec-window.design-studio .rec-w-strips-label {
      grid-area: label;
      margin-bottom: 0;
      color: rgba(var(--rec-accent-rgb, 132,160,196), 0.86);
      font-weight: 700;
      letter-spacing: 0.35px;
    }
    .rec-window.design-studio .rec-w-strip-l { grid-area: strip-l; }
    .rec-window.design-studio .rec-w-strip-r { grid-area: strip-r; }
    .rec-window.design-studio .rec-w-strip {
      margin: 0;
    }
    .rec-window.design-studio .rec-w-strip-actions {
      grid-area: routing;
      justify-self: end;
      align-self: center;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .rec-window.design-studio .rec-w-advanced-toggle {
      grid-area: auto;
      margin: 0;
      padding: 0;
      gap: 4px;
      font-size: 8px;
      letter-spacing: 0.5px;
      color: rgba(var(--rec-accent-rgb, 132,160,196), 0.76);
    }
    .rec-window.design-studio .rec-w-advanced-toggle:hover {
      color: rgba(var(--rec-accent-rgb, 132,160,196), 0.95);
    }
    .rec-window.design-studio .rec-w-strip-track {
      height: 8px;
      box-sizing: border-box;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 999px;
      padding: 1px;
      overflow: hidden;
    }
    .rec-window.design-studio .rec-w-strip-fill {
      height: 100%;
      border-radius: 999px;
      display: block;
    }
    .rec-window.design-studio .rec-w-tabs-row {
      margin: 6px 12px 7px;
      padding: 4px 6px;
      border-radius: 10px;
      background: rgba(255,255,255,0.035);
      border: 1px solid rgba(var(--rec-accent-rgb, 132,160,196), 0.18);
    }
    .rec-window.design-studio .rec-w-tabs {
      border-color: rgba(var(--rec-accent-rgb, 132,160,196), 0.28);
    }
    .rec-window.design-studio .rec-w-footer {
      padding: 8px 12px 12px;
      border-top-color: rgba(var(--rec-accent-rgb, 132,160,196), 0.22);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 34%),
        repeating-linear-gradient(100deg, rgba(255,255,255,0.018) 0 1px, rgba(0,0,0,0.015) 1px 3px),
        radial-gradient(ellipse at 68% -40%, rgba(var(--rec-accent-rgb, 132,160,196), 0.16), transparent 62%),
        linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.24) 100%);
      background-size: auto, 12px 12px, auto, auto;
      background-blend-mode: screen, overlay, screen, normal;
    }
    .rec-window.design-studio .rec-w-time {
      font-size: 24px;
      letter-spacing: 0.45px;
    }
    .rec-window.design-studio .rec-side-btn {
      border-color: rgba(var(--rec-accent-rgb, 132,160,196), 0.28);
      background: rgba(255,255,255,0.055);
    }
    .rec-window.design-studio .rec-window-btn {
      box-shadow: 0 18px 34px rgba(0,0,0,0.46), 0 0 0 1px rgba(var(--rec-accent-rgb, 132,160,196), 0.34);
    }
    .rec-w-head {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      cursor: default;
    }
    .rec-window.rec-dragging .rec-w-head {
      cursor: default;
    }
    .rec-w-top-actions {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: -4px;
    }
    .rec-w-top-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 50%;
      background: rgba(255,255,255,0.14);
      backdrop-filter: blur(2px);
      color: rgba(255,255,255,0.45);
      cursor: pointer;
      padding: 0;
      transition: color 0.12s ease, transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
    }
    .rec-w-top-btn:hover {
      transform: translateY(-2px);
      color: rgba(255,255,255,0.7);
      background: rgba(255,255,255,0.2);
      border-color: rgba(255,255,255,0.14);
    }
    .rec-w-top-btn.active {
      color: var(--rec-accent);
      background: rgba(var(--rec-accent-rgb), 0.2);
      border-color: rgba(var(--rec-accent-rgb), 0.45);
    }
    .rec-w-top-btn svg {
      width: 18px;
      height: 18px;
    }
    .rec-w-top-btn.fx {
      min-width: 32px;
      width: 32px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }
    .rec-w-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .rec-w-row svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      opacity: 0.45;
    }
    /* I/O mute buttons */
    .rec-w-mute-btn {
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: opacity 0.12s;
    }
    .rec-w-mute-btn svg {
      width: 14px;
      height: 14px;
      color: rgba(255,255,255,1);
      opacity: 0.45;
      transition: opacity 0.12s, color 0.12s;
    }
    .rec-w-mute-btn:hover svg {
      opacity: 0.75;
    }
    .rec-w-mute-btn.muted svg {
      color: #F12C18;
      opacity: 1;
    }
    .rec-w-label {
      font-size: 9px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: rgba(255,255,255,0.3);
      flex-shrink: 0;
      min-width: 52px;
    }
    .rec-w-value {
      font-size: 11px;
      font-weight: 500;
      color: rgba(255,255,255,0.75);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    /* Inline select (same look as value text) */
    .rec-w-select {
      font-size: 11px;
      font-weight: 500;
      color: rgba(255,255,255,0.75);
      background: transparent;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 2px 0;
      -webkit-appearance: none;
      appearance: none;
      font-family: inherit;
      max-width: 220px;
      background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='rgba(255,255,255,0.3)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 0 center;
      padding-right: 16px;
    }
    .rec-w-select:hover {
      color: rgba(255,255,255,0.95);
    }
    .rec-w-select option {
      background: #161a1f;
      color: #ddd;
    }
    /* Project title (editable input) */
    .rec-w-title {
      flex: 1;
      font-size: 15px;
      font-weight: 700;
      color: #fff;
      letter-spacing: 0.2px;
      margin-bottom: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      background: transparent;
      border: none;
      border-bottom: 1px solid transparent;
      outline: none;
      padding: 2px 0;
      width: 100%;
      font-family: inherit;
      transition: border-color 0.15s;
    }
    .rec-w-title:hover {
      border-bottom-color: rgba(255,255,255,0.12);
    }
    .rec-w-title:focus {
      border-bottom-color: rgba(255,255,255,0.25);
    }
    /* Divider */
    .rec-w-divider {
      height: 1px;
      background: rgba(255,255,255,0.06);
      margin: 2px 0;
    }
    /* ── Input Strips ── */
    .rec-w-strips {
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1;
      min-height: 0;
    }
    .rec-w-strip-actions {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      align-self: flex-end;
      margin-top: 2px;
    }
    .rec-w-fx-mini {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: none;
      border: none;
      padding: 4px 0 2px;
      cursor: pointer;
      color: rgba(255,255,255,0.34);
      font-size: 9px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      font-family: inherit;
      transition: color 0.12s;
    }
    .rec-w-fx-mini:hover,
    .rec-w-fx-mini.active {
      color: var(--rec-accent, #B400FF);
    }
    .rec-window.design-studio .rec-w-fx-mini {
      font-size: 8px;
      letter-spacing: 0.5px;
      color: rgba(var(--rec-accent-rgb, 132,160,196), 0.78);
      order: 0;
    }
    .rec-window.design-studio .rec-w-strip-actions .rec-w-advanced-toggle {
      order: 1;
    }
    .rec-window.design-studio .rec-w-fx-mini:hover,
    .rec-window.design-studio .rec-w-fx-mini.active {
      color: rgba(var(--rec-accent-rgb, 132,160,196), 0.96);
    }
    .rec-w-strips-label {
      font-size: 9px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: rgba(255,255,255,0.3);
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .rec-w-strips-label svg {
      width: 12px;
      height: 12px;
      opacity: 0.4;
    }
    .rec-w-strip {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .rec-w-strip-name {
      font-size: 10px;
      color: rgba(255,255,255,0.5);
      min-width: 24px;
      font-weight: 600;
      font-family: 'SF Mono', Menlo, monospace;
    }
    .rec-w-strip-track {
      flex: 1;
      height: 4px;
      background: rgba(255,255,255,0.06);
      border-radius: 2px;
      position: relative;
      overflow: hidden;
    }
    .rec-w-strip-fill {
      height: 100%;
      background: #B400FF;
      border-radius: 2px;
      transition: width 0.15s ease;
    }
    .rec-w-strip-db {
      font-size: 9px;
      color: rgba(255,255,255,0.3);
      min-width: 30px;
      text-align: right;
      font-family: 'SF Mono', Menlo, monospace;
    }
    /* ── Advanced Channel Routing (popup modal) ── */
    .rec-w-advanced-toggle {
      display: flex;
      align-items: center;
      gap: 5px;
      background: none;
      border: none;
      padding: 4px 0 2px;
      cursor: pointer;
      color: rgba(255,255,255,0.3);
      font-size: 9px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      font-family: inherit;
      transition: color 0.12s;
    }
    .rec-w-advanced-toggle:hover {
      color: rgba(255,255,255,0.55);
    }
    .rec-w-advanced-toggle svg {
      width: 10px;
      height: 10px;
    }
    /* Overlay backdrop */
    .rec-ch-overlay {
      display: none;
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.55);
      z-index: 220;
      align-items: center;
      justify-content: center;
    }
    .rec-ch-overlay.open {
      display: flex;
    }
    /* Popup panel */
    .rec-ch-popup {
      width: 280px;
      background: linear-gradient(180deg, rgba(var(--rec-accent-rgb, 180,0,255), 0.13) 0%, #161a1f 58%);
      border: 1px solid rgba(var(--rec-accent-rgb, 180,0,255), 0.32);
      border-radius: 12px;
      box-shadow: 0 16px 50px rgba(0,0,0,0.6);
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      animation: recChPopIn 0.15s ease-out;
    }
    @keyframes recChPopIn {
      from { opacity: 0; transform: scale(0.95) translateY(6px); }
      to { opacity: 1; transform: scale(1) translateY(0); }
    }
    .rec-ch-popup-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .rec-ch-popup-title {
      font-size: 12px;
      font-weight: 700;
      color: var(--rec-accent, #B400FF);
      letter-spacing: 0.3px;
      display: flex;
      align-items: center;
      gap: 7px;
    }
    .rec-ch-popup-title svg {
      width: 14px;
      height: 14px;
      color: var(--rec-accent, #B400FF);
      opacity: 0.7;
    }
    .rec-ch-popup-close {
      width: 24px;
      height: 24px;
      border-radius: 6px;
      border: none;
      background: transparent;
      color: rgba(255,255,255,0.35);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.12s, color 0.12s;
    }
    .rec-ch-popup-close:hover {
      background: rgba(var(--rec-accent-rgb, 180,0,255), 0.14);
      color: var(--rec-accent, #B400FF);
    }
    .rec-ch-popup-close svg {
      width: 14px;
      height: 14px;
    }
    .rec-ch-popup-desc {
      font-size: 10px;
      color: rgba(var(--rec-accent-rgb, 180,0,255), 0.6);
      line-height: 1.5;
    }
    /* ── Input Gain Button ── */
    .rec-input-gain-btn {
      width: 22px;
      height: 22px;
      border-radius: 5px;
      border: none;
      background: rgba(255,255,255,0.04);
      color: var(--rec-accent, #B400FF);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-left: auto;
      margin-right: 6px;
      transition: background 0.12s, color 0.12s;
    }
    .rec-input-gain-btn:hover {
      background: rgba(255,255,255,0.1);
      color: var(--rec-accent, #B400FF);
    }
    .rec-input-gain-btn svg {
      width: 12px;
      height: 12px;
    }
    /* ── Input Level Popup ── */
    .rec-gain-overlay {
      display: none;
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.55);
      z-index: 220;
      align-items: flex-start;
      justify-content: center;
      padding-top: 20px;
    }
    .rec-gain-overlay.open {
      display: flex;
    }
    .rec-gain-popup {
      width: 280px;
      background: linear-gradient(180deg, rgba(var(--rec-accent-rgb, 180,0,255), 0.13) 0%, #161a1f 58%);
      border: 1px solid rgba(var(--rec-accent-rgb, 180,0,255), 0.32);
      border-radius: 12px;
      box-shadow: 0 16px 50px rgba(0,0,0,0.6);
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 18px;
      animation: recChPopIn 0.15s ease-out;
    }
    .rec-gain-slider-wrap {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .rec-gain-slider-row {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .rec-gain-slider-row input[type="range"] {
      flex: 1;
      -webkit-appearance: none;
      appearance: none;
      height: 4px;
      background: rgba(255,255,255,0.1);
      border-radius: 2px;
      outline: none;
      cursor: pointer;
    }
    .rec-gain-slider-row input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--rec-accent, #B400FF);
      box-shadow: 0 0 8px rgba(var(--rec-accent-rgb, 180,0,255), 0.5);
      cursor: pointer;
    }
    .rec-gain-slider-row input[type="range"]::-moz-range-thumb {
      width: 14px;
      height: 14px;
      border: none;
      border-radius: 50%;
      background: var(--rec-accent, #B400FF);
      box-shadow: 0 0 8px rgba(var(--rec-accent-rgb, 180,0,255), 0.5);
      cursor: pointer;
    }
    .rec-gain-value {
      font-size: 11px;
      font-weight: 600;
      color: rgba(var(--rec-accent-rgb, 180,0,255), 0.8);
      font-family: 'SF Mono', Menlo, monospace;
      min-width: 38px;
      text-align: right;
    }
    .rec-w-ch-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .rec-w-ch-label {
      font-size: 9px;
      font-weight: 600;
      color: rgba(var(--rec-accent-rgb, 180,0,255), 0.6);
      min-width: 58px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .rec-w-ch-select {
      flex: 1;
      font-size: 10px;
      font-weight: 500;
      color: rgba(255,255,255,0.7);
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 4px;
      padding: 4px 8px;
      outline: none;
      font-family: 'SF Mono', Menlo, monospace;
      cursor: pointer;
      -webkit-appearance: none;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='rgba(255,255,255,0.25)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 6px center;
      padding-right: 22px;
      transition: border-color 0.12s;
    }
    .rec-w-ch-select:hover {
      border-color: rgba(255,255,255,0.15);
    }
    .rec-w-ch-select:focus {
      border-color: rgba(var(--rec-accent-rgb, 180,0,255), 0.6);
    }
    .rec-w-ch-select option {
      background: #161a1f;
      color: #ddd;
    }
    .rec-fx-overlay {
      display: none;
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.55);
      z-index: 225;
      align-items: center;
      justify-content: center;
      padding: 12px;
    }
    .rec-fx-overlay.open {
      display: flex;
    }
    .rec-fx-popup {
      width: 328px;
      max-height: calc(100% - 8px);
      overflow: hidden;
      background: linear-gradient(180deg, rgba(var(--rec-accent-rgb, 180,0,255), 0.14) 0%, #161a1f 56%);
      border: 1px solid rgba(var(--rec-accent-rgb, 180,0,255), 0.34);
      border-radius: 12px;
      box-shadow: 0 16px 54px rgba(0,0,0,0.6);
      display: flex;
      flex-direction: column;
      animation: recChPopIn 0.15s ease-out;
    }
    .rec-fx-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 14px 10px;
      border-bottom: 1px solid rgba(var(--rec-accent-rgb, 180,0,255), 0.22);
    }
    .rec-fx-title {
      font-size: 12px;
      font-weight: 700;
      color: var(--rec-accent, #B400FF);
      letter-spacing: 0.25px;
    }
    .rec-fx-power-btn {
      width: 28px;
      height: 28px;
      border-radius: 999px;
      border: 1px solid rgba(var(--rec-accent-rgb, 180,0,255), 0.58);
      background:
        linear-gradient(180deg,
          rgba(var(--rec-accent-rgb, 180,0,255), 0.92) 0%,
          rgba(var(--rec-accent-rgb, 180,0,255), 0.72) 100%);
      color: #e9f4ff;
      font-size: 18px;
      line-height: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.28),
        0 0 0 1px rgba(var(--rec-accent-rgb, 180,0,255), 0.2),
        0 3px 8px rgba(0,0,0,0.45);
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s, color 0.2s;
      flex-shrink: 0;
    }
    .rec-fx-power-btn.off {
      border-color: rgba(var(--rec-accent-rgb, 180,0,255), 0.3);
      background:
        linear-gradient(180deg,
          rgba(var(--rec-accent-rgb, 180,0,255), 0.14) 0%,
          rgba(26, 29, 34, 0.92) 100%);
      color: rgba(var(--rec-accent-rgb, 180,0,255), 0.5);
    }
    .rec-fx-power-btn::before {
      content: "⏻";
      width: 24px;
      height: 28px;
      line-height: 28px;
      font-size: 24px;
      text-align: center;
      display: block;
    }
    .rec-fx-tabs {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .rec-fx-tab-btn {
      border: 1px solid rgba(255,255,255,0.1);
      background: rgba(255,255,255,0.04);
      color: rgba(255,255,255,0.62);
      border-radius: 7px;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      padding: 4px 8px;
      cursor: pointer;
    }
    .rec-fx-tab-btn.active {
      color: #fff;
      border-color: rgba(var(--rec-accent-rgb, 180,0,255), 0.5);
      background: rgba(var(--rec-accent-rgb, 180,0,255), 0.22);
    }
    .rec-fx-body {
      padding: 25px 12px 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 0;
      overflow-y: auto;
    }
    .rec-fx-body::-webkit-scrollbar {
      width: 5px;
    }
    .rec-fx-body::-webkit-scrollbar-track {
      background: transparent;
    }
    .rec-fx-body::-webkit-scrollbar-thumb {
      background: rgba(255,255,255,0.15);
      border-radius: 4px;
    }
    .rec-fx-panel {
      display: none;
      min-height: 0;
      flex-direction: column;
      gap: 10px;
    }
    .rec-fx-panel.active {
      display: flex;
    }
    .rec-fx-add-row, .rec-fx-save-row, .rec-fx-master-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .rec-fx-input, .rec-fx-select {
      width: 100%;
      min-width: 0;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(0,0,0,0.2);
      color: rgba(255,255,255,0.9);
      border-radius: 8px;
      font-size: 10px;
      padding: 7px 9px;
      outline: none;
    }
    .rec-fx-input:focus, .rec-fx-select:focus {
      border-color: rgba(var(--rec-accent-rgb, 180,0,255), 0.58);
    }
    /* Custom FX type picker (replaces native select) */
    .rec-fx-type-picker {
      position: relative;
      flex: 1;
      min-width: 0;
    }
    .rec-fx-type-btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(0,0,0,0.2);
      color: rgba(255,255,255,0.9);
      border-radius: 8px;
      font-size: 10px;
      padding: 7px 9px;
      cursor: pointer;
      outline: none;
      font-family: inherit;
    }
    .rec-fx-type-btn:hover {
      border-color: rgba(255,255,255,0.22);
    }
    .rec-fx-type-btn svg {
      width: 10px;
      height: 6px;
      flex-shrink: 0;
      opacity: 0.55;
      transition: transform 0.15s ease;
    }
    .rec-fx-type-btn.open svg {
      transform: rotate(180deg);
    }
    .rec-fx-type-label {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .rec-fx-type-list {
      display: none;
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      right: 0;
      max-height: 200px;
      overflow-y: auto;
      background: #1e2228;
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 8px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.55);
      z-index: 50;
      padding: 4px 0;
    }
    .rec-fx-type-list.open {
      display: block;
    }
    .rec-fx-type-list-item {
      padding: 6px 10px;
      font-size: 10px;
      color: rgba(255,255,255,0.82);
      cursor: pointer;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .rec-fx-type-list-item:hover {
      background: rgba(var(--rec-accent-rgb, 180,0,255), 0.2);
      color: #fff;
    }
    .rec-fx-type-list-item.selected {
      background: rgba(var(--rec-accent-rgb, 180,0,255), 0.28);
      color: #fff;
    }
    .rec-fx-type-list::-webkit-scrollbar {
      width: 5px;
    }
    .rec-fx-type-list::-webkit-scrollbar-track {
      background: transparent;
    }
    .rec-fx-type-list::-webkit-scrollbar-thumb {
      background: rgba(255,255,255,0.15);
      border-radius: 4px;
    }
    .rec-fx-btn {
      border: 1px solid rgba(var(--rec-accent-rgb, 180,0,255), 0.34);
      background: rgba(var(--rec-accent-rgb, 180,0,255), 0.2);
      color: #fff;
      border-radius: 8px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.4px;
      text-transform: uppercase;
      padding: 7px 10px;
      cursor: pointer;
      white-space: nowrap;
    }
    .rec-fx-btn.secondary {
      border-color: rgba(255,255,255,0.16);
      background: rgba(255,255,255,0.05);
      color: rgba(255,255,255,0.78);
    }
    .rec-fx-btn.active {
      border-color: rgba(var(--rec-accent-rgb, 180,0,255), 0.55);
      background: rgba(var(--rec-accent-rgb, 180,0,255), 0.3);
      color: #fff;
    }
    .rec-fx-list {
      min-height: 90px;
      max-height: 160px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 9px;
      background: rgba(0,0,0,0.18);
      padding: 6px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .rec-fx-item {
      display: flex;
      align-items: center;
      gap: 8px;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      padding: 6px 8px;
      background: rgba(255,255,255,0.03);
      cursor: pointer;
      touch-action: none;
      transition: transform 0.18s cubic-bezier(.4,0,.2,1), box-shadow 0.18s ease;
      position: relative;
      z-index: 1;
    }
    .rec-fx-item .sli-eye {
      width: 15px; height: 15px; flex-shrink: 0; cursor: pointer;
    }
    .rec-fx-item .sli-eye .eye-slash { display: none; }
    .rec-fx-item .sli-eye.hidden .eye-slash { display: inline; }
    .rec-fx-item.sortable-ghost {
      opacity: 1;
      z-index: 999;
      box-shadow: 0 4px 18px rgba(0,0,0,0.5);
    }
    .rec-fx-item.sortable-shift-down {
      transform: translateY(var(--sortable-shift, 32px));
      transition: transform 0.18s cubic-bezier(.4,0,.2,1);
    }
    .rec-fx-item.sortable-shift-up {
      transform: translateY(calc(-1 * var(--sortable-shift, 32px)));
      transition: transform 0.18s cubic-bezier(.4,0,.2,1);
    }
    .rec-fx-item.active {
      border-color: rgba(var(--rec-accent-rgb, 180,0,255), 0.48);
      background: rgba(var(--rec-accent-rgb, 180,0,255), 0.18);
    }
    .rec-fx-item-title {
      font-size: 7.5px;
      color: rgba(255,255,255,0.9);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .rec-fx-item-empty {
      font-size: 7.5px;
      color: rgba(255,255,255,0.46);
      text-align: center;
      padding: 16px 8px;
    }
    .rec-fx-list .rec-fx-btn {
      font-size: 7.5px;
    }
    .rec-fx-editor {
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 9px;
      background: rgba(0,0,0,0.2);
      padding: 9px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-height: 72px;
      overflow-y: auto;
      flex-shrink: 1;
    }
    .rec-fx-editor::-webkit-scrollbar {
      width: 5px;
    }
    .rec-fx-editor::-webkit-scrollbar-track {
      background: transparent;
    }
    .rec-fx-editor::-webkit-scrollbar-thumb {
      background: rgba(255,255,255,0.15);
      border-radius: 4px;
    }
    .rec-fx-editor-title {
      font-size: 10px;
      font-weight: 700;
      color: rgba(var(--rec-accent-rgb, 180,0,255), 0.85);
      text-transform: uppercase;
      letter-spacing: 0.6px;
    }
    .rec-fx-param {
      display: grid;
      grid-template-columns: 70px 1fr 46px;
      align-items: center;
      gap: 8px;
    }
    .rec-fx-param label {
      font-size: 9px;
      color: rgba(255,255,255,0.7);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .rec-fx-param input[type="range"] {
      width: 100%;
      -webkit-appearance: none;
      appearance: none;
      height: 8px;
      border-radius: 999px;
      background: linear-gradient(90deg,
        rgba(var(--rec-accent-rgb, 180,0,255), 0.32) 0%,
        rgba(var(--rec-accent-rgb, 180,0,255), 0.18) 35%,
        rgba(255,255,255,0.16) 100%);
      outline: none;
      cursor: pointer;
      touch-action: pan-x;
    }
    .rec-fx-param input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,0.8), rgba(255,255,255,0.12) 45%, transparent 60%),
        linear-gradient(180deg, rgba(var(--rec-accent-rgb, 180,0,255), 0.95), rgba(var(--rec-accent-rgb, 180,0,255), 0.72));
      border: 1px solid rgba(255,255,255,0.38);
      box-shadow:
        0 0 0 1px rgba(0,0,0,0.28),
        0 2px 8px rgba(var(--rec-accent-rgb, 180,0,255), 0.45);
      cursor: default;
      transition: transform 0.08s ease;
    }
    .rec-fx-param input[type="range"]:active::-webkit-slider-thumb {
      transform: scale(1.08);
      cursor: default;
    }
    .rec-fx-param input[type="range"]::-moz-range-track {
      height: 8px;
      border-radius: 999px;
      border: none;
      background: linear-gradient(90deg,
        rgba(var(--rec-accent-rgb, 180,0,255), 0.32) 0%,
        rgba(var(--rec-accent-rgb, 180,0,255), 0.18) 35%,
        rgba(255,255,255,0.16) 100%);
    }
    .rec-fx-param input[type="range"]::-moz-range-thumb {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.38);
      background: var(--rec-accent, #B400FF);
      box-shadow:
        0 0 0 1px rgba(0,0,0,0.28),
        0 2px 8px rgba(var(--rec-accent-rgb, 180,0,255), 0.45);
      cursor: default;
    }
    .rec-fx-param span {
      font-size: 9px;
      font-family: 'SF Mono', Menlo, monospace;
      color: rgba(255,255,255,0.72);
      text-align: right;
    }
    .rec-fx-preset-list {
      min-height: 150px;
      max-height: 250px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 9px;
      background: rgba(0,0,0,0.18);
      padding: 6px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .rec-fx-preset-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      gap: 6px;
      align-items: center;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      background: rgba(255,255,255,0.03);
      padding: 6px 8px;
    }
    .rec-fx-preset-name {
      font-size: 10px;
      color: rgba(255,255,255,0.86);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    /* ── Bottom Bar (time + record btn) ── */
    .rec-w-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 20px 14px;
      flex-shrink: 0;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .rec-w-time {
      font-family: 'SF Mono', Menlo, Consolas, monospace;
      font-size: 22px;
      font-weight: 700;
      color: rgba(255,255,255,0.85);
      letter-spacing: 1.5px;
    }
    .rec-w-time-sub {
      font-size: 9px;
      font-weight: 500;
      color: rgba(255,255,255,0.2);
      text-transform: uppercase;
      letter-spacing: 0.6px;
      margin-top: 2px;
    }
    /* ── Stacked Pause / Split Buttons ── */
    .rec-side-btns {
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex-shrink: 0;
    }
    .rec-side-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      width: 62px;
      height: 28px;
      border-radius: 6px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.04);
      color: rgba(255,255,255,0.5);
      font-size: 9px;
      font-weight: 600;
      font-family: inherit;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      cursor: pointer;
      transition: background 0.12s, color 0.12s, border-color 0.12s;
    }
    .rec-side-btn:hover {
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.8);
      border-color: rgba(255,255,255,0.14);
    }
    .rec-side-btn svg {
      width: 10px;
      height: 10px;
    }
    .rec-side-btn:disabled {
      opacity: 0.25;
      cursor: default;
      pointer-events: none;
    }
    /* Record Button — Premium */
    .rec-window-btn {
      width: 86px;
      height: 86px;
      border-radius: 50%;
      border: none;
      padding: 3px;
      background:
        linear-gradient(160deg, #3a3e44 0%, #18191c 40%, #0c0c0e 70%, #2a2d32 100%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 -1px 0 rgba(0,0,0,0.5),
        0 2px 6px rgba(0,0,0,0.5),
        0 8px 24px rgba(0,0,0,0.35),
        0 0 0 1px rgba(255,255,255,0.04);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform 0.18s cubic-bezier(.4,0,.2,1), box-shadow 0.22s ease;
      flex-shrink: 0;
      position: relative;
    }
    /* subtle metallic ring highlight on the bezel */
    .rec-window-btn::before {
      content: '';
      position: absolute;
      inset: 1px;
      border-radius: 50%;
      background: transparent;
      box-shadow:
        inset 0 2px 8px rgba(0,0,0,0.55),
        inset 0 -1px 4px rgba(255,255,255,0.035);
      pointer-events: none;
    }
    .rec-window-btn:hover {
      transform: scale(1.06);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 -1px 0 rgba(0,0,0,0.5),
        0 2px 6px rgba(0,0,0,0.5),
        0 8px 24px rgba(0,0,0,0.35),
        0 0 28px rgba(241,44,24,0.25),
        0 0 0 1px rgba(255,255,255,0.04);
    }
    .rec-window-btn:active {
      transform: scale(0.94);
    }
    .rec-window-btn-dot {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(ellipse 70% 50% at 36% 32%, rgba(255,120,100,0.55), transparent 70%),
        radial-gradient(circle at 38% 36%, #ff4030, #F12C18 55%, #d0200c 78%, #8c1208);
      box-shadow:
        0 3px 16px rgba(241,44,24,0.5),
        0 0 4px rgba(241,44,24,0.2),
        inset 0 2px 3px rgba(255,255,255,0.2),
        inset 0 -3px 6px rgba(80,8,4,0.5);
      transition: border-radius 0.15s, width 0.15s, height 0.15s, box-shadow 0.22s ease;
    }
    /* primary top-left glossy shine */
    .rec-window-btn-dot::before {
      content: '';
      position: absolute;
      top: 5%;
      left: 16%;
      width: 50%;
      height: 38%;
      border-radius: 50%;
      background: linear-gradient(
        176deg,
        rgba(255,255,255,0.52) 0%,
        rgba(255,255,255,0.2) 45%,
        rgba(255,255,255,0) 100%
      );
      pointer-events: none;
    }
    /* secondary bottom-right rim light */
    .rec-window-btn-dot::after {
      content: '';
      position: absolute;
      bottom: 6%;
      right: 12%;
      width: 40%;
      height: 22%;
      border-radius: 50%;
      background: radial-gradient(
        ellipse at 60% 70%,
        rgba(255,180,160,0.18) 0%,
        rgba(255,255,255,0) 100%
      );
      pointer-events: none;
    }
    .rec-window-btn:hover .rec-window-btn-dot {
      box-shadow:
        0 3px 20px rgba(241,44,24,0.65),
        0 0 8px rgba(241,44,24,0.3),
        inset 0 2px 3px rgba(255,255,255,0.25),
        inset 0 -3px 6px rgba(80,8,4,0.5);
    }
    /* ── Window Tab Bar (inside window) ── */
    .rec-w-tabs-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin: 8px 20px 10px;
      flex-shrink: 0;
    }
    .rec-w-tabs {
      display: flex;
      gap: 0;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.08);
    }
    .rec-save-to-wrap {
      position: relative;
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 500;
      color: rgba(255,255,255,0.78);
    }
    .rec-save-to-label {
      white-space: nowrap;
      color: rgba(255,255,255,0.75);
    }
    .rec-save-to-path-btn {
      min-width: 0;
      max-width: 190px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 0 10px 0 12px;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.13);
      color: #fff;
      border-radius: 8px;
      font-size: 11px;
      font-weight: 600;
      font-family: inherit;
      letter-spacing: 0;
      cursor: pointer;
      transition: background 0.12s, border-color 0.12s;
    }
    .rec-save-to-path-btn:hover {
      background: rgba(255,255,255,0.2);
      border-color: rgba(255,255,255,0.26);
    }
    .rec-save-to-path-text {
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .rec-save-to-path-btn svg {
      width: 13px;
      height: 13px;
      flex-shrink: 0;
    }
    .rec-save-to-search-btn {
      min-width: 0;
      width: 28px;
      height: 28px;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.13);
      color: #fff;
      border-radius: 50%;
      padding: 0;
      cursor: pointer;
      transition: background 0.12s, border-color 0.12s;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .rec-save-to-search-btn svg {
      width: 14px;
      height: 14px;
    }
    .rec-save-to-search-btn:hover {
      background: rgba(255,255,255,0.2);
      border-color: rgba(255,255,255,0.26);
    }
    .rec-save-to-menu {
      position: absolute;
      bottom: 36px;
      right: 0px;
      min-width: 250px;
      max-width: 320px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.18);
      background: rgba(15,15,19,0.97);
      box-shadow: 0 12px 30px rgba(0,0,0,0.45);
      padding: 8px;
      z-index: 70;
      display: none;
    }
    .rec-save-to-menu.open {
      display: block;
    }
    .rec-save-to-opt {
      width: 100%;
      border: none;
      background: transparent;
      border-radius: 8px;
      color: rgba(255,255,255,0.95);
      text-align: left;
      padding: 8px 10px;
      font-size: 11px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .rec-save-to-opt:hover {
      background: rgba(255,255,255,0.12);
    }
    .rec-save-to-opt.current {
      background: rgba(80,160,210,0.82);
      color: #fff;
    }
    .rec-save-to-opt.current:hover {
      background: rgba(88,173,227,0.92);
    }
    .rec-save-to-opt svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
    }
    .rec-save-to-menu-sep {
      border: none;
      border-top: 1px solid rgba(255,255,255,0.2);
      margin: 8px 4px;
    }
    .rec-save-to-other {
      font-size: 12px;
    }
    .rec-w-tab {
      padding: 6px 16px;
      border: none;
      background: rgba(255,255,255,0.03);
      color: rgba(255,255,255,0.4);
      font-size: 10px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      transition: background 0.12s, color 0.12s;
      letter-spacing: 0.3px;
    }
    .rec-w-tab:not(:last-child) {
      border-right: 1px solid rgba(255,255,255,0.08);
    }
    .rec-w-tab:hover {
      background: rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.6);
    }
    .rec-w-tab.active {
      background: rgba(255,255,255,0.08);
      color: #fff;
    }
    /* ── Window Pages ── */
    .rec-w-page {
      display: none;
      flex-direction: column;
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      border-radius: 0 0 14px 14px;
    }
    .rec-w-page.active {
      display: flex;
    }
    /* ── Recordings Page ── */
    .rec-w-page-recordings {
      position: relative;
      background: #B400FF;
    }
    .rec-w-recs-header {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px 10px;
      font-size: 13px;
      font-weight: 700;
      color: #fff;
      letter-spacing: 0.3px;
      flex-shrink: 0;
    }
    .rec-w-recs-title {
      font-size: 13px;
      font-weight: 700;
    }
    .rec-w-recs-select-btn {
      border: 1px solid rgba(255,255,255,0.24);
      background: rgba(0,0,0,0.2);
      color: #fff;
      border-radius: 8px;
      padding: 4px 9px;
      font-size: 10px;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
      transition: background 0.12s, border-color 0.12s;
    }
    .rec-w-recs-select-btn:hover {
      background: rgba(0,0,0,0.32);
      border-color: rgba(255,255,255,0.36);
    }
    .rec-w-recs-merge-btn {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      border: 1px solid rgba(255,255,255,0.28);
      background: rgba(0,0,0,0.24);
      color: #fff;
      border-radius: 10px;
      padding: 6px 12px;
      font-size: 11px;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
      transition: background 0.12s, border-color 0.12s, opacity 0.12s;
      opacity: 0;
      pointer-events: none;
    }
    .rec-w-recs-merge-btn.show {
      opacity: 1;
      pointer-events: auto;
    }
    .rec-w-recs-merge-btn:hover {
      background: rgba(0,0,0,0.4);
      border-color: rgba(255,255,255,0.42);
    }
    .rec-w-recs-list {
      flex: 1;
      overflow-y: auto;
      padding: 0 12px 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .rec-w-recs-list::-webkit-scrollbar {
      width: 4px;
    }
    .rec-w-recs-list::-webkit-scrollbar-track {
      background: transparent;
    }
    .rec-w-recs-list::-webkit-scrollbar-thumb {
      background: rgba(255,255,255,0.2);
      border-radius: 2px;
    }
    .rec-w-recs-empty {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255,255,255,0.5);
      font-size: 12px;
      font-weight: 500;
    }
    /* ── Recording Item ── */
    .rec-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      background: rgba(0,0,0,0.18);
      border-radius: 8px;
      transition: background 0.12s;
    }
    .rec-item:hover {
      background: rgba(0,0,0,0.28);
    }
    .rec-item.selected {
      outline: 1px solid rgba(255,255,255,0.45);
      background: rgba(0,0,0,0.34);
    }
    .rec-item-checkbox {
      width: 16px;
      height: 16px;
      margin: 0;
      accent-color: #ffffff;
      cursor: pointer;
      flex-shrink: 0;
    }
    .rec-item-order-badge {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #261A33;
      color: #fff;
      font-size: 10px;
      font-weight: 600;
      line-height: 18px;
      text-align: center;
      flex-shrink: 0;
    }
    .rec-item-play {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: none;
      background: rgba(255,255,255,0.15);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      transition: background 0.12s;
    }
    .rec-item-play:hover {
      background: rgba(255,255,255,0.25);
    }
    .rec-item-play svg {
      width: 12px;
      height: 12px;
    }
    .rec-item-info {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .rec-item-name {
      font-size: 11px;
      font-weight: 600;
      color: #fff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .rec-item-meta {
      font-size: 9px;
      color: rgba(255,255,255,0.5);
      font-family: 'SF Mono', Menlo, monospace;
    }
    .rec-item-wave {
      width: 80px;
      height: 28px;
      flex-shrink: 0;
    }
    .rec-item-del {
      width: 24px;
      height: 24px;
      border-radius: 5px;
      border: none;
      background: transparent;
      color: rgba(255,255,255,0.35);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      transition: background 0.12s, color 0.12s;
    }
    .rec-item-del:hover {
      background: rgba(255,0,0,0.2);
      color: #ff4444;
    }
    .rec-item-del svg {
      width: 12px;
      height: 12px;
    }
    .rec-window-context-menu {
      position: absolute;
      display: none;
      min-width: 245px;
      border-radius: 12px;
      border: none;
      background: rgba(7,12,19,0.98);
      box-shadow: 0 18px 36px rgba(0,0,0,0.52);
      padding: 6px 0;
      z-index: 140;
    }
    .rec-window-context-menu.open {
      display: block;
    }
    .rec-win-ctx-item {
      width: 100%;
      border: none;
      background: transparent;
      color: rgba(255,255,255,0.94);
      text-align: left;
      padding: 11px 16px;
      font-size: 12px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .rec-win-ctx-item:hover {
      background: rgba(255,255,255,0.08);
    }
    .rec-win-ctx-item.active {
      background: rgba(255,255,255,0.12);
      color: #fff;
    }
    .rec-win-ctx-item.active .rec-win-ctx-item-tag {
      color: rgba(255,255,255,0.95);
      background: rgba(255,255,255,0.14);
      border-color: rgba(255,255,255,0.24);
    }
    .rec-win-ctx-item-tag {
      padding: 2px 8px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.16);
      color: rgba(255,255,255,0.72);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.3px;
      text-transform: uppercase;
    }
    .rec-win-ctx-sep {
      margin: 6px 0;
      border: none;
      border-top: 1px solid rgba(255,255,255,0.14);
    }
    .rec-win-ctx-section {
      padding: 8px 16px 5px;
      font-size: 12px;
      font-weight: 700;
      color: rgba(255,255,255,0.92);
    }
    .rec-win-ctx-colors {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      padding: 4px 16px 10px;
    }
    .rec-win-ctx-color-btn {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,0.22);
      cursor: pointer;
      padding: 0;
      position: relative;
      transition: transform 0.1s ease, border-color 0.12s ease;
    }
    .rec-win-ctx-color-btn:hover {
      transform: scale(1.08);
      border-color: rgba(255,255,255,0.48);
    }
    .rec-win-ctx-color-btn.active::after {
      content: '';
      position: absolute;
      inset: 4px;
      border-right: 2px solid #fff;
      border-bottom: 2px solid #fff;
      transform: rotate(45deg);
    }
    /* Skin color row */
    .rec-win-ctx-skin-colors {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 4px 16px 10px;
    }
    .rec-win-ctx-skin-btn {
      width: 18px;
      height: 18px;
      border-radius: 4px;
      border: 2px solid rgba(255,255,255,0.22);
      cursor: pointer;
      padding: 0;
      position: relative;
      transition: transform 0.1s ease, border-color 0.12s ease;
    }
    .rec-win-ctx-skin-btn:hover {
      transform: scale(1.08);
      border-color: rgba(255,255,255,0.48);
    }
    .rec-win-ctx-skin-btn.active::after {
      content: '';
      position: absolute;
      inset: 4px;
      border-right: 2px solid #fff;
      border-bottom: 2px solid #fff;
      transform: rotate(45deg);
    }
    .rec-recs-context-menu {
      position: absolute;
      display: none;
      min-width: 170px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.22);
      background: rgba(12,12,16,0.96);
      box-shadow: 0 14px 28px rgba(0,0,0,0.45);
      padding: 6px;
      z-index: 90;
    }
    .rec-recs-context-menu.open {
      display: block;
    }
    .rec-recs-context-menu button {
      width: 100%;
      border: none;
      background: transparent;
      color: #fff;
      text-align: left;
      border-radius: 7px;
      padding: 8px 10px;
      font-size: 11px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
    }
    .rec-recs-context-menu button:hover {
      background: rgba(255,255,255,0.12);
    }
    .rec-recs-context-menu button:disabled {
      opacity: 0.45;
      cursor: default;
    }

    #app-body-row {
      display: flex;
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
    }

    #activity-bar {
      width: 52px;
      min-width: 52px;
      background: var(--activity-bar-bg);
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 8px 0 12px;
      flex-shrink: 0;
      z-index: 200;
      gap: 4px;
      user-select: none;
      -webkit-user-select: none;
      contain: layout style;
    }

    .ab-btn {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      background: transparent;
      color: var(--text-secondary);
      cursor: pointer;
      border-radius: var(--radius-sm);
      position: relative;
      transition: color var(--duration-instant) var(--ease-out),
                  background var(--duration-instant) var(--ease-out),
                  transform var(--duration-instant) var(--ease-spring);
      will-change: transform;
    }
    .ab-btn:hover {
      color: var(--text);
      background: rgba(255, 255, 255, 0.08);
    }
    .ab-btn:active {
      transform: scale(0.92);
    }
    .ab-btn.active {
      color: #ffffff;
      background: rgba(10, 132, 255, 0.15);
    }
    .ab-btn.active::before {
      content: '';
      position: absolute;
      left: -6px;
      top: 25%;
      height: 50%;
      width: 3px;
      border-radius: 0 3px 3px 0;
      background: var(--accent);
      transition: height var(--duration-fast) var(--ease-spring);
    }
    .ab-btn svg {
      width: 20px;
      height: 20px;
      display: block;
    }
    .ab-btn .ab-label {
      display: none;
    }

    .ab-spacer {
      flex: 1;
    }

    /* ---- Activity-bar gear popup menu (VS Code style) ---- */
    .ab-popup-menu {
      display: none;
      position: absolute;
      left: 52px;
      bottom: 6px;
      min-width: 240px;
      background: var(--bg-panel, #1e1e2e);
      border: 1px solid var(--border, rgba(255,255,255,0.12));
      border-radius: 8px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04);
      z-index: 9000;
      padding: 5px 0;
      font-size: 13px;
      color: var(--text, #cdd6e4);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      animation: abPopIn 0.12s ease-out;
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
    }
    .ab-popup-menu.open { display: block; }
    @keyframes abPopIn {
      from { opacity: 0; transform: translateX(-4px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    .ab-popup-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 6px 18px;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.1s;
      position: relative;
    }
    .ab-popup-item:hover {
      background: rgba(74,134,255,0.15);
      color: #fff;
    }
    .ab-popup-item .ab-pop-icon {
      width: 16px;
      height: 16px;
      opacity: 0.7;
      flex-shrink: 0;
    }
    .ab-popup-item:hover .ab-pop-icon { opacity: 1; }
    .ab-popup-item .ab-pop-shortcut {
      margin-left: auto;
      font-size: 11px;
      color: #6b7a94;
      padding-left: 24px;
    }
    .ab-popup-sep {
      height: 1px;
      background: rgba(255,255,255,0.08);
      margin: 5px 12px;
    }
    /* submenu arrow */
    .ab-popup-item.has-sub::after {
      content: '\203A';
      margin-left: auto;
      font-size: 16px;
      line-height: 1;
      color: #6b7a94;
    }
    .ab-popup-item.has-sub:hover::after { color: #fff; }
    /* submenu panel */
    .ab-popup-sub {
      display: none;
      position: absolute;
      left: 100%;
      bottom: -5px;
      top: auto;
      min-width: 200px;
      max-height: 60vh;
      overflow-y: auto;
      background: var(--bg-panel, #1e1e2e);
      border: 1px solid var(--border, rgba(255,255,255,0.12));
      border-radius: 8px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.55);
      padding: 5px 0;
      z-index: 9001;
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
    }
    .ab-popup-item.has-sub:hover > .ab-popup-sub,
    .ab-popup-item.has-sub:focus-within > .ab-popup-sub { display: block; }
    .ab-popup-sub .ab-popup-item { padding: 6px 18px; padding-left: 30px; }
    .ab-sub-search {
      position: sticky;
      top: 0;
      padding: 6px 10px;
      background: var(--bg-panel, #1e1e2e);
      z-index: 1;
    }
    .ab-sub-search input {
      width: 100%;
      box-sizing: border-box;
      padding: 5px 10px;
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 5px;
      background: rgba(255,255,255,0.06);
      color: #cdd6e4;
      font-size: 12px;
      outline: none;
    }
    .ab-sub-search input::placeholder { color: #6b7a94; }
    .ab-sub-search input:focus { border-color: rgba(74,134,255,0.5); }
    .ab-popup-sub .ab-popup-item.theme-active { color: var(--tab-active-color, #0ea5e9); }
    .ab-popup-sub .ab-popup-item.theme-active::before {
      content: '\2713';
      position: absolute;
      left: 10px;
      font-size: 13px;
      font-weight: bold;
      color: var(--tab-active-color, #0ea5e9);
    }
    .ab-popup-backdrop {
      display: none;
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      z-index: 8999;
    }
    .ab-popup-backdrop.open { display: block; }

    .ab-divider {
      width: 24px;
      height: 1px;
      background: var(--border);
      margin: 4px 0;
    }

    #app-topbar {
      height: 36px;
      display: flex;
      align-items: center;
      padding: 0 14px;
      background: var(--header-toolbar-bg, linear-gradient(180deg, #141a24, #101621));
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
      transition: background 0.25s ease;
    }

    #app-topbar-settings {
      margin-left: auto;
      background: transparent;
      border: 1px solid var(--border);
      color: var(--text-secondary, #d9e2f1);
      padding: 4px 12px;
      border-radius: 5px;
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      letter-spacing: 0.3px;
      transition: background 0.15s, border-color 0.15s;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    #app-topbar-settings:hover {
      background: rgba(14, 165, 233, 0.15);
      border-color: var(--accent);
    }

    #app-topbar-title {
      font-family: 'Inter', 'SF Pro Text', 'Segoe UI', system-ui, -apple-system, sans-serif;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.5px;
      color: var(--text, #e8eef8);
      text-transform: uppercase;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: color 0.25s ease;
    }

    #app-topbar-logo {
      width: 22px;
      height: 22px;
      flex-shrink: 0;
      border-radius: 5px;
      overflow: hidden;
    }

    #status-bar {
      background: linear-gradient(135deg, #0a0d14, #161b22);
      color: var(--text-secondary);
      font-size: 11px;
      padding: 8px 16px;
      display: none !important;
      align-items: center;
      gap: 8px;
      border-bottom: 1px solid var(--border);
      text-transform: uppercase;
      font-weight: 600;
      letter-spacing: 0.5px;
    }
    
    #status-dot {
      width: 10px;
      height: 10px;
      background: #484f58;
      border-radius: 50%;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 0 0 0 rgba(31, 111, 235, 0);
    }
    
    #status-bar.connected {
      color: var(--success);
    }
    
    #status-bar.connected #status-dot {
      background: var(--success);
      box-shadow: 0 0 0 4px rgba(35, 134, 54, 0.2);
      animation: pulse 2s infinite;
    }

    #ai-debug-strip {
      position: fixed;
      top: 42px;
      right: 10px;
      z-index: 9999;
      width: min(360px, calc(100vw - 20px));
      padding: 8px 10px;
      border-radius: 10px;
      background: rgba(10, 13, 20, 0.92);
      border: 1px solid rgba(130, 146, 171, 0.35);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(10px);
      color: #e8ecf2;
      font-size: 10px;
      line-height: 1.35;
      display: flex;
      flex-direction: column;
      gap: 4px;
      pointer-events: none;
    }

    #ai-debug-strip .ai-debug-title {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #8fb8ff;
    }

    #ai-debug-strip .ai-debug-line {
      display: grid;
      grid-template-columns: 72px 1fr;
      gap: 6px;
      align-items: start;
    }

    #ai-debug-strip .ai-debug-key {
      color: #8a93a3;
      text-transform: uppercase;
    }

    #ai-debug-strip .ai-debug-value {
      color: #e8ecf2;
      word-break: break-word;
    }

    #ai-debug-strip .ai-debug-value.is-error {
      color: #ff7b72;
    }

    #ai-debug-strip .ai-debug-value.is-ok {
      color: #7ee787;
    }
    
    @keyframes pulse {
      0% { box-shadow: 0 0 0 0 rgba(35, 134, 54, 0.4); }
      70% { box-shadow: 0 0 0 6px rgba(35, 134, 54, 0); }
      100% { box-shadow: 0 0 0 0 rgba(35, 134, 54, 0); }
    }

    .app-container {
      display: flex;
      flex-grow: 1;
      overflow: hidden;
      transition: opacity 0.3s ease;
      width: 100%;
      max-width: none;
      min-width: 300px;
      height: 100%;
      flex-direction: column;
      margin: 0;
    }

    #workspace-top {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      overflow: hidden;
    }

    #left-workspace {
      display: flex;
      flex-direction: column;
      min-width: 0;
      min-height: 0;
      overflow: visible;
      flex: 1 1 auto;
      position: relative;
      isolation: isolate;
    }

    #sidebar-popup-backdrop {
      position: absolute;
      /* cover only the portion of the workspace that the panel can occupy */
      top: var(--app-topbar-height);
      left: var(--activity-bar-width);
      width: calc(100% - var(--activity-bar-width));
      height: calc(100% - var(--app-topbar-height));
      background: transparent;
      display: none;
      z-index: 240;
      pointer-events: none;
    }
    #sidebar-popup-backdrop.open {
      display: block;
    }

    /* sidebar popup panel must live to the right of the activity bar and
       below the top‑bar so it never gets hidden or covers the header. the
       values are duplicated in the JS that toggles the panel, so keep them
       synced or expose them as CSS variables if they ever change. */
    :root {
      --activity-bar-width: 0px;
      --app-topbar-height: 36px;
    }

    #sidebar {
      width: 200px;
      min-width: 200px;
      max-width: 200px;
      background: var(--material-thick);
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      transition: transform var(--duration-normal) var(--ease-spring),
                  opacity var(--duration-fast) var(--ease-out);
      overflow: hidden;
      min-height: 0;
      flex-shrink: 0;
      contain: layout style;
      position: fixed;
      /* push the panel away from the left activity bar and the top toolbar */
      left: var(--activity-bar-width);
      top: var(--app-topbar-height);
      height: calc(100% - var(--app-topbar-height));
      z-index: 20000 !important;
      transform: translateX(calc(-100% - 12px));
      opacity: 0;
      pointer-events: none;
      box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
    }

    #sidebar.sidebar-open {
      transform: translateX(0);
      opacity: 1;
      pointer-events: auto;
      background: var(--bg-panel, #1b1f2a);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    #sidebar-width-handle {
      display: none !important;
    }
    #sidebar-width-handle:hover,
    #sidebar-width-handle:active {
      background: var(--accent);
    }
    #sidebar-width-handle .grip {
      width: 2px;
      height: 24px;
      border-radius: 1px;
      background: var(--text-tertiary);
      opacity: 0;
      transition: opacity var(--duration-fast) var(--ease-out);
    }
    #sidebar-width-handle:hover .grip {
      opacity: 0.8;
    }

    #sidebar-quick-actions-btn {
      position: fixed;
      z-index: 9205;
      width: 26px;
      height: 74px;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 0 12px 12px 0;
      background: linear-gradient(180deg, rgba(20,24,34,0.96), rgba(12,14,22,0.92));
      color: var(--text);
      display: none;
      align-items: center;
      justify-content: center;
      box-shadow: 0 14px 36px rgba(0,0,0,0.32);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      padding: 0;
    }

    #sidebar-quick-actions-btn span {
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      opacity: 0.92;
    }

    #sidebar-quick-actions-btn.active {
      border-color: rgba(10,132,255,0.42);
      background: linear-gradient(180deg, rgba(10,132,255,0.28), rgba(16,22,34,0.96));
    }

    #sidebar-quick-actions-panel {
      position: fixed;
      z-index: 9206;
      width: min(280px, 34vw);
      min-width: 240px;
      max-height: min(70vh, 560px);
      overflow: auto;
      display: none;
      padding: 12px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.10);
      background: linear-gradient(180deg, rgba(18,22,30,0.97), rgba(10,12,18,0.95));
      box-shadow: 0 18px 42px rgba(0,0,0,0.38);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      color: var(--text);
    }

    #sidebar-quick-actions-panel.open {
      display: block;
    }

    .sidebar-qa-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
    }

    .sidebar-qa-title {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--text-secondary);
    }

    .sidebar-qa-group {
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 12px;
      padding: 10px;
      background: rgba(255,255,255,0.03);
    }

    .sidebar-qa-group + .sidebar-qa-group {
      margin-top: 10px;
    }

    .sidebar-qa-group-title {
      font-size: 11px;
      font-weight: 700;
      color: var(--accent-light);
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .sidebar-qa-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 7px 0;
      font-size: 12px;
      color: var(--text);
    }

    .sidebar-qa-item + .sidebar-qa-item {
      border-top: 1px solid rgba(255,255,255,0.05);
    }

    .sidebar-qa-toggle {
      position: relative;
      width: 42px;
      height: 24px;
      border: none;
      border-radius: 999px;
      background: rgba(255,255,255,0.14);
      padding: 0;
      flex-shrink: 0;
      transition: background 0.18s ease;
    }

    .sidebar-qa-toggle::after {
      content: '';
      position: absolute;
      top: 3px;
      left: 3px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 2px 6px rgba(0,0,0,0.25);
      transition: transform 0.18s ease;
    }

    .sidebar-qa-toggle.active {
      background: linear-gradient(135deg, #0a84ff, #4aa3ff);
    }

    .sidebar-qa-toggle.active::after {
      transform: translateX(18px);
    }

    .sidebar-qa-select {
      min-width: 118px;
      max-width: 132px;
      height: 30px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.06);
      color: var(--text);
      padding: 0 28px 0 10px;
      font-size: 12px;
      outline: none;
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='rgba(255,255,255,0.45)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
      background-size: 10px 6px;
      flex-shrink: 0;
    }

    .sidebar-qa-select-wrap {
      position: relative;
      flex-shrink: 0;
    }

    .sidebar-qa-select-wrap .sidebar-qa-select {
      padding-right: 40px;
    }

    .sidebar-qa-select-badge {
      position: absolute;
      top: -7px;
      right: -7px;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #0a84ff, #4aa3ff);
      color: #fff;
      font-size: 8px;
      font-weight: 800;
      letter-spacing: 0.04em;
      box-shadow: 0 4px 10px rgba(0,0,0,0.22);
      pointer-events: none;
    }

    body.sidebar-layout-docked-active #left-workspace {
      flex-direction: row;
      overflow: hidden;
    }
    body.sidebar-layout-docked-active #sidebar-popup-backdrop {
      display: none !important;
    }
    body.sidebar-layout-docked-active #sidebar {
      position: relative;
      left: auto;
      top: auto;
      height: 100%;
      transform: none;
      opacity: 1;
      pointer-events: auto;
      z-index: 20 !important;
      box-shadow: none;
    }
    body.sidebar-layout-docked-active #sidebar:not(.sidebar-open) {
      width: 0 !important;
      min-width: 0 !important;
      max-width: 0 !important;
      border-right: 0;
      opacity: 0;
      pointer-events: none;
    }
    body.sidebar-layout-docked-active #sidebar.sidebar-open {
      transform: none;
      opacity: 1;
      pointer-events: auto;
    }
    body.sidebar-layout-docked-active #sidebar-width-handle {
      display: flex !important;
    }
    body.sidebar-layout-docked-active #sidebar:not(.sidebar-open) + #sidebar-width-handle {
      display: none !important;
    }
    body.sidebar-layout-docked-active #sidebar-resize-handle {
      display: none !important;
    }
    body.sidebar-layout-docked-active #program-display-panel {
      min-width: 550px;
    }
    
    .sidebar-tabs {
      display: flex;
      background: transparent;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
      padding: 0 var(--space-sm);
      gap: 2px;
    }
    
    .tab {
      flex: 1;
      padding: 8px 10px;
      font-size: 11px;
      text-align: center;
      cursor: pointer;
      color: var(--text-secondary);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      transition: color var(--duration-instant) var(--ease-out),
                  background var(--duration-instant) var(--ease-out);
      position: relative;
      overflow: hidden;
      border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    }
    
    .tab::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 2px;
      background: var(--accent);
      transition: width var(--duration-fast) var(--ease-spring);
      border-radius: 2px 2px 0 0;
    }
    
    .tab:hover {
      color: var(--text);
      background: rgba(255, 255, 255, 0.04);
    }
    
    .tab.active {
      color: #e8f0ff;
      background: rgba(255, 255, 255, 0.04);
    }
    
    .tab.active::after {
      width: 70%;
      background: var(--accent-light, #4a86ff);
    }

    .search-container {
      position: relative;
      padding: var(--space-sm) var(--space-md);
      flex-shrink: 0;
      background: transparent;
      border-bottom: 1px solid var(--border);
    }
    
    #song-search {
      width: 100%;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: var(--text);
      padding: 8px 64px 8px 12px;
      box-sizing: border-box;
      border-radius: var(--radius-md);
      font-size: 13px;
      transition: border-color var(--duration-instant) var(--ease-out),
                  box-shadow var(--duration-instant) var(--ease-out),
                  background var(--duration-instant) var(--ease-out);
      font-family: inherit;
      letter-spacing: -0.01em;
    }
    
    #song-search:focus {
      outline: none;
      border-color: var(--accent);
      background: rgba(255, 255, 255, 0.08);
      box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.2);
    }
    
    #song-search::placeholder {
      color: var(--text-tertiary);
    }
    
    .clear-search {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      color: var(--text-secondary);
      font-size: 16px;
      font-weight: bold;
      transition: color 0.2s ease;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
    }
    
    .clear-search:hover {
      color: var(--text);
      background: rgba(255, 255, 255, 0.1);
    }

    .auto-lyrics-input-wrap {
      position: relative;
      flex: 1 1 280px;
      min-width: 220px;
    }

    .auto-lyrics-input-wrap.artist {
      flex: 1 1 220px;
      min-width: 180px;
    }

    .auto-lyrics-input {
      width: 100%;
      box-sizing: border-box;
      padding: 10px 34px 10px 12px;
      background: #0a0d14;
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: 8px;
    }

    .auto-lyrics-clear-btn {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      width: 22px;
      height: 22px;
      display: none;
      align-items: center;
      justify-content: center;
      border: none;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.08);
      color: var(--text-secondary);
      font-size: 14px;
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
      padding: 0;
    }

    .auto-lyrics-clear-btn:hover {
      color: var(--text);
      background: rgba(255, 255, 255, 0.16);
    }

    .bible-search-tool-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 22px;
      height: 22px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 6px;
      background: var(--header-btn-bg, rgba(255, 255, 255, 0.06));
      color: var(--text-secondary);
      display: none;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 11px;
      line-height: 1;
      padding: 0;
      z-index: 3;
    }
    .bible-search-tool-btn:hover {
      color: var(--text);
      background: var(--material-thin, rgba(255, 255, 255, 0.1));
    }
    .bible-search-tool-btn.active {
      color: #fff;
      border-color: rgba(10, 132, 255, 0.45);
      background: rgba(10, 132, 255, 0.22);
    }
    #bible-ref-pin-current { right: 44px; }
    #bible-ref-history-btn { right: 18px; }

    #bible-ref-picker {
      display: none;
      position: absolute;
      left: 10px;
      right: 10px;
      top: calc(100% + 2px);
      max-height: 250px;
      overflow-y: auto;
      background: var(--bg-panel, #1c1f26);
      border: 1px solid var(--border);
      border-radius: 8px;
      z-index: 105;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
      padding: 6px;
      scrollbar-width: thin;
      scrollbar-color: var(--text-secondary) transparent;
    }
    #bible-ref-picker::-webkit-scrollbar { width: 5px; }
    #bible-ref-picker::-webkit-scrollbar-thumb { background: var(--text-secondary); border-radius: 3px; }
    #bible-ref-picker::-webkit-scrollbar-track { background: transparent; }
    .bible-ref-group-label {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      color: var(--text-tertiary);
      padding: 4px 8px;
    }
    .bible-ref-item {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      border: 0;
      border-radius: 6px;
      background: transparent;
      color: var(--text);
      padding: 6px 8px;
      text-align: left;
      cursor: pointer;
    }
    .bible-ref-item:hover {
      background: rgba(10, 132, 255, 0.16);
    }
    .bible-ref-item-main {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .bible-ref-item-title {
      font-size: 12px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: var(--text);
    }
    .bible-ref-item-meta {
      font-size: 10px;
      color: var(--text-secondary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .bible-ref-item-pin {
      flex: 0 0 auto;
      width: 20px;
      height: 20px;
      border: 0;
      border-radius: 5px;
      background: transparent;
      color: var(--text-tertiary);
      cursor: pointer;
      font-size: 12px;
      line-height: 1;
      padding: 0;
    }
    .bible-ref-item-pin:hover,
    .bible-ref-item-pin.is-pinned {
      color: var(--accent-light, #60a5fa);
      background: rgba(10, 132, 255, 0.12);
    }
    .bible-ref-empty {
      padding: 8px;
      font-size: 11px;
      color: var(--text-tertiary);
      text-align: center;
    }

    #search-autocomplete {
      display: none;
      position: absolute;
      left: 10px;
      right: 10px;
      top: 100%;
      max-height: 180px;
      overflow-y: auto;
      background: var(--bg-panel, #1c1f26);
      border: 1px solid var(--border);
      border-top: none;
      border-radius: 0 0 6px 6px;
      z-index: 100;
      box-shadow: 0 4px 12px rgba(0,0,0,0.4);
      scrollbar-width: thin;
      scrollbar-color: var(--text-secondary) transparent;
    }
    #search-autocomplete::-webkit-scrollbar { width: 5px; }
    #search-autocomplete::-webkit-scrollbar-thumb { background: var(--text-secondary); border-radius: 3px; }
    #search-autocomplete::-webkit-scrollbar-track { background: transparent; }
    .ac-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 4px 8px;
      font-size: 11px;
      color: var(--text);
      cursor: pointer;
    }
    .ac-item-text {
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .ac-item-pin {
      width: 18px;
      height: 18px;
      border: 0;
      border-radius: 4px;
      background: transparent;
      color: var(--text-tertiary);
      cursor: pointer;
      line-height: 1;
      font-size: 11px;
      padding: 0;
      flex: 0 0 auto;
    }
    .ac-item-pin:hover {
      color: var(--accent-light, #60a5fa);
      background: rgba(10, 132, 255, 0.12);
    }
    .ac-item:hover, .ac-item.ac-active {
      background: rgba(31, 111, 235, 0.2);
      color: var(--accent-light, #60a5fa);
    }

    #nav-mirror-results {
      display: none;
      position: absolute;
      left: 0;
      right: 0;
      bottom: calc(100% + 4px);
      max-height: 240px;
      overflow-y: auto;
      background: var(--bg-panel, #1c1f26);
      border: 1px solid var(--border);
      border-radius: 8px;
      z-index: 1500;
      box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
      scrollbar-width: thin;
      scrollbar-color: var(--text-secondary) transparent;
    }
    #nav-mirror-results::-webkit-scrollbar { width: 5px; }
    #nav-mirror-results::-webkit-scrollbar-thumb { background: var(--text-secondary); border-radius: 3px; }
    #nav-mirror-results::-webkit-scrollbar-track { background: transparent; }
    .nav-mirror-search-tool {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 22px;
      height: 22px;
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 6px;
      background: var(--header-btn-bg, rgba(255,255,255,0.06));
      color: var(--text-secondary);
      display: none;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 11px;
      line-height: 1;
      padding: 0;
      z-index: 4;
    }
    .nav-mirror-search-tool:hover {
      color: var(--text);
      background: var(--material-thin, rgba(255,255,255,0.1));
    }
    .nav-mirror-search-tool.active {
      color: #fff;
      border-color: rgba(10,132,255,0.45);
      background: rgba(10,132,255,0.22);
    }
    #nav-mirror-ref-pin-current { right: 32px; }
    #nav-mirror-ref-history-btn { right: 6px; }
    #nav-mirror-bible-ref-picker {
      display: none;
      position: absolute;
      left: 0;
      right: 0;
      bottom: calc(100% + 4px);
      max-height: 240px;
      overflow-y: auto;
      background: var(--bg-panel, #1c1f26);
      border: 1px solid var(--border);
      border-radius: 8px;
      z-index: 1501;
      box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
      scrollbar-width: thin;
      scrollbar-color: var(--text-secondary) transparent;
      padding: 6px;
    }
    #nav-mirror-bible-ref-picker::-webkit-scrollbar { width: 5px; }
    #nav-mirror-bible-ref-picker::-webkit-scrollbar-thumb { background: var(--text-secondary); border-radius: 3px; }
    #nav-mirror-bible-ref-picker::-webkit-scrollbar-track { background: transparent; }
    .nav-mirror-result-item {
      padding-right: 10px;
    }
    .nav-mirror-close-btn {
      border: 1px solid rgba(255, 70, 70, 0.85);
      background: #d62828;
      color: #fff;
      width: 20px;
      height: 20px;
      border-radius: 5px;
      font-size: 14px;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      position: sticky;
      top: 6px;
      margin: 0 6px 4px auto;
      z-index: 3;
    }
    .nav-mirror-close-btn:hover {
      background: #ef4444;
    }

    #bible-nav {
      display: none;
      padding: 6px 10px 6px;
      gap: 6px;
      flex-shrink: 0;
      background: transparent;
      border-bottom: 1px solid var(--border);
    }
    
    .nav-input {
      flex: 1;
      background: #2d333f;
      border: 1px solid var(--border);
      color: var(--text);
      font-size: 11px;
      padding: 5px 8px;
      border-radius: 6px;
      outline: none;
      transition: all 0.2s ease;
      font-family: inherit;
    }
    
    .nav-input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.2);
    }

    #version-bar {
      display: none;
      flex-direction: column;
      gap: 2px;
      padding: 4px 0;
      background: transparent;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .version-row {
      display: flex;
      gap: 4px;
      padding: 0 10px;
      overflow-x: auto;
      overflow-y: hidden;
      flex-shrink: 0;
      align-items: center;
      scrollbar-width: none;
    }
    .version-row::-webkit-scrollbar { display: none; }
    
    .version-wrapper {
      display: inline-flex;
      align-items: center;
      border-radius: 4px;
      overflow: hidden;
      border: 1.5px solid transparent;
      transition: all 0.15s ease;
      background: rgba(255, 255, 255, 0.06);
      flex-shrink: 0;
    }
    .version-wrapper:hover {
      background: rgba(255, 255, 255, 0.10);
    }
    
    .version-wrapper.active {
      border-color: var(--accent);
      background: rgba(31, 111, 235, 0.15);
    }
    
    .version-btn {
      padding: 2px 8px;
      font-size: 10px;
      border: none;
      color: white;
      cursor: pointer;
      font-weight: 700;
      white-space: nowrap;
      transition: all 0.15s ease;
      background: transparent;
      letter-spacing: 0.3px;
      line-height: 18px;
    }
    .version-wrapper.active .version-btn {
      color: var(--accent-light, #60a5fa);
    }
    
    .version-del {
      background: transparent;
      color: var(--text-secondary);
      border: none;
      padding: 0 4px;
      cursor: pointer;
      font-size: 9px;
      line-height: 18px;
      transition: all 0.15s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
    }
    .version-wrapper:hover .version-del { opacity: 0.7; }
    
    .version-del:hover {
      color: var(--danger);
      opacity: 1 !important;
    }

    #song-list {
      overflow-y: auto;
      flex: 1 1 auto;
      min-height: 0;
      padding: 6px 10px 10px;
    }
    
    .song-item {
      padding: 10px 12px;
      font-size: 13px;
      cursor: pointer;
      border-bottom: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: transparent;
      border-radius: var(--radius-sm);
      margin: 1px 0;
      transition: background var(--duration-instant) var(--ease-out),
                  transform var(--duration-instant) var(--ease-spring);
      border-left: 3px solid transparent;
    }
    
    .song-item:hover {
      background: rgba(255, 255, 255, 0.06);
      border-color: transparent;
      transform: none;
    }
    
    .song-item.active {
      background: rgba(10, 132, 255, 0.12);
      border-left: 3px solid var(--accent);
      box-shadow: none;
    }

    .song-item .search-title {
      font-weight: 700;
      display: block;
    }

    .song-item .search-snippet {
      display: block;
      font-size: 11px;
      color: var(--text-secondary);
      margin-top: 4px;
      line-height: 1.3;
    }

    .drag-handle {
      cursor: default;
      color: var(--text-secondary);
      padding-left: 8px;
      opacity: 0.6;
      transition: opacity 0.3s ease;
    }
    
    .drag-handle:hover {
      opacity: 1;
    }
    
    .dragging {
      opacity: 0.5;
      background: rgba(31, 111, 235, 0.2) !important;
    }
    
    .drop-target {
      outline: 2px dashed var(--accent);
      outline-offset: -2px;
      background: rgba(31, 111, 235, 0.1) !important;
    }

    /* Make verse numbers obvious inside the main panel */
    .jo-verse-sup {
      font-size: 0.75em;
      vertical-align: super;
      margin-right: 6px;
      line-height: 1;
      background: rgba(10, 22, 47, 0.6);
      padding: 3px 8px;
      border-radius: 4px;
      font-weight: 800;
      color: #fff;
      text-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
      border: 1px solid rgba(255, 255, 255, 0.4);
      display: inline-block;
    }

    .jo-highlight {
      display: block;
      margin: 0 0 0.35em;
      padding: 0.18em 0.4em;
      line-height: 1.35;
      border-radius: 10px;
      box-decoration-break: clone;
      background: var(--highlight-color, rgba(255, 235, 150, 0.95));
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
      word-break: break-word;
    }

    #main {
      /* allow the main panel to grow and shrink with its container rather
         than staying fixed at 620px; this eliminates the large gap on the
         right when the OBS dock gets wider than the intended design width. */
      flex: 1 1 545px;
      width: 545px;
      min-width: 560px;
      max-width: none;
      display: flex;
      flex-direction: column;
      background: var(--bg-dark);
      position: relative;
      overflow: hidden;
      min-height: 0;
      min-width: 0;
      contain: layout style;
      z-index: 1 !important;
    }

    #program-width-handle {
      width: 5px;
      cursor: ew-resize;
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      user-select: none;
      -webkit-user-select: none;
      z-index: 110;
      touch-action: none;
      transition: background var(--duration-instant) var(--ease-out);
    }

    #program-width-handle:hover,
    #program-width-handle:active {
      background: var(--accent);
    }

    #program-width-handle .grip {
      width: 2px;
      height: 24px;
      border-radius: 1px;
      background: var(--text-tertiary);
      opacity: 0;
      transition: opacity var(--duration-fast) var(--ease-out);
    }
    #program-width-handle:hover .grip {
      opacity: 0.8;
    }
    
    .settings-footer-plugin {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-size: 11px;
      letter-spacing: 0.4px;
      font-weight: 700;
      font-style: normal;
      text-transform: uppercase;
      color: var(--settings-footer-color, var(--accent-light));
      margin-right: 6px;
      text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
      display: inline-flex;
      align-items: center;
      gap: 3px;
    }

    .settings-footer-pro {
      font-size: 7px;
      vertical-align: super;
      color: var(--settings-footer-color, var(--text-secondary));
      line-height: 1;
    }
    .settings-footer-link {
      color: var(--settings-footer-link-color, var(--settings-footer-color, var(--accent-light)));
      font-weight: 700;
    }

    .header-toolbar {
      padding: 5px var(--space-md);
      display: flex;
      gap: var(--space-sm);
      border-bottom: 1px solid var(--border);
      align-items: center;
      background: var(--material-thick);
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      flex-wrap: wrap;
    }
    .header-toolbar .btn,
    .header-toolbar .btn-live,
    .header-toolbar .add-btn {
      transform: scale(1);
      transform-origin: center;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .header-toolbar .btn,
    .header-toolbar .btn-live {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.1);
      color: white;
      box-shadow: none;
    }

    .toolbar-icon-btn {
      height: 30px;
      padding: 0 10px !important;
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
    }
    #btn-ai-panel .ai-toolbar-label {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.04em;
      line-height: 1;
      text-transform: uppercase;
    }
    
    .add-btn {
      width: 30px;
      height: 30px;
      border-radius: var(--radius-sm);
      border: none;
      background: var(--accent);
      color: white;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 16px;
      transition: transform var(--duration-fast) var(--ease-spring),
                  background var(--duration-instant) var(--ease-out);
      box-shadow: none;
    }
    
    .add-btn:hover {
      background: var(--accent-hover);
    }
    .add-btn:active {
      transform: scale(0.92);
    }

    .toolbar-mode-switch {
      display: flex;
      background: rgba(255, 255, 255, 0.04);
      padding: 2px;
      border-radius: var(--radius-sm);
      border: 1px solid rgba(255, 255, 255, 0.08);
      flex-wrap: wrap;
    }
    
    .t-btn {
      padding: 6px 12px;
      font-size: 11px;
      cursor: pointer;
      border: none;
      background: transparent;
      color: var(--text-secondary);
      text-transform: none;
      font-weight: 600;
      letter-spacing: -0.01em;
      transition: color var(--duration-instant) var(--ease-out),
                  background var(--duration-instant) var(--ease-out);
      border-radius: calc(var(--settings-control-radius) - 1px);
      min-width: 74px;
      text-align: center;
    }
    
    .t-btn.active {
      background: var(--accent);
      color: white;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }
    
    .t-btn:disabled {
      opacity: 0.35;
      cursor: not-allowed;
    }
    
    .t-btn:not(:disabled):hover {
      color: var(--text);
      background: rgba(255, 255, 255, 0.08);
    }

    #editor-container {
      flex-grow: 1;
      position: relative;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: var(--bg-dark);
      min-height: 0;
      min-width: 0;
      contain: layout style;
    }

    #main-workspace {
      flex-grow: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      contain: layout;
    }

    #focused-main-panel {
      flex: 1 1 auto;
      min-height: 0;
      min-width: 0;
      display: none;
      flex-direction: column;
      overflow: hidden;
      background: var(--bg-dark);
      contain: layout style;
    }

    .focused-main-shell {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
      min-width: 0;
    }

    .focused-main-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 16px;
      border-bottom: 1px solid var(--border);
      background: color-mix(in srgb, var(--bg-panel) 84%, #000 16%);
    }

    .focused-main-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: 0.01em;
    }

    .focused-main-subtitle {
      font-size: 11px;
      color: var(--text-secondary);
      white-space: nowrap;
    }

    .focused-main-list {
      flex: 1 1 auto;
      min-height: 0;
      overflow: auto;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .focused-main-item {
      border: 1px solid var(--border);
      border-radius: 12px;
      background: color-mix(in srgb, var(--bg-panel) 82%, #000 18%);
      padding: 12px 14px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      cursor: pointer;
      transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
    }

    .focused-main-item:hover {
      border-color: color-mix(in srgb, var(--accent) 45%, var(--border) 55%);
      background: color-mix(in srgb, var(--bg-panel) 72%, #000 28%);
    }

    .focused-main-item.active {
      border-color: var(--accent);
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent 65%);
      background: color-mix(in srgb, var(--bg-panel) 62%, var(--accent) 10%, #000 28%);
    }

    .focused-main-item-copy {
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 0;
      flex: 1 1 auto;
    }

    .focused-main-item-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .focused-main-item-preview {
      font-size: 11px;
      line-height: 1.45;
      color: var(--text-secondary);
      display: -webkit-box;
      line-clamp: 2;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .focused-main-item-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .focused-main-mini-btn {
      min-height: 30px;
      padding: 0 10px;
      font-size: 11px;
      white-space: nowrap;
    }

    .focused-main-empty {
      margin: auto;
      max-width: 340px;
      text-align: center;
      color: var(--text-secondary);
      font-size: 12px;
      line-height: 1.6;
      padding: 24px;
    }

    #focused-editor-banner {
      display: none;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 5px 16px;
      min-height: 40px;
      border-bottom: 1px solid var(--border);
      background: color-mix(in srgb, var(--bg-panel) 84%, #000 16%);
      flex-shrink: 0;
    }

    #focused-editor-banner-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: 0.01em;
    }

    #focused-editor-banner-subtitle {
      font-size: 11px;
      color: var(--text-secondary);
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: right;
    }

    #focused-editor-banner-main {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
      flex: 1;
    }

    #focused-editor-section-nav {
      display: none;
      align-items: center;
      gap: 6px;
      min-width: 0;
      flex-wrap: wrap;
      flex: 1;
    }

    #focused-editor-section-nav.has-items {
      display: flex;
    }

    .focused-section-chip {
      appearance: none;
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(255, 255, 255, 0.04);
      color: var(--text-secondary);
      border-radius: 999px;
      padding: 4px 10px;
      font-size: 10px;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
    }

    .focused-section-chip:hover {
      background: rgba(10, 132, 255, 0.14);
      border-color: rgba(10, 132, 255, 0.35);
      color: var(--text);
    }

    body.workspace-layout-focused[data-sidebar-tab="songs"] #focused-editor-banner,
    body.workspace-layout-focused[data-sidebar-tab="bible"] #focused-editor-banner {
      display: flex;
    }

    body.workspace-layout-focused[data-sidebar-tab="schedule"] #editor-container {
      display: none;
    }

    body.workspace-layout-focused[data-sidebar-tab="schedule"] #focused-main-panel {
      display: flex;
    }

    #program-display-panel {
      flex: 1 1 auto;
      min-width: 450px;
      background: var(--bg-dark);
      border-left: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      gap: 0;
      padding: 0;
      min-height: 0;
      position: relative;
      overflow: hidden;
      contain: layout style;
    }

    #studio-dock {
      height: 220px;
      min-height: 100px;
      border-top: 1px solid var(--border);
      background: var(--material-thick);
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      display: grid;
      grid-template-columns: 0.44fr 0.29fr 0.29fr 0.42fr 0.4fr;
      grid-template-rows: auto 1fr;
      gap: 0;
      overflow: hidden;
      flex-shrink: 0;
      contain: layout style;
    }

    /* Audio Mixer panel (multitrack mixer) */
    .ctrl-meter-row {
      --track-color: #5f85ff;
      width: auto;
      min-height: auto;
      display: flex;
      flex-direction: row;
      align-items: stretch;
      gap: 0;
      padding: 6px 8px 5px 0;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: var(--radius-sm);
      box-shadow: none;
      position: relative;
      overflow: hidden;
    }
    .ctrl-meter-row::before {
      content: none;
    }
    .ctrl-meter-left {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 4px;
      padding: 4px 6px 4px 8px;
      flex-shrink: 0;
    }
    .ctrl-meter-btns {
      display: flex;
      flex-direction: column;
      gap: 3px;
      align-items: center;
      justify-content: flex-start;
    }
    .ctrl-meter-btn {
      width: 20px;
      height: 14px;
      border-radius: 3px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(255, 255, 255, 0.04);
      color: var(--text-secondary, #8899aa);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.35px;
      padding: 0;
      line-height: 1;
      cursor: pointer;
      transition: background var(--duration-instant) var(--ease-out),
                  color var(--duration-instant) var(--ease-out),
                  border-color var(--duration-instant) var(--ease-out);
    }
    .ctrl-meter-btn:hover {
      background: rgba(255, 255, 255, 0.08);
      color: var(--text);
      border-color: rgba(255, 255, 255, 0.15);
    }
    .ctrl-meter-btn.muted {
      color: #ff7b86;
      border-color: rgba(239, 68, 68, 0.3);
      background: rgba(239, 68, 68, 0.15);
    }
    .ctrl-meter-btn.solo-active {
      color: #fbbf24;
      border-color: rgba(251, 191, 36, 0.3);
      background: rgba(251, 191, 36, 0.12);
    }
    .ctrl-meter-head {
      display: flex;
      flex-direction: row;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      min-width: 0;
    }
    .ctrl-meter-name {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 11px;
      font-weight: 400;
      color: #ebf2fe;
      letter-spacing: 0.15px;
    }
    .ctrl-meter-db {
      text-align: right;
      font-size: 9px;
      font-weight: 700;
      color: #d3def2;
      font-family: 'SF Mono', 'Menlo', monospace;
      white-space: nowrap;
      flex-shrink: 0;
      width: 56px;
      min-width: 56px;
      line-height: 1;
      font-variant-numeric: tabular-nums;
      font-feature-settings: "tnum" 1;
    }
    .ctrl-meter-main {
      min-width: 0;
      min-height: 0;
      display: flex;
      flex-direction: column;
      flex: 1;
      gap: 1px;
    }
    .ctrl-strip-topline {
      display: flex;
      align-items: center;
      gap: 4px;
      min-width: 0;
      flex-wrap: nowrap;
      white-space: nowrap;
      padding: 0 0 1px;
    }
    .ctrl-strip-topline .ctrl-meter-name {
      flex: 1 1 auto;
      min-width: 0;
    }
    .ctrl-meter-spatial {
      display: grid;
      grid-template-columns: auto repeat(2, minmax(0, 1fr));
      gap: 6px;
      align-items: center;
      min-height: 40px;
      padding: 1px 0 2px;
    }
    .ctrl-input-mode-toggle {
      display: inline-flex;
      align-items: center;
      gap: 2px;
    }
    .ctrl-input-mode-btn {
      width: 26px;
      min-width: 26px;
      height: 14px;
      min-height: 14px;
      border-radius: 4px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      background: rgba(255, 255, 255, 0.03);
      color: rgba(222, 232, 245, 0.8);
      font-size: 7px;
      font-weight: 700;
      letter-spacing: 0.3px;
      text-transform: uppercase;
      padding: 0;
      line-height: 1;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .ctrl-input-mode-btn.active {
      background: color-mix(in srgb, var(--accent, #0a84ff) 24%, transparent);
      border-color: color-mix(in srgb, var(--accent, #0a84ff) 50%, transparent);
      color: #fff;
    }
    .ctrl-input-mode-btn:focus,
    .ctrl-input-mode-btn:focus-visible {
      outline: none;
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #0a84ff) 58%, transparent);
    }
    .ctrl-spatial-group {
      min-width: 0;
      display: flex;
      justify-content: center;
    }
    .ctrl-spatial-group-inline {
      min-width: auto;
      flex: 0 0 auto;
      justify-content: flex-start;
    }
    .ctrl-spatial-control {
      width: 100%;
      border: none;
      background: transparent;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      color: inherit;
      cursor: ns-resize;
      border-radius: 4px;
    }
    .ctrl-spatial-group-inline .ctrl-spatial-control {
      width: auto;
      padding: 0 2px;
      gap: 2px;
    }
    .ctrl-spatial-control:focus,
    .ctrl-spatial-control:focus-visible {
      outline: none;
      box-shadow: 0 0 0 1px rgba(10, 132, 255, 0.58);
    }
    .ctrl-spatial-stack {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 2px;
      align-items: center;
    }
    .ctrl-spatial-label {
      font-size: 8px;
      font-weight: 700;
      letter-spacing: 0.35px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.52);
      white-space: nowrap;
      margin-right: 1px;
    }
    .ctrl-spatial-val {
      min-width: 22px;
      text-align: right;
      font-family: 'SF Mono', 'Menlo', monospace;
      font-size: 8px;
      color: rgba(255, 255, 255, 0.74);
      white-space: nowrap;
    }
    .ctrl-spatial-knob {
      flex-shrink: 0;
      user-select: none;
      -webkit-user-select: none;
      touch-action: none;
    }
    .ctrl-meter-stereo {
      display: flex;
      flex-direction: column;
      gap: 2px;
      align-items: stretch;
      flex: 1;
      min-width: 0;
    }
    .ctrl-meter-lane {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 0;
    }
    .ctrl-meter-row.mono .ctrl-meter-lane-r {
      display: none;
    }
    .ctrl-meter-lr {
      font-family: 'SF Mono', 'Menlo', monospace;
      font-size: 7px;
      font-weight: 700;
      color: #96a8c5;
      text-align: center;
      line-height: 1;
      flex-shrink: 0;
    }
    .ctrl-meter-bar {
      height: 14px;
      width: auto;
      flex: 1;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 2px;
      overflow: hidden;
      position: relative;
      border: 1px solid rgba(255, 255, 255, 0.06);
    }
    .ctrl-meter-bar-fill {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, #159f3c 0%, #45c85b 60%, #d0b325 84%, #d43d59 100%);
      transform-origin: left center;
      transform: scaleX(0);
      will-change: transform;
    }
    .ctrl-meter-bar::after { content: none; }
    .ctrl-meter-peak {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 2px;
      left: 0%;
      background: rgba(255, 242, 170, 0.95);
      box-shadow: 0 0 4px rgba(255, 235, 130, 0.9);
    }
    .ctrl-meter-scale {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-top: 0;
      font-family: 'SF Mono', 'Menlo', monospace;
      font-size: 6px;
      color: #9fb1ce;
      letter-spacing: 0.1px;
      user-select: none;
      padding: 0 2px;
      line-height: 1;
    }
    .ctrl-meter-vol {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 16px;
      margin: 0;
      background: transparent;
      outline: none;
      cursor: pointer;
      flex-shrink: 0;
    }
    .ctrl-meter-vol::-webkit-slider-runnable-track {
      height: 4px;
      border-radius: 2px;
      background:
        linear-gradient(to right,
          color-mix(in srgb, var(--track-color) 50%, #141c2e) 0%,
          color-mix(in srgb, var(--track-color) 85%, #9fb6df) 100%);
      border: 1px solid rgba(120, 140, 180, 0.3);
    }
    .ctrl-meter-vol::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 8px;
      height: 18px;
      border-radius: 2px;
      background: linear-gradient(90deg, #e0e5ef 0%, #c0c8d8 35%, #98a0b0 50%, #b8c0d0 65%, #d0d6e2 100%);
      border: 1px solid #808898;
      cursor: pointer;
      margin-top: -7px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.5);
    }
    .ctrl-meter-vol::-moz-range-track {
      height: 4px;
      border-radius: 2px;
      background: linear-gradient(to right, color-mix(in srgb, var(--track-color) 50%, #141c2e), color-mix(in srgb, var(--track-color) 85%, #9fb6df));
    }
    .ctrl-meter-vol::-moz-range-thumb {
      width: 8px;
      height: 18px;
      border-radius: 2px;
      background: linear-gradient(90deg, #e0e5ef 0%, #c0c8d8 35%, #98a0b0 50%, #b8c0d0 65%, #d0d6e2 100%);
      border: 1px solid #808898;
      cursor: pointer;
    }
    .ctrl-meter-vol-label {
      display: none;
    }
    .ctrl-no-layers {
      padding: 16px 8px;
      text-align: center;
      color: #556;
      font-size: 11px;
    }
    #controls-panel-body {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 6px;
      overflow-x: hidden;
      overflow-y: auto;
      min-height: 0;
      max-height: 100%;
      padding: 4px 3px;
      scrollbar-width: thin;
      scrollbar-color: rgba(122, 140, 174, 0.52) rgba(9, 12, 20, 0.52);
    }
    #controls-panel-body > .ctrl-meter-row,
    #controls-panel-body > .ctrl-no-layers {
      flex: 0 0 auto;
    }


    /* ═══════ Pro Mixer (DAW-style Channel Strip Mixer) ═══════ */
    .promix-overlay {
      position: fixed;
      inset: 0;
      z-index: 9100;
      display: none;
      align-items: flex-end;
      justify-content: center;
      background: transparent;
      opacity: 1;
      pointer-events: none;
      transition: none;
    }
    .promix-overlay.open {
      display: flex;
    }
    .promix-window {
      width: min(95vw, 920px);
      height: min(90vh, 580px);
      min-height: 160px;
      max-height: 90vh;
      background: var(--promix-window-bg);
      border: 1px solid var(--promix-window-border);
      border-radius: var(--radius-lg, 12px);
      box-shadow: var(--promix-window-shadow);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      backdrop-filter: saturate(180%) blur(40px);
      -webkit-backdrop-filter: saturate(180%) blur(40px);
      pointer-events: auto;
      position: absolute;
      cursor: default;
      margin-bottom: 12px;
      transition: background var(--duration-fast) var(--ease-out),
                  border-color var(--duration-fast) var(--ease-out),
                  box-shadow var(--duration-fast) var(--ease-out);
    }
    .promix-window::before {
      content: none;
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      border: 1px solid var(--promix-window-border-inner);
      pointer-events: none;
      opacity: 0.72;
      z-index: 1;
    }
    .promix-resize-handle {
      height: 6px;
      min-height: 6px;
      cursor: ns-resize;
      flex-shrink: 0;
      background: transparent;
      position: relative;
      user-select: none;
      -webkit-user-select: none;
    }
    .promix-resize-handle::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 2px;
      transform: translateX(-50%);
      width: 32px;
      height: 3px;
      border-radius: 1.5px;
      background: rgba(255,255,255,0.0);
      transition: background 0.15s;
    }
    .promix-resize-handle:hover::after {
      background: rgba(255,255,255,0.15);
    }
    .promix-resize-handle-right {
      position: absolute;
      top: 0;
      right: 0;
      width: 8px;
      height: 100%;
      cursor: ew-resize;
      background: transparent;
      user-select: none;
      -webkit-user-select: none;
      z-index: 6;
    }
    .promix-resize-handle-right::after {
      content: '';
      position: absolute;
      top: 50%;
      right: 2px;
      transform: translateY(-50%);
      width: 3px;
      height: 36px;
      border-radius: 2px;
      background: rgba(255,255,255,0.0);
      transition: background 0.15s;
    }
    .promix-resize-handle-right:hover::after {
      background: rgba(255,255,255,0.15);
    }
    .promix-resize-handle-bottom {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 8px;
      cursor: ns-resize;
      background: transparent;
      user-select: none;
      -webkit-user-select: none;
      z-index: 6;
    }
    .promix-resize-handle-bottom::after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: 2px;
      transform: translateX(-50%);
      width: 40px;
      height: 3px;
      border-radius: 2px;
      background: rgba(255,255,255,0.0);
      transition: background 0.15s;
    }
    .promix-resize-handle-bottom:hover::after {
      background: rgba(255,255,255,0.15);
    }
    .promix-titlebar {
      height: 46px;
      min-height: 46px;
      display: flex;
      align-items: center;
      padding: 0 10px;
      background: var(--promix-titlebar-bg);
      border-bottom: 1px solid var(--promix-titlebar-border);
      gap: 8px;
      flex-shrink: 0;
      cursor: default;
      user-select: none;
      -webkit-user-select: none;
      position: relative;
      z-index: 2;
      transition: background var(--duration-fast) var(--ease-out),
                  border-color var(--duration-fast) var(--ease-out);
    }
    .promix-titlebar-text {
      font-size: 11px;
      font-weight: 700;
      color: #e4ebf7;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      flex: 0 0 auto;
    }
    .promix-menu-row {
      display: flex;
      align-items: center;
      gap: 6px;
      flex: 1 1 auto;
      min-width: 0;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: thin;
      scrollbar-color: rgba(122, 140, 174, 0.32) transparent;
    }
    .promix-menu-group {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px;
      border-radius: 7px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(8, 10, 14, 0.35);
      flex-shrink: 0;
    }
    .promix-menu-btn {
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(255, 255, 255, 0.04);
      color: var(--text-secondary, #b6c2d6);
      border-radius: 5px;
      height: 24px;
      padding: 0 8px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.35px;
      text-transform: uppercase;
      cursor: pointer;
      transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
      flex-shrink: 0;
    }
    .promix-menu-btn:hover {
      background: rgba(13, 133, 255, 0.2);
      border-color: rgba(13, 133, 255, 0.45);
      color: #eaf4ff;
    }
    .promix-menu-btn.warn:hover {
      background: rgba(244, 63, 94, 0.18);
      border-color: rgba(244, 63, 94, 0.4);
      color: #ffd7df;
    }
    .promix-menu-btn.is-active-mute {
      background: rgba(244, 63, 94, 0.24);
      border-color: rgba(244, 63, 94, 0.52);
      color: #ffd7df;
      box-shadow: inset 0 0 0 1px rgba(244, 63, 94, 0.22);
    }
    .promix-menu-btn.is-active-unmute {
      background: rgba(34, 197, 94, 0.24);
      border-color: rgba(34, 197, 94, 0.5);
      color: #d9ffe8;
      box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.2);
    }
    .promix-menu-meta {
      font-size: 10px;
      font-weight: 600;
      color: #9aa8bf;
      letter-spacing: 0.25px;
      white-space: nowrap;
      letter-spacing: -0.01em;
      flex-shrink: 0;
      padding: 0 6px;
    }
    .promix-scene-select {
      height: 24px;
      border-radius: 6px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      background: rgba(255, 255, 255, 0.04);
      color: #dbe6f6;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.25px;
      padding: 0 22px 0 8px;
      min-width: 136px;
      max-width: 220px;
      text-overflow: ellipsis;
      outline: none;
      appearance: none;
      -webkit-appearance: none;
      background-image: linear-gradient(45deg, transparent 50%, rgba(202, 214, 232, 0.9) 50%), linear-gradient(135deg, rgba(202, 214, 232, 0.9) 50%, transparent 50%);
      background-position: calc(100% - 12px) 9px, calc(100% - 7px) 9px;
      background-size: 5px 5px, 5px 5px;
      background-repeat: no-repeat;
      flex-shrink: 1;
    }
    .promix-scene-select:hover {
      border-color: rgba(13, 133, 255, 0.45);
      background-color: rgba(13, 133, 255, 0.14);
    }
    .promix-scene-select:focus {
      border-color: rgba(13, 133, 255, 0.58);
      box-shadow: 0 0 0 1px rgba(13, 133, 255, 0.35);
    }
    .promix-close-btn {
      width: 13px; height: 13px;
      border-radius: 50%;
      background: #ff5f57;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      flex-shrink: 0;
      -webkit-app-region: no-drag;
      position: relative;
    }
    .promix-close-btn:hover { background: #e0443d; }
    .promix-close-btn svg { width: 7px; height: 7px; opacity: 0; }
    .promix-close-btn:hover svg { opacity: 1; }
    .promix-body {
      flex: 1;
      display: flex;
      flex-direction: row;
      align-items: stretch;
      overflow-x: auto;
      overflow-y: hidden;
      gap: 0;
      padding: 0;
      scrollbar-width: thin;
      scrollbar-color: rgba(122, 140, 174, 0.35) transparent;
      /* Bottom mixer rail under channel section */
      background-image: linear-gradient(
        to bottom,
        transparent calc(100% - var(--promix-row-bottom, 86px)),
        var(--promix-body-rail-top) calc(100% - var(--promix-row-bottom, 86px)),
        var(--promix-body-rail-bottom) 100%
      );
      position: relative;
      z-index: 2;
      transition: background-image var(--duration-fast) var(--ease-out);
    }
    /* ── Channel Strip ── */
    :root {
      --promix-row-input: 28px;
      --promix-row-sends: 64px;
      --promix-row-spatial: 52px;
      /* height of level/meter section – bump up if you want more vertical room */
      --promix-row-level: 170px;
      /* bottom row contains the channel name; make it taller so names don’t get clipped */
      --promix-row-bottom: 84px;
      /* footer height can be larger than bottom row */
      --promix-footer-height: calc(var(--promix-row-bottom) * 1.3);
      --promix-strip-width: 110px;
      --promix-master-strip-width: 118px;
    }
    .promix-strip {
      position: relative;
      z-index: 2; /* ensure strip content floats above footer */
      min-width: var(--promix-strip-width);
      max-width: var(--promix-strip-width);
      flex: 0 0 var(--promix-strip-width);
      display: flex;
      flex-direction: column;
      border-right: 1px solid rgba(255, 255, 255, 0.08);
      border-right: 1px solid var(--promix-strip-border);
      background: var(--promix-strip-bg);
      overflow: hidden;
      min-height: 100%;
      height: 100%;
    }
    .promix-strip:last-child { border-right: none; }
    .promix-strip.master {
      min-width: var(--promix-master-strip-width);
      max-width: var(--promix-master-strip-width);
      flex: 0 0 var(--promix-master-strip-width);
      background: var(--promix-strip-bg);
      border-left: 1px solid var(--promix-strip-border);
    }
    .promix-strip-scroll {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      display: grid;
      grid-template-rows: var(--promix-row-input) var(--promix-row-sends) var(--promix-row-spatial) minmax(52px, 1fr);
      align-content: start;
      scrollbar-width: thin;
      scrollbar-color: rgba(122, 140, 174, 0.35) transparent;
    }
    .promix-input-row {
      min-height: var(--promix-row-input);
      height: var(--promix-row-input);
      padding: 4px 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      background: var(--promix-section-soft);
      flex-shrink: 0;
      /* keep controls visible when scrolling inside mixer */
      position: sticky;
      top: 0;
      z-index: 4;
    }
    .promix-input-toggle {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      width: 100%;
      max-width: 100px;
    }
    .promix-input-opt {
      flex: 0 0 26px;
      min-height: 18px;
      border-radius: 4px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      background: rgba(255, 255, 255, 0.03);
      color: rgba(222, 232, 245, 0.75);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: 0.3px;
      text-transform: uppercase;
      cursor: pointer;
      padding: 0;
      line-height: 1;
      transition: background 0.12s, color 0.12s, border-color 0.12s;
    }
    .promix-input-opt:hover {
      background: color-mix(in srgb, var(--accent, #0a84ff) 16%, transparent);
      color: #fff;
      border-color: color-mix(in srgb, var(--accent, #0a84ff) 35%, transparent);
    }
    .promix-input-opt.active {
      background: color-mix(in srgb, var(--accent, #0a84ff) 24%, transparent);
      border-color: color-mix(in srgb, var(--accent, #0a84ff) 50%, transparent);
      color: #fff;
    }
    .promix-input-opt:focus,
    .promix-input-opt:focus-visible {
      outline: none;
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #0a84ff) 58%, transparent);
    }
    .promix-input-route-btn {
      flex: 1;
      min-height: 18px;
      border-radius: 4px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      background: rgba(255, 255, 255, 0.035);
      color: rgba(222, 232, 245, 0.84);
      cursor: pointer;
      padding: 0 5px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 0;
      transition: background 0.12s, color 0.12s, border-color 0.12s;
    }
    .promix-input-route-btn:hover {
      background: color-mix(in srgb, var(--accent, #0a84ff) 14%, transparent);
      border-color: color-mix(in srgb, var(--accent, #0a84ff) 30%, transparent);
      color: #fff;
    }
    .promix-input-route-btn:focus,
    .promix-input-route-btn:focus-visible {
      outline: none;
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #0a84ff) 58%, transparent);
    }
    .promix-input-route-label {
      min-width: 0;
      font-size: 9px;
      font-weight: 650;
      letter-spacing: 0.18px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .promix-input-route-pop {
      position: fixed;
      z-index: 9305;
      min-width: 196px;
      max-width: 236px;
      border-radius: 10px;
      border: 1px solid rgba(186, 206, 232, 0.24);
      background: rgba(20, 26, 36, 0.98);
      box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42);
      color: #e6eef8;
      padding: 8px;
      display: grid;
      gap: 7px;
      user-select: none;
      -webkit-user-select: none;
    }
    .promix-input-route-pop .route-title {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.36px;
      text-transform: uppercase;
      opacity: 0.8;
    }
    .promix-input-route-pop .route-row {
      display: grid;
      grid-template-columns: 14px minmax(0, 1fr);
      align-items: center;
      gap: 6px;
    }
    .promix-input-route-pop .route-row label {
      font-size: 10px;
      font-weight: 700;
      color: rgba(227, 238, 251, 0.62);
      text-align: center;
    }
    .promix-input-route-pop select {
      width: 100%;
      min-width: 0;
      border-radius: 6px;
      border: 1px solid rgba(185, 207, 236, 0.24);
      background: rgba(255, 255, 255, 0.045);
      color: #e7eef8;
      font-size: 11px;
      font-weight: 620;
      line-height: 1.2;
      padding: 4px 8px;
      outline: none;
    }
    .promix-input-route-pop select:focus {
      border-color: color-mix(in srgb, var(--accent, #0a84ff) 50%, transparent);
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #0a84ff) 45%, transparent);
    }
    .promix-input-route-pop .route-presets {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
    }
    .promix-input-route-pop .route-presets button {
      min-height: 22px;
      border-radius: 6px;
      border: 1px solid rgba(184, 206, 235, 0.2);
      background: rgba(255, 255, 255, 0.04);
      color: rgba(231, 240, 252, 0.9);
      font-size: 10px;
      font-weight: 660;
      letter-spacing: 0.15px;
      cursor: pointer;
      transition: background 0.12s, border-color 0.12s, color 0.12s;
    }
    .promix-input-route-pop .route-presets button:hover {
      background: color-mix(in srgb, var(--accent, #0a84ff) 14%, transparent);
      border-color: color-mix(in srgb, var(--accent, #0a84ff) 28%, transparent);
      color: #fff;
    }
    /* FX slot area at top of strip */
    .promix-fx-slots {
      padding: 5px 5px 3px;
      display: flex;
      flex-direction: column;
      gap: 1px;
      min-height: 52px;
      overflow-y: auto;
      overflow-x: hidden;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      scrollbar-width: thin;
      scrollbar-color: rgba(122, 140, 174, 0.3) transparent;
      min-height: 0;
    }
    .promix-fx-slot {
      font-size: 12px;
      min-height: 22px;
      font-weight: 500;
      color: #ffffff;
      padding: 3px 5px;
      border-radius: 8px;
      background: linear-gradient(180deg, rgba(42, 136, 246, 0.88), rgba(20, 103, 208, 0.9));
      border: 1px solid rgba(21, 108, 219, 0.62);
      white-space: nowrap;
      overflow: hidden;
      flex-shrink: 0;
      text-overflow: ellipsis;
      cursor: default;
      touch-action: none;
      transition: background 0.12s ease, color 0.12s ease;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center; /* centre contents horizontally */
      gap: 3px;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 1px 0 rgba(0, 0, 0, 0.18);
    }
    .promix-fx-slot .promix-fx-label {
      color: #ffffff;
    }
    .promix-fx-slot:hover { background: linear-gradient(180deg, rgba(61, 154, 255, 0.96), rgba(29, 119, 225, 0.98)); color: #ffffff; }
    .promix-fx-slot.active { background: linear-gradient(180deg, rgba(18, 121, 243, 1), rgba(8, 94, 205, 1)); color: #fff; border-color: rgba(10, 132, 255, 0.76); }
    .promix-fx-slot.active:hover { background: linear-gradient(180deg, rgba(31, 132, 250, 1), rgba(12, 101, 214, 1)); }
    .promix-fx-slot.disabled { opacity: 0.45; }
    /* ── FX slot hover actions: 3-column split ── */
    .promix-fx-label { /* no flex; allow centering of slot content */
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      pointer-events: none;
    }
    .promix-fx-actions { display: none; flex: 1; flex-direction: row; align-items: stretch; gap: 0; height: 100%; }
    .promix-fx-slot:hover .promix-fx-label { display: none; }
    .promix-fx-slot:hover .promix-fx-actions { display: flex; }
    .promix-fx-act {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: none;
      color: inherit;
      font-size: 11px;
      cursor: pointer;
      padding: 0;
      margin: 0;
      border-radius: 6px;
      transition: background 0.1s ease;
      line-height: 1;
    }
    .promix-fx-act:hover { background: none; }
    .promix-fx-act:active { background: none; }
    .promix-fx-act + .promix-fx-act { border-left: 1px solid rgba(255, 255, 255, 0.08); }
    .promix-fx-slot.active .promix-fx-act + .promix-fx-act { border-left-color: rgba(255, 255, 255, 0.18); }
    .promix-fx-act-power { font-size: 12px; }
    .promix-fx-act-power.off { color: rgba(255,255,255,0.35); }
    .promix-fx-slot.active .promix-fx-act-power.off { color: rgba(255,255,255,0.45); }
    .promix-fx-act svg { width: 13px; height: 13px; fill: currentColor; }
    .promix-fx-act-swap svg { width: 11px; height: 11px; }
    .promix-fx-slot.promix-drag-ghost {
      opacity: 0.85;
      z-index: 999;
      box-shadow: 0 4px 18px rgba(0,0,0,0.55);
      background: rgba(10, 132, 255, 0.2);
      border-color: rgba(10, 132, 255, 0.4);
    }
    .promix-fx-slot.promix-drag-shift-down {
      transform: translateY(var(--promix-fx-shift, 28px));
      transition: transform 0.18s cubic-bezier(.4,0,.2,1);
    }
    .promix-fx-slot.promix-drag-shift-up {
      transform: translateY(calc(-1 * var(--promix-fx-shift, 28px)));
      transition: transform 0.18s cubic-bezier(.4,0,.2,1);
    }
    .promix-fx-slots.promix-drop-target {
      outline: 1.5px dashed rgba(10, 132, 255, 0.5);
      outline-offset: -1px;
      background: rgba(10, 132, 255, 0.04);
    }
    .promix-fx-drop-placeholder {
      height: 24px;
      border: 1.5px dashed rgba(10, 132, 255, 0.45);
      border-radius: 3px;
      background: rgba(10, 132, 255, 0.06);
      margin: 1px 0;
      transition: height 0.15s ease;
    }
    .promix-fx-slot-empty {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.18);
      padding: 3px 5px;
      text-align: center;
      cursor: pointer;
      border-radius: 3px;
      border: 1px dashed rgba(255, 255, 255, 0.08);
    }
    .promix-fx-slot-empty:hover { background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.35); }
    .promix-spatial-row {
      min-height: var(--promix-row-spatial);
      height: var(--promix-row-spatial);
      padding: 4px 5px 3px;
      display: flex;
      align-items: stretch;
      justify-content: space-between;
      gap: 4px;
      flex-shrink: 0;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      background: var(--promix-section-soft);
    }
    .promix-spatial-cell {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
    }
    .promix-spatial-control {
      width: 100%;
      border: none;
      background: transparent;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      cursor: ns-resize;
      border-radius: 5px;
      color: inherit;
    }
    .promix-spatial-control:focus,
    .promix-spatial-control:focus-visible {
      outline: none;
      box-shadow: 0 0 0 1px rgba(10, 132, 255, 0.58);
    }
    .promix-spatial-label {
      font-size: 7px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.45);
      line-height: 1;
    }
    .promix-spatial-value {
      font-family: 'SF Mono', 'Menlo', monospace;
      font-size: 8px;
      color: rgba(255, 255, 255, 0.72);
      line-height: 1;
      min-height: 10px;
    }
    .promix-spatial-knob {
      flex-shrink: 0;
      user-select: none;
      -webkit-user-select: none;
      touch-action: none;
    }
    .promix-spatial-knob:hover circle:last-of-type { fill: #333a44; }
    /* Fader + meter area */
    .promix-fader-area {
      height: var(--promix-row-level);
      min-height: var(--promix-row-level);
      display: flex;
      flex-direction: row;
      align-items: stretch;
      justify-content: center;
      gap: 4px;
      padding: 10px 6px 5px;
    }
    .promix-meter-col {
      width: 14px;
      display: flex;
      flex-direction: column;
      gap: 1px;
    }
    .promix-strip-input-mono .promix-meter-col-r { display: none; }
    .promix-meter-scale-v {
      width: 22px;
      height: 100%;
      position: relative;
      margin-right: 1px;
      flex-shrink: 0;
    }
    .promix-meter-scale-v span {
      position: absolute;
      right: 0;
      transform: translateY(50%);
      font-family: 'SF Mono', 'Menlo', monospace;
      font-size: 7px;
      line-height: 1;
      color: rgba(168, 186, 209, 0.72);
      letter-spacing: 0.1px;
      pointer-events: none;
    }
    .promix-meter-bar-v {
      flex: 1;
      width: 14px;
      background: linear-gradient(180deg, rgba(11, 14, 19, 0.96), rgba(16, 20, 27, 0.98));
      border-radius: 3px;
      overflow: hidden;
      position: relative;
      border: 1px solid rgba(255, 255, 255, 0.06);
    }
    .promix-meter-fill-v {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 0%;
      background: linear-gradient(0deg, #159f3c 0%, #45c85b 55%, #d0b325 80%, #d43d59 100%);
      transition: height 0.06s linear;
    }
    .promix-meter-peak-v {
      position: absolute;
      left: 0;
      right: 0;
      height: 2px;
      bottom: 0%;
      background: rgba(255, 242, 170, 0.9);
      box-shadow: 0 0 4px rgba(255, 235, 130, 0.8);
    }
    .promix-fader-wrap {
      width: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .promix-fader {
      writing-mode: vertical-lr;
      direction: rtl;
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 100%;
      margin: 0;
      background: transparent;
      outline: none;
      cursor: pointer;
    }
    .promix-fader::-webkit-slider-runnable-track {
      width: 4px;
      border-radius: 2px;
      background: linear-gradient(180deg, rgba(78, 90, 109, 0.55), rgba(36, 43, 54, 0.78));
      border: 1px solid rgba(255, 255, 255, 0.08);
    }
    .promix-fader::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 22px;
      height: 10px;
      border-radius: 2px;
      background: linear-gradient(180deg, #e0e5ef 0%, #c0c8d8 35%, #98a0b0 50%, #b8c0d0 65%, #d0d6e2 100%);
      border: 1px solid #808898;
      cursor: pointer;
      margin-left: -9px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.5);
    }
    .promix-fader::-moz-range-track {
      width: 4px;
      border-radius: 2px;
      background: linear-gradient(180deg, rgba(78, 90, 109, 0.55), rgba(36, 43, 54, 0.78));
    }
    .promix-fader::-moz-range-thumb {
      width: 22px;
      height: 10px;
      border-radius: 2px;
      background: linear-gradient(180deg, #e0e5ef 0%, #c0c8d8 35%, #98a0b0 50%, #b8c0d0 65%, #d0d6e2 100%);
      border: 1px solid #808898;
    }
    /* Bottom controls */
    .promix-strip-bottom {
      padding: 2px 6px 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      gap: 3px; /* add vertical spacing between dB, M/S, and label */
      flex-shrink: 0;
      min-height: var(--promix-row-bottom);
      height: var(--promix-row-bottom);
      border-top: 1px solid rgba(255, 255, 255, 0.14);
      background: transparent;
      box-shadow: none;
      min-width: 0;
      position: relative;
      z-index: 3;
    }
    .promix-strip-btns {
      display: flex;
      align-items: center;
      gap: 3px;
      width: 100%;
      justify-content: center;
      margin-bottom: 0;
    }
    .promix-btn {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.4px;
      padding: 3px 8px;
      min-width: 28px;
      min-height: 22px;
      border-radius: 5px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(255, 255, 255, 0.04);
      color: var(--text-secondary, #8899aa);
      cursor: pointer;
      transition: background 0.12s, color 0.12s;
    }
    .promix-btn:hover { background: rgba(255, 255, 255, 0.08); }
    .promix-btn.muted { color: #ff7b86; border-color: rgba(239, 68, 68, 0.3); background: rgba(239, 68, 68, 0.15); }
    .promix-btn.solo-active { color: #fbbf24; border-color: rgba(251, 191, 36, 0.3); background: rgba(251, 191, 36, 0.12); }
    .promix-db-label {
      font-family: 'SF Mono', 'Menlo', monospace;
      font-size: 10px;
      font-weight: 600;
      color: #d5deed;
      text-align: center;
      min-height: 14px;
      line-height: 1;
      margin-bottom: 0; /* remove flex auto spacing */
    }
    .promix-strip-name {
      display: block;
      font-size: 10px;
      font-weight: 700;
      color: #ecf2ff;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: calc(100% + 12px);
      max-width: none;
      min-width: 0;
      /* bigger vertical padding for taller blue name bar */
      padding: 8px 6px 8px;
      margin: 0 -6px 0;
      text-transform: uppercase;
      letter-spacing: 0.35px;
      direction: ltr;
      unicode-bidi: plaintext;
      background:
        linear-gradient(180deg, var(--promix-name-bg-top, rgba(92, 154, 224, 0.72)), var(--promix-name-bg-bottom, rgba(63, 123, 198, 0.78)));
      border-top: 1px solid var(--promix-name-border, rgba(172, 211, 255, 0.36));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
      min-height: 24px;
    }
    #promix-footer {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: var(--promix-footer-height);
      overflow-x: auto;
      display: flex;
      align-items: center;
      background: var(--material-chrome, rgba(30,30,30,0.82));
      z-index: 1; /* beneath strips so they overlap */
    }
    #promix-footer .promix-strip-name {
      /* footer names behave like strips but with fixed width */
      width: var(--promix-strip-width);
      margin: 0;
      padding: 8px 6px;
      text-align: center;
    }
    .promix-strip-name.has-delete { padding-right: 14px; }
    @media (max-width: 980px) {
      .promix-titlebar {
        height: 52px;
        min-height: 52px;
        align-items: stretch;
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        padding-top: 4px;
        padding-bottom: 4px;
      }
      .promix-menu-row {
        width: 100%;
      }
    }
    .promix-strip.master .promix-strip-name { color: #ecf2ff; }
    /* ── Send knobs section ── */
    .promix-sends-section {
      padding: 4px 5px 3px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      min-height: var(--promix-row-sends);
      height: var(--promix-row-sends);
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: rgba(122, 140, 174, 0.3) transparent;
    }
    .promix-send-row {
      display: flex;
      align-items: center;
      gap: 3px;
      min-height: 22px;
    }
    .promix-send-label {
      font-size: 8px;
      font-weight: 600;
      letter-spacing: 0.2px;
      color: rgba(255, 255, 255, 0.4);
      min-width: 0;
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-transform: uppercase;
    }
    .promix-send-val {
      font-family: 'SF Mono', 'Menlo', monospace;
      font-size: 7.5px;
      color: rgba(255, 255, 255, 0.3);
      min-width: 20px;
      text-align: right;
      flex-shrink: 0;
    }
    .promix-knob {
      flex-shrink: 0;
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
      touch-action: none;
    }
    .promix-knob:hover circle:last-of-type { fill: #333a44; }
    .promix-sends-placeholder {
      padding: 4px 5px 3px;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      min-height: var(--promix-row-sends);
      height: var(--promix-row-sends);
      overflow: hidden;
    }
    .promix-row-ghost {
      pointer-events: none;
    }
    .promix-row-ghost > * {
      visibility: hidden;
    }
    /* ── Category label strip (Logic Pro style) ── */
    .promix-label-strip {
      min-width: 74px !important;
      max-width: 74px !important;
      flex: 0 0 74px !important;
      position: sticky;
      left: 0;
      z-index: 10;
      background: var(--material-thick, #1a1d24) !important;
      border-right: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    }
    .promix-label-strip .promix-fx-slots,
    .promix-label-strip .promix-input-row,
    .promix-label-strip .promix-spatial-row,
    .promix-label-strip .promix-sends-section,
    .promix-label-strip .promix-sends-placeholder,
    .promix-label-strip .promix-fader-area,
    .promix-label-strip .promix-strip-bottom {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 !important;
      gap: 0 !important;
      overflow: hidden;
    }
    .promix-label-strip .promix-fader-area { padding: 0 2px !important; }
    .promix-label-strip .promix-input-row { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
    .promix-label-strip .promix-spatial-row { border-top: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
    .promix-label-strip .promix-fader-area,
    .promix-label-strip .promix-sends-section {
      border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
    .promix-label-strip .promix-sends-section {
      justify-content: center;
    }
    .promix-label-strip .promix-strip-bottom {
      min-height: var(--promix-row-bottom) !important;
      height: var(--promix-row-bottom) !important;
      box-sizing: border-box;
      border-top: 1px solid rgba(255, 255, 255, 0.14);
    }
    .promix-cat-label {
      font-size: 8px;
      font-weight: 700;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.22);
      white-space: nowrap;
      text-align: center;
      width: 100%;
      /* horizontal labels instead of vertical column on left */
      writing-mode: horizontal-tb;
      transform: none;
    }
    /* ── Bus strip variant ── */
    .promix-strip.bus {
      background:
        linear-gradient(180deg, rgba(52, 211, 153, 0.06), rgba(52, 211, 153, 0.0) 24%),
        var(--promix-strip-bg);
      border-left: 1px solid var(--promix-strip-border);
    }
    .promix-strip.bus .promix-strip-name { color: #ecf2ff; }
    /* Add-bus strip */
    .promix-add-bus-strip {
      min-width: 36px !important;
      max-width: 36px !important;
      display: flex;
      flex-direction: column;
      justify-content: stretch;
      grid-template-rows: none;
      background: rgba(52, 211, 153, 0.02);
      border-left: 1px dashed rgba(52, 211, 153, 0.15);
      color: #34d399;
      cursor: pointer;
    }
    .promix-add-bus-strip:hover { background: rgba(52, 211, 153, 0.08); }
    /* Bus delete button */
    .promix-bus-delete {
      position: absolute; right: 4px; top: 50%;
      transform: translateY(-50%);
      width: 14px; height: 14px; border-radius: 50%;
      background: rgba(239,68,68,0.25); color: #ef4444;
      border: none; font-size: 12px; line-height: 12px;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      padding: 0; opacity: 0.85; transition: opacity 0.12s;
    }
    .promix-bus-delete:hover { background: rgba(239,68,68,0.5); opacity: 1; }
    /* FX Param popover inside Pro Mixer */
    .promix-fx-param-pop {
      position: fixed;
      z-index: 9200;
      min-width: 230px;
      max-width: 300px;
      max-height: 340px;
      overflow-y: auto;
      background: var(--material-thick, #1e2128);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: var(--radius-md, 8px);
      box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
      padding: 8px 10px;
      display: none;
      scrollbar-width: thin;
      scrollbar-color: rgba(122, 140, 174, 0.35) transparent;
    }
    .promix-fx-param-pop.open { display: block; }
    .promix-fx-param-pop .rec-fx-editor-title {
      font-size: 11px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 6px;
    }
    .promix-fx-param-pop .rec-fx-param {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 4px;
    }
    .promix-fx-param-pop .rec-fx-param label {
      font-size: 10px;
      color: var(--text-secondary);
      min-width: 56px;
      flex-shrink: 0;
    }
    .promix-fx-param-pop .rec-fx-param input[type="range"] {
      flex: 1;
      height: 14px;
      -webkit-appearance: none;
      appearance: none;
      background: transparent;
      outline: none;
    }
    .promix-fx-param-pop .rec-fx-param input[type="range"]::-webkit-slider-runnable-track {
      height: 3px;
      border-radius: 1.5px;
      background: rgba(255, 255, 255, 0.15);
    }
    .promix-fx-param-pop .rec-fx-param input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--accent, #0a84ff);
      border: 1.5px solid rgba(255,255,255,0.2);
      margin-top: -3.5px;
      cursor: pointer;
    }
    .promix-fx-param-pop .rec-fx-param span {
      font-family: 'SF Mono', 'Menlo', monospace;
      font-size: 9px;
      color: var(--text-secondary);
      min-width: 40px;
      text-align: right;
    }
    /* FX add picker in strip */
    .promix-fx-add-picker {
      position: fixed;
      z-index: 9200;
      min-width: 180px;
      max-height: 320px;
      overflow-y: auto;
      background: var(--material-thick, #1e2128);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: var(--radius-md, 8px);
      box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
      padding: 4px;
      display: none;
      scrollbar-width: thin;
    }
    .promix-fx-add-picker.open { display: block; }
    .promix-fx-add-picker .sfx-add-item {
      font-size: 13px;
      padding: 6px 10px;
      border-radius: 4px;
      color: var(--text-secondary);
      cursor: pointer;
      line-height: 1.4;
    }
    .promix-fx-add-picker .sfx-add-item:hover { background: var(--accent, #0a84ff); color: #fff; }
    .promix-fx-add-picker .sfx-add-item:focus,
    .promix-fx-add-picker .sfx-add-item:focus-visible {
      outline: none;
      box-shadow: none;
    }
    /* Gear icon button in mixer title */
    .promix-gear-btn {
      width: 20px;
      height: 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: none;
      background: transparent;
      color: var(--text-secondary, #8899aa);
      cursor: pointer;
      border-radius: 4px;
      padding: 0;
      flex-shrink: 0;
      transition: color 0.12s, background 0.12s;
    }
    .promix-gear-btn:hover { background: rgba(255, 255, 255, 0.08); color: var(--text, #e5e5e5); }
    .promix-gear-btn svg { width: 13px; height: 13px; }

    /* ── Livestreaming Page ── */
    .ls-page {
      display: flex;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: var(--bg-panel);
      position: relative;
      transition: all 0.35s ease;
    }
    /* Portrait layout: center preview, panels to sides */
    .ls-page.portrait-layout {
      flex-direction: column;
    }
    .ls-page.portrait-layout .ls-topbar { flex-shrink: 0; }
    .ls-page.portrait-layout .ls-portrait-body {
      display: flex;
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }
    .ls-portrait-body { display: none; }

    /* ─ Main Column ─ */
    .ls-main {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0;
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: var(--border) transparent;
    }

    /* Top Bar */
    .ls-topbar {
      display: flex;
      align-items: center;
      padding: 10px 20px;
      gap: 12px;
      background: rgba(0,0,0,0.25);
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .ls-topbar-left { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
    .ls-topbar-center { flex: 1; min-width: 0; }
    .ls-topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
    .ls-encoder-status {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      height: 30px;
      padding: 0 10px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.04);
      color: var(--text-secondary);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.4px;
      white-space: nowrap;
      max-width: 240px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .ls-encoder-status.ready {
      border-color: rgba(34,197,94,0.45);
      color: #86efac;
      background: rgba(34,197,94,0.12);
    }
    .ls-encoder-status.warn {
      border-color: rgba(251,191,36,0.45);
      color: #fde68a;
      background: rgba(251,191,36,0.12);
    }
    .ls-encoder-status.err {
      border-color: rgba(239,68,68,0.45);
      color: #fca5a5;
      background: rgba(239,68,68,0.12);
    }

    .ls-live-indicator {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 12px;
      border-radius: 20px;
      background: rgba(255,255,255,0.06);
      border: 1px solid var(--border);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--text-secondary);
      transition: all 0.3s;
    }
    .ls-live-indicator.live {
      background: rgba(239,68,68,0.15);
      border-color: rgba(239,68,68,0.4);
      color: #f87171;
      animation: ls-pulse-border 2s ease-in-out infinite;
    }
    @keyframes ls-pulse-border {
      0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
      50% { box-shadow: 0 0 0 4px rgba(239,68,68,0.15); }
    }
    .ls-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--text-secondary);
      transition: background 0.3s;
    }
    .ls-live-indicator.live .ls-dot {
      background: #ef4444;
      animation: ls-blink 1.2s step-start infinite;
    }
    @keyframes ls-blink { 50% { opacity: 0.3; } }

    .ls-stream-timer {
      font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-secondary);
      letter-spacing: 0.5px;
    }
    .ls-live-indicator.live ~ .ls-stream-timer { color: #f87171; }

    .ls-stream-title {
      width: 100%;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 6px;
      color: var(--text);
      font-size: 13px;
      font-weight: 600;
      padding: 5px 10px;
      font-family: inherit;
      transition: all 0.2s;
    }
    .ls-stream-title:hover { border-color: var(--border); }
    .ls-stream-title:focus { outline: none; border-color: var(--accent); background: rgba(0,0,0,0.2); }

    /* Buttons */
    .ls-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.05);
      color: var(--text);
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s;
      font-family: inherit;
      white-space: nowrap;
    }
    .ls-btn:hover { background: rgba(255,255,255,0.10); }
    .ls-btn-sm { padding: 4px 10px; font-size: 10px; }
    .ls-btn-icon { padding: 6px; min-width: 30px; justify-content: center; }
    .ls-btn-icon:hover { background: rgba(255,255,255,0.12); }
    .ls-btn-outline { border-color: var(--border); }
    .ls-btn-accent {
      background: var(--accent);
      border-color: var(--accent);
      color: white;
    }
    .ls-btn-accent:hover { background: var(--accent-light); }

    .ls-btn-go-live {
      background: linear-gradient(135deg, #ef4444, #dc2626);
      border-color: rgba(239,68,68,0.5);
      color: white;
      font-weight: 700;
      padding: 7px 20px;
      border-radius: 20px;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      font-size: 11px;
      box-shadow: 0 2px 12px rgba(239,68,68,0.25);
      transition: all 0.2s;
    }
    .ls-btn-go-live:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 20px rgba(239,68,68,0.35);
      background: linear-gradient(135deg, #f87171, #ef4444);
    }
    .ls-btn-go-live.streaming {
      background: linear-gradient(135deg, #dc2626, #991b1b);
      animation: ls-go-live-glow 2s ease-in-out infinite;
    }
    @keyframes ls-go-live-glow {
      0%, 100% { box-shadow: 0 2px 12px rgba(239,68,68,0.25); }
      50% { box-shadow: 0 2px 24px rgba(239,68,68,0.5); }
    }

    /* Source Mode Tabs */
    .ls-source-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 20px 0;
      flex-shrink: 0;
    }
    .ls-source-tabs {
      display: flex;
      gap: 2px;
      background: rgba(0,0,0,0.25);
      border-radius: 8px;
      padding: 3px;
    }
    .ls-source-tab {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 16px;
      border-radius: 6px;
      border: none;
      background: transparent;
      color: var(--text-secondary);
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s;
      font-family: inherit;
      white-space: nowrap;
    }
    .ls-source-tab:hover { color: var(--text); background: rgba(255,255,255,0.04); }
    .ls-source-tab.active {
      background: var(--accent);
      color: white;
      box-shadow: 0 2px 8px rgba(47,109,246,0.3);
    }
    .ls-source-tab svg { width: 14px; height: 14px; }
    .ls-source-spacer { flex: 1; }

    /* Aspect Ratio Toggle */
    .ls-aspect-group {
      display: none;
      align-items: center;
      gap: 4px;
    }
    .ls-aspect-group.visible { display: flex; }
    .ls-camera-group {
      display: none;
      align-items: center;
      gap: 6px;
      margin-right: 10px;
      min-width: 220px;
      max-width: 360px;
    }
    .ls-camera-group.visible { display: inline-flex; }
    .ls-audio-group {
      display: none;
      align-items: center;
      gap: 6px;
      margin-right: 10px;
      min-width: 220px;
      max-width: 360px;
    }
    .ls-audio-group.visible { display: inline-flex; }
    .ls-camera-select {
      height: 28px;
      min-width: 200px;
      max-width: 320px;
      padding: 0 8px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.06);
      color: var(--text-primary);
      font-size: 11px;
      outline: none;
      font-family: inherit;
    }
    .ls-audio-select {
      height: 28px;
      min-width: 200px;
      max-width: 320px;
      padding: 0 8px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.06);
      color: var(--text-primary);
      font-size: 11px;
      outline: none;
      font-family: inherit;
    }
    .ls-camera-refresh {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.06);
      color: var(--text-secondary);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .ls-audio-refresh {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.06);
      color: var(--text-secondary);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .ls-aspect-label {
      font-size: 9px;
      font-weight: 600;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-right: 4px;
    }
    .ls-aspect-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 26px;
      border-radius: 5px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.03);
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.15s;
      font-family: inherit;
      font-size: 9px;
      font-weight: 700;
      padding: 0;
    }
    .ls-aspect-btn:hover { background: rgba(255,255,255,0.08); color: var(--text); }
    .ls-aspect-btn.active {
      background: var(--accent);
      border-color: var(--accent);
      color: white;
    }
    .ls-aspect-btn svg { width: 16px; height: 16px; }

    /* Preview */
    .ls-preview-area {
      padding: 10px 20px 0;
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .ls-preview-stage {
      position: relative;
      width: min(100%, 960px);
      display: flex;
      align-items: stretch;
      justify-content: center;
      gap: 8px;
    }
    .ls-preview-box {
      position: relative;
      width: 100%;
      aspect-ratio: 16/9;
      background: #000;
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid var(--border);
      box-shadow: 0 4px 24px rgba(0,0,0,0.3);
      transition: all 0.35s ease;
    }
    .ls-preview-box video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    #ls-preview-capture {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: none;
      z-index: 1;
      background: #000;
    }
    #ls-preview-capture.active {
      display: block;
    }

    .ls-no-signal {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      color: var(--text-secondary);
      font-size: 12px;
      background: radial-gradient(ellipse at center, rgba(20,25,35,0.95), #000);
    }
    .ls-no-signal.hidden { display: none; }
    /* ── LS Preview Context Menu ── */
    .ls-preview-ctx {
      position: fixed;
      z-index: 10000;
      min-width: 190px;
      background: rgba(28,32,42,0.96);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 8px;
      box-shadow: 0 8px 28px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.2);
      padding: 4px 0;
      font-size: 12px;
      color: #d4dae6;
      backdrop-filter: blur(16px);
      display: none;
    }
    .ls-preview-ctx.visible { display: block; }
    .ls-preview-ctx-item {
      padding: 7px 14px 7px 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 9px;
      white-space: nowrap;
      transition: background 0.1s;
      user-select: none;
    }
    .ls-preview-ctx-item:hover {
      background: rgba(47,109,246,0.85);
      color: #fff;
    }
    .ls-preview-ctx-item svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      opacity: 0.7;
    }
    .ls-preview-ctx-item:hover svg { opacity: 1; }
    .ls-preview-ctx-item .ls-ctx-note {
      margin-left: auto;
      font-size: 9px;
      color: rgba(255,255,255,0.35);
      font-weight: 500;
    }
    .ls-preview-ctx-item:hover .ls-ctx-note { color: rgba(255,255,255,0.55); }
    .ls-preview-ctx-sep {
      height: 1px;
      background: rgba(255,255,255,0.08);
      margin: 4px 0;
    }
    /* ── Preview Disabled Overlay ── */
    .ls-preview-disabled-overlay {
      position: absolute;
      inset: 0;
      z-index: 5;
      background: radial-gradient(ellipse at center, rgba(10,14,22,0.92), rgba(0,0,0,0.96));
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      border-radius: 10px;
    }
    .ls-preview-disabled-overlay.active {
      display: flex;
    }
    .ls-preview-disabled-overlay svg {
      width: 36px;
      height: 36px;
      color: rgba(255,255,255,0.2);
    }
    .ls-preview-disabled-overlay span {
      font-size: 11px;
      font-weight: 600;
      color: rgba(255,255,255,0.3);
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }
    .ls-preview-disabled-overlay .ls-preview-disabled-sub {
      font-size: 10px;
      font-weight: 400;
      color: rgba(255,255,255,0.18);
      text-transform: none;
      letter-spacing: 0;
    }
    .ls-preview-badge {
      position: absolute;
      top: 10px;
      left: 10px;
      padding: 3px 10px;
      border-radius: 4px;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 1.2px;
      background: rgba(0,0,0,0.6);
      color: var(--text-secondary);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,0.1);
    }
    .ls-preview-badge.live { background: rgba(239,68,68,0.8); color: white; }
    .ls-source-badge {
      position: absolute;
      top: 10px;
      right: 10px;
      padding: 3px 8px;
      border-radius: 4px;
      font-size: 8px;
      font-weight: 800;
      letter-spacing: 1px;
      text-transform: uppercase;
      background: rgba(47,109,246,0.5);
      color: white;
      backdrop-filter: blur(8px);
      border: 1px solid rgba(47,109,246,0.3);
    }
    .ls-audio-meter {
      position: relative;
      width: 48px;
      display: flex;
      flex-direction: column;
      align-self: stretch;
      border-radius: 7px;
      background: rgba(8, 10, 15, 0.75);
      border: 1px solid rgba(255,255,255,0.08);
      backdrop-filter: blur(8px);
      flex-shrink: 0;
      overflow: hidden;
    }
    .ls-audio-meter-inner {
      flex: 1;
      display: flex;
      align-items: stretch;
      gap: 4px;
      padding: 6px 4px;
      min-height: 0;
    }
    /* Headphone monitoring toggle */
    .ls-meter-hp-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 26px;
      flex-shrink: 0;
      border: none;
      border-top: 1px solid rgba(255,255,255,0.06);
      background: transparent;
      color: rgba(255,255,255,0.35);
      cursor: pointer;
      padding: 0;
      transition: color 0.12s, background 0.12s;
    }
    .ls-meter-hp-btn:hover {
      background: rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.6);
    }
    .ls-meter-hp-btn.monitoring {
      color: #22c55e;
    }
    .ls-meter-hp-btn.monitoring:hover {
      background: rgba(34,197,94,0.08);
    }
    .ls-meter-hp-btn svg {
      width: 14px;
      height: 14px;
    }
    .ls-audio-meter-scale {
      width: 12px;
      position: relative;
      font-family: 'SF Mono', 'Fira Code', monospace;
      font-size: 8px;
      color: rgba(190, 202, 222, 0.75);
      letter-spacing: 0.2px;
    }
    .ls-audio-meter-scale span {
      position: absolute;
      right: 0;
      transform: translateY(50%);
    }
    .ls-audio-meter-bars {
      flex: 1;
      display: flex;
      gap: 4px;
      align-items: stretch;
    }
    .ls-audio-bar {
      flex: 1;
      position: relative;
      border-radius: 3px;
      background: linear-gradient(to top, #172029 0%, #1b2430 100%);
      border: 1px solid rgba(255,255,255,0.06);
      overflow: hidden;
    }
    .ls-audio-fill {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 0%;
      background: linear-gradient(to top, #16a34a 0%, #22c55e 62%, #eab308 82%, #ef4444 100%);
      box-shadow: inset 0 0 6px rgba(0,0,0,0.35);
      transition: height 0.06s linear;
    }
    .ls-audio-peak {
      position: absolute;
      left: 0;
      right: 0;
      height: 2px;
      bottom: 0%;
      background: rgba(255, 244, 170, 0.95);
      box-shadow: 0 0 4px rgba(255, 235, 130, 0.85);
    }
    .ls-audio-label {
      position: absolute;
      bottom: 2px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 8px;
      font-weight: 700;
      color: rgba(225, 233, 246, 0.9);
      text-shadow: 0 1px 3px rgba(0,0,0,0.8);
      pointer-events: none;
    }

    /* Lower Third Overlay */
    .ls-lowerthird {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      display: none;
      padding: 0 16px 14px;
      pointer-events: none;
      z-index: 10;
    }
    .ls-lowerthird.visible { display: block; }
    .ls-lowerthird-inner {
      display: flex;
      align-items: flex-end;
      gap: 0;
      animation: ls-lt-slide-in 0.4s ease-out;
    }
    @keyframes ls-lt-slide-in {
      from { opacity: 0; transform: translateX(-20px); }
      to { opacity: 1; transform: translateX(0); }
    }
    .ls-lt-color-bar {
      width: 4px;
      min-height: 40px;
      border-radius: 2px 0 0 2px;
      flex-shrink: 0;
      align-self: stretch;
    }
    .ls-lt-content {
      background: rgba(0,0,0,0.75);
      backdrop-filter: blur(12px);
      border-radius: 0 6px 6px 0;
      padding: 8px 18px 8px 14px;
      min-width: 160px;
      border: 1px solid rgba(255,255,255,0.08);
      border-left: none;
    }
    .ls-lt-name {
      font-size: 14px;
      font-weight: 800;
      color: white;
      line-height: 1.2;
      text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    }
    .ls-lt-title {
      font-size: 10px;
      font-weight: 600;
      color: rgba(255,255,255,0.7);
      line-height: 1.3;
      margin-top: 1px;
    }

    /* Lower Third Settings Card */
    .ls-lt-card {
      display: none;
      margin: 0 20px 12px;
    }
    .ls-lt-card.visible {
      display: block;
    }
    .ls-lt-controls {
      display: flex;
      gap: 8px;
      align-items: flex-end;
    }
    .ls-lt-controls .ls-field { flex: 1; margin-bottom: 0; }
    .ls-lt-toggle-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
    }
    .ls-lt-toggle-label {
      font-size: 10px;
      font-weight: 600;
      color: var(--text-secondary);
      flex: 1;
    }
    .ls-lt-color-pick {
      width: 24px;
      height: 24px;
      border-radius: 6px;
      border: 1px solid var(--border);
      cursor: pointer;
      padding: 0;
      background: none;
      appearance: none;
      -webkit-appearance: none;
    }
    .ls-lt-color-pick::-webkit-color-swatch-wrapper { padding: 2px; }
    .ls-lt-color-pick::-webkit-color-swatch { border-radius: 3px; border: none; }

    /* Health Strip */
    .ls-health-strip {
      display: flex;
      gap: 2px;
      margin-top: 8px;
      border-radius: 8px;
      overflow: hidden;
      flex-shrink: 0;
      width: min(100%, 960px);
    }
    .ls-health-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 6px 8px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.04);
    }
    .ls-health-item:first-child { border-radius: 8px 0 0 8px; }
    .ls-health-item:last-child { border-radius: 0 8px 8px 0; }
    .ls-health-label {
      font-size: 9px;
      font-weight: 600;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .ls-health-val {
      font-size: 12px;
      font-weight: 700;
      color: var(--text);
      font-family: 'SF Mono', 'Fira Code', monospace;
      margin-top: 2px;
    }

    /* Config Cards */
    .ls-config-row {
      display: flex;
      gap: 12px;
      padding: 0 20px 20px;
      flex-shrink: 0;
    }

    /* Portrait layout side panels */
    .ls-portrait-left-panel,
    .ls-portrait-right-panel {
      display: none;
    }
    .ls-page.portrait-layout .ls-portrait-left-panel {
      display: flex;
      flex-direction: column;
      width: clamp(320px, 24vw, 380px);
      min-width: 320px;
      border-right: 1px solid var(--border);
      background: rgba(0,0,0,0.10);
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: var(--border) transparent;
      padding: 12px;
      gap: 10px;
    }
    .ls-page.portrait-layout .ls-portrait-right-panel {
      display: flex;
      flex-direction: column;
      width: 280px;
      min-width: 260px;
      border-left: 1px solid var(--border);
      background: rgba(0,0,0,0.10);
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: var(--border) transparent;
    }
    .ls-portrait-center {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-width: 0;
      min-height: 0;
      padding: 10px;
      overflow: hidden;
    }
    .ls-portrait-center .ls-preview-box {
      aspect-ratio: 9/16;
      width: auto;
      height: 70vh;
      max-height: 70vh;
      max-width: none;
    }
    .ls-portrait-center .ls-health-strip {
      width: 100%;
      max-width: 400px;
    }
    .ls-portrait-center .ls-source-bar {
      width: 100%;
      max-width: 400px;
      padding: 0 0 6px;
      justify-content: center;
    }
    /* Cards in portrait left panel reset */
    .ls-portrait-left-panel .ls-lt-card {
      margin: 0;
    }
    .ls-portrait-left-panel .ls-card {
      flex: none;
    }
    .ls-portrait-left-panel .ls-config-row .ls-card {
      flex: none;
    }
    /* In portrait mode, hide the normal main column & sidebar */
    .ls-page.portrait-layout > .ls-main,
    .ls-page.portrait-layout > .ls-sidebar {
      display: none;
    }
    .ls-card {
      flex: 1;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.02);
      overflow: hidden;
    }
    .ls-card-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      background: rgba(255,255,255,0.03);
      border-bottom: 1px solid var(--border);
      font-size: 11px;
      font-weight: 700;
      color: var(--text);
    }
    .ls-card-header svg { color: var(--accent-light); flex-shrink: 0; }
    .ls-card-header span { flex: 1; }
    .ls-card-body { padding: 14px; }

    /* Protocol Tabs */
    .ls-protocol-tabs {
      display: flex;
      gap: 2px;
      background: rgba(0,0,0,0.2);
      border-radius: 6px;
      padding: 2px;
    }
    .ls-proto-btn {
      padding: 3px 10px;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.5px;
      border: none;
      background: transparent;
      color: var(--text-secondary);
      cursor: pointer;
      border-radius: 4px;
      transition: all 0.15s;
      font-family: inherit;
    }
    .ls-proto-btn:hover { color: var(--text); }
    .ls-proto-btn.active {
      background: var(--accent);
      color: white;
    }

    /* Fields */
    .ls-field { margin-bottom: 10px; }
    .ls-field:last-child { margin-bottom: 0; }
    .ls-field-label {
      display: block;
      font-size: 10px;
      font-weight: 600;
      color: var(--text-secondary);
      margin-bottom: 4px;
      text-transform: uppercase;
      letter-spacing: 0.4px;
    }
    .ls-input-row {
      display: flex;
      gap: 4px;
    }
    .ls-input {
      flex: 1;
      background: rgba(0,0,0,0.25);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      font-size: 11px;
      padding: 7px 10px;
      font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
      transition: border-color 0.15s;
      min-width: 0;
    }
    .ls-input:focus { outline: none; border-color: var(--accent); }
    select.ls-input { font-family: inherit; cursor: pointer; }

    .ls-field-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .ls-field-grid .ls-field { margin-bottom: 0; }

    /* ─ Sidebar ─ */
    .ls-sidebar {
      width: 280px;
      min-width: 280px;
      display: flex;
      flex-direction: column;
      border-left: 1px solid var(--border);
      background: rgba(0,0,0,0.15);
      overflow: hidden;
    }
    .ls-sidebar.ls-sidebar-portrait {
      border-left: none;
      width: 100%;
      min-width: 0;
    }
    .ls-sb-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 14px;
      border-bottom: 1px solid var(--border);
      font-size: 12px;
      font-weight: 700;
      color: var(--text);
      flex-shrink: 0;
    }
    .ls-sb-header svg { color: var(--accent-light); }
    .ls-sb-header span { flex: 1; }
    .ls-sb-divider {
      height: 1px;
      background: var(--border);
      margin: 0;
      flex-shrink: 0;
    }
    .ls-sb-section-title {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: var(--text-secondary);
      padding: 10px 14px 6px;
      flex-shrink: 0;
    }

    /* Destination List */
    .ls-dest-list {
      flex: 0 1 auto;
      overflow-y: auto;
      padding: 8px;
      scrollbar-width: thin;
      max-height: 200px;
    }
    .ls-dest-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 8px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.05);
      margin-bottom: 6px;
      transition: all 0.15s;
    }
    .ls-dest-item:hover { background: rgba(255,255,255,0.06); }
    .ls-dest-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      background: rgba(255,255,255,0.06);
    }
    .ls-dest-info {
      flex: 1;
      min-width: 0;
    }
    .ls-dest-name {
      font-size: 11px;
      font-weight: 700;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .ls-dest-status {
      font-size: 9px;
      color: var(--text-secondary);
      margin-top: 1px;
    }
    .ls-dest-status.connected { color: var(--success); }
    .ls-dest-status.warn { color: var(--warning); }
    .ls-dest-toggle {
      position: relative;
      width: 34px;
      height: 18px;
      border-radius: 10px;
      background: rgba(255,255,255,0.12);
      border: none;
      cursor: pointer;
      transition: background 0.2s;
      flex-shrink: 0;
    }
    .ls-dest-toggle::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: white;
      transition: transform 0.2s;
    }
    .ls-dest-toggle.on { background: var(--success); }
    .ls-dest-toggle.on::after { transform: translateX(16px); }
    .ls-dest-remove {
      background: none;
      border: none;
      color: var(--text-secondary);
      cursor: pointer;
      padding: 2px;
      border-radius: 4px;
      opacity: 0;
      transition: all 0.15s;
    }
    .ls-dest-item:hover .ls-dest-remove { opacity: 0.6; }
    .ls-dest-remove:hover { color: var(--danger); opacity: 1 !important; }

    /* Quick Grid */
    .ls-quick-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      padding: 6px 14px 12px;
      flex-shrink: 0;
    }
    .ls-quick-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 10px 4px 8px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.06);
      background: rgba(255,255,255,0.02);
      color: var(--text-secondary);
      font-size: 9px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s;
      font-family: inherit;
    }
    .ls-quick-btn:hover {
      background: rgba(255,255,255,0.07);
      color: var(--text);
      border-color: rgba(255,255,255,0.12);
      transform: translateY(-1px);
    }

    /* Chat */
    .ls-chat-box {
      flex: 1;
      min-height: 80px;
      overflow-y: auto;
      padding: 8px 14px;
      scrollbar-width: thin;
    }
    .ls-chat-empty {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: var(--text-secondary);
      font-size: 10px;
      opacity: 0.5;
    }
    .ls-chat-msg {
      margin-bottom: 6px;
      font-size: 11px;
      line-height: 1.4;
    }
    .ls-chat-msg-author {
      font-weight: 700;
      color: var(--accent-light);
      margin-right: 6px;
    }
    .ls-chat-input-row {
      display: flex;
      gap: 4px;
      padding: 6px 10px 10px;
      flex-shrink: 0;
      border-top: 1px solid var(--border);
    }
    .ls-chat-input {
      font-family: inherit !important;
      font-size: 11px !important;
    }

    /* Destination Config Modal */
    .ls-dest-modal-overlay {
      display: none;
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.6);
      backdrop-filter: blur(4px);
      z-index: 200;
      align-items: center;
      justify-content: center;
    }
    .ls-dest-modal-overlay.open { display: flex; }
    .ls-dest-modal {
      width: 420px;
      max-width: 90%;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: var(--bg-panel);
      box-shadow: 0 16px 48px rgba(0,0,0,0.5);
      overflow: hidden;
      animation: ls-modal-in 0.2s ease-out;
    }
    @keyframes ls-modal-in {
      from { opacity: 0; transform: scale(0.95) translateY(8px); }
      to { opacity: 1; transform: scale(1) translateY(0); }
    }
    .ls-dest-modal-header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 16px 18px;
      border-bottom: 1px solid var(--border);
      background: rgba(255,255,255,0.02);
    }
    .ls-dest-modal-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 900;
      flex-shrink: 0;
    }
    .ls-dest-modal-title {
      flex: 1;
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
    }
    .ls-dest-modal-body {
      padding: 18px;
    }
    .ls-dest-modal-help {
      font-size: 11px;
      color: var(--text-secondary);
      line-height: 1.5;
      margin-bottom: 14px;
      padding: 10px 12px;
      background: rgba(47, 109, 246, 0.08);
      border: 1px solid rgba(47, 109, 246, 0.15);
      border-radius: 8px;
    }
    .ls-dest-modal-help a {
      color: var(--accent-light);
      text-decoration: underline;
    }
    .ls-dest-modal-footer {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      padding: 12px 18px;
      border-top: 1px solid var(--border);
      background: rgba(0,0,0,0.1);
    }

    /* ---- Page Navigation Bar ---- */
    #page-nav-bar {
      height: 36px;
      min-height: 36px;
      background: var(--footer-bar-bg);
      border-top: 1px solid rgba(255,255,255,0.08);
      display: flex;
      align-items: center;
      justify-content: flex-start;
      position: relative;
      padding: 0 12px 0 64px;
      box-sizing: border-box;
      flex-shrink: 0;
      user-select: none;
      -webkit-user-select: none;
      z-index: 100;
      gap: 8px;
    }

    .page-nav-tool-left,
    .page-nav-tool-right {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      display: inline-flex;
      align-items: center;
      z-index: 0;
    }
    .page-nav-tool-left {
      left: 12px;
      gap: 2px;
      white-space: nowrap;
    }
    .page-nav-tool-right {
      left: calc(50% + 176px);
    }

    .page-nav-primary {
      display: inline-flex;
      align-items: stretch;
      justify-content: center;
      gap: 2px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      padding: 3px;
      border-radius: 10px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
      min-width: 0;
      z-index: 1;
    }

    .page-nav-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      height: 100%;
      padding: 0 16px;
      border: none;
      background: transparent;
      color: #6b7a94;
      font-size: 11px;
      font-weight: 500;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      letter-spacing: 0.2px;
      cursor: pointer;
      transition: color 0.15s, background 0.15s;
      position: relative;
      white-space: nowrap;
    }

    .page-nav-btn:hover {
      color: #cdd6e4;
      background: rgba(255,255,255,0.04);
    }

    .page-nav-btn.active {
      color: #e8f0ff;
    }

    .page-nav-btn.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 70%;
      height: 2px;
      background: var(--accent-light, #4a86ff);
      border-radius: 1px 1px 0 0;
    }

    .page-nav-btn svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
    }
    .page-nav-btn.page-nav-sidebar-btn {
      min-width: 52px;
      padding: 0 12px;
    }
    #page-nav-bar .page-nav-tool-left .page-nav-btn,
    #page-nav-bar .page-nav-tool-right .page-nav-btn {
      color: #8b98ae;
      font-size: 10.5px;
      font-weight: 600;
      padding: 0 12px;
      border-radius: 8px;
      min-width: 0;
    }
    #page-nav-bar .page-nav-tool-left .page-nav-btn:hover,
    #page-nav-bar .page-nav-tool-right .page-nav-btn:hover {
      background: rgba(255,255,255,0.05);
      color: #d8e1ef;
    }
    .page-nav-btn.page-nav-sidebar-btn svg {
      width: 20px;
      height: 20px;
      stroke-width: 2.4;
    }
    #page-nav-bar .page-nav-btn[data-side-tab] {
      text-transform: uppercase;
      letter-spacing: 0.06em;
      font-weight: 700;
    }
    #page-nav-bar .page-nav-primary .page-nav-btn {
      height: 28px;
      padding: 0 18px;
      border-radius: 8px;
      color: #97a5bd;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.08em;
    }
    #page-nav-bar .page-nav-primary .page-nav-btn:hover {
      background: rgba(255,255,255,0.06);
      color: #eef4ff;
    }
    #page-nav-bar .page-nav-primary .page-nav-btn.active {
      color: #eef4ff;
      background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.08));
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 6px 16px rgba(0,0,0,0.18);
    }
    #page-nav-bar .page-nav-primary .page-nav-btn.active::after {
      width: calc(100% - 16px);
      bottom: 2px;
    }
    #footer-sidebar-btn {
      position: absolute;
      left: 0;
      top: 0;
    }
    #autoLyricsModal {
      background: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      align-items: flex-start;
      justify-content: flex-start;
      z-index: 1800;
    }
    #autoLyricsModal .modal-content {
      position: fixed;
      margin: 0;
      max-height: min(86vh, calc(100vh - 20px));
    }
    #footer-bible-version-popover {
      position: fixed;
      display: none;
      flex-direction: column;
      gap: 4px;
      width: min(360px, calc(100vw - 20px));
      max-height: min(360px, calc(100vh - 120px));
      overflow-y: auto;
      padding: 8px;
      background: var(--bg-panel, #1c1f26);
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: 0 14px 36px rgba(0,0,0,0.45);
      z-index: 1800;
    }
    #footer-bible-version-popover.open {
      display: flex;
    }
    #footer-bible-version-popover .footer-bv-list {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    #footer-bible-version-popover .footer-bv-search {
      position: sticky;
      top: 0;
      z-index: 1;
      background: var(--bg-panel, #1c1f26);
      padding: 2px 0 6px;
    }
    #footer-bible-version-popover .footer-bv-search input {
      width: 100%;
      box-sizing: border-box;
      border: 1px solid var(--border);
      background: var(--panel-content-bg, rgba(255,255,255,0.04));
      color: var(--text);
      border-radius: 8px;
      padding: 7px 10px;
      font-size: 12px;
      font-family: inherit;
      outline: none;
    }
    #footer-bible-version-popover .footer-bv-item {
      width: 100%;
      border-radius: 8px;
      border: 1px solid transparent;
      background: transparent;
      display: flex;
      align-items: stretch;
      gap: 6px;
    }
    #footer-bible-version-popover .footer-bv-item.active {
      border-color: var(--border);
      background: rgba(255, 255, 255, 0.06);
    }
    #footer-bible-version-popover .footer-bv-item.marked {
      background: rgba(255, 255, 255, 0.04);
    }
    #footer-bible-version-popover .footer-bv-btn {
      width: 100%;
      border: none;
      background: transparent;
      color: var(--text);
      font-size: 12px;
      font-family: inherit;
      padding: 7px 10px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      text-align: left;
      justify-content: flex-start;
      cursor: pointer;
    }
    #footer-bible-version-popover .footer-bv-name {
      flex: 1 1 auto;
      min-width: 0;
    }
    #footer-bible-version-popover .footer-bv-flags {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-left: auto;
      flex: 0 0 auto;
    }
    #footer-bible-version-popover .footer-bv-flag {
      min-width: 20px;
      height: 20px;
      padding: 0 6px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 800;
      color: #ffffff;
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid rgba(255, 255, 255, 0.18);
    }
    #footer-bible-version-popover .footer-bv-flag.primary {
      background: rgba(10, 132, 255, 0.92);
      border-color: rgba(125, 190, 255, 0.65);
    }
    #footer-bible-version-popover .footer-bv-flag.secondary {
      background: rgba(46, 204, 113, 0.9);
      border-color: rgba(143, 234, 176, 0.6);
    }
    #footer-bible-version-popover .footer-bv-btn:hover {
      background: rgba(255, 255, 255, 0.04);
    }
    #footer-bible-version-popover .footer-bv-del {
      border: none;
      background: transparent;
      color: var(--text-secondary);
      width: 28px;
      min-width: 28px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 12px;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      opacity: 0.72;
      transition: all 0.15s ease;
      margin: 2px 2px 2px 0;
    }
    #footer-bible-version-popover .footer-bv-del:hover {
      background: rgba(239, 68, 68, 0.18);
      color: var(--danger);
      opacity: 1;
    }
    #footer-bible-version-popover .footer-bv-btn:disabled {
      cursor: not-allowed;
      opacity: 0.6;
    }
    #footer-bible-version-popover .footer-bv-icon {
      width: 14px;
      height: 14px;
      flex: 0 0 auto;
      opacity: 0.9;
    }
    .footer-bv-empty {
      padding: 8px 10px;
      color: var(--text-secondary);
      font-size: 12px;
    }
    .dual-version-select-wrap {
      position: relative;
    }
    .dual-version-picker-btn {
      width: 100%;
      min-height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      text-align: left;
      cursor: pointer;
    }
    .dual-version-picker-btn::after {
      content: '▾';
      color: var(--text-secondary);
      font-size: 11px;
      flex: 0 0 auto;
    }
    .dual-version-picker-btn[disabled] {
      opacity: 0.55;
      cursor: not-allowed;
    }
    .dual-version-native-select {
      display: none !important;
    }
    .dual-version-picker-menu {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      right: 0;
      z-index: 2600;
      display: none;
      max-height: 220px;
      overflow-y: auto;
      padding: 6px;
      background: var(--bg-panel, #1c1f26);
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: 0 14px 36px rgba(0,0,0,0.45);
    }
    .dual-version-picker-menu.open {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .dual-version-picker-menu .dual-version-picker-search {
      position: sticky;
      top: 0;
      z-index: 1;
      background: var(--bg-panel, #1c1f26);
      padding: 2px 0 6px;
    }
    .dual-version-picker-menu .dual-version-picker-search input {
      width: 100%;
      box-sizing: border-box;
      border: 1px solid var(--border);
      background: var(--panel-content-bg, rgba(255,255,255,0.04));
      color: var(--text);
      border-radius: 8px;
      padding: 7px 10px;
      font-size: 12px;
      font-family: inherit;
      outline: none;
    }
    .dual-version-picker-menu .footer-bv-item {
      width: 100%;
      border-radius: 8px;
      border: 1px solid transparent;
      background: transparent;
    }
    .dual-version-picker-menu .footer-bv-item.active {
      border-color: var(--border);
      background: rgba(255, 255, 255, 0.06);
    }
    .dual-version-picker-menu .footer-bv-btn {
      width: 100%;
      border: none;
      background: transparent;
      color: var(--text);
      font-size: 12px;
      font-family: inherit;
      padding: 7px 10px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      text-align: left;
      justify-content: flex-start;
      cursor: pointer;
    }
    .dual-version-picker-menu .footer-bv-btn:hover {
      background: rgba(255, 255, 255, 0.04);
    }
    .dual-version-picker-menu .footer-bv-icon {
      width: 14px !important;
      height: 14px !important;
      min-width: 14px;
      min-height: 14px;
      flex: 0 0 auto;
      display: inline-block;
      opacity: 0.9;
    }
    .dual-version-picker-menu .footer-bv-item.disabled {
      opacity: 0.45;
      pointer-events: none;
    }

    /* ---- Footer Status Bar ---- */
    #footer-bar {
      height: 24px;
      min-height: 24px;
      background: var(--footer-bar-bg);
      border-top: 1px solid rgba(255,255,255,0.06);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      flex-shrink: 0;
      font-size: 11px;
      color: #8b95a5;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      user-select: none;
      z-index: 100;
      gap: 6px;
    }
    .fb-section {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .fb-left { justify-content: flex-start; }
    .fb-center { justify-content: center; flex: 1; }
    .fb-right { justify-content: flex-end; }
    .fb-item {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
      cursor: default;
      transition: color 0.15s;
    }
    .fb-item:hover {
      color: #cdd6e4;
    }
    .fb-icon {
      width: 12px;
      height: 12px;
      flex-shrink: 0;
      opacity: 0.7;
    }
    .fb-item:hover .fb-icon {
      opacity: 1;
    }
    .fb-cpu-bar {
      width: 48px;
      height: 8px;
      background: rgba(255,255,255,0.08);
      border-radius: 3px;
      overflow: hidden;
      display: inline-block;
      vertical-align: middle;
      margin-left: 3px;
      border: 1px solid rgba(255,255,255,0.06);
    }
    .fb-cpu-fill {
      display: block;
      height: 100%;
      border-radius: 2px;
      transition: width 0.5s ease, background 0.5s ease;
      width: 0%;
      background: #4a86ff;
    }
    .fb-mem-bar {
      width: 48px;
      height: 8px;
      background: rgba(255,255,255,0.08);
      border-radius: 3px;
      overflow: hidden;
      display: inline-block;
      vertical-align: middle;
      margin-left: 3px;
      border: 1px solid rgba(255,255,255,0.06);
    }
    .fb-mem-fill {
      display: block;
      height: 100%;
      border-radius: 2px;
      transition: width 0.5s ease, background 0.5s ease;
      width: 0%;
      background: #10b981;
    }
    .fb-net-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      display: inline-block;
      margin-right: 2px;
      transition: background 0.3s;
    }
    .fb-net-dot.online { background: #10b981; box-shadow: 0 0 4px rgba(16,185,129,0.5); }
    .fb-net-dot.offline { background: #f87171; box-shadow: 0 0 4px rgba(248,113,113,0.5); }

    .dock-scene-tabs {
      display: flex;
      align-items: center;
      gap: 6px;
      width: 100%;
    }

    .dock-scene-tab {
      border: 1px solid #2d3b54;
      background: #111a2c;
      color: #d9e2f1;
      border-radius: 6px;
      padding: 6px 8px;
      font-size: 10px;
      font-weight: 700;
      cursor: pointer;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      white-space: nowrap;
      flex: 1 1 0;
      min-width: 0;
    }

    .studio-pane-title.scene-tabs-title {
      padding: 6px 8px;
    }

    .dock-scene-tab.active {
      border-color: var(--accent);
      background: rgba(14, 165, 233, 0.22);
      color: #f3f8ff;
    }

    #workspace-height-handle {
      height: 6px;
      cursor: ns-resize;
      background: var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      user-select: none;
      -webkit-user-select: none;
      z-index: 110;
      border-top: 1px solid #1a2235;
      border-bottom: 1px solid #1a2235;
      touch-action: none;
      position: relative;
    }

    /* Invisible expanded grab zone */
    #workspace-height-handle::before {
      content: '';
      position: absolute;
      top: -6px;
      bottom: -6px;
      left: 0;
      right: 0;
      cursor: ns-resize;
    }

    #workspace-height-handle:hover,
    #workspace-height-handle:active {
      background: var(--accent);
    }

    #workspace-height-handle .grip {
      width: 30px;
      height: 2px;
      border-radius: 1px;
      background: var(--text-secondary);
      opacity: 0.5;
    }

    .studio-pane {
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      min-width: 0;
      min-height: 0;
      background: transparent;
      contain: layout style;
    }

    .studio-pane:last-child {
      border-right: 0;
    }

    .studio-pane-title {
      padding: 6px 10px;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-secondary);
      border-bottom: 1px solid var(--border);
      background: transparent;
      letter-spacing: -0.01em;
      display: flex;
      align-items: center;
      gap: 6px;
      height: 36px;
      flex-shrink: 0;
      overflow: visible;
    }

    .studio-pane-title-text {
      flex: 1;
      min-width: 0;
    }

    .studio-pane-title-actions {
      display: flex;
      align-items: center;
      gap: 2px;
      margin-left: auto;
      flex-shrink: 0;
    }

    .studio-pane-body {
      flex: 1;
      padding: 8px 10px;
      overflow: auto;
      font-size: 12px;
      color: var(--text-secondary);
      line-height: 1.5;
    }

    .pgm-stream-card {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 10px;
      border: 1px solid var(--border, rgba(122, 162, 247, 0.35));
      border-radius: 10px;
      background: var(--bg-panel, linear-gradient(165deg, rgba(14, 24, 38, 0.9), rgba(11, 18, 28, 0.94)));
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    }

    .pgm-stream-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.35px;
      color: var(--text, #d9e8ff);
    }

    .pgm-stream-pill {
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.5px;
      border: 1px solid var(--border, rgba(255,255,255,0.14));
      background: rgba(255,255,255,0.06);
      color: var(--text-secondary, #a5b8d6);
    }

    .pgm-stream-pill.live {
      color: #ffe8e8;
      border-color: rgba(239, 68, 68, 0.62);
      background: rgba(185, 28, 28, 0.45);
    }

    .pgm-stream-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .pgm-stream-btn {
      flex: 1;
      height: 34px;
      border-radius: 8px;
      border: 1px solid var(--border, rgba(255,255,255,0.15));
      background: rgba(18, 28, 42, 0.85);
      color: var(--text, #ecf4ff);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.2px;
      cursor: pointer;
      transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
    }

    .pgm-stream-btn:hover {
      transform: translateY(-1px);
      border-color: rgba(134, 175, 255, 0.62);
      background: rgba(36, 52, 78, 0.95);
    }

    .pgm-stream-btn.primary {
      background: linear-gradient(135deg, #2563eb, #1d4ed8);
      border-color: rgba(96, 165, 250, 0.75);
      color: #f7fbff;
    }

    .pgm-stream-btn.primary.live {
      background: linear-gradient(135deg, #c62828, #991b1b);
      border-color: rgba(248, 113, 113, 0.85);
    }

    .pgm-stream-meta {
      display: grid;
      grid-template-columns: 1fr;
      gap: 4px;
      font-size: 10px;
      color: var(--text-secondary, #8fa3bf);
    }

    .pgm-stream-meta strong {
      color: var(--text, #d3e2f9);
      font-weight: 700;
    }

    .pgm-mix-debug-panel {
      margin-top: 2px;
      padding: 8px 9px;
      border-radius: 8px;
      border: 1px dashed rgba(245, 158, 11, 0.45);
      background: rgba(35, 22, 4, 0.55);
      color: #f8d18a;
      font-size: 10px;
      line-height: 1.35;
    }

    .pgm-mix-debug-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 6px;
      font-weight: 700;
      letter-spacing: 0.3px;
      text-transform: uppercase;
    }

    .pgm-mix-debug-title strong {
      color: #ffdfaa;
    }

    .pgm-mix-debug-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 7px;
      margin-bottom: 3px;
      color: #e9c992;
    }

    .pgm-mix-debug-row:last-child {
      margin-bottom: 0;
    }

    .pgm-mix-debug-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .pgm-mix-debug-level {
      color: #ffe3b8;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.2px;
      white-space: nowrap;
    }

    .pgm-mix-debug-muted {
      color: #ff8b8b;
      font-weight: 700;
    }

    .pgm-stream-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .pgm-stream-grid-full {
      grid-column: 1 / -1;
    }

    .pgm-stream-input {
      width: 100%;
      border-radius: 7px;
      border: 1px solid var(--border, rgba(255,255,255,0.13));
      background: rgba(10, 16, 26, 0.88);
      color: var(--text, #ecf3ff);
      padding: 7px 9px;
      font-size: 11px;
      outline: none;
      box-sizing: border-box;
    }

    .pgm-stream-input:focus {
      border-color: rgba(96, 165, 250, 0.8);
      box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.28);
    }

    .pgm-stream-label {
      display: block;
      margin-bottom: 4px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.3px;
      color: var(--text-secondary, #a9bddb);
      text-transform: uppercase;
    }

    .pgm-stream-help {
      margin-top: 6px;
      padding: 8px 9px;
      border-radius: 8px;
      font-size: 10px;
      line-height: 1.45;
      color: #9ab1cf;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(7, 13, 22, 0.78);
    }

    .studio-item {
      padding: 7px 8px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: var(--radius-sm);
      margin-bottom: 4px;
      background: rgba(255, 255, 255, 0.04);
      color: var(--text);
      font-size: 11px;
      transition: background var(--duration-instant) var(--ease-out);
    }

    .studio-pane-footer-btn {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      background: transparent;
      color: var(--text-tertiary);
      cursor: pointer;
      border-radius: calc(var(--settings-control-radius) - 1px);
      transition: color var(--duration-instant) var(--ease-out),
                  background var(--duration-instant) var(--ease-out);
      padding: 0;
    }

    .studio-pane-footer-btn:hover {
      color: var(--text);
      background: rgba(255, 255, 255, 0.08);
    }

    .studio-pane-footer-btn:active {
      background: rgba(255, 255, 255, 0.12);
      transform: scale(0.92);
    }

    .studio-pane-footer-btn svg {
      width: 15px;
      height: 15px;
    }

    .program-display-header {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: var(--space-sm);
      padding: var(--space-sm) 10px 0;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 22;
      pointer-events: none;
      min-height: 40px;
    }

    .program-display-controls {
      display: inline-flex;
      align-items: center;
      gap: var(--space-sm);
      pointer-events: auto;
      position: static;
      transform: none;
    }

    #btn-output-go-live,
    #btn-output-go-live-panel {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #b91c1c;
      border: 1px solid rgba(239, 68, 68, 0.3);
      color: #fff;
      font-weight: 600;
      padding: 6px 18px;
      border-radius: 980px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      font-size: 11px;
      box-shadow: none;
      transition: background var(--duration-instant) var(--ease-out),
                  transform var(--duration-fast) var(--ease-spring);
      white-space: nowrap;
    }

    #btn-output-go-live:hover,
    #btn-output-go-live-panel:hover {
      background: #dc2626;
      transform: none;
      box-shadow: none;
    }

    #btn-output-go-live:active,
    #btn-output-go-live-panel:active {
      transform: scale(0.95);
    }

    #btn-output-go-live.live-active,
    #btn-output-go-live-panel.live-active {
      background: #16a34a;
      border-color: rgba(34, 197, 94, 0.4);
      box-shadow: 0 0 12px rgba(34, 197, 94, 0.2);
      animation: output-go-live-glow 2.5s ease-in-out infinite;
    }

    #btn-output-go-live-panel {
      margin-right: 6px;
    }

    @keyframes output-go-live-glow {
      0%, 100% { box-shadow: 0 0 8px rgba(34, 197, 94, 0.15); }
      50% { box-shadow: 0 0 18px rgba(34, 197, 94, 0.35); }
    }

    #btn-output-end-live {
      display: none;
      align-items: center;
      gap: 6px;
      background: #b91c1c;
      border: 1px solid rgba(239, 68, 68, 0.3);
      color: #fff;
      font-weight: 600;
      padding: 6px 18px;
      border-radius: 980px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      font-size: 11px;
      box-shadow: none;
      transition: background var(--duration-instant) var(--ease-out),
                  transform var(--duration-fast) var(--ease-spring);
      white-space: nowrap;
    }

    #btn-output-end-live:hover {
      background: #dc2626;
      transform: none;
    }

    #btn-output-end-live:active {
      transform: scale(0.95);
    }

    #btn-output-end-live.show {
      display: inline-flex;
    }

    .program-display-title {
      font-size: 11px;
      letter-spacing: 0.3px;
      text-transform: uppercase;
      font-weight: 600;
      color: var(--text-tertiary);
      pointer-events: none;
      position: absolute;
      left: 10px;
      top: 12px;
    }

    #program-display-stage {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px 0;
      background: var(--bg-dark);
      overflow: auto;
      position: relative;
      contain: layout;
    }

    /* Program Output Audio Meter (inline in program scale bar) */
    #pgm-output-meter {
      position: relative;
      width: auto;
      min-width: 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 6px;
      padding: 3px 6px;
      border-radius: 6px;
      background: rgba(8, 10, 15, 0.68);
      border: 1px solid rgba(255,255,255,0.08);
    }
    #pgm-output-meter .pgm-meter-main {
      flex: 0 0 auto;
      min-height: auto;
      width: auto;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    #pgm-output-meter .pgm-volume-col {
      width: auto;
      border-radius: 5px;
      background: rgba(8, 10, 15, 0.72);
      border: 1px solid rgba(255,255,255,0.10);
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 3px;
      padding: 3px 8px;
      flex-shrink: 0;
    }
    #pgm-output-meter .pgm-volume-slider {
      -webkit-appearance: none;
      appearance: none;
      width: 70px;
      height: 5px;
      border-radius: 999px;
      background: linear-gradient(90deg, #3f60c9 0%, #5f85ff 100%);
      outline: none;
      cursor: pointer;
    }
    #pgm-output-meter .pgm-volume-slider::-webkit-slider-runnable-track {
      height: 5px;
      border-radius: 999px;
      background: linear-gradient(90deg, #3f60c9 0%, #5f85ff 100%);
    }
    #pgm-output-meter .pgm-volume-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 14px;
      height: 14px;
      border-radius: 4px;
      border: 1px solid #9ba8c2;
      background: #f3f6fd;
      margin-top: -4.5px;
    }
    #pgm-output-meter .pgm-volume-slider::-moz-range-track {
      height: 5px;
      border-radius: 999px;
      background: linear-gradient(90deg, #3f60c9 0%, #5f85ff 100%);
    }
    #pgm-output-meter .pgm-volume-slider::-moz-range-thumb {
      width: 14px;
      height: 14px;
      border-radius: 4px;
      border: 1px solid #9ba8c2;
      background: #f3f6fd;
    }
    #pgm-output-meter .pgm-volume-value {
      font-family: 'SF Mono', 'Fira Code', monospace;
      font-size: 8px;
      color: #d3ddf0;
      font-weight: 700;
      letter-spacing: 0.1px;
      line-height: 1;
      min-width: 42px;
      text-align: right;
    }
    #pgm-output-meter .pgm-meter-bars {
      min-height: auto;
      flex: 0 0 auto;
      display: flex;
      gap: 3px;
      padding: 3px 4px;
      border-radius: 5px;
      background: rgba(8, 10, 15, 0.75);
      border: 1px solid rgba(255,255,255,0.08);
    }
    #pgm-output-meter .pgm-meter-scale {
      display: none;
    }
    #pgm-output-meter .pgm-bar {
      width: 8px;
      height: 24px;
      position: relative;
      border-radius: 3px;
      background: linear-gradient(to top, #172029 0%, #1b2430 100%);
      border: 1px solid rgba(255,255,255,0.06);
      overflow: hidden;
    }
    #pgm-output-meter.mono .pgm-bar-r {
      display: none;
    }
    #pgm-output-meter .pgm-bar-fill {
      position: absolute;
      left: 0; right: 0; bottom: 0;
      height: 0%;
      background: linear-gradient(to top, #16a34a 0%, #22c55e 62%, #eab308 82%, #ef4444 100%);
      will-change: height;
    }
    #pgm-output-meter .pgm-bar-peak {
      position: absolute;
      left: 0; right: 0;
      height: 2px;
      bottom: 0%;
      background: rgba(255, 244, 170, 0.95);
      box-shadow: 0 0 4px rgba(255, 235, 130, 0.85);
    }
    #pgm-output-meter .pgm-bar-label {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      font-size: 0;
      font-weight: 700;
      color: rgba(190, 200, 220, 0.65);
      pointer-events: none;
    }
    .pgm-mute-row {
      display: flex;
      gap: 2px;
      margin-top: 0;
      width: auto;
      justify-content: center;
      flex-shrink: 0;
    }
    .pgm-mute-btn {
      width: 20px;
      height: 20px;
      border: none;
      background: rgba(8, 10, 15, 0.75);
      border-radius: 5px;
      color: #8899aa;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 1px solid rgba(255,255,255,0.08);
      transition: color 0.15s, background 0.15s;
    }
    .pgm-mute-btn:hover { background: rgba(30,40,60,0.9); color: #e8f0ff; }
    .pgm-mute-btn.muted { color: #ef4444; }
    .pgm-mute-btn svg { width: 13px; height: 13px; }
    .pgm-output-device-select {
      width: 120px;
      height: 20px;
      border-radius: 5px;
      border: 1px solid rgba(255,255,255,0.1);
      background: rgba(8, 10, 15, 0.78);
      color: #d7e3f8;
      font-size: 9px;
      padding: 0 4px;
      outline: none;
      flex-shrink: 0;
    }
    .pgm-output-device-select:focus {
      border-color: rgba(96, 165, 250, 0.8);
    }

    .pgm-monitor-controls {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
      flex-wrap: wrap;
    }

    .pgm-monitor-mode-select {
      width: 126px;
      height: 20px;
      border-radius: 5px;
      border: 1px solid rgba(255,255,255,0.1);
      background: rgba(8, 10, 15, 0.78);
      color: #d7e3f8;
      font-size: 9px;
      padding: 0 4px;
      outline: none;
      flex-shrink: 0;
    }

    .pgm-monitor-mode-select:focus {
      border-color: rgba(96, 165, 250, 0.8);
    }

    .pgm-av-sync-wrap {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
    }

    .pgm-av-sync-label {
      font-size: 9px;
      color: #90a4c5;
      white-space: nowrap;
    }

    .pgm-av-sync-input {
      width: 56px;
      height: 20px;
      border-radius: 5px;
      border: 1px solid rgba(255,255,255,0.1);
      background: rgba(8, 10, 15, 0.78);
      color: #d7e3f8;
      font-size: 9px;
      padding: 0 4px;
      outline: none;
    }

    .pgm-av-sync-input:focus {
      border-color: rgba(96, 165, 250, 0.8);
    }
    .pgm-ull-wrap {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
    }
    .pgm-ull-label {
      font-size: 9px;
      color: #90a4c5;
      white-space: nowrap;
    }
    .pgm-ull-toggle {
      width: 14px;
      height: 14px;
      accent-color: #22c55e;
      cursor: pointer;
    }
    .pgm-ull-select {
      width: 66px;
      height: 20px;
      border-radius: 5px;
      border: 1px solid rgba(255,255,255,0.1);
      background: rgba(8, 10, 15, 0.78);
      color: #d7e3f8;
      font-size: 9px;
      padding: 0 4px;
      outline: none;
      flex-shrink: 0;
    }
    .pgm-ull-select:focus {
      border-color: rgba(96, 165, 250, 0.8);
    }
    .pgm-ull-status {
      font-size: 9px;
      color: #8aa2c6;
      min-width: 72px;
      text-align: right;
      white-space: nowrap;
    }

    #program-display-shell {
      width: min(100%, 960px);
      aspect-ratio: 16 / 9;
      background: var(--bg-dark);
      border-radius: var(--radius-sm);
      overflow: hidden;
      position: relative;
      isolation: isolate;
      margin: 0;
      max-height: calc(100% - 20px);
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    }

    #program-display-shell[data-aspect="9:16"] {
      aspect-ratio: 9 / 16;
      width: auto;
      height: min(100%, 980px);
      max-width: min(94%, 560px);
      max-height: calc(100% - 10px);
    }

    #program-scale-controls {
      min-height: 30px;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      background: var(--material-thick);
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      padding: 0 var(--space-sm);
      margin-top: 36px;
      font-size: 11px;
      color: var(--text-secondary);
      flex-shrink: 0;
      flex-wrap: nowrap;
      overflow-x: auto;
      overflow-y: hidden;
      position: relative;
    }

    .program-scale-left {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      flex: 1 1 auto;
      max-width: max(0px, calc(100% - 380px));
      overflow: hidden;
    }

    #program-scale-controls .program-display-controls {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateY(-50%);
      z-index: 3;
      white-space: nowrap;
    }

    .program-output-launch {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 3;
      white-space: nowrap;
    }

    #program-scale-controls .program-output-launch:hover,
    #program-scale-controls .program-output-launch:active,
    #program-scale-controls .program-output-launch.btn:hover,
    #program-scale-controls .program-output-launch.btn:active,
    #program-scale-controls .program-output-launch.ls-btn-go-live:hover {
      transform: translateY(-50%) !important;
    }

    #program-scale-bar {
      min-height: 30px;
      border-top: 1px solid var(--border);
      background: var(--material-thick);
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-sm);
      padding: 0 var(--space-sm);
      font-size: 11px;
      color: var(--text-secondary);
      flex-shrink: 0;
      flex-wrap: nowrap;
      overflow-x: auto;
      overflow-y: hidden;
    }

    .program-scale-btn {
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(255, 255, 255, 0.06);
      color: var(--text);
      border-radius: calc(var(--settings-control-radius) - 1px);
      height: 20px;
      min-width: 22px;
      cursor: pointer;
      font-weight: 600;
      line-height: 1;
      padding: 0 6px;
      transition: background var(--duration-instant) var(--ease-out);
    }
    .program-scale-btn:hover {
      background: rgba(255, 255, 255, 0.1);
    }

    #program-scale-slider {
      flex: 0 0 20%;
      min-width: 54px;
      max-width: 76px;
      accent-color: #4a86ff;
      margin: 0;
      height: 14px;
      -webkit-appearance: none;
      appearance: none;
      background: transparent;
    }

    #program-scale-slider::-webkit-slider-runnable-track {
      height: 3px;
      border-radius: 999px;
      background: #334155;
    }

    #program-scale-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 10px;
      height: 10px;
      margin-top: -3.5px;
      border-radius: 50%;
      border: 1px solid #7aa6ff;
      background: #dbeafe;
    }

    #program-scale-slider::-moz-range-track {
      height: 3px;
      border-radius: 999px;
      background: #334155;
    }

    #program-scale-slider::-moz-range-thumb {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 1px solid #7aa6ff;
      background: #dbeafe;
    }

    #program-scale-value {
      min-width: 36px;
      text-align: center;
      font-variant-numeric: tabular-nums;
      color: #e5edf5;
    }

    #program-scale-out,
    #program-scale-in {
      height: 18px;
      min-width: 18px;
      padding: 0;
      font-size: 11px;
    }

    #program-scale-fit {
      height: 18px;
      min-width: 28px;
      padding: 0 4px;
      font-size: 10px;
      font-weight: 600;
    }

    #program-scale-size {
      min-width: 92px;
      font-variant-numeric: tabular-nums;
      color: #8fa3bf;
      margin-left: 10px;
      text-align: right;
      white-space: nowrap;
    }

    .program-aspect-wrap {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-left: 0;
      flex-shrink: 0;
      white-space: nowrap;
    }

    .program-aspect-label {
      color: #8fa3bf;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.45px;
      white-space: nowrap;
    }

    .controls-media-inline {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-left: 8px;
      min-width: 0;
      flex: 0 0 auto;
      justify-content: flex-start;
    }

    .controls-media-inline .media-seek-wrap {
      position: relative;
      display: inline-flex;
      align-items: center;
    }

    .controls-media-inline #pgm-media-seek {
      width: 140px;
      max-width: 25vw;
      min-width: 80px;
      accent-color: #4a86ff;
      margin-left: 2px;
      -webkit-appearance: none;
      appearance: none;
      height: 4px;
      background: #334155;
      border-radius: 999px;
      outline: none;
      cursor: pointer;
    }
    .controls-media-inline #pgm-media-seek::-webkit-slider-runnable-track {
      height: 4px;
      border-radius: 999px;
      background: #334155;
    }
    .controls-media-inline #pgm-media-seek::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #dbeafe;
      border: 1px solid #7aa6ff;
      margin-top: -3px;
    }
    .controls-media-inline #pgm-media-seek::-moz-range-track {
      height: 4px;
      border-radius: 999px;
      background: #334155;
    }
    .controls-media-inline #pgm-media-seek::-moz-range-thumb {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #dbeafe;
      border: 1px solid #7aa6ff;
    }

    .controls-media-inline .media-time-label {
      position: absolute;
      right: 0;
      bottom: 100%;
      font-size: 9px;
      color: #aaa;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.02em;
      user-select: none;
      text-align: right;
      line-height: 1;
      pointer-events: none;
    }

    .controls-media-inline .program-scale-btn svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
      vertical-align: middle;
      pointer-events: none;
    }

    #program-display-frame {
      width: 100%;
      height: 100%;
      border: 0;
      background: transparent;
      position: relative;
      z-index: 2;
      overflow: hidden;
      clip-path: inset(0);
      will-change: transform;
      backface-visibility: hidden;
    }

    #source-compositor {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      z-index: 1;
      pointer-events: none;
      overflow: hidden;
      backface-visibility: hidden;
      background: #000;
    }
    /* ── Scene Transition Layers ── */
    .scene-tr-outgoing,
    .scene-tr-incoming {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      pointer-events: none;
      will-change: transform, opacity;
      backface-visibility: hidden;
    }
    .scene-tr-outgoing { z-index: 8; }
    .scene-tr-incoming { z-index: 7; }
    #source-compositor .src-layer {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      overflow: hidden;
    }
    #source-compositor .src-layer video {
      width: 100%; height: 100%;
      object-fit: contain;
    }
    #source-compositor .src-layer.media-source-layer video {
      object-fit: contain;
    }
    #source-compositor .src-layer img {
      width: 100%; height: 100%;
      object-fit: contain;
    }
    #source-compositor .src-layer .src-text-overlay {
      position: absolute;
      bottom: 8%; left: 50%;
      transform: translateX(-50%);
      color: #fff;
      font-size: 36px;
      font-weight: 700;
      text-align: center;
      text-shadow: 0 2px 8px rgba(0,0,0,.7);
      white-space: pre-wrap;
      max-width: 90%;
      pointer-events: none;
    }
    #source-compositor .src-layer .src-placeholder {
      width: 100%; height: 100%;
      display: flex; align-items: center; justify-content: center;
      color: rgba(255,255,255,.35);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    /* ======= Transform Overlay ======= */
    #transform-overlay {
      position: absolute; top: 0; left: 0;
      width: 100%; height: 100%;
      z-index: 10; pointer-events: none;
    }
    #transform-overlay.active { pointer-events: auto; }
    #transform-overlay.preview { pointer-events: none; }
    .xf-box {
      position: absolute;
      outline: 4px solid #ff1f1f;
      outline-offset: 0px;
      border: none;
      box-sizing: border-box;
      pointer-events: auto;
      cursor: move;
      box-shadow: 0 0 0 1px rgba(255, 31, 31, 0.45);
    }
    .xf-box::after {
      content: none;
    }
    .xf-box.preview {
      outline: 4px solid #218cff;
      box-shadow: 0 0 0 1px rgba(33,140,255,0.45);
      cursor: default;
    }
    .xf-box.preview .xf-handle,
    .xf-box.preview .xf-rot-stem,
    .xf-box.preview .xf-rot-dot,
    .xf-box.preview .xf-crop-handle,
    .xf-box.preview .xf-dims {
      display: none !important;
    }
    /* Resize handles */
    .xf-handle {
      position: absolute; width: 22px; height: 22px;
      background: #ff1f1f; border: 0;
      border-radius: 0; box-sizing: border-box;
      pointer-events: auto; z-index: 2;
    }
    .xf-handle.xf-tl { top: -11px; left: -11px; cursor: nwse-resize; }
    .xf-handle.xf-tr { top: -11px; right: -11px; cursor: nesw-resize; }
    .xf-handle.xf-bl { bottom: -11px; left: -11px; cursor: nesw-resize; }
    .xf-handle.xf-br { bottom: -11px; right: -11px; cursor: nwse-resize; }
    .xf-handle.xf-tm { top: -11px; left: 50%; margin-left: -11px; cursor: ns-resize; }
    .xf-handle.xf-bm { bottom: -11px; left: 50%; margin-left: -11px; cursor: ns-resize; }
    .xf-handle.xf-ml { top: 50%; left: -11px; margin-top: -11px; cursor: ew-resize; }
    .xf-handle.xf-mr { top: 50%; right: -11px; margin-top: -11px; cursor: ew-resize; }
    .xf-rot-stem {
      position: absolute;
      top: -26px;
      left: 50%;
      width: 2px;
      height: 20px;
      margin-left: -1px;
      background: #ff1f1f;
      pointer-events: none;
    }
    .xf-rot-dot {
      position: absolute;
      top: -42px;
      left: 50%;
      width: 16px;
      height: 16px;
      margin-left: -8px;
      border-radius: 50%;
      background: #ff1f1f;
      border: 1px solid #ff1f1f;
      pointer-events: auto;
      cursor: grab;
      z-index: 4;
    }
    /* Crop handles (shown with Alt key or crop mode) */
    .xf-crop-handle {
      position: absolute; width: 12px; height: 12px;
      background: #f59e0b; border: 1.5px solid #fff;
      border-radius: 1px; box-sizing: border-box;
      pointer-events: auto; z-index: 3;
      display: none;
    }
    .xf-box.crop-mode .xf-crop-handle { display: block; }
    .xf-crop-handle.xf-ct { top: -6px; left: 50%; margin-left: -6px; cursor: ns-resize; }
    .xf-crop-handle.xf-cb { bottom: -6px; left: 50%; margin-left: -6px; cursor: ns-resize; }
    .xf-crop-handle.xf-cl { top: 50%; left: -6px; margin-top: -6px; cursor: ew-resize; }
    .xf-crop-handle.xf-cr { top: 50%; right: -6px; margin-top: -6px; cursor: ew-resize; }
    /* Crop region visualization */
    .xf-crop-shade {
      position: absolute; background: rgba(0,0,0,0.5);
      pointer-events: none;
    }
    /* Source info label on transform box */
    .xf-label {
      position: absolute; top: -20px; left: 0;
      font-size: 10px; color: #ff1f1f; white-space: nowrap;
      font-weight: 600; pointer-events: none;
      display: none;
    }
    /* Dimension readout while dragging */
    .xf-dims {
      position: absolute; bottom: -18px; right: 0;
      font-size: 9px; color: rgba(255,255,255,0.6);
      font-family: monospace; pointer-events: none;
      display: none;
    }
    .xf-box.dragging .xf-dims { display: block; }
    /* Snap guide lines */
    .xf-snap-line {
      position: absolute; background: #f43f5e;
      pointer-events: none; z-index: 20;
      opacity: 0; transition: opacity 0.08s;
    }
    .xf-snap-line.visible { opacity: 1; }
    .xf-snap-line.horizontal { left: 0; width: 100%; height: 1px; }
    .xf-snap-line.vertical   { top: 0; height: 100%; width: 1px; }
    .xf-snap-line.center { background: #4a86ff; }
    /* Snap distance indicator dots */
    .xf-snap-dot {
      position: absolute; width: 5px; height: 5px;
      background: #f43f5e; border-radius: 50%;
      pointer-events: none; z-index: 21;
      opacity: 0; transition: opacity 0.08s;
    }
    .xf-snap-dot.visible { opacity: 1; }
    .xf-snap-dot.center { background: #4a86ff; }

    #lyric-editor {
      flex-grow: 1;
      background: transparent;
      color: var(--text);
      border: none;
      padding: var(--space-lg);
      font-size: 14px;
      line-height: 1.6;
      resize: none;
      outline: none;
      display: none;
      font-family: inherit;
      overflow: auto;
      letter-spacing: -0.01em;
    }
    
    #lyric-buttons {
      flex-grow: 1;
      padding: var(--space-md);
      overflow-y: auto;
      display: block;
      background: var(--bg-dark);
    }

    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1000;
      display: none;
      align-items: center;
      justify-content: center;
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      animation: fadeIn var(--duration-fast) var(--ease-out);
    }
    
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    .modal-content {
      background: var(--material-chrome);
      backdrop-filter: saturate(180%) blur(40px);
      -webkit-backdrop-filter: saturate(180%) blur(40px);
      width: 520px;
      max-width: 90vw;
      max-height: 90vh;
      padding: 0;
      border-radius: var(--radius-lg);
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 0.5px rgba(255, 255, 255, 0.06);
      overflow: hidden;
      animation: slideUp var(--duration-normal) var(--ease-spring);
      font-family: inherit;
    }
    
    @keyframes slideUp {
      from { transform: translateY(16px) scale(0.97); opacity: 0; }
      to { transform: translateY(0) scale(1); opacity: 1; }
    }
    
    .modal-scroll {
      max-height: 85vh;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,255,0.12) transparent;
    }
    
    .modal-scroll::-webkit-scrollbar {
      width: 6px;
    }
    
    .modal-scroll::-webkit-scrollbar-track {
      background: transparent;
    }
    
    .modal-scroll::-webkit-scrollbar-thumb {
      background: rgba(255,255,255,0.12);
      border-radius: 3px;
    }
    .modal-scroll::-webkit-scrollbar-thumb:hover {
      background: rgba(255,255,255,0.22);
    }

    .live-controls {
      padding: 10px var(--space-md);
      background: var(--material-thick);
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      border-top: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      gap: var(--space-sm);
      position: sticky;
      bottom: 0;
      z-index: 5;
      flex-shrink: 0;
    }

.btn {
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 600;
  background: var(--accent);
  color: white;
  font-size: 12px;
  transition: background var(--duration-instant) var(--ease-out),
              transform var(--duration-fast) var(--ease-spring);
  letter-spacing: -0.01em;
  text-transform: none;
  box-shadow: none;
  font-family: inherit;
}

.btn:hover {
  background: var(--accent-hover);
  transform: none;
  box-shadow: none;
}
    
    .btn:active {
      transform: scale(0.97);
    }
    
.btn-live {
  background: #b91c1c;
  border: 1px solid rgba(239, 68, 68, 0.3);
  box-shadow: none;
}

.btn-live:hover {
  background: #dc2626;
  box-shadow: none;
}

.btn-live.live-active {
  background: #16a34a;
  border-color: rgba(34, 197, 94, 0.4);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.2);
}
    
    .nav-row {
      display: grid;
      grid-template-columns: auto auto minmax(250px, 1fr) auto auto;
      gap: 6px;
    }
    
    .segmented-picker {
      display: flex;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: var(--settings-control-radius);
      padding: 2px;
      gap: 1px;
      min-width: 0;
      overflow: hidden;
      box-sizing: border-box;
      min-height: var(--settings-control-height);
      align-items: stretch;
    }
    
    .seg-btn {
      padding: 5px 10px;
      border: none;
      background: transparent;
      color: var(--text-secondary);
      font-size: 11px;
      cursor: pointer;
      font-weight: 500;
      transition: color var(--duration-instant) var(--ease-out),
                  background var(--duration-instant) var(--ease-out);
      border-radius: calc(var(--settings-control-radius) - 1px);
      flex: 1;
      min-width: 36px;
      min-height: calc(var(--settings-control-height) - 4px);
      box-sizing: border-box;
    }

    .seg-btn.align-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0;
      padding: 6px 8px;
    }

    .seg-btn.align-icon svg {
      width: 18px;
      height: 18px;
      stroke: var(--text-secondary);
      stroke-width: 2;
      fill: none;
      opacity: 0.9;
    }

    .seg-btn.align-icon.active svg {
      stroke: #fff;
      opacity: 1;
    }
    
    .seg-btn.active {
      background: var(--accent);
      color: #fff;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }
    
    .seg-btn:disabled {
      opacity: 0.3;
      cursor: not-allowed;
    }

    .main-panel-stacks {
      display: grid !important;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      align-items: stretch;
      column-gap: 8px;
      row-gap: 6px;
      gap: 5px !important;
      padding-top: 11px !important;
    }

    .main-panel-stacks > div {
      width: 100%;
      height: 100%;
      flex: none !important;
      min-width: 0 !important;
      align-items: stretch !important;
      gap: 2px !important;
    }

    .main-panel-stacks > div > span {
      font-size: 10px !important;
      font-weight: 500 !important;
      line-height: 1.1;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center;
      gap: 3px !important;
      color: var(--text-secondary) !important;
    }

    @media (max-width: 980px) {
      .main-panel-stacks {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }

    .main-panel-stacks .segmented-picker {
      min-height: 28px;
      padding: 2px;
      border-radius: var(--settings-control-radius);
      gap: 1px;
    }

    .main-panel-stacks .seg-btn {
      min-height: 24px;
      padding: 3px 8px;
      font-size: 10px;
      border-radius: calc(var(--settings-control-radius) - 1px);
    }

    .main-panel-stacks #line-picker,
    .main-panel-stacks #ratio-picker,
    .main-panel-stacks #bg-mode-picker,
    .main-panel-stacks #bg-type-picker {
      grid-auto-rows: minmax(24px, auto);
    }

    .main-panel-stacks #footer-bible-version-btn,
    .main-panel-stacks #footer-auto-lyrics-btn {
      min-height: 24px;
      padding: 3px 8px !important;
      font-size: 10px !important;
      line-height: 1.1 !important;
    }

    .main-panel-stacks #bg-color-wrap {
      width: 31px !important;
    }

    .workspace-font-size-control {
      height: 30px;
      display: inline-grid;
      grid-template-columns: 26px minmax(48px, auto) 26px;
      align-items: stretch;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.06);
      color: white;
      box-sizing: border-box;
    }

    .workspace-font-size-step,
    .workspace-font-size-value {
      border: 0;
      border-right: 1px solid rgba(255, 255, 255, 0.08);
      background: transparent;
      color: inherit;
      font-family: inherit;
      line-height: 1;
      cursor: pointer;
    }

    .workspace-font-size-step {
      font-size: 15px;
      font-weight: 800;
      padding: 0;
    }

    .workspace-font-size-value {
      min-width: 48px;
      padding: 0 8px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0;
      white-space: nowrap;
    }

    .workspace-font-size-step:last-child {
      border-right: 0;
    }

    .workspace-font-size-step:hover,
    .workspace-font-size-value:hover {
      background: rgba(255, 255, 255, 0.08);
    }

    .section-block {
      margin-bottom: var(--space-md);
      border-radius: var(--radius-md);
      padding: var(--space-md);
      border-left: 3px solid var(--accent);
      background: rgba(255, 255, 255, 0.03);
      box-shadow: none;
    }
    
    .section-label {
      display: block;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 10px;
      color: var(--text-tertiary);
      letter-spacing: 0.5px;
    }

    .lyric-row {
      display: flex;
      gap: 10px;
      align-items: stretch;
      margin-bottom: 6px;
    }
    
    .lyric-btn {
      flex: 1;
      width: 100%;
      padding: 12px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      color: white;
      text-align: left;
      cursor: pointer;
      border-radius: var(--radius-sm);
      font-size: 13px;
      margin: 0;
      transition: background var(--duration-instant) var(--ease-out),
                  border-color var(--duration-instant) var(--ease-out),
                  transform var(--duration-fast) var(--ease-spring);
      position: relative;
      line-height: 1.5;
      font-family: inherit;
    }
    
    .lyric-btn:hover {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.15);
      transform: none;
    }
    
    .lyric-btn:active {
      transform: scale(0.98);
    }
    
    .lyric-btn.active {
      border-color: var(--accent);
      background: rgba(10, 132, 255, 0.12);
      box-shadow: 0 0 0 1px rgba(10, 132, 255, 0.2);
    }
    
    .live-indicator {
      position: absolute;
      right: 10px;
      top: 10px;
      font-size: 9px;
      color: var(--accent);
      font-weight: 700;
      background: rgba(10, 132, 255, 0.15);
      padding: 2px 8px;
      border-radius: 980px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .quick-add {
      width: 34px;
      min-width: 34px;
      border-radius: var(--radius-sm);
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.04);
      color: var(--text-secondary);
      cursor: pointer;
      font-weight: 600;
      font-size: 15px;
      transition: background var(--duration-instant) var(--ease-out),
                  transform var(--duration-fast) var(--ease-spring);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .quick-add:hover {
      border-color: rgba(255, 255, 255, 0.15);
      background: rgba(255, 255, 255, 0.08);
      color: var(--text);
      transform: none;
    }
    .quick-add:active {
      transform: scale(0.92);
    }

    .mini-toggle {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      font-size: 12px;
      color: var(--text-secondary);
      user-select: none;
      -webkit-user-select: none;
      padding: 4px 0;
      transition: color var(--duration-instant) var(--ease-out);
    }
    
    .mini-toggle:hover {
      color: var(--text);
    }
    
    .mini-toggle input {
      width: 15px;
      height: 15px;
      cursor: pointer;
      accent-color: var(--accent);
      transform: translateY(0);
    }

    .remote-show-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 12px 14px;
      border-radius: var(--radius-md);
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.03);
    }

    .remote-show-label {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .remote-show-icon {
      width: 34px;
      height: 34px;
      border-radius: var(--radius-sm);
      background: rgba(10, 132, 255, 0.12);
      color: var(--accent);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .remote-show-icon svg {
      width: 18px;
      height: 18px;
      fill: currentColor;
    }

    .remote-show-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
    }

    .remote-show-sub {
      font-size: 11px;
      color: var(--text-secondary);
      margin-top: 2px;
    }

    .remote-show-controls {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .toggle-switch {
      position: relative;
      display: inline-block;
      width: 46px;
      height: 24px;
    }

    .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .toggle-slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: #2b313b;
      border-radius: 999px;
      box-shadow: inset 0 0 0 1px var(--border);
      transition: background 0.2s ease, box-shadow 0.2s ease;
    }

    .toggle-slider::before {
      content: '';
      position: absolute;
      height: 18px;
      width: 18px;
      left: 3px;
      top: 3px;
      background: #f2f4f8;
      border-radius: 50%;
      transition: transform 0.2s ease;
    }

    .toggle-switch input:checked + .toggle-slider {
      background: linear-gradient(135deg, var(--accent), var(--accent-light));
      box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.4);
    }

    .toggle-switch input:checked + .toggle-slider::before {
      transform: translateX(22px);
    }

    .remote-show-modal {
      width: 520px;
    }

    .remote-show-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
    }

    .remote-show-header h3 {
      margin: 0;
      font-size: 16px;
      color: var(--text);
    }

    .remote-show-body {
      padding: 18px 20px 22px;
      display: grid;
      gap: 16px;
      max-height: calc(90vh - 72px);
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: var(--accent) var(--bg-dark);
    }

    .remote-show-body::-webkit-scrollbar {
      width: 8px;
    }

    .remote-show-body::-webkit-scrollbar-track {
      background: var(--bg-dark);
    }

    .remote-show-body::-webkit-scrollbar-thumb {
      background: linear-gradient(var(--accent), var(--accent-light));
      border-radius: 4px;
    }

    .remote-show-copy label {
      display: block;
      font-size: 11px;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 8px;
    }

    .remote-show-url-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .remote-show-url-row .settings-input {
      flex: 1;
    }

    .remote-show-qr label {
      display: block;
      font-size: 11px;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 8px;
    }

    .remote-show-qr-box {
      width: 220px;
      height: 220px;
      border-radius: 14px;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      position: relative;
    }

    .remote-show-qr-box img {
      width: 200px;
      height: 200px;
      display: block;
    }

    .remote-show-qr-box.is-empty {
      background: rgba(255, 255, 255, 0.06);
      border: 1px dashed var(--border);
      color: var(--text-secondary);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.8px;
    }

    .remote-show-qr-box.is-empty img {
      display: none;
    }

    .remote-show-qr-box.is-empty::after {
      content: 'QR unavailable';
    }

    .remote-show-warning {
      display: none;
      font-size: 11px;
      color: var(--warning);
      background: rgba(245, 158, 11, 0.12);
      border: 1px solid rgba(245, 158, 11, 0.35);
      border-radius: 8px;
      padding: 8px 10px;
    }

    .remote-show-detected {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.04);
      font-size: 11px;
    }

    .remote-show-detected-label {
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.8px;
      font-weight: 700;
    }

    .remote-show-detected-value {
      color: var(--text);
      font-weight: 700;
      margin-left: auto;
    }

    .bg-mode-label {
      padding: 2px 6px;
      border: 1px solid var(--border);
      border-radius: 6px;
      font-weight: 700;
      letter-spacing: 0.4px;
      cursor: pointer;
      user-select: none;
    }
    
    .bg-mode-label.active {
      border-color: var(--accent);
      color: var(--accent-light);
    }
    
    .bg-color-wrap {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    
    .bg-color-wrap input[type="color"] {
      width: 30px;
      height: 28px;
      border: 1px solid var(--border);
      background: transparent;
      padding: 0;
      cursor: pointer;
      border-radius: 6px;
    }
    
    .bg-color-split {
      display: none;
      align-items: center;
    }
    
    .bg-color-split input[type="color"] {
      width: 15px;
      border-radius: 0;
    }
    
    .bg-color-split .bg-color-left {
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px;
      border-right-width: 0;
    }
    
    .bg-color-split .bg-color-right {
      border-top-right-radius: 6px;
      border-bottom-right-radius: 6px;
      border-left-width: 0;
    }

    .color-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      align-items: center;
    }
    
    .color-row input[type="color"] {
      width: 48px;
      height: 48px;
      border: 2px solid var(--border);
      background: transparent;
      padding: 0;
      cursor: pointer;
      border-radius: 10px;
      transition: all 0.3s ease;
    }
    
    .color-row input[type="color"]:hover {
      border-color: var(--accent);
      transform: scale(1.05);
    }
    
    .color-row input[type="text"] {
      background: #0d1117;
      border: 2px solid var(--border);
      color: var(--text);
      padding: 10px 12px;
      border-radius: 8px;
      font-size: 12px;
      font-family: 'Consolas', 'Monaco', monospace;
      transition: all 0.3s ease;
    }
    
    .color-row input[type="text"]:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.2);
    }

    .position-offset-group {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: center;
      gap: 14px;
      width: 100%;
    }

    .position-offset-row {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 8px;
      align-items: center;
      min-width: 0;
    }

    .position-offset-axis {
      font-size: 12px;
      font-weight: 700;
      color: var(--text-secondary);
      min-width: 22px;
      text-align: right;
    }

    .position-offset-control {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 24px;
      gap: 4px;
      align-items: stretch;
      min-width: 0;
    }

    .position-offset-input-wrap {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      background: var(--panel-content-bg);
      border: 1px solid var(--border);
      border-radius: 4px;
      min-height: var(--settings-control-height);
      overflow: hidden;
      transition: border-color 0.18s ease, box-shadow 0.18s ease;
      box-sizing: border-box;
    }

    .position-offset-input {
      width: 100%;
      min-width: 0;
      background: transparent;
      border: 0;
      color: var(--text);
      padding: 0 10px;
      font-size: 12px;
      font-weight: 700;
      font-family: inherit;
      text-align: right;
      outline: none;
      appearance: textfield;
      -moz-appearance: textfield;
      box-shadow: none !important;
      outline: none !important;
    }

    .position-offset-input::-webkit-outer-spin-button,
    .position-offset-input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    .position-offset-input:focus,
    .position-offset-input:focus-visible,
    .position-offset-input:active {
      outline: none !important;
      box-shadow: none !important;
      border: 0 !important;
    }

    .position-offset-input-wrap:focus-within {
      border-color: color-mix(in srgb, var(--accent) 60%, var(--border) 40%);
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent 70%);
    }

    .position-offset-unit {
      padding: 0 10px 0 2px;
      font-size: 11px;
      font-weight: 700;
      color: var(--text-secondary);
      white-space: nowrap;
    }

    .position-offset-stepper {
      display: grid;
      grid-template-rows: 1fr 1fr;
      gap: 1px;
      align-self: center;
      width: 24px;
      background: var(--panel-content-bg);
      border: 1px solid color-mix(in srgb, var(--border) 85%, transparent 15%);
      border-radius: 6px;
      padding: 1px;
      overflow: hidden;
    }

    .position-offset-stepper button {
      width: 100%;
      min-width: 0;
      min-height: 14px;
      padding: 0;
      border-radius: 0;
      border: 0;
      background: var(--panel-content-bg);
      color: var(--text);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      font-size: 11px;
      font-weight: 700;
      transition: background 0.16s ease, color 0.16s ease;
    }

    .position-offset-stepper button svg {
      display: block;
      width: 12px;
      height: 8px;
      color: currentColor;
      pointer-events: none;
    }

    .position-offset-stepper button:hover {
      background: color-mix(in srgb, var(--accent) 24%, var(--bg-panel) 76%);
      color: var(--text);
    }

    .position-offset-stepper button:active {
      background: color-mix(in srgb, var(--accent) 34%, var(--bg-panel) 66%);
    }

    .position-offset-stepper button:focus,
    .position-offset-stepper button:focus-visible {
      outline: none;
      box-shadow: none;
    }

    .numeric-stepper-wrap {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 24px;
      gap: 4px;
      align-items: stretch;
      min-width: 0;
    }

    .numeric-stepper-input-wrap {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      background: var(--panel-content-bg);
      border: 1px solid var(--border);
      border-radius: 4px;
      min-height: var(--settings-control-height);
      overflow: hidden;
      transition: border-color 0.18s ease, box-shadow 0.18s ease;
      box-sizing: border-box;
    }

    .numeric-stepper-input-wrap:focus-within {
      border-color: color-mix(in srgb, var(--accent) 60%, var(--border) 40%);
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent 70%);
    }

    .numeric-stepper-input {
      width: 100%;
      min-width: 0;
      background: transparent;
      border: 0;
      color: var(--text);
      padding: 0 10px;
      font-size: 12px;
      font-weight: 700;
      font-family: inherit;
      text-align: right;
      outline: none;
      appearance: textfield;
      -moz-appearance: textfield;
      box-shadow: none !important;
    }

    .numeric-stepper-input::-webkit-outer-spin-button,
    .numeric-stepper-input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    .numeric-stepper-input:focus,
    .numeric-stepper-input:focus-visible,
    .numeric-stepper-input:active {
      outline: none !important;
      box-shadow: none !important;
      border: 0 !important;
    }

    .numeric-stepper-unit {
      padding: 0 10px 0 2px;
      font-size: 11px;
      font-weight: 700;
      color: var(--text-secondary);
      white-space: nowrap;
    }

    .numeric-stepper-buttons {
      display: grid;
      grid-template-rows: 1fr 1fr;
      gap: 1px;
      align-self: center;
      width: 24px;
      background: var(--panel-content-bg);
      border: 1px solid color-mix(in srgb, var(--border) 85%, transparent 15%);
      border-radius: 6px;
      padding: 1px;
      overflow: hidden;
    }

    .numeric-stepper-buttons button {
      width: 100%;
      min-width: 0;
      min-height: 14px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: var(--panel-content-bg);
      color: var(--text);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.16s ease, color 0.16s ease;
    }

    .numeric-stepper-buttons button svg {
      display: block;
      width: 12px;
      height: 8px;
      color: currentColor;
      pointer-events: none;
    }

    .numeric-stepper-buttons button:hover {
      background: color-mix(in srgb, var(--accent) 24%, var(--bg-panel) 76%);
      color: var(--text);
    }

    .numeric-stepper-buttons button:active {
      background: color-mix(in srgb, var(--accent) 34%, var(--bg-panel) 66%);
    }

    .numeric-stepper-buttons button:focus,
    .numeric-stepper-buttons button:focus-visible {
      outline: none;
      box-shadow: none;
    }

    @media (max-width: 760px) {
      .position-offset-group {
        grid-template-columns: 1fr;
      }

      .settings-row.compact-three {
        grid-template-columns: 1fr;
      }
    }

    .paired-stepper-group {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      width: 100%;
      align-items: start;
    }

    .paired-stepper-item {
      min-width: 0;
    }
    
    /* Settings Modal: Two-pane sidebar + content layout */
    .sm-body {
      display: flex;
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }
    .sm-sidebar {
      width: 220px;
      min-width: 220px;
      background: var(--bg-panel, #1e1e2e);
      border-right: 1px solid rgba(255,255,255,0.08);
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      padding: 6px 0;
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,255,0.08) transparent;
    }
    .sm-sidebar::-webkit-scrollbar { width: 4px; }
    .sm-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
    .sm-sidebar-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 7px 14px;
      cursor: pointer;
      font-size: 13px;
      color: var(--text);
      white-space: nowrap;
      transition: background 0.1s, color 0.1s;
      border-radius: 0;
      position: relative;
    }
    .sm-sidebar-item:hover {
      background: rgba(255,255,255,0.05);
      color: var(--text);
    }
    .sm-sidebar-item.active {
      color: var(--text);
      background: rgba(74,134,255,0.12);
    }
    .sm-sidebar-item.active::before {
      content: '';
      position: absolute;
      left: 0; top: 4px; bottom: 4px; width: 2px;
      background: rgba(74,134,255,0.8);
      border-radius: 0 2px 2px 0;
    }
    .sm-sidebar-item .cat-icon {
      width: 16px;
      height: 16px;
      opacity: 0.6;
      flex-shrink: 0;
    }
    .sm-sidebar-item:hover .cat-icon,
    .sm-sidebar-item.active .cat-icon { opacity: 1; }
    .sm-content {
      flex: 1;
      overflow-y: auto;
      background: var(--bg-panel, #1e1e2e);
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,255,0.10) transparent;
    }
    .sm-content::-webkit-scrollbar { width: 6px; }
    .sm-content::-webkit-scrollbar-track { background: transparent; }
    .sm-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 4px; }
    .sm-tab-panel {
      display: none;
      padding: 0;
    }
    .sm-tab-panel.active {
      display: block;
    }
    .sm-panel-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
      padding: 14px 18px 8px;
      letter-spacing: 0.2px;
    }
    .sm-tab-panel .settings-category-content {
      padding: 8px 18px 16px;
    }

    /* Clean Settings Design (VS Code-inspired) */
    .settings-category {
      margin-bottom: 2px;
      padding: 0;
      border-radius: 0;
      overflow: hidden;
      background: transparent;
      border: none;
      box-shadow: none;
      transition: none;
    }
    
    .settings-category.collapsed .settings-category-content {
      display: none;
    }
    
    .settings-category:hover {
      border-color: transparent;
      box-shadow: none;
      transform: none;
    }
    
    .settings-category-title {
      font-size: 13px;
      font-weight: 400;
      text-transform: none;
      color: var(--text);
      margin: 0;
      padding: 6px 18px;
      background: transparent;
      display: flex;
      align-items: center;
      gap: 10px;
      letter-spacing: 0;
      border-bottom: none;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      transition: background 0.1s;
      white-space: nowrap;
    }
    
    .settings-category-title:hover {
      background: rgba(74,134,255,0.15);
      color: var(--text);
    }
    
    .settings-category-title .cat-icon {
      width: 16px;
      height: 16px;
      opacity: 0.7;
      flex-shrink: 0;
    }
    
    .settings-category-title:hover .cat-icon {
      opacity: 1;
    }

    #settingsModal .modal-content {
      transform: translate(var(--settings-drag-x, 0px), var(--settings-drag-y, 0px));
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    }
    .settings-modal-title {
      cursor: default;
      position: sticky;
      top: 0;
      z-index: 5;
      font-size: 13px;
      font-weight: 400;
      color: var(--text);
      padding: 8px 18px;
      background: var(--bg-panel, #1e1e2e);
      border-bottom: 1px solid rgba(255,255,255,0.08);
      letter-spacing: 0;
      text-transform: none;
    }
    /* Keep General Settings surfaces identical to the activity-bar settings window background */
    #settingsModal .sm-sidebar,
    #settingsModal .sm-content,
    #settingsModal .settings-modal-title {
      background: var(--bg-panel, #1e1e2e) !important;
    }
    .settings-modal-title .cat-icon {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      opacity: 0.7;
    }
    .settings-close-btn {
      margin-left: auto;
      margin-right: 4px;
      width: 30px;
      height: 30px;
      padding: 0;
      background: transparent;
      color: var(--text-secondary);
      font-size: 18px;
      border: none;
      cursor: pointer;
      border-radius: 8px;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: color 0.16s ease, background 0.16s ease;
    }
    .settings-close-btn:hover {
      color: var(--text);
      background: color-mix(in srgb, var(--accent, #0a84ff) 12%, transparent);
    }
    .settings-close-btn:focus-visible {
      outline: 2px solid color-mix(in srgb, var(--accent, #0a84ff) 55%, transparent);
      outline-offset: 1px;
    }

    .settings-modal-title::after {
      content: none;
      display: none;
    }
    
    .settings-modal-title:hover {
      background: transparent;
      color: var(--text);
    }
    .settings-modal-title:active {
      cursor: default;
    }
    
    .settings-category-title::before {
      display: none;
    }
    
    .settings-category-title::after {
      content: '\203A';
      margin-left: auto;
      font-size: 16px;
      line-height: 1;
      color: #6b7a94;
      transition: transform 0.15s ease;
      transform: rotate(90deg);
    }
    
    .settings-category-title:hover::after {
      color: #fff;
    }
    
    .settings-category.collapsed .settings-category-title::after {
      transform: rotate(0deg);
    }
    
    .settings-category-content {
      padding: 8px 18px 12px;
      background: transparent;
      backdrop-filter: none;
    }
    
    .settings-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 8px;
      align-items: end;
    }

    :root {
      --settings-control-height: 36px;
      --settings-control-radius: 4px;
    }

    .settings-row.compact-three {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .settings-row.keep-two-cols {
      grid-template-columns: 1fr 1fr;
    }

    .settings-row.compact-three .settings-field {
      min-width: 0;
    }

    .settings-row.compact-three .seg-btn.align-icon {
      padding: 5px 4px;
      min-width: 30px;
    }

    .settings-row.compact-three .seg-btn.align-icon svg {
      width: 16px;
      height: 16px;
    }
    
    .settings-field {
      margin-bottom: 6px;
      position: relative;
    }
    
    .settings-label {
      font-size: 13px;
      color: var(--text);
      margin-bottom: 6px;
      display: block;
      font-weight: 600;
      text-transform: none;
      letter-spacing: 0.3px;
      position: relative;
      padding-left: 0;
    }
    
    .settings-label::before {
      display: none;
    }
    
    .settings-input, .settings-select {
      width: 100%;
      padding: 7px 10px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.10);
      color: var(--text);
      border-radius: var(--settings-control-radius);
      font-size: 13px;
      transition: border-color 0.15s, background 0.15s;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      min-height: var(--settings-control-height);
      box-sizing: border-box;
    }
    
    .settings-input:focus, .settings-select:focus {
      border-color: rgba(74,134,255,0.5);
      outline: none;
      box-shadow: 0 0 0 2px rgba(74,134,255,0.15);
      background: rgba(255,255,255,0.07);
    }
    
    .settings-input:hover, .settings-select:hover {
      border-color: rgba(255,255,255,0.18);
    }

    .feedback-card {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 18px;
      border-radius: 18px;
      background: color-mix(in srgb, var(--bg-panel) 88%, #243145 12%);
      border: 1px solid color-mix(in srgb, var(--border) 82%, transparent 18%);
      box-shadow: 0 18px 40px rgba(0,0,0,0.28);
    }

    .feedback-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .feedback-card-title {
      font-size: 17px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.01em;
    }

    .feedback-textarea {
      width: min(100%, 760px);
      align-self: center;
      min-height: 120px;
      resize: vertical;
      border-radius: 16px;
      border: 1px solid color-mix(in srgb, var(--border) 88%, transparent 12%);
      background: color-mix(in srgb, var(--panel-content-bg) 80%, #455066 20%);
      color: var(--text);
      padding: 14px 16px;
      font: inherit;
      font-size: 15px;
      line-height: 1.5;
      box-sizing: border-box;
      outline: none;
      transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
    }

    .feedback-textarea::placeholder {
      color: color-mix(in srgb, var(--text-secondary) 78%, transparent 22%);
    }

    .feedback-textarea:focus {
      border-color: color-mix(in srgb, var(--accent) 56%, var(--border) 44%);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
    }

    .feedback-note {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      padding: 12px 14px;
      border-radius: 14px;
      background: color-mix(in srgb, var(--accent) 14%, #22365b 86%);
      color: #9fc8ff;
      font-size: 13px;
      line-height: 1.45;
    }

    .feedback-note span {
      flex: 1 1 260px;
      min-width: 0;
    }

    .feedback-note a {
      flex: 0 0 auto;
      white-space: nowrap;
      align-self: center;
    }

    .feedback-note a {
      color: inherit;
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .feedback-status {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 0;
      font-size: 12px;
      color: var(--text-secondary);
    }

    .feedback-status:empty {
      display: none;
    }

    .feedback-status::before {
      content: '';
      width: 14px;
      height: 14px;
      border-radius: 999px;
      border: 1px solid transparent;
      opacity: 0;
      transform: scale(0.6);
      transition: opacity 180ms ease, transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
      flex: 0 0 14px;
    }

    .feedback-status.error {
      color: #ff8b8b;
    }

    .feedback-success-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 32px;
      border-radius: 18px;
      background:
        radial-gradient(circle at top, rgba(111, 206, 141, 0.18), transparent 38%),
        linear-gradient(180deg, rgba(16, 27, 23, 0.96), rgba(10, 19, 17, 0.98));
      backdrop-filter: blur(8px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 220ms ease;
      z-index: 2;
    }

    .feedback-success-overlay.visible {
      opacity: 1;
    }

    .feedback-success-panel {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      width: 100%;
      height: 100%;
      text-align: center;
    }

    .feedback-success-icon {
      width: 58px;
      height: 58px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: radial-gradient(circle at 30% 30%, rgba(154, 255, 184, 0.34), rgba(76, 175, 80, 0.16));
      border: 1px solid rgba(111, 206, 141, 0.7);
      color: #bff4cd;
      font-size: 28px;
      font-weight: 800;
      line-height: 1;
      transform: scale(0.88);
      animation: feedbackSuccessPop 260ms ease forwards;
    }

    .feedback-success-message {
      color: #d6f7e0;
      font-size: 18px;
      font-weight: 700;
      letter-spacing: -0.01em;
    }

    .feedback-success-subtext {
      color: rgba(214, 247, 224, 0.76);
      font-size: 13px;
      line-height: 1.45;
      max-width: 280px;
    }

    @keyframes feedbackSuccessPop {
      0% {
        transform: scale(0.72);
        opacity: 0.4;
      }
      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

    .feedback-actions {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      align-items: stretch;
      gap: 10px;
    }

    .feedback-action-group {
      display: flex;
      align-items: stretch;
    }

    .feedback-actions .btn {
      width: 100%;
      min-height: 42px;
      border-radius: 12px;
      font-weight: 700;
      font-size: 13px;
    }

    .feedback-btn-outline {
      border: 1px solid color-mix(in srgb, var(--accent) 75%, transparent);
      background: transparent;
      color: color-mix(in srgb, var(--accent-light, var(--accent)) 82%, white 18%);
    }

    .feedback-btn-secondary {
      border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
      background: color-mix(in srgb, var(--panel-content-bg) 78%, #405070 22%);
      color: var(--text);
    }

    .feedback-btn-primary {
      background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 78%, #b8c1ff 22%), color-mix(in srgb, var(--accent-light, var(--accent)) 70%, white 30%));
      color: #fff;
      border: 1px solid color-mix(in srgb, var(--accent-light, var(--accent)) 55%, transparent);
    }

    @media (max-width: 760px) {
      .feedback-card {
        padding: 14px;
        border-radius: 16px;
      }

      .feedback-textarea {
        width: 100%;
        min-height: 110px;
        padding: 12px 14px;
      }

      .feedback-actions {
        grid-template-columns: 1fr;
        align-items: stretch;
      }

      .feedback-action-group {
        width: 100%;
        justify-content: stretch;
      }

      .feedback-btn-outline,
      .feedback-actions .btn,
      .feedback-btn-primary {
        width: 100%;
      }
    }

    .tutorial-shell {
      display: flex;
      flex-direction: column;
      gap: 14px;
      min-height: 0;
      height: calc(100vh - 230px);
      max-height: 760px;
    }

    .tutorial-topbar {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 2;
    }

    .tutorial-nav-shell {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 2px;
      border-radius: 16px;
      padding: 5px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02)),
        linear-gradient(135deg, #202b3f, #171f2f);
      border: 1px solid rgba(255,255,255,0.14);
      box-shadow: 0 14px 30px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.12);
    }

    .tutorial-nav-indicator {
      position: absolute;
      left: 5px;
      top: 5px;
      width: 110px;
      height: calc(100% - 10px);
      border-radius: 12px;
      background:
        linear-gradient(145deg, color-mix(in srgb, var(--accent-light, var(--accent)) 80%, #ffffff 20%), color-mix(in srgb, var(--accent) 85%, #8ebeff 15%));
      border: 1px solid color-mix(in srgb, var(--accent) 75%, rgba(255,255,255,0.28));
      box-shadow: 0 10px 20px rgba(43, 111, 255, 0.28), inset 0 1px 0 rgba(255,255,255,0.34);
      transition: transform 260ms cubic-bezier(0.2, 0.9, 0.2, 1), width 240ms cubic-bezier(0.2, 0.9, 0.2, 1);
      pointer-events: none;
    }

    .tutorial-nav-btn {
      position: relative;
      z-index: 2;
      border: 0;
      background: transparent;
      color: #b8c3d9;
      border-radius: 12px;
      min-height: 40px;
      padding: 8px 20px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.015em;
      cursor: pointer;
      transition: color 170ms ease;
      white-space: nowrap;
    }

    .tutorial-nav-btn:hover {
      color: #ebf1ff;
    }

    .tutorial-nav-btn.active {
      color: #ffffff;
    }

    .tutorial-banner {
      border: 1px solid color-mix(in srgb, var(--border) 80%, transparent 20%);
      border-radius: 14px;
      padding: 12px 14px;
      background:
        radial-gradient(circle at right top, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 46%),
        color-mix(in srgb, var(--panel-content-bg) 78%, #2d3b52 22%);
    }

    .tutorial-banner-title {
      color: var(--text);
      font-size: 15px;
      font-weight: 700;
      line-height: 1.35;
      margin-bottom: 4px;
    }

    .tutorial-banner-subtitle {
      color: var(--text-secondary);
      font-size: 12px;
      line-height: 1.45;
    }

    .tutorial-scroll-wrap {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      padding-right: 2px;
    }

    .tutorial-status {
      font-size: 12px;
      color: var(--text-secondary);
      margin: 2px 2px 10px;
      min-height: 18px;
    }

    .tutorial-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      padding-bottom: 6px;
    }

    .tutorial-empty-state {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 86px;
      padding: 16px;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      background: rgba(255,255,255,0.035);
    }

    .tutorial-empty-title {
      color: #a6adb9;
      font-size: 12px;
      line-height: 1.45;
    }

    .tutorial-empty-link {
      margin-left: 0;
      flex-shrink: 0;
    }

    .tutorial-card {
      border: 1px solid color-mix(in srgb, var(--border) 78%, transparent 22%);
      border-radius: 9px;
      overflow: hidden;
      background: #1b1d22;
      box-shadow: 0 12px 28px rgba(0,0,0,0.22);
      display: flex;
      flex-direction: column;
      width: 100%;
      min-height: 380px;
    }

    .tutorial-thumb-wrap {
      position: relative;
      width: 100%;
      height: 198px;
      overflow: hidden;
      background: #121722;
      cursor: pointer;
    }

    .tutorial-thumb {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 220ms ease;
    }

    .tutorial-card:hover .tutorial-thumb {
      transform: scale(1.03);
    }

    .tutorial-play-btn {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 52px;
      height: 52px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.28);
      background: rgba(8, 13, 22, 0.68);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 800;
      pointer-events: none;
      backdrop-filter: blur(2px);
    }

    .tutorial-tag {
      position: absolute;
      top: 10px;
      left: 10px;
      border-radius: 4px;
      padding: 5px 8px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.02em;
      color: #dbe4f6;
      background: rgba(16, 20, 28, 0.86);
      border: 1px solid rgba(255,255,255,0.12);
      text-transform: uppercase;
    }

    .tutorial-open-chip {
      position: absolute;
      right: 10px;
      top: 10px;
      border-radius: 4px;
      border: 1px solid rgba(255,255,255,0.18);
      background: rgba(16, 20, 28, 0.86);
      color: #d8e3f8;
      padding: 4px 8px;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
    }

    .tutorial-card-body {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 11px 12px 8px;
      flex: 1 1 auto;
      background: #23252b;
      border-top: 1px solid rgba(255,255,255,0.06);
    }

    .tutorial-channel-row {
      display: flex;
      align-items: center;
      gap: 9px;
      color: #acb2c0;
    }

    .tutorial-channel-avatar,
    .tutorial-channel-fallback {
      width: 30px;
      height: 30px;
      border-radius: 999px;
      flex: 0 0 30px;
    }

    .tutorial-channel-avatar {
      object-fit: cover;
      border: 1px solid rgba(255,255,255,0.2);
      background: #11141d;
    }

    .tutorial-channel-fallback {
      display: none;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      color: #dde5f7;
      background: linear-gradient(135deg, #3d4c67, #1e293f);
      border: 1px solid rgba(255,255,255,0.18);
    }

    .tutorial-channel-meta {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 7px;
      flex-wrap: wrap;
      font-size: 12px;
    }

    .tutorial-channel-name {
      color: #d4d9e2;
      font-weight: 600;
    }

    .tutorial-channel-date {
      color: #939aa9;
      font-weight: 500;
    }

    .tutorial-card-title {
      color: #eef2f9;
      font-size: 17px;
      font-weight: 700;
      line-height: 1.33;
      min-height: 46px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .tutorial-card-desc {
      color: #949cab;
      font-size: 12px;
      line-height: 1.45;
      min-height: 34px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .tutorial-stats-row {
      margin-top: auto;
      display: flex;
      gap: 8px;
      align-items: center;
      border-top: 1px solid rgba(255,255,255,0.06);
      padding-top: 10px;
      color: #a6adb9;
      font-size: 11px;
    }

    .tutorial-stat {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      min-width: 0;
      color: #8f96a6;
      font-weight: 600;
    }

    .tutorial-stat-icon {
      font-size: 12px;
      opacity: 0.9;
      line-height: 1;
    }

    .tutorial-stat-icon-like svg,
    .tutorial-stat-icon-comment svg,
    .tutorial-stat-icon-eye svg {
      display: block;
      width: 17px;
      height: 17px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .tutorial-social-link {
      margin-left: auto;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.05);
      color: #d0d7e6;
      border-radius: 6px;
      min-height: 25px;
      padding: 0 8px;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
    }

    .tutorial-social-link:hover,
    .tutorial-open-chip:hover {
      border-color: rgba(255,255,255,0.3);
      color: #fff;
    }

    .tutorial-player-overlay {
      position: fixed;
      inset: 0;
      z-index: 1100;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(6, 10, 16, 0.76);
      backdrop-filter: blur(3px);
      padding: 18px;
    }

    .tutorial-player-overlay.visible {
      display: flex;
    }

    .tutorial-player-dialog {
      width: min(980px, 94vw);
      border-radius: 14px;
      border: 1px solid color-mix(in srgb, var(--border) 74%, transparent 26%);
      background: color-mix(in srgb, var(--bg-panel) 88%, #1c2738 12%);
      box-shadow: 0 26px 56px rgba(0,0,0,0.45);
      overflow: hidden;
    }

    .tutorial-player-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 12px;
      border-bottom: 1px solid color-mix(in srgb, var(--border) 76%, transparent 24%);
      background: color-mix(in srgb, var(--panel-content-bg) 72%, #33455f 28%);
    }

    .tutorial-player-title {
      color: var(--text);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.35;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .tutorial-player-close {
      border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
      background: rgba(255,255,255,0.06);
      color: var(--text);
      border-radius: 8px;
      min-width: 34px;
      min-height: 30px;
      font-size: 16px;
      cursor: pointer;
    }

    .tutorial-player-frame-wrap {
      width: 100%;
      aspect-ratio: 16 / 9;
      background: #000;
    }

    .tutorial-player-frame {
      width: 100%;
      height: 100%;
      border: 0;
    }

    @media (max-width: 980px) {
      .tutorial-shell {
        height: calc(100vh - 240px);
      }

      .tutorial-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 760px) {
      .tutorial-topbar {
        width: 100%;
      }

      .tutorial-nav-shell {
        width: 100%;
      }

      .tutorial-nav-btn {
        flex: 1 1 0;
        justify-content: center;
        min-width: 0;
        padding: 8px 10px;
      }

      .tutorial-shell {
        height: calc(100vh - 260px);
      }

      .tutorial-grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .tutorial-card {
        min-height: 0;
        width: 100%;
      }

      .tutorial-stats-row {
        flex-wrap: wrap;
      }

      .tutorial-social-link {
        margin-left: 0;
      }
    }

    .url-input-row {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .url-input-row .settings-input {
      flex: 1;
    }

    .url-clear-btn {
      width: 34px;
      height: 34px;
      border-radius: var(--settings-control-radius);
      border: 1px solid var(--border);
      background: #0a0d14;
      color: var(--text-secondary);
      cursor: pointer;
      font-weight: 700;
      transition: all 0.2s ease;
    }

    .url-clear-btn:hover {
      color: var(--text);
      border-color: var(--accent);
    }

    .url-clear-btn:active {
      transform: translateY(1px);
    }
    
    /* Clean Slider Design */
    .slider-container {
      position: relative;
      margin-bottom: 14px;
      padding-top: 4px;
    }
    
    .slider-container::after {
      display: none;
    }
    
    .slider-container:last-child::after {
      display: none;
    }
    
    .slider-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px;
    }
    
    .slider-header .settings-label {
      margin-bottom: 0;
      font-size: 13px;
      color: var(--text);
    }
    
    .slider-value {
      font-size: 11px;
      font-weight: 600;
      color: var(--text);
      background: rgba(255,255,255,0.06);
      padding: 3px 8px;
      border-radius: var(--settings-control-radius);
      min-width: 48px;
      text-align: center;
      border: 1px solid rgba(255,255,255,0.08);
      font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
      letter-spacing: 0.5px;
    }
    
    .settings-slider {
      width: 100%;
      height: 4px;
      border-radius: 2px;
      background: rgba(255,255,255,0.10);
      outline: none;
      -webkit-appearance: none;
      appearance: none;
      cursor: pointer;
      position: relative;
      z-index: 1;
      --slider-fill: 0%;
    }
    
    .settings-slider::-webkit-slider-runnable-track {
      width: 100%;
      height: 4px;
      border-radius: 2px;
      background: linear-gradient(90deg, rgba(74,134,255,0.6) var(--slider-fill), transparent var(--slider-fill));
      background-color: rgba(255,255,255,0.08);
    }
    
    .settings-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #cdd6e4;
      cursor: pointer;
      border: 2px solid #1e1e2e;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
      transition: background 0.15s, transform 0.15s;
      margin-top: -5px;
    }
    
    .settings-slider::-webkit-slider-thumb:hover {
      transform: scale(1.15);
      background: #fff;
    }
    
    .settings-slider::-moz-range-track {
      width: 100%;
      height: 4px;
      border-radius: 2px;
      background: linear-gradient(90deg, rgba(74,134,255,0.6) var(--slider-fill), transparent var(--slider-fill));
      background-color: rgba(255,255,255,0.08);
    }
    
    .settings-slider::-moz-range-thumb {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #cdd6e4;
      cursor: pointer;
      border: 2px solid #1e1e2e;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
      transition: background 0.15s, transform 0.15s;
    }
    
    .settings-slider::-moz-range-thumb:hover {
      transform: scale(1.15);
      background: #fff;
    }
    
    .lt-style-picker {
      display: flex;
      gap: 12px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }
    
    .lt-style-btn {
      flex: 1;
      padding: 10px 12px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      color: #8b95a5;
      cursor: pointer;
      font-size: 11px;
      font-weight: 600;
      text-transform: none;
      border-radius: 6px;
      text-align: center;
      position: relative;
      min-width: 80px;
      transition: all 0.12s ease;
      letter-spacing: 0.3px;
    }
    
    .lt-style-btn:hover {
      border-color: rgba(255,255,255,0.15);
      background: rgba(255,255,255,0.07);
      transform: none;
      box-shadow: none;
    }
    
    .lt-style-btn.active {
      background: rgba(74,134,255,0.15);
      color: #cdd6e4;
      border-color: rgba(74,134,255,0.4);
      box-shadow: none;
    }
    
    .lt-style-delete, .lt-style-edit {
      position: absolute;
      top: 8px;
      width: 24px;
      height: 24px;
      border: none;
      border-radius: 50%;
      font-size: 11px;
      line-height: 1;
      cursor: pointer;
      display: none;
      color: white;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }
    
    .lt-style-edit {
      right: 28px;
      background: rgba(74,134,255,0.7);
    }
    
    .lt-style-delete {
      right: 8px;
      background: rgba(220,38,38,0.7);
    }
    
    .lt-style-btn:hover .lt-style-delete,
    .lt-style-btn:hover .lt-style-edit {
      display: flex;
    }
    
    .lt-style-edit:hover, .lt-style-delete:hover {
      transform: scale(1.1);
      box-shadow: none;
    }
    
    #styleEditorModal .modal-content {
      width: 1140px;
      max-height: 95vh;
    }
    
    .style-editor-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0;
      padding: 24px 32px;
      border-bottom: 1px solid var(--border);
      background: linear-gradient(135deg, var(--accent-dark), var(--accent));
    }
    
    .style-editor-header h3 {
      margin: 0;
      color: white;
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 1px;
    }
    
    .style-editor-toolbar {
      display: flex;
      gap: 8px;
      align-items: center;
      padding: 12px 24px;
      background: #0b111d;
      border-bottom: 1px solid var(--border);
      flex-wrap: nowrap;
    }
    
    .style-editor-body {
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 16px;
    }

    /* Style editor canvas (Index design) */
    .canvas-panel {
      background: #0b1118;
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      min-height: 320px;
    }

    .canvas-toolbar {
      padding: 12px 14px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      background: rgba(10, 15, 24, 0.6);
    }

    .canvas-toolbar span {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-secondary);
    }

    .canvas-toolbar-controls {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .canvas-toolbar label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      color: var(--text-secondary);
    }

    .canvas-toolbar input[type="number"] {
      width: 70px;
      padding: 4px 6px;
      background: #0a0d14;
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 11px;
    }

    .canvas-toolbar input[type="checkbox"] {
      accent-color: var(--accent);
    }

    .canvas-wrap {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 16px;
      overflow: auto;
      min-height: 280px;
      background: radial-gradient(500px 320px at 50% 0%, rgba(56, 189, 248, 0.08), transparent 70%);
    }

    .canvas-wrap.zoomed {
      justify-content: flex-start;
      align-items: flex-start;
    }

    .canvas-frame {
      position: relative;
      display: block;
      overflow: visible;
      box-shadow: 0 26px 70px rgba(0, 0, 0, 0.55);
    }

    .canvas-stage {
      width: 1920px;
      height: 1080px;
      position: relative;
      background: linear-gradient(180deg, rgba(18, 18, 18, 0.85), rgba(14, 16, 18, 0.95));
      border: 1px solid rgba(255, 255, 255, 0.08);
      transform-origin: top left;
      overflow: hidden;
    }

    .canvas-grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
      background-size: 40px 40px;
      opacity: 0.5;
      pointer-events: none;
    }

    .canvas-safe {
      position: absolute;
      inset: 80px;
      border: 1px dashed rgba(255, 255, 255, 0.12);
      pointer-events: none;
    }

    .canvas-baseline {
      position: absolute;
      left: 0;
      width: 100%;
      height: 0;
      border-top: 1px solid rgba(245, 158, 11, 0.5);
      pointer-events: none;
    }

    .layer-wrap {
      position: absolute;
      inset: 0;
      z-index: 40;
      pointer-events: none;
    }

    .layer-item {
      position: absolute;
      pointer-events: none;
      border: 1px dashed transparent;
    }

    .layer-item.text-layer {
      display: flex;
      align-items: center;
      padding: 8px;
      white-space: pre-wrap;
    }

    .layer-item img,
    .layer-item svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .ref-box {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 36px;
      color: #ffffff;
      z-index: 30;
    }

    .ref-text {
      width: 100%;
    }

    .main-bar {
      position: absolute;
      display: flex;
      align-items: center;
      font-weight: 700;
      font-size: 40px;
      color: #ffffff;
      z-index: 20;
    }

    .main-text {
      width: 100%;
    }

    .selection-box {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }
    
    .style-preview-wide {
      width: 100%;
      max-width: 100%;
      height: auto;
      background: var(--bg-panel);
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: 0 10px 32px rgba(0,0,0,0.35);
      overflow: hidden;
      padding: 0;
      margin: 0 auto;
    }
    
    .style-preview-wrap {
      position: relative;
      top: auto;
      box-shadow: none;
      border-bottom: 1px solid var(--border);
    }
    
    .style-preview-wrap .preview-container {
      width: 100%;
      height: 220px;
      margin: 0;
      transform: scale(1);
    }
    
    .style-sections {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 14px;
      align-items: start;
      max-height: 58vh;
      overflow: auto;
      padding: 4px;
    }
    
    .style-sections .editor-section {
      padding: 12px;
      margin-bottom: 10px;
      border-left-width: 3px;
    }
    
    .style-sections .editor-section-title {
      font-size: 10px;
      margin-bottom: 10px;
      letter-spacing: 1px;
      gap: 6px;
      position: sticky;
      top: 0;
      z-index: 3;
      background: rgba(13, 17, 23, 0.92);
      padding: 10px 12px;
      margin: -12px -12px 10px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      backdrop-filter: blur(6px);
    }

    .style-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--border);
      color: var(--text-secondary);
      font-size: 12px;
      letter-spacing: 0.3px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    }
    
    .style-chip strong {
      color: var(--text);
      font-size: 13px;
    }

    .style-chip-active {
      gap: 6px;
      flex: 0 1 200px;
      min-width: 150px;
      padding: 8px 10px;
    }
    
    .style-editor-select {
      background: #0d1117;
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 6px 8px;
      font-size: 11px;
      font-weight: 700;
      min-width: 130px;
      outline: none;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    
    .style-editor-select:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
    }
    
    .style-toolbar-actions {
      margin-left: auto;
      display: flex;
      gap: 8px;
      flex-wrap: nowrap;
    }
    
    .btn-ghost {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--border);
      color: var(--text);
    }
    
    .btn-ghost:hover {
      background: rgba(255, 255, 255, 0.12);
      border-color: var(--accent);
      color: var(--accent-light);
    }

    /* True 16:9 Preview Window */
    
    .preview-container {
      width: 100%;
      height: 220px;
      margin: 0;
      background: #000;
      border-radius: 16px;
      overflow: hidden;
      border: 4px solid var(--border);
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
      transition: transform 0.3s ease;
      transform: scale(var(--preview-base-scale));
      transform-origin: top center;
    }
    
    .preview-aspect {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
      border-radius: 12px;
    }
    
    .preview-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #1a1a2e, #16213e);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: flex-start;
      padding: 32px;
    }
    
    .preview-verse-text {
      position: absolute;
      bottom: 32px;
      left: 80px;
      right: 80px;
      color: white;
      font-size: 36px;
      font-weight: 800;
      line-height: 1.3;
      z-index: 3;
      text-shadow: 3px 3px 12px rgba(0, 0, 0, 0.9);
      font-family: 'Montserrat', sans-serif;
    }
    
    .preview-ref-box {
      position: absolute;
      background: #00411C;
      border: 3px solid white;
      border-radius: 12px;
      padding: 16px 28px;
      font-size: 22px;
      font-weight: 800;
      color: white;
      text-align: center;
      box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.5);
      z-index: 4;
      min-width: 240px;
      font-family: 'Montserrat', sans-serif;
      backdrop-filter: blur(10px);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .preview-ref-text,
    .preview-main-text {
      position: relative;
      display: inline-block;
      width: 100%;
    }
    
    .preview-main-text {
      width: 100%;
    }
    
    .preview-main-bar {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(90deg, rgba(0,94,41,0.95) 0%, rgba(23,142,76,0.95) 100%);
      padding: 32px 20px 32px 80px;
      font-size: 32px;
      font-weight: 800;
      color: white;
      display: flex;
      align-items: center;
      z-index: 2;
      min-height: 140px;
      font-family: 'Montserrat', sans-serif;
    }
    
    .preview-verse-sup {
      font-size: 0.5em;
      vertical-align: super;
      margin-right: 4px;
      background: rgba(255, 255, 255, 0.18);
      padding: 2px 5px;
      border-radius: 4px;
    }
    
    .editor-section {
      margin-bottom: 24px;
      padding: 24px;
      background: rgba(13, 17, 23, 0.6);
      border-radius: 12px;
      border-left: 4px solid var(--accent);
      backdrop-filter: blur(10px);
      cursor: pointer;
    }
    
    .editor-section-title {
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 20px;
      letter-spacing: 1.5px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .editor-section-title::before {
      content: '';
      width: 6px;
      height: 20px;
      background: var(--accent);
      border-radius: 3px;
    }
    
    .editor-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-bottom: 20px;
    }
    
    .editor-field {
      margin-bottom: 16px;
    }
    
    .editor-label {
      font-size: 11px;
      color: var(--text-secondary);
      margin-bottom: 8px;
      display: block;
      text-transform: uppercase;
      font-weight: 700;
      letter-spacing: 1px;
    }
    
    .editor-input {
      width: 100%;
      padding: 12px 16px;
      background: #0a0d14;
      border: 2px solid var(--border);
      color: var(--text);
      border-radius: 10px;
      font-size: 12px;
      font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
      transition: all 0.3s ease;
    }
    
    .editor-input:focus {
      border-color: var(--accent);
      outline: none;
      box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.2);
    }
    
    .editor-color-input {
      display: flex;
      gap: 12px;
      align-items: center;
    }
    
    .editor-color-input input[type="color"] {
      width: 48px;
      height: 48px;
      border: 2px solid var(--border);
      background: transparent;
      cursor: pointer;
      border-radius: 10px;
      padding: 0;
      transition: all 0.3s ease;
    }
    
    .editor-color-input input[type="color"]:hover {
      border-color: var(--accent);
      transform: scale(1.05);
    }
    
    .editor-color-input input[type="text"] {
      flex: 1;
      padding: 12px 16px;
      background: #0a0d14;
      border: 2px solid var(--border);
      color: var(--text);
      border-radius: 10px;
      font-size: 12px;
      font-family: 'Consolas', 'Monaco', monospace;
      transition: all 0.3s ease;
    }
    
    .editor-color-input input[type="text"]:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.2);
    }
    
    .toast {
      position: fixed;
      top: 24px;
      right: 24px;
      background: linear-gradient(135deg, var(--bg-panel), #1c2128);
      color: white;
      padding: 16px 24px;
      border-radius: 12px;
      border-left: 4px solid var(--accent);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
      z-index: 10000;
      opacity: 0;
      transform: translateY(-30px);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      font-size: 13px;
      font-weight: 600;
      max-width: 400px;
      backdrop-filter: blur(10px);
      border: 1px solid var(--border);
    }
    
    .toast.show {
      opacity: 1;
      transform: translateY(0);
    }
    
    .preset-popover {
      position: fixed;
      width: calc(var(--settings-modal-width) / 2);
      height: calc(var(--settings-modal-height) * 0.29);
      max-width: 360px;
      max-height: 244px;
      min-width: 260px;
      min-height: 128px;
      background: linear-gradient(135deg, var(--bg-panel), #1c2128);
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: 0 12px 36px rgba(0,0,0,0.45);
      padding: 16px;
      opacity: 0;
      pointer-events: none;
      transform: translateY(-6px);
      transition: opacity 0.2s ease, transform 0.2s ease;
      z-index: 9302;
      color: var(--text);
      box-sizing: border-box;
      overflow: auto;
    }
    
    .preset-popover.open {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }
    
    .preset-popover h4 {
      margin: 0 0 10px;
      font-size: 13px;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      color: var(--accent-light);
    }
    
    .preset-popover .placeholder {
      font-size: 12px;
      color: var(--text-secondary);
      line-height: 1.5;
    }

    .output-popover {
      width: 320px;
      min-width: 280px;
      min-height: 180px;
      max-height: 420px;
      height: auto;
    }

    .output-screen-list-popover {
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-height: 260px;
      overflow: auto;
      padding-right: 2px;
    }

    .output-screen-option {
      width: 100%;
      text-align: left;
      background: #101a2d;
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      cursor: pointer;
      padding: 10px;
      font-size: 12px;
      line-height: 1.35;
    }

    .output-screen-option:hover {
      border-color: var(--accent);
      background: #0d1628;
    }

    .output-screen-meta {
      display: block;
      margin-top: 4px;
      color: var(--text-secondary);
      font-size: 11px;
    }
    
    .confirm-modal {
      width: 420px;
      padding: 22px 20px 18px;
      box-sizing: border-box;
    }
    
    .confirm-modal h3 {
      margin-top: 0;
      color: var(--accent);
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 16px;
    }
    
    .confirm-modal p {
      color: var(--text-secondary);
      font-size: 13px;
      line-height: 1.6;
      margin-bottom: 20px;
    }
    
    .confirm-modal input {
      width: 100%;
      box-sizing: border-box;
      padding: 14px;
      background: #0a0d14;
      border: 2px solid var(--border);
      color: var(--text);
      border-radius: 10px;
      margin: 16px 0;
      font-size: 13px;
      transition: all 0.3s ease;
    }
    
    .confirm-modal input:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.2);
    }
    
    .confirm-actions {
      display: flex;
      gap: 12px;
      margin-top: 24px;
    }
    
    .confirm-actions .btn {
      flex: 1;
    }
    
    @font-face {
      font-family: 'CustomFont';
      src: url('') format('truetype');
    }
    
    /* Responsive adjustments */
    @media (max-width: 1200px) {
      .settings-row {
        grid-template-columns: 1fr;
        gap: 12px;
      }

      .settings-row.keep-two-cols {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }
      
      .editor-row {
        grid-template-columns: 1fr;
        gap: 16px;
      }
    }
    
    @media (max-width: 800px) {
      #btn-annotate {
        padding: 6px 8px !important;
      }
      #btn-annotate svg {
        width: 20px;
        height: 20px;
      }
      #btn-bible-tool {
        padding: 6px 8px !important;
      }
      #btn-bible-tool svg {
        width: 22px;
        height: 22px;
      }
    }
    @media (max-width: 768px) {
      .app-container {
        min-width: 0;
        max-width: 100%;
      }
    }

    /* ── Scene / Source Popup Modals (Apple Design) ── */
    .sp-overlay {
      display: none;
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0, 0, 0, 0.15);
      z-index: 10000;
      align-items: center;
      justify-content: center;
      animation: sp-fade-in var(--duration-fast, 150ms) var(--ease-out, ease-out);
    }
    @keyframes sp-fade-in { from { opacity: 0; } to { opacity: 1; } }
    #page-projection .sp-overlay {
      background: transparent;
    }
    .sp-overlay.open { display: flex; }
    .sp-modal {
      min-width: 340px;
      max-width: 440px;
      background: var(--material-chrome, rgba(30, 30, 30, 0.78));
      backdrop-filter: saturate(180%) blur(40px);
      -webkit-backdrop-filter: saturate(180%) blur(40px);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: var(--radius-lg, 14px);
      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 0.5px rgba(255, 255, 255, 0.06);
      padding: 0;
      font-size: 13px;
      color: var(--text, #e5e5ea);
      font-family: inherit;
      animation: sp-pop-in var(--duration-normal, 300ms) var(--ease-spring, cubic-bezier(0.2, 0.9, 0.3, 1.0));
      overflow: hidden;
    }
    @keyframes sp-pop-in {
      from { transform: translateY(16px) scale(0.97); opacity: 0; }
      to   { transform: translateY(0) scale(1); opacity: 1; }
    }
    .sp-modal-header {
      padding: 16px 20px 12px;
      font-size: 15px;
      font-weight: 600;
      color: var(--text, #e5e5ea);
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      letter-spacing: -0.01em;
      cursor: default;
      user-select: none;
      -webkit-user-select: none;
    }
    .sp-modal-body {
      padding: 14px 20px;
      max-height: 55vh;
      overflow-y: auto;
    }
    .sp-modal-footer {
      padding: 12px 20px 16px;
      display: flex;
      justify-content: flex-end;
      gap: var(--space-sm, 8px);
      border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
    .sp-modal-footer button {
      padding: 7px 18px;
      border-radius: var(--radius-sm, 8px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(255, 255, 255, 0.06);
      color: var(--text, #e5e5ea);
      cursor: pointer;
      font-size: 13px;
      font-weight: 500;
      font-family: inherit;
      transition: background var(--duration-instant, 80ms) var(--ease-out, ease-out),
                  transform var(--duration-fast, 150ms) var(--ease-spring, cubic-bezier(0.2,0.9,0.3,1));
    }
    .sp-modal-footer button:hover { background: rgba(255, 255, 255, 0.10); }
    .sp-modal-footer button:active { transform: scale(0.97); }
    .sp-modal-footer button.sp-btn-primary {
      background: var(--accent, #0a84ff);
      border-color: var(--accent, #0a84ff);
      color: #fff;
      font-weight: 600;
    }
    .sp-modal-footer button.sp-btn-primary:hover { background: var(--accent-hover, #0070e0); }
    .sp-modal-footer button.sp-btn-danger {
      background: rgba(255, 59, 48, 0.15);
      border-color: rgba(255, 59, 48, 0.3);
      color: #ff6961;
      font-weight: 600;
    }
    .sp-modal-footer button.sp-btn-danger:hover { background: rgba(255, 59, 48, 0.25); }
    .sp-input {
      width: 100%;
      box-sizing: border-box;
      padding: 8px 12px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: var(--radius-sm, 8px);
      background: rgba(255, 255, 255, 0.06);
      color: var(--text, #e5e5ea);
      font-size: 13px;
      font-family: inherit;
      outline: none;
      transition: border-color var(--duration-instant, 80ms) var(--ease-out, ease-out),
                  box-shadow var(--duration-instant, 80ms) var(--ease-out, ease-out);
    }
    .sp-input:focus {
      border-color: var(--accent, #0a84ff);
      box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.2);
    }
    .sp-input::placeholder { color: var(--text-tertiary, rgba(235,235,245,0.3)); }

    /* ── Scene Transition Popup Styles ── */
    .tr-section {
      margin-bottom: 16px;
    }
    .tr-section:last-child { margin-bottom: 0; }
    .tr-label {
      display: block;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.4px;
      color: var(--text-tertiary, rgba(235,235,245,0.3));
      margin-bottom: 8px;
    }
    .tr-type-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
    }
    .tr-type-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding: 12px 6px;
      border-radius: var(--radius-sm, 8px);
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.03);
      color: var(--text-secondary, rgba(235,235,245,0.6));
      cursor: pointer;
      font-size: 11px;
      font-weight: 500;
      font-family: inherit;
      transition: background var(--duration-instant, 80ms) var(--ease-out, ease-out),
                  border-color var(--duration-instant, 80ms) var(--ease-out, ease-out),
                  color var(--duration-instant, 80ms) var(--ease-out, ease-out);
    }
    .tr-type-btn:hover {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.15);
    }
    .tr-type-btn.selected {
      background: rgba(10, 132, 255, 0.12);
      border-color: var(--accent, #0a84ff);
      color: var(--accent, #0a84ff);
    }
    .tr-type-btn svg {
      width: 24px;
      height: 24px;
      opacity: 0.7;
    }
    .tr-type-btn.selected svg { opacity: 1; }
    .tr-type-btn .tr-type-name {
      font-size: 10px;
      letter-spacing: 0.2px;
    }
    .tr-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .tr-slider-wrap {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .tr-slider {
      flex: 1;
      -webkit-appearance: none;
      appearance: none;
      height: 4px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.1);
      outline: none;
      cursor: pointer;
    }
    .tr-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 16px; height: 16px;
      border-radius: 50%;
      background: #fff;
      border: 1px solid rgba(0, 0, 0, 0.15);
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
      cursor: pointer;
    }
    .tr-slider::-moz-range-thumb {
      width: 16px; height: 16px;
      border-radius: 50%;
      background: #fff;
      border: 1px solid rgba(0, 0, 0, 0.15);
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
      cursor: pointer;
    }
    .tr-value {
      font-size: 12px;
      font-weight: 600;
      color: var(--text, #e5e5ea);
      min-width: 38px;
      text-align: right;
      font-variant-numeric: tabular-nums;
    }
    .tr-select {
      width: 100%;
      padding: 7px 10px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: var(--radius-sm, 8px);
      background: rgba(255, 255, 255, 0.06);
      color: var(--text, #e5e5ea);
      font-size: 12px;
      font-family: inherit;
      outline: none;
      cursor: pointer;
      -webkit-appearance: none;
      appearance: none;
    }
    .tr-select:focus {
      border-color: var(--accent, #0a84ff);
      box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.2);
    }
    .tr-preview {
      width: 100%;
      height: 64px;
      border-radius: var(--radius-sm, 8px);
      background: rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.06);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;
    }
    .tr-preview-box {
      width: 40px;
      height: 30px;
      border-radius: 4px;
      background: var(--accent, #0a84ff);
      opacity: 0.8;
      position: absolute;
    }
    .tr-toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 4px 0;
    }
    .tr-toggle-label {
      font-size: 13px;
      color: var(--text, #e5e5ea);
    }
    .tr-toggle {
      width: 42px;
      height: 24px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.1);
      border: none;
      cursor: pointer;
      position: relative;
      transition: background var(--duration-fast, 150ms) var(--ease-out, ease-out);
      padding: 0;
    }
    .tr-toggle::after {
      content: '';
      position: absolute;
      top: 2px; left: 2px;
      width: 20px; height: 20px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
      transition: transform var(--duration-fast, 150ms) var(--ease-spring, cubic-bezier(0.2,0.9,0.3,1));
    }
    .tr-toggle.on {
      background: var(--accent, #0a84ff);
    }
    .tr-toggle.on::after {
      transform: translateX(18px);
    }
    /* ── Source Config Preview (Apple) ── */
    #src-cfg-preview {
      margin: 0;
      border-radius: 10px;
      overflow: hidden;
      background: #000;
      aspect-ratio: 16/9;
      position: relative;
      border: 1px solid rgba(255,255,255,0.06);
    }
    #src-cfg-preview video {
      width: 100%; height: 100%; object-fit: contain;
      display: block;
    }
    #src-cfg-preview .preview-placeholder {
      width: 100%; height: 100%;
      display: flex; align-items: center; justify-content: center;
      flex-direction: column; gap: 8px;
      color: rgba(255,255,255,0.25); font-size: 11px;
      font-weight: 500; letter-spacing: 0.3px;
    }
    #src-cfg-preview .preview-placeholder::before {
      content: '';
      width: 32px; height: 32px;
      border-radius: 50%;
      background: rgba(255,255,255,0.06);
      display: flex; align-items: center; justify-content: center;
    }
    #src-cfg-preview .preview-label {
      position: absolute; bottom: 8px; left: 10px;
      font-size: 9px; color: rgba(255,255,255,0.5); pointer-events: none;
      background: rgba(0,0,0,0.55); padding: 2px 8px; border-radius: 4px;
      font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
    }

    /* ── Source Type Picker Grid (Apple) ── */
    #source-type-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      padding: 4px 0;
    }
    .sp-source-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 18px 10px 14px;
      cursor: pointer;
      white-space: nowrap;
      transition: background var(--duration-instant, 80ms) var(--ease-out, ease-out),
                  transform var(--duration-fast, 150ms) var(--ease-spring, cubic-bezier(0.2,0.9,0.3,1)),
                  border-color var(--duration-instant, 80ms) var(--ease-out, ease-out);
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.06);
      background: rgba(255,255,255,0.03);
      text-align: center;
    }
    .sp-source-item:hover {
      background: rgba(10, 132, 255, 0.08);
      border-color: rgba(10, 132, 255, 0.25);
    }
    .sp-source-item:active {
      transform: scale(0.96);
    }
    .sp-source-item .sp-source-icon {
      width: 28px;
      height: 28px;
      flex-shrink: 0;
      opacity: 0.85;
    }
    .sp-source-item .sp-source-label {
      font-size: 11.5px;
      font-weight: 500;
      color: var(--text-secondary, rgba(235,235,245,0.6));
    }
    .sp-source-item:hover .sp-source-label {
      color: var(--text, #e5e5ea);
    }

    /* ── Source Config Form Groups (Apple) ── */
    .src-cfg-group {
      margin-bottom: 16px;
    }
    .src-cfg-group:last-child { margin-bottom: 0; }
    .src-cfg-label {
      display: block;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      color: var(--text-tertiary, rgba(235,235,245,0.3));
      margin-bottom: 6px;
    }
    .src-cfg-hint {
      display: block;
      font-size: 11px;
      color: var(--text-tertiary, rgba(235,235,245,0.3));
      margin-top: 5px;
      font-style: italic;
    }
    .src-cfg-row {
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .src-cfg-row .sp-input { flex: 1; margin: 0; }
    .src-cfg-info {
      padding: 10px 12px;
      background: rgba(10, 132, 255, 0.06);
      border: 1px solid rgba(10, 132, 255, 0.12);
      border-radius: 10px;
      font-size: 11px; color: var(--text-secondary, rgba(235,235,245,0.6));
      line-height: 1.5;
    }
    .src-cfg-info strong {
      color: var(--accent, #0a84ff);
    }
    .src-cfg-section-title {
      font-size: 12px; font-weight: 600;
      color: var(--text, #e5e5ea);
      margin: 16px 0 8px;
      padding-top: 12px;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .src-cfg-section-title:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

    /* ── .sp-btn-secondary (Apple) ── */
    .sp-btn-secondary {
      padding: 7px 16px;
      border-radius: var(--radius-sm, 8px);
      border: 1px solid rgba(255, 255, 255, 0.12);
      background: rgba(255, 255, 255, 0.06);
      color: var(--text, #e5e5ea);
      cursor: pointer;
      font-size: 12px;
      font-weight: 500;
      font-family: inherit;
      transition: background var(--duration-instant, 80ms) var(--ease-out, ease-out),
                  transform var(--duration-fast, 150ms) var(--ease-spring, cubic-bezier(0.2,0.9,0.3,1));
      white-space: nowrap;
    }
    .sp-btn-secondary:hover { background: rgba(255, 255, 255, 0.10); }
    .sp-btn-secondary:active { transform: scale(0.97); }

    /* ── Source Config Checkbox / Toggle Row ── */
    .src-cfg-toggle-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 8px 0;
    }
    .src-cfg-toggle-row label {
      font-size: 12px; color: var(--text, #e5e5ea); font-weight: 500;
    }
    .src-cfg-mini-toggle {
      width: 38px; height: 22px;
      border-radius: 11px;
      background: rgba(255,255,255,0.12);
      border: none; cursor: pointer;
      position: relative;
      transition: background var(--duration-fast, 150ms) var(--ease-out, ease-out);
      padding: 0; flex-shrink: 0;
    }
    .src-cfg-mini-toggle::after {
      content: ''; position: absolute;
      top: 2px; left: 2px;
      width: 18px; height: 18px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 3px rgba(0,0,0,0.3);
      transition: transform var(--duration-fast, 150ms) var(--ease-spring, cubic-bezier(0.2,0.9,0.3,1));
    }
    .src-cfg-mini-toggle.on {
      background: var(--accent, #0a84ff);
    }
    .src-cfg-mini-toggle.on::after {
      transform: translateX(16px);
    }

    /* ── Source Config Inline Select (compact) ── */
    .src-cfg-inline-select {
      display: flex; gap: 4px; flex-wrap: wrap;
    }
    .src-cfg-inline-select .seg-opt {
      padding: 5px 12px;
      border-radius: 6px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.03);
      color: var(--text-secondary, rgba(235,235,245,0.6));
      font-size: 11px; font-weight: 500;
      cursor: pointer;
      transition: all 80ms ease-out;
    }
    .src-cfg-inline-select .seg-opt:hover {
      background: rgba(255,255,255,0.06);
    }
    .src-cfg-inline-select .seg-opt.active {
      background: var(--accent, #0a84ff);
      border-color: var(--accent, #0a84ff);
      color: #fff;
    }
    /* Scene / Source list items (drag-ready) */
    .scene-list-item, .source-list-item {
      padding: 8px 10px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: var(--radius-sm, 8px);
      margin-bottom: 3px;
      background: rgba(255, 255, 255, 0.03);
      color: var(--text, #e5e5ea);
      font-size: 12px;
      cursor: default;
      display: flex;
      align-items: center;
      gap: 8px;
      user-select: none;
      transition: background var(--duration-instant, 80ms) var(--ease-out, ease-out),
                  border-color var(--duration-instant, 80ms) var(--ease-out, ease-out);
    }
    .scene-list-item:hover, .source-list-item:hover {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.12);
    }
    .scene-list-item.selected, .source-list-item.selected {
      background: rgba(10, 132, 255, 0.12);
      border-color: var(--accent, #0a84ff);
    }
    .scene-list-item.dragging, .source-list-item.dragging {
      opacity: 0.4;
    }
    .scene-list-item .sli-icon, .source-list-item .sli-icon {
      width: 16px; height: 16px; flex-shrink: 0; opacity: 0.6;
    }
    .source-list-item .sli-color-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      flex-shrink: 0;
      border: 1px solid rgba(255, 255, 255, 0.26);
      background: var(--sli-color, rgba(255, 255, 255, 0.18));
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.22) inset;
      opacity: 0.95;
    }
    .source-list-item .sli-color-dot.default {
      background: rgba(255, 255, 255, 0.14);
      border-color: rgba(255, 255, 255, 0.18);
      box-shadow: none;
      opacity: 0.65;
    }
    .scene-list-item .sli-label, .source-list-item .sli-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .source-list-item .sli-fx-state,
    .scene-list-item .sli-transition-state {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 18px;
      min-width: 30px;
      padding: 0 7px;
      border-radius: 980px;
      border: 1px solid rgba(10, 132, 255, 0.3);
      background: rgba(10, 132, 255, 0.1);
      color: var(--accent, #0a84ff);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.2px;
      line-height: 1;
      flex-shrink: 0;
    }
    .scene-list-item .sli-transition-state {
      border-color: rgba(255, 214, 10, 0.35);
      background: rgba(255, 214, 10, 0.1);
      color: #ffd60a;
    }
    .studio-pane-footer-btn.source-fx-toolbar-btn,
    .studio-pane-footer-btn.scene-transition-toolbar-btn {
      width: auto;
      min-width: 30px;
      height: 18px;
      padding: 0 7px;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.2px;
      border-radius: 980px;
      border: 1px solid rgba(10, 132, 255, 0.3);
      background: rgba(10, 132, 255, 0.1);
      color: var(--accent, #0a84ff);
      line-height: 1;
    }
    .studio-pane-footer-btn.scene-transition-toolbar-btn {
      border-color: rgba(255, 214, 10, 0.35);
      background: rgba(255, 214, 10, 0.1);
      color: #ffd60a;
    }
    .studio-pane-footer-btn.source-fx-toolbar-btn:hover,
    .studio-pane-footer-btn.scene-transition-toolbar-btn:hover {
      background: rgba(10, 132, 255, 0.18);
      color: #3da5ff;
    }
    .studio-pane-footer-btn.scene-transition-toolbar-btn:hover {
      background: rgba(255, 214, 10, 0.18);
      color: #ffe566;
    }
    .studio-pane-footer-btn.source-fx-toolbar-btn:disabled,
    .studio-pane-footer-btn.scene-transition-toolbar-btn:disabled {
      opacity: 0.45;
      cursor: default;
    }
    .studio-pane-footer-btn.source-fx-toolbar-btn:disabled:hover,
    .studio-pane-footer-btn.scene-transition-toolbar-btn:disabled:hover {
      transform: none;
      box-shadow: none;
    }
    .scene-list-item .sli-eye, .source-list-item .sli-eye {
      width: 16px; height: 16px; cursor: pointer; opacity: 0.5; flex-shrink: 0;
    }
    .source-list-item .sli-lock {
      width: 16px;
      height: 16px;
      cursor: pointer;
      opacity: 0.72;
      flex-shrink: 0;
      color: #9fb2cc;
    }
    .source-list-item .sli-lock.locked {
      opacity: 0.95;
      color: #d8dde7;
    }
    .source-list-item .sli-lock:hover { opacity: 1; }
    .scene-list-item .sli-eye .eye-slash,
    .source-list-item .sli-eye .eye-slash {
      display: none;
    }
    .scene-list-item .sli-eye.hidden .eye-slash,
    .source-list-item .sli-eye.hidden .eye-slash {
      display: block;
    }
    .scene-list-item .sli-eye:hover, .source-list-item .sli-eye:hover { opacity: 1; }
    .sl-context-menu {
      position: fixed;
      left: 0;
      top: 0;
      width: 246px;
      max-width: calc(100vw - 16px);
      max-height: calc(100vh - 16px);
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
      padding: 6px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: linear-gradient(135deg, var(--bg-panel), #1c2128);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
      color: var(--text);
      z-index: 9500;
      display: none;
      user-select: none;
      -webkit-user-select: none;
    }
    .sl-context-menu.open { display: block; }
    .mode-bg-link-btn {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 0;
      border-radius: 5px;
      background: transparent;
      color: var(--text-secondary);
      opacity: 0.26;
      cursor: pointer;
      box-shadow: none;
      transition: color var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
    }
    .mode-bg-link-btn.linked {
      color: var(--accent);
      opacity: 0.95;
    }
    .mode-bg-link-btn:hover {
      opacity: 0.78;
      background: rgba(255,255,255,0.06);
    }
    .mode-bg-link-btn.linked:hover {
      opacity: 1;
    }
    [data-theme-mode="light"] .mode-bg-link-btn {
      color: var(--text-tertiary);
      opacity: 0.34;
    }
    [data-theme-mode="light"] .mode-bg-link-btn.linked {
      color: var(--accent);
      opacity: 0.9;
    }
    .sl-context-menu .sl-ctx-group-title {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.4px;
      text-transform: uppercase;
      color: var(--text-secondary);
      padding: 5px 8px 4px;
    }
    .sl-context-menu .sl-ctx-item {
      width: 100%;
      border: 0;
      background: transparent;
      color: inherit;
      border-radius: 8px;
      text-align: left;
      font-size: 12px;
      padding: 7px 9px;
      line-height: 1.25;
      cursor: pointer;
      font-family: inherit;
    }
    .sl-context-menu .sl-ctx-item.sl-ctx-submenu-trigger {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .sl-context-menu .sl-ctx-item .sl-ctx-submenu-arrow {
      font-size: 12px;
      opacity: 0.8;
      pointer-events: none;
    }
    .sl-context-menu .sl-ctx-item.active .sl-ctx-submenu-arrow {
      opacity: 1;
    }
    .sl-context-menu.sl-context-submenu {
      width: 272px;
      z-index: 9501;
    }
    .sl-context-menu .sl-ctx-item.active {
      background: rgba(10, 132, 255, 0.14);
      color: #eaf4ff;
    }
    .sl-context-menu .sl-ctx-item:hover {
      background: rgba(255, 255, 255, 0.08);
    }
    .sl-context-menu .sl-ctx-item:disabled {
      opacity: 0.5;
      cursor: default;
    }
    .sl-context-menu .sl-ctx-item:disabled:hover {
      background: transparent;
    }
    .sl-context-menu .sl-ctx-item.danger {
      color: #ff6b6b;
    }
    .sl-context-menu .sl-ctx-color-chip {
      width: 11px;
      height: 11px;
      border-radius: 999px;
      display: inline-block;
      vertical-align: -1px;
      margin-right: 8px;
      border: 1px solid rgba(255, 255, 255, 0.28);
      background: var(--sl-chip, rgba(255, 255, 255, 0.2));
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.22) inset;
    }
    .sl-context-menu .sl-ctx-color-chip.default {
      background: rgba(255, 255, 255, 0.16);
      border-color: rgba(255, 255, 255, 0.2);
      box-shadow: none;
    }
    .sl-context-menu .sl-ctx-check {
      float: right;
      font-size: 11px;
      opacity: 0.9;
    }
    .sl-context-menu .sl-ctx-color-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 4px 8px;
    }
    .sl-context-menu .sl-ctx-color-swatch {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.24);
      background: var(--swatch, rgba(255, 255, 255, 0.16));
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
      padding: 0;
      cursor: pointer;
      position: relative;
    }    .sl-context-menu .sl-ctx-color-swatch.default {
      background:
        linear-gradient(45deg, rgba(255,255,255,0.2) 0 25%, rgba(255,255,255,0.08) 25% 50%, rgba(255,255,255,0.2) 50% 75%, rgba(255,255,255,0.08) 75% 100%);
      background-size: 8px 8px;
    }
    .sl-context-menu .sl-ctx-color-swatch:hover {
      background: var(--swatch, rgba(255, 255, 255, 0.16)) !important;
      border-color: rgba(255, 255, 255, 0.5);
      transform: translateY(-1px);
    }
    .sl-context-menu .sl-ctx-color-swatch.active {
      background: var(--swatch, rgba(255, 255, 255, 0.16)) !important;
      box-shadow:
        inset 0 0 0 2px rgba(255,255,255,0.94),
        0 0 0 1px rgba(10,132,255,0.62);
    }
    .sl-context-menu .sl-ctx-color-swatch .sl-ctx-check {
      position: absolute;
      right: 3px;
      bottom: 2px;
      margin: 0;
      float: none;
      font-size: 10px;
      font-weight: 700;
      color: rgba(0,0,0,0.76);
      text-shadow: 0 1px 0 rgba(255,255,255,0.58);
      opacity: 1;
      line-height: 1;
    }
    .sl-context-menu .sl-ctx-color-grid-actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 6px;
      padding: 0 2px 2px;
    }
    .sl-context-menu .sl-ctx-color-grid-actions .sl-ctx-item {
      font-size: 11px;
      padding: 6px 6px;
      text-align: center;
    }
    .sl-context-menu .sl-ctx-duration-row {
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: 6px;
      align-items: stretch;
      padding: 4px 2px 2px;
    }
    .sl-context-menu .sl-ctx-duration-input {
      border: 1px solid rgba(255, 255, 255, 0.14);
      background: rgba(255, 255, 255, 0.08);
      border-radius: 8px;
      color: inherit;
      font-size: 12px;
      line-height: 1.2;
      padding: 7px 9px;
      text-align: left;
      font-family: inherit;
      width: 100%;
      min-width: 0;
      outline: none;
    }
    .sl-context-menu .sl-ctx-duration-input:hover {
      background: rgba(255, 255, 255, 0.14);
    }
    .sl-context-menu .sl-ctx-duration-input:focus {
      border-color: rgba(10, 132, 255, 0.72);
      box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.24);
      background: rgba(255, 255, 255, 0.16);
    }
    .sl-context-menu .sl-ctx-duration-step {
      width: 30px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      background: rgba(255, 255, 255, 0.08);
      border-radius: 8px;
      color: inherit;
      font-size: 15px;
      line-height: 1;
      cursor: pointer;
      font-family: inherit;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 32px;
      text-align: center;
    }
    .sl-context-menu .sl-ctx-duration-step:hover {
      background: rgba(255, 255, 255, 0.14);
    }
    .sl-context-menu .sl-ctx-sep {
      height: 1px;
      margin: 5px 2px;
      background: rgba(255, 255, 255, 0.12);
      border-radius: 999px;
    }
    .fx-overlay { z-index: 1004; }
    /* ══════════════════════════════════════════════
       APPLE FX POPUP — Frosted Glass Design
       Matches sp-modal / Apple HIG language
       ══════════════════════════════════════════════ */
    #source-fx-overlay {
      background: transparent;
    }
    #source-fx-overlay .rec-fx-popup {
      width: 620px;
      min-width: 620px;
      max-width: 620px;
      height: 580px;
      min-height: 580px;
      max-height: 580px;
      transform: translate(var(--source-fx-offset-x, 0px), var(--source-fx-offset-y, 0px));
      border-radius: var(--radius-lg, 14px);
      border: 1px solid rgba(255, 255, 255, 0.14);
      background: var(--material-chrome, rgba(30, 30, 30, 0.82));
      backdrop-filter: saturate(180%) blur(40px);
      -webkit-backdrop-filter: saturate(180%) blur(40px);
      box-shadow:
        0 28px 72px rgba(0, 0, 0, 0.55),
        0 0 0 0.5px rgba(255, 255, 255, 0.08);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      animation: sp-pop-in var(--duration-normal, 300ms) var(--ease-spring, cubic-bezier(0.2, 0.9, 0.3, 1.0));
    }

    /* ── Header — Toolbar ── */
    #source-fx-overlay .rec-fx-header {
      width: 100%;
      min-height: 88px;
      height: 88px;
      max-height: 88px;
      padding: 8px 14px 6px 14px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      background: var(--material-ultrathin, rgba(255, 255, 255, 0.03));
      cursor: default;
      user-select: none;
      -webkit-user-select: none;
      display: flex;
      flex-direction: column;
      gap: 6px;
      position: relative;
    }
    #source-fx-overlay .rec-fx-header button { cursor: pointer; }
    #source-fx-overlay .source-fx-header-top {
      height: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #source-fx-overlay .source-fx-close-dot {
      width: 12px;
      height: 12px;
      border-radius: 999px;
      border: 1px solid rgba(0, 0, 0, 0.22);
      background: #ff5f57;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      position: absolute;
      top: 10px;
      left: 14px;
      z-index: 2;
      transition: filter 0.12s;
    }
    #source-fx-overlay .source-fx-close-dot:hover { filter: brightness(1.12); }
    #source-fx-overlay .source-fx-close-dot svg {
      width: 8px;
      height: 8px;
      opacity: 0;
      transition: opacity 0.12s;
    }
    #source-fx-overlay .source-fx-close-dot:hover svg { opacity: 1; }

    /* ── Power + Toolbar Grid ── */
    #source-fx-overlay .source-fx-menu-grid {
      display: grid;
      grid-template-columns: 48px 1fr auto;
      grid-template-rows: 1fr 1fr;
      grid-template-areas:
        "power leftTop rightTop"
        "power leftBottom rightBottom";
      column-gap: 12px;
      row-gap: 4px;
      min-width: 0;
      align-items: center;
    }
    #source-fx-overlay .source-fx-main-power {
      grid-area: power;
      width: 40px;
      height: 40px;
      border-radius: 999px;
      border: 1px solid rgba(10, 132, 255, 0.4);
      background: var(--accent, #0a84ff);
      color: #fff;
      font-size: 22px;
      line-height: 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow:
        0 2px 10px rgba(10, 132, 255, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
      cursor: pointer;
      transition: background var(--duration-fast, 150ms), box-shadow var(--duration-fast, 150ms);
    }
    #source-fx-overlay .source-fx-main-power:hover {
      background: var(--accent-hover, #0070e0);
      box-shadow:
        0 3px 14px rgba(10, 132, 255, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }
    #source-fx-overlay .source-fx-main-power.off {
      border-color: rgba(255, 255, 255, 0.1);
      background: rgba(255, 255, 255, 0.06);
      color: rgba(255, 255, 255, 0.3);
      box-shadow: none;
    }
    #source-fx-overlay .source-fx-main-power::before {
      content: "⏻";
      width: 36px;
      height: 42px;
      line-height: 42px;
      font-size: 34px;
      text-align: center;
      display: block;
    }
    #source-fx-overlay .source-fx-menu-left-top {
      grid-area: leftTop;
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }
    #source-fx-overlay .source-fx-menu-left-bottom {
      grid-area: leftBottom;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
    }
    #source-fx-overlay .source-fx-menu-right-top {
      grid-area: rightTop;
      display: grid;
      grid-template-columns: 72px 100px;
      align-items: center;
      justify-content: end;
      gap: 10px;
      min-width: 0;
    }
    #source-fx-overlay .source-fx-menu-right-bottom {
      grid-area: rightBottom;
      display: grid;
      grid-template-columns: 72px 100px;
      align-items: center;
      justify-content: end;
      gap: 10px;
      min-width: 0;
    }

    /* ── Pill Buttons in Toolbar ── */
    #source-fx-overlay .source-fx-menu-pill {
      height: 26px;
      border-radius: var(--radius-sm, 8px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: var(--header-btn-bg, rgba(255, 255, 255, 0.06));
      color: var(--text-secondary, rgba(235, 235, 245, 0.6));
      font-size: 11px;
      font-weight: 600;
      padding: 0 10px;
      box-shadow: none;
      white-space: nowrap;
      transition: background var(--duration-instant, 80ms), color var(--duration-instant, 80ms);
    }
    #source-fx-overlay .source-fx-menu-pill:hover {
      background: var(--material-thin, rgba(255, 255, 255, 0.08));
      color: var(--text, #e5e5ea);
    }
    #source-fx-overlay .source-fx-menu-pill.icon {
      width: 26px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      line-height: 1;
    }
    #source-fx-overlay .source-fx-menu-pill.disabled {
      color: var(--text-tertiary, rgba(235, 235, 245, 0.3));
      opacity: 0.6;
    }
    #source-fx-overlay .source-fx-menu-pill.group {
      display: inline-flex;
      padding: 0;
      overflow: hidden;
      border-radius: var(--radius-sm, 8px);
    }
    #source-fx-overlay .source-fx-menu-pill.group > button {
      height: 100%;
      border: 0;
      border-right: 1px solid rgba(255, 255, 255, 0.08);
      background: transparent;
      color: inherit;
      font-size: inherit;
      font-weight: inherit;
      padding: 0 12px;
      cursor: pointer;
      transition: background var(--duration-instant, 80ms), color var(--duration-instant, 80ms);
    }
    #source-fx-overlay .source-fx-menu-pill.group > button:hover {
      background: var(--material-thin, rgba(255, 255, 255, 0.08));
      color: var(--text, #e5e5ea);
    }
    #source-fx-overlay .source-fx-menu-pill.group > button:last-child {
      border-right: 0;
    }
    #source-fx-overlay .source-fx-menu-pill.group > button:disabled {
      color: var(--text-tertiary, rgba(235, 235, 245, 0.3));
      cursor: default;
    }
    #source-fx-overlay .source-fx-menu-left-bottom > .source-fx-menu-pill.disabled {
      width: 72px;
      min-width: 72px;
      max-width: 72px;
      height: 20px;
      min-height: 20px;
      border-radius: 6px;
      padding: 0 10px;
      font-size: 11px;
      line-height: 20px;
    }
    #source-fx-overlay .source-fx-menu-left-bottom > .source-fx-menu-pill.group {
      width: 100px;
      min-width: 100px;
      height: 20px;
      min-height: 20px;
      border-radius: 6px;
    }
    #source-fx-overlay .source-fx-menu-left-bottom > .source-fx-menu-pill.group > button {
      width: 50px;
      min-width: 50px;
      height: 20px;
      min-height: 20px;
      padding: 0;
      font-size: 11px;
      line-height: 20px;
    }
    #source-fx-overlay .source-fx-menu-left-bottom > .source-fx-menu-pill.group:first-child {
      width: 60px;
      min-width: 60px;
      max-width: 60px;
    }
    #source-fx-overlay .source-fx-menu-left-bottom > .source-fx-menu-pill.group:first-child > button {
      width: auto;
      min-width: 0;
      max-width: none;
      flex: 1 1 0;
      padding: 0;
    }
    #source-fx-overlay .source-fx-menu-label {
      color: var(--text-secondary, rgba(235, 235, 245, 0.6));
      font-size: 11px;
      font-weight: 600;
      white-space: nowrap;
    }
    #source-fx-overlay .source-fx-menu-select {
      min-width: 130px;
      height: 20px;
      border-radius: var(--radius-sm, 8px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: var(--header-btn-bg, rgba(255, 255, 255, 0.06));
      color: var(--text, #e5e5ea);
      font-size: 12px;
      font-weight: 500;
      padding: 0 22px 0 8px;
      -webkit-appearance: none;
      appearance: none;
      outline: none;
      cursor: pointer;
    }
    #source-fx-overlay .source-fx-menu-select:focus {
      border-color: var(--accent, #0a84ff);
      box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.2);
    }
    #source-fx-overlay .source-fx-menu-select option {
      background: var(--material-chrome, rgba(30, 30, 30, 0.95));
      color: var(--text, #e5e5ea);
      font-size: 12px;
    }
    #source-fx-overlay .source-fx-menu-left-top .source-fx-menu-select {
      width: 260px;
      min-width: 260px;
      max-width: 260px;
      height: 24px;
      border-radius: 6px;
    }

    /* ── Preset Trigger Button ── */
    #source-fx-overlay .source-fx-preset-trigger {
      width: 260px;
      min-width: 260px;
      max-width: 260px;
      height: 28px;
      border-radius: var(--radius-sm, 8px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: var(--header-btn-bg, rgba(255, 255, 255, 0.06));
      color: var(--text, #e5e5ea);
      font-size: 12px;
      font-weight: 500;
      padding: 0 26px 0 10px;
      cursor: pointer;
      display: flex;
      align-items: center;
      position: relative;
      text-align: left;
      box-shadow: none;
      font-family: inherit;
      transition: border-color var(--duration-instant, 80ms), background var(--duration-instant, 80ms);
    }
    #source-fx-overlay .source-fx-preset-trigger:hover {
      background: var(--material-thin, rgba(255, 255, 255, 0.09));
      border-color: rgba(255, 255, 255, 0.16);
    }
    #source-fx-overlay .source-fx-preset-trigger-text {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    #source-fx-overlay .source-fx-preset-trigger-chevron {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
      opacity: 0.45;
    }

    /* ── Preset Dropdown — Apple menu style ── */
    #source-fx-overlay .source-fx-preset-dropdown {
      display: none;
      position: fixed;
      width: 280px;
      max-height: 420px;
      overflow-y: auto;
      background: var(--material-chrome, rgba(30, 30, 30, 0.88));
      backdrop-filter: saturate(180%) blur(40px);
      -webkit-backdrop-filter: saturate(180%) blur(40px);
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: var(--radius-md, 10px);
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45), 0 0 0 0.5px rgba(255, 255, 255, 0.06);
      z-index: 99999;
      padding: 4px;
      font-family: inherit;
    }
    #source-fx-overlay .source-fx-preset-dropdown.open { display: block; }
    #source-fx-overlay .source-fx-preset-dropdown .sfx-dd-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 28px;
      padding: 0 12px;
      font-size: 13px;
      font-weight: 400;
      color: var(--text, #e5e5ea);
      cursor: pointer;
      user-select: none;
      position: relative;
      border-radius: 6px;
    }
    #source-fx-overlay .source-fx-preset-dropdown .sfx-dd-item:hover {
      background: var(--accent, #0a84ff);
      color: #fff;
    }
    #source-fx-overlay .source-fx-preset-dropdown .sfx-dd-item.disabled {
      color: var(--text-tertiary, rgba(235, 235, 245, 0.3));
      cursor: default;
    }
    #source-fx-overlay .source-fx-preset-dropdown .sfx-dd-item.disabled:hover {
      background: transparent;
      color: var(--text-tertiary, rgba(235, 235, 245, 0.3));
    }
    #source-fx-overlay .source-fx-preset-dropdown .sfx-dd-divider {
      height: 1px;
      background: rgba(255, 255, 255, 0.08);
      margin: 4px 8px;
    }
    #source-fx-overlay .source-fx-preset-dropdown .sfx-dd-item .sfx-dd-shortcut {
      color: var(--text-tertiary, rgba(235, 235, 245, 0.3));
      font-size: 12px;
      margin-left: auto;
      padding-left: 16px;
    }
    #source-fx-overlay .source-fx-preset-dropdown .sfx-dd-item:hover .sfx-dd-shortcut {
      color: rgba(255, 255, 255, 0.7);
    }
    #source-fx-overlay .source-fx-preset-dropdown .sfx-dd-item .sfx-dd-arrow {
      margin-left: auto;
      padding-left: 10px;
      font-size: 11px;
      color: var(--text-tertiary, rgba(235, 235, 245, 0.3));
    }
    #source-fx-overlay .source-fx-preset-dropdown .sfx-dd-item:hover .sfx-dd-arrow {
      color: rgba(255, 255, 255, 0.8);
    }
    #source-fx-overlay .source-fx-preset-dropdown .sfx-dd-submenu-wrap {
      position: relative;
    }
    #source-fx-overlay .source-fx-preset-dropdown .sfx-dd-submenu {
      display: none;
      position: absolute;
      left: 100%;
      top: -4px;
      width: 220px;
      max-height: 320px;
      overflow-y: auto;
      background: var(--material-chrome, rgba(30, 30, 30, 0.88));
      backdrop-filter: saturate(180%) blur(40px);
      -webkit-backdrop-filter: saturate(180%) blur(40px);
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: var(--radius-md, 10px);
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45), 0 0 0 0.5px rgba(255, 255, 255, 0.06);
      padding: 4px;
      z-index: 10000;
      font-family: inherit;
    }
    #source-fx-overlay .source-fx-preset-dropdown .sfx-dd-submenu-wrap:hover > .sfx-dd-submenu {
      display: block;
    }
    #source-fx-overlay .source-fx-menu-right-top .source-fx-menu-select {
      width: 100px;
      min-width: 100px;
      max-width: 100px;
      height: 24px;
      border-radius: 6px;
    }
    #source-fx-overlay .source-fx-menu-right-bottom .source-fx-menu-select {
      width: 70px;
      min-width: 70px;
      max-width: 70px;
      height: 20px;
      border-radius: 6px;
    }
    #source-fx-overlay .source-fx-menu-right-bottom .source-fx-menu-pill.icon {
      width: 26px;
      min-width: 26px;
      max-width: 26px;
      height: 20px;
      min-height: 20px;
      border-radius: 6px;
      font-size: 12px;
    }
    #source-fx-overlay .source-fx-menu-right-bottom .source-fx-menu-label,
    #source-fx-overlay .source-fx-menu-right-top .source-fx-menu-label {
      justify-self: end;
      text-align: right;
    }
    #source-fx-overlay .source-fx-rb-group {
      display: flex;
      align-items: center;
      gap: 2px;
      width: 100px;
    }

    /* ── Body — Split Pane (List + Editor) ── */
    #source-fx-overlay .rec-fx-body {
      flex: 1 1 auto;
      min-height: 0;
      padding: 0;
      gap: 0;
      overflow: hidden;
      background: transparent;
      color: var(--text, #e5e5ea);
      display: flex;
      flex-direction: row;
    }
    #source-fx-overlay .rec-fx-tab-btn {
      min-height: 28px;
      border-radius: var(--radius-sm, 8px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: var(--header-btn-bg, rgba(255, 255, 255, 0.06));
      color: var(--text-secondary, rgba(235, 235, 245, 0.6));
      font-size: 12px;
      font-weight: 600;
      padding: 5px 12px;
      box-shadow: none;
      transition: background var(--duration-instant, 80ms), color var(--duration-instant, 80ms);
    }
    #source-fx-overlay .rec-fx-tab-btn.active {
      color: #fff;
      border-color: rgba(10, 132, 255, 0.4);
      background: rgba(10, 132, 255, 0.18);
    }
    #source-fx-overlay .rec-ch-popup-close {
      width: 24px;
      height: 24px;
      border-radius: 6px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: var(--header-btn-bg, rgba(255, 255, 255, 0.06));
      color: var(--text, #e5e5ea);
      box-shadow: none;
    }
    #source-fx-overlay .rec-ch-popup-close:hover {
      background: var(--material-thin, rgba(255, 255, 255, 0.1));
      color: #fff;
    }
    #source-fx-overlay .rec-ch-popup-close svg {
      width: 13px;
      height: 13px;
    }
    #source-fx-overlay .rec-fx-tabs {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
    }

    /* ── Footer — Mode Tabs + Add Button ── */
    #source-fx-overlay .source-fx-footer {
      width: 100%;
      flex: 0 0 46px;
      height: 46px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      background: var(--material-ultrathin, rgba(255, 255, 255, 0.03));
      color: var(--text, #e5e5ea);
      font-size: 14px;
      line-height: 1;
      font-weight: 500;
      display: flex;
      align-items: center;
      letter-spacing: -0.01em;
      align-self: stretch;
      position: relative;
      padding: 0 10px;
      gap: 0;
    }
    #source-fx-overlay .source-fx-footer-label {
      flex: 1 1 auto;
      text-align: center;
      margin-left: 0;
      color: var(--text-secondary, rgba(235, 235, 245, 0.6));
      font-size: 13px;
      font-weight: 500;
    }
    #source-fx-overlay .source-fx-footer-tabs {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      gap: 0;
      border-radius: var(--radius-sm, 8px);
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: var(--material-ultrathin, rgba(255, 255, 255, 0.03));
    }
    #source-fx-overlay .source-fx-footer-tab {
      padding: 5px 12px;
      border: none;
      background: transparent;
      color: var(--text-tertiary, rgba(235, 235, 245, 0.3));
      font-size: 12px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      transition: background var(--duration-instant, 80ms), color var(--duration-instant, 80ms);
      letter-spacing: 0.2px;
      line-height: 1;
    }
    #source-fx-overlay .source-fx-footer-tab:not(:last-child) {
      border-right: 1px solid rgba(255, 255, 255, 0.06);
    }
    #source-fx-overlay .source-fx-footer-tab:hover {
      background: var(--header-btn-bg, rgba(255, 255, 255, 0.06));
      color: var(--text-secondary, rgba(235, 235, 245, 0.6));
    }
    #source-fx-overlay .source-fx-footer-tab.active {
      background: rgba(10, 132, 255, 0.18);
      color: #fff;
    }
    #source-fx-overlay .source-fx-footer-add-btn {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      width: 32px;
      height: 32px;
      border-radius: var(--radius-sm, 8px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: var(--header-btn-bg, rgba(255, 255, 255, 0.06));
      color: var(--text, #e5e5ea);
      font-size: 24px;
      font-weight: 300;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: none;
      padding: 0;
      transition: background var(--duration-instant, 80ms), color var(--duration-instant, 80ms),
                  transform var(--duration-fast, 150ms) var(--ease-spring, cubic-bezier(0.2, 0.9, 0.3, 1));
    }
    #source-fx-overlay .source-fx-footer-add-btn:hover {
      background: rgba(10, 132, 255, 0.15);
      color: #fff;
      border-color: rgba(10, 132, 255, 0.3);
    }
    #source-fx-overlay .source-fx-footer-add-btn:active {
      transform: translateY(-50%) scale(0.94);
    }
    #source-fx-overlay .source-fx-footer-add-btn:disabled {
      opacity: 0.35;
      cursor: not-allowed;
      background: transparent;
      color: var(--text-tertiary, rgba(235, 235, 245, 0.3));
    }

    /* ── FX Add Picker — Frosted Menu ── */
    #source-fx-overlay .source-fx-add-picker {
      display: none;
      flex-direction: column;
      position: absolute;
      left: 10px;
      bottom: 100%;
      margin-bottom: 6px;
      width: 240px;
      max-height: 380px;
      overflow: hidden;
      background: var(--material-chrome, rgba(30, 30, 30, 0.88));
      backdrop-filter: saturate(180%) blur(40px);
      -webkit-backdrop-filter: saturate(180%) blur(40px);
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: var(--radius-md, 10px);
      box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(255, 255, 255, 0.06);
      z-index: 9999;
      padding: 0;
      font-family: inherit;
      font-size: 13px;
      font-weight: 400;
      line-height: normal;
      letter-spacing: normal;
      -webkit-font-smoothing: antialiased;
    }
    #source-fx-overlay .source-fx-add-picker.open { display: flex; }
    #source-fx-overlay .source-fx-add-picker .sfx-add-search-wrap {
      position: sticky;
      top: 0;
      z-index: 2;
      padding: 8px 8px 6px;
      background: transparent;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      flex-shrink: 0;
    }
    #source-fx-overlay .source-fx-add-picker .sfx-add-search-inner {
      display: flex;
      align-items: center;
      gap: 6px;
      background: var(--material-thin, rgba(255, 255, 255, 0.08));
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: var(--radius-sm, 8px);
      padding: 0 10px;
      height: 30px;
    }
    #source-fx-overlay .source-fx-add-picker .sfx-add-search-icon {
      flex-shrink: 0;
      width: 14px;
      height: 14px;
      color: var(--text-tertiary, rgba(235, 235, 245, 0.3));
      display: block;
    }
    #source-fx-overlay .source-fx-add-picker .sfx-add-search-input {
      flex: 1;
      border: none;
      outline: none;
      background: transparent;
      font-family: inherit;
      font-size: 13px;
      font-weight: 400;
      color: var(--text, #e5e5ea);
      padding: 0;
      margin: 0;
      line-height: 30px;
    }
    #source-fx-overlay .source-fx-add-picker .sfx-add-search-input:focus,
    #source-fx-overlay .source-fx-add-picker .sfx-add-search-input:focus-visible {
      outline: none;
      box-shadow: none;
    }
    #source-fx-overlay .source-fx-add-picker .sfx-add-search-input::placeholder {
      color: var(--text-tertiary, rgba(235, 235, 245, 0.3));
    }
    #source-fx-overlay .source-fx-add-picker .sfx-add-list {
      overflow-y: auto;
      flex: 1 1 auto;
      padding: 4px;
      max-height: 310px;
      -webkit-overflow-scrolling: touch;
    }
    #source-fx-overlay .source-fx-add-picker .sfx-add-item {
      display: flex;
      align-items: center;
      height: 28px;
      padding: 0 12px;
      font-family: inherit;
      font-size: 13px;
      font-weight: 400;
      color: var(--text, #e5e5ea);
      cursor: default;
      user-select: none;
      border-radius: 6px;
      margin: 0;
      transition: none;
    }
    #source-fx-overlay .source-fx-add-picker .sfx-add-item:hover {
      background: var(--accent, #0a84ff);
      color: #fff;
    }
    #source-fx-overlay .source-fx-add-picker .sfx-add-item:focus,
    #source-fx-overlay .source-fx-add-picker .sfx-add-item:focus-visible,
    #source-fx-overlay .source-fx-add-picker .sfx-add-search-inner:focus-within {
      outline: none;
      box-shadow: none;
    }
    #source-fx-overlay .source-fx-add-picker .sfx-add-no-results {
      padding: 12px 16px;
      color: var(--text-tertiary, rgba(235, 235, 245, 0.3));
      font-size: 12px;
      text-align: center;
    }

    /* ── FX List & Editor Panels ── */
    #source-fx-overlay .rec-fx-panel {
      gap: 12px;
      min-height: 0;
    }
    #source-fx-overlay .source-fx-mode-panel.active {
      display: flex;
      flex: 1 1 auto;
      min-height: 0;
      flex-direction: column;
    }
    #source-fx-overlay #source-fx-panel-fx.active {
      display: flex;
      flex-direction: row;
      gap: 0;
      flex: 1 1 auto;
      min-height: 0;
    }
    #source-fx-overlay #source-fx-list {
      width: 200px;
      min-width: 200px;
      max-width: 200px;
      flex: 0 0 200px;
      min-height: 0;
      max-height: 100%;
      overflow-y: auto;
      border: none;
      border-right: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 0;
      background: var(--material-thin, rgba(44, 44, 46, 0.6));
      padding: 8px;
    }
    #source-fx-overlay #source-fx-editor {
      flex: 1 1 auto;
      min-height: 0;
      max-height: 100%;
      overflow-y: auto;
      border: none;
      border-radius: 0;
      background: transparent;
      padding: 14px 16px;
    }
    #source-fx-overlay #source-fx-presets-list {
      max-height: 58vh;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: var(--radius-md, 10px);
      background: var(--material-thin, rgba(44, 44, 46, 0.6));
    }
    #source-fx-overlay .rec-fx-add-row,
    #source-fx-overlay .rec-fx-master-row,
    #source-fx-overlay .rec-fx-save-row {
      margin: 0;
      padding: 0;
    }
    #source-fx-overlay .rec-fx-input,
    #source-fx-overlay .rec-fx-select {
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: var(--header-btn-bg, rgba(255, 255, 255, 0.06));
      color: var(--text, #e5e5ea);
      border-radius: var(--radius-sm, 8px);
      font-size: 13px;
      padding: 7px 10px;
    }
    #source-fx-overlay .rec-fx-select {
      min-height: 32px;
      border-radius: var(--radius-sm, 8px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: var(--header-btn-bg, rgba(255, 255, 255, 0.06));
      color: var(--text, #e5e5ea);
      font-size: 13px;
      font-weight: 500;
      padding: 6px 30px 6px 10px;
      -webkit-appearance: none;
      appearance: none;
      cursor: pointer;
    }
    #source-fx-overlay .rec-fx-select:focus {
      outline: none;
      border-color: var(--accent, #0a84ff);
      box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.2);
    }
    #source-fx-overlay .rec-fx-select option {
      background: var(--material-chrome, rgba(30, 30, 30, 0.95));
      color: var(--text, #e5e5ea);
      font-size: 13px;
    }
    #source-fx-overlay .rec-fx-select optgroup {
      background: var(--material-chrome, rgba(30, 30, 30, 0.95));
      color: var(--text, #e5e5ea);
      font-size: 13px;
      font-weight: 600;
    }
    #source-fx-overlay .rec-fx-input:focus {
      border-color: var(--accent, #0a84ff);
      box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.2);
    }
    #source-fx-overlay .rec-fx-btn.secondary {
      border-color: rgba(255, 255, 255, 0.1);
      background: var(--header-btn-bg, rgba(255, 255, 255, 0.06));
      color: var(--text-secondary, rgba(235, 235, 245, 0.6));
    }
    #source-fx-overlay .rec-fx-btn.secondary:hover {
      background: var(--material-thin, rgba(255, 255, 255, 0.08));
    }
    #source-fx-overlay .rec-fx-btn.secondary.active {
      border-color: rgba(10, 132, 255, 0.4);
      color: #fff;
      background: rgba(10, 132, 255, 0.18);
    }
    #source-fx-overlay .rec-fx-btn {
      border: 1px solid rgba(10, 132, 255, 0.4);
      background: var(--accent, #0a84ff);
      color: #fff;
      border-radius: var(--radius-sm, 8px);
      font-size: 12px;
      font-weight: 600;
      padding: 7px 14px;
      cursor: pointer;
      transition: background var(--duration-instant, 80ms), transform var(--duration-fast, 150ms) var(--ease-spring, cubic-bezier(0.2,0.9,0.3,1));
    }
    #source-fx-overlay .rec-fx-btn:hover {
      background: var(--accent-hover, #0070e0);
    }
    #source-fx-overlay .rec-fx-btn:active { transform: scale(0.97); }

    /* ── FX List Items ── */
    #source-fx-overlay .rec-fx-item {
      display: flex;
      align-items: center;
      gap: 10px;
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: var(--radius-sm, 8px);
      padding: 7px 10px;
      background: var(--material-ultrathin, rgba(255, 255, 255, 0.03));
      cursor: default;
      transition: background var(--duration-instant, 80ms), border-color var(--duration-instant, 80ms),
                  transform 0.2s cubic-bezier(.2,.8,.4,1);
    }
    #source-fx-overlay .rec-fx-item:hover {
      background: var(--header-btn-bg, rgba(255, 255, 255, 0.06));
    }
    #source-fx-overlay .rec-fx-item.active {
      border-color: rgba(10, 132, 255, 0.4);
      background: rgba(10, 132, 255, 0.12);
    }
    #source-fx-overlay .rec-fx-item.sortable-ghost {
      opacity: 1;
      z-index: 10;
      position: relative;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
      transition: none;
    }
    #source-fx-overlay .rec-fx-item.sortable-shift-down {
      transform: translateY(var(--sortable-shift, 0px));
    }
    #source-fx-overlay .rec-fx-item.sortable-shift-up {
      transform: translateY(calc(-1 * var(--sortable-shift, 0px)));
    }
    #source-fx-overlay .rec-fx-item .sli-eye {
      width: 16px;
      height: 16px;
      cursor: pointer;
      opacity: 0.5;
      flex-shrink: 0;
      transition: opacity var(--duration-instant, 80ms);
    }
    #source-fx-overlay .rec-fx-item .sli-eye .eye-slash { display: none; }
    #source-fx-overlay .rec-fx-item .sli-eye.hidden .eye-slash { display: block; }
    #source-fx-overlay .rec-fx-item .sli-eye:hover { opacity: 1; }
    #source-fx-overlay .rec-fx-item-title {
      color: var(--text, #e5e5ea);
      font-size: 12px;
      font-weight: 500;
    }
    #source-fx-overlay .rec-fx-item-empty {
      color: var(--text-tertiary, rgba(235, 235, 245, 0.3));
    }

    /* ── Editor Title + Params ── */
    #source-fx-overlay .rec-fx-editor-title {
      color: var(--accent, #0a84ff);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    #source-fx-overlay .video-fx-delete-btn {
      font-size: 13px;
      color: var(--text-tertiary, rgba(235, 235, 245, 0.3));
      cursor: pointer;
      padding: 2px 6px;
      border-radius: 4px;
      transition: color 0.15s, background 0.15s;
      font-weight: 400;
    }
    #source-fx-overlay .video-fx-delete-btn:hover {
      color: #ff453a;
      background: rgba(255, 69, 58, 0.12);
    }
    #source-fx-overlay .rec-fx-param-label,
    #source-fx-overlay .rec-fx-param-value {
      color: var(--text-secondary, rgba(235, 235, 245, 0.6));
    }
    #source-fx-overlay .rec-fx-param label {
      font-size: 11px;
      color: var(--text-secondary, rgba(235, 235, 245, 0.6));
      font-weight: 500;
      text-transform: none;
      letter-spacing: 0;
    }
    #source-fx-overlay .rec-fx-param span {
      font-size: 11px;
      font-family: 'SF Mono', Menlo, monospace;
      color: var(--text, #e5e5ea);
      font-variant-numeric: tabular-nums;
    }
    #source-fx-overlay .rec-fx-param {
      grid-template-columns: 80px 1fr 52px;
      gap: 10px;
    }

    /* ── Apple-style Sliders ── */
    #source-fx-overlay .rec-fx-param input[type="range"] {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 4px;
      border-radius: 2px;
      background: rgba(255, 255, 255, 0.12);
      outline: none;
      cursor: pointer;
    }
    #source-fx-overlay .rec-fx-param input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #fff;
      border: 1px solid rgba(0, 0, 0, 0.12);
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(0, 0, 0, 0.05);
      cursor: pointer;
      transition: transform 0.08s ease;
    }
    #source-fx-overlay .rec-fx-param input[type="range"]:active::-webkit-slider-thumb {
      transform: scale(1.1);
    }
    #source-fx-overlay .rec-fx-param input[type="range"]::-moz-range-track {
      height: 4px;
      border-radius: 2px;
      border: none;
      background: rgba(255, 255, 255, 0.12);
    }
    #source-fx-overlay .rec-fx-param input[type="range"]::-moz-range-thumb {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 1px solid rgba(0, 0, 0, 0.12);
      background: #fff;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
      cursor: pointer;
    }

    /* ── Shared Components — Source FX Rows, Folders, Presets ── */
    #source-fx-list {
      max-height: 280px;
      overflow: auto;
      padding: 2px 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .source-fx-row {
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: var(--radius-sm, 8px);
      background: rgba(255, 255, 255, 0.03);
      padding: 7px 10px;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: background var(--duration-instant, 80ms), border-color var(--duration-instant, 80ms);
    }
    .source-fx-row:hover {
      background: rgba(255, 255, 255, 0.06);
    }
    .source-fx-row.dragging {
      opacity: 0.4;
      border-color: rgba(10, 132, 255, 0.4);
    }
    .source-fx-row.drop-target {
      border-color: var(--accent, #0a84ff);
      box-shadow: inset 0 0 0 1px rgba(10, 132, 255, 0.3);
    }
    .source-fx-row .fx-drag {
      width: 16px;
      height: 16px;
      border: none;
      border-radius: 3px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--text-tertiary, rgba(235, 235, 245, 0.3));
      font-size: 11px;
      cursor: default;
      flex-shrink: 0;
      user-select: none;
    }
    .source-fx-row .fx-title {
      flex: 1;
      min-width: 0;
      font-size: 12px;
      font-weight: 500;
      color: var(--text, #e5e5ea);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .source-fx-row .fx-toggle {
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(255, 255, 255, 0.05);
      color: var(--text-secondary, rgba(235, 235, 245, 0.6));
      border-radius: 6px;
      min-width: 54px;
      height: 22px;
      font-size: 10px;
      font-weight: 600;
      cursor: pointer;
      transition: background var(--duration-instant, 80ms), border-color var(--duration-instant, 80ms);
    }
    .source-fx-row .fx-toggle.on {
      color: #fff;
      border-color: rgba(10, 132, 255, 0.4);
      background: rgba(10, 132, 255, 0.2);
    }
    .source-fx-row .fx-icon-btn {
      width: 22px;
      height: 22px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.04);
      color: var(--text-secondary, rgba(235, 235, 245, 0.6));
      font-size: 12px;
      line-height: 1;
      padding: 0;
      cursor: pointer;
      transition: background var(--duration-instant, 80ms), color var(--duration-instant, 80ms);
    }
    .source-fx-row .fx-icon-btn:hover {
      background: rgba(10, 132, 255, 0.12);
      color: var(--text, #e5e5ea);
    }
    .source-fx-row .fx-open-btn {
      border: 1px solid rgba(10, 132, 255, 0.3);
      background: rgba(10, 132, 255, 0.12);
      color: #fff;
      border-radius: 6px;
      height: 22px;
      padding: 0 10px;
      font-size: 10px;
      font-weight: 600;
      cursor: pointer;
      flex-shrink: 0;
      transition: background var(--duration-instant, 80ms);
    }
    .source-fx-row .fx-open-btn:hover {
      background: rgba(10, 132, 255, 0.22);
    }
    .source-fx-row .fx-open-btn.disabled {
      opacity: 0.35;
      cursor: not-allowed;
      border-color: rgba(255, 255, 255, 0.06);
      background: rgba(255, 255, 255, 0.03);
      color: var(--text-tertiary, rgba(235, 235, 245, 0.3));
      pointer-events: none;
    }

    .source-fx-master-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 12px 12px;
    }
    .source-fx-master-btn {
      height: 26px;
      border-radius: var(--radius-sm, 8px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(255, 255, 255, 0.05);
      color: var(--text-secondary, rgba(235, 235, 245, 0.6));
      font-size: 11px;
      font-weight: 600;
      padding: 0 12px;
      cursor: pointer;
      line-height: 1;
      transition: background var(--duration-instant, 80ms), color var(--duration-instant, 80ms);
    }
    .source-fx-master-btn:hover {
      background: rgba(255, 255, 255, 0.08);
    }
    .source-fx-master-btn.active {
      border-color: rgba(10, 132, 255, 0.4);
      background: rgba(10, 132, 255, 0.18);
      color: #fff;
    }

    /* ── Plugin Folders ── */
    .source-fx-folder-wrap {
      margin: 0 12px 12px;
      padding: 12px;
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: var(--radius-sm, 8px);
      background: rgba(0, 0, 0, 0.12);
    }
    .source-fx-folder-title {
      font-size: 11px;
      color: var(--text-tertiary, rgba(235, 235, 245, 0.3));
      font-weight: 600;
      letter-spacing: 0.4px;
      margin-bottom: 8px;
      text-transform: uppercase;
    }
    .source-fx-folder-actions {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 8px;
      flex-wrap: wrap;
    }
    .source-fx-folder-actions button {
      height: 24px;
      border-radius: 6px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(255, 255, 255, 0.05);
      color: var(--text-secondary, rgba(235, 235, 245, 0.6));
      font-size: 11px;
      font-weight: 500;
      padding: 0 10px;
      cursor: pointer;
      transition: background var(--duration-instant, 80ms), color var(--duration-instant, 80ms);
    }
    .source-fx-folder-actions button:hover {
      border-color: rgba(10, 132, 255, 0.3);
      color: #fff;
      background: rgba(10, 132, 255, 0.12);
    }
    .source-fx-folder-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
      max-height: 110px;
      overflow: auto;
      padding-right: 2px;
    }
    .source-fx-folder-row {
      display: flex;
      align-items: center;
      gap: 8px;
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 6px;
      padding: 6px 8px;
      background: rgba(255, 255, 255, 0.03);
      min-width: 0;
    }
    .source-fx-folder-tag {
      font-size: 9px;
      font-weight: 700;
      color: var(--accent, #0a84ff);
      border: 1px solid rgba(10, 132, 255, 0.3);
      border-radius: 999px;
      padding: 1px 7px;
      flex-shrink: 0;
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }
    .source-fx-folder-path {
      flex: 1;
      min-width: 0;
      color: var(--text-secondary, rgba(235, 235, 245, 0.6));
      font-size: 11px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .source-fx-folder-remove {
      width: 20px;
      height: 20px;
      border-radius: 5px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.04);
      color: var(--text-tertiary, rgba(235, 235, 245, 0.3));
      font-size: 12px;
      line-height: 1;
      cursor: pointer;
      flex-shrink: 0;
      padding: 0;
      transition: background var(--duration-instant, 80ms), color var(--duration-instant, 80ms);
    }
    .source-fx-folder-remove:hover {
      background: rgba(255, 59, 48, 0.15);
      color: #ff6961;
      border-color: rgba(255, 59, 48, 0.3);
    }

    /* ── Empty States + Tabs ── */
    .source-fx-empty {
      color: var(--text-tertiary, rgba(235, 235, 245, 0.3));
      font-size: 12px;
      padding: 16px 14px;
      border: 1px dashed rgba(255, 255, 255, 0.08);
      border-radius: var(--radius-sm, 8px);
      text-align: center;
      background: rgba(0, 0, 0, 0.08);
    }
    .source-fx-tabs {
      display: flex;
      gap: 6px;
      padding: 0 12px 10px;
    }
    .source-fx-header-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      background: rgba(10, 132, 255, 0.06);
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .source-fx-header-row .source-fx-tabs {
      padding: 0;
      margin-left: auto;
      flex-shrink: 0;
    }
    .source-fx-tab-btn {
      height: 26px;
      border-radius: var(--radius-sm, 8px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(255, 255, 255, 0.05);
      color: var(--text-secondary, rgba(235, 235, 245, 0.6));
      font-size: 11px;
      font-weight: 600;
      padding: 0 12px;
      cursor: pointer;
      transition: background var(--duration-instant, 80ms), color var(--duration-instant, 80ms);
    }
    .source-fx-tab-btn:hover {
      background: rgba(255, 255, 255, 0.08);
    }
    .source-fx-tab-btn.active {
      border-color: rgba(10, 132, 255, 0.4);
      background: rgba(10, 132, 255, 0.18);
      color: #fff;
    }
    .source-fx-mode-panel { display: none; }
    .source-fx-mode-panel.active { display: block; }
    .source-fx-subtabs {
      padding: 0 0 10px;
      justify-content: flex-start;
    }
    .source-fx-panel { display: none; }
    .source-fx-panel.active { display: block; }

    /* ── Presets List ── */
    #source-fx-presets-list {
      max-height: 230px;
      overflow: auto;
      padding: 4px 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .source-fx-preset-row {
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: var(--radius-sm, 8px);
      background: rgba(255, 255, 255, 0.03);
      padding: 8px 10px;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: background var(--duration-instant, 80ms);
    }
    .source-fx-preset-row:hover {
      background: rgba(255, 255, 255, 0.06);
    }
    .source-fx-preset-title {
      flex: 1;
      min-width: 0;
      color: var(--text, #e5e5ea);
      font-size: 12px;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .source-fx-preset-tag {
      color: var(--text-tertiary, rgba(235, 235, 245, 0.3));
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      font-weight: 600;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 999px;
      padding: 2px 8px;
      flex-shrink: 0;
    }
    .source-fx-preset-actions {
      display: flex;
      gap: 6px;
      flex-shrink: 0;
    }
    .source-fx-preset-actions button {
      height: 24px;
      border-radius: 6px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(255, 255, 255, 0.05);
      color: var(--text-secondary, rgba(235, 235, 245, 0.6));
      font-size: 11px;
      font-weight: 500;
      padding: 0 10px;
      cursor: pointer;
      transition: background var(--duration-instant, 80ms), color var(--duration-instant, 80ms);
    }
    .source-fx-preset-actions button:hover {
      background: rgba(10, 132, 255, 0.12);
      color: #fff;
      border-color: rgba(10, 132, 255, 0.3);
    }
    .source-fx-save-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 12px 10px;
    }
    .source-fx-save-row .sp-input {
      margin: 0;
      flex: 1;
    }

    /* ── Responsive ── */
    @media (max-width: 980px) {
      #source-fx-overlay .rec-fx-popup {
        width: min(94vw, 620px);
        min-width: 0;
        max-width: min(94vw, 620px);
        height: min(90vh, 580px);
        min-height: 0;
        max-height: min(90vh, 580px);
      }
      #source-fx-overlay .rec-fx-header { width: 100%; }
      #source-fx-overlay #source-fx-panel-fx.active {
        flex-direction: column;
      }
      #source-fx-overlay #source-fx-list,
      #source-fx-overlay #source-fx-editor {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        flex: none;
        min-height: 160px;
        max-height: 34vh;
      }
      #source-fx-overlay #source-fx-list {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      }
    }

    /* ══════════════════════════════════════════════
       APPLE LOW-LATENCY PERFORMANCE LAYER
       GPU compositing, containment, smooth scrolling
       ══════════════════════════════════════════════ */

    /* Global scrollbar — thin, macOS-native feel */
    * {
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
    }
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.10);
      border-radius: 3px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: rgba(255, 255, 255, 0.20);
    }
    ::-webkit-scrollbar-corner { background: transparent; }

    /* GPU compositing hints for animated elements */
    .ab-btn,
    .tab,
    .song-item,
    .lyric-btn,
    .btn,
    .btn-live,
    .add-btn,
    .quick-add,
    .seg-btn,
    .t-btn,
    .studio-pane-footer-btn,
    #btn-output-go-live,
    #btn-output-go-live-panel,
    #btn-output-end-live {
      will-change: transform;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }

    /* Content-visibility for offscreen studio dock panes */
    .studio-pane-body {
      content-visibility: auto;
      contain-intrinsic-size: 0 200px;
    }

    /* Smooth momentum scrolling */
    #lyric-buttons,
    .studio-pane-body,
    #controls-panel-body,
    .song-list,
    #program-display-stage {
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }

    /* Reduce paint for transforms — only animate composited props */
    .lyric-btn,
    .song-item,
    .ab-btn,
    .modal-content {
      transform: translateZ(0);
    }

    /* Selection color */
    ::selection {
      background: rgba(10, 132, 255, 0.3);
      color: inherit;
    }

    /* Focus-visible for keyboard nav — Apple ring */
    :focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.4);
      border-radius: var(--radius-sm);
    }

    /* Instant cursor feedback on interactive elements */
    button, [role="button"], .tab, .song-item, .lyric-btn, .seg-btn, .t-btn {
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }