*{box-sizing:border-box}
:root{--bg:#17191f;--panel:#22252d;--line:#343844;--text:#f4f5f7;--muted:#a9afbd;--accent:#d5ad72}
html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}
body{min-height:100vh;overflow:hidden}
button,input{font:inherit}
.topbar{height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;background:#20232b;border-bottom:1px solid var(--line);position:relative;z-index:5}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-size:17px;letter-spacing:.2px}
.brand-icon{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--accent);color:#25201a;font-size:20px}
.top-actions{display:flex;align-items:center;gap:9px}
.icon-btn,.close-btn{border:1px solid var(--line);background:#2b2f39;color:var(--text);width:37px;height:36px;border-radius:8px;cursor:pointer;font-size:20px;display:grid;place-items:center}
.icon-btn:hover,.nav-btn:hover{background:#414754}
.zoom-label{font-size:12px;color:var(--muted);min-width:42px;text-align:center}
.reader{height:calc(100vh - 66px);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 24px 12px}
.book-area{width:100%;height:min(72vh,780px);display:flex;align-items:center;justify-content:center;position:relative}
.book-stage{position:relative;z-index:1;max-width:100%;max-height:100%;transform-origin:center center;transition:transform .18s ease}
#book{margin:auto}
#book .page{background:#fff;overflow:hidden}
#book .page img{width:100%;height:100%;display:block;object-fit:fill;user-select:none;-webkit-user-drag:none}
#book .page.--left{border-right:1px solid rgba(0,0,0,.08)}
#book .page.--right{border-left:1px solid rgba(0,0,0,.08)}
.book-shadow{position:absolute;bottom:2%;width:min(78%,900px);height:24px;background:rgba(0,0,0,.45);filter:blur(20px);border-radius:50%}
.loading{position:absolute;z-index:4;color:var(--muted);font-size:14px}
.controls{display:flex;align-items:center;gap:22px;margin-top:14px;z-index:2}
.nav-btn{width:43px;height:40px;border:1px solid var(--line);border-radius:9px;background:#292d36;color:white;cursor:pointer;font-size:17px}
.nav-btn:disabled{opacity:.35;cursor:not-allowed}
.page-control{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
.page-control input{width:54px;background:#292d36;border:1px solid var(--line);border-radius:7px;color:white;padding:7px;text-align:center;outline:none}
.page-control input:focus{border-color:var(--accent)}
.page-total{white-space:nowrap}
.hint{margin:12px 0 0;color:#7f8796;font-size:11px;text-align:center}
.thumb-panel{position:absolute;z-index:6;left:18px;top:18px;bottom:18px;width:250px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;box-shadow:0 15px 45px #0008;transform:translateX(calc(-100% - 30px));transition:transform .25s ease;overflow:auto}
.thumb-panel.open{transform:translateX(0)}
.panel-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px;font-size:14px}
.close-btn{width:28px;height:28px;font-size:21px}
.thumb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.thumb{padding:5px;background:#303541;border:1px solid transparent;border-radius:7px;color:var(--muted);font-size:11px;cursor:pointer;text-align:center}
.thumb img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;background:#fff;border-radius:3px;margin-bottom:5px}
.thumb.active{border-color:var(--accent);color:white}
@media(max-width:700px){
 body{overflow:hidden}.topbar{height:56px;padding:0 12px}.brand{font-size:14px}.brand-icon{width:29px;height:29px}
 .top-actions{gap:5px}.icon-btn{width:32px;height:32px;font-size:17px}.zoom-label{min-width:35px;font-size:11px}
 .reader{height:calc(100vh - 56px);padding:8px 8px 10px}
 .book-area{height:min(76vh,720px);width:100%}
 .controls{gap:13px;margin-top:12px}.nav-btn{width:38px;height:36px}
 .hint{font-size:10px;max-width:95%;line-height:1.4}
 .thumb-panel{left:8px;top:8px;bottom:8px;width:min(250px,82vw)}
}