/*!***********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/melobeat-original.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************/
*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#070a14;--bg-deep:#030509;--surface:rgba(12,18,35,0.65);--surface-solid:#0a1020;--card:rgba(18,25,45,0.55);--card-hover:rgba(28,38,65,0.75);--glass-bg:rgba(255,255,255,0.045);--glass-border:rgba(100,170,255,0.14);--text:#fff;--text-sub:#b0c0d8;--accent:#4da6ff;--accent-2:#00d4ff;--accent-3:#0099ff;--accent-dark:#2d7dd2;--accent-glow:rgba(77,166,255,0.5);--radius:14px;--glass-blur:blur(20px);--neon-glow:0 0 10px rgba(77,166,255,0.35),0 0 25px rgba(77,166,255,0.18);--neon-glow-strong:0 0 12px rgba(77,166,255,0.5),0 0 30px rgba(77,166,255,0.25),0 0 60px rgba(77,166,255,0.1)}
body{font-family:'Vazirmatn',sans-serif;color:var(--text);overflow:hidden;height:100vh;direction:rtl;font-size:15px;position:relative}

/* ===== Layer 1: Deep base gradient ===== */
body::before{content:'';position:fixed;inset:0;z-index:-5;background:
  radial-gradient(ellipse 120% 80% at 30% 20%,#0c1428 0%,transparent 60%),
  radial-gradient(ellipse 100% 70% at 70% 80%,#0a1828 0%,transparent 55%),
  linear-gradient(135deg,#04060d 0%,#070b15 40%,#050810 70%,#03060c 100%)}

/* ===== Layer 2: Animated multi-color glow gradients ===== */
body::after{content:'';position:fixed;inset:0;z-index:-4;background:
  radial-gradient(ellipse 60% 40% at 15% 10%,rgba(77,166,255,0.15) 0%,transparent 45%),
  radial-gradient(ellipse 50% 35% at 85% 90%,rgba(0,212,255,0.12) 0%,transparent 45%),
  radial-gradient(ellipse 40% 30% at 90% 20%,rgba(100,200,255,0.08) 0%,transparent 40%),
  radial-gradient(ellipse 45% 35% at 10% 85%,rgba(0,153,255,0.07) 0%,transparent 40%),
  radial-gradient(circle 300px at 50% 50%,rgba(77,166,255,0.04) 0%,transparent 70%);
  animation:bgBreath 14s ease-in-out infinite}
@keyframes bgBreath{0%,100%{opacity:1;transform:scale(1) rotate(0deg)}33%{opacity:0.92;transform:scale(1.02) rotate(0.5deg)}66%{opacity:0.95;transform:scale(0.99) rotate(-0.3deg)}}

/* ===== Layer 3: Animated mesh grid with depth ===== */
.bg-grid{position:fixed;inset:0;z-index:-3;pointer-events:none;
  background-image:
    linear-gradient(rgba(77,166,255,0.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(77,166,255,0.025) 1px,transparent 1px),
    linear-gradient(rgba(77,166,255,0.015) 1px,transparent 1px),
    linear-gradient(90deg,rgba(77,166,255,0.015) 1px,transparent 1px);
  background-size:80px 80px,80px 80px,20px 20px,20px 20px;
  mask-image:radial-gradient(ellipse 120% 80% at 50% 50%,#000 20%,rgba(0,0,0,0.5) 50%,transparent 90%);
  -webkit-mask-image:radial-gradient(ellipse 120% 80% at 50% 50%,#000 20%,rgba(0,0,0,0.5) 50%,transparent 90%);
  animation:gridShift 40s linear infinite}
@keyframes gridShift{0%{background-position:0 0,0 0,0 0,0 0}100%{background-position:80px 80px,80px 80px,20px 20px,20px 20px}}

/* ===== Layer 4: Aurora light streaks ===== */
.bg-aurora{position:fixed;inset:0;z-index:-3;pointer-events:none;overflow:hidden;opacity:0.5}
.bg-aurora::before{content:'';position:absolute;width:200%;height:200%;top:-50%;left:-50%;
  background:conic-gradient(from 0deg,transparent 0%,rgba(77,166,255,0.06) 15%,transparent 30%,rgba(0,212,255,0.04) 45%,transparent 60%,rgba(0,153,255,0.05) 75%,transparent 90%,rgba(77,166,255,0.06) 100%);
  animation:auroraRotate 50s linear infinite}
.bg-aurora::after{content:'';position:absolute;width:150%;height:150%;top:-25%;left:-25%;
  background:conic-gradient(from 180deg,transparent 0%,rgba(0,212,255,0.04) 20%,transparent 40%,rgba(77,166,255,0.05) 60%,transparent 80%,rgba(0,212,255,0.04) 100%);
  animation:auroraRotate 70s linear infinite reverse;opacity:0.6}
@keyframes auroraRotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* ===== Layer 5: Floating orbs with multi-color gradients ===== */
.bg-orb{position:fixed;border-radius:50%;pointer-events:none;z-index:-2;filter:blur(70px)}
.bg-orb-1{width:550px;height:550px;background:radial-gradient(circle,rgba(77,166,255,0.3) 0%,rgba(0,100,200,0.1) 40%,transparent 70%);top:-180px;right:-180px;opacity:0.3;animation:orbFloat1 28s ease-in-out infinite}
.bg-orb-2{width:480px;height:480px;background:radial-gradient(circle,rgba(0,212,255,0.25) 0%,rgba(0,150,255,0.08) 40%,transparent 70%);bottom:-150px;left:-150px;opacity:0.25;animation:orbFloat2 32s ease-in-out infinite}
.bg-orb-3{width:380px;height:380px;background:radial-gradient(circle,rgba(100,180,255,0.2) 0%,rgba(50,120,200,0.06) 40%,transparent 70%);top:35%;left:20%;opacity:0.2;animation:orbFloat3 38s ease-in-out infinite}
.bg-orb-4{width:320px;height:320px;background:radial-gradient(circle,rgba(0,200,255,0.18) 0%,transparent 60%);top:60%;right:30%;opacity:0.15;animation:orbFloat4 42s ease-in-out infinite}
@keyframes orbFloat1{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(-60px,40px) scale(1.06)}50%{transform:translate(30px,-30px) scale(0.94)}75%{transform:translate(-20px,50px) scale(1.04)}}
@keyframes orbFloat2{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(50px,-40px) scale(1.08)}50%{transform:translate(-40px,25px) scale(0.96)}75%{transform:translate(30px,-20px) scale(1.03)}}
@keyframes orbFloat3{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-80px,60px) scale(1.1)}66%{transform:translate(40px,-40px) scale(0.92)}}
@keyframes orbFloat4{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,-50px) scale(1.12)}}

/* ===== Layer 6: Floating particles (elegant, varied) ===== */
.particles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.particle{position:absolute;border-radius:50%;animation:particleFloat linear infinite}
@keyframes particleFloat{0%{transform:translateY(100vh) translateX(0);opacity:0}10%{opacity:0.7}90%{opacity:0.7}100%{transform:translateY(-10vh) translateX(40px);opacity:0}}

/* ===== Layer 7: Top vignette for depth ===== */
.bg-vignette{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 100% 100% at 50% 50%,transparent 30%,rgba(0,0,0,0.3) 80%,rgba(0,0,0,0.5) 100%)}

/* ===== Layer 8: Noise texture overlay (subtle film grain) ===== */
.bg-noise{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0.015;
  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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ===== Animated equalizer bars (for now-playing indicator) ===== */
.eq-bars{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.eq-bars span{display:inline-block;width:3px;background:var(--accent);border-radius:1px;animation:eqBar 0.8s ease-in-out infinite}
.eq-bars span:nth-child(1){animation-delay:0s;height:60%}
.eq-bars span:nth-child(2){animation-delay:0.15s;height:100%}
.eq-bars span:nth-child(3){animation-delay:0.3s;height:40%}
.eq-bars span:nth-child(4){animation-delay:0.45s;height:80%}
@keyframes eqBar{0%,100%{transform:scaleY(0.4)}50%{transform:scaleY(1)}}

/* ===== Pulsing glow for active elements ===== */
@keyframes pulseGlow{0%,100%{box-shadow:0 0 8px rgba(77,166,255,0.3)}50%{box-shadow:0 0 16px rgba(77,166,255,0.6),0 0 30px rgba(77,166,255,0.3)}}
.pulse-glow{animation:pulseGlow 2s ease-in-out infinite}

/* ===== Shimmer effect for loading/skeleton ===== */
@keyframes shimmerMove{0%{background-position:-200% 0}100%{background-position:200% 0}}
.shimmer{background:linear-gradient(90deg,transparent,rgba(77,166,255,0.1),transparent);background-size:200% 100%;animation:shimmerMove 2s linear infinite}

/* ===== Rotating glow ring ===== */
@keyframes rotateGlow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.rotate-glow{animation:rotateGlow 8s linear infinite}

/* ===== Bounce in ===== */
@keyframes bounceIn{0%{opacity:0;transform:scale(0.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(0.95)}100%{transform:scale(1)}}
.bounce-in{animation:bounceIn 0.5s ease}

/* ===== Slide and fade ===== */
@keyframes slideFade{0%{opacity:0;transform:translateX(-30px)}100%{opacity:1;transform:translateX(0)}}

/* ===== Glow text ===== */
@keyframes glowText{0%,100%{text-shadow:0 0 8px rgba(77,166,255,0.4)}50%{text-shadow:0 0 16px rgba(77,166,255,0.7),0 0 24px rgba(77,166,255,0.4)}}
.glow-text{animation:glowText 3s ease-in-out infinite}

/* ===== Floating animation ===== */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.float-anim{animation:float 3s ease-in-out infinite}

/* ===== Ripple effect ===== */
@keyframes ripple{0%{transform:scale(0);opacity:1}100%{transform:scale(4);opacity:0}}
.ripple{position:absolute;border-radius:50%;background:rgba(77,166,255,0.3);animation:ripple 0.6s ease-out;pointer-events:none}

/* ===== Entrance animations for all items ===== */
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes errorToastIn{0%{opacity:0;transform:translateY(20px) scale(0.9)}60%{transform:translateY(-4px) scale(1.02)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInLeft{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeInRight{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeInFromRight{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}
@keyframes slideInScale{from{opacity:0;transform:scale(0.85) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes glowPulse{0%,100%{box-shadow:var(--neon-glow)}50%{box-shadow:var(--neon-glow-strong)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes pulseBadge{0%,100%{transform:scale(1);box-shadow:0 0 8px rgba(239,68,68,0.6)}50%{transform:scale(1.15);box-shadow:0 0 14px rgba(239,68,68,0.9)}}
@keyframes notifSlideIn{0%{opacity:0;transform:translateX(20px) scale(0.95)}100%{opacity:1;transform:translateX(0) scale(1)}}

/* ===== Themed scrollbars (dark theme — default) ===== */
/* Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(77,166,255,0.45),rgba(0,212,255,0.3));border-radius:10px;border:2px solid transparent;background-clip:padding-box;-webkit-transition:background 0.2s;transition:background 0.2s}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(77,166,255,0.7),rgba(0,212,255,0.5));border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:active{background:linear-gradient(180deg,rgba(77,166,255,0.85),rgba(0,212,255,0.65));border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}
/* Make thin scrollbars look elegant for horizontal carousels */
*::-webkit-scrollbar:horizontal{height:8px}
*::-webkit-scrollbar:horizontal:hover{height:10px}

/* Firefox */
*{scrollbar-width:thin;scrollbar-color:rgba(77,166,255,0.4) transparent}

/* Edge legacy + IE */
body{scrollbar-face-color:rgba(77,166,255,0.5);scrollbar-track-color:transparent;scrollbar-arrow-color:rgba(77,166,255,0.6)}

/* Sidebar scrollbar — slightly more visible */
.sidebar-scroll::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(77,166,255,0.55),rgba(0,212,255,0.35))}
.sidebar-scroll::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(77,166,255,0.8),rgba(0,212,255,0.55))}

/* Main content scrollbar — wider, easier to grab */
.main::-webkit-scrollbar{width:12px}
.main::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(77,166,255,0.4),rgba(0,212,255,0.25))}
.main::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(77,166,255,0.65),rgba(0,212,255,0.45))}

/* Modal/panel inner scrollbars — slimmer */
.modal ::-webkit-scrollbar,.create-pl-body::-webkit-scrollbar,.create-pl-modal::-webkit-scrollbar,[id$="Modal"] ::-webkit-scrollbar,[id$="Panel"] ::-webkit-scrollbar{width:8px;height:8px}
.modal ::-webkit-scrollbar-thumb,.create-pl-body::-webkit-scrollbar-thumb,[id$="Modal"] ::-webkit-scrollbar-thumb,[id$="Panel"] ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(77,166,255,0.4),rgba(0,212,255,0.25));border-radius:8px;border:2px solid transparent;background-clip:padding-box}

/* Lyrics panel — extra-subtle so it doesn't distract from the song */
#npLyrics::-webkit-scrollbar{width:4px}
#npLyrics::-webkit-scrollbar-thumb{background:rgba(77,166,255,0.3);border-radius:4px}

/* ===== Light theme scrollbar overrides ===== */
html[data-theme="light"] ::-webkit-scrollbar-track{background:rgba(0,0,0,0.04)}
html[data-theme="light"] ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(0,212,255,0.6),rgba(77,166,255,0.45));border:2px solid transparent;background-clip:padding-box}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(0,212,255,0.85),rgba(77,166,255,0.65));border:2px solid transparent;background-clip:padding-box}
html[data-theme="light"] ::-webkit-scrollbar-thumb:active{background:linear-gradient(180deg,rgba(0,212,255,0.95),rgba(77,166,255,0.75));border:2px solid transparent;background-clip:padding-box}
html[data-theme="light"] *{scrollbar-color:rgba(0,212,255,0.55) rgba(0,0,0,0.05)}
html[data-theme="light"] .sidebar-scroll::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(0,212,255,0.7),rgba(77,166,255,0.5))}
html[data-theme="light"] .main::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(0,212,255,0.55),rgba(77,166,255,0.4))}

/* Dark theme is the default (when no data-theme attribute) */
html:not([data-theme="light"]) ::-webkit-scrollbar-track,
html:not([data-theme]) ::-webkit-scrollbar-track{background:transparent}

/* Apply entrance animations to elements */
.app{animation:fadeInUp 0.6s ease}
.header{animation:fadeInDown 0.5s ease}
.sidebar{animation:fadeInRight 0.6s ease}
.main{animation:fadeInUp 0.5s ease 0.1s both}
.player{animation:fadeInUp 0.5s ease 0.2s both}
.hero{animation:scaleIn 0.6s ease 0.15s both}
.section{animation:fadeInUp 0.5s ease both}
.section:nth-child(1){animation-delay:0.1s}
.section:nth-child(2){animation-delay:0.2s}
.section:nth-child(3){animation-delay:0.3s}
.section:nth-child(4){animation-delay:0.4s}
.section:nth-child(5){animation-delay:0.5s}
.section:nth-child(6){animation-delay:0.6s}
.quick-item{animation:slideInScale 0.4s ease both}
.quick-item:nth-child(1){animation-delay:0.15s}
.quick-item:nth-child(2){animation-delay:0.2s}
.quick-item:nth-child(3){animation-delay:0.25s}
.quick-item:nth-child(4){animation-delay:0.3s}
.quick-item:nth-child(5){animation-delay:0.35s}
.quick-item:nth-child(6){animation-delay:0.4s}
.card{animation:slideInScale 0.45s cubic-bezier(0.34,1.56,0.64,1) both}
.card:nth-child(1){animation-delay:0.1s}
.card:nth-child(2){animation-delay:0.15s}
.card:nth-child(3){animation-delay:0.2s}
.card:nth-child(4){animation-delay:0.25s}
.card:nth-child(5){animation-delay:0.3s}
.card:nth-child(6){animation-delay:0.35s}
.chart-item{animation:fadeInLeft 0.4s ease both}
.chart-item:nth-child(1){animation-delay:0.1s}
.chart-item:nth-child(2){animation-delay:0.15s}
.chart-item:nth-child(3){animation-delay:0.2s}
.chart-item:nth-child(4){animation-delay:0.25s}
.chart-item:nth-child(5){animation-delay:0.3s}
.artist-item{animation:fadeIn 0.5s ease both}
.artist-item:nth-child(1){animation-delay:0.15s}
.artist-item:nth-child(2){animation-delay:0.2s}
.artist-item:nth-child(3){animation-delay:0.25s}
.artist-item:nth-child(4){animation-delay:0.3s}
.artist-item:nth-child(5){animation-delay:0.35s}
.artist-item:nth-child(6){animation-delay:0.4s}
.cat-item{animation:scaleIn 0.4s ease both}
.library-tab{animation:fadeInDown 0.3s ease both}
.playlist-item,.library-liked,.library-create,.folder-item{animation:fadeInRight 0.4s ease both}
.nav-drawer-item{animation:fadeInLeft 0.3s ease both}
.nav-drawer-item:nth-child(1){animation-delay:0.05s}
.nav-drawer-item:nth-child(2){animation-delay:0.1s}
.nav-drawer-item:nth-child(3){animation-delay:0.15s}
.nav-drawer-item:nth-child(4){animation-delay:0.2s}
.nav-drawer-item:nth-child(5){animation-delay:0.25s}
.nav-drawer-item:nth-child(6){animation-delay:0.3s}
.nav-drawer-item:nth-child(7){animation-delay:0.35s}
.nav-drawer-item:nth-child(8){animation-delay:0.4s}
.nav-drawer-item:nth-child(9){animation-delay:0.45s}

