.ui-book-spread { position: relative; box-sizing: border-box; display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 320px; color: var(--ui-fg); background: var(--ui-bg); font-family: var(--ui-font); }
.ui-book-spread-bar { display: flex; align-items: center; gap: 4px; flex: none; min-height: 48px; padding: 2px max(8px, env(safe-area-inset-right)) 2px max(8px, env(safe-area-inset-left)); border-bottom: 1px solid var(--ui-border); background: var(--ui-surface); }
.ui-book-spread-title { flex: 1; min-width: 0; overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ui-book-spread-btn { min-width: 44px; min-height: 44px; padding: 0 10px; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-fg); font: 500 14px var(--ui-font); cursor: pointer; }
.ui-book-spread-btn:disabled { color: var(--ui-muted); opacity: .5; cursor: default; }
.ui-book-spread-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (hover: hover) { .ui-book-spread-btn:not(:disabled):hover { background: var(--ui-subtle); } }
.ui-book-spread-view { position: relative; flex: 1; min-height: 0; margin: 20px max(28px, env(safe-area-inset-right)) 8px max(28px, env(safe-area-inset-left)); overflow-x: hidden; overflow-y: auto; outline: none; touch-action: pan-y pinch-zoom; font-size: var(--size); line-height: 1.6; }
.ui-book-spread-ready { overflow: hidden; }
.ui-book-spread-view:focus-visible { box-shadow: 0 0 0 2px var(--ui-accent); }
.ui-book-spread-flow { column-fill: auto; will-change: transform; }
.ui-book-spread-para { margin: 0 0 .8em; orphans: 2; widows: 2; }
.ui-book-spread-head { margin: 0 0 .7em; font-size: 1.3em; font-weight: 700; line-height: 1.25; break-after: avoid; }
.ui-book-spread-turning { transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.ui-book-spread-swiping { user-select: none; -webkit-user-select: none; }
.ui-book-spread-gutter { position: absolute; top: 48px; bottom: 28px; left: 50%; width: 1px; background: var(--ui-border); pointer-events: none; }
.ui-book-spread-foot { display: flex; justify-content: space-between; flex: none; padding: 2px max(28px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left)); color: var(--ui-muted); font: 13px/1.4 var(--ui-font); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .ui-book-spread-turning { transition: none; } }