:root {
  --bg: #110914;
  --panel: #24112b;
  --panel2: #35163d;
  --accent: #d3a5d2;
  --text: #ffffff;
  --muted: #cbbfd0;
  --shadow: 0 24px 70px rgba(0,0,0,.55);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: radial-gradient(circle at 50% 15%, #3b2144 0, #1c1021 38%, var(--bg) 100%);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  overflow: hidden;
}
button, input, a { font: inherit; }
.topbar, .bottombar {
  position: fixed;
  left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  background: rgba(19, 8, 23, .94);
  backdrop-filter: blur(12px);
  border-color: rgba(255,255,255,.1);
}
.topbar {
  top: 0;
  height: 72px;
  padding: 0 18px;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.brand { display:flex; flex-direction:column; line-height:1; }
.brand-main { font-weight:800; letter-spacing:.08em; font-size:1.2rem; }
.brand-sub { margin-top:6px; color:var(--accent); font-family:Georgia,serif; font-style:italic; }
.toolbar { display:flex; align-items:center; gap:8px; }
.icon-btn, .footer-btn, .nav-btn {
  border: 0;
  color: white;
  background: rgba(255,255,255,.09);
  cursor: pointer;
  border-radius: 10px;
  transition: .2s ease;
}
.icon-btn { width: 38px; height: 38px; font-size: 1.25rem; }
.icon-btn:hover, .footer-btn:hover, .nav-btn:hover { background: rgba(255,255,255,.18); transform: translateY(-1px); }
.zoom-label { min-width: 48px; text-align:center; color:var(--muted); font-size:.85rem; }
.download-btn {
  color: #24112b;
  background: var(--accent);
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
}
.viewer-shell {
  position: fixed;
  top: 72px; bottom: 58px; left: 0; right: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.book-viewport {
  width: calc(100% - 120px);
  height: calc(100% - 28px);
  overflow: auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 14px;
  scroll-behavior: smooth;
}
.book {
  display:flex;
  align-items:center;
  justify-content:center;
  transform-origin:center center;
  transition: transform .2s ease;
  filter: drop-shadow(var(--shadow));
}
.page {
  position: relative;
  height: min(78vh, 760px);
  aspect-ratio: 612 / 792;
  background:#fff;
  overflow:hidden;
}
.page img { width:100%; height:100%; display:block; object-fit:contain; background:#fff; }
.page-left { border-radius: 7px 0 0 7px; box-shadow: inset -12px 0 22px -18px rgba(0,0,0,.8); }
.page-right { border-radius: 0 7px 7px 0; box-shadow: inset 12px 0 22px -18px rgba(0,0,0,.8); }
.page.single { border-radius:7px; }
.page.empty { visibility:hidden; }
.page.turning-next { animation: turnNext .32s ease; transform-origin:left center; }
.page.turning-prev { animation: turnPrev .32s ease; transform-origin:right center; }
@keyframes turnNext { 0%{transform:perspective(1200px) rotateY(0)} 50%{transform:perspective(1200px) rotateY(-13deg)} 100%{transform:perspective(1200px) rotateY(0)} }
@keyframes turnPrev { 0%{transform:perspective(1200px) rotateY(0)} 50%{transform:perspective(1200px) rotateY(13deg)} 100%{transform:perspective(1200px) rotateY(0)} }
.nav-btn {
  position:absolute;
  z-index:10;
  width:50px; height:74px;
  font-size:3rem;
  line-height:1;
  background:rgba(0,0,0,.32);
}
.nav-left { left:12px; }
.nav-right { right:12px; }
.nav-btn:disabled { opacity:.25; cursor:not-allowed; transform:none; }
.bottombar {
  bottom: 0;
  height: 58px;
  justify-content:center;
  gap:8px;
  border-top:1px solid rgba(255,255,255,.1);
}
.footer-btn { width:36px; height:34px; }
.page-status { display:flex; align-items:center; gap:7px; color:var(--muted); }
.page-status input {
  width:58px; height:34px; border:1px solid rgba(255,255,255,.18);
  border-radius:8px; background:#fff; color:#1d1021; text-align:center; font-weight:700;
}
.hint { position:absolute; right:18px; color:#98899e; font-size:.8rem; }
.thumb-panel {
  position:fixed; top:72px; bottom:58px; left:0; width:300px;
  z-index:30; background:rgba(25,11,30,.98); border-right:1px solid rgba(255,255,255,.1);
  transform:translateX(-100%); transition:transform .25s ease; overflow:hidden;
}
.thumb-panel.open { transform:translateX(0); }
.thumb-header { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 12px 0 16px; border-bottom:1px solid rgba(255,255,255,.1); }
.thumb-grid { height:calc(100% - 52px); overflow:auto; padding:14px; display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.thumb { border:2px solid transparent; border-radius:7px; overflow:hidden; background:#fff; cursor:pointer; position:relative; }
.thumb:hover, .thumb.active { border-color:var(--accent); }
.thumb img { width:100%; display:block; }
.thumb span { position:absolute; right:4px; bottom:4px; background:rgba(0,0,0,.7); color:white; border-radius:4px; padding:2px 5px; font-size:.7rem; }
@media (max-width: 900px) {
  .brand-sub, .zoom-label, #zoomIn, #zoomOut, .hint { display:none; }
  .download-btn { padding:9px 10px; font-size:.8rem; }
  .topbar { height:62px; padding:0 10px; }
  .viewer-shell { top:62px; bottom:54px; }
  .thumb-panel { top:62px; bottom:54px; width:min(84vw,320px); }
  .book-viewport { width:100%; height:100%; padding:12px 50px; }
  .page { height:min(76vh, 700px); }
  .page-left { display:none; }
  .page-right { border-radius:7px; }
  .nav-btn { width:40px; height:64px; font-size:2.5rem; }
  .nav-left { left:5px; } .nav-right { right:5px; }
  .bottombar { height:54px; }
}
@media (max-width: 520px) {
  .brand-main { font-size:.95rem; }
  .brand-sub { display:none; }
  .toolbar { gap:4px; }
  .icon-btn { width:34px; height:34px; }
  #fullscreenBtn { display:none; }
  .page { height:auto; width:min(84vw, 430px); }
  .book-viewport { padding:10px 42px; }
}