/*
 * ═══════════════════════════════════════════════════════════════
 *  ConvertPDF.Live — Shared Design System  v1.0
 *  Single source of truth. Injected into every page.
 *  Covers: tokens, reset, typography, layout, components.
 *  Page-specific styles remain in each page's <style> block.
 * ═══════════════════════════════════════════════════════════════
 */

/* ─────────────────────────────────────────────
   1. DESIGN TOKENS
───────────────────────────────────────────── */
:root {
  /* Colours */
  --bg:     #f0f2f5;
  --surf:   #ffffff;
  --surf2:  #e8eaf0;
  --bdr:    #c4c6d8;
  --acc:    #b07800;   /* gold — primary */
  --acc2:   #0060a0;   /* blue — secondary */
  --acc3:   #b0004a;   /* red  — tertiary */
  --txt:    #1a1a2e;
  --mut:    #4a4a6a;
  --ok:     #107040;
  --shadow: rgba(0,0,0,.10);

  /* Radii & sizing */
  --r:       8px;
  --hdr-h:   58px;
  --card-r:  18px;

  /* Typography */
  --fd: 'Syne',        sans-serif;   /* display / headings */
  --fm: 'Space Mono',  monospace;    /* mono / labels */
  --fb: 'DM Sans',     sans-serif;   /* body */

  /* Content width */
  --content-w: 860px;
}

/* Dark-mode token overrides (class applied to <body> by header.js) */
body.dark {
  --bg:    #0f0f1a;
  --surf:  #1a1a2e;
  --surf2: #22223a;
  --bdr:   #3a3a5c;
  --txt:   #e8e8f0;
  --mut:   #8888aa;
}
/* Dark-mode on <html> element (set by header.js before body renders) */
html.dark { background: #0f0f1a !important; color-scheme: dark; }
html.light { background: #f0f2f5 !important; color-scheme: light; }
html.dark body {
  --bg:#0f0f1a; --surf:#1a1a2e; --surf2:#22223a;
  --bdr:#3a3a5c; --txt:#e8e8f0; --mut:#8888aa;
}


/* ─────────────────────────────────────────────
   2. GLOBAL RESET & BASE
───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--bg); }

body {
  background:   var(--bg);
  color:        var(--txt);
  font-family:  var(--fb);
  font-size:    14px;
  line-height:  1.6;
  min-height:   100vh;
  transition:   background .3s, color .3s;
}

::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bdr); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--acc); }

a { color: inherit; }
img, svg { display: block; max-width: 100%; }


/* ─────────────────────────────────────────────
   3. TYPOGRAPHY SCALE
   All headings use Syne (--fd). Body uses DM Sans (--fb).
   Labels / mono use Space Mono (--fm).
───────────────────────────────────────────── */

/* Display / H1 */
h1,
.tool-title,
.tool-page-title,
.merge-hdr-title,
.dash-title {
  font-family:   var(--fd);
  font-weight:   800;
  letter-spacing: -.03em;
  color:         var(--txt);
  line-height:   1.1;
}
h1               { font-size: clamp(1.4rem, 3.5vw, 1.9rem); }
.tool-title      { font-size: clamp(1.3rem, 3vw,   1.85rem); }
.tool-page-title { font-size: clamp(1.0rem, 2.5vw,  1.3rem); }

/* Section / H2 */
h2,
.faq-title,
.section-heading {
  font-family:  var(--fd);
  font-weight:  800;
  font-size:    1rem;
  letter-spacing: -.02em;
  color:        var(--txt);
}

/* Sub-heading / H3 */
h3 {
  font-family: var(--fd);
  font-weight: 700;
  font-size:   .9rem;
  color:       var(--txt);
}

/* Body text */
p { color: var(--mut); line-height: 1.65; }

/* Mono label (utility) */
.mono, .lbl-mono {
  font-family: var(--fm);
  font-size:   .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color:       var(--mut);
}


/* ─────────────────────────────────────────────
   4. LAYOUT — shared main wrapper
───────────────────────────────────────────── */
main,
.tool-standalone {
  max-width: var(--content-w);
  margin:    0 auto;
  padding:   28px 18px 80px;
}

@media (max-width: 640px) {
  main,
  .tool-standalone {
    padding-left:  12px;
    padding-right: 12px;
  }
}


/* ─────────────────────────────────────────────
   5. TOP NAV ROW  (back link + blog guide btn)
───────────────────────────────────────────── */
.top-nav-row {
  display:       flex;
  align-items:   center;
  gap:           10px;
  margin-bottom: 24px;
  flex-wrap:     wrap;
}
.top-nav-row .back-link { margin-bottom: 0; }

/* Back link — gold pill button */
.back-link {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  background:    var(--acc);
  color:         #fff !important;
  font-family:   var(--fd);
  font-weight:   800;
  font-size:     .82rem;
  padding:       9px 20px;
  border-radius: 50px;
  text-decoration: none;
  white-space:   nowrap;
  transition:    all .22s;
  box-shadow:    0 3px 14px rgba(176,120,0,.3);
}
.back-link:hover { transform: translateX(-3px) scale(1.03); opacity: .92; }

/* Blog guide button — blue outline pill */
.blog-guide-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           7px;
  background:    transparent;
  border:        2px solid var(--acc2);
  color:         var(--acc2) !important;
  font-family:   var(--fd);
  font-weight:   700;
  font-size:     .78rem;
  padding:       8px 18px;
  border-radius: 50px;
  text-decoration: none;
  transition:    all .2s;
  white-space:   nowrap;
  margin-left:   auto;
}
.blog-guide-btn:hover {
  background:  var(--acc2);
  color:       #fff !important;
  transform:   translateY(-1px);
  box-shadow:  0 4px 14px rgba(0,96,160,.3);
}


/* ─────────────────────────────────────────────
   6. TOOL CARD  (standard single-column tool)
───────────────────────────────────────────── */
.tool-card {
  background:    var(--surf);
  border:        2px solid var(--bdr);
  border-radius: var(--card-r);
  overflow:      hidden;
  box-shadow:    0 4px 24px var(--shadow);
  transition:    background .3s, border-color .3s;
}
.tool-card-accent,
.card-accent {
  height:     4px;
  background: linear-gradient(90deg, var(--acc), var(--acc2), var(--acc3));
  opacity:    .7;
}

/* Tool header (icon + title + desc + badges) */
.tool-hdr {
  padding:    26px 32px 20px;
  background: linear-gradient(145deg, var(--surf) 0%, var(--surf2) 100%);
  position:   relative;
  overflow:   hidden;
  border-bottom: 1px solid var(--bdr);
  transition: background .3s;
}
.tool-hdr::after {
  content:  '';
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(176,120,0,.12), transparent 65%);
  pointer-events: none;
}
.tool-icon {
  font-size:     2rem;
  margin-bottom: 10px;
  display:       block;
}
.tool-desc {
  color:      var(--mut);
  font-size:  .88rem;
  line-height: 1.65;
  max-width:  500px;
}
.tool-body {
  padding: 28px 32px;
  transition: background .3s;
}
@media (max-width: 600px) {
  .tool-hdr, .tool-body { padding-left: 18px; padding-right: 18px; }
}


