:root { --bg:#0f1115; --card:#1a1d24; --text:#f2f2f5; --muted:#8b90a0; --accent:#1ed760; --bad:#ff5d5d; }
@media (prefers-color-scheme: light) { :root { --bg:#f5f6f8; --card:#fff; --text:#15171c; --muted:#666c7a; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.4 system-ui,sans-serif; }
main { max-width:640px; margin:0 auto; padding:16px; }
h1 { font-size:1.4rem; margin:8px 0 16px; }
.card { background:var(--card); border-radius:12px; padding:14px; margin-bottom:14px; }
input, button { font:inherit; border-radius:8px; border:1px solid #3a3f4d; padding:10px 12px; background:transparent; color:var(--text); }
input { width:100%; }
button { cursor:pointer; background:var(--accent); color:#06210f; border:0; font-weight:600; }
button.ghost { background:transparent; color:var(--text); border:1px solid #3a3f4d; }
button:disabled { opacity:.4; cursor:default; }
.row { display:flex; gap:10px; align-items:center; }
.song { display:flex; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid #2a2e3a; }
.song:last-child { border:0; }
.song img { width:44px; height:44px; border-radius:6px; background:#333; }
.song .t { flex:1; min-width:0; }
.song .t b, .song .t span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.song .t span { color:var(--muted); font-size:.9rem; }
.out { opacity:.45; text-decoration:line-through; }
.msg { color:var(--bad); min-height:1.4em; }
.muted { color:var(--muted); }
.hidden { display:none !important; }