:root{--bg:#07101f;--panel:#101a2e;--ink:#eef4ff;--muted:#9aa8bf;--accent:#33478c;--page-ratio:1;--turn:760ms}
*{box-sizing:border-box}html,body{height:100%;margin:0}body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:radial-gradient(circle at 50% 22%,#24334d 0,#111b2e 34%,#070d18 72%,#040811 100%);color:var(--ink);overflow:hidden}
button,a{-webkit-tap-highlight-color:transparent}.app-shell{height:100%;display:grid;grid-template-rows:72px 1fr 70px}.topbar,.controls{display:flex;align-items:center;justify-content:space-between;padding:10px 24px;position:relative;z-index:30;background:linear-gradient(180deg,rgba(5,10,18,.92),rgba(5,10,18,.55));backdrop-filter:blur(12px)}
.brand{height:50px;max-width:280px;display:flex;align-items:center}.brand img{width:100%;height:100%;object-fit:contain;object-position:left center;filter:drop-shadow(0 4px 12px rgba(0,0,0,.28))}.top-actions{display:flex;gap:8px}.icon-btn,.ctrl{border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.07);color:#fff;text-decoration:none;border-radius:12px;min-width:42px;height:42px;display:inline-grid;place-items:center;font-size:19px;cursor:pointer;transition:.2s}.icon-btn:hover,.ctrl:hover{background:rgba(255,255,255,.15);transform:translateY(-1px)}
.viewer{position:relative;display:grid;place-items:center;min-height:0;perspective:2600px;overflow:hidden}.ambient-shadow{position:absolute;width:min(76vw,1060px);height:56px;bottom:5.5%;border-radius:50%;background:rgba(0,0,0,.55);filter:blur(23px);transform:scaleX(.9)}
.book{position:relative;height:min(75vh,760px);aspect-ratio:2/1;transform-style:preserve-3d;transition:transform 520ms cubic-bezier(.2,.8,.2,1);touch-action:none;user-select:none;-webkit-user-select:none;filter:drop-shadow(0 28px 36px rgba(0,0,0,.36))}
.sheet{position:absolute;right:0;top:0;width:50%;height:100%;transform-style:preserve-3d;transform-origin:left center;transition:transform var(--turn) cubic-bezier(.17,.67,.3,1),filter var(--turn);will-change:transform;cursor:grab}.sheet.dragging{transition:none;cursor:grabbing}.sheet.flipped{transform:rotateY(-180deg)}
.page{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;background:#fff;border-radius:0 5px 5px 0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.page img{width:100%;height:100%;display:block;object-fit:cover;pointer-events:none}.page.back{transform:rotateY(180deg);border-radius:5px 0 0 5px}.page::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.68}.page.front::after{background:linear-gradient(90deg,rgba(0,0,0,.15),transparent 7%,transparent 76%,rgba(0,0,0,.06))}.page.back::after{background:linear-gradient(270deg,rgba(0,0,0,.15),transparent 7%,transparent 76%,rgba(0,0,0,.05))}
.sheet::after{content:"";position:absolute;top:0;bottom:0;left:-1px;width:12px;background:linear-gradient(90deg,rgba(0,0,0,.34),rgba(0,0,0,.04),transparent);transform:translateZ(1px);opacity:.22;pointer-events:none}.sheet.turning .page::before{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(100deg,rgba(0,0,0,.02) 35%,rgba(0,0,0,.25) 49%,rgba(255,255,255,.18) 53%,transparent 66%);mix-blend-mode:multiply;pointer-events:none}
.nav-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:20;width:54px;height:80px;border:0;border-radius:18px;background:rgba(6,11,20,.52);color:white;font:300 54px/1 Arial;cursor:pointer;opacity:.65;transition:.2s;backdrop-filter:blur(8px)}.nav-arrow:hover{opacity:1;background:rgba(6,11,20,.82)}.nav-arrow.prev{left:18px}.nav-arrow.next{right:18px}.nav-arrow:disabled{opacity:.12;cursor:default}
.drag-hint{position:absolute;bottom:10px;padding:8px 13px;border-radius:999px;background:rgba(0,0,0,.28);color:rgba(255,255,255,.64);font-size:12px;letter-spacing:.2px;transition:opacity .5s}.controls{justify-content:center;gap:10px;background:linear-gradient(0deg,rgba(5,10,18,.95),rgba(5,10,18,.58))}.ctrl{padding:0 16px;font-size:13px;min-width:auto}.page-status{min-width:190px;text-align:center;color:#dce6f7;font-size:13px}.page-status .dot{padding:0 8px;color:#62718a}
@media(max-width:900px){.app-shell{grid-template-rows:58px 1fr 58px}.topbar{padding:6px 12px}.brand{height:40px;max-width:190px}.book{height:auto;width:min(94vw,760px);aspect-ratio:2/1}.nav-arrow{width:44px;height:64px;font-size:44px}.nav-arrow.prev{left:6px}.nav-arrow.next{right:6px}.controls{padding:7px 8px;gap:6px}.ctrl{padding:0 10px;height:38px}.page-status{min-width:118px}.drag-hint{display:none}}
@media(max-width:560px){.book{width:98vw}.top-actions .icon-btn{min-width:38px;height:38px}.controls #firstBtn,.controls #lastBtn{display:none}.page-status{font-size:12px}.ctrl{font-size:0}.ctrl#prevSmallBtn::after{content:"‹ Prev";font-size:12px}.ctrl#nextSmallBtn::after{content:"Next ›";font-size:12px}}
@media(prefers-reduced-motion:reduce){:root{--turn:160ms}.book,.sheet,.icon-btn,.ctrl{transition-duration:160ms}}