/* ══════════════════════════════════════════════════════════════
   UPNIXTOOLS — BATCH 3 MIGRATION STYLESHEET (migrate-batch3.css)
   Merged from migrate-batch3-A/B/C/D.css (coordinator merge 2026-09-23).
   Sections: A=PDF tools  B=Image tools  C=Text+QR/Barcode tools  D=Calculators+static.
   Rules: unique prefixes per section; no :root token overrides; no Syne;
   theme tokens only (--ink/--muted/--accent/--surface*/--bg*/--line*).
   JS-mandated class names are documented inside each section header.
   ══════════════════════════════════════════════════════════════ */

/* ── SECTION A ── */
/* ══════════════════════════════════════════════════════════════
   UPNIXTOOLS — PDF TOOL MIGRATION STYLESHEET (migrate-batch3-A.css)
   Agent A pages: pdf-to-jpg, jpg-to-pdf, pdf-compressor,
                  pdf-organizer, pdf-studio
   site.css ko edit NAHI kiya gaya.

   RULES (task se):
   - Saari nayi classes YAHI file mein hain, `.b3a-` prefix ke saath.
   - Koi inline <style> nahi, koi Google Fonts link nahi, kahin Syne nahi.
   - NO :root token overrides — theme tokens (--ink, --muted, --surface*,
     --line*, --green, --red, --r-*, --tr) site.css se liye gaye hain.
     Yellow accent (#f5c518) literal hai — tools ka apna brand color.
   - Dark theme: koi hard-coded dark text nahi (buttons par dark text
     sirf yellow background par hai, jo readable hai).
   - Har page header ke baad is batch ko link karta hai:
       <link rel="stylesheet" href="/assets/css/migrate-batch3.css?v=1">

   JS-MANDATED EXCEPTIONS (in-page <script> inhe NAAM se use karta hai —
   className assignment / querySelector / classList / Sortable config.
   Rename KARNA MANA hai; sirf yahan restyle kiya gaya hai):
     pdf-to-jpg:   .pt-empty (innerHTML string), .pt-thumb / .pt-thumb-label /
                   .pt-thumb-dl (buildThumb className)
     jpg-to-pdf:   .jp-thumb / .jp-thumb-num / .jp-thumb-name / .jp-thumb-img-wrap /
                   .jp-thumb-actions / .jp-ta-btn (+ .del) (buildThumb className +
                   querySelectorAll), img.fill (updateFitPreview className),
                   .jp-toggle-btn / .jp-size-btn (closest + querySelectorAll),
                   .sortable-ghost / .sortable-chosen (Sortable ghostClass/chosenClass)
     pdf-compressor: .pc-thumb / .pc-thumb-label / .pc-more-label (className),
                   .pc-level-btn (querySelectorAll), .pc-result-banner (+ .bigger)
                   (banner.className assignment)
     pdf-organizer: .po-card / .po-card__thumb / .po-card__actions / .po-card__action
                   (+ --rotate/--dup/--del/--replace) / .po-card__footer / .po-card__num
                   (buildCard className + querySelector), .po-dropzone--active (classList)
     pdf-studio:   .thumb-box (querySelectorAll + className),
                   .remove-btn / .rotate-btn / .page-number (className + querySelector)
   GENERIC TOGGLES (classList toggle/add/remove — naam same rakha gaya):
     .visible / .show / .active / .open / .drag-over
   ══════════════════════════════════════════════════════════════ */

/* ═══════════════ 1. SHARED BITS ═══════════════ */

/* Badge pill (page hero) */
.b3a-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(245,197,24,.12); border: 1px solid rgba(245,197,24,.25);
  color: #f5c518; font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 100px; margin-bottom: 18px;
}

/* Stat pills row under the hero subtitle */
.b3a-stats {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 22px; margin-top: 22px; flex-wrap: wrap;
}
.b3a-stat { display: flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--muted); }
.b3a-dot { width: 7px; height: 7px; border-radius: 50%; background: #f5c518; flex-shrink: 0; }

/* Buttons — source ke .btn-primary/.btn-secondary yahan rename kiye gaye
   taake site.css ke .btn-* classes se takra na hon */
.b3a-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #f5c518; color: #0d0f14;
  font-family: var(--font-head); font-weight: 700; font-size: .95rem;
  padding: 14px 28px; border: none; border-radius: 100px; cursor: pointer;
  transition: background var(--tr), transform var(--tr);
}
.b3a-btn-primary:hover:not(:disabled) { background: #ffd43b; transform: translateY(-1px); }
.b3a-btn-primary:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.b3a-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--surface-2); color: var(--muted);
  font-family: var(--font-body); font-size: .9rem; font-weight: 600;
  padding: 14px 22px; border: 1px solid var(--line); border-radius: 100px; cursor: pointer;
  transition: border-color var(--tr), color var(--tr);
}
.b3a-btn-secondary:hover { border-color: var(--faint); color: var(--ink); }

/* SEO feature cards grid (shared) */
.b3a-seo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 24px 0; }
.b3a-seo-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 20px; }
.b3a-seo-card h3 { font-size: .95rem; font-weight: 700; color: #f5c518; margin: 0 0 8px; }
.b3a-seo-card p { font-size: .85rem; color: var(--muted); line-height: 1.55; margin: 0; }

/* Numbered steps (shared) */
.b3a-steps { counter-reset: b3a-steps; list-style: none; display: flex; flex-direction: column; gap: 14px; margin: 18px 0; padding: 0; }
.b3a-steps li { counter-increment: b3a-steps; display: flex; align-items: flex-start; gap: 14px; font-size: .9rem; color: var(--muted); }
.b3a-steps li::before {
  content: counter(b3a-steps); flex-shrink: 0;
  width: 26px; height: 26px; background: rgba(245,197,24,.15);
  border: 1px solid rgba(245,197,24,.3); color: #f5c518;
  font-weight: 700; font-size: .8rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}

/* Static FAQ (pdf-to-jpg, pdf-compressor — koi JS nahi) */
.b3a-faq { display: flex; flex-direction: column; gap: 12px; margin: 18px 0; }
.b3a-faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 16px 20px; }
.b3a-faq-item strong { display: block; font-size: .9rem; color: var(--ink); margin-bottom: 6px; }
.b3a-faq-item p { font-size: .85rem; color: var(--muted); margin: 0; }

/* Toasts — har page ka apna id, ek hi look */
#pt-toast, #jp-toast, #pc-toast {
  position: fixed; bottom: 32px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--surface-3); border: 1px solid var(--line);
  border-radius: 100px; padding: 10px 20px;
  font-size: .85rem; color: var(--ink);
  opacity: 0; pointer-events: none; z-index: 9999;
  transition: opacity .25s ease, transform .25s ease; white-space: nowrap;
}
#pt-toast.show, #jp-toast.show, #pc-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#jp-toast { bottom: 90px; } /* sticky bottom bar ke upar */

/* ═══════════════ 2. PDF TO JPG (pt-* → b3a-pj-*) ═══════════════ */

.b3a-pj-upload {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 48px 28px; border: 2px dashed var(--line); border-radius: var(--r-lg);
  cursor: pointer; transition: border-color var(--tr), background var(--tr);
  position: relative; text-align: center; background: var(--surface-2);
}
.b3a-pj-upload:hover, .b3a-pj-upload.drag-over { border-color: #f5c518; background: rgba(245,197,24,.05); }
.b3a-pj-upload input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.b3a-pj-upload-icon {
  width: 64px; height: 64px; background: rgba(245,197,24,.12); border-radius: 16px;
  display: flex; align-items: center; justify-content: center; font-size: 28px; flex-shrink: 0;
}
.b3a-pj-upload h3 { font-size: 1.15rem; font-weight: 700; color: var(--ink); margin: 0; }
.b3a-pj-upload p { font-size: .88rem; color: var(--muted); max-width: 340px; margin: 0; }
.b3a-pj-upload-cta {
  background: #f5c518; color: #0d0f14; font-weight: 700; font-size: .88rem;
  padding: 10px 24px; border-radius: 100px; pointer-events: none;
}

/* Toolbar (JS toggles .visible) */
.b3a-pj-toolbar { display: none; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 16px; }
.b3a-pj-toolbar.visible { display: flex; }
.b3a-pj-count { font-size: .85rem; color: var(--muted); }
.b3a-pj-count strong { color: #f5c518; font-weight: 700; }
.b3a-pj-quality { display: flex; align-items: center; gap: 10px; font-size: .82rem; color: var(--muted); }
.b3a-pj-quality input[type=range] { width: 100px; accent-color: #f5c518; }
#qualityVal { color: #f5c518; font-weight: 700; min-width: 32px; }

/* Progress (JS toggles .visible) */
.b3a-pj-progress-wrap { display: none; padding-top: 16px; }
.b3a-pj-progress-wrap.visible { display: block; }
.b3a-pj-progress-bar { height: 4px; background: var(--surface-3); border-radius: 4px; overflow: hidden; }
.b3a-pj-progress-fill { height: 100%; background: #f5c518; border-radius: 4px; width: 0%; transition: width .2s ease; }
.b3a-pj-progress-label { font-size: .78rem; color: var(--muted); margin-top: 6px; }

/* Preview grid */
.b3a-pj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; padding-top: 16px; min-height: 60px; }

/* JS-MANDATED: buildThumb() / showEmpty() inhe className/innerHTML se set karte hain */
.pt-empty { grid-column: 1 / -1; text-align: center; color: var(--muted); font-size: .9rem; padding: 32px 0; }
.pt-thumb {
  position: relative; border-radius: var(--r-sm); overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line); cursor: pointer;
  transition: transform var(--tr), border-color var(--tr); aspect-ratio: .707;
}
.pt-thumb:hover { transform: translateY(-3px); border-color: #f5c518; }
.pt-thumb canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-thumb-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.75));
  padding: 18px 8px 6px; font-size: .72rem; color: #fff; text-align: center; font-weight: 600;
}
.pt-thumb-dl {
  position: absolute; top: 6px; right: 6px;
  background: #f5c518; color: #0d0f14; border: none; border-radius: 6px;
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; cursor: pointer; opacity: 0; transition: opacity var(--tr);
}
.pt-thumb:hover .pt-thumb-dl { opacity: 1; }

/* Actions */
.b3a-pj-actions { display: flex; gap: 12px; padding-top: 20px; flex-wrap: wrap; }
.b3a-pj-actions .b3a-btn-primary { flex: 1; min-width: 160px; }

@media (max-width: 600px) {
  .b3a-pj-upload { padding: 36px 18px; }
  .b3a-pj-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
}

/* ═══════════════ 3. JPG TO PDF (jp-* → b3a-jp-*) ═══════════════ */

/* Dropzone */
.b3a-jp-dropzone {
  position: relative; border: 2px dashed var(--line); border-radius: var(--r-xl);
  background: var(--surface); padding: 56px 28px; cursor: pointer; text-align: center;
  transition: border-color var(--tr), background var(--tr);
}
.b3a-jp-dropzone:hover, .b3a-jp-dropzone.drag-over { border-color: #f5c518; background: rgba(245,197,24,.03); }
.b3a-jp-dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.b3a-jp-drop-icon {
  width: 72px; height: 72px; background: rgba(245,197,24,.12);
  border: 1px solid rgba(245,197,24,.22); border-radius: 18px; font-size: 28px;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 18px;
  transition: transform var(--tr);
}
.b3a-jp-dropzone:hover .b3a-jp-drop-icon { transform: scale(1.07) translateY(-2px); }
.b3a-jp-drop-title { font-size: 1.2rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.b3a-jp-drop-sub { font-size: .88rem; color: var(--faint); margin-bottom: 22px; }
.b3a-jp-drop-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: #f5c518; color: #0d0f14; font-weight: 700; font-size: .9rem;
  padding: 13px 30px; border-radius: 100px; border: none; cursor: pointer; pointer-events: none;
}
.b3a-jp-formats { margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: .74rem; color: var(--faint); }
.b3a-jp-fmt { background: var(--surface-2); border: 1px solid var(--line); padding: 2px 8px; border-radius: 4px; font-weight: 600; color: var(--muted); font-size: .7rem; }
.b3a-jp-features { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 24px; flex-wrap: wrap; }
.b3a-jp-feature { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--faint); }
.b3a-jp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; }

/* Work state (JS: style.display on uploadState, classList 'visible' on workState) */
.b3a-jp-upload-state {} /* structural: visible by default; JS hides it via inline display:none */
.b3a-jp-work-state { display: none; }
.b3a-jp-work-state.visible { display: block; }

/* Workspace layout */
.b3a-jp-workspace { display: grid; grid-template-columns: 1fr 260px; gap: 20px; align-items: start; }

/* Grid area (structural wrapper for toolbar + thumbnail grid) */
.b3a-jp-grid-area { min-width: 0; }

/* Grid toolbar */
.b3a-jp-grid-toolbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding: 12px 16px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: none;
}
.b3a-jp-toolbar-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.b3a-jp-page-count { font-size: .84rem; color: var(--muted); }
.b3a-jp-page-count strong { color: #f5c518; font-weight: 700; }
.b3a-jp-hint { display: flex; align-items: center; gap: 5px; font-size: .74rem; color: var(--faint); }
.b3a-jp-add-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; font-weight: 600; color: var(--muted);
  background: var(--surface-2); border: 1px dashed var(--line);
  border-radius: 100px; padding: 6px 14px; cursor: pointer;
  transition: color var(--tr), border-color var(--tr); position: relative;
}
.b3a-jp-add-label input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.b3a-jp-add-label:hover { color: #f5c518; border-color: #f5c518; }
.b3a-jp-grid-box { background: var(--surface); border: 1px solid var(--line); border-radius: 0 0 var(--r-lg) var(--r-lg); padding: 16px; min-height: 200px; }
.b3a-jp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.b3a-jp-grid:empty::after { content: 'No images yet'; color: var(--faint); font-size: .85rem; grid-column: 1/-1; text-align: center; padding: 32px 0; }

/* JS-MANDATED: buildThumb() classNames + syncImagesFromDOM/renumberThumbs/updateFitPreview queries */
.jp-thumb {
  position: relative; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); overflow: hidden; cursor: grab;
  transition: transform var(--tr), border-color var(--tr), box-shadow var(--tr); user-select: none;
}
.jp-thumb:hover { border-color: var(--faint); transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.4); }
.jp-thumb.sortable-ghost { opacity: .3; border: 2px dashed #f5c518; }
.jp-thumb.sortable-chosen { box-shadow: 0 16px 40px rgba(0,0,0,.5); z-index: 10; cursor: grabbing; }
.jp-thumb-img-wrap { aspect-ratio: .75; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #111; }
.jp-thumb-img-wrap img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.jp-thumb-img-wrap img.fill { object-fit: cover; }
.jp-thumb-num {
  position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.7); color: #fff;
  font-size: .64rem; font-weight: 700; padding: 2px 7px; border-radius: 100px; pointer-events: none;
}
.jp-thumb-name {
  padding: 6px 8px; font-size: .66rem; color: var(--faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-top: 1px solid var(--line); background: var(--surface-2);
}
.jp-thumb-actions { display: flex; gap: 4px; position: absolute; top: 6px; right: 6px; opacity: 0; transition: opacity var(--tr); }
.jp-thumb:hover .jp-thumb-actions { opacity: 1; }
.jp-ta-btn {
  width: 26px; height: 26px; background: rgba(13,15,20,.82); color: var(--muted);
  border: 1px solid var(--line); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: .75rem; transition: color var(--tr), background var(--tr), border-color var(--tr);
}
.jp-ta-btn:hover { background: var(--surface-3); color: var(--ink); border-color: var(--line); }
.jp-ta-btn.del:hover { color: var(--red); border-color: rgba(255,107,107,.3); background: rgba(255,107,107,.1); }

/* Sidebar / settings panels */
.b3a-jp-sidebar { display: flex; flex-direction: column; gap: 12px; }
.b3a-jp-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.b3a-jp-panel-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: .82rem; font-weight: 700; color: var(--muted); }
.b3a-jp-panel-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.b3a-jp-toggle-group { display: flex; gap: 6px; }
/* JS-MANDATED: .jp-toggle-btn / .jp-size-btn — closest() + querySelectorAll() + 'active' toggle */
.jp-toggle-btn, .jp-size-btn {
  flex: 1; padding: 8px 6px; text-align: center;
  font-size: .8rem; font-weight: 600; color: var(--faint);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); cursor: pointer;
  transition: color var(--tr), border-color var(--tr), background var(--tr);
}
.jp-toggle-btn:hover, .jp-size-btn:hover { color: var(--ink); border-color: var(--faint); }
.jp-toggle-btn.active, .jp-size-btn.active { color: #f5c518; border-color: #f5c518; background: rgba(245,197,24,.12); font-weight: 700; }
.b3a-jp-size-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.jp-size-btn { font-size: .78rem; }
.b3a-jp-margin-row, .b3a-jp-quality-row { display: flex; flex-direction: column; gap: 6px; }
.b3a-jp-row-label { font-size: .74rem; color: var(--faint); font-weight: 600; display: flex; justify-content: space-between; }
.b3a-jp-row-label span { color: #f5c518; font-weight: 700; }
input[type="range"].b3a-jp-slider {
  width: 100%; height: 4px; -webkit-appearance: none; appearance: none;
  background: var(--surface-3); border-radius: 4px; outline: none; cursor: pointer;
}
input[type="range"].b3a-jp-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px;
  border-radius: 50%; background: #f5c518; border: 2px solid var(--surface); cursor: pointer;
}
input[type="range"].b3a-jp-slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: #f5c518; border: 2px solid var(--surface); cursor: pointer;
}