/* ─────────────────────────────────────────────
   7. TOOL-PAGE CARD  (Group C — convert pages)
   Compact header, content card below it.
───────────────────────────────────────────── */
.tool-page-hdr {
  padding:    14px 24px 12px;
  background: linear-gradient(145deg, var(--surf) 0%, var(--surf2) 100%);
  position:   relative;
  overflow:   hidden;
  border-bottom: 1px solid var(--bdr);
  border-radius: var(--card-r) var(--card-r) 0 0;
  transition: background .3s;
}
.tool-page-hdr::after {
  content:  '';
  position: absolute;
  top: -30px; right: -30px;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(176,120,0,.10), transparent 65%);
  pointer-events: none;
}
.tool-page-icon-wrap {
  font-size:     1.45rem;
  margin-bottom: 5px;
  display:       block;
}
.tool-page-desc {
  color:      var(--mut);
  font-size:  .78rem;
  line-height: 1.5;
  max-width:  560px;
}
.tool-page-badges {
  display:    flex;
  gap:        5px;
  margin-top: 9px;
  flex-wrap:  wrap;
}
.tp-badge {
  font-family:    var(--fm);
  font-size:      .50rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding:        2px 8px;
  border-radius:  20px;
}
.tp-badge-g { background: rgba(16,112,64,.12);  color: var(--ok);   border: 1px solid rgba(16,112,64,.25); }
.tp-badge-y { background: rgba(176,120,0,.12);  color: var(--acc);  border: 1px solid rgba(176,120,0,.25); }
.tp-badge-b { background: rgba(0,96,160,.12);   color: var(--acc2); border: 1px solid rgba(0,96,160,.25);  }

