/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* ============================================
   2. FLEX
   ============================================ */
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}

/* Направления */
.row {
  flex-direction: row;
}
.col {
  flex-direction: column;
}
.row-reverse {
  flex-direction: row-reverse;
}
.col-reverse {
  flex-direction: column-reverse;
}

/* Обёртка переноса */
.wrap {
  flex-wrap: wrap;
}
.nowrap {
  flex-wrap: nowrap;
}

/* Выравнивание по главной оси (justify-content) */
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.justify-evenly {
  justify-content: space-evenly;
}

/* Выравнивание по поперечной оси (align-items) */
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.items-stretch {
  align-items: stretch;
}

/* Управление отдельными элементами (align-self) */
.self-start {
  align-self: flex-start;
}
.self-end {
  align-self: flex-end;
}
.self-center {
  align-self: center;
}
.self-stretch {
  align-self: stretch;
}

/* Растяжение/сжатие */
.grow-0 {
  flex-grow: 0;
}
.grow-1 {
  flex-grow: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.shrink-1 {
  flex-shrink: 1;
}

/* ============================================
   3. ОТСТУПЫ
   ============================================ */
/*
   xxs = 4px,  xs = 8px,  sm = 12px,
   md = 16px,  lg = 24px, xl = 32px, xxl = 48px
*/

/* Padding */
.p-xxs {
  padding: 4px;
}
.p-xs {
  padding: 8px;
}
.p-sm {
  padding: 12px;
}
.p-md {
  padding: 16px;
}
.p-lg {
  padding: 24px;
}
.p-xl {
  padding: 32px;
}
.p-xxl {
  padding: 48px;
}

.px-2 { padding: 0 2px; }
.px-4 { padding: 0 4px; }
.px-6 { padding: 0 6px; }
.py-2 { padding: 2px 0; }
.py-4 { padding: 4px 0; }
.py-6 { padding: 6px 0; }

/* Margin */
.m-xxs {
  margin: 4px;
}
.m-xs {
  margin: 8px;
}
.m-sm {
  margin: 12px;
}
.m-md {
  margin: 16px;
}
.m-lg {
  margin: 24px;
}
.m-xl {
  margin: 32px;
}
.m-xxl {
  margin: 48px;
}

/* Авто-отступы */
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}
.ml-auto {
  margin-left: auto;
}
.mr-auto {
  margin-right: auto;
}

.mx-2 { margin: 0 2px; }
.mx-4 { margin: 0 4px; }
.mx-6 { margin: 0 6px; }
.my-2 { margin: 2px 0; }
.my-4 { margin: 4px 0; }
.my-6 { margin: 6px 0; }

/* ============================================
   4. ПОЗИЦИОНИРОВАНИЕ
   ============================================ */
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}
.sticky {
  position: sticky;
  top: 0;
}

/* ============================================
   5. ТЕКСТ И ВИЗУАЛ
   ============================================ */
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}

/* Жирность */
.font-normal {
  font-weight: 400;
}
.font-medium {
  font-weight: 500;
}
.font-bold {
  font-weight: 700;
}

/* Размеры текста (по вашему ритму) */
.text-sm {
  font-size: 0.875rem;
}
.text-base {
  font-size: 1rem;
}
.text-lg {
  font-size: 1.25rem;
}
.text-xl {
  font-size: 1.5rem;
}
.text-2xl {
  font-size: 2rem;
}

/* Цвета (только самые базовые, остальное через CSS-переменные) */
.text-muted {
  color: #6b7280;
}
.text-white {
  color: #fff;
}
.bg-dark {
  background-color: #1f2937;
}
.bg-light {
  background-color: #f9fafb;
}

/* ============================================
   6. ПОЛЕЗНЫЕ МЕЛОЧИ
   ============================================ */
.w-full {
  width: 100%;
}
.h-full {
  height: 100%;
}

/* ============================================
   7. GRID
   ============================================ */
.grid {
  display: grid;
}
/* Пример шаблона — адаптивный */
.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.gap-sm {
  gap: 12px;
}
.gap-md {
  gap: 16px;
}
.gap-lg {
  gap: 24px;
}




/* ШАПКО-ССЫЛКИ: Меню хэдера: Библия, Цитаты, Поиск */
header nav {
    display: flex;
    padding: 10px 0 0 0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    gap: 5px; /* расстояние между пунктами, при необходимости */

    /* Скрываем скроллбар для Chrome, Safari, Opera */
    &::-webkit-scrollbar {
        display: none;
    }

    /* Скрываем скроллбар для Firefox */
    scrollbar-width: none;

    /* Скрываем скроллбар для IE и Edge */
    -ms-overflow-style: none;
}
header nav > a {
    padding-right: 10px;
    flex-shrink: 0; /* предотвращает сжатие элементов */
    white-space: nowrap;
}
header nav > #settings-btn {
    margin-left: auto;
    padding-right: 0;
}

.local {
    text-decoration: underline;
    text-decoration-style: dashed;
}

.profile_link, .login_link {
    margin-right: 10px;
}

/* МЕНЮ НАСТРОЕК */

#settings-area {
    z-index: 1;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #f6f4e4;
    border-radius: 0 0 5px 5px;
    box-shadow: 0px 1px 1px #deddd1;
}
.night-mode #settings-area {
    background-color: #2f3541;
    box-shadow: none;
}

#settings-area > el {
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding: 8px 12px;
}

#settings-area label {
    padding: 0 12px 0 0;
}

#settings-area .switcher {
    display: inline-block;
    margin-left: auto;
    padding: 0 0 0 12px;
}

/* КНИГИ: Меню книг: Бытие, Исход ... */

.menu-books {
    width: calc(100% - 20px);
    padding: 15px;
    margin: 0;
    background-color: #f6f4e4;
    border-radius: 0 0 5px 5px;
    position: absolute;
    z-index: 1;
    box-shadow: rgb(222, 221, 209) 0px 1px 1px;
}

.menu-books::after {
    content: "";
    position: absolute;
    left: 20px;
    top: -19px;
    border: 10px solid transparent;
    border-bottom: 10px solid #f6f4e4;
}

.menu-books.bible-clicked {
    width: calc(100% - -5px);
    padding: 10px 10px 15px 15px;
    margin: 0 -15px;
}

.night-mode .menu-books {
    background-color: #2f3541;
    box-shadow: none;
}

.night-mode .menu-books::after {
    border-bottom: 10px solid #2f3541;
}

.menu-books #filter-books,
.menu-books #filter-author-books {
    display: block;
    margin: 0 auto 10px auto;
    font-size: 1.2em;
    background-color: #ffffffb5;
    border: 1px solid #d8d1c0;
    color: #565656;
    border-radius: 4px;
    outline: none;
    padding: 5px 8px;
    width: 100%;
}

.menu-books #filter-books:focus,
.menu-books #filter-author-books:focus {
    border-color: #9c9073;
}
.night-mode .menu-books #filter-books,
.night-mode .menu-books #filter-author-books {
    border-color: #4d4c49;
    color: #898781;
    background-color: #363534b5;
}
.night-mode .menu-books #filter-books:focus,
.night-mode .menu-books #filter-author-books:focus {
    border-color: #666560;
}

.menu-books form {
    display: block;
    position: relative;
}

.menu-books form .search-icon {
    position: absolute;
    right: 3px;
    top: 3px;
    cursor: pointer;
    color: #565656;
}

.menu-books.dark a {
    opacity: 0.3;
}

.menu-books .h-light {
    opacity: 1 !important;
}

.menu-books.book-clicked {
    top: 98px;
    border-radius: 5px;
}

.menu-books.book-clicked::after {
    left: 50%;
    margin-left: -10px;
}

.menu-books .search-icon {
    display: inline-block;
    padding: 4px 5px 5px 0;
    background: none;
    border: none;
    cursor: pointer;
}

.menu-books .menu-tree {
    padding: 0 0 20px 0;
}

/* BOOK NAME */
.content .title {
    margin: 0;
    font-size: 32px;
    font-family:
        "Linux Libertine", "Georgia", "Times", "Source Serif Pro", serif;
}

.menu-wrap {
    flex: 0 1 auto !important;
}
.breadcrumbs-wrap {
    background-color: #f6f4e4;
    flex: 0 1 auto !important;
}
.night-mode .breadcrumbs-wrap {
    background-color: #2f3541;
}

.breadcrumbs-wrap .content {
    padding: 0px 10px 13px 10px;
}
.breadcrumbs {
    font-size: 11px;
    position: relative;
    margin: 0;
}

.content .title a {
    text-decoration: none;
}

.content .error {
    text-align: center;
    margin: 20px 0;
    color: rgb(201, 41, 41);
}
/* CHAPTERS */

/* в блоке глав все надписи по центру  */
#chapter-content .hint,
nav#menu-chapters {
    text-align: center;
}

nav#menu-chapters a {
    display: inline-block;
    min-width: 35px;
    padding: 2px 5px;
    font-size: 1.2em;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 4px;
    font-family:
        ui-monospace,
        SFMono-Regular,
        SF Mono,
        Menlo,
        Consolas,
        Liberation Mono,
        monospace;
    /* font-weight: bold; */
}

/* Альтернативный вариант с рамочкой, тоже красиво, смложно остановиться на одном варианте */
/* nav#menu-chapters a.selected {
  border: 1px solid rgba(205,151,101, 1);
} */
nav#menu-chapters a.selected {
    border: 1px solid #8c6964;
    background-color: #8c6964;
    color: #fdfcf1;
}

.night-mode nav#menu-chapters a.selected {
    border: 1px solid rgba(205, 151, 101, 1);
    background-color: rgba(205, 151, 101, 1);
    /* border: 1px solid rgba(97,175,239, 1);
  background-color: rgba(97,175,239, 1); */
    color: #282c34;
}

/* СТИХИ */
table {
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
}

