/* ═══════════════════════════════════════
   MojaBiblia — Clean Scholarly Design
   ═══════════════════════════════════════ */

:root {
    /* Default colors (matched to new redesign navy/gold/cream palette) */
    --color-bg: #FFFFFF;            /* paper */
    --color-bg-subtle: #FAF3DD;     /* cream-col */
    --color-bg-warm: #FFF8E6;       /* cream-card */
    --color-text: #1B2A4E;          /* navy / ink */
    --color-text-muted: #4A536B;    /* ink-muted */
    --color-text-light: #6E7693;    /* ink-soft */
    --color-accent: #1B2A4E;        /* navy */
    --color-accent-hover: #0F1B36;  /* navy-deep */
    --color-link: #C8A24E;          /* gold */
    --color-border: rgba(200, 162, 78, 0.40);
    --color-border-light: rgba(200, 162, 78, 0.20);
    --color-verse-num: #C8A24E;
    --color-highlight: #FFF1B8;
    --color-nav-bg: #1B2A4E;
    --color-nav-bg-2: #0F1B36;
    --color-nav-accent: #D9B870;
    --color-words-of-christ: #B03030;
    --color-favorite-accent: #4A8C5E;

    /* Bootstrap component overrides — keep dropdowns/modals themed */
    --bs-body-bg: var(--color-bg);
    --bs-body-color: var(--color-text);
    --bs-dropdown-bg: var(--color-bg);
    --bs-dropdown-color: var(--color-text);
    --bs-dropdown-link-color: var(--color-text);
    --bs-dropdown-link-hover-bg: var(--color-bg-subtle);
    --bs-dropdown-link-hover-color: var(--color-accent);
    --bs-dropdown-link-active-bg: var(--color-accent);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-border-color: var(--color-border);
    --bs-dropdown-divider-bg: var(--color-border);
    --bs-modal-bg: var(--color-bg);
    --bs-modal-color: var(--color-text);
    --bs-modal-border-color: var(--color-border);
    --bs-border-color: var(--color-border);

    --font-reading: 'Merriweather', 'Georgia', 'Times New Roman', serif;
    --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    --reading-scale: 1;
    --reading-size: calc(1.06rem * var(--reading-scale, 1));
    --reading-size-sm: calc(0.9rem * var(--reading-scale, 1));
    --reading-line-height: 2;
    --max-width: 760px;
}

/* ── Reset & Base ── */
body {
    font-family: var(--font-ui);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

/* ── Centered content ── */
.bible-main {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1.5rem 1.25rem;
}

.bible-main:has(.layout-split) {
    max-width: 100%;
}

.bible-main:has(.tagger-page) {
    max-width: 1140px;
}

/* ═══ TAGGER (Odkazovník) PAGE ═══ */
.tagger-page-header {
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.tagger-page-header h1 {
    font-family: var(--font-reading);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-accent);
    margin: 0 0 0.3rem;
    letter-spacing: -0.01em;
}

.tagger-page-header .lead {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    margin: 0;
}

.tagger-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 2.5rem;
    align-items: start;
}

.tagger-nav {
    position: sticky;
    top: 1rem;
}

.tagger-nav-title {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.5rem;
    margin: 0 0 0.5rem;
}

.tagger-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tagger-nav li a {
    display: block;
    padding: 0.45rem 0.75rem;
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.88rem;
    border-left: 2px solid transparent;
    border-radius: 0 4px 4px 0;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.tagger-nav li a:hover {
    color: var(--color-accent);
    background: var(--color-bg-subtle);
    border-left-color: var(--color-border);
}

.tagger-nav li a.is-active {
    color: var(--color-accent);
    background: var(--color-bg-subtle);
    border-left-color: var(--color-accent);
    font-weight: 600;
}

.tagger-content > section {
    scroll-margin-top: 1rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--color-border-light);
    margin-bottom: 2.5rem;
}

.tagger-content > section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.tagger-content h2 {
    font-family: var(--font-reading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-accent);
    margin: 0 0 1rem;
    letter-spacing: -0.005em;
}

.tagger-content h3 {
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 2.5rem 0 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tagger-content p {
    line-height: 1.7;
    color: var(--color-text);
    margin: 0 0 0.85rem;
}

.tagger-content ul, .tagger-content ol {
    line-height: 1.7;
    color: var(--color-text);
}

.tagger-content code {
    font-family: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
    font-size: 0.85em;
    background: var(--color-bg-subtle);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    color: var(--color-accent);
    border: 1px solid var(--color-border-light);
}

.tagger-syntax-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    margin: 0.75rem 0;
}

.tagger-syntax-table th,
.tagger-syntax-table td {
    text-align: left;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--color-border-light);
}

.tagger-syntax-table th {
    background: var(--color-bg-subtle);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}

.tagger-syntax-table .td-type {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    white-space: nowrap;
    width: 1%;
    padding-right: 1.25rem;
    vertical-align: middle;
}

.tagger-syntax-table .td-ref {
    font-family: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-accent);
    white-space: nowrap;
    width: 1%;
    padding-right: 1.25rem;
    vertical-align: middle;
}

.tagger-syntax-table .td-desc {
    color: var(--color-text);
    line-height: 1.5;
    vertical-align: middle;
}

/* Mobile: stack each row as a vertical card. The cells become block-level
   (width: auto so they fill the row), explicitly overriding the desktop
   `width: 1%` which would otherwise crush them down to a single character
   wide. The bible reference keeps `nowrap` so "Jn 1.3.5" stays one piece;
   the description column gets the full row width on a separate line. */
@media (max-width: 640px) {
    .tagger-syntax-table,
    .tagger-syntax-table tbody,
    .tagger-syntax-table tr {
        display: block;
        width: 100%;
    }
    .tagger-syntax-table tr {
        padding: 14px 0 12px;
        border-bottom: 1px solid var(--color-border-light);
    }
    .tagger-syntax-table tr:last-child { border-bottom: 0; }
    .tagger-syntax-table td {
        display: block;
        width: auto;          /* override desktop `width: 1%` */
        max-width: 100%;
        padding: 0;
        border-bottom: 0;
    }
    .tagger-syntax-table .td-type {
        white-space: normal;
        margin-bottom: 4px;
        padding-right: 0;
        font-size: 0.7rem;
    }
    .tagger-syntax-table .td-ref {
        white-space: nowrap;  /* keep "Jn 1.3.5" together */
        margin-bottom: 6px;
        padding-right: 0;
        font-size: 0.95rem;
    }
    .tagger-syntax-table .td-desc {
        white-space: normal;
        font-size: 0.92rem;
        line-height: 1.55;
    }
}

.tagger-code-block {
    position: relative;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 1rem 1.1rem;
    font-family: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--color-text);
    overflow-x: auto;
    margin: 1rem 0;
}

.tagger-code-block pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.tagger-code-copy {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    font-size: 0.75rem;
    padding: 0.2rem 0.55rem;
}

/* Inline reference example — looks like <code>, but tagger CAN process it */
.tagger-content .ref-example {
    font-family: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
    font-size: 0.85em;
    background: var(--color-bg-subtle);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    color: var(--color-accent);
    border: 1px solid var(--color-border-light);
    white-space: nowrap;
}

/* Strip dotted underline when ref is inside .ref-example (looks busy) */
.ref-example .mb-tagger-ref {
    border-bottom: none !important;
    color: inherit !important;
}
.ref-example .mb-tagger-ref:hover {
    color: var(--color-link) !important;
}

/* Theme-aware tagger ref links (rest of page) */
.tagger-content .mb-tagger-ref {
    color: var(--color-link) !important;
    border-bottom: 1px dotted var(--color-link) !important;
}
.tagger-content .mb-tagger-ref:hover {
    color: var(--color-accent) !important;
    border-bottom-color: var(--color-accent) !important;
}

.tagger-demo-box {
    background: var(--color-bg-warm);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-link);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin: 1rem 0;
    font-size: 0.92rem;
    line-height: 1.7;
}

/* ═══ GENERATOR & SEARCH WIDGET PAGES ═══ */
.generator-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
    margin-top: 1rem;
}

.generator-input,
.generator-output {
    min-width: 0; /* allow shrink within grid */
}

.generator-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1rem 0;
    align-items: end;
}

.generator-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.generator-output .nav-tabs {
    margin-bottom: 0;
}

.generator-output .tab-content {
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 6px 6px;
    padding: 1rem;
    background: var(--color-bg);
    min-height: 300px;
}

.generator-preview {
    min-height: 240px;
    line-height: 1.7;
    overflow-wrap: break-word;
}

.generator-preview p:last-child {
    margin-bottom: 0;
}

.generator-output .tagger-code-block {
    margin-top: 0;
    border-radius: 6px;
}

.generator-output #genCodeBody,
.generator-output #swCode {
    max-height: 360px;
    overflow-y: auto;
}

.generator-help {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.generator-help ol {
    line-height: 1.8;
}

@media (max-width: 900px) {
    .generator-grid {
        grid-template-columns: 1fr;
    }
    .generator-options {
        grid-template-columns: 1fr;
    }
}

.tagger-config-row {
    display: flex;
    gap: 1.25rem;
    align-items: end;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .tagger-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .tagger-nav {
        position: static;
    }
    .tagger-nav ul {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
    }
    .tagger-nav li a {
        padding: 0.35rem 0.7rem;
        font-size: 0.82rem;
        border-left: none;
        border-bottom: 2px solid transparent;
        border-radius: 4px;
    }
    .tagger-nav li a.is-active {
        border-left: none;
        border-bottom-color: var(--color-accent);
    }
}

/* ═══ NAVBAR ═══ */
.site-nav {
    background: var(--color-nav-bg);
    border-bottom: 2px solid var(--color-nav-accent);
    padding: 0.5rem 0;
}

.site-nav .navbar-brand {
    font-family: var(--font-reading);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    color: var(--color-nav-accent) !important;
}

.nav-menu-link {
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    transition: all 0.15s;
}

.nav-menu-link:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
}

.nav-menu-link.active {
    color: #fff;
    background: rgba(255,255,255,0.15);
}

.site-nav .nav-search {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    font-size: 0.82rem;
    border-radius: 6px;
    transition: all 0.2s;
}

.site-nav .nav-search:focus {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.3);
    box-shadow: none;
    color: #fff;
}

.site-nav .nav-search::placeholder {
    color: rgba(255,255,255,0.5);
}

.site-nav .navbar-toggler {
    border: 1px solid rgba(255,255,255,0.25);
    padding: 0.25rem 0.5rem;
    background: transparent;
}

