*{box-sizing:border-box}
:root{
  --bg:#0d1015;
  --panel:#171c24;
  --panel2:#202631;
  --ink:#eef2f7;
  --muted:#94a0ae;
  --accent:#ff5d39;
  --page-ratio: 0.706;
  --zoom:1;
  --turn:760ms;
}
html,body{height:100%;margin:0;overflow:hidden}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 22% 16%,rgba(52,67,91,.45),transparent 32%),
    radial-gradient(circle at 80% 80%,rgba(67,34,37,.35),transparent 30%),
    linear-gradient(150deg,#111720,#080a0e 62%);
}
button,input{font:inherit}
button{color:inherit}
.app{height:100%;display:flex;position:relative}
.viewer{min-width:0;flex:1;height:100%;display:grid;grid-template-rows:58px 1fr 60px}
.topbar{
  display:flex;align-items:center;justify-content:space-between;padding:8px 16px;
  background:rgba(9,12,16,.55);border-bottom:1px solid rgba(255,255,255,.075);
  backdrop-filter:blur(14px);z-index:30
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-mark{
  width:36px;height:36px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(145deg,#ff7757,#df3b1c);font-weight:900;box-shadow:0 8px 24px rgba(255,76,41,.2)
}
.brand-title{font-size:14px;font-weight:800;letter-spacing:.01em}
.brand-sub{font-size:11px;color:var(--muted);margin-top:1px}
.top-actions{display:flex;gap:8px}
.soft-btn,.icon-btn,.tool{
  border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.055);
  border-radius:10px;cursor:pointer;transition:.18s ease
}
.soft-btn{padding:8px 11px;font-size:12px}
.soft-btn:hover,.icon-btn:hover,.tool:hover{background:rgba(255,255,255,.11);transform:translateY(-1px)}
.soft-btn.active{background:rgba(255,93,57,.17);border-color:rgba(255,93,57,.55)}

/* Stage: perspective must be on the direct parent of the 3D book for preserve-3d to work */
.stage{
  position:relative;min-height:0;display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding:16px 72px
}

/* Wrapper only for sizing/zoom — NO filter here (filter breaks preserve-3d on children) */
.book-wrap{
  height:min(78vh,calc(100vw * 1.18));
  max-height:calc(100vh - 150px);
  aspect-ratio:var(--page-ratio);
  position:relative;
  transform:scale(var(--zoom));
  transform-origin:center center;
  transition:transform .22s ease;
  perspective:2200px;
}
.book{width:100%;height:100%;position:relative;transform-style:preserve-3d}
.page{
  position:absolute;inset:0;
  transform-origin:left center;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  transition:transform var(--turn) cubic-bezier(.22,.7,.2,1),filter var(--turn) ease;
  background:#fff;border-radius:2px 8px 8px 2px;
  box-shadow:2px 0 18px rgba(0,0,0,.28),inset 12px 0 18px rgba(0,0,0,.025);
  will-change:transform;
  user-select:none;
  overflow:hidden
}
.page img{width:100%;height:100%;display:block;object-fit:cover;background:white;pointer-events:none}
.page::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,rgba(0,0,0,.38),rgba(255,255,255,.05) 20%,transparent 55%);
  transition:opacity var(--turn) ease
}
.page.turned{transform:rotateY(-180deg);pointer-events:none}
.page.turning::after{opacity:.72}

/* Bottom shadow via a sibling — safe to use filter here since it's not an ancestor of .book */
.page-shadow{
  position:absolute;left:4%;right:4%;bottom:-18px;height:32px;border-radius:50%;
  background:rgba(0,0,0,.5);filter:blur(14px);z-index:-1;pointer-events:none
}

/* Navigation arrows — clearly visible on dark stage */
.edge-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:52px;height:96px;border:0;border-radius:18px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  color:white;font-size:44px;font-weight:200;
  cursor:pointer;opacity:.85;transition:.2s;z-index:20;
  backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center
}
.edge-nav:hover{opacity:1;background:rgba(255,255,255,.24);transform:translateY(-50%) scale(1.06)}
.edge-nav.left{left:14px}
.edge-nav.right{right:14px}

.toolbar{
  z-index:30;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;
  background:rgba(9,12,16,.72);border-top:1px solid rgba(255,255,255,.075);backdrop-filter:blur(14px)
}
.tool{width:38px;height:38px;display:grid;place-items:center;font-size:20px}
.divider{height:24px;width:1px;background:rgba(255,255,255,.12);margin:0 3px}
.pager{display:flex;align-items:center;gap:6px;padding:0 8px;color:var(--muted);font-size:12px}
.pager input{
  width:45px;height:34px;border-radius:8px;border:1px solid rgba(255,255,255,.12);
  background:#10151c;color:#fff;text-align:center;outline:none
}
.pager input:focus{border-color:rgba(255,93,57,.7);box-shadow:0 0 0 3px rgba(255,93,57,.1)}
.zoom-label{min-width:48px;text-align:center;font-size:11px;color:var(--muted)}
.thumbs{
  width:0;overflow:hidden;transition:width .24s ease;background:rgba(15,19,26,.94);
  border-right:1px solid rgba(255,255,255,.08);backdrop-filter:blur(14px);z-index:50
}
.app.thumbs-open .thumbs{width:236px}
.thumbs-head{height:58px;padding:0 12px 0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.08)}
.icon-btn{width:34px;height:34px;font-size:23px}
.thumb-list{height:calc(100% - 58px);overflow:auto;padding:12px}
.thumb-card{
  border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:8px;margin-bottom:10px;
  background:rgba(255,255,255,.035);cursor:pointer;transition:.18s
}
.thumb-card:hover{background:rgba(255,255,255,.075)}
.thumb-card.active{border-color:rgba(255,93,57,.7);box-shadow:0 0 0 2px rgba(255,93,57,.08)}
.thumb-card img{width:100%;aspect-ratio:var(--page-ratio);object-fit:cover;background:#fff;border-radius:7px;display:block}
.thumb-num{font-size:11px;color:var(--muted);margin-top:6px;text-align:center}

@media(max-width:760px){
  .viewer{grid-template-rows:50px 1fr 54px}
  .topbar{padding:6px 10px}.brand-sub{display:none}.soft-btn{padding:7px 9px}
  .stage{padding:10px 52px}
  .book-wrap{height:auto;width:min(80vw,390px);max-height:calc(100vh - 120px)}
  .edge-nav{width:40px;height:76px;font-size:36px;border-radius:14px}
  .edge-nav.left{left:6px}.edge-nav.right{right:6px}
  .toolbar{gap:3px;padding:6px}
  .tool{width:34px;height:34px;font-size:18px}
  .divider{display:none}.zoom-label{display:none}
  .app.thumbs-open .thumbs{position:absolute;left:0;top:0;bottom:0;width:min(78vw,280px)}
}
@media(max-width:470px){
  #firstBtn,#lastBtn,#resetZoomBtn{display:none}
  .pager{padding:0 3px}.pager input{width:38px}
  .top-actions #autoBtn{display:none}
}

.book.instant .page{transition:none!important}