td {
    line-height: 1.6em;
}
td.verse-line {
    min-width: 25px;
    cursor: pointer;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */

    vertical-align: top;
    text-align: right;
    color: #616562;
    font-size: 13px;
    font-family:
        ui-monospace,
        SFMono-Regular,
        SF Mono,
        Menlo,
        Consolas,
        Liberation Mono,
        monospace;
}

.text-small td.verse-line {
    padding: 4px 8px 0 0;
}
.text-medium td.verse-line {
    padding: 8px 8px 0 0;
}
.text-large td.verse-line {
    padding: 11px 8px 0 0;
}

td.zero-verse {
    text-align: center;
    color: #df4a4a;
    padding-bottom: 10px;
}

th.verse-title {
    display: table-cell;
    border-left: 2px solid transparent;
    padding: 0 7px 15px 7px;
    text-align: left;
}

td.verse-text {
    display: table-cell;
    border-left: 2px solid transparent;
    padding-left: 7px;
}

td.highlighted {
    background: #cd97652e;
    border-left: 2px solid #cd9765;
}

tr:hover td.verse-line {
    position: relative;
    color: transparent;
}

tr:hover td.verse-line:before {
    content: url('data:image/svg+xml;utf8,<svg fill="%23a0ae62" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M6.354 5.5H4a3 3 0 0 0 0 6h3a3 3 0 0 0 2.83-4H9c-.086 0-.17.01-.25.031A2 2 0 0 1 7 10.5H4a2 2 0 1 1 0-4h1.535c.218-.376.495-.714.82-1z"/><path d="M9 5.5a3 3 0 0 0-2.83 4h1.098A2 2 0 0 1 9 6.5h3a2 2 0 1 1 0 4h-1.535a4.02 4.02 0 0 1-.82 1H12a3 3 0 1 0 0-6H9z"/></svg>');
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: right;
    top: 0;
    right: 0;
}
.text-small tr:hover td.verse-line:before {
    padding: 4px 8px 0 0;
}
.text-medium tr:hover td.verse-line:before {
    padding: 8px 8px 0 0;
}
.text-large tr:hover td.verse-line:before {
    padding: 11px 8px 0 0;
}

.night-mode td.highlighted {
    color: #d4dded;
    background: #90b99025;
    border-left: 2px solid #90b990c9;
}

/* .night-mode tr:hover td.verse-line {
  color: #828e88;
} */

.img-header-wrap {
    position: relative;
    overflow: hidden;
}

.img-header-wrap .blured {
    position: absolute;
    width: 102%;
    background-color: #333;
}
.night-mode .img-header-wrap .blured {
    background-color: #222;
}

.img-header-wrap .blured img {
    filter: blur(15px);
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: center;
}

.img-header-wrap .content {
    padding: 0 10px;
    margin: 0;
}

.img-header-wrap .content {
    display: flex;
    justify-content: center;
    max-width: 100%;
    max-height: 400px;
}

.img-header img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
}

@media (max-width: 1180px) {
    .img-header {
        margin-left: -10px;
        margin-right: -10px;
    }
}

footer dd.tip {
    margin: 0 0 20px 0;
    font-size: 0.7em;
}

#change-locale-area {
    margin: 0 0 10px 0;
}

.key {
    background: linear-gradient(-26.5deg, #928b76, #cbc6b5);
    border-radius: 2px;
    box-shadow:
        inset 0 -2px 0 0 #696659,
        inset 0 0 1px 1px #ceccb5,
        0 2px 2px 0 rgba(67, 65, 59, 0.3);
    display: inline-block;
    margin: 0 2px;
    padding: 0px 3px;
    color: #ffffff;
    border: 0;
    font-size: 0.8em;
}

.night-mode .key {
    background: linear-gradient(-26.5deg, #566072, #31435b);
    box-shadow:
        inset 0 -2px 0 0 #283c55,
        inset 0 0 1px 1px #51687d,
        0 2px 2px 0 rgba(3, 6, 9, 0.3);
    color: #dae6ffaa;
}

#bottom-page-bar {
    margin: 30px 0;
    border-top: 1px solid rgb(172, 160, 143);
}

#visits {
    float: right;
    margin: 2px 0;
    font-size: 12px;
}
#visits svg {
    width: 10px;
    height: 10px;
}

.error-not-found {
    margin: 50px 10px;
    text-align: center;
    font-size: 22px;
}

.error-not-found .error-msg {
    font-weight: bold;
}
.error-not-found .propose {
    margin: 20px 0;
}

.tip-hkeys {
    margin: 30px 0 0 0;
    text-align: center;
    font-size: 0.7em;
}

.fixed-side-btn {
    z-index: 999;
    position: fixed;
    right: 40px;
    width: 50px;
    height: 50px;
    background-color: #d0d7be;
    color: #808667;
    font-weight: bold;
    text-align: center;
    line-height: 50px;
    border-radius: 5px;
    cursor: pointer;
}

#scroll-to-top-btn {
    bottom: 20px;
}

#call-minimap-btn {
    bottom: 80px;
    display: none;
}

/* Стрелка вверх (по умолчанию) */
.fixed-side-btn svg {
    transition: transform 0.3s;
}

/* Стрелка вниз (перевернутая) */
.fixed-side-btn.scroll-down svg {
    transform: rotate(180deg);
}

.night-mode .fixed-side-btn {
    color: #abb2bf;
    background-color: #333;
}

a.bib-comment {
    display: inline-block;
    margin: 0;
    padding: 0px 5px;
    position: relative;
    font-size: 0.6em;
    color: #7f5e32;
    background-color: #ffffff;
    border: 1px solid #f5ebd8;
    border-radius: 5px;
    text-decoration: none;
    line-height: 1.8em;
    bottom: 3px;
}

a.bib-comment:hover {
    background-color: #fbf2e0;
}
.night-mode a.bib-comment {
    background-color: transparent;
    border: 1px solid #454a53;
}
.night-mode a.bib-comment:hover {
    background-color: #d4e4ff11;
}

.share-btn {
    display: inline-block;
}
.dl-btn {
    text-decoration: none;
}

/* МЕТКА BIBLEOX с объяснениями */

.translation-notice {
    width: 27px;
    display: inline-block;
    margin: 0 0 0 5px;
    position: relative;
    cursor: help;
    opacity: 0.5;
    vertical-align: middle;
    top: -3px;
}

.translation-notice:hover {
    opacity: 1;
}

.translation-icon {
    opacity: 0.8;
    transition: all 0.3s ease;
}

.translation-tooltip {
    font-size: 12px; /* РАЗМЕР ТЕКСТА */
    font-family: Arial, sans-serif !important;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 300px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    color: #333;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 100;
    margin-top: 0;
}

.translation-tooltip .title {
    display: block;
    font-size: 15px;
    text-align: center;
    margin-bottom: 10px;
}

/* Стрелочка с рамкой */
.translation-tooltip::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
}

/* Рамка для стрелки (повторяет цвет основной рамки) */
.translation-tooltip::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 7px;
    border-style: solid;
    border-color: transparent transparent #e0e0e0 transparent;
    z-index: -1;
}

.translation-notice:hover .translation-tooltip {
    visibility: visible;
    opacity: 1;
    margin-top: 5px;
}

.translation-tooltip p {
    margin: 0 0 10px 0;
}

.translation-tooltip p:last-child {
    margin-bottom: 0;
}

/* Тёмная тема */

.night-mode .translation-tooltip {
    background: #2d2d2d;
    border-color: #444;
    color: #f0f0f0;
}

.night-mode .translation-tooltip::before {
    border-color: transparent transparent #2d2d2d transparent;
}

.night-mode .translation-tooltip::after {
    border-color: transparent transparent #444 transparent;
}

/* Сетка сегментов */
.segments-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Адаптивная высота для оригинала */
.original-text {
    min-height: 80px;
    font-size: 1.05rem;
}

/* Карточка перевода */
.translation-card {
    transition:
        border-color 0.2s,
        background-color 0.2s;
}
.translation-card:hover {
    border-color: var(--bs-primary) !important;
}

/* Голосование */
.vote-row .btn-link {
    font-size: 0.9rem;
    padding: 0.25rem !important;
}
.vote-row .btn-link:hover {
    text-decoration: none !important;
    opacity: 0.85;
}

