/* ─────────────────────────────────────────────────────────────
   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';

/* ─── 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);
}

/* ─── 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);
}

/* ─── 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);
}

/* ─── 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);
}

/* ─── 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;
}

/* ─── 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;
}

/* ─── 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;
}

/* ─── 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;
}

/* ─── 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);
}

/* ─── 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%23c8c8d0%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: #000000;
  --ctp-mantle: #1e1e28;
  --ctp-base: #2b2b3a;
  --ctp-surface0: #353545;
  --ctp-surface1: #404055;
  --ctp-surface2: #4e4e65;
  --ctp-overlay0: #5a5a75;
  --ctp-overlay1: #6e6e88;
  --ctp-overlay2: #8a8a96;
  --ctp-text: #c8c8d0;
  --ctp-subtext1: #a0a0ac;
  --ctp-subtext0: #8a8a96;
  /* Winamp orange accent + iconic green glow */
  --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: #a03030;
  --ctp-red: #c03030;

  /* ── Semantic tokens ── */
  --bg-app: #2b2b3a;
  --bg-sidebar: #1e1e28;
  --bg-card: #353545;
  --bg-hover: #404055;
  --bg-player: #000000;
  --bg-glass: rgba(43, 43, 58, 0.90);
  --accent: #d4cc46;
  --accent-dim: rgba(212, 204, 70, 0.15);
  --accent-glow: rgba(212, 204, 70, 0.35);
  --volume-accent: #de9b35;
  --text-primary: #c8c8d0;
  --text-secondary: #a0a0ac;
  --text-muted: #a0a0bc;
  --border: #5a5a75;
  --border-subtle: #353545;
  --positive: #00cc66;
  --warning: #d4cc46;
  --danger: #c03030;
}

/* ── Classic Winamp: LCD display + bevel buttons ── */
[data-theme='wnamp'] .connection-type {
  color: var(--text-primary);
}

[data-theme='wnamp'] .connection-server {
  color: var(--text-secondary);
}

[data-theme='wnamp'] .player-track-name {
  color: #00ff00;
  text-shadow: 0 0 6px rgba(0, 255, 0, 0.65), 0 0 2px rgba(0, 255, 0, 0.4);
  font-family: 'Courier New', 'Lucida Console', monospace;
  letter-spacing: 0.04em;
}

[data-theme='wnamp'] .player-track-artist {
  color: #00cc00;
  font-family: 'Courier New', 'Lucida Console', monospace;
  opacity: 0.85;
}

[data-theme='wnamp'] .btn {
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.18), inset -1px -1px 0 rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4);
}

[data-theme='wnamp'] .player-btn,
[data-theme='wnamp'] .player-btn-primary {
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.18), inset -1px -1px 0 rgba(0, 0, 0, 0.55), 0 2px 5px rgba(0, 0, 0, 0.5);
}

/* ─── 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: #8c7356;
  --border: #b89a69;
  --border-subtle: #dfc08f;
  --positive: #587838;
  --warning: #a88020;
  --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);
}

/* ─── 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;
}

/* ─── 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;
}

/* ─── 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;
}

/* ─── 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;
}

/* ─── 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;
}

/* ─── 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;
}

/* ─── 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;
}

/* ─── 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;
}

/* ─── 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;
}


/* ─── 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: #484848;
  --ctp-overlay1: #707070;
  --ctp-overlay2: #989898;
  --ctp-text: #e8e8e8;
  --ctp-subtext1: #c0c0c0;
  --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: #e8e8e8;
  --text-secondary: #ffd700;
  /* wanted-level gold — the key differentiator */
  --text-muted: #484848;
  --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;
}

/* ─── V-Tactical ─── */
[data-theme='v-tactical'] {
  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%23708599%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: #090c0e;
  --ctp-mantle: #0d1114;
  --ctp-base: #161c22;
  --ctp-surface0: #1f2830;
  --ctp-surface1: #2a3640;
  --ctp-surface2: #3a4a58;
  --ctp-overlay0: #526371;
  --ctp-overlay1: #708599;
  --ctp-overlay2: #8da4b8;
  --ctp-text: #e1e9ef;
  --ctp-subtext1: #b0c1d1;
  --ctp-subtext0: #8da4b8;
  --ctp-mauve: #ff8a00;
  --ctp-lavender: #ffaa45;
  --ctp-pink: #bf616a;
  --ctp-flamingo: #d08770;
  --ctp-rosewater: #e1e9ef;
  --ctp-green: #a3be8c;
  --ctp-teal: #88c0d0;
  --ctp-sky: #81a1c1;
  --ctp-blue: #5e81ac;
  --ctp-sapphire: #5e81ac;
  --ctp-yellow: #ebcb8b;
  --ctp-peach: #d08770;
  --ctp-maroon: #bf616a;
  --ctp-red: #bf616a;

  --bg-app: #161c22;
  --bg-sidebar: #0d1114;
  --bg-card: #1f2830;
  --bg-hover: rgba(255, 138, 0, 0.1);
  --bg-player: #090c0e;
  --bg-glass: rgba(13, 17, 20, 0.85);
  --accent: #ff8a00;
  --accent-dim: rgba(255, 138, 0, 0.15);
  --accent-glow: rgba(255, 138, 0, 0.4);
  --text-primary: #e1e9ef;
  --text-secondary: #b0c1d1;
  --text-muted: #708599;
  --border: #3a4a58;
  --border-subtle: #1f2830;
  --border-dropdown: #3a4a58;
  --shadow-dropdown: rgba(0, 0, 0, 0.7);
  --positive: #a3be8c;
  --warning: #ebcb8b;
  --danger: #bf616a;
  --radius-sm: 1px;
  --radius-md: 2px;
  --radius-lg: 4px;
}

[data-theme='v-tactical'] .sidebar {
  border-right: 1px solid var(--border);
}

[data-theme='v-tactical'] .player-bar {
  border-top: 2px solid var(--accent);
  background: linear-gradient(180deg, #0d1114 0%, #090c0e 100%);
}

[data-theme='v-tactical'] .player-track-name {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  color: var(--accent);
  text-shadow: 0 0 10px var(--accent-glow);
}

[data-theme='v-tactical'] .nav-link.active {
  background: linear-gradient(90deg, rgba(255, 138, 0, 0.15) 0%, transparent 100%);
  border-left: 3px solid var(--accent);
}

[data-theme='v-tactical'] .btn-primary {
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.5px;
}

/* ─── 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;
}

/* ─── 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;
}

/* ─── 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;
}

/* ─── 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;
}

/* ─── Order of the Phoenix ─── */
/* ─── W98 ─── */
[data-theme='w98'] {
  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 W98 Palette ── */
  --ctp-crust: #808080;
  --ctp-mantle: #a0a0a0;
  --ctp-base: #d4d0c8;
  /* Echtes W98 Button Face */
  --ctp-surface0: #ffffff;
  --ctp-surface1: #ececec;
  --ctp-surface2: #d4d0c8;
  --ctp-overlay0: #808080;
  --ctp-overlay1: #404040;
  --ctp-overlay2: #000000;
  --ctp-text: #000000;
  --ctp-subtext1: #000000;
  --ctp-subtext0: #404040;

  --ctp-mauve: #000080;
  --ctp-lavender: #0000cc;
  --ctp-green: #008000;
  --ctp-teal: #008080;
  --ctp-sky: #0000ff;
  --ctp-blue: #0000ff;
  --ctp-sapphire: #000080;
  --ctp-pink: #ff00ff;
  --ctp-flamingo: #ff00ff;
  --ctp-rosewater: #d4d0c8;
  --ctp-yellow: #808000;
  --ctp-peach: #ff8000;
  --ctp-maroon: #800000;
  --ctp-red: #ff0000;

  --bg-app: #008080;
  /* Teal Desktop */
  --bg-sidebar: #d4d0c8;
  --bg-card: #d4d0c8;
  --bg-hover: #000080;
  --bg-player: #d4d0c8;
  --bg-glass: rgba(212, 208, 200, 0.95);

  --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: #808080;
  --border-subtle: #d4d0c8;
  --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 (nur der äußere Shell-Rahmen) */
[data-theme='w98'] .app-shell {
  background-color: #008080;
}


/* ── 3D Bevel: Raised ── */
[data-theme='w98'] .sidebar,
[data-theme='w98'] .player-bar,
[data-theme='w98'] .card {
  background: #d4d0c8;
  border: 1px solid #000000;
  box-shadow:
    inset 1px 1px #ffffff,
    inset -1px -1px #808080,
    inset 2px 2px #dfdfdf,
    inset -2px -2px #404040;
}

[data-theme='w98'] .sidebar {
  border-right: 2px solid #000000;
}

/* Player Bar Titelbalken: ikonischer W98 Gradient für den Song-Titel */
[data-theme='w98'] .player-track-name {
  background: linear-gradient(to right, #09246d, #a6c4e8);
  color: #ffffff !important;
  padding: 1px 6px;
  font-weight: bold;
}

[data-theme='w98'] .player-track-artist,
[data-theme='w98'] .player-time {
  color: #000000 !important;
}

/* Nav */
[data-theme='w98'] .nav-link.active {
  background: #000080 !important;
  color: #ffffff !important;
}

[data-theme='w98'] .nav-link.active svg {
  color: #ffffff !important;
}

[data-theme='w98'] .nav-link:hover:not(.active) {
  background: #000080 !important;
  color: #ffffff !important;
}

[data-theme='w98'] .nav-link:hover:not(.active) svg {
  color: #ffffff !important;
}

/* Alle Buttons: 3D Raised Bevel */
[data-theme='w98'] .btn,
[data-theme='w98'] .btn-primary,
[data-theme='w98'] .btn-surface,
[data-theme='w98'] .btn-ghost,
[data-theme='w98'] .hero-play-btn,
[data-theme='w98'] .queue-round-btn,
[data-theme='w98'] .player-btn,
[data-theme='w98'] .album-card-details-btn {
  background: #d4d0c8 !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
  border-radius: 0 !important;
  box-shadow:
    inset 1px 1px #ffffff,
    inset -1px -1px #808080,
    inset 2px 2px #dfdfdf,
    inset -2px -2px #404040 !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

/* Gedrückt: Bevel umkehren */
[data-theme='w98'] .btn:active,
[data-theme='w98'] .btn-primary:active,
[data-theme='w98'] .btn-surface:active,
[data-theme='w98'] .btn-ghost:active,
[data-theme='w98'] .hero-play-btn:active,
[data-theme='w98'] .queue-round-btn:active,
[data-theme='w98'] .player-btn:active,
[data-theme='w98'] .album-card-details-btn:active {
  box-shadow:
    inset 1px 1px #808080,
    inset -1px -1px #ffffff,
    inset 2px 2px #404040,
    inset -2px -2px #dfdfdf !important;
}

/* Hover: heller */
[data-theme='w98'] .btn:hover,
[data-theme='w98'] .btn-primary:hover,
[data-theme='w98'] .btn-surface:hover,
[data-theme='w98'] .btn-ghost:hover,
[data-theme='w98'] .hero-play-btn:hover,
[data-theme='w98'] .album-card-details-btn:hover {
  background: #e4e0d8 !important;
  color: #000000 !important;
}

/* Aktive Queue-Buttons: navy, sunken */
[data-theme='w98'] .queue-round-btn.active {
  background: #000080 !important;
  color: #ffffff !important;
  box-shadow:
    inset 1px 1px #808080,
    inset -1px -1px #ffffff,
    inset 2px 2px #404040,
    inset -2px -2px #dfdfdf !important;
}

[data-theme='w98'] .queue-round-btn:hover:not(:disabled):not(.active) {
  background: #e4e0d8 !important;
  color: #000000 !important;
}

/* Progress Bar: eingesunkene Rille, navy Fill */
[data-theme='w98'] .progress-bar-track {
  background: #ffffff;
  box-shadow: inset 1px 1px #808080, inset -1px -1px #ffffff;
  border-radius: 0;
}

[data-theme='w98'] .progress-bar-fill {
  background: #000080;
  border-radius: 0;
  box-shadow: none;
}

/* Scrollbar */
[data-theme='w98'] ::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

[data-theme='w98'] ::-webkit-scrollbar-track {
  background: #d4d0c8;
}

[data-theme='w98'] ::-webkit-scrollbar-thumb {
  background: #d4d0c8;
  border: 1px solid #000000;
  box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080;
}

[data-theme='w98'] ::-webkit-scrollbar-button {
  background: #d4d0c8;
  border: 1px solid #000000;
  box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080;
}

/* Queue Tab */
[data-theme='w98'] .queue-tab-btn:hover {
  background: #e4e0d8;
  color: #000000;
}

/* Hero */
[data-theme='w98'] .hero-eyebrow {
  color: rgba(255, 255, 255, 0.9);
}

[data-theme='w98'] .hero-meta .badge {
  background: rgba(255, 255, 255, 0.15);
}

/* Settings */
[data-theme='w98'] .settings-tab:hover {
  background: #000080;
  color: #ffffff;
}

[data-theme='w98'] .theme-accordion-header:hover {
  background: #000080;
  color: #ffffff;
}

[data-theme='w98'] .theme-accordion-open .theme-accordion-header {
  background: #000080;
  color: #ffffff;
}

[data-theme='w98'] .theme-accordion-open .theme-accordion-chevron {
  color: #ffffff;
}

/* Dropdowns */
[data-theme='w98'] .custom-select-trigger:hover {
  background: #000080;
  color: #ffffff;
}

[data-theme='w98'] .custom-select-option:hover {
  background: #000080 !important;
  color: #ffffff !important;
}

/* Various hovers → navy + white */
[data-theme='w98'] .artist-ext-link:hover {
  background: #000080;
  color: #ffffff !important;
}

[data-theme='w98'] .changelog-summary:hover {
  color: #000080;
}

[data-theme='w98'] .changelog-code {
  background: #ffffff;
  color: #000080;
  border: 1px solid #808080;
}

[data-theme='w98'] .keybind-badge {
  background: #d4d0c8 !important;
  color: #000000 !important;
  border: 1px solid #808080 !important;
}

[data-theme='w98'] .eq-ctrl-btn {
  background: #d4d0c8;
  color: #000000;
  border: 1px solid #808080;
  box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080;
}

[data-theme='w98'] .eq-ctrl-btn:hover {
  background: #000080;
  color: #ffffff;
}

[data-theme='w98'] .genre-keyword-badge {
  background: #d4d0c8 !important;
  color: #000000 !important;
  border: 1px solid #808080 !important;
}

[data-theme='w98'] .toggle-track::before {
  background: #d4d0c8;
  border: 1px solid #808080;
}

[data-theme='w98'] .np-title {
  color: #000080 !important;
}

[data-theme='w98'] .np-action-btn:hover {
  background: #000080;
  color: #ffffff;
}

[data-theme='w98'] .np-queue-item:hover,
[data-theme='w98'] .np-queue-item.context-active {
  background: #000080;
  color: #ffffff;
}

[data-theme='w98'] .track-row:hover,
[data-theme='w98'] .track-row.context-active {
  background: #000080 !important;
}

[data-theme='w98'] .track-row:hover *,
[data-theme='w98'] .track-row.context-active * {
  color: #ffffff !important;
}

[data-theme='w98'] .artist-row:hover {
  background: #000080;
  color: #ffffff;
}

[data-theme='w98'] .year-toggle:hover {
  color: #000080;
}

[data-theme='w98'] .playlist-row:hover {
  background: #000080;
}

[data-theme='w98'] .playlist-row:hover,
[data-theme='w98'] .playlist-row:hover * {
  color: #ffffff;
}

[data-theme='w98'] .help-question:hover {
  color: #000080;
}

[data-theme='w98'] .help-item-open .help-question {
  color: #000080;
  font-weight: bold;
}

[data-theme='w98'] .help-item-open .help-chevron {
  color: #000080;
}

[data-theme='w98'] .queue-item:hover,
[data-theme='w98'] .queue-item.context-active {
  background: #000080 !important;
}

[data-theme='w98'] .queue-item:hover .queue-item-title,
[data-theme='w98'] .queue-item:hover .queue-item-artist,
[data-theme='w98'] .queue-item:hover .queue-item-duration,
[data-theme='w98'] .queue-item.context-active .queue-item-title,
[data-theme='w98'] .queue-item.context-active .queue-item-artist,
[data-theme='w98'] .queue-item.context-active .queue-item-duration {
  color: #ffffff;
}

[data-theme='w98'] .player-btn:hover {
  background: #000080;
  color: #ffffff;
}

[data-theme='w98'] .player-btn-primary {
  background: #d4d0c8 !important;
  color: #000000 !important;
}

[data-theme='w98'] .player-btn-primary:hover {
  background: #000080 !important;
  color: #ffffff !important;
}

[data-theme='w98'] .search-result-item:hover,
[data-theme='w98'] .search-result-item.active {
  background: #000080;
}

[data-theme='w98'] .search-result-item:hover .search-result-name,
[data-theme='w98'] .search-result-item:hover .search-result-sub,
[data-theme='w98'] .search-result-item.active .search-result-name,
[data-theme='w98'] .search-result-item.active .search-result-sub {
  color: #ffffff;
}

[data-theme='w98'] .collapse-btn {
  border-color: #808080 !important;
}

[data-theme='w98'] .collapse-btn:hover {
  background: #000080 !important;
  color: #ffffff !important;
}

[data-theme='w98'] .album-row-nav .nav-btn:hover:not(.disabled) {
  background: #000080;
  color: #ffffff;
}

/* Live-Dropdown: kein backdrop-blur (saugt teal durch), solider W98-Hintergrund */
[data-theme='w98'] .glass {
  background: #d4d0c8 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid #000000;
  box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080, 2px 2px 4px rgba(0, 0, 0, 0.3);
  color: #000000;
}

/* Stream-Einträge: --bg-hover ist navy → Override auf W98-Grau mit Bevel */
[data-theme='w98'] .glass [style*="var(--bg-hover)"] {
  background: #ece8e0 !important;
  border: 1px solid #808080;
  box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080;
  border-radius: 0 !important;
}

/* Inline-color-Overrides für Text in Stream-Einträgen */
[data-theme='w98'] .glass [style*="var(--text-primary)"],
[data-theme='w98'] .glass [style*="var(--text-secondary)"],
[data-theme='w98'] .glass [style*="var(--text-muted)"] {
  color: #000000 !important;
}

/* ─── 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;
}

/* ─── 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);
}

/* ─── 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;
}

/* ─── 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;
}

/* ─── 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;
}

/* ─── 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);
}

/* ─── Focus ─── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ─── Global Dragging State ─── */
body.is-dragging,
body.is-dragging * {
  user-select: none !important;
  cursor: col-resize !important;
}

/* ─── 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;
}

/* ─── Utility Classes ─── */
.glass {
  background: var(--bg-glass, rgba(30, 30, 46, 0.75));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-subtle);
}

.gradient-text {
  background: linear-gradient(135deg, var(--ctp-mauve), var(--ctp-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* ─── 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);
}

/* ─── 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 */
}

/* ─── 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);
}

/* ─── 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 {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-md);
}

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

/* ─── Scrollable area ─── */
.scroll-area {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
}

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

/* ─── 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);
}

/* ─── 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;
  }
}

/* ─── Animations ─── */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@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);
  }
}

@keyframes wave {

  0%,
  100% {
    transform: scaleY(0.4);
  }

  50% {
    transform: scaleY(1);
  }
}

.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;
}

/* ─── 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);
}

/* ─── 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;
}

/* ─── 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;
}

/* ─── WMP8 Classic — Windows Media Player 8 / XP Luna ─── */
[data-theme='winmedplayer'] {
  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%23c2d4f2%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: #000000;
  /* black — LCD display / playlist */
  --ctp-mantle: #1a3060;
  /* darkest blue — sidebar */
  --ctp-base: #3a62a5;
  /* Luna blue — main body (dark enough for white text) */
  --ctp-surface0: #4a72b8;
  --ctp-surface1: #5480cc;
  --ctp-surface2: #6090d8;
  --ctp-overlay0: #7090c0;
  --ctp-overlay1: #8aaad8;
  --ctp-overlay2: #a0c0e8;
  --ctp-text: #ffffff;
  --ctp-subtext1: #dce8ff;
  --ctp-subtext0: #b8d0f8;
  /* WMP green + XP blue-cool palette */
  --ctp-mauve: #45ff00;
  /* WMP poison green — primary accent */
  --ctp-lavender: #70ff40;
  --ctp-green: #30dd00;
  --ctp-teal: #00cc88;
  --ctp-sky: #88ccff;
  --ctp-blue: #5599ee;
  --ctp-sapphire: #3378cc;
  --ctp-pink: #ff88cc;
  --ctp-flamingo: #ff7788;
  --ctp-rosewater: #ffaabb;
  --ctp-yellow: #ffdd44;
  --ctp-peach: #ff9944;
  --ctp-maroon: #dd4455;
  --ctp-red: #ee3344;

  /* ── Semantic tokens ── */
  --bg-app: #3a62a5;
  /* ~12% luminance → white contrast 6:1 */
  --bg-sidebar: #1a3060;
  --bg-card: #4a72b8;
  --bg-hover: #5480cc;
  --bg-player: #000000;
  --bg-glass: rgba(30, 58, 110, 0.88);
  --accent: #45ff00;
  --accent-dim: rgba(69, 255, 0, 0.15);
  --accent-glow: rgba(69, 255, 0, 0.45);
  --text-primary: #ffffff;
  --text-secondary: #dce8ff;
  --text-muted: #b8d0f8;
  /* lighter so readable on #3a62a5 */
  --border: #2a5090;
  --border-subtle: #4a72b8;
  --positive: #30dd00;
  --warning: #ffdd44;
  --danger: #ee3344;
}

/* ── WMP8: Luna-style gradients + skeuomorphic detail ── */

