/* SunwaySans Font Family Imports */
@font-face {
  font-family: 'SunwaySans';
  src: url('../fonts/sunwaysans-light.woff2') format('woff2'),
       url('../fonts/sunwaysans-light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SunwaySans';
  src: url('../fonts/sunwaysans-lightitalic.woff2') format('woff2'),
       url('../fonts/sunwaysans-lightitalic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SunwaySans';
  src: url('../fonts/sunwaysans-regular.woff2') format('woff2'),
       url('../fonts/sunwaysans-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SunwaySans';
  src: url('../fonts/sunwaysans-italic.woff2') format('woff2'),
       url('../fonts/sunwaysans-italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SunwaySans';
  src: url('../fonts/sunwaysans-medium.woff2') format('woff2'),
       url('../fonts/sunwaysans-medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SunwaySans';
  src: url('../fonts/sunwaysans-mediumitalic.woff2') format('woff2'),
       url('../fonts/sunwaysans-mediumitalic.woff') format('woff');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SunwaySans';
  src: url('../fonts/sunwaysans-bold.woff2') format('woff2'),
       url('../fonts/sunwaysans-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SunwaySans';
  src: url('../fonts/sunwaysans-bolditalic.woff2') format('woff2'),
       url('../fonts/sunwaysans-bolditalic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SunwaySans';
  src: url('../fonts/sunwaysans-extrabold.woff2') format('woff2'),
       url('../fonts/sunwaysans-extrabold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SunwaySans';
  src: url('../fonts/sunwaysans-extrabolditalic.woff2') format('woff2'),
       url('../fonts/sunwaysans-extrabolditalic.woff') format('woff');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SunwaySans';
  src: url('../fonts/sunwaysans-black.woff2') format('woff2'),
       url('../fonts/sunwaysans-black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SunwaySans';
  src: url('../fonts/sunwaysans-blackitalic.woff2') format('woff2'),
       url('../fonts/sunwaysans-blackitalic.woff') format('woff');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* ============================================================================
   Berita Sunway — digital reading room
   A warm-charcoal stage biased toward the Sunway red, chrome that recedes,
   and one lit book sitting in a real pool of light.
   `--accent-color`, `--bg-primary` and `--page-object-fit` are written at
   runtime by app.js from the project theme — everything else derives here.
   ========================================================================== */

:root {
  color-scheme: light;

  /* runtime inputs (app.js overrides these) */
  --accent-color: #ed1c24;
  --bg-primary: #112e38;
  --page-object-fit: contain;

  /* --- warm frosted glass palette (identical to screenshot canvas_with_bs82_bg) --- */
  --stage-1: #112e38;
  --stage-2: #f3eee6;
  --stage-floor: #051a22;
  --panel: rgba(247, 243, 236, 0.86);
  --panel-solid: #f3eee6;
  --ink: #201c17;
  --ink-dim: #6a6157;
  --ink-faint: #938a7d;
  --edge: rgba(32, 28, 23, 0.14);
  --edge-strong: rgba(32, 28, 23, 0.26);
  --accent: var(--accent-color);
  --accent-glow: color-mix(in srgb, var(--accent-color) 62%, #ffffff);
  --accent-wash: color-mix(in srgb, var(--accent-color) 14%, transparent);
  --spotlight: rgba(255, 252, 245, 0.9);
  --vignette: rgba(24, 20, 15, 0.16);
  --book-shadow: rgba(0, 0, 0, 0.55);

  --bar-top: 54px;
  --bar-bottom: 46px;
  --drawer-w: 328px;
  --radius: 12px;
  --radius-sm: 9px;
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-quick: cubic-bezier(0.2, 0.8, 0.2, 1);

  --font: 'SunwaySans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

button, input, select, textarea, optgroup {
  font-family: var(--font);
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--edge-strong);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  background: var(--bg-primary, var(--stage-1));
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  user-select: none;
}

:focus-visible {
  outline: 2px solid var(--accent-glow);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------------------------------------------------------------- app shell */
#app-container {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  position: relative;
  overflow: hidden;
  background: var(--bg-primary, var(--stage-1));
}

/* ------------------------------------------------------------------ toolbars */
.top-toolbar,
.bottom-toolbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  background: var(--panel);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  z-index: 100;
}
.top-toolbar {
  height: var(--bar-top);
  border-bottom: 1px solid var(--edge);
  position: relative;
}
.bottom-toolbar {
  height: var(--bar-bottom);
  border-top: 1px solid var(--edge);
  position: relative;
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 3px;
}

/* pagination sits pinned to the true center of the bottom bar (== viewport
   center) regardless of how wide the toolbar-groups on either side are */
.pagination-group {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* pinned to the true center of the bar (== viewport center), same reason
   as .pagination-group below — the flanking toolbar-groups aren't the same
   width (2 buttons left, up to 4 right), so centering it via flex/
   justify-content would leave it visibly off-center */
.book-title-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  max-width: calc(100% - 220px);
  padding: 0 8px;
}
.book-title-container .brand-logo {
  height: 30px;
  max-width: 160px;
  object-fit: contain;
}
.book-title-container .book-title {
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
}

/* toolbar buttons - clean and borderless, no button holding each icon */
.tool-btn {
  --sz: 36px;
  flex-shrink: 0;
  width: var(--sz);
  height: var(--sz);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  transition: background 0.16s var(--ease-quick),
              color 0.16s var(--ease-quick),
              border-color 0.16s var(--ease-quick),
              transform 0.12s var(--ease-quick);
}
.tool-btn:hover {
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  color: var(--ink);
}
.tool-btn:active { transform: scale(0.92); }
.tool-btn.active { color: var(--accent); }
.tool-btn svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

/* ------------------------------------------------------------------- stage */
.flipbook-stage {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(14px, 3vw, 40px);
  isolation: isolate;
  background:
    url("../images/BS82-BG.webp?v=20260922_1") no-repeat center center / cover,
    var(--bg-primary, #112e38);
}

#flipbook-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: visible;
}

#flipbook {
  position: relative;
  display: block;
  margin: 0 auto;
  max-width: 100% !important;
  max-height: 100% !important;
  filter: drop-shadow(0 22px 46px var(--book-shadow))
          drop-shadow(0 6px 14px color-mix(in srgb, var(--book-shadow) 60%, transparent));
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
              filter 0.35s var(--ease-quick),
              opacity 0.6s var(--ease-spring);
}

.flipbook-stage.at-front-cover #flipbook {
  transform: translateX(-25%);
}

.flipbook-stage.at-back-cover #flipbook {
  transform: translateX(25%);
}

/* Floating help button — sits directly on the canvas artwork, not the
   toolbar, so it's reachable regardless of what's currently in either
   toolbar. Just the icon, no button chrome — hover only brightens it. */
.info-fab {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 60;
  width: 38px;
  height: 38px;
  border: none;
  background: none;
  color: color-mix(in srgb, var(--spotlight) 85%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.16s var(--ease-quick), transform 0.12s var(--ease-quick);
}
.info-fab:hover { color: var(--spotlight); }
.info-fab:active { transform: scale(0.92); }
.info-fab svg { width: 21px; height: 21px; }

/* Help overlay — a dimmed backdrop with one highlight ring + tooltip per
   visible control, connected by a thin leader line drawn into #info-lines.
   Built entirely at runtime (see app.js); the markup here is just the
   empty shell. */
.info-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: color-mix(in srgb, var(--stage-floor) 80%, transparent);
  cursor: pointer;
  /* opacity/visibility (not display) so it fades both ways — display can't
     be transitioned, which is why closing it used to just snap off instead
     of fading out to match the fade-in. */
  transition: opacity 0.22s var(--ease-quick), visibility 0.22s;
}
.info-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.info-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.info-lines line {
  stroke: var(--spotlight);
  stroke-width: 1.5;
  opacity: 0.65;
}

.info-highlight {
  position: fixed;
  border-radius: 10px;
  border: 2px solid var(--spotlight);
  box-shadow: 0 0 14px 2px color-mix(in srgb, var(--spotlight) 55%, transparent);
  pointer-events: none;
}

.info-tooltip {
  position: fixed;
  width: 190px;
  padding: 8px 11px;
  border-radius: var(--radius-sm);
  background: var(--panel-solid);
  border: 1px solid var(--edge);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  font-family: var(--font);
  cursor: default;
  pointer-events: none;
}
.info-tooltip-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.info-tooltip-desc {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ink-dim);
}

.info-close-hint {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--edge);
  /* Deliberately more see-through than the .info-tooltip bubbles above —
     this is a standing instruction, not one of the pointed-out controls,
     so it should read as a lighter-weight affordance. */
  background: color-mix(in srgb, var(--panel-solid) 55%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--ink-dim);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 768px) {
  .info-fab { width: 34px; height: 34px; top: 10px; right: 10px; }
  .info-fab svg { width: 19px; height: 19px; }
  .info-tooltip { width: 165px; }
}

@media (max-width: 768px) {
  .flipbook-stage.at-front-cover #flipbook,
  .flipbook-stage.at-back-cover #flipbook {
    transform: none !important;
  }
}

/* cast shadow pooled on the "floor" beneath the book */
#flipbook::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6%;
  width: 92%;
  height: 10%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, var(--stage-floor) 0%, transparent 72%);
  opacity: 0.55;
  filter: blur(14px);
  pointer-events: none;
  z-index: -1;
  transition: width 0.4s var(--ease-quick), opacity 0.4s var(--ease-quick);
}
.pt-at-cover #flipbook::after,
.pt-at-back #flipbook::after { width: 54%; opacity: 0.42; }
.pt-turning #flipbook::after { opacity: 0.34; }

/* book entrance — plays once the loading overlay lifts */
#flipbook {
  opacity: 0;
  transform: translateY(18px) scale(0.965);
}
.book-ready #flipbook {
  opacity: 1;
  transform: none;
}

