/* Audio player styled to match light theme */
.player{
  background:#fff;
  border:1px solid rgba(0,0,0,0.12);
  padding:16px;
  border-radius:14px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.player-controls{display:flex;align-items:center;gap:10px}

.btn{
  min-height:44px;
  min-width:44px;
  border-radius:999px;
  line-height:1;
  padding:10px 12px;
}

.progress-wrap{flex:1;display:flex;flex-direction:column;min-width:0}
#progress{width:100%;accent-color:var(--accent)}
.time{font-size:12px;color:var(--muted);margin-top:7px;letter-spacing:.08em}

.playlist{list-style:none;padding:0;margin:0;display:flex;gap:8px;flex-wrap:wrap}
.playlist .track{
  padding:8px 11px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.16);
  cursor:pointer;
  background:transparent;
  color:var(--text);
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.playlist .track.track-rehek{background:rgba(0,0,0,0.05)}
.playlist .track:hover{border-color:var(--accent);background:rgba(0,0,0,0.08)}
.playlist .track.active{background:#111;color:#fff;border-color:#111}

@media(max-width:600px){
  .player{padding:12px}
  .player-controls{
    display:grid;
    grid-template-columns:repeat(3,minmax(44px,auto));
    grid-template-areas:
      "prev play next"
      "progress progress progress";
    gap:10px;
    align-items:center;
    justify-content:flex-start;
  }
  #prevTrack{grid-area:prev}
  #playPause{grid-area:play}
  #nextTrack{grid-area:next}
  .progress-wrap{grid-area:progress;width:100%}
  .playlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .playlist .track{text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}