/* ── Track List ── */
.track{display:flex;align-items:center;gap:12px;padding:10px 8px;border-bottom:1px solid var(--border);cursor:pointer;transition:background 100ms ease-out}
.track:hover{background:var(--bg-hover)}
.track.active{background:var(--bg-elevated)}
.track-num{color:var(--text-disabled);font-size:12px;font-family:var(--font-mono);width:28px;text-align:right;flex-shrink:0}
.track-play{width:32px;height:32px;border:1px solid var(--text-tertiary);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:11px;flex-shrink:0;transition:all 100ms;background:none}
.track:hover .track-play{border-color:var(--text-secondary);color:var(--text-primary)}
.track.active .track-play{border-color:var(--text-primary);color:var(--text-primary)}
.track-info{flex:1;min-width:0}
.track-title{color:var(--text-primary);font-size:14px;font-weight:500;letter-spacing:0.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-artist{color:var(--text-tertiary);font-size:12px;margin-top:2px}
.track-duration{color:var(--text-disabled);font-size:12px;font-family:var(--font-mono);flex-shrink:0;width:48px;text-align:right}
.track-wave{flex:0 0 120px;height:28px;position:relative;overflow:hidden}
.track-wave canvas{width:100%;height:100%;display:block}

/* ── Bottom Player ── */
.player{position:fixed;bottom:0;left:0;right:0;background:var(--bg-panel);border-top:1px solid var(--border);z-index:100;transition:transform 150ms ease-out}
.player.hidden{transform:translateY(100%)}
.player-inner{max-width:880px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:10px 24px}
.player-controls{display:flex;align-items:center;gap:6px;flex-shrink:0}
.p-btn{background:none;border:1px solid var(--text-tertiary);color:var(--text-secondary);font-size:10px;width:28px;height:28px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 100ms;font-family:var(--font-sans);padding:0}
.p-btn:hover{border-color:var(--text-primary);color:var(--text-primary)}
.play-btn{width:36px;height:36px;font-size:12px}
.player-info{flex:1;min-width:0}
.player-track-name{color:var(--text-primary);font-size:13px;font-weight:500;letter-spacing:0.02em;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-waveform{position:relative;height:32px;cursor:pointer;background:rgba(255,255,255,0.02);border-radius:2px;overflow:hidden}
.player-waveform canvas{width:100%;height:100%;display:block;position:absolute;top:0;left:0}
.player-progress{position:absolute;top:0;left:0;height:100%;width:0;background:rgba(255,255,255,0.08);pointer-events:none;transition:none}
.player-times{display:flex;justify-content:space-between;font-size:11px;font-family:var(--font-mono);color:var(--text-disabled);margin-top:3px}
.player-volume{display:flex;align-items:center;gap:6px;flex-shrink:0}
.vol-icon{color:var(--text-tertiary);font-size:14px}
.vol-slider{-webkit-appearance:none;appearance:none;width:60px;height:3px;background:var(--border);outline:none;border-radius:2px;cursor:pointer}
.vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:var(--text-secondary);cursor:pointer}

/* ── Footer spacing for player ── */
body.player-active .footer{margin-bottom:70px}
body.player-active footer{margin-bottom:70px}

/* ── Player on sidebar layout ── */
@media(min-width:769px){
  .player{left:220px}
}

/* ── Responsive ── */
@media(max-width:768px){
  .player-inner{padding:8px 12px;gap:10px}
  .player-volume{display:none}
  .track-wave{display:none}
  .track-num{display:none}
  .player{left:0}
}
@media(max-width:480px){
  .player-controls .p-btn:not(.play-btn){display:none}
}