/* Base reset — border-box everywhere so padding/border never add to an
   element's computed width (e.g. a grid item sized at 1fr) and overflow
   into a neighbor. Without this, any bordered/padded card in a tight
   multi-column grid can visually overlap the next one. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Brand tokens — see BRAND.md Section 2. Never hardcode hex values below this block. */
:root {
  --bg:        #FFFFFF;
  --bg-card:   #FFFFFF;
  --bg-nav:    #0D0D0D;
  --bg-soft:   #F7F7F5;

  --acc:       #F5A623;
  --acc-dk:    #D4890A;
  --acc-lt:    #FEF3DC;

  --tx-h:      #0D0D0D;
  --tx-b:      #3D3D3A;
  --tx-m:      #888884;

  --bdr:       #E8E8E5;
  --bdr-dk:    #D4D4CF;

  --sh-sm:     0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --sh-md:     0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);

  --s1: 8px;  --s2: 16px; --s3: 24px;
  --s4: 32px; --s5: 40px; --s6: 48px; --s7: 64px;

  --r:    10px;
  --r-sm: 6px;
  --r-lg: 16px;

  --nav-h: 58px;

  /* Category colours — section accents only. Never for buttons/headings/links. */
  --cat-pdf:   #EF4444;
  --cat-img:   #8B5CF6;
  --cat-aud:   #F59E0B;
  --cat-txt:   #10B981;
  --cat-vid:   #3B82F6;
  --cat-social: #EC4899;
  --cat-scraper: #06B6D4;

  --grn:       #10B981;
  --grn-lt:    rgba(16,185,129,0.10);
}

html {
  color-scheme: light;
}

body {
  background: var(--bg);
  color: var(--tx-b);
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Nav — light, NOT the dark strip (dark is reserved for trust section + footer) */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bdr);
  height: var(--nav-h);
}

.site-nav__inner {
  max-width: 1080px;
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--s3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
}

.site-brand {
  display: inline-flex;
  align-items: center;
  color: var(--tx-h);
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
}

.site-brand__badge {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  background: var(--acc);
  color: var(--tx-h);
  font-weight: 700;
  font-size: 11px;
  border-radius: 4px;
  padding: 3px 7px;
  margin-left: 4px;
}

.site-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--s1);
}

.site-btn-pro {
  display: inline-flex;
  align-items: center;
  background: var(--acc);
  color: var(--tx-h);
  font-weight: 700;
  font-size: 13px;
  border-radius: var(--r-sm);
  padding: 8px 18px;
  border: none;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.site-btn-pro:hover {
  background: var(--acc-dk);
  color: #fff;
}

/* Hamburger button: only shown on small screens, and only once
   static/js/site-nav.js has made the nav collapsible (.site-nav--collapsible). */
.site-nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--bg-card);
  border: 1px solid var(--bdr-dk);
  border-radius: var(--r-sm);
  cursor: pointer;
}

.site-nav__toggle:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

.site-nav__toggle-bar {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--tx-h);
  border-radius: 1px;
  transition: transform .2s, opacity .2s;
}

/* Open: the three bars turn into an ×. */
.site-nav.is-open .site-nav__toggle-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.site-nav.is-open .site-nav__toggle-bar:nth-child(2) {
  opacity: 0;
}

.site-nav.is-open .site-nav__toggle-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Phones and tablets (BRAND.md's 1024px breakpoint covers iPads in portrait and landscape). */
@media (max-width: 1024px) {
  .site-nav--collapsible .site-nav__toggle {
    display: inline-flex;
  }

  /* The links drop down as a full-width panel under the nav bar. */
  .site-nav--collapsible .site-nav__actions {
    display: none;
    position: absolute;
    top: var(--nav-h);
    right: 0;
    left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s1);
    padding: var(--s2);
    background: var(--bg-card);
    border-bottom: 1px solid var(--bdr);
    box-shadow: var(--sh-md);
  }

  .site-nav--collapsible.is-open .site-nav__actions {
    display: flex;
  }

  .site-nav--collapsible .site-nav__actions .site-btn-ghost,
  .site-nav--collapsible .site-nav__actions .site-btn-pro {
    justify-content: center;
    padding: 12px;
    font-size: 15px;
  }
}

/* Tablets: a compact card under the menu button rather than buttons
   stretched across the whole screen; phones keep the full-width panel. */
@media (min-width: 481px) and (max-width: 1024px) {
  .site-nav--collapsible .site-nav__actions {
    right: var(--s3);
    left: auto;
    width: 260px;
    margin-top: 6px;
    border: 1px solid var(--bdr);
    border-radius: var(--r-lg);
  }
}

/* Secondary nav button (BRAND.md 5d ghost button), beside the orange
   primary one — two orange buttons side by side would compete. */
.site-btn-ghost {
  display: inline-flex;
  align-items: center;
  color: var(--tx-b);
  font-weight: 600;
  font-size: 13px;
  border-radius: var(--r-sm);
  padding: 7px 16px;
  border: 1px solid var(--bdr-dk);
  background: none;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}

.site-btn-ghost:hover {
  color: var(--tx-h);
  border-color: var(--acc);
}

/* Plain site forms (e.g. "message me"). */
.site-form__field {
  margin-bottom: var(--s3);
}

.site-form__label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tx-h);
}

.site-form__input {
  display: block;
  width: 100%;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--tx-h);
  background: var(--bg-card);
  border: 1px solid var(--bdr-dk);
  border-radius: var(--r-sm);
  transition: border-color .15s, box-shadow .15s;
}

.site-form__input:focus {
  outline: none;
  border-color: var(--acc);
  box-shadow: 0 0 0 3px var(--acc-lt);
}

.site-form__input.is-invalid {
  border-color: #FCA5A5;
}

.site-form__textarea {
  min-height: 150px;
  line-height: 1.55;
  resize: vertical;
}

.site-form__error {
  margin: 6px 0 0;
  font-size: 13px;
  color: #7F1D1D;
}

.site-form__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Page shell */
.site-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 24px 64px;
}

.site-page-header {
  margin-bottom: 32px;
}

.site-page-header__title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.8px;
  color: var(--tx-h);
}

.site-page-header__sub {
  font-size: 15px;
  color: var(--tx-m);
}

/* Counter strip */
.site-counter-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--bdr);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: var(--sh-sm);
}

.site-counter {
  background: var(--bg-card);
  padding: 10px 16px;
  border: 1px solid var(--bdr);
}

.site-counter__val {
  font-size: 16px;
  font-weight: 700;
  color: var(--tx-h);
}

.site-counter__val--live {
  color: var(--grn);
}

.site-counter__label {
  font-size: 12px;
  color: var(--tx-m);
}

.site-live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--grn);
  display: inline-block;
  margin-right: 4px;
}

/* Search */
.site-search {
  margin-bottom: 24px;
}

.site-search__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 48px;
  padding: 0 var(--s2);
  border-radius: var(--r);
  border: 1px solid var(--bdr-dk);
  box-shadow: var(--sh-sm);
  font-family: inherit;
  font-size: 15px;
  color: var(--tx-h);
  background: var(--bg-card);
  outline: none;
}

.site-search__input::placeholder {
  color: var(--tx-m);
}

.site-search__input:focus {
  border-color: var(--acc);
  box-shadow: 0 0 0 3px var(--acc-lt), var(--sh-sm);
}

/* Tabs */
/* Wraps onto more rows rather than scrolling sideways — every category stays in view. */
.site-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.site-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--tx-m);
  padding: 6px 14px;
  border: 1px solid var(--bdr);
  border-radius: 99px;
  background: var(--bg-card);
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
}

.site-tab.active {
  color: var(--tx-h);
  font-weight: 600;
  border-color: var(--acc);
  background: var(--acc-lt);
}