/* Фиксированная шапка */
.chapter-header {
    z-index: 1020;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Скролл для длинных сегментов */
@media (max-width: 992px) {
    .segment-row .row > div {
        border-right: none !important;
        border-bottom: 1px solid var(--bs-border-color) !important;
    }
}

/* Анимация добавления */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.translation-card.new {
    animation: fadeIn 0.3s ease-out;
}



/* Формы */
form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

form > div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

label {
  font-weight: 500;
  color: #555;
  font-size: 0.9rem;
}

input[type="text"],
input[type="email"],
input[type="password"] {
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  transition: all 0.2s;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

input[type="submit"] {
  background: #3498db;
  color: white;
  border: none;
  padding: 0.6rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 0.5rem;
}

input[type="submit"]:hover {
  background: #2980b9;
}

form div:has(input[type="checkbox"]) {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  margin: 0;
}

input[type="checkbox"] + label {
  cursor: pointer;
  margin: 0;
  font-weight: normal;
  color: #555;
}

/* Стили для ошибок */
.errors {
  background: #fee;
  border: 1px solid #e74c3c;
  color: #c0392b;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 6px;
}

.errors .error-title {
  font-weight: bold;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.errors ul {
  font-size: 0.85rem;
  margin: 0;
  padding-left: 20px;
}

.errors li {
  margin: 0.25rem 0;
}

/* Rails field_with_errors */
.field_with_errors {
  display: inline;
  width: 100%;
}

.field_with_errors input {
  border-color: #e74c3c;
}

.field_with_errors label {
  color: #e74c3c;
}

/* Уведомления (flash messages) */
.notice,
.alert,
.flash {
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.notice {
  background: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
}

.alert {
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
}

/* Кнопка после отправки формы */
input:disabled,
button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Адаптивность */
@media (max-width: 640px) {
  .content.main {
    padding: 1.5rem;
  }

  h1 {
    font-size: 1.5rem;
  }
}

/* Дополнительные стили для флеш-уведомлений в layout */
.flash-messages {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  max-width: 400px;
}

.flash {
  margin-bottom: 10px;
  padding: 12px 20px;
  border-radius: 8px;
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* темный режим */
.night-mode input[type="text"],
.night-mode input[type="email"],
.night-mode input[type="password"] {
background: #3d3d3d;
border-color: #555;
color: #e0e0e0;
}

.night-mode .errors {
background: #442222;
}

.night-mode .errors h2 {
color: #ff8888;
}

.night-mode .notice {
background: #1a3a1a;
color: #88ff88;
}

.night-mode .alert {
background: #442222;
color: #ff8888;
}


/* app/assets/stylesheets/profile.css */

.profile-section {
  max-width: 450px;
  margin: 20px auto;
}

.profile-section h4 {
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #ddd;
  font-weight: normal;
  color: #333;
}

.profile-links {
  list-style: none;
  padding: 0;
}

.profile-links li {
  margin-bottom: 0.5rem;
}

.profile-links a {
  display: inline-block;
  padding: 0.5rem 0;
  color: #0066cc;
  text-decoration: none;
}

.profile-links a:hover {
  text-decoration: underline;
}

.profile-links .logout {
  color: #dc2626;
  margin-top: 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid #eee;
}

.profile-links .logout a {
  color: #dc2626;
}

/* Базовые переменные */
:root {
  --border-color: #e5e7eb;
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --bg-gray: #f9fafb;
  --blue: #3b82f6;
  --green: #90b981;
  --red: #ef4444;
  --yellow: #f59e0b;
}

/* Контейнер для всех карточек */
.segments-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

/* Карточка сегмента */
.segment-card {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  background: white;
}

/* ============================================
   ШИРОКИЕ ЭКРАНЫ (две колонки)
   ============================================ */
@media (min-width: 768px) {
  .segment-card {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 1.5rem;
    align-items: start;
  }

  .original-text {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
    padding-right: 1.5rem;
  }

  .translations-area {
    padding-right: 0.25rem;
  }

  /* Кастомный скроллбар для переводов */
  .translations-area::-webkit-scrollbar {
    width: 6px;
  }

  .translations-area::-webkit-scrollbar-track {
    background: var(--bg-gray);
    border-radius: 3px;
  }

  .translations-area::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
  }

  .translations-header {
    padding-top: 0;
    padding-bottom: 5px;
  }
}

/* ============================================
   УЗКИЕ ЭКРАНЫ (одна колонка)
   ============================================ */
@media (max-width: 767px) {
  .segment-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .original-text {
    margin-bottom: 0;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border-color);
  }

  .translations-area {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
}

/* ============================================
   ОБЩИЕ СТИЛИ (работают на всех экранах)
   ============================================ */

/* Оригинальный текст */
.segment-meta {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
}

.language-badge {
  background: var(--bg-gray);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-weight: 500;
  text-transform: uppercase;
}

.html-tags {
  margin: 0.15rem 0;
  font-family: monospace;
}

.html-tags .tag {
  background: var(--bg-gray);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.6rem;
}

.fragment-number {
  color: var(--text-secondary);
  font-family: monospace;
  padding: 0.25rem 0;
}

.segment-body {
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
  color: var(--text-primary);
}

@media (min-width: 768px) {
  .segment-body {
    font-size: 1.1rem;
  }
}

/* Область переводов */
.translations-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 5px;
}

.translations-header h4 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
}

/* Карточка перевода */
.translation {
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  background: var(--bg-gray);
  transition: box-shadow 0.2s;
}

/* .translation.top {
  border-color: rgba(17, 124, 60, 0.465);
  box-shadow: 0 1px 3px rgba(87, 115, 98, 0.233);
} */



/* Мета-информация перевода */
.translation .meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
}

/* Автор и теги */
.translation .author {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  color: grey;
}

/* Время */
.translation .time-ago {
  color: var(--text-secondary);
}

/* Текст перевода */
.translation .text {
  margin-bottom: 0.75rem;
  line-height: 1.4;
  color: var(--text-primary);
}
.translation .sub-text {
  font-size: 0.8rem;
  opacity: 0.6;
  margin-bottom: 0.75rem;
}

/* Блок голосования */
.translation .votes {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

/* Формы голосования */
.translation .button_to {
  display: inline;
}

.translation .vote-btn, .approved {
  background: white;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  font-size: 0.75rem;
  transition: all 0.2s;
}

.translation .vote-btn.voted.up {
  border-color: #0059ff;
  background-color: #0059ff12;
}

.translation .vote-btn.voted.down {
  border-color: #e81313;
  background-color: #e8131313;
}

.translation .vote-btn.up:hover {
  background-color: #0059ff12;
}

.translation .vote-btn.down:hover {
  background-color: #e8131313;
}

.translation .vote-btn.zero {
  opacity: 0.4;
  filter: grayscale(100%);
}

.translation span.vote-btn {
  border-color: #eee;
  background-color: transparent !important;
  cursor: default;
}

.translation button.vote-btn:hover {
  opacity: 0.8;
}

/* Счётчики голосов */
.vote-count {
  font-weight: 600;
  margin-right: 0.25rem;
}

/* Кнопка "Предложить перевод" */
.btn-propose {
  text-align: right;
  margin: 10px 0 0 0;
  text-decoration: underline;
  text-decoration-style: dashed;
  font-size: 0.875rem;
  cursor: pointer;
}

/* Узкие экраны: кнопка на всю ширину */
@media (max-width: 767px) {
  .btn-propose {
    display: block;
    text-align: center;
    margin: 10px 0 0 0;
  }
}

/* Адаптация для мобильных */
@media (max-width: 640px) {
  .segments-container {
    padding: 0.5rem;
  }

  .segment-card {
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 6px;
  }

  .segment-body {
    font-size: 0.95rem;
  }
}

/* Форма нового перевода */
.translation-form-container {
  margin: 15px 0 5px 0;
  z-index: 2;
}

.translation-form-card {
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 6px;
  padding: 1rem;
  animation: fadeIn 0.2s ease-out;
}

.translation-form-card .form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.translation-form-card h5 {
  margin: 0;
  color: #059669;
}

.close-btn {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 1.2rem;
}

.translation-input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.875rem;
  box-sizing: border-box;
}

.translation-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.form-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

@media (max-width: 640px) {
  .form-actions {
    flex-direction: column;
  }

  .btn-submit, .btn-cancel {
    text-align: center;
  }
}

/* Анимации */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}





.translation-stats {
  background: white;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 2rem;
}

/* Прогресс-бар */

.progress-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.progress-bar-container {
  background: var(--bg-gray);
  border-radius: 20px;
  height: 8px;
  overflow: hidden;
}

.progress-bar-fill {
  background: var(--green);
  height: 100%;
  border-radius: 20px;
  transition: width 0.3s ease;
  width: 0%;
}

/* Ссылка на итоговый перевод */
.result-link {
  text-align: center;
}

.result-link a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--blue);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.2s;
}

.result-link a:hover {
  color: #2563eb;
  text-decoration: underline;
}

/* Адаптация для мобильных */
@media (max-width: 768px) {
  .translation-header {
    padding: 1rem;
    margin-bottom: 1rem;
  }

  .project-title h1 {
    font-size: 1.5rem;
  }

  .header-settings {
    flex-direction: column;
    align-items: stretch;
  }

  .setting-item {
    justify-content: space-between;
  }

  .result-link {
    text-align: left;
    margin-top: 0.5rem;
  }
}

/* лоадер для прогресса */
.progress-bar-fill.loading {
  background: linear-gradient(90deg, var(--green) 0%, #34d399 50%, var(--green) 100%);
  background-size: 200% 100%;
  animation: loading 2.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}



/* app/assets/stylesheets/voters.css */

.translation-votes-block {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.votes {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.voters-link {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-decoration: underline;
  text-decoration-style: dashed;
  cursor: pointer;
  width: fit-content;
}

/* Контейнер для списка голосовавших */
.voters-panel {
  margin-top: 1rem;
  animation: slideDown 0.2s ease-out;
}

.close-voters {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 1.2rem;
  line-height: 1;
}

.close-voters:hover {
  color: var(--red);
}

.voters-sections {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 640px) {
  .voters-sections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
}

.voters-section {
  background-color: white;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
}

.section-title {
  background: var(--bg-gray);
  padding: 0.5rem 0.75rem;
  font-weight: 500;
  font-size: 0.875rem;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color);
}

.section-title .count {
  background: var(--border-color);
  padding: 0.125rem 0.375rem;
  border-radius: 12px;
  font-size: 0.75rem;
}

.voters-list {
  overflow-y: auto;
}

.voter-item {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
}

.voter-item:last-child {
  border-bottom: none;
}

.voter-name {
  font-weight: 500;
  color: var(--text-primary);
}

.voter-time {
  font-size: 0.7rem;
  color: var(--text-secondary);
}

/* Анимация */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.voter-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.voter-time {
    font-size: 0.65rem;
}







.tiptap-area {
  overflow: hidden;
  margin: 10px 0;
  padding: 0;
  background-color: white;
  border: 1px solid #222;
  border-radius: 5px;
  line-height: 1.5;
  color: rgb(51, 51, 51);
}

.tiptap-area button {
  min-width: 30px;
  min-height: 30px;
  border-radius: 2px;
  padding: 2px 7px;
  margin: 3px 3px 0 0;
  font-size: 16px;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  cursor: pointer;
}

.tiptap-area button:hover {
  background: #e5e7eb;
}

.tiptap-area button svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.tiptap-toolbar {
  padding: 5px 8px 0 8px;
  border-bottom: 1px solid #e5e7eb;
}

.tiptap {
  outline: none;
  padding: 8px 10px;
  min-height: 100px;
  max-height: 580px;
  overflow-y: auto;
}

/* Стили для содержимого редактора */
.tiptap p {
  margin-bottom: 0.5rem;
}

.tiptap h2, .tiptap h3, .tiptap h4 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-weight: bold;
}

.tiptap ul, .tiptap ol {
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}

.tiptap blockquote {
  border-left: 3px solid #d1d5db;
  padding-left: 1rem;
  margin: 0.5rem 0;
  color: #6b7280;
}

.tiptap mark {
  background-color: #fef08a;
  padding: 0 2px;
}

.tiptap img {
  max-width: 100%;
  height: auto;
}

.tiptap table.custom-table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.5rem 0;
}

