/* ================================================================
   Shared "professional tool" design system — loaded AFTER every public
   tool's own CSS, scoped to `[class$="-scope"]` (the wrapper every
   converted tool uses). Pure visual layer: no tool's HTML structure,
   IDs, or JS functions are touched — only how things look.
   ================================================================ */

[class$="-scope"] {
  --tp-brand: #4f46e5;
  --tp-brand-2: #2563eb;
  --tp-brand-dark: #4338ca;
  --tp-ink: #0f172a;
  --tp-ink-soft: #64748b;
  --tp-card: #ffffff;
  --tp-border: #e2e8f0;
  --tp-bg: #f8fafc;
  --tp-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
  --tp-shadow-lg: 0 4px 10px rgba(15,23,42,.06), 0 16px 40px rgba(15,23,42,.1);
  font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif !important;
  animation: tpFadeIn .35s ease both;
}
html[data-theme="dark"] [class$="-scope"] {
  --tp-ink: #f1f5f9;
  --tp-ink-soft: #94a3b8;
  --tp-card: #1a2233;
  --tp-border: #2d3a4f;
  --tp-bg: #0f172a;
  --tp-shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  --tp-shadow-lg: 0 4px 10px rgba(0,0,0,.3), 0 16px 40px rgba(0,0,0,.4);
}
html.theme-neon [class$="-scope"] {
  --tp-brand: #39FF14;
  --tp-brand-2: #1ab8f0;
  --tp-brand-dark: #2ECC0F;
  --tp-ink: #F8FAFC;
  --tp-ink-soft: #A1A1AA;
  --tp-card: #171A20;
  --tp-border: #2A2F38;
  --tp-bg: #0B0B0F;
  --tp-shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(57,255,20,.08);
  --tp-shadow-lg: 0 4px 10px rgba(0,0,0,.3), 0 16px 40px rgba(57,255,20,.12);
}
@keyframes tpFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

[class$="-scope"] { background: transparent !important; }
[class$="-scope"] * { scrollbar-width: thin; }
[class$="-scope"] *::-webkit-scrollbar { width: 7px; height: 7px; }
[class$="-scope"] *::-webkit-scrollbar-track { background: transparent; }
[class$="-scope"] *::-webkit-scrollbar-thumb { background: var(--tp-border); border-radius: 99px; }
[class$="-scope"] *::-webkit-scrollbar-thumb:hover { background: var(--tp-brand); }

/* ── Header: slim professional toolbar instead of a big banner ──── */
[class$="-scope"] .tool-header {
  background: var(--tp-card) !important;
  border: 1px solid var(--tp-border) !important;
  border-left: 4px solid var(--tp-brand) !important;
  border-radius: 12px;
  padding: 14px 20px !important;
  margin-bottom: 14px !important;
  box-shadow: var(--tp-shadow);
  flex-shrink: 0;
  display: flex !important;
  flex-direction: column;
  gap: 2px;
}
[class$="-scope"] .tool-header h1 {
  color: var(--tp-ink) !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  letter-spacing: -.01em;
  margin: 0 !important;
  text-shadow: none !important;
  display: flex; align-items: center; gap: 8px;
}
[class$="-scope"] .tool-header p {
  color: var(--tp-ink-soft) !important;
  font-size: .78rem !important;
  margin: 0 !important;
}

/* ── Main wrapper: same centered "card on a soft background" treatment
   as the login page, just a wider card (tools need more room to work
   with than a login form does). ── */
[class$="-scope"] > .tool-container,
[class$="-scope"] > .main-card {
  max-width: 960px !important;
  margin: 0 auto 12px !important;
  box-shadow: var(--tp-shadow-lg) !important;
}
[class$="-scope"] .tool-container,
[class$="-scope"] .section-card,
[class$="-scope"] .card,
[class$="-scope"] .main-card {
  background: var(--tp-card) !important;
  border: 1px solid var(--tp-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--tp-shadow) !important;
  padding: 18px 22px !important;
  margin-bottom: 12px !important;
}
[class$="-scope"] .tool-content { background: transparent !important; }

