/* ─────────────────────────────────────────────────────────────
   Psysonic – Design System
   Catppuccin Mocha Color Palette + Inter Typography
   ───────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@400;500;600;700&family=Outfit:wght@300..700&family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..700&family=Nunito:ital,wght@0,300..800;1,300..800&family=Rubik:ital,wght@0,300..700;1,300..700&family=Figtree:ital,wght@0,300..800;1,300..800&family=Manrope:wght@300..800&family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&family=Lexend:wght@300..700&display=swap');

/* ─── 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-overlay1);
  --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-overlay1);
  --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-overlay1);
  --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-overlay1);
  --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:       #8894a4;
  --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:       #8894a4;
  --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:    #686866;
  --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:    #6e6e88;
  --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;
}

/* ─── Lambda 17 ─── */
[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");

  --ctp-crust:    #0a0b0c;
  --ctp-mantle:   #101214;
  --ctp-base:     #14171a;
  --ctp-surface0: #1c1f22;
  --ctp-surface1: #25292d;
  --ctp-surface2: #2d3237;
  --ctp-overlay0: #4a4f54;
  --ctp-overlay1: #6b7279;
  --ctp-overlay2: #8c959d;
  --ctp-text:     #ffb000;
  --ctp-subtext1: #e09000;
  --ctp-subtext0: #a0a5a9;
  --ctp-mauve:    #ff9d00;
  --ctp-lavender: #ffb84d;
  --ctp-pink:     #ff5555;
  --ctp-flamingo: #ff6e6e;
  --ctp-rosewater:#ffb000;
  --ctp-green:    #50fa7b;
  --ctp-teal:     #33cccc;
  --ctp-sky:      #8be9fd;
  --ctp-blue:     #33cccc;
  --ctp-sapphire: #33cccc;
  --ctp-yellow:   #f1fa8c;
  --ctp-peach:    #ffb000;
  --ctp-maroon:   #ff5555;
  --ctp-red:      #ff5555;

  --bg-app:        #14171a;
  --bg-sidebar:    #101214;
  --bg-card:       #1c1f22;
  --bg-hover:      rgba(255, 157, 0, 0.1);
  --bg-player:     #0a0b0c;
  --bg-glass:      rgba(20, 23, 26, 0.85);
  --accent:        #ff9d00;
  --accent-dim:    rgba(255, 157, 0, 0.15);
  --accent-glow:   rgba(255, 157, 0, 0.4);
  --text-primary:  #ffb000;
  --text-secondary:#e09000;
  --text-muted:    #6b7279;
  --border:        #2d3237;
  --border-subtle: #1c1f22;
  --border-dropdown: #2d3237;
  --shadow-dropdown: rgba(0, 0, 0, 0.7);
  --positive:      #50fa7b;
  --warning:       #f1fa8c;
  --danger:        #ff5555;
  --radius-sm: 0px;
  --radius-md: 2px;
  --radius-lg: 4px;
}

[data-theme='lambda-17'] .app-shell {
  background-image:
    linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.15) 50%),
    radial-gradient(rgba(255, 157, 0, 0.05) 0%, transparent 80%);
  background-size: 100% 4px, 100% 100%;
}

[data-theme='lambda-17'] .sidebar {
  border-right: 1px solid var(--accent);
  box-shadow: inset -10px 0 20px -15px var(--accent-glow);
}

[data-theme='lambda-17'] .player-bar {
  border-top: 2px solid var(--accent);
}

[data-theme='lambda-17'] .player-track-name {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  text-shadow: 0 0 8px var(--accent-glow);
  letter-spacing: 0.5px;
}

[data-theme='lambda-17'] .nav-link.active {
  background: var(--accent-dim);
  border-left: 3px solid var(--accent);
  color: var(--accent);
}

/* ─── Azerothian Gold ─── */
[data-theme='azerothian-gold'] {
  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%23c19e67%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: #25221e;
  --ctp-surface1: #363028;
  --ctp-surface2: #4d4538;
  --ctp-overlay0: #6b6254;
  --ctp-overlay1: #8c8170;
  --ctp-overlay2: #a69884;
  --ctp-text:     #e6dbcc;
  --ctp-subtext1: #c19e67;
  --ctp-subtext0: #a68a56;
  --ctp-mauve:    #f5d45c;
  --ctp-lavender: #ffe485;
  --ctp-pink:     #e74c3c;
  --ctp-flamingo: #e74c3c;
  --ctp-rosewater:#e6dbcc;
  --ctp-green:    #2ecc71;
  --ctp-teal:     #3498db;
  --ctp-sky:      #3498db;
  --ctp-blue:     #3498db;
  --ctp-sapphire: #3498db;
  --ctp-yellow:   #f1c40f;
  --ctp-peach:    #c19e67;
  --ctp-maroon:   #e74c3c;
  --ctp-red:      #e74c3c;

  --bg-app:        #1a1a1a;
  --bg-sidebar:    #121212;
  --bg-card:       #25221e;
  --bg-hover:      rgba(193, 158, 103, 0.1);
  --bg-player:     #0a0a0a;
  --bg-glass:      rgba(18, 18, 18, 0.85);
  --accent:        #c19e67;
  --accent-dim:    rgba(193, 158, 103, 0.15);
  --accent-glow:   rgba(193, 158, 103, 0.4);
  --text-primary:  #e6dbcc;
  --text-secondary:#c19e67;
  --text-muted:    #8c8170;
  --border:        #4d4538;
  --border-subtle: #363028;
  --border-dropdown: #4d4538;
  --shadow-dropdown: rgba(0, 0, 0, 0.7);
  --positive:      #2ecc71;
  --warning:       #f1c40f;
  --danger:        #e74c3c;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
}

[data-theme='azerothian-gold'] .sidebar {
  border-right: 2px solid var(--border);
  background: linear-gradient(180deg, #161616 0%, #0d0d0d 100%);
}

[data-theme='azerothian-gold'] .player-bar {
  border-top: 2px solid var(--border);
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.5);
}

[data-theme='azerothian-gold'] .nav-link.active {
  background: linear-gradient(90deg, rgba(193, 158, 103, 0.15) 0%, transparent 100%);
  color: var(--ctp-mauve) !important;
  text-shadow: 0 0 8px rgba(245, 212, 92, 0.4);
}

[data-theme='azerothian-gold'] .nav-link.active::before {
  background-color: var(--ctp-mauve);
  box-shadow: 0 0 10px var(--ctp-mauve);
}

[data-theme='azerothian-gold'] .player-track-name {
  color: var(--ctp-mauve);
  font-weight: 700;
}

/* ─── Ascalon ─── */
[data-theme='ascalon'] {
  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%23a68d5d%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:    #0f0d0b;
  --ctp-mantle:   #151310;
  --ctp-base:     #1c1a17;
  --ctp-surface0: #2a2722;
  --ctp-surface1: #38342d;
  --ctp-surface2: #4a453c;
  --ctp-overlay0: #6b6355;
  --ctp-overlay1: #8a7f6d;
  --ctp-overlay2: #a69882;
  --ctp-text:     #f0ead6;
  --ctp-subtext1: #d4cbb3;
  --ctp-subtext0: #b8af98;
  --ctp-mauve:    #d4af37;
  --ctp-lavender: #e5c158;
  --ctp-pink:     #b22222;
  --ctp-flamingo: #cd853f;
  --ctp-rosewater:#f0ead6;
  --ctp-green:    #6b8e23;
  --ctp-teal:     #4d5d53;
  --ctp-sky:      #87ceeb;
  --ctp-blue:     #4682b4;
  --ctp-sapphire: #4682b4;
  --ctp-yellow:   #ffcc00;
  --ctp-peach:    #cd853f;
  --ctp-maroon:   #800000;
  --ctp-red:      #b22222;

  --bg-app:        #1c1a17;
  --bg-sidebar:    #151310;
  --bg-card:       #2a2722;
  --bg-hover:      #38342d;
  --bg-player:     #0f0d0b;
  --bg-glass:      rgba(28, 26, 23, 0.85);
  --accent:        #d4af37;
  --accent-dim:    rgba(212, 175, 55, 0.15);
  --accent-glow:   rgba(212, 175, 55, 0.3);
  --text-primary:  #f0ead6;
  --text-secondary:#a69882;
  --text-muted:    #6b6355;
  --border:        #4a453c;
  --border-subtle: #2a2722;
  --border-dropdown: #4a453c;
  --shadow-dropdown: rgba(0, 0, 0, 0.7);
  --positive:      #6b8e23;
  --warning:       #cd853f;
  --danger:        #b22222;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
}