/* Progress (JS toggles .visible) */
.b3a-jp-progress { display: none; margin-bottom: 12px; }
.b3a-jp-progress.visible { display: block; }
.b3a-jp-progress-bar { height: 3px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.b3a-jp-progress-fill { height: 100%; background: #f5c518; border-radius: 3px; width: 0%; transition: width .2s ease; }
.b3a-jp-progress-label { font-size: .75rem; color: var(--faint); margin-top: 5px; }

/* Sticky bottom bar (JS toggles .visible) */
.b3a-jp-bottom-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  background: rgba(7,10,13,.95); border-top: 1px solid var(--line);
  backdrop-filter: blur(16px); display: none;
}
.b3a-jp-bottom-bar.visible { display: block; }
.b3a-jp-bottom-inner { max-width: 1080px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.b3a-jp-bottom-info { font-size: .84rem; color: var(--muted); }
.b3a-jp-bottom-info strong { color: #f5c518; font-weight: 700; }
.b3a-jp-bottom-btns { display: flex; gap: 10px; }

/* FAQ accordion — .jp-faq-item/.jp-faq-q JS-mandated (closest + querySelectorAll + 'open') */
.b3a-jp-faq { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.jp-faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.jp-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; cursor: pointer; font-size: .88rem; font-weight: 700; color: var(--ink); user-select: none; transition: background var(--tr); }
.jp-faq-q:hover { background: var(--surface-2); }
.b3a-jp-faq-chevron { flex-shrink: 0; color: var(--faint); transition: transform var(--tr); }
.jp-faq-item.open .b3a-jp-faq-chevron { transform: rotate(180deg); color: #f5c518; }
.jp-faq-item.open .jp-faq-q { color: #f5c518; }
.b3a-jp-faq-a { display: none; padding: 12px 18px 14px; font-size: .84rem; color: var(--faint); line-height: 1.7; border-top: 1px solid var(--line); }
.jp-faq-item.open .b3a-jp-faq-a { display: block; }

@media (max-width: 860px) {
  .b3a-jp-workspace { grid-template-columns: 1fr; }
  .b3a-jp-sidebar { flex-direction: row; flex-wrap: wrap; }
  .b3a-jp-panel { flex: 1 1 220px; }
}
@media (max-width: 600px) {
  .b3a-jp-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
  .b3a-jp-bottom-inner { padding: 12px 16px; }
  .b3a-jp-bottom-btns { width: 100%; }
  .b3a-jp-bottom-btns .b3a-btn-primary, .b3a-jp-bottom-btns .b3a-btn-secondary { flex: 1; }
}

/* ═══════════════ 4. PDF COMPRESSOR (pc-* → b3a-pc-*) ═══════════════ */

.b3a-pc-upload {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 48px 28px; border: 2px dashed var(--line); border-radius: var(--r-lg);
  cursor: pointer; transition: border-color var(--tr), background var(--tr);
  text-align: center; background: var(--surface-2); position: relative;
}
.b3a-pc-upload:hover, .b3a-pc-upload.drag-over { border-color: #f5c518; background: rgba(245,197,24,.05); }
.b3a-pc-upload input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.b3a-pc-upload-icon {
  width: 64px; height: 64px; background: rgba(245,197,24,.12); border-radius: 16px;
  display: flex; align-items: center; justify-content: center; font-size: 28px; flex-shrink: 0;
}
.b3a-pc-upload h3 { font-size: 1.15rem; font-weight: 700; color: var(--ink); margin: 0; }
.b3a-pc-upload p { font-size: .88rem; color: var(--muted); max-width: 340px; margin: 0; }
.b3a-pc-upload-cta {
  background: #f5c518; color: #0d0f14; font-weight: 700; font-size: .88rem;
  padding: 10px 24px; border-radius: 100px; pointer-events: none;
}

/* File info bar (JS toggles .visible) */
.b3a-pc-file-bar {
  display: none; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-md);
  margin-bottom: 16px; font-size: .86rem;
}
.b3a-pc-file-bar.visible { display: flex; }
.b3a-pc-file-icon { font-size: 1.2rem; flex-shrink: 0; }
.b3a-pc-file-name { color: var(--ink); font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b3a-pc-file-size { color: var(--muted); flex-shrink: 0; }

/* Progress (JS toggles .visible) */
.b3a-pc-progress-wrap { display: none; padding: 4px 0 16px; }
.b3a-pc-progress-wrap.visible { display: block; }
.b3a-pc-progress-bar { height: 4px; background: var(--surface-3); border-radius: 4px; overflow: hidden; }
.b3a-pc-progress-fill { height: 100%; background: #f5c518; border-radius: 4px; width: 0%; transition: width .18s ease; }
.b3a-pc-progress-label { font-size: .78rem; color: var(--muted); margin-top: 6px; }

/* Preview grid */
.b3a-pc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; padding: 4px 0; }

/* JS-MANDATED: handleFile() sets these classNames */
.pc-thumb { position: relative; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); aspect-ratio: .707; transition: transform var(--tr); }
.pc-thumb:hover { transform: translateY(-2px); }
.pc-thumb canvas { width: 100%; height: 100%; display: block; }
.pc-thumb-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.7));
  color: #fff; font-size: .68rem; font-weight: 700;
  text-align: center; padding: 14px 4px 5px; pointer-events: none;
}
.pc-more-label {
  display: flex; align-items: center; justify-content: center; aspect-ratio: .707;
  background: var(--surface-2); border: 1px dashed var(--line); border-radius: var(--r-sm);
  color: var(--muted); font-size: .82rem; font-weight: 600;
}

/* Compression level buttons (JS: querySelectorAll('.pc-level-btn') + 'active') */
.b3a-pc-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-top: 16px; }
.pc-level-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 12px; background: var(--surface-2); border: 2px solid var(--line);
  border-radius: var(--r-sm); cursor: pointer; color: var(--ink);
  transition: border-color var(--tr), background var(--tr); text-align: center;
}
.pc-level-btn:hover { border-color: rgba(245,197,24,.4); }
.pc-level-btn.active { border-color: #f5c518; background: rgba(245,197,24,.07); }
.b3a-pc-level-icon { font-size: 1.4rem; }
.b3a-pc-level-name { font-size: .88rem; font-weight: 700; color: var(--ink); }
.b3a-pc-level-desc { font-size: .74rem; color: var(--muted); line-height: 1.4; }
.pc-level-btn.active .b3a-pc-level-name { color: #f5c518; }

/* Stats cards */
.b3a-pc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 16px 0; }
.b3a-pc-stat-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 16px 18px; text-align: center; }
.b3a-pc-stat-val { font-size: 1.3rem; font-weight: 800; color: var(--ink); line-height: 1; margin-bottom: 5px; }
.b3a-pc-stat-val--accent { color: #f5c518; }
.b3a-pc-stat-val--green { color: var(--green); }
.b3a-pc-stat-lbl { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

/* Result banner (JS: banner.className = 'pc-result-banner visible [+ bigger]') */
.pc-result-banner {
  display: none; align-items: center; gap: 14px; margin: 0 0 16px; padding: 16px 20px;
  background: rgba(55,242,162,.08); border: 1px solid rgba(55,242,162,.25);
  border-radius: var(--r-sm); font-size: .9rem; color: var(--ink);
}
.pc-result-banner.visible { display: flex; }
.b3a-pc-result-banner-icon { font-size: 1.4rem; flex-shrink: 0; }
.pc-result-banner strong { color: var(--green); }
.pc-result-banner.bigger { background: rgba(255,107,107,.07); border-color: rgba(255,107,107,.2); }
.pc-result-banner.bigger strong { color: var(--red); }

/* Actions */
.b3a-pc-actions { display: flex; gap: 12px; padding-top: 4px; flex-wrap: wrap; }
.b3a-pc-actions .b3a-btn-primary { flex: 1; min-width: 160px; }

@media (max-width: 640px) {
  .b3a-pc-upload { padding: 36px 18px; }
  .b3a-pc-levels { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 420px) {
  .b3a-pc-stats { grid-template-columns: 1fr; }
}

/* ═══════════════ 5. PDF ORGANIZER (po-* → b3a-po-*) ═══════════════ */

.b3a-po-dropzone {
  border: 2px dashed var(--line); border-radius: var(--r-lg);
  background: var(--surface); padding: 52px 28px; text-align: center;
  cursor: pointer; transition: border-color .2s, background .2s, transform .15s;
  position: relative;
}
.b3a-po-dropzone:hover, .b3a-po-dropzone.po-dropzone--active {
  border-color: #f5c518; background: rgba(245,197,24,.04); transform: translateY(-2px);
}
.b3a-po-dropzone-icon {
  width: 68px; height: 68px; background: var(--surface-2); border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 32px; margin-bottom: 18px; border: 1px solid var(--line);
}
.b3a-po-dropzone h2 { font-size: 1.2rem; font-weight: 700; color: var(--ink); margin: 0 0 8px; }
.b3a-po-dropzone p { color: var(--muted); font-size: .92rem; margin: 0 0 24px; line-height: 1.55; }
.b3a-po-dropzone-btn {
  display: inline-block; background: #f5c518; color: #111;
  font-size: .93rem; font-weight: 700; padding: 12px 34px;
  border-radius: var(--r-sm); cursor: pointer; border: none; letter-spacing: .3px;
  transition: background .2s, box-shadow .2s, transform .15s;
}
.b3a-po-dropzone-btn:hover { background: #ffd43b; box-shadow: 0 4px 20px rgba(245,197,24,.3); transform: translateY(-1px); }

/* Toolbar (JS toggles .visible) */
.b3a-po-toolbar {
  display: none; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 14px 20px; margin-top: 20px;
}
.b3a-po-toolbar.visible { display: flex; }
.b3a-po-toolbar-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.b3a-po-toolbar-count {
  font-size: .82rem; font-weight: 700; color: #f5c518;
  background: rgba(245,197,24,.12); padding: 4px 12px; border-radius: 20px; letter-spacing: .3px;
}
.b3a-po-toolbar-add {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .85rem; font-weight: 600; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 7px 14px; cursor: pointer; transition: border-color .2s, color .2s;
}
.b3a-po-toolbar-add:hover { border-color: #f5c518; color: #f5c518; }
.b3a-po-toolbar-right { display: flex; align-items: center; gap: 10px; }
.b3a-po-clear {
  font-size: .85rem; font-weight: 600; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 9px 18px; cursor: pointer; transition: border-color .2s, color .2s;
}
.b3a-po-clear:hover { border-color: var(--red); color: var(--red); }

/* Page grid */
.b3a-po-grid { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; min-height: 60px; }

/* JS-MANDATED: buildCard() classNames + querySelector() + Sortable classes */
.po-card {
  position: relative; width: 148px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: visible;
  cursor: grab; transition: border-color .2s, box-shadow .2s, transform .2s; user-select: none;
}
.po-card:hover {
  border-color: #f5c518;
  box-shadow: 0 0 0 2px rgba(245,197,24,.12), 0 8px 24px rgba(0,0,0,.35);
  transform: translateY(-3px);
}
.po-card.sortable-ghost { opacity: .3; }
.po-card.sortable-chosen { cursor: grabbing; border-color: #f5c518; box-shadow: 0 12px 32px rgba(0,0,0,.5); transform: scale(1.04) rotate(1deg); }
.po-card__thumb {
  position: relative; width: 148px; height: 192px; overflow: hidden;
  border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
}
.po-card__thumb canvas { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .3s ease; display: block; }
.po-card__actions {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: flex-end; gap: 3px;
  padding: 6px 6px 0; opacity: 0; transition: opacity .18s; z-index: 10;
}
.po-card:hover .po-card__actions { opacity: 1; }
.po-card__action {
  width: 27px; height: 27px; border-radius: 6px; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; transition: transform .15s, filter .15s; flex-shrink: 0;
}
.po-card__action:hover { transform: scale(1.18); filter: brightness(1.15); }
.po-card__action--rotate  { background: #3b82f6; color: #fff; }
.po-card__action--dup     { background: #10b981; color: #fff; }
.po-card__action--del     { background: #ef4444; color: #fff; }
.po-card__action--replace { background: #f59e0b; color: #fff; }
.po-card__footer { display: flex; align-items: center; justify-content: center; padding: 7px 6px; border-top: 1px solid var(--line); }
.po-card__num { font-size: .72rem; font-weight: 700; color: var(--faint); letter-spacing: .5px; text-transform: uppercase; }

/* Processing overlay (JS toggles .visible) */
.b3a-po-processing {
  display: none; position: fixed; inset: 0;
  background: rgba(10,11,13,.75); z-index: 9999;
  align-items: center; justify-content: center; backdrop-filter: blur(4px);
}
.b3a-po-processing.visible { display: flex; }
.b3a-po-processing-box {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 36px 52px; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
.b3a-po-spinner {
  width: 46px; height: 46px; border: 3px solid var(--line); border-top-color: #f5c518;
  border-radius: 50%; animation: b3a-spin .65s linear infinite; margin: 0 auto 18px;
}
@keyframes b3a-spin { to { transform: rotate(360deg); } }
.b3a-po-processing-text { font-size: .95rem; font-weight: 600; color: var(--muted); }

/* Organizer SEO extras */
.b3a-po-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 20px 0; }
.b3a-po-step { background: var(--surface-2); border-radius: var(--r-lg); padding: 20px; border: 1px solid var(--line); border-left: 3px solid #f5c518; }
.b3a-po-step strong { display: block; font-size: .93rem; color: var(--ink); margin-bottom: 6px; }
.b3a-po-step span { font-size: .86rem; color: var(--muted); line-height: 1.55; }
.b3a-po-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 20px 0; }
.b3a-po-feature { display: flex; align-items: flex-start; gap: 10px; font-size: .88rem; color: var(--muted); }
.b3a-po-feature::before { content: "✓"; color: #f5c518; font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.b3a-po-faq { margin-top: 10px; }
.b3a-po-faq dt { font-size: .95rem; font-weight: 700; color: var(--ink); margin-top: 20px; margin-bottom: 6px; }
.b3a-po-faq dd { color: var(--muted); font-size: .9rem; line-height: 1.65; margin-left: 0; }

@media (max-width: 640px) {
  .po-card { width: 120px; }
  .po-card__thumb { width: 120px; height: 155px; }
  .b3a-po-toolbar { padding: 12px 14px; }
}

/* ═══════════════ 6. PDF STUDIO (source had no own CSS — new b3a-ps-* styles) ═══════════════ */

.b3a-ps-upload {
  border: 2px dashed var(--line); border-radius: var(--r-lg);
  background: var(--surface); padding: 48px 24px; text-align: center;
  cursor: pointer; transition: border-color var(--tr), background var(--tr);
}
.b3a-ps-upload:hover { border-color: #f5c518; background: rgba(245,197,24,.04); }
.b3a-ps-upload p { margin: 0; color: var(--muted); font-size: .95rem; }
.b3a-ps-grid { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 20px; min-height: 40px; }

/* JS-MANDATED: loadFiles()/updateNumbers() inhe className + querySelector se use karte hain */
.thumb-box {
  position: relative; width: 150px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
  cursor: grab; transition: border-color var(--tr), transform var(--tr);
}
.thumb-box:hover { border-color: #f5c518; transform: translateY(-2px); }
.thumb-box canvas { width: 100%; display: block; }
.remove-btn, .rotate-btn {
  position: absolute; top: 6px; width: 26px; height: 26px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; cursor: pointer; border: none; color: #fff;
  opacity: 0; transition: opacity .18s, transform .15s;
}
.thumb-box:hover .remove-btn, .thumb-box:hover .rotate-btn { opacity: 1; }
.remove-btn { right: 6px; background: #ef4444; }
.rotate-btn { right: 38px; background: #3b82f6; }
.remove-btn:hover, .rotate-btn:hover { transform: scale(1.15); }
.page-number {
  padding: 6px 8px; font-size: .68rem; font-weight: 600; color: var(--muted);
  text-align: center; border-top: 1px solid var(--line);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.b3a-ps-actions { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.b3a-ps-actions .b3a-btn-primary { flex: 1; min-width: 160px; }
.b3a-ps-filecount { margin-top: 14px; font-size: .85rem; color: var(--muted); }
.b3a-ps-filecount strong { color: #f5c518; }
.b3a-ps-upload.drag-over { border-color: #f5c518; background: rgba(245,197,24,.05); }

/* ── SECTION B ── */
/* ══════════════════════════════════════════════════════════════
   UPNIXTOOLS — IMAGE TOOLS MIGRATION STYLESHEET (migrate-batch3-B.css)
   Sirf build/tools/ ki 4 image pages ke liye:
     remove-background.php · image-resizer.php · jpg-to-png.php · png-to-jpg.php
   site.css / migrate-tools.css / migrate-calc.css / migrate-articles.css /
   header.php / footer.php ko edit NAHI kiya gaya.

   RULES (task se):
   - Saari nayi classes YAHI file mein hain, `.b3b-` prefix ke saath.
   - Koi inline <style> nahi, koi Google Fonts link nahi, kahin Syne nahi.
   - Koi :root token override nahi — sirf site.css ke maujooda tokens
     (--ink, --ink-soft, --muted, --faint, --accent, --accent-dim,
      --accent-glow, --green, --red, --amber, --surface*, --bg*,
      --line*, --glass, --r-*, --tr, --font-head, --font-mono).
   - Dark theme: koi hard-coded dark text nahi.
   - Har page is file ko schema ke baad link karta hai:
       <link rel="stylesheet" href="/assets/css/migrate-batch3.css?v=1">
       <link rel="stylesheet" href="/assets/css/migrate-batch3-B.css?v=1">
   - Source ke inline <style> blocks extract karke .b3b- classes mein
     convert kiye gaye; markup ke class names update kiye gaye — SIWAYE
     neeche di gayi JS-mandated exceptions ke.

   JS-MANDATED EXCEPTIONS (in-page <script> inhe naam se use karta hai,
   rename KARNA MANA hai — sirf yahan restyle kiya gaya hai):

   remove-background.php
     .rb-swatch / .rb-swatch.transp-sw / .rb-preset / .rb-crop-btn / .rb-fmt-btn
       — querySelectorAll / e.target.closest / resetAll() inhe naam se dhoondta hai
     .hidden / .visible / .drag-over / .active / .show
       — classList toggles: uploadState, resultState, dropZone, processingOv,
         errorBanner, cropActions, toolbar buttons, swatches, presets,
         crop/fmt buttons, rb-toast

   image-resizer.php
     .ir-mode-tab / .ir-fmt-btn / .ir-preset
       — closest() + querySelectorAll() inhe naam se use karte hain
     .visible / .drag-over / .active
       — classList toggles: workState, dropZone, mode tabs, fmt buttons
       (FAQ ab details/summary hai — exclusive open JS handler ke saath)
     .move-cursor / .default-cursor
       — canvas.className = 'move-cursor' / 'default-cursor' (poori className
         replace hoti hai, is liye ye naam bilkul same rehne chahiye)

   jpg-to-png.php  (NOTE: is page ka <script> IIFE mein WRAPPED NAHI hai —
     selectBg / downloadSingle / downloadAll / clearTool GLOBAL functions hain
     kyunke markup ke inline onclick attributes inhe call karte hain)
     .bg-swatch / .selected
       — selectBg() querySelectorAll('.bg-swatch') + classList 'selected'
     .queue-status / .done / .pending / .active
       — convertItem() el.className = 'queue-status active' / 'queue-status done'
     .drag-over / .has-items / .visible / .active
       — classList toggles: uploadBox, queueList, previewSection, uploadProgressBox

   png-to-jpg.php
     .pj-swatch / .active
       — bgSwatches click handler closest('.pj-swatch') + classList 'active'
     .hidden / .visible / .drag-over
       — classList toggles: uploadZone, previewArea, resultBanner
   ══════════════════════════════════════════════════════════════ */

/* ════════════════════════════
   1. SHARED COMPONENTS
   ════════════════════════════ */

/* Small pill badge above the h1 (tool-head) */
.b3b-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .74rem; font-weight: 700; letter-spacing: .1em;
  color: var(--accent); background: var(--accent-dim);
  border: 1px solid var(--accent-glow);
  padding: 5px 14px; border-radius: var(--r-pill); margin-bottom: 16px;
}

/* Dropzone inner content (site.css .dropzone shell ke andar) */
.dropzone.drag-over {
  border-color: var(--accent); background: var(--accent-dim);
  box-shadow: 0 0 40px var(--accent-glow), inset 0 0 40px rgba(49,206,255,.04);
}
.dropzone input[type="file"][hidden] { display: none; }
.b3b-dzicon {
  width: 72px; height: 72px; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; background: var(--accent-dim);
  border: 1px solid var(--accent-glow); border-radius: 18px;
  transition: transform var(--tr);
}
.dropzone:hover .b3b-dzicon { transform: scale(1.07) translateY(-2px); }
.b3b-dztitle { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; margin-bottom: 6px; color: var(--ink); }
.b3b-dzsub { font-size: .88rem; color: var(--muted); margin-bottom: 20px; }
.b3b-dzcta {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--accent); color: #062a33;
  font-family: var(--font-head); font-weight: 700; font-size: .9rem;
  padding: 12px 28px; border-radius: var(--r-pill);
  transition: filter var(--tr), transform var(--tr);
}
.dropzone:hover .b3b-dzcta { filter: brightness(1.1); }
.b3b-fmttags {
  margin-top: 16px; display: flex; align-items: center;
  justify-content: center; gap: 7px; flex-wrap: wrap;
  font-size: .74rem; color: var(--faint);
}
.b3b-fmttag {
  background: var(--surface-2); border: 1px solid var(--line);
  padding: 2px 8px; border-radius: 4px;
  font-weight: 600; color: var(--muted); font-size: .7rem;
}

/* Feature tick row (upload card ke neeche) */
.b3b-feats { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 24px; flex-wrap: wrap; }
.b3b-feat { display: flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--faint); }
.b3b-featdot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; }

/* SEO feature cards */
.b3b-seocards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 24px 0; }
.b3b-seocard { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px; }
.b3b-seocard h3 { font-size: .9rem; font-weight: 700; color: var(--accent); margin: 0 0 6px; }
.b3b-seocard p { font-size: .83rem; color: var(--muted); line-height: 1.55; margin: 0; }

/* Numbered how-to steps */
.b3b-steps { counter-reset: s; list-style: none; display: flex; flex-direction: column; gap: 11px; margin: 12px 0; padding: 0; }
.b3b-steps li { counter-increment: s; display: flex; align-items: flex-start; gap: 12px; font-size: .9rem; color: var(--ink-soft); line-height: 1.7; }
.b3b-steps li::before {
  content: counter(s); flex-shrink: 0; width: 24px; height: 24px;
  background: var(--accent-dim); border: 1px solid var(--accent-glow);
  color: var(--accent); font-weight: 700; font-size: .76rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}

/* Transparency checkerboard (decorative, dark-on-dark — text par asar nahi) */
.b3b-checker {
  background-image:
    linear-gradient(45deg, #1a222b 25%, transparent 25%),
    linear-gradient(-45deg, #1a222b 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1a222b 75%),
    linear-gradient(-45deg, transparent 75%, #1a222b 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

/* Toasts (IDs JS se fixed hain) */
#rb-toast, #ir-toast, #pj-toast {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--surface-3); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 10px 20px;
  font-size: .84rem; color: var(--ink);
  opacity: 0; pointer-events: none; z-index: 9999;
  transition: opacity .25s ease, transform .25s ease; white-space: nowrap;
  max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis;
}
#rb-toast.show, #ir-toast.show, #pj-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Range slider (image-resizer + png-to-jpg) */
input[type="range"].b3b-slider {
  width: 100%; height: 5px; -webkit-appearance: none; appearance: none;
  background: var(--line); border-radius: 4px; outline: none; cursor: pointer; margin: 0;
}
input[type="range"].b3b-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface); cursor: pointer;
  transition: transform var(--tr);
}
input[type="range"].b3b-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type="range"].b3b-slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface); cursor: pointer;
}

/* ════════════════════════════
   2. REMOVE BACKGROUND
   ════════════════════════════ */

/* Upload state: tool-grid.single wrapper par id="uploadState" hai;
   JS 'hidden' class toggle karta hai */
#uploadState.hidden { display: none; }

/* Result state */
.b3b-rb-result { display: none; }
.b3b-rb-result.visible { display: block; }
.b3b-rb-app {
  background: var(--glass); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  backdrop-filter: blur(8px);
}
.b3b-rb-split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; }

/* Canvas area */
.b3b-rb-canvas {
  position: relative; display: flex;
  align-items: center; justify-content: center;
  border-right: 1px solid var(--line);
  overflow: hidden; min-height: 480px; padding: 24px;
}
.b3b-rb-canvas .b3b-checker { position: absolute; inset: 0; opacity: .55; pointer-events: none; }
.b3b-rb-bglayer { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.b3b-rb-canvaswrap { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; }
#previewCanvas {
  display: block; max-width: 100%; max-height: calc(100vh - 220px);
  object-fit: contain; border-radius: var(--r-sm);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
}

/* Processing overlay (AI/model loading UI — behavior same, sirf styling nayi) */
.b3b-rb-processing {
  position: absolute; inset: 0; z-index: 20;
  background: rgba(7, 10, 13, .9);
  display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  backdrop-filter: blur(6px); text-align: center; padding: 20px;
}
.b3b-rb-processing.visible { display: flex; }
.b3b-rb-spinner {
  width: 56px; height: 56px;
  border: 3px solid var(--accent-dim);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: b3b-spin .7s linear infinite;
}
@keyframes b3b-spin { to { transform: rotate(360deg); } }
.b3b-rb-proctitle { font-family: var(--font-head); font-size: .95rem; font-weight: 700; color: var(--ink-soft); }
.b3b-rb-procsub { font-size: .8rem; color: var(--faint); }
.b3b-rb-procbarwrap { width: 180px; height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; }
.b3b-rb-procbar { height: 100%; background: var(--accent); border-radius: 3px; width: 0%; transition: width .3s ease; }

/* Canvas toolbar (Original / Result / New) */
.b3b-rb-toolbar {
  position: absolute; bottom: 18px; left: 50%;
  transform: translateX(-50%); z-index: 10;
  display: flex; align-items: center; gap: 6px;
  background: rgba(13, 18, 23, .92); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 6px 10px;
  backdrop-filter: blur(10px);
}
.b3b-rb-tbbtn {
  display: flex; align-items: center; gap: 5px;
  font-size: .74rem; font-weight: 600; color: var(--faint);
  background: transparent; border: none; cursor: pointer;
  padding: 5px 10px; border-radius: var(--r-pill);
  transition: color var(--tr), background var(--tr);
  white-space: nowrap; font-family: var(--font-body);
}
.b3b-rb-tbbtn:hover { color: var(--ink); background: var(--surface-3); }
.b3b-rb-tbbtn.active { color: var(--accent); background: var(--accent-dim); }
.b3b-rb-tbsep { width: 1px; height: 16px; background: var(--line); flex-shrink: 0; }

/* Sidebar */
.b3b-rb-side { display: flex; flex-direction: column; background: var(--bg-soft); overflow-y: auto; max-height: 78vh; }
.b3b-rb-sidetop {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.b3b-rb-sideh { font-family: var(--font-head); font-size: .88rem; font-weight: 800; color: var(--ink); }
.b3b-rb-newbtn {
  font-size: .74rem; font-weight: 600; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--line);
  padding: 5px 12px; border-radius: var(--r-pill); cursor: pointer;
  transition: color var(--tr), border-color var(--tr); font-family: var(--font-body);
}
.b3b-rb-newbtn:hover { color: var(--accent); border-color: var(--accent); }

.b3b-rb-sec { padding: 16px 18px; border-bottom: 1px solid var(--line); }
.b3b-rb-lbl { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 10px; }

/* Error banner */
.b3b-rb-err {
  display: none; align-items: center; gap: 10px;
  margin: 12px 18px 0; padding: 12px 16px;
  background: rgba(255, 107, 107, .08); border: 1px solid rgba(255, 107, 107, .25);
  border-radius: var(--r-sm); font-size: .84rem; color: #ff9d9d;
}
.b3b-rb-err.visible { display: flex; }

/* Background swatches — .rb-swatch naam JS-mandated hai */
.b3b-rb-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; margin-bottom: 10px; }
.rb-swatch {
  aspect-ratio: 1; border-radius: 6px;
  border: 2px solid transparent; cursor: pointer;
  transition: transform var(--tr), border-color var(--tr);
  position: relative; padding: 0; background-clip: padding-box;
}
.rb-swatch:hover { transform: scale(1.12); }
.rb-swatch.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.rb-swatch.transp-sw {
  background-image:
    linear-gradient(45deg, #2a3542 25%, transparent 25%),
    linear-gradient(-45deg, #2a3542 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #2a3542 75%),
    linear-gradient(-45deg, transparent 75%, #2a3542 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
  background-color: var(--surface-2);
}
.rb-swatch.transp-sw::after {
  content: '✕'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .55rem; color: var(--faint); font-weight: 700;
}

/* Gradient presets — .rb-preset naam JS-mandated hai */
.b3b-rb-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.rb-preset {
  aspect-ratio: 1; border-radius: 6px;
  border: 2px solid transparent; cursor: pointer;
  transition: transform var(--tr), border-color var(--tr); padding: 0;
}
.rb-preset:hover { transform: scale(1.1); }
.rb-preset.active { border-color: var(--accent); }

/* Custom colour row */
.b3b-rb-customrow { display: flex; align-items: center; gap: 8px; }
.b3b-rb-cwrap { position: relative; width: 32px; height: 32px; flex-shrink: 0; }
.b3b-rb-cprev { width: 32px; height: 32px; border-radius: 6px; border: 2px solid var(--line); cursor: pointer; transition: border-color var(--tr); }
.b3b-rb-cprev:hover { border-color: var(--accent); }
#customColorInput { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.b3b-rb-clabel { font-size: .78rem; color: var(--ink-soft); flex: 1; }
#customHex {
  font-family: var(--font-mono); font-size: .76rem; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 5px; padding: 4px 8px; width: 70px; outline: none;
  transition: border-color var(--tr);
}
#customHex:focus { border-color: var(--accent); }

/* Crop mode buttons — .rb-crop-btn naam JS-mandated hai */
.b3b-rb-cropgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rb-crop-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 6px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); cursor: pointer;
  font-size: .73rem; font-weight: 600; color: var(--muted);
  transition: border-color var(--tr), background var(--tr), color var(--tr);
  text-align: center; line-height: 1.3; font-family: var(--font-body);
}
.rb-crop-btn:hover { border-color: var(--faint); color: var(--ink); }
.rb-crop-btn.active { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); }
.b3b-rb-cropicon { font-size: 1.1rem; }

/* Crop action buttons */
.b3b-rb-cropactions { display: none; flex-direction: column; gap: 7px; margin-top: 10px; }
.b3b-rb-cropactions.visible { display: flex; }
.b3b-rb-abtn {
  width: 100%; padding: 11px; border-radius: var(--r-pill);
  font-family: var(--font-head); font-weight: 700; font-size: .83rem;
  cursor: pointer; transition: opacity var(--tr), transform var(--tr);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.b3b-rb-abtn:hover { opacity: .88; transform: translateY(-1px); }
.b3b-rb-abtn-ok { background: var(--green); color: #062a1c; border: none; }
.b3b-rb-abtn-ghost { background: var(--surface-3); color: var(--ink-soft); border: 1px solid var(--line); }

/* Format toggle — .rb-fmt-btn naam JS-mandated hai */
.b3b-rb-fmtrow { display: flex; gap: 7px; }
.rb-fmt-btn {
  flex: 1; padding: 8px 0; text-align: center;
  font-size: .78rem; font-weight: 600; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); cursor: pointer;
  transition: color var(--tr), border-color var(--tr), background var(--tr);
  font-family: var(--font-body);
}
.rb-fmt-btn:hover { color: var(--ink); border-color: var(--faint); }
.rb-fmt-btn.active { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); font-weight: 700; }

/* Download area */
.b3b-rb-dl { padding: 16px 18px; margin-top: auto; border-top: 1px solid var(--line); flex-shrink: 0; }
.b3b-rb-dlinfo { display: flex; align-items: center; justify-content: space-between; font-size: .76rem; color: var(--faint); margin-bottom: 10px; }
.b3b-rb-dlinfo span:last-child { color: var(--ink-soft); font-weight: 600; }
.b3b-rb-dlbtn {
  width: 100%; background: var(--accent); color: #062a33;
  font-family: var(--font-head); font-weight: 700; font-size: .92rem;
  padding: 14px; border: none; border-radius: var(--r-pill); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: filter var(--tr), transform var(--tr);
}
.b3b-rb-dlbtn:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.b3b-rb-dlbtn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* Paste button */
.b3b-extras { display: flex; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; justify-content: center; }
.b3b-paste {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface-2); color: var(--ink-soft);
  font-family: var(--font-body); font-weight: 600; font-size: .85rem;
  padding: 10px 20px; border-radius: var(--r-pill); border: 1px solid var(--line);
  cursor: pointer; transition: border-color var(--tr), color var(--tr);
}
.b3b-paste:hover { border-color: var(--accent); color: var(--accent); }
.b3b-paste kbd {
  background: var(--surface-3); border: 1px solid var(--line); border-radius: 4px;
  padding: 1px 5px; font-family: var(--font-mono); font-size: .72rem; color: var(--muted);
}

/* ════════════════════════════
   3. IMAGE RESIZER
   ════════════════════════════ */

/* Work state — id="workState", JS 'visible' toggle karta hai */
.b3b-ir-work { display: none; }
.b3b-ir-work.visible { display: block; }
.b3b-ir-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; }

/* Canvas panel */
.b3b-ir-ctoolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; padding: 12px 16px;
  background: var(--glass); border: 1px solid var(--line);
  border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: none;
}
.b3b-ir-cinfo { font-size: .82rem; color: var(--ink-soft); }
.b3b-ir-cinfo strong { color: var(--accent); font-weight: 700; }
.b3b-ir-cact { display: flex; gap: 8px; align-items: center; }
.b3b-ir-modetabs { display: flex; gap: 4px; }
/* .ir-mode-tab naam JS-mandated hai (tabResize/tabCrop + classList 'active') */
.ir-mode-tab {
  padding: 6px 14px; font-size: .78rem; font-weight: 600; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill);
  cursor: pointer; transition: color var(--tr), border-color var(--tr), background var(--tr);
  font-family: var(--font-body);
}
.ir-mode-tab.active { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }

.b3b-ir-canvasbox {
  background: var(--glass); border: 1px solid var(--line);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 400px; padding: 20px;
}
.b3b-ir-canvasbox::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(45deg, #141b22 25%, transparent 25%),
    linear-gradient(-45deg, #141b22 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #141b22 75%),
    linear-gradient(-45deg, transparent 75%, #141b22 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  opacity: .4; pointer-events: none;
}
#mainCanvas {
  position: relative; z-index: 1;
  display: block; max-width: 100%; max-height: 60vh;
  object-fit: contain; cursor: crosshair;
}
/* ye dono class names JS set karta hai (canvas.className = ...) — rename MANA */
#mainCanvas.move-cursor { cursor: move; }
#mainCanvas.default-cursor { cursor: default; }

.b3b-ir-crophint {
  position: absolute; bottom: 12px; left: 50%;
  transform: translateX(-50%); z-index: 5;
  background: rgba(7, 10, 13, .85); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 7px 16px;
  font-size: .76rem; color: var(--ink-soft);
  display: none; white-space: nowrap; backdrop-filter: blur(6px);
}
.b3b-ir-crophint.visible { display: block; }

/* Sidebar panels */
.b3b-ir-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.b3b-ir-panel { background: var(--glass); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.b3b-ir-panelh {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  font-family: var(--font-head); font-size: .8rem; font-weight: 700; color: var(--ink-soft);
}
.b3b-ir-panelh svg { color: var(--accent); flex-shrink: 0; }
.b3b-ir-panelb { padding: 16px; display: flex; flex-direction: column; gap: 12px; }

/* Dimension inputs */
.b3b-ir-dimrow { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: end; }
.b3b-ir-ig { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.b3b-ir-ig label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); }
.b3b-ir-num {
  width: 100%; height: 42px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 0 12px;
  font-family: var(--font-body); font-size: .92rem; color: var(--ink);
  outline: none; transition: border-color var(--tr), box-shadow var(--tr);
  text-align: center;
}
.b3b-ir-num:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.b3b-ir-x { font-size: .8rem; color: var(--faint); padding-bottom: 10px; text-align: center; }

/* Lock ratio toggle */
.b3b-ir-lockrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.b3b-ir-locklbl { font-size: .82rem; color: var(--ink-soft); }
.b3b-ir-toggle { position: relative; width: 38px; height: 22px; cursor: pointer; flex-shrink: 0; }
.b3b-ir-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.b3b-ir-ttrack {
  position: absolute; inset: 0;
  background: var(--surface-3); border: 1px solid var(--line);
  border-radius: var(--r-pill);
  transition: background var(--tr), border-color var(--tr);
}
.b3b-ir-toggle input:checked + .b3b-ir-ttrack { background: var(--accent-dim); border-color: var(--accent-glow); }
.b3b-ir-tthumb {
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--faint);
  transition: transform var(--tr), background var(--tr);
}
.b3b-ir-toggle input:checked ~ .b3b-ir-tthumb { transform: translateX(16px); background: var(--accent); }

/* Scale / quality rows */
.b3b-ir-scalerow { display: flex; flex-direction: column; gap: 6px; }
.b3b-ir-scalehead { display: flex; justify-content: space-between; font-size: .78rem; color: var(--muted); }
.b3b-ir-scaleval { color: var(--accent); font-weight: 700; }
.b3b-ir-ticks { display: flex; justify-content: space-between; font-size: .7rem; color: var(--faint); margin-top: 2px; }

/* Presets — .ir-preset naam JS-mandated hai (closest) */
.b3b-ir-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.ir-preset {
  padding: 8px 6px; text-align: center;
  font-size: .74rem; font-weight: 600; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); cursor: pointer;
  transition: color var(--tr), border-color var(--tr), background var(--tr);
  line-height: 1.3; font-family: var(--font-body);
}
.ir-preset:hover { color: var(--accent); border-color: var(--accent-glow); background: var(--accent-dim); }
.ir-preset small { color: var(--faint); }

/* Format buttons — .ir-fmt-btn naam JS-mandated hai */
.b3b-ir-fmtrow { display: flex; gap: 6px; }
.ir-fmt-btn {
  flex: 1; padding: 8px 4px; text-align: center;
  font-size: .78rem; font-weight: 600; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); cursor: pointer;
  transition: color var(--tr), border-color var(--tr), background var(--tr);
  font-family: var(--font-body);
}
.ir-fmt-btn:hover { color: var(--ink); border-color: var(--faint); }
.ir-fmt-btn.active { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); font-weight: 700; }

/* Size info card */
.b3b-ir-sizecard {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 12px 14px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.b3b-ir-sizeitem { display: flex; flex-direction: column; gap: 2px; }
.b3b-ir-sizelbl { font-size: .68rem; color: var(--faint); text-transform: uppercase; letter-spacing: .07em; }
.b3b-ir-sizeval { font-size: .9rem; font-weight: 700; color: var(--ink); }

.b3b-ir-actions { display: flex; flex-direction: column; gap: 8px; }
.b3b-ir-actions .btn svg { flex-shrink: 0; }

/* New image button */
.b3b-ir-newbtn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .74rem; color: var(--muted); background: transparent;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 5px 12px; cursor: pointer; transition: color var(--tr), border-color var(--tr);
  font-family: var(--font-body); white-space: nowrap;
}
.b3b-ir-newbtn:hover { color: var(--accent); border-color: var(--accent); }

/* ════════════════════════════
   4. JPG TO PNG
   JS-mandated: #uploadBox (.drag-over), #fileInput, #queueList (.has-items),
   .queue-item/.queue-info/.queue-name/.queue-meta (JS-injected),
   .queue-status (.pending/.active/.done), #uploadProgressBox (.active),
   #previewSection (.visible), .bg-swatch (.transparent/.selected),
   globals: selectBg / downloadSingle / downloadAll / clearTool
   ════════════════════════════ */
.b3b-jp-toolbox { padding: 24px; }
label.dropzone#uploadBox { cursor: pointer; }
.b3b-jp-ubtn {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
  background: var(--accent); color: #111; font-weight: 700; font-size: .88rem;
  padding: 10px 26px; border-radius: 100px;
}
.b3b-jp-opts {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 14px 18px; background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--r-sm); margin-top: 16px;
}
.b3b-jp-opts > label { font-size: .85rem; color: var(--muted); white-space: nowrap; }
.bg-options { display: flex; gap: 8px; }
.bg-swatch {
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; transition: border-color .15s, transform .15s;
}
.bg-swatch:hover { transform: scale(1.12); }
.bg-swatch.selected { border-color: var(--accent); }
.bg-swatch.transparent {
  background: repeating-conic-gradient(#666 0% 25%, #333 0% 50%) 0 0 / 14px 14px;
}
.b3b-jp-toolbox .sep { width: 1px; height: 24px; background: var(--line); margin: 0 4px; }
.custom-color-wrap { display: flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--muted); }
#customColor { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; padding: 0; background: none; }
.upload-progress-box {
  display: none; flex-direction: column; gap: 8px;
  padding: 14px 18px; background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: var(--r-sm); margin-top: 16px;
}
.upload-progress-box.active { display: flex; }
.upload-progress-top { display: flex; justify-content: space-between; font-size: .85rem; color: var(--ink-soft); }
.upload-progress-top span:last-child { color: var(--accent); font-weight: 600; }
.upload-progress-bar { height: 6px; background: var(--line); border-radius: 99px; overflow: hidden; }
.upload-progress-fill { height: 100%; width: 0%; background: var(--accent); border-radius: 99px; transition: width .12s linear; }
.queue-list { display: none; flex-direction: column; gap: 8px; margin-top: 16px; }
.queue-list.has-items { display: flex; }
.queue-item {
  display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px;
  padding: 10px 14px; background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
#queueList [id^="thumb-"] { background: var(--surface-3); }
#queueList [id^="thumb-"] img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; display: block; }
.queue-info { min-width: 0; }
.queue-name { font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: var(--ink); }
.queue-meta { font-size: .78rem; color: var(--muted); margin-top: 2px; }
.queue-status { font-size: .8rem; font-weight: 600; white-space: nowrap; }
.queue-status.done { color: var(--green); }
.queue-status.pending { color: var(--faint); }
.queue-status.active { color: var(--accent); }
.preview-section { display: none; flex-direction: column; gap: 12px; margin-top: 20px; }
.preview-section.visible { display: flex; }
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.compare-card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.compare-card img {
  width: 100%; display: block; max-height: 240px; object-fit: contain;
  background: repeating-conic-gradient(#444 0% 25%, #2a2a2a 0% 50%) 0 0 / 16px 16px;
}
.compare-footer { padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .8rem; color: var(--muted); }
.compare-footer strong { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compare-badge { font-size: .7rem; font-weight: 700; padding: 2px 7px; border-radius: 4px; text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0; }
.badge-jpg { background: rgba(255, 107, 107, .15); color: var(--red); }
.badge-png { background: rgba(55, 242, 162, .15); color: var(--green); }
.b3b-jp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.b3b-jp-stat { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 10px; text-align: center; }
.b3b-jp-stat h3 { margin: 0 0 4px; font-size: 1.1rem; font-weight: 700; color: var(--accent); }
.b3b-jp-stat p { margin: 0; font-size: .78rem; color: var(--muted); }
.b3b-jp-note {
  margin-top: 14px; padding: 11px 16px; background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: .875rem; color: var(--muted); text-align: center;
}
.b3b-jp-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.b3b-jp-actions .btn { flex: 1; min-width: 140px; }
.b3b-jp-dlall { border-color: var(--accent) !important; color: var(--accent) !important; }
.b3b-checklist { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; }
.b3b-checklist li { position: relative; padding-left: 28px; color: var(--ink-soft); font-size: .95rem; }
.b3b-checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

/* ════════════════════════════
   5. PNG TO JPG
   JS-mandated: #uploadZone (.hidden/.drag-over), #previewArea (.visible),
   .pj-swatch (.active), #resultBanner (.visible),
   .hidden / .visible / .drag-over
   (Google Fonts / Syne links from source are intentionally dropped.)
   ════════════════════════════ */
.b3b-pj-toolbox { padding: 24px; }
.pj-upload {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 48px 28px; cursor: pointer; text-align: center;
  border: 2px dashed var(--line); border-radius: var(--r-lg);
  background: var(--bg-soft);
  transition: border-color var(--tr), background var(--tr);
}
.pj-upload:hover, .pj-upload.drag-over { border-color: var(--accent); background: rgba(245,197,24,.04); }
.pj-upload input[type="file"] { display: none; }
.pj-upload.hidden { display: none; }
.pj-preview-area { display: none; }
.pj-preview-area.visible { display: block; }
.pj-compare { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.pj-pane { display: flex; flex-direction: column; border-right: 1px solid var(--line); min-width: 0; }
.pj-pane:last-child { border-right: none; }
.pj-pane-header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 16px; background: var(--bg-soft); border-bottom: 1px solid var(--line);
}
.pj-pane-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .68rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 100px;
}
.pj-pane-badge.png { color: var(--ink-soft); background: var(--surface-3); border: 1px solid var(--line); }
.pj-pane-badge.jpg { color: var(--accent); background: var(--accent-dim); border: 1px solid var(--accent-glow); }
.pj-pane-size { font-size: .74rem; color: var(--faint); }
.pj-img-wrap {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: var(--bg); min-height: 220px;
}
.pj-img-wrap.checker {
  background-image:
    linear-gradient(45deg, #1e222d 25%, transparent 25%),
    linear-gradient(-45deg, #1e222d 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1e222d 75%),
    linear-gradient(-45deg, transparent 75%, #1e222d 75%);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
  background-color: var(--bg);
}
.pj-img-wrap img { max-width: 100%; max-height: 280px; object-fit: contain; display: block; border-radius: 4px; }
.pj-settings { padding: 20px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pj-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.pj-field-label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--faint); display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.pj-field-label span { color: var(--accent); font-weight: 700; font-size: .8rem; text-transform: none; letter-spacing: 0; }
input[type="range"].pj-slider {
  width: 100%; height: 5px; -webkit-appearance: none; appearance: none;
  background: var(--line); border-radius: 4px; outline: none; cursor: pointer; padding: 0; border: none;
}
input[type="range"].pj-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface); cursor: pointer;
}
input[type="range"].pj-slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface); cursor: pointer;
}
.pj-slider-ticks { display: flex; justify-content: space-between; font-size: .68rem; color: var(--faint); margin-top: 3px; }
.pj-bg-row { display: flex; flex-direction: column; gap: 8px; }
.pj-swatches { display: flex; gap: 7px; flex-wrap: wrap; }
.pj-swatch {
  width: 28px; height: 28px; border-radius: 6px;
  border: 2px solid transparent; cursor: pointer;
  transition: transform var(--tr), border-color var(--tr), box-shadow var(--tr);
}
.pj-swatch:hover { transform: scale(1.15); }
.pj-swatch.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(245,197,24,.18); }
.pj-custom-color { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.pj-color-wrap { position: relative; width: 28px; height: 28px; flex-shrink: 0; }
.pj-color-preview { width: 28px; height: 28px; border-radius: 6px; border: 2px solid var(--line); cursor: pointer; }
#bgColorInput { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.pj-color-label { font-size: .8rem; color: var(--ink-soft); }
#bgHex {
  font-family: monospace; font-size: .76rem; color: var(--faint);
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 5px; padding: 4px 8px; width: 72px; outline: none;
}
#bgHex:focus { border-color: var(--accent); }
.pj-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 20px 0 0; }
.pj-stat { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 16px; text-align: center; }
.pj-stat-val { font-size: 1.2rem; font-weight: 800; color: var(--ink); line-height: 1; margin-bottom: 4px; }
.pj-stat-val.accent { color: var(--accent); }
.pj-stat-val.green { color: var(--green); }
.pj-stat-lbl { font-size: .72rem; color: var(--faint); text-transform: uppercase; letter-spacing: .07em; }
.pj-result-banner {
  display: none; align-items: center; gap: 12px; margin-top: 16px;
  padding: 13px 18px; background: var(--green-dim);
  border: 1px solid rgba(62,207,142,.2); border-radius: var(--r-sm);
  font-size: .88rem; color: var(--ink);
}
.pj-result-banner.visible { display: flex; }
.pj-result-banner strong { color: var(--green); }
.pj-result-banner svg { flex-shrink: 0; color: var(--green); }
.pj-actions { display: flex; gap: 12px; padding: 20px 0 0; flex-wrap: wrap; }
.pj-actions .btn { flex: 1; min-width: 160px; }
.pj-actions .btn svg { flex-shrink: 0; }

