:root {
  --bg: #fbf5ea;
  --surface: #fffaf2;
  --surface-variant: #f2e5cf;
  --text: #241f18;
  --muted: #6e6256;
  --primary: #6f4e2f;
  --secondary: #8a6b38;
  --line: rgba(83, 62, 39, .16);
  --shadow: 0 3px 10px rgba(80, 57, 28, .10);
  --radius: 18px;
  --ui-scale: 1;
  --song-text-size: 20px;
  --info-text-size: 16px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
body { overflow-x: hidden; font-size: calc(16px * var(--ui-scale)); }
button, input, select, textarea { font: inherit; }
button { color: inherit; -webkit-tap-highlight-color: transparent; }
.app-shell { min-height: 100svh; max-width: 620px; margin: 0 auto; background: var(--bg); }
.main { min-height: 100svh; padding: 12px 12px calc(84px + env(safe-area-inset-bottom)); }
.loading-card, .error-card, .panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow);
}
.error-card h1 { margin-top: 0; }
.error-details { white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .82rem; color: #9b3128; background: rgba(155,49,40,.08); padding: 10px; border-radius: 12px; overflow:auto; }
.bottom-nav {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 30;
  width: min(620px, 100vw); display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 7px 5px calc(7px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface) 96%, transparent); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(0,0,0,.08);
}
.nav-item { border: 0; background: transparent; color: var(--muted); min-height: 50px; display: grid; gap: 2px; place-items: center; border-radius: 14px; }
.nav-item span { font-size: 1.28rem; line-height: 1; }
.nav-item small { font-size: .72rem; }
.nav-item.active { color: var(--primary); font-weight: 800; background: color-mix(in srgb, var(--surface-variant) 65%, transparent); }
.search-area { position: sticky; top: 0; z-index: 10; padding: 0 0 8px; background: linear-gradient(var(--bg) 84%, color-mix(in srgb, var(--bg) 0%, transparent)); }
.search-box { position: relative; }
.search-box input {
  width: 100%; min-height: 50px; border: 1px solid var(--line); border-radius: 18px; outline: none;
  background: var(--surface); color: var(--text); padding: 0 46px 0 42px; box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.search-box::before { content: "⌕"; position: absolute; left: 15px; top: 12px; color: var(--muted); pointer-events: none; }
.clear-search { position: absolute; top: 7px; right: 7px; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 8px 13px; white-space: nowrap; color: var(--text);
}
.chip.active { background: var(--surface-variant); border-color: color-mix(in srgb, var(--primary) 38%, var(--line)); color: var(--primary); font-weight: 800; }
.section-title { margin: 4px 4px 12px; font-size: 1.24rem; }
.count-line { color: var(--muted); font-size: .9rem; margin: 4px 4px 10px; }
.song-list, .plain-list { display: grid; gap: 8px; }
.song-card {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 78px; gap: 0;
  padding: 12px 0 12px 14px; border: 0; width: 100%; text-align: left; color: var(--text);
  background: var(--card-bg, var(--surface-variant)); border-radius: 18px; box-shadow: var(--shadow); cursor: pointer;
}
.song-number { font-weight: 800; font-size: 1rem; padding-top: 1px; }
.song-main { min-width: 0; padding-right: 6px; display: grid; gap: 5px; }
.song-title { font-weight: 700; font-size: 1.06rem; line-height: 1.15; overflow-wrap: anywhere; }
.song-meta { color: var(--muted); font-size: .84rem; line-height: 1.25; }
.small-badge { display: inline-flex; width: fit-content; border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; color: var(--muted); font-size: .78rem; }
.authors-line { display: grid; gap: 2px; margin-top: 1px; }
.author-inline { display: flex; align-items: center; gap: 4px; min-width: 0; color: var(--text); font-size: .84rem; line-height: 1.25; }
.author-name { overflow-wrap: anywhere; }
.author-name.link { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.card-actions { width: 78px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; }
.audio-row { display: flex; gap: 0; align-items: center; justify-content: center; }
.icon-action, .author-info-dot {
  border: 0; background: transparent; display: inline-grid; place-items: center; border-radius: 999px; cursor: pointer;
}
.icon-action { width: 76px; height: 36px; font-size: 1.15rem; }
.icon-action.compact { width: 38px; }
.icon-action.info-mini { width: 32px; height: 30px; min-width: 32px; border: 1px solid color-mix(in srgb, var(--primary) 42%, var(--line)); font-size: .78rem; font-weight: 800; color: var(--primary); background: color-mix(in srgb, var(--surface) 82%, transparent); }
.icon-action:active, .author-info-dot:active, .chip:active, .nav-item:active, .list-row:active, .song-card:active { transform: scale(.985); }
.icon-action.active, .author-info-dot { color: var(--primary); font-weight: 900; }
.icon-action.playing, .action-btn.audio-btn.playing { color: inherit; font-weight: 900; }
.icon-action.favorite.active { color: #b85b36; }
.author-info-dot { width: 28px; height: 26px; flex: 0 0 auto; font-size: .78rem; border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent); }
.list-row {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-align: left; box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.list-row-title { font-weight: 700; overflow-wrap: anywhere; }
.list-row-sub { color: var(--muted); font-size: .86rem; margin-top: 3px; }
.row-actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.modal-song-row { padding: 0; overflow: hidden; }
.modal-song-title { flex: 1 1 auto; min-height: 46px; text-align: left; border: 0; background: transparent; color: inherit; padding: 12px 14px; }
.detail-screen { min-height: calc(100svh - 96px); background: color-mix(in srgb, var(--detail-bg, var(--surface-variant)) 30%, var(--bg)); margin: -12px; padding: 12px 10px calc(24px + env(safe-area-inset-bottom)); }
.detail-header-card { background: var(--detail-bg, var(--surface-variant)); border-radius: 18px; padding: 8px 12px 10px 4px; box-shadow: var(--shadow); }
.detail-title-row { display: flex; align-items: center; gap: 4px; }
.detail-title { margin: 0; font-size: 1.35rem; line-height: 1.16; font-weight: 800; }
.detail-meta { color: var(--muted); font-size: .9rem; margin-left: 32px; margin-top: 4px; }
.detail-authors { margin-left: 32px; margin-top: 4px; }
.detail-actions, .audio-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.action-btn { border: 1px solid var(--line); border-radius: 999px; background: var(--surface); padding: 9px 13px; }
.audio-time { color: var(--muted); font-size: .85rem; }
.audio-slider { width: 100%; accent-color: var(--primary); }
.bible-card { background: color-mix(in srgb, var(--surface) 60%, var(--surface-variant)); border: 1px solid var(--line); border-radius: 14px; padding: 10px; }
.song-content { display: grid; gap: 14px; margin-top: 14px; }
.stanza { white-space: pre-wrap; line-height: 1.35; font-size: var(--song-text-size); padding: 0 18px; }
.stanza .marker { font-weight: 800; }
.footnote-link { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.footnote-popup { background: color-mix(in srgb, var(--surface-variant) 92%, var(--surface)); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; margin: -6px 18px 4px; font-size: .92rem; }
.side-nav { position: fixed; top: 50%; transform: translateY(-50%); z-index: 20; width: 38px; height: 72px; border: 0; border-radius: 18px; background: color-mix(in srgb, var(--surface) 78%, transparent); box-shadow: var(--shadow); color: var(--primary); font-size: 2rem; }
.side-nav.prev { left: max(3px, calc((100vw - 620px)/2 + 3px)); }
.side-nav.next { right: max(3px, calc((100vw - 620px)/2 + 3px)); }
.modal.hidden, .hidden { display: none !important; }
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: end center; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.38); }
.modal-card { position: relative; width: min(620px, 100vw); max-height: min(88svh, 820px); background: var(--surface); color: var(--text); border-radius: 24px 24px 0 0; box-shadow: 0 -12px 32px rgba(0,0,0,.22); overflow: hidden; }
.modal-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); padding: 14px 14px 8px; }
.modal-header h2 { font-size: 1.08rem; margin: 0; }
.modal-body { max-height: calc(min(88svh, 820px) - 58px); overflow: auto; padding: 14px; line-height: 1.48; font-size: var(--info-text-size); }
.info-toolbar { display: flex; gap: 8px; flex-wrap: wrap; position: sticky; top: -14px; z-index: 2; padding: 0 0 10px; margin-bottom: 8px; background: var(--surface); }
.info-section { margin: 0 0 13px; }
.info-section h3 { margin: 0 0 5px; font-size: 1rem; color: var(--primary); }
.info-section p { margin: 0; white-space: pre-wrap; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 12px; }
.photo-card { margin: 0; }
.photo-card img { width: 100%; max-height: 230px; object-fit: contain; border-radius: 14px; background: var(--surface-variant); border: 1px solid var(--line); }
.photo-card figcaption { color: var(--muted); font-size: .82rem; margin-top: 4px; }
.settings-grid { display: grid; gap: 14px; }
.theme-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.setting-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.setting-row input[type="range"] { width: min(220px, 48vw); accent-color: var(--primary); }
.version-line { color: var(--muted); font-size: .82rem; margin-top: 10px; }
.fast-scroll { position: fixed; top: 86px; bottom: calc(86px + env(safe-area-inset-bottom)); right: max(1px, calc((100vw - 620px) / 2 + 1px)); width: 22px; z-index: 26; touch-action: none; opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.fast-scroll.visible { opacity: 1; pointer-events: auto; }
.fast-track { position: absolute; right: 3px; top: 10px; bottom: 10px; width: 5px; border-radius: 18px; background: color-mix(in srgb, var(--surface-variant) 52%, transparent); opacity: .55; }
.fast-thumb { position: absolute; right: 0; top: 10px; width: 11px; min-height: 36px; height: 12%; border-radius: 18px; background: color-mix(in srgb, var(--primary) 48%, transparent); box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.fast-thumb i { display:none; }
.empty { color: var(--muted); text-align: center; padding: 16px; }
@media (max-width: 390px) {
  .main { padding-left: 10px; padding-right: 10px; }
  .song-card { grid-template-columns: 36px minmax(0,1fr) 72px; padding-left: 12px; }
  .card-actions { width: 72px; }
  .icon-action { width: 70px; }
  .icon-action.compact { width: 35px; }
  .song-title { font-size: 1rem; }
  .nav-item small { font-size: .68rem; }
  .stanza { padding-left: 14px; padding-right: 14px; }
}

/* v8 parity fixes */
.nav-svg { display:grid; place-items:center; width: 24px; height: 24px; }
.nav-svg svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nav-item .nav-svg { font-size: 0; }
.chapter-row { background: var(--chapter-bg, var(--surface)); border-color: color-mix(in srgb, var(--primary) 12%, var(--line)); }
.icon-action { width: 36px; height: 34px; font-size: 1rem; }
.card-actions > .icon-action { width: 72px; height: 34px; }
.audio-row .icon-action.compact { width: 28px; height: 32px; min-width: 28px; }
.icon-action.info-mini { width: 23px; height: 23px; min-width: 23px; font-size: .7rem; color: var(--muted); background: transparent; border: 1px solid var(--line); font-weight: 800; }
.author-info-dot { width: 20px; height: 20px; min-width: 20px; font-size: .68rem; color: var(--muted); background: transparent; border: 1px solid var(--line); font-weight: 800; }
.modal-header .icon-action { width: 34px; height: 32px; }
.modal-title-link { border: 0; background: transparent; padding: 0; color: var(--primary); font-weight: 800; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.info-toolbar .action-btn { padding: 8px 11px; }
.info-toolbar .action-btn:disabled { opacity: .35; }
.info-nav { min-width: 38px; }
.quote-section p { white-space: pre-wrap; }
/* v9 scroll handle: chwytany jest tylko uchwyt, nie cały pasek */
.fast-scroll {
  width: 24px;
  right: max(2px, calc((100vw - 620px) / 2 + 2px));
  pointer-events: none;
  opacity: 0;
}
.fast-scroll.visible { opacity: 1; pointer-events: none; }
.fast-track {
  right: 10px;
  width: 2px;
  opacity: 0;
  pointer-events: none;
  background: transparent;
}
.fast-thumb {
  right: 3px;
  width: 18px;
  min-height: 42px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 88%, var(--surface-variant));
  border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--line));
  box-shadow: 0 3px 9px rgba(0,0,0,.18);
  pointer-events: auto;
  cursor: grab;
  display: grid;
  place-items: center;
  touch-action: none;
}
.fast-scroll:not(.visible) .fast-thumb { pointer-events: none; }
.fast-scroll.dragging .fast-thumb { cursor: grabbing; }
.fast-thumb i {
  display: block;
  width: 7px;
  height: 18px;
  border-radius: 5px;
  background: repeating-linear-gradient(
    to bottom,
    color-mix(in srgb, var(--primary) 65%, var(--muted)) 0 2px,
    transparent 2px 6px
  );
  opacity: .78;
}
@media (max-width: 390px) {
  .card-actions > .icon-action { width: 66px; }
  .icon-action.info-mini { width: 23px; min-width: 23px; }
}

