/* ==========================================================================
   HuntPDF — shared tool workflow  (tool-ux.css)

     body.hx-s1  Upload      centred drop zone + cloud sources
     body.hx-s2  Settings    file cards (left) + settings sidebar (right)
     body.hx-s3  Processing  full-screen blue loader
     body.hx-s4  Download    success card

   HuntPDF blue is the only accent. No red anywhere. No step indicator,
   no preview page, no circular workflow dots.
   ========================================================================== */

:root {
  --hx-blue:      #2563EB;
  --hx-blue-d:    #1D4ED8;
  --hx-blue-l:    #EFF4FF;
  --hx-blue-bd:   #DBEAFE;
  --hx-ink:       #0B1220;
  --hx-slate:     #475569;
  --hx-mute:      #94A3B8;
  --hx-line:      #E7ECF3;
  --hx-grey:      #F7F9FC;
  --hx-green:     #16A34A;
  --hx-green-bg:  #E8F8EF;
  --hx-orange:    #EA7317;
  --hx-orange-bg: #FEF1E6;
  --hx-violet:    #7C3AED;
  --hx-violet-bg: #F1ECFE;
  --hx-shadow:    0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(37,99,235,.06);
}

/* ==========================================================================
   SCREEN SWITCHING
   ========================================================================== */

/* 1 — Upload: no workspace yet. */
body.hx-s1 #hxGrid { display: none; }

/* 2 — Settings: the upload box and its cloud row step aside.
   Matched by CLASS as well as id: hp-sources.js injects `.wp-sources` with no
   id on the 27 tools that don't ship the row in their markup. */
body.hx-s2 #dropzone,
body.hx-s2 #fileList,
body.hx-s2 #wpSources,
body.hx-s2 #wpUrlPanel,
body.hx-s2 #wpList,
body.hx-s2 .wp-sources,
body.hx-s2 .wp-url-panel,
body.hx-s2 .wp-add-more-group,
body.hx-s2 .wp-org-head,
/* Match by CLASS as well as id. A tool that renders its OWN file list (Merge's
   `ul.wp-list`, and `.file-list` on 51 others) would otherwise show the file a
   SECOND time next to our card — one attached file, two rows on screen. Hiding
   by id alone means one renamed container silently brings the duplicate back. */
body.hx-s2 .wp-list,
body.hx-s2 .file-list,
body.hx-s2 .wp-organize .wp-count,
body.hx-s2 .up-file-list { display: none !important; }

/* 3 — Processing: page frozen behind the overlay. */
body.hx-s3 { overflow: hidden; }
body.hx-s3 #hxGrid,
body.hx-s3 #dropzone,
body.hx-s3 #wpSources,
body.hx-s3 #wpUrlPanel,
body.hx-s3 .wp-sources,
body.hx-s3 .wp-url-panel,
body.hx-s3 #status { display: none !important; }
body.hx-s3 #hxProc { display: flex; }

/* 4 — Download: everything replaced by the success card.
   #result stays in the DOM (tools read from it) but is never shown. */
body.hx-s4 #hxGrid,
body.hx-s4 .wp-list,
body.hx-s4 .file-list,
body.hx-s4 #dropzone,
body.hx-s4 #fileList,
body.hx-s4 #wpSources,
body.hx-s4 #wpUrlPanel,
body.hx-s4 .wp-sources,
body.hx-s4 .wp-url-panel,
body.hx-s4 #wpOrganize,
body.hx-s4 #status,
body.hx-s4 #result,
body.hx-s4 #wpProgressOverlay { display: none !important; }
body.hx-s4 #hxDone { display: block; }

/* the old inline progress overlay is superseded by screen 3 */
#wpProgressOverlay { display: none !important; }

/* ---- "Most Popular Tools" is gone ----
   It showed the same 10 tools on every page, whatever the user had just made.
   The contextual "Continue editing this document" rail replaces it. */
#trendingWrapper,
.trending-wrapper { display: none !important; }

/* ---- no ads in the workflow ----
   tool.js injects `.hp-ad.hp-ad-tool-result` next to #status the moment a job
   finishes, and ads.js auto-renders any `.hp-ad` on the page. Once a document
   is attached the screen belongs to the document, so every ad slot is
   suppressed across the workspace, processing and download screens. */
body.hx-s2 .hp-ad,
body.hx-s3 .hp-ad,
body.hx-s4 .hp-ad,
body.hx-s2 [data-ad-type],
body.hx-s3 [data-ad-type],
body.hx-s4 [data-ad-type],
body.hx-attached .hp-ad,
body.hx-attached [data-ad-type] { display: none !important; }

/* ==========================================================================
   SCREEN 1 — upload  (the attach box)

   hp-unified.css sets `.dropzone { max-width: 530px !important }` (line 1887,
   which overrides its own earlier 1104px rule). 530 x 1.2 = 636px.

   tool-ux.css loads BEFORE hp-unified.css on the full tools and AFTER it on
   split-pdf, so a same-specificity override would win on some pages and lose
   on others. #dropzone (id) and `body .dropzone` (element+class) both outrank
   a bare `.dropzone`, so these win no matter which file lands last.
   ========================================================================== */
/* ---- THE ATTACH BOX — one definition for every tool ----
   Word to PDF (and a handful of others) carried a full inline style block for
   the drop box: gradient, dashed border, glow, gradient-text heading. Most
   tools only had the bare `max-width: 530px` rule, so their box fell back to a
   plain grey rectangle — which is why they looked wrong next to Word to PDF.
   The complete style now lives here, in the shared sheet, so all 64 tools are
   identical and can't drift apart again. tool-ux.css loads last, so this wins.
   ------------------------------------------------------------------------- */