.site-tab__count {
  display: inline-flex;
  align-items: center;
  background: var(--bg);
  color: var(--tx-m);
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 99px;
}

.site-tab.active .site-tab__count {
  background: var(--acc-lt);
  color: var(--acc-dk);
}

.site-section-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--tx-m);
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}

/* Tool grid / cards — signature element: category-coloured left border.
   Mobile-first: one column by default (a single tool card should never
   look half-empty next to a blank cell), widening at larger breakpoints. */
.site-tool-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
  margin-bottom: 64px;
}

.site-tool-card-wrap {
  display: flex;
}

/* display:flex above outranks the browser's default [hidden] rule, so search/tab filtering needs this to actually hide cards */
.site-tool-card-wrap[hidden] {
  display: none;
}

.site-tool-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--bdr);
  border-left: 3px solid var(--tool-accent, var(--tx-m));
  border-radius: var(--r-lg);
  padding: var(--s2);
  box-shadow: var(--sh-sm);
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.12s;
  text-decoration: none;
}

.site-tool-card:hover {
  border-color: var(--acc);
  border-left-color: var(--acc);
  box-shadow: var(--sh-md), 0 0 0 3px var(--acc-lt);
  transform: translateY(-2px);
}

.site-tool-card__icon {
  font-size: 20px;
  display: block;
  margin-bottom: 6px;
}

.site-tool-card__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--tx-h);
  margin-bottom: 4px;
}

.site-tool-card__desc {
  font-size: 12px;
  color: var(--tx-m);
  line-height: 1.55;
  margin-bottom: 8px;
}

.site-tool-card__footer {
  padding-top: 6px;
  border-top: 1px solid var(--bdr);
}

.site-tool-card__free {
  font-size: 10px;
  font-weight: 600;
  color: #065F46;
  background: #ECFDF5;
  padding: 2px 7px;
  border-radius: 4px;
}

.site-empty {
  grid-column: 1 / -1;
  color: var(--tx-m);
  text-align: center;
  padding: 40px;
}

/* Trust strip */
.site-trust-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s3);
  margin-bottom: 64px;
}

.site-trust-item {
  background: var(--bg-card);
  border: 1px solid var(--bdr);
  border-radius: var(--r-lg);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--sh-sm);
  height: 100%;
}

.site-trust-item__text {
  font-size: 13px;
  font-weight: 500;
  color: var(--tx-h);
}

/* Pro strip */
.site-pro-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
  text-align: center;
  background: var(--bg-nav);
  border-radius: var(--r-lg);
  padding: 24px 32px;
}

.site-pro-strip__right {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.site-pro-strip__left h2 {
  font-size: 18px;
  font-weight: 800;
  color: #F5F5F0;
}

.site-pro-strip__left p {
  font-size: 14px;
  color: #A8A8A2;
  max-width: 480px;
  margin: 0 auto;
}

.site-pro-strip__price {
  font-size: 18px;
  font-weight: 800;
  color: var(--acc);
  margin-bottom: 4px;
}

.site-pro-strip {
  margin-bottom: 64px;
}

.site-pro-strip__period {
  font-size: 12px;
  color: #A8A8A2;
  margin-bottom: var(--s2);
}

.site-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--acc);
  color: var(--tx-h);
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--r-sm);
  padding: 13px 24px;
  border: none;
  letter-spacing: -0.2px;
  text-decoration: none;
  cursor: pointer;
}

.site-btn-primary:hover {
  background: var(--acc-dk);
  color: #fff;
}

.site-btn-primary:disabled {
  background: var(--bdr-dk);
  color: var(--tx-m);
  cursor: not-allowed;
}

/* Footer — same light treatment as the nav, not the dark strip.
   Mobile: centered, stacked (brand, then tagline, then links row).
   Desktop (768px+): a single row, brand/tagline/links spread apart. */
.site-footer {
  background: var(--bg-card);
  border-top: 1px solid var(--bdr);
  padding: var(--s5) var(--s3);
  margin-top: 64px;
}

.site-footer__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s2);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s3);
}

.site-footer__links a {
  font-size: 13px;
  font-weight: 500;
  color: var(--tx-m);
  text-decoration: none;
}

.site-footer__links a:hover {
  color: var(--tx-h);
}

.site-footer__note {
  font-size: 12px;
  color: var(--tx-m);
}

/* Coming soon pages */
.site-coming-soon {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
  padding-top: 96px;
  padding-bottom: 96px;
}

.site-coming-soon h1 {
  color: var(--tx-h);
  font-weight: 800;
  margin-bottom: 16px;
}

.site-coming-soon p {
  color: var(--tx-m);
  margin-bottom: 24px;
}

/* ============================================================
   Tool page — shared upload/convert/download experience.
   Used by every tool in pdf/, and by future categories that
   follow the same one-file-in, one-file-out pattern.
   ============================================================ */

.tool-page {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--s5) var(--s3) var(--s6);
}

/* Wider variant for a tool whose card content needs more horizontal room
   than the standard file-list layout — currently only Organize PDF's page
   thumbnail grid, which reads far better with more columns visible at
   once. Still centered and still shrinks to the same breakpoints as every
   other tool page; only the upper max-width ceiling changes. */
.tool-page--wide {
  max-width: 1400px;
}

/* Centered row used for the submit/download button and the reset link —
   framework-independent so it centers regardless of whether Bootstrap
   loaded. */
.tool-action-row {
  text-align: center;
  margin-top: var(--s3);
}

.tool-hidden {
  display: none !important;
}

.tool-page__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--tx-m);
  text-decoration: none;
  margin-bottom: var(--s3);
}

.tool-page__back:hover {
  color: var(--tx-h);
}

.tool-page__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tool-accent, var(--tx-m));
  margin-bottom: var(--s1);
}

.tool-page__eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tool-accent, var(--tx-m));
  display: inline-block;
}

.tool-page__title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.8px;
  color: var(--tx-h);
  margin-bottom: 8px;
}

.tool-page__sub {
  font-size: 15px;
  color: var(--tx-m);
  margin-bottom: var(--s4);
}

/* Card shell that hosts whichever state (idle / selected / processing /
   success / error) is currently showing. One border, one shadow, one
   radius — only the contents inside change between states. */
.tool-card-shell {
  background: var(--bg-card);
  border: 1px solid var(--bdr);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: var(--s4);
  margin-bottom: var(--s3);
}

/* Dropzone — idle state */
.dropzone {
  display: block;
  border: 2px dashed var(--bdr-dk);
  border-radius: var(--r);
  padding: var(--s5) var(--s3);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.dropzone:hover,
.dropzone:focus-visible {
  border-color: var(--acc);
  background: var(--acc-lt);
}

.dropzone.is-dragover {
  border-color: var(--acc);
  background: var(--acc-lt);
}

.dropzone__icon {
  font-size: 32px;
  display: block;
  margin-bottom: var(--s2);
  line-height: 1;
}

.dropzone__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--tx-h);
  margin-bottom: 4px;
}

.dropzone__hint {
  font-size: 13px;
  color: var(--tx-m);
}

.dropzone__hint .dropzone__browse {
  color: var(--acc-dk);
  font-weight: 600;
  text-decoration: underline;
}

