/* ==========================================================================
   Ocacode Flipbook — UI theme
   Restyles the toolbar, the side navigation buttons and the thumbnail drawer.
   Loaded AFTER min.css: it only overrides presentation, never the layout
   computed in JS (e.g. the thumb list row pitch of 128px).
   ========================================================================== */

/* ==========================================================================
   0. Viewport foundation
   The library turns #flipbookContainer into a position:relative .df-container
   and sizes it from its parent. With no height on html/body it lands on an
   arbitrary height that adds to the document and makes the page scroll. Pin
   the whole chain to the viewport so nothing but the book ever fills it, and
   clip anything that would otherwise poke past 100dvw x 100dvh.
   ========================================================================== */

html,
body {
  margin: 0;
  padding: 0;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

/* A hint for before the library takes over. Once it loads a document it writes
   its own inline height on the container and sizes the book to the (now
   viewport-tall) parent; we deliberately do not fight that with !important, so
   the library's own resize math keeps working. Anything it still leaves poking
   past the viewport is clipped by the overflow:hidden above. */
#flipbookContainer {
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
}

:root {
  --ui-accent: #eb5a3f;
  --ui-accent-strong: #f26e55;
  --ui-accent-soft: rgba(235, 90, 63, 0.18);

  --ui-surface: rgba(20, 20, 24, 0.72);
  --ui-surface-strong: rgba(18, 18, 21, 0.88);
  --ui-elevated: rgba(255, 255, 255, 0.08);
  --ui-elevated-hover: rgba(255, 255, 255, 0.13);

  --ui-line: rgba(255, 255, 255, 0.1);
  --ui-line-soft: rgba(255, 255, 255, 0.06);

  --ui-fg: rgba(255, 255, 255, 0.95);
  --ui-fg-dim: rgba(255, 255, 255, 0.62);

  --ui-radius-lg: 18px;
  --ui-radius: 12px;
  --ui-radius-sm: 9px;

  --ui-shadow: 0 10px 34px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
  --ui-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.35);
  --ui-blur: saturate(165%) blur(20px);

  --ui-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ui-font:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;

  --ui-drawer-w: 220px;
  --ui-drawer-head: 46px;

  /* Icon set — one stroke weight (2), round caps and joins, 24x24 box.
     Used as CSS masks, so the drawn colour is irrelevant. */
  --ui-icon-prev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
  --ui-icon-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  --ui-icon-first: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 17-5-5 5-5'/%3E%3Cpath d='m18 17-5-5 5-5'/%3E%3C/svg%3E");
  --ui-icon-last: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m13 17 5-5-5-5'/%3E%3Cpath d='m6 17 5-5-5-5'/%3E%3C/svg%3E");
  --ui-icon-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3.5 6h.01M3.5 12h.01M3.5 18h.01'/%3E%3C/svg%3E");
  --ui-icon-thumbnails: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='13.5' y='3' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='3' y='13.5' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='7.5' height='7.5' rx='1.5'/%3E%3C/svg%3E");
  --ui-icon-zoom-in: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20.5 20.5-4.2-4.2M11 8.2v5.6M8.2 11h5.6'/%3E%3C/svg%3E");
  --ui-icon-zoom-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20.5 20.5-4.2-4.2M8.2 11h5.6'/%3E%3C/svg%3E");
  --ui-icon-fullscreen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3M16 21h3a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E");
  --ui-icon-exit-fullscreen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3v3a2 2 0 0 1-2 2H3M21 8h-3a2 2 0 0 1-2-2V3M3 16h3a2 2 0 0 1 2 2v3M16 21v-3a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E");
  --ui-icon-share: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='m8.6 13.5 6.8 4M15.4 6.5l-6.8 4'/%3E%3C/svg%3E");
  --ui-icon-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E");
  --ui-icon-sound-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M19 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E");
  --ui-icon-sound-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4z'/%3E%3Cpath d='m22 9-6 6M16 9l6 6'/%3E%3C/svg%3E");
  --ui-icon-more: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h.01M12 12h.01M19 12h.01'/%3E%3C/svg%3E");
  --ui-icon-single-page: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z'/%3E%3Cpath d='M14 2v5h5'/%3E%3C/svg%3E");
  --ui-icon-double-page: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v14'/%3E%3Cpath d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z'/%3E%3C/svg%3E");
  --ui-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
  --ui-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20.5 20.5-4.2-4.2'/%3E%3C/svg%3E");
  --ui-icon-help: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.2 9.2a3 3 0 0 1 5.8 1c0 2-3 3-3 3M12 17h.01'/%3E%3C/svg%3E");
  --ui-icon-document: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z'/%3E%3Cpath d='M14 2v5h5M8.5 13h7M8.5 17h4'/%3E%3C/svg%3E");
  --ui-icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
  --ui-icon-language: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3.5 9h17M3.5 15h17'/%3E%3Cpath d='M12 3a15 15 0 0 1 0 18 15 15 0 0 1 0-18z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   1. PDF toolbar (floating control bar)
   ========================================================================== */