.site-nav .navbar-toggler:focus {
    box-shadow: 0 0 0 2px rgba(255,255,255,0.2);
}

.site-nav .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    width: 1.25em;
    height: 1.25em;
}

.mobile-nav {
    background: var(--color-nav-bg);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.mobile-nav-link {
    display: block;
    padding: 0.55rem 0.75rem;
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.95rem;
}

.mobile-nav-link:hover {
    color: #fff;
    background: rgba(255,255,255,0.08);
}

.mobile-nav-link.active {
    color: #fff;
    background: rgba(255,255,255,0.15);
}

.mobile-nav-section {
    padding: 0.75rem 0.75rem 0.25rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.45);
    font-weight: 600;
}

/* ═══ TOOLBAR ═══ */
.bible-toolbar-wrap {
    background: var(--color-bg-subtle);
    border-bottom: 1px solid var(--color-border);
}

.bible-toolbar-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 0.5rem 1.25rem;
}

.bible-toolbar .btn {
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 6px;
    padding: 0.3rem 0.65rem;
}

.bible-toolbar .btn-book-select {
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-weight: 600;
}

.bible-toolbar .btn-book-select:hover {
    background: var(--color-border);
}

.bible-toolbar .btn-tool {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
}

.bible-toolbar .btn-tool:hover,
.bible-toolbar .btn-tool.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

/* Text-size buttons (A-, A, A+) */
.text-size-btn {
    line-height: 1;
    padding: 0.3rem 0.55rem !important;
    font-family: var(--font-ui);
}
.text-size-btn .ts-a {
    font-weight: 700;
    line-height: 1;
}
.text-size-btn .ts-a-sm  { font-size: 0.74rem; }
.text-size-btn .ts-a-md  { font-size: 0.95rem; }
.text-size-btn .ts-a-lg  { font-size: 1.18rem; }
.text-size-btn .ts-sign {
    font-size: 0.65rem;
    margin-left: 1px;
    font-weight: 700;
}
.text-size-btn:disabled,
.text-size-btn.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ═══ BIBLE TEXT ═══ */
.bible-text-container {
    background: var(--color-bg);
    border: none;
    border-radius: 0;
    padding: 0.5rem 0;
}

.bible-text {
    font-family: var(--font-reading);
    font-size: var(--reading-size);
    line-height: var(--reading-line-height);
    color: var(--color-text);
    letter-spacing: 0.01em;
}

.bible-text-sm {
    font-family: var(--font-reading);
    font-size: var(--reading-size-sm);
    line-height: 1.65;
    color: var(--color-text);
}

/* ── Verse numbers ── */
.verse-num {
    color: var(--color-verse-num);
    font-family: var(--font-ui);
    font-size: 0.6em;
    font-weight: 700;
    margin-right: 2px;
    user-select: none;
    vertical-align: super;
    opacity: 0.85;
}

/* ── Words of Christ ── */
.words-of-christ {
    color: var(--color-words-of-christ);
}

/* ── Section titles in text ── */
.section-title {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.88em;
    display: block;
    margin: 1em 0 0.4em;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Verse interaction ── */
.verse {
    cursor: pointer;
    border-radius: 3px;
    transition: background-color 0.12s;
    padding: 1px 2px;
}

.verse:hover {
    background-color: var(--color-bg-subtle);
}

/* Selected verse — gold gradient with subtle inset border (matches biblia5).
   Dark mode uses lighter gold variants so the tint stays visible against
   the dark paper background. */
.verse.selected {
    background: linear-gradient(180deg, rgba(200, 162, 78, 0.18), rgba(200, 162, 78, 0.10));
    box-shadow: inset 0 0 0 1px rgba(200, 162, 78, 0.45);
    border-radius: 4px;
}
[data-theme="dark"] .verse.selected {
    background: linear-gradient(180deg, rgba(240, 210, 140, 0.18), rgba(240, 210, 140, 0.08));
    box-shadow: inset 0 0 0 1px rgba(240, 210, 140, 0.50);
}

/* ═══ CHAPTER NAVIGATION ═══ */
.chapter-nav {
    padding: 0.5rem 0;
    margin: 0.5rem 0;
}

.chapter-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    text-decoration: none;
    color: var(--color-accent);
    font-size: 0.82rem;
    font-weight: 500;
    padding: 0.3rem 0.7rem;
    border-radius: 20px;
    transition: all 0.15s;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border-light);
}

.chapter-nav-link:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.chapter-nav-center {
    font-size: 0.78rem;
    color: var(--color-text-light);
    letter-spacing: 0.02em;
    font-weight: 500;
}

/* ═══ CHAPTER BUTTONS (dropdown) ═══ */
.chapter-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 4px;
    width: 380px;
}

@media (max-width: 575.98px) {
    .chapter-grid {
        grid-template-columns: repeat(7, 1fr);
        width: 280px;
    }
}

.chapter-btn {
    font-size: 0.8rem;
    padding: 0.4rem 0;
    text-align: center;
    border-radius: 5px;
    font-weight: 500;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ═══ COMPARE DROPDOWN ═══ */
.compare-dropdown {
    flex-direction: column;
    width: 520px;
    max-width: calc(100vw - 1rem);
    max-height: 460px;
    padding: 0;
    overflow: hidden;
}

/* Override Bootstrap's .dropdown-menu.show { display:block } so flex layout works */
.dropdown-menu.compare-dropdown.show {
    display: flex;
}

.compare-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
    flex-shrink: 0;
}

.compare-header-title {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.compare-close {
    width: 0.75rem;
    height: 0.75rem;
    padding: 0.4rem;
    opacity: 0.6;
}
.compare-close:hover {
    opacity: 1;
}

/* Mode toggle (Pod sebou / Vedľa seba) inside dropdown */
.compare-mode {
    display: flex;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-border-light);
    flex-shrink: 0;
}

.compare-mode-opt {
    flex: 1;
    margin: 0;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-text-muted);
    background: var(--color-bg);
    text-align: center;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.compare-mode-opt:hover {
    background: var(--color-bg-subtle);
}

.compare-mode-opt input[type="radio"] {
    /* visually hidden but accessible */
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.compare-mode-opt:has(input:checked) {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.compare-mode-opt small {
    opacity: 0.75;
    font-size: 0.92em;
}

.compare-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.1rem 0.5rem;
    padding: 0.6rem 0.75rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;          /* allow shrinking inside flex parent */
}

.compare-check:disabled + .form-check-label {
    opacity: 0.4;
    cursor: not-allowed;
}
.compare-item:has(input:disabled) {
    cursor: not-allowed;
}
.compare-item:has(input:disabled):hover {
    background: transparent;
}

.compare-list::-webkit-scrollbar {
    width: 6px;
}
.compare-list::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}

.compare-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.45rem;
    margin: 0;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1.3;
    transition: background-color 0.1s;
    min-height: 0;
}

.compare-item:hover {
    background: var(--color-bg-subtle);
}

.compare-item .form-check-input {
    margin: 0;
    flex-shrink: 0;
}

.compare-item .form-check-label {
    cursor: pointer;
    user-select: none;
    flex: 1;
    line-height: 1.35;
    word-break: break-word;
}

.compare-actions {
    display: flex;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .compare-dropdown {
        width: 320px;
    }
    .compare-list {
        grid-template-columns: 1fr;
    }
}

/* ═══ COMPARE TABLE LAYOUT (side-by-side) ═══ */
.compare-table {
    --cols: 3;
    width: 100%;
}

.compare-row {
    display: grid;
    grid-template-columns: 36px repeat(var(--cols), 1fr);
    gap: 0 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--color-border-light);
    align-items: start;
}

.compare-row:last-child {
    border-bottom: none;
}

.compare-table-header {
    border-bottom: 2px solid var(--color-border);
    padding: 0.5rem 0;
    margin-bottom: 0.3rem;
    position: sticky;
    top: 0;
    background: var(--color-bg);
    z-index: 1;
}

.compare-cell-verse-num {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-verse-num);
    text-align: right;
    padding-top: 0.15rem;
    user-select: none;
}

.compare-table-header .compare-cell-verse-num {
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.7rem;
    padding-top: 0;
}

.compare-cell-shortcut {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-accent);
    text-align: left;
}

.compare-cell {
    font-family: var(--font-reading);
    font-size: var(--reading-size-sm);
    line-height: 1.55;
    color: var(--color-text);
    overflow-wrap: break-word;
}

.compare-stacked-verse {
    color: var(--color-accent);
}

@media (max-width: 575.98px) {
    .compare-row {
        grid-template-columns: 28px repeat(var(--cols), 1fr);
        gap: 0 0.6rem;
    }
    .compare-cell {
        font-size: 0.85rem;
    }
}

/* ═══ TRANSLATION DROPDOWN ═══ */
.translation-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    min-width: 360px;
    max-height: 400px;
    overflow-y: auto;
    padding: 0.25rem;
}

.translation-grid .dropdown-item {
    font-size: 0.82rem;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .translation-grid {
        min-width: 280px;
    }
}

/* ═══ SECTION LABELS ═══ */
.section-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.4rem;
    margin-bottom: 0.5rem;
}

/* ═══ BOOK MODAL ═══ */
.book-list-item {
    font-size: 0.85rem;
    padding: 0.35rem 0.6rem;
    border-radius: 4px;
    color: var(--color-text);
    text-decoration: none;
    display: block;
    transition: background-color 0.1s;
}

.book-list-item:hover {
    background-color: var(--color-bg-subtle);
    color: var(--color-text);
}

.book-list-item.active {
    background-color: var(--color-accent);
    color: #fff;
}

.book-list-item.active .text-muted {
    color: rgba(255,255,255,0.7) !important;
}

.book-list-item strong {
    display: inline-block;
    min-width: 42px;
    font-weight: 700;
}

/* ═══ TABS (references, footnotes) ═══ */
.nav-tabs {
    border-bottom-color: var(--color-border);
}

.nav-tabs .nav-link {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-text-muted);
    border: none;
    padding: 0.5rem 1rem;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

.nav-tabs .nav-link:hover {
    color: var(--color-text);
    border-bottom-color: var(--color-border);
}

.nav-tabs .nav-link.active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
    background: transparent;
}

.tab-content {
    font-size: 0.88rem;
}

/* ═══ REFERENCES & FOOTNOTES ═══ */
.ref-group {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border-light);
}

.ref-group:last-child {
    border-bottom: none;
}

.ref-verse-header {
    margin-bottom: 0.6rem;
}

.ref-verse-label {
    display: block;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-accent);
    margin-bottom: 0.25rem;
}

