/* ═══════════════════════════════════════════════════════════════════════════
   ECU-MOD PRO — LIGHT DESIGN SYSTEM  (light.css)
   ───────────────────────────────────────────────────────────────────────────
   Authoritative implementation of docs/DESIGN-SYSTEM-LIGHT.md.

   Loaded LAST on every page so it wins the cascade against:
     · css/theme.css                (neon dark theme, hundreds of !important)
     · per-page <style> blocks      (14 pages ship their own dark :root)
     · inline style="" attributes   (hardcoded hex throughout)

   THREE TOKEN VOCABULARIES exist in this codebase; all three are remapped here:
     1. theme.css   : --space-*, --neon-*, --glass-*, --text-*, --border-*
     2. legacy      : --bg0..3, --t1..3, --b0..2, --border2, --hsep, --haddr
     3. semantic    : --bg, --surface, --accent, --success, …  (authoritative)

   Custom-property declarations are marked !important on purpose: several pages
   redeclare `:root { --bg0:#070b14 }` in their own <style>. !important wins
   over a later normal declaration of equal specificity, so the light values
   hold everywhere without editing those pages.

   Reversible: remove the <link> to restore the original dark theme.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────── 1. TOKENS ──────────────────────────────── */
:root {
  /* ---- surfaces ------------------------------------------------------- */
  --bg:            #ffffff;
  --bg-subtle:     #f8fafc;
  --bg-muted:      #f1f5f9;
  --surface:       #ffffff;
  --surface-2:     #f8fafc;
  --surface-3:     #f1f5f9;
  --overlay:       rgba(15, 23, 42, 0.45);

  /* ---- text ----------------------------------------------------------- */
  --text-1: #0f172a;   /* headings          — 17.9:1 on white */
  --text-2: #334155;   /* body              — 10.4:1 */
  /* Was #64748b, which measured 4.34:1 on --bg-muted (#f1f5f9) — below the
     4.5:1 AA floor for body text. --text-3 is applied to `.text-slate-500`
     and to captions that sit on muted surfaces, so it has to clear the
     darkest of the three surface tints. #5b6b7e = 4.98:1 on #f1f5f9,
     5.21:1 on #f8fafc, 5.46:1 on #fff. */
  --text-3: #5b6b7e;   /* meta / captions — 4.98:1 on muted, 5.46:1 on white */
  --text-4: #94a3b8;   /* disabled only      —  3.1:1 */

  /* ---- borders -------------------------------------------------------- */
  --border:        #e2e8f0;
  --border-strong: #cbd5e1;
  --border-subtle: #f1f5f9;
  --border-dim:    #e2e8f0;
  --border-glow:   #e2e8f0;

  /* ---- accent (one colour, semantic use only) ------------------------- */
  --accent:        #2563eb;
  --accent-hover:  #1d4ed8;
  --accent-active: #1e40af;
  --accent-soft:   #eff6ff;
  --accent-border: #bfdbfe;
  --accent-text:   #1d4ed8;

  /* ---- status --------------------------------------------------------- */
  --success:      #047857;
  --success-soft: #ecfdf5;
  --success-line: #a7f3d0;
  --warning:      #b45309;
  --warning-soft: #fffbeb;
  --warning-line: #fde68a;
  --danger:       #b91c1c;
  --danger-soft:  #fef2f2;
  --danger-line:  #fecaca;
  --info:         #0369a1;
  --info-soft:    #f0f9ff;
  --info-line:    #bae6fd;

  /* ---- theme.css neon tokens ------------------------------------------ */
  /* Referenced 84× as a text colour — point them at AA-safe equivalents. */
  --neon-blue:   #1d4ed8;
  --neon-cyan:   #0369a1;
  --neon-accent: #1d4ed8;
  --neon-pink:   #be185d;
  --neon-green:  #047857;
  --neon-amber:  #b45309;
  --neon-red:    #b91c1c;

  /* ---- theme.css "space" tokens --------------------------------------- */
  /* Used BOTH as backgrounds (theme.css override block) and as a text colour
     (theme.css:2377). They must be light surfaces, not near-black. */
  --space-0: #ffffff;
  --space-1: #f8fafc;
  --space-2: #f1f5f9;
  --space-3: #e2e8f0;

  /* ---- theme.css glass tokens -> flat light surfaces ------------------ */
  /* ---- surface tokens introduced to end the theme/light conflict -------
     theme.css no longer writes dark rgbas directly into rules; it routes every
     panel fill / inner row / hairline through these six tokens. Retargeting
     them here is what made its ~66 !important chasers unnecessary. */
  --panel-bg:        #ffffff;
  --panel-bg-soft:   #ffffff;
  --panel-bg-solid:  #ffffff;
  --inner-surface:   #f8fafc;
  --inner-surface-2: #f1f5f9;
  --inner-line:      #e2e8f0;
  --glass-bg:     #ffffff;
  --glass-border: #e2e8f0;
  --glass-hover:  #f8fafc;

  /* ---- glow tokens -> no glow ----------------------------------------- */
  --glow-blue:   none;
  --glow-blue: none;
  --glow-cyan:   none;
  --glow-green:  none;
  --glow-pink:   none;

  /* ---- radius --------------------------------------------------------- */
  --r-sm: 6px;
  --r:    8px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* ---- elevation (never glow) ----------------------------------------- */
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-lg:   0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-pop:  0 12px 32px rgba(15, 23, 42, 0.12);

  /* ---- motion --------------------------------------------------------- */
  --ease:   160ms cubic-bezier(0.4, 0, 0.2, 1);
  --snap:   120ms cubic-bezier(0.4, 0, 0.2, 1);
  --bounce: 160ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- typography ----------------------------------------------------- */
  /* Inter carries Latin; Cairo carries Arabic. Orbitron is dropped entirely. */
  --font-sans: 'Inter', 'Cairo', ui-sans-serif, system-ui, -apple-system,
               'Segoe UI', Roboto, 'Noto Sans Arabic', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo,
               Consolas, 'Liberation Mono', monospace;

  /* ---- legacy vocabulary #1 (forum / dashboard / editor pages) -------- */
  --bg0: #f8fafc !important;
  --bg1: #ffffff !important;
  --bg2: #f8fafc !important;
  --bg3: #f1f5f9 !important;

  --t1: #0f172a !important;
  --t2: #334155 !important;
  --t3: #64748b !important;

  /* ---- legacy vocabulary #2 (b0..b2 / border2 / hsep / haddr) --------- */
  --b0: #e2e8f0 !important;
  --b1: #cbd5e1 !important;
  --b2: #94a3b8 !important;
  --border2: #cbd5e1 !important;
  --hsep: #e2e8f0 !important;
  --haddr: #64748b !important;
  --hrow: #ffffff !important;
  --hrow2: #f8fafc !important;
  --hnav: #f8fafc !important;

  /* ---- legacy vocabulary #3 (text aliases) --------------------------- */
  --text:   #334155 !important;
  --text2:  #334155 !important;
  --text3:  #64748b !important;
  --line:   #e2e8f0 !important;
  --glow:   transparent !important;

  /* ---- legacy palette (page-local brand tokens) ---------------------- */
  --blue:   #2563eb !important;
  --cyan:   #0369a1 !important;
  --accent-alt: #1d4ed8 !important;
  --green:  #047857 !important;
  --amber:  #b45309 !important;
  --red:    #b91c1c !important;
  --pink:   #be185d !important;
}

/* ────────────────────── 2. GLOBAL BASE / CANVAS ─────────────────────────── */
html {
  background: var(--bg) !important;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg) !important;
  color: var(--text-2) !important;
  font-family: var(--font-sans) !important;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Kill the animated neon orbs, drifting dot-grid and vignette layers. */
body::before,
body::after,
html::before,
html::after {
  content: none !important;
  background: none !important;
  background-image: none !important;
  animation: none !important;
  box-shadow: none !important;
  display: none !important;
}

.orb, .orb-1, .orb-2, .orb-3,
.glow-div, .hero-glow, .grid-bg, .dot-grid, .noise, .vignette,
[class*="orb-"], [class*="glow-effect"] {
  display: none !important;
}

#hero::before,
#hero::after,
section::before.hero-glow,
.hero::before {
  content: none !important;
  background: none !important;
  animation: none !important;
}

/* ────────────────────────── 3. TYPOGRAPHY ──────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-sans) !important;
  color: var(--text-1) !important;
  letter-spacing: -0.015em;
  line-height: 1.25;
  font-weight: 700;
  text-wrap: balance;
  /* theme.css paints neon gradients over headings via background-clip */
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
  filter: none !important;
}

h1 { font-weight: 800; }
h2 { font-weight: 700; }

p, li, dd, dt, blockquote { color: var(--text-2); }

small, .text-sm, .text-xs { color: var(--text-3); }

strong, b { color: var(--text-1); font-weight: 700; }

a {
  color: var(--accent-text);
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
  text-underline-offset: 2px;
}
a:hover { color: var(--accent-hover); }

/* Remove the sci-fi display face from every place it was hardcoded. */
[style*="Orbitron"],
[class*="orbitron"],
.nav-logo-name,
.hero-title,
.hero h1,
.stat-value,
.hero-title span,
.hero h1 span {
  font-family: var(--font-sans) !important;
  letter-spacing: -0.02em !important;
  background: none !important;
  background-image: none !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

/* Monospace surfaces: hex dumps, BIN/VIN, byte offsets. */
code, pre, kbd, samp,
.hex, .hexdump, .mono, .font-mono,
[class*="hex-"], [class*="byte"], [class*="offset"],
textarea[class*="mono"], input[class*="mono"] {
  font-family: var(--font-mono) !important;
  font-variant-ligatures: none;
  font-feature-settings: 'tnum' 1, 'zero' 1;
}

code, kbd, samp {
  background: var(--bg-muted) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  padding: 0.1em 0.35em !important;
  font-size: 0.9em !important;
  color: var(--text-1) !important;
}

pre {
  background: var(--bg-subtle) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  color: var(--text-1) !important;
  padding: 16px !important;
  overflow: auto;
}

::selection {
  background: var(--accent-soft);
  color: var(--text-1);
}

hr, .divider {
  border: 0 !important;
  border-top: 1px solid var(--border) !important;
  background: none !important;
}

/* ══════════════════════════ 4. NAVIGATION ═══════════════════════════════ */
/* theme.css:2793 forces `header, nav, .navbar, [class*="navbar"]` to a dark
   rgba. `nav` alone catches the inner <nav class="nav-links"> that stayed dark
   in the audit, so both are handled here. */
#navbar,
header,
header#navbar,
.navbar,
nav.navbar,
nav,
.nav-links,
[class*="navbar"],
[id*="navbar"],
[class*="nav-links"],
[class*="nav-wrap"],
[class*="nav-inner"] {
  background: rgba(255, 255, 255, 0.92) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}

#navbar::before,
#navbar::after,
header::before,
header::after,
nav::before,
nav::after,
.navbar::before,
.navbar::after {
  content: none !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  opacity: 0 !important;
  display: none !important;
}

#navbar.scrolled {
  background: rgba(255, 255, 255, 0.98) !important;
  border-bottom-color: var(--border-strong) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}

/* Brand */
.nav-logo,
.nav-brand { color: var(--text-1) !important; }

.nav-logo-name,
.nav-brand-name,
.logo-text {
  color: var(--text-1) !important;
  font-family: var(--font-sans) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

.nav-logo-icon,
.logo-mark,
.nav-logo-icon i {
  background: var(--accent) !important;
  background-image: none !important;
  box-shadow: none !important;
  animation: none !important;
  color: #fff !important;
  border-radius: var(--r-sm) !important;
}

/* Nav links */
.nav-link,
.nav-links a,
.nav-links button,
.nav-item,
[class*="nav-link"] {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid transparent !important;
  border-radius: var(--r-sm) !important;
  color: var(--text-2) !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  transition: background-color var(--snap), color var(--snap) !important;
}

.nav-link:hover,
.nav-links a:hover,
.nav-links button:hover,
.nav-item:hover {
  background: var(--bg-muted) !important;
  color: var(--text-1) !important;
  box-shadow: none !important;
  transform: none !important;
  border-color: transparent !important;
}

.nav-link.active,
.nav-links a.active,
.nav-links button.active,
.nav-item.active {
  background: var(--accent-soft) !important;
  color: var(--accent-text) !important;
  border-color: var(--accent-border) !important;
}

.nav-link i,
.nav-links a i,
.nav-links button i {
  color: currentColor !important;
  opacity: 0.85;
}

/* Dropdown / mega-menu panels */
.dd-panel,
.dropdown-menu,
[class*="dropdown"] > div,
[class*="mega-"] {
  background: var(--bg) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  backdrop-filter: none !important;
}

.dd-panel a,
.dropdown-menu a,
[class*="dropdown"] a {
  color: var(--text-2) !important;
  border-radius: var(--r-sm) !important;
}
.dd-panel a:hover,
.dropdown-menu a:hover,
[class*="dropdown"] a:hover {
  background: var(--bg-muted) !important;
  color: var(--text-1) !important;
}

/* Language switcher + hamburger */
.lang-btn,
[class*="lang-"] button,
[class*="lang-switch"],
#langSwitch {
  background: var(--bg-muted) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-2) !important;
  border-radius: var(--r-sm) !important;
}

#ham,
.hamburger,
[class*="hamburger"],
.nav-toggle {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text-1) !important;
  box-shadow: none !important;
}
#ham:hover, .hamburger:hover, .nav-toggle:hover { background: var(--bg-muted) !important; }
#ham span, .hamburger span, .nav-toggle span { background: var(--text-1) !important; }

/* Mobile drawer */
#mob-menu,
.mobile-menu,
[class*="mobile-menu"] {
  background: var(--bg) !important;
  background-image: none !important;
  border-top: 1px solid var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
  backdrop-filter: none !important;
}

/* ROOT CAUSE (measured, 87 pages): the drawer flattens every link to a
   transparent row so the white panel shows through, but it reset only `color`
   and left `-webkit-text-fill-color` intact. Any `<a class="btn-primary">`
   inside #mob-menu therefore kept the CTA rule's white text-fill while losing
   its blue fill → white glyphs on the white drawer, 1:1, on every phone.

   -webkit-text-fill-color is INHERITED and paints glyphs instead of `color`,
   so it must be reset alongside it. `currentColor` ties the two together
   permanently: whatever sets `color` below also sets the glyph ink. */
