:root{--bg: #0a0a0f;--surface: #12121a;--surface2: #1a1a28;--border: rgba(255,255,255,.06);--accent: #7c6af7;--accent2: #c084fc;--text: #f0f0f8;--text-dim: #8888a8;--text-muted: #555570;--danger: #ef4444;--radius: 16px;--radius-sm: 8px;--font: "Space Grotesk", sans-serif;--font-mono: "Space Mono", monospace}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;width:100%;overflow:hidden}body{font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overscroll-behavior:none}button{border:none;background:none;cursor:pointer;font-family:inherit}img{display:block;max-width:100%}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none}.app,.app-loading{height:100%;width:100%;display:flex;align-items:center;justify-content:center}.app-loading{flex-direction:column;gap:16px;color:var(--text-dim);font-size:14px}.loading-spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}.loading-spinner.sm{width:20px;height:20px;border-width:2px}@keyframes spin{to{transform:rotate(360deg)}}.player-root{position:relative;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.player-bg{position:absolute;top:-40px;right:-40px;bottom:-40px;left:-40px;background-size:cover;background-position:center;filter:blur(60px) saturate(1.4);opacity:.18;transition:background-image 1s ease;pointer-events:none;z-index:0}.player-bg-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom,var(--bg) 0%,rgba(10,10,15,.85) 40%,rgba(10,10,15,.95) 100%);z-index:1;pointer-events:none}.player-header{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid var(--border)}.header-logo{display:flex;align-items:center;gap:8px}.logo-icon{font-size:20px;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.logo-text{font-size:16px;font-weight:700;letter-spacing:.5px;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.listeners{display:flex;align-items:center;gap:8px}.listeners-dots{display:flex;gap:3px}.listener-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);opacity:.9;animation:pulse-dot 2s ease-in-out infinite}@keyframes pulse-dot{0%,to{opacity:.5;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}.listeners-count{font-size:12px;color:var(--text-dim);font-family:var(--font-mono)}.player-content{flex:1;position:relative;z-index:10;overflow:hidden}.player-main{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;padding:12px 24px 8px;gap:8px}.album-art-wrap{position:relative;flex-shrink:0}.album-art-ring{position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;border-radius:50%;border:2px solid transparent;background:linear-gradient(135deg,var(--accent),var(--accent2)) border-box;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:destination-out;mask-composite:exclude;opacity:0;transition:opacity .4s}.album-art-wrap.playing .album-art-ring{opacity:1}.album-art-wrap.playing .album-art{animation:slow-rotate 20s linear infinite}@keyframes slow-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.album-art{width:clamp(160px,40vw,220px);height:clamp(160px,40vw,220px);border-radius:50%;object-fit:cover;box-shadow:0 8px 40px #7c6af74d;transition:box-shadow .4s}.album-art-wrap.playing .album-art{box-shadow:0 12px 60px #7c6af780}.album-loading{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#00000080;border-radius:50%}.track-info{text-align:center;max-width:100%;padding:0 8px}.track-title{font-size:clamp(16px,4.5vw,20px);font-weight:700;color:var(--text);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:4px}.track-artist{font-size:14px;color:var(--text-dim);margin-bottom:4px}.track-requested{font-size:11px;color:var(--text-muted);font-family:var(--font-mono)}.progress-section{width:100%}.progress-bar-root{width:100%;height:32px;display:flex;align-items:center;cursor:pointer;padding:12px 0;touch-action:none}.progress-track{position:relative;width:100%;height:4px;background:var(--surface2);border-radius:2px;overflow:visible}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:2px;transition:width .25s linear;pointer-events:none}.progress-hover{position:absolute;top:0;left:0;height:100%;background:#ffffff26;border-radius:2px;pointer-events:none}.progress-thumb{position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 8px #7c6af7cc;transition:transform .15s ease;pointer-events:none}.progress-bar-root:hover .progress-thumb,.progress-thumb.dragging{transform:translate(-50%,-50%) scale(1)}.time-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted);font-family:var(--font-mono);margin-top:4px}.controls{display:flex;align-items:center;justify-content:center;gap:24px}.ctrl-btn{color:var(--text);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .15s,opacity .15s,background .15s}.ctrl-btn:disabled{opacity:.4;pointer-events:none}.ctrl-btn.secondary{width:44px;height:44px;color:var(--text-dim);background:var(--surface2)}.ctrl-btn.secondary:hover{background:var(--surface);color:var(--text);transform:scale(1.05)}.ctrl-btn.play-btn{width:62px;height:62px;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 4px 24px #7c6af773}.ctrl-btn.play-btn:hover{transform:scale(1.07);box-shadow:0 6px 30px #7c6af799}.ctrl-btn.play-btn:active{transform:scale(.96)}.volume-section{display:flex;align-items:center;gap:10px;width:100%}.vol-icon{font-size:14px}.volume-slider{flex:1;height:4px;background:var(--surface2);border-radius:2px;outline:none}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 0 6px #7c6af780}.lyrics-root{height:100%;display:flex;flex-direction:column;padding:0}.lyrics-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0}.lyrics-header h2{font-size:15px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:70%}.lyrics-badge{font-size:11px;background:var(--surface2);color:var(--text-dim);padding:3px 8px;border-radius:12px;font-family:var(--font-mono);flex-shrink:0}.lyrics-scroll{flex:1;overflow-y:auto;padding:20px 24px 40px;scroll-behavior:smooth}.lyrics-scroll::-webkit-scrollbar{width:3px}.lyrics-scroll::-webkit-scrollbar-thumb{background:var(--surface2);border-radius:2px}.lyric-line{font-size:18px;font-weight:500;line-height:1.6;color:var(--text-muted);margin-bottom:10px;transition:color .3s,font-size .3s,transform .3s;cursor:default}.lyric-line.active{color:var(--text);font-size:21px;font-weight:700;transform:translate(4px)}.lyric-line.past{color:var(--text-muted);opacity:.6}.lyrics-plain{line-height:1.8}.lyric-line-plain{font-size:15px;color:var(--text-dim);margin-bottom:2px}.lyric-spacer{height:14px}.lyrics-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--text-muted)}.lyrics-empty .empty-icon{font-size:48px}.lyrics-empty p{font-size:14px}.empty-track{font-weight:600;color:var(--text-dim)}.queue-root{height:100%;display:flex;flex-direction:column}.queue-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0}.queue-header h2{font-size:16px;font-weight:700}.queue-count{font-size:12px;color:var(--text-muted);font-family:var(--font-mono);background:var(--surface2);padding:3px 8px;border-radius:12px}.queue-now-playing{display:flex;align-items:center;gap:12px;padding:12px 20px;background:linear-gradient(90deg,rgba(124,106,247,.12),transparent);border-bottom:1px solid var(--border);flex-shrink:0}.queue-playing-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse-dot 1.5s ease-in-out infinite;flex-shrink:0}.queue-list{flex:1;overflow-y:auto;padding:8px 0 40px}.queue-list::-webkit-scrollbar{width:3px}.queue-list::-webkit-scrollbar-thumb{background:var(--surface2);border-radius:2px}.queue-item{display:flex;align-items:center;gap:12px;padding:10px 20px;transition:background .15s}.queue-item:hover{background:var(--surface2)}.queue-num{width:20px;text-align:center;font-size:12px;color:var(--text-muted);font-family:var(--font-mono);flex-shrink:0}.queue-thumb{width:44px;height:44px;border-radius:var(--radius-sm);object-fit:cover;flex-shrink:0}.queue-track-info{flex:1;overflow:hidden;display:flex;flex-direction:column;gap:2px}.queue-track-title{font-size:14px;font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.queue-track-artist{font-size:12px;color:var(--text-dim)}.queue-requested-by{font-size:11px;color:var(--text-muted);font-family:var(--font-mono)}.queue-track-dur{font-size:12px;color:var(--text-muted);font-family:var(--font-mono);flex-shrink:0}.queue-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--text-muted);padding:40px}.queue-empty .empty-icon{font-size:48px}.queue-empty p{font-size:14px;text-align:center}.queue-hint{font-size:12px;color:var(--text-muted);font-family:var(--font-mono)}.bottom-nav{position:relative;z-index:10;display:flex;border-top:1px solid var(--border);background:#0a0a0fe6;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding-bottom:env(safe-area-inset-bottom,8px);flex-shrink:0}.nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:10px 0;color:var(--text-muted);font-size:11px;font-weight:500;transition:color .2s;cursor:pointer}.nav-btn .nav-icon{font-size:16px;line-height:1}.nav-btn.active{color:var(--accent)}.nav-btn:hover{color:var(--text-dim)}