.ref-verse-text {
    font-family: var(--font-reading);
    font-size: 0.88rem;
    color: var(--color-text);
    line-height: 1.55;
    margin: 0 0 0.5rem;
}

.ref-item {
    margin-left: 2rem;
    margin-bottom: 0.65rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--color-border);
}

.ref-link {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
    background: var(--color-bg-subtle);
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    margin-bottom: 0.2rem;
    transition: all 0.12s;
}

.ref-link:hover {
    color: var(--color-bg);
    background: var(--color-accent);
}

.ref-text {
    font-family: var(--font-reading);
    font-size: 0.82rem;
    color: var(--color-text-muted);
    line-height: 1.55;
    margin: 0.2rem 0 0;
}

/* ═══ SHARE MODAL & FB BUTTON ═══ */
.share-fb-btn {
    background: #1877f2 !important;
    border-color: #1877f2 !important;
    color: #fff !important;
}
.share-fb-btn:hover,
.share-fb-btn:focus {
    background: #166fe5 !important;
    border-color: #166fe5 !important;
    color: #fff !important;
}

/* FB icon button in selection bar — keep white-ish, hint of FB blue on hover */
.fb-share-btn:hover {
    color: #1877f2;
}

#shareText {
    font-family: var(--font-reading);
    font-size: 0.9rem;
    line-height: 1.55;
    resize: vertical;
}

.share-modal-footer {
    justify-content: space-between;
    gap: 0.5rem;
}

/* ═══════════════════════════════════════
   NOTES LIST PAGE (/moje-poznamky/)
   ═══════════════════════════════════════ */
.notes-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.note-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-link);
    border-radius: 8px;
    padding: 0.85rem 1rem 0.7rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.note-card:hover {
    border-color: var(--color-text-light);
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.note-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
    flex-wrap: wrap;
}

.note-card-refs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.note-card-ref {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    text-decoration: none;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border-light);
    transition: background 0.12s, border-color 0.12s;
}

.note-card-ref:hover {
    background: var(--color-bg-warm);
    border-color: var(--color-link);
    text-decoration: none;
}

.note-card-book {
    font-family: var(--font-ui);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-accent);
}

.note-card-loc {
    font-family: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text);
}

.note-card-time {
    font-size: 0.74rem;
    color: var(--color-text-light);
    flex-shrink: 0;
}

.note-card-text {
    font-family: var(--font-reading);
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--color-text);
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0.3rem 0 0.7rem;
}

.note-card-actions {
    display: flex;
    gap: 0.4rem;
    padding-top: 0.55rem;
    border-top: 1px dashed var(--color-border-light);
    opacity: 0.5;
    transition: opacity 0.15s;
}

.note-card:hover .note-card-actions,
.note-card:focus-within .note-card-actions {
    opacity: 1;
}

@media (max-width: 575.98px) {
    .note-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }
}

/* ── Personal user notes (same row format as footnotes) ── */
.user-note-item {
    position: relative;
    margin-bottom: 0.6rem;
    padding-bottom: 0.6rem;
    padding-right: 4rem;       /* room for action buttons in top-right */
    border-bottom: 1px solid var(--color-border-light);
    font-size: 0.85rem;
    line-height: 1.5;
}

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

.user-note-refs {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--color-accent);
    margin-right: 0.4rem;
    word-break: keep-all;
}

.user-note-text {
    color: var(--color-text);
    word-break: break-word;
}

.user-note-actions {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    gap: 0.2rem;
    opacity: 0;
    transition: opacity 0.15s;
}

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

.user-note-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-text-light);
    padding: 0.18rem 0.32rem;
    border-radius: 4px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.12s, background 0.12s, border-color 0.12s;
}

.user-note-btn:hover {
    color: var(--color-accent);
    background: var(--color-bg-subtle);
    border-color: var(--color-border);
}

.verse-note-refs {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-accent);
    word-break: break-word;
}

.footnote-item {
    margin-bottom: 0.6rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--color-border-light);
    font-size: 0.85rem;
    line-height: 1.5;
}

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

.footnote-ref {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--color-accent);
    margin-right: 0.4rem;
}

.footnote-text {
    color: var(--color-text);
}

/* ═══ CARDS (search results, favorites) ═══ */
.search-result-card {
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-link);
    border-radius: 6px;
}

.favorite-card {
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-favorite-accent);
    border-radius: 6px;
}

/* ═══ COLOR PALETTE (modal: new collection, etc.) ═══ */
.color-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.color-swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: transform 0.1s, box-shadow 0.15s;
    box-shadow: inset 0 0 0 2px var(--color-bg);
}

.color-swatch:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2), inset 0 0 0 2px var(--color-bg);
}

.color-swatch.is-active {
    border-color: var(--color-text);
    transform: scale(1.05);
}

.color-custom {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px dashed var(--color-border);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 1.2rem;
    line-height: 1;
    background: var(--color-bg-subtle);
    transition: border-color 0.15s, color 0.15s;
}

.color-custom:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.color-custom input[type="color"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

/* ═══════════════════════════════════════
   FAVORITES — collection list page
   ═══════════════════════════════════════ */
.favorites-page {
    max-width: 100%;
}

.favorites-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.favorites-header-text {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.favorites-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-bg-warm);
    border: 1px solid var(--color-border-light);
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.favorites-title {
    font-family: var(--font-reading);
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.01em;
    margin: 0;
}

.favorites-meta {
    color: var(--color-text-muted);
    font-size: 0.88rem;
    margin: 0.15rem 0 0;
}

.favorites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.fav-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: var(--color-text);
    transition: transform 0.15s ease-out,
                box-shadow 0.15s,
                border-color 0.15s;
}

.fav-card:hover,
.fav-card:focus {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.07),
                0 2px 6px rgba(0,0,0,0.04);
    border-color: var(--card-color);
    color: var(--color-text);
    text-decoration: none;
}

.fav-card-stripe {
    display: block;
    height: 4px;
    background: var(--card-color);
}

.fav-card-body {
    padding: 1.15rem 1.25rem 1.1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;   /* keep content above .fav-card-bg-icon */
    z-index: 1;
}

/* Subtle book icon watermark — top right, fully inside card with padding */
.fav-card-bg-icon {
    position: absolute;
    right: 18px;
    top: 18px;
    width: 90px;
    height: 90px;
    color: var(--card-color);
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.2s ease-out, transform 0.25s ease-out;
}

.fav-card:hover .fav-card-bg-icon {
    opacity: 0.14;
    transform: rotate(4deg) scale(1.04);
}

.fav-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--card-color) 14%, var(--color-bg-subtle));
    color: var(--card-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.85rem;
    /* Fallback for browsers without color-mix support */
    background: var(--color-bg-subtle);
}

@supports (background: color-mix(in srgb, red 50%, blue)) {
    .fav-card-icon {
        background: color-mix(in srgb, var(--card-color) 14%, var(--color-bg-subtle));
    }
}

.fav-card-name {
    font-family: var(--font-reading);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.35rem;
    letter-spacing: -0.005em;
    line-height: 1.3;
    overflow-wrap: break-word;
}

.fav-card-meta {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    font-weight: 500;
}

.fav-card-count {
    color: var(--card-color);
    font-weight: 700;
}

.fav-card-time {
    margin-top: auto;          /* push to bottom of card body */
    padding-top: 0.6rem;
    border-top: 1px dashed var(--color-border-light);
    font-size: 0.74rem;
    color: var(--color-text-light);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.fav-card-arrow {
    position: absolute;
    top: 1.15rem;
    right: 1.15rem;
    color: var(--color-text-light);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.15s, transform 0.15s, color 0.15s;
}

.fav-card:hover .fav-card-arrow {
    opacity: 1;
    transform: translateX(0);
    color: var(--card-color);
}

/* ── Empty state ── */
.favorites-empty {
    text-align: center;
    padding: 4rem 1rem 3rem;
    color: var(--color-text-muted);
}

.favorites-empty-icon {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--color-bg-subtle);
    color: var(--color-text-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    border: 1px solid var(--color-border-light);
}

.favorites-empty h3 {
    font-family: var(--font-reading);
    color: var(--color-text);
    font-size: 1.4rem;
    margin: 0 0 0.5rem;
}

.favorites-empty p {
    margin: 0 auto 1.5rem;
    max-width: 420px;
    line-height: 1.6;
    font-size: 0.95rem;
}

.favorites-empty-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
}

@media (max-width: 575.98px) {
    .favorites-header { flex-direction: column; align-items: flex-start; }
    .favorites-header .btn { width: 100%; }
    .favorites-icon { width: 48px; height: 48px; }
    .favorites-title { font-size: 1.4rem; }
}

/* Reading-page section "Prečítané" checkbox — divider lines + right-aligned */
.reading-section-check {
    margin-top: 1rem;
    padding: 0.7rem 0.5rem;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    text-align: right;
}

.reading-section-check .form-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    min-height: auto;
}

.reading-section-check .form-check-input {
    margin: 0;
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
}

.reading-section-check .form-check-label {
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    user-select: none;
    margin: 0;
}

/* ═══════════════════════════════════════
   PLANS — reading plans list page
   ═══════════════════════════════════════ */
.plans-page {
    max-width: 100%;
}

.plans-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2.25rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.plans-header-text {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.plans-header-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-bg-warm);
    border: 1px solid var(--color-border-light);
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.plans-title {
    font-family: var(--font-reading);
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.01em;
    margin: 0;
}

.plans-meta {
    color: var(--color-text-muted);
    font-size: 0.88rem;
    margin: 0.15rem 0 0;
}

.plans-section {
    margin-bottom: 2.5rem;
}

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

.plans-section-title {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.55rem;
    margin: 0 0 1.25rem;
}

.plans-section-intro {
    color: var(--color-text-muted);
    margin: -0.5rem 0 1.25rem;
    line-height: 1.55;
    max-width: 640px;
}

.plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1rem;
}

.plan-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.25rem 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s ease-out;
}

.plan-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.plan-card--my {
    border-left: 3px solid var(--color-accent);
}

.plan-card-body {
    flex: 1;
}

.plan-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.7rem;
}

