@import url("fonts-local.css?v=82d1df42");
@import url("design-tokens.css?v=13e0ba98");

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.logo,
.section-title,
.hero h1,
.home-hero h1,
.error-code {
  font-family: var(--font-display);
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

img { max-width: 100%; height: auto; display: block; }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* ——— Header ——— */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.site-header .container.header-inner,
.site-header .header-inner {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 800;
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  text-decoration: none;
}

.logo:hover { text-decoration: none; }

.logo-text-pdf {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.logo-mark {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 11px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm), var(--shadow-inset-glow);
}

.logo-mark--brand {
  background: var(--gradient-brand);
  color: #fff;
  box-shadow: var(--shadow-brand), var(--shadow-inset-glow);
}

.logo-mark svg {
  width: 1.75rem;
  height: 1.75rem;
  display: block;
}

.icon-chevron-down {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  opacity: 0.65;
}

.nav-cta svg {
  width: 1.125rem;
  height: 1.125rem;
  display: block;
  flex-shrink: 0;
}

.nav-trigger--ghost .icon-globe {
  width: 1rem;
  height: 1rem;
  display: block;
}

/* ——— Unified icon boxes (SVG only, no emoji) ——— */
.icon-box {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  line-height: 0;
}

.icon-box svg {
  display: block;
  flex-shrink: 0;
}

.icon-box--sm {
  width: 2rem;
  height: 2rem;
}

.icon-box--sm svg {
  width: 1.125rem;
  height: 1.125rem;
}

.icon-box--md {
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-4);
}

.icon-box--md svg {
  width: 1.375rem;
  height: 1.375rem;
}

.icon-box--lg {
  width: 3.5rem;
  height: 3.5rem;
}

.icon-box--lg svg {
  width: 1.625rem;
  height: 1.625rem;
}

.icon-box--xl {
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto var(--space-4);
}

.icon-box--xl svg {
  width: 2rem;
  height: 2rem;
}

.icon-box--merge { background: var(--icon-merge-bg); color: var(--icon-merge-fg); }
.icon-box--split { background: var(--icon-split-bg); color: var(--icon-split-fg); }
.icon-box--rotate { background: var(--icon-rotate-bg); color: var(--icon-rotate-fg); }
.icon-box--jpg { background: var(--icon-jpg-bg); color: var(--icon-jpg-fg); }
.icon-box--compress { background: var(--icon-compress-bg); color: var(--icon-compress-fg); }
.icon-box--pdf2jpg { background: var(--icon-pdf2jpg-bg); color: var(--icon-pdf2jpg-fg); }
.icon-box--delete { background: var(--icon-delete-bg); color: var(--icon-delete-fg); }
.icon-box--watermark { background: var(--icon-watermark-bg); color: var(--icon-watermark-fg); }
.icon-box--word { background: var(--icon-word-bg); color: var(--icon-word-fg); }
.icon-box--extract { background: var(--icon-extract-bg); color: var(--icon-extract-fg); }
.icon-box--reorder { background: var(--icon-reorder-bg); color: var(--icon-reorder-fg); }
.icon-box--word2pdf { background: var(--icon-word2pdf-bg); color: var(--icon-word2pdf-fg); }
.icon-box--unlock { background: var(--icon-unlock-bg); color: var(--icon-unlock-fg); }
.icon-box--protect { background: var(--icon-protect-bg); color: var(--icon-protect-fg); }
.icon-box--crop { background: var(--icon-crop-bg); color: var(--icon-crop-fg); }
.icon-box--pagenum { background: var(--icon-pagenum-bg); color: var(--icon-pagenum-fg); }
.icon-box--doc { background: var(--icon-doc-bg); color: var(--icon-doc-fg); }
.icon-box--pdf2ppt { background: var(--icon-pdf2ppt-bg); color: var(--icon-pdf2ppt-fg); }
.icon-box--ppt2pdf { background: var(--icon-ppt2pdf-bg); color: var(--icon-ppt2pdf-fg); }
.icon-box--excel2pdf { background: var(--icon-excel2pdf-bg); color: var(--icon-excel2pdf-fg); }
.icon-box--ocr { background: var(--icon-ocr-bg); color: var(--icon-ocr-fg); }
.icon-box--extractimages { background: var(--icon-extractimages-bg); color: var(--icon-extractimages-fg); }
.icon-box--grayscale { background: var(--icon-grayscale-bg); color: var(--icon-grayscale-fg); }
.icon-box--reverse { background: var(--icon-reverse-bg); color: var(--icon-reverse-fg); }
.icon-box--extractpages { background: var(--icon-extractpages-bg); color: var(--icon-extractpages-fg); }
.icon-box--nup { background: var(--icon-nup-bg); color: var(--icon-nup-fg); }
.icon-box--sign { background: var(--icon-sign-bg); color: var(--icon-sign-fg); }
.icon-box--metadata { background: var(--icon-metadata-bg); color: var(--icon-metadata-fg); }

.icon-chevron {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: var(--color-primary);
}

.nav-panel-links .icon-box {
  margin-right: 0.125rem;
}

.nav-main {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
  justify-self: center;
}

.nav-main a {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
}

.nav-main a.has-chevron {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.nav-main a:hover,
.nav-main a.is-active {
  color: var(--color-primary);
}

.nav-cta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--gradient-brand);
  color: #fff !important;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none !important;
  box-shadow: var(--shadow-brand);
  transition: transform 0.15s, box-shadow 0.15s;
}

.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 40px rgba(0, 87, 255, 0.28);
  text-decoration: none !important;
  background: var(--gradient-brand-hover);
}

/* Header layout v2 — dropdowns + mobile drawer (UI only; JS optional later) */
.header-inner {
  grid-template-columns: auto 1fr auto;
}

.logo-text { white-space: nowrap; }

.nav-desktop { justify-self: center; min-width: 0; }

.nav-main > .nav-item {
  position: relative;
  list-style: none;
}

.nav-main {
  gap: var(--space-2);
}

.nav-link,
.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: var(--space-2) var(--space-3);
  border: none;
  background: none;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}

.nav-link:hover,
.nav-trigger:hover,
.nav-dropdown:hover > .nav-trigger,
.nav-dropdown:focus-within > .nav-trigger {
  color: var(--color-primary);
  background: var(--color-primary-soft);
  text-decoration: none;
}

/* Dropdown panels anchor to their trigger (lang lives in .header-actions, not .nav-main) */
.nav-dropdown {
  position: relative;
}

.page-home .nav-item-home > .nav-link { color: var(--color-primary); }

.page-tools-hub .nav-item-tools > .nav-trigger,
.page-tool .nav-item-tools > .nav-trigger,
.page-tools-hub .nav-item-tools > .nav-link,
.page-tool .nav-item-tools > .nav-link {
  color: var(--color-primary);
}

.page-blog .nav-item-guides > .nav-trigger,
.page-blog .nav-item-guides > .nav-link { color: var(--color-primary); }

.page-legal .nav-item-about > .nav-trigger,
.page-legal .nav-item-about > .nav-link { color: var(--color-primary); }

.page-about .nav-item-about > .nav-trigger,
.page-about .nav-item-about > .nav-link { color: var(--color-primary); }

.page-contact .nav-item-contact > .nav-link { color: var(--color-primary); }

.chevron { display: none; }

.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.nav-trigger--ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.nav-panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  min-width: 14rem;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
  z-index: 200;
}

.nav-panel--align-end { left: auto; right: 0; }

/* Guides / About / Language — one line per item; panel grows to fit */
.nav-panel:not(.nav-panel--mega) {
  width: max-content;
}

.nav-panel-links--stack a {
  white-space: nowrap;
}

/* Mega menu: 3 category columns, one tool per row, full labels, no wrap */
.nav-panel--mega {
  width: max-content;
  padding: 0.95rem 0.65rem 0.7rem;
  border-radius: calc(var(--radius-lg) + 2px);
  background: linear-gradient(180deg, #fbfcfe 0%, var(--color-surface) 48%);
  left: 0;
  right: auto;
}

.nav-panel--mega .nav-panel-cols {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  align-items: start;
  gap: 0;
}

.nav-panel--mega .nav-panel-col {
  padding: 0 0.65rem;
}

.nav-panel--mega .nav-panel-col + .nav-panel-col {
  border-left: 1px solid var(--color-border);
}

.nav-panel--mega .nav-panel-label {
  margin: 0 0 0.5rem;
  padding: 0 0.35rem;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
}

.nav-panel--mega .nav-panel-links--mega {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.nav-panel--mega .nav-panel-links--mega a {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.35rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--color-text);
  border-radius: 0.45rem;
}

.nav-panel--mega .nav-panel-links--mega a:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.nav-panel--mega .nav-tool-label {
  display: block;
}

.nav-panel--mega .nav-panel-links--mega .icon-box--sm {
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 0.4rem;
}

.nav-panel--mega .nav-panel-links--mega .icon-box--sm svg {
  width: 0.9rem;
  height: 0.9rem;
}

.nav-panel--mega .nav-panel-footer {
  margin-top: 0.75rem;
  padding: 0.65rem 0.35rem 0.1rem;
  font-size: 0.8125rem;
}

.nav-dropdown:hover > .nav-panel,
.nav-dropdown:focus-within > .nav-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-panel-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.nav-panel-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-subtle);
  margin-bottom: var(--space-2);
  padding: 0 var(--space-2);
}

.nav-panel-links {
  list-style: none;
}

.nav-panel-links a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.nav-panel-links a:hover {
  background: var(--color-surface-2);
  text-decoration: none;
}

.nav-panel-links a.is-current {
  color: var(--color-primary);
  font-weight: 600;
}

.nav-link-soon {
  opacity: 0.55;
  pointer-events: none;
}

.badge-soon {
  margin-left: auto;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-full);
  background: var(--color-primary-muted);
  color: var(--color-primary);
}

.nav-panel-footer {
  display: block;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}

.nav-panel-footer:hover { text-decoration: underline; }

.nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.nav-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
}

.nav-menu-icon,
.nav-menu-icon::before,
.nav-menu-icon::after {
  display: block;
  width: 1.125rem;
  height: 2px;
  background: var(--color-text);
  border-radius: 1px;
  position: relative;
}

.nav-menu-icon::before,
.nav-menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-menu-icon::before { top: -6px; }
.nav-menu-icon::after { top: 6px; }

.nav-mobile-drawer {
  display: none;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.nav-mobile-inner {
  padding: var(--space-4) var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.nav-mobile-inner a.nav-mobile-home {
  font-weight: 700;
  font-size: var(--text-base);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-2);
}

.page-home .nav-mobile-home { color: var(--color-primary); }

.nav-mobile-inner a {
  padding: var(--space-2) 0;
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
}

.nav-mobile-inner a:hover { color: var(--color-primary); }

.nav-mobile-label {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-subtle);
}

.nav-mobile-label:first-child { margin-top: 0; }

.nav-mobile-muted {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.nav-mobile-cta {
  margin-top: var(--space-4);
  width: 100%;
  text-align: center;
}

@media (max-width: 960px) {
  .nav-desktop { display: none; }
  .nav-item-lang { display: none; }
  .nav-menu-toggle { display: inline-flex; }
  .site-header .container.header-inner,
  .site-header .header-inner,
  .header-inner {
    grid-template-columns: 1fr auto;
  }
  .logo {
    justify-self: start;
    grid-column: 1;
  }
  .header-actions {
    justify-self: end;
    grid-column: 2;
  }
  .nav-cta-text { display: none; }
  .nav-cta { padding: var(--space-3); }
  .nav-toggle:checked ~ .nav-mobile-drawer { display: block; }
  .nav-toggle:checked ~ .header-inner .nav-menu-toggle {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
  }
}

@media (max-width: 640px) {
  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  /* Mobile: logo left, menu toggle flush right (Merge CTA lives in drawer) */
  .header-actions .nav-cta {
    display: none;
  }

  .nav-menu-toggle {
    width: 2.75rem;
    height: 2.75rem;
  }

  .nav-mobile-inner a {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: var(--space-2) 0;
  }
}

@media (min-width: 961px) {
  .nav-mobile-drawer { display: none !important; }
}

/* ——— Footer ——— */
.site-footer {
  margin-top: var(--space-16);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

.page-tool .site-footer {
  margin-top: var(--space-8);
}

.footer-trust {
  background: var(--color-bg-elevated);
  border-bottom: 1px solid var(--color-border);
}

.footer-trust-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  text-align: center;
}

.footer-trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

.footer-trust-icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  color: var(--color-accent);
}

.footer-trust-sep {
  opacity: 0.35;
  user-select: none;
}

.footer-main {
  padding: var(--space-10) var(--space-6) var(--space-6);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(10rem, 1.2fr) repeat(4, minmax(0, 1fr));
  gap: var(--space-6) var(--space-8);
  align-items: start;
}

.footer-logo {
  margin-bottom: 0;
}

.footer-tagline {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
  max-width: 28ch;
  line-height: 1.5;
}

.footer-brand p.footer-desc {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  max-width: 32ch;
  line-height: 1.6;
}

.footer-col h4 {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
  color: var(--color-text-subtle);
}

.footer-col-sub {
  margin-top: var(--space-6) !important;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col li { margin-bottom: var(--space-2); }
.footer-col li:last-child { margin-bottom: 0; }
.footer-col a {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-decoration: none;
}
.footer-col a:hover { color: var(--color-primary); }

.footer-lang-current {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
}

.footer-link-muted {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

.footer-bottom {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
}

.footer-copy {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  margin: 0;
}

.footer-copy a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.footer-copy a:hover { color: var(--color-primary); }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer-legal a,
.footer-cookie-btn {
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--color-text-muted);
  text-decoration: none;
}

.footer-legal a:hover,
.footer-cookie-btn:hover {
  color: var(--color-primary);
}

.footer-cookie-btn {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-weight: inherit;
  /* do not use font: inherit — it overrides font-size above */
  cursor: pointer;
  text-align: left;
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8) var(--space-6);
  }
  .footer-brand {
    grid-column: 1 / -1;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
  }
}

@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand {
    border-bottom: none;
    padding-bottom: 0;
  }
  .footer-trust-sep { display: none; }
  .footer-trust-inner {
    flex-direction: column;
    gap: var(--space-2);
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ——— Hero / sections ——— */
.hero {
  padding: var(--space-12) 0 var(--space-10);
}

.hero-compact {
  padding: var(--page-header-top) 0 var(--space-5);
}

.page-tool .hero-tool.hero-compact {
  padding-top: var(--page-header-top);
  padding-bottom: var(--space-4);
}

.page-tools-hub .hero-tool.hero-compact {
  padding-top: var(--page-header-top);
  padding-bottom: var(--space-6);
}

.hero h1 {
  margin: 0;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  max-width: 20ch;
  font-weight: 800;
}

.page-tool .hero-tool h1 {
  max-width: none;
}

.hero-tool .hero-inner,
.hero-tool > .container {
  text-align: left;
  max-width: var(--container-max);
}

.hero .lead {
  margin-top: var(--space-4);
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 48ch;
  line-height: 1.7;
}

/* Tool page lead: function + inline trust on one line group */
.page-tool .hero-tool .lead {
  max-width: none;
  text-wrap: wrap;
}

.page-tool .hero-tool .lead--tool {
  margin-top: var(--space-3);
  white-space: normal;
}

.lead-trust-sep {
  color: var(--color-text-subtle);
  opacity: 0.55;
  margin: 0 0.15em;
}

.lead-trust {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--color-accent-hover);
  font-weight: 500;
  white-space: nowrap;
}

.lead-trust-icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  color: var(--color-accent);
}

@media (min-width: 768px) {
  .page-tool .hero-tool .lead:not(.lead--tool) {
    white-space: nowrap;
  }
}

.hero-tool--mobile .lead--tool {
  margin-top: var(--space-2);
  font-size: var(--text-base);
}

/* Hub hero may wrap to two lines */
.page-tools-hub .hero-tool .lead {
  max-width: 46ch;
  white-space: normal;
}

.privacy-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent-soft);
  color: var(--color-accent-hover);
  border: 1px solid var(--color-accent-muted);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.privacy-badge-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.privacy-badge--tool {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-3);
}

.section-title {
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-6);
  text-align: center;
}

.section-eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
  text-align: center;
}

/* ——— Cards grid ——— */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-5);
}

.tool-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  text-decoration: none;
  color: inherit;
  display: block;
}

.tool-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-primary-muted);
  text-decoration: none;
}

.tool-card .icon-box--md {
  display: flex;
  margin-bottom: var(--space-4);
}

.tool-card h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.tool-card p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ——— Tool workspace layout ——— */
.tool-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}

.tool-main-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

.tool-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
  min-width: 0;
  max-width: 100%;
}

.tool-panel:has(> .tool-result) {
  padding: 0;
}

.dropzone {
  position: relative;
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-6);
  text-align: center;
  background: var(--gradient-brand-soft);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.dropzone:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  box-shadow: inset 0 0 0 1px var(--color-primary-muted);
}

.dropzone-icon.icon-box--xl {
  margin-bottom: var(--space-4);
}

.dropzone h2 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}

.dropzone p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}

.btn-primary {
  background: var(--gradient-brand);
  color: #fff;
  box-shadow: var(--shadow-brand);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 36px rgba(29, 78, 216, 0.28);
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
  border-color: var(--color-primary-muted);
  background: var(--color-primary-soft);
}

.btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-base); }

.file-list {
  margin-top: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  min-width: 0;
}

.file-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  font-size: var(--text-sm);
  font-weight: 600;
  border-bottom: 1px solid var(--color-border);
}