/* ============================ PageTurn engine ============================ */
.pt-root {
  position: relative;
  transform-style: preserve-3d;
  perspective: 2600px;
  perspective-origin: 50% 46%;
}
.pt-book {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

/* the two resting pages */
.pt-side {
  position: absolute;
  top: 0;
  overflow: hidden;
  background: transparent;
}
.pt-side.pt-left { left: 0; }
.pt-side img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: var(--page-object-fit, cover);
}
.pt-side.pt-empty img { display: none; }

/* gutter shading either side of the spine, on the resting pages only */
.pt-side::after {
  content: '';
  position: absolute;
  top: 0;
  width: 34px;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  transition: opacity 0.25s ease;
}
.pt-side.pt-left::after {
  right: 0;
  background: linear-gradient(to left,
    rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.06) 46%, transparent 100%);
}
.pt-side.pt-right::after {
  left: 0;
  background: linear-gradient(to right,
    rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.06) 46%, transparent 100%);
}
.pt-side.pt-empty::after,
.pt-turning .pt-side::after,
.pt-at-cover .pt-side::after,
.pt-at-back .pt-side::after { opacity: 0; }

/* the turning leaf: a chain of hinged, genuinely two-sided segments */
.pt-leaf {
  position: absolute;
  top: 0;
  transform-style: preserve-3d;
  z-index: 10;
  will-change: transform;
}
.pt-seg {
  position: absolute;
  top: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.pt-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.pt-face.pt-back { transform: rotateY(180deg); }
.pt-inner {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
}
.pt-seg.pt-no-back .pt-back,
.pt-seg.pt-no-front .pt-front { visibility: hidden; }

/* soft shading that rides with the leaf as it lifts */
.pt-leaf-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 20;
  background: linear-gradient(to right,
    rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.05) 55%, transparent);
}
.pt-leaf.pt-prev .pt-leaf-shade {
  background: linear-gradient(to left,
    rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.05) 55%, transparent);
}

