/* ─────────────────────────────────────────────────────────────
   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&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='classic-winamp'] {
  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='classic-winamp'] .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='classic-winamp'] .player-track-artist {
  color: #00cc00;
  font-family: 'Courier New', 'Lucida Console', monospace;
  opacity: 0.85;
}

[data-theme='classic-winamp'] .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='classic-winamp'] .player-btn,
[data-theme='classic-winamp'] .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 — silver metal + muted brass tones */
  --ctp-mauve:     #9e9a92;   /* silver — primary accent */
  --ctp-lavender:  #b8b4ac;   /* lighter silver */
  --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:        #9e9a92;
  --accent-dim:    rgba(158, 154, 146, 0.15);
  --accent-glow:   rgba(158, 154, 146, 0.35);
  --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;
}

/* ─── Tokyo Night ─── */
[data-theme='tokyo-night'] {
  color-scheme: dark;
  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23a9b1d6%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:     #16161e;
  --ctp-mantle:    #1a1b26;
  --ctp-base:      #1a1b26;
  --ctp-surface0:  #24283b;
  --ctp-surface1:  #2f334d;
  --ctp-surface2:  #3b3f5c;
  --ctp-overlay0:  #414868;
  --ctp-overlay1:  #565f89;
  --ctp-overlay2:  #6272a4;
  --ctp-text:      #c0caf5;
  --ctp-subtext1:  #a9b1d6;
  --ctp-subtext0:  #9aa5ce;
  --ctp-mauve:     #bb9af7;
  --ctp-lavender:  #c0caf5;
  --ctp-pink:      #f7768e;
  --ctp-flamingo:  #ff9e64;
  --ctp-rosewater: #f7768e;
  --ctp-blue:      #7aa2f7;
  --ctp-sapphire:  #7dcfff;
  --ctp-sky:       #7dcfff;
  --ctp-teal:      #2ac3de;
  --ctp-green:     #9ece6a;
  --ctp-yellow:    #e0af68;
  --ctp-peach:     #ff9e64;
  --ctp-maroon:    #f7768e;
  --ctp-red:       #f7768e;

  --bg-app:        #1a1b26;
  --bg-sidebar:    #16161e;
  --bg-card:       #24283b;
  --bg-hover:      #2f334d;
  --bg-player:     #16161e;
  --bg-glass:      rgba(26, 27, 38, 0.82);
  --accent:        #7aa2f7;
  --accent-dim:    rgba(122, 162, 247, 0.15);
  --accent-glow:   rgba(122, 162, 247, 0.3);
  --text-primary:  #c0caf5;
  --text-secondary:#a9b1d6;
  --text-muted:    #565f89;
  --border:        #2f334d;
  --border-subtle: #24283b;
  --border-dropdown: #3d425e;
  --shadow-dropdown: rgba(0, 0, 0, 0.55);
  --positive:      #9ece6a;
  --warning:       #e0af68;
  --danger:        #f7768e;
}

/* ─── Tokyo Night Storm ─── */
[data-theme='tokyo-night-storm'] {
  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%23a9b1d6%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:     #1f2335;
  --ctp-mantle:    #1f2335;
  --ctp-base:      #24283b;
  --ctp-surface0:  #2f334d;
  --ctp-surface1:  #3b3f5c;
  --ctp-surface2:  #414868;
  --ctp-overlay0:  #565f89;
  --ctp-overlay1:  #6272a4;
  --ctp-overlay2:  #737aa2;
  --ctp-text:      #c0caf5;
  --ctp-subtext1:  #a9b1d6;
  --ctp-subtext0:  #9aa5ce;
  --ctp-mauve:     #bb9af7;
  --ctp-lavender:  #c0caf5;
  --ctp-pink:      #f7768e;
  --ctp-flamingo:  #ff9e64;
  --ctp-rosewater: #f7768e;
  --ctp-blue:      #7aa2f7;
  --ctp-sapphire:  #7dcfff;
  --ctp-sky:       #7dcfff;
  --ctp-teal:      #2ac3de;
  --ctp-green:     #9ece6a;
  --ctp-yellow:    #e0af68;
  --ctp-peach:     #ff9e64;
  --ctp-maroon:    #f7768e;
  --ctp-red:       #f7768e;

  --bg-app:        #24283b;
  --bg-sidebar:    #1f2335;
  --bg-card:       #2f334d;
  --bg-hover:      #3b3f5c;
  --bg-player:     #1f2335;
  --bg-glass:      rgba(36, 40, 59, 0.82);
  --accent:        #7aa2f7;
  --accent-dim:    rgba(122, 162, 247, 0.15);
  --accent-glow:   rgba(122, 162, 247, 0.3);
  --text-primary:  #c0caf5;
  --text-secondary:#a9b1d6;
  --text-muted:    #565f89;
  --border:        #3b3f5c;
  --border-subtle: #2f334d;
  --border-dropdown: #414868;
  --shadow-dropdown: rgba(0, 0, 0, 0.55);
  --positive:      #9ece6a;
  --warning:       #e0af68;
  --danger:        #f7768e;
}

/* ─── Tokyo Night Light ─── */
[data-theme='tokyo-night-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%23343b58%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:     #cbccd1;
  --ctp-mantle:    #d5d6db;
  --ctp-base:      #d5d6db;
  --ctp-surface0:  #e9e9ec;
  --ctp-surface1:  #c4c5cc;
  --ctp-surface2:  #b4b5be;
  --ctp-overlay0:  #a0a1ab;
  --ctp-overlay1:  #9699a3;
  --ctp-overlay2:  #8488a0;
  --ctp-text:      #343b58;
  --ctp-subtext1:  #565a6e;
  --ctp-subtext0:  #6b6f85;
  --ctp-mauve:     #5a4a78;
  --ctp-lavender:  #34548a;
  --ctp-pink:      #8f2f5c;
  --ctp-flamingo:  #965027;
  --ctp-rosewater: #8c4351;
  --ctp-blue:      #34548a;
  --ctp-sapphire:  #0f4b6e;
  --ctp-sky:       #0f4b6e;
  --ctp-teal:      #0f4b6e;
  --ctp-green:     #485e30;
  --ctp-yellow:    #8f5e15;
  --ctp-peach:     #965027;
  --ctp-maroon:    #8c4351;
  --ctp-red:       #8c4351;

  --bg-app:        #d5d6db;
  --bg-sidebar:    #cbccd1;
  --bg-card:       #e9e9ec;
  --bg-hover:      #c4c5cc;
  --bg-player:     #cbccd1;
  --bg-glass:      rgba(213, 214, 219, 0.9);
  --accent:        #34548a;
  --accent-dim:    rgba(52, 84, 138, 0.15);
  --accent-glow:   rgba(52, 84, 138, 0.25);
  --text-primary:  #343b58;
  --text-secondary:#565a6e;
  --text-muted:    #9699a3;
  --border:        #c4c5cc;
  --border-subtle: #d5d6db;
  --positive:      #485e30;
  --warning:       #8f5e15;
  --danger:        #8c4351;
}

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

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

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