/* v2 horizontal swipe fix */
.chips {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-inline: contain;
  cursor: grab;
}
.chips.dragging-x { cursor: grabbing; }
.chips .chip { flex: 0 0 auto; }


/* v2 detail/modal swipe area */
.detail-screen, .song-content, .modal-card, .modal-body {
  touch-action: pan-y;
  overscroll-behavior-x: contain;
}
.side-nav { touch-action: manipulation; }


/* v2 offline download */
.offline-box {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 86%, var(--surface-variant));
}
.offline-box p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
  font-size: calc(0.92rem * var(--ui-scale));
}
.offline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.secondary-action {
  background: transparent;
  color: var(--text);
  box-shadow: none;
}
.offline-status {
  color: var(--muted);
  font-size: calc(0.88rem * var(--ui-scale));
  line-height: 1.45;
  white-space: pre-wrap;
}
.action-btn:disabled {
  opacity: .55;
  cursor: progress;
}

/* v2 poprawki filtrów, sortowania i pauzy */
.chapter-filter-label {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  color: var(--muted);
  font-size: .92rem;
}
.chapter-select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  padding: 0 38px 0 13px;
  outline: none;
}
.audio-btn.playing,
.action-btn.audio-btn.playing,
.icon-action.audio-btn.playing {
  color: var(--text) !important;
  font-weight: 900;
}
.search-box input[type="text"]::-webkit-search-cancel-button { display: none; }
.bottom-nav { touch-action: pan-y; }