.tiptap table.custom-table td,
.tiptap table.custom-table th {
  border: 1px solid #d1d5db;
  padding: 0.5rem;
}

.tiptap table.custom-table th {
  background-color: #f3f4f6;
  font-weight: bold;
}

.admin-translations .translation-card {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.admin-translations .sub-text, .admin-translations  .orig-text {
  font-size: 0.8em;
  color: grey;
}
/* ===============================
=            Choices            =
=============================== */
.choices {
  position: relative;
  overflow: hidden;
  /* margin-bottom: 24px; */
  font-size: 16px;
}
.choices:focus {
  outline: none;
}
.choices:last-child {
  margin-bottom: 0;
}
.choices.is-open {
  overflow: visible;
}
.choices.is-disabled .choices__inner,
.choices.is-disabled .choices__input {
  background-color: #eaeaea;
  cursor: not-allowed;
  -webkit-user-select: none;
          user-select: none;
}
.choices.is-disabled .choices__item {
  cursor: not-allowed;
}
.choices [hidden] {
  display: none !important;
}

.choices[data-type*=select-one] {
  cursor: pointer;
}
.choices[data-type*=select-one] .choices__inner {
  padding-bottom: 7.5px;
}
.choices[data-type*=select-one] .choices__input {
  display: block;
  width: 100%;
  padding: 10px;
  border-bottom: 1px solid #ddd;
  background-color: #fff;
  margin: 0;
}
.choices[data-type*=select-one] .choices__button {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
  padding: 0;
  background-size: 8px;
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -10px;
  margin-right: 25px;
  height: 20px;
  width: 20px;
  border-radius: 10em;
  opacity: 0.25;
}
.choices[data-type*=select-one] .choices__button:hover, .choices[data-type*=select-one] .choices__button:focus {
  opacity: 1;
}
.choices[data-type*=select-one] .choices__button:focus {
  /* box-shadow: 0 0 0 2px #00bcd4; */
}
.choices[data-type*=select-one] .choices__item[data-value=""] .choices__button {
  display: none;
}
.choices[data-type*=select-one]::after {
  content: "";
  height: 0;
  width: 0;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
  border-width: 5px;
  position: absolute;
  right: 11.5px;
  top: 50%;
  margin-top: -2.5px;
  pointer-events: none;
}
.choices[data-type*=select-one].is-open::after {
  border-color: transparent transparent #333 transparent;
  margin-top: -7.5px;
}
.choices[data-type*=select-one][dir=rtl]::after {
  left: 11.5px;
  right: auto;
}
.choices[data-type*=select-one][dir=rtl] .choices__button {
  right: auto;
  left: 0;
  margin-left: 25px;
  margin-right: 0;
}

.choices[data-type*=select-multiple] .choices__inner,
.choices[data-type*=text] .choices__inner {
  cursor: text;
}
.choices[data-type*=select-multiple] .choices__button,
.choices[data-type*=text] .choices__button {
  position: relative;
  display: inline-block;
  margin-top: 0;
  margin-right: -4px;
  margin-bottom: 0;
  margin-left: 8px;
  padding-left: 16px;
  border-left: 1px solid #008fa1;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
  background-size: 8px;
  width: 8px;
  line-height: 1;
  opacity: 0.75;
  border-radius: 0;
}
.choices[data-type*=select-multiple] .choices__button:hover, .choices[data-type*=select-multiple] .choices__button:focus,
.choices[data-type*=text] .choices__button:hover,
.choices[data-type*=text] .choices__button:focus {
  opacity: 1;
}

/* IMPORTANT PLACE -- always visible field  */
.choices__inner {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  height: 100%;
  background-color: #f6f4e4;
  padding: 7.5px 7.5px 3.75px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  min-height: 44px;
  overflow: hidden;
}

.is-focused .choices__inner, .is-open .choices__inner {
  border-color: #b7b7b7;
  border-radius: 0;
}
.is-open .choices__inner {
  border-radius: 2.5px 2.5px 0 0;
}
.is-flipped.is-open .choices__inner {
  border-radius: 0 0 2.5px 2.5px;
}

.choices__list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.choices__list--single {
  display: inline-block;
  padding: 4px 16px 4px 4px;
  width: 100%;
}
[dir=rtl] .choices__list--single {
  padding-right: 4px;
  padding-left: 16px;
}
.choices__list--single .choices__item {
  width: 100%;
}

.choices__list--multiple {
  display: inline;
}
.choices__list--multiple .choices__item {
  display: inline-block;
  vertical-align: middle;
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  margin-right: 3.75px;
  margin-bottom: 3.75px;
  background-color: #00bcd4;
  border: 1px solid #00a5bb;
  color: #fff;
  word-break: break-all;
  box-sizing: border-box;
}
.choices__list--multiple .choices__item[data-deletable] {
  padding-right: 5px;
}
[dir=rtl] .choices__list--multiple .choices__item {
  margin-right: 0;
  margin-left: 3.75px;
}
.choices__list--multiple .choices__item.is-highlighted {
  background-color: #00a5bb;
  border: 1px solid #008fa1;
}
.is-disabled .choices__list--multiple .choices__item {
  background-color: #aaaaaa;
  border: 1px solid #919191;
}

.choices__list--dropdown, .choices__list[aria-expanded] {
  visibility: hidden;
  z-index: 1;
  position: absolute;
  width: 100%;
  background-color: #fff;
  border: 1px solid #ddd;
  top: 100%;
  margin-top: -1px;
  border-bottom-left-radius: 2.5px;
  border-bottom-right-radius: 2.5px;
  overflow: hidden;
  word-break: break-all;
  will-change: visibility;
}
.is-active.choices__list--dropdown, .is-active.choices__list[aria-expanded] {
  visibility: visible;
}
.is-open .choices__list--dropdown, .is-open .choices__list[aria-expanded] {
  border-color: #b7b7b7;
}
.is-flipped .choices__list--dropdown, .is-flipped .choices__list[aria-expanded] {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: -1px;
  border-radius: 0.25rem 0.25rem 0 0;
}
.choices__list--dropdown .choices__list, .choices__list[aria-expanded] .choices__list {
  position: relative;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;

}
.choices__list--dropdown .choices__list::-webkit-scrollbar {
  width: 8px;               /* ширина scrollbar */
}
.choices__list--dropdown .choices__list::-webkit-scrollbar-track {
  background: transparent;        /* цвет дорожки */
}
.choices__list--dropdown .choices__list::-webkit-scrollbar-thumb {
  background-color: #333;    /* цвет плашки */
  border-radius: 10px;       /* закругления плашки */
  border: 1px solid transparent;  /* padding вокруг плашки */
}
.choices__list--dropdown .choices__list {
  scrollbar-width: thin;
  scrollbar-color: #333 transparent;
}

.choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item {
  position: relative;
  padding: 10px;
  font-size: 14px;
}
[dir=rtl] .choices__list--dropdown .choices__item, [dir=rtl] .choices__list[aria-expanded] .choices__item {
  text-align: right;
}
@media (min-width: 640px) {
  .choices__list--dropdown .choices__item--selectable, .choices__list[aria-expanded] .choices__item--selectable {
    /* padding-right: 100px; */
  }
  .choices__list--dropdown .choices__item--selectable::after, .choices__list[aria-expanded] .choices__item--selectable::after {
    content: attr(data-select-text);
    font-size: 12px;
    opacity: 0;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
  [dir=rtl] .choices__list--dropdown .choices__item--selectable, [dir=rtl] .choices__list[aria-expanded] .choices__item--selectable {
    text-align: right;
    padding-left: 100px;
    padding-right: 10px;
  }
  [dir=rtl] .choices__list--dropdown .choices__item--selectable::after, [dir=rtl] .choices__list[aria-expanded] .choices__item--selectable::after {
    right: auto;
    left: 10px;
  }
}


/* наведенение на элемент меню */
.choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background-color: #f2f2f266;
}
.choices__list--dropdown .choices__item--selectable.is-highlighted::after, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted::after {
  opacity: 0.5;
}

/* выбранный элемент меню */
.choices__item.is-selected {
  background-color: #a7b77455 !important;
}

.choices__item {
  cursor: default;
}

.choices__item--selectable {
  cursor: pointer;
}

.choices__item--disabled {
  cursor: not-allowed;
  -webkit-user-select: none;
          user-select: none;
  opacity: 0.5;
}

.choices__heading {
  font-weight: 600;
  font-size: 12px;
  padding: 10px;
  border-bottom: 1px solid #EEE;
  color: #000000;
  background-color: #f6f4e3;
}

.choices__button {
  text-indent: -9999px;
  -webkit-appearance: none;
          appearance: none;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}
.choices__button:focus {
  outline: none;
}

.choices__input {
  display: inline-block;
  vertical-align: baseline;
  background-color: #f9f9f9;
  font-size: 14px;
  margin-bottom: 5px;
  border: 0;
  border-radius: 0;
  max-width: 100%;
  padding: 4px 0 4px 2px;
}
.choices__input:focus {
  outline: 0;
}
.choices__input::-webkit-search-decoration, .choices__input::-webkit-search-cancel-button, .choices__input::-webkit-search-results-button, .choices__input::-webkit-search-results-decoration {
  display: none;
}
.choices__input::-ms-clear, .choices__input::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}
[dir=rtl] .choices__input {
  padding-right: 2px;
  padding-left: 0;
}