.dropzone input[type="file"] {
  /* Visually hidden but still focusable/clickable for accessibility —
     never display:none, which breaks keyboard and screen-reader use. */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Selected-file state — replaces the dropzone once file(s) are chosen.
   One or many rows stacked with a gap; a single-file tool just renders
   one row. */
.tool-file-list {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.tool-file-list__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: 4px var(--s1) 0;
}

.tool-file-list__summary {
  font-size: 12px;
  color: var(--tx-m);
}

.tool-file-list__actions {
  display: flex;
  flex-shrink: 0;
  gap: var(--s1);
}

.tool-file-picked {
  display: flex;
  align-items: center;
  gap: var(--s2);
  border: 1px solid var(--bdr);
  border-radius: var(--r);
  padding: var(--s2);
}

.tool-file-picked__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: var(--tool-accent-lt, var(--acc-lt));
  color: var(--tool-accent, var(--acc-dk));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.tool-file-picked__info {
  flex: 1;
  min-width: 0;
}

.tool-file-picked__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--tx-h);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tool-file-picked__size {
  font-size: 12px;
  color: var(--tx-m);
}

.tool-file-picked__estimate {
  font-size: 12px;
  color: #065F46;
  font-weight: 600;
}

.tool-file-picked__estimate:empty {
  display: none;
}

.tool-file-picked__remove {
  background: none;
  border: none;
  color: var(--tx-m);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
}

.tool-file-picked__remove:hover {
  color: var(--tx-h);
  background: var(--bg-soft);
}

/* Reorderable card-grid variant (opt-in via [data-file-list][data-reorderable]
   on the tool's dropzone/form — currently only Merge PDF, where upload
   order is the merge order and worth showing/dragging explicitly).
   Falls back to the plain stacked-row list above for every other tool,
   where order has no effect on the result. */
.tool-file-list[data-reorderable] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--s2);
}

/* The list footer (file count + add more/clear all) is appended as a
   grid child alongside the cards, but must always read as its own
   full-width line below them, not squeezed into leftover column space. */
.tool-file-list[data-reorderable] .tool-file-list__footer {
  grid-column: 1 / -1;
}

.tool-file-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
  border: 1px solid var(--bdr);
  border-radius: var(--r);
  padding: var(--s2);
  cursor: grab;
  background: var(--bg);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.tool-file-card:active {
  cursor: grabbing;
}

.tool-file-card.is-dragging {
  opacity: 0.4;
}

.tool-file-card.is-drop-target {
  border-color: var(--tool-accent, var(--acc-dk));
  box-shadow: 0 0 0 2px var(--tool-accent-lt, var(--acc-lt));
}

.tool-file-card__order {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  color: var(--tool-accent, var(--acc-dk));
  background: var(--tool-accent-lt, var(--acc-lt));
  border-radius: 999px;
  min-width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}

.tool-file-card__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  border-radius: var(--r-sm);
  background: var(--bg-soft);
}

.tool-file-card__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--tx-h);
  text-align: center;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tool-file-card__size {
  font-size: 11px;
  color: var(--tx-m);
}

.tool-file-card__remove {
  background: none;
  border: none;
  color: var(--tx-m);
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--r-sm);
}

.tool-file-card__remove:hover {
  color: var(--tx-h);
  background: var(--bg-soft);
}

/* Organize PDF's page grid — same drag-to-reorder card mechanics as
   .tool-file-card above, but each card is a page thumbnail (with a rotate
   preview and a delete/restore toggle) rather than a picked file. */
.page-organizer__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  margin-bottom: var(--s3);
}

.page-organizer__count {
  font-size: 13px;
  font-weight: 600;
  color: var(--tx-m);
}

.page-organizer__toolbar-actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}

.site-btn-primary--compact {
  padding: 9px 18px;
  font-size: 13px;
}

.page-organizer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--s2);
  margin-bottom: var(--s3);
}

.page-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
  border: 1px solid var(--bdr);
  border-radius: var(--r);
  padding: var(--s2);
  cursor: grab;
  background: var(--bg);
  transition: box-shadow 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.page-card:active {
  cursor: grabbing;
}

.page-card.is-dragging {
  opacity: 0.4;
}

.page-card.is-drop-target {
  border-color: var(--tool-accent, var(--acc-dk));
  box-shadow: 0 0 0 2px var(--tool-accent-lt, var(--acc-lt));
}

.page-card.is-deleted {
  opacity: 0.35;
  cursor: default;
}

.page-card__order {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  color: var(--tool-accent, var(--acc-dk));
  background: var(--tool-accent-lt, var(--acc-lt));
  border-radius: 999px;
  min-width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}

.page-card__thumb-wrap {
  width: 100%;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg-soft);
  border-radius: var(--r-sm);
}

.page-card__thumb {
  max-width: 100%;
  max-height: 100%;
  transition: transform 0.15s ease;
}

.page-card__actions {
  display: flex;
  gap: 4px;
}

.page-card__action {
  background: none;
  border: none;
  color: var(--tx-m);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--r-sm);
}

.page-card__action:hover {
  color: var(--tx-h);
  background: var(--bg-soft);
}

/* Processing state — inline indicator for the synchronous single-file
   form (see .batch-progress below for the richer batch polling page
   display). Includes a simulated progress bar (see tool-upload.js) —
   single-file conversion is one blocking request with no real
   intermediate checkpoints to report, so this is a perceived-progress
   animation, not a measurement of actual backend completion; it snaps to
   100% only once the real response arrives. */
.tool-processing {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s2);
  padding: var(--s2) 0;
  margin-top: var(--s3);
}

.tool-processing__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
}

.tool-processing__percent {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--tx-m);
  font-variant-numeric: tabular-nums;
}

.tool-spinner {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--bdr);
  border-top-color: var(--acc);
  animation: tool-spin 0.7s linear infinite;
}

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

.tool-processing__text {
  font-size: 14px;
  font-weight: 500;
  color: var(--tx-b);
}

/* Batch progress — the richer display on the async batch polling page
   (word_to_pdf_batch_pending.html), distinct from .tool-processing's
   brief inline single-file indicator above. */
.batch-progress {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  padding: var(--s3) 0;
}

.batch-progress__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--tx-m);
}

.batch-progress__count {
  font-size: 32px;
  font-weight: 800;
  color: var(--tx-h);
  letter-spacing: -0.5px;
  margin: 4px 0 var(--s3);
  font-variant-numeric: tabular-nums;
}

.tool-progress-bar {
  width: 100%;
  height: 10px;
  border-radius: 99px;
  background: var(--bdr);
  overflow: hidden;
}

.tool-progress-bar__fill {
  height: 100%;
  background: var(--acc);
  border-radius: 99px;
  transition: width 0.4s ease;
}

.batch-progress__caption {
  font-size: 13px;
  color: var(--tx-m);
  margin-top: var(--s3);
}

/* Success state */
.tool-result {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s1) 0;
}

.tool-result__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--grn-lt);
  color: #065F46;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.tool-result__text {
  flex: 1;
}

.tool-result__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--tx-h);
}

.tool-result__sub {
  font-size: 12px;
  color: var(--tx-m);
}

/* Video downloader: one row per link on the polling page. */
.video-list {
  list-style: none;
  margin: var(--s2) 0 0;
  padding: 0;
  border-top: 1px solid var(--bdr);
}

.video-list__item {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--bdr);
}

.video-list__text {
  flex: 1;
  min-width: 0;
}

.video-list__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--tx-h);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-list__sub {
  font-size: 12px;
  color: var(--tx-m);
}

.video-list__item.is-ready .video-list__sub {
  color: #065F46;
}

.video-list__item.is-error .video-list__sub {
  color: #7F1D1D;
}

.video-list__download {
  flex-shrink: 0;
}

/* Media downloader's pick list: what a page holds, grouped by kind, each with a checkbox. */
.media-pick__group {
  margin: 0 0 var(--s3);
  padding: 0;
  border: 0;
  min-width: 0;
}

.media-pick__heading {
  padding: 0;
  margin-bottom: var(--s1);
  font-size: 13px;
  font-weight: 700;
  color: var(--tx-h);
}

.media-pick__count {
  margin-left: 4px;
  font-weight: 600;
  color: var(--tx-m);
}

