:root{
  --navy:#103b5a; --sky:#dceef8; --paper:#fff; --ink:#17364b; --accent:#f6c84b;
  --top:68px; --bottom:76px; --gap:14px; --radius:18px;
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:linear-gradient(#cfe5f3,#edf7fc);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
button{font:inherit}
.app{width:100%;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden}
.topbar{min-height:var(--top);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left));background:var(--navy);color:white;z-index:30;box-shadow:0 5px 18px #0003}
.brand{min-width:0}.brand-title{font-size:20px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand-sub{font-size:12px;opacity:.8}
.top-actions{display:flex;gap:7px;align-items:center;flex-wrap:nowrap}.btn,.navbtn{border:0;border-radius:999px;background:white;color:var(--navy);font-weight:800;padding:9px 13px;cursor:pointer;box-shadow:0 3px 10px #0002}.btn.small{padding:8px 11px;min-width:38px}.navbtn:disabled{opacity:.4;cursor:not-allowed}
.main{min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px;padding:8px 10px 10px;overflow:hidden}
.meta-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:28px;padding:0 4px}.page-title{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.page-status{font-size:13px;white-space:nowrap;color:#45677c}
.stage{min-height:0;position:relative;display:flex;align-items:center;justify-content:center;perspective:2200px;overflow:hidden;border-radius:24px;background:#ffffff66;box-shadow:inset 0 0 0 1px #fff8}
.book{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;transform-style:preserve-3d}
.spread{height:100%;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:center;justify-items:center;position:relative}
.slot{height:100%;width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.slot.blank{background:transparent}
.page{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:12px;box-shadow:0 16px 44px #17364b33;background:white;transform:scale(var(--zoom,1));transform-origin:center center;transition:transform .18s ease}
.page-scroll{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.page-scroll.zoomed{align-items:flex-start;justify-content:flex-start}
.page-scroll.zoomed .page{max-width:none;max-height:none}
.spine{position:absolute;top:4%;bottom:4%;left:50%;width:2px;background:linear-gradient(transparent,#29495f44,transparent);z-index:5;pointer-events:none}
.edge{position:absolute;top:0;bottom:0;width:16%;border:0;background:transparent;z-index:12}.edge-prev{left:0}.edge-next{right:0}
.navrow{display:flex;justify-content:center;gap:12px;min-height:44px}
.thumbbar{min-height:64px;padding:7px 8px max(7px,env(safe-area-inset-bottom));background:#ffffffd9;border-top:1px solid #0001;backdrop-filter:blur(10px);overflow:hidden}.thumbs{height:56px;display:flex;gap:7px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding:2px}.thumb{height:50px;min-width:40px;border:0;padding:2px;border-radius:7px;background:white;box-shadow:0 2px 8px #0002}.thumb img{height:46px;width:auto;display:block;border-radius:5px}.thumb.active{outline:3px solid #2185d0}
.swipe-hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);padding:8px 12px;border-radius:999px;background:#103b5ae8;color:white;font-size:12px;z-index:15;opacity:0;pointer-events:none;transition:opacity .2s}.swipe-hint.show{opacity:1}
.turn-sheet{position:absolute;z-index:25;transform-style:preserve-3d;pointer-events:none}.turn-sheet .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;align-items:center;justify-content:center;background:white;border-radius:12px;overflow:hidden;box-shadow:0 16px 44px #0004}.turn-sheet .face.back{transform:rotateY(180deg)}.turn-sheet img{width:100%;height:100%;object-fit:contain}
.turn-sheet.next{transform-origin:left center;animation:turnNext .72s cubic-bezier(.25,.75,.25,1) forwards}.turn-sheet.prev{transform-origin:right center;animation:turnPrev .72s cubic-bezier(.25,.75,.25,1) forwards}
@keyframes turnNext{0%{transform:rotateY(0deg);filter:brightness(1)}45%{filter:brightness(.86)}100%{transform:rotateY(-180deg);filter:brightness(1)}}
@keyframes turnPrev{0%{transform:rotateY(0deg);filter:brightness(1)}45%{filter:brightness(.86)}100%{transform:rotateY(180deg);filter:brightness(1)}}
.modal{position:fixed;inset:0;z-index:100;background:#0008;display:flex;align-items:center;justify-content:center;padding:20px}.modal[hidden]{display:none}.modal-card{width:min(430px,100%);background:white;border-radius:22px;padding:22px;box-shadow:0 25px 70px #0006;text-align:center}.modal-card h2{margin:0 0 8px}.modal-card p{margin:0 0 12px;color:#557}.qr-img{width:240px;max-width:80%;height:auto;border-radius:12px;background:#fff}.url-text{margin:12px 0;padding:10px;border-radius:10px;background:#f3f7fa;word-break:break-all;font-size:12px}.modal-actions{display:flex;justify-content:center;gap:10px}

/* PHONE / SMALL TABLET: exactly one page, fills width without horizontal overflow */
@media (max-width:899px){
  :root{--top:64px;--bottom:66px}
  .topbar{min-height:64px;padding-top:max(8px,env(safe-area-inset-top));gap:6px}.brand-title{font-size:16px}.brand-sub{display:none}.top-actions{gap:4px}.btn{padding:8px 9px;font-size:12px}.btn.small{min-width:32px;padding:8px 8px}
  .main{padding:6px 6px 8px;gap:5px}.meta-row{font-size:12px}.page-title{max-width:72vw}
  .stage{border-radius:14px;align-items:flex-start}.book{align-items:flex-start}.spread{display:block;height:100%;width:100%}.slot{height:100%;width:100%;align-items:flex-start}.slot.mobile-hidden{display:none}
  .page-scroll{align-items:flex-start;justify-content:center;overflow-y:auto;overflow-x:hidden;padding:2px 0}
  .page{width:min(100%,760px);height:auto;max-width:100%;max-height:none;border-radius:8px;box-shadow:0 8px 25px #17364b2b}
  .spine{display:none}.edge{width:13%}
  .navrow{min-height:40px}.navbtn{padding:8px 15px;font-size:13px}
  .thumbbar{min-height:58px}.thumbs{height:50px}.thumb{height:45px}.thumb img{height:41px}
  .turn-sheet{left:0!important;right:0!important;top:0!important;width:100%!important;height:auto!important;aspect-ratio:4/5;max-height:100%!important}.turn-sheet .face{align-items:flex-start}.turn-sheet img{width:100%;height:auto;object-fit:contain}
}

/* short landscape phones: use fit-height to keep full page visible */
@media (max-width:899px) and (orientation:landscape) and (max-height:520px){
  .topbar{min-height:48px;padding:5px 10px}.brand-sub{display:none}.btn{padding:6px 8px}.main{padding:3px 5px}.meta-row{display:none}.navrow{min-height:34px}.navbtn{padding:6px 12px}.thumbbar{display:none}.page-scroll{align-items:center;justify-content:center;overflow:hidden}.page{height:100%;width:auto;max-height:100%;max-width:100%}
}