/* ============================================================================
   Construction Coalition — Dark Theme Layer (site-wide skin)
   ----------------------------------------------------------------------------
   Usage on every page:
       <link rel="stylesheet" href="/components/theme-dark.css">   (LAST in head)
       <script src="/components/theme-dark.js" defer></script>
       <body class="theme-dark">            <- add "ai-red" on AI pages,
                                                "dark-header" when nav is dark
   Why !important: Tailwind (Play CDN) injects its sheet at runtime, i.e. after
   this file, and each page also carries its own <style>. Specificity +
   !important is the only reliable way for a skin like this to win.
   The injected header (#header-placeholder) and the shared chatbot widget are
   excluded from the generic remaps; the header is restyled only under
   body.dark-header.
   ========================================================================= */

:root {
    --cc-void: #070B09;
    --cc-void-2: #0B1210;
    --cc-line: rgba(255, 255, 255, 0.09);
    --cc-line-soft: rgba(255, 255, 255, 0.05);
    --cc-ink: #E9F2EC;
    --cc-muted: #93A69B;
    --cc-green: #22c55e;
    --cc-green-deep: #165d31;
    --cc-red: #ED2939;
}

/* ------------------------------------------------------------------ base --- */
html { scroll-behavior: smooth; }

body.theme-dark {
    background:
        radial-gradient(1200px 700px at 82% -8%, rgba(22, 93, 49, 0.28), transparent 60%),
        radial-gradient(900px 620px at 3% 18%, rgba(34, 197, 94, 0.09), transparent 60%),
        var(--cc-void) !important;
    color: var(--cc-ink) !important;
    overflow-x: hidden;
}
body.theme-dark ::selection { background: rgba(34, 197, 94, 0.3); color: #fff; }
body.theme-dark ::-webkit-scrollbar { width: 10px; height: 10px; }
body.theme-dark ::-webkit-scrollbar-track { background: #0A0F0D; }
body.theme-dark ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--cc-green-deep), var(--cc-green));
    border-radius: 99px;
    border: 2px solid #0A0F0D;
}

