.chapter-audio {
  --audio-glass: color-mix(in srgb, var(--rpanel) 24%, transparent);
  --audio-glass-soft: color-mix(in srgb, var(--rbg) 38%, transparent);
  --audio-line: color-mix(in srgb, #a98cff 36%, var(--rline));
  --audio-purple: #a98cff;
  --audio-gold: color-mix(in srgb, #e8c878 72%, var(--raccent));
  position: relative;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin: 1.55rem 0 2.5rem;
  padding: 14px 16px 14px 12px;
  border: 1px solid var(--audio-line);
  border-radius: 28px;
  background: linear-gradient(120deg, var(--audio-glass), var(--audio-glass-soft));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 12px 34px rgba(0,0,0,.06);
  -webkit-backdrop-filter: blur(16px) saturate(112%);
  backdrop-filter: blur(16px) saturate(112%);
  overflow: visible;
  isolation: isolate;
}

.reader-page[data-theme="light"] .chapter-audio {
  --audio-glass: rgba(255,255,255,.24);
  --audio-glass-soft: rgba(247,244,238,.16);
  --audio-line: rgba(158,126,236,.28);
  --audio-gold: #d8b75f;
}

.reader-page[data-theme="sepia"] .chapter-audio {
  --audio-glass: rgba(255,248,233,.25);
  --audio-glass-soft: rgba(202,174,119,.10);
  --audio-line: rgba(157,124,230,.34);
  --audio-gold: #d6ad4f;
}

.chapter-audio::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(circle at 13% 50%, color-mix(in srgb, var(--audio-gold) 18%, transparent), transparent 31%);
  pointer-events: none;
}

.chapter-audio-disc,
.admin-audio-mini {
  position: relative;
  flex: 0 0 auto;
  border-radius: 50%;
  background-image: var(--audio-cover), radial-gradient(circle,#ecd487 0 13%,#705a27 14% 21%,#d8ae4f 22% 56%,#f1d98c 57% 59%,#9c7a32 60%);
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--audio-gold,#d6ad4f) 14%, transparent), 0 8px 22px rgba(56,38,9,.15);
  overflow: hidden;
  transform: translateZ(0);
}

.chapter-audio-disc { width: 82px; aspect-ratio: 1; }

.chapter-audio-disc::before,
.admin-audio-mini::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-radial-gradient(circle,transparent 0 8px,rgba(255,232,164,.20) 9px,transparent 10px), linear-gradient(135deg,rgba(255,226,137,.30),rgba(151,105,24,.14));
  box-shadow: inset 0 0 0 1px rgba(255,239,188,.34);
  pointer-events: none;
}

.chapter-audio-disc::after,
.admin-audio-mini::after {
  content: "";
  position: absolute;
  inset: 42%;
  border-radius: 50%;
  background: var(--rbg,#080c17);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--audio-gold,#d6ad4f) 72%, white 28%);
}

.chapter-audio-disc i {
  position: absolute;
  inset: 7%;
  z-index: 1;
  border-radius: 50%;
  border: 1px solid rgba(255,244,207,.24);
  pointer-events: none;
}

.chapter-audio.is-playing .chapter-audio-disc {
  animation: vcbg-disc 5s linear infinite;
  box-shadow: 0 0 0 7px rgba(169,140,255,.13), 0 0 26px rgba(151,103,255,.48), 0 8px 22px rgba(56,38,9,.16);
}

.chapter-audio-main { min-width: 0; }

.chapter-audio-kicker {
  display: block;
  margin-bottom: 4px;
  color: color-mix(in srgb, var(--audio-purple) 82%, var(--rink));
  font-size: .66rem;
  font-weight: 750;
  letter-spacing: .18em;
}

.chapter-audio-main strong {
  display: block;
  color: var(--rink);
  font-size: .94rem;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chapter-audio-controls { display:flex; align-items:center; gap:7px; margin-top:9px; }

.chapter-audio-play,
.chapter-audio-skip {
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid color-mix(in srgb, var(--audio-purple) 38%, transparent);
  color:var(--rink);
  background:color-mix(in srgb, var(--rpanel) 24%, transparent);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  cursor:pointer;
}

.chapter-audio-play { width:38px; height:38px; border-radius:50%; font-size:.82rem; }
.chapter-audio-skip { width:34px; height:30px; border-radius:12px; font-size:.68rem; }

.chapter-audio-play:hover,
.chapter-audio-play:focus-visible,
.chapter-audio-skip:hover,
.chapter-audio-skip:focus-visible,
.chapter-audio.is-playing .chapter-audio-play {
  border-color:rgba(177,143,255,.76);
  background:rgba(139,99,231,.18);
  box-shadow:0 0 18px rgba(146,93,255,.32);
}

.chapter-audio-play:disabled,
.chapter-audio-skip:disabled { cursor:default; opacity:.56; }

.chapter-audio-time {
  margin-left:auto;
  color:var(--rmuted);
  font-size:.7rem;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.chapter-audio-range {
  display:block;
  width:100%;
  height:14px;
  margin:6px 0 0;
  accent-color:var(--audio-purple);
  background:transparent;
}

.chapter-audio-range::-webkit-slider-runnable-track {
  height:2px;
  border-radius:999px;
  background:color-mix(in srgb, var(--rink) 28%, transparent);
}

.chapter-audio-range::-webkit-slider-thumb {
  width:14px;
  height:14px;
  margin-top:-6px;
  border:2px solid rgba(255,255,255,.8);
  border-radius:50%;
  background:var(--audio-purple);
  box-shadow:0 2px 9px rgba(89,48,174,.28);
  -webkit-appearance:none;
}

.admin-audio-box { margin:16px 0 22px; padding:18px; border:1px solid rgba(151,120,255,.28); border-radius:22px; background:rgba(102,75,171,.08); }
.admin-audio-head { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.admin-audio-head small { display:block; margin-top:4px; color:var(--muted,#8994aa); line-height:1.45; }
.admin-audio-mini { --audio-gold:#d6ad4f; width:58px; aspect-ratio:1; }
.admin-audio-remove { display:block; margin:10px 0; color:#d4c7f4; }
.admin-audio-remove input { margin-right:8px; }

@keyframes vcbg-disc { to { transform:rotate(360deg); } }

@media (max-width:560px) {
  .chapter-audio { grid-template-columns:70px minmax(0,1fr); gap:12px; padding:12px 13px 12px 10px; border-radius:24px; }
  .chapter-audio-disc { width:68px; }
  .chapter-audio-main strong { font-size:.88rem; }
  .chapter-audio-controls { gap:5px; }
  .chapter-audio-time { font-size:.62rem; }
  .chapter-audio-skip { width:31px; height:28px; }
  .chapter-audio-play { width:36px; height:36px; }
}

@media (prefers-reduced-motion:reduce) {
  .chapter-audio.is-playing .chapter-audio-disc { animation:none; }
}