/* v2 options/update fixes */
.chapter-filter-menu {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.chapter-filter-menu summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 10px 13px;
}
.chapter-filter-menu summary::-webkit-details-marker { display: none; }
.chapter-filter-menu summary span { color: var(--muted); font-size: .9rem; }
.chapter-filter-menu summary strong { color: var(--text); font-size: .92rem; text-align: right; }
.chapter-filter-panel {
  border-top: 1px solid var(--line);
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chapter-filter-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 7px;
  max-height: 42svh;
  overflow: auto;
  padding-top: 4px;
}
.chapter-choice { justify-content: center; white-space: normal; line-height: 1.15; }
.authors-info-list { display: grid; gap: 4px; }
.info-author-row { font-size: 1rem; }
.notice-section .offline-actions { margin-top: 12px; }
.notice-size { color: var(--muted); }
html[data-theme-id="dark"] .song-card,
html[data-theme-id="contrast"] .song-card {
  background: var(--surface) !important;
  border: 1px solid var(--line);
  color: var(--text);
}
html[data-theme-id="dark"] .detail-screen,
html[data-theme-id="contrast"] .detail-screen {
  background: var(--bg) !important;
}
html[data-theme-id="dark"] .detail-header-card,
html[data-theme-id="contrast"] .detail-header-card,
html[data-theme-id="dark"] .chapter-row,
html[data-theme-id="contrast"] .chapter-row {
  background: var(--surface) !important;
  color: var(--text);
  border: 1px solid var(--line);
}
html[data-theme-id="dark"] .chip.active,
html[data-theme-id="contrast"] .chip.active,
html[data-theme-id="dark"] .nav-item.active,
html[data-theme-id="contrast"] .nav-item.active {
  background: color-mix(in srgb, var(--surface) 70%, var(--primary));
  color: var(--text);
}
html[data-theme-id="contrast"] .author-name.link,
html[data-theme-id="contrast"] .modal-title-link,
html[data-theme-id="contrast"] .info-section h3,
html[data-theme-id="contrast"] .footnote-link {
  color: #ffffff;
}

