/* assets/style.css */
:root{
  --bg:#0f1115; --card:#151922; --text:#e8e8e8; --muted:#a7b0c0; --acc:#6ee7b7;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,Segoe UI,Roboto,Arial}
.wrap{max-width:820px;margin:auto;padding:24px}
h1{margin:0 0 6px 0}
.muted{color:var(--muted)}
.small{font-size:13px}
.player-card{background:var(--card);padding:20px;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.35);margin-top:16px}
.now{margin-bottom:12px}
.now-label{font-size:12px;color:var(--muted);letter-spacing:.3px;text-transform:uppercase}
.now-title{font-size:20px;font-weight:600;margin-top:2px}
.controls{display:flex;gap:10px;align-items:center;margin:12px 0}
.controls button{
  background:#1c2230;border:0;color:var(--text);padding:10px 14px;border-radius:12px;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)
}
.controls button:hover{transform:translateY(-1px)}
.controls button.active{outline:2px solid var(--acc)}
.progress{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin:10px 0}
#seek{width:100%}
.volume{display:flex;align-items:center;gap:10px}
.queue{margin-top:12px}
.queue ol{margin:10px 0 0 20px}
.queue li{cursor:pointer;margin:2px 0}
.queue li.current{color:var(--acc);font-weight:600}
code{background:#11161f;padding:2px 6px;border-radius:6px}