.file-list-header--page-thumbs {
  flex-wrap: wrap;
  align-items: flex-start;
}

.file-list-header-summary {
  min-width: 0;
}

.file-list-header-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-left: auto;
}

.page-thumb-density {
  display: inline-flex;
  align-items: stretch;
  gap: 1px;
  padding: 2px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.page-thumb-density-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 1.75rem;
  padding: 0 var(--space-2);
  border: none;
  border-radius: calc(var(--radius-sm) - 2px);
  background: transparent;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
}

.page-thumb-density-btn-label {
  display: none;
}

@media (min-width: 40rem) {
  .page-thumb-density-btn-label {
    display: inline;
    font-weight: 500;
  }
}

.page-thumb-density-btn[aria-pressed="true"] {
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  color: var(--color-primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 22%, transparent);
}

.page-thumb-density-btn:hover:not([aria-pressed="true"]):not(:disabled) {
  background: var(--color-surface-2);
  color: var(--color-text);
}

.page-thumb-density-btn:hover:not([aria-pressed="true"]):not(:disabled) {
  background: var(--color-surface-2);
  color: var(--color-text);
}

.file-list-reset-order {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0 var(--space-2);
  border: 1px solid color-mix(in srgb, var(--color-primary) 26%, var(--color-border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
  font-size: var(--text-xs);
  font-weight: 600;
  color: color-mix(in srgb, var(--color-primary) 72%, var(--color-text));
  cursor: pointer;
  white-space: nowrap;
}

.file-list-reset-order:hover {
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-primary) 38%, var(--color-border));
}

.file-list-delete-invert,
.file-list-extract-invert,
.file-list-extract-select-all,
.file-list-split-invert,
.file-list-pdf2jpg-invert,
.file-list-pdf2ppt-invert {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
}

.file-list-split-invert[hidden],
.file-list-pdf2jpg-invert[hidden],
.file-list-pdf2ppt-invert[hidden] {
  display: none;
}

.file-list-delete-invert:hover,
.file-list-extract-invert:hover,
.file-list-extract-select-all:hover,
.file-list-split-invert:hover,
.file-list-pdf2jpg-invert:hover,
.file-list-pdf2ppt-invert:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}

.file-list-rotate-all,
.file-list-rotate-reset {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
}

.file-list-rotate-all:hover,
.file-list-rotate-reset:hover {
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
  color: color-mix(in srgb, var(--color-primary) 72%, var(--color-text));
  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
}

.tool-delete-advanced {
  margin-top: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}

.tool-delete-advanced-summary {
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}

.tool-delete-advanced-modes {
  margin-top: var(--space-3);
  border: none;
  padding: 0;
}

.tool-delete-advanced-note {
  margin-top: var(--space-2);
}

.tool-before-preview--order-changed {
  border-color: color-mix(in srgb, var(--color-primary) 32%, var(--color-border));
  border-left-width: 3px;
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-bg-elevated));
}

.tool-preview-page-chip--offset {
  border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border-strong));
  color: color-mix(in srgb, var(--color-primary) 72%, var(--color-text));
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
}

.file-list-hint {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-subtle);
}

.file-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  min-width: 0;
}

.file-item:last-child { border-bottom: none; }

.file-item[draggable="true"] {
  cursor: grab;
}

.file-item[draggable="true"]:active {
  cursor: grabbing;
}

[data-tool-file-list-items] {
  position: relative;
}

[data-tool-file-list-items] .file-item {
  transition:
    background-color 0.18s ease,
    box-shadow 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.18s ease,
    transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

[data-tool-file-list-items].file-list-items--dragging .file-item:not(.file-item--dragging) {
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

[data-tool-file-list-items].file-list-items--dragging {
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
}

.file-list-drop-marker {
  height: 2px;
  margin: 0 var(--space-3);
  border-radius: 1px;
  background: var(--color-primary);
  opacity: 0;
  transform: scaleX(0.35);
  transition:
    opacity 0.16s ease,
    transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}

.file-list-drop-marker--visible {
  opacity: 1;
  transform: scaleX(1);
}

.file-item--dragging {
  opacity: 0.94;
  background: var(--color-surface);
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.14),
    0 0 0 1px color-mix(in srgb, var(--color-primary) 18%, transparent);
  cursor: grabbing;
  z-index: 2;
  position: relative;
  border-bottom-color: transparent;
  transform: scale(1.015);
}

.file-item--settling {
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease, opacity 0.28s ease, background 0.28s ease;
  transform: scale(1);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.file-item--moved {
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
}

@media (prefers-reduced-motion: reduce) {
  [data-tool-file-list-items] .file-item,
  [data-tool-file-list-items].file-list-items--dragging .file-item:not(.file-item--dragging),
  .file-list-drop-marker,
  .file-item--settling,
  .file-item--moved,
  .file-list-items--inline-thumbs .file-item--page-card.file-item--drop-target {
    transition: none !important;
    transform: none !important;
  }
}

.file-item--dragging .file-drag {
  cursor: grabbing;
  color: var(--color-primary);
}

.file-item .drag { display: none; }

/* Inline page preview — compact multi-column cards (not full-width rows) */
.file-list-page-loading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 8rem;
  padding: var(--space-4);
  color: var(--text-muted, #64748b);
  font-size: 0.9375rem;
}

.file-list-items--inline-thumbs {
  display: grid;
  justify-content: start;
  gap: var(--space-2);
  padding: var(--space-3);
}

.file-list-items--inline-thumbs:not([data-page-thumb-density]),
.file-list-items--inline-thumbs[data-page-thumb-density="standard"] {
  grid-template-columns: repeat(auto-fill, 7.5rem);
}

.file-list-items--inline-thumbs[data-page-thumb-density="compact"] {
  grid-template-columns: repeat(auto-fill, 4.75rem);
  gap: var(--space-1);
  padding: var(--space-2);
}

.file-list-items--inline-thumbs[data-page-thumb-density="ultra"] {
  grid-template-columns: repeat(auto-fill, 3.5rem);
  gap: 0.125rem;
  padding: var(--space-1);
}

.file-list-items--inline-thumbs[data-page-thumb-density="large"] {
  grid-template-columns: repeat(auto-fill, 9.5rem);
  gap: var(--space-3);
}

@media (min-width: 36rem) {
  .file-list-items--inline-thumbs:not([data-page-thumb-density]),
  .file-list-items--inline-thumbs[data-page-thumb-density="standard"] {
    grid-template-columns: repeat(auto-fill, 8.25rem);
  }

  .file-list-items--inline-thumbs[data-page-thumb-density="compact"] {
    grid-template-columns: repeat(auto-fill, 5rem);
  }

  .file-list-items--inline-thumbs[data-page-thumb-density="ultra"] {
    grid-template-columns: repeat(auto-fill, 3.625rem);
  }

  .file-list-items--inline-thumbs[data-page-thumb-density="large"] {
    grid-template-columns: repeat(auto-fill, 10rem);
  }
}

@media (min-width: 52rem) {
  .file-list-items--inline-thumbs:not([data-page-thumb-density]),
  .file-list-items--inline-thumbs[data-page-thumb-density="standard"] {
    grid-template-columns: repeat(auto-fill, 8.75rem);
  }

  .file-list-items--inline-thumbs[data-page-thumb-density="compact"] {
    grid-template-columns: repeat(auto-fill, 5.25rem);
  }

  .file-list-items--inline-thumbs[data-page-thumb-density="ultra"] {
    grid-template-columns: repeat(auto-fill, 3.75rem);
  }

  .file-list-items--inline-thumbs[data-page-thumb-density="large"] {
    grid-template-columns: repeat(auto-fill, 10.5rem);
  }
}

.file-list-items--inline-thumbs .file-item--page-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 7.5rem;
  position: relative;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  text-align: center;
  overflow: hidden;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.18s ease,
    transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.file-list-items--inline-thumbs .file-item--page-card.file-item--order-offset {
  border-color: color-mix(in srgb, var(--color-primary) 36%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--color-primary) 50%, transparent);
}

.file-list-items--inline-thumbs .file-item--page-card.file-item--page-selectable {
  cursor: default;
}

.file-page-delete-check {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  border: 1px solid var(--color-border);
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--color-text-muted);
  cursor: pointer;
  user-select: none;
}

.file-page-delete-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  margin: 0;
  accent-color: color-mix(in srgb, var(--color-danger, #dc2626) 78%, #000);
}

.file-page-delete-check:has(.file-page-delete-checkbox:checked) {
  color: color-mix(in srgb, var(--color-danger, #dc2626) 82%, var(--color-text));
  border-color: color-mix(in srgb, var(--color-danger, #dc2626) 35%, var(--color-border));
  background: color-mix(in srgb, var(--color-danger, #dc2626) 8%, var(--color-surface));
}

.file-list-items--inline-thumbs[data-page-thumb-density="compact"] .file-page-delete-check-label,
.file-list-items--inline-thumbs[data-page-thumb-density="ultra"] .file-page-delete-check-label,
.file-list-items--inline-thumbs[data-page-thumb-density="compact"] .file-page-extract-check-label,
.file-list-items--inline-thumbs[data-page-thumb-density="ultra"] .file-page-extract-check-label,
.file-list-items--inline-thumbs[data-page-thumb-density="compact"] .file-page-split-check-label,
.file-list-items--inline-thumbs[data-page-thumb-density="ultra"] .file-page-split-check-label {
  display: none;
}

.file-list-items--inline-thumbs .file-item--page-card.file-item--page-listed--remove {
  border-color: color-mix(in srgb, var(--color-danger, #dc2626) 42%, var(--color-border));
  background: color-mix(in srgb, var(--color-danger, #dc2626) 7%, var(--color-surface));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--color-danger, #dc2626) 52%, transparent);
}

.file-list-items--inline-thumbs .file-item--page-card.file-item--page-listed--extract {
  border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--color-primary) 52%, transparent);
}

.file-list-items--inline-thumbs .file-item--page-card.file-item--page-listed--pdf2jpg,
.file-list-items--inline-thumbs .file-item--page-card.file-item--page-listed--pdf2ppt {
  border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--color-primary) 52%, transparent);
}

.file-list-items--inline-thumbs .file-item--page-card.file-item--page-listed--split {
  border-color: color-mix(in srgb, var(--icon-split-fg, var(--color-primary)) 42%, var(--color-border));
  background: color-mix(in srgb, var(--icon-split-bg, var(--color-primary)) 18%, var(--color-surface));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--icon-split-fg, var(--color-primary)) 52%, transparent);
}

.file-list-items--inline-thumbs .file-item--page-card.file-item--page-listed--rotate {
  border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--color-primary) 52%, transparent);
}

.file-page-extract-check {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  border: 1px solid var(--color-border);
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--color-text-muted);
  cursor: pointer;
  user-select: none;
}

.file-page-extract-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  margin: 0;
  accent-color: color-mix(in srgb, var(--color-primary) 78%, #000);
}

.file-page-extract-check:has(.file-page-extract-checkbox:checked) {
  color: color-mix(in srgb, var(--color-primary) 82%, var(--color-text));
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
}

.file-page-pdf2jpg-check,
.file-page-pdf2ppt-check {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.125rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  border: 1px solid var(--color-border);
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--color-text-muted);
  cursor: pointer;
  user-select: none;
}

.file-page-pdf2jpg-checkbox,
.file-page-pdf2ppt-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  margin: 0;
  accent-color: color-mix(in srgb, var(--color-primary) 78%, #000);
}

.file-page-pdf2jpg-check:has(.file-page-pdf2jpg-checkbox:checked),
.file-page-pdf2ppt-check:has(.file-page-pdf2ppt-checkbox:checked) {
  color: color-mix(in srgb, var(--color-primary) 82%, var(--color-text));
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
}

.file-page-split-check {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  border: 1px solid var(--color-border);
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--color-text-muted);
  cursor: pointer;
  user-select: none;
}

.file-page-split-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  margin: 0;
  accent-color: color-mix(in srgb, var(--icon-split-fg, var(--color-primary)) 78%, #000);
}

.file-page-split-check:has(.file-page-split-checkbox:checked) {
  color: color-mix(in srgb, var(--icon-split-fg, var(--color-primary)) 82%, var(--color-text));
  border-color: color-mix(in srgb, var(--icon-split-fg, var(--color-primary)) 35%, var(--color-border));
  background: color-mix(in srgb, var(--icon-split-bg, var(--color-primary)) 22%, var(--color-surface));
}

.file-page-split-check--disabled,
.file-page-split-check:has(.file-page-split-checkbox:disabled) {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}

[data-tool-key='split'] [data-tool-page-list][data-split-page-select='idle'] .file-page-split-check {
  display: none !important;
}

[data-tool-key='split'] [data-tool-page-list][data-split-page-select='idle'] .file-item--page-listed--split {
  border-color: var(--color-border);
  background: var(--color-surface);
  box-shadow: none;
}

.file-page-rotate-actions {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  margin-top: 0.25rem;
  width: 100%;
}

.file-page-rotate-btn {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.125rem 0.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  font-size: 0.875rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--color-text-muted);
  cursor: pointer;
}

.file-page-rotate-btn:hover {
  color: color-mix(in srgb, var(--color-primary) 82%, var(--color-text));
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
}

.file-page-rotate-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.file-page-rotate-actions--image {
  width: 100%;
  margin-top: 0.125rem;
}

[data-tool-key='jpg'] .file-page-rotate-actions--image .file-page-rotate-btn {
  padding: 0.2rem 0.35rem;
  font-size: 0.9375rem;
}

[data-image-file-thumb] .file-page-thumb-inline-frame {
  transform-origin: center center;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

[data-image-file-thumb].jpg-thumb--edited .file-page-thumb-inline-frame {
  transform: none;
}

[data-image-file-thumb].jpg-thumb--edited .file-page-thumb-inline-img {
  object-fit: contain;
}

.file-list-items--inline-thumbs .file-item--page-card[draggable="true"] {
  cursor: grab;
}

.file-list-items--inline-thumbs .file-item--page-card.file-item--dragging {
  cursor: grabbing;
}

.file-list-items--inline-thumbs .file-item--page-card .file-remove {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  z-index: 3;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.file-list-items--inline-thumbs .file-item--page-card .file-remove svg {
  width: 0.8125rem;
  height: 0.8125rem;
  display: block;
}

.file-list-items--inline-thumbs .file-item--with-image-thumb > .file-drag {
  display: none;
}

.file-image-order-badge {
  position: absolute;
  left: 0.25rem;
  bottom: 0.25rem;
  z-index: 2;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-text) 72%, transparent);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.125rem;
  text-align: center;
  pointer-events: none;
}

.jpg-preview-frame .file-image-order-badge {
  left: 0.1875rem;
  bottom: 0.1875rem;
}

.file-list-items--inline-thumbs .file-item--page-card[draggable="true"]:hover {
  border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
}

.file-list-items--inline-thumbs.file-list-items--dragging {
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
}

.file-list-items--inline-thumbs.file-list-items--dragging .file-item--page-card:not(.file-item--dragging) {
  opacity: 0.5;
}

.file-list-items--inline-thumbs .file-item--page-card.file-item--dragging {
  opacity: 0.45;
  transform: scale(0.94);
  border: 2px dashed color-mix(in srgb, var(--color-primary) 55%, var(--color-border));
  box-shadow: none;
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
}

.file-list-items--inline-thumbs .file-item--page-card.file-item--drop-target {
  border: 2px solid var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent),
    0 6px 16px rgba(15, 23, 42, 0.12);
  transform: scale(1.03);
}

.file-item--drag-ghost {
  opacity: 1 !important;
  transform: scale(1.06) rotate(-2deg) !important;
  box-shadow:
    0 18px 36px rgba(15, 23, 42, 0.22),
    0 0 0 2px var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  pointer-events: none;
}

.file-list-items--inline-thumbs .file-item--page-card:last-child {
  border-bottom: 1px solid var(--color-border);
}

.file-list-items--inline-thumbs .file-page-thumb-inline {
  position: relative;
  width: 100%;
  max-width: 5.75rem;
}

.file-list-items--inline-thumbs[data-page-thumb-density="compact"] .file-item--page-card {
  padding: var(--space-1) var(--space-1) var(--space-2);
  gap: var(--space-1);
  contain-intrinsic-size: auto 6.25rem;
}

.file-list-items--inline-thumbs[data-page-thumb-density="ultra"] .file-item--page-card {
  padding: 0.125rem 0.0625rem var(--space-1);
  gap: 0.125rem;
  contain-intrinsic-size: auto 5rem;
}

.file-list-items--inline-thumbs[data-page-thumb-density="compact"] .file-page-thumb-inline {
  max-width: 3.5rem;
}

.file-list-items--inline-thumbs[data-page-thumb-density="ultra"] .file-page-thumb-inline {
  max-width: 2.75rem;
}

.file-list-items--inline-thumbs[data-page-thumb-density="compact"] .file-page-card-label .file-name {
  font-size: 0.625rem;
}

.file-list-items--inline-thumbs[data-page-thumb-density="ultra"] .file-page-card-label .file-name {
  font-size: 0.5625rem;
  line-height: 1.15;
}

.file-list-items--inline-thumbs[data-page-thumb-density="compact"] .file-reorder-arrows {
  transform: none;
}

.file-list-items--inline-thumbs[data-page-thumb-density="ultra"] .file-reorder-arrows {
  transform: scale(0.88);
  transform-origin: center top;
}

.file-list-items--inline-thumbs[data-page-thumb-density="large"] .file-page-thumb-inline {
  max-width: 7.5rem;
}