.media-pick__all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--s1);
  font-size: 12px;
  color: var(--tx-m);
  cursor: pointer;
}

.media-pick__all[hidden] {
  display: none;
}

.media-pick__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--bdr);
}

.media-pick__item {
  border-bottom: 1px solid var(--bdr);
}

.media-pick__label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  cursor: pointer;
}

.media-pick__label input,
.media-pick__all input {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--acc);
}

.media-pick__thumb {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border: 1px solid var(--bdr);
  border-radius: var(--r-sm);
  background: var(--bg);
}

.media-pick__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.media-pick__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--tx-h);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-pick__source {
  font-size: 12px;
  color: var(--tx-m);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-pick__platforms {
  margin-bottom: var(--s3);
}

.media-pick__platform-list {
  margin: var(--s1) 0 0;
  padding-left: 18px;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.video-links__input {
  min-height: 110px;
  font-size: 14px;
}

.site-form__hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--tx-m);
}

/* Text tools (in-browser): input box, live stats and length-limit bars. */
.text-tool__input {
  min-height: 200px;
  font-size: 15px;
}

.text-tool__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s1);
  margin-top: var(--s1);
}

.text-case__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  margin-top: var(--s2);
}

.text-case__button {
  text-transform: none;
}

.site-btn-ghost:disabled {
  opacity: 0.45;
  cursor: default;
}

.text-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--tx-b);
  cursor: pointer;
}

.text-option input {
  accent-color: var(--tool-accent, var(--acc));
}

/* Text diff: two inputs, then one row per line — before and after side by
   side on wide screens, stacked on phones (see the 768px breakpoint). */
.diff-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s2);
}

.diff-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  white-space: pre;
  overflow: auto;
}

.diff-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s2);
}

.diff-controls__compare {
  margin-left: auto;
}

.diff-summary {
  margin: var(--s3) 0 var(--s2);
  font-size: 14px;
  font-weight: 700;
  color: var(--tx-h);
}

.diff-summary.is-identical {
  color: #065F46;
}

.diff-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-size: 12px;
  font-weight: 600;
  color: var(--tx-m);
  margin-bottom: 4px;
}

.diff-output {
  border: 1px solid var(--bdr);
  border-radius: var(--r-sm);
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
}

.diff-output:empty {
  display: none;
}

.diff-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.diff-cell {
  display: flex;
  gap: var(--s1);
  min-width: 0;
  padding: 1px var(--s1);
}

.diff-cell--before {
  border-right: 1px solid var(--bdr);
}

.diff-cell__number {
  flex-shrink: 0;
  min-width: 3ch;
  text-align: right;
  color: var(--tx-m);
  user-select: none;
}

.diff-cell__text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.diff-row--removed .diff-cell--before,
.diff-row--changed .diff-cell--before {
  background: #FEF2F2;
}

.diff-row--added .diff-cell--after,
.diff-row--changed .diff-cell--after {
  background: #ECFDF5;
}

.diff-cell--empty {
  background: var(--bg);
}

.diff-word {
  text-decoration: none;
  border-radius: 2px;
}

del.diff-word {
  background: #FECACA;
  color: #7F1D1D;
}

ins.diff-word {
  background: #A7F3D0;
  color: #065F46;
}

.diff-fold {
  display: block;
  width: 100%;
  padding: 4px var(--s1);
  border: 0;
  border-top: 1px solid var(--bdr);
  border-bottom: 1px solid var(--bdr);
  background: var(--bg);
  color: var(--tx-m);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.diff-fold:hover {
  color: var(--tx-h);
}

@media (max-width: 768px) {
  .diff-inputs,
  .diff-row {
    grid-template-columns: 1fr;
  }

  .diff-legend {
    display: none;
  }

  .diff-cell--before {
    border-right: 0;
  }

  /* Stacked: an unchanged line is shown once, and empty sides not at all. */
  .diff-row--equal .diff-cell--after,
  .diff-cell--empty {
    display: none;
  }
}

.text-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  margin-top: var(--s2);
}

.text-tool__result-label {
  margin-top: var(--s3);
}

.text-tool__actions--spread {
  justify-content: space-between;
  align-items: center;
}

.text-tool__summary {
  margin: 0;
  font-size: 13px;
  color: var(--tx-m);
}

.text-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
  gap: var(--s1);
  margin: var(--s3) 0 0;
}

.text-stats__item {
  padding: var(--s2);
  border: 1px solid var(--bdr);
  border-radius: var(--r-sm);
}

.text-stats__item dt {
  font-size: 12px;
  color: var(--tx-m);
}

.text-stats__item dd {
  margin: 2px 0 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--tx-h);
  font-variant-numeric: tabular-nums;
}

.text-limits__title {
  margin: var(--s4) 0 var(--s2);
  font-size: 14px;
  font-weight: 700;
  color: var(--tx-h);
}

.text-limits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s2);
}

.text-limits__head {
  display: flex;
  justify-content: space-between;
  gap: var(--s2);
  font-size: 13px;
}

.text-limits__name {
  color: var(--tx-b);
}

.text-limits__count {
  color: var(--tx-m);
  font-variant-numeric: tabular-nums;
}

.text-limits__bar {
  height: 6px;
  margin-top: 4px;
  border-radius: 99px;
  background: var(--bdr);
  overflow: hidden;
}

.text-limits__fill {
  width: 0;
  height: 100%;
  border-radius: 99px;
  background: var(--tool-accent, var(--acc));
}

.text-limits__item.is-over .text-limits__count {
  color: #7F1D1D;
  font-weight: 600;
}

.text-limits__item.is-over .text-limits__fill {
  background: #DC2626;
}

/* Pro page: the paid plans side by side, then the waitlist sign-up. */
.pricing-page {
  max-width: 1040px;
  margin: 0 auto;
  padding: var(--s5) var(--s3) var(--s6);
}

.pricing-page__header {
  max-width: 640px;
}

.pricing-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
  margin-top: var(--s4);
  align-items: stretch;
}

.pricing-plan {
  display: flex;
  flex-direction: column;
  padding: var(--s4) var(--s3);
  background: var(--bg-card);
  border: 1px solid var(--bdr);
  border-radius: var(--r-lg);
}

.pricing-plan--highlighted {
  border: 2px solid var(--acc);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.pricing-plan__name {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--tx-h);
}

.pricing-plan__summary {
  margin: 4px 0 var(--s3);
  font-size: 13px;
  line-height: 1.5;
  /* Two lines tall on every card, so the prices line up across them. */
  min-height: 3em;
  color: var(--tx-m);
}

.pricing-waitlist .tool-choice {
  margin-bottom: var(--s2);
}

.pricing-plan__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.pricing-plan__amount {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--tx-h);
}

.pricing-plan__period {
  font-size: 13px;
  color: var(--tx-m);
}

.pricing-plan__other-price {
  margin: 2px 0 var(--s3);
  font-size: 12px;
  color: var(--tx-m);
}

.pricing-plan__features {
  flex: 1;
  margin: 0 0 var(--s3);
  padding: 0;
  list-style: none;
  display: grid;
  align-content: start;
  gap: var(--s1);
  font-size: 14px;
  color: var(--tx-b);
}

.pricing-plan__features li {
  position: relative;
  padding-left: 22px;
}

.pricing-plan__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--grn);
  font-weight: 700;
}

.pricing-plan__action {
  justify-content: center;
  text-align: center;
  white-space: normal;
}

.pricing-waitlist {
  max-width: 560px;
  margin: var(--s5) auto 0;
  scroll-margin-top: var(--s4);
}

.pricing-waitlist__title {
  margin: 0 0 var(--s2);
  font-size: 18px;
  font-weight: 800;
  color: var(--tx-h);
}

