/* =========================================================
   DGטל FLIPBOOK — styles. Self-contained (also embedded in
   every exported .html book), scoped under .fb-root.
   ========================================================= */
.fb-root{
  --fb-bg:#0f1116; --fb-panel:#181a22; --fb-line:#2a2c37; --fb-ink:#f2ede2; --fb-muted:#a09fae;
  --fb-accent:#5ec2e8; --fb-paper:#fbfaf6;
  position:relative; width:100%; color:var(--fb-ink); font-family:'Heebo','Assistant','Segoe UI',Arial,sans-serif;
  background:radial-gradient(900px 420px at 50% 0%, rgba(94,194,232,.08), transparent 70%), var(--fb-bg);
  border:1px solid var(--fb-line); border-radius:18px; overflow:hidden; user-select:none; -webkit-user-select:none;
}
.fb-root *{box-sizing:border-box;}
.fb-root [hidden]{display:none !important;}

/* toolbar */
.fb-bar{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:10px 14px;
  background:rgba(24,26,34,.92); border-bottom:1px solid var(--fb-line); position:relative; z-index:5;}
.fb-title{flex:1 1 160px; min-width:0; font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.fb-nav,.fb-tools{display:flex; align-items:center; gap:6px;}
.fb-btn{width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px;
  border:1px solid var(--fb-line); background:transparent; color:var(--fb-ink); cursor:pointer; padding:0; transition:border-color .2s, background .2s, opacity .2s;}
.fb-btn svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.fb-btn:hover:not(:disabled){border-color:var(--fb-accent); color:var(--fb-accent);}
.fb-btn.on{background:rgba(94,194,232,.15); border-color:var(--fb-accent); color:var(--fb-accent);}
.fb-btn:disabled{opacity:.3; cursor:default;}
.fb-ind{display:inline-flex; align-items:center; gap:4px; padding:0 8px; height:36px; border-radius:10px; background:rgba(255,255,255,.04);
  font-size:13.5px; font-variant-numeric:tabular-nums; direction:ltr; color:var(--fb-muted);}
.fb-ind span{unicode-bidi:isolate; direction:ltr;}
.fb-ind input{width:44px; height:26px; border:1px solid var(--fb-line); border-radius:7px; background:transparent; color:var(--fb-ink);
  text-align:center; font:inherit; font-weight:600; -moz-appearance:textfield;}
.fb-ind input::-webkit-outer-spin-button,.fb-ind input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}

/* stage + book */
.fb-stage{position:relative; display:flex; align-items:center; justify-content:center; perspective:2600px; overflow:hidden;
  touch-action:pan-y; cursor:pointer; padding:24px 0;}