/* v2 source/index/info/photo refinements */
html { font-size: calc(16px * var(--ui-scale)); }
body { font-size: 1rem; }
.source-filter-chips { padding-top: 2px; }
.modal { place-items: center; padding: 12px; }
.modal-card {
  width: min(620px, calc(100vw - 24px));
  max-height: min(88svh, 820px);
  border-radius: 24px;
  box-shadow: 0 12px 36px rgba(0,0,0,.28);
}
.modal-body { max-height: calc(min(88svh, 820px) - 58px); }
.action-btn.icon-only {
  min-width: 42px;
  padding-left: 12px;
  padding-right: 12px;
  font-weight: 800;
  font-size: 1.05rem;
}
.modal-song-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 12px;
}
.modal-song-row .modal-song-title { padding-right: 8px; }
.modal-song-row .info-mini { margin-right: 4px; flex: 0 0 auto; }
html[data-theme-id="dark"] .list-row,
html[data-theme-id="contrast"] .list-row,
html[data-theme-id="dark"] .chapter-filter-menu,
html[data-theme-id="contrast"] .chapter-filter-menu,
html[data-theme-id="dark"] .search-box input,
html[data-theme-id="contrast"] .search-box input,
html[data-theme-id="dark"] .action-btn,
html[data-theme-id="contrast"] .action-btn {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
html[data-theme-id="contrast"] .chip.active,
html[data-theme-id="dark"] .chip.active {
  background: color-mix(in srgb, var(--primary) 20%, var(--surface)) !important;
  color: var(--text) !important;
}

/* v2 modal stack, photos, share/heart icons */
.icon-svg {
  width: 1.18em;
  height: 1.18em;
  display: inline-block;
  vertical-align: -0.18em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.heart-svg {
  width: 1.08em;
  height: 1.08em;
  stroke-width: 2;
}
.favorite.active .heart-svg,
.heart-svg.filled {
  fill: currentColor;
}
.icon-action.favorite {
  display: inline-grid;
  place-items: center;
}
.action-btn.icon-only.share-icon {
  display: inline-grid;
  place-items: center;
}
.photo-zoom-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: zoom-in;
}
.photo-zoom-button img { display: block; }
.photo-zoom {
  margin: 0;
  display: grid;
  gap: 10px;
  justify-items: center;
}
.photo-zoom img {
  max-width: 100%;
  max-height: calc(88svh - 120px);
  object-fit: contain;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface-variant);
}
.photo-zoom figcaption {
  color: var(--muted);
  font-size: .9rem;
  text-align: center;
}


