/* ==========================================================================
   AsadWebs tool shell v3 — WAVE 4 STUDIO LAYER (2026-10-24)
   The studio convergence layer for the generic-shell tools. Linked ONLY
   on allowlisted tool pages (ToolController slug allowlist), after
   tool-page-v2.css. Surface properties only — no layout or behaviour
   changes. Buttons keep the owner's 2px radius (tool-page-v2 rules).

   The generic primaries are defined by the tools as var(--accent), which
   tool-page-v2 sets to the pale #818cf8 in dark — this layer pins them to
   solid indigo #4f46e5 like Waves 1–3. Where a tool carries the owner's
   own darker-indigo pin at ID specificity (#icvRoot / #audRoot /
   #svoRoot / #mteRoot rules, 2026-10-17), those rules keep winning and
   the button stays #312e81 by the owner's order — this layer does not
   fight them. Text accents keep the pale accent for contrast, exactly
   as in Waves 1–3.
   ========================================================================== */

/* ---------- A. Primary actions -> solid indigo ---------------------------- */
body .tool-panel.tool-panel .xp-primary,
body .tool-panel.tool-panel .aud-primary,
body .tool-panel.tool-panel .svo-primary,
body .tool-panel.tool-panel .pngc-primary,
body .tool-panel.tool-panel .mte-primary,
body .tool-panel.tool-panel .imc-primary,
body .tool-panel.tool-panel .convertButton,
body .tool-panel.tool-panel .downloadButton,
body .tool-panel.tool-panel .downloadButtonSingle,
body .tool-panel.tool-panel .download-button-single,
body .tool-panel.tool-panel .download-all-btn,
body .tool-panel.tool-panel .downloadAllButton,
body .tool-panel.tool-panel .btn-primary {
  background: #4f46e5 !important; background-color: #4f46e5 !important;
  border-color: #4f46e5 !important; color: #fff !important;
}
body .tool-panel.tool-panel .xp-primary:hover:not(:disabled),
body .tool-panel.tool-panel .aud-primary:hover:not(:disabled),
body .tool-panel.tool-panel .svo-primary:hover:not(:disabled),
body .tool-panel.tool-panel .pngc-primary:hover:not(:disabled),
body .tool-panel.tool-panel .mte-primary:hover:not(:disabled),
body .tool-panel.tool-panel .imc-primary:hover:not(:disabled),
body .tool-panel.tool-panel .convertButton:hover:not(:disabled),
body .tool-panel.tool-panel .downloadButton:hover:not(:disabled),
body .tool-panel.tool-panel .downloadAllButton:hover:not(:disabled),
body .tool-panel.tool-panel .btn-primary:hover:not(:disabled) {
  background: #4338ca !important; background-color: #4338ca !important; border-color: #4338ca !important; color: #fff !important;
}

/* ---------- B. Ghost / secondary actions -> slate -------------------------- */
html[data-theme="dark"] body .tool-panel.tool-panel .ghost,
html[data-theme="dark"] body .tool-panel.tool-panel .xp-ghost,
html[data-theme="dark"] body .tool-panel.tool-panel .aud-ghost,
html[data-theme="dark"] body .tool-panel.tool-panel .mte-ghost,
html[data-theme="dark"] body .tool-panel.tool-panel .btn-secondary {
  background: #252b3d !important; border: 1px solid #3b4358 !important; color: #dbe2f1 !important;
}
html[data-theme="dark"] body .tool-panel.tool-panel .ghost:hover:not(:disabled),
html[data-theme="dark"] body .tool-panel.tool-panel .xp-ghost:hover:not(:disabled),
html[data-theme="dark"] body .tool-panel.tool-panel .aud-ghost:hover:not(:disabled),
html[data-theme="dark"] body .tool-panel.tool-panel .mte-ghost:hover:not(:disabled),
html[data-theme="dark"] body .tool-panel.tool-panel .btn-secondary:hover:not(:disabled) {
  background: #2c3549 !important; color: #fff !important;
}
html[data-theme="light"] body .tool-panel.tool-panel .ghost,
html[data-theme="light"] body .tool-panel.tool-panel .xp-ghost,
html[data-theme="light"] body .tool-panel.tool-panel .aud-ghost,
html[data-theme="light"] body .tool-panel.tool-panel .mte-ghost,
html[data-theme="light"] body .tool-panel.tool-panel .btn-secondary {
  background: #eceae2 !important; border: 1px solid #d8d5c9 !important; color: #23232a !important;
}
html[data-theme="light"] body .tool-panel.tool-panel .ghost:hover:not(:disabled),
html[data-theme="light"] body .tool-panel.tool-panel .xp-ghost:hover:not(:disabled),
html[data-theme="light"] body .tool-panel.tool-panel .aud-ghost:hover:not(:disabled),
html[data-theme="light"] body .tool-panel.tool-panel .mte-ghost:hover:not(:disabled),
html[data-theme="light"] body .tool-panel.tool-panel .btn-secondary:hover:not(:disabled) {
  background: #e2dfd2 !important; color: #17171c !important;
}

