:root { --bg:#101214; --panel:#1d2125; --text:#f3f5f7; --dim:#9aa3a9; --accent:#f08a62; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:14px system-ui,-apple-system,"Segoe UI",sans-serif; }
.player { position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:10px; padding:10px 12px;
  padding-top:max(10px, env(safe-area-inset-top)); background:#171b1d; border-bottom:2px solid var(--accent); }
#art { border-radius:6px; background:var(--panel); object-fit:cover; flex:none; }
.info { flex:1; min-width:0; }
#station { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#track { color:var(--dim); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#viz { flex:none; background:#0d0f10; border-radius:4px; }
button { background:none; border:0; color:var(--text); cursor:pointer; font:inherit; }
#play { width:40px; height:40px; border-radius:50%; background:var(--accent); color:#101214; font-size:16px; flex:none; }
#time { color:var(--dim); font-size:11px; font-variant-numeric:tabular-nums; flex:none; }
input[type=range] { width:80px; accent-color:var(--accent); flex:none; }
main { max-width:640px; margin:0 auto; padding:12px; }
#search { width:100%; padding:10px 12px; border-radius:8px; border:1px solid #2b3034; background:var(--panel); color:var(--text); }
h2 { font-size:11px; color:var(--accent); margin:16px 0 4px 6px; letter-spacing:.05em; }
ul { list-style:none; margin:0; padding:0; }
li { display:flex; align-items:center; gap:10px; padding:6px; border-radius:8px; cursor:pointer; }
li:hover, li.current { background:var(--panel); }
li img { width:36px; height:36px; border-radius:6px; object-fit:cover; background:var(--panel); flex:none; }
li .name { flex:1; min-width:0; }
li .title { font-weight:600; }
li .meta { color:var(--dim); font-size:11px; }
li .meta b { color:var(--accent); font-weight:600; }
li .star { font-size:20px; color:var(--dim); padding:4px 8px; }
li .star.on { color:#ffc454; }
.note { color:var(--dim); font-size:11px; margin-top:24px; }
.note a { color:var(--accent); }
#search { font-size:16px; }
@media (max-width:520px) {
  #viz { width:44px; height:20px; }
  input[type=range] { width:60px; }
  body { font-size:12px; -webkit-text-size-adjust:100%; }
  #track { font-size:10px; }
  #time { font-size:10px; }
  #play { width:34px; height:34px; font-size:13px; }
  h2 { font-size:10px; margin-top:12px; }
  li { gap:8px; padding:4px; }
  li img { width:30px; height:30px; }
  li .meta { font-size:10px; }
  li .star { font-size:17px; padding:2px 6px; }
  #search { font-size:16px; padding:7px 10px; }
  #art { width:36px; height:36px; }
  .player { gap:8px; padding-left:10px; padding-right:10px; }
  main { padding:10px 8px; }
}
@media (hover:none) { input[type=range] { display:none; } }