.reader-shell {
   height: 100vh;
   background: #1a1a1a;
   display: flex;
   flex-direction: column;
}
.flipbook-stage {
   flex: 1 1 auto;
   min-height: 0;   /* the actual fix — same trap as the editor canvas */
   min-width: 0;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: auto;  /* auto, not hidden — lets zoomed-in content be panned/scrolled */
   padding: 24px;
   box-sizing: border-box;
}
.flipbook-zoom-wrapper {
   transition: transform 0.2s ease;
   transform-origin: center center;
   flex-shrink: 0;
}
.flip-page {
   position: relative;
   overflow: hidden;
   background: #fff;
}
.page-content {
   position: absolute;
   top: 0;
   left: 0;
   transform-origin: top left;
   /* transform: scale(...) set dynamically by JS */
}
.node {
   position: absolute;
}
.reader-toolbar {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   background: #262626;
   color: #eee;
   padding: 10px 16px;
   flex-wrap: wrap;
}
.reader-toolbar button {
   background: transparent;
   border: none;
   color: #eee;
   font-size: 20px;
   cursor: pointer;
   padding: 6px 10px;
   border-radius: 6px;
}
.reader-toolbar button:hover { background: rgba(255,255,255,0.1); }
.reader-toolbar button:disabled { opacity: 0.3; cursor: default; }
#zoomLevel { font-size: 13px; min-width: 42px; text-align: center; }
#pageIndicator { font-size: 14px; margin: 0 8px; }

/* Mobile: bigger touch targets, tighter padding */
@media (max-width: 640px) {
   .flipbook-stage { padding: 8px; }
   .reader-toolbar { gap: 6px; padding: 8px; }
   .reader-toolbar button { font-size: 22px; padding: 8px; }
}