/* app layout/history/data fix */
.song-card {
  grid-template-columns: 44px minmax(0, 1fr) 48px;
  padding-right: 8px;
}
.card-actions {
  width: 48px;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding-top: 1px;
}
.card-actions > .icon-action,
.card-actions .audio-btn,
.card-actions .favorite {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  display: inline-grid;
  place-items: center;
}
.audio-row {
  gap: 4px;
  flex-wrap: wrap;
  width: 42px;
}
.audio-row .icon-action.compact {
  width: 28px;
  min-width: 28px;
  height: 30px;
}
.card-actions .info-mini {
  width: 24px;
  min-width: 24px;
  height: 24px;
  font-size: .72rem;
}
.card-actions .heart-svg {
  width: 1rem;
  height: 1rem;
}
.authors-line {
  display: grid;
  gap: 3px;
  margin-top: 1px;
}
.author-inline {
  display: block;
  min-width: 0;
  color: var(--text);
  font-size: .84rem;
  line-height: 1.28;
}
.author-name {
  overflow-wrap: anywhere;
}
.author-info-dot {
  display: inline-grid;
  vertical-align: -0.12em;
  margin-left: .28em;
  width: 1.25em;
  min-width: 1.25em;
  height: 1.25em;
  font-size: .72em;
  line-height: 1;
  padding: 0;
}
@media (max-width: 390px) {
  .song-card { grid-template-columns: 38px minmax(0, 1fr) 44px; padding-right: 7px; }
  .card-actions { width: 44px; }
  .card-actions > .icon-action,
  .card-actions .audio-btn,
  .card-actions .favorite { width: 30px; min-width: 30px; height: 30px; }
}

