*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #1a1a2e;--card-bg: #16213e;--accent: #e94560;--text: #eee;--subtext: #999}body{font-family:system-ui,sans-serif;background-color:var(--bg);color:var(--text);display:flex;justify-content:center;align-items:center;min-height:100vh}#app{width:100%;max-width:500px;background-color:var(--card-bg);border-radius:16px;padding:24px;margin:16px}.header h1{font-size:1.25rem;font-weight:600;text-align:center;margin-bottom:20px}#drop-zone{border:2px dashed var(--subtext);border-radius:12px;padding:40px 20px;text-align:center;cursor:pointer;transition:border-color .2s,background-color .2s}#drop-zone:hover,#drop-zone.dragover{border-color:var(--accent);background-color:#e9456014}#drop-zone.hidden{display:none}.drop-zone-icon{font-size:2rem;display:block;margin-bottom:8px}#drop-zone p{color:var(--text);font-size:.95rem}.drop-zone-sub{color:var(--subtext)!important;font-size:.85rem!important;margin-top:4px}.loading{display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px 20px}.loading.hidden{display:none}.loading p{color:var(--subtext);font-size:.9rem}.loading-spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,.15);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.player{display:flex;flex-direction:column;align-items:center;gap:16px}.player.hidden{display:none}.file-name{font-size:.9rem;color:var(--subtext);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.waveform-container{width:100%;height:120px;background-color:var(--card-bg);border-radius:8px;overflow:hidden}.waveform-container canvas{width:100%;height:100%;display:block;cursor:pointer}.time-display{font-family:SF Mono,Menlo,Consolas,monospace;font-size:.9rem;color:var(--subtext)}.time-separator{margin:0 6px}.playback-controls{display:flex;align-items:center;gap:16px}.control-btn{border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:opacity .2s,transform .2s;font-family:system-ui,sans-serif}.control-btn:hover{opacity:.85;transform:scale(1.05)}.play-btn{width:48px;height:48px;border-radius:50%;background-color:var(--accent);color:#fff;font-size:1.2rem}.skip-btn{width:40px;height:40px;border-radius:50%;background-color:transparent;color:var(--text);font-size:1.1rem}.speed-controls{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.speed-btn{padding:6px 14px;border-radius:20px;border:1px solid var(--subtext);background-color:transparent;color:var(--text);font-size:.8rem;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s;font-family:system-ui,sans-serif}.speed-btn:hover{border-color:var(--accent)}.speed-btn.active{background-color:var(--accent);border-color:var(--accent);color:#fff}