@import url('https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;600&family=PT+Sans:wght@400;600&family=Lora:wght@400;600&family=Merriweather:wght@400;700&family=Playfair+Display:wght@400;600&family=Open+Sans:wght@400;600&family=Roboto:wght@400;500&family=Source+Serif+Pro:wght@400;600&family=Crimson+Text:wght@400;600&family=Libre+Baskerville:wght@400;700&family=EB+Garamond:wght@400;600&family=Literata:opsz,wght@7..72,400;7..72,600&family=Noto+Serif:wght@400;600&family=Roboto+Slab:wght@400;600&family=Nunito:wght@400;600&family=Raleway:wght@400;600&family=Montserrat:wght@400;600&family=Oswald:wght@400;600&family=Yanone+Kaffeesatz:wght@400;600&family=Comfortaa:wght@400;600&family=Bad+Script&family=Marck+Script&family=Caveat:wght@400;600&family=Neucha&family=Cormorant+Garamond:wght@400;600&display=swap');

.bible-reader-page {
  max-width: 1360px;
  margin: 0 auto;
  /* Блок стихов вплотную к краям колонки; отступы только у шапки читалки */
  padding: 0.9rem 0 2rem 0;
  /* Высота липкой шкалы: та же база, что padding-top у .site-main (--site-header-h из site.js) */
  --timeline-vh: calc(100dvh - var(--site-header-h, 3.25rem) - 0.15rem);
  /* Совпадает с .verses-section — выравнивание «Библия» с названием книги и сеткой глав */
  --reader-num-col: 2.75rem;
  --reader-heading-pad: 0.375rem;
  --timeline-sidebar-w: 92px;
}

/* Селекты книга/глава вне настроек: держим в DOM для bible-reader.js (история, swipe, API). */
.bible-reader-nav-selects-host {
  display: none !important;
}

.bible-reader-settings-nav-hint {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.35;
}

/* Сильнее, чем site.css (у layout без asp-append-version кэш мог не подхватить 1rem). */
.bible-reader-page > .section-back-nav {
  margin-bottom: 16px;
  padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
  padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
}

/* Страница стиха: «Назад» слева, стрелки стихов справа в той же стилистике. */
.bible-reader-verse-page > .section-back-nav.reader-verse-top-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.bible-reader-verse-page .reader-verse-stanza-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem 0.75rem;
  margin-left: auto;
}

.bible-reader-verse-page .reader-verse-stanza-btn {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  text-align: inherit;
}

.bible-reader-verse-page .reader-verse-stanza-btn:hover {
  text-decoration: underline;
}

.bible-reader-verse-page .reader-verse-stanza-btn:disabled {
  opacity: 0.45;
  cursor: default;
  text-decoration: none;
}

.bible-reader-verse-page .reader-verse-stanza-btn:focus-visible {
  outline: 2px solid hsl(var(--gold) / 0.55);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Шапка читалки: без боковых отступов, без верхнего отступа/бордера; нижняя «линия» тоже снята. */
.bible-reader-page > .bible-reader-header {
  padding-left: 0;
  padding-right: 0;
  margin-top: 0;
  border-top: none;
  border-bottom: none;
  box-shadow: none;
}

.bible-reader-page .bible-reader-header-row {
  border: none;
  border-bottom: none;
  box-shadow: none;
}

.bible-reader-page .bible-reader-header .section-settings-title-inline {
  margin: 0;
  /* Как у .verse-book-heading: колонка номеров + тот же внутренний зазор */
  margin-left: calc(var(--reader-num-col) + var(--reader-heading-pad));
  padding: 8px 0;
  border: none;
  border-bottom: none;
  border-style: none;
  border-width: 0;
  box-shadow: none;
  text-decoration: none;
  text-decoration-line: none;
  text-underline-offset: 0;
  background-image: none;
  color: #c62828;
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.2;
}

/* Когда шкала слева открыта — сдвиг как у текста в .verse-list под таймлайном */
.bible-reader-page:has(#timelineSidebar:not(.hidden)) .bible-reader-header .section-settings-title-inline {
  margin-left: calc(var(--timeline-sidebar-w) + var(--reader-num-col) + var(--reader-heading-pad));
}

body.dark .bible-reader-page .bible-reader-header .section-settings-title-inline {
  color: #ff5252;
}

/* Закрытые dialog внутри header не должны давать «полоску» в потоке (бордер UA / артефакт). */
.bible-reader-page .bible-reader-header > dialog:not([open]) {
  display: none;
  margin: 0;
  padding: 0;
  border: none;
  max-height: 0;
  overflow: hidden;
}

@media (max-width: 768px) {
  .bible-reader-page {
    padding-left: 0;
    padding-right: 0;
  }
  .bible-reader-page .verses-section {
    border-radius: 0;
  }
}

.bible-reader-header {
  margin-bottom: 1rem;
}

.bible-reader-header h1 {
  font-size: 1.75rem;
  margin: 0 0 1rem;
}

.bible-reader-verse-page .bible-reader-header h1 {
  margin-left: 15px;
  padding-left: 0;
}

.bible-reader-verse-page .bible-reader-header {
  overflow: visible;
}

.bible-reader-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  margin-bottom: 0.75rem;
}

.bible-reader-filters label,
.bible-reader-modules label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.select-actions {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.15rem;
}

.mini-select-btn {
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  border-radius: 0.45rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.76rem;
  cursor: pointer;
}

.mini-select-btn:hover {
  border-color: hsl(var(--gold) / 0.55);
  color: hsl(var(--foreground));
  background: hsl(var(--gold) / 0.12);
}

.bible-reader-filters label span,
.bible-reader-modules label span {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
}

.bible-reader-select {
  min-width: 160px;
  padding: 0.5rem 0.75rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  font-size: 1rem;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

.bible-reader-modules {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
}

.compatibility-hint {
  margin: 0.6rem 0 0;
  font-size: 0.88rem;
  color: hsl(var(--muted-foreground));
}

.compatibility-hint.hidden {
  display: none;
}

.orthodoxy-legend {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.9rem;
  font-size: 0.82rem;
  color: hsl(var(--muted-foreground));
}

.orthodoxy-legend .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.orthodoxy-legend .legend-item i {
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid hsl(var(--border));
}

.orthodoxy-legend .legend-red i {
  background: #c72c2c;
}

.orthodoxy-legend .legend-green i {
  background: #1f8f3a;
}

.orthodoxy-legend .legend-gray i {
  background: #6b7280;
}

.orthodoxy-legend .legend-black i {
  background: #1f1f1f;
}

.bible-reader-modules .bible-reader-select.multi {
  min-width: 200px;
  max-height: 6rem;
}

.bible-reader-content {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  column-gap: 0;
}

.bible-reader-page .verses-section {
  --reader-num-col: 2.75rem;
  --verses-pad-x: 6px;
  background: hsl(var(--card));
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 12px 0 1rem;
  margin-left: -1px;
}

.timeline-sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  width: 92px;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  /* Минимум слева: 2px + safe-area; справа без внутреннего воздуха до скроллбара */
  padding: 0 0 0 max(2px, env(safe-area-inset-left, 0px));
  border-radius: 0;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border) / 0.45);
  border-right: 0;
  box-shadow: none;
  overflow: hidden;
  user-select: none;
}


.timeline-sidebar__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--border) / 0.38) transparent;
}

.timeline-sidebar__scroll::-webkit-scrollbar {
  width: 5px;
}

.timeline-sidebar__scroll::-webkit-scrollbar-track {
  background: transparent;
}

.timeline-sidebar__scroll::-webkit-scrollbar-thumb {
  background: hsl(var(--border) / 0.42);
  border-radius: 100px;
  border: 1px solid transparent;
  background-clip: padding-box;
}

.timeline-sidebar__scroll::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.35);
  background-clip: padding-box;
}

.timeline-sidebar__scroll::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}
.timeline-sidebar.hidden {
  display: none !important;
}

.timeline-sidebar__inner {
  position: relative;
  display: grid;
  /* Колонка ~ширины глифа по вертикали (до 4 букв «Откр», «1Фес»); подписи с flex-start — без пустоты слева */
  grid-template-columns: 20px 2px minmax(0, 1fr);
  grid-template-rows: auto;
  gap: 0;
  box-sizing: border-box;
  min-height: var(--timeline-rail-px, 3200px);
}

.timeline-sidebar__labels,
.timeline-sidebar__colorbar,
.timeline-sidebar__track {
  position: relative;
  min-height: 100%;
}

.timeline-sidebar__labels {
  margin: 0;
  padding: 0;
}

/* сколько линия границы книги выходит влево из колонки трека (мимо цветной полоски) */
.timeline-sidebar__track {
  --timeline-book-boundary-outdent: 11px;
  /* Убираем лишний зазор справа до скроллбара / края сайдбара */
  margin-right: -30px;
}

.timeline-sidebar__book-label {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: visible;
  pointer-events: none;
  z-index: 3;
}

.timeline-sidebar__book-label-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 12.1px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.02em;
  opacity: 1;
  text-shadow: 0 1px 1px hsl(var(--background) / 0.75);
}

.timeline-sidebar__book-band {
  position: absolute;
  left: 0;
  right: 0;
  border-radius: 1px;
  opacity: 0.88;
  box-shadow:
    inset 0 0 0 1px hsl(0 0% 100% / 0.06),
    inset 0 2px 0 hsl(var(--foreground) / 0.34),
    inset 0 -2px 0 hsl(var(--foreground) / 0.34);
}

.timeline-sidebar__track-line {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: hsl(var(--border) / 0.75);
  border-radius: 1px;
}

.timeline-sidebar__book-boundary-wrap {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
}

.timeline-sidebar__book-boundary {
  position: absolute;
  left: calc(-1 * var(--timeline-book-boundary-outdent, 11px));
  width: calc((100% + var(--timeline-book-boundary-outdent, 11px)) / 2);
  top: 0;
  right: auto;
  height: 0;
  border-top: 1.5px solid hsl(var(--foreground) / 0.62);
  pointer-events: none;
}

.timeline-sidebar__book-boundary-year {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 12.1px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: hsl(var(--muted-foreground) / 0.88);
  transition: opacity 0.18s ease-out;
  z-index: 3;
}

.timeline-sidebar__tick {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
}

.timeline-sidebar__tick-line {
  position: absolute;
  left: 0;
  top: 0;
  height: 1px;
}

/* Засечка главы: короткая, почти незаметная (без подписи) */
.timeline-sidebar__tick--chapter {
  z-index: 0;
}

.timeline-sidebar__tick--chapter .timeline-sidebar__tick-line {
  width: 4px;
  height: 1px;
  top: 0;
  left: 0;
  background: hsl(var(--muted-foreground) / 0.11);
  border-radius: 0 1px 1px 0;
  box-shadow: none;
}

/* Годовые отметки: засечка от оси, подпись по центру колонки трека */
.timeline-sidebar__tick--major {
  z-index: 1;
}

.timeline-sidebar__tick--major .timeline-sidebar__tick-line {
  width: 10px;
  height: 1px;
  top: 0;
  left: 0;
  background: hsl(var(--muted-foreground) / 0.26);
  border-radius: 0 1px 1px 0;
  box-shadow: none;
}

.timeline-sidebar__tick-label {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 12.1px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: hsl(var(--muted-foreground) / 0.82);
  /* Без transition: при скролле/overlap пересчёт частый — анимация opacity даёт мерцание */
  z-index: 1;
}

.timeline-sidebar__tick-label--faded {
  opacity: 0;
  visibility: hidden;
}

.timeline-sidebar__cursor {
  position: absolute;
  left: 0;
  z-index: 12;
  transform: translateY(-6px);
  /* Без transition по top: иначе getBoundingClientRect и fade расходятся с кадрами анимации */
  will-change: top;
  pointer-events: none;
}

.timeline-sidebar__cursor.hidden {
  display: none !important;
}

.timeline-sidebar__cursor-year {
  position: absolute;
  left: 3px;
  bottom: 15px;
  transform: translateX(0);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: hsl(var(--gold));
}

.timeline-sidebar__cursor-triangle {
  display: block;
  margin: 0;
  color: hsl(var(--gold));
  filter: drop-shadow(0 1px 2px hsl(var(--gold) / 0.45));
}

.timeline-sidebar__cursor-triangle path {
  fill: currentColor;
}

.timeline-sidebar__cursor-triangle .timeline-sidebar__cursor-stem {
  stroke: currentColor;
  fill: none;
}

.timeline-sidebar__cursor-ref {
  position: absolute;
  left: 5px;
  top: 17px;
  transform: translateX(0);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: hsl(var(--gold) / 0.78);
}

