/* ProFlip viewer. Shared by the studio preview and every exported flipbook.
   Colors come from CSS variables set on .pf-root by viewer.js from the book's settings. */
.pf-root{
  --pf-bg1:#1d2733;--pf-bg2:#3b4a5c;--pf-accent:#1689c7;
  --pf-ui-bg:rgba(14,18,24,.82);--pf-ui-fg:#eef2f6;--pf-ui-muted:rgba(238,242,246,.62);--pf-ui-line:rgba(255,255,255,.12);
  --pf-panel-bg:#151b23;--pf-panel-fg:#eef2f6;
  position:relative;width:100%;height:100%;overflow:hidden;display:flex;flex-direction:column;
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--pf-ui-fg);
  background:var(--pf-bg1);-webkit-tap-highlight-color:transparent;user-select:none
}
.pf-root.pf-light{--pf-ui-bg:rgba(255,255,255,.9);--pf-ui-fg:#18202a;--pf-ui-muted:rgba(24,32,42,.6);--pf-ui-line:rgba(0,0,0,.1);--pf-panel-bg:#ffffff;--pf-panel-fg:#18202a}
.pf-root *{box-sizing:border-box}
.pf-bgfill{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center}
.pf-head{position:relative;z-index:3;display:flex;align-items:center;gap:12px;padding:10px 16px;min-height:52px}
.pf-logo{height:32px;max-width:160px;object-fit:contain;display:block}
.pf-titles{min-width:0;display:flex;flex-direction:column}
.pf-title{font-weight:600;font-size:15px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--pf-ui-fg);text-shadow:0 1px 2px rgba(0,0,0,.25)}
.pf-light .pf-title{text-shadow:none}
.pf-sub{font-size:12px;color:var(--pf-ui-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-head-spacer{flex:1}
.pf-stage{position:relative;z-index:1;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:8px 56px 12px}
.pf-book{position:relative;width:100%;height:100%}
.pf-page{background:#fff;overflow:hidden}
.pf-page-inner{position:relative;width:100%;height:100%}
.pf-page img.pf-img{width:100%;height:100%;object-fit:fill;display:block;pointer-events:none;-webkit-user-drag:none}
.pf-shadowed .stf__parent{filter:drop-shadow(0 18px 30px rgba(0,0,0,.35))}
/* hotspots */
.pf-hots{position:absolute;inset:0;pointer-events:none}
.pf-hot{position:absolute;pointer-events:auto;border:0;padding:0;margin:0;background:transparent;cursor:pointer;border-radius:4px;outline:none}
.pf-hot.pf-show{background:color-mix(in srgb,var(--pf-accent) 14%,transparent);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--pf-accent) 70%,transparent)}
.pf-hot:hover,.pf-hot:focus-visible{background:color-mix(in srgb,var(--pf-accent) 24%,transparent);box-shadow:inset 0 0 0 2px var(--pf-accent)}
.pf-hot .pf-hot-badge{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;background:var(--pf-accent);color:#fff;display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.pf-hot .pf-hot-badge svg{width:12px;height:12px}
.pf-hot.pf-show .pf-hot-badge{animation:pf-pulse 2.4s ease-in-out infinite}
@keyframes pf-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
/* side arrows */
.pf-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:40px;height:64px;border:0;border-radius:8px;background:var(--pf-ui-bg);color:var(--pf-ui-fg);cursor:pointer;display:grid;place-items:center;opacity:.85;transition:opacity .2s}
.pf-arrow:hover{opacity:1}.pf-arrow:disabled{opacity:.25;cursor:default}
.pf-arrow.pf-prev{left:8px}.pf-arrow.pf-next{right:8px}
.pf-arrow svg{width:20px;height:20px}
/* bottom bar */
.pf-bar{position:relative;z-index:4;display:flex;align-items:center;gap:4px;margin:0 auto 12px;padding:6px 8px;border-radius:12px;background:var(--pf-ui-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);max-width:calc(100% - 24px);flex-wrap:wrap;justify-content:center}
.pf-btn{width:36px;height:36px;border:0;border-radius:8px;background:transparent;color:var(--pf-ui-fg);cursor:pointer;display:grid;place-items:center;flex:none}
.pf-btn:hover{background:var(--pf-ui-line)}
.pf-btn.pf-on{color:var(--pf-accent)}
.pf-btn svg{width:19px;height:19px}
.pf-btn:focus-visible,.pf-arrow:focus-visible{outline:2px solid var(--pf-accent);outline-offset:1px}
.pf-sep{width:1px;height:22px;background:var(--pf-ui-line);margin:0 4px}
.pf-pageno{display:flex;align-items:center;gap:6px;font-size:13px;font-variant-numeric:tabular-nums;color:var(--pf-ui-fg);padding:0 6px}
.pf-pageno input{width:46px;height:28px;border-radius:6px;border:1px solid var(--pf-ui-line);background:transparent;color:inherit;text-align:center;font:inherit}
.pf-pageno span{color:var(--pf-ui-muted)}
.pf-progress{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:5;background:var(--pf-ui-line)}
.pf-progress i{display:block;height:100%;background:var(--pf-accent);width:0;transition:width .3s}
/* drawer */
.pf-drawer{position:absolute;top:0;bottom:0;left:0;z-index:8;width:min(340px,88%);background:var(--pf-panel-bg);color:var(--pf-panel-fg);transform:translateX(-102%);transition:transform .28s ease;display:flex;flex-direction:column;box-shadow:8px 0 30px rgba(0,0,0,.3)}
.pf-drawer.pf-open{transform:none}
.pf-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--pf-ui-line);font-weight:600}
.pf-drawer-head .pf-btn{color:var(--pf-panel-fg)}
.pf-drawer-body{flex:1;overflow:auto;padding:12px 16px}
.pf-thumbs{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.pf-thumb{border:0;padding:0;background:transparent;cursor:pointer;color:inherit;font:inherit;text-align:center}
.pf-thumb img{width:100%;display:block;border-radius:3px;box-shadow:0 1px 4px rgba(0,0,0,.25);outline:2px solid transparent;outline-offset:2px}
.pf-thumb.pf-cur img{outline-color:var(--pf-accent)}
.pf-thumb span{display:block;font-size:12px;margin-top:4px;opacity:.7;font-variant-numeric:tabular-nums}
.pf-toc{list-style:none;margin:0;padding:0}
.pf-toc button{width:100%;display:flex;justify-content:space-between;gap:12px;border:0;background:transparent;color:inherit;font:inherit;padding:10px 8px;border-radius:6px;cursor:pointer;text-align:left}
.pf-toc button:hover{background:var(--pf-ui-line)}
.pf-toc .pf-toc-l2{padding-left:24px;font-size:.94em;opacity:.85}
.pf-toc em{font-style:normal;opacity:.55;font-variant-numeric:tabular-nums}
.pf-search input{width:100%;height:38px;border-radius:8px;border:1px solid var(--pf-ui-line);background:transparent;color:inherit;padding:0 12px;font:inherit}
.pf-results{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.pf-result{border:0;background:transparent;color:inherit;font:inherit;text-align:left;padding:8px;border-radius:6px;cursor:pointer;font-size:13px;line-height:1.4}
.pf-result:hover{background:var(--pf-ui-line)}
.pf-result b{color:var(--pf-accent);font-weight:600}
.pf-result small{display:block;opacity:.55;font-variant-numeric:tabular-nums}
.pf-empty{opacity:.6;font-size:13px;padding:8px 0}
/* modal */
.pf-modal{position:absolute;inset:0;z-index:20;background:rgba(6,9,13,.78);display:flex;align-items:center;justify-content:center;padding:24px}
.pf-modal.pf-locked{background:rgba(6,9,13,.95)}
.pf-modal-card{position:relative;background:var(--pf-panel-bg);color:var(--pf-panel-fg);border-radius:14px;max-width:min(860px,100%);max-height:100%;overflow:auto;padding:20px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.pf-modal-card video,.pf-modal-card img{display:block;max-width:100%;max-height:70vh;border-radius:8px;margin:0 auto}
.pf-modal-card audio{width:min(420px,80vw);display:block}
.pf-modal-close{position:absolute;top:8px;right:8px;color:var(--pf-panel-fg)}
.pf-modal h3{margin:0 0 6px;font-size:20px;padding-right:36px}
.pf-modal p{margin:0 0 14px;line-height:1.5;opacity:.8}
.pf-form{display:flex;flex-direction:column;gap:10px;min-width:min(340px,80vw)}
.pf-form label{display:flex;flex-direction:column;gap:4px;font-size:13px;opacity:.85}
.pf-form input{height:40px;border-radius:8px;border:1px solid var(--pf-ui-line);background:transparent;color:inherit;padding:0 12px;font:inherit;font-size:15px}
.pf-cta{height:42px;border:0;border-radius:8px;background:var(--pf-accent);color:#fff;font:inherit;font-weight:600;cursor:pointer;padding:0 18px}
.pf-link{border:0;background:transparent;color:inherit;opacity:.65;font:inherit;font-size:13px;cursor:pointer;text-decoration:underline}
.pf-err{color:#e5484d;font-size:13px;min-height:1em}
.pf-note-text{white-space:pre-wrap;line-height:1.55;max-width:520px}
/* zoom */
.pf-zoom{position:absolute;inset:0;z-index:15;background:var(--pf-bg1);overflow:hidden;cursor:grab;touch-action:none}
.pf-zoom.pf-dragging{cursor:grabbing}
.pf-zoom-inner{position:absolute;left:0;top:0;transform-origin:0 0;display:flex;gap:0;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.pf-zoom-inner img{display:block;height:100%;pointer-events:none}
.pf-zoom-ctl{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:4px;background:var(--pf-ui-bg);border-radius:12px;padding:6px;z-index:2}
/* deck engines: slider, coverflow */
.pf-deck{position:relative;width:100%;height:100%;touch-action:pan-y}
.pf-slider{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:24px;align-items:center}
.pf-slider::-webkit-scrollbar{display:none}
.pf-slide{flex:none;height:100%;display:flex;align-items:center;justify-content:center;scroll-snap-align:center;width:100%}
.pf-slide .pf-page{box-shadow:0 14px 30px rgba(0,0,0,.3)}
.pf-cf{position:relative;width:100%;height:100%;perspective:1600px}
.pf-cf .pf-page{position:absolute;left:50%;top:50%;transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .55s,filter .55s;box-shadow:0 18px 40px rgba(0,0,0,.35);cursor:pointer}
/* gate */
.pf-gate{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:var(--pf-bg1);padding:24px}
.pf-toast{position:absolute;left:50%;bottom:76px;transform:translateX(-50%);z-index:40;background:var(--pf-ui-bg);color:var(--pf-ui-fg);padding:8px 14px;border-radius:8px;font-size:13px;pointer-events:none;opacity:0;transition:opacity .2s}
.pf-toast.pf-show{opacity:1}
.pf-qr{display:flex;flex-direction:column;align-items:center;gap:12px}
.pf-qr canvas,.pf-qr img{background:#fff;padding:10px;border-radius:8px}
.pf-sharerow{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pf-sharerow a,.pf-sharerow button{font:inherit;font-size:13px;color:inherit;border:1px solid var(--pf-ui-line);background:transparent;border-radius:8px;padding:8px 12px;text-decoration:none;cursor:pointer}
@media (max-width:640px){
  .pf-stage{padding:6px 6px 8px}
  .pf-arrow{display:none}
  .pf-head{padding:8px 12px}
  .pf-btn{width:34px;height:34px}
  .pf-hide-sm{display:none}
}
@media (prefers-reduced-motion:reduce){.pf-cf .pf-page,.pf-drawer{transition:none}.pf-hot.pf-show .pf-hot-badge{animation:none}}