/* Apply Typography Colors */
        .content-body h1,
        .content-body h2,
        .content-body h3,
        .content-body h4,
        .content-body h5,
        .content-body h6,
        .chapter-title,
        .chapter-subtitle,
        .subsection-title {
            color: var(--heading-color);
        }

        .content-body,
        .content-body p,
        .content-body li,
        .content-body td,
        .content-body span:not(.first-word) {
            color: var(--body-color);
        }

        .content-body a {
            color: var(--link-color);
        }

        /* Blank spacer paragraph that had to be kept because it carries an
           in-book anchor id (toc_N, note back-refs). Collapsed to zero so the
           link target survives without leaving dead vertical space. */
        .content-body p.rd-blank-anchor {
            display: block !important;
            height: 0 !important;
            min-height: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            line-height: 0 !important;
            font-size: 0 !important;
        }

        /* Default H4 spacing (tight) — used by imported Hindawi-style books
           that have many small section headings inside a chapter. Per-chapter
           content_h4_spacing / h4_top_spacing columns still win via the
           chapter-specific stylesheet emitted below. */
        .content-body h4 {
            margin-top: 1.7rem;
            margin-bottom: 0.75rem;
            line-height: 1.4;
        }
        /* Only the very first h4 in the chapter body should lose its
           top margin — NOT h4s nested inside <div class="section"> etc.
           Using > keeps dashboard-controlled h4_top_spacing working for
           Hindawi-style sectioned chapters. */
        .content-body > h4:first-child {
            margin-top: 0;
        }
        /* Paragraph immediately after an h4 should sit close to it */
        .content-body h4 + p,
        .content-body h4 + div {
            margin-top: 0.25rem;
        }
        /* Hindawi-style <div class="section"> wrappers ship with heavy
           padding (e.g. 48px top/bottom) from the source EPUB stylesheet
           which stacks and creates huge gaps. Zero that out here — the
           per-chapter stylesheet below re-applies padding from the admin
           dashboard values (h4_top_spacing → padding-top, content_h4_spacing
           → padding-bottom) so section gaps are user-controllable. */
        .content-body div.section {
            padding-top: 1.7rem;
            padding-bottom: 0.75rem;
            margin-top: 0;
            margin-bottom: 0;
        }
        .content-body div.section:first-child {
            padding-top: 0;
        }

        /* Section sub-label: the small date-range / ruler-name tag that
           Hindawi ships as <div class="subtitle"> inside a section. The
           importer rewrites them to <h5 class="section-sublabel">. Keep
           the styling subdued so it reads as meta, not as a heading. */
        .content-body h5.section-sublabel,
        .content-body div.subtitle {
            font-size: 0.95rem;
            font-weight: 500;
            opacity: 0.65;
            margin-top: 0.25rem;
            margin-bottom: 1rem;
            line-height: 1.4;
            font-family: var(--font-family-h3, var(--font-family-title, inherit));
        }

        /* Hindawi blockquotes: converted from <div class="blockquote"> to
           <blockquote class="hindawi-quote">. Styled as indented, bordered
           quote blocks distinct from body text. */
        .content-body blockquote.hindawi-quote,
        .content-body div.blockquote {
            margin: 1.5rem 0;
            padding: 1rem 1.5rem;
            border-right: 4px solid var(--heading-color, #667eea);
            background: color-mix(in srgb, var(--bg-color, #f9fafb) 95%, var(--heading-color, #667eea) 5%);
            border-radius: 0 8px 8px 0;
            font-style: italic;
            line-height: 1.8;
            position: relative;
        }
        /* RTL layout: border on the right side */
        [dir="rtl"] .content-body blockquote.hindawi-quote,
        [dir="rtl"] .content-body div.blockquote {
            border-right: none;
            border-right: 4px solid var(--heading-color, #667eea);
            border-radius: 8px 0 0 8px;
        }
        .content-body blockquote.hindawi-quote p,
        .content-body div.blockquote p {
            margin-bottom: 0.5rem;
            font-style: italic;
        }
        .content-body blockquote.hindawi-quote p:last-child,
        .content-body div.blockquote p:last-child {
            margin-bottom: 0;
        }

        /* Quote attribution (source/author) */
        .content-body cite.quote-attribution,
        .content-body div.attribution {
            display: block;
            margin-top: 0.75rem;
            font-size: 0.9em;
            font-style: normal;
            font-weight: 600;
            opacity: 0.75;
            text-align: inherit;
        }
        .content-body cite.quote-attribution::before,
        .content-body div.attribution::before {
            content: "— ";
        }

        /* Section break (converted from bridge_head_center •••) */
        .content-body hr.section-break {
            border: none;
            text-align: center;
            margin: 2rem auto;
            width: 60%;
            height: auto;
            overflow: visible;
        }
        .content-body hr.section-break::after {
            content: "•  •  •";
            display: block;
            letter-spacing: 0.3em;
            color: var(--heading-color, #667eea);
            opacity: 0.5;
            font-size: 1.1rem;
        }

        /* ═══════════════════════════════════════════════════════════════
           THEATER / DRAMA PLAY STYLES
           Covers: French (Ligaran/TEA), English (Gutenberg), Arabic (Hindawi)
           ═══════════════════════════════════════════════════════════════ */

        /* Character name — bold, small-caps, distinct color */
        .content-body .theater-character-name {
            font-weight: 700;
            font-variant: small-caps;
            text-transform: lowercase; /* small-caps needs lowercase input */
            font-size: 1.05em;
            color: var(--heading-color, #333);
            letter-spacing: 0.02em;
            margin-right: 0.15em;
        }

        /* Stage directions — italic, muted */
        .content-body .theater-stage-direction {
            font-style: italic;
            opacity: 0.75;
            font-size: 0.95em;
        }

        /* Stage direction blocks (long descriptive paragraphs) */
        .content-body .theater-stage-block {
            font-style: italic;
            opacity: 0.8;
            margin: 1.2rem 0;
            padding: 0.5rem 1.2rem;
            border-left: 3px solid color-mix(in srgb, var(--heading-color, #667eea) 40%, transparent);
            border-radius: 0 4px 4px 0;
            line-height: 1.7;
        }
        [dir="rtl"] .content-body .theater-stage-block {
            border-left: none;
            border-right: 3px solid color-mix(in srgb, var(--heading-color, #667eea) 40%, transparent);
            border-radius: 4px 0 0 4px;
            padding: 0.5rem 1.2rem 0.5rem 0;
        }

        /* Dialogue line (Gutenberg plain-text format) */
        .content-body .theater-dialog-line {
            margin: 0.6rem 0;
            padding-left: 2rem;
            text-indent: -2rem;
            line-height: 1.7;
        }
        [dir="rtl"] .content-body .theater-dialog-line {
            padding-left: 0;
            padding-right: 2rem;
            text-indent: -2rem;
        }
        .content-body .theater-dialog-line .theater-character-name {
            display: inline;
            margin-right: 0.1em;
        }
        .content-body .theater-dialog-line .theater-line-text {
            font-style: normal;
        }

        /* French structured dialog blocks */
        .content-body .theater-dialog {
            margin: 0.5rem 0;
            padding-left: 1.5rem;
        }
        [dir="rtl"] .content-body .theater-dialog {
            padding-left: 0;
            padding-right: 1.5rem;
        }

        /* Speaker name container (French structure) */
        .content-body .theater-speaker {
            font-weight: 700;
            font-variant: small-caps;
            text-transform: lowercase;
            font-size: 1.05em;
            color: var(--heading-color, #333);
            margin-top: 1rem;
            margin-bottom: 0.2rem;
        }

        /* Scene introduction / character list */
        .content-body .theater-intro {
            text-align: center;
            font-style: italic;
            font-weight: 500;
            margin: 1.5rem 0 1rem;
            opacity: 0.85;
        }

        /* Arabic dialog (Hindawi div.dialogue pattern) */
        .content-body .theater-dialog-ar {
            margin: 0.4rem 0;
            padding: 0;
        }
        .content-body .theater-dialog-ar b {
            font-weight: 700;
            color: var(--heading-color, #333);
        }
        .content-body .theater-dialog-ar > span {
            font-style: normal;
        }

        /* Verse linegroups in plays. One block per speech; the source's own
           <p> margins would break a single speech into floating lines, and a
           rule on the block would read as the narrator's — verse is spoken, so
           it stays unruled. Indent with a logical margin, not padding: padding
           shifts only the opening line and leaves the block ragged. */
        .content-body .theater-linegroup {
            margin: 0.75rem 0;
            margin-inline-start: 2rem;
            padding-inline-start: 0;
            line-height: 1.6;
        }
        .content-body .theater-linegroup p {
            margin: 0;
            padding: 0;
            border-left: none;
            border-right: none;
            font-style: normal;
        }

        /* Character list in scene openers */
        .content-body .div_theatre_characters_list {
            text-align: center;
            margin: 1.5rem 0;
            font-style: italic;
        }
        .content-body .div_theatre_characters_list .b,
        .content-body .div_theatre_characters_list b,
        .content-body .div_theatre_characters_list strong {
            font-style: normal;
            font-weight: 700;
        }

        /* Calibre-style: character name on its own line */
        .content-body .theater-speaker-line {
            margin-top: 1.1rem;
            margin-bottom: 0;
        }
        .content-body .theater-speaker-line .theater-character-name {
            display: inline;
        }
        /* Tighten dialogue paragraph spacing in theater mode:
           Regular <p> between a speaker-line and the next speaker-line should
           have minimal bottom margin since the speaker-line provides the visual break. */
        .content-body .theater-speaker-line + p {
            margin-top: 0;
            margin-bottom: 0.25rem;
        }
        .content-body .theater-speaker-line + p + p {
            margin-bottom: 0.25rem;
        }
        .content-body .theater-stage-block + .theater-speaker-line,
        .content-body .theater-stage-inline + .theater-speaker-line {
            margin-top: 1.1rem;
        }

        /* Inline stage direction (short, between dialogue lines) */
        .content-body .theater-stage-inline {
            margin: 0.3rem 0;
            padding: 0.2rem 1rem;
            border-left-width: 2px;
        }
        [dir="rtl"] .content-body .theater-stage-inline {
            border-right-width: 2px;
        }

        /* Collapse empty spacer paragraphs in theater mode (Calibre exports) */
        .content-body .theater-spacer {
            display: none !important;
        }
        /* Thin break between dialogue exchanges (replaces Calibre spacer paragraphs) */
        .content-body .theater-break {
            height: 0.4rem;
            margin: 0;
            padding: 0;
        }

        /* Content-type badge (FABLE, RÉCIT, CONTE, etc.) — literary form label */
        .content-body .content-type-badge {
            display: inline-block;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--heading-color, #667eea);
            background: color-mix(in srgb, var(--heading-color, #667eea) 8%, transparent);
            border: 1px solid color-mix(in srgb, var(--heading-color, #667eea) 20%, transparent);
            border-radius: 4px;
            padding: 0.25rem 0.7rem;
            margin-bottom: 1rem;
        }

        /* General horizontal rule styling (TinyMCE created) */
        .content-body hr {
            border: none;
            border-top: 1px solid var(--border-color, rgba(0,0,0,0.1));
            margin: 1.5rem 0;
            width: 100%;
        }

        /* General blockquote styling (TinyMCE created) */
        .content-body blockquote {
            margin: 1.5rem 0;
            padding: 1rem 1.5rem;
            background: rgba(102, 126, 234, 0.05);
            border-left: 4px solid var(--heading-color, #667eea);
            border-radius: 0 8px 8px 0;
            font-style: italic;
        }
        [dir="rtl"] .content-body blockquote {
            border-left: none;
            border-right: 4px solid var(--heading-color, #667eea);
            border-radius: 8px 0 0 8px;
        }
        .content-body blockquote p {
            margin: 0.5rem 0;
        }
        .content-body blockquote p:first-child {
            margin-top: 0;
        }
        .content-body blockquote p:last-child {
            margin-bottom: 0;
        }

        /* ──────────────────────────────────────────────────────────────
           Chapter-opening epigraphs.
           Source EPUBs (Feedbooks / "iLivri" template, many classic French
           & English works) open a chapter with an inscription/citation block.
           The EPUB stylesheet is stripped at import, so the importer rewrites
           the container to <blockquote class="epigraph">. Raw
           <div class="div_common_inscription"> / "div_common_citation" are
           styled too, so books imported before the conversion existed still
           render correctly without a re-import. Rendered with the standard
           TinyMCE quote treatment (left-aligned, bordered, italic). */
        .content-body blockquote.epigraph,
        .content-body div.div_common_inscription,
        .content-body div.div_common_citation {
            margin: 1.5rem 0;
            padding: 1rem 1.5rem;
            font-style: italic;
            line-height: 1.7;
            background: rgba(102, 126, 234, 0.05);
            border-left: 4px solid var(--heading-color, #667eea);
            border-radius: 0 8px 8px 0;
        }
        [dir="rtl"] .content-body blockquote.epigraph,
        [dir="rtl"] .content-body div.div_common_inscription,
        [dir="rtl"] .content-body div.div_common_citation {
            border-left: none;
            border-right: 4px solid var(--heading-color, #667eea);
            border-radius: 8px 0 0 8px;
        }
        .content-body blockquote.epigraph p,
        .content-body div.div_common_inscription p,
        .content-body div.div_common_citation p {
            text-indent: 0;
            margin: 0 0 0.4rem 0;
        }
        .content-body blockquote.epigraph p:first-child,
        .content-body div.div_common_inscription p:first-child,
        .content-body div.div_common_citation p:first-child {
            margin-top: 0;
        }
        /* Attribution line (last paragraph): a touch smaller and lighter. */
        .content-body blockquote.epigraph p:last-child,
        .content-body div.div_common_inscription p:last-child,
        .content-body div.div_common_citation p:last-child {
            margin-bottom: 0;
            font-size: 0.92em;
            opacity: 0.8;
        }
        /* Don't double up when an epigraph is the only paragraph. */
        .content-body blockquote.epigraph p:only-child,
        .content-body div.div_common_inscription p:only-child,
        .content-body div.div_common_citation p:only-child {
            font-size: inherit;
            opacity: 1;
        }

        /* ──────────────────────────────────────────────────────────────
           Arabic Poetry (Calibre EPUB pattern: div.poetry_container)
           Each verse is two hemistichs (صدر + عجز) in nested divs.
           Display as a centered two-column table-like layout with the
           hemistichs aligned, or as centered single lines on narrow screens.
           ────────────────────────────────────────────────────────────── */
        .content-body .poetry_container {
            text-align: center;
            margin: 1.5rem 0;
            line-height: 2.2;
        }
        .content-body .poetry_container > div {
            display: flex;
            justify-content: center;
            gap: 2rem;
            flex-wrap: wrap;
            margin: 0.3rem 0;
        }
        .content-body .poetry_container > div > div {
            flex: 0 1 auto;
            white-space: nowrap;
        }
        /* On narrow screens, stack hemistichs vertically */
        @media (max-width: 600px) {
            .content-body .poetry_container > div {
                flex-direction: column;
                align-items: center;
                gap: 0;
            }
        }

           /* ──────────────────────────────────────────────────────────
           Tables.
           Reproduces the publisher's professional table styling — the
           source EPUB stylesheet is stripped at import, so without this
           tables render with raw browser defaults. Uses theme-aware
           color-mix so it adapts to dark / sepia / high-contrast modes.
           ────────────────────────────────────────────────────────────── */
        /* Horizontal-scroll containers: the Hindawi <div class="tablegroup">
           wrapper, plus <div class="table-scroll"> we add at render time for
           bare tables. Keeps wide tables from breaking the layout on mobile. */
        .content-body .tablegroup,
        .content-body .table-wrapper,
        .content-body .table-scroll {
            max-width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            margin: 1.75rem 0;
        }
        .content-body table {
            border-collapse: collapse;
            border-spacing: 0;
            width: 100%;
            margin: 1.5rem 0;
            margin-bottom: 1.8rem;
            font-size: 0.95em;
            line-height: 1.6;
            background: var(--bg-color, transparent);
        }
        /* Tables already inside a scroll wrapper shouldn't double their margin */
        .content-body .tablegroup table,
        .content-body .table-wrapper table,
        .content-body .table-scroll table {
            margin: 0;
        }
        /* Ensure spacing between table wrappers and the following content */
        .content-body .tablegroup,
        .content-body .table-wrapper,
        .content-body .table-scroll {
            margin-bottom: 1.8rem;
        }
        .content-body th,
        .content-body td {
            border: 1px solid color-mix(in srgb, var(--body-color, #4b5563) 28%, transparent);
            padding: 0.55rem 0.9rem;
            vertical-align: top;
            text-align: start;
        }
        .content-body thead th,
        .content-body thead td,
        .content-body tfoot th,
        .content-body tfoot td {
            background: color-mix(in srgb, var(--bg-color, #f9fafb) 86%, var(--heading-color, #667eea) 14%);
            font-weight: 700;
            text-align: center;
        }
        /* Zebra striping for readability on long tables */
        .content-body tbody tr:nth-child(even) td {
            background: color-mix(in srgb, var(--bg-color, #ffffff) 96%, var(--body-color, #111827) 4%);
        }
        /* Honour the cell alignment classes Hindawi ships */
        .content-body td.right,  .content-body th.right  { text-align: right; }
        .content-body td.left,   .content-body th.left   { text-align: left; }
        .content-body td.center, .content-body th.center { text-align: center; }
        .content-body td.border-bottom,
        .content-body tr.border-bottom {
            border-bottom: 2px solid color-mix(in srgb, var(--heading-color, #667eea) 65%, transparent);
        }
        /* Table caption: Hindawi <div class="table_caption"> + native <caption> */
        .content-body .table_caption,
        .content-body table > caption {
            caption-side: top;
            display: block;
            text-align: center;
            margin: 0 0 0.6rem;
            font-size: 0.9em;
            font-weight: 600;
            opacity: 0.85;
            line-height: 1.5;
        }

        /* ──────────────────────────────────────────────────────────────
           Compact matrices (logic truth tables, tiny symbol grids).
           Tagged .compact-matrix at render time when every cell is ≤4
           chars. The generic table styling above (full width, filled
           header, zebra) bloats these; here we restore the clean print
           look: auto width, centred cells, hairline column rules, an
           underlined italic header, no fill, no stripes. The inline-block
           .matrix-wrap lets adjacent matrices sit side by side, as in the
           printed original, and wraps gracefully on narrow screens.
           ────────────────────────────────────────────────────────────── */
        .content-body .matrix-wrap {
            display: inline-block;
            vertical-align: top;
            max-width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            margin: 1.75rem 1.1rem;
        }
        .content-body table.compact-matrix {
            width: auto;
            margin: 0 auto;
            border-collapse: collapse;
            background: transparent;
            font-size: 0.95em;
            line-height: 1.5;
        }
        .content-body table.compact-matrix th,
        .content-body table.compact-matrix td {
            border: none;
            padding: 0.22rem 0.7rem;
            text-align: center;
            vertical-align: middle;
            background: transparent;
            font-weight: 400;
        }
        /* Hairline rules between columns only */
        .content-body table.compact-matrix th + th,
        .content-body table.compact-matrix td + td {
            border-left: 1px solid color-mix(in srgb, var(--body-color, #4b5563) 32%, transparent);
        }
        /* Italic header variables + an underline, matching print convention */
        .content-body table.compact-matrix thead th,
        .content-body table.compact-matrix thead td {
            font-style: italic;
            font-weight: 400;
            border-bottom: 1px solid color-mix(in srgb, var(--body-color, #4b5563) 55%, transparent);
        }
        /* Defeat the global zebra striping for these tables */
        .content-body table.compact-matrix tbody tr:nth-child(even) td {
            background: transparent;
        }

        /* ──────────────────────────────────────────────────────────────
           Single-column layout / verse tables. Publishers lay out poetry
           and short callouts inside a one-column <table>; tagged
           .layout-verse at render time. Strip all table chrome (box,
           borders, zebra, header fill) and render as an indented verse
           block so it reads as poetry, not a data grid.
           ────────────────────────────────────────────────────────────── */
        .content-body table.layout-verse,
        .content-body table.layout-verse thead,
        .content-body table.layout-verse tbody,
        .content-body table.layout-verse tr,
        .content-body table.layout-verse th,
        .content-body table.layout-verse td {
            border: none !important;
            background: transparent !important;
        }
        .content-body table.layout-verse {
            width: auto;
            margin: 1.5rem 0 1.5rem 2rem;
            font-size: inherit;
            line-height: 1.7;
        }
        .content-body table.layout-verse th,
        .content-body table.layout-verse td {
            padding: 0.05rem 0;
            text-align: start;
            font-weight: inherit;
            font-style: inherit;
        }

        /* ──────────────────────────────────────────────────────────────
           Figure / illustration captions. Hindawi wraps illustrations as
           <div class="mediaobject"><img class="figure"><div class="caption-text">…
           The caption used to be stripped at import; it is now preserved
           (image-import mode) and styled here. Also covers <figure><figcaption>.
           ────────────────────────────────────────────────────────────── */
        .content-body .mediaobject,
        .content-body .subfigure,
        .content-body figure,
        .content-body .figcenter,
        .content-body .figleft,
        .content-body .figright {
            margin: 2.5rem auto;
            text-align: center;
            clear: both;
        }
        .content-body .figleft .caption,
        .content-body .figright .caption,
        .content-body .figleft figcaption,
        .content-body .figright figcaption {
            border-top: none;
            padding: 0.3rem 0;
            max-width: 100%;
        }
        .content-body .caption-text,
        .content-body figcaption,
        .content-body .figure-caption,
        .content-body .caption {
            display: block;
            margin: 0.8rem auto 0;
            padding: 0.5rem 1rem;
            max-width: 85%;
            font-size: 0.85em;
            line-height: 1.65;
            text-align: center;
            font-style: italic;
            color: var(--body-color);
            opacity: 0.7;
            border-top: 1px solid color-mix(in srgb, var(--body-color) 15%, transparent);
            letter-spacing: 0.01em;
        }
        .content-body .caption-text p,
        .content-body figcaption p,
        .content-body .caption p {
            margin: 0;
            text-align: center;
        }

        /* ──────────────────────────────────────────────────────────────
           Dead links: EPUB internal anchors that don't resolve in the web
           reader. Rendered as plain text (no underline, no pointer, no color).
           ────────────────────────────────────────────────────────────── */
        .content-body a.dead-link {
            color: inherit;
            text-decoration: none;
            pointer-events: none;
            cursor: text;
        }

        /* ──────────────────────────────────────────────────────────────
           TOC-style tables (imported from EPUB table-of-contents pages).
           Clean formatting: no borders, good spacing, readable layout.
           ────────────────────────────────────────────────────────────── */
        .content-body table.toc-table,
        .content-body table.center {
            width: 100%;
            border-collapse: collapse;
            border: none;
            margin: 1.5rem auto;
        }
        .content-body table.toc-table td,
        .content-body table.center td {
            border: none;
            padding: 0.35rem 0.5rem;
            vertical-align: top;
            line-height: 1.7;
        }
        .content-body table.toc-table td:empty,
        .content-body table.center td:empty {
            padding: 0.15rem 0;
        }
        /* Chapter heading cells in TOC tables (bold/link cells) */
        .content-body table.toc-table .tab1c1,
        .content-body table.center .tab1c1 {
            font-weight: 600;
            padding-top: 1rem;
            font-size: 1.02em;
        }
        /* Description cells in TOC tables */
        .content-body table.toc-table .tab1c,
        .content-body table.center .tab1c {
            padding-left: 0.5rem;
            opacity: 0.85;
        }

        .content-body a:hover {
            color: var(--link-color);
            filter: brightness(1.2);
        }

        /* Dark Mode Overrides for Custom Colors */
        [data-theme="dark"] .chapter-subtitle {
            color: var(--heading-color) !important;
        }

        [data-theme="sepia"] .chapter-subtitle {
            color: var(--heading-color) !important;
        }

        /* Theme overrides for body/heading colors — must beat chapter-specific selectors */
        [data-theme="dark"] .content-body,
        [data-theme="dark"] .content-body p,
        [data-theme="dark"] .content-body li,
        [data-theme="dark"] .content-body td,
        [data-theme="dark"] .content-body blockquote,
        [data-theme="dark"] .content-body div,
        [data-theme="dark"] .content-body span:not(.first-word) {
            color: var(--body-color) !important;
        }
        [data-theme="dark"] .content-body h1,
        [data-theme="dark"] .content-body h2,
        [data-theme="dark"] .content-body h3,
        [data-theme="dark"] .content-body h4 {
            color: var(--heading-color) !important;
        }

        [data-theme="sepia"] .content-body,
        [data-theme="sepia"] .content-body p,
        [data-theme="sepia"] .content-body li,
        [data-theme="sepia"] .content-body td,
        [data-theme="sepia"] .content-body blockquote,
        [data-theme="sepia"] .content-body div,
        [data-theme="sepia"] .content-body span:not(.first-word) {
            color: var(--body-color) !important;
        }
        [data-theme="sepia"] .content-body h1,
        [data-theme="sepia"] .content-body h2,
        [data-theme="sepia"] .content-body h3,
        [data-theme="sepia"] .content-body h4 {
            color: var(--heading-color) !important;
        }

        [data-theme="high-contrast"] .content-body,
        [data-theme="high-contrast"] .content-body p,
        [data-theme="high-contrast"] .content-body li,
        [data-theme="high-contrast"] .content-body td,
        [data-theme="high-contrast"] .content-body blockquote,
        [data-theme="high-contrast"] .content-body div,
        [data-theme="high-contrast"] .content-body span:not(.first-word) {
            color: var(--body-color) !important;
        }
        [data-theme="high-contrast"] .content-body h1,
        [data-theme="high-contrast"] .content-body h2,
        [data-theme="high-contrast"] .content-body h3,
        [data-theme="high-contrast"] .content-body h4 {
            color: var(--heading-color) !important;
        }

        /* Hindawi blockquote theme overrides */
        [data-theme="dark"] .content-body blockquote.hindawi-quote,
        [data-theme="dark"] .content-body div.blockquote {
            background: rgba(255, 255, 255, 0.04);
            border-color: var(--heading-color, #667eea);
        }
        [data-theme="sepia"] .content-body blockquote.hindawi-quote,
        [data-theme="sepia"] .content-body div.blockquote {
            background: rgba(139, 90, 43, 0.05);
            border-color: var(--heading-color, #8b5a2b);
        }
        [data-theme="high-contrast"] .content-body blockquote.hindawi-quote,
        [data-theme="high-contrast"] .content-body div.blockquote {
            background: rgba(255, 255, 255, 0.06);
            border-color: var(--heading-color, #fff);
        }

        /* General blockquote theme overrides (TinyMCE created) */
        [data-theme="dark"] .content-body blockquote:not(.hindawi-quote) {
            background: rgba(255, 255, 255, 0.04);
            border-color: var(--heading-color, #667eea);
        }
        [data-theme="sepia"] .content-body blockquote:not(.hindawi-quote) {
            background: rgba(139, 90, 43, 0.05);
            border-color: var(--heading-color, #8b5a2b);
        }
        [data-theme="high-contrast"] .content-body blockquote:not(.hindawi-quote) {
            background: rgba(255, 255, 255, 0.06);
            border-color: var(--heading-color, #fff);
        }

        /* Epigraph theme overrides */
        [data-theme="dark"] .content-body blockquote.epigraph,
        [data-theme="dark"] .content-body div.div_common_inscription,
        [data-theme="dark"] .content-body div.div_common_citation {
            background: rgba(255, 255, 255, 0.04);
            border-color: var(--heading-color, #667eea);
        }
        [data-theme="sepia"] .content-body blockquote.epigraph,
        [data-theme="sepia"] .content-body div.div_common_inscription,
        [data-theme="sepia"] .content-body div.div_common_citation {
            background: rgba(139, 90, 43, 0.05);
            border-color: var(--heading-color, #8b5a2b);
        }
        [data-theme="high-contrast"] .content-body blockquote.epigraph,
        [data-theme="high-contrast"] .content-body div.div_common_inscription,
        [data-theme="high-contrast"] .content-body div.div_common_citation {
            background: rgba(255, 255, 255, 0.06);
            border-color: var(--heading-color, #fff);
        }

        /* General HR theme overrides (TinyMCE created) */
        [data-theme="dark"] .content-body hr:not(.section-break) {
            border-top-color: rgba(255, 255, 255, 0.1);
        }
        [data-theme="sepia"] .content-body hr:not(.section-break) {
            border-top-color: rgba(139, 90, 43, 0.2);
        }
        [data-theme="high-contrast"] .content-body hr:not(.section-break) {
            border-top-color: rgba(255, 255, 255, 0.3);
        }
        }

        [data-theme="high-contrast"] .chapter-subtitle {
            color: var(--heading-color) !important;
        }

        /* Apply Book Font Family — scoped to book CONTENT only (e.g. Amiri Quran).
           Uses the dedicated --font-family-book token so the book font no longer
           leaks into reader chrome. */
        .content-body,
        .content-body p,
        .content-body li {
            font-family: var(--font-family-book), sans-serif;
        }

        /* Reader chrome keeps the site default Arabic UI font (Cairo) through the
           shared --font-family-arabic token, which reader.php no longer overwrites.
           chapter-title / chapter-subtitle are handled by their own rules below. */
        .reader-mode,
        .reader-mode body,
        .reader-main,
        .sidebar-toc,
        .toc-link {
            font-family: var(--font-family-arabic), sans-serif;
        }

        /* Standardize Text Selection */
        ::selection {
            background: var(--selection-bg);
            color: var(--selection-text);
        }

        ::-moz-selection {
            background: var(--selection-bg);
            color: var(--selection-text);
        }