#mob-menu a,
#mob-menu button,
.mobile-menu a,
.mobile-menu button {
  color: var(--text-2) !important;
  -webkit-text-fill-color: currentColor !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--r-sm) !important;
  box-shadow: none !important;
}
#mob-menu a:hover,
#mob-menu button:hover,
.mobile-menu a:hover,
.mobile-menu button:hover {
  background: var(--bg-muted) !important;
  color: var(--text-1) !important;
  transform: none !important;
}

/* ════════════════════════════ 5. HERO ═══════════════════════════════════ */
#hero,
.hero,
[class*="hero-section"] {
  background: linear-gradient(180deg, var(--bg-subtle) 0%, var(--bg) 100%) !important;
  background-image: linear-gradient(180deg, var(--bg-subtle) 0%, var(--bg) 100%) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 80px 0 72px !important;
}

#hero h1,
.hero h1,
.hero-title {
  color: var(--text-1) !important;
  font-family: var(--font-sans) !important;
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.03em !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

#hero p,
.hero p,
.hero-sub,
.hero-subtitle {
  color: var(--text-3) !important;
  font-size: 1.0625rem !important;
  line-height: 1.7 !important;
  max-width: 60ch;
  margin-inline: auto;
}

/* Hero eyebrow / pill badges */
.hero-badge,
[class*="hero-badge"],
.eyebrow,
.sec-label,
[class*="badge-pill"] {
  background: var(--accent-soft) !important;
  background-image: none !important;
  border: 1px solid var(--accent-border) !important;
  color: var(--accent-text) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Trust chips under the hero (70+ ECU, 1000+ clients, …) */
.trust-chip,
[class*="trust-"],
.stat-chip,
.promo-box,
.remote-badge,
[class*="remote-badge"] {
  background: var(--bg) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  color: var(--text-2) !important;
  border-radius: 999px !important;
  box-shadow: var(--shadow-card) !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  text-shadow: none !important;
}
.trust-chip i,
.stat-chip i,
.promo-box i,
.remote-badge i { color: var(--accent) !important; }

/* ═══════════════════ 6. LAYOUT / SECTIONS / CARDS ═══════════════════════ */
section, .section { background: transparent !important; }

.section-alt,
.section-muted,
[class*="section-alt"],
[class*="bg-section"] {
  background: var(--bg-subtle) !important;
  background-image: none !important;
  border-block: 1px solid var(--border) !important;
}

/* Restore Tailwind's meaning — theme.css:1235-1248 force-darkened these. */
.bg-white            { background-color: #ffffff !important; background-image: none !important; }
.bg-gray-50          { background-color: var(--bg-subtle) !important; background-image: none !important; }
.bg-gray-100         { background-color: var(--bg-muted) !important; background-image: none !important; }
.bg-gray-200         { background-color: #e2e8f0 !important; background-image: none !important; }
.bg-gray-300         { background-color: #cbd5e1 !important; background-image: none !important; }
.bg-gray-700,
.bg-gray-800,
.bg-gray-900,
.bg-slate-800,
.bg-slate-900        { background-color: var(--bg-subtle) !important; background-image: none !important; }
.bg-blue-50          { background-color: var(--accent-soft) !important; }
.bg-green-50         { background-color: var(--success-soft) !important; }
.bg-red-50           { background-color: var(--danger-soft) !important; }
.bg-yellow-50,
.bg-amber-50         { background-color: var(--warning-soft) !important; }

/* Any leftover gradient utility becomes a SOLID FILL, not transparent.
 *
 * Tailwind's `bg-gradient-to-*` only sets `background-image`. Stripping the
 * image without supplying a background-color leaves the element fully
 * transparent — and because these elements carry `text-white` (badges, icon
 * tiles, CTA cards, table header rows) the result was white-on-white at 1:1.
 *
 * SPECIFICITY NOTE: theme.css:1268 targets
 *   `div[class*="rounded"][class*="shadow"]`            -> (0,2,1)
 * so a bare `[class*="bg-gradient-"]` (0,1,0) loses no matter how late it
 * loads. The doubled attribute selector + :not() chain below reaches (0,2,2)
 * so the light rule actually wins. Full-width bands and table rows are
 * re-declared as light surfaces further down.
 *
 * `body` / `html` are excluded HERE (not just in section 25) because the
 * :not() chain pushes this rule to (0,6,0) — far above the (0,1,1) of
 * `body[class*="bg-gradient-"]`. Excluding the document root from the blanket
 * rule is the only way the canvas rule can win. */
[class*="bg-gradient-"][class]:not(body):not(html):not(section):not(header):not(tr):not(thead):not(tbody):not(table) {
  background-image: none !important;
  background-color: var(--bg-subtle) !important;
  box-shadow: none !important;
  color: var(--text-1) !important;
  -webkit-text-fill-color: var(--text-1) !important;
}

/* Interactive controls keep white text on the accent fill.
 *
 * SPECIFICITY: the ancestor is wrapped in :where() so this rule contributes
 * NOTHING but the :is() type. Before this change it inherited the (0,9,0)
 * weight of its parent selector, so it forced white text onto every nested
 * element of any gradient container — including stat cards and frosted chips
 * that sit INSIDE a gradient band but have their own light surface. Those
 * components could never win. Now any real component rule outranks it, and
 * the explicit accent-fill rules below re-assert white where the fill is
 * genuinely dark. */
:where([class*="bg-gradient-"][class]:not(body):not(html):not(section):not(header):not(tr):not(thead):not(tbody):not(table)) :is(h1,h2,h3,h4,h5,h6,p,span,li,div,i,strong,small,label) {
  color: var(--text-1) !important;
  -webkit-text-fill-color: var(--text-1) !important;
}

/* ── Gradient containers split into exactly two roles ─────────────────────
 *
 * This replaces an earlier rule that carried a five-way :not() chain on
 * `div[…].text-white.rounded`. That chain reached (0,6,1) and forced white
 * text onto EVERY descendant — including stat cards, helper text and labels
 * that sit inside the container but own a light surface. Because CSS compares
 * the CLASS count before the TYPE count, (0,6,1) also beat the (0,2,10)
 * stat-card rule no matter how many :not() type-selectors were stacked on.
 * That single rule was the source of every regression in this file. It is gone.
 *
 * ROLE 1 — CONTROL (an <a> or <button>): a genuine accent fill. Descendants
 * use `color: inherit` so they follow the fill instead of being hard-forced,
 * and a nested chip keeps its own colour.
 *
 * ROLE 2 — SURFACE (div / section / badge / panel): a light surface. Explicit
 * `.text-white` descendants are re-pointed at dark text.
 */

/* ROLE 1 — filled controls */
a[class*="bg-gradient-to-"][class],
button[class*="bg-gradient-to-"][class] {
  background-color: var(--accent) !important;
  background-image: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
a[class*="bg-gradient-to-"][class] *,
button[class*="bg-gradient-to-"][class] * {
  color: inherit !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ROLE 2a — light gradient BANDS. A full-width band (hero strip, page header)
   has no corner radius and no fixed height, so it is always a light surface:
   any `.text-white` label inside it is a dark-theme leftover.
   `:not([class*="rounded"])` keeps this away from filled CTA panels. */
div[class*="bg-gradient-to-"][class]:not(a):not(button):not([class*="rounded"]) :is(.text-white, [class*="text-white"]),
div[class*="bg-gradient-to-"][class]:not(a):not(button):not([class*="rounded"]) :is(.text-blue-50, .text-blue-100, .text-blue-200,
  .text-gray-100, .text-gray-200, .text-slate-100, .text-slate-200) {
  color: var(--text-1) !important;
  -webkit-text-fill-color: var(--text-1) !important;
}

/* ROLE 2b — filled accent PANELS (rounded, matching the CTA rule) keep a white
   label. This must come AFTER 2a so a rounded panel is never darkened, and its
   class count (4) stays below the stat-card rules (7) so nested light cards
   still win. */
div[class*="bg-gradient-to-"][class][class*="rounded"]:not(a):not(button):not(.stat-card)
  :is(.text-white, [class*="text-white"], .text-blue-50, .text-blue-100, .text-blue-200,
      .text-gray-100, .text-gray-200, .text-slate-100, .text-slate-200) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Small gradient PILLS (badges such as <div class="inline-block bg-gradient-…
   text-white rounded-full">) read as a tinted chip in a light UI, never as a
   saturated block. */
div[class*="bg-gradient-to-"][class][class*="inline-block"],
div[class*="bg-gradient-to-"][class][class*="rounded-full"]:not([class*="py-12"]):not([class*="px-4 py-"]) {
  background-color: var(--accent-soft) !important;
  background-image: none !important;
  color: var(--accent-text) !important;
  -webkit-text-fill-color: var(--accent-text) !important;
  border: 1px solid var(--accent-border) !important;
}
div[class*="bg-gradient-to-"][class][class*="inline-block"] *,
div[class*="bg-gradient-to-"][class][class*="rounded-full"]:not([class*="py-12"]) * {
  color: var(--accent-text) !important;
  -webkit-text-fill-color: var(--accent-text) !important;
}

/* Gradient TABLE ROWS (highlight / "popular" pricing row) — a full-width
   accent bar inside a table reads as a heavy stripe, so they become a soft
   accent row with normal dark text. */
tr[class*="bg-gradient-"],
thead[class*="bg-gradient-"] {
  background-color: var(--accent-soft) !important;
  background-image: none !important;
  color: var(--text-1) !important;
}

tr[class*="bg-gradient-"] :is(td, th, span, div, strong),
thead[class*="bg-gradient-"] :is(td, th, span, div, strong) {
  color: var(--text-1) !important;
  -webkit-text-fill-color: var(--text-1) !important;
}

/* Pastel gradients (from-blue-50, from-gray-100, …) were *light* already, so
   they must become a light surface — never a solid accent block. */
[class*="from-blue-50"][class], [class*="from-gray-50"][class], [class*="from-gray-100"][class],
[class*="from-green-50"][class], [class*="from-emerald-50"][class], [class*="from-teal-50"][class],
[class*="from-red-50"][class], [class*="from-orange-50"][class], [class*="from-amber-50"][class],
[class*="from-yellow-50"][class], [class*="from-cyan-50"][class], [class*="from-sky-50"][class],
[class*="from-pink-50"][class], [class*="from-rose-50"][class], [class*="from-slate-50"][class] {
  background-color: var(--bg-subtle) !important;
  background-image: none !important;
  color: var(--text-2) !important;
}

/* …and their contents read as normal body copy, not white-on-light. */
[class*="from-blue-50"] :is(h1,h2,h3,h4,p,span,li,div),
[class*="from-gray-50"] :is(h1,h2,h3,h4,p,span,li,div),
[class*="from-green-50"] :is(h1,h2,h3,h4,p,span,li,div),
[class*="from-orange-50"] :is(h1,h2,h3,h4,p,span,li,div),
[class*="from-red-50"] :is(h1,h2,h3,h4,p,span,li,div),
[class*="from-amber-50"] :is(h1,h2,h3,h4,p,span,li,div),
[class*="from-yellow-50"] :is(h1,h2,h3,h4,p,span,li,div) {
  color: var(--text-2) !important;
  -webkit-text-fill-color: var(--text-2) !important;
}
[class*="from-blue-50"] :is(h1,h2,h3,h4),
[class*="from-gray-50"] :is(h1,h2,h3,h4),
[class*="from-green-50"] :is(h1,h2,h3,h4),
[class*="from-orange-50"] :is(h1,h2,h3,h4) {
  color: var(--text-1) !important;
  -webkit-text-fill-color: var(--text-1) !important;
}

/* Cards — theme.css:1268-1296 makes every rounded/shadow element glassy. */
.card,
[class*="card"]:not([class*="card-icon"]):not([class*="cart"]),
.stat-card,
.panel,
.tile,
.box,
[class*="glass"] {
  background: var(--bg) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-card) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl,
[class*="rounded-"][class*="shadow"] {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.card:hover,
[class*="card"]:not([class*="card-icon"]):hover {
  border-color: var(--border-strong) !important;
  box-shadow: var(--shadow-lg) !important;
  transform: none !important;
}

/* ═════════════════════════════ 7. FORMS ═════════════════════════════════ */
/* theme.css:1297 forces every input to rgba(15,20,36,.6) — near-black. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="color"]),
textarea,
select,
.form-control,
.form-input,
.form-select,
.form-textarea,
[class*="input-"],
[class*="form-input"] {
  background: var(--bg) !important;
  background-image: none !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-sm) !important;
  color: var(--text-1) !important;
  font-family: var(--font-sans) !important;
  font-size: 0.9375rem !important;
  padding: 10px 12px;
  box-shadow: none !important;
  transition: border-color var(--snap), box-shadow var(--snap) !important;
}

input::placeholder,
textarea::placeholder { color: var(--text-4) !important; opacity: 1; }

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-input:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}

input:disabled,
textarea:disabled,
select:disabled {
  background: var(--bg-muted) !important;
  color: var(--text-3) !important;
  cursor: not-allowed;
}

/* Native select arrow, otherwise invisible on white */
select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8.5 1.5 4h9z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-inline-end: 34px !important;
}

option { background: var(--bg) !important; color: var(--text-1) !important; }

/* Checkbox / radio keep the accent */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

label, .form-label, legend {
  color: var(--text-1) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
}

fieldset { border-color: var(--border) !important; }
::file-selector-button {
  background: var(--bg-muted) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-1) !important;
  border-radius: var(--r-sm) !important;
  font-weight: 600 !important;
}

/* Range slider */
input[type="range"] { accent-color: var(--accent) !important; }

/* ═════════════════════════════ 8. TABLES ════════════════════════════════ */
/* theme.css:1325 gives thead/th a tinted background with !important. */
table {
  background: var(--bg) !important;
  border-color: var(--border) !important;
  color: var(--text-2) !important;
}

thead, th {
  background: var(--bg-muted) !important;
  background-image: none !important;
  color: var(--text-1) !important;
  font-weight: 700 !important;
  font-size: 0.8125rem !important;
  text-transform: none;
  letter-spacing: 0.01em;
  border-bottom: 1px solid var(--border-strong) !important;
  border-color: var(--border-strong) !important;
}

td {
  border-color: var(--border) !important;
  color: var(--text-2) !important;
}

tbody tr { background: var(--bg) !important; }
tbody tr:nth-child(even) { background: var(--bg-subtle) !important; }
tbody tr:hover { background: var(--accent-soft) !important; }

tfoot, tfoot td { background: var(--bg-muted) !important; color: var(--text-1) !important; }

caption { color: var(--text-3) !important; }

/* ════════════════════════════ 9. BUTTONS ════════════════════════════════ */
/* theme.css:3109-3300 gives every button a neon border + lift glow. */
button:not([class*="nav"]):not([class*="ham"]):not([class*="close"]):not([class*="modal"]):not([class*="toggle"]):not([class*="icon"]):not([class*="card"]),
.btn,
[class*="btn-"]:not([class*="btn-group"]) {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  border-radius: var(--r-sm) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background-color var(--snap), border-color var(--snap), color var(--snap) !important;
}

/* Neutral (default) button */
button:not([class*="nav"]):not([class*="ham"]):not([class*="close"]):not([class*="modal"]):not([class*="toggle"]):not([class*="icon"]):not([class*="card"]):not([class*="bg-"]):not([class*="primary"]):not([class*="success"]):not([class*="danger"]):not([class*="filter"]):not([class*="chip"]):not([class*="tab"]):not([class*="page"]):not([class*="btn-"]):not([class*="text-white"]),
.btn-secondary,
.btn-outline {
  background: var(--bg) !important;
  background-image: none !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-1) !important;
}

button:not([class*="nav"]):not([class*="ham"]):not([class*="close"]):not([class*="modal"]):not([class*="toggle"]):not([class*="icon"]):not([class*="card"]):not([class*="bg-"]):not([class*="primary"]):not([class*="success"]):not([class*="danger"]):not([class*="filter"]):not([class*="chip"]):not([class*="tab"]):not([class*="page"]):not([class*="btn-"]):not([class*="text-white"]):hover,
.btn-secondary:hover,
.btn-outline:hover {
  background: var(--bg-muted) !important;
  border-color: var(--text-4) !important;
  color: var(--text-1) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* PRIMARY — this was rendering as white-on-white (1:1) in the audit because
   theme.css painted a gradient background-clip but light.css reset the layer. */
.btn-primary,
button.btn-primary,
a.btn-primary,
[class*="btn-primary"],
button[class*="primary"],
a[class*="primary"],
input[type="submit"],
button[type="submit"],
.btn-gradient,
a[class*="from-blue-"],
a[class*="from-green-"], a[class*="from-emerald-"],
button[class*="from-blue-"],
button[class*="from-green-"], button[class*="from-emerald-"],
/* :not(footer) matters. Several pages write <footer class="gradient-bg
   text-white">. That made the footer match this CTA rule and inherit
   -webkit-text-fill-color:#ffffff, while the FOOTER block below repaints the
   footer light — leaving near-white glyphs on #f8fafc (measured 1.05:1 on
   /static/login). A footer is a page region, never a button, so it must not
   pick up button ink here. */
[class*="gradient-bg"]:not(footer):not([class*="footer"]):not([role="contentinfo"]),
[class*="btn-gradient"] {
  background: var(--accent) !important;
  background-image: none !important;
  border: 1px solid var(--accent) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.24) !important;
  text-shadow: none !important;
}

.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover,
[class*="btn-primary"]:hover,
button[class*="primary"]:hover,
a[class*="primary"]:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.btn-gradient:hover,
a[class*="from-blue-"]:hover, a[class*="from-green-"]:hover,
button[class*="from-blue-"]:hover, button[class*="from-green-"]:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3) !important;
  transform: none !important;
}

.btn-primary:focus-visible,
button.btn-primary:focus-visible,
a.btn-primary:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px var(--accent-soft) !important;
}

/* Secondary brand colours */
button.bg-green-600, a.bg-green-600,
.btn-success, [class*="btn-success"],
button[class~="bg-green-6"], a[class~="bg-green-6"],
button[class~="bg-emerald-6"], a[class~="bg-emerald-6"] {
  background: var(--success) !important;
  background-image: none !important;
  border: 1px solid var(--success) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
button.bg-green-600:hover, a.bg-green-600:hover,
.btn-success:hover, [class*="btn-success"]:hover {
  background: #065f46 !important;
  border-color: #065f46 !important;
  transform: none !important;
}

button.bg-red-600, a.bg-red-600,
.btn-danger, [class*="btn-danger"],
button[class~="bg-red-6"], a[class~="bg-red-6"] {
  background: var(--danger) !important;
  background-image: none !important;
  border: 1px solid var(--danger) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
button.bg-red-600:hover, a.bg-red-600:hover,
.btn-danger:hover, [class*="btn-danger"]:hover {
  background: #991b1b !important;
  border-color: #991b1b !important;
  transform: none !important;
}

/* Blue Tailwind utility buttons */
a.bg-blue-600, button.bg-blue-600,
a.bg-blue-700, button.bg-blue-700 {
  background: var(--accent) !important;
  background-image: none !important;
  border: 1px solid var(--accent) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
a.bg-blue-600:hover, button.bg-blue-600:hover,
a.bg-blue-700:hover, button.bg-blue-700:hover {
  background: var(--accent-hover) !important;
  transform: none !important;
}

/* Filter chips / tabs / pagination — all neon in theme.css. */
.filter-btn,
.category-btn,
.tab-btn,
.chip,
[class*="filter-btn"],
[class*="category-btn"],
.page-btn,
.pagination button,
.pagination a {
  background: var(--bg) !important;
  background-image: none !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-2) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  transform: none !important;
}

.filter-btn:hover,
.category-btn:hover,
.tab-btn:hover,
.chip:hover,
.page-btn:hover,
.pagination button:hover,
.pagination a:hover {
  background: var(--bg-muted) !important;
  color: var(--text-1) !important;
  transform: none !important;
}

.filter-btn.active,
.category-btn.active,
.tab-btn.active,
.chip.active,
.page-btn.active,
.pagination .active,
[class*="filter-btn"][class*="active"],
[class*="category-btn"][class*="active"] {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: none !important;
}

/* ═══════════════════════════ 10. BADGES ═════════════════════════════════ */
/* Status needs to stay scannable — soft fill + darker text, never neon glass. */
.badge,
[class*="badge"],
.status-badge,
[class*="status-"],
.pill,
.tag {
  border-radius: 999px !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  padding: 0.2em 0.7em !important;
  box-shadow: none !important;
  text-shadow: none !important;
  border: 1px solid transparent !important;
  background-image: none !important;
}

.badge-pending,
.status-badge.pending,
[class*="badge"][class*="pending"],
[class*="badge-amber"],
[class*="badge-yellow"] {
  background: var(--warning-soft) !important;
  border-color: var(--warning-line) !important;
  color: var(--warning) !important;
}

.badge-active,
.badge-confirmed,
.badge-approved,
.badge-completed,
.status-badge.active,
.status-badge.approved,
.status-badge.completed,
[class*="badge"][class*="active"],
[class*="badge"][class*="success"],
[class*="badge-green"] {
  background: var(--success-soft) !important;
  border-color: var(--success-line) !important;
  color: var(--success) !important;
}

.badge-rejected,
.badge-cancelled,
.badge-failed,
.status-badge.rejected,
.status-badge.cancelled,
[class*="badge"][class*="reject"],
[class*="badge"][class*="danger"],
[class*="badge-red"] {
  background: var(--danger-soft) !important;
  border-color: var(--danger-line) !important;
  color: var(--danger) !important;
}

.badge-assigned,
.badge-info,
.status-badge.assigned,
[class*="badge"][class*="assigned"],
[class*="badge"][class*="info"],
[class*="badge-blue"] {
  background: var(--info-soft) !important;
  border-color: var(--info-line) !important;
  color: var(--info) !important;
}

/* Mutation-targeted utility text colours: Tailwind's *-400 shades fail AA on
   white (audit found 300/400/500 shades at 1.7–2.6:1). Remap to 600/700. */
.text-amber-300, .text-amber-400, .text-yellow-300, .text-yellow-400 { color: var(--warning) !important; }
.text-emerald-300, .text-emerald-400, .text-green-300, .text-green-400 { color: var(--success) !important; }
.text-cyan-300, .text-cyan-400, .text-sky-300, .text-sky-400 { color: var(--info) !important; }
.text-red-300, .text-red-400, .text-rose-400 { color: var(--danger) !important; }
.text-blue-300, .text-blue-400 { color: var(--accent-text) !important; }
.text-pink-300, .text-pink-400 { color: var(--neon-pink) !important; }

.text-gray-300, .text-gray-400, .text-gray-500,
.text-slate-300, .text-slate-400, .text-slate-500,
[class*="text-white/"], [class*="text-black/"] { color: var(--text-3) !important; }
.text-gray-600, .text-gray-700, .text-slate-600, .text-slate-700 { color: var(--text-2) !important; }
.text-gray-800, .text-gray-900, .text-slate-800, .text-slate-900 { color: var(--text-1) !important; }

/* ═══════════════════════════ 11. MODALS ═════════════════════════════════ */
/* theme.css:1409 rgba(6,8,13,.7) scrim + :1421 rgba(10,14,24,.95) panel. */
#serviceModal,
.modal,
[class*="modal-overlay"],
[class*="modal-backdrop"],
[id*="Modal"],
[class*="overlay"]:not([class*="no-"]) {
  background: var(--overlay) !important;
  background-image: none !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

.modal-box,
.modal-content,
.modal-panel,
[class*="modal-box"],
[class*="modal-content"],
[class*="modal-panel"],
#serviceModal > div {
  background: var(--bg) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-pop) !important;
  color: var(--text-2) !important;
}

.modal-header,
[class*="modal-header"] {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-1) !important;
}

.modal-footer,
[class*="modal-footer"] {
  background: transparent !important;
  border-top: 1px solid var(--border) !important;
}

.modal-title,
[class*="modal-title"] {
  color: var(--text-1) !important;
  font-weight: 700 !important;
}

[class*="close"] {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--text-3) !important;
  box-shadow: none !important;
  transform: none !important;
}
[class*="close"]:hover {
  background: var(--bg-muted) !important;
  color: var(--text-1) !important;
  transform: none !important;
}

/* ═══════════════════════════ 12. FOOTER ═════════════════════════════════ */
/* theme.css:1463 + :2802 force var(--space-0) and a neon hairline ::before. */
footer,
footer.bg-gray-900,
footer.bg-gray-800,
footer.bg-slate-900,
footer.gradient-bg,
[class*="footer"] {
  background: var(--bg-subtle) !important;
  background-image: none !important;
  border-top: 1px solid var(--border) !important;
  color: var(--text-3) !important;
  box-shadow: none !important;
}

footer::before,
footer::after,
[class*="footer"]::before,
[class*="footer"]::after {
  content: none !important;
  background: none !important;
  background-image: none !important;
  display: none !important;
}

footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
[class*="footer"] h1, [class*="footer"] h2, [class*="footer"] h3, [class*="footer"] h4 {
  color: var(--text-1) !important;
}

footer a,
[class*="footer"] a {
  color: var(--text-2) !important;
  text-decoration: none !important;
}
footer a:hover,
[class*="footer"] a:hover { color: var(--accent-text) !important; }

footer p, footer span, footer li, footer div,
[class*="footer"] p, [class*="footer"] li {
  color: var(--text-3) !important;
}

/* Footer social icons */
footer [class*="social"] a,
[class*="social"] a {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-2) !important;
  box-shadow: none !important;
}
footer [class*="social"] a:hover,
[class*="social"] a:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  transform: none !important;
}