.file-list-items--inline-thumbs[data-page-thumb-density="large"] .file-page-card-label .file-name {
  font-size: var(--text-sm);
}

.file-list-items--inline-thumbs .file-page-thumb-inline-frame {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
}

.file-page-card-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  min-width: 0;
  width: 100%;
}

.file-list-items--inline-thumbs .file-page-card-label .file-name {
  flex: none;
  font-size: var(--text-xs);
  font-weight: 600;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-list-items--inline-thumbs .file-page-card-label .file-meta {
  font-size: 0.6875rem;
  color: var(--color-text-subtle);
}

.file-list-items--inline-thumbs .file-reorder-arrows {
  width: 100%;
  justify-content: center;
}

/* Page/image thumb grids — only the grid scrolls; header + options stay put */
[data-tool-key='reorder'] [data-tool-state='files'] [data-tool-file-list-items].file-list-items--inline-thumbs,
[data-tool-key='delete'] [data-tool-state='files'] [data-tool-file-list-items].file-list-items--inline-thumbs,
[data-tool-key='extractpages'] [data-tool-state='files'] [data-tool-file-list-items].file-list-items--inline-thumbs,
[data-tool-key='rotate'] [data-tool-state='files'] [data-tool-file-list-items].file-list-items--inline-thumbs,
[data-tool-key='split'] [data-tool-state='files'] [data-tool-file-list-items].file-list-items--inline-thumbs,
[data-tool-key='jpg'] [data-tool-state='files'] [data-tool-file-list-items].file-list-items--inline-thumbs,
[data-tool-key='pdf2jpg'] [data-tool-state='files'] [data-tool-file-list-items].file-list-items--inline-thumbs,
[data-tool-key='pdf2ppt'] [data-tool-state='files'] [data-tool-file-list-items].file-list-items--inline-thumbs {
  max-height: min(60vh, 36rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

@media (max-width: 47.99rem) {
  [data-tool-key='reorder'] [data-tool-state='files'] [data-tool-file-list-items].file-list-items--inline-thumbs,
  [data-tool-key='delete'] [data-tool-state='files'] [data-tool-file-list-items].file-list-items--inline-thumbs,
  [data-tool-key='extractpages'] [data-tool-state='files'] [data-tool-file-list-items].file-list-items--inline-thumbs,
  [data-tool-key='rotate'] [data-tool-state='files'] [data-tool-file-list-items].file-list-items--inline-thumbs,
  [data-tool-key='split'] [data-tool-state='files'] [data-tool-file-list-items].file-list-items--inline-thumbs,
  [data-tool-key='jpg'] [data-tool-state='files'] [data-tool-file-list-items].file-list-items--inline-thumbs,
  [data-tool-key='pdf2jpg'] [data-tool-state='files'] [data-tool-file-list-items].file-list-items--inline-thumbs,
  [data-tool-key='pdf2ppt'] [data-tool-state='files'] [data-tool-file-list-items].file-list-items--inline-thumbs {
    max-height: min(50vh, 28rem);
  }
}

.file-item--with-page-thumb {
  gap: var(--space-3);
}

.file-page-thumb-inline {
  flex: 0 0 auto;
  display: block;
  line-height: 0;
}

.file-page-thumb-inline-frame {
  position: relative;
  display: block;
  width: 3.25rem;
  height: 4.25rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-sm);
}

.file-page-thumb-inline-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

/* Rotate — per-page inline thumb preview (CSS only, no re-render) */
.file-list-items--inline-thumbs .file-item--rotate-preview .file-page-thumb-inline-frame {
  transform-origin: center center;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.file-list-items--inline-thumbs .file-item--page-card[data-page-rotate-degrees='90'] .file-page-thumb-inline-frame {
  transform: rotate(90deg) scale(0.8);
}

.file-list-items--inline-thumbs .file-item--page-card[data-page-rotate-degrees='270'] .file-page-thumb-inline-frame {
  transform: rotate(-90deg) scale(0.8);
}

.file-list-items--inline-thumbs .file-item--page-card[data-page-rotate-degrees='180'] .file-page-thumb-inline-frame {
  transform: rotate(180deg);
}

.file-page-thumb-inline-frame .file-page-thumb-skeleton {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    var(--color-surface-2) 8%,
    var(--color-surface) 18%,
    var(--color-surface-2) 33%
  );
  background-size: 200% 100%;
  animation: file-page-thumb-shimmer 1.2s ease-in-out infinite;
}

.file-page-thumb-inline-frame .file-page-thumb-skeleton--error {
  animation: none;
  background: var(--color-surface-2);
}

.file-page-thumb-zoom {
  position: absolute;
  right: 3px;
  bottom: 3px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
  border-radius: var(--radius-sm);
  background: rgb(255 255 255 / 0.94);
  color: var(--color-text-muted);
  cursor: pointer;
  box-shadow: 0 1px 4px rgb(15 23 42 / 0.12);
}

.file-page-thumb-zoom svg {
  width: 0.75rem;
  height: 0.75rem;
  display: block;
}

.file-page-thumb-zoom:hover,
.file-page-thumb-zoom:focus-visible {
  color: var(--color-primary);
  border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
  background: #fff;
}

.file-list-items--inline-thumbs[data-page-thumb-density="compact"] .file-page-thumb-zoom {
  width: 1.125rem;
  height: 1.125rem;
}

.file-list-items--inline-thumbs[data-page-thumb-density="ultra"] .file-page-thumb-zoom {
  width: 1rem;
  height: 1rem;
  top: auto;
  right: 0.125rem;
  bottom: 0.125rem;
}

.file-list-items--inline-thumbs[data-page-thumb-density="compact"] .file-page-thumb-zoom svg {
  width: 0.625rem;
  height: 0.625rem;
}

.file-list-items--inline-thumbs[data-page-thumb-density="ultra"] .file-page-thumb-zoom svg {
  width: 0.5rem;
  height: 0.5rem;
}

.tool-preview-lightbox-panel--page-thumb {
  width: min(96vw, 52rem);
}

.page-thumb-lightbox-headings {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.page-thumb-lightbox-meta {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-subtle);
}

.page-thumb-lightbox-body {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-2);
  min-height: min(70vh, 36rem);
}

.page-thumb-lightbox-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(64vh, 32rem);
  padding: var(--space-2);
}

.page-thumb-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: min(64vh, 32rem);
  width: auto;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  background: #fff;
}

.page-thumb-lightbox-loading {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

.page-thumb-lightbox-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 0;
  line-height: 1;
  cursor: pointer;
}

.page-thumb-lightbox-nav svg {
  width: 1rem;
  height: 1rem;
  display: block;
}

.page-thumb-lightbox-nav:hover:not(:disabled) {
  color: var(--color-primary);
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
}

.page-thumb-lightbox-nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

@media (max-width: 36rem) {
  .page-thumb-lightbox-body {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto auto;
  }

  .page-thumb-lightbox-nav--prev {
    order: 2;
    justify-self: start;
  }

  .page-thumb-lightbox-nav--next {
    order: 3;
    justify-self: end;
  }

  .page-thumb-lightbox-stage {
    order: 1;
    min-height: min(50vh, 24rem);
  }
}

@keyframes file-page-thumb-shimmer {
  to {
    background-position: -200% 0;
  }
}

.file-list-items--inline-thumbs .file-item--with-page-thumb .file-meta {
  color: var(--color-text-subtle);
}

.file-list-thumb-hint {
  margin: 0;
  padding: var(--space-2) var(--space-4) var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  border-top: 1px solid var(--color-border);
}

.file-drag {
  display: flex;
  align-items: center;
  color: var(--color-text-subtle);
  cursor: grab;
  flex-shrink: 0;
}

.file-drag svg {
  width: 0.875rem;
  height: 0.875rem;
  display: block;
}

.file-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: var(--color-text);
}

.file-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.file-size {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.file-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-subtle);
  font-size: 0;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.file-remove svg {
  width: 0.9375rem;
  height: 0.9375rem;
  display: block;
}

.file-remove:hover {
  background: #fee2e2;
  color: var(--color-danger);
}

.file-reorder-arrows {
  display: inline-flex;
  align-items: stretch;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface-2);
}

.file-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0;
  padding: 0;
  border: none;
  border-right: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.file-arrow:last-child {
  border-right: none;
}

.file-arrow svg {
  width: 0.8125rem;
  height: 0.8125rem;
  display: block;
}

.file-arrow:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
  color: var(--color-primary);
}

.file-arrow:active:not(:disabled) {
  background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface));
}

.file-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.file-reorder-arrows--sequence {
  width: 100%;
  flex-wrap: nowrap;
  justify-content: stretch;
}

.file-list-items--inline-thumbs .file-reorder-arrows--sequence .file-arrow {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
}

.file-list-items--inline-thumbs[data-page-thumb-density="compact"] .file-reorder-arrows--sequence .file-arrow {
  height: 1.5rem;
}

.file-list-items--inline-thumbs[data-page-thumb-density="ultra"] .file-reorder-arrows--sequence .file-arrow {
  height: 1.125rem;
  font-size: 0.5625rem;
  padding: 0 0.0625rem;
}

.file-list-items--inline-thumbs[data-page-thumb-density="ultra"] .file-page-delete-check {
  top: 0.125rem;
  left: 0.125rem;
  padding: 0.0625rem 0.125rem;
}

.file-list-items--inline-thumbs[data-page-thumb-density="ultra"] .file-page-extract-check {
  top: 0.125rem;
  left: 0.125rem;
  padding: 0.0625rem 0.125rem;
}

.file-list-items--inline-thumbs[data-page-thumb-density="ultra"] .file-page-split-check {
  top: 0.125rem;
  left: 0.125rem;
  padding: 0.0625rem 0.125rem;
}

.file-list-items--inline-thumbs[data-page-thumb-density="ultra"] .file-page-rotate-actions {
  gap: 0.125rem;
  margin-top: 0.125rem;
}

.file-list-items--inline-thumbs[data-page-thumb-density="ultra"] .file-page-rotate-btn {
  font-size: 0.75rem;
  padding: 0.0625rem 0.125rem;
}

.file-list-items--inline-thumbs[data-page-thumb-density="ultra"] .file-page-delete-checkbox {
  width: 0.75rem;
  height: 0.75rem;
}

.file-list-items--inline-thumbs[data-page-thumb-density="ultra"] .file-page-extract-checkbox {
  width: 0.75rem;
  height: 0.75rem;
}

.file-list-items--inline-thumbs[data-page-thumb-density="ultra"] .file-page-split-checkbox {
  width: 0.75rem;
  height: 0.75rem;
}

.page-move-popover {
  position: fixed;
  z-index: 1200;
  width: min(18.5rem, calc(100vw - 1.5rem));
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.page-move-popover-header {
  margin-bottom: var(--space-3);
}

.page-move-popover-title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 700;
}

.page-move-popover-subtitle {
  margin: 0.25rem 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  line-height: 1.4;
}

.page-move-popover-section + .page-move-popover-section {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.page-move-popover-section-title {
  margin: 0 0 var(--space-2);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.page-move-popover-hint {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  line-height: 1.45;
}

.page-move-popover-quick {
  display: flex;
  gap: var(--space-2);
}

.page-move-popover-quick-btn {
  flex: 1 1 0;
  min-width: 0;
}

.page-move-popover-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: var(--space-2);
}

.page-move-popover-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}

.page-move-popover-input {
  width: 100%;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.page-move-popover-placement-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-bottom: var(--space-2);
}

.page-move-segment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  padding: 1px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-border);
  overflow: hidden;
}

.page-move-segment-btn {
  margin: 0;
  padding: 0.375rem 0.5rem;
  border: none;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
}

.page-move-segment-btn[aria-pressed='true'] {
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  color: var(--color-primary);
}

.page-move-popover-summary {
  margin: 0 0 var(--space-2);
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  line-height: 1.45;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
}

.page-move-popover-summary[data-state='ready'] {
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
  color: var(--color-text);
}

.page-move-popover-summary[data-state='error'] {
  background: color-mix(in srgb, var(--color-danger, #dc2626) 8%, var(--color-surface));
  color: color-mix(in srgb, var(--color-danger, #dc2626) 82%, var(--color-text));
}

.page-move-popover-error {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-danger, #dc2626);
}

.page-move-popover-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

.file-item-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  color: var(--color-primary);
}

.progress-bar-fill {
  height: 100%;
  width: 65%;
  background: var(--gradient-brand);
  border-radius: var(--radius-full);
}

.tool-actions {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.progress-bar {
  margin-top: var(--space-4);
  height: 8px;
  background: var(--color-surface-2);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}

.progress-bar--indeterminate .progress-bar-fill {
  width: 40%;
  animation: progress-indeterminate 1.35s ease-in-out infinite;
}

@keyframes progress-indeterminate {
  0% {
    transform: translateX(-110%);
  }
  100% {
    transform: translateX(320%);
  }
}

/* ——— Ad slots (house promo until AdSense) ——— */
.ad-slot {
  background: var(--color-ad-bg);
  border: 1px dashed var(--color-ad-border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ad-slot--house {
  background: linear-gradient(135deg, #f0f6ff 0%, #e8f0fe 55%, #f8fafc 100%);
  border: 1px solid #c7d7f5;
  border-style: solid;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  color: var(--color-text);
  padding: var(--space-3) var(--space-4);
}

.ad-leaderboard {
  min-height: var(--ad-leaderboard-min-h);
  margin: var(--space-8) 0;
}

/* Tool column uses flex gap — avoid margin + gap double spacing */
.tool-main-col .ad-slot {
  margin: 0;
}

.ad-mobile {
  min-height: var(--ad-mobile-min-h);
  display: none;
}

.house-promo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  width: 100%;
  max-width: 52rem;
  text-decoration: none;
  color: inherit;
}

.house-promo:hover {
  text-decoration: none;
}

.house-promo:hover .house-promo-cta {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.house-promo-kicker {
  flex: 0 0 auto;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #dbe4f5;
}

.house-promo-copy {
  flex: 1 1 12rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.house-promo-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

.house-promo-desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}

.house-promo-cta {
  flex: 0 0 auto;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
}

.ad-mobile .house-promo {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.ad-mobile .house-promo-cta {
  white-space: normal;
}

/* ——— Content / prose ——— */
.content-section {
  padding: var(--space-10) 0;
}

.prose {
  max-width: var(--content-max);
}

.prose h2 {
  font-size: var(--text-2xl);
  margin: var(--space-10) 0 var(--space-4);
}

.prose h2:first-child { margin-top: 0; }

.prose p {
  margin-bottom: var(--space-4);
  color: var(--color-text-muted);
}

.prose ul, .prose ol {
  margin: 0 0 var(--space-4) var(--space-6);
  color: var(--color-text-muted);
}

.prose li { margin-bottom: var(--space-2); }

/* ——— FAQ ——— */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: var(--content-max);
}

.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.faq-q {
  padding: var(--space-4) var(--space-5);
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-q::after { content: "+"; color: var(--color-text-subtle); }

.faq-a {
  padding: 0 var(--space-5) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
}

/* ——— Breadcrumb (unified: tool hero · hub · page-shell) ——— */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-text-subtle);
  margin: 0 0 var(--breadcrumb-gap-below);
}

.breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumb span.sep { opacity: 0.5; }

/* ——— Blog ——— */
/* Header + dek use container width; body prose stays content-max */
.article-header {
  max-width: none;
}

.article-meta {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

.article-dek {
  margin-top: var(--space-5);
  font-size: var(--text-lg);
  line-height: 1.65;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.article-body {
  max-width: 56rem;
  margin-top: var(--space-8);
}

.article-body p {
  margin-bottom: var(--space-5);
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.article-body h2 {
  font-size: var(--text-xl);
  margin: var(--space-10) 0 var(--space-4);
  color: var(--color-text);
}

/* ——— Trust / legal ——— */
.legal-layout {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: var(--space-10);
  align-items: start;
}

.legal-toc {
  position: sticky;
  top: calc(var(--header-height) + var(--space-4));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-size: var(--text-sm);
}

.legal-toc h4 {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-subtle);
  margin-bottom: var(--space-3);
}

.legal-toc a {
  display: block;
  padding: var(--space-2) 0;
  color: var(--color-text-muted);
  text-decoration: none;
}

.legal-toc a:hover { color: var(--color-primary); }

/* ——— Contact ——— */
.contact-card {
  max-width: 32rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}

.contact-email {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  font-size: var(--text-lg);
  font-weight: 600;
}

/* ——— 404 ——— */
.error-page {
  text-align: center;
  padding: var(--space-16) var(--space-6);
}

.error-code {
  font-size: 5rem;
  font-weight: 800;
  line-height: 1;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.35;
}

.error-page h1 {
  margin-top: var(--space-4);
  font-size: var(--text-2xl);
}

.error-page p {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
}

.error-page .btn { margin-top: var(--space-8); }

/* ——— Cookie consent ——— */
.cookie-banner[hidden] {
  display: none !important;
}

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  padding: var(--space-4);
  background: rgba(15, 23, 42, 0.96);
  color: #e2e8f0;
  border-top: 1px solid #334155;
}

.cookie-banner .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.cookie-banner p {
  font-size: var(--text-sm);
  max-width: 52ch;
  color: #cbd5e1;
}

.cookie-banner a { color: #93c5fd; }

.cookie-actions { display: flex; gap: var(--space-3); }

.cookie-actions .btn-secondary {
  background: transparent;
  color: #e2e8f0;
  border-color: #475569;
}

/* ——— Mobile ——— */
@media (max-width: 900px) {
  .ad-leaderboard { display: none; }
  .ad-mobile { display: flex; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .legal-layout { grid-template-columns: 1fr; }
  .legal-toc { display: none; }
}

/* Mobile-only frame helper */
.mobile-frame {
  max-width: 390px;
  margin: 0 auto;
  border: 8px solid #1e293b;
  border-radius: 28px;
  overflow: hidden;
  min-height: 844px;
  background: var(--color-bg);
}

.mobile-frame .site-header { position: relative; }

/* ——— Home page — traffic-first hero + popular tools + steps ——— */
.home-hero-wrap {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-elevated);
  border-bottom: 1px solid var(--color-border);
}

.hero-mesh {
  position: absolute;
  inset: 0;
  background: var(--gradient-hero-mesh);
  pointer-events: none;
}

.hero-grain {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

.home-hero {
  position: relative;
  padding: var(--space-12) 0 var(--space-8);
}

.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: center;
}

.hero-copy {
  text-align: left;
}

.hero-eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.home-hero h1 {
  font-size: clamp(2rem, 5vw, var(--text-display));
  line-height: 1.08;
  letter-spacing: var(--tracking-display);
  font-weight: 800;
  max-width: 16ch;
}

.home-hero .lead--home {
  margin-top: var(--space-4);
  max-width: 38rem;
  font-size: clamp(var(--text-base), 2.5vw, var(--text-lg));
  color: var(--color-text-muted);
  line-height: 1.65;
  text-wrap: pretty;
}

.hero-trust-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.hero-trust-pills li {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.hero-visual {
  position: relative;
}

.hero-preview-link {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-2xl);
  outline-offset: 4px;
}

.hero-preview-link:focus-visible {
  outline: 2px solid var(--color-primary);
}

.hero-preview-window {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: perspective(1200px) rotateY(-4deg) rotateX(2deg);
  transition: transform var(--duration-normal) var(--ease-out);
}

.hero-preview-link:hover .hero-preview-window,
.hero-preview-link:focus-visible .hero-preview-window {
  transform: perspective(1200px) rotateY(-1deg) rotateX(0deg);
}

.hero-preview-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
}

.hero-preview-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--radius-full);
  background: var(--color-border-strong);
}

.hero-preview-dot:first-child { background: #f87171; }
.hero-preview-dot:nth-child(2) { background: #fbbf24; }
.hero-preview-dot:nth-child(3) { background: #34d399; }

.hero-preview-url {
  margin-left: var(--space-3);
  flex: 1;
  min-width: 0;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--color-text-subtle);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-preview-body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.hero-preview-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-accent-hover);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-1);
}

.hero-preview-pulse {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--color-brand-mint);
  box-shadow: 0 0 0 0 rgba(0, 201, 167, 0.5);
  animation: loka-pulse 2s ease-out infinite;
}

@keyframes loka-pulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 201, 167, 0.45); }
  70% { box-shadow: 0 0 0 8px rgba(0, 201, 167, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 201, 167, 0); }
}

.hero-preview-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.hero-preview-file-icon {
  width: 1rem;
  height: 1.25rem;
  border-radius: 3px;
  background: var(--gradient-brand-soft);
  border: 1px solid var(--color-primary-muted);
  flex-shrink: 0;
}

.hero-preview-row strong {
  color: var(--color-text);
  font-weight: 600;
  font-size: var(--text-sm);
}

.hero-preview-meta {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}

.hero-preview-badge {
  margin-left: auto;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-hover);
  background: var(--color-accent-soft);
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-full);
}

