.vbody{background:#1B4029;min-height:100vh;display:flex;flex-direction:column;overflow:hidden}
.vtop{height:58px;flex:0 0 58px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px;background:#12291B;color:#fff;border-bottom:1px solid rgba(255,255,255,.09)}
.vleft,.vright{display:flex;align-items:center;gap:8px;min-width:0}
.vtitle{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vsub{font-size:12px;color:#9BB3A4;white-space:nowrap}
.ic{width:38px;height:38px;flex:0 0 38px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid rgba(255,255,255,.16);background:transparent;color:#fff;cursor:pointer;padding:0}
.ic:hover{background:rgba(255,255,255,.11)}
.ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dl{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;padding:9px 15px;border-radius:8px;background:var(--cam);color:#fff;border:0;cursor:pointer;font-family:inherit}
.dl:hover{background:var(--cam-d)}
.dl svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;padding:22px 62px;min-height:0}
.book{position:relative;transform-style:preserve-3d;perspective:2600px}
.sheet{position:absolute;top:0;transform-origin:left center;transform-style:preserve-3d;transition:transform .72s cubic-bezier(.42,0,.22,1)}
.face{position:absolute;inset:0;backface-visibility:hidden;background:#fff;overflow:hidden}
.face img{width:100%;height:100%;display:block;object-fit:contain;background:#fff}
.face.bk{transform:rotateY(180deg)}
.shadeL{position:absolute;top:0;left:0;height:100%;pointer-events:none;background:linear-gradient(to left,rgba(0,0,0,.20),rgba(0,0,0,0) 26px)}
.shadeR{position:absolute;top:0;height:100%;pointer-events:none;background:linear-gradient(to right,rgba(0,0,0,.20),rgba(0,0,0,0) 26px)}
.spine{position:absolute;top:0;height:100%;width:2px;background:rgba(0,0,0,.28);pointer-events:none;z-index:60}
.nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:78px;border-radius:10px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.17);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:70}
.nav:hover{background:rgba(255,255,255,.2)}
.nav[disabled]{opacity:.25;cursor:default}
.nav svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.nprev{left:10px}.nnext{right:10px}
.vbot{flex:0 0 58px;height:58px;display:flex;align-items:center;gap:14px;padding:0 22px;background:#12291B;border-top:1px solid rgba(255,255,255,.09)}
.vbot input[type=range]{flex:1;accent-color:var(--cam);height:4px;cursor:pointer}
.pnum{font-size:13px;color:#D6E2DA;min-width:104px;text-align:right;font-variant-numeric:tabular-nums}
.panel{position:fixed;inset:0;background:rgba(8,14,10,.94);z-index:200;display:none;flex-direction:column}
.panel.on{display:flex}
.phead{height:58px;flex:0 0 58px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;color:#fff;border-bottom:1px solid rgba(255,255,255,.1);font-size:14.5px;font-weight:600}
.pgrid{flex:1;overflow-y:auto;padding:22px;display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:16px}
.tcell{cursor:pointer;border:2px solid transparent;border-radius:5px;overflow:hidden;background:#fff;position:relative}
.tcell.cur{border-color:var(--cam)}
.tcell img{width:100%;display:block}
.tcell span{position:absolute;right:4px;bottom:4px;background:rgba(0,0,0,.66);color:#fff;font-size:11px;padding:1px 6px;border-radius:4px}
.zoom{position:fixed;inset:0;background:rgba(8,14,10,.97);z-index:210;display:none;align-items:center;justify-content:center;overflow:hidden;cursor:grab}
.zoom.on{display:flex}
.zoom img{max-width:none;transform-origin:center center;user-select:none;-webkit-user-drag:none}
.zclose{position:fixed;top:14px;right:14px;z-index:220}
.zctl{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:220}
.hint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);font-size:12.5px;color:#8E9C94;pointer-events:none}
@media(max-width:820px){.stage{padding:14px 10px}.nav{width:38px;height:64px}.nprev{left:2px}.nnext{right:2px}.vsub,.hint{display:none}.vbot{padding:0 14px}.pnum{min-width:76px}}

.book.noanim .sheet{transition:none!important}