.tool-page-content-card {
  background:    var(--surf);
  border:        2px solid var(--bdr);
  border-radius: 0 0 var(--card-r) var(--card-r);
  border-top:    none;
  box-shadow:    0 8px 40px var(--shadow);
  overflow:      hidden;
  transition:    background .3s, border-color .3s;
}
.tool-page-content-card::before {
  content:    '';
  display:    block;
  height:     4px;
  background: linear-gradient(90deg, var(--acc), var(--acc2), var(--acc3));
  opacity:    .6;
}
.tool-page-body {
  padding:    28px 32px;
  transition: background .3s;
}
@media (max-width: 600px) {
  .tool-page-hdr    { padding: 12px 16px 10px; }
  .tool-page-body   { padding: 18px 16px; }
}


/* ─────────────────────────────────────────────
   8. BADGE SYSTEM  (shared across all groups)
───────────────────────────────────────────── */
.badge, .tp-badge {
  font-family:    var(--fm);
  letter-spacing: .07em;
  text-transform: uppercase;
  border-radius:  20px;
  display:        inline-block;
}
/* sizes differ by context — keep both */
.badge     { font-size: .55rem; padding: 3px 10px; }
.badge-g   { background: rgba(16,112,64,.12);  color: var(--ok);   border: 1px solid rgba(16,112,64,.25); }
.badge-y   { background: rgba(176,120,0,.12);  color: var(--acc);  border: 1px solid rgba(176,120,0,.25); }
.badge-b   { background: rgba(0,96,160,.12);   color: var(--acc2); border: 1px solid rgba(0,96,160,.25);  }
.tool-badges { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }


/* ─────────────────────────────────────────────
   9. BUTTONS
───────────────────────────────────────────── */
.btn {
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  gap:            8px;
  padding:        11px 24px;
  border-radius:  50px;
  font-family:    var(--fd);
  font-weight:    800;
  font-size:      .84rem;
  cursor:         pointer;
  transition:     all .22s;
  border:         none;
  text-decoration: none;
  position:       relative;
  overflow:       hidden;
  white-space:    nowrap;
}
.btn::after {
  content:      '';
  position:     absolute;
  inset:        0;
  background:   linear-gradient(135deg, rgba(255,255,255,.14), transparent 60%);
  opacity:      0;
  transition:   opacity .2s;
  pointer-events: none;
  border-radius: inherit;
}
.btn:hover::after { opacity: 1; }
.btn:active       { transform: scale(.97) !important; }

.btn-primary {
  background:  var(--acc);
  color:       #1a1a2e !important;
  box-shadow:  0 3px 16px rgba(176,120,0,.3);
}
.btn-primary:hover:not(:disabled) {
  transform:   translateY(-2px);
  box-shadow:  0 6px 22px rgba(176,120,0,.45);
}
.btn-primary:disabled { opacity: .45; cursor: not-allowed; transform: none !important; }

.btn-secondary {
  background: var(--surf2);
  color:      var(--txt) !important;
  border:     1.5px solid var(--bdr);
}
.btn-secondary:hover {
  border-color: var(--acc);
  color:        var(--acc) !important;
  background:   var(--surf);
}

.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
@media (max-width: 480px) {
  .btn-row             { flex-direction: column; }
  .btn-row .btn        { width: 100%; justify-content: center; }
}


/* ─────────────────────────────────────────────
   10. FORM ELEMENTS
───────────────────────────────────────────── */
label.lbl {
  font-family:    var(--fm);
  font-size:      .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color:          var(--mut);
  display:        block;
  margin-bottom:  6px;
}

input[type=text],
input[type=number],
input[type=password],
input[type=email],
select,
textarea {
  width:         100%;
  padding:       9px 12px;
  border:        1.5px solid var(--bdr);
  border-radius: var(--r);
  font-size:     .85rem;
  background:    var(--surf);
  color:         var(--txt);
  outline:       none;
  transition:    border-color .2s, box-shadow .2s;
  font-family:   var(--fb);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--acc);
  box-shadow:   0 0 0 3px rgba(176,120,0,.12);
}
input[type=range]    { width: 100%; accent-color: var(--acc); }
input[type=checkbox] { accent-color: var(--acc); }

.fg        { margin-bottom: 14px; }
.form-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 540px) { .form-row { grid-template-columns: 1fr; } }


