.audio-home-card {
  margin: 16px 0 22px;
  text-align: left;
}
.audio-home-card .hero-copy { max-width: 510px; }
.audio-home-card .hero-kicker { display: flex; align-items: center; gap: 8px; }
.audio-home-card .hero-mark {
  width: 96px;
  height: 96px;
  border: 2px solid rgba(255,255,255,.34);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 8px 30px rgba(35, 12, 35, .2);
}
.audio-home-card .button-primary { display: inline-flex; align-items: center; gap: 8px; min-height: 45px; }
.audio-home-card .button-primary svg { width: 19px; height: 19px; }

.live-audio-page { max-width: 980px; }
.live-audio-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  margin: 0 0 26px;
  padding: clamp(20px, 5vw, 34px);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 24px;
  background: linear-gradient(132deg, color-mix(in srgb, var(--accent) 11%, var(--surface)) 0%, var(--surface) 76%);
  box-shadow: var(--shadow);
}
.live-audio-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -78px;
  bottom: -144px;
  width: 300px;
  height: 300px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 24px color-mix(in srgb, var(--accent) 5%, transparent), 0 0 0 52px color-mix(in srgb, var(--accent) 4%, transparent);
}
.live-audio-hero-copy { position: relative; z-index: 1; max-width: 620px; }
.live-audio-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--accent); font-size: .75rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.live-audio-hero h2 { margin: 0; font-family: var(--font-reading); font-size: clamp(1.45rem, 4vw, 2rem); line-height: 1.18; }
.live-audio-hero p:not(.live-audio-kicker) { max-width: 540px; margin: 9px 0 0; color: var(--muted); line-height: 1.55; }
.live-audio-emblem { display: grid; width: 92px; height: 92px; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line)); border-radius: 24px; color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.live-audio-emblem img { width: 68px; height: 68px; object-fit: contain; }
.live-audio-emblem svg { width: 42px; height: 42px; }
.live-audio-badge { display: inline-flex; align-items: center; gap: 7px; min-height: 29px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--surface); font-size: .73rem; font-weight: 750; letter-spacing: .015em; }
.live-audio-badge.is-live { border-color: color-mix(in srgb, #bd274f 36%, var(--line)); color: #a7193f; background: color-mix(in srgb, #bd274f 9%, var(--surface)); }
.live-audio-badge.is-live::before { width: 7px; height: 7px; border-radius: 50%; background: #c6214b; content: ""; box-shadow: 0 0 0 4px color-mix(in srgb, #c6214b 14%, transparent); }

.audio-section { margin: 28px 0; }
.audio-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin: 0 0 13px; }
.audio-section-heading h2 { margin: 0; font-family: var(--font-reading); font-size: 1.27rem; }
.audio-section-heading p { margin: 4px 0 0; color: var(--muted); font-size: .86rem; }
.audio-live-carousel { display: grid; grid-auto-columns: minmax(230px, 290px); grid-auto-flow: column; gap: 13px; overflow-x: auto; padding: 2px 2px 12px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.audio-program-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 4px 16px rgba(45, 28, 57, .055); scroll-snap-align: start; }
.audio-program-card-media { position: relative; display: grid; min-height: 142px; place-items: center; overflow: hidden; background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 18%, var(--surface-soft)), var(--surface-soft)); }
.audio-program-card-media img { width: 100%; height: 156px; object-fit: cover; }
.audio-program-card-placeholder { display: grid; width: 64px; height: 64px; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); border-radius: 20px; color: var(--accent); background: var(--surface); }
.audio-program-card-placeholder svg { width: 31px; height: 31px; }
.audio-program-card .live-audio-badge { position: absolute; top: 12px; left: 12px; }
.audio-program-card-body { display: grid; gap: 8px; padding: 15px; }
.audio-program-card-body h3 { margin: 0; color: var(--ink); font-size: 1rem; line-height: 1.3; }
.audio-program-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; color: var(--muted); font-size: .79rem; }
.audio-program-card .button-secondary, .audio-program-card .button-primary { width: 100%; min-height: 43px; margin-top: 3px; border-radius: 12px; font: inherit; font-size: .87rem; font-weight: 750; cursor: pointer; }
.audio-program-card .button-secondary { border: 1px solid var(--line); color: var(--ink); background: var(--surface); }
.audio-program-card .button-primary { border: 1px solid var(--accent); color: #fff; background: var(--accent); }
.audio-program-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.audio-program-grid .audio-program-card-media { min-height: 175px; }
.audio-program-grid .audio-program-card-media img { height: 190px; }
.audio-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 0 0 14px; }
.audio-search-input, .audio-category-select {
  width: 100%;
  min-height: 48px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: var(--surface);
  font: inherit;
}
.audio-search-input:focus, .audio-category-select:focus { outline: 2px solid color-mix(in srgb, var(--accent) 34%, transparent); outline-offset: 1px; }
.audio-category-select { min-width: 165px; }
.audio-empty-state { display: grid; min-height: 180px; justify-items: center; align-content: center; padding: 22px; border: 1px dashed var(--line); border-radius: 17px; color: var(--muted); background: var(--surface); text-align: center; }
.audio-empty-state svg { width: 30px; height: 30px; margin-bottom: 8px; color: var(--accent); }
.audio-empty-state h3 { margin: 0; color: var(--ink); font-size: 1rem; }
.audio-empty-state p { max-width: 420px; margin: 7px 0 0; line-height: 1.5; }

