.reader-heading { text-align: center; padding: 20px 0; }
.reader-heading h1 { font-size: clamp(25px,3vw,36px); }
.reader-heading p { color: var(--muted); font-size: 14px; }
.reader-settings { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; padding: 18px; border: 1px solid var(--line); background: var(--card); border-radius: 8px; }
.reader-settings strong, .reader-settings label, .reading-progress { font-size: 14px; }
.reader-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 25px 0; }
.reader-pages { max-width: var(--reader-width,760px); margin: 0 auto; width: 100%; }
.reader-pages figure { margin: 0; background: #e3e8e2; }
.comic-page { width: 100%; height: auto; min-height: 220px; object-fit: contain; color: #3f5947; }
.reader-pages figcaption { text-align: center; color: #5f7266; font-size: 12px; padding: 6px; }
.reader-dark { --paper: #131917; --ink: #e2ebe4; --muted: #afc0b3; --card: #1e2b24; --line: #3a4b3f; }
.reader-dark .outline { color: #dce5de; }
.reader-dark .disabled { color: #1d3325; }
.reader-dark .status, .reader-dark .eyebrow { color: #a9cf8e; }
@media (max-width: 540px) {
    .reader-settings { gap: 12px; padding: 15px; }
    .reader-settings strong { width: 100%; text-align: center; }
    .reader-nav { gap: 8px; }
    .reader-nav .button { padding: 9px 11px; font-size: 12px; }
    .comic-page { min-height: 180px; }
}