/* GOIA Music — dark by default, multiple themes via [data-theme] */

:root, [data-theme="dark"] {
  --bg: #0e0f12;
  --bg-1: #16181d;
  --bg-2: #1d2027;
  --bg-3: #262a33;
  --border: #2a2f3a;
  --fg: #e8ebf0;
  --fg-muted: #9aa3b2;
  --fg-dim: #6b7383;
  --accent: #7c5cff;
  --accent-2: #23c7ff;
  --danger: #ff5a76;
  --success: #4ade80;
  --warn: #fbbf24;
  --shadow: 0 8px 28px rgba(0,0,0,.45);
  --radius: 12px;
  --radius-sm: 8px;
  --nav-w: 220px;
  --player-h: 88px;
  --header-h: 56px;
  /* form fields — defaults; every theme overrides for distinctive look */
  --input-bg: #11141a;
  --input-fg: #f1f4fa;
  --input-border: #3a4254;
  --input-placeholder: #7e8898;
  --input-focus-border: var(--accent);
  --input-focus-glow: 0 0 0 3px rgba(124,92,255,.18);
  --on-accent: #fff;
  --on-danger: #fff;
}
[data-theme="midnight"] {
  --bg: #07091a;
  --bg-1: #0d1230;
  --bg-2: #161e45;
  --bg-3: #1f2a5a;
  --border: #1f2a5a;
  --fg: #d6dbff;
  --fg-muted: #8a92c4;
  --fg-dim: #5b6298;
  --accent: #5b8cff;
  --accent-2: #29e6c8;
  --input-bg: #0a0f2e;
  --input-fg: #e2e8ff;
  --input-border: #2b3a85;
  --input-placeholder: #6c7ab3;
  --input-focus-glow: 0 0 0 3px rgba(91,140,255,.22);
}
[data-theme="forest"] {
  --bg: #0a1411;
  --bg-1: #112a22;
  --bg-2: #173a30;
  --bg-3: #1e4c3f;
  --border: #1e4c3f;
  --fg: #d9efe5;
  --fg-muted: #8ab3a3;
  --accent: #4ade80;
  --accent-2: #fbbf24;
  --input-bg: #0d1f1a;
  --input-fg: #e8f7ee;
  --input-border: #2a6951;
  --input-placeholder: #6fa78f;
  --input-focus-glow: 0 0 0 3px rgba(74,222,128,.22);
}
[data-theme="hacker"] {
  --bg: #001b00;
  --bg-1: #002a00;
  --bg-2: #003800;
  --bg-3: #004a00;
  --border: #0a0;
  --fg: #b0ffb0;
  --fg-muted: #6cd66c;
  --fg-dim: #3a8a3a;
  --accent: #0f0;
  --accent-2: #afa;
  --on-accent: #001500;
  --shadow: 0 0 0 1px #0a0;
  --radius: 0;
  --radius-sm: 0;
  --input-bg: #000;
  --input-fg: #00ff66;
  --input-border: #00aa00;
  --input-placeholder: #00aa00;
  --input-focus-border: #00ff66;
  --input-focus-glow: 0 0 0 1px #00ff66, 0 0 12px rgba(0,255,102,.55);
  font-family: ui-monospace, "Courier New", monospace !important;
}
[data-theme="hacker"] * { font-family: inherit !important; }
[data-theme="light"] {
  --bg: #f7f8fa;
  --bg-1: #ffffff;
  --bg-2: #f0f2f6;
  --bg-3: #e6e9ee;
  --border: #d8dde6;
  --fg: #16181d;
  --fg-muted: #586273;
  --fg-dim: #8b95a7;
  --accent: #6f4cff;
  --accent-2: #0aa6cf;
  --shadow: 0 8px 20px rgba(12,16,28,.08);
  --input-bg: #ffffff;
  --input-fg: #0e1320;
  --input-border: #c5cdd9;
  --input-placeholder: #8b95a7;
  --input-focus-glow: 0 0 0 3px rgba(111,76,255,.18);
}
[data-theme="vapor"] {
  --bg: #1a0a2e;
  --bg-1: #2a0e4a;
  --bg-2: #3b1668;
  --bg-3: #4d1f87;
  --border: #ff6ad5;
  --fg: #f8e1ff;
  --fg-muted: #e2a4ff;
  --fg-dim: #b06bd8;
  --accent: #ff6ad5;
  --accent-2: #26e7ff;
  --shadow: 0 0 24px rgba(255,106,213,.45);
  --input-bg: #260b46;
  --input-fg: #fff5fc;
  --input-border: #ff6ad5;
  --input-placeholder: #d889c8;
  --input-focus-border: #26e7ff;
  --input-focus-glow: 0 0 0 2px rgba(38,231,255,.4), 0 0 18px rgba(255,106,213,.5);
}
[data-theme="candy"] {
  --bg: #fff0fb;
  --bg-1: #ffffff;
  --bg-2: #ffe1f4;
  --bg-3: #ffd3ee;
  --border: #f8b6dc;
  --fg: #4a1d3c;
  --fg-muted: #7d4566;
  --fg-dim: #b387a0;
  --accent: #ff5db8;
  --accent-2: #6ddef8;
  --input-bg: #ffffff;
  --input-fg: #4a1d3c;
  --input-border: #f8b6dc;
  --input-placeholder: #c98ab1;
  --input-focus-glow: 0 0 0 3px rgba(255,93,184,.22);
}
[data-theme="amber"] {
  --bg: #1a0d00;
  --bg-1: #261600;
  --bg-2: #321e00;
  --bg-3: #432900;
  --border: #c47a00;
  --fg: #ffb84a;
  --fg-muted: #c98a23;
  --fg-dim: #946410;
  --accent: #ff9a1a;
  --accent-2: #ffd28a;
  --shadow: 0 0 18px rgba(255,154,26,.35);
  --input-bg: #1a0d00;
  --input-fg: #ffd28a;
  --input-border: #c47a00;
  --input-placeholder: #8b5e10;
  --input-focus-border: #ff9a1a;
  --input-focus-glow: 0 0 0 1px #ff9a1a, 0 0 16px rgba(255,154,26,.45);
  font-family: ui-monospace, "Courier New", monospace !important;
}
/* OCEAN: deep blue underwater */
[data-theme="ocean"] {
  --bg: #02141f;
  --bg-1: #062536;
  --bg-2: #0a3650;
  --bg-3: #0e4a6e;
  --border: #1a6b9c;
  --fg: #d8f1ff;
  --fg-muted: #87b8d9;
  --fg-dim: #4f87ad;
  --accent: #00b4d8;
  --accent-2: #90e0ef;
  --input-bg: #051c2c;
  --input-fg: #e0f4ff;
  --input-border: #1a6b9c;
  --input-placeholder: #4f87ad;
  --input-focus-glow: 0 0 0 3px rgba(0,180,216,.3);
}