/* ════════════════════════════
   6. RESPONSIVE
   ════════════════════════════ */
@media (max-width: 860px) {
  .b3b-rb-split { grid-template-columns: 1fr; }
  .b3b-rb-canvas { min-height: 360px; border-right: none; border-bottom: 1px solid var(--line); }
  .b3b-rb-side { max-height: none; }
  .b3b-ir-workspace { grid-template-columns: 1fr; }
  .pj-settings { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pj-compare { grid-template-columns: 1fr; }
  .pj-pane { border-right: none; border-bottom: 1px solid var(--line); }
  .pj-pane:last-child { border-bottom: none; }
}
@media (max-width: 560px) {
  .compare-grid { grid-template-columns: 1fr; }
  .b3b-jp-stats { grid-template-columns: 1fr 1fr; }
  .pj-stats { grid-template-columns: 1fr; }
  .b3b-rb-swatches { grid-template-columns: repeat(6, 1fr); }
}

/* ── SECTION C ── */
/* ══════════════════════════════════════════════════════════════
   UPNIXTOOLS — MIGRATION BATCH 3, AGENT C STYLESHEET
   (migrate-batch3-C.css)
   Sirf build/tools/ ki in 7 pages ke liye:
   qr-scanner, barcode-generator, word-counter, case-converter,
   text-sorter, remove-duplicates, text-repeater.
   site.css / migrate-tools.css / migrate-calc.css / migrate-articles.css
   ko edit NAHI kiya gaya.

   RULES (task se):
   - Nayi classes YAHI file mein hain, `.b3c-` prefix ke saath.
   - Koi inline <style> nahi, koi Google Fonts link nahi, kahin Syne nahi.
   - Koi :root token override nahi — sirf site.css ke maujooda tokens
     (--ink, --ink-soft, --muted, --faint, --accent, --green, --red,
      --amber, --surface, --surface-2, --surface-3, --bg-soft,
      --line, --line-soft, --r-sm/md/lg, --r-pill, --tr, --font-head,
      --font-body, --font-mono).
   - Dark theme: koi hard-coded dark text nahi (sirf theme tokens).
   - Har batch-3-C page is file ko header ke baad link karta hai:
       <link rel="stylesheet" href="/assets/css/migrate-batch3.css?v=1">

   JS-MANDATED EXCEPTIONS (in-page <script> inhe naam se use karta hai —
   getElementById / querySelector / classList / className / innerHTML —
   rename KARNA MANA hai, sirf yahan restyle kiya gaya hai):
     word-counter:
       .wc-toast / .show            — toast() classList
       .wc-faq-q / .wc-faq-item / .open / .wc-faq-chevron / .wc-faq-a
                                    — FAQ accordion (querySelectorAll + closest)
       .wc-progress-wrap / .active  — classList toggle
       .wc-progress-fill / .warn / .over — className set
       .wc-char-pill / .warn / .over     — className set
       .wc-limit-status / .warn / .over  — className set
       .wc-toggle / .on             — classList.toggle
       .wc-kw-item / .wc-kw-word / .wc-kw-bar-wrap / .wc-kw-bar /
       .wc-kw-count / .wc-kw-empty  — kwList.innerHTML likhta hai
       .wc-keywords-list            — getElementById('kwList') (id, par class
                                     bhi markup mein hai — naam rakha gaya)
     text-repeater:
       .trp-type-btn / .active      — closest + querySelectorAll
       .trp-preview-error / .visible— classList add/remove
       #trp-toast / .show           — toast() classList
     barcode-generator:
       .bc-type-btn / .active       — closest + querySelectorAll
       .bc-fmt-btn / .active        — querySelectorAll
       .bc-caption-display          — className set (cap)
       .bc-empty-msg / .bc-empty-icon — clearPreview() innerHTML likhta hai
       .bc-preview-error / .visible — classList add/remove
       .bc-field / .bc-label / .bc-input / .bc-textarea / .bc-select /
       .bc-hint                    — TYPES[type].build() JS template strings
                                     inhe emit karti hain; markup JS se banta hai
       #bc-toast / .show            — toast() classList
     qr-scanner:
       .qs-tab / .active            — querySelectorAll + classList.toggle
       .qs-panel / .active          — querySelectorAll + classList
       .drag-over                   — uploadZone.classList add/remove
       .visible                     — imgPreview / progressWrap / errorBox /
                                      resultWrap par classList add/remove
       .qs-img-preview              — classList 'visible' toggle
       .qs-progress-wrap            — classList 'visible' toggle
       .qs-error-wrap               — classList 'visible' toggle
       .qs-result-wrap              — classList.remove('visible')
       .qs-status-dot               — querySelector('.qs-status-dot')
       .qs-cam-dot / .active        — classList.toggle('active')
       .qs-result-textarea / .has-result — classList add/remove
       .qs-faq-q / .qs-faq-item / .open / .qs-faq-chevron / .qs-faq-a
                                    — FAQ accordion
       #qs-toast / .show            — toast() classList
   ══════════════════════════════════════════════════════════════ */

/* ═══════════════ 1. SHARED BITS ═══════════════ */

/* Badge above the H1 (approved pattern) */
.b3c-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-dim);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent); font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 14px; border-radius: var(--r-pill); margin-bottom: 16px;
}

