/* =====================================================================
   orb2bit PDF Splitter — Web app
   Mirrors the desktop app's UI: top bar, filmstrip, stage (viewer/grid),
   View · Split · Crop tools sidebar, status bar. Same palette as main.py.
   ===================================================================== */

:root {
  --bg:          #0b0e17;   /* deep space background      */
  --panel:       #111827;   /* panel / sidebar            */
  --card:        #1e2235;   /* card surface               */
  --card-hover:  #272d45;
  --card-btn:    #2a3150;
  --card-btn-hover: #363e63;
  --accent:      #818cf8;   /* indigo-400                 */
  --accent-hover:#a5b4fc;
  --accent-glow: #312e81;   /* indigo-900                 */
  --success:     #34d399;
  --success-hover:#6ee7b7;
  --danger:      #f87171;
  --danger-hover:#fca5a5;
  --text:        #f1f5f9;
  --text-2:      #94a3b8;
  --dim:         #64748b;
  --line:        #1e293b;
  --sel-bg:      #1e1b4b;   /* indigo-950                 */
  --font: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
}

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

/* Author display rules must never resurrect [hidden] elements. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; cursor: pointer; border: 0; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.app {
  display: grid;
  grid-template-rows: 60px 1fr 30px;
  height: 100vh;
  height: 100dvh;
}

/* ───────────────────────────── Top bar ───────────────────────────── */

.topbar {
  background: var(--panel);
  border-top: 3px solid var(--accent);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  min-width: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: none;
}
.brand img { width: 32px; height: 32px; }
.brand .name { font-size: 18px; font-weight: 700; white-space: nowrap; }
.brand .name .o { color: var(--accent); }
.brand .name .s { color: var(--text); }
.brand .ver {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-glow);
  border-radius: 5px;
  padding: 2px 7px;
  margin-left: 4px;
}

.file-label {
  font-size: 12px;
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.pagecount {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-glow);
  border-radius: 6px;
  padding: 3px 9px;
  white-space: nowrap;
  display: none;
}
.pagecount.on { display: inline-block; }

.topbar .spacer { flex: 1; }

/* Slot the shared sign-in / avatar button (orb2bit-auth.js) drops into. */
.topbar .nav-cta { display: flex; align-items: center; gap: 8px; flex: none; }
.topbar .nav-cta:empty { display: none; }

/* Fast Select switch (CTkSwitch look-alike) */
.switch {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  flex: none;
}
.switch input { display: none; }
.switch .track {
  width: 40px; height: 20px;
  border-radius: 999px;
  background: var(--card-btn);
  position: relative;
  transition: background 0.18s;
  flex: none;
}
.switch .track::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #cbd5e1;
  transition: transform 0.18s, background 0.18s;
}
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(20px); background: #0b0e17; }

.tb-btn {
  height: 38px;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: #0b0e17;
  white-space: nowrap;
  flex: none;
  transition: filter 0.13s, transform 0.13s;
}
.tb-btn:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); }
.tb-btn:active:not(:disabled) { transform: translateY(0); }
.tb-btn.accent {
  background: linear-gradient(160deg, var(--accent-hover), var(--accent));
  box-shadow: 0 8px 20px -10px rgba(129, 140, 248, 0.55);
}
.tb-btn.danger {
  background: linear-gradient(160deg, var(--danger-hover), var(--danger));
  box-shadow: 0 8px 20px -10px rgba(248, 113, 113, 0.4);
}
.tb-btn:disabled { box-shadow: none; }

/* ───────────────────────────── Body ───────────────────────────── */

.body {
  display: grid;
  grid-template-columns: 150px 1fr 372px;
  gap: 14px;
  padding: 14px;
  min-height: 0;
}
/* The filmstrip is removed from the grid in Split mode, so the template
   must lose its column too — otherwise the stage lands in the empty slot. */
.body.no-film { grid-template-columns: 1fr 372px; }
.body.no-film .film-host { display: none; }

/* ── Filmstrip ── */
.film-host {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.film-host .film-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  padding: 0 4px 6px;
}
.film {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-glow) transparent;
}

