*{border-radius:0;box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:#1a1a2e;--bg-secondary:#16213e;--bg-tertiary:#0f0f1a;--bg-hover:#252547;--text-primary:#eee;--text-secondary:#888;--text-muted:#666;--accent-primary:#e94560;--accent-secondary:#ff6b6b;--accent-tertiary:#4ecca3;--border-color:#333}body{background:var(--bg-primary);color:var(--text-primary);font-family:system-ui,-apple-system,sans-serif;min-height:100vh}.app-container{margin:0 auto;max-width:1200px;padding:20px}.player-layout{display:grid;gap:20px;grid-template-columns:280px 1fr}@media(max-width:768px){.player-layout{grid-template-columns:1fr}}.library-section{background:var(--bg-secondary);border-radius:8px;max-height:80vh;overflow-y:auto;padding:15px}.library-section h2{color:var(--accent-tertiary);font-size:16px;margin-bottom:15px}.song-list{display:flex;flex-direction:column;gap:8px}.song-item{background:var(--bg-primary);border-radius:6px;cursor:pointer;padding:12px;transition:background .2s}.song-item:hover{background:var(--bg-hover)}.song-item.active{background:var(--accent-primary)}.song-item .title{font-weight:500;margin-bottom:4px}.song-item .artist{color:var(--text-secondary);font-size:12px}.song-item.active .artist{color:#ffffffb3}.song-list .empty,.song-list .error,.song-list .loading{color:var(--text-secondary);font-size:14px;padding:10px}.song-list .error{color:var(--accent-primary)}.player-section{display:flex;flex-direction:column}.now-playing{align-items:baseline;display:flex;gap:10px;margin-bottom:15px}.now-playing .song-title{font-size:20px;font-weight:600}.now-playing .song-artist{color:var(--text-secondary);font-size:14px}.media-section{background:#000;border-radius:8px;overflow:hidden;position:relative}.media-section audio,.media-section video{display:block;width:100%}.visualization-section{background:var(--bg-tertiary);border-radius:8px;height:200px;margin-top:10px;overflow:hidden;position:relative}.visualization-section canvas{height:100%;width:100%}.transport-controls{background:var(--bg-secondary);border-radius:8px;margin-top:10px;padding:12px 15px}.transport-progress{margin-bottom:12px}.progress-bar{background:var(--bg-primary);border-radius:3px;cursor:pointer;height:6px;overflow:visible;position:relative}.progress-bar:hover{height:8px;margin-bottom:-1px;margin-top:-1px}.progress-buffered{background:#ffffff1a}.progress-buffered,.progress-played{border-radius:3px;height:100%;left:0;pointer-events:none;position:absolute;top:0}.progress-played{background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary))}.progress-handle{background:#fff;border-radius:50%;box-shadow:0 2px 4px #0000004d;height:14px;opacity:0;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);transition:opacity .15s;width:14px}.progress-bar:hover .progress-handle{opacity:1}.transport-buttons{align-items:center;display:flex;justify-content:space-between}.transport-center,.transport-left,.transport-right{align-items:center;display:flex;gap:8px}.transport-btn{align-items:center;background:transparent;border:none;border-radius:6px;color:var(--text-primary);cursor:pointer;display:flex;justify-content:center;padding:8px;transition:background .15s,color .15s}.transport-btn:hover{background:#ffffff1a}.transport-btn:active{background:#ffffff26}.transport-btn.active{color:var(--accent-primary)}.transport-btn svg{fill:currentColor;height:22px;width:22px}.transport-btn .icon-pause,.transport-btn.playing .icon-play{display:none}.transport-btn.playing .icon-pause{display:block}.transport-btn .icon-muted,.transport-btn.muted .icon-volume{display:none}.transport-btn.muted .icon-muted{display:block}.time-display{color:#aaa;font-size:13px;font-variant-numeric:tabular-nums;min-width:100px;text-align:center}.time-separator{color:var(--text-muted);margin:0 4px}.volume-slider-container{align-items:center;display:flex;width:80px}.volume-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--bg-primary);border-radius:2px;cursor:pointer;height:4px;outline:none;width:100%}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#fff;border-radius:50%;cursor:pointer;height:12px;width:12px}.volume-slider::-moz-range-thumb{background:#fff;border:none;border-radius:50%;cursor:pointer;height:12px;width:12px}.info-layer{background:var(--bg-secondary);border-radius:8px;margin-top:10px;min-height:60px;padding:15px}.info-layer .info-item{border-bottom:1px solid var(--bg-primary);padding:8px 0}.info-layer .info-item:last-child{border-bottom:none}.extra-controls{align-items:center;display:flex;gap:15px;margin-top:15px}.btn{border:none;border-radius:5px;cursor:pointer;font-size:14px;padding:10px 20px;transition:background .2s}.btn-primary{background:var(--accent-primary);color:#fff}.btn-primary:hover{background:var(--accent-secondary)}.btn-secondary{background:var(--bg-secondary);color:var(--text-primary)}.btn-secondary:hover{background:var(--bg-hover)}.track-panel{background:var(--bg-secondary);border-radius:8px;margin-top:15px;overflow:hidden}.track-panel-header{align-items:center;background:var(--bg-primary);cursor:pointer;display:flex;justify-content:space-between;padding:10px 15px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.track-panel-header:hover{background:#224}.track-panel-title{font-size:14px;font-weight:600}.track-panel-toggle{transition:transform .2s}.track-panel.collapsed .track-panel-toggle{transform:rotate(-90deg)}.track-panel.collapsed .track-panel-content{display:none}.track-panel-content{padding:15px}.palette-selector{align-items:center;display:flex;flex-wrap:wrap;gap:15px;margin-bottom:15px}.palette-selector label{color:#aaa;font-size:13px}.palette-selector select{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary);font-size:13px;padding:5px 10px}.checkbox-label{align-items:center;cursor:pointer;display:flex;gap:5px}.track-list{display:flex;flex-direction:column;gap:8px;max-height:200px;overflow-y:auto}.no-tracks{color:var(--text-muted);font-size:13px;padding:20px;text-align:center}.track-item{align-items:center;background:var(--bg-primary);border-radius:6px;display:flex;gap:10px;padding:8px 10px}.track-color-picker{border:none;border-radius:4px;cursor:pointer;height:28px;padding:0;width:28px}.track-info{flex:1;min-width:0}.track-name{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-meta{color:var(--text-secondary);font-size:11px}.track-reset{background:none;border:none;border-radius:4px;color:var(--text-muted);cursor:pointer;font-size:11px;padding:4px 8px}.track-reset:hover{background:var(--border-color);color:#aaa}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#444}#active-notes{color:var(--accent-tertiary);font-size:14px}