/* SUNSET: warm orange to pink gradient */
[data-theme="sunset"] {
  --bg: #1a0a1f;
  --bg-1: #2a1029;
  --bg-2: #3a1633;
  --bg-3: #4a1d3d;
  --border: #ff6b6b;
  --fg: #fff0e8;
  --fg-muted: #ffb89d;
  --fg-dim: #d9846b;
  --accent: #ff6b6b;
  --accent-2: #ffd166;
  --input-bg: #220e23;
  --input-fg: #fff0e8;
  --input-border: #c95c5c;
  --input-placeholder: #b07a6a;
  --input-focus-glow: 0 0 0 3px rgba(255,107,107,.3);
}
[data-theme="sunset"] body {
  background: linear-gradient(160deg, #1a0a1f 0%, #2a1029 30%, #4a1d3d 70%, #1a0a1f 100%) fixed;
}

/* NEWSPAPER: black/white serif */
[data-theme="newspaper"] {
  --bg: #f3efe5;
  --bg-1: #fdfcf7;
  --bg-2: #ebe5d5;
  --bg-3: #dcd5c0;
  --border: #2a2a2a;
  --fg: #1a1a1a;
  --fg-muted: #555;
  --fg-dim: #777;
  --accent: #1a1a1a;
  --accent-2: #4a4a4a;
  --input-bg: #fdfcf7;
  --input-fg: #1a1a1a;
  --input-border: #1a1a1a;
  --input-placeholder: #888;
  --input-focus-glow: 0 0 0 2px #1a1a1a;
  font-family: "Times New Roman", Times, Georgia, serif !important;
}
[data-theme="newspaper"] * { font-family: inherit !important; }
[data-theme="newspaper"] .btn.primary {
  background: #1a1a1a !important; color: #fff !important;
}

/* SEPIA: soft warm parchment */
[data-theme="sepia"] {
  --bg: #f4ecd8;
  --bg-1: #faf4e3;
  --bg-2: #eee2c8;
  --bg-3: #e2d5b3;
  --border: #b8a98a;
  --fg: #3a2c14;
  --fg-muted: #735c33;
  --fg-dim: #a08960;
  --accent: #8b6914;
  --accent-2: #c9a86e;
  --input-bg: #fdf8eb;
  --input-fg: #3a2c14;
  --input-border: #a08960;
  --input-placeholder: #94774a;
  --input-focus-glow: 0 0 0 3px rgba(139,105,20,.22);
}

/* DRACULA */
[data-theme="dracula"] {
  --bg: #282a36;
  --bg-1: #343746;
  --bg-2: #3d4055;
  --bg-3: #44475a;
  --border: #6272a4;
  --fg: #f8f8f2;
  --fg-muted: #bd93f9;
  --fg-dim: #6272a4;
  --accent: #ff79c6;
  --accent-2: #8be9fd;
  --input-bg: #21222c;
  --input-fg: #f8f8f2;
  --input-border: #6272a4;
  --input-placeholder: #6272a4;
  --input-focus-border: #ff79c6;
  --input-focus-glow: 0 0 0 2px rgba(255,121,198,.3);
}

/* NORD */
[data-theme="nord"] {
  --bg: #2e3440;
  --bg-1: #3b4252;
  --bg-2: #434c5e;
  --bg-3: #4c566a;
  --border: #4c566a;
  --fg: #eceff4;
  --fg-muted: #d8dee9;
  --fg-dim: #81a1c1;
  --accent: #88c0d0;
  --accent-2: #a3be8c;
  --input-bg: #292e39;
  --input-fg: #eceff4;
  --input-border: #4c566a;
  --input-placeholder: #81a1c1;
  --input-focus-border: #88c0d0;
  --input-focus-glow: 0 0 0 2px rgba(136,192,208,.3);
}

/* GRUVBOX (dark warm retro) */
[data-theme="gruvbox"] {
  --bg: #282828;
  --bg-1: #32302f;
  --bg-2: #3c3836;
  --bg-3: #504945;
  --border: #665c54;
  --fg: #ebdbb2;
  --fg-muted: #d5c4a1;
  --fg-dim: #a89984;
  --accent: #fe8019;
  --accent-2: #8ec07c;
  --input-bg: #1d2021;
  --input-fg: #ebdbb2;
  --input-border: #665c54;
  --input-placeholder: #928374;
  --input-focus-border: #fe8019;
  --input-focus-glow: 0 0 0 2px rgba(254,128,25,.3);
}

/* MONOKAI */
[data-theme="monokai"] {
  --bg: #272822;
  --bg-1: #2d2e26;
  --bg-2: #34352d;
  --bg-3: #3e3d32;
  --border: #75715e;
  --fg: #f8f8f2;
  --fg-muted: #cfcfc2;
  --fg-dim: #75715e;
  --accent: #f92672;
  --accent-2: #a6e22e;
  --input-bg: #1e1f1c;
  --input-fg: #f8f8f2;
  --input-border: #75715e;
  --input-placeholder: #75715e;
  --input-focus-border: #f92672;
  --input-focus-glow: 0 0 0 2px rgba(249,38,114,.3);
}

/* CATPPUCCIN MOCHA */
[data-theme="catppuccin"] {
  --bg: #1e1e2e;
  --bg-1: #181825;
  --bg-2: #313244;
  --bg-3: #45475a;
  --border: #585b70;
  --fg: #cdd6f4;
  --fg-muted: #a6adc8;
  --fg-dim: #7f849c;
  --accent: #cba6f7;
  --accent-2: #94e2d5;
  --input-bg: #11111b;
  --input-fg: #cdd6f4;
  --input-border: #585b70;
  --input-placeholder: #7f849c;
  --input-focus-border: #cba6f7;
  --input-focus-glow: 0 0 0 2px rgba(203,166,247,.32);
}

/* TOKYO NIGHT */
[data-theme="tokyonight"] {
  --bg: #1a1b26;
  --bg-1: #1f2335;
  --bg-2: #24283b;
  --bg-3: #2f3349;
  --border: #565f89;
  --fg: #c0caf5;
  --fg-muted: #9aa5ce;
  --fg-dim: #565f89;
  --accent: #7aa2f7;
  --accent-2: #bb9af7;
  --input-bg: #16161e;
  --input-fg: #c0caf5;
  --input-border: #565f89;
  --input-placeholder: #565f89;
  --input-focus-border: #7aa2f7;
  --input-focus-glow: 0 0 0 2px rgba(122,162,247,.3);
}

/* SOLARIZED DARK */
[data-theme="solarized"] {
  --bg: #002b36;
  --bg-1: #073642;
  --bg-2: #094352;
  --bg-3: #0d5564;
  --border: #586e75;
  --fg: #fdf6e3;
  --fg-muted: #93a1a1;
  --fg-dim: #657b83;
  --accent: #b58900;
  --accent-2: #2aa198;
  --input-bg: #00212b;
  --input-fg: #fdf6e3;
  --input-border: #586e75;
  --input-placeholder: #657b83;
  --input-focus-border: #b58900;
  --input-focus-glow: 0 0 0 2px rgba(181,137,0,.3);
}

/* SYNTHWAVE (dark, sharp neon) */
[data-theme="synthwave"] {
  --bg: #1a1033;
  --bg-1: #241946;
  --bg-2: #2e1d5a;
  --bg-3: #3a266e;
  --border: #ff006e;
  --fg: #f5f0ff;
  --fg-muted: #c8b6ff;
  --fg-dim: #8a72d0;
  --accent: #ff006e;
  --accent-2: #00fff0;
  --shadow: 0 0 30px rgba(255,0,110,.4);
  --input-bg: #16092e;
  --input-fg: #f5f0ff;
  --input-border: #ff006e;
  --input-placeholder: #c891ff;
  --input-focus-border: #00fff0;
  --input-focus-glow: 0 0 0 1px #00fff0, 0 0 18px rgba(0,255,240,.5);
}
[data-theme="synthwave"] body {
  background:
    linear-gradient(180deg, transparent 60%, rgba(255,0,110,.08) 100%) fixed,
    repeating-linear-gradient(180deg, transparent 0 30px, rgba(255,0,110,.04) 30px 31px),
    var(--bg);
}

/* CYBERPUNK (neon yellow on dark) */
[data-theme="cyberpunk"] {
  --bg: #0d0d0d;
  --bg-1: #1a1a1a;
  --bg-2: #262626;
  --bg-3: #333333;
  --border: #fcee0a;
  --fg: #fcee0a;
  --fg-muted: #c9c000;
  --fg-dim: #757000;
  --accent: #ff003c;
  --accent-2: #00f0ff;
  --input-bg: #050505;
  --input-fg: #fcee0a;
  --input-border: #fcee0a;
  --input-placeholder: #a89800;
  --input-focus-border: #ff003c;
  --input-focus-glow: 0 0 0 2px rgba(255,0,60,.5), 0 0 16px rgba(252,238,10,.4);
}

/* PLASTIC (Termius Plastic — hyper-pink Barbie) */
[data-theme="plastic"] {
  --bg: #ff5fb1;
  --bg-1: #ff7ec0;
  --bg-2: #ff95ce;
  --bg-3: #ffabdc;
  --border: #ffffff;
  --fg: #ffffff;
  --fg-muted: #ffffff;        /* full white for legibility on pink */
  --fg-dim: #ffe0f0;
  --accent: #ffffff;
  --accent-2: #ffe600;
  --shadow: 0 4px 24px rgba(0,0,0,.18);
  --input-bg: #ff7bbf;
  --input-fg: #ffffff;
  --input-border: #ffffff;
  --input-placeholder: #ffd9eb;
  --input-focus-border: #ffe600;
  --input-focus-glow: 0 0 0 3px rgba(255,230,0,.5);
}
/* nav-item normal state needs higher contrast — opacity-based dim instead of grey */
[data-theme="plastic"] .nav-item { color: rgba(255, 255, 255, .85); }
[data-theme="plastic"] .nav-item:hover,
[data-theme="plastic"] .nav-item.active { color: #fff; }
[data-theme="plastic"] {
  --on-accent: #ff3690;  /* accent is white in this theme; need pink for legibility */
}
[data-theme="plastic"] .btn.primary {
  background: #ffffff !important; color: #ff3690 !important;
}
[data-theme="plastic"] .badge.accent { color: #ff3690; }
[data-theme="plastic"] .card {
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
}

[data-theme="comicsans"] {
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive !important;
  --bg: #fff7d6;
  --bg-1: #fffde8;
  --bg-2: #fff1c0;
  --bg-3: #ffe690;
  --border: #ffbf3f;
  --fg: #5a2f00;
  --fg-muted: #8b5b1c;
  --fg-dim: #b88a4a;
  --accent: #ff5a5f;
  --accent-2: #2eb872;
  --input-bg: #fffdf2;
  --input-fg: #4a2600;
  --input-border: #ffbf3f;
  --input-placeholder: #b88a4a;
  --input-focus-glow: 0 0 0 3px rgba(255,90,95,.22);
}
[data-theme="comicsans"] * { font-family: inherit !important; }
[data-theme="comicsans"] .btn { letter-spacing: .04em; }

/* RAINBOW: animated hue rotation on accents + slow background shift */
[data-theme="rainbow"] {
  --bg: #1a1024;
  --bg-1: #251534;
  --bg-2: #321a47;
  --bg-3: #422262;
  --border: #6f3aa6;
  --fg: #ffffff;
  --fg-muted: #d6b8ff;
  --fg-dim: #9c7bd0;
  --accent: hsl(0 80% 60%);
  --accent-2: hsl(180 80% 60%);
  --input-bg: #1c0e2c;
  --input-fg: #ffffff;
  --input-border: #b97cff;
  --input-placeholder: #b497d6;
  --input-focus-glow: 0 0 0 3px rgba(255,255,255,.18);
}
[data-theme="rainbow"] body {
  animation: rainbow-hue 4s linear infinite;
}
@keyframes rainbow-hue {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(360deg); }
}
[data-theme="rainbow"] .btn.primary {
  background: linear-gradient(90deg, #ff5d8f, #ffb13d, #f9ed4a, #4adfb3, #4a90ff, #b95dff);
  background-size: 300% 100%;
  animation: rainbow-shift 3s linear infinite;
}
@keyframes rainbow-shift {
  from { background-position: 0% 50%; }
  to   { background-position: 300% 50%; }
}

/* GLITCH: text jitter, RGB split, scanlines */
[data-theme="glitch"] {
  --bg: #050505;
  --bg-1: #0d0d0d;
  --bg-2: #181818;
  --bg-3: #242424;
  --border: #ff0090;
  --fg: #e0e0e0;
  --fg-muted: #a0a0a0;
  --fg-dim: #707070;
  --accent: #ff0090;
  --accent-2: #00f5ff;
  --input-bg: #0a0a0a;
  --input-fg: #ff66c4;
  --input-border: #ff0090;
  --input-placeholder: #888;
  --input-focus-border: #00f5ff;
  --input-focus-glow: 0 0 0 1px #00f5ff, -2px 0 0 #ff0090, 2px 0 0 #00f5ff;
}
[data-theme="glitch"] .topbar h1,
[data-theme="glitch"] .np-title,
[data-theme="glitch"] .brand {
  text-shadow:
    1px 0 #ff0090,
    -1px 0 #00f5ff;
  animation: glitch-shake 1.3s infinite steps(2);
}
@keyframes glitch-shake {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-1px, 0); }
  40%  { transform: translate(1px, 0); }
  60%  { transform: translate(0, 1px); }
  80%  { transform: translate(-1px, -1px); }
  100% { transform: translate(0, 0); }
}
[data-theme="glitch"] body::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 100;
  background: repeating-linear-gradient(
    0deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 4px
  );
  mix-blend-mode: overlay;
}

/* EARTHQUAKE: whole page wobbles */
[data-theme="earthquake"] {
  --bg: #1a1a1a;
  --bg-1: #232323;
  --bg-2: #2d2d2d;
  --bg-3: #383838;
  --border: #555;
  --fg: #f0f0f0;
  --fg-muted: #aaa;
  --fg-dim: #777;
  --accent: #ff5500;
  --accent-2: #ffdd00;
  --input-bg: #161616;
  --input-fg: #fff3d6;
  --input-border: #ff5500;
  --input-placeholder: #888;
  --input-focus-glow: 0 0 0 3px rgba(255,85,0,.32);
}
[data-theme="earthquake"] body {
  animation: earthquake 0.18s infinite;
}
@keyframes earthquake {
  0%   { transform: translate(1px, 1px); }
  25%  { transform: translate(-1px, 2px); }
  50%  { transform: translate(-2px, -1px); }
  75%  { transform: translate(2px, 1px); }
  100% { transform: translate(1px, -2px); }
}

/* UPSIDE DOWN: literally rotated 180° */
[data-theme="upsidedown"] body { transform: rotate(180deg); }
[data-theme="upsidedown"] {
  --bg: #0e0f12;
  --bg-1: #16181d;
  --bg-2: #1d2027;
  --bg-3: #262a33;
  --border: #2a2f3a;
  --fg: #e8ebf0;
  --fg-muted: #9aa3b2;
  --fg-dim: #6b7383;
  --accent: #7c5cff;
  --accent-2: #23c7ff;
  --input-bg: #11141a;
  --input-fg: #f1f4fa;
  --input-border: #3a4254;
  --input-placeholder: #7e8898;
  --input-focus-glow: 0 0 0 3px rgba(124,92,255,.18);
}

/* TILT: 5 degrees off axis */
[data-theme="tilt"] body { transform: rotate(5deg); transform-origin: center top; }
[data-theme="tilt"] {
  --bg: #0e0f12;
  --bg-1: #16181d;
  --bg-2: #1d2027;
  --bg-3: #262a33;
  --border: #2a2f3a;
  --fg: #e8ebf0;
  --fg-muted: #9aa3b2;
  --fg-dim: #6b7383;
  --accent: #7c5cff;
  --accent-2: #23c7ff;
  --input-bg: #11141a;
  --input-fg: #f1f4fa;
  --input-border: #3a4254;
  --input-placeholder: #7e8898;
  --input-focus-glow: 0 0 0 3px rgba(124,92,255,.18);
}

