/* ══════════════════════════════════════════════════
   Theme System: CSS Custom Properties
   Add a new theme by creating a [data-theme="name"] block.
   ══════════════════════════════════════════════════ */

/* ── Theme toggle button ── */
#theme-toggle:hover {
    transform: scale(1.15);
    filter: brightness(1.3) saturate(1.4);
}

/* Retro: CRT phosphor rainbow */
[data-theme="retro"] #theme-toggle svg stop:nth-child(1) { stop-color: #ff3c3c; }
[data-theme="retro"] #theme-toggle svg stop:nth-child(2) { stop-color: #ffb000; }
[data-theme="retro"] #theme-toggle svg stop:nth-child(3) { stop-color: #33ff33; }
[data-theme="retro"] #theme-toggle svg stop:nth-child(4) { stop-color: #00ffc8; }
[data-theme="retro"] #theme-toggle svg stop:nth-child(5) { stop-color: #cc8800; }

/* ── Light theme (default) ── */
:root,
[data-theme="light"] {
    /* Backgrounds */
    --color-bg:              #fafafa;
    --color-surface:         #ffffff;
    --color-surface-alt:     #f5f5f5;
    --color-surface-hover:   #fafafa;
    --color-nav-bg:          rgba(255, 255, 255, 0.8);

    /* Text */
    --color-text-primary:    #171717;
    --color-text-secondary:  #737373;
    --color-text-muted:      #a3a3a3;
    --color-text-nav:        #525252;
    --color-text-hover:      #171717;

    /* Borders */
    --color-border:          #e5e5e5;
    --color-border-subtle:   rgba(229, 229, 229, 0.5);
    --color-border-divider:  #f5f5f5;

    /* Accent */
    --color-accent:          #16a34a;
    --color-accent-hover-bg: #f0fdf4;
    --color-accent-from:     #16a34a;
    --color-accent-to:       #059669;
    --color-accent-highlight: #f0fdf4;

    /* Music player */
    --color-wave:            #d4d4d4;
    --color-wave-progress:   #16a34a;
    --color-viz-bar:         #16a34a;

    /* Scrollbar */
    --scrollbar-thumb:       #d4d4d4;
    --scrollbar-thumb-hover: #a3a3a3;

    /* Font */
    --font-body:             "DM Sans", system-ui, sans-serif;
    --font-heading:          "DM Sans", system-ui, sans-serif;
}

/* ── Dark theme ── */
[data-theme="dark"] {
    --color-bg:              #0a0a0a;
    --color-surface:         #171717;
    --color-surface-alt:     #262626;
    --color-surface-hover:   rgba(38, 38, 38, 0.5);
    --color-nav-bg:          rgba(10, 10, 10, 0.8);

    --color-text-primary:    #f5f5f5;
    --color-text-secondary:  #a3a3a3;
    --color-text-muted:      #737373;
    --color-text-nav:        #d4d4d4;
    --color-text-hover:      #ffffff;

    --color-border:          #262626;
    --color-border-subtle:   rgba(38, 38, 38, 0.5);
    --color-border-divider:  #262626;

    --color-accent:          #4ade80;
    --color-accent-hover-bg: #262626;
    --color-accent-from:     #4ade80;
    --color-accent-to:       #34d399;
    --color-accent-highlight: rgba(22, 101, 52, 0.3);

    --color-wave:            #404040;
    --color-wave-progress:   #22c55e;
    --color-viz-bar:         #22c55e;

    --scrollbar-thumb:       #404040;
    --scrollbar-thumb-hover: #525252;

    --font-body:             "DM Sans", system-ui, sans-serif;
    --font-heading:          "DM Sans", system-ui, sans-serif;
}

/* ── Retro theme ── */
[data-theme="retro"] {
    --color-bg:              #1a1a0e;
    --color-surface:         #222211;
    --color-surface-alt:     #2a2a18;
    --color-surface-hover:   rgba(42, 42, 24, 0.5);
    --color-nav-bg:          rgba(26, 26, 14, 0.9);

    --color-text-primary:    #ffb000;
    --color-text-secondary:  #cc8800;
    --color-text-muted:      #886600;
    --color-text-nav:        #ddaa00;
    --color-text-hover:      #ffcc00;

    --color-border:          #3a3a20;
    --color-border-subtle:   rgba(58, 58, 32, 0.5);
    --color-border-divider:  #3a3a20;

    --color-accent:          #33ff33;
    --color-accent-hover-bg: #2a2a18;
    --color-accent-from:     #33ff33;
    --color-accent-to:       #00cc66;
    --color-accent-highlight: rgba(0, 80, 0, 0.25);

    --color-wave:            #3a3a20;
    --color-wave-progress:   #33ff33;
    --color-viz-bar:         #33ff33;

    --scrollbar-thumb:       #3a3a20;
    --scrollbar-thumb-hover: #555530;

    --font-body:             "Space Mono", "Courier New", monospace;
    --font-heading:          "Space Mono", "Courier New", monospace;
}

