/* -------------------------------------------------
   BASE THEME VARIABLES (dark + light handled in JS)
--------------------------------------------------- */
:root {
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
    --radius-lg: 36px;
    --radius-md: 20px;
    --radius-sm: 8px;
    --transition: 180ms cubic-bezier(.4,.2,.2,1);
    --shadow-1: 0 8px 22px -8px rgba(0,0,0,0.45);
    --shadow-btn: 0 6px 18px -8px rgba(153,83,255,0.5);
    --shadow-btn-hover: 0 10px 28px -10px rgba(153,83,255,0.6);
    --gradient-accent: linear-gradient(110deg,var(--accent1),var(--accent2));
    --gradient-rainbow: linear-gradient(90deg,#ff005e 0%,#ff8a00 14%,#ffd300 28%,#39d98a 42%,#33c7ff 57%,#7a5bff 71%,#ff3fb1 85%,#ff005e 100%);

    /* Ripple effect variables */
    --rx: 50%;
    --ry: 50%;

    /* Particle variables */
    --p-size: 8px;
    --p-color: #fff;
    --p-dur: 900ms;
    --p-dx: 0px;
    --p-dy: 0px;
}

:root[data-theme='dark'], :root[data-theme='auto'] {
    color-scheme: dark;
    --bg: #0f0e13;
    --bg-alt: #17161e;
    --bg-soft: #1f1e26;
    --card: linear-gradient(165deg,#18171f 0%, #16151c 65%, #131219 100%);
    --border-color: rgba(255,255,255,0.08);
    --text: #eceaf3;
    --text-dim: #a3a1ad;
    --accent1: #c94bff; /* shifted from golden to neon magenta */
    --accent2: #9c4dff; /* keep vivid purple */
    --accent3: #46c6ff;
    --ring: rgba(156,77,255,0.55);
    --focus: #b887ff;
}

:root[data-theme='light'] {
    color-scheme: light;
    --bg: #f6f6fa;
    --bg-alt: #ececf3;
    --bg-soft: #e2e2ec;
    --card: linear-gradient(165deg,#ffffff 0%, #fafafa 60%, #f0f0f7 100%);
    --border-color: rgba(0,0,0,0.09);
    --text: #1c1c23;
    --text-dim: #5e5d68;
    --accent1: #c94bff; /* unify palette */
    --accent2: #6a32d4;
    --accent3: #5eafff;
    --ring: rgba(106,50,212,0.45);
    --focus: #6a32d4;
    --shadow-1: 0 8px 22px -8px rgba(0,0,0,0.15);
    --shadow-btn: 0 6px 18px -8px rgba(106,50,212,0.35);
    --shadow-btn-hover: 0 12px 30px -10px rgba(106,50,212,0.45);
}

/* -------------------------------------------------
   GLOBAL
--------------------------------------------------- */
* { box-sizing: border-box; min-width:0; }
html, body { height: 100%; font-family: var(--font-sans), sans-serif; -webkit-font-smoothing: antialiased; }
body {
    margin:0;
    background: var(--bg);
    color: var(--text);
    overflow-x:hidden;
    transition: background 400ms ease, color 300ms ease;
}
.site-wrap {
    position:relative;
    z-index:10;
    min-height:100vh; /* Use single min-height declaration */
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding: clamp(1.5rem, 4vw, 4rem) clamp(1rem, 3.5vw, 3.5rem);
}

/* -------------------------------------------------
   TOPBAR / TOGGLE
--------------------------------------------------- */
.topbar {
    position:fixed;
    top:.6rem;
    right:.8rem;
    z-index:50;
    display:flex;
    gap:.75rem;
    padding:.4rem .6rem;
    border-radius:999px;
    background: rgba(0,0,0,0.25);
    backdrop-filter: blur(12px);
}
:root[data-theme='light'] .topbar {
    background: rgba(255,255,255,0.55);
    box-shadow: 0 4px 18px -8px rgba(0,0,0,.2);
}
.mode-toggle {
    width:46px; height:46px;
    border-radius:50%;
    border:1px solid var(--border-color);
    background: linear-gradient(150deg,var(--bg-alt), var(--bg-soft));
    display:grid;
    place-items:center;
    cursor:pointer;
    position:relative;
    overflow:hidden;
    font-size:1.05rem;
    transition: background var(--transition), transform var(--transition);
}
.mode-toggle:hover { transform: translateY(-2px); }
.mode-toggle:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.mode-toggle .icon-theme {
    position:absolute; inset:0; display:grid; place-items:center;
    opacity:0; transform:scale(.7) rotate(-30deg);
    transition:opacity 350ms var(--transition), transform 400ms var(--transition);
    color:var(--text);
}
[data-theme='dark'] .mode-toggle .moon,
[data-theme='auto'] .mode-toggle .moon { opacity:1; transform:scale(1) rotate(0); }
[data-theme='light'] .mode-toggle .sun { opacity:1; transform:scale(1) rotate(0); }

/* -------------------------------------------------
   CARD & PROFILE
--------------------------------------------------- */
.card {
    position:relative;
    width:min(960px,100%);
    background: var(--card);
    border:1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: clamp(2rem,4vw,3.2rem);
    overflow:hidden;
    box-shadow: var(--shadow-1);
    backdrop-filter: blur(6px);
    transition: background 400ms ease, border-color 400ms ease;
}
.card__inner { position:relative; display:flex; flex-direction:column; gap:2.8rem; }

.profile { display:flex; flex-direction:column; max-width:580px; }

.avatar-wrapper {
    width:120px; height:120px;
    border-radius:50%;
    padding:4px;
    background: linear-gradient(140deg,var(--accent1),var(--accent2));
    margin-bottom:1.4rem;
    position:relative;
    box-shadow:0 0 0 4px rgba(255,255,255,0.04);
}
.avatar { width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }

.role-label {
    font-family: var(--font-mono), monospace;
    letter-spacing:.25em;
    font-size:0.72rem;
    color: var(--accent2);
    margin:0 0 .7rem;
    font-weight:500;
}

.name {
    font-size: clamp(2.5rem, 6vw, 3.8rem);
    line-height:1.05;
    margin:0 0 1.2rem;
    font-weight:500;
    font-family: var(--font-mono), monospace;
    letter-spacing:-1px;
}

.tagline {
    line-height:1.55;
    font-size:1rem;
    max-width:56ch;
    margin:0 0 1.9rem;
    color: var(--text-dim);
}

/* CTA */
.cta-btn {
    --btn-pad-x:2.2rem;
    --btn-pad-y:.95rem;
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    text-decoration:none;
    color:#fff;
    font-weight:500;
    background: var(--gradient-accent);
    padding:var(--btn-pad-y) var(--btn-pad-x);
    border-radius:60px;
    font-size:.95rem;
    letter-spacing:.03em;
    position:relative;
    overflow:hidden;
    transition: box-shadow var(--transition), transform var(--transition);
    box-shadow: var(--shadow-btn);
}
.cta-btn:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.cta-btn:hover { transform:translateY(-2px); box-shadow: var(--shadow-btn-hover); }
.cta-btn:active { transform:translateY(0); }
.cta-btn[data-ripple]::after {
    content:"";
    position:absolute; inset:0;
    background: radial-gradient(circle at var(--rx) var(--ry), rgba(255,255,255,.4), transparent 60%);
    opacity:0; transition: opacity 340ms ease;
}
.cta-btn[data-ripple].ripple-active::after { opacity:1; }

/* -------------------------------------------------
   PLAYER
--------------------------------------------------- */
.player {
    display:flex;
    flex-direction:column;
    gap:1.6rem;
    border:1px solid var(--border-color);
    border-radius:24px;
    padding:1.6rem clamp(1.2rem,3vw,2rem);
    background: linear-gradient(140deg,var(--bg-alt),var(--bg-soft));
    position:relative;
    overflow:hidden;
    backdrop-filter: blur(10px) saturate(140%);
    transition: background 400ms ease, border-color 400ms ease;
}

.player__main { display:flex; gap: clamp(1.4rem,3vw,2.4rem); align-items:stretch; }
.cover-wrap {
    position:relative;
    width: clamp(180px,34vw,260px);
    aspect-ratio:1/1;
    flex-shrink:0;
    border-radius:50%;
    overflow:visible; /* allow glow */
    background: radial-gradient(circle at 35% 35%, #1d1b23, #0f0e13 70%);
    display:grid;
    place-items:center;
    box-shadow:0 8px 26px -10px rgba(0,0,0,.65), 0 0 0 1px var(--border-color);
}
/* Remove old square image styling */
.cover-wrap img { display:none; }

/* Vinyl disc */
.vinyl-wrap { position:relative; }
.vinyl {
    position:relative;
    width:100%; height:100%;
    border-radius:50%;
    aspect-ratio: 1/1; /* Force perfect circle */
    background: radial-gradient(circle at 50% 50%, #2a2831 0%, #1a1920 100%);
    box-shadow:0 0 0 1px rgba(255,255,255,0.06), 0 4px 12px -4px rgba(0,0,0,0.4);
    display:flex; align-items:center; justify-content:center;
    isolation:isolate;
    transition:filter 600ms ease, box-shadow 600ms ease;
}
/* Remove neon aura ::before */
.vinyl::after { /* subtle inner shadow only */
    content:""; position:absolute; inset:15%; border-radius:50%;
    background:radial-gradient(circle at 50% 50%, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 70%);
    pointer-events:none;
}

/* Center label uses album art */
.vinyl img#trackCover {
    display:block; /* override earlier hide */
    position:absolute;
    inset:0; margin:auto;
    width:60%; height:60%;
    border-radius:50%;
    object-fit:cover;
    box-shadow:0 0 0 2px #000, 0 0 0 4px rgba(156,77,255,0.3);
    filter:saturate(1.15) contrast(1.05);
    transition:transform 1.2s cubic-bezier(.21,.8,.32,1), filter 800ms ease;
}
/* spindle hole */
.vinyl .spindle-hole { position:absolute; width:8px; height:8px; border-radius:50%; background:#0a0a0c; box-shadow:0 0 0 1px #333, 0 0 3px rgba(0,0,0,0.8) inset; z-index:10; }

/* Rotation */
.cover-wrap.playing .vinyl { animation:spinDisc 12s linear infinite; }
.cover-wrap.playing .vinyl img#trackCover { animation:labelPulse 6s ease-in-out infinite; }

@keyframes spinDisc { to { transform:rotate(360deg); } }
@keyframes labelPulse { 0%,100%{filter:saturate(1.15) brightness(1);} 50%{filter:saturate(1.25) brightness(1.05);} }

/* Hover effects - simplified */
.vinyl-wrap:hover .vinyl { box-shadow:0 0 0 1px rgba(255,255,255,0.1), 0 6px 16px -4px rgba(0,0,0,0.5); }
.vinyl-wrap:hover img#trackCover { transform:scale(1.03); }

/* -------------------------------------------------
   PLAYER CONTROLS
--------------------------------------------------- */
.meta { flex:1; display:flex; flex-direction:column; gap:.9rem; min-width:0; }
.track-title {
    font-size: clamp(1.1rem,2.2vw,1.6rem);
    margin:0;
    letter-spacing:.5px;
    font-family: var(--font-mono), monospace;
    font-weight:500;
}
.track-artist { margin:0; font-size:.9rem; color:var(--text-dim); letter-spacing:.05em; text-transform:uppercase; }

.progress { display:flex; flex-direction:column; gap:.35rem; }
.progress input[type=range] {
    width:100%;
    appearance:none;
    height:6px;
    border-radius:4px;
    background: linear-gradient(90deg,var(--accent1),var(--accent2));
    outline:none;
    cursor:pointer;
}
.progress input[type=range]::-webkit-slider-thumb {
    appearance:none; width:18px; height:18px; border-radius:50%; background:var(--bg);
    border:3px solid var(--accent2); box-shadow:0 0 0 4px rgba(156,77,255,0.25);
    transition: transform var(--transition);
}
.progress input[type=range]:active::-webkit-slider-thumb { transform:scale(1.2); }
.progress .time {
    font-size:.7rem;
    display:flex;
    justify-content:space-between;
    font-family: var(--font-mono), monospace;
    letter-spacing:.1em;
    color:var(--text-dim);
}

.controls { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.btn {
    background: linear-gradient(150deg,var(--bg-soft), var(--bg-alt));
    color:var(--text);
    border:1px solid var(--border-color);
    border-radius:10px;
    cursor:pointer;
    font-size:.9rem;
    font-weight:500;
    font-family: var(--font-mono), monospace;
    letter-spacing:.05em;
    transition: background var(--transition), transform var(--transition), color var(--transition), border-color var(--transition);
    position:relative;
    overflow:hidden;
}
.btn.sm { padding:.4rem .6rem; }
.btn.lg { padding:.6rem 1.2rem; font-size:1rem; }
.btn:hover { transform:translateY(-1px); background: linear-gradient(150deg,var(--bg-soft), var(--bg-alt) 60%); }
.btn:active { transform:translateY(0); }
.btn:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.btn.active, .btn[aria-pressed="true"] { border-color:var(--accent2); color:var(--accent2); }

.volume-group { display:flex; align-items:center; gap:.3rem; }
.volume-group input[type=range] {
    width:80px; appearance:none; height:4px; border-radius:50px;
    background: linear-gradient(90deg,var(--accent1),var(--accent2)) no-repeat;
    background-size: calc(var(--val,100) * 1%) 100%;
    background-color: var(--bg-soft);
    cursor:pointer; border:none; padding:0; margin:0;
}
.volume-group input[type=range]::-webkit-slider-runnable-track { height:4px; border-radius:50px; background:transparent; }
.volume-group input[type=range]::-webkit-slider-thumb { appearance:none; width:14px; height:14px; border-radius:50%; background:var(--accent2); border:2px solid var(--bg-alt); box-shadow:0 0 0 2px rgba(0,0,0,0.25); margin-top:-5px; }
.volume-group input[type=range]:focus-visible { outline:2px solid var(--focus); outline-offset:4px; }
/* Firefox */
.volume-group input[type=range]::-moz-range-track { height:4px; border-radius:50px; background:transparent; }
.volume-group input[type=range]::-moz-range-progress { height:4px; border-radius:50px; background: linear-gradient(90deg,var(--accent1),var(--accent2)); }
.volume-group input[type=range]::-moz-range-thumb { width:14px; height:14px; border:none; border-radius:50%; background:var(--accent2); box-shadow:0 0 0 2px rgba(0,0,0,0.25); }
/* Remove earlier rainbow-specific declarations if any remained below */
/* ...existing code... */
.playlist {
    list-style:none; margin:.4rem 0 0; padding:0;
    display:flex; flex-direction:column; gap:.35rem;
    max-height:240px; overflow-y:auto; scrollbar-width:thin;
}
.playlist li {
    display:grid; grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:.9rem; padding:.55rem .85rem;
    border-radius:14px;
    cursor:pointer;
    position:relative;
    font-size:.85rem;
    font-family: var(--font-mono), monospace;
    letter-spacing:.05em;
    background: linear-gradient(140deg,var(--bg-alt) 0%, var(--bg-soft) 120%);
    border:1px solid transparent;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
    overflow:hidden;
}
.playlist li:hover { background: linear-gradient(140deg,var(--bg-soft) 0%, var(--bg-alt) 120%); }
.playlist li.active {
    border-color:var(--accent2);
    color:var(--accent2);
    background: linear-gradient(140deg,var(--bg-soft), var(--bg-alt));
    box-shadow:0 4px 14px -6px rgba(0,0,0,.45);
}
.playlist li .index { width:1.4rem; text-align:right; opacity:.5; }
.playlist li .len { font-size:.65rem; opacity:.55; }

/* Playlist active glow */
.playlist li.active::after {
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:0 0 0 1px var(--accent2), 0 0 12px -2px var(--accent2), 0 0 28px -4px var(--accent2);
  opacity:.55; pointer-events:none; mix-blend-mode:overlay;
  animation:playlistGlow 3.8s ease-in-out infinite;
}
@keyframes playlistGlow { 0%,100%{opacity:.5; filter:hue-rotate(0deg);} 50%{opacity:.9; filter:hue-rotate(25deg) saturate(140%);} }

/* Remove old pulse ring glow completely */
/* Deleted original .cover-wrap.playing::after glow & animations coverSpin/coverPulse */

/* Purge duplicate old glow section */
/* ...existing code... */
@media (max-width: 850px) {
    .player__main { flex-direction:column; }
    .cover-wrap { width:clamp(160px,55vw,240px); margin-inline:auto; }
    .controls { justify-content:flex-start; }
}
@media (max-width:560px) {
    .btn.lg { flex:1; text-align:center; }
    .volume-group input[type=range] { width:90px; }
    .playlist { max-height:200px; }
}

/* -------------------------------------------------
   SOCIALS
--------------------------------------------------- */
.socials { border-top:1px solid var(--border-color); padding-top:2rem; }
.socials ul {
    --gap: clamp(.7rem, 1.2vw, 1.2rem);
    display:flex; flex-wrap:wrap; gap:var(--gap);
    list-style:none; margin:0; padding:0;
}
.socials a {
    width:48px; height:48px;
    border-radius:16px;
    display:inline-flex; align-items:center; justify-content:center;
    text-decoration:none;
    color:var(--text);
    background: linear-gradient(145deg,var(--bg-soft),var(--bg-alt));
    position:relative;
    transition: background var(--transition), color var(--transition), transform var(--transition), border-color var(--transition);
    border:1px solid var(--border-color);
    font-size:0;
}
.socials a:hover {
    background: linear-gradient(145deg,var(--bg-alt),var(--bg-soft));
    color:var(--accent2);
    transform: translateY(-3px);
}
.socials a:focus-visible { outline:2px solid var(--focus); outline-offset:3px; }

/* -------------------------------------------------
   DECOR
--------------------------------------------------- */
.decor {
    position:absolute; pointer-events:none;
    width:33%; height:33%;
    border:1px solid var(--border-color);
    border-radius: var(--radius-md);
    transform: rotate(13deg);
    mix-blend-mode:overlay;
    backdrop-filter:blur(4px);
    opacity:.35;
    transition: border-color 400ms ease;
}
.decor--tl { top:-8%; left:-6%; }
.decor--tr { top:-6%; right:-8%; transform:rotate(-18deg); }
.decor--bl { bottom:-10%; left:-5%; transform:rotate(-22deg); }
.decor--br { bottom:-8%; right:-6%; }

@media (max-width:820px){
    .card { padding:clamp(1.75rem,5vw,2.4rem); }
    .decor { display:none; }
}

/* -------------------------------------------------
   ASTRO LAYERS
--------------------------------------------------- */
#starfield, #shooting {
    position:fixed; inset:0;
    width:100%; height:100%; z-index:0; pointer-events:none;
}
#orbital-glow {
    position:fixed;
    width:60vmax; height:60vmax;
    top:50%; left:50%; transform:translate(-50%,-50%);
    background:
            radial-gradient(circle at 60% 40%, rgba(156,77,255,0.22), transparent 60%),
            radial-gradient(circle at 30% 70%, rgba(247,161,95,0.18), transparent 65%),
            radial-gradient(circle at 40% 50%, rgba(70,198,255,0.16), transparent 70%);
    filter: blur(60px) saturate(140%);
    opacity:.65;
    animation:pulseGlow 18s ease-in-out infinite alternate;
    z-index:1; mix-blend-mode:screen;
}
:root[data-theme='light'] #orbital-glow {
    filter: blur(70px) saturate(160%); opacity:.55; mix-blend-mode:multiply;
}
@keyframes pulseGlow {
    0% { transform:translate(-50%,-50%) scale(1); }
    50% { transform:translate(-50%,-50%) scale(1.07); }
    100% { transform:translate(-50%,-50%) scale(.96); }
}

/* -------------------------------------------------
   SCROLLBAR
--------------------------------------------------- */
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background: var(--bg-alt); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--bg-soft), var(--bg-alt));
    border-radius:20px; border:2px solid var(--bg-alt);
}
::-webkit-scrollbar-thumb:hover { background: var(--bg-soft); }

