:root{
  --ink:#0f274f;
  --ink-2:#18396c;
  --gold:#c8a86a;
  --paper:#fbfaf7;
  --paper-2:#f3f1ec;
  --shadow:0 18px 50px rgba(12,26,48,.20);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#1b2330;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.7), rgba(255,255,255,0) 36%),
    linear-gradient(180deg,#eef3f8 0%,#e8edf5 45%,#e5ebf1 100%);
}
.viewer-app{min-height:100vh; display:flex; flex-direction:column;}
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 18px;
  background:rgba(10,24,48,.78);
  backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.brand-dot{width:10px;height:10px;border-radius:999px;background:linear-gradient(135deg,var(--gold),#e7d2a6);box-shadow:0 0 0 6px rgba(200,168,106,.12)}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:12px}
.topbar-right{margin-left:auto}
.icon-btn,.menu-toggle{
  appearance:none;border:0;cursor:pointer;
  background:rgba(255,255,255,.08); color:#fff;
  height:42px; min-width:42px; padding:0 14px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  transition:transform .2s ease, background .2s ease, opacity .2s ease;
}
.icon-btn:hover,.menu-toggle:hover{transform:translateY(-1px); background:rgba(255,255,255,.14)}
.icon-btn[disabled]{opacity:.45; cursor:not-allowed; transform:none}
.download-btn{
  text-decoration:none; color:#fff; background:linear-gradient(135deg,var(--ink-2),var(--ink));
  border:1px solid rgba(255,255,255,.12);
}
.stage-wrap{position:relative; flex:1; display:flex; align-items:center; justify-content:center; padding:26px; overflow:hidden;}
.stage-wrap:before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 35%, rgba(255,255,255,.55), rgba(255,255,255,0) 28%);
  pointer-events:none;
}
.book-shell{position:relative; width:min(1240px,100%); display:flex; align-items:center; justify-content:center;}
.nav-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:8;
  width:58px; height:58px; border-radius:999px; border:0; cursor:pointer;
  background:rgba(255,255,255,.78); color:var(--ink); box-shadow:0 12px 34px rgba(17,37,63,.18);
  font-size:28px; display:flex; align-items:center; justify-content:center;
}
.nav-prev{left:max(8px, calc(50% - 560px));}
.nav-next{right:max(8px, calc(50% - 560px));}
.book-perspective{perspective:2600px; width:min(940px,100%); position:relative;}
.book-frame{
  position:relative; width:100%; aspect-ratio:1.45/1;
  filter:drop-shadow(0 35px 40px rgba(16,31,52,.18));
}
.book-surface{
  position:absolute; inset:0; border-radius:22px; overflow:hidden;
  background:linear-gradient(180deg,#fcfcfa,#f4f2ee);
  box-shadow:var(--shadow);
}
.book-surface.spread{display:grid; grid-template-columns:1fr 1fr;}
.book-surface.cover{display:block; max-width:48%; margin:0 auto; border-radius:14px;}
.page-pane{position:relative; overflow:hidden; background:#fff;}
.page-pane.left{border-right:1px solid rgba(23,39,74,.12)}
.page-pane img,.book-surface.cover img,.flip-sheet img{width:100%;height:100%;display:block;object-fit:contain;background:#fff}
.page-pane.right:before{
  content:""; position:absolute; inset:0 auto 0 -28px; width:56px;
  background:linear-gradient(90deg, rgba(0,0,0,.12), rgba(0,0,0,0)); opacity:.14; pointer-events:none;
}
.page-pane.left:after{
  content:""; position:absolute; inset:0 -18px 0 auto; width:36px;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(0,0,0,.07)); opacity:.16; pointer-events:none;
}
.spine-glow{
  position:absolute; top:4%; bottom:4%; left:50%; width:58px; transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(30,52,90,.16), rgba(30,52,90,0) 66%); pointer-events:none;
}
.page-caption{
  position:absolute; left:50%; bottom:-44px; transform:translateX(-50%);
  background:rgba(255,255,255,.8); color:#334; border:1px solid rgba(14,39,79,.08);
  padding:8px 12px; border-radius:999px; font-size:13px; backdrop-filter:blur(12px);
}
.flip-layer{position:absolute; inset:0; pointer-events:none; z-index:6;}
.flip-sheet{
  position:absolute; top:0; bottom:0; width:50%; background:#fff; overflow:hidden;
  transform-style:preserve-3d; backface-visibility:hidden;
  box-shadow:0 10px 35px rgba(16,31,52,.18);
}
.flip-sheet.next{right:0; transform-origin:left center;}
.flip-sheet.prev{left:0; transform-origin:right center;}
.flip-sheet .backface{
  position:absolute; inset:0; transform:rotateY(180deg); backface-visibility:hidden; background:#fff;
}
.flip-next{animation:flipNext .82s cubic-bezier(.22,.73,.13,1) forwards}
.flip-prev{animation:flipPrev .82s cubic-bezier(.22,.73,.13,1) forwards}
@keyframes flipNext{
  0%{transform:rotateY(0deg)}
  100%{transform:rotateY(-180deg)}
}
@keyframes flipPrev{
  0%{transform:rotateY(0deg)}
  100%{transform:rotateY(180deg)}
}
.menu-panel{
  position:fixed; top:68px; right:18px; z-index:30; width:min(360px, calc(100vw - 24px));
  background:rgba(255,255,255,.92); backdrop-filter:blur(16px);
  border:1px solid rgba(10,24,48,.08); border-radius:22px; box-shadow:0 24px 50px rgba(18,34,54,.16);
  padding:18px; display:none;
}
.menu-panel.open{display:block}
.menu-title{margin:0 0 12px; font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
.page-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; max-height:min(58vh, 520px); overflow:auto; padding-right:4px}
.page-chip{
  border:1px solid rgba(16,39,78,.08); border-radius:14px; background:#fff; cursor:pointer;
  padding:10px 0; text-align:center; color:var(--ink); font-weight:600; transition:.18s ease;
}
.page-chip:hover,.page-chip.active{background:linear-gradient(180deg,#f7f9fc,#eef3f8); border-color:rgba(16,39,78,.18); transform:translateY(-1px)}
.menu-actions{display:flex; gap:10px; margin-top:14px}
.menu-actions a,.menu-actions button{flex:1}
.mobile-hint{display:none}
@media (max-width: 980px){
  .stage-wrap{padding:18px 12px 28px}
  .nav-prev{left:8px}.nav-next{right:8px}
  .book-frame{aspect-ratio:.78/1}
  .book-surface.cover{max-width:72%}
  .book-surface.spread{display:block}
  .page-pane.left{display:none}
  .page-pane.right{border-right:0}
  .spine-glow{display:none}
  .page-caption{bottom:-40px; font-size:12px}
  .flip-sheet{width:100%;}
  .flip-sheet.next,.flip-sheet.prev{left:0; right:auto; transform-origin:center center;}
  @keyframes flipNext{0%{transform:translateX(0) rotateY(0deg)}100%{transform:translateX(-6%) rotateY(-180deg)}}
  @keyframes flipPrev{0%{transform:translateX(0) rotateY(0deg)}100%{transform:translateX(6%) rotateY(180deg)}}
}
@media (max-width: 640px){
  .topbar{padding:12px}
  .menu-toggle span,.download-btn span,.hide-mobile{display:none}
  .icon-btn,.menu-toggle{padding:0; min-width:44px}
  .book-shell{width:100%}
  .nav-arrow{width:50px;height:50px;font-size:24px}
  .page-grid{grid-template-columns:repeat(3,1fr)}
  .mobile-hint{display:block; position:fixed; left:50%; bottom:12px; transform:translateX(-50%); z-index:12; background:rgba(10,24,48,.75); color:#fff; padding:8px 12px; border-radius:999px; font-size:12px; backdrop-filter:blur(12px)}
}