/* Basic reset */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:#0b0d10; color:#e9eef5; }
a { color:#86c1ff; }

#app { display: flex; flex-direction: column; min-height: 100vh; }

.topbar, .bottombar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; background: #10141a; border-bottom: 1px solid #1d2430;
}
.bottombar { border-top: 1px solid #1d2430; border-bottom: none; margin-top: auto; color:#a9b3c2; }

.brand { font-weight: 700; letter-spacing: .2px; }
.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
button {
  background: #1e2633; color:#e9eef5; border:1px solid #2b3647; padding:8px 12px; border-radius:8px; cursor:pointer;
}
button:hover { background:#253146; }
.divider { width:1px; height:20px; background:#2b3647; display:inline-block; margin:0 4px; }

main { display:flex; justify-content:center; align-items:center; padding:20px; }

.book {
  position: relative; width: min(1200px, 96vw);
  aspect-ratio: 16/9; background: #0f1319;
  border-radius: 14px; border:1px solid #1d2430; overflow:hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.page {
  position:absolute; top:0; bottom:0; width:50%;
  background-position:center; background-repeat:no-repeat;
  /* default to contain to prevent cropping */
  background-size: contain;
  transition: transform .6s ease, box-shadow .6s ease, filter .6s ease;
}
.page.fill { background-size: cover; }
.compact .page { width:100%; }
#pageLeft { left:0; border-right:1px solid #1b2230; }
#pageRight { right:0; border-left:1px solid #1b2230; }
.compact #pageLeft { display:none; }
.compact #pageRight { border-left:none; width:100%; }

/* Tap zones */
.book::before, .book::after {
  content:''; position:absolute; top:0; bottom:0; width:50%;
}
.book::before { left:0; }
.book::after { right:0; }

/* Flip animation */
.flip-left { transform: rotateY(-10deg); box-shadow: inset -20px 0 40px rgba(0,0,0,.35); }
.flip-right { transform: rotateY(10deg); box-shadow: inset 20px 0 40px rgba(0,0,0,.35); }

/* Page edge vignette */
#pageLeft { filter: drop-shadow(6px 0 12px rgba(0,0,0,.25)); }
#pageRight { filter: drop-shadow(-6px 0 12px rgba(0,0,0,.25)); }

.pdf-hint { opacity:.8; font-size:.9rem; }

@media (max-width: 700px) {
  .book { aspect-ratio: 4/5; }
  .book:not(.spread) { /* force single on phones unless spread explicitly toggled */
    aspect-ratio: 4/5;
  }
}