.ftile {
  width: 96px;
  border-radius: 9px;
  background: var(--card);
  border: 2px solid var(--line);
  padding: 6px 6px 2px;
  cursor: pointer;
  flex: none;
  text-align: center;
  transition: border-color 0.12s, background 0.12s;
}
.ftile .fimg {
  width: 84px; height: 106px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ftile canvas { max-width: 100%; max-height: 100%; display: block; }
.ftile .fnum { font-size: 10px; color: var(--dim); line-height: 16px; }
.ftile.current { border-color: var(--accent); }
.ftile.current .fnum { color: var(--accent); }
.ftile.sel { border-color: var(--accent); background: var(--sel-bg); }
.ftile.sel .fnum { color: var(--accent); }

/* ── Stage ── */
.stage { position: relative; min-width: 0; min-height: 0; }

.stage > .pane {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  min-height: 0;
}
.stage > .pane.on { display: flex; }

/* Viewer */
.viewer {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.viewer-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--bg);
  scrollbar-width: thin;
  scrollbar-color: var(--accent-glow) transparent;
}
.viewer-inner {
  min-width: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  width: max-content;
  height: max-content;
}
.page-wrap { position: relative; flex: none; box-shadow: 0 10px 40px -12px rgba(0,0,0,0.8); }
.page-wrap canvas { display: block; background: #fff; }

.viewer-empty {
  position: absolute;
  inset: 0 0 56px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dim);
  font-size: 15px;
  text-align: center;
  pointer-events: none;
  white-space: pre-line;
}

.viewer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: var(--panel);
  flex: none;
}
.vb-group { display: flex; align-items: center; gap: 4px; }
.vb-btn {
  width: 38px; height: 32px;
  border-radius: 8px;
  background: var(--card-btn);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vb-btn:hover:not(:disabled) { background: var(--card-btn-hover); }
.vb-label { min-width: 84px; text-align: center; font-size: 12px; font-weight: 700; color: var(--text); }
.vb-zoom  { min-width: 52px; text-align: center; font-size: 12px; color: var(--text-2); }

/* ── Crop overlay ── */
.crop-layer { position: absolute; inset: 0; display: none; touch-action: none; }
.crop-layer.on { display: block; }
.crop-dim { position: absolute; background: rgba(5, 7, 13, 0.55); pointer-events: none; }
.crop-box {
  position: absolute;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 2px rgba(11, 14, 23, 0.9);
  pointer-events: none;
}
.crop-box .third {
  position: absolute;
  pointer-events: none;
  border-color: rgba(129, 140, 248, 0.75) !important;
}
.crop-box .third.v { top: 0; bottom: 0; border-left: 1px dashed; }
.crop-box .third.h { left: 0; right: 0; border-top: 1px dashed; }
.crop-box .third.v1 { left: 33.333%; }
.crop-box .third.v2 { left: 66.667%; }
.crop-box .third.h1 { top: 33.333%; }
.crop-box .third.h2 { top: 66.667%; }
.crop-handle {
  position: absolute;
  width: 12px; height: 12px;
  background: var(--accent);
  border: 2px solid #0b0e17;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* ── Watermark live-preview layer (sits over the page, under the crop UI) ──
   .page-wrap .wm-layer outranks the generic `.page-wrap canvas` rule, which
   would otherwise force this canvas visible with a white background. */
.page-wrap .wm-layer {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
  background: transparent;
}
.page-wrap .wm-layer.on { display: block; }

/* ── Split page grid ── */
.grid-pane {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.grid-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-glow) transparent;
}
.page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 16px;
}
.gtile {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 9px 9px 0;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  text-align: center;
  transition: border-color 0.1s, background 0.1s;
  touch-action: pan-y;
}
.gtile .gimg {
  aspect-ratio: 1 / 1.3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.gtile canvas { max-width: 100%; max-height: 100%; display: block; pointer-events: none; }
.gtile .gnum { font-size: 11.5px; color: var(--text-2); line-height: 24px; }
.gtile:hover { border-color: var(--card-btn-hover); }
.gtile.sel { border-color: var(--accent); background: var(--sel-bg); }
.gtile.sel .gnum { color: var(--accent); }

.grid-empty {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--dim);
  font-size: 13.5px;
  white-space: pre-line;
}