/* a lone cover sits centred over the spread */
.pt-at-cover .pt-book { transform: translateX(-25%); }
.pt-at-back .pt-book { transform: translateX(25%); }
.pt-book { transition: transform 0.4s var(--ease-quick); }
.pt-turning .pt-book { transition: none; }

@media (max-width: 768px) {
  .pt-at-cover .pt-book,
  .pt-at-back .pt-book { transform: none; }
}

/* zoomed: the drag gesture belongs to panning, not turning */
.is-zoomed .pt-root { pointer-events: none !important; }

/* --------------------------------------------------------------- nav arrows */
.nav-arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(56px, 9vw, 104px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  z-index: 50;
  opacity: 0;
  transition: opacity 0.2s var(--ease-quick);
}
.nav-arrow.prev { left: 0; justify-content: flex-start; padding-left: 12px; }
.nav-arrow.next { right: 0; justify-content: flex-end; padding-right: 12px; }
.flipbook-stage:hover .nav-arrow,
.nav-arrow:focus-visible { opacity: 1; }
.nav-arrow svg {
  width: 26px;
  height: 26px;
  padding: 9px;
  border-radius: 50%;
  background: var(--panel);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--edge);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  transition: background 0.16s, transform 0.16s var(--ease-quick);
}
.nav-arrow:hover svg {
  background: var(--accent);
  fill: #fff;
  transform: scale(1.08);
}

