/* FireWave DAW Universal Stylesheet Bundle (v1.0.0) */
/* === File: css/main.css === */
/* ==========================================================================
   FireWave DAW - Core Design System & Master Responsive Theme Engine
   Includes 6 Swappable High-Tech Aesthetic Themes & Adaptive Layout
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700;800&family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ==========================================================================
   1. Theme Palettes
   ========================================================================== */

/* ==========================================================================
   1. Theme Palettes (12 Pro Ultra-Customized Modern Audio Themes)
   ========================================================================== */

/* Theme 1: Studio Hardware Pro (Signature FL Studio Charcoal & Warm Amber) */
:root, [data-theme="fire"] {
  --bg-darkest: #0e1015;       /* Fondo principal carbón de hardware */
  --bg-darker: #13161f;        /* Toolbar y barras base */
  --bg-panel: #181b24;         /* Paneles de interfaz */
  --bg-panel-hover: #1f232f;   /* Hover en paneles */
  --bg-surface: #242937;       /* Superficies secundarias */
  --bg-surface-elevated: #2d3345;
  --border-dim: #222735;       /* Divisores discretos */
  --border-light: #2f364a;     /* Bordes estándar */
  --border-highlight: #ff6600; /* Foco naranja característico */

  --accent-primary: #ff6600;   /* Naranja firma FL Studio */
  --accent-primary-bright: #ff8833;
  --accent-primary-glow: rgba(255, 102, 0, 0.28);
  --accent-secondary: #00e5ff; /* Cyan técnico */
  --accent-secondary-glow: rgba(0, 229, 255, 0.2);
  --accent-cyan: #00e5ff;
  --accent-cyan-glow: rgba(0, 229, 255, 0.2);
  --accent-gold: #ffb800;
  --accent-purple: #a855f7;
  --accent-red: #ef4444;
  --accent-emerald: #10b981;

  --step-active: #ff6600;
  --step-beat-a: #242a38;
  --step-beat-b: #181c26;
  --step-border: #323a4e;

  --text-main: #f1f5f9;
  --text-muted: #94a3b8;
  --text-dim: #64748b;

  --glass-bg: rgba(24, 27, 36, 0.92);
  --glass-border: #2f364a;
  --theme-gradient: linear-gradient(180deg, #13161f 0%, #0e1015 100%);
  --workspace-pattern: radial-gradient(ellipse at 50% 25%, rgba(255, 102, 0, 0.05) 0%, transparent 70%), linear-gradient(rgba(53, 59, 74, 0.18) 1px, transparent 1px), linear-gradient(90deg, rgba(53, 59, 74, 0.18) 1px, transparent 1px);
  --workspace-pattern-size: auto, 28px 28px, 28px 28px;
  --window-header-bg: linear-gradient(90deg, #1e2330 0%, #171b25 100%);
  --window-shadow: 0 12px 32px rgba(0, 0, 0, 0.7);
  --window-focus-shadow: 0 16px 42px rgba(0, 0, 0, 0.85), 0 0 16px rgba(255, 102, 0, 0.25);
}

/* Theme 2: Cyberpunk Neon Studio (Laser Cyan & Hot Magenta) */
[data-theme="cyberpunk"] {
  --bg-darkest: #070711;       /* Deep Void Midnight */
  --bg-darker: #0c0d1e;
  --bg-panel: #121329;
  --bg-panel-hover: #191a38;
  --bg-surface: #1f2146;
  --bg-surface-elevated: #282b5c;
  --border-dim: #25244a;
  --border-light: #393872;
  --border-highlight: #00f3ff;

  --accent-primary: #ff0055;   /* Hot Magenta */
  --accent-primary-bright: #ff3377;
  --accent-primary-glow: rgba(255, 0, 85, 0.35);
  --accent-secondary: #00f3ff; /* Electric Laser Cyan */
  --accent-secondary-glow: rgba(0, 243, 255, 0.25);
  --accent-cyan: #00f3ff;
  --accent-cyan-glow: rgba(0, 243, 255, 0.25);
  --accent-gold: #ffe600;
  --accent-purple: #b537f2;
  --accent-red: #ff0055;
  --accent-emerald: #00f3ff;

  --step-active: #ff0055;
  --step-beat-a: #1e1f42;
  --step-beat-b: #13142d;
  --step-border: #38386e;

  --text-main: #f8fafc;
  --text-muted: #a5b4fc;
  --text-dim: #6366f1;

  --glass-bg: rgba(18, 19, 41, 0.92);
  --glass-border: #393872;
  --theme-gradient: linear-gradient(180deg, #0e0f22 0%, #070711 100%);
  --workspace-pattern: radial-gradient(circle at 50% 10%, rgba(255, 0, 85, 0.14) 0%, transparent 60%), radial-gradient(circle at 80% 90%, rgba(0, 243, 255, 0.09) 0%, transparent 50%), linear-gradient(rgba(0, 243, 255, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 0, 85, 0.1) 1px, transparent 1px);
  --workspace-pattern-size: auto, auto, 32px 32px, 32px 32px;
  --window-header-bg: linear-gradient(90deg, #1e1b42 0%, #12132c 100%);
  --window-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 0 14px rgba(255, 0, 85, 0.2);
  --window-focus-shadow: 0 20px 48px rgba(0, 0, 0, 0.95), 0 0 20px rgba(0, 243, 255, 0.35);
}

/* Theme 3: Slate Titanium Minimal (Nordic Clean Ice) */
[data-theme="slate"] {
  --bg-darkest: #0d1117;       /* Nordic Deep Navy */
  --bg-darker: #131922;
  --bg-panel: #17202c;
  --bg-panel-hover: #1e2938;
  --bg-surface: #243144;
  --bg-surface-elevated: #2d3d54;
  --border-dim: #222f42;
  --border-light: #31435e;
  --border-highlight: #38bdf8;

  --accent-primary: #38bdf8;   /* Ice Blue */
  --accent-primary-bright: #7dd3fc;
  --accent-primary-glow: rgba(56, 189, 248, 0.28);
  --accent-secondary: #818cf8;
  --accent-secondary-glow: rgba(129, 140, 248, 0.2);
  --accent-cyan: #38bdf8;
  --accent-cyan-glow: rgba(56, 189, 248, 0.2);
  --accent-gold: #fbbf24;
  --accent-purple: #c084fc;
  --accent-red: #f43f5e;
  --accent-emerald: #10b981;

  --step-active: #38bdf8;
  --step-beat-a: #202d3e;
  --step-beat-b: #151d28;
  --step-border: #31435e;

  --text-main: #f1f5f9;
  --text-muted: #94a3b8;
  --text-dim: #64748b;

  --glass-bg: rgba(23, 32, 44, 0.92);
  --glass-border: #31435e;
  --theme-gradient: linear-gradient(180deg, #131922 0%, #0d1117 100%);
  --workspace-pattern: linear-gradient(rgba(56, 189, 248, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(56, 189, 248, 0.1) 1px, transparent 1px);
  --workspace-pattern-size: 22px 22px, 22px 22px;
  --window-header-bg: linear-gradient(90deg, #1c2737 0%, #141c27 100%);
  --window-shadow: 0 12px 30px rgba(0, 0, 0, 0.65);
  --window-focus-shadow: 0 18px 40px rgba(0, 0, 0, 0.75), 0 0 14px rgba(56, 189, 248, 0.25);
}

/* Theme 4: Midnight Nebula Studio (Cosmic Indigo & Amethyst Glow) */
[data-theme="nebula"] {
  --bg-darkest: #090714;       /* Deep Cosmic Indigo */
  --bg-darker: #0f0c22;
  --bg-panel: #151130;
  --bg-panel-hover: #1d1742;
  --bg-surface: #251e54;
  --bg-surface-elevated: #2f266b;
  --border-dim: #2b2055;
  --border-light: #3e3078;
  --border-highlight: #c084fc;

  --accent-primary: #a855f7;   /* Ultra Violet */
  --accent-primary-bright: #c084fc;
  --accent-primary-glow: rgba(168, 85, 247, 0.32);
  --accent-secondary: #f43f5e;
  --accent-secondary-glow: rgba(244, 63, 94, 0.22);
  --accent-cyan: #38bdf8;
  --accent-cyan-glow: rgba(56, 189, 248, 0.2);
  --accent-gold: #fbbf24;
  --accent-purple: #d946ef;
  --accent-red: #f43f5e;
  --accent-emerald: #10b981;

  --step-active: #a855f7;
  --step-beat-a: #231c4e;
  --step-beat-b: #161233;
  --step-border: #3c2c75;

  --text-main: #f8fafc;
  --text-muted: #cbd5e1;
  --text-dim: #7c68a4;

  --glass-bg: rgba(21, 17, 48, 0.92);
  --glass-border: #3e3078;
  --theme-gradient: linear-gradient(180deg, #100d25 0%, #090714 100%);
  --workspace-pattern: radial-gradient(ellipse at 40% 15%, rgba(168, 85, 247, 0.15) 0%, transparent 60%), radial-gradient(ellipse at 85% 80%, rgba(217, 70, 239, 0.1) 0%, transparent 55%), linear-gradient(rgba(168, 85, 247, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(168, 85, 247, 0.12) 1px, transparent 1px);
  --workspace-pattern-size: auto, auto, 30px 30px, 30px 30px;
  --window-header-bg: linear-gradient(90deg, #201a49 0%, #151131 100%);
  --window-shadow: 0 14px 36px rgba(0, 0, 0, 0.75), 0 0 12px rgba(168, 85, 247, 0.2);
  --window-focus-shadow: 0 20px 48px rgba(0, 0, 0, 0.85), 0 0 20px rgba(168, 85, 247, 0.35);
}

/* Theme 5: Emerald Matrix Studio (Phosphor Cyber Green) */
[data-theme="emerald"] {
  --bg-darkest: #040d07;       /* Terminal CRT Black-Green */
  --bg-darker: #07150c;
  --bg-panel: #0c1f12;
  --bg-panel-hover: #122a19;
  --bg-surface: #173721;
  --bg-surface-elevated: #1e452a;
  --border-dim: #163b22;
  --border-light: #235634;
  --border-highlight: #00ff88;

  --accent-primary: #00ff88;   /* Phosphor Green */
  --accent-primary-bright: #34d399;
  --accent-primary-glow: rgba(0, 255, 136, 0.32);
  --accent-secondary: #06b6d4;
  --accent-secondary-glow: rgba(6, 182, 212, 0.22);
  --accent-cyan: #22d3ee;
  --accent-cyan-glow: rgba(34, 211, 238, 0.2);
  --accent-gold: #fbbf24;
  --accent-purple: #a855f7;
  --accent-red: #ef4444;
  --accent-emerald: #00ff88;

  --step-active: #00ff88;
  --step-beat-a: #14321d;
  --step-beat-b: #0c2113;
  --step-border: #235634;

  --text-main: #f0fdf4;
  --text-muted: #86efac;
  --text-dim: #4ade80;

  --glass-bg: rgba(12, 31, 18, 0.92);
  --glass-border: #235634;
  --theme-gradient: linear-gradient(180deg, #09190e 0%, #040d07 100%);
  --workspace-pattern: radial-gradient(circle at 50% 20%, rgba(0, 255, 136, 0.09) 0%, transparent 65%), linear-gradient(rgba(0, 255, 136, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 136, 0.1) 1px, transparent 1px);
  --workspace-pattern-size: auto, 24px 24px, 24px 24px;
  --window-header-bg: linear-gradient(90deg, #112818 0%, #0a1b10 100%);
  --window-shadow: 0 14px 36px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 255, 136, 0.18);
  --window-focus-shadow: 0 20px 46px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 255, 136, 0.35);
}

/* Theme 6: Vintage Luxury Gold (Champagne & Analog Warmth) */
[data-theme="gold"] {
  --bg-darkest: #110d08;       /* Deep Mahogany Espresso */
  --bg-darker: #17120c;
  --bg-panel: #201a12;
  --bg-panel-hover: #2b2218;
  --bg-surface: #372c20;
  --bg-surface-elevated: #463829;
  --border-dim: #32271a;
  --border-light: #4b3b28;
  --border-highlight: #d4af37;

  --accent-primary: #d4af37;   /* Champagne Gold */
  --accent-primary-bright: #f3cf55;
  --accent-primary-glow: rgba(212, 175, 55, 0.3);
  --accent-secondary: #f59e0b;
  --accent-secondary-glow: rgba(245, 158, 11, 0.22);
  --accent-cyan: #38bdf8;
  --accent-cyan-glow: rgba(56, 189, 248, 0.2);
  --accent-gold: #d4af37;
  --accent-purple: #c084fc;
  --accent-red: #ef4444;
  --accent-emerald: #d4af37;

  --step-active: #d4af37;
  --step-beat-a: #2f2419;
  --step-beat-b: #1f1811;
  --step-border: #4a3a27;

  --text-main: #fef3c7;
  --text-muted: #d5c39c;
  --text-dim: #9a845f;

  --glass-bg: rgba(32, 26, 18, 0.92);
  --glass-border: #4b3b28;
  --theme-gradient: linear-gradient(180deg, #18130c 0%, #110d08 100%);
  --workspace-pattern: radial-gradient(ellipse at 50% 15%, rgba(212, 175, 55, 0.08) 0%, transparent 65%), linear-gradient(rgba(212, 175, 55, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(212, 175, 55, 0.09) 1px, transparent 1px);
  --workspace-pattern-size: auto, 26px 26px, 26px 26px;
  --window-header-bg: linear-gradient(90deg, #2d2318 0%, #1c160f 100%);
  --window-shadow: 0 14px 36px rgba(0, 0, 0, 0.75), 0 0 12px rgba(212, 175, 55, 0.15);
  --window-focus-shadow: 0 20px 46px rgba(0, 0, 0, 0.85), 0 0 18px rgba(212, 175, 55, 0.3);
}

/* Theme 7: Tokyo Night Studio (Neo-Tokyo Navy, Sakura Pink & Lavender) */
[data-theme="tokyo-night"] {
  --bg-darkest: #16161e;       /* Tokyo Night Navy */
  --bg-darker: #1a1b26;
  --bg-panel: #1f2335;
  --bg-panel-hover: #24283b;
  --bg-surface: #292e42;
  --bg-surface-elevated: #343b58;
  --border-dim: #292e42;
  --border-light: #3b4261;
  --border-highlight: #7aa2f7;

  --accent-primary: #7aa2f7;   /* Tokyo Blue */
  --accent-primary-bright: #bb9af7; /* Lavender */
  --accent-primary-glow: rgba(122, 162, 247, 0.3);
  --accent-secondary: #f7768e; /* Sakura Pink */
  --accent-secondary-glow: rgba(247, 118, 142, 0.22);
  --accent-cyan: #7dcfff;
  --accent-cyan-glow: rgba(125, 207, 255, 0.2);
  --accent-gold: #e0af68;
  --accent-purple: #bb9af7;
  --accent-red: #f7768e;
  --accent-emerald: #9ece6a;

  --step-active: #7aa2f7;
  --step-beat-a: #292f49;
  --step-beat-b: #1c2033;
  --step-border: #3b4366;

  --text-main: #c0caf5;
  --text-muted: #9aa5ce;
  --text-dim: #565f89;

  --glass-bg: rgba(31, 35, 53, 0.92);
  --glass-border: #3b4261;
  --theme-gradient: linear-gradient(180deg, #1a1b26 0%, #16161e 100%);
  --workspace-pattern: radial-gradient(circle at 60% 10%, rgba(187, 154, 247, 0.1) 0%, transparent 60%), linear-gradient(rgba(122, 162, 247, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(122, 162, 247, 0.1) 1px, transparent 1px);
  --workspace-pattern-size: auto, 28px 28px, 28px 28px;
  --window-header-bg: linear-gradient(90deg, #24293f 0%, #1a1b29 100%);
  --window-shadow: 0 14px 34px rgba(0, 0, 0, 0.65);
  --window-focus-shadow: 0 18px 42px rgba(0, 0, 0, 0.8), 0 0 16px rgba(122, 162, 247, 0.28);
}

/* Theme 8: Dracula Dark Pro (Gothic Slate & Vampire Pink) */
[data-theme="dracula"] {
  --bg-darkest: #191a21;       /* Dracula Abyss */
  --bg-darker: #21222c;
  --bg-panel: #282a36;
  --bg-panel-hover: #343746;
  --bg-surface: #44475a;
  --bg-surface-elevated: #6272a4;
  --border-dim: #343746;
  --border-light: #44475a;
  --border-highlight: #ff79c6;

  --accent-primary: #ff79c6;   /* Vampire Pink */
  --accent-primary-bright: #bd93f9; /* Dracula Purple */
  --accent-primary-glow: rgba(255, 121, 198, 0.32);
  --accent-secondary: #8be9fd; /* Cyan Blade */
  --accent-secondary-glow: rgba(139, 233, 253, 0.22);
  --accent-cyan: #8be9fd;
  --accent-cyan-glow: rgba(139, 233, 253, 0.22);
  --accent-gold: #f1fa8c;
  --accent-purple: #bd93f9;
  --accent-red: #ff5555;
  --accent-emerald: #50fa7b;   /* Venom Green */

  --step-active: #ff79c6;
  --step-beat-a: #383a4c;
  --step-beat-b: #242632;
  --step-border: #4d5066;

  --text-main: #f8f8f2;
  --text-muted: #bfbfb8;
  --text-dim: #6272a4;

  --glass-bg: rgba(40, 42, 54, 0.92);
  --glass-border: #44475a;
  --theme-gradient: linear-gradient(180deg, #22232e 0%, #191a21 100%);
  --workspace-pattern: radial-gradient(ellipse at 50% 20%, rgba(189, 147, 249, 0.12) 0%, transparent 60%), linear-gradient(rgba(139, 233, 253, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(139, 233, 253, 0.1) 1px, transparent 1px);
  --workspace-pattern-size: auto, 32px 32px, 32px 32px;
  --window-header-bg: linear-gradient(90deg, #343748 0%, #242633 100%);
  --window-shadow: 0 14px 36px rgba(0, 0, 0, 0.75);
  --window-focus-shadow: 0 20px 48px rgba(0, 0, 0, 0.85), 0 0 18px rgba(255, 121, 198, 0.3);
}

/* Theme 9: Monokai Pro Audio (Warm Matte Charcoal & Lime) */
[data-theme="monokai"] {
  --bg-darkest: #191916;       /* Monokai Charcoal */
  --bg-darker: #1e1f1c;
  --bg-panel: #272822;
  --bg-panel-hover: #33352d;
  --bg-surface: #3e4036;
  --bg-surface-elevated: #49483e;
  --border-dim: #33352d;
  --border-light: #49483e;
  --border-highlight: #a6e22e;

  --accent-primary: #a6e22e;   /* Monokai Lime Green */
  --accent-primary-bright: #e6db74;
  --accent-primary-glow: rgba(166, 226, 46, 0.3);
  --accent-secondary: #66d9ef; /* Sky Blue */
  --accent-secondary-glow: rgba(102, 217, 239, 0.22);
  --accent-cyan: #66d9ef;
  --accent-cyan-glow: rgba(102, 217, 239, 0.22);
  --accent-gold: #fd971f;      /* Safety Orange */
  --accent-purple: #ae81ff;
  --accent-red: #f92672;       /* Magenta Red */
  --accent-emerald: #a6e22e;

  --step-active: #a6e22e;
  --step-beat-a: #383a30;
  --step-beat-b: #23241e;
  --step-border: #4d4f42;

  --text-main: #f8f8f2;
  --text-muted: #cfcfc2;
  --text-dim: #75715e;

  --glass-bg: rgba(39, 40, 34, 0.92);
  --glass-border: #49483e;
  --theme-gradient: linear-gradient(180deg, #20211d 0%, #191916 100%);
  --workspace-pattern: radial-gradient(circle at 45% 15%, rgba(166, 226, 46, 0.08) 0%, transparent 60%), linear-gradient(rgba(230, 219, 116, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(230, 219, 116, 0.09) 1px, transparent 1px);
  --workspace-pattern-size: auto, 28px 28px, 28px 28px;
  --window-header-bg: linear-gradient(90deg, #32342b 0%, #23241f 100%);
  --window-shadow: 0 12px 32px rgba(0, 0, 0, 0.7);
  --window-focus-shadow: 0 18px 42px rgba(0, 0, 0, 0.85), 0 0 16px rgba(166, 226, 46, 0.28);
}

/* Theme 10: Solar Flare Magma (Volcanic Obsidian & Blazing Amber) */
[data-theme="solar-flare"] {
  --bg-darkest: #0d0407;       /* Volcanic Obsidian */
  --bg-darker: #16070b;
  --bg-panel: #1f0b10;
  --bg-panel-hover: #2a0f16;
  --bg-surface: #38141d;
  --bg-surface-elevated: #4a1b27;
  --border-dim: #2f0e16;
  --border-light: #461522;
  --border-highlight: #ff4400;

  --accent-primary: #ff4400;   /* Magma Orange */
  --accent-primary-bright: #ff8800;
  --accent-primary-glow: rgba(255, 68, 0, 0.35);
  --accent-secondary: #ffbb00; /* Solar Flare Gold */
  --accent-secondary-glow: rgba(255, 187, 0, 0.22);
  --accent-cyan: #ff7700;
  --accent-cyan-glow: rgba(255, 119, 0, 0.2);
  --accent-gold: #ffbb00;
  --accent-purple: #ff1744;
  --accent-red: #ff1744;
  --accent-emerald: #ff8800;

  --step-active: #ff4400;
  --step-beat-a: #2e1118;
  --step-beat-b: #19090d;
  --step-border: #491724;

  --text-main: #fff1f2;
  --text-muted: #fecdd3;
  --text-dim: #be123c;

  --glass-bg: rgba(31, 11, 16, 0.92);
  --glass-border: #461522;
  --theme-gradient: linear-gradient(180deg, #17070c 0%, #0d0407 100%);
  --workspace-pattern: radial-gradient(ellipse at 50% 10%, rgba(255, 68, 0, 0.16) 0%, transparent 65%), linear-gradient(rgba(255, 68, 0, 0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 187, 0, 0.1) 1px, transparent 1px);
  --workspace-pattern-size: auto, 32px 32px, 32px 32px;
  --window-header-bg: linear-gradient(90deg, #2f0f18 0%, #1a080d 100%);
  --window-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 0 14px rgba(255, 68, 0, 0.25);
  --window-focus-shadow: 0 20px 48px rgba(0, 0, 0, 0.95), 0 0 22px rgba(255, 68, 0, 0.4);
}

/* Theme 11: Arctic Frost Glacier (Frosted Iceberg & Deep Sea) */
[data-theme="arctic-frost"] {
  --bg-darkest: #070e17;       /* Glacier Deep Sea */
  --bg-darker: #0c1724;
  --bg-panel: #112032;
  --bg-panel-hover: #172b43;
  --bg-surface: #1f3755;
  --bg-surface-elevated: #28456a;
  --border-dim: #1b324e;
  --border-light: #274870;
  --border-highlight: #38bdf8;

  --accent-primary: #38bdf8;   /* Iceberg Cyan */
  --accent-primary-bright: #7dd3fc;
  --accent-primary-glow: rgba(56, 189, 248, 0.32);
  --accent-secondary: #14b8a6; /* Glacial Teal */
  --accent-secondary-glow: rgba(20, 184, 166, 0.22);
  --accent-cyan: #38bdf8;
  --accent-cyan-glow: rgba(56, 189, 248, 0.22);
  --accent-gold: #facc15;
  --accent-purple: #818cf8;
  --accent-red: #f43f5e;
  --accent-emerald: #14b8a6;

  --step-active: #38bdf8;
  --step-beat-a: #192f49;
  --step-beat-b: #0f1d2e;
  --step-border: #284b75;

  --text-main: #f0f9ff;
  --text-muted: #bae6fd;
  --text-dim: #38bdf8;

  --glass-bg: rgba(17, 32, 50, 0.92);
  --glass-border: #274870;
  --theme-gradient: linear-gradient(180deg, #0d1a29 0%, #070e17 100%);
  --workspace-pattern: radial-gradient(circle at 50% 20%, rgba(56, 189, 248, 0.12) 0%, transparent 65%), linear-gradient(rgba(56, 189, 248, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 184, 166, 0.1) 1px, transparent 1px);
  --workspace-pattern-size: auto, 28px 28px, 28px 28px;
  --window-header-bg: linear-gradient(90deg, #1b324e 0%, #0f1d2e 100%);
  --window-shadow: 0 14px 36px rgba(0, 0, 0, 0.7), 0 0 12px rgba(56, 189, 248, 0.2);
  --window-focus-shadow: 0 18px 44px rgba(0, 0, 0, 0.85), 0 0 18px rgba(56, 189, 248, 0.35);
}

/* Theme 12: Pure OLED Pitch Black (Ultra High-Contrast Pitch Black) */
[data-theme="pure-oled"] {
  --bg-darkest: #000000;       /* 100% True OLED Pitch Black */
  --bg-darker: #060606;
  --bg-panel: #0c0c0c;
  --bg-panel-hover: #141414;
  --bg-surface: #1a1a1a;
  --bg-surface-elevated: #242424;
  --border-dim: #1c1c1c;
  --border-light: #2b2b2b;
  --border-highlight: #ff6600;

  --accent-primary: #ff6600;   /* High-Contrast Laser Orange */
  --accent-primary-bright: #ffffff;
  --accent-primary-glow: rgba(255, 102, 0, 0.35);
  --accent-secondary: #00e5ff;
  --accent-secondary-glow: rgba(0, 229, 255, 0.25);
  --accent-cyan: #00e5ff;
  --accent-cyan-glow: rgba(0, 229, 255, 0.25);
  --accent-gold: #ffcc00;
  --accent-purple: #d946ef;
  --accent-red: #ff3344;
  --accent-emerald: #00ff66;

  --step-active: #ff6600;
  --step-beat-a: #161616;
  --step-beat-b: #080808;
  --step-border: #292929;

  --text-main: #ffffff;
  --text-muted: #a3a3a3;
  --text-dim: #666666;

  --glass-bg: rgba(12, 12, 12, 0.95);
  --glass-border: #2b2b2b;
  --theme-gradient: #000000;
  --workspace-pattern: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  --workspace-pattern-size: 32px 32px, 32px 32px;
  --window-header-bg: linear-gradient(90deg, #141414 0%, #080808 100%);
  --window-shadow: 0 16px 40px rgba(0, 0, 0, 0.95), 0 0 1px rgba(255, 255, 255, 0.15);
  --window-focus-shadow: 0 20px 48px rgba(0, 0, 0, 1), 0 0 16px rgba(255, 102, 0, 0.35);
}

/* Typography & Core Tokens */
:root {
  --font-main: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  --shadow-main: 0 8px 24px rgba(0, 0, 0, 0.5);
  --header-height: 48px;
  --status-height: 26px;

  /* Universal Theme Aliases */
  --fire-orange: var(--accent-primary);
  --fire-orange-bright: var(--accent-primary-bright);
  --fire-orange-glow: var(--accent-primary-glow);
  --neon-cyan: var(--accent-cyan);
  --neon-cyan-glow: var(--accent-cyan-glow);
  --neon-green: var(--accent-emerald);
  --neon-green-glow: rgba(16, 185, 129, 0.2);
  --neon-gold: var(--accent-gold);
}

/* Reset & Global */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg-darkest);
  color: var(--text-main);
  font-family: var(--font-main);
  font-size: 13px;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: var(--bg-darker);
}
::-webkit-scrollbar-thumb {
  background: var(--bg-surface);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--border-light);
}

/* Master Layout */
#app-container {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  background: var(--theme-gradient);
}

/* ==========================================================================
   2. Adaptive Header & Transport Bar
   ========================================================================= */
#top-bar {
  width: 100%;
  min-height: var(--header-height);
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-dim);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding: 0;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
  z-index: 100;
  flex-wrap: nowrap;
  gap: 0;
  box-sizing: border-box;
}

.brand-section {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.logo-fl {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--accent-primary-bright), var(--accent-primary));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px var(--accent-primary-glow);
  color: white;
  font-weight: 800;
  font-size: 16px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

.brand-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 6px;
}

.brand-tag {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.08);
  color: var(--accent-primary-bright);
  border: 1px solid var(--accent-primary);
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.8px;
}

/* Transport Controls Group */
.transport-group {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(10, 12, 18, 0.65);
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid var(--border-dim);
  flex-shrink: 0;
}

.btn-transport {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  min-width: 34px;
  height: 32px;
  padding: 0 8px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 13px;
  font-weight: 700;
}

.btn-transport:hover {
  background: var(--bg-panel-hover);
  color: var(--text-main);
  border-color: var(--accent-primary);
}

.btn-transport.play.active {
  background: linear-gradient(180deg, var(--accent-secondary), #00994d);
  color: #05140b;
  box-shadow: 0 0 16px var(--accent-secondary-glow);
  border-color: var(--accent-secondary);
}

.btn-transport.record.active {
  background: linear-gradient(180deg, #ff3344, #cc1122);
  color: white;
  box-shadow: 0 0 16px rgba(255, 51, 68, 0.7);
  border-color: #ff3344;
  animation: pulseRec 1.2s infinite alternate;
}

@keyframes pulseRec {
  from { box-shadow: 0 0 8px rgba(255, 51, 68, 0.4); }
  to { box-shadow: 0 0 20px rgba(255, 51, 68, 0.9); }
}

.btn-toggle {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  padding: 0 10px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-toggle.active {
  background: var(--accent-primary);
  color: #ffffff;
  border-color: var(--accent-primary-bright);
  box-shadow: 0 0 14px var(--accent-primary-glow);
}

/* Digital Displays (BPM, Time, Pattern) */
.lcd-display {
  background: #06070a;
  border: 1px solid #1f2433;
  border-radius: 6px;
  padding: 2px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 34px;
  min-width: 65px;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.7);
  cursor: pointer;
}

.lcd-label {
  font-size: 8px;
  text-transform: uppercase;
  color: var(--text-dim);
  letter-spacing: 0.8px;
  font-weight: 700;
  margin-bottom: -1px;
}

.lcd-value {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-primary-bright);
  letter-spacing: 0.8px;
  text-shadow: 0 0 8px var(--accent-primary-glow);
}

.lcd-value.green {
  color: var(--accent-secondary);
  text-shadow: 0 0 8px var(--accent-secondary-glow);
}

/* Visualizer Scope Canvas */
#master-scope-canvas {
  width: 120px;
  height: 34px;
  background: #06070a;
  border: 1px solid #1f2433;
  border-radius: 6px;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.8);
  cursor: pointer;
}

/* Top Navigation Tabs */
.view-tabs {
  display: flex;
  gap: 3px;
  background: rgba(10, 12, 18, 0.65);
  padding: 3px;
  border-radius: 8px;
  border: 1px solid var(--border-dim);
  overflow-x: auto;
}

.tab-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 6px 11px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.tab-btn:hover {
  background: var(--bg-surface);
  color: var(--text-main);
}

.tab-btn.active {
  background: var(--bg-surface);
  color: var(--accent-primary-bright);
  box-shadow: inset 0 0 0 1px var(--accent-primary);
}

/* Generic Action Buttons */
.btn-primary {
  background: linear-gradient(180deg, var(--accent-primary-bright), var(--accent-primary));
  border: 1px solid var(--accent-primary-bright);
  color: white;
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 11px;
  cursor: pointer;
  box-shadow: 0 0 12px var(--accent-primary-glow);
  transition: all 0.15s ease;
  white-space: nowrap;
}
.btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  color: var(--text-main);
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.btn-secondary:hover {
  background: var(--bg-panel-hover);
  border-color: var(--accent-primary);
}

/* Dropdown Selects */
.pr-select {
  background: #0f121a;
  border: 1px solid var(--border-light);
  color: var(--text-main);
  height: 30px;
  padding: 0 8px;
  border-radius: 5px;
  font-size: 11px;
  font-family: var(--font-main);
  cursor: pointer;
  outline: none;
}
.pr-select:focus {
  border-color: var(--accent-primary);
}

/* ==========================================================================
   3. Workspace Views & Modular Floating Windows
   ========================================================================== */
#workspace {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: var(--bg-darkest);
  width: 100%;
  height: 100%;
}

.view-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Bottom Status Bar */
#status-bar {
  height: var(--status-height);
  background: var(--bg-darkest);
  border-top: 1px solid var(--border-dim);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  font-size: 11px;
  color: var(--text-dim);
  z-index: 100;
}

.status-left, .status-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-secondary);
  box-shadow: 0 0 6px var(--accent-secondary);
}

/* ==========================================================================
   4. Responsive Breakpoints (Adaptativo)
   ========================================================================== */
@media (max-width: 1280px) {
  #master-scope-canvas {
    width: 90px;
  }
  .lcd-display {
    min-width: 55px;
    padding: 2px 6px;
  }
  .tab-btn {
    padding: 5px 8px;
    font-size: 10px;
  }
}

@media (max-width: 1024px) {
  #top-bar {
    height: auto;
    padding: 0;
  }
  .brand-title {
    font-size: 14px;
  }
  .transport-group {
    padding: 2px 6px;
    gap: 4px;
  }
  #master-scope-canvas {
    display: none;
  }
  .status-left span:nth-child(2),
  .status-left span:nth-child(3) {
    display: none;
  }
}

@media (max-width: 768px) {
  .view-tabs {
    width: 100%;
    order: 3;
    overflow-x: auto;
  }
  .lcd-display:nth-of-type(3) {
    display: none; /* Hide time counter on very small screens */
  }
}

/* ==========================================================================
   Modern Precision Vector Icons System
   ========================================================================= */
.fw-svg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex-shrink: 0;
  stroke: currentColor;
  transition: transform 0.12s ease, stroke 0.15s ease, color 0.15s ease;
}

.fw-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

.fl-dropdown-action .fw-icon-wrap {
  width: 16px;
  min-width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fl-dropdown-action .fw-svg-icon {
  margin-right: 0;
  opacity: 0.85;
}

.fl-dropdown-action:hover .fw-svg-icon {
  opacity: 1;
  transform: scale(1.08);
}

.win-btn .win-icon {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  transition: transform 0.1s ease;
}

.win-btn:hover .win-icon {
  transform: scale(1.15);
}



/* === File: css/channel-rack.css === */
/* ==========================================================================
   FireWave DAW - Channel Rack & Step Sequencer Hardware Module
   Professional Digital Studio Hardware Aesthetics (Elektron / Teenage Engineering)
   ========================================================================== */

#channel-rack-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-darkest);
}

.rack-toolbar {
  height: 36px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  gap: 10px;
}

.rack-tools-left, .rack-tools-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rack-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--accent-primary);
}

.rack-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Hardware Channel Strip Row */
.channel-row {
  display: flex;
  align-items: center;
  background: var(--bg-panel);
  border: 1px solid var(--border-dim);
  border-radius: 4px;
  padding: 3px 8px;
  gap: 8px;
  min-height: 42px;
  box-sizing: border-box;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}

.channel-row:hover {
  background: var(--bg-panel-hover);
  border-color: var(--border-light);
}

.channel-row.selected {
  border-color: var(--accent-primary);
  background: #202532;
  box-shadow: inset 3px 0 0 var(--accent-primary);
}

/* Channel Meta Controls (Fixed 215px across ALL rows for 100% laser-precise vertical alignment) */
.channel-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 215px !important;
  min-width: 215px !important;
  max-width: 215px !important;
  flex: 0 0 215px !important;
  box-sizing: border-box;
}

.btn-mute-led {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-emerald, #10B981);
  border: 1px solid rgba(16, 185, 129, 0.4);
  cursor: pointer;
  transition: all 0.12s ease;
  flex: 0 0 12px;
}

.btn-mute-led.muted {
  background: #252A36;
  border-color: #353B47;
}

.channel-color-bar {
  width: 3px;
  height: 24px;
  border-radius: 1px;
  background: var(--accent-primary);
  flex: 0 0 3px;
}

.channel-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: 0 !important;
  cursor: pointer;
  background: var(--bg-darkest);
  padding: 4px 6px;
  border-radius: 3px;
  border: 1px solid var(--border-dim);
  transition: all 0.1s ease;
  overflow: hidden;
  min-height: 32px;
  box-sizing: border-box;
}

.channel-info:hover {
  border-color: var(--border-light);
  background: var(--bg-surface);
}

.channel-row.selected .channel-info {
  border-color: var(--border-light);
  background: var(--bg-surface);
}

.channel-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  letter-spacing: 0.2px;
}

.channel-sub {
  font-size: 9px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
}

.mixer-routing-tag {
  background: var(--bg-panel);
  border: 1px solid var(--border-dim);
  padding: 0 4px;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--accent-secondary);
}

/* Precision Hardware Mini Rotary Knobs */
.mini-knob-group {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.knob-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  touch-action: none;
  width: 28px !important;
  flex: 0 0 28px !important;
}

.knob-body {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  position: relative;
  cursor: ns-resize;
  transition: border-color 0.12s ease;
}

.knob-body:hover {
  border-color: var(--accent-primary);
}

.knob-indicator {
  position: absolute;
  top: 2px;
  left: calc(50% - 1px);
  width: 2px;
  height: 6px;
  background: var(--accent-primary);
  border-radius: 1px;
  transform-origin: bottom center;
}

.knob-label {
  font-size: 7.5px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-top: 1px;
}

/* ==========================================================================
   Step Sequencer Grid - Grouped by 4-step blocks
   ========================================================================== */
.steps-container {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #3b4254 transparent;
  padding-bottom: 2px;
}

.steps-container::-webkit-scrollbar {
  height: 4px;
}

.steps-container::-webkit-scrollbar-thumb {
  background: #3b4254;
  border-radius: 2px;
}

.step-btn {
  flex: 1 0 18px;
  min-width: 18px;
  max-width: 32px;
  height: 28px;
  border-radius: 3px;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  transition: transform 0.04s ease, filter 0.08s ease, background 0.1s ease;
}

/* 4-Step Block Separation (Consistent 6px gutter between quarter notes) */
.step-btn:nth-child(4n) {
  margin-right: 6px;
}

.step-btn:last-child {
  margin-right: 0;
}

.step-btn:hover {
  filter: brightness(1.25);
  border-color: var(--accent-primary) !important;
}

.step-btn:active {
  transform: scale(0.96);
}

/* Inactive 4-Step Group Colors (Tactile hardware keys with clear visibility) */
.step-btn.beat-group-a {
  background: #252B38;
  border: 1px solid #384050;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.35);
}

.step-btn.beat-group-b {
  background: #1C202B;
  border: 1px solid #2D3442;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Active Step State (Studio Amber Hardware Switch with Integrated Glow) */
.step-btn.active {
  background: linear-gradient(180deg, #F28C28 0%, #D87515 100%) !important;
  border: 1px solid #FFA756 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.step-btn.active::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 3px;
  right: 3px;
  height: 2px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 1px;
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
}

/* Playhead Highlight */
.step-btn.playhead {
  border-color: #FFFFFF !important;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.75), inset 0 0 2px #FFFFFF !important;
  transform: translateY(-1px);
}

/* ==========================================================================
   Channel Rack "+" Add Generator Row & Dropdown Menu (FL Studio Style)
   ========================================================================== */

.channel-rack-add-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 4px 0 2px 0;
  margin-top: 4px;
}

.btn-channel-add {
  height: 28px;
  background: #191d29;
  border: 1px dashed #30374e;
  border-radius: 4px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 700;
  color: #8e98b0;
  cursor: pointer;
  transition: all 0.12s ease;
  user-select: none;
}

.btn-channel-add:hover {
  background: #222839;
  border-color: var(--fire-orange, #ff6600);
  border-style: solid;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(255, 102, 0, 0.25);
}

.btn-channel-add-icon {
  font-size: 14px;
  color: var(--fire-orange, #ff6600);
}

.channel-add-dropdown {
  position: fixed;
  z-index: 100000;
  background: #191d29;
  border: 1px solid #333c52;
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.75), 0 0 1px 1px rgba(255, 255, 255, 0.05);
  padding: 4px 0;
  min-width: 230px;
  user-select: none;
  font-family: var(--font-sans, system-ui, sans-serif);
  animation: mixerMenuFade 0.12s ease-out;
}

.channel-add-category {
  padding: 6px 12px 2px 12px;
  font-size: 9px;
  font-weight: 800;
  color: #ff9933;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.channel-add-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.1s ease;
}

.channel-add-item:hover {
  background: #252b3d;
}

.channel-add-icon {
  font-size: 14px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.channel-add-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.channel-add-title {
  font-size: 11px;
  font-weight: 700;
  color: #e2e8f0;
}

.channel-add-desc {
  font-size: 9.5px;
  color: #7a849c;
}

.channel-add-divider {
  height: 1px;
  background: #252c3e;
  margin: 4px 0;
}



/* === File: css/piano-roll.css === */
/* ==========================================================================
   FireWave DAW - Piano Roll Studio Interface
   Precision Vertical Keybed, Octave Delimiters & Hardware Note Grid
   ========================================================================== */

#piano-roll-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-darkest);
}

.pr-toolbar {
  height: 36px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  gap: 8px;
}

.pr-tools-left, .pr-tools-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pr-tool-btn {
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  color: var(--text-muted);
  height: 26px;
  padding: 0 8px;
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.12s ease;
}

.pr-tool-btn:hover {
  background: var(--bg-panel-hover);
  border-color: var(--border-light);
  color: var(--text-main);
}

.pr-tool-btn.active {
  background: var(--accent-primary);
  color: #111318;
  font-weight: 700;
  border-color: var(--accent-primary-bright);
}

.pr-select {
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  color: var(--text-main);
  height: 26px;
  padding: 0 6px;
  border-radius: 3px;
  font-size: 10.5px;
  font-family: var(--font-main);
  outline: none;
}

.pr-select:focus {
  border-color: var(--accent-primary);
}

/* Piano Roll Main Area (Keys + Canvas) */
.pr-main-container {
  flex: 1;
  display: flex;
  position: relative;
  overflow: hidden;
  background: var(--bg-darkest);
}

/* Studio Vertical Keybed */
.pr-keys-sidebar {
  width: 60px;
  background: var(--bg-darkest);
  border-right: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  z-index: 20;
}

.piano-key {
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 6px;
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: 600;
  cursor: pointer;
  border-bottom: 1px solid #232834;
  transition: background 0.08s ease;
}

.piano-key.white {
  background: #D1D5DB;
  color: #1F242E;
  border-bottom: 1px solid #9CA3AF;
}

.piano-key.white.is-c {
  font-weight: 800;
  color: #111318;
  background: #E5E7EB;
  border-left: 3px solid var(--accent-primary);
}

.piano-key.white:hover, .piano-key.white.active {
  background: #FFFFFF;
  color: var(--accent-primary);
}

.piano-key.black {
  background: #1C2029;
  color: #6B7280;
  border-bottom: 1px solid #141720;
}

.piano-key.black:hover, .piano-key.black.active {
  background: #282E3B;
  color: var(--accent-primary);
}

/* Grid Canvas Container */
.pr-grid-container {
  flex: 1;
  position: relative;
  overflow: auto;
  background: var(--bg-darkest);
}

#piano-roll-canvas {
  display: block;
  cursor: crosshair;
}


/* === File: css/mixer.css === */
/* ==========================================================================
   FireWave DAW - Mixer Console Styles
   Precision Hardware Studio Track Strips & Peak VU Meters
   ========================================================================== */

#mixer-view {
  display: flex;
  flex-direction: column;
  background: var(--bg-darkest);
  overflow: hidden;
}

#mixer-view.is-closed {
  display: none !important;
}

#mixer-view.is-minimized .fl-window-body {
  display: none !important;
}

#mixer-view .fl-window-header {
  width: 100%;
  height: 28px;
  flex-shrink: 0;
  box-sizing: border-box;
}

#mixer-view .fl-window-body {
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  width: 100%;
  height: calc(100% - 28px);
  min-height: 0;
  overflow: hidden;
  background: var(--bg-darkest);
  box-sizing: border-box;
}