/* ── Combined-document preview (Merge tool) ── */
.merge-pane {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.merge-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 16px 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-glow) transparent;
}
.merge-preview { display: flex; flex-direction: column; }
.mp-section { padding-bottom: 8px; }
.mp-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 4px 12px;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}
.mp-badge {
  min-width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--accent);
  color: #0b0e17;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  flex: none;
}
.mp-name { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-meta { font-size: 11px; color: var(--dim); margin-left: auto; white-space: nowrap; flex: none; }
.mp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.mp-tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 8px 0;
  text-align: center;
}
.mp-img {
  aspect-ratio: 1 / 1.3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.mp-img canvas { max-width: 100%; max-height: 100%; display: block; background: #fff; box-shadow: 0 4px 14px -6px rgba(0,0,0,0.7); }
.mp-num { font-size: 11px; color: var(--text-2); line-height: 22px; }
.merge-empty {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--dim);
  font-size: 13.5px;
  white-space: pre-line;
  padding: 20px;
}

/* ── Hover preview popup ── */
.preview-pop {
  position: fixed;
  z-index: 60;
  background: var(--card);
  border: 2px solid var(--accent);
  border-radius: 14px;
  padding: 6px 8px 8px;
  box-shadow: 0 24px 70px -20px rgba(0, 0, 0, 0.85);
  display: none;
}
.preview-pop.on { display: block; }
.preview-pop .hint { font-size: 10px; color: var(--dim); text-align: center; padding-bottom: 4px; }
.preview-pop canvas { display: block; border-radius: 4px; }

/* ───────────────────────────── Tools sidebar ───────────────────────────── */

.tools-host {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.tools-title {
  font-size: 15px;
  font-weight: 700;
  padding: 0 4px 6px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
/* Back to the tool hub — each tool also has its own page. */
.tools-all-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #9fadd0);
  text-decoration: none;
  white-space: nowrap;
}
.tools-all-link:hover { color: var(--accent, #7dd3fc); }
.tools {
  flex: 1;
  min-height: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  /* the tool popup is positioned against this box */
  position: relative;
}

/* ── Tool selector ─────────────────────────────────────────────────────
   The twelve-button grid used to sit here permanently, costing ~215 px of
   a panel that also has to hold each tool's settings. It is now one chip
   that opens the grid as a popup. */
.tool-select {
  display: flex;
  align-items: center;
  gap: 9px;
  width: calc(100% - 32px);
  margin: 12px 16px 8px;
  padding: 0 12px;
  height: 42px;
  flex: none;
  border-radius: 11px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: background 0.13s, border-color 0.13s;
}
.tool-select:hover { background: var(--card-hover); border-color: var(--accent-glow); }
.tool-select .ts-ico { font-size: 16px; line-height: 1; }
.tool-select .ts-name {
  flex: 1;
  text-align: left;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.tool-select .ts-chev {
  font-size: 12px;
  color: var(--text-2);
  transition: transform 0.16s;
}
.tool-select[aria-expanded="true"] .ts-chev { transform: rotate(180deg); }
.tool-select[aria-expanded="true"] { border-color: var(--accent); }

.tool-pop {
  position: absolute;
  z-index: 40;
  top: 58px;
  left: 16px;
  right: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.75);
  padding: 6px;
  animation: toolPopIn 0.13s ease-out;
}
.tool-pop[hidden] { display: none; }
@keyframes toolPopIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tool-pop { animation: none; }
  .tool-select .ts-chev { transition: none; }
}

.tabbar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  background: transparent;
  border: 0;
  border-radius: 13px;
  padding: 0;
  margin: 0;
  flex: none;
}
.tab-btn {
  height: 46px;
  border-radius: 9px;
  background: transparent;
  color: var(--text-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 2px;
  transition: background 0.12s, color 0.12s;
}
.tab-btn .ti { font-size: 15px; line-height: 1; }
.tab-btn .tl {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}
.tab-btn:hover { background: var(--card-hover); color: var(--text); }
.tab-btn.on {
  background: linear-gradient(160deg, var(--accent-hover), var(--accent));
  color: #0b0e17;
  box-shadow: 0 4px 14px -6px rgba(129, 140, 248, 0.65);
}

/* The clip that used to live on .tools sits here instead: .tools can no
   longer hide its overflow or it would cut off the tool popup, and this is
   the box whose square corners would otherwise poke past the panel's
   rounded ones. */
.tab-panels {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  border-radius: 0 0 15px 15px;
}
.tab-panel {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  padding: 8px 16px 14px;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-glow) transparent;
}
.tab-panel.on { display: flex; }

.tp-h { font-size: 14px; font-weight: 700; padding: 8px 4px 4px; }
.tp-p { font-size: 12px; color: var(--text-2); line-height: 1.55; padding: 0 4px 14px; }
.tp-dim-label { font-size: 12px; color: var(--dim); padding: 0 4px 12px; }
.tp-dim-label.active { color: var(--accent); }
.tp-sub { font-size: 12px; font-weight: 700; color: var(--text-2); padding: 0 4px 4px; }

.big-btn {
  width: 100%;
  height: 44px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  color: #0b0e17;
  margin-bottom: 8px;
  flex: none;
  transition: filter 0.13s, transform 0.13s, box-shadow 0.13s;
}
.big-btn:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); }
.big-btn:active:not(:disabled) { transform: translateY(0); }
.big-btn.accent {
  background: linear-gradient(160deg, var(--accent-hover), var(--accent));
  box-shadow: 0 8px 22px -10px rgba(129, 140, 248, 0.55);
}
.big-btn.success {
  background: linear-gradient(160deg, var(--success-hover), var(--success));
  box-shadow: 0 8px 22px -10px rgba(52, 211, 153, 0.45);
}
.big-btn.danger {
  background: linear-gradient(160deg, var(--danger-hover), var(--danger));
  box-shadow: 0 8px 22px -10px rgba(248, 113, 113, 0.4);
}
.big-btn:disabled { box-shadow: none; }
.big-btn.ghost {
  background: var(--card-btn);
  color: var(--text-2);
  font-size: 12px;
  height: 38px;
}
.big-btn.ghost:hover:not(:disabled) { background: var(--card-btn-hover); }

