*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#17233d;background:#f4f7fb}body{overflow-x:hidden}.hidden{display:none!important}.topbar{height:80px;background:#fff;border-bottom:1px solid #e4e9f1;display:flex;align-items:center;justify-content:space-between;padding:0 34px;position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#17233d;min-width:0}.brand-logo{width:178px;height:52px;object-fit:contain;object-position:left center;display:block}.brand-text{display:none}.brand strong{display:block;font-size:16px;line-height:1.15}.brand small{display:block;color:#738099;font-size:12px;margin-top:3px}.top-actions{display:flex;gap:12px}.btn{border:1px solid #c9d2df;background:#fff;color:#17233d;border-radius:11px;padding:12px 18px;font-weight:700;cursor:pointer;font-size:14px;transition:.2s}.btn:hover{transform:translateY(-1px);box-shadow:0 5px 15px #17233d12}.btn:disabled{opacity:.6;cursor:wait}.btn-primary{background:#7354f6;border-color:#7354f6;color:#fff}.btn-outline{background:#fff}.btn-large{padding:15px 24px;font-size:16px}.btn-small{padding:10px 14px;font-size:13px}.full{width:100%}.home-view{min-height:calc(100vh - 80px);display:grid;place-items:center;padding:40px 20px}.hero-card{width:min(720px,100%);background:#fff;border:1px solid #dfe6ef;border-radius:24px;padding:65px 40px;text-align:center;box-shadow:0 20px 60px #263b5b12}.eyebrow{font-size:12px;letter-spacing:2px;color:#866df7;font-weight:800;margin-bottom:16px}.hero-card h1{font-size:clamp(34px,5vw,58px);line-height:1.03;letter-spacing:-2px;margin:0 0 22px}.hero-card p{max-width:560px;margin:0 auto 28px;color:#66748b;font-size:17px;line-height:1.65}.limits,.muted,.legal-note{color:#7a879b;font-size:13px}.limits{margin-top:22px}.reader-view{padding:28px 22px 30px}.reader-heading{width:min(1100px,100%);margin:0 auto 20px;display:flex;justify-content:space-between;align-items:end;gap:20px}.reader-heading h2{margin:0;font-size:clamp(20px,3vw,30px);letter-spacing:-.8px;word-break:break-word}.reader-status{color:#738099;font-size:13px;white-space:nowrap}.book-stage{position:relative;width:100%;min-height:540px;background:#edf2f7;border:1px solid #dce4ee;border-radius:18px;display:flex;justify-content:center;align-items:center;padding:38px 70px;overflow:hidden;--book-zoom:1}.book-container{width:min(100%,1000px);height:clamp(380px,78vh,760px);display:flex;justify-content:center;align-items:center;transform:scale(var(--book-zoom));transform-origin:center;will-change:transform}.book-container .stf__parent{max-width:100%;max-height:100%}.pdf-page{background:#fff;box-shadow:0 8px 25px #17233d20;overflow:hidden;width:100%;height:100%}.pdf-page canvas{display:block;width:100%;height:100%;object-fit:contain}.edge-nav{position:absolute;z-index:5;width:46px;height:46px;border-radius:50%;border:1px solid #d4deea;background:#fff;color:#52627a;font-size:34px;line-height:35px;cursor:pointer;box-shadow:0 4px 12px #17233d0c}.edge-nav.left{left:14px}.edge-nav.right{right:14px}.controls{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:18px auto 0}.control-btn{width:38px;height:38px;background:#fff;border:1px solid #c9d2df;border-radius:9px;font-size:20px;cursor:pointer}.controls span{font-size:13px;color:#66748b;min-width:95px;text-align:center}.powered{text-align:center;color:#8290a4;font-size:12px;margin-top:18px}.powered strong{color:#52627a}.modal{position:fixed;inset:0;background:#17233d66;backdrop-filter:blur(5px);z-index:50;display:grid;place-items:center;padding:20px}.modal-card{position:relative;background:#fff;border-radius:20px;width:min(500px,100%);padding:32px;box-shadow:0 25px 80px #17233d35}.modal-card.compact{width:min(480px,100%)}.modal-card h2{font-size:28px;letter-spacing:-1px;margin:0 0 8px}.modal-close{position:absolute;right:18px;top:14px;border:0;background:none;font-size:28px;color:#718096;cursor:pointer}.field-label{display:block;font-size:13px;font-weight:700;margin:22px 0 8px}.text-input{width:100%;height:45px;border:1px solid #ccd6e3;border-radius:10px;padding:0 13px;font-size:14px;color:#17233d;outline:none}.text-input:focus{border-color:#7354f6;box-shadow:0 0 0 3px #7354f620}.dropzone{margin:18px 0;border:1.5px dashed #bdc9d8;border-radius:14px;min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;cursor:pointer;color:#52627a}.dropzone.dragover,.dropzone.selected{border-color:#7354f6;background:#f7f5ff}.upload-icon{font-size:30px;color:#7354f6}.dropzone small{font-size:12px;color:#8793a6}.progress-wrap{height:7px;background:#edf0f5;border-radius:8px;overflow:hidden;margin:15px 0}.progress-bar{height:100%;width:0;background:#7354f6;transition:width .2s}.upload-error{background:#fff0f0;color:#b42318;border-radius:10px;padding:11px 13px;font-size:13px;margin:12px 0}.legal-note{line-height:1.5;margin:15px 0 0;font-size:11px}.share-row{display:flex;gap:8px;margin:22px 0 14px}.share-row .text-input{min-width:0}.share-buttons{display:grid;gap:10px}.mini-brand{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:24px;color:#7a879b;font-size:12px}.mini-brand img{width:110px;height:34px;object-fit:contain}.mini-brand span{display:none}.qr-card{text-align:center}.qr-card #qrcode{display:flex;justify-content:center;margin:20px 0}.qr-card #qrcode img,.qr-card #qrcode canvas{border:10px solid #fff;box-shadow:0 5px 25px #17233d15}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);opacity:0;background:#17233d;color:#fff;border-radius:10px;padding:12px 18px;font-size:13px;z-index:100;transition:.25s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:700px){
  .topbar{height:68px;padding:0 12px;gap:8px}.brand{flex:1;min-width:0}.brand-logo{width:145px;height:42px}.top-actions{gap:6px;flex-shrink:0}.top-actions .btn{padding:9px 10px;font-size:12px}.top-actions #fullscreenBtn{display:none}
  .home-view{min-height:calc(100svh - 68px);padding:18px 12px;align-items:start;padding-top:12vh}.hero-card{width:100%;padding:34px 18px;border-radius:18px}.eyebrow{font-size:10px;letter-spacing:1.5px}.hero-card h1{font-size:clamp(30px,8.5vw,42px);line-height:1.08;letter-spacing:-1px;overflow-wrap:anywhere}.hero-card h1 br{display:none}.hero-card p{font-size:15px;line-height:1.5}.btn-large{font-size:15px;padding:13px 18px}
  .reader-view{padding:16px 8px 24px}.reader-heading{align-items:flex-start;flex-direction:column;gap:6px;margin-bottom:10px}.reader-heading h2{font-size:19px;line-height:1.2;max-width:100%;overflow-wrap:anywhere}.reader-status{font-size:12px}.book-stage{min-height:calc(100svh - 260px);height:calc(100svh - 260px);max-height:620px;padding:12px 32px;border-radius:12px}.book-container{height:100%;width:100%;max-height:none;transform:scale(var(--book-zoom));}.edge-nav{width:32px;height:32px;font-size:25px;line-height:24px}.edge-nav.left{left:4px}.edge-nav.right{right:4px}.controls{gap:6px;margin-top:12px}.controls .btn{padding:8px 9px;font-size:11px}.control-btn{width:34px;height:34px}.controls span{min-width:78px;font-size:12px}.powered{font-size:11px;margin-top:13px}.modal{padding:12px}.modal-card{padding:25px 17px;border-radius:17px;max-height:calc(100svh - 24px);overflow:auto}.modal-card h2{font-size:23px}.share-row{display:grid;grid-template-columns:minmax(0,1fr) auto}.share-row .btn{padding-left:13px;padding-right:13px}.qr-card #qrcode{margin:16px 0}.qr-card #qrcode img,.qr-card #qrcode canvas{max-width:100%;height:auto;border-width:8px}
}
@media(min-width:701px){.book-container{min-height:420px}}