/* ---------- C. Chips / presets / modes ------------------------------------- */
/* Inactive states only — the :not() guards keep these rules off the active
   chip (an unguarded theme-scoped rule outranks the plain active rule). */
html[data-theme="dark"] body .tool-panel.tool-panel .heic-qbtn:not(.active),
html[data-theme="dark"] body .tool-panel.tool-panel .xp-preset:not(.is-active),
html[data-theme="dark"] body .tool-panel.tool-panel .c20-preset:not(.is-active),
html[data-theme="dark"] body .tool-panel.tool-panel .imc-chip:not(.is-on),
html[data-theme="dark"] body .tool-panel.tool-panel .pngc-mode:not(.is-active),
html[data-theme="dark"] body .tool-panel.tool-panel .xp-chip {
  background: #252b3d !important; border: 1px solid #3b4358 !important; color: #dbe2f1 !important;
}
html[data-theme="light"] body .tool-panel.tool-panel .heic-qbtn:not(.active),
html[data-theme="light"] body .tool-panel.tool-panel .xp-preset:not(.is-active),
html[data-theme="light"] body .tool-panel.tool-panel .c20-preset:not(.is-active),
html[data-theme="light"] body .tool-panel.tool-panel .imc-chip:not(.is-on),
html[data-theme="light"] body .tool-panel.tool-panel .pngc-mode:not(.is-active),
html[data-theme="light"] body .tool-panel.tool-panel .xp-chip {
  background: #eceae2 !important; border: 1px solid #d8d5c9 !important; color: #23232a !important;
}
body .tool-panel.tool-panel .heic-qbtn.active,
body .tool-panel.tool-panel .xp-preset.is-active,
body .tool-panel.tool-panel .c20-preset.is-active,
body .tool-panel.tool-panel .imc-chip.is-on,
body .tool-panel.tool-panel .pngc-mode.is-active {
  background: #4f46e5 !important; border-color: #4f46e5 !important; color: #fff !important;
}
/* pngc's active chip is var(--accent)-based with no darker pin — its blade
   rule ties this layer's specificity and sits later, so it needs the
   theme-scoped form to converge in dark. */
html body .tool-panel.tool-panel button.pngc-mode.is-active {
  background: #4f46e5 !important; border-color: #4f46e5 !important; color: #fff !important;
}

/* ---------- D. Mini / icon buttons ------------------------------------------ */
html[data-theme="dark"] body .tool-panel.tool-panel .xp-mini,
html[data-theme="dark"] body .tool-panel.tool-panel .icv-addbtn,
html[data-theme="dark"] body .tool-panel.tool-panel .heic-addbtn,
html[data-theme="dark"] body .tool-panel.tool-panel .heic-remove,
html[data-theme="dark"] body .tool-panel.tool-panel .svo-remove {
  background: #252b3d !important; border: 1px solid #3b4358 !important; color: #dbe2f1 !important;
}
html[data-theme="light"] body .tool-panel.tool-panel .xp-mini,
html[data-theme="light"] body .tool-panel.tool-panel .icv-addbtn,
html[data-theme="light"] body .tool-panel.tool-panel .heic-addbtn,
html[data-theme="light"] body .tool-panel.tool-panel .heic-remove,
html[data-theme="light"] body .tool-panel.tool-panel .svo-remove {
  background: #eceae2 !important; border: 1px solid #d8d5c9 !important; color: #23232a !important;
}

