.reader-body { background: #050816; color: #f8fafc; }
.reader-toolbar { position: sticky; top: 0; z-index: 20; min-height: 66px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 10px 18px; background: rgba(15,23,42,.92); border-bottom: 1px solid #1e293b; backdrop-filter: blur(16px); }
.reader-meta { color: #cbd5e1; font-weight: 800; text-align: center; }
.reader-language select { min-width: 104px; }
.reader-shell { width: min(980px, 100%); margin: 0 auto; padding: 18px 0 54px; }
.reader-page { position: relative; margin: 0 auto 14px; background: #0f172a; }
.reader-page img { width: 100%; height: auto; display: block; }
.reader-overlay { position: absolute; display: flex; text-align: center; padding: 4px; border-radius: 8px; line-height: 1.15; font-size: clamp(10px, 1.8vw, 24px); overflow: hidden; text-wrap: balance; }
@media (max-width: 680px) { .reader-toolbar { grid-template-columns: 1fr; align-items: stretch; } .reader-meta { text-align: left; } }

.reader-nav { width: min(980px, calc(100% - 24px)); margin: 14px auto 0; display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.reader-nav a { padding: 10px 13px; border: 1px solid #334155; border-radius: 999px; background: rgba(15,23,42,.78); color: #e2e8f0; font-weight: 800; text-align: center; }
.reader-nav a:first-child { text-align: left; }
.reader-nav a:last-child { text-align: right; }
@media (max-width: 680px) { .reader-nav { grid-template-columns: 1fr; } .reader-nav a, .reader-nav a:first-child, .reader-nav a:last-child { text-align: center; } }