.playback-control {
  display: grid;
  grid-template-columns: minmax(145px, .75fr) minmax(185px, 1fr) minmax(330px, 1.7fr);
  align-items: center;
  gap: 14px;
  margin: 16px 0 22px;
  padding: 13px 15px;
  border: 1px solid #586783;
  border-radius: 14px;
  background: linear-gradient(135deg,#111b2c,#1b2941);
  box-shadow: inset 0 1px #ffffff0d,0 10px 24px #03071233;
}

.playback-track { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.playback-track label { white-space: nowrap; }
.playback-track select {
  appearance: none;
  min-height: 36px;
  border: 1px solid #5a6982;
  border-radius: 9px;
  background: #202f48;
  color: var(--cream);
  padding: 7px 30px 7px 10px;
  cursor: pointer;
  font-size: 13px;
}
.playback-main,.playback-settings { display: flex; align-items: center; gap: 7px; }
.playback-main button,.playback-settings select {
  appearance: none;
  min-height: 36px;
  border: 1px solid #62718c;
  border-radius: 9px;
  background: #202f48;
  color: var(--cream);
  padding: 7px 10px;
  cursor: pointer;
}
.playback-main button:disabled { opacity: .35; cursor: not-allowed; }
.playback-main .playback-primary { border-color: #d3aa56; background: #59431e; color: #fff1bd; font-weight: 800; }
.playback-settings { justify-content: flex-end; color: var(--muted); font-size: 11px; }
.playback-settings label { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.playback-settings select { min-height: 32px; padding: 5px 8px; }
.playback-check input { accent-color: #d4af57; }
.keyboard-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 13px;
  margin: -12px 0 18px;
  color: #93a0b8;
  font-size: 11px;
}
.keyboard-hints span { white-space: nowrap; }
.keyboard-hints kbd {
  display: inline-block;
  min-width: 25px;
  padding: 2px 6px;
  border: 1px solid #5d6b84;
  border-bottom-width: 2px;
  border-radius: 5px;
  background: #142036;
  color: #f0dfad;
  font: inherit;
  font-weight: 800;
  text-align: center;
}
button:focus-visible,select:focus-visible,input:focus-visible,[tabindex]:focus-visible {
  outline: 3px solid #f2c96d;
  outline-offset: 3px;
}

@media(max-width:980px){
  .playback-control { grid-template-columns: 1fr; }
  .playback-settings { justify-content: flex-start; flex-wrap: wrap; }
}
@media(max-width:560px){
  .playback-main { display: grid; grid-template-columns: 1fr 1fr; }
  .playback-main button { width: 100%; }
}