.plan-badge {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.18rem 0.5rem;
    border-radius: 4px;
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

.plan-badge-ot { color: #6b8e23; border-color: #d8d09a; background: #f7f4e2; }
.plan-badge-nt { color: #1e4d6b; border-color: #c5d6e0; background: #e8f0f5; }
.plan-badge-both { color: #6f42c1; border-color: #d4c4ed; background: #f0e8fa; }
.plan-badge-tr {
    color: var(--color-accent);
    background: var(--color-bg-warm);
    border-color: var(--color-border);
}
.plan-badge-style {
    color: var(--color-link);
    background: var(--color-bg-warm);
    border-color: var(--color-border);
}

.plan-card-title {
    font-family: var(--font-reading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.45rem;
    letter-spacing: -0.005em;
    line-height: 1.3;
}

.plan-card-title a {
    color: inherit;
    text-decoration: none;
}

.plan-card-title a:hover {
    color: var(--color-accent);
}

.plan-card-desc {
    color: var(--color-text-muted);
    font-size: 0.86rem;
    line-height: 1.55;
    margin: 0 0 0.85rem;
}

/* Progress (only on user's own plans) */
.plan-progress {
    height: 6px;
    background: var(--color-bg-subtle);
    border-radius: 3px;
    overflow: hidden;
    margin: 0.85rem 0 0.4rem;
}

.plan-progress-bar {
    height: 100%;
    background: var(--color-accent);
    border-radius: 3px;
    transition: width 0.3s ease-out;
}

.plan-progress-meta {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    margin-bottom: 0.7rem;
}

.plan-progress-meta strong {
    color: var(--color-text);
    font-size: 0.9rem;
}

.plan-progress-pct {
    margin-left: auto;
    color: var(--color-accent);
    font-weight: 700;
}

.plan-card-meta {
    font-size: 0.74rem;
    color: var(--color-text-light);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: auto;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--color-border-light);
}

.plan-card-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--color-border-light);
}

.plan-card-actions .btn {
    flex: 0 0 auto;
}

.plan-card-actions .btn-primary {
    flex: 1;
}

/* Add form (on available plans) */
.plan-add-form {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--color-border-light);
}

.plan-add-form .form-select {
    flex: 1;
    min-width: 0;
}

.plan-add-form .btn {
    flex-shrink: 0;
}

@media (max-width: 575.98px) {
    .plans-header { flex-direction: column; align-items: flex-start; }
    .plans-header-icon { width: 48px; height: 48px; }
    .plans-title { font-size: 1.4rem; }
}

/* ═══ COLLECTION DOT ═══ */
.collection-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.collection-card {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.collection-card:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    border-color: var(--color-text-light);
}

/* ═══ VERSE TOOLBAR (biblia5 style) ═══
   Bottom-fixed cream bar with 4 pill actions (Zvýrazniť, Uložiť, Zdieľať)
   in default mode. Switches to: highlight-instruction (mode-highlight),
   colour picker (mode-confirm), save sheet (mode-save), or share sheet
   (mode-share). JS hooks: #selectionBar, #selectionCount, #sbHighlight,
   #sbConfirm, #sbConfirmCancel, #sbInstruction, #vtSave, #vtShare,
   #vtSaveSheet, #vtShareSheet, #vtToast.  */
.verse-toolbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    background: var(--cream-bar);
    border-top: 1px solid var(--rule);
    box-shadow: 0 -8px 22px rgba(15, 27, 54, 0.10);
    padding: 16px clamp(12px, 3vw, 26px);
    animation: selectionSlideUp 0.22s ease-out;
}
[data-theme="dark"] .verse-toolbar {
    background: var(--cream-bar);
    box-shadow: 0 -8px 22px rgba(0, 0, 0, 0.45);
    border-top-color: rgba(255, 255, 255, 0.08);
}
@keyframes selectionSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

.vt-inner {
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    padding-right: 48px;            /* reserve space for the corner X */
}
.vt-count {
    font-family: "Cormorant Garamond", serif;
    font-size: calc(16px * var(--fz, 1.1));
    font-weight: 700;
    color: var(--navy);
    letter-spacing: 0.3px;
    flex: 0 0 auto;
    padding: 0 4px;
    white-space: nowrap;
}
[data-theme="dark"] .vt-count { color: var(--gold-bright); }

.vt-actions {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: center;
}

/* Pill-style action buttons */
.verse-toolbar .vt-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    background: var(--cream-card);
    color: var(--navy);
    border: 1px solid var(--gold-soft);
    border-radius: 999px;
    font-family: inherit;
    font-size: calc(13px * var(--fz, 1.1));
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}
.verse-toolbar .vt-btn:hover,
.verse-toolbar .vt-btn:focus {
    background: var(--paper);
    border-color: var(--gold);
    color: var(--navy);
    box-shadow: none;
}
.verse-toolbar .vt-btn:active { transform: scale(0.97); }
[data-theme="dark"] .verse-toolbar .vt-btn {
    background: rgba(255, 255, 255, 0.06);
    color: var(--ink);
    border-color: var(--gold-soft);
}
[data-theme="dark"] .verse-toolbar .vt-btn:hover,
[data-theme="dark"] .verse-toolbar .vt-btn:focus {
    background: rgba(255, 255, 255, 0.10);
    border-color: var(--gold-bright);
    color: var(--gold-bright);
}
.verse-toolbar .vt-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }
.verse-toolbar .vt-btn.is-active {
    background: var(--navy);
    color: var(--gold-bright);
    border-color: var(--navy);
}
[data-theme="dark"] .verse-toolbar .vt-btn.is-active {
    background: var(--gold-bright);
    color: var(--cream-frame);
    border-color: var(--gold-bright);
}

/* Mode: highlight (drag-to-highlight instruction in warm orange) */
.vt-instruction {
    display: none;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    padding: 0 4px;
    font-family: "Cormorant Garamond", serif;
    font-size: calc(16px * var(--fz, 1.1));
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.vt-instruction svg { width: 16px; height: 16px; flex: 0 0 auto; }
.verse-toolbar.mode-highlight .vt-count,
.verse-toolbar.mode-highlight .vt-actions { display: none; }
.verse-toolbar.mode-highlight .vt-instruction { display: inline-flex; }
.verse-toolbar.mode-highlight {
    background: #E07B3F;
    border-top-color: #C26A33;
}
[data-theme="dark"] .verse-toolbar.mode-highlight {
    background: #C66F2A;
    border-top-color: #A85B22;
}

/* Mode: confirm (colour picker after drag) */
.vt-confirm {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 22px;
    flex: 0 0 auto;
}
@media (max-width: 720px) {
    .vt-confirm { gap: 14px; }
}
.verse-toolbar.mode-confirm .vt-count,
.verse-toolbar.mode-confirm .vt-actions { display: none; }
.verse-toolbar.mode-confirm .vt-x-close { display: none; }
.verse-toolbar.mode-confirm .vt-confirm { display: inline-flex; }

.vt-color-btn {
    width: 36px; height: 36px; min-width: 36px;
    flex: 0 0 auto;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--gold-soft);
    background: var(--hl-color, rgba(248, 238, 198, 0.55));
    font-size: 0;
    color: transparent;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.vt-color-btn:hover {
    transform: translateY(-2px) scale(1.05);
    border-color: var(--gold);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.vt-color-btn:active { transform: scale(0.95); }
[data-theme="dark"] .vt-color-btn { border-color: rgba(255, 255, 255, 0.18); }
[data-theme="dark"] .vt-color-btn:hover { border-color: var(--gold-bright); }

.vt-trash, .vt-redo, .vt-confirm-cancel {
    width: 36px; height: 36px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--ink-soft);
    border: 1px solid var(--rule);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.vt-trash:hover {
    background: rgba(179, 59, 71, 0.08);
    color: #B33B47;
    border-color: #B33B47;
}
[data-theme="dark"] .vt-trash { color: var(--ink-muted); border-color: rgba(255, 255, 255, 0.18); }
[data-theme="dark"] .vt-trash:hover {
    background: rgba(231, 138, 149, 0.10);
    color: #E78A95;
    border-color: #E78A95;
}
.vt-redo:hover, .vt-confirm-cancel:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--navy);
    border-color: var(--gold-soft);
}
[data-theme="dark"] .vt-redo, [data-theme="dark"] .vt-confirm-cancel {
    color: var(--ink-muted);
    border-color: rgba(255, 255, 255, 0.18);
}
[data-theme="dark"] .vt-redo:hover, [data-theme="dark"] .vt-confirm-cancel:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--gold-bright);
    border-color: var(--gold-bright);
}
.vt-trash svg, .vt-redo svg { width: 15px; height: 15px; }
.vt-confirm-cancel svg { width: 15px; height: 15px; }
@media (max-width: 720px) {
    .vt-color-btn { width: 38px; height: 38px; min-width: 38px; }
    .vt-trash, .vt-redo, .vt-confirm-cancel { width: 38px; height: 38px; }
    .vt-trash svg, .vt-redo svg, .vt-confirm-cancel svg { width: 16px; height: 16px; }
}

/* Suppress whole-verse gold tint while in confirm mode */
body.confirm-mode .verse.selected,
body.confirm-mode .verse.is-selected {
    background: transparent;
    box-shadow: none;
}

/* Pure X close at the far right of the bar — no border / no background */
.vt-x-close {
    position: absolute;
    right: clamp(10px, 3vw, 22px);
    top: 50%;
    transform: translateY(-50%);
    width: 32px; height: 32px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--ink-muted);
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}
.vt-x-close:hover { color: var(--navy); background: rgba(0, 0, 0, 0.05); }
.vt-x-close:active { transform: translateY(-50%) scale(0.94); }
[data-theme="dark"] .vt-x-close { color: var(--ink-muted); }
[data-theme="dark"] .vt-x-close:hover { color: var(--gold-bright); background: rgba(255, 255, 255, 0.06); }
.vt-x-close svg { width: 18px; height: 18px; }
.verse-toolbar.mode-save .vt-x-close,
.verse-toolbar.mode-share .vt-x-close { top: 16px; transform: none; }

/* Save / Share sheets */
.vt-sheet {
    display: none;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 4px clamp(14px, 4vw, 36px);
    text-align: center;
    animation: vt-sheet-rise 0.28s cubic-bezier(.2, .8, .2, 1);
}
.verse-toolbar.mode-save .vt-save-sheet,
.verse-toolbar.mode-share .vt-share-sheet { display: block; }
.verse-toolbar.mode-save .vt-inner,
.verse-toolbar.mode-share .vt-inner { display: none; }
@keyframes vt-sheet-rise {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

.vt-sheet-head { margin-bottom: 14px; }
.vt-sheet-title {
    font-family: "Cormorant Garamond", serif;
    font-size: calc(24px * var(--fz, 1.1));
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 4px;
    letter-spacing: 0.4px;
}
[data-theme="dark"] .vt-sheet-title { color: var(--gold-bright); }
.vt-sheet-subtitle {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: calc(15px * var(--fz, 1.1));
    color: var(--ink-soft);
    margin: 0;
    letter-spacing: 0.2px;
}

/* Save grid — note (left) + verse preview (right) */
.vt-save-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 14px;
    width: 100%;
    max-width: 600px;
    margin: 0 auto 14px;
    text-align: left;
}
.vt-save-note {
    width: 100%;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--rule);
    border-radius: 12px;
    font-family: inherit;
    font-size: calc(14px * var(--fz, 1.1));
    color: var(--ink);
    background: var(--paper);
    resize: vertical;
    min-height: 96px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    line-height: 1.45;
    box-sizing: border-box;
}
[data-theme="dark"] .vt-save-note { background: var(--cream-card); }
.vt-save-note::placeholder { color: var(--ink-soft); font-style: italic; }
.vt-save-note:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200, 162, 78, 0.18); }