.mid-btn {
  width: 100%;
  height: 42px;
  border-radius: 12px;
  background: var(--card-btn);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  margin: 4px 0;
  text-align: left;
  padding: 0 14px;
}
.mid-btn:hover:not(:disabled) { background: var(--card-btn-hover); }
.mid-btn.on { background: var(--accent); color: #0b0e17; }
.mid-btn.on:hover:not(:disabled) { background: var(--accent-hover); }

/* Split tab (visibility is governed by .tab-panel/.on — don't set display here) */
.split-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 2px 8px;
  flex: none;
}
.split-head .hint { font-size: 12px; color: var(--text-2); }
.sel-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-glow);
  border-radius: 6px;
  padding: 2px 8px;
  display: none;
}
.sel-badge.on { display: inline-block; }

.groups {
  flex: 1;
  min-height: 120px;
  overflow-y: auto;
  margin: 2px 0 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-glow) transparent;
}
.groups-empty {
  text-align: center;
  color: var(--dim);
  font-size: 13px;
  line-height: 1.7;
  padding: 60px 10px;
  white-space: pre-line;
}

.split-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px 10px;
  margin: 4px 2px 8px;
}
.split-card.editing { border: 2px solid var(--accent); }
.split-card.dragging { border: 2px solid var(--accent); opacity: 0.9; }
.sc-head { display: flex; align-items: center; gap: 8px; }
.sc-drag {
  color: var(--dim);
  font-size: 14px;
  font-weight: 700;
  cursor: ns-resize;
  padding: 0 2px;
  user-select: none;
  touch-action: none;
}
.sc-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-glow);
  border-radius: 6px;
  min-width: 26px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}
.sc-title { font-size: 13px; font-weight: 700; flex: 1; }
.sc-btn {
  height: 30px;
  border-radius: 9px;
  background: var(--card-btn);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
  padding: 0 10px;
}
.sc-btn:hover { background: var(--card-btn-hover); }
.sc-btn.editing { background: var(--accent); color: #0b0e17; }
.sc-btn.del { width: 34px; padding: 0; font-size: 13px; }
.sc-btn.del:hover { background: var(--danger); color: #000; }
.sc-range {
  font-size: 12px;
  color: var(--text-2);
  padding: 8px 2px 2px;
  word-break: break-word;
}
.sc-foot { font-size: 10px; color: var(--dim); padding: 4px 2px 2px; }
.sc-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0 2px; }
.chip {
  min-width: 32px;
  height: 26px;
  border-radius: 7px;
  background: var(--accent-glow);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.chip.dragging { background: var(--accent); color: #0b0e17; cursor: grabbing; }

.split-actions {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
  flex: none;
}
.split-actions .big-btn { margin-bottom: 0; }

/* Split modes — one sub-panel per mode; Pick pages grows so .groups can scroll */
.split-mode { display: none; flex-direction: column; flex: 1; min-height: 0; }
.split-mode.on { display: flex; }
.split-pv {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.55;
  padding: 4px 4px 14px;
  word-break: break-word;
}

/* Crop tab */
.seg {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 4px;
  margin: 0 2px 16px;
}
.seg button {
  height: 30px;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  transition: background 0.12s, color 0.12s;
}
.seg button:hover { background: var(--card-hover); color: var(--text); }
.seg button.on {
  background: linear-gradient(160deg, var(--accent-hover), var(--accent));
  color: #0b0e17;
  font-weight: 700;
}

/* Watermark tab */
.wm-input {
  width: 100%;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 0 14px;
  margin: 0 0 10px;
  outline: none;
  flex: none;
}
.wm-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.18); }
.wm-input::placeholder { color: var(--dim); font-weight: 400; }

.wm-fontrow {
  display: grid;
  grid-template-columns: 1fr 40px 40px;
  gap: 6px;
  margin-bottom: 12px;
  flex: none;
}
.wm-select {
  height: 34px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  padding: 0 10px;
  outline: none;
  cursor: pointer;
}
.wm-select:focus { border-color: var(--accent); }
.wm-style {
  height: 34px;
  border-radius: 9px;
  background: var(--card-btn);
  color: var(--text-2);
  font-size: 14px;
  font-weight: 800;
}
.wm-style.italic { font-style: italic; font-family: Georgia, "Times New Roman", serif; }
.wm-style:hover { background: var(--card-btn-hover); }
.wm-style.on { background: var(--accent); color: #0b0e17; }

.wm-sliderrow {
  display: grid;
  grid-template-columns: 54px 1fr 44px;
  align-items: center;
  gap: 8px;
  padding: 5px 2px;
  flex: none;
}
/* Edit ▸ Style block (drop shadow + backdrop/fill, shared by every tool) */
#editStylePanel {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--card-btn);
}
#editStylePanel .wm-swatches { margin: 4px 0 6px; }
#editShadowKnobs {
  margin: 2px 0 6px;
  padding: 2px 6px;
  background: var(--card-btn);
  border-radius: 10px;
}
.wm-lbl { font-size: 12px; color: var(--text-2); }
.wm-val { font-size: 11px; font-weight: 700; color: var(--accent); text-align: right; }
.wm-sliderrow input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--card-btn);
  outline: none;
  cursor: pointer;
}
.wm-sliderrow input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #0b0e17;
  box-shadow: 0 0 8px rgba(129, 140, 248, 0.5);
  cursor: pointer;
}
.wm-sliderrow input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #0b0e17;
  cursor: pointer;
}