@media (max-width: 768px) {
  .pricing-page {
    padding: var(--s4) var(--s2) var(--s5);
  }

  .pricing-plans {
    grid-template-columns: 1fr;
  }
}

/* A short, quiet note under a tool's form (e.g. video downloader's usage terms). */
.tool-notice {
  margin: var(--s3) 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--tx-m);
  text-align: center;
}

/* A notice that something is temporarily not working (e.g. a platform blocking the server). */
.tool-notice--warning {
  margin: 0 0 var(--s3);
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: #FFF7E6;
  color: #7A4B00;
  text-align: left;
}

/* A tool's text output (e.g. image to text), shown on the result screen to read or copy. */
.tool-result-text {
  margin-top: var(--s2);
  text-align: right;
}

.tool-result-text__box {
  min-height: 220px;
  max-height: 480px;
  font-size: 14px;
  white-space: pre;
  overflow: auto;
  text-align: left;
}

.tool-result-text__copy {
  margin-top: var(--s1);
}

/* .site-btn-ghost's display would otherwise override the hidden attribute. */
.tool-result-text__copy[hidden] {
  display: none;
}

.tool-reset-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--tx-m);
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
}

.tool-reset-link:hover {
  color: var(--tx-h);
}

/* Compress PDF's live size estimate — extra_fields_template, shown between
   the dropzone and submit button once file(s) are picked. Compression
   itself runs at one fixed strength with no user-facing control, so this
   is the only thing rendered here. */
.compress-options {
  margin-top: var(--s3);
}

.compress-options__estimate {
  margin-top: var(--s3);
  padding: var(--s2);
  background: var(--grn-lt);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: var(--r-sm);
}

.compress-options__estimate-label {
  display: block;
  font-size: 12px;
  color: var(--tx-m);
  margin-bottom: 4px;
}

.compress-options__estimate-value {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 18px;
}

.compress-options__estimate-value strong {
  color: #065F46;
}

.compress-options__estimate-original {
  font-size: 13px;
  color: var(--tx-m);
  text-decoration: line-through;
}

.compress-options__estimate-percent {
  font-size: 13px;
  font-weight: 600;
  color: #065F46;
}

/* Pill-style radio group for a tool's options (core/_choice_pills.html),
   e.g. Convert Image's target format. The real radio inputs stay in the
   form (visually hidden, still focusable), so it works without JS; the
   pill beside each one shows its state. Orange when selected, since it's
   interactive — same treatment as the homepage's active category tab. */
.tool-choice {
  margin: var(--s3) 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.tool-choice__legend {
  padding: 0;
  margin-bottom: var(--s1);
  font-size: 12px;
  font-weight: 600;
  color: var(--tx-m);
  letter-spacing: 0.02em;
}

.tool-choice__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
}

.tool-choice__option {
  position: relative;
}

.tool-choice__option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.tool-choice__pill {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--tx-m);
  background: var(--bg-card);
  border: 1px solid var(--bdr);
  border-radius: 99px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.tool-choice__option:hover .tool-choice__pill {
  border-color: var(--bdr-dk);
  color: var(--tx-h);
}

.tool-choice__option input:checked + .tool-choice__pill {
  color: var(--tx-h);
  font-weight: 600;
  border-color: var(--acc);
  background: var(--acc-lt);
}

.tool-choice__option input:focus-visible + .tool-choice__pill {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

/* Resize Image's options (image/_resize_image_options.html): the "resize
   by" pills pick which panel shows, via :has() — no JS. */
.resize-options__panel {
  margin-top: var(--s2);
}

.resize-options:has(input[value="percent"]:checked) .resize-options__panel--pixels,
.resize-options:has(input[value="pixels"]:checked) .resize-options__panel--percent {
  display: none;
}

.resize-options__input-row {
  display: flex;
  align-items: flex-end;
  gap: var(--s1);
}

.resize-options__panel--percent .site-form__input {
  max-width: 120px;
}

.resize-options__size-field {
  flex: 1;
  min-width: 0;
}

.resize-options__unit {
  padding-bottom: 12px;
  font-size: 15px;
  color: var(--tx-m);
}

.resize-options__hint {
  margin: var(--s1) 0 0;
  font-size: 12px;
  color: var(--tx-m);
}

/* Homepage links to every category's own page (below the filter tabs). */
.site-category-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s2);
  margin: var(--s2) 0;
  font-size: 13px;
}

.site-category-links a {
  color: var(--tx-m);
}

.site-category-links a:hover {
  color: var(--acc-dk);
}

/* The help text under every tool page (core/_tool_content.html) — below
   the tool, same width as .tool-page, quieter than the tool itself. */
.tool-content {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--s3) var(--s6);
}

.tool-content__breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 var(--s3);
  padding: var(--s3) 0 0;
  list-style: none;
  font-size: 13px;
  color: var(--tx-m);
  border-top: 1px solid var(--bdr);
}

.tool-content__breadcrumb li + li::before {
  content: "›";
  margin-right: 6px;
}

.tool-content__breadcrumb a {
  color: var(--tx-m);
}

.tool-content__breadcrumb a:hover {
  color: var(--acc-dk);
}

.tool-content__faqs h3 {
  margin: var(--s3) 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--tx-h);
}

.tool-content__related-title {
  margin: var(--s5) 0 var(--s2);
  font-size: 18px;
  font-weight: 700;
  color: var(--tx-h);
}

.tool-content__related {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--s1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tool-content__related a {
  display: block;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--tx-h);
  text-decoration: none;
  background: var(--bg-card);
  border: 1px solid var(--bdr);
  border-radius: var(--r);
  transition: border-color .15s;
}

.tool-content__related a:hover {
  border-color: var(--acc);
}

/* Analytics consent banner (base.html, driven by static/js/analytics.js). */
.consent-banner {
  position: fixed;
  right: var(--s2);
  bottom: var(--s2);
  left: var(--s2);
  z-index: 100;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  max-width: 640px;
  margin: 0 auto;
  padding: var(--s2) var(--s3);
  background: var(--bg-card);
  border: 1px solid var(--bdr);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
}

.consent-banner[hidden] {
  display: none;
}

.consent-banner__text {
  flex: 1 1 280px;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tx-b);
}

.consent-banner__text a {
  color: var(--acc-dk);
}

.consent-banner__actions {
  display: flex;
  gap: var(--s1);
}

/* Long-form text pages (privacy, and the help text under each tool). */
.site-prose {
  color: var(--tx-b);
  font-size: 15px;
  line-height: 1.7;
}

.site-prose h2 {
  margin: var(--s5) 0 var(--s1);
  font-size: 18px;
  font-weight: 700;
  color: var(--tx-h);
}

.site-prose p,
.site-prose ul,
.site-prose ol {
  margin: 0 0 var(--s2);
}

.site-prose ul,
.site-prose ol {
  padding-left: 20px;
}

.site-prose li + li {
  margin-top: 6px;
}

.site-prose a {
  color: var(--acc-dk);
}

.site-prose code {
  padding: 1px 5px;
  font-size: 13px;
  background: var(--bg-soft);
  border-radius: 4px;
}

/* Compress Video's options (video/_compress_video_options.html): the
   "compress by" pills pick which panel shows, via :has() — no JS. */
.compress-options__panel {
  margin-top: var(--s2);
}

.compress-options:has(input[value="quality"]:checked) .compress-options__panel--size,
.compress-options:has(input[value="quality"]:checked) .compress-options__panel--percent,
.compress-options:has(input[value="size"]:checked) .compress-options__panel--quality,
.compress-options:has(input[value="size"]:checked) .compress-options__panel--percent,
.compress-options:has(input[value="percent"]:checked) .compress-options__panel--quality,
.compress-options:has(input[value="percent"]:checked) .compress-options__panel--size {
  display: none;
}