/* ------------------------------------------------- surface / text remap ---- */
body.theme-dark .bg-white:not(#header-placeholder *),
body.theme-dark .bg-slate-50:not(#header-placeholder *),
body.theme-dark .bg-slate-50\/50:not(#header-placeholder *),
body.theme-dark .bg-slate-100:not(#header-placeholder *) {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02)) !important;
}
body.theme-dark .bg-slate-200:not(#header-placeholder *),
body.theme-dark .bg-slate-300:not(#header-placeholder *) {
    background: rgba(255, 255, 255, 0.10) !important;
}
body.theme-dark .bg-slate-700:not(#header-placeholder *) { background: rgba(255, 255, 255, 0.10) !important; }
body.theme-dark .bg-slate-800:not(#header-placeholder *),
body.theme-dark .bg-slate-900:not(#header-placeholder *) { background: var(--cc-void-2) !important; }
body.theme-dark .bg-slate-950:not(#header-placeholder *) { background: #030504 !important; }

body.theme-dark .text-slate-900:not(#header-placeholder *),
body.theme-dark .text-slate-800:not(#header-placeholder *),
body.theme-dark .text-slate-700:not(#header-placeholder *),
body.theme-dark .text-black:not(#header-placeholder *) { color: var(--cc-ink) !important; }
body.theme-dark .text-slate-600:not(#header-placeholder *),
body.theme-dark .text-slate-500:not(#header-placeholder *) { color: var(--cc-muted) !important; }
body.theme-dark .text-slate-400:not(#header-placeholder *),
body.theme-dark .text-slate-300:not(#header-placeholder *) { color: rgba(147, 166, 155, 0.85) !important; }
body.theme-dark .text-slate-200:not(#header-placeholder *) { color: rgba(233, 242, 236, 0.75) !important; }
body.theme-dark .text-slate-100\/80:not(#header-placeholder *) { color: rgba(233, 242, 236, 0.8) !important; }

body.theme-dark .border-slate-100:not(#header-placeholder *),
body.theme-dark .border-slate-200:not(#header-placeholder *),
body.theme-dark .border-slate-200\/60:not(#header-placeholder *),
body.theme-dark .border-slate-300:not(#header-placeholder *) { border-color: var(--cc-line) !important; }
body.theme-dark .border-slate-600:not(#header-placeholder *),
body.theme-dark .border-slate-700:not(#header-placeholder *),
body.theme-dark .border-slate-800:not(#header-placeholder *) { border-color: var(--cc-line) !important; }
body.theme-dark .divide-slate-100 > * + *,
body.theme-dark .divide-slate-200 > * + * { border-color: var(--cc-line-soft) !important; }

/* light gradient stops used by light-themed decorative gradients */
body.theme-dark .from-white:not(#header-placeholder *) { --tw-gradient-from: rgba(255, 255, 255, 0.06) var(--tw-gradient-from-position) !important; }
body.theme-dark .to-white:not(#header-placeholder *) { --tw-gradient-to: rgba(255, 255, 255, 0.06) var(--tw-gradient-to-position) !important; }
body.theme-dark .from-slate-50:not(#header-placeholder *) { --tw-gradient-from: rgba(255, 255, 255, 0.05) var(--tw-gradient-from-position) !important; }
body.theme-dark .to-slate-50:not(#header-placeholder *) { --tw-gradient-to: rgba(255, 255, 255, 0.03) var(--tw-gradient-to-position) !important; }
body.theme-dark .from-slate-100:not(#header-placeholder *) { --tw-gradient-from: rgba(255, 255, 255, 0.06) var(--tw-gradient-from-position) !important; }
body.theme-dark .to-slate-100:not(#header-placeholder *) { --tw-gradient-to: rgba(255, 255, 255, 0.04) var(--tw-gradient-to-position) !important; }

body.theme-dark .shadow-sm:not(#header-placeholder *),
body.theme-dark .shadow:not(#header-placeholder *),
body.theme-dark .shadow-md:not(#header-placeholder *),
body.theme-dark .shadow-lg:not(#header-placeholder *),
body.theme-dark .shadow-xl:not(#header-placeholder *),
body.theme-dark .shadow-2xl:not(#header-placeholder *) {
    box-shadow: 0 26px 60px -34px rgba(0, 0, 0, 0.95) !important;
}

/* -------------------------------------------------------- page chrome ------ */
/* hero band = whatever section directly follows the injected header */
body.theme-dark #header-placeholder + section {
    position: relative !important;
    padding-block: clamp(2.75rem, 6vw, 5.5rem) !important;
    background:
        radial-gradient(900px 420px at 78% 8%, rgba(22, 93, 49, 0.34), transparent 62%),
        radial-gradient(620px 340px at 8% 92%, rgba(34, 197, 94, 0.10), transparent 66%),
        #050806 !important;
    border-bottom: 1px solid var(--cc-line-soft) !important;
    overflow: hidden;
}
body.theme-dark #header-placeholder + section::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.6), transparent);
}
body.theme-dark #header-placeholder + section > * { position: relative; z-index: 1; }

body.theme-dark section { position: relative; }

/* headings stay legible while page-specific gradient text keeps its identity */
body.theme-dark h1:not([class*="gradient"]):not([class*="text-"]),
body.theme-dark h2:not([class*="gradient"]):not([class*="text-"]),
body.theme-dark h3:not([class*="gradient"]):not([class*="text-"]) { color: var(--cc-ink) !important; }

/* brighter gradient text on dark, per brand family */
body.theme-dark .gradient-text {
    background: linear-gradient(120deg, #ffffff 0%, #eafff2 30%, #86f0aa 62%, #4ade80 100%) !important;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.theme-dark.ai-red .gradient-text {
    background: linear-gradient(120deg, #ffffff 0%, #ffe3e6 30%, #ff8a94 62%, #ff5a66 100%) !important;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* no blueprint/grid backdrops anywhere (explicit request) */
body.theme-dark .grid-pattern,
body.theme-dark [class*="grid-pattern"] { display: none !important; }
body.theme-dark [style*="background-size:40px"],
body.theme-dark [style*="background-size: 40px"],
body.theme-dark [style*="background-size:52px"],
body.theme-dark [style*="background-size: 52px"],
body.theme-dark [style*="background-size:54px"],
body.theme-dark [style*="background-size: 54px"] { background-image: none !important; }
body.theme-dark .btn-primary:hover { box-shadow: 0 12px 32px -8px rgba(34, 197, 94, 0.5) !important; }
body.theme-dark.ai-red .btn-primary:hover { box-shadow: 0 12px 32px -8px rgba(237, 41, 57, 0.5) !important; }

/* ------------------------------------------------------------ components --- */
body.theme-dark .glass-card:not(#header-placeholder *) {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02)) !important;
    border: 1px solid var(--cc-line) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
body.theme-dark .glass-card:not(#header-placeholder *):hover {
    border-color: rgba(34, 197, 94, 0.45) !important;
    box-shadow: 0 34px 70px -28px rgba(34, 197, 94, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}
body.theme-dark.ai-red .glass-card:not(#header-placeholder *):hover {
    border-color: rgba(237, 41, 57, 0.45) !important;
    box-shadow: 0 34px 70px -28px rgba(237, 41, 57, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

body.theme-dark .cc-eyebrow {
    display: inline-flex; align-items: center; gap: 0.55rem;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    border: 1px solid rgba(34, 197, 94, 0.28);
    background: rgba(34, 197, 94, 0.08);
    color: #8ef0b0;
    font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
}
body.theme-dark.ai-red .cc-eyebrow {
    border-color: rgba(237, 41, 57, 0.32);
    background: rgba(237, 41, 57, 0.08);
    color: #ffb3ba;
}
body.theme-dark .cc-hairline {
    height: 1px; width: 100%;
    background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.55), transparent);
}

body.theme-dark .cc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
    border-radius: 1rem; font-weight: 700; line-height: 1;
}
body.theme-dark .cc-btn-primary {
    background: linear-gradient(120deg, #165d31, #22c55e 55%, #16a34a);
    color: #fff !important;
    box-shadow: 0 18px 40px -14px rgba(34, 197, 94, 0.65);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}
body.theme-dark.ai-red .cc-btn-primary { background: linear-gradient(120deg, #7b131b, #ED2939 60%, #c1121f); }
body.theme-dark .cc-btn-primary:hover { transform: translateY(-3px); }
body.theme-dark .cc-btn-ghost {
    border: 1px solid var(--cc-line);
    background: rgba(255, 255, 255, 0.03);
    color: var(--cc-ink) !important;
    transition: all 0.35s ease;
}
body.theme-dark .cc-btn-ghost:hover { border-color: rgba(34, 197, 94, 0.6); background: rgba(34, 197, 94, 0.08); transform: translateY(-3px); }

/* forms */
body.theme-dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not(#header-placeholder *):not(.ai-chatbot-modal *),
body.theme-dark select:not(#header-placeholder *):not(.ai-chatbot-modal *),
body.theme-dark textarea:not(#header-placeholder *):not(.ai-chatbot-modal *) {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--cc-line) !important;
    color: var(--cc-ink) !important;
}
body.theme-dark input::placeholder:not(#header-placeholder *),
body.theme-dark textarea::placeholder:not(#header-placeholder *) { color: rgba(147, 166, 155, 0.75) !important; }
body.theme-dark select option { background: #0B1210; color: var(--cc-ink); }
body.theme-dark input:focus:not(#header-placeholder *),
body.theme-dark select:focus:not(#header-placeholder *),
body.theme-dark textarea:focus:not(#header-placeholder *) { border-color: rgba(34, 197, 94, 0.65) !important; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12) !important; }

/* data surfaces used by the AI tool pages */
body.theme-dark table:not(#header-placeholder *) { border-color: var(--cc-line) !important; color: var(--cc-ink); }
body.theme-dark th:not(#header-placeholder *) {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--cc-muted) !important;
    border-color: var(--cc-line) !important;
}
body.theme-dark td:not(#header-placeholder *) { border-color: var(--cc-line-soft) !important; }
body.theme-dark tr:hover td { background: rgba(34, 197, 94, 0.05) !important; }
body.theme-dark pre:not(#header-placeholder *),
body.theme-dark code:not(#header-placeholder *) { background: rgba(255, 255, 255, 0.05) !important; color: #d7fbe4 !important; }

/* media frames */
body.theme-dark .cc-frame { position: relative; border-radius: 26px; overflow: hidden; border: 1px solid var(--cc-line); }
body.theme-dark .cc-frame img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.92) contrast(1.05); }

body.theme-dark footer {
    background: #030504 !important;
    border-top: 1px solid var(--cc-line-soft) !important;
    color: var(--cc-muted) !important;
}
body.theme-dark footer a:hover { color: var(--cc-ink) !important; }

/* ---------------------------------------------------- conversion band ------ */
body.theme-dark .cc-cta-band {
    padding: clamp(3rem, 7vw, 5.5rem) 1.5rem;
    background:
        radial-gradient(760px 380px at 50% 0%, rgba(22, 93, 49, 0.34), transparent 66%),
        #050806 !important;
    border-top: 1px solid var(--cc-line-soft);
    text-align: center;
}
body.theme-dark.ai-red .cc-cta-band {
    background:
        radial-gradient(760px 380px at 50% 0%, rgba(237, 41, 57, 0.20), transparent 66%),
        #050806 !important;
}
body.theme-dark .cc-cta-inner { max-width: 820px; margin-inline: auto; }
body.theme-dark .cc-cta-title {
    font-family: "Space Grotesk", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 700;
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    line-height: 1.15;
    color: var(--cc-ink) !important;
    margin: 1.25rem 0 0.9rem;
}
body.theme-dark .cc-cta-sub { color: var(--cc-muted) !important; font-size: 1.05rem; line-height: 1.7; margin-bottom: 2rem; }
body.theme-dark .cc-cta-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; }
body.theme-dark .cc-cta-actions .cc-btn { padding: 1rem 1.6rem; }

/* --------------------------------------------------- floating chrome ------- */
body.theme-dark .cc-sticky-cta {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 45;
    background: rgba(5, 8, 6, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--cc-line);
    transform: translateY(140%);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    padding-bottom: env(safe-area-inset-bottom, 0);
}
body.theme-dark .cc-sticky-cta.show { transform: none; }
body.theme-dark .cc-sticky-cta .cc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; padding: 0.75rem; }
body.theme-dark .cc-sticky-cta .cc-btn { padding: 0.85rem 1rem; border-radius: 0.85rem; font-size: 0.95rem; }
@media (min-width: 768px) { body.theme-dark .cc-sticky-cta { display: none; } }

body.theme-dark .cc-totop {
    position: fixed; inset-inline-end: 1.5rem; bottom: 7.5rem;
    width: 3rem; height: 3rem; border-radius: 999px;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--cc-line);
    color: var(--cc-ink);
    opacity: 0; pointer-events: none;
    transition: opacity 0.4s ease, border-color 0.3s ease;
    z-index: 44;
    cursor: pointer;
}
body.theme-dark .cc-totop.show { opacity: 1; pointer-events: auto; }
body.theme-dark .cc-totop:hover { border-color: rgba(34, 197, 94, 0.6); }

body.theme-dark .cc-toast {
    position: fixed; inset-inline: 0; bottom: 2rem; margin-inline: auto;
    width: max-content; max-width: 90vw; z-index: 90;
    padding: 0.85rem 1.35rem; border-radius: 0.9rem;
    background: linear-gradient(120deg, #165d31, #22c55e);
    color: #fff; font-weight: 600; font-size: 0.9rem;
    box-shadow: 0 20px 45px -18px rgba(34, 197, 94, 0.8);
    transform: translateY(160%); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
body.theme-dark .cc-toast.show { transform: none; }

/* keep the shared chatbot button clear of the sticky bar */
@media (max-width: 767px) {
    body.theme-dark .ai-chatbot-widget { bottom: 100px !important; }
    body.theme-dark .ai-chatbot-modal { bottom: 100px !important; max-height: calc(100dvh - 150px) !important; }
    body.theme-dark .cc-totop { inset-inline-end: auto; inset-inline-start: 1rem; bottom: 6.75rem; }
}

/* --------------------------------------------------------- reveals/js ------ */
/* only applied once theme-dark.js is running, and always released by a timer */
body.theme-dark .cc-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1); }
body.theme-dark .cc-reveal.cc-in { opacity: 1; transform: none; }

/* --------------------------------------------------------- dark header ----- */
body.dark-header #header-placeholder nav {
    background: rgba(7, 11, 9, 0.94) !important;
    border-bottom-color: var(--cc-line) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
body.dark-header #header-placeholder .text-slate-900 { color: var(--cc-ink) !important; }
body.dark-header #header-placeholder .text-slate-800 { color: var(--cc-ink) !important; }
body.dark-header #header-placeholder .text-slate-600 { color: var(--cc-muted) !important; }
body.dark-header #header-placeholder .text-slate-500 { color: var(--cc-muted) !important; }
body.dark-header #header-placeholder .text-slate-400 { color: rgba(147, 166, 155, 0.85) !important; }
body.dark-header #header-placeholder .text-slate-300 { color: rgba(147, 166, 155, 0.6) !important; }
body.dark-header #header-placeholder .bg-white,
body.dark-header #header-placeholder .bg-white\/95 { background: rgba(7, 11, 9, 0.94) !important; }
body.dark-header #header-placeholder .bg-slate-50 { background: rgba(255, 255, 255, 0.05) !important; }
body.dark-header #header-placeholder .bg-slate-100 { background: rgba(255, 255, 255, 0.08) !important; }
body.dark-header #header-placeholder .border-slate-200,
body.dark-header #header-placeholder .border-slate-200\/80,
body.dark-header #header-placeholder .border-slate-200\/60 { border-color: var(--cc-line) !important; }
body.dark-header #header-placeholder .divide-slate-100 > * + * { border-color: var(--cc-line-soft) !important; }
body.dark-header #header-placeholder .bg-green-50 { background: rgba(34, 197, 94, 0.12) !important; }
body.dark-header #header-placeholder .text-green-700 { color: #8ef0b0 !important; }
body.dark-header #header-placeholder .border-green-200\/60 { border-color: rgba(34, 197, 94, 0.3) !important; }
body.dark-header #header-placeholder .shadow-md,
body.dark-header #header-placeholder .shadow-2xl,
body.dark-header #header-placeholder .shadow-lg { box-shadow: 0 22px 50px -30px rgba(0, 0, 0, 0.95) !important; }
/* logo mark: dark strokes/text must invert on a dark bar */
body.dark-header #header-placeholder svg text { fill: var(--cc-ink) !important; }
body.dark-header #header-placeholder svg [stroke="#111827"],
body.dark-header #header-placeholder svg [stroke="#1f2937"],
body.dark-header #header-placeholder svg [stroke="#000"],
body.dark-header #header-placeholder svg [stroke="black"] { stroke: var(--cc-ink) !important; }
body.dark-header #header-placeholder svg [fill="#111827"],
body.dark-header #header-placeholder svg [fill="#1f2937"],
body.dark-header #header-placeholder svg [fill="#000"],
body.dark-header #header-placeholder svg [fill="black"] { fill: var(--cc-ink) !important; }

/* ------------------------------------------- a11y --------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    body.theme-dark .cc-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    body.theme-dark .cc-sticky-cta,
    body.theme-dark .cc-toast { transition: none !important; }
}

/* ============ pass 2: tinted families, page-local panels, contrast ========= */
/* Secondary text was too dim on the new dark ground (measured 2.6:1). These
   tones clear 4.5:1 so body copy stays readable. */
:root {
    --cc-muted: #A9BDB2;      /* was #93A69B - failed contrast on dark */
    --cc-muted-dim: #9DB3A8;
}
body.theme-dark .text-slate-600:not(#header-placeholder *),
body.theme-dark .text-slate-500:not(#header-placeholder *),
body.theme-dark .text-slate-400:not(#header-placeholder *),
body.theme-dark .text-slate-300:not(#header-placeholder *) { color: var(--cc-muted) !important; }
body.theme-dark .text-slate-200:not(#header-placeholder *) { color: #BCCFC4 !important; }

/* light tinted pills/chips (the AI pages use these heavily) */
body.theme-dark .bg-red-50:not(#header-placeholder *),
body.theme-dark .bg-red-100:not(#header-placeholder *) { background: rgba(237, 41, 57, 0.13) !important; }
body.theme-dark .bg-red-200:not(#header-placeholder *) { background: rgba(237, 41, 57, 0.22) !important; }
body.theme-dark .bg-red-600\/10:not(#header-placeholder *) { background: rgba(237, 41, 57, 0.16) !important; }
body.theme-dark .border-red-100:not(#header-placeholder *),
body.theme-dark .border-red-200:not(#header-placeholder *) { border-color: rgba(237, 41, 57, 0.34) !important; }
body.theme-dark .text-red-600:not(#header-placeholder *),
body.theme-dark .text-red-700:not(#header-placeholder *),
body.theme-dark .text-red-800:not(#header-placeholder *),
body.theme-dark .text-red-200:not(#header-placeholder *),
body.theme-dark .text-red-100:not(#header-placeholder *) { color: #FF9AA3 !important; }

body.theme-dark .bg-green-50:not(#header-placeholder *),
body.theme-dark .bg-green-100:not(#header-placeholder *) { background: rgba(34, 197, 94, 0.13) !important; }
body.theme-dark .bg-green-200:not(#header-placeholder *) { background: rgba(34, 197, 94, 0.22) !important; }
body.theme-dark .border-green-100:not(#header-placeholder *),
body.theme-dark .border-green-200:not(#header-placeholder *) { border-color: rgba(34, 197, 94, 0.34) !important; }
body.theme-dark .text-green-600:not(#header-placeholder *),
body.theme-dark .text-green-700:not(#header-placeholder *) { color: #8EF0B0 !important; }

body.theme-dark .bg-yellow-50:not(#header-placeholder *),
body.theme-dark .bg-yellow-100:not(#header-placeholder *) { background: rgba(250, 204, 21, 0.14) !important; }
body.theme-dark .border-yellow-100:not(#header-placeholder *),
body.theme-dark .border-yellow-200:not(#header-placeholder *) { border-color: rgba(250, 204, 21, 0.32) !important; }
body.theme-dark .text-yellow-600:not(#header-placeholder *),
body.theme-dark .text-yellow-700:not(#header-placeholder *),
body.theme-dark .text-yellow-800:not(#header-placeholder *) { color: #FDE047 !important; }

body.theme-dark .bg-blue-50:not(#header-placeholder *),
body.theme-dark .bg-blue-100:not(#header-placeholder *) { background: rgba(59, 130, 246, 0.15) !important; }
body.theme-dark .border-blue-100:not(#header-placeholder *),
body.theme-dark .border-blue-200:not(#header-placeholder *) { border-color: rgba(59, 130, 246, 0.34) !important; }
body.theme-dark .text-blue-600:not(#header-placeholder *),
body.theme-dark .text-blue-700:not(#header-placeholder *) { color: #93C5FD !important; }

body.theme-dark .bg-purple-100:not(#header-placeholder *),
body.theme-dark .bg-purple-200:not(#header-placeholder *) { background: rgba(168, 85, 247, 0.18) !important; }
body.theme-dark .border-purple-100:not(#header-placeholder *),
body.theme-dark .border-purple-200:not(#header-placeholder *) { border-color: rgba(168, 85, 247, 0.32) !important; }
body.theme-dark .text-purple-600:not(#header-placeholder *),
body.theme-dark .text-purple-700:not(#header-placeholder *) { color: #D8B4FE !important; }

/* page-local card classes and inline white surfaces (chart/tool pages) */
body.theme-dark .stat-card:not(#header-placeholder *),
body.theme-dark .chart-container:not(#header-placeholder *),
body.theme-dark .insight-card:not(#header-placeholder *),
body.theme-dark .metric-card:not(#header-placeholder *),
body.theme-dark .kpi-card:not(#header-placeholder *),
body.theme-dark .data-card:not(#header-placeholder *),
body.theme-dark [style*="rgba(255,255,255,0.8"]:not(#header-placeholder *),
body.theme-dark [style*="rgba(255, 255, 255, 0.8"]:not(#header-placeholder *),
body.theme-dark [style*="background:white"]:not(#header-placeholder *),
body.theme-dark [style*="background: white"]:not(#header-placeholder *),
body.theme-dark [style*="background:#fff"]:not(#header-placeholder *),
body.theme-dark [style*="background: #fff"]:not(#header-placeholder *),
body.theme-dark [style*="background:#ffffff"]:not(#header-placeholder *),
body.theme-dark [style*="background: #ffffff"]:not(#header-placeholder *) {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02)) !important;
    border-color: var(--cc-line) !important;
    color: var(--cc-ink);
}
/* charts keep their own canvas painting - see theme-dark.js (Chart defaults) */
body.theme-dark .chart-container canvas { border-radius: 12px; }