:root{--bg:#0b1d12;--card:#12301d;--card2:#18402a;--green:#009b3a;--gold:#fed100;--txt:#f2f7f3;--mut:#9db8a6}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font:16px/1.4 system-ui,sans-serif;padding-bottom:110px}
header{position:sticky;top:0;z-index:5;background:var(--bg);padding:12px 16px 8px;border-bottom:3px solid var(--gold)}
h1{margin:0 0 8px;font-size:1.4rem;color:var(--gold)}
h1 span{font-size:.8rem;color:var(--mut);font-weight:400;margin-left:6px}
#search{width:100%;padding:10px 12px;border-radius:10px;border:1px solid #2c5a3d;background:var(--card);color:var(--txt);font-size:1rem}
#filters{display:flex;gap:8px;overflow-x:auto;padding:8px 0 2px}
#filters button{flex:none;border:1px solid #2c5a3d;background:transparent;color:var(--mut);padding:6px 12px;border-radius:99px;cursor:pointer;font-size:.9rem}
#filters button.on{background:var(--green);color:#fff;border-color:var(--green)}
#grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;padding:16px}
.card{position:relative;background:var(--card);border:2px solid transparent;border-radius:14px;padding:14px;cursor:pointer}
.card:hover{background:var(--card2)}
.card.playing{border-color:var(--gold)}
.card .dial{color:var(--gold);font-weight:700;font-size:.85rem}
.card .nm{font-weight:700;font-size:1.05rem;margin:2px 28px 2px 0}
.card .bl{color:var(--mut);font-size:.85rem}
.fav{position:absolute;top:8px;right:8px;background:none;border:0;font-size:1.3rem;color:var(--mut);cursor:pointer;padding:4px}
.fav.on{color:var(--gold)}
.empty{grid-column:1/-1;text-align:center;color:var(--mut);padding:40px 0}
#player{position:fixed;left:0;right:0;bottom:0;background:#071209;border-top:3px solid var(--gold);padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:16px;flex-wrap:wrap;z-index:9}
#player[hidden]{display:none}
.now{flex:1 1 180px;min-width:0}
#npName{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#npSub{color:var(--mut);font-size:.85rem}
#npSub.err{color:#ff8a80}
.ctl button{background:none;border:0;color:var(--txt);font-size:1.5rem;cursor:pointer;padding:6px 10px}
.ctl #play{background:var(--gold);color:#000;border-radius:50%;width:48px;height:48px;font-size:1.3rem;padding:0}
.extra{display:flex;gap:10px;align-items:center}
#sleep{background:var(--card);color:var(--txt);border:1px solid #2c5a3d;border-radius:8px;padding:6px}
#vol{width:90px;accent-color:var(--gold)}
@media(max-width:560px){.extra #vol{display:none}}