.compress-options__input-row {
  display: flex;
  align-items: flex-end;
  gap: var(--s1);
}

.compress-options__input-row .site-form__input {
  max-width: 140px;
}

.compress-options__unit {
  padding-bottom: 12px;
  font-size: 15px;
  color: var(--tx-m);
}

.compress-options__hint {
  margin: var(--s1) 0 0;
  font-size: 12px;
  color: var(--tx-m);
}

/* Trim Video's start/end times (video/_trim_video_options.html). */
.trim-options {
  margin-top: var(--s2);
}

.trim-options__row {
  display: flex;
  align-items: flex-end;
  gap: var(--s1);
}

.trim-options__field {
  flex: 1;
  min-width: 0;
}

.trim-options__to {
  padding-bottom: 12px;
  font-size: 15px;
  color: var(--tx-m);
}

.trim-options__hint {
  margin: var(--s1) 0 0;
  font-size: 12px;
  color: var(--tx-m);
}

/* Star rating — shown under every tool's result, shared across all
   categories via _upload_tool.html so a new tool gets it for free. */
.tool-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
  padding-top: var(--s4);
  margin-top: var(--s4);
  border-top: 1px solid var(--bdr);
  text-align: center;
}

.tool-rating__prompt,
.tool-rating__thanks {
  font-size: 15px;
  font-weight: 600;
  color: var(--tx-h);
}

.tool-rating__thanks {
  color: var(--acc-dk);
}

.tool-rating__stars {
  display: flex;
  gap: 8px;
}

.tool-rating__star {
  background: none;
  border: none;
  padding: 4px;
  font-size: 40px;
  line-height: 1;
  color: var(--bdr-dk);
  cursor: pointer;
  transition: color 0.12s, transform 0.12s;
}

.tool-rating__star:hover,
.tool-rating__star:focus-visible {
  transform: scale(1.15);
}

.tool-rating__stars:hover .tool-rating__star.is-hover,
.tool-rating__star.is-selected {
  color: var(--acc);
}

.tool-rating__star:disabled {
  cursor: default;
}

/* Error state */
.tool-error {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  padding: var(--s2);
  background: #FEF2F2;
  border: 1px solid #FCA5A5;
  border-radius: var(--r);
  margin-bottom: var(--s3);
}

.tool-error__icon {
  font-size: 16px;
  flex-shrink: 0;
  line-height: 1.4;
}

.tool-error__text {
  font-size: 14px;
  color: #7F1D1D;
  line-height: 1.5;
}

/* Info row under the card — sets expectations before upload */
.tool-page__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s3);
  font-size: 12px;
  color: var(--tx-m);
}

.tool-page__meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ============================================================
   Homepage / nav / footer — responsive breakpoints
   (BRAND.md: 375 / 480 / 768 / 1024)
   ============================================================ */

@media (min-width: 480px) {
  .site-tool-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .site-tool-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .site-pro-strip {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }

  .site-pro-strip__left p {
    margin: 0;
  }

  .site-footer__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }

  .site-footer__links {
    justify-content: flex-end;
  }

  .site-pro-strip__right {
    align-items: flex-end;
    text-align: right;
    flex-shrink: 0;
  }
}

@media (min-width: 1024px) {
  .site-tool-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 767px) {
  .site-page {
    padding: var(--s3) var(--s2) var(--s5);
  }

  .site-page-header__title {
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  /* Three nav buttons (pro, message me, blog) plus the brand only fit a
     phone with the 16px gutter and slightly smaller buttons. */
  .site-nav__inner {
    padding: 0 var(--s2);
    gap: var(--s1);
  }

  .site-nav__actions {
    gap: 6px;
  }

  .site-nav__actions .site-btn-ghost,
  .site-nav__actions .site-btn-pro {
    padding: 6px 10px;
    font-size: 12px;
  }

  .site-counter-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-trust-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-tool-grid {
    gap: var(--s2);
  }

  .site-page-header__title {
    font-size: 20px;
  }
}

@media (max-width: 375px) {
  .site-counter-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-page {
    padding: var(--s3) var(--s2) var(--s4);
  }
}

/* ============================================================
   Tool page — responsive breakpoints (BRAND.md: 375 / 480 / 768 / 1024)
   ============================================================ */

@media (max-width: 768px) {
  .tool-page {
    padding: var(--s4) var(--s2) var(--s5);
  }

  .tool-page__title {
    font-size: 26px;
  }

  .tool-card-shell {
    padding: var(--s3);
  }
}

@media (max-width: 480px) {
  .tool-page {
    padding: var(--s3) var(--s2) var(--s4);
  }

  .tool-page__title {
    font-size: 22px;
  }

  .tool-page__sub {
    font-size: 14px;
  }

  .tool-card-shell {
    padding: var(--s2);
  }

  .dropzone {
    padding: var(--s4) var(--s2);
  }

  .dropzone__icon {
    font-size: 28px;
  }

  .site-btn-primary {
    width: 100%;
  }

  .tool-file-picked {
    flex-wrap: wrap;
  }

  .tool-file-picked__remove {
    margin-left: auto;
  }

  .tool-file-list__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s1);
  }

  .tool-file-list[data-reorderable] {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  }

  .tool-page__meta {
    flex-direction: column;
    align-items: center;
    gap: var(--s1);
  }
}

@media (max-width: 375px) {
  .tool-page {
    padding: var(--s3) var(--s2) var(--s3);
  }

  .tool-page__title {
    font-size: 20px;
  }

  .dropzone {
    padding: var(--s3) var(--s2);
  }

  .dropzone__hint {
    font-size: 12px;
  }
}

/* Screen-reader-only text: present for assistive tech, invisible on screen. */
.tool-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Edit PDF editor (pdf/templates/pdf/edit_pdf.html, static/js/edit-pdf/)
   Toolbar on top; page thumbnails | scrolling pages | properties panel below.
   ========================================================================== */

.pe-editor {
  position: relative;
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--nav-h) - 32px);
  min-height: 480px;
  margin-top: var(--s3);
  /* Clears the sticky nav when the editor scrolls itself into view. */
  scroll-margin-top: calc(var(--nav-h) + 16px);
  border: 1px solid var(--bdr);
  border-radius: var(--r);
  background: var(--bg-card);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}

/* Toolbar */
.pe-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px var(--s2);
  padding: 8px var(--s1);
  border-bottom: 1px solid var(--bdr);
  background: var(--bg-card);
}

.pe-toolbar__group {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}

.pe-toolbar__save {
  margin-left: auto;
  gap: var(--s1);
}

.pe-tool {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 48px;
  height: 46px;
  padding: 4px 6px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  color: var(--tx-b);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}

.pe-tool svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pe-tool:hover:not(:disabled) {
  background: var(--bg-soft);
  color: var(--tx-h);
}

.pe-tool.is-active {
  background: var(--acc-lt);
  border-color: var(--acc);
  color: var(--tx-h);
}

.pe-tool:focus-visible,
.pe-text-btn:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 1px;
}

.pe-tool:disabled {
  opacity: 0.35;
  cursor: default;
}

.pe-tool--icon-only {
  min-width: 36px;
  height: 36px;
}

.pe-thumbs-toggle {
  display: none;
}

.pe-text-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--tx-b);
  padding: 6px 10px;
  background: none;
  border: 1px solid var(--bdr-dk);
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}

.pe-text-btn:hover {
  color: var(--tx-h);
  border-color: var(--acc);
}

.pe-text-btn--danger:hover {
  color: #7F1D1D;
  border-color: #7F1D1D;
}

.pe-zoom {
  gap: 6px;
}

.pe-zoom__label {
  min-width: 44px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--tx-h);
}

