.private-native-player {
  --native-player-surface: linear-gradient(145deg, rgba(4, 48, 39, .96), rgba(3, 33, 27, .96));
  --native-player-line: rgba(104, 216, 180, .28);
  --native-player-text: #effff9;
  --native-player-muted: #a9cfc1;
  --native-player-track: #123d31;
  --native-player-fill: #52d9ad;
  --native-player-button-surface: linear-gradient(135deg, rgba(82, 217, 173, .18), rgba(82, 217, 173, .09));
  --native-player-button-line: rgba(104, 216, 180, .38);
  --native-player-button-text: #e8fff7;
  --native-player-focus-ring: rgba(82, 217, 173, .42);
  --native-player-shadow: 0 14px 34px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 255, 255, .04);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 14px;
  align-items: center;
  margin-top: 10px;
  padding: 13px;
  border: 1px solid var(--native-player-line);
  border-radius: 16px;
  background: var(--native-player-surface);
  box-shadow: var(--native-player-shadow);
  color: var(--native-player-text);
}

.private-native-player strong,
.private-native-player small { grid-column: 1 / -1; }
.private-native-player strong { color: var(--native-player-text); line-height: 1.35; }
.private-native-player small { color: var(--native-player-muted); }
.private-native-player progress {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--native-player-track);
  accent-color: var(--native-player-fill);
}
.private-native-player progress::-webkit-progress-bar { background: var(--native-player-track); }
.private-native-player progress::-webkit-progress-value { border-radius: inherit; background: var(--native-player-fill); }
.private-native-player progress::-moz-progress-bar { border-radius: inherit; background: var(--native-player-fill); }
.private-native-player .private-copy {
  min-width: 104px;
  min-height: 44px;
  border-color: var(--native-player-button-line);
  background: var(--native-player-button-surface);
  color: var(--native-player-button-text);
  box-shadow: 0 7px 18px rgba(0, 0, 0, .12);
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.private-native-player .private-copy:active { transform: translateY(1px) scale(.985); }
.private-native-player .private-copy:focus-visible {
  outline: 3px solid var(--native-player-focus-ring);
  outline-offset: 3px;
}
.private-native-player .private-copy:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }

html[data-theme="light"] .private-native-player {
  --native-player-surface: linear-gradient(145deg, #f8fffc, #e9f8f1);
  --native-player-line: rgba(8, 123, 89, .26);
  --native-player-text: #08372b;
  --native-player-muted: #496d61;
  --native-player-track: #cce9de;
  --native-player-fill: #087b59;
  --native-player-button-surface: linear-gradient(135deg, #0b8b64, #087251);
  --native-player-button-line: rgba(5, 93, 67, .34);
  --native-player-button-text: #ffffff;
  --native-player-focus-ring: rgba(8, 123, 89, .34);
  --native-player-shadow: 0 14px 34px rgba(7, 88, 70, .13), inset 0 1px #ffffff;
}

html[data-theme="dark"] .private-native-player {
  --native-player-surface: linear-gradient(145deg, rgba(4, 48, 39, .96), rgba(3, 33, 27, .96));
  --native-player-line: rgba(104, 216, 180, .28);
  --native-player-text: #effff9;
  --native-player-muted: #a9cfc1;
  --native-player-track: #123d31;
  --native-player-fill: #52d9ad;
  --native-player-button-surface: linear-gradient(135deg, rgba(82, 217, 173, .18), rgba(82, 217, 173, .09));
  --native-player-button-line: rgba(104, 216, 180, .38);
  --native-player-button-text: #e8fff7;
  --native-player-focus-ring: rgba(82, 217, 173, .42);
}

@media (hover: hover) {
  .private-native-player .private-copy:not(:disabled):hover {
    filter: brightness(1.08);
    box-shadow: 0 9px 22px rgba(7, 88, 70, .2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .private-native-player .private-copy { transition: none; }
}

.private-playback-unavailable {
  margin: 10px 0 0;
  padding: 11px 13px;
  border: 1px solid rgba(215, 173, 85, .24);
  border-radius: 14px;
  background: rgba(215, 173, 85, .07);
  color: var(--private-muted, var(--muted));
  font-size: 12px;
  line-height: 1.45;
}