/* Stage 2.1: shared-view and mobile controls */
.viewer-fullscreen{position:absolute;right:14px;top:14px;z-index:8;display:none;padding:9px 12px;font-size:12px}
.shared-mode .controls .btn:not(#downloadBtn){display:none}
.shared-mode .controls .control-btn{display:none}
.shared-mode .controls span{display:none}
.shared-mode .viewer-fullscreen{display:block}
.app-fullscreen{background:#edf2f7}
.app-fullscreen .topbar,.app-fullscreen .reader-heading,.app-fullscreen .controls,.app-fullscreen .powered{display:none!important}
.app-fullscreen .reader-view{padding:0!important}
.app-fullscreen .book-stage{position:fixed;inset:0;z-index:9999;border:0;border-radius:0;height:100svh;max-height:none;min-height:0;padding:20px 42px;background:#edf2f7}
.app-fullscreen .viewer-fullscreen{display:block}

@media(max-width:700px){
  .topbar{padding:0 10px;height:64px}
  .brand-logo{width:150px;height:44px}
  .top-actions{gap:5px}
  .top-actions .btn{padding:8px 9px;font-size:11px;white-space:nowrap}
  .shared-mode .top-actions #openUploadBtn{display:none}
  .shared-mode .top-actions #fullscreenBtn{display:inline-flex}
  .viewer-fullscreen{right:8px;top:8px;padding:8px 10px;font-size:11px}
  .book-stage{min-height:calc(100svh - 225px);height:calc(100svh - 225px);padding:12px 30px}
  .shared-mode .reader-view{padding-top:12px}
  .shared-mode .book-stage{height:calc(100svh - 105px);min-height:calc(100svh - 105px)}
  .shared-mode .downloadBtn{display:none}
  .app-fullscreen .book-stage{padding:12px 30px}
}

/* Stage 2.2: robust mobile layout patch */
html, body { width:100%; max-width:100%; overflow-x:hidden; }
main { width:100%; max-width:100%; overflow-x:hidden; }
@media (max-width:700px) {
  .topbar {
    width:100%; max-width:100vw; height:auto; min-height:64px;
    padding:10px 12px; display:flex; align-items:center;
    gap:8px; overflow:hidden;
  }
  .brand { flex:1 1 auto; min-width:0; width:auto; overflow:hidden; }
  .brand-text { display:none !important; }
  .brand-logo { flex:0 1 auto; width:112px; max-width:100%; height:40px; object-fit:contain; object-position:left center; }
  .top-actions { flex:0 0 auto; display:flex; align-items:center; gap:5px; }
  .top-actions .btn { padding:8px 9px; min-height:38px; font-size:12px; line-height:1.1; white-space:nowrap; }
  .top-actions #openUploadBtn { max-width:78px; }
  .top-actions #fullscreenBtn { max-width:84px; }
  .home-view { width:100%; max-width:100vw; min-height:calc(100svh - 64px); padding:28px 12px 36px; display:flex; align-items:flex-start; justify-content:center; }
  .hero-card { width:100%; max-width:520px; min-width:0; padding:30px 16px; overflow:hidden; }
  .hero-card h1 { max-width:100%; font-size:clamp(28px,8vw,36px); line-height:1.1; letter-spacing:-.8px; overflow-wrap:break-word; word-break:normal; }
  .hero-card p { max-width:100%; font-size:15px; overflow-wrap:break-word; }
  .reader-view { width:100%; max-width:100vw; overflow:hidden; }
  .reader-heading, .reader-heading > div { min-width:0; max-width:100%; }
  .reader-heading h2 { max-width:100%; overflow-wrap:anywhere; }
  .book-stage { width:100%; max-width:100%; }
}


/* Stage 2.3: owner-only management controls
   The uploader retains Share, QR Code, and Open another PDF.
   Public recipients see the reading experience without management controls. */
.shared-mode .controls #shareBtn,
.shared-mode .controls #qrBtn,
.shared-mode .controls #newPdfBtn { display:none !important; }
.shared-mode .top-actions #openUploadBtn { display:none !important; }
.owner-mode .controls #shareBtn,
.owner-mode .controls #qrBtn,
.owner-mode .controls #newPdfBtn { display:inline-flex; }
@media (max-width:700px) {
  .owner-mode .top-actions #openUploadBtn { display:inline-flex !important; }
}

/* Stage 2.4: final polish - loading states, responsive fullscreen and generic upload UX */
.viewer-loading {
  position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; color:#52627a; background:linear-gradient(135deg,#edf2f7,#f7f9fc); text-align:center;
  transition:opacity .25s ease, visibility .25s ease;
}
.viewer-loading.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.viewer-loading strong { font-size:15px; color:#17233d; }
.viewer-loading small { font-size:12px; color:#7a879b; }
.loading-book { width:82px; height:64px; position:relative; perspective:500px; }
.loading-book span { position:absolute; top:5px; width:38px; height:54px; background:#fff; border:1px solid #dce4ee; box-shadow:0 8px 18px #17233d12; }
.loading-book span:first-child { left:3px; transform-origin:right center; animation:pagePulse 1.2s ease-in-out infinite; }
.loading-book span:last-child { right:3px; transform-origin:left center; animation:pagePulse 1.2s ease-in-out .12s infinite; }
.loading-lines { display:flex; gap:5px; }
.loading-lines i { width:6px; height:6px; border-radius:50%; background:#7354f6; animation:loadingDot 1s ease-in-out infinite; }
.loading-lines i:nth-child(2){animation-delay:.12s}.loading-lines i:nth-child(3){animation-delay:.24s}
@keyframes pagePulse { 0%,100%{transform:rotateY(0deg)} 50%{transform:rotateY(-18deg)} }
@keyframes loadingDot { 0%,80%,100%{opacity:.3;transform:translateY(0)} 40%{opacity:1;transform:translateY(-4px)} }
.shared-mode .top-actions #openUploadBtn { display:none !important; }
.shared-mode .top-actions #fullscreenBtn { display:inline-flex; }
.fullscreen-active #fullscreenBtn::after { content:''; }
.app-fullscreen #fullscreenBtn { position:relative; z-index:10001; }
@media (max-width:700px) {
  .top-actions #fullscreenBtn { display:none; }
  .shared-mode .top-actions #fullscreenBtn { display:inline-flex; }
  .app-fullscreen .topbar { display:flex !important; position:fixed; top:0; left:0; right:0; height:58px; background:transparent; border:0; pointer-events:none; }
  .app-fullscreen .topbar .brand { display:none; }
  .app-fullscreen .topbar .top-actions { margin-left:auto; pointer-events:auto; }
  .app-fullscreen .topbar #fullscreenBtn { display:inline-flex !important; background:#fff; color:#17233d; box-shadow:0 4px 16px #17233d22; }
  .app-fullscreen .book-stage { padding:58px 34px 18px; }
  .app-fullscreen .edge-nav { top:50%; transform:translateY(-50%); }
}
.dropzone small { transition: opacity .18s ease, transform .18s ease; }
.dropzone small.word-fade { opacity:0; transform:translateY(3px); }

/* Stage 2.1: instant first-page preview while the full PDF loads */
.preview-layer {
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#edf2f7;
  padding:28px;
}
.preview-layer > img {
  display:block;
  max-width:min(900px, 100%);
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  background:#fff;
  box-shadow:0 8px 25px #17233d20;
}
.preview-loading {
  position:absolute;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  width:min(390px, calc(100% - 32px));
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px 10px;
  padding:11px 15px;
  border:1px solid #dce4ee;
  border-radius:12px;
  background:#ffffffed;
  box-shadow:0 8px 25px #17233d15;
  text-align:center;
}
.preview-loading strong { font-size:13px; color:#17233d; }
.preview-loading small { width:100%; font-size:11px; color:#7a879b; }
.preview-spinner {
  width:15px;
  height:15px;
  border:2px solid #d9d2ff;
  border-top-color:#7354f6;
  border-radius:50%;
  animation:previewSpin .75s linear infinite;
}
@keyframes previewSpin { to { transform:rotate(360deg); } }
@media(max-width:700px) {
  .preview-layer { padding:14px 34px; }
  .preview-loading { bottom:14px; padding:9px 10px; }
  .preview-loading small { font-size:10px; }
}


/* Stage 2.2: progressive page rendering */
.pdf-page-placeholder {
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#f7f9fc,#edf2f7);
  color:#8793a6;
}
.page-placeholder-label {
  font-size:12px;
  letter-spacing:.2px;
  user-select:none;
}
.pdf-page-placeholder canvas {
  width:100%;
  height:100%;
  object-fit:contain;
}

.page-placeholder-label{display:grid;place-items:center;height:100%;min-height:220px;color:#8a96a8;font-size:13px;background:linear-gradient(135deg,#f8fafc,#eef2f7)}
.page-render-error{display:grid;place-items:center;text-align:center;padding:20px;color:#9b2c2c;background:#fff7f7;font-size:13px}
.retry-page{margin-top:8px;border:1px solid #d6a4a4;background:#fff;border-radius:7px;padding:6px 10px;cursor:pointer;color:#9b2c2c}


/* Stage 2.4 — Visual loading experience and reliability polish */
.book-stage {
  isolation: isolate;
}
.preview-layer {
  transition: opacity .28s ease, visibility .28s ease;
}
.preview-layer:not(.hidden) {
  visibility: visible;
}
.preview-layer img {
  border-radius: 3px;
}
.preview-loading {
  transition: opacity .2s ease, transform .2s ease;
}
.viewer-loading {
  z-index: 8;
  transition: opacity .25s ease, transform .25s ease;
}
.viewer-loading.hidden {
  opacity: 0;
  transform: translate(-50%, 8px);
  pointer-events: none;
}
.pdf-page {
  position: relative;
}
.pdf-page-placeholder {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #f8fafc, #edf2f7);
}
.pdf-page-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 25%, #ffffff88 45%, transparent 65%);
  transform: translateX(-100%);
  animation: pageShimmer 1.5s ease-in-out infinite;
  pointer-events: none;
}
.page-placeholder-label {
  position: relative;
  z-index: 1;
  padding: 10px 14px;
  border: 1px solid #dfe6ef;
  border-radius: 9px;
  background: #ffffffd9;
  box-shadow: 0 4px 14px #17233d0b;
}
.page-ready {
  animation: pageAppear .22s ease-out both;
}
.page-render-error {
  gap: 8px;
  border: 1px dashed #e4baba;
}
.page-render-error .retry-page {
  transition: background .18s ease, transform .18s ease;
}
.page-render-error .retry-page:hover {
  background: #fff0f0;
  transform: translateY(-1px);
}
@keyframes pageShimmer {
  to { transform: translateX(100%); }
}
@keyframes pageAppear {
  from { opacity: .45; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .page-placeholder-label,
  .pdf-page-placeholder::before,
  .page-ready,
  .viewer-loading,
  .preview-layer {
    animation: none;
    transition: none;
  }
}

/* Stage 2.8: optional diagnostics panel, visible only with debug=1 */
.diagnostics-panel{position:fixed;right:14px;bottom:14px;z-index:1000;width:min(330px,calc(100vw - 28px));padding:14px 16px;border:1px solid #cfd8e5;border-radius:12px;background:rgba(255,255,255,.96);box-shadow:0 12px 35px #17233d22;color:#26354d;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;backdrop-filter:blur(8px)}
.diagnostics-title{font:700 13px/1.2 Inter,ui-sans-serif,system-ui,sans-serif;margin-bottom:8px;color:#17233d}
.diagnostics-line{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #e8edf3;padding:4px 0}
.diagnostics-line span:last-child{font-weight:700;text-align:right}
@media(max-width:600px){.diagnostics-panel{bottom:8px;right:8px;width:calc(100vw - 16px)}}


/* Stage 3.0 — Brand system, controls, onboarding and responsive fixes */
:root{
  --brand-black:#060606;
  --brand-teal:#69d3c1;
  --brand-mint:#d8f3ed;
  --brand-ink:#101616;
  --brand-surface:#f2f8f7;
}
body{background:var(--brand-surface);color:var(--brand-ink)}
.topbar{background:var(--brand-black);border-bottom:1px solid #1f3935}
.brand{color:#fff}
.brand-logo{background:var(--brand-black);border-radius:4px}
.btn{border-color:#b9d3ce;color:var(--brand-ink)}
.btn-primary{background:var(--brand-teal);border-color:var(--brand-teal);color:var(--brand-black)}
.btn-primary:hover{background:#83dfd0;border-color:#83dfd0}
.btn-outline{background:transparent;color:inherit}
.topbar .btn-outline{border-color:#41635d;color:#fff}
.topbar .btn-primary{color:var(--brand-black)}
.eyebrow{color:#168f7c}
.hero-card{border-color:#c9e2dc;background:#fff}
.book-stage{background:#e7f1ef;border-color:#c8dfda}
.control-btn{border-color:#b9d3ce;color:var(--brand-ink)}
.zoom-level{font-size:12px;color:#168f7c;font-weight:700;min-width:42px;text-align:center}
.powered strong{color:#168f7c}
.modal-card{border:1px solid #c9e2dc}
.dropzone.selected,.dropzone.dragover{border-color:var(--brand-teal);background:#effbf8}
.upload-icon{color:#168f7c}
.progress-bar{background:var(--brand-teal)}
.preview-layer{background:#e7f1ef}
.preview-loading{border-color:#c9e2dc}
.preview-spinner{border-color:#bdebe2;border-top-color:#168f7c}

/* The zoom controls are useful to recipients too, including mobile users. */
.shared-mode .controls .control-btn,
.shared-mode .controls .zoom-level{display:inline-flex!important}
.shared-mode .controls span#pageIndicator{display:inline-flex!important}
.shared-mode .controls{display:flex}
.shared-mode .controls #downloadBtn{display:none!important}

/* Fullscreen uses the complete viewport. The page itself retains its PDF aspect ratio. */
.app-fullscreen .book-stage{
  position:fixed;inset:0;width:100vw;height:100dvh;min-height:0;max-height:none;
  padding:0!important;border:0;border-radius:0;background:#101817;
}
.app-fullscreen .book-container{
  width:100vw;height:100dvh;max-width:none;max-height:none;
}
.app-fullscreen .preview-layer{padding:0}
.app-fullscreen .edge-nav{top:50%;transform:translateY(-50%)}
.app-fullscreen .viewer-loading{z-index:20}

/* Help and guide */
.help-card{width:min(430px,100%)}
.help-actions{display:grid;gap:10px;margin-top:22px}
.help-note{font-size:12px;color:#7a879b;margin:14px 0 0}
.guide-card{width:min(480px,100%)}
.guide-step-count{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:#168f7c;font-weight:800;margin:12px 0 16px}
.guide-card h3{font-size:24px;margin:0 0 10px;color:var(--brand-ink)}
.guide-card p{color:#66748b;line-height:1.65;margin:0;min-height:80px}
.guide-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:26px}
.guide-dots{display:flex;gap:5px;justify-content:center;flex:1}
.guide-dots span{width:7px;height:7px;border-radius:50%;background:#c8d8d4}
.guide-dots span.active{background:var(--brand-teal);transform:scale(1.25)}

@media(max-width:700px){
  .topbar{height:64px;padding:0 14px}
  .brand-logo{width:150px;height:44px}
  .top-actions{gap:6px}
  .top-actions .btn{padding:9px 10px;font-size:11px}
  .top-actions #helpBtn{display:inline-flex}
  .reader-view{padding:16px 10px 22px}
  .reader-heading{margin-bottom:12px}
  .book-stage{min-height:calc(100svh - 190px);padding:28px 30px}
  .controls{gap:6px}
  .controls .control-btn{width:36px;height:36px}
  .controls .zoom-level{display:inline-flex!important}
  .controls #pageIndicator{min-width:72px}
  .app-fullscreen .book-container{width:100vw;height:100dvh}
  .app-fullscreen .topbar{height:0}
  .app-fullscreen .topbar #fullscreenBtn{position:fixed;top:12px;right:12px}
  .app-fullscreen .edge-nav{width:38px;height:38px;font-size:28px}
}


/* Stage 3.1 — Focus-based onboarding spotlight */
.focus-guide{position:fixed;inset:0;z-index:2000;pointer-events:none}
.focus-guide-backdrop{position:absolute;inset:0;background:transparent;pointer-events:auto}
.focus-guide-spotlight{position:fixed;border:2px solid var(--brand-teal,#69d3c1);border-radius:12px;box-shadow:0 0 0 9999px rgba(3,10,10,.62),0 0 0 5px rgba(105,211,193,.18),0 0 24px rgba(105,211,193,.45);pointer-events:none;transition:all .22s ease}
.focus-guide-tip{position:fixed;z-index:2002;background:#fff;color:#101616;border:1px solid #b9d3ce;border-radius:16px;padding:18px 18px 14px;box-shadow:0 18px 55px rgba(0,0,0,.28);pointer-events:auto;transition:top .22s ease,left .22s ease;max-width:calc(100vw - 24px)}
.focus-guide-kicker{font-size:10px;letter-spacing:1.2px;font-weight:800;color:#168f7c;margin-bottom:8px}
.focus-guide-tip h3{font-size:21px;line-height:1.2;margin:0 0 8px;color:#101616}
.focus-guide-tip p{font-size:13px;line-height:1.55;color:#53656a;margin:0}
.focus-guide-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px}
.focus-guide-footer #focusGuideCount{font-size:11px;color:#78908c;font-weight:700}
.focus-guide-tip .btn-outline{color:#203331;background:#f4f8f7}
.focus-guide-target{position:relative!important;z-index:2001!important}
@media(max-width:700px){
  .focus-guide-tip{padding:15px 15px 12px;border-radius:14px}
  .focus-guide-tip h3{font-size:18px}
  .focus-guide-tip p{font-size:12px;line-height:1.5}
  .focus-guide-footer{margin-top:13px}
}


/* Stage 3.3 — targeted mobile fullscreen and upload-state polish */
body.app-fullscreen{overflow:hidden;background:#f4f7f6}
.app-fullscreen .reader-view{padding:0!important}
.app-fullscreen .reader-heading,
.app-fullscreen .controls,
.app-fullscreen .powered{display:none!important}
.app-fullscreen .book-stage{
  position:fixed!important;
  inset:0!important;
  z-index:100!important;
  width:100vw!important;
  height:100dvh!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  background:#f4f7f6!important;
  border:0!important;
  border-radius:0!important;
}
.app-fullscreen .book-container{
  width:calc(100vw - 24px)!important;
  height:calc(100dvh - 24px)!important;
  max-width:none!important;
  max-height:none!important;
  margin:0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  transform-origin:center center!important;
}
.app-fullscreen .book-container .stf__parent{
  margin-left:auto!important;
  margin-right:auto!important;
}
.app-fullscreen .preview-layer,
.app-fullscreen .viewer-loading{
  background:#f4f7f6!important;
}
.app-fullscreen .edge-nav{z-index:120!important}
.progress-wrap.upload-complete{background:#d8f3ed}
.progress-wrap.upload-complete .progress-bar{
  background:#168f7c;
  position:relative;
}
.progress-wrap.upload-complete .progress-bar::after{
  content:'✓';
  position:absolute;
  right:5px;
  top:50%;
  transform:translateY(-54%);
  color:#fff;
  font-size:10px;
  font-weight:800;
}
#startUploadBtn:not(:disabled){
  box-shadow:0 0 0 3px rgba(105,211,193,.22);
}
#startUploadBtn:disabled{cursor:wait}
@media(max-width:700px){
  .app-fullscreen .book-container{
    width:calc(100vw - 16px)!important;
    height:calc(100dvh - 16px)!important;
  }
  .app-fullscreen .edge-nav.left{left:8px!important}
  .app-fullscreen .edge-nav.right{right:8px!important}
}


/* Stage 3.4 — Fullscreen centering and explicit exit control */
.fullscreen-exit{
  display:none;
  position:absolute;
  top:16px;
  right:16px;
  z-index:130;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:42px;
  height:42px;
  padding:0 12px;
  border:1px solid #b9d3ce;
  border-radius:999px;
  background:rgba(255,255,255,.96);
  color:#101616;
  box-shadow:0 5px 18px rgba(0,0,0,.16);
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.fullscreen-exit span{
  font-size:12px;
  font-weight:800;
  letter-spacing:.1px;
}
.app-fullscreen .fullscreen-exit{display:flex}

/* Keep the PageFlip surface itself centred inside the fullscreen stage. */
.app-fullscreen .book-container{
  position:relative!important;
  left:0!important;
  right:0!important;
  margin-left:auto!important;
  margin-right:auto!important;
  justify-content:center!important;
  align-items:center!important;
}
.app-fullscreen .book-container .stf__parent,
.app-fullscreen .book-container .stf__wrapper{
  margin-left:auto!important;
  margin-right:auto!important;
  left:auto!important;
  right:auto!important;
}

/* In fullscreen, centre the active PageFlip surface rather than allowing
   the spread wrapper to remain offset to the right. */
.app-fullscreen .book-container .stf__block{
  margin-left:auto!important;
  margin-right:auto!important;
}
@media(max-width:700px){
  .fullscreen-exit{
    top:calc(env(safe-area-inset-top) + 12px);
    right:12px;
    min-width:40px;
    height:40px;
    padding:0 10px;
    font-size:21px;
  }
  .fullscreen-exit span{font-size:11px}
}

/* Stage 3.5 — definitive fullscreen viewport positioning */
body.app-fullscreen{
  overflow:hidden!important;
  background:#f4f7f6!important;
}
body.app-fullscreen .topbar{
  display:none!important;
}
body.app-fullscreen .reader-heading,
body.app-fullscreen .controls,
body.app-fullscreen .powered{
  display:none!important;
}
body.app-fullscreen .book-stage{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  overflow:hidden!important;
  background:#f4f7f6!important;
  border:0!important;
  border-radius:0!important;
}
body.app-fullscreen .book-container{
  position:absolute!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  transform:none!important;
  overflow:visible!important;
}
/* PageFlip creates a two-page landscape surface. In fullscreen we offset
   the surface by half a page so the active PDF page is centred. */
body.app-fullscreen .book-container .stf__parent{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  margin:0!important;
  transform:translate(-50%,-50%) translateX(-25%)!important;
  transform-origin:center center!important;
}
body.app-fullscreen .book-container .stf__wrapper,
body.app-fullscreen .book-container .stf__block{
  margin:0!important;
}
body.app-fullscreen .fullscreen-exit{
  display:flex!important;
  position:fixed!important;
  top:max(12px, env(safe-area-inset-top) + 10px)!important;
  right:max(12px, env(safe-area-inset-right) + 10px)!important;
  z-index:9999!important;
  width:auto!important;
  min-width:44px!important;
  height:40px!important;
  padding:0 13px!important;
  background:rgba(255,255,255,.97)!important;
  color:#101616!important;
  border:1px solid #b9d3ce!important;
  border-radius:999px!important;
  box-shadow:0 4px 18px rgba(0,0,0,.18)!important;
}
@media(max-width:700px){
  body.app-fullscreen .book-container .stf__parent{
    transform:translate(-50%,-50%) translateX(-25%)!important;
  }
  body.app-fullscreen .fullscreen-exit{
    top:max(10px, env(safe-area-inset-top) + 8px)!important;
    right:max(10px, env(safe-area-inset-right) + 8px)!important;
  }
}

/* Stage 3.6 — definitive fullscreen single-page centering */
body.app-fullscreen .book-container .stf__parent{
  left:50%!important;
  right:auto!important;
  top:50%!important;
  margin:0!important;
  transform:translate(-50%,-50%)!important;
  transform-origin:center center!important;
}
body.app-fullscreen .book-container .stf__wrapper,
body.app-fullscreen .book-container .stf__block{
  margin:0!important;
  left:0!important;
  right:auto!important;
}
body.app-fullscreen .fullscreen-exit{
  pointer-events:auto!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent;
}