*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#00aedb;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-tap-highlight-color:transparent}
#app{position:fixed;inset:0;display:flex;flex-direction:column}
#stage{flex:1;position:relative;min-height:0;display:flex;align-items:center;justify-content:center;padding:12px 56px}
#book{position:relative}
#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;pointer-events:none;transition:opacity .3s}
#loading.hide{opacity:0}
.spin{width:38px;height:38px;border:4px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:s 1s linear infinite;margin-right:12px}@keyframes s{to{transform:rotate(360deg)}}
.pg{background:#fff;overflow:hidden}.pg img{width:100%;height:100%;object-fit:contain;display:block;user-select:none;-webkit-user-drag:none}
.nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:64px;border:0;background:rgba(255,255,255,.22);color:#fff;font-size:28px;cursor:pointer;border-radius:8px;z-index:5}
.nav:hover{background:rgba(255,255,255,.4)}.nav:disabled{opacity:.25;cursor:default}#np{left:6px}#nn{right:6px}
#bar{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;background:rgba(255,255,255,.95);box-shadow:0 -2px 10px rgba(0,0,0,.15);z-index:6}
#bar button{border:0;background:transparent;width:40px;height:40px;border-radius:8px;cursor:pointer;color:#1d3a4a;display:flex;align-items:center;justify-content:center}
#bar button:hover{background:#e6f6fb}#bar button.on{background:#cdeefa}#bar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#bar .pn{display:flex;align-items:center;gap:4px;color:#1d3a4a;font-size:14px;margin:0 6px}
#pin{width:64px;height:32px;border:1px solid #b9dbe8;border-radius:6px;text-align:center;font-size:14px;color:#1d3a4a}
#thumbs{position:absolute;left:0;top:0;bottom:0;width:190px;background:rgba(255,255,255,.96);overflow:auto;padding:10px;transform:translateX(-100%);transition:transform .25s;z-index:7;box-shadow:2px 0 12px rgba(0,0,0,.2)}
#thumbs.open{transform:none}
#thumbs a{display:block;margin-bottom:10px;text-align:center;font-size:12px;color:#1d3a4a;text-decoration:none;cursor:pointer}
#thumbs img{width:100%;display:block;border:2px solid transparent;background:#eef6f9;min-height:60px}#thumbs a.cur img{border-color:#00aedb}
#zoom{position:absolute;inset:0;background:#00aedb;overflow:auto;z-index:4;display:none;cursor:grab}
#zoom.on{display:block}#zoom .in{display:flex;justify-content:center;align-items:flex-start;min-width:100%;min-height:100%;padding:12px}
#zoom img{display:block;background:#fff;flex:none}
#toast{position:fixed;left:50%;bottom:76px;transform:translateX(-50%);background:#1d3a4a;color:#fff;padding:8px 14px;border-radius:8px;font-size:14px;opacity:0;transition:opacity .25s;pointer-events:none;z-index:9}#toast.on{opacity:1}
@media(max-width:700px){#stage{padding:8px 4px}.nav{display:none}#thumbs{width:150px}}