.reader{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--paper)}
.reader-toolbar{height:54px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#fff}
.reader-label{font-size:14px;font-weight:600;display:flex;align-items:center;gap:9px}
.book-icon{font-size:24px;color:var(--orange);line-height:1}
.reader-actions{display:flex;gap:8px}
.tool-button{min-height:42px;border:0;background:transparent;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:13px;padding:8px 10px;border-radius:5px}
.tool-button:hover{background:#e9edf3}
.book-stage{height:clamp(410px,62vh,720px);min-height:410px;position:relative;display:flex;align-items:center;justify-content:center;padding:18px 70px;background:radial-gradient(ellipse at center,#fff 0,#eef0f5 75%)}
#book-shell{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
#book{width:100%;height:100%;margin:0 auto}
.page{background:#fff;overflow:hidden;box-shadow:0 0 12px #1b234319}
.page img{width:100%;height:100%;display:block;object-fit:contain;user-select:none}
.page:first-child:not(.stf__item){max-height:100%;width:auto;aspect-ratio:595/842;margin:auto}
.page-arrow{position:absolute;z-index:5;top:50%;transform:translateY(-50%);width:44px;height:44px;background:#fff;border:1px solid #d7dce5;border-radius:50%;display:grid;place-items:center;box-shadow:0 3px 10px #24274408}
.page-arrow:hover:not(:disabled){background:var(--navy);color:white;border-color:var(--navy)}
.previous{left:17px}
.next{right:17px}
.reader-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 20px;border-top:1px solid var(--line);background:#fff;min-height:58px}
.reader-bottom p{font-size:12px;color:var(--muted);margin:0}
.page-position{display:flex;align-items:center;gap:7px;font-size:13px;white-space:nowrap}
.page-position select{border:1px solid var(--line);border-radius:5px;padding:5px 4px;background:white;font-size:14px;color:var(--navy);min-height:36px}
.page-position>span{color:var(--muted)}
.thumbnails{display:flex;overflow-x:auto;gap:12px;padding:14px 20px 10px;scrollbar-width:thin;scrollbar-color:#bbbfd1 transparent;scroll-padding-inline:20px;border-top:1px solid var(--line)}
.thumbnails[hidden]{display:none}
.thumb{width:48px;flex:0 0 48px;padding:0;border:0;background:none;color:var(--muted);font-size:12px}
.thumb img{width:48px;height:68px;object-fit:contain;border:2px solid transparent;border-radius:2px;display:block;margin-bottom:3px;opacity:.75;transition:opacity .2s}
.thumb[aria-current="page"]{color:var(--orange);font-weight:700}
.thumb[aria-current="page"] img{outline:2px solid var(--orange);outline-offset:2px;opacity:1}
.thumb:hover img{opacity:1}
.dialog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;border-bottom:1px solid var(--line);background:#fff}
.dialog-toolbar h2{font-size:18px;line-height:1.2;letter-spacing:0;margin:0}
.dialog-toolbar button,.zoom-navigation button{border:1px solid var(--line);background:white;color:var(--navy);border-radius:5px;min-height:42px;min-width:42px;padding:7px 12px}
.zoom-dialog{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;background:var(--paper)}
.zoom-dialog[open]{display:flex;flex-direction:column}
.zoom-actions{display:flex;align-items:center;gap:9px}
.zoom-actions output{font-size:13px;min-width:49px;text-align:center}
.zoom-scroll{overflow:auto;flex:1;padding:20px;overscroll-behavior:contain;touch-action:pan-x pan-y pinch-zoom}
.zoom-scroll img{display:block;margin:0 auto;max-width:none;box-shadow:0 8px 32px #151b4420}
.zoom-navigation{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 20px;background:#fff;border-top:1px solid var(--line);font-size:13px}
.zoom-navigation>span{color:var(--muted);font-size:12px}
.reader-error{padding:15px}
.reader.fullscreen-fallback{position:fixed;inset:0;z-index:30;border-radius:0;display:flex;flex-direction:column}
.reader:fullscreen{display:flex;flex-direction:column;background:var(--paper)}
.reader:fullscreen .book-stage,.reader.fullscreen-fallback .book-stage{height:auto;flex:1;min-height:0}
.reader:fullscreen .thumbnails,.reader.fullscreen-fallback .thumbnails{flex-shrink:0}
.reader:fullscreen .reader-toolbar,.reader.fullscreen-fallback .reader-toolbar,.reader:fullscreen .reader-bottom,.reader.fullscreen-fallback .reader-bottom{flex-shrink:0}
@media(min-width:1600px){.book-stage{height:66vh}}
@media(max-width:850px){.reader-bottom p{max-width:240px}}
@media(max-width:600px){.reader{border-radius:7px}
.reader-toolbar{padding:0 9px;height:46px}
.reader-label{font-size:12px;gap:6px}
.reader-actions{gap:0}
.reader-actions .tool-button span{display:none}
.tool-button{min-width:40px}
.book-stage{height:auto;min-height:0;aspect-ratio:595/875;padding:8px 7px}
#book-shell{width:100%;height:100%}
.page-arrow{width:38px;height:38px;top:auto;bottom:10px;transform:none;background:#ffffffed}
.previous{left:13px}
.next{right:13px}
.reader-bottom{padding:7px 10px;min-height:52px;gap:8px;flex-wrap:wrap}
.reader-bottom p{order:3;width:100%;max-width:none;text-align:center;font-size:10px;margin:-2px 0 2px}
.reader-bottom .tool-button{min-height:36px;padding:3px 5px;font-size:12px}
.reader-bottom .tool-button svg{width:18px}
.page-position{font-size:12px}
.page-position select{min-height:32px}
.thumbnails{gap:11px;padding:11px 12px 7px}
.thumb{width:39px;flex-basis:39px;font-size:10px}
.thumb img{width:39px;height:55px}
.dialog-toolbar{padding:10px 12px}
.dialog-toolbar h2{font-size:16px}
.zoom-actions{gap:5px}
.zoom-actions output{min-width:44px}
.zoom-navigation{padding:9px 10px}
.zoom-navigation>span{display:none}
.zoom-scroll{padding:10px}
.reader.fullscreen-fallback .book-stage,.reader:fullscreen .book-stage{aspect-ratio:auto;padding:10px 7px}
.reader.fullscreen-fallback .reader-toolbar{padding-top:env(safe-area-inset-top);height:calc(46px + env(safe-area-inset-top))}}.catalogue-dialog{overscroll-behavior:contain}