/* -------------------------------------------------
   NOSCRIPT WARNING
--------------------------------------------------- */
.noscript-warning {
    position:fixed; bottom:0; left:50%; transform:translateX(-50%);
    background:#b00020; color:#fff; padding:.75rem 1rem;
    font-size:.8rem;
    font-family: var(--font-mono), monospace;
    border-radius:8px 8px 0 0; z-index:999;
}

/* -------------------------------------------------
   ANIMATION EXTRAS (from previous advanced set)
--------------------------------------------------- */
.gradient-text {
    background: linear-gradient(90deg,#9c4dff,#c94bff,#6a32d4,#9c4dff);
    -webkit-background-clip:text;
    color:transparent;
    animation:hueShift 14s linear infinite;
    background-size:300% 100%;
}
@keyframes hueShift {
    0%{background-position:0 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0 50%;}
}
.float-bob { animation:bob 6s ease-in-out infinite; position:relative; }
@keyframes bob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }
.avatar-glow {
    position:absolute; inset:0; border-radius:50%;
    background:
            radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35), transparent 60%),
            radial-gradient(circle at 70% 70%, rgba(255,255,255,0.15), transparent 60%);
    mix-blend-mode:overlay; opacity:.5; pointer-events:none;
    animation:avatarPulse 5.5s ease-in-out infinite;
}
@keyframes avatarPulse {
    0%,100% { filter:blur(6px); transform:scale(1); }
    50% { filter:blur(10px); transform:scale(1.04); }
}
.pulse-shimmer { position:relative; overflow:hidden; }
.pulse-shimmer::before {
    content:""; position:absolute; inset:0;
    background:linear-gradient(120deg, rgba(255,255,255,0) 0%,rgba(255,255,255,.35) 45%,rgba(255,255,255,0) 60%);
    transform:translateX(-120%);
    animation:ctaShine 4.5s ease-in-out infinite;
    mix-blend-mode:screen;
}
@keyframes ctaShine {
    0%{transform:translateX(-120%);}
    55%{transform:translateX(110%);}
    100%{transform:translateX(110%);}
}
.tilt-hover { perspective:900px; }
.tilt-hover img {
    transition:transform 900ms cubic-bezier(.21,.8,.32,1), filter 600ms ease;
}
.waveform-shell {
    position:relative;
    transition: box-shadow .6s ease, border-color .5s;
    height:70px;
    border:1px solid var(--border-color);
    border-radius:14px;
    background:linear-gradient(145deg,var(--bg-soft),var(--bg-alt));
    display:flex; align-items:center; justify-content:stretch;
    cursor:pointer; user-select:none; overflow:hidden;
}
.waveform-shell.playing { box-shadow:0 0 0 1px rgba(255,255,255,0.06), 0 0 25px -5px var(--accent2); }
:root[data-theme='light'] .waveform-shell.playing { box-shadow:0 0 0 1px rgba(0,0,0,0.05), 0 0 25px -5px var(--accent2); }
.waveform-canvas, #freq-bars { width:100%; height:100%; display:block; }
.waveform-status {
    position:absolute; bottom:4px; right:10px; font-size:.55rem;
    font-family: var(--font-mono), monospace;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--text-dim);
    mix-blend-mode:lighten;
    pointer-events:none;
}
:root[data-theme='light'] .waveform-status { mix-blend-mode:multiply; }