/* author/filter/index/desktop fix */
.author-name-button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.author-name-button.link {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.author-name-button:active { transform: none; opacity: .78; }
.card-actions { gap: 8px; }
.card-actions > .icon-action,
.card-actions .audio-btn,
.card-actions .favorite {
  width: 30px;
  min-width: 30px;
  height: 30px;
}
.card-actions .info-mini {
  width: 22px;
  min-width: 22px;
  height: 22px;
  font-size: .68rem;
}
.card-actions .heart-svg { width: .96rem; height: .96rem; }
.audio-row .icon-action.compact { width: 27px; min-width: 27px; height: 28px; }
.author-info-dot {
  width: 1.15em;
  min-width: 1.15em;
  height: 1.15em;
  font-size: .66em;
  margin-left: .22em;
}
.side-nav {
  width: 30px;
  height: 58px;
  border-radius: 15px;
  font-size: 1.65rem;
  background: color-mix(in srgb, var(--surface) 48%, transparent);
  box-shadow: 0 2px 7px rgba(0,0,0,.10);
  opacity: .54;
}
.side-nav:active, .side-nav:hover { opacity: .88; }
.side-nav.prev { left: max(0px, calc((100vw - 620px)/2 + 0px)); }
.side-nav.next { right: max(0px, calc((100vw - 620px)/2 + 0px)); }
.chapter-filter-actions {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding-top: 6px;
}
.chapter-filter-actions .action-btn { padding: 7px 13px; }
.scroll-hint-wrap {
  position: relative;
  margin-right: -3px;
}
.scroll-hint-wrap::after {
  content: '›';
  position: absolute;
  right: 0;
  top: 6px;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 24px;
  color: var(--muted);
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--bg) 62%);
  opacity: .72;
  font-weight: 800;
}
.index-mode-chips, .source-filter-chips { scroll-padding-inline: 28px; padding-right: 28px; }
@media (min-width: 920px) {
  .app-shell {
    max-width: calc(100vw - 112px);
    margin-left: 96px;
    margin-right: 16px;
  }
  .main {
    max-width: 980px;
    margin: 0 auto;
    padding: 18px 22px 34px;
  }
  .bottom-nav {
    left: 0;
    top: 0;
    bottom: 0;
    transform: none;
    width: 88px;
    grid-template-columns: 1fr;
    grid-auto-rows: 82px;
    align-content: start;
    padding: 14px 8px;
    border-top: 0;
    border-right: 1px solid var(--line);
    box-shadow: 6px 0 18px rgba(0,0,0,.08);
  }
  .nav-item { min-height: 70px; }
  .song-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .search-area { top: 0; }
  .side-nav.prev { left: 100px; }
  .side-nav.next { right: 16px; }
  .modal-card { width: min(760px, calc(100vw - 144px)); }
  .fast-scroll { right: 14px; }
}


/* info/layout/history fix 20260609 */
.author-inline {
  display: flex !important;
  align-items: center !important;
  column-gap: .28em;
  row-gap: .12em;
  min-width: 0;
}
.author-name-button {
  min-width: 0;
  max-width: 100%;
  line-height: 1.28;
}
.author-info-dot {
  align-self: center !important;
  display: inline-grid !important;
  place-items: center !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  transform: translateY(-.02em);
}
.info-author-row .author-info-dot { margin-top: 0; }

.action-btn.audio-btn.playing,
.icon-action.audio-btn.playing,
.audio-btn.playing {
  font-weight: 500 !important;
}
.action-btn.audio-btn { font-weight: 500; }
.info-action {
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  font-weight: 800;
  font-style: normal;
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface);
}
.copy-svg { stroke-width: 1.9; }
.copy-icon { display: inline-grid; place-items: center; }