.fb-book{position:relative; transform-style:preserve-3d; transition:transform .5s cubic-bezier(.45,.05,.25,1);}
.fb-book::after{content:''; position:absolute; left:6%; right:6%; bottom:-18px; height:22px; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.45), transparent 70%); filter:blur(4px); z-index:-1;}
.fb-slot{position:absolute; top:0; height:100%;}
.fb-page{position:absolute; inset:0; background:var(--fb-paper); overflow:hidden;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.06);}
.fb-page img{display:block; width:100%; height:100%; object-fit:contain; pointer-events:none;}
.fb-page.fb-blank{background:#f1efe8;}
.fb-slot-left .fb-page{border-radius:4px 0 0 4px;}
.fb-slot-right .fb-page{border-radius:0 4px 4px 0;}
.fb-single .fb-slot-left .fb-page{border-radius:4px;}
/* paper curvature toward the spine */
.fb-slot-left .fb-page::after,.fb-slot-right .fb-page::after{content:''; position:absolute; top:0; bottom:0; width:14%; pointer-events:none;}
.fb-slot-left .fb-page::after{right:0; background:linear-gradient(to left, rgba(0,0,0,.20), rgba(0,0,0,.05) 35%, transparent);}
.fb-slot-right .fb-page::after{left:0; background:linear-gradient(to right, rgba(0,0,0,.20), rgba(0,0,0,.05) 35%, transparent);}
.fb-single .fb-page::after{display:none;}
.fb-spine{position:absolute; top:0; bottom:0; left:50%; width:2px; transform:translateX(-1px); background:rgba(0,0,0,.25); pointer-events:none; z-index:2;}
.fb-loading{display:flex; align-items:center; justify-content:center; background:linear-gradient(110deg,#eeece5 30%,#f8f7f2 50%,#eeece5 70%); background-size:200% 100%; animation:fbShimmer 1.4s linear infinite;}
.fb-spin{width:28px; height:28px; border-radius:50%; border:3px solid rgba(0,0,0,.12); border-top-color:#8a8676; animation:fbSpin .8s linear infinite;}
@keyframes fbSpin{to{transform:rotate(360deg);}}
@keyframes fbShimmer{to{background-position:-200% 0;}}

/* the turning leaf */
.fb-leaf{position:absolute; top:0; z-index:10; transform-style:preserve-3d; will-change:transform;}
.fb-face{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:hidden;}
.fb-face .fb-page{box-shadow:none;}
.fb-back{transform:rotateY(180deg);}
.fb-shade{position:absolute; inset:0; pointer-events:none; opacity:0;}
.fb-front .fb-shade{background:linear-gradient(to left, rgba(0,0,0,.35), transparent 60%);}
.fb-back .fb-shade{background:linear-gradient(to right, rgba(0,0,0,.35), transparent 60%);}
.fb-leaf.fb-go .fb-shade{animation:fbShade .72s ease-in-out;}
.fb-leaf.fb-go .fb-face{box-shadow:0 14px 30px -10px rgba(0,0,0,.45);}
@keyframes fbShade{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.fb-book.fb-jump{opacity:.15; transition:opacity .16s;}

.fb-hint{position:absolute; bottom:3px; left:50%; transform:translateX(-50%); font-size:12px; color:var(--fb-muted);
  background:rgba(0,0,0,.35); padding:4px 12px; border-radius:999px; pointer-events:none; animation:fbHint 3s ease 2s forwards; white-space:nowrap;}
@keyframes fbHint{to{opacity:0;}}

/* thumbnails */
.fb-thumbs{display:flex; gap:8px; overflow-x:auto; padding:10px 14px; border-top:1px solid var(--fb-line); background:rgba(24,26,34,.92); scroll-behavior:smooth;}
.fb-thumb{position:relative; flex:none; height:92px; border-radius:6px; overflow:hidden; border:2px solid transparent; background:#e9e6de; cursor:pointer; padding:0;}
.fb-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.fb-thumb.on{border-color:var(--fb-accent);}
.fb-thumb-n{position:absolute; bottom:3px; left:50%; transform:translateX(-50%); font-size:10.5px; background:rgba(0,0,0,.6); color:#fff; padding:0 6px; border-radius:6px;}

/* zoom */
.fb-zoom{position:absolute; inset:0; z-index:30; background:rgba(9,9,12,.94); display:flex; flex-direction:column;}
.fb-zoom-close{position:absolute; top:12px; left:12px; z-index:2; background:rgba(0,0,0,.5);}
.fb-zoom-body{flex:1; overflow:auto; padding:56px 16px 24px; display:flex; flex-direction:column; align-items:center; gap:18px; cursor:auto; user-select:text;}
.fb-zoom-page{margin:0; width:min(1100px,100%);}
.fb-zoom-page img{width:100%; display:block; background:#fff; border-radius:4px;}
.fb-zoom-page figcaption{text-align:center; font-size:12px; color:var(--fb-muted); margin-top:6px;}
.fb-root.fb-zooming:not(.fb-fs):not(.fb-standalone) .fb-zoom{position:fixed; z-index:9999;}

/* fullscreen */
.fb-root.fb-fs{position:fixed; inset:0; z-index:9998; border-radius:0; border:0; display:flex; flex-direction:column;}
.fb-root.fb-fs .fb-stage{flex:1; height:auto !important;}
html.fb-noscroll,html.fb-noscroll body{overflow:hidden !important;}

/* exported, whole-window book */
.fb-root.fb-standalone{position:fixed; inset:0; border:0; border-radius:0; display:flex; flex-direction:column;}
.fb-root.fb-standalone .fb-stage{flex:1; height:auto !important;}

@media (max-width:640px){
  .fb-bar{padding:8px 10px; gap:6px;}
  .fb-title{flex-basis:100%; text-align:center;}
  .fb-bar{justify-content:center;}
  .fb-btn{width:34px; height:34px;}
  .fb-nav .fb-btn:first-child,.fb-nav .fb-btn:last-child{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .fb-leaf{transition-duration:1ms !important;}
}