.df-container.df-floating .df-ui-wrapper.df-ui-controls {
  left: 50%;
  right: auto;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  width: auto;
  max-width: min(720px, calc(100vw - 24px));
  height: auto;
  padding: 6px;
  transform: translateX(-50%);

  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 2px;

  font-family: var(--ui-font);
  background: var(--ui-surface);
  -webkit-backdrop-filter: var(--ui-blur);
  backdrop-filter: var(--ui-blur);
  border: 1px solid var(--ui-line);
  border-radius: 999px;
  box-shadow: var(--ui-shadow);

  transition:
    left 0.35s var(--ui-ease),
    opacity 0.25s ease;
}

/* With the drawer open the bar recenters on the remaining space. */
.df-container.df-floating.df-sidemenu-open .df-ui-wrapper.df-ui-controls {
  left: calc(50% + (var(--ui-drawer-w) / 2));
  max-width: min(720px, calc(100vw - var(--ui-drawer-w) - 24px));
}

/* --- Toolbar buttons ------------------------------------------------ */

.df-container.df-floating .df-ui-wrapper.df-ui-controls > .df-ui-btn {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  padding: 0;
  margin: 0;
  float: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 16px;
  line-height: 1;
  color: var(--ui-fg-dim);
  background: transparent;
  border: 0;
  border-radius: var(--ui-radius);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;

  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s var(--ui-ease);
}

.df-container.df-floating .df-ui-wrapper.df-ui-controls > .df-ui-btn:hover {
  color: var(--ui-fg);
  background: var(--ui-elevated);
}

.df-container.df-floating .df-ui-wrapper.df-ui-controls > .df-ui-btn:active {
  transform: scale(0.92);
}

.df-container.df-floating
  .df-ui-wrapper.df-ui-controls
  > .df-ui-btn:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
}

/* Active state: drawer open, outline open, "more" popover open */
.df-container.df-floating .df-ui-wrapper.df-ui-controls > .df-ui-btn.df-active {
  color: var(--ui-accent-strong);
  background: var(--ui-accent-soft);
}

.df-container.df-floating .df-ui-wrapper.df-ui-controls > .df-ui-btn.disabled,
.df-container.df-floating
  .df-ui-wrapper.df-ui-controls
  > .df-ui-btn.disabled:hover {
  color: var(--ui-fg-dim);
  background: transparent;
  opacity: 0.32;
  cursor: default;
  transform: none;
}

.df-container.df-floating .df-ui-wrapper.df-ui-controls > .df-ui-btn:before {
  position: static;
  line-height: 1;
}

/* --- Group separators ------------------------------------------------ */
/* Anchored to zoomIn and more: the only buttons always present at the group
   boundaries (outline/share/download may be set to display:none).
   The divider is a box-shadow because :before is already the themify icon. */