/* ═════════════════ 13. INLINE-HEX NEUTRALISATION ════════════════════════ */
/* ~55 pages hardcode dark hex inside style="" attributes. Attribute selectors
   let us neutralise them without touching 132 files. These are deliberately
   matched on the *substring* so `background:#0a0f1e`, `background: #0a0f1e`
   and `background-color:#0a0f1e` are all covered. */

[style*="background:#0a0f1e"], [style*="background: #0a0f1e"],
[style*="background:#0c1220"], [style*="background: #0c1220"],
[style*="background:#0f1624"], [style*="background: #0f1624"],
[style*="background:#0f172a"], [style*="background: #0f172a"],
[style*="background:#111827"], [style*="background: #111827"],
[style*="background:#1a2438"], [style*="background: #1a2438"],
[style*="background:#1c2333"], [style*="background: #1c2333"],
[style*="background:#1e293b"], [style*="background: #1e293b"],
[style*="background:#1e1b4b"], [style*="background: #1e1b4b"],
[style*="background:#030508"], [style*="background: #030508"],
[style*="background:#070b14"], [style*="background: #070b14"],
[style*="background:#0b1120"], [style*="background: #0b1120"],
[style*="background:#161b22"], [style*="background: #161b22"],
[style*="background-color:#0a0f1e"], [style*="background-color:#0c1220"],
[style*="background-color:#0f172a"], [style*="background-color:#111827"],
[style*="background-color:#030508"] {
  background: var(--bg) !important;
  background-image: none !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}

/* Dark gradient heroes on tool pages (immo-decoder, map-visualizer, vin-writer) */
[style*="#00150a"], [style*="#002b15"], [style*="#0f1a10"],
[style*="#0f0a2e"], [style*="#1a0f3d"], [style*="#1a1a2e"],
[style*="#001a18"], [style*="#003330"], [style*="#0a1a1a"] {
  background: linear-gradient(180deg, var(--bg-subtle) 0%, var(--bg) 100%) !important;
  background-image: linear-gradient(180deg, var(--bg-subtle) 0%, var(--bg) 100%) !important;
  border-color: var(--border) !important;
}