.wm-swatches { display: flex; gap: 8px; padding: 2px 2px 12px; flex: none; }
.wm-swatch {
  width: 28px; height: 28px;
  border-radius: 9px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  transition: transform 0.1s, box-shadow 0.1s;
}
.wm-swatch:hover { transform: scale(1.1); }
.wm-swatch.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--accent); }

/* The 🎨 swatch — opens the browser's colour picker for any colour at all.
   The invisible <input type="color"> fills the button so a click lands on it. */
.wm-swatch.custom {
  position: relative;
  overflow: hidden;
  background: conic-gradient(#f87171, #fbbf24, #34d399, #22d3ee, #818cf8, #e879f9, #f87171);
}
.wm-swatch.custom::after {
  content: "＋";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #0b0e17;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.55);
  pointer-events: none;
}
.wm-swatch.custom.picked::after { content: ""; }
.wm-swatch.custom input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
  padding: 0;
}

.wm-posrow {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 14px;
  flex: none;
}
.wm-posgrid {
  display: grid;
  grid-template-columns: repeat(3, 30px);
  gap: 4px;
  padding: 0 2px;
}
.wm-pos {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--card-btn);
  position: relative;
}
.wm-pos::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 8px; height: 8px;
  border-radius: 3px;
  background: var(--dim);
}
.wm-pos:hover { background: var(--card-btn-hover); }
.wm-pos.on { background: var(--accent-glow); }
.wm-pos.on::after { background: var(--accent); }
.wm-posgrid.off { opacity: 0.35; }
.wm-tiled { font-size: 12.5px; color: var(--text-2); margin-top: 24px; }

/* ── Shared small building blocks (Watermark/Edit/Compress/Merge panels) ── */
.seg.cols2 { grid-template-columns: 1fr 1fr; }
.seg.cols4 { grid-template-columns: repeat(4, 1fr); }
.seg.cols4 button { font-size: 11px; padding: 0 2px; white-space: nowrap; overflow: hidden; }
.mode-seg { margin: 10px 2px 12px; }

.row-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 2px 6px;
  flex: none;
}
.row-head .grow { flex: 1; min-width: 0; }
.row-head .tp-sub.nopad, .tp-sub.nopad { padding: 0; flex: 1; }
.hint-sm { font-size: 11px; color: var(--dim); }
.hint-sm.pad { padding: 2px 4px 8px; }
.tp-note {
  font-size: 10.5px;
  color: var(--dim);
  line-height: 1.5;
  padding: 6px 4px 10px;
  flex: none;
}
.switch.sm { font-size: 12px; color: var(--text-2); padding: 4px 2px; }
.wm-input.sm { height: 34px; font-size: 12.5px; font-weight: 400; margin-bottom: 8px; }
.wm-swatches.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 28px);
  padding-bottom: 6px;
}
.big-btn.nom, .mid-btn.nom { margin: 0; }

/* Pinned footer of the Watermark tab: sticks to the bottom when the panel
   content is short, scrolls with it when it isn't. */
.wm-foot {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  flex: none;
}