.btn-close-mixer-panel {
  background: none;
  border: none;
  color: #7a8296;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 3px;
  line-height: 1;
  transition: all 0.12s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-close-mixer-panel:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

/* ==========================================================================
   FL Studio Precision Mixer Console Layout & Aesthetics
   ========================================================================== */

/* Left Side: FL Studio Inspector / FX Rack */
.mixer-fx-rack {
  width: 224px;
  min-width: 224px;
  max-width: 224px;
  height: 100%;
  background: #1c1f2a;
  border-right: 1px solid #282d3c;
  border-left: none;
  display: flex;
  flex-direction: column;
  padding: 6px;
  gap: 4px;
  box-sizing: border-box;
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
  user-select: none;
}

.fx-rack-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 24px;
  padding: 0 4px;
  border-bottom: 1px solid #282d3c;
  margin-bottom: 2px;
}

.fx-rack-title {
  font-size: 11px;
  font-weight: 700;
  color: #d5dae6;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.4px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  transition: all 0.12s ease;
}

.fx-rack-title:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
}

.fx-rack-color-badge {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
  transition: background-color 0.15s ease;
}

.fx-rack-title-arrow {
  color: #7a8296;
  font-size: 9px;
}

/* Audio Input Selector Bar */
.fx-rack-input-bar {
  height: 22px;
  background: #14161f;
  border: 1px solid #282d3c;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  cursor: pointer;
  transition: all 0.12s ease;
  margin-bottom: 2px;
}

