@property --primary{syntax: "<color>"; inherits: true; initial-value: #8a2be2;}@property --secondary{syntax: "<color>"; inherits: true; initial-value: #00f0ff;}:root{--bg-dark: #0a0a14;--bg-card: rgba(18, 18, 32, .45);--bg-card-hover: rgba(26, 26, 46, .6);--border-glass: rgba(255, 255, 255, .07);--border-glass-focus: rgba(255, 255, 255, .15);--primary: #8a2be2;--primary-glow: rgba(138, 43, 226, .4);--secondary: #00f0ff;--secondary-glow: rgba(0, 240, 255, .3);--text-main: #f0f0f5;--text-muted: #8e8eaf;--text-active: #ffffff;--transition-fast: .2s ease;--transition-normal: .35s cubic-bezier(.4, 0, .2, 1);--font-heading: "Outfit", "Inter", sans-serif;--font-body: "Inter", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background-color:var(--bg-dark);color:var(--text-main);min-height:100vh;overflow:hidden;display:flex;justify-content:center;align-items:center;position:relative;transition:--primary 1.6s cubic-bezier(.25,.8,.25,1),--secondary 1.6s cubic-bezier(.25,.8,.25,1)}.bg-glow{position:absolute;width:100%;height:100%;top:0;left:0;overflow:hidden;z-index:0;pointer-events:none}.blob{position:absolute;border-radius:50%;filter:blur(50px);opacity:calc(var(--blob-opacity, 1) * .35);mix-blend-mode:screen;animation:blob-float 25s infinite alternate ease-in-out;will-change:transform;contain:layout paint style;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(0);transition:opacity .3s ease}.blob-1{width:250px;height:250px;background:radial-gradient(circle,var(--primary) 0%,transparent 70%);top:-10%;left:-10%;animation-duration:20s}.blob-2{width:300px;height:300px;background:radial-gradient(circle,var(--secondary) 0%,transparent 70%);bottom:-15%;right:-10%;animation-duration:28s;animation-delay:-5s}.blob-3{width:200px;height:200px;background:radial-gradient(circle,#ff007f 0%,transparent 70%);top:40%;left:50%;animation-duration:24s;animation-delay:-10s}@keyframes blob-float{0%{transform:translateZ(0) scale(calc(var(--blob-scale, 1) * 2)) rotate(0)}33%{transform:translate3d(50px,-40px,0) scale(calc(var(--blob-scale, 1) * 2.3)) rotate(120deg)}66%{transform:translate3d(-30px,40px,0) scale(calc(var(--blob-scale, 1) * 1.8)) rotate(240deg)}to{transform:translateZ(0) scale(calc(var(--blob-scale, 1) * 2)) rotate(360deg)}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#ffffff03}::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:4px;border:1px solid transparent;background-clip:padding-box}::-webkit-scrollbar-thumb:hover{background:var(--secondary, #00f0ff);box-shadow:0 0 8px var(--secondary-glow, rgba(0, 240, 255, .4))}.app-container{position:relative;z-index:1;width:94vw;height:90vh;max-width:1400px;max-height:850px;display:grid;grid-template-columns:340px 1fr;background:var(--bg-card);backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);border:1px solid var(--border-glass);border-radius:24px;box-shadow:0 24px 64px #0006;overflow:hidden;transition:box-shadow var(--transition-normal),border-color var(--transition-normal)}.sidebar{background:#08081080;border-right:1px solid var(--border-glass);display:flex;flex-direction:column;overflow:hidden;contain:layout paint style}.brand{padding:24px;display:flex;align-items:center;gap:12px}.brand .logo{display:flex;justify-content:center;align-items:center;width:44px;height:44px;background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:12px;color:#fff;box-shadow:0 4px 15px var(--primary-glow)}.brand h1{font-family:var(--font-heading);font-size:1.35rem;font-weight:700;letter-spacing:.5px;background:linear-gradient(90deg,#fff,#8a2be2,#00f0ff,#fff);background-size:300% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:text-shimmer 8s linear infinite}@keyframes text-shimmer{0%{background-position:0% 50%}to{background-position:300% 50%}}.import-section{padding:0 24px 20px;display:flex;flex-direction:column;gap:12px}.import-buttons{display:flex;gap:10px}.btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 14px;border-radius:10px;font-family:var(--font-body);font-size:.85rem;font-weight:500;cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast),opacity var(--transition-fast);outline:none}.btn-primary{background:linear-gradient(135deg,var(--primary),#a24bf5);color:#fff;border:none;box-shadow:0 4px 12px var(--primary-glow)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 18px #8a2be28c}.btn-secondary{background:#ffffff0d;color:var(--text-main);border:1px solid var(--border-glass)}.btn-secondary:hover{background:#ffffff1a;border-color:var(--border-glass-focus)}.drop-zone{border:2px dashed rgba(255,255,255,.12);border-radius:12px;padding:18px 14px;text-align:center;font-size:.8rem;color:var(--text-muted);transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast),opacity var(--transition-fast);cursor:pointer;background:#ffffff03;display:flex;flex-direction:column;align-items:center;gap:8px}.drop-zone-icon{color:var(--text-muted);transition:color var(--transition-fast),transform .4s cubic-bezier(.4,0,.2,1)}.drop-zone:hover .drop-zone-icon{color:var(--secondary);transform:translateY(-3px) scale(1.05)}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-4px)}to{transform:translateY(0)}}.drop-zone-icon svg{animation:float 4s ease-in-out infinite}.drop-zone.dragover{border-color:var(--secondary);background:#00f0ff0a;color:var(--text-main);box-shadow:0 0 15px var(--secondary-glow);animation:border-dance 1.5s linear infinite}@keyframes border-dance{0%{border-color:var(--secondary)}50%{border-color:var(--primary)}to{border-color:var(--secondary)}}.playlist-header{padding:0 24px 10px}.search-box{display:flex;align-items:center;gap:8px;background:#0003;border:1px solid var(--border-glass);border-radius:8px;padding:8px 12px;margin-bottom:12px;color:var(--text-muted);transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast),opacity var(--transition-fast)}.search-box:focus-within{border-color:var(--secondary);box-shadow:0 0 8px var(--secondary-glow);color:var(--text-main)}.search-box input{background:transparent;border:none;outline:none;color:#fff;font-size:.85rem;width:100%}.search-box input::placeholder{color:var(--text-muted)}.playlist-stats{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--text-muted);padding:0 2px}.btn-text{background:transparent;border:none;color:var(--text-muted);cursor:pointer;font-size:.8rem;transition:color var(--transition-fast)}.btn-text:hover{color:#ff4d4d}.btn-text-sm{background:#ffffff0d;border:1px solid var(--border-glass);border-radius:4px;color:var(--text-muted);padding:2px 6px;font-size:.75rem;cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast),opacity var(--transition-fast)}.btn-text-sm:hover{background:#ffffff1a;color:#fff}.playlist-container{flex:1;overflow-y:auto;padding:10px 16px 20px 24px}.playlist{list-style:none;display:flex;flex-direction:column;gap:6px}.playlist-item{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:10px;cursor:pointer;background:transparent;transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast),box-shadow var(--transition-fast),transform .38s cubic-bezier(.25,.8,.25,1.25),opacity var(--transition-fast);position:relative;border:1px solid transparent;overflow:hidden}.playlist-item:before{content:"";position:absolute;top:0;left:0;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);transform:translate3d(-150%,0,0) skew(-25deg);transition:none;z-index:1}.playlist-item:after{content:"";position:absolute;top:0;left:0;width:3.5px;height:100%;background:linear-gradient(to bottom,var(--primary),var(--secondary));transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.25,.8,.25,1.2);z-index:2}.playlist-item:hover:before{transform:translate3d(300%,0,0) skew(-25deg);transition:transform .6s cubic-bezier(.25,1,.5,1)}.playlist-item:hover{background:var(--bg-card-hover);border-color:#ffffff0a;transform:translate(6px)}.playlist-item:hover:after{transform:scaleX(1)}.playlist-item.active{background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 14%,transparent),color-mix(in srgb,var(--secondary) 8%,transparent),color-mix(in srgb,var(--primary) 14%,transparent));background-size:200% 200%;animation:fluid-wave 6s ease infinite;border-color:color-mix(in srgb,var(--primary) 25%,transparent);box-shadow:inset 0 0 10px color-mix(in srgb,var(--primary) 5%,transparent)}.playlist-item .track-main{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.playlist-item .track-index{font-size:.8rem;color:var(--text-muted);width:20px;text-align:center}.playlist-item.active .track-index{color:var(--secondary)}.wave-animation{display:none;align-items:flex-end;gap:2.5px;width:20px;height:12px}.playlist-item.active .wave-animation{display:inline-flex}.playlist-item.active .track-index-num{display:none}.wave-bar{width:3px;height:100%;background-color:var(--secondary);border-radius:1px;transform-origin:bottom;animation:wave-bounce 1s ease-in-out infinite alternate;will-change:transform}.wave-bar:nth-child(2){animation-delay:-.3s}.wave-bar:nth-child(3){animation-delay:-.6s}@keyframes wave-bounce{0%{transform:scaleY(.2)}to{transform:scaleY(1)}}@keyframes fluid-wave{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.playlist-item.paused .wave-bar{animation-play-state:paused;transform:scaleY(.3)}.playlist-item.active:not(.paused) .wave-bar{animation:none;transform-origin:bottom;will-change:transform}.playlist-item .track-meta{flex:1;min-width:0}.playlist-item .track-title{font-size:.85rem;font-weight:500;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--transition-fast)}.playlist-item.active .track-title{color:#fff;font-weight:600}.playlist-item .track-artist{font-size:.75rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlist-item.active .track-artist{color:#fff9}.playlist-item .track-right{display:flex;align-items:center;gap:12px}.playlist-item .track-duration{font-size:.75rem;color:var(--text-muted)}.playlist-item .btn-remove-track{background:transparent;border:none;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:4px;opacity:0;transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast),opacity var(--transition-fast)}.playlist-item:hover .btn-remove-track{opacity:1}.playlist-item .btn-remove-track:hover{color:#ff4d4d;background:#ff4d4d1a}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-muted);padding:60px 20px;text-align:center;gap:12px}.empty-state p{font-size:.85rem;line-height:1.5}.main-content{display:flex;flex-direction:column;overflow:hidden;background:#0a0a1433;contain:layout paint style}.top-bar{padding:24px 32px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-glass)}.now-playing-info h2{font-family:var(--font-heading);font-size:1.4rem;font-weight:700;color:#fff;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:450px}.now-playing-info p{font-size:.85rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:450px}.quick-settings{display:flex;align-items:center;gap:14px}.select-wrapper{position:relative;overflow:hidden;border-radius:8px}.select-wrapper:before{content:"";position:absolute;bottom:0;left:0;width:100%;height:1.5px;background:linear-gradient(90deg,var(--primary),var(--secondary));transform:scaleX(0);transition:transform var(--transition-fast);z-index:5}.select-wrapper:hover:before,.select-wrapper:focus-within:before{transform:scaleX(1)}.select-wrapper select{background:#0000004d;border:1px solid var(--border-glass);border-radius:8px;padding:8px 30px 8px 14px;color:var(--text-main);font-family:var(--font-body);font-size:.8rem;outline:none;cursor:pointer;-moz-appearance:none;appearance:none;-webkit-appearance:none;transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast),opacity var(--transition-fast)}.select-wrapper select:focus,.select-wrapper select:hover{border-color:var(--primary);box-shadow:0 0 10px var(--primary-glow)}.select-wrapper select option{background-color:#121220;color:var(--text-main)}.select-wrapper:after{content:"";position:absolute;right:12px;top:50%;transform:translateY(-50%);border:4px solid transparent;border-top-color:var(--text-muted);pointer-events:none}.btn-icon{display:flex;justify-content:center;align-items:center;background:#ffffff0a;border:1px solid var(--border-glass);color:var(--text-muted);border-radius:10px;width:38px;height:38px;cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast),opacity var(--transition-fast)}.btn-icon:hover{background:#ffffff1a;color:#fff;border-color:var(--border-glass-focus)}.btn-icon.active{color:var(--secondary);background:#00f0ff1a;border-color:#00f0ff40;box-shadow:0 0 10px var(--secondary-glow)}.content-body{flex:1;display:grid;grid-template-columns:1.1fr .9fr;padding:32px;gap:32px;overflow:hidden;align-items:center}.visualizer-container{position:relative;width:100%;aspect-ratio:1;max-width:380px;margin:0 auto;display:flex;justify-content:center;align-items:center;border-radius:50%}#visualizer-canvas{position:absolute;width:100%;height:100%;top:0;left:0;z-index:1;pointer-events:none}.vinyl-wrapper{position:relative;width:72%;height:72%;border-radius:50%;z-index:2;padding:10px;background:#00000059;box-shadow:0 24px 64px #000000a6,0 8px 16px #0006,inset 0 1px 1px #ffffff14;border:1px solid var(--border-glass)}.vinyl-disc{position:relative;width:100%;height:100%;background:radial-gradient(circle at center,#181822 0%,#101018 7%,#030305 9%,#08080c 11%,transparent 11.5%),conic-gradient(from 120deg at 50% 50%,#08080c,#1c1c28,#08080c 90deg,#040406 180deg,#1c1c28,#08080c 270deg,#040406 360deg),radial-gradient(circle at center,#0c0c14,#030305 60%,#0c0c14);border-radius:50%;box-shadow:inset 0 0 15px #000000e6,0 0 25px #000000b3;display:flex;justify-content:center;align-items:center;animation:spin 20s linear infinite;animation-play-state:paused;will-change:transform}.vinyl-disc.playing{animation-play-state:running}.vinyl-grooves{position:absolute;width:86%;height:86%;border-radius:50%;border:1px dashed rgba(255,255,255,.035);pointer-events:none}.vinyl-grooves:before{content:"";position:absolute;width:80%;height:80%;top:10%;left:10%;border-radius:50%;border:1px solid rgba(255,255,255,.025)}.vinyl-grooves:after{content:"";position:absolute;width:62%;height:62%;top:19%;left:19%;border-radius:50%;border:1px dashed rgba(255,255,255,.03)}.vinyl-disc img{width:44%;height:44%;border-radius:50%;object-fit:cover;z-index:3;border:4px solid #040406;box-shadow:0 0 15px #0009;background-color:#2a2a3e}.vinyl-disc:before{content:"";position:absolute;width:44%;height:44%;border-radius:50%;background:conic-gradient(from 0deg at 50% 50%,#fff0,#ffffff1f,#fff0,#ffffff1f,#fff0 360deg);z-index:4;pointer-events:none;mix-blend-mode:overlay}.tonearm{position:absolute;top:4%;right:5%;width:80px;height:250px;z-index:5;pointer-events:none;transform-origin:40px 40px;transform:rotate(-28deg);filter:drop-shadow(4px 8px 16px rgba(0,0,0,.55));will-change:transform,filter}.tonearm.playing{animation:needle-drop 1.5s cubic-bezier(.25,.8,.25,1) forwards}.tonearm.parked{animation:needle-lift 1.3s cubic-bezier(.25,.8,.25,1) forwards}.tonearm.vibrating{animation:stylus-wobble .3s infinite alternate ease-in-out}@keyframes needle-drop{0%{transform:rotate(-28deg) scale(1)}35%{transform:rotate(-10deg) scale(1.06)}70%{transform:rotate(12deg) scale(1.06)}to{transform:rotate(12deg) scale(1)}}@keyframes needle-lift{0%{transform:rotate(12deg) scale(1)}35%{transform:rotate(12deg) scale(1.06)}70%{transform:rotate(-28deg) scale(1.06)}to{transform:rotate(-28deg) scale(1)}}@keyframes stylus-wobble{0%{transform:rotate(12deg) translateZ(0)}to{transform:rotate(12.12deg) translate3d(.12px,.12px,0)}}.tonearm-svg{width:100%;height:100%;overflow:visible}.stylus-led{fill:var(--secondary, #00f0ff);filter:drop-shadow(0 0 5px var(--secondary, #00f0ff));transition:fill 1.6s cubic-bezier(.25,.8,.25,1),filter 1.6s cubic-bezier(.25,.8,.25,1)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.lyrics-container{background:#0000002e;border:1px solid var(--border-glass);border-radius:18px;height:100%;min-height:280px;max-height:380px;display:flex;flex-direction:column;overflow:hidden}.lyrics-header{padding:14px 20px;border-bottom:1px solid var(--border-glass);display:flex;justify-content:space-between;align-items:center;font-size:.85rem;font-weight:600;color:var(--text-main);background:#0000001a}.lyrics-offset-ctrl{display:flex;align-items:center;gap:8px}.lyrics-offset-ctrl span{font-size:.75rem;font-family:monospace;color:var(--text-muted);width:32px;text-align:center}.lyrics-scroll-area{flex:1;overflow-y:auto;position:relative;mask-image:linear-gradient(to bottom,transparent 0%,white 15%,white 85%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,white 15%,white 85%,transparent 100%);padding:80px 20px}.lyrics-list{display:flex;flex-direction:column;gap:16px;text-align:center}.lyric-line{font-size:.95rem;color:#fff;opacity:1;padding:6px 12px;line-height:1.4;transform:scale(.92);transition:font-weight .4s cubic-bezier(.4,0,.2,1),color .4s cubic-bezier(.4,0,.2,1),opacity .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1);cursor:pointer;border-radius:6px;position:relative}.lyric-line:hover{background:#ffffff0a;opacity:1;color:#fff;transform:scale(1)}.lyric-line.active{font-weight:600;color:var(--secondary, #00f0ff);opacity:1;text-shadow:0 0 calc(var(--lyric-pulse, 1) * 12px) var(--secondary-glow);transform:scale(calc(var(--lyric-pulse, 1) * 1.12));transition:font-weight .4s cubic-bezier(.4,0,.2,1),color .4s cubic-bezier(.4,0,.2,1),opacity .4s cubic-bezier(.4,0,.2,1),transform .1s ease-out,text-shadow .1s ease-out}.lyric-empty{font-size:.9rem;color:var(--text-muted);line-height:1.6;padding:40px 0}.player-controls{padding:16px 32px 28px;background:#08081073;border-top:1px solid var(--border-glass)}.progress-section{display:flex;align-items:center;gap:16px;margin-bottom:16px}.time-display{font-size:.78rem;color:var(--secondary, #00f0ff);font-family:monospace;width:45px;font-weight:600;letter-spacing:.5px;text-shadow:0 0 6px var(--secondary-glow, rgba(0, 240, 255, .4)),0 0 1px var(--secondary, #00f0ff);transition:color 1.6s cubic-bezier(.25,.8,.25,1),text-shadow 1.6s cubic-bezier(.25,.8,.25,1)}#time-current{text-align:right}#time-duration{text-align:left}.slider-container{flex:1;position:relative;height:6px;border-radius:3px;background:repeating-linear-gradient(to right,rgba(255,255,255,.08) 0px,rgba(255,255,255,.08) 1px,transparent 1px,transparent 4px),#ffffff0d;cursor:pointer;display:flex;align-items:center;transition:height var(--transition-fast),background var(--transition-fast)}.slider-container:hover{height:7px;background:repeating-linear-gradient(to right,rgba(255,255,255,.12) 0px,rgba(255,255,255,.12) 1px,transparent 1px,transparent 4px),#ffffff14}.slider-container input[type=range]{position:absolute;width:100%;height:100%;top:0;left:0;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;margin:0;z-index:10;cursor:pointer}.slider-container input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 10px #00f0ffd9,0 0 2px #ffffff80;cursor:pointer;transition:width .2s cubic-bezier(.25,.8,.25,1.2),height .2s cubic-bezier(.25,.8,.25,1.2),border-radius .2s,box-shadow .2s,opacity .2s;opacity:0}.slider-container:hover input[type=range]::-webkit-slider-thumb{opacity:1}.slider-container input[type=range]::-webkit-slider-thumb:hover,.slider-container input[type=range]::-webkit-slider-thumb:active{width:18px;height:6px;border-radius:3px;box-shadow:0 0 16px var(--secondary, #00f0ff)}.slider-container input[type=range]::-moz-range-thumb{width:10px;height:10px;border:none;border-radius:50%;background:#fff;box-shadow:0 0 10px #00f0ffd9;cursor:pointer;transition:width .2s cubic-bezier(.25,.8,.25,1.2),height .2s cubic-bezier(.25,.8,.25,1.2),border-radius .2s,box-shadow .2s,opacity .2s;opacity:0}.slider-container:hover input[type=range]::-moz-range-thumb{opacity:1}.slider-container input[type=range]::-moz-range-thumb:hover,.slider-container input[type=range]::-moz-range-thumb:active{width:18px;height:6px;border-radius:3px;box-shadow:0 0 16px var(--secondary, #00f0ff)}.slider-progress{position:absolute;top:0;left:0;height:100%;width:0;background:linear-gradient(to right,var(--primary),var(--secondary));border-radius:3px;box-shadow:0 0 8px #00f0ff66;pointer-events:none;z-index:5;transition:width .05s linear}.slider-container:hover{height:7px}.slider-container:hover .slider-progress{box-shadow:0 0 12px #00f0ff99}.controls-action-bar{display:grid;grid-template-columns:1fr 1.5fr 1fr;align-items:center}.mini-info{display:flex;align-items:center;gap:12px;min-width:0}.mini-info img{width:44px;height:44px;border-radius:8px;object-fit:cover;border:1px solid var(--border-glass);background-color:#2a2a3e}.mini-text{min-width:0}#mini-title{font-size:.85rem;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}#mini-artist{font-size:.75rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playback-buttons{display:flex;justify-content:center;align-items:center;gap:16px}.btn-medium{width:42px;height:42px;border-radius:50%}.btn-large{width:52px;height:52px;border-radius:50%;color:#fff}.btn-play{position:relative;background:linear-gradient(135deg,var(--primary),var(--secondary));border:none;box-shadow:0 4px 18px #8a2be266;color:#fff;z-index:1}.btn-play:before{content:"";position:absolute;top:-4px;left:-4px;right:-4px;bottom:-4px;background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:50%;z-index:-1;opacity:.25;transition:transform var(--transition-normal),opacity var(--transition-normal)}.btn-play:hover{transform:scale(1.06);box-shadow:0 6px 24px #00f0ffa6}.btn-play:hover:before{opacity:.45;background:conic-gradient(from 0deg,var(--primary),var(--secondary),var(--primary));animation:spin-pulse-ring 2.5s linear infinite;will-change:transform,opacity}@keyframes spin-pulse-ring{0%{transform:rotate(0) scale(1);opacity:.45}50%{opacity:.25}to{transform:rotate(360deg) scale(1.35);opacity:0}}.btn-play svg{filter:drop-shadow(0 2px 5px rgba(0,0,0,.15))}#btn-repeat{position:relative}#repeat-badge{position:absolute;top:4px;right:4px;font-size:.6rem;font-weight:800;background:var(--secondary);color:#000;width:12px;height:12px;border-radius:50%;display:none;justify-content:center;align-items:center}.volume-section{display:flex;align-items:center;gap:10px;justify-self:end;width:130px}.volume-slider-container{height:4px}@media(max-width:980px){.app-container{grid-template-columns:1fr;height:96vh;max-height:none}.sidebar{border-right:none;border-bottom:1px solid var(--border-glass);height:280px}.content-body{grid-template-columns:1fr;padding:20px;gap:20px;overflow-y:auto;align-items:center}.visualizer-container{max-width:240px;margin:10px auto}.lyrics-container{max-height:200px;min-height:150px}.controls-action-bar{grid-template-columns:1fr 1fr;row-gap:12px}.mini-info{grid-column:1 / 3}.playback-buttons{justify-content:flex-start}}@media(max-width:480px){.app-container{width:100vw;height:100vh;border-radius:0;border:none}.sidebar{height:220px}.brand{padding:14px}.import-section{padding:0 14px 10px}.playlist-header{padding:0 14px 8px}.playlist-container{padding:8px 14px}.top-bar{padding:14px}.now-playing-info h2{max-width:200px;font-size:1.1rem}.controls-action-bar{grid-template-columns:1fr}.mini-info{grid-column:1 / 2}.playback-buttons{justify-content:center;margin-top:10px}.volume-section{display:none}}.btn-primary,.btn-secondary,.btn-icon,.btn-medium,.btn-large,.btn-play,.btn-text-sm,.btn-remove-track{transition:transform .4s cubic-bezier(.175,.885,.32,1.275),background var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast),color var(--transition-fast),opacity var(--transition-fast)!important}.btn-primary:active,.btn-secondary:active,.btn-icon:active,.btn-medium:active,.btn-large:active,.btn-play:active,.btn-text-sm:active,.btn-remove-track:active{transform:scale(.92)!important}.select-wrapper{position:relative;display:flex;align-items:center}.eq-curve-svg{position:absolute;right:28px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:.8;filter:drop-shadow(0 0 5px var(--secondary-glow));transition:opacity var(--transition-normal)}.select-wrapper select{padding-right:76px!important}#eq-curve-path{transition:d .4s cubic-bezier(.4,0,.2,1)}.track-meta-fade{transition:transform .24s cubic-bezier(.4,0,.2,1),opacity .24s cubic-bezier(.4,0,.2,1);will-change:transform,opacity}.track-meta-out{transform:translateY(-8px);opacity:0}.progress-tooltip,.volume-tooltip{position:absolute;bottom:14px;left:var(--tooltip-x, 0px);transform:translate(-50%);background:#0a0a14d9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--border-glass);padding:2px 8px;border-radius:4px;color:#fff;font-size:.65rem;font-family:monospace;pointer-events:none;opacity:0;transition:opacity .2s ease,bottom .2s ease;z-index:100;box-shadow:0 4px 12px #00000080}.slider-container:hover .progress-tooltip,.slider-container:hover .volume-tooltip{opacity:1;bottom:18px}.border-beam{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:10;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;background:transparent;overflow:hidden}.border-beam:before{content:"";position:absolute;width:200%;height:200%;top:-50%;left:-50%;background:conic-gradient(from 0deg,transparent 0deg,transparent 280deg,var(--secondary, #00f0ff) 320deg,var(--primary, #8a2be2) 345deg,transparent 360deg);animation:spin-beam 7s linear infinite}@keyframes spin-beam{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.sidebar,.lyrics-container,.player-controls{position:relative;box-sizing:border-box}.play-pulse-ring{position:absolute;top:50%;left:50%;width:100%;height:100%;border:2px solid var(--secondary, #00f0ff);border-radius:50%;transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:none;animation:pulse-out .8s cubic-bezier(.1,.8,.3,1) forwards;box-shadow:0 0 15px var(--secondary-glow, rgba(0, 240, 255, .5));z-index:-2}@keyframes pulse-out{0%{transform:translate(-50%,-50%) scale(.9);opacity:.9}to{transform:translate(-50%,-50%) scale(2.4);opacity:0}}.volume-slider-container{background:#ffffff0d;border-radius:2px}