.df-container.df-floating .df-ui-wrapper.df-ui-controls > .df-ui-zoomin,
.df-container.df-floating .df-ui-wrapper.df-ui-controls > .df-ui-more {
  margin-left: 8px;
  box-shadow: -5px 0 0 -4px rgba(255, 255, 255, 0.16);
}

/* --- Page indicator ------------------------------------------------ */

.df-container.df-floating
  .df-ui-wrapper.df-ui-controls
  > .df-ui-btn.df-ui-page {
  width: auto;
  min-width: 66px;
  height: 34px;
  padding: 0 12px;
  margin: 0 2px;
  border-radius: 999px;
  border: 1px solid var(--ui-line-soft);
  color: var(--ui-fg);
  cursor: text;

  /* The pill doubles as a reading progress bar: script.js keeps --ui-progress
     (0 to 1) in sync with the current page. */
  background-color: rgba(255, 255, 255, 0.07);
  background-image: linear-gradient(
    90deg,
    var(--ui-accent-soft) calc(var(--ui-progress, 0) * 100%),
    rgba(255, 255, 255, 0) calc(var(--ui-progress, 0) * 100%)
  );
}

.df-container.df-floating
  .df-ui-wrapper.df-ui-controls
  > .df-ui-btn.df-ui-page:hover {
  background: var(--ui-elevated-hover);
  transform: none;
}

.df-container.df-floating .df-ui-controls .df-ui-page label {
  position: static;
  display: block;
  width: auto;
  height: auto;
  padding: 0;
  line-height: 1;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: inherit;
  white-space: nowrap;
}

.df-container.df-floating .df-ui-controls .df-ui-page input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.df-container.df-floating .df-ui-controls .df-ui-page input:focus {
  opacity: 1;
  color: var(--ui-fg);
  background: rgba(0, 0, 0, 0.35);
  outline: 2px solid var(--ui-accent);
  outline-offset: 0;
}

/* --- Tooltips (title moved to data-tip by script.js) ------------------- */

.df-container.df-floating
  .df-ui-wrapper.df-ui-controls
  > .df-ui-btn[data-tip]:after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);

  padding: 6px 10px;
  border-radius: var(--ui-radius-sm);
  background: rgba(12, 12, 14, 0.96);
  border: 1px solid var(--ui-line);
  box-shadow: var(--ui-shadow-sm);

  font-family: var(--ui-font);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--ui-fg);
  white-space: nowrap;

  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.16s ease,
    transform 0.16s var(--ui-ease);
}

.df-container.df-floating
  .df-ui-wrapper.df-ui-controls
  > .df-ui-btn[data-tip]:hover:after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* The tooltip must not cover the popover opened by the same button. */
.df-container.df-floating
  .df-ui-wrapper.df-ui-controls
  > .df-ui-btn.df-active[data-tip]:hover:after {
  opacity: 0;
}

/* --- "More" & language popovers -------------------------------------------- */

.df-container .df-ui-more .more-container,
.df-container .df-ui-search .search-container,
#lang-btn .more-container {
  right: -2px;
  margin-bottom: 14px !important;
  padding: 6px;
  min-width: 196px;
  max-width: calc(100vw - 16px);

  font-family: var(--ui-font);
  background: var(--ui-surface-strong);
  -webkit-backdrop-filter: var(--ui-blur);
  backdrop-filter: var(--ui-blur);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow);
  overflow: hidden;
}

.df-container .more-container:before,
.df-container .search-container:before,
#lang-btn .more-container:before {
  border-top-color: var(--ui-surface-strong);
  right: 21px;
  bottom: -13px;
}

.df-container .more-container .df-ui-btn,
#lang-btn .more-container .df-ui-btn {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  margin: 0;
  float: none;

  display: flex;
  align-items: center;
  gap: 10px;

  text-align: left;
  font-size: 12.5px;
  line-height: 1;
  color: var(--ui-fg-dim);
  background: transparent;
  border: 0;
  border-radius: var(--ui-radius-sm);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition:
    background-color 0.16s ease,
    color 0.16s ease;
}