.fx-rack-input-bar:hover {
  border-color: #00e5ff;
  background: #191c28;
}

.fx-input-bar-left {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: #949eb5;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fx-input-bar-arrow {
  font-size: 8.5px;
  color: #647087;
}

.fx-input-bar-clock {
  font-size: 10px;
  color: #7c869e;
  cursor: pointer;
}

.fx-input-bar-clock:hover {
  color: #00ff88;
}

/* 10 Stacked FX Slots */
.fx-slots-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0;
  flex-shrink: 0;
}

.fx-slot-item {
  height: 23px;
  background: #222633;
  border: 1px solid #2c3244;
  border-radius: 2px;
  display: flex;
  align-items: center;
  padding: 0 6px;
  gap: 6px;
  cursor: pointer;
  transition: all 0.1s ease;
  box-sizing: border-box;
}

.fx-slot-item:hover {
  background: #2a2f40;
  border-color: #3b435b;
}

.fx-slot-item.is-empty {
  background: #191c26;
  border-color: #242938;
}

.fx-slot-item.is-empty .fx-slot-name {
  color: #555b6e;
  font-style: italic;
}

.fx-slot-arrow {
  font-size: 8.5px;
  color: #788298;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.1s ease;
}

.fx-slot-arrow:hover {
  color: #ffffff;
}

.fx-slot-name {
  flex: 1;
  font-size: 10px;
  font-weight: 600;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fx-slot-dial-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: ns-resize;
}

.fx-slot-dial-svg {
  display: block;
}

.fx-slot-led {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid #4a5470;
  background: #282d3c;
  flex-shrink: 0;
  cursor: pointer;
  padding: 0;
  outline: none;
  transition: all 0.1s ease;
}

.fx-slot-led.active {
  background: #00ff88;
  border-color: #76e624;
  box-shadow: 0 0 5px #00ff88;
}

.fx-slot-led.disabled {
  background: #282d3c;
  border-color: #3d455d;
  box-shadow: none;
}

/* Built-in Parametric EQ Card */
.fx-rack-builtin-eq-card {
  display: flex;
  flex-direction: row;
  background: #12141d;
  border: 1px solid #272c3d;
  border-radius: 3px;
  padding: 4px;
  gap: 6px;
  height: 82px;
  box-sizing: border-box;
  align-items: center;
  margin-top: 2px;
}

.fx-builtin-eq-canvas {
  width: 116px;
  height: 74px;
  border-radius: 2px;
  background: #0f121a;
  border: 1px solid #1f2535;
  flex-shrink: 0;
}

.fx-builtin-eq-sliders {
  display: flex;
  flex-direction: row;
  gap: 4px;
  flex: 1;
  justify-content: space-around;
  height: 74px;
  align-items: center;
}

.fl-eq-slider-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.fl-eq-silver-slider {
  -webkit-appearance: slider-vertical;
  writing-mode: vertical-lr;
  direction: rtl;
  width: 14px;
  height: 68px;
  cursor: pointer;
  accent-color: #cbd5e1;
}

/* PDC Latency Row */
.fx-rack-pdc-row {
  height: 20px;
  background: #151722;
  border: 1px solid #272c3c;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  font-size: 9.5px;
  color: #8892a7;
  cursor: pointer;
  transition: all 0.12s ease;
  margin-top: 2px;
}

.fx-rack-pdc-row:hover {
  border-color: #00e5ff;
  color: #e2e8f0;
}

.fx-pdc-left {
  display: flex;
  align-items: center;
  gap: 5px;
}

.fx-pdc-clock {
  font-size: 10px;
  color: #768199;
}

.fx-pdc-arrow {
  font-size: 8px;
  color: #647087;
}

/* Audio Output Routing Bar */
.fx-rack-output-bar {
  height: 22px;
  background: #13151e;
  border: 1px solid #262b3b;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  font-size: 10px;
  color: #949eb5;
  cursor: pointer;
  transition: all 0.12s ease;
  margin-top: 2px;
}

.fx-rack-output-bar:hover {
  border-color: #00e5ff;
  color: #ffffff;
}

.fx-output-left {
  display: flex;
  align-items: center;
  gap: 5px;
}

.fx-output-icon {
  font-size: 10.5px;
}

.fx-output-arrow {
  font-size: 8px;
  color: #647087;
}

/* Right Side: FL Studio Channels Console */
.mixer-tracks-container {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 6px;
  gap: 2px;
  background: #151821;
  box-sizing: border-box;
}

/* Left dB Scale Column */
.mixer-db-scale-col {
  width: 22px;
  min-width: 22px;
  max-width: 22px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 24px;
  padding-top: 130px;
  box-sizing: border-box;
  flex-shrink: 0;
  user-select: none;
}

.db-scale-mark {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: calc((100% - 154px) / 13);
  gap: 2px;
}

.db-scale-num {
  font-family: monospace;
  font-size: 7.5px;
  color: #555d72;
  line-height: 1;
}

.db-scale-tick {
  width: 4px;
  height: 1px;
  background: #2b3244;
}

/* Individual Mixer Strip (FL Studio proportions) */
.mixer-strip {
  width: 44px;
  min-width: 44px;
  max-width: 52px;
  flex: 1 0 44px;
  height: 100%;
  background: #1c202c;
  border: 1px solid #282e3f;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  padding: 2px 2px 3px 2px;
  gap: 1px;
  transition: background 0.1s ease, border-color 0.1s ease;
  cursor: pointer;
  box-sizing: border-box;
  flex-shrink: 0;
  user-select: none;
}

.mixer-strip:hover {
  background: #232838;
  border-color: #363e54;
}

.mixer-strip.selected {
  border-color: var(--fire-orange, #ff6600) !important;
  border-top: 2px solid var(--fire-orange, #ff6600) !important;
  background: #222736 !important;
  box-shadow: 0 0 10px rgba(255, 102, 0, 0.35) inset !important;
}

.mixer-strip.separator-after {
  margin-right: 6px;
  position: relative;
}

.mixer-strip.separator-after::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 2px;
  bottom: 2px;
  width: 2px;
  background: #2f364a;
}

/* Add Mixer Track Strip ("+" button) */
.mixer-strip.mixer-add-strip {
  min-width: 38px;
  max-width: 42px;
  flex: 0 0 38px;
  background: #161924;
  border: 1px dashed #2d3448;
  opacity: 0.8;
  transition: all 0.15s ease;
  align-items: center;
  justify-content: flex-start;
}

.mixer-strip.mixer-add-strip:hover {
  opacity: 1;
  background: #1d2232;
  border-color: #00e5ff;
  border-style: solid;
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.25);
}

.strip-top-tab.add-tab {
  border-top-color: #00e5ff !important;
  color: #00e5ff;
  font-size: 14px;
  font-weight: 900;
  width: 100%;
}

.strip-name-plate.strip-add-plate {
  background: #1b1f2e !important;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  box-shadow: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
}

.strip-add-icon {
  font-size: 15px;
  color: #00e5ff;
  transition: transform 0.15s ease;
}

.mixer-strip.mixer-add-strip:hover .strip-add-icon {
  transform: scale(1.25);
}

.strip-add-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #7a849d;
}

.mixer-strip.mixer-add-strip:hover .strip-add-text {
  color: #00e5ff;
}

/* Strip Top Tab */
.strip-top-tab {
  height: 16px;
  border-top: 3px solid #74b834;
  font-family: monospace;
  font-size: 9px;
  font-weight: 700;
  color: #8e98af;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #161922;
  border-radius: 2px 2px 0 0;
  margin-bottom: 1px;
  cursor: pointer;
  transition: all 0.1s ease;
}

.strip-top-tab:hover {
  color: #ffffff;
  background: #1e222e;
}

/* Vertical Colored Name Plate */
.strip-name-plate {
  height: 82px;
  min-height: 82px;
  max-height: 82px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 1px 0 2px 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  cursor: pointer;
  transition: filter 0.12s ease;
}

.strip-name-plate:hover {
  filter: brightness(1.15);
}

.strip-name-vertical {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 8.5px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 76px;
  text-align: center;
}

.strip-mini-meter {
  position: absolute;
  right: 2px;
  top: 3px;
  bottom: 3px;
  width: 2px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 1px;
  overflow: hidden;
}

.strip-mini-meter-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: #00ff88;
  transition: height 0.04s ease-out;
}

/* Green Circular Mute/Solo LED Button */
.strip-mute-led {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  font-size: 8.5px;
  line-height: 1;
  border: 1px solid #4a5470;
  background: #282d3c;
  color: #282d3c;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1px auto;
  cursor: pointer;
  outline: none;
  padding: 0;
  transition: all 0.12s ease;
}

.strip-mute-led.active {
  background: #00ff88;
  color: #00ff88;
  border-color: #6ee624;
  box-shadow: 0 0 6px #00ff88;
}

.strip-mute-led.muted {
  background: #252835;
  color: #252835;
  border-color: #3b4155;
  box-shadow: none;
}

/* Pan Knob Container */
.strip-pan-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  margin: 1px 0;
}

/* Stereo Separation Indicator */
.strip-stereo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 14px;
  font-size: 11px;
  font-weight: 800;
  color: #768199;
  cursor: pointer;
  margin-bottom: 1px;
}

.strip-stereo-wrap:hover {
  color: #00e5ff;
}

/* Fader & Dual Stereo Peak VU Meter Section */
.strip-fader-section {
  flex: 1 1 auto;
  min-height: 80px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 3px;
  position: relative;
  margin: 1px 0;
}

.strip-vu-meter-wrap {
  width: 6px;
  height: 100%;
  display: flex;
  gap: 1px;
  background: #0c0e14;
  border: 1px solid #232838;
  border-radius: 2px;
  overflow: hidden;
  padding: 1px;
  box-sizing: border-box;
}

.strip-vu-bar {
  flex: 1;
  height: 100%;
  position: relative;
  background: #10131a;
}

.strip-vu-bar .meter-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(0deg, #00ff88 0%, #a3e635 60%, #ffb800 85%, #ff3344 100%);
  transition: height 0.04s ease-out;
}

.strip-fader-wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fader-slider.fl-green-fader {
  -webkit-appearance: slider-vertical;
  writing-mode: vertical-lr;
  direction: rtl;
  width: 18px;
  height: 100%;
  cursor: pointer;
  accent-color: #76e624;
}

/* Bottom Icons Row */
.strip-bottom-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 17px;
  margin: 1px 0;
}

.strip-bottom-icons .btn-arm-rec {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid #4a5470;
  background: #1f2330;
  color: #ff6600;
  font-size: 7.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  outline: none;
  line-height: 1;
}

.strip-bottom-icons .btn-arm-rec.armed {
  background: #ff5500;
  color: #ffffff;
  border-color: #ffaa44;
  box-shadow: 0 0 6px #ff5500;
}

.btn-strip-clock {
  background: none;
  border: none;
  font-size: 9px;
  color: #6d768d;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.btn-strip-clock:hover {
  color: #cbd5e1;
}

.strip-bottom-icons .btn-phase-toggle {
  background: none;
  border: none;
  font-size: 9px;
  font-weight: 700;
  color: #6d768d;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.strip-bottom-icons .btn-phase-toggle.active {
  color: #00e5ff;
  text-shadow: 0 0 4px #00e5ff;
}