.vt-save-preview {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 10px 14px;
    background: var(--cream-row);
    border: 1px solid var(--rule-soft);
    border-radius: 12px;
    overflow-y: auto;
    box-sizing: border-box;
    font-family: "Merriweather", Georgia, serif;
    font-size: calc(13px * var(--fz, 1.1));
    line-height: 1.5;
    color: var(--ink);
    text-align: left;
}
[data-theme="dark"] .vt-save-preview { background: rgba(255, 255, 255, 0.04); color: var(--ink); }
.vt-save-preview p { margin: 0; }
@media (max-width: 640px) {
    .vt-save-grid { grid-template-columns: 1fr; }
    .vt-save-preview { height: auto; min-height: 80px; }
}

/* Collections row */
.vt-collections-label {
    margin: 4px 0 8px;
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: calc(15px * var(--fz, 1.1));
    color: var(--ink-soft);
    letter-spacing: 0.2px;
    text-align: center;
}
.vt-collections {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 auto 10px;
    justify-content: center;
    padding: 2px 4px;
}
.vt-collection {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 110px;
    height: 38px;
    padding: 0 18px;
    background: var(--cream-card);
    color: var(--navy);
    border: 1px solid var(--gold-soft);
    border-radius: 999px;
    font-family: inherit;
    font-size: calc(13px * var(--fz, 1.1));
    font-weight: 700;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}
.vt-collection:hover { background: var(--paper); border-color: var(--gold); }
.vt-collection:active { transform: scale(0.97); }
.vt-collection.is-active {
    background: var(--navy);
    color: var(--gold-bright);
    border-color: var(--navy);
}
[data-theme="dark"] .vt-collection { background: rgba(255, 255, 255, 0.06); color: var(--ink); }
[data-theme="dark"] .vt-collection.is-active {
    background: var(--gold-bright);
    color: var(--cream-frame);
    border-color: var(--gold-bright);
}
.vt-coll-color {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    flex: 0 0 auto;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.10);
}

.vt-add-collection {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 110px;
    height: 38px;
    padding: 0 18px;
    background: transparent;
    color: var(--gold);
    border: 1px dashed var(--gold-soft);
    border-radius: 999px;
    font-family: inherit;
    font-size: calc(13px * var(--fz, 1.1));
    font-weight: 700;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}
.vt-add-collection:hover {
    border-color: var(--gold);
    background: var(--cream-row);
    color: var(--navy);
}
.vt-add-collection:active { transform: scale(0.97); }
.vt-add-collection svg { width: 13px; height: 13px; flex: 0 0 auto; }
[data-theme="dark"] .vt-add-collection { color: var(--gold-bright); }
[data-theme="dark"] .vt-add-collection:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--gold-bright);
    border-color: var(--gold-bright);
}

/* Share sheet — preview block + action pills */
.vt-share-preview {
    width: 100%;
    max-width: 520px;
    margin: 0 auto 18px;
    padding: 12px 16px;
    background: var(--cream-row);
    border: 1px solid var(--rule-soft);
    border-radius: 12px;
    text-align: left;
}
[data-theme="dark"] .vt-share-preview { background: rgba(255, 255, 255, 0.04); }
.vt-share-text {
    font-family: "Merriweather", Georgia, serif;
    font-size: calc(14px * var(--fz, 1.1));
    line-height: 1.55;
    color: var(--ink);
    margin: 0 0 8px;
    max-height: 6.5em;
    overflow-y: auto;
}
.vt-share-link {
    display: block;
    font-size: calc(12.5px * var(--fz, 1.1));
    color: var(--gold);
    text-decoration: none;
    word-break: break-all;
    font-style: italic;
}
.vt-share-link:hover { color: var(--gold-soft); text-decoration: underline; }
[data-theme="dark"] .vt-share-link { color: var(--gold-bright); }

.vt-share-actions {
    display: inline-flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 12px;
}
.vt-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 18px;
    background: var(--cream-card);
    color: var(--navy);
    border: 1px solid var(--gold-soft);
    border-radius: 999px;
    font-family: inherit;
    font-size: calc(13px * var(--fz, 1.1));
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}
.vt-share-btn:hover { background: var(--paper); border-color: var(--gold); }
.vt-share-btn:active { transform: scale(0.97); }
.vt-share-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
[data-theme="dark"] .vt-share-btn { background: rgba(255, 255, 255, 0.06); color: var(--ink); }
[data-theme="dark"] .vt-share-btn:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: var(--gold-bright);
    color: var(--gold-bright);
}
.vt-share-fb,
.vt-share-fb:hover { background: #1877F2; color: #FFFFFF; border-color: #1877F2; }
.vt-share-fb:hover { background: #166FE0; border-color: #166FE0; }
[data-theme="dark"] .vt-share-fb,
[data-theme="dark"] .vt-share-fb:hover { background: #1877F2; color: #FFFFFF; border-color: #1877F2; }

.vt-share-note {
    font-size: calc(12px * var(--fz, 1.1));
    color: var(--ink-soft);
    font-style: italic;
    margin: 0 0 12px;
}
.vt-share-note kbd {
    display: inline-block;
    padding: 1px 6px;
    margin: 0 1px;
    background: var(--cream-card);
    border: 1px solid var(--rule);
    border-radius: 4px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.92em;
    font-style: normal;
    color: var(--navy);
}
[data-theme="dark"] .vt-share-note kbd { background: rgba(255, 255, 255, 0.08); color: var(--ink); }

/* Floating toast */
.vt-toast {
    position: fixed;
    left: 50%;
    bottom: 36px;
    transform: translate(-50%, 16px);
    padding: 12px 22px;
    background: var(--navy);
    color: var(--gold-bright);
    border: 1px solid var(--gold-soft);
    border-radius: 999px;
    font-family: "Cormorant Garamond", serif;
    font-size: calc(15px * var(--fz, 1.1));
    font-weight: 700;
    letter-spacing: 0.4px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.30);
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
    white-space: nowrap;
}
.vt-toast.visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* Reserve bottom space so the page footer / floating buttons aren't covered */
body.has-selection-bar { padding-bottom: 84px; }
body.has-selection-bar .back-top { bottom: 96px; }

/* ── Study lightbox (Biblehub interlinear in fullscreen iframe) ── */
.lightbox {
    position: fixed;
    inset: 0;
    background: var(--paper);
    z-index: 200;
    display: flex;
    flex-direction: column;
    animation: lb-fade-in 0.18s ease-out;
}
.lightbox[hidden] { display: none; }
@keyframes lb-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.lightbox-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 18px;
    background: var(--navy);
    border-bottom: 1px solid var(--navy-line);
    color: #FFFFFF;
    cursor: pointer;
    transition: background 0.15s;
}
.lightbox-bar:hover { background: #2F3548; }
.lightbox-bar:hover .lightbox-close {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.9);
}
.lightbox-newtab { cursor: pointer; }
.lightbox-close {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    background: transparent;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.7px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    flex: 0 0 auto;
}
.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.9);
}
.lightbox-close svg { width: 14px; height: 14px; flex: 0 0 auto; }
.lightbox-title {
    color: rgba(255, 255, 255, 0.88);
    font-family: "Cormorant Garamond", serif;
    font-size: calc(17px * var(--fz, 1.1));
    font-weight: 600;
    letter-spacing: 0.4px;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lightbox-newtab {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    text-decoration: none;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.45);
    flex: 0 0 auto;
    transition: color 0.15s;
}
.lightbox-newtab:hover { color: #FFFFFF; }
.lightbox-frame {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    background: var(--paper);
    display: block;
}
body.lightbox-open { overflow: hidden; }

@media (max-width: 640px) {
    .lightbox-bar { padding: 8px 12px; gap: 8px; }
    .lightbox-close { padding: 5px 12px; font-size: 11px; }
    .lightbox-title { font-size: calc(14px * var(--fz, 1.1)); }
    .lightbox-newtab { font-size: 11px; }
}

@media (max-width: 720px) {
    .verse-toolbar { padding: 14px 10px; }
    .vt-inner { gap: 12px; padding-right: 38px; }
    .vt-actions { gap: 10px; }
    .verse-toolbar .vt-btn { padding: 7px 10px; gap: 0; }
    .verse-toolbar .vt-btn .vt-label { display: none; }
    .vt-count { font-size: calc(14px * var(--fz, 1.1)); padding: 0 2px; }
    body.has-selection-bar { padding-bottom: 76px; }
    body.has-selection-bar .back-top { bottom: 88px; }
}

/* ───────────────────────────────────────────────────────────────────────
   WORD-LEVEL HIGHLIGHTS (drag-to-highlight inside the bible text)
   Each word inside .bible-text is wrapped in <span class="word"> at runtime.
   `.is-highlighted` is the persisted state (rendered server-side or via
   the colour picker), `.in-highlight-range` is the live drag preview.
   ─────────────────────────────────────────────────────────────────────── */
.bible-text .word {
    display: inline;
    border-radius: 3px;
    transition: background 0.10s ease;
}
/* Persisted highlight colour comes from the inline --hl-color custom property,
   falling back to a soft pastel when no colour has been picked yet. */
.bible-text .word.is-highlighted {
    background: var(--hl-color, rgba(255, 232, 145, 0.55));
}
[data-theme="dark"] .bible-text .word.is-highlighted {
    background: var(--hl-color, rgba(180, 140, 30, 0.42));
}
/* Live drag preview — distinctive warm-orange band that overrides any
   existing highlight, so users can clearly see what they're selecting even
   on already-highlighted text. */
.bible-text .word.in-highlight-range {
    background: rgba(224, 123, 63, 0.50) !important;
}
[data-theme="dark"] .bible-text .word.in-highlight-range {
    background: rgba(224, 123, 63, 0.45) !important;
}

/* While dragging — disable native text selection, swap to crosshair, lock
   touch scroll so the word-pick pointer events fire reliably on iPhone. */
body.highlight-mode .bible-text {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: none;
    cursor: crosshair;
}
body.highlight-mode .bible-text .word,
body.highlight-mode .bible-text .verse { cursor: crosshair; }
/* In highlight mode AND while the colour-picker is open (confirm-mode),
   hovering a verse must NOT paint the whole verse — only the individual
   words the user is dragging across get the `.in-highlight-range` background.
   Suppress the legacy verse hover/selected tints inside the bible-text area
   for the duration of those modes. */
body.highlight-mode .bible-text .verse,
body.highlight-mode .bible-text .verse:hover,
body.highlight-mode .bible-text .verse.selected,
body.highlight-mode .bible-text .verse.is-selected,
body.confirm-mode .bible-text .verse,
body.confirm-mode .bible-text .verse:hover,
body.confirm-mode .bible-text .verse.selected,
body.confirm-mode .bible-text .verse.is-selected {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}
/* Disable the per-verse pointer cursor in these modes — keep crosshair while
   dragging, and the default arrow once the colour picker is up. */
body.confirm-mode .bible-text .verse,
body.confirm-mode .bible-text .word { cursor: default; }

/* Selection bar — alternate states swap visible content:
     mode-highlight  →  hide count + actions, show "Označte text…" instruction
     mode-confirm    →  hide count + actions, show 5 colour pills + cancel X */
.selection-bar .sb-instruction {
    display: none;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    padding: 0 4px;
    font-family: "Cormorant Garamond", "Georgia", serif;
    font-size: calc(16px * var(--fz, 1.1));
    font-weight: 700;
    color: var(--navy);
    letter-spacing: 0.3px;
    white-space: nowrap;
}
[data-theme="dark"] .selection-bar .sb-instruction { color: var(--gold-bright); }
.selection-bar .sb-instruction svg { width: 16px; height: 16px; flex: 0 0 auto; }
/* Bootstrap's .d-flex sets `display: flex !important`, so hiding it requires
   `!important` too. Same for the count below. */
.selection-bar.mode-highlight .selection-count,
.selection-bar.mode-highlight .selection-bar-inner > .d-flex { display: none !important; }
.selection-bar.mode-highlight .sb-instruction { display: inline-flex; }

/* Confirm step — palette of colour OK buttons + inline cancel X */
.selection-bar .sb-confirm {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex: 0 0 auto;
}
.selection-bar.mode-confirm .selection-count,
.selection-bar.mode-confirm .selection-bar-inner > .d-flex { display: none !important; }
.selection-bar.mode-confirm .btn-outline-light { display: none; } /* corner X replaced by inline X */
.selection-bar.mode-confirm .sb-confirm { display: inline-flex; }

.sb-color-btn {
    min-width: 56px;
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--gold-soft);
    background: var(--hl-color, rgba(248, 238, 198, 0.55));
    color: var(--navy);
    font-family: inherit;
    font-size: calc(13px * var(--fz, 1.1));
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sb-color-btn:hover {
    transform: translateY(-1px);
    border-color: var(--gold);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
}
.sb-color-btn:active { transform: scale(0.97); }
[data-theme="dark"] .sb-color-btn {
    color: var(--cream-frame);
    border-color: rgba(255, 255, 255, 0.18);
}
[data-theme="dark"] .sb-color-btn:hover { border-color: var(--gold-bright); }

.sb-confirm-cancel {
    width: 36px; height: 36px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--ink-soft);
    border: 1px solid var(--rule);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.sb-confirm-cancel:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--navy);
    border-color: var(--gold-soft);
}
[data-theme="dark"] .sb-confirm-cancel {
    color: var(--ink-muted);
    border-color: rgba(255, 255, 255, 0.18);
}
[data-theme="dark"] .sb-confirm-cancel:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--gold-bright);
    border-color: var(--gold-bright);
}
.sb-confirm-cancel svg { width: 14px; height: 14px; }