[data-theme='ascalon'] .sidebar {
  border-right: 1px solid var(--border);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 100% 4px;
}

[data-theme='ascalon'] .player-bar {
  border-top: 2px solid var(--accent);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
}

[data-theme='ascalon'] .player-track-name {
  color: var(--accent);
  text-shadow: 0 0 8px var(--accent-glow);
  font-family: 'Cinzel', serif, system-ui;
}

[data-theme='ascalon'] .nav-link.active {
  background: linear-gradient(90deg, var(--accent-dim) 0%, transparent 100%);
  border-left: 3px solid var(--accent);
  color: var(--accent);
}

[data-theme='ascalon'] .player-btn-primary {
  background: var(--accent);
  color: var(--ctp-crust);
  box-shadow: 0 0 15px var(--accent-glow);
}

[data-theme='ascalon'] .player-btn-primary:hover {
  transform: scale(1.05);
  background: var(--ctp-lavender);
}

/* ─── Grand Theft Audio ─── */
[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");

  --ctp-crust:    #0a0a0a;
  --ctp-mantle:   #0f0f0f;
  --ctp-base:     #141414;
  --ctp-surface0: #1e1e1e;
  --ctp-surface1: #282828;
  --ctp-surface2: #323232;
  --ctp-overlay0: #555555;
  --ctp-overlay1: #888888;
  --ctp-overlay2: #aaaaaa;
  --ctp-text:     #ffffff;
  --ctp-subtext1: #cccccc;
  --ctp-subtext0: #999999;
  --ctp-mauve:    #57b05a;
  --ctp-lavender: #76d379;
  --ctp-pink:     #ec4899;
  --ctp-flamingo: #f43f5e;
  --ctp-rosewater:#fda4af;
  --ctp-green:    #57b05a;
  --ctp-teal:     #4d9e50;
  --ctp-sky:      #60a5fa;
  --ctp-blue:     #3b82f6;
  --ctp-sapphire: #2563eb;
  --ctp-yellow:   #fbbf24;
  --ctp-peach:    #f59e0b;
  --ctp-maroon:   #b91c1c;
  --ctp-red:      #ef4444;

  --bg-app:        #141414;
  --bg-sidebar:    #0f0f0f;
  --bg-card:       #1e1e1e;
  --bg-hover:      rgba(87, 176, 90, 0.1);
  --bg-player:     #0a0a0a;
  --bg-glass:      rgba(15, 15, 15, 0.85);
  --accent:        #57b05a;
  --accent-dim:    rgba(87, 176, 90, 0.15);
  --accent-glow:   rgba(87, 176, 90, 0.4);
  --text-primary:  #ffffff;
  --text-secondary:#999999;
  --text-muted:    #666666;
  --border:        #333333;
  --border-subtle: #1e1e1e;
  --border-dropdown: #333333;
  --shadow-dropdown: rgba(0, 0, 0, 0.8);
  --positive:      #57b05a;
  --warning:       #fbbf24;
  --danger:        #ef4444;
  --radius-sm: 0px;
  --radius-md: 2px;
  --radius-lg: 4px;
}

[data-theme='grand-theft-audio'] .sidebar {
  border-right: 2px solid var(--accent);
}

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

[data-theme='grand-theft-audio'] .player-track-name {
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.5px;
}

[data-theme='grand-theft-audio'] .nav-link.active {
  background: linear-gradient(90deg, rgba(87, 176, 90, 0.2) 0%, transparent 100%);
  color: var(--accent);
}

[data-theme='grand-theft-audio'] .nav-link.active::before {
  width: 4px;
  box-shadow: 2px 0 10px var(--accent-glow);
}

[data-theme='grand-theft-audio'] .btn-primary {
  text-transform: uppercase;
  font-weight: bold;
}

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

  --ctp-crust:    #000000;
  --ctp-mantle:   #0a0a0a;
  --ctp-base:     #050505;
  --ctp-surface0: #151515;
  --ctp-surface1: #202020;
  --ctp-surface2: #2a2a2a;
  --ctp-overlay0: #444444;
  --ctp-overlay1: #666666;
  --ctp-overlay2: #888888;
  --ctp-text:     #f0f0f0;
  --ctp-subtext1: #cccccc;
  --ctp-subtext0: #aaaaaa;
  --ctp-mauve:    #FCEE0A;
  --ctp-lavender: #fff34d;
  --ctp-pink:     #ff00ff;
  --ctp-flamingo: #FF003C;
  --ctp-rosewater:#ffcccc;
  --ctp-green:    #00ff9f;
  --ctp-teal:     #00f0ff;
  --ctp-sky:      #00f0ff;
  --ctp-blue:     #3e59ff;
  --ctp-sapphire: #2233aa;
  --ctp-yellow:   #FCEE0A;
  --ctp-peach:    #ffb800;
  --ctp-maroon:   #880000;
  --ctp-red:      #FF003C;

  --bg-app:        #050505;
  --bg-sidebar:    #0a0a0a;
  --bg-card:       #151515;
  --bg-hover:      rgba(252, 238, 10, 0.1);
  --bg-player:     #000000;
  --bg-glass:      rgba(5, 5, 5, 0.85);
  --accent:        #FCEE0A;
  --accent-dim:    rgba(252, 238, 10, 0.15);
  --accent-glow:   rgba(252, 238, 10, 0.4);
  --text-primary:  #f0f0f0;
  --text-secondary:#cccccc;
  --text-muted:    #666666;
  --border:        #FCEE0A;
  --border-subtle: #2a2a2a;
  --border-dropdown: #2a2a2a;
  --shadow-dropdown: rgba(0, 0, 0, 0.9);
  --positive:      #00ff9f;
  --warning:       #ffb800;
  --danger:        #FF003C;
  --radius-sm: 0px;
  --radius-md: 2px;
  --radius-lg: 4px;
}

[data-theme='nightcity-2077'] .sidebar {
  border-right: 1px solid var(--accent);
  box-shadow: 2px 0 10px rgba(252, 238, 10, 0.1);
}

[data-theme='nightcity-2077'] .player-bar {
  border-top: 2px solid var(--accent);
  background: linear-gradient(to bottom, #111, #000);
}

[data-theme='nightcity-2077'] .player-track-name {
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 1px;
  text-shadow: 0 0 5px rgba(252, 238, 10, 0.5);
}

[data-theme='nightcity-2077'] .nav-link.active {
  background: linear-gradient(90deg, rgba(252, 238, 10, 0.2) 0%, transparent 100%);
  color: var(--accent);
  border-left: 3px solid var(--accent);
}

[data-theme='nightcity-2077'] .nav-link.active::before {
  display: none;
}

[data-theme='nightcity-2077'] .btn-primary {
  background-color: var(--accent);
  color: #000;
  font-weight: bold;
  text-transform: uppercase;
  clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 90% 100%, 0% 100%);
}

/* ─── Imperial Sith ─── */
[data-theme='imperial-sith'] {
  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%23e60000%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:   #0a0a0c;
  --ctp-base:     #0f0f11;
  --ctp-surface0: #1a1a1d;
  --ctp-surface1: #252529;
  --ctp-surface2: #303035;
  --ctp-overlay0: #4a4a4f;
  --ctp-overlay1: #6e6e75;
  --ctp-overlay2: #929299;
  --ctp-text:     #f0f0f0;
  --ctp-subtext1: #c2c2c9;
  --ctp-subtext0: #9e9ea5;
  --ctp-mauve:    #e60000;
  --ctp-lavender: #ff3333;
  --ctp-pink:     #ff0000;
  --ctp-flamingo: #ff3333;
  --ctp-rosewater:#f0f0f0;
  --ctp-green:    #2ecc71;
  --ctp-teal:     #1abc9c;
  --ctp-sky:      #3498db;
  --ctp-blue:     #3498db;
  --ctp-sapphire: #2980b9;
  --ctp-yellow:   #ffcc00;
  --ctp-peach:    #e67e22;
  --ctp-maroon:   #c0392b;
  --ctp-red:      #ff0000;

  --bg-app:        #0f0f11;
  --bg-sidebar:    #0a0a0c;
  --bg-card:       #1a1a1d;
  --bg-hover:      #252529;
  --bg-player:     #050505;
  --bg-glass:      rgba(15, 15, 17, 0.85);
  --accent:        #e60000;
  --accent-dim:    rgba(230, 0, 0, 0.15);
  --accent-glow:   rgba(230, 0, 0, 0.45);
  --text-primary:  #f0f0f0;
  --text-secondary:#c2c2c9;
  --text-muted:    #6e6e75;
  --border:        #252529;
  --border-subtle: #1a1a1d;
  --border-dropdown: #252529;
  --shadow-dropdown: rgba(0, 0, 0, 0.85);
  --positive:      #2ecc71;
  --warning:       #ffcc00;
  --danger:        #ff0000;
  --radius-sm: 0px;
  --radius-md: 2px;
  --radius-lg: 4px;
}