.df-container .more-container .df-ui-btn:hover,
#lang-btn .more-container .df-ui-btn:hover {
  color: var(--ui-fg);
  background: var(--ui-elevated);
}

.df-container .more-container .df-ui-btn.df-active,
#lang-btn .more-container .df-ui-btn.df-active {
  color: var(--ui-accent-strong);
  background: var(--ui-accent-soft);
}

.df-container .more-container .df-ui-btn:before,
#lang-btn .more-container .df-ui-btn:before {
  position: static;
  top: auto;
  width: 18px;
  flex: 0 0 18px;
  font-size: 15px;
  text-align: center;
}

.df-container .more-container .df-ui-btn span,
#lang-btn .more-container .df-ui-btn span {
  padding-left: 0;
  font-size: 12.5px;
}

#lang-container {
  max-height: min(60vh, 420px);
  overflow-y: auto;
}

/* ==========================================================================
   2. Side navigation buttons
   ========================================================================== */

.df-container.df-floating > .df-ui-btn.df-ui-prev,
.df-container.df-floating > .df-ui-btn.df-ui-next {
  width: 46px;
  height: 46px;
  padding: 0;
  margin-top: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 19px;
  color: var(--ui-fg);
  opacity: 0.72;

  background: var(--ui-surface);
  -webkit-backdrop-filter: var(--ui-blur);
  backdrop-filter: var(--ui-blur);
  border: 1px solid var(--ui-line);
  border-radius: 50%;
  box-shadow: var(--ui-shadow-sm);

  transition:
    opacity 0.2s ease,
    transform 0.2s var(--ui-ease),
    border-color 0.2s ease,
    background-color 0.2s ease,
    left 0.35s var(--ui-ease);
}

.df-container.df-floating > .df-ui-btn.df-ui-prev {
  left: 14px;
  right: auto;
}

.df-container.df-floating > .df-ui-btn.df-ui-next {
  right: 14px;
  left: auto;
}

.df-container.df-floating > .df-ui-btn.df-ui-prev:hover,
.df-container.df-floating > .df-ui-btn.df-ui-next:hover {
  opacity: 1;
  border-color: rgba(235, 90, 63, 0.55);
  background: var(--ui-surface-strong);
  transform: translateY(-50%) scale(1.07);
}

.df-container.df-floating > .df-ui-btn.df-ui-prev:active,
.df-container.df-floating > .df-ui-btn.df-ui-next:active {
  transform: translateY(-50%) scale(0.95);
}

.df-container.df-floating > .df-ui-btn.df-ui-prev:focus-visible,
.df-container.df-floating > .df-ui-btn.df-ui-next:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 3px;
  opacity: 1;
}

.df-container.df-floating > .df-ui-btn.df-ui-prev.disabled,
.df-container.df-floating > .df-ui-btn.df-ui-next.disabled {
  opacity: 0.22;
  pointer-events: none;
}

.df-container.df-floating.df-sidemenu-open > .df-ui-btn.df-ui-prev {
  left: calc(var(--ui-drawer-w) + 14px);
}

/* Hover hot zones on the book edges */
.df-book-wrapper .df-book-side-buttons {
  width: 52px;
  opacity: 0.45;
  border-radius: 0;
  color: #fff;
  transition:
    opacity 0.2s ease,
    background-color 0.2s ease;
}

.df-book-wrapper .df-book-side-buttons:hover {
  opacity: 1;
  background-color: transparent;
  background-image: linear-gradient(
    to left,
    rgba(0, 0, 0, 0.22),
    rgba(0, 0, 0, 0)
  );
}

.df-book-wrapper .df-book-prev-button.df-book-side-buttons:hover {
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.22),
    rgba(0, 0, 0, 0)
  );
}