#dropzone,
body .dropzone {
  position: relative !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;

  width: 100% !important;
  max-width: 636px !important;      /* the site's 530px + 20% */

  /* The box must never be squeezed by its parent.
     25 of the 64 tools (every AI tool, ocr-pdf, split-pdf, sign-pdf, …) have no
     #hp-tool-main wrapper, so the box sits as a DIRECT CHILD OF <body> — and
     body is `display:flex; flex-direction:column; min-height:100vh`
     (tool.css:21). In a column flex container every item defaults to
     flex-shrink:1, so once the page's content exceeds the viewport the browser
     shrinks the box. It collapsed to 74px — exactly its own 70px of padding
     plus 4px — its contents then overflowed, and because they are
     vertically centred the download icon spilled UPWARD out of the box and
     landed on top of the hero subtitle.
     `min-height: 0` made it worse: a flex item's default `min-height: auto` is
     the very thing that stops it shrinking below its content, and setting 0
     threw that protection away.
     flex-shrink:0 + min-height:auto = the box is always as tall as it needs to
     be, wherever it is nested. */
  flex: 0 0 auto !important;
  min-height: auto !important;

  margin: 2px auto !important;
  padding: 35px 40px !important;

  background: linear-gradient(135deg, #FFFBFB 0%, #EFF6FF 60%, #EFF6FF 100%) !important;
  border: 2px dashed #93C5FD !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  text-align: center !important;
  cursor: pointer;
  transition: all .2s !important;
}

/* the soft blue glow that rides the border on hover */
#dropzone::before,
body .dropzone::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  padding: 2px;
  background: linear-gradient(135deg, transparent, rgba(37, 99, 235, 0.15), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s;
}
#dropzone:hover::before,
body .dropzone:hover::before { opacity: 1; }

#dropzone:hover, #dropzone.drag-over,
body .dropzone:hover, body .dropzone.drag-over {
  background: linear-gradient(135deg, #FFFFFF 0%, #EFF6FF 50%, #DBEAFE 100%) !important;
  border-color: #2563EB !important;
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.18), 0 2px 6px rgba(15, 23, 42, 0.06) !important;
  transform: translateY(-2px) !important;
}

#dropzone .icon,
body .dropzone .icon {
  margin: 0 auto 4px !important;
  font-size: 42px !important;
  line-height: 1;
  color: #2563EB !important;
  filter: drop-shadow(0 2px 6px rgba(37, 99, 235, 0.25));
}

#dropzone h3,
body .dropzone h3 {
  margin: 0 0 4px !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, #2563EB, #3B82F6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

#dropzone p,
body .dropzone p {
  margin: 0 !important;
  color: #6B7280 !important;
  font-size: 14px !important;
}

/* Everything in the attach box is centred on one axis. */
#dropzone.hx-dz {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
#dropzone.hx-dz > * { margin-left: auto; margin-right: auto; }

/* The browser's grey "Choose Files / No file chosen" control is replaced by
   a real button. The input still does the work — it is only made invisible,
   never display:none, so tools that read or reset it keep working. */
#dropzone .hx-native {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0; opacity: 0; pointer-events: none;
}

.hx-choose {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: 12px; padding: 13px 30px;
  border: 0; border-radius: 12px; cursor: pointer;
  font: 700 15px/1 inherit; color: #fff; letter-spacing: .01em;
  background: linear-gradient(150deg, #4F8CFB, var(--hx-blue) 55%, var(--hx-blue-d));
  box-shadow: 0 8px 20px rgba(37,99,235,.30), inset 0 1px 1px rgba(255,255,255,.45);
  transition: transform .15s, box-shadow .15s;
}
.hx-choose svg { width: 17px; height: 17px; flex: none; }
.hx-choose:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(37,99,235,.40), inset 0 1px 1px rgba(255,255,255,.45);
}
.hx-choose:active { transform: translateY(0); }
.hx-choose:focus-visible { outline: 3px solid var(--hx-blue-bd); outline-offset: 2px; }
@media (max-width: 560px) { .hx-choose { width: 100%; padding: 14px 20px; } }

/* ==========================================================================
   SCREEN 2 — the workspace

   ONE box, identical to the upload box: same 2px dashed #93C5FD border, same
   gradient, same 16px radius, same blue shadow. Files on the left, settings on
   the right, separated by a dashed divider — not two floating cards.
   ========================================================================== */
/* ONE box — same as the upload box. No columns, no divider, no "Settings"
   heading. Files, then whatever options the tool has, all in the one panel. */
.hx-grid {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* 200% of the previous 880px. Clamped to the viewport so it can never
     overflow on a laptop screen. */
  max-width: min(1760px, calc(100vw - 32px));
  margin: 0 auto 18px;

  background: linear-gradient(135deg, #FFFBFB 0%, #EFF6FF 60%, #EFF6FF 100%);
  border: 2px dashed #93C5FD;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

/* the tool's own option controls, inside the box, above the buttons */
.hx-opts { padding: 2px 22px 6px; }
.hx-opts:empty { display: none; }
.hx-opts > * { max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; }

/* ---- the primary action, BELOW the box ---- */
/* The action button lives BELOW the box, centred under it. */
.hx-cta {
  width: 100%;
  max-width: min(1760px, calc(100vw - 32px));
  margin: 0 auto 30px;
  display: flex; justify-content: center; align-items: center;
}
.hx-cta:empty { display: none; }
.hx-cta .actions { display: block !important; margin: 0 !important; width: 100%; max-width: 420px; }
.hx-cta .actions button,
.hx-cta .actions .btn,
.hx-cta button.primary {
  width: 100%; justify-content: center;
  background: linear-gradient(150deg, #4F8CFB, var(--hx-blue) 55%, var(--hx-blue-d)) !important;
  color: #fff !important; border: 0 !important; border-radius: 12px !important;
  padding: 16px 24px !important; font-weight: 700 !important; font-size: 16px !important;
  box-shadow: 0 10px 24px rgba(37,99,235,.32), inset 0 1px 1px rgba(255,255,255,.45) !important;
  cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.hx-cta .actions button:hover,
.hx-cta button.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(37,99,235,.42), inset 0 1px 1px rgba(255,255,255,.45) !important;
}

/* column headings — no filled strips, they sit straight on the tint */
.hx-col-head {
  display: flex; align-items: baseline; gap: 10px;
  padding: 13px 22px 0;
}
.hx-col-title { font-size: 14px; font-weight: 700; color: var(--hx-ink); }
.hx-col-sub   { font-size: 12px; color: var(--hx-mute); margin-left: auto; }

.hx-files {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 13px 22px; align-content: flex-start; flex: 1;
}

/* ---- file card ---- */
.hx-fcard {
  position: relative;
  width: 138px; padding: 13px 10px 10px;
  border: 1px solid var(--hx-blue-bd); border-radius: 12px;
  background: #fff; text-align: center;
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.hx-fcard[draggable="true"] { cursor: grab; }
.hx-fcard:hover { border-color: var(--hx-blue); box-shadow: 0 6px 18px rgba(37,99,235,.12); }
.hx-fcard.hx-dragging { opacity: .45; }
.hx-fcard.hx-over { border-color: var(--hx-blue); transform: translateY(-2px); }

.hx-fx {
  position: absolute; top: -8px; right: -8px; z-index: 2;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--hx-line); background: #fff; color: var(--hx-slate);
  cursor: pointer; display: grid; place-items: center; padding: 0;
  box-shadow: 0 2px 6px rgba(15,23,42,.12);
  transition: background .15s, color .15s, border-color .15s;
}
.hx-fx svg { width: 13px; height: 13px; }
.hx-fx:hover { background: var(--hx-blue); border-color: var(--hx-blue); color: #fff; }

.hx-fnum {
  position: absolute; top: 8px; left: 8px;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px; background: var(--hx-blue-l); color: var(--hx-blue-d);
  font-size: 11px; font-weight: 800; line-height: 19px;
}

/* ---- document preview ----
   A likeness of the file: page 1 of the PDF, or the image itself, drawn small.
   Formats the browser cannot render (DOCX / XLSX / PPTX) keep the type icon.
   Both states use the same box, so the card never reflows when a render lands. */
.hx-doc {
  position: relative;
  width: 106px; height: 134px; margin: 0 auto 10px;
  border: 1px solid var(--hx-line); border-radius: 8px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(15,23,42,.07);
}
.hx-doc canvas,
.hx-doc img {
  max-width: 100%; max-height: 100%;
  display: block; object-fit: contain;
  animation: hxDocIn .25s ease;
}
@keyframes hxDocIn { from { opacity: 0; } to { opacity: 1; } }

.hx-doc-ico {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--hx-blue-l); color: var(--hx-blue);
}
.hx-doc-ico svg { width: 22px; height: 22px; }
.hx-doc.has-doc .hx-doc-ico { display: none; }

.hx-fext {
  position: absolute; bottom: 6px; right: 6px;
  padding: 2px 7px; border-radius: 999px;
  background: var(--hx-blue); color: #fff;
  font-size: 9px; font-weight: 800; letter-spacing: .4px;
  box-shadow: 0 2px 6px rgba(15,23,42,.20);
}

.hx-k-pdf .hx-doc-ico { background: var(--hx-blue-l);    color: var(--hx-blue); }
.hx-k-doc .hx-doc-ico { background: var(--hx-blue-l);    color: var(--hx-blue-d); }
.hx-k-xls .hx-doc-ico { background: var(--hx-green-bg);  color: var(--hx-green); }
.hx-k-ppt .hx-doc-ico { background: var(--hx-orange-bg); color: var(--hx-orange); }
.hx-k-img .hx-doc-ico { background: var(--hx-violet-bg); color: var(--hx-violet); }
.hx-k-txt .hx-doc-ico,
.hx-k-gen .hx-doc-ico { background: #F1F5F9;             color: var(--hx-slate); }

.hx-k-pdf .hx-fext { background: var(--hx-blue); }
.hx-k-doc .hx-fext { background: var(--hx-blue-d); }
.hx-k-xls .hx-fext { background: var(--hx-green); }
.hx-k-ppt .hx-fext { background: var(--hx-orange); }
.hx-k-img .hx-fext { background: var(--hx-violet); }
.hx-k-txt .hx-fext,
.hx-k-gen .hx-fext { background: var(--hx-slate); }

.hx-fname {
  font-size: 12.5px; font-weight: 600; color: var(--hx-ink); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hx-fmeta {
  margin-top: 3px; font-size: 11px; color: var(--hx-mute);
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
}
.hx-fpages:not(:empty)::before { content: '·'; margin-right: 6px; }

.hx-col-foot {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap; padding: 0 22px 14px;
}

.hx-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border: 1px solid var(--hx-blue-bd); border-radius: 10px;
  background: #fff; font: 600 13px/1 inherit; color: var(--hx-blue);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.hx-btn svg { width: 15px; height: 15px; flex: none; }
.hx-btn:hover { border-color: var(--hx-blue); background: var(--hx-blue-l); }
.hx-btn-quiet { color: var(--hx-slate); }
.hx-btn-quiet:hover { border-color: var(--hx-mute); background: #F1F5F9; color: var(--hx-ink); }


/* ---- settings sidebar ---- */


.hx-side-body { padding: 16px; }

/* ---- no upload controls in Settings ----
   Two different source pickers exist, and both were landing here:

     1. `.wp-sources`        — the "Or upload from: Computer / Google Drive /
                               Dropbox / OneDrive" row under the drop box.
                               Belongs to screen 1. hp-sources.js can inject it
                               late, after the sidebar is built, so hiding it is
                               safer than only excluding it from the move.

     2. `.wp-add-more-group` — a SECOND picker (Computer / Drive / Dropbox /
                               OneDrive) that lives INSIDE #wpOrganize. Because
                               #wpOrganize is the settings block we move into
                               the sidebar, these buttons came with it. They
                               duplicate our own "Add more files" button.

   Settings is for tool options. Attaching happens on screen 1, or via the
   Add more files button. */
.hx-side-body .wp-sources,
.hx-side-body #wpSources,
.hx-side-body .wp-url-panel,
.hx-side-body #wpUrlPanel,
.hx-side-body .wp-add-more-group,
.hx-side-body .wp-add-more,
.hx-side-body .wp-org-head,
.hx-side-body #wpList,
.hx-side-body .file-list,
.hx-side-body #fileList { display: none !important; }

/* a .wp-bottom-row that held nothing but those buttons would leave a gap */
.hx-side-body .wp-bottom-row:empty { display: none !important; }
.hx-side-body .wp-bottom-row { margin: 0 !important; padding: 0 !important; }

/* The tool's own option blocks were MOVED in here untouched. These rules only
   relax widths so they fit a 340px column — no colours, no fonts, no logic. */
.hx-side-body > * { max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
.hx-side-body #wpOrganize,
.hx-side-body .wp-organize {
  border: 0 !important; box-shadow: none !important;
  padding: 0 !important; margin: 0 0 14px !important; background: transparent !important;
}
.hx-side-body .wp-bottom-row,
.hx-side-body .wp-add-more-group { flex-direction: column; align-items: stretch; gap: 10px; }
.hx-side-body .actions { margin: 14px 0 0 !important; display: block !important; }
.hx-side-body .actions button,
.hx-side-body .actions .btn,
.hx-side-body button.primary {
  width: 100%; justify-content: center;
}
/* Primary action button — HuntPDF blue gradient */
.hx-side-body .actions button,
.hx-side-body button.primary {
  background: linear-gradient(150deg, #4F8CFB, var(--hx-blue) 55%, var(--hx-blue-d)) !important;
  color: #fff !important; border: 0 !important; border-radius: 11px !important;
  padding: 14px 20px !important; font-weight: 700 !important; font-size: 15px !important;
  box-shadow: 0 8px 20px rgba(37,99,235,.30), inset 0 1px 1px rgba(255,255,255,.4) !important;
  cursor: pointer;
}
.hx-side-body .actions button:hover,
.hx-side-body button.primary:hover {
  box-shadow: 0 12px 26px rgba(37,99,235,.38), inset 0 1px 1px rgba(255,255,255,.4) !important;
}

/* ==========================================================================
   SCREEN 3 — processing
   ========================================================================== */
.hx-proc {
  display: none; position: fixed; inset: 0; z-index: 9998;
  background: rgba(255,255,255,.72); backdrop-filter: blur(2px);
  align-items: center; justify-content: center; padding: 24px;
}
/* Lighter, smaller loader: a compact centered card instead of a full-screen
   takeover. Same processing feedback, far less visual weight. */
.hx-proc-inner {
  text-align: center; width: 100%; max-width: 320px;
  background: #fff; border: 1px solid rgba(15,23,42,.08);
  border-radius: 16px; padding: 22px 24px;
  box-shadow: 0 8px 30px -10px rgba(37,99,235,.25), 0 1px 2px rgba(16,24,40,.04);
}

.hx-loader {
  width: 34px; height: 34px; margin: 0 auto 14px; position: relative;
}
.hx-loader span {
  position: absolute; inset: 0;
  border: 2.5px solid transparent; border-top-color: var(--hx-blue);
  border-radius: 50%; animation: hxSpin 1.4s cubic-bezier(.5,0,.5,1) infinite;
}
.hx-loader span:nth-child(2) { inset: 4px;  border-top-color: #4F8CFB; animation-delay: -.10s; }
.hx-loader span:nth-child(3) { inset: 8px;  border-top-color: #93B4FD; animation-delay: -.20s; }
.hx-loader span:nth-child(4) { inset: 12px; border-top-color: var(--hx-blue-bd); animation-delay: -.30s; }
@keyframes hxSpin { to { transform: rotate(360deg); } }

.hx-proc-title {
  font-size: 16px; font-weight: 700; letter-spacing: -.01em;
  color: var(--hx-ink); margin: 0 0 4px;
}
.hx-proc-msg {
  font-size: 13px; color: var(--hx-slate); margin: 0 0 16px; min-height: 18px;
  animation: hxFade .35s ease;
}
@keyframes hxFade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; } }

.hx-bar {
  height: 5px; border-radius: 999px; background: #EDF2F9; overflow: hidden;
}
.hx-bar i {
  display: block; height: 100%; width: 6%; border-radius: 999px;
  background: linear-gradient(90deg, #4F8CFB, var(--hx-blue));
  transition: width .3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .hx-loader span { animation: none; }
  .hx-bar i { transition: none; }
}

/* ==========================================================================
   SCREEN 4 — download
   ========================================================================== */
/* Sits at the TOP of the tool area (inserted before #dropzone), so the
   finished file is the first thing on screen — as it was before.

   Same box as the attach box on every tool: same 636px width, same radius,
   same soft blue gradient and blue shadow. Solid border instead of dashed,
   because this one is a result rather than a target. */
.hx-done { display: none; width: 100%; max-width: 1000px; margin: 8px auto 40px; }
/* Identical to the upload box, rule for rule: same 636px width, same
   35px/40px padding, same gradient, same 2px dashed #93C5FD border, same 16px
   radius, same blue shadow. min-height is set from JS to the measured height
   of the upload box, so the two are the same size as well as the same style. */
.hx-done-card {
  padding: 35px 40px;
  background: linear-gradient(135deg, #FFFBFB 0%, #EFF6FF 60%, #EFF6FF 100%);
  border: 2px dashed #93C5FD;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.hx-done-card > * { width: 100%; }

/* success animation */
.hx-tick { width: 54px; height: 54px; margin: 0 auto 10px; }
.hx-tick svg { width: 100%; height: 100%; }
.hx-tick-c {
  stroke: var(--hx-blue); stroke-width: 2.5;
  stroke-dasharray: 152; stroke-dashoffset: 152;
  animation: hxDraw .6s cubic-bezier(.65,0,.45,1) forwards;
}
.hx-tick-p {
  stroke: var(--hx-blue); stroke-width: 4;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 48; stroke-dashoffset: 48;
  animation: hxDraw .35s cubic-bezier(.65,0,.45,1) .5s forwards;
}
@keyframes hxDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hx-tick-c, .hx-tick-p { animation: none; stroke-dashoffset: 0; }
}

.hx-done-h {
  font-size: 21px; font-weight: 800; letter-spacing: -.02em;
  color: var(--hx-ink); margin: 0 0 14px;
}

.hx-summary {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 11px 14px; margin: 0 0 14px;
  background: #fff; border: 1px solid var(--hx-line); border-radius: 12px;
}
.hx-summary .hx-ficon {
  position: relative; width: 44px; height: 44px; margin: 0; flex: none;
  border-radius: 10px; display: grid; place-items: center;
  background: var(--hx-blue-l); color: var(--hx-blue);
}
.hx-summary .hx-ficon svg { width: 22px; height: 22px; }
.hx-summary .hx-ficon .hx-fext { display: none; }
.hx-summary.hx-k-xls .hx-ficon { background: var(--hx-green-bg);  color: var(--hx-green); }
.hx-summary.hx-k-ppt .hx-ficon { background: var(--hx-orange-bg); color: var(--hx-orange); }
.hx-summary.hx-k-img .hx-ficon { background: var(--hx-violet-bg); color: var(--hx-violet); }
.hx-summary.hx-k-doc .hx-ficon { background: var(--hx-blue-l);    color: var(--hx-blue-d); }
.hx-summary-tx { min-width: 0; }
.hx-summary-tx b {
  display: block; font-size: 14px; color: var(--hx-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hx-summary-tx span { font-size: 12px; color: var(--hx-mute); }

/* big blue download button */
.hx-dl-row { margin: 0 0 14px; }
.hx-dl {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 14px 24px; border: 0; border-radius: 12px;
  font: 700 16px/1 inherit; color: #fff; text-decoration: none; cursor: pointer;
  background: linear-gradient(150deg, #4F8CFB, var(--hx-blue) 55%, var(--hx-blue-d));
  box-shadow: 0 10px 24px rgba(37,99,235,.32), inset 0 1px 1px rgba(255,255,255,.45);
  transition: transform .15s, box-shadow .15s;
}
.hx-dl:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(37,99,235,.42), inset 0 1px 1px rgba(255,255,255,.45); }
.hx-dl svg { width: 19px; height: 19px; flex: none; }

.hx-dl-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.hx-dl-alt {
  background: #fff; color: var(--hx-blue-d);
  border: 1px solid var(--hx-line); box-shadow: none;
  font-size: 13.5px; padding: 11px 16px; border-radius: 10px;
}
.hx-dl-alt:hover { border-color: var(--hx-blue); background: var(--hx-blue-l); box-shadow: none; transform: none; }
.hx-dl-alt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hx-done-bar {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--hx-blue-bd);
}
/* the buttons in here sit on the tinted card, so they need a solid backing */
.hx-done-bar .hx-btn { background: #fff; }

/* ---- "Process another file" is removed from every download page ----
   Three separate things used to render it:
     1. our own download card            (removed from tool-ux.js)
     2. tool.js  -> .result-again inside #result
     3. wp-tool.js -> MOVES it out into a standalone #wpProcessAnother box,
        which sits OUTSIDE #result and therefore survived #result being hidden.
   Hidden unconditionally so it cannot come back through any of the three. */
#wpProcessAnother,
.wp-process-another,
.result-again,
a.result-again,
button.result-again { display: none !important; }

.hx-share-pop {
  display: flex; gap: 8px; justify-content: center; margin-top: 12px;
}
.hx-share-pop[hidden] { display: none; }
.hx-share-pop a,
.hx-share-pop button {
  padding: 8px 15px; border: 1px solid var(--hx-line); border-radius: 9px;
  background: #fff; font: 600 12.5px/1 inherit; color: var(--hx-slate);
  cursor: pointer; text-decoration: none;
}
.hx-share-pop a:hover,
.hx-share-pop button:hover { border-color: var(--hx-blue); color: var(--hx-blue); }

@media (max-width: 560px) {
  .hx-done-card { padding: 28px 18px 22px; }
}

/* ==========================================================================
   LITE MODE — editor tools
   (Split, Organize, Rotate, Sign, PDF Editor, Extract Pages, Delete Pages,
    Redact, Repair, Unlock, File Compare)

   These tools show a page-thumbnail grid, which IS their settings screen —
   exactly like iLovePDF's own Split/Organize. We do not touch screens 1 & 2
   at all. They only receive the shared Processing and Download screens, laid
   over the page, so the experience is identical everywhere.
   ========================================================================== */

/* never restructure an editor tool */
body.hx-lite #hxGrid { display: none !important; }
/* the attach box is the same 636px on editor tools too — nothing to undo */

/* screen 3 already covers the page (it is fixed + opaque) — nothing to hide */
body.hx-lite.hx-s3 #hxGrid { display: none !important; }

/* screen 4: the download card becomes a full-page overlay so the editor
   behind it is replaced, not merely scrolled past */
body.hx-lite.hx-s4 { overflow: hidden; }
body.hx-lite.hx-s4 #hxDone {
  display: flex; position: fixed; inset: 0; z-index: 9997;
  background: #fff; overflow-y: auto;
  align-items: flex-start; justify-content: center;
  padding: 48px 20px; margin: 0; max-width: none;
}
body.hx-lite.hx-s4 .hx-done-row { width: 100%; max-width: 1000px; }

/* in lite mode nothing else is hidden — the overlay does the work */
body.hx-lite.hx-s4 #dropzone,
body.hx-lite.hx-s4 #status,
body.hx-lite.hx-s4 #result { display: revert; }

/* ==========================================================================
   "DO MORE WITH THIS FILE" RAIL   (download screen)

   Replaces BOTH the old "Most Popular Tools" grid and the "Continue editing
   this document" list. One component, same dashed box as the upload/settings/
   download boxes, so the whole flow reads as one design.

   No "Show more" button: every tool is in the list from the start and the rail
   scrolls. Hiding items behind a disclosure adds a click to reach content that
   was never hidden for a good reason.
   ========================================================================== */
.hx-done-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 18px;
  align-items: stretch;          /* rail is exactly as tall as the box */
}
@media (max-width: 900px) {
  .hx-done-row { grid-template-columns: 1fr; }
}

/* same box as everything else in the flow */
.hx-rail {
  display: flex; flex-direction: column; min-height: 0;
  padding: 16px 14px 6px;
  background: linear-gradient(135deg, #FFFBFB 0%, #EFF6FF 60%, #EFF6FF 100%);
  border: 2px dashed #93C5FD;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04);
  text-align: left;
}

.hx-rail-h {
  display: flex; align-items: baseline; gap: 8px;
  padding: 0 8px 12px;
  border-bottom: 1px dashed #BFD8FD;
  margin-bottom: 10px;
}
.hx-rail-t {
  font-size: 13.5px; font-weight: 700; color: var(--hx-ink);
  letter-spacing: -.01em;
}
.hx-rail-n { margin-left: auto; font-size: 11.5px; color: var(--hx-mute); font-weight: 600; }

/* Six items — the whole list fits, so there is no scrollbar and no bottom
   fade. Both were affordances for a scroll that no longer happens. */
.hx-rail-list {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 6px;
  padding: 2px 2px 6px;
}

.hx-rail-item {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding: 9px 12px;
  border: 1px solid var(--hx-line); border-radius: 10px;
  background: #fff; text-decoration: none;
  color: var(--hx-ink); font-size: 13.5px; font-weight: 600;
  transition: border-color .15s, background .15s, transform .12s;
}
.hx-rail-item:hover {
  border-color: var(--hx-blue); background: var(--hx-blue-l);
  transform: translateX(2px);
}
/* the tools that actually suit the file that just came out */
.hx-rail-item.is-fit { border-color: var(--hx-blue-bd); }

.hx-rail-item > svg:last-child {                 /* chevron */
  width: 14px; height: 14px; flex: none;
  margin-left: auto; color: #CBD5E1;
}
.hx-rail-item:hover > svg:last-child { color: var(--hx-blue); }

.hx-rail-ic {
  width: 28px; height: 28px; flex: none;
  display: grid; place-items: center; border-radius: 8px;
  background: var(--hx-blue-l); color: var(--hx-blue);
}
.hx-rail-ic svg { width: 15px; height: 15px; }

.hx-rail-name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ==========================================================================
   EMAIL THE RESULT   (download screen)

   Posts to /api/share/email, which sends via Resend from MAIL_FROM
   (get@huntpdf.com). The sender's own address is used only as reply-to —
   putting it in From: would fail SPF/DKIM and land the mail in spam.
   ========================================================================== */
.hx-email {
  margin-top: 14px; padding: 16px;
  border: 1px solid var(--hx-blue-bd); border-radius: 12px;
  background: #fff; text-align: left;
}
.hx-email[hidden] { display: none; }

.hx-email-row { margin-bottom: 10px; }
.hx-email-row label {
  display: block; margin-bottom: 5px;
  font-size: 12px; font-weight: 700; color: var(--hx-slate);
}
.hx-email-row label span { font-weight: 500; color: var(--hx-mute); }

.hx-email-row input,
.hx-email-row textarea {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--hx-line); border-radius: 9px;
  font: 400 13.5px/1.45 inherit; color: var(--hx-ink);
  background: #fff; outline: 0; resize: vertical;
}
.hx-email-row input:focus,
.hx-email-row textarea:focus {
  border-color: var(--hx-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.hx-email-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .hx-email-2 { grid-template-columns: 1fr; } }

.hx-email-bar { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.hx-email-send {
  flex: 1; padding: 11px 18px; border: 0; border-radius: 10px;
  font: 700 14px/1 inherit; color: #fff; cursor: pointer;
  background: linear-gradient(150deg, #4F8CFB, var(--hx-blue) 55%, var(--hx-blue-d));
  box-shadow: 0 6px 16px rgba(37, 99, 235, .28), inset 0 1px 1px rgba(255,255,255,.4);
  transition: transform .15s, box-shadow .15s;
}
.hx-email-send:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(37, 99, 235, .36), inset 0 1px 1px rgba(255,255,255,.4);
}
.hx-email-send:disabled { opacity: .6; cursor: default; transform: none; }

.hx-email-note {
  margin-top: 10px; font-size: 11.5px; line-height: 1.5; color: var(--hx-mute);
}
.hx-email-status {
  margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--hx-slate);
}
.hx-email-status:empty { display: none; }
.hx-email-status.is-ok  { color: var(--hx-green); }
.hx-email-status.is-err { color: #DC2626; }

/* six is a shortlist, not the whole catalogue — offer the way out */
.hx-rail-all {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  margin-top: 4px; padding: 9px;
  font: 700 12.5px/1 inherit; color: var(--hx-blue);
  text-decoration: none; border-radius: 9px;
  border: 1px dashed var(--hx-blue-bd); background: transparent;
  transition: background .15s, border-color .15s;
}
.hx-rail-all:hover { background: var(--hx-blue-l); border-color: var(--hx-blue); }
.hx-rail-all svg { width: 13px; height: 13px; }

/* the count chip is gone now that the list is a fixed shortlist */
.hx-rail-n:empty { display: none; }

/* ==========================================================================
   ATTACH BOX — one look on all 64 tools

   55 tools use `.dropzone`. The rest ship their own container class and so
   never matched any of the .dropzone rules in hp-unified.css — which is why
   Split, Organize, OCR, Watermark, Redact, Repair, Sign, Extract Pages, the AI
   tools and the rest looked nothing like Word to PDF:

     .upload-prompt   organize-pdf, repair-pdf, redact-pdf
     .ep-upload       extract-pdf-pages
     .drop-zone       sign-pdf, pdf-editor
     #ulDropzone      unlock-pdf      (has .dropzone, different id)
     #dpDropzone      delete-pdf-pages(has .dropzone, different id)

   Rather than rewrite each page's markup — which risks breaking the JS those
   tools bind to their own ids — the aliases are given the IDENTICAL rules.
   Copied from hp-unified.css .dropzone (lines 9-57, 1889) so they cannot drift.
   ========================================================================== */
.upload-prompt,
.ep-upload,
.drop-zone {
  margin: 2px auto !important;
  padding: 35px 40px !important;
  flex: 0 0 auto !important;      /* never let a flex parent squeeze it */
  min-height: auto !important;
  max-width: 636px !important;
  width: 100% !important;
  background: linear-gradient(135deg, #FFFBFB 0%, #EFF6FF 60%, #EFF6FF 100%) !important;
  border: 2px dashed #93C5FD !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  transition: all .2s !important;
  position: relative !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.upload-prompt::before,
.ep-upload::before,
.drop-zone::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  padding: 2px;
  background: linear-gradient(135deg, transparent, rgba(37, 99, 235, 0.15), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s;
}
.upload-prompt:hover::before,
.ep-upload:hover::before,
.drop-zone:hover::before { opacity: 1; }

.upload-prompt:hover, .upload-prompt.drag-over,
.ep-upload:hover,     .ep-upload.drag-over,
.drop-zone:hover,     .drop-zone.drag-over {
  background: linear-gradient(135deg, #FFFFFF 0%, #EFF6FF 50%, #DBEAFE 100%) !important;
  border-color: var(--brand, #2563EB) !important;
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.18), 0 2px 6px rgba(15, 23, 42, 0.06) !important;
  transform: translateY(-2px) !important;
}

/* the icon: these tools use .icon, .up-icon or .drop-icon — all get the same */
.upload-prompt .icon, .upload-prompt .up-icon, .upload-prompt .drop-icon,
.ep-upload .icon,     .ep-upload .up-icon,     .ep-upload .drop-icon,
.drop-zone .icon,     .drop-zone .up-icon,     .drop-zone .drop-icon {
  margin: 0 auto 4px !important;
  width: auto !important; height: auto !important;
  font-size: 42px !important;
  line-height: 1 !important;
  background: none !important;
  color: var(--brand, #2563EB) !important;
  filter: drop-shadow(0 2px 6px rgba(37, 99, 235, 0.25));
}

.upload-prompt h3,
.ep-upload h3,
.drop-zone h3 {
  margin: 0 0 4px !important;
  font-size: 20px !important;
  background: linear-gradient(135deg, #2563EB, #3B82F6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}
.upload-prompt p,
.ep-upload p,
.drop-zone p { margin: 0 !important; color: #6B7280 !important; }

/* ==========================================================================
   PAGE THUMBNAIL STRIP  (multi-file PDF tools, e.g. Merge)

   The same visual language as Organize PDF: you see the actual pages, not just
   a cover image. The FILE stays the drag unit though — Merge joins whole files,
   so pages are shown, not individually re-orderable. Pretending otherwise would
   imply an interleave the backend cannot do.
   ========================================================================== */
.hx-pages {
  display: flex; flex-wrap: wrap; gap: 4px;
  justify-content: center;
  margin: 0 0 10px;
  padding: 8px 6px;
  background: #fff;
  border: 1px dashed var(--hx-blue-bd);
  border-radius: 8px;
  max-height: 132px; overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--hx-blue-bd) transparent;
}
.hx-pages:empty { display: none; }
.hx-pages::-webkit-scrollbar { width: 5px; }
.hx-pages::-webkit-scrollbar-thumb { background: var(--hx-blue-bd); border-radius: 999px; }

.hx-page {
  position: relative; display: block; flex: none;
  line-height: 0;
  border: 1px solid var(--hx-line); border-radius: 3px;
  overflow: hidden; background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .10);
  transition: border-color .12s, transform .12s;
}
.hx-page:hover { border-color: var(--hx-blue); transform: translateY(-1px); }
.hx-page canvas { display: block; width: 54px; height: auto; }

.hx-page-n {
  position: absolute; bottom: 0; right: 0;
  padding: 0 3px;
  font: 700 8px/12px inherit; font-style: normal;
  color: #fff; background: rgba(15, 23, 42, .6);
  border-top-left-radius: 3px;
}

/* honest overflow marker rather than rendering 300 canvases */
.hx-page-more {
  display: grid; place-items: center; flex: none;
  min-width: 54px; height: 70px; padding: 0 6px;
  border: 1px dashed var(--hx-blue-bd); border-radius: 3px;
  background: var(--hx-blue-l);
  font: 700 11px/1 inherit; color: var(--hx-blue);
}

/* the card is wider when it carries a page strip */
.hx-fcard:has(.hx-pages) { width: 210px; }
@media (max-width: 560px) {
  .hx-fcard:has(.hx-pages) { width: 100%; }
}

/* ==========================================================================
   ATTACH-BOX ALIASES — 25 tools, one identical box (added 2026-07)

   Six tools ship a bespoke upload container instead of `.dropzone`:

     .upload-prompt   organize-pdf · repair-pdf · redact-pdf
     .drop-zone       sign-pdf
     .ep-upload       extract-pdf-pages
     .pe-upload-card  pdf-editor

   Their JS binds to those IDs/classes, so renaming the markup would break the
   pages. Instead we alias the class names onto the canonical box above, so all
   25 render pixel-identical to Word to PDF while every JS hook stays intact.

   NOTE: for pdf-editor the visual box is `.pe-upload-card` (the outer card),
   NOT `.pe-up-grab` (its inner content) — aliasing the inner div would nest a
   box inside a box.
   ========================================================================== */
body .upload-prompt,
body .drop-zone,
body .ep-upload,
body .pe-upload-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;

  width: 100% !important;
  max-width: 636px !important;
  /* same flex-collapse guard as the canonical box above — these six containers
     sit under <body> too, and would be squeezed to their padding without it */
  flex: 0 0 auto !important;
  min-height: auto !important;
  margin: 2px auto !important;
  padding: 35px 40px !important;

  background: linear-gradient(135deg, #FFFBFB 0%, #EFF6FF 60%, #EFF6FF 100%) !important;
  border: 2px dashed #93C5FD !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  text-align: center !important;
  cursor: pointer;
  transition: all .2s !important;
}

body .upload-prompt::before,
body .drop-zone::before,
body .ep-upload::before,
body .pe-upload-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  padding: 2px;
  background: linear-gradient(135deg, transparent, rgba(37, 99, 235, 0.15), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s;
}
body .upload-prompt:hover::before,
body .drop-zone:hover::before,
body .ep-upload:hover::before,
body .pe-upload-card:hover::before { opacity: 1; }

body .upload-prompt:hover,   body .upload-prompt.drag-over,   body .upload-prompt.over,
body .drop-zone:hover,       body .drop-zone.drag-over,       body .drop-zone.over,
body .ep-upload:hover,       body .ep-upload.drag-over,       body .ep-upload.over,
body .pe-upload-card:hover,  body .pe-upload-card.drag-over,  body .pe-upload-card.over {
  background: linear-gradient(135deg, #FFFFFF 0%, #EFF6FF 50%, #DBEAFE 100%) !important;
  border-color: #2563EB !important;
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.18), 0 2px 6px rgba(15, 23, 42, 0.06) !important;
  transform: translateY(-2px) !important;
}

/* --- the icon: every tool spells it differently --- */
body .dropzone .dropzone-icon,          /* split-pdf   */
body .upload-prompt .up-icon,           /* repair · redact */
body .upload-prompt .icon,              /* organize    */
body .ep-upload .up-icon,               /* extract     */
body .drop-zone .drop-icon,             /* sign        */
body .pe-upload-card .pe-up-ico {       /* pdf-editor  */
  margin: 0 auto 4px !important;
  font-size: 42px !important;
  line-height: 1 !important;
  color: #2563EB !important;
  filter: drop-shadow(0 2px 6px rgba(37, 99, 235, 0.25));
}
/* the two that are round tiles rather than bare glyphs keep their tile */
body .drop-zone .drop-icon,
body .pe-upload-card .pe-up-ico {
  width: 60px !important;
  height: 60px !important;
  font-size: 28px !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(135deg, #DBEAFE, #EFF6FF) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .12) !important;
  filter: none;
}
body .pe-upload-card .pe-up-ico svg { width: 28px; height: 28px; stroke: #2563EB; }

/* --- the heading: some use h2, some h3 --- */
body .upload-prompt h2,  body .upload-prompt h3,
body .drop-zone h2,      body .drop-zone h3,
body .ep-upload h2,      body .ep-upload h3,
body .pe-upload-card h2, body .pe-upload-card h3 {
  margin: 0 0 4px !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
  background: linear-gradient(135deg, #2563EB, #3B82F6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- the format / hint line --- */
body .upload-prompt p,
body .drop-zone p,
body .ep-upload p,
body .pe-upload-card p,
body .pe-upload-card .sub,
body .pe-upload-card .pe-up-hint,
body .ep-upload .ep-formats,
body .upload-prompt .upload-formats {
  margin: 0 !important;
  color: #6B7280 !important;
  font-size: 14px !important;
}
body .pe-upload-card .pe-up-hint,
body .ep-upload .ep-formats,
body .upload-prompt .upload-formats { margin-top: 8px !important; }

/* --- sign-pdf still carried the pre-rebrand RED on its hover + button --- */
body .drop-zone:hover,
body .drop-zone.drag-over {
  background: linear-gradient(135deg, #FFFFFF 0%, #EFF6FF 50%, #DBEAFE 100%) !important;
}
body .drop-zone .btn-up,
body .pe-upload-card .pe-up-btn {
  margin-top: 12px !important;
  background: linear-gradient(150deg, #4F8CFB 0%, #2563EB 55%, #1D4ED8 100%) !important;
  box-shadow: 0 6px 18px rgba(37, 99, 235, .30) !important;
}
body .drop-zone .btn-up:hover,
body .pe-upload-card .pe-up-btn:hover {
  box-shadow: 0 10px 26px rgba(37, 99, 235, .42) !important;
  transform: translateY(-1px) !important;
}

/* --------------------------------------------------------------------------
   pdf-editor collision: it has a SECOND element with id="dropzone" — the
   compact "Drop PDF" label in the editor sidebar (`label.pe-drop#dropzone`).
   The canonical `#dropzone` rule above is an ID selector with !important, so
   it was force-feeding that little sidebar label a 636px-wide, 35px/40px
   padded attach box. It's dormant today only because the sidebar is hidden
   until a PDF loads — the moment one does, it would blow the sidebar apart.

   Give it its compact style back. (`.pe-drop#dropzone` = class + ID, which
   outranks the bare `#dropzone`.)
   -------------------------------------------------------------------------- */
label.pe-drop#dropzone,
body label.pe-drop {
  display: flex !important;
  flex-direction: column !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 0 10px !important;
  padding: 14px !important;
  border: 2px dashed #BFDBFE !important;
  border-radius: 9px !important;
  background: #F8FAFC !important;
  box-shadow: none !important;
  transform: none !important;
}
label.pe-drop#dropzone:hover,
body label.pe-drop:hover,
body label.pe-drop.over {
  border-color: #2563EB !important;
  background: #EFF6FF !important;
  box-shadow: none !important;
  transform: none !important;
}
label.pe-drop#dropzone::before,
body label.pe-drop::before { display: none !important; content: none !important; }

body label.pe-drop .ico {
  width: auto !important;
  height: auto !important;
  margin: 0 0 2px !important;
  font-size: 22px !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  color: #2563EB !important;
}
body label.pe-drop .ico svg { width: 22px; height: 22px; }
body label.pe-drop p {
  margin: 0 !important;
  font-size: 11px !important;
  color: #6B7280 !important;
  -webkit-text-fill-color: currentColor;
  background: none;
}
body label.pe-drop input { display: none !important; }

/* ==========================================================================
   #hp-tool-main must not shrink-wrap its text

   body is `display:flex; flex-direction:column` (tool.css:21) and
   #hp-tool-main carries `margin: 0 auto`. Auto margins on the CROSS axis of a
   flex container cancel the default `align-items: stretch`, so the container
   stops filling the body and collapses to fit-content — its width becomes a
   function of the longest line of text on the page.

   Nobody noticed in English, where the text happens to be long enough that the
   container lands around 744px and the 636px attach box still fits. It shows
   up the moment the text gets shorter: Arabic collapsed the container to 692px
   and squeezed the attach box down to 596px, Hindi to 614px, Chinese to 615px
   — three different box widths for the same tool, decided by sentence length.

   An explicit width restores the stretch, so max-width governs instead of the
   prose. Now every tool, in every one of the 25 languages, gets the same box.
   ========================================================================== */
body > #hp-tool-main {
  width: 100%;
  min-width: 0;
}