.reader-heading { text-align: center; padding: 24px 0; }
.reader-heading h1 { font-size: clamp(25px,4vw,36px); margin-bottom: 10px; }
.reader-heading h2 { font-size: 21px; font-weight: 500; }
.source-note { color: var(--muted); font-size: 13px; }
.reader-navigation { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; padding: 20px 0; }
.disabled { opacity: .6; background: #e8edf3; color: #405066; }
.reader-toolbar { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 16px; padding: 15px; background: white; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; margin-bottom: 25px; }
.reader-toolbar label { display: flex; align-items: center; gap: 10px; }
.reader-toolbar input { width: 120px; }
.reader-pages { max-width: var(--reader-width,760px); width: 100%; margin-inline: auto; background: #dce3ec; }
.reader-pages figure { margin: 0; }
.reader-image { max-width: 100%; width: 100%; height: auto; min-height: 320px; object-fit: contain; }
.reader-pages figcaption { font-size: 12px; text-align: center; padding: 4px; background: #e7edf4; color: #59667a; }
body.read-dark { --ink: #e4eaf1; --muted: #b0bdcc; --line: #46556a; --paper: #101722; background: var(--paper); color: var(--ink); }
.read-dark .site-header, .read-dark .reader-toolbar, .read-dark .comic-card { background: #1d2939; }
.read-dark .dark { background: #d7e2f0; color: #172438; }
.read-dark .outline { color: #172438; }
@media (max-width: 540px) {
    .reader-page main { width: 100%; }
    .reader-page .crumbs, .reader-heading, .reader-page .section { margin-inline: 14px; }
    .reader-toolbar { margin-inline: 10px; gap: 10px; }
    .reader-toolbar strong { width: 100%; text-align: center; }
    .reader-toolbar label { display: none; }
    .reader-navigation { gap: 8px; }
    .reader-navigation .button { padding: 8px 12px; font-size: 13px; }
    .reader-pages { max-width: 100% !important; }
}