.df-book-wrapper .df-book-side-buttons:before {
  font-size: 26px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   3. Side drawer (page thumbnails / outline)
   ========================================================================== */

.df-container .df-sidemenu {
  width: var(--ui-drawer-w);
  left: 0;
  font-family: var(--ui-font);
  background: var(--ui-surface-strong);
  -webkit-backdrop-filter: var(--ui-blur);
  backdrop-filter: var(--ui-blur);
  border-right: 1px solid var(--ui-line);
  box-shadow: 8px 0 32px rgba(0, 0, 0, 0.45);
  transform: translateX(-100%);
  transition: transform 0.38s var(--ui-ease);
}

.df-container .df-sidemenu.df-sidemenu-visible {
  transform: translateX(0);
}

/* Heading: the label comes from script.js through a custom property. */
.df-container .df-sidemenu:before {
  content: var(--ui-drawer-title, "Pages");
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--ui-drawer-head);
  z-index: 2;

  display: flex;
  align-items: center;
  padding: 0 16px;

  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ui-fg-dim);

  background: rgba(255, 255, 255, 0.035);
  border-bottom: 1px solid var(--ui-line);
}

.df-container .df-outline-container.df-sidemenu:before {
  content: var(--ui-outline-title, "Contents");
}

.df-container .df-thumb-wrapper,
.df-container .df-outline-wrapper {
  top: var(--ui-drawer-head) !important;
  bottom: 0;
  margin-bottom: 0;
  box-shadow: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

.df-container .df-thumb-wrapper::-webkit-scrollbar,
.df-container .df-outline-wrapper::-webkit-scrollbar {
  width: 8px;
}

.df-container .df-thumb-wrapper::-webkit-scrollbar-thumb,
.df-container .df-outline-wrapper::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}

.df-container .df-thumb-wrapper::-webkit-scrollbar-thumb:hover,
.df-container .df-outline-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.32);
  background-clip: content-box;
}

/* --- Thumbnails ----------------------------------------------------------- */
/* NOTE: the virtual list pins the row pitch to 128px (itemHeight), so
   height + vertical margins must keep adding up to 128px. */

.df-container .df-thumb-container .df-vrow {
  width: calc(100% - 28px);
  height: 118px;
  margin: 5px auto;
  padding-bottom: 22px;
  box-sizing: border-box;

  background-color: rgba(255, 255, 255, 0.05);
  background-origin: content-box;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-sm);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);

  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.df-container.df-floating .df-thumb-container .df-vrow:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
}

.df-container .df-thumb-container .df-vrow.df-selected,
.df-container.df-floating .df-thumb-container .df-vrow.df-selected:hover {
  background-color: var(--ui-accent-soft);
  border-color: var(--ui-accent);
  box-shadow:
    0 0 0 1px rgba(235, 90, 63, 0.45),
    0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Thumbnail loading spinner, centered */
.df-container .df-thumb-container .df-vrow:before {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  opacity: 0.55;
}

/* Page number badge */
.df-container .df-thumb-container .df-vrow > div {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);

  width: auto;
  min-width: 28px;
  height: 18px;
  padding: 0 7px;
  margin: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ui-fg);

  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease;
}

.df-container .df-thumb-container .df-vrow.df-selected > div {
  background: var(--ui-accent);
  border-color: transparent;
  color: #fff;
}

/* --- Outline / bookmarks -------------------------------------------------- */

.df-container .df-outline-container {
  color: var(--ui-fg-dim);
  font-size: 12.5px;
}

.df-container .df-outline-wrapper {
  padding: 10px 8px 20px;
}

.df-container .df-outline-item a {
  padding: 7px 10px;
  border-radius: var(--ui-radius-sm);
  color: var(--ui-fg-dim) !important;
  line-height: 1.35;
}

.df-container .df-outline-item a:hover,
.df-container .df-outline-toggle:hover {
  color: var(--ui-fg) !important;
  background-color: var(--ui-elevated);
  border-radius: var(--ui-radius-sm);
}

.df-container .df-outline-toggle {
  color: var(--ui-fg-dim);
  border-radius: 4px;
}