/* ── Retro CRT effects ── */

/* CRT screen bezel overlay: vignette via radial gradient (cheaper than box-shadow) */
[data-theme="retro"] body::after {
    content: '';
    position: fixed;
    top: 3.5rem;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 49;
    pointer-events: none;
    border-radius: 0 0 14px 14px;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.45) 80%, rgba(0, 0, 0, 0.7) 100%);
}


[data-theme="retro"] h1,
[data-theme="retro"] h1 span {
    text-shadow:
        3px 0 rgba(255, 60, 60, 0.5),
        -3px 0 rgba(0, 255, 200, 0.5);
}

[data-theme="retro"] h2,
[data-theme="retro"] h3,
[data-theme="retro"] h2 span,
[data-theme="retro"] h3 span {
    text-shadow:
        2px 0 rgba(255, 60, 60, 0.4),
        -2px 0 rgba(0, 255, 200, 0.4);
}

/* Phosphor glow on body text (scoped to avoid per-element repaint cost) */
[data-theme="retro"] p,
[data-theme="retro"] li {
    text-shadow: 0 0 4px rgba(255, 176, 0, 0.3);
}

/* Flicker moved to single .bg-effects overlay in animations.css */

@keyframes crt-flicker {
    0%, 100% { opacity: 1; }
    7%  { opacity: 0.985; }
    8%  { opacity: 1; }
    33% { opacity: 0.98; }
    34% { opacity: 1; }
    56% { opacity: 0.975; }
    57% { opacity: 1; }
    72% { opacity: 0.99; }
    73% { opacity: 1; }
    91% { opacity: 0.97; }
    92% { opacity: 1; }
}

[data-theme="retro"] .nav-gradient-line {
    background: linear-gradient(to right, #ffb000, #33ff33, #ff6600, #ffb000, #33ff33);
}

/* ── Retro cassette deck player ── */

/* Deck housing */
[data-theme="retro"] #now-playing {
    background: linear-gradient(180deg, #3a3a28 0%, #2a2a18 40%, #222211 100%);
    border: 2px solid #555530;
    border-radius: 8px;
    box-shadow:
        inset 0 1px 0 rgba(255, 176, 0, 0.1),
        inset 0 -2px 4px rgba(0, 0, 0, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.5);
    position: relative;
}

/* Brand label strip across the top */
[data-theme="retro"] #now-playing::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #555530, #886600, #555530);
    border-radius: 6px 6px 0 0;
    z-index: 1;
}

/* Idle state: empty deck */
[data-theme="retro"] #np-idle {
    flex-direction: column;
    gap: 0.75rem;
    padding: 2rem 1.5rem;
}

[data-theme="retro"] #np-idle svg {
    display: none;
}

[data-theme="retro"] #np-idle span {
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.7rem;
    color: #886600;
}

/* Empty tape window in idle state */
[data-theme="retro"] #np-idle::before {
    content: '';
    display: block;
    width: 70%;
    max-width: 300px;
    height: 60px;
    margin: 0 auto;
    background: #0a0a05;
    border: 2px solid #444420;
    border-radius: 8px;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8);
}

/* Header: LED-style "Now Playing" badge */
[data-theme="retro"] #np-active > div:first-child .text-xs.font-medium {
    background: #0a0a05;
    border: 1px solid #3a3a20;
    padding: 2px 8px;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.65rem;
    color: #33ff33;
    text-shadow: 0 0 6px rgba(51, 255, 51, 0.6);
}

/* LCD counter time display */
[data-theme="retro"] #np-current-time,
[data-theme="retro"] #np-duration {
    background: #0a0a05;
    border: 1px solid #3a3a20;
    padding: 1px 6px;
    border-radius: 2px;
    color: #33ff33;
    text-shadow: 0 0 4px rgba(51, 255, 51, 0.5);
}