/* Translucent white borders used on dark glass -> light borders */
[style*="rgba(255,255,255,0.08)"],
[style*="rgba(255,255,255,0.1)"],
[style*="rgba(255,255,255,.08)"],
[style*="rgba(255,255,255,.1)"],
[style*="rgba(255,255,255,0.15)"],
[style*="rgba(255,255,255,.15)"],
[style*="rgba(255,255,255,0.2)"],
[style*="rgba(255,255,255,.2)"] {
  border-color: var(--border) !important;
  box-shadow: none !important;
}

/* Near-white inline TEXT on dark panels must not vanish on white.
   Scoped to elements that do NOT carry their own coloured background. */
[style*=";color:#f1f5f9"], [style^="color:#f1f5f9"]:not([style*="background:"]):not([style*="background-color:"]),
[style*=";color: #f1f5f9"], [style^="color: #f1f5f9"]:not([style*="background:"]):not([style*="background-color:"]),
[style*=";color:#e2e8f0"], [style^="color:#e2e8f0"]:not([style*="background:"]):not([style*="background-color:"]),
[style*=";color: #e2e8f0"], [style^="color: #e2e8f0"]:not([style*="background:"]):not([style*="background-color:"]),
[style*=";color:#c9d1d9"], [style^="color:#c9d1d9"]:not([style*="background:"]):not([style*="background-color:"]),
[style*=";color: #c9d1d9"], [style^="color: #c9d1d9"]:not([style*="background:"]):not([style*="background-color:"]),
[style*=";color:#f0f6fc"], [style^="color:#f0f6fc"]:not([style*="background:"]):not([style*="background-color:"]) {
  color: var(--text-1) !important;
  -webkit-text-fill-color: var(--text-1) !important;
}

/* Muted grey inline text (#94a3b8 / #8b949e / #6e7681) -> AA-safe slate. */
[style*=";color:#94a3b8"], [style^="color:#94a3b8"], [style*=";color: #94a3b8"], [style^="color: #94a3b8"],
[style*=";color:#8b949e"], [style^="color:#8b949e"], [style*=";color: #8b949e"], [style^="color: #8b949e"],
[style*=";color:#6e7681"], [style^="color:#6e7681"], [style*=";color: #6e7681"], [style^="color: #6e7681"] {
  color: var(--text-3) !important;
  -webkit-text-fill-color: var(--text-3) !important;
}

/* Inline neon/bright text colours -> AA-safe semantic equivalents. */
[style*=";color:#f59e0b"], [style^="color:#f59e0b"], [style*=";color: #f59e0b"], [style^="color: #f59e0b"],
[style*=";color:#fbbf24"], [style^="color:#fbbf24"], [style*=";color: #fbbf24"], [style^="color: #fbbf24"] { color: var(--warning) !important; -webkit-text-fill-color: var(--warning) !important; }

[style*=";color:#10b981"], [style^="color:#10b981"], [style*=";color: #10b981"], [style^="color: #10b981"],
[style*=";color:#22c55e"], [style^="color:#22c55e"], [style*=";color: #22c55e"], [style^="color: #22c55e"],
[style*=";color:#34d399"], [style^="color:#34d399"], [style*=";color: #34d399"], [style^="color: #34d399"],
[style*=";color:#22d66e"], [style^="color:#22d66e"], [style*=";color: #22d66e"], [style^="color: #22d66e"],
[style*=";color:#86efac"], [style^="color:#86efac"], [style*=";color: #86efac"], [style^="color: #86efac"] { color: var(--success) !important; -webkit-text-fill-color: var(--success) !important; }

[style*=";color:#06b6d4"], [style^="color:#06b6d4"], [style*=";color: #06b6d4"], [style^="color: #06b6d4"],
[style*=";color:#22d3ee"], [style^="color:#22d3ee"], [style*=";color: #22d3ee"], [style^="color: #22d3ee"],
[style*=";color:#0ea5e9"], [style^="color:#0ea5e9"], [style*=";color: #0ea5e9"], [style^="color: #0ea5e9"] { color: var(--info) !important; -webkit-text-fill-color: var(--info) !important; }

[style*=";color:#ef4444"], [style^="color:#ef4444"], [style*=";color: #ef4444"], [style^="color: #ef4444"],
[style*=";color:#f87171"], [style^="color:#f87171"], [style*=";color: #f87171"], [style^="color: #f87171"],
[style*=";color:#fca5a5"], [style^="color:#fca5a5"], [style*=";color: #fca5a5"], [style^="color: #fca5a5"],
[style*=";color:#ff4d6a"], [style^="color:#ff4d6a"], [style*=";color: #ff4d6a"], [style^="color: #ff4d6a"] { color: var(--danger) !important; -webkit-text-fill-color: var(--danger) !important; }

[style*=";color:#3b82f6"], [style^="color:#3b82f6"], [style*=";color: #3b82f6"], [style^="color: #3b82f6"],
[style*=";color:#3b9eff"], [style^="color:#3b9eff"], [style*=";color: #3b9eff"], [style^="color: #3b9eff"],
[style*=";color:#60a5fa"], [style^="color:#60a5fa"], [style*=";color: #60a5fa"], [style^="color: #60a5fa"] { color: var(--accent-text) !important; -webkit-text-fill-color: var(--accent-text) !important; }

[style*=";color:#2563eb"], [style^="color:#2563eb"], [style*=";color: #2563eb"], [style^="color: #2563eb"],
[style*=";color:#3b82f6"], [style^="color:#3b82f6"], [style*=";color: #3b82f6"], [style^="color: #3b82f6"],
[style*=";color:#60a5fa"], [style^="color:#60a5fa"], [style*=";color: #60a5fa"], [style^="color: #60a5fa"],
[style*=";color:#2563eb"], [style^="color:#2563eb"], [style*=";color: #2563eb"], [style^="color: #2563eb"] { color: var(--neon-accent) !important; -webkit-text-fill-color: var(--neon-accent) !important; }

[style*=";color:#ec4899"], [style^="color:#ec4899"], [style*=";color: #ec4899"], [style^="color: #ec4899"] { color: var(--neon-pink) !important; -webkit-text-fill-color: var(--neon-pink) !important; }

/* Gradient inline backgrounds -> flat accent or surface (headings stay legible). */
[style*="background:linear-gradient(135deg,#2563eb"], [style*="background:linear-gradient(135deg, #2563eb"],
[style*="background:linear-gradient(135deg,#1d4ed8"], [style*="background:linear-gradient(135deg, #1d4ed8"],
[style*="background:linear-gradient(135deg,#2563eb"], [style*="background:linear-gradient(135deg, #2563eb"] {
  background: var(--accent) !important;
  background-image: none !important;
}

/* ═══════════════════════ 14. FLOATING WIDGETS ═══════════════════════════ */
#wa-float,
[class*="wa-float"],
[class*="whatsapp-float"] {
  background: #25d366 !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4) !important;
  animation: none !important;
}
#wa-float:hover { background: #1da851 !important; transform: none !important; }

/* Push-notification / install prompt panel */
[data-push-toggle],
.push-panel,
[class*="push-panel"],
[class*="notif-panel"],
[class*="install-banner"] {
  background: var(--bg) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-pop) !important;
  color: var(--text-2) !important;
  backdrop-filter: none !important;
}

/* Toasts */
[class*="toast"],
#toast,
#_n,
#_notif,
#notification {
  background: var(--text-1) !important;
  background-image: none !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: var(--shadow-pop) !important;
  font-weight: 600 !important;
}

/* ═════════════════════════ 15. SCROLLBAR ════════════════════════════════ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-muted); }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 6px;
  border: 2px solid var(--bg-muted);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-4); }
* { scrollbar-color: var(--border-strong) var(--bg-muted); scrollbar-width: thin; }

/* ═════════════════════ 16. FOCUS / A11Y FLOOR ═══════════════════════════ */
:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}

[disabled], [aria-disabled="true"] {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

[aria-hidden="true"] { pointer-events: none; }

/* Skip link */
.skip-link, .skip-to-content {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: var(--r-sm) !important;
  padding: 8px 16px !important;
  font-weight: 600 !important;
}

/* ══════════════════ 17. KILL ALL AMBIENT ANIMATION ══════════════════════ */
.nav-logo-icon,
#wa-float,
.orb, .orb-1, .orb-2, .orb-3,
body::before, body::after,
[class*="pulse"], [class*="float"], [class*="glow"], [class*="shimmer"] {
  animation: none !important;
}

[class*="hover-lift"]:hover,
[class*="card"]:hover {
  transform: none !important;
}

/* ═════════════════════ 18. REDUCED MOTION ═══════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═════════════════════ 19. RTL / ARABIC ═════════════════════════════════ */
[dir="rtl"] body { letter-spacing: 0; }

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
  letter-spacing: 0;
}

/* Arabic needs Cairo — Inter has no Arabic coverage. */
[dir="rtl"] body,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] p, [dir="rtl"] a, [dir="rtl"] button,
[dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select,
[dir="rtl"] span, [dir="rtl"] li, [dir="rtl"] td, [dir="rtl"] th {
  font-family: 'Cairo', 'Inter', ui-sans-serif, system-ui, 'Noto Sans Arabic', sans-serif !important;
}

/* Mirror the native select arrow */
[dir="rtl"] select {
  background-position: left 12px center !important;
  padding-inline-end: 12px !important;
  padding-inline-start: 34px !important;
}

/* Monospace stays LTR even inside RTL text (hex, VIN, BIN). */
[dir="rtl"] code, [dir="rtl"] pre, [dir="rtl"] .hex,
[dir="rtl"] [class*="hex-"], [dir*="rtl"] .mono {
  direction: ltr;
  unicode-bidi: embed;
  text-align: left;
}

/* ═════════════════════ 20. RESPONSIVE ═══════════════════════════════════ */
@media (max-width: 1024px) {
  #hero { padding: 64px 0 56px !important; }
}

@media (max-width: 640px) {
  body { font-size: 15px; }
  #hero { padding: 44px 0 40px !important; }
  #hero h1, .hero h1, .hero-title { font-size: clamp(1.75rem, 8vw, 2.25rem) !important; }
  .section { padding-block: 40px !important; }
  .wrap, .container { padding-inline: 16px !important; }
  table { font-size: 0.8125rem; }
}

/* ═════════════════════ 21. PRINT ════════════════════════════════════════ */
@media print {
  body { background: #fff !important; color: #000 !important; }
  #navbar, footer, #wa-float, [data-push-toggle], [class*="no-print"] { display: none !important; }
  a { color: #000 !important; text-decoration: underline; }
}

/* ═══════════ 22. theme.css COMPONENT CLASSES (tool surfaces) ═════════════ */
/* These live hardcoded in theme.css and are not caught by token remapping. */

/* Popular / new service badges — #f87171 on white was 2.77:1 */
.svc-badge-pop,
.svc-badge-new {
  background: var(--warning-soft) !important;
  border: 1px solid var(--warning-line) !important;
  color: var(--warning) !important;
  border-radius: var(--r-sm) !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}
.svc-badge-new {
  background: var(--success-soft) !important;
  border-color: var(--success-line) !important;
  color: var(--success) !important;
}

/* Order button: neon border + gradient fill */
.btn-order {
  background: var(--bg) !important;
  background-image: none !important;
  border: 1px solid var(--accent) !important;
  color: var(--accent-text) !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  border-radius: var(--r-sm) !important;
  box-shadow: none !important;
  transform: none !important;
}
.btn-order:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.28) !important;
  transform: none !important;
}

/* Price / rating / meta text that theme.css:1140 paints #fbbf24 */
.price,
.price-value,
[class*="price"],
.rating,
.rating-value,
.stars,
[class*="rating"] {
  color: var(--text-1) !important;
}
.stars i, .stars .fa-star, .rating i, [class*="rating"] i {
  color: #d97706 !important;
}

/* Section headings that theme.css paints with a gradient background-clip */
.sec-title,
.section-title,
.sec-heading,
[class*="sec-title"],
[class*="section-title"] {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--text-1) !important;
  text-shadow: none !important;
}

/* Hero stat counters */
.stat-number,
.stat-value,
.stat-count,
[class*="stat-number"],
[class*="stat-value"] {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--text-1) !important;
  text-shadow: none !important;
  font-family: var(--font-sans) !important;
  font-variant-numeric: tabular-nums;
}

/* Feature / step icons */
.feature-icon,
.step-icon,
.svc-icon,
[class*="feature-icon"],
[class*="step-icon"] {
  background: var(--accent-soft) !important;
  background-image: none !important;
  border: 1px solid var(--accent-border) !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}
.feature-icon i,
.step-icon i,
.svc-icon i { color: var(--accent) !important; }

/* Numbered step circles */
.step-number,
.step-num,
[class*="step-number"] {
  background: var(--accent) !important;
  background-image: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: none !important;
}

/* Service / product cards on the home + services grids */
.svc-card,
.service-card,
.product-card,
[class*="svc-card"],
[class*="service-card"],
[class*="product-card"] {
  background: var(--bg) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-card) !important;
  backdrop-filter: none !important;
  transform: none !important;
}
.svc-card:hover,
.service-card:hover,
.product-card:hover,
[class*="svc-card"]:hover,
[class*="service-card"]:hover,
[class*="product-card"]:hover {
  border-color: var(--accent-border) !important;
  box-shadow: var(--shadow-lg) !important;
  transform: none !important;
}

/* Testimonials / quote blocks */
.testimonial,
[class*="testimonial"],
.quote,
[class*="quote-card"] {
  background: var(--bg) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-card) !important;
  color: var(--text-2) !important;
}

/* Accordion / FAQ */
.accordion-item,
.faq-item,
[class*="accordion"],
[class*="faq-item"] {
  background: var(--bg) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  box-shadow: none !important;
}
.accordion-header,
.faq-question,
[class*="accordion-header"] {
  background: transparent !important;
  color: var(--text-1) !important;
  font-weight: 600 !important;
}
.accordion-body,
.faq-answer,
[class*="accordion-body"] {
  background: transparent !important;
  color: var(--text-2) !important;
  border-top: 1px solid var(--border) !important;
}