.hero-preview-action {
  display: block;
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-4);
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 700;
  color: #fff;
  background: var(--gradient-brand);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-brand);
}

/* Popular tools — shared Home + Hub */
.traffic-popular,
.home-popular {
  padding: var(--space-8) 0 var(--space-6);
  background: var(--color-bg);
}

.traffic-popular--hub {
  padding-top: var(--space-6);
  padding-bottom: var(--space-5);
  background: var(--color-bg-elevated);
  border-bottom: 1px solid var(--color-border);
}

.traffic-popular-header,
.home-popular-header {
  text-align: center;
  margin-bottom: var(--space-6);
}

.traffic-popular-title,
.home-popular-title {
  font-size: clamp(var(--text-xl), 4vw, var(--text-2xl));
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.traffic-popular-lead,
.home-popular-lead {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.traffic-popular-grid,
.home-popular-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.traffic-popular-card,
.home-popular-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  min-height: 100%;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.traffic-popular-card:hover,
.traffic-popular-card:focus-visible,
.home-popular-card:hover,
.home-popular-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-primary-muted);
  text-decoration: none;
}

.traffic-popular-card:active,
.home-popular-card:active {
  transform: translateY(-1px);
}

.traffic-popular-icon,
.home-popular-icon {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.traffic-popular-card-body,
.home-popular-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
  text-align: left;
}

.traffic-popular-card-title,
.home-popular-card-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.25;
}

.traffic-popular-card-desc,
.home-popular-card-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.45;
}

.traffic-popular-card-arrow,
.home-popular-card-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  margin-top: auto;
  align-self: flex-end;
  transition: background 0.2s, transform 0.2s;
}

.traffic-popular-card-arrow svg,
.home-popular-card-arrow svg {
  width: 1rem;
  height: 1rem;
  display: block;
}

.traffic-popular-card:hover .traffic-popular-card-arrow,
.home-popular-card:hover .home-popular-card-arrow {
  background: var(--gradient-brand);
  color: #fff;
  transform: translateX(2px);
}

/* Trust strip — replaces dark manifesto */
.home-trust-strip {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.home-trust-strip-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3) var(--space-6);
  padding: var(--space-4) var(--space-6);
}

.home-trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.home-trust-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--color-accent);
}

.home-tools {
  padding: var(--space-12) 0 var(--space-10);
  background: var(--color-bg);
}

.home-tools-header {
  text-align: center;
  margin-bottom: var(--space-8);
}

.home-tools-sub {
  margin: calc(var(--space-3) * -1) auto 0;
  max-width: 36rem;
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.6;
}

.home-tools-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  max-width: none;
  margin: 0;
}

.home-tool-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  box-shadow: var(--shadow-sm);
  min-height: 5.5rem;
  -webkit-tap-highlight-color: transparent;
}

.home-tool-card:hover,
.home-tool-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-primary-muted);
  text-decoration: none;
}

.home-tool-card .icon-box--lg {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
}

.home-tool-card .card-body {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.home-tool-card h3 {
  font-size: var(--text-base);
  font-weight: 700;
  margin-bottom: var(--space-1);
}

.home-tool-card p {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-tool-card .icon-chevron {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  opacity: 0.45;
  transition: transform 0.2s, opacity 0.2s;
}

.home-tool-card:hover .icon-chevron {
  opacity: 1;
  transform: translateX(3px);
}

.page-home .section-cta {
  text-align: center;
  margin-top: var(--space-8);
}

.home-steps {
  padding: var(--space-12) 0 var(--space-16);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

.home-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: 56rem;
  margin: var(--space-8) auto 0;
}

.home-step {
  text-align: center;
  padding: var(--space-5);
}

.home-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  background: var(--gradient-brand);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 800;
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-brand);
}

.home-step h3 {
  font-size: var(--text-base);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.home-step p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

@media (max-width: 1024px) {
  .traffic-popular-grid,
  .home-popular-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .home-tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .hero-split {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .hero-visual {
    display: none;
  }

  .hero-copy {
    text-align: center;
    max-width: 36rem;
    margin: 0 auto;
  }

  .home-hero h1 {
    max-width: none;
    margin: 0 auto;
  }

  .home-hero .lead--home {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-trust-pills {
    justify-content: center;
  }

  .hero-actions {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .home-hero {
    padding: var(--space-8) 0 var(--space-4);
  }

  .traffic-popular,
  .home-popular {
    padding: var(--space-5) 0 var(--space-4);
  }

  .traffic-popular--hub {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }

  .traffic-popular-header,
  .home-popular-header {
    margin-bottom: var(--space-4);
    text-align: left;
  }

  .traffic-popular-grid,
  .home-popular-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .traffic-popular-card,
  .home-popular-card {
    padding: var(--space-4);
    gap: var(--space-3);
    min-height: 8.5rem;
  }

  .traffic-popular-card-title,
  .home-popular-card-title {
    font-size: var(--text-base);
  }

  .traffic-popular-card-desc,
  .home-popular-card-desc {
    font-size: var(--text-xs);
  }

  .traffic-popular-icon.icon-box--xl,
  .home-popular-icon.icon-box--xl {
    width: 3.25rem;
    height: 3.25rem;
  }

  .traffic-popular-icon.icon-box--xl svg,
  .home-popular-icon.icon-box--xl svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  .traffic-popular-card-arrow,
  .home-popular-card-arrow {
    width: 1.75rem;
    height: 1.75rem;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .home-trust-strip-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-4);
  }

  .home-tools {
    padding: var(--space-10) 0 var(--space-8);
  }

  .home-tools-header {
    text-align: left;
    margin-bottom: var(--space-5);
  }

  .home-tools-sub {
    text-align: left;
    font-size: var(--text-sm);
  }

  .page-home .section-title,
  .page-home .section-eyebrow {
    text-align: left;
  }

  .home-tools-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .home-tool-card {
    padding: var(--space-4);
    min-height: 4.75rem;
  }

  .page-home .section-cta .btn {
    width: 100%;
  }

  .home-steps {
    padding: var(--space-10) 0 var(--space-12);
  }

  .home-steps-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-top: var(--space-6);
  }

  .home-step {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 0 var(--space-4);
    text-align: left;
    padding: var(--space-4);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  .home-step-num {
    grid-row: 1 / span 2;
    align-self: center;
    margin-bottom: 0;
    width: 2.25rem;
    height: 2.25rem;
  }

  .home-step h3 {
    align-self: end;
    margin-bottom: 0;
  }

  .home-step p {
    grid-column: 2;
    font-size: var(--text-xs);
  }
}

@media (max-width: 380px) {
  .traffic-popular-grid,
  .home-popular-grid {
    grid-template-columns: 1fr;
  }

  .traffic-popular-card,
  .home-popular-card {
    flex-direction: row;
    align-items: center;
    min-height: auto;
  }

  .traffic-popular-card-body,
  .home-popular-card-body {
    flex: 1;
  }

  .traffic-popular-card-arrow,
  .home-popular-card-arrow {
    align-self: center;
    margin-top: 0;
  }
}

.page-home .site-footer {
  margin-top: var(--space-10);
}

@media (max-width: 640px) {
  .page-home .site-footer {
    margin-top: var(--space-8);
  }
}

.page-about .nav-item-about > .nav-trigger,
.page-about .nav-item-about > .nav-link { color: var(--color-primary); }

.nav-cta-icon {
  width: 1.125rem;
  height: 1.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-cta-icon svg {
  width: 1.125rem;
  height: 1.125rem;
  display: block;
}

.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.section-cta {
  margin-top: var(--space-10);
  text-align: center;
}

.section-title--left {
  text-align: left;
}

/* ——— Hub page (high-traffic tool directory) ——— */
.page-tools-hub .hero-tool--hub {
  padding-bottom: var(--space-4);
}

.page-tools-hub .hero-tool--hub h1 {
  max-width: none;
  font-size: clamp(1.75rem, 4.5vw, var(--text-4xl));
}

.page-tools-hub .hero-tool--hub .lead--tool {
  max-width: 42rem;
}

.page-tools-hub .hero-tool--hub .lead--meta {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.page-tools-hub .site-footer {
  margin-top: var(--space-10);
}

.hub-all-header {
  margin-bottom: var(--space-8);
}

.hub-all-title {
  margin-bottom: var(--space-2);
  text-align: left;
}

.hub-all-lead {
  margin: 0;
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 40rem;
}

.hub-section-title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-4);
}

.hub-section {
  margin-bottom: var(--space-10);
}

.hub-section--last {
  margin-bottom: var(--space-10);
}

.hub-page .card-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
}

.tool-card--hub {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 10.5rem;
  padding: var(--space-5);
  -webkit-tap-highlight-color: transparent;
}

.tool-card--hub .icon-box--md {
  margin-bottom: var(--space-3);
}

.tool-card--hub h3 {
  font-size: var(--text-base);
  margin-bottom: var(--space-2);
  padding-right: var(--space-8);
}

.tool-card--hub p {
  font-size: var(--text-xs);
  line-height: 1.5;
  flex: 1;
}

.tool-card-badge {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-hover);
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent-muted);
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-full);
}

.hub-prose {
  margin-top: var(--space-10);
  max-width: none;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.hub-prose h2 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-3);
}

.hub-prose p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0;
}

.hub-prose p + p {
  margin-top: var(--space-3);
}

.hub-page {
  padding-top: var(--space-4);
  padding-bottom: var(--space-12);
}

@media (max-width: 640px) {
  .page-tools-hub .hero-tool--hub {
    padding-bottom: var(--space-3);
  }

  .page-tools-hub .hero-tool--hub .lead--tool {
    font-size: var(--text-sm);
  }

  .hub-all-header {
    margin-bottom: var(--space-5);
  }

  .hub-all-lead {
    font-size: var(--text-sm);
  }

  .hub-section-title {
    font-size: var(--text-lg);
  }

  .hub-page .card-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .tool-card--hub {
    min-height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-3) var(--space-4);
    padding: var(--space-4);
  }

  .tool-card--hub .icon-box--md {
    margin-bottom: 0;
    width: 2.75rem;
    height: 2.75rem;
  }

  .tool-card--hub .icon-box--md svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .tool-card--hub h3 {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
    align-self: center;
    font-size: var(--text-base);
  }

  .tool-card--hub p {
    width: 100%;
    flex: none;
    padding-left: calc(2.75rem + var(--space-4));
    margin-top: calc(var(--space-1) * -1);
  }

  .tool-card-badge {
    top: var(--space-3);
    right: var(--space-3);
  }

  .hub-prose {
    padding: var(--space-5);
    margin-top: var(--space-8);
  }

  .page-tools-hub .site-footer {
    margin-top: var(--space-8);
  }
}

.tool-workspace-section {
  padding-top: var(--space-2);
  padding-bottom: var(--space-8);
}

.page-tool main {
  background:
    radial-gradient(ellipse 90% 45% at 50% 0%, rgba(0, 87, 255, 0.04) 0%, transparent 58%),
    var(--color-bg);
}

/* ——— Tool SEO cards (guide + FAQ below workspace) ——— */
.tool-seo-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}

.tool-seo-card + .tool-seo-card {
  margin-top: var(--space-6);
}