/* Bottom Routing Send Arrow */
.strip-send-arrow {
  font-size: 9.5px;
  color: #363e52;
  text-align: center;
  cursor: pointer;
  transition: all 0.1s ease;
  line-height: 1;
  padding: 1px 0;
}

.strip-send-arrow.active {
  color: #76e624;
  text-shadow: 0 0 5px #76e624;
}

/* Input Selector Popover Menu */
.mixer-input-popover {
  position: fixed;
  z-index: 999999 !important;
  background: #151822;
  border: 1px solid #334155;
  border-radius: 6px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.9), 0 0 1px rgba(255, 255, 255, 0.2);
  padding: 6px 0;
  min-width: 240px;
  max-width: 310px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  user-select: none;
  font-family: var(--font-sans, system-ui, sans-serif);
  animation: popoverFadeIn 0.12s ease-out;
  box-sizing: border-box;
}

@keyframes popoverFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.mixer-popover-header {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
  padding: 5px 10px 3px 10px;
  letter-spacing: 0.5px;
}

.mixer-popover-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 11px;
  color: #cbd5e1;
  cursor: pointer;
  transition: all 0.1s ease;
  white-space: nowrap;
}

.mixer-popover-item:hover {
  background: #252e42;
  color: #ffffff;
}

.mixer-popover-item.active {
  background: rgba(0, 229, 255, 0.15);
  color: #00e5ff;
  font-weight: 600;
}

.mixer-popover-item.arm-item {
  color: #f87171;
}

.mixer-popover-item.arm-item:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ff8888;
}

.mixer-popover-item.wizard-item {
  color: var(--fire-orange);
}

.mixer-popover-item.wizard-item:hover {
  background: rgba(255, 102, 0, 0.2);
}

.mixer-popover-divider {
  height: 1px;
  background: #262e3d;
  margin: 4px 0;
}

.mixer-popover-icon {
  font-size: 12px;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.mixer-popover-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mixer-popover-live-tag {
  font-size: 8px;
  color: #00ff88;
  background: rgba(0, 255, 136, 0.15);
  border: 1px solid rgba(0, 255, 136, 0.35);
  border-radius: 3px;
  padding: 1px 5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  animation: recPulseLive 1.4s infinite ease-in-out;
}

@keyframes recPulseLive {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.mixer-popover-active-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(0, 255, 136, 0.08);
  border-left: 3px solid #00ff88;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #ffffff;
}

.mixer-popover-active-icon {
  font-size: 13px;
}

.mixer-popover-active-name {
  color: #00ff88;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mixer-popover-item.perm-request-item {
  background: rgba(255, 184, 0, 0.1);
  border: 1px dashed rgba(255, 184, 0, 0.35);
  margin: 3px 6px;
  border-radius: 4px;
}

.mixer-popover-item.perm-request-item:hover {
  background: rgba(255, 184, 0, 0.22);
}

.mixer-popover-item.clear-item:hover {
  background: rgba(239, 68, 68, 0.2);
}

.fx-rack-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-dim);
  padding-bottom: 6px;
}

.fx-rack-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--fire-orange);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.fx-slots-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  margin-bottom: 8px;
}

.fx-slot-item {
  height: 38px;
  background: var(--bg-panel);
  border: 1px solid var(--border-dim);
  border-radius: 5px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.fx-slot-item:hover {
  background: var(--bg-panel-hover);
  border-color: var(--border-light);
}

.fx-slot-number {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  width: 14px;
}

.fx-slot-name {
  flex: 1;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fx-slot-toggle {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--neon-green);
  box-shadow: 0 0 5px var(--neon-green);
}

.fx-slot-toggle.disabled {
  background: #394255;
  box-shadow: none;
}

/* FX Rack Input Card (FL Studio-Style Inspector Card) */
.fx-rack-input-card {
  background: #141824;
  border: 1px solid #2d3748;
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  transition: all 0.15s ease;
}

.fx-rack-input-card.has-input {
  border-color: rgba(0, 255, 136, 0.45);
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.15);
  background: #131b26;
}

.fx-input-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fx-input-card-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--fire-orange, #ff6600);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.fx-input-icon {
  font-size: 12px;
}

.fx-input-status-tag {
  font-size: 8px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  background: #232a3b;
  color: #64748b;
  border: 1px solid #334155;
  letter-spacing: 0.5px;
}

.fx-input-status-tag.active {
  background: rgba(0, 255, 136, 0.18);
  color: #00ff88;
  border-color: rgba(0, 255, 136, 0.5);
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.3);
  animation: recPulseLive 1.4s infinite ease-in-out;
}

.fx-input-select-container {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fx-input-select-label {
  font-size: 9px;
  color: #94a3b8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.fx-rack-input-select {
  width: 100%;
  height: 28px;
  background: #0f121a;
  border: 1px solid #374151;
  border-radius: 4px;
  color: #f1f5f9;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 600;
  padding: 0 6px;
  outline: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.12s ease;
}

.fx-rack-input-select:hover, .fx-rack-input-select:focus {
  border-color: #00e5ff;
  box-shadow: 0 0 6px rgba(0, 229, 255, 0.3);
}

.fx-rack-input-select option, .fx-rack-input-select optgroup {
  background: #141722;
  color: #f1f5f9;
  font-size: 11px;
}

.fx-input-actions-bar {
  display: flex;
  gap: 6px;
}

.btn-detect-hardware, .btn-rec-wizard, .btn-goto-insert1 {
  flex: 1;
  height: 25px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.12s ease;
  outline: none;
  border: 1px solid transparent;
}

.btn-detect-hardware {
  background: #1e293b;
  border-color: #38bdf8;
  color: #38bdf8;
}

.btn-detect-hardware:hover {
  background: #0284c7;
  color: #ffffff;
}

.btn-rec-wizard {
  background: #1e293b;
  border-color: #ff9900;
  color: #ff9900;
}

.btn-rec-wizard:hover {
  background: #ea580c;
  color: #ffffff;
}

.fx-input-monitoring-bar {
  display: flex;
  align-items: center;
}

.fx-input-mon-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  color: #94a3b8;
  cursor: pointer;
  user-select: none;
}

.fx-input-mon-label input {
  accent-color: #00e5ff;
  cursor: pointer;
}

.fx-rack-master-card {
  background: #141722;
  border: 1px dashed #334155;
  border-radius: 6px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-sizing: border-box;
}

.fx-master-info-title {
  font-size: 11px;
  font-weight: 700;
  color: #cbd5e1;
}

.fx-master-info-desc {
  font-size: 9.5px;
  color: #64748b;
  line-height: 1.3;
}

.btn-goto-insert1 {
  width: 100%;
  background: rgba(0, 229, 255, 0.12);
  border-color: #00e5ff;
  color: #00e5ff;
  height: 26px;
}

.btn-goto-insert1:hover {
  background: #00e5ff;
  color: #0a0e17;
}

.fx-rack-subhead {
  font-size: 9.5px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 4px 2px 2px 2px;
}

.fx-rack-input-trigger-btn {
  width: 100%;
  height: 28px;
  background: #0f121a;
  border: 1px solid #374151;
  border-radius: 4px;
  color: #f1f5f9;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 600;
  padding: 0 8px;
  outline: none;
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.12s ease;
}

.fx-rack-input-trigger-btn:hover {
  border-color: #00e5ff;
  box-shadow: 0 0 6px rgba(0, 229, 255, 0.3);
}

/* Unblockable Fullscreen Backdrop for Mixer Input Menu */
.mixer-input-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99999999 !important;
  background: rgba(8, 10, 16, 0.68);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: modalBackdropFadeIn 0.12s ease-out;
}

@keyframes modalBackdropFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.mixer-input-menu-modal {
  background: #141824;
  border: 1px solid #38455e;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.95), 0 0 1px rgba(255, 255, 255, 0.3);
  width: 90%;
  max-width: 440px;
  max-height: 85vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  color: #e2e8f0;
  font-family: var(--font-sans, system-ui, sans-serif);
  animation: modalScaleUp 0.14s ease-out;
}

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

.mixer-input-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #1a2030;
  border-bottom: 1px solid #2d3748;
}

.mixer-input-modal-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--fire-orange, #ff6600);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.btn-close-input-modal {
  width: 26px;
  height: 26px;
  background: transparent;
  border: 1px solid #475569;
  border-radius: 4px;
  color: #94a3b8;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s ease;
}

.btn-close-input-modal:hover {
  background: #ef4444;
  border-color: #ef4444;
  color: #ffffff;
}

.mixer-modal-body {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mixer-modal-section-title {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-top: 4px;
}

.mixer-modal-option {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #1a2030;
  border: 1px solid #2e3a4e;
  border-radius: 6px;
  padding: 10px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.mixer-modal-option:hover {
  background: #252e42;
  border-color: #00e5ff;
  transform: translateY(-1px);
}

.mixer-modal-option.active {
  border-color: #00ff88;
  background: rgba(0, 255, 136, 0.12);
}

.mixer-modal-option .opt-icon {
  font-size: 20px;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}

.mixer-modal-option .opt-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mixer-modal-option .opt-name {
  font-size: 12.5px;
  font-weight: 600;
  color: #f8fafc;
}

.mixer-modal-option .opt-sub {
  font-size: 10px;
  color: #94a3b8;
}

.mixer-modal-option .opt-check {
  font-size: 10px;
  font-weight: 700;
  color: #00ff88;
  background: rgba(0, 255, 136, 0.2);
  padding: 2px 6px;
  border-radius: 3px;
}

.mixer-modal-option.detect-opt {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
}

.mixer-modal-option.detect-opt:hover {
  background: rgba(245, 158, 11, 0.2);
  border-color: #fbbf24;
}

.mixer-modal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.mixer-modal-preset-btn {
  background: #181e2b;
  border: 1px solid #2e3a4e;
  border-radius: 6px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #cbd5e1;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s ease;
}

.mixer-modal-preset-btn:hover {
  background: #252e42;
  border-color: var(--fire-orange);
  color: #ffffff;
  transform: translateY(-1px);
}

.mixer-modal-preset-btn span:first-child {
  font-size: 18px;
}

.mixer-modal-actions-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.mixer-modal-btn {
  flex: 1;
  height: 32px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.12s ease;
  border: 1px solid #334155;
}

.mixer-modal-btn.btn-wizard {
  background: #1e293b;
  color: #fbbf24;
  border-color: #f59e0b;
}

.mixer-modal-btn.btn-wizard:hover {
  background: #f59e0b;
  color: #000000;
}

.mixer-modal-btn.btn-clear {
  background: #1e293b;
  color: #f87171;
  border-color: #ef4444;
}

.mixer-modal-btn.btn-clear:hover {
  background: #ef4444;
  color: #ffffff;
}

/* ==========================================================================
   FL Studio Channel Hardware Inspector Controls & Built-in 3-Band EQ
   ========================================================================== */

/* Phase toggle button on mixer strip */
.btn-phase-toggle {
  width: 18px;
  height: 16px;
  border-radius: 2px;
  font-size: 9px;
  font-weight: 700;
  border: 1px solid #475569;
  background: #1a1e28;
  color: #94a3b8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  transition: all 0.12s ease;
  user-select: none;
}

.btn-phase-toggle:hover {
  border-color: #00e5ff;
  color: #00e5ff;
}

.btn-phase-toggle.active {
  background: #00e5ff;
  color: #09131d;
  border-color: #38bdf8;
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.7);
}

/* Channel Hardware Settings Card */
.fx-rack-channel-settings-card {
  background: #1e2330;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

.fx-settings-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #2d3748;
  padding-bottom: 4px;
}

.fx-settings-icon {
  font-size: 11px;
}

.fx-settings-title {
  color: #cbd5e1;
}

.fx-channel-toggles-row {
  display: flex;
  gap: 6px;
}

.btn-channel-toggle {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #141822;
  border: 1px solid #334155;
  border-radius: 4px;
  padding: 5px 6px;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s ease;
  user-select: none;
}

.btn-channel-toggle:hover {
  background: #232c3f;
  border-color: #475569;
  color: #ffffff;
}

.btn-channel-toggle.active {
  background: rgba(0, 229, 255, 0.18);
  border-color: #00e5ff;
  color: #00e5ff;
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.35);
}

.btn-toggle-symbol {
  font-size: 12px;
  font-weight: 800;
}

.btn-toggle-text {
  font-size: 9px;
  letter-spacing: 0.2px;
}

.fx-channel-param-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fx-param-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
}

.fx-param-label {
  color: #94a3b8;
}

.fx-param-val {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  color: var(--fire-orange, #ff6600);
  font-weight: 700;
}

/* Hardware-style precision range slider */
.fl-hardware-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: #0f1219;
  border: 1px solid #334155;
  outline: none;
  cursor: pointer;
}

.fl-hardware-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: #ff6600;
  border: 1px solid #ffaa44;
  box-shadow: 0 0 5px rgba(255, 102, 0, 0.6);
  cursor: pointer;
  transition: transform 0.08s ease;
}

.fl-hardware-slider.pdc::-webkit-slider-thumb {
  background: #3b82f6;
  border-color: #60a5fa;
  box-shadow: 0 0 5px rgba(59, 130, 246, 0.6);
}

.fl-hardware-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

/* Built-in 3-Band Parametric EQ Card */
.fx-rack-builtin-eq-card {
  background: #1a1e2b;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

.fx-eq-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #2d3748;
  padding-bottom: 4px;
}

.fx-eq-title-box {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  color: #cbd5e1;
  text-transform: uppercase;
}

.fx-eq-icon {
  font-size: 11px;
}

.btn-eq-reset-flat {
  background: #11141c;
  border: 1px solid #334155;
  border-radius: 3px;
  color: #94a3b8;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  cursor: pointer;
  transition: all 0.12s ease;
}

.btn-eq-reset-flat:hover {
  background: #242c3d;
  color: #ffffff;
  border-color: #64748b;
}

.fx-eq-bands-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: #11141d;
  border-radius: 5px;
  padding: 8px 6px;
  border: 1px solid #232c3f;
}

.fx-eq-band-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.fx-eq-band-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 1px 4px;
  border-radius: 2px;
}

.fx-eq-band-tag.low {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
}

.fx-eq-band-tag.mid {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.15);
}

.fx-eq-band-tag.high {
  color: #00e5ff;
  background: rgba(0, 229, 255, 0.15);
}

.fx-eq-gain-val {
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  font-weight: 700;
  color: #e2e8f0;
}

.fx-eq-slider-wrap {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
}

/* Vertical slider for FL Studio 3-Band EQ */
.fl-eq-vert-slider {
  -webkit-appearance: none;
  appearance: none;
  writing-mode: vertical-lr;
  direction: rtl;
  width: 6px;
  height: 72px;
  border-radius: 3px;
  background: #1e2433;
  border: 1px solid #334155;
  outline: none;
  cursor: pointer;
}

.fl-eq-vert-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 10px;
  border-radius: 2px;
  background: #94a3b8;
  border: 1px solid #cbd5e1;
  cursor: pointer;
  transition: transform 0.08s ease;
}

.fl-eq-vert-slider.low::-webkit-slider-thumb {
  background: #ef4444;
  border-color: #f87171;
  box-shadow: 0 0 5px rgba(239, 68, 68, 0.6);
}

.fl-eq-vert-slider.mid::-webkit-slider-thumb {
  background: #f59e0b;
  border-color: #fbbf24;
  box-shadow: 0 0 5px rgba(245, 158, 11, 0.6);
}

.fl-eq-vert-slider.high::-webkit-slider-thumb {
  background: #00e5ff;
  border-color: #38bdf8;
  box-shadow: 0 0 5px rgba(0, 229, 255, 0.6);
}

.fx-eq-freq-tag {
  font-family: var(--font-mono, monospace);
  font-size: 8px;
  color: #64748b;
}

/* ==========================================================================
   FL Studio 10-Slot FX Rack & Plugin Picker Styles
   ========================================================================== */
.fx-slot-item {
  height: 30px;
  background: #171922;
  border: 1px solid #282a38;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 6px;
  cursor: pointer;
  transition: all 0.12s ease;
  position: relative;
}

.fx-slot-item:hover {
  background: #1f222e;
  border-color: #3d4157;
}

.fx-slot-item.is-empty {
  background: #13141b;
  border: 1px dashed #242633;
}

.fx-slot-item.is-empty .fx-slot-name {
  color: #55586d;
  font-style: italic;
}

.fx-slot-item.selected {
  border-color: var(--fire-orange, #ff7700);
  background: #222533;
}

.fx-slot-number {
  font-family: monospace;
  font-size: 10px;
  font-weight: 700;
  color: #63677d;
  width: 14px;
}

.fx-slot-toggle {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #00ff88;
  box-shadow: 0 0 6px rgba(0, 255, 136, 0.6);
  cursor: pointer;
  transition: all 0.12s ease;
  flex-shrink: 0;
}

.fx-slot-toggle.disabled {
  background: #323545;
  box-shadow: none;
}

.fx-slot-name {
  flex: 1;
  font-size: 11px;
  font-weight: 600;
  color: #d1d4e6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.fx-slot-name:hover {
  color: #ffffff;
}

.fx-slot-dropdown-btn {
  background: none;
  border: none;
  color: #7b8099;
  font-size: 10px;
  padding: 2px 4px;
  cursor: pointer;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.1s ease;
}

.fx-slot-dropdown-btn:hover {
  color: #ffffff;
  background: #2b2e40;
}

.fx-slot-edit-btn {
  background: none;
  border: none;
  color: #8c90a8;
  font-size: 10px;
  padding: 1px 3px;
  cursor: pointer;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.1s ease;
}

.fx-slot-edit-btn:hover {
  color: #00ff88;
  background: rgba(0, 255, 136, 0.15);
}

.fx-slot-mix-ctrl {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  color: #8c90a8;
  font-family: monospace;
}

.fx-slot-mix-slider {
  width: 36px;
  height: 4px;
  accent-color: var(--fire-orange, #ff7700);
  cursor: pointer;
}

/* Plugin Picker Dropdown Menu Modal */
.fx-picker-popup {
  position: absolute;
  top: 100%;
  left: 0;
  width: 250px;
  background: #171822;
  border: 1px solid #3b3e54;
  border-radius: 6px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8), 0 0 1px rgba(255, 255, 255, 0.2);
  z-index: 9999;
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 380px;
  overflow-y: auto;
  user-select: none;
}

.fx-picker-category {
  padding: 6px 10px 2px 10px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #ffaa00;
  text-transform: uppercase;
}

.fx-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  color: #cfd2e6;
  cursor: pointer;
  transition: all 0.1s ease;
}

.fx-picker-item:hover {
  background: #282a3c;
  color: #ffffff;
}

.fx-picker-item.active {
  color: #00ff88;
  background: rgba(0, 255, 136, 0.1);
}

.fx-picker-item-icon {
  font-size: 13px;
  width: 16px;
  text-align: center;
}