/* Frequency bars overlay */
#freq-bars { position:absolute; inset:0; pointer-events:none; mix-blend-mode:lighten; opacity:.55; transition:opacity .5s; }
:root[data-theme='light'] #freq-bars { mix-blend-mode:multiply; opacity:.65; }
.waveform-shell:not(.playing) #freq-bars { opacity:.25; }

/* Fancy scroll playlist scrollbar */
.fancy-scroll { scrollbar-width:thin; scrollbar-color: var(--accent2) transparent; }
.fancy-scroll::-webkit-scrollbar { width:8px; }
.fancy-scroll::-webkit-scrollbar-track { background:transparent; }
.fancy-scroll::-webkit-scrollbar-thumb {
    background:linear-gradient(var(--accent2), var(--accent1));
    border-radius:50px; border:2px solid var(--bg-alt);
}

/* Unsupported label */
.playlist li.unsupported { opacity:.45; position:relative; }
.playlist li.unsupported::after {
    content:"UNSUPPORTED";
    position:absolute;
    top:4px;
    right:8px;
    font-size:.5rem;
    letter-spacing:.15em;
    font-family: var(--font-mono), monospace;
    background:var(--accent2);
    padding:2px 6px;
    border-radius:10px;
    color:#fff;
    opacity:.9;
}