.tool-guide-header,
.tool-faq-header {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.tool-faq-header {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
}

.tool-faq-header .tool-faq-title {
  margin-bottom: 0;
}

.tool-guide-eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.tool-guide-title {
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: 1.3;
  margin: 0 0 var(--space-3);
}

.tool-guide-intro {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
  max-width: none;
  line-height: 1.65;
}

.tool-guide-intro:last-of-type {
  margin-bottom: 0;
}

.tool-guide-why,
.tool-guide-tips {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.tool-guide-more {
  margin-top: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  overflow: hidden;
}

.tool-guide-more-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  min-height: 2.75rem;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.tool-guide-more-toggle::-webkit-details-marker {
  display: none;
}

.tool-guide-more-toggle::after {
  content: "+";
  flex-shrink: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1;
}

.tool-guide-more[open] .tool-guide-more-toggle::after {
  content: "−";
}

.tool-guide-more-body {
  padding: 0 var(--space-5) var(--space-5);
  border-top: 1px solid var(--color-border);
}

.tool-guide-more-body .tool-guide-why {
  margin-top: var(--space-4);
}

.tool-guide-more-body .tool-guide-tips {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.tool-guide-subtitle {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: 1.3;
}

.tool-guide-prose {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
}

.tool-guide-prose:last-child {
  margin-bottom: 0;
}

.tool-guide-tips-list {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.tool-guide-tips-list li {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.55;
}

.tool-guide-related {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

.tool-guide-related a {
  font-weight: 600;
  text-decoration: none;
}

.tool-guide-related a:hover {
  text-decoration: underline;
}

.tool-guide-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tool-faq-title {
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
  line-height: 1.3;
}

.tool-guide-step {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.tool-guide-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  background: var(--gradient-brand);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: var(--shadow-brand);
}

.tool-guide-step-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  padding-top: 0.15rem;
}

.tool-guide-step-text strong {
  color: var(--color-text);
  font-weight: 600;
}

.tool-faq .faq-list {
  max-width: none;
  gap: var(--space-3);
}

.tool-faq .faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg);
}

.tool-faq .faq-item > .faq-q {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  min-height: 2.75rem;
  font-weight: 700;
  font-size: var(--text-sm);
  background: var(--color-surface);
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.tool-faq .faq-item > .faq-q::-webkit-details-marker {
  display: none;
}

.tool-faq .faq-item > .faq-q::after {
  content: "+";
  flex-shrink: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1;
}

.tool-faq .faq-item[open] > .faq-q::after {
  content: "−";
}

.tool-faq .faq-item[open] > .faq-q {
  border-bottom: 1px solid var(--color-border);
}

.tool-faq .faq-a {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
}

.tool-mobile-section .tool-seo-card {
  margin-top: var(--space-6);
}

.tool-mobile-section .tool-seo-card + .tool-seo-card {
  margin-top: var(--space-5);
}

.tool-card--soon {
  opacity: 0.55;
  pointer-events: none;
}

/* ——— Tool state nav (mockup) ——— */
.tool-state-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.tool-state-nav-label {
  font-weight: 700;
  color: var(--color-text-subtle);
  margin-right: var(--space-2);
}

.tool-state-link {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  text-decoration: none;
  font-weight: 500;
}

.tool-state-link:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  text-decoration: none;
}

.tool-state-link.is-active {
  background: var(--gradient-brand);
  color: #fff;
  font-weight: 600;
}

.dropzone--hero {
  padding: var(--space-12) var(--space-6);
}

.dropzone-hint {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

.dropzone--compact {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  text-align: left;
  margin-bottom: var(--space-5);
}

.dropzone--compact .icon-box--md {
  margin: 0;
}

.dropzone-compact-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.dropzone-compact-text strong {
  font-size: var(--text-sm);
  color: var(--color-text);
}

.dropzone-compact-text span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.dropzone--disabled {
  opacity: 0.85;
  pointer-events: none;
}

.tool-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  /* Must not sit above the Browse button — first click would hit a 1×1 control and do nothing */
  pointer-events: none;
}

.dropzone--dragover {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle, rgba(59, 130, 246, 0.06));
}

.dropzone--invalid {
  border-color: var(--color-danger, #dc2626);
}

.dropzone-error,
.tool-field-error {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-danger, #dc2626);
}

.dropzone-error[hidden],
.tool-field-error[hidden] {
  display: none;
}

.tool-form-error {
  margin: var(--space-6) 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-danger, #dc2626);
  background: color-mix(in srgb, var(--color-danger, #dc2626) 8%, transparent);
  font-size: var(--text-sm);
  color: var(--color-danger, #dc2626);
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.tool-form-error:not([hidden]) + .tool-actions {
  margin-top: var(--space-4);
}

.tool-form-error[hidden] {
  display: none;
}

.tool-next-steps-error {
  margin: var(--space-3) 0 0;
}

.tool-input--invalid,
.tool-split-ranges-input.tool-input--invalid {
  border-color: var(--color-danger, #dc2626);
  outline-color: var(--color-danger, #dc2626);
}

.progress-block {
  margin-top: var(--space-5);
  min-width: 0;
  max-width: 100%;
}

.progress-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  min-width: 0;
}

.progress-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-percent {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.progress-detail {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ——— Tool step 3 scroll focus (processing / done preview) ——— */
.progress-block,
[data-tool-merge-stages],
[data-tool-preview] {
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

/* ——— Tool workflow stepper (3 steps) ——— */
.merge-stepper,
.tool-stepper {
  display: flex;
  gap: var(--space-1);
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
}

.merge-stepper--compact .merge-step,
.tool-stepper--compact .tool-step {
  flex: 1;
  justify-content: center;
  padding: var(--space-2);
  font-size: 0;
}

.merge-stepper--compact .merge-step-num,
.tool-stepper--compact .tool-step-num {
  margin: 0;
}

.merge-step,
.tool-step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.merge-step-num,
.tool-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: var(--text-xs);
  font-weight: 700;
  flex-shrink: 0;
  position: relative;
}

.merge-step--current,
.tool-step--current {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(0, 87, 255, 0.14);
  color: var(--color-primary);
  font-weight: 700;
}

.merge-step--current .merge-step-num,
.tool-step--current .tool-step-num {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.merge-step--done,
.tool-step--done {
  color: var(--color-accent-hover);
  font-weight: 600;
}

.merge-step--done .merge-step-num,
.tool-step--done .tool-step-num {
  background: var(--color-accent-soft);
  border-color: var(--color-accent-muted);
  color: var(--color-accent-hover);
}

.tool-step--done:not(.tool-step--current) .tool-step-num {
  font-size: 0;
  color: transparent;
}

.tool-step--done:not(.tool-step--current) .tool-step-num::after {
  content: '✓';
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-accent-hover);
}

.tool-step--nav:not(.tool-step--disabled):hover {
  background: var(--color-accent-soft);
  border-color: var(--color-accent-muted);
  box-shadow: inset 0 0 0 1px var(--color-accent-muted);
}

.tool-step--nav:not(.tool-step--disabled):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.tool-step-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.tool-stepper--compact .tool-step-link {
  justify-content: center;
  padding: var(--space-2);
}

.tool-step--nav:hover .tool-step-link {
  background: var(--color-accent-soft);
  box-shadow: inset 0 0 0 1px var(--color-accent-muted);
}

.tool-step--nav .tool-step-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.tool-step:not(.tool-step--disabled):not(.tool-step--current) {
  cursor: pointer;
}

.tool-step--disabled {
  cursor: default;
  opacity: 0.5;
}

.tool-step--disabled .tool-step-num {
  opacity: 0.85;
}

.tool-resume-hint {
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent-muted);
  border-radius: var(--radius-md);
}

.merge-order-preview,
.tool-before-preview {
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  min-width: 0;
  overflow: hidden;
}

.merge-order-preview-head,
.tool-before-preview-head {
  margin-bottom: var(--space-4);
}

.merge-order-preview-title,
.tool-before-preview-title {
  font-size: var(--text-sm);
  font-weight: 700;
  margin: 0 0 var(--space-1);
}

.merge-order-preview-note,
.tool-before-preview-note {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  min-width: 0;
  overflow: hidden;
}

.tool-before-preview-tip {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--color-text-muted);
  max-width: 36rem;
}

.tool-before-preview-filename {
  display: inline-block;
  max-width: min(14rem, 55vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.tool-before-preview-filename--strong {
  font-weight: 700;
  color: inherit;
}

.merge-order-track,
.tool-before-preview-track {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  overflow-x: auto;
  padding-bottom: var(--space-1);
}

.merge-order-group,
.tool-before-preview-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-width: 5.5rem;
}

.merge-order-label,
.tool-before-preview-group-label {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-align: center;
  max-width: 6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.merge-order-count,
.tool-before-preview-group-count {
  font-size: 0.625rem;
  color: var(--color-text-subtle);
}

.merge-order-arrow,
.tool-before-preview-arrow {
  color: var(--color-text-subtle);
  font-size: var(--text-lg);
  padding-bottom: 1.75rem;
  flex-shrink: 0;
}

.tool-before-preview-arrow--rotate {
  font-size: var(--text-sm);
  font-weight: 700;
  padding-bottom: 2.5rem;
  color: var(--color-primary);
}

.merge-page-stack,
.tool-preview-page-stack {
  display: flex;
  gap: 0.2rem;
}

.merge-page-thumb,
.tool-preview-page-thumb {
  display: block;
  width: 1.35rem;
  height: 1.75rem;
  border-radius: 3px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-sm);
}

.merge-page-thumb--more,
.tool-preview-page-thumb--more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  font-weight: 700;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
}

.tool-before-preview--merge .merge-preview-track {
  align-items: flex-end;
  gap: var(--space-4);
  padding-bottom: var(--space-2);
  flex-wrap: wrap;
}

/* First-page / first-slide visual in before-preview (convert tools) */
.tool-before-preview--pdf2ppt .tool-before-preview-slide,
.tool-before-preview--ppt2pdf .tool-before-preview-slide,
.tool-before-preview--excel2pdf .tool-before-preview-slide,
.tool-before-preview--word .tool-before-preview-slide,
.tool-before-preview--word2pdf .tool-before-preview-slide,
.tool-before-preview--crop .tool-before-preview-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  margin-top: var(--space-3);
}

.tool-before-preview--pdf2ppt .tool-before-preview-slide-frame,
.tool-before-preview--ppt2pdf .tool-before-preview-slide-frame,
.tool-before-preview--excel2pdf .tool-before-preview-slide-frame,
.tool-before-preview--word .tool-before-preview-slide-frame,
.tool-before-preview--word2pdf .tool-before-preview-slide-frame,
.tool-before-preview--crop .tool-before-preview-slide-frame {
  position: relative;
  display: block;
  width: min(100%, 18rem);
}

.tool-before-preview--pdf2ppt .tool-before-preview-slide-thumb,
.tool-before-preview--ppt2pdf .tool-before-preview-slide-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  max-height: 12rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  box-shadow:
    0 1px 3px rgb(15 23 42 / 0.08),
    0 8px 20px rgb(15 23 42 / 0.08);
}

.tool-before-preview--excel2pdf .tool-before-preview-slide-thumb,
.tool-before-preview--word .tool-before-preview-slide-thumb,
.tool-before-preview--crop .tool-before-preview-slide-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 210 / 297;
  max-height: 14rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  box-shadow:
    0 1px 3px rgb(15 23 42 / 0.08),
    0 8px 20px rgb(15 23 42 / 0.08);
}

/* Word→PDF: aspect-ratio set inline from detected page size (A4/Letter/landscape). */
.tool-before-preview--word2pdf .tool-before-preview-slide-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 210 / 297;
  max-height: 16rem;
  border-radius: var(--radius-sm);
  background: #fff;
  border: 1px solid var(--color-border-strong);
  box-shadow:
    0 1px 3px rgb(15 23 42 / 0.08),
    0 8px 20px rgb(15 23 42 / 0.08);
}

.tool-before-preview--pdf2ppt .tool-before-preview-slide-thumb .file-page-thumb-inline-img,
.tool-before-preview--ppt2pdf .tool-before-preview-slide-thumb .file-page-thumb-inline-img,
.tool-before-preview--excel2pdf .tool-before-preview-slide-thumb .file-page-thumb-inline-img,
.tool-before-preview--word .tool-before-preview-slide-thumb .file-page-thumb-inline-img,
.tool-before-preview--word2pdf .tool-before-preview-slide-thumb .file-page-thumb-inline-img,
.tool-before-preview--crop .tool-before-preview-slide-thumb .file-page-thumb-inline-img {
  object-fit: contain;
  background: #fff;
}

.tool-before-preview--pdf2ppt .tool-before-preview-slide-caption,
.tool-before-preview--ppt2pdf .tool-before-preview-slide-caption,
.tool-before-preview--excel2pdf .tool-before-preview-slide-caption,
.tool-before-preview--word .tool-before-preview-slide-caption,
.tool-before-preview--word2pdf .tool-before-preview-slide-caption,
.tool-before-preview--crop .tool-before-preview-slide-caption {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-align: center;
}

.tool-crop-page-preview-frame {
  position: relative;
  overflow: hidden;
}

.tool-crop-page-preview-frame .tool-crop-visual-trim {
  z-index: 2;
  pointer-events: none;
}

.tool-crop-page-preview-frame .file-page-thumb-inline-img {
  position: relative;
  z-index: 1;
}

.tool-before-preview--ppt2pdf .tool-before-preview-slide-fallback,
.tool-before-preview--excel2pdf .tool-before-preview-slide-fallback,
.tool-before-preview--word2pdf .tool-before-preview-slide-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 8rem;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

.tool-before-preview--pdf2ppt .tool-before-preview-track--groups {
  margin-top: var(--space-4);
  justify-content: center;
}

.merge-preview-group .tool-before-preview-group-label {
  max-width: 8rem;
}

.merge-preview-cover {
  position: relative;
  flex: 0 0 auto;
  width: 3.25rem;
}

.merge-preview-frame {
  display: block;
  width: 3.25rem;
  height: 4.25rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
}

.merge-preview-cover .file-page-thumb-zoom {
  top: 0.125rem;
  right: 0.125rem;
  width: 1.125rem;
  height: 1.125rem;
}

.merge-preview-cover-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 4.25rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
}

.merge-preview-loading {
  font-size: 0.625rem;
  color: var(--color-text-muted);
  padding: 0.25rem;
  text-align: center;
}

.merge-preview-hint {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* JPG→PDF: real image thumbnails in before-preview strip + file list */
[data-tool-key='jpg'] .file-list-items--inline-thumbs {
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: var(--space-3);
}

@media (min-width: 36rem) {
  [data-tool-key='jpg'] .file-list-items--inline-thumbs {
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  }
}

@media (min-width: 52rem) {
  [data-tool-key='jpg'] .file-list-items--inline-thumbs {
    grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  }
}

[data-tool-key='jpg'] .file-list-items--inline-thumbs .file-item--with-image-thumb.file-item--page-card {
  contain-intrinsic-size: auto 12rem;
  padding: var(--space-2) var(--space-2) var(--space-3);
}

[data-tool-key='jpg'] .file-list-items--inline-thumbs .file-image-thumb-inline,
[data-tool-key='jpg'] .file-list-items--inline-thumbs .file-page-thumb-inline {
  width: 100%;
  max-width: none;
}

[data-tool-key='jpg'] .file-list-items--inline-thumbs .file-image-thumb-frame {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  min-height: 6.5rem;
  background: #fff;
}

[data-tool-key='jpg'] .file-list-items--inline-thumbs .file-image-thumb-frame .file-page-thumb-inline-img {
  object-fit: contain;
}

.tool-before-preview--jpg .jpg-preview-track {
  align-items: flex-end;
  gap: var(--space-4);
  padding-bottom: var(--space-2);
  flex-wrap: wrap;
}

.jpg-preview-group .tool-before-preview-group-label {
  max-width: 10rem;
  font-size: var(--text-xs);
}

.jpg-preview-cover {
  position: relative;
  flex: 0 0 auto;
  width: 5.5rem;
}

.jpg-preview-frame {
  display: block;
  width: 5.5rem;
  height: auto;
  aspect-ratio: 4 / 3;
  min-height: 4.125rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-border);
}

@media (min-width: 36rem) {
  .jpg-preview-cover,
  .jpg-preview-frame {
    width: 6.5rem;
  }
}

.jpg-preview-cover .file-page-thumb-inline-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tool-before-preview--jpg .tool-before-preview-group {
  min-width: 6.5rem;
}

.tool-before-preview--jpg .tool-before-preview-arrow {
  padding-bottom: 2.75rem;
}

.jpg-preview-cover .file-page-thumb-zoom {
  width: 1.25rem;
  height: 1.25rem;
}

.file-list-items--inline-thumbs .file-image-thumb-inline {
  position: relative;
  flex: 0 0 auto;
  width: 4.5rem;
}

.file-list-items--inline-thumbs .file-image-thumb-frame {
  display: block;
  width: 4.5rem;
  height: 3.25rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
}

.file-list-items--inline-thumbs .file-image-thumb-frame .file-page-thumb-inline-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.file-item--with-image-thumb .file-meta--size {
  color: var(--color-text-subtle);
}

.tool-jpg-layout-preview-host {
  margin-top: var(--space-4);
}

.tool-jpg-layout-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.tool-jpg-layout-preview-stage {
  width: min(100%, 20rem);
}

.tool-jpg-layout-preview-sheet {
  /* Keep paper aspect under max-height — width:100% + max-height used to crush
     portrait sheets so Auto↔Portrait looked identical for tall photos. */
  position: relative;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 22rem;
  margin-inline: auto;
  background: #fff;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.tool-jpg-layout-preview-sheet--fit {
  max-height: none;
}

.tool-jpg-layout-preview-margin {
  position: absolute;
  box-sizing: border-box;
  border: 1px dashed color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 4%, #fff);
}

.tool-jpg-layout-preview-image {
  position: absolute;
  object-fit: contain;
  background: #fff;
}

.tool-jpg-layout-preview-note {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  max-width: 20rem;
}

.tool-jpg-layout-preview--loading .tool-jpg-layout-preview-note {
  padding: var(--space-3) 0;
}

.tool-preview-out-file {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

.tool-preview-page-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 2rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
}

.tool-preview-out-label {
  font-size: 0.625rem;
  color: var(--color-text-subtle);
  max-width: 3.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-preview-out-file--more .tool-preview-page-chip {
  background: var(--color-surface-2);
}

.tool-preview-image-chip {
  display: block;
  width: 2.5rem;
  height: 1.75rem;
  border-radius: 3px;
  background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-sm);
}

.tool-preview-image-chip--landscape {
  width: 2.75rem;
  height: 1.5rem;
}

.tool-preview-image-chip--more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  font-weight: 700;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
}

.tool-before-preview-rotate {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-2) 0;
}

.tool-before-preview-rotate-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.tool-before-preview-rotate-label {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-subtle);
}

.tool-preview-page-mock {
  width: 4.5rem;
  min-height: 5.5rem;
  padding: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.tool-preview-page-mock--rotated,
.tool-preview-page-mock--rotated-right {
  transform: rotate(90deg);
  margin: 0.75rem;
}

.tool-preview-page-mock--rotated-left {
  transform: rotate(-90deg);
  margin: 0.75rem;
}

.tool-preview-page-mock--rotated-180 {
  transform: rotate(180deg);
  margin: 0.5rem;
}

.tool-preview-page-mock-num {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--color-text-subtle);
  margin-bottom: var(--space-2);
}

.tool-preview-page-mock-lines {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.tool-preview-page-mock-lines span {
  display: block;
  height: 0.35rem;
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
}

.tool-preview-page-mock-lines span:nth-child(1) { width: 92%; }
.tool-preview-page-mock-lines span:nth-child(2) { width: 70%; }
.tool-preview-page-mock-lines span:nth-child(3) { width: 55%; }

.merge-options {
  margin-top: var(--space-6);
}

.merge-options-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.merge-options-input {
  width: 100%;
  max-width: 20rem;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--text-sm);
  background: var(--color-surface);
}

.merge-options-input:focus {
  outline: 2px solid var(--color-primary-muted);
  border-color: var(--color-primary);
}

.merge-stage-list {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.merge-stage {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  min-width: 0;
  max-width: 100%;
}

.merge-stage-text {
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.merge-stage--done {
  background: var(--color-accent-soft);
  color: var(--color-accent-hover);
}

.merge-stage--active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 600;
}

.merge-stage-icon {
  width: 1.25rem;
  text-align: center;
  font-weight: 700;
  flex-shrink: 0;
}

.merge-stage-icon--pending {
  color: var(--color-text-subtle);
}

.merge-stage-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--color-primary-muted);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: merge-spin 0.8s linear infinite;
  flex-shrink: 0;
}

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