/* --- Drawer toggle (the tab on the edge of the drawer) -------------------
   It stays on screen when the drawer slides away, so it works both ways:
   closing the drawer when open, reopening it when closed (see script.js).  */

.df-container .df-sidemenu .df-ui-btn.df-ui-sidemenu-close {
  top: 8px;
  right: -38px;
  width: 38px;
  height: 38px;
  padding: 0;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 13px;
  color: var(--ui-fg-dim);
  background: var(--ui-surface-strong);
  -webkit-backdrop-filter: var(--ui-blur);
  backdrop-filter: var(--ui-blur);
  border: 1px solid var(--ui-line);
  border-left: 0;
  border-radius: 0 var(--ui-radius) var(--ui-radius) 0;
  box-shadow: var(--ui-shadow-sm);
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}

.df-container .df-sidemenu .df-ui-btn.df-ui-sidemenu-close:hover {
  color: #fff;
  background: var(--ui-accent);
  border-color: transparent;
}

.df-container .df-sidemenu .df-ui-btn.df-ui-sidemenu-close:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
  color: var(--ui-fg);
}

/* Closed: the tab is the way back in, so it points the drawer's way. */
.df-container
  .df-sidemenu:not(.df-sidemenu-visible)
  .df-ui-btn.df-ui-sidemenu-close:before {
  -webkit-mask-image: var(--ui-icon-next);
  mask-image: var(--ui-icon-next);
}

.df-container
  .df-sidemenu:not(.df-sidemenu-visible)
  .df-ui-btn.df-ui-sidemenu-close {
  width: 30px;
  right: -30px;
  color: var(--ui-fg-dim);
  background: var(--ui-surface);
}

/* Only the thumbnails tab reopens: two stacked tabs would collide, and the
   outline is reachable from the toolbar. */
.df-container
  .df-outline-container.df-sidemenu:not(.df-sidemenu-visible)
  .df-ui-btn.df-ui-sidemenu-close {
  display: none;
}

/* ==========================================================================
   4. Loading states & screens
   The library ships an animated GIF for both the page and the thumbnail
   spinners; a CSS ring is sharp at any density and follows the accent colour.
   ========================================================================== */

@keyframes ui-spin {
  to {
    transform: rotate(360deg);
  }
}

.df-container .df-page-loading:before {
  width: 38px;
  height: 38px;
  margin: -19px;
  background-color: transparent;
  border: 3px solid rgba(120, 120, 130, 0.22);
  border-radius: 50%;
}

.df-container .df-page-loading:after {
  width: 38px;
  height: 38px;
  margin: -19px;
  background-image: none;
  border: 3px solid transparent;
  border-top-color: var(--ui-accent);
  border-radius: 50%;
  animation: ui-spin 0.7s linear infinite;
}

.df-container .df-thumb-container .df-vrow:before {
  width: 20px;
  height: 20px;
  background-image: none;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-top-color: var(--ui-accent);
  border-radius: 50%;
  opacity: 1;
  animation: ui-spin 0.7s linear infinite;
}

/* Message screens (no document, load failure) rendered by script.js.
   Fixed to the viewport, not the container: the library may leave the
   container at an arbitrary height, and a state message must cover the
   whole screen and sit above any leftover book/loading layers. */
.ui-screen {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  font-family: var(--ui-font);
  color: var(--ui-fg);
  background: #16161a;
}

.ui-screen__icon {
  width: 52px;
  height: 52px;
  background-color: var(--ui-fg-dim);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: var(--ui-icon-document);
  mask-image: var(--ui-icon-document);
}

.ui-screen--error .ui-screen__icon {
  background-color: var(--ui-accent);
  -webkit-mask-image: var(--ui-icon-alert);
  mask-image: var(--ui-icon-alert);
}

.ui-screen__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ui-screen__text {
  margin: 0;
  max-width: 34ch;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ui-fg-dim);
}

.ui-screen__action {
  margin-top: 4px;
  padding: 9px 18px;
  font: inherit;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--ui-fg);
  background: var(--ui-elevated);
  border: 1px solid var(--ui-line);
  border-radius: 999px;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease;
}

