:root{--bg-primary:#0a0a0a;--bg-secondary:#1a1a1a;--bg-glass:rgba(255, 255, 255, 0.05);--bg-glass-hover:rgba(255, 255, 255, 0.1);--border-glass:rgba(255, 255, 255, 0.1);--text-primary:#ffffff;--text-secondary:#b3b3b3;--text-muted:#666666;--accent:#00d4ff;--accent-hover:#0099cc;--glass-blur:blur(20px);--border-radius:16px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:inter,-apple-system,BlinkMacSystemFont,sans-serif;background:linear-gradient(135deg,#0a0a0a 0%,#1a1a1a 100%);color:var(--text-primary);overflow:hidden;height:100vh}.app{display:flex;height:100vh;gap:1px;background:var(--bg-primary)}.sidebar{width:350px;background:rgba(255,255,255,2%);backdrop-filter:var(--glass-blur);border-right:1px solid var(--border-glass);padding:24px;display:flex;flex-direction:column;gap:24px;overflow:hidden}.logo{display:flex;align-items:center;gap:12px;font-size:1.5rem;font-weight:700;color:var(--text-primary)}.logo i{color:var(--accent);font-size:2rem}.upload-btn{background:linear-gradient(135deg,var(--accent),var(--accent-hover));color:var(--bg-primary);border:none;padding:16px 24px;border-radius:var(--border-radius);font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:12px}.upload-btn:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,212,255,.3)}.library{flex:1;display:flex;flex-direction:column;gap:16px}.library-header{display:flex;justify-content:space-between;align-items:center}.library-header h3{font-size:1.25rem;font-weight:600;color:var(--text-primary)}.playlist-controls{display:flex;gap:8px}.playlist-tabs{display:flex;gap:4px;background:var(--bg-glass);border-radius:12px;padding:4px}.playlist-tab{flex:1;background:0 0;border:none;color:var(--text-secondary);padding:8px 16px;border-radius:8px;cursor:pointer;transition:all .3s ease;font-size:.875rem;font-weight:500}.playlist-tab.active{background:var(--accent);color:var(--bg-primary)}.song-list,.playlist-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px}.song-item,.playlist-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;background:var(--bg-glass);border:1px solid var(--border-glass);cursor:pointer;transition:all .3s ease}.song-item:hover,.playlist-item:hover{background:var(--bg-glass-hover);transform:translateX(4px)}.song-item.active{background:rgba(0,212,255,.1);border-color:var(--accent)}.song-info,.playlist-item h4{flex:1;font-size:.875rem;font-weight:500}.song-info h4{color:var(--text-primary);margin-bottom:4px}.song-info p{color:var(--text-secondary);font-size:.75rem}.main-content{flex:1;display:flex;flex-direction:column;padding:48px;gap:22px;overflow:hidden}.current-track{display:flex;align-items:center;gap:24px;padding:24px;background:var(--bg-glass);border:1px solid var(--border-glass);border-radius:var(--border-radius);backdrop-filter:var(--glass-blur)}.album-art{width:120px;height:120px;background:linear-gradient(135deg,var(--bg-glass),var(--bg-glass-hover));border:1px solid var(--border-glass);border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:3rem;color:var(--text-secondary);overflow:hidden;position:relative;transition:all .3s ease}.album-art:hover{transform:scale(1.05);box-shadow:0 8px 32px rgba(0,212,255,.2)}.album-art img{width:100%;height:100%;object-fit:cover;border-radius:20px;transition:all .3s ease}.track-info h2{font-size:1.75rem;font-weight:700;margin-bottom:8px;color:var(--text-primary)}.track-info p{font-size:1.125rem;color:var(--text-secondary)}#visualizer{width:100%;height:100%;display:block}#renderCanvas{height:50%}.player-controls{display:flex;align-items:center;gap:16px;padding:16px;background:var(--bg-glass);border:1px solid var(--border-glass);border-radius:var(--border-radius);backdrop-filter:var(--glass-blur)}.time-display{font-size:.875rem;color:var(--text-secondary);font-weight:500;min-width:45px}.progress-container{flex:1;position:relative}.progress-bar{width:100%;height:4px;background:rgba(255,255,255,.1);border-radius:2px;position:relative;overflow:hidden}.progress{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-hover));border-radius:2px;transition:width .1s ease}.progress-input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.control-buttons{display:flex;justify-content:center;align-items:center;gap:16px}.control-btn{background:var(--bg-glass);border:1px solid var(--border-glass);color:var(--text-secondary);width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;font-size:1.25rem}.control-btn:hover{background:var(--bg-glass-hover);color:var(--text-primary);transform:scale(1.1)}.play-pause{width:64px;height:64px;background:linear-gradient(135deg,var(--accent),var(--accent-hover));color:var(--bg-primary);font-size:1.5rem}.play-pause:hover{transform:scale(1.1);box-shadow:0 8px 32px rgba(0,212,255,.3)}.volume-container{display:flex;align-items:center;gap:12px;padding:16px;background:var(--bg-glass);border:1px solid var(--border-glass);border-radius:var(--border-radius);backdrop-filter:var(--glass-blur)}.volume-slider{width:120px;height:4px;background:rgba(255,255,255,.1);border-radius:2px;outline:none;-webkit-appearance:none}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--accent);border-radius:50%;cursor:pointer}.playlist-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);backdrop-filter:var(--glass-blur);display:flex;align-items:center;justify-content:center;z-index:1000}.playlist-form{background:var(--bg-glass);border:1px solid var(--border-glass);border-radius:var(--border-radius);padding:48px;backdrop-filter:var(--glass-blur);display:flex;flex-direction:column;gap:24px;min-width:400px}.playlist-form h3{font-size:1.5rem;font-weight:600;color:var(--text-primary)}.playlist-form input{background:rgba(255,255,255,5%);border:1px solid var(--border-glass);border-radius:8px;padding:12px 16px;color:var(--text-primary);font-size:1rem}.playlist-form-actions{display:flex;gap:12px}.playlist-form-actions button{flex:1;padding:12px 24px;border-radius:8px;border:none;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.playlist-form-actions .cancel{background:0 0;color:var(--text-secondary);border:1px solid var(--border-glass)}.playlist-form-actions .save{background:var(--accent);color:var(--bg-primary)}.playlist-form-actions button:hover{transform:translateY(-2px)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-glass)}::-webkit-scrollbar-thumb{background:var(--accent);border-radius:3px}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}.album-art.playing{animation:pulse 2s infinite}@media(max-width:768px){.app{flex-direction:column}.sidebar{width:100%;height:200px}.main-content{padding:24px}}