:root{--bg:#111;--panel:rgba(22,22,22,.96);--line:rgba(255,255,255,.12);--text:#f5f5f5;--muted:#aaa;--accent:#ef2b1d;--toolbar-h:58px;--footer-h:52px}
*{box-sizing:border-box}html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;overflow:hidden}button,input,a{font:inherit}button{color:inherit}.viewer-shell{height:100%;display:grid;grid-template-rows:var(--toolbar-h) minmax(0,1fr) var(--footer-h);background:radial-gradient(circle at 50% 35%,#2b2b2b 0,#181818 45%,#0e0e0e 100%)}
.topbar,.bottombar{position:relative;z-index:50;background:rgba(16,16,16,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}.topbar{border-bottom:1px solid var(--line)}.bottombar{border-top:1px solid var(--line)}
.brand-mark{width:48px;height:38px;display:flex;align-items:center;justify-content:center}.brand-mark img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;filter:drop-shadow(0 5px 12px rgba(239,43,29,.16))}.brand-copy{line-height:1.1}.brand-copy span{color:var(--muted);max-width:44vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon-btn,.zoom-value,.small-btn{border:1px solid var(--line);background:#222;border-radius:9px;cursor:pointer;display:grid;place-items:center;transition:background .18s ease,border-color .18s ease,transform .12s ease,opacity .18s ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.icon-btn{width:38px;height:38px;font-size:15px}.zoom-value{height:38px;min-width:58px;padding:0 8px;color:#ddd}.small-btn{width:38px;height:34px;font-size:14px}.icon-btn:hover,.zoom-value:hover,.small-btn:hover{background:#303030;border-color:rgba(255,255,255,.22)}.icon-btn:active,.small-btn:active{transform:scale(.94)}.icon-btn:focus-visible,.zoom-value:focus-visible,.small-btn:focus-visible,.nav-button:focus-visible{outline:2px solid #fff;outline-offset:2px}.link-btn{text-decoration:none;color:#fff}
.stage{position:relative;min-height:0;overflow:hidden;touch-action:none}.book-wrap{position:relative;max-width:calc(100vw - 150px);max-height:calc(100% - 26px);display:flex;align-items:center;justify-content:center;transition:transform .15s ease;will-change:transform}.book{display:flex;align-items:center;justify-content:center;transform-style:preserve-3d;filter:drop-shadow(0 20px 38px rgba(0,0,0,.46));transition:transform .25s ease}.page-slot{margin:0;position:relative;display:flex;align-items:center;justify-content:center;background:#fff;overflow:hidden;backface-visibility:hidden;transform-origin:center;transition:transform .28s ease,opacity .28s ease;box-shadow:0 0 0 1px rgba(0,0,0,.18)}.page-slot img{display:block;max-width:none;user-select:none;-webkit-user-drag:none;pointer-events:none}.page-left{transform-origin:right center}.page-right{transform-origin:left center}.spine{width:2px;align-self:stretch;background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(255,255,255,.15),rgba(0,0,0,.35));z-index:15;box-shadow:0 0 12px rgba(0,0,0,.55)}
.loading{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);padding:9px 12px;border-radius:9px;background:rgba(0,0,0,.72);font-size:12px;opacity:0;pointer-events:none;transition:.2s;z-index:30}.loading.show{opacity:1}
/* v4: nav controls nam tren book va stage, hit-area lon hon; pointer event khong con bi stage capture. */
.nav-button{position:absolute;top:50%;transform:translateY(-50%);z-index:45;width:50px;height:78px;border:1px solid rgba(255,255,255,.11);border-radius:14px;background:rgba(0,0,0,.48);color:#fff;font-size:21px;cursor:pointer;opacity:.88;display:grid;place-items:center;transition:background .18s ease,opacity .18s ease,transform .12s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent;pointer-events:auto}.nav-button:hover{background:rgba(0,0,0,.78);opacity:1}.nav-button:active:not(:disabled){transform:translateY(-50%) scale(.94)}.nav-prev{left:14px}.nav-next{right:14px}.nav-button:disabled,.small-btn:disabled{opacity:.18;cursor:default;pointer-events:none}
.thumb-panel{position:fixed;z-index:60;top:var(--toolbar-h);bottom:var(--footer-h);left:0;width:260px;background:var(--panel);border-right:1px solid var(--line);transform:translateX(-102%);transition:transform .24s ease;box-shadow:20px 0 50px rgba(0,0,0,.25)}.thumb-panel.open{transform:translateX(0)}.thumb-head{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid var(--line)}.thumb-head button{border:0;background:transparent;font-size:20px;cursor:pointer;color:#bbb;width:36px;height:36px}.thumb-list{height:calc(100% - 48px);overflow:auto;padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.thumb-item{border:1px solid transparent;border-radius:8px;background:#272727;padding:5px;cursor:pointer;color:#ddd;text-align:center;transition:.15s}.thumb-item:hover{background:#333}.thumb-item.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}.thumb-item img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;border-radius:4px;background:#fff}.thumb-item span{display:block;font-size:11px;padding-top:5px}
.page-jump{color:#ccc;font-size:13px}.page-jump input{width:58px;height:34px;border:1px solid var(--line);background:#222;color:#fff;text-align:center;border-radius:8px;outline:none}.page-jump input:focus{border-color:var(--accent)}.progress-track{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.05)}.progress-bar{height:100%;width:0;background:var(--accent);transition:width .2s}
/* V2 - page-turn sheet */
.book{position:relative;perspective:2400px}.flip-sheet{position:absolute;top:0;display:none;z-index:12;transform-style:preserve-3d;will-change:transform;pointer-events:none}.flip-sheet.show{display:block}.flip-sheet.on-right{left:50%;transform-origin:left center}.flip-sheet.on-left{right:50%;transform-origin:right center}.flip-face{position:absolute;inset:0;background:#fff;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.15)}.flip-face img{display:block;max-width:none;user-select:none;-webkit-user-drag:none;pointer-events:none}.flip-back{transform:rotateY(180deg)}.flip-sheet.on-left .flip-back{transform:rotateY(-180deg)}.flip-shadow{position:absolute;inset:0;z-index:4;backface-visibility:hidden;pointer-events:none;opacity:0;background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.25));mix-blend-mode:multiply}.flip-sheet.turn-next{animation:pageTurnNext .7s cubic-bezier(.33,.02,.2,1) forwards}.flip-sheet.turn-prev{animation:pageTurnPrev .7s cubic-bezier(.33,.02,.2,1) forwards}.flip-sheet.turn-next .flip-shadow,.flip-sheet.turn-prev .flip-shadow{animation:pageShadow .7s ease-in-out forwards}.book.flipping-next .page-left:after,.book.flipping-prev .page-right:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;animation:underPageShade .7s ease both}.book.flipping-next .page-right{visibility:hidden!important}.book.flipping-prev .page-left{visibility:hidden!important}@keyframes pageTurnNext{0%{transform:rotateY(0deg)}45%{transform:rotateY(-88deg)}55%{transform:rotateY(-102deg)}100%{transform:rotateY(-180deg)}}@keyframes pageTurnPrev{0%{transform:rotateY(0deg)}45%{transform:rotateY(88deg)}55%{transform:rotateY(102deg)}100%{transform:rotateY(180deg)}}@keyframes pageShadow{0%,100%{opacity:0}42%,58%{opacity:.88}}@keyframes underPageShade{0%,100%{box-shadow:inset 0 0 0 rgba(0,0,0,0)}50%{box-shadow:inset 26px 0 48px rgba(0,0,0,.3)}}.page-left:after,.page-right:after{content:"";position:absolute;top:0;bottom:0;width:18px;pointer-events:none;opacity:.42}.page-left:after{right:0;background:linear-gradient(90deg,transparent,rgba(0,0,0,.16))}.page-right:after{left:0;background:linear-gradient(90deg,rgba(0,0,0,.16),transparent)}
@media(max-width:900px){:root{--toolbar-h:54px;--footer-h:50px}.brand-mark{width:42px;height:32px}.book-wrap{max-width:calc(100vw - 26px);max-height:calc(100% - 16px)}.nav-button{width:42px;height:64px;font-size:18px;background:rgba(0,0,0,.42)}.nav-prev{left:max(6px,env(safe-area-inset-left))}.nav-next{right:max(6px,env(safe-area-inset-right))}.icon-btn{width:36px;height:36px}.page-left{display:none}.spine{display:none}.thumb-panel{width:min(84vw,300px)}.flip-sheet.mobile-sheet{left:0;right:auto;transform-origin:left center}.flip-sheet.mobile-sheet.turn-prev-mobile{transform-origin:right center;animation:pageTurnPrevMobile .55s cubic-bezier(.33,.02,.2,1) forwards}.flip-sheet.mobile-sheet.turn-next{animation-duration:.55s}@keyframes pageTurnPrevMobile{0%{transform:rotateY(0deg)}100%{transform:rotateY(180deg)}}}
@media(max-width:520px){:root{--toolbar-h:52px;--footer-h:48px}.brand-mark{width:38px;height:29px}.toolbar{gap:3px}.icon-btn{width:34px;height:34px;border-radius:8px}.nav-button{width:38px;height:58px;border-radius:11px}.page-jump input{width:50px;height:32px}.small-btn{width:36px;height:32px}}
@media(max-width:360px){.brand-block{gap:4px}.brand-copy strong{display:none}.brand-mark{width:36px}.nav-button{width:34px;height:54px}.nav-prev{left:3px}.nav-next{right:3px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}