/* Tape window: the canvas wrapper */
[data-theme="retro"] .tape-window {
    background: #0a0a05;
    border: 2px solid #444420;
    border-radius: 12px;
    margin: 0 1rem;
    padding: 0.75rem !important;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8);
    position: relative;
}

/* Tape reels container: positioned over the canvas */
[data-theme="retro"] .tape-reels {
    display: flex !important;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: space-between;
    align-items: center;
    padding: 0 8%;
    pointer-events: none;
    z-index: 2;
}

/* Individual reel */
[data-theme="retro"] .tape-reel {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid #555530;
    background: radial-gradient(circle, #1a1a0e 25%, #2a2a18 60%, #333320 100%);
    position: relative;
    animation: tape-spin 2.5s linear infinite;
    animation-play-state: paused;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
}

/* Reel hub with spokes */
[data-theme="retro"] .tape-reel::before {
    content: '';
    position: absolute;
    inset: 20%;
    border-radius: 50%;
    border: 2px solid #555530;
    background: conic-gradient(
        #444420 0deg, #444420 8deg,
        transparent 8deg, transparent 52deg,
        #444420 52deg, #444420 68deg,
        transparent 68deg, transparent 112deg,
        #444420 112deg, #444420 128deg,
        transparent 128deg, transparent 172deg,
        #444420 172deg, #444420 188deg,
        transparent 188deg, transparent 232deg,
        #444420 232deg, #444420 248deg,
        transparent 248deg, transparent 292deg,
        #444420 292deg, #444420 308deg,
        transparent 308deg, transparent 352deg,
        #444420 352deg, #444420 360deg
    );
}

/* Reel center dot */
[data-theme="retro"] .tape-reel::after {
    content: '';
    position: absolute;
    inset: 40%;
    border-radius: 50%;
    background: #555530;
    border: 1px solid #666640;
}

/* Spin reels when playing */
[data-theme="retro"] #now-playing.playing .tape-reel {
    animation-play-state: running;
}

/* Transport controls panel */
[data-theme="retro"] #np-active > div:last-child {
    background: linear-gradient(180deg, #1a1a0e, #222211);
    border-top: 1px solid #3a3a20;
}

/* Play/pause: mechanical pushbutton */
[data-theme="retro"] #np-play-pause {
    background: linear-gradient(180deg, #555530, #3a3a20) !important;
    border: 2px solid #666640;
    border-bottom-color: #222211;
    box-shadow:
        0 3px 0 #1a1a0e,
        inset 0 1px 0 rgba(255, 176, 0, 0.15);
    border-radius: 6px !important;
    transition: all 0.1s;
}

[data-theme="retro"] #np-play-pause:hover {
    background: linear-gradient(180deg, #666640, #444420) !important;
}

[data-theme="retro"] #np-play-pause:active {
    box-shadow: 0 1px 0 #1a1a0e;
    transform: translateY(2px);
}

/* Prev/Next: smaller mechanical buttons */
[data-theme="retro"] #np-prev,
[data-theme="retro"] #np-next {
    background: linear-gradient(180deg, #444420, #2a2a18);
    border: 1px solid #555530;
    border-bottom-color: #1a1a0e;
    border-radius: 4px;
    box-shadow: 0 2px 0 #1a1a0e;
    transition: all 0.1s;
}

[data-theme="retro"] #np-prev:hover,
[data-theme="retro"] #np-next:hover {
    background: linear-gradient(180deg, #555530, #3a3a20);
}

[data-theme="retro"] #np-prev:active,
[data-theme="retro"] #np-next:active {
    box-shadow: 0 0 0 #1a1a0e;
    transform: translateY(2px);
}

/* Tracklist container: cassette case */
[data-theme="retro"] #music .styled-scrollbar {
    background: #1a1a0e;
    border: 2px solid #555530;
    border-radius: 6px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Track rows: cassette labels */