/* Alerts / callouts */
.alert,
[class*="alert-"] {
  background: var(--bg-subtle) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  border-inline-start: 3px solid var(--accent) !important;
  color: var(--text-2) !important;
  border-radius: var(--r) !important;
  box-shadow: none !important;
}
.alert-success, [class*="alert-success"] {
  background: var(--success-soft) !important;
  border-inline-start-color: var(--success) !important;
  color: var(--success) !important;
}
.alert-warning, [class*="alert-warning"] {
  background: var(--warning-soft) !important;
  border-inline-start-color: var(--warning) !important;
  color: var(--warning) !important;
}
.alert-danger, .alert-error, [class*="alert-danger"], [class*="alert-error"] {
  background: var(--danger-soft) !important;
  border-inline-start-color: var(--danger) !important;
  color: var(--danger) !important;
}
.alert-info, [class*="alert-info"] {
  background: var(--info-soft) !important;
  border-inline-start-color: var(--info) !important;
  color: var(--info) !important;
}

/* Progress bars */
.progress, [class*="progress-bar"] {
  background: var(--bg-muted) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
.progress-bar, .progress-fill, [class*="progress-fill"] {
  background: var(--accent) !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Sidebar / dashboard nav */
.sidebar,
.dash-sidebar,
[class*="sidebar"] {
  background: var(--bg) !important;
  background-image: none !important;
  border-inline-end: 1px solid var(--border) !important;
  box-shadow: none !important;
}
.sidebar a,
.sidebar button,
.dash-sidebar a,
.dash-sidebar button,
[class*="sidebar"] a,
[class*="sidebar"] button {
  background: transparent !important;
  color: var(--text-2) !important;
  border: 1px solid transparent !important;
  border-radius: var(--r-sm) !important;
  box-shadow: none !important;
  transform: none !important;
}
.sidebar a:hover,
.sidebar button:hover,
[class*="sidebar"] a:hover,
[class*="sidebar"] button:hover {
  background: var(--bg-muted) !important;
  color: var(--text-1) !important;
  transform: none !important;
}
.sidebar a.active,
.sidebar button.active,
[class*="sidebar"] a.active,
[class*="sidebar"] .active {
  background: var(--accent-soft) !important;
  color: var(--accent-text) !important;
  border-color: var(--accent-border) !important;
}

/* Dashboard KPI tiles */
.kpi-card,
.metric-card,
[class*="kpi"],
[class*="metric-card"] {
  background: var(--bg) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-card) !important;
}
.kpi-value,
.metric-value,
[class*="kpi-value"] {
  color: var(--text-1) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  font-variant-numeric: tabular-nums;
  font-weight: 700 !important;
}
.kpi-label,
.metric-label,
[class*="kpi-label"] { color: var(--text-3) !important; }

/* Divider glow lines */
[class*="divider"],
[class*="separator"]:not(hr) {
  background: var(--border) !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Any element still carrying a neon box-shadow -> flat */
[class*="glow"] { box-shadow: none !important; }

/* ═══════════ 23. GRADIENT BANDS / HEROES → LIGHT SECTIONS ════════════════ */
/* Many pages use `bg-gradient-to-* … text-white` for hero and CTA strips.
   Flattening only the background left white text on a white page (the audit
   measured 1.05:1). These bands now become light sections, and every
   light-on-dark utility inside them is retargeted here, in one place. */

section[class*="bg-gradient-to-"],
header[class*="bg-gradient-to-"],
.hero-gradient {
  background-image: none !important;
  background-color: var(--bg-subtle) !important;
  border-block: 1px solid var(--border) !important;
  color: var(--text-2) !important;
}

/* `.hero-gradient` is referenced by pricing / home-optimized but never
   defined anywhere — those heroes currently render with NO background. */
.hero-gradient {
  background: linear-gradient(180deg, var(--bg-subtle) 0%, var(--bg) 100%) !important;
  border-top: 0 !important;
}

/* Headings + body copy inside those bands */
section[class*="bg-gradient-to-"] :is(h1, h2, h3, h4),
header[class*="bg-gradient-to-"] :is(h1, h2, h3, h4),
.hero-gradient :is(h1, h2, h3, h4) {
  color: var(--text-1) !important;
  -webkit-text-fill-color: var(--text-1) !important;
  background: none !important;
  background-image: none !important;
  text-shadow: none !important;
}

section[class*="bg-gradient-to-"] :is(p, li, dd, dt, small),
header[class*="bg-gradient-to-"] :is(p, li, dd),
.hero-gradient :is(p, li, dd, small) {
  color: var(--text-2) !important;
  -webkit-text-fill-color: var(--text-2) !important;
}

/* White / pale utility text inside a light band → dark scale */
section[class*="bg-gradient-to-"] :is(.text-white, .text-blue-50, .text-blue-100, .text-blue-200, .text-gray-100, .text-gray-200, .text-slate-100, .text-slate-200),
header[class*="bg-gradient-to-"] :is(.text-white, .text-blue-100, .text-blue-200, .text-gray-100, .text-gray-200),
.hero-gradient :is(.text-white, .text-blue-100, .text-blue-200, .text-blue-50) {
  color: var(--text-2) !important;
  -webkit-text-fill-color: var(--text-2) !important;
}

/* Emphasised words inside a hero heading.
   These were mapped to --warning (#b45309), which is the SEMANTIC warning
   token — using it for a decorative heading accent both contradicts the
   blue-only brand palette and misuses the token. A highlighted word in a
   hero is brand emphasis, so it takes the accent. Genuine status text
   (.badge-amber, alert rows) keeps --warning — those rules are separate. */
section[class*="bg-gradient-to-"] :is(.text-yellow-300, .text-yellow-400, .text-amber-300, .text-amber-400),
.hero-gradient :is(.text-yellow-300, .text-yellow-400, .text-amber-300) {
  color: var(--accent-text) !important;
  -webkit-text-fill-color: var(--accent-text) !important;
}

section[class*="bg-gradient-to-"] :is(.text-green-200, .text-green-300, .text-emerald-200, .text-emerald-300, .text-teal-200, .text-teal-300),
.hero-gradient :is(.text-green-200, .text-green-300) {
  color: var(--success) !important;
  -webkit-text-fill-color: var(--success) !important;
}

/* Frosted chips (bg-white/20, bg-white/10) on a dark band become soft accent
   chips on the light band. */
section[class*="bg-gradient-to-"] [class*="bg-white/"],
section[class*="bg-gradient-to-"] [class*="bg-black/"],
header[class*="bg-gradient-to-"] [class*="bg-white/"],
.hero-gradient [class*="bg-white/"] {
  background: var(--accent-soft) !important;
  background-image: none !important;
  border: 1px solid var(--accent-border) !important;
  color: var(--accent-text) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

section[class*="bg-gradient-to-"] [class*="bg-white/"] :is(span, i, div, strong),
.hero-gradient [class*="bg-white/"] :is(span, i, div, strong) {
  color: var(--accent-text) !important;
  -webkit-text-fill-color: var(--accent-text) !important;
}

/* An element that keeps its OWN gradient fill (step circles, icon tiles) must
   keep white text so it stays legible against the fill. */
section[class*="bg-gradient-to-"] [class*="bg-gradient-to-"],
.hero-gradient [class*="bg-gradient-to-"] {
  color: #ffffff !important;
}

section[class*="bg-gradient-to-"] [class*="bg-gradient-to-"] :is(span, div, i, strong),
.hero-gradient [class*="bg-gradient-to-"] :is(span, div, i, strong) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Gradient CTA cards are <div>s, not <section>s — keep them as a strong accent
   panel with white text (a single accent block reads as deliberate, not dark). */
div[class*="bg-gradient-to-"].text-white[class*="rounded"]:not([class*="w-1"]):not([class*="h-1"]):not([class*="fixed"]) {
  background: var(--accent) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: var(--shadow-lg) !important;
}

/* NOTE: there is deliberately NO descendant rule here. An earlier version
   forced #fff onto every child of a gradient CTA panel via
   `:is(h1,h2,h3,h4,p,span,li,div,i,strong)`. Because the parent selector
   already carried four :not() classes, that descendant rule evaluated to
   (0,6,1) and outranked every component rule inside the panel — stat cards,
   helper text and frosted chips all became white-on-white and could not be
   repaired from anywhere else in the stylesheet. Children now simply inherit
   the panel's white, and any element that sets its own background keeps its
   own colours. Do not re-add a blanket descendant colour rule here. */

/* Any remaining `text-white` that would sit on a light surface */
.text-white.text-white-on-light {
  color: var(--text-1) !important;
  -webkit-text-fill-color: var(--text-1) !important;
}

/* ═════════ 24. TAILWIND 500/600 TEXT SHADES → AA ON LIGHT ════════════════ */
/* Tailwind's 500/600 steps were tuned for a dark canvas. On #fff several miss
   AA (e.g. orange-600 #ea580c = 3.56:1, amber-600 = 3.2:1, lime-600 = 3.4:1).
   Remap the offenders to their 700 equivalent, which clears 4.5:1. */
.text-orange-500, .text-orange-600  { color: #c2410c !important; }
.text-amber-500,  .text-amber-600   { color: var(--warning) !important; }
.text-yellow-500, .text-yellow-600  { color: var(--warning) !important; }
.text-lime-500,   .text-lime-600    { color: #4d7c0f !important; }
.text-green-500,  .text-green-600   { color: var(--success) !important; }
.text-emerald-500,.text-emerald-600 { color: var(--success) !important; }
.text-teal-500,   .text-teal-600    { color: #0f766e !important; }
.text-cyan-500,   .text-cyan-600    { color: var(--info) !important; }
.text-sky-500,    .text-sky-600     { color: var(--info) !important; }
.text-blue-500,   .text-blue-600    { color: var(--accent-text) !important; }
.text-blue-500, .text-blue-600  { color: #4338ca !important; }
.text-blue-500, .text-blue-600  { color: #1d4ed8 !important; }
.text-blue-500, .text-blue-600  { color: #1d4ed8 !important; }
.text-fuchsia-500,.text-fuchsia-600 { color: #a21caf !important; }
.text-pink-500,   .text-pink-600    { color: var(--neon-pink) !important; }
.text-rose-500,   .text-rose-600    { color: var(--danger) !important; }
.text-red-500,    .text-red-600     { color: var(--danger) !important; }

/* Inline style="" equivalents of the same shades. */
[style*=";color:#ea580c"], [style^="color:#ea580c"], [style*=";color: #ea580c"], [style^="color: #ea580c"] { color: #c2410c !important; -webkit-text-fill-color: #c2410c !important; }
[style*=";color:#d97706"], [style^="color:#d97706"], [style*=";color: #d97706"], [style^="color: #d97706"] { color: var(--warning) !important; -webkit-text-fill-color: var(--warning) !important; }
[style*=";color:#ca8a04"], [style^="color:#ca8a04"], [style*=";color: #ca8a04"], [style^="color: #ca8a04"] { color: var(--warning) !important; -webkit-text-fill-color: var(--warning) !important; }
[style*=";color:#65a30d"], [style^="color:#65a30d"], [style*=";color: #65a30d"], [style^="color: #65a30d"] { color: #4d7c0f !important; -webkit-text-fill-color: #4d7c0f !important; }
[style*=";color:#0d9488"], [style^="color:#0d9488"], [style*=";color: #0d9488"], [style^="color: #0d9488"] { color: #0f766e !important; -webkit-text-fill-color: #0f766e !important; }
[style*=";color:#0284c7"], [style^="color:#0284c7"], [style*=";color: #0284c7"], [style^="color: #0284c7"] { color: var(--info) !important; -webkit-text-fill-color: var(--info) !important; }
[style*=";color:#1d4ed8"], [style^="color:#1d4ed8"], [style*=";color: #1d4ed8"], [style^="color: #1d4ed8"] { color: #4338ca !important; -webkit-text-fill-color: #4338ca !important; }
[style*=";color:#1d4ed8"], [style^="color:#1d4ed8"], [style*=";color: #1d4ed8"], [style^="color: #1d4ed8"] { color: #1d4ed8 !important; -webkit-text-fill-color: #1d4ed8 !important; }
[style*=";color:#c026d3"], [style^="color:#c026d3"], [style*=";color: #c026d3"], [style^="color: #c026d3"] { color: #a21caf !important; -webkit-text-fill-color: #a21caf !important; }
[style*=";color:#db2777"], [style^="color:#db2777"], [style*=";color: #db2777"], [style^="color: #db2777"] { color: var(--neon-pink) !important; -webkit-text-fill-color: var(--neon-pink) !important; }
[style*=";color:#e11d48"], [style^="color:#e11d48"], [style*=";color: #e11d48"], [style^="color: #e11d48"] { color: var(--danger) !important; -webkit-text-fill-color: var(--danger) !important; }

/* ════════ 25. CRITICAL: <body class="bg-gradient-*"> MUST STAY LIGHT ══════ */
/* Seven pages put a gradient on <body> itself, e.g.
     <body class="bg-gradient-to-br from-gray-50 to-gray-100">
   A blanket `[class*="bg-gradient-"]` rule then painted the WHOLE PAGE accent
   blue (ecu-list measured bodyBg=rgb(37,99,235) with 595 contrast failures).
   The document canvas is always a light surface. */
body[class*="bg-gradient-"],
html[class*="bg-gradient-"] {
  background-color: var(--bg) !important;
  background-image: none !important;
  color: var(--text-2) !important;
}

/* ═══════ 26. PAGE-LOCAL TOKENS (--accent2/--accent3/--step-*) ════════════ */
/* Tool pages define their own palette in a <style> block. These are the ones
   whose values fail AA when used as text on white. */
:root {
  --accent2: #1d4ed8 !important;   /* was #3b82f6 → 3.68:1 */
  --accent3: #b45309 !important;   /* was #f59e0b → 1.9:1  */
  --step-active: #1d4ed8 !important;
  --step-done:   #047857 !important;
  --step-pending: #cbd5e1 !important;
  --b0: #e2e8f0 !important;
  --b1: #cbd5e1 !important;
  --b2: #94a3b8 !important;
  --hsep: #e2e8f0 !important;
  --haddr: #64748b !important;
}

/* ═══════ 27. UNDEFINED HERO CLASSES (.hero-bg etc.) ══════════════════════ */
/* `.hero-bg` / `.hero-gradient` are referenced by pages but never defined, so
   those heroes render with no background at all while carrying `text-white`. */
.hero-bg,
.hero-banner,
.page-hero,
[class*="hero-bg"],
[class*="hero-banner"] {
  background: linear-gradient(180deg, var(--bg-subtle) 0%, var(--bg) 100%) !important;
  background-image: linear-gradient(180deg, var(--bg-subtle) 0%, var(--bg) 100%) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-2) !important;
}

.hero-bg :is(h1,h2,h3,h4),
.hero-banner :is(h1,h2,h3,h4),
.page-hero :is(h1,h2,h3,h4),
[class*="hero-bg"] :is(h1,h2,h3,h4) {
  color: var(--text-1) !important;
  -webkit-text-fill-color: var(--text-1) !important;
}

.hero-bg :is(p,li,span,div,small),
.hero-banner :is(p,li,span,div,small),
.page-hero :is(p,li,span,div,small),
[class*="hero-bg"] :is(p,li,span,div,small) {
  color: var(--text-2) !important;
  -webkit-text-fill-color: var(--text-2) !important;
}

/* Frosted chips inside a hero (bg-white/20, bg-white/10) */
.hero-bg [class*="bg-white/"],
.hero-banner [class*="bg-white/"],
.page-hero [class*="bg-white/"],
[class*="hero-bg"] [class*="bg-white/"],
[class*="bg-white/"] {
  background: var(--accent-soft) !important;
  background-image: none !important;
  border: 1px solid var(--accent-border) !important;
  color: var(--accent-text) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[class*="bg-white/"] :is(span,i,div,strong,small) {
  color: var(--accent-text) !important;
  -webkit-text-fill-color: var(--accent-text) !important;
}

/* ═══════ 28. PAGE-LOCAL COMPONENT CLASSES THAT STAYED DARK ══════════════ */

/* forum-improved stat cards: theme painted white text on a now-white card */
.stat-card,
[class*="stat-card"] {
  background: var(--bg) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  color: var(--text-2) !important;
  box-shadow: var(--shadow-card) !important;
  backdrop-filter: none !important;
}
.stat-card :is(div,span,p,strong,h1,h2,h3,h4),
[class*="stat-card"] :is(div,span,p,strong) {
  color: var(--text-1) !important;
  -webkit-text-fill-color: var(--text-1) !important;
}
.stat-card .text-blue-100,
.stat-card [class*="text-blue-100"] { color: var(--text-3) !important; }

/* verified-programmers custom buttons + perks */
.btn-register-hero,
.btn-join-banner,
[class*="btn-register-hero"],
[class*="btn-join-banner"] {
  background: var(--success) !important;
  background-image: none !important;
  border: 1px solid var(--success) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
}
.btn-register-hero:hover,
.btn-join-banner:hover {
  background: #065f46 !important;
  border-color: #065f46 !important;
  transform: none !important;
  box-shadow: none !important;
}
/* Was white on rgba(255,255,255,.22) over the green button = 3.61:1.
   An inverted pill (white surface, dark green ink) measures 5.48:1 and still
   reads as a "free" badge. */
.btn-register-hero .badge-free,
.badge-free {
  background: #ffffff !important;
  color: #065f46 !important;
  -webkit-text-fill-color: #065f46 !important;
}

.perk,
[class*="perk"] {
  color: var(--success) !important;
  -webkit-text-fill-color: var(--success) !important;
}
.perk i, [class*="perk"] i { color: var(--success) !important; }

/* vin-writer / tool badges on light surfaces */
.badge-blue {
  background: #f5f3ff !important;
  border: 1px solid #bfdbfe !important;
  color: #1d4ed8 !important;
  -webkit-text-fill-color: #1d4ed8 !important;
}
.badge-teal {
  background: #f0fdfa !important;
  border: 1px solid #99f6e4 !important;
  color: #0f766e !important;
  -webkit-text-fill-color: #0f766e !important;
}
.badge-blue {
  background: var(--accent-soft) !important;
  border: 1px solid var(--accent-border) !important;
  color: var(--accent-text) !important;
}
.badge-amber, .badge-yellow {
  background: var(--warning-soft) !important;
  border: 1px solid var(--warning-line) !important;
  color: var(--warning) !important;
}
.badge-green, .badge-emerald {
  background: var(--success-soft) !important;
  border: 1px solid var(--success-line) !important;
  color: var(--success) !important;
}
.badge-red, .badge-rose {
  background: var(--danger-soft) !important;
  border: 1px solid var(--danger-line) !important;
  color: var(--danger) !important;
}

/* Warning callout boxes (speed-limiter, egr-dpf-remove, vin-writer) */
.warn-box,
[class*="warn-box"],
[class*="warning-box"] {
  background: var(--warning-soft) !important;
  background-image: none !important;
  border: 1px solid var(--warning-line) !important;
  border-inline-start: 3px solid var(--warning) !important;
  color: var(--warning) !important;
  box-shadow: none !important;
}
.warn-box :is(div,span,p,strong,h1,h2,h3,h4,i),
[class*="warn-box"] :is(div,span,p,strong,i) {
  color: var(--warning) !important;
  -webkit-text-fill-color: var(--warning) !important;
}

/* Highlighted table rows */
.hl-row,
[class*="hl-row"] {
  background: var(--accent-soft) !important;
  background-image: none !important;
}
.hl-row :is(td,th,span,div), [class*="hl-row"] :is(td,th,span) {
  color: var(--text-1) !important;
}

/* Payment retry / generic gradient buttons defined per page */
.btn-retry,
[class*="btn-retry"] {
  background: var(--accent) !important;
  background-image: none !important;
  border: 1px solid var(--accent) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.btn-retry:hover, [class*="btn-retry"]:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}

/* Step labels in the registration wizard */
.step-label,
[class*="step-label"] {
  color: var(--text-3) !important;
}
.step.active .step-label { color: var(--accent-text) !important; }
.step.done .step-label { color: var(--success) !important; }

/* Monospace parameter paths need full contrast on white */
.param-path,
[class*="param-path"] {
  color: var(--text-3) !important;
  opacity: 1 !important;
}

/* Pale body text left over from dark hero copy (now mapped to the blue scale) */
.text-blue-700, .text-blue-800, .text-blue-900 {
  color: #1e40af !important;
}
.text-teal-100, .text-teal-200, .text-teal-300,
.text-emerald-100, .text-emerald-200 { color: var(--success) !important; }
.text-blue-100, .text-blue-200, .text-blue-300 { color: var(--accent-text) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   29. RESIDUAL FIXES — div-based heroes, stat cards, ID panels, PWA apps
   ═══════════════════════════════════════════════════════════════════════
   Several tool pages use a <div> (not <section>) as the hero band:
       <div class="bg-gradient-to-r from-amber-500 to-red-600 text-white py-12">
   Section 23 only covered section/header, so those heroes kept a saturated
   band while their frosted chips stayed white-on-white. `body > div[…]`
   catches the page-level hero without touching nested icon tiles/CTA cards. */

body > div[class*="bg-gradient-to-"],
main > div[class*="bg-gradient-to-"]:first-child {
  background: linear-gradient(180deg, var(--bg-subtle) 0%, var(--bg) 100%) !important;
  background-image: linear-gradient(180deg, var(--bg-subtle) 0%, var(--bg) 100%) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-2) !important;
}

body > div[class*="bg-gradient-to-"] :is(h1,h2,h3,h4,h5,h6) {
  color: var(--text-1) !important;
  -webkit-text-fill-color: var(--text-1) !important;
  background: none !important;
}

body > div[class*="bg-gradient-to-"] :is(p,li,small,label,dd,dt) {
  color: var(--text-2) !important;
  -webkit-text-fill-color: var(--text-2) !important;
}

/* Frosted chips / icon tiles inside a div hero → soft accent chips. */
body > div[class*="bg-gradient-to-"] [class*="bg-white/"],
body > div[class*="bg-gradient-to-"] [class*="bg-black/"] {
  background: var(--accent-soft) !important;
  background-image: none !important;
  border: 1px solid var(--accent-border) !important;
  color: var(--accent-text) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body > div[class*="bg-gradient-to-"] [class*="bg-white/"] :is(span,i,div,strong,small),
body > div[class*="bg-gradient-to-"] [class*="bg-white/"] {
  color: var(--accent-text) !important;
  -webkit-text-fill-color: var(--accent-text) !important;
}

/* Inner gradient tiles keep their own fill → keep white glyphs. */
body > div[class*="bg-gradient-to-"] [class*="bg-gradient-to-"] {
  color: #ffffff !important;
}
body > div[class*="bg-gradient-to-"] [class*="bg-gradient-to-"] :is(span,i,div,strong) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Pale hero tints (text-amber-100, text-blue-200 …) inside div heroes. */
body > div[class*="bg-gradient-to-"] :is(.text-white,.text-amber-50,.text-amber-100,.text-amber-200,
  .text-blue-50,.text-blue-100,.text-blue-200,.text-gray-100,.text-gray-200,
  .text-slate-100,.text-slate-200,.text-green-100,.text-green-200,.text-teal-100,
  .text-red-100,.text-red-200,.text-orange-100,.text-blue-100,.text-blue-100) {
  color: var(--text-2) !important;
  -webkit-text-fill-color: var(--text-2) !important;
}

/* ── 29.1 Stat cards (forum) — the long :not() chain outranks the blanket
   gradient rule at (0,6,0). Padding the chain is the only way to win. */
html body div[class*="stat-card"][class]:not(section):not(header):not(tr):not(thead):not(tbody):not(table) {
  background: var(--bg) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  color: var(--text-2) !important;
  box-shadow: var(--shadow-card) !important;
  backdrop-filter: none !important;
}

html body div[class*="stat-card"][class]:not(section):not(header):not(tr):not(thead):not(tbody):not(table)
  :is(h1,h2,h3,h4,h5,h6,p,span,li,div,i,strong,small,label,b) {
  color: var(--text-1) !important;
  -webkit-text-fill-color: var(--text-1) !important;
}

html body div[class*="stat-card"][class]:not(section):not(header):not(tr):not(thead):not(tbody):not(table)
  :is(.text-blue-100,.text-blue-200,.text-white,.text-gray-300,.text-gray-400,.text-slate-300,.text-slate-400) {
  color: var(--text-3) !important;
  -webkit-text-fill-color: var(--text-3) !important;
}

/* ── 29.2 Filled semantic buttons must keep white text (ecu-list language
   toggle is a <span class="bg-green-600"> whose label inherited slate).
 *
 * TRANSPARENT-BACKGROUND BUG — READ BEFORE EDITING
 * `[class~="bg-blue-500"]` is a SUBSTRING match, so it also matches the class
 * token `hover:bg-blue-500`. Every filter pill in the source carries
 * `bg-gray-200 hover:bg-blue-500`, so all of them were painted accent-blue
 * permanently, turning the whole filter wall into one solid blue block.
 * Use `[class~="…"]` — a whole-TOKEN match — for background utilities. */
[class~="bg-green-600"][class],
[class~="bg-emerald-600"][class],
[class~="bg-green-500"][class],
[class~="bg-blue-600"][class],
[class~="bg-cyan-600"][class],
[class~="bg-red-600"][class],
[class*="bg-gradient-to-"][class]:not(body):not(html):not(section):not(header):not(tr):not(thead):not(tbody) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Table rows are NEVER filled: `tr[class*="bg-gradient-"]` above turns them into
   a soft accent row with dark text. This rule must come after the filled-button
   block above, otherwise white text lands on the light accent-soft row (the
   "popular plan" pricing row measured 1.09:1). */
tr[class*="bg-gradient-"],
thead[class*="bg-gradient-"],
tr[class*="bg-gradient-"] :is(td,th,span,div,strong,small,p),
thead[class*="bg-gradient-"] :is(td,th,span,div,strong,small,p) {
  color: var(--text-1) !important;
  -webkit-text-fill-color: var(--text-1) !important;
}
[class~="bg-green-600"][class] :is(span,i,div,strong,small),
[class~="bg-emerald-600"][class] :is(span,i,div,strong,small),
[class~="bg-green-500"][class] :is(span,i,div,strong,small),
[class~="bg-blue-600"][class] :is(span,i,div,strong,small),
[class~="bg-cyan-600"][class] :is(span,i,div,strong,small),
[class~="bg-red-600"][class] :is(span,i,div,strong,small) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Filled anchors (PWA landing tiles) must not inherit the global link colour. */
a[class*="bg-gradient-to-"],
a[class~="bg-green-600"], a[class~="bg-emerald-600"], a[class~="bg-green-500"],
a[class~="bg-blue-600"], a[class~="bg-cyan-600"], a[class~="bg-red-600"] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
a[class*="bg-gradient-to-"] :is(span,i,div,strong,small,p),
a[class~="bg-blue-600"] :is(span,i,div,strong,small,p),
a[class~="bg-cyan-600"] :is(span,i,div,strong,small,p),
a[class~="bg-emerald-600"] :is(span,i,div,strong,small,p) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ── 29.3 Muted helper text sitting on a soft accent panel needs one step
   darker than --text-3 to clear 4.5:1 on #eff6ff. */
:is(.bg-blue-50,.bg-blue-50,.bg-slate-50,.bg-gray-50,[class~="bg-blue-50"],[class~="bg-accent-soft"])
  :is(.text-gray-400,.text-slate-400,.text-gray-500,.text-slate-500) {
  color: var(--text-2) !important;
  -webkit-text-fill-color: var(--text-2) !important;
}

/* ── 29.4 admin/settings routing cards were white-on-white. */
.routing-card,
[class*="routing-card"] {
  background: var(--bg) !important;
  background-image: none !important;
  border-color: var(--border) !important;
  color: var(--text-2) !important;
}
.routing-card :is(h1,h2,h3,h4,p,span,div,strong,small,i),
[class*="routing-card"] :is(h1,h2,h3,h4,p,span,div,strong,small,i) {
  color: var(--text-1) !important;
  -webkit-text-fill-color: var(--text-1) !important;
}

/* ── 29.5 Hex-editor ID panels (en/hex-editor) — --hbg was never defined and
   #nav-bar hard-coded #161b22. A code viewer is legitimately dark, but it must
   be a deliberate slate surface with light text, not a black hole. */
:root {
  --hbg: #ffffff !important;
  --hrow: #ffffff !important;
  --hrow2: #f8fafc !important;
  --hnav: #f8fafc !important;
  --hsep: #e2e8f0 !important;
  --haddr: #64748b !important;
}

#nav-bar {
  background: var(--bg-subtle) !important;
  border-bottom: 1px solid var(--border) !important;
}
#nav-bar :is(a,span,div,i,button) { color: var(--text-2) !important; }
#nav-bar a.nv-logo { color: var(--accent-text) !important; }

#hex-view, #load-screen {
  background: var(--bg) !important;
  color: var(--text-2) !important;
}
#load-screen :is(div,span,p,strong,i) { color: var(--text-2) !important; }
#load-screen .ls-dz { border-color: var(--border-strong) !important; }

/* ── 29.6 Tool-card CTA anchors and pagination buttons.
   `<a class="block text-center bg-gradient-to-r …">` inside a white card kept a
   white background from the card rule while §29.2 forced white text → 1:1.
   `button.bg-blue-500` paginators were turned white by the chip rules. Both are
   filled controls, so they get the accent fill back. */
html body a[class*="bg-gradient-to-"][class] {
  background: var(--accent) !important;
  background-image: none !important;
  border: 0 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html body a[class*="bg-gradient-to-"][class] :is(span,i,strong,small,p,div) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body button[class~="bg-blue-500"][class],
html body button[class~="bg-blue-600"][class],
html body .pagination-btn.bg-blue-500,
html body .pagination-btn.bg-blue-600 {
  background: var(--accent) !important;
  background-image: none !important;
  border-color: var(--accent) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html body button[class~="bg-blue-500"][class] :is(span,i),
html body .pagination-btn.bg-blue-500 :is(span,i) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ── 29.7 Final catch-all: any gradient-filled anchor anywhere in the tree.
   Tool cards wrap the CTA in several rounded/shadowed containers whose own
   rules outrank a `body a[…]` selector, so this rule anchors on the element
   itself with a doubled attribute + :where() on ancestors (0 specificity
   contribution) while still beating single-class background declarations. */
a[class*="bg-gradient-to-"][class],
a[class*="bg-gradient-to-"][class]:hover {
  background-color: var(--accent) !important;
  background-image: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
a[class*="bg-gradient-to-"][class] :where(span,i,strong,small,p,div,b) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   30. SPECIFICITY RESOLUTION — surfaces nested inside gradient panels
   ═══════════════════════════════════════════════════════════════════════
   ROOT CAUSE, measured with a DOM rule-tracer rather than guessed:

     CTA-panel descendant rule (line ~656)
       div[class*="bg-gradient-to-"].text-white[class*="rounded"]
       :not(...)×5  :where(...)
       -> classes 6, types 1  = (0,6,1)

     stat-card descendant rule (section 29.1)
       html body div[class*="stat-card"][class]:not(...)×6 :is(...)
       -> classes 2, types 10 = (0,2,10)

   CSS compares the CLASS count before the TYPE count, so (0,6,1) beats
   (0,2,10) no matter how many :not() type-selectors are stacked on. That is
   why every earlier attempt at "more :not()" failed: it only grew the type
   count. The fix is to reach 7 classes on the surface rules.

   Repeating an attribute selector (`[class][class]…`) is valid CSS and each
   occurrence is counted, which lets these surface rules outrank the panel
   rule while staying readable. The repeated attributes are deliberate —
   please do not "simplify" them; the count is the mechanism. */
html body div[class*="stat-card"][class][class][class][class][class][class]
  :is(div,span,p,strong,h1,h2,h3,h4,h5,h6,i,small,b,label,em,td) {
  color: var(--text-1) !important;
  -webkit-text-fill-color: var(--text-1) !important;
}

html body div[class*="stat-card"][class][class][class][class][class][class]
  :is(.text-blue-100,.text-blue-200,.text-white,.text-gray-200,.text-gray-300,
      .text-gray-400,.text-slate-200,.text-slate-300,.text-slate-400) {
  color: var(--text-3) !important;
  -webkit-text-fill-color: var(--text-3) !important;
}

/* Frosted chips (bg-white/20 …) keep their own soft surface, so their label
   must follow the chip colour — not the panel's white. Same class-count fix. */
html body [class*="bg-white/"][class][class][class][class][class][class],
html body [class*="bg-white/"][class][class][class][class][class][class]
  :is(span,i,div,strong,small,em,b) {
  color: var(--accent-text) !important;
  -webkit-text-fill-color: var(--accent-text) !important;
}

/* Forced-visible heading/body text on any nested light surface. */
html body div[class*="stat-card"][class][class][class][class][class][class] {
  background-color: var(--bg) !important;
  background-image: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   32. .page-band-light — the ONE class the source codemod emits
   ═══════════════════════════════════════════════════════════════════════
   tools/clean-source.cjs rewrites every `bg-gradient-to-*` container in the
   HTML source to this single semantic class (filled <a>/<button> become
   `bg-blue-600` instead). Because the class is emitted by us, no rule here
   needs an attribute-substring selector or a :not() chain — which is what
   caused the specificity war that made this file unmaintainable.

   Nesting contract:
     .page-band-light              light band
       > h1..h6                    --text-1
       > p, li, small              --text-2
       > .text-white & pale tints  --text-2  (dark-theme leftovers)
       > [class*="bg-white/"]      soft accent chip
       > .page-band-light (nested) accent fill + white text (icon tile)   */

.page-band-light {
  background-color: var(--bg-subtle);
  background-image: none;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
}

.page-band-light :is(h1, h2, h3, h4, h5, h6) {
  color: var(--text-1);
  -webkit-text-fill-color: var(--text-1);
}

.page-band-light :is(p, li, small, dd, dt) {
  color: var(--text-2);
  -webkit-text-fill-color: var(--text-2);
}

/* Leftover light-on-dark utilities inside a band. */
.page-band-light :is(.text-white, [class*="text-white"],
  .text-blue-50, .text-blue-100, .text-blue-200,
  .text-gray-100, .text-gray-200, .text-gray-300,
  .text-slate-100, .text-slate-200, .text-slate-300,
  .text-amber-50, .text-amber-100, .text-amber-200,
  .text-green-100, .text-green-200, .text-teal-100,
  .text-red-100, .text-red-200, .text-blue-100, .text-blue-100) {
  color: var(--text-2);
  -webkit-text-fill-color: var(--text-2);
}

/* Frosted chips on a light band become soft accent chips. */
.page-band-light [class*="bg-white/"],
.page-band-light [class*="bg-black/"] {
  background-color: var(--accent-soft);
  background-image: none;
  border: 1px solid var(--accent-border);
  color: var(--accent-text);
  -webkit-text-fill-color: var(--accent-text);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.page-band-light [class*="bg-white/"] :is(span, i, small, strong, b, em) {
  color: var(--accent-text);
  -webkit-text-fill-color: var(--accent-text);
}

/* A nested band is an icon tile / step circle: it keeps a real fill, so its
   glyph must stay white. */
.page-band-light .page-band-light {
  background-color: var(--accent);
  border-bottom: 0;
  color: #ffffff;
}
.page-band-light .page-band-light :is(span, i, strong, b, em) {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════════════
   33. FINAL POLISH — font stack, gradient text, rainbow numbers, filter chips
   ═══════════════════════════════════════════════════════════════════════ */

/* 33.1 FONT — page-local blocks set `body { font-family:'Cairo' }`, which puts
   Cairo FIRST, so every Latin glyph rendered in Cairo (a fine Arabic face, a
   poor Latin one). `html body` out-ranks a bare `body` selector, so the shared
   stack now applies: Inter covers Latin, Cairo picks up Arabic automatically
   because Inter ships no Arabic glyphs. */
html body {
  font-family: var(--font-sans) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
[dir="rtl"] body { font-family: var(--font-sans) !important; }

/* 33.2 GRADIENT TEXT — the last "colourful" element on pricing/about heroes.
   `<span class="bg-gradient-… bg-clip-text text-transparent">` rendered a
   rainbow headline. In a simple professional UI a heading is solid ink. */
[class*="bg-gradient-"][class][class*="bg-clip-text"],
[class*="bg-clip-text"][class] {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: var(--text-1) !important;
  -webkit-text-fill-color: var(--text-1) !important;
}

/* 33.3 RAINBOW STAT NUMBERS — stat rows painted each figure a different hue
   (red / green / blue). A stat row reads as one calm set. */
.stat-value, .stat-number, .stat-num, [class*="stat-value"], [class*="stat-number"] {
  color: var(--text-1) !important;
  -webkit-text-fill-color: var(--text-1) !important;
  background: none !important;
}

/* 33.4 FILTER / CATEGORY CHIPS — every chip rendered as a solid blue pill, so
   the whole filter wall read as one blue block with no selected state.
   Chips are neutral by default; only the active/selected chip is accent. */
.filter-btn, .category-btn, .category-chip, [class*="filter-btn"], [class*="category-chip"] {
  background: var(--bg) !important;
  background-image: none !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-2) !important;
  -webkit-text-fill-color: var(--text-2) !important;
  box-shadow: none !important;
}
.filter-btn:hover, .category-btn:hover, .category-chip:hover {
  border-color: var(--accent) !important;
  color: var(--accent-text) !important;
  -webkit-text-fill-color: var(--accent-text) !important;
}
.filter-btn.active, .category-btn.active, .category-chip.active,
.filter-btn[aria-pressed="true"], .category-chip[aria-pressed="true"] {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* 33.5 Company/generation pill rows on ecu-list are anchors with a solid fill
   from theme.css — neutralise them to match the chips above. */
a[class*="px-"][class*="rounded"]:not([class*="btn"]):not([class~="bg-blue-600"]):not([class*="bg-green"]):not([class*="bg-red"]) {
  background-image: none !important;
}

/* 33.6 Headings inherit the page-local `h1,h2,…{font-family:'Cairo'}` blocks,
   so Latin headings still rendered in Cairo. Route every heading through the
   shared stack: Inter for Latin, Cairo for Arabic (Inter has no Arabic glyphs,
   so the browser falls through to Cairo per-character). */
html body :is(h1, h2, h3, h4, h5, h6, button, input, select, textarea, .btn-primary, .nav-link) {
  font-family: var(--font-sans) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   34. FILLED CONTROLS — restore fills erased by theme.css
   ═══════════════════════════════════════════════════════════════════════
   ROOT CAUSE (found with a DOM rule-tracer, not by guessing):

     theme.css:1272
       .rounded-2xl, .rounded-xl, .rounded-lg, .card, …
       { background: var(--glass-bg) !important; }

   That rule matches ANY element carrying a rounding utility — including
   <a class="… bg-blue-600 … rounded-xl">. Because light.css remaps
   --glass-bg to #ffffff, every filled CTA lost its fill and kept its white
   label: measured 1:1 white-on-white on /static/tools and /static/pricing.

   These rules re-assert the fill for known saturated background tokens.
   `[class~="…"]` is a whole-TOKEN match, so `hover:bg-blue-500` does NOT
   match (a substring match here painted every filter pill solid blue).
   The doubled `[class]` raises specificity to (0,3,0), above the (0,1,0)
   theme.css rule while both carry !important. */

:is(a,button,span,div)[class~="bg-blue-600"][class][class]   { background-color:#2563eb !important; background-image:none !important; color:#fff !important; -webkit-text-fill-color:#fff !important; }
:is(a,button,span,div)[class~="bg-blue-700"][class][class]   { background-color:#1d4ed8 !important; background-image:none !important; color:#fff !important; -webkit-text-fill-color:#fff !important; }
:is(a,button,span,div)[class~="bg-blue-500"][class][class]   { background-color:#2563eb !important; background-image:none !important; color:#fff !important; -webkit-text-fill-color:#fff !important; }
:is(a,button,span,div)[class~="bg-blue-600"][class][class] { background-color:#4338ca !important; background-image:none !important; color:#fff !important; -webkit-text-fill-color:#fff !important; }
:is(a,button,span,div)[class~="bg-green-500"][class][class]  { background-color:#047857 !important; background-image:none !important; color:#fff !important; -webkit-text-fill-color:#fff !important; }
:is(a,button,span,div)[class~="bg-green-600"][class][class]  { background-color:#047857 !important; background-image:none !important; color:#fff !important; -webkit-text-fill-color:#fff !important; }
:is(a,button,span,div)[class~="bg-green-700"][class][class]  { background-color:#046c4e !important; background-image:none !important; color:#fff !important; -webkit-text-fill-color:#fff !important; }
:is(a,button,span,div)[class~="bg-emerald-600"][class][class]{ background-color:#047857 !important; background-image:none !important; color:#fff !important; -webkit-text-fill-color:#fff !important; }
:is(a,button,span,div)[class~="bg-red-500"][class][class]    { background-color:#b91c1c !important; background-image:none !important; color:#fff !important; -webkit-text-fill-color:#fff !important; }
:is(a,button,span,div)[class~="bg-red-600"][class][class]    { background-color:#b91c1c !important; background-image:none !important; color:#fff !important; -webkit-text-fill-color:#fff !important; }
:is(a,button,span,div)[class~="bg-blue-600"][class][class] { background-color:#1d4ed8 !important; background-image:none !important; color:#fff !important; -webkit-text-fill-color:#fff !important; }
:is(a,button,span,div)[class~="bg-cyan-600"][class][class]   { background-color:#0e7490 !important; background-image:none !important; color:#fff !important; -webkit-text-fill-color:#fff !important; }
:is(a,button,span,div)[class~="bg-amber-500"][class][class]  { background-color:#b45309 !important; background-image:none !important; color:#fff !important; -webkit-text-fill-color:#fff !important; }
:is(a,button,span,div)[class~="bg-orange-500"][class][class] { background-color:#c2410c !important; background-image:none !important; color:#fff !important; -webkit-text-fill-color:#fff !important; }
/* bg-yellow-500 had no remap. White on #eab308 is 1.92:1 — the step-3 badge on
   /static/deployment-instructions and the "rate this service" buttons in
   my-bookings. #a16207 keeps the amber hue and carries white at 4.92:1.
   Scoped to :is(a,button,span,div) so the pricing <th class="bg-yellow-500">
   (which inherits dark ink from its blue header row) is untouched. */
:is(a,button,span,div)[class~="bg-yellow-500"][class][class] { background-color:#a16207 !important; background-image:none !important; color:#fff !important; -webkit-text-fill-color:#fff !important; }

/* Descendants inside these filled controls must also stay white. */
:is(a,button,span,div)[class~="bg-blue-600"][class][class] :is(span,i,strong,small,p,div,b,em),
:is(a,button,span,div)[class~="bg-blue-500"][class][class] :is(span,i,strong,small,p,div,b,em),
:is(a,button,span,div)[class~="bg-green-500"][class][class] :is(span,i,strong,small,p,div,b,em),
:is(a,button,span,div)[class~="bg-green-600"][class][class] :is(span,i,strong,small,p,div,b,em),
:is(a,button,span,div)[class~="bg-blue-600"][class][class] :is(span,i,strong,small,p,div,b,em),
:is(a,button,span,div)[class~="bg-red-500"][class][class] :is(span,i,strong,small,p,div,b,em),
:is(a,button,span,div)[class~="bg-amber-500"][class][class] :is(span,i,strong,small,p,div,b,em) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* ═══ 35. LAST SIX PAGES ══════════════════════════════════════════════════ */

/* bin-compare format toggles: plain <button class="format-toggle-*"> with no
   background utility, so theme.css left them white-on-white. */
.format-toggle button,
[class^="format-toggle-"], [class*=" format-toggle-"] {
  background: var(--bg) !important;
  background-image: none !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-2) !important;
  -webkit-text-fill-color: var(--text-2) !important;
}
.format-toggle button.active,
[class^="format-toggle-"][class*="active"], [class*=" format-toggle-"][class*="active"] {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* vin-writer accent text stayed #14b8a6 (2.49:1 on white). */
[style*=";color:#14b8a6"], [style^="color:#14b8a6"], [style*=";color: #14b8a6"], [style^="color: #14b8a6"],
.btn-teal, .text-teal-500 {
  color: #0f766e !important;
  -webkit-text-fill-color: #0f766e !important;
}
/* The rule above sets color AND -webkit-text-fill-color to #0f766e for the
   teal ACCENT-TEXT usage. A .btn-teal is a filled control, so it needs white
   ink — but resetting only `color` left -webkit-text-fill-color at #0f766e,
   which is what actually paints the glyphs. Result: #0f766e on #0f766e
   (measured 1:1 on /static/vin-writer). Both properties must be reset. */
.btn-teal {
  background: #0f766e !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* PWA role tiles (<a class="block text-center rounded-xl"> with a gradient fill
   and an accent-coloured label) — filled control: white label, real fill. */
html body a.block.text-center.rounded-xl,
html body a[class*="block"][class*="text-center"][class*="rounded-xl"] {
  background-color: var(--accent) !important;
  background-image: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
html body a.block.text-center.rounded-xl *,
html body a[class*="block"][class*="text-center"][class*="rounded-xl"] * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* ═══ 36. en/tools CTA anchors ════════════════════════════════════════════ */
/* These carry `bg-blue-600` PLUS leftover gradient-stop classes
   (`from-blue-600 to-blue-600`) after the source codemod. The stop classes
   let a theme.css gradient rule repaint them, so the explicit fill below is
   anchored on the element's own attribute list at high specificity. */
html body a[class~="bg-blue-600"][class][class][class],
html body a[class~="bg-blue-600"][class][class][class]:hover {
  background-color: #2563eb !important;
  background-image: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
}
html body a[class~="bg-blue-600"][class][class][class] * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   37. FILLED ANCHORS WITH INLINE BACKGROUNDS
   ═══════════════════════════════════════════════════════════════════════
   ROOT CAUSE (traced with tools/rule-trace.cjs, not guessed):

     theme.css:1267  .rounded-2xl, .rounded-xl, .rounded-lg, .card, …
                     { … color: var(--text-1) !important; }

   These CTAs paint themselves with an inline
     style="background:linear-gradient(135deg,#2563eb,#2563eb)"
   and label themselves `text-white`, but they also carry `rounded-lg`.
   `.rounded-lg` therefore forced --text-1 (#0f172a) on them: measured
   3.45:1 dark-on-blue on /static/pricing. The `:not([class*="bg-"])`
   guards elsewhere never fire, because the fill lives in `style`, not
   in a `bg-*` utility.

   Specificity is deliberately (0,7,3) so it clears the (0,6,1) descendant
   rules in §31/§32 that re-point `.text-white` at dark ink.
   ═══════════════════════════════════════════════════════════════════════ */
html body a[class~="text-white"][style*="background"][class][class][class][class][class],
html body a[class~="text-white"][style*="gradient"][class][class][class][class][class],
html body button[class~="text-white"][style*="background"][class][class][class][class][class],
html body button[class~="text-white"][style*="gradient"][class][class][class][class][class] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body a[class~="text-white"][style*="background"][class][class][class][class][class] :is(span,i,strong,small,div),
html body a[class~="text-white"][style*="gradient"][class][class][class][class][class] :is(span,i,strong,small,div),
html body button[class~="text-white"][style*="background"][class][class][class][class][class] :is(span,i,strong,small,div),
html body button[class~="text-white"][style*="gradient"][class][class][class][class][class] :is(span,i,strong,small,div) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ── §38 Filled primary action buttons keep their gradient ───────────────
   The generic `button { background: … !important }` rules in §2/§4 exist to
   flatten decorative chrome, but they also flattened the real gradient on
   .btn-login / .btn-submit / .btn-primary, leaving white text on a white
   surface. Restate the fill at the end of the cascade so those buttons stay
   legible. Specificity (0,2,1) + !important clears the bare `button` rules.
   NOTE: `background` is a SHORTHAND and resets background-color to
   transparent, so the solid colour must come AFTER it (or be avoided). */
html body .btn-login,
html body .btn-submit,
html body .btn-primary,
html body .btn-contact {
  background-image: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%) !important;
  background-color: #1d4ed8 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: #1d4ed8 !important;
}

html body .btn-login :is(span, i, strong, small),
html body .btn-submit :is(span, i, strong, small),
html body .btn-primary :is(span, i, strong, small),
html body .btn-contact :is(span, i, strong, small) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body .btn-login:hover,
html body .btn-submit:hover,
html body .btn-primary:hover {
  background-image: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%) !important;
  background-color: #1e40af !important;
  color: #ffffff !important;
}

/* The generic `span`/`button` palette rules above paint bare elements, which
   repaints the label span inside a filled button and the button itself.
   Restate the fill for the label at the highest specificity in the sheet. */
html body .btn-login > span,
html body .btn-submit > span,
html body .btn-primary > span,
html body .btn-contact > span {
  background: transparent !important;
  background-color: transparent !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body button.btn-login,
html body button.btn-submit,
html body button.btn-primary,
html body button.btn-contact,
html body a.btn-primary,
html body a.btn-login,
html body a.btn-contact {
  background: #1d4ed8 !important;
  background-color: #1d4ed8 !important;
  background-image: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Last-resort fill for the login/submit button. The generic palette rules
   earlier in this sheet paint every bare `button`, and on programmer-login
   they still outranked `html body .btn-login`. Doubling the class raises
   specificity to (0,2,3) without !important abuse, so the fill and the
   white label always win. */
html body button.btn-login.btn-login,
html body button.btn-submit.btn-submit,
html body button.btn-primary.btn-primary,
html body a.btn-primary.btn-primary {
  background-image: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%) !important;
  background-color: #1d4ed8 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: #1d4ed8 !important;
}

html body button.btn-login.btn-login span,
html body button.btn-submit.btn-submit span,
html body button.btn-primary.btn-primary span {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ── §39 Inline-filled CTAs own their glyph ink ──────────────────────────
   `-webkit-text-fill-color` is INHERITED. Several container rules above pin
   it to a literal colour (e.g. var(--text-2)), so a CTA whose own `color` is
   white still painted its glyphs dark: ecu-list's WhatsApp button measured
   1.55:1 dark-slate-on-blue while its computed color was correctly #fff.
   An inline `color:#fff` is the unambiguous signal that the element is a
   filled CTA, so restore the fill to match. The `;` / `^` anchors keep this
   from matching `background-color:#fff`. */
[style*=";color:#fff"], [style^="color:#fff"],
[style*=";color: #fff"], [style^="color: #fff"],
[style*=";color:#ffffff"], [style^="color:#ffffff"],
[style*=";color: #ffffff"], [style^="color: #ffffff"] {
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
}

/* The label ink inside those CTAs, and inside the primary buttons, must
   follow the fill rather than inherit a container's text-fill rule. */
[style*=";color:#fff"] :is(span, i, strong, small, div),
[style^="color:#fff"] :is(span, i, strong, small, div),
.btn-login :is(span, i), .btn-submit :is(span, i), .btn-primary :is(span, i) {
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
}

/* The navbar tagline: 10px was below a comfortable reading floor, and 0.7rem
   (11.2px) still tripped a 12px legibility floor. 0.75rem = 12px, and the ink
   is --text-3 (5.46:1 on white) so it clears AA at that size. */
.nav-logo-sub { font-size: 0.75rem !important; line-height: 1.35 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   §40 — CARD INTERIORS THAT STILL ASSUMED A DARK SURFACE, AND THE NAVBAR
   OVERFLOW THAT WAS PUSHING THE LOGO OFF THE EDGE.

   Two separate defects, both invisible to a contrast audit:
     (a) NAUSBAR GEOMETRY. `.nav-inner` had no horizontal padding, so at
         1280px the flex line needed 1300px (168 logo + 696 links + 404
         actions + 2x16 gap) inside a 1278px box. The overflow rendered as a
         21px horizontal scrollbar AND pushed `.nav-logo-icon` to x=1279 of a
         1280px viewport — the logo sat flush on the edge with no gutter.
         Measured before the fix: scrollW 1301 vs clientW 1280.
     (b) INNER SURFACES. These rules in theme.css were authored for near-black
         glass: `rgba(255,255,255,.02)` fills and `rgba(255,255,255,.08)`
         borders. On white they composite to white-on-white, so the inner
         rows of a card lost all separation — the card looked like one
         undifferentiated block. Pale inks (#93c5fd, #34d399) that read
         correctly on dark read as washed-out on white.

   Everything below uses real tokens, so it cannot drift again.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---- (a) Navbar: real gutter + shrink instead of overflow -------------- */
.nav-inner {
  padding-inline: 16px !important;
  min-width: 0 !important;
}
/* Between the hamburger breakpoint (900px) and the width at which the full
   line genuinely fits (~1360px), tighten instead of overflowing. The old
   behaviour showed the desktop nav and then let it run off the screen. */
@media (min-width: 900px) and (max-width: 1360px) {
  .nav-inner  { gap: 6px !important; padding-inline: 10px !important; }
  .nav-links  { gap: 0 !important; min-width: 0 !important; }
  .nav-link   { padding: 8px 8px !important; font-size: .78rem !important; gap: 4px !important; }
  .nav-actions { gap: 6px !important; }
  .nav-actions .btn-ghost,
  .nav-actions > a,
  .nav-actions > button { padding: 8px 10px !important; font-size: .78rem !important; }
}
/* Never let the bar itself create a page-level scrollbar. */
#navbar { overflow-x: clip; }

/* ---- (b) Inner surfaces inside cards ----------------------------------- */

/* remote-programming feature rows + step rows */
.rf,
.step,
.prog-mini-stat,
.bid-card,
.support-info {
  background: var(--bg-subtle) !important;
  border: 1px solid var(--border) !important;
}
.rf:hover,
.step:hover,
.bid-card:hover {
  background: var(--accent-soft) !important;
  border-color: var(--accent-border) !important;
}
.rf-icon {
  background: var(--success-soft) !important;
  border: 1px solid var(--success-line) !important;
  color: var(--success) !important;
}

/* form sections / day toggles inside register + settings cards */
.form-section {
  background: var(--bg-subtle) !important;
  border: 1px solid var(--border) !important;
}
.day-check {
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-2) !important;
}

/* Card-family borders still on the old 1.5px translucent-neon values. */
.stat-card,
.forum-topic-card,
a.forum-topic-card,
.admin-dashboard-card {
  border: 1px solid var(--border-strong) !important;
}
div.pagination button,
nav button[class*="px-4"][class*="py-2"],
button.pagination-btn {
  border: 1px solid var(--border-strong) !important;
  background: var(--surface) !important;
  color: var(--text-2) !important;
}

/* ---- (c) Pale inks that only worked on dark ---------------------------- */
.prog-mini-tag {
  color: var(--accent-text) !important;      /* was #93c5fd — 2.2:1 on white */
  background: var(--accent-soft) !important;
  border: 1px solid var(--accent-border) !important;
}
.cta-green {
  color: var(--success) !important;          /* was #34d399 */
  border-color: var(--success-line) !important;
  background: var(--success-soft) !important;
}
.cta-green:hover {
  color: #ffffff !important;
  background: var(--success) !important;
  border-color: var(--success) !important;
  box-shadow: 0 4px 14px rgba(4, 120, 87, .22) !important;
}
.amount-tag { background: rgba(255, 255, 255, .22) !important; }

/* ---- (d) Kill the last dark-surface decorations ------------------------ */
/* 280px radial blob bleeding out of .remote-card's top-right corner. Designed
   as a glow on near-black; on white it is a grey smudge that reads as a
   rendering fault — same defect already removed from .hub-card. */
.remote-card::after { content: none !important; display: none !important; }
/* Rotating hue-rotate ring around the login/admin avatar: an ambient
   sci-fi effect with no meaning on a flat light surface. Keep the ring as a
   static accent outline, drop the spin. */
.login-avatar::after,
.admin-avatar::after,
.register-avatar::after {
  animation: none !important;
  background: var(--accent) !important;
}
.remote-card { box-shadow: var(--shadow-card) !important; }