.choices__placeholder {
  opacity: 0.5;
}

/* =====  night mode  ====== */

.night-mode .choices {
  color: #ccc;
}

.night-mode .choices.is-disabled .choices__inner,
.night-mode .choices.is-disabled .choices__input {
  background-color: #4d41375e;
}

.night-mode .choices[data-type*=select-one] .choices__input {
  color: #59b682;
  border-bottom: 1px solid #4d41375e;
  background-color: #4d41375e;
}
.night-mode .choices[data-type*=select-one] .choices__button:focus {
  box-shadow: 0 0 0 2px #00bcd4;
}
.night-mode .choices__inner {
  background-color: #4d41375e;
  border: 1px solid #5d47345e;
}
.night-mode .is-focused .choices__inner,
.night-mode .is-open .choices__inner {
  /* стрелочка вниз */
  border-color: #5d4734;
}
.night-mode .choices__list--dropdown,
.night-mode .choices__list[aria-expanded] {
  background-color: #4d4137;
  border: 1px solid #5d4734;
}
.night-mode .is-open .choices__list--dropdown,
.night-mode .is-open .choices__list[aria-expanded] {
  /* стрелочка вниз */
  border-color: #5d4734;
}
.night-mode .choices__heading {
  background-color: transparent;
  border-bottom: 1px solid transparent;
  color: #59b682;
}
.night-mode .choices__input {
  background-color: #4d4137;
}

/* наведенение на элемент меню */
.night-mode .choices__list--dropdown .choices__item--selectable.is-highlighted,
.night-mode .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background-color: #57493e;
}
/* выбранный элемент меню */
.night-mode .choices__item.is-selected {
  background-color: #59b68255 !important;
}
.night-mode .choices[data-type*=select-one]::after {
  border-color: #90909090 transparent transparent transparent;
}
.night-mode .choices[data-type*=select-one].is-open::after {
  border-color: transparent transparent #90909090 transparent;
}

/* =====  End of Choices  ====== */

.choices__list {
  white-space: nowrap;
}
.choices__list--dropdown {
  min-width: 350px !important;
}
.choices__list--dropdown.choices__item {
  overflow-y: auto;
  overflow-x: hidden;
}
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  /* для быстрого считывания тач-событий, без ожидания 300мс (будет ли второй тач для зума) */
  touch-action: manipulation;
  /* убрать подсветку элемента во время тача, выглядит как глюк */
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  position: relative;
  margin: 0;
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 16px;
  line-height: 1.4;
  overflow-x: hidden;
  background-color: #fdfcf1;
}

.hidden {
  display: none !important;
}

article.text-small { font-size: 1.1em; }
article.text-medium { font-size: 1.4em; }
article.text-large { font-size: 1.7em; }

/* для подстрочника покрупнее делаем текст */
.interliner {
  font-size: 1.5em;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 35px 0;
}

hr {
  display: block;
  margin: 30px 0;
  border: 0;
  border-bottom: 1px dashed #aca08f;
  height: 1px;
}

.night-mode hr {
  border-bottom: 1px dashed #555;
}


mark { background-color: #FAF594; }
.night-mode mark { background-color: #FAF594D4; }


h1, h2, h3, h4 {
  position: relative;
  margin-top: 0;
  margin-bottom: 12px;
  font-weight: 400;
  line-height: 1.2;
}
.night-mode h1, .night-mode h2, .night-mode h3, .night-mode h4 {
  color: #ccc;
}

h1, .h1 { font-size: 32px; }
h2, .h2 { font-size: 26px; }
h3, .h3 { font-size: 22px; }
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 16px; }
h6, .h6 { font-size: 14px; }

/* basic styles ends */

::selection {
  background: #59b68277;
  color: #111;
}
::-moz-selection {
  background: #59b68277;
  color: #111;
}
::-webkit-selection {
  background: #59b68277;
  color: #111;
}

header {
  background-color: #f6f4e4;
}

header .container, footer .container {
  position: relative;
  max-width: 1200px;
  width: 100%;
  padding: 12px 10px;
  margin: 0 auto;
}

.csl {font-family: 'Ponomar', Verdana, Tahoma;font-size: 1.4em;line-height: 1.5em;}
.t-rtl {direction: rtl;}

/* ==================================================== */
/* text bar -- настройки перед текстом (язык, озвучить) */
/* ==================================================== */

#text-bar-wrapper {
  padding-top: 35px;
}

#text-bar {
  display: flex;
  gap: 20px;
  position: relative;
  margin: 0 0 25px 0;
  border-top: 1px solid #aca08f;
}

.night-mode #text-bar {
  border-top: 1px solid #555;
}

#text-bar .bar-el {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

#text-bar .right-group {
  display: flex;
  gap: 20px;
  margin-left: auto;
}

#text-bar .bar-el.btn a { color: #222 }
#text-bar .bar-el.btn {
  padding: 0 10px;
  font-size: 14px;
  line-height: 29px;
  color: #222;
  border: 1px solid #66666633;
  border-top: none;
  border-radius: 0 0 4px 4px;
  cursor: pointer;
  background-color: #f6f4e4;
}
#text-bar .bar-el.btn:hover { background-color: #ebeae0; }

.night-mode #text-bar .bar-el.btn a { color: #ccc; }
.night-mode #text-bar .bar-el.btn {
  background-color: #4d41375e;
  border: 1px solid #5d47345e;
  color: #ccc;
}
.night-mode #text-bar .bar-el.btn:hover { background-color: #574a3f88; }
.night-mode #text-bar .bar-el.btn:active { background-color: #5b4d41aa; }

/* ==================================================== */
/* АУДИО-ПЛЕЕР */
/* ==================================================== */

#audio-player {
  position: sticky;
  top: 0;
  margin-bottom: 10px;
}

#audio-player audio {
  width: 100%;
}

#audio-player a.copy {
  font-size: 8px;
  display: block;
  position: absolute;
  bottom: 7px;
  right: 2px;
  color:#b7b5a6;
}

#audio-player audio::-webkit-media-controls-enclosure {
  border-radius: 0;
  background-color: #f6f4e4;
}

.night-mode #audio-player a.copy {
  color:#1e1e1e;
}
.night-mode #audio-player audio::-webkit-media-controls-enclosure {
  background-color: #444;
}

/* ЯЗЫК КОНТЕНТА: выбор языка на главной */
.lang-select {
  min-width: 170px;
}

.lang-select .choices__inner {
  border-radius: 0 0 4px 4px;
  border-top: none;
  padding: 0 0 0 6px;
  padding-bottom: 0 !important;
  min-height: 30px;
}

.lang-select.is-open .choices__inner {
  border-radius: 0;
}

/* .lang-select i {
  color: red;
} */

/* ЯЗЫК UI: выбор языка кнопочек в подвале */
dd#change-ui-lang-area {
  display: inline-block;
  min-height: 65px;
  font-size: 0.7em;
  padding: 0 0 15px 0;
}

dd#change-ui-lang-area label {
  display: inline-block;
  padding: 5px 0;
}

dd#change-ui-lang-area .choices__inner {
  border-radius: 4px;
  padding: 0;
  padding-bottom: 0 !important;
  min-height: 30px;
  min-width: 225px;
}

.logo img {
  width: 200px;
  /* background-color: #d0d7be; */
  /* background-color: #406c59; */
  padding: 0;
  border-radius: 4px;
  -webkit-transition: background-color 124ms linear;
  -ms-transition: background-color 124ms linear;
  transition: background-color 124ms linear;
}

.night-mode .logo img {
  /* background-color: #c0cda1; */
  /* background-color: #406c59; */
}

.logo img:hover {
  /* background-color: #a4d091; */
  /* background-color: #a4d091; */
}
.logo img:active {
  /* background-color: #a2b997; */
  /* background-color: #a2b997; */
}

footer {
  flex-shrink: 0;
  padding: 10px 0 30px 0;
  background-color: #f6f4e4;
}

footer dd {
  margin: 0;
  padding: 0;
}

.flex-wrap {
  display: flex;
  flex: 1 0 auto;
  justify-content: center;
}

.flex-wrap .content {
  max-width: 1200px;
  width: 100%;
  position: relative;
}

.flex-wrap .content.main {
  padding: 30px 10px;
}

a {
  color: #808667;
  cursor: pointer;
}

.invisible {
  opacity: 0;
}

/* LINKS */

