:root {
  --toolbar-h: 54px;
  --status-h: 30px;
  --panel-w: 280px;
  --page-w: 388px;
  --page-h: 560px;
  --ink: #e8eef1;
  --muted: #aebcc3;
  --ui: #26353d;
  --ui-2: #314650;
  --ui-3: #1d292f;
  --accent: #7fa5ba;
  --paper: #fff;
  --shadow: rgba(0,0,0,.35);
}
* { box-sizing: border-box; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; font-family: Inter, Segoe UI, Arial, sans-serif; background:#1b252a; color:var(--ink); }
button, input { font: inherit; }
button { color: inherit; }
.app { width:100%; height:100%; display:flex; flex-direction:column; background:#1b252a; }
.toolbar { height:var(--toolbar-h); flex:0 0 var(--toolbar-h); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; padding: 0 60px 0 10px; background:linear-gradient(#31444e,#26373f); border-bottom:1px solid rgba(255,255,255,.08); box-shadow:0 2px 12px rgba(0,0,0,.28); z-index:30; }
.toolbar__group { display:flex; align-items:center; gap:3px; min-width:0; }
.toolbar__brand { justify-self:start; }
.toolbar__nav { justify-self:center; }
.toolbar__tools { justify-self:end; }
.doc-title { display:flex; align-items:baseline; gap:6px; margin-left:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.doc-title strong { letter-spacing:.08em; font-size:14px; }
.doc-title span { color:var(--muted); font-size:13px; }
.icon-btn, .zoom-label, .panel-close { border:0; background:transparent; cursor:pointer; border-radius:5px; display:inline-flex; align-items:center; justify-content:center; height:34px; min-width:34px; padding:0 7px; transition:background .15s ease, opacity .15s ease; text-decoration:none; }
.icon-btn:hover, .zoom-label:hover, .panel-close:hover { background:rgba(255,255,255,.10); }
.icon-btn:active, .zoom-label:active { background:rgba(255,255,255,.16); }
.icon-btn:disabled { opacity:.32; cursor:default; }
.icon-btn svg { width:20px; height:20px; fill:currentColor; }
.zoom-label { min-width:49px; font-size:12px; color:var(--muted); }
.toolbar-sep { width:1px; height:22px; background:rgba(255,255,255,.12); margin:0 4px; }
.page-box { height:32px; display:flex; align-items:center; gap:5px; padding:0 7px; border-radius:5px; background:rgba(0,0,0,.18); color:var(--muted); font-size:12px; }
.page-box input { width:38px; border:0; outline:0; background:transparent; color:#fff; text-align:right; font-size:13px; padding:2px 1px; }
.workspace { flex:1 1 auto; min-height:0; display:flex; position:relative; }
.side-panel { width:0; flex:0 0 0; overflow:hidden; background:#202e35; border-right:1px solid rgba(255,255,255,.08); transition:width .22s ease, flex-basis .22s ease; z-index:20; }
.side-panel.open { width:var(--panel-w); flex-basis:var(--panel-w); }
.side-panel__head { height:45px; display:flex; align-items:center; justify-content:space-between; padding:0 6px 0 10px; border-bottom:1px solid rgba(255,255,255,.08); }
.side-tabs { display:flex; gap:4px; }
.side-tab { border:0; background:transparent; color:var(--muted); cursor:pointer; padding:8px 9px; border-radius:4px; font-size:12px; }
.side-tab.active { color:#fff; background:rgba(255,255,255,.10); }
.panel-close { font-size:24px; color:var(--muted); min-width:32px; }
.panel-view { display:none; height:calc(100% - 45px); overflow:auto; }
.panel-view.active { display:block; }
.thumb-grid { padding:12px; display:grid; grid-template-columns:1fr 1fr; gap:12px 10px; }
.thumb { cursor:pointer; border:1px solid rgba(255,255,255,.10); background:#172127; border-radius:5px; padding:5px; transition:border-color .15s, background .15s; }
.thumb:hover { border-color:rgba(255,255,255,.35); }
.thumb.active { border-color:var(--accent); background:rgba(127,165,186,.16); }
.thumb img { display:block; width:100%; aspect-ratio:540/780; object-fit:cover; background:white; }
.thumb .n { text-align:center; color:var(--muted); font-size:11px; padding-top:5px; }
.search-box { padding:12px; display:grid; grid-template-columns:1fr auto; gap:6px; }
.search-box input { min-width:0; height:34px; border:1px solid rgba(255,255,255,.14); border-radius:5px; background:#152026; color:#fff; padding:0 9px; outline:none; }
.search-box input:focus { border-color:var(--accent); }
.search-box button { border:0; border-radius:5px; padding:0 10px; background:var(--accent); color:#142129; cursor:pointer; font-weight:600; }
.search-summary { min-height:30px; padding:0 12px 8px; color:var(--muted); font-size:12px; }
.search-results { padding:0 8px 14px; }
.search-result { display:block; width:100%; text-align:left; border:0; border-radius:5px; background:transparent; color:#dfe8ec; cursor:pointer; padding:9px; margin-bottom:3px; }
.search-result:hover, .search-result.active { background:rgba(255,255,255,.08); }
.search-result .r-page { color:#fff; font-weight:600; font-size:12px; margin-bottom:3px; }
.search-result .r-snippet { color:var(--muted); font-size:11px; line-height:1.35; }
.search-result mark { background:#d9bf61; color:#1b1b1b; padding:0 1px; }
.book-viewport { flex:1 1 auto; min-width:0; min-height:0; position:relative; overflow:auto; scrollbar-width:none; -ms-overflow-style:none; display:block; padding:0; background:radial-gradient(circle at 50% 43%, #53626a 0, #3f4c53 34%, #2d383e 72%, #252f34 100%); }
.book-viewport::-webkit-scrollbar { width:0; height:0; display:none; }

/*
 * v6 zoom architecture:
 * The PageFlip engine is now allowed to resize itself inside a real-sized book
 * frame.  Zoom changes the frame dimensions, then the engine recalculates its
 * page geometry.  This keeps rendering, hit-testing and page-folding in the
 * same coordinate system.
 */
.book-stage {
  width:max(100%, calc((var(--page-w) * 2) + 112px));
  height:max(100%, calc(var(--page-h) + 52px));
  min-width:100%;
  min-height:100%;
  display:grid;
  place-items:center;
  position:relative;
}
.book-shell {
  flex:0 0 auto;
  width:calc(var(--page-w) * 2);
  height:var(--page-h);
  position:relative;
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.24));
}
.book {
  position:relative;
  width:100%;
  height:100%;
  perspective:3200px;
  transform-style:preserve-3d;
}

/* v6: PageFlip fills the resized frame; the engine owns all internal transforms. */
.pageflip-host {
  display:none;
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:10;
  background:transparent;
}
.book.pageflip-ready .pageflip-host { display:block; }
.book.pageflip-ready .static-page,
.book.pageflip-ready .flipper,
.book.pageflip-ready .spine { visibility:hidden; pointer-events:none; }
.pf-page {
  width:388px;
  height:560px;
  overflow:hidden;
  background:#fff;
  box-shadow:none;
}
.pf-page img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}
.pf-page.pf-blank {
  background:#fff;
}
/* Keep the third-party stage visually neutral; its own dynamic fold shadow is retained. */
.pageflip-host canvas { display:block; }
.static-page, .flip-face { position:absolute; top:0; width:var(--page-w); height:var(--page-h); background:#fff; overflow:hidden; }
.static-left { left:0; border-radius:2px 0 0 2px; }
.static-right { left:var(--page-w); border-radius:0 2px 2px 0; }
.page-image { width:100%; height:100%; object-fit:cover; display:block; user-select:none; -webkit-user-drag:none; }
.blank-page { width:100%; height:100%; background:linear-gradient(90deg,#eef0f1,#fff); }
.static-right .blank-page { background:linear-gradient(90deg,#fff,#eef0f1); }
.spine { pointer-events:none; position:absolute; z-index:16; left:calc(var(--page-w) - 5px); top:0; width:10px; height:100%; background:linear-gradient(90deg,transparent,rgba(0,0,0,.07),rgba(255,255,255,.10),rgba(0,0,0,.05),transparent); opacity:.58; }
.flipper { display:none; position:absolute; top:0; width:var(--page-w); height:var(--page-h); z-index:12; transform-style:preserve-3d; transition:transform .64s cubic-bezier(.28,.62,.25,1); will-change:transform; }
.flipper.active { display:block; }
.flipper.next { left:var(--page-w); transform-origin:left center; transform:rotateY(0deg); }
.flipper.next.turn { transform:rotateY(-180deg); }
.flipper.prev { left:0; transform-origin:right center; transform:rotateY(0deg); }
.flipper.prev.turn { transform:rotateY(180deg); }
.flip-face { left:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.flip-front { transform:rotateY(0deg); }
.flip-back { transform:rotateY(180deg); }
.flipper.next .flip-front { box-shadow:-8px 0 18px rgba(0,0,0,.10); }
.flipper.next .flip-back { box-shadow:8px 0 18px rgba(0,0,0,.08); }
.flipper.prev .flip-front { box-shadow:8px 0 18px rgba(0,0,0,.10); }
.flipper.prev .flip-back { box-shadow:-8px 0 18px rgba(0,0,0,.08); }
.edge-nav { position:fixed; top:50%; transform:translateY(-50%); width:44px; height:80px; border:0; color:rgba(255,255,255,.72); background:rgba(0,0,0,.12); cursor:pointer; border-radius:7px; z-index:10; opacity:.28; transition:opacity .15s, background .15s; }
.edge-nav:hover { opacity:.9; background:rgba(0,0,0,.26); }
.edge-nav span { font-size:38px; line-height:1; font-weight:200; }
.edge-prev { left:calc(var(--panel-w) + 10px); }
.side-panel:not(.open) ~ .book-viewport .edge-prev { left:10px; }
.edge-next { right:10px; }
.loading { position:absolute; z-index:25; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:12px; color:#d8e1e5; font-size:13px; }
.loading.hidden { display:none; }
.spinner { width:32px; height:32px; border:3px solid rgba(255,255,255,.2); border-top-color:#fff; border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.statusbar { height:var(--status-h); flex:0 0 var(--status-h); background:#1e2a30; border-top:1px solid rgba(255,255,255,.07); color:var(--muted); display:flex; align-items:center; justify-content:space-between; padding:0 11px; font-size:11px; z-index:30; }
.status-hint { opacity:.75; }
.toast { position:fixed; left:50%; bottom:48px; transform:translateX(-50%) translateY(10px); background:rgba(12,18,21,.92); color:#fff; border:1px solid rgba(255,255,255,.14); border-radius:6px; padding:9px 12px; font-size:12px; z-index:100; opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; max-width:min(520px,80vw); text-align:center; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
body.dragging .book-viewport { cursor:grabbing; }
body.dragging * { user-select:none !important; }

@media (max-width: 900px) {
  .toolbar { grid-template-columns:1fr auto; }
  .toolbar__brand .doc-title { display:none; }
  .toolbar__tools { grid-column:1 / -1; position:absolute; right:6px; top:54px; background:rgba(30,43,49,.88); border-radius:0 0 6px 6px; padding:3px; opacity:.10; transition:opacity .15s; }
  .toolbar__tools:hover, .toolbar__tools:focus-within { opacity:1; }
  .book-viewport { padding:24px 18px; }
}
@media (max-width: 620px) {
  :root { --panel-w: min(82vw, 290px); }
  .toolbar { gap:2px; padding:0 4px; }
  .toolbar__brand { gap:0; }
  .toolbar__nav { justify-self:end; }
  #firstBtn, #lastBtn { display:none; }
  .status-hint { display:none; }
  .side-panel.open { position:absolute; left:0; top:0; bottom:0; box-shadow:10px 0 24px rgba(0,0,0,.35); }
  .edge-nav { display:none; }
}
@media print { .toolbar,.side-panel,.statusbar,.edge-nav,.toast { display:none !important; } }