.reader-page { background: #e7e9ed; }
.reader-heading { text-align: center; margin: 6px 0 22px; }
.reader-heading h1 { font-size: 28px; margin: 8px 0; }
.reader-heading p { color: var(--muted); font-size: 14px; }
.reader-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; padding: 16px; margin: 20px 0; background: white; border: 1px solid var(--line); border-radius: 10px; }
.reader-tools strong { flex: 0 0 100%; text-align: center; font-size: 14px; }
.reader-tools label { font-size: 14px; display: flex; align-items: center; gap: 10px; }
.reader-tools select { max-width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 5px; padding: 6px; background: white; }
.disabled { opacity: .6; font-size: 14px; padding: 10px; }
.reading-strip { width: min(100%, var(--reader-width, 800px)); margin: 0 auto; }
.reading-strip figure { margin: 0 0 8px; background: white; }
.reading-strip img { width: 100%; height: auto; min-height: 200px; object-fit: contain; background: #d9dfe6; }
.reading-strip img.failed-image { min-height: 240px; }
.reading-strip figcaption { padding: 14px 18px; font-size: 14px; color: #5e6670; border-top: 1px solid var(--line); }
.reading-progress { accent-color: var(--violet); width: 120px; height: 8px; }
.reader-dark { background: #11151b; color: #edf0f5; }
.reader-dark .reader-heading p, .reader-dark .crumb { color: #a8b0ba; }
.reader-dark .reader-tools { background: #252b35; border-color: #3d4653; }
.reader-dark .card p { color: #b7bfcb; }
.reader-dark .site-header, .reader-dark .site-footer { background: #20262e; border-color: #3d4653; }
@media (max-width: 540px) {
    .reader-heading h1 { font-size: 22px; }
    .reader-tools { gap: 8px; padding: 12px; }
    .reader-tools .btn { padding: 9px 12px; }
    .reading-strip { width: calc(100% + 32px); max-width: none; margin-left: -16px; }
}