/* Button rows inside tool cards */
.b3c-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.b3c-actions + .b3c-actions { margin-top: 10px; }

/* Tall textarea for the simple text tools */
.b3c-input-lg { min-height: 190px; }

/* Note / status line */
.b3c-note {
  font-size: .85rem; color: var(--muted);
  background: var(--bg-soft); border: 1px solid var(--line-soft);
  border-radius: var(--r-sm); padding: 10px 14px; margin-top: 16px;
}

/* Checkbox option groups (text-sorter / remove-duplicates) */
.b3c-checks {
  background: var(--bg-soft); border: 1px solid var(--line-soft);
  border-radius: var(--r-sm); padding: 14px 16px; margin-top: 18px;
}
.b3c-checks-label {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 10px;
}
.b3c-check-row { display: flex; gap: 18px; flex-wrap: wrap; }
.b3c-check {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .86rem; color: var(--ink-soft); cursor: pointer; user-select: none;
}
.b3c-check input { accent-color: var(--accent); width: 17px; height: 17px; cursor: pointer; }

/* SEO feature-card grid (shared by all 7 pages) */
.b3c-seo-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px; margin: 24px 0;
}
.b3c-seo-card {
  background: var(--bg-soft); border: 1px solid var(--line-soft);
  border-radius: var(--r-sm); padding: 18px;
  transition: border-color var(--tr), transform var(--tr);
}
.b3c-seo-card:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); transform: translateY(-2px); }
.b3c-seo-card h3 { font-size: .9rem; font-weight: 700; color: var(--accent); margin: 0 0 6px; }
.b3c-seo-card p { font-size: .83rem; color: var(--muted); line-height: 1.55; margin: 0; }