.audio-listener-page { max-width: 820px; }
.audio-back-button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin: 0 0 14px; padding: 6px 4px; border: 0; color: var(--accent); background: transparent; font: inherit; font-weight: 750; cursor: pointer; }
.audio-back-button svg { width: 19px; height: 19px; }
.audio-listener-card { overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); }
.audio-listener-art { display: grid; min-height: 220px; place-items: center; overflow: hidden; background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 22%, var(--surface-soft)), var(--surface-soft)); }
.audio-listener-art img { width: 100%; max-height: min(55vh, 420px); object-fit: cover; }
.audio-listener-art-placeholder { display: grid; width: 92px; height: 92px; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); border-radius: 28px; color: var(--accent); background: var(--surface); }
.audio-listener-art-placeholder svg { width: 42px; height: 42px; }
.audio-listener-body { display: grid; gap: 17px; padding: clamp(18px, 5vw, 28px); }
.audio-listener-title-row { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.audio-listener-title-row h1 { margin: 0; font-family: var(--font-reading); font-size: clamp(1.55rem, 5vw, 2.1rem); line-height: 1.16; }
.audio-listener-speaker { margin: 6px 0 0; color: var(--muted); }
.audio-player { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-soft); }
.audio-player audio { display: block; width: 100%; min-height: 44px; }
.audio-player-note { margin: 0; color: var(--muted); font-size: .83rem; line-height: 1.45; }
.audio-live-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.audio-service-error { margin: 0 0 14px; padding: 12px 14px; border: 1px solid #e7a9b4; border-radius: 12px; color: #982640; background: #fff2f4; font-size: .85rem; line-height: 1.5; }
.audio-listener-description { margin: 0; color: var(--ink); line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.audio-reactions { display: flex; flex-wrap: wrap; gap: 9px; padding-top: 14px; border-top: 1px solid var(--line); }
.audio-reaction-button { display: inline-flex; min-height: 43px; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: var(--surface); font: inherit; font-size: .88rem; font-weight: 750; cursor: pointer; }
.audio-reaction-button[aria-pressed="true"], .audio-reaction-button:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.audio-reaction-count { color: var(--muted); font-size: .78rem; }
.audio-comments { display: grid; gap: 12px; padding-top: 15px; border-top: 1px solid var(--line); }
.audio-comments h2 { margin: 0; font-family: var(--font-reading); font-size: 1.12rem; }
.audio-comment-form { display: grid; gap: 9px; }
.audio-comment-form textarea { width: 100%; min-height: 82px; resize: vertical; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--surface); font: inherit; }
.audio-comment-form .button-primary { min-height: 42px; justify-self: end; padding: 8px 15px; border: 0; border-radius: 11px; color: #fff; background: var(--accent); font: inherit; font-weight: 750; cursor: pointer; }
.audio-comment-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.audio-comment { padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.audio-comment p { margin: 0; color: var(--ink); line-height: 1.5; overflow-wrap: anywhere; }
.audio-comment time { display: block; margin-top: 5px; color: var(--muted); font-size: .73rem; }
.audio-preview-notice { margin: 14px 0 0; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--accent) 19%, var(--line)); border-radius: 13px; color: var(--muted); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); font-size: .81rem; line-height: 1.5; }
.audio-listener-timer { color: var(--accent); font-size: .78rem; font-weight: 750; }

@media (max-width: 620px) {
  .live-audio-hero { grid-template-columns: minmax(0, 1fr); }
  .live-audio-emblem { position: absolute; top: 16px; right: 16px; width: 60px; height: 60px; border-radius: 18px; opacity: .72; }
  .live-audio-emblem img { width: 47px; height: 47px; }
  .live-audio-emblem svg { width: 29px; height: 29px; }
  .audio-live-carousel { grid-auto-columns: minmax(220px, 84vw); }
  .audio-program-grid { grid-template-columns: 1fr; }
  .audio-controls { grid-template-columns: 1fr; }
  .audio-category-select { min-width: 0; }
  .audio-listener-art { min-height: 175px; }
  .audio-listener-title-row { display: grid; }
}
@media (prefers-reduced-motion: reduce) {
  .audio-program-card, .audio-program-card * { scroll-behavior: auto; transition-duration: .01ms; }
}