.modal-card { overflow: hidden; }
.modal-side-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 115;
  width: 31px;
  height: 58px;
  border: 0;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  color: var(--primary);
  box-shadow: 0 2px 8px rgba(0,0,0,.14);
  font-size: 1.7rem;
  opacity: .66;
}
.modal-side-nav.prev { left: max(4px, calc((100vw - 620px)/2 + 4px)); }
.modal-side-nav.next { right: max(4px, calc((100vw - 620px)/2 + 4px)); }
@media (max-width: 760px) {
  .info-toolbar .info-nav { display: none; }
}
@media (min-width: 761px) {
  .modal-side-nav { display: none; }
}

@media (min-width: 920px) {
  .app-shell {
    max-width: none;
    width: calc(100vw - 96px);
    margin-left: 96px;
    margin-right: 0;
  }
  .main {
    max-width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
  }
  .detail-screen {
    max-width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
    border-radius: 22px;
  }
  .side-nav.prev {
    left: max(100px, calc(96px + ((100vw - 112px - var(--content-width)) / 2) + 6px));
  }
  .side-nav.next {
    right: max(16px, calc(16px + ((100vw - 112px - var(--content-width)) / 2) + 6px));
  }
  .modal-card {
    width: min(var(--content-width), calc(100vw - 144px));
  }
  .wide-only-setting { display: flex; }
}
@media (max-width: 919px) {
  .wide-only-setting { display: none; }
}
@media (min-width: 1260px) {
  .song-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .detail-screen .song-list,
  .detail-screen + .song-list {
    grid-template-columns: 1fr;
  }
}


/* pwin-app-pwa-v2-source-swipe-icon-perf-fix-20260609: back/s arrows, author info icon, swipe UX */
.detail-title-row .compact {
  flex: 0 0 36px;
  height: 36px;
  font-size: 1.55rem;
  line-height: 1;
}
.author-inline {
  align-items: center !important;
  display: inline-flex !important;
  flex-wrap: nowrap;
  max-width: 100%;
}
.author-name-button {
  display: inline;
  min-width: 0;
}
.author-info-dot {
  display: inline-grid !important;
  place-items: center !important;
  width: 1.28em !important;
  min-width: 1.28em !important;
  height: 1.28em !important;
  padding: 0 !important;
  margin-left: .20em !important;
  align-self: center !important;
  vertical-align: middle !important;
  transform: translateY(-.03em) !important;
  border-radius: 999px;
}
.info-dot-svg {
  width: 1.22em;
  height: 1.22em;
  display: block;
  overflow: visible;
}
.info-dot-svg circle:first-child {
  fill: color-mix(in srgb, var(--primary) 8%, transparent);
  stroke: currentColor;
  stroke-width: 1.35;
}
.info-dot-svg path {
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  fill: none;
}
.info-dot-svg .info-dot-mark {
  fill: currentColor;
  stroke: none;
}
.detail-screen, .modal-card, .main {
  touch-action: pan-y;
}
.side-nav {
  width: 28px;
  height: 54px;
  font-size: 1.55rem;
  opacity: .48;
}
.side-nav:hover, .side-nav:active { opacity: .82; }
@media (min-width: 920px) {
  .side-nav.prev {
    left: max(100px, calc(96px + ((100vw - 112px - var(--content-width)) / 2) - 10px));
  }
  .side-nav.next {
    right: max(16px, calc(16px + ((100vw - 112px - var(--content-width)) / 2) - 10px));
  }
}


/* pwin-app-pwa-v2-source-swipe-icon-perf-fix-20260609 */
.audio-state-svg {
  width: 1.05em;
  height: 1.05em;
  display: inline-block;
  vertical-align: -0.14em;
  fill: currentColor;
  stroke: none;
  flex: 0 0 auto;
}
.audio-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: .38em;
  font-weight: 500 !important;
}
.icon-action.audio-btn { padding: 0; }
.icon-action.audio-btn .audio-state-svg { width: 1.03rem; height: 1.03rem; }
.action-btn.audio-btn .audio-state-svg { width: .98rem; height: .98rem; }
.audio-label { font-weight: 500; }