.pe-page-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
  font-size: 12px;
  color: var(--tx-m);
}

.pe-page-nav__input {
  width: 52px;
  padding: 5px 6px;
  font-family: inherit;
  font-size: 12px;
  text-align: center;
  border: 1px solid var(--bdr-dk);
  border-radius: var(--r-sm);
}

.pe-page-nav__input:focus {
  outline: none;
  border-color: var(--acc);
}

.pe-edit-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--tx-m);
  white-space: nowrap;
}

.pe-session-notice {
  margin: 0;
  padding: 8px var(--s2);
  font-size: 13px;
  font-weight: 500;
  color: var(--tx-h);
  background: var(--acc-lt);
  border-bottom: 1px solid var(--bdr);
}

/* Body: thumbnails | pages | panel */
.pe-body {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) 232px;
  flex: 1;
  min-height: 0;
}

.pe-thumbs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: var(--s2) 0;
  overflow-y: auto;
  border-right: 1px solid var(--bdr);
  background: var(--bg-soft);
}

.pe-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: none;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
}

.pe-thumb.is-current {
  border-color: var(--acc);
}

.pe-thumb__frame {
  width: 96px;
  background: #fff;
  box-shadow: var(--sh-sm);
}

.pe-thumb__frame canvas {
  display: block;
  width: 100%;
  height: auto;
}

.pe-thumb__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--tx-m);
}

.pe-center {
  position: relative;
  min-width: 0;
  min-height: 0;
}

.pe-pages-scroll {
  position: absolute;
  inset: 0;
  overflow: auto;
  background: var(--bg-soft);
}

.pe-pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3);
  width: max-content;
  min-width: 100%;
  box-sizing: border-box;
}

.pe-page {
  position: relative;
  flex-shrink: 0;
  background: #fff;
  box-shadow: var(--sh-md);
}

/* Holds everything drawn on one page; turned as a whole for a rotated page. */
.pe-page__frame {
  position: absolute;
  transform-origin: center;
}

.pe-page--blank .pe-page__frame {
  background: #fff;
}

.pe-page__canvas {
  position: absolute;
  inset: 0;
}

.pe-page__canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.pe-overlay {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: pan-x pan-y;
}

.pe-editor.is-creating .pe-overlay {
  cursor: crosshair;
  touch-action: none;
}

/* Objects drawn on a page */
.pe-obj {
  position: absolute;
  box-sizing: border-box;
  cursor: move;
  touch-action: none;
}

.pe-editor.is-creating .pe-obj {
  cursor: crosshair;
}

.pe-editor.is-creating .pe-obj--text {
  cursor: text;
}

.pe-obj:hover {
  outline: 1px dashed var(--bdr-dk);
  outline-offset: 2px;
}

/* A white whiteout on a white page is otherwise invisible once deselected —
   this faint edge (editor only, never saved) keeps it findable. */
.pe-obj--whiteout {
  box-shadow: 0 0 0 1px var(--bdr);
}

.pe-obj.is-selected {
  outline: 1px dashed var(--acc-dk);
  outline-offset: 2px;
}

/* Highlights: translucent and multiplied, so the text underneath stays
   crisp and dark — like a real highlighter. */
.pe-obj--markup {
  mix-blend-mode: multiply;
}

.pe-markup {
  position: absolute;
}

.pe-editor.is-highlighting .pe-overlay {
  cursor: text;
  touch-action: none;
}

/* A highlight's box adds only a tight selection outline. */
.pe-obj--markup.is-selected {
  outline-offset: 1px;
}

/* A text box in the pdf's own font, once its exact rendering is ready:
   the rendering shows, and the typed approximation underneath (kept for
   sizing and selection) is made invisible. */
.pe-text__preview {
  position: absolute;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.pe-obj.has-preview .pe-obj__text {
  color: transparent !important;
  caret-color: transparent;
}

/* The upright box a text box or image is laid out in (see overlay.js). */
.pe-obj__content {
  position: absolute;
  transform-origin: center;
}

.pe-obj__graphic,
.pe-obj__svg {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.pe-obj__image {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  pointer-events: none;
}

.pe-obj__text {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  resize: none;
  overflow: hidden;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  pointer-events: none;
  cursor: inherit;
}

.pe-obj.is-editing {
  cursor: text;
}

.pe-obj.is-editing .pe-obj__text {
  pointer-events: auto;
  cursor: text;
}

.pe-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  background: #fff;
  border: 1.5px solid var(--acc-dk);
  border-radius: 2px;
  box-sizing: border-box;
  z-index: 1;
}

.pe-handle--nw { left: 0; top: 0; cursor: nwse-resize; }
.pe-handle--n  { left: 50%; top: 0; cursor: ns-resize; }
.pe-handle--ne { left: 100%; top: 0; cursor: nesw-resize; }
.pe-handle--e  { left: 100%; top: 50%; cursor: ew-resize; }
.pe-handle--se { left: 100%; top: 100%; cursor: nwse-resize; }
.pe-handle--s  { left: 50%; top: 100%; cursor: ns-resize; }
.pe-handle--sw { left: 0; top: 100%; cursor: nesw-resize; }
.pe-handle--w  { left: 0; top: 50%; cursor: ew-resize; }

.pe-handle--start,
.pe-handle--end {
  border-radius: 50%;
  cursor: move;
}

/* Editor parts toggled with the `hidden` attribute also set their own
   `display`, which would otherwise outrank the browser's [hidden] rule. */
.pe-editor [hidden] {
  display: none !important;
}

/* Editing the pdf's own text: line highlights under the objects layer,
   shown only while the "edit text" tool is active. */
.pe-textlines {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
}

.pe-editor.is-editing-text .pe-textlines {
  display: block;
}

.pe-editor.is-editing-text .pe-overlay {
  cursor: text;
}

.pe-textline {
  position: absolute;
  border-radius: 2px;
  background: color-mix(in srgb, var(--acc) 8%, transparent);
}

.pe-textline.is-hover {
  outline: 1px solid var(--acc);
  background: color-mix(in srgb, var(--acc) 16%, transparent);
}

.pe-textline.is-edited {
  display: none;
}

.pe-obj--edit_text {
  cursor: text;
}

.pe-edit__patch {
  position: absolute;
  inset: -1px;
}

.pe-edit__preview {
  position: absolute;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.pe-obj--edit_text .pe-obj__text {
  position: relative;
  white-space: pre;
  overflow: hidden;
}

/* Organize pages view: covers the page column while open. */
.pe-editor.is-organizing .pe-body {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.pe-editor.is-organizing .pe-thumbs,
.pe-editor.is-organizing .pe-panel {
  display: none;
}

.pe-organizer {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  overflow-y: auto;
  background: var(--bg-soft);
}

.pe-organizer__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s2);
}

.pe-organizer__title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--tx-h);
}

.pe-organizer__hint,
.pe-organizer__status {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--tx-m);
}

.pe-organizer__status {
  color: var(--tx-h);
  font-weight: 600;
}

.pe-organizer__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1);
}

.pe-organizer__files {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
}

.pe-organizer__file {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  max-width: 100%;
  padding: 4px 4px 4px 12px;
  font-size: 12px;
  background: var(--bg-card);
  border: 1px solid var(--bdr);
  border-radius: 99px;
}

.pe-organizer__file-name {
  overflow: hidden;
  max-width: 220px;
  font-weight: 600;
  color: var(--tx-h);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pe-organizer__file-pages {
  color: var(--tx-m);
  white-space: nowrap;
}

.pe-organizer__file .pe-text-btn {
  padding: 3px 10px;
  border-radius: 99px;
}

.pe-text-btn:disabled {
  opacity: 0.4;
  cursor: default;
  border-color: var(--bdr-dk);
  color: var(--tx-b);
}

.pe-organizer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s2);
  align-items: end;
}