/* Highlight pill in its "active" state — toolbar highlights the button while
   the user is dragging so it's obvious which mode they're in. */
.selection-bar .sb-btn.is-active {
    background: var(--navy);
    color: var(--gold-bright);
    border-color: var(--navy);
}
[data-theme="dark"] .selection-bar .sb-btn.is-active {
    background: var(--gold-bright);
    color: var(--cream-frame);
    border-color: var(--gold-bright);
}

@media (max-width: 720px) {
    .sb-color-btn { min-width: 48px; height: 32px; padding: 0 11px; font-size: calc(12px * var(--fz, 1.1)); }
    .sb-confirm-cancel { width: 32px; height: 32px; }
    .sb-confirm-cancel svg { width: 13px; height: 13px; }
    .selection-bar .sb-confirm { gap: 6px; }
    .selection-bar .sb-instruction { font-size: calc(13.5px * var(--fz, 1.1)); white-space: normal; }
}

/* ═══ SPLIT LAYOUT ═══ */
.split-panel {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding-left: 1.25rem;
    border-left: 1px solid var(--color-border);
    font-size: 0.85rem;
}

.split-panel::-webkit-scrollbar {
    width: 4px;
}

.split-panel::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 2px;
}

/* ═══ BADGES ═══ */
.badge {
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.02em;
}

/* ═══ FOOTER ═══ */
.site-footer {
    background: var(--color-bg-subtle);
    border-top: 1px solid var(--color-border);
    font-size: 0.8rem;
    color: var(--color-text-muted);
    padding: 1rem 0;
    margin-top: 3rem;
}

.site-footer a {
    color: var(--color-text-muted);
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--color-text);
}

/* ═══ FORMS & AUTH ═══ */
.form-control:focus,
.form-select:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(30, 77, 107, 0.15);
}

/* ═══ HOMEPAGE ═══ */
.home-title {
    font-family: var(--font-reading);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-accent);
    letter-spacing: -0.01em;
}

.home-subtitle {
    font-size: 0.92rem;
    color: var(--color-text-muted);
    margin-top: 0.3rem;
}

.home-section-title {
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-accent);
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 0.4rem;
    margin-bottom: 1rem;
}

.home-category {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin: 1.25rem 0 0.4rem;
}

.home-book-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.5rem;
}

.home-book-list li {
    margin-bottom: 0.15rem;
}

.home-book-link {
    font-size: 0.88rem;
    color: var(--color-text);
    text-decoration: none;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    display: inline-block;
    transition: all 0.1s;
}

.home-book-link:hover {
    background: var(--color-bg-subtle);
    color: var(--color-accent);
}

.home-nav-link {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-accent);
    text-decoration: none;
    padding: 0.3rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    transition: all 0.15s;
}

.home-nav-link:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.home-intro {
    font-family: var(--font-reading);
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--color-text-muted);
    max-width: 700px;
}

/* ═══ CMS CONTENT ═══ */
.cms-content {
    font-family: var(--font-reading);
    line-height: 1.75;
    font-size: 1rem;
}

/* ═══ MOBILE ═══ */
@media (max-width: 575.98px) {
    :root {
        --reading-size: calc(1rem * var(--reading-scale, 1));
        --reading-line-height: 1.85;
    }

    .bible-main {
        padding: 1rem 0.75rem;
    }

    .bible-toolbar {
        gap: 0.3rem !important;
    }

    .bible-toolbar .btn {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    .chapter-nav-link {
        font-size: 0.78rem;
        padding: 0.25rem 0.55rem;
    }
}

/* ═══ PRINT ═══ */
@media print {
    .site-nav, .site-footer, .bible-toolbar, .chapter-nav,
    .fav-btn, .modal, .btn-group, .dropdown {
        display: none !important;
    }
    .bible-main {
        max-width: 100%;
        padding: 0;
    }
    .bible-text {
        font-size: 11pt;
        line-height: 1.6;
    }
}

/* ═══════════════════════════════════════
   AUTH PAGES (login, register)
   ═══════════════════════════════════════ */
.auth-wrap {
    min-height: calc(100vh - 220px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06),
                0 2px 8px rgba(0,0,0,0.04);
    padding: 2.5rem 2.25rem 2.25rem;
    position: relative;
    overflow: hidden;
}

/* decorative top stripe in accent color */
.auth-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg,
        var(--color-accent) 0%,
        var(--color-link) 50%,
        var(--color-accent) 100%);
}

.auth-header {
    text-align: center;
    margin-bottom: 1.75rem;
}

.auth-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--color-bg-warm);
    color: var(--color-accent);
    margin-bottom: 1rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    border: 1px solid var(--color-border-light);
}

.auth-brand {
    font-family: var(--font-reading);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-link);
    margin-bottom: 0.5rem;
}

.auth-title {
    font-family: var(--font-reading);
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.3rem;
    letter-spacing: -0.01em;
}

.auth-subtitle {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin: 0;
}

.auth-form {
    margin-top: 0.5rem;
}

.auth-field {
    margin-bottom: 1.1rem;
}

.auth-field > label {
    display: block;
    font-family: var(--font-ui);
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--color-text-muted);
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.auth-input {
    position: relative;
}

.auth-input-icon {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-light);
    pointer-events: none;
    display: flex;
    align-items: center;
    transition: color 0.15s;
}

.auth-input .form-control {
    padding-left: 2.5rem;
    height: 46px;
    font-size: 0.95rem;
    border-radius: 8px;
    background-color: var(--color-bg-subtle);
    border-color: var(--color-border);
}

.auth-input .form-control:focus {
    background-color: var(--color-bg);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.04);
}

.auth-input:focus-within .auth-input-icon {
    color: var(--color-accent);
}

.auth-input .form-control.is-invalid {
    border-color: var(--color-words-of-christ);
}

.auth-help {
    display: block;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-top: 0.35rem;
    line-height: 1.5;
}

.auth-help ul {
    margin: 0.2rem 0 0;
    padding-left: 1.1rem;
}

.auth-help li {
    margin-bottom: 0.1rem;
}

.auth-error {
    color: var(--color-words-of-christ);
    font-size: 0.78rem;
    margin-top: 0.35rem;
}

.auth-alert {
    background: var(--color-bg-warm);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-words-of-christ);
    border-radius: 6px;
    padding: 0.65rem 0.85rem;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.auth-submit {
    width: 100%;
    height: 48px;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 8px;
    margin-top: 0.6rem;
    letter-spacing: 0.02em;
    transition: transform 0.1s ease-out, box-shadow 0.15s;
}