/* --------------------------------------------------------------- page count */
.page-counter {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.page-counter #page-input {
  width: 48px;
  height: 28px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  border: 1px solid var(--edge);
  border-radius: 7px;
  color: var(--ink);
  text-align: center;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.page-counter #page-input:focus { outline: none; border-color: var(--accent); }

#zoom-indicator {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
  min-width: 58px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- drawers & modals */
.drawer {
  position: absolute;
  background: var(--panel);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  z-index: 90;
  transition: transform 0.34s var(--ease-spring);
}

.drawer-left {
  top: var(--bar-top);
  left: 0;
  width: var(--drawer-w);
  height: calc(100% - var(--bar-top) - var(--bar-bottom));
  border-right: 1px solid var(--edge);
  transform: translateX(-101%);
  display: flex;
  flex-direction: column;
}
.drawer-left.open { transform: translateX(0); box-shadow: 24px 0 60px rgba(0, 0, 0, 0.28); }

.drawer-right {
  top: var(--bar-top);
  right: 0;
  width: var(--drawer-w);
  height: calc(100% - var(--bar-top) - var(--bar-bottom));
  border-left: 1px solid var(--edge);
  transform: translateX(101%);
  display: flex;
  flex-direction: column;
}
.drawer-right.open { transform: translateX(0); box-shadow: -24px 0 60px rgba(0, 0, 0, 0.28); }

/* mobile "more" drawer: items are reparented here at runtime by mobile-menu.js */
.menu-body {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 12px;
}
.menu-section-label {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  padding: 14px 16px 6px;
}
.menu-slot { display: flex; flex-direction: column; }
.menu-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 16px;
  border-radius: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.menu-row:active { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.menu-row .tool-btn {
  flex-shrink: 0;
  /* The whole row already gives unified press feedback above — without
     this, the icon button's own default tap highlight and :hover/:active
     styling would flash just around the icon, on top of that, making the
     icon look like a separate, more "clickable" element than the label
     beside it even though the whole row has always forwarded the click. */
  -webkit-tap-highlight-color: transparent;
  background: none !important;
  transform: none !important;
}
.menu-row .tool-btn.active { box-shadow: none; }
.menu-row-label {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.menu-toggle { display: none; }

.drawer-bottom {
  left: 0;
  bottom: var(--bar-bottom);
  width: 100%;
  height: 196px;
  border-top: 1px solid var(--edge);
  transform: translateY(101%);
  display: flex;
  flex-direction: column;
}
.drawer-bottom.open { transform: translateY(0); box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.3); }

.drawer-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 10px 12px 16px;
  border-bottom: 1px solid var(--edge);
}
.drawer-header h3 {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

/* TOC */
.toc-list { list-style: none; }
.toc-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-dim);
  transition: background 0.16s, color 0.16s;
}
.toc-item:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.toc-item.level-2 { padding-left: 26px; font-size: 13px; }
.toc-item.level-3 { padding-left: 40px; font-size: 12.5px; }
.toc-item .toc-page-num {
  flex-shrink: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

/* thumbnail filmstrip */
.thumb-carousel-wrapper {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.thumb-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: var(--panel);
  backdrop-filter: blur(10px);
  color: var(--ink);
  font-size: 17px;
  cursor: pointer;
  z-index: 10;
  transition: background 0.16s;
}
.thumb-nav-btn:hover { background: var(--accent); color: #fff; }
.thumb-nav-btn.prev { left: 6px; }
.thumb-nav-btn.next { right: 6px; }

.thumb-strip {
  display: flex;
  gap: 10px;
  height: 100%;
  align-items: center;
  padding: 10px 42px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
}
.thumb-strip::-webkit-scrollbar { display: none; }
.thumb-strip.dragging { cursor: grabbing; scroll-behavior: auto; }
.thumb-strip.dragging .thumb-item,
.thumb-strip.dragging .thumb-spread { pointer-events: none; }

.thumb-item {
  position: relative;
  flex: 0 0 auto;
  height: 96px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.18s var(--ease-quick), box-shadow 0.18s;
}
.thumb-item:hover { transform: translateY(-5px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.32); }
.thumb-item.active {
  box-shadow: 0 0 0 3px var(--accent-wash), 0 8px 20px rgba(0, 0, 0, 0.3);
}
.thumb-item img {
  height: 100%;
  object-fit: contain;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

/* a center-spread pair (e.g. pages 16 & 17) rendered as one flush unit,
   mirroring how the reader itself pairs facing pages */
.thumb-spread {
  display: flex;
  flex: 0 0 auto;
  height: 96px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.18s var(--ease-quick), box-shadow 0.18s;
}
.thumb-spread:hover { transform: translateY(-5px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.32); }
.thumb-spread .thumb-item {
  height: 100%;
  border-radius: 0;
  box-shadow: none;
}
.thumb-spread .thumb-item:hover { transform: none; box-shadow: none; }
.thumb-spread .thumb-item.active {
  box-shadow: 0 0 0 3px var(--accent-wash) inset;
}
.thumb-spread .thumb-item:last-child {
  box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.12);
}
.thumb-spread .thumb-item:last-child.active {
  box-shadow: 0 0 0 3px var(--accent-wash) inset, inset 1px 0 0 rgba(0, 0, 0, 0.12);
}
/* left half of a spread: page number moves to the bottom-left, mirroring
   where that page number sits in the actual open-book layout */
.thumb-spread .thumb-item:first-child .thumb-num {
  right: auto;
  left: 4px;
}
.thumb-item .thumb-num {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* modal overlays (grid + search) */
.modal-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: color-mix(in srgb, var(--stage-1) 55%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 200;
}
.modal-overlay.open { display: flex; animation: modal-fade 0.2s var(--ease-quick); }
@keyframes modal-fade { from { opacity: 0; } }

.modal-card {
  background: var(--panel-solid);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modal-rise 0.28s var(--ease-spring);
}
@keyframes modal-rise { from { opacity: 0; transform: translateY(14px) scale(0.98); } }

.modal-card { width: 520px; max-width: 100%; max-height: 78vh; }

/* Share dropdown — a small popover anchored to whichever button opened it.
   Lives outside the toolbar entirely (see index.html) so it works the same
   whether that button is in the desktop toolbar or the mobile drawer;
   position:fixed with left/top set from JS at open time, right next to the
   button's own current on-screen position. */
.share-menu {
  position: fixed;
  display: none;
  flex-direction: column;
  min-width: 190px;
  padding: 6px;
  background: var(--panel-solid);
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  z-index: 250;
}
.share-menu.open { display: flex; animation: modal-rise 0.18s var(--ease-spring); }
.share-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  transition: background 0.14s;
}
.share-menu-item:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.share-menu-item svg { width: 18px; height: 18px; flex-shrink: 0; fill: currentColor; }
.share-menu-item[data-share="facebook"] svg { color: #1877F2; }
.share-menu-item[data-share="linkedin"] svg { color: #0A66C2; }
.share-menu-item[data-share="whatsapp"] svg { color: #25D366; }
.share-menu-item[data-share="copy"] svg { color: var(--ink-faint); }

/* Bookmark menu — reuses .share-menu/.share-menu-item for the dropdown
   shell and any single-row action (Add Bookmark, Delete Bookmark), plus a
   couple of bookmark-specific pieces: an info row naming which page is
   currently bookmarked, and an inline Cancel/Overwrite confirmation row
   that only appears when replacing an existing bookmark on a different
   page (never shown for a first-time save — nothing to confirm yet). */
.bookmark-menu-info {
  padding: 8px 10px;
  font-family: var(--font);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-dim);
}
.bm-icon-filled { color: var(--accent); }
.bookmark-goto-item { width: 100%; }
.bookmark-goto-item span { flex: 1; }
.bookmark-goto-item .bookmark-goto-chevron { width: 15px; height: 15px; color: var(--ink-faint); }
.bookmark-confirm-row { display: flex; gap: 6px; padding: 2px 4px 4px; }
.bookmark-confirm-row .share-menu-item { flex: 1; justify-content: center; text-align: center; }
.bookmark-confirm-row [data-bookmark="confirm-overwrite"] { color: #fff; background: var(--accent); }
.bookmark-confirm-row [data-bookmark="confirm-overwrite"]:hover { background: color-mix(in srgb, var(--accent) 85%, black); }

/* Resume-reading tooltip — same visual language as .info-tooltip (the
   help-overlay callouts), anchored the same way as the Share/Bookmark
   dropdowns via positionDropdown() in app.js. */
.bookmark-resume-tip {
  position: fixed;
  display: none;
  flex-direction: column;
  gap: 8px;
  width: 260px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--panel-solid);
  border: 1px solid var(--edge);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  z-index: 260;
  font-family: var(--font);
}
.bookmark-resume-tip.open { display: flex; animation: modal-rise 0.22s var(--ease-spring); }
.bookmark-resume-thumb { display: flex; justify-content: center; cursor: pointer; }
.bookmark-resume-thumb .thumb-item,
.bookmark-resume-thumb .thumb-spread { height: 108px; }
.bookmark-resume-thumb .thumb-item:hover,
.bookmark-resume-thumb .thumb-spread:hover { transform: none; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); }
.bookmark-resume-text { font-size: 13px; line-height: 1.4; color: var(--ink); font-weight: 600; }
.bookmark-resume-actions { display: flex; align-items: center; gap: 8px; }
.bookmark-resume-go {
  flex: 1;
  padding: 7px 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.14s;
}
.bookmark-resume-go:hover { background: color-mix(in srgb, var(--accent) 85%, black); }
.bookmark-resume-dismiss {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-faint);
  cursor: pointer;
  font-size: 13px;
  transition: background 0.14s, color 0.14s;
}
.bookmark-resume-dismiss:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }

/* search */
.search-input-box {
  display: flex;
  gap: 8px;
  padding: 14px;
  border-bottom: 1px solid var(--edge);
}
.search-input-box input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--edge);
  border-radius: 9px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink);
  font: inherit;
  font-weight: 500;
}
.search-input-box input:focus { outline: none; border-color: var(--accent); }
.search-input-box input::placeholder { color: var(--ink-faint); }