/* все ссылки */
a:hover { color: #8c6964; }

/* активная ссылка в header */
a.selected { color: #8c6964; }
a.selected:hover { color: #a67f7f; }

.highlight {
  color: rgba(255,151,101, 1)
}

.line-highlight {
  background-color: #ffe70e;
  color: black;
}

.hint {
  font-size: 14px;
  margin: 10px 0;
  color: #aaa;
}

.hint.small {
  margin-bottom: 2px;
}

input.pretty {
  padding: 6px 12px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  height: 45px;
  color: #212529;
  background-color: #f6f4e4;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  appearance: none;
  border-radius: 4px;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

input.pretty:focus {
  color: #212529;
  background-color: #fff;
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, .25);
}

input.btn {
  background-color: #3a824b;
  color: white;
}
input.btn:active, input.btn:focus {
  background-color: #317441;
}

.tree-search {
  max-width: 400px;
  margin: 15px auto 0 auto
}

.search-tree-input {
  width: 100%;
}
.search-tree-input-area {
  position: relative;
}

.search-tree-input-area .search-icon {
  position: absolute;
  right: 12px;
  top: 12px;
  cursor: pointer;
  background: none;
  border: none;
}
/* TEXT TAGS  */

j {
  color: #c54a4a;
}

.night-mode b,
.night-mode strong {
  color: #ddd;
}

/* FORM */

.large-block {
  margin: 15px 0;
  font-size: 1.2em;
}
.large-block select {
  font-size: 1em;
}

/* =========== NIGHT MODE =========== */

.night-mode ::selection {
  /* background: #ffd500; */
  color: #ccc;
}
.night-mode ::-moz-selection {
  /* background: #ffd500; */
  color: #ccc;
}
.night-mode ::-webkit-selection {
  /* background: #ffd500; */
  color: #ccc;
}

body.night-mode {
  background-color: rgb(40,44,52);
  color: #abb2bf;
}

.night-mode header, .night-mode footer {
  background-color: #2f3541;
}

/* все ссылки */
.night-mode a, .night-mode button { color: #61afef; }
.night-mode a:hover, .night-mode button:hover { color: #7dc3ff;}

/* активная ссылка в header */
.night-mode a.selected { color: #cd9765; }
.night-mode a.selected:hover { color: #e4b487; }

.hint {
  font-size: 14px;
  margin: 10px 0;
  color: #616562;
}

.night-mode input.pretty {
  color: #ccc;
  background-color: #4d41375e;
  border-color: #5d47345e;
}

.night-mode input.pretty:focus {
  background-color: #4d41375e;
  border-color: #5d47345e;
  color: #ccc;
  box-shadow: 0 0 0 0.15rem rgba(89, 182, 130, .35);
}

.night-mode #search-input {
  color: #59b682;
}

.night-mode input.btn {
  background-color: #3a824b;
  color: white;
}
.night-mode input.btn:active, .night-mode input.btn:focus {
  background-color: #317441;
}


.bible-list {
  display: flex;
  flex-wrap: wrap;
}

.bible-column {
  flex: 1;
  min-width: 300px; /* Минимальная ширина колонки */
  box-sizing: border-box;
  padding: 10px;
}

@media (max-width: 800px) {
  .bible-column {
    flex: 100%; /* Колонки занимают всю ширину контейнера */
  }
}

.mainp h2 {
  text-align: center !important;
  margin-top: 20px !important;
  padding-bottom: 20px;
  border-bottom: 1px solid #999;
}

.pre-bible-text {
  font-size: 0.9em !important;
}

a#current-book {
  cursor: default;
}

.bar-description {
  font-size: 12px;
  padding-bottom: 5px;
  padding-left: 0px;
  opacity: .8;
}

.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-top-color: #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 10px auto;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

#infinite-scroll-trigger, .end-of-results {
  height: 150px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.keyword { font-weight: bold; }
/* ruby, rb, rt {
  display: inline-block;
} */

ruby {
  margin: 0;
  background: #AAAAAA11;
  padding: 15px 5px 5px 5px;
  border-radius: 4px;
  border: 1px solid #AAAAAA11;
}

ruby a {
  text-decoration: none;
}
ruby v {
  color: transparent;
}

.word-info {
  display: none; /* Скрываем по умолчанию */
  width: 100%;
  position: fixed;
  padding: 20px 40px;
  left: 0;
  bottom: 0;
  width: 100%;
  border-radius: 4px;
  font-size: 0.9em;
  color: #333;
  background-color: #d7d5ca;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 999;
}

.word-info .word-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  word-wrap: break-word;
  white-space: normal;
}

body.select-bar-enabled .word-info {
  bottom: 73px;
}

.word-link.active + .word-info {
  display: block; /* Показываем при активации */
}

.night-mode .word-info {
  color: #cdd1db;
  background-color: #3e4759;
}
#chapter-header {
  position: relative;
  padding-bottom: 30px;
  margin-bottom: 0;
}

#text-menu { display: flex; justify-content: flex-end; }
#text-menu > a {
  display: inline-block;
  padding: 2px;
  min-height: 30px;
  min-width: 40px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
}
#text-menu > a:hover {
  background-color: #80808010;
}
#text-menu > a.active {
  background-color: #8c6964;
  color: #f6f4e4;
  border-color: transparent;
}
.night-mode #text-menu > a.active {
  background-color: #cd9765;
  color: #2f3541;
}

#text-menu #text-small-btn {
  font-size: 1em;
  border: 1px solid #80808040;
  border-radius: 4px 0 0 4px;
}
#text-menu #text-medium-btn {
  font-size: 1.2em;
  border-top: 1px solid #80808040;
  border-bottom: 1px solid #80808040;
}
#text-menu #text-large-btn {
  font-size: 1.4em;
  border: 1px solid #80808040;
  border-radius: 0 4px 4px 0;
}


/* PAGINATION  */
#pagination-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-style: italic;
  margin: 35px 0 10px 0;
}

#pagination-bottom #end-tip {
  padding: 0 20px;
  text-align: center;
}

/* SELECT-BAR  */

#select-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0 10px;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #d7d5ca;
  user-select: none;
  z-index: 10;
  overflow: visible;
}

#select-bar .bar-el {
  display: inline-block;
  max-width: 135px;
  position: relative;
  text-align: center;
  padding: 13px 10px;
  text-decoration: none;
  font-size: 1em;
  background-color: #54524912;
  margin-right: 1px;
}

#select-bar .bar-el:hover {
  background-color: #e3c89e;
  cursor: pointer;
}
#select-bar .bar-el:active {
  background-color: #9f9c9733;
}
#select-bar .bar-el.active {
  color: #d7d5ca;
  background-color: #8c6964;
}

#select-bar .bar-el svg {
  width: 20px;
  height: 20px;
}

#select-bar .icon-title {
  font-size: 1.1em;
}

#select-bar .bar-el-group {
  display: flex;
  position: relative;
}

#select-bar .bar-el-group:hover {
  background-color: #dbc7a8;
}

.night-mode #select-bar .bar-el-group:hover {
  background-color: #1f6db2;
}

.night-mode #select-bar {
  background-color: #3e4759;
}

.night-mode #select-bar .bar-el {
  color: #cdd1db;
  background-color: #ffffff11;
}

.night-mode #select-bar .bar-el:hover {
  background-color: #257bc7;
  color: #fff;
}

.night-mode #select-bar .bar-el:active {
  background-color: #b8c6d533;
}
.night-mode #select-bar .bar-el.active {
  background-color: rgba(205,151,101, 1);
  color: #3e4759;
}

#copy-text-address-btn, #copy-burger-icon {
  display: inline-block;
}

#copy-burger-icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* контекстное меню копирования */
#copy-burger-menu {
  position: absolute;
  /* 0px - отступ справа, то есть прижимаем вправо */
  /* calc(100% + 3px) - отступ снизу вверх на высотку селект-бара, плюс 3px */
  inset: auto 0px calc(100% + 3px) auto;
  background-color: #fdfcf1;
  color: #000000;
  border-radius: 5px;
  border: 1px solid #b4ada2;
  box-shadow: 0px 0px 8px #282c3471;
  overflow: hidden;
  font-size: 1em;
  text-align: left;
}

/* элементы контекстного меню */
/* все */
#copy-burger-menu > div {
  padding: 8px 5px;
  border-bottom: 1px solid #9f9c9741;
  white-space: nowrap;
  padding: 8px 15px;
}
#copy-burger-menu > div:last-child {
  border-bottom: none !important;
}
/* заголовок */
#copy-burger-menu .menu-title {
  padding: 8px 28px;
  color: #ffffff;
  background-color: #817f7c8c;
  font-weight: bold;
  text-align: center;
  cursor: default;
}
/* активные */
#copy-burger-menu > .active-el {
  color: #000;
}
/* активные: наведённые */
#copy-burger-menu > .active-el:hover {
  background-color: #ebbc8177;
  border-color: transparent;
}
/* иконка активного элемента */
#copy-burger-menu > .active-el .icon-title {
  font-weight: bold;
  display: inline-block;
  min-width: 75px;
  text-align: right;
  padding: 0 10px 0 0;
  color: #00000040;
}

/* ночной режим */
.night-mode #copy-burger-menu {
  background-color: #3e4759;
  color: #cdd1db;
  border: 1px solid #ffffff11;
  box-shadow: 0px 0px 9px #282c34;
}
.night-mode #copy-burger-menu > div {
  border-bottom: 1px solid #ffffff11;
}
/* заголовок */
.night-mode #copy-burger-menu .menu-title {
  padding: 8px 28px;
  color: #a3a7b1;
  background-color: #343b49;
}
/* активные */
.night-mode #copy-burger-menu > .active-el {
  color: #cdd1db;
}
/* активные: наведённые */
.night-mode #copy-burger-menu > .active-el:hover {
  background-color: #257bc7;
  color: white;
}

.night-mode #copy-burger-menu > .active-el .icon-title {
  color: #ffffff40
}

po {
  display: inline-block;
  background-color: #88888833;
  border-radius: 2px;
}
po:hover {
  display: inline-block;
  background-color: #829eba33;
  border-radius: 2px;
  cursor: pointer;
}

dict .desc {
  background: #333;
  color: white;
  padding: 1rem;
  max-width: 600px;
  position: fixed;
  top: 1rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  white-space: pre-wrap;
}

/* POPUP for Select-bar */

#popup-notif {
  position: fixed;
  padding: 6px 10px;
  bottom: 130px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 250px;
  max-width: 500px;
  border-radius: 4px;
  text-align: center;
  font-size: 0.9em;
  color: #51504c;
  background-color: #d4e2ce;
  opacity: 1;
  -webkit-transition: opacity 500ms linear;
  transition: opacity 500ms linear;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  word-wrap: break-word;
}

.night-mode #popup-notif {
  color: #cdd1db;
  background-color: rgba(74,103,133,1);
}

#popup-notif t {
  display: block;
  margin-bottom: 2px;
  font-weight: bold;
}