/* FAQ accordions — shared look, per-page JS-mandated class names */
.wc-faq, .trp-faq, .bc-faq, .qs-faq {
  display: flex; flex-direction: column; gap: 10px; margin: 12px 0;
}
.wc-faq-item, .trp-faq-item, .bc-faq-item, .qs-faq-item {
  background: var(--bg-soft); border: 1px solid var(--line-soft);
  border-radius: var(--r-sm); overflow: hidden;
}
.wc-faq-q, .trp-faq-q, .bc-faq-q, .qs-faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; cursor: pointer;
  font-size: .88rem; font-weight: 700; color: var(--ink);
  user-select: none; transition: background var(--tr), color var(--tr);
}
.wc-faq-q:hover, .trp-faq-q:hover, .bc-faq-q:hover, .qs-faq-q:hover { background: var(--surface-2); }
.wc-faq-chevron, .trp-faq-chevron, .bc-faq-chevron, .qs-faq-chevron {
  flex-shrink: 0; color: var(--faint); transition: transform var(--tr), color var(--tr);
}
.wc-faq-item.open .wc-faq-chevron, .trp-faq-item.open .trp-faq-chevron,
.bc-faq-item.open .bc-faq-chevron, .qs-faq-item.open .qs-faq-chevron {
  transform: rotate(180deg); color: var(--accent);
}
.wc-faq-item.open .wc-faq-q, .trp-faq-item.open .trp-faq-q,
.bc-faq-item.open .bc-faq-q, .qs-faq-item.open .qs-faq-q { color: var(--accent); }
.wc-faq-a, .trp-faq-a, .bc-faq-a, .qs-faq-a {
  display: none; padding: 12px 18px 14px;
  font-size: .84rem; color: var(--muted); line-height: 1.7;
  border-top: 1px solid var(--line-soft);
}
.wc-faq-item.open .wc-faq-a, .trp-faq-item.open .trp-faq-a,
.bc-faq-item.open .bc-faq-a, .qs-faq-item.open .qs-faq-a { display: block; }

/* Workbench layout — inputs left, sticky preview right (text-repeater, barcode) */
.b3c-workbench { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; }
.b3c-wb-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.b3c-wb-side { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* Generic panel (left column) */
.b3c-panel {
  background: var(--glass); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
.b3c-panel-head {
  padding: 14px 18px; border-bottom: 1px solid var(--line-soft);
  font-size: .82rem; font-weight: 700; color: var(--ink-soft);
  display: flex; align-items: center; gap: 8px;
}
.b3c-panel-head svg { color: var(--accent); flex-shrink: 0; }
.b3c-panel-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }

/* Generic field + label (non-JS variants) */
.b3c-field { display: flex; flex-direction: column; gap: 6px; }
.b3c-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.b3c-count-val { color: var(--accent); font-weight: 700; }

/* Range sliders */
.b3c-slider-row { display: flex; align-items: center; gap: 12px; }
.b3c-slider-wrap { flex: 1; }
input[type="range"].b3c-slider {
  width: 100%; height: 4px; -webkit-appearance: none; appearance: none;
  background: var(--line); border-radius: 4px; outline: none; cursor: pointer;
}
input[type="range"].b3c-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface); cursor: pointer;
}
input[type="range"].b3c-slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface); cursor: pointer;
}

/* Preview card (right column) */
.b3c-preview-card {
  background: var(--glass); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
.b3c-preview-head {
  padding: 12px 16px; border-bottom: 1px solid var(--line-soft);
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: space-between;
  font-size: .8rem; font-weight: 700; color: var(--ink-soft);
}
.b3c-live-dot {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .7rem; font-weight: 600; color: var(--green);
}
.b3c-live-dot::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); flex-shrink: 0;
  box-shadow: 0 0 5px var(--green);
  animation: b3c-livepulse 1.5s ease infinite;
}
@keyframes b3c-livepulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

.b3c-dl-area {
  padding: 14px 16px; border-top: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 10px;
}
.b3c-btn-row { display: flex; gap: 8px; }
.b3c-btn-row .btn { flex: 1; }
.b3c-info-row {
  display: flex; gap: 12px; font-size: .76rem; color: var(--faint); flex-wrap: wrap;
}
.b3c-info-row strong { color: var(--ink-soft); font-weight: 600; }

/* Fixed toasts — JS toggles .show */
#trp-toast, #bc-toast, #qs-toast {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--surface-3); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 10px 20px;
  font-size: .84rem; color: var(--ink);
  opacity: 0; pointer-events: none; z-index: 9999;
  transition: opacity .25s ease, transform .25s ease; white-space: nowrap;
}
#trp-toast.show, #bc-toast.show, #qs-toast.show {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* Two-column row inside panels */
.b3c-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ═══════════════ 2. WORD COUNTER ═══════════════ */

.b3c-wc-layout { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
.b3c-wc-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.b3c-wc-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.b3c-wc-card { padding: 0; overflow: hidden; }
.b3c-wc-textarea-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--line-soft);
  background: var(--surface-2);
}
.b3c-wc-textarea-label { font-size: .82rem; font-weight: 700; color: var(--muted); }

/* JS-mandated: char pill warn/over states */
.wc-char-pill {
  font-size: .72rem; font-weight: 700;
  color: var(--faint); background: var(--surface-3);
  border: 1px solid var(--line); padding: 3px 10px; border-radius: var(--r-pill);
  transition: color var(--tr), border-color var(--tr);
  white-space: nowrap;
}
.wc-char-pill.warn { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 35%, transparent); }
.wc-char-pill.over { color: var(--red); border-color: color-mix(in srgb, var(--red) 35%, transparent); }

.b3c-wc-input {
  min-height: 260px; border: none; border-radius: 0;
  caret-color: var(--accent); line-height: 1.75;
}
.b3c-wc-input:focus { box-shadow: none; border-color: transparent; }

/* JS-mandated: progress bar */
.wc-progress-wrap { display: none; height: 3px; background: var(--line-soft); }
.wc-progress-wrap.active { display: block; }
.wc-progress-fill { height: 3px; background: var(--accent); width: 0%; transition: width .3s ease, background .3s; }
.wc-progress-fill.warn { background: var(--amber); }
.wc-progress-fill.over { background: var(--red); }

/* Toolbar */
.b3c-wc-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 16px; border-top: 1px solid var(--line-soft);
  background: var(--surface-2);
}
.b3c-wc-toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* JS-mandated: toast */
.wc-toast {
  display: none; align-items: center; gap: 5px;
  font-size: .76rem; font-weight: 600; color: var(--green);
}
.wc-toast.show { display: inline-flex; }

/* Limit group */
.b3c-wc-limit-group { display: flex; align-items: center; gap: 7px; }
.b3c-wc-limit-group label { font-size: .78rem; color: var(--faint); white-space: nowrap; }
.b3c-wc-limit { width: 80px; padding: 7px 10px; font-size: .82rem; }

/* JS-mandated: limit status warn/over */
.wc-limit-status { font-size: .72rem; color: var(--faint); min-width: 80px; }
.wc-limit-status.warn { color: var(--amber); }
.wc-limit-status.over { color: var(--red); }