.author-inline {
  display: inline !important;
  max-width: 100%;
  line-height: 1.28;
}
.author-name-button {
  display: inline !important;
  max-width: 100%;
  line-height: inherit;
  white-space: normal;
  overflow-wrap: anywhere;
}
.author-name-button.has-info { color: var(--primary); }
.author-inline-info {
  display: inline-grid;
  place-items: center;
  width: 1.05em;
  height: 1.05em;
  margin-left: .24em;
  vertical-align: .02em;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
  font-size: .82em;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
}
.detail-authors .author-inline-info,
.song-card .author-inline-info { font-size: .78em; }
.author-info-dot {
  border: 0 !important;
  background: transparent !important;
  color: var(--primary) !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  margin-left: .24em !important;
  padding: 0 !important;
  transform: none !important;
}

.list-main { min-width: 0; flex: 1 1 auto; }
.list-row-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: .28em;
  max-width: 100%;
  min-width: 0;
}
.inline-info-mini {
  width: 1.35em !important;
  min-width: 1.35em !important;
  height: 1.35em !important;
  padding: 0 !important;
  margin-left: .16em !important;
  border: 0 !important;
  background: color-mix(in srgb, var(--primary) 10%, transparent) !important;
  color: var(--primary) !important;
  font-size: .78rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}
.author-list-row .row-actions { margin-left: .3em; }
.modal-song-row {
  justify-content: flex-start !important;
  gap: .3em !important;
  padding-right: 8px !important;
}
.modal-song-row .modal-song-title {
  flex: 0 1 auto !important;
  min-width: 0;
  padding-right: 4px !important;
}
.modal-song-row .inline-info-mini { flex: 0 0 auto !important; margin-right: 0 !important; }

.source-filter-chips .chip { max-width: min(78vw, 360px); overflow: hidden; text-overflow: ellipsis; }
.detail-screen, .modal-card, .main { touch-action: pan-y pinch-zoom; overscroll-behavior-x: contain; }
.side-nav, .modal-side-nav { touch-action: manipulation; }
@supports (content-visibility: auto) {
  .song-card, .plain-list > .list-row {
    content-visibility: auto;
    contain-intrinsic-size: 72px;
  }
}
.nav-item { contain: layout paint; }
@media (max-width: 760px) {
  .bottom-nav { will-change: transform; }
  .song-list, .plain-list { contain: layout style; }
  .chip { padding-left: 12px; padding-right: 12px; }
}

/* pwin-app-pwa-v2-scroll-guard-cancel-fix-20260619 */
.detail-layer {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow-y: auto;
  background: var(--bg);
  color: var(--text);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.detail-layer::-webkit-scrollbar { width: 0; height: 0; display: none; }
.detail-layer.hidden { display: none !important; }
.detail-layer .detail-screen {
  min-height: 100svh;
  max-width: min(var(--content-width), 100vw);
  margin: 0 auto !important;
  padding: 12px 10px calc(24px + env(safe-area-inset-bottom));
  border-radius: 0;
}
body.detail-open { overflow-x: hidden; }
@media (min-width: 920px) {
  .detail-layer {
    left: 96px;
  }
  .detail-layer .detail-screen {
    border-radius: 22px;
    margin-top: 18px !important;
    margin-bottom: 18px !important;
  }
  .detail-layer .side-nav.prev {
    left: max(100px, calc(96px + ((100vw - 112px - var(--content-width)) / 2) - 10px));
  }
  .detail-layer .side-nav.next {
    right: max(16px, calc(16px + ((100vw - 112px - var(--content-width)) / 2) - 10px));
  }
}

/* v2 index bible nested back fix */
.bible-chapter-list {
  display: grid;
  gap: 8px;
}
.bible-chapter-group {
  display: grid;
  gap: 6px;
}
.bible-chapter-row {
  background: color-mix(in srgb, var(--surface) 88%, var(--surface-variant)) !important;
}
.bible-chapter-row .bible-chapter-arrow {
  color: var(--primary);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
}
.bible-chapter-children {
  display: grid;
  gap: 6px;
  margin-left: 18px;
  padding-left: 12px;
  border-left: 2px solid color-mix(in srgb, var(--primary) 28%, var(--line));
}
.bible-child-row {
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 72%, var(--surface-variant)) !important;
}
.bible-show-all-row {
  border-color: color-mix(in srgb, var(--primary) 38%, var(--line));
}
.bible-show-all-row .list-row-title {
  color: var(--primary);
}