.prev-next-bar {
  display: flex;
  justify-content: space-between;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
}

.prev {
  text-align: left;
}

.next {
  margin-left: auto;
  text-align: right;
}

#page-content {
  word-wrap: break-word;
}

#page-content img { max-width: 100%;}

#page-content.text-page table {
    border-collapse: collapse;
    margin: 0;
    overflow: hidden;
    table-layout: fixed;
    width: 100%;
}

#page-content.text-page table th {
    border: 1px solid #777777;
    box-sizing: border-box;
    min-width: 1em;
    padding: 6px 8px;
    position: relative;
    vertical-align: top;
}
#page-content.text-page table th {
    background-color: #AAAAAA;
    font-weight: 700;
    text-align: left;
}

#page-content.text-page table td, #page-content.text-page table th {
    border: 1px solid #777777;
    box-sizing: border-box;
    min-width: 1em;
    padding: 6px 8px;
    position: relative;
    vertical-align: top;
}


/* Для pages нужны помельче главы */
#page-content nav#menu-chapters a {
  font-size: 0.9em;
  font-family: inherit;
}

#page-content h1#subject {
  font-weight: 500;
}

#page-content .subject-desc {
  font-size: 0.9em;
}

#h1-title {
  margin-top: 10px;
  text-align: center;
}

#page-content #h1-title h1.title {
  display: inline-block;
}

#page-content h1.title {
  font-size: 36px;
}

#page-content #title-sub {
  margin: 12px 0 20px 0;
  text-align: center;
  font-size: 16px;
}
#page-content #links-sub {
  margin: 10px 0 0 0;
  font-size: 12px;
}

.btn-group {
  display: flex;
  justify-content: center; /* Горизонтальное выравнивание по центру */
  align-items: center; /* Вертикальное выравнивание по центру */
}

.btn {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #ccc;
  text-decoration: none;
}

.btn:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.btn:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.btn:not(:first-child) {
  border-left: none;
}

.btn:hover {
  background-color: #e9e9e9;
}

.btn.pressed {
  cursor: default;
  color: #6e6e6e;
  background-color: #f6f4e3;
}

.night-mode .btn {
  border: 1px solid #666;
}
.night-mode .btn:hover {
  background-color: #425369;
}

.night-mode .btn.pressed {
  cursor: default;
  color: #eee;
  background-color: #666;
}



#page-content p {
  hyphens: auto;
  hyphenate-limit-chars: 5 3 3;
}

@media (min-width: 1180px) {
  #page-content p {
    text-align: justify;
  }
}

#page-content .pages {
  margin: 0 0 20px 0;
  display: flex;
  flex-wrap: wrap;
  overflow-x: hidden;
}

#page-content #page-body {
  margin: 20px 0;
}

#page-references-text {
  font-size: 0.8em;
}

#page-references-title {
  margin-bottom: 20px;
}

#page-references ol,
#page-references ul {
  line-height: 1rem;
}


/* TEXT */

/* ПРИМЕНЯЕТСЯ К ТЕКСТАМ ИЗ СТАТЕЙ */
.looks-like-page hr {
  display: block;
  margin: 30px 0;
  border: 0;
  border-bottom: 1px dashed #aca08f;
  height: 1px;
}

.looks-like-page ul,
.looks-like-page ol {
  padding: 0;
  padding-inline-start: 32px;
  /* line-height: 1.5rem; */
}

.looks-like-page li > ul,
.looks-like-page li > ol {
  margin-top: 10px;
}

.looks-like-page li+li {
  margin: 12px 0 0;
}

.looks-like-page h1,
.looks-like-page h2 {
  font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif;
}

.looks-like-page h2 { border-bottom: 1px solid #999; padding-bottom: 3px; }

.looks-like-page h1 { font-weight: 200; }
.looks-like-page h2,
.looks-like-page h3,
.looks-like-page h4 {
  font-weight: 500;
}

.looks-like-page h1 {
  font-size: 1.8em;
  margin-top: 30px;
}
.looks-like-page h2 {
  font-size: 1.5em;
  margin-top: 2em;
}
.looks-like-page h3 {
  font-size: 1.2em;
  margin-top: 1.8em;
}
.looks-like-page h4 {
  font-size: 1.0em;
  margin-top: 1.5em;
}

.looks-like-page h2+p,
.looks-like-page h3+p,
.looks-like-page h4+p {
  margin-top: 0.8em;
}

.looks-like-page p+p {
  margin-top: 1.4em;
  display: block;
}

.looks-like-page blockquote > p { margin: 0 }

.looks-like-page code {
  background-color: rgba(#616161, 0.1);
  color: #616161;
}

.looks-like-page pre {
  background: #0D0D0D;
  color: #FFF;
  font-family: 'JetBrainsMono', monospace;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
}
.looks-like-page pre code {
  color: inherit;
  padding: 0;
  background: none;
  font-size: 0.8rem;
}

.looks-like-page img {
  height: auto;
}

.looks-like-page blockquote {
  border-left: 2px solid #d5cdb7;
  background-color: #d5cdb724;
  font-family: Arial,Helvetica,sans-serif;
  font-style: italic;
  margin: 20px 0;
  padding: 5px 10px;
}

.title-bar-icons {
  text-align: center;
}

.title-bar-icons a.icon {
  display: inline-block;
  width: 20px;
}

.source-link {
  margin: -20px 0 25px 0;
  font-size: .9em;
  padding: 4px 12px;
}
/* КОНЕЦ // ПРИМЕНЯЕТСЯ К ТЕКСТАМ ИЗ СТАТЕЙ */

.night-mode #page-content .subject {
  color: #b2bbc1;
}

/* MENU */
.level {
  margin-left: 15px;
}

.menu-subject.depth-0 {
  font-weight: 600;
  margin-top: 0.8em;
}
.menu-subject {
  font-size: 1.1em;
  font-weight: bold;
  margin-top: 0.9em;
  margin-bottom: 0.5em;
}

.menu-unit {
  display: inline-block;
  overflow: hidden;
  border-radius: 3px;
  padding: 0;
  margin: 1px 4px 1px 0;
}

.menu-tree .menu-link.not-exist span {
  padding: 5px 10px;
  color: #AAAAAA;
  background-color: #80808015;
}
.menu-tree .menu-link.not-exist a:hover span {
  padding: 5px 10px;
  color: #AAAAAA;
  background-color: rgba(102, 102, 102, 0.153);
}

.menu-tree .menu-link a {
  text-decoration: none;
}

.menu-tree .menu-link span {
  display: inline-block;
  padding: 5px 10px;
  height: 100%;
  color: #4c5428;
  background-color: #204f0314;
  z-index: -1;
}
.menu-tree .menu-link a:hover span {
  color: #4c5428b8;
  background-color: #2c640a1c;
  -webkit-transition: background-color 80ms ease;
  -ms-transition: background-color 80ms ease;
  transition: background-color 80ms ease;
}

/* GOLD */
.menu-tree .menu-link.gold span {
  color: #5f572b !important;
  background: #ffd7008a;
}
.menu-tree .menu-link.gold a:hover span {
  background: #ffd700b0;
}

.menu-tree .menu-link.selected span,
.menu-tree .menu-link.selected a:hover span {
  background-color: #8c6964;
  color: #fdfcf1 !important;
}

.night-mode .menu-tree .menu-link.gold span {
  color: #ffe86b !important;
  background: #ffd70014;
}
.night-mode .menu-tree .menu-link.gold a:hover span {
  background: #ffd70020;
}

.night-mode .menu-tree .menu-link span {
  color: #61afef;
}
.night-mode .menu-tree .menu-link a:hover span {
  color: #7dc3ff;
}

.night-mode .menu-tree .menu-link.selected span,
.night-mode .menu-tree .menu-link.selected a:hover span {
  background-color: rgba(205,151,101, 1);
  color: #282c34 !important;
}


.night-mode .menu-tree span {
  background-color: #61afef10;
}

.night-mode .menu-tree a:hover span {
  background-color: #61afef20;
}

.menu-tree {
  padding: 5px 0 0 0;
}

.menu-tree.hidden-children .menu-link,
.menu-tree.hidden-children .menu-subject {
  display: none;
}
.menu-tree.hidden-children .visible {
  display: inline-block;
}


.menu-tree a.non-kanon span {
  background-color: #7e7e7e30;
  color: #888;
}
.menu-tree a.non-kanon:hover span {
  background-color: #7e7e7e40;
  color: #777;
}
.night-mode .menu-tree a.non-kanon span {
  background-color: #7e7e7e1f;
  color: #999;
}
.night-mode .menu-tree a.non-kanon:hover span {
  background-color: #7e7e7e2f;
  color: #AAA;
}


.menu-tree .menu-link.not-exist span {
  padding: 5px 10px;
  color: #AAAAAA;
  background-color: #80808015;
}
.menu-tree .menu-link.not-exist a:hover span {
  padding: 5px 10px;
  color: #AAAAAA;
  background-color: rgba(102, 102, 102, 0.153);
}



/* GOD */
.menu-tree .menu-link.gold.God span {
  color: #fff !important;
  background-color: #b63333 !important;
  font-weight: bold;
}
.menu-tree .menu-link.gold.God a:hover span {
  background-color: #c84242 !important;

}

.menu-tree .icon {
  width: 40px;
  height: 32.5px;
  margin: 0;
  border-radius: 4px 0 0 4px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  /* --- */
  background-color: #836b5240;
}
.night-mode .menu-tree .icon {
  background-color: #836b527d;
}

.menu-tree .icon .real img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* вписывается в контейнер, сохраняя пропорции */
  object-position: center; /* центрирует картинку (можно изменить на top, left и т. д.) */
}

.menu-link a {
  display: flex !important;
  align-items: flex-start;
}

.menu-tree a span {
  flex: 1;
}