/* Sidebar: deep WMP task-pane blue */
[data-theme='winmedplayer'] .sidebar {
  background: linear-gradient(180deg, #244080 0%, #1a3060 60%, #0e2048 100%);
  border-right: 2px solid #0e2048;
  box-shadow: inset -1px 0 0 rgba(120, 160, 220, 0.2);
}

/* Main body: Luna blue */
[data-theme='winmedplayer'] .app-shell {
  background: linear-gradient(160deg, #4a72b8 0%, #3a62a5 40%, #2e5498 100%);
}

/* Player bar: black LCD display with green glow ambience */
[data-theme='winmedplayer'] .player-bar {
  background: #000000;
  border-top: 2px solid #1a3060;
  box-shadow: inset 0 1px 0 rgba(69, 255, 0, 0.06), 0 -2px 12px rgba(0, 0, 0, 0.6);
}

/* Track name: WMP green glow */
[data-theme='winmedplayer'] .player-track-name {
  color: #45ff00;
  text-shadow:
    0 0 8px rgba(69, 255, 0, 0.80),
    0 0 16px rgba(69, 255, 0, 0.40),
    0 0 2px rgba(69, 255, 0, 0.60);
  letter-spacing: 0.03em;
}

[data-theme='winmedplayer'] .player-track-artist {
  color: #30dd00;
  opacity: 0.85;
  text-shadow: 0 0 4px rgba(69, 255, 0, 0.4);
}

/* Transport buttons: round, radial metallic gradient, drop shadow */
[data-theme='winmedplayer'] .player-btn,
[data-theme='winmedplayer'] .player-btn-primary {
  background: radial-gradient(circle at 38% 32%, #c8dcf8 0%, #8aacdc 40%, #4870b8 100%);
  color: #ffffff;
  border-radius: 50%;
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 50, 0.3);
  border: 1px solid #2a5090;
}

[data-theme='winmedplayer'] .player-btn:hover,
[data-theme='winmedplayer'] .player-btn-primary:hover {
  background: radial-gradient(circle at 38% 32%, #d8ecff 0%, #a0c0ee 40%, #5888d0 100%);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(0, 0, 50, 0.3);
}

/* Regular buttons: Luna soft rounded pill */
[data-theme='winmedplayer'] .btn {
  background: linear-gradient(180deg, #b8d0f0 0%, #7898d8 55%, #5878c0 100%);
  color: #ffffff;
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 80, 0.25),
    0 2px 4px rgba(0, 0, 0, 0.3);
  border: 1px solid #3a60b0;
}

[data-theme='winmedplayer'] .btn:hover {
  background: linear-gradient(180deg, #cce0ff 0%, #90aaee 55%, #6888d0 100%);
}

[data-theme='winmedplayer'] .btn-primary {
  background: linear-gradient(180deg, #70ff40 0%, #38cc00 55%, #28aa00 100%);
  color: #003300;
  border: 1px solid #208800;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 60, 0, 0.25),
    0 2px 6px rgba(0, 0, 0, 0.3),
    0 0 8px rgba(69, 255, 0, 0.25);
}

/* Active queue round buttons: green bg, dark text */
[data-theme='winmedplayer'] .queue-round-btn.active {
  color: #003300;
}

/* Cards / glass panels: slightly elevated with border */
[data-theme='winmedplayer'] .glass,
[data-theme='winmedplayer'] .card {
  background: rgba(90, 128, 190, 0.55);
  border: 1px solid rgba(160, 190, 230, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Content header: slightly darker Luna band */
[data-theme='winmedplayer'] .content-header {
  background: linear-gradient(180deg, rgba(58, 98, 165, 0.55) 0%, rgba(58, 98, 165, 0.2) 100%);
  border-bottom: 1px solid #6888c2;
}

/* ─── PowerDVD Classic — Virtual HiFi Receiver / VFD Display ─── */
/* ─── 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;
}

/* ─── Vintage Tube Radio — 1950s Bakelite & Vacuum Tube ─── */
[data-theme='vintage-tube-radio'] {
  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%23BCAAA4%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: #1E110A;
  /* deep warm black-brown — dial background */
  --ctp-mantle: #5D4037;
  /* speaker cloth brown — sidebar */
  --ctp-base: #3E2723;
  /* polished bakelite — chassis */
  --ctp-surface0: #4E342E;
  --ctp-surface1: #5D4037;
  --ctp-surface2: #6D4C41;
  --ctp-overlay0: #795548;
  --ctp-overlay1: #8D6E63;
  --ctp-overlay2: #A1887F;
  --ctp-text: #FFECB3;
  /* ivory/cream — dial lettering */
  --ctp-subtext1: #D7CCC8;
  --ctp-subtext0: #BCAAA4;
  /* aged ivory — secondary labels */
  /* Tube glow + tarnished brass accents */
  --ctp-mauve: #FF6F00;
  /* vacuum tube orange — primary accent */
  --ctp-lavender: #FF8F00;
  --ctp-yellow: #FFC107;
  /* warm dial backlight */
  --ctp-peach: #FFB300;
  --ctp-green: #558B2F;
  --ctp-teal: #00695C;
  --ctp-sky: #B08D57;
  /* tarnished brass */
  --ctp-blue: #5C6BC0;
  --ctp-sapphire: #3949AB;
  --ctp-pink: #C2185B;
  --ctp-flamingo: #AD1457;
  --ctp-rosewater: #E91E63;
  --ctp-maroon: #B71C1C;
  --ctp-red: #C62828;

  /* ── Semantic tokens ── */
  --bg-app: #3E2723;
  --bg-sidebar: #5D4037;
  --bg-card: #4E342E;
  --bg-hover: #5D4037;
  --bg-player: #1E110A;
  --bg-glass: rgba(62, 39, 35, 0.92);
  --accent: #FF6F00;
  --accent-dim: rgba(255, 111, 0, 0.15);
  --accent-glow: rgba(255, 111, 0, 0.40);
  --text-primary: #FFECB3;
  --text-secondary: #BCAAA4;
  --text-muted: #b09880;
  --border: #B08D57;
  /* tarnished brass */
  --border-subtle: #4E342E;
  --positive: #558B2F;
  --warning: #FFC107;
  --danger: #C62828;
}

/* ── Tube Radio: polished bakelite chassis texture ── */
[data-theme='vintage-tube-radio'] .app-shell {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 111, 0, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(255, 193, 7, 0.03) 0%, transparent 50%),
    #3E2723;
}

/* Sidebar: speaker cloth — soft radial texture */
[data-theme='vintage-tube-radio'] .sidebar {
  background:
    repeating-linear-gradient(0deg,
      rgba(0, 0, 0, 0.12) 0px,
      rgba(0, 0, 0, 0.12) 1px,
      transparent 1px,
      transparent 4px),
    repeating-linear-gradient(90deg,
      rgba(0, 0, 0, 0.08) 0px,
      rgba(0, 0, 0, 0.08) 1px,
      transparent 1px,
      transparent 4px),
    #5D4037;
  border-right: 2px solid #B08D57;
  box-shadow: inset -2px 0 8px rgba(0, 0, 0, 0.4);
}

/* ── Frequency dial (Player Bar) ── */
[data-theme='vintage-tube-radio'] .player-bar {
  background: #1E110A;
  border-top: 2px solid #B08D57;
  box-shadow:
    inset 0 1px 0 rgba(255, 193, 7, 0.08),
    0 -3px 20px rgba(0, 0, 0, 0.7);
}

/* Track name: warm tube-glow */
[data-theme='vintage-tube-radio'] .player-track-name {
  color: #FFC107;
  text-shadow:
    0 0 6px rgba(255, 193, 7, 0.90),
    0 0 14px rgba(255, 111, 0, 0.60),
    0 0 28px rgba(255, 111, 0, 0.30);
  letter-spacing: 0.04em;
}

[data-theme='vintage-tube-radio'] .player-track-artist {
  color: #FF8F00;
  text-shadow: 0 0 6px rgba(255, 111, 0, 0.50);
  opacity: 1;
}

[data-theme='vintage-tube-radio'] .player-time {
  color: #FF8F00;
  text-shadow: 0 0 5px rgba(255, 111, 0, 0.55);
}

/* ── Transport buttons: turned brass knobs ── */
[data-theme='vintage-tube-radio'] .player-btn,
[data-theme='vintage-tube-radio'] .player-btn-primary {
  background: radial-gradient(circle at 38% 32%, #d4a843 0%, #b08d57 45%, #7a5e2a 100%);
  color: #1E110A;
  border: 1px solid #7a5e2a;
  box-shadow:
    0 3px 7px rgba(0, 0, 0, 0.7),
    0 1px 2px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 220, 120, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

[data-theme='vintage-tube-radio'] .player-btn:hover,
[data-theme='vintage-tube-radio'] .player-btn-primary:hover {
  background: radial-gradient(circle at 38% 32%, #e8bc55 0%, #c09a65 45%, #8a6e38 100%);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.7),
    0 1px 2px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 230, 140, 0.65),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

/* ── Regular buttons: bakelite style ── */
[data-theme='vintage-tube-radio'] .btn {
  background: linear-gradient(180deg, #4E342E 0%, #3E2723 100%);
  color: #FFECB3;
  border: 1px solid #B08D57;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 150, 0.10),
    0 1px 4px rgba(0, 0, 0, 0.5);
}

[data-theme='vintage-tube-radio'] .btn:hover {
  background: linear-gradient(180deg, #5D4037 0%, #4E342E 100%);
}

[data-theme='vintage-tube-radio'] .btn-primary {
  background: linear-gradient(180deg, #FF8F00 0%, #E65100 100%);
  color: #1E110A;
  border: 1px solid #BF360C;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 120, 0.35),
    0 1px 4px rgba(0, 0, 0, 0.4),
    0 0 10px rgba(255, 111, 0, 0.30);
}

/* Active queue buttons: dark text on orange */
[data-theme='vintage-tube-radio'] .queue-round-btn.active {
  color: #1E110A;
}

/* Cards / panels: inset bakelite */
[data-theme='vintage-tube-radio'] .glass,
[data-theme='vintage-tube-radio'] .card {
  background: rgba(78, 52, 46, 0.80);
  border: 1px solid #B08D57;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 150, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Content header: warm band */
[data-theme='vintage-tube-radio'] .content-header {
  background: linear-gradient(180deg, rgba(93, 64, 55, 0.60) 0%, rgba(62, 39, 35, 0.20) 100%);
  border-bottom: 1px solid #B08D57;
}

/* ─── Windows 7 Aero — Aero Glass & Frutiger Aero ─── */
/* ─── Windows 7 Aero Glass ─── */
[data-theme='aero-glass'] {
  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%234c607a%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: #05080f;
  --ctp-mantle: #0d1a2e;
  --ctp-base: #b8cfe8;
  --ctp-surface0: #ccdaea;
  --ctp-surface1: #d8e6f2;
  --ctp-surface2: #e4f0f8;
  --ctp-overlay0: #a0bcd8;
  --ctp-overlay1: #7aa0c0;
  --ctp-overlay2: #5a84a8;
  --ctp-text: #0d1a2e;
  --ctp-subtext1: #1e3250;
  --ctp-subtext0: #3a5070;
  --ctp-mauve: #1878e8;
  --ctp-lavender: #3399ff;
  --ctp-sky: #5bb3ff;
  --ctp-blue: #1d4268;
  --ctp-sapphire: #1366c8;
  --ctp-teal: #0099aa;
  --ctp-green: #107c10;
  --ctp-yellow: #f7c948;
  --ctp-peach: #e8890c;
  --ctp-pink: #e3008c;
  --ctp-flamingo: #c50f1f;
  --ctp-rosewater: #da3b01;
  --ctp-maroon: #a4262c;
  --ctp-red: #c42b1c;

  /* ── Semantic tokens ── */
  --bg-app: #b8cfe8;
  --bg-sidebar: rgba(210, 228, 248, 0.55);
  --bg-card: rgba(225, 238, 252, 0.65);
  --bg-hover: rgba(24, 120, 232, 0.85);
  --bg-player: #05080f;
  --bg-glass: rgba(210, 228, 248, 0.82);
  --accent: #1878e8;
  --accent-dim: rgba(24, 120, 232, 0.14);
  --accent-glow: rgba(24, 120, 232, 0.40);
  --volume-accent: #1878e8;
  --text-primary: #0d1a2e;
  --text-secondary: #1e3250;
  --text-muted: #7090b8;
  --border: rgba(130, 175, 220, 0.65);
  --border-subtle: rgba(160, 200, 240, 0.45);
  --positive: #107c10;
  --warning: #c87400;
  --danger: #c42b1c;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
}

/* ── Background: W7 sky with depth ── */
[data-theme='aero-glass'] .app-shell {
  background: linear-gradient(160deg, #c8e2f5 0%, #b5cfe4 45%, #9fc0db 100%);
}

/* ── Sidebar: Aero glass panel — frosted translucent ── */
[data-theme='aero-glass'] .sidebar {
  background: rgba(210, 232, 252, 0.52);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid rgba(150, 190, 230, 0.55);
  box-shadow:
    inset -1px 0 0 rgba(255, 255, 255, 0.75),
    inset 1px 0 0 rgba(255, 255, 255, 0.25),
    2px 0 8px rgba(0, 0, 0, 0.12);
}

/* ── Player bar: authentic W7 taskbar — near-black glass ── */
[data-theme='aero-glass'] .player-bar {
  background: linear-gradient(180deg,
      rgba(12, 18, 32, 0.96) 0%,
      rgba(6, 10, 20, 0.99) 100%);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-top: 1px solid rgba(80, 155, 235, 0.60);
  box-shadow:
    inset 0 1px 0 rgba(100, 180, 255, 0.28),
    inset 0 2px 0 rgba(255, 255, 255, 0.06),
    0 -2px 16px rgba(0, 0, 0, 0.55);
}

/* Track info: white on near-black, blue glow */
[data-theme='aero-glass'] .player-track-name {
  color: #ffffff;
  text-shadow: 0 0 12px rgba(80, 160, 255, 0.65), 0 1px 2px rgba(0, 0, 0, 0.60);
  font-weight: 600;
}

[data-theme='aero-glass'] .player-track-artist {
  color: #88b8e0;
  opacity: 1;
}

[data-theme='aero-glass'] .player-time {
  color: #88b8e0;
}

/* ── Transport buttons: Aero glass gel circles ── */
[data-theme='aero-glass'] .player-btn,
[data-theme='aero-glass'] .player-btn-primary {
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.80) 0%,
      rgba(195, 228, 255, 0.82) 48%,
      rgba(80, 160, 235, 0.92) 50%,
      rgba(30, 110, 205, 0.96) 100%);
  color: #ffffff;
  border: 1px solid rgba(20, 75, 180, 0.55);
  border-radius: 50%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.90),
    0 2px 6px rgba(0, 0, 0, 0.40),
    0 0 0 1px rgba(80, 150, 230, 0.25);
}

[data-theme='aero-glass'] .player-btn:hover,
[data-theme='aero-glass'] .player-btn-primary:hover {
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(215, 240, 255, 0.90) 48%,
      rgba(105, 178, 248, 0.95) 50%,
      rgba(50, 130, 220, 0.99) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 3px 10px rgba(0, 0, 0, 0.40),
    0 0 12px rgba(51, 153, 255, 0.45);
}

/* ── Regular buttons: Aero frosted glass ── */
[data-theme='aero-glass'] .btn,
[data-theme='aero-glass'] .btn-surface,
[data-theme='aero-glass'] .btn-ghost {
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.85) 0%,
      rgba(255, 255, 255, 0.85) 48%,
      rgba(190, 220, 248, 0.90) 50%,
      rgba(155, 198, 240, 0.94) 100%);
  color: #0d1a2e;
  border: 1px solid rgba(120, 170, 220, 0.65);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.50),
    0 1px 3px rgba(0, 0, 0, 0.18);
  border-radius: 5px;
}

[data-theme='aero-glass'] .btn:hover,
[data-theme='aero-glass'] .btn-surface:hover,
[data-theme='aero-glass'] .btn-ghost:hover {
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(255, 255, 255, 0.96) 48%,
      rgba(210, 235, 255, 0.95) 50%,
      rgba(175, 215, 252, 0.98) 100%);
  border-color: rgba(24, 120, 232, 0.70);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 1px 4px rgba(0, 0, 0, 0.20),
    0 0 8px rgba(24, 120, 232, 0.22);
}

/* ── Primary button: Aero blue gel ── */
[data-theme='aero-glass'] .btn-primary {
  background: linear-gradient(180deg,
      rgba(110, 185, 255, 0.92) 0%,
      rgba(70, 155, 245, 0.92) 48%,
      rgba(24, 100, 205, 0.96) 50%,
      rgba(12, 72, 175, 0.99) 100%);
  color: #ffffff;
  border: 1px solid rgba(12, 60, 155, 0.70);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 1px 4px rgba(0, 0, 0, 0.30),
    0 0 10px rgba(24, 120, 232, 0.38);
  border-radius: 5px;
}

[data-theme='aero-glass'] .btn-primary:hover {
  background: linear-gradient(180deg,
      rgba(140, 200, 255, 0.95) 0%,
      rgba(90, 170, 255, 0.95) 48%,
      rgba(40, 120, 225, 0.98) 50%,
      rgba(24, 95, 195, 1) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 1px 5px rgba(0, 0, 0, 0.30),
    0 0 14px rgba(24, 120, 232, 0.50);
}

/* ── Hero / album-card buttons: frosted glass ── */
[data-theme='aero-glass'] .hero-play-btn,
[data-theme='aero-glass'] .album-card-details-btn {
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.82) 0%,
      rgba(190, 220, 248, 0.88) 48%,
      rgba(140, 190, 235, 0.92) 50%,
      rgba(100, 160, 220, 0.95) 100%);
  color: #0d1a2e;
  border: 1px solid rgba(100, 160, 220, 0.60);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.90), 0 1px 3px rgba(0, 0, 0, 0.20);
}

[data-theme='aero-glass'] .hero-play-btn:hover,
[data-theme='aero-glass'] .album-card-details-btn:hover {
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(215, 238, 255, 0.95) 50%,
      rgba(165, 210, 250, 0.98) 100%);
  border-color: rgba(24, 120, 232, 0.70);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 0 8px rgba(24, 120, 232, 0.25);
}

/* ── Queue toolbar round buttons: Aero glass ── */
[data-theme='aero-glass'] .queue-round-btn {
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.80) 0%,
      rgba(185, 218, 248, 0.88) 50%,
      rgba(140, 190, 235, 0.92) 100%);
  color: #1e3250;
  border: 1px solid rgba(110, 165, 220, 0.60);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.90), 0 1px 2px rgba(0, 0, 0, 0.18);
}

[data-theme='aero-glass'] .queue-round-btn:hover:not(:disabled):not(.active) {
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(210, 235, 255, 0.95) 50%,
      rgba(165, 208, 250, 0.98) 100%);
  border-color: rgba(24, 120, 232, 0.65);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 0 8px rgba(24, 120, 232, 0.25);
  color: #0d1a2e;
}

[data-theme='aero-glass'] .queue-round-btn.active {
  background: linear-gradient(180deg,
      rgba(110, 180, 255, 0.90) 0%,
      rgba(24, 100, 210, 0.96) 100%);
  color: #ffffff;
  border-color: rgba(12, 60, 155, 0.70);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 8px rgba(24, 120, 232, 0.50);
}

/* ── Cards: frosted glass panels ── */
[data-theme='aero-glass'] .card {
  background: rgba(225, 240, 255, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(160, 200, 240, 0.60);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.80),
    0 2px 8px rgba(0, 0, 0, 0.12);
  border-radius: 6px;
}

/* ── Content header: Aero chrome strip ── */
[data-theme='aero-glass'] .content-header {
  background: rgba(210, 232, 252, 0.58);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(150, 195, 240, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.70),
    inset 0 -1px 0 rgba(255, 255, 255, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.10);
}

/* Connection indicators: dark navy, readable on glass */
[data-theme='aero-glass'] .connection-type,
[data-theme='aero-glass'] .connection-server {
  color: #0d1a2e;
}

/* ── Theme accordion: glass hover ── */
[data-theme='aero-glass'] .theme-accordion-header:hover {
  background: rgba(24, 120, 232, 0.18);
  color: #0d1a2e;
}

[data-theme='aero-glass'] .theme-accordion-open .theme-accordion-header {
  background: rgba(24, 120, 232, 0.22);
  color: #0d1a2e;
}

/* ── Progress bar: Aero blue ── */
[data-theme='aero-glass'] .progress-bar-track {
  background: rgba(150, 195, 235, 0.45);
  border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}

[data-theme='aero-glass'] .progress-bar-fill {
  background: linear-gradient(180deg,
      rgba(110, 185, 255, 0.95) 0%,
      rgba(24, 120, 232, 0.98) 50%,
      rgba(12, 90, 200, 1) 100%);
  border-radius: 3px;
  box-shadow: 0 0 6px rgba(24, 120, 232, 0.50);
}

/* ── Scrollbar: W7 thin glass style ── */
[data-theme='aero-glass'] ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

[data-theme='aero-glass'] ::-webkit-scrollbar-track {
  background: rgba(175, 210, 245, 0.25);
  border-radius: 5px;
}