/* JS-mandated: spaces toggle */
.b3c-wc-toggle-wrap { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.b3c-wc-toggle-wrap label { font-size: .78rem; color: var(--faint); cursor: pointer; user-select: none; }
.wc-toggle {
  width: 36px; height: 20px;
  background: var(--surface-3); border: 1px solid var(--line);
  border-radius: var(--r-pill); cursor: pointer; position: relative;
  flex-shrink: 0; transition: background var(--tr), border-color var(--tr);
}
.wc-toggle::after {
  content: ''; position: absolute;
  left: 3px; top: 3px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--faint);
  transition: transform var(--tr), background var(--tr);
}
.wc-toggle.on { background: var(--accent-dim); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.wc-toggle.on::after { transform: translateX(16px); background: var(--accent); }

/* Sidebar panels */
.b3c-wc-panel {
  background: var(--glass); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
.b3c-wc-panel-head {
  padding: 12px 16px; border-bottom: 1px solid var(--line-soft);
  background: var(--surface-2);
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
}
.b3c-wc-panel-body { padding: 8px 16px 12px; }
.b3c-wc-stat-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 0; border-bottom: 1px solid var(--line-soft);
  font-size: .86rem;
}
.b3c-wc-stat-row:last-child { border-bottom: none; }
.b3c-wc-stat-row-lbl { color: var(--muted); }
.b3c-wc-stat-row-val { font-weight: 700; color: var(--ink); font-family: var(--font-mono); font-size: .85rem; }

/* JS-mandated: keyword density list (kwList.innerHTML likhta hai) */
.wc-keywords-list { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; }
.wc-kw-item { display: flex; align-items: center; gap: 10px; }
.wc-kw-word {
  font-size: .78rem; font-weight: 600; color: var(--muted);
  min-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wc-kw-bar-wrap { flex: 1; height: 4px; background: var(--line-soft); border-radius: 4px; overflow: hidden; }
.wc-kw-bar { height: 100%; background: var(--accent); border-radius: 4px; transition: width .3s ease; }
.wc-kw-count { font-size: .72rem; color: var(--faint); min-width: 28px; text-align: right; }
.wc-kw-empty { font-size: .82rem; color: var(--faint); padding: 8px 0; text-align: center; }

/* Stat sub-line under site.css .stat */
.b3c-stat-sub { font-size: 11.5px; color: var(--faint); margin-top: 4px; }

@media (max-width: 860px) {
  .b3c-wc-layout { grid-template-columns: 1fr; }
  .b3c-wc-side { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .b3c-wc-side { grid-template-columns: 1fr; }
  .b3c-wc-toolbar-right { margin-left: 0; width: 100%; }
}

/* ═══════════════ 3. TEXT REPEATER ═══════════════ */

/* Separator switcher container (id: sepSwitcher — JS id-based) */
.b3c-trp-types {
  display: flex; gap: 8px; margin-bottom: 24px;
  background: var(--glass); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 6px; flex-wrap: wrap;
}
/* JS-mandated: type buttons (.active toggle hota hai) */
.trp-type-btn {
  flex: 1; min-width: 80px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 8px; border-radius: var(--r-sm);
  border: 1px solid transparent; background: transparent;
  cursor: pointer; transition: background var(--tr), border-color var(--tr), color var(--tr);
  color: var(--faint); font-family: var(--font-body);
}
.trp-type-btn:hover { background: var(--surface-2); color: var(--muted); }
.trp-type-btn.active {
  background: var(--accent-dim);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
}
.b3c-trp-glyph {
  font-family: var(--font-mono); font-size: .95rem; font-weight: 700;
  line-height: 1.2; height: 20px; display: flex; align-items: center;
  justify-content: center; letter-spacing: 1px;
}
.b3c-trp-name { font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
.b3c-trp-tag {
  font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 1px 5px; border-radius: 4px;
  background: var(--surface-3); color: var(--faint);
}
.trp-type-btn.active .b3c-trp-tag { background: var(--accent-dim); color: var(--accent); }

/* JS-mandated: error box */
.trp-preview-error {
  display: none; padding: 12px 16px; margin: 12px 16px;
  background: color-mix(in srgb, var(--red) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 25%, transparent);
  border-radius: var(--r-sm); font-size: .84rem; color: var(--red);
}
.trp-preview-error.visible { display: block; }

/* Output area */
.b3c-output-area { padding: 16px; background: var(--surface-2); }
.b3c-trp-output {
  min-height: 220px; max-height: 420px;
  font-family: var(--font-mono); font-size: .86rem; line-height: 1.6;
}

/* ═══════════════ 4. BARCODE GENERATOR ═══════════════ */

/* Type switcher container (id: typeSwitcher — JS id-based) */
.b3c-bc-types {
  display: flex; gap: 8px; margin-bottom: 24px;
  background: var(--glass); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 6px; flex-wrap: wrap;
}
/* JS-mandated: type buttons */
.bc-type-btn {
  flex: 1; min-width: 80px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 8px; border-radius: var(--r-sm);
  border: 1px solid transparent; background: transparent;
  cursor: pointer; transition: background var(--tr), border-color var(--tr), color var(--tr);
  color: var(--faint); font-family: var(--font-body);
}
.bc-type-btn:hover { background: var(--surface-2); color: var(--muted); }
.bc-type-btn.active {
  background: var(--accent-dim);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
}
.b3c-bc-bar-icon { display: flex; align-items: flex-end; gap: 1px; height: 20px; justify-content: center; }
.b3c-bc-bar-icon .b3c-bc-b { background: currentColor; border-radius: 1px; }
.b3c-bc-type-name { font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
.b3c-bc-type-tag {
  font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 1px 5px; border-radius: 4px;
  background: var(--surface-3); color: var(--faint);
}
.bc-type-btn.active .b3c-bc-type-tag { background: var(--accent-dim); color: var(--accent); }

/* JS-mandated: field set — TYPES[type].build() template strings emit karti hain */
.bc-field { display: flex; flex-direction: column; gap: 6px; }
.bc-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.bc-input, .bc-textarea, .bc-select {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 10px; color: var(--ink);
  font-family: var(--font-body); font-size: 15px;
  padding: 12px 14px; outline: none; width: 100%; box-sizing: border-box;
  transition: border-color var(--tr), box-shadow var(--tr);
}
.bc-input:focus, .bc-textarea:focus, .bc-select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim);
}
.bc-input::placeholder, .bc-textarea::placeholder { color: var(--faint); }
.bc-textarea { min-height: 100px; resize: vertical; line-height: 1.5; }
.bc-select {
  appearance: none; cursor: pointer; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2396a7a1' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.bc-select option { background: var(--surface-2); color: var(--ink); }
.bc-hint { font-size: 12px; color: var(--faint); line-height: 1.5; }

/* Color pickers */
.b3c-bc-color-pick {
  display: flex; align-items: center; gap: 9px;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 12px; cursor: pointer;
  transition: border-color var(--tr);
}
.b3c-bc-color-pick:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.b3c-bc-color-pick input[type="color"] {
  width: 26px; height: 26px; border: none; background: none;
  cursor: pointer; padding: 0; border-radius: 4px;
}
.b3c-bc-color-pick span { font-size: .8rem; font-weight: 600; color: var(--muted); font-family: var(--font-mono); }

/* Canvas preview area (id: canvasArea — JS style.background set karta hai) */
.b3c-bc-canvas-area {
  padding: 24px;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  min-height: 200px; position: relative;
}
#previewHolder { display: flex; flex-direction: column; align-items: center; gap: 8px; }
#previewHolder svg, #previewHolder canvas { max-width: 100%; height: auto; display: block; }
/* JS-mandated: caption display (cap.className set hota hai) */
.bc-caption-display {
  font-size: .8rem; color: #333; font-family: var(--font-body);
  text-align: center; word-break: break-all;
}
/* JS-mandated: empty message (clearPreview innerHTML likhta hai) */
.bc-empty-msg { text-align: center; color: var(--faint); font-size: .88rem; padding: 20px; }
.bc-empty-msg .bc-empty-icon { font-size: 2.2rem; margin-bottom: 8px; opacity: .4; }

/* JS-mandated: error box */
.bc-preview-error {
  display: none; padding: 12px 16px; margin: 12px 16px;
  background: color-mix(in srgb, var(--red) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 25%, transparent);
  border-radius: var(--r-sm); font-size: .84rem; color: var(--red);
}
.bc-preview-error.visible { display: block; }

/* JS-mandated: format buttons */
.b3c-fmt-row { display: flex; gap: 7px; }
.bc-fmt-btn {
  flex: 1; padding: 8px 0; text-align: center;
  font-size: .8rem; font-weight: 700; color: var(--faint);
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--r-sm); cursor: pointer;
  transition: color var(--tr), border-color var(--tr), background var(--tr);
  font-family: var(--font-body);
}
.bc-fmt-btn:hover { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.bc-fmt-btn.active {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: var(--accent-dim);
}

@media (max-width: 780px) {
  .b3c-workbench { grid-template-columns: 1fr; }
  .b3c-wb-side { position: static; }
}
@media (max-width: 560px) {
  .b3c-trp-types, .b3c-bc-types { gap: 5px; padding: 4px; }
  .trp-type-btn, .bc-type-btn { padding: 8px 5px; min-width: 58px; }
  .b3c-btn-row { flex-direction: column; }
  .b3c-row-2 { grid-template-columns: 1fr; }
}

/* ═══════════════ 5. QR SCANNER ═══════════════ */

/* Header pills */
.b3c-qs-pills {
  display: flex; align-items: center; justify-content: center;
  gap: 20px; margin-top: 24px; flex-wrap: wrap;
}
.b3c-qs-pill {
  display: flex; align-items: center; gap: 7px;
  font-size: .82rem; color: var(--muted);
}
.b3c-qs-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

/* Tool box */
.b3c-qs-box {
  background: var(--glass); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; margin-bottom: 28px;
}

/* Tab bar row */
.b3c-qs-tabs-row {
  display: flex; align-items: center;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-2); padding: 0 20px;
}
.b3c-qs-tabs { display: flex; flex: 1; }
/* JS-mandated: tabs */
.qs-tab {
  display: flex; align-items: center; gap: 8px;
  padding: 16px; font-size: .88rem; font-weight: 700;
  color: var(--faint); cursor: pointer; border: none;
  background: transparent; border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: color var(--tr), border-color var(--tr);
  white-space: nowrap; font-family: var(--font-body);
}
.qs-tab:hover { color: var(--ink); }
.qs-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.b3c-qs-format-hint {
  font-size: .75rem; color: var(--faint);
  margin-left: auto; white-space: nowrap;
}

/* Two-column split */
.b3c-qs-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 380px; }
.b3c-qs-split-left {
  border-right: 1px solid var(--line-soft);
  display: flex; flex-direction: column; min-width: 0;
}
.b3c-qs-split-right {
  display: flex; flex-direction: column;
  padding: 24px; gap: 14px; min-width: 0;
}

/* JS-mandated: panels */
.qs-panel { display: none; }
.qs-panel.active { display: flex; flex-direction: column; flex: 1; }

/* Upload zone (id: uploadZone — JS .drag-over toggle karta hai) */
.b3c-qs-upload {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; padding: 40px 28px;
  border: 2px dashed var(--line);
  border-radius: var(--r-md); margin: 20px;
  cursor: pointer; transition: border-color var(--tr), background var(--tr);
  text-align: center; background: var(--surface-2);
  position: relative; flex: 1;
}
.b3c-qs-upload:hover, .b3c-qs-upload.drag-over {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.b3c-qs-upload input[type="file"] {
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer;
  width: 100%; height: 100%;
}
.b3c-qs-upload-icon {
  width: 72px; height: 72px;
  background: var(--accent-dim);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; flex-shrink: 0;
  transition: transform var(--tr); pointer-events: none;
}
.b3c-qs-upload:hover .b3c-qs-upload-icon { transform: scale(1.06); }
.b3c-qs-upload h3 { font-size: 1.2rem; font-weight: 700; pointer-events: none; margin: 0; color: var(--ink); }
.b3c-qs-upload p { font-size: .88rem; color: var(--muted); max-width: 360px; pointer-events: none; margin: 0; }
.b3c-qs-upload p strong { color: var(--accent); }
.b3c-qs-upload p.b3c-qs-upload-fine { font-size: .78rem; }

.b3c-qs-shortcuts {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  margin-top: 4px; pointer-events: none;
}
.b3c-qs-shortcut {
  display: flex; align-items: center; gap: 6px;
  font-size: .78rem; color: var(--muted);
  background: var(--surface-3); border: 1px solid var(--line);
  padding: 5px 12px; border-radius: var(--r-pill);
}
.b3c-qs-shortcut kbd {
  background: var(--surface-3); border: 1px solid var(--line);
  color: var(--ink); font-size: .7rem; padding: 1px 5px;
  border-radius: 3px; font-family: var(--font-mono);
}
.b3c-qs-upload-cta {
  background: var(--accent); color: #06202b;
  font-weight: 700; font-size: .9rem;
  padding: 11px 28px; border-radius: var(--r-pill);
  pointer-events: none; margin-top: 4px;
}

/* Upload bottom actions */
.b3c-qs-upload-actions { display: flex; gap: 10px; padding: 0 20px 20px; flex-wrap: wrap; }

/* JS-mandated: image preview */
.qs-img-preview { display: none; padding: 8px 20px 0; text-align: center; }
.qs-img-preview.visible { display: block; }
.qs-img-preview img {
  max-width: 100%; max-height: 200px;
  border-radius: var(--r-sm); border: 1px solid var(--line);
  object-fit: contain; background: var(--surface-2);
}
.b3c-qs-img-name { font-size: .8rem; color: var(--muted); margin-top: 6px; }

/* JS-mandated: progress */
.qs-progress-wrap { display: none; padding: 0 20px 12px; }
.qs-progress-wrap.visible { display: block; }
.b3c-qs-progress-bar { height: 4px; background: var(--line-soft); border-radius: 4px; overflow: hidden; }
.b3c-qs-progress-fill { height: 100%; background: var(--accent); border-radius: 4px; width: 0%; transition: width .2s ease; }
.b3c-qs-progress-label { font-size: .78rem; color: var(--muted); margin-top: 6px; }

/* JS-mandated: error box */
.qs-error-wrap {
  display: none; margin: 0 20px 12px; padding: 12px 16px;
  background: color-mix(in srgb, var(--red) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 25%, transparent);
  border-radius: var(--r-sm); font-size: .85rem; color: var(--red);
  align-items: center; gap: 10px;
}
.qs-error-wrap.visible { display: flex; }

/* JS-mandated: legacy result wrap (hamesha hidden rehta hai) */
.qs-result-wrap { display: none; }

/* Camera */
.b3c-qs-camera-wrap { padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.b3c-qs-video-container {
  position: relative; width: 100%; max-width: 520px;
  aspect-ratio: 4/3; background: #000;
  border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line);
}
#cameraVideo { width: 100%; height: 100%; object-fit: cover; }
.b3c-qs-scan-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.b3c-qs-scan-frame { width: 200px; height: 200px; position: relative; }
.b3c-qs-scan-frame::before, .b3c-qs-scan-frame::after,
.b3c-qs-scan-corner-br, .b3c-qs-scan-corner-bl {
  content: ''; position: absolute;
  width: 28px; height: 28px;
  border-color: var(--accent); border-style: solid;
}
.b3c-qs-scan-frame::before { top: 0; left: 0; border-width: 3px 0 0 3px; border-radius: 4px 0 0 0; }
.b3c-qs-scan-frame::after  { top: 0; right: 0; border-width: 3px 3px 0 0; border-radius: 0 4px 0 0; }
.b3c-qs-scan-corner-br { bottom: 0; right: 0; border-width: 0 3px 3px 0; border-radius: 0 0 4px 0; }
.b3c-qs-scan-corner-bl { bottom: 0; left: 0; border-width: 0 0 3px 3px; border-radius: 0 0 0 4px; }
.b3c-qs-scan-line {
  position: absolute; left: 4px; right: 4px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  border-radius: 1px; animation: b3c-scanline 2s ease-in-out infinite;
  box-shadow: 0 0 8px var(--accent);
}
@keyframes b3c-scanline {
  0%   { top: 8px; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: calc(100% - 10px); opacity: 0; }
}
.b3c-qs-camera-idle {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  color: var(--muted); font-size: .9rem; background: var(--surface-2);
}
.b3c-qs-camera-idle-icon { font-size: 2.5rem; }
.b3c-qs-camera-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* Camera status */
.b3c-qs-cam-status { font-size: .82rem; color: var(--muted); display: flex; align-items: center; gap: 7px; }
/* JS-mandated: cam dot */
.qs-cam-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line); flex-shrink: 0; transition: background var(--tr);
}
.qs-cam-dot.active {
  background: var(--green); box-shadow: 0 0 6px var(--green);
  animation: b3c-campulse 1.5s ease infinite;
}
@keyframes b3c-campulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

/* Right panel: result */
.b3c-qs-result-panel-header { display: flex; align-items: center; justify-content: space-between; }
.b3c-qs-result-panel-title { font-size: 1rem; font-weight: 800; color: var(--ink); }
.b3c-qs-history-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .75rem; font-weight: 600; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--line);
  padding: 4px 12px; border-radius: var(--r-pill);
}
.b3c-qs-history-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 5px var(--green); }

.b3c-qs-status-line { display: flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--muted); }
/* JS-mandated: status dot (querySelector se style change hota hai) */
.qs-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; }

.b3c-qs-result-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.b3c-qs-result-type {
  display: inline-flex; align-items: center;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  color: var(--accent); background: var(--accent-dim);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  padding: 4px 12px; border-radius: var(--r-pill);
}

/* JS-mandated: result textarea */
.qs-result-textarea {
  flex: 1; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 14px; font-size: .9rem; color: var(--faint);
  font-style: italic; font-family: var(--font-body);
  min-height: 160px; word-break: break-all; white-space: pre-wrap;
  overflow-y: auto; line-height: 1.6;
}
.qs-result-textarea.has-result {
  color: var(--ink); font-style: normal;
  font-family: var(--font-mono); font-size: .88rem;
}

/* Privacy footer row (inline-styled container in markup) */
.b3c-qs-privacy { font-size: .72rem; color: var(--faint); }
.b3c-qs-privacy a { color: var(--accent); text-decoration: none; }

/* Numbered steps (how-to) */
.b3c-steps { counter-reset: b3csteps; list-style: none; display: flex; flex-direction: column; gap: 14px; margin: 18px 0; padding: 0; }
.b3c-steps li {
  counter-increment: b3csteps; display: flex; align-items: flex-start; gap: 14px;
  font-size: .9rem; color: var(--muted); line-height: 1.7;
}
.b3c-steps li::before {
  content: counter(b3csteps); flex-shrink: 0;
  width: 28px; height: 28px; background: var(--accent-dim);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent); font-weight: 700; font-size: .82rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.b3c-steps strong { color: var(--ink-soft); }

@media (max-width: 700px) {
  .b3c-qs-split { grid-template-columns: 1fr; }
  .b3c-qs-split-left { border-right: none; border-bottom: 1px solid var(--line-soft); }
  .b3c-qs-tabs-row { padding: 0 12px; }
  .qs-tab { font-size: .8rem; padding: 14px 10px; gap: 5px; }
  .b3c-qs-format-hint { display: none; }
}

/* ── TEXT REPEATER (source-matched) ── */

/* JS-mandated: type buttons (.active / aria-selected toggled by JS) */
.trp-type-btn {
  flex: 1; min-width: 80px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 8px; border-radius: var(--r-sm);
  border: 1px solid transparent; background: transparent;
  cursor: pointer; transition: background var(--tr), border-color var(--tr), color var(--tr);
  color: var(--faint); font-family: var(--font-body);
}
.trp-type-btn:hover { background: var(--surface-2); color: var(--muted); }
.trp-type-btn.active {
  background: var(--accent-dim);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent);
}
.b3c-trp-glyph {
  font-family: var(--font-mono); font-size: .95rem; font-weight: 700;
  line-height: 1.2; height: 20px; display: flex; align-items: center;
  justify-content: center; letter-spacing: 1px;
}
.b3c-trp-name { font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
.b3c-trp-tag {
  font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 1px 5px; border-radius: 4px;
  background: var(--surface-3); color: var(--faint);
}
.trp-type-btn.active .b3c-trp-tag { background: var(--accent-dim); color: var(--accent); }

/* JS-mandated: custom separator field — display:none default, JS sets 'flex' */
.b3c-trp-custom-sep { display: none; flex-direction: column; gap: 6px; }
.b3c-trp-count-val { color: var(--accent); font-weight: 700; }

/* Output textarea (readonly) */
.b3c-trp-output {
  width: 100%; min-height: 220px; max-height: 420px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--ink);
  font-family: var(--font-mono); font-size: .86rem; line-height: 1.6;
  padding: 14px; resize: vertical; outline: none; box-sizing: border-box;
}

/* JS-mandated: info row — display:none default, JS sets 'flex' */
.b3c-trp-info-row { display: none; gap: 12px; font-size: .76rem; color: var(--faint); flex-wrap: wrap; }
.b3c-trp-info-row strong { color: var(--muted); font-weight: 600; }

/* JS-mandated: live dot */
.b3c-trp-live-dot {
  display: flex; align-items: center; gap: 6px;
  font-size: .7rem; color: var(--green);
}
.b3c-trp-live-dot::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); flex-shrink: 0;
  box-shadow: 0 0 5px var(--green);
  animation: b3c-livepulse 1.5s ease infinite;
}
@keyframes b3c-livepulse { 0%,100%{opacity:1}50%{opacity:.3} }

/* JS-mandated: toast container (JS toggles .show) */
.trp-toast {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--surface-3); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 10px 20px;
  font-size: .84rem; color: var(--ink);
  opacity: 0; pointer-events: none; z-index: 9999;
  transition: opacity .25s ease, transform .25s ease; white-space: nowrap;
}
.trp-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* JS-mandated: error box */
.trp-preview-error {
  display: none; padding: 12px 16px; margin: 12px 16px;
  background: color-mix(in srgb, var(--red) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 25%, transparent);
  border-radius: var(--r-sm); font-size: .84rem; color: var(--red);
}
.trp-preview-error.visible { display: block; }

/* JS-mandated: FAQ accordion */
.trp-faq { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.trp-faq-item {
  background: var(--glass); border: 1px solid var(--line);
  border-radius: var(--r-sm); overflow: hidden;
}
.trp-faq-q {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; cursor: pointer; font-size: .88rem; font-weight: 700;
  color: var(--ink); user-select: none; transition: background var(--tr);
}
.trp-faq-q:hover { background: var(--surface-2); }
.trp-faq-chevron { flex-shrink: 0; color: var(--faint); transition: transform var(--tr); }
.trp-faq-item.open .trp-faq-chevron { transform: rotate(180deg); color: var(--accent); }
.trp-faq-item.open .trp-faq-q { color: var(--accent); }
.trp-faq-a {
  display: none; padding: 12px 18px 14px;
  font-size: .84rem; color: var(--muted); line-height: 1.7;
  border-top: 1px solid var(--line-soft);
}
.trp-faq-item.open .trp-faq-a { display: block; }

/* Related nav (pill links, source-matched) */
.b3c-trp-related { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 12px; }
.b3c-trp-related a {
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--faint); font-size: .79rem; font-weight: 600;
  padding: 6px 14px; border-radius: var(--r-pill); text-decoration: none;
  transition: color var(--tr), border-color var(--tr);
}
.b3c-trp-related a:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }

@media (max-width: 780px) {
  .b3c-workbench { grid-template-columns: 1fr; }
  .b3c-wb-side { position: static; }
}
@media (max-width: 560px) {
  .b3c-trp-types { gap: 5px; padding: 4px; }
  .trp-type-btn { padding: 8px 5px; min-width: 58px; }
}

/* ── BARCODE EXTRAS (source-matched) ── */

/* Legacy .b bars inside type icons (source emits class="b" with widths/heights) */
.b3c-bc-bar-icon .b { background: currentColor; border-radius: 1px; display: block; }
.b3c-bw-1 { width: 1px; } .b3c-bw-2 { width: 2px; } .b3c-bw-3 { width: 3px; }
.b3c-bh-16 { height: 16px; } .b3c-bh-18 { height: 18px; } .b3c-bh-20 { height: 20px; }

/* QR tab icon: 3x3 mini grid (replaces inline styles from source) */
.b3c-qr-icon {
  height: 18px; display: flex; align-items: stretch; justify-content: center;
}
.b3c-qr-icon-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  gap: 1px; width: 18px; height: 18px;
}
.b3c-qr-icon-grid .b3c-qr-cell { background: currentColor; border-radius: 1px; }
.b3c-qr-icon-grid .b3c-qr-cell.b3c-qr-hole { background: transparent; }

/* Legacy bc-slider rows/wrap (source markup + JS) */
.b3c-slider-row { display: flex; align-items: center; gap: 12px; }
.b3c-slider-wrap { flex: 1; }
.b3c-bc-size-val { color: var(--accent); font-weight: 700; }

/* Legacy bc-info-row — display:none default; JS toggles style.display flex/none */
.bc-info-row { display: none; gap: 12px; font-size: .76rem; color: var(--faint); flex-wrap: wrap; }
.bc-info-row strong { color: var(--muted); font-weight: 600; }

/* Legacy bc-live-dot */
.bc-live-dot {
  display: flex; align-items: center; gap: 6px;
  font-size: .7rem; color: var(--green);
}
.bc-live-dot::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); flex-shrink: 0;
  box-shadow: 0 0 5px var(--green);
  animation: b3c-livepulse 1.5s ease infinite;
}

/* Toast (JS-mandated: #bc-toast id + .show toggle — see shared #bc-toast rule above) */

/* ── QR SCANNER EXTRAS (source-matched) ── */

/* Initial hidden states — IDs so later JS inline styles always override */
#cameraVideo { display: none; }
#cameraCanvas { display: none; }
#scanOverlay { display: none; }
#openUrlBtn { display: none; }
#flipCamBtn { display: none; }
#resultMeta { display: none; }

/* Status dot idle (accent) — JS sets green inline on decode */
.qs-status-line .b3c-qs-status-idle { background: var(--accent); box-shadow: 0 0 5px var(--accent); }

