.vom-listen-player {
  box-sizing: border-box; width: 100%; margin: 0 0 22px; padding: 16px;
  border: 1px solid #d9e0e7; border-radius: 10px; background: #f7f9fb;
  color: #202833; font-family: inherit; line-height: 1.4;
}
.vom-listen-player * { box-sizing: border-box; }
.vom-listen-heading { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.vom-listen-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; background: #b51f2a;
  color: #fff; font-size: 14px; flex: 0 0 38px;
}
.vom-listen-title-wrap { display: flex; flex-direction: column; gap: 2px; }
.vom-listen-title { font-size: 16px; font-weight: 700; }
.vom-listen-subtitle { color: #596575; font-size: 13px; }
.vom-listen-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vom-listen-btn {
  appearance: none; border: 1px solid #cbd3dc; border-radius: 6px; background: #fff;
  color: #202833; padding: 8px 13px; min-height: 36px; font: inherit; font-size: 14px; cursor: pointer;
}
.vom-listen-btn.vom-listen-play { background: #b51f2a; border-color: #b51f2a; color: #fff; }
.vom-listen-btn:disabled { opacity: .48; cursor: not-allowed; }
.vom-listen-speed-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin-left: auto; }
.vom-listen-speed { border: 1px solid #cbd3dc; border-radius: 6px; background: #fff; padding: 7px; font: inherit; }
.vom-listen-status { margin-top: 10px; min-height: 18px; color: #596575; font-size: 13px; }
.vom-listen-progress { height: 4px; margin-top: 8px; background: #e0e5eb; border-radius: 4px; overflow: hidden; }
.vom-listen-progress span { display: block; width: 0; height: 100%; background: #b51f2a; transition: width .2s linear; }
@media (max-width: 480px) {
  .vom-listen-player { padding: 13px; }
  .vom-listen-controls { gap: 6px; }
  .vom-listen-btn { padding: 8px 10px; }
  .vom-listen-speed-label { margin-left: 0; width: 100%; margin-top: 3px; }
}