/* Public Live Audio library: dark, mobile-first programme browsing inspired by the supplied reference. */
body.audio-library-mode {
  color-scheme: dark;
  --ink: #f4f6ff;
  --muted: #a3aec2;
  --canvas: #050a13;
  --surface: #0a1422;
  --surface-soft: #101d30;
  --line: #1d2b40;
  --accent: #6046f5;
  --accent-deep: #8473ff;
  --accent-soft: rgba(96, 70, 245, .16);
  background: #050a13;
  color: #f4f6ff;
}
body.audio-library-mode .app-shell { width: 100%; max-width: none; min-height: 100vh; margin: 0; padding: 0; background: #050a13; }
body.audio-library-mode .brand-header,
body.audio-library-mode .bottom-nav { display: none !important; }
body.audio-library-mode .main-content { min-height: 100vh; padding: 0; }
body.audio-library-mode .toast { bottom: calc(94px + env(safe-area-inset-bottom)); }
.audio-library-page { position: relative; width: 100%; max-width: none; min-height: 100vh; margin: 0; padding: 0 0 calc(102px + env(safe-area-inset-bottom)); overflow: clip; color: var(--ink); background: #050a13; }
.audio-library-header { position: sticky; top: 0; z-index: 8; border-bottom: 1px solid #1a2739; background: rgba(5, 10, 19, .95); backdrop-filter: blur(16px); }
.audio-library-header-inner { display: flex; width: min(100%, 1000px); min-height: 74px; align-items: center; justify-content: space-between; gap: 16px; margin: 0 auto; padding: 10px 20px; }
.audio-library-brand { display: flex; min-width: 0; align-items: center; gap: 12px; padding: 0; border: 0; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.audio-library-brand img { width: 48px; height: 48px; flex: 0 0 auto; object-fit: contain; }
.audio-library-brand span { display: grid; gap: 3px; min-width: 0; }
.audio-library-brand strong { font-size: .91rem; line-height: 1.15; }
.audio-library-brand small { color: var(--muted); font-size: .74rem; }
.audio-library-header-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; }
.audio-library-header-icon, .audio-library-avatar { display: grid; width: 40px; height: 40px; place-items: center; border: 0; border-radius: 50%; color: #dbe3f4; background: transparent; text-decoration: none; cursor: pointer; }
.audio-library-header-icon:hover { background: #101d30; }
.audio-library-header-icon svg { width: 22px; height: 22px; }
.audio-library-avatar { color: white; background: #5239e7; font: inherit; font-weight: 800; }
.audio-library-content { width: min(100%, 1000px); margin: 0 auto; padding: 18px 20px 28px; }
.audio-library-feature { position: relative; display: grid; grid-template-columns: minmax(180px, .8fr) minmax(0, 1.2fr); gap: 22px; min-height: 222px; margin: 0 0 24px; padding: 9px; overflow: hidden; border: 1px solid #1c2d46; border-radius: 20px; background: linear-gradient(135deg, #091423 0%, #07101b 100%); box-shadow: 0 14px 36px rgba(0, 0, 0, .22); }
.audio-library-feature-art { position: relative; display: grid; min-height: 202px; align-content: center; justify-items: center; overflow: hidden; border: 1px solid rgba(128, 109, 255, .2); border-radius: 14px; background: radial-gradient(circle at 70% 28%, rgba(72, 42, 190, .82), transparent 43%), linear-gradient(145deg, #10106c 0%, #2216ad 44%, #070d20 100%); }
.audio-library-feature-art::after { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3, 5, 20, .45), transparent 60%); content: ""; pointer-events: none; }
.audio-library-feature-art img { width: 100%; height: 100%; min-height: 202px; object-fit: cover; }
.audio-library-art-placeholder img { width: 88px; height: 88px; min-height: 0; object-fit: contain; opacity: .82; }
.audio-library-art-glow { position: absolute; width: 150px; height: 150px; border: 1px solid rgba(157, 140, 255, .45); border-radius: 50%; box-shadow: 0 0 0 18px rgba(110, 86, 255, .08), 0 0 50px rgba(94, 74, 255, .38); }
.audio-library-feature-copy { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 14px 14px 14px 0; }
.audio-library-feature-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.audio-library-live-pill, .audio-library-feature-pill { display: inline-flex; min-height: 26px; align-items: center; gap: 7px; padding: 4px 9px; border-radius: 8px; color: #fff; background: #df2450; font-size: .7rem; font-weight: 850; letter-spacing: .05em; }
.audio-library-live-pill i, .audio-library-live-label i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(255, 255, 255, .14); }
.audio-library-feature-pill { color: #d8d3ff; background: rgba(104, 83, 244, .2); }
.audio-library-church-label { color: #9da9bf; font-size: .77rem; }
.audio-library-feature h1 { margin: 0; color: #f7f8ff; font-size: clamp(1.45rem, 3vw, 1.95rem); font-weight: 800; line-height: 1.14; }
.audio-library-feature-subtitle { margin: 7px 0 0; color: #bdc8dc; font-size: .9rem; line-height: 1.45; }
.audio-library-feature-meta { display: flex; flex-wrap: wrap; gap: 7px 16px; margin-top: 11px; color: #c4cde0; font-size: .76rem; }
.audio-library-feature-controls { display: flex; min-height: 38px; align-items: center; gap: 12px; margin-top: 15px; }
.audio-library-feature-play { display: inline-flex; min-height: 42px; flex: 0 0 auto; align-items: center; justify-content: center; gap: 7px; padding: 8px 15px; border: 0; border-radius: 999px; color: #fff; background: #5638ef; font: inherit; font-size: .85rem; font-weight: 800; cursor: pointer; box-shadow: 0 6px 20px rgba(71, 51, 215, .28); }
.audio-library-feature-play:hover { background: #694fff; }
.audio-library-feature-play svg { width: 17px; height: 17px; }
.audio-library-waveform { display: flex; min-width: 72px; height: 28px; flex: 1 1 auto; align-items: center; gap: 3px; overflow: hidden; }
.audio-library-waveform span { width: 3px; min-width: 2px; max-height: 100%; border-radius: 4px; background: linear-gradient(180deg, #a69aff, #5139ef); opacity: .9; }
.audio-library-listener-count { flex: 0 0 auto; color: var(--muted); font-size: .71rem; }
.audio-library-section { margin-top: 25px; }
.audio-library-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.audio-library-section-heading h2 { margin: 0; color: var(--ink); font-size: 1.12rem; font-weight: 800; letter-spacing: -.02em; }
.audio-library-overline { margin: 0 0 4px; color: #8f7aff; font-size: .66rem; font-weight: 850; letter-spacing: .14em; }
.audio-library-program-count { display: grid; min-width: 30px; height: 30px; place-items: center; padding: 0 7px; border: 1px solid #26344b; border-radius: 999px; color: #c5cbe0; background: #0c1625; font-size: .72rem; font-weight: 750; }
.audio-library-search-wrap { position: relative; display: flex; align-items: center; margin: 0 0 12px; }
.audio-library-search-wrap > svg { position: absolute; left: 14px; width: 19px; height: 19px; color: #8290a9; pointer-events: none; }
.audio-library-search { width: 100%; min-height: 44px; padding: 10px 14px 10px 42px; border: 1px solid #202e43; border-radius: 12px; outline: none; color: var(--ink); background: #091320; font: inherit; font-size: .85rem; }
.audio-library-search::placeholder { color: #78869d; }
.audio-library-search:focus { border-color: #6b55f4; box-shadow: 0 0 0 3px rgba(94, 71, 240, .15); }
.audio-library-filters { display: flex; gap: 8px; margin: 0 -20px 15px; padding: 2px 20px 6px; overflow-x: auto; scrollbar-width: none; }
.audio-library-filters::-webkit-scrollbar { display: none; }
.audio-library-filter { display: inline-flex; min-height: 36px; flex: 0 0 auto; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid #202e43; border-radius: 999px; color: #c1cada; background: #0a1422; font: inherit; font-size: .77rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
.audio-library-filter.is-selected { border-color: #624cf3; color: #fff; background: #5138e9; box-shadow: 0 4px 15px rgba(79, 58, 226, .18); }
.audio-library-filter-dot { width: 8px; height: 8px; border-radius: 50%; background: #12d89b; }
.audio-library-list { display: grid; gap: 9px; }
.audio-library-row { display: grid; grid-template-columns: 86px minmax(0, 1fr) auto 40px; align-items: center; gap: 11px; min-height: 102px; padding: 9px 12px 9px 9px; border: 1px solid #19283c; border-radius: 15px; background: #091320; transition: border-color .16s ease, transform .16s ease, background .16s ease; }
.audio-library-row:hover { transform: translateY(-1px); border-color: #354268; background: #0b1727; }
.audio-library-row-art { position: relative; display: grid; width: 86px; height: 80px; place-items: center; overflow: hidden; border-radius: 11px; background: radial-gradient(circle at 70% 25%, rgba(107, 65, 255, .55), transparent 45%), linear-gradient(145deg, #17114b, #07101e); }
.audio-library-row-art img { width: 100%; height: 100%; object-fit: cover; }
.audio-library-row-art.audio-library-art-placeholder img { width: 42px; height: 42px; opacity: .75; }
.audio-library-row-copy { min-width: 0; }
.audio-library-row-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; color: #b6a9ff; font-size: .67rem; font-weight: 750; }
.audio-library-live-label { display: inline-flex; align-items: center; gap: 6px; color: #16dba0; font-size: .67rem; font-weight: 750; }
.audio-library-live-label i { width: 6px; height: 6px; box-shadow: 0 0 0 3px rgba(22, 219, 160, .12); }
.audio-library-recorded-label { display: inline-flex; align-items: center; padding: 3px 7px; border: 1px solid rgba(130, 172, 255, .24); border-radius: 6px; color: #abc9ff; background: rgba(68, 107, 181, .16); font-size: .64rem; font-weight: 750; }
.audio-library-row h3 { margin: 0; overflow: hidden; color: #f2f5fd; font-size: .91rem; font-weight: 780; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.audio-library-row-meta { display: flex; flex-wrap: wrap; gap: 4px 7px; margin: 5px 0 0; color: #9ba8bc; font-size: .7rem; line-height: 1.35; }
.audio-library-row-meta span { color: #59677d; }
.audio-library-save { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; padding: 7px 10px; border: 1px solid rgba(142, 124, 255, .52); border-radius: 999px; color: #e1dcff; background: rgba(96, 70, 245, .13); font: inherit; font-size: .7rem; font-weight: 750; white-space: nowrap; cursor: pointer; }
.audio-library-save:hover { border-color: #a89bff; background: rgba(96, 70, 245, .24); }
.audio-library-save:disabled { opacity: .68; cursor: wait; }
.audio-library-remove-save { color: #b6c0d1; border-color: #34445d; background: transparent; }
.audio-library-saved-mark { color: #83e3bf; font-size: .69rem; font-weight: 750; white-space: nowrap; }
.audio-library-row-play { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #71809a; border-radius: 50%; color: #f0f3ff; background: transparent; cursor: pointer; }
.audio-library-row-play:hover { border-color: #a99cff; color: #a99cff; background: rgba(110, 87, 247, .12); }
.audio-library-row-play svg { width: 19px; height: 19px; }
.audio-library-empty { display: grid; min-height: 160px; justify-items: center; align-content: center; padding: 20px; border: 1px dashed #26364e; border-radius: 15px; color: var(--muted); text-align: center; }
.audio-library-empty-icon { color: #8f7aff; }
.audio-library-empty-icon svg { width: 30px; height: 30px; }
.audio-library-empty h3 { margin: 7px 0 0; color: var(--ink); font-size: .95rem; }
.audio-library-empty p { margin: 6px 0 0; font-size: .8rem; }
.audio-library-bottom-nav { position: fixed; z-index: 10; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: min(100%, 1000px); min-height: 69px; margin: 0 auto; padding: 7px 12px calc(7px + env(safe-area-inset-bottom)); border: 1px solid #1b283b; border-bottom: 0; border-radius: 16px 16px 0 0; background: rgba(5, 10, 19, .97); box-shadow: 0 -8px 28px rgba(0, 0, 0, .24); backdrop-filter: blur(16px); }
.audio-library-nav-button { display: grid; min-width: 0; min-height: 52px; justify-items: center; align-content: center; gap: 3px; padding: 2px; border: 0; border-radius: 12px; color: #98a5bb; background: transparent; font: inherit; font-size: .64rem; font-weight: 650; cursor: pointer; }
.audio-library-nav-button > svg { width: 21px; height: 21px; }
.audio-library-nav-button.is-active { color: #8a78ff; }
.audio-library-nav-listen { margin-top: -22px; }
.audio-library-nav-play { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 50%; color: #fff; background: #5638ef; box-shadow: 0 7px 21px rgba(83, 57, 240, .38); }
.audio-library-nav-play svg { width: 23px; height: 23px; }
.audio-library-nav-listen > span:last-child { margin-top: 0; }
@media (max-width: 620px) {
  .audio-library-header-inner { min-height: 68px; padding: 8px 14px; }
  .audio-library-brand { gap: 9px; }
  .audio-library-brand img { width: 43px; height: 43px; }
  .audio-library-brand strong { font-size: .8rem; }
  .audio-library-header-actions { gap: 4px; }
  .audio-library-header-icon, .audio-library-avatar { width: 36px; height: 36px; }
  .audio-library-content { padding: 13px 14px 24px; }
  .audio-library-feature { grid-template-columns: 112px minmax(0, 1fr); gap: 13px; min-height: 174px; padding: 8px; border-radius: 16px; }
  .audio-library-feature-art, .audio-library-feature-art img { min-height: 156px; border-radius: 11px; }
  .audio-library-feature-copy { padding: 8px 7px 8px 0; }
  .audio-library-feature-status { gap: 6px; margin-bottom: 7px; }
  .audio-library-church-label { display: none; }
  .audio-library-feature h1 { font-size: clamp(1.08rem, 4vw, 1.45rem); }
  .audio-library-feature-subtitle { margin-top: 5px; font-size: .76rem; }
  .audio-library-feature-meta { gap: 5px 10px; margin-top: 7px; font-size: .68rem; }
  .audio-library-feature-controls { flex-wrap: wrap; gap: 8px; margin-top: 9px; }
  .audio-library-feature-play { min-height: 36px; padding: 7px 11px; font-size: .76rem; }
  .audio-library-waveform { min-width: 50px; height: 22px; }
  .audio-library-listener-count { display: none; }
  .audio-library-section { margin-top: 20px; }
  .audio-library-section-heading h2 { font-size: 1rem; }
  .audio-library-row { grid-template-columns: 72px minmax(0, 1fr) auto 34px; gap: 7px; min-height: 86px; padding: 7px 9px 7px 7px; }
  .audio-library-row-art { width: 72px; height: 70px; }
  .audio-library-row h3 { font-size: .83rem; }
  .audio-library-row-meta { font-size: .66rem; }
  .audio-library-save { min-height: 30px; padding: 6px 8px; font-size: .64rem; }
  .audio-library-saved-mark { font-size: .62rem; }
  .audio-library-row-play { width: 32px; height: 32px; }
  .audio-library-filters { margin-right: -14px; margin-left: -14px; padding-right: 14px; padding-left: 14px; }
  .audio-library-bottom-nav { border-radius: 15px 15px 0 0; }
}
@media (max-width: 370px) {
  .audio-library-header-inner { gap: 7px; }
  .audio-library-brand { gap: 7px; }
  .audio-library-brand img { width: 38px; height: 38px; }
  .audio-library-feature { grid-template-columns: 94px minmax(0, 1fr); gap: 10px; }
  .audio-library-feature-art, .audio-library-feature-art img { min-height: 144px; }
  .audio-library-feature-play { padding-right: 9px; padding-left: 9px; }
  .audio-library-nav-button { font-size: .58rem; }
  .audio-library-row { grid-template-columns: 62px minmax(0, 1fr) auto 30px; gap: 5px; }
  .audio-library-row-art { width: 62px; height: 62px; }
  .audio-library-save { padding-right: 6px; padding-left: 6px; font-size: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .audio-library-row { transition: none; }
}


/* Public Live Audio listener screen: focused playback and anonymous chat. */
body.audio-listener-mode { color-scheme: dark; --ink:#f4f6ff; --muted:#a3aec2; --canvas:#050a13; --surface:#0a1422; --surface-soft:#101d30; --line:#1d2b40; --accent:#6046f5; --accent-deep:#8473ff; --accent-soft:rgba(96,70,245,.16); background:#050a13; color:#f4f6ff; }
body.audio-listener-mode .app-shell { width:100%; max-width:none; min-height:100vh; margin:0; padding:0; background:#050a13; }
body.audio-listener-mode .brand-header, body.audio-listener-mode .bottom-nav { display:none !important; }
body.audio-listener-mode .main-content { min-height:100vh; padding:0; }
body.audio-listener-mode .toast { bottom:calc(16px + env(safe-area-inset-bottom)); }
.audio-listener-page { width:100%; max-width:none; min-height:100vh; margin:0; padding:0 0 calc(24px + env(safe-area-inset-bottom)); overflow:clip; color:var(--ink); background:#050a13; }
.audio-listener-header { position:sticky; top:0; z-index:8; display:flex; width:min(100%,760px); min-height:66px; align-items:center; gap:10px; margin:0 auto; padding:calc(7px + env(safe-area-inset-top)) max(14px,env(safe-area-inset-left)) 7px; border-bottom:1px solid #1a2739; background:rgba(5,10,19,.95); backdrop-filter:blur(16px); }
.audio-listener-back, .audio-listener-header-profile { display:grid; width:38px; height:38px; flex:0 0 auto; place-items:center; padding:0; border:1px solid #1d2b40; border-radius:50%; color:#dce4f4; background:#091320; cursor:pointer; }
.audio-listener-back svg, .audio-listener-header-profile svg { width:20px; height:20px; }
.audio-listener-brand { display:flex; min-width:0; flex:1 1 auto; align-items:center; gap:9px; color:var(--ink); }
.audio-listener-brand img { width:42px; height:42px; flex:0 0 auto; object-fit:contain; }
.audio-listener-brand span { display:grid; gap:2px; min-width:0; }
.audio-listener-brand strong { font-size:.79rem; line-height:1.15; }
.audio-listener-brand small { color:var(--muted); font-size:.68rem; }
.audio-listener-content { width:min(100%,760px); margin:0 auto; padding:14px 16px 28px; }
.audio-listener-card { overflow:visible; border:0; border-radius:0; background:transparent; box-shadow:none; }
.audio-listener-art { position:relative; display:grid; width:100%; min-height:190px; max-height:330px; aspect-ratio:1.88; place-items:center; margin:0 0 17px; overflow:hidden; border:1px solid #1d2b40; border-radius:18px; background:radial-gradient(circle at 70% 25%,rgba(86,52,226,.72),transparent 48%),linear-gradient(145deg,#101a55,#090e20 82%); }
.audio-listener-art img { width:100%; height:100%; max-height:none; object-fit:cover; }
.audio-listener-art-empty .audio-listener-art-placeholder { display:grid; width:78px; height:78px; place-items:center; border:1px solid rgba(167,149,255,.42); border-radius:25px; color:#a394ff; background:rgba(13,17,45,.72); box-shadow:0 0 0 14px rgba(109,87,255,.07),0 0 42px rgba(87,64,237,.3); }
.audio-listener-art-empty .audio-listener-art-placeholder svg { width:40px; height:40px; }
.audio-listener-art-overlay { position:absolute; z-index:2; top:13px; right:13px; left:13px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.audio-listener-live-badge, .audio-listener-featured-badge, .audio-listener-viewers { display:inline-flex; min-height:27px; align-items:center; gap:7px; padding:5px 10px; border:1px solid rgba(255,255,255,.1); border-radius:999px; color:#fff; background:rgba(8,11,22,.72); font-size:.7rem; font-weight:800; letter-spacing:.035em; backdrop-filter:blur(8px); }
.audio-listener-live-badge { border-color:rgba(255,72,104,.4); background:#dc2450; }
.audio-listener-live-badge i { width:7px; height:7px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.16); }
.audio-listener-viewers { font-size:.72rem; letter-spacing:0; }
.audio-listener-viewers svg { width:15px; height:15px; }
.audio-listener-featured-badge { color:#e4deff; background:rgba(49,37,139,.74); }
.audio-listener-body { display:grid; gap:15px; padding:0 2px; }
.audio-listener-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.audio-listener-title-row h1 { margin:0; color:#f5f6ff; font-size:clamp(1.35rem,4.5vw,1.8rem); font-weight:820; line-height:1.16; letter-spacing:-.025em; }
.audio-listener-speaker { margin:5px 0 0; color:#aab6ca; font-size:.82rem; line-height:1.4; }
.audio-listener-title-row .live-audio-badge { flex:0 0 auto; min-height:26px; border:0; color:#fff; background:#dc2450; font-size:.66rem; }
.audio-listener-details { display:flex; flex-wrap:wrap; align-items:center; gap:7px 14px; color:#c2ccde; font-size:.75rem; }
.audio-listener-category { display:inline-flex; min-height:25px; align-items:center; padding:4px 10px; border:1px solid rgba(105,84,245,.3); border-radius:999px; color:#dcd6ff; background:rgba(96,70,245,.17); font-weight:750; }
.audio-listener-player { display:grid; gap:10px; padding:13px; border:1px solid #1c2b41; border-radius:16px; background:linear-gradient(145deg,#0b1727,#08111d); box-shadow:0 8px 24px rgba(0,0,0,.14); }
.audio-listener-player-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:7px; }
.audio-listener-player-live { display:inline-flex; align-items:center; gap:7px; color:#e5e8f3; font-size:.68rem; font-weight:850; letter-spacing:.09em; }
.audio-listener-player-live i { width:7px; height:7px; border-radius:50%; background:#e72b55; box-shadow:0 0 0 4px rgba(231,43,85,.14); }
.audio-listener-player-caption { color:#8f9cb2; font-size:.68rem; }
.audio-listener-recorded { color:#9fc6ff; font-size:.68rem; font-weight:850; letter-spacing:.09em; }
.audio-listener-player .audio-listener-audio-source { position:absolute; display:block; width:1px; min-height:0; height:1px; overflow:hidden; clip-path:inset(50%); opacity:0; pointer-events:none; white-space:nowrap; }
.audio-listener-controls { display:grid; gap:10px; min-width:0; }
.audio-listener-waveform { display:flex; height:48px; align-items:center; gap:3px; overflow:hidden; }
.audio-listener-waveform[data-audio-waveform-seek] { border-radius:6px; outline:none; cursor:pointer; touch-action:none; }
.audio-listener-waveform[data-audio-waveform-seek]:focus-visible { outline:2px solid #a89cff; outline-offset:4px; }
.audio-listener-waveform[data-audio-waveform-seek].is-disabled { cursor:default; opacity:.55; }
.audio-listener-waveform span { width:3px; min-width:2px; height:5%; flex:1 1 0; border-radius:4px; background:linear-gradient(180deg,#a89cff,#5c41f0); opacity:.72; transition:height .07s linear,opacity .12s ease,background .12s ease; }
.audio-listener-waveform span.is-played { background:linear-gradient(180deg,#c8c0ff,#7059ff); opacity:1; }
.audio-listener-waveform span.is-active { opacity:1; box-shadow:0 0 8px rgba(145,126,255,.36); }
.audio-listener-seek { width:100%; height:7px; margin:0; border-radius:999px; outline:none; appearance:none; background:linear-gradient(to right,#927eff 0 var(--audio-progress,0%),#25334a var(--audio-progress,0%) 100%); cursor:pointer; }
.audio-listener-seek:disabled { cursor:default; opacity:.42; }
.audio-listener-seek::-webkit-slider-thumb { width:14px; height:14px; border:2px solid #fff; border-radius:50%; appearance:none; background:#806bff; box-shadow:0 1px 5px rgba(0,0,0,.45); }
.audio-listener-seek::-moz-range-thumb { width:11px; height:11px; border:2px solid #fff; border-radius:50%; background:#806bff; box-shadow:0 1px 5px rgba(0,0,0,.45); }
.audio-listener-seek:focus-visible { outline:2px solid #a89cff; outline-offset:5px; }
.audio-player-control-row { display:flex; min-width:0; align-items:center; gap:10px; }
.audio-player-control { display:grid; width:39px; height:39px; flex:0 0 auto; place-items:center; padding:0; border:1px solid #293951; border-radius:50%; color:#f3f2ff; background:#111c2d; font:inherit; font-size:.95rem; font-weight:850; cursor:pointer; }
.audio-player-control:hover, .audio-player-control:focus-visible { border-color:#8978ff; color:#c8c0ff; outline:none; background:#18233a; }
.audio-player-toggle-audio-playback { width:43px; height:43px; color:#fff; border-color:#614cf0; background:#5638ef; box-shadow:0 5px 16px rgba(83,57,240,.26); }
.audio-player-toggle-audio-playback:hover, .audio-player-toggle-audio-playback:focus-visible { color:#fff; border-color:#9b8eff; background:#694fff; }
.audio-player-live-return { min-height:32px; padding:5px 9px; border:1px solid #e72b55; border-radius:999px; color:#fff; background:rgba(231,43,85,.16); font:inherit; font-size:.65rem; font-weight:850; cursor:pointer; }
.audio-player-live-return:hover, .audio-player-live-return:focus-visible { outline:2px solid rgba(255,255,255,.65); outline-offset:2px; background:#dc2450; }
.audio-listener-time, .audio-listener-timer { color:#c5cce0; font-size:.72rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.audio-listener-timer { flex:1 1 auto; color:#a99cff; font-weight:750; }
.audio-player-volume { display:flex; min-width:64px; flex:1 1 100px; align-items:center; }
.audio-player-volume input { width:100%; height:5px; margin:0; border-radius:999px; accent-color:#927eff; cursor:pointer; }
.audio-listener-player .audio-player-note { color:#a6b1c5; font-size:.76rem; }
.audio-listener-save { width: fit-content; min-height: 38px; padding-right: 14px; padding-left: 14px; }
.audio-listener-saved-note, .audio-offline-interactions-note { margin: 0; color: #9fdcc4; font-size: .78rem; line-height: 1.45; }
.audio-offline-interactions-note { padding: 12px; border: 1px solid #1c2b41; border-radius: 12px; color: #a6b1c5; background: #0a1422; }
.audio-listener-description { margin:0; color:#c1cadd; font-size:.84rem; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.audio-reactions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:2px 0 14px; border:0; border-bottom:1px solid #1d2b40; }
.audio-reaction-button { display:flex; min-width:0; min-height:43px; justify-content:center; gap:6px; padding:8px 7px; border-color:#1d2b40; color:#e2e8f4; background:#0a1422; font-size:.74rem; }
.audio-reaction-button[aria-pressed="true"], .audio-reaction-button:hover { border-color:#6a55ef; color:#d9d2ff; background:rgba(96,70,245,.14); }
.audio-reaction-emoji { font-size:.9rem; }
.audio-reaction-count { font-size:.68rem; }
.audio-share-button svg { width:16px; height:16px; flex:0 0 auto; }
.audio-comments { display:grid; gap:12px; padding-top:0; border-top:0; }
.audio-comments-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.audio-comments-heading > div { display:flex; align-items:center; gap:9px; }
.audio-comments-heading h2 { margin:0; color:#f3f5fb; font-family:var(--font-ui); font-size:1rem; font-weight:800; }
.audio-comments-live-dot { width:9px; height:9px; border-radius:50%; background:#e72b55; box-shadow:0 0 0 4px rgba(231,43,85,.12); }
.audio-comment-watchers { color:#a1aec3; font-size:.7rem; white-space:nowrap; }
.audio-comment-form { position:sticky; bottom:0; z-index:4; grid-template-columns:minmax(0,1fr) 42px; align-items:center; gap:8px; margin:0 -2px; padding:8px 2px calc(8px + env(safe-area-inset-bottom)); background:linear-gradient(180deg,rgba(5,10,19,.82),#050a13 36%); }
.audio-comment-form textarea { min-height:42px; max-height:100px; resize:vertical; padding:10px 13px; border-color:#26364e; border-radius:999px; color:#f4f6ff; background:#0b1726; font-size:.78rem; }
.audio-comment-form textarea::placeholder { color:#8290a7; }
.audio-comment-form textarea:focus { outline:2px solid rgba(97,74,240,.45); outline-offset:1px; }
.audio-comment-form .audio-comment-send { display:grid; width:42px; min-height:42px; place-items:center; justify-self:stretch; padding:0; border:0; border-radius:50%; color:#fff; background:#5638ef; cursor:pointer; }
.audio-comment-send svg { width:20px; height:20px; }
.audio-comment-list { gap:10px; }
.audio-comment { display:grid; grid-template-columns:33px minmax(0,1fr); gap:9px; padding:0; border:0; border-radius:0; background:transparent; }
.audio-comment-avatar { display:grid; width:32px; height:32px; place-items:center; border:1px solid rgba(151,129,255,.28); border-radius:50%; color:#e2dcff; background:linear-gradient(145deg,#4a38d3,#25206d); font-size:1.15rem; }
.audio-comment-message { min-width:0; padding:8px 11px; border:1px solid #1c2b40; border-radius:6px 14px 14px 14px; background:#0a1422; }
.audio-comment-byline { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:3px; color:#b5aaff; font-size:.7rem; font-weight:750; }
.audio-comment-byline time { margin:0; color:#78869d; font-size:.64rem; }
.audio-comment-message > p { margin:0; color:#e3e8f2; font-size:.79rem; line-height:1.42; overflow-wrap:anywhere; }
.audio-comment-empty { margin:0; padding:16px; border:1px dashed #26364e; border-radius:13px; color:#9ca9bd; font-size:.79rem; text-align:center; }
.audio-listener-page .audio-preview-notice { margin-top:13px; border-color:#1d2b40; color:#94a2b8; background:#091320; }
.audio-listener-page .audio-service-error { border-color:rgba(231,76,105,.45); color:#ffd4dc; background:rgba(120,24,49,.26); }
@media (max-width:500px) {
  .audio-listener-content { padding:11px 13px 22px; }
  .audio-listener-art { min-height:172px; margin-bottom:14px; border-radius:15px; }
  .audio-listener-body { gap:13px; }
  .audio-listener-title-row h1 { font-size:1.34rem; }
  .audio-listener-player { padding:11px; }
  .audio-listener-waveform { height:42px; gap:2px; }
  .audio-player-control-row { gap:8px; }
  .audio-player-volume { min-width:54px; }
  .audio-reactions { gap:6px; }
  .audio-reaction-button { gap:4px; font-size:.69rem; }
  .audio-reaction-count { font-size:.62rem; }
}
@media (max-width:360px) {
  .audio-listener-header { gap:7px; padding-right:10px; padding-left:10px; }
  .audio-listener-brand { gap:7px; }
  .audio-listener-brand img { width:38px; height:38px; }
  .audio-player-control-row { gap:6px; }
  .audio-player-control { width:35px; height:35px; }
  .audio-player-toggle-audio-playback { width:40px; height:40px; }
  .audio-listener-time, .audio-listener-timer { font-size:.66rem; }
  .audio-reaction-button { flex-direction:column; gap:2px; min-height:48px; padding:5px 3px; }
}
.audio-live-join-overlay { position:fixed; inset:calc(66px + env(safe-area-inset-top)) 0 0; z-index:7; display:grid; place-items:center; padding:20px; background:rgba(5,10,19,.58); backdrop-filter:blur(2px); }
.audio-live-join-panel { display:grid; justify-items:center; gap:14px; width:min(100%,420px); padding:22px 24px; border:1px solid rgba(255,255,255,.13); border-radius:20px; color:#f3f5fb; background:rgba(7,15,28,.78); text-align:center; box-shadow:0 18px 55px rgba(0,0,0,.32); }
.audio-live-join-spinner { width:42px; height:42px; border:3px solid rgba(185,173,255,.2); border-top-color:#b3a6ff; border-right-color:#8976ff; border-radius:50%; animation:audio-live-join-spin .85s linear infinite; }
.audio-live-join-error-mark { display:grid; width:42px; height:42px; place-items:center; border:1px solid rgba(255,176,188,.4); border-radius:50%; color:#ffd4dc; background:rgba(120,24,49,.32); font-size:1.2rem; font-weight:800; }
.audio-live-join-message { max-width:36ch; margin:0; color:#e3e8f2; font-size:.9rem; line-height:1.5; }
.audio-live-join-retry { min-height:42px; padding:9px 18px; border:1px solid rgba(179,166,255,.42); border-radius:12px; color:#fff; background:#644fe4; font:inherit; font-size:.87rem; font-weight:750; cursor:pointer; }
.audio-live-join-retry:hover { background:#7964f4; }
.audio-live-join-retry:focus-visible { outline:2px solid #c7beff; outline-offset:3px; }
@keyframes audio-live-join-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) {
  .audio-listener-page *, .audio-listener-header * { scroll-behavior:auto; transition-duration:.01ms; }
  .audio-listener-waveform span { transition:none; }
  .audio-live-join-spinner { animation:none; }
}

/* Mixlr-style listener: circular spinning artwork, left-to-right wave, emoji bursts */
.audio-listener-disc { border-radius: 50%; aspect-ratio: 1; width: min(72vw, 300px); min-height: 0; max-height: none; margin: 8px auto 18px; border: 0; box-shadow: 0 10px 40px rgba(0,0,0,.35); background: radial-gradient(circle, #1d2a45 0 28%, #0c1322 29% 100%); }
.audio-listener-disc .audio-listener-disc-image { width: 100%; height: 100%; max-height: none; border-radius: 50%; object-fit: cover; animation: audio-disc-spin 18s linear infinite; }
.audio-listener-disc.audio-listener-art-empty .audio-listener-art-placeholder { animation: audio-disc-spin 18s linear infinite; }
@keyframes audio-disc-spin { to { transform: rotate(360deg); } }
.audio-listener-waveform span { --i: 0; animation: audio-wave-travel 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * -0.04s); transform-origin: center; }
.audio-listener-waveform span.is-played { animation-play-state: paused; }
@keyframes audio-wave-travel { 0%, 100% { filter: brightness(.9); } 50% { filter: brightness(1.35); } }
.audio-listener-waveform.is-playing span { animation-duration: 1s; }
.audio-like-button svg { width: 18px; height: 18px; vertical-align: middle; }
.audio-like-button[aria-pressed="true"] { color: #6fa8ff; border-color: #6fa8ff; }
.audio-like-button[aria-pressed="true"] svg { transform: scale(1.15); }
.audio-burst-button { position: relative; }
.audio-burst-button:active .audio-reaction-emoji { transform: scale(1.3); }
.audio-reaction-emoji { display: inline-block; transition: transform .12s ease; }
.audio-float-emoji { position: absolute; z-index: 30; pointer-events: none; font-size: 28px; animation: audio-float-up 1.4s ease-out forwards; }
@keyframes audio-float-up { 0% { opacity: 1; transform: translate(-50%, 0) scale(.8); } 100% { opacity: 0; transform: translate(calc(-50% + var(--drift, 0px)), -150px) scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .audio-listener-disc .audio-listener-disc-image, .audio-listener-disc.audio-listener-art-empty .audio-listener-art-placeholder, .audio-float-emoji { animation: none; } }

/* Audiomack-style listener: square art, grey uploader line, pill actions, bar-wave tracker, round transport */
.audio-listener-square { width: 100%; aspect-ratio: 1; height: auto; min-height: 0; max-height: none; margin: 0 0 16px; border: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 34px rgba(0,0,0,.35); background: linear-gradient(160deg,#5a1830,#2a0a16); }
.audio-listener-square:not(.audio-listener-disc) img { width: 100%; height: 100%; object-fit: cover; display: block; animation: none; }
.audio-listener-square.audio-listener-disc { width: min(72vw, 300px); aspect-ratio: 1 / 1; height: auto; margin: 8px auto 18px; border-radius: 50%; }
.audio-listener-disc .audio-listener-disc-image { animation: audio-disc-spin 18s linear infinite; }
.audio-listener-speaker { margin: 0; color: #8d8f96; font-size: .8rem; font-weight: 600; letter-spacing: .02em; }
.audio-listener-title-row { display: grid; gap: 6px; }
.audio-listener-title-row h1 { margin: 0; font-size: 1.35rem; line-height: 1.25; color: #f6efe2; }
.audio-listener-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 2px 0 6px; }
.audio-listener-pills .audio-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 7px 16px; border: 1px solid rgba(212,175,55,.45); border-radius: 999px; background: transparent; color: #e9dcc0; font: inherit; font-size: .8rem; font-weight: 650; cursor: pointer; }
.audio-listener-pills .audio-pill:hover:not(:disabled) { background: rgba(212,175,55,.12); }
.audio-listener-pills .audio-pill:disabled { opacity: .45; cursor: not-allowed; }
.audio-listener-pills .audio-pill.is-done { color: #d4af37; }
.audio-listener-pills .audio-like-button[aria-pressed="true"] { background: rgba(212,175,55,.2); border-color: #d4af37; color: #f6efe2; }
.audio-listener-pills .audio-like-button svg, .audio-listener-pills .audio-share-button svg { width: 15px; height: 15px; }
.audio-listener-pills .audio-reaction-count { font-size: .7rem; color: #b9a784; }
.audio-listener-player { padding: 14px; border: 1px solid rgba(212,175,55,.2); border-radius: 16px; background: #1a0a12; }
.audio-listener-controls { display: grid; gap: 10px; }
.audio-listener-waveform { position: relative; display: flex; align-items: center; gap: 2px; width: 100%; height: 76px; cursor: pointer; }
.audio-listener-waveform span { flex: 1 1 0; min-width: 2px; max-width: 6px; height: 12%; border-radius: 2px; background: #5b4a52; transition: background .15s ease; }
.audio-listener-waveform span.is-played { background: #d4af37; }
.audio-listener-waveform span.is-active { background: #d4af37; }
.audio-listener-seek { position: absolute; left: 0; right: 0; width: 100%; opacity: 0; height: 0; pointer-events: none; }
.audio-listener-times { display: flex; justify-content: space-between; align-items: center; color: #b9a784; font-size: .72rem; font-variant-numeric: tabular-nums; }
.audio-listener-times .audio-listener-time { color: #b9a784; }
.audio-listener-transport { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 2px; }
.audio-listener-skip { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: #e9dcc0; cursor: pointer; }
.audio-listener-skip svg { width: 26px; height: 26px; }
.audio-listener-skip:disabled { opacity: .35; cursor: not-allowed; }
.audio-listener-play { display: grid; place-items: center; width: 68px; height: 68px; border: 0; border-radius: 50%; background: #d4af37; color: #2a0a16; font-size: 1.4rem; cursor: pointer; box-shadow: 0 6px 18px rgba(212,175,55,.35); }
.audio-listener-secondary { display: flex; align-items: center; justify-content: center; gap: 12px; }
.audio-listener-secondary .audio-player-volume { min-width: 90px; }
.audio-listener-player-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
@media (max-width: 500px) {
  .audio-listener-title-row h1 { font-size: 1.2rem; }
  .audio-listener-waveform { height: 60px; }
  .audio-listener-play { width: 60px; height: 60px; }
  .audio-listener-pills .audio-pill { padding: 6px 12px; font-size: .74rem; }
}

/* ===== v1.1.106: Audiomack-style tall waveform, spinning disc, live-ended banner, stream loading/offline states ===== */
.audio-listener-waveform { position: relative; display: flex; align-items: center; gap: 2px; width: 100%; height: 150px; overflow: hidden; cursor: pointer; }
.audio-listener-waveform span { flex: 1 1 0; min-width: 2px; width: auto; height: 20%; border-radius: 2px; background: linear-gradient(180deg, #b8a8ff, #5c41f0); opacity: .55; transition: height .12s linear, background .12s ease, opacity .12s ease; }
.audio-listener-waveform span.is-played { background: linear-gradient(180deg, #ffffff, #8f78ff); opacity: 1; }
.audio-listener-waveform span.is-active { opacity: 1; }
@media (max-width: 640px) { .audio-listener-waveform { height: 120px; gap: 1px; } }
.audio-listener-times { display: flex; justify-content: space-between; font-size: .78rem; color: #cfc7f5; margin-top: 6px; }

.audio-listener-disc { transition: transform .4s ease; }
.audio-listener-disc .audio-listener-disc-image { border-radius: 50%; animation: audio-disc-spin 24s linear infinite; width: 100%; height: 100%; object-fit: cover; }
.audio-listener-disc.is-paused .audio-listener-disc-image { animation-play-state: paused; }
@keyframes audio-disc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .audio-listener-disc .audio-listener-disc-image { animation: none; } }

.audio-listener-pills { display: flex; justify-content: center; }
.audio-listener-pills .audio-like-button { min-width: 120px; justify-content: center; }

.audio-live-ended-banner { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; padding: 16px 18px; border: 1px solid #d4af37; border-left: 6px solid #b02a3a; border-radius: 14px; background: linear-gradient(135deg, #3a0f1a, #1b0710); color: #f6efe2; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.audio-live-ended-banner strong { display: block; font-size: 1.05rem; color: #ffd9a0; margin-bottom: 3px; }
.audio-live-ended-banner span { font-size: .9rem; opacity: .9; }
.audio-live-ended-icon { display: grid; flex: 0 0 auto; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: #b02a3a; color: #fff; font-size: .9rem; }

.audio-stream-loading-overlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(12, 6, 10, .55); backdrop-filter: blur(3px); }
.audio-stream-loading-panel { display: grid; justify-items: center; gap: 12px; padding: 22px 26px; border-radius: 16px; background: rgba(30, 14, 22, .85); color: #f6efe2; }
.audio-stream-loading-panel p { margin: 0; font-size: .92rem; letter-spacing: .02em; }
.audio-stream-loading-ring { width: 42px; height: 42px; border: 3px solid rgba(212,175,55,.22); border-top-color: #d4af37; border-radius: 50%; animation: audio-live-join-spin .85s linear infinite; }
@media (prefers-reduced-motion: reduce) { .audio-stream-loading-ring { animation: none; } }

.audio-stream-network-error { margin: 0 0 14px; padding: 16px 18px; border: 1px solid #b02a3a; border-radius: 14px; background: #2a0c15; color: #f6efe2; }
.audio-stream-network-error strong { display: block; color: #ffb3bc; margin-bottom: 4px; }
.audio-stream-network-error p { margin: 0 0 12px; font-size: .9rem; opacity: .92; }
.audio-stream-network-actions { display: flex; flex-wrap: wrap; gap: 8px; }


.audio-stream-loading-overlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(10, 4, 12, .45); }
.audio-stream-loading-panel { display: grid; justify-items: center; gap: 12px; color: #f3e6c4; font-size: .9rem; }
.audio-stream-loading-ring { width: 46px; height: 46px; border-radius: 50%; border: 4px solid rgba(216, 178, 98, .25); border-top-color: #d8b262; animation: audio-stream-spin .9s linear infinite; }
@keyframes audio-stream-spin { to { transform: rotate(360deg); } }
.audio-listener-disc { border-radius: 50%; aspect-ratio: 1 / 1; }

/* Listener fullscreen burst fallback when no listener page wraps the bursts */
body > .audio-float-emoji { position: fixed; z-index: 2000; }