.fx-picker-divider {
  height: 1px;
  background: #292b3a;
  margin: 4px 0;
}

.fx-picker-more-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 700;
  color: #ff9933;
  background: rgba(255, 153, 51, 0.08);
  border-top: 1px solid rgba(255, 153, 51, 0.2);
  border-bottom: 1px solid rgba(255, 153, 51, 0.2);
  cursor: pointer;
  transition: all 0.12s ease;
}

.fx-picker-more-btn:hover {
  background: rgba(255, 153, 51, 0.22);
  color: #ffffff;
}

/* ==========================================================================
   Channel Color & Rename Modal Dialog (FL Studio Style)
   ========================================================================== */

.mixer-color-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(6, 8, 14, 0.72);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: mixerModalFade 0.12s ease-out;
}

@keyframes mixerModalFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

.mixer-color-modal {
  width: 380px;
  max-width: 94vw;
  background: #1a1e2b;
  border: 1px solid #333c52;
  border-radius: 6px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.75), 0 0 1px 1px rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
  color: #d5dae6;
  user-select: none;
  animation: mixerModalPop 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.mixer-color-modal-header {
  height: 36px;
  background: #141722;
  border-bottom: 1px solid #282f42;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
}

.mixer-color-modal-title {
  font-size: 11px;
  font-weight: 800;
  color: #e2e8f0;
  display: flex;
  align-items: center;
  gap: 7px;
  letter-spacing: 0.5px;
}

.mixer-modal-track-tag {
  font-size: 10px;
  font-weight: 700;
  background: #242c3f;
  color: #00e5ff;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid #374462;
  letter-spacing: 0;
}

.btn-close-color-modal {
  background: none;
  border: none;
  color: #828a9e;
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
  border-radius: 3px;
  transition: all 0.12s ease;
  line-height: 1;
}

.btn-close-color-modal:hover {
  background: #2b3348;
  color: #ffffff;
}

.mixer-color-modal-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #1a1e2b;
}

.mixer-color-field-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mixer-color-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #8e98b0;
}

.mixer-input-with-preview {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.mixer-track-name-input {
  flex: 1;
  height: 34px;
  background: #11131b;
  border: 1px solid #2f374d;
  border-radius: 4px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  padding: 0 10px;
  outline: none;
  transition: all 0.12s ease;
  font-family: inherit;
}

.mixer-track-name-input:focus {
  border-color: #00e5ff;
  background: #151822;
  box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.2);
}

.preview-name-plate {
  width: 95px;
  height: 34px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: background-color 0.15s ease;
  flex-shrink: 0;
}

.preview-name-text {
  font-size: 11px;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mixer-palette-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mixer-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.current-hex-label {
  font-family: monospace;
  font-size: 11px;
  font-weight: 700;
  color: #00e5ff;
  background: #13151e;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid #282f42;
}

.mixer-palette-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  background: #12141c;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #262c3e;
}

.palette-swatch-btn {
  height: 28px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  padding: 0;
}

.palette-swatch-btn:hover {
  transform: scale(1.14);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
  z-index: 2;
}

.palette-swatch-btn.active {
  box-shadow: 0 0 0 2px #ffffff, 0 0 8px rgba(0, 229, 255, 0.8);
  z-index: 3;
}

.mixer-color-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-custom-color-picker {
  flex: 1.2;
  height: 28px;
  background: #232838;
  border: 1px solid #363f58;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #e2e8f0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.12s ease;
}

.btn-custom-color-picker:hover {
  background: #2c3347;
  border-color: #495678;
  color: #ffffff;
}

.btn-custom-color-picker input[type="color"] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  top: 0;
  left: 0;
}

.btn-color-tool {
  flex: 1;
  height: 28px;
  background: #232838;
  border: 1px solid #363f58;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #e2e8f0;
  cursor: pointer;
  transition: all 0.12s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-color-tool:hover {
  background: #2c3347;
  border-color: #495678;
  color: #ffffff;
}

.mixer-color-modal-footer {
  height: 44px;
  background: #141722;
  border-top: 1px solid #282f42;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
}

.mixer-color-modal-hint {
  font-size: 10px;
  color: #6b7280;
}

.mixer-color-modal-hint strong {
  color: #9ca3af;
}

.mixer-color-modal-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-color-cancel {
  height: 26px;
  padding: 0 12px;
  background: #232838;
  border: 1px solid #37415a;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  color: #c4cddf;
  cursor: pointer;
  transition: all 0.1s ease;
}

.btn-color-cancel:hover {
  background: #2d3449;
  color: #ffffff;
}

.btn-color-apply {
  height: 26px;
  padding: 0 16px;
  background: #10b981;
  border: 1px solid #059669;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(16, 185, 129, 0.3);
  transition: all 0.1s ease;
}

.btn-color-apply:hover {
  background: #059669;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.5);
}

/* ==========================================================================
   Mixer Track Context Menu (Right Click)
   ========================================================================== */

@keyframes mixerMenuFade {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(-4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.mixer-track-context-menu {
  position: fixed;
  z-index: 100000;
  background: #1a1e2b;
  border: 1px solid #333c52;
  border-radius: 5px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.75), 0 0 1px 1px rgba(255, 255, 255, 0.05);
  padding: 4px 0;
  min-width: 195px;
  user-select: none;
  font-family: var(--font-sans, system-ui, sans-serif);
  animation: mixerMenuFade 0.1s ease-out;
}

.mixer-ctx-header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 4px 12px;
  font-size: 10px;
  font-weight: 800;
  color: #8e98b0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mixer-ctx-color-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

.mixer-ctx-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mixer-ctx-quick-colors {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px 6px 12px;
}

.ctx-swatch-btn {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: transform 0.1s ease;
  padding: 0;
}

.ctx-swatch-btn:hover {
  transform: scale(1.25);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.ctx-swatch-btn.active {
  box-shadow: 0 0 0 1.5px #ffffff, 0 0 5px rgba(0, 229, 255, 0.8);
}

.mixer-ctx-divider {
  height: 1px;
  background: #272d3f;
  margin: 4px 0;
}

.mixer-ctx-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  color: #cfd5e6;
  cursor: pointer;
  transition: all 0.1s ease;
}

.mixer-ctx-item:hover {
  background: #272f44;
  color: #ffffff;
}

.mixer-ctx-icon {
  font-size: 12px;
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}

.mixer-ctx-label {
  flex: 1;
}

.mixer-ctx-shortcut {
  font-size: 10px;
  color: #69748e;
  font-weight: 700;
  margin-left: 8px;
}




/* === File: css/playlist.css === */
/* ==========================================================================
   FireWave DAW - Playlist & Arranger Styles
   ========================================================================== */

#playlist-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-darkest);
}

.pl-toolbar {
  height: 42px;
  background: var(--bg-darker);
  border-bottom: 1px solid var(--border-dim);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

.pl-tools-left, .pl-tools-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* FL Studio Tool Button Group */
.pl-tools-group {
  display: flex;
  align-items: center;
  background: #141720;
  padding: 2px;
  border-radius: 6px;
  border: 1px solid #232a3b;
  gap: 2px;
}

.pl-tool-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #94a3b8;
  height: 26px;
  padding: 0 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.12s ease;
  user-select: none;
}

.pl-tool-btn:hover {
  background: #1e2433;
  color: #f1f5f9;
}

.pl-tool-btn.active {
  background: var(--fire-orange);
  color: #ffffff;
  border-color: var(--fire-orange-bright);
  box-shadow: 0 0 8px rgba(255, 102, 0, 0.45);
}

.pl-tool-key {
  font-size: 9px;
  opacity: 0.7;
  font-family: monospace;
  background: rgba(0, 0, 0, 0.25);
  padding: 1px 3px;
  border-radius: 2px;
}

/* Snap Group */
.pl-snap-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Track Drag Handle */
.pl-track-drag-handle {
  width: 12px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  font-size: 11px;
  cursor: grab;
  user-select: none;
  flex-shrink: 0;
  transition: color 0.1s;
}

.pl-track-drag-handle:hover {
  color: var(--fire-orange);
}

.pl-track-drag-handle:active {
  cursor: grabbing;
}

.pl-track-header.is-dragging-track {
  opacity: 0.35;
  background: #252b3c !important;
}

.pl-track-header.drag-over-top {
  border-top: 2px solid var(--fire-orange) !important;
  box-shadow: 0 -3px 8px rgba(255, 102, 0, 0.5);
}

.pl-track-header.drag-over-bottom {
  border-bottom: 2px solid var(--fire-orange) !important;
  box-shadow: 0 3px 8px rgba(255, 102, 0, 0.5);
}

/* Timeline & Tracks Container */
.pl-main-container {
  flex: 1;
  display: flex;
  position: relative;
  overflow: hidden;
}

/* Track Headers Sidebar */
.pl-tracks-sidebar {
  width: 185px;
  min-width: 185px;
  background: var(--bg-panel);
  border-right: 1px solid var(--border-dim);
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  z-index: 10;
  user-select: none;
}

.pl-timeline-header-corner {
  height: 30px;
  background: #1a1e28;
  border-bottom: 1px solid var(--border-dim);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Individual Playlist Track Header */
.pl-track-header {
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  background: #1a1d27;
  border-bottom: 1px solid #141720;
  display: flex;
  align-items: center;
  padding: 0 6px 0 0;
  gap: 5px;
  position: relative;
  transition: background 0.12s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.pl-track-header:hover {
  background: #222634;
}

.pl-track-header.selected {
  background: #252b3c;
  border-left: 2px solid var(--fire-orange);
}

.pl-track-header.muted {
  opacity: 0.6;
}

/* Color stripe on left */
.pl-track-color {
  width: 4px;
  height: 100%;
  border-radius: 0;
  background: var(--fire-orange);
  flex-shrink: 0;
}

/* Track Options Menu Trigger (•••) */
.pl-track-menu-btn {
  width: 14px;
  height: 22px;
  background: transparent;
  border: none;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  line-height: 1;
  transition: all 0.1s;
  flex-shrink: 0;
}

.pl-track-menu-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* Track Info (Title + Badges Row) */
.pl-track-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
}

.pl-track-title-row {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}

.pl-track-title {
  font-size: 11px;
  font-weight: 700;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: text;
}

.pl-track-title:hover {
  color: var(--fire-orange-bright);
}

.pl-track-badges-row {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}

/* Track Mode Badge */
.pl-track-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.12s;
  line-height: 1.2;
  text-transform: uppercase;
}

.pl-track-badge.audio {
  background: rgba(0, 229, 255, 0.16);
  color: #00e5ff;
  border: 1px solid rgba(0, 229, 255, 0.35);
}

.pl-track-badge.audio:hover {
  background: rgba(0, 229, 255, 0.3);
  box-shadow: 0 0 6px rgba(0, 229, 255, 0.4);
}

.pl-track-badge.instrument {
  background: rgba(16, 185, 129, 0.16);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.pl-track-badge.unassigned {
  background: rgba(100, 116, 139, 0.18);
  color: #94a3b8;
  border: 1px solid rgba(100, 116, 139, 0.25);
}

.pl-track-badge.unassigned:hover {
  background: rgba(255, 102, 0, 0.18);
  color: var(--fire-orange);
  border-color: rgba(255, 102, 0, 0.4);
}

/* Audio Input Badge */
.pl-track-in-badge {
  font-size: 8.5px;
  font-weight: 700;
  padding: 1px 3px;
  border-radius: 3px;
  background: rgba(255, 184, 0, 0.15);
  color: #ffb800;
  border: 1px solid rgba(255, 184, 0, 0.3);
  white-space: nowrap;
  cursor: pointer;
}

/* Arm Record Button on Track */
.pl-track-arm-btn {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid #475569;
  background: #1e2430;
  color: #94a3b8;
  font-size: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: all 0.12s;
  flex-shrink: 0;
}

.pl-track-arm-btn:hover {
  border-color: #ef4444;
  color: #ef4444;
}

.pl-track-arm-btn.armed {
  background: #ef4444;
  color: white;
  border-color: #f87171;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.7);
  animation: pl-rec-pulse 1.2s infinite ease-in-out;
}

@keyframes pl-rec-pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.85; }
  100% { transform: scale(1); opacity: 1; }
}

/* FL Studio Round Mute/Solo LED Button */
.pl-track-led-wrap {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(10, 13, 20, 0.5);
}

.pl-track-led {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981, inset 0 0 2px #a7f3d0;
  border: 1px solid #059669;
  cursor: pointer;
  transition: all 0.12s ease;
}

.pl-track-led.muted {
  background: #252b38;
  border-color: #3e485e;
  box-shadow: none;
}

.pl-track-led:hover {
  filter: brightness(1.25);
  transform: scale(1.15);
}

/* FL Studio Track Context Menu */
.fl-context-menu {
  position: fixed;
  z-index: 99999;
  background: #181c26;
  border: 1px solid #323b4e;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.75), 0 0 1px rgba(255, 255, 255, 0.15);
  padding: 4px 0;
  min-width: 210px;
  max-width: 280px;
  user-select: none;
  font-family: var(--font-sans, system-ui, sans-serif);
}

.fl-menu-row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  font-size: 11.5px;
  color: #e2e8f0;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  position: relative;
}

.fl-menu-row-item:hover,
.fl-menu-row-item.submenu-open {
  background: #ff5500;
  color: #ffffff;
}

.fl-menu-row-item.danger:hover {
  background: #ef4444;
}

.fl-menu-row-item.active-mode {
  color: #38bdf8;
  font-weight: 600;
}

.fl-menu-row-item.active-mode:hover {
  color: #ffffff;
}

.fl-menu-row-item.header {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: default;
  padding: 6px 12px 2px 12px;
}

.fl-menu-row-item.header:hover {
  background: transparent;
  color: #94a3b8;
}

.fl-menu-divider {
  height: 1px;
  background: #252b3b;
  margin: 3px 0;
}

.fl-menu-submenu-arrow {
  font-size: 9px;
  opacity: 0.7;
  margin-left: 8px;
}

/* Submenu Flyout */
.fl-submenu-flyout {
  display: none;
  position: absolute;
  left: 100%;
  top: -4px;
  background: #181c26;
  border: 1px solid #323b4e;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.75);
  padding: 4px 0;
  min-width: 200px;
  max-width: 320px;
  z-index: 100000;
  overflow: visible; /* CRITICAL: Never clip nested submenus! */
}

.fl-submenu-flyout.left-side {
  left: auto;
  right: 100%;
}

.fl-menu-row-item.has-submenu:hover > .fl-submenu-flyout,
.fl-menu-row-item.has-submenu.submenu-open > .fl-submenu-flyout {
  display: block;
}

/* Scrollable submenus: only for the list container or leaf submenus */
.fl-submenu-flyout.is-scrollable {
  max-height: 380px;
  overflow-y: auto;
  overflow-x: hidden;
}

.fl-submenu-flyout.is-scrollable::-webkit-scrollbar {
  width: 5px;
}

.fl-submenu-flyout.is-scrollable::-webkit-scrollbar-track {
  background: #11141c;
}

.fl-submenu-flyout.is-scrollable::-webkit-scrollbar-thumb {
  background: #3b4252;
  border-radius: 3px;
}

.fl-submenu-flyout.is-scrollable::-webkit-scrollbar-thumb:hover {
  background: #ff5500;
}

/* Playlist Grid & Timeline Ruler */
.pl-timeline-grid-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: auto;
  position: relative;
  background: #0f1117;
}

.pl-ruler-bar {
  height: 30px;
  background: #181b24;
  border-bottom: 1px solid var(--border-dim);
  position: sticky;
  top: 0;
  z-index: 5;
  width: max-content;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}

#playlist-ruler-canvas {
  display: block;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}

#playlist-grid-canvas {
  display: block;
  flex-shrink: 0;
  cursor: pointer;
  margin: 0;
  padding: 0;
}


/* === File: css/synth-fx.css === */
/* ==========================================================================
   FireWave DAW - Synth & FX Rack Styles
   Hardware Studio Style UI for FireSynth, FireEQ, Delay, Reverb
   ========================================================================== */

#synth-view, #fx-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-darkest);
  overflow-y: auto;
  padding: 16px;
  gap: 16px;
}

/* Hardware Unit Chassis */
.hardware-unit {
  background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-darker) 100%);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.unit-header {
  height: 38px;
  background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-panel) 100%);
  border-bottom: 1px solid var(--border-dim);
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.unit-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.unit-logo {
  font-size: 13px;
  font-weight: 800;
  color: var(--fire-orange-bright);
  letter-spacing: 1px;
}

.unit-type-tag {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  background: #101218;
  color: var(--neon-cyan);
  border: 1px solid rgba(0, 229, 255, 0.3);
  padding: 2px 6px;
  border-radius: 3px;
}

.unit-body {
  padding: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Module Section Box */
.synth-module {
  background: var(--bg-panel);
  border: 1px solid var(--border-dim);
  border-radius: 6px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-width: 190px;
}

.module-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border-bottom: 1px solid #232733;
  padding-bottom: 4px;
  display: flex;
  justify-content: space-between;
}

.module-controls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
  gap: 10px;
  align-items: center;
  justify-items: center;
}

/* EQ Visual Display */
.eq-display-container {
  width: 100%;
  height: 180px;
  background: #090b10;
  border: 1px solid #252b3b;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8);
}

