html, body { margin: 0; height: 100%; background: #111; color: #eee; font: 14px system-ui, sans-serif; }
#container, .ufgv { height: 100%; display: flex; flex-direction: column; }
.ufgv-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: pan-y; user-select: none; }
.ufgv-stage.ufgv-zoomed { overflow: auto; display: block; touch-action: auto; }
.ufgv-spread { display: flex; align-items: center; justify-content: center; margin: 0 auto; min-height: 100%; width: max-content; }
.ufgv-page { background: #fff; box-shadow: 0 2px 14px rgba(0, 0, 0, .6); display: block; }
.ufgv-in-next { animation: ufgv-next .25s ease-out; }
.ufgv-in-prev { animation: ufgv-prev .25s ease-out; }
@keyframes ufgv-next { from { transform: translateX(8%); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes ufgv-prev { from { transform: translateX(-8%); opacity: .2; } to { transform: none; opacity: 1; } }
.ufgv-bar { display: flex; gap: 6px; align-items: center; justify-content: center; padding: 8px; background: #1b1b1b; }
.ufgv-bar button { background: #2a2a2a; color: #eee; border: 1px solid #444; border-radius: 4px; min-width: 36px; height: 34px; font-size: 18px; cursor: pointer; }
.ufgv-bar button:disabled { opacity: .35; cursor: default; }
.ufgv-num { width: 4.5em; height: 30px; background: #111; color: #eee; border: 1px solid #444; border-radius: 4px; text-align: center; }
.ufgv-error { margin: auto; padding: 2em; text-align: center; }
.ufgv-error a { color: #8ab4ff; }
@media (prefers-reduced-motion: reduce) { .ufgv-in-next, .ufgv-in-prev { animation: none; } }
.ufgv-book { position: relative; perspective: 2400px; margin: auto; }
.ufgv-slot { position: absolute; top: 0; }
.ufgv-slot canvas, .ufgv-face canvas { display: block; background: #fff; }
.ufgv-leaf { position: absolute; top: 0; height: 100%; transform-style: preserve-3d; }
.ufgv-face { position: absolute; inset: 0; backface-visibility: hidden; box-shadow: 0 2px 14px rgba(0, 0, 0, .5); }
.ufgv-back { transform: rotateY(180deg); }
.ufgv-shade { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .35), transparent 30%, transparent 70%, rgba(0, 0, 0, .35)); }
.ufgv { position: relative; }
.ufgv-thumbs { position: absolute; left: 0; top: 0; bottom: 50px; width: 150px; overflow-y: auto; background: rgba(20, 20, 20, .96); padding: 8px; box-sizing: border-box; z-index: 5; }
.ufgv-thumbs[hidden] { display: none; }
.ufgv-thumb { display: block; width: 100%; margin: 0 0 10px; padding: 4px; background: transparent; border: 2px solid transparent; border-radius: 4px; color: #bbb; cursor: pointer; }
.ufgv-thumb.ufgv-cur { border-color: #4f8ff7; color: #fff; }
.ufgv-thumb canvas { width: 100%; height: auto; display: block; background: #fff; }
.ufgv-tph { width: 100%; aspect-ratio: 5 / 7; background: #2a2a2a; }

/* v2 P2: one visible page = canvas + pdf.js text layer + our links (text_layer.css is pdf.js's own, extracted). */
.ufgv-pg { position: relative; flex: none; box-shadow: 0 2px 14px rgba(0, 0, 0, .6); --user-unit: 1; --total-scale-factor: calc(var(--scale-factor) * var(--user-unit)); --scale-round-x: 1px; --scale-round-y: 1px; }
.ufgv-pg > canvas { display: block; background: #fff; }
.ufgv-pg .ufgv-page { box-shadow: none; }
.ufgv-link { position: absolute; z-index: 2; border-radius: 2px; }
.ufgv-link:hover, .ufgv-link:focus-visible { background: rgba(79, 143, 247, .18); outline: 2px solid rgba(79, 143, 247, .7); }
.ufgv-loading { margin: auto; padding: 2em; text-align: center; color: #aaa; }
.ufgv-loading a { color: #8ab4ff; }

/* v2 P3: modes + download */
.ufgv-bar .ufgv-mode { font-size: 13px; min-width: 64px; padding: 0 10px; }
.ufgv-dl { display: inline-flex; align-items: center; justify-content: center; background: #2a2a2a; color: #eee; border: 1px solid #444; border-radius: 4px; min-width: 36px; height: 34px; font-size: 18px; text-decoration: none; box-sizing: border-box; }
.ufgv-dl:hover, .ufgv-bar button:hover:not(:disabled) { border-color: #4f8ff7; }
.ufgv-stage.ufgv-scroll { display: block; overflow-y: auto; overflow-x: auto; touch-action: auto; }
.ufgv-col { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 12px 0 40px; }
.ufgv-spg { background: #222; flex: none; border-radius: 2px; }
.ufgv-spg .ufgv-pg { margin: 0; }
@media (max-width: 520px) { .ufgv-bar { gap: 4px; padding: 6px 4px; flex-wrap: wrap; } .ufgv-bar button, .ufgv-dl { min-width: 32px; } .ufgv-num { width: 3.5em; } }
/* Small touch screens: pinch-zoom replaces the zoom buttons; keeps the bar on one row. */
@media (pointer: coarse) and (max-width: 600px) { .ufgv-bar .ufgv-zoom, .ufgv-bar .ufgv-full { display: none; } .ufgv-bar { flex-wrap: nowrap; } }
.ufgv-bar button[hidden] { display: none; }