/* Reader v11: four modes, focus controls and touch-first chapter progress. */
body.reader-route{background:var(--reader-canvas)}
.reader-app{width:100%;max-width:none;padding:0;min-height:100svh}
.reader-main{padding:0!important}
.reader-main .reader-view{overflow:visible;min-height:100svh;margin:0;padding-bottom:calc(120px + env(safe-area-inset-bottom));border:0;border-radius:0;background:var(--reader-canvas);box-shadow:none}
.reader-main .reader-toolbar{position:sticky;top:0;z-index:40;display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:10px max(16px,calc((100vw - 1100px)/2));border-bottom:1px solid var(--border);background:var(--reader-surface);transition:opacity .18s,transform .18s}
.reader-top-nav{display:flex;align-items:center;gap:8px;min-width:0}
.reader-top-nav .btn{min-height:40px;padding:6px 12px;color:var(--reader-text);background:var(--surface-2)}
.reader-nav-spacer{flex:1}
.reader-header-details{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0}
.reader-heading{min-width:0}
.reader-main .reader-title{font-size:16px;line-height:1.5}
.reader-main .reader-chapter{font-size:12px}
.reader-main .reader-bar-actions{flex:none;gap:6px}
.reader-main .reader-select{max-width:260px;min-width:140px;min-height:44px;font-size:12px}
.reader-main .reader-mode-bar{display:flex;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:10px max(16px,calc((100vw - 1100px)/2));background:var(--reader-surface)}
.reader-main .reader-mode-switch{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;width:min(440px,100%);padding:3px}
.reader-main .reader-mode-button{min-height:44px;padding:8px 10px;font-size:12px;white-space:nowrap}
.reader-main .reader-type-note{font-size:11px}
.reader-mode-lock{display:flex;align-items:center;gap:12px;min-height:44px;font-size:13px}
.reader-mode-lock b{padding:6px 10px;border:1px solid var(--border);border-radius:8px;background:var(--primary-soft);color:var(--primary-ink)}
.reader-mode-lock span{color:var(--reader-muted);font-size:11px}
.reader-ad-anchor{height:0}
.reader-main .bong-test-ad-placement--320{margin:8px auto 12px;padding:0;border:0;background:transparent}
.reader-main .bong-test-ad-label{font-size:9px;line-height:1.4}
.reader-main .reader-paged-stage{position:relative;display:flex;align-items:center;justify-content:center;width:min(1100px,100%);height:var(--reader-paged-height,calc(100svh - 380px));min-height:180px;margin:0 auto;padding:8px 12px;background:var(--reader-canvas)}
.reader-main .reader-paged-stage img{display:block;width:auto;max-width:100%;height:auto;max-height:100%;margin:0;object-fit:contain;box-shadow:var(--shadow-2);user-select:none;-webkit-user-drag:none;touch-action:pan-y pinch-zoom}
.reader-tap-zone{position:absolute;top:0;bottom:0;z-index:2;width:26%;min-width:44px;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:transparent;cursor:pointer;touch-action:manipulation}
.reader-tap-left{left:0}
.reader-tap-right{right:0}
.reader-tap-zone:disabled{cursor:default}
.reader-tap-zone:focus-visible{outline:3px solid var(--primary-600);outline-offset:-4px;background:color-mix(in srgb,var(--primary-600) 8%,transparent)}
.reader-main .reader-page-controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px;padding:12px;background:var(--reader-surface);font-size:12px}
.reader-main .reader-page-controls .btn{min-height:44px}
.reader-main .reader-paged-rtl .reader-page-controls{flex-direction:row-reverse}
.reader-main .reader-vertical-strip.reader-gapless{display:block;width:min(100%,1000px);max-width:1000px;margin:0 auto;padding:0;gap:0;border:0;line-height:0}
.reader-main .reader-gapless .reader-page{display:block;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;line-height:0}
.reader-main .reader-gapless .reader-page img{display:block;width:100%;max-width:100%;height:auto;margin:0;padding:0;border:0;border-radius:0;vertical-align:top}
.reader-main .reader-vertical-strip.reader-framed{display:grid;gap:24px;width:min(100%,850px);max-width:850px;margin:0 auto;padding:24px 16px 32px}
.reader-main .reader-framed .reader-page{margin:0;padding:8px;border:1px solid var(--border-strong);border-radius:12px;background:var(--reader-surface);box-shadow:var(--shadow-2)}
.reader-main .reader-framed .reader-page img{display:block;width:100%;height:auto;border-radius:5px}
.reader-framed figcaption{padding:6px 4px 0;color:var(--reader-muted);font-size:10px;text-align:right}
.reader-main .reader-end{max-width:1000px;margin:0 auto;padding:18px 16px;border-top:1px solid var(--border)}
.reader-position{position:fixed;bottom:calc(10px + env(safe-area-inset-bottom));left:50%;z-index:60;display:block;width:min(calc(100% - 24px),600px);padding:10px 16px 8px;border:1px solid var(--border-strong);border-radius:16px;background:var(--reader-surface);color:var(--reader-text);box-shadow:var(--shadow-3);transform:translateX(-50%);transition:opacity .18s}
.reader-position-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:11px;line-height:1.4}
.reader-position-meta b{color:var(--primary-ink);font-variant-numeric:tabular-nums}
.reader-position input[type=range]{display:block;width:100%;height:36px;min-height:36px;margin:0;padding:0;border:0;background:transparent;accent-color:var(--primary-600);cursor:grab;touch-action:none;-webkit-appearance:none;appearance:none}
.reader-position input[type=range]:active{cursor:grabbing}
.reader-position input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(to right,var(--primary-600) 0 var(--reader-progress,0%),var(--border-strong) var(--reader-progress,0%) 100%)}
.reader-position input[type=range]::-webkit-slider-thumb{width:22px;height:22px;margin-top:-9px;border:3px solid var(--reader-surface);border-radius:50%;background:var(--primary-600);box-shadow:0 0 0 1px var(--primary-600);-webkit-appearance:none;appearance:none}
.reader-position input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:var(--border-strong)}
.reader-position input[type=range]::-moz-range-progress{height:4px;border-radius:4px;background:var(--primary-600)}
.reader-position input[type=range]::-moz-range-thumb{width:18px;height:18px;border:3px solid var(--reader-surface);border-radius:50%;background:var(--primary-600);box-shadow:0 0 0 1px var(--primary-600)}
.reader-position input[type=range]:focus-visible{outline:2px solid var(--focus-color);outline-offset:2px;border-radius:6px}
.reader-position-hint{color:var(--reader-muted);font-size:10px;line-height:1.4;text-align:center}
.reader-controls-hidden [data-reader-chrome]{visibility:hidden;opacity:0;pointer-events:none}
.reader-controls-hidden .reader-toolbar{transform:translateY(-105%)}
.reader-main .reader-controls-hidden .reader-paged-stage{height:100svh;min-height:100svh;padding:0}
.reader-main .reader-controls-hidden .reader-paged-stage img{max-height:100svh;box-shadow:none}
.reader-reveal{position:fixed;top:calc(10px + env(safe-area-inset-top));right:12px;z-index:65;min-height:44px;padding:8px 12px;border-color:var(--border-strong);background:var(--reader-surface);color:var(--reader-text);box-shadow:var(--shadow-2);font-size:11px}
.reader-reveal[hidden]{display:none}
.reader-default-panel{display:grid;gap:8px;margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}
.reader-default-select{width:min(100%,420px);min-height:44px;padding:10px 12px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface-2);color:var(--text)}
.reader-default-panel .hint{max-width:680px;margin:0}
@media(max-width:640px){
 .reader-main .reader-toolbar{gap:8px;padding:8px 12px}
 .reader-top-nav .btn{min-height:40px;padding:5px 10px;font-size:11px}
 .reader-main .reader-title{font-size:13px}
 .reader-main .reader-title .type-pill{margin-left:4px;font-size:9px}
 .reader-main .reader-chapter{font-size:10px}
 .reader-header-details{align-items:flex-start;gap:6px}
 .reader-main .reader-select{min-width:0;max-width:34vw;padding:6px;font-size:10px}
 .reader-main .reader-bar-actions{gap:3px}
 .reader-main .reader-bar-actions .icon-btn{width:36px;min-width:36px;height:44px}
 .reader-main .reader-mode-bar{gap:5px;padding:8px 12px}
 .reader-main .reader-mode-switch{width:100%}
 .reader-main .reader-mode-button{padding:8px 5px;font-size:11px}
 .reader-main .reader-type-note{width:100%;font-size:10px;text-align:center}
 .reader-main .reader-paged-stage{padding:4px}
 .reader-main .reader-paged-stage img{width:auto;max-width:100%;height:auto;max-height:100%}
 .reader-main .reader-page-controls{gap:8px;padding:8px;font-size:10px}
 .reader-main .reader-page-controls .btn{padding:7px 10px;font-size:10px}
 .reader-main .reader-vertical-strip.reader-framed{gap:18px;padding:18px 10px 24px}
 .reader-main .reader-framed .reader-page{padding:5px;border-radius:9px}
 .reader-position{width:calc(100% - 20px);padding:9px 13px 7px;border-radius:13px}
 .reader-position-hint{font-size:9px}
 .reader-main .reader-end{gap:8px;padding:14px 12px}
 .reader-main .reader-end .btn{font-size:11px;min-height:44px}
}
@media(max-width:359px){
 .reader-header-details{flex-direction:column;align-items:stretch}
 .reader-main .reader-bar-actions{justify-content:space-between}
 .reader-main .reader-select{flex:1;max-width:none}
}
@media(prefers-reduced-motion:reduce){.reader-toolbar,.reader-position{transition:none!important}}