#eq-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Soundgoodizer Signature FL Studio Unit */
.soundgoodizer-chassis {
  background: radial-gradient(circle at 50% 40%, #2a2c3a 0%, #151620 100%);
  border: 2px solid #3c4055;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7), inset 0 2px 3px rgba(255, 255, 255, 0.15);
  margin: 10px auto;
  max-width: 440px;
}

.soundgoodizer-brand-badge {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 2px;
  background: linear-gradient(135deg, #ff7700, #ffaa00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 10px rgba(255, 119, 0, 0.3);
}

.soundgoodizer-center-knob {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.soundgoodizer-modes {
  display: flex;
  gap: 14px;
  background: #101117;
  border: 1px solid #282a3a;
  border-radius: 24px;
  padding: 6px 14px;
}

.mode-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #1c1e2b;
  border: 2px solid #36394e;
  color: #8c90a6;
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.mode-btn:hover {
  border-color: #ffaa00;
  color: #fff;
}

.mode-btn.active {
  background: linear-gradient(135deg, #ff7700, #ff9900);
  border-color: #ffcc44;
  color: #000;
  box-shadow: 0 0 16px rgba(255, 119, 0, 0.6);
}

/* FL Studio Filter & Stereo Enhancer Pill Selectors */
.fx-pill-selector {
  display: flex;
  gap: 6px;
  background: #101218;
  padding: 4px;
  border-radius: 6px;
  border: 1px solid #232733;
}

.fx-pill-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #8c90a6;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.fx-pill-btn:hover {
  color: #fff;
}

.fx-pill-btn.active {
  background: var(--fire-orange);
  color: #000;
  border-color: #ffaa00;
  font-weight: 800;
}

.fx-toggle-btn {
  background: #181b24;
  border: 1px solid #2d3345;
  color: #8c90a6;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.fx-toggle-btn:hover {
  border-color: #ffaa00;
  color: #fff;
}

.fx-toggle-btn.active {
  background: #ff5500;
  color: #fff;
  border-color: #ff8833;
  box-shadow: 0 0 10px rgba(255, 85, 0, 0.4);
}

/* Unit Header Actions & Close / Power Buttons */
.unit-track-badge {
  font-size: 10px;
  font-weight: 800;
  color: #ffaa00;
  background: rgba(255, 170, 0, 0.12);
  border: 1px solid rgba(255, 170, 0, 0.35);
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

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

.unit-power-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #10121a;
  border: 1px solid #2d3345;
  color: #8c92b3;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.unit-power-btn:hover {
  border-color: #38bdf8;
  color: #ffffff;
}

.unit-power-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #475569;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
  transition: all 0.15s ease;
}

.unit-power-btn.active {
  background: rgba(34, 197, 94, 0.12);
  border-color: #22c55e;
  color: #4ade80;
}

.unit-power-btn.active .unit-power-led {
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e, 0 0 14px rgba(34, 197, 94, 0.6);
}

.unit-close-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, #2b3040 0%, #1e2230 100%);
  border: 1px solid #434c64;
  color: #e2e8f0;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.unit-close-btn:hover {
  background: #ef4444;
  border-color: #f87171;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
  transform: translateY(-1px);
}

.unit-close-btn:active {
  transform: translateY(1px);
}

.unit-close-icon {
  font-size: 12px;
  font-weight: 900;
}

/* Maximus, Transient Processor, Convolver & Pedalboard Styling */
.fx-pedalboard-container {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}

.fx-stompbox {
  background: #141724;
  border: 1px solid #2d3348;
  border-radius: 6px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 140px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.fx-stomp-header {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #252b3d;
  width: 100%;
  text-align: center;
}

.fx-vertical-slider-bank {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  justify-content: space-around;
  padding: 12px 6px;
  background: #0d0f17;
  border-radius: 6px;
  border: 1px solid #202436;
  width: 100%;
}

.fx-vslider-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.fx-vslider {
  writing-mode: bt-lr; /* IE */
  -webkit-appearance: slider-vertical;
  width: 22px;
  height: 120px;
  cursor: pointer;
  accent-color: #00e5ff;
}

.fx-vslider-label {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
}

.fx-vslider-val {
  font-size: 9px;
  color: #ffaa00;
  font-weight: 600;
}


/* === File: css/window-manager.css === */
/* ==========================================================================
   FireWave DAW - Floating Window Management System
   Integrated Studio Hardware Panels & Modular Multi-Window Workspace
   ========================================================================== */

#workspace {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: var(--bg-darkest);
  width: 100%;
  height: 100%;
}

/* Base Floating Window Chassis */
.fl-window {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  box-shadow: var(--window-shadow, 0 10px 28px rgba(0, 0, 0, 0.55));
  overflow: hidden;
  resize: both;
  min-width: 360px;
  min-height: 200px;
  transition: border-color 0.15s ease, background-color 0.25s ease, box-shadow 0.25s ease;
  user-select: none;
  z-index: 10;
}

/* Active Focused Window - Subtle depth and refined top accent line */
.fl-window.active-focus {
  border-color: var(--border-highlight);
  border-top: 2px solid var(--accent-primary);
  box-shadow: var(--window-focus-shadow, 0 14px 36px rgba(0, 0, 0, 0.65));
  z-index: 60;
}

/* Maximized Window */
.fl-window.is-maximized {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  border: none !important;
  resize: none !important;
}

/* Minimized Window */
.fl-window.is-minimized {
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  resize: none !important;
  overflow: hidden !important;
}

.fl-window.is-minimized .fl-window-body {
  display: none !important;
}

/* Hidden / Closed Window */
.fl-window.is-closed,
#workspace .fl-window.is-closed,
#mixer-view.is-closed,
#channel-rack-view.is-closed,
#piano-roll-view.is-closed,
#playlist-view.is-closed,
#loops-view.is-closed,
#synth-view.is-closed,
#fx-view.is-closed {
  display: none !important;
}

/* Window Header Bar (Integrated Hardware Title Bar) */
.fl-window-header {
  height: 30px;
  min-height: 30px;
  background: var(--window-header-bg, var(--bg-surface));
  border-bottom: 1px solid var(--border-dim);
  transition: background 0.25s ease, border-color 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  cursor: grab;
  user-select: none;
  flex-shrink: 0;
}

.fl-window-header:active {
  cursor: grabbing;
}

.fl-window-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: 0.4px;
  pointer-events: none;
  text-transform: uppercase;
}

.fl-window-icon {
  width: 13px;
  height: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-primary);
}

.fl-window-controls {
  display: flex;
  align-items: center;
  gap: 2px;
}

.win-btn {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.1s ease;
  padding: 0;
  line-height: 1;
}

.win-btn:hover {
  background: var(--bg-panel-hover);
  color: var(--text-main);
  border-color: var(--border-dim);
}

.win-btn.win-close:hover {
  background: var(--accent-red, #EF4444);
  color: #ffffff;
  border-color: var(--accent-red, #EF4444);
}

/* Window Body Content */
.fl-window-body {
  flex: 1;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
}

.fl-window-body .view-panel {
  display: flex !important;
  width: 100%;
  height: 100%;
}


/* === File: css/fl-studio-layout.css === */
/* ==========================================================================
   FireWave DAW - Professional Studio Hardware Interface Architecture
   Precision Digital Audio Workstation Layout & Technical Ergonomics
   Color Base: Charcoal #111318 | Graphite #191D25 | Secondary #232834 | Accent #F28C28
   ========================================================================== */

/* 1. Master Header (Compact Hardware Console Bar) */
#top-bar {
  width: 100% !important;
  max-width: 100% !important;
  display: flex;
  flex-direction: column;
  align-items: stretch !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-light);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  z-index: 1000;
  user-select: none;
  min-height: auto !important;
  box-sizing: border-box !important;
}

/* Tier 1: Menu Bar & Technical Live Display */
.fl-menu-row {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  height: 28px;
  background: var(--bg-darker);
  border-bottom: 1px solid var(--border-dim);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  gap: 10px;
  font-size: 11px;
}

.fl-menu-left {
  display: flex;
  align-items: center;
  gap: 4px;
}

.fl-logo-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 800;
  color: var(--text-main);
  font-size: 12px;
  letter-spacing: 0.5px;
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.12s ease;
}

.fl-logo-btn:hover {
  background: var(--bg-surface);
  border-color: var(--border-dim);
}

.fl-logo-icon {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fl-logo-icon svg {
  width: 14px;
  height: 14px;
  fill: var(--accent-primary);
}

.fl-menu-nav {
  display: flex;
  align-items: center;
  gap: 1px;
  position: relative;
}

.fl-menu-item {
  position: relative;
}

.fl-menu-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 3px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  transition: all 0.1s ease;
}

.fl-menu-btn:hover, .fl-menu-item.open .fl-menu-btn {
  background: var(--bg-surface);
  color: var(--text-main);
  border-color: var(--border-light);
}

#btn-top-reload.fl-menu-btn:hover {
  background: rgba(255, 102, 0, 0.15);
  color: var(--fire-orange, #ff6600);
  border-color: rgba(255, 102, 0, 0.4);
}

/* Dropdown Menu Popup */
.fl-menu-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--bg-panel);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7);
  padding: 3px 0;
  z-index: 2000;
}

.fl-menu-item.open .fl-menu-dropdown {
  display: block;
}

.fl-dropdown-action {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 5px 12px;
  font-size: 11px;
  color: var(--text-main);
  cursor: pointer;
  transition: background 0.1s;
  text-align: left;
  white-space: nowrap;
}

.fl-dropdown-action:hover {
  background: var(--accent-primary);
  color: #111318;
  font-weight: 600;
}

.fl-dropdown-action > span:not(.shortcut):not(.fw-icon-wrap) {
  text-align: left;
  flex: 0 1 auto;
}

.fl-dropdown-action .shortcut {
  margin-left: auto;
  font-size: 9.5px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  padding-left: 20px;
  flex-shrink: 0;
}

.fl-dropdown-action:hover .shortcut {
  color: #111318;
}

.fl-dropdown-divider {
  height: 1px;
  background: var(--border-dim);
  margin: 3px 0;
}

/* Technical Live Hint Bar */
.fl-hint-bar {
  flex: 1;
  max-width: 440px;
  height: 20px;
  background: var(--bg-darkest);
  border: 1px solid var(--border-dim);
  border-radius: 3px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 10.5px;
  color: var(--text-muted);
}

.fl-hint-icon {
  font-size: 10px;
  color: var(--accent-primary);
  display: inline-flex;
  align-items: center;
}

.fl-hint-text {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-main);
  letter-spacing: 0.2px;
}

/* System Stats (CPU / RAM / DSP) */
.fl-sys-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-dim);
  background: var(--bg-darkest);
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid var(--border-dim);
}

.stat-pill {
  display: flex;
  align-items: center;
  gap: 4px;
}

.stat-val {
  color: var(--accent-primary);
  font-weight: 700;
}

/* Tier 2: Precision Hardware Ribbon Row */
.fl-ribbon-row {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  min-height: 36px;
  height: 36px;
  background: var(--bg-panel);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 8px;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.fl-ribbon-row::-webkit-scrollbar {
  display: none;
}

.fl-module-group {
  display: flex;
  align-items: center;
  gap: 3px;
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  padding: 2px 4px;
  border-radius: 4px;
  height: 28px;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* Transport Controls Group */
.transport-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* FL Studio Authentic PAT / SONG Mode Switcher */
.fl-mode-switch-group {
  display: inline-flex;
  align-items: center;
  background: #141720;
  border: 1px solid #232a3b;
  border-radius: 4px;
  padding: 2px;
  gap: 2px;
  user-select: none;
}

.btn-mode-pill {
  background: transparent;
  border: 1px solid transparent;
  color: #718096;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 800;
  padding: 0 7px;
  height: 20px;
  border-radius: 3px;
  cursor: pointer;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s ease;
}

.btn-mode-pill:hover {
  background: #1e2433;
  color: #e2e8f0;
}

.btn-mode-pill.active {
  background: var(--fire-orange, #ff6600);
  color: #ffffff;
  border-color: #ff8533;
  box-shadow: 0 0 10px rgba(255, 102, 0, 0.55);
}

.btn-toggle {
  height: 24px;
  padding: 0 6px;
  background: var(--bg-panel);
  border: 1px solid var(--border-dim);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-primary);
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: all 0.12s ease;
}

.btn-toggle:hover {
  background: var(--bg-panel-hover);
  border-color: var(--border-light);
}

.btn-transport {
  width: 26px;
  height: 24px;
  border-radius: 3px;
  background: var(--bg-panel);
  border: 1px solid var(--border-dim);
  color: var(--text-main);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s ease;
  padding: 0;
}

.btn-transport svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
}

.btn-transport:hover {
  background: var(--bg-panel-hover);
  border-color: var(--border-light);
  color: #ffffff;
}

.btn-transport.play.active {
  background: var(--accent-emerald, #10B981);
  border-color: var(--accent-emerald, #10B981);
  color: #111318;
}

.btn-transport.record {
  width: auto;
  padding: 0 7px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.btn-transport.record.active {
  background: var(--accent-red, #EF4444);
  border-color: var(--accent-red, #EF4444);
  color: #ffffff;
}

/* Hardware Digital LCD Readouts */
.lcd-display {
  background: var(--bg-darkest);
  border: 1px solid var(--border-dim);
  border-radius: 3px;
  height: 24px;
  padding: 0 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  min-width: 58px;
  cursor: pointer;
}

.lcd-label {
  font-size: 7px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  line-height: 1;
  text-transform: uppercase;
}

.lcd-value {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-primary);
  line-height: 1;
  letter-spacing: 0.5px;
}

.lcd-value.green {
  color: var(--accent-secondary);
}

/* Helper Buttons (Metronome, Typing Keyboard) */
.helpers-group {
  display: flex;
  align-items: center;
  gap: 2px;
}

.fl-helper-btn {
  height: 24px;
  padding: 0 6px;
  border-radius: 3px;
  border: 1px solid var(--border-dim);
  background: var(--bg-panel);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.12s ease;
}

.fl-helper-btn .led-indicator {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: all 0.12s ease;
}

.fl-helper-btn:hover {
  color: var(--text-main);
  border-color: var(--border-light);
}

.fl-helper-btn.active {
  color: var(--text-main);
  background: var(--bg-panel-hover);
  border-color: var(--accent-primary);
}

.fl-helper-btn.active .led-indicator {
  background: var(--accent-primary);
  box-shadow: 0 0 5px var(--accent-primary);
}

/* Master Visualizer & Volume */
.master-monitor-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

#master-scope-canvas {
  width: 105px;
  height: 22px;
  background: var(--bg-darkest);
  border: 1px solid var(--border-dim);
  border-radius: 3px;
  display: block;
}

#master-vol-knob-container,
#master-pitch-knob-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  width: 26px;
}

#master-vol-knob-container .knob-container,
#master-pitch-knob-container .knob-container {
  width: 26px !important;
  height: 24px !important;
  flex: 0 0 26px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

#master-vol-knob-container .knob-label,
#master-pitch-knob-container .knob-label {
  display: none !important;
}

/* Workspace Window Toggle Icons */
.fl-view-shortcuts {
  display: flex;
  align-items: center;
  gap: 2px;
}

.fl-shortcut-btn {
  width: 26px;
  height: 24px;
  border-radius: 3px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.12s ease;
  position: relative;
  padding: 0;
}

.fl-shortcut-btn svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
}

.fl-shortcut-btn:hover {
  background: var(--bg-panel);
  color: var(--text-main);
  border-color: var(--border-dim);
}

.fl-shortcut-btn.active {
  background: var(--bg-panel);
  color: var(--accent-primary);
  border-color: var(--border-light);
  border-bottom: 2px solid var(--accent-primary);
}

/* Right-Docked Project & Preset Tools */
.fl-project-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 3px;
}

.fl-ribbon-select {
  height: 24px !important;
  background: var(--bg-panel);
  border: 1px solid var(--border-dim);
  color: var(--accent-primary);
  font-size: 10.5px;
  font-weight: 700;
  padding: 0 5px;
  border-radius: 3px;
  cursor: pointer;
  max-width: 130px;
  outline: none;
  font-family: var(--font-main);
}

.fl-ribbon-select:hover {
  border-color: var(--border-light);
}

.fl-io-btn {
  height: 24px !important;
  padding: 0 8px !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  font-family: var(--font-mono) !important;
  border-radius: 3px !important;
  border: 1px solid var(--border-dim) !important;
  background: var(--bg-panel) !important;
  color: var(--text-muted) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.5px;
  transition: all 0.12s ease;
}

.fl-io-btn:hover {
  background: var(--bg-panel-hover) !important;
  color: var(--text-main) !important;
  border-color: var(--border-light) !important;
}

.fl-io-btn.primary {
  background: var(--accent-primary) !important;
  border-color: var(--accent-primary-bright) !important;
  color: #111318 !important;
  font-weight: 800 !important;
}

.fl-io-btn.primary:hover {
  background: var(--accent-primary-bright) !important;
  color: #111318 !important;
}

/* 2. Main Workspace Layout */
#main-content-layout {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   3. Studio Left Browser (Technical Tree Navigation)
   ========================================================================== */
.fl-browser-sidebar {
  width: 240px;
  min-width: 240px;
  background: var(--bg-darker);
  border-right: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  transition: width 0.18s ease, min-width 0.18s ease, margin-left 0.18s ease;
  z-index: 40;
  position: relative;
}

.fl-browser-sidebar.collapsed {
  width: 0 !important;
  min-width: 0 !important;
  margin-left: -1px;
  overflow: hidden;
}

.fl-browser-header {
  height: 30px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-dim);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.fl-browser-search {
  padding: 5px 8px;
  background: var(--bg-darkest);
  border-bottom: 1px solid var(--border-dim);
}

.fl-browser-search input {
  width: 100%;
  background: var(--bg-panel);
  border: 1px solid var(--border-dim);
  border-radius: 3px;
  color: var(--text-main);
  padding: 4px 8px;
  font-size: 11px;
  outline: none;
  font-family: inherit;
}

.fl-browser-search input:focus {
  border-color: var(--accent-primary);
}

.fl-browser-tree {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

.fl-tree-folder {
  margin-bottom: 1px;
}

.fl-folder-title {
  padding: 4px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.1s ease;
  border-left: 2px solid transparent;
}

.fl-folder-title:hover {
  background: var(--bg-panel);
  color: var(--text-main);
}

.fl-folder-title .icon {
  width: 13px;
  height: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
}

.fl-folder-title .icon svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
}

.fl-folder-title .arrow {
  width: 10px;
  font-size: 8px;
  transition: transform 0.12s ease;
  color: var(--text-dim);
  display: inline-block;
}

.fl-tree-folder.open .fl-folder-title .arrow {
  transform: rotate(90deg);
}

.fl-folder-items {
  display: none;
  padding-left: 12px;
}

.fl-tree-folder.open .fl-folder-items {
  display: block;
}

.fl-tree-item {
  padding: 3px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--text-main);
  cursor: pointer;
  border-radius: 2px;
  margin: 1px 4px;
  transition: background 0.1s;
  border-left: 2px solid transparent;
}

.fl-tree-item:hover {
  background: var(--bg-surface);
  color: var(--text-main);
  border-left-color: var(--border-light);
}

.fl-tree-item.selected {
  background: var(--bg-surface);
  color: var(--accent-primary);
  border-left-color: var(--accent-primary);
}

.fl-tree-item .item-add-btn {
  font-size: 10px;
  color: var(--text-dim);
  padding: 0 4px;
}

.fl-tree-item:hover .item-add-btn {
  color: var(--accent-primary);
}

/* ==========================================================================
   4. Desktop MDI Canvas (Clean Studio Workspace)
   ========================================================================== */
#workspace {
  flex: 1;
  position: relative;
  overflow: hidden;
  background-color: var(--bg-darkest);
  /* Theme-specific custom textured background and precision grid */
  background-image: var(--workspace-pattern, linear-gradient(rgba(53, 59, 71, 0.15) 1px, transparent 1px), linear-gradient(90deg, rgba(53, 59, 71, 0.15) 1px, transparent 1px));
  background-size: var(--workspace-pattern-size, 24px 24px, 24px 24px);
  transition: background-color 0.25s ease, background-image 0.25s ease;
}


/* === File: css/recording-dialog.css === */
/* ==========================================================================
   FireWave DAW - Audio Recording & Input Assignment Dialog
   Studio Recording Setup Modal, Input VU Meters & Instrument Routing
   ========================================================================== */

