*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:Arial,Helvetica,sans-serif;background:#202224;color:#fff}
.app{width:100%;height:100%;display:flex;flex-direction:column;background:#202224}
.topbar{height:56px;min-height:56px;background:#12171c;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #292f35;z-index:20}
.title{font-size:18px;font-weight:700}
.actions{display:flex;gap:8px}
.actions button,.controls button{border:0;border-radius:7px;background:#2c3540;color:#fff;cursor:pointer;font-size:22px;line-height:1;min-width:46px;height:40px}
.actions button:hover,.controls button:hover{background:#394451}
.viewer-wrap{position:relative;flex:1;min-height:0;background:#222426;overflow:hidden}
.book-scroll{position:absolute;inset:0;overflow:auto;display:flex;align-items:center;justify-content:center;padding:12px 54px;scrollbar-width:thin}
.book-scale{position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.book{position:relative;flex:0 0 auto;box-shadow:0 12px 35px rgba(0,0,0,.45)}
.book .page{background:#fff;overflow:hidden}
.book .page canvas{display:block;width:100%;height:100%;background:#fff}
.nav{position:absolute;top:50%;transform:translateY(-50%);z-index:15;width:44px;height:78px;border:0;border-radius:9px;background:rgba(0,0,0,.72);color:#fff;font-size:46px;line-height:1;cursor:pointer}
.nav:hover{background:rgba(0,0,0,.88)}
.nav.prev{left:8px}.nav.next{right:8px}
.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;background:rgba(34,36,38,.97);z-index:10}
.loading.error{padding:30px;text-align:center;line-height:1.5;color:#ffdddd}
.controls{height:58px;min-height:58px;background:#12171c;display:flex;align-items:center;justify-content:center;gap:8px;z-index:20;border-top:1px solid #292f35}
.controls button{height:42px;min-width:44px}
.pagebox{display:flex;align-items:center;font-size:16px;margin:0 3px}
#pageInput{width:70px;height:42px;border:0;border-radius:7px;padding:0 10px;font-size:16px;text-align:center}
.hint{margin-left:12px;color:#aeb5bd;font-size:13px}
@media(max-width:700px){
 .topbar{height:50px;min-height:50px;padding:0 10px}.title{font-size:16px}
 .actions button{min-width:40px;height:36px}
 .book-scroll{padding:8px 48px}
 .nav{width:38px;height:64px;font-size:38px}.nav.prev{left:4px}.nav.next{right:4px}
 .controls{height:54px;min-height:54px;gap:5px}.controls button{min-width:38px;height:38px}.hint{display:none}
 #pageInput{width:58px;height:38px}
}