:root{--bg-base:#0e0a1a;--bg-surface:#150f24;--bg-raised:#1e1630;--bg-overlay:#261d3d;--text-primary:#ede9fe;--text-secondary:#9d8ec7;--text-tertiary:#4c3d72;--border:#2d2248;--accent:#8b5cf6;--accent-hover:#7c3aed;--accent-muted:rgba(139,92,246,.15);--success:#34d399;--error:#f87171;--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--radius-full:9999px;--shadow-sm:0 1px 2px rgba(0,0,0,.3);--shadow-md:0 4px 12px rgba(0,0,0,.4);--transition-fast:150ms ease;--transition-base:200ms ease;--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-mono:"SF Mono","Fira Code","Fira Mono","Roboto Mono",monospace;--player-height:72px}*,:after,:before{margin:0;padding:0;box-sizing:border-box}body,html{height:100%;background:var(--bg-base);color:var(--text-primary);font-family:var(--font-sans);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{cursor:pointer;font:inherit}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--radius-full)}.app-shell{display:flex;height:calc(100vh - var(--player-height));height:calc(100dvh - var(--player-height));overflow:hidden}.sidebar{width:240px;min-width:240px;background:var(--bg-surface);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:var(--space-4);gap:var(--space-1)}.sidebar-brand{font-size:.9375rem;font-weight:700;padding:var(--space-2) var(--space-3);margin-bottom:var(--space-4)}.sidebar-section{font-size:.6875rem;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em;padding:var(--space-3) var(--space-3) var(--space-1)}.sidebar-item{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:.8125rem;color:var(--text-secondary);cursor:pointer;border:none;background:transparent;width:100%;text-align:left;transition:all var(--transition-fast)}.sidebar-item.active,.sidebar-item:hover{background:var(--bg-raised);color:var(--text-primary)}.sidebar-spacer{flex:1 1}.new-playlist-btn{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:.8125rem;color:var(--text-tertiary);cursor:pointer;border:1px dashed var(--border);background:transparent;width:100%;text-align:left;transition:all var(--transition-fast)}.new-playlist-btn:hover{border-color:var(--accent);color:var(--accent)}.content{flex:1 1;overflow-y:auto;padding:var(--space-6)}.content-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-6)}.content-title{font-size:1.25rem;font-weight:700}.upload-btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--accent);color:var(--text-primary);border:none;border-radius:var(--radius-md);font-size:.8125rem;font-weight:500;transition:background var(--transition-fast)}.upload-btn:hover{background:var(--accent-hover)}.track-list{display:flex;flex-direction:column}.track-row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast)}.track-row:hover{background:var(--bg-surface)}.track-row.playing{background:var(--accent-muted)}.track-number{width:24px;text-align:center;font-size:.8125rem;color:var(--text-tertiary);font-family:var(--font-mono)}.track-row.playing .track-number,.track-row:hover .track-number{color:var(--accent)}.track-waveform{width:40px;height:24px;border-radius:var(--radius-sm);overflow:hidden;flex-shrink:0}.track-waveform svg{width:100%;height:100%}.track-info{flex:1 1;min-width:0}.track-name{font-size:.875rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-row.playing .track-name{color:var(--accent)}.track-filename{font-size:.75rem;color:var(--text-tertiary)}.track-duration{font-size:.8125rem;color:var(--text-tertiary);font-family:var(--font-mono);flex-shrink:0}.track-delete{opacity:0;background:transparent;border:none;color:var(--text-tertiary);padding:var(--space-1);border-radius:var(--radius-sm);transition:opacity var(--transition-fast)}.track-row:hover .track-delete{opacity:1}.track-delete:hover{color:var(--error)}.player-bar{position:fixed;bottom:0;left:0;right:0;height:var(--player-height);background:var(--bg-surface);border-top:1px solid var(--border);padding:0 var(--space-6);gap:var(--space-6);z-index:50}.player-bar,.player-track-info{display:flex;align-items:center}.player-track-info{gap:var(--space-3);min-width:200px}.player-waveform{width:44px;height:44px;border-radius:var(--radius-md);overflow:hidden;background:var(--bg-raised);flex-shrink:0}.player-waveform svg{width:100%;height:100%}.player-meta{min-width:0}.player-title{font-size:.8125rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-artist{font-size:.75rem;color:var(--text-tertiary)}.player-controls{flex-direction:column;gap:var(--space-2);flex:1 1}.control-btns,.player-controls{display:flex;align-items:center}.control-btns{gap:var(--space-4)}.ctrl-btn{width:32px;height:32px;border-radius:50%;background:transparent;border:none;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;transition:color var(--transition-fast)}.ctrl-btn:hover{color:var(--text-primary)}.play-btn{width:36px;height:36px;border-radius:50%;background:var(--text-primary);color:var(--bg-base);border:none;display:flex;align-items:center;justify-content:center;transition:transform var(--transition-fast)}.play-btn:hover{transform:scale(1.05)}.seek-row{display:flex;align-items:center;gap:var(--space-2);width:100%;max-width:500px}.seek-time{font-size:.6875rem;color:var(--text-tertiary);font-family:var(--font-mono);min-width:35px}.seek-bar{flex:1 1;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--bg-raised);border-radius:var(--radius-full);outline:none;cursor:pointer}.seek-bar::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--text-primary);cursor:pointer}.player-volume{display:flex;align-items:center;gap:var(--space-2);min-width:120px}.volume-bar{width:80px;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--bg-raised);border-radius:var(--radius-full);outline:none;cursor:pointer}.volume-bar::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:var(--text-secondary);cursor:pointer}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);padding:var(--space-16);color:var(--text-tertiary)}.empty-state h3{color:var(--text-primary);font-size:1rem}.empty-state p{font-size:.875rem;text-align:center;max-width:320px}.player-empty{flex:1 1;text-align:center;color:var(--text-tertiary);font-size:.8125rem}@media (max-width:768px){.sidebar{display:none}.content{padding:var(--space-4)}.player-bar{padding:0 var(--space-3);gap:var(--space-3)}.player-track-info{min-width:auto}.player-volume{display:none}}