[class$="-scope"] .form-group { margin-bottom: 10px !important; }
[class$="-scope"] .controls,
[class$="-scope"] .action-buttons,
[class$="-scope"] .button-group,
[class$="-scope"] .buttons { margin: 10px 0 !important; gap: 8px !important; display: flex !important; flex-wrap: wrap; }
[class$="-scope"] h3 { font-size: .92rem !important; font-weight: 700 !important; color: var(--tp-ink) !important; margin: 0 0 8px !important; }
[class$="-scope"] h4 { font-size: .82rem !important; font-weight: 700 !important; color: var(--tp-ink) !important; margin: 0 0 6px !important; }
[class$="-scope"] p { font-size: .85rem !important; color: var(--tp-ink-soft); }

[class$="-scope"] textarea,
[class$="-scope"] #output,
[class$="-scope"] .output-section,
[class$="-scope"] .results-area,
[class$="-scope"] .diff-container,
[class$="-scope"] .file-content,
[class$="-scope"] .pdf-display,
[class$="-scope"] .preview-area,
[class$="-scope"] .ql-editor,
[class$="-scope"] pre {
  max-height: min(38vh, 380px) !important;
  overflow-y: auto !important;
}

/* Option/setting groups: compact grid instead of one-per-line stacking */
[class$="-scope"] .checkbox-grid,
[class$="-scope"] .settings-grid,
[class$="-scope"] .form-grid,
[class$="-scope"] .preset-options,
[class$="-scope"] .leg-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 8px !important;
}
[class$="-scope"] .checkbox-item,
[class$="-scope"] .checkbox-group,
[class$="-scope"] .preset-option {
  padding: 8px 10px !important;
  margin: 0 !important;
  font-size: .8rem !important;
  background: var(--tp-bg) !important;
  border: 1px solid var(--tp-border) !important;
  border-radius: 10px !important;
  transition: border-color .15s, background .15s;
}
[class$="-scope"] .checkbox-item:hover,
[class$="-scope"] .preset-option:hover { border-color: var(--tp-brand) !important; }
[class$="-scope"] .preset-option.active,
[class$="-scope"] .checkbox-item.active {
  border-color: var(--tp-brand) !important;
  background: color-mix(in srgb, var(--tp-brand) 10%, var(--tp-bg)) !important;
}
[class$="-scope"] .quick-actions,
[class$="-scope"] .whitespace-controls,
[class$="-scope"] .toolbar-group,
[class$="-scope"] .element-selection {
  gap: 6px !important;
  margin: 8px 0 !important;
}

[class$="-scope"] .input-methods {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}
@media (max-width: 760px) {
  [class$="-scope"] .input-methods { grid-template-columns: 1fr !important; }
}

/* ── Tool responsive — all screen sizes ─────────────────────────── */
@media (max-width: 900px) {
  [class$="-scope"] { font-size: .93rem; }
  [class$="-scope"] .controls,
  [class$="-scope"] [class*="-actions"],
  [class$="-scope"] [class*="-btns"] { flex-wrap: wrap; gap: 8px; }
  [class$="-scope"] .controls .btn,
  [class$="-scope"] [class*="-actions"] .btn { min-width: 0; }
}

