:root {
  --bg: #6e6e6e;          /* stage background (override with ?bg=ffffff) */
  --bar-bg: #ffffff;
  --bar-fg: #3a3a3a;
  --accent: #e30613;
  --bar-h: 56px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: var(--bg);
  font: 14px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--bar-fg);
  -webkit-tap-highlight-color: transparent;
}
#app { position: fixed; inset: 0; display: flex; flex-direction: column; }
#stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }

/* --- book --- */
.book, .book.stf__parent { position: absolute; inset: 0; }  /* slide set by viewer.js shiftTo() */
.book .stf__wrapper { height: 100%; }
.page { background: #fff; overflow: hidden; }
.page img { width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.page .plink { position: absolute; display: block; z-index: 2; }
.page .plink:hover { background: rgba(227, 6, 19, .12); outline: 1px solid rgba(227, 6, 19, .4); }
.stf__item { box-shadow: 0 0 1px rgba(0,0,0,.25); }

/* --- loader --- */
#loader { position: absolute; inset: 0; display: grid; place-items: center; z-index: 5; pointer-events: none; }
#loader.done { display: none; }
#loader .msg { color: #fff; font-size: 16px; margin: 0; }
.spin {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- side arrows --- */
.side {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 48px; height: 72px; border: 0; padding: 0; cursor: pointer;
  background: transparent; color: #fff; opacity: .75; transition: opacity .15s;
}
.side:hover { opacity: 1; }
.side:disabled { opacity: 0; pointer-events: none; }
.side.prev { left: 4px; }
.side.next { right: 4px; }
.side svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 2; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }

/* --- zoom --- */
#zoom {
  position: absolute; inset: 0; z-index: 6; overflow: auto; display: flex;
  background: var(--bg); cursor: grab; overscroll-behavior: contain;
}
#zoom[hidden] { display: none; }
#zoom.dragging { cursor: grabbing; }
#zoomInner { margin: auto; flex: none; display: flex; box-shadow: 0 2px 16px rgba(0,0,0,.3); }
#zoomInner img { display: block; width: 50%; height: 100%; background: #fff; user-select: none; -webkit-user-drag: none; }
#zoomInner.single img { width: 100%; }

/* --- thumbnails --- */
#thumbs {
  position: absolute; left: 0; right: 0; bottom: var(--bar-h); z-index: 8;
  background: rgba(30,30,30,.92); padding: 12px 8px;
}
#thumbs[hidden] { display: none; }
#thumbsInner { display: flex; gap: 14px; overflow-x: auto; padding: 4px 6px 8px; scroll-behavior: smooth; }
.tspread {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: 0; padding: 0; background: none; cursor: pointer; color: #ddd; font: inherit; font-size: 12px;
}
.tspread .imgs { display: flex; outline: 2px solid transparent; outline-offset: 2px; border-radius: 1px; }
.tspread img { height: 110px; width: auto; display: block; background: #fff; }
.tspread:hover .imgs { outline-color: rgba(255,255,255,.5); }
.tspread.active .imgs { outline-color: var(--accent); }
.tspread.active { color: #fff; }

/* --- toolbar --- */
#bar {
  height: var(--bar-h); flex: none; display: flex; align-items: center; justify-content: center; gap: 2px;
  background: var(--bar-bg); box-shadow: 0 -1px 4px rgba(0,0,0,.15); z-index: 9; padding: 0 8px;
}
#bar button, #bar a {
  width: 40px; height: 40px; border: 0; border-radius: 8px; background: none; color: var(--bar-fg);
  display: grid; place-items: center; cursor: pointer; padding: 0;
}
#bar button:hover:not(:disabled), #bar a:hover { background: rgba(0,0,0,.06); }
#bar button:disabled { opacity: .3; cursor: default; }
#bar button.on { color: var(--accent); }
#bar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#counter { min-width: 78px; text-align: center; font-variant-numeric: tabular-nums; font-size: 14px; }
.sep { width: 1px; height: 24px; background: rgba(0,0,0,.12); margin: 0 6px; }

@media (max-width: 480px) {
  :root { --bar-h: 50px; }
  #bar button, #bar a { width: 36px; height: 36px; }
  #counter { min-width: 62px; font-size: 13px; }
  .sep { margin: 0 2px; }
  .side { display: none; }
  .tspread img { height: 90px; }
}