*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --gold:#D4AF37;--gold2:#C9A227;--gold-hi:#E6D690;--gold-dim:rgba(212,175,55,0.12);
  --bg:#060606;--s1:#0a0a0a;--s2:#101010;--s3:#161616;--s4:#1c1c1c;
  --t1:#f0ece4;--t2:#9a9690;--t3:#5a5856;
  --border:rgba(255,255,255,0.06);--border-gold:rgba(212,175,55,0.2);
  --safe-top:env(safe-area-inset-top,0px);--safe-bot:env(safe-area-inset-bottom,0px);
  --nav-h:64px;--bar-h:72px;--head-h:56px;
  --r-sm:6px;--r-md:10px;--r-lg:16px;--r-xl:24px;--r-full:9999px;
}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--t1);font-family:'DM Sans',sans-serif;-webkit-font-smoothing:antialiased}

/* ── SCREENS ── */
.screen{position:fixed;inset:0;display:none;flex-direction:column;background:var(--bg);z-index:200}
.screen.active{display:flex}

/* ── SPLASH ── */
#splash{align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 36%,#0d0d0d 0%,#000 68%);flex-direction:column}
#globe-canvas{display:block;filter:drop-shadow(0 0 5px rgba(255,255,255,0.38)) drop-shadow(0 0 20px rgba(255,255,255,0.15))}

#splash-pb-wrap{position:absolute;bottom:52px;left:50%;transform:translateX(-50%);width:180px;height:2px;background:rgba(212,175,55,0.09);border-radius:2px;overflow:hidden;opacity:0;transition:opacity 0.7s ease}
#splash-pb-fill{height:100%;width:0%;background:linear-gradient(to right,var(--gold2),var(--gold),#dfc06a);border-radius:2px}
#splash-brand{text-align:center;margin-top:22px;opacity:0;transition:opacity 1s ease;will-change:opacity}
#splash-brand.in{opacity:1}
.sb-title{font-family:'DM Sans',sans-serif;font-size:24px;font-weight:600;letter-spacing:0.24em;color:var(--gold);text-shadow:0 1px 0 var(--gold2),0 0 16px rgba(212,175,55,0.5);line-height:1}
.sb-sub{font-size:11px;font-weight:300;color:#777;letter-spacing:0.13em;margin-top:11px;display:block}
#splash.fade-out{opacity:0;transition:opacity 0.6s ease;pointer-events:none}

/* ── ONBOARDING ── */
#onboard{background:var(--bg);overflow:hidden}
.ob-slides{display:flex;width:400%;height:100%;transition:transform 0.45s cubic-bezier(0.4,0,0.2,1)}
.ob-slide{width:33.333%;flex-shrink:0;display:flex;flex-direction:column;padding:0 32px;padding-top:calc(var(--safe-top) + 80px);padding-bottom:40px}
.ob-step{font-size:11px;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);margin-bottom:24px}
.ob-title{font-family:'Cormorant Garamond',serif;font-size:clamp(36px,8vw,52px);font-weight:300;line-height:1.1;color:var(--t1);margin-bottom:16px}
.ob-title em{font-style:italic;color:var(--gold)}
.ob-sub{font-size:15px;font-weight:300;color:var(--t2);line-height:1.7;margin-bottom:40px}
.ob-genres{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1;align-content:start}
.ob-genre{background:var(--s2);border:1px solid var(--border);border-radius:var(--r-md);padding:16px;cursor:pointer;transition:all 0.2s;display:flex;flex-direction:column;gap:6px}
.ob-genre.sel{border-color:var(--gold);background:var(--gold-dim)}
.ob-genre-icon{font-size:24px}
.ob-genre-name{font-size:13px;font-weight:500;color:var(--t1)}
.ob-genre-artists{font-size:11px;color:var(--t2)}
.ob-tiers{display:flex;flex-direction:column;gap:10px;flex:1;align-content:start}
.ob-tier{background:var(--s2);border:1px solid var(--border);border-radius:var(--r-md);padding:18px;cursor:pointer;transition:all 0.2s;position:relative}
.ob-tier.sel{border-color:var(--gold);background:var(--gold-dim)}
.ob-tier.featured{border-color:var(--gold)}
.ob-tier-badge{position:absolute;top:-1px;right:16px;background:var(--gold);color:var(--bg);font-size:10px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;padding:3px 10px;border-radius:0 0 var(--r-sm) var(--r-sm)}
.ob-tier-name{font-size:16px;font-weight:600;color:var(--t1);margin-bottom:2px}
.ob-tier-price{font-size:13px;color:var(--gold);margin-bottom:10px}
.ob-tier-features{display:flex;flex-direction:column;gap:4px}
.ob-tier-feature{font-size:12px;color:var(--t2);display:flex;align-items:center;gap:6px}
.ob-tier-feature::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--t3);flex-shrink:0}
.ob-tier-feature.yes{color:var(--t1)}
.ob-tier-feature.yes::before{background:var(--gold)}
.ob-nav{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:24px}
.ob-dots{display:flex;gap:6px}
.ob-dot{width:4px;height:4px;border-radius:50%;background:var(--t3);transition:all 0.2s}
.ob-dot.active{width:20px;border-radius:2px;background:var(--gold)}
.ob-btn{background:var(--gold);color:var(--bg);border:none;border-radius:var(--r-full);padding:14px 28px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;letter-spacing:0.04em;cursor:pointer;transition:all 0.2s}
.ob-btn:hover{background:#d4a94e}
.ob-btn-skip{background:none;border:none;color:var(--t2);font-family:'DM Sans',sans-serif;font-size:14px;cursor:pointer;padding:14px}
.ob-btn-skip:hover{color:var(--t1)}

/* ── MAIN APP ── */
#app{background:var(--bg)}
.app-head{height:var(--head-h);padding:0 20px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding-top:var(--safe-top);background:rgba(6,6,6,0.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);position:relative;z-index:10;border-bottom:1px solid var(--border)}
.app-head-logo{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:400;color:var(--t1);letter-spacing:0.02em}
.app-head-logo span{color:var(--gold)}
.head-actions{display:flex;align-items:center;gap:8px}
.head-btn{width:36px;height:36px;border-radius:50%;background:var(--s2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.15s;color:var(--t2)}
.head-btn:hover{border-color:var(--border-gold);color:var(--t1)}
.head-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

.app-body{flex:1;overflow:hidden;position:relative}
.view{position:absolute;inset:0;overflow-y:scroll;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;display:none;padding-bottom:calc(var(--nav-h) + var(--bar-h) + var(--safe-bot))}
.view.active{display:block}
.view::-webkit-scrollbar{display:none}

/* ── BOTTOM NAV ── */
.app-nav{height:calc(var(--nav-h) + var(--safe-bot));padding-bottom:var(--safe-bot);display:flex;background:rgba(10,10,10,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--border);flex-shrink:0;position:relative;z-index:10}
.nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;transition:all 0.15s;color:var(--t3);padding-top:8px}
.nav-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:all 0.15s}
.nav-btn span{font-size:10px;font-weight:500;letter-spacing:0.04em;transition:all 0.15s}
.nav-btn.active{color:var(--gold)}
.nav-btn.active svg{stroke:var(--gold)}
.nav-btn-radio{flex:1.3;position:relative;padding-top:0;margin-top:-16px;color:var(--gold)}
.nav-btn-radio .nav-radio-icon{display:flex;align-items:center;justify-content:center;width:54px;height:54px;background:var(--gold);border-radius:50%;box-shadow:0 4px 20px rgba(212,175,55,0.45);margin-bottom:3px}
.nav-btn-radio .nav-radio-icon svg{width:30px;height:30px;stroke:#0a0a0a !important;stroke-width:2.5}
.nav-btn-radio>span{font-size:9px;font-weight:700;letter-spacing:0.06em}
.nav-btn-radio.active .nav-radio-icon{background:#e6c05a;box-shadow:0 4px 24px rgba(212,175,55,0.7)}
/* ── Equalizer bars (nav radio button) ─────────────────── */
.eq-bars{display:flex;align-items:flex-end;gap:4px;height:26px;width:28px}
.eq-bar{flex:1;background:#000;border-radius:2px 2px 0 0;min-width:5px;height:6px;animation:eq-anim 0.8s ease-in-out infinite}
.eq-bar:nth-child(1){animation-delay:0s;animation-duration:0.75s}
.eq-bar:nth-child(2){animation-delay:0.18s;animation-duration:0.65s}
.eq-bar:nth-child(3){animation-delay:0.08s;animation-duration:0.9s}
.eq-bar:nth-child(4){animation-delay:0.28s;animation-duration:0.8s}
@keyframes eq-anim{0%,100%{height:5px}30%{height:20px}60%{height:24px}80%{height:12px}}
.nav-btn-radio:not(.active):not(.radio-playing) .eq-bar{animation-play-state:paused;height:10px}
.nav-btn-radio.active .eq-bar,.nav-btn-radio.radio-playing .eq-bar,.nav-btn-radio:hover .eq-bar{animation-play-state:running}


/* ── MINI PLAYER ── */
.mini-player{height:var(--bar-h);background:var(--s1);border-top:1px solid var(--border);display:none;align-items:center;padding:0 16px;gap:14px;cursor:pointer;flex-shrink:0;position:relative;z-index:9}
.mini-player.show{display:flex}
.mini-player::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold) var(--prog,0%),transparent var(--prog,0%))}
.mp-art{width:44px;height:44px;border-radius:var(--r-sm);background:var(--s3);flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.mp-art img{width:100%;height:100%;object-fit:cover}
.mp-art-placeholder{font-size:20px;color:var(--t3)}
.mp-info{flex:1;min-width:0}
.mp-title{font-size:14px;font-weight:500;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.mp-artist{font-size:12px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.mp-actions{display:flex;align-items:center;gap:4px}
.mp-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--t2);transition:color 0.15s;border-radius:50%}
.mp-btn:hover{color:var(--t1)}
.mp-btn.play{color:var(--t1)}
.mp-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mp-btn.play svg{width:22px;height:22px}

/* ── HOME VIEW ── */
.view-home{}
.home-hero{padding:28px 20px 0}
.home-time{font-size:11px;font-weight:500;letter-spacing:0.15em;text-transform:uppercase;color:var(--t3);margin-bottom:8px}
.home-greeting{font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:300;color:var(--t1);line-height:1.2;margin-bottom:4px}
.home-greeting em{color:var(--gold);font-style:italic}

.section{padding:28px 20px 0}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}
.sec-title{font-size:16px;font-weight:600;color:var(--t1);letter-spacing:-0.01em}
.sec-link{font-size:12px;color:var(--t2);cursor:pointer;transition:color 0.15s}
.sec-link:hover{color:var(--gold)}