/* Particle system */
.particle {
    position:absolute;
    width:var(--p-size);
    height:var(--p-size);
    border-radius:50%;
    background: radial-gradient(circle at 30% 30%, var(--p-color), transparent 65%);
    opacity:.9;
    transform:translate(-50%,-50%) scale(.4);
    animation:particleFly var(--p-dur) cubic-bezier(.4,.6,.2,1) forwards;
    filter:blur(.5px);
}

@keyframes particleFly {
    0% { transform:translate(-50%,-50%) scale(.4); opacity:1; }
    80% { opacity:1; }
    100% { transform:translate(calc(-50% + var(--p-dx)), calc(-50% + var(--p-dy))) scale(0); opacity:0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .float-bob,
    .pulse-shimmer::before,
    .split-reveal,
    .avatar-glow,
    .spark::after {
        animation:none!important;
    }
    .cta-btn, .socials a, .btn { transition:none; }
    .hover-lift:hover { transform:none; }
    #freq-bars { transition:none; }
}

/* Restored interactive + animation utilities */
.playlist li::before {
    content:""; position:absolute; inset:0;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.08) 40%, rgba(255,255,255,0) 75%);
    transform:translateX(-100%); transition:transform 650ms ease; pointer-events:none;
}
.playlist li:hover::before { transform:translateX(100%); }

