.bs-audio-controls {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(100%, 1100px);
  margin: 16px auto 20px;
  padding: 16px 20px;
  border: 1px solid rgba(180, 153, 91, .32);
  border-radius: 16px;
  background: #1b1a17;
  color: #fff;
  font-family: Inter, sans-serif;
}
.bs-audio-controls__volume {
  display: grid;
  gap: 8px;
  width: min(100%, 320px);
  color: #c8c2b7;
  font-size: .82rem;
  font-weight: 600;
}
.bs-audio-controls__volume span { display: flex; justify-content: space-between; gap: 12px; }
.bs-audio-controls__volume output { color: #d2b36a; }
.bs-audio-controls input[type="range"] { width: 100%; margin: 0; accent-color: #b99b56; touch-action: manipulation; }
.bs-audio-controls button {
  min-height: 40px;
  padding: 7px 14px;
  border: 1px solid rgba(185, 155, 86, .45);
  border-radius: 9px;
  background: rgba(185, 155, 86, .12);
  color: #fff;
  font: 600 .78rem Inter, sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}
.bs-audio-controls button:hover,
.bs-audio-controls button:focus-visible { border-color: #d2b36a; background: rgba(185, 155, 86, .24); }
.bs-audio-controls input:focus-visible { outline: 2px solid #c2ab72; outline-offset: 3px; }
@media (max-width: 620px) {
  .bs-audio-controls { align-items: stretch; flex-direction: column; gap: 16px; }
  .bs-audio-controls__volume { width: 100%; }
  .bs-audio-controls button { align-self: flex-start; }
}