.h-scroll{display:flex;gap:14px;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
.h-scroll::-webkit-scrollbar{display:none}

/* Track cards */
.track-card{flex-shrink:0;width:150px;scroll-snap-align:start;cursor:pointer}
.track-art{width:150px;height:150px;border-radius:var(--r-md);background:var(--s2);margin-bottom:10px;overflow:hidden;position:relative;transition:transform 0.2s}
.track-art:hover{transform:scale(0.97)}
.track-art img{width:100%;height:100%;object-fit:cover}
.track-art-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--s3)}
.track-art-placeholder svg{width:36px;height:36px;stroke:var(--t3);fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.track-play-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.4);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.2s;border-radius:var(--r-md)}
.track-card:hover .track-play-overlay{opacity:0}
.track-play-overlay svg{width:32px;height:32px;stroke:white;fill:white;stroke-width:0}
.track-name{font-size:13px;font-weight:500;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.track-by{font-size:11px;color:var(--t2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Artist cards */
.artist-card{flex-shrink:0;width:100px;scroll-snap-align:start;cursor:pointer;text-align:center}
.artist-img{width:100px;height:100px;border-radius:50%;background:var(--s2);margin-bottom:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:transform 0.2s}
.artist-card:hover .artist-img{transform:scale(0.97)}
.artist-img svg{width:36px;height:36px;stroke:var(--t3);fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.artist-name{font-size:12px;font-weight:500;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.artist-meta{font-size:10px;color:var(--t2);margin-top:2px}

/* Row list items */
.row-item{display:flex;align-items:center;gap:14px;padding:10px 20px;cursor:pointer;transition:background 0.15s}
.row-item:hover{background:rgba(255,255,255,0.03)}
.row-num{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:300;color:var(--t3);width:24px;text-align:center;flex-shrink:0;line-height:1}
.row-num.top{color:var(--gold)}
.row-art{width:44px;height:44px;border-radius:var(--r-sm);background:var(--s2);flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
.row-art svg{width:18px;height:18px;stroke:var(--t3);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.row-info{flex:1;min-width:0}
.row-title{font-size:14px;font-weight:500;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.row-sub{font-size:12px;color:var(--t2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.row-streams{font-size:12px;color:var(--t3)}
.chart-arrow { font-size: 10px; font-weight: 800; margin-right: 4px; }
.chart-arrow.up   { color: #22c55e; }
.chart-arrow.down { color: #ef4444; }
.chart-arrow.same { color: rgba(255,255,255,0.25); font-size: 9px; }
.row-play{width:32px;height:32px;border-radius:50%;background:none;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.15s;color:var(--t2)}
.row-play:hover{border-color:var(--gold);color:var(--gold)}
.row-play svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── RADIO VIEW ── */
.view-radio{display:flex;flex-direction:column}
.radio-hero{padding:40px 24px 32px;display:flex;flex-direction:column;align-items:center;text-align:center}
.radio-visual{width:200px;height:200px;border-radius:50%;background:var(--s2);border:1px solid var(--border-gold);display:flex;align-items:center;justify-content:center;margin:0 auto 28px;position:relative;overflow:hidden}
.radio-visual-inner{width:60px;height:60px;border-radius:50%;background:var(--s4);display:flex;align-items:center;justify-content:center}
.radio-visual-inner svg{width:28px;height:28px;stroke:var(--gold);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.radio-ring{position:absolute;border-radius:50%;border:1px solid var(--border-gold);animation:ring-pulse 3s ease-in-out infinite}
.radio-ring:nth-child(1){width:120px;height:120px;animation-delay:0s}
.radio-ring:nth-child(2){width:160px;height:160px;animation-delay:1s}
@keyframes ring-pulse{0%,100%{opacity:0.1}50%{opacity:0.35}}
.radio-live-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(239,68,68,0.12);border:1px solid rgba(239,68,68,0.3);border-radius:var(--r-full);padding:4px 12px;font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:#f87171;margin-bottom:16px}
.radio-live-dot{width:6px;height:6px;border-radius:50%;background:#f87171;animation:blink 1.2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.2}}
.radio-track{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:400;color:var(--t1);margin-bottom:4px;line-height:1.2}
.radio-next{font-size:11px;color:var(--t3);margin-top:8px;margin-bottom:8px;letter-spacing:0.04em;font-weight:400}
.radio-artist{font-size:14px;color:var(--t2);margin-bottom:28px}
.radio-ctrl{display:flex;align-items:center;justify-content:center;gap:20px}
.radio-btn{width:48px;height:48px;border-radius:50%;background:var(--s2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.15s;color:var(--t2)}
.radio-btn:hover{border-color:var(--border-gold);color:var(--t1)}
.radio-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.radio-btn.main{width:64px;height:64px;background:var(--gold);border-color:var(--gold);color:var(--bg)}
.radio-btn.main:hover{background:#d4a94e}
.radio-btn.main svg{width:24px;height:24px;stroke:var(--bg)}
.radio-stats{display:flex;justify-content:center;gap:40px;margin-top:32px;padding:0 24px}
.radio-stat{text-align:center}
.radio-stat-val{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:300;color:var(--t1);line-height:1}
.radio-stat-lbl{font-size:11px;color:var(--t3);margin-top:4px;text-transform:uppercase;letter-spacing:0.1em}
.radio-vol{padding:24px 32px 0;display:flex;align-items:center;gap:12px}
.radio-vol svg{width:16px;height:16px;stroke:var(--t3);fill:none;stroke-width:1.5;flex-shrink:0}
.vol-track{flex:1;height:3px;background:var(--s3);border-radius:2px;position:relative;cursor:pointer}
.vol-fill{height:100%;background:var(--t2);border-radius:2px;width:80%;transition:width 0.1s}

/* ── SEARCH VIEW ── */
.search-top{padding:16px 20px;position:sticky;top:0;background:rgba(6,6,6,0.95);backdrop-filter:blur(20px);z-index:5;border-bottom:1px solid var(--border)}
.search-field{background:var(--s2);border:1px solid var(--border);border-radius:var(--r-full);padding:10px 18px;display:flex;align-items:center;gap:10px;transition:border-color 0.2s}
.search-field:focus-within{border-color:var(--border-gold)}
.search-field svg{width:16px;height:16px;stroke:var(--t3);fill:none;stroke-width:1.5;flex-shrink:0}
.search-field input{flex:1;background:none;border:none;color:var(--t1);font-family:'DM Sans',sans-serif;font-size:15px;outline:none}
.search-field input::placeholder{color:var(--t3)}
/* ── Artist Discovery ─────────────────────────── */
.disc-featured{margin:16px;border-radius:20px;overflow:hidden;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent}
.disc-featured:active{opacity:0.9}
.disc-featured-bg{height:220px;background-size:cover;background-position:center;background-color:#1a1a2e;position:relative}
.disc-featured-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.08) 0%,rgba(0,0,0,0.82) 100%)}
.disc-featured-content{position:absolute;bottom:0;left:0;right:0;padding:20px;display:flex;align-items:flex-end;gap:14px}
.disc-featured-info{flex:1}
.disc-featured-label{font-size:10px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);margin-bottom:5px}
.disc-featured-name{font-size:26px;font-weight:800;color:#fff;line-height:1.1}
.disc-featured-meta{font-size:12px;color:rgba(255,255,255,0.6);margin-top:4px}
.disc-featured-play{width:48px;height:48px;border-radius:50%;background:var(--gold);border:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer}
.disc-section{padding:4px 0}
.disc-sec-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 10px}
.disc-sec-title{font-size:18px;font-weight:700;color:var(--t1)}
.disc-artist-card{flex-shrink:0;width:110px;cursor:pointer;text-align:center;-webkit-tap-highlight-color:transparent}
.disc-artist-card:active{opacity:0.75}
.disc-artist-img{width:110px;height:110px;border-radius:50%;background:var(--s2);overflow:hidden;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;border:1.5px solid rgba(212,175,55,0.12)}
.disc-artist-img img{width:100%;height:100%;object-fit:cover}
.disc-artist-name{font-size:12px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}
.disc-artist-meta{font-size:11px;color:var(--t3);margin-top:2px}
.disc-artist-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 16px 8px}
.disc-grid-card{display:flex;align-items:center;gap:10px;background:var(--s1);border:1px solid var(--border);border-radius:14px;padding:10px 12px;cursor:pointer;-webkit-tap-highlight-color:transparent;overflow:hidden}
.disc-grid-card:active{opacity:0.75}
.disc-grid-art{width:46px;height:46px;border-radius:50%;background:var(--s2);flex-shrink:0;overflow:hidden}
.disc-grid-art img{width:100%;height:100%;object-fit:cover}
.disc-grid-info{min-width:0}
.disc-grid-name{font-size:13px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.disc-grid-meta{font-size:11px;color:var(--t3);margin-top:2px}

.search-results-area{padding:16px 0}
.search-empty{text-align:center;padding:60px 20px;color:var(--t3)}
.search-empty svg{width:48px;height:48px;stroke:var(--t3);fill:none;stroke-width:1;margin-bottom:16px}
.search-empty p{font-size:14px;line-height:1.7}
.browse-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px 20px}
.browse-item{height:80px;border-radius:var(--r-md);background:var(--s2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.15s;font-size:14px;font-weight:500;color:var(--t1)}
.browse-item:hover{border-color:var(--border-gold);background:var(--gold-dim)}

/* ── LIBRARY VIEW ── */
.lib-head{padding:28px 20px 16px;display:flex;align-items:center;justify-content:space-between}
.lib-title{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:400;color:var(--t1)}
.lib-add{width:36px;height:36px;border-radius:50%;background:var(--gold);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.15s}
.lib-add:hover{background:#d4a94e}
.lib-add svg{width:18px;height:18px;stroke:var(--bg);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lib-add-bottom-wrap{display:flex;justify-content:center;padding:20px 16px 8px}
.lib-add-bottom{box-shadow:0 4px 16px rgba(212,175,55,0.40)}
.lib-tabs{display:flex;gap:0;padding:0 20px;border-bottom:1px solid var(--border);margin-bottom:8px}
.lib-tab{padding:10px 16px;font-size:13px;font-weight:500;color:var(--t3);cursor:pointer;border-bottom:2px solid transparent;transition:all 0.15s}
.lib-tab.active{color:var(--gold);border-bottom-color:var(--gold)}
.playlist-card{display:flex;align-items:center;gap:14px;padding:12px 20px;cursor:pointer;transition:background 0.15s}
.playlist-card:hover{background:rgba(255,255,255,0.03)}
.pl-art{width:56px;height:56px;border-radius:var(--r-sm);background:var(--s2);flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pl-art svg{width:22px;height:22px;stroke:var(--t3);fill:none;stroke-width:1.5}
.pl-info{flex:1;min-width:0}
.pl-name{font-size:15px;font-weight:500;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-meta{font-size:12px;color:var(--t2);margin-top:2px}
.pl-arrow{color:var(--t3)}
.pl-arrow svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5}

/* ── PROFILE VIEW ── */
.profile-top{padding:32px 20px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;border-bottom:1px solid var(--border)}
.profile-avatar{width:80px;height:80px;border-radius:50%;background:var(--s2);border:2px solid var(--border-gold);display:flex;align-items:center;justify-content:center;margin-bottom:14px;overflow:hidden}
.profile-avatar svg{width:36px;height:36px;stroke:var(--t3);fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.profile-name{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:400;color:var(--t1);margin-bottom:4px}
.profile-plan{display:inline-flex;align-items:center;gap:6px;background:var(--gold-dim);border:1px solid var(--border-gold);border-radius:var(--r-full);padding:4px 12px;font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.profile-stats{display:flex;gap:0;width:100%}
.profile-stat{flex:1;text-align:center;padding:12px 0}
.profile-stat+.profile-stat{border-left:1px solid var(--border)}
.ps-val{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:400;color:var(--t1);line-height:1}
.ps-lbl{font-size:11px;color:var(--t3);margin-top:4px}
.profile-menu{padding:8px 0}
.pm-item{display:flex;align-items:center;gap:14px;padding:14px 20px;cursor:pointer;transition:background 0.15s}
.pm-item:hover{background:rgba(255,255,255,0.03)}
.pm-icon{width:36px;height:36px;border-radius:var(--r-md);background:var(--s2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pm-icon svg{width:16px;height:16px;stroke:var(--t2);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pm-text{flex:1;font-size:14px;font-weight:500;color:var(--t1)}
.pm-arrow{color:var(--t3)}
.pm-arrow svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.pm-divider{height:1px;background:var(--border);margin:4px 20px}

/* ── TIER UPGRADE BANNER ── */
.upgrade-banner{margin:20px;background:var(--s2);border:1px solid var(--border-gold);border-radius:var(--r-lg);padding:20px;display:flex;align-items:center;gap:14px}
.upgrade-icon{width:44px;height:44px;border-radius:var(--r-md);background:var(--gold-dim);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.upgrade-icon svg{width:20px;height:20px;stroke:var(--gold);fill:none;stroke-width:1.5}
.upgrade-text{flex:1}
.upgrade-title{font-size:14px;font-weight:600;color:var(--t1);margin-bottom:2px}
.upgrade-sub{font-size:12px;color:var(--t2)}
.upgrade-btn{background:var(--gold);color:var(--bg);border:none;border-radius:var(--r-full);padding:8px 16px;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;cursor:pointer;flex-shrink:0;transition:background 0.15s;white-space:nowrap}
.upgrade-btn:hover{background:#d4a94e}

/* ── LOADING ── */
.skeleton{background:var(--s2);border-radius:var(--r-sm);animation:shimmer 1.5s infinite}
@keyframes shimmer{0%,100%{opacity:1}50%{opacity:0.5}}

/* ── UTILS ── */
.hidden{display:none!important}
/* ── MINI PLAYER (bottom) ── */
.mini{position:fixed;bottom:0;left:0;right:0;height:72px;background:var(--s1);border-top:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:14px;cursor:pointer;z-index:10;transition:opacity 0.3s}
.mini::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent) var(--prog,35%),transparent var(--prog,35%))}
.mini-art{width:44px;height:44px;border-radius:var(--r-sm);background:var(--s3);flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
.mini-art img{width:100%;height:100%;object-fit:cover}
.mini-info{flex:1;min-width:0}
.mini-title{font-size:14px;font-weight:500;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-artist{font-size:12px;color:var(--t2);margin-top:2px}
.mini-btns{display:flex;gap:4px}
.mini-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--t2);border-radius:50%}
.mini-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mini-btn.play{color:var(--t1)}
.mini-btn.play svg{width:22px;height:22px}

/* ── FULL PLAYER ── */
.player{position:fixed;inset:0;z-index:500;display:flex;flex-direction:column;transform:translateY(100%);transition:transform 0.45s cubic-bezier(0.32,0.72,0,1);will-change:transform;background:#060606;overflow:hidden}
.player.open{transform:translateY(0)}

/* Dynamic background */
.player-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.player-bg-color{position:absolute;inset:0;opacity:0.35;transition:background 1.2s ease}
.player-bg-blur{position:absolute;inset:0;backdrop-filter:blur(0px);background:rgba(6,6,6,0.7)}
.player-bg-noise{position:absolute;inset:0;opacity:0.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.player-inner{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;padding-top:var(--safe-top)}

/* Handle bar */
.player-handle{padding:12px 0 8px;display:flex;justify-content:center;flex-shrink:0}
.handle-bar{width:36px;height:4px;border-radius:2px;background:rgba(255,255,255,0.2)}

/* Top bar */
.player-top{padding:4px 20px 16px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.player-close{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.08);border-radius:50%;cursor:pointer;border:none;color:var(--t1);transition:background 0.15s}
.player-close:hover{background:rgba(255,255,255,0.14)}
.player-close svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.player-source{font-size:11px;font-weight:500;letter-spacing:0.15em;text-transform:uppercase;color:var(--t2);text-align:center}
.player-queue-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.08);border-radius:50%;cursor:pointer;border:none;color:var(--t1);transition:background 0.15s}
.player-queue-btn:hover{background:rgba(255,255,255,0.14)}
.player-queue-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* Artwork area */
.artwork-area{flex:1;display:flex;align-items:center;justify-content:center;padding:0 32px;min-height:0;perspective:1000px}
.artwork-flipper{width:100%;max-width:320px;aspect-ratio:1;position:relative;cursor:pointer}
.artwork-flipper.flipped .artwork-front{display:none!important}
.artwork-flipper.flipped .artwork-back{display:flex!important}
.artwork-front,.artwork-back{position:absolute;inset:0;border-radius:var(--r-lg);overflow:hidden}
.artwork-front{background:var(--s2);box-shadow:0 32px 80px rgba(0,0,0,0.6)}
.artwork-front img{width:100%;height:100%;object-fit:cover;display:block}
.artwork-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--s3)}
.artwork-placeholder svg{width:64px;height:64px;stroke:var(--t3);fill:none;stroke-width:0.8}
.artwork-back{background:rgba(10,10,10,0.95);border:1px solid var(--border);display:none;flex-direction:column;padding:24px;box-shadow:0 32px 80px rgba(0,0,0,0.6)}
.lyrics-title{font-size:11px;font-weight:500;letter-spacing:0.15em;text-transform:uppercase;color:var(--t3);margin-bottom:16px;flex-shrink:0}
.lyrics-content{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.lyrics-content::-webkit-scrollbar{display:none}
.lyric-line{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:300;color:rgba(240,236,228,0.35);line-height:1.6;margin-bottom:8px;transition:all 0.4s;cursor:default}
.lyric-line.active{color:var(--t1);font-size:20px;font-weight:400}
.lyric-line.passed{color:rgba(240,236,228,0.2)}
.lyrics-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:12px;text-align:center}
.lyrics-empty svg{width:32px;height:32px;stroke:var(--t3);fill:none;stroke-width:1}
.lyrics-empty p{font-size:13px;color:var(--t3);line-height:1.6}

/* Track info */
.track-info{padding:20px 28px 12px;flex-shrink:0}
.track-info-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.track-names{flex:1;min-width:0}
.track-title-big{font-size:22px;font-weight:600;color:var(--t1);letter-spacing:-0.02em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-artist-big{font-size:15px;color:var(--t2);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.like-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--t3);flex-shrink:0;transition:all 0.2s;border-radius:50%;margin-top:2px}
.like-btn.liked{color:#f43f5e}
.like-btn:hover{color:var(--t1)}
.like-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:all 0.2s}
.like-btn.liked svg{fill:#f43f5e;stroke:#f43f5e}

/* Progress */
.progress-area{padding:8px 28px 16px;flex-shrink:0}
.progress-track{height:4px;background:rgba(255,255,255,0.12);border-radius:2px;position:relative;cursor:pointer;margin-bottom:8px;touch-action:none;-webkit-tap-highlight-color:transparent}
.progress-fill{height:100%;border-radius:2px;background:var(--t1);position:relative;transition:width 0.2s linear;width:35%}
.progress-fill::after{content:'';position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:12px;height:12px;border-radius:50%;background:var(--t1);opacity:0;transition:opacity 0.2s}
.progress-track:hover .progress-fill::after{opacity:1}
.progress-times{display:flex;justify-content:space-between;font-size:11px;color:var(--t3);font-variant-numeric:tabular-nums}

/* Controls */
.controls-main{padding:0 20px 16px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.ctrl-btn{width:52px;height:52px;display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--gold);border-radius:50%;transition:all 0.18s cubic-bezier(0.34,1.56,0.64,1);position:relative}
.ctrl-btn:hover{color:var(--gold);background:var(--gold-dim);transform:scale(1.15);box-shadow:0 0 12px rgba(212,175,55,0.25)}.ctrl-btn:active{transform:scale(0.9)}
.ctrl-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ctrl-btn.active svg{stroke:var(--gold)}
.ctrl-btn.active::after{content:'';position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--gold)}
.play-main{width:68px;height:68px;border-radius:50%;background:var(--t1);display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;transition:transform 0.15s,background 0.15s;flex-shrink:0}
.play-main:hover{transform:scale(1.06)}
.play-main:active{transform:scale(0.96)}
.play-main svg{width:26px;height:26px;stroke:var(--bg);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.play-main.playing svg{fill:var(--bg)}

/* Action row */
.actions-row{padding:0 20px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding-bottom:calc(var(--safe-bot) + 16px)}
.action-btn{display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:none;cursor:pointer;color:var(--t3);transition:color 0.15s;padding:8px 12px;border-radius:var(--r-md)}
.action-btn:hover{color:var(--t1)}
.action-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.action-btn span{font-size:10px;font-weight:500;letter-spacing:0.04em;line-height:1}
.action-btn.radio-req{color:var(--gold)}
.action-btn.radio-req svg{stroke:var(--gold)}

/* ── QUEUE PANEL ── */
.queue-panel{position:fixed;inset:0;z-index:200;transform:translateY(100%);transition:transform 0.4s cubic-bezier(0.32,0.72,0,1)}
.queue-panel.open{transform:translateY(0)}
.queue-bg{position:absolute;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(8px)}
.queue-sheet{position:absolute;bottom:0;left:0;right:0;background:var(--s1);border-radius:20px 20px 0 0;border-top:1px solid var(--border);padding-top:12px;max-height:80vh;display:flex;flex-direction:column}
.queue-handle-wrap{display:flex;justify-content:center;padding-bottom:12px;flex-shrink:0}
.queue-handle{width:36px;height:4px;border-radius:2px;background:rgba(255,255,255,0.15)}
.queue-head{padding:0 20px 16px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;border-bottom:1px solid var(--border)}
.queue-title{font-size:16px;font-weight:600;color:var(--t1)}
.queue-close{background:none;border:none;color:var(--t2);cursor:pointer;font-size:24px;line-height:1;padding:4px}
.queue-list{flex:1;overflow-y:auto;padding:8px 0}
.queue-list::-webkit-scrollbar{display:none}
.queue-item{display:flex;align-items:center;gap:14px;padding:10px 20px;cursor:pointer;transition:background 0.15s}
.queue-item:hover{background:rgba(255,255,255,0.04)}
.queue-item.current{background:var(--gold-dim)}
.q-art{width:44px;height:44px;border-radius:var(--r-sm);background:var(--s3);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.q-art svg{width:16px;height:16px;stroke:var(--t3);fill:none;stroke-width:1.5}
.q-info{flex:1;min-width:0}
.q-title{font-size:14px;font-weight:500;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q-artist{font-size:12px;color:var(--t2);margin-top:2px}
.q-playing{width:16px;flex-shrink:0;display:flex;align-items:center;gap:2px;height:16px}
.q-bar{width:3px;border-radius:2px;background:var(--gold);animation:eq 0.8s ease infinite alternate}
.q-bar:nth-child(2){animation-delay:0.2s;height:10px}
.q-bar:nth-child(3){animation-delay:0.4s;height:6px}
@keyframes eq{from{height:4px}to{height:14px}}

/* ── RADIO REQUEST ── */
.req-modal{position:fixed;inset:0;z-index:300;display:flex;align-items:flex-end;opacity:0;pointer-events:none;transition:opacity 0.3s}
.req-modal.open{opacity:1;pointer-events:all}
.req-bg{position:absolute;inset:0;background:rgba(0,0,0,0.7)}
.req-sheet{position:relative;background:var(--s1);border-radius:20px 20px 0 0;border-top:1px solid var(--border);padding:20px;width:100%}
.req-title{font-size:18px;font-weight:600;color:var(--t1);margin-bottom:4px}
.req-sub{font-size:13px;color:var(--t2);margin-bottom:20px;line-height:1.6}
.req-track-preview{background:var(--s2);border:1px solid var(--border);border-radius:var(--r-md);padding:14px 16px;display:flex;align-items:center;gap:12px;margin-bottom:20px}
.req-track-info{}
.req-track-name{font-size:14px;font-weight:500;color:var(--t1)}
.req-track-artist{font-size:12px;color:var(--t2);margin-top:2px}
.req-input{background:var(--s2);border:1px solid var(--border);border-radius:var(--r-md);padding:14px 16px;width:100%;color:var(--t1);font-family:'DM Sans',sans-serif;font-size:15px;outline:none;margin-bottom:16px;transition:border-color 0.2s;resize:none;height:80px}
.req-input:focus{border-color:var(--border-gold)}
.req-input::placeholder{color:var(--t3)}
.req-actions{display:flex;gap:10px}
.req-cancel{flex:1;background:var(--s2);border:1px solid var(--border);border-radius:var(--r-full);padding:14px;font-family:'DM Sans',sans-serif;font-size:14px;color:var(--t2);cursor:pointer}
.req-send{flex:2;background:var(--gold);border:none;border-radius:var(--r-full);padding:14px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;color:var(--bg);cursor:pointer;transition:background 0.15s}
.req-send:hover{background:#d4a94e}
.req-success{display:none;text-align:center;padding:20px 0}
.req-success-icon{font-size:48px;margin-bottom:12px}
.req-success-title{font-size:18px;font-weight:600;color:var(--t1);margin-bottom:8px}
.req-success-sub{font-size:13px;color:var(--t2)}

/* ── DEMO LABEL ── */
.demo-label{position:fixed;top:16px;left:50%;transform:translateX(-50%);background:rgba(212,175,55,0.15);border:1px solid rgba(212,175,55,0.3);border-radius:var(--r-full);padding:6px 16px;font-size:11px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);z-index:500;pointer-events:none}


/* ── LIVE CHAT ── */
.chat-panel{position:fixed;bottom:calc(var(--nav-h) + var(--bar-h) + var(--safe-bot));left:0;right:0;height:380px;background:rgba(6,6,6,0.97);backdrop-filter:blur(20px);border-top:1px solid var(--border);display:flex;flex-direction:column;transform:translateY(calc(100% + var(--nav-h) + var(--bar-h) + var(--safe-bot)));transition:transform 0.4s cubic-bezier(0.32,0.72,0,1);z-index:50}
.chat-panel.open{transform:translateY(0)}
.chat-header{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.chat-header-left{display:flex;align-items:center;gap:8px}
.chat-live-dot{width:6px;height:6px;border-radius:50%;background:#f87171;animation:blink 1.2s infinite}
.chat-title{font-size:13px;font-weight:600;color:var(--t1);letter-spacing:0.04em}
.chat-count{font-size:11px;color:var(--t3)}
.chat-close{background:none;border:none;color:var(--t2);cursor:pointer;font-size:20px;padding:4px}
.chat-messages{flex:1;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:8px}
.chat-messages::-webkit-scrollbar{display:none}
.chat-msg{display:flex;flex-direction:column;gap:2px}
.chat-msg-name{font-size:11px;font-weight:600;color:var(--gold)}
.chat-msg-name.dj{color:#f87171}
.chat-msg-text{font-size:13px;color:var(--t1);line-height:1.5}
.chat-msg-time{font-size:10px;color:var(--t3)}
.chat-empty{text-align:center;color:var(--t3);font-size:13px;padding:24px;flex:1;display:flex;align-items:center;justify-content:center}
.chat-input-row{padding:10px 12px;border-top:1px solid var(--border);display:flex;gap:8px;align-items:center;flex-shrink:0}
.chat-input{flex:1;background:var(--s2);border:1px solid var(--border);border-radius:var(--r-full);padding:10px 16px;color:var(--t1);font-family:"DM Sans",sans-serif;font-size:14px;outline:none;transition:border-color 0.2s}
.chat-input:focus{border-color:var(--border-gold)}
.chat-send{width:38px;height:38px;border-radius:50%;background:var(--gold);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.2s}
.chat-send:hover{background:#d4a94e}
.chat-send svg{width:16px;height:16px;stroke:var(--bg);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chat-disabled{text-align:center;color:var(--t3);font-size:13px;padding:12px;border-top:1px solid var(--border);flex-shrink:0}

/* Poll card */
.poll-card{background:var(--s2);border:1px solid var(--border-gold);border-radius:var(--r-md);padding:14px;margin:0 16px 8px;flex-shrink:0}
.poll-question{font-size:13px;font-weight:600;color:var(--t1);margin-bottom:10px}
.poll-options{display:flex;flex-direction:column;gap:6px}
.poll-option{background:var(--s3);border:1px solid var(--border);border-radius:var(--r-sm);padding:8px 12px;cursor:pointer;transition:all 0.2s;position:relative;overflow:hidden}
.poll-option:hover{border-color:var(--border-gold)}
.poll-option.voted{border-color:var(--gold)}
.poll-option-bar{position:absolute;left:0;top:0;bottom:0;background:rgba(212,175,55,0.15);transition:width 0.5s ease}
.poll-option-text{font-size:12px;color:var(--t1);position:relative;z-index:1;display:flex;justify-content:space-between}
.poll-pct{color:var(--gold);font-size:11px}

/* DM button */
.dm-btn{background:var(--s2);border:1px solid var(--border);border-radius:var(--r-full);padding:6px 14px;color:var(--t2);font-size:12px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all 0.2s;font-family:"DM Sans",sans-serif}
.dm-btn:hover{border-color:var(--border-gold);color:var(--t1)}
.dm-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5}

/* Chat toggle button on radio view */
.radio-chat-btn{display:inline-flex;align-items:center;gap:6px;background:var(--s2);border:1px solid var(--border);border-radius:var(--r-full);padding:8px 16px;color:var(--t2);font-size:13px;font-weight:500;cursor:pointer;margin-top:16px;transition:all 0.2s;font-family:"DM Sans",sans-serif}
.radio-chat-btn.active{border-color:var(--gold);color:var(--gold)}
.radio-chat-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5}

/* DM Modal */
.dm-modal{position:fixed;inset:0;z-index:400;display:flex;align-items:flex-end;opacity:0;pointer-events:none;transition:opacity 0.3s}
.dm-modal.open{opacity:1;pointer-events:all}
.dm-bg{position:absolute;inset:0;background:rgba(0,0,0,0.7)}
.dm-sheet{position:relative;background:var(--s1);border-radius:20px 20px 0 0;border-top:1px solid var(--border);padding:24px 20px;width:100%;padding-bottom:calc(24px + var(--safe-bot))}
.dm-title{font-size:16px;font-weight:600;color:var(--t1);margin-bottom:4px}
.dm-sub{font-size:13px;color:var(--t3);margin-bottom:16px}
.dm-input{width:100%;background:var(--s2);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 16px;color:var(--t1);font-family:"DM Sans",sans-serif;font-size:14px;outline:none;resize:none;height:100px;transition:border-color 0.2s;box-sizing:border-box}
.dm-input:focus{border-color:var(--border-gold)}
.dm-actions{display:flex;gap:10px;margin-top:12px}
.dm-cancel{flex:1;background:var(--s2);border:1px solid var(--border);border-radius:var(--r-full);padding:12px;color:var(--t2);font-family:"DM Sans",sans-serif;font-size:14px;cursor:pointer}
.dm-send{flex:2;background:var(--gold);border:none;border-radius:var(--r-full);padding:12px;color:var(--bg);font-family:"DM Sans",sans-serif;font-size:14px;font-weight:600;cursor:pointer}



/* ── AUTH SCREEN (new) ── */
#auth{justify-content:space-between;overflow:hidden}
.auth-top{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(60px + var(--safe-top)) 32px 28px}
.auth-logo{font-family:'Cormorant Garamond',serif;font-size:66px;font-weight:300;letter-spacing:-0.02em;color:var(--t1)}
.auth-logo span{color:var(--gold)}
.auth-tagline{font-size:14px;font-weight:300;color:var(--t3);margin-top:10px;text-align:center;line-height:1.65;max-width:260px}
.auth-sheet{background:var(--s1);border-top:1px solid var(--border);border-radius:28px 28px 0 0;padding:28px 24px calc(36px + var(--safe-bot));display:flex;flex-direction:column;gap:10px}
.sheet-handle{width:36px;height:3px;background:var(--s4);border-radius:2px;margin:0 auto 22px}
.auth-title{font-size:20px;font-weight:600;color:var(--t1);margin-bottom:2px}
.auth-sub{font-size:13px;color:var(--t3);margin-bottom:14px;line-height:1.5}
.btn-gold{background:var(--gold);color:#050505;border:none;border-radius:var(--r-full);padding:16px 24px;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;cursor:pointer;width:100%;transition:background 0.15s,transform 0.1s}
.btn-gold:active{transform:scale(0.98);background:var(--gold2)}
.btn-outline{background:transparent;color:var(--t1);border:1px solid rgba(255,255,255,0.12);border-radius:var(--r-full);padding:15px 24px;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:500;cursor:pointer;width:100%;transition:background 0.15s,transform 0.1s}
.btn-outline:active{transform:scale(0.98)}
.guest-link{text-align:center;font-size:12px;color:var(--t3);cursor:pointer;padding:6px 8px}
.guest-link span{color:var(--t2);text-decoration:underline;text-underline-offset:2px}
.login-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.back-btn{width:34px;height:34px;border-radius:50%;background:var(--s2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.back-btn svg{width:16px;height:16px;stroke:var(--t2);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.login-title{font-size:18px;font-weight:600;color:var(--t1)}
.field{background:var(--s2);border:1px solid var(--border);border-radius:var(--r-md);padding:13px 16px;display:flex;align-items:center;gap:12px;transition:border-color 0.2s}
.field:focus-within{border-color:var(--border-gold)}
.field svg{width:16px;height:16px;stroke:var(--t3);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.field input{flex:1;background:none;border:none;color:var(--t1);font-family:'DM Sans',sans-serif;font-size:15px;outline:none}
.field input::placeholder{color:var(--t3)}
.forgot{text-align:right;font-size:12px;color:var(--t3);padding:2px 0;cursor:pointer}
.forgot span{color:var(--t2);text-decoration:underline;text-underline-offset:2px}

/* ── NEW ONBOARDING ── */
#onboard{overflow:hidden}
.ob-header{padding:calc(14px + var(--safe-top)) 20px 14px;display:flex;align-items:center;gap:14px;background:var(--bg);border-bottom:1px solid var(--border);flex-shrink:0}
.ob-back{width:36px;height:36px;border-radius:50%;background:var(--s2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background 0.15s}
.ob-back:active{background:var(--s3)}
.ob-back svg{width:18px;height:18px;stroke:var(--t2);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ob-prog-track{flex:1;height:3px;background:var(--s3);border-radius:2px;overflow:hidden}
.ob-prog-fill{height:100%;background:var(--gold);border-radius:2px;transition:width 0.45s cubic-bezier(0.4,0,0.2,1)}
.ob-step-lbl{font-size:12px;color:var(--t3);font-weight:500;flex-shrink:0;min-width:28px;text-align:right}
.ob-viewport{flex:1;min-height:0;overflow:hidden;position:relative}
.ob-slides{display:flex;width:400%;height:100%;transition:transform 0.45s cubic-bezier(0.4,0,0.2,1)}
.ob-slide{width:25%;height:100%;display:flex;flex-direction:column;padding:22px 22px 180px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.ob-title{font-family:'Cormorant Garamond',serif;font-size:30px;font-weight:300;color:var(--t1);line-height:1.15;margin-bottom:8px;flex-shrink:0}
.ob-title em{font-style:italic;color:var(--gold)}
.ob-sub{font-size:14px;color:var(--t3);line-height:1.6;margin-bottom:16px;flex-shrink:0}
/* Genre pills */
.genre-wrap{flex:1;overflow-y:auto;padding-bottom:16px}
.genre-grid{display:flex;flex-wrap:wrap;gap:8px}
.g-pill{background:var(--s2);border:1px solid var(--border);border-radius:var(--r-full);padding:9px 16px;font-size:13px;font-weight:500;color:var(--t2);cursor:pointer;transition:all 0.2s;user-select:none}
.g-pill.sel{background:var(--gold-dim);border-color:var(--border-gold);color:var(--gold)}
.g-pill:active{transform:scale(0.94)}
/* Behavior cards */
.behavior-wrap{flex:1;overflow-y:auto;padding-bottom:16px}
.behavior-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.b-card{background:var(--s2);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 14px;display:flex;flex-direction:column;gap:8px;cursor:pointer;position:relative;transition:all 0.2s;user-select:none}
.b-card.sel{background:var(--gold-dim);border-color:var(--border-gold)}
.b-card:active{transform:scale(0.97)}
.b-check{position:absolute;top:12px;right:12px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;transition:all 0.2s}
.b-card.sel .b-check{background:var(--gold);border-color:var(--gold)}
.b-check svg{width:10px;height:10px;stroke:var(--bg);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity 0.15s}
.b-card.sel .b-check svg{opacity:1}
.b-icon{font-size:26px;line-height:1;display:flex;align-items:center}
.b-name{font-size:13px;font-weight:600;color:var(--t1)}
.b-desc{font-size:11px;color:var(--t3);line-height:1.4}
/* Moment cards */
.moments-wrap{flex:1;overflow-y:auto;padding-bottom:16px}
.moments-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.m-card{background:var(--s2);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 14px;display:flex;flex-direction:column;gap:6px;cursor:pointer;position:relative;transition:all 0.2s;user-select:none}
.m-card.sel{background:var(--gold-dim);border-color:var(--border-gold)}
.m-card:active{transform:scale(0.97)}
.m-check{position:absolute;top:12px;right:12px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;transition:all 0.2s}
.m-card.sel .m-check{background:var(--gold);border-color:var(--gold)}
.m-check svg{width:10px;height:10px;stroke:var(--bg);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity 0.15s}
.m-card.sel .m-check svg{opacity:1}
.m-icon{font-size:26px;line-height:1}
.m-name{font-size:13px;font-weight:600;color:var(--t1)}
.m-time{font-size:11px;color:var(--t3)}
/* NAW form */
.naw-wrap{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding-bottom:16px}
.terms-note{font-size:11px;color:var(--t3);line-height:1.7;padding:0 4px}
.terms-note a{color:var(--gold);text-decoration:none}
.or-divider{display:flex;align-items:center;gap:12px;padding:2px 0}
.or-line{flex:1;height:1px;background:var(--border)}
.or-text{font-size:12px;color:var(--t3)}
/* Footer */
.ob-footer{position:fixed;bottom:0;left:0;right:0;z-index:205;padding:14px 22px calc(20px + var(--safe-bot));border-top:1px solid var(--border);background:var(--bg)}
.btn-next{background:var(--gold);color:#050505;border:none;border-radius:var(--r-full);padding:16px 24px;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;cursor:pointer;width:100%;transition:background 0.15s,opacity 0.2s,transform 0.1s}
.btn-next:active{transform:scale(0.98)}
.btn-next:disabled{opacity:0.28;cursor:not-allowed;transform:none!important}
/* Toast */
.toast{position:fixed;bottom:calc(36px + var(--safe-bot));left:50%;transform:translateX(-50%) translateY(12px);background:var(--s3);border:1px solid var(--border);border-radius:var(--r-full);padding:11px 20px;font-size:13px;color:var(--t1);white-space:nowrap;opacity:0;transition:opacity 0.3s,transform 0.3s;z-index:999;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}


/* ── Vinyl spinner ───────────────────────────────────────────────── */
.vinyl-wrap{width:200px;height:200px;margin:0 auto 28px;position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer}
.vinyl{width:182px;height:182px;border-radius:50%;position:relative;animation:vinyl-spin 3.5s linear infinite;animation-play-state:paused}
.vinyl.playing{animation-play-state:running}
.vinyl-disc{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#faf7f0 0%,#ede8dc 30%,#ddd8cc 55%,#ccc5b4 80%,#bfb8a6 100%);box-shadow:0 0 0 2px rgba(212,175,55,0.4),0 0 0 3px rgba(212,175,55,0.15),0 8px 32px rgba(0,0,0,0.25),inset 0 2px 8px rgba(255,255,255,0.6),inset 0 -2px 6px rgba(0,0,0,0.1)}
.vinyl-grooves{position:absolute;inset:6px;border-radius:50%;box-shadow:0 0 0 6px rgba(212,175,55,0.18),0 0 0 12px rgba(212,175,55,0.14),0 0 0 18px rgba(212,175,55,0.11),0 0 0 24px rgba(212,175,55,0.08),0 0 0 30px rgba(212,175,55,0.06),0 0 0 36px rgba(212,175,55,0.045),0 0 0 42px rgba(212,175,55,0.032),0 0 0 48px rgba(212,175,55,0.02),0 0 0 54px rgba(212,175,55,0.012),0 0 0 60px rgba(212,175,55,0.006)}
.vinyl-label{position:absolute;inset:34%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f5e07a,#D4AF37 45%,#C9A227 75%,#8a6820);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 14px rgba(212,175,55,0.5),0 0 0 1px rgba(212,175,55,0.3)}
.vinyl-label-text{font-family:'Cormorant Garamond',serif;font-size:8.5px;font-weight:700;color:var(--gold);letter-spacing:0.14em;text-transform:uppercase;text-shadow:0 0 6px rgba(212,175,55,0.6)}
.vinyl-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:9px;height:9px;border-radius:50%;background:#050505;border:1.5px solid rgba(212,175,55,0.5);box-shadow:0 1px 4px rgba(0,0,0,0.8)}
.vinyl-ring1{position:absolute;inset:-12px;border-radius:50%;border:1px solid rgba(212,175,55,0.28);animation:ring-pulse 3s ease-in-out infinite;pointer-events:none}
.vinyl-ring2{position:absolute;inset:-26px;border-radius:50%;border:1px solid rgba(212,175,55,0.13);animation:ring-pulse 3s ease-in-out infinite 1.2s;pointer-events:none}
.vinyl-wrap{filter:drop-shadow(0 0 18px rgba(212,175,55,0.12))}
.vinyl.playing~.vinyl-ring1{border-color:rgba(212,175,55,0.45)}
.vinyl.playing~.vinyl-ring2{border-color:rgba(212,175,55,0.2)}
@keyframes vinyl-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* ── Radio action row (buttons side by side) ─────────────────────── */
.radio-action-row{display:flex;gap:10px;margin-top:20px;width:100%;max-width:300px}
.radio-action-row .radio-chat-btn{margin-top:0;flex:1;justify-content:center;font-size:12px;padding:10px 12px}
.radio-action-row .dm-btn{flex:1;justify-content:center;font-size:12px;padding:10px 12px}

/* ── Program schedule ─────────────────────────────────────────────── */
.radio-sched{padding:0 16px 32px}
.sched-section-title{font-size:10px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--t3);padding:14px 0 8px}
.sched-card{background:var(--s1);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:8px}
.sched-now-card{border-color:var(--border-gold);background:rgba(212,175,55,0.03)}
.sched-item{display:flex;align-items:center;gap:12px;padding:14px}
.sched-emoji{width:40px;height:40px;background:var(--s2);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.sched-info{flex:1;min-width:0}
.sched-name{font-size:14px;font-weight:600;color:var(--t1)}
.sched-dj{font-size:12px;color:var(--gold);margin-top:2px}
.sched-time{font-size:11px;color:var(--t3);margin-top:3px}
.sched-on-air{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.25);border-radius:5px;padding:3px 8px;font-size:10px;font-weight:700;color:#f87171;letter-spacing:0.08em;text-transform:uppercase;flex-shrink:0}
.sched-empty{padding:18px 16px;color:var(--t3);font-size:12px;text-align:center}


/* ── LIGHT MODE ── */
body.light-mode{
  --bg:#f5f3ef;--s1:#ffffff;--s2:#f0ede8;--s3:#e8e5e0;--s4:#dedad4;
  --t1:#1a1814;--t2:#5a5652;--t3:#9a9690;
  --border:rgba(0,0,0,0.08);--border-gold:rgba(212,175,55,0.3);
}
body.light-mode .app-nav{background:rgba(245,243,239,0.95)}
body.light-mode .mini-player{background:var(--s1)}
body.light-mode .chat-panel{background:var(--s1)}

body.light-mode .player { background:#f5f3ef !important; }
body.light-mode .player-bg-color { opacity:0.3; }
body.light-mode .player-inner { color:var(--t1); }
body.light-mode .track-title-big, body.light-mode .track-artist-big { color:var(--t1); }
body.light-mode .progress-track { background:rgba(0,0,0,0.1); }
body.light-mode .home-hero { background:transparent; }
body.light-mode .view { background:var(--bg); }
body.light-mode .playlist-view-overlay { background:var(--bg); }
body.light-mode #playlist-view-overlay { background:var(--bg) !important; }
body.light-mode .sett-card { background:var(--s1); }
body.light-mode .pl-track-row { background:transparent; }
body.light-mode .pl-track-row:hover { background:rgba(0,0,0,0.04); }
body.light-mode .search-field { background:var(--s2); border-color:var(--border); }
body.light-mode .search-field input { color:var(--t1); }
body.light-mode .browse-item { background:var(--s2); color:var(--t2); }
body.light-mode .playlist-card { background:transparent; }
body.light-mode .lib-tab { color:var(--t3); }
body.light-mode .lib-tab.active { color:var(--t1); }
body.light-mode #artist-page-overlay { background:var(--bg) !important; }


/* ── SETTINGS VIEW ── */
.sett-section{margin-bottom:20px}
.sett-label{font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--t3);margin-bottom:8px;padding:0 4px}
.sett-card{background:var(--s1);border-radius:14px;overflow:hidden;border:1px solid var(--border)}
.sett-row{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;cursor:default;gap:12px;transition:background 0.15s}
.sett-row:active{background:var(--s2)}
.sett-row-left{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.sett-row-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sett-row-title{font-size:15px;font-weight:500;color:var(--t1)}
.sett-row-val{font-size:13px;color:var(--t3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
.sett-row-badge{background:var(--gold-dim);color:var(--gold);font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;border:1px solid var(--border-gold);flex-shrink:0}

/* Toggle switch */
.sett-toggle-wrap{flex-shrink:0}
.sett-toggle{position:relative;width:50px;height:28px;background:var(--s3);border:none;border-radius:999px;cursor:pointer;transition:background 0.25s;padding:0;outline:none}
.sett-toggle.on{background:var(--gold)}
.sett-toggle-knob{position:absolute;top:3px;left:3px;width:22px;height:22px;background:#fff;border-radius:50%;transition:transform 0.25s;display:block;box-shadow:0 1px 4px rgba(0,0,0,0.3)}
.sett-toggle.on .sett-toggle-knob{transform:translateX(22px)}

/* Language buttons */
.lang-btn{flex:1;padding:10px 8px;background:var(--s2);border:1px solid var(--border);border-radius:10px;color:var(--t2);font-size:14px;font-weight:500;cursor:pointer;font-family:inherit;transition:all 0.15s;min-width:120px}
.lang-btn.lang-active{background:var(--gold-dim);border-color:var(--border-gold);color:var(--gold);font-weight:600}

/* ═══════════════════════════════════════════════════════════════════
   NXXT PREMIUM UX — polish layer
   ═══════════════════════════════════════════════════════════════════ */

/* 1 ── Warmer dark palette */
:root {
  --bg:#09090B;
  --s1:#0d0d10;
  --s2:#131316;
  --s3:#1b1b1f;
  --s4:#222228;
  --gold-glow:rgba(212,175,55,0.15);
  --glass-bg:rgba(13,13,16,0.84);
  --shadow-deep:0 16px 48px rgba(0,0,0,0.65);
  --shadow-gold:0 0 40px rgba(212,175,55,0.10);
}

/* 2 ── Layered gradient background on main app views */
.view {
  background:linear-gradient(160deg,#09090B 0%,#0c0c10 50%,#09090B 100%);
}

/* 3 ── View transitions (fade+lift on activate) */
.view.active {
  animation: nxxtViewIn 0.24s cubic-bezier(0.25,0.46,0.45,0.94) both;
}
@keyframes nxxtViewIn {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}

/* 4 ── Floating glass mini player */
.mini-player {
  margin:0 8px 0 !important;
  border-radius:16px !important;
  border:none !important;
  border-top:none !important;
  outline:1px solid rgba(255,255,255,0.07);
  background:var(--glass-bg) !important;
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  box-shadow:0 8px 32px rgba(0,0,0,0.55),
             0 2px 8px rgba(0,0,0,0.4),
             0 0 0 1px rgba(212,175,55,0.06),
             inset 0 1px 0 rgba(255,255,255,0.05);
  overflow:hidden;
}
.mini-player::before {
  border-radius:16px 16px 0 0;
  height:2px;
}
/* Extra bottom padding so mini-player sits 8px above nav */
.app-body {
  position:relative;
}

/* 5 ── Premium skeleton shimmer */
.skeleton {
  background:linear-gradient(
    90deg,
    var(--s2) 0%,
    var(--s3) 40%,
    var(--s2) 80%
  ) !important;
  background-size:250% 100% !important;
  animation:premiumShimmer 1.9s ease-in-out infinite !important;
}
@keyframes premiumShimmer {
  0%   { background-position:200% 0; }
  100% { background-position:-200% 0; }
}

/* 6 ── Album artwork +12% */
.track-card  { width:168px; }
.track-art   { width:168px; height:168px; border-radius:12px; }
.h-scroll    { gap:16px; }

/* 7 ── Gold ambient glows */
.nav-btn-radio .nav-radio-icon {
  box-shadow:0 4px 20px rgba(212,175,55,0.55),
             0 0 60px rgba(212,175,55,0.18) !important;
}
.lib-add {
  box-shadow:0 4px 16px rgba(212,175,55,0.40) !important;
}
.pl-play-all-btn {
  box-shadow:0 4px 20px rgba(212,175,55,0.45) !important;
}
/* Subtle gold ambient behind best artist section */
#best-artist-section {
  position:relative;
}
#best-artist-section::before {
  content:'';
  position:absolute;
  top:-20px;left:20%;right:20%;
  height:80px;
  background:radial-gradient(ellipse at center,rgba(212,175,55,0.08) 0%,transparent 70%);
  pointer-events:none;
  z-index:0;
}

/* 8 ── Nav tab micro animations */
.nav-btn {
  transition:color 0.18s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.nav-btn.active {
  transform:scale(1.07) !important;
}
.nav-btn svg {
  transition:transform 0.22s cubic-bezier(0.34,1.56,0.64,1), stroke 0.18s ease;
}
.nav-btn.active svg {
  transform:scale(1.12);
}
.nav-btn:active {
  transform:scale(0.93) !important;
}

/* 9 ── Like button heart animation */
@keyframes likeHeart {
  0%   { transform:scale(1); }
  25%  { transform:scale(1.4); }
  50%  { transform:scale(0.88); }
  75%  { transform:scale(1.15); }
  100% { transform:scale(1); }
}
.like-anim {
  animation:likeHeart 0.42s cubic-bezier(0.34,1.56,0.64,1) !important;
}

/* ── Play button tap feedback */
@keyframes playTap {
  0%   { transform:scale(1); }
  40%  { transform:scale(0.88); }
  100% { transform:scale(1); }
}
.play-anim {
  animation:playTap 0.18s ease !important;
}
/* CSS :active fallback for instant feel */
#mp-play-btn:active,
#play-main-btn:active,
.pl-play-all-btn:active,
.radio-btn.main:active {
  transform:scale(0.91) !important;
  transition:transform 0.08s ease !important;
}

/* 10 ── Spacing consistency */
.section          { padding:24px 16px 0 !important; }
.home-hero        { padding:28px 16px 8px !important; }
.lib-head         { padding:28px 16px 16px !important; }
.search-top       { padding:12px 16px !important; }
.row-item         { padding:12px 16px !important; }
.playlist-card    { padding:12px 16px !important; }

/* 11 ── Track card hover depth */
.track-art {
  transition:transform 0.22s cubic-bezier(0.34,1.56,0.64,1),
             box-shadow 0.22s ease !important;
}
.track-card:hover .track-art {
  transform:scale(0.96) translateY(-3px) !important;
  box-shadow:0 10px 28px rgba(0,0,0,0.45) !important;
}
.track-play-overlay {
  backdrop-filter:blur(2px);
}

/* 12 ── Browse genre grid enhanced */
.browse-item {
  height:90px !important;
  border-radius:14px !important;
  background:linear-gradient(135deg,var(--s2) 0%,var(--s3) 100%) !important;
  font-size:15px !important;
  font-weight:600 !important;
  transition:transform 0.18s ease, box-shadow 0.18s ease,
             border-color 0.18s ease !important;
}
.browse-item:hover {
  transform:translateY(-2px) !important;
  box-shadow:0 8px 20px rgba(0,0,0,0.35) !important;
  border-color:var(--border-gold) !important;
}
.browse-item:active {
  transform:scale(0.95) !important;
}

/* 13 ── Bottom nav gold ambient glow */
.app-nav {
  background:rgba(9,9,11,0.96) !important;
  box-shadow:0 -1px 0 var(--border),
             0 -20px 60px rgba(212,175,55,0.04) !important;
}

/* 14 ── Header glass depth */
.app-head {
  background:rgba(9,9,11,0.90) !important;
  box-shadow:0 1px 0 var(--border),
             0 8px 32px rgba(0,0,0,0.28) !important;
}

/* 15 ── Playlist cards smooth hover */
.playlist-card {
  transition:background 0.15s ease, transform 0.15s ease !important;
  border-radius:12px;
}
.playlist-card:hover {
  background:rgba(255,255,255,0.04) !important;
  transform:translateX(3px) !important;
}

/* 16 ── Row items hover */
.row-item {
  border-radius:10px;
  transition:background 0.15s ease !important;
}
.row-item:hover {
  background:rgba(255,255,255,0.04) !important;
}

/* 17 ── Search field premium */
.search-field {
  border-radius:14px !important;
  padding:12px 18px !important;
  background:rgba(19,19,22,0.9) !important;
  border:1px solid rgba(255,255,255,0.07) !important;
  backdrop-filter:blur(8px);
}
.search-field:focus-within {
  border-color:rgba(212,175,55,0.35) !important;
  box-shadow:0 0 0 3px rgba(212,175,55,0.08) !important;
}

/* 18 ── pl-cover (playlist card art) sizing */
.pl-cover {
  width:56px;
  height:56px;
  border-radius:10px !important;
  flex-shrink:0;
  overflow:hidden;
}

/* 19 ── Playlist overlay hero artwork glow */
#pl-hero-art {
  box-shadow:0 16px 48px rgba(0,0,0,0.6) !important;
  border-radius:16px;
  overflow:hidden;
}

/* 20 ── Toast premium */
.toast {
  background:rgba(20,20,22,0.95) !important;
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.1) !important;
  box-shadow:0 8px 24px rgba(0,0,0,0.4) !important;
  font-weight:500 !important;
  padding:13px 22px !important;
}

/* 21 ── Artist card in catalog */
.track-card .track-art[style*="grid"] {
  border-radius:14px !important;
  overflow:hidden;
}

/* 22 ── Smooth button transitions globally */
button {
  transition:transform 0.15s ease, background 0.15s ease,
             box-shadow 0.15s ease, border-color 0.15s ease !important;
}
button:active:not(:disabled) {
  transform:scale(0.95) !important;
}

/* 23 ── Reduce dead black: home hero gradient fill */
#view-home {
  background:linear-gradient(180deg,#0f0e13 0%,#09090B 18%) !important;
}
#view-search {
  background:linear-gradient(180deg,#0c0c11 0%,#09090B 16%) !important;
}

/* 24 ── Search slider dots clickable area */
#search-slider-dots {
  pointer-events:all !important;
}

/* 25 ── Full player background depth */
.player {
  background:linear-gradient(180deg,#0c0c12 0%,#060608 100%) !important;
}


/* ── PLAYLIST SECONDARY ACTIONS ─────────────────────────────────── */
#pl-secondary-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
  padding:0 20px 12px;
}
.pl-sec-btn {
  width:44px;height:44px;
  border-radius:50%;
  background:none;
  border:none;
  color:var(--t2);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.pl-sec-btn:hover {
  color:var(--t1);
  background:rgba(255,255,255,0.06);
}
.pl-sec-btn:active { transform:scale(0.88); }
.pl-sec-btn.pl-fav-on { color:var(--gold); }

/* ── FULL PLAYER EXTRA ACTIONS ──────────────────────────────────── */
.player-extra-actions {
  display:flex;
  align-items:center;
  justify-content:space-around;
  padding:8px 20px 4px;
  margin-top:4px;
}
.player-extra-btn {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  background:none;
  border:none;
  color:var(--t3);
  cursor:pointer;
  font-family:inherit;
  font-size:10px;
  font-weight:500;
  letter-spacing:0.04em;
  padding:8px 12px;
  border-radius:12px;
  transition:color 0.18s ease, background 0.18s ease, transform 0.15s ease;
  min-width:64px;
}
.player-extra-btn:hover {
  color:var(--t1);
  background:rgba(255,255,255,0.06);
}
.player-extra-btn:active { transform:scale(0.9); }
.player-extra-btn svg { flex-shrink:0; }

/* ── LIBRARY DOWNLOADS ──────────────────────────────────────────── */
#lib-downloads .row-item { transition:background 0.15s; border-radius:10px; }

/* ── RECENT SEARCHES ────────────────────────────────────────────── */
#recent-searches-section { margin-bottom:8px; }




/* ── SEARCH VIEW: inline (niet sticky) ──────────────────────── */


/* ── HIDE SEARCH-TOP STICKY (safety net) ──────────────────── */


/* ── SEARCH CLEAR BUTTON ────────────────────────────────────── */
#search-clear-btn {
  opacity:0.7;
  transition:opacity 0.15s;
}
#search-clear-btn:hover { opacity:1; }

/* ── NAV: 4 tabs instead of 5 — equal width ─────────────────── */
.app-nav { gap:0; }
.nav-btn { flex:1; }


/* ── PLAYLIST TRACK HEART BUTTON ────────────────────────────── */
.pl-like-track-btn { transition:color 0.18s ease, transform 0.18s ease !important; }
.pl-like-track-btn:hover { color:var(--gold) !important; }
.pl-like-track-btn:active { transform:scale(0.85) !important; }

/* ── DOWNLOAD PROGRESS OVERLAY ──────────────────────────────── */
#dl-progress-overlay { pointer-events:none; }


/* ── ANTI-ZOOM ─────────────────────────────────────────────── */
html { touch-action: manipulation; }
* { touch-action: manipulation; }
input, textarea, select { touch-action: auto; }
/* Allow scroll in scrollable areas */
.h-scroll, .view, #lib-playlists, #lib-tracks, #lib-artists, #lib-downloads,
#player-inner, .player-inner, #lib-slide-strip, .search-results-area {
  touch-action: pan-y;
}
.h-scroll, #lib-slide-strip { touch-action: pan-x; }


/* ── LIGHT MODE CRITICAL FIXES ───────────────────────────────── */
body.light-mode .app-head { background:rgba(245,243,239,0.97) !important; border-bottom-color:rgba(0,0,0,0.08); }
body.light-mode .home-hero { color:var(--t1); }
body.light-mode .home-time, body.light-mode .home-greeting { color:var(--t1); }
body.light-mode .sec-title { color:var(--t1); }
body.light-mode .track-name { color:var(--t1); }
body.light-mode .track-by { color:var(--t2); }
body.light-mode .browse-item { background:var(--s2); color:var(--t2); border-color:var(--border); }
body.light-mode .row-item { border-bottom-color:var(--border); }
body.light-mode .row-title { color:var(--t1); }
body.light-mode .row-sub { color:var(--t2); }
body.light-mode .pl-name { color:var(--t1); }
body.light-mode .pl-meta { color:var(--t2); }
body.light-mode .profile-name { color:var(--t1); }
body.light-mode .upgrade-banner { background:linear-gradient(135deg,rgba(212,175,55,0.1),rgba(212,175,55,0.05)); }
body.light-mode .pm-item { border-bottom-color:var(--border); }
body.light-mode .pm-text { color:var(--t1); }
body.light-mode .controls-main .ctrl-btn { color:var(--t2); }
body.light-mode .play-main { background:var(--t1); color:var(--bg); }
body.light-mode .player-bg { display:none; }
body.light-mode #player-overlay { background:var(--bg) !important; }
body.light-mode .player-inner { background:var(--bg); }
body.light-mode .track-title-big { color:var(--t1) !important; }
body.light-mode .track-artist-big { color:var(--t2) !important; }
body.light-mode .like-btn { color:var(--t2); }
body.light-mode .like-btn.liked { color:var(--gold); }
body.light-mode .progress-track { background:rgba(0,0,0,0.12) !important; }
body.light-mode .progress-fill { background:var(--t1) !important; }
body.light-mode .mp-title { color:var(--t1); }
body.light-mode .mp-artist { color:var(--t2); }
body.light-mode .mini-player { background:rgba(245,243,239,0.97) !important; }


/* ── ONBOARDING FOOTER BUTTONS STACK ────────────────────────── */
.ob-footer { display:flex; flex-direction:column; gap:0; }
.ob-footer .btn-next { width:100%; }

.progress-fill::after{content:'';position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:12px;height:12px;border-radius:50%;background:var(--t1);box-shadow:0 0 4px rgba(0,0,0,0.4)}
.progress-track:active{height:6px;margin-top:-1px}
.progress-track.scrubbing{height:6px;margin-top:-1px}
.progress-track.scrubbing .progress-fill::after{width:16px;height:16px;right:-8px}

/* ── FASTER TOUCH RESPONSE ─────────────────────────────────── */
button, .nav-btn, .ctrl-btn, .play-main, .mp-btn, .pl-sec-btn, .player-extra-btn,
.row-item, .track-card, .playlist-card, .pm-item, .lib-tab, .browse-item,
.sett-row, .alert-filter-btn, .vinyl-wrap {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
button:active, .nav-btn:active { opacity: 0.65; transform: scale(0.95); }
.ctrl-btn:active { transform: scale(0.88); }
.play-main:active { transform: scale(0.93); }
.mp-btn:active { transform: scale(0.88); }
.track-card:active, .playlist-card:active { transform: scale(0.97); opacity: 0.85; }
.row-item:active { background: var(--s2); }
.browse-item:active { opacity: 0.7; }
.lib-tab:active { opacity: 0.7; }


/* ── HOME LP RADIO WIDGET ──────────────────────────────────────────────────── */
.home-hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.home-hero-text { flex: 1; min-width: 0; }

.home-lp-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 52px;
}

.home-lp-disc {
  animation: lp-spin 8s linear infinite;
  animation-play-state: paused;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.8));
  margin-bottom: 5px;
}

@keyframes lp-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


/* ── Home LP disc: wit in dark mode, zwart in light mode ── */
.home-lp-disc svg circle:nth-child(1){fill:#eeeeee}
.home-lp-disc svg circle:nth-child(2){stroke:#bbbbbb}
.home-lp-disc svg circle:nth-child(3){stroke:#bbbbbb}
.home-lp-disc svg circle:nth-child(4){stroke:#999999}
.home-lp-disc svg circle:nth-child(5){stroke:#999999}
body.light-mode .home-lp-disc svg circle:nth-child(1){fill:#111111}
body.light-mode .home-lp-disc svg circle:nth-child(2){stroke:#1d1d1d}
body.light-mode .home-lp-disc svg circle:nth-child(3){stroke:#1d1d1d}
body.light-mode .home-lp-disc svg circle:nth-child(4){stroke:#222222}
body.light-mode .home-lp-disc svg circle:nth-child(5){stroke:#222222}
body.radio-on .home-lp-disc{animation-play-state:running}
/* Ticker wrapper — clips tekst zodat het buiten beeld verdwijnt */
.home-lp-ticker-wrap {
  width: 52px;
  overflow: hidden;
  position: relative;
}

.home-lp-ticker {
  font-size: 9px;
  font-weight: 600;
  color: var(--t2);
  white-space: nowrap;
  display: inline-block;
  animation: lp-ticker 5s cubic-bezier(0.4,0,0.2,1) infinite;
  will-change: transform, opacity;
}

@keyframes lp-ticker {
  0%   { transform: translateX(110%);  opacity: 0; }
  8%   { transform: translateX(0%);    opacity: 1; }
  75%  { transform: translateX(0%);    opacity: 1; }
  88%  { transform: translateX(-110%); opacity: 0; }
  89%  { transform: translateX(110%);  opacity: 0; }
  100% { transform: translateX(110%);  opacity: 0; }
}

body.light-mode .home-lp-ticker { color: var(--t3); }
body.light-mode .home-lp-disc   { filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3)); }

/* ── MINI-PLAYER: hide on radio page ── */
body.on-radio .mini-player{display:none!important}
body.on-radio .chat-panel{display:none!important}

/* ── STATION CARDS ── */
.station-cards-wrap{display:flex;gap:10px;overflow-x:auto;padding:4px 0 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 -16px;padding-left:16px}
.station-cards-wrap::-webkit-scrollbar{display:none}
.station-card{flex-shrink:0;width:78px;background:var(--s2);border:1px solid var(--border);border-radius:14px;padding:14px 8px 12px;text-align:center;cursor:pointer;position:relative;overflow:hidden;transition:border-color 0.2s,background 0.2s;-webkit-tap-highlight-color:transparent}
.station-card.station-active{border-color:rgba(212,175,55,0.4);background:rgba(212,175,55,0.06)}
.station-card.station-soon{cursor:default}
.station-card-freq{font-size:10px;font-weight:800;color:var(--gold);letter-spacing:0.08em;margin-bottom:5px;text-transform:uppercase}
.station-card-name{font-size:12px;font-weight:600;color:var(--t1);white-space:nowrap}
.station-live-pill{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:7px;font-size:9px;font-weight:700;color:var(--gold);letter-spacing:0.08em;text-transform:uppercase}
.station-live-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);animation:blink 1.4s ease-in-out infinite}
.station-soon-overlay{position:absolute;inset:0;background:rgba(6,6,6,0.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:var(--t3);letter-spacing:0.1em;text-transform:uppercase;border-radius:13px}

/* ── INLINE RADIO CHAT ── */
.radio-chat-inline{background:var(--s2);border:1px solid var(--border);border-radius:16px;overflow:hidden;margin-top:4px;margin-bottom:24px}
.radio-chat-msgs{height:260px;overflow-y:auto;padding:14px 14px 8px;display:flex;flex-direction:column;gap:8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.radio-chat-msgs::-webkit-scrollbar{display:none}
.radio-chat-empty{text-align:center;color:var(--t3);font-size:12px;padding:32px 16px;flex:1;display:flex;align-items:center;justify-content:center}
.radio-inline-msg{display:flex;flex-direction:column;gap:2px}
.radio-inline-msg-name{font-size:10px;font-weight:700;color:var(--gold);letter-spacing:0.04em}
.radio-inline-msg-name.is-dj{color:#f87171}
.radio-inline-msg-text{font-size:13px;color:var(--t1);line-height:1.45;word-break:break-word}
.radio-inline-msg-time{font-size:10px;color:var(--t3)}
.radio-chat-input-wrap{display:flex;gap:8px;align-items:center;padding:10px 12px;border-top:1px solid var(--border);background:var(--s1)}
.radio-chat-inp{flex:1;background:var(--s2);border:1px solid var(--border);border-radius:999px;padding:10px 16px;color:var(--t1);font-family:inherit;font-size:14px;outline:none;transition:border-color 0.2s;-webkit-tap-highlight-color:transparent}
.radio-chat-inp:focus{border-color:rgba(212,175,55,0.4)}
.radio-chat-inp::placeholder{color:var(--t3)}
.radio-chat-send{width:38px;height:38px;border-radius:50%;background:var(--gold);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;-webkit-tap-highlight-color:transparent;transition:opacity 0.15s}
.radio-chat-send:active{opacity:0.75}
.radio-chat-send svg{stroke:#000}
.radio-chat-login-hint{font-size:12px;color:var(--t3);text-align:center;padding:10px 12px;border-top:1px solid var(--border)}

/* ── LYRICS / ARTWORK FLIP CHIPS ── */
.lyrics-chip{position:absolute;bottom:12px;right:12px;background:rgba(6,6,6,0.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.14);border-radius:999px;padding:7px 14px;font-size:11px;font-weight:600;color:rgba(240,236,228,0.85);cursor:pointer;transition:opacity 0.15s,background 0.15s;-webkit-tap-highlight-color:transparent;z-index:4;letter-spacing:0.04em}
.lyrics-chip:active{opacity:0.7}
.artwork-chip{background:rgba(20,16,10,0.85);border-color:rgba(212,175,55,0.25);color:var(--gold)}

/* iOS flip: gebruik display toggle ipv 3D transform */

/* ═══════════════════════════════════════════════════════════
   CANVAS PLAYER — Spotify Canvas-style animated player card
   Animates ONLY inside the player overlay, not the full app
   ═══════════════════════════════════════════════════════════ */

/* Stack order inside .player-bg */
.player-bg-color { z-index: 1; }
#canvas-video, #canvas-img-bg, #canvas-nxxt-bg { position: absolute; inset: 0; z-index: 2; }
.player-bg-blur  { z-index: 3; }
.player-bg-noise { z-index: 4; }

/* Canvas elements - hidden by default */
#canvas-video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: none;
}
#canvas-img-bg {
  width: 100%; height: 100%;
  object-fit: cover;
  display: none;
  transform-origin: center center;
  will-change: transform;
}
#canvas-nxxt-bg {
  display: none;
}

/* === ACTIVE STATES === */
#canvas-video.active   { display: block; }
#canvas-img-bg.active  { display: block; }
#canvas-nxxt-bg.active { display: block; }

/* Slow zoom-drift for static album art — GPU-only transforms */
@keyframes canvasDrift {
  0%   { transform: scale(1.08) translate(-1.5%,  0.5%); }
  20%  { transform: scale(1.12) translate( 1.0%, -1.0%); }
  40%  { transform: scale(1.10) translate(-0.5%,  1.5%); }
  60%  { transform: scale(1.13) translate( 1.5%, -0.5%); }
  80%  { transform: scale(1.09) translate(-1.0%,  1.0%); }
  100% { transform: scale(1.08) translate( 0.5%, -0.8%); }
}

/* NXXT branded animated gradient — fallback when no artwork */
#canvas-nxxt-bg {
  background: linear-gradient(
    135deg,
    #0a0a0f 0%,
    #1c1005 20%,
    #0d0215 50%,
    #060d1a 75%,
    #0a0a0f 100%
  );
  background-size: 300% 300%;
}
@keyframes nxxtPulse {
  0%   { background-position: 0%   0%;   filter: brightness(0.9) hue-rotate(0deg); }
  33%  { background-position: 100% 50%;  filter: brightness(1.05) hue-rotate(12deg); }
  66%  { background-position: 50%  100%; filter: brightness(0.95) hue-rotate(-8deg); }
  100% { background-position: 0%   0%;   filter: brightness(0.9) hue-rotate(0deg); }
}

/* === PLAYER WHEN CANVAS IS ACTIVE === */
.player.canvas-active .player-bg-color {
  opacity: 0 !important;
}
/* Replace the flat dark overlay with a readability gradient */
.player.canvas-active .player-bg-blur {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: linear-gradient(
    to bottom,
    rgba(6,6,6,0.80) 0%,
    rgba(6,6,6,0.24) 12%,
    rgba(6,6,6,0.06) 28%,
    rgba(6,6,6,0.04) 52%,
    rgba(6,6,6,0.20) 68%,
    rgba(6,6,6,0.72) 83%,
    rgba(6,6,6,0.95) 100%
  ) !important;
}

/* Artwork card: frosted glass over the canvas */
.player.canvas-active .artwork-front {
  background: rgba(255,255,255,0.035) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.10),
    0 12px 48px rgba(0,0,0,0.35) !important;
  backdrop-filter: blur(16px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.5) !important;
}
/* Ghost album art inside the card — canvas is the real artwork */
.player.canvas-active #player-art-img {
  opacity: 0.15;
  filter: blur(2px) saturate(0.6);
  transition: opacity 0.6s ease, filter 0.6s ease;
}
/* Placeholder transparent when canvas active */
.player.canvas-active .artwork-placeholder {
  background: transparent !important;
}
/* Keep lyrics chip visible */
.player.canvas-active .lyrics-chip {
  background: rgba(6,6,6,0.55) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Smooth entry transition on canvas elements */
#canvas-video, #canvas-img-bg, #canvas-nxxt-bg {
  opacity: 0;
  transition: opacity 0.8s ease;
}
#canvas-video.active, #canvas-img-bg.active, #canvas-nxxt-bg.active {
  opacity: 1;
}

/* ── LYRICS OVERLAY (replaces artwork-flipper square) ── */
.lyrics-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(6,6,6,0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  flex-direction: column;
  padding: calc(var(--safe-top,0) + 56px) 28px 28px;
  animation: lyricsSlideUp 0.32s cubic-bezier(0.32,0.72,0,1);
}
.lyrics-overlay.open { display: flex; }
@keyframes lyricsSlideUp {
  from { transform: translateY(30px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.lyrics-overlay-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-shrink: 0;
}
.lyrics-close-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08);
  border: none; border-radius: 50%;
  cursor: pointer; color: var(--t1);
  transition: background 0.15s;
}
.lyrics-close-btn:hover { background: rgba(255,255,255,0.14); }
.lyrics-close-btn svg { width: 16px; height: 16px; }
/* Active state for Tekst button */
.player-queue-btn.lyrics-active {
  background: rgba(212,175,55,0.18) !important;
  color: var(--gold) !important;
}
/* Canvas spacer — takes space where artwork was, canvas shows through */
.canvas-spacer {
  flex: 1;
  min-height: 0;
}


/* ═══ TRACK DETAIL — PREMIUM REDESIGN ═══ */
.td-overlay {
  position: fixed; inset: 0; z-index: 540;
  background: #050507;
  transform: translateY(100%);
  transition: transform 0.42s cubic-bezier(0.32,0.72,0,1);
  display: flex; flex-direction: column;
  pointer-events: none; overflow: hidden;
}
.td-overlay.open { transform: translateY(0); pointer-events: all; }
.td-bg-blur {
  position: absolute; inset: -40px; z-index: 0;
  background-size: cover; background-position: center;
  filter: blur(80px) brightness(0.16) saturate(2.2);
  transform: scale(1.15);
  opacity: 0.8;
  transition: background-image 0.6s ease;
}
.td-gradient {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(5,5,7,0.25) 0%, rgba(5,5,7,0.65) 35%, rgba(5,5,7,0.93) 65%, #050507 100%);
  pointer-events: none;
}
.td-header {
  position: relative; z-index: 10;
  padding: calc(env(safe-area-inset-top,0px) + 14px) 20px 0;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.td-icon-round {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.09); border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: rgba(255,255,255,0.75);
  transition: background 0.15s, transform 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.td-icon-round:active { background: rgba(255,255,255,0.18); transform: scale(0.88); }
.td-scroll {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  position: relative; z-index: 5;
}
.td-artwork-wrap {
  width: calc(100% - 48px); max-width: 300px;
  aspect-ratio: 1; margin: 18px auto 0;
  border-radius: 24px; overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 32px 80px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.04);
  flex-shrink: 0;
  animation: td-rise 0.55s cubic-bezier(0.22,1,0.36,1) both;
}
.td-art { width: 100%; height: 100%; object-fit: cover; display: block; }
.td-art-ph {
  width: 100%; height: 100%; display: flex;
  align-items: center; justify-content: center;
  background: #111114; color: rgba(255,255,255,0.12);
}
.td-info {
  padding: 22px 24px 0;
  animation: td-rise 0.55s 0.07s cubic-bezier(0.22,1,0.36,1) both;
}
.td-title {
  font-size: 24px; font-weight: 800; color: #fff;
  letter-spacing: -0.03em; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.td-artist-link {
  font-size: 15px; color: rgba(255,255,255,0.5);
  margin-top: 5px; cursor: pointer;
  transition: color 0.15s;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: inline-block; max-width: 100%;
  -webkit-tap-highlight-color: transparent;
}
.td-artist-link:hover { color: rgba(255,255,255,0.85); text-decoration: underline; text-underline-offset: 3px; }
.td-artist-link:active { color: #fff; }
.td-chips { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.td-chip {
  font-size: 10px; font-weight: 700; letter-spacing: 0.07em;
  padding: 4px 10px; border-radius: 4px;
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
}
.td-chip.gold { background: rgba(212,175,55,0.12); color: var(--gold); }
.td-stats-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; flex-wrap: wrap;
  font-size: 12px; color: rgba(255,255,255,0.32);
}
.td-dot { color: rgba(255,255,255,0.18); }
.td-actions {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; padding: 26px 24px 0;
  animation: td-rise 0.55s 0.13s cubic-bezier(0.22,1,0.36,1) both;
}
.td-play-main {
  display: flex; align-items: center; gap: 10px;
  background: var(--gold); color: #0a0a0a;
  border: none; border-radius: 6px;
  padding: 14px 36px; font-size: 15px; font-weight: 800;
  cursor: pointer; font-family: inherit; letter-spacing: 0.01em;
  transition: transform 0.14s, box-shadow 0.14s, filter 0.14s;
  box-shadow: 0 4px 20px rgba(212,175,55,0.3);
  flex-shrink: 0; -webkit-tap-highlight-color: transparent;
}
.td-play-main:active { transform: scale(0.95); box-shadow: 0 2px 8px rgba(212,175,55,0.2); }
.td-icon-btn {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,0.07); border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: rgba(255,255,255,0.6);
  transition: background 0.15s, transform 0.12s, color 0.15s;
  flex-shrink: 0; -webkit-tap-highlight-color: transparent;
}
.td-icon-btn:active { transform: scale(0.87); background: rgba(255,255,255,0.15); }
.td-icon-btn.liked { color: #f43f5e; background: rgba(244,63,94,0.14); }
.td-icon-btn.liked svg { fill: #f43f5e; stroke: #f43f5e; }
.td-section {
  padding: 28px 0 0;
  animation: td-rise 0.55s 0.2s cubic-bezier(0.22,1,0.36,1) both;
}
.td-section-head {
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.4);
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0 24px 14px;
}
.td-section-head span { color: rgba(255,255,255,0.75); }
.td-more-scroll { padding: 0 20px; gap: 12px; }
.td-mini-card {
  flex-shrink: 0; width: 120px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.td-mini-art {
  width: 120px; height: 120px; border-radius: 12px;
  background: #111; overflow: hidden; margin-bottom: 8px;
  transition: transform 0.2s; box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.td-mini-card:active .td-mini-art { transform: scale(0.94); }
.td-mini-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.td-mini-title { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-mini-artist { font-size: 11px; color: rgba(255,255,255,0.38); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.td-related-row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 24px; cursor: pointer;
  transition: background 0.15s; -webkit-tap-highlight-color: transparent;
}
.td-related-row:active { background: rgba(255,255,255,0.06); }
.td-related-art {
  width: 46px; height: 46px; border-radius: 8px;
  background: #111; flex-shrink: 0; overflow: hidden;
}
.td-related-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.td-related-info { flex: 1; min-width: 0; }
.td-related-title { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.88); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-related-artist { font-size: 12px; color: rgba(255,255,255,0.38); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-related-play {
  width: 32px; height: 32px; border-radius: 50%;
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.35); display: flex; align-items: center; justify-content: center;
  transition: color 0.15s; flex-shrink: 0;
}
.td-related-play:hover { color: rgba(255,255,255,0.8); }
@keyframes td-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════
   ARTIST PROFILE — Spotify-inspired
   ═══════════════════════════════════════════════ */
.ap-overlay{position:fixed;inset:0;z-index:550;background:#060606;transform:translateY(100%);transition:transform 0.42s cubic-bezier(0.32,0.72,0,1);display:flex;flex-direction:column;pointer-events:none;overflow:hidden}
#artist-page-overlay.open{transform:translateY(0);pointer-events:all}
.ap-topbar{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top,0px) + 8px) 16px 12px;background:transparent;transition:background 0.25s;pointer-events:none}
.ap-topbar.ap-topbar-visible{background:rgba(6,6,6,0.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);pointer-events:all}
.ap-topbar-name{font-size:16px;font-weight:700;color:var(--t1);opacity:0;transition:opacity 0.25s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;text-align:center;padding:0 8px}
.ap-topbar.ap-topbar-visible .ap-topbar-name{opacity:1}
.ap-back-btn{width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,0.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;pointer-events:all;flex-shrink:0}
.ap-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.ap-banner{height:240px;position:relative;background-size:cover;background-position:center top;background-color:var(--s2);flex-shrink:0}
.ap-banner::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.55) 60%,#060606 100%)}
.ap-banner-back{position:absolute;top:calc(env(safe-area-inset-top,0px) + 10px);left:16px;z-index:5;width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,0.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff}
.ap-profile{padding:0 20px 20px;text-align:center;position:relative;margin-top:-56px;z-index:2}
.ap-avatar-wrap{width:110px;height:110px;border-radius:50%;margin:0 auto 14px;position:relative;background:var(--s2);border:3px solid #060606}
.ap-avatar{width:110px;height:110px;border-radius:50%;object-fit:cover;display:block}
.ap-avatar-ph{width:110px;height:110px;border-radius:50%;background:var(--s2);display:flex;align-items:center;justify-content:center;color:var(--t3)}
.ap-verified-badge{position:absolute;bottom:4px;right:4px;width:28px;height:28px;border-radius:50%;background:var(--bg);border:2px solid var(--bg);display:flex;align-items:center;justify-content:center}
.ap-name-wrap{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.ap-name{font-size:26px;font-weight:800;color:var(--t1);letter-spacing:-0.02em;margin:0;line-height:1.1}
.ap-ai-tag{font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);background:rgba(212,175,55,0.1);border:1px solid rgba(212,175,55,0.25);border-radius:999px;padding:3px 8px;flex-shrink:0}
.ap-stats-row{display:flex;align-items:center;justify-content:center;margin:14px 0}
.ap-stat{display:flex;flex-direction:column;align-items:center;gap:2px;padding:0 16px}
.ap-stat span:first-child{font-size:16px;font-weight:700;color:var(--t1)}
.ap-stat-lbl{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:0.07em}
.ap-stat-divider{width:1px;height:30px;background:rgba(255,255,255,0.1)}
.ap-actions{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:4px}
.ap-follow-btn{display:flex;align-items:center;gap:6px;padding:10px 24px;border-radius:999px;border:1.5px solid var(--gold);background:transparent;color:var(--gold);font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:all 0.2s}
.ap-follow-btn.following{background:var(--gold);color:#0a0a0a;border-color:var(--gold)}
.ap-playall-btn{display:flex;align-items:center;gap:8px;padding:10px 20px;border-radius:999px;background:rgba(255,255,255,0.1);border:none;color:var(--t1);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
.ap-section{padding:8px 0 0}
.ap-sec-title{font-size:18px;font-weight:700;color:var(--t1);padding:14px 20px 8px}
.ap-track-row{display:flex;align-items:center;padding:10px 20px;gap:14px;cursor:pointer;transition:background 0.15s;-webkit-tap-highlight-color:transparent}
.ap-track-row:active,.ap-track-row:hover{background:rgba(255,255,255,0.05)}
.ap-track-num{font-size:14px;font-weight:500;color:var(--t3);width:20px;text-align:center;flex-shrink:0}
.ap-track-art{width:48px;height:48px;border-radius:8px;background:var(--s2);flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
.ap-track-info{flex:1;min-width:0}
.ap-track-title{font-size:15px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-track-meta{font-size:12px;color:var(--t3);margin-top:2px}
.ap-track-play{background:none;border:none;color:var(--t2);cursor:pointer;padding:8px;flex-shrink:0;display:flex;align-items:center}
.ap-track-play svg{width:18px;height:18px}
.ap-release-card{flex-shrink:0;width:130px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ap-release-card:active{opacity:0.75}
.ap-release-art{width:130px;height:130px;border-radius:12px;background:var(--s2);overflow:hidden;margin-bottom:8px}
.ap-release-title{font-size:12px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-release-year{font-size:11px;color:var(--t3);margin-top:2px}
.ap-radio-card{margin:0 20px;background:var(--s1);border:1px solid var(--border);border-radius:16px;padding:20px}
.ap-radio-row{display:flex;margin-bottom:16px}
.ap-radio-stat{flex:1;text-align:center}
.ap-radio-val{font-size:22px;font-weight:700;color:var(--t1)}
.ap-radio-lbl{font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:0.07em;margin-top:2px}
.ap-radio-bar-label{font-size:11px;color:var(--t3);margin-bottom:8px}
.ap-radio-bars{display:flex;align-items:flex-end;gap:4px;height:44px}
.ap-radio-bar{flex:1;border-radius:3px 3px 0 0;background:var(--gold);opacity:0.65;min-height:4px}
.ap-bio-text{font-size:14px;color:var(--t2);line-height:1.7;padding:0 20px;margin-bottom:8px}

/* ═══════════════════════════════════════════════
   PLAYLIST HERO — blurred background/* ═══════════════════════════════════════════════
   PLAYLIST HERO — blurred background
   ═══════════════════════════════════════════════ */
#pl-hero {
  position: relative;
  overflow: hidden;
}
#pl-hero-blur-bg {
  position: absolute;
  inset: -30px;
  background-size: cover;
  background-position: center;
  filter: blur(32px) brightness(0.3) saturate(1.5);
  transform: scale(1.2);
  z-index: 0;
  transition: background-image 0.8s ease;
}
#pl-hero-gradient,
#pl-hero-art,
#pl-hero-title,
#pl-hero-meta {
  position: relative;
  z-index: 1;
}

/* ═══════════════════════════════════════════════
   SLEEP TIMER MODAL
   ═══════════════════════════════════════════════ */
.sleep-modal {
  display: none; position: fixed; inset: 0; z-index: 600;
  background: rgba(0,0,0,0.75); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-items: flex-end; justify-content: center;
}
.sleep-modal.open { display: flex; }
.sleep-sheet {
  background: var(--s1); border-radius: 20px 20px 0 0;
  width: 100%; max-width: 500px;
  padding: 12px 0 calc(env(safe-area-inset-bottom,0px) + 24px);
  border-top: 1px solid var(--border);
  animation: sleepSlideUp 0.3s cubic-bezier(0.32,0.72,0,1);
}
@keyframes sleepSlideUp {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.sleep-handle {
  width: 36px; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,0.15);
  margin: 0 auto 16px;
}
.sleep-title {
  font-size: 15px; font-weight: 700; color: var(--t1);
  text-align: center; margin-bottom: 16px;
}
.sleep-active-banner {
  display: flex; align-items: center; gap: 8px;
  margin: 0 20px 12px; padding: 10px 14px;
  background: rgba(212,175,55,0.1);
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: 10px;
  font-size: 13px; color: var(--gold);
}
.sleep-active-banner svg { stroke: var(--gold); flex-shrink: 0; }
.sleep-active-banner span { flex: 1; font-weight: 600; }
.sleep-cancel-btn {
  background: none; border: none; color: var(--t3);
  font-size: 12px; cursor: pointer; font-family: inherit;
  text-decoration: underline; padding: 0;
}
.sleep-options { display: flex; flex-direction: column; }
.sleep-opt {
  padding: 16px 24px; background: none; border: none;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  color: var(--t1); font-size: 15px; text-align: left;
  cursor: pointer; font-family: inherit; transition: background 0.15s;
}
.sleep-opt:last-child { border-bottom: none; }
.sleep-opt:hover { background: rgba(255,255,255,0.05); }
.sleep-opt.active { color: var(--gold); font-weight: 600; }

/* Sleep timer button in player extra actions */
.player-extra-btn.sleep-active { color: var(--gold) !important; }

/* Onboarding slide-0 titelrij */
.ob-slide0-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:0}
.ob-slide0-head .ob-title{margin-bottom:0;flex:1}
.ob-inline-btn{flex-shrink:0;background:none;border:none;color:var(--gold);font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;cursor:pointer;padding:6px 0;white-space:nowrap;align-self:center}
.ob-inline-btn:active{opacity:0.7}

/* Footer verwijderd — navigatie via inline knoppen */

#onboard .ob-footer{display:none!important}

/* Doorgaan-knop in header */
.ob-next-btn{background:none;border:none;color:var(--gold);font-family:'DM Sans',sans-serif;font-size:15px;font-weight:700;cursor:pointer;padding:8px 0 8px 12px;white-space:nowrap;flex-shrink:0;letter-spacing:0.01em}
.ob-next-btn:active{opacity:0.6}
.ob-next-btn:disabled{opacity:0.3;cursor:not-allowed}

/* Minimale SVG-icoontjes op behavior cards */
.b-svg{width:22px;height:22px;stroke:var(--gold);flex-shrink:0;transition:stroke 0.2s}
.b-card.sel .b-svg{stroke:var(--gold)}


/* ── Profile Avatar Button ─────────────────────────── */
.profile-avatar-btn{width:36px;height:36px;border-radius:50%;background:var(--s2);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t2);flex-shrink:0;transition:border-color 0.2s;overflow:hidden}
.profile-avatar-btn:active{opacity:0.8}
.profile-avatar-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden}
.profile-avatar-inner img{width:100%;height:100%;object-fit:cover;border-radius:50%}

/* ── Profile Slide Menu ────────────────────────────── */
.profile-slide-menu{position:fixed;top:0;right:-100%;bottom:0;width:min(320px,90vw);z-index:600;background:var(--s1);transition:right 0.32s cubic-bezier(0.32,0.72,0,1);display:flex;flex-direction:column;border-left:1px solid var(--border);overflow:hidden}
.profile-slide-menu.open{right:0}
.profile-menu-backdrop{position:fixed;inset:0;z-index:599;background:rgba(0,0,0,0);pointer-events:none;transition:background 0.32s}
.profile-menu-backdrop.show{background:rgba(0,0,0,0.55);pointer-events:all}
.psm-header{display:flex;align-items:center;gap:14px;padding:calc(env(safe-area-inset-top,0px) + 20px) 20px 20px;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--bg)}
.psm-avatar-lg{width:48px;height:48px;border-radius:50%;background:var(--s2);display:flex;align-items:center;justify-content:center;border:2px solid var(--border);color:var(--t3);flex-shrink:0;overflow:hidden}
.psm-user-info{flex:1;min-width:0}
.psm-name{font-size:15px;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.psm-plan{font-size:11px;color:var(--gold);margin-top:2px;font-weight:500}
.psm-close{background:none;border:none;color:var(--t3);cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;border-radius:8px;flex-shrink:0}
.psm-items{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 0 calc(env(safe-area-inset-bottom,0px) + 20px)}
.psm-item{display:flex;align-items:center;gap:14px;padding:14px 20px;cursor:pointer;color:var(--t1);font-size:14px;font-weight:500;transition:background 0.12s;-webkit-tap-highlight-color:transparent}
.psm-item:active{background:var(--s2)}
.psm-item svg{flex-shrink:0;color:var(--t2)}
.psm-danger{color:#ef4444}
.psm-danger svg{stroke:#ef4444}
.psm-divider{height:1px;background:var(--border);margin:8px 20px}

/* ── Feed View ─────────────────────────────────────── */
#view-feed{padding-bottom:0 !important;overflow:hidden !important}
#view-feed.active{display:block !important}
.feed-tabs-bar{display:flex;align-items:center;justify-content:center;gap:0;position:absolute;top:0;left:0;right:0;z-index:10;background:linear-gradient(180deg,rgba(0,0,0,0.6) 0%,transparent 100%);border-bottom:none;padding:8px 8px 28px}
.feed-tab{flex:1;padding:10px 8px;border:none;background:none;color:rgba(255,255,255,0.5);font-size:14px;font-weight:700;letter-spacing:0.02em;cursor:pointer;border-bottom:2px solid transparent;transition:all 0.2s;font-family:inherit;text-shadow:0 1px 4px rgba(0,0,0,0.8)}
.feed-tab.active{color:#fff;border-bottom-color:rgba(255,255,255,0.85);text-shadow:0 1px 6px rgba(0,0,0,0.9)}
.feed-container{position:absolute;inset:0;overflow-y:scroll;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}
.feed-container::-webkit-scrollbar{display:none}
.feed-card{position:relative;width:100%;overflow:hidden;scroll-snap-align:start;display:flex;align-items:flex-end;background:#0a0a0a}
.feed-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-color:#111}
.feed-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.25) 0%,transparent 30%,transparent 50%,rgba(0,0,0,0.7) 80%,rgba(0,0,0,0.9) 100%)}
.feed-info{position:absolute;bottom:0;left:0;right:72px;padding:20px 16px 20px;z-index:2}
.feed-song-title{font-size:17px;font-weight:700;color:#fff;line-height:1.2;margin-bottom:4px}
.feed-song-artist{font-size:13px;color:rgba(255,255,255,0.7);cursor:pointer;display:inline-block}
.feed-song-artist:active{opacity:0.8}
.feed-song-genre{display:inline-block;margin-top:6px;font-size:11px;color:rgba(255,255,255,0.5);background:rgba(255,255,255,0.1);border-radius:999px;padding:3px 10px;border:1px solid rgba(255,255,255,0.12)}
.feed-follow-pill{display:inline-flex;align-items:center;padding:4px 16px;border-radius:999px;border:1.5px solid rgba(255,255,255,0.75);background:transparent;color:#fff;font-size:12px;font-weight:700;cursor:pointer;margin-bottom:8px;font-family:inherit;transition:background 0.25s,color 0.25s,border-color 0.25s;-webkit-tap-highlight-color:transparent}
.feed-play-wrap{position:absolute;bottom:72px;left:50%;transform:translateX(-50%);z-index:3;opacity:0;pointer-events:none;transition:opacity 0.25s}
.feed-play-btn{width:64px;height:64px;border-radius:50%;background:rgba(212,175,55,0.15);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:2px solid rgba(212,175,55,0.6);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--gold);transition:all 0.2s}
.feed-play-btn:active{transform:scale(0.92);background:rgba(212,175,55,0.3);border-color:var(--gold)}
.feed-play-btn svg{width:28px;height:28px;margin-left:3px}
.feed-play-wrap.visible{opacity:1;pointer-events:all}
.feed-dbl-heart{position:absolute;z-index:20;pointer-events:none;width:100px;height:100px;animation:feedHPop 0.8s ease-out forwards}
.feed-dbl-heart svg{width:100px;height:100px}
@keyframes feedHPop{0%{transform:scale(0.2);opacity:0}35%{transform:scale(1.3);opacity:1}65%{transform:scale(1.0);opacity:1}100%{transform:scale(1.1);opacity:0}}
.feed-mgmt-overlay{position:fixed;inset:0;background:var(--bg);z-index:900;display:flex;flex-direction:column;transform:translateY(100%);transition:transform 0.35s cubic-bezier(0.32,0.72,0,1)}
.feed-mgmt-overlay.open{transform:translateY(0)}
.fmo-head{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 12px;border-bottom:1px solid var(--border);flex-shrink:0}
.fmo-title{font-size:18px;font-weight:800;color:var(--t1);letter-spacing:-0.02em}
.fmo-close{background:none;border:none;color:var(--t3);cursor:pointer;font-size:24px;padding:4px 8px;line-height:1;font-family:inherit}
.fmo-tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0}
.fmo-tab{flex:1;padding:12px 8px;background:none;border:none;color:var(--t3);font-size:13px;font-weight:600;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:6px;transition:all 0.2s}
.fmo-tab.active{color:var(--gold);border-bottom-color:var(--gold)}
.fmo-tab svg{width:15px;height:15px;flex-shrink:0}
.fmo-content{flex:1;overflow-y:auto}
.fmo-empty{text-align:center;color:var(--t3);font-size:14px;padding:40px 20px}
.fmo-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border)}
.fmo-item-art{width:44px;height:44px;border-radius:8px;background:var(--s2);flex-shrink:0;overflow:hidden}
.fmo-item-art img{width:100%;height:100%;object-fit:cover}
.fmo-item-info{flex:1;min-width:0}
.fmo-item-title{font-size:14px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fmo-item-sub{font-size:12px;color:var(--t3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fmo-item-del{background:none;border:none;color:var(--t3);cursor:pointer;padding:8px;flex-shrink:0;-webkit-tap-highlight-color:transparent}
.fmo-item-del:active{color:#ef4444}
.fmo-item-del svg{width:18px;height:18px;display:block}
.feed-actions{position:absolute;right:12px;bottom:80px;display:flex;flex-direction:column;align-items:center;gap:20px;z-index:3}
.feed-act{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;color:rgba(255,255,255,0.9);cursor:pointer;font-family:inherit;padding:4px;-webkit-tap-highlight-color:transparent}
.feed-act svg{width:26px;height:26px;filter:drop-shadow(0 1px 3px rgba(0,0,0,0.5))}
.feed-act span{font-size:10px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,0.7)}
.feed-act.active svg{stroke:var(--gold);fill:var(--gold)}
.feed-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:16px;color:var(--t3)}
.feed-empty svg{width:48px;height:48px;stroke:var(--t3);fill:none}
.feed-empty p{font-size:14px}
.feed-comment-sheet{position:fixed;bottom:0;left:0;right:0;height:62vh;background:var(--s1);border-radius:20px 20px 0 0;z-index:1000;display:flex;flex-direction:column;transform:translateY(100%);transition:transform 0.35s cubic-bezier(0.32,0.72,0,1)}
.feed-comment-sheet.open{transform:translateY(0)}
.fcs-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:999;opacity:0;pointer-events:none;transition:opacity 0.3s}
.fcs-backdrop.open{opacity:1;pointer-events:all}
.fcs-drag{width:40px;height:4px;background:var(--border);border-radius:2px;margin:12px auto 0;flex-shrink:0}
.fcs-head{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--border);flex-shrink:0}
.fcs-title{font-size:15px;font-weight:700;color:var(--t1)}
.fcs-close{background:none;border:none;color:var(--t3);cursor:pointer;padding:4px;display:flex;align-items:center}
.fcs-close svg{width:20px;height:20px}
.fcs-list{flex:1;overflow-y:auto;padding:12px 20px}
.fcs-item{margin-bottom:14px}
.fcs-user{font-size:12px;font-weight:700;color:var(--gold);display:block;margin-bottom:2px}
.fcs-text{font-size:14px;color:var(--t1);line-height:1.4}
.fcs-none{text-align:center;color:var(--t3);font-size:14px;padding:24px 0}
.fcs-input-row{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--border);flex-shrink:0;padding-bottom:calc(12px + var(--safe-bot))}
.fcs-input{flex:1;background:var(--s2);border:1px solid var(--border);border-radius:20px;padding:10px 16px;font-size:14px;color:var(--t1);font-family:inherit;outline:none}
.fcs-input:focus{border-color:var(--gold)}
.fcs-send{background:var(--gold);border:none;color:#000;font-size:13px;font-weight:700;padding:10px 18px;border-radius:20px;cursor:pointer;font-family:inherit;flex-shrink:0}

/* ── Radio: hide mini-player ───────────────────────── */
body.on-radio .mini-player{display:none !important}
body.on-feed .mini-player{display:none !important}


/* ═══════════════════════════════════════════════════════════════════
   OxSoft UI v1 — NXXT Premium AI Music Ecosystem
   Inspired by Apple Music · Spotify Premium · Apple Vision Pro
   Build: 1781815316
   ═══════════════════════════════════════════════════════════════════ */

/* ── Design Tokens ────────────────────────────────────────────────── */
:root {
  --gold: #D4AF37;
  --gold2: #C9A227;
  --gold-hi: #E6D690;
  --gold-dim: rgba(212,175,55,0.10);
  --gold-glow: rgba(212,175,55,0.28);
  --border-gold: rgba(212,175,55,0.20);
  --border: rgba(255,255,255,0.07);
  --border-mid: rgba(255,255,255,0.11);
  --border-bright: rgba(255,255,255,0.16);
  --glass: rgba(10,10,10,0.82);
  --glass-light: rgba(22,22,22,0.75);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.45);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.58);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.72);
  --shadow-nav: 0 -2px 24px rgba(0,0,0,0.55), 0 4px 0 rgba(0,0,0,0.3);
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 26px;
  --ease-out: cubic-bezier(0.4,0,0.2,1);
  --ease-spring: cubic-bezier(0.28,0,0.07,1);
}

/* ── Page Entrance Animation ─────────────────────────────────────── */
@keyframes oxViewIn {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}
.view.active {
  animation: oxViewIn 0.26s var(--ease-out) both !important;
}

/* ── App Header ──────────────────────────────────────────────────── */
.app-head {
  background: rgba(5,5,5,0.90) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  box-shadow: none !important;
}
.app-head-logo {
  font-size: 20px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
}

/* ── Floating Glass Navigation ───────────────────────────────────── */
.app-nav {
  background: transparent !important;
  border-top: none !important;
  padding: 6px 14px calc(var(--safe-bot) + 6px) !important;
  position: relative !important;
  flex-shrink: 0 !important;
}
.app-nav::before {
  content: '';
  position: absolute;
  inset: 6px 14px calc(var(--safe-bot) + 6px);
  background: rgba(10,10,10,0.90);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: var(--shadow-nav);
  pointer-events: none;
}
.nav-btn {
  position: relative !important;
  z-index: 1 !important;
  transition: transform 0.12s var(--ease-out), color 0.15s !important;
}
.nav-btn:active {
  transform: scale(0.86) !important;
  transition-duration: 0.08s !important;
}
.nav-btn-radio {
  position: relative !important;
  z-index: 2 !important;
}
.nav-btn-radio .nav-radio-icon {
  background: var(--gold) !important;
  box-shadow: 0 0 0 4px rgba(212,175,55,0.18), 0 4px 20px rgba(212,175,55,0.55) !important;
  transition: transform 0.15s var(--ease-spring), box-shadow 0.15s !important;
}
.nav-btn-radio:active .nav-radio-icon {
  transform: scale(0.90) !important;
  box-shadow: 0 0 0 2px rgba(212,175,55,0.1), 0 2px 12px rgba(212,175,55,0.4) !important;
}
.nav-btn-radio.active .nav-radio-icon {
  box-shadow: 0 0 0 6px rgba(212,175,55,0.22), 0 4px 24px rgba(212,175,55,0.7) !important;
}
.nav-btn span {
  letter-spacing: 0.02em !important;
}

/* ── Floating Glass Mini-Player ──────────────────────────────────── */
.mini-player {
  margin: 0 10px !important;
  border-radius: 18px !important;
  background: rgba(14,14,14,0.93) !important;
  backdrop-filter: blur(22px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.3) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-top: 1px solid rgba(255,255,255,0.11) !important;
  box-shadow: 0 4px 28px rgba(0,0,0,0.65), 0 1px 0 rgba(255,255,255,0.06) inset !important;
  overflow: hidden !important;
  transition: transform 0.2s var(--ease-out) !important;
}
.mini-player:active {
  transform: scale(0.98) !important;
}
.mini-player::before {
  height: 2px !important;
  border-radius: 2px 2px 0 0 !important;
}
.mp-art {
  border-radius: 10px !important;
  box-shadow: var(--shadow-sm) !important;
}
.mp-title {
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* ── Track Cards ─────────────────────────────────────────────────── */
.track-art {
  border-radius: var(--r-md) !important;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s !important;
}
.track-card:active .track-art {
  transform: scale(0.95) !important;
  box-shadow: var(--shadow-md) !important;
}
.track-card:hover .track-art {
  transform: scale(0.97) translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.55) !important;
}
.track-name-big {
  letter-spacing: -0.015em !important;
}

/* ── Row Items ───────────────────────────────────────────────────── */
.row-item {
  border-radius: var(--r-sm) !important;
  transition: background 0.15s, transform 0.12s !important;
  padding: 10px 16px !important;
}
.row-item:active {
  background: rgba(255,255,255,0.05) !important;
  transform: scale(0.99) !important;
}
.row-art {
  border-radius: var(--r-xs) !important;
}
.row-num.top {
  color: var(--gold) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
}
.row-play {
  border-radius: var(--r-full) !important;
  border: 1px solid var(--border-mid) !important;
  transition: transform 0.12s, background 0.15s, border-color 0.15s !important;
}
.row-play:active {
  transform: scale(0.88) !important;
}

/* ── Section Headers ─────────────────────────────────────────────── */
.sec-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--t1) !important;
}
.sec-link {
  font-size: 12px !important;
  color: var(--t2) !important;
  font-weight: 500 !important;
  transition: color 0.15s !important;
}
.sec-link:active {
  color: var(--gold) !important;
}

/* ── Library ─────────────────────────────────────────────────────── */
.lib-head {
  padding-top: calc(var(--safe-top) + 18px) !important;
}
.lib-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}
.lib-add {
  border-radius: var(--r-full) !important;
  transition: transform 0.12s var(--ease-spring), box-shadow 0.15s !important;
}
.lib-add:active {
  transform: scale(0.90) !important;
}
.lib-add-bottom {
  transition: transform 0.12s var(--ease-spring) !important;
}
.lib-add-bottom:active {
  transform: scale(0.90) !important;
}
.playlist-card {
  border-radius: var(--r-md) !important;
  transition: background 0.15s, transform 0.12s !important;
}
.playlist-card:active {
  background: rgba(255,255,255,0.04) !important;
  transform: scale(0.99) !important;
}
.pl-art {
  border-radius: var(--r-sm) !important;
}

/* ── Skeleton Loaders ────────────────────────────────────────────── */
@keyframes oxSkeleton {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.75; }
}
.skeleton {
  animation: oxSkeleton 1.6s var(--ease-out) infinite !important;
  background: rgba(255,255,255,0.05) !important;
  border-radius: var(--r-sm) !important;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.ob-btn {
  border-radius: var(--r-full) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  transition: transform 0.12s var(--ease-out), opacity 0.12s !important;
}
.ob-btn:active {
  transform: scale(0.96) !important;
  opacity: 0.88 !important;
}

/* ── Artist Page ─────────────────────────────────────────────────── */
.ap-topbar.ap-topbar-visible {
  backdrop-filter: blur(24px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
}
.ap-follow-btn, .ap-playall-btn {
  border-radius: var(--r-full) !important;
  font-weight: 600 !important;
  transition: transform 0.12s var(--ease-out), opacity 0.12s !important;
}
.ap-follow-btn:active, .ap-playall-btn:active {
  transform: scale(0.95) !important;
  opacity: 0.85 !important;
}

/* ── Profile Slide Menu ──────────────────────────────────────────── */
.profile-slide-menu {
  border-radius: 26px 26px 0 0 !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important;
}
.psm-item {
  border-radius: var(--r-sm) !important;
  transition: background 0.15s, transform 0.1s !important;
}
.psm-item:active {
  background: rgba(255,255,255,0.05) !important;
  transform: scale(0.99) !important;
}

/* ── Feed ────────────────────────────────────────────────────────── */
.feed-comment-sheet {
  border-radius: 26px 26px 0 0 !important;
  border-top: 1px solid rgba(255,255,255,0.09) !important;
}
.feed-song-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}
.feed-act span {
  font-size: 11px !important;
}
.feed-follow-pill {
  border: 1.5px solid rgba(255,255,255,0.65) !important;
  font-weight: 700 !important;
  transition: transform 0.1s, background 0.25s, border-color 0.25s, color 0.25s !important;
}
.feed-follow-pill:active {
  transform: scale(0.95) !important;
}

/* ── Home ────────────────────────────────────────────────────────── */
.home-greeting {
  font-size: 28px !important;
  letter-spacing: -0.02em !important;
}

/* ── Feed Management ─────────────────────────────────────────────── */
.feed-mgmt-overlay {
  border-radius: 26px 26px 0 0 !important;
  border-top: 1px solid rgba(255,255,255,0.09) !important;
}

/* ── Floating charts add-bottom ──────────────────────────────────── */
.lib-add-bottom-wrap {
  padding: 24px 16px 12px !important;
}

/* ── Settings ────────────────────────────────────────────────────── */
.settings-btn-primary {
  border-radius: var(--r-full) !important;
  transition: transform 0.12s, opacity 0.12s !important;
}
.settings-btn-primary:active {
  transform: scale(0.96) !important;
  opacity: 0.88 !important;
}

/* ── Input fields ────────────────────────────────────────────────── */
input, textarea, select {
  border-radius: var(--r-sm) !important;
}

/* ── Overlay sheets ──────────────────────────────────────────────── */
#player-overlay {
  border-radius: 24px 24px 0 0 !important;
  overflow: hidden !important;
}

/* ── Onboarding ──────────────────────────────────────────────────── */
.ob-genre, .ob-tier {
  border-radius: var(--r-md) !important;
  transition: border-color 0.15s, background 0.15s, transform 0.12s !important;
}
.ob-genre:active, .ob-tier:active {
  transform: scale(0.98) !important;
}

/* ── Chart arrows ────────────────────────────────────────────────── */
.chart-arrow.up, .chart-arrow-sm.up { color: #4ade80 !important; }
.chart-arrow.down, .chart-arrow-sm.down { color: #f87171 !important; }

/* ── Stream counts ────────────────────────────────────────────────── */
.row-streams {
  font-size: 11px !important;
  letter-spacing: 0.01em !important;
}

/* ── tap highlight ───────────────────────────────────────────────── */
* { -webkit-tap-highlight-color: transparent !important; }

.feed-play-wrap { display: none !important; }


/* ── Media Player Redesign ───────────────────────────────────────────
   Seek 10s buttons (gold), Shuffle/Repeat in actions-row (grey/gold when active)
   ─────────────────────────────────────────────────────────────────── */

/* Hide extra actions row */
.player-extra-actions { display: none !important; }

/* Seek 10s buttons — gold */
#seek-back-btn, #seek-fwd-btn {
  color: var(--gold) !important;
}
#seek-back-btn svg text, #seek-fwd-btn svg text {
  fill: var(--gold) !important;
}
#seek-back-btn:active, #seek-fwd-btn:active {
  transform: scale(0.85) !important;
  opacity: 0.8 !important;
}

/* Shuffle & Repeat in actions-row — grey by default */
#shuffle-btn.action-btn, #repeat-btn.action-btn {
  color: rgba(255,255,255,0.35) !important;
}
#shuffle-btn.action-btn svg, #repeat-btn.action-btn svg {
  stroke: rgba(255,255,255,0.35) !important;
}
/* Active state → gold */
#shuffle-btn.action-btn.active, #repeat-btn.action-btn.active {
  color: var(--gold) !important;
}
#shuffle-btn.action-btn.active svg, #repeat-btn.action-btn.active svg {
  stroke: var(--gold) !important;
}

/* Radio action button */
.radio-act {
  color: var(--t2) !important;
}

/* 4 buttons in actions-row */
.actions-row {
  gap: 0 !important;
  justify-content: space-around !important;
}


/* ── Glass play/pause button in media player ─────────────────────── */
#play-main-btn.play-main {
  background: rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(18px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.4) !important;
  border: 1.5px solid rgba(255,255,255,0.22) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.1) inset !important;
}
#play-main-btn.play-main svg {
  stroke: #fff !important;
  fill: none !important;
}
#play-main-btn.play-main.playing svg {
  fill: #fff !important;
  stroke: #fff !important;
}
#play-main-btn.play-main:active {
  background: rgba(255,255,255,0.18) !important;
  transform: scale(0.93) !important;
}


/* ── Player gold elements ────────────────────────────────────────────
   Title, progress bar, lyrics button all gold
   ──────────────────────────────────────────────────────────────────── */
.progress-fill {
  background: var(--gold) !important;
}
.progress-fill::after {
  background: var(--gold) !important;
  box-shadow: 0 0 6px rgba(212,175,55,0.6) !important;
}
#lyrics-top-btn {
  color: var(--gold) !important;
  background: var(--gold-dim) !important;
  border: 1px solid var(--border-gold) !important;
}
#lyrics-top-btn svg {
  stroke: var(--gold) !important;
}


/* ═══ OxSoft UI v1.1 — Premium Realism Update ══════════════════════
   Less playful, more premium. Native-app feel.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Mood selector ──────────────────────────────────────────────── */
.mood-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 16px 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-bottom: 4px;
}
.mood-bar::-webkit-scrollbar { display: none; }
.mood-pill {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border-mid);
  background: var(--glass-light);
  color: var(--t2);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.18s var(--ease-out);
  white-space: nowrap;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.mood-pill.active {
  background: var(--gold-dim);
  border-color: var(--border-gold);
  color: var(--gold);
}
.mood-pill:active { transform: scale(0.95); }

/* ── For You section enhanced ───────────────────────────────────── */
#mfy-section .sec-title::after {
  content: ' ✦';
  color: var(--gold);
  font-size: 10px;
  vertical-align: super;
}

/* ── UX Realism: tighten view entrance ─────────────────────────── */
.view.active {
  animation: oxViewIn 0.20s var(--ease-out) both !important;
}

/* ── Cards: reduce scale on hover, more subtle ──────────────────── */
.track-card:active { transform: scale(0.975) !important; }
.feed-card:active  { transform: scale(0.985) !important; }

/* ── Section headers: more mature spacing ───────────────────────── */
.sec-head {
  padding-bottom: 10px;
}
.sec-title {
  font-size: 15px;
  letter-spacing: -0.01em;
}

/* ── Home greeting: more refined ───────────────────────────────── */
.home-greeting {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ── Nav: more minimal active indicator ────────────────────────── */
.nav-btn.active::after {
  width: 14px;
  height: 2px;
  border-radius: 1px;
  opacity: 0.7;
}

/* ── Glass panels: cleaner, less heavy ─────────────────────────── */
.glass-panel {
  background: rgba(14,14,14,0.78) !important;
  border: 1px solid var(--border) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.2) !important;
  backdrop-filter: blur(20px) saturate(1.2) !important;
}

/* ── Onboarding tier badges: more premium ───────────────────────── */
.ob-tier {
  transition: border-color 0.16s var(--ease-out), background 0.16s var(--ease-out);
}

/* ── Player: slightly tighter ───────────────────────────────────── */
.player-controls { gap: 20px; }

/* ─── For You row cards ─────────────────────────────────────────── */
.mfy-card {
  flex-shrink: 0;
  width: 120px;
  cursor: pointer;
  transition: opacity 0.16s;
}
.mfy-card:active { opacity: 0.72; }
.mfy-card-art {
  width: 120px;
  height: 120px;
  border-radius: var(--r-sm);
  background: var(--s2);
  overflow: hidden;
  margin-bottom: 7px;
  position: relative;
}
.mfy-card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mfy-card-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--t1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mfy-card-artist {
  font-size: 11px;
  color: var(--t3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

/* ─── Smart notification toast ──────────────────────────────────── */
.nxxt-toast {
  position: fixed;
  bottom: calc(var(--nav-h,64px) + 12px);
  left: 16px;
  right: 16px;
  background: var(--glass);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-md);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 900;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  animation: oxViewIn 0.22s var(--ease-out) both;
  box-shadow: var(--shadow-md);
  font-size: 13px;
  color: var(--t1);
}
.nxxt-toast-icon { color: var(--gold); flex-shrink: 0; }
.nxxt-toast-dismiss {
  margin-left: auto;
  color: var(--t3);
  font-size: 18px;
  cursor: pointer;
  padding: 2px 4px;
  flex-shrink: 0;
}

/* ═══ END OxSoft UI v1.1 ════════════════════════════════════════════ */

/* ═══ END OxSoft UI v1 ══════════════════════════════════════════════ */

/* ── OxSoft Speed v1 — Touch Responsiveness ─────────────────────────
   1. Eliminate 300ms tap delay everywhere
   2. GPU-composited layers for nav/player/views
   3. Shorter transitions
   4. Disable hover on touch devices
   ──────────────────────────────────────────────────────────────────── */

/* 1. Kill the 300ms double-tap delay — most impactful single change */
html { touch-action: manipulation !important; }

/* 2. GPU compositing for elements that animate */
.app-nav, .app-head {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.mini-player {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.view {
  transform: translateZ(0);
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: auto !important;
}

/* 3. Faster view entrance — was 0.26s → 0.16s */
.view.active {
  animation-duration: 0.16s !important;
}

/* 4. Snappier button press feedback */
.nav-btn {
  transition-duration: 0.06s !important;
}
.ob-btn, .action-btn, .ctrl-btn, .play-main,
.psm-item, .row-item, .playlist-card, .lib-add,
.lib-add-bottom, .feed-follow-pill, .mp-btn,
.player-close, .td-icon-btn, .td-play-main {
  transition-duration: 0.08s !important;
}

/* 5. Mini-player tap — faster response */
.mini-player {
  transition-duration: 0.12s !important;
}

/* 6. Disable hover transitions on touch devices (unnecessary repaints) */
@media (hover: none) {
  .track-card:hover .track-art {
    transform: none !important;
    box-shadow: none !important;
  }
  .row-item:hover {
    background: transparent !important;
    transform: none !important;
  }
  .nav-btn:hover, .ob-btn:hover, .action-btn:hover {
    opacity: 1 !important;
  }
}

/* 7. Contain layout for image elements — reduces repaint area */
.track-art, .pl-art, .row-art, .mp-art, .feed-item {
  contain: layout;
}

/* 8. Track cards — remove hover transform on mobile */
@media (hover: none) {
  .track-card:hover .track-art {
    transform: none !important;
  }
}


/* ── Image loading ───────────────────────────────────────────────────
   Fade-in on load, skeleton background while waiting
   ──────────────────────────────────────────────────────────────────── */
@keyframes imgFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Skeleton background on containers */
.track-art, .row-art, .pl-art, .lib-track-art,
.disc-artist-img, .disc-grid-art, .ap-hero-img-wrap,
.td-artwork-wrap, .feed-item-bg, .chart-row-art {
  background: var(--s3) !important;
}

/* Images fade in when browser renders them */
.track-art img, .row-art img, .pl-art img,
.lib-track-art img, .disc-artist-img img,
.disc-grid-art img, .chart-row-art img,
#td-art, #canvas-img-bg, #mp-art-img {
  animation: imgFadeIn 0.22s ease both;
}

/* Player background image — smoother transition */
#canvas-img-bg {
  transition: opacity 0.35s ease !important;
}

/* ── END Image loading ───────────────────────────────────────────────── */

/* ═══ END OxSoft Speed v1 ═══════════════════════════════════════════ */