[data-theme="retro"] .track-row {
    background: linear-gradient(90deg, #2a2a18 0%, #333320 50%, #2a2a18 100%);
    border-left: 3px solid #555530 !important;
    position: relative;
}

[data-theme="retro"] .track-row:hover {
    background: linear-gradient(90deg, #333320 0%, #3a3a28 50%, #333320 100%) !important;
}

/* Active track: green accent border */
[data-theme="retro"] .track-row.bg-th-accent-hl {
    background: linear-gradient(90deg, #2a3a18 0%, #334420 50%, #2a3a18 100%) !important;
    border-left-color: #33ff33 !important;
}

/* Track play buttons: square mechanical buttons */
[data-theme="retro"] .track-play-btn {
    background: linear-gradient(180deg, #555530, #3a3a20) !important;
    border: 2px solid #666640;
    border-bottom-color: #222211;
    border-radius: 4px !important;
    box-shadow: 0 2px 0 #1a1a0e;
    transition: all 0.1s;
}

[data-theme="retro"] .track-play-btn:hover {
    background: linear-gradient(180deg, #666640, #444420) !important;
}

[data-theme="retro"] .track-play-btn:active {
    box-shadow: 0 0 0 #1a1a0e;
    transform: translateY(2px);
}

/* Mobile: smaller reels */
@media (max-width: 640px) {
    [data-theme="retro"] .tape-reel {
        width: 36px;
        height: 36px;
    }
}

/* ── MySpace theme ── */
[data-theme="myspace"] {
    --color-bg:              #000033;
    --color-surface:         #0d0d3b;
    --color-surface-alt:     #1a1a55;
    --color-surface-hover:   rgba(30, 30, 80, 0.5);
    --color-nav-bg:          rgba(0, 0, 51, 0.9);

    --color-text-primary:    #ff66ff;
    --color-text-secondary:  #00ffff;
    --color-text-muted:      #9999ff;
    --color-text-nav:        #ff99ff;
    --color-text-hover:      #ffffff;

    --color-border:          #ff00ff;
    --color-border-subtle:   rgba(255, 0, 255, 0.3);
    --color-border-divider:  #330066;

    --color-accent:          #00ff00;
    --color-accent-hover-bg: #1a1a55;
    --color-accent-from:     #ff00ff;
    --color-accent-to:       #00ffff;
    --color-accent-highlight: rgba(255, 0, 255, 0.2);

    --color-wave:            #4a4a6a;
    --color-wave-progress:   #ffffff;
    --color-viz-bar:         #4a90d9;

    --scrollbar-thumb:       #6600ff;
    --scrollbar-thumb-hover: #ff00ff;

    --font-body:             "Comic Neue", "Comic Sans MS", cursive, sans-serif;
    --font-heading:          "Comic Neue", "Comic Sans MS", cursive, sans-serif;
}

/* ── MySpace-specific effects ── */
[data-theme="myspace"] h1,
[data-theme="myspace"] h2,
[data-theme="myspace"] h3 {
    text-shadow: 0 0 10px rgba(255, 0, 255, 0.6), 0 0 20px rgba(255, 0, 255, 0.3);
}

[data-theme="myspace"] .bg-th-surface {
    box-shadow: 0 0 12px rgba(255, 0, 255, 0.25), 0 0 24px rgba(0, 255, 255, 0.1);
}

[data-theme="myspace"] .nav-gradient-line {
    background: linear-gradient(to right, #ff00ff, #00ffff, #00ff00, #ffff00, #ff00ff);
    height: 3px;
}

[data-theme="myspace"] body {
    cursor: crosshair;
}

[data-theme="myspace"] a {
    cursor: pointer;
}

[data-theme="myspace"] .border-t-emerald-500 { border-top-color: #00ffff; }
[data-theme="myspace"] .border-t-red-500 { border-top-color: #ff00ff; }
[data-theme="myspace"] .border-t-violet-500 { border-top-color: #00ff00; }
[data-theme="myspace"] .border-t-amber-500 { border-top-color: #ffff00; }

/* ── MySpace player (2000s iTunes-inspired) ── */

/* Player housing: brushed aluminum */
[data-theme="myspace"] #now-playing {
    background: linear-gradient(180deg, #d0d0d8 0%, #b8b8c4 8%, #a8a8b4 50%, #9898a4 100%);
    border: 1px solid #8888a0;
    border-radius: 8px;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    position: relative;
}

/* CD slot line */
[data-theme="myspace"] #now-playing::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: #606070;
    border-radius: 2px;
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.5),
        0 1px 0 rgba(255, 255, 255, 0.2);
    z-index: 1;
}

/* "COMPACT DISC" label */
[data-theme="myspace"] #now-playing::after {
    content: 'COMPACT DISC DIGITAL AUDIO';
    position: absolute;
    top: 14px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.45rem;
    letter-spacing: 0.2em;
    color: rgba(60, 60, 80, 0.45);
    font-family: "DM Sans", system-ui, sans-serif;
    z-index: 1;
    pointer-events: none;
}

/* Idle state */
[data-theme="myspace"] #np-idle {
    flex-direction: column;
    gap: 0.75rem;
    padding: 2.5rem 1.5rem 2rem;
}

[data-theme="myspace"] #np-idle svg {
    display: none;
}

[data-theme="myspace"] #np-idle span {
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.7rem;
    color: #555570;
    text-shadow: none;
    font-family: "DM Sans", system-ui, sans-serif;
}

/* LCD display in idle state */
[data-theme="myspace"] #np-idle::before {
    content: 'NO DISC';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70%;
    max-width: 300px;
    height: 50px;
    margin: 0 auto;
    background: #1a1a2e;
    border: 2px solid #4a4a60;
    border-radius: 4px;
    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, 0.6),
        0 1px 0 rgba(255, 255, 255, 0.1);
    color: #4a90d9;
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    text-shadow: 0 0 4px rgba(74, 144, 217, 0.4);
    font-family: "DM Sans", system-ui, sans-serif;
}

/* Extra top padding to clear CD slot label */
[data-theme="myspace"] #np-active > div:first-child {
    padding-top: 1.75rem;
}

/* Header: "Now Playing" badge */
[data-theme="myspace"] #np-active > div:first-child .text-xs.font-medium {
    background: #1a1a2e;
    border: 1px solid #4a4a60;
    padding: 2px 8px;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.6rem;
    color: #4a90d9;
    text-shadow: 0 0 4px rgba(74, 144, 217, 0.4);
    font-family: "DM Sans", system-ui, sans-serif;
}

