/* Full-screen book view for a generated sheet. */
body.book-open { overflow: hidden; }
.book-modal { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; color: #fff; background: radial-gradient(1200px 700px at 50% 10%, #3b5fb8 0%, #243a78 45%, #141c3d 100%); font-family: 'Nunito', system-ui, sans-serif; animation: book-in .3s ease both; }
.book-modal[hidden] { display: none; }
.book-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 22px; }
.book-title { font-size: 1.15rem; font-weight: 800; letter-spacing: .2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.book-bar-actions { display: flex; gap: 10px; flex-shrink: 0; }
.book-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: #fff; font: inherit; font-weight: 800; font-size: .95rem; cursor: pointer; transition: background .2s, transform .2s; }
.book-btn svg { width: 19px; height: 19px; stroke: currentColor; }
.book-btn:hover { background: rgba(255,255,255,.22); transform: translateY(-1px); }
.book-btn.primary { background: linear-gradient(135deg, #ff5fa0, #e0197a); border-color: transparent; box-shadow: 0 6px 18px rgba(224,25,122,.4); }
.book-btn.primary:hover { background: linear-gradient(135deg, #ff77b0, #ee2a89); }
.book-btn:focus-visible, .book-nav:focus-visible { outline: 3px solid #ffd54a; outline-offset: 3px; }

.book-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 6px 18px; }
.book { --ratio: .7071; position: relative; display: flex; align-items: stretch; height: min(100%, 880px); max-width: 100%; perspective: 2200px; filter: drop-shadow(0 28px 40px rgba(0,0,0,.45)); }
.book[data-shape="letter"] { --ratio: .7727; }
.book[data-landscape="1"] { --ratio: 1.4142; }
.book-page { position: relative; height: 100%; aspect-ratio: var(--ratio); max-width: 46vw; background: #fff; overflow: hidden; }
.book.single .book-page.right { max-width: 92vw; border-radius: 8px; }
.book:not(.single) .book-page.left { border-radius: 8px 0 0 8px; background: linear-gradient(90deg, #fff 88%, #e9e6f2 100%); }
.book:not(.single) .book-page.right { border-radius: 0 8px 8px 0; background: linear-gradient(270deg, #fff 88%, #e9e6f2 100%); }
.book-page.blank { background: #f3f1f8; }
.book-page[hidden] { display: none; }
.book-spine { width: 3px; background: linear-gradient(180deg, #cfc9e3, #aaa3c7); flex: none; }
.book.single .book-spine { display: none; }
.book.turn-next .book-page.right { transform-origin: left center; animation: turn-next .5s cubic-bezier(.3,.7,.3,1) both; }
.book.turn-prev .book-page.left { transform-origin: right center; animation: turn-prev .5s cubic-bezier(.3,.7,.3,1) both; }
.book.single.turn-next .book-page.right, .book.single.turn-prev .book-page.right { animation: turn-fade .35s ease both; }
.sheet { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.sheet img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; }
.sheet pre { margin: 0; width: 100%; height: 100%; padding: 7% 8% 9%; box-sizing: border-box; font: 500 clamp(11px, 1.55vh, 15px)/1.65 'Courier New', ui-monospace, monospace; color: #1c2447; white-space: pre-wrap; overflow-wrap: anywhere; overflow: hidden; text-align: left; }
.sheet-number { position: absolute; bottom: 2.4%; left: 0; right: 0; text-align: center; font-size: 12px; font-weight: 800; color: #9a97b5; }
.book-nav { flex: none; width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.14); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0 0 4px; transition: background .2s, transform .2s, opacity .2s; }
.book-nav:hover:not(:disabled) { background: rgba(255,255,255,.28); transform: scale(1.08); }
.book-nav:disabled { opacity: .25; cursor: default; }
.book-foot { display: flex; justify-content: center; align-items: center; gap: 22px; padding: 12px 18px 18px; font-weight: 700; font-size: .95rem; flex-wrap: wrap; }
.book-hint { opacity: .65; font-weight: 600; font-size: .85rem; }

@keyframes book-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes turn-next { from { transform: rotateY(-80deg); opacity: .4; } to { transform: rotateY(0); opacity: 1; } }
@keyframes turn-prev { from { transform: rotateY(80deg); opacity: .4; } to { transform: rotateY(0); opacity: 1; } }
@keyframes turn-fade { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

@media (max-width: 899px) {
    .book-stage { gap: 6px; padding: 4px 6px; }
    .book-nav { position: absolute; z-index: 2; width: 44px; height: 44px; top: 50%; margin-top: -22px; background: rgba(20,28,61,.55); }
    .book-nav.prev { left: 10px; } .book-nav.next { right: 10px; }
    .book-bar { padding: 10px 12px; } .book-hint { display: none; }
    .book-btn { padding: 9px 13px; font-size: .88rem; }
    .book-title { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .book-modal, .book .book-page { animation: none !important; } }
@media print { .book-modal { display: none !important; } }