.preview-work { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; margin-top: 20px; }
/* The client asked for the page display to be bigger on these mirrored
   workspaces (Watermark, Header & Footer / Page Numbers, Bates): at the old
   860px column the page sat at roughly half the size it should beside its
   settings column. Scoped with :has() so every other preview tool keeps the
   sizing it was tuned to (engines that don't support :has keep the old width). */
.tool-page.preview-page:has(.preview-work.is-hf),
.tool-page.preview-page:has(.preview-work.is-gx),
.tool-page.preview-page:has(.preview-work.is-watermark) { max-width: 1160px; }
.preview-stage {
  background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; display: flex; flex-direction: column; align-items: center;
}
#pv-page { position: relative; display: inline-block; line-height: 0; }
.preview-page canvas { display: block; background: #fff; box-shadow: var(--shadow); max-width: 100%; }
.preview-overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.preview-overlay .wm {
  position: absolute; left: 50%; top: 50%; transform-origin: center center;
  white-space: nowrap; font-weight: 700;
}
.preview-overlay .hf { position: absolute; white-space: nowrap; }
.preview-overlay .pn { position: absolute; white-space: nowrap; }
.preview-controls {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow-sm);
}
/* A lone action button (N-up, Flip, the generic Options screen) centres
   under its panel too — same call as the .hf-actions rows. */
.pv-run { display: flex; justify-content: center; margin-top: 4px; }
.preview-controls h4 { margin-top: 0; font-size: .8rem; text-transform: uppercase; color: var(--muted); }
.preview-controls .field { margin-bottom: 14px; }
.preview-controls input[type=text], .preview-controls input[type=number],
.preview-controls select, .preview-controls textarea {
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 8px 10px; font: inherit; width: 100%; background: var(--white); color: var(--ink);
}
.preview-controls input[type=color] { width: 44px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
@media (max-width: 900px) { .preview-work { grid-template-columns: 1fr; } }

/* Their Compress screen: the document steps aside and a centred column of chip
   rows takes the stage — "Image quality: Medium/Good/Best" and so on, with the
   action under them and "More options" folding the extra rows away. Our
   palette, their structure. */
.preview-work.is-compress { grid-template-columns: minmax(0, 1fr); }
.preview-work.is-compress .preview-stage { display: none; }
.preview-work.is-compress .preview-controls {
  max-width: 640px; margin: 0 auto; width: 100%;
}
.cp-selected { margin: 0 0 18px; text-align: center; }
.cp-form { display: flex; flex-direction: column; gap: 10px; }
.cp-row { display: flex; align-items: center; min-height: 46px; }
.cp-label {
  flex: 0 0 184px; text-align: right; padding-right: 16px;
  font-size: .92rem; font-weight: 600; color: var(--ink);
}
.cp-chips { flex: 1 1 auto; display: flex; align-items: stretch; }
.cp-chip {
  font: inherit; font-size: .875rem; color: var(--muted); background: var(--white);
  border: 1px solid var(--line); padding: 7px 12px; cursor: pointer;
  margin-left: -1px; min-height: 35px;
}
.cp-chip:first-child { border-radius: 8px 0 0 8px; margin-left: 0; }
.cp-chip:last-child { border-radius: 0 8px 8px 0; }
.cp-chip:only-child { border-radius: 8px; }
.cp-chip:hover { color: var(--accent-dark); border-color: var(--accent-line); position: relative; z-index: 1; }
.cp-chip.is-on {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark);
  font-weight: 600; position: relative; z-index: 2;
}
.cp-badge {
  align-self: center; margin-left: 10px; font-size: .76rem; font-weight: 700;
  color: #8a6d1f; background: var(--amber-bg); border: 1px solid var(--amber-line);
  border-radius: 6px; padding: 2px 8px;
}
.cp-actions { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }
.cp-more {
  background: var(--accent-soft); border: 1px solid transparent; color: var(--accent-dark);
  font: inherit; font-size: .875rem; font-weight: 600;
  border-radius: 8px; padding: 9px 14px; cursor: pointer;
}
.cp-more:hover { border-color: var(--accent-line); }
@media (max-width: 640px) {
  .cp-label { flex-basis: 110px; font-size: .84rem; }
  .cp-chip { padding: 7px 9px; font-size: .8rem; }
}

/* ------------------------------------------------------------ watermark ---*/
/* Their Watermark screen: one grey workspace, the page floating on the left,
   the settings column on the right (no card), "Selected: <file>" and the
   Tools strip centred above both, cream bar with the one action at the
   bottom. Our colours, their shape. */
.preview-work.is-watermark {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px;
  grid-template-areas: "sel sel" "tools tools" "stage panel" "bar bar";
  gap: 10px 30px; max-width: 1180px; margin: 22px auto 0; padding: 24px 30px 20px;
  background: #f0f1f3; border-radius: 20px;
}
.preview-work.is-watermark .preview-stage { grid-area: stage; margin: 0; }
.preview-work.is-watermark .preview-controls { display: contents; }
.preview-work.is-watermark .wm-panel { display: contents; }
.preview-work.is-watermark #wm-selected { grid-area: sel; }
.preview-work.is-watermark .wm-tools { grid-area: tools; margin-bottom: 4px; }
.preview-work.is-watermark .wm-groups {
  grid-area: panel; display: flex; flex-direction: column; align-self: start;
}
.preview-work.is-watermark .wm-bar { grid-area: bar; margin-top: 8px; }
@media (max-width: 900px) {
  .preview-work.is-watermark {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "sel" "tools" "stage" "panel" "bar";
    padding: 18px 16px;
  }
}
.wm-panel { display: flex; flex-direction: column; }
.wm-selected { text-align: center; margin: 0; }
.wm-tool i { font-size: 1rem; line-height: 1; color: var(--accent); }
.wm-tools { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
/* On a phone the chips used to wrap their own labels mid-word ("Add /
   Image", "Choose / File") while checking the tablet/phone layouts. The
   row may fold onto several lines; a chip's own text never breaks. */
.wm-tool {
  font: inherit; font-size: .875rem; color: var(--ink); background: var(--white);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  position: relative; white-space: nowrap;
}
.wm-tool.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; }
.wm-tool-image input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.wm-choose {
  border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px;
  font-size: .78rem; background: var(--white);
}
.wm-tpl { position: relative; }
.wm-group { margin-bottom: 16px; }
.wm-inline { display: flex; align-items: center; gap: 12px; }
.wm-label {
  flex: 0 0 150px; font-size: .95rem; font-weight: 700; color: var(--ink);
}
.wm-inline .wm-label { margin: 0; }
.wm-group:not(.wm-inline) .wm-label { display: block; margin-bottom: 6px; }
.wm-range { flex: 1 1 auto; max-width: 150px; accent-color: var(--accent); }
.wm-num {
  width: 70px; height: 40px; border: 1px solid var(--line); border-radius: 8px;
  padding: 0 10px; font: inherit; font-size: .95rem; color: var(--ink);
  background: var(--white);
}
/* The shared preview-controls rule near the top stretches every text and
   number box to the panel width; the watermark panel sizes its own boxes, so
   re-assert them here (higher specificity than that shared rule). */
.preview-work.is-watermark .wm-num { width: 70px; }
.wm-group[hidden] { display: none; }
/* Their Custom location, box for box (measured against their live DOM):
   "Location on page" with the two radios side by side on the same line, then
   one row of four inline pairs — Left / Right / Top / Bottom, each label to
   the left of its small box — carrying PDF points. */