[data-theme='imperial-sith'] .sidebar {
  border-right: 1px solid #1a1a1d;
  background: linear-gradient(180deg, #0a0a0c 0%, #050505 100%);
}

[data-theme='imperial-sith'] .player-bar {
  border-top: 1px solid #e6000033;
  box-shadow: 0 -4px 20px rgba(230, 0, 0, 0.1);
}

[data-theme='imperial-sith'] .player-track-name {
  color: #f0f0f0;
  text-shadow: 0 0 10px rgba(230, 0, 0, 0.6);
  font-family: 'JetBrains Mono', monospace;
}

[data-theme='imperial-sith'] .nav-link.active {
  background: linear-gradient(90deg, rgba(230, 0, 0, 0.1) 0%, transparent 100%);
}

[data-theme='imperial-sith'] .nav-link.active::before {
  box-shadow: 0 0 10px #e60000;
}

[data-theme='imperial-sith'] .btn-primary {
  box-shadow: 0 0 15px rgba(230, 0, 0, 0.4);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ─── Heisenberg ─── */
[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%233fe0ff%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:    #0a0c0a;
  --ctp-mantle:   #121512;
  --ctp-base:     #1a1d1a;
  --ctp-surface0: #242824;
  --ctp-surface1: #2e332e;
  --ctp-surface2: #383d38;
  --ctp-overlay0: #5c635c;
  --ctp-overlay1: #7f897f;
  --ctp-overlay2: #a2b0a2;
  --ctp-text:     #e0e7e0;
  --ctp-subtext1: #b0b8b0;
  --ctp-subtext0: #8a928a;
  --ctp-mauve:    #3fe0ff;
  --ctp-lavender: #87f0ff;
  --ctp-pink:     #ff79c6;
  --ctp-flamingo: #ffb86c;
  --ctp-rosewater:#f8f8f2;
  --ctp-green:    #47d08a;
  --ctp-teal:     #2bbbad;
  --ctp-sky:      #3fe0ff;
  --ctp-blue:     #3498db;
  --ctp-sapphire: #2980b9;
  --ctp-yellow:   #f1c40f;
  --ctp-peach:    #e67e22;
  --ctp-maroon:   #c0392b;
  --ctp-red:      #ff4b2b;

  --bg-app:        #1a1d1a;
  --bg-sidebar:    #121512;
  --bg-card:       #242824;
  --bg-hover:      rgba(63, 224, 255, 0.1);
  --bg-player:     #0a0c0a;
  --bg-glass:      rgba(26, 29, 26, 0.85);
  --accent:        #3fe0ff;
  --accent-dim:    rgba(63, 224, 255, 0.15);
  --accent-glow:   rgba(63, 224, 255, 0.4);
  --text-primary:  #e0e7e0;
  --text-secondary:#b0b8b0;
  --text-muted:    #5c635c;
  --border:        #383d38;
  --border-subtle: #242824;
  --border-dropdown: #383d38;
  --shadow-dropdown: rgba(0, 0, 0, 0.8);
  --positive:      #47d08a;
  --warning:       #f1c40f;
  --danger:        #ff4b2b;
}

[data-theme='heisenberg'] .player-track-name {
  color: var(--accent);
  text-shadow: 0 0 10px var(--accent-glow);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

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

[data-theme='heisenberg'] .nav-link.active {
  background: linear-gradient(90deg, var(--accent-dim) 0%, transparent 100%);
}

[data-theme='heisenberg'] .player-bar {
  border-top: 1px solid var(--accent-dim);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
}

/* ─── A Theme of Ice and Fire ─── */
[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%2370a1ff%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:   #0d1117;
  --ctp-base:     #121820;
  --ctp-surface0: #1c2533;
  --ctp-surface1: #2a374a;
  --ctp-surface2: #384961;
  --ctp-overlay0: #5c6a7e;
  --ctp-overlay1: #7d8da3;
  --ctp-overlay2: #a0b1c7;
  --ctp-text:     #f0f4f8;
  --ctp-subtext1: #cbd5e0;
  --ctp-subtext0: #a0aec0;
  --ctp-mauve:    #70a1ff;
  --ctp-lavender: #a4b0be;
  --ctp-pink:     #ff4757;
  --ctp-flamingo: #ff6b81;
  --ctp-rosewater:#f0f4f8;
  --ctp-green:    #2ed573;
  --ctp-teal:     #1e90ff;
  --ctp-sky:      #70a1ff;
  --ctp-blue:     #1e90ff;
  --ctp-sapphire: #1e90ff;
  --ctp-yellow:   #ffa502;
  --ctp-peach:    #ffa502;
  --ctp-maroon:   #c0392b;
  --ctp-red:      #ff4757;

  --bg-app:        #121820;
  --bg-sidebar:    #0d1117;
  --bg-card:       #1c2533;
  --bg-hover:      rgba(112, 161, 255, 0.1);
  --bg-player:     #05070a;
  --bg-glass:      rgba(13, 17, 23, 0.85);
  --accent:        #70a1ff;
  --accent-dim:    rgba(112, 161, 255, 0.15);
  --accent-glow:   rgba(112, 161, 255, 0.25);
  --volume-accent: #ffa502;
  --text-primary:  #f0f4f8;
  --text-secondary:#cbd5e0;
  --text-muted:    #5c6a7e;
  --border:        #2a374a;
  --border-subtle: #1c2533;
  --border-dropdown: #2a374a;
  --shadow-dropdown: rgba(0, 0, 0, 0.8);
  --positive:      #2ed573;
  --warning:       #ffa502;
  --danger:        #ff4757;
  --radius-sm: 1px;
  --radius-md: 2px;
  --radius-lg: 4px;
}

[data-theme='ice-and-fire'] .app-shell {
  background: radial-gradient(circle at top right, #1a2a3a, #121820);
}

[data-theme='ice-and-fire'] .sidebar {
  border-right: 1px solid #1c2533;
  background: linear-gradient(to bottom, #0d1117, #05070a);
}

[data-theme='ice-and-fire'] .player-bar {
  border-top: 2px solid #ffa502;
  box-shadow: 0 -4px 30px rgba(255, 165, 2, 0.1);
  background: #05070a;
}

[data-theme='ice-and-fire'] .nav-link.active {
  background: linear-gradient(90deg, rgba(112, 161, 255, 0.15) 0%, transparent 100%);
  color: #70a1ff;
  font-weight: 600;
  text-shadow: 0 0 10px rgba(112, 161, 255, 0.4);
}

[data-theme='ice-and-fire'] .slider-track-fill {
  background: linear-gradient(90deg, #70a1ff, #ffa502) !important;
}

[data-theme='ice-and-fire'] .player-track-name {
  color: #f0f4f8;
  text-shadow: 0 0 12px rgba(112, 161, 255, 0.6);
}

[data-theme='ice-and-fire'] .btn {
  border: 1px solid var(--border);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

/* ─── 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:    #777777;
  --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 ─── */
[data-theme='order-of-the-phoenix'] {
  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%23ff6b00%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:     #181818;
  --ctp-surface0: #222222;
  --ctp-surface1: #2a2a2a;
  --ctp-surface2: #333333;
  --ctp-overlay0: #555555;
  --ctp-overlay1: #888888;
  --ctp-overlay2: #aaaaaa;
  --ctp-text:     #f5f5f5;
  --ctp-subtext1: #d1d1d1;
  --ctp-subtext0: #b0b0b0;
  --ctp-mauve:    #e63900;
  --ctp-lavender: #ff6b00;
  --ctp-pink:     #ff0000;
  --ctp-flamingo: #ff4500;
  --ctp-rosewater:#f5f5f5;
  --ctp-green:    #228b22;
  --ctp-teal:     #008080;
  --ctp-sky:      #87ceeb;
  --ctp-blue:     #1e90ff;
  --ctp-sapphire: #1e90ff;
  --ctp-yellow:   #ffd700;
  --ctp-peach:    #ff6b00;
  --ctp-maroon:   #8b0000;
  --ctp-red:      #ff0000;

  --bg-app:        #181818;
  --bg-sidebar:    #121212;
  --bg-card:       #222222;
  --bg-hover:      rgba(230, 57, 0, 0.1);
  --bg-player:     #0a0a0a;
  --bg-glass:      rgba(24, 24, 24, 0.85);
  --accent:        #e63900;
  --accent-dim:    rgba(230, 57, 0, 0.15);
  --accent-glow:   rgba(230, 57, 0, 0.4);
  --text-primary:  #f5f5f5;
  --text-secondary:#b0b0b0;
  --text-muted:    #666666;
  --border:        #333333;
  --border-subtle: #222222;
  --border-dropdown: #333333;
  --shadow-dropdown: rgba(0, 0, 0, 0.8);
  --positive:      #228b22;
  --warning:       #ffd700;
  --danger:        #ff0000;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
}

[data-theme='order-of-the-phoenix'] .sidebar {
  border-right: 1px solid rgba(230, 57, 0, 0.2);
  background-image: linear-gradient(to bottom, rgba(230, 57, 0, 0.05), transparent);
}

[data-theme='order-of-the-phoenix'] .player-bar {
  border-top: 1px solid rgba(230, 57, 0, 0.3);
  box-shadow: 0 -4px 25px rgba(230, 57, 0, 0.15);
}

[data-theme='order-of-the-phoenix'] .player-track-name {
  color: var(--ctp-lavender);
  text-shadow: 0 0 12px rgba(255, 107, 0, 0.5);
  font-weight: 600;
}

[data-theme='order-of-the-phoenix'] .nav-link.active {
  background: linear-gradient(90deg, rgba(230, 57, 0, 0.15) 0%, transparent 100%);
  color: var(--ctp-lavender);
}

[data-theme='order-of-the-phoenix'] .nav-link.active::before {
  box-shadow: 0 0 15px var(--accent);
  background-color: var(--accent);
}

[data-theme='order-of-the-phoenix'] .btn-primary {
  background: linear-gradient(135deg, #e63900, #ff6b00);
  border: none;
  box-shadow: 0 0 15px rgba(230, 57, 0, 0.4);
}

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

  --ctp-crust:    #808080;
  --ctp-mantle:   #a0a0a0;
  --ctp-base:     #c0c0c0;
  --ctp-surface0: #dfdfdf;
  --ctp-surface1: #e0e0e0;
  --ctp-surface2: #000080;
  --ctp-overlay0: #808080;
  --ctp-overlay1: #404040;
  --ctp-overlay2: #202020;
  --ctp-text:     #000000;
  --ctp-subtext1: #222222;
  --ctp-subtext0: #444444;
  --ctp-mauve:    #000080;
  --ctp-lavender: #0000af;
  --ctp-pink:     #ff0000;
  --ctp-flamingo: #ff0000;
  --ctp-rosewater:#c0c0c0;
  --ctp-green:    #008000;
  --ctp-teal:     #008080;
  --ctp-sky:      #0000ff;
  --ctp-blue:     #0000ff;
  --ctp-sapphire: #000080;
  --ctp-yellow:   #ffff00;
  --ctp-peach:    #ff8000;
  --ctp-maroon:   #800000;
  --ctp-red:      #ff0000;

  --bg-app:        #008080;
  --bg-sidebar:    #c0c0c0;
  --bg-card:       #c0c0c0;
  --bg-hover:      #000080;
  --bg-player:     #c0c0c0;
  --bg-glass:      rgba(192, 192, 192, 0.9);
  --accent:        #000080;
  --accent-dim:    rgba(0, 0, 128, 0.1);
  --accent-glow:   rgba(0, 0, 128, 0.2);
  --text-primary:  #000000;
  --text-secondary:#000000;
  --text-muted:    #404040;
  --border:        #808080;
  --border-subtle: #a0a0a0;
  --border-dropdown: #808080;
  --shadow-dropdown: rgba(0, 0, 0, 0.3);
  --positive:      #008000;
  --warning:       #808000;
  --danger:        #ff0000;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
}

[data-theme='w98'] .app-shell {
  background-color: var(--bg-app);
}

[data-theme='w98'] .card,
[data-theme='w98'] .sidebar,
[data-theme='w98'] .player-bar,
[data-theme='w98'] .btn-surface {
  border: 1px solid #e0e0e0 !important;
  border-right-color: #808080 !important;
  border-bottom-color: #808080 !important;
  box-shadow: 1px 1px 0 0 #000, inset 1px 1px 0 0 #dfdfdf !important;
}

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

[data-theme='w98'] .nav-link:hover:not(.active) {
  outline: 1px dotted #000;
  background-color: transparent !important;
}

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

[data-theme='w98'] ::-webkit-scrollbar {
  width: 16px;
  background: #dfdfdf;
}

[data-theme='w98'] ::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  border: 1px solid #e0e0e0;
  border-right-color: #808080;
  border-bottom-color: #808080;
  box-shadow: 1px 1px 0 0 #000;
}

/* ── W98: contrast & hover fixes ── */
/* Queue round buttons default bg uses --bg-hover (#000080) → swap to silver */
[data-theme='w98'] .queue-round-btn {
  background: #d4d0c8;
  color: #000000;
}
[data-theme='w98'] .queue-round-btn:hover:not(:disabled) {
  background: #000080;
  color: #e0e0e0;
}
[data-theme='w98'] .queue-round-btn.active {
  color: #e0e0e0;
}
/* btn-surface hover: light W98 grey instead of navy */
[data-theme='w98'] .btn-surface:hover {
  background: #d4d0c8 !important;
  color: #000000;
}
/* Queue tab hover */
[data-theme='w98'] .queue-tab-btn:hover {
  background: #d4d0c8;
  color: #000000;
}
/* Hero eyebrow + meta badges: --accent (#000080) invisible on dark hero overlay */
[data-theme='w98'] .hero-eyebrow {
  color: rgba(224, 224, 224, 0.85);
}
[data-theme='w98'] .hero-meta .badge {
  background: rgba(255, 255, 255, 0.15);
  color: #e0e0e0;
}
/* Hero play/enqueue buttons */
[data-theme='w98'] .hero-play-btn {
  color: #e0e0e0;
}
/* Settings nav tabs hover */
[data-theme='w98'] .settings-tab:hover { color: #e0e0e0; }
/* Theme accordion: hover + open-state both use navy bg */
[data-theme='w98'] .theme-accordion-header:hover { color: #e0e0e0; }
[data-theme='w98'] .theme-accordion-open .theme-accordion-header { color: #e0e0e0; }
[data-theme='w98'] .theme-accordion-open .theme-accordion-chevron { color: rgba(224, 224, 224, 0.7); }
/* Language dropdown hover */
[data-theme='w98'] .custom-select-trigger:hover { color: #e0e0e0; }
[data-theme='w98'] .custom-select-option:hover { color: #e0e0e0; }
/* Genre filter keywords / artist ext links hover (!important — inline style wins otherwise) */
[data-theme='w98'] .artist-ext-link:hover { color: #e0e0e0 !important; }
/* Changelog entries hover */
[data-theme='w98'] .changelog-summary:hover { color: #e0e0e0; }
/* Keybind/global-shortcut badge buttons: --bg-hover (#000080) as static bg */
[data-theme='w98'] .keybind-badge { color: #e0e0e0 !important; }

/* ── W98: remaining navy-hover contrast fixes ── */
/* Header toggle button (queue/sidebar) */
[data-theme='w98'] .collapse-btn:hover { color: #e0e0e0; }
/* Album section nav arrows */
[data-theme='w98'] .album-row-nav .nav-btn:hover:not(.disabled) { color: #e0e0e0; }
/* Live search results */
[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: #e0e0e0; }
/* Tracklist rows — many children have explicit colors, override all */
[data-theme='w98'] .track-row:hover *,
[data-theme='w98'] .track-row.context-active * { color: #e0e0e0; }
/* Artist list rows */
[data-theme='w98'] .artist-row:hover { color: #e0e0e0; }
/* Year/decade toggle */
[data-theme='w98'] .year-toggle:hover { color: #e0e0e0; }
/* Playlist rows */
[data-theme='w98'] .playlist-row:hover,
[data-theme='w98'] .playlist-row:hover * { color: #e0e0e0; }
/* Help/FAQ */
[data-theme='w98'] .help-question:hover { color: #e0e0e0; }
[data-theme='w98'] .help-item-open .help-question { color: #e0e0e0; }
[data-theme='w98'] .help-item-open .help-chevron { color: rgba(224, 224, 224, 0.7); }
/* Now Playing action buttons + queue items */
[data-theme='w98'] .np-action-btn:hover { color: #e0e0e0; }
[data-theme='w98'] .np-queue-item:hover,
[data-theme='w98'] .np-queue-item.context-active { color: #e0e0e0; }
/* EQ buttons: static navy bg → swap to silver; hover → navy + light grey */
[data-theme='w98'] .eq-ctrl-btn { background: #d4d0c8; color: #000000; }
[data-theme='w98'] .eq-ctrl-btn:hover { background: #000080; color: #e0e0e0; }
/* Changelog inline code: navy bg + navy text = invisible → silver bg + navy text */
[data-theme='w98'] .changelog-code { background: #d4d0c8; color: #000080; }
/* Ghost buttons (e.g. "Als Favorit") — !important needed, inline color style wins otherwise */
[data-theme='w98'] .btn-ghost:hover { color: #e0e0e0 !important; }
/* Built-in keyword chips (inline style uses --bg-hover) */
[data-theme='w98'] .genre-keyword-badge { background: #d4d0c8 !important; color: #404040 !important; }
/* Toggle switch knob: hardcoded white → W98 silver-grey */
[data-theme='w98'] .toggle-track::before { background: #e0e0e0; }
/* Now Playing: song title in W98 teal (inline style needs !important) */
[data-theme='w98'] .np-title { color: #008080 !important; }
/* Queue items: keep navy hover, light grey text */
[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: #e0e0e0;
}
/* Player bar buttons: keep navy hover, light grey icon */
[data-theme='w98'] .player-btn:hover {
  color: #e0e0e0;
}
[data-theme='w98'] .player-btn-primary:hover {
  color: #e0e0e0;
}

/* ─── Global Base Settings ─── */
:root {
  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', 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:    #8E8E9F;

  --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-width: 1280px;
  min-height: 720px;
  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: var(--ctp-surface2); border-radius: var(--radius-full); }
::-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;
}

/* ─── 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);
}
.btn-surface:hover { background: var(--bg-hover); }

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

/* ─── Card ─── */
.card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 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; }

/* ─── 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='navy-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:    #6a7074;
  --border:        #8a9094;
  --border-subtle: #c0c4c6;
  --positive:      #008840;
  --warning:       #cc8800;
  --danger:        #c82020;
}

/* ── Musicmatch: contrast fixes ── */
/* Active elements: navy text on cyan bg — high contrast, on-brand */
[data-theme='navy-jukebox'] .queue-round-btn.active {
  color: #001358;
}

/* Accent-coloured text on silver body needs to be darker */
[data-theme='navy-jukebox'] {
  --accent: #0070a0;           /* darker cyan — readable as text on silver */
  --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='navy-jukebox'] .player-bar {
  --accent: #00d0ff;
}

/* ── Musicmatch: metallic bevel buttons ── */
[data-theme='navy-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: 6px;
}

[data-theme='navy-jukebox'] .btn:hover {
  background: linear-gradient(180deg, #eceef0 0%, #cacdd0 100%);
}

[data-theme='navy-jukebox'] .btn-primary {
  background: linear-gradient(180deg, #40e0ff 0%, #00a8d8 100%);
  color: #001358;
  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);
}

/* ── Player bar: blue LCD display area ── */
[data-theme='navy-jukebox'] .player-bar {
  background: #001358;
  border-top: 2px solid #8a9094;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-theme='navy-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='navy-jukebox'] .player-track-artist {
  color: #00d0ff;
  opacity: 0.85;
}

[data-theme='navy-jukebox'] .player-btn,
[data-theme='navy-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='navy-jukebox'] .player-btn:hover,
[data-theme='navy-jukebox'] .player-btn-primary:hover {
  background: linear-gradient(180deg, #2030a0 0%, #001060 100%);
  color: #40e8ff;
}

/* ── Sidebar: brushed-metal look ── */
[data-theme='navy-jukebox'] .sidebar {
  background: linear-gradient(180deg, #c8ccce 0%, #b0b4b7 100%);
  border-right: 2px solid #8a9094;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.4);
}

/* ── Cards / panels: inset bevel ── */
[data-theme='navy-jukebox'] .glass,
[data-theme='navy-jukebox'] .card {
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.8),
    inset -1px -1px 0 rgba(0, 0, 0, 0.15),
    0 2px 6px rgba(0, 0, 0, 0.12);
}

/* ─── WMP8 Classic — Windows Media Player 8 / XP Luna ─── */
[data-theme='cobalt-media'] {
  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='cobalt-media'] .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='cobalt-media'] .app-shell {
  background: linear-gradient(160deg, #4a72b8 0%, #3a62a5 40%, #2e5498 100%);
}

/* Player bar: black LCD display with green glow ambience */
[data-theme='cobalt-media'] .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='cobalt-media'] .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='cobalt-media'] .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='cobalt-media'] .player-btn,
[data-theme='cobalt-media'] .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='cobalt-media'] .player-btn:hover,
[data-theme='cobalt-media'] .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='cobalt-media'] .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='cobalt-media'] .btn:hover {
  background: linear-gradient(180deg, #cce0ff 0%, #90aaee 55%, #6888d0 100%);
}

[data-theme='cobalt-media'] .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='cobalt-media'] .queue-round-btn.active {
  color: #003300;
}

/* Cards / glass panels: slightly elevated with border */
[data-theme='cobalt-media'] .glass,
[data-theme='cobalt-media'] .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='cobalt-media'] .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 ─── */
[data-theme='onyx-cinema'] {
  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%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");

  /* ── Palette ── */
  --ctp-crust:     #000000;   /* pure black — VFD glass */
  --ctp-mantle:    #0a0a0a;   /* drive bay depth */
  --ctp-base:      #141414;   /* brushed aluminium chassis */
  --ctp-surface0:  #1c1c1c;
  --ctp-surface1:  #242424;
  --ctp-surface2:  #2e2e2e;
  --ctp-overlay0:  #3a3a3a;
  --ctp-overlay1:  #4a4a4a;
  --ctp-overlay2:  #5a5a5a;
  --ctp-text:      #b3b3b3;   /* matte metal label */
  --ctp-subtext1:  #888888;
  --ctp-subtext0:  #666666;
  /* VFD blue + chrome accents */
  --ctp-mauve:     #00aaff;   /* VFD blue — primary accent */
  --ctp-lavender:  #00c8ff;
  --ctp-sky:       #00e5ff;   /* glow/highlight cyan */
  --ctp-teal:      #00cccc;
  --ctp-blue:      #0080e0;
  --ctp-sapphire:  #0060c0;
  --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:        #141414;
  --bg-sidebar:    #0a0a0a;
  --bg-card:       #1c1c1c;
  --bg-hover:      #242424;
  --bg-player:     #000000;
  --bg-glass:      rgba(20, 20, 20, 0.94);
  --accent:        #00aaff;
  --accent-dim:    rgba(0, 170, 255, 0.12);
  --accent-glow:   rgba(0, 170, 255, 0.35);
  --text-primary:  #b3b3b3;
  --text-secondary:#888888;
  --text-muted:    #555555;
  --border:        #2a2a2a;
  --border-subtle: #1c1c1c;
  --positive:      #00cc66;
  --warning:       #ccaa00;
  --danger:        #cc2222;
}

/* ── PowerDVD: Brushed aluminium chassis texture ── */
[data-theme='onyx-cinema'] .app-shell,
[data-theme='onyx-cinema'] .sidebar {
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.018) 0px,
    rgba(255, 255, 255, 0.018) 1px,
    transparent 1px,
    transparent 3px
  );
}

/* Sidebar: darker than chassis, drive-bay feel */
[data-theme='onyx-cinema'] .sidebar {
  background-color: #0a0a0a;
  border-right: 1px solid #1e1e1e;
  box-shadow: inset -2px 0 4px rgba(0, 0, 0, 0.6);
}

/* ── VFD Display (Player Bar) ── */
[data-theme='onyx-cinema'] .player-bar {
  background: #000000;
  border-top: 2px solid #1a1a1a;
  box-shadow:
    inset 0 1px 0 rgba(0, 170, 255, 0.06),
    0 -3px 20px rgba(0, 0, 0, 0.8);
}

/* Track name: VFD blue glow — the key effect */
[data-theme='onyx-cinema'] .player-track-name {
  color: #00e5ff;
  text-shadow:
    0 0 6px rgba(0, 229, 255, 0.90),
    0 0 14px rgba(0, 170, 255, 0.60),
    0 0 28px rgba(0, 170, 255, 0.30);
  letter-spacing: 0.04em;
}

[data-theme='onyx-cinema'] .player-track-artist {
  color: #00aaff;
  text-shadow: 0 0 6px rgba(0, 170, 255, 0.55);
  opacity: 1;
}

/* Time display: VFD blue, tabular */
[data-theme='onyx-cinema'] .player-time {
  color: #00aaff;
  text-shadow: 0 0 5px rgba(0, 170, 255, 0.60);
}

/* ── Chrome transport buttons: silver metallic ── */
[data-theme='onyx-cinema'] .player-btn,
[data-theme='onyx-cinema'] .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 6px rgba(0, 0, 0, 0.7),
    0 1px 2px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

[data-theme='onyx-cinema'] .player-btn:hover,
[data-theme='onyx-cinema'] .player-btn-primary:hover {
  background: linear-gradient(170deg, #f2f2f2 0%, #ffffff 30%, #d0d0d0 70%, #aaaaaa 100%);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.7),
    0 1px 2px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

/* ── Regular buttons: dark matte chassis style ── */
[data-theme='onyx-cinema'] .btn {
  background: linear-gradient(180deg, #2a2a2a 0%, #1c1c1c 100%);
  color: #b3b3b3;
  border: 1px solid #383838;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 3px rgba(0, 0, 0, 0.5);
}

[data-theme='onyx-cinema'] .btn:hover {
  background: linear-gradient(180deg, #333333 0%, #242424 100%);
}

[data-theme='onyx-cinema'] .btn-primary {
  background: linear-gradient(180deg, #00bbff 0%, #0088dd 100%);
  color: #000000;
  border: 1px solid #0060bb;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 1px 4px rgba(0, 0, 0, 0.4),
    0 0 8px rgba(0, 170, 255, 0.3);
}

/* Active queue round buttons: dark text on VFD blue */
[data-theme='onyx-cinema'] .queue-round-btn.active {
  color: #000000;
}

/* Cards / glass panels: chassis inset */
[data-theme='onyx-cinema'] .glass,
[data-theme='onyx-cinema'] .card {
  background: rgba(28, 28, 28, 0.85);
  border: 1px solid #2a2a2a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* ─── 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:    #8D6E63;
  --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 ─── */
[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:     #1d4268;   /* Aero taskbar navy */
  --ctp-mantle:    #e6f0fa;   /* inner glass panel */
  --ctp-base:      #cddbed;   /* window glass blue-gray */
  --ctp-surface0:  #d8e6f2;
  --ctp-surface1:  #e0ecf5;
  --ctp-surface2:  #e8f2f8;
  --ctp-overlay0:  #a9c4eb;
  --ctp-overlay1:  #8ab0de;
  --ctp-overlay2:  #6a9cd0;
  --ctp-text:      #1a1a1a;
  --ctp-subtext1:  #2e4260;
  --ctp-subtext0:  #4c607a;
  /* Aero blue highlight palette */
  --ctp-mauve:     #1878e8;   /* Windows highlight blue */
  --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:        #cddbed;
  --bg-sidebar:    #e6f0fa;
  --bg-card:       #d8e6f2;
  --bg-hover:      #c0d8ef;
  --bg-player:     #1d4268;
  --bg-glass:      rgba(205, 219, 237, 0.70);
  --accent:        #1878e8;   /* 4.0:1 on #cddbed ✓ */
  --accent-dim:    rgba(24, 120, 232, 0.12);
  --accent-glow:   rgba(24, 120, 232, 0.35);
  --text-primary:  #1a1a1a;
  --text-secondary:#2e4260;
  --text-muted:    #4c607a;
  --border:        #a9c4eb;
  --border-subtle: #d0e3f5;
  --positive:      #107c10;
  --warning:       #c87400;
  --danger:        #c42b1c;
}

/* ── Aero: background — soft sky gradient ── */
[data-theme='aero-glass'] .app-shell {
  background: linear-gradient(160deg, #daeaf8 0%, #cddbed 45%, #b8d0e8 100%);
}

/* ── Sidebar: Aero glass panel with backdrop blur ── */
[data-theme='aero-glass'] .sidebar {
  background: rgba(230, 240, 250, 0.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-right: 1px solid rgba(169, 196, 235, 0.75);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.6);
}

/* ── Player bar: Aero taskbar — deep glass navy ── */
[data-theme='aero-glass'] .player-bar {
  background: rgba(29, 66, 104, 0.90);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(100, 160, 220, 0.45);
  box-shadow: inset 0 1px 0 rgba(120, 180, 255, 0.15), 0 -2px 12px rgba(0, 0, 0, 0.3);
}

/* Track name: white on dark taskbar, subtle blue glow */
[data-theme='aero-glass'] .player-track-name {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(51, 153, 255, 0.60), 0 1px 2px rgba(0, 0, 0, 0.4);
}

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

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

/* ── Transport buttons: glossy Aero pill ── */
[data-theme='aero-glass'] .player-btn,
[data-theme='aero-glass'] .player-btn-primary {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.75) 0%,
    rgba(200, 228, 255, 0.80) 48%,
    rgba(90, 160, 230, 0.90) 50%,
    rgba(40, 120, 200, 0.95) 100%
  );
  color: #ffffff;
  border: 1px solid rgba(24, 80, 180, 0.55);
  border-radius: 50%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 2px 6px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(100, 160, 220, 0.3);
}

[data-theme='aero-glass'] .player-btn:hover,
[data-theme='aero-glass'] .player-btn-primary:hover {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(215, 238, 255, 0.88) 48%,
    rgba(110, 175, 245, 0.93) 50%,
    rgba(55, 135, 215, 0.98) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 3px 8px rgba(0, 0, 0, 0.35),
    0 0 8px rgba(51, 153, 255, 0.40);
}

/* ── Regular buttons: glossy Aero style ── */
[data-theme='aero-glass'] .btn {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(255, 255, 255, 0.82) 48%,
    rgba(195, 220, 245, 0.92) 50%,
    rgba(160, 200, 240, 0.95) 100%
  );
  color: #1a1a1a;
  border: 1px solid rgba(130, 175, 220, 0.70);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.90),
    0 1px 3px rgba(0, 0, 0, 0.18);
  border-radius: 4px;
}

[data-theme='aero-glass'] .btn:hover {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.92) 48%,
    rgba(210, 232, 252, 0.95) 50%,
    rgba(175, 212, 248, 0.98) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 1px 4px rgba(0, 0, 0, 0.20),
    0 0 6px rgba(51, 153, 255, 0.25);
}

[data-theme='aero-glass'] .btn-primary {
  background: linear-gradient(180deg,
    rgba(110, 180, 255, 0.90) 0%,
    rgba(80, 155, 240, 0.90) 48%,
    rgba(24, 100, 200, 0.95) 50%,
    rgba(15, 75, 170, 0.98) 100%
  );
  color: #ffffff;
  border: 1px solid rgba(15, 60, 150, 0.70);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 1px 4px rgba(0, 0, 0, 0.3),
    0 0 8px rgba(51, 153, 255, 0.35);
}

/* Active queue buttons: white text on blue */
[data-theme='aero-glass'] .queue-round-btn.active {
  color: #ffffff;
  box-shadow: 0 0 6px rgba(51, 153, 255, 0.50);
}

/* Cards / panels: frosted glass */
[data-theme='aero-glass'] .glass,
[data-theme='aero-glass'] .card {
  background: rgba(230, 240, 250, 0.60);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(169, 196, 235, 0.65);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.70),
    0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Content header: glassy strip */
[data-theme='aero-glass'] .content-header {
  background: rgba(210, 230, 248, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(169, 196, 235, 0.60);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5);
}

/* ─── Windows XP Luna — Classic 2001 ─── */
[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:  #f5f3ec;
  --ctp-surface1:  #faf9f6;
  --ctp-surface2:  #ffffff;
  --ctp-overlay0:  #c0bba8;
  --ctp-overlay1:  #8a8675;
  --ctp-overlay2:  #5e5a4c;
  --ctp-text:      #000000;
  --ctp-subtext1:  #1a1a1a;
  --ctp-subtext0:  #444444;
  /* XP green + Luna blue family */
  --ctp-mauve:     #3c9d29;
  --ctp-lavender:  #52b83c;
  --ctp-green:     #3c9d29;
  --ctp-teal:      #007c8a;
  --ctp-sky:       #8fa8f4;
  --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:    #8fa8f4;
  --bg-card:       #f5f3ec;
  --bg-hover:      #dddac8;
  --bg-player:     #0055e5;
  --bg-glass:      rgba(236, 233, 216, 0.92);
  --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:    #666666;
  --border:        #003399;
  --border-subtle: #ccc8b4;
  --positive:      #3c9d29;
  --warning:       #b87800;
  --danger:        #cc1111;
  --radius-sm:     4px;
  --radius-md:     6px;
  --radius-lg:     8px;
}

/* ── Luna: Explorer window background ── */
[data-theme='luna-teal'] .app-shell {
  background: #ece9d8;
}

/* ── Sidebar: Luna Explorer task pane ── */
[data-theme='luna-teal'] .sidebar {
  background: linear-gradient(180deg, #a8bef8 0%, #8fa8f4 30%, #7a96ee 100%);
  border-right: 2px solid #003399;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.35), 2px 0 6px rgba(0, 0, 0, 0.18);
}

/* Sidebar text: dark on medium blue */
[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: #000e40;
}

/* Nav links: override accent-based active state */
[data-theme='luna-teal'] .nav-link {
  color: #000e40;
}
[data-theme='luna-teal'] .nav-link:hover {
  background: rgba(255, 255, 255, 0.30);
  color: #000000;
}
[data-theme='luna-teal'] .nav-link.active {
  background: rgba(0, 0, 80, 0.18);
  color: #ffffff;
}
[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: same treatment */
[data-theme='luna-teal'] .nav-link-nowplaying {
  background: rgba(0, 0, 80, 0.14);
  color: #000e40;
}
[data-theme='luna-teal'] .nav-link-nowplaying:hover {
  background: rgba(255, 255, 255, 0.30);
  color: #000000;
}
[data-theme='luna-teal'] .nav-link-nowplaying.active {
  background: rgba(0, 0, 80, 0.22);
  color: #ffffff;
}

/* ── Player bar: Luna taskbar — glossy blue ── */
[data-theme='luna-teal'] .player-bar {
  background: linear-gradient(180deg,
    #4488ff 0%,
    #0055e5 40%,
    #0044cc 70%,
    #0038b0 100%
  );
  border-top: 2px solid #6699ff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 2px 0 rgba(255, 255, 255, 0.18),
    0 -2px 8px rgba(0, 0, 0, 0.30);
}

/* Track name: white with XP title-bar glow */
[data-theme='luna-teal'] .player-track-name {
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 8px rgba(100, 160, 255, 0.50);
  font-weight: 700;
}

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

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

/* ── Transport buttons: Luna plastic/gel ── */
[data-theme='luna-teal'] .player-btn,
[data-theme='luna-teal'] .player-btn-primary {
  background: linear-gradient(180deg,
    #6699ff 0%,
    #3366ee 45%,
    #0044cc 50%,
    #0033aa 100%
  );
  color: #ffffff;
  border: 1px solid #002288;
  border-radius: 50%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.60),
    0 2px 5px rgba(0, 0, 0, 0.40);
}

[data-theme='luna-teal'] .player-btn:hover,
[data-theme='luna-teal'] .player-btn-primary:hover {
  background: linear-gradient(180deg,
    #88aaff 0%,
    #4477ff 45%,
    #1155dd 50%,
    #0044bb 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.70),
    0 3px 8px rgba(0, 0, 0, 0.40),
    0 0 10px rgba(100, 160, 255, 0.40);
}

/* ── Regular buttons: XP 3D bevel ── */
[data-theme='luna-teal'] .btn {
  background: linear-gradient(180deg, #f5f3ec 0%, #f5f3ec 48%, #e0ddd0 50%, #d4d0c0 100%);
  color: #000000;
  border: 1px solid #888480;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.90),
    inset 1px 0 0 rgba(255, 255, 255, 0.70),
    0 1px 2px rgba(0, 0, 0, 0.22);
  border-radius: 4px;
}

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

[data-theme='luna-teal'] .btn-primary {
  background: linear-gradient(180deg,
    #52cc3c 0%,
    #3c9d29 45%,
    #2e8020 50%,
    #236618 100%
  );
  color: #ffffff;
  border: 1px solid #1a5010;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.50),
    0 1px 3px rgba(0, 0, 0, 0.30);
  border-radius: 6px;
}

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

[data-theme='luna-teal'] .btn-surface {
  background: linear-gradient(180deg, #f5f3ec 0%, #e0ddd0 100%);
  color: #000000;
  border: 1px solid #888480;
}

/* ── Cards: XP dialog/panel style ── */
[data-theme='luna-teal'] .card {
  background: #f5f3ec;
  border: 1px solid #c0bba8;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.80),
    0 1px 4px rgba(0, 0, 0, 0.12);
  border-radius: 6px;
}

/* ── Content header: Luna title bar strip ── */
[data-theme='luna-teal'] .content-header {
  background: linear-gradient(180deg, #b8c8f8 0%, #8fa8f4 100%);
  border-bottom: 2px solid #003399;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.50), 0 2px 4px rgba(0, 0, 0, 0.12);
}

/* Connection indicators: dark text on blue header */
[data-theme='luna-teal'] .connection-type,
[data-theme='luna-teal'] .connection-server {
  color: #000e40;
}

/* Active queue item: deep XP blue instead of green */
[data-theme='luna-teal'] .queue-item.active {
  background: rgba(0, 55, 180, 0.10);
  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.8;
}

/* NowPlaying page active track title */
[data-theme='luna-teal'] .np-queue-item-active {
  color: #0041b8;
}
[data-theme='luna-teal'] .np-queue-item.active {
  background: rgba(0, 55, 180, 0.08);
}

/* NowPlaying album tracklist active */
[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:    #8e8e93;
  --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='outfit'] {
  --font-sans: 'Outfit', system-ui, sans-serif;
  --font-display: 'Outfit', sans-serif;
}
[data-font='dm-sans'] {
  --font-sans: 'DM Sans', system-ui, sans-serif;
  --font-display: 'DM Sans', sans-serif;
}
[data-font='nunito'] {
  --font-sans: 'Nunito', system-ui, sans-serif;
  --font-display: 'Nunito', sans-serif;
}
[data-font='rubik'] {
  --font-sans: 'Rubik', system-ui, sans-serif;
  --font-display: 'Rubik', sans-serif;
}

[data-font='space-grotesk'] {
  --font-sans: 'Space Grotesk', system-ui, sans-serif;
  --font-display: 'Space Grotesk', sans-serif;
}
[data-font='figtree'] {
  --font-sans: 'Figtree', system-ui, sans-serif;
  --font-display: 'Figtree', sans-serif;
}
[data-font='manrope'] {
  --font-sans: 'Manrope', system-ui, sans-serif;
  --font-display: 'Manrope', sans-serif;
}
[data-font='plus-jakarta-sans'] {
  --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-display: 'Plus Jakarta Sans', sans-serif;
}
[data-font='lexend'] {
  --font-sans: 'Lexend', system-ui, sans-serif;
  --font-display: 'Lexend', sans-serif;
}

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

[data-theme='middle-earth'] {
  color-scheme: light;
  --color-star-active: #4a3728;
  --color-star-inactive: #6e5a42;

  --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");

  --ctp-crust:    #2a1d15;
  --ctp-mantle:   #3b2a1e;
  --ctp-base:     #f4e4bc;
  --ctp-surface0: #ebd5a3;
  --ctp-surface1: #dec48d;
  --ctp-surface2: #cbb07c;
  --ctp-overlay0: #8c7356;
  --ctp-overlay1: #6e5a42;
  --ctp-overlay2: #4a3728;
  --ctp-text:     #2a1d15;
  --ctp-subtext1: #4a3728;
  --ctp-subtext0: #6e5a42;
  --ctp-mauve:    #d4af37;
  --ctp-lavender: #e5c158;
  --ctp-green:    #4a7040;
  --ctp-teal:     #3e5a5a;
  --ctp-sky:      #78a2c0;
  --ctp-blue:     #4a6b8a;
  --ctp-sapphire: #2a4b6a;
  --ctp-pink:     #b05a7e;
  --ctp-flamingo: #c07a7a;
  --ctp-rosewater:#e5caca;
  --ctp-yellow:   #d4af37;
  --ctp-peach:    #c08a4a;
  --ctp-maroon:   #6a2a2a;
  --ctp-red:      #8a2a2a;

  --bg-app:        #f4e4bc;
  --bg-sidebar:    #3b2a1e;
  --bg-card:       #ebd5a3;
  --bg-hover:      rgba(74, 55, 40, 0.1);
  --bg-player:     #2a1d15;
  --bg-glass:      rgba(244, 228, 188, 0.85);

  --accent:        #d4af37;
  --accent-dim:    rgba(212, 175, 55, 0.2);
  --accent-glow:   rgba(212, 175, 55, 0.4);

  --text-primary:  #2a1d15;
  --text-secondary:#4a3728;
  --text-muted:    #8c7356;

  --border:        #cbb07c;
  --border-subtle: #dec48d;

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

[data-theme='middle-earth'] .player-track-name {
  color: #f4e4bc;
  font-family: Georgia, 'Times New Roman', serif;
  letter-spacing: 0.5px;
}
[data-theme='middle-earth'] .player-track-artist { color: #d4af37; }
[data-theme='middle-earth'] .player-time { color: #dec48d; }

[data-theme='middle-earth'] .sidebar {
  border-right: 1px solid rgba(212, 175, 55, 0.3);
}
[data-theme='middle-earth'] .nav-link { color: #dec48d; }
[data-theme='middle-earth'] .nav-link:hover { background: rgba(212, 175, 55, 0.1); color: #f4e4bc; }
[data-theme='middle-earth'] .nav-link.active { color: #d4af37; background: rgba(212, 175, 55, 0.15); }
[data-theme='middle-earth'] .nav-link.active::before { background-color: #d4af37; box-shadow: 0 0 10px rgba(212, 175, 55, 0.6); }

[data-theme='middle-earth'] .btn-primary {
  background: #d4af37;
  color: #2a1d15;
  font-weight: 700;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
}
[data-theme='middle-earth'] .player-btn { color: #dec48d; }
[data-theme='middle-earth'] .player-btn:hover { color: #d4af37; }
[data-theme='middle-earth'] .player-btn-primary { color: #2a1d15; }
[data-theme='middle-earth'] .player-btn-primary:hover { color: #2a1d15; }

/* Queue + Lyrics laufen auf dunklem Sidebar-Hintergrund — helle Textfarben nötig */
[data-theme='middle-earth'] .queue-current-info h3 { color: #f4e4bc; }
[data-theme='middle-earth'] .queue-current-sub { color: #d4af37; }
[data-theme='middle-earth'] .queue-item-title { color: #f4e4bc; }
[data-theme='middle-earth'] .queue-item-artist { color: #cbb07c; }
[data-theme='middle-earth'] .queue-tab-btn { color: #cbb07c; }
[data-theme='middle-earth'] .queue-tab-btn:hover { color: #f4e4bc; background: rgba(212, 175, 55, 0.1); }
[data-theme='middle-earth'] .queue-tab-btn.active { color: #d4af37; }
[data-theme='middle-earth'] .lyrics-line { color: #8c7356; }
[data-theme='middle-earth'] .lyrics-line.active { color: #f4e4bc; }
[data-theme='middle-earth'] .lyrics-plain-line { color: #cbb07c; }
[data-theme='middle-earth'] .lyrics-status { color: #8c7356; }

/* Dezentes Pergament-Noise über der App */
[data-theme='middle-earth'] .app-shell::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.03;
  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.9' 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;
}

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

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

  --ctp-crust:    #000000;
  --ctp-mantle:   #050505;
  --ctp-base:     #0a0a0a;
  --ctp-surface0: #0d1a0d;
  --ctp-surface1: #1a2e1a;
  --ctp-surface2: #243d24;
  --ctp-overlay0: #003b00;
  --ctp-overlay1: #008f11;
  --ctp-overlay2: #00ff41;
  --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:      #ff0000;

  --bg-app:        #0a0a0a;
  --bg-sidebar:    #000000;
  --bg-card:       #0d1a0d;
  --bg-hover:      rgba(0, 255, 65, 0.1);
  --bg-player:     #000000;
  --bg-glass:      rgba(0, 0, 0, 0.85);

  --accent:        #00ff41;
  --accent-dim:    rgba(0, 255, 65, 0.15);
  --accent-glow:   rgba(0, 255, 65, 0.4);

  --text-primary:  #00ff41;
  --text-secondary:#00cc33;
  --text-muted:    #1a7a2a;

  --border:        #003b00;
  --border-subtle: #001a00;

  --positive: #00ff41;
  --warning:  #adff2f;
  --danger:   #ff0033;

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

[data-theme='morpheus'] .player-track-name {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  text-shadow: 0 0 8px rgba(0, 255, 65, 0.6);
  letter-spacing: 0.05em;
}
[data-theme='morpheus'] .player-track-artist,
[data-theme='morpheus'] .player-time {
  font-family: 'JetBrains Mono', monospace;
  opacity: 0.8;
}
[data-theme='morpheus'] .nav-link.active {
  background: linear-gradient(90deg, rgba(0, 255, 65, 0.1) 0%, transparent 100%);
  text-shadow: 0 0 5px rgba(0, 255, 65, 0.4);
}
[data-theme='morpheus'] .nav-link.active::before {
  box-shadow: 0 0 8px rgba(0, 255, 65, 0.6);
}
[data-theme='morpheus'] .player-bar {
  box-shadow: 0 -5px 15px rgba(0, 255, 65, 0.05);
}
[data-theme='morpheus'] .sidebar {
  border-right: 1px solid #003b00;
}

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

[data-theme='pandora'] {
  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:    #040a0e;
  --ctp-mantle:   #08141a;
  --ctp-base:     #0c1b22;
  --ctp-surface0: #142b35;
  --ctp-surface1: #1a3844;
  --ctp-surface2: #244b5a;
  --ctp-overlay0: #4a6d7c;
  --ctp-overlay1: #6a8fa0;
  --ctp-overlay2: #8ab1c4;
  --ctp-text:     #e0f7fa;
  --ctp-subtext1: #b2ebf2;
  --ctp-subtext0: #80deea;
  --ctp-mauve:    #00f2ff;
  --ctp-lavender: #80f9ff;
  --ctp-green:    #4ade80;
  --ctp-teal:     #2dd4bf;
  --ctp-sky:      #38bdf8;
  --ctp-blue:     #60a5fa;
  --ctp-sapphire: #2563eb;
  --ctp-pink:     #f472b6;
  --ctp-flamingo: #fb7185;
  --ctp-rosewater:#ffe4e6;
  --ctp-yellow:   #fbbf24;
  --ctp-peach:    #fb923c;
  --ctp-maroon:   #e11d48;
  --ctp-red:      #f87171;

  --bg-app:        #0c1b22;
  --bg-sidebar:    #08141a;
  --bg-card:       rgba(20, 43, 53, 0.6);
  --bg-hover:      rgba(26, 56, 68, 0.4);
  --bg-player:     #040a0e;
  --bg-glass:      rgba(12, 27, 34, 0.7);

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

  --text-primary:  #e0f7fa;
  --text-secondary:#b2ebf2;
  --text-muted:    #6a8fa0;

  --border:        #1a3844;
  --border-subtle: #0f242d;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
}

[data-theme='pandora'] .sidebar {
  backdrop-filter: blur(12px);
  border-right: 1px solid rgba(0, 242, 255, 0.1);
}
[data-theme='pandora'] .player-bar {
  border-top: 1px solid rgba(0, 242, 255, 0.2);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
}
[data-theme='pandora'] .player-track-name {
  color: #00f2ff;
  text-shadow: 0 0 8px rgba(0, 242, 255, 0.6);
  font-weight: 600;
}
[data-theme='pandora'] .btn-primary {
  background: linear-gradient(135deg, #00f2ff, #0088cc);
  box-shadow: 0 0 15px rgba(0, 242, 255, 0.3);
  color: #040a0e;
}
[data-theme='pandora'] .nav-link.active {
  background: linear-gradient(90deg, rgba(0, 242, 255, 0.15), transparent);
  color: #00f2ff;
  text-shadow: 0 0 5px rgba(0, 242, 255, 0.4);
}
[data-theme='pandora'] .card:hover {
  border: 1px solid rgba(0, 242, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 242, 255, 0.1);
}

/* ─────────────────────────────────────────────────────────────
   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:    #666666;

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