/* ---------- E. Fields -> studio field tokens -------------------------------- */
html[data-theme="dark"] body .tool-panel.tool-panel .tool-flow input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
html[data-theme="dark"] body .tool-panel.tool-panel .tool-flow select,
html[data-theme="dark"] body .tool-panel.tool-panel .tool-flow textarea {
  background: #0c1322 !important; border-color: #2b3a55 !important; color: #e5e7eb !important;
}
html[data-theme="light"] body .tool-panel.tool-panel .tool-flow input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
html[data-theme="light"] body .tool-panel.tool-panel .tool-flow select,
html[data-theme="light"] body .tool-panel.tool-panel .tool-flow textarea {
  background: #fff !important; border-color: #d8d5c9 !important; color: #23232a !important;
}
body .tool-panel.tool-panel .tool-flow input[type="range"] { accent-color: #4f46e5 !important; }

/* ---------- F. Dropzone -> studio field -------------------------------------- */
html[data-theme="dark"] body .tool-panel.tool-panel .dropzone {
  background: #0c1322 !important; border: 1.5px dashed #2b3a55 !important; border-radius: 14px !important;
}
html[data-theme="light"] body .tool-panel.tool-panel .dropzone {
  background: #fbfaf6 !important; border: 1.5px dashed #c9c5b4 !important; border-radius: 14px !important;
}

/* ---------- G. Tables (mp3 tag editor) ---------------------------------------- */
html[data-theme="dark"] body .tool-panel.tool-panel .tool-flow table th {
  background: #111827 !important; border-color: #243049 !important; color: #dbe2f1 !important;
}
html[data-theme="dark"] body .tool-panel.tool-panel .tool-flow table td { border-color: #243049 !important; }
html[data-theme="light"] body .tool-panel.tool-panel .tool-flow table th {
  background: #f4f2ea !important; border-color: #e0dcce !important; color: #23232a !important;
}
html[data-theme="light"] body .tool-panel.tool-panel .tool-flow table td { border-color: #e0dcce !important; }

/* ---------- H. Dark mirror for OS-dark visitors with no explicit theme -------- */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body .tool-panel.tool-panel .ghost,
  html:not([data-theme="light"]) body .tool-panel.tool-panel .xp-ghost,
  html:not([data-theme="light"]) body .tool-panel.tool-panel .aud-ghost,
  html:not([data-theme="light"]) body .tool-panel.tool-panel .mte-ghost,
  html:not([data-theme="light"]) body .tool-panel.tool-panel .btn-secondary {
    background: #252b3d !important; border: 1px solid #3b4358 !important; color: #dbe2f1 !important;
  }
  html:not([data-theme="light"]) body .tool-panel.tool-panel .heic-qbtn:not(.active),
  html:not([data-theme="light"]) body .tool-panel.tool-panel .xp-preset:not(.is-active),
  html:not([data-theme="light"]) body .tool-panel.tool-panel .c20-preset:not(.is-active),
  html:not([data-theme="light"]) body .tool-panel.tool-panel .imc-chip:not(.is-on),
  html:not([data-theme="light"]) body .tool-panel.tool-panel .pngc-mode:not(.is-active),
  html:not([data-theme="light"]) body .tool-panel.tool-panel .xp-chip {
    background: #252b3d !important; border: 1px solid #3b4358 !important; color: #dbe2f1 !important;
  }
  html:not([data-theme="light"]) body .tool-panel.tool-panel .xp-mini,
  html:not([data-theme="light"]) body .tool-panel.tool-panel .icv-addbtn,
  html:not([data-theme="light"]) body .tool-panel.tool-panel .heic-addbtn,
  html:not([data-theme="light"]) body .tool-panel.tool-panel .heic-remove,
  html:not([data-theme="light"]) body .tool-panel.tool-panel .svo-remove {
    background: #252b3d !important; border: 1px solid #3b4358 !important; color: #dbe2f1 !important;
  }
  html:not([data-theme="light"]) body .tool-panel.tool-panel .tool-flow input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
  html:not([data-theme="light"]) body .tool-panel.tool-panel .tool-flow select,
  html:not([data-theme="light"]) body .tool-panel.tool-panel .tool-flow textarea {
    background: #0c1322 !important; border-color: #2b3a55 !important; color: #e5e7eb !important;
  }
  html:not([data-theme="light"]) body .tool-panel.tool-panel .dropzone {
    background: #0c1322 !important; border: 1.5px dashed #2b3a55 !important; border-radius: 14px !important;
  }
  html:not([data-theme="light"]) body .tool-panel.tool-panel .tool-flow table th {
    background: #111827 !important; border-color: #243049 !important; color: #dbe2f1 !important;
  }
  html:not([data-theme="light"]) body .tool-panel.tool-panel .tool-flow table td { border-color: #243049 !important; }
}

/* ==========================================================================
   WAVE 4 — BATCH B LAYER (2026-10-24): calculators & generators
   The generic sections above already cover these tools' fields, tables
   and .ghost buttons. Below: the barcode kits' own classes, and one
   deliberate exception — the password generator's blade sets its ghost
   buttons transparent on purpose, so that design is restored after the
   generic ghost rule. The barcode scanner's tabs/ghosts are blade-ruled
   at tie specificity and stay as designed; its primary joins section A
   behaviour via the rule below (its #bcsRoot pin still governs).
   Online Timer is NOT in this batch: its tmv3 kit is a bespoke design
   (gradient stage themes) and the tool is excluded from the allowlist.
   ========================================================================== */
body .tool-panel.tool-panel .bcg-primary,
body .tool-panel.tool-panel .bcs-primary {
  background: #4f46e5 !important; background-color: #4f46e5 !important;
  border-color: #4f46e5 !important; color: #fff !important;
}
body .tool-panel.tool-panel .bcg-primary:hover:not(:disabled),
body .tool-panel.tool-panel .bcs-primary:hover:not(:disabled) {
  background: #4338ca !important; background-color: #4338ca !important; border-color: #4338ca !important; color: #fff !important;
}
html[data-theme="dark"] body .tool-panel.tool-panel .bcg-tab:not(.is-active) {
  background: #252b3d !important; border: 1px solid #3b4358 !important; color: #dbe2f1 !important;
}
html[data-theme="light"] body .tool-panel.tool-panel .bcg-tab:not(.is-active) {
  background: #eceae2 !important; border: 1px solid #d8d5c9 !important; color: #23232a !important;
}
body .tool-panel.tool-panel .bcg-tab.is-active {
  background: #4f46e5 !important; border-color: #4f46e5 !important; color: #fff !important;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body .tool-panel.tool-panel .bcg-tab:not(.is-active) {
    background: #252b3d !important; border: 1px solid #3b4358 !important; color: #dbe2f1 !important;
  }
}
/* Password generator: the blade's transparent ghost buttons are its
   design (`.pwd button.ghost{background:transparent!important}`) — keep.
   (html+body prefix: the generic ghost rules carry two elements, so this
   counter needs both to tie on specificity and win on file order.) */
html body .tool-panel.tool-panel .pwd .ghost { background: transparent !important; }

/* ==========================================================================
   WAVE 4 — BATCH C LAYER (2026-10-24): dev / text / web utilities
   Most of this batch already rides the generic sections (xp kits in JSON
   Formatter + Word Counter, .ghost in Base64/JWT/Meta Generator, fields
   and tables everywhere). Below: the remaining families.
   Deliberately NOT touched: bm-ghost / sg-ghost / ds-ghost / sx-ghost and
   the ue-utm chips — those blades set them transparent on purpose;
   sqv-ghost and the dth tabs are blade-defended at tie specificity and
   stay as designed; the URL tool's .btn-teal keeps the theme's teal
   (a deliberate two-action distinction). Robots.txt Generator is NOT
   in this batch: its rbx kit is a bespoke design (own vars, gradient
   primary) and the tool is excluded from the allowlist.
   ========================================================================== */
/* Primaries: hs (unpinned, converges), dth + sqv (their #xxxRoot pins govern) */
body .tool-panel.tool-panel .hs-primary,
body .tool-panel.tool-panel .dth-primary,
body .tool-panel.tool-panel .sqv-primary {
  background: #4f46e5 !important; background-color: #4f46e5 !important;
  border-color: #4f46e5 !important; color: #fff !important;
}
body .tool-panel.tool-panel .hs-primary:hover:not(:disabled),
body .tool-panel.tool-panel .dth-primary:hover:not(:disabled),
body .tool-panel.tool-panel .sqv-primary:hover:not(:disabled) {
  background: #4338ca !important; background-color: #4338ca !important; border-color: #4338ca !important; color: #fff !important;
}
/* Classless main-action buttons (class="button": Class C IP, Meta
   Analyzer, URL Shortener, YouTube Thumbnail) — theme's generic button
   rule washes these pale in dark like the PDF primaries once were. */
body .tool-panel.tool-panel button.button {
  background: #4f46e5 !important; background-color: #4f46e5 !important;
  border-color: #4f46e5 !important; color: #fff !important;
}
body .tool-panel.tool-panel button.button:hover:not(:disabled) {
  background: #4338ca !important; background-color: #4338ca !important; border-color: #4338ca !important; color: #fff !important;
}
/* Bootstrap outline buttons (Hash Generator) */
html[data-theme="dark"] body .tool-panel.tool-panel .btn-outline-primary {
  background: transparent !important; border: 1px solid #4f46e5 !important; color: #c7d2fe !important;
}
html[data-theme="dark"] body .tool-panel.tool-panel .btn-outline-secondary {
  background: transparent !important; border: 1px solid #3b4358 !important; color: #dbe2f1 !important;
}
html[data-theme="light"] body .tool-panel.tool-panel .btn-outline-primary {
  background: transparent !important; border: 1px solid #4f46e5 !important; color: #4338ca !important;
}
html[data-theme="light"] body .tool-panel.tool-panel .btn-outline-secondary {
  background: transparent !important; border: 1px solid #d8d5c9 !important; color: #23232a !important;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body .tool-panel.tool-panel .btn-outline-primary {
    background: transparent !important; border: 1px solid #4f46e5 !important; color: #c7d2fe !important;
  }
  html:not([data-theme="light"]) body .tool-panel.tool-panel .btn-outline-secondary {
    background: transparent !important; border: 1px solid #3b4358 !important; color: #dbe2f1 !important;
  }
}
/* Slate utilities: docx-to-html ghost + text-case copy buttons */
html[data-theme="dark"] body .tool-panel.tool-panel .dth-ghost,
html[data-theme="dark"] body .tool-panel.tool-panel .case-copy {
  background: #252b3d !important; border: 1px solid #3b4358 !important; color: #dbe2f1 !important;
}
html[data-theme="light"] body .tool-panel.tool-panel .dth-ghost,
html[data-theme="light"] body .tool-panel.tool-panel .case-copy {
  background: #eceae2 !important; border: 1px solid #d8d5c9 !important; color: #23232a !important;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body .tool-panel.tool-panel .dth-ghost,
  html:not([data-theme="light"]) body .tool-panel.tool-panel .case-copy {
    background: #252b3d !important; border: 1px solid #3b4358 !important; color: #dbe2f1 !important;
  }
}