.magnetic-grid a { transition: transform 300ms cubic-bezier(.25,.8,.3,1), background 260ms; }
.magnetic-grid a:hover { background: linear-gradient(145deg,var(--accent2) 0%, var(--accent1) 90%); color:#fff; transform:translateY(-6px) scale(1.05); }

.spark { position:relative; overflow:hidden; }
.spark::after {
    content:""; position:absolute; width:120%; height:120%; top:-10%; left:-10%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 60%), radial-gradient(circle at 70% 70%, rgba(255,255,255,.25), transparent 70%);
    opacity:0; transform:scale(.8) rotate(25deg); transition:opacity 450ms ease, transform 600ms ease; mix-blend-mode:screen;
}
.spark:hover::after { opacity:.8; transform:scale(1) rotate(0); }

.mode-toggle:active { animation:spinQuick 600ms cubic-bezier(.65,.05,.36,1); }
@keyframes spinQuick { to { transform:rotate(360deg); } }

.reveal-up { opacity:0; transform:translateY(30px); transition:opacity .9s cubic-bezier(.22,.8,.25,1), transform .9s cubic-bezier(.22,.8,.25,1); }
.reveal-fade { opacity:0; transform:translateY(24px); transition:opacity 1s ease, transform 1s ease; }
.reveal-up.is-visible, .reveal-fade.is-visible { opacity:1; transform:translateY(0); }
.split-reveal { display:inline-block; background: linear-gradient(90deg,var(--text) 0 40%, var(--accent2) 50%, var(--text) 60%); background-size:400%; animation:splitClip 4s ease-in-out infinite; -webkit-background-clip:text; color:transparent; }
@keyframes splitClip { 0%{background-position:0 50%;} 50%{background-position:100% 50%;} 100%{background-position:0 50%;} }