.merge-result,
.tool-result {
  padding: var(--space-6) var(--space-5) var(--space-8);
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}

.merge-result-header,
.tool-result-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
  text-align: left;
  min-width: 0;
  max-width: 100%;
}

.merge-result-copy,
.tool-result-copy {
  flex: 1;
  min-width: 0;
  max-width: 100%;
}

.merge-result-header .tool-success-icon,
.tool-result-header .tool-success-icon {
  margin: 0;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
}

.merge-result-copy h2,
.tool-result-copy h2 {
  font-size: var(--text-2xl);
  margin: 0 0 var(--space-2);
}

.merge-result-stats,
.tool-result-stats {
  margin: 0 0 var(--space-2);
  color: var(--color-text);
  font-size: var(--text-base);
  min-width: 0;
  max-width: 100%;
}

.merge-result-stats .tool-before-preview-filename,
.tool-result-stats .tool-before-preview-filename {
  max-width: min(18rem, 100%);
}

.merge-result-breakdown,
.tool-result-breakdown {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  min-width: 0;
  max-width: 100%;
}

.tool-result-filename-trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  min-width: 0;
  max-width: 100%;
}

.tool-result-filename-trail-sep {
  flex-shrink: 0;
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
}

.tool-result-filename-trail-item {
  min-width: 0;
  max-width: 100%;
}

.tool-result-filename-trail .tool-before-preview-filename {
  max-width: min(11rem, 42vw);
}

.tool-trunc-line {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.merge-result-body,
.tool-result-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
  min-width: 0;
  max-width: 100%;
}

@media (min-width: 901px) {
  .merge-result-body,
  .tool-result-body {
    grid-template-columns: 1fr 280px;
  }
}

.merge-preview,
.tool-preview {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.merge-preview-toolbar,
.tool-preview-toolbar,
.tool-preview-classic-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-xs);
  min-width: 0;
  max-width: 100%;
}

.merge-preview-label,
.tool-preview-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-subtle);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-preview-expand {
  margin-left: auto;
  flex-shrink: 0;
}

.merge-preview-page-indicator strong,
.tool-preview-page-indicator strong {
  color: var(--color-primary);
}

.tool-preview-pager {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex: 0 0 auto;
}

.tool-preview-goto {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted, #5b6472);
  white-space: nowrap;
}

.tool-preview-goto-prefix {
  font-weight: 500;
  color: var(--color-text, #1f2937);
}

.tool-preview-goto-input {
  width: 3.25rem;
  min-width: 2.75rem;
  padding: 0.2rem 0.35rem;
  border: 1px solid var(--color-border, #d1d5db);
  border-radius: var(--radius-sm, 6px);
  background: var(--color-surface, #fff);
  color: var(--color-text, #1f2937);
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: center;
  line-height: 1.25;
}

.tool-preview-goto-input:focus {
  outline: 2px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
  outline-offset: 1px;
}

.tool-preview-goto-input::-webkit-outer-spin-button,
.tool-preview-goto-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.tool-preview-goto-input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.tool-preview-pager .tool-preview-page-indicator {
  font-variant-numeric: tabular-nums;
}

.tool-preview-pager-btn {
  min-width: 2rem;
  padding-inline: var(--space-2);
  font-size: 1.1rem;
  line-height: 1;
}

.tool-preview-pager-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.tool-preview--archive:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
  outline-offset: 2px;
}

.tool-preview--classic {
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
}

.tool-preview-classic-bar {
  padding: var(--space-2) var(--space-4);
}

.tool-preview-classic-frame {
  position: relative;
  width: 100%;
  min-height: min(65vh, 42rem);
  background: #525659;
}

.tool-preview-classic-frame--archive {
  min-height: min(55vh, 36rem);
}

.tool-preview--archive .tool-preview-classic-frame--archive:not([hidden]) + .tool-preview-canvas--archive {
  display: none;
}

.tool-preview--archive .tool-preview-classic-frame--archive:not([hidden]) .tool-pdfjs-iframe {
  height: min(55vh, 36rem);
}

.tool-pdfjs-iframe {
  display: block;
  width: 100%;
  height: min(65vh, 42rem);
  border: 0;
  background: #525659;
}

.tool-pdfjs-iframe--expanded {
  height: 100%;
  min-height: min(80vh, 56rem);
}

.tool-pdfjs-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 1000);
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.tool-pdfjs-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.55);
}

.tool-pdfjs-lightbox-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(96vw, 72rem);
  max-height: 92vh;
  margin: 4vh auto;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.tool-pdfjs-lightbox-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.tool-pdfjs-lightbox-body {
  flex: 1;
  min-height: 0;
  background: #525659;
}

body.tool-pdfjs-lightbox-open {
  overflow: hidden;
}

.tool-preview-canvas--pdfjs {
  position: relative;
  padding: 0;
  display: block;
  overflow: hidden;
  min-height: min(42vh, 24rem);
}

.tool-pdfjs-viewer {
  position: absolute;
  inset: 0;
  overflow: auto;
  width: 100%;
}

.tool-preview--pdfjs .tool-pdfjs-viewer .pdfViewer .page {
  margin: var(--space-4) auto;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}

.merge-preview-canvas,
.tool-preview-canvas {
  padding: var(--space-4);
  background: #e8edf3;
  min-height: min(42vh, 24rem);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tool-preview-stage {
  width: 100%;
  max-width: 32rem;
  aspect-ratio: 1 / 1.414;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  justify-content: center;
  position: relative;
}

.tool-preview-stage--loading::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-sm);
  background: rgba(232, 237, 243, 0.72);
  pointer-events: none;
}

.tool-preview-render-canvas {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.tool-preview-stage--expanded {
  max-width: min(92vw, 40rem);
  aspect-ratio: 1 / 1.414;
  margin: 0 auto;
}

.merge-preview-page,
.tool-preview-page {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.tool-preview-page--a4 {
  aspect-ratio: 1 / 1.414;
}

.merge-preview-page-num,
.tool-preview-page-num {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-subtle);
  margin-bottom: var(--space-3);
}

.merge-preview-page-lines,
.tool-preview-page-lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.merge-preview-page-lines span,
.tool-preview-page-lines span {
  display: block;
  height: 0.45rem;
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
}

.merge-preview-page-lines span:nth-child(1),
.tool-preview-page-lines span:nth-child(1) { width: 92%; }
.merge-preview-page-lines span:nth-child(2),
.tool-preview-page-lines span:nth-child(2) { width: 78%; }
.merge-preview-page-lines span:nth-child(3),
.tool-preview-page-lines span:nth-child(3) { width: 85%; }
.merge-preview-page-lines span:nth-child(4),
.tool-preview-page-lines span:nth-child(4) { width: 60%; }

.merge-preview-thumbs,
.tool-preview-thumbs {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-gutter: stable;
}

.tool-preview--archive .tool-preview-thumbs--top {
  border-top: 0;
  border-bottom: 1px solid var(--color-border);
}

/* PDF → PowerPoint: light stage + bottom filmstrip (match other result previews) */
.tool-preview-canvas--slide {
  min-height: min(52vh, 34rem);
  padding: var(--space-5) var(--space-4);
  background: #e8edf3;
}

.tool-preview-stage--slide {
  width: min(100%, 48rem);
  max-width: 48rem;
  aspect-ratio: auto;
  min-height: 0;
  align-items: center;
}

.tool-preview-slide-frame {
  position: relative;
  width: 100%;
  max-width: 48rem;
  margin: 0 auto;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  box-shadow:
    0 1px 3px rgb(15 23 42 / 0.08),
    0 10px 28px rgb(15 23 42 / 0.1);
  overflow: hidden;
}

.tool-preview-slide-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(48vh, 30rem);
  object-fit: contain;
  background: #fff;
}

.tool-preview-stage--expanded .tool-preview-slide-image {
  max-height: min(78vh, 52rem);
}

.tool-preview-slide-badge {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgb(15 23 42 / 0.72);
  color: #f9fafb;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
}

.tool-preview-thumbs--filmstrip {
  border-top: 1px solid var(--color-border);
  border-bottom: 0;
  background: var(--color-bg-elevated);
  padding: var(--space-3) var(--space-4);
  gap: var(--space-3);
}

.tool-preview--slide .tool-preview-thumb--image {
  width: 5.5rem;
  min-width: 5.5rem;
  height: 3.15rem;
  border-radius: 3px;
  border-color: var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.tool-preview--slide .tool-preview-thumb--image img {
  object-fit: cover;
}

.tool-preview--slide .tool-preview-thumb--active,
.tool-preview--slide .tool-preview-thumb--image.tool-preview-thumb--active {
  border-color: var(--color-primary);
  outline: 2px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
  outline-offset: 1px;
  background: var(--color-primary-soft);
}

.merge-preview-thumb,
.tool-preview-thumb {
  flex: 0 0 auto;
  scroll-snap-align: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
}

.tool-preview-canvas--text {
  min-height: min(32vh, 18rem);
  max-height: 24rem;
  align-items: stretch;
}

.tool-preview-text-body {
  width: 100%;
  max-width: 32rem;
  max-height: 20rem;
  margin: 0 auto;
  padding: var(--space-4);
  overflow: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--text-sm);
  line-height: 1.55;
  white-space: pre-wrap;
  color: var(--color-text);
}

.tool-preview-stage .tool-preview-text-body.tool-preview-render-canvas {
  max-width: none;
  width: 100%;
  height: 100%;
  max-height: none;
  margin: 0;
}

.tool-preview-canvas--docx {
  min-height: min(40vh, 24rem);
  max-height: min(65vh, 36rem);
  overflow: auto;
  background: #cbd5e1;
  padding: var(--space-3);
  align-items: flex-start;
  justify-content: center;
}

.tool-preview-stage--docx {
  width: 100%;
  max-width: none;
  aspect-ratio: auto;
  height: auto;
  min-height: 0;
  margin: 0;
  display: block;
}

.tool-preview-docx-body {
  width: 100%;
}

/* Let docx-preview page cards show gray gaps between sheets (see vendor default styles too). */
.tool-preview--docx .docx-wrapper,
.tool-preview--docx .tool-docx-preview-wrapper,
.tool-preview--docx .tool-preview-docx-body,
.tool-preview--docx .tool-docx-preview {
  padding: var(--space-2) var(--space-1) var(--space-4);
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
}

/* Page cards — sections live inside docx-preview wrapper div. */
.tool-preview--docx .docx-wrapper > section.docx,
.tool-preview--docx .tool-docx-preview-wrapper > section.docx,
.tool-preview--docx .tool-preview-docx-body > section.docx,
.tool-preview--docx .tool-docx-preview > section.docx {
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.12),
    0 8px 28px rgba(15, 23, 42, 0.1);
  border-radius: 2px;
  background: #fff;
  width: min(100%, 816px);
  max-width: 816px;
  margin-inline: auto;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-sizing: border-box;
  overflow: visible;
  height: auto !important;
  min-height: 0;
  max-height: none !important;
}

/* Keep all text inside the page card — content must not spill past page edges. */
.tool-preview--docx .docx-wrapper > section.docx > article,
.tool-preview--docx .tool-docx-preview-wrapper > section.docx > article,
.tool-preview--docx .tool-preview-docx-body > section.docx > article,
.tool-preview--docx .tool-docx-preview > section.docx > article {
  padding: 0 !important;
  box-sizing: border-box;
  min-height: auto;
  overflow: hidden !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  height: auto !important;
  max-height: none !important;
}

.tool-preview--docx section.docx p,
.tool-preview--docx section.docx span {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.tool-preview--docx .docx-wrapper > section.docx:last-child,
.tool-preview--docx .tool-docx-preview-wrapper > section.docx:last-child,
.tool-preview--docx .tool-preview-docx-body > section.docx:last-child,
.tool-preview--docx .tool-docx-preview > section.docx:last-child {
  margin-bottom: 0;
}

.tool-preview--docx .docx-wrapper > section.docx img,
.tool-preview--docx .tool-docx-preview-wrapper > section.docx img,
.tool-preview--docx .tool-preview-docx-body > section.docx img,
.tool-preview--docx .tool-docx-preview > section.docx img {
  max-width: 100%;
  height: auto;
}

.tool-preview--docx .docx-wrapper p {
  line-height: inherit;
  margin-block: 0;
}

.tool-preview-docx-note {
  margin: 0;
  padding: 0 var(--space-4) var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  line-height: 1.45;
}

.tool-preview-lightbox-body--docx {
  overflow: auto;
  max-height: min(80vh, 56rem);
  padding: var(--space-4);
  background: #cbd5e1;
}

.tool-docx-preview--expanded.docx-wrapper,
.tool-docx-preview--expanded.tool-docx-preview-wrapper,
.tool-docx-preview--expanded.tool-preview-docx-body,
.tool-docx-preview--expanded.tool-docx-preview {
  padding: var(--space-4) var(--space-3) var(--space-5);
}

.tool-docx-preview--expanded.docx-wrapper > section.docx,
.tool-docx-preview--expanded.tool-docx-preview-wrapper > section.docx,
.tool-docx-preview--expanded.tool-preview-docx-body > section.docx,
.tool-docx-preview--expanded.tool-docx-preview > section.docx {
  margin-bottom: 1.75rem;
}

.tool-preview--text .tool-preview-thumbs {
  display: none;
}

.tool-preview-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.tool-preview-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.72);
}

.tool-preview-lightbox-panel {
  position: relative;
  z-index: 1;
  width: min(96vw, 44rem);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.tool-preview-lightbox-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-2);
}

.tool-preview-lightbox-title {
  font-size: var(--text-sm);
  font-weight: 700;
}

.tool-preview-lightbox-body {
  padding: var(--space-4);
  overflow: auto;
  background: #e8edf3;
}

.tool-preview-lightbox--slide .tool-preview-lightbox-body {
  background: #e8edf3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tool-preview-lightbox--text .tool-preview-lightbox-body {
  background: var(--color-surface);
}

.tool-preview-text-body--expanded {
  max-height: none;
  max-width: none;
  border: none;
  padding: var(--space-4);
}

body.tool-preview-lightbox-open {
  overflow: hidden;
}

@media (max-width: 900px) {
  .tool-preview-canvas {
    min-height: min(40vh, 20rem);
  }

  .tool-preview-stage {
    max-width: 100%;
  }
}

.merge-preview-thumb--active,
.tool-preview-thumb--active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.tool-preview-thumb--image {
  min-width: 3.5rem;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  overflow: hidden;
}

.tool-preview-thumb--image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.merge-preview-thumb-more,
.tool-preview-thumb-more {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

.merge-result-side,
.tool-result-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.merge-result-actions,
.tool-result-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.merge-result-actions .btn-lg,
.tool-result-actions .btn-lg {
  width: 100%;
}

.merge-result-actions .btn-secondary,
.merge-result-actions .btn-ghost,
.tool-result-actions .btn-secondary,
.tool-result-actions .btn-ghost {
  width: 100%;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-5);
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.btn-ghost:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
  text-decoration: none;
}

.merge-result .tool-success-note,
.tool-result .tool-success-note {
  align-self: flex-start;
}

.merge-next-steps,
.tool-next-steps {
  margin-top: var(--space-8);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
}

.merge-next-steps-head,
.tool-next-steps-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}

.merge-next-steps-title,
.tool-next-steps-title {
  font-size: var(--text-sm);
  font-weight: 700;
  margin: 0;
}

.merge-next-steps-note,
.tool-next-steps-note {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

.merge-next-steps-grid,
.tool-next-steps-grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 640px) {
  .merge-next-steps-grid,
  .tool-next-steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
  }

  .tool-next-steps-grid--3col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .tool-next-steps-grid--3col {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.tool-next-steps-grid--3col .tool-next-link,
.tool-next-steps-grid--3col .merge-next-link {
  white-space: normal;
}

.merge-next-steps-group,
.tool-next-steps-group {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.merge-next-steps-list,
.tool-next-steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tool-next-steps-expand {
  margin-top: var(--space-4);
}

.tool-next-steps-expand-trigger {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  list-style: none;
}

.tool-next-steps-expand-trigger::-webkit-details-marker {
  display: none;
}

.tool-next-steps-expand-trigger::before {
  content: '+ ';
  color: var(--color-primary);
}

.tool-next-steps-expand[open] .tool-next-steps-expand-trigger::before {
  content: '− ';
}

.tool-next-steps-expand-trigger:hover {
  color: var(--color-primary);
}

.tool-next-steps-list--more {
  margin-top: var(--space-3);
}

.merge-next-link,
.tool-next-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  white-space: nowrap;
}

.merge-next-link:hover,
.tool-next-link:hover {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-muted);
  color: var(--color-primary);
  text-decoration: none;
}

.merge-next-link--soon,
.tool-next-link--soon {
  opacity: 0.55;
  pointer-events: none;
}

.merge-result--mobile .merge-next-steps,
.merge-result--mobile .tool-next-steps,
.tool-result--mobile .merge-next-steps,
.tool-result--mobile .tool-next-steps {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  text-align: left;
}