/* ── Detected-watermark candidates (Watermark ▸ Remove) ── */
.wm-cands {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  min-height: 64px;
  max-height: 120px;
  overflow-y: auto;
  margin: 0 0 8px;
  padding: 4px;
  flex: none;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-glow) transparent;
}
.wm-cands .empty {
  font-size: 11px;
  color: var(--dim);
  text-align: center;
  padding: 20px 8px;
  white-space: pre-line;
}
.wm-cand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 7px;
  cursor: pointer;
  user-select: none;
}
.wm-cand:hover { background: var(--card-hover); }
.wm-cand input { accent-color: var(--accent); flex: none; }
.wm-cand .cl { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-cand .cd { font-size: 10px; color: var(--dim); margin-left: auto; white-space: nowrap; flex: none; }

/* ── Box layer (Edit tool + Watermark ▸ Remove erase boxes) ── */
.box-layer { position: absolute; inset: 0; display: none; touch-action: none; cursor: crosshair; }
.box-layer.on { display: block; }
.bx-box {
  position: absolute;
  border: 2px solid var(--dim);
  box-shadow: 0 0 0 2px rgba(11, 14, 23, 0.9);
  pointer-events: none;
}
.bx-box.erase { background: rgba(248, 113, 113, 0.28); border-color: var(--danger); }
.bx-box.active { border-color: var(--accent); }
.bx-badge {
  position: absolute;
  top: 2px; left: 2px;
  background: #0b0e17;
  color: #fff;
  border: 1px solid var(--dim);
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 5px;
  pointer-events: none;
  white-space: nowrap;
}
.bx-box.active .bx-badge { border-color: var(--accent); }
.bx-handle {
  position: absolute;
  width: 12px; height: 12px;
  background: var(--accent);
  border: 2px solid #0b0e17;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* ── Edit tab ── */
.ed-text {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  font-family: inherit;
  font-size: 12.5px;
  padding: 9px 12px;
  margin-bottom: 8px;
  outline: none;
  resize: vertical;
  min-height: 52px;
  max-height: 140px;
  flex: none;
}
.ed-text:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.18); }
.ed-list {
  flex: 1;
  min-height: 70px;
  overflow-y: auto;
  margin-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-glow) transparent;
}
.ed-list .empty {
  font-size: 11.5px;
  color: var(--dim);
  text-align: center;
  padding: 24px 8px;
  white-space: pre-line;
}
.ed-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 6px 8px;
  margin-bottom: 5px;
  cursor: pointer;
}
.ed-item { transition: border-color 0.12s, background 0.12s; }
.ed-item:hover { background: var(--card-hover); border-color: var(--card-btn-hover); }
.ed-item.active { border-color: var(--accent); background: var(--sel-bg); }
.ed-item .badge {
  min-width: 26px;
  height: 20px;
  border-radius: 5px;
  background: var(--accent-glow);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.ed-item .summ { font-size: 11.5px; color: var(--text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-item .pg { font-size: 10px; color: var(--dim); flex: none; }
.ed-item .del {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: var(--card-btn);
  color: var(--text-2);
  font-size: 11px;
  flex: none;
}
.ed-item .del:hover { background: var(--danger); color: #000; }

/* ── Compress tab ── */
.comp-src {
  font-size: 12px;
  font-weight: 600;
  color: var(--dim);
  background: var(--card);
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 9px 12px;
  margin: 0 2px 12px;
  flex: none;
  transition: color 0.15s, border-color 0.15s;
}
.comp-src.active {
  color: var(--accent);
  border-style: solid;
  border-color: var(--accent-glow);
  background: var(--sel-bg);
}

.preset-list { display: flex; flex-direction: column; gap: 8px; margin: 0 2px 14px; flex: none; }
.preset-card {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 11px 12px;
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: border-color 0.13s, background 0.13s, box-shadow 0.13s;
}
.preset-card:hover { border-color: var(--card-btn-hover); background: var(--card-hover); }
.preset-card input { position: absolute; opacity: 0; pointer-events: none; }
.preset-card .pc-icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--card-btn);
  display: grid;
  place-items: center;
  font-size: 16px;
  flex: none;
  transition: background 0.13s;
}
.preset-card .pc-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.preset-card .pc-txt strong { font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 6px; }
.preset-card .pc-txt small { font-size: 10.5px; color: var(--dim); line-height: 1.5; }
.preset-card .pc-tag {
  font-style: normal;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--success);
  background: rgba(52, 211, 153, 0.12);
  border-radius: 5px;
  padding: 2px 6px;
}
.preset-card .pc-check {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--card-btn);
  flex: none;
  margin-top: 1px;
  position: relative;
  transition: border-color 0.13s, background 0.13s;
}
.preset-card:has(input:checked) {
  border-color: var(--accent);
  background: var(--sel-bg);
  box-shadow: 0 6px 20px -12px rgba(129, 140, 248, 0.55);
}
.preset-card:has(input:checked) .pc-icon { background: var(--accent-glow); }
.preset-card:has(input:checked) .pc-check { border-color: var(--accent); }
.preset-card:has(input:checked) .pc-check::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--accent);
}

.comp-result {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--success);
  background: rgba(52, 211, 153, 0.09);
  border: 1px solid rgba(52, 211, 153, 0.35);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 2px 2px 0;
  text-align: center;
  flex: none;
}
.comp-result.dim {
  color: var(--text-2);
  background: var(--card);
  border-color: var(--line);
}
.comp-result:empty { display: none; }