.cover-overlay { position:absolute; inset:0; background: linear-gradient(130deg, rgba(255,255,255,0.15), rgba(255,255,255,0) 45%); mix-blend-mode:overlay; pointer-events:none; opacity:.3; animation:coverSheen 6s ease-in-out infinite; }
@keyframes coverSheen { 0%,100% { filter:blur(0px); opacity:.3; } 50% { filter:blur(4px); opacity:.55; } }

:root[data-dynamic-accent='true'] .gradient-text { animation:hueShift 9s linear infinite; }

/* Iconify base alignment + visually hidden utility */
iconify-icon, .iconify {
    display:inline-block;
    vertical-align:middle;
    line-height:1;
}

/* Image loading improvements */
img {
    display: block;
    max-width: 100%;
    height: auto;
}

.avatar, #trackCover {
    object-fit: cover;
    object-position: center;
    background-color: var(--bg-soft);
}

/* Loading state for images - combine background properties */
.avatar[src=""], #trackCover[src=""],
.avatar:not([src]), #trackCover:not([src]) {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%23a3a1ad' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21,15 16,10 5,21'/%3E%3C/svg%3E") no-repeat center,
        var(--bg-soft);
    background-size: 40px 40px, cover;
}

/* Fix image loading and display issues */
.avatar {
    opacity: 1;
    transition: opacity 300ms ease;
}