@media (max-width: 640px) {
  [class$="-scope"] .controls { flex-direction: column !important; }
  [class$="-scope"] .controls .btn,
  [class$="-scope"] [class*="-actions"] .btn { width: 100% !important; text-align: center; justify-content: center; }
  [class$="-scope"] [class*="-dropzone"] { min-height: 180px !important; padding: 20px !important; }
  [class$="-scope"] [class*="-dropzone"] > i:first-child { font-size: 1.8rem !important; }
  [class$="-scope"] [class*="-dropzone"] [class*="-drop-title"] { font-size: .88rem !important; }
  [class$="-scope"] [class*="-dropzone"] [class*="-drop-sub"] { font-size: .78rem !important; }
  [class$="-scope"] [class*="-mode-toggle"],
  [class$="-scope"] [class*="-tab-bar"] { gap: 6px; flex-wrap: wrap; }
  [class$="-scope"] table { display: block !important; overflow-x: auto !important; white-space: nowrap; }
  [class$="-scope"] .page-header h1 { font-size: 1.05rem; }
  [class$="-scope"] .page-subtitle { font-size: .8rem; line-height: 1.55; }
}

/* ── Buttons: confident, tactile, icon-friendly ──────────────────── */
[class$="-scope"] .btn,
[class$="-scope"] button[class*="btn"] {
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: .85rem !important;
  padding: 10px 20px !important;
  border: none !important;
  letter-spacing: .01em;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
  cursor: pointer;
}
[class$="-scope"] .btn:hover,
[class$="-scope"] button[class*="btn"]:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 8px 18px rgba(15,23,42,.16);
}
[class$="-scope"] .btn:active,
[class$="-scope"] button[class*="btn"]:active { transform: translateY(0) scale(.97); }
[class$="-scope"] .btn:disabled,
[class$="-scope"] button[class*="btn"]:disabled { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
[class$="-scope"] .btn-primary { background: linear-gradient(135deg, var(--tp-brand), var(--tp-brand-dark)) !important; color: #fff !important; }
[class$="-scope"] .btn-success { background: linear-gradient(135deg, #10b981, #047857) !important; color: #fff !important; }
[class$="-scope"] .btn-danger  { background: linear-gradient(135deg, #f43f5e, #be123c) !important; color: #fff !important; }
[class$="-scope"] .btn-warning { background: linear-gradient(135deg, #f59e0b, #b45309) !important; color: #fff !important; }
[class$="-scope"] .btn-info,
[class$="-scope"] .btn-secondary { background: var(--tp-bg) !important; color: var(--tp-ink) !important; border: 1px solid var(--tp-border) !important; }

/* ── Inputs ───────────────────────────────────────────────────── */
[class$="-scope"] input[type="text"],
[class$="-scope"] input[type="number"],
[class$="-scope"] input[type="email"],
[class$="-scope"] input[type="file"],
[class$="-scope"] textarea,
[class$="-scope"] select,
[class$="-scope"] .form-control {
  border-radius: 10px !important;
  border: 1.5px solid var(--tp-border) !important;
  /* Follows the page background (not a separate plain-white card), just a
     touch lighter so the box is still visible as its own element — applies
     under every theme since it's derived from --tp-bg, not a fixed color. */
  background: color-mix(in srgb, var(--tp-bg) 90%, #ffffff 10%) !important;
  color: var(--tp-ink) !important;
  font-family: inherit !important;
  font-size: .85rem !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
[class$="-scope"] input:focus,
[class$="-scope"] textarea:focus,
[class$="-scope"] select:focus,
[class$="-scope"] .form-control:focus {
  outline: none !important;
  border-color: var(--tp-brand) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tp-brand) 16%, transparent) !important;
}

/* Neon theme: every paste/input box gets an ambient glow at rest (not just
   on focus), matching the always-on glow already used on buttons/dropzones
   in this theme — applies to every tool automatically since it's keyed off
   the shared [class$="-scope"] wrapper, not any one tool's own CSS. */
html.theme-neon [class$="-scope"] input[type="text"],
html.theme-neon [class$="-scope"] input[type="number"],
html.theme-neon [class$="-scope"] input[type="email"],
html.theme-neon [class$="-scope"] textarea,
html.theme-neon [class$="-scope"] select,
html.theme-neon [class$="-scope"] .form-control {
  border-color: color-mix(in srgb, var(--tp-brand) 45%, var(--tp-border)) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tp-brand) 12%, transparent),
              0 0 16px color-mix(in srgb, var(--tp-brand) 18%, transparent) !important;
}
html.theme-neon [class$="-scope"] input:focus,
html.theme-neon [class$="-scope"] textarea:focus,
html.theme-neon [class$="-scope"] select:focus,
html.theme-neon [class$="-scope"] .form-control:focus {
  border-color: var(--tp-brand) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tp-brand) 30%, transparent),
              0 0 24px color-mix(in srgb, var(--tp-brand) 35%, transparent) !important;
}
[class$="-scope"] label { color: var(--tp-ink-soft) !important; font-weight: 600 !important; font-size: .8rem !important; }

/* ── Tabs / toggle groups → modern segmented control ─────────────── */
[class$="-scope"] .tabs,
[class$="-scope"] .options-tabs,
[class$="-scope"] .toc-tabs,
[class$="-scope"] .method-toggle,
[class$="-scope"] .settings-tabs,
[class$="-scope"] .view-toggle {
  display: inline-flex !important;
  background: var(--tp-bg) !important;
  border: 1px solid var(--tp-border) !important;
  border-radius: 10px !important;
  padding: 3px !important;
  gap: 2px !important;
}
[class$="-scope"] .tab,
[class$="-scope"] .tab-button,
[class$="-scope"] .toggle-btn,
[class$="-scope"] .settings-tab {
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  color: var(--tp-ink-soft) !important;
  font-weight: 600 !important;
  font-size: .8rem !important;
  padding: 7px 14px !important;
  transition: background .15s, color .15s;
  cursor: pointer;
}
[class$="-scope"] .tab.active,
[class$="-scope"] .tab-button.active,
[class$="-scope"] .toggle-btn.active,
[class$="-scope"] .settings-tab.active {
  background: var(--tp-card) !important;
  color: var(--tp-brand) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.1) !important;
}

/* ── Upload drop-zones ────────────────────────────────────────── */
[class$="-scope"] .upload-area,
[class$="-scope"] .file-upload-area,
[class$="-scope"] .drop-zone {
  border: 2px dashed var(--tp-border) !important;
  background: var(--tp-bg) !important;
  border-radius: 14px !important;
  padding: 22px !important;
  transition: border-color .2s ease, background .2s ease, transform .2s ease !important;
}
[class$="-scope"] .upload-area:hover,
[class$="-scope"] .file-upload-area:hover,
[class$="-scope"] .drop-zone:hover {
  border-color: var(--tp-brand) !important;
  background: color-mix(in srgb, var(--tp-brand) 6%, var(--tp-bg)) !important;
  transform: scale(1.005);
}
[class$="-scope"] .upload-icon,
[class$="-scope"] .dz-icon { font-size: 1.7rem !important; opacity: .85; }
[class$="-scope"] .upload-text,
[class$="-scope"] .dz-main { font-size: .88rem !important; font-weight: 600 !important; color: var(--tp-ink) !important; }
[class$="-scope"] .upload-subtext,
[class$="-scope"] .dz-sub { font-size: .72rem !important; color: var(--tp-ink-soft) !important; }

/* Every tool's own dropzone follows the "xxx-dropzone" naming convention
   (h2p-dropzone, pmg-dropzone, ugf-dropzone, ...) — this guarantees the
   PDF Merger input-area size (320px) as a site-wide floor, and gives every
   dropzone icon a floating animation even if that particular tool's own
   CSS never defined one. Lower specificity than any tool's own
   ".xxx-scope .xxx-dropzone i { animation: ... }" rule, so tools that
   already animate their icon keep their own version unchanged — this only
   fills the gap where one doesn't exist yet. */
[class$="-scope"] [class*="-dropzone"] {
  min-height: 320px !important;
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
}
[class*="-dropzone"] > i:first-child {
  animation: tpDropzoneIconFloat 2.4s ease-in-out infinite;
}
@keyframes tpDropzoneIconFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  [class*="-dropzone"] > i:first-child { animation: none; }
}

/* ── Progress bars: slim animated gradient ──────────────────────── */
[class$="-scope"] .progress-bar,
[class$="-scope"] .progress-container,
[class$="-scope"] .processing-progress {
  background: var(--tp-border) !important;
  border-radius: 99px !important;
  overflow: hidden !important;
  height: 8px !important;
}
[class$="-scope"] .progress-fill,
[class$="-scope"] .processing-progress-bar {
  background: linear-gradient(90deg, var(--tp-brand), var(--tp-brand-2)) !important;
  border-radius: 99px !important;
  height: 100% !important;
  transition: width .25s ease !important;
}

/* ── Stat / feature chips ─────────────────────────────────────── */
[class$="-scope"] .stat-card,
[class$="-scope"] .feature-item {
  background: var(--tp-bg) !important;
  border: 1px solid var(--tp-border) !important;
  border-radius: 12px !important;
  color: var(--tp-ink-soft) !important;
}

/* ── Progressive disclosure: secondary "options" panels start collapsed
   behind a toggle (injected by _shared-shell-enhance.js). These tp-*
   classes are only ever applied by that script, on any public tool page
   — scoped or not — so the rules below are intentionally NOT restricted
   to `[class$="-scope"]` (some earlier-converted tools have no such
   wrapper and reuse the dashboard's own .card/.section-card directly). ── */
.public-tool-content .tp-collapse-toggle {
  display: flex !important; align-items: center; gap: 6px;
  width: fit-content;
  margin: 0 0 10px auto !important;
  background: var(--tp-bg, #f8fafc) !important;
  border: 1px solid var(--tp-border, #e2e8f0) !important;
  border-radius: 99px !important;
  padding: 7px 14px !important;
  font-size: .78rem !important; font-weight: 600 !important;
  color: var(--tp-ink-soft, #64748b) !important;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.public-tool-content .tp-collapse-toggle i:first-child { color: var(--tp-brand, #4f46e5); }
.public-tool-content .tp-collapse-toggle:hover { color: var(--tp-brand, #4f46e5) !important; border-color: var(--tp-brand, #4f46e5) !important; }
.public-tool-content .tp-collapse-toggle .tp-chevron { transition: transform .2s ease; font-size: .65rem !important; }
.public-tool-content .tp-collapse-toggle.tp-open .tp-chevron { transform: rotate(180deg); }
.public-tool-content .tp-collapsible:not(.tp-open) { display: none !important; }
.public-tool-content .tp-collapsible.tp-open {
  border: 1px solid var(--tp-border, #e2e8f0);
  border-radius: 12px;
  padding: 14px;
  background: var(--tp-bg, #f8fafc);
  margin-bottom: 10px;
}

/* ── Step flow: while a tool is busy processing or already has a result,
   tuck the upload/input prompt out of the way so only the relevant step
   is visible — added/removed automatically by _shared-shell-enhance.js,
   purely a CSS class toggle layered on top of whatever the tool itself
   is already showing/hiding. ── */
.public-tool-content .tp-step-hidden { display: none !important; }
.public-tool-content .tp-filler-hidden { display: none !important; }

/* ── Tidy up: hide redundant "How to use / Features / Tips / Notes"
   filler text every tool shipped with — duplicate of what the header
   already says, and not interactive, so hiding it is purely cosmetic. ── */
[class$="-scope"] .instructions,
[class$="-scope"] .instructions-section,
[class$="-scope"] .features-info,
[class$="-scope"] .features-list,
[class$="-scope"] .features-grid,
[class$="-scope"] .features-title,
[class$="-scope"] > .features,
[class$="-scope"] .features-showcase,
[class$="-scope"] [class*="-tip"],
[class$="-scope"] [class*="-note"] {
  display: none !important;
}