.auth-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.6rem 0 1.2rem;
    color: var(--color-text-light);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.auth-foot {
    text-align: center;
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.auth-foot a {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: none;
}

.auth-foot a:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

@media (max-width: 480px) {
    .auth-card {
        padding: 2rem 1.5rem;
        border-radius: 10px;
    }
    .auth-title { font-size: 1.45rem; }
}

/* ═══════════════════════════════════════
   BOOTSTRAP COMPONENT THEMING
   Overrides default Bootstrap utilities & components
   so every page (search, plans, alerts…) follows the
   active theme — including dark mode.
   ═══════════════════════════════════════ */

/* ── Generic links ── */
a {
    color: var(--color-link);
}
a:hover {
    color: var(--color-accent-hover);
}

/* ── Buttons ── */
.btn-primary {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--color-accent-hover) !important;
    border-color: var(--color-accent-hover) !important;
    color: #fff !important;
}

.btn-outline-primary {
    color: var(--color-accent);
    border-color: var(--color-accent);
    background-color: transparent;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary.active {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.btn-outline-secondary {
    color: var(--color-text-muted);
    border-color: var(--color-border);
    background-color: transparent;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: var(--color-bg-subtle);
    border-color: var(--color-border);
    color: var(--color-text);
}
.btn-outline-secondary.active,
.btn-check:checked + .btn-outline-secondary,
.btn-outline-secondary.active:hover {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: #fff !important;
}

.btn-light {
    background-color: var(--color-bg-subtle);
    border-color: var(--color-border);
    color: var(--color-text);
}
.btn-light:hover,
.btn-light:focus {
    background-color: var(--color-border);
    color: var(--color-text);
}

.btn-outline-light {
    color: rgba(255,255,255,0.85);
    border-color: rgba(255,255,255,0.3);
}
.btn-outline-light:hover,
.btn-outline-light:focus {
    background-color: rgba(255,255,255,0.1);
    color: #fff;
}

/* ── Form controls ── */
.form-control,
.form-select {
    background-color: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-border);
}
.form-control::placeholder {
    color: var(--color-text-light);
}
.form-control:focus,
.form-select:focus {
    background-color: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
}
.form-text {
    color: var(--color-text-muted);
}
.form-check-input {
    background-color: var(--color-bg);
    border-color: var(--color-border);
}
.form-check-input:checked {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}
.form-check-label {
    color: var(--color-text);
}
.input-group-text {
    background-color: var(--color-bg-subtle);
    border-color: var(--color-border);
    color: var(--color-text);
}

/* ── Cards ── */
.card {
    background-color: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-border);
}
.card-header,
.card-footer {
    background-color: var(--color-bg-subtle);
    border-color: var(--color-border);
    color: var(--color-text);
}

/* ── Badges ── */
.badge.bg-primary {
    background-color: var(--color-accent) !important;
    color: #fff !important;
}
.badge.bg-secondary {
    background-color: var(--color-text-muted) !important;
    color: var(--color-bg) !important;
}
.badge.bg-success {
    background-color: var(--color-favorite-accent) !important;
    color: #fff !important;
}
.badge.bg-warning {
    background-color: var(--color-link) !important;
    color: #fff !important;
}
.badge.bg-info {
    background-color: var(--color-accent) !important;
    color: #fff !important;
}
.badge.bg-light {
    background-color: var(--color-bg-subtle) !important;
    color: var(--color-text) !important;
}
.badge.bg-dark {
    background-color: var(--color-text) !important;
    color: var(--color-bg) !important;
}
.badge.bg-white {
    background-color: var(--color-bg) !important;
    color: var(--color-accent) !important;
}

/* ── Text utilities ── */
.text-muted {
    color: var(--color-text-muted) !important;
}
.text-primary {
    color: var(--color-accent) !important;
}
.text-secondary {
    color: var(--color-text-muted) !important;
}
.text-success {
    color: var(--color-favorite-accent) !important;
}
.text-danger {
    color: var(--color-words-of-christ) !important;
}
.text-warning {
    color: var(--color-link) !important;
}
/* keep text-dark / text-light usable on tinted backgrounds */
.badge.bg-light.text-dark {
    color: var(--color-text) !important;
}

/* ── Pagination ── */
.page-link {
    background-color: var(--color-bg);
    color: var(--color-accent);
    border-color: var(--color-border);
}
.page-link:hover,
.page-link:focus {
    background-color: var(--color-bg-subtle);
    color: var(--color-accent-hover);
    border-color: var(--color-border);
    box-shadow: none;
}
.page-item.active .page-link {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}
.page-item.disabled .page-link {
    background-color: var(--color-bg);
    color: var(--color-text-light);
    border-color: var(--color-border);
}

/* ── Alerts ── */
.alert {
    background-color: var(--color-bg-warm);
    color: var(--color-text);
    border-color: var(--color-border);
}
.alert-info {
    background-color: var(--color-bg-warm);
    color: var(--color-text);
    border-left: 3px solid var(--color-accent);
}
.alert-success {
    background-color: var(--color-bg-warm);
    color: var(--color-text);
    border-left: 3px solid var(--color-favorite-accent);
}
.alert-warning {
    background-color: var(--color-bg-warm);
    color: var(--color-text);
    border-left: 3px solid var(--color-link);
}
.alert-danger {
    background-color: var(--color-bg-warm);
    color: var(--color-text);
    border-left: 3px solid var(--color-words-of-christ);
}

/* ── List groups (plan day list etc.) ── */
.list-group-item {
    background-color: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-border);
}
.list-group-item.active {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}
.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--color-bg-subtle);
    color: var(--color-text);
}

/* ── Progress bars ── */
.progress {
    background-color: var(--color-bg-subtle);
}
.progress-bar {
    background-color: var(--color-accent);
}

/* ── Accordion (sidebar books) ── */
.accordion-button {
    background-color: transparent;
    color: var(--color-text);
}
.accordion-button:not(.collapsed) {
    background-color: var(--color-bg-subtle);
    color: var(--color-accent);
    box-shadow: none;
}
.accordion-button:focus {
    box-shadow: none;
    border-color: var(--color-border);
}

/* ═══════════════════════════════════════
   DARK-MODE SVG ICON FIXES
   Bootstrap's close (×) and accordion-arrow are
   tinted dark by default — invert them on dark themes.
   ═══════════════════════════════════════ */
