:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:#0a0a0f;color:#e4e4e7}.app{display:grid;grid-template-columns:1fr 380px;min-height:100vh;max-width:1200px;margin:0 auto;gap:1px;background:#1a1a24}.main-panel{background:#0f0f18;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 2rem;min-height:100vh;position:sticky;top:0}.now-playing{display:flex;flex-direction:column;align-items:center;gap:1.5rem;width:100%;max-width:400px}.album-art{width:280px;height:280px;border-radius:50%;border:2px solid;display:grid;place-items:center;position:relative;overflow:hidden;background:#12121c}.album-disc{width:220px;height:220px;border-radius:50%;display:grid;place-items:center;animation:spin 8s linear infinite;animation-play-state:paused}@keyframes spin{to{transform:rotate(360deg)}}.album-hole{width:40px;height:40px;border-radius:50%;background:#0f0f18;border:3px solid #2a2a3a}.album-glow{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;filter:blur(40px);opacity:.5;pointer-events:none}.track-info{text-align:center}.track-title{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:#f4f4f5}.track-artist{font-size:.9rem;color:#71717a;margin-top:.25rem}.visualizer-container{width:100%;height:80px;border-radius:12px;overflow:hidden;background:#ffffff05}.progress-section{display:flex;align-items:center;gap:.75rem;width:100%}.time-label{font-size:.75rem;font-variant-numeric:tabular-nums;color:#71717a;min-width:36px;text-align:center}.progress-bar-wrapper{flex:1}.progress-bar,.volume-bar{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;border-radius:4px;background:linear-gradient(to right,var(--accent, #6366f1) 0%,var(--accent, #6366f1) var(--progress, 0%),#27272a var(--progress, 0%),#27272a 100%);outline:none;cursor:pointer}.progress-bar::-webkit-slider-thumb,.volume-bar::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 6px #00000080;cursor:pointer;transition:transform .15s}.progress-bar::-webkit-slider-thumb:hover,.volume-bar::-webkit-slider-thumb:hover{transform:scale(1.3)}.progress-bar::-moz-range-thumb,.volume-bar::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:none;box-shadow:0 0 6px #00000080;cursor:pointer}.controls{display:flex;align-items:center;gap:1.5rem}.ctrl-btn{background:none;border:none;color:#a1a1aa;cursor:pointer;padding:.5rem;border-radius:50%;display:grid;place-items:center;transition:all .15s}.ctrl-btn:hover{color:#fff;background:#ffffff14}.play-btn{width:56px;height:56px;border-radius:50%;border:none;background:#fff;color:#0a0a0f;cursor:pointer;display:grid;place-items:center;transition:transform .15s,box-shadow .15s}.play-btn:hover{transform:scale(1.08);box-shadow:0 0 24px #ffffff26}.volume-section{display:flex;align-items:center;gap:.5rem;width:100%;max-width:220px}.volume-icon{color:#71717a;flex-shrink:0}.volume-bar{height:3px}.playlist-panel{background:#111119;padding:2rem 1.25rem;overflow-y:auto;max-height:100vh;position:sticky;top:0}.playlist-heading{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:#52525b;margin-bottom:1rem;padding-left:.5rem}.playlist-tracks{display:flex;flex-direction:column;gap:2px}.playlist-item{display:flex;align-items:center;gap:.75rem;padding:.6rem .5rem;border:1px solid transparent;border-radius:10px;background:transparent;cursor:pointer;transition:all .15s;text-align:left;width:100%;color:inherit;font-family:inherit}.playlist-item:hover{background:#ffffff0a}.playlist-item.active{background:#ffffff08}.playlist-item-art{width:40px;height:40px;border-radius:8px;display:grid;place-items:center;flex-shrink:0}.track-number{font-size:.8rem;font-weight:600;color:#71717a}.playing-indicator{display:flex;align-items:flex-end;gap:2px;height:18px}.playing-indicator span{width:3px;border-radius:2px;animation:eq .8s ease-in-out infinite alternate}.playing-indicator span:nth-child(1){height:8px;animation-delay:0s}.playing-indicator span:nth-child(2){height:14px;animation-delay:.2s}.playing-indicator span:nth-child(3){height:10px;animation-delay:.4s}@keyframes eq{0%{height:4px}to{height:18px}}.playlist-item-info{flex:1;min-width:0;display:flex;flex-direction:column}.playlist-item-title{font-size:.875rem;font-weight:500;color:#e4e4e7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlist-item-artist{font-size:.75rem;color:#52525b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlist-item-duration{font-size:.75rem;color:#52525b;font-variant-numeric:tabular-nums;flex-shrink:0}@media(max-width:768px){.app{grid-template-columns:1fr;grid-template-rows:1fr auto}.main-panel{min-height:auto;padding:2rem 1.5rem;position:static}.album-art{width:200px;height:200px}.album-disc{width:160px;height:160px}.playlist-panel{max-height:50vh;position:static}}