:root{--bg: #0f1115;--panel: #191c23;--fg: #e8eaed;--muted: #9aa0ac;--accent: #6ea8fe;--ok: #3ecf8e;--err: #ff6b6b;--warn: #ffcc66}*{box-sizing:border-box}body{margin:0;font:16px/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--fg);padding:max(env(safe-area-inset-top),24px) 20px 40px;max-width:720px;margin-inline:auto}header h1{margin:0;letter-spacing:-.5px}.tagline{color:var(--muted);margin:4px 0 24px}.add-bar{display:flex;gap:8px}.add-bar input{flex:1;padding:12px 14px;border-radius:10px;border:1px solid #2a2e37;background:var(--panel);color:var(--fg);font-size:16px}.add-bar button{padding:12px 18px;border:0;border-radius:10px;font-weight:600;background:var(--accent);color:#04122b;cursor:pointer}.add-bar button:disabled{opacity:.5;cursor:default}.status{margin:18px 0;color:var(--muted)}.status.ok{color:var(--ok)}.status.error{color:var(--err)}.banner{margin:12px 0;padding:12px 14px;border-radius:10px;background:#ffcc661f;border:1px solid var(--warn);color:var(--warn);font-size:14px}.player{margin-top:20px;padding:18px;border-radius:14px;background:var(--panel);border:1px solid #2a2e37}.now-title{font-weight:600;margin-bottom:12px}.player audio{width:100%}.progress{margin-top:10px;color:var(--muted);font-variant-numeric:tabular-nums}