.player-dock {
  position: fixed;
  z-index: 50;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: minmax(190px,1fr) minmax(330px,1.25fr) minmax(190px,1fr);
  align-items: center;
  gap: 24px;
  min-height: 94px;
  padding: 12px clamp(18px,2.5vw,42px);
  border-top: 1px solid #4e6d56;
  background: #17271ff2;
  box-shadow: 0 -14px 50px #07130db0;
  backdrop-filter: blur(22px);
}
.player-track { display: flex; align-items: center; gap: 12px; min-width: 0; }
.player-track-copy { display: grid; min-width: 0; gap: 2px; }
.player-track-copy strong { overflow: hidden; color: #f4f7ef; font-size: 12px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.player-track-copy > span:last-child { overflow: hidden; color: #a8bca9; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
#player-status { color: #a7dab3; font-size: 9px; font-weight: 800; letter-spacing: .6px; }
.player-dock[data-state="error"] #player-status { color: #ffc39f; }
.player-favorite { flex: none; margin-left: 1px; border: 0; background: transparent; color: #b7c7b9; font-size: 23px; }
.player-favorite.saved { color: #f0be95; }
.player-main { display: grid; justify-items: center; gap: 7px; min-width: 0; }
.player-transport { display: flex; align-items: center; gap: 17px; }
.player-transport button, .player-extra button, .player-extra a { display: inline-grid; place-items: center; min-width: 32px; min-height: 30px; border: 0; background: transparent; color: #e0eddf; font-size: 17px; font-weight: 800; }
.player-transport button:hover, .player-extra button:hover, .player-extra a:hover { color: #b9e8c7; }
.player-transport button:disabled { opacity: .5; cursor: wait; }
.player-transport #player-back,.player-transport #player-forward { min-width: 37px; font-size: 11px; font-variant-numeric: tabular-nums; }
.player-transport .player-toggle { width: 36px; height: 36px; padding-left: 2px; border-radius: 50%; background: #d8f2d2; color: #204332; font-size: 15px; }
.player-transport .player-toggle:hover { background: #fff; color: #204332; }
.player-timeline { display: flex; align-items: center; gap: 9px; width: min(100%,490px); color: #b2c3b4; font-size: 9px; font-variant-numeric: tabular-nums; }
.player-timeline span { min-width: 30px; text-align: center; }
.player-timeline input { flex: 1; min-width: 0; height: 4px; margin: 0; accent-color: #b9e8c7; cursor: pointer; }
.player-extra { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.player-extra #player-speed { min-width: 34px; font-size: 11px; }
.player-extra svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.player-extra #player-mute .volume-slash { display: none; }
.player-extra #player-mute.muted .volume-wave { display: none; }
.player-extra #player-mute.muted .volume-slash { display: block; }
.player-extra #player-volume { width: min(75px,25%); height: 4px; accent-color: #b9e8c7; cursor: pointer; }
.player-extra #player-source { font-size: 18px; }
.player-extra #player-close { font-size: 23px; font-weight: 400; }
#player-audio { display: none; }

@media (max-width: 860px) {
  .player-dock { grid-template-columns: minmax(160px,1fr) minmax(250px,1.2fr) auto; gap: 13px; }
  .player-extra #player-volume { display: none; }
}
@media (max-width: 620px) {
  body.has-player { padding-bottom: 162px; }
  .player-dock { grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "track extra" "main main"; gap: 8px 10px; padding: 10px 14px 12px; }
  .player-track { grid-area: track; }
  .player-track-copy strong { font-size: 11px; }
  .player-favorite { font-size: 20px; }
  .player-main { grid-area: main; gap: 5px; }
  .player-transport { gap: 24px; }
  .player-extra { grid-area: extra; gap: 1px; }
  .player-extra #player-mute, .player-extra #player-volume { display: none; }
  .player-extra #player-speed { min-width: 28px; }
  .player-extra #player-source,.player-extra #player-close { min-width: 26px; }
  .toast { bottom: 170px; }
}