/* ─────────────────────────────────────────────
   11. DROP ZONE
───────────────────────────────────────────── */
.dz {
  border:        2.5px dashed var(--bdr);
  border-radius: 14px;
  cursor:        pointer;
  display:       flex;
  flex-direction: column;
  align-items:   center;
  justify-content: center;
  gap:           8px;
  background:    var(--surf2);
  text-align:    center;
  padding:       38px 20px;
  position:      relative;
  margin-bottom: 16px;
  transition:    all .28s cubic-bezier(.34,1.1,.64,1);
}
.dz:hover, .dz.drag-over {
  border-color: var(--acc);
  background:   rgba(176,120,0,.05);
  transform:    scale(1.01);
  box-shadow:   0 0 0 4px rgba(176,120,0,.10);
}
.dz input[type=file] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.dz-icon  { font-size: 2.2rem; transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.dz:hover .dz-icon { transform: scale(1.12) translateY(-3px); }
.dz-title { font-family: var(--fd); font-weight: 700; font-size: .95rem; color: var(--txt); }
.dz-sub   { font-size: .78rem; color: var(--mut); }
.dz-hint  {
  font-family:  var(--fm);
  font-size:    .62rem;
  color:        var(--mut);
  background:   var(--surf);
  padding:      3px 10px;
  border-radius: 20px;
  border:       1px solid var(--bdr);
  animation:    hintPulse 2.5s ease infinite;
}
@keyframes hintPulse { 0%,100% { opacity: .65; } 50% { opacity: 1; } }


/* ─────────────────────────────────────────────
   12. FILE INFO CHIP
───────────────────────────────────────────── */
.file-info {
  display:       none; /* shown via JS: style.display='flex' */
  align-items:   center;
  gap:           10px;
  padding:       10px 14px;
  background:    var(--surf2);
  border:        1px solid var(--bdr);
  border-left:   3px solid var(--ok);
  border-radius: 10px;
  margin-bottom: 16px;
  animation:     chipIn .3s cubic-bezier(.34,1.3,.64,1);
}
@keyframes chipIn {
  from { opacity: 0; transform: translateY(-5px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.fi-icon { font-size: 1.4rem; }
.fi-name {
  font-family:    var(--fd);
  font-weight:    700;
  font-size:      .84rem;
  color:          var(--txt);
  flex:           1;
  min-width:      0;
  overflow:       hidden;
  text-overflow:  ellipsis;
  white-space:    nowrap;
}
.fi-size {
  font-family: var(--fm);
  font-size:   .68rem;
  color:       var(--mut);
  flex-shrink: 0;
}
.fi-clear {
  background:    transparent;
  border:        1px solid var(--bdr);
  border-radius: 6px;
  padding:       4px 8px;
  cursor:        pointer;
  font-size:     .7rem;
  color:         var(--mut);
  transition:    all .15s;
  flex-shrink:   0;
}
.fi-clear:hover { border-color: var(--acc3); color: var(--acc3); }


/* ─────────────────────────────────────────────
   13. INFO / ALERT BOXES
───────────────────────────────────────────── */
.info-box {
  padding:       10px 14px;
  border-radius: 9px;
  font-size:     .78rem;
  margin-bottom: 14px;
  display:       none;
  gap:           8px;
  align-items:   flex-start;
  line-height:   1.55;
}
.info-box.show { display: flex; }
.info-warn { background: rgba(176,120,0,.09); border: 1px solid rgba(176,120,0,.25); color: var(--acc);  }
.info-note { background: rgba(0,96,160,.09);  border: 1px solid rgba(0,96,160,.25);  color: var(--acc2); }
.info-ok   { background: rgba(16,112,64,.09); border: 1px solid rgba(16,112,64,.25); color: var(--ok);   }
.info-err  { background: rgba(176,0,74,.09);  border: 1px solid rgba(176,0,74,.25);  color: var(--acc3); }


/* ─────────────────────────────────────────────
   14. PROGRESS BAR  (.progress-wrap / .u-prog)
───────────────────────────────────────────── */
.progress-wrap,
.u-prog       { margin: 14px 0; display: none; }
.progress-wrap.show,
.u-prog.show  { display: block; }

.progress-bar-bg,
.u-prog-track {
  height:        9px;
  background:    var(--surf2);
  border-radius: 6px;
  overflow:      hidden;
  border:        1px solid var(--bdr);
}
.progress-bar-fill,
.u-prog-fill {
  height:     100%;
  background: linear-gradient(90deg, var(--acc), var(--acc2));
  border-radius: 6px;
  transition: width .3s;
  width:      0;
  background-size: 200%;
  animation:  progShimmer 1.8s linear infinite;
}
@keyframes progShimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
.progress-label,
.u-prog-lbl {
  font-family: var(--fm);
  font-size:   .65rem;
  color:       var(--mut);
  margin-top:  5px;
  display:     flex;
  align-items: center;
  gap:         6px;
}
.u-prog-spinner {
  width:         10px;
  height:        10px;
  border:        1.5px solid var(--bdr);
  border-top-color: var(--acc);
  border-radius: 50%;
  animation:     spin .65s linear infinite;
  flex-shrink:   0;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* ─────────────────────────────────────────────
   15. RESULT BOX
───────────────────────────────────────────── */
.result-box {
  margin-top:    16px;
  padding:       16px 18px;
  background:    rgba(16,112,64,.08);
  border:        1.5px solid rgba(16,112,64,.25);
  border-radius: 12px;
  display:       none;
  animation:     resultIn .4s cubic-bezier(.22,.68,0,1.15);
}
.result-box.show,
.result-box[style*="block"] { display: block; }
@keyframes resultIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.result-title {
  font-family: var(--fd);
  font-weight: 700;
  font-size:   .9rem;
  color:       var(--ok);
  margin-bottom: 4px;
}
.result-sub {
  font-family: var(--fm);
  font-size:   .67rem;
  color:       var(--mut);
  margin-bottom: 10px;
}


/* ─────────────────────────────────────────────
   16. FAQ SECTION
───────────────────────────────────────────── */
.faq-section  { margin-top: 32px; border-top: 2px solid var(--acc); padding-top: 20px; }
.faq-title    { margin-bottom: 14px; }
.faq-item     {
  border:        1px solid var(--bdr);
  border-radius: 10px;
  margin-bottom: 8px;
  overflow:      hidden;
  transition:    border-color .2s, box-shadow .2s;
}
.faq-item.open { border-color: var(--acc); box-shadow: 0 2px 10px rgba(176,120,0,.1); }
.faq-q {
  padding:        13px 16px;
  cursor:         pointer;
  font-family:    var(--fd);
  font-weight:    700;
  font-size:      .84rem;
  color:          var(--txt);
  display:        flex;
  justify-content: space-between;
  align-items:    center;
  user-select:    none;
  transition:     color .18s;
}
.faq-q:hover { color: var(--acc); }
.faq-a       { display: none; padding: 0 16px 14px; font-size: .82rem; color: var(--mut); line-height: 1.65; }
.faq-item.open .faq-a { display: block; animation: faqExpand .2s ease; }
@keyframes faqExpand {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}


/* ─────────────────────────────────────────────
   17. TRUST BAR
───────────────────────────────────────────── */
.trust-bar,
.tool-trust-bar {
  display:         flex;
  gap:             0;
  flex-wrap:       wrap;
  padding:         13px 28px;
  border-top:      1px solid var(--bdr);
  background:      var(--surf2);
  justify-content: center;
  align-items:     center;
  transition:      background .3s;
}
.ttb-item {
  display:     inline-flex;
  align-items: center;
  gap:         6px;
  font-family: var(--fm);
  font-size:   .6rem;
  color:       var(--mut);
  padding:     3px 14px 3px 0;
  white-space: nowrap;
  transition:  color .18s;
}
.ttb-item:hover { color: var(--acc); }
.ttb-sep        { color: var(--bdr); margin: 0 4px; font-size: .7rem; }
@media (max-width: 580px) {
  .trust-bar, .tool-trust-bar { padding: 12px 14px; }
  .ttb-sep    { display: none; }
  .ttb-item   { width: 50%; padding: 3px 0; }
}


/* ─────────────────────────────────────────────
   18. FEEDBACK BANNER  (above footer)
───────────────────────────────────────────── */
.feedback-banner {
  background:  var(--surf);
  border-top:  2px solid var(--acc);
  padding:     20px 24px;
  text-align:  center;
  margin-top:  36px;
  transition:  background .3s;
}
.feedback-banner p,
.feedback-banner .fb-title {
  font-family:   var(--fd);
  font-weight:   800;
  font-size:     .95rem;
  color:         var(--txt);
  margin-bottom: 10px;
}


/* ─────────────────────────────────────────────
   19. SITE FOOTER
───────────────────────────────────────────── */
.site-footer {
  background:  var(--surf);
  border-top:  1px solid var(--bdr);
  padding:     14px 24px;
  text-align:  center;
  transition:  background .3s;
}
.site-footer-links {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             14px;
  flex-wrap:       wrap;
}
.site-footer-links a {
  font-family:     var(--fm);
  font-size:       .7rem;
  color:           var(--mut);
  text-decoration: none;
  transition:      color .2s;
}
.site-footer-links a:hover { color: var(--acc); }
.site-footer-sep  { color: var(--bdr); font-size: .7rem; }
.site-footer-copy {
  font-family: var(--fm);
  font-size:   .65rem;
  color:       var(--mut);
  margin-top:  6px;
}


/* ─────────────────────────────────────────────
   20. STEP FLOW INDICATOR
───────────────────────────────────────────── */
.cpdf-steps {
  display:       flex;
  align-items:   center;
  gap:           0;
  margin-bottom: 24px;
  padding:       13px 18px;
  background:    var(--surf2);
  border:        1px solid var(--bdr);
  border-radius: 12px;
  overflow-x:    auto;
  scrollbar-width: none;
  transition:    background .3s;
}
.cpdf-steps::-webkit-scrollbar { display: none; }
.cpdf-step {
  display:     flex;
  align-items: center;
  gap:         8px;
  flex-shrink: 0;
  opacity:     .35;
  transition:  opacity .3s, transform .2s;
}
.cpdf-step.active { opacity: 1; }
.cpdf-step.done   { opacity: .65; }
.cpdf-step-num {
  width:         26px;
  height:        26px;
  border-radius: 50%;
  background:    var(--surf);
  border:        2px solid var(--bdr);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-family:   var(--fm);
  font-size:     .62rem;
  font-weight:   700;
  color:         var(--mut);
  transition:    all .3s;
  flex-shrink:   0;
}
.cpdf-step.active .cpdf-step-num {
  background:  var(--acc);
  border-color: var(--acc);
  color:       #0a0a14;
  box-shadow:  0 0 0 4px rgba(176,120,0,.18);
}
.cpdf-step.done .cpdf-step-num {
  background:   var(--ok);
  border-color: var(--ok);
  color:        #fff;
}
.cpdf-step-lbl {
  font-family:  var(--fd);
  font-size:    .72rem;
  font-weight:  700;
  color:        var(--txt);
  white-space:  nowrap;
}
.cpdf-step-arr {
  width:     28px;
  height:    1px;
  background: var(--bdr);
  margin:    0 6px;
  flex-shrink: 0;
  position:  relative;
}
.cpdf-step-arr::after {
  content:      '';
  position:     absolute;
  right:        -1px; top: -3px;
  border:       3px solid transparent;
  border-left-color: var(--bdr);
}
@media (max-width: 440px) {
  .cpdf-step-lbl { font-size: .6rem; }
  .cpdf-step-arr { width: 14px; margin: 0 3px; }
}


/* ─────────────────────────────────────────────
   21. ENHANCE-LAYER OVERRIDES
   Ensure enhance.js injected elements match tokens.
───────────────────────────────────────────── */

/* Loading modal */
.cpdf-loading-modal {
  position:       fixed;
  inset:          0;
  background:     rgba(10,10,20,.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index:        9800;
  display:        flex;
  align-items:    center;
  justify-content: center;
  opacity:        0;
  pointer-events: none;
  transition:     opacity .25s;
}
.cpdf-loading-modal.show { opacity: 1; pointer-events: all; }
.cpdf-loading-card {
  background:    var(--surf);
  border:        2px solid var(--bdr);
  border-radius: 22px;
  padding:       36px 42px;
  text-align:    center;
  width:         min(380px, 90vw);
  box-shadow:    0 24px 80px rgba(0,0,0,.45);
}
.cpdf-loading-title {
  font-family: var(--fd);
  font-weight: 800;
  font-size:   1rem;
  color:       var(--txt);
  margin-bottom: 5px;
}
.cpdf-loading-msg {
  font-family: var(--fm);
  font-size:   .68rem;
  color:       var(--mut);
  min-height:  18px;
}

/* Toasts */
.cpdf-toast {
  font-family: var(--fm);
  font-size:   .72rem;
  background:  var(--txt);
  color:       var(--surf);
}

/* ─────────────────────────────────────────────
   22. RESPONSIVE GLOBAL PATCHES
───────────────────────────────────────────── */
@media (max-width: 640px) {
  .tool-body, .tool-page-body { padding-left: 16px !important; padding-right: 16px !important; }
  .form-row                   { grid-template-columns: 1fr !important; }
}
@media (max-width: 400px) {
  .dz { padding: 28px 12px; }
}