.wm-loc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wm-loc-head .wm-label { flex: 0 0 auto; }
.wm-loc { display: flex; flex-direction: row; gap: 22px; }
.wm-loc label { display: flex; align-items: center; gap: 8px; font-size: .95rem; color: var(--ink); cursor: pointer; background: none; border: 0; padding: 0; }
.wm-loc label span { background: none; border: 0; padding: 0; font-size: .95rem; }
.wm-loc input[type=radio] {
  position: static; opacity: 1; pointer-events: auto; width: 16px; height: 16px;
  margin: 0; accent-color: var(--accent); flex: 0 0 auto;
}
.wm-custom { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px 8px; margin-top: 14px; }
.wm-edge { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; font-size: .95rem; color: var(--ink); }
.preview-work.is-watermark .wm-edge input {
  width: 45px; height: 40px; border: 1px solid var(--line); border-radius: 8px;
  padding: 0 6px; font: inherit; font-size: .9rem; color: var(--ink);
  background: var(--white); box-sizing: border-box;
}
/* The image watermark's Width / Height share of the page. */
.wm-xy-row { display: flex; gap: 16px; }
.wm-xy-field { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--muted); }
.preview-work.is-watermark .wm-xy-field .wm-num { width: 70px; height: 36px; }
/* Their Style colour: a swatch beside an editable hex, never the browser's
   own colour plate. */
.wm-color { display: inline-flex; align-items: center; gap: 8px; }
.wm-color-btn {
  width: 40px; height: 40px; padding: 0; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: #ff0000;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55);
}
.wm-hex {
  width: 94px; height: 40px; border: 1px solid var(--line); border-radius: 8px;
  padding: 0 10px; font: inherit; font-size: .9rem; color: var(--ink);
  background: var(--white); text-transform: lowercase;
}
.wm-note { margin: 0 0 8px; }
.wm-panel textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
  font: inherit; resize: vertical; background: var(--white); color: var(--ink);
  min-height: 108px;
}
.wm-style-row { display: grid; grid-template-columns: minmax(0, 1fr) 70px auto; gap: 10px; align-items: center; }
.wm-style-row input.wm-num { width: 70px; }
.wm-color input.wm-hex { width: 94px; }
.wm-num, .wm-hex, .wm-color-btn, .wm-style-row select { box-sizing: border-box; }
.wm-style-row select {
  flex: 1 1 130px; min-width: 0; height: 40px; border: 1px solid var(--line);
  border-radius: 8px; padding: 0 10px; font: inherit; background: var(--white);
  color: var(--ink);
}
.wm-pages-row { display: flex; align-items: center; gap: 8px; }
.wm-pages {
  flex: 1 1 auto; height: 40px; border: 1px solid var(--line); border-radius: 8px;
  padding: 0 12px; font: inherit; background: var(--white); color: var(--ink);
}
.wm-help {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--white); color: var(--accent-dark); font-size: .8rem;
  font-weight: 700; display: inline-flex; align-items: center;
  justify-content: center; cursor: help;
}
.wm-sep { border: 0; border-top: 1px solid var(--line); margin: 4px 0 16px; width: 100%; }
/* Their Save settings: an outlined accent button, right-aligned in the column. */
.wm-save {
  align-self: flex-end; border: 1px solid var(--accent) !important;
  color: var(--accent-dark) !important; background: var(--white) !important;
  font-weight: 600; border-radius: 8px; padding: 8px 14px;
}
.wm-save:hover { background: var(--accent-soft) !important; }
/* The cream bar with the one big action, centred. It used to ride pinned to
   the bottom of the window, which put it on top of the document preview —
   the client flagged that overlap and asked for the tablet and phone
   layouts to be checked. It now sits in the flow at the end of the
   workspace, so it never covers the page at any width. */
.wm-bar {
  background: var(--amber-bg); border: 1px solid var(--amber-line);
  border-radius: 14px; padding: 12px 20px 16px; text-align: center;
}
/* The selected watermark wears their dashed box; the drag spot is in the
   middle of the box. */
/* touch-action: none stops the browser panning the page when the mark (or a
   handle) is dragged on a touch screen — without it the watermark simply
   refused to move on phones. */
/* Kept above everything in the workspace: when the cream bar still rode
   pinned to the window it covered the turning grip on a phone, so every
   tap hit "Watermark PDF" instead and the mark could never be turned. The
   bar no longer floats, but the grip stays well above the page surface. */
.preview-overlay .wm {
  cursor: move; pointer-events: auto; z-index: 20; touch-action: none;
  will-change: transform;
}
.preview-overlay .wm.is-dragging { cursor: grabbing; }
.preview-overlay .wm.wm-sel {
  padding: 8px 14px; outline: 1.5px dashed rgba(31, 122, 109, .85);
  outline-offset: 3px; border-radius: 3px;
}
.preview-overlay .wm-text { display: inline-block; line-height: 1.1; white-space: pre; }
.preview-overlay .wm-text[contenteditable="true"] {
  cursor: text; outline: none; background: rgba(255, 255, 255, .78);
  border-radius: 3px; padding: 1px 3px; margin: -1px -3px;
}
.preview-overlay .wm-img { display: block; user-select: none; -webkit-user-drag: none; }
/* Their handles: a round grip on each corner to resize the mark, one under it
   to turn it, joined to the box by a short stem. */
.preview-overlay .wm-h {
  position: absolute; width: 13px; height: 13px; box-sizing: border-box;
  background: #fff; border: 2px solid var(--accent); border-radius: 2px;
  z-index: 6; touch-action: none; transition: transform .1s ease;
}
/* Their corner grips are little squares; the turning grip is a circle. */
.preview-overlay .wm-h-tl { left: -14px; top: -14px; cursor: nwse-resize; }
.preview-overlay .wm-h-tr { right: -14px; top: -14px; cursor: nesw-resize; }
.preview-overlay .wm-h-bl { left: -14px; bottom: -14px; cursor: nesw-resize; }
.preview-overlay .wm-h-br { right: -14px; bottom: -14px; cursor: nwse-resize; }
.preview-overlay .wm-h-tl:hover,
.preview-overlay .wm-h-tr:hover,
.preview-overlay .wm-h-bl:hover,
.preview-overlay .wm-h-br:hover { transform: scale(1.25); }
.preview-overlay .wm-h-rot {
  left: 50%; bottom: -32px; transform: translateX(-50%); cursor: grab;
  width: 14px; height: 14px; border-radius: 50%;
}
.preview-overlay .wm-h-rot::before {
  content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 17px;
  background: var(--accent-line); transform: translateX(-50%);
}
/* Their context toolbar under the watermark: Opacity · Color · Recenter ·
   Font · delete. */