/* Track title in header: dark on aluminum */
[data-theme="myspace"] #np-title {
    color: #2a2a3a;
    text-shadow: none;
}

/* LCD time counter */
[data-theme="myspace"] #np-current-time,
[data-theme="myspace"] #np-duration {
    background: #1a1a2e;
    border: 1px solid #4a4a60;
    padding: 1px 6px;
    border-radius: 2px;
    color: #4a90d9;
    text-shadow: 0 0 3px rgba(74, 144, 217, 0.3);
    font-family: "DM Sans", system-ui, sans-serif;
}

/* LCD display panel: visualizer */
[data-theme="myspace"] .tape-window {
    background: #1a1a2e;
    border: 2px solid #4a4a60;
    border-radius: 6px;
    margin: 0 1rem;
    padding: 0.75rem !important;
    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, 0.6),
        0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
}

/* Transport controls panel */
[data-theme="myspace"] #np-active > div:last-child {
    background: linear-gradient(180deg, #b0b0bc, #a0a0ac);
    border-top: 1px solid #8888a0;
}

/* Play/pause: aqua blue button */
[data-theme="myspace"] #np-play-pause {
    background: linear-gradient(180deg, #6abaff, #3a8ae0) !important;
    border: 1px solid #2a7ad0;
    color: #ffffff;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    border-radius: 6px !important;
    transition: all 0.15s;
}

[data-theme="myspace"] #np-play-pause:hover {
    background: linear-gradient(180deg, #7acaff, #4a9af0) !important;
}

[data-theme="myspace"] #np-play-pause:active {
    background: linear-gradient(180deg, #3a8ae0, #2a6ac0) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    transform: translateY(1px);
}

/* Prev/Next: aluminum buttons */
[data-theme="myspace"] #np-prev,
[data-theme="myspace"] #np-next {
    background: linear-gradient(180deg, #c0c0cc, #a0a0ac);
    border: 1px solid #8888a0;
    border-radius: 4px;
    color: #3a3a5a;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: all 0.1s;
}

[data-theme="myspace"] #np-prev:hover,
[data-theme="myspace"] #np-next:hover {
    background: linear-gradient(180deg, #d0d0dc, #b0b0bc);
}

[data-theme="myspace"] #np-prev:active,
[data-theme="myspace"] #np-next:active {
    background: linear-gradient(180deg, #a0a0ac, #8888a0);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}

/* Viz toggle: dark on aluminum */
[data-theme="myspace"] #np-viz-toggle {
    color: #4a4a6a;
}

/* Tracklist container: dark media player */
[data-theme="myspace"] #music .styled-scrollbar {
    background: #0c0c22;
    border: 1px solid #2a2a50;
    border-radius: 6px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Tracklist scrollbar */