.merge-result--mobile .merge-next-steps-head,
.merge-result--mobile .tool-next-steps-head,
.tool-result--mobile .merge-next-steps-head,
.tool-result--mobile .tool-next-steps-head {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.tool-processing {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.file-list--readonly {
  opacity: 0.85;
  pointer-events: none;
}

.file-list--readonly .file-item {
  cursor: default;
}

.file-list--readonly .file-remove {
  display: none;
}

.merge-result--mobile,
.tool-result--mobile {
  text-align: center;
}

.merge-result--mobile .merge-preview,
.merge-result--mobile .tool-preview,
.tool-result--mobile .merge-preview,
.tool-result--mobile .tool-preview {
  margin: var(--space-4) 0;
  text-align: left;
}

.merge-result--mobile .merge-result-stats,
.merge-result--mobile .tool-result-stats,
.tool-result--mobile .merge-result-stats,
.tool-result--mobile .tool-result-stats {
  margin-bottom: var(--space-4);
}

.tool-success {
  text-align: center;
  padding: var(--space-12) var(--space-6);
}

.tool-success-icon {
  width: 4rem;
  height: 4rem;
  margin: 0 auto var(--space-5);
  color: var(--color-accent);
}

.tool-success-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.tool-success h2 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-3);
}

.tool-success p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
}

.tool-success-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-bottom: var(--space-6);
}

.tool-success-note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-accent-hover);
  background: var(--color-accent-soft);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
}

/* ——— About page ——— */
.about-hero {
  background: var(--gradient-brand-soft);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-16) 0 var(--space-12);
}

.about-hero-inner {
  max-width: 40rem;
}

.about-hero h1 {
  font-size: var(--text-3xl);
  margin-top: var(--space-4);
}

.about-story {
  padding: var(--space-16) 0 var(--space-20);
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--space-12);
  align-items: start;
}

.about-prose h2 {
  font-size: var(--text-xl);
  margin: var(--space-10) 0 var(--space-4);
}

.about-prose h2:first-child {
  margin-top: 0;
}

.about-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-5);
}

.about-card h3 {
  font-size: var(--text-base);
  margin-bottom: var(--space-4);
}

.about-facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.about-facts div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-sm);
}

.about-facts dt {
  color: var(--color-text-muted);
  font-weight: 500;
}

.about-facts dd {
  color: var(--color-text);
  font-weight: 600;
  text-align: right;
}

.about-card--brand {
  text-align: center;
}

.about-logo {
  margin: 0 auto var(--space-4);
}

.about-tagline {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr;
  }
}

/* ——— Page shells (no inline styles) ——— */
.page-shell {
  padding: var(--page-header-top) var(--space-6) var(--space-16);
}

.page-shell--blog {
  padding-bottom: var(--space-16);
}

.page-title {
  font-size: var(--text-3xl);
  margin: 0 0 var(--space-2);
}

.page-meta {
  color: var(--color-text-muted);
  margin-bottom: var(--space-10);
}

.page-lead {
  color: var(--color-text-muted);
  max-width: var(--content-max);
  line-height: 1.65;
  margin-bottom: var(--space-8);
}

.prose--legal {
  max-width: none;
}

.prose--after-card {
  margin-top: var(--space-12);
}

.contact-card-title {
  font-size: var(--text-lg);
}

.contact-card-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

.contact-card-note {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  margin-top: var(--space-6);
}

.article-title {
  font-size: var(--text-3xl);
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}

.ad-in-article {
  margin: var(--space-8) 0;
}

.article-cta {
  margin-top: var(--space-8);
  padding: var(--space-4) var(--space-5);
  background: var(--color-primary-soft);
  border-radius: var(--radius-md);
  border: 1px solid #bfdbfe;
}

.error-back {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
}

.cookie-demo-note {
  margin-top: var(--space-8);
  color: var(--color-text-muted);
  max-width: 50ch;
}

.cookie-demo-prose {
  padding-bottom: var(--space-32);
}

/* ——— Tool options (split) ——— */
.tool-options {
  position: relative;
  margin: var(--space-6) 0;
  padding: var(--space-3) var(--space-4) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
}

.tool-options-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  float: none;
  padding: 0;
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
}

.tool-options--collapsible > .tool-options-label {
  cursor: pointer;
  user-select: none;
}

.tool-options-label-text {
  min-width: 0;
  flex: 1 1 auto;
}

.tool-options-body > :first-child {
  margin-top: 0;
}

.tool-options-collapse-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
}

.tool-options-collapse-btn:hover {
  color: var(--color-text);
  background: var(--color-surface-2);
}

.tool-options-collapse-icon {
  display: block;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
  margin-top: -0.1rem;
}

.tool-options--collapsed .tool-options-collapse-icon {
  transform: rotate(-45deg);
  margin-top: 0.1rem;
}

.tool-options--collapsed {
  padding-block: var(--space-2);
}

.tool-options--collapsed > .tool-options-label {
  margin-bottom: 0;
}

.tool-options--collapsed > .tool-options-body {
  display: none;
}

.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;
}

.tool-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  cursor: pointer;
}

.tool-option-hint {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
}

.tool-option--stacked {
  align-items: flex-start;
}

.tool-option--stacked > input[type="radio"] {
  flex-shrink: 0;
  margin-top: 0.15em;
}

.tool-option-copy {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.tool-option-title {
  color: var(--color-text);
  font-weight: 500;
  line-height: 1.4;
}

.tool-option-detail {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  line-height: 1.45;
}

.tool-pdf2jpg-quality-hint {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  line-height: 1.5;
}

/* Split mode — ranges / every-N inputs + triple preview (mockup: CSS :has toggle) */
[data-tool-key='split'] .tool-split-options {
  margin-bottom: var(--space-4);
}

.tool-split-ranges,
.tool-split-every-n {
  display: none;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.tool-split-options:has(#split-mode-ranges:checked) .tool-split-ranges {
  display: block;
}

.tool-pdf2jpg-options:has(#pdf2jpg-mode-ranges:checked) .tool-split-ranges {
  display: block;
}

.tool-pdf2ppt-options:has(#pdf2ppt-mode-ranges:checked) .tool-split-ranges {
  display: block;
}

.tool-split-options:has(#split-mode-every-n:checked) .tool-split-every-n {
  display: block;
}

.tool-split-hint-all {
  display: none;
  margin-top: var(--space-3);
}

.tool-split-options:has(#split-mode-all:checked) .tool-split-hint-all {
  display: block;
}

.tool-split-ranges-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.tool-split-ranges-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
}

.tool-split-ranges-input:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  border-color: var(--color-primary-muted);
}

.tool-split-ranges-hint {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.tool-metadata-list {
  margin: var(--space-3) 0 0;
  padding-left: 1.25rem;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.6;
}

.tool-metadata-list li + li {
  margin-top: var(--space-1);
}

.tool-metadata-status,
.tool-metadata-empty {
  list-style: none;
  margin-left: -1.25rem;
  color: var(--color-text-subtle);
}

.tool-split-preview-panel--ranges,
.tool-split-preview-panel--every-n {
  display: none;
}

.tool-split-options:has(#split-mode-ranges:checked) + .tool-split-preview .tool-split-preview-panel--all {
  display: none;
}

.tool-split-options:has(#split-mode-ranges:checked) + .tool-split-preview .tool-split-preview-panel--ranges {
  display: block;
}

.tool-split-options:has(#split-mode-every-n:checked) + .tool-split-preview .tool-split-preview-panel--all {
  display: none;
}

.tool-split-options:has(#split-mode-every-n:checked) + .tool-split-preview .tool-split-preview-panel--every-n {
  display: block;
}

.tool-before-preview-track--groups {
  flex-wrap: wrap;
  gap: var(--space-3);
}

.tool-preview-page-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  justify-content: center;
}

.rotate-controls {
  margin: var(--space-6) 0;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
}

.rotate-controls-label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.rotate-controls-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.rotate-angle-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.rotate-angle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.rotate-angle-btn input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.rotate-angle-btn:has(input:checked) {
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-color: var(--color-primary-muted);
  box-shadow: inset 0 0 0 1px var(--color-primary-muted);
}

.rotate-angle-btn:has(input:focus-visible) {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.tool-rotate-preview-panel--left,
.tool-rotate-preview-panel--180 {
  display: none;
}

.rotate-controls:has(#rotate-angle-left:checked) + .tool-rotate-preview .tool-rotate-preview-panel--right,
.rotate-controls:has(#rotate-angle-left:checked) + .tool-rotate-preview .tool-rotate-preview-panel--180 {
  display: none;
}

.rotate-controls:has(#rotate-angle-left:checked) + .tool-rotate-preview .tool-rotate-preview-panel--left {
  display: block;
}

.rotate-controls:has(#rotate-angle-180:checked) + .tool-rotate-preview .tool-rotate-preview-panel--right,
.rotate-controls:has(#rotate-angle-180:checked) + .tool-rotate-preview .tool-rotate-preview-panel--left {
  display: none;
}

.rotate-controls:has(#rotate-angle-180:checked) + .tool-rotate-preview .tool-rotate-preview-panel--180 {
  display: block;
}

.rotate-controls-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ——— Progress bar data attr ——— */
.progress-bar-fill[data-progress="65"] { width: 65%; }

/* ——— Dropzone pulse (mockup hint) ——— */
@keyframes dropzone-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 87, 255, 0.12); }
  50% { box-shadow: 0 0 0 10px rgba(0, 87, 255, 0); }
}

.dropzone--hero {
  animation: dropzone-pulse 2.8s ease-in-out infinite;
}

.dropzone--hero:hover,
.dropzone--hero:focus-within {
  animation: none;
}

/* Tool landing (empty) — tighter hero, upload zone above the fold for search traffic */
.page-tool .hero-tool--landing {
  padding-bottom: var(--space-3);
}

.page-tool .hero-tool--landing h1 {
  font-size: clamp(1.625rem, 4vw, var(--text-3xl));
  line-height: 1.15;
}

.page-tool .hero-tool--landing .lead--tool {
  font-size: var(--text-base);
}

.tool-workspace-section--landing .tool-state-nav {
  margin-bottom: var(--space-3);
}

.tool-panel--landing .dropzone--hero {
  padding: var(--space-14) var(--space-6);
  min-height: 17.5rem;
}

.dropzone-hint--mobile {
  margin-top: var(--space-2);
  margin-bottom: var(--space-4);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
}

@media (max-width: 767px) {
  /* Mockup-only state switcher — hidden on mobile (production has no this bar) */
  .tool-state-nav {
    display: none;
  }

  .page-tool .hero-tool--landing {
    padding-bottom: var(--space-2);
  }

  .page-tool .hero-tool.hero-compact {
    padding-bottom: var(--space-2);
  }

  .page-tool .hero-tool--landing h1 {
    font-size: 1.5rem;
  }

  .page-tool .breadcrumb {
    font-size: var(--text-xs);
    margin-bottom: var(--space-2);
  }

  .page-tool .lead-trust {
    white-space: normal;
  }

  /* 3-step stepper stays horizontal + compact (saves ~90px vs column stack) */
  .page-tool .tool-stepper,
  .page-tool .merge-stepper {
    flex-direction: row;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
  }

  .page-tool .tool-step,
  .page-tool .merge-step {
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-1);
    font-size: 0.625rem;
    text-align: center;
    gap: var(--space-1);
    line-height: 1.2;
  }

  .page-tool .tool-step-num,
  .page-tool .merge-step-num {
    margin: 0;
  }

  .page-tool .tool-panel:not(.tool-panel--mobile):not(:has(> .tool-result)) {
    padding: var(--space-5);
  }

  .tool-panel--landing .dropzone--hero {
    padding: var(--space-8) var(--space-4);
    min-height: 12rem;
  }

  .page-tool .tool-actions {
    flex-direction: column;
  }

  .page-tool .tool-actions .btn {
    width: 100%;
  }
}

/* ——— Mobile preview + tool mobile layout ——— */
body.mobile-preview {
  background: #1e293b;
  padding: var(--space-6) 0;
}

.hero-tool--mobile {
  padding: var(--space-6) 0 var(--space-4);
}

.hero-tool--mobile h1 {
  font-size: 1.625rem;
}

.hero-tool--mobile .privacy-badge {
  font-size: var(--text-xs);
}

.tool-mobile-section {
  padding-bottom: var(--space-8);
}

@media (max-width: 767px) {
  .page-tool .tool-seo-card {
    padding: var(--space-5);
  }

  .page-tool .tool-guide-title,
  .page-tool .tool-faq-title {
    font-size: var(--text-lg);
  }

  .page-tool .tool-guide-intro {
    font-size: var(--text-sm);
  }

  .page-tool .tool-guide-step {
    padding: var(--space-3) var(--space-4);
  }

  .page-tool .tool-guide-step-text,
  .page-tool .tool-faq .faq-q,
  .page-tool .tool-faq .faq-a {
    font-size: var(--text-sm);
  }

  .page-tool .tool-faq .faq-q,
  .page-tool .tool-faq .faq-a {
    padding: var(--space-3) var(--space-4);
  }

  .tool-mobile-section .tool-seo-card {
    padding: var(--space-4);
  }

  .tool-mobile-section .tool-guide-title,
  .tool-mobile-section .tool-faq-title {
    font-size: 1.0625rem;
  }

  .tool-mobile-section .tool-guide-intro {
    font-size: var(--text-xs);
    line-height: 1.55;
  }

  .tool-mobile-section .tool-guide-step-num {
    width: 1.5rem;
    height: 1.5rem;
    font-size: var(--text-xs);
  }

  .tool-mobile-section .tool-faq .faq-q {
    font-size: var(--text-xs);
    padding: var(--space-3);
  }

  .tool-mobile-section .tool-faq .faq-a {
    font-size: var(--text-xs);
    padding: var(--space-3);
    line-height: 1.55;
  }

  .tool-mobile-section .ad-in-article {
    margin-top: var(--space-5);
  }
}

.tool-panel--mobile {
  padding: var(--space-5);
}

.dropzone--mobile {
  padding: var(--space-8) var(--space-4);
}

.dropzone--mobile h2 {
  font-size: var(--text-lg);
}

.dropzone--mobile p {
  font-size: var(--text-xs);
}

.dropzone--mobile .btn {
  width: 100%;
  margin-top: var(--space-2);
}

.tool-actions--mobile {
  flex-direction: column;
}

.tool-actions--mobile .btn {
  width: 100%;
}

.file-list--mobile {
  margin-top: var(--space-4);
}

.ad-mobile--stack {
  display: flex;
  margin-top: var(--space-6);
}

.prose--mobile-below {
  margin-top: var(--space-8);
}

.prose--mobile-below h2 {
  font-size: var(--text-xl);
}

.prose--mobile-below p {
  font-size: var(--text-sm);
}

.tool-state-nav--mobile {
  margin: var(--space-3) var(--space-4) var(--space-4);
}

.tool-mobile-processing {
  padding: var(--space-6) var(--space-4);
  text-align: center;
}

.tool-mobile-processing .progress-bar {
  margin-top: var(--space-4);
}

.tool-mobile-success {
  padding: var(--space-8) var(--space-4);
  text-align: center;
}

.tool-mobile-success h2 {
  font-size: var(--text-xl);
  margin: var(--space-4) 0 var(--space-2);
}

.tool-mobile-success p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.tool-mobile-success .btn {
  width: 100%;
  margin-bottom: var(--space-3);
}

/* PDF to Word — conversion notice */
.tool-conversion-note {
  margin: var(--space-4) 0 var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.55;
}

.tool-notice-banner {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.55;
}

.tool-notice-banner-note {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.tool-notice-link {
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tool-reorder-hint {
  margin: var(--space-4) 0;
}

.tool-result-text-snippet {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-muted);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-primary-muted);
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.tool-preview-page-chip--more {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-weight: 600;
}

/* Crop PDF — margin input + visual preview */
.tool-crop-margins {
  display: block;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.tool-crop-margins--custom {
  display: none;
}

.tool-crop-options:has(#crop-mode-custom:checked) .tool-crop-margins--uniform {
  display: none;
}

.tool-crop-options:has(#crop-mode-custom:checked) .tool-crop-margins--custom {
  display: block;
}

.tool-crop-sides-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
}

.tool-crop-side-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.tool-crop-side-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}

