.reader-layout { min-height:100dvh; }
.professional-reader { --reader-layout-ready:1; --reader-background:#f7f0df; --reader-color:#27221b; position:relative; height:100dvh; display:flex; flex-direction:column; overflow:hidden; background:var(--reader-background); color:var(--text-primary); }
.professional-reader[data-reader-theme=light] { --reader-background:#fff; --reader-color:#1b1d23; }
.professional-reader[data-reader-theme=dark] { --reader-background:#1b1d26; --reader-color:#e3e6ee; }
.professional-reader[data-reader-theme=black] { --reader-background:#000; --reader-color:#d7d7d7; }
.reader-chrome { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; background:var(--bg-secondary); padding:.65rem 1rem; z-index:3; border-color:var(--border-color); }
.reader-header { border-bottom:1px solid var(--border-color); }
.reader-title { flex:1 1 15rem; min-width:0; }
.reader-title h1 { font-size:1rem; margin:0; max-width:38rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.reader-title h1:focus { outline:none; }
.reader-title small { color:var(--text-secondary); }
.reader-chrome .btn { padding:.45rem .65rem; min-height:36px; font-size:.8rem; white-space:normal; }
.reader-chrome label { display:flex; align-items:center; gap:.4rem; margin:0; font-size:.8rem; }
.reader-chrome select,.reader-chrome input { color:var(--text-primary); background:var(--bg-primary); border:1px solid var(--border-color); border-radius:6px; padding:.4rem; min-width:0; max-width:10rem; }
.reader-chrome .reader-page-jump input { width:5rem; }
.reader-footer { border-top:1px solid var(--border-color); font-size:.8rem; }
.reader-body { position:relative; display:flex; flex:1; min-height:0; overflow:hidden; }
.reader-content { display:flex; flex-direction:column; position:relative; flex:1; min-width:0; min-height:0; color:var(--reader-color); }
.professional-reader .reader-stage { position:relative; flex:1; min-width:0; min-height:0; width:100%; max-width:none; margin:0; padding:0; overflow:hidden; background:var(--reader-background); }
.reader-epub-view { display:block; width:100%; height:100%; }
.reader-epub-view::part(filter) { background:var(--reader-background); }
.reader-pdf-container { position:absolute; inset:0; overflow:auto; -webkit-overflow-scrolling:touch; }
.professional-reader[data-reader-theme=dark] .reader-pdf-container .canvasWrapper { filter:invert(.88) hue-rotate(180deg); }
.professional-reader[data-reader-theme=black] .reader-pdf-container .canvasWrapper { filter:invert(1) hue-rotate(180deg); }
.reader-image-viewport { position:absolute; inset:0; overflow:auto; background:var(--reader-background); }
.reader-image-spread { display:flex; flex-direction:var(--reader-image-direction,row); justify-content:center; align-items:center; gap:.4rem; height:100%; min-height:100%; padding:.5rem; }
.professional-reader .reader-image-spread>img { min-width:0; max-width:100%; max-height:100%; flex:0 1 auto; object-fit:contain; }
.reader-image-viewport.fit-width .reader-image-spread { height:auto; align-items:flex-start; }
.professional-reader .reader-image-viewport.fit-width .reader-image-spread>img { width:100%; max-height:none; height:auto; }
.reader-image-viewport.fit-original .reader-image-spread { width:max-content; min-width:100%; height:auto; align-items:flex-start; }
.professional-reader .reader-image-viewport.fit-original .reader-image-spread>img { max-width:none; max-height:none; height:auto; flex-shrink:0; }
.reader-image-viewport.webtoon { padding:0; }
.reader-webtoon-item { display:flex; align-items:center; justify-content:center; width:100%; max-width:80rem; min-height:70vh; margin:auto; }
.professional-reader .reader-webtoon-item img { display:block; width:100%; height:auto; max-width:100%; }
.reader-drawer { flex:0 0 clamp(18rem,25vw,25rem); width:clamp(18rem,25vw,25rem); min-height:0; overflow:auto; border-right:1px solid var(--border-color); padding:1rem; background:var(--bg-secondary); z-index:5; }
.reader-drawer>header { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:1rem; }
.reader-drawer h2 { font-size:1.05rem; margin:0; }
.reader-drawer .btn { padding:.45rem .65rem; min-height:36px; font-size:.8rem; }
.reader-settings,.reader-search,.reader-note-editor { display:flex; flex-direction:column; gap:1rem; }
.reader-settings label,.reader-search label,.reader-note-editor label { display:flex; flex-direction:column; gap:.45rem; margin:0; }
.reader-settings input:not([type=checkbox]),.reader-settings select,.reader-search input,.reader-note-editor input,.reader-note-editor textarea,.reader-note-editor select { box-sizing:border-box; width:100%; min-height:40px; padding:.6rem; background:var(--bg-primary); border:1px solid var(--border-color); border-radius:7px; color:var(--text-primary); font:inherit; }
.reader-settings input[type=range] { padding:0; accent-color:var(--accent); }
.reader-settings .reader-checkbox { flex-direction:row; align-items:center; }
.reader-checkbox input { width:18px; height:18px; flex-shrink:0; accent-color:var(--accent); }
.reader-hint { padding:.65rem; margin:0; color:var(--text-secondary); font-size:.85rem; }
.reader-toc { display:flex; flex-direction:column; gap:.35rem; }
.reader-toc-item,.reader-search-result,.reader-note-jump { display:block; text-align:left; border:1px solid transparent; padding:.65rem; color:var(--text-primary); background:transparent; border-radius:6px; cursor:pointer; font:inherit; }
.reader-toc-item:hover,.reader-search-result:hover,.reader-note-jump:hover { background:var(--accent-light); }
.reader-toc-item.active { border-color:var(--accent); background:var(--accent-light); }
.reader-search-result { width:100%; margin:.5rem 0; border-color:var(--border-color); }
.reader-search-result span,.reader-search-result strong,.reader-note-jump strong,.reader-note-jump small { display:block; }
.reader-note-actions { display:flex; flex-wrap:wrap; gap:.5rem; }
.reader-note { border:1px solid var(--border-color); border-inline-start:4px solid #e6bf55; border-radius:8px; padding:.6rem; margin:1rem 0; overflow-wrap:anywhere; }
.reader-note[data-note-color=green] { border-inline-start-color:#6bc56b; }
.reader-note[data-note-color=blue] { border-inline-start-color:#72a8ea; }
.reader-note[data-note-color=pink] { border-inline-start-color:#e893b6; }
.reader-note p,.reader-note-editor textarea { white-space:pre-wrap; }
.reader-note blockquote,.reader-note-editor blockquote { border-left:3px solid var(--accent); margin:.7rem 0; padding:.5rem .7rem; background:var(--bg-primary); }
.reader-selection { position:absolute; bottom:1rem; left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100% - 2rem); display:flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:.5rem; padding:.7rem; border:1px solid var(--accent); border-radius:10px; background:var(--bg-secondary); color:var(--text-primary); box-shadow:0 4px 24px #0007; z-index:6; }
.reader-selection>span { max-width:18rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.8rem; }
.reader-error { display:flex; align-items:center; gap:1rem; justify-content:center; padding:.5rem; color:var(--text-primary); background:#5b2634; z-index:7; }
.reader-loading { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; background:rgb(8 12 22 / 75%); color:#fff; z-index:15; }
.reader-loading .reading-review-spinner { width:52px; height:52px; border-width:4px; }
.reader-restore-menu { position:absolute; top:.5rem; left:50%; transform:translateX(-50%); z-index:8; opacity:.8; }
.professional-reader.is-immersive>.reader-chrome { display:none; }
.reader-thumbnail-controls { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:1rem; }
.reader-thumbnails { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
.reader-thumbnail { min-width:0; display:flex; flex-direction:column; align-items:center; gap:.4rem; padding:.4rem; border:1px solid var(--border-color); border-radius:7px; background:var(--bg-primary); color:var(--text-primary); cursor:pointer; }
.reader-thumbnail img { max-width:100%; height:10rem; object-fit:contain; }
.reader-download-only { position:absolute; inset:0; display:grid; place-content:center; gap:1rem; padding:2rem; }
.professional-reader button:focus-visible,.professional-reader a:focus-visible,.professional-reader select:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media(max-width:780px) { .reader-header { padding:.5rem;gap:.35rem; } .reader-title { flex-basis:calc(100% - 4rem); } .reader-header>.btn { flex:1 1 auto; } .reader-footer { padding:.4rem;gap:.35rem; } .reader-drawer { position:absolute; inset:0 auto 0 0; width:min(90vw,24rem); box-sizing:border-box; box-shadow:6px 0 24px #0006; } .reader-header .btn,.reader-footer .btn { font-size:.75rem; } .reader-selection>span { display:none; } }

/* Reader chrome is intentionally independent of the catalog's large action buttons. */
.professional-reader { font-family:var(--font-sans,system-ui,sans-serif); }
.reader-chrome { background:#181c26; color:#e5e8f2; border-color:#2c3243; }
.reader-header { flex-wrap:nowrap; gap:1.2rem; padding:.8rem 1.25rem; min-height:80px; box-shadow:0 3px 18px #0002; }
.reader-title { display:grid; grid-template-columns:auto minmax(0,1fr); gap:2px 12px; flex:1 1 16rem; }
.reader-title h1 { font-size:1rem; font-weight:650; line-height:1.35; color:#f2f4fa; }
.reader-title small { grid-column:2; color:#929bb2; font-size:.75rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reader-format-tag { grid-row:span 2; align-self:center; border:1px solid #394260; border-radius:7px; background:#252c43; color:#b3c0ff; padding:6px 7px; font-size:.58rem; font-weight:750; letter-spacing:.08em; }
.reader-primary-tools,.reader-view-tools,.reader-footer-actions,.reader-pager { display:flex; align-items:center; gap:5px; }
.reader-primary-tools { padding:4px; background:#10141d; border:1px solid #2c3242; border-radius:12px; }
.reader-view-tools { border-left:1px solid #343b4f; padding-left:1rem; }
.reader-icon { width:20px; height:20px; flex:0 0 20px; vertical-align:middle; }
.reader-tool,.reader-chrome .reader-tool { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:9px 12px; border:1px solid transparent; border-radius:8px; background:transparent; color:#b5bed2; font:600 .76rem/1.2 var(--font-sans,system-ui,sans-serif); text-decoration:none; white-space:nowrap; cursor:pointer; transition:background .15s,color .15s,border-color .15s; }
.reader-tool:hover:not(:disabled) { color:#fff; background:#2a3043; }
.reader-tool.active { color:#f2efff; background:#4d4aa0; border-color:#7771cf; }
.reader-tool:disabled { opacity:.4; cursor:wait; }
.reader-tool-square,.reader-chrome .reader-tool-square { width:40px; padding:9px; flex:0 0 40px; }
.reader-back { border-color:#343b4e; background:#232a3a; }
.reader-note-count { display:grid; place-items:center; min-width:18px; height:18px; padding:0 4px; border-radius:5px; background:#30374a; font-size:.64rem; color:#c9d0e5; }
.reader-content { padding:clamp(10px,1.8vw,26px); background:radial-gradient(ellipse at 50% 0,#34394a,#202430 75%); }
.professional-reader .reader-stage { border:1px solid #0003; border-radius:8px; box-shadow:0 6px 30px #0004,0 0 0 1px #ffffff08; }
.professional-reader.is-immersive .reader-content { padding:0; background:var(--reader-background); }
.professional-reader.is-immersive .reader-stage { border:0; border-radius:0; box-shadow:none; }
.reader-drawer { background:#191e29; color:#d4daea; border-color:#343c50; padding:1.2rem; width:320px; flex-basis:320px; }
.reader-drawer>header { margin:-.2rem 0 1.3rem; padding-bottom:1rem; border-bottom:1px solid #30384a; }
.reader-drawer h2 { font-size:.9rem; letter-spacing:.015em; }
.reader-settings label,.reader-search label { font-size:.78rem; color:#a7b1c9; }
.reader-settings select,.reader-settings input:not([type=range]):not([type=checkbox]),.reader-search input { background:#111621; border-color:#354057; color:#e3e8f6; border-radius:8px; }
.reader-settings input[type=range] { min-height:24px; background:transparent; border:0; }
.reader-toc-item { font-size:.84rem; padding:12px; border-radius:9px; }
.reader-toc-item.active { background:#353451; border-color:#6562a5; }
.reader-footer { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); min-height:78px; padding:12px 24px 9px; gap:1rem; }
.reader-progress-track { position:absolute; top:0; left:0; width:100%; height:3px; background:#30364a; }
.reader-progress-track>span { display:block; height:100%; border-radius:0 3px 3px 0; background:linear-gradient(90deg,#8178e7,#b3a6fc); transition:width .18s; }
.reader-footer-status { display:flex; align-items:center; gap:12px; color:#8e9ab6; font-size:.66rem; letter-spacing:.02em; }
.reader-footer-status>span { display:flex; flex-direction:column; gap:2px; }.reader-footer-status strong { color:#d9e0f0; font-size:.82rem; font-weight:650; }
.reader-pager { justify-content:center; gap:12px; }
.reader-page-jump { gap:8px!important; color:#9ca8c1; font-size:.75rem!important; }
.reader-chrome .reader-page-jump input { width:3.5rem; padding:8px 5px; text-align:center; border:1px solid #3b455e; border-radius:7px; background:#111722; color:#f0f2fa; font-size:.85rem; font-weight:600; appearance:textfield; -moz-appearance:textfield; }
.reader-page-jump input::-webkit-inner-spin-button,.reader-page-jump input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.reader-page-total { white-space:nowrap; }
.reader-footer-actions { justify-content:flex-end; }
.reader-format-switch>span { display:none; }.reader-chrome .reader-format-switch select { width:83px; padding:7px; font-size:.7rem; background:#212838; border-color:#354057; color:#bcc7e3; }
.reader-more { position:relative; }.reader-more>summary { list-style:none; }.reader-more>summary::-webkit-details-marker { display:none; }
.reader-more[open]>summary { background:#343950; color:#fff; }
.reader-more>div { position:absolute; right:0; bottom:52px; min-width:225px; display:flex; flex-direction:column; gap:5px; padding:9px; background:#222938; border:1px solid #45516b; border-radius:12px; box-shadow:0 10px 40px #0008; }
.reader-more .btn { background:transparent; border-color:transparent; font-size:.78rem; justify-content:flex-start; }.reader-more .btn:hover { background:#353f55; }
.reader-loading { background:#121722b3; backdrop-filter:blur(8px); }
.reader-loading-card { display:flex; flex-direction:column; align-items:center; gap:15px; width:min(380px,calc(100vw - 40px)); padding:32px; background:#1d2432; border:1px solid #414c65; border-radius:18px; box-shadow:0 24px 80px #0007; text-align:center; }
.reader-loading-symbol { display:grid; place-items:center; width:60px; height:60px; border-radius:17px; background:#39385f; color:#c4bdff; }.reader-loading-symbol .reader-icon { width:30px; height:30px; }
.reader-loading-card strong { font-size:.94rem; }.reader-loading-card>span:last-child { color:#9da9c2; font-size:.78rem; }
.reader-loading .reading-review-spinner { width:28px; height:28px; border-width:3px; }
.reader-restore-menu { border-radius:20px; padding:9px 16px; font-size:.72rem; box-shadow:0 4px 20px #0003; }
@media(max-width:1120px) { .reader-header { gap:.65rem; padding:.6rem .8rem; }.reader-view-tools { padding-left:.5rem; }.reader-tool-label { display:none; }.reader-primary-tools .reader-tool,.reader-view-tools .reader-tool { padding:9px; }.reader-title { flex-basis:10rem; }.reader-footer { padding-inline:12px; }.reader-footer-status { gap:6px; } }
@media(max-width:600px) { .reader-header { display:grid; grid-template-columns:36px minmax(0,1fr) auto; gap:8px; padding:10px; }.reader-back { width:36px; min-height:36px; }.reader-title { grid-template-columns:minmax(0,1fr); gap:2px; }.reader-title h1 { font-size:.87rem; }.reader-title small { grid-column:1; font-size:.66rem; }.reader-format-tag { display:none; }.reader-primary-tools { grid-column:1/-1; grid-row:2; justify-content:center; padding:3px; }.reader-primary-tools .reader-tool-label { display:inline; font-size:.68rem; }.reader-view-tools { grid-column:3; grid-row:1; border:0; padding:0; gap:0; }.reader-view-tools .reader-tool-square,.reader-view-tools .reader-tool { width:34px; flex-basis:34px; padding:6px; min-height:36px; }.reader-view-tools .reader-icon { width:18px; height:18px; flex-basis:18px; }.reader-content { padding:8px; }.reader-footer { grid-template-columns:1fr auto; gap:7px; min-height:98px; padding:10px; }.reader-footer-status { grid-column:2; grid-row:2; justify-content:flex-end; font-size:.6rem; }.reader-footer-status .reader-icon { display:none; }.reader-footer-status>span { flex-direction:row; align-items:center; gap:5px; }.reader-pager { grid-column:1/-1; grid-row:1; gap:6px; }.reader-footer-actions { grid-column:1; grid-row:2; justify-content:flex-start; }.reader-footer-actions .reader-tool-square { width:32px; flex-basis:32px; min-height:32px; padding:5px; }.reader-page-jump { font-size:.7rem!important; }.reader-drawer { width:min(90vw,320px); }.reader-more>div { left:0; right:auto; bottom:42px; } }

.reader-percent-jump{display:flex;align-items:center;gap:6px;color:#9ca8c1}.reader-chrome .reader-percent-jump input{width:5rem;padding:8px 5px;text-align:center;border:1px solid #3b455e;border-radius:7px;background:#111722;color:#f0f2fa;font-size:.85rem;font-weight:600}