.preview-overlay .wm-ctx {
  position: absolute; z-index: 25; display: flex; flex-wrap: wrap; max-width: 100%;
  background: var(--white); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 2px 10px rgba(15, 23, 30, .14); overflow: hidden;
  pointer-events: auto;
}
.preview-overlay .wm-ctx button {
  border: 0; background: none; font: inherit; font-size: .74rem;
  color: var(--accent-dark); padding: 6px 7px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.preview-overlay .wm-ctx button i { font-size: .9rem; }
.preview-overlay .wm-ctx button + button { border-left: 1px solid var(--line); }
.preview-overlay .wm-ctx button:hover { background: var(--accent-soft); }
/* The strip folds away on any click that is not the mark (their edit menu
   hides the same way), and the caret marks the two buttons that drop down. */
.preview-overlay .wm-ctx[hidden] { display: none; }
.preview-overlay .wm-caret { font-size: .65rem; opacity: .75; margin-left: -2px; }
/* Their Opacity and Font drop-downs: a small white box under the button,
   fixed on the body layer so a preview redraw cannot lift it away. */
.wm-pop {
  position: fixed; z-index: 60; background: var(--white);
  border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 2px 10px rgba(15, 23, 30, .16);
}
.wm-pop-opacity { padding: 10px 14px; width: 168px; }
.wm-pop-opacity input[type=range] {
  width: 100%; margin: 0; accent-color: var(--accent);
}
.wm-pop-font { display: flex; flex-direction: column; padding: 5px; min-width: 168px; }
.wm-pop-font button {
  text-align: left; border: 0; background: none; font: inherit;
  font-size: .875rem; color: var(--ink); padding: 8px 10px;
  border-radius: 6px; cursor: pointer;
}
.wm-pop-font button:hover { background: var(--accent-soft); color: var(--accent-dark); }

/* ---- watermark templates: their "Templates" menu -------------------------
   The settings you have dialled in, saved under a name and put back with one
   click. "Save settings" beside it remembers the current ones as the defaults
   for next time. */
.wm-templates { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.wm-tpl-menu {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 60; min-width: 264px;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); padding: 8px;
}
.wm-tpl-list {
  list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 2px;
  max-height: 208px; overflow-y: auto;
}
.wm-tpl-list li { display: flex; align-items: center; gap: 6px; }
.wm-tpl-use {
  flex: 1 1 auto; text-align: left; border: none; background: none; font: inherit;
  font-size: .86rem; padding: 7px 9px; border-radius: 7px; cursor: pointer; color: var(--ink);
}
.wm-tpl-use:hover { background: var(--accent-soft); color: var(--accent-dark); }
.wm-tpl-del {
  border: none; background: none; color: var(--muted); cursor: pointer;
  font-size: .8rem; padding: 4px 6px; border-radius: 6px;
}
.wm-tpl-del:hover { background: var(--red-bg, #fbeceb); color: var(--red); }
.wm-tpl-empty { margin: 0 0 8px; font-size: .78rem; color: var(--muted); }
.wm-tpl-new { display: flex; gap: 6px; border-top: 1px solid var(--line); padding-top: 8px; }
.wm-tpl-new input {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: .84rem;
  padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px;
}

/* ------------------------------------------------------- header & footer ---*/
/* Their Add Header & Footer screen wrapped around our big page: their panel
   order and shapes — the joined composer with its grey numbered chip, the
   live "Preview:" line, chip rows for Font and Document Margins, the two
   More-options rows and the one action — while the page on the left draws
   exactly what the server will stamp. */
.preview-work.is-hf {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px;
  grid-template-areas: "sel sel" "stage panel";
  gap: 10px 30px; max-width: 1180px; margin: 22px auto 0; padding: 24px 30px 20px;
  background: #f0f1f3; border-radius: 20px;
}
.preview-work.is-hf .preview-stage { grid-area: stage; margin: 0; }
.preview-work.is-hf .preview-controls { display: contents; }
.preview-work.is-hf .hf-panel { display: contents; }
.preview-work.is-hf #pv-selected { grid-area: sel; }
.preview-work.is-hf .hf-groups {
  grid-area: panel; display: flex; flex-direction: column;
  /* The settings column is shorter than the tall page beside it; centring
     it keeps the grey workspace balanced instead of hanging at the top
     with a long empty stretch below. */
  align-self: center;
}
@media (max-width: 900px) {
  .preview-work.is-hf {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "sel" "stage" "panel";
    padding: 18px 16px;
  }
}
.hf-panel { display: flex; flex-direction: column; }
.hf-group { margin-bottom: 18px; }
.hf-head {
  display: block; margin: 0 0 8px; font-size: .95rem; font-weight: 700;
  color: var(--ink); text-align: center;
}
.hf-select, .hf-size, .hf-input {
  width: 100%; height: 44px; border: 1px solid var(--line-strong); border-radius: 8px;
  padding: 0 12px; font: inherit; font-size: .95rem; color: var(--ink);
  background: var(--white); box-sizing: border-box;
}
.hf-input-sm { max-width: 120px; }
/* Their composer: the text box is joined to a grey chip showing the numbered
   part, with the caret at the end opening the five presets. */
.hf-composer { position: relative; }
.hf-box {
  display: flex; align-items: stretch; height: 52px; overflow: hidden;
  border: 1px solid var(--line-strong); border-radius: 8px; background: var(--white);
}
.hf-text {
  flex: 1 1 auto; min-width: 0; border: 0; border-right: 1px solid var(--line);
  padding: 0 14px; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--white);
}
.hf-text:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent-soft); }
.hf-addon {
  flex: 0 0 auto; min-width: 150px; display: inline-flex; align-items: center;
  justify-content: center; padding: 0 12px; background: #f5f5f5;
  border-right: 1px solid var(--line); color: var(--ink); font-size: .95rem;
  white-space: nowrap;
}
.hf-addon[hidden], .hf-text[hidden] { display: none; }
.hf-caret {
  flex: 0 0 46px; border: 0; background: #f5f5f5; color: #6b7680;
  font-size: 1rem; cursor: pointer;
}
.hf-caret:hover { background: var(--accent-soft); color: var(--accent-dark); }
.hf-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40;
  list-style: none; margin: 0; padding: 6px; background: var(--white);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
}
.hf-menu[hidden] { display: none; }
.hf-menu button {
  width: 100%; text-align: left; border: 0; background: none; font: inherit;
  font-size: .9rem; color: var(--ink); padding: 10px; border-radius: 7px;
  cursor: pointer;
}
.hf-menu button:hover { background: var(--accent-soft); color: var(--accent-dark); }
.hf-preview { text-align: center; margin: 8px 0 0; }
/* Font chips beside their own size list, then the two margin chips. */
.hf-fontrow { display: flex; gap: 8px; }
.hf-fontrow .hf-seg { flex: 1 1 auto; min-width: 0; }
.hf-fontrow .hf-seg span { padding: 0 6px; font-size: .8rem; }
.hf-seg {
  display: inline-flex; border: 1px solid var(--line-strong); border-radius: 8px;
  overflow: hidden; background: var(--white);
}
.hf-seg label { position: relative; }
.hf-seg input { position: absolute; opacity: 0; pointer-events: none; }
.hf-seg span {
  display: inline-flex; align-items: center; justify-content: center; height: 42px;
  padding: 0 12px; font-size: .84rem; color: var(--ink); cursor: pointer;
  border-right: 1px solid var(--line); white-space: nowrap;
}
.hf-seg label:last-child span { border-right: 0; }
.hf-seg input:checked + span {
  background: var(--accent-soft); color: var(--accent-dark); font-weight: 600;
}
.hf-seg input:disabled + span { color: #b9c0c7; cursor: not-allowed; }
.hf-seg-wide { display: flex; }
.hf-seg-wide label { flex: 1 1 0; min-width: 0; }
.hf-seg-wide span { width: 100%; }
.hf-size { width: 76px; flex: 0 0 76px; }
.hf-extras[hidden] { display: none; }
/* The action row sits centred under its panel — the client's call: every
   button runs centred, the way their screens put them under the choices. */
.hf-actions { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 2px; }
.hf-more {
  background: none; border: 0; color: var(--accent-dark); font: inherit;
  font-size: .875rem; font-weight: 600; cursor: pointer; padding: 6px 2px;
}
.hf-more:hover { text-decoration: none; }
/* Their Bates screen wears More options as a soft chip beside the action
   (the header/footer screens keep the plain link). */
#bt-more {
  background: var(--accent-soft); border: 1px solid transparent;
  color: var(--accent-dark); border-radius: 8px; padding: 10px 16px;
}
#bt-more:hover { border-color: var(--accent-line); text-decoration: none; }
/* The stamp drawn on our preview page — same spot, face and size the server
   writes, so what the visitor sees is what the file gets. */
.preview-overlay .hf-mark {
  position: absolute; line-height: 1; white-space: pre; pointer-events: none;
}

/* ---- bates numbering: their "Select Style / Customize Style" screen ---- */
.hf-step {
  display: inline-flex; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-dark); font-size: .78rem;
  align-items: center; justify-content: center; margin-right: 7px;
  vertical-align: -4px;
}
.bt-box { height: 52px; }
.bt-box .bt-text {
  flex: 1 1 64px; min-width: 56px; border: 0; border-right: 1px solid var(--line);
  padding: 0 10px; font: inherit; font-size: .88rem; color: var(--ink);
  background: var(--white);
}
.bt-box .bt-text:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent-soft); }
/* The middle text ("Case XYZ") is the longest label — it gets the bigger
   slice, so nothing clips at the panel's 380px width. */
