:root{--color-bg-primary: #0f172a;--color-bg-secondary: #1e293b;--color-bg-tertiary: #334155;--color-text-primary: #f8fafc;--color-text-secondary: #94a3b8;--color-text-muted: #64748b;--color-accent: #14b8a6;--color-accent-hover: #0d9488;--color-accent-light: rgba(20, 184, 166, .2);--color-danger: #ef4444;--color-warning: #f59e0b;--color-glass: rgba(30, 41, 59, .85);--color-glass-border: rgba(148, 163, 184, .15);--color-glass-shadow: rgba(0, 0, 0, .3);--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-full: 9999px;--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .35s cubic-bezier(.4, 0, .2, 1);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);--shadow-glow: 0 0 20px rgba(20, 184, 166, .3);--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}.theme-light{--color-bg-primary: #f8fafc;--color-bg-secondary: #e2e8f0;--color-bg-tertiary: #cbd5e1;--color-text-primary: #0f172a;--color-text-secondary: #475569;--color-text-muted: #64748b;--color-accent: #0d9488;--color-accent-hover: #0f766e;--color-glass: rgba(248, 250, 252, .9);--color-glass-border: rgba(15, 23, 42, .1);--color-glass-shadow: rgba(0, 0, 0, .1)}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px}body{font-family:var(--font-family);background:var(--color-bg-primary);color:var(--color-text-primary);min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-md);transition:background-color var(--transition-normal)}.player-wrapper{width:100%;max-width:1200px;display:flex;gap:var(--spacing-md);justify-content:center;align-items:flex-start}#player-container{position:relative;width:100%;max-width:900px;aspect-ratio:16 / 9;background:#000;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg),var(--shadow-glow);transition:box-shadow var(--transition-normal);margin:0 auto}#player-container:hover{box-shadow:var(--shadow-lg),0 0 30px #14b8a666}#player-container.audio-mode{aspect-ratio:unset;min-height:300px;background:linear-gradient(135deg,var(--color-bg-secondary),var(--color-bg-primary))}.video-container{position:relative;width:100%;height:100%}.video-container video{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;background:#000}.video-container video:not([src]),.video-container video[src=""]{display:none}video::-webkit-media-controls{display:none!important}video::-webkit-media-controls-enclosure{display:none!important}.audio-container{display:none;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;padding:var(--spacing-xl)}.audio-container.active{display:flex}.album-art-container{width:200px;height:200px;border-radius:var(--radius-lg);overflow:hidden;background:var(--color-bg-tertiary);box-shadow:var(--shadow-lg);margin-bottom:var(--spacing-lg);display:flex;align-items:center;justify-content:center}.album-art{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.album-art-placeholder{font-size:4rem;color:var(--color-text-muted)}.track-info{text-align:center;margin-bottom:var(--spacing-lg)}.track-title{font-size:1.5rem;font-weight:600;color:var(--color-text-primary);margin-bottom:var(--spacing-xs)}.track-artist{font-size:1rem;color:var(--color-text-secondary)}.visualizer-container{width:100%;height:120px;margin-top:var(--spacing-md);border-radius:var(--radius-md);overflow:hidden}.visualizer-canvas{width:100%;height:100%;background:transparent}.controls{position:absolute;bottom:0;left:0;right:0;padding:var(--spacing-md);background:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,.5) 60%,transparent);opacity:1;transition:opacity var(--transition-normal);z-index:10}.controls.hidden{opacity:0;pointer-events:none}.controls.visible,#player-container:hover .controls,#player-container.paused .controls{opacity:1;pointer-events:auto}.controls-inner{background:var(--color-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--color-glass-border);border-radius:var(--radius-lg);padding:var(--spacing-sm) var(--spacing-md);box-shadow:0 4px 30px var(--color-glass-shadow)}.progress-container{position:relative;width:100%;margin-bottom:var(--spacing-sm);cursor:pointer;padding:var(--spacing-xs) 0}.progress-bar{position:relative;height:4px;background:#fff3;border-radius:var(--radius-full);overflow:visible;transition:height var(--transition-fast)}.progress-container:hover .progress-bar{height:6px}.progress-buffer{position:absolute;top:0;left:0;height:100%;background:#ffffff4d;border-radius:var(--radius-full);pointer-events:none}.progress-fill{position:absolute;top:0;left:0;height:100%;background:var(--color-accent);border-radius:var(--radius-full);pointer-events:none;box-shadow:0 0 10px var(--color-accent);transition:width .1s linear}.progress-handle{position:absolute;top:50%;right:0;width:14px;height:14px;background:var(--color-accent);border-radius:50%;transform:translate(50%,-50%) scale(0);transition:transform var(--transition-fast);box-shadow:0 0 10px var(--color-accent)}.progress-container:hover .progress-handle{transform:translate(50%,-50%) scale(1)}.progress-tooltip{position:absolute;bottom:100%;left:0;transform:translate(-50%);background:var(--color-glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--color-text-primary);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);font-size:.75rem;font-weight:500;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--transition-fast);margin-bottom:var(--spacing-xs)}.progress-container:hover .progress-tooltip{opacity:1}.controls-row{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-sm)}.controls-left,.controls-center,.controls-right{display:flex;align-items:center;gap:var(--spacing-xs)}.controls-center{flex:1;justify-content:center}.control-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:transparent;border:none;border-radius:var(--radius-full);color:var(--color-text-primary);cursor:pointer;transition:all var(--transition-fast)}.control-btn:hover{background:#ffffff1a;transform:scale(1.05)}.control-btn:active{transform:scale(.95)}.control-btn.active{color:var(--color-accent)}.control-btn.primary{width:48px;height:48px;background:var(--color-accent);color:#fff}.control-btn.primary:hover{background:var(--color-accent-hover);box-shadow:var(--shadow-glow)}.control-btn .material-icons{font-size:24px}.control-btn.primary .material-icons{font-size:28px}.time-display{font-size:.8rem;color:var(--color-text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap}.volume-control{position:relative;display:flex;align-items:center}.volume-slider-container{position:absolute;bottom:100%;left:50%;transform:translate(-50%);background:var(--color-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--color-glass-border);border-radius:var(--radius-md);padding:var(--spacing-md) var(--spacing-sm);margin-bottom:var(--spacing-sm);opacity:0;visibility:hidden;transition:all var(--transition-fast)}.volume-control:hover .volume-slider-container,.volume-slider-container.visible{opacity:1;visibility:visible}.volume-slider{width:6px;height:100px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff3;border-radius:var(--radius-full);outline:none;writing-mode:bt-lr;-webkit-appearance:slider-vertical;cursor:pointer}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--color-accent);border-radius:50%;cursor:pointer;box-shadow:0 0 10px var(--color-accent)}.speed-selector{position:relative}.speed-btn{font-size:.8rem;font-weight:600;padding:var(--spacing-xs) var(--spacing-sm);min-width:40px}.speed-options{position:absolute;bottom:100%;left:50%;transform:translate(-50%);background:var(--color-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--color-glass-border);border-radius:var(--radius-md);overflow:hidden;margin-bottom:var(--spacing-sm);min-width:80px}.speed-options.hidden{display:none}.speed-options li{padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;font-size:.85rem;display:flex;align-items:center;justify-content:space-between;transition:background var(--transition-fast)}.speed-options li:hover{background:#ffffff1a}.speed-options li.active{background:var(--color-accent-light);color:var(--color-accent)}.speed-options .checkmark{margin-left:var(--spacing-sm)}.sidebar{width:280px;height:100%;max-height:600px;background:var(--color-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--color-glass-border);border-radius:var(--radius-xl);display:flex;flex-direction:column;overflow:hidden;transform:translate(100%);opacity:0;transition:all var(--transition-slow)}.sidebar.open{transform:translate(0);opacity:1}.sidebar-header{padding:var(--spacing-md);border-bottom:1px solid var(--color-glass-border);display:flex;align-items:center;justify-content:space-between}.sidebar-title{font-size:1rem;font-weight:600}.playlist{flex:1;overflow-y:auto;padding:var(--spacing-sm)}.playlist-item{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm);border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast)}.playlist-item:hover{background:#ffffff0d}.playlist-item.active{background:var(--color-accent-light)}.playlist-item-icon{width:36px;height:36px;border-radius:var(--radius-sm);background:var(--color-bg-tertiary);display:flex;align-items:center;justify-content:center;flex-shrink:0}.playlist-item-info{flex:1;min-width:0}.playlist-item-title{font-size:.85rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlist-item-meta{font-size:.75rem;color:var(--color-text-muted)}.drop-zone{position:absolute;top:0;left:0;right:0;bottom:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0f172af2;color:var(--color-text-secondary);transition:all var(--transition-fast);z-index:5}.drop-zone.hidden{display:none}.drop-zone.drag-over{border:3px dashed var(--color-accent);background:#14b8a61a}.drop-zone-icon{font-size:4rem;margin-bottom:var(--spacing-lg);color:var(--color-accent)}.drop-zone-text{font-size:1rem;margin-bottom:var(--spacing-sm)}.drop-zone-hint{font-size:.85rem;color:var(--color-text-muted)}.file-buttons{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.file-btn{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);background:var(--color-accent);color:#fff;border:none;border-radius:var(--radius-md);font-size:.85rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.file-btn:hover{background:var(--color-accent-hover);box-shadow:var(--shadow-glow)}.file-btn .material-icons{font-size:18px}.theme-toggle{position:fixed;top:var(--spacing-md);right:var(--spacing-md)}.error-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000e6;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100}.error-overlay.hidden{display:none}.error-icon{font-size:3rem;color:var(--color-danger);margin-bottom:var(--spacing-md)}.error-message{color:var(--color-text-primary);text-align:center;max-width:80%}::cue{background:#000c;color:#fff;font-family:var(--font-family);font-size:1rem;padding:.25em .5em;border-radius:4px}@media (max-width: 768px){.player-wrapper{flex-direction:column}#player-container{max-width:100%}.sidebar{width:100%;max-height:300px}.controls-inner{padding:var(--spacing-xs) var(--spacing-sm)}.control-btn{width:36px;height:36px}.control-btn .material-icons{font-size:20px}.control-btn.primary{width:44px;height:44px}.time-display{font-size:.7rem}}@media (max-width: 480px){.controls-left .control-btn:not(.primary),.controls-right .control-btn:not([id=fullscreen]):not([id=volume-btn]){display:none}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-bg-tertiary);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.animate-fadeIn{animation:fadeIn var(--transition-normal) forwards}