refactor(styles): split theme.css into per-theme files (#656)

theme.css (16138 LOC) → 122 per-section files in src/styles/themes/ +
an index.css that imports them in original cascade order.

Concatenating all files via index.css reproduces the original byte stream
(+1 trailing newline, cosmetic).

Each top-level section header in theme.css (matching /^\/\* ─{3,}/)
becomes its own file, slugged from the header text (or the [data-theme]
selector found in the body when the header was a banner). Pure-separator
headers fold into the previous section so they don't create empty files.

Generated via /tmp/split-theme-css.mjs.

src/main.tsx

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom/client';
 import App from './App';
 import { runPreReactBootstrap } from './app/bootstrap';
 import './i18n';
-import './styles/theme.css';
+import './styles/themes/index.css';
 import './styles/layout.css';
 import './styles/components.css';
 import './styles/tracks.css';

src/styles/themes/1984-cyberpunk-juanmnl-vs-1984-mint-green-variant.css

@@ -0,0 +1,56 @@
+/* ─── 1984 Cyberpunk (juanmnl/vs-1984 — mint-green variant) ─── */
+[data-theme='vs-1984-cyberpunk'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23f5f5f5%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  --ctp-crust:    #0e0f15;
+  --ctp-mantle:   #15171d;   /* sideBar.background */
+  --ctp-base:     #1C1E27;   /* editor.background */
+  --ctp-surface0: #232631;
+  --ctp-surface1: #2c2f3c;
+  --ctp-surface2: #383b4a;
+  --ctp-overlay0: #525863;
+  --ctp-overlay1: #78A8D6;   /* language variable */
+  --ctp-overlay2: #b8bfd1;
+  --ctp-text:     #f5f5f5;
+  --ctp-subtext1: #d4d8e3;
+  --ctp-subtext0: #78A8D6;
+  --ctp-mauve:    #85EEA7;
+  --ctp-lavender: #78A8D6;
+  --ctp-pink:     #FF16B0;
+  --ctp-flamingo: #7ADAD1;
+  --ctp-rosewater:#7ADAD1;
+  --ctp-blue:     #78A8D6;
+  --ctp-sapphire: #7ADAD1;
+  --ctp-sky:      #7ADAD1;
+  --ctp-teal:     #7ADAD1;
+  --ctp-green:    #85EEA7;
+  --ctp-yellow:   #7ADAD1;
+  --ctp-peach:    #85EEA7;
+  --ctp-maroon:   #FF16B0;
+  --ctp-red:      #FF16B0;
+
+  --bg-app:           #1C1E27;
+  --bg-sidebar:       #15171d;
+  --bg-card:          #232631;
+  --bg-hover:         #2c2f3c;
+  --bg-player:        #15171d;
+  --bg-glass:         rgba(28, 30, 39, 0.82);
+  --accent:           #85EEA7;       /* signature mint-green */
+  --accent-dim:       rgba(133, 238, 167, 0.16);
+  --accent-glow:      rgba(133, 238, 167, 0.32);
+  --text-primary:     #f5f5f5;
+  --text-secondary:   #78A8D6;
+  --text-muted:       #525863;
+  --border:           #2c2f3c;
+  --border-subtle:    #232631;
+  --border-dropdown:  #383b4a;
+  --shadow-dropdown:  rgba(0, 0, 0, 0.7);
+  --positive:         #85EEA7;
+  --warning:          #7ADAD1;
+  --danger:           #FF16B0;
+  --waveform-played:    #85EEA7;
+  --waveform-buffered:  #383b4a;
+  --waveform-unplayed:  #232631;
+}
+

src/styles/themes/1984-juanmnl-vs-1984-default-dark-deep-blue-cyberpunk.css

@@ -0,0 +1,56 @@
+/* ─── 1984 (juanmnl/vs-1984 — default dark, deep-blue cyberpunk) ─── */
+[data-theme='vs-1984'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23f1f1f1%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  --ctp-crust:    #050620;
+  --ctp-mantle:   #070825;   /* sideBar.background */
+  --ctp-base:     #0d0f31;   /* editor.background */
+  --ctp-surface0: #161a4a;   /* card elevation */
+  --ctp-surface1: #1f2560;
+  --ctp-surface2: #2a3275;
+  --ctp-overlay0: #3B4D66;   /* lineNumber */
+  --ctp-overlay1: #525863;   /* comment */
+  --ctp-overlay2: #96A1FF;   /* variable */
+  --ctp-text:     #f1f1f1;
+  --ctp-subtext1: #d6d8ff;
+  --ctp-subtext0: #96A1FF;
+  --ctp-mauve:    #FF16B0;   /* keyword pink */
+  --ctp-lavender: #96A1FF;   /* variable */
+  --ctp-pink:     #FF16B0;
+  --ctp-flamingo: #DF81FC;   /* string */
+  --ctp-rosewater:#DF81FC;
+  --ctp-blue:     #46BDFF;   /* focusBorder / accent */
+  --ctp-sapphire: #46BDFF;
+  --ctp-sky:      #46BDFF;
+  --ctp-teal:     #46BDFF;
+  --ctp-green:    #B3F361;   /* cursor green */
+  --ctp-yellow:   #DF81FC;
+  --ctp-peach:    #FF16B0;
+  --ctp-maroon:   #FF16B0;
+  --ctp-red:      #FF16B0;
+
+  --bg-app:           #0d0f31;
+  --bg-sidebar:       #070825;
+  --bg-card:          #161a4a;
+  --bg-hover:         #1f2560;
+  --bg-player:        #070825;
+  --bg-glass:         rgba(13, 15, 49, 0.82);
+  --accent:           #46BDFF;       /* signature 1984 cyan-blue */
+  --accent-dim:       rgba(70, 189, 255, 0.16);
+  --accent-glow:      rgba(70, 189, 255, 0.32);
+  --text-primary:     #f1f1f1;
+  --text-secondary:   #96A1FF;
+  --text-muted:       #525863;       /* comment */
+  --border:           #1f2560;
+  --border-subtle:    #161a4a;
+  --border-dropdown:  #2a3275;
+  --shadow-dropdown:  rgba(0, 0, 0, 0.7);
+  --positive:         #B3F361;       /* cursor green */
+  --warning:          #DF81FC;       /* string magenta */
+  --danger:           #FF16B0;       /* keyword pink */
+  --waveform-played:    #46BDFF;
+  --waveform-buffered:  #3B4D66;
+  --waveform-unplayed:  #161a4a;
+}
+

src/styles/themes/1984-light-juanmnl-vs-1984-bluish-white.css

@@ -0,0 +1,56 @@
+/* ─── 1984 Light (juanmnl/vs-1984 — bluish-white) ─── */
+[data-theme='vs-1984-light'] {
+  color-scheme: light;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2319152c%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  --ctp-crust:    #d4d6e7;
+  --ctp-mantle:   #dfe0f0;   /* sideBar.background */
+  --ctp-base:     #e4e5f5;   /* editor.background */
+  --ctp-surface0: #d4d6e7;
+  --ctp-surface1: #cccdde;
+  --ctp-surface2: #b9bad0;
+  --ctp-overlay0: #9793b9;   /* comment */
+  --ctp-overlay1: #7f8a99;   /* lineNumber */
+  --ctp-overlay2: #585d74;
+  --ctp-text:     #19152c;
+  --ctp-subtext1: #3f374b;
+  --ctp-subtext0: #585d74;   /* sideBar.foreground */
+  --ctp-mauve:    #a626a4;
+  --ctp-lavender: #4d5eff;
+  --ctp-pink:     #FF16B0;
+  --ctp-flamingo: #c300ff;
+  --ctp-rosewater:#1930fd;
+  --ctp-blue:     #4d5eff;
+  --ctp-sapphire: #46BDFF;
+  --ctp-sky:      #46BDFF;
+  --ctp-teal:     #1930fd;
+  --ctp-green:    #1d7848;
+  --ctp-yellow:   #b88600;
+  --ctp-peach:    #FF16B0;
+  --ctp-maroon:   #FF16B0;
+  --ctp-red:      #FF16B0;
+
+  --bg-app:           #e4e5f5;
+  --bg-sidebar:       #dfe0f0;
+  --bg-card:          #d4d6e7;
+  --bg-hover:         #cccdde;
+  --bg-player:        #dfe0f0;
+  --bg-glass:         rgba(228, 229, 245, 0.92);
+  --accent:           #4d5eff;       /* variable blue — readable on bluish-white */
+  --accent-dim:       rgba(77, 94, 255, 0.12);
+  --accent-glow:      rgba(77, 94, 255, 0.24);
+  --text-primary:     #19152c;
+  --text-secondary:   #585d74;       /* sideBar.foreground */
+  --text-muted:       #9793b9;       /* comment */
+  --border:           #cccdde;
+  --border-subtle:    #d4d6e7;
+  --border-dropdown:  #b9bad0;
+  --shadow-dropdown:  rgba(25, 21, 44, 0.18);
+  --positive:         #1d7848;
+  --warning:          #b88600;
+  --danger:           #FF16B0;       /* signature 1984 hot-pink button */
+  --waveform-played:    #4d5eff;
+  --waveform-buffered:  #9793b9;
+  --waveform-unplayed:  #d4d6e7;
+}
+

src/styles/themes/1984-orwell-juanmnl-vs-1984-sepia-dystopian-variant.css

@@ -0,0 +1,56 @@
+/* ─── 1984 Orwell (juanmnl/vs-1984 — sepia / dystopian variant) ─── */
+[data-theme='vs-1984-orwell'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23f1f1f1%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  --ctp-crust:    #1f1c18;
+  --ctp-mantle:   #292521;   /* sideBar.background */
+  --ctp-base:     #2e2923;   /* editor.background */
+  --ctp-surface0: #3a342c;
+  --ctp-surface1: #463e34;
+  --ctp-surface2: #574d40;
+  --ctp-overlay0: #7a6a52;
+  --ctp-overlay1: #b39773;
+  --ctp-overlay2: #d8c39c;
+  --ctp-text:     #f1f1f1;
+  --ctp-subtext1: #fcd395;
+  --ctp-subtext0: #fcbe95;
+  --ctp-mauve:    #fcd395;
+  --ctp-lavender: #fcbe95;
+  --ctp-pink:     #e74946;
+  --ctp-flamingo: #e74946;
+  --ctp-rosewater:#fcbe95;
+  --ctp-blue:     #fcd395;
+  --ctp-sapphire: #fcbe95;
+  --ctp-sky:      #F7D88B;
+  --ctp-teal:     #fcd395;
+  --ctp-green:    #fcd395;
+  --ctp-yellow:   #F7D88B;
+  --ctp-peach:    #fcbe95;
+  --ctp-maroon:   #e74946;
+  --ctp-red:      #e74946;
+
+  --bg-app:           #2e2923;
+  --bg-sidebar:       #292521;
+  --bg-card:          #3a342c;
+  --bg-hover:         #463e34;
+  --bg-player:        #292521;
+  --bg-glass:         rgba(46, 41, 35, 0.82);
+  --accent:           #fcd395;       /* cream-gold */
+  --accent-dim:       rgba(252, 211, 149, 0.16);
+  --accent-glow:      rgba(252, 211, 149, 0.32);
+  --text-primary:     #f1f1f1;
+  --text-secondary:   #fcd395;
+  --text-muted:       #b39773;
+  --border:           #463e34;
+  --border-subtle:    #3a342c;
+  --border-dropdown:  #574d40;
+  --shadow-dropdown:  rgba(0, 0, 0, 0.7);
+  --positive:         #F7D88B;
+  --warning:          #fcbe95;
+  --danger:           #e74946;
+  --waveform-played:    #fcd395;
+  --waveform-buffered:  #7a6a52;
+  --waveform-unplayed:  #3a342c;
+}
+

src/styles/themes/_intro.css

@@ -0,0 +1,33 @@
+/* ─────────────────────────────────────────────────────────────
+   Psysonic – Design System
+   Catppuccin Mocha Color Palette + Inter Typography
+   ───────────────────────────────────────────────────────────── */
+
+@import '@fontsource-variable/inter';
+@import '@fontsource-variable/inter/wght-italic.css';
+@import '@fontsource-variable/space-grotesk';
+@import '@fontsource-variable/outfit';
+@import '@fontsource-variable/dm-sans';
+@import '@fontsource-variable/dm-sans/wght-italic.css';
+@import '@fontsource-variable/nunito';
+@import '@fontsource-variable/nunito/wght-italic.css';
+@import '@fontsource-variable/rubik';
+@import '@fontsource-variable/rubik/wght-italic.css';
+@import '@fontsource-variable/figtree';
+@import '@fontsource-variable/figtree/wght-italic.css';
+@import '@fontsource-variable/manrope';
+@import '@fontsource-variable/plus-jakarta-sans';
+@import '@fontsource-variable/plus-jakarta-sans/wght-italic.css';
+@import '@fontsource-variable/lexend';
+@import '@fontsource-variable/geist';
+@import '@fontsource-variable/jetbrains-mono';
+@import '@fontsource-variable/jetbrains-mono/wght-italic.css';
+@import '@fontsource-variable/golos-text';
+@import '@fontsource-variable/unbounded';
+/* OpenDyslexic — non-variable font with discrete weights/styles. Latin only,
+   no Cyrillic / no CJK. Selected via Settings as a dyslexia-friendly option. */
+@import '@fontsource/opendyslexic/400.css';
+@import '@fontsource/opendyslexic/700.css';
+@import '@fontsource/opendyslexic/400-italic.css';
+@import '@fontsource/opendyslexic/700-italic.css';
+

src/styles/themes/a-theme-of-ice-and-fire-game-of-thrones.css

@@ -0,0 +1,254 @@
+/* ─── A Theme of Ice and Fire — Game of Thrones ─── */
+/* Concept: FIRE (volcanic Dragonstone, main area) vs ICE (Castle Black, sidebar) */
+@keyframes fire-flicker {
+  0% {
+    text-shadow: 0 0 8px rgba(200, 30, 20, 0.65), 0 0 20px rgba(200, 60, 10, 0.30);
+  }
+
+  20% {
+    text-shadow: 0 0 12px rgba(220, 55, 15, 0.75), 0 0 28px rgba(210, 40, 10, 0.38);
+  }
+
+  40% {
+    text-shadow: 0 0 6px rgba(180, 20, 10, 0.55), 0 0 14px rgba(190, 30, 10, 0.22);
+  }
+
+  65% {
+    text-shadow: 0 0 14px rgba(215, 50, 12, 0.80), 0 0 32px rgba(200, 70, 15, 0.40);
+  }
+
+  85% {
+    text-shadow: 0 0 9px rgba(195, 25, 15, 0.60), 0 0 22px rgba(200, 40, 10, 0.28);
+  }
+
+  100% {
+    text-shadow: 0 0 8px rgba(200, 30, 20, 0.65), 0 0 20px rgba(200, 60, 10, 0.30);
+  }
+}
+
+[data-theme='ice-and-fire'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23c41e1e%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  /* Palette — Targaryen blood red, dragon gold, volcanic black, Wall ice */
+  --ctp-crust: #060402;
+  --ctp-mantle: #0a0806;
+  --ctp-base: #100c08;
+  --ctp-surface0: #1c1410;
+  --ctp-surface1: #281c14;
+  --ctp-surface2: #38261c;
+  --ctp-overlay0: #5a3e2e;
+  --ctp-overlay1: #7a5840;
+  --ctp-overlay2: #9a7858;
+  --ctp-text: #ecdcc8;
+  --ctp-subtext1: #d0b898;
+  --ctp-subtext0: #a89070;
+  --ctp-mauve: #c41e1e;
+  --ctp-lavender: #e03030;
+  --ctp-pink: #e03030;
+  --ctp-flamingo: #c83010;
+  --ctp-rosewater: #ecdcc8;
+  --ctp-green: #5a8a3a;
+  --ctp-teal: #5090a0;
+  /* Wall ice teal */
+  --ctp-sky: #80b8d0;
+  /* Northern sky */
+  --ctp-blue: #3a6898;
+  --ctp-sapphire: #3a6898;
+  --ctp-yellow: #c8880a;
+  /* Lannister / dragon gold */
+  --ctp-peach: #c83010;
+  --ctp-maroon: #8b0808;
+  --ctp-red: #c41e1e;
+
+  --bg-app: #100c08;
+  /* volcanic black — warm dark */
+  --bg-sidebar: #090c10;
+  /* Castle Black — cold blue-grey stone */
+  --bg-card: #1c1410;
+  --bg-hover: #281c14;
+  --bg-player: #060402;
+  /* obsidian black */
+  --bg-glass: rgba(10, 8, 6, 0.92);
+  --accent: #c41e1e;
+  /* Targaryen blood red */
+  --accent-dim: rgba(196, 30, 30, 0.14);
+  --accent-glow: rgba(196, 30, 30, 0.38);
+  --text-primary: #ecdcc8;
+  /* warm stone parchment */
+  --text-secondary: #9a7858;
+  --text-muted: #b08860;
+  --border: rgba(196, 30, 30, 0.20);
+  --border-subtle: rgba(196, 30, 30, 0.08);
+  --border-dropdown: rgba(196, 30, 30, 0.32);
+  --shadow-dropdown: rgba(0, 0, 0, 0.92);
+  --positive: #5a8a3a;
+  --warning: #c8880a;
+  --danger: #c41e1e;
+  --radius-sm: 2px;
+  --radius-md: 4px;
+  --radius-lg: 6px;
+}
+
+/* App shell — scattered torch-light: warm pools of fire at corners */
+[data-theme='ice-and-fire'] .app-shell {
+  background-image:
+    radial-gradient(ellipse at 15% 85%, rgba(200, 80, 10, 0.07) 0%, transparent 55%),
+    radial-gradient(ellipse at 85% 15%, rgba(180, 20, 10, 0.06) 0%, transparent 55%),
+    radial-gradient(ellipse at 85% 85%, rgba(200, 100, 15, 0.05) 0%, transparent 45%);
+}
+
+/* Sidebar — THE NORTH: cold Castle Black stone, masonry pattern */
+[data-theme='ice-and-fire'] .sidebar {
+  background: #090c10;
+  border-right: 1px solid rgba(196, 30, 30, 0.20);
+  background-image:
+    repeating-linear-gradient(0deg,
+      rgba(80, 110, 140, 0.04) 0px, transparent 1px, transparent 56px,
+      rgba(80, 110, 140, 0.04) 57px),
+    repeating-linear-gradient(90deg,
+      rgba(80, 110, 140, 0.025) 0px, transparent 1px, transparent 112px,
+      rgba(80, 110, 140, 0.025) 113px);
+}
+
+/* Player bar — Dragonstone forge: fire glow rising from below */
+[data-theme='ice-and-fire'] .player-bar {
+  background: #060402;
+  border-top: 2px solid #c41e1e;
+  background-image:
+    radial-gradient(ellipse at 50% 130%, rgba(200, 80, 15, 0.22) 0%, rgba(180, 20, 10, 0.12) 45%, transparent 70%);
+  box-shadow: 0 -8px 36px rgba(180, 20, 10, 0.22), 0 -1px 0 rgba(0, 0, 0, 0.9);
+}
+
+/* Track name — Targaryen red, fire flicker (irregular like real flame) */
+[data-theme='ice-and-fire'] .player-track-name {
+  color: #d42020;
+  animation: fire-flicker 5s ease-in-out infinite;
+}
+
+/* Artist name — Lannister/dragon gold */
+[data-theme='ice-and-fire'] .player-artist-name {
+  color: #c8880a;
+}
+
+/* Nav active — blood red left bar */
+[data-theme='ice-and-fire'] .nav-link.active {
+  background: linear-gradient(90deg, rgba(196, 30, 30, 0.18) 0%, transparent 100%);
+  border-left: 3px solid #c41e1e;
+  color: #d42020;
+}
+
+[data-theme='ice-and-fire'] .nav-link:hover:not(.active) {
+  background: linear-gradient(90deg, rgba(196, 30, 30, 0.08) 0%, transparent 100%);
+  border-left: 3px solid rgba(196, 30, 30, 0.32);
+}
+
+/* Content header — red-to-gold ornate rule: Fire and Blood / Hear Me Roar */
+[data-theme='ice-and-fire'] .content-header {
+  border-bottom: 1px solid rgba(196, 30, 30, 0.16);
+  position: relative;
+}
+
+[data-theme='ice-and-fire'] .content-header::after {
+  content: '';
+  position: absolute;
+  bottom: -3px;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg,
+      transparent 0%,
+      rgba(196, 30, 30, 0.70) 25%,
+      rgba(200, 136, 10, 0.90) 50%,
+      rgba(196, 30, 30, 0.70) 75%,
+      transparent 100%);
+}
+
+/* Cards — volcanic panel, fire-gold border on hover */
+[data-theme='ice-and-fire'] .album-card:hover,
+[data-theme='ice-and-fire'] .artist-card:hover {
+  box-shadow:
+    0 0 0 1px rgba(196, 30, 30, 0.50),
+    0 0 0 2px rgba(200, 136, 10, 0.14),
+    0 4px 24px rgba(180, 20, 10, 0.18);
+}
+
+/* Track / queue rows */
+[data-theme='ice-and-fire'] .track-row:hover,
+[data-theme='ice-and-fire'] .queue-item:hover {
+  box-shadow: inset 2px 0 0 #c41e1e;
+  background: rgba(196, 30, 30, 0.07);
+}
+
+/* Primary play button — Targaryen red gradient */
+[data-theme='ice-and-fire'] .player-btn-primary {
+  background: linear-gradient(180deg, #e03030 0%, #c41e1e 50%, #9c1010 100%);
+  color: #ecdcc8;
+  box-shadow: 0 0 16px rgba(196, 30, 30, 0.48);
+  border: 1px solid #880808;
+}
+
+[data-theme='ice-and-fire'] .player-btn-primary:hover {
+  background: linear-gradient(180deg, #f04040 0%, #d42828 50%, #ac1818 100%);
+  box-shadow: 0 0 26px rgba(196, 30, 30, 0.70);
+}
+
+/* btn-primary */
+[data-theme='ice-and-fire'] .btn-primary {
+  background: linear-gradient(180deg, #e03030 0%, #c41e1e 50%, #9c1010 100%);
+  color: #ecdcc8;
+  border: 1px solid #880808;
+}
+
+[data-theme='ice-and-fire'] .btn-primary:hover {
+  background: linear-gradient(180deg, #f04040 0%, #d42828 50%, #ac1818 100%);
+}
+
+/* Hero play button */
+[data-theme='ice-and-fire'] .hero-play-btn {
+  background: linear-gradient(180deg, #e03030 0%, #c41e1e 50%, #9c1010 100%);
+  color: #ecdcc8;
+  border: 1px solid #880808;
+  box-shadow: 0 2px 16px rgba(196, 30, 30, 0.48);
+  transition: filter var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
+}
+
+[data-theme='ice-and-fire'] .hero-play-btn:hover {
+  background: linear-gradient(180deg, #f04040 0%, #d42828 50%, #ac1818 100%);
+  box-shadow: 0 4px 26px rgba(196, 30, 30, 0.70);
+  transform: scale(1.02);
+}
+
+/* Album card overlay button */
+[data-theme='ice-and-fire'] .album-card-details-btn {
+  background: linear-gradient(180deg, #e03030 0%, #c41e1e 50%, #9c1010 100%);
+  color: #ecdcc8;
+  border: 1px solid #880808;
+  box-shadow: 0 2px 12px rgba(196, 30, 30, 0.45);
+}
+
+/* Scrollbar — obsidian dark, blood-red thumb transitioning to gold */
+[data-theme='ice-and-fire'] ::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+[data-theme='ice-and-fire'] ::-webkit-scrollbar-track {
+  background: #090c10;
+}
+
+[data-theme='ice-and-fire'] ::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, #c41e1e, #883010);
+  border-radius: 3px;
+}
+
+[data-theme='ice-and-fire'] ::-webkit-scrollbar-thumb:hover {
+  background: #c8880a;
+}
+
+/* Connection indicators */
+[data-theme='ice-and-fire'] .connection-type,
+[data-theme='ice-and-fire'] .connection-server {
+  color: #9a7858;
+}
+

src/styles/themes/album-grid.css

@@ -0,0 +1,7 @@
+/* ─── Album Grid ─── */
+.album-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: var(--space-4);
+}
+

src/styles/themes/amoled-black-pure.css

@@ -0,0 +1,68 @@
+/* ─── Amoled Black Pure ─── */
+[data-theme='amoled-black-pure'] {
+  color-scheme: dark;
+
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+
+  /* Backgrounds */
+  --ctp-crust:    #000000;
+  --ctp-mantle:   #000000;
+  --ctp-base:     #000000;
+  --ctp-surface0: #050505;
+  --ctp-surface1: #0a0a0a;
+  --ctp-surface2: #121212;
+
+  /* Overlays */
+  --ctp-overlay0: #5a5a5a;
+  --ctp-overlay1: #7a7a7a;
+  --ctp-overlay2: #9a9a9a;
+
+  /* Text */
+  --ctp-text:     #ffffff;
+  --ctp-subtext1: #d6d6d6;
+  --ctp-subtext0: #a8a8a8;
+
+  /* White accent */
+  --ctp-teal:      #ffffff;
+  --ctp-sky:       #e6e6e6;
+  --ctp-sapphire:  #cfcfcf;
+  --ctp-blue:      #a8a8a8;
+  --ctp-lavender:  #ffffff;
+  --ctp-mauve:     #cfcfcf;
+  --ctp-pink:      #a8a8a8;
+  --ctp-flamingo:  #ffffff;
+  --ctp-rosewater: #cfcfcf;
+
+  /* Semantic */
+  --ctp-red:     #f87171;
+  --ctp-maroon:  #fb923c;
+  --ctp-peach:   #fb923c;
+  --ctp-yellow:  #fbbf24;
+  --ctp-green:   #4ade80;
+
+  /* UI tokens */
+  --bg-app:      #000000;
+  --bg-sidebar:  #000000;
+  --bg-card:     #050505;
+  --bg-hover:    #0a0a0a;
+  --bg-player:   #000000;
+  --bg-glass:    rgba(0, 0, 0, 0.92);
+
+  --accent:      #ffffff;
+  --accent-dim:  rgba(255, 255, 255, 0.12);
+  --accent-glow: rgba(255, 255, 255, 0.18);
+
+  --text-primary:   #ffffff;
+  --text-secondary: #bdbdbd;
+  --text-muted:     #7a7a7a;
+
+  --border:          #121212;
+  --border-subtle:   #0a0a0a;
+  --border-dropdown: #1f1f1f;
+  --shadow-dropdown: rgba(0, 0, 0, 0.98);
+
+  --positive: #4ade80;
+  --warning:  #fbbf24;
+  --danger:   #f87171;
+}
+

src/styles/themes/animations.css

@@ -0,0 +1,59 @@
+/* ─── Animations ─── */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateX(-12px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes pulse {
+
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-fade-in {
+  animation: fadeIn var(--transition-slow) both;
+}
+
+.animate-slide-in {
+  animation: slideIn var(--transition-slow) both;
+}
+
+.animate-pulse {
+  animation: pulse 1.5s ease infinite;
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+

src/styles/themes/atom-one-dark-th3whit3wolf-one-nvim-dark-variant.css

@@ -0,0 +1,56 @@
+/* ─── Atom One Dark (Th3Whit3Wolf/one-nvim — dark variant) ─── */
+[data-theme='one-dark'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23abb2bf%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  --ctp-crust:    #181a1f;   /* vertsplit */
+  --ctp-mantle:   #21252b;   /* sidebar tone (Atom IDE convention) */
+  --ctp-base:     #282c34;   /* syntax_bg */
+  --ctp-surface0: #2c323c;   /* syntax_cursor */
+  --ctp-surface1: #333841;   /* pmenu */
+  --ctp-surface2: #3e4452;   /* visual_grey */
+  --ctp-overlay0: #4b5263;   /* mono_4 */
+  --ctp-overlay1: #5c6370;   /* mono_3 */
+  --ctp-overlay2: #828997;   /* mono_2 */
+  --ctp-text:     #abb2bf;   /* mono_1 */
+  --ctp-subtext1: #828997;
+  --ctp-subtext0: #636d83;   /* syntax_gutter */
+  --ctp-mauve:    #c678dd;   /* hue_3 */
+  --ctp-lavender: #528bff;   /* syntax_accent */
+  --ctp-pink:     #d291e4;
+  --ctp-flamingo: #e06c75;   /* hue_5 */
+  --ctp-rosewater:#d19a66;   /* hue_6 */
+  --ctp-blue:     #61afef;   /* hue_2 */
+  --ctp-sapphire: #56b6c2;   /* hue_1 */
+  --ctp-sky:      #56b6c2;
+  --ctp-teal:     #56b6c2;
+  --ctp-green:    #98c379;   /* hue_4 */
+  --ctp-yellow:   #e5c07b;   /* hue_6_2 */
+  --ctp-peach:    #d19a66;
+  --ctp-maroon:   #be5046;   /* hue_5_2 */
+  --ctp-red:      #e06c75;
+
+  --bg-app:           #282c34;
+  --bg-sidebar:       #21252b;
+  --bg-card:          #2c323c;
+  --bg-hover:         #3e4452;
+  --bg-player:        #21252b;
+  --bg-glass:         rgba(40, 44, 52, 0.78);
+  --accent:           #61afef;       /* hue_2 — signature One Dark blue */
+  --accent-dim:       rgba(97, 175, 239, 0.16);
+  --accent-glow:      rgba(97, 175, 239, 0.32);
+  --text-primary:     #abb2bf;       /* mono_1 */
+  --text-secondary:   #828997;       /* mono_2 */
+  --text-muted:       #5c6370;       /* mono_3 */
+  --border:           #3e4452;
+  --border-subtle:    #2c323c;
+  --border-dropdown:  #4b5263;
+  --shadow-dropdown:  rgba(0, 0, 0, 0.6);
+  --positive:         #98c379;       /* hue_4 */
+  --warning:          #e5c07b;       /* hue_6_2 */
+  --danger:           #e06c75;       /* hue_5 */
+  --waveform-played:    #61afef;
+  --waveform-buffered:  #4b5263;
+  --waveform-unplayed:  #2c323c;
+}
+

src/styles/themes/atom-one-light-th3whit3wolf-one-nvim-light-variant.css

@@ -0,0 +1,56 @@
+/* ─── Atom One Light (Th3Whit3Wolf/one-nvim — light variant) ─── */
+[data-theme='one-light'] {
+  color-scheme: light;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23383A42%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  --ctp-crust:    #e7e9e1;   /* vertsplit */
+  --ctp-mantle:   #eaeaeb;
+  --ctp-base:     #fafafa;   /* syntax_bg */
+  --ctp-surface0: #ececed;
+  --ctp-surface1: #dfdfdf;   /* pmenu */
+  --ctp-surface2: #d3d3d3;   /* special_grey */
+  --ctp-overlay0: #c2c2c3;   /* mono_4 */
+  --ctp-overlay1: #a0a1a7;   /* mono_3 */
+  --ctp-overlay2: #696c77;   /* mono_2 */
+  --ctp-text:     #383A42;   /* mono_1 */
+  --ctp-subtext1: #4f525e;   /* term_8 */
+  --ctp-subtext0: #696c77;
+  --ctp-mauve:    #a626a4;   /* hue_3 */
+  --ctp-lavender: #526fff;   /* syntax_accent */
+  --ctp-pink:     #d291e4;
+  --ctp-flamingo: #ca1243;   /* hue_5_2 */
+  --ctp-rosewater:#986801;   /* hue_6 */
+  --ctp-blue:     #4078f2;   /* hue_2 */
+  --ctp-sapphire: #0184bc;   /* hue_1 */
+  --ctp-sky:      #0184bc;
+  --ctp-teal:     #0184bc;
+  --ctp-green:    #50a14f;   /* hue_4 */
+  --ctp-yellow:   #c18401;   /* hue_6_2 */
+  --ctp-peach:    #986801;
+  --ctp-maroon:   #ca1243;
+  --ctp-red:      #e45649;   /* hue_5 */
+
+  --bg-app:           #fafafa;
+  --bg-sidebar:       #eaeaeb;
+  --bg-card:          #ececed;
+  --bg-hover:         #dfdfdf;
+  --bg-player:        #eaeaeb;
+  --bg-glass:         rgba(250, 250, 250, 0.92);
+  --accent:           #4078f2;       /* hue_2 — signature One Light blue */
+  --accent-dim:       rgba(64, 120, 242, 0.12);
+  --accent-glow:      rgba(64, 120, 242, 0.24);
+  --text-primary:     #383A42;       /* mono_1 */
+  --text-secondary:   #696c77;       /* mono_2 */
+  --text-muted:       #a0a1a7;       /* mono_3 */
+  --border:           #dfdfdf;
+  --border-subtle:    #ececed;
+  --border-dropdown:  #c2c2c3;
+  --shadow-dropdown:  rgba(0, 0, 0, 0.16);
+  --positive:         #50a14f;       /* hue_4 */
+  --warning:          #c18401;       /* hue_6_2 */
+  --danger:           #e45649;       /* hue_5 */
+  --waveform-played:    #4078f2;
+  --waveform-buffered:  #a0a1a7;
+  --waveform-unplayed:  #dfdfdf;
+}
+

src/styles/themes/back-to-the-future-hill-valley-85.css

@@ -0,0 +1,954 @@
+/* ─── Back to the Future — Hill Valley '85 ─── */
+[data-theme='hill-valley-85'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ff8c00%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  /* ── Palette ── */
+  --ctp-crust: #020106;
+  --ctp-mantle: #07060f;
+  --ctp-base: #0d0b18;
+  --ctp-surface0: #151220;
+  --ctp-surface1: #1e1a2c;
+  --ctp-surface2: #272338;
+  --ctp-overlay0: #3d3455;
+  --ctp-overlay1: #5a4e70;
+  --ctp-overlay2: #7a6e90;
+  --ctp-text: #ede0c8;
+  --ctp-subtext1: #c8b898;
+  --ctp-subtext0: #a09070;
+  /* BTTF palette: flame orange, DeLorean red, lightning blue, flux yellow */
+  --ctp-mauve: #ff8c00;
+  --ctp-lavender: #ffaa33;
+  --ctp-red: #ff2200;
+  --ctp-blue: #3d88ff;
+  --ctp-sapphire: #1a5ccc;
+  --ctp-sky: #66aaff;
+  --ctp-teal: #00ccff;
+  --ctp-green: #44dd00;
+  --ctp-yellow: #ffe033;
+  --ctp-peach: #ff6600;
+  --ctp-pink: #ff44aa;
+  --ctp-flamingo: #ff2266;
+  --ctp-rosewater: #ffd0b0;
+  --ctp-maroon: #cc1100;
+
+  /* ── Semantic tokens ── */
+  --bg-app: #0d0b18;
+  --bg-sidebar: #08060f;
+  --bg-card: #141120;
+  --bg-hover: rgba(255, 140, 0, 0.12);
+  --bg-player: #040209;
+  --bg-glass: rgba(6, 4, 12, 0.96);
+  --accent: #ff8c00;
+  --accent-dim: rgba(255, 140, 0, 0.12);
+  --accent-glow: rgba(255, 140, 0, 0.40);
+  --volume-accent: #ff8c00;
+  --text-primary: #ede0c8;
+  --text-secondary: #c8b898;
+  --text-muted: #b0a0c8;
+  --border: rgba(255, 140, 0, 0.20);
+  --border-subtle: rgba(255, 140, 0, 0.10);
+  --positive: #44dd00;
+  --warning: #ffe033;
+  --danger: #ff2200;
+  --radius-sm: 2px;
+  --radius-md: 4px;
+  --radius-lg: 6px;
+}
+
+/* ── App shell: Hill Valley night sky — orange fire & blue lightning ── */
+[data-theme='hill-valley-85'] .app-shell {
+  background:
+    radial-gradient(ellipse at 15% 80%, rgba(255, 110, 0, 0.07) 0%, transparent 55%),
+    radial-gradient(ellipse at 85% 15%, rgba(60, 130, 255, 0.06) 0%, transparent 50%),
+    #0d0b18;
+}
+
+/* ── Sidebar: DeLorean stainless steel panels ── */
+[data-theme='hill-valley-85'] .sidebar {
+  background-color: #08060f;
+  background-image: repeating-linear-gradient(90deg,
+      rgba(255, 255, 255, 0.025) 0px, rgba(255, 255, 255, 0.025) 1px,
+      transparent 1px, transparent 10px);
+  border-right: 1px solid rgba(255, 140, 0, 0.22);
+  box-shadow: inset -2px 0 8px rgba(255, 100, 0, 0.05), 2px 0 6px rgba(0, 0, 0, 0.40);
+}
+
+/* Nav links */
+[data-theme='hill-valley-85'] .nav-link {
+  color: #c8b898;
+}
+
+[data-theme='hill-valley-85'] .nav-link:hover {
+  background: rgba(255, 140, 0, 0.10);
+  color: #ede0c8;
+}
+
+[data-theme='hill-valley-85'] .nav-link.active {
+  background: linear-gradient(90deg, rgba(255, 140, 0, 0.18) 0%, transparent 100%);
+  color: #ff8c00;
+  border-left: 2px solid #ff8c00;
+  box-shadow: inset 4px 0 12px rgba(255, 140, 0, 0.10);
+}
+
+[data-theme='hill-valley-85'] .nav-link.active::before {
+  background: #ff8c00;
+  box-shadow: 0 0 8px rgba(255, 140, 0, 0.70);
+}
+
+[data-theme='hill-valley-85'] .nav-link.active svg {
+  color: #ff8c00;
+}
+
+/* ── Player bar: DeLorean time circuit console ── */
+[data-theme='hill-valley-85'] .player-bar {
+  background: linear-gradient(180deg, #060410 0%, #030208 100%);
+  border-top: 2px solid rgba(255, 140, 0, 0.45);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 140, 0, 0.18),
+    0 -6px 30px rgba(255, 100, 0, 0.12),
+    0 -2px 60px rgba(60, 130, 255, 0.04);
+}
+
+/* Track name: DeLorean time circuit red LED display */
+[data-theme='hill-valley-85'] .player-track-name {
+  color: #ff2200;
+  font-family: 'Courier New', 'Courier', monospace;
+  text-shadow:
+    0 0 8px rgba(255, 34, 0, 0.90),
+    0 0 18px rgba(255, 34, 0, 0.50),
+    0 0 30px rgba(255, 34, 0, 0.20);
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+  font-weight: 700;
+}
+
+/* Artist name: amber LED — second row of the time display */
+[data-theme='hill-valley-85'] .player-track-artist {
+  color: #ff8c00;
+  font-family: 'Courier New', monospace;
+  text-shadow: 0 0 8px rgba(255, 140, 0, 0.65);
+  letter-spacing: 0.5px;
+  opacity: 1;
+}
+
+/* Time readout: amber LCD */
+[data-theme='hill-valley-85'] .player-time {
+  color: #cc6a00;
+  font-family: 'Courier New', monospace;
+  text-shadow: 0 0 6px rgba(255, 140, 0, 0.40);
+}
+
+/* ── Transport buttons: illuminated 80s switches ── */
+[data-theme='hill-valley-85'] .player-btn,
+[data-theme='hill-valley-85'] .player-btn-primary {
+  background: linear-gradient(180deg, #100d1c 0%, #0a0815 100%);
+  color: #ff8c00;
+  border: 1px solid rgba(255, 140, 0, 0.35);
+  border-radius: 50%;
+  box-shadow: inset 0 0 6px rgba(255, 100, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.50);
+}
+
+[data-theme='hill-valley-85'] .player-btn:hover,
+[data-theme='hill-valley-85'] .player-btn-primary:hover {
+  background: rgba(255, 140, 0, 0.12);
+  border-color: #ff8c00;
+  color: #ffaa33;
+  box-shadow:
+    0 0 14px rgba(255, 140, 0, 0.40),
+    inset 0 0 8px rgba(255, 100, 0, 0.08);
+}
+
+/* ── Regular buttons: DeLorean console switches ── */
+[data-theme='hill-valley-85'] .btn,
+[data-theme='hill-valley-85'] .btn-surface,
+[data-theme='hill-valley-85'] .btn-ghost {
+  background: linear-gradient(180deg, #141120 0%, #0e0c1a 100%);
+  color: #c8b898;
+  border: 1px solid rgba(255, 140, 0, 0.28);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 3px rgba(0, 0, 0, 0.40);
+  border-radius: 4px;
+}
+
+[data-theme='hill-valley-85'] .btn:hover,
+[data-theme='hill-valley-85'] .btn-surface:hover,
+[data-theme='hill-valley-85'] .btn-ghost:hover {
+  background: rgba(255, 140, 0, 0.10);
+  border-color: rgba(255, 140, 0, 0.60);
+  color: #ede0c8;
+  box-shadow: 0 0 10px rgba(255, 140, 0, 0.22), inset 0 0 6px rgba(255, 100, 0, 0.05);
+}
+
+/* ── Primary button: fire orange ── */
+[data-theme='hill-valley-85'] .btn-primary {
+  background: linear-gradient(180deg, #cc5500 0%, #993d00 100%);
+  color: #ffffff;
+  border: 1px solid #ff6600;
+  box-shadow: 0 0 12px rgba(255, 140, 0, 0.30), inset 0 1px 0 rgba(255, 180, 0, 0.25);
+  border-radius: 4px;
+}
+
+[data-theme='hill-valley-85'] .btn-primary:hover {
+  background: linear-gradient(180deg, #e86000 0%, #b04800 100%);
+  box-shadow: 0 0 18px rgba(255, 140, 0, 0.50), inset 0 1px 0 rgba(255, 200, 0, 0.25);
+}
+
+/* ── Hero / album-card buttons ── */
+[data-theme='hill-valley-85'] .hero-play-btn,
+[data-theme='hill-valley-85'] .album-card-details-btn {
+  background: rgba(255, 140, 0, 0.10);
+  color: #ff8c00;
+  border: 1px solid rgba(255, 140, 0, 0.35);
+  box-shadow: inset 0 1px 0 rgba(255, 180, 0, 0.08);
+}
+
+[data-theme='hill-valley-85'] .hero-play-btn:hover,
+[data-theme='hill-valley-85'] .album-card-details-btn:hover {
+  background: rgba(255, 140, 0, 0.18);
+  border-color: #ff8c00;
+  box-shadow: 0 0 12px rgba(255, 140, 0, 0.35);
+}
+
+/* ── Queue toolbar round buttons ── */
+[data-theme='hill-valley-85'] .queue-round-btn {
+  background: linear-gradient(180deg, #141120 0%, #0e0c1a 100%);
+  color: #a09070;
+  border: 1px solid rgba(255, 140, 0, 0.22);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
+}
+
+[data-theme='hill-valley-85'] .queue-round-btn:hover:not(:disabled):not(.active) {
+  background: rgba(255, 140, 0, 0.10);
+  border-color: rgba(255, 140, 0, 0.55);
+  color: #ff8c00;
+  box-shadow: 0 0 10px rgba(255, 140, 0, 0.22);
+}
+
+[data-theme='hill-valley-85'] .queue-round-btn.active {
+  background: rgba(255, 140, 0, 0.18);
+  border-color: #ff8c00;
+  color: #ff8c00;
+  box-shadow: 0 0 12px rgba(255, 140, 0, 0.40), inset 0 0 6px rgba(255, 100, 0, 0.08);
+}
+
+/* ── Cards: dark interior panels ── */
+[data-theme='hill-valley-85'] .card {
+  background: #141120;
+  border: 1px solid rgba(255, 140, 0, 0.14);
+  box-shadow: inset 0 0 20px rgba(255, 100, 0, 0.03), 0 2px 8px rgba(0, 0, 0, 0.40);
+}
+
+/* ── Content header: console panel strip ── */
+[data-theme='hill-valley-85'] .content-header {
+  background: linear-gradient(180deg, #100d1c 0%, #0d0b18 100%);
+  border-bottom: 1px solid rgba(255, 140, 0, 0.22);
+  box-shadow: 0 2px 12px rgba(255, 100, 0, 0.05);
+}
+
+/* ── Theme accordion ── */
+[data-theme='hill-valley-85'] .theme-accordion-header:hover {
+  background: rgba(255, 140, 0, 0.10);
+  color: #ff8c00;
+}
+
+[data-theme='hill-valley-85'] .theme-accordion-open .theme-accordion-header {
+  background: rgba(255, 140, 0, 0.12);
+  color: #ff8c00;
+}
+
+[data-theme='hill-valley-85'] .theme-accordion-open .theme-accordion-chevron {
+  color: #ff8c00;
+}
+
+/* ── Progress bar: speedometer reaching 88 mph ── */
+[data-theme='hill-valley-85'] .progress-bar-track {
+  background: #0a0815;
+  border: 1px solid rgba(255, 140, 0, 0.20);
+  border-radius: 2px;
+}
+
+[data-theme='hill-valley-85'] .progress-bar-fill {
+  background: linear-gradient(90deg, #993d00 0%, #cc5500 40%, #ff8c00 80%, #ffaa33 100%);
+  border-radius: 2px;
+  box-shadow: 0 0 10px rgba(255, 140, 0, 0.55), 0 0 3px rgba(255, 200, 0, 0.40);
+}
+
+/* ── Scrollbar: fire trail minimal ── */
+[data-theme='hill-valley-85'] ::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+[data-theme='hill-valley-85'] ::-webkit-scrollbar-track {
+  background: #07060e;
+}
+
+[data-theme='hill-valley-85'] ::-webkit-scrollbar-thumb {
+  background: rgba(255, 140, 0, 0.28);
+  border: 1px solid rgba(255, 140, 0, 0.18);
+  border-radius: 3px;
+}
+
+[data-theme='hill-valley-85'] ::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 140, 0, 0.55);
+  box-shadow: 0 0 6px rgba(255, 140, 0, 0.40);
+}
+
+/* ── Glass / dropdowns: dark DeLorean interior ── */
+[data-theme='hill-valley-85'] .glass {
+  background: rgba(6, 4, 12, 0.97) !important;
+  backdrop-filter: none !important;
+  border: 1px solid rgba(255, 140, 0, 0.28) !important;
+  box-shadow:
+    0 0 20px rgba(255, 100, 0, 0.08),
+    inset 0 0 16px rgba(255, 100, 0, 0.02) !important;
+  border-radius: 4px !important;
+}
+
+[data-theme='hill-valley-85'] .glass [style*="var(--bg-hover)"] {
+  background: rgba(255, 140, 0, 0.10) !important;
+  border-radius: 2px !important;
+}
+
+[data-theme='hill-valley-85'] .glass [style*="var(--text-primary)"] {
+  color: #ede0c8 !important;
+}
+
+[data-theme='hill-valley-85'] .glass [style*="var(--text-secondary)"] {
+  color: #c8b898 !important;
+}
+
+[data-theme='hill-valley-85'] .glass [style*="var(--text-muted)"] {
+  color: #5a4e70 !important;
+}
+
+/* ── Hover / selection: fire orange glow ── */
+[data-theme='hill-valley-85'] .queue-tab-btn:hover {
+  background: rgba(255, 140, 0, 0.10);
+  color: #ff8c00;
+}
+
+[data-theme='hill-valley-85'] .settings-tab:hover {
+  background: rgba(255, 140, 0, 0.10);
+  color: #ff8c00;
+}
+
+[data-theme='hill-valley-85'] .settings-tab.active {
+  background: rgba(255, 140, 0, 0.15);
+  color: #ff8c00;
+  box-shadow: inset 2px 0 0 #ff8c00;
+}
+
+[data-theme='hill-valley-85'] .custom-select-trigger:hover {
+  background: rgba(255, 140, 0, 0.10);
+}
+
+[data-theme='hill-valley-85'] .custom-select-option:hover {
+  background: rgba(255, 140, 0, 0.14) !important;
+  color: #ffaa33 !important;
+}
+
+[data-theme='hill-valley-85'] .artist-ext-link:hover {
+  background: rgba(255, 140, 0, 0.10);
+  color: #ff8c00 !important;
+  border-color: rgba(255, 140, 0, 0.50) !important;
+}
+
+[data-theme='hill-valley-85'] .np-action-btn:hover {
+  background: rgba(255, 140, 0, 0.10);
+}
+
+[data-theme='hill-valley-85'] .np-queue-item:hover,
+[data-theme='hill-valley-85'] .np-queue-item.context-active {
+  background: rgba(255, 140, 0, 0.12);
+  box-shadow: inset 2px 0 0 #ff8c00;
+}
+
+[data-theme='hill-valley-85'] .track-row:hover,
+[data-theme='hill-valley-85'] .track-row.context-active {
+  background: rgba(255, 140, 0, 0.08) !important;
+  box-shadow: inset 2px 0 0 #ff8c00;
+}
+
+[data-theme='hill-valley-85'] .artist-row:hover {
+  background: rgba(255, 140, 0, 0.08);
+  box-shadow: inset 2px 0 0 #ff8c00;
+}
+
+[data-theme='hill-valley-85'] .playlist-row:hover {
+  background: rgba(255, 140, 0, 0.08);
+  box-shadow: inset 2px 0 0 #ff8c00;
+}
+
+[data-theme='hill-valley-85'] .queue-item:hover,
+[data-theme='hill-valley-85'] .queue-item.context-active {
+  background: rgba(255, 140, 0, 0.10) !important;
+  box-shadow: inset 2px 0 0 #ff8c00;
+}
+
+[data-theme='hill-valley-85'] .queue-item:hover .queue-item-title,
+[data-theme='hill-valley-85'] .queue-item:hover .queue-item-artist,
+[data-theme='hill-valley-85'] .queue-item:hover .queue-item-duration,
+[data-theme='hill-valley-85'] .queue-item.context-active .queue-item-title,
+[data-theme='hill-valley-85'] .queue-item.context-active .queue-item-artist,
+[data-theme='hill-valley-85'] .queue-item.context-active .queue-item-duration {
+  color: #ff8c00;
+}
+
+/* ── Active queue item: glowing orange ── */
+[data-theme='hill-valley-85'] .queue-item.active {
+  background: rgba(255, 140, 0, 0.08);
+  box-shadow: inset 2px 0 0 #ff8c00;
+}
+
+[data-theme='hill-valley-85'] .np-queue-item-active {
+  color: #ff8c00;
+  text-shadow: 0 0 8px rgba(255, 140, 0, 0.55);
+}
+
+[data-theme='hill-valley-85'] .np-queue-item.active {
+  background: rgba(255, 140, 0, 0.08);
+}
+
+[data-theme='hill-valley-85'] .np-album-track.active .np-album-track-title,
+[data-theme='hill-valley-85'] .np-album-track.active .np-album-track-num {
+  color: #ff8c00;
+  text-shadow: 0 0 8px rgba(255, 140, 0, 0.50);
+}
+
+[data-theme='turtle-power'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2333cc33%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  --ctp-crust: #0a0a0a;
+  --ctp-mantle: #121212;
+  --ctp-base: #1a1a1a;
+  --ctp-surface0: #2a2a2a;
+  --ctp-surface1: #353535;
+  --ctp-surface2: #404040;
+  --ctp-overlay0: #556655;
+  --ctp-overlay1: #778877;
+  --ctp-overlay2: #99aa99;
+  --ctp-text: #e0e0e0;
+  --ctp-subtext1: #a0b0a0;
+  --ctp-subtext0: #809080;
+
+  --ctp-mauve: #33cc33;
+  --ctp-lavender: #44ee44;
+  --ctp-red: #ff0000;
+  --ctp-blue: #00aaff;
+  --ctp-peach: #ff8c00;
+  --ctp-yellow: #ffcc00;
+  --ctp-maroon: #a020f0;
+  --ctp-green: #33cc33;
+  --ctp-teal: #44ee44;
+  --ctp-sky: #00aaff;
+  --ctp-sapphire: #0077cc;
+  --ctp-pink: #ff66aa;
+  --ctp-flamingo: #ff4488;
+  --ctp-rosewater: #ffaacc;
+
+  --bg-app: #1a1a1a;
+  --bg-sidebar: #121212;
+  --bg-card: #242424;
+  --bg-hover: rgba(51, 204, 51, 0.1);
+  --bg-player: #0a0a0a;
+  --bg-glass: rgba(10, 10, 10, 0.85);
+
+  --accent: #33cc33;
+  --accent-dim: rgba(51, 204, 51, 0.15);
+  --accent-glow: rgba(51, 204, 51, 0.4);
+  --volume-accent: #33cc33;
+
+  --text-primary: #e0e0e0;
+  --text-secondary: #a0b0a0;
+  --text-muted: #667766;
+  --border: #333333;
+  --border-subtle: #222222;
+
+  --radius-sm: 2px;
+  --radius-md: 4px;
+  --radius-lg: 8px;
+}
+
+[data-theme='turtle-power'] .sidebar {
+  background-image:
+    linear-gradient(335deg, #161616 5px, transparent 5px),
+    linear-gradient(155deg, #161616 5px, transparent 5px),
+    linear-gradient(335deg, #161616 5px, transparent 5px),
+    linear-gradient(155deg, #161616 5px, transparent 5px);
+  background-size: 20px 20px;
+  background-position: 0 0, 10px 10px, 10px 10px, 0 0;
+  border-right: 2px solid #222;
+}
+
+[data-theme='turtle-power'] .player-bar {
+  background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
+  border-top: 2px solid #333;
+  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.5);
+}
+
+[data-theme='turtle-power'] .player-track-name {
+  color: #44ee44;
+  text-shadow: 0 0 8px rgba(68, 238, 68, 0.6);
+  font-weight: bold;
+}
+
+[data-theme='turtle-power'] .btn-primary,
+[data-theme='turtle-power'] .player-btn-primary {
+  background: linear-gradient(145deg, #33cc33, #28a428);
+  border: 1px solid #1e7a1e;
+  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.3), 2px 2px 5px rgba(0, 0, 0, 0.5);
+  color: #000 !important;
+}
+
+[data-theme='turtle-power'] .nav-link.active {
+  background: var(--accent-dim);
+  border-left: 4px solid var(--accent);
+  color: var(--accent) !important;
+  text-shadow: 0 0 5px rgba(51, 204, 51, 0.3);
+}
+
+[data-theme='turtle-power'] .queue-item.active {
+  border-left: 3px solid var(--accent);
+  background: rgba(51, 204, 51, 0.05);
+}
+
+/* ── W3.1 (Operating Systems) ───────────────────────────────── */
+[data-theme='w3-1'] {
+  color-scheme: light;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  /* ── Authentische W3.1 Palette ── */
+  --ctp-crust: #808080;
+  --ctp-mantle: #a0a0a0;
+  --ctp-base: #c0c0c0;
+  /* Reines W3.1 Grau */
+  --ctp-surface0: #ffffff;
+  --ctp-surface1: #e0e0e0;
+  --ctp-surface2: #c0c0c0;
+  --ctp-overlay0: #808080;
+  --ctp-overlay1: #404040;
+  --ctp-overlay2: #000000;
+  --ctp-text: #000000;
+  --ctp-subtext1: #000000;
+  --ctp-subtext0: #000000;
+
+  --ctp-mauve: #000080;
+  --ctp-lavender: #0000a0;
+  --ctp-green: #008000;
+  --ctp-teal: #008080;
+  --ctp-sky: #0000ff;
+  --ctp-blue: #000080;
+  --ctp-sapphire: #000080;
+  --ctp-pink: #ff00ff;
+  --ctp-flamingo: #ff00ff;
+  --ctp-rosewater: #ffffff;
+  --ctp-yellow: #ffff00;
+  --ctp-peach: #ff8000;
+  --ctp-maroon: #800000;
+  --ctp-red: #ff0000;
+
+  --bg-app: #008080;
+  /* Teal Desktop */
+  --bg-sidebar: #c0c0c0;
+  --bg-card: #ffffff;
+  --bg-hover: #000080;
+  --bg-player: #c0c0c0;
+  --bg-glass: #c0c0c0;
+
+  --accent: #000080;
+  --accent-dim: rgba(0, 0, 128, 0.12);
+  --accent-glow: transparent;
+  --volume-accent: #000080;
+
+  --text-primary: #000000;
+  --text-secondary: #000000;
+  --text-muted: #000000;
+
+  --border: #000000;
+  --border-subtle: #808080;
+  --border-dropdown: #000000;
+  --shadow-dropdown: rgba(0, 0, 0, 0.4);
+
+  --positive: #008000;
+  --warning: #808000;
+  --danger: #ff0000;
+
+  --radius-sm: 0px;
+  --radius-md: 0px;
+  --radius-lg: 0px;
+  --radius-xl: 0px;
+  --radius-full: 0px;
+}
+
+/* Teal Desktop */
+[data-theme='w3-1'] .app-shell {
+  background: #008080;
+}
+
+/* ── W3.1 Bevel (2-Layer, schlichter als W98) ── */
+[data-theme='w3-1'] .sidebar,
+[data-theme='w3-1'] .player-bar,
+[data-theme='w3-1'] .card {
+  background: #c0c0c0;
+  border: 2px solid #000000;
+  box-shadow:
+    inset 1px 1px #ffffff,
+    inset -1px -1px #808080;
+}
+
+[data-theme='w3-1'] .sidebar {
+  border-right: 2px solid #000000;
+}
+
+/* Titelbalken-Stil: solides Navy — der Kern-Unterschied zu W98 */
+[data-theme='w3-1'] .player-bar {
+  border-top: 2px solid #000000;
+}
+
+[data-theme='w3-1'] .player-track-name {
+  background: #000080;
+  color: #ffffff !important;
+  padding: 2px 6px;
+  font-weight: bold;
+  text-align: center;
+  letter-spacing: 0.03em;
+}
+
+[data-theme='w3-1'] .player-track-artist,
+[data-theme='w3-1'] .player-time {
+  color: #000000 !important;
+}
+
+/* Nav */
+[data-theme='w3-1'] .nav-link.active {
+  background: #000080 !important;
+  color: #ffffff !important;
+}
+
+[data-theme='w3-1'] .nav-link.active svg {
+  color: #ffffff !important;
+}
+
+[data-theme='w3-1'] .nav-link:hover:not(.active) {
+  background: #000080 !important;
+  color: #ffffff !important;
+}
+
+[data-theme='w3-1'] .nav-link:hover:not(.active) svg {
+  color: #ffffff !important;
+}
+
+/* Accordion (Settings Theme Picker) */
+[data-theme='w3-1'] .nav-section-label {
+  color: #000000 !important;
+}
+
+[data-theme='w3-1'] .theme-accordion-header:hover {
+  background: #000080;
+  color: #ffffff;
+}
+
+[data-theme='w3-1'] .theme-accordion-open .theme-accordion-header {
+  background: #000080;
+  color: #ffffff;
+}
+
+[data-theme='w3-1'] .theme-accordion-open .theme-accordion-chevron {
+  color: #ffffff;
+}
+
+/* Alle Buttons: W3.1 Bevel (einfach, ohne doppelte Inset-Schicht) */
+[data-theme='w3-1'] .btn,
+[data-theme='w3-1'] .btn-primary,
+[data-theme='w3-1'] .btn-surface,
+[data-theme='w3-1'] .btn-ghost,
+[data-theme='w3-1'] .hero-play-btn,
+[data-theme='w3-1'] .queue-round-btn,
+[data-theme='w3-1'] .player-btn,
+[data-theme='w3-1'] .album-card-details-btn {
+  background: #c0c0c0 !important;
+  color: #000000 !important;
+  border: 1px solid #000000 !important;
+  border-radius: 0 !important;
+  box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080 !important;
+  text-shadow: none !important;
+  filter: none !important;
+  transform: none !important;
+}
+
+/* Gedrückt */
+[data-theme='w3-1'] .btn:active,
+[data-theme='w3-1'] .btn-primary:active,
+[data-theme='w3-1'] .btn-surface:active,
+[data-theme='w3-1'] .btn-ghost:active,
+[data-theme='w3-1'] .hero-play-btn:active,
+[data-theme='w3-1'] .queue-round-btn:active,
+[data-theme='w3-1'] .player-btn:active,
+[data-theme='w3-1'] .album-card-details-btn:active {
+  box-shadow: inset -1px -1px #ffffff, inset 1px 1px #808080 !important;
+}
+
+/* Hover */
+[data-theme='w3-1'] .btn:hover,
+[data-theme='w3-1'] .btn-primary:hover,
+[data-theme='w3-1'] .btn-surface:hover,
+[data-theme='w3-1'] .btn-ghost:hover,
+[data-theme='w3-1'] .hero-play-btn:hover,
+[data-theme='w3-1'] .album-card-details-btn:hover {
+  background: #d0d0d0 !important;
+  color: #000000 !important;
+}
+
+/* Aktive Queue-Buttons */
+[data-theme='w3-1'] .queue-round-btn.active {
+  background: #000080 !important;
+  color: #ffffff !important;
+  box-shadow: inset -1px -1px #ffffff, inset 1px 1px #808080 !important;
+}
+
+[data-theme='w3-1'] .queue-round-btn:hover:not(:disabled):not(.active) {
+  background: #d0d0d0 !important;
+  color: #000000 !important;
+}
+
+/* Progress Bar */
+[data-theme='w3-1'] .progress-bar-track {
+  background: #ffffff;
+  box-shadow: inset 1px 1px #808080, inset -1px -1px #ffffff;
+  border-radius: 0;
+}
+
+[data-theme='w3-1'] .progress-bar-fill {
+  background: #000080;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+/* Scrollbar */
+[data-theme='w3-1'] ::-webkit-scrollbar {
+  width: 16px;
+  height: 16px;
+}
+
+[data-theme='w3-1'] ::-webkit-scrollbar-track {
+  background: #c0c0c0;
+}
+
+[data-theme='w3-1'] ::-webkit-scrollbar-thumb {
+  background: #c0c0c0;
+  border: 1px solid #000000;
+  box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080;
+}
+
+/* Cards */
+[data-theme='w3-1'] .card {
+  background: #ffffff;
+  border: 2px solid #000000;
+  box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080;
+}
+
+/* Glass (Live Dropdown etc.) */
+[data-theme='w3-1'] .glass {
+  background: #c0c0c0 !important;
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+  border: 2px solid #000000;
+  box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080;
+  color: #000000;
+}
+
+[data-theme='w3-1'] .glass [style*="var(--bg-hover)"] {
+  background: #d8d8d8 !important;
+  border: 1px solid #808080;
+  border-radius: 0 !important;
+}
+
+[data-theme='w3-1'] .glass [style*="var(--text-primary)"],
+[data-theme='w3-1'] .glass [style*="var(--text-secondary)"],
+[data-theme='w3-1'] .glass [style*="var(--text-muted)"] {
+  color: #000000 !important;
+}
+
+/* Universelle Hover-Zustände → navy + weiß */
+[data-theme='w3-1'] .queue-tab-btn:hover {
+  background: #d0d0d0;
+  color: #000000;
+}
+
+[data-theme='w3-1'] .settings-tab:hover {
+  background: #000080;
+  color: #ffffff;
+}
+
+[data-theme='w3-1'] .custom-select-trigger:hover {
+  background: #000080;
+  color: #ffffff;
+}
+
+[data-theme='w3-1'] .custom-select-option:hover {
+  background: #000080 !important;
+  color: #ffffff !important;
+}
+
+[data-theme='w3-1'] .artist-ext-link:hover {
+  background: #000080;
+  color: #ffffff !important;
+}
+
+[data-theme='w3-1'] .np-action-btn:hover {
+  background: #000080;
+  color: #ffffff;
+}
+
+[data-theme='w3-1'] .np-queue-item:hover,
+[data-theme='w3-1'] .np-queue-item.context-active {
+  background: #000080;
+  color: #ffffff;
+}
+
+[data-theme='w3-1'] .track-row:hover,
+[data-theme='w3-1'] .track-row.context-active {
+  background: #000080 !important;
+}
+
+[data-theme='w3-1'] .track-row:hover *,
+[data-theme='w3-1'] .track-row.context-active * {
+  color: #ffffff !important;
+}
+
+[data-theme='w3-1'] .artist-row:hover {
+  background: #000080;
+  color: #ffffff;
+}
+
+[data-theme='w3-1'] .playlist-row:hover {
+  background: #000080;
+}
+
+[data-theme='w3-1'] .playlist-row:hover,
+[data-theme='w3-1'] .playlist-row:hover * {
+  color: #ffffff;
+}
+
+[data-theme='w3-1'] .queue-item:hover,
+[data-theme='w3-1'] .queue-item.context-active {
+  background: #000080 !important;
+}
+
+[data-theme='w3-1'] .queue-item:hover .queue-item-title,
+[data-theme='w3-1'] .queue-item:hover .queue-item-artist,
+[data-theme='w3-1'] .queue-item:hover .queue-item-duration,
+[data-theme='w3-1'] .queue-item.context-active .queue-item-title,
+[data-theme='w3-1'] .queue-item.context-active .queue-item-artist,
+[data-theme='w3-1'] .queue-item.context-active .queue-item-duration {
+  color: #ffffff;
+}
+
+[data-theme='w3-1'] .player-btn:hover {
+  background: #000080;
+  color: #ffffff;
+}
+
+[data-theme='w3-1'] .player-btn-primary {
+  background: #c0c0c0 !important;
+  color: #000000 !important;
+}
+
+[data-theme='w3-1'] .player-btn-primary:hover {
+  background: #000080 !important;
+  color: #ffffff !important;
+}
+
+[data-theme='w3-1'] .search-result-item:hover,
+[data-theme='w3-1'] .search-result-item.active {
+  background: #000080;
+}
+
+[data-theme='w3-1'] .search-result-item:hover .search-result-name,
+[data-theme='w3-1'] .search-result-item:hover .search-result-sub,
+[data-theme='w3-1'] .search-result-item.active .search-result-name,
+[data-theme='w3-1'] .search-result-item.active .search-result-sub {
+  color: #ffffff;
+}
+
+[data-theme='w3-1'] .np-title {
+  color: #000080 !important;
+}
+
+[data-theme='w3-1'] .changelog-code {
+  background: #ffffff;
+  color: #000080;
+  border: 1px solid #808080;
+}
+
+[data-theme='w3-1'] .keybind-badge {
+  background: #c0c0c0 !important;
+  color: #000000 !important;
+  border: 1px solid #808080 !important;
+}
+
+[data-theme='w3-1'] .genre-keyword-badge {
+  background: #c0c0c0 !important;
+  color: #000000 !important;
+  border: 1px solid #808080 !important;
+}
+
+[data-theme='w3-1'] .eq-ctrl-btn {
+  background: #c0c0c0;
+  color: #000000;
+  border: 1px solid #808080;
+  box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080;
+}
+
+[data-theme='w3-1'] .eq-ctrl-btn:hover {
+  background: #000080;
+  color: #ffffff;
+}
+
+[data-theme='w3-1'] .toggle-track::before {
+  background: #c0c0c0;
+  border: 1px solid #808080;
+}
+
+[data-theme='w3-1'] .hero-eyebrow {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+[data-theme='w3-1'] .hero-meta .badge {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+[data-theme='w3-1'] .connection-type,
+[data-theme='w3-1'] .connection-server {
+  color: #000000;
+}
+
+[data-theme='w3-1'] .collapse-btn {
+  border-color: #808080 !important;
+}
+
+[data-theme='w3-1'] .collapse-btn:hover {
+  background: #000080 !important;
+  color: #ffffff !important;
+}
+
+[data-theme='w3-1'] .album-row-nav .nav-btn:hover:not(.disabled) {
+  background: #000080;
+  color: #ffffff;
+}
+
+[data-theme='w3-1'] .help-question:hover {
+  color: #000080;
+}
+
+[data-theme='w3-1'] .help-item-open .help-question {
+  color: #000080;
+  font-weight: bold;
+}
+
+[data-theme='w3-1'] .year-toggle:hover {
+  color: #000080;
+}
+

src/styles/themes/badge.css

@@ -0,0 +1,13 @@
+/* ─── Badge ─── */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px var(--space-2);
+  border-radius: var(--radius-full);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  background: var(--accent-dim);
+  color: var(--accent);
+}
+

src/styles/themes/blade-cinematic-industrial.css

@@ -0,0 +1,342 @@
+/* ─────────────────────────────────────────────────────────────
+   Blade — Cinematic Industrial
+   ───────────────────────────────────────────────────────────── */
+
+[data-theme='blade'] {
+  color-scheme: dark;
+
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23a0a0a0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  --ctp-crust: #050505;
+  --ctp-mantle: #0a0a0a;
+  --ctp-base: #121212;
+  --ctp-surface0: #1a1a1a;
+  --ctp-surface1: #252525;
+  --ctp-surface2: #333333;
+  --ctp-overlay0: #4a4a4a;
+  --ctp-overlay1: #707070;
+  --ctp-overlay2: #909090;
+  --ctp-text: #e0e0e0;
+  --ctp-subtext1: #b0b0b0;
+  --ctp-subtext0: #888888;
+  --ctp-mauve: #b30000;
+  --ctp-lavender: #ff1a1a;
+  --ctp-green: #00ff66;
+  --ctp-teal: #1abc9c;
+  --ctp-sky: #3498db;
+  --ctp-blue: #2980b9;
+  --ctp-sapphire: #1f618d;
+  --ctp-pink: #e91e63;
+  --ctp-flamingo: #f06292;
+  --ctp-rosewater: #f8bbd0;
+  --ctp-yellow: #f1c40f;
+  --ctp-peach: #e67e22;
+  --ctp-maroon: #800000;
+  --ctp-red: #ff0000;
+
+  --bg-app: #121212;
+  --bg-sidebar: #0a0a0a;
+  --bg-card: #1a1a1a;
+  --bg-hover: rgba(179, 0, 0, 0.1);
+  --bg-player: #050505;
+  --bg-glass: rgba(10, 10, 10, 0.85);
+
+  --accent: #b30000;
+  --accent-dim: rgba(179, 0, 0, 0.15);
+  --accent-glow: rgba(179, 0, 0, 0.4);
+
+  --text-primary: #e0e0e0;
+  --text-secondary: #b0b0b0;
+  --text-muted: #888888;
+
+  --border: #2a2a2a;
+  --border-subtle: #1a1a1a;
+
+  --positive: #00ff66;
+  --warning: #f1c40f;
+  --danger: #ff0000;
+
+  --radius-sm: 2px;
+  --radius-md: 4px;
+  --radius-lg: 6px;
+}
+
+[data-theme='blade'] .player-bar {
+  border-top: 1px solid #222;
+  background: linear-gradient(to bottom, #0a0a0a 0%, #050505 100%);
+  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.8);
+}
+
+[data-theme='blade'] .sidebar {
+  border-right: 1px solid #1a1a1a;
+}
+
+[data-theme='blade'] .nav-link.active {
+  background: linear-gradient(90deg, rgba(179, 0, 0, 0.2) 0%, transparent 100%);
+  color: #fff;
+}
+
+[data-theme='blade'] .nav-link.active::before {
+  box-shadow: 0 0 8px rgba(179, 0, 0, 0.5);
+}
+
+[data-theme='blade'] .player-track-name {
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  font-weight: 700;
+  color: #fff;
+  text-shadow: 0 0 10px rgba(179, 0, 0, 0.3);
+}
+
+[data-theme='blade'] .btn-primary {
+  background: linear-gradient(135deg, #b30000 0%, #800000 100%);
+  border: 1px solid rgba(255, 26, 26, 0.2);
+  color: #fff;
+}
+
+/* ── T-800 — Terminator 2: Judgment Day ─────────────────────── */
+/* Endoskeleton HUD red + machine data green + industrial dark   */
+[data-theme='t-800'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ff2000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  /* Industrial dark — machine oil, scorched steel, warm black */
+  --ctp-crust: #080606;
+  --ctp-mantle: #0e0a0a;
+  --ctp-base: #140e0e;
+  --ctp-surface0: #1e1414;
+  --ctp-surface1: #281c1c;
+  --ctp-surface2: #342424;
+  --ctp-overlay0: #584040;
+  --ctp-overlay1: #806060;
+  --ctp-overlay2: #a88888;
+  --ctp-text: #e8d8c8;
+  /* CRT terminal warm white */
+  --ctp-subtext1: #c8b8a0;
+  --ctp-subtext0: #a08888;
+
+  /* T2 palette */
+  --ctp-red: #ff2000;
+  /* T-800 eye / HUD targeting red */
+  --ctp-maroon: #cc1800;
+  --ctp-flamingo: #ff4020;
+  --ctp-mauve: #ff2000;
+  --ctp-lavender: #ff5040;
+  --ctp-pink: #ff4020;
+  --ctp-rosewater: #ff8060;
+  --ctp-green: #00e040;
+  /* machine data readout green */
+  --ctp-teal: #00b830;
+  --ctp-sky: #40ff80;
+  --ctp-yellow: #f0a000;
+  /* Judgment Day fire / nuclear orange */
+  --ctp-peach: #ff6000;
+  /* napalm / explosion */
+  --ctp-blue: #2040c0;
+  /* future war laser / Skynet */
+  --ctp-sapphire: #1830a0;
+
+  --bg-app: #140e0e;
+  /* scorched industrial dark */
+  --bg-sidebar: #0e0a0a;
+  /* machine interior */
+  --bg-card: #1e1414;
+  --bg-hover: rgba(255, 32, 0, 0.08);
+  --bg-player: #080606;
+  /* endoskeleton chassis */
+  --bg-glass: rgba(14, 10, 10, 0.96);
+
+  --accent: #ff2000;
+  /* T-800 eye red */
+  --accent-dim: rgba(255, 32, 0, 0.12);
+  --accent-glow: rgba(255, 32, 0, 0.5);
+  --volume-accent: #00e040;
+  /* data-green for volume */
+
+  --text-primary: #e8d8c8;
+  /* warm terminal white */
+  --text-secondary: #00e040;
+  /* machine data green */
+  --text-muted: #584040;
+  --border: #2a1a1a;
+  --border-subtle: #1e1414;
+  --shadow-dropdown: rgba(0, 0, 0, 0.9);
+
+  --positive: #00e040;
+  --warning: #f0a000;
+  --danger: #ff2000;
+
+  --radius-sm: 0px;
+  --radius-md: 1px;
+  --radius-lg: 2px;
+  --radius-xl: 2px;
+}
+
+/* Sidebar = endoskeleton interior: scan-line texture + red glow */
+[data-theme='t-800'] .sidebar {
+  border-right: 2px solid #ff2000;
+  box-shadow: 2px 0 16px rgba(255, 32, 0, 0.1);
+  background-image: repeating-linear-gradient(0deg,
+      transparent,
+      transparent 3px,
+      rgba(255, 32, 0, 0.025) 3px,
+      rgba(255, 32, 0, 0.025) 4px);
+}
+
+/* Player bar = HUD targeting display */
+[data-theme='t-800'] .player-bar {
+  border-top: 2px solid #ff2000;
+  box-shadow:
+    0 -1px 0 rgba(0, 224, 64, 0.2),
+    0 -8px 28px rgba(255, 32, 0, 0.1);
+}
+
+/* Track name = TARGET ACQUIRED — red HUD uppercase */
+[data-theme='t-800'] .player-track-name {
+  color: #ff2000;
+  text-shadow: 0 0 10px rgba(255, 32, 0, 0.75), 0 0 28px rgba(255, 32, 0, 0.3);
+  text-transform: uppercase;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+}
+
+/* Artist = machine data readout green */
+[data-theme='t-800'] .player-track-artist {
+  color: #00e040;
+}
+
+/* Queue album = Judgment Day orange */
+[data-theme='t-800'] .queue-meta-album {
+  color: #f0a000;
+}
+
+/* Active nav: red HUD left bar */
+[data-theme='t-800'] .nav-link.active {
+  background: linear-gradient(90deg, rgba(255, 32, 0, 0.15) 0%, transparent 100%);
+  color: #ff2000;
+}
+
+[data-theme='t-800'] .nav-link.active::before {
+  width: 3px;
+  box-shadow: 2px 0 12px rgba(255, 32, 0, 0.65);
+}
+
+/* Buttons: dark steel with red */
+[data-theme='t-800'] .btn-primary {
+  background: #ff2000;
+  color: #080606;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  border: none;
+  border-radius: 1px;
+}
+
+[data-theme='t-800'] .btn-primary:hover {
+  background: #ff4020;
+  box-shadow: 0 0 18px rgba(255, 32, 0, 0.5);
+}
+
+/* Play button = T-800 eye glow */
+[data-theme='t-800'] .player-btn-primary {
+  background: #ff2000;
+  box-shadow: 0 0 16px rgba(255, 32, 0, 0.5);
+  color: #080606;
+}
+
+[data-theme='t-800'] .player-btn-primary:hover {
+  box-shadow: 0 0 26px rgba(255, 32, 0, 0.7);
+}
+
+/* Queue active = targeting lock — red left bar */
+[data-theme='t-800'] .queue-item.active {
+  background: rgba(255, 32, 0, 0.08);
+  box-shadow: inset 3px 0 0 #ff2000;
+}
+
+[data-theme='t-800'] .np-queue-item.active {
+  background: rgba(255, 32, 0, 0.07);
+}
+
+[data-theme='t-800'] .np-queue-item-active {
+  color: #ff2000;
+  text-shadow: 0 0 8px rgba(255, 32, 0, 0.6);
+}
+
+/* Now-playing active track = data green */
+[data-theme='t-800'] .np-album-track.active .np-album-track-title,
+[data-theme='t-800'] .np-album-track.active .np-album-track-num {
+  color: #00e040;
+  text-shadow: 0 0 8px rgba(0, 224, 64, 0.5);
+}
+
+/* Hover rows */
+[data-theme='t-800'] .track-row:hover,
+[data-theme='t-800'] .track-row.context-active {
+  background: rgba(255, 32, 0, 0.07) !important;
+  box-shadow: inset 3px 0 0 #ff2000;
+}
+
+[data-theme='t-800'] .queue-item:hover,
+[data-theme='t-800'] .queue-item.context-active {
+  background: rgba(255, 32, 0, 0.07) !important;
+  box-shadow: inset 3px 0 0 #ff2000;
+}
+
+[data-theme='t-800'] .np-queue-item:hover,
+[data-theme='t-800'] .np-queue-item.context-active {
+  background: rgba(255, 32, 0, 0.07);
+  box-shadow: inset 2px 0 0 #ff2000;
+}
+
+[data-theme='t-800'] .artist-row:hover {
+  background: rgba(255, 32, 0, 0.06);
+  box-shadow: inset 3px 0 0 #ff2000;
+}
+
+[data-theme='t-800'] .playlist-row:hover {
+  background: rgba(255, 32, 0, 0.06);
+  box-shadow: inset 3px 0 0 #ff2000;
+}
+
+/* Settings tabs: data-green active = SYSTEM ONLINE */
+[data-theme='t-800'] .settings-tab:hover {
+  background: rgba(255, 32, 0, 0.07);
+  color: #ff2000;
+}
+
+[data-theme='t-800'] .settings-tab.active {
+  background: rgba(0, 224, 64, 0.07);
+  color: #00e040;
+  box-shadow: inset 3px 0 0 #00e040;
+}
+
+/* Queue tabs */
+[data-theme='t-800'] .queue-tab-btn:hover {
+  background: rgba(255, 32, 0, 0.07);
+  color: #ff2000;
+}
+
+/* Dropdowns */
+[data-theme='t-800'] .custom-select-trigger:hover {
+  background: rgba(255, 32, 0, 0.07);
+}
+
+[data-theme='t-800'] .custom-select-option:hover {
+  background: rgba(255, 32, 0, 0.1) !important;
+  color: #ff2000 !important;
+}
+
+/* Artist pills = Skynet blue */
+[data-theme='t-800'] .artist-ext-link:hover {
+  background: rgba(32, 64, 192, 0.15);
+  color: #4060e0 !important;
+  border-color: rgba(32, 64, 192, 0.4) !important;
+}
+
+/* Connection indicators */
+[data-theme='t-800'] .connection-type,
+[data-theme='t-800'] .connection-server {
+  color: #00e040;
+}
+

src/styles/themes/button-variants.css

@@ -0,0 +1,74 @@
+/* ─── Button Variants ─── */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-4);
+  border-radius: var(--radius-md);
+  font-size: 14px;
+  font-weight: 500;
+  transition: all var(--transition-fast);
+  white-space: nowrap;
+}
+
+.btn-primary {
+  background: var(--accent);
+  color: var(--ctp-crust);
+  font-weight: 600;
+}
+
+.btn-primary:hover {
+  background: var(--accent);
+  filter: brightness(1.1);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-glow);
+}
+
+.btn-primary:active {
+  transform: translateY(0);
+}
+
+.btn-ghost {
+  background: transparent;
+  color: var(--text-secondary);
+}
+
+.btn-ghost:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.btn-surface {
+  background: var(--bg-card);
+  color: var(--text-primary);
+  border: 1px solid var(--ctp-surface1);
+}
+
+.btn-surface:hover {
+  background: var(--bg-hover);
+  border-color: var(--ctp-overlay0);
+}
+
+.btn-danger {
+  background: transparent;
+  color: var(--danger);
+  border: 1px solid var(--danger);
+}
+
+.btn-danger:hover {
+  background: var(--danger);
+  color: #fff;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px color-mix(in srgb, var(--danger) 35%, transparent);
+}
+
+.btn-danger:active {
+  transform: translateY(0);
+}
+
+.btn-sm {
+  padding: 3px 8px;
+  font-size: 12px;
+  gap: var(--space-1);
+}
+

src/styles/themes/carbon-grey.css

@@ -0,0 +1,68 @@
+/* ─── Carbon Grey ─── */
+[data-theme='carbon-grey'] {
+  color-scheme: dark;
+
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b4bcc8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+
+  /* Backgrounds */
+  --ctp-crust:    #0f0f10;
+  --ctp-mantle:   #141416;
+  --ctp-base:     #18181b;
+  --ctp-surface0: #1f1f23;
+  --ctp-surface1: #26262b;
+  --ctp-surface2: #2e2e34;
+
+  /* Overlays */
+  --ctp-overlay0: #3f3f46;
+  --ctp-overlay1: #52525b;
+  --ctp-overlay2: #71717a;
+
+  /* Text */
+  --ctp-text:     #e5e7eb;
+  --ctp-subtext1: #9ca3af;
+  --ctp-subtext0: #6b7280;
+
+  /* Grey accent */
+  --ctp-teal:      #9ca3af;
+  --ctp-sky:       #9ca3af;
+  --ctp-sapphire:  #6b7280;
+  --ctp-blue:      #52525b;
+  --ctp-lavender:  #9ca3af;
+  --ctp-mauve:     #6b7280;
+  --ctp-pink:      #52525b;
+  --ctp-flamingo:  #9ca3af;
+  --ctp-rosewater: #6b7280;
+
+  /* Semantic */
+  --ctp-red:     #ef4444;
+  --ctp-maroon:  #f97316;
+  --ctp-peach:   #f97316;
+  --ctp-yellow:  #eab308;
+  --ctp-green:   #22c55e;
+
+  /* UI tokens */
+  --bg-app:      #0f0f10;
+  --bg-sidebar:  #141416;
+  --bg-card:     #18181b;
+  --bg-hover:    #26262b;
+  --bg-player:   #141416;
+  --bg-glass:    rgba(15,15,16,0.95);
+
+  --accent:      #b4bcc8;
+  --accent-dim:  rgba(156,163,175,0.08);
+  --accent-glow: rgba(156,163,175,0.15);
+
+  --text-primary:   #e5e7eb;
+  --text-secondary: #9ca3af;
+  --text-muted:     #52525b;
+
+  --border:          #26262b;
+  --border-subtle:   #18181b;
+  --border-dropdown: #2e2e34;
+  --shadow-dropdown: rgba(0,0,0,0.9);
+
+  --positive: #22c55e;
+  --warning:  #eab308;
+  --danger:   #ef4444;
+}
+

src/styles/themes/carbonfox.css

@@ -0,0 +1,53 @@
+/* ─── Carbonfox ─── */
+[data-theme='carbonfox'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23f2f4f8%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  --ctp-crust: #121212;
+  --ctp-mantle: #121212;
+  --ctp-base: #161616;
+  --ctp-surface0: #1c1c1c;
+  --ctp-surface1: #222222;
+  --ctp-surface2: #2e2e2e;
+  --ctp-overlay0: #525253;
+  --ctp-overlay1: #525253;
+  --ctp-overlay2: #c1c7cd;
+  --ctp-text: #f2f4f8;
+  --ctp-subtext1: #dde1e6;
+  --ctp-subtext0: #c1c7cd;
+  --ctp-mauve: #be95ff;
+  --ctp-lavender: #78a9ff;
+  --ctp-pink: #ff7eb6;
+  --ctp-flamingo: #ee5396;
+  --ctp-rosewater: #ff7eb6;
+  --ctp-blue: #78a9ff;
+  --ctp-sapphire: #33b1ff;
+  --ctp-sky: #33b1ff;
+  --ctp-teal: #3ddbd9;
+  --ctp-green: #25be6a;
+  --ctp-yellow: #08bdba;
+  --ctp-peach: #3ddbd9;
+  --ctp-maroon: #ee5396;
+  --ctp-red: #ee5396;
+
+  --bg-app: #161616;
+  --bg-sidebar: #121212;
+  --bg-card: #1c1c1c;
+  --bg-hover: #222222;
+  --bg-player: #121212;
+  --bg-glass: rgba(22, 22, 22, 0.82);
+  --accent: #be95ff;
+  --accent-dim: rgba(190, 149, 255, 0.15);
+  --accent-glow: rgba(190, 149, 255, 0.3);
+  --text-primary: #f2f4f8;
+  --text-secondary: #dde1e6;
+  --text-muted: #878d96;
+  --border: #222222;
+  --border-subtle: #1c1c1c;
+  --border-dropdown: #2e2e2e;
+  --shadow-dropdown: rgba(0, 0, 0, 0.7);
+  --positive: #25be6a;
+  --warning: #08bdba;
+  --danger: #ee5396;
+}
+

src/styles/themes/card.css

@@ -0,0 +1,13 @@
+/* ─── Card ─── */
+.card {
+  background: var(--bg-card);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  box-shadow: inset 0 0 0 1px var(--border-subtle);
+  transition: transform var(--transition-base), box-shadow var(--transition-base);
+}
+
+.card:hover {
+  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-md);
+}
+

src/styles/themes/catppuccin-frapp-variables.css

@@ -0,0 +1,50 @@
+/* ─── Catppuccin Frappé Variables ─── */
+[data-theme='frappe'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b5bfe2%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+  --ctp-rosewater: #f2d5cf;
+  --ctp-flamingo: #eebebe;
+  --ctp-pink: #f4b8e4;
+  --ctp-mauve: #ca9ee6;
+  --ctp-red: #e78284;
+  --ctp-maroon: #ea999c;
+  --ctp-peach: #ef9f76;
+  --ctp-yellow: #e5c890;
+  --ctp-green: #a6d189;
+  --ctp-teal: #81c8be;
+  --ctp-sky: #99d1db;
+  --ctp-sapphire: #85c1dc;
+  --ctp-blue: #8caaee;
+  --ctp-lavender: #babbf1;
+  --ctp-text: #c6d0f5;
+  --ctp-subtext1: #b5bfe2;
+  --ctp-subtext0: #a5adce;
+  --ctp-overlay2: #949cbb;
+  --ctp-overlay1: #838ba7;
+  --ctp-overlay0: #737994;
+  --ctp-surface2: #626880;
+  --ctp-surface1: #51576d;
+  --ctp-surface0: #414559;
+  --ctp-base: #303446;
+  --ctp-mantle: #292c3c;
+  --ctp-crust: #232634;
+
+  --bg-app: var(--ctp-base);
+  --bg-sidebar: var(--ctp-mantle);
+  --bg-card: var(--ctp-surface0);
+  --bg-hover: var(--ctp-surface1);
+  --bg-player: var(--ctp-crust);
+  --bg-glass: rgba(48, 52, 70, 0.75);
+  --accent: var(--ctp-mauve);
+  --accent-dim: rgba(202, 158, 230, 0.15);
+  --accent-glow: rgba(202, 158, 230, 0.3);
+  --text-primary: var(--ctp-text);
+  --text-secondary: var(--ctp-subtext1);
+  --text-muted: var(--ctp-subtext0);
+  --border: var(--ctp-surface1);
+  --border-subtle: var(--ctp-surface0);
+  --positive: var(--ctp-green);
+  --warning: var(--ctp-yellow);
+  --danger: var(--ctp-red);
+}
+

src/styles/themes/catppuccin-latte-variables-light-theme.css

@@ -0,0 +1,51 @@
+/* ─── Catppuccin Latte Variables (Light Theme) ─── */
+[data-theme='latte'] {
+  color-scheme: light;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235c5f77%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+  --ctp-rosewater: #dc8a78;
+  --ctp-flamingo: #dd7878;
+  --ctp-pink: #ea76cb;
+  --ctp-mauve: #8839ef;
+  --ctp-red: #d20f39;
+  --ctp-maroon: #e64553;
+  --ctp-peach: #fe640b;
+  --ctp-yellow: #df8e1d;
+  --ctp-green: #40a02b;
+  --ctp-teal: #179299;
+  --ctp-sky: #04a5e5;
+  --ctp-sapphire: #209fb5;
+  --ctp-blue: #1e66f5;
+  --ctp-lavender: #7287fd;
+  --ctp-text: #4c4f69;
+  --ctp-subtext1: #5c5f77;
+  --ctp-subtext0: #6c6f85;
+  --ctp-overlay2: #7c7f93;
+  --ctp-overlay1: #8c8fa1;
+  --ctp-overlay0: #9ca0b0;
+  --ctp-surface2: #acb0be;
+  --ctp-surface1: #bcc0cc;
+  --ctp-surface0: #ccd0da;
+  --ctp-base: #eff1f5;
+  --ctp-mantle: #e6e9ef;
+  --ctp-crust: #dce0e8;
+
+  /* Semantic tokens */
+  --bg-app: var(--ctp-base);
+  --bg-sidebar: var(--ctp-mantle);
+  --bg-card: var(--ctp-surface0);
+  --bg-hover: var(--ctp-surface1);
+  --bg-player: var(--ctp-crust);
+  --bg-glass: rgba(239, 241, 245, 0.75);
+  --accent: var(--ctp-mauve);
+  --accent-dim: rgba(136, 57, 239, 0.15);
+  --accent-glow: rgba(136, 57, 239, 0.3);
+  --text-primary: var(--ctp-text);
+  --text-secondary: var(--ctp-subtext1);
+  --text-muted: var(--ctp-subtext0);
+  --border: var(--ctp-surface1);
+  --border-subtle: var(--ctp-surface0);
+  --positive: var(--ctp-green);
+  --warning: var(--ctp-yellow);
+  --danger: var(--ctp-red);
+}
+

src/styles/themes/catppuccin-macchiato-variables.css

@@ -0,0 +1,50 @@
+/* ─── Catppuccin Macchiato Variables ─── */
+[data-theme='macchiato'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b8c0e0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+  --ctp-rosewater: #f4dbd6;
+  --ctp-flamingo: #f0c6c6;
+  --ctp-pink: #f5bde6;
+  --ctp-mauve: #c6a0f6;
+  --ctp-red: #ed8796;
+  --ctp-maroon: #ee99a0;
+  --ctp-peach: #f5a97f;
+  --ctp-yellow: #eed49f;
+  --ctp-green: #a6da95;
+  --ctp-teal: #8bd5ca;
+  --ctp-sky: #91d7e3;
+  --ctp-sapphire: #7dc4e4;
+  --ctp-blue: #8aadf4;
+  --ctp-lavender: #b7bdf8;
+  --ctp-text: #cad3f5;
+  --ctp-subtext1: #b8c0e0;
+  --ctp-subtext0: #a5adcb;
+  --ctp-overlay2: #939ab7;
+  --ctp-overlay1: #8087a2;
+  --ctp-overlay0: #6e738d;
+  --ctp-surface2: #5b6078;
+  --ctp-surface1: #494d64;
+  --ctp-surface0: #363a4f;
+  --ctp-base: #24273a;
+  --ctp-mantle: #1e2030;
+  --ctp-crust: #181926;
+
+  --bg-app: var(--ctp-base);
+  --bg-sidebar: var(--ctp-mantle);
+  --bg-card: var(--ctp-surface0);
+  --bg-hover: var(--ctp-surface1);
+  --bg-player: var(--ctp-crust);
+  --bg-glass: rgba(36, 39, 58, 0.75);
+  --accent: var(--ctp-mauve);
+  --accent-dim: rgba(198, 160, 246, 0.15);
+  --accent-glow: rgba(198, 160, 246, 0.3);
+  --text-primary: var(--ctp-text);
+  --text-secondary: var(--ctp-subtext1);
+  --text-muted: var(--ctp-subtext0);
+  --border: var(--ctp-surface1);
+  --border-subtle: var(--ctp-surface0);
+  --positive: var(--ctp-green);
+  --warning: var(--ctp-yellow);
+  --danger: var(--ctp-red);
+}
+

src/styles/themes/catppuccin-mocha-variables.css

@@ -0,0 +1,52 @@
+/* ─── Catppuccin Mocha Variables ─── */
+:root,
+[data-theme='mocha'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23bac2de%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+  --ctp-rosewater: #f5e0dc;
+  --ctp-flamingo: #f2cdcd;
+  --ctp-pink: #f5c2e7;
+  --ctp-mauve: #cba6f7;
+  --ctp-red: #f38ba8;
+  --ctp-maroon: #eba0ac;
+  --ctp-peach: #fab387;
+  --ctp-yellow: #f9e2af;
+  --ctp-green: #a6e3a1;
+  --ctp-teal: #94e2d5;
+  --ctp-sky: #89dceb;
+  --ctp-sapphire: #74c7ec;
+  --ctp-blue: #89b4fa;
+  --ctp-lavender: #b4befe;
+  --ctp-text: #cdd6f4;
+  --ctp-subtext1: #bac2de;
+  --ctp-subtext0: #a6adc8;
+  --ctp-overlay2: #9399b2;
+  --ctp-overlay1: #7f849c;
+  --ctp-overlay0: #6c7086;
+  --ctp-surface2: #585b70;
+  --ctp-surface1: #45475a;
+  --ctp-surface0: #313244;
+  --ctp-base: #1e1e2e;
+  --ctp-mantle: #181825;
+  --ctp-crust: #11111b;
+
+  /* Semantic tokens */
+  --bg-app: var(--ctp-base);
+  --bg-sidebar: var(--ctp-mantle);
+  --bg-card: var(--ctp-surface0);
+  --bg-hover: var(--ctp-surface1);
+  --bg-player: var(--ctp-crust);
+  --bg-glass: rgba(30, 30, 46, 0.75);
+  --accent: var(--ctp-mauve);
+  --accent-dim: rgba(203, 166, 247, 0.15);
+  --accent-glow: rgba(203, 166, 247, 0.3);
+  --text-primary: var(--ctp-text);
+  --text-secondary: var(--ctp-subtext1);
+  --text-muted: var(--ctp-subtext0);
+  --border: var(--ctp-surface1);
+  --border-subtle: var(--ctp-surface0);
+  --positive: var(--ctp-green);
+  --warning: var(--ctp-yellow);
+  --danger: var(--ctp-red);
+}
+

src/styles/themes/classic-winamp-winamp-2-x-base-skin.css

@@ -0,0 +1,67 @@
+/* ─── Classic Winamp — Winamp 2.x Base Skin ─── */
+[data-theme='wnamp'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23d4d4dc%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  /* ── Palette ──
+     Contrast audit (vs. --bg-app #2b2b3a, L≈0.025):
+       text-primary   9.6:1  AAA ✓ (raised from 8.5:1)
+       text-secondary 5.5:1  AA  ✓
+       text-muted     4.7:1  AA  ✓ (was 5.6:1 but BRIGHTER than secondary — hierarchy fixed)
+       accent (gold)  8.4:1  AAA ✓
+       positive       6.6:1  AA+ ✓
+       danger         4.9:1  AA  ✓ (raised from 2.46:1 — was below AA)
+     Column grip + border-subtle raised from 1.0:1 / 1.19:1 — see overrides.
+  */
+  --ctp-crust: #000000;
+  --ctp-mantle: #1e1e28;
+  --ctp-base: #2b2b3a;
+  --ctp-surface0: #353545;
+  --ctp-surface1: #4a4a60;         /* raised from #404055 for visible borders/grips */
+  --ctp-surface2: #5a5a78;
+  --ctp-overlay0: #7676a0;         /* raised from #5a5a75 */
+  --ctp-overlay1: #8a8a96;
+  --ctp-overlay2: #a4a4b4;
+  --ctp-text: #d4d4dc;             /* raised from #c8c8d0 for 9.6:1 */
+  --ctp-subtext1: #b4b4c0;
+  --ctp-subtext0: #8a8a96;
+  /* Winamp iconic LCD green + gold accent */
+  --ctp-mauve: #d4cc46;
+  --ctp-lavender: #e0d860;
+  --ctp-green: #00ff00;
+  --ctp-teal: #00cc88;
+  --ctp-sky: #5ab8e0;
+  --ctp-blue: #4898d0;
+  --ctp-sapphire: #3878b8;
+  --ctp-pink: #c06888;
+  --ctp-flamingo: #b85858;
+  --ctp-rosewater: #c88080;
+  --ctp-yellow: #e8c050;
+  --ctp-peach: #d08840;
+  --ctp-maroon: #ff6b6b;           /* raised from #a03030 — AA compliant */
+  --ctp-red: #ff6b6b;              /* raised from #c03030 — 4.9:1 AA ✓ */
+
+  /* ── Semantic tokens ── */
+  --bg-app: #2b2b3a;
+  --bg-sidebar: #1e1e28;
+  --bg-card: #353545;
+  --bg-hover: #484860;             /* raised from #404055 — 1.6:1 vs card, spürbarer Hover */
+  --bg-player: #000000;
+  --bg-glass: rgba(43, 43, 58, 0.92);
+  --accent: #d4cc46;
+  --accent-dim: rgba(212, 204, 70, 0.18);
+  --accent-glow: rgba(212, 204, 70, 0.40);
+  --volume-accent: #de9b35;
+  --text-primary: #d4d4dc;
+  --text-secondary: #b4b4c0;       /* raised from #a0a0ac for better AA margin */
+  --text-muted: #949ab0;           /* 4.7:1 AA ✓, now DIMMER than secondary (hierarchy fixed) */
+  --border: #7676a0;               /* 2.7:1 vs bg-card — visible (was 1.79:1) */
+  --border-subtle: #484860;        /* 1.5:1 — was #353545 identical with bg-card (1.0:1!) */
+  --positive: #00cc66;
+  --warning: #d4cc46;
+  --danger: #ff6b6b;               /* 4.9:1 AA ✓, was #c03030 (2.46:1 FAIL) */
+  --waveform-played:   #d4cc46;
+  --waveform-buffered: #8a8a96;
+  --waveform-unplayed: #4a4a60;
+}
+

src/styles/themes/community-themes.css

@@ -0,0 +1,2 @@
+/* ─── COMMUNITY THEMES ─── */
+

src/styles/themes/copper-oxide.css

@@ -0,0 +1,68 @@
+/* ─── Copper Oxide ─── */
+[data-theme='copper-oxide'] {
+  color-scheme: dark;
+
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2345b8b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+
+  /* Backgrounds */
+  --ctp-crust:    #080f0e;
+  --ctp-mantle:   #0c1614;
+  --ctp-base:     #101a18;
+  --ctp-surface0: #131f1c;
+  --ctp-surface1: #1a2e2b;
+  --ctp-surface2: #203c38;
+
+  /* Overlays */
+  --ctp-overlay0: #256860;
+  --ctp-overlay1: #358880;
+  --ctp-overlay2: #45a89a;
+
+  /* Text */
+  --ctp-text:     #d8f0ee;
+  --ctp-subtext1: #a0d8d4;
+  --ctp-subtext0: #68b8b0;
+
+  /* Teal accent */
+  --ctp-teal:      #4ecdc4;
+  --ctp-sky:       #4ecdc4;
+  --ctp-sapphire:  #35a09a;
+  --ctp-blue:      #207870;
+  --ctp-lavender:  #4ecdc4;
+  --ctp-mauve:     #35a09a;
+  --ctp-pink:      #207870;
+  --ctp-flamingo:  #4ecdc4;
+  --ctp-rosewater: #35a09a;
+
+  /* Semantic */
+  --ctp-red:     #ff4444;
+  --ctp-maroon:  #ff8844;
+  --ctp-peach:   #ff8844;
+  --ctp-yellow:  #ffcc44;
+  --ctp-green:   #44ff88;
+
+  /* UI tokens */
+  --bg-app:      #101a18;
+  --bg-sidebar:  #0c1614;
+  --bg-card:     #131f1c;
+  --bg-hover:    #1a2e2b;
+  --bg-player:   #0c1614;
+  --bg-glass:    rgba(16, 26, 24, 0.95);
+
+  --accent:      #45b8b0;
+  --accent-dim:  rgba(78, 205, 196, 0.07);
+  --accent-glow: rgba(78, 205, 196, 0.14);
+
+  --text-primary:   #d8f0ee;
+  --text-secondary: #68b8b0;
+  --text-muted:     #256860;
+
+  --border:          #1a2e2b;
+  --border-subtle:   #131f1c;
+  --border-dropdown: #203c38;
+  --shadow-dropdown: rgba(0, 0, 0, 0.90);
+
+  --positive: #44ff88;
+  --warning:  #ffcc44;
+  --danger:   #ff4444;
+}
+

src/styles/themes/cupertino-beats.css

@@ -0,0 +1,97 @@
+/* ─── Cupertino Beats ─── */
+[data-theme='cupertino-beats'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23a1a1a1%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  --ctp-crust: #000000;
+  --ctp-mantle: #121212;
+  --ctp-base: #1c1c1e;
+  --ctp-surface0: #2c2c2e;
+  --ctp-surface1: #3a3a3c;
+  --ctp-surface2: #48484a;
+  --ctp-overlay0: #636366;
+  --ctp-overlay1: #8e8e93;
+  --ctp-overlay2: #aeaeb2;
+  --ctp-text: #ffffff;
+  --ctp-subtext1: #ebebf599;
+  --ctp-subtext0: #ebebf560;
+
+  --ctp-mauve: #fa243c;
+  --ctp-lavender: #ff5e71;
+  --ctp-green: #34c759;
+  --ctp-teal: #30b0c7;
+  --ctp-sky: #5ac8fa;
+  --ctp-blue: #007aff;
+  --ctp-sapphire: #0051d5;
+  --ctp-pink: #ff2d55;
+  --ctp-flamingo: #ff3b30;
+  --ctp-rosewater: #ff9f0a;
+  --ctp-yellow: #ffcc00;
+  --ctp-peach: #ff9500;
+  --ctp-maroon: #af52de;
+  --ctp-red: #ff3b30;
+
+  --bg-app: #1c1c1e;
+  --bg-sidebar: rgba(18, 18, 18, 0.75);
+  --bg-card: #2c2c2e;
+  --bg-hover: rgba(255, 255, 255, 0.08);
+  --bg-player: rgba(0, 0, 0, 0.85);
+  --bg-glass: rgba(28, 28, 30, 0.6);
+
+  --accent: #fa243c;
+  --accent-dim: rgba(250, 36, 60, 0.15);
+  --accent-glow: rgba(250, 36, 60, 0.3);
+  --volume-accent: #fa243c;
+
+  --text-primary: #ffffff;
+  --text-secondary: rgba(235, 235, 245, 0.6);
+  --text-muted: rgba(235, 235, 245, 0.3);
+
+  --border: rgba(255, 255, 255, 0.1);
+  --border-subtle: rgba(255, 255, 255, 0.05);
+
+  --positive: #34c759;
+  --warning: #ffcc00;
+  --danger: #ff3b30;
+
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 20px;
+  --radius-xl: 28px;
+  --radius-full: 9999px;
+
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
+  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
+
+  --transition-fast: 150ms ease;
+  --transition-med: 250ms ease;
+  --transition-slow: 350ms ease;
+
+  --sidebar-width: 220px;
+  --player-height: 88px;
+}
+
+[data-theme='cupertino-beats'] .sidebar {
+  backdrop-filter: blur(40px) saturate(180%);
+  -webkit-backdrop-filter: blur(40px) saturate(180%);
+  border-right: 1px solid var(--border);
+}
+
+[data-theme='cupertino-beats'] .player-bar {
+  backdrop-filter: blur(30px) saturate(150%);
+  -webkit-backdrop-filter: blur(30px) saturate(150%);
+  border-top: 1px solid var(--border);
+}
+
+[data-theme='cupertino-beats'] .nav-link.active {
+  background: var(--accent-dim);
+  color: var(--accent);
+  font-weight: 600;
+}
+
+[data-theme='cupertino-beats'] .nav-link.active::before {
+  width: 4px;
+  border-radius: 0 4px 4px 0;
+}
+

src/styles/themes/cyberlink-powerdvd.css

@@ -0,0 +1,259 @@
+/* ─── CyberLink PowerDVD ─── */
+/* Midnight navy-blue darkness — not flat black, but that specific cinema-hall depth */
+[data-theme='p-dvd'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235a7090%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  /* ── Palette — midnight navy spectrum ── */
+  --ctp-crust: #020306;
+  /* cinema blackout */
+  --ctp-mantle: #060810;
+  /* control deck depth */
+  --ctp-base: #0a0d18;
+  /* main chassis — navy-black */
+  --ctp-surface0: #10141f;
+  --ctp-surface1: #171c2a;
+  --ctp-surface2: #1f2535;
+  --ctp-overlay0: #2c3548;
+  --ctp-overlay1: #3c4860;
+  --ctp-overlay2: #506078;
+  --ctp-text: #a8b8d0;
+  /* blue-tinted label silver */
+  --ctp-subtext1: #7890b0;
+  --ctp-subtext0: #506080;
+  /* PowerDVD blue spectrum */
+  --ctp-mauve: #0088e8;
+  /* PowerDVD blue — primary */
+  --ctp-lavender: #00a8ff;
+  --ctp-sky: #00ccff;
+  /* glow highlight */
+  --ctp-teal: #00b8cc;
+  --ctp-blue: #0070cc;
+  --ctp-sapphire: #0055aa;
+  --ctp-green: #00cc66;
+  --ctp-yellow: #ccaa00;
+  --ctp-peach: #e07040;
+  --ctp-pink: #cc5588;
+  --ctp-flamingo: #bb4466;
+  --ctp-rosewater: #cc6666;
+  --ctp-maroon: #aa3333;
+  --ctp-red: #cc2222;
+
+  /* ── Semantic tokens ── */
+  --bg-app: #0a0d18;
+  --bg-sidebar: #060810;
+  --bg-card: #10141f;
+  --bg-hover: #171c2a;
+  --bg-player: #020306;
+  --bg-glass: rgba(10, 13, 24, 0.96);
+  --accent: #0088e8;
+  --accent-dim: rgba(0, 136, 232, 0.14);
+  --accent-glow: rgba(0, 136, 232, 0.40);
+  --text-primary: #a8b8d0;
+  --text-secondary: #6880a8;
+  --text-muted: #506080;
+  --border: #1a2030;
+  --border-subtle: #10141e;
+  --positive: #00cc66;
+  --warning: #ccaa00;
+  --danger: #cc2222;
+}
+
+/* ── App shell: very subtle navy depth gradient ── */
+[data-theme='p-dvd'] .app-shell {
+  background: linear-gradient(160deg, #0c1020 0%, #080c18 50%, #060910 100%);
+}
+
+/* ── Sidebar: darkest navy — control panel behind the disc tray ── */
+[data-theme='p-dvd'] .sidebar {
+  background: linear-gradient(180deg, #07091280 0%, #060810 40%, #050710 100%);
+  border-right: 1px solid #141824;
+  box-shadow: inset -1px 0 0 rgba(0, 136, 232, 0.08), 2px 0 12px rgba(0, 0, 0, 0.7);
+}
+
+/* Active nav: PowerDVD blue LED strip */
+[data-theme='p-dvd'] .nav-link.active {
+  color: #00a8ff;
+}
+
+[data-theme='p-dvd'] .nav-link.active::before {
+  background: #0088e8;
+  box-shadow: 0 0 8px rgba(0, 136, 232, 0.7);
+}
+
+/* ── Player bar: cinema control deck — pure black + blue accent top border ── */
+[data-theme='p-dvd'] .player-bar {
+  background: linear-gradient(180deg, #050710 0%, #020306 100%);
+  border-top: 1px solid #0a1828;
+  box-shadow:
+    inset 0 2px 0 rgba(0, 136, 232, 0.18),
+    inset 0 1px 0 rgba(0, 200, 255, 0.08),
+    0 -4px 24px rgba(0, 0, 0, 0.9);
+}
+
+/* Track name: PowerDVD blue LED display glow */
+[data-theme='p-dvd'] .player-track-name {
+  color: #00ccff;
+  text-shadow:
+    0 0 5px rgba(0, 204, 255, 0.95),
+    0 0 12px rgba(0, 136, 232, 0.70),
+    0 0 24px rgba(0, 100, 200, 0.35);
+  letter-spacing: 0.03em;
+}
+
+[data-theme='p-dvd'] .player-track-artist {
+  color: #0088e8;
+  text-shadow: 0 0 6px rgba(0, 136, 232, 0.60);
+  opacity: 1;
+}
+
+[data-theme='p-dvd'] .player-time {
+  color: #0088e8;
+  text-shadow: 0 0 5px rgba(0, 136, 232, 0.65);
+}
+
+/* ── Chrome transport buttons: silver against navy — the iconic contrast ── */
+[data-theme='p-dvd'] .player-btn,
+[data-theme='p-dvd'] .player-btn-primary {
+  background: linear-gradient(170deg, #e8e8e8 0%, #ffffff 30%, #c0c0c0 70%, #989898 100%);
+  color: #1a1a1a;
+  border: 1px solid #707070;
+  box-shadow:
+    0 3px 8px rgba(0, 0, 0, 0.8),
+    0 1px 2px rgba(0, 0, 0, 0.6),
+    inset 0 1px 0 rgba(255, 255, 255, 0.9),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
+}
+
+[data-theme='p-dvd'] .player-btn:hover,
+[data-theme='p-dvd'] .player-btn-primary:hover {
+  background: linear-gradient(170deg, #f5f5f5 0%, #ffffff 30%, #d0d0d0 70%, #aaaaaa 100%);
+  box-shadow:
+    0 4px 10px rgba(0, 0, 0, 0.8),
+    0 1px 3px rgba(0, 0, 0, 0.6),
+    inset 0 1px 0 rgba(255, 255, 255, 1),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
+    0 0 10px rgba(0, 136, 232, 0.20);
+}
+
+/* ── Regular buttons: navy panel style ── */
+[data-theme='p-dvd'] .btn {
+  background: linear-gradient(180deg, #171c2a 0%, #10141f 100%);
+  color: #a8b8d0;
+  border: 1px solid #1f2a3e;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 3px rgba(0, 0, 0, 0.6);
+}
+
+[data-theme='p-dvd'] .btn:hover {
+  background: linear-gradient(180deg, #1f2535 0%, #171c2a 100%);
+  border-color: #2a3850;
+}
+
+[data-theme='p-dvd'] .btn-primary {
+  background: linear-gradient(180deg, #00a8ff 0%, #0070cc 100%);
+  color: #ffffff;
+  border: 1px solid #0055aa;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.25),
+    0 1px 4px rgba(0, 0, 0, 0.5),
+    0 0 10px rgba(0, 136, 232, 0.35);
+}
+
+/* Active queue round buttons: white on blue */
+[data-theme='p-dvd'] .queue-round-btn.active {
+  color: #ffffff;
+}
+
+/* ── Cards / panels: navy inset ── */
+[data-theme='p-dvd'] .glass,
+[data-theme='p-dvd'] .card {
+  background: rgba(16, 20, 31, 0.90);
+  border: 1px solid #1a2030;
+  box-shadow: inset 0 1px 0 rgba(0, 136, 232, 0.04), 0 2px 8px rgba(0, 0, 0, 0.5);
+}
+
+/* ── Content header: dark navy band ── */
+[data-theme='p-dvd'] .content-header {
+  background: linear-gradient(180deg, rgba(16, 20, 31, 0.80) 0%, rgba(10, 13, 24, 0.30) 100%);
+  border-bottom: 1px solid #1a2030;
+}
+
+/* ── Hover / active states: blue LED glow ── */
+[data-theme='p-dvd'] .track-row:hover,
+[data-theme='p-dvd'] .track-row.context-active {
+  background: rgba(0, 136, 232, 0.07);
+  box-shadow: inset 3px 0 0 #0088e8;
+}
+
+[data-theme='p-dvd'] .queue-item:hover,
+[data-theme='p-dvd'] .queue-item.context-active {
+  background: rgba(0, 136, 232, 0.07);
+}
+
+[data-theme='p-dvd'] .queue-item.active {
+  background: rgba(0, 136, 232, 0.12);
+  border-left: 2px solid #0088e8;
+}
+
+[data-theme='p-dvd'] .np-queue-item.active {
+  background: rgba(0, 136, 232, 0.08);
+}
+
+[data-theme='p-dvd'] .np-queue-item-active {
+  color: #00a8ff;
+}
+
+[data-theme='p-dvd'] .np-queue-item:hover,
+[data-theme='p-dvd'] .np-queue-item.context-active {
+  background: rgba(0, 136, 232, 0.06);
+}
+
+[data-theme='p-dvd'] .np-album-track.active .np-album-track-title,
+[data-theme='p-dvd'] .np-album-track.active .np-album-track-num {
+  color: #00a8ff;
+}
+
+[data-theme='p-dvd'] .artist-row:hover {
+  background: rgba(0, 136, 232, 0.06);
+  box-shadow: inset 3px 0 0 #0088e8;
+}
+
+[data-theme='p-dvd'] .playlist-row:hover {
+  background: rgba(0, 136, 232, 0.06);
+  box-shadow: inset 3px 0 0 #0088e8;
+}
+
+[data-theme='p-dvd'] .settings-tab:hover {
+  background: rgba(0, 136, 232, 0.08);
+  color: #00a8ff;
+}
+
+[data-theme='p-dvd'] .settings-tab.active {
+  background: rgba(0, 136, 232, 0.14);
+  color: #00a8ff;
+  border-color: #0088e8;
+}
+
+[data-theme='p-dvd'] .queue-tab-btn:hover {
+  background: rgba(0, 136, 232, 0.08);
+  color: #00a8ff;
+}
+
+[data-theme='p-dvd'] .custom-select-trigger:hover {
+  background: rgba(0, 136, 232, 0.08);
+}
+
+[data-theme='p-dvd'] .custom-select-option:hover {
+  background: rgba(0, 136, 232, 0.12);
+}
+
+[data-theme='p-dvd'] .artist-ext-link:hover {
+  background: rgba(0, 136, 232, 0.10);
+  border-color: #0088e8;
+}
+
+[data-theme='p-dvd'] .connection-type,
+[data-theme='p-dvd'] .connection-server {
+  color: #4880b8;
+}
+

src/styles/themes/d-oh-matic.css

@@ -0,0 +1,81 @@
+/* ─── D'oh-matic ─── */
+[data-theme='doh-matic'] {
+  color-scheme: light;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23444444%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  --ctp-crust: #FFD90F;
+  --ctp-mantle: #BAE1FF;
+  --ctp-base: #FFFDF0;
+  --ctp-surface0: #F0F8FF;
+  --ctp-surface1: #E0EFFF;
+  --ctp-surface2: #D0E5FF;
+  --ctp-overlay0: #999999;
+  --ctp-overlay1: #777777;
+  --ctp-overlay2: #555555;
+  --ctp-text: #222222;
+  --ctp-subtext1: #444444;
+  --ctp-subtext0: #666666;
+  --ctp-mauve: #1F75FE;
+  --ctp-lavender: #4D91FF;
+  --ctp-pink: #F14E96;
+  --ctp-flamingo: #F14E96;
+  --ctp-rosewater: #FFD90F;
+  --ctp-green: #4AC948;
+  --ctp-teal: #00BFAF;
+  --ctp-sky: #4D91FF;
+  --ctp-blue: #1F75FE;
+  --ctp-sapphire: #1F75FE;
+  --ctp-yellow: #FFD90F;
+  --ctp-peach: #F26522;
+  --ctp-maroon: #CC0000;
+  --ctp-red: #ED1C24;
+
+  --bg-app: #FFFDF0;
+  --bg-sidebar: #BAE1FF;
+  --bg-card: #FFFFFF;
+  --bg-hover: rgba(31, 117, 254, 0.1);
+  --bg-player: #FFD90F;
+  --bg-glass: rgba(255, 253, 240, 0.8);
+  --accent: #1F75FE;
+  --accent-dim: rgba(31, 117, 254, 0.15);
+  --accent-glow: rgba(31, 117, 254, 0.3);
+  --text-primary: #222222;
+  --text-secondary: #444444;
+  --text-muted: #555555;
+  --border: #222222;
+  --border-subtle: rgba(0, 0, 0, 0.1);
+  --border-dropdown: #cccccc;
+  --shadow-dropdown: rgba(0, 0, 0, 0.15);
+  --positive: #4AC948;
+  --warning: #F26522;
+  --danger: #ED1C24;
+  --radius-md: 12px;
+}
+
+[data-theme='doh-matic'] .sidebar {
+  border-right: 2px solid #222222;
+}
+
+[data-theme='doh-matic'] .player-bar {
+  border-top: 3px solid #222222;
+}
+
+[data-theme='doh-matic'] .player-track-name,
+[data-theme='doh-matic'] .player-track-artist,
+[data-theme='doh-matic'] .player-time {
+  color: #222222 !important;
+}
+
+[data-theme='doh-matic'] .player-btn {
+  color: #222222;
+}
+
+[data-theme='doh-matic'] .btn-primary:hover {
+  background-color: var(--ctp-pink);
+  border-color: #222222;
+}
+
+[data-theme='doh-matic'] .btn-surface:hover {
+  background: #D0E5FF;
+}
+

src/styles/themes/dark-side-of-the-moon-inspired-pink-floyd.css

@@ -0,0 +1,286 @@
+/* ─── Dark Side of the Moon (inspired) — Pink Floyd ─── */
+/* Pure void-black + prism spectrum. No colour except the rainbow.
+   Accent: spectrum cyan. Spectrum gradient as player-bar top border.
+   Track name: white (the input light beam). Performance: no patterns, no animations. */
+[data-theme='dark-side-of-the-moon'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%239B30FF%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  /* ── Palette — void black + prism spectrum ── */
+  --ctp-crust: #000000;
+  --ctp-mantle: #010101;
+  --ctp-base: #050505;
+  --ctp-surface0: #0A0A0A;
+  --ctp-surface1: #111111;
+  --ctp-surface2: #1A1A1A;
+  --ctp-overlay0: #333333;
+  --ctp-overlay1: #4A4A4A;
+  --ctp-overlay2: #686868;
+  --ctp-text: #F0F0F0;
+  --ctp-subtext1: #C8C8C8;
+  --ctp-subtext0: #A0A0A0;
+  --ctp-mauve: #9B30FF;
+  /* spectrum violet — primary accent */
+  --ctp-lavender: #7B00FF;
+  /* spectrum violet */
+  --ctp-pink: #FF2400;
+  /* spectrum red */
+  --ctp-flamingo: #FF7700;
+  /* spectrum orange */
+  --ctp-rosewater: #FFFFFF;
+  /* the input light beam */
+  --ctp-green: #72FF00;
+  /* spectrum green */
+  --ctp-teal: #00C8FF;
+  --ctp-sky: #9B30FF;
+  --ctp-blue: #0040FF;
+  /* spectrum blue */
+  --ctp-sapphire: #0060DD;
+  --ctp-yellow: #FFE600;
+  /* spectrum yellow */
+  --ctp-peach: #FF7700;
+  --ctp-maroon: #CC1800;
+  --ctp-red: #FF2400;
+
+  --bg-app: #050505;
+  --bg-sidebar: #020202;
+  --bg-card: #0D0D0D;
+  --bg-hover: #141414;
+  --bg-player: #010101;
+  --bg-glass: rgba(5, 5, 5, 0.96);
+  --accent: #9B30FF;
+  /* spectrum violet */
+  --accent-dim: rgba(155, 48, 255, 0.10);
+  --accent-glow: rgba(155, 48, 255, 0.28);
+  --text-primary: #F0F0F0;
+  --text-secondary: #A0A0A0;
+  --text-muted: #555555;
+  --border: rgba(255, 255, 255, 0.07);
+  --border-subtle: rgba(255, 255, 255, 0.04);
+  --border-dropdown: rgba(155, 48, 255, 0.22);
+  --shadow-dropdown: rgba(0, 0, 0, 0.99);
+  --positive: #72FF00;
+  --warning: #FFE600;
+  --danger: #FF2400;
+  --radius-sm: 2px;
+  --radius-md: 4px;
+  --radius-lg: 6px;
+
+  /* Waveform — cyan played, dark unplayed */
+  --waveform-played: #9B30FF;
+  --waveform-buffered: rgba(255, 255, 255, 0.07);
+  --waveform-unplayed: rgba(255, 255, 255, 0.04);
+
+  /* Logo — orange → cyan (the spectrum itself) */
+  --logo-color-start: #FF7700;
+  --logo-color-end: #9B30FF;
+}
+
+/* Player bar — void black, spectrum rainbow top border via ::before */
+[data-theme='dark-side-of-the-moon'] .player-bar {
+  background: #010101;
+  border-top: none;
+  position: relative;
+  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.04);
+}
+
+[data-theme='dark-side-of-the-moon'] .player-bar::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(90deg,
+      #FF2400 0%,
+      #FF7700 17%,
+      #FFE600 33%,
+      #72FF00 50%,
+      #00C8FF 67%,
+      #0040FF 83%,
+      #7B00FF 100%);
+}
+
+/* Track name — the white input light beam */
+[data-theme='dark-side-of-the-moon'] .player-track-name {
+  color: #FFFFFF;
+}
+
+/* Artist name — neutral dim */
+[data-theme='dark-side-of-the-moon'] .player-artist-name {
+  color: #888888;
+}
+
+/* Sidebar — pure void */
+[data-theme='dark-side-of-the-moon'] .sidebar {
+  background: #020202;
+  border-right: 1px solid rgba(255, 255, 255, 0.04);
+}
+
+[data-theme='dark-side-of-the-moon'] .nav-link.active {
+  background: rgba(0, 229, 255, 0.08);
+  border-left: 3px solid #00E5FF;
+  color: #00E5FF;
+}
+
+[data-theme='dark-side-of-the-moon'] .nav-link:hover:not(.active) {
+  background: rgba(255, 255, 255, 0.04);
+  border-left: 3px solid rgba(0, 229, 255, 0.30);
+  color: #F0F0F0;
+}
+
+/* Cards */
+[data-theme='dark-side-of-the-moon'] .album-card,
+[data-theme='dark-side-of-the-moon'] .artist-card {
+  background: #0D0D0D;
+}
+
+[data-theme='dark-side-of-the-moon'] .album-card:hover,
+[data-theme='dark-side-of-the-moon'] .artist-card:hover {
+  box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.40), 0 4px 20px rgba(0, 229, 255, 0.08);
+}
+
+/* Track / queue rows */
+[data-theme='dark-side-of-the-moon'] .track-row:hover,
+[data-theme='dark-side-of-the-moon'] .queue-item:hover {
+  background: #141414;
+  box-shadow: inset 2px 0 0 #00E5FF;
+}
+
+/* Buttons — flat cyan, no gradient */
+[data-theme='dark-side-of-the-moon'] .player-btn-primary {
+  background: #00E5FF;
+  color: #010101;
+  box-shadow: none;
+  border: none;
+}
+
+[data-theme='dark-side-of-the-moon'] .player-btn-primary:hover {
+  background: #33EEFF;
+  box-shadow: 0 0 16px rgba(0, 229, 255, 0.40);
+}
+
+[data-theme='dark-side-of-the-moon'] .btn-primary {
+  background: #00E5FF;
+  color: #010101;
+  border: none;
+}
+
+[data-theme='dark-side-of-the-moon'] .btn-primary:hover {
+  background: #33EEFF;
+}
+
+[data-theme='dark-side-of-the-moon'] .hero-play-btn {
+  background: #00E5FF;
+  color: #010101;
+  border: none;
+  box-shadow: 0 2px 16px rgba(0, 229, 255, 0.30);
+}
+
+[data-theme='dark-side-of-the-moon'] .hero-play-btn:hover {
+  background: #33EEFF;
+  box-shadow: 0 4px 26px rgba(0, 229, 255, 0.50);
+  transform: scale(1.02);
+}
+
+[data-theme='dark-side-of-the-moon'] .album-card-details-btn {
+  background: #00E5FF;
+  color: #010101;
+  border: none;
+  box-shadow: 0 2px 10px rgba(0, 229, 255, 0.25);
+}
+
+/* Badge */
+[data-theme='dark-side-of-the-moon'] .badge,
+[data-theme='dark-side-of-the-moon'] .album-detail-badge {
+  background: #00E5FF;
+  color: #010101;
+}
+
+/* Settings + queue tabs */
+[data-theme='dark-side-of-the-moon'] .settings-tab:hover {
+  background: rgba(155, 48, 255, 0.07);
+  color: #9B30FF;
+}
+
+[data-theme='dark-side-of-the-moon'] .settings-tab.active {
+  background: rgba(155, 48, 255, 0.12);
+  color: #9B30FF;
+  border-color: #9B30FF;
+}
+
+[data-theme='dark-side-of-the-moon'] .queue-tab-btn:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+[data-theme='dark-side-of-the-moon'] .queue-tab-btn.active {
+  color: #9B30FF;
+}
+
+[data-theme='dark-side-of-the-moon'] .queue-round-btn.active {
+  color: #010101;
+}
+
+/* Misc interactive */
+[data-theme='dark-side-of-the-moon'] .custom-select-trigger:hover {
+  background: #141414;
+}
+
+[data-theme='dark-side-of-the-moon'] .custom-select-option:hover {
+  background: rgba(155, 48, 255, 0.08);
+}
+
+[data-theme='dark-side-of-the-moon'] .artist-row:hover {
+  background: rgba(155, 48, 255, 0.05);
+  box-shadow: inset 3px 0 0 #9B30FF;
+}
+
+[data-theme='dark-side-of-the-moon'] .playlist-row:hover {
+  background: rgba(155, 48, 255, 0.05);
+  box-shadow: inset 3px 0 0 #9B30FF;
+}
+
+[data-theme='dark-side-of-the-moon'] .artist-ext-link:hover {
+  background: rgba(155, 48, 255, 0.07);
+  border-color: #9B30FF;
+}
+
+/* Album detail header — year/genre/info too dark on near-black bg, brighten */
+[data-theme='dark-side-of-the-moon'] .album-detail-info {
+  color: #888888;
+}
+
+/* np-album-track */
+[data-theme='dark-side-of-the-moon'] .np-album-track.active .np-album-track-title,
+[data-theme='dark-side-of-the-moon'] .np-album-track.active .np-album-track-num {
+  color: #9B30FF;
+}
+
+/* Scrollbar — minimal, cyan thumb */
+[data-theme='dark-side-of-the-moon'] ::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+[data-theme='dark-side-of-the-moon'] ::-webkit-scrollbar-track {
+  background: #020202;
+}
+
+[data-theme='dark-side-of-the-moon'] ::-webkit-scrollbar-thumb {
+  background: rgba(155, 48, 255, 0.25);
+  border-radius: 2px;
+}
+
+[data-theme='dark-side-of-the-moon'] ::-webkit-scrollbar-thumb:hover {
+  background: #9B30FF;
+}
+
+/* Connection indicators */
+[data-theme='dark-side-of-the-moon'] .connection-type {
+  color: #999999;
+}
+
+[data-theme='dark-side-of-the-moon'] .connection-server {
+  color: #777777;
+}
+

src/styles/themes/data-theme-aqua-quartz.css

@@ -0,0 +1,265 @@
+/* ─────────────────────────────────────────── */
+
+[data-theme='aqua-quartz'] {
+  color-scheme: light;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23666666%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  --ctp-crust: #b0b8c8;
+  --ctp-mantle: #c8d0e0;
+  --ctp-base: #e8e8e8;
+  --ctp-surface0: #f4f4f4;
+  --ctp-surface1: #ececec;
+  --ctp-surface2: #e0e0e0;
+  --ctp-overlay0: #888888;
+  --ctp-overlay1: #666666;
+  --ctp-overlay2: #444444;
+  --ctp-text: #111111;
+  --ctp-subtext1: #333333;
+  --ctp-subtext0: #555555;
+
+  --ctp-mauve: #3165c4;
+  --ctp-lavender: #6699dd;
+  --ctp-green: #28c941;
+  --ctp-teal: #17a2b8;
+  --ctp-sky: #5ac8fa;
+  --ctp-blue: #2060c0;
+  --ctp-sapphire: #1a4fa0;
+  --ctp-pink: #ff2d55;
+  --ctp-flamingo: #ff3b30;
+  --ctp-rosewater: #ffcc00;
+  --ctp-yellow: #ffcc00;
+  --ctp-peach: #ff9500;
+  --ctp-maroon: #af52de;
+  --ctp-red: #ff3b30;
+
+  /* Aluminium app bg, blue sidebar token (overridden below) */
+  --bg-app: #e8e8e8;
+  --bg-sidebar: #5a7ab8;
+  --bg-card: #f4f4f4;
+  --bg-hover: rgba(49, 101, 196, 0.12);
+  --bg-player: #c0c0c0;
+  --bg-glass: rgba(232, 232, 232, 0.85);
+
+  --accent: #3165c4;
+  --accent-dim: rgba(49, 101, 196, 0.15);
+  --accent-glow: rgba(49, 101, 196, 0.45);
+  --volume-accent: #3165c4;
+
+  --text-primary: #111111;
+  --text-secondary: #333333;
+  --text-muted: #777777;
+
+  --border: #a0a0a0;
+  --border-subtle: #cccccc;
+
+  --radius-sm: 4px;
+  --radius-md: 10px;
+  --radius-lg: 16px;
+  --radius-xl: 20px;
+  --radius-full: 999px;
+}
+
+/* Aluminium pinstripe background */
+[data-theme='aqua-quartz'] .app-shell {
+  background: #e8e8e8;
+}
+
+/* Iconic Aqua blue Source List sidebar */
+[data-theme='aqua-quartz'] .sidebar {
+  background: linear-gradient(to bottom, #7090c8 0%, #5a78b8 35%, #4a68a8 70%, #4060a0 100%);
+  border-right: 1px solid #3a5590;
+}
+
+/* White text/icons in sidebar */
+[data-theme='aqua-quartz'] .sidebar,
+[data-theme='aqua-quartz'] .nav-link,
+[data-theme='aqua-quartz'] .sidebar-logo-text,
+[data-theme='aqua-quartz'] .sidebar-section-label,
+[data-theme='aqua-quartz'] .nav-section-label {
+  color: rgba(255, 255, 255, 0.9) !important;
+}
+
+[data-theme='aqua-quartz'] .nav-link {
+  color: rgba(255, 255, 255, 0.85) !important;
+}
+
+[data-theme='aqua-quartz'] .nav-link:hover {
+  background: rgba(255, 255, 255, 0.15) !important;
+  color: #ffffff !important;
+}
+
+/* Active nav: white pill with blue-tinted text */
+[data-theme='aqua-quartz'] .nav-link.active {
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(240, 245, 255, 0.9)) !important;
+  color: #1a4a9c !important;
+  border-radius: var(--radius-full) !important;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.9);
+}
+
+[data-theme='aqua-quartz'] .nav-link.active svg {
+  color: #1a4a9c !important;
+}
+
+/* Brushed aluminum player bar */
+[data-theme='aqua-quartz'] .player-bar {
+  background: linear-gradient(to bottom,
+      #d8d8d8 0%,
+      #d0d0d0 15%,
+      #c0c0c0 50%,
+      #b4b4b4 85%,
+      #acacac 100%);
+  border-top: 1px solid #909090;
+  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.6) inset;
+}
+
+[data-theme='aqua-quartz'] .player-track-name,
+[data-theme='aqua-quartz'] .player-track-artist,
+[data-theme='aqua-quartz'] .player-time {
+  color: #111111 !important;
+}
+
+/* All buttons get rounded pill shape */
+[data-theme='aqua-quartz'] .btn {
+  border-radius: var(--radius-full) !important;
+}
+
+/* Aluminium jelly — secondary/surface/ghost buttons */
+[data-theme='aqua-quartz'] .btn-surface,
+[data-theme='aqua-quartz'] .btn-ghost {
+  background: linear-gradient(to bottom,
+      rgba(255, 255, 255, 0.95) 0%,
+      #ececec 20%,
+      #d4d4d4 48%,
+      #c4c4c4 52%,
+      #d0d0d0 80%,
+      #e0e0e0 100%) !important;
+  border: 1px solid #909090 !important;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.85);
+  color: #111111 !important;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+
+[data-theme='aqua-quartz'] .btn-surface:hover,
+[data-theme='aqua-quartz'] .btn-ghost:hover {
+  filter: brightness(1.05);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.85);
+  background: linear-gradient(to bottom,
+      rgba(255, 255, 255, 0.95) 0%,
+      #f0f0f0 20%,
+      #dadada 48%,
+      #cacaca 52%,
+      #d6d6d6 80%,
+      #e4e4e4 100%) !important;
+}
+
+/* Authentic Aqua blue jelly — primary buttons */
+[data-theme='aqua-quartz'] .btn-primary,
+[data-theme='aqua-quartz'] .player-btn-primary {
+  background: linear-gradient(to bottom,
+      rgba(255, 255, 255, 0.95) 0%,
+      rgba(160, 195, 255, 0.9) 20%,
+      #3165c4 48%,
+      #1a4aaa 52%,
+      #2555bb 75%,
+      #4a7ad4 100%) !important;
+  border: 1px solid #1040a0 !important;
+  border-radius: var(--radius-full) !important;
+  box-shadow: 0 2px 8px rgba(49, 101, 196, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.7);
+  color: white !important;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
+}
+
+[data-theme='aqua-quartz'] .btn-primary:hover,
+[data-theme='aqua-quartz'] .player-btn-primary:hover {
+  filter: brightness(1.08);
+  box-shadow: 0 3px 12px rgba(49, 101, 196, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.7);
+}
+
+/* Aqua progress/seek track + fill */
+[data-theme='aqua-quartz'] .progress-bar-track {
+  background: linear-gradient(to bottom, #b0b0b0, #d0d0d0);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
+}
+
+[data-theme='aqua-quartz'] .progress-bar-fill {
+  background: linear-gradient(to bottom,
+      rgba(255, 255, 255, 0.85) 0%,
+      #6699ee 25%,
+      #3165c4 55%,
+      #1a4aaa 56%,
+      #4070cc 100%);
+  box-shadow: 0 0 6px rgba(49, 101, 196, 0.5);
+  border-radius: 999px;
+}
+
+/* Cards with subtle aluminium feel */
+[data-theme='aqua-quartz'] .card {
+  background: #f4f4f4;
+  border: 1px solid #c0c0c0;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
+}
+
+/* Queue / panels on light aluminium bg */
+[data-theme='aqua-quartz'] .queue-panel,
+[data-theme='aqua-quartz'] .queue-header {
+  background: #e8e8e8;
+  color: #111111;
+}
+
+[data-theme='aqua-quartz'] .queue-item {
+  color: #111111;
+}
+
+[data-theme='aqua-quartz'] .queue-item-artist,
+[data-theme='aqua-quartz'] .queue-item-sub {
+  color: #555555;
+}
+
+/* Queue round toolbar buttons — aluminium jelly */
+[data-theme='aqua-quartz'] .queue-round-btn {
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0%, #ececec 20%, #d4d4d4 48%, #c4c4c4 52%, #d0d0d0 100%);
+  border: 1px solid #909090;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.85);
+  color: #333333;
+}
+
+[data-theme='aqua-quartz'] .queue-round-btn:hover:not(:disabled) {
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0%, #f0f0f0 20%, #dadada 48%, #cacaca 52%, #d6d6d6 100%);
+  color: #111111;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.85);
+}
+
+[data-theme='aqua-quartz'] .queue-round-btn.active {
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0%, rgba(160, 195, 255, 0.9) 20%, #3165c4 48%, #1a4aaa 52%, #4a7ad4 100%);
+  border: 1px solid #1040a0;
+  color: #ffffff;
+  box-shadow: 0 2px 8px rgba(49, 101, 196, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.7);
+}
+
+/* Hero play button — blue jelly */
+[data-theme='aqua-quartz'] .hero-play-btn {
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0%, rgba(160, 195, 255, 0.9) 20%, #3165c4 48%, #1a4aaa 52%, #2555bb 75%, #4a7ad4 100%);
+  border: 1px solid #1040a0;
+  border-radius: var(--radius-full);
+  box-shadow: 0 2px 8px rgba(49, 101, 196, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.7);
+  color: white;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
+  transition: filter var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
+}
+
+[data-theme='aqua-quartz'] .hero-play-btn:hover {
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.98) 0%, rgba(185, 215, 255, 0.95) 20%, #3a72d8 48%, #2058c0 52%, #2d62cc 75%, #5585e0 100%);
+  filter: brightness(1.08);
+  box-shadow: 0 3px 12px rgba(49, 101, 196, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.7);
+  transform: scale(1.02);
+}
+
+/* Album card hover play button — blue jelly */
+[data-theme='aqua-quartz'] .album-card-details-btn {
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0%, rgba(160, 195, 255, 0.9) 20%, #3165c4 48%, #1a4aaa 52%, #4a7ad4 100%);
+  border: 1px solid #1040a0;
+  box-shadow: 0 3px 10px rgba(49, 101, 196, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.7);
+  color: white;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
+}
+

src/styles/themes/dawnfox.css

@@ -0,0 +1,53 @@
+/* ─── Dawnfox ─── */
+[data-theme='dawnfox'] {
+  color-scheme: light;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23575279%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  --ctp-crust: #ebe5df;
+  --ctp-mantle: #ebe5df;
+  --ctp-base: #faf4ed;
+  --ctp-surface0: #ebe0df;
+  --ctp-surface1: #ebdfe4;
+  --ctp-surface2: #bdbfc9;
+  --ctp-overlay0: #9893a5;
+  --ctp-overlay1: #a8a3b3;
+  --ctp-overlay2: #625c87;
+  --ctp-text: #575279;
+  --ctp-subtext1: #4c4769;
+  --ctp-subtext0: #625c87;
+  --ctp-mauve: #907aa9;
+  --ctp-lavender: #575279;
+  --ctp-pink: #d685af;
+  --ctp-flamingo: #d7827e;
+  --ctp-rosewater: #d7827e;
+  --ctp-blue: #286983;
+  --ctp-sapphire: #286983;
+  --ctp-sky: #56949f;
+  --ctp-teal: #56949f;
+  --ctp-green: #618774;
+  --ctp-yellow: #ea9d34;
+  --ctp-peach: #d7827e;
+  --ctp-maroon: #b4637a;
+  --ctp-red: #b4637a;
+
+  --bg-app: #faf4ed;
+  --bg-sidebar: #ebe5df;
+  --bg-card: #ebe0df;
+  --bg-hover: #ebdfe4;
+  --bg-player: #ebe5df;
+  --bg-glass: rgba(250, 244, 237, 0.92);
+  --accent: #907aa9;
+  --accent-dim: rgba(144, 122, 169, 0.12);
+  --accent-glow: rgba(144, 122, 169, 0.25);
+  --text-primary: #575279;
+  --text-secondary: #625c87;
+  --text-muted: #9893a5;
+  --border: #ebdfe4;
+  --border-subtle: #ebe0df;
+  --border-dropdown: #bdbfc9;
+  --shadow-dropdown: rgba(0, 0, 0, 0.15);
+  --positive: #618774;
+  --warning: #ea9d34;
+  --danger: #b4637a;
+}
+

src/styles/themes/dayfox.css

@@ -0,0 +1,53 @@
+/* ─── Dayfox ─── */
+[data-theme='dayfox'] {
+  color-scheme: light;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%233d2b5a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  --ctp-crust: #e4dcd4;
+  --ctp-mantle: #e4dcd4;
+  --ctp-base: #f6f2ee;
+  --ctp-surface0: #dbd1dd;
+  --ctp-surface1: #d3c7bb;
+  --ctp-surface2: #aab0ad;
+  --ctp-overlay0: #837a72;
+  --ctp-overlay1: #643f61;
+  --ctp-overlay2: #3d2b5a;
+  --ctp-text: #3d2b5a;
+  --ctp-subtext1: #302b5d;
+  --ctp-subtext0: #643f61;
+  --ctp-mauve: #6e33ce;
+  --ctp-lavender: #2848a9;
+  --ctp-pink: #a440b5;
+  --ctp-flamingo: #a5222f;
+  --ctp-rosewater: #955f61;
+  --ctp-blue: #2848a9;
+  --ctp-sapphire: #287980;
+  --ctp-sky: #287980;
+  --ctp-teal: #287980;
+  --ctp-green: #396847;
+  --ctp-yellow: #ac5402;
+  --ctp-peach: #955f61;
+  --ctp-maroon: #a5222f;
+  --ctp-red: #a5222f;
+
+  --bg-app: #f6f2ee;
+  --bg-sidebar: #e4dcd4;
+  --bg-card: #dbd1dd;
+  --bg-hover: #d3c7bb;
+  --bg-player: #e4dcd4;
+  --bg-glass: rgba(246, 242, 238, 0.92);
+  --accent: #2848a9;
+  --accent-dim: rgba(40, 72, 169, 0.12);
+  --accent-glow: rgba(40, 72, 169, 0.25);
+  --text-primary: #3d2b5a;
+  --text-secondary: #643f61;
+  --text-muted: #837a72;
+  --border: #d3c7bb;
+  --border-subtle: #dbd1dd;
+  --border-dropdown: #aab0ad;
+  --shadow-dropdown: rgba(0, 0, 0, 0.18);
+  --positive: #396847;
+  --warning: #ac5402;
+  --danger: #a5222f;
+}
+

src/styles/themes/deep-forest.css

@@ -0,0 +1,66 @@
+/* ─── Deep Forest ─── */
+[data-theme='deep-forest'] {
+  color-scheme: dark;
+
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236aa37c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+
+  /* Backgrounds */
+  --ctp-crust:    #0a0f0b;
+  --ctp-mantle:   #0f1511;
+  --ctp-base:     #141c17;
+  --ctp-surface0: #19231d;
+  --ctp-surface1: #223027;
+  --ctp-surface2: #2c3d31;
+
+  /* Overlays */
+  --ctp-overlay0: #41634f;
+  --ctp-overlay1: #547c64;
+  --ctp-overlay2: #689578;
+
+  /* Text */
+  --ctp-text:     #e0efe5;
+  --ctp-subtext1: #b3d1bd;
+  --ctp-subtext0: #84a791;
+
+  /* Forest green accent */
+  --ctp-teal:      #6aa37c;
+  --ctp-sky:       #6aa37c;
+  --ctp-sapphire:  #56896a;
+  --ctp-blue:      #456f57;
+  --ctp-lavender:  #81ba92;
+  --ctp-mauve:     #56896a;
+  --ctp-pink:      #456f57;
+  --ctp-flamingo:  #81ba92;
+  --ctp-rosewater: #56896a;
+
+  --ctp-red:     #d97777;
+  --ctp-maroon:  #d39a63;
+  --ctp-peach:   #d39a63;
+  --ctp-yellow:  #c9b76a;
+  --ctp-green:   #6aa37c;
+
+  --bg-app:      #141c17;
+  --bg-sidebar:  #0f1511;
+  --bg-card:     #19231d;
+  --bg-hover:    #223027;
+  --bg-player:   #0f1511;
+  --bg-glass:    rgba(20,28,23,0.82);
+
+  --accent:      #6aa37c;
+  --accent-dim:  rgba(106,163,124,0.05);
+  --accent-glow: rgba(106,163,124,0.09);
+
+  --text-primary:   #e0efe5;
+  --text-secondary: #84a791;
+  --text-muted:     #547c64;
+
+  --border:          #2c3d31;
+  --border-subtle:   #223027;
+  --border-dropdown: #36493b;
+  --shadow-dropdown: rgba(0,0,0,0.72);
+
+  --positive: #6aa37c;
+  --warning:  #c9b76a;
+  --danger:   #d97777;
+}
+

src/styles/themes/divider.css

@@ -0,0 +1,7 @@
+/* ─── Divider ─── */
+.divider {
+  height: 1px;
+  background: var(--border-subtle);
+  margin: var(--space-4) 0;
+}
+

src/styles/themes/dracula-component-level-overrides.css

@@ -0,0 +1,24 @@
+/* ─── Dracula — component-level overrides ─────────────────────────────── */
+
+/* Column resize grip — was surface1 on bg-card = 1:1 (identical, invisible).
+   Use the Comment-lifted tone for strong legibility. */
+[data-theme='dracula'] .col-resize-handle::after {
+  background: #c0bfcc;               /* 5.5:1 on bg-card — visible */
+  width: 2px;
+}
+
+/* Focus ring — Dracula Purple for keyboard nav */
+[data-theme='dracula'] *:focus-visible {
+  outline: 2px solid #bd93f9;
+  outline-offset: 2px;
+}
+
+/* Scrollbar thumb — Comment colour (Dracula-authentic) */
+[data-theme='dracula'] ::-webkit-scrollbar-thumb {
+  background: #6272a4;
+}
+[data-theme='dracula'] *:hover::-webkit-scrollbar-thumb,
+[data-theme='dracula'] .is-scrolling::-webkit-scrollbar-thumb {
+  background: #8b95c0;
+}
+

src/styles/themes/dracula.css

@@ -0,0 +1,70 @@
+/* ─── Dracula ─── */
+[data-theme='dracula'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23f8f8f2%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  /* ── Palette: official Dracula (draculatheme.com) preserved verbatim.
+     Contrast audit (vs. --bg-app #282a36, L≈0.024):
+       text-primary   13.4:1 AAA ✓ (official Foreground)
+       text-secondary 10.8:1 AAA ✓
+       text-muted      4.9:1 AA  ✓ (lifted from Comment #6272a4 at 2.99:1 — below all thresholds)
+       accent          5.9:1 AA  ✓ (Purple)
+       positive       10.4:1 AAA ✓ (Green)
+       warning         8.4:1 AAA ✓ (Orange)
+       danger          4.5:1 AA  ✓ (Red)
+     Border/hover separation fixed: Dracula's "Current Line" (#44475a)
+     was doing triple duty as card bg + border + hover, producing zero
+     visible structure. Borders now use the official Comment #6272a4
+     (1.9:1 — Dracula-authentic), hover lifts to Selection #565869.
+  */
+  --ctp-crust:    #191a21;
+  --ctp-mantle:   #21222c;
+  --ctp-base:     #282a36;
+  --ctp-surface0: #3a3c4e;
+  --ctp-surface1: #44475a;   /* official "Current Line" */
+  --ctp-surface2: #565869;   /* official "Selection" */
+  --ctp-overlay0: #6272a4;   /* official "Comment" */
+  --ctp-overlay1: #8b95c0;   /* lifted Comment for UI use */
+  --ctp-overlay2: #c0bfcc;
+  --ctp-text:     #f8f8f2;
+  --ctp-subtext1: #e0dfe6;
+  --ctp-subtext0: #c0bfcc;
+  --ctp-mauve:    #bd93f9;
+  --ctp-lavender: #bd93f9;
+  --ctp-pink:     #ff79c6;
+  --ctp-flamingo: #ff79c6;
+  --ctp-rosewater:#ffb86c;
+  --ctp-blue:     #6272a4;
+  --ctp-sapphire: #8be9fd;
+  --ctp-sky:      #8be9fd;
+  --ctp-teal:     #8be9fd;
+  --ctp-green:    #50fa7b;
+  --ctp-yellow:   #f1fa8c;
+  --ctp-peach:    #ffb86c;
+  --ctp-maroon:   #ff5555;
+  --ctp-red:      #ff5555;
+
+  --bg-app:           #282a36;
+  --bg-sidebar:       #21222c;
+  --bg-card:          #44475a;
+  --bg-hover:         #565869;       /* official Selection — 1.4:1 vs card, perceptible (was identical to card) */
+  --bg-player:        #21222c;
+  --bg-glass:         rgba(40, 42, 54, 0.88);
+  --accent:           #bd93f9;
+  --accent-dim:       rgba(189, 147, 249, 0.18);
+  --accent-glow:      rgba(189, 147, 249, 0.35);
+  --text-primary:     #f8f8f2;
+  --text-secondary:   #e0dfe6;
+  --text-muted:       #8b95c0;       /* 4.9:1 AA ✓, lifted Comment — was #6272a4 (2.99:1 below AA) */
+  --border:           #6272a4;       /* official Comment — 1.9:1, visible (was #44475a = invisible on card) */
+  --border-subtle:    #4e5167;       /* 1.2:1 subtle but perceptible */
+  --border-dropdown:  #6272a4;
+  --shadow-dropdown:  rgba(0, 0, 0, 0.6);
+  --positive:         #50fa7b;
+  --warning:          #ffb86c;
+  --danger:           #ff5555;
+  --waveform-played:    #bd93f9;
+  --waveform-buffered:  #6272a4;
+  --waveform-unplayed:  #3a3c4e;
+}
+

src/styles/themes/duskfox.css

@@ -0,0 +1,53 @@
+/* ─── Duskfox ─── */
+[data-theme='duskfox'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23e0def4%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  --ctp-crust: #191726;
+  --ctp-mantle: #191726;
+  --ctp-base: #232136;
+  --ctp-surface0: #2d2a45;
+  --ctp-surface1: #373354;
+  --ctp-surface2: #4b4673;
+  --ctp-overlay0: #817c9c;
+  --ctp-overlay1: #6e6a86;
+  --ctp-overlay2: #cdcbe0;
+  --ctp-text: #e0def4;
+  --ctp-subtext1: #cdcbe0;
+  --ctp-subtext0: #817c9c;
+  --ctp-mauve: #c4a7e7;
+  --ctp-lavender: #c4a7e7;
+  --ctp-pink: #eb98c3;
+  --ctp-flamingo: #eb6f92;
+  --ctp-rosewater: #ea9a97;
+  --ctp-blue: #569fba;
+  --ctp-sapphire: #569fba;
+  --ctp-sky: #9ccfd8;
+  --ctp-teal: #9ccfd8;
+  --ctp-green: #a3be8c;
+  --ctp-yellow: #f6c177;
+  --ctp-peach: #ea9a97;
+  --ctp-maroon: #eb6f92;
+  --ctp-red: #eb6f92;
+
+  --bg-app: #232136;
+  --bg-sidebar: #191726;
+  --bg-card: #2d2a45;
+  --bg-hover: #373354;
+  --bg-player: #191726;
+  --bg-glass: rgba(35, 33, 54, 0.75);
+  --accent: #c4a7e7;
+  --accent-dim: rgba(196, 167, 231, 0.15);
+  --accent-glow: rgba(196, 167, 231, 0.3);
+  --text-primary: #e0def4;
+  --text-secondary: #cdcbe0;
+  --text-muted: #817c9c;
+  --border: #373354;
+  --border-subtle: #2d2a45;
+  --border-dropdown: #4b4673;
+  --shadow-dropdown: rgba(0, 0, 0, 0.6);
+  --positive: #a3be8c;
+  --warning: #f6c177;
+  --danger: #eb6f92;
+}
+

src/styles/themes/dzr0.css

@@ -0,0 +1,104 @@
+/* ─── Dzr0 ─── */
+[data-theme='dzr0'] {
+  color-scheme: light;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23A238FF%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  --ctp-crust: #E5E5E9;
+  --ctp-mantle: #F5F5F7;
+  --ctp-base: #FFFFFF;
+  --ctp-surface0: #F0F0F3;
+  --ctp-surface1: #E8E8EC;
+  --ctp-surface2: #D8D8DF;
+  --ctp-overlay0: #9E9EAF;
+  --ctp-overlay1: #7C7C8F;
+  --ctp-overlay2: #5D5D70;
+  --ctp-text: #121216;
+  --ctp-subtext1: #4A4A5A;
+  --ctp-subtext0: #6A6A7A;
+
+  --ctp-mauve: #A238FF;
+  --ctp-lavender: #B86BFF;
+  --ctp-green: #00C171;
+  --ctp-teal: #00C171;
+  --ctp-sky: #3D91F4;
+  --ctp-blue: #2E77D0;
+  --ctp-sapphire: #1C5599;
+  --ctp-pink: #EF3B5D;
+  --ctp-flamingo: #EF3B5D;
+  --ctp-rosewater: #FFC8C8;
+  --ctp-yellow: #FFCC00;
+  --ctp-peach: #FF7A00;
+  --ctp-maroon: #B22A2A;
+  --ctp-red: #EF3B5D;
+
+  --bg-app: #FFFFFF;
+  --bg-sidebar: #F5F5F7;
+  --bg-card: #FBFBFC;
+  --bg-hover: #F0F0F3;
+  --bg-player: #FFFFFF;
+  --bg-glass: rgba(255, 255, 255, 0.85);
+
+  --accent: #A238FF;
+  --accent-dim: rgba(162, 56, 255, 0.12);
+  --accent-glow: rgba(162, 56, 255, 0.25);
+  --volume-accent: #A238FF;
+
+  --text-primary: #121216;
+  --text-secondary: #4A4A5A;
+  --text-muted: #6B6B7A;
+
+  --border: #E2E2E9;
+  --border-subtle: #F0F0F5;
+
+  --positive: #00C171;
+  --warning: #FFCC00;
+  --danger: #EF3B5D;
+
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 20px;
+  --radius-xl: 28px;
+  --radius-full: 9999px;
+
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
+  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10);
+  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
+
+  --transition-fast: 150ms ease;
+  --transition-med: 250ms ease;
+  --transition-slow: 350ms ease;
+
+  --sidebar-width: 220px;
+  --player-height: 88px;
+}
+
+[data-theme='dzr0'] .player-bar {
+  border-top: 1px solid var(--border-subtle);
+  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.03);
+}
+
+[data-theme='dzr0'] .player-track-name,
+[data-theme='dzr0'] .player-time,
+[data-theme='dzr0'] .player-track-artist {
+  color: var(--text-primary) !important;
+}
+
+[data-theme='dzr0'] .sidebar {
+  border-right: 1px solid var(--border-subtle);
+}
+
+[data-theme='dzr0'] .nav-link:hover {
+  background-color: var(--bg-hover);
+  color: var(--accent);
+}
+
+[data-theme='dzr0'] .nav-link.active {
+  background-color: var(--accent-dim);
+  color: var(--accent);
+  font-weight: 600;
+}
+
+[data-theme='dzr0'] .btn-primary {
+  color: #FFFFFF !important;
+}
+

src/styles/themes/focus.css

@@ -0,0 +1,7 @@
+/* ─── Focus ─── */
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+

src/styles/themes/font-overrides.css

@@ -0,0 +1,76 @@
+/* ─── Font overrides ─── */
+[data-font='inter'] {
+  --font-sans: 'Inter Variable', system-ui, -apple-system, sans-serif;
+  --font-display: 'Inter Variable', sans-serif;
+}
+
+[data-font='outfit'] {
+  --font-sans: 'Outfit Variable', system-ui, sans-serif;
+  --font-display: 'Outfit Variable', sans-serif;
+}
+
+[data-font='dm-sans'] {
+  --font-sans: 'DM Sans Variable', system-ui, sans-serif;
+  --font-display: 'DM Sans Variable', sans-serif;
+}
+
+[data-font='nunito'] {
+  --font-sans: 'Nunito Variable', system-ui, sans-serif;
+  --font-display: 'Nunito Variable', sans-serif;
+}
+
+[data-font='rubik'] {
+  --font-sans: 'Rubik Variable', system-ui, sans-serif;
+  --font-display: 'Rubik Variable', sans-serif;
+}
+
+[data-font='space-grotesk'] {
+  --font-sans: 'Space Grotesk Variable', system-ui, sans-serif;
+  --font-display: 'Space Grotesk Variable', sans-serif;
+}
+
+[data-font='figtree'] {
+  --font-sans: 'Figtree Variable', system-ui, sans-serif;
+  --font-display: 'Figtree Variable', sans-serif;
+}
+
+[data-font='manrope'] {
+  --font-sans: 'Manrope Variable', system-ui, sans-serif;
+  --font-display: 'Manrope Variable', sans-serif;
+}
+
+[data-font='plus-jakarta-sans'] {
+  --font-sans: 'Plus Jakarta Sans Variable', system-ui, sans-serif;
+  --font-display: 'Plus Jakarta Sans Variable', sans-serif;
+}
+
+[data-font='lexend'] {
+  --font-sans: 'Lexend Variable', system-ui, sans-serif;
+  --font-display: 'Lexend Variable', sans-serif;
+}
+
+[data-font='geist'] {
+  --font-sans: 'Geist Variable', system-ui, sans-serif;
+  --font-display: 'Geist Variable', sans-serif;
+}
+
+[data-font='jetbrains-mono'] {
+  --font-sans: 'JetBrains Mono Variable', monospace;
+  --font-display: 'JetBrains Mono Variable', monospace;
+}
+
+[data-font='golos-text'] {
+  --font-sans: 'Golos Text Variable', system-ui, sans-serif;
+  --font-display: 'Golos Text Variable', sans-serif;
+}
+
+[data-font='unbounded'] {
+  --font-sans: 'Unbounded Variable', system-ui, sans-serif;
+  --font-display: 'Unbounded Variable', sans-serif;
+}
+
+[data-font='opendyslexic'] {
+  --font-sans: 'OpenDyslexic', system-ui, sans-serif;
+  --font-display: 'OpenDyslexic', sans-serif;
+}
+

src/styles/themes/global-base-settings.css

@@ -0,0 +1,39 @@
+/* ─── Global Base Settings ─── */
+:root {
+  /* Typography */
+  --font-sans: 'Inter Variable', system-ui, -apple-system, sans-serif;
+  --font-display: 'Space Grotesk Variable', 'Inter Variable', sans-serif;
+
+  /* Spacing */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+
+  /* Radii */
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 16px;
+  --radius-xl: 24px;
+  --radius-full: 9999px;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
+  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
+  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
+  --shadow-glow: 0 0 24px var(--accent-glow);
+
+  /* Transitions */
+  --transition-fast: 120ms ease;
+  --transition-base: 200ms ease;
+  --transition-slow: 350ms ease;
+
+  /* Layout */
+  --sidebar-width: 220px;
+  --player-height: 88px;
+}
+

src/styles/themes/global-dragging-state.css

@@ -0,0 +1,14 @@
+/* ─── Global Dragging State ─── */
+body.is-dragging,
+body.is-dragging * {
+  user-select: none !important;
+  cursor: col-resize !important;
+}
+
+/* Overlay scrollbar thumb drag — override queue resizer cursor (z-index). */
+body.is-overlay-scrollbar-thumb-drag,
+body.is-overlay-scrollbar-thumb-drag * {
+  user-select: none !important;
+  cursor: grabbing !important;
+}
+

src/styles/themes/grand-theft-audio-gta-v-los-santos-at-night.css

@@ -0,0 +1,225 @@
+/* ─── Grand Theft Audio — GTA V / Los Santos at Night ─── */
+/* Money green + Wanted-level gold + LS asphalt dark           */
+[data-theme='grand-theft-audio'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2357b05a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  /* LS asphalt — almost black with a warm urban undertone */
+  --ctp-crust: #030303;
+  --ctp-mantle: #080808;
+  --ctp-base: #0e0e0e;
+  --ctp-surface0: #161616;
+  --ctp-surface1: #202020;
+  --ctp-surface2: #2c2c2c;
+  --ctp-overlay0: #707070;
+  --ctp-overlay1: #909090;
+  --ctp-overlay2: #b0b0b0;
+  --ctp-text: #d8d8d8;
+  --ctp-subtext1: #b8b8b8;
+  --ctp-subtext0: #888888;
+
+  /* GTA palette */
+  --ctp-green: #57b05a;
+  /* money green — health bar */
+  --ctp-mauve: #57b05a;
+  --ctp-teal: #3d9e40;
+  --ctp-yellow: #ffd700;
+  /* wanted stars — 5-star gold */
+  --ctp-peach: #ffb800;
+  /* Los Santos Customs orange */
+  --ctp-flamingo: #ffb800;
+  --ctp-rosewater: #ffb800;
+  --ctp-red: #e02020;
+  /* wasted / busted red */
+  --ctp-maroon: #c01818;
+  --ctp-blue: #4a9fd4;
+  /* armor bar blue */
+  --ctp-sapphire: #3a8fc4;
+  --ctp-sky: #4a9fd4;
+  --ctp-lavender: #57b05a;
+  --ctp-pink: #e02020;
+
+  --bg-app: #0e0e0e;
+  --bg-sidebar: #080808;
+  /* minimap dark */
+  --bg-card: #161616;
+  --bg-hover: rgba(87, 176, 90, 0.08);
+  --bg-player: #030303;
+  /* HUD strip */
+  --bg-glass: rgba(8, 8, 8, 0.95);
+
+  --accent: #57b05a;
+  /* money green */
+  --accent-dim: rgba(87, 176, 90, 0.14);
+  --accent-glow: rgba(87, 176, 90, 0.45);
+  --volume-accent: #ffd700;
+  /* wanted-gold for volume knob */
+
+  --text-primary: #d8d8d8;
+  --text-secondary: #ffd700;
+  /* wanted-level gold — the key differentiator */
+  --text-muted: #707070;
+  --border: #242424;
+  --border-subtle: #161616;
+  --shadow-dropdown: rgba(0, 0, 0, 0.9);
+
+  --radius-sm: 0px;
+  --radius-md: 2px;
+  --radius-lg: 3px;
+  --radius-xl: 4px;
+}
+
+/* Sidebar = minimap panel: dark border + subtle city-grid stripe */
+[data-theme='grand-theft-audio'] .sidebar {
+  border-right: 2px solid #57b05a;
+  background-image: repeating-linear-gradient(135deg,
+      transparent,
+      transparent 40px,
+      rgba(87, 176, 90, 0.018) 40px,
+      rgba(87, 176, 90, 0.018) 41px);
+}
+
+/* Player bar = GTA HUD strip: green health line + gold secondary */
+[data-theme='grand-theft-audio'] .player-bar {
+  border-top: 2px solid #57b05a;
+  box-shadow:
+    0 -1px 0 rgba(255, 215, 0, 0.25),
+    0 -8px 30px rgba(87, 176, 90, 0.08);
+}
+
+/* Track name = money counter — green + uppercase */
+[data-theme='grand-theft-audio'] .player-track-name {
+  color: #57b05a;
+  text-shadow: 0 0 10px rgba(87, 176, 90, 0.6), 0 0 24px rgba(87, 176, 90, 0.25);
+  text-transform: uppercase;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+}
+
+/* Artist = wanted-gold, like the bounty/level display */
+[data-theme='grand-theft-audio'] .player-track-artist {
+  color: #ffd700;
+}
+
+/* Active nav link: money-green gradient + glow bar */
+[data-theme='grand-theft-audio'] .nav-link.active {
+  background: linear-gradient(90deg, rgba(87, 176, 90, 0.18) 0%, transparent 100%);
+  color: #57b05a;
+}
+
+[data-theme='grand-theft-audio'] .nav-link.active::before {
+  width: 3px;
+  box-shadow: 2px 0 12px rgba(87, 176, 90, 0.6);
+}
+
+/* Buttons: blocky GTA UI style */
+[data-theme='grand-theft-audio'] .btn-primary {
+  background: #57b05a;
+  color: #030303;
+  text-transform: uppercase;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+  border: none;
+}
+
+[data-theme='grand-theft-audio'] .btn-primary:hover {
+  background: #6abf6e;
+}
+
+/* Queue active = health-bar green left strip */
+[data-theme='grand-theft-audio'] .queue-item.active {
+  background: rgba(87, 176, 90, 0.08);
+  box-shadow: inset 3px 0 0 #57b05a;
+}
+
+[data-theme='grand-theft-audio'] .np-queue-item.active {
+  background: rgba(87, 176, 90, 0.07);
+}
+
+[data-theme='grand-theft-audio'] .np-queue-item-active {
+  color: #57b05a;
+  text-shadow: 0 0 8px rgba(87, 176, 90, 0.55);
+}
+
+/* Now-playing active track = gold (5-star wanted) */
+[data-theme='grand-theft-audio'] .np-album-track.active .np-album-track-title,
+[data-theme='grand-theft-audio'] .np-album-track.active .np-album-track-num {
+  color: #ffd700;
+  text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
+}
+
+/* Hover rows */
+[data-theme='grand-theft-audio'] .track-row:hover,
+[data-theme='grand-theft-audio'] .track-row.context-active {
+  background: rgba(87, 176, 90, 0.07) !important;
+  box-shadow: inset 3px 0 0 #57b05a;
+}
+
+[data-theme='grand-theft-audio'] .queue-item:hover,
+[data-theme='grand-theft-audio'] .queue-item.context-active {
+  background: rgba(87, 176, 90, 0.08) !important;
+  box-shadow: inset 3px 0 0 #57b05a;
+}
+
+[data-theme='grand-theft-audio'] .np-queue-item:hover,
+[data-theme='grand-theft-audio'] .np-queue-item.context-active {
+  background: rgba(87, 176, 90, 0.07);
+  box-shadow: inset 2px 0 0 #57b05a;
+}
+
+[data-theme='grand-theft-audio'] .artist-row:hover {
+  background: rgba(87, 176, 90, 0.07);
+  box-shadow: inset 3px 0 0 #57b05a;
+}
+
+[data-theme='grand-theft-audio'] .playlist-row:hover {
+  background: rgba(87, 176, 90, 0.07);
+  box-shadow: inset 3px 0 0 #57b05a;
+}
+
+/* Settings tabs: gold active = 5-star screen */
+[data-theme='grand-theft-audio'] .settings-tab:hover {
+  background: rgba(87, 176, 90, 0.07);
+  color: #57b05a;
+}
+
+[data-theme='grand-theft-audio'] .settings-tab.active {
+  background: rgba(255, 215, 0, 0.07);
+  color: #ffd700;
+  box-shadow: inset 3px 0 0 #ffd700;
+}
+
+/* Queue tab */
+[data-theme='grand-theft-audio'] .queue-tab-btn:hover {
+  background: rgba(87, 176, 90, 0.07);
+  color: #57b05a;
+}
+
+/* Dropdowns */
+[data-theme='grand-theft-audio'] .custom-select-trigger:hover {
+  background: rgba(87, 176, 90, 0.07);
+}
+
+[data-theme='grand-theft-audio'] .custom-select-option:hover {
+  background: rgba(87, 176, 90, 0.1) !important;
+  color: #57b05a !important;
+}
+
+/* Artist pills = LS Customs orange */
+[data-theme='grand-theft-audio'] .artist-ext-link:hover {
+  background: rgba(255, 184, 0, 0.1);
+  color: #ffb800 !important;
+  border-color: rgba(255, 184, 0, 0.4) !important;
+}
+
+/* Queue album title = gold */
+[data-theme='grand-theft-audio'] .queue-meta-album {
+  color: #ffd700;
+}
+
+/* Connection indicators */
+[data-theme='grand-theft-audio'] .connection-type,
+[data-theme='grand-theft-audio'] .connection-server {
+  color: #ffd700;
+}
+

src/styles/themes/gruvbox-dark-hard.css

@@ -0,0 +1,53 @@
+/* ─── Gruvbox Dark Hard ─── */
+[data-theme='gruvbox-dark-hard'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ebdbb2%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  --ctp-crust: #1d2021;
+  --ctp-mantle: #1d2021;
+  --ctp-base: #282828;
+  --ctp-surface0: #3c3836;
+  --ctp-surface1: #504945;
+  --ctp-surface2: #665c54;
+  --ctp-overlay0: #7c6f64;
+  --ctp-overlay1: #928374;
+  --ctp-overlay2: #a89984;
+  --ctp-text: #ebdbb2;
+  --ctp-subtext1: #d5c4a1;
+  --ctp-subtext0: #bdae93;
+  --ctp-mauve: #d3869b;
+  --ctp-lavender: #d3869b;
+  --ctp-pink: #d3869b;
+  --ctp-flamingo: #fb4934;
+  --ctp-rosewater: #fb4934;
+  --ctp-blue: #83a598;
+  --ctp-sapphire: #83a598;
+  --ctp-sky: #8ec07c;
+  --ctp-teal: #8ec07c;
+  --ctp-green: #b8bb26;
+  --ctp-yellow: #fabd2f;
+  --ctp-peach: #fe8019;
+  --ctp-maroon: #fb4934;
+  --ctp-red: #cc241d;
+
+  --bg-app: #1d2021;
+  --bg-sidebar: #141617;
+  --bg-card: #3c3836;
+  --bg-hover: #504945;
+  --bg-player: #1d2021;
+  --bg-glass: rgba(29, 32, 33, 0.82);
+  --accent: #fabd2f;
+  --accent-dim: rgba(250, 189, 47, 0.15);
+  --accent-glow: rgba(250, 189, 47, 0.3);
+  --text-primary: #ebdbb2;
+  --text-secondary: #d5c4a1;
+  --text-muted: #928374;
+  --border: #504945;
+  --border-subtle: #3c3836;
+  --border-dropdown: #665c54;
+  --shadow-dropdown: rgba(0, 0, 0, 0.6);
+  --positive: #b8bb26;
+  --warning: #fabd2f;
+  --danger: #fb4934;
+}
+

src/styles/themes/gruvbox-dark-medium.css

@@ -0,0 +1,53 @@
+/* ─── Gruvbox Dark Medium ─── */
+[data-theme='gruvbox-dark-medium'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ebdbb2%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  --ctp-crust: #1d2021;
+  --ctp-mantle: #1d2021;
+  --ctp-base: #282828;
+  --ctp-surface0: #3c3836;
+  --ctp-surface1: #504945;
+  --ctp-surface2: #665c54;
+  --ctp-overlay0: #7c6f64;
+  --ctp-overlay1: #928374;
+  --ctp-overlay2: #a89984;
+  --ctp-text: #ebdbb2;
+  --ctp-subtext1: #d5c4a1;
+  --ctp-subtext0: #bdae93;
+  --ctp-mauve: #d3869b;
+  --ctp-lavender: #d3869b;
+  --ctp-pink: #d3869b;
+  --ctp-flamingo: #fb4934;
+  --ctp-rosewater: #fb4934;
+  --ctp-blue: #83a598;
+  --ctp-sapphire: #83a598;
+  --ctp-sky: #8ec07c;
+  --ctp-teal: #8ec07c;
+  --ctp-green: #b8bb26;
+  --ctp-yellow: #fabd2f;
+  --ctp-peach: #fe8019;
+  --ctp-maroon: #fb4934;
+  --ctp-red: #cc241d;
+
+  --bg-app: #282828;
+  --bg-sidebar: #1d2021;
+  --bg-card: #3c3836;
+  --bg-hover: #504945;
+  --bg-player: #1d2021;
+  --bg-glass: rgba(40, 40, 40, 0.82);
+  --accent: #fabd2f;
+  --accent-dim: rgba(250, 189, 47, 0.15);
+  --accent-glow: rgba(250, 189, 47, 0.3);
+  --text-primary: #ebdbb2;
+  --text-secondary: #d5c4a1;
+  --text-muted: #928374;
+  --border: #504945;
+  --border-subtle: #3c3836;
+  --border-dropdown: #665c54;
+  --shadow-dropdown: rgba(0, 0, 0, 0.55);
+  --positive: #b8bb26;
+  --warning: #fabd2f;
+  --danger: #fb4934;
+}
+

src/styles/themes/gruvbox-dark-soft.css

@@ -0,0 +1,53 @@
+/* ─── Gruvbox Dark Soft ─── */
+[data-theme='gruvbox-dark-soft'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ebdbb2%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  --ctp-crust: #1d2021;
+  --ctp-mantle: #282828;
+  --ctp-base: #32302f;
+  --ctp-surface0: #3c3836;
+  --ctp-surface1: #504945;
+  --ctp-surface2: #665c54;
+  --ctp-overlay0: #7c6f64;
+  --ctp-overlay1: #928374;
+  --ctp-overlay2: #a89984;
+  --ctp-text: #ebdbb2;
+  --ctp-subtext1: #d5c4a1;
+  --ctp-subtext0: #bdae93;
+  --ctp-mauve: #d3869b;
+  --ctp-lavender: #d3869b;
+  --ctp-pink: #d3869b;
+  --ctp-flamingo: #fb4934;
+  --ctp-rosewater: #fb4934;
+  --ctp-blue: #83a598;
+  --ctp-sapphire: #83a598;
+  --ctp-sky: #8ec07c;
+  --ctp-teal: #8ec07c;
+  --ctp-green: #b8bb26;
+  --ctp-yellow: #fabd2f;
+  --ctp-peach: #fe8019;
+  --ctp-maroon: #fb4934;
+  --ctp-red: #cc241d;
+
+  --bg-app: #32302f;
+  --bg-sidebar: #282828;
+  --bg-card: #45403d;
+  --bg-hover: #504945;
+  --bg-player: #282828;
+  --bg-glass: rgba(50, 48, 47, 0.82);
+  --accent: #fabd2f;
+  --accent-dim: rgba(250, 189, 47, 0.15);
+  --accent-glow: rgba(250, 189, 47, 0.3);
+  --text-primary: #ebdbb2;
+  --text-secondary: #d5c4a1;
+  --text-muted: #928374;
+  --border: #504945;
+  --border-subtle: #3c3836;
+  --border-dropdown: #665c54;
+  --shadow-dropdown: rgba(0, 0, 0, 0.5);
+  --positive: #b8bb26;
+  --warning: #fabd2f;
+  --danger: #fb4934;
+}
+

src/styles/themes/gruvbox-light-hard.css

@@ -0,0 +1,51 @@
+/* ─── Gruvbox Light Hard ─── */
+[data-theme='gruvbox-light-hard'] {
+  color-scheme: light;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23504945%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  --ctp-crust: #ebdbb2;
+  --ctp-mantle: #f2e5bc;
+  --ctp-base: #f9f5d7;
+  --ctp-surface0: #f2e5bc;
+  --ctp-surface1: #ebdbb2;
+  --ctp-surface2: #d5c4a1;
+  --ctp-overlay0: #bdae93;
+  --ctp-overlay1: #a89984;
+  --ctp-overlay2: #928374;
+  --ctp-text: #3c3836;
+  --ctp-subtext1: #504945;
+  --ctp-subtext0: #665c54;
+  --ctp-mauve: #8f3f71;
+  --ctp-lavender: #8f3f71;
+  --ctp-pink: #8f3f71;
+  --ctp-flamingo: #9d0006;
+  --ctp-rosewater: #cc241d;
+  --ctp-blue: #076678;
+  --ctp-sapphire: #076678;
+  --ctp-sky: #427b58;
+  --ctp-teal: #427b58;
+  --ctp-green: #79740e;
+  --ctp-yellow: #b57614;
+  --ctp-peach: #af3a03;
+  --ctp-maroon: #9d0006;
+  --ctp-red: #cc241d;
+
+  --bg-app: #f9f5d7;
+  --bg-sidebar: #f2e5bc;
+  --bg-card: #f2e5bc;
+  --bg-hover: #ebdbb2;
+  --bg-player: #f2e5bc;
+  --bg-glass: rgba(249, 245, 215, 0.9);
+  --accent: #b57614;
+  --accent-dim: rgba(181, 118, 20, 0.15);
+  --accent-glow: rgba(181, 118, 20, 0.25);
+  --text-primary: #3c3836;
+  --text-secondary: #504945;
+  --text-muted: #7c6f64;
+  --border: #d5c4a1;
+  --border-subtle: #ebdbb2;
+  --positive: #79740e;
+  --warning: #b57614;
+  --danger: #9d0006;
+}
+

src/styles/themes/gruvbox-light-medium.css

@@ -0,0 +1,51 @@
+/* ─── Gruvbox Light Medium ─── */
+[data-theme='gruvbox-light-medium'] {
+  color-scheme: light;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23504945%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  --ctp-crust: #ebdbb2;
+  --ctp-mantle: #f2e5bc;
+  --ctp-base: #fbf1c7;
+  --ctp-surface0: #f2e5bc;
+  --ctp-surface1: #ebdbb2;
+  --ctp-surface2: #d5c4a1;
+  --ctp-overlay0: #bdae93;
+  --ctp-overlay1: #a89984;
+  --ctp-overlay2: #928374;
+  --ctp-text: #3c3836;
+  --ctp-subtext1: #504945;
+  --ctp-subtext0: #665c54;
+  --ctp-mauve: #8f3f71;
+  --ctp-lavender: #8f3f71;
+  --ctp-pink: #8f3f71;
+  --ctp-flamingo: #9d0006;
+  --ctp-rosewater: #cc241d;
+  --ctp-blue: #076678;
+  --ctp-sapphire: #076678;
+  --ctp-sky: #427b58;
+  --ctp-teal: #427b58;
+  --ctp-green: #79740e;
+  --ctp-yellow: #b57614;
+  --ctp-peach: #af3a03;
+  --ctp-maroon: #9d0006;
+  --ctp-red: #cc241d;
+
+  --bg-app: #fbf1c7;
+  --bg-sidebar: #f2e5bc;
+  --bg-card: #f2e5bc;
+  --bg-hover: #ebdbb2;
+  --bg-player: #f2e5bc;
+  --bg-glass: rgba(251, 241, 199, 0.9);
+  --accent: #b57614;
+  --accent-dim: rgba(181, 118, 20, 0.15);
+  --accent-glow: rgba(181, 118, 20, 0.25);
+  --text-primary: #3c3836;
+  --text-secondary: #504945;
+  --text-muted: #7c6f64;
+  --border: #d5c4a1;
+  --border-subtle: #ebdbb2;
+  --positive: #79740e;
+  --warning: #b57614;
+  --danger: #9d0006;
+}
+

src/styles/themes/gruvbox-light-soft.css

@@ -0,0 +1,66 @@
+/* ─── Gruvbox Light Soft ─── */
+[data-theme='gruvbox-light-soft'] {
+  color-scheme: light;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23504945%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  --ctp-crust: #ebdbb2;
+  --ctp-mantle: #f2e5bc;
+  --ctp-base: #f2e5bc;
+  --ctp-surface0: #ebdbb2;
+  --ctp-surface1: #d5c4a1;
+  --ctp-surface2: #bdae93;
+  --ctp-overlay0: #a89984;
+  --ctp-overlay1: #928374;
+  --ctp-overlay2: #7c6f64;
+  --ctp-text: #3c3836;
+  --ctp-subtext1: #504945;
+  --ctp-subtext0: #665c54;
+  --ctp-mauve: #8f3f71;
+  --ctp-lavender: #8f3f71;
+  --ctp-pink: #8f3f71;
+  --ctp-flamingo: #9d0006;
+  --ctp-rosewater: #cc241d;
+  --ctp-blue: #076678;
+  --ctp-sapphire: #076678;
+  --ctp-sky: #427b58;
+  --ctp-teal: #427b58;
+  --ctp-green: #79740e;
+  --ctp-yellow: #b57614;
+  --ctp-peach: #af3a03;
+  --ctp-maroon: #9d0006;
+  --ctp-red: #cc241d;
+
+  --bg-app: #f2e5bc;
+  --bg-sidebar: #ebdbb2;
+  --bg-card: #ebdbb2;
+  --bg-hover: #d5c4a1;
+  --bg-player: #ebdbb2;
+  --bg-glass: rgba(242, 229, 188, 0.9);
+  --accent: #b57614;
+  --accent-dim: rgba(181, 118, 20, 0.15);
+  --accent-glow: rgba(181, 118, 20, 0.25);
+  --text-primary: #3c3836;
+  --text-secondary: #504945;
+  --text-muted: #7c6f64;
+  --border: #d5c4a1;
+  --border-subtle: #ebdbb2;
+  --positive: #79740e;
+  --warning: #b57614;
+  --danger: #9d0006;
+}
+
+/* ── Gruvbox Light Soft overrides ── */
+[data-theme='gruvbox-light-soft'] .album-detail-back {
+  color: #fbf1c7;
+}
+
+[data-theme='gruvbox-light-soft'] .album-detail-back:hover {
+  background: rgba(255, 255, 255, 0.15);
+  color: #ffffff;
+}
+
+[data-theme='gruvbox-light-soft'] .album-detail-badge {
+  background: var(--accent);
+  color: #fbf1c7;
+}
+

src/styles/themes/guild-wars-1-tyria.css

@@ -0,0 +1,206 @@
+/* ─── Guild Wars 1 — Tyria ─── */
+[data-theme='gw1'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23c8960c%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  /* Palette — aged Tyrian stone, ornate gold, Searing crimson */
+  --ctp-crust: #060402;
+  --ctp-mantle: #0a0806;
+  --ctp-base: #0e0b08;
+  --ctp-surface0: #1a1208;
+  --ctp-surface1: #261b0c;
+  --ctp-surface2: #342510;
+  --ctp-overlay0: #5a4830;
+  --ctp-overlay1: #7a6448;
+  --ctp-overlay2: #9a8060;
+  --ctp-text: #f0e4c4;
+  --ctp-subtext1: #d4c49a;
+  --ctp-subtext0: #b0a07a;
+  --ctp-mauve: #c8960c;
+  --ctp-lavender: #e8b820;
+  --ctp-pink: #c0321a;
+  --ctp-flamingo: #d4780c;
+  --ctp-rosewater: #f0e4c4;
+  --ctp-green: #5a8030;
+  --ctp-teal: #3a6858;
+  --ctp-sky: #7aaccc;
+  --ctp-blue: #3a6898;
+  --ctp-sapphire: #3a6898;
+  --ctp-yellow: #e8c840;
+  --ctp-peach: #d4780c;
+  --ctp-maroon: #8b1515;
+  --ctp-red: #c0321a;
+
+  --bg-app: #0e0b08;
+  --bg-sidebar: #0a0806;
+  --bg-card: #1a1208;
+  --bg-hover: #261b0c;
+  --bg-player: #060402;
+  --bg-glass: rgba(14, 11, 8, 0.88);
+  --accent: #c8960c;
+  --accent-dim: rgba(200, 150, 12, 0.15);
+  --accent-glow: rgba(200, 150, 12, 0.35);
+  --text-primary: #f0e4c4;
+  --text-secondary: #9a8060;
+  --text-muted: #a08858;
+  --border: rgba(200, 150, 12, 0.28);
+  --border-subtle: rgba(200, 150, 12, 0.10);
+  --border-dropdown: rgba(200, 150, 12, 0.35);
+  --shadow-dropdown: rgba(0, 0, 0, 0.85);
+  --positive: #5a8030;
+  --warning: #d4780c;
+  --danger: #c0321a;
+  --radius-sm: 2px;
+  --radius-md: 3px;
+  --radius-lg: 4px;
+}
+
+/* App shell — solid dark stone base (grid moved to sidebar-only for perf) */
+
+/* Sidebar — worn leather with faint horizontal stone lines */
+[data-theme='gw1'] .sidebar {
+  border-right: 1px solid rgba(200, 150, 12, 0.35);
+  background: linear-gradient(180deg, #0c0906 0%, #080604 100%);
+  background-image: repeating-linear-gradient(0deg,
+      rgba(200, 150, 12, 0.04) 0px,
+      transparent 1px,
+      transparent 48px,
+      rgba(200, 150, 12, 0.04) 49px);
+}
+
+/* Player bar — the GW1 skill bar: deepest black, gold top border */
+[data-theme='gw1'] .player-bar {
+  background: #060402;
+  border-top: 2px solid #c8960c;
+  box-shadow: 0 -6px 28px rgba(200, 150, 12, 0.14), 0 -1px 0 rgba(0, 0, 0, 0.9);
+}
+
+/* Track name — Tyrian item-name gold glow, Cinzel serif */
+[data-theme='gw1'] .player-track-name {
+  color: #e8b820;
+  text-shadow: 0 0 10px rgba(232, 184, 32, 0.55), 0 0 22px rgba(200, 150, 12, 0.25);
+  font-family: 'Cinzel', 'Palatino Linotype', Georgia, serif;
+  letter-spacing: 0.03em;
+}
+
+/* Artist name — faded parchment, not competing with gold */
+[data-theme='gw1'] .player-artist-name {
+  color: #9a8060;
+}
+
+/* Nav active — left gold bar like GW1 menu selection */
+[data-theme='gw1'] .nav-link.active {
+  background: linear-gradient(90deg, rgba(200, 150, 12, 0.20) 0%, transparent 100%);
+  border-left: 3px solid #c8960c;
+  color: #e8b820;
+}
+
+[data-theme='gw1'] .nav-link:hover:not(.active) {
+  background: linear-gradient(90deg, rgba(200, 150, 12, 0.09) 0%, transparent 100%);
+  border-left: 3px solid rgba(200, 150, 12, 0.35);
+}
+
+/* Content header — ornate double gold rule */
+[data-theme='gw1'] .content-header {
+  border-bottom: 1px solid rgba(200, 150, 12, 0.22);
+  position: relative;
+}
+
+[data-theme='gw1'] .content-header::after {
+  content: '';
+  position: absolute;
+  bottom: -3px;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent 0%, rgba(200, 150, 12, 0.7) 20%, rgba(232, 184, 32, 0.9) 50%, rgba(200, 150, 12, 0.7) 80%, transparent 100%);
+}
+
+/* Cards — dark leather panels with subtle gold frame */
+[data-theme='gw1'] .album-card,
+[data-theme='gw1'] .artist-card {
+  box-shadow: inset 0 0 0 1px rgba(200, 150, 12, 0.18);
+}
+
+[data-theme='gw1'] .album-card:hover,
+[data-theme='gw1'] .artist-card:hover {
+  box-shadow: inset 0 0 0 1px rgba(200, 150, 12, 0.55), 0 4px 20px rgba(200, 150, 12, 0.18);
+}
+
+/* Queue / track rows — gold left accent bar on hover */
+[data-theme='gw1'] .track-row:hover,
+[data-theme='gw1'] .queue-item:hover {
+  box-shadow: inset 2px 0 0 #c8960c;
+  background: rgba(200, 150, 12, 0.08);
+}
+
+/* Primary play button — hammered gold like GW1 UI buttons */
+[data-theme='gw1'] .player-btn-primary {
+  background: linear-gradient(180deg, #e8b820 0%, #c8960c 50%, #a87808 100%);
+  color: #060402;
+  box-shadow: 0 0 14px rgba(200, 150, 12, 0.45);
+  border: 1px solid #906606;
+}
+
+[data-theme='gw1'] .player-btn-primary:hover {
+  background: linear-gradient(180deg, #f0c830 0%, #d8a818 50%, #b88818 100%);
+  box-shadow: 0 0 22px rgba(200, 150, 12, 0.65);
+}
+
+/* btn-primary (play album, etc.) */
+[data-theme='gw1'] .btn-primary {
+  background: linear-gradient(180deg, #e8b820 0%, #c8960c 50%, #a87808 100%);
+  color: #060402;
+  border: 1px solid #906606;
+}
+
+[data-theme='gw1'] .btn-primary:hover {
+  background: linear-gradient(180deg, #f0c830 0%, #d8a818 50%, #b88818 100%);
+}
+
+/* Hero play button — Cinzel font, gold, no flash on hover */
+[data-theme='gw1'] .hero-play-btn {
+  background: linear-gradient(180deg, #e8b820 0%, #c8960c 50%, #a87808 100%);
+  color: #060402;
+  border: 1px solid #906606;
+  box-shadow: 0 2px 14px rgba(200, 150, 12, 0.45);
+  font-family: 'Cinzel', Georgia, serif;
+  letter-spacing: 0.05em;
+  transition: filter var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
+}
+
+[data-theme='gw1'] .hero-play-btn:hover {
+  background: linear-gradient(180deg, #f0c830 0%, #d8a818 50%, #b88818 100%);
+  box-shadow: 0 4px 22px rgba(200, 150, 12, 0.65);
+  transform: scale(1.02);
+}
+
+/* Album card overlay play button */
+[data-theme='gw1'] .album-card-details-btn {
+  background: linear-gradient(180deg, #e8b820 0%, #c8960c 50%, #a87808 100%);
+  color: #060402;
+  border: 1px solid #906606;
+  box-shadow: 0 2px 10px rgba(200, 150, 12, 0.5);
+}
+
+/* Scrollbar — dark stone with gold thumb */
+[data-theme='gw1'] ::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+[data-theme='gw1'] ::-webkit-scrollbar-track {
+  background: #0a0806;
+  border-left: 1px solid rgba(200, 150, 12, 0.08);
+}
+
+[data-theme='gw1'] ::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, #c8960c, #a87808);
+  border-radius: 3px;
+}
+
+[data-theme='gw1'] ::-webkit-scrollbar-thumb:hover {
+  background: #e8b820;
+}
+
+

src/styles/themes/heisenberg-breaking-bad.css

@@ -0,0 +1,209 @@
+/* ─── Heisenberg — Breaking Bad ─── */
+@keyframes crystal-pulse {
+
+  0%,
+  100% {
+    text-shadow:
+      0 0 6px rgba(78, 223, 47, 0.60),
+      0 0 18px rgba(78, 223, 47, 0.32),
+      0 0 40px rgba(78, 223, 47, 0.14);
+  }
+
+  50% {
+    text-shadow:
+      0 0 10px rgba(78, 223, 47, 0.80),
+      0 0 28px rgba(78, 223, 47, 0.48),
+      0 0 60px rgba(78, 223, 47, 0.22);
+  }
+}
+
+[data-theme='heisenberg'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2335d4f8%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  /* Breaking Bad palette — crystal blue, BB logo green, hazmat yellow */
+  --ctp-crust: #050709;
+  --ctp-mantle: #080b0e;
+  --ctp-base: #0b0e12;
+  --ctp-surface0: #141a22;
+  --ctp-surface1: #1e2830;
+  --ctp-surface2: #283440;
+  --ctp-overlay0: #3a4e60;
+  --ctp-overlay1: #5a7288;
+  --ctp-overlay2: #7a96a8;
+  --ctp-text: #e4f0f8;
+  --ctp-subtext1: #c0d8e8;
+  --ctp-subtext0: #8ab0c8;
+  --ctp-mauve: #35d4f8;
+  --ctp-lavender: #70e8ff;
+  --ctp-pink: #f05080;
+  --ctp-flamingo: #e84060;
+  --ctp-rosewater: #e4f0f8;
+  --ctp-green: #4edf2f;
+  --ctp-teal: #20c8b0;
+  --ctp-sky: #55ddff;
+  --ctp-blue: #35d4f8;
+  --ctp-sapphire: #1ab8e0;
+  --ctp-yellow: #f0c020;
+  --ctp-peach: #e88040;
+  --ctp-maroon: #a01820;
+  --ctp-red: #e03030;
+
+  --bg-app: #0b0e12;
+  --bg-sidebar: #060a0e;
+  --bg-card: #141a22;
+  --bg-hover: #1e2830;
+  --bg-player: #060809;
+  --bg-glass: rgba(8, 11, 14, 0.92);
+  --accent: #35d4f8;
+  --accent-dim: rgba(53, 212, 248, 0.12);
+  --accent-glow: rgba(53, 212, 248, 0.35);
+  --text-primary: #e4f0f8;
+  --text-secondary: #7a96a8;
+  --text-muted: #7aaabe;
+  --border: rgba(53, 212, 248, 0.14);
+  --border-subtle: rgba(53, 212, 248, 0.06);
+  --border-dropdown: rgba(53, 212, 248, 0.25);
+  --shadow-dropdown: rgba(0, 0, 0, 0.92);
+  --positive: #4edf2f;
+  --warning: #f0c020;
+  --danger: #e03030;
+  --radius-sm: 2px;
+  --radius-md: 4px;
+  --radius-lg: 6px;
+}
+
+/* App shell — periodic table grid (BB opening credits) */
+[data-theme='heisenberg'] .app-shell {
+  background-image:
+    linear-gradient(rgba(53, 212, 248, 0.04) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(53, 212, 248, 0.04) 1px, transparent 1px);
+  background-size: 60px 60px;
+}
+
+/* Sidebar — darker lab space, hazmat tape diagonal (very subtle) */
+[data-theme='heisenberg'] .sidebar {
+  background: #060a0e;
+  border-right: 1px solid rgba(53, 212, 248, 0.14);
+  background-image:
+    repeating-linear-gradient(45deg,
+      transparent 0px,
+      transparent 20px,
+      rgba(240, 192, 32, 0.028) 20px,
+      rgba(240, 192, 32, 0.028) 22px);
+}
+
+/* Player bar — lab fluorescent: crystal blue top glow */
+[data-theme='heisenberg'] .player-bar {
+  background: #060809;
+  border-top: 2px solid #35d4f8;
+  box-shadow: 0 -8px 32px rgba(53, 212, 248, 0.14), 0 -1px 0 rgba(0, 0, 0, 0.9);
+}
+
+/* Track name — BB logo green glow (the Br/Ba element box color) */
+[data-theme='heisenberg'] .player-track-name {
+  color: #4edf2f;
+  animation: crystal-pulse 3s ease-in-out infinite;
+}
+
+/* Artist name — hazmat suit yellow */
+[data-theme='heisenberg'] .player-artist-name {
+  color: #f0c020;
+}
+
+/* Nav active — BB green left bar */
+[data-theme='heisenberg'] .nav-link.active {
+  background: linear-gradient(90deg, rgba(78, 223, 47, 0.12) 0%, transparent 100%);
+  border-left: 3px solid #4edf2f;
+  color: #4edf2f;
+}
+
+[data-theme='heisenberg'] .nav-link:hover:not(.active) {
+  background: linear-gradient(90deg, rgba(53, 212, 248, 0.06) 0%, transparent 100%);
+  border-left: 3px solid rgba(53, 212, 248, 0.28);
+}
+
+/* Content header */
+[data-theme='heisenberg'] .content-header {
+  border-bottom: 1px solid rgba(53, 212, 248, 0.10);
+}
+
+/* Cards — blue crystal border on hover */
+[data-theme='heisenberg'] .album-card:hover,
+[data-theme='heisenberg'] .artist-card:hover {
+  box-shadow: 0 0 0 1px rgba(53, 212, 248, 0.50), 0 4px 20px rgba(53, 212, 248, 0.14);
+}
+
+/* Track / queue rows */
+[data-theme='heisenberg'] .track-row:hover,
+[data-theme='heisenberg'] .queue-item:hover {
+  box-shadow: inset 2px 0 0 #35d4f8;
+  background: rgba(53, 212, 248, 0.05);
+}
+
+/* Primary play button — crystal blue gradient */
+[data-theme='heisenberg'] .player-btn-primary {
+  background: linear-gradient(180deg, #60e4ff 0%, #35d4f8 50%, #18b8e0 100%);
+  color: #060809;
+  box-shadow: 0 0 16px rgba(53, 212, 248, 0.45);
+  border: 1px solid #14a8d0;
+}
+
+[data-theme='heisenberg'] .player-btn-primary:hover {
+  background: linear-gradient(180deg, #7aecff 0%, #50deff 50%, #28caf0 100%);
+  box-shadow: 0 0 26px rgba(53, 212, 248, 0.70);
+}
+
+/* btn-primary */
+[data-theme='heisenberg'] .btn-primary {
+  background: linear-gradient(180deg, #60e4ff 0%, #35d4f8 50%, #18b8e0 100%);
+  color: #060809;
+  border: 1px solid #14a8d0;
+}
+
+[data-theme='heisenberg'] .btn-primary:hover {
+  background: linear-gradient(180deg, #7aecff 0%, #50deff 50%, #28caf0 100%);
+}
+
+/* Hero play button */
+[data-theme='heisenberg'] .hero-play-btn {
+  background: linear-gradient(180deg, #60e4ff 0%, #35d4f8 50%, #18b8e0 100%);
+  color: #060809;
+  border: 1px solid #14a8d0;
+  box-shadow: 0 2px 16px rgba(53, 212, 248, 0.45);
+  transition: filter var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
+}
+
+[data-theme='heisenberg'] .hero-play-btn:hover {
+  background: linear-gradient(180deg, #7aecff 0%, #50deff 50%, #28caf0 100%);
+  box-shadow: 0 4px 26px rgba(53, 212, 248, 0.68);
+  transform: scale(1.02);
+}
+
+/* Album card overlay button */
+[data-theme='heisenberg'] .album-card-details-btn {
+  background: linear-gradient(180deg, #60e4ff 0%, #35d4f8 50%, #18b8e0 100%);
+  color: #060809;
+  border: 1px solid #14a8d0;
+  box-shadow: 0 2px 12px rgba(53, 212, 248, 0.40);
+}
+
+/* Scrollbar — thin blue crystal */
+[data-theme='heisenberg'] ::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+[data-theme='heisenberg'] ::-webkit-scrollbar-track {
+  background: #080b0e;
+}
+
+[data-theme='heisenberg'] ::-webkit-scrollbar-thumb {
+  background: rgba(53, 212, 248, 0.35);
+  border-radius: 3px;
+}
+
+[data-theme='heisenberg'] ::-webkit-scrollbar-thumb:hover {
+  background: #35d4f8;
+}
+

src/styles/themes/index.css

@@ -0,0 +1,122 @@
+@import './_intro.css';
+@import './catppuccin-mocha-variables.css';
+@import './catppuccin-macchiato-variables.css';
+@import './catppuccin-frapp-variables.css';
+@import './catppuccin-latte-variables-light-theme.css';
+@import './latte-light-theme-component-overrides.css';
+@import './nord-polar-night-dark.css';
+@import './nord-snow-storm-light.css';
+@import './nord-frost-deep-ocean-blue.css';
+@import './nord-aurora-dark-aurora-purple.css';
+@import './poison.css';
+@import './classic-winamp-winamp-2-x-base-skin.css';
+@import './wnamp-component-level-overrides.css';
+@import './nucleo-classic-hifi-winamp-brass.css';
+@import './psychowave-synthwave-retrowave.css';
+@import './gruvbox-dark-hard.css';
+@import './gruvbox-dark-medium.css';
+@import './gruvbox-dark-soft.css';
+@import './gruvbox-light-hard.css';
+@import './gruvbox-light-medium.css';
+@import './gruvbox-light-soft.css';
+@import './lambda-17-half-life-city-17.css';
+@import './guild-wars-1-tyria.css';
+@import './grand-theft-audio-gta-v-los-santos-at-night.css';
+@import './v-tactical.css';
+@import './nightcity-2077-cyberpunk-2077.css';
+@import './heisenberg-breaking-bad.css';
+@import './a-theme-of-ice-and-fire-game-of-thrones.css';
+@import './d-oh-matic.css';
+@import './order-of-the-phoenix.css';
+@import './w98.css';
+@import './global-base-settings.css';
+@import './spotless.css';
+@import './cupertino-beats.css';
+@import './dzr0.css';
+@import './reset.css';
+@import './scrollbars.css';
+@import './focus.css';
+@import './global-dragging-state.css';
+@import './mouse-event-dnd-cursor-psy-dragging.css';
+@import './utility-classes.css';
+@import './button-variants.css';
+@import './input.css';
+@import './input-search.css';
+@import './card.css';
+@import './album-grid.css';
+@import './scrollable-area.css';
+@import './divider.css';
+@import './badge.css';
+@import './star-rating.css';
+@import './animations.css';
+@import './progress-range.css';
+@import './loading-spinner.css';
+@import './musicmatch-jukebox-y2k-metallic-silver-blue-display.css';
+@import './wmp8-classic-windows-media-player-8-xp-luna.css';
+@import './powerdvd-classic-virtual-hifi-receiver-vfd-display.css';
+@import './cyberlink-powerdvd.css';
+@import './vintage-tube-radio-1950s-bakelite-vacuum-tube.css';
+@import './windows-7-aero-aero-glass-frutiger-aero.css';
+@import './windows-7-aero-glass.css';
+@import './windows-xp-luna-classic-2001.css';
+@import './windows-xp-luna-teal.css';
+@import './macos-ventura-light.css';
+@import './macos-ventura-dark.css';
+@import './neon-drift.css';
+@import './font-overrides.css';
+@import './middle-earth-epic-fantasy-cinematic.css';
+@import './middle-earth-the-one-ring-inscription-glow.css';
+@import './middle-earth-red-book-of-westmarch.css';
+@import './morpheus-matrix-style.css';
+@import './the-matrix-morpheus.css';
+@import './pandora-bioluminescent-sci-fi.css';
+@import './stark-hud-iron-man-arc-reactor.css';
+@import './blade-cinematic-industrial.css';
+@import './dune-arrakis.css';
+@import './back-to-the-future-hill-valley-85.css';
+@import './ubuntu-unity-ambiance-classic-light.css';
+@import './ubuntu-ambiance-component-level-overrides.css';
+@import './windows-10-fluent-design-light.css';
+@import './windows-vista-aero-glass.css';
+@import './data-theme-aqua-quartz.css';
+@import './spider-tech-spider-man.css';
+@import './ms-dos.css';
+@import './unix-shell.css';
+@import './windows-11-dark-component-overrides.css';
+@import './north-park-south-park.css';
+@import './dark-side-of-the-moon-inspired-pink-floyd.css';
+@import './powerslave-inspired-iron-maiden.css';
+@import './nightfox.css';
+@import './dayfox.css';
+@import './dawnfox.css';
+@import './duskfox.css';
+@import './nordfox.css';
+@import './terafox.css';
+@import './carbonfox.css';
+@import './dracula.css';
+@import './dracula-component-level-overrides.css';
+@import './kanagawa-wave-rebelot-kanagawa-nvim-default-dark.css';
+@import './kanagawa-dragon-rebelot-kanagawa-nvim-high-contrast-dark.css';
+@import './kanagawa-lotus-rebelot-kanagawa-nvim-light.css';
+@import './atom-one-dark-th3whit3wolf-one-nvim-dark-variant.css';
+@import './atom-one-light-th3whit3wolf-one-nvim-light-variant.css';
+@import './1984-juanmnl-vs-1984-default-dark-deep-blue-cyberpunk.css';
+@import './1984-cyberpunk-juanmnl-vs-1984-mint-green-variant.css';
+@import './1984-light-juanmnl-vs-1984-bluish-white.css';
+@import './1984-orwell-juanmnl-vs-1984-sepia-dystopian-variant.css';
+@import './vision-dark-purple-gold-colorblind-safe-deuteranopia-protanopia-tritanopia.css';
+@import './vision-dark-component-level-overrides.css';
+@import './vision-navy-purple-gold-colorblind-safe-deuteranopia-protanopia-tritanopia.css';
+@import './vision-navy-component-level-overrides.css';
+@import './community-themes.css';
+@import './amoled-black-pure.css';
+@import './midnight-blue.css';
+@import './sepia-dark.css';
+@import './volcanic-dark.css';
+@import './deep-forest.css';
+@import './violet-haze.css';
+@import './copper-oxide.css';
+@import './sakura-night.css';
+@import './obsidian-gold.css';
+@import './obsidian-black.css';
+@import './carbon-grey.css';

src/styles/themes/input-search.css

@@ -0,0 +1,24 @@
+/* ─── Input Search ─── */
+.input-search {
+  width: 100%;
+  padding: var(--space-2) var(--space-3);
+  padding-left: 36px;
+  background: var(--ctp-base);
+  border: 1px solid var(--ctp-overlay0);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-size: 13px;
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
+  outline: none;
+}
+
+.input-search::placeholder {
+  color: var(--text-muted);
+}
+
+.input-search:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-dim);
+}
+

src/styles/themes/input.css

@@ -0,0 +1,39 @@
+/* ─── Input ─── */
+.input {
+  width: 100%;
+  padding: var(--space-3) var(--space-4);
+  background: var(--ctp-base);
+  border: 1px solid var(--ctp-overlay0);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-size: 14px;
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
+  outline: none;
+}
+
+.input::placeholder {
+  color: var(--text-muted);
+}
+
+.input:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-dim);
+}
+
+select.input {
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: var(--select-arrow);
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  background-size: 16px;
+  padding-right: 40px;
+  cursor: pointer;
+}
+
+select.input.input:focus {
+  background-image: var(--select-arrow);
+  /* Keep arrow on focus */
+}
+

src/styles/themes/kanagawa-dragon-rebelot-kanagawa-nvim-high-contrast-dark.css

@@ -0,0 +1,56 @@
+/* ─── Kanagawa Dragon (rebelot/kanagawa.nvim — high-contrast dark) ─── */
+[data-theme='kanagawa-dragon'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23c5c9c5%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  --ctp-crust:    #0d0c0c;   /* dragonBlack0 */
+  --ctp-mantle:   #12120f;   /* dragonBlack1 */
+  --ctp-base:     #181616;   /* dragonBlack3 — main bg */
+  --ctp-surface0: #282727;   /* dragonBlack4 */
+  --ctp-surface1: #393836;   /* dragonBlack5 */
+  --ctp-surface2: #625e5a;   /* dragonBlack6 */
+  --ctp-overlay0: #737c73;   /* dragonAsh */
+  --ctp-overlay1: #9e9b93;   /* dragonGray2 */
+  --ctp-overlay2: #a6a69c;   /* dragonGray */
+  --ctp-text:     #c5c9c5;   /* dragonWhite */
+  --ctp-subtext1: #C8C093;   /* oldWhite */
+  --ctp-subtext0: #a6a69c;
+  --ctp-mauve:    #8992a7;   /* dragonViolet */
+  --ctp-lavender: #949fb5;   /* dragonTeal */
+  --ctp-pink:     #a292a3;   /* dragonPink */
+  --ctp-flamingo: #c4746e;   /* dragonRed */
+  --ctp-rosewater:#b6927b;   /* dragonOrange */
+  --ctp-blue:     #8ba4b0;   /* dragonBlue2 */
+  --ctp-sapphire: #8ba4b0;
+  --ctp-sky:      #8ea4a2;   /* dragonAqua */
+  --ctp-teal:     #8ea4a2;
+  --ctp-green:    #8a9a7b;   /* dragonGreen2 */
+  --ctp-yellow:   #c4b28a;   /* dragonYellow */
+  --ctp-peach:    #b98d7b;   /* dragonOrange2 */
+  --ctp-maroon:   #c4746e;
+  --ctp-red:      #c4746e;
+
+  --bg-app:           #181616;
+  --bg-sidebar:       #12120f;
+  --bg-card:          #282727;
+  --bg-hover:         #393836;
+  --bg-player:        #12120f;
+  --bg-glass:         rgba(24, 22, 22, 0.82);
+  --accent:           #8ba4b0;       /* dragonBlue2 */
+  --accent-dim:       rgba(139, 164, 176, 0.16);
+  --accent-glow:      rgba(139, 164, 176, 0.32);
+  --text-primary:     #c5c9c5;       /* dragonWhite */
+  --text-secondary:   #a6a69c;       /* dragonGray */
+  --text-muted:       #737c73;       /* dragonAsh */
+  --border:           #393836;
+  --border-subtle:    #282727;
+  --border-dropdown:  #625e5a;
+  --shadow-dropdown:  rgba(0, 0, 0, 0.7);
+  --positive:         #8a9a7b;       /* dragonGreen2 */
+  --warning:          #c4b28a;       /* dragonYellow */
+  --danger:           #c4746e;       /* dragonRed */
+  --waveform-played:    #8ba4b0;
+  --waveform-buffered:  #625e5a;
+  --waveform-unplayed:  #282727;
+}
+

src/styles/themes/kanagawa-lotus-rebelot-kanagawa-nvim-light.css

@@ -0,0 +1,56 @@
+/* ─── Kanagawa Lotus (rebelot/kanagawa.nvim — light) ─── */
+[data-theme='kanagawa-lotus'] {
+  color-scheme: light;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23545464%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  --ctp-crust:    #d5cea3;   /* lotusWhite0 */
+  --ctp-mantle:   #dcd5ac;   /* lotusWhite1 */
+  --ctp-base:     #f2ecbc;   /* lotusWhite3 — main bg */
+  --ctp-surface0: #e5ddb0;   /* lotusWhite2 */
+  --ctp-surface1: #e7dba0;   /* lotusWhite4 */
+  --ctp-surface2: #e4d794;   /* lotusWhite5 */
+  --ctp-overlay0: #8a8980;   /* lotusGray3 */
+  --ctp-overlay1: #716e61;   /* lotusGray2 */
+  --ctp-overlay2: #545464;   /* lotusInk1 */
+  --ctp-text:     #545464;   /* lotusInk1 */
+  --ctp-subtext1: #43436c;   /* lotusInk2 */
+  --ctp-subtext0: #716e61;
+  --ctp-mauve:    #624c83;   /* lotusViolet4 */
+  --ctp-lavender: #766b90;   /* lotusViolet2 */
+  --ctp-pink:     #b35b79;   /* lotusPink */
+  --ctp-flamingo: #c84053;   /* lotusRed */
+  --ctp-rosewater:#cc6d00;   /* lotusOrange */
+  --ctp-blue:     #4d699b;   /* lotusBlue4 */
+  --ctp-sapphire: #4e8ca2;   /* lotusTeal1 */
+  --ctp-sky:      #6693bf;   /* lotusTeal2 */
+  --ctp-teal:     #597b75;   /* lotusAqua */
+  --ctp-green:    #6f894e;   /* lotusGreen */
+  --ctp-yellow:   #836f4a;   /* lotusYellow2 */
+  --ctp-peach:    #cc6d00;
+  --ctp-maroon:   #c84053;
+  --ctp-red:      #c84053;
+
+  --bg-app:           #f2ecbc;
+  --bg-sidebar:       #dcd5ac;
+  --bg-card:          #d5cea3;
+  --bg-hover:         #e7dba0;
+  --bg-player:        #dcd5ac;
+  --bg-glass:         rgba(242, 236, 188, 0.92);
+  --accent:           #4d699b;       /* lotusBlue4 */
+  --accent-dim:       rgba(77, 105, 155, 0.14);
+  --accent-glow:      rgba(77, 105, 155, 0.26);
+  --text-primary:     #545464;       /* lotusInk1 */
+  --text-secondary:   #43436c;       /* lotusInk2 */
+  --text-muted:       #8a8980;       /* lotusGray3 */
+  --border:           #e7dba0;
+  --border-subtle:    #d5cea3;
+  --border-dropdown:  #716e61;
+  --shadow-dropdown:  rgba(0, 0, 0, 0.18);
+  --positive:         #6f894e;       /* lotusGreen */
+  --warning:          #cc6d00;       /* lotusOrange */
+  --danger:           #c84053;       /* lotusRed */
+  --waveform-played:    #4d699b;
+  --waveform-buffered:  #8a8980;
+  --waveform-unplayed:  #d5cea3;
+}
+

src/styles/themes/kanagawa-wave-rebelot-kanagawa-nvim-default-dark.css

@@ -0,0 +1,56 @@
+/* ─── Kanagawa Wave (rebelot/kanagawa.nvim — default dark) ─── */
+[data-theme='kanagawa-wave'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23DCD7BA%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  --ctp-crust:    #16161D;   /* sumiInk0 */
+  --ctp-mantle:   #181820;   /* sumiInk1 */
+  --ctp-base:     #1F1F28;   /* sumiInk3 — main bg */
+  --ctp-surface0: #2A2A37;   /* sumiInk4 */
+  --ctp-surface1: #363646;   /* sumiInk5 */
+  --ctp-surface2: #54546D;   /* sumiInk6 */
+  --ctp-overlay0: #727169;   /* fujiGray */
+  --ctp-overlay1: #938AA9;   /* springViolet1 */
+  --ctp-overlay2: #C8C093;   /* oldWhite */
+  --ctp-text:     #DCD7BA;   /* fujiWhite */
+  --ctp-subtext1: #C8C093;   /* oldWhite */
+  --ctp-subtext0: #9CABCA;   /* springViolet2 */
+  --ctp-mauve:    #957FB8;   /* oniViolet */
+  --ctp-lavender: #b8b4d0;   /* oniViolet2 */
+  --ctp-pink:     #D27E99;   /* sakuraPink */
+  --ctp-flamingo: #E46876;   /* waveRed */
+  --ctp-rosewater:#FFA066;   /* surimiOrange */
+  --ctp-blue:     #7E9CD8;   /* crystalBlue */
+  --ctp-sapphire: #7FB4CA;   /* springBlue */
+  --ctp-sky:      #A3D4D5;   /* lightBlue */
+  --ctp-teal:     #7AA89F;   /* waveAqua2 */
+  --ctp-green:    #98BB6C;   /* springGreen */
+  --ctp-yellow:   #E6C384;   /* carpYellow */
+  --ctp-peach:    #FFA066;   /* surimiOrange */
+  --ctp-maroon:   #FF5D62;   /* peachRed */
+  --ctp-red:      #E46876;   /* waveRed */
+
+  --bg-app:           #1F1F28;
+  --bg-sidebar:       #181820;
+  --bg-card:          #2A2A37;
+  --bg-hover:         #363646;
+  --bg-player:        #181820;
+  --bg-glass:         rgba(31, 31, 40, 0.78);
+  --accent:           #7E9CD8;       /* crystalBlue — signature Kanagawa accent */
+  --accent-dim:       rgba(126, 156, 216, 0.16);
+  --accent-glow:      rgba(126, 156, 216, 0.32);
+  --text-primary:     #DCD7BA;       /* fujiWhite */
+  --text-secondary:   #C8C093;       /* oldWhite */
+  --text-muted:       #727169;       /* fujiGray */
+  --border:           #363646;
+  --border-subtle:    #2A2A37;
+  --border-dropdown:  #54546D;
+  --shadow-dropdown:  rgba(0, 0, 0, 0.6);
+  --positive:         #98BB6C;       /* springGreen */
+  --warning:          #E6C384;       /* carpYellow */
+  --danger:           #E46876;       /* waveRed */
+  --waveform-played:    #7E9CD8;
+  --waveform-buffered:  #54546D;
+  --waveform-unplayed:  #2A2A37;
+}
+

src/styles/themes/lambda-17-half-life-city-17.css

@@ -0,0 +1,236 @@
+/* ─── Lambda 17 — Half-Life / City 17 ─── */
+/* HEV orange + Combine Overwatch teal + City 17 concrete       */
+[data-theme='lambda-17'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ff9d00%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  /* City 17 — warm concrete dark, not pure black */
+  --ctp-crust: #0c0d0e;
+  --ctp-mantle: #111315;
+  --ctp-base: #171a1c;
+  --ctp-surface0: #1f2326;
+  --ctp-surface1: #282d30;
+  --ctp-surface2: #33393d;
+  --ctp-overlay0: #4e5660;
+  --ctp-overlay1: #718090;
+  --ctp-overlay2: #96a8b4;
+  --ctp-text: #e4ddd0;
+  /* concrete dust off-white */
+  --ctp-subtext1: #c8c0b0;
+  --ctp-subtext0: #96a8b4;
+
+  /* Half-Life palette */
+  --ctp-peach: #ff9d00;
+  /* HEV suit orange */
+  --ctp-mauve: #ff9d00;
+  --ctp-lavender: #ffb84d;
+  --ctp-flamingo: #ffb84d;
+  --ctp-rosewater: #ffd080;
+  --ctp-teal: #00c8c0;
+  /* Combine Overwatch scanner teal */
+  --ctp-sky: #00c8c0;
+  --ctp-sapphire: #0090a0;
+  --ctp-blue: #0060a0;
+  /* G-Man suit navy */
+  --ctp-green: #78c800;
+  /* Headcrab / barnacle green */
+  --ctp-yellow: #f0d000;
+  /* radiation warning yellow */
+  --ctp-red: #e03020;
+  /* danger / health critical */
+  --ctp-maroon: #b82010;
+  --ctp-pink: #cc44aa;
+  /* Xen alien purple-pink */
+
+  --bg-app: #171a1c;
+  /* City 17 corridor concrete */
+  --bg-sidebar: #111315;
+  /* Combine facility wall */
+  --bg-card: #1f2326;
+  --bg-hover: rgba(255, 157, 0, 0.08);
+  --bg-player: #0c0d0e;
+  /* HEV suit display dark */
+  --bg-glass: rgba(17, 19, 21, 0.95);
+
+  --accent: #ff9d00;
+  /* HEV orange */
+  --accent-dim: rgba(255, 157, 0, 0.13);
+  --accent-glow: rgba(255, 157, 0, 0.45);
+  --volume-accent: #00c8c0;
+  /* Combine teal for volume */
+
+  --text-primary: #e4ddd0;
+  /* concrete dust off-white */
+  --text-secondary: #00c8c0;
+  /* Combine Overwatch teal */
+  --text-muted: #4e5660;
+  --border: #2a3035;
+  --border-subtle: #1f2326;
+  --shadow-dropdown: rgba(0, 0, 0, 0.85);
+
+  --positive: #78c800;
+  --warning: #ff9d00;
+  --danger: #e03020;
+
+  --radius-sm: 0px;
+  --radius-md: 1px;
+  --radius-lg: 2px;
+  --radius-xl: 3px;
+}
+
+/* Sidebar = Combine control panel: horizontal panel lines */
+[data-theme='lambda-17'] .sidebar {
+  border-right: 2px solid #ff9d00;
+  box-shadow: 2px 0 12px rgba(255, 157, 0, 0.08);
+  background-image: repeating-linear-gradient(0deg,
+      transparent,
+      transparent 28px,
+      rgba(0, 200, 192, 0.04) 28px,
+      rgba(0, 200, 192, 0.04) 29px);
+}
+
+/* Player bar = HEV suit monitor: orange top + teal secondary */
+[data-theme='lambda-17'] .player-bar {
+  border-top: 2px solid #ff9d00;
+  box-shadow:
+    0 -1px 0 rgba(0, 200, 192, 0.3),
+    0 -6px 24px rgba(255, 157, 0, 0.07);
+}
+
+/* Track name = HEV announcement style */
+[data-theme='lambda-17'] .player-track-name {
+  color: #ff9d00;
+  text-shadow: 0 0 10px rgba(255, 157, 0, 0.65), 0 0 24px rgba(255, 157, 0, 0.25);
+  text-transform: uppercase;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+}
+
+/* Artist = Combine Overwatch voice color */
+[data-theme='lambda-17'] .player-track-artist {
+  color: #00c8c0;
+}
+
+/* Queue album = Xen purple */
+[data-theme='lambda-17'] .queue-meta-album {
+  color: #cc44aa;
+}
+
+/* Active nav: HEV orange gradient */
+[data-theme='lambda-17'] .nav-link.active {
+  background: linear-gradient(90deg, rgba(255, 157, 0, 0.16) 0%, transparent 100%);
+  color: #ff9d00;
+}
+
+[data-theme='lambda-17'] .nav-link.active::before {
+  width: 3px;
+  box-shadow: 2px 0 10px rgba(255, 157, 0, 0.6);
+}
+
+/* Buttons */
+[data-theme='lambda-17'] .btn-primary {
+  background: #ff9d00;
+  color: #0c0d0e;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  border: none;
+  border-radius: 1px;
+}
+
+[data-theme='lambda-17'] .btn-primary:hover {
+  background: #ffb030;
+}
+
+/* Queue active = HEV orange lambda bar */
+[data-theme='lambda-17'] .queue-item.active {
+  background: rgba(255, 157, 0, 0.08);
+  box-shadow: inset 3px 0 0 #ff9d00;
+}
+
+[data-theme='lambda-17'] .np-queue-item.active {
+  background: rgba(255, 157, 0, 0.07);
+}
+
+[data-theme='lambda-17'] .np-queue-item-active {
+  color: #ff9d00;
+  text-shadow: 0 0 8px rgba(255, 157, 0, 0.55);
+}
+
+/* Now-playing active track = Combine teal */
+[data-theme='lambda-17'] .np-album-track.active .np-album-track-title,
+[data-theme='lambda-17'] .np-album-track.active .np-album-track-num {
+  color: #00c8c0;
+  text-shadow: 0 0 8px rgba(0, 200, 192, 0.5);
+}
+
+/* Hover rows */
+[data-theme='lambda-17'] .track-row:hover,
+[data-theme='lambda-17'] .track-row.context-active {
+  background: rgba(255, 157, 0, 0.07) !important;
+  box-shadow: inset 3px 0 0 #ff9d00;
+}
+
+[data-theme='lambda-17'] .queue-item:hover,
+[data-theme='lambda-17'] .queue-item.context-active {
+  background: rgba(255, 157, 0, 0.07) !important;
+  box-shadow: inset 3px 0 0 #ff9d00;
+}
+
+[data-theme='lambda-17'] .np-queue-item:hover,
+[data-theme='lambda-17'] .np-queue-item.context-active {
+  background: rgba(255, 157, 0, 0.07);
+  box-shadow: inset 2px 0 0 #ff9d00;
+}
+
+[data-theme='lambda-17'] .artist-row:hover {
+  background: rgba(255, 157, 0, 0.06);
+  box-shadow: inset 3px 0 0 #ff9d00;
+}
+
+[data-theme='lambda-17'] .playlist-row:hover {
+  background: rgba(255, 157, 0, 0.06);
+  box-shadow: inset 3px 0 0 #ff9d00;
+}
+
+/* Settings tabs: Combine teal when active */
+[data-theme='lambda-17'] .settings-tab:hover {
+  background: rgba(255, 157, 0, 0.07);
+  color: #ff9d00;
+}
+
+[data-theme='lambda-17'] .settings-tab.active {
+  background: rgba(0, 200, 192, 0.08);
+  color: #00c8c0;
+  box-shadow: inset 3px 0 0 #00c8c0;
+}
+
+/* Queue tabs */
+[data-theme='lambda-17'] .queue-tab-btn:hover {
+  background: rgba(255, 157, 0, 0.07);
+  color: #ff9d00;
+}
+
+/* Dropdowns */
+[data-theme='lambda-17'] .custom-select-trigger:hover {
+  background: rgba(255, 157, 0, 0.07);
+}
+
+[data-theme='lambda-17'] .custom-select-option:hover {
+  background: rgba(255, 157, 0, 0.1) !important;
+  color: #ff9d00 !important;
+}
+
+/* Artist pills = headcrab green */
+[data-theme='lambda-17'] .artist-ext-link:hover {
+  background: rgba(120, 200, 0, 0.1);
+  color: #78c800 !important;
+  border-color: rgba(120, 200, 0, 0.4) !important;
+}
+
+/* Connection indicators */
+[data-theme='lambda-17'] .connection-type,
+[data-theme='lambda-17'] .connection-server {
+  color: #00c8c0;
+}
+

src/styles/themes/latte-light-theme-component-overrides.css

@@ -0,0 +1,29 @@
+/* ─── Latte light-theme component overrides ─── */
+[data-theme='latte'] {
+  --border-dropdown: var(--border);
+  --shadow-dropdown: rgba(0, 0, 0, 0.12);
+}
+
+[data-theme='latte'] .album-detail-back {
+  color: rgba(255, 255, 255, 0.85);
+}
+[data-theme='latte'] .album-detail-back:hover {
+  background: rgba(255, 255, 255, 0.15);
+  color: #ffffff;
+}
+
+[data-theme='latte'] .np-artist-album { color: var(--text-secondary); }
+[data-theme='latte'] .np-badge { background: var(--bg-hover); color: var(--text-primary); }
+[data-theme='latte'] .np-star-btn { color: var(--text-muted); }
+[data-theme='latte'] .np-tag-cloud-header { color: var(--text-muted); }
+[data-theme='latte'] .np-tag { background: var(--bg-hover); color: var(--text-secondary); }
+[data-theme='latte'] .np-album-track:hover { background: var(--bg-hover); }
+[data-theme='latte'] .np-album-track.active { background: color-mix(in srgb, var(--accent) 10%, transparent); }
+[data-theme='latte'] .np-album-track-num { color: var(--text-muted); }
+[data-theme='latte'] .np-album-track-title { color: var(--text-primary); }
+[data-theme='latte'] .np-album-track.active .np-album-track-title { color: var(--accent); }
+[data-theme='latte'] .np-album-track-dur { color: var(--text-muted); }
+[data-theme='latte'] .np-link:hover { color: var(--accent); }
+[data-theme='latte'] .np-radio-time { color: var(--text-muted); }
+[data-theme='latte'] .np-bio-text { color: var(--text-secondary); }
+

src/styles/themes/loading-spinner.css

@@ -0,0 +1,10 @@
+/* ─── Loading Spinner ─── */
+.spinner {
+  width: 24px;
+  height: 24px;
+  border: 2px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+}
+

src/styles/themes/macos-ventura-dark.css

@@ -0,0 +1,122 @@
+/* ─── macOS Ventura Dark ─── */
+[data-theme='cupertino-dark'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2398989d%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  /* Palette */
+  --ctp-crust: #0d0d0e;
+  --ctp-mantle: #161617;
+  --ctp-base: #1e1e1f;
+  --ctp-surface0: #2d2d2f;
+  --ctp-surface1: #3a3a3c;
+  --ctp-surface2: #48484a;
+  --ctp-overlay0: #636366;
+  --ctp-overlay1: #8e8e93;
+  --ctp-overlay2: #aeaeb2;
+  --ctp-text: #f5f5f7;
+  --ctp-subtext1: #e5e5ea;
+  --ctp-subtext0: #c7c7cc;
+  --ctp-mauve: #007aff;
+  --ctp-lavender: #409cff;
+  --ctp-green: #30d158;
+  --ctp-teal: #5ac8fa;
+  --ctp-sky: #32ade6;
+  --ctp-blue: #007aff;
+  --ctp-sapphire: #0a84ff;
+  --ctp-pink: #ff375f;
+  --ctp-flamingo: #ff6b81;
+  --ctp-rosewater: #ffd6d6;
+  --ctp-yellow: #ffd60a;
+  --ctp-peach: #ff9f0a;
+  --ctp-maroon: #c0392b;
+  --ctp-red: #ff453a;
+
+  /* Semantic tokens */
+  --bg-app: #1e1e1f;
+  --bg-sidebar: #161617;
+  --bg-card: #2d2d2f;
+  --bg-hover: #3a3a3c;
+  --bg-player: rgba(16, 16, 17, 0.90);
+  --bg-glass: rgba(30, 30, 31, 0.80);
+  --accent: #007aff;
+  --accent-dim: rgba(0, 122, 255, 0.15);
+  --accent-glow: rgba(0, 122, 255, 0.35);
+  --text-primary: #f5f5f7;
+  --text-secondary: #c7c7cc;
+  --text-muted: #8e8e93;
+  --border: #3a3a3c;
+  --border-subtle: #2d2d2f;
+  --positive: #30d158;
+  --warning: #ff9f0a;
+  --danger: #ff453a;
+
+  --shadow-dropdown: 0 8px 30px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.30);
+}
+
+[data-theme='cupertino-dark'] .app-shell {
+  background: #1e1e1f;
+}
+
+[data-theme='cupertino-dark'] .sidebar {
+  background: rgba(22, 22, 23, 0.90);
+  backdrop-filter: blur(25px);
+  -webkit-backdrop-filter: blur(25px);
+  border-right: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+[data-theme='cupertino-dark'] .player-bar {
+  background: rgba(16, 16, 17, 0.90);
+  backdrop-filter: blur(25px);
+  -webkit-backdrop-filter: blur(25px);
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+[data-theme='cupertino-dark'] .player-btn:hover {
+  color: #007aff;
+  background: rgba(0, 122, 255, 0.12);
+}
+
+[data-theme='cupertino-dark'] .player-btn-primary {
+  color: #ffffff;
+  background: #007aff;
+  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.40);
+}
+
+[data-theme='cupertino-dark'] .player-btn-primary:hover {
+  background: #0a84ff;
+  box-shadow: 0 4px 14px rgba(0, 122, 255, 0.50);
+}
+
+/* Nav links */
+[data-theme='cupertino-dark'] .nav-link.active {
+  background: #007aff;
+  color: #ffffff;
+  border-left-color: transparent;
+  border-radius: 8px;
+}
+
+[data-theme='cupertino-dark'] .nav-link.active::before {
+  display: none;
+}
+
+[data-theme='cupertino-dark'] .nav-link-nowplaying {
+  color: #409cff;
+  font-weight: 600;
+}
+
+/* Queue active */
+[data-theme='cupertino-dark'] .queue-item.active {
+  background: rgba(0, 122, 255, 0.15);
+  color: #007aff;
+}
+
+/* NowPlaying overrides */
+[data-theme='cupertino-dark'] .np-queue-item-active {
+  color: #007aff;
+}
+
+[data-theme='cupertino-dark'] .np-album-track.active .np-album-track-title,
+[data-theme='cupertino-dark'] .np-album-track.active .np-album-track-num {
+  color: #007aff;
+}
+

src/styles/themes/macos-ventura-light.css

@@ -0,0 +1,149 @@
+/* ─── macOS Ventura Light ─── */
+[data-theme='cupertino-light'] {
+  color-scheme: light;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23636366%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  /* Palette */
+  --ctp-crust: #f5f5f7;
+  --ctp-mantle: #e8e8ed;
+  --ctp-base: #ffffff;
+  --ctp-surface0: #f2f2f7;
+  --ctp-surface1: #e5e5ea;
+  --ctp-surface2: #d1d1d6;
+  --ctp-overlay0: #8e8e93;
+  --ctp-overlay1: #6c6c70;
+  --ctp-overlay2: #48484a;
+  --ctp-text: #1c1c1e;
+  --ctp-subtext1: #3a3a3c;
+  --ctp-subtext0: #636366;
+  --ctp-mauve: #0071e3;
+  --ctp-lavender: #2c9af0;
+  --ctp-green: #34c759;
+  --ctp-teal: #5ac8fa;
+  --ctp-sky: #32ade6;
+  --ctp-blue: #0071e3;
+  --ctp-sapphire: #0051a8;
+  --ctp-pink: #ff2d55;
+  --ctp-flamingo: #ff6b81;
+  --ctp-rosewater: #ffd6d6;
+  --ctp-yellow: #ffd60a;
+  --ctp-peach: #ff9f0a;
+  --ctp-maroon: #c0392b;
+  --ctp-red: #ff3b30;
+
+  /* Semantic tokens */
+  --bg-app: #ffffff;
+  --bg-sidebar: #f2f2f7;
+  --bg-card: #ffffff;
+  --bg-hover: #f2f2f7;
+  --bg-player: rgba(255, 255, 255, 0.85);
+  --bg-glass: rgba(255, 255, 255, 0.72);
+  --accent: #0071e3;
+  --accent-dim: rgba(0, 113, 227, 0.12);
+  --accent-glow: rgba(0, 113, 227, 0.30);
+  --text-primary: #1c1c1e;
+  --text-secondary: #3a3a3c;
+  --text-muted: #6d6d72;
+  --border: #d1d1d6;
+  --border-subtle: #e5e5ea;
+  --positive: #34c759;
+  --warning: #ff9f0a;
+  --danger: #ff3b30;
+
+  --shadow-dropdown: 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+[data-theme='cupertino-light'] .app-shell {
+  background: #f2f2f7;
+}
+
+[data-theme='cupertino-light'] .sidebar {
+  background: rgba(242, 242, 247, 0.85);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-right: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+[data-theme='cupertino-light'] .player-bar {
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-top: 1px solid rgba(0, 0, 0, 0.10);
+  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.06);
+}
+
+/* Player text: dark on light bar */
+[data-theme='cupertino-light'] .player-track-name {
+  color: #1c1c1e;
+}
+
+[data-theme='cupertino-light'] .player-track-artist {
+  color: #636366;
+}
+
+[data-theme='cupertino-light'] .player-time {
+  color: #636366;
+}
+
+[data-theme='cupertino-light'] .player-btn {
+  color: #1c1c1e;
+}
+
+[data-theme='cupertino-light'] .player-btn:hover {
+  color: #0071e3;
+  background: rgba(0, 113, 227, 0.10);
+}
+
+[data-theme='cupertino-light'] .player-btn-primary {
+  color: #ffffff;
+  background: #0071e3;
+  box-shadow: 0 2px 8px rgba(0, 113, 227, 0.35);
+}
+
+[data-theme='cupertino-light'] .player-btn-primary:hover {
+  background: #0077ed;
+  box-shadow: 0 4px 12px rgba(0, 113, 227, 0.45);
+}
+
+/* Nav links */
+[data-theme='cupertino-light'] .nav-link {
+  color: #3a3a3c;
+}
+
+[data-theme='cupertino-light'] .nav-link:hover {
+  background: rgba(0, 0, 0, 0.06);
+  color: #1c1c1e;
+}
+
+[data-theme='cupertino-light'] .nav-link.active {
+  background: #0071e3;
+  color: #ffffff;
+  border-left-color: transparent;
+  border-radius: 8px;
+}
+
+[data-theme='cupertino-light'] .nav-link.active::before {
+  display: none;
+}
+
+[data-theme='cupertino-light'] .nav-link-nowplaying {
+  color: #0071e3;
+  font-weight: 600;
+}
+
+/* Queue active */
+[data-theme='cupertino-light'] .queue-item.active {
+  background: rgba(0, 113, 227, 0.10);
+  color: #0071e3;
+}
+
+/* NowPlaying overrides */
+[data-theme='cupertino-light'] .np-queue-item-active {
+  color: #0071e3;
+}
+
+[data-theme='cupertino-light'] .np-album-track.active .np-album-track-title,
+[data-theme='cupertino-light'] .np-album-track.active .np-album-track-num {
+  color: #0071e3;
+}
+

src/styles/themes/middle-earth-epic-fantasy-cinematic.css

@@ -0,0 +1,4 @@
+/* ─────────────────────────────────────────────────────────────
+   Middle Earth — Epic Fantasy / Cinematic
+   ───────────────────────────────────────────────────────────── */
+

src/styles/themes/middle-earth-red-book-of-westmarch.css

@@ -0,0 +1,589 @@
+/* ─── Middle-Earth — Red Book of Westmarch ─── */
+[data-theme='middle-earth'] {
+  color-scheme: light;
+  --color-star-active: #8c6800;
+  --color-star-inactive: #b8985a;
+
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%234a3728%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  /* ── Palette ── */
+  /* Warm — Shire, Rohan, Dwarvish gold */
+  --ctp-crust: #1a1008;
+  --ctp-mantle: #281808;
+  --ctp-base: #f0e0b0;
+  --ctp-surface0: #e8d498;
+  --ctp-surface1: #dcc482;
+  --ctp-surface2: #ccb06e;
+  --ctp-overlay0: #8a7250;
+  --ctp-overlay1: #6a5438;
+  --ctp-overlay2: #4a3828;
+  --ctp-text: #1e1408;
+  --ctp-subtext1: #3e2c1a;
+  --ctp-subtext0: #5e4a30;
+  /* Gold of the One Ring */
+  --ctp-mauve: #d4a820;
+  --ctp-lavender: #f0d060;
+  --ctp-yellow: #f8e880;
+  --ctp-peach: #b88010;
+  /* Shire green, Rivendell silver, Elvish blue */
+  --ctp-green: #4a7038;
+  --ctp-teal: #3a6858;
+  --ctp-sky: #7898b8;
+  --ctp-blue: #486888;
+  --ctp-sapphire: #2a4868;
+  /* Mordor / danger */
+  --ctp-red: #8a2820;
+  --ctp-maroon: #5a1818;
+  --ctp-flamingo: #b05838;
+  --ctp-pink: #904868;
+  --ctp-rosewater: #e8c8a8;
+
+  /* ── Semantic tokens ── */
+  --bg-app: #f0e0b0;
+  --bg-sidebar: #241a0e;
+  /* Bag End — old oak wood, hearthlit */
+  --bg-card: #f4e8c0;
+  --bg-hover: rgba(180, 130, 20, 0.12);
+  --bg-player: #1a1008;
+  /* Orodruin / the forge-dark */
+  --bg-glass: rgba(244, 232, 192, 0.92);
+  --accent: #d4a820;
+  --accent-dim: rgba(212, 168, 32, 0.16);
+  --accent-glow: rgba(212, 168, 32, 0.45);
+  --volume-accent: #d4a820;
+  --text-primary: #1e1408;
+  --text-secondary: #3e2c1a;
+  --text-muted: #5a4428;
+  --border: rgba(122, 92, 24, 0.85);
+  --border-subtle: rgba(180, 140, 50, 0.18);
+  --positive: #4a7038;
+  --warning: #805408;
+  --danger: #8a2820;
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+}
+
+/* ── App shell: parchment map of Middle-Earth ── */
+/* Three-layer: warm gold illumination top-right (candlelight),
+   ember glow bottom-left (hearth), radial vignette darkening corners */
+[data-theme='middle-earth'] .app-shell {
+  background:
+    radial-gradient(ellipse at center, transparent 50%, rgba(60, 38, 18, 0.12) 100%),
+    radial-gradient(ellipse at 78% 18%, rgba(220, 180, 60, 0.08) 0%, transparent 50%),
+    radial-gradient(ellipse at 15% 88%, rgba(180, 110, 20, 0.07) 0%, transparent 45%),
+    linear-gradient(155deg, #f4e8c0 0%, #eed8a0 50%, #e8d098 100%);
+}
+
+/* Parchment grain overlay — the texture of the Red Book's pages */
+[data-theme='middle-earth'] .app-shell::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 9999;
+  opacity: 0.045;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  background-size: 200px 200px;
+}
+
+/* ── Sidebar: Bag End oak paneling ── */
+/* Old Shire craftsmanship — vertical wood grain, warm hearthlight from right edge */
+[data-theme='middle-earth'] .sidebar {
+  background-color: #221608;
+  background-image: linear-gradient(180deg, #261a0a 0%, #1e1408 55%, #241c0e 100%);
+  border-right: 2px solid rgba(200, 160, 40, 0.28);
+  box-shadow:
+    inset -3px 0 12px rgba(200, 140, 30, 0.10),
+    2px 0 8px rgba(0, 0, 0, 0.50);
+}
+
+/* Sidebar text: warm candlelight on dark oak */
+[data-theme='middle-earth'] .nav-link {
+  color: #c8a060;
+}
+
+[data-theme='middle-earth'] .nav-link:hover {
+  background: rgba(212, 168, 32, 0.12);
+  color: #f0d880;
+}
+
+[data-theme='middle-earth'] .nav-link.active {
+  background: linear-gradient(90deg, rgba(212, 168, 32, 0.22) 0%, transparent 100%);
+  color: #f0d060;
+  border-left: 2px solid #d4a820;
+  box-shadow: inset 4px 0 18px rgba(212, 168, 32, 0.12);
+}
+
+[data-theme='middle-earth'] .nav-link.active::before {
+  background: #d4a820;
+  box-shadow: 0 0 10px rgba(212, 168, 32, 0.80), 0 0 20px rgba(212, 168, 32, 0.40);
+}
+
+[data-theme='middle-earth'] .nav-link.active svg {
+  color: #d4a820;
+}
+
+[data-theme='middle-earth'] .nav-section-label {
+  color: #b88a50;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  font-size: 0.67em;
+  font-family: Georgia, 'Book Antiqua', serif;
+}
+
+/* ── Player bar: Sammath Naur — the fires of Orodruin ── */
+/* Near-black volcanic dark, sealed with the gold of the Ring */
+[data-theme='middle-earth'] .player-bar {
+  background: linear-gradient(180deg, #1c1208 0%, #100c04 100%);
+  border-top: 2px solid rgba(212, 168, 32, 0.58);
+  box-shadow:
+    inset 0 1px 0 rgba(240, 200, 60, 0.22),
+    0 -8px 40px rgba(180, 120, 20, 0.20),
+    0 -20px 70px rgba(160, 100, 15, 0.09);
+}
+
+/* Track name: THE ONE RING INSCRIPTION — breathing gold fire */
+[data-theme='middle-earth'] .player-track-name {
+  color: #f0d060;
+  font-family: Georgia, 'Book Antiqua', 'Palatino Linotype', Palatino, serif;
+  letter-spacing: 0.06em;
+  font-weight: 600;
+  animation: ring-inscription-glow 5s ease-in-out infinite;
+}
+
+/* Artist: Elvish silver on the dark forge */
+[data-theme='middle-earth'] .player-track-artist {
+  color: #b8985a;
+  font-family: Georgia, 'Book Antiqua', serif;
+  letter-spacing: 0.03em;
+  opacity: 1;
+}
+
+[data-theme='middle-earth'] .player-time {
+  color: #a88048;
+}
+
+/* ── Transport buttons: Mithril-crafted, hearthlit ── */
+[data-theme='middle-earth'] .player-btn,
+[data-theme='middle-earth'] .player-btn-primary {
+  background: linear-gradient(180deg, #2e2010 0%, #1e1408 100%);
+  color: #d4a820;
+  border: 1px solid rgba(212, 168, 32, 0.38);
+  border-radius: 50%;
+  box-shadow: inset 0 1px 0 rgba(240, 200, 60, 0.10), 0 2px 6px rgba(0, 0, 0, 0.60);
+}
+
+[data-theme='middle-earth'] .player-btn:hover,
+[data-theme='middle-earth'] .player-btn-primary:hover {
+  background: rgba(212, 168, 32, 0.14);
+  border-color: #d4a820;
+  color: #f0d060;
+  box-shadow:
+    0 0 16px rgba(212, 168, 32, 0.48),
+    inset 0 0 8px rgba(200, 140, 20, 0.10);
+}
+
+/* ── Regular buttons: parchment scroll / carved Shire wood ── */
+[data-theme='middle-earth'] .btn,
+[data-theme='middle-earth'] .btn-surface,
+[data-theme='middle-earth'] .btn-ghost {
+  background: linear-gradient(180deg, #f8f0d0 0%, #e8d898 50%, #dece88 100%);
+  color: #2a1c0e;
+  border: 1px solid rgba(160, 120, 40, 0.48);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.65),
+    inset 1px 0 0 rgba(255, 255, 255, 0.45),
+    0 1px 3px rgba(80, 50, 10, 0.22);
+  border-radius: 6px;
+  font-family: Georgia, 'Book Antiqua', serif;
+}
+
+[data-theme='middle-earth'] .btn:hover,
+[data-theme='middle-earth'] .btn-surface:hover,
+[data-theme='middle-earth'] .btn-ghost:hover {
+  background: linear-gradient(180deg, #fffff0 0%, #f0e8a8 50%, #e8d890 100%);
+  border-color: rgba(180, 140, 40, 0.70);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.80),
+    0 1px 4px rgba(80, 50, 10, 0.20),
+    0 0 8px rgba(212, 168, 32, 0.18);
+}
+
+/* ── Primary button: One Ring gold — the most precious craftsmanship ── */
+[data-theme='middle-earth'] .btn-primary {
+  background: linear-gradient(180deg, #e8bc28 0%, #c8940c 50%, #aa7808 100%);
+  color: #1a1008;
+  border: 1px solid #c89818;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 240, 100, 0.45),
+    0 0 16px rgba(212, 168, 32, 0.42),
+    0 2px 4px rgba(80, 50, 0, 0.30);
+  border-radius: 6px;
+  font-weight: 700;
+  font-family: Georgia, 'Book Antiqua', serif;
+}
+
+[data-theme='middle-earth'] .btn-primary:hover {
+  background: linear-gradient(180deg, #f8cc38 0%, #d8a018 50%, #bc8810 100%);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 240, 100, 0.55),
+    0 0 24px rgba(212, 168, 32, 0.60),
+    0 2px 6px rgba(80, 50, 0, 0.28);
+}
+
+/* ── Hero / album-card play buttons: solid One Ring gold ── */
+/* These appear on dark album-art overlays — must be fully opaque and prominent */
+[data-theme='middle-earth'] .hero-play-btn,
+[data-theme='middle-earth'] .album-card-details-btn {
+  background: linear-gradient(180deg, #e8bc28 0%, #c8940c 50%, #aa7808 100%);
+  color: #1a1008;
+  border: 1px solid #c89818;
+  font-family: Georgia, 'Book Antiqua', serif;
+  font-weight: 700;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 240, 100, 0.45),
+    0 0 14px rgba(212, 168, 32, 0.38),
+    0 2px 6px rgba(0, 0, 0, 0.40);
+}
+
+[data-theme='middle-earth'] .hero-play-btn:hover,
+[data-theme='middle-earth'] .album-card-details-btn:hover {
+  background: linear-gradient(180deg, #f8cc38 0%, #d8a018 50%, #bc8810 100%);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 240, 100, 0.55),
+    0 0 22px rgba(212, 168, 32, 0.58),
+    0 2px 8px rgba(0, 0, 0, 0.35);
+  filter: none;
+}
+
+/* ── Queue round buttons ── */
+[data-theme='middle-earth'] .queue-round-btn {
+  background: linear-gradient(180deg, #f0e4b0 0%, #dece88 100%);
+  color: #4a3828;
+  border: 1px solid rgba(150, 112, 38, 0.40);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 2px rgba(80, 50, 10, 0.18);
+}
+
+[data-theme='middle-earth'] .queue-round-btn:hover:not(:disabled):not(.active) {
+  background: linear-gradient(180deg, #fffff0 0%, #f0e4a0 100%);
+  border-color: rgba(180, 140, 40, 0.60);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.70), 0 0 8px rgba(212, 168, 32, 0.22);
+  color: #2a1c0e;
+}
+
+[data-theme='middle-earth'] .queue-round-btn.active {
+  background: linear-gradient(180deg, #e8bc28 0%, #c8940c 100%);
+  color: #1a1008;
+  border-color: #c89818;
+  box-shadow: 0 0 14px rgba(212, 168, 32, 0.45), inset 0 1px 0 rgba(255, 240, 100, 0.35);
+}
+
+/* ── Cards: leaves of the Red Book — layered parchment ── */
+[data-theme='middle-earth'] .card {
+  background: linear-gradient(180deg, #f8f0d0 0%, #f0e4b8 100%);
+  border: 1px solid rgba(168, 130, 48, 0.32);
+  border-radius: 10px;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.70),
+    0 2px 8px rgba(80, 50, 10, 0.16),
+    0 4px 16px rgba(60, 38, 10, 0.08);
+}
+
+/* ── Content header: illuminated manuscript chapter heading ── */
+/* The gold ruled border at the bottom is the decorative line
+   that separates the chapter title from the body of the text  */
+[data-theme='middle-earth'] .content-header {
+  position: relative;
+  background: linear-gradient(180deg, #f8f0d0 0%, #f0e4b8 100%);
+  border-bottom: 2px solid rgba(200, 158, 38, 0.45);
+  box-shadow: 0 3px 14px rgba(120, 80, 15, 0.12);
+}
+
+/* The gold rule — fades at edges like gold leaf on vellum */
+[data-theme='middle-earth'] .content-header::after {
+  content: '';
+  position: absolute;
+  bottom: -3px;
+  left: 8%;
+  right: 8%;
+  height: 1px;
+  background: linear-gradient(90deg, transparent 0%, rgba(212, 168, 32, 0.65) 20%,
+      rgba(240, 210, 60, 0.85) 50%, rgba(212, 168, 32, 0.65) 80%, transparent 100%);
+  pointer-events: none;
+}
+
+/* Connection indicators — sidebar is dark, need light text */
+[data-theme='middle-earth'] .connection-type,
+[data-theme='middle-earth'] .connection-server {
+  color: #b88a50;
+}
+
+/* ── Theme accordion: old book binding ── */
+[data-theme='middle-earth'] .theme-accordion-header:hover {
+  background: rgba(212, 168, 32, 0.12);
+  color: #6a4820;
+}
+
+[data-theme='middle-earth'] .theme-accordion-open .theme-accordion-header {
+  background: rgba(212, 168, 32, 0.16);
+  color: #5a3818;
+}
+
+[data-theme='middle-earth'] .theme-accordion-open .theme-accordion-chevron {
+  color: #c89818;
+}
+
+/* ── Progress bar: THE ROAD GOES EVER ON ── */
+/* From darkness into gold light — the long journey from the Shire to Mount Doom */
+[data-theme='middle-earth'] .progress-bar-track {
+  background: #d8c880;
+  border: 1px solid rgba(160, 120, 38, 0.40);
+  border-radius: 4px;
+  box-shadow: inset 0 1px 3px rgba(80, 50, 10, 0.20);
+}
+
+[data-theme='middle-earth'] .progress-bar-fill {
+  background: linear-gradient(90deg,
+      #5a3802 0%,
+      #9a6808 25%,
+      #c89018 55%,
+      #d4a820 75%,
+      #f0d060 90%,
+      #fff0a0 100%);
+  border-radius: 4px;
+  box-shadow: 0 0 10px rgba(212, 168, 32, 0.65), 0 0 3px rgba(255, 230, 100, 0.55);
+}
+
+/* ── Scrollbar: aged oak library shelves ── */
+[data-theme='middle-earth'] ::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+[data-theme='middle-earth'] ::-webkit-scrollbar-track {
+  background: #dcc880;
+  border-radius: 4px;
+}
+
+[data-theme='middle-earth'] ::-webkit-scrollbar-thumb {
+  background: linear-gradient(to right, #6e4a28 0%, #9a7040 40%, #6a4420 100%);
+  border: 1px solid rgba(180, 130, 40, 0.45);
+  border-radius: 4px;
+  box-shadow: inset 0 1px 0 rgba(255, 220, 100, 0.25);
+}
+
+[data-theme='middle-earth'] ::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(to right, #8a6038 0%, #b88a50 40%, #8a5a30 100%);
+  box-shadow: inset 0 1px 0 rgba(255, 220, 100, 0.35), 0 0 5px rgba(212, 168, 32, 0.28);
+}
+
+/* ── Glass / dropdowns: a scroll held to the light ── */
+[data-theme='middle-earth'] .glass {
+  background: rgba(248, 238, 198, 0.96) !important;
+  backdrop-filter: none !important;
+  border: 1px solid rgba(180, 140, 48, 0.45) !important;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.70),
+    0 4px 20px rgba(80, 50, 10, 0.20),
+    0 8px 30px rgba(60, 38, 10, 0.10) !important;
+  border-radius: 10px !important;
+}
+
+[data-theme='middle-earth'] .glass [style*="var(--bg-hover)"] {
+  background: rgba(212, 168, 32, 0.12) !important;
+  border-radius: 6px !important;
+}
+
+[data-theme='middle-earth'] .glass [style*="var(--text-primary)"] {
+  color: #1e1408 !important;
+}
+
+[data-theme='middle-earth'] .glass [style*="var(--text-secondary)"] {
+  color: #3e2c1a !important;
+}
+
+[data-theme='middle-earth'] .glass [style*="var(--text-muted)"] {
+  color: #5e4828 !important;
+}
+
+/* ── Hover / selection: candlelight — warm gold glow ── */
+[data-theme='middle-earth'] .settings-tab:hover {
+  background: rgba(212, 168, 32, 0.12);
+  color: #2a1c0e;
+}
+
+[data-theme='middle-earth'] .settings-tab.active {
+  background: rgba(212, 168, 32, 0.18);
+  color: #2a1c0e;
+  box-shadow: inset 2px 0 0 #d4a820;
+}
+
+[data-theme='middle-earth'] .custom-select-trigger:hover {
+  background: rgba(212, 168, 32, 0.10);
+}
+
+[data-theme='middle-earth'] .custom-select-option:hover {
+  background: rgba(212, 168, 32, 0.15) !important;
+  color: #1e1408 !important;
+}
+
+[data-theme='middle-earth'] .artist-ext-link:hover {
+  background: rgba(212, 168, 32, 0.12);
+  color: #2a1c0e !important;
+  border-color: rgba(180, 140, 40, 0.55) !important;
+}
+
+[data-theme='middle-earth'] .np-action-btn:hover {
+  background: rgba(212, 168, 32, 0.10);
+}
+
+[data-theme='middle-earth'] .np-queue-item:hover,
+[data-theme='middle-earth'] .np-queue-item.context-active {
+  background: rgba(212, 168, 32, 0.13);
+  box-shadow: inset 2px 0 0 #d4a820;
+}
+
+[data-theme='middle-earth'] .track-row:hover,
+[data-theme='middle-earth'] .track-row.context-active {
+  background: rgba(212, 168, 32, 0.10) !important;
+  box-shadow: inset 2px 0 0 #d4a820;
+}
+
+[data-theme='middle-earth'] .artist-row:hover {
+  background: rgba(212, 168, 32, 0.10);
+  box-shadow: inset 2px 0 0 #d4a820;
+}
+
+[data-theme='middle-earth'] .playlist-row:hover {
+  background: rgba(212, 168, 32, 0.10);
+  box-shadow: inset 2px 0 0 #d4a820;
+}
+
+[data-theme='middle-earth'] .queue-item:hover,
+[data-theme='middle-earth'] .queue-item.context-active {
+  background: rgba(212, 168, 32, 0.12) !important;
+  box-shadow: inset 2px 0 0 #d4a820;
+}
+
+/* ── Active queue / now-playing: the bearer of the Ring ── */
+[data-theme='middle-earth'] .queue-item.active {
+  background: rgba(212, 168, 32, 0.14);
+  box-shadow: inset 2px 0 0 #d4a820;
+}
+
+[data-theme='middle-earth'] .queue-item.active .queue-item-title {
+  color: #f8e060;
+}
+
+[data-theme='middle-earth'] .queue-item.active .queue-item-artist,
+[data-theme='middle-earth'] .queue-item.active .queue-item-duration {
+  color: #c8a060;
+}
+
+[data-theme='middle-earth'] .np-queue-item-active {
+  color: #2a1c0e;
+  text-shadow: 0 0 6px rgba(212, 168, 32, 0.40);
+}
+
+[data-theme='middle-earth'] .np-queue-item.active {
+  background: rgba(212, 168, 32, 0.10);
+}
+
+[data-theme='middle-earth'] .np-album-track.active .np-album-track-title,
+[data-theme='middle-earth'] .np-album-track.active .np-album-track-num {
+  color: #2a1c0e;
+  text-shadow: 0 0 6px rgba(212, 168, 32, 0.38);
+}
+
+/* ── Queue tech bar: dark text on light parchment ── */
+[data-theme='middle-earth'] .queue-current-tech {
+  color: #3e2808;
+}
+
+/* ── Queue + Lyrics on dark sidebar ── */
+[data-theme='middle-earth'] .queue-current-info h3 {
+  color: #f0d880;
+}
+
+[data-theme='middle-earth'] .queue-current-sub {
+  color: #d4a820;
+}
+
+[data-theme='middle-earth'] .queue-item-title {
+  color: #f0d880;
+}
+
+[data-theme='middle-earth'] .queue-item-artist {
+  color: #c8a060;
+}
+
+[data-theme='middle-earth'] .queue-item-duration {
+  color: #b08858;
+}
+
+[data-theme='middle-earth'] .queue-tab-btn {
+  color: #c8a060;
+  font-family: Georgia, serif;
+}
+
+[data-theme='middle-earth'] .queue-tab-btn:hover {
+  color: #f0d880;
+  background: rgba(212, 168, 32, 0.10);
+}
+
+[data-theme='middle-earth'] .queue-tab-btn.active {
+  color: #d4a820;
+}
+
+[data-theme='middle-earth'] .lyrics-line {
+  color: #b08858;
+}
+
+[data-theme='middle-earth'] .lyrics-line.active {
+  color: #f0d880;
+  text-shadow: 0 0 6px rgba(212, 168, 32, 0.35);
+}
+
+[data-theme='middle-earth'] .lyrics-plain-line {
+  color: #c8a060;
+}
+
+[data-theme='middle-earth'] .lyrics-status {
+  color: #a88048;
+}
+
+/* Queue: "Nächste Titel" divider label */
+[data-theme='middle-earth'] .queue-divider span {
+  color: #b8905a !important;
+}
+
+/* Queue: artist text visible on hover for inactive items */
+[data-theme='middle-earth'] .queue-item:hover .queue-item-artist,
+[data-theme='middle-earth'] .queue-item.context-active .queue-item-artist {
+  color: #e8c878;
+}
+
+/* AlbumDetail header: artist name readable */
+[data-theme='middle-earth'] .album-detail-artist,
+[data-theme='middle-earth'] .album-detail-artist-link {
+  color: #e8c878;
+}
+
+[data-theme='middle-earth'] .album-detail-artist-link:hover {
+  color: #f8e060;
+}
+
+/* ArtistDetail About: heading, bio text + "Mehr lesen" readable */
+[data-theme='middle-earth'] .np-card-title {
+  color: #6b4e2a;
+}
+
+[data-theme='middle-earth'] .np-bio-text {
+  color: #5a3e20;
+}
+
+[data-theme='middle-earth'] .np-bio-toggle {
+  color: #7a5228;
+}
+

src/styles/themes/middle-earth-the-one-ring-inscription-glow.css

@@ -0,0 +1,25 @@
+/* ─────────────────────────────────────────────────────────────
+   Middle-Earth — The One Ring Inscription Glow
+   ───────────────────────────────────────────────────────────── */
+
+/* Breathing glow of the Ring — applied to player-track-name.
+   Like the inscription heating up in Bag End's fireplace.      */
+@keyframes ring-inscription-glow {
+
+  0%,
+  100% {
+    text-shadow:
+      0 0 8px rgba(240, 200, 60, 0.70),
+      0 0 18px rgba(200, 140, 20, 0.38),
+      0 0 36px rgba(160, 100, 10, 0.15);
+  }
+
+  50% {
+    text-shadow:
+      0 0 12px rgba(240, 200, 60, 0.95),
+      0 0 28px rgba(200, 140, 20, 0.65),
+      0 0 52px rgba(160, 100, 10, 0.32),
+      0 0 80px rgba(100, 60, 5, 0.14);
+  }
+}
+

src/styles/themes/midnight-blue.css

@@ -0,0 +1,68 @@
+/* ─── Midnight Blue ─── */
+[data-theme='midnight-blue'] {
+  color-scheme: dark;
+
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2360a5fa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+
+  /* Backgrounds */
+  --ctp-crust:    #07090f;
+  --ctp-mantle:   #090c14;
+  --ctp-base:     #0d1420;
+  --ctp-surface0: #111a28;
+  --ctp-surface1: #162030;
+  --ctp-surface2: #1c2838;
+
+  /* Overlays */
+  --ctp-overlay0: #2a3d5a;
+  --ctp-overlay1: #3a507a;
+  --ctp-overlay2: #4a659a;
+
+  /* Text */
+  --ctp-text:     #ccd8f0;
+  --ctp-subtext1: #9ab0d8;
+  --ctp-subtext0: #6888b0;
+
+  /* Light blue accent */
+  --ctp-teal:      #60a5fa;
+  --ctp-sky:       #60a5fa;
+  --ctp-sapphire:  #4a90e8;
+  --ctp-blue:      #3878d0;
+  --ctp-lavender:  #60a5fa;
+  --ctp-mauve:     #4a90e8;
+  --ctp-pink:      #3878d0;
+  --ctp-flamingo:  #60a5fa;
+  --ctp-rosewater: #4a90e8;
+
+  /* Semantic */
+  --ctp-red:     #e07070;
+  --ctp-maroon:  #d09050;
+  --ctp-peach:   #d09050;
+  --ctp-yellow:  #c8b850;
+  --ctp-green:   #60c880;
+
+  /* UI tokens */
+  --bg-app:      #0d1420;
+  --bg-sidebar:  #090c14;
+  --bg-card:     #111a28;
+  --bg-hover:    #162030;
+  --bg-player:   #090c14;
+  --bg-glass:    rgba(13, 20, 32, 0.95);
+
+  --accent:      #60a5fa;
+  --accent-dim:  rgba(96, 165, 250, 0.07);
+  --accent-glow: rgba(96, 165, 250, 0.14);
+
+  --text-primary:   #ccd8f0;
+  --text-secondary: #6888b0;
+  --text-muted:     #50627e;
+
+  --border:          #1c2838;
+  --border-subtle:   #111a28;
+  --border-dropdown: #223040;
+  --shadow-dropdown: rgba(0, 0, 0, 0.90);
+
+  --positive: #60c880;
+  --warning:  #c8b850;
+  --danger:   #e07070;
+}
+

src/styles/themes/morpheus-matrix-style.css

@@ -0,0 +1,4 @@
+/* ─────────────────────────────────────────────────────────────
+   Morpheus — Matrix Style
+   ───────────────────────────────────────────────────────────── */
+

src/styles/themes/mouse-event-dnd-cursor-psy-dragging.css

@@ -0,0 +1,10 @@
+/* ─── Mouse-event DnD cursor (psy-dragging) ──────────────────────
+   Applied by DragDropProvider while a mouse-based drag is active.
+   Overrides cursor globally to "grabbing" and prevents text-
+   selection / stray pointer events on child elements. ─────────── */
+body.psy-dragging,
+body.psy-dragging * {
+  cursor: grabbing !important;
+  user-select: none !important;
+}
+

src/styles/themes/ms-dos.css

@@ -0,0 +1,284 @@
+/* ─── MS-DOS ─── */
+@keyframes dos-blink {
+
+  0%,
+  49% {
+    opacity: 1;
+  }
+
+  50%,
+  100% {
+    opacity: 0;
+  }
+}
+
+[data-theme='dos'] {
+  color-scheme: dark;
+  font-family: 'Courier New', Courier, 'Lucida Console', monospace;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23AAAAAA%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  /* Pure ANSI color palette */
+  --ctp-crust: #000000;
+  --ctp-mantle: #000080;
+  --ctp-base: #0000AA;
+  --ctp-surface0: #000080;
+  --ctp-surface1: #0000AA;
+  --ctp-surface2: #0000CC;
+  --ctp-overlay0: #8888AA;
+  --ctp-overlay1: #BBBBCC;
+  --ctp-overlay2: #E8E8E8;
+  --ctp-text: #E8E8E8;
+  --ctp-subtext1: #BBBBCC;
+  --ctp-subtext0: #8888AA;
+  --ctp-mauve: #FF55FF;
+  --ctp-lavender: #FF55FF;
+  --ctp-pink: #FF55FF;
+  --ctp-flamingo: #FF5555;
+  --ctp-rosewater: #FFFFFF;
+  --ctp-green: #55FF55;
+  --ctp-teal: #55FFFF;
+  --ctp-sky: #55FFFF;
+  --ctp-blue: #5555FF;
+  --ctp-sapphire: #5555FF;
+  --ctp-yellow: #FFFF55;
+  --ctp-peach: #FF5555;
+  --ctp-maroon: #AA0000;
+  --ctp-red: #FF5555;
+
+  --bg-app: #0000AA;
+  --bg-sidebar: #000080;
+  --bg-card: #000080;
+  --bg-hover: rgba(170, 170, 170, 0.15);
+  --bg-player: #000000;
+  --bg-glass: rgba(0, 0, 128, 0.95);
+  --accent: #FFFF55;
+  --accent-dim: rgba(255, 255, 85, 0.15);
+  --accent-glow: rgba(255, 255, 85, 0.3);
+  --text-primary: #E8E8E8;
+  --text-secondary: #BBBBCC;
+  --text-muted: #8888AA;
+  --border: #AAAAAA;
+  --border-subtle: #4444AA;
+  --border-dropdown: #AAAAAA;
+  --shadow-dropdown: rgba(0, 0, 0, 0.95);
+  --positive: #55FF55;
+  --warning: #FFFF55;
+  --danger: #FF5555;
+  /* Square everything — no rounded corners in DOS */
+  --radius-sm: 0px;
+  --radius-md: 0px;
+  --radius-lg: 0px;
+  --radius-full: 0px;
+}
+
+/* Monospace override — html inherits to most elements; form controls need explicit override */
+[data-theme='dos'] button,
+[data-theme='dos'] input,
+[data-theme='dos'] textarea,
+[data-theme='dos'] select {
+  font-family: 'Courier New', Courier, 'Lucida Console', monospace;
+}
+
+/* Sidebar — dark navy with CRT scanlines, thick grey right border like a DOS panel edge */
+[data-theme='dos'] .sidebar {
+  background-color: #000080;
+  background-image: repeating-linear-gradient(0deg,
+      rgba(0, 0, 0, 0.20) 0px,
+      rgba(0, 0, 0, 0.20) 1px,
+      transparent 1px,
+      transparent 3px);
+  border-right: 2px solid #AAAAAA;
+}
+
+/* Active nav — classic DOS inverted selection */
+[data-theme='dos'] .nav-link.active {
+  background: #AAAAAA;
+  color: #000080;
+  border-left: none;
+  font-weight: 700;
+}
+
+[data-theme='dos'] .nav-link:hover:not(.active) {
+  background: rgba(170, 170, 170, 0.18);
+  color: #FFFF55;
+}
+
+/* Player bar — pure black, the C:\> command prompt */
+[data-theme='dos'] .player-bar {
+  background-color: #000000;
+  background-image: repeating-linear-gradient(0deg,
+      rgba(0, 0, 0, 0.20) 0px,
+      rgba(0, 0, 0, 0.20) 1px,
+      transparent 1px,
+      transparent 3px);
+  border-top: 2px solid #AAAAAA;
+  box-shadow: none;
+}
+
+/* Track name — bright yellow with blinking block cursor */
+[data-theme='dos'] .player-track-name {
+  color: #FFFF55;
+  text-shadow: none;
+}
+
+[data-theme='dos'] .player-track-name::after {
+  content: '\258B';
+  animation: dos-blink 1s step-end infinite;
+  margin-left: 3px;
+  font-size: 0.8em;
+  vertical-align: baseline;
+}
+
+/* Artist name — bright cyan (ANSI 11) */
+[data-theme='dos'] .player-artist-name {
+  color: #55FFFF;
+}
+
+/* Content header — simple grey border, no ornate gradient */
+[data-theme='dos'] .content-header {
+  border-bottom: 1px solid #AAAAAA;
+}
+
+/* Album/artist cards — flat navy panels with grey border */
+[data-theme='dos'] .album-card,
+[data-theme='dos'] .artist-card {
+  background: #000080;
+  border: 1px solid #AAAAAA;
+  box-shadow: none;
+}
+
+[data-theme='dos'] .album-card:hover,
+[data-theme='dos'] .artist-card:hover {
+  background: #0000AA;
+  border-color: #FFFFFF;
+  box-shadow: none;
+}
+
+/* Track / queue row hover — inverted DOS selection */
+[data-theme='dos'] .track-row:hover,
+[data-theme='dos'] .queue-item:hover {
+  background: #AAAAAA !important;
+  color: #000080;
+  box-shadow: none;
+}
+
+/* Primary play button — flat grey, sharp, DOS dialog style */
+[data-theme='dos'] .player-btn-primary {
+  background: #AAAAAA;
+  color: #000000;
+  border: 2px solid #FFFFFF;
+  box-shadow: none;
+}
+
+[data-theme='dos'] .player-btn-primary:hover {
+  background: #FFFFFF;
+  color: #000000;
+  box-shadow: none;
+  transform: none;
+}
+
+/* btn-primary — uppercase DOS dialog button */
+[data-theme='dos'] .btn-primary {
+  background: #AAAAAA;
+  color: #000000;
+  border: 1px solid #FFFFFF;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  box-shadow: none;
+}
+
+[data-theme='dos'] .btn-primary:hover {
+  background: #FFFFFF;
+  color: #000000;
+  box-shadow: none;
+}
+
+/* btn-surface */
+[data-theme='dos'] .btn-surface,
+[data-theme='dos'] .btn {
+  border: 1px solid #AAAAAA;
+  box-shadow: none;
+}
+
+/* Hero play button */
+[data-theme='dos'] .hero-play-btn {
+  background: #AAAAAA;
+  color: #000000;
+  border: 2px solid #FFFFFF;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  box-shadow: none;
+  transition: background var(--transition-fast), color var(--transition-fast);
+}
+
+[data-theme='dos'] .hero-play-btn:hover {
+  background: #FFFFFF;
+  color: #000000;
+  transform: none;
+  filter: none;
+  box-shadow: none;
+}
+
+/* Album card overlay play button */
+[data-theme='dos'] .album-card-details-btn {
+  background: #AAAAAA;
+  color: #000000;
+  border: 2px solid #FFFFFF;
+  box-shadow: none;
+}
+
+[data-theme='dos'] .album-card-details-btn:hover {
+  background: #FFFFFF;
+  color: #000000;
+}
+
+/* Queue round buttons — square in DOS */
+[data-theme='dos'] .queue-round-btn {
+  border: 1px solid #AAAAAA;
+  box-shadow: none;
+}
+
+[data-theme='dos'] .queue-round-btn.active {
+  background: #AAAAAA;
+  color: #000000;
+  border-color: #FFFFFF;
+  box-shadow: none;
+}
+
+/* Input fields */
+[data-theme='dos'] input,
+[data-theme='dos'] textarea {
+  background: #000080;
+  border: 1px solid #AAAAAA;
+  border-radius: 0;
+}
+
+[data-theme='dos'] input:focus,
+[data-theme='dos'] textarea:focus {
+  border-color: #FFFF55;
+  outline: none;
+  box-shadow: none;
+}
+
+/* Scrollbar — wide 16px DOS style with sharp thumb */
+[data-theme='dos'] ::-webkit-scrollbar {
+  width: 16px;
+  height: 16px;
+}
+
+[data-theme='dos'] ::-webkit-scrollbar-track {
+  background: #000080;
+  border-left: 1px solid #AAAAAA;
+}
+
+[data-theme='dos'] ::-webkit-scrollbar-thumb {
+  background: #AAAAAA;
+  border-radius: 0;
+  border: 1px solid #FFFFFF;
+}
+
+[data-theme='dos'] ::-webkit-scrollbar-thumb:hover {
+  background: #FFFFFF;
+}
+
+

src/styles/themes/musicmatch-jukebox-y2k-metallic-silver-blue-display.css

@@ -0,0 +1,398 @@
+/* ─── Musicmatch Jukebox — Y2K Metallic Silver / Blue Display ─── */
+[data-theme='muma-jukebox'] {
+  color-scheme: light;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%234a4a4a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  /* ── Palette ── */
+  --ctp-crust: #001358;
+  /* deep blue — LCD display */
+  --ctp-mantle: #b5babc;
+  /* dark silver — panels, sidebar */
+  --ctp-base: #d4d8db;
+  /* metallic silver — main body */
+  --ctp-surface0: #c8ccce;
+  --ctp-surface1: #bec2c4;
+  --ctp-surface2: #8a9094;
+  /* border gray */
+  --ctp-overlay0: #6a7074;
+  --ctp-overlay1: #505458;
+  --ctp-overlay2: #3a3e42;
+  --ctp-text: #1a1a1a;
+  --ctp-subtext1: #3a3a3a;
+  --ctp-subtext0: #4a4a4a;
+  /* Cyan accent + Musicmatch orange */
+  --ctp-mauve: #00d0ff;
+  /* cyan — primary accent */
+  --ctp-lavender: #40e0ff;
+  --ctp-sky: #00c0e8;
+  --ctp-sapphire: #0088c8;
+  --ctp-blue: #0058b8;
+  --ctp-teal: #009898;
+  --ctp-green: #008840;
+  --ctp-yellow: #cc8800;
+  --ctp-peach: #ff6600;
+  /* Musicmatch orange — secondary accent */
+  --ctp-pink: #d04060;
+  --ctp-flamingo: #c05040;
+  --ctp-rosewater: #c87060;
+  --ctp-maroon: #b02828;
+  --ctp-red: #c82020;
+
+  /* ── Semantic tokens ── */
+  --bg-app: #d4d8db;
+  --bg-sidebar: #b5babc;
+  --bg-card: #c8ccce;
+  --bg-hover: #bec2c4;
+  --bg-player: #001358;
+  /* LCD display — deep blue */
+  --bg-glass: rgba(212, 216, 219, 0.92);
+  --accent: #00d0ff;
+  --accent-dim: rgba(0, 208, 255, 0.15);
+  --accent-glow: rgba(0, 208, 255, 0.35);
+  --volume-accent: #ff6600;
+  /* Musicmatch orange for volume */
+  --text-primary: #1a1a1a;
+  --text-secondary: #4a4a4a;
+  --text-muted: #909090;
+  --border: #8a9094;
+  --border-subtle: #c0c4c6;
+  --positive: #008840;
+  --warning: #cc8800;
+  --danger: #c82020;
+}
+
+/* ── Musicmatch: contrast fixes ── */
+[data-theme='muma-jukebox'] .queue-round-btn.active {
+  color: #001358;
+}
+
+/* Accent-coloured text on silver body needs to be darker */
+[data-theme='muma-jukebox'] {
+  --accent: #0070a0;
+  --accent-dim: rgba(0, 112, 160, 0.15);
+  --accent-glow: rgba(0, 112, 160, 0.35);
+}
+
+/* Player bar keeps the bright cyan since it's on dark blue bg */
+[data-theme='muma-jukebox'] .player-bar {
+  --accent: #00d0ff;
+}
+
+/* ── Metallic bevel buttons ── */
+[data-theme='muma-jukebox'] .btn {
+  background: linear-gradient(180deg, #e4e8eb 0%, #c0c4c7 100%);
+  color: #1a1a1a;
+  box-shadow:
+    inset 1px 1px 0 rgba(255, 255, 255, 0.9),
+    inset -1px -1px 0 rgba(0, 0, 0, 0.28),
+    0 1px 3px rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+}
+
+[data-theme='muma-jukebox'] .btn:hover {
+  background: linear-gradient(180deg, #eceef0 0%, #cacdd0 100%);
+}
+
+[data-theme='muma-jukebox'] .btn-primary {
+  background: linear-gradient(180deg, #40e0ff 0%, #00a8d8 100%);
+  color: #001358;
+  font-weight: 600;
+  box-shadow:
+    inset 1px 1px 0 rgba(255, 255, 255, 0.6),
+    inset -1px -1px 0 rgba(0, 60, 120, 0.4),
+    0 1px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 4px;
+}
+
+[data-theme='muma-jukebox'] .btn-primary:hover {
+  background: linear-gradient(180deg, #60e8ff 0%, #20c0f0 100%);
+}
+
+/* ── Player bar: blue LCD display area ── */
+[data-theme='muma-jukebox'] .player-bar {
+  background: #001358;
+  border-top: 3px solid #8a9094;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.08),
+    inset 0 2px 12px rgba(0, 0, 0, 0.4);
+}
+
+[data-theme='muma-jukebox'] .player-track-name {
+  color: #ffffff;
+  text-shadow: 0 0 8px rgba(0, 208, 255, 0.75), 0 0 2px rgba(0, 208, 255, 0.4);
+  letter-spacing: 0.02em;
+}
+
+[data-theme='muma-jukebox'] .player-track-artist {
+  color: #00d0ff;
+  opacity: 0.9;
+}
+
+[data-theme='muma-jukebox'] .player-btn,
+[data-theme='muma-jukebox'] .player-btn-primary {
+  background: linear-gradient(180deg, #1a2880 0%, #000e40 100%);
+  color: #00d0ff;
+  box-shadow:
+    inset 1px 1px 0 rgba(0, 208, 255, 0.25),
+    inset -1px -1px 0 rgba(0, 0, 0, 0.5),
+    0 2px 5px rgba(0, 0, 0, 0.4);
+  border-radius: 50%;
+}
+
+[data-theme='muma-jukebox'] .player-btn:hover,
+[data-theme='muma-jukebox'] .player-btn-primary:hover {
+  background: linear-gradient(180deg, #2030a0 0%, #001060 100%);
+  color: #40e8ff;
+}
+
+/* ── Sidebar: brushed-metal panel ── */
+[data-theme='muma-jukebox'] .sidebar {
+  background: linear-gradient(180deg, #c8ccce 0%, #b0b4b7 100%);
+  border-right: 2px solid #7a8084;
+  box-shadow: inset -2px 0 0 rgba(255, 255, 255, 0.5), 2px 0 4px rgba(0, 0, 0, 0.15);
+}
+
+/* Nav links on silver: look like Windows panel items */
+[data-theme='muma-jukebox'] .nav-link {
+  color: #1a1a2a;
+  border-radius: 3px;
+  margin: 1px 4px;
+}
+
+[data-theme='muma-jukebox'] .nav-link:hover {
+  background: linear-gradient(180deg, #dde2e5 0%, #c8ccce 100%);
+  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.8), inset -1px -1px 0 rgba(0, 0, 0, 0.15);
+  color: #0070a0;
+}
+
+[data-theme='muma-jukebox'] .nav-link.active {
+  background: linear-gradient(180deg, #b8c8e0 0%, #9ab0d0 100%);
+  box-shadow:
+    inset 1px 1px 0 rgba(0, 0, 0, 0.15),
+    inset -1px -1px 0 rgba(255, 255, 255, 0.5);
+  color: #001358;
+  font-weight: 600;
+}
+
+[data-theme='muma-jukebox'] .nav-link.active::before {
+  display: none;
+}
+
+/* ── Cards / panels: inset bevel ── */
+[data-theme='muma-jukebox'] .glass,
+[data-theme='muma-jukebox'] .card {
+  background: #d4d8db;
+  box-shadow:
+    inset 1px 1px 0 rgba(255, 255, 255, 0.85),
+    inset -1px -1px 0 rgba(0, 0, 0, 0.15),
+    0 2px 6px rgba(0, 0, 0, 0.1);
+  border: 1px solid #9a9ea0 !important;
+}
+
+/* ── Track rows: Windows XP list selection ── */
+[data-theme='muma-jukebox'] .track-row:hover,
+[data-theme='muma-jukebox'] .track-row.context-active {
+  background: #316AC5 !important;
+  color: #ffffff !important;
+  box-shadow: none;
+}
+
+[data-theme='muma-jukebox'] .track-row:hover .track-title,
+[data-theme='muma-jukebox'] .track-row:hover .track-artist,
+[data-theme='muma-jukebox'] .track-row:hover .track-duration,
+[data-theme='muma-jukebox'] .track-row:hover .track-num,
+[data-theme='muma-jukebox'] .track-row.context-active .track-title,
+[data-theme='muma-jukebox'] .track-row.context-active .track-artist {
+  color: #ffffff !important;
+}
+
+/* ── Queue items ── */
+[data-theme='muma-jukebox'] .queue-item:hover,
+[data-theme='muma-jukebox'] .queue-item.context-active {
+  background: #316AC5 !important;
+}
+
+[data-theme='muma-jukebox'] .queue-item:hover .queue-item-title,
+[data-theme='muma-jukebox'] .queue-item:hover .queue-item-artist,
+[data-theme='muma-jukebox'] .queue-item:hover .queue-item-duration,
+[data-theme='muma-jukebox'] .queue-item.context-active .queue-item-title,
+[data-theme='muma-jukebox'] .queue-item.context-active .queue-item-artist {
+  color: #ffffff !important;
+}
+
+[data-theme='muma-jukebox'] .queue-item.active {
+  background: rgba(0, 112, 160, 0.14);
+  box-shadow: inset 3px 0 0 #0070a0;
+}
+
+[data-theme='muma-jukebox'] .np-queue-item:hover,
+[data-theme='muma-jukebox'] .np-queue-item.context-active {
+  background: #316AC5;
+}
+
+[data-theme='muma-jukebox'] .np-queue-item-active {
+  color: #001358;
+  font-weight: 600;
+}
+
+[data-theme='muma-jukebox'] .np-queue-item.active {
+  background: rgba(49, 106, 197, 0.18);
+}
+
+/* ── Artist / playlist rows ── */
+[data-theme='muma-jukebox'] .artist-row:hover,
+[data-theme='muma-jukebox'] .playlist-row:hover {
+  background: #316AC5;
+  color: #ffffff;
+}
+
+/* ── Settings tabs: XP tab strip ── */
+[data-theme='muma-jukebox'] .settings-tab {
+  background: linear-gradient(180deg, #d4d8db 0%, #c0c4c7 100%);
+  border: 1px solid #9a9ea0;
+  color: #1a1a1a;
+  border-radius: 3px 3px 0 0;
+  margin-right: 2px;
+}
+
+[data-theme='muma-jukebox'] .settings-tab:hover {
+  background: linear-gradient(180deg, #dde2e5 0%, #cacdd0 100%);
+  color: #0070a0;
+}
+
+[data-theme='muma-jukebox'] .settings-tab.active {
+  background: linear-gradient(180deg, #ffffff 0%, #f0f4f8 100%);
+  color: #001358;
+  font-weight: 600;
+  box-shadow: inset 0 2px 0 #0070a0;
+  border-bottom-color: transparent;
+}
+
+/* ── Queue tab buttons ── */
+[data-theme='muma-jukebox'] .queue-tab-btn:hover {
+  color: #0070a0;
+}
+
+/* ── Now-playing active ── */
+[data-theme='muma-jukebox'] .np-album-track.active .np-album-track-title,
+[data-theme='muma-jukebox'] .np-album-track.active .np-album-track-num {
+  color: #0070a0;
+  font-weight: 600;
+}
+
+/* ── Scrollbar: XP silver ── */
+[data-theme='muma-jukebox'] ::-webkit-scrollbar {
+  width: 16px;
+  height: 16px;
+}
+
+[data-theme='muma-jukebox'] ::-webkit-scrollbar-track {
+  background: linear-gradient(90deg, #c0c4c7 0%, #d4d8db 100%);
+  border: 1px solid #9a9ea0;
+}
+
+[data-theme='muma-jukebox'] ::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, #dde2e5 0%, #b8bcbf 100%);
+  border: 1px solid #9a9ea0;
+  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.7), inset -1px -1px 0 rgba(0, 0, 0, 0.15);
+}
+
+[data-theme='muma-jukebox'] ::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(180deg, #e8ecf0 0%, #c8ccce 100%);
+}
+
+[data-theme='muma-jukebox'] ::-webkit-scrollbar-button {
+  background: linear-gradient(180deg, #dde2e5 0%, #b8bcbf 100%);
+  border: 1px solid #9a9ea0;
+  height: 16px;
+}
+
+/* ── Dropdowns ── */
+[data-theme='muma-jukebox'] .custom-select-trigger {
+  background: linear-gradient(180deg, #e4e8eb 0%, #d4d8db 100%);
+  border: 1px solid #9a9ea0;
+  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.7);
+}
+
+[data-theme='muma-jukebox'] .custom-select-option:hover {
+  background: #316AC5 !important;
+  color: #ffffff !important;
+}
+
+/* ── Connection indicators ── */
+[data-theme='muma-jukebox'] .connection-type,
+[data-theme='muma-jukebox'] .connection-server {
+  color: #0070a0;
+}
+
+/* ── Orange: volume knob + active/playing states ── */
+/* Knob is var(--text-primary) by default = near-black on silver → fix to orange */
+[data-theme='muma-jukebox'] input[type="range"]::-webkit-slider-thumb {
+  background: #ff6600;
+  box-shadow: inset 1px 1px 0 rgba(255, 180, 80, 0.7), inset -1px -1px 0 rgba(160, 40, 0, 0.4);
+}
+
+[data-theme='muma-jukebox'] input[type="range"]:hover::-webkit-slider-thumb {
+  background: #ff8020;
+}
+
+/* Active queue item: orange left bar instead of blue */
+[data-theme='muma-jukebox'] .queue-item.active {
+  background: rgba(255, 102, 0, 0.1);
+  box-shadow: inset 3px 0 0 #ff6600;
+}
+
+[data-theme='muma-jukebox'] .np-queue-item-active {
+  color: #cc4400;
+  font-weight: 600;
+}
+
+[data-theme='muma-jukebox'] .np-queue-item.active {
+  background: rgba(255, 102, 0, 0.1);
+}
+
+/* Now-playing active track = orange brand color */
+[data-theme='muma-jukebox'] .np-album-track.active .np-album-track-title,
+[data-theme='muma-jukebox'] .np-album-track.active .np-album-track-num {
+  color: #cc4400;
+  font-weight: 600;
+}
+
+/* Active nav link: orange accent text */
+[data-theme='muma-jukebox'] .nav-link.active {
+  color: #cc4400;
+}
+
+/* Settings tab active: orange top border */
+[data-theme='muma-jukebox'] .settings-tab.active {
+  box-shadow: inset 0 2px 0 #ff6600;
+  color: #cc4400;
+}
+
+/* Track row playing indicator (now-playing track-num shown in orange) */
+[data-theme='muma-jukebox'] .track-row.playing .track-num {
+  color: #ff6600;
+}
+
+/* Player bar artist: keep cyan, but LCD progress/waveform in orange */
+[data-theme='muma-jukebox'] .player-bar input[type="range"]::-webkit-slider-thumb {
+  background: #ff6600;
+}
+
+/* Waveform: orange played, cyan buffered, dim unplayed */
+[data-theme='muma-jukebox'] {
+  --waveform-played: #ff6600;
+  --waveform-buffered: #00d0ff;
+  --waveform-unplayed: #3a5080;
+}
+
+/* ── Hero readability on silver background ── */
+[data-theme='muma-jukebox'] .album-detail-badge {
+  background: #0070a0;
+  color: #ffffff;
+}
+
+[data-theme='muma-jukebox'] .album-detail-info {
+  color: #4a4a4a;
+}
+

src/styles/themes/neon-drift.css

@@ -0,0 +1,86 @@
+/* ─── Neon Drift ─── */
+[data-theme='neon-drift'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2300f2ff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  --ctp-crust: #080916;
+  --ctp-mantle: #0d0e21;
+  --ctp-base: #12132c;
+  --ctp-surface0: #1a1b3b;
+  --ctp-surface1: #242650;
+  --ctp-surface2: #2f3166;
+  --ctp-overlay0: #51548a;
+  --ctp-overlay1: #7277ad;
+  --ctp-overlay2: #9299cf;
+  --ctp-text: #e0e2ff;
+  --ctp-subtext1: #aeb3e0;
+  --ctp-subtext0: #8b91c4;
+  --ctp-mauve: #00f2ff;
+  --ctp-lavender: #7000ff;
+  --ctp-green: #00ffa3;
+  --ctp-teal: #00d4cc;
+  --ctp-sky: #00c8ff;
+  --ctp-blue: #0077ff;
+  --ctp-sapphire: #0055cc;
+  --ctp-pink: #ff00cc;
+  --ctp-flamingo: #ff44aa;
+  --ctp-rosewater: #ffaadd;
+  --ctp-yellow: #ffe600;
+  --ctp-peach: #ff9900;
+  --ctp-maroon: #cc2244;
+  --ctp-red: #ff2d55;
+
+  --bg-app: #12132c;
+  --bg-sidebar: #0d0e21;
+  --bg-card: #1a1b3b;
+  --bg-hover: #242650;
+  --bg-player: #080916;
+  --bg-glass: rgba(13, 14, 33, 0.85);
+  --accent: #00f2ff;
+  --accent-dim: rgba(0, 242, 255, 0.12);
+  --accent-glow: rgba(0, 242, 255, 0.40);
+  --text-primary: #e0e2ff;
+  --text-secondary: #aeb3e0;
+  --text-muted: #7277ad;
+  --border: #2f3166;
+  --border-subtle: #242650;
+  --positive: #00ffa3;
+  --warning: #ffe600;
+  --danger: #ff2d55;
+
+  --radius-md: 8px;
+  --radius-lg: 12px;
+}
+
+[data-theme='neon-drift'] .player-bar {
+  border-top: 1px solid rgba(0, 242, 255, 0.20);
+  box-shadow: 0 -10px 30px -15px rgba(0, 242, 255, 0.15);
+}
+
+[data-theme='neon-drift'] .player-track-name {
+  color: #00f2ff;
+  text-shadow: 0 0 12px rgba(0, 242, 255, 0.30);
+  font-weight: 600;
+}
+
+[data-theme='neon-drift'] .nav-link.active {
+  color: #00f2ff;
+  text-shadow: 0 0 8px rgba(0, 242, 255, 0.50);
+}
+
+[data-theme='neon-drift'] .nav-link.active::before {
+  box-shadow: 0 0 10px #00f2ff;
+}
+
+[data-theme='neon-drift'] .btn-primary {
+  background: linear-gradient(135deg, #00f2ff, #0077ff);
+  border: none;
+  color: #080916 !important;
+  box-shadow: 0 4px 15px rgba(0, 242, 255, 0.30);
+}
+
+[data-theme='neon-drift'] input[type="range"]::-webkit-slider-thumb {
+  background: white;
+  box-shadow: 0 0 10px #00f2ff;
+}
+

src/styles/themes/nightcity-2077-cyberpunk-2077.css

@@ -0,0 +1,299 @@
+/* ─── NightCity 2077 — Cyberpunk 2077 ─── */
+/* V yellow + Netrunner cyan + Gang magenta + Johnny Silverhand glitch */
+@keyframes glitch-2077 {
+
+  0%,
+  85%,
+  100% {
+    text-shadow:
+      0 0 8px rgba(252, 238, 10, 0.75),
+      0 0 22px rgba(252, 238, 10, 0.35),
+      0 0 48px rgba(252, 238, 10, 0.12);
+    transform: none;
+  }
+
+  86% {
+    text-shadow:
+      -3px 0 rgba(0, 245, 255, 0.65),
+      3px 0 rgba(255, 45, 155, 0.65),
+      0 0 8px rgba(252, 238, 10, 0.75);
+    transform: translateX(-2px);
+  }
+
+  87% {
+    text-shadow:
+      3px 0 rgba(0, 245, 255, 0.65),
+      -3px 0 rgba(255, 45, 155, 0.65),
+      0 0 8px rgba(252, 238, 10, 0.75);
+    transform: translateX(2px) skewX(-2deg);
+  }
+
+  88% {
+    text-shadow:
+      0 0 8px rgba(252, 238, 10, 0.75),
+      0 0 22px rgba(252, 238, 10, 0.35);
+    transform: none;
+  }
+
+  89% {
+    text-shadow:
+      -1px 0 rgba(0, 245, 255, 0.4),
+      1px 0 rgba(255, 45, 155, 0.4),
+      0 0 10px rgba(252, 238, 10, 0.8);
+    transform: translateX(1px);
+  }
+
+  90% {
+    text-shadow:
+      0 0 8px rgba(252, 238, 10, 0.75),
+      0 0 22px rgba(252, 238, 10, 0.35),
+      0 0 48px rgba(252, 238, 10, 0.12);
+    transform: none;
+  }
+}
+
+[data-theme='nightcity-2077'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FCEE0A%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  /* Night City asphalt — dark with cold blue-black undertone */
+  --ctp-crust: #000003;
+  --ctp-mantle: #020208;
+  --ctp-base: #06060f;
+  --ctp-surface0: #0d0d1a;
+  --ctp-surface1: #141428;
+  --ctp-surface2: #1e1e38;
+  --ctp-overlay0: #50508a;
+  --ctp-overlay1: #7878b8;
+  --ctp-overlay2: #a0a0d8;
+  --ctp-text: #f0f0ff;
+  --ctp-subtext1: #d0d0f8;
+  --ctp-subtext0: #a0a0d8;
+
+  /* Cyberpunk palette */
+  --ctp-yellow: #FCEE0A;
+  /* V / Johnny — primary yellow */
+  --ctp-mauve: #FCEE0A;
+  --ctp-lavender: #ffe84d;
+  --ctp-teal: #00f5ff;
+  /* Netrunner cyan */
+  --ctp-sky: #00f5ff;
+  --ctp-sapphire: #00c8e0;
+  --ctp-blue: #0088ff;
+  /* NCPD/corpo blue */
+  --ctp-pink: #ff2d9b;
+  /* Gang magenta — Maelstrom/Valentinos neon */
+  --ctp-flamingo: #ff2d9b;
+  --ctp-rosewater: #ff80c8;
+  --ctp-green: #00ff9f;
+  /* Netrunner green — Quickhack */
+  --ctp-red: #ff1a1a;
+  /* Combat critical / Arasaka red */
+  --ctp-maroon: #cc0000;
+  --ctp-peach: #ff8800;
+  /* Trauma Team orange */
+
+  --bg-app: #06060f;
+  --bg-sidebar: #020208;
+  /* deeper — like the Night City backdrop */
+  --bg-card: #0d0d1a;
+  --bg-hover: rgba(252, 238, 10, 0.07);
+  --bg-player: #000003;
+  --bg-glass: rgba(6, 6, 15, 0.96);
+
+  --accent: #FCEE0A;
+  /* V yellow */
+  --accent-dim: rgba(252, 238, 10, 0.12);
+  --accent-glow: rgba(252, 238, 10, 0.5);
+  --volume-accent: #00f5ff;
+  /* Netrunner cyan for volume */
+
+  --text-primary: #f0f0ff;
+  --text-secondary: #00f5ff;
+  /* Netrunner cyan — the key differentiator */
+  --text-muted: #6868a8;
+  --border: #1e1e38;
+  --border-subtle: #0d0d1a;
+  --shadow-dropdown: rgba(0, 0, 0, 0.95);
+
+  --positive: #00ff9f;
+  --warning: #FCEE0A;
+  --danger: #ff1a1a;
+
+  --radius-sm: 0px;
+  --radius-md: 0px;
+  --radius-lg: 2px;
+  --radius-xl: 2px;
+}
+
+/* Sidebar = tech/netrunner panel: cyan border + scan-line texture */
+[data-theme='nightcity-2077'] .sidebar {
+  border-right: 2px solid #00f5ff;
+  box-shadow: 2px 0 16px rgba(0, 245, 255, 0.1);
+  background-image: repeating-linear-gradient(0deg,
+      transparent,
+      transparent 3px,
+      rgba(0, 245, 255, 0.012) 3px,
+      rgba(0, 245, 255, 0.012) 4px);
+}
+
+/* Player bar = HUD: V yellow top + cyan secondary strip */
+[data-theme='nightcity-2077'] .player-bar {
+  border-top: 2px solid #FCEE0A;
+  box-shadow:
+    0 -1px 0 rgba(0, 245, 255, 0.35),
+    0 -8px 32px rgba(252, 238, 10, 0.08),
+    0 -2px 16px rgba(0, 245, 255, 0.06);
+}
+
+/* Track name = V's yellow + Johnny Silverhand glitch */
+[data-theme='nightcity-2077'] .player-track-name {
+  color: #FCEE0A;
+  text-transform: uppercase;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  animation: glitch-2077 9s infinite;
+}
+
+/* Artist = Netrunner cyan */
+[data-theme='nightcity-2077'] .player-track-artist {
+  color: #00f5ff;
+}
+
+/* Queue album = gang magenta */
+[data-theme='nightcity-2077'] .queue-meta-album {
+  color: #ff2d9b;
+}
+
+/* Active nav: yellow gradient + chamfered feel */
+[data-theme='nightcity-2077'] .nav-link.active {
+  background: linear-gradient(90deg, rgba(252, 238, 10, 0.15) 0%, transparent 100%);
+  color: #FCEE0A;
+}
+
+[data-theme='nightcity-2077'] .nav-link.active::before {
+  width: 3px;
+  background: #FCEE0A;
+  box-shadow: 2px 0 14px rgba(252, 238, 10, 0.7);
+}
+
+/* Buttons: angular chamfered corner — iconic CP2077 UI shape */
+[data-theme='nightcity-2077'] .btn-primary {
+  background: #FCEE0A;
+  color: #000000;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  border: none;
+  border-radius: 0;
+  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
+}
+
+[data-theme='nightcity-2077'] .btn-primary:hover {
+  background: #ffe84d;
+  box-shadow: 0 0 20px rgba(252, 238, 10, 0.5);
+}
+
+[data-theme='nightcity-2077'] .btn-surface {
+  border-radius: 0;
+  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
+}
+
+/* Queue active = cyan netrunner bar */
+[data-theme='nightcity-2077'] .queue-item.active {
+  background: rgba(0, 245, 255, 0.07);
+  box-shadow: inset 3px 0 0 #00f5ff;
+}
+
+[data-theme='nightcity-2077'] .np-queue-item.active {
+  background: rgba(0, 245, 255, 0.06);
+}
+
+[data-theme='nightcity-2077'] .np-queue-item-active {
+  color: #FCEE0A;
+  text-shadow: 0 0 8px rgba(252, 238, 10, 0.6);
+}
+
+/* Now-playing active track = magenta gang glow */
+[data-theme='nightcity-2077'] .np-album-track.active .np-album-track-title,
+[data-theme='nightcity-2077'] .np-album-track.active .np-album-track-num {
+  color: #ff2d9b;
+  text-shadow: 0 0 10px rgba(255, 45, 155, 0.55);
+}
+
+/* Hover rows: yellow left bar */
+[data-theme='nightcity-2077'] .track-row:hover,
+[data-theme='nightcity-2077'] .track-row.context-active {
+  background: rgba(252, 238, 10, 0.06) !important;
+  box-shadow: inset 3px 0 0 #FCEE0A;
+}
+
+[data-theme='nightcity-2077'] .queue-item:hover,
+[data-theme='nightcity-2077'] .queue-item.context-active {
+  background: rgba(0, 245, 255, 0.06) !important;
+  box-shadow: inset 3px 0 0 #00f5ff;
+}
+
+[data-theme='nightcity-2077'] .np-queue-item:hover,
+[data-theme='nightcity-2077'] .np-queue-item.context-active {
+  background: rgba(0, 245, 255, 0.06);
+  box-shadow: inset 2px 0 0 #00f5ff;
+}
+
+[data-theme='nightcity-2077'] .artist-row:hover {
+  background: rgba(252, 238, 10, 0.05);
+  box-shadow: inset 3px 0 0 #FCEE0A;
+}
+
+[data-theme='nightcity-2077'] .playlist-row:hover {
+  background: rgba(252, 238, 10, 0.05);
+  box-shadow: inset 3px 0 0 #FCEE0A;
+}
+
+/* Settings tabs: active = magenta Valentinos style */
+[data-theme='nightcity-2077'] .settings-tab:hover {
+  background: rgba(252, 238, 10, 0.06);
+  color: #FCEE0A;
+}
+
+[data-theme='nightcity-2077'] .settings-tab.active {
+  background: rgba(255, 45, 155, 0.08);
+  color: #ff2d9b;
+  box-shadow: inset 3px 0 0 #ff2d9b;
+}
+
+/* Queue tabs */
+[data-theme='nightcity-2077'] .queue-tab-btn:hover {
+  background: rgba(0, 245, 255, 0.07);
+  color: #00f5ff;
+}
+
+/* Dropdowns */
+[data-theme='nightcity-2077'] .custom-select-trigger:hover {
+  background: rgba(252, 238, 10, 0.07);
+}
+
+[data-theme='nightcity-2077'] .custom-select-option:hover {
+  background: rgba(252, 238, 10, 0.1) !important;
+  color: #FCEE0A !important;
+}
+
+/* Artist pills = Trauma Team orange */
+[data-theme='nightcity-2077'] .artist-ext-link:hover {
+  background: rgba(255, 136, 0, 0.1);
+  color: #ff8800 !important;
+  border-color: rgba(255, 136, 0, 0.4) !important;
+}
+
+/* Cards: dark glass with cyan edge-glow */
+[data-theme='nightcity-2077'] .glass {
+  border: 1px solid rgba(0, 245, 255, 0.12) !important;
+  box-shadow: 0 0 0 1px rgba(252, 238, 10, 0.04), inset 0 0 20px rgba(0, 245, 255, 0.02) !important;
+}
+
+/* Connection indicators */
+[data-theme='nightcity-2077'] .connection-type,
+[data-theme='nightcity-2077'] .connection-server {
+  color: #00f5ff;
+}
+

src/styles/themes/nightfox.css

@@ -0,0 +1,53 @@
+/* ─── Nightfox ─── */
+[data-theme='nightfox'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23cdcecf%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  --ctp-crust: #131a24;
+  --ctp-mantle: #131a24;
+  --ctp-base: #192330;
+  --ctp-surface0: #212e3f;
+  --ctp-surface1: #29394f;
+  --ctp-surface2: #39506d;
+  --ctp-overlay0: #71839b;
+  --ctp-overlay1: #71839b;
+  --ctp-overlay2: #aeafb0;
+  --ctp-text: #cdcecf;
+  --ctp-subtext1: #aeafb0;
+  --ctp-subtext0: #71839b;
+  --ctp-mauve: #9d79d6;
+  --ctp-lavender: #719cd6;
+  --ctp-pink: #d67ad2;
+  --ctp-flamingo: #d67ad2;
+  --ctp-rosewater: #d67ad2;
+  --ctp-blue: #719cd6;
+  --ctp-sapphire: #9d79d6;
+  --ctp-sky: #63cdcf;
+  --ctp-teal: #63cdcf;
+  --ctp-green: #81b29a;
+  --ctp-yellow: #dbc074;
+  --ctp-peach: #f4a261;
+  --ctp-maroon: #c94f6d;
+  --ctp-red: #c94f6d;
+
+  --bg-app: #192330;
+  --bg-sidebar: #131a24;
+  --bg-card: #212e3f;
+  --bg-hover: #29394f;
+  --bg-player: #131a24;
+  --bg-glass: rgba(25, 35, 48, 0.75);
+  --accent: #719cd6;
+  --accent-dim: rgba(113, 156, 214, 0.15);
+  --accent-glow: rgba(113, 156, 214, 0.3);
+  --text-primary: #cdcecf;
+  --text-secondary: #aeafb0;
+  --text-muted: #738091;
+  --border: #29394f;
+  --border-subtle: #212e3f;
+  --border-dropdown: #39506d;
+  --shadow-dropdown: rgba(0, 0, 0, 0.6);
+  --positive: #81b29a;
+  --warning: #dbc074;
+  --danger: #c94f6d;
+}
+

src/styles/themes/nord-aurora-dark-aurora-purple.css

@@ -0,0 +1,55 @@
+/* ─── Nord – Aurora (Dark + Aurora Purple) ─── */
+[data-theme='nord-aurora'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23e5e9f0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+  /* Polar Night base */
+  --ctp-crust: #2e3440;
+  --ctp-mantle: #2e3440;
+  --ctp-base: #3b4252;
+  --ctp-surface0: #434c5e;
+  --ctp-surface1: #4c566a;
+  --ctp-surface2: #576070;
+  --ctp-overlay0: #7a8898;
+  --ctp-overlay1: #8894a4;
+  --ctp-overlay2: #96a2b0;
+  /* Snow Storm as text */
+  --ctp-text: #eceff4;
+  --ctp-subtext1: #e5e9f0;
+  --ctp-subtext0: #d8dee9;
+  /* Aurora accents — purple as mauve/lavender for button gradients */
+  --ctp-mauve: #b48ead;
+  --ctp-lavender: #a3be8c;
+  --ctp-pink: #b48ead;
+  --ctp-teal: #8fbcbb;
+  --ctp-sky: #88c0d0;
+  --ctp-sapphire: #81a1c1;
+  --ctp-blue: #5e81ac;
+  --ctp-red: #bf616a;
+  --ctp-maroon: #d08770;
+  --ctp-peach: #d08770;
+  --ctp-yellow: #ebcb8b;
+  --ctp-green: #a3be8c;
+  --ctp-flamingo: #bf616a;
+  --ctp-rosewater: #d08770;
+
+  --bg-app: #3b4252;
+  --bg-sidebar: #2e3440;
+  --bg-card: #434c5e;
+  --bg-hover: #4c566a;
+  --bg-player: #2e3440;
+  --bg-glass: rgba(59, 66, 82, 0.75);
+  --accent: #b48ead;
+  --accent-dim: rgba(180, 142, 173, 0.15);
+  --accent-glow: rgba(180, 142, 173, 0.3);
+  --text-primary: #eceff4;
+  --text-secondary: #e5e9f0;
+  --text-muted: #a0aab8;
+  --border: #434c5e;
+  --border-subtle: #3b4252;
+  --border-dropdown: #576070;
+  --shadow-dropdown: rgba(0, 0, 0, 0.55);
+  --positive: #a3be8c;
+  --warning: #ebcb8b;
+  --danger: #bf616a;
+}
+

src/styles/themes/nord-frost-deep-ocean-blue.css

@@ -0,0 +1,56 @@
+/* ─── Nord – Frost (Deep Ocean Blue) ─── */
+[data-theme='nord-frost'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23e5e9f0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+  /* Deep ocean blue – Frost-inspired dark backgrounds */
+  --ctp-crust: #1a2535;
+  --ctp-mantle: #1d2b3a;
+  --ctp-base: #253545;
+  --ctp-surface0: #2d3f52;
+  --ctp-surface1: #354a60;
+  --ctp-surface2: #3d546e;
+  --ctp-overlay0: #6888a4;
+  --ctp-overlay1: #7898b4;
+  --ctp-overlay2: #88a8c4;
+  /* Snow Storm as text */
+  --ctp-text: #eceff4;
+  --ctp-subtext1: #e5e9f0;
+  --ctp-subtext0: #d8dee9;
+  /* Frost accent */
+  --ctp-teal: #8fbcbb;
+  --ctp-sky: #88c0d0;
+  --ctp-sapphire: #81a1c1;
+  --ctp-blue: #5e81ac;
+  --ctp-lavender: #8fbcbb;
+  --ctp-mauve: #88c0d0;
+  /* Aurora */
+  --ctp-red: #bf616a;
+  --ctp-maroon: #d08770;
+  --ctp-peach: #d08770;
+  --ctp-yellow: #ebcb8b;
+  --ctp-green: #a3be8c;
+  --ctp-pink: #b48ead;
+  --ctp-flamingo: #bf616a;
+  --ctp-rosewater: #d08770;
+
+  --bg-app: #253545;
+  --bg-sidebar: #1d2b3a;
+  --bg-card: #2d3f52;
+  --bg-hover: #354a60;
+  --bg-player: #1a2535;
+  --bg-glass: rgba(37, 53, 69, 0.75);
+  --accent: #88c0d0;
+  --accent-dim: rgba(136, 192, 208, 0.15);
+  --accent-glow: rgba(136, 192, 208, 0.35);
+  --text-primary: #eceff4;
+  --text-secondary: #e5e9f0;
+  --text-muted: #7898b4;
+  --border: #2d3f52;
+  --border-subtle: #253545;
+  --border-dropdown: #3d546e;
+  --shadow-dropdown: rgba(0, 0, 0, 0.6);
+  --positive: #a3be8c;
+  --warning: #ebcb8b;
+  --danger: #bf616a;
+}
+

src/styles/themes/nord-polar-night-dark.css

@@ -0,0 +1,56 @@
+/* ─── Nord – Polar Night (Dark) ─── */
+[data-theme='nord'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23e5e9f0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+  /* Polar Night */
+  --ctp-crust: #2e3440;
+  --ctp-mantle: #2e3440;
+  --ctp-base: #3b4252;
+  --ctp-surface0: #434c5e;
+  --ctp-surface1: #4c566a;
+  --ctp-surface2: #576070;
+  --ctp-overlay0: #7a8898;
+  --ctp-overlay1: #8894a4;
+  --ctp-overlay2: #96a2b0;
+  /* Snow Storm as text */
+  --ctp-text: #eceff4;
+  --ctp-subtext1: #e5e9f0;
+  --ctp-subtext0: #d8dee9;
+  /* Frost */
+  --ctp-teal: #8fbcbb;
+  --ctp-sky: #88c0d0;
+  --ctp-sapphire: #81a1c1;
+  --ctp-blue: #5e81ac;
+  --ctp-lavender: #81a1c1;
+  --ctp-mauve: #88c0d0;
+  /* Aurora */
+  --ctp-red: #bf616a;
+  --ctp-maroon: #d08770;
+  --ctp-peach: #d08770;
+  --ctp-yellow: #ebcb8b;
+  --ctp-green: #a3be8c;
+  --ctp-pink: #b48ead;
+  --ctp-flamingo: #bf616a;
+  --ctp-rosewater: #d08770;
+
+  --bg-app: #3b4252;
+  --bg-sidebar: #2e3440;
+  --bg-card: #434c5e;
+  --bg-hover: #4c566a;
+  --bg-player: #2e3440;
+  --bg-glass: rgba(59, 66, 82, 0.75);
+  --accent: #88c0d0;
+  --accent-dim: rgba(136, 192, 208, 0.15);
+  --accent-glow: rgba(136, 192, 208, 0.3);
+  --text-primary: #eceff4;
+  --text-secondary: #e5e9f0;
+  --text-muted: #a0aab8;
+  --border: #434c5e;
+  --border-subtle: #3b4252;
+  --border-dropdown: #576070;
+  --shadow-dropdown: rgba(0, 0, 0, 0.55);
+  --positive: #a3be8c;
+  --warning: #ebcb8b;
+  --danger: #bf616a;
+}
+

src/styles/themes/nord-snow-storm-light.css

@@ -0,0 +1,54 @@
+/* ─── Nord – Snow Storm (Light) ─── */
+[data-theme='nord-snowstorm'] {
+  color-scheme: light;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%233b4252%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+  /* Snow Storm as backgrounds */
+  --ctp-crust: #d8dee9;
+  --ctp-mantle: #e5e9f0;
+  --ctp-base: #eceff4;
+  --ctp-surface0: #d8dee9;
+  --ctp-surface1: #c8d0de;
+  --ctp-surface2: #b8c2d0;
+  --ctp-overlay0: #7a8898;
+  --ctp-overlay1: #636e7e;
+  --ctp-overlay2: #4c566a;
+  /* Polar Night as text */
+  --ctp-text: #2e3440;
+  --ctp-subtext1: #3b4252;
+  --ctp-subtext0: #434c5e;
+  /* Frost */
+  --ctp-teal: #8fbcbb;
+  --ctp-sky: #88c0d0;
+  --ctp-sapphire: #81a1c1;
+  --ctp-blue: #5e81ac;
+  --ctp-lavender: #81a1c1;
+  --ctp-mauve: #5e81ac;
+  /* Aurora */
+  --ctp-red: #bf616a;
+  --ctp-maroon: #d08770;
+  --ctp-peach: #d08770;
+  --ctp-yellow: #9a7200;
+  --ctp-green: #4e7c3f;
+  --ctp-pink: #7e5d8c;
+  --ctp-flamingo: #bf616a;
+  --ctp-rosewater: #d08770;
+
+  --bg-app: #eceff4;
+  --bg-sidebar: #e5e9f0;
+  --bg-card: #d8dee9;
+  --bg-hover: #c8d0de;
+  --bg-player: #e5e9f0;
+  --bg-glass: rgba(236, 239, 244, 0.80);
+  --accent: #5e81ac;
+  --accent-dim: rgba(94, 129, 172, 0.15);
+  --accent-glow: rgba(94, 129, 172, 0.3);
+  --text-primary: #2e3440;
+  --text-secondary: #3b4252;
+  --text-muted: #636e7e;
+  --border: #c8d0de;
+  --border-subtle: #d8dee9;
+  --positive: #4e7c3f;
+  --warning: #9a7200;
+  --danger: #bf616a;
+}
+

src/styles/themes/nordfox.css

@@ -0,0 +1,53 @@
+/* ─── Nordfox ─── */
+[data-theme='nordfox'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23cdcecf%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  --ctp-crust: #232831;
+  --ctp-mantle: #232831;
+  --ctp-base: #2e3440;
+  --ctp-surface0: #39404f;
+  --ctp-surface1: #444c5e;
+  --ctp-surface2: #5a657d;
+  --ctp-overlay0: #60728a;
+  --ctp-overlay1: #7e8188;
+  --ctp-overlay2: #abb1bb;
+  --ctp-text: #cdcecf;
+  --ctp-subtext1: #c7cdd9;
+  --ctp-subtext0: #abb1bb;
+  --ctp-mauve: #b48ead;
+  --ctp-lavender: #81a1c1;
+  --ctp-pink: #bf88bc;
+  --ctp-flamingo: #bf616a;
+  --ctp-rosewater: #c9826b;
+  --ctp-blue: #81a1c1;
+  --ctp-sapphire: #81a1c1;
+  --ctp-sky: #88c0d0;
+  --ctp-teal: #88c0d0;
+  --ctp-green: #a3be8c;
+  --ctp-yellow: #ebcb8b;
+  --ctp-peach: #c9826b;
+  --ctp-maroon: #bf616a;
+  --ctp-red: #bf616a;
+
+  --bg-app: #2e3440;
+  --bg-sidebar: #232831;
+  --bg-card: #39404f;
+  --bg-hover: #444c5e;
+  --bg-player: #232831;
+  --bg-glass: rgba(46, 52, 64, 0.75);
+  --accent: #81a1c1;
+  --accent-dim: rgba(129, 161, 193, 0.15);
+  --accent-glow: rgba(129, 161, 193, 0.3);
+  --text-primary: #cdcecf;
+  --text-secondary: #abb1bb;
+  --text-muted: #60728a;
+  --border: #444c5e;
+  --border-subtle: #39404f;
+  --border-dropdown: #5a657d;
+  --shadow-dropdown: rgba(0, 0, 0, 0.6);
+  --positive: #a3be8c;
+  --warning: #ebcb8b;
+  --danger: #bf616a;
+}
+

src/styles/themes/north-park-south-park.css

@@ -0,0 +1,337 @@
+/* ─── North Park — South Park ─── */
+/* Construction paper flat aesthetic — paper-cream main, Colorado mountain-blue sidebar,
+   Kenny orange accent, South Park sky blue player accents. Light, no dark mode. */
+[data-theme='north-park'] {
+  color-scheme: light;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FF8C00%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  /* ── Palette — Kenny orange, South Park sky, Colorado Rockies ── */
+  --ctp-crust: #0D2040;
+  --ctp-mantle: #142D50;
+  --ctp-base: #F5F1E8;
+  /* construction paper cream */
+  --ctp-surface0: #EDE9DE;
+  --ctp-surface1: #E5E0D2;
+  --ctp-surface2: #D8D2C0;
+  --ctp-overlay0: #8090A8;
+  --ctp-overlay1: #5A6A80;
+  --ctp-overlay2: #4A526A;
+  --ctp-text: #1A1A2E;
+  --ctp-subtext1: #3A3A5A;
+  --ctp-subtext0: #4A526A;
+  --ctp-mauve: #FF8C00;
+  /* Kenny orange */
+  --ctp-lavender: #FFB030;
+  --ctp-pink: #FF6A00;
+  --ctp-flamingo: #FF5500;
+  --ctp-rosewater: #FFD080;
+  --ctp-green: #3D9A2A;
+  /* Kyle's green hat */
+  --ctp-teal: #2080A0;
+  --ctp-sky: #87CEEB;
+  /* South Park sky */
+  --ctp-blue: #1E4080;
+  --ctp-sapphire: #1B3D6E;
+  --ctp-yellow: #FFD700;
+  --ctp-peach: #FF8C00;
+  --ctp-maroon: #CC4400;
+  --ctp-red: #CC2200;
+  /* Cartman red */
+
+  --bg-app: #F5F1E8;
+  /* construction paper cream */
+  --bg-sidebar: #1B3D6E;
+  /* Colorado Rockies night blue */
+  --bg-card: #FFFFFF;
+  --bg-hover: #EDE9DE;
+  --bg-player: #102A50;
+  /* deeper mountain blue */
+  --bg-glass: rgba(245, 241, 232, 0.94);
+  --accent: #FF8C00;
+  /* Kenny orange */
+  --accent-dim: rgba(255, 140, 0, 0.13);
+  --accent-glow: rgba(255, 140, 0, 0.30);
+  --text-primary: #1A1A2E;
+  --text-secondary: #4A526A;
+  --text-muted: #8090A8;
+  --border: rgba(27, 61, 110, 0.14);
+  --border-subtle: rgba(27, 61, 110, 0.08);
+  --border-dropdown: rgba(255, 140, 0, 0.28);
+  --shadow-dropdown: rgba(0, 20, 60, 0.18);
+  --positive: #3D9A2A;
+  --warning: #E8A000;
+  --danger: #CC2200;
+  --radius-sm: 3px;
+  --radius-md: 6px;
+  --radius-lg: 10px;
+
+  /* Logo: Kenny orange → South Park yellow */
+  --logo-color-start: #FF8C00;
+  --logo-color-end: #FFD700;
+}
+
+/* Sidebar — Colorado mountain blue, orange nav accents */
+[data-theme='north-park'] .sidebar {
+  background: #1B3D6E;
+  border-right: none;
+}
+
+/* Nav links: default text light on dark sidebar */
+[data-theme='north-park'] .nav-link {
+  color: rgba(255, 255, 255, 0.72);
+}
+
+[data-theme='north-park'] .nav-link.active {
+  background: rgba(255, 140, 0, 0.18);
+  border-left: 3px solid #FF8C00;
+  color: #FF8C00;
+}
+
+[data-theme='north-park'] .nav-link:hover:not(.active) {
+  background: rgba(255, 255, 255, 0.09);
+  border-left: 3px solid rgba(255, 140, 0, 0.45);
+  color: rgba(255, 255, 255, 0.95);
+}
+
+/* Player bar — deep mountain blue, Kenny orange top stripe */
+[data-theme='north-park'] .player-bar {
+  background: #102A50;
+  border-top: 3px solid #FF8C00;
+  box-shadow: 0 -2px 20px rgba(0, 20, 60, 0.30);
+}
+
+/* Track name — Kenny orange */
+[data-theme='north-park'] .player-track-name {
+  color: #FF8C00;
+}
+
+/* Artist name — South Park sky blue */
+[data-theme='north-park'] .player-artist-name {
+  color: #87CEEB;
+}
+
+/* Content header — warm paper border */
+[data-theme='north-park'] .content-header {
+  border-bottom: 1px solid rgba(27, 61, 110, 0.12);
+}
+
+/* Cards — clean white cutouts with paper shadow */
+[data-theme='north-park'] .album-card,
+[data-theme='north-park'] .artist-card {
+  background: #FFFFFF;
+  box-shadow: 0 1px 4px rgba(0, 20, 60, 0.08);
+}
+
+[data-theme='north-park'] .album-card:hover,
+[data-theme='north-park'] .artist-card:hover {
+  box-shadow: 0 0 0 2px #FF8C00, 0 4px 16px rgba(0, 20, 60, 0.12);
+}
+
+/* Track rows (light main area) */
+[data-theme='north-park'] .track-row:hover {
+  background: #EDE9DE;
+  box-shadow: inset 2px 0 0 #FF8C00;
+}
+
+/* Queue items (dark blue sidebar — keep bg dark, text stays white) */
+[data-theme='north-park'] .queue-item:hover {
+  background: rgba(255, 255, 255, 0.09);
+  box-shadow: inset 2px 0 0 #FF8C00;
+}
+
+/* Flat primary button — orange, no gradient */
+[data-theme='north-park'] .player-btn-primary {
+  background: #FF8C00;
+  color: #FFFFFF;
+  box-shadow: none;
+  border: none;
+}
+
+[data-theme='north-park'] .player-btn-primary:hover {
+  background: #E07800;
+  box-shadow: 0 0 14px rgba(255, 140, 0, 0.40);
+}
+
+[data-theme='north-park'] .btn-primary {
+  background: #FF8C00;
+  color: #FFFFFF;
+  border: none;
+}
+
+[data-theme='north-park'] .btn-primary:hover {
+  background: #E07800;
+}
+
+[data-theme='north-park'] .hero-play-btn {
+  background: #FF8C00;
+  color: #FFFFFF;
+  border: none;
+  box-shadow: 0 2px 14px rgba(255, 140, 0, 0.35);
+}
+
+[data-theme='north-park'] .hero-play-btn:hover {
+  background: #E07800;
+  box-shadow: 0 4px 22px rgba(255, 140, 0, 0.55);
+  transform: scale(1.02);
+}
+
+[data-theme='north-park'] .album-card-details-btn {
+  background: #FF8C00;
+  color: #FFFFFF;
+  border: none;
+  box-shadow: 0 2px 10px rgba(255, 140, 0, 0.30);
+}
+
+/* Badge — orange pill */
+[data-theme='north-park'] .badge,
+[data-theme='north-park'] .album-detail-badge {
+  background: #FF8C00;
+  color: #FFFFFF;
+}
+
+/* Settings tabs */
+[data-theme='north-park'] .settings-tab:hover {
+  background: rgba(255, 140, 0, 0.08);
+  color: #FF8C00;
+}
+
+[data-theme='north-park'] .settings-tab.active {
+  background: rgba(255, 140, 0, 0.13);
+  color: #FF8C00;
+  border-color: #FF8C00;
+}
+
+[data-theme='north-park'] .queue-tab-btn:hover {
+  background: rgba(255, 255, 255, 0.10);
+  color: rgba(255, 255, 255, 0.90);
+}
+
+/* Misc interactive */
+[data-theme='north-park'] .custom-select-trigger:hover {
+  background: #EDE9DE;
+}
+
+[data-theme='north-park'] .custom-select-option:hover {
+  background: rgba(255, 140, 0, 0.10);
+}
+
+[data-theme='north-park'] .artist-row:hover {
+  background: rgba(255, 140, 0, 0.07);
+  box-shadow: inset 3px 0 0 #FF8C00;
+}
+
+[data-theme='north-park'] .playlist-row:hover {
+  background: rgba(255, 140, 0, 0.07);
+  box-shadow: inset 3px 0 0 #FF8C00;
+}
+
+/* Connection indicators — muted on light bg */
+[data-theme='north-park'] .connection-type,
+[data-theme='north-park'] .connection-server {
+  color: #7A8A9A;
+}
+
+/* Queue panel — dark sidebar, light text overrides */
+[data-theme='north-park'] .queue-panel {
+  background: #1B3D6E;
+}
+
+[data-theme='north-park'] .queue-item-title {
+  color: rgba(255, 255, 255, 0.90);
+}
+
+[data-theme='north-park'] .queue-item-artist,
+[data-theme='north-park'] .queue-item-duration {
+  color: rgba(255, 255, 255, 0.52);
+}
+
+[data-theme='north-park'] .queue-item.active .queue-item-artist,
+[data-theme='north-park'] .queue-item.active .queue-item-duration {
+  color: rgba(255, 255, 255, 0.72);
+}
+
+[data-theme='north-park'] .queue-divider span {
+  color: rgba(255, 255, 255, 0.38) !important;
+}
+
+[data-theme='north-park'] .queue-current-info h3 {
+  color: rgba(255, 255, 255, 0.92);
+}
+
+[data-theme='north-park'] .queue-current-sub {
+  color: rgba(255, 255, 255, 0.55);
+}
+
+[data-theme='north-park'] .queue-current-cover .fallback {
+  color: rgba(255, 255, 255, 0.32);
+}
+
+[data-theme='north-park'] .queue-tab-btn {
+  color: rgba(255, 255, 255, 0.58);
+}
+
+[data-theme='north-park'] .queue-tab-btn.active {
+  color: #FF8C00;
+}
+
+[data-theme='north-park'] .queue-round-btn.active {
+  color: #FFFFFF;
+}
+
+[data-theme='north-park'] .queue-action-btn {
+  color: rgba(255, 255, 255, 0.60);
+}
+
+[data-theme='north-park'] .queue-action-btn:hover:not(:disabled) {
+  color: rgba(255, 255, 255, 0.92);
+}
+
+/* Back button + hero text — needs high contrast on dark overlay at top of album header */
+[data-theme='north-park'] .album-detail-back {
+  color: rgba(255, 255, 255, 0.85);
+}
+
+[data-theme='north-park'] .album-detail-back:hover {
+  background: rgba(255, 255, 255, 0.12);
+  color: #ffffff;
+}
+
+[data-theme='north-park'] .album-detail-info {
+  color: rgba(255, 255, 255, 0.80);
+}
+
+/* Artist name in hero — soften the orange to a warm amber, less glaring */
+[data-theme='north-park'] .album-detail-artist,
+[data-theme='north-park'] .album-detail-artist-link {
+  color: #FFAB40;
+}
+
+[data-theme='north-park'] .album-detail-artist-link:hover {
+  color: #FFD080;
+}
+
+/* np-album-track (Now Playing page) */
+[data-theme='north-park'] .np-album-track.active .np-album-track-title,
+[data-theme='north-park'] .np-album-track.active .np-album-track-num {
+  color: #FF8C00;
+}
+
+/* Scrollbar — thin, orange thumb */
+[data-theme='north-park'] ::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+[data-theme='north-park'] ::-webkit-scrollbar-track {
+  background: #EDE9DE;
+}
+
+[data-theme='north-park'] ::-webkit-scrollbar-thumb {
+  background: rgba(255, 140, 0, 0.35);
+  border-radius: 3px;
+}
+
+[data-theme='north-park'] ::-webkit-scrollbar-thumb:hover {
+  background: #FF8C00;
+}
+

src/styles/themes/nucleo-classic-hifi-winamp-brass.css

@@ -0,0 +1,111 @@
+/* ─── Nucleo — Classic HiFi / Winamp Brass ─── */
+[data-theme='nucleo'] {
+  color-scheme: light;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%238c7356%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  /* ── Palette ── */
+  --ctp-crust: #c8a458;
+  --ctp-mantle: #dfc08f;
+  --ctp-base: #e9d3ac;
+  --ctp-surface0: #eedbb8;
+  --ctp-surface1: #f5e4c3;
+  --ctp-surface2: #f9ecd4;
+  --ctp-overlay0: #b09060;
+  --ctp-overlay1: #987848;
+  --ctp-overlay2: #805c30;
+  --ctp-text: #2c1e10;
+  --ctp-subtext1: #5a3e20;
+  --ctp-subtext0: #8c7356;
+  /* Accents — burnished brass + warm tones */
+  --ctp-mauve: #7a5218;
+  /* dark burnished brass — primary accent */
+  --ctp-lavender: #9a6a28;
+  /* mid brass — hover/lighter variant */
+  --ctp-pink: #c06880;
+  --ctp-flamingo: #c06050;
+  --ctp-rosewater: #d08070;
+  --ctp-blue: #5878a8;
+  /* muted steel blue */
+  --ctp-sapphire: #4868a0;
+  --ctp-sky: #6898b8;
+  --ctp-teal: #487878;
+  --ctp-green: #587838;
+  /* muted olive */
+  --ctp-yellow: #a88020;
+  /* dark burnished gold */
+  --ctp-peach: #b87040;
+  --ctp-maroon: #903030;
+  --ctp-red: #a03828;
+
+  /* ── Semantic tokens ── */
+  --bg-app: #f5e4c3;
+  --bg-sidebar: #e9d3ac;
+  --bg-card: #eedbb8;
+  --bg-hover: #e3cc9e;
+  --bg-player: #dfc08f;
+  --bg-glass: rgba(245, 228, 195, 0.90);
+  --accent: #7a5218;
+  --accent-dim: rgba(122, 82, 24, 0.15);
+  --accent-glow: rgba(122, 82, 24, 0.30);
+  --text-primary: #2c1e10;
+  --text-secondary: #5a3e20;
+  --text-muted: #6b5636;
+  --border: #765a38;
+  --border-subtle: #dfc08f;
+  --positive: #3e5820;
+  --warning: #7a5b0e;
+  --danger: #a03828;
+}
+
+/* ── Nucleo: skeuomorphic detail layer ── */
+[data-theme='nucleo'] .sidebar {
+  background-image: repeating-linear-gradient(90deg,
+      rgba(255, 255, 255, 0.06) 0px,
+      rgba(255, 255, 255, 0.06) 1px,
+      transparent 1px,
+      transparent 5px);
+}
+
+[data-theme='nucleo'] .player-bar {
+  background-image: repeating-linear-gradient(90deg,
+      rgba(255, 255, 255, 0.05) 0px,
+      rgba(255, 255, 255, 0.05) 1px,
+      transparent 1px,
+      transparent 5px);
+}
+
+[data-theme='nucleo'] .player-track-name {
+  text-shadow: 0 0 10px rgba(255, 244, 219, 0.75), 0 0 2px rgba(255, 244, 219, 0.4);
+}
+
+[data-theme='nucleo'] .btn {
+  box-shadow: 0 2px 4px rgba(44, 30, 16, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.35);
+}
+
+[data-theme='nucleo'] .btn-surface {
+  background: #c8a860;
+  color: #2c1e10;
+}
+
+[data-theme='nucleo'] .btn-surface:hover {
+  background: #b89448;
+}
+
+[data-theme='nucleo'] .btn-ghost:hover {
+  background: #c8a860;
+  color: #2c1e10;
+}
+
+[data-theme='nucleo'] .player-btn,
+[data-theme='nucleo'] .player-btn-primary {
+  box-shadow: 0 2px 5px rgba(44, 30, 16, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4);
+}
+
+/* Column resize grip — default --ctp-surface1 (#f5e4c3) on bg-card (#eedbb8)
+   is 1.08:1 (invisible on this warm cream palette). Use --border (#765a38,
+   4.70:1) to get a perceptible bronze grip that matches the brass accents. */
+[data-theme='nucleo'] .col-resize-handle::after {
+  background: var(--border);
+  width: 2px;
+}
+

src/styles/themes/obsidian-black.css

@@ -0,0 +1,72 @@
+/* ─── Obsidian Black ─── */
+[data-theme='obsidian-black'] {
+  color-scheme: dark;
+
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23dfddd8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+
+  /* Backgrounds */
+  --ctp-crust:    #000000;
+  --ctp-mantle:   #040404;
+  --ctp-base:     #090908;
+  --ctp-surface0: #11110f;
+  --ctp-surface1: #171714;
+  --ctp-surface2: #20201c;
+
+  /* Overlays */
+  --ctp-overlay0: #30302b;
+  --ctp-overlay1: #474740;
+  --ctp-overlay2: #5e5e54;
+
+  /* Text */
+  --ctp-text:     #f5f3ee;
+  --ctp-subtext1: #d2cec4;
+  --ctp-subtext0: #9f998d;
+
+  /* Obsidian Accent */
+  --ctp-teal:      #d8d6d2;
+  --ctp-sky:       #c6c3bc;
+  --ctp-sapphire:  #a6a297;
+  --ctp-blue:      #7f7a70;
+  --ctp-lavender:  #ebe7de;
+  --ctp-mauve:     #a6a297;
+  --ctp-pink:      #7f7a70;
+  --ctp-flamingo:  #ebe7de;
+  --ctp-rosewater: #b8b3a8;
+
+  /* Semantic */
+  --ctp-red:     #ff5f57;
+  --ctp-maroon:  #ff9f43;
+  --ctp-peach:   #ff9f43;
+  --ctp-yellow:  #ffd166;
+  --ctp-green:   #57d98c;
+
+  /* UI */
+  --bg-app:      #070706;
+  --bg-sidebar:  #0a0a09;
+  --bg-card:     #11110f;
+  --bg-hover:    #191916;
+  --bg-player:   #090908;
+  --bg-glass:    rgba(10,10,9,0.80);
+
+  /* Accent */
+  --accent:      #dfddd8;
+  --accent-dim:  rgba(223,221,216,0.05);
+  --accent-glow: rgba(223,221,216,0.10);
+
+  /* Text UI */
+  --text-primary:   #f5f3ee;
+  --text-secondary: #b6b0a5;
+  --text-muted:     #767066;
+
+  /* Borders */
+  --border:          #272722;
+  --border-subtle:   #1a1a16;
+  --border-dropdown: #32322c;
+  --shadow-dropdown: rgba(0,0,0,0.92);
+
+  /* Status */
+  --positive: #57d98c;
+  --warning:  #ffd166;
+  --danger:   #ff5f57;
+}
+

src/styles/themes/obsidian-gold.css

@@ -0,0 +1,72 @@
+/* ─── Obsidian Gold ─── */
+[data-theme='obsidian-gold'] {
+  color-scheme: dark;
+
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c9a227' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+
+  /* Backgrounds */
+  --ctp-crust:    #050505;
+  --ctp-mantle:   #0a0907;
+  --ctp-base:     #0f0d09;
+  --ctp-surface0: #15120d;
+  --ctp-surface1: #1d1811;
+  --ctp-surface2: #262016;
+
+  /* Overlays */
+  --ctp-overlay0: #4f4218;
+  --ctp-overlay1: #635223;
+  --ctp-overlay2: #6f5a1c;
+
+  /* Text */
+  --ctp-text:     #f8f4e8;
+  --ctp-subtext1: #dbc98d;
+  --ctp-subtext0: #b89f56;
+
+  /* Gold Accent */
+  --ctp-teal:      #c9a227;
+  --ctp-sky:       #d4af37;
+  --ctp-sapphire:  #b8922d;
+  --ctp-blue:      #8f6e22;
+  --ctp-lavender:  #e0b84f;
+  --ctp-mauve:     #b8922d;
+  --ctp-pink:      #8f6e22;
+  --ctp-flamingo:  #e0b84f;
+  --ctp-rosewater: #b8922d;
+
+  /* Semantic */
+  --ctp-red:     #ff5c5c;
+  --ctp-maroon:  #ff9b57;
+  --ctp-peach:   #ff9b57;
+  --ctp-yellow:  #e0b84f;
+  --ctp-green:   #57d98c;
+
+  /* UI Tokens */
+  --bg-app:      #0f0d09;
+  --bg-sidebar:  #0a0907;
+  --bg-card:     #15120d;
+  --bg-hover:    #1d1811;
+  --bg-player:   #0a0907;
+  --bg-glass:    rgba(15, 13, 9, 0.82);
+
+  /* Accent */
+  --accent:      #c9a227;
+  --accent-dim:  rgba(201, 162, 39, 0.06);
+  --accent-glow: rgba(201, 162, 39, 0.12);
+
+  /* Text UI */
+  --text-primary:   #f8f4e8;
+  --text-secondary: #b89f56;
+  --text-muted:     #7a6830;
+
+  /* Borders */
+  --border:          #262016;
+  --border-subtle:   #1d1811;
+  --border-dropdown: #31281a;
+  --shadow-dropdown: rgba(0, 0, 0, 0.92);
+
+  /* Status */
+  --positive: #57d98c;
+  --warning:  #e0b84f;
+  --danger:   #ff5c5c;
+}
+

src/styles/themes/order-of-the-phoenix.css

@@ -0,0 +1 @@
+/* ─── Order of the Phoenix ─── */

src/styles/themes/pandora-bioluminescent-sci-fi.css

@@ -0,0 +1,4 @@
+/* ─────────────────────────────────────────────────────────────
+   Pandora — Bioluminescent Sci-Fi
+   ───────────────────────────────────────────────────────────── */
+

src/styles/themes/poison.css

@@ -0,0 +1,74 @@
+/* ─── Poison ─── */
+[data-theme='poison'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231bd655%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  /* ── Palette — charcoal grays + phosphor green ── */
+  --ctp-crust: #0e0e0e;
+  --ctp-mantle: #161616;
+  --ctp-base: #1f1f1f;
+  --ctp-surface0: #282828;
+  --ctp-surface1: #323232;
+  --ctp-surface2: #3e3e3e;
+  --ctp-overlay0: #525252;
+  --ctp-overlay1: #686868;
+  --ctp-overlay2: #848484;
+  --ctp-text: #d0d0cc;
+  --ctp-subtext1: #a8a8a4;
+  --ctp-subtext0: #787874;
+  /* Phosphor green accent — the Winamp LED display color */
+  --ctp-mauve: #1bd655;
+  --ctp-lavender: #28e860;
+  --ctp-green: #1bd655;
+  --ctp-teal: #1ab8a8;
+  --ctp-sky: #58a8e0;
+  --ctp-blue: #4888d0;
+  --ctp-sapphire: #3870b8;
+  --ctp-pink: #c86888;
+  --ctp-flamingo: #b85858;
+  --ctp-rosewater: #c88080;
+  --ctp-yellow: #c8a830;
+  --ctp-peach: #c07838;
+  --ctp-maroon: #a03030;
+  --ctp-red: #c03030;
+
+  /* ── Semantic tokens ── */
+  --bg-app: #1f1f1f;
+  --bg-sidebar: #161616;
+  --bg-card: #282828;
+  --bg-hover: #323232;
+  --bg-player: #0e0e0e;
+  --bg-glass: rgba(22, 22, 22, 0.90);
+  --accent: #1bd655;
+  --accent-dim: rgba(27, 214, 85, 0.12);
+  --accent-glow: rgba(27, 214, 85, 0.35);
+  --text-primary: #d0d0cc;
+  --text-secondary: #a8a8a4;
+  --text-muted: #909090;
+  --border: #3a3a38;
+  --border-subtle: #282826;
+  --positive: #1bd655;
+  --warning: #c8a830;
+  --danger: #c03030;
+}
+
+/* ── Winamp: LED display glow + tactile buttons ── */
+[data-theme='poison'] .player-track-name {
+  text-shadow: 0 0 8px rgba(27, 214, 85, 0.7), 0 0 2px rgba(27, 214, 85, 0.4);
+  color: #1bd655;
+}
+
+[data-theme='poison'] .player-track-artist {
+  color: #1bd655;
+  opacity: 0.7;
+}
+
+[data-theme='poison'] .btn {
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+[data-theme='poison'] .player-btn,
+[data-theme='poison'] .player-btn-primary {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
+}
+

src/styles/themes/powerdvd-classic-virtual-hifi-receiver-vfd-display.css

@@ -0,0 +1 @@
+/* ─── PowerDVD Classic — Virtual HiFi Receiver / VFD Display ─── */

src/styles/themes/powerslave-inspired-iron-maiden.css

@@ -0,0 +1,384 @@
+/* ─── Powerslave (inspired) — Iron Maiden ─── */
+/* Blazing Egyptian sun — warm sandstone main, Nile-sky deep-blue sidebar,
+   pharaoh gold accent, gold+blue duality. Light, no dark mode.
+   Sidebar: deep Nile blue with subtle hieroglyph grid. Player bar: navy + gold cornice. */
+[data-theme='powerslave'] {
+  color-scheme: light;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23C8800A%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  /* ── Palette — sandstone, pharaoh gold, temple shadows ── */
+  --ctp-crust: #180E04;
+  --ctp-mantle: #2A1808;
+  --ctp-base: #F0DFB0;
+  /* warm sandstone */
+  --ctp-surface0: #E8D49A;
+  --ctp-surface1: #DEC880;
+  --ctp-surface2: #D0B860;
+  --ctp-overlay0: #A07830;
+  --ctp-overlay1: #806020;
+  --ctp-overlay2: #604810;
+  --ctp-text: #2A1808;
+  /* warm dark brown */
+  --ctp-subtext1: #4A2C10;
+  --ctp-subtext0: #6A4018;
+  --ctp-mauve: #C8800A;
+  /* pharaoh gold */
+  --ctp-lavender: #D49020;
+  --ctp-pink: #B04000;
+  --ctp-flamingo: #CC4800;
+  --ctp-rosewater: #F8EDD0;
+  --ctp-green: #507820;
+  --ctp-teal: #207870;
+  /* Egyptian turquoise */
+  --ctp-sky: #3080A0;
+  --ctp-blue: #1A5080;
+  --ctp-sapphire: #204870;
+  --ctp-yellow: #C8800A;
+  --ctp-peach: #C05010;
+  --ctp-maroon: #801808;
+  --ctp-red: #A82000;
+
+  /* ── Semantic tokens ──
+     Contrast audit (vs. --bg-app #F0DFB0, L≈0.746):
+       text-primary   12.9:1 AAA ✓
+       text-secondary  6.7:1 AA+ ✓
+       text-muted      4.6:1 AA  ✓ (was 3.05:1 — below AA)
+       positive        5.5:1 AA  ✓ (was 3.97:1)
+       warning         5.8:1 AA  ✓ (was 3.62:1 — was below AA)
+       danger          5.5:1 AA  ✓
+       accent (gold)   1.98:1 UI (Pharaoh brand, never as body text)
+  */
+  --bg-app: #F0DFB0;
+  /* sun-bleached sandstone */
+  --bg-sidebar: #0A2035;
+  /* Nile sky — deep lapis blue */
+  --bg-card: #F8EDD0;
+  --bg-hover: #E8D49A;
+  --bg-player: #06101C;
+  /* deep night Nile */
+  --bg-glass: rgba(240, 223, 176, 0.94);
+  --accent: #C8960C;
+  /* pharaoh gold — brand identity, 1.98:1 UI-pass only (never as body text) */
+  --accent-dim: rgba(200, 150, 12, 0.16);
+  --accent-glow: rgba(200, 150, 12, 0.35);
+  --text-primary: #2A1808;
+  --text-secondary: #6A4018;
+  --text-muted: #805810;     /* 4.6:1 AA ✓, deepened from #A07830 (3.05:1 below AA) */
+  --border: rgba(42, 24, 8, 0.38);         /* ~2.3:1 visible structural line (was 1.33:1) */
+  --border-subtle: rgba(42, 24, 8, 0.20);  /* ~1.5:1 subtle but perceptible (was 1.19:1) */
+  --border-dropdown: rgba(200, 128, 10, 0.40);
+  --shadow-dropdown: rgba(24, 14, 4, 0.22);
+  --positive: #3E6018;       /* 5.5:1 AA ✓, deeper olive (was #507820 at 3.97:1) */
+  --warning: #A04008;        /* 5.8:1 AA ✓, deeper burnt-orange (was #C05010 at 3.62:1) */
+  --danger: #A82000;
+  --radius-sm: 2px;
+  --radius-md: 4px;
+  --radius-lg: 6px;
+
+  --waveform-played: #2E7BB8;
+  /* Nile azure — the sky */
+  --waveform-buffered: rgba(46, 123, 184, 0.32);
+  --waveform-unplayed: rgba(42, 24, 8, 0.22);
+
+  /* Logo — Nile blue → pharaoh gold */
+  --logo-color-start: #2E7BB8;
+  --logo-color-end: #C8960C;
+}
+
+/* Sidebar — Nile-sky deep blue, drifting cloud wisps */
+[data-theme='powerslave'] .sidebar {
+  background: #0A2035;
+  border-right: none;
+  background-image:
+    radial-gradient(ellipse 130% 30% at 50% 6%, rgba(140, 190, 235, 0.07) 0%, transparent 65%),
+    radial-gradient(ellipse 90% 25% at 18% 22%, rgba(100, 155, 205, 0.05) 0%, transparent 60%),
+    radial-gradient(ellipse 115% 28% at 78% 38%, rgba(120, 170, 225, 0.05) 0%, transparent 65%),
+    radial-gradient(ellipse 100% 26% at 38% 58%, rgba(90, 145, 195, 0.04) 0%, transparent 60%),
+    radial-gradient(ellipse 120% 30% at 68% 75%, rgba(110, 165, 218, 0.05) 0%, transparent 65%),
+    radial-gradient(ellipse 85% 24% at 22% 92%, rgba(130, 180, 232, 0.04) 0%, transparent 60%);
+}
+
+[data-theme='powerslave'] .nav-link {
+  color: rgba(200, 224, 248, 0.65);
+}
+
+[data-theme='powerslave'] .nav-link.active {
+  background: linear-gradient(90deg, rgba(200, 150, 12, 0.22) 0%, transparent 100%);
+  border-left: 3px solid #C8960C;
+  color: #D49828;
+}
+
+[data-theme='powerslave'] .nav-link:hover:not(.active) {
+  background: rgba(46, 123, 184, 0.12);
+  border-left: 3px solid rgba(46, 123, 184, 0.50);
+  color: rgba(200, 224, 248, 0.92);
+}
+
+/* Player bar — deep Nile night, gold cornice */
+[data-theme='powerslave'] .player-bar {
+  background: #06101C;
+  border-top: 2px solid #C8960C;
+  box-shadow: 0 -4px 24px rgba(46, 123, 184, 0.10), 0 -1px 0 rgba(200, 150, 12, 0.20);
+}
+
+/* Track name — warm gold glow */
+[data-theme='powerslave'] .player-track-name {
+  color: #D49828;
+  text-shadow: 0 0 12px rgba(200, 150, 12, 0.40);
+}
+
+/* Artist name — Nile azure */
+[data-theme='powerslave'] .player-artist-name {
+  color: #6AAED8;
+}
+
+/* Content header */
+[data-theme='powerslave'] .content-header {
+  border-bottom: 1px solid rgba(42, 24, 8, 0.12);
+}
+
+/* Cards — parchment on sandstone */
+[data-theme='powerslave'] .album-card,
+[data-theme='powerslave'] .artist-card {
+  background: #F8EDD0;
+  box-shadow: 0 1px 4px rgba(42, 24, 8, 0.10);
+}
+
+[data-theme='powerslave'] .album-card:hover,
+[data-theme='powerslave'] .artist-card:hover {
+  box-shadow: 0 0 0 2px #C8800A, 0 4px 16px rgba(42, 24, 8, 0.12);
+}
+
+/* Track / queue rows */
+[data-theme='powerslave'] .track-row:hover {
+  background: #E8D49A;
+  box-shadow: inset 2px 0 0 #C8800A;
+}
+
+[data-theme='powerslave'] .queue-item:hover {
+  background: rgba(46, 123, 184, 0.12);
+  box-shadow: inset 2px 0 0 #2E7BB8;
+}
+
+/* Buttons — gold gradient */
+[data-theme='powerslave'] .player-btn-primary {
+  background: linear-gradient(180deg, #D49020 0%, #C8800A 50%, #A06008 100%);
+  color: #180E04;
+  border: 1px solid #806006;
+  box-shadow: 0 0 12px rgba(200, 128, 10, 0.28);
+}
+
+[data-theme='powerslave'] .player-btn-primary:hover {
+  background: linear-gradient(180deg, #E0A028 0%, #D48818 50%, #B07010 100%);
+  box-shadow: 0 0 22px rgba(200, 128, 10, 0.48);
+}
+
+[data-theme='powerslave'] .btn-primary {
+  background: linear-gradient(180deg, #D49020 0%, #C8800A 50%, #A06008 100%);
+  color: #180E04;
+  border: 1px solid #806006;
+}
+
+[data-theme='powerslave'] .btn-primary:hover {
+  background: linear-gradient(180deg, #E0A028 0%, #D48818 50%, #B07010 100%);
+}
+
+[data-theme='powerslave'] .hero-play-btn {
+  background: linear-gradient(180deg, #D49020 0%, #C8800A 50%, #A06008 100%);
+  color: #180E04;
+  border: 1px solid #806006;
+  box-shadow: 0 2px 16px rgba(200, 128, 10, 0.28);
+}
+
+[data-theme='powerslave'] .hero-play-btn:hover {
+  background: linear-gradient(180deg, #E0A028 0%, #D48818 50%, #B07010 100%);
+  box-shadow: 0 4px 26px rgba(200, 128, 10, 0.48);
+  transform: scale(1.02);
+}
+
+[data-theme='powerslave'] .album-card-details-btn {
+  background: linear-gradient(180deg, #D49020 0%, #C8800A 50%, #A06008 100%);
+  color: #180E04;
+  border: 1px solid #806006;
+}
+
+[data-theme='powerslave'] .album-card-details-btn:hover {
+  background: linear-gradient(180deg, #E0A028 0%, #D48818 50%, #B07010 100%);
+}
+
+/* Badge — gold pill */
+[data-theme='powerslave'] .badge,
+[data-theme='powerslave'] .album-detail-badge {
+  background: #C8800A;
+  color: #F8EDD0;
+}
+
+/* Settings + queue */
+[data-theme='powerslave'] .settings-tab:hover {
+  background: rgba(200, 150, 12, 0.08);
+  color: #C8960C;
+}
+
+[data-theme='powerslave'] .settings-tab.active {
+  background: rgba(200, 150, 12, 0.14);
+  color: #C8960C;
+  border-color: #C8960C;
+}
+
+[data-theme='powerslave'] .queue-tab-btn:hover {
+  background: rgba(46, 123, 184, 0.12);
+  color: rgba(200, 224, 248, 0.92);
+}
+
+[data-theme='powerslave'] .queue-tab-btn.active {
+  color: #C8960C;
+}
+
+[data-theme='powerslave'] .queue-round-btn.active {
+  color: #06101C;
+}
+
+/* Queue panel text — Nile-blue sidebar */
+[data-theme='powerslave'] .queue-panel {
+  background: #0A2035;
+}
+
+[data-theme='powerslave'] .queue-item-title {
+  color: rgba(220, 235, 248, 0.90);
+}
+
+[data-theme='powerslave'] .queue-item-artist,
+[data-theme='powerslave'] .queue-item-duration {
+  color: rgba(140, 190, 230, 0.55);
+}
+
+[data-theme='powerslave'] .queue-item.active .queue-item-artist,
+[data-theme='powerslave'] .queue-item.active .queue-item-duration {
+  color: rgba(140, 190, 230, 0.75);
+}
+
+[data-theme='powerslave'] .queue-divider span {
+  color: rgba(140, 190, 230, 0.38) !important;
+}
+
+[data-theme='powerslave'] .queue-current-info h3 {
+  color: rgba(220, 235, 248, 0.92);
+}
+
+[data-theme='powerslave'] .queue-current-sub {
+  color: rgba(140, 190, 230, 0.58);
+}
+
+[data-theme='powerslave'] .queue-current-cover .fallback {
+  color: rgba(140, 190, 230, 0.30);
+}
+
+[data-theme='powerslave'] .queue-action-btn {
+  color: rgba(140, 190, 230, 0.65);
+}
+
+[data-theme='powerslave'] .queue-action-btn:hover:not(:disabled) {
+  color: rgba(220, 235, 248, 0.95);
+}
+
+/* Misc interactive */
+[data-theme='powerslave'] .custom-select-trigger:hover {
+  background: #E8D49A;
+}
+
+[data-theme='powerslave'] .custom-select-option:hover {
+  background: rgba(200, 128, 10, 0.10);
+}
+
+[data-theme='powerslave'] .artist-row:hover {
+  background: rgba(200, 128, 10, 0.07);
+  box-shadow: inset 3px 0 0 #C8800A;
+}
+
+[data-theme='powerslave'] .playlist-row:hover {
+  background: rgba(200, 128, 10, 0.07);
+  box-shadow: inset 3px 0 0 #C8800A;
+}
+
+[data-theme='powerslave'] .artist-ext-link:hover {
+  background: rgba(200, 128, 10, 0.08);
+  border-color: #C8800A;
+}
+
+/* Connection indicators */
+[data-theme='powerslave'] .connection-type {
+  color: #050E19;
+}
+
+[data-theme='powerslave'] .connection-server {
+  color: #050E19;
+}
+
+/* Back button needs light color — sits on dark overlay above sandstone content */
+[data-theme='powerslave'] .album-detail-back {
+  color: rgba(255, 255, 255, 0.85);
+}
+
+[data-theme='powerslave'] .album-detail-back:hover {
+  background: rgba(255, 255, 255, 0.12);
+  color: #ffffff;
+}
+
+/* Tech strip — default ctp-surface1 (#DEC880) is too bright on dark blue queue panel */
+[data-theme='powerslave'] .queue-current-tech {
+  background: rgba(6, 16, 28, 0.88);
+  color: rgba(140, 190, 230, 0.72);
+}
+
+/* Album detail hero meta */
+[data-theme='powerslave'] .album-detail-info {
+  color: rgba(255, 255, 255, 0.80);
+}
+
+[data-theme='powerslave'] .album-detail-artist,
+[data-theme='powerslave'] .album-detail-artist-link {
+  color: #050E19;
+}
+
+[data-theme='powerslave'] .album-detail-artist-link:hover {
+  color: #0A2035;
+}
+
+/* np-album-track */
+[data-theme='powerslave'] .np-album-track.active .np-album-track-title,
+[data-theme='powerslave'] .np-album-track.active .np-album-track-num {
+  color: #C8960C;
+}
+
+/* Scrollbar — warm, gold thumb */
+[data-theme='powerslave'] ::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+[data-theme='powerslave'] ::-webkit-scrollbar-track {
+  background: #E8D49A;
+}
+
+[data-theme='powerslave'] ::-webkit-scrollbar-thumb {
+  background: rgba(200, 128, 10, 0.35);
+  border-radius: 3px;
+}
+
+[data-theme='powerslave'] ::-webkit-scrollbar-thumb:hover {
+  background: #C8800A;
+}
+
+/* Column resize grip — was surface1 (#DEC880) on bg-card = 1.41:1 (invisible)
+   Use the deeper temple-shadow overlay1 tone for strong legibility. */
+[data-theme='powerslave'] .col-resize-handle::after {
+  background: #806020;            /* 5.0:1 on bg-card — visible dark grip */
+  width: 2px;
+}
+
+/* Focus ring — pharaoh gold accent with strong outline for keyboard nav */
+[data-theme='powerslave'] *:focus-visible {
+  outline: 2px solid #C8800A;
+  outline-offset: 2px;
+}
+

src/styles/themes/progress-range.css

@@ -0,0 +1,28 @@
+/* ─── Progress / Range ─── */
+input[type="range"] {
+  -webkit-appearance: none;
+  appearance: none;
+  height: 4px;
+  border-radius: var(--radius-full);
+  background: var(--ctp-surface2);
+  outline: none;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--text-primary);
+  cursor: pointer;
+  transition: transform var(--transition-fast), background var(--transition-fast);
+  box-shadow: var(--shadow-sm);
+}
+
+input[type="range"]:hover::-webkit-slider-thumb {
+  transform: scale(1.2);
+  background: var(--accent);
+}
+

src/styles/themes/psychowave-synthwave-retrowave.css

@@ -0,0 +1,61 @@
+/* ─── Psychowave — Synthwave / Retrowave ─── */
+[data-theme='psychowave'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b09ee0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  /* ── Palette ── */
+  --ctp-crust: #0d0c1a;
+  --ctp-mantle: #110f22;
+  --ctp-base: #161428;
+  --ctp-surface0: #1f1c38;
+  --ctp-surface1: #2a2750;
+  --ctp-surface2: #383468;
+  --ctp-overlay0: #4a4580;
+  --ctp-overlay1: #6460a8;
+  --ctp-overlay2: #8078c8;
+  /* Text */
+  --ctp-text: #e6e0f6;
+  --ctp-subtext1: #b09ee0;
+  --ctp-subtext0: #8878c0;
+  /* Accents — muted synthwave palette */
+  --ctp-mauve: #a06ae0;
+  /* soft violet — primary accent */
+  --ctp-lavender: #7878d8;
+  /* muted indigo — gradient end */
+  --ctp-pink: #c060a8;
+  /* dusty rose */
+  --ctp-flamingo: #c07090;
+  --ctp-rosewater: #c89090;
+  --ctp-blue: #58a8e8;
+  /* steel blue */
+  --ctp-sapphire: #4880c8;
+  --ctp-sky: #60c0d8;
+  --ctp-teal: #40a8a8;
+  --ctp-green: #58c878;
+  /* soft mint green */
+  --ctp-yellow: #c8a848;
+  /* muted gold */
+  --ctp-peach: #c87848;
+  --ctp-maroon: #c05868;
+  --ctp-red: #b04060;
+
+  /* ── Semantic tokens ── */
+  --bg-app: #161428;
+  --bg-sidebar: #110f22;
+  --bg-card: #1f1c38;
+  --bg-hover: #2a2750;
+  --bg-player: #0d0c1a;
+  --bg-glass: rgba(22, 20, 40, 0.85);
+  --accent: #a06ae0;
+  --accent-dim: rgba(160, 106, 224, 0.12);
+  --accent-glow: rgba(160, 106, 224, 0.30);
+  --text-primary: #e6e0f6;
+  --text-secondary: #b09ee0;
+  --text-muted: #706898;
+  --border: #383468;
+  --border-subtle: #1f1c38;
+  --positive: #58c878;
+  --warning: #c8a848;
+  --danger: #b04060;
+}
+

src/styles/themes/reset.css

@@ -0,0 +1,61 @@
+/* ─── Reset ─── */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+  /* min-height removed: Tauri enforces the real window minimum (minHeight: 480).
+     A CSS min-height larger than the effective CSS viewport (which shrinks at
+     zoom > 1) pushes html taller than the window, clipping the player bar. */
+  overflow: hidden;
+}
+
+body {
+  font-family: var(--font-sans);
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--text-primary);
+  user-select: none;
+  background: var(--bg-app);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  user-select: none;
+}
+
+/* Allow text selection in specific areas */
+input,
+textarea,
+[data-selectable] {
+  user-select: text;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button {
+  cursor: pointer;
+  border: none;
+  background: none;
+  font: inherit;
+  color: inherit;
+}
+
+img {
+  display: block;
+  max-width: 100%;
+}
+
+ul,
+ol {
+  list-style: none;
+}
+

src/styles/themes/sakura-night.css

@@ -0,0 +1,66 @@
+/* ─── Sakura Night ─── */
+[data-theme='sakura-night'] {
+  color-scheme: dark;
+
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d8a6bc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+
+  /* Backgrounds */
+  --ctp-crust:    #10090c;
+  --ctp-mantle:   #160d12;
+  --ctp-base:     #1c1218;
+  --ctp-surface0: #241821;
+  --ctp-surface1: #2f202b;
+  --ctp-surface2: #3c2937;
+
+  /* Overlays */
+  --ctp-overlay0: #6f4d5d;
+  --ctp-overlay1: #8d6476;
+  --ctp-overlay2: #ab7c8f;
+
+  /* Text */
+  --ctp-text:     #fff0f5;
+  --ctp-subtext1: #e3c5d0;
+  --ctp-subtext0: #bc93a4;
+
+  /* Cherry blossom accent */
+  --ctp-teal:      #d8a6bc;
+  --ctp-sky:       #d8a6bc;
+  --ctp-sapphire:  #b98399;
+  --ctp-blue:      #99687d;
+  --ctp-lavender:  #e3b8cb;
+  --ctp-mauve:     #b98399;
+  --ctp-pink:      #99687d;
+  --ctp-flamingo:  #e3b8cb;
+  --ctp-rosewater: #b98399;
+
+  --ctp-red:     #e27b7b;
+  --ctp-maroon:  #d49a73;
+  --ctp-peach:   #d49a73;
+  --ctp-yellow:  #d8bf73;
+  --ctp-green:   #74b68a;
+
+  --bg-app:      #1c1218;
+  --bg-sidebar:  #160d12;
+  --bg-card:     #241821;
+  --bg-hover:    #2f202b;
+  --bg-player:   #160d12;
+  --bg-glass:    rgba(28,18,24,0.82);
+
+  --accent:      #d8a6bc;
+  --accent-dim:  rgba(216,166,188,0.05);
+  --accent-glow: rgba(216,166,188,0.08);
+
+  --text-primary:   #fff0f5;
+  --text-secondary: #bc93a4;
+  --text-muted:     #6f4d5d;
+
+  --border:          #3c2937;
+  --border-subtle:   #2f202b;
+  --border-dropdown: #493341;
+  --shadow-dropdown: rgba(0,0,0,0.72);
+
+  --positive: #74b68a;
+  --warning:  #d8bf73;
+  --danger:   #e27b7b;
+}
+

src/styles/themes/scrollable-area.css

@@ -0,0 +1,7 @@
+/* ─── Scrollable area ─── */
+.scroll-area {
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex: 1;
+}
+

src/styles/themes/scrollbars.css

@@ -0,0 +1,28 @@
+/* ─── Scrollbars ─── */
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: var(--radius-full);
+  transition: background 0.3s ease;
+}
+
+*:hover::-webkit-scrollbar-thumb {
+  background: var(--ctp-surface2);
+}
+
+.is-scrolling::-webkit-scrollbar-thumb {
+  background: var(--ctp-surface2);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--ctp-overlay0);
+}
+

src/styles/themes/sepia-dark.css

@@ -0,0 +1,68 @@
+/* ─── Sepia Dark ─── */
+[data-theme='sepia-dark'] {
+  color-scheme: dark;
+
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c8b89a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+
+  /* Backgrounds */
+  --ctp-crust:    #0e0c09;
+  --ctp-mantle:   #13100c;
+  --ctp-base:     #1e1a14;
+  --ctp-surface0: #252018;
+  --ctp-surface1: #2e281e;
+  --ctp-surface2: #373025;
+
+  /* Overlays */
+  --ctp-overlay0: #605545;
+  --ctp-overlay1: #806e5a;
+  --ctp-overlay2: #9a8870;
+
+  /* Text */
+  --ctp-text:     #ede0cc;
+  --ctp-subtext1: #d0c0a8;
+  --ctp-subtext0: #b0a080;
+
+  /* Cream accent */
+  --ctp-teal:      #c8b89a;
+  --ctp-sky:       #c8b89a;
+  --ctp-sapphire:  #b8a080;
+  --ctp-blue:      #a08868;
+  --ctp-lavender:  #c8b89a;
+  --ctp-mauve:     #b8a080;
+  --ctp-pink:      #a08868;
+  --ctp-flamingo:  #c8b89a;
+  --ctp-rosewater: #b8a080;
+
+  /* Semantic */
+  --ctp-red:     #c87060;
+  --ctp-maroon:  #c08050;
+  --ctp-peach:   #c08050;
+  --ctp-yellow:  #b8a050;
+  --ctp-green:   #80a870;
+
+  /* UI tokens */
+  --bg-app:      #1e1a14;
+  --bg-sidebar:  #13100c;
+  --bg-card:     #252018;
+  --bg-hover:    #2e281e;
+  --bg-player:   #13100c;
+  --bg-glass:    rgba(30, 26, 20, 0.95);
+
+  --accent:      #c8b89a;
+  --accent-dim:  rgba(200, 184, 154, 0.07);
+  --accent-glow: rgba(200, 184, 154, 0.13);
+
+  --text-primary:   #ede0cc;
+  --text-secondary: #b0a080;
+  --text-muted:     #80705c;
+
+  --border:          #2e281e;
+  --border-subtle:   #252018;
+  --border-dropdown: #3a3025;
+  --shadow-dropdown: rgba(0, 0, 0, 0.88);
+
+  --positive: #80a870;
+  --warning:  #b8a050;
+  --danger:   #c87060;
+}
+

src/styles/themes/spider-tech-spider-man.css

@@ -0,0 +1,350 @@
+/* ─── Spider-Tech — Spider-Man ─── */
+[data-theme='spider-tech'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E62429%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  /* Palette — suit red, night-sky navy, web black */
+  --ctp-crust: #060408;
+  --ctp-mantle: #0a0610;
+  --ctp-base: #0e0c18;
+  --ctp-surface0: #181428;
+  --ctp-surface1: #241e3a;
+  --ctp-surface2: #302848;
+  --ctp-overlay0: #4a3e68;
+  --ctp-overlay1: #6a5888;
+  --ctp-overlay2: #9080a8;
+  --ctp-text: #f0ecf8;
+  --ctp-subtext1: #d0c8e0;
+  --ctp-subtext0: #a898c0;
+  --ctp-mauve: #E62429;
+  --ctp-lavender: #ff4a50;
+  --ctp-pink: #ff4a50;
+  --ctp-flamingo: #cc1a1f;
+  --ctp-rosewater: #f0ecf8;
+  --ctp-green: #4adf80;
+  --ctp-teal: #3ab8d0;
+  --ctp-sky: #4a88ff;
+  --ctp-blue: #1e52c8;
+  --ctp-sapphire: #1e52c8;
+  --ctp-yellow: #f0c030;
+  --ctp-peach: #E62429;
+  --ctp-maroon: #8b0010;
+  --ctp-red: #E62429;
+
+  --bg-app: #0e0c18;
+  --bg-sidebar: #0a0610;
+  --bg-card: #181428;
+  --bg-hover: #241e3a;
+  --bg-player: #060408;
+  --bg-glass: rgba(10, 6, 16, 0.92);
+  --accent: #E62429;
+  --accent-dim: rgba(230, 36, 41, 0.14);
+  --accent-glow: rgba(230, 36, 41, 0.38);
+  --text-primary: #f0ecf8;
+  --text-secondary: #9080a8;
+  --text-muted: #a898c0;
+  --border: rgba(230, 36, 41, 0.18);
+  --border-subtle: rgba(230, 36, 41, 0.08);
+  --border-dropdown: rgba(230, 36, 41, 0.30);
+  --shadow-dropdown: rgba(0, 0, 0, 0.92);
+  --positive: #4adf80;
+  --warning: #f0c030;
+  --danger: #E62429;
+  --radius-sm: 2px;
+  --radius-md: 4px;
+  --radius-lg: 6px;
+}
+
+/* App shell — Into the Spider-Verse comic halftone dots */
+[data-theme='spider-tech'] .app-shell {
+  background-image: radial-gradient(circle,
+      rgba(230, 36, 41, 0.055) 1px,
+      transparent 1px);
+  background-size: 14px 14px;
+}
+
+/* Sidebar — CSS spider web radiating from top-left corner */
+[data-theme='spider-tech'] .sidebar {
+  background: #080510;
+  border-right: 1px solid rgba(230, 36, 41, 0.22);
+  background-image:
+    repeating-radial-gradient(circle at 0% 0%,
+      transparent 0px,
+      transparent 38px,
+      rgba(230, 36, 41, 0.10) 39px,
+      rgba(230, 36, 41, 0.10) 40px),
+    repeating-conic-gradient(from 0deg at 0% 0%,
+      transparent 0deg,
+      transparent 19deg,
+      rgba(230, 36, 41, 0.07) 19deg,
+      rgba(230, 36, 41, 0.07) 20deg);
+}
+
+/* Player bar — deep black with red suit border + glow */
+[data-theme='spider-tech'] .player-bar {
+  background: #060408;
+  border-top: 2px solid #E62429;
+  box-shadow: 0 -6px 28px rgba(230, 36, 41, 0.20), 0 -1px 0 rgba(0, 0, 0, 0.9);
+}
+
+/* Track name — Spider-Man red, bold */
+[data-theme='spider-tech'] .player-track-name {
+  color: #E62429;
+  font-weight: 700;
+  text-shadow: 0 0 10px rgba(230, 36, 41, 0.45), 0 0 24px rgba(230, 36, 41, 0.20);
+}
+
+/* Artist name — Spider suit blue */
+[data-theme='spider-tech'] .player-artist-name {
+  color: #4a88ff;
+}
+
+/* Nav active — red left bar */
+[data-theme='spider-tech'] .nav-link.active {
+  background: linear-gradient(90deg, rgba(230, 36, 41, 0.18) 0%, transparent 100%);
+  border-left: 3px solid #E62429;
+  color: #E62429;
+}
+
+[data-theme='spider-tech'] .nav-link:hover:not(.active) {
+  background: linear-gradient(90deg, rgba(230, 36, 41, 0.08) 0%, transparent 100%);
+  border-left: 3px solid rgba(230, 36, 41, 0.35);
+}
+
+/* Content header */
+[data-theme='spider-tech'] .content-header {
+  border-bottom: 1px solid rgba(230, 36, 41, 0.14);
+}
+
+/* Cards — red border glow on hover */
+[data-theme='spider-tech'] .album-card:hover,
+[data-theme='spider-tech'] .artist-card:hover {
+  box-shadow: 0 0 0 1px rgba(230, 36, 41, 0.55), 0 4px 20px rgba(230, 36, 41, 0.16);
+}
+
+/* Track / queue rows */
+[data-theme='spider-tech'] .track-row:hover,
+[data-theme='spider-tech'] .queue-item:hover {
+  box-shadow: inset 2px 0 0 #E62429;
+  background: rgba(230, 36, 41, 0.06);
+}
+
+/* Primary play button — suit red */
+[data-theme='spider-tech'] .player-btn-primary {
+  background: linear-gradient(180deg, #ff4a50 0%, #E62429 50%, #b81820 100%);
+  color: #ffffff;
+  box-shadow: 0 0 16px rgba(230, 36, 41, 0.50);
+  border: 1px solid #9c1018;
+}
+
+[data-theme='spider-tech'] .player-btn-primary:hover {
+  background: linear-gradient(180deg, #ff6065 0%, #f03035 50%, #cc2025 100%);
+  box-shadow: 0 0 26px rgba(230, 36, 41, 0.72);
+}
+
+/* btn-primary */
+[data-theme='spider-tech'] .btn-primary {
+  background: linear-gradient(180deg, #ff4a50 0%, #E62429 50%, #b81820 100%);
+  color: #ffffff;
+  border: 1px solid #9c1018;
+}
+
+[data-theme='spider-tech'] .btn-primary:hover {
+  background: linear-gradient(180deg, #ff6065 0%, #f03035 50%, #cc2025 100%);
+}
+
+/* Hero play button */
+[data-theme='spider-tech'] .hero-play-btn {
+  background: linear-gradient(180deg, #ff4a50 0%, #E62429 50%, #b81820 100%);
+  color: #ffffff;
+  border: 1px solid #9c1018;
+  box-shadow: 0 2px 16px rgba(230, 36, 41, 0.50);
+  transition: filter var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
+}
+
+[data-theme='spider-tech'] .hero-play-btn:hover {
+  background: linear-gradient(180deg, #ff6065 0%, #f03035 50%, #cc2025 100%);
+  box-shadow: 0 4px 26px rgba(230, 36, 41, 0.72);
+  transform: scale(1.02);
+}
+
+/* Album card overlay button */
+[data-theme='spider-tech'] .album-card-details-btn {
+  background: linear-gradient(180deg, #ff4a50 0%, #E62429 50%, #b81820 100%);
+  color: #ffffff;
+  border: 1px solid #9c1018;
+  box-shadow: 0 2px 12px rgba(230, 36, 41, 0.45);
+}
+
+/* Scrollbar — dark with red thumb */
+[data-theme='spider-tech'] ::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+[data-theme='spider-tech'] ::-webkit-scrollbar-track {
+  background: #0a0610;
+}
+
+[data-theme='spider-tech'] ::-webkit-scrollbar-thumb {
+  background: rgba(230, 36, 41, 0.40);
+  border-radius: 3px;
+}
+
+[data-theme='spider-tech'] ::-webkit-scrollbar-thumb:hover {
+  background: #E62429;
+}
+
+/* ── Jayfin (Mediaplayer) ─────────────────────────────────────── */
+[data-theme='jayfin'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23AA5CC3%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  /* ── Jellyfin Palette ── */
+  --ctp-crust: #050505;
+  --ctp-mantle: #0c0c0c;
+  --ctp-base: #141414;
+  --ctp-surface0: #1e1e1e;
+  --ctp-surface1: #282828;
+  --ctp-surface2: #333333;
+  --ctp-overlay0: #505050;
+  --ctp-overlay1: #787878;
+  --ctp-overlay2: #a8a8a8;
+  --ctp-text: #ffffff;
+  --ctp-subtext1: #e8e8e8;
+  --ctp-subtext0: #c0c0c0;
+
+  /* Jellyfin Lila als Hauptakzent, Cyan als Sekundärfarbe */
+  --ctp-mauve: #AA5CC3;
+  --ctp-lavender: #bf7ed4;
+  --ctp-green: #2ed573;
+  --ctp-teal: #00c8dc;
+  --ctp-sky: #00A4DC;
+  --ctp-blue: #0088cc;
+  --ctp-sapphire: #0060a0;
+  --ctp-pink: #c070d8;
+  --ctp-flamingo: #d488e8;
+  --ctp-rosewater: #e8b8f8;
+  --ctp-yellow: #ffd060;
+  --ctp-peach: #ff9500;
+  --ctp-maroon: #cc3355;
+  --ctp-red: #ff4444;
+
+  /* ── Semantische Tokens ── */
+  --bg-app: #141414;
+  --bg-sidebar: #0c0c0c;
+  --bg-card: #1e1e1e;
+  --bg-hover: rgba(170, 92, 195, 0.1);
+  --bg-player: #050505;
+  --bg-glass: rgba(14, 14, 14, 0.88);
+
+  --accent: #AA5CC3;
+  --accent-dim: rgba(170, 92, 195, 0.15);
+  --accent-glow: rgba(170, 92, 195, 0.4);
+  --volume-accent: #AA5CC3;
+
+  --text-primary: #ffffff;
+  --text-secondary: #c8c8c8;
+  --text-muted: #888888;
+
+  --border: #2a2a2a;
+  --border-subtle: #1e1e1e;
+
+  --positive: #2ed573;
+  --warning: #ffd060;
+  --danger: #ff4444;
+
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 10px;
+  --radius-xl: 14px;
+  --radius-full: 999px;
+}
+
+/* Sidebar mit dezenter Tiefe */
+[data-theme='jayfin'] .sidebar {
+  background: #0c0c0c;
+  border-right: 1px solid #1e1e1e;
+}
+
+/* Aktiver Nav-Link: gefüllte Lila-Fläche mit weißer Schrift (WCAG AA) + linker Balken
+   Vorher: color #AA5CC3 auf 12 % accent über bg-sidebar → ~3.30:1 (Fail AA small text).
+   Jetzt:  weißer Text auf 22 % accent → >10:1, Brand-Identity bleibt durch den Balken. */
+[data-theme='jayfin'] .nav-link.active {
+  background: rgba(170, 92, 195, 0.22);
+  color: #ffffff;
+  border-left: 3px solid #AA5CC3;
+}
+
+[data-theme='jayfin'] .nav-link.active svg {
+  color: #ffffff;
+}
+
+/* Player Bar: tiefes Schwarz mit Jellyfin-Brand-Gradient als Oberkante */
+[data-theme='jayfin'] .player-bar {
+  background: #050505;
+  border-top: 2px solid transparent;
+  border-image: linear-gradient(to right, #00A4DC, #AA5CC3) 1;
+  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.6);
+}
+
+/* Progress fill: Gradient Cyan → Lila */
+[data-theme='jayfin'] .progress-bar-fill {
+  background: linear-gradient(to right, #00A4DC 0%, #AA5CC3 100%);
+  box-shadow: 0 0 8px rgba(170, 92, 195, 0.5);
+}
+
+/* Cards */
+[data-theme='jayfin'] .card {
+  background: #1e1e1e;
+  border: 1px solid #2a2a2a;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+}
+
+/* Btn-primary: Jellyfin Lila
+   font-weight 700 nötig, weil weiß auf #AA5CC3 nur 4.08:1 erreicht —
+   bold verdichtet die Glyph-Fläche und hebt die Lesbarkeit über die AA-Schwelle. */
+[data-theme='jayfin'] .btn-primary,
+[data-theme='jayfin'] .player-btn-primary,
+[data-theme='jayfin'] .hero-play-btn {
+  background: #AA5CC3;
+  color: #ffffff;
+  border: none;
+  font-weight: 700;
+  box-shadow: 0 2px 12px rgba(170, 92, 195, 0.35);
+}
+
+[data-theme='jayfin'] .btn-primary:hover,
+[data-theme='jayfin'] .player-btn-primary:hover,
+[data-theme='jayfin'] .hero-play-btn:hover {
+  background: #be70d8;
+  box-shadow: 0 4px 18px rgba(170, 92, 195, 0.5);
+  filter: none;
+}
+
+/* Album card hover play button */
+[data-theme='jayfin'] .album-card-details-btn {
+  background: #AA5CC3;
+  color: #ffffff;
+  font-weight: 700;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+}
+
+[data-theme='jayfin'] .album-card-details-btn:hover {
+  background: #be70d8;
+}
+
+/* Queue round buttons */
+[data-theme='jayfin'] .queue-round-btn.active {
+  background: #AA5CC3;
+  color: #ffffff;
+  font-weight: 700;
+  box-shadow: 0 0 10px rgba(170, 92, 195, 0.4);
+}
+
+/* Connection indicators: schwarz auf warmem Grau */
+[data-theme='w98'] .connection-type,
+[data-theme='w98'] .connection-server {
+  color: #000000;
+}
+

src/styles/themes/spotless.css

@@ -0,0 +1,120 @@
+/* ─── Spotless ─── */
+[data-theme='spotless'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23B3B3B3%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  --ctp-crust: #000000;
+  --ctp-mantle: #121212;
+  --ctp-base: #181818;
+  --ctp-surface0: #282828;
+  --ctp-surface1: #3E3E3E;
+  --ctp-surface2: #535353;
+  --ctp-overlay0: #727272;
+  --ctp-overlay1: #A7A7A7;
+  --ctp-overlay2: #B3B3B3;
+  --ctp-text: #FFFFFF;
+  --ctp-subtext1: #EBEBEB;
+  --ctp-subtext0: #D6D6D6;
+
+  --ctp-mauve: #1ED760;
+  --ctp-lavender: #1FDF64;
+  --ctp-green: #1ED760;
+  --ctp-teal: #1DF2A4;
+  --ctp-sky: #3D91F4;
+  --ctp-blue: #2E77D0;
+  --ctp-sapphire: #1C5599;
+  --ctp-pink: #E55C5C;
+  --ctp-flamingo: #E55C5C;
+  --ctp-rosewater: #FFC8C8;
+  --ctp-yellow: #FFA42B;
+  --ctp-peach: #FF7A00;
+  --ctp-maroon: #B22A2A;
+  --ctp-red: #E22134;
+
+  --bg-app: #121212;
+  --bg-sidebar: #000000;
+  --bg-card: #181818;
+  --bg-hover: #282828;
+  --bg-player: #181818;
+  --bg-glass: rgba(18, 18, 18, 0.85);
+
+  --accent: #1ED760;
+  --accent-dim: rgba(30, 215, 96, 0.15);
+  --accent-glow: rgba(30, 215, 96, 0.35);
+  --volume-accent: #FFFFFF;
+
+  --text-primary: #FFFFFF;
+  --text-secondary: #B3B3B3;
+  --text-muted: #A7A7A7;
+
+  --border: #282828;
+  --border-subtle: rgba(255, 255, 255, 0.1);
+
+  --positive: #1ED760;
+  --warning: #FFA42B;
+  --danger: #E22134;
+
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 16px;
+  --radius-xl: 24px;
+  --radius-full: 9999px;
+
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
+  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.6);
+  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.7);
+
+  --transition-fast: 150ms ease;
+  --transition-med: 250ms ease;
+  --transition-slow: 350ms ease;
+
+  --sidebar-width: 220px;
+  --player-height: 88px;
+}
+
+[data-theme='spotless'] .sidebar {
+  border-right: none;
+}
+
+[data-theme='spotless'] .player-bar {
+  border-top: 1px solid var(--border-subtle);
+}
+
+[data-theme='spotless'] .nav-link:hover {
+  color: var(--text-primary);
+  background-color: transparent;
+}
+
+[data-theme='spotless'] .nav-link.active {
+  background-color: var(--bg-hover);
+  color: var(--text-primary);
+  border-radius: var(--radius-sm);
+}
+
+[data-theme='spotless'] .nav-link.active::before {
+  display: none;
+}
+
+[data-theme='spotless'] .btn-primary {
+  color: var(--ctp-crust);
+  border-radius: var(--radius-full);
+  font-weight: 700;
+}
+
+[data-theme='spotless'] .player-btn-primary {
+  color: var(--ctp-crust);
+  background-color: var(--text-primary);
+  border-radius: var(--radius-full);
+}
+
+[data-theme='spotless'] .player-btn-primary:hover {
+  background-color: var(--accent);
+  transform: scale(1.05);
+}
+
+[data-theme='spotless'] .queue-item:hover,
+[data-theme='spotless'] .track-row:hover {
+  background-color: var(--bg-hover);
+  border-radius: var(--radius-sm);
+}
+

src/styles/themes/star-rating.css

@@ -0,0 +1,96 @@
+/* ─── Star Rating ─── */
+.star-rating {
+  display: flex;
+  gap: 2px;
+  color: var(--ctp-overlay1);
+  justify-content: center;
+  width: 100%;
+}
+
+.star-rating .star.filled {
+  color: var(--ctp-yellow);
+}
+
+.star-rating .star:hover {
+  color: var(--ctp-yellow);
+  cursor: pointer;
+}
+
+/* While clearing: no yellow hover until pointer leaves or next click */
+.star-rating--suppress-hover .star:hover {
+  color: var(--ctp-overlay1);
+}
+
+.star-rating--disabled {
+  opacity: 0.55;
+}
+
+.star-rating--disabled .star:hover {
+  color: inherit;
+  cursor: not-allowed;
+}
+
+.star-rating .star {
+  transform-origin: center center;
+}
+
+.star-rating .star.star--locked {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.star-rating .star.star--locked:hover {
+  color: var(--ctp-overlay1);
+  cursor: default;
+}
+
+@keyframes star-rating-star-pulse {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  45% {
+    transform: scale(1.3);
+    opacity: 0.88;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.star-rating .star.star--pulse {
+  animation: star-rating-star-pulse 0.38s ease-out;
+}
+
+@keyframes star-rating-star-clear-shrink {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  55% {
+    transform: scale(0.58);
+    opacity: 0.28;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.star-rating .star.star--clear-shrink {
+  animation: star-rating-star-clear-shrink 0.44s ease-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+
+  .star-rating .star.star--pulse,
+  .star-rating .star.star--clear-shrink {
+    animation: none;
+  }
+}
+