#bt-t2 { flex-grow: 1.4; }
.bt-box .bt-text[hidden] { display: none; }
.bt-box .hf-addon[hidden] { display: none; }
/* The chips shrink to their own text here ("1", "000001") instead of the
   header/footer composer's 150px floor — with six segments in one row the
   text boxes were squeezed to "Ex…" before this. */
.bt-box .hf-addon { min-width: 0; padding: 0 8px; }
/* Their Preview block: a grey rounded panel, "Preview:" then the composed
   lines, left-aligned — ours carried the caption as bare centred text. */
.bt-preview {
  margin: 2px 0 18px; text-align: left; font-size: .85rem; color: var(--ink);
  background: #f5f6f7; border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 16px;
}
.bt-preview p { margin: 3px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-preview p:first-child { color: var(--muted); }
/* Their "Continue from" row: the two pairs side by side, each with its own
   ? bubble. */
.bt-nums { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; }
.bt-num {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .9rem; color: var(--ink);
}
.bt-num input {
  width: 72px; height: 40px; border: 1px solid var(--line-strong); border-radius: 8px;
  padding: 0 8px; font: inherit; text-align: center; background: var(--white);
  color: var(--ink); box-sizing: border-box;
}
/* Their margin chips are compact, not the full-width pair the other panels
   use, and the second one carries a ? bubble. */
.bt-margins span { height: 38px; font-size: .84rem; }
.bt-margins .sp-help { margin-left: 6px; }
.bt-note { text-align: center; margin: 2px 0 16px; }
.bt-outname-row { display: flex; align-items: center; gap: 8px; }
.bt-outname-row .hf-input { flex: 1 1 auto; }
/* Their Font row carries the colour swatch after the size list. */
.hf-fontrow .wm-color-btn { flex: 0 0 42px; height: 42px; width: 42px; }

/* ---- grayscale: their one-action screen with the rows behind More ---- */
.preview-work.is-gx {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px;
  grid-template-areas: "sel sel" "stage panel";
  gap: 10px 30px; max-width: 1180px; margin: 22px auto 0; padding: 24px 30px 20px;
  background: #f0f1f3; border-radius: 20px;
}
.preview-work.is-gx .preview-stage { grid-area: stage; margin: 0; }
.preview-work.is-gx .preview-controls { display: contents; }
.preview-work.is-gx .hf-panel { display: contents; }
.preview-work.is-gx #pv-selected { grid-area: sel; }
.preview-work.is-gx .hf-groups {
  grid-area: panel; display: flex; flex-direction: column; align-self: center;
}
@media (max-width: 900px) {
  .preview-work.is-gx {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "sel" "stage" "panel";
    padding: 18px 16px;
  }
}
.gx-options[hidden] { display: none; }
.gx-options .cp-row { margin-bottom: 10px; }
.gx-check {
  display: inline-flex; align-items: center; gap: 9px; margin: 6px 0 14px;
  font-size: .95rem; color: var(--ink); cursor: pointer;
}
.gx-check input { width: 17px; height: 17px; accent-color: var(--accent); margin: 0; }

/* ---- deskew: their two choice cards, then the picked screen ------------ */
.dk-choice { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.dk-card {
  display: flex; flex-direction: column; gap: 5px; align-items: center;
  text-align: center; padding: 16px 18px; cursor: pointer; font: inherit;
  background: var(--white); border: 1px solid var(--line-strong);
  border-radius: 12px; color: var(--ink);
}
.dk-card:hover { border-color: var(--accent); }
.dk-card.is-on { border-color: var(--accent); background: var(--accent-soft); }
.dk-card-desc { font-size: .9rem; color: var(--muted); }
.dk-card.is-on .dk-card-desc { color: var(--accent-dark); }
.dk-card strong { font-size: 1rem; }
.dk-pages { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.dk-pages-label { font-size: .95rem; font-weight: 700; }
.dk-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 14px;
}
.dk-nav-btn {
  height: 38px; padding: 0 14px; border: 1px solid var(--line-strong);
  border-radius: 8px; background: var(--white); font: inherit; font-size: .9rem;
  color: var(--ink); cursor: pointer;
}
.dk-nav-btn:hover { border-color: var(--accent); color: var(--accent-dark); }
.dk-pageof { font-size: .95rem; display: inline-flex; align-items: center; gap: 6px; }
.dk-pageof input {
  width: 48px; height: 36px; text-align: center; font: inherit;
  border: 1px solid var(--line-strong); border-radius: 8px; color: var(--ink);
}
.dk-rot { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.dk-rot-label { font-size: .95rem; font-weight: 700; }
.dk-rot input[type=range] { flex: 1 1 auto; margin: 0; accent-color: var(--accent); }
.dk-val {
  min-width: 54px; text-align: right; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.dk-quick {
  display: grid; grid-template-columns: 1fr 1fr 1fr 10px 1fr 1fr 1fr;
  gap: 8px; margin-bottom: 4px;
}
.dk-quick button {
  height: 36px; border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--white); font: inherit; font-size: .88rem; color: var(--ink);
  cursor: pointer; font-variant-numeric: tabular-nums;
}
.dk-quick button:hover { border-color: var(--accent); color: var(--accent-dark); }
/* The manual deskew screen keeps the sheet perfectly still: the page wrapper
   wears the white paper and its shadow, while the canvas rotates inside —
   clipped at the page edge, exactly like the straighten the server performs. */
#pv-page.dk-clip { background: #fff; box-shadow: var(--shadow); overflow: hidden; }
#pv-page.dk-clip canvas { box-shadow: none; }

/* ---- edit metadata: their eight grey boxes + Add new field dialog ------ */
.md-editor { display: flex; flex-direction: column; }
.md-row {
  background: #f5f6f7; border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 12px;
}
.md-label {
  display: block; margin-bottom: 8px; font-size: .95rem; font-weight: 700;
  color: var(--ink);
}
.md-help { margin: 8px 0 0; font-size: .85rem; color: var(--muted); }
.md-addlink {
  margin: 2px 0 16px; color: var(--accent-dark); font-weight: 600;
  font-size: .95rem; text-decoration: none; cursor: pointer; align-self: flex-start;
}
.md-addlink:hover { text-decoration: none; }
.md-modal {
  position: fixed; inset: 0; z-index: 60; display: flex;
  align-items: center; justify-content: center;
  background: rgba(20, 30, 35, .38);
}
.md-modal[hidden] { display: none; }
.md-modal-box {
  width: min(420px, 92vw); background: var(--white); border-radius: 14px;
  padding: 16px 18px 18px; box-shadow: 0 18px 50px rgba(15, 25, 30, .3);
}
.md-modal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.md-modal-close {
  width: 30px; height: 30px; border: 0; border-radius: 8px; background: none;
  color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.md-modal-close:hover { background: #eceef0; color: var(--ink); }
.md-modal-title { font-weight: 700; color: var(--ink); }
.md-modal-box .md-row { background: var(--white); border: 0; padding: 0; }

/* ---- create bookmarks: their tree editor --------------------------------- */
.bm-create {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin-bottom: 14px; padding: 10px 14px; cursor: pointer;
  background: var(--white); border: 1px solid #4a90d9; border-radius: 10px;
  color: #2e77bf; font: inherit; font-size: .95rem; line-height: 1.45;
  text-align: center;
}
.bm-create:hover { background: #f2f8ff; }
.bm-create strong { font-weight: 600; }
.bm-create i { font-size: 1.2rem; }
.bm-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  margin-bottom: 14px; overflow: hidden;
}
.bm-head {
  margin: 0; padding: 12px 14px 6px; text-align: center;
  color: var(--muted); font-size: .95rem;
}
.bm-tree { padding: 4px 12px 14px; min-height: 220px; }
.bm-empty { margin: 12px 4px; color: var(--muted); font-size: .9rem; }
.bm-group { position: relative; }
.bm-row {
  display: flex; align-items: center; gap: 6px; padding: 2px 6px;
  border-radius: 6px; cursor: pointer; user-select: none;
}
.bm-row:hover { background: #f0f3f6; }
.bm-row.is-sel { background: #d9e7ff; }
.bm-handle {
  width: 13px; height: 13px; flex: 0 0 auto; display: inline-flex;
  align-items: center; justify-content: center; box-sizing: border-box;
  border: 1px solid #98a4b0; background: #fff; color: #45525e;
  font-size: 10px; line-height: 1; border-radius: 2px;
}
.bm-handle-empty { border: 0; background: none; }
.bm-icon { color: #6fa8dc; font-size: 1rem; flex: 0 0 auto; }
.bm-name { font-size: .95rem; color: var(--ink); }
.bm-kids { margin-left: 12px; border-left: 1px solid #dfe3e8; padding-left: 6px; }
.bm-inline {
  flex: 1 1 auto; min-width: 0; height: 26px; padding: 0 8px;
  border: 1px solid #4a90d9; border-radius: 4px; font: inherit;
  font-size: .92rem; color: var(--ink);
}
.bm-drop-before { box-shadow: 0 -2px 0 0 var(--accent); }
.bm-drop-after { box-shadow: 0 2px 0 0 var(--accent); }
.bm-drop-onto { outline: 2px dashed var(--accent); outline-offset: -2px; }
.bm-toolbar {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
  flex-wrap: wrap;
}
.bm-pagelabel { font-size: .95rem; display: inline-flex; align-items: center; gap: 6px; }
.bm-pagelabel input {
  width: 46px; height: 34px; text-align: center; font: inherit;
  border: 1px solid var(--line-strong); border-radius: 8px; color: var(--ink);
}
.bm-search {
  flex: 1 1 140px; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line-strong); border-radius: 8px; padding: 0 8px;
  background: var(--white);
}
.bm-search i { color: var(--muted); font-size: .9rem; }
.bm-search input {
  flex: 1 1 auto; min-width: 40px; height: 34px; border: 0; outline: none;
  font: inherit; font-size: .92rem; color: var(--ink); background: none;
}
.bm-count { font-size: .82rem; color: var(--muted); white-space: nowrap; }
.bm-arrow {
  width: 30px; height: 30px; flex: 0 0 auto; border: 1px solid var(--line-strong);
  border-radius: 6px; background: var(--white); color: var(--ink);
  font-size: 1rem; line-height: 1; cursor: pointer;
}
.bm-arrow:hover { border-color: var(--accent); color: var(--accent-dark); }
.bm-menu {
  position: fixed; z-index: 80; min-width: 170px; padding: 6px 0;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 14px 40px rgba(15, 25, 30, .22);
}
.bm-menu button {
  display: block; width: 100%; padding: 8px 18px; border: 0; background: none;
  font: inherit; font-size: .92rem; color: var(--ink); text-align: left;
  cursor: pointer;
}
.bm-menu button:hover { background: #eef3f8; }
.bm-menu-sep { height: 1px; margin: 6px 0; background: var(--line); }
.bm-page-input { max-width: 90px; }
.bm-hl {
  position: absolute; background: rgba(255, 214, 0, .42);
  border: 1px solid rgba(206, 158, 0, .85); border-radius: 2px;
  pointer-events: auto; cursor: pointer; z-index: 3;
}
.bm-hl.is-cur { background: rgba(255, 196, 0, .62); }

/* ---- extract images: their two green chooser cards ---------------------- */
.xi-head {
  margin: 4px 0 14px; text-align: center; font-weight: 700;
  color: var(--ink); font-size: .95rem;
}
.xi-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.xi-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 24px 10px 20px; cursor: pointer; font: inherit;
  background: var(--white); border: 1px solid #3f9e7c; border-radius: 8px;
  color: #2e8b6a;
}
.xi-card.is-on { background: #ecefee; }
.xi-icons { display: flex; align-items: center; gap: 6px; font-size: 1.5rem; }
.xi-icons .la-file-pdf { font-size: 1.7rem; }
.xi-sep { font-size: 1.05rem; }
.xi-label { font-weight: 700; font-size: .95rem; line-height: 1.35; text-align: center; }

/* ---- PDF to Word: their chooser cards ----------------------------------- */
/* Their two cards are 200x195: a green border, transparent fill, the
   "Keep layout" one pre-lit pale green with their inset shadow (their
   .default class), lifting while the pointer hovers either card. */
.wd-head {
  margin: 4px 0 20px; text-align: center; font-weight: 700;
  color: var(--ink); font-size: .95rem;
}
.wd-cards { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; }
.wd-card {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: 200px; min-height: 195px; padding: 25px 16px 20px;
  background: var(--white); border: 1px solid #3f9e7c; border-radius: 6px;
  color: #2e8b6a; font: inherit; cursor: pointer; text-align: center;
  transition: background-color .12s, box-shadow .12s;
}
.wd-card.is-on {
  background: var(--accent-soft);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.wd-card:hover { background: var(--accent-soft); }
.wd-icons { display: flex; align-items: center; gap: 8px; font-size: 2.2rem; }
.wd-icons .la-file-pdf { font-size: 2.4rem; }
.wd-icons .la-angle-right { font-size: 1rem; opacity: .7; }
.wd-stat { font-size: .78rem; color: var(--muted); min-height: 1em; }
.wd-card strong {
  margin-top: auto; font-size: .95rem; font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
}
.wd-card strong .la-arrow-right { font-size: .8rem; }
/* Their scan warning ("Scanned documents are not supported"), convert scope:
   the title bar with the close ×, the two lines and the file name. */
.wd-modal {
  position: fixed; inset: 0; z-index: 1200; overflow: auto;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 30, 35, .38);
}
.wd-modal[hidden] { display: none; }
.wd-card-modal {
  width: min(520px, 92vw); background: var(--white); border-radius: 12px;
  box-shadow: var(--shadow-lg, var(--shadow)); overflow: hidden;
}
.wd-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 18px; background: #f0f1f3; font-weight: 700; font-size: .95rem;
}
.wd-close {
  border: 0; background: none; font-size: 22px; line-height: 1;
  cursor: pointer; color: var(--muted); padding: 0 2px;
}
.wd-close:hover { color: var(--ink); }
.wd-modal-body { padding: 18px; font-size: .92rem; line-height: 1.55; color: var(--ink); }
.wd-modal-body p { margin: 0 0 10px; }
.wd-modal-body p:last-child { margin-bottom: 0; }

/* ---- PDF to Excel: same card mould, their step 2 ------------------------ */
.ex-new {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  background: var(--accent); color: #fff; border-radius: 999px;
  font-size: .66rem; font-weight: 700; vertical-align: 1px;
}
.ex-step2 { margin-top: 4px; }
.ex-check-row {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 0 26px;
}
.ex-check { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; cursor: pointer; }
.ex-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.ex-outline {
  background: transparent; border: 1px solid var(--accent);
  color: var(--accent-dark);
}
.ex-outline:hover { background: var(--accent-soft); }

/* ---- remove annotations: their All box over three type columns ---------- */
.da-head {
  margin: 0 0 10px; text-align: center; font-weight: 700;
  color: var(--ink); font-size: .95rem;
}
.da-all {
  display: flex; justify-content: center; align-items: center; gap: 8px;
  margin-bottom: 14px; font-size: .95rem; cursor: pointer;
}
.da-all input { width: 17px; height: 17px; accent-color: var(--accent); margin: 0; }
.da-cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 8px; margin-bottom: 20px;
}
.da-col { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.da-check {
  display: flex; align-items: center; gap: 6px; font-size: .85rem;
  color: var(--ink); cursor: pointer; white-space: nowrap;
}
.da-check input {
  width: 15px; height: 15px; accent-color: var(--accent);
  margin: 0; flex: 0 0 auto;
}
.da-pages { margin-bottom: 16px; }
.da-pagebox { display: flex; align-items: center; gap: 6px; }

/* ---- repair: their caution line over the one action --------------------- */
.rp-note {
  margin: 4px 0 18px; text-align: center; color: var(--muted);
  font-size: .95rem; line-height: 1.5;
}
/* Shown on the big page when a damaged upload cannot be parsed for a
   preview — the file is still accepted and the repair run recovers it. */
.pv-broken-note {
  max-width: 420px; margin: 0 auto; padding: 48px 26px;
  text-align: center; color: var(--muted); font-size: .95rem; line-height: 1.6;
}

/* ---- flatten: their joined option groups -------------------------------- */
/* Everything here hangs off .is-flatten: Flip wears the same fl- names (its
   .fl-seg is a button pair), so bare .fl- selectors were letting the later
   Flip rules restyle the flatten chips and vice versa. Scoped, each tool
   keeps its own. */
.preview-work.is-flatten .fl-head {
  margin: 0 0 10px; text-align: center; font-weight: 700;
  color: var(--ink); font-size: 1.02rem;
}
.preview-work.is-flatten .fl-seg {
  display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: 18px;
}
.preview-work.is-flatten .fl-seg label { display: inline-flex; }
.preview-work.is-flatten .fl-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.preview-work.is-flatten .fl-seg label > span {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px;
  border: 1px solid var(--line-strong); background: var(--white);
  font-size: .9rem; color: var(--ink); cursor: pointer; white-space: nowrap;
}
.preview-work.is-flatten .fl-seg label + label > span { border-left: 0; margin-left: -1px; }
.preview-work.is-flatten .fl-seg label:first-child > span { border-radius: 8px 0 0 8px; }
.preview-work.is-flatten .fl-seg label:last-child > span { border-radius: 0 8px 8px 0; }
.preview-work.is-flatten .fl-seg input:checked + span {
  border: 1px solid var(--accent); background: var(--accent-soft);
  color: var(--accent-dark); font-weight: 600; position: relative; z-index: 1;
}
.preview-work.is-flatten .fl-seg .sp-help { margin-left: 2px; }

/* Flatten, Protect and Extract text keep no page beside their settings:
   flattening hands the page back looking the same, protecting changes
   nothing you can see, and the text tool's whole output IS the text — the
   stage was showing nothing the options don't already say (the client's
   call for all of them). Compress and Split by bookmarks already run
   that way; the run still lands on the ready page with its own preview. */
.preview-work.is-flatten,
.preview-work.is-protect,
.preview-work.is-unlock,
.preview-work.is-etxt,
.preview-work.is-word,
.preview-work.is-exc,
.preview-work.is-ppt {
  max-width: 720px;
  /* The column is narrower than the page container, so it must centre
     itself — flush left it sat 70px off the window's centre line (the
     client's "center the button" on the PowerPoint screen). */
  margin-inline: auto;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "sel" "panel";
}
.preview-work.is-flatten .preview-stage,
.preview-work.is-protect .preview-stage,
.preview-work.is-unlock .preview-stage,
.preview-work.is-etxt .preview-stage,
.preview-work.is-word .preview-stage,
.preview-work.is-exc .preview-stage,
.preview-work.is-ppt .preview-stage { display: none; }
/* The column runs centred — file line, heading, chips, actions — and
   More options wears the soft chip beside the action (same chip as Bates);
   its label never changes, the steps just fold out beneath. */
.preview-work.is-flatten #pv-selected,
.preview-work.is-protect #pv-selected,
.preview-work.is-unlock #pv-selected,
.preview-work.is-etxt #pv-selected,
.preview-work.is-word #pv-selected,
.preview-work.is-exc #pv-selected,
.preview-work.is-ppt #pv-selected { text-align: center; }
.preview-work.is-flatten .hf-actions { justify-content: center; }
#fl-more {
  background: var(--accent-soft); border: 1px solid transparent;
  color: var(--accent-dark); border-radius: 8px; padding: 10px 16px;
}
#fl-more:hover { border-color: var(--accent-line); text-decoration: none; }

/* ---- protect: their password boxes and permission rows ------------------ */
.pt-field { margin-bottom: 16px; }
.pt-label {
  display: block; text-align: center; font-weight: 700; color: var(--ink);
  font-size: .95rem; margin-bottom: 8px;
}
.pt-inputrow { display: flex; align-items: center; gap: 8px; }
.pt-inputrow input { flex: 1 1 auto; min-width: 0; }
.pt-head {
  text-align: center; font-weight: 700; color: var(--ink);
  font-size: 1.02rem; margin: 2px 0 12px;
}
.pt-perms {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 22px; margin: 0 0 14px;
}
.pt-check { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--ink); cursor: pointer; }
.pt-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.pt-warn { text-align: center; margin: 0 0 18px; line-height: 1.5; }
.pt-extra { margin-bottom: 18px; }
.pt-extra[hidden] { display: none; }
/* Their Encryption row: the three joined choices, Strong AES 256 on. */
.pt-seg { display: flex; justify-content: center; flex-wrap: wrap; }
.pt-chip {
  font: inherit; font-size: .85rem; color: var(--ink); background: var(--white);
  border: 1px solid var(--line-strong); padding: 9px 12px; cursor: pointer;
  white-space: nowrap;
}
.pt-chip:first-child { border-radius: 8px 0 0 8px; }
.pt-chip:last-child { border-radius: 0 8px 8px 0; }
.pt-chip + .pt-chip { border-left: 0; margin-left: -1px; }
.pt-chip.is-on {
  border: 1px solid var(--accent); background: var(--accent-soft);
  color: var(--accent-dark); font-weight: 600; position: relative; z-index: 1;
}
/* More options wears the soft chip beside the action (the Bates chip). */
#pt-more {
  background: var(--accent-soft); border: 1px solid transparent;
  color: var(--accent-dark); border-radius: 8px; padding: 10px 16px;
}
#pt-more:hover { border-color: var(--accent-line); text-decoration: none; }

/* ---- unlock: their owner-password card and the one action ---------------- */
.ul-modal {
  position: fixed; inset: 0; z-index: 60; display: flex;
  align-items: center; justify-content: center;
  background: rgba(20, 30, 35, .38);
}
.ul-modal[hidden] { display: none; }
.ul-card {
  width: min(560px, 92vw); background: var(--white); border-radius: 10px;
  box-shadow: 0 18px 50px rgba(15, 25, 30, .3); overflow: hidden;
}
.ul-card-head {
  background: #f0f1f3; border-bottom: 1px solid var(--line);
  padding: 16px 22px; font-size: 1.05rem; color: var(--ink);
}
.ul-card-head strong { font-weight: 700; }
.ul-card-body { padding: 20px 22px 4px; }
.ul-line { margin: 0 0 14px; color: var(--ink); font-size: .95rem; }
.ul-inputrow { display: flex; align-items: center; gap: 6px; }
.ul-inputrow input {
  flex: 1 1 auto; min-width: 0; height: 44px; border: 1px solid var(--line-strong);
  border-radius: 8px; padding: 0 12px; font: inherit; font-size: .95rem;
  color: var(--ink); background: var(--white);
}
.ul-eye {
  width: 40px; height: 40px; border: 0; border-radius: 8px; background: none;
  color: var(--muted); cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; flex: 0 0 auto;
}
.ul-eye:hover { background: #eceef0; color: var(--ink); }
.ul-learnrow { margin: 12px 0 0; display: flex; align-items: center; gap: 6px; }
.ul-learn { color: var(--accent-dark); font-weight: 600; text-decoration: none; }
.ul-learn:hover { text-decoration: none; }
.ul-card-foot { display: flex; justify-content: flex-end; padding: 8px 22px 20px; }
.ul-card-foot .btn:disabled { opacity: .55; cursor: not-allowed; }

/* ------------------------------------------------- split down the middle ---*/
/* Their Split down the middle screen, in our palette: "Selected: <file>",
   the joined pair of mode buttons (their split icons) and the drag note
   above a tall page, then the cream bar. More options makes the bar grow
   upward with the checkbox rows — their default auto-detect first — each
   with its "?" bubble, exactly the way their own screen folds out. */
.preview-work.is-split {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "sel" "tools" "caption" "stage" "bar";
  gap: 10px; max-width: 1040px; margin: 22px auto 0; padding: 24px 30px 20px;
  background: #f0f1f3; border-radius: 20px;
}
.preview-work.is-split .preview-stage {
  grid-area: stage; width: 100%; max-width: 800px; margin: 0 auto;
}
.preview-work.is-split .preview-controls { display: contents; }
.sp-selected { grid-area: sel; text-align: center; margin: 0; }
/* Their two buttons form one joined pair, each with its split glyph. */
.sp-modes { grid-area: tools; display: flex; justify-content: center; }
.sp-mode {
  font: inherit; font-size: .875rem; color: var(--ink); background: var(--white);
  border: 1px solid var(--line); padding: 8px 16px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}
.sp-mode:first-child { border-radius: 8px 0 0 8px; }
.sp-mode:last-child { border-radius: 0 8px 8px 0; margin-left: -1px; }
.sp-mode svg { color: var(--muted); flex: 0 0 auto; }
.sp-mode:hover { color: var(--accent-dark); border-color: var(--accent-line); position: relative; z-index: 1; }
.sp-mode:hover svg { color: var(--accent-dark); }
.sp-mode.is-on {
  border-color: var(--accent); background: var(--accent-soft);
  color: var(--accent-dark); font-weight: 600; position: relative; z-index: 2;
}
.sp-mode.is-on svg { color: var(--accent-dark); }
.sp-caption { grid-area: caption; text-align: center; margin: 0; }
/* The cream bar: Split and More options, and the rows the bar grows when
   More options is pressed. In the flow at the end of the workspace — it
   used to be pinned to the window and covered the page (the client's
   overlap call), so it no longer floats. */
.sp-bar {
  grid-area: bar;
  background: var(--amber-bg); border: 1px solid var(--amber-line);
  border-radius: 14px; padding: 12px 20px 16px; text-align: center;
}
.sp-options {
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  margin: 2px 0 14px;
}
.sp-options[hidden] { display: none; }
.sp-check {
  display: inline-flex; align-items: center; gap: 8px; font-size: .92rem;
  color: var(--ink); cursor: pointer;
}
.sp-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.sp-help {
  width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-strong);
  color: var(--muted); font-size: .72rem; font-weight: 700; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: help; background: var(--white);
}
.sp-exclude { display: inline-flex; align-items: center; gap: 10px; }
.sp-exclude[hidden] { display: none; }
.sp-exclude label { font-size: .92rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.sp-exclude input {
  width: 300px; max-width: 62vw; height: 38px; border: 1px solid var(--line);
  border-radius: 8px; padding: 0 12px; font: inherit; background: var(--white);
  color: var(--ink);
}
.sp-actions { display: flex; align-items: center; justify-content: center; }
.sp-more {
  background: var(--accent-soft); border: 1px solid transparent;
  color: var(--accent-dark); font: inherit; font-size: .875rem; font-weight: 600;
  border-radius: 8px; padding: 12px 14px; cursor: pointer; margin-left: 10px;
}
.sp-more:hover { border-color: var(--accent-line); }
/* The split rule on the page: part one wears their fine diagonal hatching,
   with their draggable line at its edge and a generous invisible hit band
   so it is easy to grab. The overlay container passes pointer events
   through to the page, so the rule asks for them back. */
.preview-overlay .sp-tint {
  position: absolute; pointer-events: none;
  background: repeating-linear-gradient(45deg,
    rgba(31, 122, 109, .22) 0 2px, rgba(31, 122, 109, .04) 2px 9px);
}
.preview-overlay .sp-line { position: absolute; z-index: 2; touch-action: none; pointer-events: auto; }
.preview-overlay .sp-line::after { content: ""; position: absolute; background: var(--accent); }
.preview-overlay .sp-line.is-h { left: 0; right: 0; height: 14px; margin-top: -7px; cursor: row-resize; }
.preview-overlay .sp-line.is-h::after { left: 0; right: 0; top: 6px; height: 2px; }
.preview-overlay .sp-line.is-v { top: 0; bottom: 0; width: 14px; margin-left: -7px; cursor: col-resize; }
.preview-overlay .sp-line.is-v::after { top: 0; bottom: 0; left: 6px; width: 2px; }

/* ------------------------------------------------- split by bookmarks ---*/
/* Their Split by bookmarks screen: "Selected: <file>", a grey box holding
   the document's own table of contents — one line per bookmark at the
   chosen level, foldable to its children — then the Bookmark level buttons,
   the Contains text box, and the one action with More options beside it.
   White workspace, our colours. */
.preview-work.is-splitbk {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "sel" "warn" "tree" "level" "text" "options" "actions";
  gap: 12px; max-width: 1140px; margin: 22px auto 0;
}
.preview-work.is-splitbk .preview-stage { display: none; }
.preview-work.is-splitbk .preview-controls { display: contents; }
.sb-selected { grid-area: sel; text-align: center; margin: 0; }
.sb-warn {
  grid-area: warn; justify-self: center; margin: 0;
  background: var(--amber-bg); border: 1px solid var(--amber-line);
  color: #8a6d1f; border-radius: 8px; padding: 6px 14px; font-size: .85rem;
}
.sb-warn[hidden] { display: none; }
.sb-warn a { color: var(--accent-dark); font-weight: 600; }
.sb-tree {
  grid-area: tree; background: #f0f1f3; border: 1px solid var(--line);
  border-radius: 4px; padding: 16px 20px; height: 420px; overflow-y: auto;
  overflow-x: hidden; text-align: left;
}
.sb-tree .sb-ol { list-style: none; margin: 0; padding: 0; }
.sb-tree .sb-ol .sb-ol { padding-left: 22px; margin: 2px 0 4px; }
.sb-row { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 0; cursor: default; }
.sb-caret {
  width: 14px; flex: 0 0 14px; color: var(--muted); cursor: pointer;
  font-size: .7rem; transition: transform .12s ease; display: inline-block;
}
.sb-caret.is-leaf { visibility: hidden; }
.sb-caret.is-open { transform: rotate(90deg); }
.sb-title { font-size: .95rem; color: var(--ink); }
.sb-row:hover .sb-title { color: var(--accent-dark); }
.sb-loading { margin: 0; }
.sb-level {
  grid-area: level; display: flex; align-items: center; justify-content: center;
  gap: 14px;
}
.sb-label { font-size: .95rem; font-weight: 700; color: var(--ink); }
.sb-light { font-weight: 400; color: var(--muted); }
.sb-levels { display: flex; }
.sb-lvl {
  min-width: 36px; height: 32px; font: inherit; font-size: .875rem;
  background: var(--white); border: 1px solid var(--line); color: var(--ink);
  cursor: pointer; padding: 0 8px;
}
.sb-lvl:first-child { border-radius: 8px 0 0 8px; }
.sb-lvl:last-child { border-radius: 0 8px 8px 0; }
.sb-lvl + .sb-lvl { margin-left: -1px; }
.sb-lvl:hover { color: var(--accent-dark); border-color: var(--accent-line); position: relative; z-index: 1; }
.sb-lvl.is-on {
  border-color: var(--accent); background: var(--accent-soft);
  color: var(--accent-dark); font-weight: 700; position: relative; z-index: 2;
}
.sb-text { grid-area: text; text-align: center; }
.sb-text .sb-label { display: block; margin-bottom: 10px; }
.sb-text input {
  width: 78%; max-width: 900px; height: 46px; border: 1px solid var(--line-strong);
  border-radius: 8px; padding: 0 14px; font: inherit; font-size: .95rem;
  background: var(--white); color: var(--ink);
}
.sb-options {
  grid-area: options; display: flex; flex-direction: column; gap: 16px;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 20px; width: 100%; max-width: 660px; justify-self: center;
}
.sb-options[hidden] { display: none; }
.sb-opt-head { margin: 0 0 8px; font-size: .95rem; font-weight: 700; color: var(--ink); }
.sb-check { display: flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--ink); cursor: pointer; }
.sb-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.sb-options input[type=text] {
  width: 100%; height: 42px; border: 1px solid var(--line-strong); border-radius: 8px;
  padding: 0 12px; font: inherit; background: var(--white); color: var(--ink);
}
.sb-note { margin: 8px 0 0; }
.sb-actions {
  grid-area: actions; display: flex; align-items: center; justify-content: center;
  gap: 12px;
}
.sb-more {
  background: var(--accent-soft); border: 1px solid transparent;
  color: var(--accent-dark); font: inherit; font-size: .875rem; font-weight: 600;
  border-radius: 8px; padding: 12px 16px; cursor: pointer;
}
.sb-more:hover { border-color: var(--accent-line); }

/* ---------------------------------------------------- split by text ---*/
/* Their Split by text screen: "Select with your mouse an area of the page.
   Reset selection" above the page; the drawn box rides every page. The cream
   bar at the bottom holds their filter ("Text should start with", optional),
   the ? that explains it, the action and More options. */
.preview-work.is-text {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "sel" "hint" "stage" "bar";
  gap: 8px; max-width: 1100px; margin: 22px auto 0;
}
.preview-work.is-text .preview-stage {
  grid-area: stage; margin: 0 auto; width: 100%; max-width: 940px;
}
.preview-work.is-text .preview-controls { display: contents; }
.tx-selected { grid-area: sel; text-align: center; margin: 0; }
.tx-hint { grid-area: hint; text-align: center; margin: 0; }
.tx-hint a { color: var(--accent-dark); font-weight: 600; }
/* In the flow at the end of the workspace, like the other cream bars — it
   used to be pinned to the window and covered the page. */
.tx-bar {
  grid-area: bar;
  background: var(--amber-bg); border: 1px solid var(--amber-line);
  border-radius: 14px; padding: 14px 20px 16px; text-align: center;
}
.tx-label { display: block; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.tx-inputrow { display: flex; justify-content: center; align-items: center; gap: 8px; }
.tx-inputrow input {
  width: 78%; max-width: 900px; height: 46px; border: 1px solid var(--line-strong);
  border-radius: 8px; padding: 0 14px; font: inherit; font-size: .95rem;
  background: var(--white); color: var(--ink);
}
.tx-actions {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 12px;
}
.tx-more {
  background: var(--accent-soft); border: 1px solid transparent;
  color: var(--accent-dark); font: inherit; font-size: .875rem; font-weight: 600;
  border-radius: 8px; padding: 12px 16px; cursor: pointer;
}
.tx-more:hover { border-color: var(--accent-line); }
.tx-options {
  display: flex; flex-direction: column; gap: 8px; max-width: 660px;
  margin: 0 auto 14px; text-align: left;
}
.tx-options[hidden] { display: none; }
.tx-optlabel { font-weight: 700; font-size: .92rem; color: var(--ink); }
.tx-options input[type=text] {
  height: 42px; border: 1px solid var(--line-strong); border-radius: 8px;
  padding: 0 12px; font: inherit; background: var(--white); color: var(--ink);
}
.tx-note { margin: 0; }
/* The drawn box on the page. The overlay itself passes pointer events to the
   canvas underneath, which is what draws and moves the box. */
.preview-overlay .tx-box {
  position: absolute; border: 2px solid var(--accent);
  background: rgba(31, 122, 109, .10); pointer-events: none; z-index: 2;
}

/* ---- N-up: Sejda's "Choose style" cards and joined option pills -------- */
.nup-cards {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin: 6px 0 2px;
}
.nup-card {
  border: 1px solid var(--line); background: var(--white); border-radius: 10px;
  padding: 8px 10px; cursor: pointer; font: inherit;
}
/* Desktop: the two halves carry the same width — the preview box beside an
   equal options box — and the style cards tile in a grid. */
@media (min-width: 901px) {
  .tool-page.preview-page:has(.preview-work.is-nup) { max-width: 1160px; }
  .preview-work.is-nup { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nup-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nup-card { display: flex; flex-direction: column; align-items: center; }
}
.nup-card:hover { border-color: var(--accent); }
.nup-card.is-on { border-color: var(--accent); background: var(--accent-soft); }
.nup-mini {
  display: grid; grid-template-columns: repeat(var(--c, 2), auto); gap: 3px;
  padding: 4px; border: 1px solid var(--line); background: var(--white);
  border-radius: 4px; justify-content: center;
}
.nup-cell {
  width: 24px; height: 34px; display: flex; align-items: center;
  justify-content: center; border: 1px solid var(--line); border-radius: 2px;
  font-size: .78rem; color: var(--muted);
}
.nup-card[data-n="2"] .nup-cell { width: 44px; height: 60px; }
.nup-cap { display: block; margin-top: 6px; font-size: .85rem; color: var(--muted); text-align: center; }
.nup-card.is-on .nup-cap { color: var(--accent-dark); }
.nup-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px; margin: 5px 0;
}
.nup-row-label { font-size: .92rem; font-weight: 600; color: var(--ink); }
.nup-flow { display: flex; flex-direction: column; gap: 4px; align-items: center; margin-top: 4px; }
.pv-seg { display: inline-flex; }
.pv-seg-btn {
  border: 1px solid #ccc; border-right-width: 0; background: var(--white);
  color: #333; font: inherit; font-size: .8rem; padding: 6px 12px; cursor: pointer;
}
.pv-seg-btn:first-child { border-radius: 4px 0 0 4px; }
.pv-seg-btn:last-child { border-radius: 0 4px 4px 0; border-right-width: 1px; }
.pv-seg-btn.is-on {
  border-color: var(--accent); background: var(--accent-soft); color: #000;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}

/* ---- Flip: their two joined choices, each with its own (?) --------------- */
.fl-head { text-align: center; font-weight: 700; font-size: 1.05rem; margin: 4px 0 12px; }
.fl-wrap { text-align: center; }
.fl-seg { display: inline-flex; }
.fl-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid #ccc; border-right-width: 0; background: var(--white);
  color: var(--ink); font: inherit; font-size: .95rem; padding: 10px 18px; cursor: pointer;
}
.fl-btn:first-child { border-radius: 4px 0 0 4px; }
.fl-btn:last-child { border-radius: 0 4px 4px 0; border-right-width: 1px; }
.fl-btn.is-on {
  border-color: var(--accent); background: var(--accent-soft);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.fl-btn .la { color: var(--muted); cursor: help; font-size: .95em; }
.fl-pages { max-width: 420px; margin: 16px auto 0; }

/* ------------------------------------------------- detail under the drop box
   Client: "Split by text add guide like other with". The files-family guide
   dress on the Split by text tool. Rides inside #pv-start, so the workspace
   replaces it once a file loads. Step cards reuse the parked walkthrough
   classes from app.css; the boxes wear the site-card dress. Same block as
   pages.css, copied because preview.html does not load that sheet. */
.files-guide {
  width: min(880px, 100% - 32px); margin: 56px auto 84px;
  text-align: left;
}
.files-guide .howto-steps { margin-top: 26px; }
.files-guide .guide-photo {
  display: block; max-width: 100%; height: auto; margin: 16px auto 0;
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 14px 34px rgba(12, 77, 143, .10);
}
.files-feats {
  list-style: none; margin: 30px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}
.files-feat {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 15px 16px; box-shadow: 0 14px 34px rgba(12, 77, 143, .06);
}
.files-feat > i {
  flex: 0 0 auto; font-size: 21px; line-height: 1.2; color: var(--accent-dark);
}
.files-feat b { display: block; font-size: .95rem; color: var(--ink); }
.files-feat p { margin: 3px 0 0; font-size: .84rem; line-height: 1.5; color: var(--muted); }
@media (max-width: 640px) {
  .files-guide { margin: 40px auto 64px; }
  .files-feats { grid-template-columns: 1fr; }
}