.audio-loading { margin-top: 15px; padding: 15px 16px; border: 1px solid light-dark(rgb(166,197,201), #355458); border-radius: 11px; background: light-dark(rgb(241,247,249), #112329); }
.audio-loading[hidden], .audio-player-notice[hidden] { display: none; }
.audio-load-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.audio-load-top strong { font-size: 13px; color: light-dark(rgb(44,109,93), #d5eee8); }
.audio-load-elapsed { font-size: 11px; font-variant-numeric: tabular-nums; color: light-dark(rgb(62,87,91), #9ab6ba); }
.audio-load-cancel { margin-left: auto; padding: 4px 8px; font-size: 11px; border: 1px solid light-dark(rgb(167,192,200), #3b565e); border-radius: 6px; color: light-dark(rgb(59,87,94), #b5cbd0); }
.audio-load-cancel:hover { background: light-dark(rgba(230,230,230,0.051), #ffffff0d); color: light-dark(rgb(76,76,76), white); }
.audio-load-stages { display: flex; gap: 18px; flex-wrap: wrap; margin: 15px 0 12px; }
.audio-load-stages > span { font-size: 11px; display: inline-flex; align-items: center; gap: 6px; color: light-dark(rgb(64,82,89), #839ca5); }
.audio-load-stages i { width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; font-size: 10px; font-style: normal; background: light-dark(rgba(230,230,230,0.031), #ffffff08); border: 1px solid light-dark(rgb(166,192,201), #3a555f); }
.audio-load-stages .active { color: light-dark(rgb(24,129,105), #94ebd7); }.audio-load-stages .active i { border-color: light-dark(rgb(159,209,198), #6bbaaa); background: light-dark(rgba(220,239,234,0.082), #75d5bd15); }
.audio-load-stages .done { color: light-dark(rgb(55,98,87), #bfdbd4); }.audio-load-stages .done i { background: light-dark(rgb(241,248,247), #254d45); }
.audio-loading progress { display: block; width: 100%; height: 6px; accent-color: #83e4cf; border: 0; border-radius: 6px; overflow: hidden; }
.audio-loading progress::-webkit-progress-bar { background: light-dark(rgb(242,246,248), #29414a); border-radius: 6px; }
.audio-loading progress::-webkit-progress-value { background: light-dark(rgb(220,239,235), #83e4cf); border-radius: 6px; }
.audio-loading progress:not([value]) { background: linear-gradient(90deg, light-dark(rgb(242,246,248), #29414a) 0 25%, light-dark(rgb(242,247,246), #5e9e92) 50%, light-dark(rgb(242,246,248), #29414a) 75% 100%); background-size: 200% 100%; animation: audio-indeterminate 1.8s linear infinite; }
.audio-loading progress:not([value])::-webkit-progress-bar { background: transparent; }
.audio-load-detail { font-size: 12px; color: light-dark(rgb(59,94,93), #bfd7d6); margin: 10px 0 5px; }
.audio-load-note { font-size: 11px; color: light-dark(rgb(63,84,90), #92acb3); margin: 0; }
.audio-player-notice { font-size: 12px; color: var(--amber); margin-top: 10px; }
.audio-player-shell { min-width: 0; }
.audio-synthetic-note { font-size: 11.5px; line-height: 1.5; color: var(--text-faint); margin-top: 5px; }
.transcript .audio-player-shell { flex: 1; }
@keyframes audio-indeterminate { to { background-position: -200% 0; } }
@media(max-width:760px) {
  .audio-loading { padding: 13px 11px; }
  .audio-load-stages { gap: 10px; }
  .audio-load-stages > span { gap: 4px; font-size: 10px; }
  .audio-load-cancel { min-height: 34px; }
  .audio-load-top { gap: 6px; }
  .audio-load-top strong { font-size: 12px; }
  .audio-load-elapsed { font-size: 10px; }
  .transcript .player { padding: 8px; gap: 7px; }
  .transcript .player .time { font-size: 10px; }
}
@media(prefers-reduced-motion:reduce) { .audio-loading progress:not([value]) { animation: none; } }