.reader-page { background: #e8ecf1; }
.reader-title { text-align: center; margin: 25px 0; }
.reader-title h1 { font-size: clamp(25px, 4vw, 36px); margin: 12px 0; }
.reader-title h2 { font-size: 21px; margin: 0 0 10px; }
.reader-title p { font-size: 14px; color: var(--muted); }
.reader-toolbar { background: #fff; border: 1px solid var(--line); padding: 20px; border-radius: 10px; margin-bottom: 25px; }
.reader-toolbar > strong { display: block; margin-bottom: 12px; }
.reader-options { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 16px; font-size: 13px; }
.reader-options label { display: flex; align-items: center; gap: 10px; }
.reader-options input { width: 120px; accent-color: #708d27; }
.reader-images { width: 100%; max-width: var(--reader-width, 760px); margin: 0 auto; }
.reader-images figure { margin: 0 0 4px; }
.reader-images img { width: 100%; max-width: 100%; height: auto; background: #d7dfe9; }
.reader-images img.image-failed { min-height: 260px; }
.reader-images figcaption { text-align: center; font-size: 12px; padding: 4px 8px; color: var(--muted); }
.reader-bottom { justify-content: center; margin: 30px 0 15px; }
.reader-end { text-align: center; color: var(--muted); font-size: 14px; }
.reader-page.dark { --ink: #e4eaf3; --muted: #aab8cc; --paper: #1a2333; --line: #3d485a; background: #101722; color: var(--ink); }
.dark .reader-toolbar, .dark .site-header, .dark footer, .dark .comic-card { background: #1c2637; }
.dark .button { color: #e4eaf3; background: #2a374b; border-color: #526079; }
.dark .button.lime { color: #182414; background: var(--lime); }
.dark a:hover { color: var(--lime); }
@media (max-width: 480px) {
    .reader-toolbar { padding: 15px; }
    .reader-toolbar .button-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .reader-toolbar .button { padding: 9px; font-size: 13px; }
    .reader-options { gap: 12px; }
    .reader-options label { flex-wrap: wrap; }
    .reader-bottom .button { padding: 10px 11px; font-size: 13px; }
}