/* ── Organize tab ── */
.org-ctrls {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin: 0 2px 6px;
  flex: none;
}
.org-btn {
  height: 38px;
  border-radius: 10px;
  background: var(--card-btn);
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  transition: background 0.12s;
}
.org-btn:hover:not(:disabled) { background: var(--card-btn-hover); }
.org-btn.danger:hover:not(:disabled) { background: var(--danger); color: #0b0e17; }
.org-spacer { flex: 1; min-height: 10px; }

/* Organize page tiles (stage grid) */
.otile {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 9px 9px 0;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  text-align: center;
  transition: border-color 0.1s, background 0.1s, opacity 0.12s;
  touch-action: pan-y;
  position: relative;
}
.otile .oimg {
  aspect-ratio: 1 / 1.3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.otile canvas {
  max-width: 100%;
  max-height: 100%;
  display: block;
  pointer-events: none;
  transition: transform 0.18s;
}
.otile .onum { font-size: 11.5px; font-weight: 600; color: var(--text-2); line-height: 24px; }
.otile:hover { border-color: var(--card-btn-hover); }
.otile.sel { border-color: var(--accent); background: var(--sel-bg); }
.otile.sel .onum { color: var(--accent); }
.otile.deleted { opacity: 0.45; border-color: var(--danger); }
.otile.deleted .onum { color: var(--danger); }
.otile.dragging { border-color: var(--accent); opacity: 0.85; cursor: grabbing; z-index: 3; }
.otile .obar {
  position: absolute;
  top: 5px;
  right: 5px;
  display: none;
  gap: 3px;
}
.otile:hover .obar, .otile.sel .obar { display: flex; }
.otile .ob {
  width: 26px; height: 24px;
  border-radius: 7px;
  background: rgba(11, 14, 23, 0.88);
  color: var(--text);
  font-size: 12px;
  border: 1px solid var(--line);
}
.otile .ob:hover { background: var(--accent); color: #0b0e17; }
.otile .ob.del:hover { background: var(--danger); }

/* ── Create tab ── */
.create-btns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
  flex: none;
}
.create-btns .mid-btn { text-align: center; padding: 0 6px; font-size: 12.5px; }
.create-hint { line-height: 1.8; }

/* Create tool: live preview of the PDF being built (reuses the merge
   preview's .mp-* tiles). Padding matches .merge-scroll so the sticky
   header sits the same way. */
#createScroll { padding: 4px 16px 16px; }

/* − / + zoom for the preview grid (changes the tile size). */
.cp-zbtn {
  width: 30px;
  height: 26px;
  border-radius: 8px;
  background: var(--card-btn);
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  flex: none;
}
.cp-zbtn:hover { background: var(--card-btn-hover); }

/* Image pages are clickable — they open the position editor. */
#createPvGrid .mp-tile.img { cursor: pointer; transition: border-color 0.1s; }
#createPvGrid .mp-tile.img:hover { border-color: var(--accent); }

/* ── Create: position-an-image editor (drag / corner-resize on the page) ── */
.imgpos {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(4, 6, 12, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
}
.imgpos-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px 16px;
  max-width: 94vw;
  max-height: 94vh;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
}
.imgpos-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
}
.imgpos-page {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  touch-action: none;
}
.imgpos-page img {
  position: absolute;
  user-select: none;
  -webkit-user-drag: none;
  cursor: move;
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}
.imgpos-handle {
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--accent);
  border: 2px solid #0b0e17;
  border-radius: 4px;
  cursor: nwse-resize;
}
.imgpos-btns {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 12px;
}
.imgpos-btns .mid-btn { width: auto; padding: 0 18px; }
.imgpos-sp { flex: 1; }
.mid-btn.accent { background: var(--accent); color: #0b0e17; }
.mid-btn.accent:hover:not(:disabled) { background: var(--accent-hover); }

/* ── Merge tab ── */
.merge-btns {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 8px;
  margin-bottom: 10px;
  flex: none;
}
.merge-btns .mid-btn { height: 44px; text-align: center; padding: 0; }
.merge-list {
  flex: 1;
  min-height: 100px;
  overflow-y: auto;
  margin-bottom: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-glow) transparent;
}
.merge-list .empty {
  font-size: 12.5px;
  color: var(--dim);
  text-align: center;
  padding: 50px 10px;
  white-space: pre-line;
  line-height: 1.7;
}
.merge-row {
  display: grid;
  grid-template-columns: 46px 1fr auto auto auto;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 7px 8px;
  margin-bottom: 6px;
  transition: border-color 0.12s, background 0.12s;
}
.merge-row:hover { border-color: var(--card-btn-hover); background: var(--card-hover); }
.merge-row .num { font-size: 12px; font-weight: 700; color: var(--accent); text-align: center; }
.mthumb {
  position: relative;
  width: 46px;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.mthumb img { max-width: 100%; max-height: 100%; display: block; }
.mthumb .ph { font-size: 18px; color: var(--dim); }
.mthumb .mnum {
  position: absolute;
  top: 2px; left: 2px;
  background: rgba(11, 14, 23, 0.82);
  color: var(--accent);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  border-radius: 4px;
  padding: 2px 4px;
}
.merge-row .info { min-width: 0; padding: 0 2px; }
.merge-row .name { font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.merge-row .meta { font-size: 10px; color: var(--dim); }
.merge-row .mv {
  width: 28px; height: 26px;
  border-radius: 7px;
  background: var(--card-btn);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}
.merge-row .mv:hover:not(:disabled) { background: var(--card-btn-hover); }
.merge-row .mv.del:hover { background: var(--danger); color: #000; }

/* ───────────────────────────── Status bar / toast ───────────────────────────── */

.statusbar {
  background: var(--panel);
  display: flex;
  align-items: center;
  padding: 0 20px;
  font-size: 11px;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Legal links, pushed to the far end of the status bar. */
.statusbar-legal { margin-left: auto; display: flex; gap: 14px; flex: none; }
.statusbar-legal a { color: var(--dim); text-decoration: none; transition: color 0.2s; }
.statusbar-legal a:hover { color: var(--accent, #38bdf8); text-decoration: underline; }
/* Narrow windows drop the least critical links first, keeping Privacy and
   Terms (which have to stay reachable) to the end. */
@media (max-width: 1100px) {
  .statusbar-legal a:nth-child(4) { display: none; }   /* About */
}
@media (max-width: 900px) {
  .statusbar-legal { gap: 10px; }
  .statusbar-legal a:nth-child(1) { display: none; }   /* PDF tools */
}
@media (max-width: 700px) {
  .statusbar-legal a:nth-child(2),
  .statusbar-legal a:nth-child(3) { display: none; }   /* Windows, Android */
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 46px;
  transform: translate(-50%, 16px);
  background: var(--card);
  border: 1px solid var(--accent);
  border-radius: 12px;
  color: var(--text);
  font-size: 13px;
  padding: 12px 20px;
  max-width: min(520px, calc(100vw - 40px));
  box-shadow: 0 24px 70px -20px rgba(0, 0, 0, 0.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 80;
  white-space: pre-line;
  text-align: center;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast.err { border-color: var(--danger); }

/* Drag & drop hint overlay */
.dropzone {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(11, 14, 23, 0.82);
  border: 3px dashed var(--accent);
  color: var(--text);
  font-size: 20px;
  font-weight: 700;
  pointer-events: none;
}
.dropzone.on { display: flex; }

/* Scrollbars (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--accent-glow); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ───────────────────────────── Responsive ───────────────────────────── */

@media (max-width: 1180px) {
  .body { grid-template-columns: 120px 1fr 320px; }
  .body.no-film { grid-template-columns: 1fr 320px; }
  .ftile { width: 88px; }
  .ftile .fimg { width: 76px; height: 96px; }
}

@media (max-width: 900px) {
  .app { grid-template-rows: 56px 1fr 26px; }
  .topbar { padding: 0 12px; gap: 8px; }
  .brand .name { display: none; }
  .file-label { display: none; }
  .body, .body.no-film { grid-template-columns: 1fr; grid-template-rows: 1fr 300px; gap: 10px; padding: 10px; }
  .film-host { display: none; }
  .tools-host { min-height: 0; }
  .tools-title { display: none; }
}

/* ─────────────── Occasional "save" ad (dismissible, auto-closing) ─────────────
   Built and controlled by assets/js/pdf-downloader-ads.js — the same modal the
   PDF Downloader uses. Shown only every Nth save, never blocks the download. */
.ad-interstitial {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 8, 15, 0.74);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.ad-interstitial.show { display: flex; animation: adFade 0.25s ease; }
@keyframes adFade { from { opacity: 0; } to { opacity: 1; } }
.ad-int-card {
  width: 100%;
  max-width: 420px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 30px 90px -24px rgba(0, 0, 0, 0.9);
}
.ad-int-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ad-label {
  display: block;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0;
}
.ad-int-close {
  width: 30px;
  height: 30px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-2);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ad-int-close:hover { background: rgba(255, 255, 255, 0.12); color: var(--text); }
.ad-int-slot { min-height: 250px; display: flex; align-items: center; justify-content: center; }
.ad-int-slot ins { display: block; width: 100%; }
.ad-int-note { margin-top: 12px; font-size: 0.82rem; color: var(--success); text-align: center; }
/* Collapse ad units Google doesn't fill so there's no empty box. */
.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }

/* ── Reading color modes (Night / Sepia) ─────────────────────────────
   The filters live as SVG defs in the HTML — the Android viewer's exact
   color matrices. Only the rendered page is filtered; overlays (crop
   box, edit items, live previews) stay in true colors on top. */
.page-wrap.mode-night #pageCanvas { filter: url(#o2bNightF); }
.page-wrap.mode-night { background: #121212; }
.page-wrap.mode-sepia #pageCanvas { filter: url(#o2bSepiaF); }
.page-wrap.mode-sepia { background: #f4e4c8; }