.ui-screen__action:hover {
  background: var(--ui-elevated-hover);
  border-color: rgba(235, 90, 63, 0.5);
}

.ui-screen__action:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
}

/* ==========================================================================
   5. Icons
   The themify icon font is replaced by inline SVG shapes drawn through a CSS
   mask, so every glyph shares one stroke weight and takes its colour from the
   button (hover, active, disabled) instead of carrying its own.
   The library keeps assigning ti-* classes, so these hook onto those names.
   ========================================================================== */

.df-container .df-ui-btn[class*="ti-"]:before,
.df-container .df-book-side-buttons[class*="ti-"]:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  font-size: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.df-container .df-ui-btn.ti-angle-left:before {
  -webkit-mask-image: var(--ui-icon-prev);
  mask-image: var(--ui-icon-prev);
}

.df-container .df-ui-btn.ti-angle-right:before {
  -webkit-mask-image: var(--ui-icon-next);
  mask-image: var(--ui-icon-next);
}

.df-container .df-ui-btn.ti-angle-double-left:before {
  -webkit-mask-image: var(--ui-icon-first);
  mask-image: var(--ui-icon-first);
}

.df-container .df-ui-btn.ti-angle-double-right:before {
  -webkit-mask-image: var(--ui-icon-last);
  mask-image: var(--ui-icon-last);
}

.df-container .df-ui-btn.ti-menu-alt:before {
  -webkit-mask-image: var(--ui-icon-outline);
  mask-image: var(--ui-icon-outline);
}

.df-container .df-ui-btn.ti-layout-grid2:before {
  -webkit-mask-image: var(--ui-icon-thumbnails);
  mask-image: var(--ui-icon-thumbnails);
}

.df-container .df-ui-btn.ti-zoom-in:before {
  -webkit-mask-image: var(--ui-icon-zoom-in);
  mask-image: var(--ui-icon-zoom-in);
}

.df-container .df-ui-btn.ti-zoom-out:before {
  -webkit-mask-image: var(--ui-icon-zoom-out);
  mask-image: var(--ui-icon-zoom-out);
}

.df-container .df-ui-btn.ti-fullscreen:before {
  -webkit-mask-image: var(--ui-icon-fullscreen);
  mask-image: var(--ui-icon-fullscreen);
}

.df-container .df-ui-btn.ti-arrows-corner:before {
  -webkit-mask-image: var(--ui-icon-exit-fullscreen);
  mask-image: var(--ui-icon-exit-fullscreen);
}

.df-container .df-ui-btn.ti-share-alt:before {
  -webkit-mask-image: var(--ui-icon-share);
  mask-image: var(--ui-icon-share);
}

.df-container .df-ui-btn.ti-download:before {
  -webkit-mask-image: var(--ui-icon-download);
  mask-image: var(--ui-icon-download);
}

.df-container .df-ui-btn.ti-volume:before {
  -webkit-mask-image: var(--ui-icon-sound-on);
  mask-image: var(--ui-icon-sound-on);
}

/* The library marks a muted book as disabled rather than swapping the icon. */
.df-container .df-ui-btn.ti-volume.disabled:before {
  -webkit-mask-image: var(--ui-icon-sound-off);
  mask-image: var(--ui-icon-sound-off);
}

.df-container .df-ui-btn.ti-more-alt:before {
  -webkit-mask-image: var(--ui-icon-more);
  mask-image: var(--ui-icon-more);
}

.df-container .df-ui-btn.ti-file:before {
  -webkit-mask-image: var(--ui-icon-single-page);
  mask-image: var(--ui-icon-single-page);
}

.df-container .df-ui-btn.ti-book:before {
  -webkit-mask-image: var(--ui-icon-double-page);
  mask-image: var(--ui-icon-double-page);
}

.df-container .df-ui-btn.ti-close:before {
  -webkit-mask-image: var(--ui-icon-close);
  mask-image: var(--ui-icon-close);
}