.timeline-sidebar.timeline-sidebar--modal .timeline-sidebar__cursor {
  transform: translateY(-7px);
}
.timeline-sidebar[data-current-group="pentateuch"] .timeline-sidebar__cursor-year,
.timeline-sidebar[data-current-group="pentateuch"] .timeline-sidebar__cursor-ref { color: #4a4c68; }
.timeline-sidebar[data-current-group="pentateuch"] .timeline-sidebar__cursor-triangle { color: #4a4c68; }

.timeline-sidebar[data-current-group="history-ot"] .timeline-sidebar__cursor-year,
.timeline-sidebar[data-current-group="history-ot"] .timeline-sidebar__cursor-ref { color: #6a5535; }
.timeline-sidebar[data-current-group="history-ot"] .timeline-sidebar__cursor-triangle { color: #6a5535; }

.timeline-sidebar[data-current-group="poetry"] .timeline-sidebar__cursor-year,
.timeline-sidebar[data-current-group="poetry"] .timeline-sidebar__cursor-ref { color: #1a6b3c; }
.timeline-sidebar[data-current-group="poetry"] .timeline-sidebar__cursor-triangle { color: #1a6b3c; }

.timeline-sidebar[data-current-group="major-prophets"] .timeline-sidebar__cursor-year,
.timeline-sidebar[data-current-group="major-prophets"] .timeline-sidebar__cursor-ref { color: #9a3d52; }
.timeline-sidebar[data-current-group="major-prophets"] .timeline-sidebar__cursor-triangle { color: #9a3d52; }

.timeline-sidebar[data-current-group="minor-prophets"] .timeline-sidebar__cursor-year,
.timeline-sidebar[data-current-group="minor-prophets"] .timeline-sidebar__cursor-ref { color: #5c5c1f; }
.timeline-sidebar[data-current-group="minor-prophets"] .timeline-sidebar__cursor-triangle { color: #5c5c1f; }

.timeline-sidebar[data-current-group="gospels"] .timeline-sidebar__cursor-year,
.timeline-sidebar[data-current-group="gospels"] .timeline-sidebar__cursor-ref { color: #b54a18; }
.timeline-sidebar[data-current-group="gospels"] .timeline-sidebar__cursor-triangle { color: #b54a18; }

.timeline-sidebar[data-current-group="acts"] .timeline-sidebar__cursor-year,
.timeline-sidebar[data-current-group="acts"] .timeline-sidebar__cursor-ref { color: #15788f; }
.timeline-sidebar[data-current-group="acts"] .timeline-sidebar__cursor-triangle { color: #15788f; }

.timeline-sidebar[data-current-group="pauline"] .timeline-sidebar__cursor-year,
.timeline-sidebar[data-current-group="pauline"] .timeline-sidebar__cursor-ref { color: #5a5a1c; }
.timeline-sidebar[data-current-group="pauline"] .timeline-sidebar__cursor-triangle { color: #5a5a1c; }

.timeline-sidebar[data-current-group="general-epistles"] .timeline-sidebar__cursor-year,
.timeline-sidebar[data-current-group="general-epistles"] .timeline-sidebar__cursor-ref { color: #1a6b3c; }
.timeline-sidebar[data-current-group="general-epistles"] .timeline-sidebar__cursor-triangle { color: #1a6b3c; }

.timeline-sidebar[data-current-group="revelation"] .timeline-sidebar__cursor-year,
.timeline-sidebar[data-current-group="revelation"] .timeline-sidebar__cursor-ref { color: #a83848; }
.timeline-sidebar[data-current-group="revelation"] .timeline-sidebar__cursor-triangle { color: #a83848; }

body.dark .timeline-sidebar {
  background: hsl(var(--card));
  border-color: hsl(var(--border) / 0.5);
  box-shadow: none;
}

body.dark .timeline-sidebar__track-line {
  background: hsl(var(--border) / 0.75);
}

body.dark .timeline-sidebar__book-boundary {
  border-top-color: hsl(0 0% 100% / 0.62);
}

body.dark .timeline-sidebar__book-boundary-year {
  color: hsl(var(--muted-foreground) / 0.95);
}

body.dark .timeline-sidebar__tick-label {
  color: hsl(var(--muted-foreground) / 0.95);
}

body.dark .timeline-sidebar__scroll {
  scrollbar-color: hsl(var(--border) / 0.48) transparent;
}

body.dark .timeline-sidebar__scroll::-webkit-scrollbar-thumb {
  background: hsl(var(--border) / 0.52);
  background-clip: padding-box;
}

body.dark .timeline-sidebar__scroll::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.38);
  background-clip: padding-box;
}

body.dark .timeline-sidebar__book-band {
  box-shadow:
    inset 0 0 0 1px hsl(0 0% 100% / 0.04),
    inset 0 2px 0 hsl(0 0% 100% / 0.36),
    inset 0 -2px 0 hsl(0 0% 100% / 0.36);
}

body.dark .timeline-sidebar__tick--chapter .timeline-sidebar__tick-line {
  background: hsl(var(--muted-foreground) / 0.13);
}

body.dark .timeline-sidebar__tick--major .timeline-sidebar__tick-line {
  background: hsl(var(--muted-foreground) / 0.32);
}

body.dark .timeline-sidebar__tick-label--faded {
  opacity: 0;
  visibility: hidden;
}

body.dark .timeline-sidebar[data-current-group="pentateuch"] .timeline-sidebar__cursor-year,
body.dark .timeline-sidebar[data-current-group="pentateuch"] .timeline-sidebar__cursor-ref { color: #a8a8cc; }
body.dark .timeline-sidebar[data-current-group="pentateuch"] .timeline-sidebar__cursor-triangle { color: #a8a8cc; }

body.dark .timeline-sidebar[data-current-group="history-ot"] .timeline-sidebar__cursor-year,
body.dark .timeline-sidebar[data-current-group="history-ot"] .timeline-sidebar__cursor-ref { color: #c4a070; }
body.dark .timeline-sidebar[data-current-group="history-ot"] .timeline-sidebar__cursor-triangle { color: #c4a070; }

body.dark .timeline-sidebar[data-current-group="poetry"] .timeline-sidebar__cursor-year,
body.dark .timeline-sidebar[data-current-group="poetry"] .timeline-sidebar__cursor-ref { color: #3cd878; }
body.dark .timeline-sidebar[data-current-group="poetry"] .timeline-sidebar__cursor-triangle { color: #3cd878; }

body.dark .timeline-sidebar[data-current-group="major-prophets"] .timeline-sidebar__cursor-year,
body.dark .timeline-sidebar[data-current-group="major-prophets"] .timeline-sidebar__cursor-ref { color: #e88898; }
body.dark .timeline-sidebar[data-current-group="major-prophets"] .timeline-sidebar__cursor-triangle { color: #e88898; }

body.dark .timeline-sidebar[data-current-group="minor-prophets"] .timeline-sidebar__cursor-year,
body.dark .timeline-sidebar[data-current-group="minor-prophets"] .timeline-sidebar__cursor-ref { color: #d8d860; }
body.dark .timeline-sidebar[data-current-group="minor-prophets"] .timeline-sidebar__cursor-triangle { color: #d8d860; }

body.dark .timeline-sidebar[data-current-group="gospels"] .timeline-sidebar__cursor-year,
body.dark .timeline-sidebar[data-current-group="gospels"] .timeline-sidebar__cursor-ref { color: #f08850; }
body.dark .timeline-sidebar[data-current-group="gospels"] .timeline-sidebar__cursor-triangle { color: #f08850; }

body.dark .timeline-sidebar[data-current-group="acts"] .timeline-sidebar__cursor-year,
body.dark .timeline-sidebar[data-current-group="acts"] .timeline-sidebar__cursor-ref { color: #50d0f0; }
body.dark .timeline-sidebar[data-current-group="acts"] .timeline-sidebar__cursor-triangle { color: #50d0f0; }

body.dark .timeline-sidebar[data-current-group="pauline"] .timeline-sidebar__cursor-year,
body.dark .timeline-sidebar[data-current-group="pauline"] .timeline-sidebar__cursor-ref { color: #d8d860; }
body.dark .timeline-sidebar[data-current-group="pauline"] .timeline-sidebar__cursor-triangle { color: #d8d860; }

body.dark .timeline-sidebar[data-current-group="general-epistles"] .timeline-sidebar__cursor-year,
body.dark .timeline-sidebar[data-current-group="general-epistles"] .timeline-sidebar__cursor-ref { color: #3cd878; }
body.dark .timeline-sidebar[data-current-group="general-epistles"] .timeline-sidebar__cursor-triangle { color: #3cd878; }

body.dark .timeline-sidebar[data-current-group="revelation"] .timeline-sidebar__cursor-year,
body.dark .timeline-sidebar[data-current-group="revelation"] .timeline-sidebar__cursor-ref { color: #f07080; }
body.dark .timeline-sidebar[data-current-group="revelation"] .timeline-sidebar__cursor-triangle { color: #f07080; }


.timeline-mobile-trigger {
  display: none;
  align-items: center;
  flex-shrink: 0;
  max-width: min(42vw, 200px);
  padding: 0.35rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  cursor: pointer;
  text-align: left;
}

.timeline-mobile-trigger:hover {
  border-color: hsl(var(--gold) / 0.5);
  background: hsl(var(--gold) / 0.1);
}

.timeline-mobile-trigger__label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-detail-dialog {
  margin: auto;
  width: min(100vw - 1.5rem, 380px);
  max-height: min(90dvh, 720px);
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.timeline-detail-dialog::backdrop {
  background: hsl(0 0% 0% / 0.48);
  backdrop-filter: blur(3px);
}

.timeline-detail-dialog__sheet {
  display: flex;
  flex-direction: column;
  max-height: min(90dvh, 720px);
  border-radius: var(--radius);
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border) / 0.55);
  box-shadow: 0 16px 48px hsl(0 0% 0% / 0.22);
  overflow: hidden;
}

.timeline-detail-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid hsl(var(--border) / 0.5);
}

.timeline-detail-dialog__title {
  margin: 0;
  font-size: 1.15rem;
  font-family: var(--font-display);
}

.timeline-detail-dialog__close {
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: hsl(var(--muted-foreground));
  padding: 0.15rem 0.35rem;
  border-radius: 0.35rem;
}

.timeline-detail-dialog__close:hover {
  color: hsl(var(--foreground));
  background: hsl(var(--muted) / 0.35);
}

.timeline-detail-dialog__hint {
  margin: 0;
  padding: 0.5rem 0.85rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: hsl(var(--muted-foreground));
  border-bottom: 1px solid hsl(var(--border) / 0.35);
}

.timeline-detail-dialog__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.65rem 0.75rem;
  -webkit-overflow-scrolling: touch;
}

.timeline-sidebar.timeline-sidebar--modal {
  position: relative;
  top: 0;
  width: min(260px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: min(520px, calc(90dvh - 9rem));
  min-height: 320px;
  max-height: min(520px, calc(90dvh - 9rem));
}

body.dark .timeline-detail-dialog__sheet {
  background: hsl(var(--card));
  box-shadow: 0 16px 48px hsl(0 0% 0% / 0.45);
}

/* Мобила: та же сетка «шкала + стихи», что на десктопе (без отдельной модалки по умолчанию). */
@media (max-width: 1024px) {
  .bible-reader-page {
    --timeline-sidebar-w: calc(92px * 0.8);
  }

  .verses-section-toolbar {
    flex-wrap: wrap;
  }

  /* Шкала на ~20% уже и компактнее (коэффициент 0.8), десктоп не затрагивается выше этого блока. */
  .bible-reader-page .timeline-sidebar:not(.timeline-sidebar--modal) {
    width: calc(92px * 0.8);
    padding: 0 0 0 max(2px, env(safe-area-inset-left, 0px));
  }

  .bible-reader-page .timeline-sidebar__scroll::-webkit-scrollbar {
    width: calc(5px * 0.8);
  }

  .bible-reader-page .timeline-sidebar__inner {
    grid-template-columns: calc(20px * 0.8) calc(2px * 0.8) minmax(0, 1fr);
  }

  .bible-reader-page .timeline-sidebar:not(.timeline-sidebar--modal) .timeline-sidebar__track {
    --timeline-book-boundary-outdent: calc(11px * 0.8);
    margin-right: calc(-30px * 0.8);
  }

  .bible-reader-page .timeline-sidebar__book-label-text {
    font-size: calc(12.1px * 0.8);
    text-shadow: 0 calc(1px * 0.8) calc(1px * 0.8) hsl(var(--background) / 0.75);
  }

  .bible-reader-page .timeline-sidebar__book-boundary {
    border-top-width: calc(1.5px * 0.8);
  }

  .bible-reader-page .timeline-sidebar__book-boundary-year {
    font-size: calc(12.1px * 0.8);
  }

  .bible-reader-page .timeline-sidebar__tick--chapter .timeline-sidebar__tick-line {
    width: calc(4px * 0.8);
  }

  .bible-reader-page .timeline-sidebar__tick--major .timeline-sidebar__tick-line {
    width: calc(10px * 0.8);
  }

  .bible-reader-page .timeline-sidebar__tick-label {
    font-size: calc(12.1px * 0.8);
  }

  .bible-reader-page .timeline-sidebar:not(.timeline-sidebar--modal) .timeline-sidebar__cursor {
    transform: translateY(calc(-6px * 0.8));
  }

  .bible-reader-page .timeline-sidebar:not(.timeline-sidebar--modal) .timeline-sidebar__cursor-year {
    left: calc(3px * 0.8);
    bottom: calc(15px * 0.8);
    font-size: calc(12px * 0.8);
  }

  .bible-reader-page .timeline-sidebar:not(.timeline-sidebar--modal) .timeline-sidebar__cursor-ref {
    left: calc(5px * 0.8);
    top: calc(17px * 0.8);
    font-size: calc(10.5px * 0.8);
  }

  .bible-reader-page .timeline-sidebar:not(.timeline-sidebar--modal) .timeline-sidebar__cursor-triangle {
    width: calc(14px * 0.8);
    height: calc(12px * 0.8);
  }

  .timeline-sidebar.timeline-sidebar--modal {
    width: min(calc(260px * 0.8), 100%);
    height: min(calc(520px * 0.8), calc(90dvh - 7.2rem));
    min-height: calc(320px * 0.8);
    max-height: min(calc(520px * 0.8), calc(90dvh - 7.2rem));
  }

  .timeline-sidebar.timeline-sidebar--modal .timeline-sidebar__cursor {
    transform: translateY(calc(-7px * 0.8));
  }

  .timeline-detail-dialog .timeline-sidebar__cursor-triangle {
    width: calc(17px * 0.8);
    height: calc(14px * 0.8);
  }

  .timeline-sidebar.timeline-sidebar--modal .timeline-sidebar__inner {
    grid-template-columns: calc(20px * 0.8) calc(2px * 0.8) minmax(0, 1fr);
  }

  .timeline-sidebar.timeline-sidebar--modal .timeline-sidebar__track {
    --timeline-book-boundary-outdent: calc(11px * 0.8);
    margin-right: calc(-30px * 0.8);
  }

  .timeline-sidebar.timeline-sidebar--modal .timeline-sidebar__book-label-text,
  .timeline-sidebar.timeline-sidebar--modal .timeline-sidebar__book-boundary-year,
  .timeline-sidebar.timeline-sidebar--modal .timeline-sidebar__tick-label {
    font-size: calc(12.1px * 0.8);
  }

  .timeline-sidebar.timeline-sidebar--modal .timeline-sidebar__tick--chapter .timeline-sidebar__tick-line {
    width: calc(4px * 0.8);
  }

  .timeline-sidebar.timeline-sidebar--modal .timeline-sidebar__tick--major .timeline-sidebar__tick-line {
    width: calc(10px * 0.8);
  }

  .timeline-sidebar.timeline-sidebar--modal .timeline-sidebar__cursor-year {
    left: calc(3px * 0.8);
    bottom: calc(15px * 0.8);
    font-size: calc(12px * 0.8);
  }

  .timeline-sidebar.timeline-sidebar--modal .timeline-sidebar__cursor-ref {
    left: calc(5px * 0.8);
    top: calc(17px * 0.8);
    font-size: calc(10.5px * 0.8);
  }
}

.bible-reader-page .verses-section > .verses-section-toolbar {
  padding-left: 50px;
  padding-right: 16px;
}

.bible-reader-page .verses-section > .chapter-illustrations {
  padding-left: var(--verses-pad-x);
  padding-right: var(--verses-pad-x);
}

.bible-reader-page .verses-section > .verse-list {
  padding-left: 0;
  padding-right: var(--verses-pad-x);
}

.verses-section-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 6px;
}

.chapter-comments-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.chapter-comments-toggle:hover {
  background: hsl(var(--gold) / 0.12);
  border-color: hsl(var(--gold) / 0.5);
  border: 1px solid hsl(var(--border) / 0.6);
}

.bible-reader-page .verse-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bible-reader-page .verse-book-heading {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 700;
  margin: 0;
  padding: 8px 0;
  padding-left: calc(var(--reader-num-col) + 0.375rem);
  border: none;
  list-style: none;
  color: hsl(var(--foreground));
}

/* Группы книг (палитра в духе MyBible, контраст на светлой подложке читалки) */
.bible-reader-page .verse-book-heading[data-bible-group="pentateuch"] { color: #4a4c68; }
.bible-reader-page .verse-book-heading[data-bible-group="history-ot"] { color: #6a5535; }
.bible-reader-page .verse-book-heading[data-bible-group="poetry"] { color: #1a6b3c; }
.bible-reader-page .verse-book-heading[data-bible-group="major-prophets"] { color: #9a3d52; }
.bible-reader-page .verse-book-heading[data-bible-group="minor-prophets"] { color: #5c5c1f; }
.bible-reader-page .verse-book-heading[data-bible-group="gospels"] { color: #b54a18; }
.bible-reader-page .verse-book-heading[data-bible-group="acts"] { color: #15788f; }
.bible-reader-page .verse-book-heading[data-bible-group="pauline"] { color: #5a5a1c; }
.bible-reader-page .verse-book-heading[data-bible-group="general-epistles"] { color: #1a6b3c; }
.bible-reader-page .verse-book-heading[data-bible-group="revelation"] { color: #a83848; }

body.dark .bible-reader-page .verse-book-heading[data-bible-group="pentateuch"] { color: #a8a8cc; }
body.dark .bible-reader-page .verse-book-heading[data-bible-group="history-ot"] { color: #c4a070; }
body.dark .bible-reader-page .verse-book-heading[data-bible-group="poetry"] { color: #3cd878; }
body.dark .bible-reader-page .verse-book-heading[data-bible-group="major-prophets"] { color: #e88898; }
body.dark .bible-reader-page .verse-book-heading[data-bible-group="minor-prophets"] { color: #d8d860; }
body.dark .bible-reader-page .verse-book-heading[data-bible-group="gospels"] { color: #f08850; }
body.dark .bible-reader-page .verse-book-heading[data-bible-group="acts"] { color: #50d0f0; }
body.dark .bible-reader-page .verse-book-heading[data-bible-group="pauline"] { color: #d8d860; }
body.dark .bible-reader-page .verse-book-heading[data-bible-group="general-epistles"] { color: #3cd878; }
body.dark .bible-reader-page .verse-book-heading[data-bible-group="revelation"] { color: #f07080; }

/* Кнопка иллюстраций слева от заголовка главы (переносится из #chapterIllustrations в JS).
   Та же сетка, что у .verse-chapter-heading-row--embedded: колонка под кнопку по ширине круга, без фикс. «столбца номеров». */
.bible-reader-page .verse-chapter-heading-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.5rem;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0 max(6px, var(--verses-pad-x, 6px)) 0 2px;
  box-sizing: border-box;
}

.bible-reader-page .verse-chapter-heading-row .chapter-illustrations-toggle {
  justify-self: start;
  margin: 0;
}

/* Класс .verse-chapter-heading-row--embedded только для JS (unwrap); стили совпадают с базовой строкой выше. */

.bible-reader-page .verse-chapter-heading-row .verse-chapter-heading {
  margin: 0;
  padding: 8px 0 8px 12px;
  min-width: 0;
}

.verse-list.parallel-view .verse-chapter-heading-row .verse-chapter-heading.parallel-full-row {
  padding-left: 12px;
}

@media (max-width: 640px) {
  .verse-list.parallel-view .verse-chapter-heading-row .verse-chapter-heading.parallel-full-row {
    padding-left: 12px;
  }
}

.bible-reader-page .verse-chapter-heading {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  padding: 8px 0;
  padding-left: calc(var(--reader-num-col) + 12px);
  border: none;
  list-style: none;
  color: hsl(var(--gold-dark));
}

.bible-reader-page .loading-next {
  color: hsl(var(--muted-foreground));
  padding: 0.75rem;
  font-size: 0.9rem;
  list-style: none;
}

/* Chapter illustrations slider */
.chapter-illustrations {
  position: relative;
  margin: 0;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  border-top: none;
  border-bottom: none;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-radius: var(--radius);
  background: hsl(var(--card));
  overflow-x: hidden;
  overflow-y: visible;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, min-height 0.2s ease;
}

.chapter-illustrations:hover {
  border-left-color: hsl(var(--border));
  border-right-color: hsl(var(--border));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 -2px 6px rgba(0, 0, 0, 0.04);
}

/* Свёрнуто: блок без слайдера в потоке (кнопка у заголовка главы при chapter-illustrations--toggle-docked) */
.chapter-illustrations.is-body-collapsed {
  min-height: 0;
  margin: 0;
  background: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  box-shadow: none;
}

.chapter-illustrations.is-body-collapsed:hover {
  border-left-color: transparent;
  border-right-color: transparent;
  box-shadow: none;
  background: transparent;
}

.chapter-illustrations.hidden {
  display: none;
}

/* Кнопка перенесена в .verse-chapter-heading-row — пустой header не занимает место */
.chapter-illustrations--toggle-docked .chapter-illustrations-header {
  display: none;
}

.chapter-illustrations-header {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 20;
  padding: 0;
  overflow: visible;
  pointer-events: none;
}

.chapter-illustrations-header .chapter-illustrations-toggle {
  pointer-events: auto;
}

/* Один круг (~70% от бывших 44px), без второго кольца; при сворачивании — другая иконка и фон */
.chapter-illustrations-toggle {
  box-sizing: border-box;
  width: 31px;
  height: 31px;
  min-width: 31px;
  min-height: 31px;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid hsl(var(--gold) / 0.48);
  background: linear-gradient(160deg, hsl(var(--gold) / 0.16), hsl(var(--card)));
  color: hsl(var(--gold-dark));
  cursor: pointer;
  box-shadow: none;
  overflow: visible;
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}

.chapter-illustrations-toggle.is-collapsed {
  background: hsl(var(--muted) / 0.32);
  border-color: hsl(var(--border) / 0.75);
  color: hsl(var(--muted-foreground));
}

.chapter-illustrations-toggle:focus-visible {
  outline: 2px solid hsl(var(--gold));
  outline-offset: 2px;
}

.chapter-illustrations-toggle__art {
  position: relative;
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  overflow: visible;
}

.chapter-illustrations-toggle__icon {
  grid-area: 1 / 1;
  width: 14px;
  height: 14px;
  display: block;
  transition: opacity 0.2s ease;
}

.chapter-illustrations-toggle__icon--expanded {
  opacity: 1;
}

.chapter-illustrations-toggle__icon--collapsed {
  opacity: 0;
  pointer-events: none;
}

.chapter-illustrations-toggle.is-collapsed .chapter-illustrations-toggle__icon--expanded {
  opacity: 0;
}

.chapter-illustrations-toggle.is-collapsed .chapter-illustrations-toggle__icon--collapsed {
  opacity: 1;
}

.chapter-illustrations-toggle:hover {
  border-color: hsl(var(--gold) / 0.65);
  box-shadow: 0 0 0 2px hsl(var(--gold) / 0.1);
}

.chapter-illustrations-toggle.is-collapsed:hover {
  border-color: hsl(var(--border));
  background: hsl(var(--muted) / 0.45);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .chapter-illustrations-toggle__icon {
    transition: none;
  }
}

.chapter-illustrations-body {
  max-height: 360px;
  min-width: 0;
  max-width: 100%;
  transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-x: hidden;
  overflow-y: hidden;
}

.chapter-illustrations-body.collapsed {
  max-height: 0;
}
/* Swiper container for chapter illustrations */
.chapter-illustrations-swiper {
  position: relative;
  height: 360px;
  min-width: 0;
  padding: 0.5rem 2.75rem 0.5rem;
  overflow: hidden !important;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  isolation: isolate;
}
.chapter-illustrations-swiper .swiper-button-prev,
.chapter-illustrations-swiper .swiper-button-next,
.chapter-illustrations-swiper .swiper-pagination {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
@media (hover: hover) {
  .chapter-illustrations-swiper:hover .swiper-button-prev,
  .chapter-illustrations-swiper:hover .swiper-button-next,
  .chapter-illustrations-swiper:hover .swiper-pagination {
    opacity: 1;
    pointer-events: auto;
  }
}
@media (hover: none) {
  .chapter-illustrations-swiper .swiper-button-prev,
  .chapter-illustrations-swiper .swiper-button-next,
  .chapter-illustrations-swiper .swiper-pagination {
    opacity: 1;
    pointer-events: auto;
  }
}
.chapter-illustrations-swiper .swiper-pagination {
  position: absolute;
  bottom: 0.5rem;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 0.25rem;
}
.chapter-illustrations-swiper .swiper-pagination-bullet {
  background: #fff;
  border: 2px solid rgba(0, 0, 0, 0.6);
  opacity: 0.9;
}
.chapter-illustrations-swiper .swiper-pagination-bullet-active {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.8);
  opacity: 1;
}
.chapter-illustrations-swiper.is-empty .swiper-button-prev,
.chapter-illustrations-swiper.is-empty .swiper-button-next,
.chapter-illustrations-swiper.is-empty .swiper-pagination {
  display: none;
}
/* Custom arrow buttons — круглые кнопки в стиле портала */
.chapter-illustrations-swiper .swiper-button-prev,
.chapter-illustrations-swiper .swiper-button-next {
  --swiper-navigation-color: hsl(var(--gold-dark));
  width: 44px;
  height: 44px;
  margin-top: -22px;
  min-width: 44px;
  border-radius: 50%;
  background: hsl(var(--background) / 0.92);
  border: 1px solid transparent;
  color: hsl(var(--gold-dark));
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.chapter-illustrations-swiper .swiper-button-prev:hover,
.chapter-illustrations-swiper .swiper-button-next:hover {
  background: hsl(var(--gold) / 0.15);
  border-color: hsl(var(--gold) / 0.7);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.1);
  color: hsl(var(--gold-dark));
}
.chapter-illustrations-swiper .swiper-button-prev::after,
.chapter-illustrations-swiper .swiper-button-next::after {
  font-size: 1.25rem;
  color: inherit;
}
.chapter-illustrations-swiper .swiper-slide {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
/* Слайд: слева карточка метаданных, справа изображение */
.chapter-illustration-slide {
  position: relative;
  margin: 0;
  height: 100%;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: 0.12rem;
  padding: 0.1rem 0.05rem;
  box-sizing: border-box;
  cursor: default;
}
.chapter-illustration-slide--debug-delete {
  box-shadow: inset 5px 0 0 0 hsl(0 72% 44% / 0.92);
}
.chapter-illustration-slide--debug-wrong {
  box-shadow: inset 0 5px 0 0 hsl(32 92% 44% / 0.9);
}
.chapter-illustration-slide--debug-delete.chapter-illustration-slide--debug-wrong {
  box-shadow: inset 5px 0 0 0 hsl(0 72% 44% / 0.92), inset 0 5px 0 0 hsl(32 92% 44% / 0.9);
}
.chapter-illustration-meta {
  flex: 0 0 min(36%, 14.5rem);
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.5rem 0.35rem 0.5rem 50px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: "Cormorant Garamond", "Palatino Linotype", Palatino, "Times New Roman", serif;
  font-size: clamp(0.95rem, 1.05vw, 1.12rem);
  font-weight: 500;
  line-height: 1.38;
  color: hsl(var(--gold-dark));
  text-align: right;
  -webkit-font-smoothing: antialiased;
}
.chapter-illustration-meta__row + .chapter-illustration-meta__row {
  margin-top: 0.5rem;
  padding-top: 0.45rem;
  border-top: 1px solid hsl(var(--gold) / 0.22);
}
.chapter-illustration-meta__label {
  font-size: 0.62rem;
  font-weight: 600;
  font-family: ui-sans-serif, system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: hsl(var(--gold-dark) / 0.72);
  margin-bottom: 0.12rem;
  text-align: right;
}
.chapter-illustration-meta__value {
  font-weight: 600;
  color: hsl(var(--gold-dark));
  word-break: break-word;
  hyphens: auto;
  text-align: right;
}

/* Отладка иллюстраций: флаги и комментарий в БД */
.chapter-illustration-debug {
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px dashed hsl(var(--gold) / 0.35);
  text-align: left;
}
.chapter-illustration-debug__badges {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  margin-bottom: 0.45rem;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.chapter-illustration-debug__badge {
  display: inline-block;
  padding: 0.2rem 0.4rem;
  border-radius: 0.3rem;
  border: 1px solid hsl(var(--border));
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted) / 0.2);
  width: fit-content;
}
.chapter-illustration-debug__badge.is-off {
  opacity: 0.55;
}
.chapter-illustration-debug__badge--delete.is-on {
  border-color: hsl(0 55% 42% / 0.75);
  color: hsl(0 65% 28%);
  background: hsl(0 60% 94% / 0.95);
}
.chapter-illustration-debug__badge--wrong.is-on {
  border-color: hsl(32 80% 40% / 0.85);
  color: hsl(28 75% 26%);
  background: hsl(40 90% 93% / 0.95);
}
.chapter-illustration-debug__btn.is-active {
  box-shadow: 0 0 0 2px hsl(var(--gold) / 0.5);
}
.chapter-illustration-debug__btn--danger.is-active {
  background: hsl(0 55% 92% / 0.95);
  border-color: hsl(0 60% 42%);
}
.chapter-illustration-debug__btn:not(.chapter-illustration-debug__btn--danger).is-active {
  background: hsl(40 85% 90% / 0.95);
  border-color: hsl(32 75% 42%);
}
.chapter-illustration-debug__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin-bottom: 0.45rem;
}
.chapter-illustration-debug__row--comment {
  flex-direction: column;
  align-items: stretch;
}
.chapter-illustration-debug__btn {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.3rem 0.45rem;
  border-radius: 0.35rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  cursor: pointer;
}
.chapter-illustration-debug__btn:hover {
  border-color: hsl(var(--gold) / 0.5);
}
.chapter-illustration-debug__btn--danger {
  border-color: hsl(0 45% 42% / 0.55);
  color: hsl(0 50% 38%);
}
.chapter-illustration-debug__btn--primary {
  background: hsl(var(--gold) / 0.2);
  border-color: hsl(var(--gold) / 0.45);
}
.chapter-illustration-debug__textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.72rem;
  padding: 0.35rem 0.4rem;
  border-radius: 0.35rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  resize: vertical;
  min-height: 2.5rem;
}
.chapter-illustration-debug__status {
  font-size: 0.68rem;
  font-family: ui-sans-serif, system-ui, sans-serif;
  color: hsl(var(--muted-foreground));
  min-height: 1.1em;
}
.chapter-illustration-debug__status.is-error {
  color: hsl(0 55% 40%);
}

.chapter-illustration-figure {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}
.chapter-illustration-figure img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: var(--radius);
  background: hsl(var(--muted) / 0.25);
  display: block;
  cursor: zoom-in;
}
.chapter-illustration-figure img.illustration-load-failed {
  min-height: 120px;
  background: hsl(var(--muted) / 0.5);
}
.chapter-illustrations-empty {
  margin: 0;
  padding: 0.75rem 0.5rem;
  font-size: 0.9rem;
  color: hsl(var(--muted-foreground));
  text-align: center;
  width: 100%;
}
@media (max-width: 640px) {
  .chapter-illustrations {
    margin: 0;
  }
  .chapter-illustrations-body {
    max-height: 420px;
  }
  .chapter-illustrations-swiper {
    height: 420px;
    padding: 0.5rem 2.5rem;
  }
  .chapter-illustrations-swiper .swiper-slide {
    width: 100%;
  }
  /* Мета сверху, картинка снизу — обе колонки читаемы на узкой ширине */
  .chapter-illustration-slide {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    padding: 0.15rem 0.1rem;
  }
  .chapter-illustration-meta {
    flex: 0 1 auto;
    width: 100%;
    max-width: none;
    max-height: 46%;
    min-height: 0;
    font-size: clamp(0.88rem, 3.2vw, 1rem);
    padding: 0.5rem 0.65rem 0.5rem 50px;
  }
  .chapter-illustration-meta__row + .chapter-illustration-meta__row {
    margin-top: 0.35rem;
    padding-top: 0.3rem;
  }
  .chapter-illustration-figure {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
  }
  .chapter-illustration-figure img {
    height: 100%;
    width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  .chapter-illustrations-swiper .swiper-button-prev,
  .chapter-illustrations-swiper .swiper-button-next {
    width: 36px;
    height: 36px;
    margin-top: -18px;
    min-width: 36px;
    font-size: 1rem;
  }
  .chapter-illustrations-swiper .swiper-button-prev::after,
  .chapter-illustrations-swiper .swiper-button-next::after {
    font-size: 1rem;
  }
}
@media (max-width: 380px) {
  .chapter-illustrations-body {
    max-height: 380px;
  }
  .chapter-illustrations-swiper {
    height: 380px;
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .chapter-illustrations-swiper .swiper-button-prev,
  .chapter-illustrations-swiper .swiper-button-next {
    width: 32px;
    height: 32px;
    margin-top: -16px;
    min-width: 32px;
  }
}

/* Fullscreen lightbox при клике на иллюстрацию */
.illustration-lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  min-width: 100%;
  min-height: 100%;
  z-index: 9999;
  background: #000;
  box-sizing: border-box;
}
.illustration-lightbox:fullscreen,
.illustration-lightbox:-webkit-full-screen,
.illustration-lightbox:-moz-full-screen {
  width: 100%;
  height: 100%;
}
.illustration-lightbox.open {
  display: block;
}
.illustration-lightbox-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.illustration-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
}
/* Кнопки лайтбокса — те же классы, что у оверлея аудио-плеера (.chapter-audio-overlay__*); здесь только позиция и transform */
.illustration-lightbox-close,
.illustration-lightbox-prev,
.illustration-lightbox-next {
  position: absolute;
  z-index: 1;
}
.illustration-lightbox-close {
  top: 0.75rem;
  right: 0.75rem;
}
.illustration-lightbox-prev {
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
}
.illustration-lightbox-next {
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
}
/* Три кнопки — .chapter-audio-overlay__close; боковые по центру по вертикали + тот же hover scale, что у крестика */
.illustration-lightbox-prev.chapter-audio-overlay__close:hover,
.illustration-lightbox-next.chapter-audio-overlay__close:hover {
  transform: translateY(-50%) scale(1.06);
}
.illustration-lightbox-prev.chapter-audio-overlay__close:active,
.illustration-lightbox-next.chapter-audio-overlay__close:active {
  transform: translateY(-50%) scale(0.96);
}
.illustration-lightbox-close.chapter-audio-overlay__close:focus-visible {
  outline: none;
  color: hsl(var(--foreground));
  border-color: hsl(var(--gold, 45 80% 50%) / 0.55);
  background: hsl(var(--gold) / 0.12);
  box-shadow: 0 2px 10px hsl(var(--gold, 45 80% 40%) / 0.2);
  transform: scale(1.06);
}
.illustration-lightbox-prev.chapter-audio-overlay__close:focus-visible,
.illustration-lightbox-next.chapter-audio-overlay__close:focus-visible {
  outline: none;
  color: hsl(var(--foreground));
  border-color: hsl(var(--gold, 45 80% 50%) / 0.55);
  background: hsl(var(--gold) / 0.12);
  box-shadow: 0 2px 10px hsl(var(--gold, 45 80% 40%) / 0.2);
  transform: translateY(-50%) scale(1.06);
}
@media (max-width: 640px) {
  .illustration-lightbox-close {
    top: 0.5rem;
    right: 0.5rem;
  }
  .illustration-lightbox-prev {
    left: 0.5rem;
  }
  .illustration-lightbox-next {
    left: auto;
    right: 0.5rem;
  }
}

/* Inline illustration block before each chapter in list (infinite scroll) */
.verse-list-illustrations {
  list-style: none;
  margin: 0.5rem 0;
  padding: 0;
  overflow-x: clip;
  overflow-y: visible;
}
.verse-list-illustrations.hidden {
  display: none;
}
.verse-list-illustrations .chapter-illustrations {
  margin: 0;
}

/* Illustration authors in settings */
.illustration-authors-wrapper {
  margin-top: 0.5rem;
  position: relative;
}
.illustration-authors-wrapper .msd-trigger {
  width: 100%;
  justify-content: space-between;
}
.illustration-authors-list {
  max-height: 12rem;
  overflow-y: auto;
}
.illustration-authors-list .settings-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0;
}

.bible-reader-page .verse-item {
  padding: 0.5rem 0.5rem 0.5rem 0;
  margin: 0 -0.5rem 0 0;
  border-bottom: 1px solid hsl(var(--border) / 0.5);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.2rem;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  border-radius: 0.35rem;
  position: relative;
  max-width: 100%;
  box-sizing: border-box;
}

/* Первая строка: номер, перекрёстные ссылки, текст, действия — без лишней ширины из-за сносок */
.bible-reader-page .verse-item-row {
  display: flex;
  align-items: baseline;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  gap: 0.5rem;
  box-sizing: border-box;
  position: relative;
}

/* Курсор на строке и открытое меню стиха — заметное выделение */
.bible-reader-page .verse-item:hover {
  background: hsl(var(--gold) / 0.09);
  box-shadow: inset 3px 0 0 0 hsl(var(--gold) / 0.55);
}

.bible-reader-page .verse-item.verse-item--row-menu-active {
  background: hsl(var(--gold) / 0.14);
  box-shadow: inset 3px 0 0 0 hsl(var(--gold-dark));
}

.bible-reader-page .verse-item.is-target {
  background: hsl(var(--gold) / 0.2);
  box-shadow: inset 0 0 0 1px hsl(var(--gold) / 0.45);
}

/* Стих в закладках — подсветка строки (~×2.5 к исходной интенсивности) */
.bible-reader-page .verse-item.verse-item--has-bookmark > .verse-item-row {
  border-radius: 0.3rem;
  background: linear-gradient(90deg, hsl(var(--gold) / 0.35) 0%, hsl(var(--gold) / 0.1) 55%, transparent 100%);
  box-shadow: inset 8px 0 0 0 hsl(var(--gold, 45 80% 50%) / 0.95);
}

.bible-reader-page .verse-num {
  flex: 0 0 var(--reader-num-col);
  width: var(--reader-num-col);
  min-width: var(--reader-num-col);
  max-width: var(--reader-num-col);
  flex-shrink: 0;
  font-weight: 400;
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
  color: var(--reader-color, inherit);
  text-align: left;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.bible-reader-page .verse-text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  overflow: visible;
}

/* Сноски MyBible <f> — маркер; текст раскрывается под стихом (см. .verse-footnote-drawer) */
.bible-reader-page .verse-footnote {
  vertical-align: super;
  font-size: 0.85em;
  line-height: 1.2;
  margin-left: 0.12em;
  cursor: pointer;
  position: relative;
}

.bible-reader-page .verse-footnote-marker {
  cursor: pointer;
  color: hsl(var(--gold));
  font-weight: 800;
  font-size: 1em;
  line-height: 1.2;
  display: inline-block;
  padding: 0.08em 0.25em;
  min-width: 1em;
  user-select: none;
  border-radius: 4px;
}

.bible-reader-page .verse-footnote-marker:hover,
.bible-reader-page .verse-footnote-marker:focus-visible {
  outline: 2px solid hsl(var(--gold) / 0.55);
  outline-offset: 1px;
  background: hsl(var(--gold) / 0.12);
}

.bible-reader-page .verse-footnote-marker[aria-expanded="true"] {
  color: hsl(0 65% 42%);
  background: hsl(var(--gold) / 0.18);
}

body.dark .bible-reader-page .verse-footnote-marker[aria-expanded="true"] {
  color: hsl(0 70% 68%);
}

.bible-reader-page .verse-footnote-drawer {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0.35rem 0 0;
  padding: 0 0 0.25rem;
}

.bible-reader-page .verse-footnote-body {
  margin-top: 0.35rem;
  padding: 0.5rem 0.65rem;
  border-left: 3px solid hsl(0 55% 50% / 0.45);
  border-radius: 0 6px 6px 0;
  background: hsl(var(--muted) / 0.35);
}

.bible-reader-page .verse-footnote-body-inner {
  font-style: italic;
  color: hsl(0 65% 38%);
  font-size: 0.95em;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
}

body.dark .bible-reader-page .verse-footnote-body-inner {
  color: hsl(0 65% 72%);
}

.bible-reader-page .verse-footnote-body-inner a {
  color: inherit;
  text-decoration: underline;
}

.reader-verse-text .verse-footnote {
  cursor: pointer;
}

.reader-verse-text .verse-footnote-marker {
  cursor: pointer;
  color: hsl(var(--gold));
  font-weight: 800;
  font-size: 1em;
  line-height: 1.2;
  display: inline-block;
  padding: 0.08em 0.25em;
  min-width: 1em;
}

/* Сноски под цитатой на странице /bible-reader/verse */
.bible-reader-verse-page .reader-verse-footnote-drawer {
  width: 100%;
  max-width: 48rem;
  margin: 0.35rem auto 0;
  padding: 0 0.5rem;
}

.bible-reader-verse-page .reader-verse-footnote-drawer .verse-footnote-body {
  margin-top: 0.35rem;
}

.verse-paragraph .verse-footnote-drawer {
  width: 100%;
  margin-top: 0.35rem;
}

.bible-reader-page .verse-word {
  cursor: pointer;
  color: hsl(var(--foreground));
}

.bible-reader-page .verse-word:hover {
  color: hsl(var(--gold));
  background: hsl(var(--gold) / 0.15);
  border-radius: 2px;
}

/* «С» — те же стили, что у .verse-action-btn (класс verse-crossref-btn только для логики клика). */

/* Правая боковая панель: те же токены и механика, что у dialog.section-settings (section-settings.css). */
.bible-reader-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--portal-right-drawer-width, min(540px, 50vw));
  height: var(--portal-right-drawer-height, 100dvh);
  max-height: var(--portal-right-drawer-height, 100dvh);
  background: var(--portal-right-drawer-bg, hsl(var(--card)));
  border-left: var(--portal-right-drawer-border, 1px solid hsl(var(--border)));
  border-radius: var(--portal-right-drawer-radius, var(--radius) 0 0 var(--radius));
  box-shadow: var(--portal-right-drawer-shadow, -4px 0 32px hsl(0 0% 0% / 0.2));
  display: flex !important;
  flex-direction: column;
  z-index: 1200;
  overflow: hidden;
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    transform var(--portal-right-drawer-duration, 0.28s) var(--portal-right-drawer-ease, cubic-bezier(0.32, 0.72, 0, 1)),
    opacity var(--portal-right-drawer-duration, 0.28s) ease,
    visibility 0s linear 0s;
}

/* display:flex !important — перебивает глобальный `.hidden { display:none !important }` (напр. pravo.css). */
.bible-reader-panel.hidden {
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform var(--portal-right-drawer-duration, 0.28s) var(--portal-right-drawer-ease, cubic-bezier(0.32, 0.72, 0, 1)),
    opacity var(--portal-right-drawer-duration, 0.28s) ease,
    visibility 0s linear var(--portal-right-drawer-duration, 0.28s);
}

.bible-reader-panel .panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid hsl(var(--border));
  flex-shrink: 0;
}

.bible-reader-panel .panel-header h2 {
  margin: 0;
  font-size: 1.1rem;
}

.bible-reader-panel .panel-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: hsl(var(--muted-foreground));
  padding: 0.25rem;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  flex-shrink: 0;
}

.bible-reader-panel .panel-close:hover {
  color: hsl(var(--foreground));
  background: hsl(var(--muted) / 0.5);
}

.bible-reader-panel .panel-filter-toolbar {
  flex-shrink: 0;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid hsl(var(--border) / 0.7);
  background: hsl(var(--muted) / 0.4);
}

.bible-reader-panel .panel-filter-toolbar.hidden {
  display: none;
}

.bible-reader-panel .panel-filter-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: hsl(var(--muted-foreground));
}

.bible-reader-panel .panel-filter-label span {
  flex-shrink: 0;
}

.bible-reader-panel .panel-filter-select {
  min-width: 0;
  max-width: 100%;
  flex: 1;
}

.bible-reader-panel .panel-body {
  flex: 1;
  overflow: auto;
  padding: 1rem;
}

.bible-reader-panel .commentary-item {
  margin-bottom: 1rem;
}

/*
 * HTML словарей MyBible часто с одиночными <br> под «узкую колонку»; без white-space: pre-wrap поток нормальный,
 * переносы чинятся в bible-reader.js (мягкие <br> → пробел, двойной <br> = абзац).
 */
.bible-reader-panel .dictionary-entry {
  margin-bottom: 1rem;
  --reader-commentary-indent: 2.145em;
  white-space: normal;
  word-break: break-word;
  text-align: justify;
  text-align-last: start;
  text-indent: var(--reader-commentary-indent);
  hyphens: auto;
  line-height: 1.55;
}

.bible-reader-panel .dictionary-entry p {
  margin: 0 0 0.65em;
  text-indent: var(--reader-commentary-indent);
}

.bible-reader-panel .dictionary-entry p:last-child {
  margin-bottom: 0;
}

/* Вложенные обёртки без &lt;p&gt; — как у толкования, чтобы жирные подзаголовки и «б)» не выпадали в ноль отступа. */
.bible-reader-panel .dictionary-entry div:not(:has(> p)):not(:has(> :is(h1, h2, h3, h4, h5, h6))) {
  text-indent: var(--reader-commentary-indent);
}

.bible-reader-panel .dictionary-entry div:has(> :is(h1, h2, h3, h4, h5, h6)) {
  text-indent: 0;
}

.bible-reader-panel .dictionary-entry div:has(> :is(h1, h2, h3, h4, h5, h6)) > *:not(:is(h1, h2, h3, h4, h5, h6)):not(ul):not(ol):not(table) {
  text-indent: var(--reader-commentary-indent);
}

.bible-reader-panel .dictionary-entry :is(h1, h2, h3, h4, h5, h6) {
  text-indent: 0;
}

.bible-reader-panel .dictionary-entry a,
.bible-reader-panel .dictionary-entry a:visited {
  color: hsl(var(--foreground));
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bible-reader-panel .dictionary-entry a:hover {
  color: hsl(var(--gold));
}

.bible-reader-panel .dictionary-source h3 {
  font-size: 0.95rem;
  margin: 0 0 0.5rem;
  color: hsl(var(--gold));
}

.bible-reader-panel .dictionary-body .dictionary-source + .dictionary-source {
  margin-top: 1.25rem;
}

.bible-reader-panel .crossref-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bible-reader-panel .crossref-list li {
  padding: 0.35rem 0;
  border-bottom: 1px solid hsl(var(--border) / 0.5);
}

.bible-reader-panel .crossref-link-btn {
  border: none;
  background: transparent;
  color: hsl(var(--gold-dark));
  font: inherit;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bible-reader-panel .crossref-link-btn:hover {
  color: hsl(var(--foreground));
}

.bible-reader-panel .crossref-verse-preview {
  margin-top: 0.25rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.9rem;
  line-height: 1.35;
}

.panel-backdrop {
  position: fixed;
  inset: 0;
  background: var(--portal-right-drawer-backdrop, hsl(0 0% 0% / 0.45));
  backdrop-filter: var(--portal-right-drawer-backdrop-blur, blur(1px));
  -webkit-backdrop-filter: var(--portal-right-drawer-backdrop-blur, blur(1px));
  z-index: 1100;
  display: block !important;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity var(--portal-right-drawer-duration, 0.28s) ease,
    visibility 0s linear 0s;
}

.panel-backdrop.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--portal-right-drawer-duration, 0.28s) ease,
    visibility 0s linear var(--portal-right-drawer-duration, 0.28s);
}

/* ----- II-4b: оверлей плеера чтения главы ----- */
.chapter-audio-overlay {
  position: fixed;
  inset: 0;
  z-index: 1250;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  pointer-events: none;
}

.chapter-audio-overlay.hidden {
  display: none !important;
}

.chapter-audio-overlay:not(.hidden) {
  pointer-events: auto;
}

.chapter-audio-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: hsl(0 0% 0% / 0.72);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 0;
}

.chapter-audio-overlay__sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 28rem;
  max-height: min(88vh, 640px);
  margin: 0 auto;
  padding: 1rem 15px calc(1rem + env(safe-area-inset-bottom, 0px));
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1rem 1rem 0 0;
  box-shadow: 0 -12px 40px hsl(0 0% 0% / 0.35);
  display: flex;
  flex-direction: column;
  gap: 15px;
  overflow: auto;
}

@media (min-width: 769px) {
  .chapter-audio-overlay {
    align-items: center;
    padding: 1.5rem;
  }

  .chapter-audio-overlay__sheet {
    border-radius: var(--radius);
    margin: 0;
    box-shadow: 0 20px 50px hsl(0 0% 0% / 0.4);
  }
}

.chapter-audio-overlay__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
}

.chapter-audio-overlay__header h2 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
  color: hsl(var(--foreground));
  flex: 1;
  min-width: 0;
  padding-right: 4px;
}

/* Закрытие в стиле читалки: круг, золотая обводка, как акцентные кнопки */
.chapter-audio-overlay__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  border: 1px solid hsl(var(--border));
  border-radius: 50%;
  background: hsl(var(--background));
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.18s ease,
    box-shadow 0.2s ease;
}

.chapter-audio-overlay__close:hover {
  color: hsl(var(--foreground));
  border-color: hsl(var(--gold, 45 80% 50%) / 0.55);
  background: hsl(var(--gold) / 0.12);
  box-shadow: 0 2px 10px hsl(var(--gold, 45 80% 40%) / 0.2);
  transform: scale(1.06);
}

.chapter-audio-overlay__close:active {
  transform: scale(0.96);
}

.chapter-audio-overlay__messages {
  min-height: 0;
}

.chapter-audio-overlay__messages .loading {
  padding: 0.35rem 0;
  margin: 0;
}

.chapter-audio-overlay__player.hidden {
  display: none !important;
}

.chapter-audio-overlay__player {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.chapter-audio-overlay__label {
  display: block;
  font-size: 0.82rem;
  color: hsl(var(--muted-foreground));
  margin: 0;
}

.chapter-audio-overlay__select,
.chapter-audio-overlay__player .chapter-audio-overlay__rate-select {
  width: 100%;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.chapter-audio-overlay__player .bible-reader-select:hover {
  border-color: hsl(var(--gold, 45 80% 50%) / 0.5);
  box-shadow: 0 0 0 1px hsl(var(--gold, 45 80% 50%) / 0.12);
}

.chapter-audio-overlay__player .bible-reader-select:focus {
  outline: none;
  border-color: hsl(var(--gold, 45 80% 50%) / 0.65);
  box-shadow: 0 0 0 3px hsl(var(--gold, 45 80% 50%) / 0.18);
}

.chapter-audio-overlay__extras {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
  width: 100%;
}

.chapter-audio-overlay__mini-label {
  font-size: 0.78rem;
  color: hsl(var(--muted-foreground));
  flex-basis: auto;
}

.chapter-audio-overlay__volume {
  flex: 1;
  min-width: 5rem;
  max-width: 12rem;
  height: 0.4rem;
  accent-color: hsl(var(--gold, 45 80% 50%));
  cursor: pointer;
  transition: filter 0.2s ease;
}

.chapter-audio-overlay__volume:hover {
  filter: brightness(1.08);
}

.chapter-audio-overlay__volume::-webkit-slider-thumb {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.chapter-audio-overlay__volume:hover::-webkit-slider-thumb {
  transform: scale(1.12);
  box-shadow: 0 2px 8px hsl(var(--gold, 45 80% 40%) / 0.35);
}

.chapter-audio-overlay__rate-select {
  width: auto;
  min-width: 4.5rem;
  max-width: 100%;
  font-size: 0.85rem;
}

.chapter-audio-overlay__progress {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
}

.chapter-audio-overlay__time {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: hsl(var(--muted-foreground));
  min-width: 2.35rem;
}

.chapter-audio-overlay__seek {
  flex: 1;
  min-width: 0;
  height: 0.45rem;
  accent-color: hsl(var(--gold, 45 80% 50%));
  cursor: pointer;
  transition: filter 0.2s ease;
}

.chapter-audio-overlay__seek:hover {
  filter: brightness(1.08);
}

.chapter-audio-overlay__seek::-webkit-slider-thumb {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.chapter-audio-overlay__seek:hover::-webkit-slider-thumb {
  transform: scale(1.12);
  box-shadow: 0 2px 8px hsl(var(--gold, 45 80% 40%) / 0.35);
}

/* Предыдущая / play / следующая глава — одна линия */
.chapter-audio-overlay__transport {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  width: 100%;
  padding-top: 2px;
}

.chapter-audio-overlay__skip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.3);
  color: hsl(var(--foreground));
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.18s ease,
    box-shadow 0.2s ease;
}

.chapter-audio-overlay__skip:hover {
  background: hsl(var(--gold) / 0.14);
  border-color: hsl(var(--gold, 45 80% 50%) / 0.5);
  box-shadow: 0 3px 12px hsl(0 0% 0% / 0.12);
  transform: translateY(-1px);
}

.chapter-audio-overlay__skip:active {
  transform: translateY(0) scale(0.96);
}

.chapter-audio-overlay__skip-icon {
  display: block;
}

.chapter-audio-overlay__playpause {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border-radius: 50%;
  border: 2px solid hsl(var(--gold, 45 80% 50%) / 0.7);
  background: hsl(var(--gold) / 0.2);
  color: hsl(var(--foreground));
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.22s ease;
}

.chapter-audio-overlay__playpause:hover {
  background: hsl(var(--gold) / 0.32);
  border-color: hsl(var(--gold, 45 80% 50%) / 0.9);
  box-shadow: 0 6px 20px hsl(var(--gold, 45 80% 40%) / 0.25);
  transform: scale(1.05);
}

.chapter-audio-overlay__playpause:active {
  transform: scale(0.98);
}

/* Только одна иконка видна (.hidden в проекте не глобальный — переключение через .is-playing) */
.chapter-audio-overlay__playpause-icon {
  display: block;
  pointer-events: none;
}

.chapter-audio-overlay__playpause-icon--pause {
  display: none;
}

.chapter-audio-overlay__playpause.is-playing .chapter-audio-overlay__playpause-icon--play {
  display: none;
}

.chapter-audio-overlay__playpause.is-playing .chapter-audio-overlay__playpause-icon--pause {
  display: block;
}

body.dark .chapter-audio-overlay__backdrop {
  background: hsl(0 0% 0% / 0.78);
}

@media (prefers-reduced-motion: reduce) {
  .bible-reader-panel,
  .bible-reader-panel.hidden,
  .panel-backdrop,
  .panel-backdrop.hidden {
    transition: none;
  }
}

/* Как dialog.section-settings-dialog: на узком экране лист на всю ширину без левой границы */
@media (max-width: 768px) {
  .bible-reader-panel {
    border-left: none;
  }
}

.bible-reader-page .loading {
  padding: 1rem;
  color: hsl(var(--muted-foreground));
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Outlined: стих и фильтр — один паттерн (div + span на границе). Нативный <legend> даёт разный рендер и «ломает» верхнюю линию рамки. */
.bible-reader-verse-page .reader-verse-text-shell,
.bible-reader-verse-page .reader-verse-filter-shell {
  --verse-outline-border: hsl(var(--border) / 0.92);
  --verse-outline-fill: hsl(var(--muted) / 0.12);
  --verse-outline-label: hsl(218 22% 42%);
  border: 1px solid var(--verse-outline-border);
  border-radius: var(--radius);
  background: hsl(var(--card));
  min-width: 0;
  box-sizing: border-box;
}

.bible-reader-verse-page .reader-verse-text-shell {
  position: relative;
  display: block;
  margin: 0.85rem 0 1rem;
  padding: 0;
  overflow: visible;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  height: fit-content;
}

.bible-reader-verse-page .reader-verse-filter-shell {
  position: relative;
  display: block;
  width: 100%;
  margin: 0.5rem 0 0;
}

body.dark .bible-reader-verse-page .reader-verse-text-shell,
body.dark .bible-reader-verse-page .reader-verse-filter-shell {
  --verse-outline-border: hsl(var(--border) / 0.78);
  --verse-outline-fill: hsl(var(--muted) / 0.22);
  --verse-outline-label: hsl(215 14% 72%);
}

/* Подпись на середине верхней границы (стих и толкование). */
.bible-reader-verse-page .reader-verse-text-shell > .reader-verse-text-legend,
.bible-reader-verse-page .reader-verse-filter-shell > .reader-verse-text-legend {
  position: absolute;
  left: 25px;
  top: 0;
  z-index: 1;
  transform: translateY(-50%);
  padding: 0 0.4rem 0 0;
  margin: 0;
  max-width: calc(100% - 1.5rem);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--verse-outline-label);
  background: hsl(var(--card));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bible-reader-verse-page .reader-verse-filter-shell > .reader-verse-text-legend {
  pointer-events: none;
}

.bible-reader-verse-page .reader-verse-text-wrap {
  margin: 0;
  /* Верх как у .reader-verse-filter-wrap — место под «висячую» подпись */
  padding: 0.45rem 16px 8px 32px;
  border-radius: inherit;
  background: var(--verse-outline-fill);
  min-height: 0;
}

.bible-reader-verse-page .reader-verse-filter-wrap {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0.45rem 0.65rem 0.5rem 32px;
  border-radius: inherit;
  background: var(--verse-outline-fill);
}

/* В тулбаре: рамка листбокса и кнопка «Енох» одной высоты; отступ от вкладок — на тулбар. */
.bible-reader-verse-page .reader-verse-toolbar {
  margin-top: 0.5rem;
}

.bible-reader-verse-page .reader-verse-toolbar .reader-verse-filter-shell {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0;
}

.bible-reader-verse-page .reader-verse-toolbar .reader-verse-filter-wrap {
  flex: 1 1 auto;
  min-height: 2.5rem;
}

.bible-reader-verse-page .reader-verse-toolbar .reader-enoch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  box-sizing: border-box;
  padding: 0 0.85rem 0 12.6px;
  font-size: 0.95rem;
  line-height: 1.25;
  flex-shrink: 0;
}

.bible-reader-verse-page .reader-verse-filter-wrap .bible-reader-select {
  width: 100%;
  min-width: 0;
  margin: 0;
  border: none;
  border-radius: 0.35rem;
  background: transparent;
  padding: 0.2rem 0.4rem;
  font-size: 0.95rem;
  box-shadow: none;
  outline: none;
}

/* UA даёт чёрный outline/рамку при фокусе — снимаем, рамка уже у .reader-verse-filter-shell */
.bible-reader-verse-page .reader-verse-filter-wrap .bible-reader-select:focus,
.bible-reader-verse-page .reader-verse-filter-wrap .bible-reader-select:focus-visible,
.bible-reader-verse-page .reader-verse-filter-wrap .bible-reader-select:active {
  outline: none;
  border: none;
  box-shadow: none;
}

.bible-reader-verse-page .reader-verse-filter-wrap .reader-filter-select {
  min-width: 0;
}

.bible-reader-verse-page .reader-verse-text {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  font-size: 1.02rem;
  line-height: 1.5;
}

.reader-verse-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 7px 0 1rem;
}

.reader-verse-tab {
  border: 1px solid hsl(var(--border) / 0.75);
  background: hsl(var(--muted) / 0.35);
  color: hsl(var(--foreground));
  border-radius: var(--radius);
  padding: 0.45rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.reader-verse-tab:hover {
  border-color: hsl(var(--gold) / 0.45);
  background: hsl(var(--gold) / 0.12);
}

.reader-verse-tab--active {
  border-color: hsl(var(--gold) / 0.65);
  background: hsl(var(--gold) / 0.2);
  color: hsl(var(--foreground));
  box-shadow: 0 0 0 1px hsl(var(--gold) / 0.25);
}

.reader-verse-tab:focus-visible {
  outline: 2px solid hsl(var(--gold) / 0.55);
  outline-offset: 2px;
}

.bible-reader-verse-page .reader-verse-tab-stub {
  margin: 0;
  padding: 1rem 0.25rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: hsl(var(--muted-foreground));
}

.reader-verse-audio-host {
  min-height: 120px;
}

.reader-verse-audio-item {
  padding: 0.85rem 1rem;
  border: 1px solid hsl(var(--border) / 0.55);
  border-radius: var(--radius);
  background: hsl(var(--card));
  margin-bottom: 0.85rem;
}

.reader-verse-audio-item:last-child {
  margin-bottom: 0;
}

.reader-verse-audio-author {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  color: hsl(var(--gold));
}

.reader-verse-audio-meta {
  margin: 0 0 0.65rem;
  font-size: 0.88rem;
  color: hsl(var(--muted-foreground));
}

.reader-verse-audio-el {
  width: 100%;
  min-width: 0;
}

/* Photo Companion / раздел археологии: карусель растровых слайдов */
.reader-archaeology-host {
  min-height: 120px;
  margin-top: 0.5rem;
}

.reader-archaeology-carousel {
  border: 1px solid hsl(var(--border) / 0.55);
  border-radius: var(--radius);
  background: hsl(var(--card));
  padding: 0.75rem;
}

.reader-archaeology-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 0.65rem;
}

.reader-archaeology-nav {
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border) / 0.65);
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.reader-archaeology-nav:hover {
  border-color: hsl(var(--gold) / 0.55);
  background: hsl(var(--gold) / 0.12);
}

.reader-archaeology-nav:focus-visible {
  outline: 2px solid hsl(var(--gold) / 0.55);
  outline-offset: 2px;
}

.reader-archaeology-counter {
  font-size: 0.9rem;
  color: hsl(var(--muted-foreground));
  min-width: 4.5rem;
  text-align: center;
}

.reader-archaeology-frame {
  border-radius: calc(var(--radius) - 2px);
  overflow: hidden;
  background: #0a0a0a;
  line-height: 0;
}

.reader-archaeology-img {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
}

.reader-archaeology-caption {
  margin-top: 0.65rem;
  padding: 0.65rem 0.5rem 0.15rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: hsl(var(--muted-foreground));
  white-space: pre-wrap;
  word-break: break-word;
  border-top: 1px solid hsl(var(--border) / 0.45);
  max-height: 16rem;
  overflow-y: auto;
}

.reader-archaeology-caption:empty {
  display: none;
}

.section-archaeology-slides {
  margin: 0.75rem 0 0;
}

.section-archaeology-back {
  margin-top: 1rem;
}

.reader-commentary-box {
  background: hsl(var(--card));
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border) / 0.6);
  padding: 1rem;
}

/* Одна колонка толкований: горизонтальный отступ задаёт .reader-commentary-item (32px), не коробка — иначе 16+32. */
.reader-commentary-box:not(.reader-commentary-box--stack) {
  padding-left: 0;
  padding-right: 0;
}

.reader-commentary-host > .loading {
  padding-left: 32px;
  padding-right: 32px;
  margin: 0;
}

/* Режим «Все»: нет общей коробки вокруг списка — только карточки по очереди (см. .reader-commentary-host--all). */
.reader-commentary-box.reader-commentary-box--stack {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.reader-commentary-host {
  min-height: 240px;
}

.reader-commentary-host--all {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Горизонтальный паддинг карточки толкования 32px (не 16). */
.reader-commentary-item {
  padding-left: 32px;
  padding-right: 32px;
}

.reader-commentary-host--all > .reader-commentary-item {
  margin: 0;
  padding: 1rem 32px;
  border: 1px solid hsl(var(--border) / 0.6);
  border-radius: var(--radius);
  background: hsl(var(--card));
}

.reader-commentary-item h3 {
  margin: 0 0 8px;
  padding: 0;
  text-indent: 0;
  color: hsl(var(--gold));
  font-size: 1.44rem;
  font-weight: 600;
  line-height: 1.35;
}

/* Подзаголовок внутри HTML толкования: как заголовок карточки по метрикам, цвет обычного текста. */
.reader-commentary-body h2 {
  margin: 8px 0;
  padding: 0;
  text-indent: 0;
  color: hsl(var(--foreground));
  font-size: 1.44rem;
  font-weight: 600;
  line-height: 1.35;
}

.reader-commentary-body h4 {
  margin: 8px 0;
  padding: 0;
  text-indent: 0;
  color: inherit;
  /* Как .reader-commentary-item h3 / .reader-commentary-body h2 */
  font-size: 1.44rem;
  font-weight: 600;
  line-height: 1.35;
}

/* Модули (Азбука и др.) часто ставят внутри h4 span с font-weight: normal — снимаем. */
.reader-commentary-body h4 * {
  font-weight: inherit !important;
}

/* Стык «полотном» только вне режима отдельных карточек (сейчас несколько items только при --all). */
.reader-commentary-host:not(.reader-commentary-host--all) > .reader-commentary-item + .reader-commentary-item {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid hsl(var(--border) / 0.55);
}

.reader-commentary-body {
  /* Было 1.65em; +30% для красной строки */
  --reader-commentary-indent: 2.145em;
  font-size: 1rem;
  line-height: 1.5;
  text-align: justify;
  text-align-last: start;
  text-indent: var(--reader-commentary-indent);
  hyphens: auto;
}

/* Остаточные <hr> из модулей — без видимой линии (дубль к удалению в rewriteCommentaryBodyHtml). */
.reader-commentary-body hr {
  display: none;
}

/* Декоративные картинки навигации MyBIBLE (left_arrow, right_arrow, bottom_home) — дубль к удалению в JS. */
.reader-commentary-body img[src*="left_arrow" i],
.reader-commentary-body img[src*="left-arrow" i],
.reader-commentary-body img[src*="right_arrow" i],
.reader-commentary-body img[src*="right-arrow" i],
.reader-commentary-body img[src*="bottom_home" i],
.reader-commentary-body img[src*="bottom-home" i] {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  visibility: hidden !important;
}

/* Нижняя «навигация» MyBIBLE: пустые ссылки с пробелами — три подчёркивания; дубль к удалению в bible-reader-verse.js. */
.reader-commentary-body #nav_bottom,
.reader-commentary-body center#nav_bottom,
.reader-commentary-body a#left_arrow,
.reader-commentary-body a#left-arrow,
.reader-commentary-body a#right_arrow,
.reader-commentary-body a#right-arrow,
.reader-commentary-body a#bottom_home,
.reader-commentary-body a#bottom-home {
  display: none !important;
}

/* Абзацы и цитаты */
.reader-commentary-body p {
  margin: 0;
  text-indent: var(--reader-commentary-indent);
}

.reader-commentary-body blockquote {
  text-indent: var(--reader-commentary-indent);
}

.reader-commentary-body blockquote p {
  text-indent: var(--reader-commentary-indent);
}

/*
 * Модули часто отдают блок в <div> без <p> (абзацы через <br>, обёртки).
 * :not(:has(> p)) — если у обёртки уже есть прямой <p>, не дублируем отступ на корневом div.
 */
.reader-commentary-body div:not(:has(> p)):not(:has(> :is(h1, h2, h3, h4, h5, h6))) {
  text-indent: var(--reader-commentary-indent);
}

/* Заголовок + потомки: контейнер без общей красной строки, у блоков после заголовка — как у абзаца. */
.reader-commentary-body div:has(> :is(h1, h2, h3, h4, h5, h6)) {
  text-indent: 0;
}

.reader-commentary-body div:has(> :is(h1, h2, h3, h4, h5, h6)) > *:not(:is(h1, h2, h3, h4, h5, h6)):not(ul):not(ol):not(table) {
  text-indent: var(--reader-commentary-indent);
}

/* Ссылки в толковании: как обычный текст; золото только при наведении. */
.reader-commentary-body a,
.reader-commentary-body a:visited {
  color: hsl(var(--foreground));
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.reader-commentary-body a:hover {
  color: hsl(var(--gold));
}

.reader-commentary-body a.reader-commentary-verse-link {
  font-weight: 500;
}

.reader-verse-comments-section {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid hsl(var(--border) / 0.55);
}

.reader-verse-comments-title {
  margin: 0 0 0.6rem;
  font-size: 1.1rem;
}

.reader-verse-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 0.45rem;
}

.reader-verse-filter-label {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  cursor: pointer;
  align-items: stretch;
}

.reader-filter-select {
  min-width: 260px;
}

.enoch-btn {
  border: 1px solid hsl(var(--border));
  background: hsl(var(--gold) / 0.15);
  color: hsl(var(--foreground));
  border-radius: 0.5rem;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  font-weight: 600;
}

.enoch-btn:hover:not(:disabled) {
  border-color: hsl(var(--gold) / 0.65);
  background: hsl(var(--gold) / 0.26);
}

.enoch-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.enoch-result {
  margin-bottom: 0.8rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid hsl(var(--border) / 0.8);
  background: hsl(var(--muted) / 0.45);
  color: hsl(var(--foreground));
  line-height: 1.45;
}

.enoch-result.hidden {
  display: none;
}

.enoch-result .label {
  color: hsl(var(--gold-dark));
  font-weight: 700;
  margin-right: 0.35rem;
}

.reader-comments-block {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid hsl(var(--border) / 0.55);
}

.reader-comments-block.hidden {
  display: none;
}

.reader-comments-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.reader-comments-block-header h3 {
  margin: 0;
  font-size: 1rem;
}

.reader-comments-close {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  border-radius: 0.35rem;
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.reader-comments-close:hover {
  color: hsl(var(--foreground));
  background: hsl(var(--border) / 0.5);
}

.reader-comments-list {
  display: grid;
  gap: 0.55rem;
}

.reader-comments-toolbar {
  margin-bottom: 0.45rem;
}

.reader-comments-toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.reader-comments-toolbar .bible-reader-select {
  min-width: 210px;
}

.reader-comment-item {
  border: 1px solid hsl(var(--border) / 0.6);
  border-radius: 0.5rem;
  padding: 0.55rem 0.7rem;
  background: hsl(var(--card));
}

.reader-comment-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.25rem;
}

.reader-comment-author {
  color: hsl(var(--gold-dark));
  font-weight: 600;
}

.reader-comment-content {
  white-space: pre-wrap;
  line-height: 1.35;
}

.reader-comment-actions {
  margin-top: 0.35rem;
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.reader-comment-replies {
  margin-top: 0.5rem;
  margin-left: 1rem;
  display: grid;
  gap: 0.45rem;
}

.reader-comment-replies .hidden {
  display: none;
}

.reader-comment-form {
  margin-top: 0.65rem;
  display: grid;
  gap: 0.5rem;
}

.reader-comment-form label {
  display: grid;
  gap: 0.25rem;
}

.reader-comment-form input,
.reader-comment-form textarea {
  width: 100%;
  border: 1px solid hsl(var(--border));
  border-radius: 0.45rem;
  padding: 0.45rem 0.55rem;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

.reader-comment-form textarea {
  resize: vertical;
}

.verse-comment-wrap {
  width: 100%;
  margin-top: 0.4rem;
  padding-left: 2.6rem;
}

.verse-comment-wrap.hidden {
  display: none;
}

.verse-comments-toggle {
  border: 1px solid hsl(var(--border));
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  border-radius: 0.45rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.76rem;
  cursor: pointer;
}

.verse-comments-toggle:hover {
  border-color: hsl(var(--gold) / 0.55);
  color: hsl(var(--foreground));
  background: hsl(var(--gold) / 0.12);
}

.comment-like-btn.active {
  border-color: hsl(var(--gold) / 0.75);
  color: hsl(var(--foreground));
  background: hsl(var(--gold) / 0.2);
}

/* ============================
   Bookmarks & History (Фаза 6)
   ============================ */

.history-actions {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

#settings-history .reader-settings-subheading {
  margin: 1rem 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
}

#settings-history .reader-settings-subheading:first-of-type {
  margin-top: 0;
}

.reader-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.reader-nav-empty {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  padding: 0.5rem 0;
}

.reader-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 0.4rem 0.6rem;
  text-align: left;
  gap: 0.1rem;
  height: auto;
}

.nav-item-ref {
  font-size: 0.9rem;
  font-weight: 500;
  color: hsl(var(--foreground));
}

.nav-item-mod {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}

.nav-item-date {
  font-size: 0.72rem;
  color: hsl(var(--muted-foreground) / 0.7);
}

.nav-item-audio {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: hsl(var(--gold, 45 80% 42%));
  margin-top: 0.12rem;
}

.reader-bookmarks-hint {
  margin: 0 0 0.65rem;
  font-size: 0.78rem;
  line-height: 1.35;
  color: hsl(var(--muted-foreground));
}

.verse-bookmark-btn {
  width: 35px;
  height: 35px;
  font-size: 1.2rem;
  line-height: 1;
}

.verse-bookmark-btn.active {
  color: hsl(var(--gold, 45 80% 50%));
  border-color: hsl(var(--gold, 45 80% 50%) / 0.5);
}

/* ============================
   Copy & Share (Фаза 5)
   ============================ */

.verse-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.2rem;
  opacity: 0;
  transition: opacity 0.15s;
  /* Справа: копировать, С, толкования, чтение главы, закладка */
  position: absolute;
  right: 0.15rem;
  top: 50%;
  transform: translateY(-50%);
  max-width: min(100%, 17rem);
  background: hsl(var(--card) / 0.92);
  border-radius: var(--radius);
  padding: 0.1rem 0.25rem;
  backdrop-filter: blur(2px);
}

.verse-action-abbrev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1;
}

.verse-item:hover .verse-actions,
.verse-item:focus-within .verse-actions {
  opacity: 1;
}

.verse-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  text-decoration: none;
  font-size: 0.72rem;
  padding: 0;
  flex-shrink: 0;
}

.verse-action-btn:hover {
  background: hsl(var(--gold) / 0.12);
  border-color: hsl(var(--gold) / 0.5);
  color: hsl(var(--foreground));
}

.verse-copy-btn.copied {
  background: hsl(var(--gold) / 0.2);
  border-color: hsl(var(--gold) / 0.6);
  color: hsl(var(--foreground));
}

/* ============================
   Strong's Numbers
   По умолчанию маркеры скрыты.
   Включаются классом .show-strongs на .verse-list
   ============================ */

.verse-word.has-strongs {
  cursor: pointer;
}

.verse-word.has-strongs:hover {
  background: hsl(var(--gold, 45 80% 50%) / 0.12);
  border-radius: 2px;
}

.verse-list.show-strongs .verse-word.has-strongs {
  border-bottom: 1px dotted hsl(var(--gold, 45 80% 50%) / 0.8);
  padding-bottom: 1px;
}

.verse-list.show-strongs .verse-word.has-strongs::after {
  content: attr(data-strongs);
  font-size: 0.6em;
  vertical-align: super;
  color: hsl(var(--gold, 45 80% 50%) / 0.75);
  margin-left: 1px;
}

/* Поведенческие классы — режим чтения */
.verse-list.hide-crossrefs .verse-crossref-btn {
  display: none;
}

/* «С» скрыта глобально для списка, но на конкретной строке при hover/focus снова видна (4-я «иконка» рядом с тремя в .verse-actions) */
.verse-list.hide-crossrefs .verse-item:hover .verse-crossref-btn,
.verse-list.hide-crossrefs .verse-item:focus-within .verse-crossref-btn {
  display: inline-flex !important;
}

.verse-list.no-word-click .verse-word {
  cursor: inherit;
  pointer-events: none;
}

.verse-list.no-row-click .verse-item {
  cursor: default;
}

.verse-list.no-row-click .verse-item:hover {
  background: hsl(var(--gold) / 0.09);
  box-shadow: inset 3px 0 0 0 hsl(var(--gold) / 0.55);
}

/* ============================
   Поиск по стихам (Фаза 3)
   ============================ */

.verses-section-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

/* Строка поиска — единый блок как у кнопок/селектов читалки, без цветной обводки при фокусе */
.verse-search-form {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex: 1;
  min-width: 0;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  overflow: hidden;
}

.verse-search-input {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 0;
  font-size: 0.95rem;
  background: transparent;
  color: hsl(var(--foreground));
}

.verse-search-input::placeholder {
  color: hsl(var(--muted-foreground));
}

.verse-search-input:focus {
  outline: none;
  background: hsl(var(--gold) / 0.08);
}

.verse-search-btn {
  padding: 0.5rem 0.85rem;
  border: none;
  border-left: 1px solid hsl(var(--border) / 0.85);
  border-radius: 0;
  background: transparent;
  color: hsl(var(--foreground));
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}

.verse-search-btn:hover,
.verse-search-btn:focus-visible {
  outline: none;
  background: hsl(var(--gold) / 0.14);
  color: hsl(var(--gold-dark));
}

.verse-search-clear-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  min-width: 2.5rem;
  padding: 0;
  border: none;
  border-left: 1px solid hsl(var(--border) / 0.85);
  border-radius: 0;
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}

.verse-search-clear-btn:hover,
.verse-search-clear-btn:focus-visible {
  outline: none;
  background: hsl(var(--muted) / 0.45);
  color: hsl(var(--foreground));
}

.search-results-header {
  padding: 0.5rem 0;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: hsl(var(--muted-foreground));
  list-style: none;
  border-bottom: 1px solid hsl(var(--border));
}

.search-module-group {
  list-style: none;
  font-size: 0.8rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  padding: 0.75rem 0 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.search-result-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid hsl(var(--border) / 0.5);
}

.search-result-ref {
  font-size: 0.8rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  flex-shrink: 0;
}

.search-go-btn {
  flex-shrink: 0;
}

.search-result-text {
  flex: 1 1 100%;
  font-size: 0.95rem;
  line-height: 1.6;
}

mark.search-highlight {
  background: hsl(var(--gold) / 0.3);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

/* ============================
   Параллельный вид (Фаза 2)
   ============================ */

.verse-list.parallel-view {
  overflow-x: auto;
  display: block;
}

.verse-list.parallel-view .verse-item.parallel-row,
.verse-list.parallel-view .parallel-header-row {
  display: grid;
  grid-template-columns: 2.5rem repeat(var(--col-count, 2), minmax(200px, 1fr));
  gap: 0.25rem 0.75rem;
  align-items: start;
  border-bottom: 1px solid hsl(var(--border) / 0.6);
  padding: 0.4rem 0;
  list-style: none;
}

.verse-list.parallel-view .verse-item.parallel-row:hover {
  background: hsl(var(--gold) / 0.09);
  box-shadow: inset 3px 0 0 0 hsl(var(--gold) / 0.5);
}

.verse-list.parallel-view .verse-item.parallel-row.verse-item--row-menu-active {
  background: hsl(var(--gold) / 0.14);
  box-shadow: inset 3px 0 0 0 hsl(var(--gold-dark));
}

.verse-list.parallel-view .parallel-header-row {
  position: sticky;
  top: 0;
  background: hsl(var(--card));
  z-index: 2;
  border-bottom: 2px solid hsl(var(--border));
  padding: 0.5rem 0;
}

.parallel-header-cell {
  font-size: 0.78rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.parallel-main-col.parallel-header-cell {
  color: hsl(var(--foreground));
}

.verse-list.parallel-view .verse-num.verse-num-col {
  font-size: 0.95rem;
  font-weight: 400;
  color: inherit;
  padding-top: 0.15rem;
  text-align: left;
}

.verse-list.parallel-view .verse-text.parallel-col {
  font-size: 0.95rem;
  line-height: 1.65;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Сноска на всю ширину строки параллели, не добавляя лишних колонок в grid */
.verse-list.parallel-view .verse-item.parallel-row .verse-footnote-drawer {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.verse-list.parallel-view .verse-text.parallel-main-col {
  font-weight: 500;
}

.parallel-col-missing {
  color: hsl(var(--muted-foreground));
  font-style: italic;
}

.verse-list.parallel-view .parallel-full-row {
  grid-column: 1 / -1;
  list-style: none;
}

.verse-list.parallel-view .verse-book-heading,
.verse-list.parallel-view .verse-chapter-heading {
  list-style: none;
}

/* Заголовки в параллели — та же вертикаль, что у текста колонок */
.verse-list.parallel-view .verse-book-heading.parallel-full-row,
.verse-list.parallel-view .verse-chapter-heading.parallel-full-row {
  padding-left: calc(2.5rem + 0.75rem);
}

@media (max-width: 640px) {
  .verse-list.parallel-view .verse-item.parallel-row,
  .verse-list.parallel-view .parallel-header-row {
    grid-template-columns: 1.75rem repeat(var(--col-count, 2), minmax(140px, 1fr));
    gap: 0.15rem 0.5rem;
  }

  .verse-list.parallel-view .verse-text.parallel-col {
    font-size: 0.88rem;
  }

  .verse-list.parallel-view .verse-book-heading.parallel-full-row,
  .verse-list.parallel-view .verse-chapter-heading.parallel-full-row {
    padding-left: calc(1.75rem + 0.5rem);
  }

  .verse-list.parallel-view .verse-num.verse-num-col {
    font-size: 0.88rem;
  }
}

/* ============================
   Визуальные настройки (CSS vars)
   ============================ */

.verse-list {
  font-family: var(--reader-font, inherit);
  font-size: var(--reader-size, inherit);
  color: var(--reader-color, inherit);
}

/* ============================
   Рамки вокруг текста (--reader-frame-color)
   ============================ */

.verses-section {
  --reader-frame-color: var(--reader-frame-color-custom, hsl(var(--gold)));
  --reader-bg-color: #f5f0e6;
  --reader-bg-pattern-color: #d4c4a8;
}

/* Подложка: однотонная */
.verses-section[data-bg-mode="solid"] {
  background: var(--reader-bg-color) !important;
}

/* Подложка: узоры (светлая база + паттерн) */
.verses-section[data-bg-mode="pattern"] {
  background-color: var(--reader-bg-color) !important;
  background-image: var(--reader-bg-pattern-image) !important;
}

.verses-section[data-bg-mode="pattern"][data-bg-pattern="dots"] {
  --reader-bg-pattern-image:
    radial-gradient(circle at center, var(--reader-bg-pattern-color) 1px, transparent 1px);
  background-size: 12px 12px !important;
}

.verses-section[data-bg-mode="pattern"][data-bg-pattern="lines"] {
  --reader-bg-pattern-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      color-mix(in srgb, var(--reader-bg-pattern-color) 35%, transparent) 3px,
      color-mix(in srgb, var(--reader-bg-pattern-color) 35%, transparent) 4px
    );
  background-size: 100% 8px !important;
}

.verses-section[data-bg-mode="pattern"][data-bg-pattern="grid"] {
  --reader-bg-pattern-image:
    linear-gradient(color-mix(in srgb, var(--reader-bg-pattern-color) 25%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--reader-bg-pattern-color) 25%, transparent) 1px, transparent 1px);
  background-size: 16px 16px !important;
}

.verses-section[data-bg-mode="pattern"][data-bg-pattern="parchment"] {
  --reader-bg-pattern-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08' fill='%23d4c4a8'/%3E%3C/svg%3E");
  background-size: 64px 64px !important;
}

.verses-section[data-bg-mode="pattern"][data-bg-pattern="crosshatch"] {
  --reader-bg-pattern-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 2px,
      color-mix(in srgb, var(--reader-bg-pattern-color) 40%, transparent) 2px,
      color-mix(in srgb, var(--reader-bg-pattern-color) 40%, transparent) 3px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 2px,
      color-mix(in srgb, var(--reader-bg-pattern-color) 40%, transparent) 2px,
      color-mix(in srgb, var(--reader-bg-pattern-color) 40%, transparent) 3px
    );
  background-size: 20px 20px !important;
}

.verses-section[data-bg-mode="pattern"][data-bg-pattern="diagonal"] {
  --reader-bg-pattern-image:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 4px,
      color-mix(in srgb, var(--reader-bg-pattern-color) 30%, transparent) 4px,
      color-mix(in srgb, var(--reader-bg-pattern-color) 30%, transparent) 5px
    );
  background-size: 14px 14px !important;
}

.verses-section[data-frame="simple"] {
  border: 1px solid var(--reader-frame-color);
}

.verses-section[data-frame="simple2"] {
  border: 2px solid var(--reader-frame-color);
}

.verses-section[data-frame="double"] {
  border: 1px solid var(--reader-frame-color);
  outline: 2px solid color-mix(in srgb, var(--reader-frame-color) 40%, transparent);
  outline-offset: 3px;
}

.verses-section[data-frame="double2"] {
  border: 3px double var(--reader-frame-color);
}

.verses-section[data-frame="shadow"] {
  box-shadow: 0 0 0 1px var(--reader-frame-color),
              4px 4px 0 0 color-mix(in srgb, var(--reader-frame-color) 30%, transparent),
              inset 0 0 0 4px color-mix(in srgb, var(--reader-frame-color) 10%, transparent);
}

.verses-section[data-frame="dotted"] {
  border: 2px dotted var(--reader-frame-color);
}

.verses-section[data-frame="dashed"] {
  border: 2px dashed var(--reader-frame-color);
}

.verses-section[data-frame="groove"] {
  border: 4px groove var(--reader-frame-color);
}

.verses-section[data-frame="ridge"] {
  border: 4px ridge var(--reader-frame-color);
}

.verses-section[data-frame="inset"] {
  border: 4px inset var(--reader-frame-color);
}

.verses-section[data-frame="outset"] {
  border: 4px outset var(--reader-frame-color);
}

.verses-section[data-frame="soft"] {
  box-shadow: 0 0 0 1px var(--reader-frame-color), 0 4px 12px color-mix(in srgb, var(--reader-frame-color) 25%, transparent);
}

.verses-section[data-frame="glow"] {
  box-shadow: 0 0 0 1px var(--reader-frame-color), 0 0 16px color-mix(in srgb, var(--reader-frame-color) 35%, transparent);
}

.verses-section[data-frame="thick"] {
  border: 4px solid var(--reader-frame-color);
}

.verses-section[data-frame="thin-double"] {
  border: 1px solid var(--reader-frame-color);
  box-shadow: inset 0 0 0 1px var(--reader-frame-color);
}

.verses-section[data-frame="triple"] {
  border: 1px solid var(--reader-frame-color);
  outline: 1px solid var(--reader-frame-color);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--reader-frame-color) 50%, transparent);
}

.verses-section[data-frame="classic"] {
  border: 1px solid var(--reader-frame-color);
  border-left-width: 4px;
  border-right-width: 4px;
}

.verses-section[data-frame="top-bottom"] {
  border-top: 2px solid var(--reader-frame-color);
  border-bottom: 2px solid var(--reader-frame-color);
}

.verses-section[data-frame="left-right"] {
  border-left: 3px solid var(--reader-frame-color);
  border-right: 3px solid var(--reader-frame-color);
}

.verses-section[data-frame="mixed"] {
  border: 1px solid var(--reader-frame-color);
  border-left: 4px solid var(--reader-frame-color);
}

.verses-section[data-frame="rounded"] {
  border: 2px solid var(--reader-frame-color);
  border-radius: 0.5rem;
}

.verses-section[data-frame="rounded-thick"] {
  border: 4px solid var(--reader-frame-color);
  border-radius: 0.75rem;
}

.verses-section[data-frame="dotted-round"] {
  border: 2px dotted var(--reader-frame-color);
  border-radius: 0.5rem;
}

.verses-section[data-frame="dashed-round"] {
  border: 2px dashed var(--reader-frame-color);
  border-radius: 0.5rem;
}

.verses-section[data-frame="inner"] {
  box-shadow: inset 0 0 0 2px var(--reader-frame-color);
}

.verses-section[data-frame="inner-double"] {
  box-shadow: inset 0 0 0 2px var(--reader-frame-color), inset 0 0 0 4px color-mix(in srgb, var(--reader-frame-color) 30%, transparent);
}

.verses-section[data-frame="outer-glow"] {
  box-shadow: 0 0 0 1px var(--reader-frame-color), 0 0 24px color-mix(in srgb, var(--reader-frame-color) 40%, transparent);
}

.verses-section[data-frame="elegant"] {
  border: 1px solid var(--reader-frame-color);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--reader-frame-color) 20%, transparent);
}

.verses-section[data-frame="bold"] {
  border: 5px solid var(--reader-frame-color);
}

.verses-section[data-frame="minimal"] {
  border-bottom: 2px solid var(--reader-frame-color);
}

.verses-section[data-frame="minimal-top"] {
  border-top: 2px solid var(--reader-frame-color);
}

.verses-section[data-frame="box"] {
  border: 1px solid var(--reader-frame-color);
  box-shadow: 2px 2px 0 var(--reader-frame-color);
}

.verses-section[data-frame="layered"] {
  box-shadow: 0 0 0 1px var(--reader-frame-color),
              0 0 0 4px color-mix(in srgb, var(--reader-frame-color) 20%, transparent),
              0 0 0 6px var(--reader-frame-color);
}

.verses-section[data-frame="ornament1"] {
  border: 1px solid var(--reader-frame-color);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Cpath d='M5,5 L5,24 M5,5 L24,5' stroke='%23b8922a' stroke-width='2.5' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='5' cy='5' r='2.5' fill='%23b8922a'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Cpath d='M45,5 L45,24 M45,5 L26,5' stroke='%23b8922a' stroke-width='2.5' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='45' cy='5' r='2.5' fill='%23b8922a'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Cpath d='M5,45 L5,26 M5,45 L24,45' stroke='%23b8922a' stroke-width='2.5' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='5' cy='45' r='2.5' fill='%23b8922a'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Cpath d='M45,45 L45,26 M45,45 L26,45' stroke='%23b8922a' stroke-width='2.5' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='45' cy='45' r='2.5' fill='%23b8922a'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: top left, top right, bottom left, bottom right;
  background-size: 50px 50px, 50px 50px, 50px 50px, 50px 50px;
}

.verses-section[data-frame="ornament2"] {
  border: 1px solid var(--reader-frame-color);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M5,5 L5,26 M5,5 L26,5' stroke='%23b8922a' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3Cpath d='M14,5 Q18,12 14,19 Q10,12 14,5' stroke='%23b8922a' stroke-width='1.2' fill='%23b8922a' fill-opacity='0.35'/%3E%3Cpath d='M5,14 Q12,18 19,14 Q12,10 5,14' stroke='%23b8922a' stroke-width='1.2' fill='%23b8922a' fill-opacity='0.35'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M55,5 L55,26 M55,5 L34,5' stroke='%23b8922a' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3Cpath d='M46,5 Q42,12 46,19 Q50,12 46,5' stroke='%23b8922a' stroke-width='1.2' fill='%23b8922a' fill-opacity='0.35'/%3E%3Cpath d='M55,14 Q48,18 41,14 Q48,10 55,14' stroke='%23b8922a' stroke-width='1.2' fill='%23b8922a' fill-opacity='0.35'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M5,55 L5,34 M5,55 L26,55' stroke='%23b8922a' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3Cpath d='M14,55 Q18,48 14,41 Q10,48 14,55' stroke='%23b8922a' stroke-width='1.2' fill='%23b8922a' fill-opacity='0.35'/%3E%3Cpath d='M5,46 Q12,42 19,46 Q12,50 5,46' stroke='%23b8922a' stroke-width='1.2' fill='%23b8922a' fill-opacity='0.35'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M55,55 L55,34 M55,55 L34,55' stroke='%23b8922a' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3Cpath d='M46,55 Q42,48 46,41 Q50,48 46,55' stroke='%23b8922a' stroke-width='1.2' fill='%23b8922a' fill-opacity='0.35'/%3E%3Cpath d='M55,46 Q48,42 41,46 Q48,50 55,46' stroke='%23b8922a' stroke-width='1.2' fill='%23b8922a' fill-opacity='0.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: top left, top right, bottom left, bottom right;
  background-size: 60px 60px, 60px 60px, 60px 60px, 60px 60px;
}

.verses-section[data-frame="ornament3"] {
  border: 1px solid var(--reader-frame-color);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55' height='55' viewBox='0 0 55 55'%3E%3Cpath d='M4,4 L4,26 M4,4 L26,4' stroke='%23b8922a' stroke-width='2.5' stroke-linecap='round' fill='none'/%3E%3Cpath d='M10,10 L10,20 M10,10 L20,10' stroke='%23b8922a' stroke-width='1.2' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='4' cy='4' r='2' fill='%23b8922a'/%3E%3Ccircle cx='10' cy='10' r='1.5' fill='none' stroke='%23b8922a' stroke-width='1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55' height='55' viewBox='0 0 55 55'%3E%3Cpath d='M51,4 L51,26 M51,4 L29,4' stroke='%23b8922a' stroke-width='2.5' stroke-linecap='round' fill='none'/%3E%3Cpath d='M45,10 L45,20 M45,10 L35,10' stroke='%23b8922a' stroke-width='1.2' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='51' cy='4' r='2' fill='%23b8922a'/%3E%3Ccircle cx='45' cy='10' r='1.5' fill='none' stroke='%23b8922a' stroke-width='1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55' height='55' viewBox='0 0 55 55'%3E%3Cpath d='M4,51 L4,29 M4,51 L26,51' stroke='%23b8922a' stroke-width='2.5' stroke-linecap='round' fill='none'/%3E%3Cpath d='M10,45 L10,35 M10,45 L20,45' stroke='%23b8922a' stroke-width='1.2' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='4' cy='51' r='2' fill='%23b8922a'/%3E%3Ccircle cx='10' cy='45' r='1.5' fill='none' stroke='%23b8922a' stroke-width='1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55' height='55' viewBox='0 0 55 55'%3E%3Cpath d='M51,51 L51,29 M51,51 L29,51' stroke='%23b8922a' stroke-width='2.5' stroke-linecap='round' fill='none'/%3E%3Cpath d='M45,45 L45,35 M45,45 L35,45' stroke='%23b8922a' stroke-width='1.2' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='51' cy='51' r='2' fill='%23b8922a'/%3E%3Ccircle cx='45' cy='45' r='1.5' fill='none' stroke='%23b8922a' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: top left, top right, bottom left, bottom right;
  background-size: 55px 55px, 55px 55px, 55px 55px, 55px 55px;
}

/* Орнаменты: цветы, лоза, лиана */
.verses-section[data-frame="flowers"] {
  border: 1px solid var(--reader-frame-color);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'%3E%3Cpath d='M5,5 L5,28 M5,5 L28,5' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cellipse cx='12' cy='12' rx='4' ry='5' fill='%23b8922a' opacity='0.6' transform='rotate(-20 12 12)'/%3E%3Cellipse cx='20' cy='8' rx='3' ry='4' fill='%23d4a84b' opacity='0.7' transform='rotate(15 20 8)'/%3E%3Ccircle cx='12' cy='12' r='2' fill='%238b7355'/%3E%3Cpath d='M8,20 Q10,16 14,18 Q12,22 8,20' fill='%23b8922a' opacity='0.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'%3E%3Cpath d='M65,5 L65,28 M65,5 L42,5' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cellipse cx='58' cy='12' rx='4' ry='5' fill='%23b8922a' opacity='0.6' transform='rotate(20 58 12)'/%3E%3Cellipse cx='50' cy='8' rx='3' ry='4' fill='%23d4a84b' opacity='0.7' transform='rotate(-15 50 8)'/%3E%3Ccircle cx='58' cy='12' r='2' fill='%238b7355'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'%3E%3Cpath d='M5,65 L5,42 M5,65 L28,65' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cellipse cx='12' cy='58' rx='4' ry='5' fill='%23b8922a' opacity='0.6' transform='rotate(70 12 58)'/%3E%3Cellipse cx='8' cy='50' rx='3' ry='4' fill='%23d4a84b' opacity='0.7'/%3E%3Ccircle cx='12' cy='58' r='2' fill='%238b7355'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'%3E%3Cpath d='M65,65 L65,42 M65,65 L42,65' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cellipse cx='58' cy='58' rx='4' ry='5' fill='%23b8922a' opacity='0.6' transform='rotate(110 58 58)'/%3E%3Cellipse cx='62' cy='50' rx='3' ry='4' fill='%23d4a84b' opacity='0.7' transform='rotate(-20 62 50)'/%3E%3Ccircle cx='58' cy='58' r='2' fill='%238b7355'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: top left, top right, bottom left, bottom right;
  background-size: 70px 70px, 70px 70px, 70px 70px, 70px 70px;
}

.verses-section[data-frame="grapevine"] {
  border: 1px solid var(--reader-frame-color);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M5,5 L5,32 M5,5 L32,5' stroke='%23b8922a' stroke-width='1.8' fill='none'/%3E%3Cpath d='M12,12 Q16,8 20,14 Q18,20 14,18' stroke='%235a7d3a' stroke-width='1.5' fill='%234a6b2e' fill-opacity='0.6'/%3E%3Cellipse cx='18' cy='16' rx='3' ry='3.5' fill='%235e3d6b' opacity='0.9'/%3E%3Cellipse cx='14' cy='20' rx='2.5' ry='3' fill='%235e3d6b' opacity='0.85'/%3E%3Cellipse cx='20' cy='20' rx='2' ry='2.5' fill='%235e3d6b' opacity='0.8'/%3E%3Cpath d='M8,24 Q14,22 16,28' stroke='%235a7d3a' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M22,12 Q26,16 24,22' stroke='%235a7d3a' stroke-width='1' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M75,5 L75,32 M75,5 L48,5' stroke='%23b8922a' stroke-width='1.8' fill='none'/%3E%3Cpath d='M68,12 Q64,8 60,14 Q62,20 66,18' stroke='%235a7d3a' stroke-width='1.5' fill='%234a6b2e' fill-opacity='0.6'/%3E%3Cellipse cx='62' cy='16' rx='3' ry='3.5' fill='%235e3d6b' opacity='0.9'/%3E%3Cellipse cx='66' cy='20' rx='2.5' ry='3' fill='%235e3d6b' opacity='0.85'/%3E%3Cellipse cx='60' cy='20' rx='2' ry='2.5' fill='%235e3d6b' opacity='0.8'/%3E%3Cpath d='M72,24 Q66,22 64,28' stroke='%235a7d3a' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M5,75 L5,48 M5,75 L32,75' stroke='%23b8922a' stroke-width='1.8' fill='none'/%3E%3Cpath d='M12,68 Q16,72 20,66 Q18,60 14,62' stroke='%235a7d3a' stroke-width='1.5' fill='%234a6b2e' fill-opacity='0.6'/%3E%3Cellipse cx='18' cy='64' rx='3' ry='3.5' fill='%235e3d6b' opacity='0.9'/%3E%3Cellipse cx='14' cy='60' rx='2.5' ry='3' fill='%235e3d6b' opacity='0.85'/%3E%3Cpath d='M8,56 Q14,58 16,52' stroke='%235a7d3a' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M75,75 L75,48 M75,75 L48,75' stroke='%23b8922a' stroke-width='1.8' fill='none'/%3E%3Cpath d='M68,68 Q64,72 60,66 Q62,60 66,62' stroke='%235a7d3a' stroke-width='1.5' fill='%234a6b2e' fill-opacity='0.6'/%3E%3Cellipse cx='62' cy='64' rx='3' ry='3.5' fill='%235e3d6b' opacity='0.9'/%3E%3Cellipse cx='66' cy='60' rx='2.5' ry='3' fill='%235e3d6b' opacity='0.85'/%3E%3Cpath d='M72,56 Q66,58 64,52' stroke='%235a7d3a' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: top left, top right, bottom left, bottom right;
  background-size: 80px 80px, 80px 80px, 80px 80px, 80px 80px;
}

.verses-section[data-frame="vine"] {
  border: 1px solid var(--reader-frame-color);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='65' height='65' viewBox='0 0 65 65'%3E%3Cpath d='M4,4 L4,28 M4,4 L28,4' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M10,10 C14,6 20,10 18,16 C22,14 26,18 24,24' stroke='%234a6b2e' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M14,12 Q18,10 20,14' stroke='%235a7d3a' stroke-width='1.2' fill='none'/%3E%3Cpath d='M16,18 Q20,16 22,20' stroke='%235a7d3a' stroke-width='1' fill='none'/%3E%3Cellipse cx='22' cy='22' rx='5' ry='3' fill='%234a6b2e' opacity='0.8' transform='rotate(-30 22 22)'/%3E%3Cellipse cx='12' cy='16' rx='4' ry='2.5' fill='%235a7d3a' opacity='0.7' transform='rotate(20 12 16)'/%3E%3Cpath d='M8,22 Q10,26 6,28' stroke='%234a6b2e' stroke-width='1' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='65' height='65' viewBox='0 0 65 65'%3E%3Cpath d='M61,4 L61,28 M61,4 L37,4' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M55,10 C51,6 45,10 47,16 C43,14 39,18 41,24' stroke='%234a6b2e' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='43' cy='22' rx='5' ry='3' fill='%234a6b2e' opacity='0.8' transform='rotate(30 43 22)'/%3E%3Cellipse cx='53' cy='16' rx='4' ry='2.5' fill='%235a7d3a' opacity='0.7' transform='rotate(-20 53 16)'/%3E%3Cpath d='M57,22 Q55,26 59,28' stroke='%234a6b2e' stroke-width='1' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='65' height='65' viewBox='0 0 65 65'%3E%3Cpath d='M4,61 L4,37 M4,61 L28,61' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M10,55 C14,59 20,55 18,49 C22,51 26,47 24,41' stroke='%234a6b2e' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='22' cy='43' rx='5' ry='3' fill='%234a6b2e' opacity='0.8' transform='rotate(60 22 43)'/%3E%3Cellipse cx='12' cy='49' rx='4' ry='2.5' fill='%235a7d3a' opacity='0.7' transform='rotate(-40 12 49)'/%3E%3Cpath d='M8,43 Q10,39 6,37' stroke='%234a6b2e' stroke-width='1' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='65' height='65' viewBox='0 0 65 65'%3E%3Cpath d='M61,61 L61,37 M61,61 L37,61' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M55,55 C51,59 45,55 47,49 C43,51 39,47 41,41' stroke='%234a6b2e' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='43' cy='43' rx='5' ry='3' fill='%234a6b2e' opacity='0.8' transform='rotate(120 43 43)'/%3E%3Cellipse cx='53' cy='49' rx='4' ry='2.5' fill='%235a7d3a' opacity='0.7' transform='rotate(-70 53 49)'/%3E%3Cpath d='M57,43 Q55,39 59,37' stroke='%234a6b2e' stroke-width='1' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: top left, top right, bottom left, bottom right;
  background-size: 65px 65px, 65px 65px, 65px 65px, 65px 65px;
}

.verses-section[data-frame="liana"] {
  border: 1px solid var(--reader-frame-color);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M5,5 L5,25 M5,5 L25,5' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M8,8 S12,6 14,10 S18,12 16,16' stroke='%23557a32' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3Cpath d='M14,12 S18,14 20,10 S24,8 26,12' stroke='%234a6b2e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M12,18 S16,20 18,24' stroke='%23557a32' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M20,14 S24,16 22,20' stroke='%234a6b2e' stroke-width='1' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='16' cy='14' rx='3.5' ry='2' fill='%234a6b2e' opacity='0.85' transform='rotate(-25 16 14)'/%3E%3Cellipse cx='22' cy='18' rx='2.5' ry='1.5' fill='%23557a32' opacity='0.75' transform='rotate(15 22 18)'/%3E%3Cpath d='M10,22 Q12,20 14,22 Q12,24 10,22' fill='%234a6b2e' opacity='0.6'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M55,5 L55,25 M55,5 L35,5' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M52,8 S48,6 46,10 S42,12 44,16' stroke='%23557a32' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3Cpath d='M46,12 S42,14 40,10 S36,8 34,12' stroke='%234a6b2e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='44' cy='14' rx='3.5' ry='2' fill='%234a6b2e' opacity='0.85' transform='rotate(25 44 14)'/%3E%3Cellipse cx='38' cy='18' rx='2.5' ry='1.5' fill='%23557a32' opacity='0.75' transform='rotate(-15 38 18)'/%3E%3Cpath d='M50,22 Q48,20 46,22 Q48,24 50,22' fill='%234a6b2e' opacity='0.6'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M5,55 L5,35 M5,55 L25,55' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M8,52 S12,54 14,50 S18,48 16,44' stroke='%23557a32' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3Cpath d='M14,48 S18,46 20,50 S24,52 26,48' stroke='%234a6b2e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='16' cy='46' rx='3.5' ry='2' fill='%234a6b2e' opacity='0.85' transform='rotate(65 16 46)'/%3E%3Cellipse cx='22' cy='42' rx='2.5' ry='1.5' fill='%23557a32' opacity='0.75' transform='rotate(-55 22 42)'/%3E%3Cpath d='M10,38 Q12,40 14,38 Q12,36 10,38' fill='%234a6b2e' opacity='0.6'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M55,55 L55,35 M55,55 L35,55' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M52,52 S48,54 46,50 S42,48 44,44' stroke='%23557a32' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3Cpath d='M46,48 S42,46 40,50 S36,52 34,48' stroke='%234a6b2e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='44' cy='46' rx='3.5' ry='2' fill='%234a6b2e' opacity='0.85' transform='rotate(115 44 46)'/%3E%3Cellipse cx='38' cy='42' rx='2.5' ry='1.5' fill='%23557a32' opacity='0.75' transform='rotate(-65 38 42)'/%3E%3Cpath d='M50,38 Q48,40 46,38 Q48,36 50,38' fill='%234a6b2e' opacity='0.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: top left, top right, bottom left, bottom right;
  background-size: 60px 60px, 60px 60px, 60px 60px, 60px 60px;
}

.verses-section[data-frame="roses"] {
  border: 1px solid var(--reader-frame-color);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='65' height='65' viewBox='0 0 65 65'%3E%3Cpath d='M5,5 L5,28 M5,5 L28,5' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M14,14 Q18,10 22,14 Q20,18 18,20 Q14,22 12,18 Q14,14 14,14' fill='%23c45c6a' opacity='0.85'/%3E%3Cpath d='M10,16 Q14,14 16,18' stroke='%238b3d45' stroke-width='0.8' fill='none'/%3E%3Ccircle cx='15' cy='16' r='1.5' fill='%235a2a2e'/%3E%3Cpath d='M18,12 Q20,16 16,18 Q14,16 18,12' fill='%23d4707a' opacity='0.7'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='65' height='65' viewBox='0 0 65 65'%3E%3Cpath d='M60,5 L60,28 M60,5 L37,5' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M51,14 Q47,10 43,14 Q45,18 47,20 Q51,22 53,18 Q51,14 51,14' fill='%23c45c6a' opacity='0.85'/%3E%3Ccircle cx='50' cy='16' r='1.5' fill='%235a2a2e'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='65' height='65' viewBox='0 0 65 65'%3E%3Cpath d='M5,60 L5,37 M5,60 L28,60' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M14,51 Q18,47 22,51 Q20,47 18,45 Q14,43 12,47 Q14,51 14,51' fill='%23c45c6a' opacity='0.85'/%3E%3Ccircle cx='15' cy='49' r='1.5' fill='%235a2a2e'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='65' height='65' viewBox='0 0 65 65'%3E%3Cpath d='M60,60 L60,37 M60,60 L37,60' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M51,51 Q47,47 43,51 Q45,55 47,53 Q51,51 53,47 Q51,51 51,51' fill='%23c45c6a' opacity='0.85'/%3E%3Ccircle cx='50' cy='49' r='1.5' fill='%235a2a2e'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: top left, top right, bottom left, bottom right;
  background-size: 65px 65px, 65px 65px, 65px 65px, 65px 65px;
}

.verses-section[data-frame="lily"] {
  border: 1px solid var(--reader-frame-color);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M5,5 L5,26 M5,5 L26,5' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cellipse cx='14' cy='14' rx='3' ry='6' fill='%23e8e0d0' stroke='%23b8922a' stroke-width='0.8' transform='rotate(-30 14 14)'/%3E%3Cellipse cx='18' cy='10' rx='3' ry='6' fill='%23e8e0d0' stroke='%23b8922a' stroke-width='0.8' transform='rotate(10 18 10)'/%3E%3Cellipse cx='12' cy='18' rx='3' ry='6' fill='%23e8e0d0' stroke='%23b8922a' stroke-width='0.8' transform='rotate(-70 12 18)'/%3E%3Ccircle cx='14' cy='14' r='1.5' fill='%23d4a84b'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M55,5 L55,26 M55,5 L34,5' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cellipse cx='46' cy='14' rx='3' ry='6' fill='%23e8e0d0' stroke='%23b8922a' stroke-width='0.8' transform='rotate(30 46 14)'/%3E%3Ccircle cx='46' cy='14' r='1.5' fill='%23d4a84b'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M5,55 L5,34 M5,55 L26,55' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cellipse cx='14' cy='46' rx='3' ry='6' fill='%23e8e0d0' stroke='%23b8922a' stroke-width='0.8' transform='rotate(60 14 46)'/%3E%3Ccircle cx='14' cy='46' r='1.5' fill='%23d4a84b'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M55,55 L55,34 M55,55 L34,55' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cellipse cx='46' cy='46' rx='3' ry='6' fill='%23e8e0d0' stroke='%23b8922a' stroke-width='0.8' transform='rotate(120 46 46)'/%3E%3Ccircle cx='46' cy='46' r='1.5' fill='%23d4a84b'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: top left, top right, bottom left, bottom right;
  background-size: 60px 60px, 60px 60px, 60px 60px, 60px 60px;
}

.verses-section[data-frame="acanthus"] {
  border: 1px solid var(--reader-frame-color);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'%3E%3Cpath d='M5,5 L5,30 M5,5 L30,5' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M12,12 Q16,8 22,10 Q18,16 14,20 Q10,18 12,12' stroke='%234a6b2e' stroke-width='1.5' fill='%235a7d3a' fill-opacity='0.5'/%3E%3Cpath d='M18,14 Q22,18 20,24 Q16,22 14,18' stroke='%234a6b2e' stroke-width='1' fill='%235a7d3a' fill-opacity='0.4'/%3E%3Cpath d='M10,22 Q14,24 18,20 Q14,16 10,18' fill='%234a6b2e' opacity='0.6'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'%3E%3Cpath d='M65,5 L65,30 M65,5 L40,5' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M58,12 Q54,8 48,10 Q52,16 56,20 Q60,18 58,12' stroke='%234a6b2e' stroke-width='1.5' fill='%235a7d3a' fill-opacity='0.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'%3E%3Cpath d='M5,65 L5,40 M5,65 L30,65' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M12,58 Q16,62 22,60 Q18,54 14,50 Q10,52 12,58' stroke='%234a6b2e' stroke-width='1.5' fill='%235a7d3a' fill-opacity='0.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'%3E%3Cpath d='M65,65 L65,40 M65,65 L40,65' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M58,58 Q54,62 48,60 Q52,54 56,50 Q60,52 58,58' stroke='%234a6b2e' stroke-width='1.5' fill='%235a7d3a' fill-opacity='0.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: top left, top right, bottom left, bottom right;
  background-size: 70px 70px, 70px 70px, 70px 70px, 70px 70px;
}

.verses-section[data-frame="oak"] {
  border: 1px solid var(--reader-frame-color);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55' height='55' viewBox='0 0 55 55'%3E%3Cpath d='M5,5 L5,26 M5,5 L26,5' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M12,12 Q14,8 18,12 L16,16 Q12,14 12,12' fill='%234a6b2e' stroke='%235a7d3a' stroke-width='0.6'/%3E%3Cpath d='M16,10 Q20,12 18,16 Q14,18 12,16' fill='%23557a32' opacity='0.8' stroke='%234a6b2e' stroke-width='0.5'/%3E%3Cpath d='M10,18 Q14,16 18,20 Q14,22 10,20' fill='%234a6b2e' opacity='0.7'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55' height='55' viewBox='0 0 55 55'%3E%3Cpath d='M50,5 L50,26 M50,5 L29,5' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M43,12 Q41,8 37,12 L39,16 Q43,14 43,12' fill='%234a6b2e' stroke='%235a7d3a' stroke-width='0.6'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55' height='55' viewBox='0 0 55 55'%3E%3Cpath d='M5,50 L5,29 M5,50 L26,50' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M12,43 Q14,47 18,43 L16,39 Q12,41 12,43' fill='%234a6b2e' stroke='%235a7d3a' stroke-width='0.6'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55' height='55' viewBox='0 0 55 55'%3E%3Cpath d='M50,50 L50,29 M50,50 L29,50' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M43,43 Q41,47 37,43 L39,39 Q43,41 43,43' fill='%234a6b2e' stroke='%235a7d3a' stroke-width='0.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: top left, top right, bottom left, bottom right;
  background-size: 55px 55px, 55px 55px, 55px 55px, 55px 55px;
}

.verses-section[data-frame="wheat"] {
  border: 1px solid var(--reader-frame-color);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Cpath d='M5,5 L5,24 M5,5 L24,5' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M10,10 L10,22' stroke='%23d4a84b' stroke-width='1' fill='none'/%3E%3Cellipse cx='10' cy='8' rx='1.5' ry='2' fill='%23b8922a'/%3E%3Cellipse cx='10' cy='12' rx='1.5' ry='2' fill='%23c9a227'/%3E%3Cellipse cx='10' cy='16' rx='1.5' ry='2' fill='%23b8922a'/%3E%3Cpath d='M16,8 L16,20' stroke='%23d4a84b' stroke-width='0.8' fill='none'/%3E%3Cellipse cx='16' cy='6' rx='1.2' ry='1.5' fill='%23b8922a'/%3E%3Cellipse cx='16' cy='10' rx='1.2' ry='1.5' fill='%23c9a227'/%3E%3Cpath d='M14,14 L18,18 M18,14 L14,18' stroke='%23b8922a' stroke-width='0.5' fill='none'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Cpath d='M45,5 L45,24 M45,5 L26,5' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M40,10 L40,22' stroke='%23d4a84b' stroke-width='1' fill='none'/%3E%3Cellipse cx='40' cy='8' rx='1.5' ry='2' fill='%23b8922a'/%3E%3Cellipse cx='40' cy='12' rx='1.5' ry='2' fill='%23c9a227'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Cpath d='M5,45 L5,26 M5,45 L24,45' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M10,40 L10,28' stroke='%23d4a84b' stroke-width='1' fill='none'/%3E%3Cellipse cx='10' cy='42' rx='1.5' ry='2' fill='%23b8922a'/%3E%3Cellipse cx='10' cy='38' rx='1.5' ry='2' fill='%23c9a227'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Cpath d='M45,45 L45,26 M45,45 L26,45' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M40,40 L40,28' stroke='%23d4a84b' stroke-width='1' fill='none'/%3E%3Cellipse cx='40' cy='42' rx='1.5' ry='2' fill='%23b8922a'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: top left, top right, bottom left, bottom right;
  background-size: 50px 50px, 50px 50px, 50px 50px, 50px 50px;
}

.verses-section[data-frame="berries"] {
  border: 1px solid var(--reader-frame-color);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55' height='55' viewBox='0 0 55 55'%3E%3Cpath d='M5,5 L5,26 M5,5 L26,5' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M10,10 Q14,8 18,12 Q16,16 12,18 Q10,14 10,10' stroke='%235a7d3a' stroke-width='1' fill='none'/%3E%3Ccircle cx='12' cy='12' r='2.5' fill='%238b2a2a'/%3E%3Ccircle cx='16' cy='14' r='2' fill='%239e3232'/%3E%3Ccircle cx='14' cy='18' r='2.2' fill='%237a2222'/%3E%3Ccircle cx='10' cy='16' r='1.8' fill='%239e3232'/%3E%3Cpath d='M12,10 L12,6' stroke='%235a7d3a' stroke-width='0.8' fill='none'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55' height='55' viewBox='0 0 55 55'%3E%3Cpath d='M50,5 L50,26 M50,5 L29,5' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Ccircle cx='43' cy='12' r='2.5' fill='%238b2a2a'/%3E%3Ccircle cx='47' cy='14' r='2' fill='%239e3232'/%3E%3Ccircle cx='45' cy='18' r='2.2' fill='%237a2222'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55' height='55' viewBox='0 0 55 55'%3E%3Cpath d='M5,50 L5,29 M5,50 L26,50' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Ccircle cx='12' cy='43' r='2.5' fill='%238b2a2a'/%3E%3Ccircle cx='16' cy='41' r='2' fill='%239e3232'/%3E%3Ccircle cx='14' cy='37' r='2.2' fill='%237a2222'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55' height='55' viewBox='0 0 55 55'%3E%3Cpath d='M50,50 L50,29 M50,50 L29,50' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Ccircle cx='43' cy='43' r='2.5' fill='%238b2a2a'/%3E%3Ccircle cx='47' cy='41' r='2' fill='%239e3232'/%3E%3Ccircle cx='45' cy='37' r='2.2' fill='%237a2222'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: top left, top right, bottom left, bottom right;
  background-size: 55px 55px, 55px 55px, 55px 55px, 55px 55px;
}

.verses-section[data-frame="fern"] {
  border: 1px solid var(--reader-frame-color);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58' viewBox='0 0 58 58'%3E%3Cpath d='M5,5 L5,27 M5,5 L27,5' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M12,12 L12,22 M10,14 L14,14 M9,16 L15,16 M10,18 L14,18 M11,20 L13,20' stroke='%234a6b2e' stroke-width='0.8' fill='none' stroke-linecap='round'/%3E%3Cpath d='M18,10 L18,20 M16,12 L20,12 M15,14 L21,14 M16,16 L20,16' stroke='%23557a32' stroke-width='0.6' fill='none' stroke-linecap='round'/%3E%3Cpath d='M10,16 Q12,14 14,16 Q12,18 10,16' fill='%234a6b2e' opacity='0.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58' viewBox='0 0 58 58'%3E%3Cpath d='M53,5 L53,27 M53,5 L31,5' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M46,12 L46,22 M44,14 L48,14 M43,16 L49,16' stroke='%234a6b2e' stroke-width='0.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58' viewBox='0 0 58 58'%3E%3Cpath d='M5,53 L5,31 M5,53 L27,53' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M12,46 L12,36 M10,44 L14,44 M9,42 L15,42' stroke='%234a6b2e' stroke-width='0.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58' viewBox='0 0 58 58'%3E%3Cpath d='M53,53 L53,31 M53,53 L31,53' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M46,46 L46,36 M44,44 L48,44 M43,42 L49,42' stroke='%234a6b2e' stroke-width='0.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: top left, top right, bottom left, bottom right;
  background-size: 58px 58px, 58px 58px, 58px 58px, 58px 58px;
}

.verses-section[data-frame="clover"] {
  border: 1px solid var(--reader-frame-color);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55' height='55' viewBox='0 0 55 55'%3E%3Cpath d='M5,5 L5,26 M5,5 L26,5' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Ccircle cx='14' cy='10' r='4' fill='%234a6b2e'/%3E%3Ccircle cx='18' cy='16' r='4' fill='%234a6b2e'/%3E%3Ccircle cx='10' cy='16' r='4' fill='%234a6b2e'/%3E%3Cpath d='M14,20 Q14,26 14,28' stroke='%23557a32' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='14' cy='14' r='2' fill='%235a7d3a' opacity='0.6'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55' height='55' viewBox='0 0 55 55'%3E%3Cpath d='M50,5 L50,26 M50,5 L29,5' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Ccircle cx='41' cy='10' r='4' fill='%234a6b2e'/%3E%3Ccircle cx='45' cy='16' r='4' fill='%234a6b2e'/%3E%3Ccircle cx='37' cy='16' r='4' fill='%234a6b2e'/%3E%3Ccircle cx='41' cy='14' r='2' fill='%235a7d3a' opacity='0.6'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55' height='55' viewBox='0 0 55 55'%3E%3Cpath d='M5,50 L5,29 M5,50 L26,50' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Ccircle cx='14' cy='45' r='4' fill='%234a6b2e'/%3E%3Ccircle cx='18' cy='39' r='4' fill='%234a6b2e'/%3E%3Ccircle cx='10' cy='39' r='4' fill='%234a6b2e'/%3E%3Ccircle cx='14' cy='41' r='2' fill='%235a7d3a' opacity='0.6'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55' height='55' viewBox='0 0 55 55'%3E%3Cpath d='M50,50 L50,29 M50,50 L29,50' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Ccircle cx='41' cy='45' r='4' fill='%234a6b2e'/%3E%3Ccircle cx='45' cy='39' r='4' fill='%234a6b2e'/%3E%3Ccircle cx='37' cy='39' r='4' fill='%234a6b2e'/%3E%3Ccircle cx='41' cy='41' r='2' fill='%235a7d3a' opacity='0.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: top left, top right, bottom left, bottom right;
  background-size: 55px 55px, 55px 55px, 55px 55px, 55px 55px;
}

.verses-section[data-frame="arabesque"] {
  border: 1px solid var(--reader-frame-color);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M5,5 L5,28 M5,5 L28,5' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M10,10 Q18,6 22,14 Q18,18 14,16 Q12,20 18,22 Q14,26 10,22' stroke='%23b8922a' stroke-width='1' fill='none' stroke-linecap='round'/%3E%3Cpath d='M16,12 Q20,16 16,20 Q12,16 16,12' fill='none' stroke='%23d4a84b' stroke-width='0.8'/%3E%3Cpath d='M12,18 Q16,14 20,18' stroke='%23b8922a' stroke-width='0.6' fill='none' opacity='0.7'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M55,5 L55,28 M55,5 L32,5' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M50,10 Q42,6 38,14 Q42,18 46,16 Q48,20 42,22 Q46,26 50,22' stroke='%23b8922a' stroke-width='1' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M5,55 L5,32 M5,55 L28,55' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M10,50 Q18,54 22,46 Q18,42 14,44 Q12,40 18,38 Q14,34 10,38' stroke='%23b8922a' stroke-width='1' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M55,55 L55,32 M55,55 L32,55' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M50,50 Q42,54 38,46 Q42,42 46,44 Q48,40 42,38 Q46,34 50,38' stroke='%23b8922a' stroke-width='1' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: top left, top right, bottom left, bottom right;
  background-size: 60px 60px, 60px 60px, 60px 60px, 60px 60px;
}

.verses-section[data-frame="byzantine"] {
  border: 1px solid var(--reader-frame-color);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='65' height='65' viewBox='0 0 65 65'%3E%3Cpath d='M5,5 L5,30 M5,5 L30,5' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M12,12 L20,12 L20,20 L12,20 Z' stroke='%23b8922a' stroke-width='1' fill='none'/%3E%3Cpath d='M14,14 Q18,14 18,18 Q14,18 14,14' fill='none' stroke='%23d4a84b' stroke-width='0.6'/%3E%3Cpath d='M22,10 Q26,14 22,18 Q18,14 22,10' fill='none' stroke='%23b8922a' stroke-width='0.8'/%3E%3Cpath d='M10,22 Q14,26 18,22 Q14,18 10,22' fill='none' stroke='%23b8922a' stroke-width='0.8'/%3E%3Ccircle cx='16' cy='16' r='1' fill='%23b8922a'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='65' height='65' viewBox='0 0 65 65'%3E%3Cpath d='M60,5 L60,30 M60,5 L35,5' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M53,12 L45,12 L45,20 L53,20 Z' stroke='%23b8922a' stroke-width='1' fill='none'/%3E%3Cpath d='M48,10 Q44,14 48,18 Q52,14 48,10' fill='none' stroke='%23b8922a' stroke-width='0.8'/%3E%3Ccircle cx='49' cy='16' r='1' fill='%23b8922a'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='65' height='65' viewBox='0 0 65 65'%3E%3Cpath d='M5,60 L5,35 M5,60 L30,60' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M12,53 L20,53 L20,45 L12,45 Z' stroke='%23b8922a' stroke-width='1' fill='none'/%3E%3Cpath d='M10,48 Q14,44 18,48 Q14,52 10,48' fill='none' stroke='%23b8922a' stroke-width='0.8'/%3E%3Ccircle cx='16' cy='49' r='1' fill='%23b8922a'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='65' height='65' viewBox='0 0 65 65'%3E%3Cpath d='M60,60 L60,35 M60,60 L35,60' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M53,53 L45,53 L45,45 L53,45 Z' stroke='%23b8922a' stroke-width='1' fill='none'/%3E%3Cpath d='M48,48 Q44,52 48,56 Q52,52 48,48' fill='none' stroke='%23b8922a' stroke-width='0.8'/%3E%3Ccircle cx='49' cy='49' r='1' fill='%23b8922a'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: top left, top right, bottom left, bottom right;
  background-size: 65px 65px, 65px 65px, 65px 65px, 65px 65px;
}

.verses-section[data-frame="greek"] {
  border: 1px solid var(--reader-frame-color);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='45' viewBox='0 0 45 45'%3E%3Cpath d='M5,5 L5,22 M5,5 L22,5' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M8,8 L8,20 M8,8 L20,8 M12,8 L12,20 M16,8 L16,20 M20,8 L20,20 M8,12 L20,12 M8,16 L20,16' stroke='%23b8922a' stroke-width='0.8' fill='none'/%3E%3Cpath d='M10,10 L18,10 L18,18 L10,18 Z' fill='none' stroke='%23d4a84b' stroke-width='0.6'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='45' viewBox='0 0 45 45'%3E%3Cpath d='M40,5 L40,22 M40,5 L23,5' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M37,8 L37,20 M37,8 L25,8 M33,8 L33,20 M29,8 L29,20 M25,8 L25,20 M37,12 L25,12 M37,16 L25,16' stroke='%23b8922a' stroke-width='0.8' fill='none'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='45' viewBox='0 0 45 45'%3E%3Cpath d='M5,40 L5,23 M5,40 L22,40' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M8,37 L8,25 M8,37 L20,37 M12,37 L12,25 M16,37 L16,25 M20,37 L20,25 M8,33 L20,33 M8,29 L20,29' stroke='%23b8922a' stroke-width='0.8' fill='none'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='45' viewBox='0 0 45 45'%3E%3Cpath d='M40,40 L40,23 M40,40 L23,40' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M37,37 L37,25 M37,37 L25,37 M33,37 L33,25 M29,37 L29,25 M25,37 L25,25 M37,33 L25,33 M37,29 L25,29' stroke='%23b8922a' stroke-width='0.8' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: top left, top right, bottom left, bottom right;
  background-size: 45px 45px, 45px 45px, 45px 45px, 45px 45px;
}

.verses-section[data-frame="tendril"] {
  border: 1px solid var(--reader-frame-color);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55' height='55' viewBox='0 0 55 55'%3E%3Cpath d='M5,5 L5,26 M5,5 L26,5' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M10,10 S14,6 18,10 S20,16 16,18 S12,16 10,12' stroke='%23b8922a' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M16,12 S20,14 22,10 S26,12 24,16' stroke='%23d4a84b' stroke-width='0.8' fill='none' stroke-linecap='round' opacity='0.8'/%3E%3Cpath d='M12,18 S16,22 12,24 S8,20 12,18' stroke='%23b8922a' stroke-width='0.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55' height='55' viewBox='0 0 55 55'%3E%3Cpath d='M50,5 L50,26 M50,5 L29,5' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M45,10 S41,6 37,10 S35,16 39,18 S43,16 45,12' stroke='%23b8922a' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M39,12 S35,14 33,10 S29,12 31,16' stroke='%23d4a84b' stroke-width='0.8' fill='none' stroke-linecap='round' opacity='0.8'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55' height='55' viewBox='0 0 55 55'%3E%3Cpath d='M5,50 L5,29 M5,50 L26,50' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M10,45 S14,49 18,45 S20,39 16,37 S12,39 10,43' stroke='%23b8922a' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M16,43 S20,41 22,45 S26,43 24,39' stroke='%23d4a84b' stroke-width='0.8' fill='none' stroke-linecap='round' opacity='0.8'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55' height='55' viewBox='0 0 55 55'%3E%3Cpath d='M50,50 L50,29 M50,50 L29,50' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M45,45 S41,49 37,45 S35,39 39,37 S43,39 45,43' stroke='%23b8922a' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M39,43 S35,41 33,45 S29,43 31,39' stroke='%23d4a84b' stroke-width='0.8' fill='none' stroke-linecap='round' opacity='0.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: top left, top right, bottom left, bottom right;
  background-size: 55px 55px, 55px 55px, 55px 55px, 55px 55px;
}

.verses-section[data-frame="branches"] {
  border: 1px solid var(--reader-frame-color);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M5,5 L5,28 M5,5 L28,5' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M12,12 L20,12 M12,12 L12,20 M16,12 L16,18 M20,12 L18,18' stroke='%238b7355' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M14,14 L18,16 M16,14 L14,18' stroke='%23a08050' stroke-width='0.8' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='18' cy='14' rx='2' ry='1.5' fill='%234a6b2e' opacity='0.7' transform='rotate(-20 18 14)'/%3E%3Cellipse cx='14' cy='18' rx='1.5' ry='2' fill='%23557a32' opacity='0.6' transform='rotate(30 14 18)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M55,5 L55,28 M55,5 L32,5' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M48,12 L40,12 M48,12 L48,20 M44,12 L44,18 M40,12 L42,18' stroke='%238b7355' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='42' cy='14' rx='2' ry='1.5' fill='%234a6b2e' opacity='0.7' transform='rotate(20 42 14)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M5,55 L5,32 M5,55 L28,55' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M12,48 L20,48 M12,48 L12,40 M16,48 L16,42 M20,48 L18,42' stroke='%238b7355' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='18' cy='46' rx='2' ry='1.5' fill='%234a6b2e' opacity='0.7' transform='rotate(70 18 46)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M55,55 L55,32 M55,55 L32,55' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M48,48 L40,48 M48,48 L48,40 M44,48 L44,42 M40,48 L42,42' stroke='%238b7355' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='42' cy='46' rx='2' ry='1.5' fill='%234a6b2e' opacity='0.7' transform='rotate(110 42 46)'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: top left, top right, bottom left, bottom right;
  background-size: 60px 60px, 60px 60px, 60px 60px, 60px 60px;
}

.verses-section[data-frame="pine"] {
  border: 1px solid var(--reader-frame-color);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55' height='55' viewBox='0 0 55 55'%3E%3Cpath d='M5,5 L5,26 M5,5 L26,5' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M14,14 L14,22 M10,16 L18,16 M8,18 L20,18 M6,20 L22,20' stroke='%234a6b2e' stroke-width='1' fill='none' stroke-linecap='round'/%3E%3Cpath d='M12,12 L16,12 L14,16 L12,12' fill='%234a6b2e' opacity='0.7'/%3E%3Cpath d='M10,14 L18,14 L14,18 L10,14' fill='%23557a32' opacity='0.6'/%3E%3Cpath d='M8,16 L20,16 L14,20 L8,16' fill='%234a6b2e' opacity='0.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55' height='55' viewBox='0 0 55 55'%3E%3Cpath d='M50,5 L50,26 M50,5 L29,5' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M41,14 L41,22 M37,16 L45,16 M35,18 L47,18' stroke='%234a6b2e' stroke-width='1' fill='none' stroke-linecap='round'/%3E%3Cpath d='M39,12 L43,12 L41,16 L39,12' fill='%234a6b2e' opacity='0.7'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55' height='55' viewBox='0 0 55 55'%3E%3Cpath d='M5,50 L5,29 M5,50 L26,50' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M14,41 L14,33 M10,37 L18,37 M8,39 L20,39' stroke='%234a6b2e' stroke-width='1' fill='none' stroke-linecap='round'/%3E%3Cpath d='M12,43 L16,43 L14,39 L12,43' fill='%234a6b2e' opacity='0.7'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55' height='55' viewBox='0 0 55 55'%3E%3Cpath d='M50,50 L50,29 M50,50 L29,50' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M41,41 L41,33 M37,37 L45,37 M35,39 L47,39' stroke='%234a6b2e' stroke-width='1' fill='none' stroke-linecap='round'/%3E%3Cpath d='M39,43 L43,43 L41,39 L39,43' fill='%234a6b2e' opacity='0.7'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: top left, top right, bottom left, bottom right;
  background-size: 55px 55px, 55px 55px, 55px 55px, 55px 55px;
}

.verses-section[data-frame="laurel"] {
  border: 1px solid var(--reader-frame-color);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58' viewBox='0 0 58 58'%3E%3Cpath d='M5,5 L5,28 M5,5 L28,5' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M12,12 L18,10 M12,12 L14,18 M16,10 L20,14 M14,18 L18,16' stroke='%234a6b2e' stroke-width='1' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='14' cy='14' rx='3' ry='2' fill='%234a6b2e' opacity='0.8' transform='rotate(-30 14 14)'/%3E%3Cellipse cx='18' cy='12' rx='2.5' ry='1.5' fill='%23557a32' opacity='0.7' transform='rotate(20 18 12)'/%3E%3Cellipse cx='16' cy='16' rx='2' ry='1.2' fill='%234a6b2e' opacity='0.6' transform='rotate(-10 16 16)'/%3E%3Cpath d='M10,20 Q14,22 18,20' stroke='%23557a32' stroke-width='0.8' fill='none'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58' viewBox='0 0 58 58'%3E%3Cpath d='M53,5 L53,28 M53,5 L30,5' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M46,12 L40,10 M46,12 L44,18 M42,10 L38,14 M44,18 L40,16' stroke='%234a6b2e' stroke-width='1' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='44' cy='14' rx='3' ry='2' fill='%234a6b2e' opacity='0.8' transform='rotate(30 44 14)'/%3E%3Cellipse cx='40' cy='12' rx='2.5' ry='1.5' fill='%23557a32' opacity='0.7' transform='rotate(-20 40 12)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58' viewBox='0 0 58 58'%3E%3Cpath d='M5,53 L5,30 M5,53 L28,53' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M12,46 L18,48 M12,46 L14,40 M16,48 L20,44 M14,40 L18,42' stroke='%234a6b2e' stroke-width='1' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='14' cy='44' rx='3' ry='2' fill='%234a6b2e' opacity='0.8' transform='rotate(60 14 44)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58' viewBox='0 0 58 58'%3E%3Cpath d='M53,53 L53,30 M53,53 L30,53' stroke='%23b8922a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M46,46 L40,48 M46,46 L44,40 M42,48 L38,44 M44,40 L40,42' stroke='%234a6b2e' stroke-width='1' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='44' cy='44' rx='3' ry='2' fill='%234a6b2e' opacity='0.8' transform='rotate(120 44 44)'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: top left, top right, bottom left, bottom right;
  background-size: 58px 58px, 58px 58px, 58px 58px, 58px 58px;
}

/* ============================
   Панель комментариев к главе
   ============================ */

.comments-panel-form {
  padding: 0.75rem 1rem;
  border-top: 1px solid hsl(var(--border) / 0.7);
  background: hsl(var(--muted) / 0.3);
  flex-shrink: 0;
}

.comments-panel-toolbar {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid hsl(var(--border) / 0.7);
  background: hsl(var(--muted) / 0.4);
  flex-shrink: 0;
}

/* ============================
   Группы в настройках
   ============================ */

.settings-visual-section {
  margin-bottom: 1.75rem;
}

.settings-visual-section:last-child {
  margin-bottom: 0;
}

.settings-visual-section-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  margin: 0 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid hsl(var(--border));
}

.settings-visual-section .settings-group:last-child {
  margin-bottom: 0;
}

.settings-group {
  margin-bottom: 1.25rem;
}

.settings-group-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--muted-foreground));
  margin: 0 0 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid hsl(var(--border) / 0.6);
}

.settings-group-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.settings-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.settings-checkbox-label,
.settings-radio-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0.2rem 0;
  user-select: none;
}

.settings-checkbox-label input[type="checkbox"],
.settings-radio-label input[type="radio"] {
  width: 1rem;
  height: 1rem;
  accent-color: hsl(var(--gold));
  flex-shrink: 0;
}

.visual-range-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.visual-range-row input[type="range"] {
  flex: 1;
  accent-color: hsl(var(--gold));
}

.visual-range-row span {
  flex-shrink: 0;
  font-size: 0.85rem;
  color: hsl(var(--muted-foreground));
  min-width: 2.5rem;
  text-align: right;
}

.visual-color-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Высота как у .msd-trigger (≈44px с паддингами) */
.visual-color-row input[type="color"] {
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 0.1rem;
  cursor: pointer;
  background: none;
  box-sizing: border-box;
}

.frame-select-wrapper {
  position: relative;
  --pf: hsl(var(--gold));
}

.frame-select-trigger {
  width: 100%;
  min-height: 2.75rem;
  text-align: left;
  padding: 0.5rem 0.75rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-size: 0.925rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-sizing: border-box;
}

.frame-select-trigger:hover {
  border-color: hsl(var(--gold) / 0.55);
}

.frame-preview-mini {
  width: 24px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 0.25rem;
  border: 1px solid transparent;
  box-sizing: border-box;
}

.frame-preview-mini[data-frame="none"] { border-color: hsl(var(--border)); }
.frame-preview-mini[data-frame="simple"],
.frame-preview-mini[data-frame="ornament1"],
.frame-preview-mini[data-frame="ornament2"],
.frame-preview-mini[data-frame="ornament3"],
.frame-preview-mini[data-frame="flowers"],
.frame-preview-mini[data-frame="grapevine"],
.frame-preview-mini[data-frame="vine"],
.frame-preview-mini[data-frame="liana"],
.frame-preview-mini[data-frame="roses"],
.frame-preview-mini[data-frame="lily"],
.frame-preview-mini[data-frame="acanthus"],
.frame-preview-mini[data-frame="oak"],
.frame-preview-mini[data-frame="wheat"],
.frame-preview-mini[data-frame="berries"],
.frame-preview-mini[data-frame="fern"],
.frame-preview-mini[data-frame="clover"],
.frame-preview-mini[data-frame="arabesque"],
.frame-preview-mini[data-frame="byzantine"],
.frame-preview-mini[data-frame="greek"],
.frame-preview-mini[data-frame="tendril"],
.frame-preview-mini[data-frame="branches"],
.frame-preview-mini[data-frame="pine"],
.frame-preview-mini[data-frame="laurel"] { border: 1px solid var(--pf); }
.frame-preview-mini[data-frame="simple2"],
.frame-preview-mini[data-frame="shadow"],
.frame-preview-mini[data-frame="soft"],
.frame-preview-mini[data-frame="glow"],
.frame-preview-mini[data-frame="minimal"],
.frame-preview-mini[data-frame="minimal-top"],
.frame-preview-mini[data-frame="elegant"],
.frame-preview-mini[data-frame="box"],
.frame-preview-mini[data-frame="inner"],
.frame-preview-mini[data-frame="inner-double"],
.frame-preview-mini[data-frame="outer-glow"],
.frame-preview-mini[data-frame="layered"] { border: 1px solid var(--pf); }
.frame-preview-mini[data-frame="double"],
.frame-preview-mini[data-frame="double2"] { border: 2px double var(--pf); }
.frame-preview-mini[data-frame="dotted"],
.frame-preview-mini[data-frame="dotted-round"] { border: 2px dotted var(--pf); }
.frame-preview-mini[data-frame="dashed"],
.frame-preview-mini[data-frame="dashed-round"] { border: 2px dashed var(--pf); }
.frame-preview-mini[data-frame="thick"],
.frame-preview-mini[data-frame="bold"] { border: 3px solid var(--pf); }
.frame-preview-mini[data-frame="groove"] { border: 3px groove var(--pf); }
.frame-preview-mini[data-frame="ridge"] { border: 3px ridge var(--pf); }
.frame-preview-mini[data-frame="rounded"],
.frame-preview-mini[data-frame="rounded-thick"] { border: 2px solid var(--pf); border-radius: 0.35rem; }

.frame-preview-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.25rem;
  max-height: 280px;
  overflow-y: auto;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 0.5rem;
  z-index: 50;
  box-shadow: 0 4px 20px hsl(0 0% 0% / 0.12);
}

.frame-preview-dropdown.hidden,
.visual-bg-pattern-wrap.hidden {
  display: none;
}

.visual-bg-pattern-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.visual-bg-pattern-wrap label span {
  display: block;
  font-size: 0.88rem;
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.25rem;
}

.frame-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
}

.frame-preview-item {
  min-height: 36px;
  border-radius: 0.35rem;
  cursor: pointer;
  transition: all 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  padding: 0.25rem;
  text-align: center;
  background: hsl(var(--background));
}

.frame-preview-item:hover {
  background: hsl(var(--accent) / 0.5);
}

.frame-preview-item.active {
  outline: 2px solid hsl(var(--gold));
  outline-offset: 1px;
}

.frame-preview-item[data-frame="none"] { border: 1px solid hsl(var(--border)); }
.frame-preview-item[data-frame="simple"],
.frame-preview-item[data-frame="ornament1"],
.frame-preview-item[data-frame="ornament2"],
.frame-preview-item[data-frame="ornament3"],
.frame-preview-item[data-frame="shadow"],
.frame-preview-item[data-frame="soft"],
.frame-preview-item[data-frame="glow"],
.frame-preview-item[data-frame="elegant"],
.frame-preview-item[data-frame="box"],
.frame-preview-item[data-frame="outer-glow"],
.frame-preview-item[data-frame="layered"] { border: 1px solid var(--pf); }
.frame-preview-item[data-frame="simple2"],
.frame-preview-item[data-frame="thick"],
.frame-preview-item[data-frame="bold"] { border: 2px solid var(--pf); }
.frame-preview-item[data-frame="double"] { border: 1px solid var(--pf); outline: 1px solid color-mix(in srgb, var(--pf) 50%, transparent); outline-offset: 1px; }
.frame-preview-item[data-frame="double2"] { border: 2px double var(--pf); }
.frame-preview-item[data-frame="dotted"],
.frame-preview-item[data-frame="dotted-round"] { border: 2px dotted var(--pf); }
.frame-preview-item[data-frame="dashed"],
.frame-preview-item[data-frame="dashed-round"] { border: 2px dashed var(--pf); }
.frame-preview-item[data-frame="groove"] { border: 3px groove var(--pf); }
.frame-preview-item[data-frame="ridge"] { border: 3px ridge var(--pf); }
.frame-preview-item[data-frame="inset"] { border: 3px inset var(--pf); }
.frame-preview-item[data-frame="outset"] { border: 3px outset var(--pf); }
.frame-preview-item[data-frame="rounded"],
.frame-preview-item[data-frame="rounded-thick"] { border: 2px solid var(--pf); border-radius: 0.35rem; }
.frame-preview-item[data-frame="minimal"] { border-bottom: 2px solid var(--pf); }
.frame-preview-item[data-frame="minimal-top"] { border-top: 2px solid var(--pf); }
.frame-preview-item[data-frame="inner"],
.frame-preview-item[data-frame="inner-double"] { box-shadow: inset 0 0 0 2px var(--pf); }
.frame-preview-item[data-frame="top-bottom"] { border-top: 2px solid var(--pf); border-bottom: 2px solid var(--pf); }
.frame-preview-item[data-frame="left-right"] { border-left: 2px solid var(--pf); border-right: 2px solid var(--pf); }
.frame-preview-item[data-frame="classic"],
.frame-preview-item[data-frame="mixed"] { border: 1px solid var(--pf); border-left-width: 3px; }
.frame-preview-item[data-frame="flowers"],
.frame-preview-item[data-frame="grapevine"],
.frame-preview-item[data-frame="vine"],
.frame-preview-item[data-frame="liana"],
.frame-preview-item[data-frame="roses"],
.frame-preview-item[data-frame="lily"],
.frame-preview-item[data-frame="acanthus"],
.frame-preview-item[data-frame="oak"],
.frame-preview-item[data-frame="wheat"],
.frame-preview-item[data-frame="berries"],
.frame-preview-item[data-frame="fern"],
.frame-preview-item[data-frame="clover"],
.frame-preview-item[data-frame="arabesque"],
.frame-preview-item[data-frame="byzantine"],
.frame-preview-item[data-frame="greek"],
.frame-preview-item[data-frame="tendril"],
.frame-preview-item[data-frame="branches"],
.frame-preview-item[data-frame="pine"],
.frame-preview-item[data-frame="laurel"] { border: 1px solid var(--pf); }

.frame-color-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.frame-color-row input[type="color"] {
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 0.1rem;
  cursor: pointer;
  background: none;
  box-sizing: border-box;
}

.visual-font-select option {
  font-family: inherit;
}

.frame-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.frame-btn {
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  border-radius: var(--radius);
  padding: 0.5rem 0.25rem;
  font-size: 0.8rem;
  cursor: pointer;
  text-align: center;
  transition: all 0.12s;
}

.frame-btn:hover {
  border-color: hsl(var(--gold) / 0.55);
  background: hsl(var(--gold) / 0.08);
}

.frame-btn.active {
  border-color: hsl(var(--gold) / 0.75);
  background: hsl(var(--gold) / 0.15);
  color: hsl(var(--foreground));
  font-weight: 600;
}

/* Кнопки в шапке (settings + comments) */
.bible-reader-page .bible-reader-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0;
  border: none;
  border-bottom: none;
  box-shadow: none;
}

.bible-reader-header-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.reader-header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  font-size: 1.15rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}

.reader-header-btn:hover {
  background: hsl(var(--gold) / 0.12);
  border-color: hsl(var(--gold) / 0.5);
  color: hsl(var(--gold-dark));
}

/* Убираем toolbar для кнопки комментариев — теперь она в шапке */
.verses-section-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

/* Режим Paragraph */
.bible-reader-page .verse-paragraph {
  margin: 0;
  padding: 0.35rem 0;
  padding-left: calc(var(--reader-num-col) + 0.5rem);
  border-bottom: 1px solid hsl(var(--border) / 0.4);
  list-style: none;
  line-height: 1.75;
}

.verse-paragraph .verse-num-inline {
  font-weight: 400;
  color: var(--reader-color, inherit);
  font-size: inherit;
  vertical-align: super;
  margin-right: 0.1em;
  user-select: none;
}

/* Подсказка о парсинге ссылки */
.verse-ref-hint {
  font-size: 0.82rem;
  color: hsl(var(--muted-foreground));
  padding: 0.25rem 0.5rem;
  background: hsl(var(--muted) / 0.5);
  border-radius: var(--radius);
  margin-left: 0.35rem;
}

/* ==========================================================================
   MSD — Multi-Select Dropdown
   ========================================================================== */

.msd-wrapper {
  position: relative;
  width: 100%;
}

.msd-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-size: 0.925rem;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
  gap: 0.5rem;
}

.msd-trigger:hover,
.msd-trigger.msd-open {
  border-color: hsl(var(--gold) / 0.6);
  background: hsl(var(--gold) / 0.06);
}

.msd-trigger-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: hsl(var(--foreground));
}

.msd-chevron {
  flex-shrink: 0;
  color: hsl(var(--muted-foreground));
  transition: transform 0.2s;
}

.msd-trigger.msd-open .msd-chevron {
  transform: rotate(180deg);
}

.msd-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 200;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: 0 4px 20px hsl(0 0% 0% / 0.12);
  overflow: hidden;
  max-height: 280px;
  display: flex;
  flex-direction: column;
}

.msd-panel-actions {
  display: flex;
  gap: 0.35rem;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid hsl(var(--border) / 0.6);
  flex-shrink: 0;
  background: hsl(var(--muted) / 0.25);
}

.msd-list {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--border)) transparent;
}

.msd-item {
  margin: 0;
  padding: 0;
}

.msd-label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.42rem 0.75rem;
  cursor: pointer;
  transition: background 0.1s;
  user-select: none;
}

.msd-label:hover {
  background: hsl(var(--gold) / 0.1);
}

.msd-checkbox {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: hsl(var(--gold, 45 80% 45%));
}

.msd-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

.msd-name {
  font-size: 0.875rem;
  color: hsl(var(--foreground));
  line-height: 1.35;
  flex: 1;
  min-width: 0;
}

/* Заблокированные пункты */
.msd-label:has(.msd-checkbox:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Чекбокс закрыт — панель не рендерится в потоке */
.msd-panel[hidden] {
  display: none !important;
}

/* ===== Highlights (выделение стихов цветом) ===== */

/* CSS-классы выделения применяются к .verse-item */
.verse-item.hl-yellow { background: hsl(50 100% 82% / 0.55); }
.verse-item.hl-green  { background: hsl(120 60% 82% / 0.50); }
.verse-item.hl-blue   { background: hsl(210 80% 85% / 0.50); }
.verse-item.hl-pink   { background: hsl(340 75% 88% / 0.55); }
.verse-item.hl-orange { background: hsl(28 100% 80% / 0.50); }

body.dark .verse-item.hl-yellow { background: hsl(50 80% 35% / 0.40); }
body.dark .verse-item.hl-green  { background: hsl(120 45% 30% / 0.40); }
body.dark .verse-item.hl-blue   { background: hsl(210 60% 32% / 0.40); }
body.dark .verse-item.hl-pink   { background: hsl(340 55% 35% / 0.40); }
body.dark .verse-item.hl-orange { background: hsl(28 75% 32% / 0.40); }

/* Произвольный hex из API (#rrggbb), задаётся из JS через --hl-user */
.verse-item.hl-custom {
  background: color-mix(in srgb, var(--hl-user, #ccc) 48%, transparent);
}

body.dark .verse-item.hl-custom {
  background: color-mix(in srgb, var(--hl-user, #888) 38%, transparent);
}

/* Контекстное меню выделения */
.hl-picker {
  position: fixed;
  z-index: 1200;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: 0 4px 20px hsl(0 0% 0% / 0.18);
  padding: 0.45rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.hl-picker-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.hl-picker-btn:hover { transform: scale(1.18); border-color: hsl(var(--foreground) / 0.35); }
.hl-picker-btn[data-color="yellow"] { background: hsl(50 100% 62%); }
.hl-picker-btn[data-color="green"]  { background: hsl(120 55% 52%); }
.hl-picker-btn[data-color="blue"]   { background: hsl(210 75% 60%); }
.hl-picker-btn[data-color="pink"]   { background: hsl(340 70% 68%); }
.hl-picker-btn[data-color="orange"] { background: hsl(28 95% 58%); }
.hl-picker-btn[data-color="remove"] {
  background: hsl(var(--muted));
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--muted-foreground));
  font-weight: 600;
  border-color: hsl(var(--border));
}
.hl-picker-btn[data-color="remove"]:hover { background: hsl(0 60% 90%); color: hsl(0 60% 40%); }

/* --- Этап II-5: контекстное меню строки стиха --- */
/* Полноэкранный backdrop отключён: ощущение «постоянного» затемнения и артефакт-полоска у части браузеров */
.verse-row-menu-backdrop {
  display: none !important;
}

.verse-row-menu {
  position: fixed;
  z-index: 1140;
  min-width: 240px;
  max-width: min(360px, 92vw);
  padding: 4px 0;
  margin: 0;
  overflow: visible;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: 0 8px 28px hsl(0 0% 0% / 0.22);
}

.verse-row-menu.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.verse-row-menu-item {
  display: block;
  width: 100%;
  padding: 4px 12px;
  border: none;
  background: transparent;
  color: hsl(var(--foreground));
  font: inherit;
  font-size: 0.92rem;
  text-align: left;
  cursor: pointer;
}

.verse-row-menu-item--with-icon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 4px 10px 4px 12px;
}

.verse-row-menu-text {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.verse-row-menu-icon,
.verse-row-menu-chevron {
  flex-shrink: 0;
  width: 1.65rem;
  height: 1.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--muted-foreground));
}

.verse-row-menu-icon svg {
  display: block;
}

.verse-row-menu-icon--abbrev {
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1;
}

.verse-row-menu-icon--star {
  font-size: 1rem;
  line-height: 1;
}

.verse-row-menu-chevron {
  font-size: 0.75rem;
  opacity: 0.85;
}

.verse-row-menu-icon-slot {
  flex-shrink: 0;
  width: 1.65rem;
  height: 1.65rem;
}

.verse-row-menu-item:hover:not(:disabled),
.verse-row-menu-item:focus-visible:not(:disabled) {
  background: hsl(var(--gold) / 0.14);
  outline: none;
}

.verse-row-menu-item:hover:not(:disabled) .verse-row-menu-icon,
.verse-row-menu-item:hover:not(:disabled) .verse-row-menu-chevron,
.verse-row-menu-item:focus-visible:not(:disabled) .verse-row-menu-icon,
.verse-row-menu-item:focus-visible:not(:disabled) .verse-row-menu-chevron {
  color: hsl(var(--foreground));
}

.verse-row-menu-item:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

/* Подменю цветов подсветки стиха */
.verse-row-menu-muted {
  display: block;
  padding: 2px 12px 6px;
  font-size: 0.82rem;
  color: hsl(var(--muted-foreground));
}

/* Подменю .verse-row-menu-hl-sub позиционируется от .verse-row-menu (fixed): top:0 — верх панели цвета = верх меню, не строки «Цвет фона». */
.verse-row-menu-hl {
  border-top: 1px solid hsl(var(--border) / 0.5);
  margin-top: 4px;
  padding-top: 4px;
}

.verse-row-menu-hl--disabled {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.verse-row-menu-hl-trigger {
  width: 100%;
}

.verse-row-menu-hl-sub {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 2px;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  padding: 0.5rem 0.55rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: 0 6px 22px hsl(0 0% 0% / 0.2);
  z-index: 5;
  min-width: 11.25rem;
  max-width: min(200px, 88vw);
}

/* Невидимый мост: курсор не «проваливается» в зазор между пунктом и подменю */
.verse-row-menu-hl-sub::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 0;
  bottom: 0;
  width: 14px;
  pointer-events: auto;
}

.verse-row-menu-hl-wheel-host {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 0;
}

.verse-row-menu-hl-wheel-host .IroColorPicker {
  margin: 0 auto;
}

.verse-row-menu-hl-native-color {
  width: 100%;
  height: 2.5rem;
  padding: 0;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  cursor: pointer;
  background: hsl(var(--background));
}

.verse-row-menu-hl-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  justify-content: center;
}

.verse-row-menu-hl-apply {
  display: block;
  width: 100%;
  padding: 0.45rem 0.65rem;
  border: none;
  border-radius: var(--radius);
  background: hsl(var(--gold) / 0.2);
  color: hsl(var(--foreground));
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

.verse-row-menu-hl-apply:hover,
.verse-row-menu-hl-apply:focus-visible {
  background: hsl(var(--gold) / 0.32);
  outline: none;
}

.verse-row-menu-hl-remove-row {
  display: flex;
  justify-content: center;
}

.verse-row-menu-hl.is-sub-open .verse-row-menu-hl-sub {
  display: flex;
}

@media (hover: hover) and (pointer: fine) {
  .verse-row-menu-hl:not(.verse-row-menu-hl--disabled):hover .verse-row-menu-hl-sub,
  .verse-row-menu-hl:not(.verse-row-menu-hl--disabled):focus-within .verse-row-menu-hl-sub {
    display: flex;
  }
}

.verse-row-menu-hl-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: transform 0.12s ease, border-color 0.12s ease;
}

.verse-row-menu-hl-swatch:hover,
.verse-row-menu-hl-swatch:focus-visible {
  transform: scale(1.12);
  border-color: hsl(var(--foreground) / 0.4);
  outline: none;
}

.verse-row-menu-hl-swatch--yellow { background: hsl(50 100% 62%); }
.verse-row-menu-hl-swatch--green { background: hsl(120 55% 52%); }
.verse-row-menu-hl-swatch--blue { background: hsl(210 75% 60%); }
.verse-row-menu-hl-swatch--pink { background: hsl(340 70% 68%); }
.verse-row-menu-hl-swatch--orange { background: hsl(28 95% 58%); }

.verse-row-menu-hl-swatch--remove {
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  font-size: 0.85rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Desktop: компактная строка — панель действий справа (все кнопки в .verse-actions) при hover/focus */
@media (hover: hover) and (pointer: fine) {
  .verse-list.verse-row-compact-tools .verse-item > .verse-item-row > .verse-actions {
    transition: opacity 0.15s ease;
  }

  .verse-list.verse-row-compact-tools .verse-item:not(:hover):not(:focus-within) > .verse-item-row > .verse-actions {
    opacity: 0;
    pointer-events: none;
  }

  .verse-list.verse-row-compact-tools .verse-item:hover > .verse-item-row > .verse-actions,
  .verse-list.verse-row-compact-tools .verse-item:focus-within > .verse-item-row > .verse-actions {
    opacity: 1;
    pointer-events: auto;
  }

  /*
   * Резерв справа под абсолютную .verse-actions — всегда, не только при hover.
   * Иначе при наведении появляется padding-right, текст переносится и строка «прыгает».
   */
  .verse-list.verse-row-compact-tools .verse-item > .verse-item-row > .verse-text {
    padding-right: min(16rem, 48vw);
    box-sizing: border-box;
  }
}

/* Touch + режим меню строки: инлайн-панель скрыта */
@media (hover: none) {
  .verse-list.verse-list--use-row-menu.verse-row-compact-tools .verse-item > .verse-item-row > .verse-actions {
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* Вспышка при постановке закладки */
.verse-item.verse-bookmark-flash {
  animation: verseBookmarkFlash 2s ease-out;
}

@keyframes verseBookmarkFlash {
  0% {
    box-shadow:
      inset 0 0 0 8px hsl(var(--gold, 45 80% 50%) / 0.98),
      0 0 0 8px hsl(var(--gold, 45 80% 50%) / 0.88),
      0 0 28px hsl(var(--gold, 45 80% 50%) / 0.55);
    background-color: hsl(var(--gold) / 0.65);
  }
  35% {
    box-shadow:
      inset 0 0 0 5px hsl(var(--gold, 45 80% 50%) / 0.95),
      0 0 32px hsl(var(--gold, 45 80% 50%) / 0.65);
    background-color: hsl(var(--gold) / 0.45);
  }
  100% {
    box-shadow: inset 0 0 0 0 transparent, 0 0 0 0 transparent;
    background-color: transparent;
  }
}

.verse-list.verse-row-compact-tools .verse-item.verse-bookmark-flash > .verse-item-row > .verse-actions {
  opacity: 1 !important;
  pointer-events: auto !important;
}

@media (hover: none) {
  .verse-list.hide-crossrefs .verse-item.verse-bookmark-flash .verse-crossref-btn {
    display: inline-block !important;
  }
}

body.dark .bible-reader-page .verse-item.verse-item--has-bookmark > .verse-item-row {
  background: linear-gradient(90deg, hsl(var(--gold) / 0.5) 0%, hsl(var(--gold) / 0.2) 55%, transparent 100%);
  box-shadow: inset 8px 0 0 0 hsl(var(--gold, 45 80% 50%) / 0.98);
}

/* Временное сообщение читалки (кнопка «чтение главы» и т.п.) */
.bible-reader-transient-msg {
  position: fixed;
  bottom: 1.35rem;
  left: 50%;
  transform: translate3d(-50%, 14px, 0);
  z-index: 2100;
  padding: 0.65rem 1.15rem;
  border-radius: var(--radius);
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  box-shadow: 0 10px 28px hsl(0 0% 0% / 0.22);
  font-size: 0.9rem;
  line-height: 1.35;
  color: hsl(var(--foreground));
  opacity: 0;
  transition: opacity 0.28s ease, transform 0.28s ease;
  pointer-events: none;
  max-width: min(92vw, 32rem);
  text-align: center;
}

.bible-reader-transient-msg.is-visible {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
}

/* ===== Плиточный навигатор книга / глава (MyBible-style) ===== */

.reader-nav-panel-header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 0.35rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.reader-nav-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.25;
  min-width: 0;
}

.reader-nav-back {
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: hsl(var(--foreground));
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.reader-nav-back:hover {
  background: hsl(var(--muted) / 0.45);
}

.reader-nav-back:focus-visible {
  outline: 2px solid hsl(var(--gold) / 0.55);
  outline-offset: 2px;
}

.reader-nav-back.hidden {
  visibility: hidden;
  pointer-events: none;
}

.reader-nav-header-spacer {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  pointer-events: none;
}

.reader-nav-panel-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Только книги: сетка на всю высоту панели, строки растягиваются */
.reader-nav-books-dialog .reader-nav-panel-body--books {
  overflow: hidden;
}

/* Диалог глав: один scrollport на сетке (не на section-settings-panel-body), flex сжимается под высоту dialog */
.reader-nav-chapters-dialog .reader-nav-panel-body--chapters {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.reader-nav-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  gap: 1px;
  background: hsl(var(--border) / 0.85);
  border-top: 1px solid hsl(var(--border) / 0.6);
  padding: 0;
  -webkit-overflow-scrolling: touch;
}

.reader-nav-grid--books {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(3.15rem, 1fr);
  align-content: stretch;
}

.reader-nav-books-dialog .reader-nav-grid--books .reader-nav-tile {
  font-size: clamp(0.8rem, 2.2vmin, 1.15rem);
  font-weight: 600;
  min-height: 0;
  padding: 0.4rem 0.3rem;
}

/* Главы: без растягивания строк по высоте панели (иначе большой зазор между рядами) */
.reader-nav-grid--chapters {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: auto;
  align-content: start;
  isolation: isolate;
}

.reader-nav-tile {
  margin: 0;
  padding: 0.35rem 0.2rem;
  min-height: 2.75rem;
  min-width: 0;
  border: none;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  color: hsl(var(--foreground));
  background: hsl(var(--card));
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: break-word;
  hyphens: auto;
}

.reader-nav-tile:hover {
  filter: brightness(0.97);
}

.reader-nav-tile:focus-visible {
  outline: 2px solid hsl(var(--gold) / 0.55);
  outline-offset: -2px;
  z-index: 1;
}

.reader-nav-tile.is-current {
  background: hsl(var(--gold) / 0.22);
  box-shadow: inset 0 0 0 2px hsl(var(--gold) / 0.45);
  font-weight: 700;
}

/* Цвета групп — те же оттенки, что у заголовков книг в списке стихов */
.bible-reader-page .reader-nav-tile[data-bible-group="pentateuch"] { color: #4a4c68; }
.bible-reader-page .reader-nav-tile[data-bible-group="history-ot"] { color: #6a5535; }
.bible-reader-page .reader-nav-tile[data-bible-group="poetry"] { color: #1a6b3c; }
.bible-reader-page .reader-nav-tile[data-bible-group="major-prophets"] { color: #9a3d52; }
.bible-reader-page .reader-nav-tile[data-bible-group="minor-prophets"] { color: #5c5c1f; }
.bible-reader-page .reader-nav-tile[data-bible-group="gospels"] { color: #b54a18; }
.bible-reader-page .reader-nav-tile[data-bible-group="acts"] { color: #15788f; }
.bible-reader-page .reader-nav-tile[data-bible-group="pauline"] { color: #5a5a1c; }
.bible-reader-page .reader-nav-tile[data-bible-group="general-epistles"] { color: #1a6b3c; }
.bible-reader-page .reader-nav-tile[data-bible-group="revelation"] { color: #a83848; }

body.dark .bible-reader-page .reader-nav-tile[data-bible-group="pentateuch"] { color: #a8a8cc; }
body.dark .bible-reader-page .reader-nav-tile[data-bible-group="history-ot"] { color: #c4a070; }
body.dark .bible-reader-page .reader-nav-tile[data-bible-group="poetry"] { color: #3cd878; }
body.dark .bible-reader-page .reader-nav-tile[data-bible-group="major-prophets"] { color: #e88898; }
body.dark .bible-reader-page .reader-nav-tile[data-bible-group="minor-prophets"] { color: #d8d860; }
body.dark .bible-reader-page .reader-nav-tile[data-bible-group="gospels"] { color: #f08850; }
body.dark .bible-reader-page .reader-nav-tile[data-bible-group="acts"] { color: #50d0f0; }
body.dark .bible-reader-page .reader-nav-tile[data-bible-group="pauline"] { color: #d8d860; }
body.dark .bible-reader-page .reader-nav-tile[data-bible-group="general-epistles"] { color: #3cd878; }
body.dark .bible-reader-page .reader-nav-tile[data-bible-group="revelation"] { color: #f07080; }

.reader-nav-grid--chapters .reader-nav-tile {
  /* Явный «безопасный» шрифт для цифр + сброс нативной кнопки — иначе в Chrome/Windows текст
     в <dialog> иногда не красится до hover (видны только «прочерки»/артефакты сглаживания). */
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--font-body), system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.15;
  /* Не display:flex: с aspect-ratio в grid-ячейке Chrome даёт высоту по строке текста — полоска hover. */
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1;
  /* auto: не min-height:0 — иначе треки grid занижаются относительно border-box с aspect-ratio (наезд рядов). */
  min-height: auto;
  padding: 0;
  color: hsl(var(--foreground));
  background: hsl(var(--card));
  -webkit-font-smoothing: antialiased;
  hyphens: none;
  -webkit-hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
  white-space: nowrap;
}

.reader-nav-grid--chapters .reader-nav-tile:hover {
  filter: none;
  background: hsl(var(--muted) / 0.55);
}

.reader-nav-grid--chapters .reader-nav-tile:focus-visible {
  filter: none;
}

@media (max-width: 640px) {
  dialog.reader-nav-books-dialog.portal-right-drawer-dialog[open],
  dialog.reader-nav-chapters-dialog.portal-right-drawer-dialog[open],
  dialog.reader-nav-verses-dialog.portal-right-drawer-dialog[open] {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    inset: 0;
    border-radius: 0;
    border-left: none;
  }

  .reader-nav-grid--books {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: minmax(2.85rem, 1fr);
  }

  .reader-nav-books-dialog .reader-nav-grid--books .reader-nav-tile {
    font-size: clamp(0.74rem, 3.2vmin, 1.05rem);
    padding: 0.35rem 0.2rem;
  }

  .reader-nav-grid--chapters {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: auto;
    align-content: start;
  }

  .reader-nav-grid--chapters .reader-nav-tile {
    font-size: 0.88rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  dialog.reader-nav-dialog[open] {
    animation: none;
  }
}