[data-theme="modern-dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}
[data-theme="modern-dark"] .accordion-button::after {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ═══════════════════════════════════════
   THEMES — switch via [data-theme="..."]
   ═══════════════════════════════════════ */

/* 9 ── MojaBiblia (brand — oxblood Bible cover + aged paper + gold leaf) */
[data-theme="mojabiblia"] {
    --color-bg: #fbf5e8;            /* warm aged paper */
    --color-bg-subtle: #f3e9d2;     /* slightly darker page */
    --color-bg-warm: #f7eecc;       /* warmer panel */
    --color-text: #2a1a14;          /* warm near-black with brown undertone */
    --color-text-muted: #6b4e3c;    /* warm sepia muted */
    --color-text-light: #b8a08a;
    --color-accent: #890C02;        /* oxblood — Bible cover red */
    --color-accent-hover: #5e0701;  /* darker oxblood (hover) */
    --color-link: #b8860b;          /* dark goldenrod — real gold leaf hue */
    --color-border: #e6d4b8;        /* aged page border */
    --color-border-light: #f0e2c8;
    --color-verse-num: #b8860b;     /* gold verse numbers */
    --color-highlight: #f5d984;     /* deep gold highlight */
    --color-nav-bg: #890C02;        /* leather cover */
    --color-nav-bg-2: #5e0701;
    --color-nav-accent: #d4a017;    /* embossed gold lettering */
    --color-words-of-christ: #c41e3a; /* brighter cardinal red — distinct from cover */
    --color-favorite-accent: #4a8c5e;
}

/* 2 ── Pergamen (vellum & sepia ink + antique gold) */
[data-theme="vellum"] {
    --color-bg: #f4ead5;
    --color-bg-subtle: #e9dcc0;
    --color-bg-warm: #efe1c4;
    --color-text: #3d2817;
    --color-text-muted: #6e5638;
    --color-text-light: #b8a482;
    --color-accent: #5d4037;
    --color-accent-hover: #3e2723;
    --color-link: #a0522d;
    --color-border: #d3c39e;
    --color-border-light: #e0d4b1;
    --color-verse-num: #c9a449;
    --color-highlight: #e8d27b;
    --color-nav-bg: #4e342e;
    --color-nav-bg-2: #3e2723;
    --color-nav-accent: #c9a449;
    --color-words-of-christ: #8b2e1f;
    --color-favorite-accent: #6b8e23;
}

/* 3 ── Katedrála (deep indigo + stained-glass jewel tones) */
[data-theme="cathedral"] {
    --color-bg: #f0ebe0;
    --color-bg-subtle: #e6dfd0;
    --color-bg-warm: #ebe2cd;
    --color-text: #1a1a2e;
    --color-text-muted: #4a4a6a;
    --color-text-light: #9a9aa8;
    --color-accent: #1a237e;
    --color-accent-hover: #0d1654;
    --color-link: #b8860b;
    --color-border: #d8c8a8;
    --color-border-light: #e2d6bb;
    --color-verse-num: #b8860b;
    --color-highlight: #f4d35e;
    --color-nav-bg: #0d1654;
    --color-nav-bg-2: #06092e;
    --color-nav-accent: #d4a017;
    --color-words-of-christ: #8b0000;
    --color-favorite-accent: #2e7d32;
}

/* 4 ── Olivový háj (Mediterranean limestone + olive + ochre) */
[data-theme="olive"] {
    --color-bg: #f5f1e8;
    --color-bg-subtle: #ede5d3;
    --color-bg-warm: #efe7d4;
    --color-text: #2d2a1f;
    --color-text-muted: #6b614a;
    --color-text-light: #b9b09a;
    --color-accent: #556b2f;
    --color-accent-hover: #3d4f1f;
    --color-link: #c0631a;
    --color-border: #d8cfb6;
    --color-border-light: #e4dcc4;
    --color-verse-num: #d4a017;
    --color-highlight: #f0e0a3;
    --color-nav-bg: #4a5d23;
    --color-nav-bg-2: #3a4a1c;
    --color-nav-accent: #e0b94a;
    --color-words-of-christ: #a83232;
    --color-favorite-accent: #8e6914;
}

/* 5 ── Moderná svetlá (clean minimal + electric indigo) */
[data-theme="modern-light"] {
    --color-bg: #ffffff;
    --color-bg-subtle: #f5f7fa;
    --color-bg-warm: #fafbfd;
    --color-text: #0f172a;
    --color-text-muted: #64748b;
    --color-text-light: #cbd5e1;
    --color-accent: #4338ca;
    --color-accent-hover: #312e81;
    --color-link: #4338ca;
    --color-border: #e2e8f0;
    --color-border-light: #f1f5f9;
    --color-verse-num: #f97316;
    --color-highlight: #fef08a;
    --color-nav-bg: #1e293b;
    --color-nav-bg-2: #0f172a;
    --color-nav-accent: #f97316;
    --color-words-of-christ: #dc2626;
    --color-favorite-accent: #10b981;
}

/* 6 ── Moderná tmavá (slate + amber + emerald) */
[data-theme="modern-dark"] {
    --color-bg: #0f172a;
    --color-bg-subtle: #1e293b;
    --color-bg-warm: #1c2538;
    --color-text: #e2e8f0;
    --color-text-muted: #94a3b8;
    --color-text-light: #475569;
    --color-accent: #6366f1;
    --color-accent-hover: #4f46e5;
    --color-link: #fbbf24;
    --color-border: #334155;
    --color-border-light: #243042;
    --color-verse-num: #fbbf24;
    --color-highlight: #3d2f0a;
    --color-nav-bg: #020617;
    --color-nav-bg-2: #000000;
    --color-nav-accent: #fbbf24;
    --color-words-of-christ: #f87171;
    --color-favorite-accent: #34d399;
}

/* 7 ── Kráľovský purpur (cream + royal purple + gold) */
[data-theme="royal"] {
    --color-bg: #faf5ee;
    --color-bg-subtle: #f0e8dc;
    --color-bg-warm: #f5edd9;
    --color-text: #2c1f3d;
    --color-text-muted: #6b5d7e;
    --color-text-light: #b8acca;
    --color-accent: #4a148c;
    --color-accent-hover: #38096a;
    --color-link: #c2870a;
    --color-border: #ddd0c0;
    --color-border-light: #ebe1d2;
    --color-verse-num: #c2870a;
    --color-highlight: #f5e4a0;
    --color-nav-bg: #4a148c;
    --color-nav-bg-2: #38096a;
    --color-nav-accent: #f5d171;
    --color-words-of-christ: #b91c1c;
    --color-favorite-accent: #047857;
}

/* 8 ── Púšť za úsvitu (peach + terracotta + brick) */
[data-theme="desert"] {
    --color-bg: #fdf3e7;
    --color-bg-subtle: #f5e6d3;
    --color-bg-warm: #f8ead7;
    --color-text: #3d2417;
    --color-text-muted: #84583e;
    --color-text-light: #c5a591;
    --color-accent: #b85c38;
    --color-accent-hover: #8a3f24;
    --color-link: #c2410c;
    --color-border: #e8c9a8;
    --color-border-light: #f0d9bc;
    --color-verse-num: #c2410c;
    --color-highlight: #fcd9b6;
    --color-nav-bg: #6d2e1e;
    --color-nav-bg-2: #4a1d12;
    --color-nav-accent: #f5b176;
    --color-words-of-christ: #991b1b;
    --color-favorite-accent: #15803d;
}

/* ═══ THEME SWITCHER UI ═══ */
.theme-toggle-btn {
    background: transparent;
    border: 0;
    padding: 0.25rem 0.5rem;
    color: rgba(255,255,255,0.75);
    font-size: 1rem;
    line-height: 1;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}
.theme-toggle-btn:hover,
.theme-toggle-btn:focus {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.theme-menu {
    min-width: 240px;
    padding: 0.4rem;
}

.theme-option {
    display: flex !important;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    padding: 0.4rem 0.55rem !important;
    border-radius: 4px;
}

.theme-option.is-active {
    font-weight: 700;
    color: var(--color-accent) !important;
}

.theme-option .theme-check {
    margin-left: auto;
    opacity: 0;
    color: var(--color-accent);
    font-weight: 700;
}

.theme-option.is-active .theme-check {
    opacity: 1;
}

.theme-swatch {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.12);
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* ═══════════════════════════════════════
   DARK MODE — modals, dropdowns, forms
   Maps the legacy --color-* tokens onto the new dark palette so every Bootstrap
   modal (book picker, share, new collection, rename, verse note, confirm action)
   and any legacy bits still using --color-* automatically flip in dark mode.
   ═══════════════════════════════════════ */
[data-theme="dark"] {
    --color-bg:           #1C1E24;          /* var(--paper) */
    --color-bg-subtle:    #16181C;          /* var(--cream-col) */
    --color-bg-warm:      #2A2C34;          /* var(--cream-card) */
    --color-text:         #F8EFD9;          /* var(--ink) */
    --color-text-muted:   #DCD3BB;          /* var(--ink-muted) */
    --color-text-light:   #ABA48E;          /* var(--ink-soft) */
    --color-accent:       #F8DEA5;          /* var(--gold-bright) — links/active */
    --color-accent-hover: #ECCB85;          /* var(--gold) */
    --color-link:         #ECCB85;          /* var(--gold) */
    --color-border:       rgba(240, 210, 140, 0.50);   /* var(--rule) */
    --color-border-light: rgba(240, 210, 140, 0.22);   /* var(--rule-soft) */
}

/* Bootstrap close-button glyph is a black SVG — invert so it shows on dark bg. */
[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(2);
}

/* Modal frame — Bootstrap pulls bg/color/border from --bs-modal-* (already
   wired to --color-* in :root). The header/footer dividers also need the
   flipped border colour. */
[data-theme="dark"] .modal-content {
    background: var(--cream-card);
    color: var(--ink);
    border: 1px solid var(--rule);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: var(--rule-soft);
}

/* Form controls inside any modal — Bootstrap defaults to white. */
[data-theme="dark"] .modal .form-control,
[data-theme="dark"] .modal .form-select,
[data-theme="dark"] .modal textarea.form-control {
    background: var(--cream-frame);
    color: var(--ink);
    border-color: var(--rule);
}
[data-theme="dark"] .modal .form-control::placeholder {
    color: var(--ink-soft);
    opacity: 1;
}
[data-theme="dark"] .modal .form-control:focus,
[data-theme="dark"] .modal .form-select:focus,
[data-theme="dark"] .modal textarea.form-control:focus {
    background: var(--cream-frame);
    color: var(--ink);
    border-color: var(--gold);
    box-shadow: 0 0 0 0.2rem rgba(236, 203, 133, 0.18);
}
[data-theme="dark"] .modal .form-text,
[data-theme="dark"] .modal .text-muted {
    color: var(--ink-soft) !important;
}
[data-theme="dark"] .modal .form-label {
    color: var(--ink);
}

/* Buttons inside modals — keep btn-primary as gold (matches dark theme accents)
   and make outline-secondary readable. btn-danger stays red. */
[data-theme="dark"] .modal .btn-outline-secondary {
    color: var(--ink-muted);
    border-color: var(--rule);
    background: transparent;
}
[data-theme="dark"] .modal .btn-outline-secondary:hover,
[data-theme="dark"] .modal .btn-outline-secondary:focus {
    background: var(--cream-frame);
    color: var(--ink);
    border-color: var(--gold);
}
[data-theme="dark"] .modal .btn-primary {
    background: var(--gold);
    border-color: var(--gold);
    color: #1C1E24;
}
[data-theme="dark"] .modal .btn-primary:hover,
[data-theme="dark"] .modal .btn-primary:focus {
    background: var(--gold-bright);
    border-color: var(--gold-bright);
    color: #0F1B36;
}

/* Bootstrap alerts inside modals — re-tone for dark. */
[data-theme="dark"] .modal .alert-warning {
    background: rgba(248, 222, 165, 0.10);
    color: var(--gold-bright);
    border-color: rgba(248, 222, 165, 0.32);
}
[data-theme="dark"] .modal .alert-danger {
    background: rgba(220, 53, 69, 0.18);
    color: #f5a3aa;
    border-color: rgba(220, 53, 69, 0.45);
}

/* Book modal — the active item uses --color-accent (now gold-bright); white
   text on gold reads poorly, so swap to navy-deep. */
[data-theme="dark"] .book-list-item.active {
    background-color: var(--gold);
    color: #0F1B36;
}
[data-theme="dark"] .book-list-item.active .text-muted {
    color: rgba(15, 27, 54, 0.70) !important;
}
[data-theme="dark"] .book-list-item:hover {
    background-color: var(--cream-frame);
    color: var(--ink);
}

/* Share modal — Facebook button keeps brand blue. Text inside #shareText
   already inherits the modal palette via the form-control rule above. */

/* New-collection modal — color-swatch inset ring uses --color-bg (now dark),
   which keeps the “coin” look against the modal bg. The dashed custom-color
   button uses --color-bg-subtle which we flipped — already fine. */
[data-theme="dark"] .color-swatch.is-active {
    border-color: var(--gold-bright);
}

/* Verse-note modal — “K veršom:” reference badge stays on gold. */
[data-theme="dark"] .verse-note-refs {
    color: var(--gold-bright);
}

/* Section labels (used in book modal as “Starý zákon / Nový zákon / Deuterokánonické”). */
[data-theme="dark"] .section-label {
    color: var(--ink-muted);
    border-bottom-color: var(--rule-soft);
}

/* Tabs inside any modal/page (references, footnotes). */
[data-theme="dark"] .nav-tabs { border-bottom-color: var(--rule-soft); }
[data-theme="dark"] .nav-tabs .nav-link { color: var(--ink-muted); }
[data-theme="dark"] .nav-tabs .nav-link:hover {
    color: var(--ink);
    border-bottom-color: var(--rule);
}
[data-theme="dark"] .nav-tabs .nav-link.active {
    color: var(--gold-bright);
    border-bottom-color: var(--gold-bright);
}

/* References / footnotes inside book/reference modals. */
[data-theme="dark"] .ref-link {
    background: var(--cream-frame);
    color: var(--gold-bright);
}
[data-theme="dark"] .ref-link:hover {
    background: var(--gold);
    color: #0F1B36;
}
[data-theme="dark"] .ref-verse-label {
    color: var(--gold-bright);
}

/* Bootstrap dropdowns (used in select-translation, sort menus, etc.) */
[data-theme="dark"] .dropdown-menu {
    background: var(--cream-card);
    color: var(--ink);
    border-color: var(--rule);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}
[data-theme="dark"] .dropdown-item { color: var(--ink); }
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background: var(--cream-frame);
    color: var(--gold-bright);
}
[data-theme="dark"] .dropdown-item.active,
[data-theme="dark"] .dropdown-item:active {
    background: var(--gold);
    color: #0F1B36;
}
[data-theme="dark"] .dropdown-divider { border-top-color: var(--rule-soft); }