/* WINDOWS 95: gray, raised buttons, MS Sans Serif feel */
[data-theme="win95"] {
  --bg: #008080;
  --bg-1: #c3c3c3;
  --bg-2: #d4d0c8;
  --bg-3: #e3dfd5;
  --border: #000;
  --fg: #000;
  --fg-muted: #404040;
  --fg-dim: #707070;
  --accent: #000080;
  --accent-2: #00007e;
  --radius: 0;
  --radius-sm: 0;
  --shadow: 2px 2px 0 #000;
  --input-bg: #ffffff;
  --input-fg: #000000;
  --input-border: #000;
  --input-placeholder: #707070;
  --input-focus-glow: 0 0 0 1px #000;
  font-family: "MS Sans Serif", Tahoma, Geneva, sans-serif !important;
}
[data-theme="win95"] * { font-family: inherit !important; }
[data-theme="win95"] .btn {
  border: 2px solid #000 !important;
  border-top-color: #fff !important;
  border-left-color: #fff !important;
  background: #c3c3c3 !important;
  color: #000 !important;
  border-radius: 0 !important;
  padding: 4px 12px !important;
  font-weight: bold;
}
[data-theme="win95"] .btn:active {
  border-top-color: #000 !important;
  border-left-color: #000 !important;
  border-right-color: #fff !important;
  border-bottom-color: #fff !important;
}
[data-theme="win95"] .btn.primary {
  background: #c3c3c3 !important; color: #000 !important;
}
[data-theme="win95"] .card {
  border: 2px solid #000 !important;
  border-top-color: #fff !important;
  border-left-color: #fff !important;
  background: #c3c3c3 !important;
}
[data-theme="win95"] .nav { background: #c3c3c3 !important; }

/* WINDOWS XP (Luna blue) */
[data-theme="winxp"] {
  --bg: #5a7edc;
  --bg-1: #ece9d8;
  --bg-2: #fcfbf3;
  --bg-3: #d4d0c8;
  --border: #316ac5;
  --fg: #000;
  --fg-muted: #555;
  --fg-dim: #888;
  --accent: #316ac5;
  --accent-2: #73a946;
  --shadow: 2px 2px 8px rgba(0,0,0,.3);
  --radius: 6px;
  --radius-sm: 4px;
  --input-bg: #ffffff;
  --input-fg: #000;
  --input-border: #7f9db9;
  --input-placeholder: #999;
  --input-focus-border: #316ac5;
  --input-focus-glow: 0 0 0 2px rgba(49,106,197,.25);
  font-family: Tahoma, "MS Sans Serif", sans-serif !important;
}
[data-theme="winxp"] * { font-family: inherit !important; }
[data-theme="winxp"] body {
  background:
    radial-gradient(ellipse at top, #b8d4f3 0%, #5a7edc 60%, #2d4a87 100%) fixed;
}
[data-theme="winxp"] .nav {
  background: linear-gradient(180deg, #316ac5, #2256a8) !important;
  color: #fff !important;
}
[data-theme="winxp"] .nav .nav-item { color: #d4e3f7 !important; }
[data-theme="winxp"] .nav .nav-item.active {
  background: linear-gradient(180deg, #4f8fe0, #316ac5) !important;
  color: #fff !important;
}
[data-theme="winxp"] .nav .brand { color: #fff !important; }
[data-theme="winxp"] .btn {
  background: linear-gradient(180deg, #fcfbf3 0%, #ece9d8 50%, #d4d0c8 100%) !important;
  border: 1px solid #003c74 !important;
  color: #000 !important;
  border-radius: 3px !important;
}
[data-theme="winxp"] .btn:hover {
  background: linear-gradient(180deg, #fff 0%, #f3f1e0 50%, #d8d3bf 100%) !important;
}
[data-theme="winxp"] .btn.primary {
  background: linear-gradient(180deg, #4f8fe0 0%, #316ac5 50%, #2256a8 100%) !important;
  color: #fff !important; border-color: #003c74 !important;
}
[data-theme="winxp"] .btn.danger {
  background: linear-gradient(180deg, #f0a4a4 0%, #c44d4d 50%, #a02d2d 100%) !important;
  color: #fff !important;
}
[data-theme="winxp"] .card {
  background: linear-gradient(180deg, #fcfbf3 0%, #ece9d8 100%) !important;
  border: 1px solid #91a7c4 !important;
  box-shadow: 0 0 0 1px #fff inset, 0 4px 12px rgba(0,0,0,.2) !important;
}
[data-theme="winxp"] .player {
  background: linear-gradient(180deg, #316ac5, #2256a8) !important;
  color: #fff !important;
  border-top: 1px solid #003c74 !important;
}
[data-theme="winxp"] .player .info .t,
[data-theme="winxp"] .player .info .s { color: #fff !important; }

/* MACOS AQUA */
[data-theme="macos"] {
  --bg: #ececec;
  --bg-1: rgba(255,255,255,.7);
  --bg-2: rgba(255,255,255,.85);
  --bg-3: rgba(0,0,0,.06);
  --border: rgba(0,0,0,.12);
  --fg: #1d1d1f;
  --fg-muted: #6e6e73;
  --fg-dim: #8e8e93;
  --accent: #007aff;
  --accent-2: #34c759;
  --shadow: 0 8px 30px rgba(0,0,0,.18);
  --radius: 10px;
  --radius-sm: 6px;
  --input-bg: rgba(255,255,255,.85);
  --input-fg: #1d1d1f;
  --input-border: rgba(0,0,0,.18);
  --input-placeholder: #b0b0b5;
  --input-focus-border: #007aff;
  --input-focus-glow: 0 0 0 3px rgba(0,122,255,.25);
  font-family: -apple-system, "SF Pro Text", system-ui, sans-serif !important;
}
[data-theme="macos"] body {
  background:
    radial-gradient(ellipse at top, #f5f5f7 0%, #d8d8dc 100%) fixed;
}
[data-theme="macos"] .card,
[data-theme="macos"] .nav,
[data-theme="macos"] .player {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}
[data-theme="macos"] .btn.primary {
  background: linear-gradient(180deg, #4ca0ff, #007aff) !important;
  box-shadow: 0 1px 1px rgba(255,255,255,.4) inset, 0 1px 2px rgba(0,0,0,.18);
}

/* MINECRAFT (dirt + grass blocks) */
[data-theme="minecraft"] {
  --bg: #4a3829;
  --bg-1: #5b4a36;
  --bg-2: #6f5a3f;
  --bg-3: #7d6849;
  --border: #2d2017;
  --fg: #ffffff;
  --fg-muted: #d8d8d8;
  --fg-dim: #999;
  --accent: #5d9b32;
  --accent-2: #c2a259;
  --radius: 0;
  --radius-sm: 0;
  --input-bg: #2d2017;
  --input-fg: #ffffff;
  --input-border: #ffffff;
  --input-placeholder: #888;
  --input-focus-glow: 0 0 0 2px #5d9b32;
  font-family: "Minecraft", "Press Start 2P", "Courier New", monospace !important;
  text-shadow: 2px 2px 0 rgba(0,0,0,.4);
}
[data-theme="minecraft"] body {
  background:
    repeating-linear-gradient(0deg, #4a3829 0 32px, #5b4a36 32px 33px, #4a3829 33px 64px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(0,0,0,.15) 31px 32px),
    var(--bg);
  background-size: 64px 64px, 32px 32px, auto;
  image-rendering: pixelated;
}
[data-theme="minecraft"] .card,
[data-theme="minecraft"] .btn {
  border: 3px solid #2d2017 !important;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,.25),
    inset -2px -2px 0 rgba(0,0,0,.3);
}
[data-theme="minecraft"] .btn.primary {
  background: linear-gradient(180deg, #6cb83b 0%, #5d9b32 50%, #4a7f28 100%) !important;
  color: #fff !important;
}

/* ============================================================
   GAME BOY — original DMG aesthetic. LCD scan lines, dot-matrix grid,
   chunky black borders that look like sprite outlines, hard square corners,
   thick monospace, drop-shadow on every "panel" like vintage screenshots.
   ============================================================ */
[data-theme="gameboy"] {
  --bg: #9bbc0f;
  --bg-1: #8bac0f;
  --bg-2: #7a9b0d;
  --bg-3: #5d7e0a;
  --border: #0f380f;
  --fg: #0f380f;
  --fg-muted: #0f380f;
  --fg-dim: #1d4a1d;
  --accent: #0f380f;
  --accent-2: #306230;
  --on-accent: #9bbc0f;
  --radius: 0;
  --radius-sm: 0;
  --shadow: 4px 4px 0 0 #0f380f;
  --input-bg: #c5dd6e;
  --input-fg: #0f380f;
  --input-border: #0f380f;
  --input-placeholder: #547c2a;
  --input-focus-glow: 0 0 0 2px #0f380f;
  font-family: "Courier New", "Lucida Console", ui-monospace, monospace !important;
}
[data-theme="gameboy"] * {
  font-family: inherit !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* LCD dot-matrix overlay + scan lines on body */
[data-theme="gameboy"] body {
  background:
    /* horizontal scan lines */
    repeating-linear-gradient(0deg, rgba(15, 56, 15, .10) 0 1px, transparent 1px 3px),
    /* vertical pixel grid */
    repeating-linear-gradient(90deg, rgba(15, 56, 15, .06) 0 1px, transparent 1px 3px),
    /* subtle radial vignette like an old LCD */
    radial-gradient(ellipse at center, transparent 50%, rgba(15, 56, 15, .15) 100%),
    var(--bg);
  filter: contrast(1.08) saturate(1.15);
}

/* Every card and button gets the thick black sprite outline */
[data-theme="gameboy"] .card {
  background: var(--bg-1) !important;
  border: 3px solid var(--fg) !important;
  box-shadow: 4px 4px 0 0 var(--fg) !important;
}
[data-theme="gameboy"] .btn {
  background: var(--bg) !important;
  color: var(--fg) !important;
  border: 2px solid var(--fg) !important;
  box-shadow: 2px 2px 0 0 var(--fg) !important;
  padding: 6px 12px !important;
  font-weight: 700;
}
[data-theme="gameboy"] .btn:hover {
  background: var(--bg-2) !important;
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 0 var(--fg) !important;
}
[data-theme="gameboy"] .btn:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 0 var(--fg) !important;
}
[data-theme="gameboy"] .btn.primary {
  background: var(--fg) !important;
  color: var(--bg) !important;
}
[data-theme="gameboy"] .btn.danger {
  background: var(--bg) !important;
  color: var(--fg) !important;
  border-color: var(--fg) !important;
}

/* Nav: like the screen's UI panel */
[data-theme="gameboy"] .nav {
  background: var(--bg-1) !important;
  border-right: 3px solid var(--fg) !important;
  box-shadow: inset -2px 0 0 0 var(--fg);
}
[data-theme="gameboy"] .nav-item {
  border: 2px solid transparent;
  margin-bottom: 2px;
  font-size: 12px;
  padding: 6px 8px;
}
[data-theme="gameboy"] .nav-item:hover {
  background: var(--bg-2) !important;
  border-color: var(--fg);
}
[data-theme="gameboy"] .nav-item.active {
  background: var(--fg) !important;
  color: var(--bg) !important;
  border-color: var(--fg);
  box-shadow: none;
}

/* Brand: GAME BOY-style pixel header */
[data-theme="gameboy"] .brand {
  border-bottom: 3px solid var(--fg);
  padding: 12px 6px;
  margin-bottom: 8px;
  font-weight: 900;
  letter-spacing: 0.15em;
  background: var(--bg-2);
}
[data-theme="gameboy"] .brand img { display: none; }
[data-theme="gameboy"] .brand::before {
  content: "♪ DMG";
  display: inline-block;
  padding: 2px 6px;
  border: 2px solid var(--fg);
  margin-right: 6px;
  background: var(--fg);
  color: var(--bg);
  font-size: 11px;
}

/* Player bar: looks like the bottom controls */
[data-theme="gameboy"] .player {
  background: var(--bg-1) !important;
  border-top: 3px solid var(--fg) !important;
}

/* Now Playing art: pixel border */
[data-theme="gameboy"] .np .art,
[data-theme="gameboy"] .qitem .thumb,
[data-theme="gameboy"] .result .thumb,
[data-theme="gameboy"] .player-thumb {
  border: 2px solid var(--fg) !important;
  image-rendering: pixelated;
  filter: grayscale(1) sepia(0.3) hue-rotate(40deg) saturate(2);
}

/* Progress bar: chunky bordered with hard fill */
[data-theme="gameboy"] .progress {
  border: 2px solid var(--fg);
  background: var(--bg-2) !important;
  height: 12px;
  border-radius: 0;
}
[data-theme="gameboy"] .progress .bar {
  background: var(--fg) !important;
  border-radius: 0;
}

/* Inputs: chunky bordered */
[data-theme="gameboy"] input,
[data-theme="gameboy"] textarea,
[data-theme="gameboy"] select {
  border-width: 2px !important;
  box-shadow: inset 1px 1px 0 0 rgba(15,56,15,.4);
}

/* Queue items: blocky rows */
[data-theme="gameboy"] .qitem {
  border: 2px solid var(--fg) !important;
  margin-bottom: 2px;
  background: var(--bg) !important;
}
[data-theme="gameboy"] .qitem.current {
  background: var(--fg) !important;
  color: var(--bg) !important;
}
[data-theme="gameboy"] .qitem.current .meta .t,
[data-theme="gameboy"] .qitem.current .meta .s,
[data-theme="gameboy"] .qitem.current .pos { color: var(--bg) !important; }

/* Badge: chunky */
[data-theme="gameboy"] .badge {
  border: 2px solid var(--fg);
  border-radius: 0;
  font-weight: 700;
}

/* The toggle-able audio visualizer feels right with hard bars */
[data-theme="gameboy"] .viz {
  border: 2px solid var(--fg);
  background: var(--bg-2);
}
[data-theme="gameboy"] .viz .b {
  background: var(--fg) !important;
  border-radius: 0;
  image-rendering: pixelated;
}

/* The whole main area looks like an LCD screen with a darker plastic bezel */
[data-theme="gameboy"] .main {
  background:
    repeating-linear-gradient(0deg, rgba(15, 56, 15, .08) 0 1px, transparent 1px 3px),
    var(--bg);
}

/* OLD TERMINAL (phosphor green with scanlines + CRT curve) */
[data-theme="terminal"] {
  --bg: #000;
  --bg-1: #001100;
  --bg-2: #001a00;
  --bg-3: #002500;
  --border: #00e000;
  --fg: #00ff00;
  --fg-muted: #00b500;
  --fg-dim: #006600;
  --accent: #00ff00;
  --accent-2: #88ff88;
  --radius: 0;
  --radius-sm: 0;
  --input-bg: #001a00;
  --input-fg: #00ff00;
  --input-border: #00ff00;
  --input-placeholder: #006600;
  --input-focus-glow: 0 0 12px rgba(0,255,0,.6);
  font-family: "VT323", "IBM Plex Mono", ui-monospace, monospace !important;
  text-shadow: 0 0 6px rgba(0,255,0,.7);
}
[data-theme="terminal"] * { font-family: inherit !important; }
[data-theme="terminal"] body::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 100;
  background: repeating-linear-gradient(0deg, rgba(0,255,0,0.08) 0 1px, transparent 1px 3px);
}
[data-theme="terminal"] body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 99;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.5) 100%);
}

/* CHALKBOARD — chalk cursor + drawable surface */
[data-theme="chalkboard"] body {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="26" viewBox="0 0 22 26"><g transform="rotate(20 11 13)"><rect x="6" y="2" width="6" height="14" rx="1" fill="%23fff7e0" stroke="%23999"/><path d="M6 16 L12 16 L11.4 18 L6.6 18 Z" fill="%23eee5c8" stroke="%23999"/><circle cx="9" cy="3.5" r="0.6" fill="%23bbb" opacity=".5"/><circle cx="10" cy="6" r="0.4" fill="%23bbb" opacity=".5"/></g></svg>') 9 22, crosshair !important;
}
[data-theme="chalkboard"] .btn,
[data-theme="chalkboard"] input,
[data-theme="chalkboard"] textarea,
[data-theme="chalkboard"] select,
[data-theme="chalkboard"] .nav-item,
[data-theme="chalkboard"] .card,
[data-theme="chalkboard"] .qitem,
[data-theme="chalkboard"] .theme-card { cursor: pointer !important; }
[data-theme="chalkboard"] input,
[data-theme="chalkboard"] textarea { cursor: text !important; }
[data-theme="chalkboard"] {
  --bg: #1d3a2d;
  --bg-1: #234433;
  --bg-2: #2a4f3d;
  --bg-3: #325a47;
  --border: #f5f5dc;
  --fg: #f8f4d8;
  --fg-muted: #d8d4b0;
  --fg-dim: #8b8865;
  --accent: #fff8b8;
  --accent-2: #ffb3b3;
  --input-bg: #1a3328;
  --input-fg: #f8f4d8;
  --input-border: #d8d4b0;
  --input-placeholder: #999680;
  --input-focus-glow: 0 0 0 2px #fff8b8;
  font-family: "Caveat", "Comic Sans MS", "Chalkboard SE", cursive !important;
}
[data-theme="chalkboard"] * { font-family: inherit !important; }
[data-theme="chalkboard"] body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(2px 2px at 23% 47%, rgba(255,255,255,.05), transparent),
    radial-gradient(2px 2px at 67% 23%, rgba(255,255,255,.04), transparent),
    radial-gradient(2px 2px at 18% 81%, rgba(255,255,255,.06), transparent),
    radial-gradient(2px 2px at 81% 62%, rgba(255,255,255,.04), transparent);
  background-size: 200px 200px;
}

/* STICKY NOTE (yellow paper, slight tilt on cards) */
[data-theme="sticky"] {
  --bg: #f4cd5e;
  --bg-1: #ffeb88;
  --bg-2: #ffe66c;
  --bg-3: #fdd84a;
  --border: #e0b53a;
  --fg: #2a2510;
  --fg-muted: #5a4d20;
  --fg-dim: #847440;
  --accent: #d22d2d;
  --accent-2: #2d8bd2;
  --input-bg: #fff3a8;
  --input-fg: #2a2510;
  --input-border: #c4a230;
  --input-placeholder: #95823c;
  --input-focus-glow: 0 0 0 3px rgba(210,45,45,.25);
  font-family: "Caveat", "Marker Felt", cursive !important;
}
[data-theme="sticky"] * { font-family: inherit !important; }
[data-theme="sticky"] .card {
  box-shadow: 4px 6px 14px rgba(0,0,0,.18) !important;
}
[data-theme="sticky"] .card:nth-of-type(3n)   { transform: rotate(-0.8deg); }
[data-theme="sticky"] .card:nth-of-type(3n+1) { transform: rotate(0.6deg); }
[data-theme="sticky"] .card:nth-of-type(3n+2) { transform: rotate(-0.3deg); }

/* LAVA (dark with red glow and animated crack pulse) */
[data-theme="lava"] {
  --bg: #1a0500;
  --bg-1: #2a0b00;
  --bg-2: #3a1100;
  --bg-3: #4d1700;
  --border: #ff4500;
  --fg: #ffd9b3;
  --fg-muted: #ff8c5a;
  --fg-dim: #b56a3a;
  --accent: #ff4500;
  --accent-2: #ffdd00;
  --shadow: 0 0 24px rgba(255,69,0,.5);
  --input-bg: #1a0500;
  --input-fg: #ffe0c4;
  --input-border: #ff4500;
  --input-placeholder: #aa5a35;
  --input-focus-glow: 0 0 0 2px #ffdd00, 0 0 18px rgba(255,69,0,.6);
}
[data-theme="lava"] body {
  background:
    radial-gradient(circle at 20% 30%, rgba(255,69,0,.35) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255,140,0,.3) 0, transparent 40%),
    var(--bg);
  animation: lava-pulse 4s ease-in-out infinite alternate;
}
@keyframes lava-pulse {
  0%   { background-position: 20% 30%, 80% 70%, 0 0; filter: brightness(1); }
  100% { background-position: 22% 28%, 78% 72%, 0 0; filter: brightness(1.15); }
}

/* AURORA (animated polar lights wash) */
[data-theme="aurora"] {
  --bg: #03051a;
  --bg-1: #07103a;
  --bg-2: #0d1858;
  --bg-3: #14216f;
  --border: #4a8aff;
  --fg: #e8f4ff;
  --fg-muted: #a8c4f5;
  --fg-dim: #5a7ec0;
  --accent: #4adfb3;
  --accent-2: #b870ff;
  --input-bg: #060b2d;
  --input-fg: #e8f4ff;
  --input-border: #4a8aff;
  --input-placeholder: #5a7ec0;
  --input-focus-border: #4adfb3;
  --input-focus-glow: 0 0 0 2px rgba(74,223,179,.4);
}
[data-theme="aurora"] body {
  background:
    linear-gradient(120deg,
      transparent 0%,
      rgba(74,223,179,.25) 15%,
      rgba(184,112,255,.25) 35%,
      transparent 55%,
      rgba(74,138,255,.22) 75%,
      transparent 95%) fixed,
    var(--bg);
  background-size: 200% 200%;
  animation: aurora-shift 16s ease-in-out infinite;
}
@keyframes aurora-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* COSMOS (starfield with twinkling) */
[data-theme="cosmos"] {
  --bg: #000;
  --bg-1: #0a0a18;
  --bg-2: #14142a;
  --bg-3: #1e1e3c;
  --border: #6e6eaa;
  --fg: #e8e8ff;
  --fg-muted: #a8a8d4;
  --fg-dim: #6e6eaa;
  --accent: #c4a8ff;
  --accent-2: #7adcff;
  --input-bg: #08081a;
  --input-fg: #e8e8ff;
  --input-border: #6e6eaa;
  --input-placeholder: #6e6eaa;
  --input-focus-glow: 0 0 0 2px #c4a8ff, 0 0 14px rgba(196,168,255,.4);
}
[data-theme="cosmos"] body {
  background:
    radial-gradient(1px 1px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 40% 70%, #fff, transparent),
    radial-gradient(1px 1px at 50% 50%, #fff, transparent),
    radial-gradient(2px 2px at 90% 10%, #fff, transparent),
    radial-gradient(1px 1px at 33% 88%, #fff, transparent),
    radial-gradient(1px 1px at 60% 20%, #fff, transparent),
    radial-gradient(2px 2px at 80% 55%, #fff, transparent),
    radial-gradient(1px 1px at 14% 14%, #fff, transparent),
    radial-gradient(1px 1px at 55% 35%, #c4a8ff, transparent),
    radial-gradient(1px 1px at 70% 80%, #7adcff, transparent),
    var(--bg);
  background-size: 200px 200px;
  animation: twinkle 3s ease-in-out infinite alternate;
}
@keyframes twinkle {
  0%   { opacity: 1; }
  100% { opacity: .8; }
}

/* BEANS — calico cat. White base, ginger + black patches, pink nose accent. */
[data-theme="beans"] {
  --bg: #fdf6ec;
  --bg-1: #ffffff;
  --bg-2: #fff3e0;
  --bg-3: #ffe7cc;
  --border: #2a1f17;
  --fg: #2a1f17;
  --fg-muted: #6b4f3a;
  --fg-dim: #a08772;
  --accent: #d96a26;            /* ginger */
  --accent-2: #ff9bd0;          /* pink toe-beans */
  --input-bg: #ffffff;
  --input-fg: #2a1f17;
  --input-border: #d96a26;
  --input-placeholder: #b89272;
  --input-focus-border: #ff9bd0;
  --input-focus-glow: 0 0 0 3px rgba(255,155,208,.35);
}
[data-theme="beans"] body {
  background:
    /* black patches */
    radial-gradient(140px 90px at 12% 18%, rgba(20,15,12,.95) 0 60%, transparent 65%),
    radial-gradient(180px 110px at 88% 72%, rgba(20,15,12,.95) 0 55%, transparent 60%),
    radial-gradient(90px 60px at 45% 88%, rgba(20,15,12,.9) 0 55%, transparent 60%),
    /* ginger patches */
    radial-gradient(220px 140px at 78% 22%, rgba(217,106,38,.85) 0 60%, transparent 65%),
    radial-gradient(160px 110px at 22% 78%, rgba(217,106,38,.85) 0 60%, transparent 65%),
    radial-gradient(100px 70px at 60% 50%, rgba(217,106,38,.7) 0 60%, transparent 65%),
    /* base white */
    var(--bg);
  background-attachment: fixed;
}
[data-theme="beans"] .card {
  background: rgba(255,255,255,.92) !important;
  border-color: #2a1f17 !important;
  box-shadow: 0 4px 14px rgba(42,31,23,.18) !important;
}
[data-theme="beans"] .btn.primary {
  background: linear-gradient(135deg, #d96a26, #ff9bd0) !important;
  color: #fff !important;
}
[data-theme="beans"] .nav .nav-item.active {
  box-shadow: inset 4px 0 0 #ff9bd0 !important;
  background: linear-gradient(90deg, rgba(217,106,38,.18), transparent) !important;
}

/* DEEP SPACE — nebula clouds + dense star field. Distinct from Cosmos in that
   Cosmos is just a star field; Space adds soft nebula sweeps and a hint of
   distant glow. */
[data-theme="space"] {
  --bg: #02041a;
  --bg-1: #0a1030;
  --bg-2: #121a40;
  --bg-3: #1a2356;
  --border: #4a5a98;
  --fg: #e0e8ff;
  --fg-muted: #8c9ed4;
  --fg-dim: #5a6c9c;
  --accent: #7aa2f7;
  --accent-2: #f7768e;
  --on-accent: #02041a;
  --input-bg: #050920;
  --input-fg: #e0e8ff;
  --input-border: #4a5a98;
  --input-placeholder: #5a6c9c;
  --input-focus-border: #f7768e;
  --input-focus-glow: 0 0 0 2px rgba(247,118,142,.35), 0 0 18px rgba(122,162,247,.4);
}
[data-theme="space"] body {
  background:
    /* dense small stars */
    radial-gradient(1px 1px at 6% 9%, #fff, transparent),
    radial-gradient(1px 1px at 17% 24%, #fff, transparent),
    radial-gradient(1px 1px at 29% 11%, #fff, transparent),
    radial-gradient(1px 1px at 38% 33%, #fff, transparent),
    radial-gradient(1px 1px at 52% 7%, #fff, transparent),
    radial-gradient(1px 1px at 63% 27%, #fff, transparent),
    radial-gradient(1px 1px at 74% 15%, #fff, transparent),
    radial-gradient(1px 1px at 86% 29%, #fff, transparent),
    radial-gradient(1px 1px at 95% 8%, #fff, transparent),
    radial-gradient(1px 1px at 11% 47%, #fff, transparent),
    radial-gradient(1px 1px at 24% 56%, #fff, transparent),
    radial-gradient(1px 1px at 36% 41%, #fff, transparent),
    radial-gradient(1px 1px at 49% 53%, #fff, transparent),
    radial-gradient(1px 1px at 61% 62%, #fff, transparent),
    radial-gradient(1px 1px at 73% 44%, #fff, transparent),
    radial-gradient(1px 1px at 84% 57%, #fff, transparent),
    radial-gradient(1px 1px at 92% 49%, #fff, transparent),
    radial-gradient(1px 1px at 8% 71%, #fff, transparent),
    radial-gradient(1px 1px at 19% 84%, #fff, transparent),
    radial-gradient(1px 1px at 31% 76%, #fff, transparent),
    radial-gradient(1px 1px at 44% 91%, #fff, transparent),
    radial-gradient(1px 1px at 58% 78%, #fff, transparent),
    radial-gradient(1px 1px at 69% 88%, #fff, transparent),
    radial-gradient(1px 1px at 81% 73%, #fff, transparent),
    radial-gradient(1px 1px at 93% 92%, #fff, transparent),
    /* colored sparkles */
    radial-gradient(2px 2px at 22% 18%, #fff, transparent),
    radial-gradient(2px 2px at 64% 45%, #cdd6f4, transparent),
    radial-gradient(2px 2px at 41% 67%, #f7768e, transparent),
    radial-gradient(2px 2px at 78% 81%, #7aa2f7, transparent),
    radial-gradient(2px 2px at 15% 38%, #bb9af7, transparent),
    /* nebula clouds */
    radial-gradient(ellipse 800px 500px at 75% 25%, rgba(122,162,247,.18) 0, transparent 60%),
    radial-gradient(ellipse 700px 450px at 22% 78%, rgba(247,118,142,.16) 0, transparent 60%),
    radial-gradient(ellipse 500px 380px at 50% 50%, rgba(187,154,247,.12) 0, transparent 60%),
    /* base color */
    var(--bg);
  background-attachment: fixed;
  background-size:
    300px 300px, 300px 300px, 300px 300px, 300px 300px, 300px 300px,
    300px 300px, 300px 300px, 300px 300px, 300px 300px, 300px 300px,
    300px 300px, 300px 300px, 300px 300px, 300px 300px, 300px 300px,
    300px 300px, 300px 300px, 300px 300px, 300px 300px, 300px 300px,
    300px 300px, 300px 300px, 300px 300px, 300px 300px, 300px 300px,
    400px 400px, 400px 400px, 400px 400px, 400px 400px, 400px 400px,
    auto, auto, auto, auto;
  animation: space-drift 60s linear infinite;
}
@keyframes space-drift {
  /* very slow parallax drift on the nebulae; stars stay fixed */
  0%   { background-position:
    0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,
    0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,
    0 0,0 0,0 0,0 0,0 0,
    0% 50%, 100% 50%, 50% 50%, 0 0; }
  100% { background-position:
    0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,
    0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,
    0 0,0 0,0 0,0 0,0 0,
    100% 50%, 0% 50%, 100% 50%, 0 0; }
}
[data-theme="space"] .card {
  background: rgba(10, 16, 48, .72) !important;
  backdrop-filter: blur(8px);
}

/* CAUTION TAPE (yellow + black diagonal stripes) */
[data-theme="caution"] {
  --bg: #1a1a00;
  --bg-1: #fde047;
  --bg-2: #fff09a;
  --bg-3: #fde047;
  --border: #000;
  --fg: #000;
  --fg-muted: #1a1a00;
  --fg-dim: #555;
  --accent: #000;
  --accent-2: #d22d2d;
  --input-bg: #fff5b8;
  --input-fg: #000;
  --input-border: #000;
  --input-placeholder: #555;
  --input-focus-glow: 0 0 0 2px #000;
  font-family: "Impact", "Arial Black", sans-serif !important;
}
[data-theme="caution"] body {
  background:
    repeating-linear-gradient(135deg, #fde047 0 36px, #000 36px 60px);
}
[data-theme="caution"] .card {
  border: 4px solid #000 !important;
}
[data-theme="caution"] .btn.primary {
  background: #000 !important; color: #fde047 !important;
}

/* MATRIX RAIN (animated falling chars background) */
[data-theme="matrix"] {
  --bg: #000;
  --bg-1: #001500;
  --bg-2: #002500;
  --bg-3: #003500;
  --border: #00ff41;
  --fg: #00ff41;
  --fg-muted: #00aa30;
  --fg-dim: #006020;
  --accent: #00ff41;
  --accent-2: #80ff80;
  --radius: 0;
  --radius-sm: 0;
  --input-bg: #000;
  --input-fg: #00ff41;
  --input-border: #00ff41;
  --input-placeholder: #006020;
  --input-focus-glow: 0 0 0 1px #00ff41, 0 0 12px rgba(0,255,65,.6);
  --on-accent: #000;  /* dark text on bright green accent */
  font-family: ui-monospace, "Courier New", monospace !important;
}
[data-theme="matrix"] * { font-family: inherit !important; }
[data-theme="matrix"] .badge.accent { color: #000; }
/* Keep the matrix-rain canvas in the BACKGROUND. The canvas is fixed at z:0;
   raise main containers above it. */
[data-theme="matrix"] .app,
[data-theme="matrix"] .auth-wrap { position: relative; z-index: 1; }
[data-theme="matrix"] .nav,
[data-theme="matrix"] .main,
[data-theme="matrix"] .player,
[data-theme="matrix"] .card { position: relative; z-index: 2; }
/* Card backgrounds get a hint of transparency so the rain peeks through. */
[data-theme="matrix"] .card {
  background: rgba(0, 25, 0, .82) !important;
  backdrop-filter: blur(2px);
}
/* JS canvas drives the matrix rain for the built-in matrix theme.
   The pure-CSS fallback in body.effect-matrixrain (for custom themes) stays
   as a simpler approximation. */

/* DISCO BALL: rotating spotlight + animated bg */
[data-theme="disco"] {
  --bg: #1a0033;
  --bg-1: #2a0050;
  --bg-2: #3a0070;
  --bg-3: #4a0090;
  --border: #ff00aa;
  --fg: #ffffff;
  --fg-muted: #ffb3e0;
  --fg-dim: #b06bd8;
  --accent: #ff00aa;
  --accent-2: #ffee00;
  --input-bg: #220045;
  --input-fg: #ffffff;
  --input-border: #ff00aa;
  --input-placeholder: #d899c2;
  --input-focus-glow: 0 0 0 2px #ffee00, 0 0 18px rgba(255,0,170,.6);
}
[data-theme="disco"] body {
  background:
    radial-gradient(circle at 30% 20%, rgba(255,0,170,.25) 0, transparent 30%),
    radial-gradient(circle at 70% 80%, rgba(255,238,0,.25) 0, transparent 30%),
    radial-gradient(circle at 80% 30%, rgba(0,200,255,.2) 0, transparent 30%),
    radial-gradient(circle at 20% 70%, rgba(0,255,150,.2) 0, transparent 30%),
    var(--bg);
  background-size: 100% 100%;
  animation: disco-spin 8s linear infinite;
}
@keyframes disco-spin {
  from { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0 0; }
  to   { background-position: 200% 0%, 200% 100%, -100% 100%, 100% -100%, 0 0; }
}

/* CRAB RAVE: everything bounces a little */
[data-theme="crabrave"] {
  --bg: #002a3a;
  --bg-1: #003c50;
  --bg-2: #005570;
  --bg-3: #006d90;
  --border: #ff6b00;
  --fg: #ffffff;
  --fg-muted: #ffd9b3;
  --fg-dim: #b89370;
  --accent: #ff6b00;
  --accent-2: #ffd166;
  --input-bg: #001f2d;
  --input-fg: #fff;
  --input-border: #ff6b00;
  --input-placeholder: #b89370;
  --input-focus-glow: 0 0 0 3px rgba(255,107,0,.4);
}
[data-theme="crabrave"] .card,
[data-theme="crabrave"] .btn,
[data-theme="crabrave"] .qitem,
[data-theme="crabrave"] .nav-item {
  animation: crab-bounce 0.5s ease-in-out infinite alternate;
}
@keyframes crab-bounce {
  0%   { transform: translateY(-2px); }
  100% { transform: translateY(2px); }
}
[data-theme="crabrave"] .card:nth-child(2n),
[data-theme="crabrave"] .btn:nth-child(2n) {
  animation-delay: 0.25s;
}

/* DRUNK MODE: slow back-and-forth rotation of the whole page */
[data-theme="drunk"] {
  --bg: #1a0d1a;
  --bg-1: #2a1a2a;
  --bg-2: #3a2738;
  --bg-3: #4a3548;
  --border: #88665d;
  --fg: #f5e8d0;
  --fg-muted: #c4a78a;
  --fg-dim: #88665d;
  --accent: #d4915e;
  --accent-2: #b8d4a6;
  --input-bg: #1f1320;
  --input-fg: #f5e8d0;
  --input-border: #88665d;
  --input-placeholder: #88665d;
  --input-focus-glow: 0 0 0 3px rgba(212,145,94,.3);
}
[data-theme="drunk"] body {
  animation: drunk-sway 6s ease-in-out infinite;
  transform-origin: center center;
  filter: blur(.3px);
}
@keyframes drunk-sway {
  0%   { transform: rotate(-1.5deg) skewX(-1deg); }
  25%  { transform: rotate(0.8deg)  skewX(0.6deg); }
  50%  { transform: rotate(1.5deg)  skewX(1deg); }
  75%  { transform: rotate(-0.5deg) skewX(-0.4deg); }
  100% { transform: rotate(-1.5deg) skewX(-1deg); }
}

/* TROLL: nothing special CSS-wise; the JS handler dodges buttons */
[data-theme="troll"] {
  --bg: #0e0f12;
  --bg-1: #16181d;
  --bg-2: #1d2027;
  --bg-3: #262a33;
  --border: #2a2f3a;
  --fg: #e8ebf0;
  --fg-muted: #9aa3b2;
  --fg-dim: #6b7383;
  --accent: #7c5cff;
  --accent-2: #23c7ff;
  --input-bg: #11141a;
  --input-fg: #f1f4fa;
  --input-border: #3a4254;
  --input-placeholder: #7e8898;
  --input-focus-glow: 0 0 0 3px rgba(124,92,255,.18);
}
[data-theme="troll"] .btn:hover {
  cursor: not-allowed;
}
[data-theme="troll"] .nav .nav-item:hover {
  cursor: pointer;  /* nav stays usable */
}

/* spacing for form labels — never crowd the control */
.field-label,
.auth label,
.card label {
  display: block;
  margin: 12px 0 6px;
}
.card label + select,
.card label + input {
  margin-top: 0;
}

* { box-sizing: border-box; }
html, body {
  height: 100%; margin: 0; padding: 0;
  background: var(--bg); color: var(--fg);
  font: 14.5px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overscroll-behavior-y: contain;
}
a { color: var(--accent-2); text-decoration: none; }
button { font: inherit; cursor: pointer; }

#root { min-height: 100vh; display: flex; flex-direction: column; }

/* ---------- buttons & forms ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--bg-3); color: var(--fg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 14px; line-height: 1;
  transition: transform .04s ease, background .15s ease, border-color .15s;
}
.btn:hover { background: var(--bg-2); border-color: var(--accent); }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--on-accent, #fff); border: none;
}
.btn.danger { background: var(--danger); color: var(--on-danger, #fff); border: none; }
.btn.subtle { background: transparent; border-color: transparent; color: var(--fg-muted); }
.btn.subtle:hover { background: var(--bg-2); color: var(--fg); }
.btn.icon { padding: 6px 8px; min-width: 32px; min-height: 32px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
input, textarea, select {
  font: inherit;
  color: var(--input-fg);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  accent-color: var(--accent);
  caret-color: var(--input-fg);
  transition: border-color .12s, box-shadow .12s;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--input-focus-border, var(--accent));
  box-shadow: var(--input-focus-glow, 0 0 0 3px rgba(255,255,255,.08));
}
input::placeholder, textarea::placeholder {
  color: var(--input-placeholder);
  opacity: 1;
}
/* drop-down options: explicit theme colors */
option {
  background: var(--input-bg);
  color: var(--input-fg);
}
/* Autofill: browsers force a yellow bg + gray text. Override per theme. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--input-fg);
  -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset;
  caret-color: var(--input-fg);
  transition: background-color 999999s;
}
.input-group { display: flex; gap: 8px; }
.input-group > input { flex: 1; }

/* ---------- layout ---------- */
.app { display: grid; grid-template-columns: var(--nav-w) 1fr; min-height: 100vh; }
.nav {
  background: var(--bg-1); border-right: 1px solid var(--border);
  padding: 12px 8px; overflow-y: auto;
  position: sticky; top: 0; height: 100vh;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 16px; font-weight: 700; letter-spacing: .03em; font-size: 18px;
}
.brand img { width: 28px; height: 28px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-sm); color: var(--fg-muted);
  cursor: pointer; user-select: none;
}
.nav-item:hover { background: var(--bg-2); color: var(--fg); }
.nav-item.active {
  background: var(--bg-3); color: var(--fg);
  box-shadow: inset 3px 0 0 var(--accent);
}
.nav-item .icon { width: 18px; text-align: center; }

.main {
  display: flex; flex-direction: column;
  padding: 14px 18px calc(var(--player-h) + 18px); min-width: 0;
}
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 18px;
}
.topbar h1 { margin: 0; font-size: 22px; }
.topbar .user {
  display: flex; align-items: center; gap: 10px; color: var(--fg-muted);
}
.toast-host {
  position: fixed; right: 18px; bottom: calc(var(--player-h) + 14px);
  display: flex; flex-direction: column; gap: 8px; z-index: 100;
}
.toast {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 14px;
  box-shadow: var(--shadow); animation: in .15s ease;
}
.toast.error { border-color: var(--danger); }
.toast.success { border-color: var(--success); }
@keyframes in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- card grid ---------- */
.card {
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px;
}
.card h2 { margin: 0 0 10px; font-size: 16px; color: var(--fg-muted); font-weight: 600; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grid { display: grid; gap: 12px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.spacer { flex: 1; }
.muted { color: var(--fg-muted); }
.dim { color: var(--fg-dim); }
.empty { color: var(--fg-muted); padding: 20px; text-align: center; }

/* ---------- now playing ---------- */
.np {
  display: grid; grid-template-columns: 168px 1fr;
  gap: 16px; align-items: center;
}
.np .art {
  width: 168px; height: 168px;
  background: var(--bg-2); border-radius: var(--radius);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  color: var(--fg-dim); font-size: 36px;
}
.np .art img { width: 100%; height: 100%; object-fit: cover; }
.np .title { font-size: 20px; font-weight: 600; margin: 0 0 4px; }
.np .source { color: var(--fg-muted); font-size: 13px; margin-bottom: 12px; }
.progress {
  position: relative; height: 8px; background: var(--bg-3);
  border-radius: 999px; overflow: hidden; cursor: pointer;
}
.progress .bar {
  position: absolute; top:0; left:0; bottom:0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  width: 0;
}
.progress.seekable:hover { height: 10px; }
.times { display: flex; justify-content: space-between; color: var(--fg-muted); font-size: 12px; margin-top: 4px; }
.controls { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }

/* ---------- queue list ---------- */
.queue { display: flex; flex-direction: column; gap: 4px; }
.qitem {
  display: grid; grid-template-columns: 32px 56px 1fr auto;
  gap: 10px; align-items: center;
  padding: 6px; border-radius: var(--radius-sm);
  background: var(--bg-1); border: 1px solid transparent;
  cursor: grab;
}
.qitem:hover { background: var(--bg-2); }
.qitem.dragging { opacity: .4; }
.qitem.current { border-color: var(--accent); background: var(--bg-2); }
.qitem .pos { color: var(--fg-dim); text-align: center; user-select: none; }
.qitem .thumb {
  width: 56px; height: 40px; border-radius: 6px;
  background: var(--bg-3); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-dim); font-size: 14px;
}
.qitem .thumb img { width: 100%; height: 100%; object-fit: cover; }
.qitem .meta { min-width: 0; overflow: hidden; }
.qitem .meta .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qitem .meta .s { color: var(--fg-muted); font-size: 12px; }
.qitem .actions { display: flex; gap: 4px; }

/* ---------- search results ---------- */
.results { display: grid; gap: 8px; }
.result {
  display: grid; grid-template-columns: 90px 1fr auto; gap: 10px; align-items: center;
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px;
}
.result .thumb {
  width: 90px; height: 60px; border-radius: 6px; overflow: hidden;
  background: var(--bg-3);
}
.result .thumb img { width: 100%; height: 100%; object-fit: cover; }
.result .title { font-weight: 500; }
.result .sub { color: var(--fg-muted); font-size: 12px; }

/* ---------- player (sticky bottom) ---------- */
.player {
  position: fixed; left: var(--nav-w); right: 0; bottom: 0;
  height: var(--player-h); background: var(--bg-1);
  border-top: 1px solid var(--border);
  display: grid; grid-template-columns: 1fr 2fr 1fr;
  align-items: center; gap: 12px; padding: 10px 18px;
  z-index: 50;
}
.player .pmeta {
  display: flex; align-items: center; gap: 10px; min-width: 0;
}
.player .pmeta .thumb {
  width: 56px; height: 56px; border-radius: var(--radius-sm);
  background: var(--bg-3); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.player .pmeta .thumb img { width: 100%; height: 100%; object-fit: cover; }
.player .pmeta .info { min-width: 0; overflow: hidden; }
.player .pmeta .info .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.player .pmeta .info .s { color: var(--fg-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player .pctrl {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.player .pctrl .row { gap: 6px; }
.player .pright {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
}
.player .vol-slider { width: 110px; }

/* ---------- auth ---------- */
.auth-wrap {
  min-height: 100vh; display: grid; place-items: center;
  background: radial-gradient(1200px 600px at 80% -10%, rgba(124,92,255,.18), transparent),
              radial-gradient(900px 500px at -10% 110%, rgba(35,199,255,.14), transparent),
              var(--bg);
  padding: 24px;
}
.auth {
  width: 100%; max-width: 360px;
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: 16px; padding: 24px; box-shadow: var(--shadow);
}
.auth h1 {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 22px;
}
.auth .tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.auth .tab {
  flex: 1; padding: 8px 12px; text-align: center; border-radius: var(--radius-sm);
  background: var(--bg-2); color: var(--fg-muted); border: 1px solid transparent; cursor: pointer;
}
.auth .tab.active { color: var(--fg); border-color: var(--accent); background: var(--bg-3); }
.auth label { display: block; margin: 10px 0 4px; color: var(--fg-muted); font-size: 13px; }
.auth input { width: 100%; }
.auth .submit { width: 100%; margin-top: 14px; padding: 11px 16px; }
.auth .err { color: var(--danger); margin-top: 10px; font-size: 13px; min-height: 18px; }

/* ---------- soundboard / library ---------- */
.sb { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sb-btn {
  padding: 16px 10px; text-align: center; border-radius: var(--radius-sm);
  background: var(--bg-2); border: 1px solid var(--border);
  cursor: pointer; transition: background .1s;
  display: flex; flex-direction: column; gap: 6px; align-items: center;
}
.sb-btn:hover { background: var(--bg-3); border-color: var(--accent); }
.sb-btn .name { font-weight: 500; word-break: break-word; }
.sb-btn .meta { color: var(--fg-muted); font-size: 11px; }
.sb-btn .del { color: var(--danger); font-size: 11px; }

/* ---------- history ---------- */
.hist {
  display: flex; flex-direction: column; gap: 4px;
}
.hist-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  padding: 8px 10px; border-radius: var(--radius-sm); background: var(--bg-1);
  border: 1px solid var(--border);
}
.hist-row .when { color: var(--fg-muted); font-size: 12px; white-space: nowrap; }

/* ---------- mobile ---------- */
.menu-toggle { display: none; }
@media (max-width: 800px) {
  :root { --nav-w: 0px; }
  .nav {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 80;
    width: 240px; transform: translateX(-100%); transition: transform .2s;
  }
  .app.nav-open .nav { transform: none; }
  .app.nav-open::after {
    content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 70;
  }
  .menu-toggle { display: inline-flex; }
  .app { grid-template-columns: 1fr; }
  .player {
    left: 0; right: 0; grid-template-columns: 1fr;
    height: auto; padding: 8px 12px 10px;
  }
  .player .pright, .player .pmeta { display: none; }
  .player .pctrl .vol-slider { display: none; }
  .main { padding: 12px 12px calc(var(--player-h) + 14px); }
  .np { grid-template-columns: 100px 1fr; }
  .np .art { width: 100px; height: 100px; font-size: 22px; }
  .qitem { grid-template-columns: 28px 44px 1fr auto; }
  .qitem .thumb { width: 44px; height: 32px; }
  .topbar h1 { font-size: 18px; }
}

/* ---------- modal ---------- */
.modal-host {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: grid; place-items: center; z-index: 90; padding: 20px;
  animation: in .12s ease;
}
.modal {
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px;
  max-width: 480px; width: 100%; box-shadow: var(--shadow);
}
.modal h3 { margin: 0 0 10px; }
.modal .footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

/* ---------- misc ---------- */
.kbd {
  display: inline-block; padding: 2px 6px; border-radius: 4px;
  background: var(--bg-3); border: 1px solid var(--border); font-size: 11px;
  font-family: ui-monospace, monospace;
}
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: var(--bg-3); color: var(--fg-muted); font-size: 11px;
}
.badge.accent { background: var(--accent); color: var(--on-accent, #fff); }
.tabs-row { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.tabs-row .t {
  padding: 8px 14px; cursor: pointer; color: var(--fg-muted);
  border-bottom: 2px solid transparent;
}
.tabs-row .t.active { color: var(--fg); border-color: var(--accent); }

/* ============================================================
   🔥 PHOENIX — rare drop. Fire palette, pulsing embers, golden text.
   ============================================================ */
[data-theme="phoenix"] {
  --bg: #1a0500;
  --bg-1: rgba(48, 12, 4, .85);
  --bg-2: rgba(70, 20, 6, .75);
  --bg-3: rgba(96, 28, 10, .7);
  --border: #ff6b1a;
  --fg: #fff8e0;
  --fg-muted: #ffc89a;
  --fg-dim: #c4855a;
  --accent: #ff3c1a;
  --accent-2: #ffd54a;
  --on-accent: #1a0500;
  --shadow: 0 0 36px rgba(255, 90, 25, .45), 0 8px 32px rgba(0,0,0,.6);
  --input-bg: #220800;
  --input-fg: #fff8e0;
  --input-border: #ff6b1a;
  --input-placeholder: #b86838;
  --input-focus-border: #ffd54a;
  --input-focus-glow: 0 0 0 2px #ffd54a, 0 0 22px rgba(255, 60, 26, .6);
}
[data-theme="phoenix"] body {
  background:
    /* ember sparks */
    radial-gradient(1px 1px at 12% 90%, #ffd54a, transparent),
    radial-gradient(1px 1px at 33% 84%, #ff8c2e, transparent),
    radial-gradient(2px 2px at 58% 78%, #ffd54a, transparent),
    radial-gradient(1px 1px at 71% 82%, #ff4d1a, transparent),
    radial-gradient(1px 1px at 88% 88%, #ffd54a, transparent),
    radial-gradient(1px 1px at 22% 96%, #ff8c2e, transparent),
    radial-gradient(1px 1px at 48% 92%, #ffd54a, transparent),
    radial-gradient(1px 1px at 80% 95%, #ff4d1a, transparent),
    /* flame glow */
    radial-gradient(ellipse 70% 90% at 50% 110%, rgba(255, 90, 25, .55) 0, transparent 60%),
    radial-gradient(ellipse 50% 60% at 30% 100%, rgba(255, 196, 50, .35) 0, transparent 60%),
    radial-gradient(ellipse 60% 70% at 75% 100%, rgba(255, 60, 26, .4) 0, transparent 60%),
    var(--bg);
  background-attachment: fixed;
  animation: phoenix-flicker 2.4s ease-in-out infinite alternate;
}
@keyframes phoenix-flicker {
  0%   { filter: brightness(1) hue-rotate(0deg); }
  100% { filter: brightness(1.12) hue-rotate(-8deg); }
}
[data-theme="phoenix"] .card,
[data-theme="phoenix"] .nav,
[data-theme="phoenix"] .player {
  backdrop-filter: blur(8px);
}
[data-theme="phoenix"] .btn.primary {
  background: linear-gradient(135deg, #ff3c1a, #ffd54a, #ff8c2e) !important;
  background-size: 200% 200%;
  animation: phoenix-shift 3s ease infinite;
}
@keyframes phoenix-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
[data-theme="phoenix"] .topbar h1,
[data-theme="phoenix"] .np-title,
[data-theme="phoenix"] .brand {
  background: linear-gradient(135deg, #ff3c1a, #ffd54a 50%, #ff8c2e);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 6px rgba(255, 90, 25, .6));
}

/* ============================================================
   💎 GLASS — rare drop. Frosted acrylic, soft pastel base, every surface
   feels like brushed glass.
   ============================================================ */
[data-theme="glass"] {
  --bg: #1a2238;
  --bg-1: rgba(255, 255, 255, .07);
  --bg-2: rgba(255, 255, 255, .12);
  --bg-3: rgba(255, 255, 255, .18);
  --border: rgba(255, 255, 255, .25);
  --fg: #f0f4ff;
  --fg-muted: #bcc7e0;
  --fg-dim: #8a96b5;
  --accent: #5cdcff;
  --accent-2: #ff9bdc;
  --on-accent: #102035;
  --shadow: 0 8px 40px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255,255,255,.1);
  --input-bg: rgba(0, 0, 0, .25);
  --input-fg: #f0f4ff;
  --input-border: rgba(255, 255, 255, .22);
  --input-placeholder: rgba(255, 255, 255, .5);
  --input-focus-border: #5cdcff;
  --input-focus-glow: 0 0 0 2px rgba(92, 220, 255, .35);
}
[data-theme="glass"] body {
  background:
    radial-gradient(ellipse 1200px 600px at 20% 0%, rgba(92, 220, 255, .25) 0, transparent 60%),
    radial-gradient(ellipse 1000px 500px at 80% 100%, rgba(255, 155, 220, .25) 0, transparent 60%),
    radial-gradient(ellipse 800px 400px at 50% 50%, rgba(150, 130, 255, .18) 0, transparent 60%),
    var(--bg);
}
[data-theme="glass"] .card,
[data-theme="glass"] .nav,
[data-theme="glass"] .player,
[data-theme="glass"] .qitem,
[data-theme="glass"] .result {
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow: 0 8px 40px rgba(0, 0, 0, .35),
              inset 0 0 0 1px rgba(255, 255, 255, .14);
}
[data-theme="glass"] .btn.primary {
  background: linear-gradient(135deg, rgba(92, 220, 255, .85), rgba(255, 155, 220, .85)) !important;
  backdrop-filter: blur(8px);
  color: #102035 !important;
}

/* ============================================================
   💰 MONEY BAGS — achievement (spend 500 points). Stacks of cash + glittering.
   ============================================================ */
[data-theme="moneybags"] {
  --bg: #0a2a0f;
  --bg-1: #134018;
  --bg-2: #1a5520;
  --bg-3: #226b28;
  --border: #d4af37;
  --fg: #fff8d8;
  --fg-muted: #ffd86b;
  --fg-dim: #a08c42;
  --accent: #d4af37;
  --accent-2: #2da033;
  --on-accent: #0a2a0f;
  --shadow: 0 0 28px rgba(212, 175, 55, .45);
  --input-bg: #052012;
  --input-fg: #fff8d8;
  --input-border: #d4af37;
  --input-placeholder: #8c7a3a;
  --input-focus-border: #ffd86b;
  --input-focus-glow: 0 0 0 2px #ffd86b, 0 0 18px rgba(255, 216, 107, .55);
}
[data-theme="moneybags"] body {
  background:
    /* falling $$ symbols approximated as colored dots */
    radial-gradient(2px 2px at 17% 12%, #ffd86b, transparent),
    radial-gradient(2px 2px at 38% 28%, #d4af37, transparent),
    radial-gradient(2px 2px at 64% 18%, #ffd86b, transparent),
    radial-gradient(2px 2px at 84% 33%, #d4af37, transparent),
    radial-gradient(2px 2px at 11% 47%, #ffd86b, transparent),
    radial-gradient(2px 2px at 47% 58%, #d4af37, transparent),
    radial-gradient(2px 2px at 78% 67%, #ffd86b, transparent),
    radial-gradient(2px 2px at 23% 82%, #d4af37, transparent),
    radial-gradient(2px 2px at 55% 92%, #ffd86b, transparent),
    radial-gradient(2px 2px at 88% 88%, #d4af37, transparent),
    var(--bg);
  background-size: 280px 280px;
  animation: moneybags-rain 8s linear infinite;
}
@keyframes moneybags-rain {
  from { background-position: 0 0; }
  to   { background-position: 0 280px; }
}
[data-theme="moneybags"] .card {
  border-color: #d4af37 !important;
  box-shadow: 0 0 0 1px #d4af37 inset, 0 6px 22px rgba(0,0,0,.4) !important;
}
[data-theme="moneybags"] .btn.primary {
  background: linear-gradient(135deg, #d4af37, #ffd86b) !important;
  color: #0a2a0f !important;
  font-weight: 700;
}
[data-theme="moneybags"] .brand::after { content: " 💰"; }

/* ============================================================
   👻 GHOST — scheduled rare (Halloween). Smoky purple/black + spectral.
   ============================================================ */
[data-theme="ghost"] {
  --bg: #0a0518;
  --bg-1: #14102c;
  --bg-2: #1f1942;
  --bg-3: #2a225a;
  --border: #6a4a9e;
  --fg: #f0e8ff;
  --fg-muted: #b3a1d8;
  --fg-dim: #7a6b9a;
  --accent: #c084fc;
  --accent-2: #ff8a2a;
  --on-accent: #0a0518;
  --input-bg: #07041a;
  --input-fg: #f0e8ff;
  --input-border: #6a4a9e;
  --input-placeholder: #6a5a8a;
  --input-focus-border: #c084fc;
  --input-focus-glow: 0 0 0 2px rgba(192, 132, 252, .35), 0 0 18px rgba(255, 138, 42, .35);
}
[data-theme="ghost"] body {
  background:
    radial-gradient(ellipse 800px 400px at 30% 20%, rgba(192, 132, 252, .18) 0, transparent 60%),
    radial-gradient(ellipse 600px 300px at 75% 70%, rgba(255, 138, 42, .12) 0, transparent 60%),
    var(--bg);
  animation: ghost-drift 12s ease-in-out infinite alternate;
}
@keyframes ghost-drift {
  0%   { background-position: 0% 0%, 0% 0%, 0 0; }
  100% { background-position: 10% 5%, -8% -3%, 0 0; }
}
[data-theme="ghost"] .brand::after { content: " 👻"; }

/* ============================================================
   ❄️ FROSTBITE — scheduled rare (winter solstice). Icy cyan + crystal.
   ============================================================ */
[data-theme="frostbite"] {
  --bg: #061626;
  --bg-1: #0e2a3f;
  --bg-2: #143b58;
  --bg-3: #1a5078;
  --border: #7fd8ff;
  --fg: #eaf6ff;
  --fg-muted: #a8d4ee;
  --fg-dim: #6a9cbb;
  --accent: #7fd8ff;
  --accent-2: #ffffff;
  --on-accent: #061626;
  --input-bg: #051422;
  --input-fg: #eaf6ff;
  --input-border: #7fd8ff;
  --input-placeholder: #5e92b0;
  --input-focus-border: #ffffff;
  --input-focus-glow: 0 0 0 2px #fff, 0 0 18px rgba(127, 216, 255, .6);
}
[data-theme="frostbite"] body {
  background:
    /* snowflakes / ice crystals */
    radial-gradient(1px 1px at 14% 11%, #fff, transparent),
    radial-gradient(2px 2px at 33% 27%, #fff, transparent),
    radial-gradient(1px 1px at 55% 18%, #fff, transparent),
    radial-gradient(1px 1px at 77% 31%, #fff, transparent),
    radial-gradient(2px 2px at 18% 55%, #fff, transparent),
    radial-gradient(1px 1px at 46% 62%, #fff, transparent),
    radial-gradient(1px 1px at 68% 51%, #fff, transparent),
    radial-gradient(2px 2px at 89% 67%, #fff, transparent),
    radial-gradient(1px 1px at 23% 85%, #fff, transparent),
    radial-gradient(2px 2px at 59% 92%, #fff, transparent),
    radial-gradient(1px 1px at 81% 84%, #fff, transparent),
    /* frosty wash */
    linear-gradient(180deg, rgba(127, 216, 255, .14) 0, transparent 50%),
    var(--bg);
  background-size: 220px 220px;
  animation: frostbite-fall 22s linear infinite;
}
@keyframes frostbite-fall {
  from { background-position: 0 0; }
  to   { background-position: 0 220px; }
}
[data-theme="frostbite"] .brand::after { content: " ❄️"; }

/* ============================================================
   🌸 CHERRY BLOSSOM — scheduled rare (spring equinox). Soft pink/cream.
   ============================================================ */
[data-theme="blossom"] {
  --bg: #fff5f7;
  --bg-1: #ffffff;
  --bg-2: #ffe8ee;
  --bg-3: #ffd6e0;
  --border: #f4a8b8;
  --fg: #4a1f2a;
  --fg-muted: #8a4858;
  --fg-dim: #b87a8a;
  --accent: #f06080;
  --accent-2: #6db96d;
  --on-accent: #ffffff;
  --input-bg: #ffffff;
  --input-fg: #4a1f2a;
  --input-border: #f4a8b8;
  --input-placeholder: #c98a98;
  --input-focus-glow: 0 0 0 3px rgba(240, 96, 128, .22);
}
[data-theme="blossom"] body {
  background:
    /* petals */
    radial-gradient(2px 3px at 14% 21%, #ff9eb0, transparent),
    radial-gradient(2px 3px at 32% 38%, #ffb3c5, transparent),
    radial-gradient(3px 4px at 56% 14%, #ff9eb0, transparent),
    radial-gradient(2px 3px at 71% 47%, #ffb3c5, transparent),
    radial-gradient(2px 3px at 89% 28%, #ff9eb0, transparent),
    radial-gradient(2px 3px at 23% 64%, #ffb3c5, transparent),
    radial-gradient(3px 4px at 48% 77%, #ff9eb0, transparent),
    radial-gradient(2px 3px at 68% 88%, #ffb3c5, transparent),
    radial-gradient(2px 3px at 84% 75%, #ff9eb0, transparent),
    var(--bg);
  background-size: 320px 320px;
  animation: blossom-fall 18s linear infinite;
}
@keyframes blossom-fall {
  from { background-position: 0 0; }
  to   { background-position: 0 320px; }
}
[data-theme="blossom"] .brand::after { content: " 🌸"; }

/* ============================================================
   🎆 FIREWORKS — scheduled rare (July 4). Red/white/blue celebratory.
   ============================================================ */
[data-theme="fireworks"] {
  --bg: #0a0f2a;
  --bg-1: #121848;
  --bg-2: #1a2660;
  --bg-3: #243378;
  --border: #ff3344;
  --fg: #ffffff;
  --fg-muted: #c4d4ff;
  --fg-dim: #8898d0;
  --accent: #ff3344;
  --accent-2: #3a8aff;
  --on-accent: #0a0f2a;
  --input-bg: #050a1c;
  --input-fg: #ffffff;
  --input-border: #ff3344;
  --input-placeholder: #6a7ab0;
  --input-focus-border: #ffffff;
  --input-focus-glow: 0 0 0 2px #fff, 0 0 18px rgba(255, 51, 68, .55);
}
[data-theme="fireworks"] body {
  background:
    radial-gradient(circle at 22% 28%, rgba(255, 51, 68, .35) 0, transparent 20%),
    radial-gradient(circle at 72% 42%, rgba(58, 138, 255, .35) 0, transparent 20%),
    radial-gradient(circle at 50% 65%, rgba(255, 255, 255, .35) 0, transparent 20%),
    radial-gradient(circle at 85% 80%, rgba(255, 51, 68, .3) 0, transparent 20%),
    radial-gradient(circle at 18% 78%, rgba(58, 138, 255, .3) 0, transparent 20%),
    var(--bg);
  animation: fireworks-pulse 1.5s ease-in-out infinite alternate;
}
@keyframes fireworks-pulse {
  0%   { filter: brightness(1); }
  100% { filter: brightness(1.15); }
}
[data-theme="fireworks"] .brand::after { content: " 🎆"; }

/* ============================================================
   🎃 PUMPKIN — scheduled rare (next Halloween). Warm orange harvest.
   ============================================================ */
[data-theme="pumpkin"] {
  --bg: #1f0c00;
  --bg-1: #2e1300;
  --bg-2: #3e1c00;
  --bg-3: #5a2900;
  --border: #ff7518;
  --fg: #fff0d8;
  --fg-muted: #ffba6c;
  --fg-dim: #a87842;
  --accent: #ff7518;
  --accent-2: #b34a00;
  --on-accent: #1f0c00;
  --input-bg: #160800;
  --input-fg: #fff0d8;
  --input-border: #ff7518;
  --input-placeholder: #8a5a30;
  --input-focus-border: #ffba6c;
  --input-focus-glow: 0 0 0 2px #ffba6c, 0 0 18px rgba(255, 117, 24, .55);
}
[data-theme="pumpkin"] body {
  background:
    radial-gradient(ellipse 800px 500px at 50% 100%, rgba(255, 117, 24, .35) 0, transparent 60%),
    radial-gradient(ellipse 600px 400px at 20% 30%, rgba(179, 74, 0, .25) 0, transparent 60%),
    var(--bg);
}
[data-theme="pumpkin"] .brand::after { content: " 🎃"; }

/* ============================================================
   ✨ IRIDESCENT — rare drop. Holographic foil, shifting hues,
   twinkling stars, glass cards, ultra-fancy text gradients.
   ============================================================ */
[data-theme="iridescent"] {
  --bg: #07041e;
  --bg-1: rgba(20, 12, 50, .72);
  --bg-2: rgba(40, 24, 90, .62);
  --bg-3: rgba(60, 40, 130, .55);
  --border: rgba(255, 255, 255, .22);
  --fg: #ffffff;
  --fg-muted: #d4c5ff;
  --fg-dim: #9b87d8;
  --accent: hsl(280 90% 70%);
  --accent-2: hsl(190 90% 70%);
  --on-accent: #0a0428;
  --shadow:
    0 0 40px rgba(180,100,255,.45),
    0 8px 32px rgba(0,0,0,.55);
  --input-bg: rgba(0, 0, 0, .45);
  --input-fg: #ffffff;
  --input-border: rgba(255, 255, 255, .3);
  --input-placeholder: rgba(255, 255, 255, .55);
  --input-focus-border: hsl(280 100% 82%);
  --input-focus-glow:
    0 0 0 2px hsla(190 90% 72% / .55),
    0 0 28px hsla(280 90% 70% / .55);
}

/* Many tiny stars at varied positions, plus a few accent-colored sparkles.
   Three overlapping star LAYERS at different tile sizes give an authentic
   parallax-ish density without bloating the gradient list too much. */
[data-theme="iridescent"] body {
  background:
    /* dense small-stars layer (200px tile) */
    radial-gradient(1px 1px at 8% 13%, #fff, transparent),
    radial-gradient(1px 1px at 28% 6%, #fff, transparent),
    radial-gradient(1px 1px at 41% 22%, #fff, transparent),
    radial-gradient(1px 1px at 53% 9%, #fff, transparent),
    radial-gradient(1px 1px at 64% 18%, #fff, transparent),
    radial-gradient(1px 1px at 76% 4%, #fff, transparent),
    radial-gradient(1px 1px at 91% 14%, #fff, transparent),
    radial-gradient(1px 1px at 4% 33%, #fff, transparent),
    radial-gradient(1px 1px at 18% 41%, #fff, transparent),
    radial-gradient(1px 1px at 34% 36%, #fff, transparent),
    radial-gradient(1px 1px at 48% 49%, #fff, transparent),
    radial-gradient(1px 1px at 62% 38%, #fff, transparent),
    radial-gradient(1px 1px at 79% 47%, #fff, transparent),
    radial-gradient(1px 1px at 88% 33%, #fff, transparent),
    radial-gradient(1px 1px at 12% 58%, #fff, transparent),
    radial-gradient(1px 1px at 26% 66%, #fff, transparent),
    radial-gradient(1px 1px at 39% 73%, #fff, transparent),
    radial-gradient(1px 1px at 55% 62%, #fff, transparent),
    radial-gradient(1px 1px at 67% 78%, #fff, transparent),
    radial-gradient(1px 1px at 82% 64%, #fff, transparent),
    radial-gradient(1px 1px at 94% 79%, #fff, transparent),
    radial-gradient(1px 1px at 6% 85%, #fff, transparent),
    radial-gradient(1px 1px at 22% 91%, #fff, transparent),
    radial-gradient(1px 1px at 36% 88%, #fff, transparent),
    radial-gradient(1px 1px at 53% 95%, #fff, transparent),
    radial-gradient(1px 1px at 71% 92%, #fff, transparent),
    radial-gradient(1px 1px at 85% 86%, #fff, transparent),
    /* larger sparkle stars at accent colors */
    radial-gradient(2px 2px at 14% 24%, #fff, transparent),
    radial-gradient(2px 2px at 72% 51%, #fff, transparent),
    radial-gradient(2px 2px at 33% 71%, #fff, transparent),
    radial-gradient(2px 2px at 84% 23%, #c4a8ff, transparent),
    radial-gradient(2px 2px at 47% 14%, #7adcff, transparent),
    radial-gradient(2px 2px at 60% 84%, #ffc4ff, transparent),
    radial-gradient(2px 2px at 17% 78%, #7adcff, transparent),
    /* holographic foil sweeps */
    linear-gradient(135deg,
      hsla(280 80% 35% / .9) 0%,
      hsla(220 80% 32% / .85) 22%,
      hsla(190 80% 32% / .85) 44%,
      hsla(310 80% 35% / .9) 66%,
      hsla(160 70% 30% / .85) 88%,
      hsla(280 80% 35% / .9) 100%) fixed,
    var(--bg);
  background-size:
    200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px,
    200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px,
    200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px,
    200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px,
    300px 300px, 300px 300px, 300px 300px, 300px 300px, 300px 300px, 300px 300px, 300px 300px,
    400% 400%, auto;
  animation: iridescent-flow 14s ease-in-out infinite,
             iridescent-hue 22s linear infinite;
}
@keyframes iridescent-flow {
  0%   { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0,
                              0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0,
                              0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0,
                              0 0, 0 0, 0 0, 0 0, 0 0, 0 0,
                              0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0,
                              0% 50%, 0 0; }
  50%  { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0,
                              0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0,
                              0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0,
                              0 0, 0 0, 0 0, 0 0, 0 0, 0 0,
                              0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0,
                              100% 50%, 0 0; }
  100% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0,
                              0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0,
                              0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0,
                              0 0, 0 0, 0 0, 0 0, 0 0, 0 0,
                              0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0,
                              0% 50%, 0 0; }
}
@keyframes iridescent-hue {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(360deg); }
}

[data-theme="iridescent"] .card,
[data-theme="iridescent"] .nav,
[data-theme="iridescent"] .player {
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .14),
    0 8px 30px rgba(0, 0, 0, .5),
    0 0 60px rgba(255, 255, 255, .04);
}
[data-theme="iridescent"] .btn.primary {
  background: linear-gradient(135deg,
    hsl(280 100% 65%),
    hsl(190 100% 65%),
    hsl(310 100% 65%),
    hsl(160 90% 60%)) !important;
  background-size: 220% 220%;
  animation: iridescent-shift 4s ease-in-out infinite;
  color: #0a0428 !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, .55);
  font-weight: 700;
}
@keyframes iridescent-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
[data-theme="iridescent"] .topbar h1,
[data-theme="iridescent"] .np-title,
[data-theme="iridescent"] .brand {
  background: linear-gradient(135deg,
    hsl(280 100% 78%),
    hsl(190 100% 78%),
    hsl(310 100% 78%),
    hsl(160 90% 72%));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: iridescent-shift 6s ease-in-out infinite;
  filter: drop-shadow(0 0 8px hsla(280 90% 80% / .4));
}
[data-theme="iridescent"] .nav-item.active {
  box-shadow: inset 3px 0 0 hsl(190 100% 70%),
              0 0 22px rgba(255, 255, 255, .15) inset;
}
[data-theme="iridescent"] .badge.accent {
  background: linear-gradient(135deg, hsl(280 100% 70%), hsl(190 100% 70%));
  color: #0a0428;
  font-weight: 700;
}
[data-theme="iridescent"] .swatch {
  background: linear-gradient(135deg, hsl(280 100% 65%), hsl(190 100% 65%), hsl(310 100% 65%), hsl(160 90% 60%)) !important;
  background-size: 200% 200% !important;
  animation: iridescent-shift 4s ease-in-out infinite;
}

/* ---------- effect modifiers (custom themes can opt into these) ---------- */
/* Each effect is applied via a body class effect-<name> so users can mix and
   match independently of theme color choices. */

body.effect-shake { animation: fx-shake .18s infinite; }
@keyframes fx-shake {
  0%   { transform: translate(1px, 1px); }
  25%  { transform: translate(-1px, 2px); }
  50%  { transform: translate(-2px, -1px); }
  75%  { transform: translate(2px, 1px); }
  100% { transform: translate(1px, -2px); }
}

body.effect-sway { animation: fx-sway 6s ease-in-out infinite; transform-origin: center; }
@keyframes fx-sway {
  0%   { transform: rotate(-1.5deg) skewX(-1deg); }
  25%  { transform: rotate(0.8deg)  skewX(0.6deg); }
  50%  { transform: rotate(1.5deg)  skewX(1deg); }
  75%  { transform: rotate(-0.5deg) skewX(-0.4deg); }
  100% { transform: rotate(-1.5deg) skewX(-1deg); }
}

body.effect-flip { transform: rotate(180deg); }
body.effect-tilt { transform: rotate(5deg); transform-origin: center top; }

body.effect-bounce .card,
body.effect-bounce .btn,
body.effect-bounce .qitem,
body.effect-bounce .nav-item {
  animation: fx-bounce 0.5s ease-in-out infinite alternate;
}
@keyframes fx-bounce {
  0%   { transform: translateY(-2px); }
  100% { transform: translateY(2px); }
}

body.effect-glitchtext .topbar h1,
body.effect-glitchtext .np-title,
body.effect-glitchtext .brand {
  text-shadow: 1px 0 #ff0090, -1px 0 #00f5ff;
  animation: fx-glitch 1.3s infinite steps(2);
}
@keyframes fx-glitch {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-1px, 0); }
  40%  { transform: translate(1px, 0); }
  60%  { transform: translate(0, 1px); }
  80%  { transform: translate(-1px, -1px); }
  100% { transform: translate(0, 0); }
}

body.effect-scanlines::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 4px);
  mix-blend-mode: overlay;
}

body.effect-auroraflow {
  background:
    linear-gradient(120deg,
      transparent 0%,
      rgba(74,223,179,.25) 15%,
      rgba(184,112,255,.25) 35%,
      transparent 55%,
      rgba(74,138,255,.22) 75%,
      transparent 95%) fixed,
    var(--bg);
  background-size: 200% 200%;
  animation: fx-aurora 16s ease-in-out infinite;
}
@keyframes fx-aurora {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

body.effect-discospots {
  background:
    radial-gradient(circle at 30% 20%, rgba(255,0,170,.25) 0, transparent 30%),
    radial-gradient(circle at 70% 80%, rgba(255,238,0,.25) 0, transparent 30%),
    radial-gradient(circle at 80% 30%, rgba(0,200,255,.2) 0, transparent 30%),
    radial-gradient(circle at 20% 70%, rgba(0,255,150,.2) 0, transparent 30%),
    var(--bg);
  background-size: 100% 100%;
  animation: fx-disco 8s linear infinite;
}
@keyframes fx-disco {
  from { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0 0; }
  to   { background-position: 200% 0%, 200% 100%, -100% 100%, 100% -100%, 0 0; }
}

body.effect-matrixrain::before {
  content: "0 1 0 1 1 0 1 0 0 1 1 1 0 1 0 1 0 0 1 1\A 1 0 1 1 0 1 0 1 1 0 0 1 0 1 1 0 1 1 0 0\A 0 0 1 0 1 1 0 0 1 1 0 1 0 0 1 1 1 0 1 1\A 1 1 0 1 0 0 1 1 0 1 1 0 1 1 0 0 1 0 1 0\A 0 1 0 0 1 1 1 0 1 0 0 1 0 1 0 1 1 1 0 0\A";
  white-space: pre; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  color: rgba(0,255,65,.18);
  font-family: ui-monospace, monospace; font-size: 14px; line-height: 1.2;
  animation: fx-matrixfall 8s linear infinite;
}
@keyframes fx-matrixfall {
  from { transform: translateY(-100%); }
  to   { transform: translateY(100%); }
}

body.effect-lavapulse {
  background:
    radial-gradient(circle at 20% 30%, rgba(255,69,0,.35) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255,140,0,.3) 0, transparent 40%),
    var(--bg);
  animation: fx-lava 4s ease-in-out infinite alternate;
}
@keyframes fx-lava {
  0%   { filter: brightness(1); }
  100% { filter: brightness(1.15); }
}

body.effect-twinkle {
  background:
    radial-gradient(1px 1px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 40% 70%, #fff, transparent),
    radial-gradient(1px 1px at 80% 55%, #fff, transparent),
    radial-gradient(2px 2px at 90% 10%, #fff, transparent),
    radial-gradient(1px 1px at 33% 88%, #fff, transparent),
    var(--bg);
  background-size: 200px 200px;
  animation: fx-twinkle 3s ease-in-out infinite alternate;
}
@keyframes fx-twinkle {
  0%   { opacity: 1; }
  100% { opacity: .8; }
}

body.effect-huecycle { animation: fx-hue 4s linear infinite; }
@keyframes fx-hue { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }

body.effect-stickytilt .card:nth-of-type(3n)   { transform: rotate(-0.8deg); }
body.effect-stickytilt .card:nth-of-type(3n+1) { transform: rotate(0.6deg); }
body.effect-stickytilt .card:nth-of-type(3n+2) { transform: rotate(-0.3deg); }

/* ---------- theme builder ---------- */
.theme-group-label {
  font-size: 12px; color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: .08em;
  margin: 12px 0 6px;
}
.theme-card {
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px; cursor: pointer;
  transition: transform .08s ease, border-color .15s;
}
.theme-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.theme-card.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.theme-card .swatch {
  height: 56px; border-radius: 6px; margin-bottom: 6px;
  border: 1px solid var(--border);
}
.theme-card .tname { font-weight: 500; font-size: 13px; }
.var-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  margin-top: 12px;
}
.var-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: var(--radius-sm);
  background: var(--bg-2);
}
.var-row input[type="color"] {
  width: 38px; height: 38px; padding: 0; border-radius: 6px;
  cursor: pointer; flex-shrink: 0;
}
.var-row .var-label { font-size: 13px; }
.var-row .var-key { font-size: 11px; font-family: ui-monospace, monospace; }
.fx-grid {
  display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.fx-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: var(--radius-sm);
  background: var(--bg-2); cursor: pointer; font-size: 13px;
}
.fx-row:hover { background: var(--bg-3); }
.fx-row input { width: 16px; height: 16px; cursor: pointer; }

/* ---------- visualizer ---------- */
.viz {
  height: 60px; display: flex; align-items: flex-end; gap: 2px; padding: 4px;
  background: var(--bg-2); border-radius: var(--radius-sm);
}
.viz .b {
  flex: 1; background: linear-gradient(to top, var(--accent), var(--accent-2));
  border-radius: 2px 2px 0 0; transition: height .05s ease;
}