[data-theme="myspace"] #music .styled-scrollbar::-webkit-scrollbar-track {
    background: #0c0c22;
}

[data-theme="myspace"] #music .styled-scrollbar::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #4a4a6a, #3a3a5a);
    border: 1px solid #2a2a50;
}

[data-theme="myspace"] #music .styled-scrollbar::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #5a5a7a, #4a4a6a);
}

/* Firefox */
[data-theme="myspace"] #music .styled-scrollbar {
    scrollbar-color: #3a3a5a #0c0c22;
}

/* Track rows: dark alternating */
[data-theme="myspace"] .track-row {
    background: #12122a !important;
    border-left: none !important;
    border-bottom-color: #1e1e3a !important;
    position: relative;
}

[data-theme="myspace"] .track-row:nth-child(even) {
    background: #181840 !important;
}

[data-theme="myspace"] .track-row:hover {
    background: #1e1e4a !important;
}

[data-theme="myspace"] .track-row:nth-child(even):hover {
    background: #222255 !important;
}

/* Track text: light on dark */
[data-theme="myspace"] .track-row .track-title {
    color: #d0d0e0;
    text-shadow: none;
}

[data-theme="myspace"] .track-row .track-duration {
    color: #7a7a9a;
    text-shadow: none;
}

/* Active track: iTunes blue highlight */
[data-theme="myspace"] .track-row.bg-th-accent-hl {
    background: linear-gradient(180deg, #5a9ae8, #3d80df) !important;
    border-left: none !important;
}

[data-theme="myspace"] .track-row.bg-th-accent-hl .track-title {
    color: #ffffff;
}

[data-theme="myspace"] .track-row.bg-th-accent-hl .track-duration {
    color: rgba(255, 255, 255, 0.8);
}

/* Track play buttons: mini CD disc */
[data-theme="myspace"] .track-play-btn {
    background:
        conic-gradient(
            from 0deg,
            rgba(255, 80, 80, 0.15),
            rgba(255, 200, 50, 0.12),
            rgba(80, 255, 80, 0.15),
            rgba(50, 180, 255, 0.12),
            rgba(140, 80, 255, 0.15),
            rgba(255, 80, 180, 0.12),
            rgba(255, 80, 80, 0.15)
        ),
        linear-gradient(135deg, #d8d8e4, #c0c0cc, #d0d0dc, #b0b0bc) !important;
    border: 1px solid #9a9ab0;
    border-radius: 50% !important;
    color: #2a2a3a;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.3),
        inset 0 0 0 3px rgba(160, 160, 180, 0.3),
        inset 0 0 0 4px rgba(0, 0, 0, 0.08);
    transition: all 0.2s;
}

[data-theme="myspace"] .track-play-btn:hover {
    background:
        conic-gradient(
            from 30deg,
            rgba(255, 80, 80, 0.25),
            rgba(255, 200, 50, 0.2),
            rgba(80, 255, 80, 0.25),
            rgba(50, 180, 255, 0.2),
            rgba(140, 80, 255, 0.25),
            rgba(255, 80, 180, 0.2),
            rgba(255, 80, 80, 0.25)
        ),
        linear-gradient(135deg, #e4e4f0, #ccccdc, #dcdce8, #c0c0cc) !important;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.3),
        inset 0 0 0 3px rgba(160, 160, 180, 0.4),
        inset 0 0 0 4px rgba(0, 0, 0, 0.08);
}

[data-theme="myspace"] .track-play-btn:active {
    background:
        conic-gradient(
            from 60deg,
            rgba(255, 80, 80, 0.2),
            rgba(255, 200, 50, 0.15),
            rgba(80, 255, 80, 0.2),
            rgba(50, 180, 255, 0.15),
            rgba(140, 80, 255, 0.2),
            rgba(255, 80, 180, 0.15),
            rgba(255, 80, 80, 0.2)
        ),
        linear-gradient(135deg, #c0c0cc, #b0b0bc, #c8c8d4, #a8a8b8) !important;
    transform: translateY(1px);
}

/* Mobile: keep CD label, ensure content clears it */
@media (max-width: 640px) {
    [data-theme="myspace"] #np-idle {
        padding-top: 2rem;
    }
}

/* ══════════════════════════════════════════════════
   Volume Slider
   ══════════════════════════════════════════════════ */

.volume-slider {
    --vol-pct: 100%;
    -webkit-appearance: none;
    appearance: none;
    width: 80px;
    height: 4px;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    background: linear-gradient(to right, var(--color-accent) var(--vol-pct), var(--color-wave) var(--vol-pct));
    transition: opacity 0.2s;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-accent);
    border: 2px solid var(--color-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: transform 0.15s;
}

.volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.volume-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-accent);
    border: 2px solid var(--color-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.volume-slider::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: var(--color-wave);
}

.volume-slider::-moz-range-progress {
    height: 4px;
    border-radius: 2px;
    background: var(--color-accent);
}

/* Hide on small screens */
@media (max-width: 480px) {
    .volume-control {
        display: none;
    }
}

/* ── Light theme volume ── */
[data-theme="light"] .volume-slider::-webkit-slider-thumb {
    background: #16a34a;
    border-color: #ffffff;
}

/* ── Dark theme volume ── */
[data-theme="dark"] .volume-slider::-webkit-slider-thumb {
    background: #4ade80;
    border-color: #171717;
    box-shadow: 0 0 6px rgba(74, 222, 128, 0.3), 0 1px 3px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .volume-slider::-moz-range-thumb {
    background: #4ade80;
    border-color: #171717;
    box-shadow: 0 0 6px rgba(74, 222, 128, 0.3), 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* ── Retro theme volume: mechanical slot slider ── */
[data-theme="retro"] .volume-slider {
    height: 6px;
    border-radius: 1px;
    border: 1px solid #444420;
    background: linear-gradient(to right, #33ff33 var(--vol-pct), #0a0a05 var(--vol-pct));
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}

[data-theme="retro"] .volume-slider::-webkit-slider-thumb {
    width: 8px;
    height: 16px;
    border-radius: 2px;
    background: linear-gradient(180deg, #666640, #444420);
    border: 1px solid #888860;
    border-bottom-color: #222211;
    box-shadow: 0 2px 0 #1a1a0e, inset 0 1px 0 rgba(255, 176, 0, 0.15);
}

[data-theme="retro"] .volume-slider::-webkit-slider-thumb:hover {
    background: linear-gradient(180deg, #777750, #555530);
    transform: none;
}

[data-theme="retro"] .volume-slider::-moz-range-thumb {
    width: 8px;
    height: 16px;
    border-radius: 2px;
    background: linear-gradient(180deg, #666640, #444420);
    border: 1px solid #888860;
    border-bottom-color: #222211;
    box-shadow: 0 2px 0 #1a1a0e;
}

[data-theme="retro"] .volume-slider::-moz-range-track {
    height: 6px;
    border-radius: 1px;
    background: #0a0a05;
    border: 1px solid #444420;
}

[data-theme="retro"] .volume-slider::-moz-range-progress {
    height: 6px;
    border-radius: 1px;
    background: #33ff33;
    box-shadow: 0 0 4px rgba(51, 255, 51, 0.4);
}

[data-theme="retro"] #np-mute {
    color: #886600;
}

[data-theme="retro"] #np-mute:hover {
    color: #ffb000;
}

/* ── MySpace theme volume: iTunes aluminum slider ── */
[data-theme="myspace"] .volume-slider {
    height: 5px;
    border-radius: 3px;
    border: 1px solid #8888a0;
    background: linear-gradient(to right, #4a90d9 var(--vol-pct), #606070 var(--vol-pct));
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.15);
}

[data-theme="myspace"] .volume-slider::-webkit-slider-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(180deg, #e0e0ec, #c0c0cc);
    border: 1px solid #8888a0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

[data-theme="myspace"] .volume-slider::-webkit-slider-thumb:hover {
    background: linear-gradient(180deg, #f0f0fc, #d0d0dc);
}

[data-theme="myspace"] .volume-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(180deg, #e0e0ec, #c0c0cc);
    border: 1px solid #8888a0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

[data-theme="myspace"] .volume-slider::-moz-range-track {
    height: 5px;
    border-radius: 3px;
    background: #606070;
    border: 1px solid #8888a0;
}

[data-theme="myspace"] .volume-slider::-moz-range-progress {
    height: 5px;
    border-radius: 3px;
    background: #4a90d9;
}

[data-theme="myspace"] #np-mute {
    color: #4a4a6a;
}

[data-theme="myspace"] #np-mute:hover {
    color: #3a3a5a;
}