:root{
  --bg-1:#eef2f7;
  --bg-2:#e6ebf2;
  --ink:#14325c;
  --gold:#c7a55b;
  --panel:rgba(255,255,255,.76);
  --line:rgba(20,50,92,.12);
  --shadow:0 28px 60px rgba(10,26,46,.18);
}
*{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:var(--ink);
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.86), transparent 32%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2));
  overflow:hidden;
}
body::before{
  content:"";
  position:fixed; inset:0;
  background:
    linear-gradient(90deg, rgba(20,50,92,.03), rgba(255,255,255,0) 22%, rgba(20,50,92,.03) 50%, rgba(255,255,255,0) 78%, rgba(20,50,92,.03)),
    radial-gradient(circle at center, rgba(199,165,91,.08), transparent 38%);
  pointer-events:none;
}
.book-app{height:100%; position:relative}
.menu-toggle,.action-btn,.nav-btn,.menu-close,.menu-item{border:none}
.menu-toggle{
  position:fixed; top:18px; left:18px; z-index:30; width:48px; height:48px; border-radius:14px;
  background:var(--panel); backdrop-filter: blur(14px); box-shadow:0 10px 25px rgba(15,35,65,.10); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.menu-toggle span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px}
.top-actions{position:fixed; top:18px; right:18px; z-index:30}
.action-btn{
  display:inline-flex; align-items:center; gap:8px; padding:13px 18px; border-radius:999px; text-decoration:none;
  color:#fff; background:linear-gradient(135deg, #183966, #284d81); box-shadow:0 14px 30px rgba(21,49,90,.22); font-size:14px;
}
.stage{height:100%; display:flex; align-items:center; justify-content:center; gap:24px; padding:72px 72px 30px}
.book-shell{position:relative; width:min(1220px, 100%); display:flex; justify-content:center; align-items:center}
.book-shadow{position:absolute; inset:auto 10% 2%; height:24px; border-radius:50%; filter:blur(18px); background:rgba(18,40,70,.18)}
.book-frame{position:relative; width:min(1080px, 100%); height:min(78vh, 800px)}
.book-spine{position:absolute; left:50%; top:1%; bottom:1%; width:22px; transform:translateX(-50%); border-radius:12px;
 background:linear-gradient(90deg, rgba(11,28,51,.06), rgba(255,255,255,.8), rgba(11,28,51,.12)); box-shadow: inset 0 0 12px rgba(0,0,0,.08); z-index:1; opacity:0; transition:opacity .35s ease}
.view{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .34s ease, transform .34s ease}
.view.active{opacity:1; pointer-events:auto}
.cover-view{transform:scale(.985)}
.cover-view.active{transform:scale(1)}
.spread-view{gap:0; transform:translateY(12px)}
.spread-view.active{transform:translateY(0)}
.sheet{background:#fff; box-shadow:var(--shadow); overflow:hidden; position:relative}
.sheet img{display:block; width:100%; height:100%; object-fit:contain; background:#fff}
.single-sheet{width:min(48vw, 620px); height:100%; border-radius:8px 16px 16px 8px; transform-origin:left center}
.left-sheet,.right-sheet{width:50%; height:100%}
.left-sheet{border-radius:12px 0 0 12px}
.right-sheet{border-radius:0 12px 12px 0}
.left-sheet::after,.right-sheet::before{content:""; position:absolute; top:0; bottom:0; width:34px; pointer-events:none}
.left-sheet::after{right:0; background:linear-gradient(90deg, rgba(255,255,255,0), rgba(15,35,65,.08))}
.right-sheet::before{left:0; background:linear-gradient(90deg, rgba(15,35,65,.08), rgba(255,255,255,0))}
.page-counter{position:absolute; left:50%; bottom:-44px; transform:translateX(-50%); z-index:4; padding:10px 16px; border-radius:999px;
 background:rgba(255,255,255,.72); backdrop-filter:blur(12px); box-shadow:0 10px 20px rgba(10,26,46,.10); font-size:14px}
.nav-btn{
  width:58px; height:58px; border-radius:50%; background:rgba(255,255,255,.84); backdrop-filter:blur(10px); cursor:pointer;
  box-shadow:0 12px 26px rgba(16,36,67,.12); color:var(--ink); font-size:34px; line-height:1;
}
.book-menu{position:fixed; top:0; left:0; bottom:0; width:min(360px, 86vw); background:rgba(247,249,252,.92); backdrop-filter:blur(18px);
 box-shadow:16px 0 40px rgba(15,35,65,.12); z-index:40; transform:translateX(-102%); transition:transform .3s ease; padding:18px 16px 18px}
.book-menu.open{transform:translateX(0)}
.menu-backdrop{position:fixed; inset:0; background:rgba(10,26,46,.16); opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:39}
.menu-backdrop.show{opacity:1; pointer-events:auto}
.menu-head{display:flex; align-items:center; justify-content:space-between; padding:6px 4px 16px; border-bottom:1px solid var(--line); margin-bottom:14px}
.menu-close{width:40px; height:40px; border-radius:12px; background:#fff; font-size:26px; cursor:pointer; color:var(--ink)}
.menu-list{display:grid; gap:10px; max-height:calc(100vh - 110px); overflow:auto; padding-right:4px}
.menu-item{display:flex; align-items:center; gap:12px; width:100%; background:#fff; border-radius:18px; padding:10px; cursor:pointer; box-shadow:0 8px 20px rgba(15,35,65,.06)}
.menu-item img{width:66px; height:88px; object-fit:cover; border-radius:10px; border:1px solid rgba(20,50,92,.08)}
.menu-item span{font-size:14px; color:var(--ink); text-align:left}
.menu-item.active{outline:2px solid rgba(199,165,91,.65)}
.is-flipping-next .single-sheet{animation:coverFlipNext .58s cubic-bezier(.2,.7,.2,1)}
.is-flipping-prev .single-sheet{animation:coverFlipPrev .58s cubic-bezier(.2,.7,.2,1)}
.is-flipping-next .spread-view.active,.is-flipping-prev .spread-view.active{animation:spreadPulse .46s ease}
@keyframes coverFlipNext{0%{transform:perspective(1800px) rotateY(0) scale(1)}40%{transform:perspective(1800px) rotateY(-18deg) scale(.99)}100%{transform:perspective(1800px) rotateY(-88deg) scale(.97); opacity:.2}}
@keyframes coverFlipPrev{0%{transform:perspective(1800px) rotateY(-88deg) scale(.97); opacity:.2}60%{transform:perspective(1800px) rotateY(-18deg) scale(.99)}100%{transform:perspective(1800px) rotateY(0) scale(1); opacity:1}}
@keyframes spreadPulse{0%{transform:translateY(0) scale(.992)}100%{transform:translateY(0) scale(1)}}
@media (max-width: 991px){
  body{overflow:auto}
  .stage{padding:84px 16px 26px; gap:10px}
  .book-frame{height:auto; min-height:72vh}
  .book-spine{display:none}
  .spread-view{flex-direction:column; gap:12px}
  .left-sheet,.right-sheet,.single-sheet{width:min(92vw, 560px); height:auto; aspect-ratio:3/4.2; border-radius:14px}
  .sheet img{object-fit:contain}
  .nav-btn{position:fixed; bottom:18px; width:54px; height:54px; z-index:25}
  .nav-prev{left:18px}
  .nav-next{right:18px}
  .page-counter{bottom:-22px}
}