/* Extract text — page ranges when not extracting all */
.tool-extract-ranges {
  display: none;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.tool-extract-options:has(#extract-all-pages:not(:checked)) .tool-extract-ranges {
  display: block;
}

/* PDF→Word — page ranges when not converting all */
.tool-word-ranges {
  display: none;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.tool-word-options:has(#word-all-pages:not(:checked)) .tool-word-ranges {
  display: block;
}

.tool-rotate-ranges {
  display: none;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.tool-rotate-options:has(#rotate-all-pages:not(:checked)) .tool-rotate-ranges {
  display: block;
}

.tool-extract-preview-panel--ranges {
  display: none;
}

.tool-panel:has(#extract-all-pages:not(:checked)) .tool-extract-preview-panel--all {
  display: none;
}

.tool-panel:has(#extract-all-pages:not(:checked)) .tool-extract-preview-panel--ranges {
  display: block;
}

/* JPG to PDF — page size preview note */
.tool-jpg-size-note--letter,
.tool-jpg-size-note--legal,
.tool-jpg-size-note--a3,
.tool-jpg-size-note--fit {
  display: none;
}

[data-tool-panel]:has(#jpg-page-size-letter:checked) .tool-jpg-size-note--a4 {
  display: none;
}

[data-tool-panel]:has(#jpg-page-size-letter:checked) .tool-jpg-size-note--letter {
  display: inline;
}

[data-tool-panel]:has(#jpg-page-size-legal:checked) .tool-jpg-size-note--a4 {
  display: none;
}

[data-tool-panel]:has(#jpg-page-size-legal:checked) .tool-jpg-size-note--legal {
  display: inline;
}

[data-tool-panel]:has(#jpg-page-size-a3:checked) .tool-jpg-size-note--a4 {
  display: none;
}

[data-tool-panel]:has(#jpg-page-size-a3:checked) .tool-jpg-size-note--a3 {
  display: inline;
}

[data-tool-panel]:has(#jpg-page-size-fit:checked) .tool-jpg-size-note--a4 {
  display: none;
}

[data-tool-panel]:has(#jpg-page-size-fit:checked) .tool-jpg-size-note--fit {
  display: inline;
}

.tool-jpg-sheet-options {
  margin-top: var(--space-4);
}

.tool-jpg-sheet-hint {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

[data-tool-panel]:has(#jpg-page-size-fit:checked) .tool-jpg-sheet-options {
  display: none;
}

/* Watermark — text color preview note */
.tool-watermark-color-note--dark,
.tool-watermark-color-note--black {
  display: none;
}

.tool-panel:has(#watermark-color-dark:checked) .tool-watermark-color-note--light {
  display: none;
}

.tool-panel:has(#watermark-color-dark:checked) .tool-watermark-color-note--dark {
  display: inline;
}

.tool-panel:has(#watermark-color-black:checked) .tool-watermark-color-note--light {
  display: none;
}

.tool-panel:has(#watermark-color-black:checked) .tool-watermark-color-note--black {
  display: inline;
}

.tool-watermark-grid-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
}

.tool-watermark-margins-grid {
  margin-top: var(--space-3);
}

.tool-panel:has(#watermark-position-bottom:checked) .tool-watermark-rows-field {
  display: none;
}

.tool-before-preview-meta {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  line-height: 1.5;
}

.tool-watermark-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--space-3);
}

.tool-watermark-visual-page {
  position: relative;
  width: 8.75rem;
  height: 11.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.tool-watermark-visual-page-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  opacity: 0.35;
  pointer-events: none;
}

.tool-watermark-visual-body {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  z-index: 1;
}

.tool-watermark-visual-grid {
  width: 100%;
  height: 100%;
  display: grid;
  gap: 1px;
  grid-template-rows: repeat(var(--wm-rows), 1fr);
  grid-template-columns: repeat(var(--wm-cols), 1fr);
}

.tool-watermark-visual-grid--bottom {
  align-items: end;
}

.tool-watermark-visual-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
  line-height: 1.05;
  overflow: hidden;
  padding: 1px;
  min-width: 0;
}

.tool-watermark-visual--empty .tool-watermark-visual-mark {
  font-weight: 500;
  opacity: 0.35;
}

.tool-watermark-visual-grid--diagonal .tool-watermark-visual-mark {
  transform: rotate(-45deg);
}

.tool-watermark-visual--opacity-light .tool-watermark-visual-mark { opacity: 0.28; }
.tool-watermark-visual--opacity-medium .tool-watermark-visual-mark { opacity: 0.45; }
.tool-watermark-visual--opacity-heavy .tool-watermark-visual-mark { opacity: 0.62; }

.tool-watermark-visual--color-light-gray .tool-watermark-visual-mark { color: #b5b5b5; }
.tool-watermark-visual--color-dark-gray .tool-watermark-visual-mark { color: #6b6b6b; }
.tool-watermark-visual--color-black .tool-watermark-visual-mark { color: #111; }

.tool-watermark-visual--size-small .tool-watermark-visual-mark { font-size: 0.4rem; }
.tool-watermark-visual--size-medium .tool-watermark-visual-mark { font-size: 0.5rem; }
.tool-watermark-visual--size-large .tool-watermark-visual-mark { font-size: 0.6rem; }

.tool-watermark-visual--image .tool-watermark-visual-mark {
  font-size: inherit;
}

.tool-watermark-visual-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.tool-watermark-visual--size-small .tool-watermark-visual-img { max-height: 0.55rem; }
.tool-watermark-visual--size-medium .tool-watermark-visual-img { max-height: 0.75rem; }
.tool-watermark-visual--size-large .tool-watermark-visual-img { max-height: 1rem; }

.tool-watermark-visual-img-ph {
  font-size: 0.45rem;
  font-weight: 600;
  opacity: 0.7;
}

.tool-watermark-mode-panel {
  margin-top: var(--space-3);
}

.tool-watermark-mode:not(:has(#watermark-mode-text:checked)) .tool-watermark-mode-panel--text {
  display: none;
}

.tool-watermark-mode:not(:has(#watermark-mode-image:checked)) .tool-watermark-mode-panel--image {
  display: none;
}

.tool-watermark-image-input {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-bottom: var(--space-2);
  font: inherit;
}

.tool-panel:has(#watermark-mode-image:checked) .tool-watermark-color-options {
  display: none;
}

.tool-watermark-visual-caption {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  text-align: center;
}

/* Compress — level preview estimates */
.tool-compress-estimate-hint {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-subtle);
  line-height: 1.45;
}

.tool-compress-mode-panel {
  margin-top: var(--space-4);
}

.tool-compress-mode:not(:has(#compress-mode-level:checked)) .tool-compress-mode-panel--level {
  display: none;
}

.tool-compress-mode:not(:has(#compress-mode-target:checked)) .tool-compress-mode-panel--target {
  display: none;
}

.tool-compress-mode-switch,
.tool-compress-unit-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  padding: 1px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-border);
  overflow: hidden;
  max-width: 22rem;
}

.tool-compress-unit-switch {
  max-width: 7.5rem;
  flex-shrink: 0;
}

.tool-compress-mode-switch-item,
.tool-compress-unit-switch-item {
  position: relative;
  display: flex;
  margin: 0;
  cursor: pointer;
}

.tool-compress-mode-switch-item input,
.tool-compress-unit-switch-item input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.tool-compress-mode-switch-item span,
.tool-compress-unit-switch-item span {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  line-height: 1.25;
}

.tool-compress-unit-switch-item span {
  padding: 0.4rem 0.55rem;
  font-size: var(--text-xs);
}

.tool-compress-mode-switch-item:has(input:checked) span,
.tool-compress-unit-switch-item:has(input:checked) span {
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
  color: var(--color-primary);
}

.tool-compress-mode-switch-item:has(input:focus-visible) span,
.tool-compress-unit-switch-item:has(input:focus-visible) span {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.tool-compress-target-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.tool-compress-estimate-tag {
  display: inline;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  vertical-align: middle;
}

.tool-compress-estimate-tag--track {
  display: inline;
  margin-left: var(--space-1);
  vertical-align: baseline;
}

.tool-compress-estimate-mark--pending {
  color: var(--color-text-subtle);
  font-weight: 600;
}

.tool-compress-estimate-mark--idle {
  color: var(--color-text-subtle);
  font-weight: 600;
}

.tool-compress-estimate-mark {
  font-weight: 700;
  color: var(--color-accent-hover);
}

.tool-compress-estimate,
.tool-compress-level-note {
  display: none;
}

.tool-compress-estimate--recommended,
.tool-compress-level-note--recommended {
  display: inline;
}

.tool-before-preview-group-count.tool-compress-estimate {
  display: none;
}

.tool-before-preview-group-count.tool-compress-estimate--recommended {
  display: inline;
}

.tool-panel:has(#compress-level-maximum:checked) .tool-compress-estimate--recommended,
.tool-panel:has(#compress-level-maximum:checked) .tool-compress-level-note--recommended {
  display: none;
}

.tool-panel:has(#compress-level-maximum:checked) .tool-compress-estimate--maximum,
.tool-panel:has(#compress-level-maximum:checked) .tool-compress-level-note--maximum {
  display: inline;
}

.tool-panel:has(#compress-level-quality:checked) .tool-compress-estimate--recommended,
.tool-panel:has(#compress-level-quality:checked) .tool-compress-level-note--recommended {
  display: none;
}

.tool-panel:has(#compress-level-quality:checked) .tool-compress-estimate--quality,
.tool-panel:has(#compress-level-quality:checked) .tool-compress-level-note--quality {
  display: inline;
}

/* Protect — encryption preview note */
.tool-protect-encryption-note--aes256 {
  display: none;
}

.tool-panel:has(#protect-encryption-aes256:checked) .tool-protect-encryption-note--rc4 {
  display: none;
}

.tool-panel:has(#protect-encryption-aes256:checked) .tool-protect-encryption-note--aes256 {
  display: inline;
}

/* Delete pages — remove vs keep-only preview */
.tool-delete-preview-panel--keep {
  display: none;
}

.tool-panel:has(#delete-mode-keep:checked) .tool-delete-preview-panel--remove {
  display: none;
}

.tool-panel:has(#delete-mode-keep:checked) .tool-delete-preview-panel--keep {
  display: block;
}

/* PDF to JPG — sharpness applies to JPG and PNG */

.tool-nup-visual {
  display: flex;
  justify-content: center;
  margin-top: var(--space-4);
}

.tool-nup-visual-sheet {
  display: grid;
  grid-template-columns: repeat(var(--nup-cols, 2), minmax(0, 1fr));
  grid-template-rows: repeat(var(--nup-rows, 1), minmax(0, 1fr));
  gap: 0.2rem;
  width: 7.5rem;
  aspect-ratio: var(--nup-aspect, 210 / 297);
  height: auto;
  padding: 0.35rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  box-sizing: border-box;
}

.tool-nup-visual-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface-muted);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-xs);
}

.tool-nup-visual-cell--empty {
  background: transparent;
  border-style: dotted;
  opacity: 0.45;
}

.tool-pagenum-visual {
  display: flex;
  justify-content: center;
  margin-top: var(--space-4);
}

.tool-pagenum-visual-page {
  position: relative;
  width: 7rem;
  height: 9rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.tool-pagenum-visual-chip {
  position: absolute;
  padding: 0.1rem 0.35rem;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  white-space: nowrap;
}

.tool-pagenum-visual-chip--bottom-center {
  left: 50%;
  bottom: 0.4rem;
  transform: translateX(-50%);
}

.tool-pagenum-visual-chip--bottom-left {
  left: 0.35rem;
  bottom: 0.4rem;
}

.tool-pagenum-visual-chip--bottom-right {
  right: 0.35rem;
  bottom: 0.4rem;
}

.tool-pagenum-visual-chip--top-center {
  left: 50%;
  top: 0.4rem;
  transform: translateX(-50%);
}

.tool-pagenum-visual-chip--top-left {
  left: 0.35rem;
  top: 0.4rem;
}

.tool-pagenum-visual-chip--top-right {
  right: 0.35rem;
  top: 0.4rem;
}

.tool-crop-visual {
  display: flex;
  justify-content: center;
  margin-top: var(--space-4);
}

.tool-crop-visual-page {
  position: relative;
  width: 7rem;
  height: 9rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.tool-crop-visual-content {
  position: absolute;
  inset: 12%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: var(--color-surface-muted);
  border-radius: var(--radius-xs);
}

.tool-crop-visual-trim {
  position: absolute;
  background: rgba(0, 87, 255, 0.12);
  border: 1px dashed var(--color-primary-muted);
  box-sizing: border-box;
}

.tool-crop-visual-trim--top,
.tool-crop-visual-trim--bottom {
  left: 0;
  right: 0;
  height: 12%;
}

.tool-crop-visual-trim--top { top: 0; }
.tool-crop-visual-trim--bottom { bottom: 0; }

.tool-crop-visual-trim--left,
.tool-crop-visual-trim--right {
  top: 12%;
  bottom: 12%;
  width: 12%;
}

.tool-crop-visual-trim--left { left: 0; }
.tool-crop-visual-trim--right { right: 0; }

.tool-split-ranges-input--short {
  max-width: 6rem;
  margin-bottom: var(--space-3);
}

.tool-option--inline {
  display: inline-flex;
  margin-right: var(--space-4);
}

.tool-sign-mode-panel {
  margin-top: var(--space-3);
}

.tool-sign-mode:not(:has(#sign-mode-text:checked)) .tool-sign-mode-panel--text {
  display: none;
}

.tool-sign-mode:not(:has(#sign-mode-image:checked)) .tool-sign-mode-panel--image {
  display: none;
}

.tool-sign-image-input {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-bottom: var(--space-2);
  font: inherit;
}

.tool-sign-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.tool-sign-visual-stack {
  position: relative;
  width: 7rem;
  height: 9rem;
}

.tool-sign-visual-stack--last {
  width: 7.6rem;
  height: 9.5rem;
}

.tool-sign-visual-page {
  position: absolute;
  inset: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.tool-sign-visual-stack--last .tool-sign-visual-page:not(.tool-sign-visual-page--back):not(.tool-sign-visual-page--mid) {
  inset: 0.35rem 0 0 0.35rem;
  z-index: 2;
}

.tool-sign-visual-page--back,
.tool-sign-visual-page--mid {
  background: var(--color-surface-muted);
  border-color: var(--color-border);
  box-shadow: none;
}

.tool-sign-visual-page--back {
  inset: 0 0.55rem 0.55rem 0;
  z-index: 0;
  opacity: 0.55;
}

.tool-sign-visual-page--mid {
  inset: 0.18rem 0.28rem 0.28rem 0.18rem;
  z-index: 1;
  opacity: 0.75;
}

.tool-sign-visual-lines {
  display: block;
  position: absolute;
  inset: 12% 14% 28%;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 0.55rem,
      color-mix(in srgb, var(--color-border) 70%, transparent) 0.55rem,
      color-mix(in srgb, var(--color-border) 70%, transparent) 0.62rem
    );
  opacity: 0.7;
  pointer-events: none;
}

.tool-sign-visual-mark {
  position: absolute;
  max-width: 72%;
  color: #1a1a1a;
  font-family: "Segoe Script", "Lucida Handwriting", "Apple Chancery", cursive;
  font-style: italic;
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tool-sign-visual-mark--empty {
  color: color-mix(in srgb, var(--color-text-muted) 85%, transparent);
  opacity: 0.75;
}

.tool-sign-visual-mark--bottom-left {
  left: 0.4rem;
  bottom: 0.45rem;
}

.tool-sign-visual-mark--bottom-center {
  left: 50%;
  bottom: 0.45rem;
  transform: translateX(-50%);
  text-align: center;
}

.tool-sign-visual-mark--bottom-right {
  right: 0.4rem;
  bottom: 0.45rem;
  text-align: right;
}

.tool-sign-visual-mark--small {
  font-size: 0.55rem;
}

.tool-sign-visual-mark--medium {
  font-size: 0.7rem;
}

.tool-sign-visual-mark--large {
  font-size: 0.88rem;
}

.tool-sign-visual-img {
  display: block;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom;
}

.tool-sign-visual-mark--small .tool-sign-visual-img {
  height: 0.85rem;
}

.tool-sign-visual-mark--medium .tool-sign-visual-img {
  height: 1.2rem;
}

.tool-sign-visual-mark--large .tool-sign-visual-img {
  height: 1.65rem;
}

.tool-sign-visual-img-ph {
  display: inline-block;
  padding: 0.12rem 0.35rem;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-style: normal;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  background: var(--color-surface-muted);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-xs);
}

.tool-sign-visual-caption {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
}


/* Live tool pages — hide inactive state panels and empty slots */
.tool-panel-stack [data-tool-state][hidden] {
  display: none !important;
}

[data-tool-file-list][hidden],
[data-tool-file-list-readonly][hidden],
[data-tool-before-preview][hidden],
[data-tool-merge-stages][hidden] {
  display: none !important;
}

.btn[hidden],
a.btn[hidden],
.tool-result-actions [hidden] {
  display: none !important;
}

/* ——— Word→PDF offscreen layout render (html2canvas capture) ——— */
.word2pdf-render-host {
  position: fixed;
  left: -12000px;
  top: 0;
  z-index: -1;
  pointer-events: none;
  overflow: visible;
  background: #ffffff;
  color: #111;
  /* Do not inherit site UI fonts — Word docs bring their own face via docx-preview. */
  font-family: Calibri, 'Microsoft YaHei', 'PingFang SC', 'Noto Sans SC', sans-serif;
}

.word2pdf-render-body,
.word2pdf-render-docx,
.word2pdf-render-host .docx-wrapper {
  width: 100%;
  background: #ffffff;
  font-family: inherit;
}

.word2pdf-render-host section.docx {
  box-sizing: border-box;
  /* Keep docx-preview width/padding (page margins from pgMar). */
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 24px !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #ffffff !important;
  /* Fixed page card height — matches Word pagination / ignoreHeight:false. */
  overflow: hidden !important;
  height: var(--word2pdf-page-h, auto) !important;
  min-height: var(--word2pdf-page-h, 0px);
  max-height: var(--word2pdf-page-h, none);
  font-family: inherit;
}

/*
 * docx-preview sizes inline images with fixed pt width/height on a wrapper.
 * Global `img { max-width:100%; height:auto }` can shrink the <img> while the
 * wrapper keeps the old height, so following text slides up under the figure.
 */
.word2pdf-render-host section.docx img {
  max-width: 100% !important;
  height: auto !important;
  display: inline-block !important;
  vertical-align: top;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  margin: 8pt 0 !important;
}

.word2pdf-render-host section.docx p {
  position: relative;
  z-index: 1;
  /*
   * Many Chinese letters fake right-align with leading spaces (no w:jc=right).
   * CSS white-space:normal collapses those spaces and the signature jumps left.
   */
  white-space: pre-wrap !important;
}

.word2pdf-render-host section.docx span {
  white-space: pre-wrap !important;
}

.word2pdf-render-host section.docx span[style*="inline-block"],
.word2pdf-render-host section.docx div[style*="inline-block"] {
  max-width: 100% !important;
  height: auto !important;
  white-space: normal !important;
}