/* Privacy footer row (was inline-styled in source) */
.b3c-qs-privacy {
  font-size: .72rem; color: var(--faint);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: auto; padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}
.b3c-qs-privacy a { color: var(--accent); text-decoration: none; }

/* kbd inside upload zone (source uses <strong><kbd>Ctrl</kbd>…) */
.b3c-qs-upload kbd {
  background: var(--surface-3); border: 1px solid var(--line);
  color: var(--ink); font-size: .7rem; padding: 1px 5px;
  border-radius: 3px; font-family: var(--font-mono);
}
.b3c-qs-upload p strong { color: var(--accent); }

/* ── SIMPLE TEXT TOOLS (case-converter / text-sorter / remove-duplicates) ── */

/* Status note (source: .tool-note, JS sets innerText) */
.b3c-status-note {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 11px 16px;
  font-size: .84rem; color: var(--muted);
  margin: 14px 0; text-align: center;
}

/* Settings checkboxes (source: .check-item) */
.b3c-check-group { display: flex; flex-direction: column; gap: 10px; }
.b3c-check-item {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; font-size: .88rem; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 10px 14px;
  transition: border-color var(--tr), color var(--tr);
}
.b3c-check-item:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--ink); }
.b3c-check-item input[type="checkbox"] {
  width: 17px; height: 17px; accent-color: var(--accent);
  cursor: pointer; flex-shrink: 0;
}

/* Settings block label */
.b3c-settings-label {
  display: block; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--faint); margin-bottom: 10px;
}

/* Conversion buttons row */
.b3c-action-row {
  display: flex; gap: 9px; flex-wrap: wrap;
  margin-top: 14px;
}

/* Textarea size for simple tools */
.b3c-simple-textarea { min-height: 200px; }

/* Flush field (no bottom margin) */
.b3c-field-flush { margin-bottom: 0; }

/* ── SECTION D ── */
/* ══════════════════════════════════════════════════════════════════
   migrate-batch3-D.css — Agent D: loan-emi, unit-converter,
   weeks-calculator, contact, privacy-policy, terms.
   ALL rules are scoped under `.b3d-scope` (+ a page class) so they
   never touch site.css / migrate-tools.css / migrate-calc.css /
   migrate-articles.css or the shared header/footer.
   No :root token overrides. No Syne font (DM Sans is already
   loaded once by includes/header.php — pages must not load it again).
   ══════════════════════════════════════════════════════════════════ */

/* ── JS-REFERENCED CLASS NAMES (DO NOT RENAME — JS depends on them) ──
   loan-emi.php:          IDs only (amount, rate, years, emi, interest, total, summaryText)
   unit-converter.php:    .uc-cat-btn, .active, .uc-faq-q, .uc-faq-item, .uc-faq-chevron,
                          .open, .uc-result-display, .has-result
   weeks-calculator.php:  .error (on date inputs), .visible (on #results)
   contact.php:           IDs only (ct-message, charCount, contactForm);
                          inline JS sets style.borderColor='var(--red)' → --red is
                          defined scoped on .b3d-contact below (#e05252, source color)
   terms.php:             .tc-section (with id), .tc-toc-link, .active (scrollspy observer)
   ──────────────────────────────────────────────────────────────────── */

/* ── shared scope reset (replaces the old per-page `* {margin:0;padding:0}`) ── */
.b3d-scope, .b3d-scope *, .b3d-scope *::before, .b3d-scope *::after { box-sizing: border-box; }
.b3d-scope h1, .b3d-scope h2, .b3d-scope h3, .b3d-scope h4,
.b3d-scope p, .b3d-scope ul, .b3d-scope ol, .b3d-scope table { margin: 0; }
.b3d-scope ul, .b3d-scope ol { padding: 0; }

/* ══════════════════════════════════════════════════════════════════
   CONTACT  (was: contact.php inline <style>, gold token theme)
   ══════════════════════════════════════════════════════════════════ */
.b3d-scope.b3d-contact {
  --bg:          #0d0f14;
  --surface:     #161921;
  --surface-2:   #1e222d;
  --surface-3:   #252b38;
  --border:      #2a2f3d;
  --border-2:    #353d50;
  --accent:      #f5c518;
  --accent-2:    #ffd43b;
  --accent-dim:  rgba(245,197,24,.12);
  --accent-glow: rgba(245,197,24,.22);
  --blue:        #4f8ef7;
  --blue-dim:    rgba(79,142,247,.12);
  --green:       #3ecf8e;
  --green-dim:   rgba(62,207,142,.1);
  --red:         #e05252;
  --text:        #e8eaf0;
  --text-2:      #a8b0c8;
  --text-3:      #626e8a;
  --radius:      16px;
  --radius-sm:   10px;
  --tr:          .2s cubic-bezier(.4,0,.2,1);
}

.b3d-contact .ct-page { max-width: 1100px; margin: 0 auto; padding: 72px 28px 100px; }

.b3d-contact .ct-hero { text-align: center; margin-bottom: 60px; }
.b3d-contact .ct-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--accent-dim); border: 1px solid var(--accent-glow);
  color: var(--accent); font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 16px; border-radius: 100px; margin-bottom: 20px;
}
.b3d-contact .ct-title {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 800; line-height: 1.08; letter-spacing: -.03em;
  color: var(--text); margin-bottom: 16px;
}
.b3d-contact .ct-title span { color: var(--accent); }
.b3d-contact .ct-subtitle {
  color: var(--text-2); font-size: 1.05rem;
  max-width: 520px; margin: 0 auto; line-height: 1.75;
}

.b3d-contact .ct-alert {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; border-radius: var(--radius-sm);
  font-size: .9rem; font-weight: 600; margin-bottom: 32px;
}
.b3d-contact .ct-alert.success {
  background: rgba(62,207,142,.1);
  border: 1px solid rgba(62,207,142,.25);
  color: var(--green);
}
.b3d-contact .ct-alert.error {
  background: rgba(224,82,82,.1);
  border: 1px solid rgba(224,82,82,.25);
  color: var(--red);
}

.b3d-contact .ct-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 24px;
  align-items: start;
}

.b3d-contact .ct-info { display: flex; flex-direction: column; gap: 14px; }
.b3d-contact .ct-info-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  display: flex; align-items: flex-start; gap: 16px;
  transition: border-color var(--tr), transform var(--tr);
}
.b3d-contact .ct-info-card:hover { border-color: var(--border-2); transform: translateY(-2px); }
.b3d-contact .ct-info-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  background: var(--accent-dim);
  border: 1px solid var(--accent-glow);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.b3d-contact .ct-info-card.blue .ct-info-icon { background: var(--blue-dim); border-color: rgba(79,142,247,.22); }
.b3d-contact .ct-info-card.green .ct-info-icon { background: var(--green-dim); border-color: rgba(62,207,142,.2); }
.b3d-contact .ct-info-body h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: .95rem; font-weight: 700;
  color: var(--text); margin-bottom: 4px;
}
.b3d-contact .ct-info-body p { font-size: .84rem; color: var(--text-3); line-height: 1.55; }
.b3d-contact .ct-info-body a { color: var(--accent); text-decoration: none; }
.b3d-contact .ct-info-body a:hover { text-decoration: underline; }

.b3d-contact .ct-topics {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.b3d-contact .ct-topics-title {
  font-family: 'DM Sans', sans-serif;
  font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-3); margin-bottom: 12px;
}
.b3d-contact .ct-topic {
  display: flex; align-items: center; gap: 9px;
  font-size: .84rem; color: var(--text-2);
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.b3d-contact .ct-topic:last-child { border-bottom: none; padding-bottom: 0; }
.b3d-contact .ct-topic-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
}

.b3d-contact .ct-form-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.b3d-contact .ct-form-head {
  padding: 24px 28px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
}
.b3d-contact .ct-form-head-icon {
  width: 40px; height: 40px;
  background: var(--accent-dim); border: 1px solid var(--accent-glow);
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.b3d-contact .ct-form-head-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.15rem; font-weight: 800;
  color: var(--text); letter-spacing: -.02em;
}
.b3d-contact .ct-form-head-sub { font-size: .82rem; color: var(--text-3); margin-top: 2px; }

.b3d-contact .ct-form { padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.b3d-contact .ct-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.b3d-contact .ct-field { display: flex; flex-direction: column; gap: 7px; }
.b3d-contact .ct-field label {
  font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-3);
  display: flex; align-items: center; gap: 5px;
}
.b3d-contact .ct-required { color: var(--red); font-size: .75rem; }

.b3d-contact .ct-input, .b3d-contact .ct-select, .b3d-contact .ct-textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  font-family: 'DM Sans', sans-serif; font-size: .92rem;
  color: var(--text); outline: none;
  transition: border-color var(--tr), box-shadow var(--tr), background var(--tr);
}
.b3d-contact .ct-input::placeholder, .b3d-contact .ct-textarea::placeholder { color: var(--text-3); }
.b3d-contact .ct-input:hover, .b3d-contact .ct-select:hover, .b3d-contact .ct-textarea:hover { border-color: var(--border-2); }
.b3d-contact .ct-input:focus, .b3d-contact .ct-select:focus, .b3d-contact .ct-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
  background: var(--surface-3);
}
.b3d-contact .ct-select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23626e8a' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}
.b3d-contact .ct-select option { background: var(--surface-2); }
.b3d-contact .ct-textarea { min-height: 150px; resize: vertical; line-height: 1.6; }

.b3d-contact .ct-field-footer {
  display: flex; align-items: center; justify-content: flex-end;
  font-size: .72rem; color: var(--text-3); margin-top: 3px;
}
.b3d-contact #charCount { color: var(--accent); font-weight: 700; }

.b3d-contact .ct-privacy {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .8rem; color: var(--text-3); line-height: 1.55;
}
.b3d-contact .ct-privacy-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.b3d-contact .ct-privacy a { color: var(--accent); text-decoration: none; }
.b3d-contact .ct-privacy a:hover { text-decoration: underline; }

.b3d-contact .ct-submit-row {
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.b3d-contact .ct-submit-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: #0d0f14;
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: .95rem;
  padding: 14px 32px; border: none; border-radius: 100px;
  cursor: pointer; transition: background var(--tr), transform var(--tr), box-shadow var(--tr);
}
.b3d-contact .ct-submit-btn:hover { background: var(--accent-2); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(245,197,24,.25); }
.b3d-contact .ct-submit-btn:active { transform: translateY(0); }
.b3d-contact .ct-submit-btn svg { transition: transform var(--tr); }
.b3d-contact .ct-submit-btn:hover svg { transform: translateX(3px); }
.b3d-contact .ct-submit-note { font-size: .78rem; color: var(--text-3); }

@media (max-width: 860px) {
  .b3d-contact .ct-layout { grid-template-columns: 1fr; }
  .b3d-contact .ct-info { flex-direction: row; flex-wrap: wrap; }
  .b3d-contact .ct-info-card { flex: 1 1 200px; }
  .b3d-contact .ct-topics { width: 100%; }
}
@media (max-width: 600px) {
  .b3d-contact .ct-page { padding: 48px 18px 80px; }
  .b3d-contact .ct-form-row { grid-template-columns: 1fr; }
  .b3d-contact .ct-form { padding: 20px; gap: 16px; }
  .b3d-contact .ct-form-head { padding: 18px 20px; }
  .b3d-contact .ct-title { font-size: 2.2rem; }
  .b3d-contact .ct-submit-row { flex-direction: column; align-items: stretch; }
  .b3d-contact .ct-submit-btn { justify-content: center; }
}
/* ══════════════════════════════════════════════════════════════════
   TERMS  (was: terms.php inline <style>, gold token theme)
   ══════════════════════════════════════════════════════════════════ */
.b3d-scope.b3d-terms {
  --bg:          #0d0f14;
  --surface:     #161921;
  --surface-2:   #1e222d;
  --surface-3:   #252b38;
  --border:      #2a2f3d;
  --border-2:    #353d50;
  --accent:      #f5c518;
  --accent-dim:  rgba(245,197,24,.12);
  --accent-glow: rgba(245,197,24,.22);
  --text:        #e8eaf0;
  --text-2:      #a8b0c8;
  --text-3:      #626e8a;
  --radius:      14px;
  --radius-sm:   8px;
  --tr:          .2s cubic-bezier(.4,0,.2,1);
}

.b3d-terms .tc-page { max-width: 900px; margin: 0 auto; padding: 72px 28px 100px; }

.b3d-terms .tc-hero { margin-bottom: 56px; }
.b3d-terms .tc-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-dim); border: 1px solid var(--accent-glow);
  color: var(--accent); font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 100px; margin-bottom: 20px;
}
.b3d-terms .tc-title {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -.03em;
  color: var(--text); margin-bottom: 14px;
}
.b3d-terms .tc-subtitle {
  color: var(--text-2); font-size: .98rem; max-width: 560px; line-height: 1.7;
  margin-bottom: 24px;
}
.b3d-terms .tc-meta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.b3d-terms .tc-meta-item { display: flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--text-3); }
.b3d-terms .tc-meta-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

.b3d-terms .tc-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  align-items: start;
}

.b3d-terms .tc-toc {
  position: sticky;
  top: 90px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.b3d-terms .tc-toc-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-family: 'DM Sans', sans-serif;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3);
}
.b3d-terms .tc-toc-list { padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; }
.b3d-terms .tc-toc-link {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  font-size: .82rem; font-weight: 500; color: var(--text-3);
  text-decoration: none;
  transition: color var(--tr), background var(--tr);
}
.b3d-terms .tc-toc-link:hover { color: var(--text); background: var(--surface-2); }
.b3d-terms .tc-toc-link.active { color: var(--accent); background: var(--accent-dim); font-weight: 600; }
.b3d-terms .tc-toc-num {
  width: 20px; height: 20px; border-radius: 5px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: .65rem; font-weight: 700; color: var(--text-3);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background var(--tr), border-color var(--tr), color var(--tr);
}
.b3d-terms .tc-toc-link.active .tc-toc-num {
  background: var(--accent-dim); border-color: var(--accent-glow); color: var(--accent);
}

.b3d-terms .tc-content { display: flex; flex-direction: column; gap: 4px; }
.b3d-terms .tc-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--tr);
}
.b3d-terms .tc-section:target { border-color: var(--accent); }
.b3d-terms .tc-section-head {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.b3d-terms .tc-section-num {
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  background: var(--accent-dim); border: 1px solid var(--accent-glow);
  color: var(--accent); font-family: 'DM Sans', sans-serif;
  font-size: .75rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.b3d-terms .tc-section-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem; font-weight: 800;
  color: var(--text); letter-spacing: -.01em;
}
.b3d-terms .tc-section-body { padding: 20px 24px; color: var(--text-2); font-size: .9rem; line-height: 1.8; }
.b3d-terms .tc-section-body p { margin-bottom: 10px; }
.b3d-terms .tc-section-body p:last-child { margin-bottom: 0; }
.b3d-terms .tc-section-body strong { color: var(--text); font-weight: 600; }
.b3d-terms .tc-section-body a { color: var(--accent); text-decoration: none; }
.b3d-terms .tc-section-body a:hover { text-decoration: underline; }

.b3d-terms .tc-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.b3d-terms .tc-list li { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; color: var(--text-2); }
.b3d-terms .tc-list-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: 8px; }

.b3d-terms .tc-highlight {
  background: var(--accent-dim);
  border: 1px solid var(--accent-glow);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  font-size: .86rem; color: var(--text-2);
  display: flex; align-items: flex-start; gap: 10px;
  margin: 12px 0;
}
.b3d-terms .tc-highlight-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }

.b3d-terms .tc-contact-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  display: flex; align-items: center; gap: 14px;
  margin-top: 10px;
}
.b3d-terms .tc-contact-icon {
  width: 40px; height: 40px;
  background: var(--accent-dim); border: 1px solid var(--accent-glow);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.b3d-terms .tc-contact-info { display: flex; flex-direction: column; }
.b3d-terms .tc-contact-label { font-size: .72rem; color: var(--text-3); margin-bottom: 2px; }
.b3d-terms .tc-contact-value { font-size: .9rem; font-weight: 600; color: var(--text); }
.b3d-terms .tc-contact-value a { color: var(--accent); text-decoration: none; }
.b3d-terms .tc-contact-value a:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .b3d-terms .tc-layout { grid-template-columns: 1fr; }
  .b3d-terms .tc-toc { position: static; }
}
@media (max-width: 480px) {
  .b3d-terms .tc-page { padding: 48px 18px 80px; }
  .b3d-terms .tc-section-head { padding: 16px 18px; }
  .b3d-terms .tc-section-body { padding: 16px 18px; }
}
/* ══════════════════════════════════════════════════════════════════
   UNIT CONVERTER  (was: tools/unit-converter.php inline <style>)
   ══════════════════════════════════════════════════════════════════ */
.b3d-scope.b3d-uc {
  --bg:          #0d0f14;
  --surface:     #161921;
  --surface-2:   #1e222d;
  --surface-3:   #252b38;
  --border:      #2a2f3d;
  --border-2:    #353d50;
  --accent:      #f5c518;
  --accent-2:    #ffd43b;
  --accent-dim:  rgba(245,197,24,.12);
  --accent-glow: rgba(245,197,24,.22);
  --green:       #3ecf8e;
  --green-dim:   rgba(62,207,142,.1);
  --text:        #e8eaf0;
  --text-2:      #a8b0c8;
  --text-3:      #626e8a;
  --radius:      14px;
  --radius-sm:   8px;
  --tr:          .2s cubic-bezier(.4,0,.2,1);
}

/* nests inside <main class="tool-wrap"> — own container spacing */
.b3d-uc .uc-page { max-width: 880px; margin: 0 auto; padding: 12px 4px 48px; }

