*{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); }