/* Number and artwork are independent: neither replaces the other. */
.track-name.has-cover{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:12px;align-items:center}
.track-name.has-cover .track-cover{grid-column:1;grid-row:1/3;width:36px;height:36px;border-radius:7px}
.track-name.has-cover b,.track-name.has-cover small{grid-column:2}
.player button svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.player .transport-buttons{gap:6px}
.player .transport button,.player #mute{position:relative;display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border:0;border-radius:50%;background:transparent;color:var(--muted);transition:background .18s,color .18s,transform .18s}
.player .transport .play{width:48px;height:48px;background:#f1c36f;color:#251b0d}
.player button[aria-pressed=true]{color:var(--accent);background:#efbc6214}
.player #favorite[aria-pressed=true] svg{fill:currentColor}
.player #repeat[data-mode=one]:after{content:'1';position:absolute;right:2px;top:0;font-size:10px;font-weight:700;color:var(--accent);background:var(--bg);border-radius:50%;padding:2px 4px}
.favorites-filter{border:1px solid var(--line);color:var(--muted);background:var(--panel);border-radius:12px;min-height:44px;padding:10px 14px;font-size:13px;white-space:nowrap}
.favorites-filter[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}
.player .volume{gap:6px}
@media(hover:hover){.player button:hover{color:var(--ink);background:var(--panel)}.player .play:hover{background:#ffcf78;color:#251b0d}.favorites-filter:hover{border-color:var(--accent)}}
@media(min-width:601px) and (max-width:1150px){.player{grid-template-columns:minmax(0,1fr) minmax(310px,1.4fr)}}
@media(max-width:600px){
 .player .transport-buttons{gap:2px;justify-content:space-between;max-width:340px;margin-inline:auto}
 .player .transport button{width:44px;height:44px}
 .player .transport .play{width:48px;height:48px}
 .library-tools{flex-wrap:wrap;gap:10px}
 .search-box{flex:1 1 100%}
 .favorites-filter{font-size:12px}
 .track-name.has-cover{grid-template-columns:28px minmax(0,1fr);column-gap:8px}
 .track-name.has-cover .track-cover{width:28px;height:28px}
}
@media(prefers-reduced-motion:reduce){.player button{transition:none}}