.df-container .df-ui-btn.ti-search:before {
  -webkit-mask-image: var(--ui-icon-search);
  mask-image: var(--ui-icon-search);
}

.df-container .df-ui-btn.ti-help-alt:before {
  -webkit-mask-image: var(--ui-icon-help);
  mask-image: var(--ui-icon-help);
}

#lang-btn.df-ui-btn.ti-world:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  font-size: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: var(--ui-icon-language);
  mask-image: var(--ui-icon-language);
}

/* Sizes per context: popover rows and the drawer close button read better a
   little smaller, the big side arrows a little larger. */
.df-container .more-container .df-ui-btn[class*="ti-"]:before,
#lang-btn .more-container .df-ui-btn[class*="ti-"]:before {
  width: 17px;
  height: 17px;
}

.df-container .df-sidemenu .df-ui-btn.df-ui-sidemenu-close:before {
  width: 15px;
  height: 15px;
}

.df-container.df-floating > .df-ui-btn.df-ui-prev:before,
.df-container.df-floating > .df-ui-btn.df-ui-next:before {
  width: 22px;
  height: 22px;
}

.df-book-wrapper .df-book-side-buttons:before {
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.55));
}

/* ==========================================================================
   6. Responsive
   ========================================================================== */

@media (max-width: 640px) {
  :root {
    --ui-drawer-w: 190px;
  }

  .df-container.df-floating .df-ui-wrapper.df-ui-controls {
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100vw - 16px);
    padding: 5px;
    border-radius: 20px;
  }

  /* On narrow screens buttons may shrink instead of overflowing the pill,
     so the bar always stays fully visible. */
  .df-container.df-floating .df-ui-wrapper.df-ui-controls > .df-ui-btn {
    flex: 0 1 auto;
    width: 36px;
    min-width: 30px;
    height: 36px;
    font-size: 15px;
  }

  .df-container.df-floating
    .df-ui-wrapper.df-ui-controls
    > .df-ui-btn.df-ui-page {
    flex: 0 0 auto;
    height: 32px;
    min-width: 60px;
    padding: 0 10px;
  }

  .df-container.df-floating .df-ui-wrapper.df-ui-controls > .df-ui-zoomin,
  .df-container.df-floating .df-ui-wrapper.df-ui-controls > .df-ui-zoomout {
    display: none;
  }

  .df-container.df-floating.df-sidemenu-open .df-ui-wrapper.df-ui-controls {
    left: 50%;
    max-width: calc(100vw - 16px);
  }

  .df-container.df-floating > .df-ui-btn.df-ui-prev,
  .df-container.df-floating > .df-ui-btn.df-ui-next {
    width: 40px;
    height: 40px;
    font-size: 17px;
  }

  .df-container.df-floating
    .df-ui-wrapper.df-ui-controls
    > .df-ui-btn[data-tip]:hover:after {
    opacity: 0;
  }
}

.df-container.df-xs.df-floating .df-ui-controls > .df-ui-btn.df-ui-zoomin,
.df-container.df-xs.df-floating .df-ui-controls > .df-ui-btn.df-ui-zoomout {
  display: none;
}

/* ==========================================================================
   7. Accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .df-container .df-thumb-wrapper,
  .df-container .df-outline-wrapper {
    scroll-behavior: auto;
  }

  .df-container .df-page-loading:after,
  .df-container .df-thumb-container .df-vrow:before {
    animation-duration: 1.8s;
  }

  .df-container .df-sidemenu,
  .df-container.df-floating .df-ui-wrapper.df-ui-controls,
  .df-container.df-floating > .df-ui-btn.df-ui-prev,
  .df-container.df-floating > .df-ui-btn.df-ui-next,
  .df-container .df-thumb-container .df-vrow,
  .df-container.df-floating .df-ui-wrapper.df-ui-controls > .df-ui-btn {
    transition-duration: 0.01ms !important;
  }
}