.pe-organizer__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px;
  background: var(--bg-card);
  border: 2px solid transparent;
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.pe-organizer__card:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

.pe-organizer__card.is-selected {
  border-color: var(--acc);
}

.pe-organizer__card.is-dragging {
  z-index: 2;
  opacity: 0.85;
  cursor: grabbing;
  box-shadow: var(--sh-md);
}

.pe-organizer__card.is-drop-before::before,
.pe-organizer__card.is-drop-after::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: var(--acc);
}

.pe-organizer__card.is-drop-before::before {
  left: -10px;
}

.pe-organizer__card.is-drop-after::after {
  right: -10px;
}

.pe-organizer__thumb {
  display: flex;
  width: 100%;
  max-width: 132px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--bdr);
}

.pe-organizer__thumb canvas,
.pe-organizer__placeholder {
  display: block;
  width: 100%;
  height: 100%;
}

.pe-organizer__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--tx-b);
}

.pe-organizer__actions {
  display: flex;
  gap: 4px;
}

.pe-organizer__action {
  width: 30px;
  height: 30px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  color: var(--tx-b);
  background: var(--bg-card);
  border: 1px solid var(--bdr-dk);
  border-radius: var(--r-sm);
  cursor: pointer;
}

.pe-organizer__action:hover:not(:disabled) {
  color: var(--tx-h);
  border-color: var(--acc);
}

.pe-organizer__action:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Properties panel */
.pe-panel {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s2);
  overflow-y: auto;
  border-left: 1px solid var(--bdr);
}

.pe-panel__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--tx-h);
}

.pe-panel__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pe-panel__hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--tx-m);
}

.pe-panel__hint--warning {
  padding: 8px 10px;
  color: #7F1D1D;
  background: #FEF2F2;
  border: 1px solid #FCA5A5;
  border-radius: var(--r-sm);
}

.pe-panel__actions {
  display: flex;
  gap: var(--s1);
  padding-top: var(--s1);
  border-top: 1px solid var(--bdr);
}

.pe-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s1);
  font-size: 12px;
}

.pe-field__label {
  font-weight: 500;
  color: var(--tx-b);
}

.pe-field__input {
  font-family: inherit;
  font-size: 12px;
  color: var(--tx-h);
}

select.pe-field__input,
.pe-field--number .pe-field__input {
  width: 128px;
  padding: 5px 6px;
  border: 1px solid var(--bdr-dk);
  border-radius: var(--r-sm);
  background: var(--bg-card);
}

.pe-field--number .pe-field__input {
  width: 72px;
}

.pe-field--color .pe-field__input {
  width: 44px;
  height: 28px;
  padding: 2px;
  border: 1px solid var(--bdr-dk);
  border-radius: var(--r-sm);
  background: var(--bg-card);
  cursor: pointer;
}

.pe-field--toggle .pe-field__input,
.pe-field--percent .pe-field__input {
  accent-color: var(--acc);
  cursor: pointer;
}

.pe-field--toggle .pe-field__input {
  width: 16px;
  height: 16px;
}

.pe-field--percent .pe-field__input {
  width: 128px;
}

.pe-field__input:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 1px;
}

/* Saving overlay */
.pe-applying {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.8);
}

.pe-applying__card {
  width: min(360px, calc(100% - 32px));
  padding: var(--s3);
  background: var(--bg-card);
  border: 1px solid var(--bdr);
  border-radius: var(--r);
  box-shadow: var(--sh-md);
}

/* Signature modal */
.pe-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s2);
  background: rgba(13, 13, 13, 0.45);
}

.pe-modal__dialog {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  width: min(560px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: var(--s3);
  background: var(--bg-card);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  box-sizing: border-box;
}

.pe-modal__dialog:focus {
  outline: none;
}

.pe-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pe-modal__title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--tx-h);
}

.pe-modal__close {
  font-size: 24px;
  line-height: 1;
  color: var(--tx-m);
  background: none;
  border: none;
  cursor: pointer;
}

.pe-modal__close:hover {
  color: var(--tx-h);
}

.pe-modal__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s1);
  margin-top: var(--s1);
}

.pe-modal__hint {
  margin: 0;
  font-size: 12px;
  color: var(--tx-m);
}

.pe-modal__input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 15px;
  border: 1px solid var(--bdr-dk);
  border-radius: var(--r-sm);
}

.pe-modal__input:focus {
  outline: none;
  border-color: var(--acc);
  box-shadow: 0 0 0 3px var(--acc-lt);
}

.pe-modal__error {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: #7F1D1D;
}

.pe-modal__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s1);
}

.pe-signature-canvas {
  display: block;
  width: 100%;
  height: 180px;
  border: 1px dashed var(--bdr-dk);
  border-radius: var(--r-sm);
  background: var(--bg-soft);
  touch-action: none;
  cursor: crosshair;
}

.pe-signature-preview {
  margin: 12px 0;
  padding: 12px;
  min-height: 72px;
  font-size: 44px;
  line-height: 1.3;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px dashed var(--bdr-dk);
  border-radius: var(--r-sm);
  background: var(--bg-soft);
}

.pe-upload-pick {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s1);
  margin-bottom: var(--s1);
  cursor: pointer;
}

.pe-upload-pick input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

/* Editor on narrower screens: thumbnails become a slide-in drawer (toggle
   button in the toolbar), then the properties panel drops below the pages
   as a horizontal strip, and tool labels collapse to icons. */
@media (max-width: 1024px) {
  .pe-body {
    position: relative;
    grid-template-columns: minmax(0, 1fr) 220px;
  }

  .pe-thumbs-toggle {
    display: inline-flex;
  }

  .pe-thumbs {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    width: 132px;
    box-shadow: var(--sh-md);
    transform: translateX(-100%);
    transition: transform .2s;
  }

  .pe-editor.is-thumbs-open .pe-thumbs {
    transform: translateX(0);
  }
}

@media (max-width: 768px) {
  .pe-editor {
    height: calc(100vh - var(--nav-h) - 16px);
  }

  .pe-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .pe-panel {
    flex-direction: row;
    align-items: center;
    gap: var(--s2);
    max-height: 132px;
    overflow-x: auto;
    border-left: none;
    border-top: 1px solid var(--bdr);
  }

  .pe-panel__body {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px var(--s2);
  }

  .pe-panel__actions {
    border-top: none;
    padding-top: 0;
  }

  .pe-tool {
    min-width: 40px;
    height: 40px;
  }

  .pe-tool__label,
  .pe-edit-count {
    display: none;
  }

  .pe-pages {
    padding: var(--s2);
    gap: var(--s2);
  }
}

@media (max-width: 480px) {
  .pe-organizer {
    padding: var(--s2);
  }

  .pe-organizer__grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
  }

  .pe-toolbar {
    gap: 4px;
    padding: 6px 4px;
  }

  /* One sideways-scrolling row of tools instead of wrapping onto several
     rows that eat the page area's height. */
  .pe-toolbar__group:first-child {
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
  }

  .pe-toolbar__group:first-child .pe-tool {
    flex-shrink: 0;
  }

  .pe-toolbar__save {
    margin-left: 0;
    width: 100%;
  }

  .pe-toolbar__save .site-btn-primary {
    width: 100%;
    justify-content: center;
  }

  .pe-text-btn[data-action="fit-page"] {
    display: none;
  }

  .pe-modal__dialog {
    padding: var(--s2);
  }
}

@media (max-width: 375px) {
  .pe-tool,
  .pe-tool--icon-only {
    min-width: 34px;
    height: 34px;
    padding: 2px;
  }

  .pe-page-nav {
    margin-left: 0;
  }
}