/* Smooth scroll behavior */
.main{scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.content{scroll-behavior:smooth}

/* Hover lift animations */
.card:hover,.quick-item:hover,.artist-item:hover{transform:translateY(-4px) scale(1.02)}
.playlist-item:hover,.library-liked:hover,.library-create:hover,.folder-item:hover{transform:translateX(-3px)}
.chart-item:hover{transform:translateX(-3px)}
.cat-item:hover{transform:scale(1.05)}
button{transition:all 0.25s cubic-bezier(0.4,0,0.2,1)}
button:hover{transform:translateY(-1px)}
button:active{transform:translateY(0) scale(0.97)}
/* Disable default focus outline globally — it causes the white ring issue */
button:focus{outline:none}
button:focus-visible{outline:none}
/* Reset browser default button styles inside modals */
#accountModal button,#profileModal button,#recentsModal button,#supportModal button,#settingsModal button,#authModal button{-webkit-appearance:none;-moz-appearance:none;appearance:none}
/* Don't apply hover/active transforms to buttons inside modals — they have their own styles */
#accountModal button:hover,#profileModal button:hover,#recentsModal button:hover,#supportModal button:hover,#settingsModal button:hover{transform:none}
#accountModal button:active,#profileModal button:active,#recentsModal button:active,#supportModal button:active,#settingsModal button:active{transform:none}
#accountModal button:focus,#profileModal button:focus,#recentsModal button:focus,#supportModal button:focus,#settingsModal button:focus{outline:none}

/* Edit button animation — subtle pulse when it appears */
@keyframes editBtnPop{0%{transform:scale(0.8);opacity:0}60%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
.edit-btn-anim{animation:editBtnPop 0.4s cubic-bezier(0.34,1.56,0.64,1)}
/* Display field animation — slide in when edit is cancelled/saved */
@keyframes fieldSlideIn{0%{transform:translateX(20px);opacity:0}100%{transform:translateX(0);opacity:1}}
.field-slide-in{animation:fieldSlideIn 0.3s ease}
/* Edit area animation — slide down when revealed */
@keyframes editAreaSlide{0%{transform:translateY(-10px);opacity:0}100%{transform:translateY(0);opacity:1}}
.edit-area-slide{animation:editAreaSlide 0.3s ease}

/* ===== Beautiful Edit Button ===== */
.edit-btn{display:inline-flex;align-items:center;gap:5px;background:linear-gradient(135deg,rgba(77,166,255,0.12),rgba(0,212,255,0.06));border:1px solid rgba(77,166,255,0.25);color:#4da6ff;font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;padding:5px 12px;border-radius:20px;transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);outline:none;position:relative;overflow:hidden}
.edit-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(77,166,255,0.3),rgba(0,212,255,0.15));opacity:0;transition:opacity 0.3s}
.edit-btn:hover{border-color:#4da6ff;transform:translateY(-1px);box-shadow:0 4px 12px rgba(77,166,255,0.25)}
.edit-btn:hover::before{opacity:1}
.edit-btn:active{transform:translateY(0) scale(0.96)}
.edit-btn svg{position:relative;z-index:1}
.edit-btn span{position:relative;z-index:1}

/* ===== Beautiful Save/Cancel Buttons ===== */
.save-cancel-btn{padding:8px 18px;border-radius:20px;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);outline:none;border:none;display:inline-flex;align-items:center;gap:5px}
.save-cancel-btn.cancel{background:rgba(255,255,255,0.06);color:#b3b3b3;border:1px solid rgba(255,255,255,0.1)}
.save-cancel-btn.cancel:hover{background:rgba(255,255,255,0.12);color:#fff;transform:translateY(-1px)}
.save-cancel-btn.save{background:linear-gradient(135deg,#4da6ff,#00d4ff);color:#000;box-shadow:0 4px 12px rgba(77,166,255,0.3)}
.save-cancel-btn.save:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 6px 20px rgba(77,166,255,0.5)}
.save-cancel-btn.save:active{transform:translateY(0) scale(0.97)}

/* ===== Follow/Unfollow Button ===== */
.follow-user-btn{padding:5px 14px;border-radius:20px;background:linear-gradient(135deg,#4da6ff,#00d4ff);color:#000;border:none;font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);outline:none;white-space:nowrap;flex-shrink:0}
.follow-user-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px rgba(77,166,255,0.4)}
.follow-user-btn.followed{background:rgba(77,166,255,0.12);color:#4da6ff;border:1px solid rgba(77,166,255,0.3)}
.follow-user-btn.followed:hover{background:rgba(239,68,68,0.15);color:#ef4444;border-color:rgba(239,68,68,0.3)}

/* ===== Community User Card ===== */
.community-user-card{display:flex;align-items:center;gap:12px;padding:12px;background:rgba(15,22,40,0.6);border:1px solid rgba(100,170,255,0.1);border-radius:12px;transition:all 0.2s;cursor:default}
.community-user-card:hover{background:rgba(77,166,255,0.06);border-color:rgba(77,166,255,0.2)}

/* ===== Music Taste Bars ===== */
.taste-bar-container{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.taste-bar-label{font-size:13px;color:var(--text-sub);width:90px;text-align:right;flex-shrink:0}
.taste-bar-track{flex:1;height:8px;background:rgba(255,255,255,0.06);border-radius:4px;overflow:hidden;position:relative}
.taste-bar-fill{height:100%;border-radius:4px;transition:width 0.8s cubic-bezier(0.16,1,0.3,1);position:relative}
.taste-bar-fill::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);animation:tasteShine 2s ease-in-out infinite}
@keyframes tasteShine{0%,100%{transform:translateX(-100%)}50%{transform:translateX(100%)}}
.taste-bar-pct{font-size:11px;color:#666;width:34px;flex-shrink:0}

/* ===== Activity Heatmap ===== */
.heatmap-grid{display:grid;grid-template-columns:repeat(14,1fr);gap:3px;margin-top:8px}
.heatmap-cell{width:100%;aspect-ratio:1;border-radius:3px;background:rgba(255,255,255,0.04);transition:all 0.2s;cursor:default}
.heatmap-cell:hover{transform:scale(1.3);z-index:1;position:relative}
.heatmap-cell.l1{background:rgba(77,166,255,0.2)}
.heatmap-cell.l2{background:rgba(77,166,255,0.4)}
.heatmap-cell.l3{background:rgba(77,166,255,0.7)}
.heatmap-cell.l4{background:#4da6ff;box-shadow:0 0 4px rgba(77,166,255,0.5)}

/* ===== Share Profile Button ===== */
.share-profile-btn{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:20px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);color:#fff;font-family:inherit;font-size:11px;font-weight:600;cursor:pointer;transition:all 0.3s;outline:none}
.share-profile-btn:hover{background:rgba(77,166,255,0.15);border-color:rgba(77,166,255,0.3);transform:translateY(-1px)}

/* ===== Profile Section Title ===== */
.profile-section-title{font-size:16px;font-weight:800;color:#fff;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.profile-section-title svg{flex-shrink:0}

/* ===== Banner animations ===== */
@keyframes bannerShift{0%{transform:translateX(0)}100%{transform:translateX(-120px)}}
@keyframes bannerScan{0%,100%{opacity:0;transform:translateX(-100%)}50%{opacity:1;transform:translateX(100%)}}

/* ===== Profile motion graphics ===== */
@keyframes profileBannerAurora{0%,100%{transform:translate(0,0) rotate(0deg);opacity:0.6}33%{transform:translate(40px,-20px) rotate(120deg);opacity:0.85}66%{transform:translate(-30px,30px) rotate(240deg);opacity:0.5}}
@keyframes profileBgMeshShift{0%,100%{background-position:0% 50%,100% 50%,50% 0%,50% 100%}25%{background-position:50% 0%,50% 100%,0% 50%,100% 50%}50%{background-position:100% 50%,0% 50%,50% 100%,50% 0%}75%{background-position:50% 100%,50% 0%,100% 50%,0% 50%}}
@keyframes profileBgGradientFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes profileBeamSweep{0%{transform:translateX(-100%) skewX(-20deg);opacity:0}50%{opacity:0.4}100%{transform:translateX(200%) skewX(-20deg);opacity:0}}
@keyframes profileWaveFloat{0%,100%{transform:translateX(0)}50%{transform:translateX(-25px)}}
@keyframes profileDotGridShift{0%{background-position:0 0}100%{background-position:60px 60px}}
@keyframes profileParticleOrbit{from{transform:rotate(0deg) translateX(60px) rotate(0deg)}to{transform:rotate(360deg) translateX(60px) rotate(-360deg)}}
@keyframes profileStarTwinkle{0%,100%{opacity:0.2;transform:scale(0.8)}50%{opacity:0.9;transform:scale(1.2)}}
@keyframes profileEqualizerBar{0%,100%{height:6px}50%{height:24px}}
@keyframes profileNebulaSwirl{0%,100%{transform:rotate(0deg) scale(1);opacity:0.4}50%{transform:rotate(180deg) scale(1.15);opacity:0.6}}
@keyframes profileAvatarReveal{0%{opacity:0;transform:scale(0.4) rotate(-180deg)}60%{opacity:1;transform:scale(1.08) rotate(8deg)}100%{opacity:1;transform:scale(1) rotate(0deg)}}
@keyframes profileAvatarRingPulse{0%,100%{box-shadow:0 4px 20px rgba(77,166,255,0.4),0 0 0 4px rgba(15,22,40,0.98),0 0 0 6px rgba(77,166,255,0.3)}50%{box-shadow:0 4px 24px rgba(77,166,255,0.55),0 0 0 4px rgba(15,22,40,0.98),0 0 0 8px rgba(77,166,255,0.15)}}
@keyframes profileAvatarGlow{0%,100%{box-shadow:0 0 0 0 rgba(77,166,255,0.4)}50%{box-shadow:0 0 0 12px rgba(77,166,255,0)}}
@keyframes profileUsernameIn{0%{opacity:0;transform:translateY(12px) scale(0.92);filter:blur(4px)}100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes profileProBadgeShine{0%,100%{transform:rotate(0deg)}50%{transform:rotate(8deg)}}
@keyframes profileStatReveal{0%{opacity:0;transform:translateY(20px) scale(0.85)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes profileStatCount{from{opacity:0;transform:scale(0.6)}to{opacity:1;transform:scale(1)}}
@keyframes profileStatShimmer{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes profileSectionIn{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:translateY(0)}}
@keyframes profileAchievementPop{0%{opacity:0;transform:scale(0.3) rotate(-20deg)}60%{opacity:1;transform:scale(1.12) rotate(6deg)}100%{opacity:1;transform:scale(1) rotate(0deg)}}
@keyframes profileAchievementFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes profileAchievementShine{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes profileTasteBarGrow{from{width:0!important}to{width:var(--target-width)}}
@keyframes profileTasteBarShine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes profileJourneyFillGrow{from{width:0}to{width:var(--target-width)}}
@keyframes profileJourneyPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.3)}}
@keyframes profileCardReveal{0%{opacity:0;transform:translateY(8px) scale(0.97)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes profileFloatingNotes{0%{transform:translate(0,0) rotate(0deg);opacity:0}10%{opacity:0.7}90%{opacity:0.5}100%{transform:translate(var(--nx,40px),var(--ny,-80px)) rotate(var(--nr,360deg));opacity:0}}
@keyframes profileHeartBeat{0%,100%{transform:scale(1)}15%{transform:scale(1.25)}30%{transform:scale(1)}45%{transform:scale(1.2)}60%{transform:scale(1)}}
@keyframes profileBorderGlow{0%,100%{border-color:rgba(77,166,255,0.15)}50%{border-color:rgba(77,166,255,0.4)}}
@keyframes profileBgShimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes profileRingRotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes profileIconFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-2px) rotate(3deg)}}
@keyframes profileWelcomeRipple{0%{transform:scale(0.8);opacity:0.8}100%{transform:scale(2.2);opacity:0}}

/* Avatar floating ring (gradient conic) */
.profile-avatar-ring{position:absolute;inset:-6px;border-radius:50%;background:conic-gradient(from 0deg,#4da6ff,#00d4ff,#a78bfa,#fbbf24,#4da6ff);animation:profileRingRotate 8s linear infinite;opacity:0.85;z-index:-1;filter:blur(2px)}
.profile-avatar-ring::after{content:'';position:absolute;inset:3px;border-radius:50%;background:rgba(15,22,40,0.98)}

/* Animated background gradient for username */
.profile-username-text{background:linear-gradient(90deg,#fff,#b3d4ff,#fff,#e0d4ff,#fff);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:profileStatShimmer 4s linear infinite}

/* Pro badge with shine */
.profile-pro-badge{position:relative;overflow:hidden;background:linear-gradient(135deg,#4da6ff,#00d4ff);color:#000}
.profile-pro-badge::before{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%);background-size:200% 100%;animation:profileAchievementShine 3s linear infinite;pointer-events:none}

/* Stat card with reveal + accent glow on hover */
.profile-stat-card{position:relative;overflow:hidden;transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1),border-color 0.3s}
.profile-stat-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 100%,rgba(77,166,255,0.18),transparent 70%);opacity:0;transition:opacity 0.3s;pointer-events:none}
.profile-stat-card:hover{transform:translateY(-3px) scale(1.03);border-color:rgba(77,166,255,0.4)!important}
.profile-stat-card:hover::before{opacity:1}
.profile-stat-card:hover .profile-stat-num{transform:scale(1.1)}
.profile-stat-num{transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1)}

/* Achievement badge with float + shine */
.profile-achievement-badge{position:relative;overflow:hidden;transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.3s;animation:profileAchievementFloat 3s ease-in-out infinite}
.profile-achievement-badge:nth-child(2n){animation-delay:0.5s}
.profile-achievement-badge:nth-child(3n){animation-delay:1s}
.profile-achievement-badge:nth-child(4n){animation-delay:1.5s}
.profile-achievement-badge::before{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,0.25) 50%,transparent 70%);background-size:200% 100%;animation:profileAchievementShine 4s linear infinite;pointer-events:none}
.profile-achievement-badge:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 8px 24px var(--badge-color,#4da6ff)40}
.profile-achievement-badge:hover .profile-achievement-icon{animation:profileHeartBeat 0.8s ease}

/* Taste bar with animated fill */
.profile-taste-bar-fill{position:relative;overflow:hidden;animation:profileTasteBarGrow 1s cubic-bezier(0.16,1,0.3,1) both}
.profile-taste-bar-fill::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);background-size:200% 100%;animation:profileTasteBarShine 2.5s linear infinite}

/* Journey progress bar with pulse */
.profile-journey-fill{position:relative;overflow:hidden;animation:profileJourneyFillGrow 1.2s cubic-bezier(0.16,1,0.3,1) both}
.profile-journey-fill::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.5),transparent);animation:profileTasteBarShine 2s linear infinite}
.profile-journey-fill::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#4da6ff,#00d4ff,#fbbf24);animation:profileJourneyPulse 3s ease-in-out infinite}

/* Section reveal on load */
.profile-section-reveal{animation:profileSectionIn 0.6s cubic-bezier(0.16,1,0.3,1) both}
.profile-section-reveal:nth-child(1){animation-delay:0.05s}
.profile-section-reveal:nth-child(2){animation-delay:0.12s}
.profile-section-reveal:nth-child(3){animation-delay:0.19s}
.profile-section-reveal:nth-child(4){animation-delay:0.26s}
.profile-section-reveal:nth-child(5){animation-delay:0.33s}
.profile-section-reveal:nth-child(6){animation-delay:0.40s}
.profile-section-reveal:nth-child(7){animation-delay:0.47s}
.profile-section-reveal:nth-child(8){animation-delay:0.54s}

/* Floating notes around avatar */
.profile-floating-note{position:absolute;font-size:18px;pointer-events:none;animation:profileFloatingNotes 4s ease-out forwards;opacity:0;z-index:6}

/* Ripple effect for share button */
.profile-share-btn{position:relative;overflow:hidden}
.profile-share-btn::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at center,rgba(77,166,255,0.3),transparent 70%);opacity:0;transition:opacity 0.3s}
.profile-share-btn:hover::after{opacity:1}

/* Modal animations */
.auth-modal,.modal,.create-pl-modal,.create-menu{animation:modalScaleIn 0.35s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes modalScaleIn{from{opacity:0;transform:scale(0.85) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}

.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}
.app-body{display:flex;flex:1;overflow:hidden}

/* Header */
.header{display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:56px;background:linear-gradient(135deg,rgba(15,24,50,0.88),rgba(20,32,65,0.85));backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-bottom:1px solid rgba(100,170,255,0.18);flex-shrink:0;position:relative;z-index:500;box-shadow:0 4px 20px rgba(0,0,0,0.3)}
.header-left{display:flex;align-items:center;gap:12px;flex-shrink:0}
.header-logo{display:flex;align-items:center;gap:8px}
.header-logo svg{width:28px;height:28px;transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);filter:drop-shadow(0 0 4px rgba(77,166,255,0.3))}
.header-logo:hover svg{transform:rotate(360deg) scale(1.1);filter:drop-shadow(0 0 8px rgba(77,166,255,0.6))}
.header-logo span{font-size:20px;font-weight:900;background:linear-gradient(135deg,#4da6ff,#00d4ff,#4da6ff);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 8px rgba(77,166,255,0.5));animation:shimmer 3s linear infinite}
.header-nav{display:flex;gap:2px}
.header-nav button{padding:6px 14px;border:none;background:none;color:var(--text-sub);font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;border-radius:20px;transition:all 0.2s}
.header-nav button.active{color:#fff;background:rgba(255,255,255,0.1)}
.header-nav button:hover{color:#fff}
.header-center{flex:1;display:flex;justify-content:center;max-width:500px;margin:0 24px}
.header-search{position:relative;width:100%}
.header-search svg{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#b3b3b3;pointer-events:none;transition:all 0.3s}
.header-search:focus-within svg{color:#4da6ff;filter:drop-shadow(0 0 4px rgba(77,166,255,0.5))}
.header-search input{width:100%;background:rgba(255,255,255,0.05);border:1px solid var(--glass-border);color:#fff;font-family:inherit;font-size:14px;padding:8px 40px 8px 16px;border-radius:20px;outline:none;transition:all 0.2s}
.header-search input::-moz-placeholder{color:#666}
.header-search input::placeholder{color:#666}
.header-search input:focus{background:rgba(255,255,255,0.08);border-color:rgba(77,166,255,0.4);box-shadow:0 0 0 3px rgba(77,166,255,0.1),0 0 12px rgba(77,166,255,0.15)}
.header-right{display:flex;align-items:center;gap:12px}
.header-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,rgba(77,166,255,0.3),rgba(0,212,255,0.2));display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;cursor:pointer;transition:all 0.3s;border:2px solid transparent;overflow:hidden;box-shadow:var(--neon-glow)}
.header-avatar:hover{border-color:rgba(77,166,255,0.6);transform:scale(1.08) rotate(5deg);box-shadow:var(--neon-glow-strong)}
.header-avatar img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}

/* Sidebar */
.sidebar{width:280px;background:linear-gradient(180deg,rgba(18,28,55,0.82),rgba(22,35,68,0.88));backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;position:relative;border-left:1px solid rgba(100,170,255,0.18)}
.sidebar-scroll{flex:1;overflow-y:auto;padding-bottom:90px}
.sidebar-nav{padding:8px}
.sidebar-nav button{width:100%;display:flex;align-items:center;gap:12px;padding:10px 14px;background:none;border:none;color:var(--text-sub);font-family:inherit;font-size:15px;font-weight:500;cursor:pointer;border-radius:6px;transition:all 0.15s}
.sidebar-nav button.active{color:#fff;background:linear-gradient(135deg,rgba(77,166,255,0.18),rgba(0,212,255,0.1));box-shadow:inset 0 0 0 1px rgba(77,166,255,0.25)}
.sidebar-nav button:hover{color:#fff;background:rgba(255,255,255,0.05)}
.sidebar-nav button svg{width:20px;height:20px;flex-shrink:0;transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1)}
.sidebar-nav button:hover svg{transform:scale(1.2) rotate(-10deg);filter:drop-shadow(0 0 4px rgba(77,166,255,0.4))}
.sidebar-nav button.active svg{filter:drop-shadow(0 0 6px rgba(77,166,255,0.6))}
.sidebar-library{padding:0 8px}
.library-header{display:flex;align-items:center;justify-content:space-between;padding:12px 8px 8px}
.library-header button{display:flex;align-items:center;gap:8px;background:none;border:none;color:var(--text-sub);font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:color 0.2s}
.library-header button:hover{color:#fff}
.library-header button svg{width:20px;height:20px;transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1)}
.library-header button:hover svg{transform:scale(1.15) rotate(-5deg);filter:drop-shadow(0 0 4px rgba(77,166,255,0.4))}
.library-actions{display:flex;align-items:center;gap:6px}
.library-action-btn{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,0.07);border:none;color:var(--text-sub);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1)}
.library-action-btn:hover{background:rgba(77,166,255,0.2);color:#fff;transform:rotate(90deg) scale(1.15);box-shadow:0 0 8px rgba(77,166,255,0.3)}
.library-action-btn svg{transition:all 0.3s}
.library-tabs{display:flex;gap:6px;padding:4px 8px 8px;flex-wrap:wrap}
.library-tab{padding:5px 12px;border-radius:20px;background:rgba(255,255,255,0.07);border:none;color:var(--text-sub);font-family:inherit;font-size:11px;font-weight:600;cursor:pointer;transition:all 0.2s;white-space:nowrap}
.library-tab:hover{background:rgba(255,255,255,0.12);color:#fff}
.library-tab.active{background:linear-gradient(135deg,#4da6ff,#00d4ff);color:#fff;box-shadow:0 0 8px rgba(77,166,255,0.3)}
.library-list{display:flex;flex-direction:column;gap:2px}
.library-section-title{display:flex;align-items:center;gap:8px;padding:14px 8px 6px;font-size:11px;font-weight:700;color:var(--text-sub);text-transform:uppercase;letter-spacing:1px}
.library-empty{text-align:center;padding:28px 16px}
.library-empty-icon{width:48px;height:48px;border-radius:50%;background:rgba(77,166,255,0.08);display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.library-create{display:flex;align-items:center;gap:10px;padding:8px;border-radius:6px;background:none;border:none;color:#fff;font-family:inherit;cursor:pointer;transition:background 0.15s;text-align:right;width:100%}
.library-create:hover{background:rgba(255,255,255,0.08)}
.library-create-img{width:44px;height:44px;border-radius:4px;background:rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.library-create-img svg{width:18px;height:18px;color:var(--text-sub);transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1)}
.library-create:hover .library-create-img svg{transform:rotate(90deg) scale(1.2);color:#4da6ff;filter:drop-shadow(0 0 4px rgba(77,166,255,0.5))}
.library-liked{display:flex;align-items:center;gap:10px;padding:8px;border-radius:6px;background:none;border:none;color:#fff;font-family:inherit;cursor:pointer;transition:background 0.15s;text-align:right;width:100%}
.library-liked:hover{background:rgba(255,255,255,0.08)}
.library-liked-img{width:44px;height:44px;border-radius:4px;background:linear-gradient(135deg,#4da6ff,#00d4ff);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.library-liked-img svg{width:18px;height:18px;color:#000;transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1)}
.library-liked:hover .library-liked-img svg{transform:scale(1.2);filter:drop-shadow(0 0 4px rgba(77,166,255,0.4))}
.playlist-item{display:flex;align-items:center;gap:10px;padding:8px;border-radius:6px;background:none;border:none;color:#fff;font-family:inherit;cursor:pointer;transition:background 0.15s;text-align:right;width:100%}
.playlist-item:hover{background:rgba(255,255,255,0.08)}
.playlist-img{width:44px;height:44px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.playlist-info{overflow:hidden}
.playlist-name{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.playlist-desc{font-size:12px;color:var(--text-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#proBadge{margin:8px 12px 0}

/* Main Content */
.main{flex:1;background:transparent;overflow-y:auto;position:relative;transition:margin-left 0.45s cubic-bezier(0.16,1,0.3,1),margin-right 0.45s cubic-bezier(0.16,1,0.3,1)}
.content{min-height:100%}
/* When Now Playing panel is open, shift main content to the right (RTL) or left (LTR) */
body.np-open .main{margin-left:380px}
body.np-open .player{left:380px}
body.np-open .mini-player{left:396px}
/* In English (LTR) mode, the panel is on the right so shift content left */
html[dir="ltr"] body.np-open .main{margin-left:0;margin-right:380px}
html[dir="ltr"] body.np-open .player{left:0;right:380px}
html[dir="ltr"] body.np-open .mini-player{left:auto;right:396px}

/* Hero */
.hero{background:linear-gradient(135deg,rgba(77,166,255,0.1),rgba(0,212,255,0.06),rgba(0,153,255,0.04));padding:40px 32px;margin:0 0 8px;position:relative;overflow:hidden;border:1px solid var(--glass-border);border-radius:var(--radius)}
.hero::before{content:'';position:absolute;top:-50%;right:-30%;width:60%;height:200%;background:radial-gradient(circle,rgba(77,166,255,0.08),transparent 60%);pointer-events:none}
.hero-inner{display:flex;align-items:center;gap:24px;position:relative}
.hero-art{width:120px;height:120px;background:rgba(77,166,255,0.08);border-radius:16px;display:flex;align-items:center;justify-content:center;animation:float 4s ease-in-out infinite;border:1px solid rgba(77,166,255,0.2);box-shadow:var(--neon-glow)}
.hero-art svg{width:60px;height:60px;color:#4da6ff;filter:drop-shadow(0 0 6px rgba(77,166,255,0.5));transition:all 0.4s ease}
.hero-art:hover svg{transform:scale(1.1) rotate(5deg);filter:drop-shadow(0 0 12px rgba(77,166,255,0.8))}
.hero-badge{display:inline-block;padding:4px 12px;border-radius:20px;background:linear-gradient(135deg,rgba(77,166,255,0.2),rgba(0,212,255,0.1));color:#4da6ff;font-size:12px;font-weight:700;margin-bottom:8px;border:1px solid rgba(77,166,255,0.25)}
.hero h1{font-size:28px;font-weight:900;line-height:1.4}
.hero h1 span{background:linear-gradient(135deg,#4da6ff,#00d4ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 8px rgba(77,166,255,0.4))}
.hero p{color:var(--text-sub);font-size:14px;margin-top:8px;line-height:1.8}
.hero-btns{display:flex;gap:10px;margin-top:16px}
.btn-play{display:flex;align-items:center;gap:8px;padding:11px 26px;border-radius:24px;background:linear-gradient(135deg,#4da6ff,#00d4ff);color:#fff;border:none;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:all 0.3s;box-shadow:0 0 12px rgba(77,166,255,0.4),0 4px 16px rgba(77,166,255,0.25)}
.btn-play:hover{transform:scale(1.05);box-shadow:0 0 24px rgba(77,166,255,0.6),0 6px 20px rgba(77,166,255,0.4)}
.btn-outline{display:flex;align-items:center;gap:8px;padding:10px 24px;border-radius:24px;background:rgba(255,255,255,0.08);color:#fff;border:none;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:all 0.2s}
.btn-outline:hover{background:rgba(255,255,255,0.14)}

/* ===== Hero Motion Graphics ===== */
.hero-motion{position:relative;min-height:340px;border-radius:20px;overflow:hidden;background:linear-gradient(135deg,rgba(15,22,40,0.7),rgba(7,10,20,0.9));border:1px solid rgba(77,166,255,0.12);display:flex;align-items:center;justify-content:center;padding:48px 32px;isolation:isolate}
/* Animated gradient background */
.hero-motion::before{content:'';position:absolute;inset:-2px;background:conic-gradient(from 0deg,rgba(77,166,255,0.35),rgba(0,212,255,0.25),rgba(124,58,237,0.3),rgba(77,166,255,0.35));animation:heroGradientSpin 12s linear infinite;z-index:-2;filter:blur(60px);opacity:0.5}
.hero-motion::after{content:'';position:absolute;inset:1px;background:linear-gradient(135deg,rgba(15,22,40,0.92),rgba(7,10,20,0.96));border-radius:19px;z-index:-1}
@keyframes heroGradientSpin{to{transform:rotate(360deg)}}
/* Floating orbs (decorative shapes) */
.hero-orb{position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none;z-index:0}
.hero-orb-1{width:140px;height:140px;background:radial-gradient(circle at 30% 30%,rgba(77,166,255,0.5),transparent 70%);top:-30px;left:-20px;animation:heroFloat1 8s ease-in-out infinite}
.hero-orb-2{width:100px;height:100px;background:radial-gradient(circle at 30% 30%,rgba(0,212,255,0.5),transparent 70%);bottom:-20px;right:10%;animation:heroFloat2 7s ease-in-out infinite 1s}
.hero-orb-3{width:70px;height:70px;background:radial-gradient(circle at 30% 30%,rgba(124,58,237,0.45),transparent 70%);top:30%;right:-10px;animation:heroFloat1 9s ease-in-out infinite 2s}
.hero-orb-4{width:50px;height:50px;background:radial-gradient(circle at 30% 30%,rgba(239,68,68,0.4),transparent 70%);bottom:40%;left:15%;animation:heroFloat2 6s ease-in-out infinite 0.5s}
@keyframes heroFloat1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(20px,-15px) scale(1.1)}}
@keyframes heroFloat2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-15px,20px) scale(0.95)}}
/* Equalizer bars (left and right) */
.hero-eq{position:absolute;display:flex;align-items:flex-end;gap:4px;height:100%;z-index:0;opacity:0.35}
.hero-eq-left{left:8%;top:0;transform-origin:bottom}
.hero-eq-right{right:8%;top:0;transform-origin:bottom}
.hero-eq span{display:block;width:6px;background:linear-gradient(180deg,#4da6ff,#00d4ff);border-radius:3px 3px 0 0;animation:heroEqBar 1.2s ease-in-out infinite}
.hero-eq-left span:nth-child(1){height:30%;animation-delay:0s}
.hero-eq-left span:nth-child(2){height:50%;animation-delay:0.2s}
.hero-eq-left span:nth-child(3){height:75%;animation-delay:0.4s}
.hero-eq-left span:nth-child(4){height:60%;animation-delay:0.1s}
.hero-eq-left span:nth-child(5){height:85%;animation-delay:0.3s}
.hero-eq-left span:nth-child(6){height:45%;animation-delay:0.5s}
.hero-eq-left span:nth-child(7){height:70%;animation-delay:0.15s}
.hero-eq-left span:nth-child(8){height:55%;animation-delay:0.35s}
.hero-eq-right span:nth-child(1){height:40%;animation-delay:0.25s}
.hero-eq-right span:nth-child(2){height:65%;animation-delay:0.05s}
.hero-eq-right span:nth-child(3){height:50%;animation-delay:0.45s}
.hero-eq-right span:nth-child(4){height:80%;animation-delay:0.15s}
.hero-eq-right span:nth-child(5){height:35%;animation-delay:0.35s}
.hero-eq-right span:nth-child(6){height:70%;animation-delay:0.55s}
.hero-eq-right span:nth-child(7){height:55%;animation-delay:0.2s}
.hero-eq-right span:nth-child(8){height:75%;animation-delay:0.4s}
@keyframes heroEqBar{0%,100%{transform:scaleY(0.4)}50%{transform:scaleY(1)}}
/* Floating music notes */
.hero-note{position:absolute;color:rgba(77,166,255,0.5);z-index:0;animation:heroNoteFloat 6s ease-in-out infinite}
.hero-note svg{display:block}
.hero-note-1{top:15%;left:20%;animation-delay:0s}
.hero-note-2{top:70%;right:25%;animation-delay:2s;color:rgba(0,212,255,0.5)}
.hero-note-3{top:25%;right:18%;animation-delay:4s;color:rgba(124,58,237,0.5)}
.hero-note-4{bottom:20%;left:30%;animation-delay:1s;color:rgba(239,68,68,0.4)}
@keyframes heroNoteFloat{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(10px,-12px) rotate(8deg)}}
/* Center content */
.hero-motion-content{position:relative;z-index:2;text-align:center;max-width:680px;display:flex;flex-direction:column;align-items:center;gap:14px}
.hero-motion-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:20px;background:linear-gradient(135deg,rgba(77,166,255,0.25),rgba(0,212,255,0.12));border:1px solid rgba(77,166,255,0.35);color:#4da6ff;font-size:11px;font-weight:700;letter-spacing:0.5px;animation:heroBadgePulse 2.5s ease-in-out infinite}
@keyframes heroBadgePulse{0%,100%{box-shadow:0 0 0 0 rgba(77,166,255,0.3)}50%{box-shadow:0 0 0 8px rgba(77,166,255,0)}}
.hero-motion-title{font-size:56px;font-weight:900;line-height:1.1;margin:0;letter-spacing:-1px;position:relative;display:inline-block;filter:drop-shadow(0 0 10px rgba(77,166,255,0.35)) drop-shadow(0 0 20px rgba(77,166,255,0.15))}
.hero-motion-title span{display:inline-block;background:linear-gradient(90deg,#fff,#4da6ff,#a78bfa,#00d4ff,#f472b6,#fff);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;will-change:transform,background-position;animation:heroTitleGradient 6s linear infinite}
.hero-motion-title span:nth-child(1){animation:heroTitleGradient 6s linear infinite,heroWord1 4s ease-in-out infinite}
.hero-motion-title span:nth-child(2){animation:heroTitleGradient 6s linear infinite,heroWord2 4s ease-in-out infinite}
.hero-motion-title span:nth-child(3){animation:heroTitleGradient 6s linear infinite,heroWord3 4s ease-in-out infinite}
@keyframes heroTitleGradient{0%{background-position:0% 50%}100%{background-position:300% 50%}}
@keyframes heroWord1{0%,100%{transform:translateY(-10px)}50%{transform:translateY(10px)}}
@keyframes heroWord2{0%,100%{transform:translateY(10px)}50%{transform:translateY(-10px)}}
@keyframes heroWord3{0%,100%{transform:translateY(0)}25%{transform:translateY(10px)}50%{transform:translateY(0)}75%{transform:translateY(-10px)}}
.hero-motion-sub{font-size:14px;color:var(--text-sub);margin:0;line-height:1.7;max-width:520px}
.hero-motion-btns{display:flex;gap:12px;margin-top:6px;flex-wrap:wrap;justify-content:center}
/* Rotating ring around play icon */
.hero-play-ring{position:absolute;width:120px;height:120px;left:50%;top:50%;transform:translate(-50%,-50%);border:1px dashed rgba(77,166,255,0.3);border-radius:50%;animation:heroRingSpin 20s linear infinite;z-index:1}
.hero-play-ring::before{content:'';position:absolute;width:8px;height:8px;background:#4da6ff;border-radius:50%;top:-4px;left:50%;transform:translateX(-50%);box-shadow:0 0 12px rgba(77,166,255,0.8)}
@keyframes heroRingSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.hero-play-ring-2{width:170px;height:170px;animation-duration:30s;animation-direction:reverse;border-color:rgba(0,212,255,0.2);border-style:dotted}
.hero-play-ring-2::before{background:#00d4ff;box-shadow:0 0 12px rgba(0,212,255,0.8)}

/* Quick Access */
.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.quick-item{display:flex;align-items:center;gap:10px;padding:4px;background:rgba(255,255,255,0.05);border-radius:4px;border:none;color:#fff;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:background 0.15s;overflow:hidden;text-align:right}
.quick-item:hover{background:rgba(255,255,255,0.1)}
.quick-item-img{width:44px;height:44px;border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.quick-item span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quick-play{display:none;width:32px;height:32px;border-radius:50%;background:var(--accent);align-items:center;justify-content:center;flex-shrink:0;margin-left:auto}
.quick-play svg{width:14px;height:14px;color:#000;transition:all 0.3s}
.quick-item:hover .quick-play svg{transform:scale(1.3)}
.quick-item:hover .quick-play{display:flex}

/* Sections */
.section{padding:16px 32px}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.section-header h2{font-size:22px;font-weight:900;transition:all 0.3s;position:relative;display:inline-block}
.section-header h2::after{content:'';position:absolute;bottom:-4px;right:0;width:0;height:2px;background:linear-gradient(90deg,#4da6ff,#00d4ff);transition:width 0.4s ease;border-radius:2px}
.section-header:hover h2::after{width:100%}
.section-header:hover h2{filter:drop-shadow(0 0 6px rgba(77,166,255,0.3))}
.section-header a{color:var(--text-sub);font-size:12px;font-weight:700;text-decoration:none;transition:color 0.2s}
.section-header a:hover{color:#fff}

/* Cards */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
.card{background:rgba(255,255,255,0.03);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:12px;padding:14px;border:1px solid var(--glass-border);color:#fff;font-family:inherit;cursor:pointer;transition:all 0.25s;text-align:right;width:100%;position:relative;overflow:hidden}
.card:hover{background:rgba(255,255,255,0.06);transform:translateY(-3px);border-color:rgba(77,166,255,0.3);box-shadow:0 8px 24px rgba(0,0,0,0.3),0 0 16px rgba(77,166,255,0.1)}
.card-art{width:100%;aspect-ratio:1;border-radius:6px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;position:relative;overflow:hidden}
.card-art img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:6px;position:absolute;inset:0}
.card-art svg{width:40px;height:40px;opacity:0.5;transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1)}
.card:hover .card-art svg{opacity:0.8;transform:scale(1.1) rotate(-5deg);filter:drop-shadow(0 0 8px rgba(77,166,255,0.4))}
.card-play{position:absolute;bottom:8px;left:8px;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#4da6ff,#00d4ff);display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(8px);transition:all 0.2s;box-shadow:0 4px 16px rgba(77,166,255,0.3),0 0 10px rgba(77,166,255,0.2)}
.card-play svg{width:16px;height:16px;color:#fff;opacity:1;transition:all 0.3s}
.card:hover .card-play svg{transform:scale(1.2)}
.card:hover .card-play{opacity:1;transform:translateY(0)}
.card-title{font-size:14px;font-weight:700;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-sub{font-size:12px;color:var(--text-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card.now-playing{outline:2px solid var(--track-color, var(--accent));outline-offset:-2px;animation:nowPlayingPulse 2s ease-in-out infinite}
@keyframes nowPlayingPulse{0%,100%{outline-color:var(--track-color, rgba(77,166,255,0.6));box-shadow:0 0 10px var(--track-color, rgba(77,166,255,0.3))}50%{outline-color:var(--track-color, rgba(77,166,255,1));box-shadow:0 0 22px var(--track-color, rgba(77,166,255,0.6)),0 0 35px var(--track-color, rgba(77,166,255,0.3))}}
.playing-bars{display:flex;align-items:flex-end;gap:2px;height:24px}
.playing-bars span{display:block;width:4px;background:var(--track-color, var(--accent));border-radius:2px;animation:bar1 0.8s ease infinite}
.playing-bars span:nth-child(2){animation:bar2 0.8s ease infinite}
.playing-bars span:nth-child(3){animation:bar3 0.8s ease infinite}

/* Artists */
.artist-grid{display:flex;gap:20px;overflow:visible;padding:12px 4px 4px;margin:-12px -4px 0}
.artist-item{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:none;color:#fff;font-family:inherit;cursor:pointer;min-width:96px;flex-shrink:0;transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1)}
.artist-item:hover{transform:translateY(-4px)}
.artist-circle{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;transition:box-shadow 0.4s ease;position:relative;overflow:hidden;flex-shrink:0}
.artist-circle::before{content:'';position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,transparent,rgba(77,166,255,0.2));opacity:0;transition:opacity 0.3s}
.artist-item:hover .artist-circle{box-shadow:0 4px 20px rgba(77,166,255,0.35),0 0 24px rgba(77,166,255,0.18)}
.artist-item:hover .artist-circle::before{opacity:1}
.artist-circle span{transition:color 0.3s}
.artist-name{transition:color 0.3s,filter 0.3s}
.artist-item:hover .artist-name{color:#4da6ff;filter:drop-shadow(0 0 4px rgba(77,166,255,0.3))}
.artist-name{font-size:12px;font-weight:600;text-align:center}
.artist-genre{font-size:10px;color:var(--text-sub);text-align:center}

/* Charts */
.chart-list{display:flex;flex-direction:column;gap:2px}
.chart-item{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:6px;background:none;border:none;color:#fff;font-family:inherit;cursor:pointer;transition:background 0.15s;text-align:right;width:100%}
.chart-item:hover{background:rgba(255,255,255,0.08)}
.chart-item.current{background:rgba(77,166,255,0.08)}
.chart-num{width:24px;font-size:14px;font-weight:700;color:var(--text-sub);text-align:center;flex-shrink:0}
.chart-art{width:40px;height:40px;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chart-art svg{width:16px;height:16px;opacity:0.5;transition:all 0.3s}
.chart-item:hover .chart-art svg{opacity:0.8;transform:scale(1.2);filter:drop-shadow(0 0 4px rgba(77,166,255,0.4))}
.chart-info{flex:1;min-width:0}
.chart-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chart-title.current-track{color:var(--accent)}
.chart-artist{font-size:12px;color:var(--text-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chart-plays{font-size:12px;color:var(--text-sub);flex-shrink:0}

/* Categories */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.cat-item{padding:16px;border-radius:8px;border:none;font-family:inherit;font-size:14px;font-weight:700;color:#fff;cursor:pointer;transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);text-align:right;position:relative;overflow:hidden}
.cat-item::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(77,166,255,0.15));opacity:0;transition:opacity 0.3s}
.cat-item:hover{transform:scale(1.08) translateY(-3px);filter:brightness(1.2);box-shadow:0 8px 20px rgba(0,0,0,0.3),0 0 16px rgba(77,166,255,0.15)}
.cat-item:hover::before{opacity:1}

/* Player */
.player{position:fixed;bottom:0;left:0;right:0;background:linear-gradient(180deg,rgba(16,25,52,0.92) 0%,rgba(20,32,66,0.96) 100%);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-top:1px solid rgba(100,170,255,0.18);z-index:500;display:flex;flex-direction:column;box-shadow:0 -6px 32px rgba(0,0,0,0.45),0 -1px 0 rgba(100,170,255,0.12);transition:background 0.4s ease,border-top-color 0.4s ease,transform 0.3s cubic-bezier(0.16,1,0.3,1),left 0.45s cubic-bezier(0.16,1,0.3,1),right 0.45s cubic-bezier(0.16,1,0.3,1)}
.player::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 5%,var(--track-color,rgba(77,166,255,0.5)) 20%,var(--track-color,rgba(0,212,255,0.6)) 35%,rgba(167,139,250,0.4) 50%,var(--track-color,rgba(236,72,153,0.3)) 65%,var(--track-color,rgba(77,166,255,0.5)) 80%,transparent 95%);background-size:200% 100%;animation:playerTopShine 5s ease-in-out infinite;box-shadow:0 0 8px var(--track-color,rgba(77,166,255,0.3));transition:background 0.6s ease}
@keyframes playerTopShine{0%,100%{opacity:0.4;transform:scaleX(0.7);background-position:0% 0}50%{opacity:1;transform:scaleX(1.2);background-position:100% 0}}
.player::after{content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:60%;height:1px;background:linear-gradient(90deg,transparent,var(--track-color,rgba(0,212,255,0.8)),transparent);filter:blur(1px);animation:playerGlow 4s ease-in-out infinite;transition:background 0.6s ease}
@keyframes playerGlow{0%,100%{opacity:0.3;width:40%}50%{opacity:0.9;width:70%}}
.player.hidden{display:none}
.progress-bar-container{height:6px;background:rgba(255,255,255,0.08);cursor:pointer;position:relative;transition:height 0.25s cubic-bezier(0.16,1,0.3,1),border-radius 0.25s;border-radius:3px;flex-shrink:0}
.progress-bar-container:hover{height:10px;border-radius:5px}
.progress-track{position:absolute;inset:0;background:rgba(255,255,255,0.06);border-radius:inherit}
.progress-fill{height:100%;background:linear-gradient(90deg,#4da6ff,#00d4ff,#a78bfa);position:absolute;top:0;left:0;transition:width 0.1s linear;border-radius:inherit;box-shadow:0 0 12px rgba(77,166,255,0.5)}
.progress-fill::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);animation:progressShine 2s linear infinite;border-radius:inherit}
.progress-dot{width:14px;height:14px;border-radius:50%;background:#fff;position:absolute;top:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity 0.2s,transform 0.2s cubic-bezier(0.34,1.56,0.64,1);box-shadow:0 0 12px rgba(77,166,255,0.8),0 0 4px rgba(255,255,255,0.5),0 2px 6px rgba(0,0,0,0.4);pointer-events:none;border:2px solid #4da6ff}
.progress-bar-container:hover .progress-dot{opacity:1;transform:translate(-50%,-50%) scale(1.2)}
.player-inner{display:flex;align-items:center;padding:0 16px;height:72px;gap:16px;position:relative}
.player-track{display:flex;align-items:center;gap:12px;min-width:180px;flex:1;position:relative}
.player-track-art{width:48px;height:48px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;overflow:hidden;transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1)}
.player-track-art::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,0.15));pointer-events:none;transition:opacity 0.3s}
.player-track-art::before{content:'';position:absolute;inset:0;border-radius:8px;border:1px solid rgba(255,255,255,0.08);pointer-events:none}
.player-track-art:hover{transform:scale(1.08) rotate(-3deg);box-shadow:0 4px 20px rgba(77,166,255,0.4)}
.player-track-art.is-playing{animation:artPulse 2s ease-in-out infinite}
@keyframes artPulse{0%,100%{box-shadow:0 0 0 0 rgba(77,166,255,0.3)}50%{box-shadow:0 0 0 4px rgba(77,166,255,0.1)}}
.player-track-art svg{width:20px;height:20px;opacity:0.5;transition:all 0.3s}
.player-track-art:hover svg{opacity:0.8;transform:scale(1.1) rotate(-5deg)}
.player-track-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color 0.2s;cursor:pointer}
.player-track-title:hover{color:var(--accent)}
.player-track-artist{font-size:12px;color:var(--text-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:color 0.2s}
.player-track-artist:hover{color:var(--accent)}
.player-controls{display:flex;align-items:center;gap:12px;flex-shrink:0}
.player-btn{background:none;border:none;color:var(--text-sub);cursor:pointer;padding:4px;transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1);display:flex;align-items:center;justify-content:center}
.player-btn:hover{color:#fff;transform:scale(1.15) rotate(5deg);filter:drop-shadow(0 0 6px rgba(77,166,255,0.4))}
.player-btn:active{transform:scale(0.9)}
.player-btn.active{color:var(--accent);filter:drop-shadow(0 0 4px rgba(77,166,255,0.5));animation:btnActivate 0.4s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes btnActivate{0%{transform:scale(0.8) rotate(-15deg)}50%{transform:scale(1.2) rotate(5deg)}100%{transform:scale(1) rotate(0)}}
.pl-icon-btn.active{color:var(--accent);background:rgba(77,166,255,0.12);filter:drop-shadow(0 0 6px rgba(77,166,255,0.4));animation:btnActivate 0.4s cubic-bezier(0.34,1.56,0.64,1)}
.pl-icon-btn.active svg{transform:scale(1.1)}
.player-btn svg{transition:all 0.25s}
.player-btn-play{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#4da6ff,#00d4ff);color:#fff;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:all 0.2s;box-shadow:0 0 12px rgba(77,166,255,0.4),0 4px 16px rgba(77,166,255,0.25);position:relative;overflow:hidden}
.player-btn-play::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 30%,rgba(255,255,255,0.25) 50%,transparent 70%);background-size:200% 100%;animation:progressShine 3s linear infinite;pointer-events:none}
.player-btn-play:hover{transform:scale(1.1);box-shadow:0 0 20px rgba(77,166,255,0.6),0 6px 20px rgba(77,166,255,0.35);animation:glowPulse 1.5s ease infinite}
.player-btn-play svg{width:16px;height:16px;position:relative;z-index:1}
.player-progress{display:flex;align-items:center;gap:8px;flex-shrink:0}
.player-progress span{font-size:11px;color:var(--text-sub);min-width:36px;text-align:center}
.player-volume{display:flex;align-items:center;gap:8px;flex-shrink:0}
.player-volume input[type=range]{-webkit-appearance:none;width:100px;height:5px;background:linear-gradient(90deg,var(--track-color,#0284c7) 0%,var(--track-color,#0284c7) 75%,rgba(255,255,255,0.2) 75%,rgba(255,255,255,0.2) 100%);border-radius:3px;outline:none;cursor:pointer;transition:all 0.3s cubic-bezier(0.16,1,0.3,1);direction:ltr}
.player-volume input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:transparent;box-shadow:inset 0 1px 2px rgba(0,0,0,0.3);-webkit-transition:all 0.3s ease;transition:all 0.3s ease}
.player-volume input[type=range]:hover::-webkit-slider-runnable-track{height:7px;box-shadow:inset 0 1px 2px rgba(0,0,0,0.3),0 0 8px var(--track-color,rgba(77,166,255,0.3))}
.player-volume input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#fff,#e0e0e0);cursor:pointer;box-shadow:0 0 6px rgba(255,255,255,0.3),0 2px 4px rgba(0,0,0,0.3);-webkit-transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1);transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1);margin-top:-4.5px;border:2px solid var(--track-color,rgba(255,255,255,0.3))}
.player-volume input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.4);box-shadow:0 0 12px var(--track-color,rgba(77,166,255,0.6)),0 2px 6px rgba(0,0,0,0.4);border-color:var(--track-color,#4da6ff)}
.player-volume input[type=range]:active::-webkit-slider-thumb{transform:scale(1.5);animation:volPulse 0.6s ease infinite}
@keyframes volPulse{0%,100%{box-shadow:0 0 8px var(--track-color,rgba(77,166,255,0.4))}50%{box-shadow:0 0 16px var(--track-color,rgba(77,166,255,0.8))}}
.player-volume input[type=range]::-moz-range-track{height:5px;border-radius:3px;background:rgba(255,255,255,0.15)}
.player-volume input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;cursor:pointer;border:2px solid var(--track-color,rgba(255,255,255,0.3));box-shadow:0 0 6px rgba(255,255,255,0.3)}
.player-actions{display:flex;align-items:center;gap:6px;flex:1;justify-content:flex-end}
.like-btn{transition:all 0.15s}
.like-btn.liked{color:#4da6ff;filter:drop-shadow(0 0 4px rgba(77,166,255,0.5))}
.like-btn.pop{animation:likePop 0.3s ease}
.player-close{background:none;border:none;color:var(--text-sub);cursor:pointer;padding:4px;transition:color 0.2s;font-size:16px;display:flex;align-items:center;justify-content:center}
.player-close:hover{color:#fff}

/* Mini Player */
.mini-player{position:fixed;bottom:16px;left:16px;right:16px;background:rgba(15,22,40,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(100,170,255,0.14);border-radius:12px;padding:10px 16px;z-index:500;display:flex;align-items:center;gap:12px;box-shadow:0 8px 30px rgba(0,0,0,0.5);animation:slideUp 0.3s ease;cursor:pointer;transition:left 0.45s cubic-bezier(0.16,1,0.3,1),right 0.45s cubic-bezier(0.16,1,0.3,1)}
.mini-player.hidden{display:none}
.mini-player-art{width:40px;height:40px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mini-player-art svg{width:16px;height:16px;opacity:0.5}
.mini-player-info{flex:1;overflow:hidden}
.mini-player-title{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-player-artist{font-size:10px;color:var(--text-sub)}
.mini-player-btn{width:32px;height:32px;border-radius:50%;background:var(--accent);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.mini-player-btn svg{width:14px;height:14px;color:#000}

/* Mobile Nav */
.mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:rgba(15,22,40,0.9);border-top:1px solid rgba(255,255,255,0.05);z-index:101;padding:6px 4px;padding-bottom:calc(6px + env(safe-area-inset-bottom,0px));justify-content:space-around;overflow-x:auto;overflow-y:hidden;gap:2px}
.mobile-nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:none;color:var(--text-sub);font-family:inherit;font-size:9px;cursor:pointer;padding:4px 8px;flex-shrink:0;min-width:54px;min-height:44px;-webkit-tap-highlight-color:transparent}
.mobile-nav-item svg{width:20px;height:20px}
.mobile-nav-item.active{color:var(--accent)}

/* Auth Modal */
.auth-overlay{position:fixed;inset:0;z-index:600;display:flex;align-items:center;justify-content:center;background:rgba(5,8,16,0.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:fadeIn 0.2s ease}
.auth-modal{background:rgba(15,22,40,0.85);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-radius:16px;width:400px;max-width:90vw;overflow:hidden;animation:scaleIn 0.25s ease;border:1px solid var(--glass-border);box-shadow:0 24px 80px rgba(0,0,0,0.5),0 0 40px rgba(77,166,255,0.08)}
.auth-header{padding:28px 24px 0;text-align:center}
.auth-tabs{display:flex;gap:4px;margin:16px 24px 0;background:rgba(20,28,50,0.8);border:1px solid rgba(100,170,255,0.1);border-radius:8px;padding:4px}
.auth-tab{flex:1;padding:8px;border:none;background:none;color:var(--text-sub);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;border-radius:6px;transition:all 0.2s}
.auth-tab.active{background:linear-gradient(135deg,#4da6ff,#00d4ff);color:#fff;box-shadow:0 0 8px rgba(77,166,255,0.3)}
.auth-form{display:flex;flex-direction:column;gap:12px;padding:20px 24px}
.auth-field{position:relative}
.auth-field label{display:block;font-size:12px;font-weight:600;color:var(--text-sub);margin-bottom:6px}
.auth-field input{width:100%;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);color:#fff;font-family:inherit;font-size:13px;padding:10px 14px;border-radius:8px;outline:none;transition:border-color 0.2s;direction:ltr;text-align:right}
.auth-field input:focus{border-color:var(--accent)}
.password-toggle{position:absolute;left:10px;top:34px;background:none;border:none;color:var(--text-sub);cursor:pointer;padding:4px}
.auth-submit{width:100%;padding:12px;border-radius:24px;background:linear-gradient(135deg,#4da6ff,#00d4ff);color:#fff;border:none;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:all 0.2s;box-shadow:0 0 10px rgba(77,166,255,0.3)}
.auth-submit:hover{transform:scale(1.02);box-shadow:0 0 16px rgba(77,166,255,0.5)}
.auth-error{color:#ef4444;font-size:12px;text-align:center;min-height:16px}
.auth-success{color:#22c55e;font-size:12px;text-align:center;min-height:16px}
.auth-divider{display:flex;align-items:center;gap:12px;padding:0 24px}
.auth-divider span{color:var(--text-sub);font-size:12px}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,0.1)}
.auth-social{display:flex;gap:10px;padding:16px 24px 24px;justify-content:center}
.auth-social button{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:24px;border:1px solid rgba(255,255,255,0.1);background:none;color:#fff;font-family:inherit;font-size:12px;font-weight:500;cursor:pointer;transition:all 0.2s}
.auth-social button:hover{background:rgba(255,255,255,0.08)}
.auth-footer{padding:0 24px 24px;text-align:center;font-size:12px;color:var(--text-sub)}
.auth-footer a{color:var(--accent);text-decoration:none;font-weight:600}

/* Pro Modal — Premium design with animations */
.modal-overlay{position:fixed;inset:0;z-index:600;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.8);backdrop-filter:blur(4px)}
.modal-overlay.show{display:flex;animation:fadeIn 0.3s ease}
.modal{background:rgba(12,18,35,0.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(77,166,255,0.2);border-radius:20px;width:460px;max-width:92vw;overflow:hidden;animation:proModalIn 0.45s cubic-bezier(0.34,1.56,0.64,1);box-shadow:0 24px 64px rgba(0,0,0,0.6),0 0 40px rgba(77,166,255,0.1)}
@keyframes proModalIn{0%{opacity:0;transform:scale(0.85) translateY(30px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.modal-header{background:linear-gradient(135deg,#0c1428,#1a1a3e 50%,#0a1a2a);padding:28px 24px;position:relative;overflow:hidden}
.modal-header::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 50% 0%,rgba(77,166,255,0.2),transparent 70%)}
.modal-header::after{content:'';position:absolute;top:-40px;left:-40px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(77,166,255,0.15),transparent 60%);animation:proFloat 6s ease-in-out infinite}
@keyframes proFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,10px)}}
.modal-header-inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between}
.modal-title{display:flex;align-items:center;gap:14px}
.modal-crown{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,rgba(77,166,255,0.3),rgba(0,212,255,0.15));border:1px solid rgba(77,166,255,0.3);display:flex;align-items:center;justify-content:center;animation:proCrown 4s ease-in-out infinite;box-shadow:0 4px 20px rgba(77,166,255,0.2)}
@keyframes proCrown{0%,100%{transform:rotate(-5deg) scale(1)}50%{transform:rotate(5deg) scale(1.05)}}
.modal-crown svg{width:26px;height:26px;color:var(--accent);filter:drop-shadow(0 0 6px rgba(77,166,255,0.5))}
.modal h2{font-size:24px;font-weight:900}
.modal-sub{font-size:13px;color:rgba(255,255,255,0.5);margin-top:2px}
.modal-close{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.08);border:none;color:#b3b3b3;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;outline:none}
.modal-close:hover{background:rgba(255,255,255,0.15);color:#fff;transform:rotate(90deg)}
.modal-body{padding:24px}
.plan-tabs{display:flex;gap:6px;background:rgba(20,28,50,0.6);border:1px solid rgba(100,170,255,0.1);border-radius:12px;padding:6px;margin-bottom:24px}
.plan-tab{flex:1;padding:10px 8px;border:none;background:none;color:var(--text-sub);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;border-radius:8px;transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);outline:none}
.plan-tab:hover{color:#fff}
.plan-tab.active{background:linear-gradient(135deg,#4da6ff,#00d4ff);color:#000;box-shadow:0 4px 12px rgba(77,166,255,0.3);transform:scale(1.03)}

/* ===== Plan Cards ===== */
.plan-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:20px}
.plan-card{background:rgba(15,22,40,0.6);border:1px solid rgba(100,170,255,0.1);border-radius:14px;padding:16px 10px;text-align:center;cursor:pointer;transition:all 0.35s cubic-bezier(0.34,1.56,0.64,1);position:relative;overflow:hidden;outline:none}
.plan-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(77,166,255,0.08),transparent 50%);opacity:0;transition:opacity 0.3s}
.plan-card:hover{transform:translateY(-3px);border-color:rgba(77,166,255,0.25);box-shadow:0 8px 20px rgba(0,0,0,0.3)}
.plan-card:hover::before{opacity:1}
.plan-card.active{border-color:rgba(77,166,255,0.5);background:linear-gradient(135deg,rgba(77,166,255,0.12),rgba(0,212,255,0.06));box-shadow:0 8px 24px rgba(77,166,255,0.15),inset 0 0 0 1px rgba(77,166,255,0.2);transform:translateY(-2px)}
.plan-card.active::before{opacity:1}
.plan-card-badge{position:absolute;top:-1px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#fbbf24,#f97316);color:#000;font-size:9px;font-weight:800;padding:3px 10px;border-radius:0 0 8px 8px;white-space:nowrap;box-shadow:0 2px 8px rgba(251,191,36,0.3)}
.plan-card-badge.best{background:linear-gradient(135deg,#4da6ff,#00d4ff);box-shadow:0 2px 8px rgba(77,166,255,0.3)}
.plan-card-header{margin-bottom:8px}
.plan-card-icon{font-size:24px;margin-bottom:4px;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3))}
.plan-card-name{font-size:12px;font-weight:700;color:var(--text-sub)}
.plan-card.active .plan-card-name{color:#fff}
.plan-card-price{font-size:16px;font-weight:900;color:var(--accent);line-height:1.2}
.plan-card.active .plan-card-price{background:linear-gradient(135deg,#fff,#4da6ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.plan-card-period{font-size:10px;color:var(--text-sub);display:block;margin-top:2px;font-weight:500}
.plan-price{text-align:center;margin-bottom:20px;padding:16px;background:linear-gradient(135deg,rgba(77,166,255,0.08),rgba(124,58,237,0.04));border:1px solid rgba(77,166,255,0.15);border-radius:14px;position:relative;overflow:hidden}
.plan-price::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(77,166,255,0.5),transparent)}
.plan-price .amount{font-size:36px;font-weight:900;background:linear-gradient(135deg,#fff,#4da6ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:block;line-height:1.2;animation:proPriceIn 0.4s ease}
@keyframes proPriceIn{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}
@keyframes proPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(1.3)}}
.plan-price .period{font-size:13px;color:var(--text-sub);margin-top:4px;display:block}
.plan-features{list-style:none;margin-bottom:20px}
.plan-features li{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:13px;color:#e0e0e0}
.feature-check{width:20px;height:20px;border-radius:50%;background:rgba(77,166,255,0.15);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.feature-check svg{width:12px;height:12px;color:var(--accent)}
.upgrade-btn{width:100%;padding:16px;border-radius:28px;background:linear-gradient(135deg,#4da6ff,#00d4ff);color:#000;border:none;font-family:inherit;font-size:15px;font-weight:900;cursor:pointer;transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);box-shadow:0 6px 20px rgba(77,166,255,0.3);position:relative;overflow:hidden;outline:none}
.upgrade-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,0.3) 50%,transparent 70%);transform:translateX(-100%);transition:transform 0.6s}
.upgrade-btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 28px rgba(77,166,255,0.5)}
.upgrade-btn:hover::before{transform:translateX(100%)}
.upgrade-btn:active{transform:translateY(0) scale(0.98)}

/* Animations */
@keyframes npArtPulse{0%,100%{box-shadow:0 20px 60px rgba(77,166,255,0.4),0 0 80px rgba(77,166,255,0.2)}50%{box-shadow:0 24px 70px rgba(77,166,255,0.5),0 0 100px rgba(77,166,255,0.35)}}
@keyframes npArtRotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes npPlayGlow{0%,100%{box-shadow:0 4px 20px rgba(77,166,255,0.5),0 0 30px rgba(77,166,255,0.3)}50%{box-shadow:0 4px 24px rgba(77,166,255,0.6),0 0 45px rgba(77,166,255,0.5)}}
@keyframes npVinylSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes npWaveBar{0%,100%{height:20%}50%{height:100%}}
@keyframes progressShine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes npEqualizer{0%,100%{transform:scaleY(0.3)}50%{transform:scaleY(1)}}
@keyframes npFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ===== Now Playing motion graphics ===== */
@keyframes npBgAurora{0%,100%{transform:translate(0,0) scale(1);opacity:0.4}33%{transform:translate(40px,-30px) scale(1.1);opacity:0.6}66%{transform:translate(-30px,40px) scale(0.95);opacity:0.5}}
@keyframes npBgNebulaSwirl{0%,100%{transform:rotate(0deg) scale(1);opacity:0.3}50%{transform:rotate(180deg) scale(1.2);opacity:0.45}}
@keyframes npParticleRise{0%{transform:translate(0,0) scale(0);opacity:0}20%{opacity:0.8}100%{transform:translate(var(--px,20px),var(--py,-100px)) scale(1);opacity:0}}
@keyframes npStarBurst{0%,100%{opacity:0.3;transform:scale(0.7)}50%{opacity:0.9;transform:scale(1.2)}}
@keyframes npVinylGlow{0%,100%{filter:drop-shadow(0 0 8px rgba(255,255,255,0.3))}50%{filter:drop-shadow(0 0 16px rgba(255,255,255,0.6))}}
@keyframes npVinylShine{0%{transform:translate(-50%,-50%) rotate(0deg);opacity:0}30%{opacity:0.5}70%{opacity:0.5}100%{transform:translate(-50%,-50%) rotate(360deg);opacity:0}}
@keyframes npControlBtnGlow{0%,100%{box-shadow:0 0 0 0 rgba(77,166,255,0)}50%{box-shadow:0 0 0 8px rgba(77,166,255,0.15)}}
@keyframes npProgressPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
@keyframes npArtRing{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes npLikeBurst{0%{transform:scale(0);opacity:1}100%{transform:scale(2.5);opacity:0}}
@keyframes npTimeTick{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes npAuroraBeam{0%{transform:translateX(-100%) skewX(-15deg);opacity:0}50%{opacity:0.3}100%{transform:translateX(200%) skewX(-15deg);opacity:0}}
@keyframes npBgFloat{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes npLyricPop{0%{opacity:0;transform:translateY(8px) scale(0.95)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes npArtistCardShine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes npArtistAvatarSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes npControlRipple{0%{transform:scale(0.8);opacity:0.5}100%{transform:scale(2);opacity:0}}
@keyframes npBeatPulse{0%,100%{transform:scale(1)}25%{transform:scale(1.08)}50%{transform:scale(0.96)}75%{transform:scale(1.05)}}
@keyframes npGlowOrb{0%,100%{opacity:0.2;transform:translate(0,0) scale(1)}50%{opacity:0.5;transform:translate(15px,-15px) scale(1.1)}}

/* Now playing panel styles */
.np-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.np-particle{position:absolute;bottom:0;width:4px;height:4px;border-radius:50%;background:radial-gradient(circle,#fff,transparent);animation:npParticleRise 4s ease-out infinite;opacity:0}
.np-bg-layer{position:absolute;inset:0;pointer-events:none}

/* Vinyl effect for album art */
.np-vinyl{position:absolute;inset:-20px;border-radius:50%;background:
  repeating-radial-gradient(circle,rgba(0,0,0,0.6) 0px,rgba(0,0,0,0.6) 2px,rgba(40,40,40,0.6) 3px,rgba(0,0,0,0.6) 4px);
  animation:npVinylSpin 12s linear infinite;opacity:0.3;pointer-events:none}

/* Conic glow ring around album art */
.np-art-ring{position:absolute;inset:-8px;border-radius:18px;background:conic-gradient(from 0deg,transparent,rgba(77,166,255,0.5),transparent,rgba(167,139,250,0.5),transparent);animation:npArtRing 8s linear infinite;opacity:0.5;filter:blur(8px);pointer-events:none}

/* Control button with ripple */
.np-control-btn{position:relative;overflow:visible}
.np-control-btn::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid rgba(77,166,255,0);transition:border-color 0.2s;pointer-events:none}
.np-control-btn:active::after{animation:npControlRipple 0.6s ease-out}

/* Now playing progress bar with beat */
.np-progress-fill::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.5) 50%,transparent 100%);background-size:200% 100%;animation:progressShine 1.5s linear infinite}

/* Artist card with shine effect */
.np-artist-card{position:relative;overflow:hidden;transition:all 0.3s cubic-bezier(0.16,1,0.3,1);cursor:pointer}
.np-artist-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,0.08) 50%,transparent 70%);background-size:200% 100%;animation:npArtistCardShine 4s linear infinite;pointer-events:none;z-index:2}
.np-artist-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(77,166,255,0.2);border-color:rgba(77,166,255,0.4)!important}
.np-artist-card:hover .np-artist-avatar{animation:npArtistAvatarSpin 4s linear infinite}
.np-artist-card:hover .np-artist-go{transform:translateX(-4px);opacity:1}

.np-artist-avatar{position:relative;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;color:#fff;flex-shrink:0;overflow:hidden}
.np-artist-avatar::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(255,255,255,0.2));pointer-events:none}

.np-artist-go{opacity:0;transition:all 0.3s;color:#4da6ff}

/* Animated equalizer beside "Now Playing" label */
.np-eq-indicator{display:inline-flex;align-items:flex-end;gap:2px;height:14px;margin-left:6px}
.np-eq-indicator span{width:2px;background:#4da6ff;border-radius:1px;animation:npEqualizer 0.8s ease-in-out infinite}
.np-eq-indicator span:nth-child(2){animation-delay:0.15s}
.np-eq-indicator span:nth-child(3){animation-delay:0.3s}
.np-eq-indicator span:nth-child(4){animation-delay:0.45s}

/* Beat pulse on play button when playing */
.np-play-btn-playing{animation:npPlayGlow 2s ease-in-out infinite,npBeatPulse 1.5s ease-in-out infinite}

/* Lyrics glow on active */
.np-lyric-active{text-shadow:0 0 12px currentColor,0 0 24px currentColor!important}

/* Album art shine */
.np-art-shine{position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,0.2) 50%,transparent 70%);background-size:200% 100%;animation:progressShine 3s linear infinite;pointer-events:none}

/* Aurora beam sweep across panel */
.np-beam{position:absolute;top:0;left:0;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(77,166,255,0.1) 50%,transparent);animation:npAuroraBeam 8s ease-in-out infinite;pointer-events:none}

/* Section entrance */
@keyframes npSectionIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.np-section{animation:npSectionIn 0.5s cubic-bezier(0.16,1,0.3,1) both}

/* ===== AI Playlist Generator motion graphics ===== */
@keyframes aiBgPulse{0%,100%{transform:scale(1);opacity:0.6}50%{transform:scale(1.1);opacity:0.85}}
@keyframes aiBrainWave{0%,100%{transform:scaleY(0.4)}25%{transform:scaleY(1)}50%{transform:scaleY(0.7)}75%{transform:scaleY(1)}}
@keyframes aiRingSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes aiRingSpinReverse{from{transform:rotate(360deg)}to{transform:rotate(0deg)}}
@keyframes aiOrbit{from{transform:rotate(0deg) translateX(var(--orbit-r,40px)) rotate(0deg)}to{transform:rotate(360deg) translateX(var(--orbit-r,40px)) rotate(-360deg)}}
@keyframes aiPulse{0%,100%{transform:scale(1);opacity:0.5}50%{transform:scale(1.4);opacity:0}}
@keyframes aiTextGlow{0%,100%{text-shadow:0 0 8px rgba(77,166,255,0.5),0 0 16px rgba(77,166,255,0.3)}50%{text-shadow:0 0 14px rgba(77,166,255,0.8),0 0 28px rgba(77,166,255,0.5),0 0 40px rgba(167,139,250,0.3)}}
@keyframes aiTyping{0%,100%{opacity:0.3}50%{opacity:1}}
@keyframes aiProgressGrow{from{width:0}to{width:100%}}
@keyframes aiParticleFloat{0%{transform:translateY(0) scale(0);opacity:0}20%{opacity:1}100%{transform:translateY(-80px) scale(1);opacity:0}}
@keyframes aiShineSweep{0%{transform:translateX(-100%)}100%{transform:translateX(200%)}}
@keyframes aiCardReveal{0%{opacity:0;transform:translateY(20px) scale(0.9)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes aiBlink{0%,100%{opacity:1}50%{opacity:0.3}}
@keyframes aiScanLine{0%{transform:translateY(-100%);opacity:0}50%{opacity:1}100%{transform:translateY(100%);opacity:0}}
@keyframes aiHologram{0%,100%{filter:hue-rotate(0deg) brightness(1)}50%{filter:hue-rotate(30deg) brightness(1.15)}}
@keyframes aiNumReveal{0%{opacity:0;transform:scale(0.5)}60%{transform:scale(1.2)}100%{opacity:1;transform:scale(1)}}
@keyframes aiSuccessPop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.2);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes aiGenReveal{0%{opacity:0;transform:translateX(20px)}100%{opacity:1;transform:translateX(0)}}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes bar1{0%,100%{height:6px}50%{height:16px}}
@keyframes bar2{0%,100%{height:10px}50%{height:6px}}
@keyframes bar3{0%,100%{height:4px}50%{height:20px}}
@keyframes slideUp{from{transform:translateY(80px)}to{transform:translateY(0)}}
@keyframes heroGradient{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes miniPulse{0%,100%{box-shadow:0 8px 30px rgba(77,166,255,0.3)}50%{box-shadow:0 8px 40px rgba(77,166,255,0.5)}}
@keyframes playPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0.2)}50%{box-shadow:0 0 0 8px rgba(255,255,255,0)}}
@keyframes likePop{0%{transform:scale(1)}50%{transform:scale(1.5)}100%{transform:scale(1)}}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 0 0 rgba(77,166,255,0)}50%{box-shadow:0 0 12px 2px rgba(77,166,255,0.3)}}

/* Menu items */
.menu-item{position:relative;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:none;border:none;color:var(--text-sub,#b3b3b3);font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;border-radius:8px;text-align:right;white-space:nowrap;width:100%;transition:all 0.25s cubic-bezier(0.4,0,0.2,1);overflow:hidden}
.menu-item::before{content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);width:3px;height:0;background:linear-gradient(180deg,var(--accent,#4da6ff),var(--accent-2,#00d4ff));border-radius:3px 0 0 3px;transition:height 0.25s cubic-bezier(0.4,0,0.2,1)}
.menu-item:hover{background:linear-gradient(90deg,rgba(77,166,255,0.18),rgba(77,166,255,0.06));color:var(--accent,#4da6ff);transform:translateX(-4px);box-shadow:0 2px 8px rgba(77,166,255,0.15)}
.menu-item:hover::before{height:60%}
.menu-item:active{transform:translateX(-2px);background:rgba(77,166,255,0.25)}
.menu-item-logout:hover{background:linear-gradient(90deg,rgba(239,68,68,0.18),rgba(239,68,68,0.06));color:#ef4444;transform:translateX(-4px);box-shadow:0 2px 8px rgba(239,68,68,0.15)}
.menu-item-logout:hover::before{background:linear-gradient(180deg,#ef4444,#f87171);height:60%}
.menu-item-logout:active{transform:translateX(-2px)}
.menu-item-icon{display:inline-flex;width:20px;height:20px;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.25s cubic-bezier(0.4,0,0.2,1)}
.menu-item:hover .menu-item-icon{transform:scale(1.2) rotate(-5deg);filter:drop-shadow(0 0 6px currentColor)}
.menu-item-ext{opacity:0.25;flex-shrink:0;transition:all 0.25s}
.menu-item:hover .menu-item-ext{opacity:0.6;transform:translateX(-2px)}
/* User menu — dark theme default */
html:not([data-theme="light"]) #userMenu{background:rgba(15,22,40,0.97)!important;backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);border:1px solid rgba(77,166,255,0.2)!important;box-shadow:0 16px 48px rgba(0,0,0,0.6),0 0 24px rgba(77,166,255,0.12),inset 0 1px 0 rgba(255,255,255,0.05)!important}
html:not([data-theme="light"]) #userMenu .menu-item{color:#c8d6e8!important}
html:not([data-theme="light"]) #userMenu .menu-item:hover{color:#4da6ff!important}
html:not([data-theme="light"]) #userMenu .menu-item-logout{color:#f0a0a0!important}
html:not([data-theme="light"]) #userMenu .menu-item-logout:hover{color:#ef4444!important}
html:not([data-theme="light"]) #userMenu .menu-item span[style*="color:#f59e0b"], html:not([data-theme="light"]) #userMenu .menu-item span[style*="color:#0284c7"]{color:#38bdf8!important}
html:not([data-theme="light"]) #userMenu .menu-item-icon{color:inherit!important}
/* Menu item entrance animation */
@keyframes menuItemSlide{from{opacity:0;transform:translateX(20px) scale(0.95)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes menuContainerPop{from{opacity:0;transform:scale(0.85) translateY(-8px)}to{opacity:1;transform:scale(1) translateY(0)}}
#userMenu{animation:menuContainerPop 0.3s cubic-bezier(0.34,1.56,0.64,1)!important}
#userMenu .menu-item{animation:menuItemSlide 0.35s cubic-bezier(0.34,1.56,0.64,1) both}

/* Profile */
.profile-avatar-edit{position:relative;cursor:pointer;transition:transform 0.3s ease}
.profile-avatar-edit:hover{transform:scale(1.05)}
.profile-avatar-edit:hover .avatar-edit-overlay{opacity:1}
.avatar-edit-overlay{position:absolute;inset:0;border-radius:50%;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.3s ease}
.profile-field{transition:all 0.2s ease}
.profile-field:hover{background:#333!important}
.profile-stat{transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1)}
.profile-stat:hover{transform:translateY(-4px)}

/* Reveal animations — default VISIBLE so content always shows even if JS fails */
.reveal{opacity:1;transform:none;transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1),transform 0.7s cubic-bezier(0.16,1,0.3,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-left{opacity:1;transform:none;transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1),transform 0.7s cubic-bezier(0.16,1,0.3,1)}
.reveal-left.visible{opacity:1;transform:translateX(0)}
.reveal-scale{opacity:1;transform:none;transition:opacity 0.6s cubic-bezier(0.16,1,0.3,1),transform 0.6s cubic-bezier(0.16,1,0.3,1)}
.reveal-scale.visible{opacity:1;transform:scale(1)}
.reveal-delay-1{transition-delay:0.05s!important}
.reveal-delay-2{transition-delay:0.1s!important}
.reveal-delay-3{transition-delay:0.15s!important}
.reveal-delay-4{transition-delay:0.2s!important}
.reveal-delay-5{transition-delay:0.25s!important}
.reveal-delay-6{transition-delay:0.3s!important}
.reveal-delay-7{transition-delay:0.35s!important}
.reveal-delay-8{transition-delay:0.4s!important}

/* Responsive */
@media(max-width:768px){
  .sidebar{display:none}
  .mobile-nav{display:flex}
  .header-search{display:none}
  .hero h1{font-size:20px}
  body.np-open .main{margin-left:0;margin-right:0}
  .hero-art{width:80px;height:80px}
  .section{padding:12px 16px}
  .card-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
  .player-progress{display:none}
  .player-volume{display:none}
}

/* Recent track card */
.recent-card{background:rgba(15,22,40,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(100,170,255,0.14);border-radius:12px;padding:14px;border:none;color:#fff;font-family:inherit;cursor:pointer;width:100%;text-align:right;transition:all 0.25s ease;position:relative;overflow:hidden}
.recent-card:hover{background:rgba(255,255,255,0.08);transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,0.4)}
.recent-card:hover .recent-play{opacity:1;transform:scale(1)}
.recent-card:hover .recent-num{opacity:0}
.recent-card .recent-num{position:absolute;top:10px;left:10px;font-size:11px;font-weight:900;color:rgba(77,166,255,0.4);transition:opacity 0.2s}
.recent-card .recent-play{position:absolute;top:8px;left:8px;width:28px;height:28px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(0.8);transition:all 0.2s}
.recent-card .recent-play svg{width:12px;height:12px;color:#000}
.recent-card-art{width:100%;aspect-ratio:1;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;position:relative}
.recent-card-art svg{width:32px;height:32px;opacity:0.4}
.recent-card-title{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recent-card-artist{font-size:12px;color:var(--text-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.recent-card-time{font-size:10px;color:rgba(77,166,255,0.6);margin-top:6px}

/* Now-playing indicator in recent */
.recent-card.is-playing{outline:2px solid var(--accent);outline-offset:-2px}
.recent-card.is-playing .recent-card-art::after{content:'';position:absolute;inset:0;background:rgba(77,166,255,0.1);border-radius:8px}

/* Toggle Switch */
.toggle-switch{position:relative;width:44px;height:24px;cursor:pointer;display:inline-block;flex-shrink:0}
.toggle-switch input{opacity:0;width:0;height:0;position:absolute}
.toggle-track{position:absolute;inset:0;background:rgba(255,255,255,0.08);border-radius:12px;transition:background 0.25s ease}
.toggle-switch input:checked+.toggle-track{background:#4da6ff}
.toggle-thumb{position:absolute;top:2px;right:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1);box-shadow:0 1px 4px rgba(0,0,0,0.3)}
.toggle-switch input:checked~.toggle-thumb{transform:translateX(-20px)}

/* Settings field */
.setting-row{background:rgba(15,22,40,0.95);border:1px solid rgba(100,170,255,0.14);border-radius:10px;padding:14px 16px;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;transition:background 0.2s}
.setting-row:hover{background:#333}
.setting-label{font-size:15px;font-weight:600}
.setting-desc{font-size:12px;color:#b3b3b3;margin-top:2px}
.setting-select{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.1);color:#fff;font-family:inherit;font-size:12px;padding:6px 12px;border-radius:8px;cursor:pointer;outline:none;transition:border-color 0.2s}
.setting-select:focus{border-color:var(--accent)}
.setting-select option{background:rgba(20,28,50,0.8);color:#fff}
/* ===== Global select dropdown fix — ensure option popups are readable in dark UIs ===== */
/* Targets all <select> elements inside dark-themed containers (admin panel, modals, etc.) */
html:not([data-theme="light"]) #adminModal select,
html:not([data-theme="light"]) #createPlaylistOverlay select,
html:not([data-theme="light"]) #supportModal select,
html:not([data-theme="light"]) #settingsModal select,
html:not([data-theme="light"]) #accountModal select,
html:not([data-theme="light"]) #profileModal select,
html:not([data-theme="light"]) #recentsModal select,
html:not([data-theme="light"]) #aiGenModal select,
html:not([data-theme="light"]) #proModal select,
html:not([data-theme="light"]) #authModal select{color:#fff!important}
html:not([data-theme="light"]) #adminModal select option,
html:not([data-theme="light"]) #createPlaylistOverlay select option,
html:not([data-theme="light"]) #supportModal select option,
html:not([data-theme="light"]) #settingsModal select option,
html:not([data-theme="light"]) #accountModal select option,
html:not([data-theme="light"]) #profileModal select option,
html:not([data-theme="light"]) #recentsModal select option,
html:not([data-theme="light"]) #aiGenModal select option,
html:not([data-theme="light"]) #proModal select option,
html:not([data-theme="light"]) #authModal select option{background:#0f1628!important;color:#e0e8f0!important;padding:8px 12px!important;border-bottom:1px solid rgba(77,166,255,0.08)!important}
html:not([data-theme="light"]) #adminModal select option:hover,
html:not([data-theme="light"]) #createPlaylistOverlay select option:hover,
html:not([data-theme="light"]) #supportModal select option:hover,
html:not([data-theme="light"]) #settingsModal select option:hover,
html:not([data-theme="light"]) #accountModal select option:hover,
html:not([data-theme="light"]) #profileModal select option:hover,
html:not([data-theme="light"]) #recentsModal select option:hover,
html:not([data-theme="light"]) #aiGenModal select option:hover,
html:not([data-theme="light"]) #proModal select option:hover,
html:not([data-theme="light"]) #authModal select option:hover{background:linear-gradient(135deg,#4da6ff,#00d4ff)!important;color:#000!important}
html:not([data-theme="light"]) #adminModal select option:checked,
html:not([data-theme="light"]) #createPlaylistOverlay select option:checked,
html:not([data-theme="light"]) #supportModal select option:checked,
html:not([data-theme="light"]) #settingsModal select option:checked,
html:not([data-theme="light"]) #accountModal select option:checked,
html:not([data-theme="light"]) #profileModal select option:checked,
html:not([data-theme="light"]) #recentsModal select option:checked,
html:not([data-theme="light"]) #aiGenModal select option:checked,
html:not([data-theme="light"]) #proModal select option:checked,
html:not([data-theme="light"]) #authModal select option:checked{background:#1e3a8a!important;color:#ffffff!important;font-weight:700!important}
/* Style the select arrow and container for admin content tab selects */
#adminTab_content select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234da6ff' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>")!important;background-repeat:no-repeat!important;background-position:left 8px center!important;background-size:12px!important;padding-left:26px!important;-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important}
#adminTab_content select::-ms-expand{display:none}
.save-bar{padding:16px 24px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;background:rgba(15,22,40,0.9);flex-shrink:0}
.save-btn{padding:10px 32px;border-radius:24px;background:var(--accent);color:#000;border:none;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:all 0.2s}
.save-btn:hover{background:#00d4ff;transform:scale(1.02)}
.save-btn:active{transform:scale(0.98)}
.save-btn.saved{background:#22c55e}
.reset-btn{padding:8px 16px;border-radius:8px;background:rgba(255,255,255,0.08);color:#b3b3b3;border:none;font-family:inherit;font-size:12px;cursor:pointer;transition:all 0.2s}
.reset-btn:hover{background:rgba(77,166,255,0.2);color:#fff}

/* ===== Auth close button (X on login modal) ===== */
.auth-close-btn{position:absolute;top:12px;left:12px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.08);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);z-index:10}
.auth-close-btn:hover{background:rgba(77,166,255,0.2);transform:rotate(180deg) scale(1.1);box-shadow:0 0 8px rgba(77,166,255,0.3)}
.auth-close-btn svg{width:18px;height:18px;transition:all 0.3s}

/* ===== Create menu (popup from + button) ===== */
.create-menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:5000;display:flex;align-items:flex-start;justify-content:center;padding-top:120px;animation:fadeIn 0.15s ease}
.create-menu{background:rgba(15,22,40,0.97);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);border-radius:14px;border:1px solid rgba(77,166,255,0.2);box-shadow:0 20px 60px rgba(0,0,0,0.7),0 0 40px rgba(77,166,255,0.12),inset 0 1px 0 rgba(255,255,255,0.05);width:340px;max-width:calc(100vw - 32px);overflow:hidden;animation:menuContainerPop 0.3s cubic-bezier(0.34,1.56,0.64,1);transform-origin:top center}
.create-menu-item{display:flex;align-items:center;gap:16px;padding:14px 18px;background:none;border:none;color:#e0e8f0;font-family:inherit;cursor:pointer;width:100%;text-align:right;transition:all 0.25s cubic-bezier(0.4,0,0.2,1);direction:rtl;position:relative;overflow:hidden;animation:menuItemSlide 0.35s cubic-bezier(0.34,1.56,0.64,1) both}
.create-menu-item::before{content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);width:3px;height:0;background:linear-gradient(180deg,var(--accent,#4da6ff),var(--accent-2,#00d4ff));border-radius:3px 0 0 3px;transition:height 0.25s cubic-bezier(0.4,0,0.2,1)}
.create-menu-item:hover{background:linear-gradient(90deg,rgba(77,166,255,0.18),rgba(77,166,255,0.04));transform:translateX(-4px)}
.create-menu-item:hover::before{height:60%}
.create-menu-item:active{transform:translateX(-2px)}
.create-menu-item+.create-menu-item{border-top:1px solid rgba(255,255,255,0.05)}
.create-menu-icon{width:48px;height:48px;border-radius:8px;background:rgba(77,166,255,0.12);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.25s cubic-bezier(0.4,0,0.2,1);border:1px solid rgba(77,166,255,0.15)}
.create-menu-item:hover .create-menu-icon{background:rgba(77,166,255,0.25);border-color:rgba(77,166,255,0.3);transform:scale(1.08)}
.create-menu-icon svg{width:22px;height:22px;color:var(--accent,#4da6ff);transition:all 0.3s}
.create-menu-item:hover .create-menu-icon svg{transform:scale(1.2);filter:drop-shadow(0 0 6px rgba(77,166,255,0.6))}
.create-menu-text{flex:1;min-width:0}
.create-menu-title{font-size:15px;font-weight:700;color:#fff;margin-bottom:2px;transition:color 0.25s}
.create-menu-item:hover .create-menu-title{color:var(--accent,#4da6ff)}
.create-menu-desc{font-size:12px;color:var(--text-sub,#b3b3b3);line-height:1.4}

/* ===== Create/edit modal ===== */
.create-pl-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.75);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:5100;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn 0.2s ease}
.create-pl-modal{background:rgba(15,22,40,0.95);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-radius:16px;border:1px solid var(--glass-border);box-shadow:0 24px 80px rgba(0,0,0,0.8),0 0 40px rgba(77,166,255,0.08);width:480px;max-width:calc(100vw - 32px);max-height:90vh;overflow:auto;animation:modalScaleIn 0.25s ease}
.create-pl-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--glass-border)}
.create-pl-header h2{font-size:20px;font-weight:900;color:#fff}
.create-pl-close{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.07);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1)}
.create-pl-close:hover{background:rgba(77,166,255,0.2);transform:rotate(180deg) scale(1.1);box-shadow:0 0 8px rgba(77,166,255,0.3)}
.create-pl-body{padding:24px}
.create-pl-cover{width:120px;height:120px;border-radius:8px;margin:0 auto 24px;display:flex;align-items:center;justify-content:center;font-size:48px;cursor:pointer;transition:all 0.3s;border:2px solid transparent}
.create-pl-cover:hover{transform:scale(1.03);border-color:rgba(77,166,255,0.3)}
.create-pl-label{display:block;font-size:12px;font-weight:700;color:var(--text-sub);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.create-pl-input{width:100%;padding:12px 14px;background:rgba(255,255,255,0.05);border:1px solid var(--glass-border);border-radius:6px;color:#fff;font-family:inherit;font-size:14px;outline:none;transition:all 0.2s;margin-bottom:16px;direction:rtl;text-align:right}
.create-pl-input:focus{border-color:rgba(77,166,255,0.4);box-shadow:0 0 0 3px rgba(77,166,255,0.1)}
.create-pl-textarea{width:100%;padding:12px 14px;background:rgba(255,255,255,0.05);border:1px solid var(--glass-border);border-radius:6px;color:#fff;font-family:inherit;font-size:14px;outline:none;transition:all 0.2s;margin-bottom:16px;direction:rtl;text-align:right;min-height:80px;resize:vertical}
.create-pl-textarea:focus{border-color:rgba(77,166,255,0.4)}
.create-pl-icon-picker{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;max-height:220px;overflow-y:auto;padding:4px;border-radius:8px}
.create-pl-icon{width:38px;height:38px;border-radius:8px;background:rgba(255,255,255,0.05);border:2px solid transparent;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;transition:all 0.15s}
.create-pl-icon:hover{background:rgba(77,166,255,0.1);transform:scale(1.15)}
.create-pl-icon.selected{border-color:var(--accent);background:rgba(77,166,255,0.15);box-shadow:0 0 12px rgba(77,166,255,0.3)}
.create-pl-color-picker{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.create-pl-color{width:32px;height:32px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:all 0.15s}
.create-pl-color:hover{transform:scale(1.15)}
.create-pl-color.selected{border-color:#fff;transform:scale(1.15)}
.create-pl-footer{display:flex;justify-content:flex-end;gap:8px;padding:16px 24px;border-top:1px solid var(--glass-border)}
.create-pl-btn{padding:10px 24px;border-radius:24px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;border:none;transition:all 0.2s}
.create-pl-btn-cancel{background:transparent;color:#fff}
.create-pl-btn-cancel:hover{background:rgba(255,255,255,0.08)}
.create-pl-btn-create{background:linear-gradient(135deg,#4da6ff,#00d4ff);color:#fff;box-shadow:0 0 8px rgba(77,166,255,0.3)}
.create-pl-btn-create:hover{transform:scale(1.03);box-shadow:0 0 16px rgba(77,166,255,0.5)}
.create-pl-btn-create:disabled{background:rgba(255,255,255,0.08);color:#666;cursor:not-allowed;box-shadow:none;transform:none}

/* ===== Playlist detail page ===== */
.pl-detail{padding-bottom:100px}
.pl-header{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap;padding:32px 24px 24px;margin:-20px -24px 0;position:relative}
.pl-cover{width:160px;height:160px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:72px;flex-shrink:0;box-shadow:0 12px 40px rgba(0,0,0,0.5);overflow:hidden;position:relative}
.pl-cover img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:8px}
.pl-header-info{flex:1;min-width:200px}
.pl-type-label{font-size:12px;font-weight:700;color:var(--text-sub);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.pl-title{font-size:48px;font-weight:900;margin-bottom:12px;line-height:1.1}
.pl-desc{font-size:13px;color:#b3b3b3;margin-top:8px;line-height:1.6}
.pl-stats{font-size:14px;color:var(--text-sub);display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px}
.pl-stats strong{color:#fff;font-weight:700}
.pl-toolbar{display:flex;align-items:center;gap:16px;padding:24px 0 16px;flex-wrap:wrap}
.pl-play-btn{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#4da6ff,#00d4ff);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.3s;box-shadow:0 0 12px rgba(77,166,255,0.4),0 4px 16px rgba(77,166,255,0.25)}
.pl-play-btn:hover{transform:scale(1.08);box-shadow:0 0 20px rgba(77,166,255,0.6)}
.pl-play-btn svg{width:24px;height:24px;margin-right:-3px}
.pl-icon-btn{width:40px;height:40px;border-radius:50%;background:transparent;color:#b3b3b3;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.3s;flex-shrink:0}
.pl-icon-btn:hover{background:rgba(77,166,255,0.08);color:#fff;transform:scale(1.05)}
.pl-icon-btn svg{width:20px;height:20px;transition:all 0.3s}
.pl-add-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:20px;background:rgba(255,255,255,0.05);color:#fff;border:1px solid var(--glass-border);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s}
.pl-add-btn:hover{background:rgba(77,166,255,0.1);border-color:rgba(77,166,255,0.3)}
.pl-col-header{display:grid;grid-template-columns:40px 1fr 120px 60px 40px;gap:12px;padding:8px 12px;border-bottom:1px solid var(--glass-border);font-size:11px;font-weight:700;color:var(--text-sub);text-transform:uppercase;letter-spacing:1px;align-items:center}
.pl-track-row{display:grid;grid-template-columns:40px 1fr 120px 60px 40px;gap:12px;padding:8px 12px;border-radius:6px;transition:background 0.12s;cursor:pointer;align-items:center;position:relative}
.pl-track-row:hover{background:rgba(77,166,255,0.06)}
.pl-track-row.current{background:rgba(77,166,255,0.08)}
.pl-track-num{text-align:center;color:var(--text-sub);font-size:14px;font-weight:500;position:relative}
.pl-track-title{font-size:14px;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-track-row.current .pl-track-title{color:var(--accent)}
.pl-track-artist{font-size:12px;color:var(--text-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-track-plays{text-align:left;color:var(--text-sub);font-size:13px}
.pl-track-duration{text-align:center;color:var(--text-sub);font-size:13px}
.pl-track-actions{display:flex;align-items:center;justify-content:center;gap:4px;opacity:0;transition:opacity 0.15s}
.pl-track-row:hover .pl-track-actions{opacity:1}
.pl-action-btn{width:28px;height:28px;border-radius:50%;background:transparent;border:none;color:var(--text-sub);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.15s}
.pl-action-btn:hover{background:rgba(77,166,255,0.1);color:#fff}
.pl-action-btn.delete:hover{background:rgba(239,68,68,0.2);color:#ef4444}
.pl-empty{text-align:center;padding:64px 16px;color:var(--text-sub)}
.pl-empty-icon{width:64px;height:64px;border-radius:50%;background:rgba(77,166,255,0.1);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.pl-empty-icon svg{width:28px;height:28px;color:var(--accent)}
.pl-empty h3{font-size:16px;font-weight:700;color:#fff;margin-bottom:8px}
.pl-empty p{font-size:13px;line-height:1.8;max-width:400px;margin:0 auto}

/* ===== Floating back button ===== */
.floating-back-btn{position:fixed;top:64px;left:16px;z-index:4000;display:none;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 16px 0 12px;border-radius:24px;background:rgba(15,22,40,0.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);color:#fff;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 8px 32px rgba(0,0,0,0.5);transition:all 0.2s;direction:rtl}
.floating-back-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateX(-2px)}
.floating-back-btn svg{width:18px;height:18px;transform:scaleX(-1);flex-shrink:0;transition:all 0.3s}
.floating-back-btn:hover svg{transform:scaleX(-1) translateX(3px)}
.floating-back-btn.show{display:flex;animation:fadeInLeft 0.2s ease}

/* ===== Back button for "show all" pages ===== */
@keyframes allBackIn{0%{opacity:0;transform:translateX(-12px) scale(0.85)}100%{opacity:1;transform:translateX(0) scale(1)}}
.all-back-btn{width:44px;height:44px;border-radius:50%;background:rgba(15,22,40,0.65);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 16px rgba(0,0,0,0.35);transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);animation:allBackIn 0.4s cubic-bezier(0.34,1.56,0.64,1) backwards;position:relative;overflow:hidden}
.all-back-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(77,166,255,0.25),rgba(0,212,255,0.15));opacity:0;transition:opacity 0.3s}
.all-back-btn svg{width:22px;height:22px;transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1);position:relative;z-index:1}
.all-back-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateX(-3px) scale(1.06);background:rgba(20,30,55,0.85);box-shadow:0 6px 24px rgba(77,166,255,0.3)}
.all-back-btn:hover::before{opacity:1}
.all-back-btn:hover svg{transform:translateX(-3px)}
.all-back-btn:active{transform:translateX(-1px) scale(0.96);transition-duration:0.1s}

/* ===== Artist cards (full-page artist grid) — elegant Spotify-like ===== */
.artist-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px}
.artist-card{background:linear-gradient(180deg,rgba(22,30,52,0.6) 0%,rgba(12,18,35,0.7) 100%);border:1px solid rgba(100,170,255,0.08);border-radius:14px;overflow:hidden;cursor:pointer;transition:all 0.35s cubic-bezier(0.34,1.56,0.64,1);position:relative;text-align:center;padding:24px 16px 18px;color:inherit;font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:12px}
.artist-card::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 0%,var(--artist-glow,rgba(77,166,255,0.12)) 0%,transparent 70%);opacity:0.6;pointer-events:none;transition:opacity 0.3s}
.artist-card:hover{transform:translateY(-4px);border-color:rgba(77,166,255,0.35);background:linear-gradient(180deg,rgba(28,38,65,0.75) 0%,rgba(15,22,40,0.85) 100%);box-shadow:0 12px 32px rgba(0,0,0,0.45),0 0 24px rgba(77,166,255,0.12)}
.artist-card:hover::before{opacity:1}
.artist-card-avatar-wrap{position:relative;display:flex;justify-content:center;width:120px;height:120px;align-items:center}
.artist-card-avatar{width:120px;height:120px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:46px;font-weight:900;color:#fff;position:relative;z-index:1;transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1);flex-shrink:0}
.artist-card-avatar::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid transparent;background:linear-gradient(135deg,currentColor,transparent 60%) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0.4;transition:opacity 0.3s}
.artist-card:hover .artist-card-avatar{transform:scale(1.05)}
.artist-card:hover .artist-card-avatar::after{opacity:0.8}
.artist-card-avatar-ring{position:absolute;inset:-8px;border-radius:50%;background:conic-gradient(from 180deg,transparent 0deg,var(--artist-color,#4da6ff) 90deg,transparent 180deg,var(--artist-color,#4da6ff) 270deg,transparent 360deg);opacity:0;transition:opacity 0.4s;filter:blur(8px);z-index:0}
.artist-card:hover .artist-card-avatar-ring{opacity:0.5;animation:spinRing 3s linear infinite}
@keyframes spinRing{to{transform:rotate(360deg)}}
.artist-card-body{position:relative;z-index:1;width:100%}
.artist-card-name{font-size:15px;font-weight:700;color:var(--text);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.artist-card-meta{font-size:11.5px;color:var(--text-sub);margin-bottom:8px;opacity:0.85;letter-spacing:0.2px}
.artist-card-tag{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;padding:3px 9px;border-radius:10px;background:rgba(77,166,255,0.12);color:var(--accent);letter-spacing:0.4px}
.artist-card-tag.persian{background:rgba(124,58,237,0.15);color:#a78bfa}
.artist-card-tag.global{background:rgba(5,150,105,0.15);color:#34d399}
.artist-card-follow{position:absolute;top:8px;left:8px;width:30px;height:30px;border-radius:50%;background:rgba(15,22,40,0.85);border:1px solid rgba(255,255,255,0.12);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:all 0.25s;z-index:3;opacity:0;transform:scale(0.8);padding:0}
.artist-card:hover .artist-card-follow{opacity:1;transform:scale(1)}
.artist-card-follow:hover{background:var(--accent);border-color:var(--accent);color:#000;transform:scale(1.12)}
.artist-card-follow.followed{background:rgba(77,166,255,0.25);border-color:var(--accent);color:var(--accent);opacity:1;transform:scale(1)}

/* ===== Large category tile (full-page categories view) ===== */
.cat-item-large{display:flex !important;flex-direction:column;align-items:flex-start !important;justify-content:space-between !important;height:130px !important;padding:18px !important;text-align:right !important}
.cat-item-large .cat-icon{font-size:32px;line-height:1;margin-bottom:6px;filter:drop-shadow(0 4px 8px rgba(0,0,0,0.3))}
.cat-item-large .cat-name{font-size:15px;font-weight:700;display:block}
.cat-item-large .cat-count{font-size:11px;opacity:0.75;display:block;margin-top:2px;font-weight:500}
.cat-item-large::after{content:'';position:absolute;top:-20px;left:-20px;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,0.15),transparent 70%);opacity:0.6;pointer-events:none}

/* ===== Folder item in sidebar ===== */
.folder-item{display:flex;align-items:center;gap:10px;padding:8px;border-radius:6px;background:none;border:none;color:#fff;font-family:inherit;cursor:pointer;transition:all 0.15s;text-align:right;width:100%}
.folder-item:hover{background:rgba(77,166,255,0.06)}
.folder-img{width:44px;height:44px;border-radius:4px;background:linear-gradient(135deg,#1a2540,#0f1628);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.3s}
.folder-item:hover .folder-img{transform:scale(1.05)}
.folder-img svg{width:20px;height:20px;color:var(--accent);transition:all 0.3s}

/* ===================================================================
   MOBILE RESPONSIVE — works on all phone sizes (320px and up)
   Fixes: header, mini-player height, now-playing panel, modals, admin panel,
   create playlist modal, equalizer, navigation, scroll issues, font sizes.
   =================================================================== */

/* Phones in portrait — most common (320-568px) */
@media (max-width: 768px){
  /* === Reset any leftover margin from Now-Playing panel === */
  body.np-open .main{margin-left:0!important;margin-right:0!important}
  body.np-open .player{left:0!important;right:0!important}
  body.np-open .mini-player{left:16px!important;right:16px!important}

  /* === Now Playing panel becomes full-screen modal on mobile === */
  #nowPlayingPanel{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100vw!important;
    max-width:100vw!important;
    height:100vh!important;
    height:100dvh!important;
    height:-webkit-fill-available!important;
    border-radius:0!important;
    border-right:none!important;
    border-left:none!important;
    z-index:1000!important;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  /* Smaller inner content in Now-Playing */
  #nowPlayingPanel h1{font-size:17px!important}
  #nowPlayingPanel h2{font-size:15px!important}
  #nowPlayingPanel h3{font-size:13px!important}
  #nowPlayingPanel .np-section{margin-bottom:12px!important}
  #nowPlayingPanel .np-section:first-child{margin-bottom:10px!important}
  #nowPlayingPanel [class*="np-section"]>div[style*="font-size:10px"]{font-size:9px!important;letter-spacing:1px!important}
  #nowPlayingPanel .np-art{width:110px!important;height:110px!important}
  #nowPlayingPanel .np-vinyl{width:90px!important;height:90px!important}
  #nowPlayingPanel .np-controls{gap:10px!important;padding:6px 0!important}
  #nowPlayingPanel .np-btn{width:36px!important;height:36px!important;min-width:36px;min-height:36px}
  #nowPlayingPanel .np-btn-play{width:44px!important;height:44px!important;min-width:44px;min-height:44px}
  #nowPlayingPanel .np-btn svg{width:16px!important;height:16px!important}
  #nowPlayingPanel .np-btn-play svg{width:18px!important;height:18px!important}
  #nowPlayingPanel .np-lyric-line{font-size:13px!important;padding:5px 0!important;line-height:1.6!important}
  #nowPlayingPanel .np-lyric-line.np-lyric-active{font-size:15px!important}
  #nowPlayingPanel #npLyrics{max-height:180px!important;padding:6px 4px!important}
  #nowPlayingPanel .np-artist-avatar{width:32px!important;height:32px!important;font-size:13px!important}
  #nowPlayingPanel .np-artist-card{padding:10px!important}
  #nowPlayingPanel .np-artist-card p{font-size:10px!important;line-height:1.5!important}
  #nowPlayingPanel [style*="font-size:14px"][style*="font-weight:800"]{font-size:13px!important}
  #nowPlayingPanel [style*="font-size:14px"][style*="font-weight:600"]{font-size:12px!important}
  #nowPlayingPanel [style*="font-size:10px"][style*="color:rgba(255,255,255,0.4)"]{font-size:9px!important}

  /* === Header adjustments === */
  .header{height:48px;padding:0 10px}
  .header-logo{font-size:14px}
  .header-logo svg{width:22px;height:22px}
  .header-search{display:none}
  .header-actions{gap:3px}
  .header-actions button{padding:4px 8px;font-size:11px}
  .header-actions .icon-btn{width:32px;height:32px;min-width:32px;min-height:32px}
  .header-actions .icon-btn svg{width:15px;height:15px}

  /* === Main content === */
  .main{padding-bottom:130px!important}
  .section{padding:8px 10px}
  .section-header h2{font-size:14px}
  .section-header a{font-size:10px}
  .card-grid{grid-template-columns:repeat(auto-fill,minmax(95px,1fr));gap:6px}
  .card{padding:0}
  .card-art{aspect-ratio:1;width:100%;height:auto}
  .card-title{font-size:11px;margin-top:4px}
  .card-sub{font-size:9px;margin-top:1px}
  .card-play{width:26px;height:26px}
  .card-play svg{width:10px;height:10px}
  .chart-list{gap:2px}
  .chart-item{padding:6px 8px;min-height:44px}
  .chart-num{font-size:12px;width:18px}
  .chart-art{width:34px;height:34px}
  .chart-art svg{width:13px;height:13px}
  .chart-title{font-size:12px}
  .chart-artist{font-size:10px}
  .chart-plays{font-size:9px}
  .cat-grid{grid-template-columns:repeat(auto-fill,minmax(95px,1fr));gap:6px}
  .cat-item{padding:10px!important;height:90px!important}
  .cat-item span{font-size:11px!important}
  .cat-item span[style*="font-size:22px"],.cat-item span[style*="font-size:24px"]{font-size:18px!important;margin-bottom:3px!important}
  .cat-item span[style*="font-size:14px"]{font-size:11px!important}

  /* === Hero section === */
  .hero h1{font-size:15px!important}
  .hero p{font-size:11px}
  .hero-art{width:70px;height:70px}
  .hero-motion{padding:12px 10px}
  .hero-orb{width:50px;height:50px}
  .hero-eq span{width:2px}
  .hero-play-ring{width:80px;height:80px}

  /* === Mini Player: keep functional and accessible === */
  .mini-player{
    bottom:62px!important;
    left:6px!important;
    right:6px!important;
    padding:6px 8px;
    gap:6px;
    border-radius:10px;
    max-height:56px;
  }
  .mini-player-art{width:32px;height:32px;flex-shrink:0}
  .mini-player-info{flex:1;min-width:0}
  .mini-player-title{font-size:11px}
  .mini-player-artist{font-size:9px}
  .mini-player-btn{width:30px;height:30px;min-width:30px;min-height:30px}
  .mini-player-btn svg{width:12px;height:12px}

  /* === Mobile nav === */
  .mobile-nav{
    padding:5px 4px;
    padding-bottom:calc(5px + env(safe-area-inset-bottom,0px));
    z-index:102;
    overflow-x:auto;
    gap:2px;
    scrollbar-width:none;
  }
  .mobile-nav::-webkit-scrollbar{display:none}
  .mobile-nav-item{font-size:8px;padding:3px 5px;gap:2px;min-width:48px;flex-shrink:0;min-height:40px}
  .mobile-nav-item svg{width:18px;height:18px}

  /* === Player (main bar) hidden on mobile — replaced by mini-player === */
  .player{display:none!important}

  /* === Modals: take full screen on mobile === */
  .create-pl-overlay,
  .modal-overlay,
  .auth-modal-overlay{padding:0!important;align-items:stretch!important}
  .create-pl-modal{
    width:100vw!important;
    max-width:100vw!important;
    max-height:100vh!important;
    max-height:100dvh!important;
    height:100vh!important;
    height:100dvh!important;
    border-radius:0!important;
    border:none!important;
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .create-pl-body{padding:12px}
  .create-pl-header{padding:12px 14px}
  .create-pl-header h2{font-size:15px}
  .create-pl-cover{width:74px;height:74px;font-size:30px;margin-bottom:12px}
  .create-pl-label{font-size:10px;margin-bottom:5px}
  .create-pl-input,
  .create-pl-textarea{font-size:13px;padding:9px 11px;margin-bottom:12px}
  .create-pl-icon{width:30px;height:30px;font-size:16px}
  .create-pl-color{width:24px;height:24px}
  .create-pl-icon-picker{max-height:140px;gap:4px}
  .create-pl-footer{padding:10px 14px;gap:6px}
  .create-pl-btn{padding:9px 16px;font-size:11px}

  /* === Explore view (showAllView "explore" type) — compact on mobile === */
  /* Hero icon (compass) */
  #content > div > div[style*="text-align:center"][style*="padding:16px 0 36px"] > div[style*="width:100px;height:100px;border-radius:28px"]{
    width:64px!important;height:64px!important;border-radius:18px!important;margin-bottom:12px!important;
  }
  #content > div > div[style*="text-align:center"][style*="padding:16px 0 36px"] > div[style*="width:100px;height:100px;border-radius:28px"] svg[style*="width:46px"]{
    width:28px!important;height:28px!important;
  }
  #content > div > div[style*="text-align:center"][style*="padding:16px 0 36px"] > div[style*="width:100px;height:100px;border-radius:28px"] > div[style*="width:24px;height:24px"]{
    width:18px!important;height:18px!important;
  }
  #content > div > div[style*="text-align:center"][style*="padding:16px 0 36px"] > div[style*="width:100px;height:100px;border-radius:28px"] > div[style*="width:24px;height:24px"] svg[style*="width:12px"]{
    width:9px!important;height:9px!important;
  }
  /* Explore title */
  #content h1[style*="font-size:46px"]{font-size:24px!important;margin-bottom:6px!important}
  #content h1[style*="font-size:46px"]+p{font-size:11px!important;line-height:1.5!important}
  /* Stats bar (4 cards) */
  #content > div > div[style*="display:grid"][style*="grid-template-columns:repeat(auto-fit,minmax(180px,1fr))"]{
    grid-template-columns:repeat(2,1fr)!important;
    gap:8px!important;
    margin-bottom:24px!important;
  }
  #content > div > div[style*="display:grid"][style*="grid-template-columns:repeat(auto-fit,minmax(180px,1fr))"] > div{
    padding:10px 12px!important;
    border-radius:10px!important;
  }
  #content > div > div[style*="display:grid"][style*="grid-template-columns:repeat(auto-fit,minmax(180px,1fr))"] > div > div[style*="font-size:28px"]{
    font-size:18px!important;
  }
  #content > div > div[style*="display:grid"][style*="grid-template-columns:repeat(auto-fit,minmax(180px,1fr))"] > div > div[style*="font-size:28px"] span[style*="font-size:14px"]{
    font-size:10px!important;
  }
  #content > div > div[style*="display:grid"][style*="grid-template-columns:repeat(auto-fit,minmax(180px,1fr))"] > div > div[style*="font-size:12px"]{
    font-size:10px!important;
  }
  /* Section headers (Featured Mixes, Moods, Activities, Travel, Cars, Categories) */
  #content h2[style*="font-size:20px"]{font-size:15px!important;gap:6px!important;margin-bottom:10px!important}
  #content h2[style*="font-size:20px"] svg[style*="width:20px"]{width:16px!important;height:16px!important}
  #content h2[style*="font-size:20px"]+span,
  #content h2[style*="font-size:20px"]+span[style*="font-size:11px"],
  #content span[style*="font-size:11px"][style*="background:rgba"]{font-size:9px!important;padding:3px 8px!important}
  #content p[style*="font-size:13px"]{font-size:11px!important;line-height:1.5!important;margin-bottom:10px!important}
  /* Featured Mixes grid */
  #content div[style*="display:grid"][style*="grid-template-columns:repeat(auto-fill,minmax(240px,1fr))"]{
    grid-template-columns:repeat(auto-fill,minmax(160px,1fr))!important;
    gap:8px!important;
  }
  #content div[style*="display:grid"][style*="grid-template-columns:repeat(auto-fill,minmax(240px,1fr))"] > button{
    padding:10px!important;border-radius:10px!important;gap:6px!important;
  }
  #content div[style*="display:grid"][style*="grid-template-columns:repeat(auto-fill,minmax(240px,1fr))"] > button > div[style*="display:flex"][style*="align-items:center"][style*="gap:12px"]{
    gap:8px!important;
  }
  #content div[style*="display:grid"][style*="grid-template-columns:repeat(auto-fill,minmax(240px,1fr))"] > button > div[style*="display:flex"][style*="align-items:center"][style*="gap:12px"] > div[style*="width:56px;height:56px"]{
    width:42px!important;height:42px!important;
  }
  #content div[style*="display:grid"][style*="grid-template-columns:repeat(auto-fill,minmax(240px,1fr))"] > button > div[style*="display:flex"][style*="align-items:center"][style*="gap:12px"] > div[style*="width:56px;height:56px"] svg[style*="width:24px"]{
    width:18px!important;height:18px!important;
  }
  #content div[style*="display:grid"][style*="grid-template-columns:repeat(auto-fill,minmax(240px,1fr))"] > button > div[style*="display:flex"][style*="align-items:center"][style*="gap:12px"] > div[style*="flex:1;min-width:0"] > div[style*="font-size:14px"]{
    font-size:12px!important;
  }
  #content div[style*="display:grid"][style*="grid-template-columns:repeat(auto-fill,minmax(240px,1fr))"] > button > div[style*="display:flex"][style*="align-items:center"][style*="gap:12px"] > div[style*="flex:1;min-width:0"] > div[style*="font-size:11px"]{
    font-size:10px!important;
  }
  /* Mood / Activity cards (minmax(200px,1fr)) */
  #content div[style*="display:grid"][style*="grid-template-columns:repeat(auto-fill,minmax(200px,1fr))"]{
    grid-template-columns:repeat(auto-fill,minmax(140px,1fr))!important;
    gap:8px!important;
  }
  #content div[style*="display:grid"][style*="grid-template-columns:repeat(auto-fill,minmax(200px,1fr))"] > button{
    padding:12px!important;border-radius:10px!important;gap:5px!important;
  }
  #content div[style*="display:grid"][style*="grid-template-columns:repeat(auto-fill,minmax(200px,1fr))"] > button > span[style*="font-size:36px"]{
    font-size:24px!important;
  }
  #content div[style*="display:grid"][style*="grid-template-columns:repeat(auto-fill,minmax(200px,1fr))"] > button > div[style*="font-size:15px"]{
    font-size:12px!important;
  }
  #content div[style*="display:grid"][style*="grid-template-columns:repeat(auto-fill,minmax(200px,1fr))"] > button > div[style*="font-size:11px"]{
    font-size:9px!important;line-height:1.4!important;
  }
  /* Travel & Car grids (minmax(140px,1fr) and minmax(150px,1fr)) */
  #content div[id="travelCityGrid"],
  #content div[id="carTypeGrid"]{
    grid-template-columns:repeat(auto-fill,minmax(105px,1fr))!important;
    gap:6px!important;
  }
  /* All-Categories grid */
  #content div[style*="display:grid"][style*="grid-template-columns:repeat(auto-fill,minmax(180px,1fr))"]:not([style*="auto-fit"]){
    grid-template-columns:repeat(auto-fill,minmax(110px,1fr))!important;
    gap:6px!important;
  }
  /* All-back button & page title */
  #content .all-back-btn{width:34px!important;height:34px!important;min-width:34px;min-height:34px}
  #content .all-back-btn svg{width:16px;height:16px}
  #content h1[style*="font-size:28px"]{font-size:18px!important}

  /* === Search page — compact === */
  #content h1[style*="font-size:26px"], #content h1[style*="font-size:24px"]{font-size:16px!important}
  #content input[style*="font-size:16px"][style*="padding:14px"], #content input[style*="font-size:15px"][style*="padding:14px"]{font-size:13px!important;padding:10px 14px!important}
  #content input[style*="font-size:16px"][style*="padding:16px"]{font-size:13px!important;padding:10px 14px!important}

  /* === Auth modal === */
  .auth-modal{
    width:100vw!important;
    max-width:100vw!important;
    max-height:100vh!important;
    max-height:100dvh!important;
    border-radius:0!important;
  }

  /* === Admin panel — full screen with horizontal scroll for tabs === */
  #adminModal{padding:0!important;align-items:stretch!important}
  #adminModal > div{
    width:100vw!important;
    max-width:100vw!important;
    max-height:100vh!important;
    max-height:100dvh!important;
    height:100vh!important;
    height:100dvh!important;
    border-radius:0!important;
  }
  /* Admin panel: stack sidebar on top, content below */
  #adminModal > div > div:nth-child(2){
    flex-direction:column!important;
  }
  /* Sidebar becomes horizontal scrollable tab bar */
  #adminModal > div > div:nth-child(2) > div:first-child{
    width:100%!important;
    max-height:130px;
    overflow-y:auto;
    border-left:none!important;
    border-bottom:1px solid rgba(77,166,255,0.1);
    padding:8px 8px!important;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:4px!important;
  }
  #adminModal > div > div:nth-child(2) > div:first-child > button{
    white-space:nowrap;
    flex-shrink:0;
    padding:8px 10px!important;
    font-size:11px!important;
  }
  /* Content area */
  #adminModal > div > div:nth-child(2) > div:nth-child(2){
    padding:12px 14px!important;
    overflow-y:auto;
  }
  /* Smaller text in admin forms */
  #adminModal input[type="text"],
  #adminModal input[type="password"],
  #adminModal input[type="email"],
  #adminModal input[type="number"],
  #adminModal textarea,
  #adminModal select{
    font-size:13px!important;
    padding:8px 10px!important;
  }
  #adminModal button{font-size:12px!important}

  /* === Settings modal === */
  #settingsModal,
  #accountModal,
  #profileModal,
  #supportModal,
  #recentsModal{
    width:100vw!important;
    max-width:100vw!important;
    max-height:100vh!important;
    max-height:100dvh!important;
    border-radius:0!important;
  }

  /* === Equalizer (inside settings) === */
  .eq-slider,
  .eq-band,
  .equalizer-control,
  [class*="equalizer"],
  [class*="eq-"]{
    width:100%!important;
    max-width:100%!important;
  }
  /* Make sure equalizer is visible and scrollable */
  #settingsModal .modal-body,
  #settingsModal > div,
  #settingsModal [class*="body"]{
    overflow-y:auto!important;
    max-height:90vh!important;
    padding:14px 12px!important;
  }
  /* Equalizer bands: stack vertically on mobile for touch accessibility */
  .eq-bands{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .eq-band-row{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
  }
  .eq-band-label{
    font-size:11px;
    min-width:40px;
  }
  .eq-band-slider{
    flex:1;
    width:100%;
    height:32px;
  }
  .eq-band-value{
    font-size:11px;
    min-width:36px;
    text-align:center;
  }
  /* Range inputs: larger touch target */
  input[type="range"]{
    height:32px!important;
    min-height:32px;
  }
  input[type="range"]::-webkit-slider-thumb{
    width:22px!important;
    height:22px!important;
    margin-top:-9px!important;
  }
  input[type="range"]::-moz-range-thumb{
    width:22px!important;
    height:22px!important;
  }

  /* === Buttons: bigger touch targets === */
  button{
    min-height:36px;
    min-width:36px;
  }
  .icon-btn{
    width:38px;
    height:38px;
    min-width:38px;
    min-height:38px;
  }
  .icon-btn svg{width:18px;height:18px}

  /* === Now Playing panel: inner content adjustments === */
  #nowPlayingPanel h1,
  #nowPlayingPanel h2,
  #nowPlayingPanel h3{font-size:18px!important}
  #nowPlayingPanel .np-section{margin-bottom:14px!important}
  #nowPlayingPanel .np-controls{padding:12px 0!important}
  #nowPlayingPanel .np-btn{width:44px!important;height:44px!important;min-width:44px;min-height:44px}
  #nowPlayingPanel .np-btn-play{width:56px!important;height:56px!important;min-width:56px;min-height:56px}
  #nowPlayingPanel .np-btn svg{width:20px!important;height:20px!important}

  /* === Explore view: more compact grids === */
  [id="travelCityGrid"],
  [id="carTypeGrid"]{
    grid-template-columns:repeat(auto-fill,minmax(120px,1fr))!important;
    gap:8px!important;
  }

  /* === Better tap targets on small phones === */
  .chart-item,
  .card,
  .cat-item{
    min-height:44px;
  }

  /* === Profile modal === */
  #profileModal > div{
    width:100vw!important;
    max-width:100vw!important;
    max-height:100vh!important;
    max-height:100dvh!important;
    border-radius:0!important;
  }

  /* === All other modal overlays: remove padding and center properly === */
  [id$="Modal"],
  [id$="Overlay"],
  [class*="modal"]:not(.mobile-nav){
    overflow-y:auto;
  }

  /* === Support chat modal === */
  #supportModal{
    width:100vw!important;
    max-width:100vw!important;
    height:100vh!important;
    height:100dvh!important;
    border-radius:0!important;
  }

  /* === Pro modal === */
  #proModal,
  #aiGenModal{
    width:100vw!important;
    max-width:100vw!important;
    max-height:100vh!important;
    max-height:100dvh!important;
    border-radius:0!important;
  }

  /* === User menu — slide-in panel on mobile === */
  .user-menu{
    position:fixed!important;
    top:0;
    left:0;
    right:0;
    bottom:auto;
    max-height:100vh;
    max-height:100dvh;
    overflow-y:auto;
    border-radius:0 0 14px 14px;
    z-index:1000;
  }

  /* === Folders/Playlists === */
  .playlist-item,
  .folder-item{padding:10px 12px!important;font-size:13px}
  .pl-icon-btn{width:32px;height:32px;min-width:32px;min-height:32px}
  .pl-icon-btn svg{width:14px;height:14px}

  /* === Lyrics === */
  .np-lyrics{font-size:13px;line-height:1.8}
  .np-lyrics-line{padding:4px 0}

  /* === Recently played === */
  .recent-card{padding:10px}
  .recent-card-art{margin-bottom:6px}
  .recent-card-title{font-size:12px}
  .recent-card-artist{font-size:10px}

  /* === Song-grid: smaller cards on mobile === */
  .songs-grid{
    grid-template-columns:repeat(auto-fill,minmax(120px,1fr))!important;
    gap:8px;
  }

  /* === Custom: back button === */
  .all-back-btn{
    width:36px!important;
    height:36px!important;
    min-width:36px;
    min-height:36px;
  }
  .all-back-btn svg{width:18px;height:18px}

  /* === Travel/Car hero sections: smaller and centered === */
  [id="car3dContainer"],
  [id="city3dContainer"]{
    width:260px!important;
    height:160px!important;
    max-width:90vw;
  }
}

/* Very small phones (≤ 360px) — iPhone SE, Galaxy S5 */
@media (max-width: 360px){
  .header{padding:0 6px}
  .header-logo{font-size:12px}
  .header-logo svg{width:18px;height:18px}
  .header-actions .icon-btn{width:28px;height:28px;min-width:28px;min-height:28px}
  .header-actions .icon-btn svg{width:13px;height:13px}
  .header-actions button{padding:3px 6px;font-size:10px}
  .hero h1{font-size:13px!important}
  .hero p{font-size:10px}
  .hero-art{width:56px;height:56px}
  .hero-orb{width:40px;height:40px}
  .section{padding:6px 8px}
  .section-header h2{font-size:12px}
  .section-header a{font-size:9px}
  .card-grid{grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:5px}
  .card-title{font-size:10px}
  .card-sub{font-size:8px}
  .card-play{width:22px;height:22px}
  .card-play svg{width:8px;height:8px}
  .chart-item{padding:5px 6px;min-height:38px}
  .chart-num{font-size:10px;width:14px}
  .chart-art{width:30px;height:30px}
  .chart-art svg{width:11px;height:11px}
  .chart-title{font-size:11px}
  .chart-artist{font-size:9px}
  .chart-plays{font-size:8px}
  .cat-grid{grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:5px}
  .cat-item{padding:8px!important;height:74px!important}
  .cat-item span[style*="font-size:18px"]{font-size:14px!important;margin-bottom:2px!important}
  .cat-item span[style*="font-size:11px"]{font-size:10px!important}
  .mini-player{bottom:58px!important;left:4px!important;right:4px!important;padding:5px 6px;border-radius:8px}
  .mini-player-art{width:28px;height:28px}
  .mini-player-title{font-size:10px}
  .mini-player-artist{font-size:8px}
  .mini-player-btn{width:28px;height:28px;min-width:28px;min-height:28px}
  .mini-player-btn svg{width:11px;height:11px}
  .mobile-nav{padding:4px 3px}
  .mobile-nav-item{font-size:7px;padding:2px 4px;min-width:42px;min-height:36px}
  .mobile-nav-item svg{width:16px;height:16px}
  .create-pl-cover{width:64px;height:64px;font-size:26px}
  .create-pl-header h2{font-size:14px}
  .create-pl-input{font-size:13px}
  #nowPlayingPanel h1{font-size:15px!important}
  #nowPlayingPanel .np-btn-play{width:38px!important;height:38px!important;min-width:38px;min-height:38px}
  #nowPlayingPanel .np-btn{width:32px!important;height:32px!important;min-width:32px;min-height:32px}
  #nowPlayingPanel .np-lyric-line{font-size:12px!important}
  #nowPlayingPanel .np-lyric-line.np-lyric-active{font-size:14px!important}
  .songs-grid{grid-template-columns:repeat(auto-fill,minmax(95px,1fr))!important}
}

/* Landscape orientation on phones */
@media (max-width: 926px) and (orientation:landscape){
  #nowPlayingPanel{
    width:100vw!important;
    height:100vh!important;
    height:100dvh!important;
    padding-top:0;
  }
  .mini-player{bottom:8px!important}
  .mobile-nav{display:none}
  .main{padding-bottom:80px!important}
}

/* Tablet — limited adjustments (768-1024px) */
@media (min-width: 769px) and (max-width: 1024px){
  .sidebar{width:200px}
  .mini-player{left:216px;right:16px}
  .card-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}

/* Disable text selection on UI controls (prevents accidental highlights on mobile) */
@media (max-width: 768px){
  .mini-player,
  .mobile-nav,
  .header,
  .player,
  .all-back-btn,
  .icon-btn,
  .player-btn,
  .pl-icon-btn,
  .chart-item,
  .card,
  .cat-item{
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-user-select:none;
         user-select:none;
    -webkit-tap-highlight-color:transparent;
  }
}

/* Make all input text dark-mode readable on mobile keyboards */
@media (max-width: 768px){
  input,textarea{font-size:16px} /* prevent iOS zoom by keeping >=16px */
  input:focus,textarea:focus{font-size:16px}
}

/* === Fix: prevent horizontal scroll on mobile === */
@media (max-width: 768px){
  html,body{overflow-x:hidden;max-width:100vw;width:100vw}
  .main{overflow-x:hidden;max-width:100%}
  .section,.card-grid,.cat-grid,.chart-list,.songs-grid{max-width:100%;overflow-x:hidden}
  /* Any inline-block wider than viewport gets clipped */
  .hero-motion{max-width:100%;overflow-x:hidden}
}


/* ===== EYE-PLEASING MODERN MATTE LIGHT THEME (SOOTHING & ELEGANT) ===== */
html[data-theme="light"] {
  --bg: #b6d7f6 !important;
  --bg-deep: #a0c9f0 !important;
  --surface: rgba(184, 218, 248, 0.94) !important;
  --surface-solid: #d2e7f8 !important;
  --card: rgba(255, 255, 255, 0.52) !important;
  --card-hover: rgba(255, 255, 255, 0.88) !important;
  --glass-bg: rgba(195, 224, 250, 0.78) !important;
  --glass-border: rgba(120, 180, 245, 0.55) !important;
  --text: #0b1e36 !important;
  --text-sub: #2d4c72 !important;
  --accent: #0284c7 !important;
  --accent-2: #38bdf8 !important;
  --accent-3: #0369a1 !important;
  --accent-dark: #075985 !important;
  --accent-glow: rgba(2, 132, 199, 0.35) !important;
  --border: rgba(120, 180, 245, 0.5) !important;
  --player-bg: rgba(195, 224, 250, 0.96) !important;
}

html[data-theme="light"] body {
  background: #b6d7f6 !important;
  color: #0b1e36 !important;
}

html[data-theme="light"] body::before {
  background: radial-gradient(circle at 15% 15%, #9bc5ee 0%, #b5d6f5 42%, #cbe3f8 100%) !important;
  opacity: 1 !important;
}

html[data-theme="light"] body::after {
  opacity: 0.04 !important;
}

/* Background canvas elements in Light Theme */
html[data-theme="light"] .bg-vignette {
  display: none !important;
}
html[data-theme="light"] .bg-noise {
  opacity: 0.012 !important;
}
html[data-theme="light"] .bg-aurora {
  opacity: 0.1 !important;
}
html[data-theme="light"] .bg-grid {
  opacity: 0.04 !important;
}
html[data-theme="light"] .bg-orb {
  opacity: 0.08 !important;
}

/* Header */
html[data-theme="light"] .header {
  background: rgba(214, 233, 252, 0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(147, 197, 253, 0.6) !important;
  color: #0f172a !important;
  box-shadow: 0 1px 12px rgba(15, 45, 90, 0.04) !important;
}

html[data-theme="light"] .header-search input {
  background: #e2f0fc !important;
  color: #0f172a !important;
  border: 1px solid rgba(147, 197, 253, 0.7) !important;
}
html[data-theme="light"] .header-search input:focus {
  background: #ffffff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.18) !important;
}
html[data-theme="light"] .header-search input::-moz-placeholder {
  color: #475569 !important;
}
html[data-theme="light"] .header-search input::placeholder {
  color: #475569 !important;
}
html[data-theme="light"] .header-search svg {
  color: #0284c7 !important;
}

/* Sidebar */
html[data-theme="light"] .sidebar {
  background: rgba(214, 233, 252, 0.94) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-left: 1px solid rgba(147, 197, 253, 0.6) !important;
  color: #0f172a !important;
}

html[data-theme="light"] .sidebar-nav button {
  color: #1e293b !important;
  font-weight: 600 !important;
}
html[data-theme="light"] .sidebar-nav button:hover,
html[data-theme="light"] .sidebar-nav button.active {
  background: rgba(2, 132, 199, 0.14) !important;
  color: #0284c7 !important;
  font-weight: 700 !important;
}

html[data-theme="light"] .library-header button {
  color: #0f172a !important;
}
html[data-theme="light"] .library-tab {
  color: #475569 !important;
  background: rgba(186, 220, 250, 0.45) !important;
}
html[data-theme="light"] .library-tab.active {
  color: #0284c7 !important;
  background: rgba(2, 132, 199, 0.15) !important;
  font-weight: 700 !important;
}

/* Main Container */
html[data-theme="light"] .main {
  background: transparent !important;
  color: #0f172a !important;
}

/* Cards — Modern Glassmorphism with Frosted Depth, NOT flat solid white */
html[data-theme="light"] .card,
html[data-theme="light"] .recent-card,
html[data-theme="light"] .quick-item {
  background: rgba(255, 255, 255, 0.52) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  color: #0b1e36 !important;
  box-shadow: 0 4px 18px rgba(15, 45, 90, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
  border-radius: 14px !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

html[data-theme="light"] .card:hover,
html[data-theme="light"] .recent-card:hover,
html[data-theme="light"] .quick-item:hover {
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: #0284c7 !important;
  box-shadow: 0 12px 28px rgba(2, 132, 199, 0.18), 0 0 1px rgba(2, 132, 199, 0.5) !important;
  transform: translateY(-4px);
}

html[data-theme="light"] .card-title,
html[data-theme="light"] .quick-title,
html[data-theme="light"] .recent-card-title {
  color: #0b1e36 !important;
  font-weight: 700 !important;
}

html[data-theme="light"] .card-sub,
html[data-theme="light"] .quick-artist,
html[data-theme="light"] .recent-card-artist {
  color: #33537a !important;
}

/* Artist items on home page — Freestanding circular avatars with NO box background or borders */
html[data-theme="light"] .artist-item {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 4px 6px !important;
}

html[data-theme="light"] .artist-circle {
  border: 3px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.22) !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

html[data-theme="light"] .artist-item:hover .artist-circle {
  border-color: #0284c7 !important;
  box-shadow: 0 8px 26px rgba(2, 132, 199, 0.45), 0 0 16px rgba(56, 189, 248, 0.35) !important;
  transform: scale(1.05);
}

html[data-theme="light"] .artist-name {
  color: #0b1e36 !important;
  font-weight: 700 !important;
}

html[data-theme="light"] .artist-item:hover .artist-name {
  color: #0284c7 !important;
}

html[data-theme="light"] .artist-genre {
  color: #33537a !important;
  font-weight: 500 !important;
}

/* Artist cards in All Artists grid */
html[data-theme="light"] .artist-card {
  background: rgba(255, 255, 255, 0.52) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 4px 18px rgba(15, 45, 90, 0.06) !important;
  border-radius: 16px !important;
}

html[data-theme="light"] .artist-card:hover {
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: #0284c7 !important;
  box-shadow: 0 10px 28px rgba(2, 132, 199, 0.2) !important;
  transform: translateY(-3px);
}

html[data-theme="light"] .artist-card-name {
  color: #0b1e36 !important;
  font-weight: 700 !important;
}

html[data-theme="light"] .artist-card-meta {
  color: #33537a !important;
}

/* Chart list rows — sleek translucent rows, NOT boxes */
html[data-theme="light"] .chart-item {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
}

html[data-theme="light"] .chart-item:hover {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 2px 10px rgba(15, 45, 90, 0.05) !important;
  transform: translateX(-3px);
}

html[data-theme="light"] .chart-item.current {
  background: rgba(2, 132, 199, 0.14) !important;
  border-right: 3px solid #0284c7 !important;
}

html[data-theme="light"] .chart-num {
  color: #0284c7 !important;
  font-weight: 800 !important;
}

html[data-theme="light"] .chart-title {
  color: #0b1e36 !important;
  font-weight: 700 !important;
}

html[data-theme="light"] .chart-artist,
html[data-theme="light"] .chart-plays {
  color: #33537a !important;
}

/* Categories & Car Types — Keep vibrant dynamic gradients & image banners */
html[data-theme="light"] .cat-item {
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow: 0 4px 18px rgba(15, 45, 90, 0.08) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

html[data-theme="light"] .cat-item:hover {
  box-shadow: 0 10px 28px rgba(2, 132, 199, 0.28) !important;
  border-color: rgba(255, 255, 255, 0.9) !important;
  transform: translateY(-3px) scale(1.03) !important;
}

html[data-theme="light"] .section-header h2 {
  color: #0b1e36 !important;
  font-weight: 800 !important;
}
html[data-theme="light"] .section-header h2::after {
  background: linear-gradient(90deg, #0284c7, #38bdf8) !important;
}
html[data-theme="light"] .section-header a {
  color: #0284c7 !important;
  font-weight: 700 !important;
}

/* Dynamic Player Bar in Light Theme — Matches Header and Sidebar */
html[data-theme="light"] .player {
  background: linear-gradient(180deg, rgba(214, 233, 252, 0.94) 0%, rgba(200, 225, 250, 0.96) 100%) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top: 1px solid rgba(147, 197, 253, 0.7) !important;
  box-shadow: 0 -4px 20px rgba(15, 45, 90, 0.08), 0 -1px 3px rgba(0, 0, 0, 0.02) !important;
  color: #0f172a !important;
}

html[data-theme="light"] .player-track-title,
html[data-theme="light"] .mini-player-title {
  color: #0f172a !important;
  font-weight: 700 !important;
}

html[data-theme="light"] .player-track-artist,
html[data-theme="light"] .mini-player-artist,
html[data-theme="light"] .player-progress span {
  color: #475569 !important;
  font-weight: 600 !important;
}

html[data-theme="light"] .player-btn {
  color: #334155 !important;
}
html[data-theme="light"] .player-btn:hover {
  color: #0284c7 !important;
  background: rgba(2, 132, 199, 0.12) !important;
}

html[data-theme="light"] .player-btn-play {
  background: linear-gradient(135deg, #0284c7, #38bdf8) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4) !important;
}

html[data-theme="light"] .player-close {
  color: #475569 !important;
}
html[data-theme="light"] .player-close:hover {
  color: #0f172a !important;
}

html[data-theme="light"] .like-btn {
  color: #475569 !important;
}
html[data-theme="light"] .like-btn.liked {
  color: #0284c7 !important;
}

html[data-theme="light"] .player-volume svg {
  color: #475569 !important;
}

html[data-theme="light"] .progress-bar-container {
  background: rgba(147, 197, 253, 0.35) !important;
}
html[data-theme="light"] .progress-bar-container .progress-track {
  background: rgba(147, 197, 253, 0.3) !important;
}

html[data-theme="light"] .progress-dot {
  background: #ffffff !important;
  border: 2px solid var(--track-color, #0284c7) !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25) !important;
}

/* Player Volume Slider in Light Theme */
.player-volume input[type=range] {
  -webkit-appearance: none;
  height: 6px;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  direction: ltr;
}
html[data-theme="light"] .player-volume input[type=range] {
  background: linear-gradient(90deg, var(--track-color, #0284c7) 0%, var(--track-color, #0284c7) 75%, rgba(147, 197, 253, 0.6) 75%, rgba(147, 197, 253, 0.6) 100%);
}
.player-volume input[type=range]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: transparent !important;
}
.player-volume input[type=range]::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: transparent !important;
}

html[data-theme="light"] .player-volume input[type=range]::-webkit-slider-thumb {
  background: #ffffff !important;
  border: 2px solid var(--track-color, #0284c7) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}
html[data-theme="light"] .player-volume input[type=range]::-moz-range-thumb {
  background: #ffffff !important;
  border: 2px solid var(--track-color, #0284c7) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Mini Player & Mobile Nav */
html[data-theme="light"] .mini-player {
  background: rgba(220, 238, 255, 0.96) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(147, 197, 253, 0.8) !important;
  color: #0f172a !important;
  box-shadow: 0 8px 30px rgba(15, 45, 90, 0.1) !important;
}

html[data-theme="light"] .mobile-nav {
  background: rgba(220, 238, 255, 0.96) !important;
  backdrop-filter: blur(20px) !important;
  border-top: 1px solid rgba(147, 197, 253, 0.8) !important;
  box-shadow: 0 -4px 20px rgba(15, 45, 90, 0.05) !important;
}
html[data-theme="light"] .mobile-nav-item {
  color: #334155 !important;
}
html[data-theme="light"] .mobile-nav-item.active {
  color: #0284c7 !important;
}

/* ===== User Menu in Light Theme ===== */
html[data-theme="light"] #userMenu {
  background: rgba(230, 242, 255, 0.96) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
  border: 1px solid rgba(147, 197, 253, 0.7) !important;
  box-shadow: 0 16px 48px rgba(15, 45, 90, 0.18), 0 0 20px rgba(2, 132, 199, 0.1) !important;
}

html[data-theme="light"] #userMenu .menu-item,
html[data-theme="light"] #userMenu button:not(.btn-play):not(.like-btn),
html[data-theme="light"] #userMenu .menu-item span,
html[data-theme="light"] #userMenu .menu-item span span {
  color: #0b1e36 !important;
  background: none !important;
}

html[data-theme="light"] #userMenu .menu-item:hover,
html[data-theme="light"] #userMenu button:not(.btn-play):not(.like-btn):hover {
  background: rgba(2, 132, 199, 0.12) !important;
  color: #0284c7 !important;
}

html[data-theme="light"] #userMenu .menu-item-logout,
html[data-theme="light"] #userMenu .menu-item-logout span {
  color: #dc2626 !important;
}

html[data-theme="light"] #userMenu .menu-item-logout:hover,
html[data-theme="light"] #userMenu .menu-item-logout:hover span {
  color: #b91c1c !important;
  background: rgba(239, 68, 68, 0.12) !important;
}

html[data-theme="light"] #userMenu .menu-item [style*="color:#f59e0b"],
html[data-theme="light"] #userMenu .menu-item [style*="color:#0284c7"] {
  color: #0284c7 !important;
}

html[data-theme="light"] #userMenu .menu-item-ext {
  opacity: 0.5 !important;
  color: #0284c7 !important;
}

html[data-theme="light"] #userMenu div[style*="height:1px"] {
  background: rgba(147, 197, 253, 0.5) !important;
}

html[data-theme="light"] #userMenu [style*="background:rgba(245,158,11,0.08)"],
html[data-theme="light"] #userMenu [style*="background:rgba(2,132,199,0.08)"] {
  background: rgba(2, 132, 199, 0.12) !important;
}
html[data-theme="light"] #userMenu [style*="background:rgba(245,158,11,0.08)"]:hover,
html[data-theme="light"] #userMenu [style*="background:rgba(2,132,199,0.08)"]:hover {
  background: rgba(2, 132, 199, 0.2) !important;
}

/* Modals & Popups in Light Theme */
html[data-theme="light"] .modal,
html[data-theme="light"] .auth-modal,
html[data-theme="light"] #settingsModal>div,
html[data-theme="light"] #profileModal>div,
html[data-theme="light"] #accountModal>div,
html[data-theme="light"] #adminModal>div,
html[data-theme="light"] #recentsModal>div,
html[data-theme="light"] #supportModal>div,
html[data-theme="light"] #aiGenModal>div,
html[data-theme="light"] #notifPanel>div,
html[data-theme="light"] #downloadsPanel>div,
html[data-theme="light"] .create-pl-modal {
  background: #e8f3fc !important;
  color: #0b1e36 !important;
  border: 1px solid rgba(147, 197, 253, 0.8) !important;
  box-shadow: 0 24px 64px rgba(15, 45, 90, 0.16) !important;
}

/* Dropdown Select Controls and Options ("گزینه‌ها") in Light Theme */
html[data-theme="light"] select,
html[data-theme="light"] .setting-select,
html[data-theme="light"] #settingsModal select,
html[data-theme="light"] #accountModal select,
html[data-theme="light"] #profileModal select,
html[data-theme="light"] #adminModal select,
html[data-theme="light"] #supportModal select,
html[data-theme="light"] #recentsModal select,
html[data-theme="light"] #aiGenModal select,
html[data-theme="light"] #proModal select,
html[data-theme="light"] #authModal select {
  background: #ffffff !important;
  color: #0b1e36 !important;
  border: 1px solid rgba(147, 197, 253, 0.7) !important;
}

html[data-theme="light"] select option,
html[data-theme="light"] .setting-select option,
html[data-theme="light"] #settingsModal select option,
html[data-theme="light"] #accountModal select option,
html[data-theme="light"] #profileModal select option,
html[data-theme="light"] #adminModal select option,
html[data-theme="light"] #supportModal select option,
html[data-theme="light"] #recentsModal select option,
html[data-theme="light"] #aiGenModal select option,
html[data-theme="light"] #proModal select option,
html[data-theme="light"] #authModal select option {
  background: #ffffff !important;
  color: #0b1e36 !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid rgba(147, 197, 253, 0.25) !important;
}

html[data-theme="light"] select option:hover,
html[data-theme="light"] .setting-select option:hover,
html[data-theme="light"] #settingsModal select option:hover,
html[data-theme="light"] #accountModal select option:hover,
html[data-theme="light"] #profileModal select option:hover {
  background: #e0f2fe !important;
  color: #0284c7 !important;
}

html[data-theme="light"] select option:checked,
html[data-theme="light"] .setting-select option:checked,
html[data-theme="light"] #settingsModal select option:checked,
html[data-theme="light"] #accountModal select option:checked,
html[data-theme="light"] #profileModal select option:checked {
  background: #0284c7 !important;
  color: #ffffff !important;
}

html[data-theme="light"] .auth-field input,
html[data-theme="light"] .create-pl-input,
html[data-theme="light"] .create-pl-textarea,
html[data-theme="light"] #bioInput,
html[data-theme="light"] #usernameInput,
html[data-theme="light"] #userSearchInput {
  background: #ffffff !important;
  color: #0b1e36 !important;
  border: 1px solid rgba(147, 197, 253, 0.7) !important;
}

html[data-theme="light"] .auth-field input:focus,
html[data-theme="light"] .setting-select:focus,
html[data-theme="light"] .create-pl-input:focus,
html[data-theme="light"] #bioInput:focus,
html[data-theme="light"] #usernameInput:focus,
html[data-theme="light"] #userSearchInput:focus {
  background: #ffffff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.18) !important;
}

/* Modal Inner Surfaces */
html[data-theme="light"] .setting-row,
html[data-theme="light"] #accountModal [style*="background:rgba(15,22,40,0.95)"],
html[data-theme="light"] #profileModal [style*="background:rgba(15,22,40,0.95)"],
html[data-theme="light"] #profileModal [style*="background:rgba(15,22,40,0.6)"],
html[data-theme="light"] #profileModal [style*="background:rgba(15,22,40,0.4)"],
html[data-theme="light"] #profileModal .profile-stat-card,
html[data-theme="light"] #accountModal #bioDisplay,
html[data-theme="light"] #accountModal #usernameDisplay {
  background: rgba(255, 255, 255, 0.65) !important;
  border: 1px solid rgba(147, 197, 253, 0.5) !important;
  color: #0b1e36 !important;
  border-radius: 10px !important;
}

html[data-theme="light"] .setting-row:hover,
html[data-theme="light"] #profileModal .profile-stat-card:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: #0284c7 !important;
}

html[data-theme="light"] .setting-label {
  color: #0b1e36 !important;
  font-weight: 700 !important;
}
html[data-theme="light"] .setting-desc {
  color: #33537a !important;
}
html[data-theme="light"] .privacy-toggle-row {
  border-bottom: 1px solid rgba(147, 197, 253, 0.3) !important;
}

/* Ensure no white text remains invisible in light theme modals */
html[data-theme="light"] #settingsModal [style*="color:#fff"],
html[data-theme="light"] #settingsModal [style*="color: #fff"],
html[data-theme="light"] #settingsModal [style*="color:#ffffff"],
html[data-theme="light"] #accountModal [style*="color:#fff"],
html[data-theme="light"] #accountModal [style*="color: #fff"],
html[data-theme="light"] #accountModal [style*="color:#ffffff"],
html[data-theme="light"] #profileModal [style*="color:#fff"],
html[data-theme="light"] #profileModal [style*="color: #fff"],
html[data-theme="light"] #profileModal [style*="color:#ffffff"],
html[data-theme="light"] #profileModal [style*="color:rgba(255,255,255,0.85)"],
html[data-theme="light"] #accountModal [style*="color:#e0e0e0"] {
  color: #0b1e36 !important;
}

html[data-theme="light"] #settingsModal [style*="color:#b3b3b3"],
html[data-theme="light"] #accountModal [style*="color:#b3b3b3"],
html[data-theme="light"] #profileModal [style*="color:#b3b3b3"],
html[data-theme="light"] #profileModal [style*="color:rgba(255,255,255,0.3)"] {
  color: #33537a !important;
}

html[data-theme="light"] #settingsModal [style*="color:#666"],
html[data-theme="light"] #accountModal [style*="color:#666"],
html[data-theme="light"] #profileModal [style*="color:#666"],
html[data-theme="light"] #accountModal [style*="color:#888"] {
  color: #475569 !important;
}

html[data-theme="light"] #profileModal .profile-section-title,
html[data-theme="light"] #profileModal .profile-username-text,
html[data-theme="light"] #profileModal .taste-bar-label {
  color: #0b1e36 !important;
}

html[data-theme="light"] #profileModal .taste-bar-pct {
  color: #33537a !important;
}

html[data-theme="light"] #settingsModal [style*="background:linear-gradient(135deg,rgba(77,166,255,0.08)"],
html[data-theme="light"] #settingsModal [style*="background:linear-gradient(135deg,rgba(77,166,255,0.06)"] {
  background: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(147, 197, 253, 0.5) !important;
}

/* Hero Motion Graphic */
html[data-theme="light"] .hero-motion {
  background: linear-gradient(135deg, rgba(186, 220, 250, 0.75), rgba(210, 233, 253, 0.85)) !important;
  border: 1px solid rgba(147, 197, 253, 0.8) !important;
  box-shadow: 0 10px 30px rgba(15, 45, 90, 0.06) !important;
}
html[data-theme="light"] .hero-motion::before {
  opacity: 0.25 !important;
}
html[data-theme="light"] .hero-motion-title span {
  background: linear-gradient(90deg, #0f172a, #0284c7, #4338ca) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
html[data-theme="light"] .hero-motion-sub {
  color: #1e293b !important;
}
html[data-theme="light"] .hero-motion-badge {
  background: rgba(2, 132, 199, 0.12) !important;
  color: #0284c7 !important;
  border-color: rgba(2, 132, 199, 0.3) !important;
}
html[data-theme="light"] .hero-motion .btn-play {
  background: linear-gradient(135deg, #0284c7, #38bdf8) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.4) !important;
}
html[data-theme="light"] .hero-motion .btn-outline {
  background: rgba(255, 255, 255, 0.8) !important;
  color: #0284c7 !important;
  border: 1px solid rgba(2, 132, 199, 0.5) !important;
}

/* ===== SCROLL TO TOP BUTTON STYLES ===== */
.melobeat-scroll-top {
  position: fixed !important;
  bottom: 100px !important;
  left: 32px !important;
  right: auto !important;
  top: auto !important;
  z-index: 9999 !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #0284c7, #38bdf8) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.45), 0 0 15px rgba(56, 189, 248, 0.25) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(16px) scale(0.85) !important;
  transition: left 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, visibility 0.25s !important;
  outline: none !important;
  pointer-events: none !important;
}

.melobeat-scroll-top.visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}

.melobeat-scroll-top:hover {
  transform: translateY(-3px) scale(1.08) !important;
  box-shadow: 0 10px 28px rgba(2, 132, 199, 0.65), 0 0 20px rgba(56, 189, 248, 0.4) !important;
}

.melobeat-scroll-top:active {
  transform: translateY(0) scale(0.95) !important;
}

/* When Equalizer / Now Playing Panel is open, shift scroll button to the right of the panel */
body.np-open .melobeat-scroll-top {
  left: 412px !important;
}

@media (max-width: 768px) {
  .melobeat-scroll-top {
    bottom: 125px !important;
    left: 20px !important;
    width: 42px !important;
    height: 42px !important;
  }
  body.np-open .melobeat-scroll-top {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}


/* ===== Account Modal Light Theme Polish ===== */
html[data-theme="light"] #accountModal > div {
  background: #e8f3fc !important;
  border: 1px solid rgba(147, 197, 253, 0.8) !important;
  color: #0b1e36 !important;
  box-shadow: 0 24px 64px rgba(15, 45, 90, 0.16) !important;
}
html[data-theme="light"] #accountModal h2 {
  color: #0b1e36 !important;
}
html[data-theme="light"] #accountModal button[onclick*="showUserMenu"],
html[data-theme="light"] #accountModal button[onclick*="accountModal').remove()"] {
  background: rgba(147, 197, 253, 0.35) !important;
  color: #0b1e36 !important;
  border: 1px solid rgba(147, 197, 253, 0.6) !important;
}
html[data-theme="light"] #accountModal button[onclick*="showUserMenu"]:hover,
html[data-theme="light"] #accountModal button[onclick*="accountModal').remove()"]:hover {
  background: rgba(2, 132, 199, 0.18) !important;
  color: #0284c7 !important;
}
html[data-theme="light"] #accountModal div[style*="border-top:1px solid rgba(255,255,255"] {
  border-top: 1px solid rgba(147, 197, 253, 0.6) !important;
}
html[data-theme="light"] #accountModal .edit-btn {
  background: rgba(2, 132, 199, 0.12) !important;
  border: 1px solid rgba(2, 132, 199, 0.35) !important;
  color: #0284c7 !important;
}
html[data-theme="light"] #accountModal .profile-field:hover {
  background: #ffffff !important;
}
html[data-theme="light"] #accountModal div[style*="padding-top:16px"] > div[style*="justify-content:space-between"] {
  background: #ffffff !important;
  border: 1px solid rgba(147, 197, 253, 0.7) !important;
  color: #0b1e36 !important;
  box-shadow: 0 2px 6px rgba(147, 197, 253, 0.12) !important;
}
html[data-theme="light"] #accountModal div[style*="padding-top:16px"] span[style*="color:#b3b3b3"] {
  color: #33537a !important;
  font-weight: 600 !important;
}
html[data-theme="light"] #accountModal div[style*="padding-top:16px"] span[style*="font-weight:500"] {
  color: #0b1e36 !important;
  font-weight: 700 !important;
}

/* ===== Admin Modal Light Theme Polish ===== */
html[data-theme="light"] #adminModal > div {
  background: #e8f3fc !important;
  border: 1px solid rgba(147, 197, 253, 0.8) !important;
  color: #0b1e36 !important;
  box-shadow: 0 28px 72px rgba(15, 45, 90, 0.18), 0 0 40px rgba(77, 166, 255, 0.15) !important;
}
html[data-theme="light"] #adminModal div[style*="radial-gradient(circle,rgba(77,166,255,0.12)"],
html[data-theme="light"] #adminModal div[style*="radial-gradient(circle,rgba(167,139,250,0.1)"] {
  opacity: 0.25 !important;
}
html[data-theme="light"] #adminModal div[style*="background:linear-gradient(135deg,rgba(15,22,40,0.96)"] {
  background: linear-gradient(135deg, #dbeefe, #eff6ff 50%, #dbeefe) !important;
  border-bottom: 1px solid rgba(147, 197, 253, 0.6) !important;
}
html[data-theme="light"] #adminModal h2 {
  background: linear-gradient(90deg, #0b1e36, #0284c7, #0b1e36) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
html[data-theme="light"] #adminModal div[style*="background:linear-gradient(135deg,rgba(15,22,40,0.96)"] p {
  color: #33537a !important;
}
html[data-theme="light"] #adminModal div[style*="display:flex;gap:6px;position:relative;z-index:2"] button:first-child {
  background: rgba(2, 132, 199, 0.1) !important;
  border: 1px solid rgba(147, 197, 253, 0.6) !important;
  color: #0284c7 !important;
}
html[data-theme="light"] #adminModal div[style*="width:184px"] {
  background: rgba(224, 242, 254, 0.9) !important;
  border-left: 1px solid rgba(147, 197, 253, 0.6) !important;
}
html[data-theme="light"] #adminModal .admin-nav-item {
  color: #33537a !important;
}
html[data-theme="light"] #adminModal .admin-nav-item:hover {
  background: rgba(2, 132, 199, 0.1) !important;
  color: #0284c7 !important;
}
html[data-theme="light"] #adminModal .admin-nav-item.active {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.16), rgba(56, 189, 248, 0.1)) !important;
  color: #0284c7 !important;
  border: 1px solid rgba(2, 132, 199, 0.35) !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.12) !important;
}
html[data-theme="light"] #adminModal div[style*="flex:1 1 0%"] {
  background: #f0f7fd !important;
  color: #0b1e36 !important;
}
/* Admin internal cards, stats, tables, and rows */
html[data-theme="light"] #adminModal div[style*="background:rgba(15,22,40,"],
html[data-theme="light"] #adminModal div[style*="background: rgba(15, 22, 40,"],
html[data-theme="light"] #adminModal div[style*="background:linear-gradient(135deg,rgba(15,22,40,"],
html[data-theme="light"] #adminModal div[style*="background: linear-gradient(135deg, rgba(15, 22, 40,"],
html[data-theme="light"] #adminModal div[style*="background:rgba(255,255,255,0.0"],
html[data-theme="light"] #adminModal div[style*="background: rgba(255, 255, 255, 0.0"],
html[data-theme="light"] #adminModal div[style*="background:rgba(77,166,255,0.05)"],
html[data-theme="light"] #adminModal div[style*="background:linear-gradient(180deg,#0f1628"],
html[data-theme="light"] #adminModal div[style*="background:linear-gradient(180deg,rgba(30,41,59"] {
  background: #ffffff !important;
  border: 1px solid rgba(147, 197, 253, 0.6) !important;
  color: #0b1e36 !important;
  box-shadow: 0 2px 8px rgba(147, 197, 253, 0.12) !important;
}
html[data-theme="light"] #adminModal div[style*="color:var(--text-sub)"],
html[data-theme="light"] #adminModal label[style*="color:var(--text-sub)"],
html[data-theme="light"] #adminModal span[style*="color:var(--text-sub)"],
html[data-theme="light"] #adminModal div[style*="color:#b3b3b3"],
html[data-theme="light"] #adminModal span[style*="color:#b3b3b3"],
html[data-theme="light"] #adminModal div[style*="color:#999"],
html[data-theme="light"] #adminModal div[style*="color:#888"],
html[data-theme="light"] #adminModal div[style*="color:#666"],
html[data-theme="light"] #adminModal span[style*="color:#666"] {
  color: #33537a !important;
}
html[data-theme="light"] #adminModal [style*="color:#fff"]:not(.btn-play *):not([style*="background:linear-gradient"]):not([style*="background:#ef4444"]):not([style*="background:#22c55e"]),
html[data-theme="light"] #adminModal [style*="color: #fff"]:not(.btn-play *):not([style*="background:linear-gradient"]):not([style*="background:#ef4444"]):not([style*="background:#22c55e"]),
html[data-theme="light"] #adminModal [style*="color:#ffffff"]:not(.btn-play *):not([style*="background:linear-gradient"]),
html[data-theme="light"] #adminModal [style*="color:rgba(255,255,255,0.85)"],
html[data-theme="light"] #adminModal [style*="color:rgba(255,255,255,0.9)"] {
  color: #0b1e36 !important;
}
html[data-theme="light"] #adminModal input,
html[data-theme="light"] #adminModal textarea,
html[data-theme="light"] #adminModal select {
  background: #ffffff !important;
  color: #0b1e36 !important;
  border: 1px solid rgba(147, 197, 253, 0.7) !important;
}
html[data-theme="light"] #adminModal button[id^="adminSettingsBtn_"],
html[data-theme="light"] #adminModal button[id^="adminAppearanceBtn_"] {
  background: rgba(224, 242, 254, 0.7) !important;
  color: #33537a !important;
  border: 1px solid rgba(147, 197, 253, 0.5) !important;
}
html[data-theme="light"] #adminModal button[id^="adminSettingsBtn_"].active,
html[data-theme="light"] #adminModal button[id^="adminAppearanceBtn_"].active {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
}


/* ===== PERFORMANCE & SMOOTH SCROLL OPTIMIZATIONS ===== */
.bg-aurora {
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
}
.bg-aurora::before,
.bg-aurora::after {
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
}
.bg-orb {
  filter: blur(35px) !important;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  contain: strict;
}
.particles {
  contain: strict;
  pointer-events: none;
}
.particle {
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.main {
  contain: layout;
  will-change: scroll-position;
  -webkit-overflow-scrolling: touch;
}
.section {
  contain: content;
}
.card, .recent-card, .chart-item {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

/* ===== Advanced Section Customization Styles ===== */
/* Section Header Badges */
.sec-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  vertical-align: middle;
  line-height: 1.3;
  margin-right: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  animation: pulseBadge 3s ease-in-out infinite;
}
@keyframes pulseBadge {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* Horizontal Scroll Carousel */
.card-carousel {
  display: flex !important;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px 2px 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(77, 166, 255, 0.3) transparent;
}
.card-carousel::-webkit-scrollbar {
  height: 6px;
}
.card-carousel::-webkit-scrollbar-track {
  background: transparent;
}
.card-carousel::-webkit-scrollbar-thumb {
  background: rgba(77, 166, 255, 0.3);
  border-radius: 4px;
}
.card-carousel::-webkit-scrollbar-thumb:hover {
  background: rgba(77, 166, 255, 0.5);
}
.card-carousel .card {
  flex: 0 0 165px !important;
  scroll-snap-align: start;
}

/* Compact List Style */
.card-compact-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 900px;
}
.compact-track-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(15, 22, 40, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(77, 166, 255, 0.12);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: right;
  color: var(--text);
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.compact-track-row:hover {
  background: rgba(77, 166, 255, 0.12);
  border-color: rgba(77, 166, 255, 0.35);
  transform: translateX(-4px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.compact-track-row.now-playing {
  background: rgba(77, 166, 255, 0.18);
  border-color: #4da6ff;
}

/* Neon Glowing Glassmorphism */
.card-grid.style-glow .card,
.card-carousel.style-glow .card {
  border-color: var(--sec-glow-border, rgba(77, 166, 255, 0.35)) !important;
  box-shadow: 0 8px 24px var(--sec-glow-shadow, rgba(77, 166, 255, 0.15)), inset 0 0 0 1px var(--sec-glow-border, rgba(77, 166, 255, 0.2));
}
.card-grid.style-glow .card:hover,
.card-carousel.style-glow .card:hover {
  border-color: var(--sec-glow-border-hover, #4da6ff) !important;
  box-shadow: 0 12px 36px var(--sec-glow-shadow-hover, rgba(77, 166, 255, 0.35)), inset 0 0 0 1px var(--sec-glow-border-hover, #4da6ff);
  transform: translateY(-5px) scale(1.02);
}

/* Bento Box Layout */
.bento-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
@media (min-width: 860px) {
  .bento-section-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .bento-section-grid .card.bento-featured {
    grid-column: span 2;
    grid-row: span 2;
    min-height: 280px;
  }
  .bento-section-grid .card.bento-featured .card-art {
    height: 200px;
  }
}

/* VIP Restricted Section Lock Card */
.sec-vip-lock {
  padding: 36px 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(15, 22, 40, 0.7));
  border: 1px solid rgba(251, 191, 36, 0.3);
  text-align: center;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

/* Hide legacy floating sidebar Pro badge */
#proBadge {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Community Playlists Discovery & Admin Moderation Styles */
.community-chip {
  padding: 7px 16px;
  border-radius: 20px;
  background: rgba(15, 22, 40, 0.6);
  border: 1px solid rgba(77, 166, 255, 0.2);
  color: var(--text-sub);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.community-chip:hover {
  color: #fff;
  border-color: rgba(77, 166, 255, 0.5);
  background: rgba(77, 166, 255, 0.12);
  transform: translateY(-2px);
}
.community-chip.active {
  background: linear-gradient(135deg, #0284c7, #38bdf8);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4);
  transform: translateY(-1px);
}

html[data-theme="light"] .community-chip {
  background: rgba(220, 238, 255, 0.7);
  border-color: rgba(147, 197, 253, 0.8);
  color: #334155;
}
html[data-theme="light"] .community-chip:hover {
  background: rgba(186, 230, 253, 0.9);
  color: #0284c7;
}
html[data-theme="light"] .community-chip.active {
  background: linear-gradient(135deg, #0284c7, #38bdf8);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
}

.comm-playlist-card {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-radius: 14px;
}
.comm-playlist-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4), 0 0 20px rgba(77, 166, 255, 0.25);
}
html[data-theme="light"] .comm-playlist-card:hover {
  box-shadow: 0 16px 36px rgba(15, 45, 90, 0.12), 0 0 20px rgba(2, 132, 199, 0.2);
}

/* Explore Hub Cards (Travel & Cars side-by-side) */
.explore-hub-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.explore-hub-card:hover {
  transform: translateY(-4px) scale(1.01);
}
html[data-theme="light"] .explore-hub-card {
  box-shadow: 0 6px 24px rgba(15, 45, 90, 0.12) !important;
}

.admin-pl-filter-btn {
  padding: 5px 12px;
  border-radius: 8px;
  background: rgba(77, 166, 255, 0.06);
  border: 1px solid rgba(77, 166, 255, 0.18);
  color: var(--text-sub);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.admin-pl-filter-btn:hover {
  background: rgba(77, 166, 255, 0.14);
  color: #4da6ff;
}
.admin-pl-filter-btn.active {
  background: linear-gradient(135deg, rgba(77, 166, 255, 0.25), rgba(0, 212, 255, 0.15));
  border-color: #4da6ff;
  color: #4da6ff;
  font-weight: 700;
}

/* Explore Hub Cards (Home Page Travel & Cars 2-card layout) */
.explore-hub-card {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.explore-hub-card:active {
  transform: scale(0.985) !important;
}
html[data-theme="light"] .explore-hub-card {
  box-shadow: 0 4px 18px rgba(15, 45, 90, 0.12) !important;
  border-color: rgba(147, 197, 253, 0.6) !important;
}

/* Destination & Car Cards (Full Page Grid) */
.destination-card, .car-model-card {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  min-height: 150px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: right;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.destination-card:hover, .car-model-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
}
.destination-card:active, .car-model-card:active {
  transform: scale(0.98);
}
html[data-theme="light"] .destination-card,
html[data-theme="light"] .car-model-card {
  box-shadow: 0 4px 16px rgba(15, 45, 90, 0.1);
  border-color: rgba(147, 197, 253, 0.6);
}

/* All Search Bar */
.all-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.all-search-wrap svg {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-sub);
  pointer-events: none;
  transition: color 0.2s;
}
[dir="ltr"] .all-search-wrap svg {
  right: auto;
  left: 14px;
}
.all-search-input {
  width: 100%;
  padding: 10px 42px 10px 16px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: all 0.25s ease;
}
[dir="ltr"] .all-search-input {
  padding: 10px 16px 10px 42px;
}
.all-search-input:focus {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(77, 166, 255, 0.18), 0 0 16px rgba(77, 166, 255, 0.15);
}
.all-search-input:focus + svg,
.all-search-wrap:focus-within svg {
  color: var(--accent);
}
html[data-theme="light"] .all-search-input {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(147, 197, 253, 0.7) !important;
  box-shadow: 0 2px 8px rgba(15, 45, 90, 0.05) !important;
}
html[data-theme="light"] .all-search-input:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.18) !important;
}

/* Suppress Next.js development error overlay badge */
nextjs-portal,
#nextjs__container,
[data-nextjs-toast],
[data-nextjs-dialog-overlay] {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}