:root{--bar-bg:#111;--ui-bg:#2b2b2b;--btn-bg:#444;--btn-bg-hover:#666;--text:#fff;}
*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0;background:var(--ui-bg);font-family:Arial,sans-serif;color:var(--text);display:flex;flex-direction:column;overflow:hidden;padding-top:env(safe-area-inset-top);}
.topbar{position:sticky;top:0;z-index:1000;background:var(--bar-bg);padding:8px 12px;display:flex;gap:10px;align-items:center;justify-content:space-between;}
.back{color:#fff;text-decoration:none;font-weight:900;opacity:.9;}
.back:hover{opacity:1;}
.controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
.issue-label{font-size:13px;opacity:.85;margin-right:2px;}
select{background:#222;color:#fff;border:1px solid #333;border-radius:10px;padding:7px 10px;font-size:14px;}
.btn{padding:7px 10px;cursor:pointer;border:none;background:var(--btn-bg);color:var(--text);border-radius:10px;font-size:14px;line-height:1;}
.btn:hover{background:var(--btn-bg-hover);}
.btn.ghost{background:transparent;border:1px solid #3a3a3a;}
.counter{min-width:72px;text-align:center;font-variant-numeric:tabular-nums;}
.book-container{flex:1;display:flex;justify-content:center;align-items:center;perspective:2000px;overflow:hidden;padding:6px 10px;}
.book{position:relative;width:min(92vw,980px);height:min(84vh,780px);}
.page{position:absolute;width:100%;height:100%;transform-origin:left;transition:transform .8s cubic-bezier(.25,.8,.25,1);box-shadow:0 10px 30px rgba(0,0,0,.6);background:#fff;border-radius:10px;overflow:hidden;backface-visibility:hidden;}
.page img{width:100%;height:100%;object-fit:contain;background:#fff;}
.page.flipped{transform:rotateY(-180deg);}
.hint{background:var(--bar-bg);text-align:center;padding:8px 10px;font-size:13px;opacity:.9;}
.modal{border:none;border-radius:14px;max-width:720px;width:92vw;background:#161616;color:var(--text);box-shadow:0 20px 80px rgba(0,0,0,.7);}
.modal::backdrop{background:rgba(0,0,0,.6);}
.modalhead{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 8px;border-bottom:1px solid #2c2c2c;}
.modaltitle{font-size:16px;font-weight:900;}
.modalbody{padding:14px;color:#d7d7d7;line-height:1.45;}
.modalbody code{background:#222;padding:2px 6px;border-radius:6px;}
@media (max-width:520px){.book{height:74vh;}.back{display:none;}}