/* 1. Modal Backdrop */
.fl-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(8, 10, 15, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.fl-modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* 2. Modal Chassis */
.fl-rec-modal {
  width: 760px;
  max-width: 95vw;
  max-height: 90vh;
  background: #171a24;
  border: 1px solid #333d54;
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75), 0 0 30px rgba(255, 102, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.96) translateY(10px);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.fl-modal-backdrop.open .fl-rec-modal {
  transform: scale(1) translateY(0);
}

/* 3. Modal Header */
.fl-rec-header {
  height: 48px;
  background: linear-gradient(180deg, #242a3a 0%, #1b202c 100%);
  border-bottom: 1px solid #31394e;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}

.fl-rec-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fl-rec-logo {
  font-size: 18px;
}

.fl-rec-title {
  font-family: var(--font-main, 'Outfit', sans-serif);
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.3px;
}

.fl-rec-subtitle {
  font-size: 11px;
  color: var(--text-muted, #8e9bb2);
  margin-left: 6px;
}

.fl-rec-close-btn {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid transparent;
  color: #8e9bb2;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.fl-rec-close-btn:hover {
  background: rgba(255, 51, 68, 0.2);
  border-color: #ff3344;
  color: #ff4455;
}

/* 4. Modal Body */
.fl-rec-body {
  padding: 16px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #141620;
}

/* Section Titles */
.fl-rec-section-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #ff7700;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.fl-rec-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #252c3d;
}

/* 5. Four Recording Modes Cards */
.fl-rec-modes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.fl-rec-mode-card {
  background: #1b1f2d;
  border: 1.5px solid #2d364b;
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: all 0.15s ease;
  position: relative;
  user-select: none;
}

.fl-rec-mode-card:hover {
  background: #222739;
  border-color: #445271;
  transform: translateY(-1px);
}

.fl-rec-mode-card.active {
  background: #23293e;
  border-color: #ff6600;
  box-shadow: 0 0 12px rgba(255, 102, 0, 0.3);
}

.fl-rec-mode-icon {
  font-size: 22px;
  line-height: 1;
  padding: 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
}

.fl-rec-mode-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fl-rec-mode-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fl-rec-mode-title {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
}

.fl-rec-mode-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(255, 102, 0, 0.2);
  color: #ff8533;
  text-transform: uppercase;
}

.fl-rec-mode-desc {
  font-size: 10.5px;
  color: #8a96ab;
  line-height: 1.35;
}

/* 6. Instrument & Vocal Input Assignment Presets */
.fl-rec-instruments-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.fl-rec-inst-btn {
  background: #191c28;
  border: 1px solid #293043;
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s ease;
  user-select: none;
  text-align: left;
}

.fl-rec-inst-btn:hover {
  background: #212638;
  border-color: #3b4662;
}

.fl-rec-inst-btn.active {
  background: #272f44;
  border-color: var(--inst-color, #ff6600);
  box-shadow: 0 0 10px var(--inst-glow, rgba(255, 102, 0, 0.3));
}

.fl-rec-inst-icon {
  font-size: 18px;
}

.fl-rec-inst-info {
  flex: 1;
  overflow: hidden;
}

.fl-rec-inst-name {
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fl-rec-inst-routing {
  font-size: 9.5px;
  font-family: var(--font-mono, monospace);
  color: #7b889d;
}

.fl-rec-inst-btn.active .fl-rec-inst-routing {
  color: var(--inst-color, #ff8533);
}

/* 7. Calibration, Live Peak Meter & Direct Monitoring */
.fl-rec-calibration-box {
  background: #10121b;
  border: 1px solid #23293b;
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fl-rec-meter-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fl-rec-meter-label {
  font-size: 10.5px;
  font-weight: 700;
  color: #93a1b8;
  min-width: 90px;
}

.fl-rec-vu-canvas-wrapper {
  flex: 1;
  height: 24px;
  background: #08090d;
  border: 1px solid #1c212e;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}

#fl-rec-vu-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.fl-rec-db-badge {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  color: #00ff88;
  min-width: 65px;
  text-align: right;
}

.fl-rec-db-badge.clipping {
  color: #ff3344;
  text-shadow: 0 0 6px #ff3344;
}

/* Input Gain Slider Row */
.fl-rec-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 4px;
  border-top: 1px solid #1a1e2b;
}

.fl-rec-gain-control {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.fl-rec-gain-label {
  font-size: 10px;
  color: #8a96ab;
  white-space: nowrap;
}

.fl-rec-gain-slider {
  flex: 1;
  accent-color: #ff6600;
  cursor: pointer;
  height: 5px;
}

.fl-rec-gain-val {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  color: #ff8533;
  min-width: 38px;
}

/* Headphone Direct Monitoring Switch */
.fl-rec-monitor-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  background: #171b26;
  border: 1px solid #283044;
  border-radius: 20px;
  padding: 4px 10px;
  transition: all 0.15s ease;
}

.fl-rec-monitor-toggle:hover {
  background: #1e2433;
  border-color: #3b4764;
}

.fl-rec-monitor-toggle.active {
  background: rgba(0, 229, 255, 0.15);
  border-color: #00e5ff;
}

.fl-rec-switch-pill {
  width: 28px;
  height: 14px;
  background: #2b3347;
  border-radius: 10px;
  position: relative;
  transition: background 0.2s ease;
}

.fl-rec-switch-knob {
  width: 10px;
  height: 10px;
  background: #ffffff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.fl-rec-monitor-toggle.active .fl-rec-switch-pill {
  background: #00e5ff;
}

.fl-rec-monitor-toggle.active .fl-rec-switch-knob {
  transform: translateX(14px);
  background: #080a10;
}

.fl-rec-monitor-text {
  font-size: 10.5px;
  font-weight: 600;
  color: #ffffff;
}

/* 8. Detailed Routing & Take Settings */
.fl-rec-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.fl-rec-field-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fl-rec-field-label {
  font-size: 10.5px;
  font-weight: 700;
  color: #8a96ab;
}

.fl-rec-select, .fl-rec-input {
  background: #191c28;
  border: 1px solid #2b3346;
  border-radius: 5px;
  height: 32px;
  padding: 0 10px;
  color: #ffffff;
  font-size: 11.5px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease;
}

.fl-rec-select:focus, .fl-rec-input:focus {
  border-color: #ff6600;
}

/* Options Checkboxes */
.fl-rec-options-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 2px 0;
}

.fl-rec-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #9eb0cc;
  cursor: pointer;
  user-select: none;
}

.fl-rec-checkbox-label input[type="checkbox"] {
  accent-color: #ff6600;
  cursor: pointer;
}

/* 9. Modal Footer Actions */
.fl-rec-footer {
  height: 54px;
  background: #12141c;
  border-top: 1px solid #262c3d;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fl-rec-footer-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fl-rec-footer-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fl-rec-btn {
  height: 34px;
  padding: 0 16px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s ease;
  user-select: none;
}

.fl-rec-btn-cancel {
  background: transparent;
  border: 1px solid #333d54;
  color: #8e9bb2;
}

.fl-rec-btn-cancel:hover {
  background: #1e2332;
  color: #ffffff;
  border-color: #495777;
}

.fl-rec-btn-arm {
  background: #252b3d;
  border: 1px solid #ff4455;
  color: #ff5566;
}

.fl-rec-btn-arm:hover {
  background: rgba(255, 68, 85, 0.18);
  box-shadow: 0 0 10px rgba(255, 68, 85, 0.35);
}

.fl-rec-btn-start {
  background: linear-gradient(135deg, #ff4455 0%, #d81c30 100%);
  border: 1px solid #ff6677;
  color: #ffffff;
  box-shadow: 0 0 15px rgba(255, 68, 85, 0.4);
}

.fl-rec-btn-start:hover {
  background: linear-gradient(135deg, #ff5566 0%, #ee2238 100%);
  box-shadow: 0 0 20px rgba(255, 68, 85, 0.6);
  transform: translateY(-1px);
}

/* 10. Pre-Count Countdown HUD Overlay */
.fl-countdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(5, 7, 10, 0.75);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.fl-countdown-overlay.active {
  opacity: 1;
}

.fl-countdown-num {
  font-family: var(--font-mono, monospace);
  font-size: 110px;
  font-weight: 900;
  color: #ff6600;
  text-shadow: 0 0 30px rgba(255, 102, 0, 0.8), 0 0 60px rgba(255, 102, 0, 0.4);
  transform: scale(0.6);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.fl-countdown-overlay.pulse .fl-countdown-num {
  transform: scale(1.15);
}

.fl-countdown-text {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: -10px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

/* 11. Mixer Strip Record Arm Button & Input Badge */
.btn-arm-rec {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #3d4760;
  background: #191c28;
  color: #7d8b9f;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  padding: 0;
  line-height: 1;
}

.btn-arm-rec:hover {
  background: #2b3244;
  border-color: #ff4455;
  color: #ff4455;
}

.btn-arm-rec.armed {
  background: #ff3344;
  border-color: #ff5566;
  color: #ffffff;
  box-shadow: 0 0 8px rgba(255, 51, 68, 0.7);
  animation: rec-arm-pulse 1.2s infinite ease-in-out;
}

@keyframes rec-arm-pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.12); opacity: 0.85; box-shadow: 0 0 14px rgba(255, 51, 68, 0.9); }
  100% { transform: scale(1); opacity: 1; }
}

.strip-in-badge {
  font-family: var(--font-mono, monospace);
  font-size: 8.5px;
  font-weight: 700;
  color: #7b889d;
  background: #141722;
  border: 1px solid #222838;
  border-radius: 3px;
  padding: 1px 4px;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 86px;
  transition: all 0.15s ease;
}

.strip-in-badge:hover {
  border-color: #ff6600;
  color: #ff8533;
  background: #1e2434;
}

.strip-in-badge.has-input {
  color: #00ff88;
  border-color: rgba(0, 255, 136, 0.4);
  background: rgba(0, 255, 136, 0.1);
}


/* === File: css/settings-dialog.css === */
/**
 * FireWave DAW - FL Studio Settings Modal Styles (F10)
 */

.fl-settings-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99999999 !important;
  background: rgba(8, 10, 16, 0.72);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: settingsFadeIn 0.14s ease-out;
}

@keyframes settingsFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fl-settings-modal {
  background: #141824;
  border: 1px solid #334155;
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.95), 0 0 1px rgba(255, 255, 255, 0.3);
  width: 92%;
  max-width: 680px;
  height: 520px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #e2e8f0;
  font-family: var(--font-sans, system-ui, sans-serif);
  animation: settingsScaleUp 0.16s ease-out;
}

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

.fl-settings-header {
  height: 44px;
  background: #1a2030;
  border-bottom: 1px solid #2d3748;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  flex-shrink: 0;
}

.fl-settings-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--fire-orange, #ff6600);
  letter-spacing: 0.6px;
}

.fl-settings-hint {
  font-size: 11px;
  color: #94a3b8;
  font-family: var(--font-mono, monospace);
}

.btn-close-settings {
  width: 26px;
  height: 26px;
  background: transparent;
  border: 1px solid #475569;
  border-radius: 4px;
  color: #94a3b8;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s ease;
}

.btn-close-settings:hover {
  background: #ef4444;
  border-color: #ef4444;
  color: #ffffff;
}

.fl-settings-main {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* Sidebar Tabs */
.fl-settings-sidebar {
  width: 140px;
  min-width: 140px;
  background: #11141e;
  border-right: 1px solid #262e3d;
  display: flex;
  flex-direction: column;
  padding: 8px 6px;
  gap: 4px;
}

.fl-settings-tab-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 5px;
  background: transparent;
  border: 1px solid transparent;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s ease;
  text-align: left;
}

.fl-settings-tab-btn .tab-icon {
  font-size: 15px;
}

.fl-settings-tab-btn:hover {
  background: #1a2030;
  color: #f1f5f9;
}

.fl-settings-tab-btn.active {
  background: rgba(255, 102, 0, 0.15);
  border-color: var(--fire-orange, #ff6600);
  color: var(--fire-orange, #ff6600);
  font-weight: 700;
}

/* Content Area */
.fl-settings-content {
  flex: 1;
  padding: 16px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fl-settings-section {
  background: #191f2e;
  border: 1px solid #2e3a4e;
  border-radius: 6px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fl-section-title {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.fl-settings-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fl-field-label {
  font-size: 11px;
  font-weight: 600;
  color: #cbd5e1;
}

.fl-settings-select, .fl-settings-input {
  width: 100%;
  height: 30px;
  background: #0f121a;
  border: 1px solid #374151;
  border-radius: 4px;
  color: #f8fafc;
  font-size: 11.5px;
  font-weight: 600;
  padding: 0 8px;
  outline: none;
  box-sizing: border-box;
  transition: all 0.12s ease;
}

.fl-settings-select:hover, .fl-settings-select:focus,
.fl-settings-input:hover, .fl-settings-input:focus {
  border-color: #00e5ff;
  box-shadow: 0 0 6px rgba(0, 229, 255, 0.25);
}

.fl-settings-select option {
  background: #141824;
  color: #f8fafc;
}

.fl-settings-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Buffer Control */
.fl-buffer-control {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}

.fl-buffer-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.buffer-val-pill {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  color: #00e5ff;
}

.buffer-ms-pill {
  font-size: 10px;
  color: #94a3b8;
  background: #11141e;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid #2d3748;
}

.fl-settings-slider {
  width: 100%;
  accent-color: var(--fire-orange, #ff6600);
  cursor: pointer;
}

.fl-buffer-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: #64748b;
  font-family: var(--font-mono, monospace);
}

.fl-settings-checkbox-row {
  display: flex;
  align-items: center;
  margin-top: 4px;
}

.fl-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #cbd5e1;
  cursor: pointer;
  user-select: none;
}

.fl-checkbox-label input {
  accent-color: var(--fire-orange, #ff6600);
  cursor: pointer;
}

/* MIDI list */
.fl-midi-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fl-midi-dev-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #11141e;
  border: 1px solid #2d3748;
  border-radius: 5px;
  padding: 8px 10px;
}

.fl-midi-dev-item.active {
  border-color: #00ff88;
  background: rgba(0, 255, 136, 0.08);
}

.midi-dev-icon {
  font-size: 16px;
}

.midi-dev-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.midi-dev-name {
  font-size: 11.5px;
  font-weight: 600;
  color: #f8fafc;
}

.midi-dev-sub {
  font-size: 9.5px;
  color: #94a3b8;
}

.midi-dev-badge {
  font-size: 9.5px;
  font-weight: 700;
  color: #00ff88;
}

.fl-midi-empty-item {
  display: flex;
  flex-direction: column;
  background: #11141e;
  border: 1px dashed #334155;
  border-radius: 5px;
  padding: 10px;
  font-size: 11px;
  color: #cbd5e1;
}

.btn-rescan-midi {
  height: 28px;
  border-radius: 4px;
  background: #1e293b;
  border: 1px solid #475569;
  color: #38bdf8;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s ease;
  align-self: flex-start;
  padding: 0 12px;
}

.btn-rescan-midi:hover {
  background: #0284c7;
  color: #ffffff;
}

/* Footer */
.fl-settings-footer {
  height: 48px;
  background: #11141e;
  border-top: 1px solid #2d3748;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  flex-shrink: 0;
}

.fl-settings-footer-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  color: #94a3b8;
}

.btn-settings-save {
  height: 30px;
  padding: 0 16px;
  border-radius: 4px;
  background: var(--fire-orange, #ff6600);
  border: none;
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s ease;
}

.btn-settings-save:hover {
  background: #ff7700;
  box-shadow: 0 0 10px rgba(255, 102, 0, 0.4);
}


/* === File: css/debug-inspector.css === */
/* FireWave DAW - DSP Debug & Audio Telemetry Inspector Styles */

.debug-inspector-window {
  display: none;
  flex-direction: column;
  background: var(--bg-surface, #1e1f26);
  border: 1px solid var(--border-medium, #3a3b45);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7), 0 0 1px rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  overflow: hidden;
  user-select: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.debug-inspector-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  background: #15161c;
  flex: 1;
  overflow-y: auto;
}

/* Metric Cards Grid */
.debug-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.debug-metric-card {
  background: #1b1c24;
  border: 1px solid #2d2e3b;
  border-radius: 4px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.metric-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--text-dim, #7e8299);
}

.metric-value-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.metric-val {
  font-size: 15px;
  font-weight: 700;
  font-family: 'Consolas', 'Courier New', monospace;
  color: #ffffff;
}

.metric-val.highlight {
  color: #00ffaa;
  text-shadow: 0 0 6px rgba(0, 255, 170, 0.3);
}

.metric-sub {
  font-size: 10px;
  color: #63677d;
}

.debug-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}

.badge-running {
  background: rgba(0, 255, 136, 0.15);
  color: #00ff88;
  border: 1px solid rgba(0, 255, 136, 0.35);
}

.badge-suspended {
  background: rgba(255, 170, 0, 0.15);
  color: #ffaa00;
  border: 1px solid rgba(255, 170, 0, 0.35);
}

.badge-closed {
  background: rgba(255, 68, 85, 0.15);
  color: #ff4455;
  border: 1px solid rgba(255, 68, 85, 0.35);
}

.dbg-btn-tiny {
  background: #272836;
  border: 1px solid #3c3e52;
  color: #b5b8cf;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.dbg-btn-tiny:hover {
  background: #37394d;
  color: #fff;
  border-color: #555875;
}

/* Peak Meter Section */
.debug-meter-section {
  display: flex;
  gap: 12px;
  background: #1b1c24;
  border: 1px solid #2d2e3b;
  border-radius: 4px;
  padding: 10px 12px;
}

.debug-meter-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.meter-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.meter-title {
  font-size: 11px;
  font-weight: 700;
  color: #c9ccd9;
}

.clip-indicator-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.clip-led {
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 2px;
  background: #331518;
  color: #7a3138;
  border: 1px solid #4d1d23;
  transition: all 0.1s ease;
}

.clip-led.active {
  background: #ff1133;
  color: #ffffff;
  border-color: #ff4466;
  box-shadow: 0 0 10px #ff1133;
}

.debug-vu-track {
  background: #111217;
  height: 12px;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid #262733;
  position: relative;
}

.debug-vu-bar {
  height: 100%;
  width: 0%;
  transition: width 0.05s linear;
  box-shadow: 0 0 4px rgba(0, 255, 136, 0.4);
}

.vu-scale-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  color: #55586d;
  margin-top: 2px;
  padding: 0 2px;
}

.debug-tools-right {
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}

.dbg-btn-panic {
  background: linear-gradient(180deg, #aa2222, #771111);
  border: 1px solid #ff4444;
  color: #ffffff;
  font-weight: 800;
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 3px;
  cursor: pointer;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(170, 34, 34, 0.4);
  transition: all 0.15s ease;
}

.dbg-btn-panic:hover {
  background: linear-gradient(180deg, #cc2929, #991616);
  box-shadow: 0 0 10px rgba(255, 50, 50, 0.6);
}

.dbg-btn-action {
  background: #272836;
  border: 1px solid #3d3f54;
  color: #e0e2f0;
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.dbg-btn-action:hover {
  background: #37394d;
  color: #ffffff;
  border-color: var(--accent-primary, #ff7700);
}

/* Diagnostic Console */
.debug-console-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: #111217;
  border: 1px solid #2d2e3b;
  border-radius: 4px;
  overflow: hidden;
  min-height: 160px;
}

.console-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: #171821;
  border-bottom: 1px solid #262733;
}

.console-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: #8c90a8;
  text-transform: uppercase;
}

.console-actions {
  display: flex;
  gap: 6px;
}

.debug-console-output {
  flex: 1;
  padding: 8px 10px;
  overflow-y: auto;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 11px;
  display: flex;
  flex-direction: column-reverse; /* Most recent on top */
  gap: 4px;
}

.console-line {
  display: flex;
  gap: 8px;
  line-height: 1.4;
}

.line-time {
  color: #55586d;
  font-size: 10px;
  min-width: 68px;
}

.line-tag {
  font-weight: 700;
  font-size: 10px;
}

.line-info .line-tag { color: #00e5ff; }
.line-info .line-msg { color: #d0d4e8; }

.line-warn .line-tag { color: #ffaa00; }
.line-warn .line-msg { color: #ffdd88; }

.line-error .line-tag { color: #ff3344; }
.line-error .line-msg { color: #ff8899; }


/* === File: css/plugin-manager.css === */
/**
 * FireWave DAW - FL Studio Plugin Manager Stylesheet
 * Signature hardware gunmetal theme, amber highlights, responsive catalog table
 */

.pm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 15, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pmFadeIn 0.16s ease-out;
  user-select: none;
}

@keyframes pmFadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

.pm-window {
  width: 980px;
  max-width: 96vw;
  height: 680px;
  max-height: 94vh;
  background: linear-gradient(180deg, #1b202c 0%, #11141c 100%);
  border: 1px solid rgba(255, 102, 0, 0.45);
  border-radius: 8px;
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.9), 0 0 36px rgba(255, 102, 0, 0.18);
  display: flex;
  flex-direction: column;
  color: #e2e8f0;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  overflow: hidden;
}

/* Header */
.pm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: linear-gradient(90deg, #242a38 0%, #171b24 100%);
  border-bottom: 1px solid #2d3446;
}

.pm-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #f1f5f9;
}

.pm-logo-icon {
  font-size: 16px;
  color: #ff6600;
  filter: drop-shadow(0 0 6px rgba(255, 102, 0, 0.6));
}

.pm-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pm-btn-icon {
  background: #1a1e29;
  border: 1px solid #2d3446;
  color: #94a3b8;
  width: 26px;
  height: 24px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.pm-btn-icon:hover {
  background: #2b3346;
  color: #ffffff;
}

.pm-btn-close:hover {
  background: #dc2626 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
}

/* Scan Bar */
.pm-scan-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: #151821;
  border-bottom: 1px solid #262c3a;
  flex-wrap: wrap;
  gap: 12px;
}

.pm-scan-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.pm-scan-btn {
  background: linear-gradient(180deg, #ff7a18 0%, #e65500 100%);
  border: 1px solid #ff944d;
  color: #ffffff;
  font-weight: 700;
  font-size: 11px;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(230, 85, 0, 0.4);
  transition: all 0.15s ease;
}

.pm-scan-btn:hover {
  background: linear-gradient(180deg, #ff8c33 0%, #ff6600 100%);
  box-shadow: 0 0 12px rgba(255, 102, 0, 0.6);
  transform: translateY(-1px);
}

.pm-scan-btn.scanning {
  background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
  border-color: #60a5fa;
  animation: pulseScan 1.2s infinite ease-in-out;
}

@keyframes pulseScan {
  0% { box-shadow: 0 0 4px rgba(59, 130, 246, 0.4); }
  50% { box-shadow: 0 0 16px rgba(59, 130, 246, 0.8); }
  100% { box-shadow: 0 0 4px rgba(59, 130, 246, 0.4); }
}

.pm-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #cbd5e1;
  cursor: pointer;
}

.pm-checkbox-label input[type="checkbox"] {
  accent-color: #ff6600;
  cursor: pointer;
}

.pm-stats-summary {
  font-size: 11px;
  color: #94a3b8;
  font-family: 'Consolas', monospace;
}

/* Progress Bar */
.pm-progress-container {
  padding: 6px 16px;
  background: #11141c;
  border-bottom: 1px solid #ff6600;
}

.pm-progress-bar {
  width: 100%;
  height: 6px;
  background: #1e2433;
  border-radius: 3px;
  overflow: hidden;
}

.pm-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff6600, #ffaa00);
  transition: width 0.08s ease;
  box-shadow: 0 0 8px rgba(255, 102, 0, 0.8);
}

.pm-progress-text {
  font-size: 10px;
  font-family: 'Consolas', monospace;
  color: #ffaa33;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Body Layout */
.pm-body {
  display: flex;
  flex: 1;
  min-height: 0;
  background: #0f1218;
}

/* Left Panel */
.pm-left-panel {
  width: 250px;
  min-width: 230px;
  background: #141720;
  border-right: 1px solid #232938;
  display: flex;
  flex-direction: column;
}

.pm-panel-header {
  padding: 8px 12px;
  background: #1a1e29;
  border-bottom: 1px solid #262c3b;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: #94a3b8;
}

.pm-paths-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}

.pm-path-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: 4px;
  margin-bottom: 4px;
  background: #191d27;
  border: 1px solid #222736;
  font-size: 10px;
  color: #cbd5e1;
  gap: 6px;
}

.pm-path-item:hover {
  background: #202634;
  border-color: #353e54;
}

.pm-path-info {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.pm-path-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: rtl;
  text-align: left;
}

.pm-path-badge {
  background: #0d1017;
  border: 1px solid #2a3142;
  color: #ff9933;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  flex-shrink: 0;
}

.pm-paths-actions {
  padding: 8px;
  background: #171b24;
  border-top: 1px solid #242a38;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pm-path-btn {
  background: #1f2533;
  border: 1px solid #313a4d;
  color: #e2e8f0;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}

.pm-path-btn:hover {
  background: #2a3346;
  border-color: #ff6600;
  color: #ffffff;
}

/* Right Panel */
.pm-right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #0f1218;
}

.pm-filter-bar {
  padding: 8px 12px;
  background: #151821;
  border-bottom: 1px solid #262c3b;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.pm-filter-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.pm-tab {
  background: #1a1e29;
  border: 1px solid #262d3d;
  color: #94a3b8;
  padding: 4px 10px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pm-tab:hover {
  background: #232938;
  color: #ffffff;
}

.pm-tab.active {
  background: #ff6600;
  border-color: #ff8833;
  color: #ffffff;
  box-shadow: 0 0 8px rgba(255, 102, 0, 0.4);
}

.pm-search-box {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 220px;
}

.pm-search-icon {
  position: absolute;
  left: 8px;
  font-size: 11px;
  color: #64748b;
}

.pm-search-box input {
  width: 100%;
  background: #0a0c10;
  border: 1px solid #293042;
  border-radius: 4px;
  padding: 5px 26px 5px 26px;
  color: #f1f5f9;
  font-size: 11px;
  outline: none;
}

.pm-search-box input:focus {
  border-color: #ff6600;
  box-shadow: 0 0 6px rgba(255, 102, 0, 0.3);
}

.pm-search-clear {
  position: absolute;
  right: 6px;
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 11px;
  cursor: pointer;
}

/* Table */
.pm-table-wrapper {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.pm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  text-align: left;
}

.pm-table thead th {
  position: sticky;
  top: 0;
  background: #181d28;
  color: #94a3b8;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.5px;
  padding: 8px 10px;
  border-bottom: 2px solid #293144;
  z-index: 10;
}

.pm-table tbody tr {
  border-bottom: 1px solid #1c212e;
  transition: background 0.1s ease;
  cursor: pointer;
}

.pm-table tbody tr:hover {
  background: #1b212e;
}

.pm-table tbody tr.selected {
  background: #252d40;
  border-left: 3px solid #ff6600;
}

.pm-table td {
  padding: 6px 10px;
  vertical-align: middle;
}

/* Table Cells */
.th-star, .td-star {
  width: 32px;
  text-align: center;
}

.pm-star-btn {
  background: none;
  border: none;
  font-size: 15px;
  color: #475569;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: color 0.15s ease;
}

.pm-star-btn:hover {
  color: #ffbb00;
}

.pm-star-btn.active {
  color: #ffaa00;
  filter: drop-shadow(0 0 4px rgba(255, 170, 0, 0.6));
}

.pm-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pm-item-icon {
  font-size: 13px;
  line-height: 1;
}

.pm-item-title {
  font-weight: 600;
  color: #f1f5f9;
}

.pm-type-tag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
}

.pm-type-tag.effect {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.4);
}

.pm-type-tag.generator {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.pm-cat-tag {
  color: #94a3b8;
  font-size: 10px;
}

.pm-fmt-tag {
  background: #161b24;
  border: 1px solid #2b3344;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 600;
  color: #cbd5e1;
}

.pm-fmt-tag.vst3 {
  border-color: #3b82f6;
  color: #93c5fd;
}

.pm-fmt-tag.flnative {
  border-color: #ff6600;
  color: #ffaa66;
}

.pm-status-tag {
  font-size: 10px;
  font-weight: 600;
}

.pm-status-tag.verified {
  color: #10b981;
}

.pm-status-tag.new {
  color: #3b82f6;
}

.pm-use-btn {
  background: #1f2533;
  border: 1px solid #333d54;
  color: #e2e8f0;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pm-use-btn:hover {
  background: #ff6600;
  border-color: #ff8833;
  color: #ffffff;
}

/* Footer */
.pm-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #161923;
  border-top: 1px solid #262c3a;
  gap: 16px;
}

.pm-footer-info {
  font-size: 11px;
  color: #94a3b8;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pm-footer-info strong {
  color: #ffffff;
}

.pm-footer-buttons {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.pm-footer-btn-primary {
  background: linear-gradient(180deg, #ff7a18 0%, #e65500 100%);
  border: 1px solid #ff944d;
  color: #ffffff;
  font-weight: 700;
  font-size: 11px;
  padding: 6px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pm-footer-btn-primary:hover {
  background: linear-gradient(180deg, #ff8c33 0%, #ff6600 100%);
  box-shadow: 0 0 10px rgba(255, 102, 0, 0.6);
}

.pm-footer-btn {
  background: #222736;
  border: 1px solid #333c52;
  color: #e2e8f0;
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pm-footer-btn:hover {
  background: #2c3447;
  color: #ffffff;
}


/* === File: css/studio-dialog.css === */
/**
 * FireWave DAW - Studio Custom Popups & Dialogs Design System
 * Matches the Dark Studio Hardware Chassis & FL Studio DAW Aesthetics
 */

/* 1. Backdrop */
.studio-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147483647 !important;
  background: rgba(6, 8, 14, 0.78);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: studioDialogFadeIn 0.14s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

@keyframes studioDialogFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 2. Dialog Modal Chassis */
.studio-dialog-modal {
  background: #141822;
  border: 1px solid #2b3345;
  border-radius: 8px;
  box-shadow: 
    0 24px 64px rgba(0, 0, 0, 0.88),
    0 4px 16px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #e2e8f0;
  font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
  animation: studioDialogZoomIn 0.16s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  user-select: none;
}

.studio-dialog-modal.wide {
  max-width: 580px;
}

.studio-dialog-modal.error {
  border-color: #ef4444;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.9), 0 0 24px rgba(239, 68, 68, 0.25);
}
.studio-dialog-modal.error .studio-dialog-header {
  border-bottom-color: rgba(239, 68, 68, 0.3);
}
.studio-dialog-modal.error .studio-dialog-title-box {
  color: #ef4444;
}

.studio-dialog-modal.warning {
  border-color: #f59e0b;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.9), 0 0 24px rgba(245, 158, 11, 0.22);
}
.studio-dialog-modal.warning .studio-dialog-header {
  border-bottom-color: rgba(245, 158, 11, 0.3);
}
.studio-dialog-modal.warning .studio-dialog-title-box {
  color: #f59e0b;
}

.studio-dialog-modal.success {
  border-color: #10b981;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.9), 0 0 24px rgba(16, 185, 129, 0.22);
}
.studio-dialog-modal.success .studio-dialog-header {
  border-bottom-color: rgba(16, 185, 129, 0.3);
}
.studio-dialog-modal.success .studio-dialog-title-box {
  color: #10b981;
}

.studio-dialog-modal.danger {
  border-color: #ef4444;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.9), 0 0 24px rgba(239, 68, 68, 0.25);
}
.studio-dialog-modal.danger .studio-dialog-title-box {
  color: #ef4444;
}

@keyframes studioDialogZoomIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* 3. Header */
.studio-dialog-header {
  height: 38px;
  background: linear-gradient(180deg, #1e2433 0%, #171b26 100%);
  border-bottom: 1px solid #273042;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  flex-shrink: 0;
}

.studio-dialog-title-box {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #f28c28;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.studio-dialog-icon {
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.studio-dialog-close-btn {
  width: 22px;
  height: 22px;
  background: transparent;
  border: 1px solid #3b4559;
  border-radius: 4px;
  color: #94a3b8;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all 0.12s ease;
  padding: 0;
}

.studio-dialog-close-btn:hover {
  background: #ef4444;
  border-color: #ef4444;
  color: #ffffff;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}

/* 4. Body */
.studio-dialog-body {
  padding: 20px 22px;
  font-size: 13px;
  line-height: 1.55;
  color: #cbd5e1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 65vh;
  overflow-y: auto;
}

.studio-dialog-body::-webkit-scrollbar {
  width: 6px;
}
.studio-dialog-body::-webkit-scrollbar-track {
  background: #11141c;
}
.studio-dialog-body::-webkit-scrollbar-thumb {
  background: #2b3345;
  border-radius: 3px;
}

.studio-dialog-message {
  white-space: pre-wrap;
  word-break: break-word;
}

.studio-dialog-message.large-text {
  font-size: 13.5px;
  color: #f1f5f9;
}

/* 5. Inputs */
.studio-dialog-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.studio-dialog-input-label {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.studio-dialog-input {
  width: 100%;
  height: 38px;
  background: #0d1017;
  border: 1px solid #334055;
  border-radius: 5px;
  color: #ffffff;
  font-family: inherit;
  font-size: 13.5px;
  padding: 0 12px;
  box-sizing: border-box;
  transition: all 0.12s ease;
}

.studio-dialog-input:focus {
  outline: none;
  border-color: #f28c28;
  background: #10141d;
  box-shadow: 0 0 0 2px rgba(242, 140, 40, 0.25);
}

.studio-dialog-input::placeholder {
  color: #556277;
}

/* 6. Footer & Actions */
.studio-dialog-footer {
  padding: 12px 18px;
  background: #10131b;
  border-top: 1px solid #222938;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

.studio-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 16px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.12s ease;
  user-select: none;
  border: 1px solid transparent;
}

.studio-btn:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 1px;
}

.studio-btn-cancel {
  background: #1e2433;
  border-color: #384257;
  color: #94a3b8;
}

.studio-btn-cancel:hover {
  background: #273042;
  border-color: #4b5872;
  color: #ffffff;
}

.studio-btn-primary {
  background: linear-gradient(180deg, #f28c28 0%, #d97114 100%);
  border-color: #c9650e;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(242, 140, 40, 0.35);
}

.studio-btn-primary:hover {
  background: linear-gradient(180deg, #ffa043 0%, #e07616 100%);
  box-shadow: 0 3px 12px rgba(242, 140, 40, 0.5);
  transform: translateY(-1px);
}

.studio-btn-primary:active {
  transform: translateY(0);
}

.studio-btn-danger {
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
  border-color: #b91c1c;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35);
}

.studio-btn-danger:hover {
  background: linear-gradient(180deg, #f87171 0%, #ef4444 100%);
  box-shadow: 0 3px 12px rgba(239, 68, 68, 0.5);
  transform: translateY(-1px);
}

.studio-btn-danger:active {
  transform: translateY(0);
}

/* 7. Toast HUD Notifications */
.studio-toast-container {
  position: fixed;
  bottom: 34px;
  right: 20px;
  z-index: 999999999 !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.studio-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #141824;
  border: 1px solid #334155;
  border-left: 3px solid #f28c28;
  border-radius: 6px;
  padding: 10px 16px;
  color: #f1f5f9;
  font-size: 12.5px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.75), 0 0 1px rgba(255, 255, 255, 0.2);
  animation: studioToastSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 0.2s ease, transform 0.2s ease;
  max-width: 380px;
  cursor: pointer;
}

.studio-toast.success {
  border-left-color: #10b981;
}

.studio-toast.warning {
  border-left-color: #f59e0b;
}

.studio-toast.error {
  border-left-color: #ef4444;
}

.studio-toast.removing {
  opacity: 0;
  transform: translateX(30px);
}

@keyframes studioToastSlideIn {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.studio-toast-icon {
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}

.studio-toast-text {
  flex: 1;
  line-height: 1.4;
}

/* 8. High-Tech Shortcuts Dialog Styles */
.studio-shortcuts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 4px;
}

.studio-shortcut-group {
  background: #0f121a;
  border: 1px solid #232a3a;
  border-radius: 6px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.studio-shortcut-group-title {
  font-size: 11px;
  font-weight: 700;
  color: #f28c28;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-bottom: 1px solid #1c2230;
  padding-bottom: 6px;
}

.studio-shortcut-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: #cbd5e1;
}

.studio-kbd {
  display: inline-flex;
  align-items: center;
  background: #1b202c;
  border: 1px solid #364156;
  border-bottom: 2px solid #262e3d;
  border-radius: 4px;
  color: #38bdf8;
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 6px;
  line-height: 1.2;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* 9. High-Tech About Dialog Styles */
.studio-about-chassis {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 8px 0;
}

.studio-about-logo {
  width: 52px;
  height: 52px;
  background: radial-gradient(circle, rgba(242, 140, 40, 0.25) 0%, rgba(20, 24, 34, 0) 70%);
  border: 1px solid #f28c28;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 0 20px rgba(242, 140, 40, 0.3);
}

.studio-about-title {
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.studio-about-version {
  display: inline-block;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
  font-family: var(--font-mono, monospace);
}

.studio-about-desc {
  font-size: 12.5px;
  color: #94a3b8;
  line-height: 1.5;
  max-width: 360px;
}

.studio-about-specs {
  width: 100%;
  background: #0f121a;
  border: 1px solid #232a3a;
  border-radius: 6px;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
  text-align: left;
}

.studio-about-spec-item {
  display: flex;
  flex-direction: column;
}

.studio-about-spec-label {
  font-size: 10px;
  color: #64748b;
  text-transform: uppercase;
  font-weight: 700;
}

.studio-about-spec-val {
  font-size: 11.5px;
  color: #e2e8f0;
  font-weight: 600;
  font-family: var(--font-mono, monospace);
}