[data-theme='aero-glass'] ::-webkit-scrollbar-thumb {
  background: rgba(110, 168, 225, 0.60);
  border: 1px solid rgba(80, 140, 200, 0.45);
  border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

[data-theme='aero-glass'] ::-webkit-scrollbar-thumb:hover {
  background: rgba(24, 120, 232, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.50), 0 0 4px rgba(24, 120, 232, 0.30);
}

/* ── Glass / dropdowns: frosted glass panel ── */
[data-theme='aero-glass'] .glass {
  background: rgba(218, 236, 255, 0.88) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(150, 195, 240, 0.65) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    2px 2px 12px rgba(0, 0, 0, 0.18) !important;
  border-radius: 8px !important;
}

[data-theme='aero-glass'] .glass [style*="var(--bg-hover)"] {
  background: rgba(24, 120, 232, 0.20) !important;
  border-radius: 4px !important;
}

[data-theme='aero-glass'] .glass [style*="var(--text-primary)"] {
  color: #0d1a2e !important;
}

[data-theme='aero-glass'] .glass [style*="var(--text-secondary)"] {
  color: #1e3250 !important;
}

[data-theme='aero-glass'] .glass [style*="var(--text-muted)"] {
  color: #3a5070 !important;
}

/* ── Hover / selection: Aero blue glass ── */
[data-theme='aero-glass'] .queue-tab-btn:hover {
  background: rgba(24, 120, 232, 0.18);
  color: #0d1a2e;
}

[data-theme='aero-glass'] .settings-tab:hover {
  background: rgba(24, 120, 232, 0.18);
  color: #0d1a2e;
}

[data-theme='aero-glass'] .settings-tab.active {
  background: rgba(24, 120, 232, 0.85);
  color: #ffffff;
}

[data-theme='aero-glass'] .custom-select-trigger:hover {
  background: rgba(24, 120, 232, 0.15);
}

[data-theme='aero-glass'] .custom-select-option:hover {
  background: rgba(24, 120, 232, 0.85) !important;
  color: #ffffff !important;
}

[data-theme='aero-glass'] .artist-ext-link:hover {
  background: rgba(24, 120, 232, 0.85);
  color: #ffffff !important;
}

[data-theme='aero-glass'] .np-action-btn:hover {
  background: rgba(24, 120, 232, 0.18);
}

[data-theme='aero-glass'] .np-queue-item:hover,
[data-theme='aero-glass'] .np-queue-item.context-active {
  background: rgba(24, 120, 232, 0.85);
  color: #ffffff;
}

[data-theme='aero-glass'] .track-row:hover,
[data-theme='aero-glass'] .track-row.context-active {
  background: rgba(24, 120, 232, 0.85) !important;
}

[data-theme='aero-glass'] .track-row:hover *,
[data-theme='aero-glass'] .track-row.context-active * {
  color: #ffffff !important;
}

[data-theme='aero-glass'] .artist-row:hover {
  background: rgba(24, 120, 232, 0.85);
  color: #ffffff;
}

[data-theme='aero-glass'] .playlist-row:hover {
  background: rgba(24, 120, 232, 0.85);
}

[data-theme='aero-glass'] .playlist-row:hover,
[data-theme='aero-glass'] .playlist-row:hover * {
  color: #ffffff;
}

[data-theme='aero-glass'] .queue-item:hover,
[data-theme='aero-glass'] .queue-item.context-active {
  background: rgba(24, 120, 232, 0.85) !important;
}

[data-theme='aero-glass'] .queue-item:hover .queue-item-title,
[data-theme='aero-glass'] .queue-item:hover .queue-item-artist,
[data-theme='aero-glass'] .queue-item:hover .queue-item-duration,
[data-theme='aero-glass'] .queue-item.context-active .queue-item-title,
[data-theme='aero-glass'] .queue-item.context-active .queue-item-artist,
[data-theme='aero-glass'] .queue-item.context-active .queue-item-duration {
  color: #ffffff;
}

/* ── Active queue / now-playing items ── */
[data-theme='aero-glass'] .queue-item.active {
  background: rgba(24, 120, 232, 0.14);
  color: #1366c8;
}

[data-theme='aero-glass'] .queue-item.active .queue-item-artist,
[data-theme='aero-glass'] .queue-item.active .queue-item-duration {
  color: #1878e8;
  opacity: 0.85;
}

[data-theme='aero-glass'] .np-queue-item-active {
  color: #1366c8;
}

[data-theme='aero-glass'] .np-queue-item.active {
  background: rgba(24, 120, 232, 0.10);
}

[data-theme='aero-glass'] .np-album-track.active .np-album-track-title,
[data-theme='aero-glass'] .np-album-track.active .np-album-track-num {
  color: #1366c8;
}

/* ─── Windows XP Luna — Classic 2001 ─── */
/* ─── Windows XP Luna Teal ─── */
[data-theme='luna-teal'] {
  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");

  /* ── Palette ── */
  --ctp-crust: #0041b8;
  --ctp-mantle: #0055e5;
  --ctp-base: #ece9d8;
  --ctp-surface0: #ffffff;
  --ctp-surface1: #f5f3ec;
  --ctp-surface2: #ece9d8;
  --ctp-overlay0: #c0bba8;
  --ctp-overlay1: #8a8675;
  --ctp-overlay2: #5e5a4c;
  --ctp-text: #000000;
  --ctp-subtext1: #1a1a1a;
  --ctp-subtext0: #444444;
  --ctp-mauve: #3c9d29;
  --ctp-lavender: #52b83c;
  --ctp-green: #3c9d29;
  --ctp-teal: #007c8a;
  --ctp-sky: #316ac5;
  --ctp-blue: #0055e5;
  --ctp-sapphire: #0041b8;
  --ctp-pink: #cc2288;
  --ctp-flamingo: #cc2020;
  --ctp-rosewater: #dd4400;
  --ctp-yellow: #b87800;
  --ctp-peach: #cc6600;
  --ctp-maroon: #aa1111;
  --ctp-red: #cc1111;

  /* ── Semantic tokens ── */
  --bg-app: #ece9d8;
  --bg-sidebar: #c8daf5;
  --bg-card: #ffffff;
  --bg-hover: #316ac5;
  --bg-player: #1248b8;
  --bg-glass: rgba(255, 255, 255, 0.97);
  --accent: #3c9d29;
  --accent-dim: rgba(60, 157, 41, 0.14);
  --accent-glow: rgba(60, 157, 41, 0.35);
  --volume-accent: #3c9d29;
  --text-primary: #000000;
  --text-secondary: #333333;
  --text-muted: #555555;
  --border: #003399;
  --border-subtle: #aca899;
  --positive: #3c9d29;
  --warning: #b87800;
  --danger: #cc1111;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
}

/* ── App shell: XP sandy desktop ── */
[data-theme='luna-teal'] .app-shell {
  background: #ece9d8;
}

/* ── Sidebar: XP Explorer task pane / Folders panel ── */
[data-theme='luna-teal'] .sidebar {
  background: linear-gradient(180deg, #d8e8fa 0%, #c0d4f5 40%, #b0c8f0 100%);
  border-right: 1px solid #7090c0;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.60), 2px 0 4px rgba(0, 0, 0, 0.14);
}

/* Sidebar text: dark navy on ice blue — with white text-shadow for legibility */
[data-theme='luna-teal'] .sidebar-link,
[data-theme='luna-teal'] .sidebar-section-title,
[data-theme='luna-teal'] .sidebar-logo-text,
[data-theme='luna-teal'] .nav-section-label,
[data-theme='luna-teal'] .brand-name {
  color: #002060;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  font-weight: 700;
}

/* Nav links */
[data-theme='luna-teal'] .nav-link {
  color: #001850;
}

[data-theme='luna-teal'] .nav-link:hover {
  background: rgba(255, 255, 255, 0.45);
  color: #000000;
  border-radius: 3px;
}

[data-theme='luna-teal'] .nav-link.active {
  background: #316ac5;
  color: #ffffff;
  border-radius: 3px;
  text-shadow: none;
}

[data-theme='luna-teal'] .nav-link.active::before {
  background: #ffffff;
}

[data-theme='luna-teal'] .nav-link.active svg,
[data-theme='luna-teal'] .nav-link:hover svg {
  opacity: 1;
}

/* Now Playing nav link */
[data-theme='luna-teal'] .nav-link-nowplaying {
  background: rgba(0, 0, 80, 0.10);
  color: #001850;
}

[data-theme='luna-teal'] .nav-link-nowplaying:hover {
  background: rgba(255, 255, 255, 0.45);
  color: #000000;
}

[data-theme='luna-teal'] .nav-link-nowplaying.active {
  background: #316ac5;
  color: #ffffff;
}

/* ── Player bar: authentic XP Luna taskbar blue ── */
[data-theme='luna-teal'] .player-bar {
  background: linear-gradient(180deg,
      #4b8ee8 0%,
      #2568d4 8%,
      #1a56c4 30%,
      #1248b8 70%,
      #0e3da8 85%,
      #1248b8 100%);
  border-top: 1px solid #7aaaff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 2px 0 rgba(255, 255, 255, 0.18),
    0 -2px 8px rgba(0, 0, 0, 0.30);
}

/* Track name: white with XP glow */
[data-theme='luna-teal'] .player-track-name {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.60), 0 0 10px rgba(120, 180, 255, 0.40);
  font-weight: 700;
}

[data-theme='luna-teal'] .player-track-artist {
  color: #b8d4ff;
  opacity: 1;
}

[data-theme='luna-teal'] .player-time {
  color: #b8d4ff;
}

/* ── Transport buttons: XP Luna gel circles ── */
[data-theme='luna-teal'] .player-btn,
[data-theme='luna-teal'] .player-btn-primary {
  background: linear-gradient(180deg,
      #80aaff 0%,
      #4477ee 45%,
      #1a50dd 50%,
      #0c3bb8 100%);
  color: #ffffff;
  border: 1px solid #002288;
  border-radius: 50%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 2px 5px rgba(0, 0, 0, 0.45);
}

[data-theme='luna-teal'] .player-btn:hover,
[data-theme='luna-teal'] .player-btn-primary:hover {
  background: linear-gradient(180deg,
      #99bbff 0%,
      #5588ff 45%,
      #2264ee 50%,
      #1a52d0 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 3px 8px rgba(0, 0, 0, 0.40),
    0 0 10px rgba(80, 140, 255, 0.40);
}

/* ── Regular buttons: XP bevel style ── */
[data-theme='luna-teal'] .btn,
[data-theme='luna-teal'] .btn-surface,
[data-theme='luna-teal'] .btn-ghost {
  background: linear-gradient(180deg, #f5f3ec 0%, #ece9d8 48%, #ddd9c8 50%, #d0cdb8 100%);
  color: #000000;
  border: 1px solid #888480;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 1px 0 0 rgba(255, 255, 255, 0.70),
    0 1px 2px rgba(0, 0, 0, 0.20);
  border-radius: 3px;
}

[data-theme='luna-teal'] .btn:hover,
[data-theme='luna-teal'] .btn-surface:hover,
[data-theme='luna-teal'] .btn-ghost:hover {
  background: linear-gradient(180deg, #ffffff 0%, #f0ede0 48%, #e4e0d0 50%, #d8d4c4 100%);
  border-color: #0055e5;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 1px 3px rgba(0, 0, 0, 0.18);
}

/* ── Primary button: XP green gel ── */
[data-theme='luna-teal'] .btn-primary {
  background: linear-gradient(180deg,
      #66dd50 0%,
      #3c9d29 45%,
      #2e8020 50%,
      #1e6015 100%);
  color: #ffffff;
  border: 1px solid #1a5010;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 1px 3px rgba(0, 0, 0, 0.30);
  border-radius: 4px;
}

[data-theme='luna-teal'] .btn-primary:hover {
  background: linear-gradient(180deg,
      #80ee68 0%,
      #4db035 45%,
      #3a9028 50%,
      #2e8020 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.60),
    0 1px 4px rgba(0, 0, 0, 0.30),
    0 0 8px rgba(60, 157, 41, 0.40);
}

/* ── Hero / album-card play buttons ── */
[data-theme='luna-teal'] .hero-play-btn,
[data-theme='luna-teal'] .album-card-details-btn {
  background: linear-gradient(180deg, #f5f3ec 0%, #d0cdb8 100%);
  color: #000000;
  border: 1px solid #888480;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 2px rgba(0, 0, 0, 0.20);
}

[data-theme='luna-teal'] .hero-play-btn:hover,
[data-theme='luna-teal'] .album-card-details-btn:hover {
  background: linear-gradient(180deg, #ffffff 0%, #ddd9c8 100%);
  border-color: #0055e5;
}

/* ── Queue toolbar round buttons ── */
[data-theme='luna-teal'] .queue-round-btn {
  background: linear-gradient(180deg, #f5f3ec 0%, #d0cdb8 100%);
  color: #333333;
  border: 1px solid #888480;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.90), 0 1px 2px rgba(0, 0, 0, 0.18);
}

[data-theme='luna-teal'] .queue-round-btn:hover:not(:disabled):not(.active) {
  background: linear-gradient(180deg, #ffffff 0%, #e0ddd0 100%);
  border-color: #0055e5;
  color: #000000;
}

[data-theme='luna-teal'] .queue-round-btn.active {
  background: #316ac5;
  color: #ffffff;
  border-color: #0033aa;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.30), 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* ── Cards: XP white window interior ── */
[data-theme='luna-teal'] .card {
  background: #ffffff;
  border: 1px solid #aca899;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 1px 3px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

/* ── Content header: XP title bar gradient ── */
[data-theme='luna-teal'] .content-header {
  background: linear-gradient(180deg,
      #5a9aee 0%,
      #2a6ad4 25%,
      #1a56c4 50%,
      #0e48b8 75%,
      #0a3aaa 100%);
  border-bottom: 1px solid #0033aa;
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40), 0 2px 4px rgba(0, 0, 0, 0.18);
}

/* Connection indicators: white on blue header */
[data-theme='luna-teal'] .connection-type,
[data-theme='luna-teal'] .connection-server {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.50);
}

/* ── Theme accordion: XP selection blue ── */
[data-theme='luna-teal'] .theme-accordion-header:hover {
  background: #316ac5;
  color: #ffffff;
}

[data-theme='luna-teal'] .theme-accordion-open .theme-accordion-header {
  background: #316ac5;
  color: #ffffff;
}

[data-theme='luna-teal'] .theme-accordion-open .theme-accordion-chevron {
  color: #ffffff;
}

/* ── Progress bar: XP green ── */
[data-theme='luna-teal'] .progress-bar-track {
  background: #aca899;
  border-radius: 2px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

[data-theme='luna-teal'] .progress-bar-fill {
  background: linear-gradient(180deg, #52cc3c 0%, #3c9d29 50%, #2e8020 100%);
  border-radius: 2px;
}

/* ── Scrollbar: XP 16px system style ── */
[data-theme='luna-teal'] ::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

[data-theme='luna-teal'] ::-webkit-scrollbar-track {
  background: #ece9d8;
  border-left: 1px solid #aca899;
}

[data-theme='luna-teal'] ::-webkit-scrollbar-thumb {
  background: linear-gradient(to right, #c8c4b8 0%, #e0ddd0 40%, #c0bbb4 100%);
  border: 1px solid #888480;
  box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #888480;
  border-radius: 2px;
}

[data-theme='luna-teal'] ::-webkit-scrollbar-button {
  background: linear-gradient(180deg, #f0ede0 0%, #d8d4c4 100%);
  border: 1px solid #888480;
  box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #888480;
}

/* ── Glass / dropdowns: solid XP dialog style ── */
[data-theme='luna-teal'] .glass {
  background: #ffffff !important;
  backdrop-filter: none !important;
  border: 1px solid #aca899 !important;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.28) !important;
  border-radius: 4px !important;
}

[data-theme='luna-teal'] .glass [style*="var(--bg-hover)"] {
  background: #316ac5 !important;
  border-radius: 0 !important;
  color: #ffffff !important;
}

[data-theme='luna-teal'] .glass [style*="var(--text-primary)"] {
  color: #000000 !important;
}

[data-theme='luna-teal'] .glass [style*="var(--text-secondary)"] {
  color: #333333 !important;
}

[data-theme='luna-teal'] .glass [style*="var(--text-muted)"] {
  color: #555555 !important;
}

/* ── Hover / selection: XP classic blue ── */
[data-theme='luna-teal'] .queue-tab-btn:hover {
  background: #316ac5;
  color: #ffffff;
}

[data-theme='luna-teal'] .settings-tab:hover {
  background: #316ac5;
  color: #ffffff;
}

[data-theme='luna-teal'] .settings-tab.active {
  background: #316ac5;
  color: #ffffff;
}

[data-theme='luna-teal'] .custom-select-trigger:hover {
  background: #316ac5;
  color: #ffffff;
}

[data-theme='luna-teal'] .custom-select-option:hover {
  background: #316ac5 !important;
  color: #ffffff !important;
}

[data-theme='luna-teal'] .artist-ext-link:hover {
  background: #316ac5;
  color: #ffffff !important;
}

[data-theme='luna-teal'] .np-action-btn:hover {
  background: #316ac5;
  color: #ffffff;
}

[data-theme='luna-teal'] .np-queue-item:hover,
[data-theme='luna-teal'] .np-queue-item.context-active {
  background: #316ac5;
  color: #ffffff;
}

[data-theme='luna-teal'] .track-row:hover,
[data-theme='luna-teal'] .track-row.context-active {
  background: #316ac5 !important;
}

[data-theme='luna-teal'] .track-row:hover *,
[data-theme='luna-teal'] .track-row.context-active * {
  color: #ffffff !important;
}

[data-theme='luna-teal'] .artist-row:hover {
  background: #316ac5;
  color: #ffffff;
}

[data-theme='luna-teal'] .playlist-row:hover {
  background: #316ac5;
}

[data-theme='luna-teal'] .playlist-row:hover,
[data-theme='luna-teal'] .playlist-row:hover * {
  color: #ffffff;
}

[data-theme='luna-teal'] .queue-item:hover,
[data-theme='luna-teal'] .queue-item.context-active {
  background: #316ac5 !important;
}

[data-theme='luna-teal'] .queue-item:hover .queue-item-title,
[data-theme='luna-teal'] .queue-item:hover .queue-item-artist,
[data-theme='luna-teal'] .queue-item:hover .queue-item-duration,
[data-theme='luna-teal'] .queue-item.context-active .queue-item-title,
[data-theme='luna-teal'] .queue-item.context-active .queue-item-artist,
[data-theme='luna-teal'] .queue-item.context-active .queue-item-duration {
  color: #ffffff;
}

/* ── Active queue / now-playing items ── */
[data-theme='luna-teal'] .queue-item.active {
  background: rgba(49, 106, 197, 0.12);
  color: #0041b8;
}

[data-theme='luna-teal'] .queue-item.active .queue-item-artist,
[data-theme='luna-teal'] .queue-item.active .queue-item-duration {
  color: #0055e5;
  opacity: 0.85;
}

[data-theme='luna-teal'] .np-queue-item-active {
  color: #0041b8;
}

[data-theme='luna-teal'] .np-queue-item.active {
  background: rgba(49, 106, 197, 0.10);
}

[data-theme='luna-teal'] .np-album-track.active .np-album-track-title,
[data-theme='luna-teal'] .np-album-track.active .np-album-track-num {
  color: #0041b8;
}

/* ─── 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;
}

/* ─── 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;
}

/* ─── 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;
}

/* ─── 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;
}

/* ─── Equalizer bars animation ─── */
.eq-bar {
  display: inline-block;
  width: 3px;
  background: var(--accent);
  border-radius: 2px;
  transform-origin: bottom;
}

.eq-bar:nth-child(1) {
  animation: wave 0.8s ease-in-out 0.0s infinite;
}

.eq-bar:nth-child(2) {
  animation: wave 0.8s ease-in-out 0.15s infinite;
}

.eq-bar:nth-child(3) {
  animation: wave 0.8s ease-in-out 0.3s infinite;
}

.eq-bar:nth-child(4) {
  animation: wave 0.8s ease-in-out 0.45s infinite;
}

/* ─────────────────────────────────────────────────────────────
   Middle Earth — Epic Fantasy / Cinematic
   ───────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────
   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);
  }
}

/* ─── 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: #6a5230;
  --border: rgba(180, 140, 50, 0.38);
  --border-subtle: rgba(180, 140, 50, 0.18);
  --positive: #4a7038;
  --warning: #c88a10;
  --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: #6a5030;
  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: #7a5c30;
}

/* ── 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 */
[data-theme='middle-earth'] .connection-type,
[data-theme='middle-earth'] .connection-server {
  color: #5a4828;
}

/* ── 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: #8a7250 !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: #8a6838;
}

[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: #8a6840;
}

[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: #7a5a30;
}

/* Queue: "Nächste Titel" divider label */
[data-theme='middle-earth'] .queue-divider span {
  color: #a07840 !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;
}

/* ─────────────────────────────────────────────────────────────
   Morpheus — Matrix Style
   ───────────────────────────────────────────────────────────── */

/* ─── The Matrix — Morpheus ─── */
[data-theme='morpheus'] {
  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%2300ff41%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: #000000;
  --ctp-mantle: #020502;
  --ctp-base: #050905;
  --ctp-surface0: #0a120a;
  --ctp-surface1: #0f1c0f;
  --ctp-surface2: #162416;
  --ctp-overlay0: #003b00;
  --ctp-overlay1: #008f11;
  --ctp-overlay2: #00cc33;
  --ctp-text: #00ff41;
  --ctp-subtext1: #00cc33;
  --ctp-subtext0: #008f11;
  --ctp-mauve: #00ff41;
  --ctp-lavender: #adff2f;
  --ctp-green: #00ff41;
  --ctp-teal: #20c20e;
  --ctp-sky: #00ff41;
  --ctp-blue: #00ff41;
  --ctp-sapphire: #008f11;
  --ctp-pink: #003b00;
  --ctp-flamingo: #003b00;
  --ctp-rosewater: #d2ff00;
  --ctp-yellow: #adff2f;
  --ctp-peach: #00ff41;
  --ctp-maroon: #003b00;
  --ctp-red: #ff0033;

  /* ── Semantic tokens ── */
  --bg-app: #050905;
  --bg-sidebar: #000000;
  --bg-card: #0a120a;
  --bg-hover: rgba(0, 255, 65, 0.10);
  --bg-player: #000000;
  --bg-glass: rgba(0, 8, 0, 0.96);
  --accent: #00ff41;
  --accent-dim: rgba(0, 255, 65, 0.12);
  --accent-glow: rgba(0, 255, 65, 0.45);
  --volume-accent: #00ff41;
  --text-primary: #00ff41;
  --text-secondary: #00cc33;
  --text-muted: #22cc44;
  --border: #003b00;
  --border-subtle: #001a00;
  --positive: #00ff41;
  --warning: #adff2f;
  --danger: #ff0033;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 2px;
}

/* ── App shell: solid dark base (scanlines moved to sidebar for perf) ── */
[data-theme='morpheus'] .app-shell {
  background-color: #050905;
}

/* ── Sidebar: black with code-column ghost pattern ── */
[data-theme='morpheus'] .sidebar {
  background-color: #000000;
  background-image: repeating-linear-gradient(90deg, transparent 0px, transparent 19px,
      rgba(0, 255, 65, 0.03) 19px, rgba(0, 255, 65, 0.03) 20px);
  border-right: 1px solid #003b00;
}

/* Nav links */
[data-theme='morpheus'] .nav-link {
  color: #00cc33;
}

[data-theme='morpheus'] .nav-link:hover {
  background: rgba(0, 255, 65, 0.08);
  color: #00ff41;
  text-shadow: 0 0 8px rgba(0, 255, 65, 0.50);
}

[data-theme='morpheus'] .nav-link.active {
  background: rgba(0, 255, 65, 0.10);
  color: #00ff41;
  text-shadow: 0 0 6px rgba(0, 255, 65, 0.45);
}

[data-theme='morpheus'] .nav-link.active::before {
  background: #00ff41;
  box-shadow: 0 0 8px rgba(0, 255, 65, 0.70);
}

[data-theme='morpheus'] .nav-section-label {
  color: #003b00;
}

/* ── Player bar: black glass with phosphor glow ── */
[data-theme='morpheus'] .player-bar {
  background: #000000;
  border-top: 1px solid rgba(0, 255, 65, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(0, 255, 65, 0.12),
    0 -4px 24px rgba(0, 255, 65, 0.06);
}

/* Track info: phosphor CRT glow */
[data-theme='morpheus'] .player-track-name {
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  color: #00ff41;
  text-shadow: 0 0 10px rgba(0, 255, 65, 0.70), 0 0 20px rgba(0, 255, 65, 0.30);
  letter-spacing: 0.04em;
}

[data-theme='morpheus'] .player-track-artist,
[data-theme='morpheus'] .player-time {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  color: #00cc33;
  opacity: 0.85;
}

/* ── Transport buttons: terminal command style ── */
[data-theme='morpheus'] .player-btn,
[data-theme='morpheus'] .player-btn-primary {
  background: #000000;
  color: #00ff41;
  border: 1px solid #003b00;
  border-radius: 2px;
  box-shadow: inset 0 0 6px rgba(0, 255, 65, 0.05);
}

[data-theme='morpheus'] .player-btn:hover,
[data-theme='morpheus'] .player-btn-primary:hover {
  background: rgba(0, 255, 65, 0.08);
  border-color: #00ff41;
  box-shadow:
    0 0 12px rgba(0, 255, 65, 0.35),
    inset 0 0 8px rgba(0, 255, 65, 0.08);
  color: #00ff41;
}

/* ── All buttons: terminal style ── */
[data-theme='morpheus'] .btn,
[data-theme='morpheus'] .btn-surface,
[data-theme='morpheus'] .btn-ghost,
[data-theme='morpheus'] .btn-primary,
[data-theme='morpheus'] .hero-play-btn,
[data-theme='morpheus'] .album-card-details-btn,
[data-theme='morpheus'] .queue-round-btn {
  background: #000000;
  color: #00ff41;
  border: 1px solid #003b00;
  border-radius: 0;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  box-shadow: none;
}

[data-theme='morpheus'] .btn:hover,
[data-theme='morpheus'] .btn-surface:hover,
[data-theme='morpheus'] .btn-ghost:hover,
[data-theme='morpheus'] .btn-primary:hover,
[data-theme='morpheus'] .hero-play-btn:hover,
[data-theme='morpheus'] .album-card-details-btn:hover {
  background: rgba(0, 255, 65, 0.08);
  border-color: #00ff41;
  color: #00ff41;
  box-shadow: 0 0 10px rgba(0, 255, 65, 0.28), inset 0 0 8px rgba(0, 255, 65, 0.05);
}

[data-theme='morpheus'] .btn-primary {
  border-color: #00cc33;
  box-shadow: 0 0 8px rgba(0, 255, 65, 0.20);
}

[data-theme='morpheus'] .btn-primary:hover {
  border-color: #00ff41;
  box-shadow: 0 0 16px rgba(0, 255, 65, 0.45), inset 0 0 10px rgba(0, 255, 65, 0.08);
}

/* Queue round button active: bright green */
[data-theme='morpheus'] .queue-round-btn:hover:not(:disabled):not(.active) {
  background: rgba(0, 255, 65, 0.08);
  border-color: #00ff41;
  color: #00ff41;
  box-shadow: 0 0 10px rgba(0, 255, 65, 0.28);
}

[data-theme='morpheus'] .queue-round-btn.active {
  background: rgba(0, 255, 65, 0.15);
  border-color: #00ff41;
  color: #00ff41;
  box-shadow: 0 0 12px rgba(0, 255, 65, 0.40), inset 0 0 8px rgba(0, 255, 65, 0.08);
}

/* ── Cards: dark terminal panels ── */
[data-theme='morpheus'] .card {
  background: #0a120a;
  border: 1px solid #003b00;
  border-radius: 0;
  box-shadow: inset 0 0 24px rgba(0, 255, 65, 0.02), 0 0 12px rgba(0, 0, 0, 0.60);
}

/* ── Content header: terminal prompt bar ── */
[data-theme='morpheus'] .content-header {
  background: #000000;
  border-bottom: 1px solid rgba(0, 255, 65, 0.25);
  box-shadow: 0 2px 16px rgba(0, 255, 65, 0.04);
}

/* ── Theme accordion: terminal hover ── */
[data-theme='morpheus'] .theme-accordion-header:hover {
  background: rgba(0, 255, 65, 0.08);
  color: #00ff41;
  text-shadow: 0 0 6px rgba(0, 255, 65, 0.40);
}

[data-theme='morpheus'] .theme-accordion-open .theme-accordion-header {
  background: rgba(0, 255, 65, 0.10);
  color: #00ff41;
}

[data-theme='morpheus'] .theme-accordion-open .theme-accordion-chevron {
  color: #00ff41;
}

/* ── Progress bar: terminal loading bar ── */
[data-theme='morpheus'] .progress-bar-track {
  background: #001a00;
  border: 1px solid #003b00;
  border-radius: 0;
}

[data-theme='morpheus'] .progress-bar-fill {
  background: #00ff41;
  border-radius: 0;
  box-shadow: 0 0 8px rgba(0, 255, 65, 0.60), 0 0 2px rgba(0, 255, 65, 1);
}

/* ── Scrollbar: CRT terminal style ── */
[data-theme='morpheus'] ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

[data-theme='morpheus'] ::-webkit-scrollbar-track {
  background: #000000;
}

[data-theme='morpheus'] ::-webkit-scrollbar-thumb {
  background: #003b00;
  border: 1px solid rgba(0, 255, 65, 0.30);
}

[data-theme='morpheus'] ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 255, 65, 0.25);
  box-shadow: 0 0 6px rgba(0, 255, 65, 0.40);
}

/* ── Glass / dropdowns: black terminal window ── */
[data-theme='morpheus'] .glass {
  background: rgba(0, 8, 0, 0.97) !important;
  backdrop-filter: none !important;
  border: 1px solid rgba(0, 255, 65, 0.28) !important;
  box-shadow:
    0 0 20px rgba(0, 255, 65, 0.08),
    inset 0 0 16px rgba(0, 255, 65, 0.02) !important;
  border-radius: 0 !important;
}

[data-theme='morpheus'] .glass [style*="var(--bg-hover)"] {
  background: rgba(0, 255, 65, 0.10) !important;
  border-radius: 0 !important;
}

[data-theme='morpheus'] .glass [style*="var(--text-primary)"] {
  color: #00ff41 !important;
}

[data-theme='morpheus'] .glass [style*="var(--text-secondary)"] {
  color: #00cc33 !important;
}

[data-theme='morpheus'] .glass [style*="var(--text-muted)"] {
  color: #006b10 !important;
}

/* ── Hover / selection: phosphor glow highlight ── */
[data-theme='morpheus'] .queue-tab-btn:hover {
  background: rgba(0, 255, 65, 0.08);
  color: #00ff41;
  text-shadow: 0 0 6px rgba(0, 255, 65, 0.40);
}

[data-theme='morpheus'] .settings-tab:hover {
  background: rgba(0, 255, 65, 0.08);
  color: #00ff41;
}

[data-theme='morpheus'] .settings-tab.active {
  background: rgba(0, 255, 65, 0.12);
  color: #00ff41;
  box-shadow: inset 2px 0 0 #00ff41;
}

[data-theme='morpheus'] .custom-select-trigger:hover {
  background: rgba(0, 255, 65, 0.08);
}

[data-theme='morpheus'] .custom-select-option:hover {
  background: rgba(0, 255, 65, 0.12) !important;
  color: #00ff41 !important;
  text-shadow: 0 0 6px rgba(0, 255, 65, 0.40) !important;
}

[data-theme='morpheus'] .artist-ext-link:hover {
  background: rgba(0, 255, 65, 0.10);
  color: #00ff41 !important;
  border-color: #00ff41 !important;
  text-shadow: 0 0 6px rgba(0, 255, 65, 0.40);
}

[data-theme='morpheus'] .np-action-btn:hover {
  background: rgba(0, 255, 65, 0.08);
}

[data-theme='morpheus'] .np-queue-item:hover,
[data-theme='morpheus'] .np-queue-item.context-active {
  background: rgba(0, 255, 65, 0.10);
  box-shadow: inset 2px 0 0 #00ff41;
}

[data-theme='morpheus'] .track-row:hover,
[data-theme='morpheus'] .track-row.context-active {
  background: rgba(0, 255, 65, 0.08) !important;
  box-shadow: inset 2px 0 0 #00ff41;
}

[data-theme='morpheus'] .artist-row:hover {
  background: rgba(0, 255, 65, 0.08);
  box-shadow: inset 2px 0 0 #00ff41;
}

[data-theme='morpheus'] .playlist-row:hover {
  background: rgba(0, 255, 65, 0.08);
  box-shadow: inset 2px 0 0 #00ff41;
}

[data-theme='morpheus'] .queue-item:hover,
[data-theme='morpheus'] .queue-item.context-active {
  background: rgba(0, 255, 65, 0.10) !important;
  box-shadow: inset 2px 0 0 #00ff41;
}

/* ── Active queue item: glowing green ── */
[data-theme='morpheus'] .queue-item.active {
  background: rgba(0, 255, 65, 0.08);
  box-shadow: inset 2px 0 0 #00ff41, 0 0 8px rgba(0, 255, 65, 0.06);
}

[data-theme='morpheus'] .np-queue-item-active {
  text-shadow: 0 0 8px rgba(0, 255, 65, 0.60);
}

[data-theme='morpheus'] .np-queue-item.active {
  background: rgba(0, 255, 65, 0.08);
}

[data-theme='morpheus'] .np-album-track.active .np-album-track-title,
[data-theme='morpheus'] .np-album-track.active .np-album-track-num {
  text-shadow: 0 0 8px rgba(0, 255, 65, 0.60);
}

/* ─────────────────────────────────────────────────────────────
   Pandora — Bioluminescent Sci-Fi
   ───────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────
   Stark HUD — Iron Man / Arc Reactor
   ───────────────────────────────────────────────────────────── */

[data-theme='stark-hud'] {
  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: #05070a;
  --ctp-mantle: #080c12;
  --ctp-base: #0b0f15;
  --ctp-surface0: #141b24;
  --ctp-surface1: #1c2531;
  --ctp-surface2: #253141;
  --ctp-overlay0: #4a5d75;
  --ctp-overlay1: #6a8099;
  --ctp-overlay2: #8ba2bd;
  --ctp-text: #e0f7fa;
  --ctp-subtext1: #a3ced4;
  --ctp-subtext0: #7da5aa;
  --ctp-mauve: #00f2ff;
  --ctp-lavender: #7df9ff;
  --ctp-green: #00ff9d;
  --ctp-teal: #00d4cc;
  --ctp-sky: #00f2ff;
  --ctp-blue: #00f2ff;
  --ctp-sapphire: #0088cc;
  --ctp-pink: #ff3399;
  --ctp-flamingo: #ff6680;
  --ctp-rosewater: #ffe0e6;
  --ctp-yellow: #ffcc00;
  --ctp-peach: #ff8800;
  --ctp-maroon: #cc0022;
  --ctp-red: #ff3333;

  --bg-app: #0b0f15;
  --bg-sidebar: #080c12;
  --bg-card: #141b24;
  --bg-hover: rgba(0, 242, 255, 0.08);
  --bg-player: #05070a;
  --bg-glass: rgba(11, 15, 21, 0.85);

  --accent: #00f2ff;
  --accent-dim: rgba(0, 242, 255, 0.12);
  --accent-glow: rgba(0, 242, 255, 0.4);

  --text-primary: #e0f7fa;
  --text-secondary: #a3ced4;
  --text-muted: #5a718a;

  --border: #1e2a3a;
  --border-subtle: #141b24;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
}

[data-theme='stark-hud'] .app-shell {
  background: radial-gradient(circle at 50% 50%, #0e1621 0%, #05070a 100%);
}

[data-theme='stark-hud'] .sidebar {
  border-right: 1px solid rgba(0, 242, 255, 0.15);
}

[data-theme='stark-hud'] .player-bar {
  border-top: 1px solid rgba(0, 242, 255, 0.2);
  box-shadow: 0 -10px 30px rgba(0, 242, 255, 0.05);
}

[data-theme='stark-hud'] .player-track-name {
  color: #00f2ff;
  text-shadow: 0 0 10px rgba(0, 242, 255, 0.6);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.5px;
}

[data-theme='stark-hud'] .nav-link.active {
  background: linear-gradient(90deg, rgba(0, 242, 255, 0.1) 0%, transparent 100%);
  box-shadow: -5px 0 15px rgba(0, 242, 255, 0.2);
}

[data-theme='stark-hud'] .nav-link.active::before {
  box-shadow: 0 0 10px rgba(0, 242, 255, 0.5);
}

[data-theme='stark-hud'] .btn-primary {
  background: #00f2ff;
  color: #05070a;
  font-weight: 700;
  box-shadow: 0 0 15px rgba(0, 242, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ─────────────────────────────────────────────────────────────
   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;
}

/* ─── Dune — Arrakis ─── */
[data-theme='dune'] {
  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%23c8780a%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 — two-temperature Arrakis ── */
  /* Warm: spice / sand / desert sun */
  --ctp-crust: #0a0804;
  --ctp-mantle: #120e06;
  --ctp-base: #1c1408;
  --ctp-surface0: #2e1e0a;
  --ctp-surface1: #3e2a0e;
  --ctp-surface2: #503614;
  /* Cool: sietch / rock shadow / Fremen darkness */
  --ctp-overlay0: #2a2440;
  --ctp-overlay1: #4a4268;
  --ctp-overlay2: #6a6090;
  /* Text: aged parchment, scrolls of the Bene Gesserit */
  --ctp-text: #f0deb0;
  --ctp-subtext1: #d8c090;
  --ctp-subtext0: #b09060;
  /* Accent palette */
  --ctp-mauve: #c8780a;
  /* spice melange — cinnamon rust */
  --ctp-lavender: #e8a020;
  /* spice shimmer — bright amber */
  --ctp-yellow: #f5cc50;
  /* spice flare */
  --ctp-peach: #aa5a08;
  /* deep spice shadow */
  --ctp-green: #7a8c40;
  /* Caladan seagrass (far memory) */
  --ctp-teal: #1a80c0;
  /* Fremen eye blue — spice prescience */
  --ctp-sky: #2090d0;
  /* Guild Navigator blue */
  --ctp-blue: #1468a8;
  /* sietch pool depth */
  --ctp-sapphire: #0e4a80;
  /* deep cave water */
  --ctp-pink: #c84060;
  --ctp-flamingo: #e06080;
  --ctp-rosewater: #f0c0a0;
  --ctp-red: #cc2800;
  --ctp-maroon: #8c1c00;

  /* ── Semantic tokens ── */
  --bg-app: #1c1408;
  --bg-sidebar: #0e0c1a;
  /* sietch interior — cool rock */
  --bg-card: #2e1e0a;
  --bg-hover: rgba(200, 120, 10, 0.14);
  --bg-player: #0e0a04;
  --bg-glass: rgba(10, 8, 4, 0.96);
  --accent: #c8780a;
  --accent-dim: rgba(200, 120, 10, 0.12);
  --accent-glow: rgba(200, 120, 10, 0.40);
  --volume-accent: #c8780a;
  --text-primary: #f0deb0;
  --text-secondary: #d8c090;
  --text-muted: #a89870;
  --border: rgba(200, 120, 10, 0.22);
  --border-subtle: rgba(200, 120, 10, 0.10);
  --positive: #7a8c40;
  --warning: #f5cc50;
  --danger: #cc2800;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
}

/* ── App shell: Arrakis desert horizon at dusk ── */
/* Sky (cool/dark at top) fading into burning sand (warm at bottom) */
[data-theme='dune'] .app-shell {
  background: linear-gradient(180deg,
      #12101c 0%,
      #1a1408 30%,
      #201608 60%,
      #281e0a 100%);
}

/* ── Sidebar: sietch interior — cold carved rock ── */
/* The Fremen lived in caves cut from rock — cool, dark, shadows of blue and purple */
[data-theme='dune'] .sidebar {
  background: linear-gradient(180deg, #141228 0%, #0e0c1c 40%, #0c0a16 100%);
  border-right: 1px solid rgba(200, 120, 10, 0.22);
  box-shadow:
    inset -3px 0 10px rgba(200, 100, 8, 0.07),
    2px 0 8px rgba(0, 0, 0, 0.50);
}

/* Nav text: parchment on cool rock */
[data-theme='dune'] .nav-link {
  color: #b09060;
}

[data-theme='dune'] .nav-link:hover {
  background: rgba(200, 120, 10, 0.10);
  color: #d8c090;
}

[data-theme='dune'] .nav-link.active {
  background: linear-gradient(90deg, rgba(200, 120, 10, 0.20) 0%, transparent 100%);
  color: #e8a020;
  border-left: 2px solid #c8780a;
  box-shadow: inset 4px 0 14px rgba(200, 120, 10, 0.10);
}

[data-theme='dune'] .nav-link.active::before {
  background: #c8780a;
  box-shadow: 0 0 10px rgba(200, 120, 10, 0.70);
}

[data-theme='dune'] .nav-link.active svg {
  color: #c8780a;
}

[data-theme='dune'] .nav-section-label {
  color: #4a4268;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.70em;
}

/* ── Player bar: spice harvester console — deep amber warmth ── */
[data-theme='dune'] .player-bar {
  background: linear-gradient(180deg, #140e04 0%, #0a0802 100%);
  border-top: 2px solid rgba(200, 120, 10, 0.50);
  box-shadow:
    inset 0 1px 0 rgba(240, 180, 40, 0.16),
    0 -8px 40px rgba(180, 100, 8, 0.16),
    0 -2px 80px rgba(20, 100, 160, 0.04);
}

/* Track name: the spice calls — amber prophetic glow */
[data-theme='dune'] .player-track-name {
  color: #e8a020;
  text-shadow:
    0 0 8px rgba(232, 160, 32, 0.75),
    0 0 20px rgba(200, 120, 10, 0.40),
    0 0 40px rgba(200, 120, 10, 0.15);
  letter-spacing: 0.04em;
}

/* Artist: deeper spice cinnamon */
[data-theme='dune'] .player-track-artist {
  color: #aa7030;
  opacity: 1;
  text-shadow: 0 0 8px rgba(170, 112, 48, 0.45);
}

[data-theme='dune'] .player-time {
  color: #7a5020;
}

/* ── Transport buttons: Fremen tech — minimal, earth-worn ── */
[data-theme='dune'] .player-btn,
[data-theme='dune'] .player-btn-primary {
  background: linear-gradient(180deg, #2e1e0a 0%, #1e1406 100%);
  color: #c8780a;
  border: 1px solid rgba(200, 120, 10, 0.38);
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(240, 180, 40, 0.08), 0 2px 6px rgba(0, 0, 0, 0.50);
}

[data-theme='dune'] .player-btn:hover,
[data-theme='dune'] .player-btn-primary:hover {
  background: rgba(200, 120, 10, 0.14);
  border-color: #c8780a;
  color: #e8a020;
  box-shadow:
    0 0 14px rgba(200, 120, 10, 0.42),
    inset 0 0 8px rgba(200, 100, 8, 0.08);
}

/* ── Regular buttons: desert stone / carved bone ── */
[data-theme='dune'] .btn,
[data-theme='dune'] .btn-surface,
[data-theme='dune'] .btn-ghost {
  background: linear-gradient(180deg, #2e1e0a 0%, #221608 100%);
  color: #d8c090;
  border: 1px solid rgba(200, 120, 10, 0.30);
  box-shadow: inset 0 1px 0 rgba(240, 200, 80, 0.06), 0 1px 4px rgba(0, 0, 0, 0.40);
  border-radius: 3px;
}

[data-theme='dune'] .btn:hover,
[data-theme='dune'] .btn-surface:hover,
[data-theme='dune'] .btn-ghost:hover {
  background: rgba(200, 120, 10, 0.12);
  border-color: rgba(200, 120, 10, 0.65);
  color: #f0deb0;
  box-shadow: 0 0 10px rgba(200, 120, 10, 0.24), inset 0 0 6px rgba(200, 100, 8, 0.05);
}

/* ── Primary button: spice melange — the most precious thing ── */
[data-theme='dune'] .btn-primary {
  background: linear-gradient(180deg, #b86808 0%, #884e04 100%);
  color: #ffe8a0;
  border: 1px solid #d08010;
  box-shadow: 0 0 14px rgba(200, 120, 10, 0.35), inset 0 1px 0 rgba(255, 220, 80, 0.20);
  border-radius: 3px;
  font-weight: 600;
}

[data-theme='dune'] .btn-primary:hover {
  background: linear-gradient(180deg, #d07a10 0%, #a05e06 100%);
  box-shadow: 0 0 22px rgba(200, 120, 10, 0.55), inset 0 1px 0 rgba(255, 220, 80, 0.25);
}

/* ── Hero / album buttons ── */
[data-theme='dune'] .hero-play-btn,
[data-theme='dune'] .album-card-details-btn {
  background: rgba(200, 120, 10, 0.12);
  color: #c8780a;
  border: 1px solid rgba(200, 120, 10, 0.36);
  box-shadow: inset 0 1px 0 rgba(240, 180, 40, 0.06);
}

[data-theme='dune'] .hero-play-btn:hover,
[data-theme='dune'] .album-card-details-btn:hover {
  background: rgba(200, 120, 10, 0.20);
  border-color: #c8780a;
  box-shadow: 0 0 12px rgba(200, 120, 10, 0.38);
}

/* ── Queue round buttons ── */
[data-theme='dune'] .queue-round-btn {
  background: linear-gradient(180deg, #2e1e0a 0%, #1e1406 100%);
  color: #8a6030;
  border: 1px solid rgba(200, 120, 10, 0.24);
}

[data-theme='dune'] .queue-round-btn:hover:not(:disabled):not(.active) {
  background: rgba(200, 120, 10, 0.10);
  border-color: rgba(200, 120, 10, 0.55);
  color: #c8780a;
  box-shadow: 0 0 10px rgba(200, 120, 10, 0.22);
}

[data-theme='dune'] .queue-round-btn.active {
  background: rgba(200, 120, 10, 0.20);
  border-color: #c8780a;
  color: #e8a020;
  box-shadow: 0 0 12px rgba(200, 120, 10, 0.42), inset 0 0 6px rgba(200, 100, 8, 0.08);
}

/* ── Cards: ancient stone / sand-worn rock ── */
[data-theme='dune'] .card {
  background: linear-gradient(180deg, #2e1e0a 0%, #281808 100%);
  border: 1px solid rgba(200, 120, 10, 0.16);
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(240, 200, 80, 0.04),
    inset 0 0 24px rgba(200, 100, 8, 0.03),
    0 2px 10px rgba(0, 0, 0, 0.50);
}

/* ── Content header: sietch entrance — cool rock above warm desert ── */
/* The contrast between the cold header and warm body is intentional — Arrakis duality */
[data-theme='dune'] .content-header {
  background: linear-gradient(180deg, #151228 0%, #12101e 100%);
  border-bottom: 1px solid rgba(200, 120, 10, 0.24);
  box-shadow: 0 3px 16px rgba(200, 100, 8, 0.06);
}

/* Text on cool header: light but warm */
[data-theme='dune'] .content-header .page-title,
[data-theme='dune'] .content-header h1,
[data-theme='dune'] .content-header h2 {
  color: #d8c090;
}

/* ── Connection indicators: parchment legible ── */
[data-theme='dune'] .connection-type,
[data-theme='dune'] .connection-server {
  color: #b09060;
}

/* ── Theme accordion ── */
[data-theme='dune'] .theme-accordion-header:hover {
  background: rgba(200, 120, 10, 0.10);
  color: #e8a020;
}

[data-theme='dune'] .theme-accordion-open .theme-accordion-header {
  background: rgba(200, 120, 10, 0.14);
  color: #e8a020;
}

[data-theme='dune'] .theme-accordion-open .theme-accordion-chevron {
  color: #c8780a;
}

/* ── Progress bar: spice flowing — from deep rust to bright amber ── */
[data-theme='dune'] .progress-bar-track {
  background: #1a1006;
  border: 1px solid rgba(200, 120, 10, 0.22);
  border-radius: 2px;
}

[data-theme='dune'] .progress-bar-fill {
  background: linear-gradient(90deg,
      #6a3604 0%,
      #a85a08 30%,
      #c8780a 65%,
      #e8a020 85%,
      #f5cc50 100%);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(200, 120, 10, 0.55), 0 0 3px rgba(240, 200, 60, 0.40);
}

/* ── Scrollbar: sand grain — thin, warm, minimal ── */
[data-theme='dune'] ::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

[data-theme='dune'] ::-webkit-scrollbar-track {
  background: #0a0804;
}

[data-theme='dune'] ::-webkit-scrollbar-thumb {
  background: rgba(200, 120, 10, 0.30);
  border-radius: 2px;
  border: 1px solid rgba(200, 120, 10, 0.16);
}

[data-theme='dune'] ::-webkit-scrollbar-thumb:hover {
  background: rgba(200, 120, 10, 0.55);
  box-shadow: 0 0 5px rgba(200, 120, 10, 0.40);
}

/* ── Glass / dropdowns: deep sand shelter ── */
[data-theme='dune'] .glass {
  background: rgba(10, 8, 4, 0.97) !important;
  backdrop-filter: none !important;
  border: 1px solid rgba(200, 120, 10, 0.30) !important;
  box-shadow:
    0 0 20px rgba(180, 100, 8, 0.10),
    inset 0 0 16px rgba(200, 100, 8, 0.02) !important;
  border-radius: 4px !important;
}

[data-theme='dune'] .glass [style*="var(--bg-hover)"] {
  background: rgba(200, 120, 10, 0.12) !important;
  border-radius: 2px !important;
}

[data-theme='dune'] .glass [style*="var(--text-primary)"] {
  color: #f0deb0 !important;
}

[data-theme='dune'] .glass [style*="var(--text-secondary)"] {
  color: #d8c090 !important;
}

[data-theme='dune'] .glass [style*="var(--text-muted)"] {
  color: #6a5830 !important;
}

/* ── Hover / selection: spice glow — warm amber indicator bar ── */
[data-theme='dune'] .queue-tab-btn:hover {
  background: rgba(200, 120, 10, 0.10);
  color: #c8780a;
}

[data-theme='dune'] .settings-tab:hover {
  background: rgba(200, 120, 10, 0.10);
  color: #c8780a;
}

[data-theme='dune'] .settings-tab.active {
  background: rgba(200, 120, 10, 0.16);
  color: #e8a020;
  box-shadow: inset 2px 0 0 #c8780a;
}

[data-theme='dune'] .custom-select-trigger:hover {
  background: rgba(200, 120, 10, 0.10);
}

[data-theme='dune'] .custom-select-option:hover {
  background: rgba(200, 120, 10, 0.14) !important;
  color: #e8a020 !important;
}

[data-theme='dune'] .artist-ext-link:hover {
  background: rgba(200, 120, 10, 0.10);
  color: #c8780a !important;
  border-color: rgba(200, 120, 10, 0.45) !important;
}

[data-theme='dune'] .np-action-btn:hover {
  background: rgba(200, 120, 10, 0.10);
}

[data-theme='dune'] .np-queue-item:hover,
[data-theme='dune'] .np-queue-item.context-active {
  background: rgba(200, 120, 10, 0.12);
  box-shadow: inset 2px 0 0 #c8780a;
}

[data-theme='dune'] .track-row:hover,
[data-theme='dune'] .track-row.context-active {
  background: rgba(200, 120, 10, 0.09) !important;
  box-shadow: inset 2px 0 0 #c8780a;
}

[data-theme='dune'] .artist-row:hover {
  background: rgba(200, 120, 10, 0.09);
  box-shadow: inset 2px 0 0 #c8780a;
}

[data-theme='dune'] .playlist-row:hover {
  background: rgba(200, 120, 10, 0.09);
  box-shadow: inset 2px 0 0 #c8780a;
}

[data-theme='dune'] .queue-item:hover,
[data-theme='dune'] .queue-item.context-active {
  background: rgba(200, 120, 10, 0.10) !important;
  box-shadow: inset 2px 0 0 #c8780a;
}

[data-theme='dune'] .queue-item:hover .queue-item-title,
[data-theme='dune'] .queue-item:hover .queue-item-artist,
[data-theme='dune'] .queue-item:hover .queue-item-duration,
[data-theme='dune'] .queue-item.context-active .queue-item-title,
[data-theme='dune'] .queue-item.context-active .queue-item-artist,
[data-theme='dune'] .queue-item.context-active .queue-item-duration {
  color: #c8780a;
}

/* ── Active queue / now-playing: the worm has come ── */
[data-theme='dune'] .queue-item.active {
  background: rgba(200, 120, 10, 0.08);
  box-shadow: inset 2px 0 0 #c8780a;
}

[data-theme='dune'] .np-queue-item-active {
  color: #c8780a;
  text-shadow: 0 0 8px rgba(200, 120, 10, 0.55);
}

[data-theme='dune'] .np-queue-item.active {
  background: rgba(200, 120, 10, 0.08);
}

[data-theme='dune'] .np-album-track.active .np-album-track-title,
[data-theme='dune'] .np-album-track.active .np-album-track-num {
  color: #c8780a;
  text-shadow: 0 0 8px rgba(200, 120, 10, 0.50);
}

/* ── TetraStack (Games) — 7-tetromino NES Tetris ─────────────── */
/* I=cyan  O=yellow  T=purple  S=green  Z=red  J=blue  L=orange  */
[data-theme='tetrastack'] {
  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%2300f0f0%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");

  /* Dark navy — NES Tetris backdrop, not pure black */
  --ctp-crust: #000008;
  --ctp-mantle: #00000e;
  --ctp-base: #060614;
  --ctp-surface0: #0d0d22;
  --ctp-surface1: #141432;
  --ctp-surface2: #1e1e48;
  --ctp-overlay0: #3a3a6a;
  --ctp-overlay1: #6060a8;
  --ctp-overlay2: #9090cc;
  --ctp-text: #ffffff;
  --ctp-subtext1: #d0d0ff;
  --ctp-subtext0: #9090cc;

  /* 7 Tetromino colours mapped to palette slots */
  --ctp-sky: #00f0f0;
  /* I-piece  — cyan   */
  --ctp-teal: #00f0f0;
  --ctp-yellow: #f0d000;
  /* O-piece  — yellow */
  --ctp-mauve: #c070ff;
  /* T-piece  — purple */
  --ctp-lavender: #c070ff;
  --ctp-pink: #c070ff;
  --ctp-green: #00d000;
  /* S-piece  — green  */
  --ctp-red: #f02000;
  /* Z-piece  — red    */
  --ctp-flamingo: #f02000;
  --ctp-maroon: #f02000;
  --ctp-blue: #4090ff;
  /* J-piece  — blue   */
  --ctp-sapphire: #4090ff;
  --ctp-peach: #f07800;
  /* L-piece  — orange */
  --ctp-rosewater: #f07800;

  --bg-app: #060614;
  --bg-sidebar: #00000e;
  --bg-card: #0d0d22;
  --bg-hover: rgba(0, 240, 240, 0.07);
  --bg-player: #000008;
  --bg-glass: rgba(6, 6, 20, 0.96);

  --accent: #00f0f0;
  /* I-piece cyan */
  --accent-dim: rgba(0, 240, 240, 0.12);
  --accent-glow: rgba(0, 240, 240, 0.5);
  --volume-accent: #f0d000;
  /* O-piece yellow — classic score-panel feel */

  --text-primary: #ffffff;
  --text-secondary: #f0d000;
  /* O-piece yellow — like the score readout */
  --text-muted: #7878b8;
  --border: #1e1e48;
  --border-subtle: #0d0d22;

  /* All corners square — every element is a block */
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
}

/* 30 px grid — Tetris block scale */
[data-theme='tetrastack'] .app-shell {
  background-image:
    linear-gradient(rgba(0, 240, 240, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 240, 0.04) 1px, transparent 1px);
  background-size: 30px 30px;
}

/* Sidebar = the score/next-piece panel */
[data-theme='tetrastack'] .sidebar {
  border-right: 3px solid #00f0f0;
}

/* Player bar = bottom of the well */
[data-theme='tetrastack'] .player-bar {
  border-top: 3px solid #00f0f0;
  box-shadow:
    0 -2px 0 #c070ff,
    0 -8px 24px rgba(0, 240, 240, 0.12);
}

/* NES block shading on cards — lighter top-left, darker bottom-right */
[data-theme='tetrastack'] .card,
[data-theme='tetrastack'] .glass,
[data-theme='tetrastack'] .settings-card {
  border: 1px solid #1e1e48 !important;
  border-radius: 0 !important;
  box-shadow:
    inset -3px -3px 0 rgba(0, 0, 0, 0.55),
    inset 3px 3px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Buttons: block-shaped, NES-style press effect */
[data-theme='tetrastack'] .btn-primary {
  background: #00f0f0;
  color: #000000;
  border: none;
  border-radius: 0;
  box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.5), inset 3px 3px 0 rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.08em;
}

[data-theme='tetrastack'] .btn-primary:hover {
  background: #30ffff;
  box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.4), inset 3px 3px 0 rgba(255, 255, 255, 0.45);
}

[data-theme='tetrastack'] .btn-surface {
  border-radius: 0;
  box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.5), inset 2px 2px 0 rgba(255, 255, 255, 0.06);
}

/* Track name = I-piece glow */
[data-theme='tetrastack'] .player-track-name {
  color: #00f0f0;
  text-shadow: 0 0 8px rgba(0, 240, 240, 0.7), 0 0 20px rgba(0, 240, 240, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Artist name = L-piece orange */
[data-theme='tetrastack'] .player-track-artist {
  color: #f07800;
}

/* Album title in queue = T-piece purple */
[data-theme='tetrastack'] .queue-meta-album {
  color: #c070ff;
}

/* Active queue item = I-piece left border */
[data-theme='tetrastack'] .queue-item.active {
  background: rgba(0, 240, 240, 0.07);
  box-shadow: inset 3px 0 0 #00f0f0;
}

[data-theme='tetrastack'] .np-queue-item-active {
  color: #00f0f0;
  text-shadow: 0 0 8px rgba(0, 240, 240, 0.6);
}

[data-theme='tetrastack'] .np-queue-item.active {
  background: rgba(0, 240, 240, 0.07);
}

/* Hover rows: subtle block highlight */
[data-theme='tetrastack'] .track-row:hover,
[data-theme='tetrastack'] .track-row.context-active {
  background: rgba(0, 240, 240, 0.06) !important;
  box-shadow: inset 3px 0 0 #00f0f0;
}

[data-theme='tetrastack'] .queue-item:hover,
[data-theme='tetrastack'] .queue-item.context-active {
  background: rgba(0, 240, 240, 0.07) !important;
  box-shadow: inset 3px 0 0 #00f0f0;
}

[data-theme='tetrastack'] .np-queue-item:hover,
[data-theme='tetrastack'] .np-queue-item.context-active {
  background: rgba(0, 240, 240, 0.07);
  box-shadow: inset 2px 0 0 #00f0f0;
}

[data-theme='tetrastack'] .artist-row:hover {
  background: rgba(0, 240, 240, 0.06);
  box-shadow: inset 3px 0 0 #00f0f0;
}

[data-theme='tetrastack'] .playlist-row:hover {
  background: rgba(0, 240, 240, 0.06);
  box-shadow: inset 3px 0 0 #00f0f0;
}

/* Settings tabs: active = S-piece green left border */
[data-theme='tetrastack'] .settings-tab:hover {
  background: rgba(0, 240, 240, 0.06);
  color: #00f0f0;
}

[data-theme='tetrastack'] .settings-tab.active {
  background: rgba(0, 208, 0, 0.08);
  color: #00d000;
  box-shadow: inset 3px 0 0 #00d000;
}

/* Queue tabs */
[data-theme='tetrastack'] .queue-tab-btn:hover {
  background: rgba(0, 240, 240, 0.06);
  color: #00f0f0;
}

/* Dropdowns / selects */
[data-theme='tetrastack'] .custom-select-trigger:hover {
  background: rgba(0, 240, 240, 0.06);
}

[data-theme='tetrastack'] .custom-select-option:hover {
  background: rgba(0, 240, 240, 0.1) !important;
  color: #00f0f0 !important;
}

/* Artist pill links = J-piece blue */
[data-theme='tetrastack'] .artist-ext-link:hover {
  background: rgba(0, 96, 240, 0.1);
  color: #4090ff !important;
  border-color: rgba(64, 144, 255, 0.4) !important;
}

/* Now playing active track = Z-piece red accent */
[data-theme='tetrastack'] .np-album-track.active .np-album-track-title,
[data-theme='tetrastack'] .np-album-track.active .np-album-track-num {
  color: #f02000;
  text-shadow: 0 0 8px rgba(240, 32, 0, 0.5);
}

/* Connection indicators */
[data-theme='tetrastack'] .connection-type,
[data-theme='tetrastack'] .connection-server {
  color: #f0d000;
}

/* Sidebar section labels */
[data-theme='tetrastack'] .nav-section-label {
  color: rgba(0, 240, 240, 0.45);
}

/* Queue tab buttons (Lyrics / Warteschlange) — inactive */
[data-theme='tetrastack'] .queue-tab-btn {
  color: #6060a8;
}

/* Queue: inactive song artist */
[data-theme='tetrastack'] .queue-item-artist {
  color: #6060a8;
}

/* Queue: "Nächste Titel" divider */
[data-theme='tetrastack'] .queue-divider span {
  color: #6060a8 !important;
}

/* ── The Book (Social Media) ────────────────────────────────── */
[data-theme='the-book'] {
  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%2365676B%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: #FFFFFF;
  --ctp-mantle: #FFFFFF;
  --ctp-base: #F0F2F5;
  --ctp-surface0: #E4E6EB;
  --ctp-surface1: #D8DADF;
  --ctp-surface2: #CED0D4;
  --ctp-overlay0: #B0B3B8;
  --ctp-overlay1: #4B4C4F;
  --ctp-overlay2: #3A3B3D;
  --ctp-text: #050505;
  --ctp-subtext1: #44464A;
  --ctp-subtext0: #65676B;

  --ctp-mauve: #1877F2;
  --ctp-lavender: #2D88FF;
  --ctp-green: #42B72A;
  --ctp-yellow: #F7B125;
  --ctp-red: #FA383E;
  --ctp-blue: #1877F2;
  --ctp-teal: #00A400;
  --ctp-sky: #45BD62;
  --ctp-sapphire: #0064D1;
  --ctp-pink: #F33E58;
  --ctp-flamingo: #F33E58;
  --ctp-rosewater: #F0F2F5;
  --ctp-maroon: #B12425;
  --ctp-peach: #F7B125;

  --bg-app: #F0F2F5;
  --bg-sidebar: #1877F2;
  --bg-card: #FFFFFF;
  --bg-hover: #F2F2F2;
  --bg-player: #FFFFFF;
  --bg-glass: rgba(255, 255, 255, 0.9);

  --accent: #1877F2;
  --accent-dim: rgba(24, 119, 242, 0.1);
  --accent-glow: rgba(24, 119, 242, 0.2);
  --volume-accent: #1877F2;

  --text-primary: #050505;
  --text-secondary: #44464A;
  --text-muted: #65676B;
  --border: #CED0D4;
  --border-subtle: #E4E6EB;

  --positive: #42B72A;
  --warning: #F7B125;
  --danger: #FA383E;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --shadow-dropdown: 0 12px 28px 0 rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}

[data-theme='the-book'] .player-bar {
  border-top: 1px solid var(--border-subtle);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.03);
}

[data-theme='the-book'] .sidebar {
  border-right: none;
}

[data-theme='the-book'] .sidebar .nav-link {
  color: rgba(255, 255, 255, 0.85);
}

[data-theme='the-book'] .sidebar .nav-link:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

[data-theme='the-book'] .sidebar .nav-link.active {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-weight: 600;
}

[data-theme='the-book'] .sidebar .nav-section-label {
  color: rgba(255, 255, 255, 0.55);
}

[data-theme='the-book'] .sidebar-brand .brand-name {
  -webkit-text-fill-color: #ffffff;
  color: #ffffff;
}

[data-theme='the-book'] .sidebar {
  --accent: #ffffff;
  --ctp-blue: #ffffff;
}

/* Queue panel — white text on blue background */
[data-theme='the-book'] .queue-item-title {
  color: rgba(255, 255, 255, 0.9);
}

[data-theme='the-book'] .queue-item-artist,
[data-theme='the-book'] .queue-item-duration {
  color: rgba(255, 255, 255, 0.55);
}

[data-theme='the-book'] .queue-item:hover .queue-item-title,
[data-theme='the-book'] .queue-item.context-active .queue-item-title {
  color: #ffffff;
}

[data-theme='the-book'] .queue-item.active .queue-item-title {
  color: #ffffff;
}

[data-theme='the-book'] .queue-item.active .queue-item-artist,
[data-theme='the-book'] .queue-item.active .queue-item-duration {
  color: rgba(255, 255, 255, 0.7);
}

[data-theme='the-book'] .queue-item:hover,
[data-theme='the-book'] .queue-item.context-active {
  background: rgba(255, 255, 255, 0.1);
}

[data-theme='the-book'] .queue-header,
[data-theme='the-book'] .queue-header h2 {
  color: var(--text-primary);
}

[data-theme='the-book'] .queue-current-info h3 {
  color: rgba(255, 255, 255, 0.9);
}

[data-theme='the-book'] .queue-current-sub {
  color: rgba(255, 255, 255, 0.65);
}

[data-theme='the-book'] .collapse-btn {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

[data-theme='the-book'] .player-track-name,
[data-theme='the-book'] .player-track-artist,
[data-theme='the-book'] .player-time {
  color: var(--text-primary) !important;
}


[data-theme='the-book'] .card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border-subtle);
}

/* Album chip — opaque Facebook blue pill */
[data-theme='the-book'] .badge,
[data-theme='the-book'] .album-detail-badge {
  background: #1877F2;
  color: #ffffff;
}

/* Back button — opaque Facebook-style pill */
[data-theme='the-book'] .album-detail-back {
  background: #E7F3FF;
  color: #1877F2;
}
[data-theme='the-book'] .album-detail-back:hover {
  background: #D8EAFD;
  color: #0d6ae0;
}

/* Queue/Lyrics tab bar — white text on blue sidebar */
[data-theme='the-book'] .queue-tab-btn {
  color: rgba(255, 255, 255, 0.65);
}
[data-theme='the-book'] .queue-tab-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}
[data-theme='the-book'] .queue-tab-btn.active {
  color: #ffffff;
}

/* ── ReadIt (Social Media) ──────────────────────────────────── */
[data-theme='readit'] {
  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%23FF4500%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: #030303;
  --ctp-mantle: #1A1A1B;
  --ctp-base: #030303;
  --ctp-surface0: #1A1A1B;
  --ctp-surface1: #272729;
  --ctp-surface2: #343536;
  --ctp-overlay0: #818384;
  --ctp-overlay1: #D7DADC;
  --ctp-overlay2: #FFFFFF;
  --ctp-text: #D7DADC;
  --ctp-subtext1: #D7DADC;
  --ctp-subtext0: #818384;

  --ctp-mauve: #FF4500;
  --ctp-lavender: #FF581A;
  --ctp-green: #46D160;
  --ctp-yellow: #FFD635;
  --ctp-red: #FF4500;
  --ctp-blue: #0079D3;
  --ctp-teal: #00AD96;
  --ctp-sky: #7193FF;
  --ctp-sapphire: #3E5EB3;
  --ctp-pink: #FF66AC;
  --ctp-flamingo: #FF8280;
  --ctp-rosewater: #FFB3A6;
  --ctp-maroon: #EA0027;
  --ctp-peach: #FFB000;

  --bg-app: #030303;
  --bg-sidebar: #1A1A1B;
  --bg-card: #1A1A1B;
  --bg-hover: #272729;
  --bg-player: #1A1A1B;
  --bg-glass: rgba(26, 26, 27, 0.9);

  --accent: #FF4500;
  --accent-dim: rgba(255, 69, 0, 0.1);
  --accent-glow: rgba(255, 69, 0, 0.3);
  --volume-accent: #FF4500;

  --text-primary: #D7DADC;
  --text-secondary: #D7DADC;
  --text-muted: #818384;
  --border: #343536;
  --border-subtle: #272729;

  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
}

[data-theme='readit'] .player-bar {
  border-top: 1px solid var(--border);
  background: var(--bg-sidebar);
}

[data-theme='readit'] .sidebar {
  border-right: 1px solid var(--border);
}

[data-theme='readit'] .nav-link.active {
  background: transparent;
  color: var(--accent);
}

[data-theme='readit'] .nav-link.active::before {
  background: var(--accent) !important;
  width: 2px;
  border-radius: 0 2px 2px 0;
}

[data-theme='readit'] .btn-primary {
  background: var(--accent);
  color: white;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 11px;
}

[data-theme='readit'] .btn-primary:hover {
  background: var(--ctp-lavender);
}

[data-theme='readit'] .card {
  border: 1px solid var(--border);
}

[data-theme='readit'] .queue-item.active {
  border-left: 2px solid var(--accent);
  background: var(--accent-dim);
}

/* ── Insta (Social Media) ───────────────────────────────────── */
[data-theme='insta'] {
  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%23FFFFFF%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: #000000;
  --ctp-base: #121212;
  --ctp-surface0: #1A1A1A;
  --ctp-surface1: #262626;
  --ctp-surface2: #363636;
  --ctp-overlay0: #737373;
  --ctp-overlay1: #A8A8A8;
  --ctp-overlay2: #C7C7C7;
  --ctp-text: #F5F5F5;
  --ctp-subtext1: #DBDBDB;
  --ctp-subtext0: #8E8E8E;

  --ctp-mauve: #E1306C;
  --ctp-lavender: #C13584;
  --ctp-green: #0095F6;
  --ctp-yellow: #FFD600;
  --ctp-red: #ED4956;
  --ctp-peach: #F56040;
  --ctp-flamingo: #FD1D1D;
  --ctp-blue: #0095F6;
  --ctp-teal: #0095F6;
  --ctp-sky: #C13584;
  --ctp-sapphire: #833ab4;
  --ctp-pink: #E1306C;
  --ctp-rosewater: #fcb045;
  --ctp-maroon: #ED4956;

  --bg-app: #121212;
  --bg-sidebar: #000000;
  --bg-card: #1A1A1A;
  --bg-hover: #262626;
  --bg-player: #000000;
  --bg-glass: rgba(0, 0, 0, 0.85);

  --accent: #E1306C;
  --accent-dim: rgba(225, 48, 108, 0.15);
  --accent-glow: rgba(225, 48, 108, 0.35);
  --volume-accent: #E1306C;

  --text-primary: #F5F5F5;
  --text-secondary: #A8A8A8;
  --text-muted: #737373;
  --border: #262626;
  --border-subtle: #1A1A1A;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 22px;
}

[data-theme='insta'] .progress-bar-fill {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
}

[data-theme='insta'] .nav-link.active::before {
  background: linear-gradient(to bottom, #833ab4, #fd1d1d, #fcb045) !important;
  width: 3px;
}

[data-theme='insta'] .player-bar {
  border-top: 1px solid var(--border);
}

[data-theme='insta'] .btn-primary:hover {
  background: linear-gradient(45deg, #f09433, #dc2743, #bc1888) !important;
  border-color: transparent;
}

[data-theme='insta'] .sidebar {
  border-right: 1px solid var(--border);
}

/* ── Hill Valley 85 (Movies) ────────────────────────────────── */
/* ─── 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;
}

/* ─── Ubuntu — Unity Ambiance (Classic Light) ─── */
/* Warm human desktop: aubergine launcher + orange accent + warm off-white content */
[data-theme='ubuntu-ambiance'] {
  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%237d6e68%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 human spectrum ── */
  --ctp-crust: #1a000f;
  /* panel blackout aubergine */
  --ctp-mantle: #2c001e;
  /* Ubuntu top/bottom panel */
  --ctp-base: #f4efea;
  /* Ambiance window warm off-white */
  --ctp-surface0: #ede8e2;
  --ctp-surface1: #e4dfd8;
  --ctp-surface2: #d8d0c8;
  --ctp-overlay0: #c0b0a0;
  --ctp-overlay1: #a89080;
  --ctp-overlay2: #907870;
  --ctp-text: #3d2b2b;
  /* warm dark brown — human, not pure black */
  --ctp-subtext1: #5d4e48;
  --ctp-subtext0: #7d6e68;
  /* Ubuntu color spectrum */
  --ctp-mauve: #e95420;
  /* Ubuntu Orange — the soul of Ubuntu */
  --ctp-lavender: #f06030;
  --ctp-sky: #f07050;
  --ctp-peach: #e95420;
  --ctp-teal: #06989a;
  --ctp-blue: #3465a4;
  --ctp-sapphire: #204a87;
  --ctp-green: #4e9a06;
  /* Ubuntu success green */
  --ctp-yellow: #c4a000;
  --ctp-pink: #cc1e4a;
  --ctp-flamingo: #a52828;
  --ctp-maroon: #800000;
  --ctp-red: #cc0000;
  --ctp-rosewater: #cc4444;

  /* ── Semantic tokens ── */
  --bg-app: #f4efea;
  /* warm Ambiance window */
  --bg-sidebar: #3d1f3d;
  /* Unity Launcher — dark aubergine */
  --bg-card: #ede8e2;
  --bg-hover: #e4ddd5;
  --bg-player: #2c001e;
  /* Ubuntu panel — blackest aubergine */
  --bg-glass: rgba(244, 239, 234, 0.94);
  --accent: #e95420;
  /* Ubuntu Orange */
  --accent-dim: rgba(233, 84, 32, 0.12);
  --accent-glow: rgba(233, 84, 32, 0.30);
  --text-primary: #3d2b2b;
  --text-secondary: #5d4e48;
  --text-muted: #7d6e68;
  --border: #c8b8a8;
  --border-subtle: #ddd5cc;
  --positive: #4e9a06;
  --warning: #c4a000;
  --danger: #cc0000;
}

/* ── App shell: warm Ambiance off-white ── */
[data-theme='ubuntu-ambiance'] .app-shell {
  background: #f4efea;
}

/* ── Sidebar: Unity Launcher dark aubergine ── */
[data-theme='ubuntu-ambiance'] .sidebar {
  background: linear-gradient(180deg, #3d1f3d 0%, #2e162e 100%);
  border-right: 1px solid #1a0a1a;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.35);
}

/* Sidebar text: light on dark aubergine */
[data-theme='ubuntu-ambiance'] .sidebar-logo-text,
[data-theme='ubuntu-ambiance'] .nav-link,
[data-theme='ubuntu-ambiance'] .sidebar-bottom a,
[data-theme='ubuntu-ambiance'] .sidebar-bottom button {
  color: rgba(255, 255, 255, 0.72);
}

[data-theme='ubuntu-ambiance'] .nav-link:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff;
}

[data-theme='ubuntu-ambiance'] .nav-link.active {
  background: rgba(233, 84, 32, 0.22);
  color: #ffffff;
}

[data-theme='ubuntu-ambiance'] .nav-link.active::before {
  background: #e95420;
  box-shadow: 0 0 8px rgba(233, 84, 32, 0.60);
}

[data-theme='ubuntu-ambiance'] {
  --logo-color-start: #ffffff;
  --logo-color-end: #ffb090;
}

[data-theme='ubuntu-ambiance'] .sidebar-logo-icon {
  color: #e95420;
}

/* Sidebar version / muted labels */
[data-theme='ubuntu-ambiance'] .sidebar-version,
[data-theme='ubuntu-ambiance'] .update-toast {
  color: rgba(255, 255, 255, 0.40);
}

/* ── Player bar: Ubuntu panel — darkest aubergine ── */
[data-theme='ubuntu-ambiance'] .player-bar {
  background: linear-gradient(180deg, #2c001e 0%, #1a000f 100%);
  border-top: 1px solid #3d0828;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 -3px 16px rgba(0, 0, 0, 0.50);
}

/* Player text: light on dark panel */
[data-theme='ubuntu-ambiance'] .player-track-name {
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

[data-theme='ubuntu-ambiance'] .player-track-artist {
  color: rgba(255, 255, 255, 0.60);
  opacity: 1;
}

[data-theme='ubuntu-ambiance'] .player-time {
  color: rgba(255, 255, 255, 0.65);
}

/* Transport buttons: Ubuntu Orange on dark panel */
[data-theme='ubuntu-ambiance'] .player-btn,
[data-theme='ubuntu-ambiance'] .player-btn-primary {
  background: linear-gradient(180deg, #f06030 0%, #e95420 50%, #d44418 100%);
  color: #ffffff;
  border: 1px solid #b83010;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.50),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20);
}

[data-theme='ubuntu-ambiance'] .player-btn:hover,
[data-theme='ubuntu-ambiance'] .player-btn-primary:hover {
  background: linear-gradient(180deg, #f87040 0%, #f06030 50%, #e04828 100%);
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.50),
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

/* ── Content area buttons: Ambiance GTK style ── */
[data-theme='ubuntu-ambiance'] .btn {
  background: linear-gradient(180deg, #f0ebe5 0%, #e4dfd8 100%);
  color: #3d2b2b;
  border: 1px solid #b8a898;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.70), 0 1px 2px rgba(0, 0, 0, 0.15);
}

[data-theme='ubuntu-ambiance'] .btn:hover {
  background: linear-gradient(180deg, #f8f3ed 0%, #ede8e2 100%);
  border-color: #a89888;
}

[data-theme='ubuntu-ambiance'] .btn-primary {
  background: linear-gradient(180deg, #f06030 0%, #e95420 100%);
  color: #ffffff;
  border: 1px solid #b83010;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 1px 3px rgba(0, 0, 0, 0.25),
    0 0 0 0px rgba(233, 84, 32, 0);
}

[data-theme='ubuntu-ambiance'] .btn-primary:hover {
  background: linear-gradient(180deg, #f87040 0%, #f06030 100%);
}

/* ── Content header: warm Ambiance title band ── */
[data-theme='ubuntu-ambiance'] .content-header {
  background: linear-gradient(180deg, rgba(244, 239, 234, 1) 0%, rgba(237, 232, 226, 0.60) 100%);
  border-bottom: 1px solid #c8b8a8;
}

/* ── Cards / panels ── */
[data-theme='ubuntu-ambiance'] .glass,
[data-theme='ubuntu-ambiance'] .card {
  background: rgba(237, 232, 226, 0.88);
  border: 1px solid #c8b8a8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.60), 0 1px 4px rgba(0, 0, 0, 0.10);
}

/* ── Hover / active states: orange accent ── */
[data-theme='ubuntu-ambiance'] .track-row:hover,
[data-theme='ubuntu-ambiance'] .track-row.context-active {
  background: rgba(233, 84, 32, 0.07);
  box-shadow: inset 3px 0 0 #e95420;
}

[data-theme='ubuntu-ambiance'] .queue-item:hover,
[data-theme='ubuntu-ambiance'] .queue-item.context-active {
  background: rgba(233, 84, 32, 0.07);
}

[data-theme='ubuntu-ambiance'] .queue-item.active {
  background: rgba(233, 84, 32, 0.12);
  border-left: 2px solid #e95420;
}

[data-theme='ubuntu-ambiance'] .np-queue-item.active {
  background: rgba(233, 84, 32, 0.08);
}

[data-theme='ubuntu-ambiance'] .np-queue-item-active {
  color: #e95420;
}

[data-theme='ubuntu-ambiance'] .np-queue-item:hover,
[data-theme='ubuntu-ambiance'] .np-queue-item.context-active {
  background: rgba(233, 84, 32, 0.06);
}

[data-theme='ubuntu-ambiance'] .np-album-track.active .np-album-track-title,
[data-theme='ubuntu-ambiance'] .np-album-track.active .np-album-track-num {
  color: #e95420;
}

[data-theme='ubuntu-ambiance'] .artist-row:hover {
  background: rgba(233, 84, 32, 0.06);
  box-shadow: inset 3px 0 0 #e95420;
}

[data-theme='ubuntu-ambiance'] .playlist-row:hover {
  background: rgba(233, 84, 32, 0.06);
  box-shadow: inset 3px 0 0 #e95420;
}

[data-theme='ubuntu-ambiance'] .settings-tab:hover {
  background: rgba(233, 84, 32, 0.08);
  color: #e95420;
}

[data-theme='ubuntu-ambiance'] .settings-tab.active {
  background: rgba(233, 84, 32, 0.14);
  color: #e95420;
  border-color: #e95420;
}

[data-theme='ubuntu-ambiance'] .queue-tab-btn:hover {
  background: rgba(233, 84, 32, 0.08);
  color: #e95420;
}

[data-theme='ubuntu-ambiance'] .custom-select-trigger:hover {
  background: rgba(233, 84, 32, 0.07);
}

[data-theme='ubuntu-ambiance'] .custom-select-option:hover {
  background: rgba(233, 84, 32, 0.10);
}

[data-theme='ubuntu-ambiance'] .artist-ext-link:hover {
  background: rgba(233, 84, 32, 0.09);
  border-color: #e95420;
}

/* Queue panel on dark player area */
[data-theme='ubuntu-ambiance'] .queue-round-btn.active {
  color: #ffffff;
}

/* Connection indicators: warm muted on light bg */
[data-theme='ubuntu-ambiance'] .connection-type,
[data-theme='ubuntu-ambiance'] .connection-server {
  color: #907860;
}

/* ── Album chip: opaque orange pill so it reads on both dark hero and light bg ── */
[data-theme='ubuntu-ambiance'] .badge,
[data-theme='ubuntu-ambiance'] .album-detail-badge {
  background: #e95420;
  color: #ffffff;
}

/* ── Queue panel: on dark aubergine bg — all text must be light ── */
/* Header + toolbar sit on --bg-app (light) — fine as-is */
/* List, meta box, divider sit on --bg-sidebar (dark aubergine) */

[data-theme='ubuntu-ambiance'] .queue-item-title {
  color: rgba(255, 255, 255, 0.88);
}

[data-theme='ubuntu-ambiance'] .queue-item-artist,
[data-theme='ubuntu-ambiance'] .queue-item-duration {
  color: rgba(255, 255, 255, 0.52);
}

[data-theme='ubuntu-ambiance'] .queue-item.active .queue-item-artist,
[data-theme='ubuntu-ambiance'] .queue-item.active .queue-item-duration {
  color: rgba(255, 255, 255, 0.72);
}

[data-theme='ubuntu-ambiance'] .queue-divider span {
  color: rgba(255, 255, 255, 0.40) !important;
}

/* Meta box (current track info) on dark aubergine */
[data-theme='ubuntu-ambiance'] .queue-current-info h3 {
  color: rgba(255, 255, 255, 0.92);
}

[data-theme='ubuntu-ambiance'] .queue-current-sub {
  color: rgba(255, 255, 255, 0.55);
}

[data-theme='ubuntu-ambiance'] .queue-current-cover .fallback {
  color: rgba(255, 255, 255, 0.35);
}

/* Tabs sit on dark bg too */
[data-theme='ubuntu-ambiance'] .queue-tab-btn {
  color: rgba(255, 255, 255, 0.60);
}

[data-theme='ubuntu-ambiance'] .queue-tab-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.90);
}

[data-theme='ubuntu-ambiance'] .queue-tab-btn.active {
  color: #e95420;
}

/* Action buttons in header (on light --bg-app) */
[data-theme='ubuntu-ambiance'] .queue-action-btn {
  color: #7d6e68;
}

[data-theme='ubuntu-ambiance'] .queue-action-btn:hover:not(:disabled) {
  color: #3d2b2b;
}

/* ─────────────────────────────────────────── */

/* ─── Windows 10 — Fluent Design Light ─── */
/* Clean flat white + the iconic near-black taskbar + Windows blue #0078D4 */
[data-theme='w10'] {
  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%23767676%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 — Windows 10 neutral + Fluent blue ── */
  --ctp-crust: #1c1c1c;
  /* taskbar near-black */
  --ctp-mantle: #2b2b2b;
  --ctp-base: #ffffff;
  /* window white */
  --ctp-surface0: #f3f3f3;
  /* nav pane / secondary bg */
  --ctp-surface1: #ebebeb;
  --ctp-surface2: #d6d6d6;
  /* borders, dividers */
  --ctp-overlay0: #767676;
  /* muted / disabled */
  --ctp-overlay1: #4a4a4a;
  --ctp-overlay2: #2b2b2b;
  --ctp-text: #000000;
  /* primary text — true black */
  --ctp-subtext1: #1b1b1b;
  --ctp-subtext0: #5d5d5d;
  /* Windows Fluent blue spectrum */
  --ctp-mauve: #0078d4;
  /* Windows blue — THE accent */
  --ctp-lavender: #2e95d3;
  --ctp-sky: #cce4f7;
  /* selection highlight */
  --ctp-teal: #008272;
  --ctp-blue: #0063b1;
  --ctp-sapphire: #003e92;
  --ctp-green: #107c10;
  --ctp-yellow: #ffb900;
  --ctp-peach: #d83b01;
  --ctp-pink: #e3008c;
  --ctp-flamingo: #c239b3;
  --ctp-rosewater: #ef6950;
  --ctp-maroon: #a80000;
  --ctp-red: #d13438;

  /* ── Semantic tokens ── */
  --bg-app: #ffffff;
  --bg-sidebar: #f3f3f3;
  --bg-card: #ffffff;
  --bg-hover: #e8e8e8;
  --bg-player: #1c1c1c;
  /* taskbar */
  --bg-glass: rgba(255, 255, 255, 0.90);
  --accent: #0078d4;
  --accent-dim: rgba(0, 120, 212, 0.10);
  --accent-glow: rgba(0, 120, 212, 0.28);
  --text-primary: #000000;
  --text-secondary: #1b1b1b;
  --text-muted: #767676;
  --border: #d6d6d6;
  --border-subtle: #ebebeb;
  --positive: #107c10;
  --warning: #ffb900;
  --danger: #d13438;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  /* Waveform: Windows blue progress */
  --waveform-played: #0078d4;
  --waveform-buffered: #80bbea;
  --waveform-unplayed: #d6d6d6;
}

/* ── App shell: W10 desktop — clean off-white ── */
[data-theme='w10'] .app-shell {
  background: #f3f3f3;
}

/* ── Sidebar: W10 Navigation Pane — flat light gray ── */
[data-theme='w10'] .sidebar {
  background: #f3f3f3;
  border-right: 1px solid #d6d6d6;
  box-shadow: none;
}

/* Nav links: dark on light pane */
[data-theme='w10'] .nav-link {
  color: #1b1b1b;
}

[data-theme='w10'] .nav-link:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #000000;
}

[data-theme='w10'] .nav-link.active {
  background: rgba(0, 120, 212, 0.10);
  color: #0078d4;
}

[data-theme='w10'] .nav-link.active::before {
  background: #0078d4;
  box-shadow: none;
}

/* ── Player bar: W10 Taskbar — near-black flat + accent stripe ── */
[data-theme='w10'] .player-bar {
  background: #1c1c1c;
  border-top: 2px solid #0078d4;
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.50);
}

/* Player text: white on dark taskbar */
[data-theme='w10'] .player-track-name {
  color: #ffffff;
  font-weight: 500;
}

[data-theme='w10'] .player-track-artist {
  color: rgba(255, 255, 255, 0.65);
  opacity: 1;
}

[data-theme='w10'] .player-time {
  color: rgba(255, 255, 255, 0.60);
}

/* Transport: flat ghosted icons on dark bar */
[data-theme='w10'] .player-btn {
  color: rgba(255, 255, 255, 0.82);
  background: transparent;
  border: none;
  box-shadow: none;
}

[data-theme='w10'] .player-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

[data-theme='w10'] .player-btn-primary {
  background: #0078d4;
  color: #ffffff;
  border: none;
  box-shadow: none;
}

[data-theme='w10'] .player-btn-primary:hover {
  background: #1684d8;
  box-shadow: none;
}

/* ── Content-area buttons: W10 flat button style ── */
[data-theme='w10'] .btn {
  background: #ffffff;
  color: #1b1b1b;
  border: 1px solid #d6d6d6;
  border-radius: 4px;
  box-shadow: none;
}

[data-theme='w10'] .btn:hover {
  background: #f3f3f3;
  border-color: #767676;
  box-shadow: none;
}

[data-theme='w10'] .btn-primary {
  background: #0078d4;
  color: #ffffff;
  border: 1px solid transparent;
  box-shadow: none;
}

[data-theme='w10'] .btn-primary:hover {
  background: #006cbd;
  box-shadow: none;
}

[data-theme='w10'] .btn-ghost {
  background: transparent;
  border-color: transparent;
  color: #1b1b1b;
}

[data-theme='w10'] .btn-ghost:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: transparent;
}

[data-theme='w10'] .btn-surface {
  background: #ffffff;
  color: #1b1b1b;
  border: 1px solid #d6d6d6;
}

[data-theme='w10'] .btn-surface:hover {
  background: #f3f3f3;
  border-color: #767676;
}

/* Cards: white, flat border, very subtle lift */
[data-theme='w10'] .glass,
[data-theme='w10'] .card {
  background: #ffffff;
  border: 1px solid #d6d6d6;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* Content header */
[data-theme='w10'] .content-header {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid #d6d6d6;
}

/* Album badge: Windows blue */
[data-theme='w10'] .badge,
[data-theme='w10'] .album-detail-badge {
  background: #0078d4;
  color: #ffffff;
}

/* ── Hover / active states ── */
[data-theme='w10'] .track-row:hover,
[data-theme='w10'] .track-row.context-active {
  background: rgba(0, 120, 212, 0.06);
  box-shadow: inset 3px 0 0 #0078d4;
}

[data-theme='w10'] .queue-item:hover,
[data-theme='w10'] .queue-item.context-active {
  background: rgba(0, 120, 212, 0.07);
}

[data-theme='w10'] .queue-item.active {
  background: rgba(0, 120, 212, 0.10);
  border-left: 2px solid #0078d4;
}

[data-theme='w10'] .np-queue-item.active {
  background: rgba(0, 120, 212, 0.08);
}

[data-theme='w10'] .np-queue-item-active {
  color: #0078d4;
}

[data-theme='w10'] .np-queue-item:hover,
[data-theme='w10'] .np-queue-item.context-active {
  background: rgba(0, 120, 212, 0.05);
}

[data-theme='w10'] .np-album-track.active .np-album-track-title,
[data-theme='w10'] .np-album-track.active .np-album-track-num {
  color: #0078d4;
}

[data-theme='w10'] .artist-row:hover {
  background: rgba(0, 120, 212, 0.06);
  box-shadow: inset 3px 0 0 #0078d4;
}

[data-theme='w10'] .playlist-row:hover {
  background: rgba(0, 120, 212, 0.06);
  box-shadow: inset 3px 0 0 #0078d4;
}

[data-theme='w10'] .settings-tab:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #0078d4;
}

[data-theme='w10'] .settings-tab.active {
  background: rgba(0, 120, 212, 0.10);
  color: #0078d4;
  border-color: #0078d4;
}

[data-theme='w10'] .queue-tab-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #0078d4;
}

[data-theme='w10'] .custom-select-trigger:hover {
  background: rgba(0, 0, 0, 0.05);
}

[data-theme='w10'] .custom-select-option:hover {
  background: rgba(0, 120, 212, 0.08);
}

[data-theme='w10'] .artist-ext-link:hover {
  background: rgba(0, 120, 212, 0.08);
  border-color: #0078d4;
}

/* Connection info: readable on light sidebar */
[data-theme='w10'] .connection-type,
[data-theme='w10'] .connection-server {
  color: #5d5d5d;
}

/* ─────────────────────────────────────────── */

/* ─── Windows Vista — Aero Glass ─── */
/* Pure CSS glass illusion: layered gradients + strategic box-shadows, no backdrop-filter */
[data-theme='wista'] {
  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%234870a8%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: #010308;
  --ctp-mantle: #050b1a;
  --ctp-base: #eef3fc;
  /* Vista window interior — ice blue-white */
  --ctp-surface0: #e2ecf8;
  --ctp-surface1: #d5e4f5;
  --ctp-surface2: #c5d8f0;
  --ctp-overlay0: #a8c4e0;
  --ctp-overlay1: #88a8cc;
  --ctp-overlay2: #6888b0;
  --ctp-text: #0d1d3c;
  /* deep navy — readable on ice bg */
  --ctp-subtext1: #2a4878;
  --ctp-subtext0: #4870a8;
  /* Vista Aero blue spectrum */
  --ctp-mauve: #1565c8;
  /* Vista Aero blue — THE accent */
  --ctp-lavender: #2880e0;
  --ctp-sky: #5aaaf8;
  /* selection/highlight blue */
  --ctp-teal: #1890b8;
  --ctp-blue: #0e50a8;
  --ctp-sapphire: #0848a0;
  --ctp-green: #1a8020;
  --ctp-yellow: #c8980c;
  --ctp-peach: #d06818;
  --ctp-pink: #c03878;
  --ctp-flamingo: #a82860;
  --ctp-rosewater: #c04848;
  --ctp-maroon: #903030;
  --ctp-red: #c02020;

  /* ── Semantic tokens ── */
  --bg-app: #eef3fc;
  --bg-sidebar: #0e1e3e;
  /* deep navy glass — Vista nav pane in dark mode */
  --bg-card: #e2ecf8;
  --bg-hover: rgba(21, 101, 200, 0.09);
  --bg-player: #050810;
  /* Vista taskbar — black glass */
  --bg-glass: rgba(238, 243, 252, 0.94);
  --accent: #1565c8;
  --accent-dim: rgba(21, 101, 200, 0.12);
  --accent-glow: rgba(21, 101, 200, 0.40);
  --text-primary: #0d1d3c;
  --text-secondary: #2a4878;
  --text-muted: #4870a8;
  --border: rgba(100, 160, 220, 0.45);
  --border-subtle: rgba(140, 190, 240, 0.30);
  --positive: #1a8020;
  --warning: #c8980c;
  --danger: #c02020;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  /* Waveform: Vista blue progress bar */
  --waveform-played: #1565c8;
  --waveform-buffered: #5aaaf8;
  --waveform-unplayed: #c5d8f0;
}

/* ── App shell: Vista desktop — soft blue gradient ── */
[data-theme='wista'] .app-shell {
  background: linear-gradient(160deg, #dce8f8 0%, #e5eefa 50%, #eef3fc 100%);
}

/* ── Sidebar: Aero glass nav pane ──
   Three layers: 1) top specular reflection, 2) deep navy base, 3) edge highlight via box-shadow */
[data-theme='wista'] .sidebar {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.08) 20%,
      rgba(255, 255, 255, 0.00) 55%,
      rgba(0, 20, 60, 0.12) 100%),
    linear-gradient(180deg, #1a3368 0%, #0e1e3e 45%, #0a1830 100%);
  border-right: 1px solid rgba(120, 180, 255, 0.55);
  box-shadow:
    inset -1px 0 0 rgba(255, 255, 255, 0.28),
    inset 1px 0 0 rgba(255, 255, 255, 0.10),
    2px 0 18px rgba(0, 0, 0, 0.40);
}

/* Sidebar text: light on dark glass */
[data-theme='wista'] .nav-link {
  color: rgba(210, 228, 255, 0.72);
}

[data-theme='wista'] .nav-link:hover {
  background: rgba(255, 255, 255, 0.11);
  color: #ffffff;
}

[data-theme='wista'] .nav-link.active {
  background: rgba(21, 101, 200, 0.38);
  color: #ffffff;
}

[data-theme='wista'] .nav-link.active::before {
  background: #5aaaf8;
  box-shadow: 0 0 10px rgba(90, 170, 248, 0.85);
}

[data-theme='wista'] .sidebar-logo-text,
[data-theme='wista'] .sidebar-bottom a,
[data-theme='wista'] .sidebar-bottom button {
  color: rgba(210, 228, 255, 0.70);
}

[data-theme='wista'] {
  --logo-color-start: #ffffff;
  --logo-color-end: #a8ccff;
}

[data-theme='wista'] .sidebar-version {
  color: rgba(210, 228, 255, 0.35);
}

/* ── Player bar: Vista Aero taskbar ──
   Black glass + intense blue glow on top border — the most iconic Vista element */
[data-theme='wista'] .player-bar {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.07) 0%,
      rgba(255, 255, 255, 0.00) 18%,
      rgba(0, 0, 0, 0.00) 82%,
      rgba(0, 0, 0, 0.18) 100%),
    linear-gradient(180deg, #0c1828 0%, #050810 100%);
  border-top: 1px solid rgba(80, 155, 255, 0.70);
  box-shadow:
    inset 0 1px 0 rgba(140, 200, 255, 0.55),
    inset 0 2px 0 rgba(255, 255, 255, 0.14),
    0 -4px 24px rgba(0, 0, 0, 0.70);
}

/* Player text: white on black glass */
[data-theme='wista'] .player-track-name {
  color: #ffffff;
  text-shadow: 0 0 12px rgba(100, 170, 255, 0.65), 0 1px 2px rgba(0, 0, 0, 0.60);
  font-weight: 600;
}

[data-theme='wista'] .player-track-artist {
  color: #88b8e8;
  opacity: 1;
}

[data-theme='wista'] .player-time {
  color: #88b8e8;
}

/* ── Transport buttons: Vista glass orbs ──
   Top half: white → ice-blue reflection | Bottom half: royal blue deep — the iconic split */
[data-theme='wista'] .player-btn,
[data-theme='wista'] .player-btn-primary {
  background: linear-gradient(180deg,
      #daeeff 0%,
      #b8d8ff 44%,
      #3a91f8 50%,
      #0f58d7 100%);
  color: #ffffff;
  border: 1px solid rgba(10, 65, 180, 0.70);
  border-radius: 50%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 2px 8px rgba(0, 0, 0, 0.50),
    0 0 0 1px rgba(80, 140, 255, 0.20);
}

[data-theme='wista'] .player-btn:hover,
[data-theme='wista'] .player-btn-primary:hover {
  background: linear-gradient(180deg,
      #e8f4ff 0%,
      #c8e4ff 44%,
      #58a8ff 50%,
      #2070e8 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.80),
    0 3px 12px rgba(0, 0, 0, 0.50),
    0 0 16px rgba(80, 150, 255, 0.35);
}

/* ── Content-area buttons: Vista dialog glass ── */
[data-theme='wista'] .btn {
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(238, 248, 255, 0.95) 44%,
      rgba(195, 222, 248, 0.90) 50%,
      rgba(168, 205, 240, 0.85) 100%);
  color: #0d1d3c;
  border: 1px solid rgba(100, 160, 220, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.90),
    0 1px 3px rgba(0, 0, 0, 0.18);
}

[data-theme='wista'] .btn:hover {
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 1.00) 0%,
      rgba(245, 252, 255, 0.98) 44%,
      rgba(210, 233, 255, 0.95) 50%,
      rgba(180, 220, 252, 0.92) 100%);
  border-color: rgba(80, 140, 220, 0.80);
}

[data-theme='wista'] .btn-primary {
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(190, 222, 255, 0.92) 44%,
      rgba(48, 130, 240, 0.96) 50%,
      rgba(15, 78, 210, 0.99) 100%);
  color: #ffffff;
  border: 1px solid rgba(10, 60, 180, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 1px 4px rgba(0, 0, 0, 0.28),
    0 0 8px rgba(21, 101, 200, 0.22);
}

[data-theme='wista'] .btn-primary:hover {
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 1.00) 0%,
      rgba(210, 235, 255, 0.95) 44%,
      rgba(68, 148, 255, 0.97) 50%,
      rgba(30, 95, 225, 1.00) 100%);
}

/* ── Cards/panels: Vista frosted glass panel ── */
[data-theme='wista'] .glass,
[data-theme='wista'] .card {
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.88) 0%,
      rgba(225, 240, 255, 0.82) 100%);
  border: 1px solid rgba(130, 182, 232, 0.60);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 2px 8px rgba(21, 101, 200, 0.10);
}

/* ── Content header: Vista titlebar / toolbar band ── */
[data-theme='wista'] .content-header {
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(232, 245, 255, 0.72) 100%);
  border-bottom: 1px solid rgba(150, 198, 238, 0.65);
  box-shadow: 0 1px 4px rgba(21, 101, 200, 0.10);
}

/* ── Album badge: Vista blue pill ── */
[data-theme='wista'] .badge,
[data-theme='wista'] .album-detail-badge {
  background: #1565c8;
  color: #ffffff;
}

/* ── Scrollbar: Vista light-blue style ── */
[data-theme='wista'] ::-webkit-scrollbar-track {
  background: #d5e4f5;
}

[data-theme='wista'] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #90b8e0 0%, #6898c8 100%);
  border-radius: 4px;
}

[data-theme='wista'] ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #a8ccf0 0%, #80a8e0 100%);
}

/* ── Hover / active states: Vista selection blue ── */
[data-theme='wista'] .track-row:hover,
[data-theme='wista'] .track-row.context-active {
  background: rgba(21, 101, 200, 0.08);
  box-shadow: inset 3px 0 0 #1565c8;
}

[data-theme='wista'] .queue-item:hover,
[data-theme='wista'] .queue-item.context-active {
  background: rgba(90, 170, 248, 0.18);
}

[data-theme='wista'] .queue-item.active {
  background: rgba(21, 101, 200, 0.28);
  border-left: 2px solid #5aaaf8;
}

[data-theme='wista'] .np-queue-item.active {
  background: rgba(21, 101, 200, 0.10);
}

[data-theme='wista'] .np-queue-item-active {
  color: #1565c8;
}

[data-theme='wista'] .np-queue-item:hover,
[data-theme='wista'] .np-queue-item.context-active {
  background: rgba(21, 101, 200, 0.07);
}

[data-theme='wista'] .np-album-track.active .np-album-track-title,
[data-theme='wista'] .np-album-track.active .np-album-track-num {
  color: #1565c8;
}

[data-theme='wista'] .artist-row:hover {
  background: rgba(21, 101, 200, 0.07);
  box-shadow: inset 3px 0 0 #1565c8;
}

[data-theme='wista'] .playlist-row:hover {
  background: rgba(21, 101, 200, 0.07);
  box-shadow: inset 3px 0 0 #1565c8;
}

[data-theme='wista'] .settings-tab:hover {
  background: rgba(21, 101, 200, 0.08);
  color: #1565c8;
}

[data-theme='wista'] .settings-tab.active {
  background: rgba(21, 101, 200, 0.14);
  color: #1565c8;
  border-color: #1565c8;
}

[data-theme='wista'] .queue-tab-btn:hover {
  background: rgba(21, 101, 200, 0.08);
  color: #1565c8;
}

[data-theme='wista'] .custom-select-trigger:hover {
  background: rgba(21, 101, 200, 0.08);
}

[data-theme='wista'] .custom-select-option:hover {
  background: rgba(21, 101, 200, 0.12);
}

[data-theme='wista'] .artist-ext-link:hover {
  background: rgba(21, 101, 200, 0.10);
  border-color: #1565c8;
}

/* ── Queue: dark glass sidebar → light text ── */
[data-theme='wista'] .queue-item-title {
  color: rgba(210, 228, 255, 0.90);
}

[data-theme='wista'] .queue-item-artist,
[data-theme='wista'] .queue-item-duration {
  color: rgba(170, 205, 250, 0.55);
}

[data-theme='wista'] .queue-item.active .queue-item-artist,
[data-theme='wista'] .queue-item.active .queue-item-duration {
  color: rgba(190, 218, 255, 0.75);
}

[data-theme='wista'] .queue-divider span {
  color: rgba(180, 210, 255, 0.38) !important;
}

[data-theme='wista'] .queue-current-info h3 {
  color: rgba(220, 235, 255, 0.92);
}

[data-theme='wista'] .queue-current-sub {
  color: rgba(180, 210, 252, 0.58);
}

[data-theme='wista'] .queue-tab-btn {
  color: rgba(200, 220, 255, 0.62);
}

[data-theme='wista'] .queue-tab-btn.active {
  color: #5aaaf8;
}

[data-theme='wista'] .queue-round-btn.active {
  color: #050810;
}

/* Connection indicators: muted Vista blue on light bg */
[data-theme='wista'] .connection-type,
[data-theme='wista'] .connection-server {
  color: #6090b8;
}

/* ─────────────────────────────────────────── */

[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);
}

/* ─── 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: Lila-Akzent mit linkem Balken */
[data-theme='jayfin'] .nav-link.active {
  background: rgba(170, 92, 195, 0.12);
  color: #AA5CC3;
  border-left: 3px solid #AA5CC3;
}

[data-theme='jayfin'] .nav-link.active svg {
  color: #AA5CC3;
}

/* 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 */
[data-theme='jayfin'] .btn-primary,
[data-theme='jayfin'] .player-btn-primary,
[data-theme='jayfin'] .hero-play-btn {
  background: #AA5CC3;
  color: #ffffff;
  border: none;
  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;
  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;
  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;
}

/* ─── 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;
}


/* ─── Unix Shell ─── */
@keyframes unix-cursor-blink {

  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

[data-theme='unix'] {
  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%2322C55E%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");

  /* ANSI colors mapped to semantic palette */
  --ctp-crust: #000000;
  --ctp-mantle: #0a0a0a;
  --ctp-base: #111111;
  --ctp-surface0: #1a1a1a;
  --ctp-surface1: #222222;
  --ctp-surface2: #2e2e2e;
  --ctp-overlay0: #666666;
  --ctp-overlay1: #888888;
  --ctp-overlay2: #AAAAAA;
  --ctp-text: #C8C8C8;
  --ctp-subtext1: #AAAAAA;
  --ctp-subtext0: #888888;
  --ctp-mauve: #C678DD;
  --ctp-lavender: #5588FF;
  --ctp-pink: #E06C75;
  --ctp-flamingo: #FF6B6B;
  --ctp-rosewater: #FFFFFF;
  --ctp-green: #22C55E;
  --ctp-teal: #55FFFF;
  --ctp-sky: #55FFFF;
  --ctp-blue: #5588FF;
  --ctp-sapphire: #5588FF;
  --ctp-yellow: #E5C07B;
  --ctp-peach: #E06C75;
  --ctp-maroon: #AA0000;
  --ctp-red: #E06C75;

  --bg-app: #000000;
  --bg-sidebar: #0a0a0a;
  --bg-card: #111111;
  --bg-hover: #1a1a1a;
  --bg-player: #000000;
  --bg-glass: rgba(0, 0, 0, 0.92);
  --accent: #22C55E;
  --accent-dim: rgba(34, 197, 94, 0.10);
  --accent-glow: rgba(34, 197, 94, 0.25);
  --text-primary: #C8C8C8;
  --text-secondary: #999999;
  --text-muted: #666666;
  --border: #222222;
  --border-subtle: #1a1a1a;
  --border-dropdown: #333333;
  --shadow-dropdown: rgba(0, 0, 0, 0.95);
  --positive: #22C55E;
  --warning: #E5C07B;
  --danger: #E06C75;
  --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='unix'] button,
[data-theme='unix'] input,
[data-theme='unix'] textarea,
[data-theme='unix'] select {
  font-family: 'Courier New', Courier, 'Lucida Console', monospace;
}

/* Sidebar — slightly off-black, thin separator */
[data-theme='unix'] .sidebar {
  background: #0a0a0a;
  border-right: 1px solid #222222;
}

/* Nav active — green left bar */
[data-theme='unix'] .nav-link.active {
  background: rgba(34, 197, 94, 0.10);
  border-left: 2px solid #22C55E;
  color: #22C55E;
}

[data-theme='unix'] .nav-link:hover:not(.active) {
  background: rgba(34, 197, 94, 0.05);
  color: #C8C8C8;
}

/* Player bar — pure black, thin grey separator */
[data-theme='unix'] .player-bar {
  background-color: #000000;
  background-image: repeating-linear-gradient(0deg,
      rgba(0, 0, 0, 0.10) 0px,
      rgba(0, 0, 0, 0.10) 1px,
      transparent 1px,
      transparent 2px);
  border-top: 1px solid #222222;
  box-shadow: none;
}

/* Track name — white text, green $ prompt prefix, blinking _ cursor */
[data-theme='unix'] .player-track-name {
  color: #FFFFFF;
  text-shadow: none;
}

[data-theme='unix'] .player-track-name::before {
  content: '$ ';
  color: #22C55E;
  font-weight: 700;
}

[data-theme='unix'] .player-track-name::after {
  content: '_';
  animation: unix-cursor-blink 1s step-end infinite;
  color: #C8C8C8;
  margin-left: 1px;
}

/* Artist name — ANSI bright blue (ls directory color) */
[data-theme='unix'] .player-artist-name {
  color: #5588FF;
}

/* Content header — minimal grey rule */
[data-theme='unix'] .content-header {
  border-bottom: 1px solid #1e1e1e;
}

/* Album/artist cards — dark panel, fine border */
[data-theme='unix'] .album-card,
[data-theme='unix'] .artist-card {
  background: #111111;
  border: 1px solid #1e1e1e;
  box-shadow: none;
}

[data-theme='unix'] .album-card:hover,
[data-theme='unix'] .artist-card:hover {
  background: #1a1a1a;
  border-color: #22C55E;
  box-shadow: none;
}

/* Track / queue row hover — green left accent */
[data-theme='unix'] .track-row:hover,
[data-theme='unix'] .queue-item:hover {
  background: rgba(34, 197, 94, 0.06);
  box-shadow: inset 2px 0 0 #22C55E;
}

/* Primary play button — solid green */
[data-theme='unix'] .player-btn-primary {
  background: #22C55E;
  color: #000000;
  border: none;
  box-shadow: none;
}

[data-theme='unix'] .player-btn-primary:hover {
  background: #16A34A;
  box-shadow: none;
  transform: none;
}

/* btn-primary */
[data-theme='unix'] .btn-primary {
  background: #22C55E;
  color: #000000;
  border: none;
  box-shadow: none;
}

[data-theme='unix'] .btn-primary:hover {
  background: #16A34A;
  box-shadow: none;
}

/* Hero play button */
[data-theme='unix'] .hero-play-btn {
  background: #22C55E;
  color: #000000;
  border: none;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  box-shadow: none;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

[data-theme='unix'] .hero-play-btn:hover {
  background: #16A34A;
  transform: scale(1.02);
  filter: none;
  box-shadow: none;
}

/* Album card overlay button */
[data-theme='unix'] .album-card-details-btn {
  background: #22C55E;
  color: #000000;
  border: none;
  box-shadow: none;
}

[data-theme='unix'] .album-card-details-btn:hover {
  background: #16A34A;
}

/* Queue round buttons */
[data-theme='unix'] .queue-round-btn {
  border: 1px solid #222222;
  box-shadow: none;
}

[data-theme='unix'] .queue-round-btn.active {
  background: #22C55E;
  color: #000000;
  border-color: #22C55E;
  box-shadow: none;
}

/* Input fields */
[data-theme='unix'] input,
[data-theme='unix'] textarea {
  background: #0a0a0a;
  border: 1px solid #222222;
  border-radius: 0;
}

[data-theme='unix'] input:focus,
[data-theme='unix'] textarea:focus {
  border-color: #22C55E;
  outline: none;
  box-shadow: none;
}

/* Scrollbar — thin 6px, modern terminal style */
[data-theme='unix'] ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

[data-theme='unix'] ::-webkit-scrollbar-track {
  background: #0a0a0a;
}

[data-theme='unix'] ::-webkit-scrollbar-thumb {
  background: #333333;
  border-radius: 0;
}

[data-theme='unix'] ::-webkit-scrollbar-thumb:hover {
  background: #22C55E;
}

/* Connection indicator — server name and Last.fm username */
[data-theme='unix'] .connection-type,
[data-theme='unix'] .connection-server {
  color: #888888;
}

/* Connection indicators + Now Playing username */
[data-theme='spider-tech'] .connection-type,
[data-theme='spider-tech'] .connection-server {
  color: #9080a8;
}

/* Connection indicators */
[data-theme='dos'] .connection-type,
[data-theme='dos'] .connection-server {
  color: #AAAAAA;
}

/* Track row hover — all child text to navy so nothing drowns on grey */
[data-theme='dos'] .track-row:hover .track-title,
[data-theme='dos'] .track-row:hover .track-num,
[data-theme='dos'] .track-row:hover .track-artist,
[data-theme='dos'] .track-row:hover .track-duration,
[data-theme='dos'] .track-row:hover .track-codec,
[data-theme='dos'] .track-row:hover button,
[data-theme='dos'] .track-row.context-active .track-title,
[data-theme='dos'] .track-row.context-active .track-num,
[data-theme='dos'] .track-row.context-active .track-artist,
[data-theme='dos'] .track-row.context-active .track-duration,
[data-theme='dos'] .track-row.context-active .track-codec,
[data-theme='dos'] .track-row.context-active button {
  color: #000080 !important;
  background: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════
   HORDE — World of Warcraft, Durotar blood-red earth, forge-fire
   ═══════════════════════════════════════════════════════════════════ */
[data-theme='horde'] {
  /* Catppuccin-compatible palette — dark blood-iron */
  --ctp-base: #1a0500;
  --ctp-mantle: #140300;
  --ctp-crust: #0e0200;
  --ctp-surface0: #2e0a02;
  --ctp-surface1: #3e1104;
  --ctp-surface2: #521806;
  --ctp-overlay0: #8a5030;
  --ctp-overlay1: #a06038;
  --ctp-overlay2: #b87048;
  --ctp-subtext0: #c88850;
  --ctp-subtext1: #d89860;
  --ctp-text: #e8d4b8;
  --ctp-lavender: #cc4422;
  --ctp-blue: #cc2200;
  --ctp-sapphire: #aa1800;
  --ctp-sky: #dd3300;
  --ctp-teal: #cc5500;
  --ctp-green: #887722;
  --ctp-yellow: #ffd890;
  --ctp-peach: #ff8844;
  --ctp-maroon: #991100;
  --ctp-red: #cc2200;
  --ctp-mauve: #cc4422;
  --ctp-pink: #dd5533;
  --ctp-flamingo: #ee6644;
  --ctp-rosewater: #ffaa66;

  /* Semantic tokens */
  --bg-app: #1a0500;
  --bg-sidebar: #110300;
  --bg-player: #120400;
  --bg-card: #2e0a02;
  --bg-card-hover: #3e1104;
  --bg-input: #2e0a02;
  --bg-overlay: rgba(26, 5, 0, 0.92);
  --bg-selection: rgba(204, 34, 0, 0.25);
  --border-subtle: rgba(140, 60, 20, 0.30);
  --border-default: rgba(180, 80, 30, 0.35);
  --border-strong: rgba(220, 120, 50, 0.50);
  --text-primary: #e8d4b8;
  --text-secondary: #c09070;
  --text-muted: #a07848;
  --text-disabled: #5a3820;
  --accent: #cc2200;
  --accent-hover: #e02800;
  --accent-glow: rgba(204, 34, 0, 0.35);
  --accent-subtle: rgba(204, 34, 0, 0.15);
  --danger: #ff4422;
  --success: #887722;
  --warning: #ff8844;
  --nav-active-bg: rgba(204, 34, 0, 0.22);
  --nav-active-text: #ffd890;
  --scrollbar-thumb: rgba(140, 50, 10, 0.60);
  --scrollbar-track: transparent;
  --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.70);
  --shadow-player: 0 -4px 20px rgba(150, 30, 0, 0.25);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
}

/* Track name — blood-gold glow, as if lit by forge-fire */
[data-theme='horde'] .player-track-name,
[data-theme='horde'] .queue-track-title {
  color: #ffd890;
  text-shadow: 0 0 16px rgba(220, 80, 0, 0.55), 0 0 4px rgba(220, 80, 0, 0.25);
}

/* Sidebar — iron plate lines + subtle red glow on active */
[data-theme='horde'] .sidebar {
  background-color: #110300;
  border-right: 1px solid rgba(140, 40, 10, 0.35);
}

/* Nav active — ember glow */
[data-theme='horde'] .sidebar-nav-item.active {
  background: rgba(204, 34, 0, 0.20);
  border-left: 3px solid #cc2200;
  box-shadow: inset 0 0 12px rgba(204, 34, 0, 0.10);
}

/* Player bar — forge-fire glow from below */
[data-theme='horde'] .player-bar {
  background-color: #120400;
  background-image: linear-gradient(to bottom, rgba(80, 10, 0, 0.35), transparent);
  border-top: 1px solid rgba(180, 60, 20, 0.40);
  box-shadow: 0 -4px 24px rgba(150, 30, 0, 0.30);
}

/* App-shell — safe single-pass radial, no repeating */
[data-theme='horde'] .app-shell {
  background: radial-gradient(ellipse at 65% 110%, rgba(160, 25, 0, 0.18) 0%, transparent 55%);
}

/* Cards — iron-tinted hover */
[data-theme='horde'] .album-card:hover,
[data-theme='horde'] .artist-card:hover {
  box-shadow: 0 4px 18px rgba(180, 40, 0, 0.30);
  border-color: rgba(200, 60, 10, 0.50);
}

/* Connection indicators */
[data-theme='horde'] .connection-type,
[data-theme='horde'] .connection-server {
  color: #a07848;
}


/* ═══════════════════════════════════════════════════════════════════
   ALLIANCE — World of Warcraft, Stormwind navy, cathedral stone & gold
   ═══════════════════════════════════════════════════════════════════ */
[data-theme='alliance'] {
  /* Catppuccin-compatible palette — deep navy / cathedral stone */
  --ctp-base: #06101e;
  --ctp-mantle: #040c18;
  --ctp-crust: #020810;
  --ctp-surface0: #0c1e34;
  --ctp-surface1: #122440;
  --ctp-surface2: #1a2e50;
  --ctp-overlay0: #506888;
  --ctp-overlay1: #607898;
  --ctp-overlay2: #7088a8;
  --ctp-subtext0: #8098b8;
  --ctp-subtext1: #90a8c8;
  --ctp-text: #d8e8f8;
  --ctp-lavender: #5588cc;
  --ctp-blue: #3388cc;
  --ctp-sapphire: #2266aa;
  --ctp-sky: #44aadd;
  --ctp-teal: #3399cc;
  --ctp-green: #88bb44;
  --ctp-yellow: #f0c840;
  --ctp-peach: #dd9944;
  --ctp-maroon: #aa3322;
  --ctp-red: #cc4433;
  --ctp-mauve: #7766cc;
  --ctp-pink: #997acc;
  --ctp-flamingo: #aa88cc;
  --ctp-rosewater: #bbaacc;

  /* Semantic tokens */
  --bg-app: #06101e;
  --bg-sidebar: #040c18;
  --bg-player: #050e1a;
  --bg-card: #0c1e34;
  --bg-card-hover: #122440;
  --bg-input: #0c1e34;
  --bg-overlay: rgba(6, 16, 30, 0.92);
  --bg-selection: rgba(51, 136, 204, 0.25);
  --border-subtle: rgba(60, 100, 160, 0.28);
  --border-default: rgba(80, 120, 180, 0.35);
  --border-strong: rgba(120, 160, 210, 0.50);
  --text-primary: #d8e8f8;
  --text-secondary: #8098b8;
  --text-muted: #6880a0;
  --text-disabled: #2a3e58;
  --accent: #3388cc;
  --accent-hover: #4499dd;
  --accent-glow: rgba(51, 136, 204, 0.35);
  --accent-subtle: rgba(51, 136, 204, 0.15);
  --danger: #cc4433;
  --success: #88bb44;
  --warning: #dd9944;
  --nav-active-bg: rgba(51, 136, 204, 0.20);
  --nav-active-text: #e8f4ff;
  --scrollbar-thumb: rgba(60, 110, 180, 0.55);
  --scrollbar-track: transparent;
  --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.60);
  --shadow-player: 0 -4px 20px rgba(20, 70, 160, 0.22);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
}

/* Track name — paladin holy-light glow */
[data-theme='alliance'] .player-track-name,
[data-theme='alliance'] .queue-track-title {
  color: #e8f4ff;
  text-shadow: 0 0 14px rgba(80, 160, 220, 0.50), 0 0 4px rgba(80, 160, 220, 0.20);
}

/* Sidebar — cathedral stone columns with gold right-border */
[data-theme='alliance'] .sidebar {
  background-color: #040c18;
  border-right: 2px solid rgba(200, 170, 50, 0.30);
}

/* Nav active — royal blue with gold left accent */
[data-theme='alliance'] .sidebar-nav-item.active {
  background: rgba(51, 136, 204, 0.20);
  border-left: 3px solid #f0c840;
  box-shadow: inset 0 0 12px rgba(51, 136, 204, 0.10);
}

/* Player bar — paladin aura glow */
[data-theme='alliance'] .player-bar {
  background-color: #050e1a;
  background-image: linear-gradient(to bottom, rgba(20, 60, 130, 0.30), transparent);
  border-top: 1px solid rgba(100, 140, 200, 0.35);
  box-shadow: 0 -4px 22px rgba(30, 80, 180, 0.22);
}

/* App-shell — safe single-pass radial, no repeating */
[data-theme='alliance'] .app-shell {
  background: radial-gradient(ellipse at 38% 110%, rgba(25, 70, 170, 0.15) 0%, transparent 55%);
}

/* Cards — blue-glow hover */
[data-theme='alliance'] .album-card:hover,
[data-theme='alliance'] .artist-card:hover {
  box-shadow: 0 4px 18px rgba(40, 100, 200, 0.28);
  border-color: rgba(80, 140, 210, 0.50);
}

/* Connection indicators */
[data-theme='alliance'] .connection-type,
[data-theme='alliance'] .connection-server {
  color: #6880a0;
}

/* ═══════════════════════════════════════════════════════════════════
   W11 — Windows 11 Fluent Design, dark mode, Mica material
   ═══════════════════════════════════════════════════════════════════ */
[data-theme='w11'] {
  /* Catppuccin-compatible palette — Fluent dark neutrals */
  --ctp-base: #202020;
  --ctp-mantle: #1c1c1c;
  --ctp-crust: #181818;
  --ctp-surface0: #2c2c2c;
  --ctp-surface1: #363636;
  --ctp-surface2: #404040;
  --ctp-overlay0: #797979;
  --ctp-overlay1: #8a8a8a;
  --ctp-overlay2: #9a9a9a;
  --ctp-subtext0: #ababab;
  --ctp-subtext1: #bebebe;
  --ctp-text: #f3f3f3;
  --ctp-lavender: #6ccbf8;
  --ctp-blue: #0078d4;
  --ctp-sapphire: #0067c0;
  --ctp-sky: #4cc2ff;
  --ctp-teal: #00b7c3;
  --ctp-green: #6ccb5f;
  --ctp-yellow: #f9f1a5;
  --ctp-peach: #f7630c;
  --ctp-maroon: #e81123;
  --ctp-red: #e81123;
  --ctp-mauve: #8764b8;
  --ctp-pink: #b146c2;
  --ctp-flamingo: #e3008c;
  --ctp-rosewater: #f5e1ff;

  /* Semantic tokens */
  --bg-app: #202020;
  --bg-sidebar: #2b2b2b;
  --bg-player: #1c1c1c;
  --bg-card: #2c2c2c;
  --bg-card-hover: #363636;
  --bg-input: #2c2c2c;
  --bg-overlay: rgba(32, 32, 32, 0.92);
  --bg-selection: rgba(0, 120, 212, 0.25);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  --text-primary: #f3f3f3;
  --text-secondary: #9a9a9a;
  --text-muted: #797979;
  --text-disabled: #4a4a4a;
  --accent: #0078d4;
  --accent-hover: #1086e0;
  --accent-glow: rgba(0, 120, 212, 0.30);
  --accent-subtle: rgba(0, 120, 212, 0.15);
  --danger: #e81123;
  --success: #6ccb5f;
  --warning: #f7630c;
  --nav-active-bg: rgba(0, 120, 212, 0.18);
  --nav-active-text: #f3f3f3;
  --scrollbar-thumb: rgba(255, 255, 255, 0.18);
  --scrollbar-track: transparent;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.50);
  --shadow-player: 0 -1px 0 rgba(255, 255, 255, 0.06);
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
}

/* Track name — clean white, no glow (Fluent is minimal) */
[data-theme='w11'] .player-track-name,
[data-theme='w11'] .queue-track-title {
  color: #f3f3f3;
}

/* Sidebar — Mica-like: very slightly lighter than app bg, clean border */
[data-theme='w11'] .sidebar {
  background-color: #2b2b2b;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

/* Nav active — Fluent accent fill, rounded */
[data-theme='w11'] .sidebar-nav-item.active {
  background: rgba(0, 120, 212, 0.20);
  border-left: 3px solid #0078d4;
}

/* Player bar — taskbar-inspired: very dark, hairline top border */
[data-theme='w11'] .player-bar {
  background-color: #1c1c1c;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

/* App-shell — flat, no gradient (Fluent dark is clean/minimal) */
[data-theme='w11'] .app-shell {
  background: none;
}

/* Cards — Fluent hover: slight elevation via border brightening */
[data-theme='w11'] .album-card:hover,
[data-theme='w11'] .artist-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  border-color: rgba(255, 255, 255, 0.16);
}

/* Connection indicators */
[data-theme='w11'] .connection-type,
[data-theme='w11'] .connection-server {
  color: #797979;
}

/* ── Barb & Ken (Games) ─────────────────────────────────────── */
[data-theme='barb-and-ken'] {
  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%23FF1B8D%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");

  /* Barbieland palette */
  --ctp-crust: #07000b;
  --ctp-mantle: #110009;
  --ctp-base: #1a000f;
  --ctp-surface0: #2e0019;
  --ctp-surface1: #450026;
  --ctp-surface2: #5c0032;
  --ctp-overlay0: #8c1455;
  --ctp-overlay1: #b82070;
  --ctp-overlay2: #d93d8a;
  --ctp-text: #ffe6f3;
  --ctp-subtext1: #ffb8da;
  --ctp-subtext0: #ff80be;

  /* Barbie Pink spectrum */
  --ctp-mauve: #FF1B8D;
  --ctp-pink: #FF69B4;
  --ctp-flamingo: #FF1493;
  --ctp-rosewater: #FFD6EC;
  --ctp-lavender: #FFB3D9;
  --ctp-maroon: #c4005e;
  --ctp-red: #FF4466;

  /* Ken — powder blue as accent-2 */
  --ctp-blue: #89CFF0;
  --ctp-sapphire: #5BC8F5;
  --ctp-sky: #AAE8FF;
  --ctp-teal: #70d8f2;

  --ctp-green: #a6e3a1;
  --ctp-yellow: #FFE4A8;
  --ctp-peach: #FFB8D0;

  --bg-app: #1a000f;
  --bg-sidebar: #110009;
  --bg-card: #2e0019;
  --bg-hover: rgba(255, 27, 141, 0.12);
  --bg-player: #07000b;
  --bg-glass: rgba(26, 0, 15, 0.88);

  --accent: #FF1B8D;
  --accent-dim: rgba(255, 27, 141, 0.15);
  --accent-glow: rgba(255, 27, 141, 0.45);
  --volume-accent: #89CFF0;

  --text-primary: #ffe6f3;
  --text-secondary: #ffb8da;
  --text-muted: #7a3055;
  --border: rgba(255, 27, 141, 0.28);
  --border-subtle: rgba(255, 27, 141, 0.12);
  --border-dropdown: rgba(255, 27, 141, 0.3);
  --shadow-dropdown: rgba(7, 0, 11, 0.9);

  --positive: #a6e3a1;
  --warning: #FFE4A8;
  --danger: #FF4466;

  /* Bubbly, soft rounding — very Barbie */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
}

/* Polka-dot sidebar — Barbie's dreamhouse wallpaper */
[data-theme='barb-and-ken'] .sidebar {
  background:
    radial-gradient(circle, rgba(255, 27, 141, 0.18) 2px, transparent 2px),
    radial-gradient(circle, rgba(137, 207, 240, 0.10) 2px, transparent 2px),
    linear-gradient(180deg, #110009 0%, #1a000f 100%);
  background-size: 22px 22px, 22px 22px, 100% 100%;
  background-position: 0 0, 11px 11px, 0 0;
  border-right: 1px solid rgba(255, 27, 141, 0.35);
}

/* Player bar — deep magenta gradient, hot pink top border */
[data-theme='barb-and-ken'] .player-bar {
  background: linear-gradient(180deg, #1a000f 0%, #07000b 100%);
  border-top: 2px solid #FF1B8D;
  box-shadow: 0 -6px 24px rgba(255, 27, 141, 0.18);
}

/* Track name — glitter shimmer */
@keyframes barbie-shimmer {
  0% {
    background-position: -200% center;
  }

  100% {
    background-position: 200% center;
  }
}

[data-theme='barb-and-ken'] .player-track-name {
  background: linear-gradient(90deg,
      #FF1B8D 0%,
      #FF69B4 25%,
      #ffffff 50%,
      #FF69B4 75%,
      #FF1B8D 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: barbie-shimmer 4s linear infinite;
  font-weight: 700;
}

/* Artist name — Ken blue */
[data-theme='barb-and-ken'] .player-artist-name {
  color: #89CFF0;
}

/* Active nav — pink left border glow */
[data-theme='barb-and-ken'] .nav-link.active {
  background: linear-gradient(90deg, rgba(255, 27, 141, 0.22) 0%, transparent 100%);
  color: #FF69B4 !important;
  border-left: 3px solid #FF1B8D;
  text-shadow: 0 0 8px rgba(255, 27, 141, 0.4);
}

[data-theme='barb-and-ken'] .nav-link:hover:not(.active) {
  background: rgba(255, 27, 141, 0.08);
}

/* Content header — subtle pink rule */
[data-theme='barb-and-ken'] .content-header {
  border-bottom: 1px solid rgba(255, 27, 141, 0.2);
  background: rgba(26, 0, 15, 0.6);
  backdrop-filter: blur(12px);
}

/* Primary buttons — hot pink gradient */
[data-theme='barb-and-ken'] .btn-primary,
[data-theme='barb-and-ken'] .player-btn-primary,
[data-theme='barb-and-ken'] .hero-play-btn {
  background: linear-gradient(135deg, #FF1B8D 0%, #FF69B4 100%);
  box-shadow: 0 4px 16px rgba(255, 27, 141, 0.45);
  color: #fff !important;
  border: none;
}

[data-theme='barb-and-ken'] .btn-primary:hover,
[data-theme='barb-and-ken'] .player-btn-primary:hover,
[data-theme='barb-and-ken'] .hero-play-btn:hover {
  background: linear-gradient(135deg, #e5007a 0%, #FF1B8D 100%);
  box-shadow: 0 6px 22px rgba(255, 27, 141, 0.60);
}

/* Cards — pink border glow on hover */
[data-theme='barb-and-ken'] .album-card,
[data-theme='barb-and-ken'] .artist-card,
[data-theme='barb-and-ken'] .card,
[data-theme='barb-and-ken'] .settings-card {
  border: 1px solid rgba(255, 27, 141, 0.18);
}

[data-theme='barb-and-ken'] .album-card:hover,
[data-theme='barb-and-ken'] .artist-card:hover {
  border-color: rgba(255, 27, 141, 0.50);
  box-shadow: 0 4px 20px rgba(255, 27, 141, 0.20);
}

/* Queue active item */
[data-theme='barb-and-ken'] .queue-item.active {
  background: rgba(255, 27, 141, 0.08);
  border-left: 3px solid #FF1B8D;
}

[data-theme='barb-and-ken'] .queue-item.active .queue-item-title {
  color: #FF69B4;
}

[data-theme='barb-and-ken'] .queue-item.active .queue-item-artist,
[data-theme='barb-and-ken'] .queue-item.active .queue-item-duration {
  color: #89CFF0;
}

/* Track rows */
[data-theme='barb-and-ken'] .track-row:hover,
[data-theme='barb-and-ken'] .queue-item:hover {
  background: rgba(255, 27, 141, 0.07);
}

/* Album detail header cover button — Ken blue glow on hover */
[data-theme='barb-and-ken'] .album-detail-cover-btn:hover {
  box-shadow: 0 0 24px rgba(137, 207, 240, 0.35);
}

/* Star (favorite) icon — gold kept, but override to hot pink */
[data-theme='barb-and-ken'] .color-star-active {
  --color-star-active: #FF69B4;
}

/* Scrollbar — thin hot pink */
[data-theme='barb-and-ken'] ::-webkit-scrollbar {
  width: 5px;
}

[data-theme='barb-and-ken'] ::-webkit-scrollbar-track {
  background: #07000b;
}

[data-theme='barb-and-ken'] ::-webkit-scrollbar-thumb {
  background: #FF1B8D;
  border-radius: 3px;
}

[data-theme='barb-and-ken'] ::-webkit-scrollbar-thumb:hover {
  background: #FF69B4;
}

/* Connection indicators */
[data-theme='barb-and-ken'] .connection-type,
[data-theme='barb-and-ken'] .connection-server {
  color: #7a3055;
}

/* ── Toy Tale (Movies) ──────────────────────────────────────── */
[data-theme='toy-tale'] {
  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%23FFD600%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");

  /* Warm toy-box palette */
  --ctp-crust: #080603;
  --ctp-mantle: #100d08;
  --ctp-base: #1a1208;
  --ctp-surface0: #2a1c10;
  --ctp-surface1: #3a2818;
  --ctp-surface2: #4a3422;
  --ctp-overlay0: #7a5a35;
  --ctp-overlay1: #9a7848;
  --ctp-overlay2: #b89060;
  --ctp-text: #f0e8d8;
  --ctp-subtext1: #d8c8a8;
  --ctp-subtext0: #c0a880;

  /* Woody gold */
  --ctp-mauve: #FFD600;
  --ctp-yellow: #FFD600;
  --ctp-peach: #FFA000;
  --ctp-rosewater: #FFE0A0;

  /* Buzz Lightyear purple + green */
  --ctp-lavender: #9B72D6;
  --ctp-blue: #7B4FD6;
  --ctp-sapphire: #5c35a0;
  --ctp-sky: #4FC3F7;
  --ctp-teal: #4CAF50;
  --ctp-green: #4CAF50;

  --ctp-pink: #FF6B9D;
  --ctp-flamingo: #FF4488;
  --ctp-maroon: #b71c1c;
  --ctp-red: #e53935;

  --bg-app: #1a1208;
  --bg-sidebar: #1e3a5f;
  /* Andy's sky-blue wallpaper */
  --bg-card: #2a1c10;
  --bg-hover: rgba(255, 214, 0, 0.10);
  --bg-player: #0d0a06;
  --bg-glass: rgba(26, 18, 8, 0.90);

  --accent: #FFD600;
  --accent-dim: rgba(255, 214, 0, 0.15);
  --accent-glow: rgba(255, 214, 0, 0.40);
  --volume-accent: #7B4FD6;
  /* Buzz purple */

  --text-primary: #f0e8d8;
  --text-secondary: #c8a878;
  --text-muted: #6a5030;
  --border: rgba(255, 214, 0, 0.22);
  --border-subtle: rgba(255, 214, 0, 0.10);
  --border-dropdown: rgba(255, 214, 0, 0.25);
  --shadow-dropdown: rgba(8, 6, 3, 0.92);

  --positive: #4CAF50;
  --warning: #FFA000;
  --danger: #e53935;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
}

/* Sidebar — Andy's iconic cloud wallpaper in sky blue */
[data-theme='toy-tale'] .sidebar {
  background:
    radial-gradient(ellipse 70px 42px at 18% 12%, rgba(255, 255, 255, 0.14) 0%, transparent 100%),
    radial-gradient(ellipse 45px 28px at 38% 18%, rgba(255, 255, 255, 0.09) 0%, transparent 100%),
    radial-gradient(ellipse 80px 50px at 72% 10%, rgba(255, 255, 255, 0.12) 0%, transparent 100%),
    radial-gradient(ellipse 55px 32px at 85% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 100%),
    radial-gradient(ellipse 65px 40px at 12% 55%, rgba(255, 255, 255, 0.10) 0%, transparent 100%),
    radial-gradient(ellipse 48px 30px at 55% 68%, rgba(255, 255, 255, 0.08) 0%, transparent 100%),
    radial-gradient(ellipse 72px 44px at 80% 75%, rgba(255, 255, 255, 0.11) 0%, transparent 100%),
    linear-gradient(180deg, #1e3a5f 0%, #274d78 100%);
  border-right: 1px solid rgba(255, 214, 0, 0.20);
}

/* Nav links need lighter text on blue sidebar */
[data-theme='toy-tale'] .nav-link {
  color: rgba(255, 255, 255, 0.75);
}

[data-theme='toy-tale'] .nav-link:hover:not(.active) {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
}

[data-theme='toy-tale'] .nav-link.active {
  background: rgba(255, 214, 0, 0.20);
  border-left: 3px solid #FFD600;
  color: #FFD600 !important;
  text-shadow: 0 0 8px rgba(255, 214, 0, 0.4);
}

[data-theme='toy-tale'] .sidebar-logo,
[data-theme='toy-tale'] .sidebar-title {
  color: #fff;
}

/* Player bar — dark toy-chest wood */
[data-theme='toy-tale'] .player-bar {
  background: linear-gradient(180deg, #1a1208 0%, #0d0a06 100%);
  border-top: 2px solid #FFD600;
  box-shadow: 0 -6px 20px rgba(255, 214, 0, 0.10);
}

/* Track name — Woody sheriff star gold */
[data-theme='toy-tale'] .player-track-name {
  color: #FFD600;
  text-shadow: 0 0 10px rgba(255, 214, 0, 0.45);
  font-weight: 700;
}

/* Artist name — warm cowboy tan */
[data-theme='toy-tale'] .player-artist-name {
  color: #c8a060;
}

/* Content header */
[data-theme='toy-tale'] .content-header {
  border-bottom: 1px solid rgba(255, 214, 0, 0.18);
}

/* Primary buttons — Woody yellow */
[data-theme='toy-tale'] .btn-primary,
[data-theme='toy-tale'] .player-btn-primary,
[data-theme='toy-tale'] .hero-play-btn {
  background: linear-gradient(135deg, #FFD600 0%, #FFA000 100%);
  color: #1a1208 !important;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(255, 214, 0, 0.35);
  border: none;
}

[data-theme='toy-tale'] .btn-primary:hover,
[data-theme='toy-tale'] .player-btn-primary:hover,
[data-theme='toy-tale'] .hero-play-btn:hover {
  background: linear-gradient(135deg, #ffe033 0%, #FFD600 100%);
  box-shadow: 0 6px 20px rgba(255, 214, 0, 0.50);
}

/* Cards */
[data-theme='toy-tale'] .album-card,
[data-theme='toy-tale'] .artist-card,
[data-theme='toy-tale'] .card,
[data-theme='toy-tale'] .settings-card {
  border: 1px solid rgba(255, 214, 0, 0.16);
}

[data-theme='toy-tale'] .album-card:hover,
[data-theme='toy-tale'] .artist-card:hover {
  border-color: rgba(255, 214, 0, 0.42);
  box-shadow: 0 4px 18px rgba(255, 214, 0, 0.14);
}

/* Track rows */
[data-theme='toy-tale'] .track-row:hover,
[data-theme='toy-tale'] .queue-item:hover {
  background: rgba(255, 214, 0, 0.06);
}

/* Queue active item — Buzz purple accent */
[data-theme='toy-tale'] .queue-item.active {
  background: rgba(123, 79, 214, 0.12);
  border-left: 3px solid #7B4FD6;
}

[data-theme='toy-tale'] .queue-item.active .queue-item-title {
  color: #FFD600;
}

[data-theme='toy-tale'] .queue-item.active .queue-item-artist,
[data-theme='toy-tale'] .queue-item.active .queue-item-duration {
  color: #9B72D6;
}

/* Scrollbar — Woody brown */
[data-theme='toy-tale'] ::-webkit-scrollbar {
  width: 6px;
}

[data-theme='toy-tale'] ::-webkit-scrollbar-track {
  background: #0d0a06;
}

[data-theme='toy-tale'] ::-webkit-scrollbar-thumb {
  background: #7a5a35;
  border-radius: 3px;
}

[data-theme='toy-tale'] ::-webkit-scrollbar-thumb:hover {
  background: #FFD600;
}

/* Connection indicators */
[data-theme='toy-tale'] .connection-type,
[data-theme='toy-tale'] .connection-server {
  color: #6a5030;
}

/* Sidebar section labels (sky-blue bg needs light text) */
[data-theme='toy-tale'] .nav-section-label {
  color: rgba(200, 230, 255, 0.55);
}

/* Queue tab buttons (Lyrics / Warteschlange) — inactive */
[data-theme='toy-tale'] .queue-tab-btn {
  color: #b89060;
}

[data-theme='toy-tale'] .queue-tab-btn:hover {
  color: #f0e8d8;
}

/* Queue: inactive song artist */
[data-theme='toy-tale'] .queue-item-artist {
  color: #9a7848;
}

/* Queue: "Nächste Titel" divider */
[data-theme='toy-tale'] .queue-divider span {
  color: #b89060 !important;
}

/* ─── 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;
}

/* ─── 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;
}

/* ─── 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;

  --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 */
  --accent-dim: rgba(200, 150, 12, 0.13);
  --accent-glow: rgba(200, 150, 12, 0.30);
  --text-primary: #2A1808;
  --text-secondary: #6A4018;
  --text-muted: #A07830;
  --border: rgba(42, 24, 8, 0.14);
  --border-subtle: rgba(42, 24, 8, 0.08);
  --border-dropdown: rgba(200, 128, 10, 0.28);
  --shadow-dropdown: rgba(24, 14, 4, 0.22);
  --positive: #507820;
  --warning: #C05010;
  --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.20);
  --waveform-unplayed: rgba(42, 24, 8, 0.10);

  /* 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;
}

/* ─── 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;
}

/* ─── 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;
}

/* ─── 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;
}

/* ─── 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;
}

/* ─── 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;
}

/* ─── Terafox ─── */
[data-theme='terafox'] {
  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%23e6eaea%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: #0f1c1e;
  --ctp-mantle: #0f1c1e;
  --ctp-base: #152528;
  --ctp-surface0: #1d3337;
  --ctp-surface1: #254147;
  --ctp-surface2: #2d4f56;
  --ctp-overlay0: #6d7f8b;
  --ctp-overlay1: #587b7b;
  --ctp-overlay2: #cbd9d8;
  --ctp-text: #e6eaea;
  --ctp-subtext1: #eaeeee;
  --ctp-subtext0: #cbd9d8;
  --ctp-mauve: #ad5c7c;
  --ctp-lavender: #5a93aa;
  --ctp-pink: #cb7985;
  --ctp-flamingo: #e85c51;
  --ctp-rosewater: #ea9a97;
  --ctp-blue: #5a93aa;
  --ctp-sapphire: #5a93aa;
  --ctp-sky: #a1cdd8;
  --ctp-teal: #7aa4a1;
  --ctp-green: #7aa4a1;
  --ctp-yellow: #fda47f;
  --ctp-peach: #ff8349;
  --ctp-maroon: #e85c51;
  --ctp-red: #e85c51;

  --bg-app: #152528;
  --bg-sidebar: #0f1c1e;
  --bg-card: #1d3337;
  --bg-hover: #254147;
  --bg-player: #0f1c1e;
  --bg-glass: rgba(21, 37, 40, 0.75);
  --accent: #a1cdd8;
  --accent-dim: rgba(161, 205, 216, 0.15);
  --accent-glow: rgba(161, 205, 216, 0.3);
  --text-primary: #e6eaea;
  --text-secondary: #cbd9d8;
  --text-muted: #6d7f8b;
  --border: #254147;
  --border-subtle: #1d3337;
  --border-dropdown: #2d4f56;
  --shadow-dropdown: rgba(0, 0, 0, 0.6);
  --positive: #7aa4a1;
  --warning: #fda47f;
  --danger: #e85c51;
}

/* ─── 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;
}

/* ─── 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");

  --ctp-crust:    #191a21;
  --ctp-mantle:   #21222c;
  --ctp-base:     #282a36;
  --ctp-surface0: #3a3c4e;
  --ctp-surface1: #44475a;
  --ctp-surface2: #565869;
  --ctp-overlay0: #6272a4;
  --ctp-overlay1: #7970a9;
  --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:         #44475a;
  --bg-player:        #21222c;
  --bg-glass:         rgba(40, 42, 54, 0.82);
  --accent:           #bd93f9;
  --accent-dim:       rgba(189, 147, 249, 0.15);
  --accent-glow:      rgba(189, 147, 249, 0.3);
  --text-primary:     #f8f8f2;
  --text-secondary:   #e0dfe6;
  --text-muted:       #6272a4;
  --border:           #44475a;
  --border-subtle:    #3a3c4e;
  --border-dropdown:  #565869;
  --shadow-dropdown:  rgba(0, 0, 0, 0.6);
  --positive:         #50fa7b;
  --warning:          #ffb86c;
  --danger:           #ff5555;
}

/* ─── Vision Dark — Purple & Gold, colorblind-safe (Deuteranopia / Protanopia / Tritanopia) ─── */
/* Gold #FFD700 on #0D0B12 → contrast ~14.7:1 (WCAG AAA)                                        */
[data-theme='vision-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%23C8C4D4%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:     #030210;
  --ctp-mantle:    #06050e;
  --ctp-base:      #0d0b12;
  --ctp-surface0:  #16131e;
  --ctp-surface1:  #201c2c;
  --ctp-surface2:  #2c2838;
  --ctp-overlay0:  #544e6a;
  --ctp-overlay1:  #6e6886;
  --ctp-overlay2:  #8a84a0;
  --ctp-text:      #f2eef8;
  --ctp-subtext1:  #c8c4d4;
  --ctp-subtext0:  #9c98aa;
  --ctp-mauve:     #8b5cf6; /* Purple — secondary accent */
  --ctp-lavender:  #a07af8;
  --ctp-blue:      #60a5fa;
  --ctp-sapphire:  #38bdf8;
  --ctp-sky:       #38bdf8;
  --ctp-teal:      #2dd4bf;
  --ctp-green:     #009e73;  /* Okabe-Ito Bluish Green */
  --ctp-yellow:    #ffd700;  /* Gold */
  --ctp-peach:     #e69f00;
  --ctp-maroon:    #d55e00;  /* Okabe-Ito Vermillion — danger */
  --ctp-red:       #d55e00;
  --ctp-flamingo:  #f472b6;
  --ctp-pink:      #e879f9;
  --ctp-rosewater: #f0abfc;

  --bg-app:         #0d0b12;
  --bg-sidebar:     #08060e;
  --bg-card:        #16131e;
  --bg-hover:       #201c2c;
  --bg-player:      #050310;
  --bg-glass:       rgba(13, 11, 18, 0.84);
  --accent:         #ffd700;
  --accent-dim:     rgba(255, 215, 0, 0.14);
  --accent-glow:    rgba(255, 215, 0, 0.36);
  --text-primary:   #f2eef8;
  --text-secondary: #c8c4d4;
  --text-muted:     #7e7a8e;
  --border:         #201c2c;
  --border-subtle:  #16131e;
  --positive:       #009e73;
  --warning:        #e69f00;
  --danger:         #d55e00;
  --volume-accent:  #ffd700;
}

/* ─── Vision Navy — Purple & Gold, colorblind-safe (Deuteranopia / Protanopia / Tritanopia) ─── */
/* Gold #FFD700 on #0A1628 → contrast ~14.5:1 (WCAG AAA)                                         */
[data-theme='vision-navy'] {
  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%23C0C8D8%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:     #030a14;
  --ctp-mantle:    #060e1c;
  --ctp-base:      #0a1628;
  --ctp-surface0:  #112038;
  --ctp-surface1:  #1a2e48;
  --ctp-surface2:  #243c58;
  --ctp-overlay0:  #486480;
  --ctp-overlay1:  #607a98;
  --ctp-overlay2:  #7890ae;
  --ctp-text:      #eef2f8;
  --ctp-subtext1:  #c0c8d8;
  --ctp-subtext0:  #8898ae;
  --ctp-mauve:     #8b5cf6; /* Purple — secondary accent */
  --ctp-lavender:  #a07af8;
  --ctp-blue:      #3b82f6;
  --ctp-sapphire:  #38bdf8;
  --ctp-sky:       #7dd3fc;
  --ctp-teal:      #2dd4bf;
  --ctp-green:     #009e73;  /* Okabe-Ito Bluish Green */
  --ctp-yellow:    #ffd700;  /* Gold */
  --ctp-peach:     #e69f00;
  --ctp-maroon:    #d55e00;  /* Okabe-Ito Vermillion */
  --ctp-red:       #d55e00;
  --ctp-flamingo:  #f472b6;
  --ctp-pink:      #e879f9;
  --ctp-rosewater: #f0abfc;

  --bg-app:         #0a1628;
  --bg-sidebar:     #060e1c;
  --bg-card:        #112038;
  --bg-hover:       #1a2e48;
  --bg-player:      #040c18;
  --bg-glass:       rgba(10, 22, 40, 0.84);
  --accent:         #ffd700;
  --accent-dim:     rgba(255, 215, 0, 0.14);
  --accent-glow:    rgba(255, 215, 0, 0.36);
  --text-primary:   #eef2f8;
  --text-secondary: #c0c8d8;
  --text-muted:     #607080;
  --border:         #1a2e48;
  --border-subtle:  #112038;
  --positive:       #009e73;
  --warning:        #e69f00;
  --danger:         #d55e00;
  --volume-accent:  #ffd700;
}

/* ─── COMMUNITY THEMES ─── */

/* ─── AMOLED Black Pure ─── */
[data-theme='amoled-black-pure'] {
  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%23ffffff%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");

  /* Backgrounds — absolute black everywhere */
  --ctp-crust:    #000000;
  --ctp-mantle:   #000000;
  --ctp-base:     #000000;
  --ctp-surface0: #000000;
  --ctp-surface1: #050505;
  --ctp-surface2: #0a0a0a;

  /* Overlays / muted text — raised for contrast */
  --ctp-overlay0: #555555;
  --ctp-overlay1: #707070;
  --ctp-overlay2: #8a8a8a;

  /* Text */
  --ctp-text:     #ffffff;
  --ctp-subtext1: #e0e0e0;
  --ctp-subtext0: #bbbbbb;

  /* Accent — pure white */
  --ctp-teal:      #ffffff;
  --ctp-sky:       #ffffff;
  --ctp-sapphire:  #e0e0e0;
  --ctp-blue:      #cccccc;
  --ctp-lavender:  #ffffff;
  --ctp-mauve:     #e0e0e0;
  --ctp-pink:      #cccccc;
  --ctp-flamingo:  #ffffff;
  --ctp-rosewater: #e0e0e0;

  /* Semantic */
  --ctp-red:     #f87171;
  --ctp-maroon:  #fb923c;
  --ctp-peach:   #fb923c;
  --ctp-yellow:  #fbbf24;
  --ctp-green:   #4ade80;

  /* UI tokens — all black */
  --bg-app:      #000000;
  --bg-sidebar:  #000000;
  --bg-card:     #000000;
  --bg-hover:    #0a0a0a;
  --bg-player:   #000000;
  --bg-glass:    rgba(0, 0, 0, 0.95);

  --accent:      #ffffff;
  --accent-dim:  rgba(255, 255, 255, 0.07);
  --accent-glow: rgba(255, 255, 255, 0.15);

  --text-primary:   #ffffff;
  --text-secondary: #b0b0b0;
  --text-muted:     #777777;

  --border:          #141414;
  --border-subtle:   #0a0a0a;
  --border-dropdown: #1f1f1f;
  --shadow-dropdown: rgba(0, 0, 0, 0.98);

  --positive: #4ade80;
  --warning:  #fbbf24;
  --danger:   #f87171;
}

/* ─── Monochrome Dark ─── */
[data-theme='monochrome'] {
  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%23c0c0c0%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");

  /* Backgrounds — deep grayscale */
  --ctp-crust:    #0d0d0d;
  --ctp-mantle:   #111111;
  --ctp-base:     #161616;
  --ctp-surface0: #1c1c1c;
  --ctp-surface1: #232323;
  --ctp-surface2: #2a2a2a;

  /* Overlays — medium grays with good contrast */
  --ctp-overlay0: #555555;
  --ctp-overlay1: #6e6e6e;
  --ctp-overlay2: #888888;

  /* Text */
  --ctp-text:     #e8e8e8;
  --ctp-subtext1: #c0c0c0;
  --ctp-subtext0: #999999;

  /* Accent — silver / light gray */
  --ctp-teal:      #c0c0c0;
  --ctp-sky:       #c0c0c0;
  --ctp-sapphire:  #aaaaaa;
  --ctp-blue:      #999999;
  --ctp-lavender:  #c0c0c0;
  --ctp-mauve:     #aaaaaa;
  --ctp-pink:      #999999;
  --ctp-flamingo:  #c0c0c0;
  --ctp-rosewater: #aaaaaa;

  /* Semantic — desaturated for monochrome */
  --ctp-red:     #cc6666;
  --ctp-maroon:  #bb7744;
  --ctp-peach:   #bb7744;
  --ctp-yellow:  #bbaa55;
  --ctp-green:   #77aa77;

  /* UI tokens */
  --bg-app:      #161616;
  --bg-sidebar:  #111111;
  --bg-card:     #1c1c1c;
  --bg-hover:    #232323;
  --bg-player:   #111111;
  --bg-glass:    rgba(22, 22, 22, 0.95);

  --accent:      #c0c0c0;
  --accent-dim:  rgba(192, 192, 192, 0.07);
  --accent-glow: rgba(192, 192, 192, 0.12);

  --text-primary:   #e8e8e8;
  --text-secondary: #b0b0b0;
  --text-muted:     #777777;

  --border:          #282828;
  --border-subtle:   #1f1f1f;
  --border-dropdown: #303030;
  --shadow-dropdown: rgba(0, 0, 0, 0.85);

  --positive: #77aa77;
  --warning:  #bbaa55;
  --danger:   #cc6666;
}

/* ─── Amber Night ─── */
[data-theme='amber-night'] {
  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%23d4a96a%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");

  /* Backgrounds */
  --ctp-crust:    #0a0804;
  --ctp-mantle:   #0f0c07;
  --ctp-base:     #1a1410;
  --ctp-surface0: #201a12;
  --ctp-surface1: #2a2318;
  --ctp-surface2: #332b1e;

  /* Overlays */
  --ctp-overlay0: #5a4a30;
  --ctp-overlay1: #7a6540;
  --ctp-overlay2: #9a8055;

  /* Text */
  --ctp-text:     #f0e0c8;
  --ctp-subtext1: #d4b88a;
  --ctp-subtext0: #b09060;

  /* Golden amber accent */
  --ctp-teal:      #d4a96a;
  --ctp-sky:       #d4a96a;
  --ctp-sapphire:  #c49055;
  --ctp-blue:      #b07840;
  --ctp-lavender:  #d4a96a;
  --ctp-mauve:     #c49055;
  --ctp-pink:      #b07840;
  --ctp-flamingo:  #d4a96a;
  --ctp-rosewater: #c49055;

  /* Semantic */
  --ctp-red:     #e07060;
  --ctp-maroon:  #d08050;
  --ctp-peach:   #d08050;
  --ctp-yellow:  #d4a96a;
  --ctp-green:   #80b870;

  /* UI tokens */
  --bg-app:      #1a1410;
  --bg-sidebar:  #0f0c07;
  --bg-card:     #201a12;
  --bg-hover:    #2a2318;
  --bg-player:   #0f0c07;
  --bg-glass:    rgba(26, 20, 16, 0.95);

  --accent:      #d4a96a;
  --accent-dim:  rgba(212, 169, 106, 0.08);
  --accent-glow: rgba(212, 169, 106, 0.15);

  --text-primary:   #f0e0c8;
  --text-secondary: #b09060;
  --text-muted:     #7a6040;

  --border:          #2a2318;
  --border-subtle:   #201a12;
  --border-dropdown: #332b1e;
  --shadow-dropdown: rgba(0, 0, 0, 0.90);

  --positive: #80b870;
  --warning:  #d4a96a;
  --danger:   #e07060;
}

/* ─── Phosphor Green ─── */
[data-theme='phosphor-green'] {
  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%234ade80%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");

  /* Backgrounds */
  --ctp-crust:    #050e05;
  --ctp-mantle:   #070f07;
  --ctp-base:     #0d1a0d;
  --ctp-surface0: #111f11;
  --ctp-surface1: #162616;
  --ctp-surface2: #1c2e1c;

  /* Overlays */
  --ctp-overlay0: #2d5a2d;
  --ctp-overlay1: #3d7a3d;
  --ctp-overlay2: #4d9a4d;

  /* Text */
  --ctp-text:     #d0f0d0;
  --ctp-subtext1: #a0d0a0;
  --ctp-subtext0: #70aa70;

  /* Phosphor green accent */
  --ctp-teal:      #4ade80;
  --ctp-sky:       #4ade80;
  --ctp-sapphire:  #38c070;
  --ctp-blue:      #2aa060;
  --ctp-lavender:  #4ade80;
  --ctp-mauve:     #38c070;
  --ctp-pink:      #2aa060;
  --ctp-flamingo:  #4ade80;
  --ctp-rosewater: #38c070;

  /* Semantic */
  --ctp-red:     #e06060;
  --ctp-maroon:  #c07840;
  --ctp-peach:   #c07840;
  --ctp-yellow:  #b0b050;
  --ctp-green:   #4ade80;

  /* UI tokens */
  --bg-app:      #0d1a0d;
  --bg-sidebar:  #070f07;
  --bg-card:     #111f11;
  --bg-hover:    #162616;
  --bg-player:   #070f07;
  --bg-glass:    rgba(13, 26, 13, 0.95);

  --accent:      #4ade80;
  --accent-dim:  rgba(74, 222, 128, 0.07);
  --accent-glow: rgba(74, 222, 128, 0.14);

  --text-primary:   #d0f0d0;
  --text-secondary: #70aa70;
  --text-muted:     #3d6a3d;

  --border:          #1c2e1c;
  --border-subtle:   #111f11;
  --border-dropdown: #223022;
  --shadow-dropdown: rgba(0, 0, 0, 0.88);

  --positive: #4ade80;
  --warning:  #b0b050;
  --danger:   #e06060;
}

/* ─── Midnight Blue ─── */
[data-theme='midnight-blue'] {
  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%2360a5fa%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");

  /* 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:     #3a5070;

  --border:          #1c2838;
  --border-subtle:   #111a28;
  --border-dropdown: #223040;
  --shadow-dropdown: rgba(0, 0, 0, 0.90);

  --positive: #60c880;
  --warning:  #c8b850;
  --danger:   #e07070;
}

/* ─── Rose Dark ─── */
[data-theme='rose-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%23f472b6%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");

  /* Backgrounds */
  --ctp-crust:    #0e080b;
  --ctp-mantle:   #120a0e;
  --ctp-base:     #1a0d14;
  --ctp-surface0: #20111a;
  --ctp-surface1: #281520;
  --ctp-surface2: #301a27;

  /* Overlays */
  --ctp-overlay0: #5a2a40;
  --ctp-overlay1: #7a3a58;
  --ctp-overlay2: #9a5070;

  /* Text */
  --ctp-text:     #f0d0e0;
  --ctp-subtext1: #d8a0c0;
  --ctp-subtext0: #b07090;

  /* Pink accent */
  --ctp-teal:      #f472b6;
  --ctp-sky:       #f472b6;
  --ctp-sapphire:  #e055a0;
  --ctp-blue:      #c8408a;
  --ctp-lavender:  #f472b6;
  --ctp-mauve:     #e055a0;
  --ctp-pink:      #c8408a;
  --ctp-flamingo:  #f472b6;
  --ctp-rosewater: #e055a0;

  /* Semantic */
  --ctp-red:     #e06070;
  --ctp-maroon:  #d07850;
  --ctp-peach:   #d07850;
  --ctp-yellow:  #c8a850;
  --ctp-green:   #70b880;

  /* UI tokens */
  --bg-app:      #1a0d14;
  --bg-sidebar:  #120a0e;
  --bg-card:     #20111a;
  --bg-hover:    #281520;
  --bg-player:   #120a0e;
  --bg-glass:    rgba(26, 13, 20, 0.95);

  --accent:      #f472b6;
  --accent-dim:  rgba(244, 114, 182, 0.07);
  --accent-glow: rgba(244, 114, 182, 0.14);

  --text-primary:   #f0d0e0;
  --text-secondary: #b07090;
  --text-muted:     #704858;

  --border:          #281520;
  --border-subtle:   #20111a;
  --border-dropdown: #341a28;
  --shadow-dropdown: rgba(0, 0, 0, 0.90);

  --positive: #70b880;
  --warning:  #c8a850;
  --danger:   #e06070;
}

/* ─── Sepia Dark ─── */
[data-theme='sepia-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%23c8b89a%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");

  /* 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:     #706050;

  --border:          #2e281e;
  --border-subtle:   #252018;
  --border-dropdown: #3a3025;
  --shadow-dropdown: rgba(0, 0, 0, 0.88);

  --positive: #80a870;
  --warning:  #b8a050;
  --danger:   #c87060;
}

/* ─── Ice Blue ─── */
[data-theme='ice-blue'] {
  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%237dd3e8%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");

  /* Backgrounds */
  --ctp-crust:    #07101a;
  --ctp-mantle:   #09141e;
  --ctp-base:     #0e1d28;
  --ctp-surface0: #132430;
  --ctp-surface1: #192c3a;
  --ctp-surface2: #203444;

  /* Overlays */
  --ctp-overlay0: #2a4a5a;
  --ctp-overlay1: #3a6070;
  --ctp-overlay2: #4a788a;

  /* Text */
  --ctp-text:     #cce8f0;
  --ctp-subtext1: #9accd8;
  --ctp-subtext0: #68a8b8;

  /* Icy cyan accent */
  --ctp-teal:      #7dd3e8;
  --ctp-sky:       #7dd3e8;
  --ctp-sapphire:  #60bcd5;
  --ctp-blue:      #48a8c0;
  --ctp-lavender:  #7dd3e8;
  --ctp-mauve:     #60bcd5;
  --ctp-pink:      #48a8c0;
  --ctp-flamingo:  #7dd3e8;
  --ctp-rosewater: #60bcd5;

  /* Semantic */
  --ctp-red:     #e07878;
  --ctp-maroon:  #d09858;
  --ctp-peach:   #d09858;
  --ctp-yellow:  #c8c060;
  --ctp-green:   #60c898;

  /* UI tokens */
  --bg-app:      #0e1d28;
  --bg-sidebar:  #09141e;
  --bg-card:     #132430;
  --bg-hover:    #192c3a;
  --bg-player:   #09141e;
  --bg-glass:    rgba(14, 29, 40, 0.95);

  --accent:      #7dd3e8;
  --accent-dim:  rgba(125, 211, 232, 0.07);
  --accent-glow: rgba(125, 211, 232, 0.14);

  --text-primary:   #cce8f0;
  --text-secondary: #68a8b8;
  --text-muted:     #3a6878;

  --border:          #192c3a;
  --border-subtle:   #132430;
  --border-dropdown: #223844;
  --shadow-dropdown: rgba(0, 0, 0, 0.90);

  --positive: #60c898;
  --warning:  #c8c060;
  --danger:   #e07878;
}