.b3d-uc .uc-header { text-align: center; margin-bottom: 44px; }
.b3d-uc .uc-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-dim); border: 1px solid var(--accent-glow);
  color: var(--accent); font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 100px; margin-bottom: 16px;
}
.b3d-uc .uc-title { font-family: 'DM Sans', sans-serif; font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; margin-bottom: 12px; color: var(--text); }
.b3d-uc .uc-title span { color: var(--accent); }
.b3d-uc .uc-subtitle { color: var(--text-2); font-size: 1rem; max-width: 500px; margin: 0 auto; line-height: 1.7; }

.b3d-uc .uc-cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 8px;
  margin-bottom: 20px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 6px;
}
.b3d-uc .uc-cat-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 8px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: transparent;
  cursor: pointer; transition: background var(--tr), border-color var(--tr), color var(--tr);
  color: var(--text-3);
  font-family: 'DM Sans', sans-serif;
}
.b3d-uc .uc-cat-btn:hover { background: var(--surface-2); color: var(--text-2); }
.b3d-uc .uc-cat-btn.active { background: var(--accent-dim); border-color: var(--accent-glow); color: var(--accent); }
.b3d-uc .uc-cat-icon { font-size: 1.2rem; line-height: 1; }
.b3d-uc .uc-cat-name { font-size: .7rem; font-weight: 700; letter-spacing: .04em; }

.b3d-uc .uc-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 20px;
}
.b3d-uc .uc-input-section { padding: 24px; border-bottom: 1px solid var(--border); }
.b3d-uc .uc-convert-row {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px;
  align-items: end; margin-bottom: 12px;
}
.b3d-uc .uc-field { display: flex; flex-direction: column; gap: 7px; }
.b3d-uc .uc-field-label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-3);
}
.b3d-uc .uc-input, .b3d-uc .uc-select {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text);
  font-family: 'DM Sans', sans-serif; font-size: .95rem;
  padding: 12px 14px; outline: none; width: 100%;
  transition: border-color var(--tr), box-shadow var(--tr);
}
.b3d-uc .uc-input:focus, .b3d-uc .uc-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.b3d-uc .uc-input::placeholder { color: var(--text-3); }
.b3d-uc .uc-select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23626e8a' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.b3d-uc .uc-select option { background: var(--surface-2); }

.b3d-uc .uc-swap-btn {
  width: 40px; height: 40px; flex-shrink: 0; align-self: flex-end;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 50%; color: var(--text-3); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; transition: color var(--tr), border-color var(--tr), transform var(--tr);
  margin-bottom: 2px;
}
.b3d-uc .uc-swap-btn:hover { color: var(--accent); border-color: var(--accent-glow); }
.b3d-uc .uc-swap-btn:active { transform: rotate(180deg); }

.b3d-uc .uc-result-section { padding: 24px; }
.b3d-uc .uc-result-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); margin-bottom: 12px; }
.b3d-uc .uc-result-display {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 18px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  transition: border-color var(--tr);
  margin-bottom: 12px;
}
.b3d-uc .uc-result-display.has-result { border-color: var(--accent-glow); }
.b3d-uc .uc-result-val {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800; color: var(--accent);
  letter-spacing: -.03em; line-height: 1;
  word-break: break-all;
}
.b3d-uc .uc-result-unit { font-size: .82rem; color: var(--text-3); margin-top: 4px; }
.b3d-uc .uc-copy-btn {
  flex-shrink: 0; display: flex; align-items: center; gap: 6px;
  background: var(--surface-3); color: var(--text-3);
  border: 1px solid var(--border); border-radius: 100px;
  font-family: 'DM Sans', sans-serif;
  font-size: .78rem; font-weight: 600; padding: 7px 14px; cursor: pointer;
  transition: color var(--tr), border-color var(--tr), background var(--tr);
  white-space: nowrap;
}
.b3d-uc .uc-copy-btn:hover { color: var(--accent); border-color: var(--accent-glow); background: var(--accent-dim); }

.b3d-uc .uc-formula {
  background: var(--surface-3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 16px;
  font-size: .84rem; color: var(--text-2); font-family: monospace;
  line-height: 1.5; word-break: break-word;
  min-height: 42px; display: flex; align-items: center;
}
.b3d-uc .uc-formula em { color: var(--text-3); font-style: normal; }

.b3d-uc .uc-ref-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 20px;
}
.b3d-uc .uc-ref-head {
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  font-family: 'DM Sans', sans-serif; font-size: .82rem; font-weight: 700; color: var(--text-2);
  display: flex; align-items: center; gap: 8px;
}
.b3d-uc .uc-ref-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.b3d-uc .uc-ref-table th {
  text-align: left; padding: 10px 16px;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-3); border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.b3d-uc .uc-ref-table td { padding: 10px 16px; border-bottom: 1px solid var(--border); color: var(--text-2); }
.b3d-uc .uc-ref-table tr:last-child td { border-bottom: none; }
.b3d-uc .uc-ref-table tr:hover td { background: var(--surface-2); }
.b3d-uc .uc-ref-table td:first-child { color: var(--text); font-weight: 600; }
.b3d-uc .uc-ref-table td:last-child { color: var(--accent); font-weight: 700; font-family: monospace; }

.b3d-uc #uc-toast {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--surface-3); border: 1px solid var(--border-2);
  border-radius: 100px; padding: 10px 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: .84rem; color: var(--text);
  opacity: 0; pointer-events: none; z-index: 9999;
  transition: opacity .25s ease, transform .25s ease; white-space: nowrap;
}
.b3d-uc #uc-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.b3d-uc .uc-seo { margin-top: 64px; }
.b3d-uc .uc-seo-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 14px; margin: 24px 0; }
.b3d-uc .uc-seo-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px; }
.b3d-uc .uc-seo-card h3 { font-family: 'DM Sans', sans-serif; font-size: .9rem; font-weight: 700; color: var(--accent); margin-bottom: 6px; }
.b3d-uc .uc-seo-card p { font-size: .83rem; color: var(--text-3); line-height: 1.55; }
.b3d-uc .uc-seo h2 { font-family: 'DM Sans', sans-serif; font-size: 1.28rem; font-weight: 800; color: var(--text); margin: 32px 0 10px; }
.b3d-uc .uc-seo p { color: var(--text-3); font-size: .89rem; max-width: 680px; line-height: 1.7; margin-bottom: 8px; }
.b3d-uc .uc-faq { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.b3d-uc .uc-faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.b3d-uc .uc-faq-q { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; cursor: pointer; font-family: 'DM Sans', sans-serif; font-size: .88rem; font-weight: 700; color: var(--text); user-select: none; transition: background var(--tr); }
.b3d-uc .uc-faq-q:hover { background: var(--surface-2); }
.b3d-uc .uc-faq-chevron { flex-shrink: 0; color: var(--text-3); transition: transform var(--tr); }
.b3d-uc .uc-faq-item.open .uc-faq-chevron { transform: rotate(180deg); color: var(--accent); }
.b3d-uc .uc-faq-item.open .uc-faq-q { color: var(--accent); }
.b3d-uc .uc-faq-a { display: none; padding: 0 18px 14px; font-size: .84rem; color: var(--text-3); line-height: 1.7; border-top: 1px solid var(--border); padding-top: 12px; }
.b3d-uc .uc-faq-item.open .uc-faq-a { display: block; }
.b3d-uc .uc-related { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 12px; }
.b3d-uc .uc-related a { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-3); font-size: .79rem; font-weight: 600; padding: 6px 14px; border-radius: 100px; text-decoration: none; transition: color var(--tr), border-color var(--tr); }
.b3d-uc .uc-related a:hover { color: var(--accent); border-color: var(--accent); }

@media (max-width: 580px) {
  .b3d-uc .uc-page { padding: 8px 0 40px; }
  .b3d-uc .uc-convert-row { grid-template-columns: 1fr; gap: 10px; }
  .b3d-uc .uc-swap-btn { display: none; }
  .b3d-uc .uc-cats { grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 4px; }
  .b3d-uc .uc-cat-btn { padding: 8px 4px; }
  .b3d-uc .uc-cat-icon { font-size: 1rem; }
}
/* ══════════════════════════════════════════════════════════════════
   WEEKS CALCULATOR  (was: tools/weeks-calculator.php inline <style>)
   NOTE: `.btn-primary` / `.btn-secondary` names are intentional —
   scoped specificity (.b3d-weeks .btn-primary) beats site.css's
   global .btn-primary, preserving the original gold button design.
   ══════════════════════════════════════════════════════════════════ */
.b3d-scope.b3d-weeks {
  --bg:         #0d0f14;
  --surface:    #161921;
  --surface-2:  #1e222d;
  --border:     #2a2f3d;
  --accent:     #f5c518;
  --text:       #e8eaf0;
  --text-muted: #7a8099;
  --radius:     14px;
  --radius-sm:  8px;
  --tr:         .22s cubic-bezier(.4,0,.2,1);
}

/* nests inside <main class="tool-wrap"> — own container spacing */
.b3d-weeks .wc-page { max-width: 880px; margin: 0 auto; padding: 12px 4px 48px; }

.b3d-weeks .wc-header { text-align: center; margin-bottom: 48px; }
.b3d-weeks .wc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(245,197,24,.12);
  border: 1px solid rgba(245,197,24,.25);
  color: var(--accent);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 18px;
}
.b3d-weeks .wc-title {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: 14px;
  color: var(--text);
}
.b3d-weeks .wc-title span { color: var(--accent); }
.b3d-weeks .wc-subtitle { color: var(--text-muted); font-size: 1rem; max-width: 500px; margin: 0 auto; }

.b3d-weeks .wc-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 24px;
}

.b3d-weeks .wc-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 28px 28px 0;
}
.b3d-weeks .wc-field label {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.b3d-weeks .wc-field input[type="date"] {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: .95rem;
  font-weight: 600;
  outline: none;
  transition: border-color var(--tr), box-shadow var(--tr);
  cursor: pointer;
}
.b3d-weeks .wc-field input[type="date"]:hover  { border-color: rgba(245,197,24,.4); }
.b3d-weeks .wc-field input[type="date"]:focus  { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(245,197,24,.12); }
.b3d-weeks .wc-field input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .6; cursor: pointer; }
.b3d-weeks .wc-field input.error { border-color: #e05252; box-shadow: 0 0 0 3px rgba(224,82,82,.12); }
.b3d-weeks .wc-field-err { font-size: .78rem; color: #e05252; margin-top: 5px; min-height: 18px; }

.b3d-weeks .wc-swap-row {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 28px 0;
}
.b3d-weeks .btn-swap {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 100px;
  font-family: 'DM Sans', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  padding: 7px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: border-color var(--tr), color var(--tr);
}
.b3d-weeks .btn-swap:hover { border-color: var(--text-muted); color: var(--text); }
.b3d-weeks .btn-swap svg { transition: transform .3s ease; }
.b3d-weeks .btn-swap:hover svg { transform: rotate(180deg); }

.b3d-weeks .wc-actions {
  display: flex;
  gap: 12px;
  padding: 20px 28px 28px;
  flex-wrap: wrap;
}
.b3d-weeks .btn-primary {
  flex: 1;
  min-width: 160px;
  background: var(--accent);
  color: #0d0f14;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: .95rem;
  padding: 14px 28px;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition: background var(--tr), transform var(--tr);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.b3d-weeks .btn-primary:hover { background: #ffd43b; transform: translateY(-1px); }
.b3d-weeks .btn-secondary {
  background: var(--surface-2);
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
  font-size: .9rem;
  font-weight: 600;
  padding: 14px 22px;
  border: 1px solid var(--border);
  border-radius: 100px;
  cursor: pointer;
  transition: border-color var(--tr), color var(--tr);
}
.b3d-weeks .btn-secondary:hover { border-color: var(--text-muted); color: var(--text); }

.b3d-weeks .wc-results { display: none; }
.b3d-weeks .wc-results.visible { display: block; }

.b3d-weeks .wc-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}
.b3d-weeks .wc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 20px;
  text-align: center;
  transition: transform var(--tr), border-color var(--tr);
}
.b3d-weeks .wc-card:hover { transform: translateY(-3px); border-color: rgba(245,197,24,.35); }
.b3d-weeks .wc-card-num {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -.02em;
}
.b3d-weeks .wc-card-label {
  font-size: .82rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.b3d-weeks .wc-extras {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}
.b3d-weeks .wc-extra {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.b3d-weeks .wc-extra-icon { font-size: 1.4rem; flex-shrink: 0; }
.b3d-weeks .wc-extra-val {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.b3d-weeks .wc-extra-lbl { font-size: .75rem; color: var(--text-muted); margin-top: 3px; }

.b3d-weeks .wc-summary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: .92rem;
  color: var(--text);
}
.b3d-weeks .wc-summary-icon { font-size: 1.6rem; flex-shrink: 0; margin-top: 2px; }
.b3d-weeks .wc-summary strong { color: var(--accent); }
.b3d-weeks .wc-summary p { margin: 0; line-height: 1.6; }
.b3d-weeks .wc-summary p + p { margin-top: 4px; }

.b3d-weeks #wc-toast {
  position: fixed;
  bottom: 32px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1e222d;
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 10px 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: .85rem;
  color: var(--text);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 9999;
  white-space: nowrap;
}
.b3d-weeks #wc-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.b3d-weeks .wc-seo { margin-top: 72px; }
.b3d-weeks .wc-seo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin: 32px 0;
}
.b3d-weeks .wc-seo-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 20px;
}
.b3d-weeks .wc-seo-card h3 { font-family: 'DM Sans', sans-serif; font-size: .95rem; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.b3d-weeks .wc-seo-card p  { font-size: .85rem; color: var(--text-muted); line-height: 1.55; }
.b3d-weeks .wc-seo h2 { font-family: 'DM Sans', sans-serif; font-size: 1.35rem; font-weight: 800; color: var(--text); margin: 36px 0 12px; }
.b3d-weeks .wc-seo p  { color: var(--text-muted); font-size: .92rem; max-width: 680px; line-height: 1.7; margin-bottom: 10px; }
.b3d-weeks .wc-faq { display: flex; flex-direction: column; gap: 12px; margin: 18px 0; }
.b3d-weeks .wc-faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 20px; }
.b3d-weeks .wc-faq-item strong { display: block; font-family: 'DM Sans', sans-serif; font-size: .9rem; color: var(--text); margin-bottom: 6px; }
.b3d-weeks .wc-faq-item p { font-size: .85rem; color: var(--text-muted); margin: 0; }
.b3d-weeks .wc-related { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.b3d-weeks .wc-related a {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: .82rem;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 100px;
  text-decoration: none;
  transition: color var(--tr), border-color var(--tr);
}
.b3d-weeks .wc-related a:hover { color: var(--accent); border-color: var(--accent); }

@media (max-width: 700px) {
  .b3d-weeks .wc-page    { padding: 8px 0 40px; }
  .b3d-weeks .wc-inputs  { grid-template-columns: 1fr; padding: 20px 20px 0; }
  .b3d-weeks .wc-actions { padding: 16px 20px 20px; }
  .b3d-weeks .wc-cards   { grid-template-columns: repeat(2, 1fr); }
  .b3d-weeks .wc-extras  { grid-template-columns: 1fr; }
  .b3d-weeks .wc-swap-row { padding: 10px 20px 0; }
}
@media (max-width: 400px) {
  .b3d-weeks .wc-cards { grid-template-columns: 1fr 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   PRIVACY POLICY  (legal text kept verbatim — wrapper styling only)
   ══════════════════════════════════════════════════════════════════ */
.b3d-scope.b3d-privacy {
  --pp-accent: #f5c518;
}
.b3d-privacy .b3d-doc { margin-top: 36px; }
.b3d-privacy .b3d-doc h2 {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 38px 0 12px;
}
.b3d-privacy .b3d-doc h2:first-child { margin-top: 0; }
.b3d-privacy .b3d-doc p {
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.85;
  margin-bottom: 14px;
}
.b3d-privacy .b3d-doc a { color: var(--pp-accent); text-decoration: none; }
.b3d-privacy .b3d-doc a:hover { text-decoration: underline; }
.b3d-privacy .b3d-doc strong { color: var(--ink); }

/* ══════════════════════════════════════════════════════════════════
   LOAN EMI  (site.css tool classes + page-local extras below)
   ══════════════════════════════════════════════════════════════════ */
.b3d-emi .field-row { grid-template-columns: repeat(3, 1fr); }
.b3d-emi .b3d-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-dim); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent); font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 100px; margin-bottom: 16px;
}
.b3d-emi .b3d-summary {
  margin-top: 20px;
  background: var(--bg-soft); border: 1px solid var(--line-soft);
  border-radius: 12px; padding: 16px 18px;
  font-size: 15px; line-height: 1.7; color: var(--muted);
  text-align: center;
}
.b3d-emi .b3d-faq { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.b3d-emi .b3d-faq-item {
  background: var(--glass); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px 20px;
}
.b3d-emi .b3d-faq-item strong { display: block; font-size: .95rem; color: var(--ink); margin-bottom: 6px; }
.b3d-emi .b3d-faq-item p { font-size: .9rem; color: var(--muted); line-height: 1.7; }
.b3d-emi .b3d-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 16px 0 24px; }
.b3d-emi .b3d-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 15px; color: var(--ink-soft); line-height: 1.65;
}
.b3d-emi .b3d-list li::before { content: '✓'; color: var(--accent); font-weight: 700; flex-shrink: 0; }
.b3d-emi .tool-section p { color: var(--muted); font-size: 15.5px; line-height: 1.8; margin-bottom: 12px; }
.b3d-emi .tool-section h2 { margin: 40px 0 14px; font-size: 22px; letter-spacing: -.01em; }
.b3d-emi .tool-section p a { color: var(--accent); text-decoration: none; }
.b3d-emi .tool-section p a:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .b3d-emi .stats { grid-template-columns: 1fr; }
  .b3d-emi .field-row { grid-template-columns: 1fr; }
}