.search-results-list {
  padding: 8px;
  overflow-y: auto;
}
.search-res-item {
  padding: 11px 13px;
  margin-bottom: 6px;
  border-radius: 9px;
  cursor: pointer;
  background: transparent;
  transition: background 0.16s, transform 0.16s;
}
.search-res-item:hover {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  transform: translateX(2px);
}
.search-res-header {
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 4px;
}
.search-res-snippet {
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-dim);
}
.search-res-snippet mark {
  background: var(--accent-wash);
  color: var(--ink);
  padding: 1px 3px;
  border-radius: 3px;
  font-weight: 700;
}

/* ------------------------------------------------------------ loading state */
.loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 120% 80% at 50% 34%, var(--spotlight) 0%, transparent 60%),
    var(--bg-primary, var(--stage-1));
  transition: opacity 0.45s var(--ease-quick), visibility 0.45s;
}
.loading-overlay.done { opacity: 0; visibility: hidden; }
.loading-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 240px;
  max-width: 64vw;
}
.loading-spinner {
  width: 34px;
  height: 34px;
  border: 2.5px solid var(--edge-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-label {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  /* --ink-faint is tuned for the light toolbar panels, not this overlay's
     dark stage background — it read as a muddy, low-contrast smudge here. */
  color: var(--spotlight);
  font-variant-numeric: tabular-nums;
}
.loading-track {
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: var(--edge);
  overflow: hidden;
}
.loading-bar {
  width: 0;
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
  transition: width 0.3s var(--ease-quick);
}

/* -------------------------------------------------------------- responsive */
@media (max-width: 768px) {
  html, body { font-size: 14px; }
  .book-title-container .book-title { max-width: 132px; }
  .drawer-left, .drawer-right { width: 100%; }
  .nav-arrow { opacity: 1; width: 48px; }
  .nav-arrow svg { padding: 7px; width: 22px; height: 22px; }
  .tool-btn { --sz: 34px; }
  #zoom-indicator { display: none; }

  /* maximize the single page: pull the stage padding in close to the edges */
  .flipbook-stage { padding: 10px 4px; }

  /* only Table of Contents stays as a direct top-toolbar item; thumbnails,
     grid, search, download, share and fullscreen are reparented into
     #drawer-menu by mobile-menu.js and reached through the hamburger
     toggle. Auto Flip, Sound, single/double View Mode and Zoom are not
     part of the mobile experience at all and are hidden outright. */
  .menu-toggle { display: inline-flex; }
  .toolbar-group:empty { display: none; }
  /* Bookmark isn't reparented into the mobile drawer (unlike Page Preview,
     which mobile-menu.js moves out on mobile), so it's the only thing left
     in this group here — pin it to the left like on desktop rather than
     centering it, or it lands directly on top of the (much wider) centered
     pagination-group. */

  #btn-sound { display: none !important; }
  .bottom-toolbar .toolbar-group:has(#btn-zoom-out) { display: none; }
}

/* Single/Double page view toggle and Visual Page Grid are not offered on
   desktop. View Mode is dropped everywhere; Grid stays reachable from the
   mobile "more" drawer only. */
#btn-view-mode { display: none !important; }
.bottom-toolbar .toolbar-group:has(#btn-view-mode) { display: none; }
/* With the view-mode group above hidden, the zoom controls are the only
   flow child left in the bottom bar (pagination-group is pinned via
   position:absolute, out of flow) — justify-content:space-between then
   collapses to flex-start, pinning them to the left. Push them to the
   right explicitly instead of relying on a sibling that's gone. */
.bottom-toolbar .toolbar-group:has(#btn-zoom-out) { margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.001s !important;
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
  }
  .pt-book, .pt-seg { transition: none !important; }
  #flipbook { opacity: 1 !important; transform: none !important; }
  .nav-arrow { opacity: 1; }
}