/* Ensure profile image loads properly */
.avatar-wrapper .avatar {
    background-color: var(--bg-soft);
}

/* Custom element styling - suppress warnings */
iconify-icon {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

/* === Simplified Vinyl (no aura / rings) + Compact Options Overrides === */
/* Vinyl simplification */
.cover-wrap { box-shadow:none; background:#18171f; }
.vinyl { box-shadow:none; background:#18171f; }
.vinyl::after { display:none; }
.vinyl img#trackCover { box-shadow:none; animation:none!important; width:60%; height:60%; }
.cover-wrap.playing .vinyl img#trackCover { animation:none!important; }
/* Keep only rotation on the disc itself */
.cover-wrap.playing .vinyl { animation:spinDisc 10s linear infinite; }

/* Compact player layout */
.player { padding:1.1rem 1.2rem; }
.player__main { gap:1rem; }
.meta { gap:.6rem; }
.waveform-shell { height:56px; }
.controls { gap:.35rem; }
.btn.sm { padding:.3rem .5rem; border-radius:8px; }
.btn.lg { padding:.5rem .9rem; border-radius:8px; }
.volume-group input[type=range]{ width:70px; }
.playlist li { padding:.45rem .65rem; gap:.6rem; }

/* Slightly smaller title spacing */
.track-title { margin:0 0 .2rem; }
.track-artist { font-size:.8rem; }

/* Reduce overall gaps inside card */
.card__inner { gap:2.2rem; }
.profile { gap:0; }

/* Ensure overrides win in light mode as well */
:root[data-theme='light'] .cover-wrap { background:#e4e4ec; }
:root[data-theme='light'] .vinyl { background:#d9d9e5; }
:root[data-theme='light'] .vinyl img#trackCover { box-shadow:none; }

/* === Remove Star Sparkle & Add Neon Click Pulse === */
/* Clean out old .star-sparkle rules (kept comment for reference) */
/* Replacement: Normalize play/pause button and add glow to all buttons */
#playPause {
  position:relative; /* ensure pseudo elements layer correctly */
}

/* Remove all special effects from play/pause button */
#playPause::before { display: none; }
#playPause::after { display: none; }
#playPause.click-flash { animation: none; }

/* Remove click flash animations */
@keyframes clickFlash { display: none; }
@keyframes clickPulse { display: none; }

/* Add consistent glow to all buttons */
.btn {
  /* ...existing code... */
  position:relative;
  overflow:hidden;
}

.btn::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:0 0 3px 1px rgba(156,77,255,0.15), 0 0 6px 2px rgba(201,75,255,0.08);
  opacity:.3;
  transition:opacity var(--transition), box-shadow var(--transition);
}

.btn:hover::before {
  opacity:.5;
  box-shadow:0 0 4px 1px rgba(156,77,255,0.22), 0 0 8px 3px rgba(201,75,255,0.12);
}

.btn:active::before {
  opacity:.6;
}

@media (prefers-reduced-motion: reduce) {
  #playPause.click-flash, #playPause.click-flash::after { animation:none!important; }
  .btn::before { transition: none; }
}

/* === Neon Vinyl Rings (refined thinner + multicolour pulse) === */
.cover-wrap.playing::before {
  /* Outer ring: thinner, line-like */
  content:""; position:absolute; inset:-2%; border-radius:50%;
  background: conic-gradient(from 0deg, var(--accent1), var(--accent2), var(--accent1));
  /* Very thin ring via narrow mask band */
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 60.4%, #000 61%, #000 61.35%, transparent 62%);
  mask: radial-gradient(circle at 50% 50%, transparent 60.4%, #000 61%, #000 61.35%, transparent 62%);
  filter: blur(1.2px) saturate(210%);
  opacity:.75;
  animation: spinRing 18s linear infinite, ringHue 14s linear infinite, ringPulse 5.2s ease-in-out infinite;
  will-change: transform, filter, opacity;
  pointer-events:none;
}
.cover-wrap.playing .vinyl::before {
  content:""; position:absolute; inset:8%; border-radius:50%;
  background: conic-gradient(from 0deg, var(--accent2), var(--accent1), var(--accent2));
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 63.6%, #000 64.2%, #000 64.55%, transparent 65.2%);
  mask: radial-gradient(circle at 50% 50%, transparent 63.6%, #000 64.2%, #000 64.55%, transparent 65.2%);
  filter: blur(1px) saturate(200%);
  opacity:.82;
  animation: spinRingReverse 12s linear infinite, ringHue 11s linear infinite reverse, ringPulse 4.6s ease-in-out infinite;
  will-change: transform, filter, opacity;
  pointer-events:none;
}

/* Second outer neon ring (additional thin ring) */
.cover-wrap.playing::after {
  /* widened gap from primary outer ring */
  content:""; position:absolute; inset:-4%; border-radius:50%;
  background: conic-gradient(from 0deg, var(--accent2), var(--accent1), var(--accent2));
  /* shift band outward & keep thinness */
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 68.5%, #000 69.1%, #000 69.45%, transparent 70.2%);
  mask: radial-gradient(circle at 50% 50%, transparent 68.5%, #000 69.1%, #000 69.45%, transparent 70.2%);
  filter: blur(1.3px) saturate(220%);
  opacity:.58;
  animation: spinRingReverse 26s linear infinite, ringHue 18s linear infinite reverse, ringPulse 6.4s ease-in-out infinite;
  will-change: transform, filter, opacity;
  pointer-events:none;
}
@supports not (mask: radial-gradient(circle at 50% 50%, transparent 68.5%, #000 69.1%, #000 69.45%, transparent 70.2%)) {
  .cover-wrap.playing::after { -webkit-mask:none; mask:none; background:none; box-shadow:0 0 4px 1px var(--accent1), 0 0 16px 6px var(--accent2); inset:0; filter:none; animation: ringHue 18s linear infinite reverse, ringPulse 6.4s ease-in-out infinite; }
}

/* ...existing code... */