.menu-tree .vis {
  display: inline-block;
  font-size: .5em;
  vertical-align: middle;
  opacity: .6;
  margin-left: 2px;
  user-select: none;
}
/* menu end */


.night-mode #page-content blockquote {
  border-left: 2px solid #90b990;
  background-color: #90b99011;
}
.night-mode #page-content #title-sub {
  color: #777;
}

.filter {
  font-size: 24px;
  margin: 0 0 10px 0;
}

/* article menu */

#article-menu {
  margin: 40px auto 10px auto;
  min-width: 200px;
  max-width: 900px;
  padding: 10px 15px;
  border: 1px solid #7777772E;
  border-radius: 3px;
  background-color: #90888111;
}
.text-small #article-menu { font-size: 1.2em; }
.text-medium #article-menu { font-size: 1.0em; }
.text-large #article-menu { font-size: 0.85em; }

#article-menu .menu-name {
  text-align: center;
}

#article-menu .nav-h2,
#article-menu .nav-h3,
#article-menu .nav-h4 {
  margin: 10px 0;
}

#article-menu .nav-h2 { margin-left: 0; }
#article-menu .nav-h3 { margin-left: 20px; font-size: 0.8em; }
#article-menu .nav-h4 { margin-left: 40px; font-size: 0.6em; }

#article-menu .short { display: inline-block; margin-right: 10px; }

/* маркер перед старшими пунктами меню */
/* #article-menu .nav-h2::before {
  content: "・";
  margin-left: 0px;
  margin-right: 0px;
} */

/* подсветка параграфа, к которому перешли по нажатию на якорь сноску */
#page-references-text p:target {
  color: #000000;
  background-color: #cd97652e;
  border: 1px solid #cd97655e;
  border-radius: 3px;
  padding: 3px 8px;
}
.night-mode #page-references-text p:target {
  color: #EEEEEE;
  background-color: #90b9901c;
  border: 1px solid #90b9905e;
}

.foot-ref a,
a.foot-note {
  text-decoration: none;
}

/* сноски не нужно выделять и копировать */
.foot-ref,
a.foot-note {
  user-select: none;
}

h2.parent-title {
  border-bottom: none;
  text-align: center;
  font-size: 1em;
  margin: 0 0 -10px 0;
  padding: 0;
}

.parent-title a {
  text-decoration: none;
}

/* ============================ minimap ======================== */

/*
#minimap-container { right: 0; }
.minimap { right: 20px; }
.minimap-items { right: 0; }
.minimap-item { right: 0; }
.minimap-label { right: 5px; }
.minimap-items:hover .minimap-label,
#minimap-container.opened .minimap-label { right: 15px; }
.minimap-hit-area { right: 0; }
.minimap-progress { right: 0; }

также поменяй все border-right-color и border-right на left (наоборот тут)
*/

#minimap-container {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100px;
    z-index: 100;
}

.minimap {
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 0;
    width: 4px;
    background-color: rgba(0,0,0,0.1);
}

.minimap-items {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 200px;
}

.minimap-item {
    position: relative;
    left: 2px;
    width: 6px;
    height: 6px;
    background-color: #5252527c;
    border-radius: 50%;
    margin-left: -3px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.minimap-item.active {
    background-color: #0000007e;
}

/* синяя обводка активного кружка */
.minimap-item.active::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0); /* Начальное состояние - масштаб 0 */
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: rgba(0, 110, 255, 0.3);
  z-index: -1;
  opacity: 0; /* Начальное состояние - прозрачный */
  transition: transform 2s ease, opacity 2s ease; /* Анимация масштаба и прозрачности */
}

/* Состояние при активации */
.minimap-item.active::before {
  transform: translate(-50%, -50%) scale(1); /* Конечное состояние - масштаб 1 */
  opacity: 1; /* Конечное состояние - непрозрачный */
}

.minimap-label {
    display: block;
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #fff;
    color: #333 !important;
    border-color: #d3d3d3;
    text-decoration: none !important;
    border: 1px solid #ddd;
    padding: 4px 8px;
    border-radius: 3px;
    white-space: nowrap;
    opacity: 0;
    font-size: 13px;
    transition: all 0.09s ease-out;
    will-change: transform, opacity;
    z-index: 4;
}

/* если меток очень много, то они по умолчанию скрыты */
.too-many .minimap-label {
  display: none;
}
.minimap-label.visible {
  display: block;
}

/* фон, когда открыта миникарта с помощью кнопки */
#minimap-container.opened {
  width: 100%;
  background: linear-gradient(to right, transparent, #fdfcf1);
}
.night-mode #minimap-container.opened {
  width: 50%;
  background: linear-gradient(to right, transparent, #5b5b5b73);
}

/* наведение мышкой на меню, или клик на открытие меню (добавит класс opened) */
.minimap-items:hover .minimap-label,
#minimap-container.opened .minimap-label {
    opacity: 1;
    left: 15px; /* Конечная позиция метки после появления */
    pointer-events: auto;
}
/* активный (сейчас читаемый) элемент */
.minimap-item.active .minimap-label {
    border-color: #215ee2;
}
/* наведенный мышкой элемент */
.minimap-label:hover {
    border-color: #a4a4a4;
    z-index: 999 !important;
}
/* показывается, когда скрываются все прочие labels, если их очень много на странице */
/* показывается либо тот, на который навели мышкой, либо активный */
.minimap-item.active .minimap-label,
.minimap-item .minimap-label:hover {
    display: block;
}

/* Невидимая область для наведения (после наведения появляется соответствеющий label */
.minimap-hit-area {
    position: absolute;
    left: 0;
    top: -11px;
    bottom: 0;
    width: 100px; /* Широкая область для наведения */
    height: 30px;
    z-index: 3;
}

/* Стрелочка к точке */
.minimap-label::after {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 6px solid #fff;
    z-index: 1;
}

/* Обводка для стрелочки */
.minimap-label::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 7px solid #ddd;
    z-index: 0;
}
/* изменение СТРЕЛОЧКИ при наведении, и у активного элемента */
/* активная */
.minimap-item.active .minimap-label::before {
    border-right: 7px solid #215ee2;
}
/* наведённая */
.minimap-label:hover::before {
    border-right: 7px solid #a4a4a4;
}


/* ================= Тёмная тема ===================== */
.night-mode .minimap {
    background-color: rgba(255,255,255,0.1);
}

.night-mode .minimap-item {
    background-color: #aaaaaa58;
}

.night-mode .minimap-item.active {
    background-color: #ffffff9b;
}

/* МЕТКА */
.night-mode .minimap-label {
    background-color: #242424;
    color: #eee !important;
    border-color: #555;
}
/* МЕТКА active */
.night-mode .minimap-item.active .minimap-label {
    border-color: #215ee2;
}
/* МЕТКА HOVER */
.night-mode .minimap-label:hover {
    background-color: #2c2c2c;
}

/* СТРЕЛОЧКА */
.night-mode .minimap-label::after {
    border-right-color: #242424;
}
/* ОБВОДКА СТРЕЛОЧКИ */
.night-mode .minimap-label::before {
    border-right-color: #555;
}

/* изменение стрелочки при наведении и у активного элемента */
/* ОБВОДКА СТРЕЛОЧКИ HOVER */
.night-mode .minimap-label:hover::before {
    border-right-color: #555;
}
/* СТРЕЛОЧКА HOVER */
.night-mode .minimap-label:hover::after {
    border-right-color: #2c2c2c;
}
/* ОБВОДКА СТРЕЛОЧКА АКТИВНАЯ */
.night-mode .minimap-item.active .minimap-label::before {
  border-right-color: #215ee2;
}

/* ПОКАЗЫВАЕМ КАРТУ ТОЛЬКО НА БОЛЬШИХ ЭКРАНАХ */
/* @media (max-width: 1250px) {
  #minimap-container { display: none;}
} */


.copy-anchor {
  content: url('data:image/svg+xml;utf8,<svg fill="%23a0ae62" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M6.354 5.5H4a3 3 0 0 0 0 6h3a3 3 0 0 0 2.83-4H9c-.086 0-.17.01-.25.031A2 2 0 0 1 7 10.5H4a2 2 0 1 1 0-4h1.535c.218-.376.495-.714.82-1z"/><path d="M9 5.5a3 3 0 0 0-2.83 4h1.098A2 2 0 0 1 9 6.5h3a2 2 0 1 1 0 4h-1.535a4.02 4.02 0 0 1-.82 1H12a3 3 0 1 0 0-6H9z"/></svg>');
  position: absolute;
  left: -32px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  width: 35px;
  padding-right: 10px;
  height: 100%;
}

h1:hover .copy-anchor,
h2:hover .copy-anchor,
h3:hover .copy-anchor,
h4:hover .copy-anchor,
.copy-anchor:hover {
  opacity: 1;
}

#page-body.verses {
  margin-top: -20px !important;
}

#search-results .match {
  margin: 0 0 10px 39px;
  position: relative;
}

#search-results .thumb {
  width: 30px;
  position: absolute;
  margin: 4px 0 0 -40px;
}

#search-results .parent-link {
  margin-top: 5px;
  opacity: .5;
  font-size: .5em;
}

#search-results .line a {
  display: block;
  font-size: 0.8em;
  text-decoration: none;
  color: #333;
  margin: 0 0 25px 0;
  /* user-select: text; */
  /* -webkit-user-drag: none; */
}

#search-results .line a:hover { color: #8c6964; }
.night-mode #search-results .line a { color: #abb2bf; }
.night-mode #search-results .line a:hover { color: #7dc3ff; }

#search-input {
  width: 100%;
}

.search-options {
  display: flex;
  gap: 10px;
}

.search-options > .search-param {
  flex-grow: 1;
}

#search-input-area {
  position: relative;
}

#search-input-area .search-icon {
  position: absolute;
  right: 12px;
  top: 12px;
  cursor: pointer;
  background: none;
  border: none;
}