/* ==========================================================================
   CertLab Theme — dark.css
   Dark mode. Loaded AFTER app.css / nav.css in every layout.

   Activated by <html data-theme="dark">, set in <head> by
   partials/site/theme-init.htm (saved choice → OS preference → light).

   Layout of this file
     1. Tokens        — remap the --cl-* design tokens (covers everything that
                        already uses var(--cl-*))
     2. Chrome        — nav, dropdowns, form controls, generic surfaces
     3. Toggle button — light AND dark styling for .cl-theme-toggle
     4. Learner area  — overrides for hard-coded colours (added per page)

   Overrides use `html[data-theme="dark"] .x` so they beat the inline <style>
   blocks that plugin components emit inside <body> (same-specificity, later
   in the cascade otherwise).
   ========================================================================== */

/* ─── 1. Tokens ─────────────────────────────────────────────────────────── */
html[data-theme="dark"] {
    color-scheme: dark;

    /* Brand — lifted a little so links/outlines keep contrast on dark */
    --cl-blue:       #2f8cf0;
    --cl-blue-d:     #1f74d6;
    --cl-blue-l:     #6db4ff;
    --cl-coral:      #ff7d70;
    --cl-coral-l:    rgba(255, 125, 112, 0.16);
    --cl-mint-l:     rgba(143, 224, 211, 0.16);
    --cl-gold-l:     rgba(245, 190, 111, 0.16);

    /* Text & lines */
    --cl-ink:        #e7ebf3;
    --cl-muted:      #9ba6ba;
    --cl-border:     #212c42;

    /* Surfaces (page → card → raised) */
    --cl-bg:         #090e18;
    --cl-bg-white:   #0f1626;
    --cl-white:      #0f1626;
    --cl-bg-warm:    #111726;
    --cl-bg-off:     #141d31;
    --cl-surface:    rgba(15, 22, 38, 0.78);
    --cl-surface-s:  rgba(15, 22, 38, 0.94);

    /* Elevation reads through borders on dark; keep shadows but deeper */
    --cl-shadow-sm:  0 4px 16px rgba(0, 0, 0, 0.35);
    --cl-shadow:     0 20px 60px rgba(0, 0, 0, 0.45);
    --cl-shadow-lg:  0 32px 90px rgba(0, 0, 0, 0.55);

    /* Navy blocks (footer, CTA, topbar, stats…) join the same neutral family as the page */
    --cl-dark:       #0a101c;
    --cl-dark-2:     #0e1524;
    --cl-dark-3:     #141d33;
    --cl-dark-navy:  #0a101c;

    /* Used only by pre-existing html[data-theme="dark"] rules inside the exam
       runner component; never defined in the v2 theme until now. */
    --cl-surface-muted:  #141d31;
    --cl-surface-raised: #141d31;
    --cl-surface-solid:  #0f1626;
}

/* ─── 2. Chrome ─────────────────────────────────────────────────────────── */
html[data-theme="dark"] body { color: var(--cl-ink); background: var(--cl-bg); }

/* Native form controls, scrollbars, autofill */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { color-scheme: dark; }
html[data-theme="dark"] ::placeholder { color: #6f7b90; opacity: 1; }

/* Navigation — nav.css stacks several generations of rules with hard-coded
   whites; restate the surfaces once here. */
html[data-theme="dark"] .cl-nav,
html[data-theme="dark"] .cl-home .cl-nav,
html[data-theme="dark"] .cl-body .cl-nav {
    background: rgba(9, 14, 24, .92);
    border-bottom-color: rgba(255, 255, 255, .08);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .4);
}
html[data-theme="dark"] .cl-nav::after,
html[data-theme="dark"] .cl-home .cl-nav::after,
html[data-theme="dark"] .cl-body .cl-nav::after {
    background: linear-gradient(90deg, rgba(47,140,240,.1), rgba(47,140,240,.55), rgba(47,140,240,.1));
}
html[data-theme="dark"] .cl-nav__static-list > li > a,
html[data-theme="dark"] .cl-nav__static-list > li > span,
html[data-theme="dark"] .cl-home .cl-nav__static-list > li > a,
html[data-theme="dark"] .cl-body .cl-nav__static-list > li > a { color: #b8c3d8; }
html[data-theme="dark"] .cl-nav__static-list > li > a:hover,
html[data-theme="dark"] .cl-nav__static-list > li > span:hover,
html[data-theme="dark"] .cl-home .cl-nav__static-list > li > a:hover,
html[data-theme="dark"] .cl-body .cl-nav__static-list > li > a:hover {
    color: #fff; background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .08);
}
html[data-theme="dark"] .cl-nav__static-list > li.active > a,
html[data-theme="dark"] .cl-nav__static-list > li.child-active > a,
html[data-theme="dark"] .cl-home .cl-nav__static-list > li.active > a,
html[data-theme="dark"] .cl-body .cl-nav__static-list > li.active > a {
    color: var(--cl-blue-l); background: rgba(47, 140, 240, .14); border-color: rgba(47, 140, 240, .22);
}
html[data-theme="dark"] .cl-nav__static-list > li > ul,
html[data-theme="dark"] .cl-nav__dropdown {
    background: #0f1626; border-color: rgba(255, 255, 255, .1);
    box-shadow: 0 22px 60px rgba(0, 0, 0, .55);
}
html[data-theme="dark"] .cl-nav__static-list > li > ul::before { background: #0f1626; border-color: rgba(255, 255, 255, .1); }
html[data-theme="dark"] .cl-nav__static-list > li > ul > li > a:hover,
html[data-theme="dark"] .cl-nav__dropdown-item:hover { background: rgba(255, 255, 255, .06); }
html[data-theme="dark"] .cl-nav__dropdown-divider { background: rgba(255, 255, 255, .09); }
html[data-theme="dark"] .cl-nav__dropdown-item--danger { color: #ff8a8a; }
html[data-theme="dark"] .cl-nav__dropdown-item--danger:hover { background: rgba(239, 68, 68, .14); color: #ffb0b0; }
html[data-theme="dark"] .cl-nav__bell:hover,
html[data-theme="dark"] .cl-nav__avatar-btn:hover { background: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .cl-nav__bell-badge { border-color: #090e18; }
html[data-theme="dark"] .cl-nav__avatar-img { border-color: rgba(255, 255, 255, .16); }
/* Sign-in pill is a filled blue button — keep it saturated */
html[data-theme="dark"] .cl-body .cl-nav__signin,
html[data-theme="dark"] .cl-home .cl-nav__signin { background: #2563eb; border-color: #2563eb; }

/* Mobile drawer */
html[data-theme="dark"] .cl-nav__toggle,
html[data-theme="dark"] .cl-home .cl-nav__toggle,
html[data-theme="dark"] .cl-body .cl-nav__toggle { background: #141d31; border-color: rgba(255, 255, 255, .12); }
html[data-theme="dark"] .cl-nav__toggle:hover,
html[data-theme="dark"] .cl-nav__toggle.is-open { background: #1b2640; border-color: rgba(47, 140, 240, .4); }
html[data-theme="dark"] .cl-nav__toggle span { background: #dbe3f1; }
/* Drawer surface only exists below the desktop breakpoint (nav.js BREAK = 1024);
   on desktop .cl-nav__static-menu is just the inline link row and stays transparent. */
@media (max-width: 1024px) {
    html[data-theme="dark"] .cl-nav .cl-nav__static-menu,
    html[data-theme="dark"] .cl-nav--open .cl-nav__static-menu {
        background: #0c121f; border-color: rgba(255, 255, 255, .1);
        box-shadow: 0 28px 80px rgba(0, 0, 0, .6);
    }
    html[data-theme="dark"] .cl-nav .cl-nav__static-menu::before,
    html[data-theme="dark"] .cl-nav--open .cl-nav__static-menu::before {
        color: #dbe3f1; background: #090e18; border-bottom-color: rgba(255, 255, 255, .08);
    }
    html[data-theme="dark"] .cl-nav .cl-nav__static-menu::after { background: #212c42; }
}
html[data-theme="dark"] .cl-nav__overlay { background: rgba(0, 0, 0, .6); }

/* Floating contact widget (donate panel + QR tile are already dark / must stay white) */
html[data-theme="dark"] .cl-contact__menu {
    background: rgba(15, 22, 38, .96); border-color: rgba(255, 255, 255, .1);
    box-shadow: 0 20px 54px rgba(0, 0, 0, .55);
}
html[data-theme="dark"] .cl-contact__action:hover { background: rgba(255, 255, 255, .07); }

/* Login / register card (/login, userauth component) */
html[data-theme="dark"] .cl-auth-page {
    background:
        radial-gradient(circle at 20% 20%, rgba(47, 140, 240, .14), transparent 30%),
        linear-gradient(180deg, #090e18 0%, #0c121f 100%);
}
html[data-theme="dark"] .cl-auth-card { background: var(--cl-white); }
html[data-theme="dark"] .cl-auth-google { background: var(--cl-bg-off); color: var(--cl-ink); }
html[data-theme="dark"] .cl-auth-google:hover { background: #1b2640; border-color: #4285F4; box-shadow: 0 2px 10px rgba(66, 133, 244, .25); }
html[data-theme="dark"] .cl-auth-input:focus { box-shadow: 0 0 0 3px rgba(47, 140, 240, .25); }
html[data-theme="dark"] .cl-auth-flash--error,
html[data-theme="dark"] .cl-auth-flash--google-error { background: rgba(244, 108, 95, .12); border-color: rgba(244, 108, 95, .35); color: #ff9c92; }
html[data-theme="dark"] .cl-auth-flash--success { background: rgba(34, 197, 94, .12); border-color: rgba(34, 197, 94, .35); color: #7fe0a3; }

/* ─── 3. Toggle button ──────────────────────────────────────────────────── */
.cl-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: var(--cl-radius-full);
    border: 1px solid var(--cl-border);
    background: transparent;
    color: var(--cl-ink);
    font-size: 1.05rem;
    line-height: 1;
    transition: background var(--cl-ease), border-color var(--cl-ease), color var(--cl-ease);
}
.cl-theme-toggle:hover { background: var(--cl-bg-off); border-color: var(--cl-blue); }
.cl-theme-toggle:focus-visible { outline: 2px solid var(--cl-blue); outline-offset: 2px; }
/* Show the icon for the mode you would switch TO */
.cl-theme-toggle__sun  { display: none; }
html[data-theme="dark"] .cl-theme-toggle__moon { display: none; }
html[data-theme="dark"] .cl-theme-toggle__sun  { display: inline; color: #ffc221; }

@media (prefers-reduced-motion: reduce) {
    .cl-theme-toggle { transition: none; }
}

/* ─── 4. Shared content components (home, practice list, cards) ─────────── */

/* Section backgrounds that were hard-coded pale blues */
html[data-theme="dark"] .cl-exams-section,
html[data-theme="dark"] .cl-testimonials-section { background: var(--cl-bg); }
html[data-theme="dark"] .cl-home .cl-member-certificates--home {
    background: radial-gradient(circle at 8% 4%, rgba(47,140,240,.12), transparent 32%), #090e18;
    border-bottom-color: var(--cl-border);
    border-block-color: var(--cl-border);
}
html[data-theme="dark"] .cl-home .cl-member-certificates--home::before { background-image: radial-gradient(rgba(255,255,255,.18) .7px, transparent .7px); }
html[data-theme="dark"] .cl-home .cl-member-certificates--home .cl-certificate-head .cl-heading { color: var(--cl-ink); }
html[data-theme="dark"] .cl-home .cl-member-certificates--home .cl-certificate-head .cl-subhead { color: var(--cl-muted); }
html[data-theme="dark"] .cl-home .cl-member-certificates--home .cl-certificate-trust span { color: #b8c3d8; }
html[data-theme="dark"] .cl-home .cl-member-certificates--home .cl-certificate-marquee__group .cl-certificate-card { border-color: var(--cl-border); box-shadow: 0 12px 30px rgba(0,0,0,.4); }
html[data-theme="dark"] .cl-certificate-card__image,
html[data-theme="dark"] .cl-certificate-marquee .cl-certificate-card__image,
html[data-theme="dark"] .cl-member-certificates--home .cl-certificate-card__image { background: #141d31; }
html[data-theme="dark"] .cl-certificate-card__badge { color: #5fd6a4; }
html[data-theme="dark"] .cl-certificate-empty { background: var(--cl-white); }

/* Cards */
html[data-theme="dark"] .cl-cert-card,
html[data-theme="dark"] .cl-featured-post,
html[data-theme="dark"] .cl-feature-card,
html[data-theme="dark"] .cl-featured-exam { background: var(--cl-white); }
html[data-theme="dark"] .cl-home .cl-cert-card,
html[data-theme="dark"] .cl-home .cl-feature-card { border-color: var(--cl-border); box-shadow: 0 8px 22px rgba(0,0,0,.3); }
html[data-theme="dark"] .cl-home .cl-cert-card:hover,
html[data-theme="dark"] .cl-cert-card:hover { box-shadow: 0 16px 34px rgba(0,0,0,.5); }
html[data-theme="dark"] .cl-cert-card__title,
html[data-theme="dark"] .cl-home #cl-home-exams-grid .cl-cert-card__title { color: var(--cl-ink); }
html[data-theme="dark"] .cl-cert-card__body { border-top-color: var(--cl-border); }
html[data-theme="dark"] .cl-cert-card__thumb,
html[data-theme="dark"] .cl-featured-post__thumb { background: linear-gradient(135deg, #141d31, #0f1626); }
html[data-theme="dark"] .cl-cert-card__thumb-placeholder,
html[data-theme="dark"] .cl-featured-post__thumb-placeholder { color: rgba(109,180,255,.25); }
html[data-theme="dark"] .cl-cert-card__price--free .cl-cert-card__price-current { color: #5fd68a; }
html[data-theme="dark"] .cl-feature-card--mint .cl-feature-card__icon { color: #6fd6c8; }
html[data-theme="dark"] .cl-feature-card--gold .cl-feature-card__icon { color: #f0b84f; }
html[data-theme="dark"] .cl-home .cl-feature-card__icon { background: rgba(47,140,240,.16); }

/* Filter bar, search, pills, pager */
html[data-theme="dark"] .cl-filter-bar,
html[data-theme="dark"] .cl-filter-pill,
html[data-theme="dark"] .cl-filter-search input,
html[data-theme="dark"] .cl-filter-search input[type="search"]:focus,
html[data-theme="dark"] .cl-home-exams-pager__button { background: var(--cl-white); color: var(--cl-ink); }
html[data-theme="dark"] .cl-home .cl-exams-section .cl-filter-bar { border-color: var(--cl-border); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
html[data-theme="dark"] .cl-filter-pill:hover { background: rgba(47,140,240,.14); }
html[data-theme="dark"] .cl-filter-pill.is-active,
html[data-theme="dark"] .cl-home .cl-filter-pill.is-active { background: var(--cl-blue); color: #fff; }
html[data-theme="dark"] .cl-home-exams-pager__button { box-shadow: 0 5px 16px rgba(0,0,0,.35); }
html[data-theme="dark"] .cl-home-exams-pager__dot { background: #2a3550; }

/* Ghost button: dark surface by default, keep the hero's own translucent-white variant */
html[data-theme="dark"] .cl-btn--ghost { background: var(--cl-surface); color: var(--cl-ink); }
html[data-theme="dark"] .cl-btn--ghost:hover { background: var(--cl-bg-off); }
html[data-theme="dark"] .cl-hero .cl-btn--ghost { background: transparent; color: rgba(255,255,255,.88); }
html[data-theme="dark"] .cl-hero .cl-btn--ghost:hover { background: rgba(255,255,255,.1); color: #fff; }

/* Home has its own token set (--cl-home-*) scoped on .cl-home; remap it once. */
html[data-theme="dark"] .cl-home {
    --cl-home-canvas:  #090e18;
    --cl-home-surface: #0c121f;
    --cl-home-ink:     #e7ebf3;
    --cl-home-blue:    #4a9bff;
    --cl-home-success: #4ad39b;
    --cl-home-navy:    #0a101c;
}
html[data-theme="dark"] .cl-home .cl-filter-pill.is-active { background: #2f8cf0; border-color: #2f8cf0; }
html[data-theme="dark"] .cl-home .cl-cert-card__price-current { color: #6db4ff; }
html[data-theme="dark"] .cl-home .cl-member-certificates--home .cl-certificate-head__action { background: #2563eb; border-color: #2563eb; color: #fff; }
html[data-theme="dark"] .cl-home .cl-member-certificates--home .cl-certificate-head__action:hover { background: #1d4ed8; border-color: #1d4ed8; }

/* ─── 5. Learner area ───────────────────────────────────────────────────── */

/* Account shell: profile, my-results, my-courses, messages */
html[data-theme="dark"] .cl-account__sidebar { background: var(--cl-white); }
html[data-theme="dark"] .cl-account__nav-link:hover { background: rgba(255,255,255,.06); }
html[data-theme="dark"] .cl-account__nav-link--active { background: rgba(47,140,240,.16); color: var(--cl-blue-l); }
html[data-theme="dark"] .cl-account__nav-link--danger { color: #ff8a80; }
html[data-theme="dark"] .cl-account__nav-link--danger:hover { background: rgba(244,108,95,.14); color: #ffab9f; }
html[data-theme="dark"] .cl-purchased-course__icon,
html[data-theme="dark"] .cl-purchased-empty__icon,
html[data-theme="dark"] .mi-detail-empty__icon { background: rgba(47,140,240,.14); }
html[data-theme="dark"] .cl-purchased-course__badge,
html[data-theme="dark"] .cl-purchased-course__badge--paid { background: rgba(34,197,94,.14); color: #6fdc98; border-color: rgba(34,197,94,.32); }
html[data-theme="dark"] .cl-purchased-course__badge--lifetime { background: rgba(47,140,240,.16); color: var(--cl-blue-l); border-color: rgba(47,140,240,.32); }
html[data-theme="dark"] .cl-purchased-course__badge--expired,
html[data-theme="dark"] .cl-purchased-course__inactive { background: rgba(244,108,95,.14); color: #ff9c92; border-color: rgba(244,108,95,.32); }

/* My results: score pills (tiers set in myresults/default.htm) */
html[data-theme="dark"] .cl-score-pill--excellent { color: #5fd68a; background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.5); }
html[data-theme="dark"] .cl-score-pill--good      { color: #6fe09a; background: rgba(46,204,113,.13); border-color: rgba(46,204,113,.45); }
html[data-theme="dark"] .cl-score-pill--fair      { color: #f5b24a; background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.5); }
html[data-theme="dark"] .cl-score-pill--poor      { color: #ff8a8a; background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.5); }
html[data-theme="dark"] .cl-status-pass { color: #5fd68a; }
html[data-theme="dark"] .cl-results-table tbody tr:hover { background: rgba(255,255,255,.04); }

/* Messages inbox */
html[data-theme="dark"] .mi-card,
html[data-theme="dark"] .mi-page-btn { background: var(--cl-white); }
html[data-theme="dark"] .mi-item:hover { background: rgba(255,255,255,.04); }
html[data-theme="dark"] .mi-item--unread { background: rgba(47,140,240,.09); }
html[data-theme="dark"] .mi-item--active { background: rgba(47,140,240,.16); }
html[data-theme="dark"] .mi-item__time,
html[data-theme="dark"] .mi-detail-meta { color: #8b97ad; }
html[data-theme="dark"] .mi-detail-content { color: #cbd5e6; }
html[data-theme="dark"] .mi-page-btn:hover { background: rgba(47,140,240,.14); }

/* Certificates page filter pills */
html[data-theme="dark"] .cl-certificate-filter__pill { background: var(--cl-white); }
html[data-theme="dark"] .cl-certificate-filter__pill.is-active { background: var(--cl-blue); color: #fff; }
html[data-theme="dark"] .cl-certificate-filter__pill span { background: rgba(255,255,255,.1); }

/* "Request an exam" section, form and modal */
html[data-theme="dark"] .cl-exam-request { background: var(--cl-bg); }
html[data-theme="dark"] .cl-exam-request__card,
html[data-theme="dark"] .cl-exam-request-modal__dialog { background: var(--cl-white); box-shadow: 0 22px 60px rgba(0,0,0,.5); }
html[data-theme="dark"] .cl-exam-request__form input,
html[data-theme="dark"] .cl-exam-request__form textarea { background: var(--cl-bg-off); color: var(--cl-ink); }
html[data-theme="dark"] .cl-exam-request__form input:focus,
html[data-theme="dark"] .cl-exam-request__form textarea:focus { box-shadow: 0 0 0 3px rgba(47,140,240,.25); }
html[data-theme="dark"] .cl-exam-request__member { color: #6fdc98; }
html[data-theme="dark"] .cl-exam-request__success { color: #6fdc98; background: rgba(34,197,94,.13); }
html[data-theme="dark"] .cl-exam-request-modal__backdrop { background: rgba(0, 0, 0, .66); }
html[data-theme="dark"] .cl-exam-request-modal__close { background: var(--cl-bg-off); color: var(--cl-ink); }

/* 404 */
html[data-theme="dark"] .cl-error-page__code { color: rgba(109,180,255,.18); }

/* Leaderboard (component <style>; light values are hard-coded per element) */
html[data-theme="dark"] .lb-filter { background: rgba(15,22,38,.96); border-color: var(--cl-border); box-shadow: 0 14px 40px rgba(0,0,0,.45); }
html[data-theme="dark"] .lb-filter__label { color: var(--cl-muted); }
html[data-theme="dark"] .lb-filter__input,
html[data-theme="dark"] .lb-filter__select { background: var(--cl-bg-off); border-color: var(--cl-border); color: var(--cl-ink); }
html[data-theme="dark"] .lb-filter__input:focus,
html[data-theme="dark"] .lb-filter__select:focus { box-shadow: 0 0 0 3px rgba(47,140,240,.25); }
html[data-theme="dark"] .lb-filter__btn--reset { background: #1b2640; color: var(--cl-ink); }
html[data-theme="dark"] .lb-personal { background: linear-gradient(110deg, rgba(255,200,87,.1), var(--cl-white)); border-color: rgba(255,200,87,.35); box-shadow: 0 8px 25px rgba(0,0,0,.3); }
html[data-theme="dark"] .lb-personal__rank { color: #f5be6f; }
html[data-theme="dark"] .lb-personal__rank small,
html[data-theme="dark"] .lb-personal__score small { color: var(--cl-muted); }
html[data-theme="dark"] .lb-personal__title,
html[data-theme="dark"] .lb-personal__score { color: var(--cl-ink); }
html[data-theme="dark"] .lb-personal__meta,
html[data-theme="dark"] .lb-count,
html[data-theme="dark"] .lb-time,
html[data-theme="dark"] .lb-attempts,
html[data-theme="dark"] .lb-empty { color: var(--cl-muted); }
html[data-theme="dark"] .lb-personal__avatar,
html[data-theme="dark"] .lb-avatar { background: #1b2640; color: var(--cl-ink); }
html[data-theme="dark"] .lb-wrap { background: var(--cl-white); border-color: var(--cl-border); box-shadow: 0 7px 26px rgba(0,0,0,.35); }
html[data-theme="dark"] .lb-table th { background: #141d31; color: var(--cl-muted); }
html[data-theme="dark"] .lb-table td { border-top-color: var(--cl-border); color: #cbd5e6; }
html[data-theme="dark"] .lb-table tr { border-top-color: var(--cl-border); }
html[data-theme="dark"] .lb-table td:nth-child(4),
html[data-theme="dark"] .lb-table td:nth-child(5) { color: var(--cl-muted); }
html[data-theme="dark"] .lb-table tbody tr:hover { background: rgba(255,255,255,.04); }
html[data-theme="dark"] .lb-table tbody tr.lb-row--me { background: rgba(255,200,87,.09); }
html[data-theme="dark"] .lb-rank { color: var(--cl-muted); }
html[data-theme="dark"] .lb-name { color: var(--cl-ink); }
html[data-theme="dark"] .lb-name__badge { background: rgba(47,140,240,.18); }
html[data-theme="dark"] .lb-user__sub { color: #8b97ad; }
html[data-theme="dark"] .lb-score { color: #5fd6a4; }
html[data-theme="dark"] .lb-page-btn { background: var(--cl-white); border-color: var(--cl-border); color: var(--cl-ink); }
html[data-theme="dark"] .lb-page-btn--active { background: var(--cl-blue); border-color: var(--cl-blue); color: #fff; }
html[data-theme="dark"] .lb-name__badge { color: var(--cl-blue-l); }
html[data-theme="dark"] .cl-exam-request .cl-kicker,
html[data-theme="dark"] .cl-exam-request-modal .cl-kicker { color: #ff9c92; background: rgba(244,108,95,.14); }

/* Result detail (/my-results/:id) — scoped under .rd-theme */
html[data-theme="dark"] .rd-theme .rd-stats-bar { background: var(--cl-white); border-color: var(--cl-border); box-shadow: 0 8px 26px rgba(0,0,0,.35); }
html[data-theme="dark"] .rd-theme .rd-stats-bar__item,
html[data-theme="dark"] .rd-theme .rd-stats-bar__progress { border-color: var(--cl-border); }
html[data-theme="dark"] .rd-theme .rd-stats-bar__item:hover { background: rgba(255,255,255,.04); }
html[data-theme="dark"] .rd-theme .rd-stats-bar__val { color: var(--cl-ink); }
html[data-theme="dark"] .rd-theme .rd-stats-bar__lbl { color: var(--cl-muted); }
html[data-theme="dark"] .rd-theme .rd-stats-bar__item--correct .rd-stats-bar__val { color: #34d399; }
html[data-theme="dark"] .rd-theme .rd-stats-bar__item--wrong .rd-stats-bar__val { color: #fbbf24; }
html[data-theme="dark"] .rd-theme .rd-stats-bar__item--skip .rd-stats-bar__val { color: #60a5fa; }
html[data-theme="dark"] .rd-theme .rd-progress { background: #1b2640; }

html[data-theme="dark"] .rd-theme .rd-ftab { background: var(--cl-white); border-color: var(--cl-border); color: var(--cl-muted); box-shadow: none; }
html[data-theme="dark"] .rd-theme .rd-ftab:hover { border-color: var(--cl-blue); color: var(--cl-blue-l); }
html[data-theme="dark"] .rd-theme .rd-ftab--active { background: linear-gradient(135deg, #1d4ed8, #2563eb); border-color: transparent; color: #fff; }
html[data-theme="dark"] .rd-theme .rd-ftab__pill { background: #1b2640; color: var(--cl-muted); }
html[data-theme="dark"] .rd-theme .rd-ftab__pill--wrong { background: rgba(245,158,11,.18); color: #fcd34d; }
html[data-theme="dark"] .rd-theme .rd-ftab__pill--correct { background: rgba(16,185,129,.18); color: #6ee7b7; }
html[data-theme="dark"] .rd-theme .rd-ftab__pill--skip { background: rgba(59,130,246,.2); color: #93c5fd; }
html[data-theme="dark"] .rd-theme .rd-ftab--active .rd-ftab__pill { background: rgba(255,255,255,.22); color: #fff; }

html[data-theme="dark"] .rd-theme .res-qcard { background: var(--cl-white); border-color: var(--cl-border); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
html[data-theme="dark"] .rd-theme .res-qcard:hover { box-shadow: 0 10px 32px rgba(0,0,0,.45); }
html[data-theme="dark"] .rd-theme .res-qcard__head--correct { background: linear-gradient(135deg, rgba(16,185,129,.16), rgba(16,185,129,.06)); border-color: rgba(16,185,129,.35); }
html[data-theme="dark"] .rd-theme .res-qcard__head--wrong { background: linear-gradient(135deg, rgba(245,158,11,.16), rgba(245,158,11,.06)); border-color: rgba(245,158,11,.35); }
html[data-theme="dark"] .rd-theme .res-qcard__head--skipped { background: linear-gradient(135deg, rgba(59,130,246,.16), rgba(99,102,241,.08)); border-color: rgba(59,130,246,.35); }
html[data-theme="dark"] .rd-theme .res-qcard__status--correct { color: #34d399; }
html[data-theme="dark"] .rd-theme .res-qcard__status--wrong { color: #fbbf24; }
html[data-theme="dark"] .rd-theme .res-qcard__status--skipped { color: #60a5fa; }
html[data-theme="dark"] .rd-theme .res-qcard__num { color: var(--cl-muted); }
html[data-theme="dark"] .rd-theme .res-qcard__text { color: var(--cl-ink); }

html[data-theme="dark"] .rd-theme .res-answer { background: rgba(255,255,255,.03); border-color: var(--cl-border); }
html[data-theme="dark"] .rd-theme .res-answer__letter { background: rgba(99,102,241,.2); color: #a5b4fc; }
html[data-theme="dark"] .rd-theme .res-answer__text { color: #b8c3d8; }
html[data-theme="dark"] .rd-theme .res-answer--correct { background: linear-gradient(135deg, rgba(16,185,129,.16), rgba(16,185,129,.06)); border-color: rgba(52,211,153,.5); }
html[data-theme="dark"] .rd-theme .res-answer--correct .res-answer__letter { background: #059669; color: #fff; }
html[data-theme="dark"] .rd-theme .res-answer--correct .res-answer__text { color: #a7f3d0; }
html[data-theme="dark"] .rd-theme .res-answer--correct .res-answer__icon { color: #34d399; }
html[data-theme="dark"] .rd-theme .res-answer--wrong { background: linear-gradient(135deg, rgba(245,158,11,.16), rgba(245,158,11,.06)); border-color: rgba(251,191,36,.5); }
html[data-theme="dark"] .rd-theme .res-answer--wrong .res-answer__letter { background: #d97706; color: #fff; }
html[data-theme="dark"] .rd-theme .res-answer--wrong .res-answer__text { color: #fde68a; }
html[data-theme="dark"] .rd-theme .res-answer--wrong .res-answer__icon { color: #fbbf24; }
html[data-theme="dark"] .rd-theme .rd-answer-note { background: rgba(255,255,255,.04); border-color: var(--cl-border); }
html[data-theme="dark"] .rd-theme .rd-answer-note__item { color: var(--cl-ink); }
html[data-theme="dark"] .rd-theme .rd-answer-note__item--wrong { color: #fcd34d; }
html[data-theme="dark"] .rd-theme .rd-answer-note__item--correct { color: #6ee7b7; }
html[data-theme="dark"] .rd-theme .res-explanation { background: linear-gradient(135deg, rgba(37,99,235,.16), rgba(99,102,241,.08)); border-left-color: #3b82f6; color: var(--cl-ink); }
html[data-theme="dark"] .rd-theme .res-explanation__title { color: #93c5fd; }

/* Exam setup (/exam/:slug) */
html[data-theme="dark"] .es-card { background: var(--cl-white); border-color: var(--cl-border); box-shadow: 0 4px 24px rgba(0,0,0,.35); }
html[data-theme="dark"] .es-card__head { background: rgba(255,255,255,.03); border-bottom-color: var(--cl-border); }
html[data-theme="dark"] .es-card__icon,
html[data-theme="dark"] .es-opt__icon { background: rgba(47,140,240,.16); }
html[data-theme="dark"] .es-cat-banner { background: rgba(47,140,240,.09); border-color: rgba(47,140,240,.3); }
html[data-theme="dark"] .es-cat-item,
html[data-theme="dark"] .es-chip,
html[data-theme="dark"] .es-opt { background: rgba(255,255,255,.04); border-color: var(--cl-border); }
html[data-theme="dark"] .es-cat-item:hover,
html[data-theme="dark"] .es-chip:hover { box-shadow: 0 4px 14px rgba(0,0,0,.35); }
html[data-theme="dark"] .es-cat-item.selected,
html[data-theme="dark"] .es-opt.is-on { background: rgba(47,140,240,.12); box-shadow: 0 0 0 3px rgba(47,140,240,.14); }
html[data-theme="dark"] .es-cat-item__check { background: transparent; border-color: rgba(255,255,255,.28); }
html[data-theme="dark"] .es-chip.selected { color: #fff; }
html[data-theme="dark"] .es-chip.locked:hover { background: rgba(240,165,0,.12); }
html[data-theme="dark"] .es-chip.locked .es-chip__lock { color: #f5be6f; }
html[data-theme="dark"] .es-sw__track { background: rgba(255,255,255,.2); }
html[data-theme="dark"] .es-notice--warn { color: #f5cf85; background: rgba(245,190,111,.12); border-color: rgba(245,190,111,.35); }
html[data-theme="dark"] .es-member-gate { color: #f5cf85; background: rgba(240,165,0,.12); border-color: rgba(240,165,0,.4); }
html[data-theme="dark"] .es-error { color: #ff9c92; background: rgba(244,108,95,.12); border-color: rgba(244,108,95,.35); }
html[data-theme="dark"] .es-payment-gate { background: linear-gradient(135deg, rgba(47,140,240,.08), rgba(143,100,255,.1)); border-color: rgba(47,140,240,.32); }
html[data-theme="dark"] .es-payment-gate__btn--login { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: var(--cl-ink); }
html[data-theme="dark"] .es-payment-gate__btn--login:hover { background: rgba(255,255,255,.14); }
html[data-theme="dark"] .es-resume-banner { background: linear-gradient(135deg, rgba(27,128,118,.16), rgba(143,224,211,.08)); border-color: rgba(60,180,168,.4); }

/* Light page hero (setup/results/etc.) — the --dark / --exams variants are already dark */
html[data-theme="dark"] .cl-page-hero:not(.cl-page-hero--dark):not(.cl-page-hero--exams) {
    background: radial-gradient(circle at 80% 20%, rgba(47,140,240,.14), transparent 30%),
                linear-gradient(180deg, #0c121f 0%, #090e18 100%);
}
/* Kickers: tinted pill on light → lighter text on dark */
html[data-theme="dark"] .cl-kicker { color: #ff9c92; }
html[data-theme="dark"] .cl-kicker--mint { color: #7fe3d3; }
html[data-theme="dark"] .cl-kicker--gold { color: #f5c063; }
html[data-theme="dark"] .cl-kicker--blue { color: var(--cl-blue-l); }
html[data-theme="dark"] .cl-page-hero--dark .cl-kicker--gold { color: #ffd750; }
html[data-theme="dark"] .cl-exams-head .cl-kicker { color: rgba(255,255,255,.85); }
html[data-theme="dark"] .cl-hero .cl-kicker { color: rgba(255,215,80,.92); }

/* Exam runner (/exam-run/:id) — the component ships some dark rules of its own
   (badges, feedback, question map); these cover what it left out. */
html[data-theme="dark"] .cl-exambar { background: rgba(9,14,24,.92); border-bottom-color: rgba(255,255,255,.08); }
html[data-theme="dark"] .cl-exambar__timer { color: #ff9c92; }
html[data-theme="dark"] .er-mobile-finish { color: #fff; }
html[data-theme="dark"] .er-qcard { box-shadow: 0 4px 24px rgba(0,0,0,.35); }
html[data-theme="dark"] .er-qcard__answered { background: rgba(47,140,240,.14); }
html[data-theme="dark"] .er-qcard__foot { box-shadow: 0 -4px 20px rgba(0,0,0,.35); }
html[data-theme="dark"] .er-qcard__text code,
html[data-theme="dark"] .er-feedback__exp code { color: #ff8fc0; }

html[data-theme="dark"] .er-answer { background: rgba(255,255,255,.04); }
html[data-theme="dark"] .er-answer:not(.er-answer--locked):hover { background: rgba(47,140,240,.12); border-color: rgba(47,140,240,.5); }
html[data-theme="dark"] .er-answer--selected { background: rgba(47,140,240,.14); }
html[data-theme="dark"] .er-answer__letter { background: rgba(47,140,240,.18); color: var(--cl-blue-l); }
html[data-theme="dark"] .er-answer--selected .er-answer__letter { background: var(--cl-blue); color: #fff; }
html[data-theme="dark"] .er-answer--correct { border-color: #4caf50 !important; background: rgba(76,175,80,.14) !important; }
html[data-theme="dark"] .er-answer--wrong { border-color: #ef5350 !important; background: rgba(239,83,80,.14) !important; }
html[data-theme="dark"] .er-answer--correct .er-answer__icon { color: #7ee08a; }
html[data-theme="dark"] .er-answer--wrong .er-answer__icon { color: #ff8a80; }

html[data-theme="dark"] .er-choice--selected { background: rgba(47,140,240,.16); }
html[data-theme="dark"] .er-choice--correct { border-color: #4caf50; background: rgba(76,175,80,.14); color: #a5e8ab; }
html[data-theme="dark"] .er-choice--wrong { border-color: #ef5350; background: rgba(239,83,80,.14); color: #ffb4ac; }
html[data-theme="dark"] .er-interactive__select--correct { border-color: #4caf50; color: #a5e8ab; }
html[data-theme="dark"] .er-interactive__select--wrong { border-color: #ef5350; color: #ffb4ac; }
html[data-theme="dark"] .er-interactive__correct { color: #7ee08a; }

html[data-theme="dark"] .er-feedback--correct { border-color: #4caf50; }
html[data-theme="dark"] .er-feedback--wrong { border-color: #ef5350; }
html[data-theme="dark"] .er-vote-btn:hover:not(:disabled) { background: rgba(47,140,240,.14); }
html[data-theme="dark"] .er-vote-done { color: #7ee08a; }
html[data-theme="dark"] .er-vote-guest { background: rgba(47,140,240,.1); border-color: rgba(47,140,240,.3); }
html[data-theme="dark"] .er-btn--ghost:hover { border-color: rgba(47,140,240,.55); }

html[data-theme="dark"] .er-navstrip { box-shadow: 0 4px 20px rgba(0,0,0,.4); }
html[data-theme="dark"] .er-navstrip__prog { background: rgba(47,140,240,.08); }
html[data-theme="dark"] .er-navstrip__prog-track { background: rgba(255,255,255,.1); }
html[data-theme="dark"] .er-qmap-btn:hover { background: rgba(47,140,240,.14); }
html[data-theme="dark"] .er-legend-dot--done { background: #4f9d64; }
html[data-theme="dark"] .er-legend-dot--wrong { background: #c67373; }
html[data-theme="dark"] .er-modal__backdrop { background: rgba(0,0,0,.65); }
html[data-theme="dark"] .er-modal__box { box-shadow: 0 32px 90px rgba(0,0,0,.6); }
html[data-theme="dark"] #er-nav { box-shadow: 0 22px 64px rgba(0,0,0,.55); }
html[data-theme="dark"] .er-nav-backdrop { background: rgba(0,0,0,.6); }

/* Exam result (/exam-result/:id). The .rd-theme rules above (result detail) are
   more specific and win where both apply. */
html[data-theme="dark"] .res-hero { box-shadow: 0 8px 32px rgba(0,0,0,.4); }
html[data-theme="dark"] .res-ring__track { stroke: rgba(255,255,255,.1); }
html[data-theme="dark"] .res-ring__fill--pass { stroke: #4caf50; }
html[data-theme="dark"] .res-ring__fill--fail { stroke: #ef5350; }
html[data-theme="dark"] .res-ring__pct--pass { color: #7ee08a; }
html[data-theme="dark"] .res-ring__pct--fail { color: #ff8a80; }
html[data-theme="dark"] .res-status--pass { background: rgba(76,175,80,.16); color: #9ee0a1; }
html[data-theme="dark"] .res-status--fail { background: rgba(239,83,80,.16); color: #ffb4ac; }
html[data-theme="dark"] .res-stat { background: rgba(255,255,255,.04); }
html[data-theme="dark"] .res-stat--correct .res-stat__val { color: #7ee08a; }
html[data-theme="dark"] .res-stat--wrong .res-stat__val { color: #ff8a80; }
html[data-theme="dark"] .res-stat--skipped .res-stat__val { color: #f5be6f; }
html[data-theme="dark"] .res-guest-notice { color: #f5cf85; }
html[data-theme="dark"] .res-review-toggle { box-shadow: 0 4px 16px rgba(0,0,0,.3); }
html[data-theme="dark"] .res-review-toggle:hover { box-shadow: 0 8px 24px rgba(0,0,0,.45); }
html[data-theme="dark"] .res-review-toggle__icon { background: rgba(47,140,240,.16); }
html[data-theme="dark"] .res-qcard { box-shadow: 0 4px 16px rgba(0,0,0,.3); }
html[data-theme="dark"] .res-qcard__head--correct { background: rgba(76,175,80,.12); border-color: rgba(76,175,80,.35); }
html[data-theme="dark"] .res-qcard__head--wrong { background: rgba(239,83,80,.12); border-color: rgba(239,83,80,.35); }
html[data-theme="dark"] .res-qcard__head--skipped { background: rgba(245,190,111,.1); border-color: rgba(245,190,111,.35); }
html[data-theme="dark"] .res-qcard__status--correct { color: #9ee0a1; }
html[data-theme="dark"] .res-qcard__status--wrong { color: #ffb4ac; }
html[data-theme="dark"] .res-qcard__status--skipped { color: #f5cf85; }
html[data-theme="dark"] .res-answer { background: rgba(255,255,255,.04); }
html[data-theme="dark"] .res-answer--correct { border-color: #4caf50; background: rgba(76,175,80,.13); }
html[data-theme="dark"] .res-answer--wrong { border-color: #ef5350; background: rgba(239,83,80,.13); }
html[data-theme="dark"] .res-answer__letter { background: rgba(47,140,240,.18); color: var(--cl-blue-l); }
html[data-theme="dark"] .res-answer--correct .res-answer__letter { background: #388e3c; color: #fff; }
html[data-theme="dark"] .res-answer--wrong .res-answer__letter { background: #d32f2f; color: #fff; }
html[data-theme="dark"] .res-answer--correct .res-answer__icon { color: #7ee08a; }
html[data-theme="dark"] .res-answer--wrong .res-answer__icon { color: #ff8a80; }
html[data-theme="dark"] .res-explanation { background: rgba(47,140,240,.1); }
html[data-theme="dark"] .res-votebar { background: rgba(255,255,255,.1); }
html[data-theme="dark"] .res-votebar__fill { background: rgba(47,140,240,.55); }

/* Buttons whose text colour was hard-coded for a light page */
html[data-theme="dark"] .cl-btn--soft { color: #ff9c92; }
html[data-theme="dark"] .cl-btn--primary { background: linear-gradient(135deg, #1d68c2, #2f8cf0 70%, #4da3ff); }

/* ─── 6. One dark family ────────────────────────────────────────────────────
   Hero, stats, topbar, footer, CTA, page heroes, leaderboard stage and result
   hero were saturated navy (#031f42 …). Recoloured to the same near-black
   family as the page, matching /signin, so nothing reads as a different theme. */
html[data-theme="dark"] .cl-topbar { background: linear-gradient(90deg, #111b32 0%, #182645 50%, #111b32 100%); border-bottom: 1px solid rgba(255, 255, 255, .06); }
html[data-theme="dark"] .cl-hero,
html[data-theme="dark"] .cl-home .cl-hero { background: linear-gradient(135deg, #0a101c 0%, #0f1830 55%, #0a101c 100%); }
html[data-theme="dark"] .cl-hero::after { background: radial-gradient(circle, rgba(47,140,240,.16) 0%, transparent 68%); }
html[data-theme="dark"] .cl-stats-bar,
html[data-theme="dark"] .cl-home .cl-stats-bar { background: #0c1322 !important; }
html[data-theme="dark"] .cl-stats-bar::after { background: radial-gradient(circle at 50% 0, rgba(47,140,240,.1), transparent 48%); }
html[data-theme="dark"] .cl-footer { background: #070b13; }
html[data-theme="dark"] .cl-footer::after { background: radial-gradient(circle, rgba(47,140,240,.12) 0%, rgba(47,140,240,0) 72%); }
html[data-theme="dark"] .cl-exams-head { background: linear-gradient(135deg, var(--cl-dark) 0%, var(--cl-dark-2) 60%, #141d33 100%); }
html[data-theme="dark"] .cl-exams-head::before { background: radial-gradient(circle at 80% 50%, rgba(47,140,240,.12), transparent 40%), radial-gradient(circle at 10% 80%, rgba(143,224,211,.06), transparent 30%); }
html[data-theme="dark"] .cl-account-hero::before { background: radial-gradient(ellipse at 75% 50%, rgba(47,140,240,.1) 0%, transparent 65%); }
html[data-theme="dark"] .rd-theme .rd-page-hero { background: linear-gradient(140deg, #070b13 0%, #0c1322 40%, #0f1830 72%, #141d33 100%); }
html[data-theme="dark"] .lb-stage { background: radial-gradient(circle at 50% -20%, rgba(47,140,240,.3), transparent 45%), linear-gradient(145deg, #0a101c, #101a30 60%, #0a101c); box-shadow: 0 18px 45px rgba(0,0,0,.4); }
html[data-theme="dark"] .er-navstrip__head { background: #141d33; }

/* ─── 7. Blog (list, category, post) ────────────────────────────────────── */
html[data-theme="dark"] .cl-blog-card,
html[data-theme="dark"] .cl-article-card,
html[data-theme="dark"] .cl-post-row,
html[data-theme="dark"] .cl-sidebar-widget,
html[data-theme="dark"] .cl-cat-page .cl-sidebar-widget,
html[data-theme="dark"] .cl-post-sidebar .cl-sidebar-widget,
html[data-theme="dark"] .cl-toc,
html[data-theme="dark"] .cl-post-sidebar .cl-toc,
html[data-theme="dark"] .cl-blog-tech-toolbar,
html[data-theme="dark"] .cl-pagination__btn,
html[data-theme="dark"] .cl-post-card { background: var(--cl-white); }
html[data-theme="dark"] .cl-post-card { box-shadow: 0 2px 24px rgba(0,0,0,.35); }
html[data-theme="dark"] .cl-post-page { background: var(--cl-bg); }
html[data-theme="dark"] .cl-blog-card__thumb,
html[data-theme="dark"] .cl-article-card__thumb,
html[data-theme="dark"] .cl-post-row__thumb,
html[data-theme="dark"] .cl-sidebar-recent-item__thumb { background: linear-gradient(135deg, #141d31, #0f1626); }
html[data-theme="dark"] .cl-blog-card__thumb-placeholder,
html[data-theme="dark"] .cl-article-card__thumb-placeholder,
html[data-theme="dark"] .cl-post-row__thumb-placeholder,
html[data-theme="dark"] .cl-sidebar-recent-item__thumb-placeholder { color: rgba(109,180,255,.22); }
html[data-theme="dark"] .cl-blog-hero { background: radial-gradient(circle at 80% 10%, rgba(244,108,95,.1), transparent 30%), radial-gradient(circle at 10% 80%, rgba(47,140,240,.1), transparent 30%), linear-gradient(180deg, #0f1626 0%, var(--cl-bg) 100%); }
html[data-theme="dark"] .cl-article-hero { background: radial-gradient(circle at 80% 10%, rgba(244,108,95,.08), transparent 30%), linear-gradient(180deg, #0f1626 0%, var(--cl-bg) 100%); }
html[data-theme="dark"] .cl-blog-cat-body,
html[data-theme="dark"] .cl-blog-tech-stream { background: linear-gradient(180deg, #0b1120 0%, #090e18 100%); }
html[data-theme="dark"] .cl-blog-hero-v2 { background: linear-gradient(135deg, var(--cl-dark) 0%, var(--cl-dark-2) 60%, #141d33 100%); }
html[data-theme="dark"] .cl-blog-hero-v2::before { background: radial-gradient(circle at 85% 20%, rgba(47,140,240,.12), transparent 40%), radial-gradient(circle at 8% 80%, rgba(244,108,95,.07), transparent 35%); }
html[data-theme="dark"] .cl-blog-tech-hero { background: radial-gradient(circle at 12% 20%, rgba(47,140,240,.14), transparent 26%), radial-gradient(circle at 84% 18%, rgba(245,190,111,.08), transparent 24%), linear-gradient(135deg, #0a101c 0%, #0f1830 55%, #0a101c 100%); }
html[data-theme="dark"] .cl-blog-tech-panel { box-shadow: 0 18px 44px rgba(0,0,0,.4); }
html[data-theme="dark"] .cl-blog-tech-strip__inner { background: linear-gradient(135deg, rgba(15,22,38,.96) 0%, #0c1322 100%); border-color: var(--cl-border); box-shadow: 0 20px 40px rgba(0,0,0,.35); }
html[data-theme="dark"] .cl-blog-tech-chip--light { background: rgba(255,255,255,.1); color: var(--cl-ink); }
html[data-theme="dark"] .cl-blog-layout--tech .cl-featured-post { box-shadow: 0 18px 40px rgba(0,0,0,.4); }
html[data-theme="dark"] .cl-blog-cat-body .cl-blog-card,
html[data-theme="dark"] .cl-blog-cat-body .cl-sidebar-widget { box-shadow: 0 10px 28px rgba(0,0,0,.3); }
html[data-theme="dark"] .cl-spotlight__overlay { background: linear-gradient(to top, rgba(7,11,19,.97) 0%, rgba(7,11,19,.66) 48%, rgba(7,11,19,.2) 100%); }
html[data-theme="dark"] .cl-sidebar-cat:hover { background: rgba(255,255,255,.06); }
html[data-theme="dark"] .cl-sidebar-cat--active { background: rgba(47,140,240,.16); }
html[data-theme="dark"] .cl-sidebar-search input:focus { box-shadow: 0 0 0 3px rgba(47,140,240,.25); }
html[data-theme="dark"] .cl-article-hero__category,
html[data-theme="dark"] .cl-featured-post__category { background: rgba(47,140,240,.18); }
html[data-theme="dark"] .cl-article-hero__category:hover { background: rgba(47,140,240,.3); }
html[data-theme="dark"] .cl-featured-post { background: var(--cl-white); }
html[data-theme="dark"] .cl-pagination__btn:hover { background: rgba(47,140,240,.14); border-color: rgba(47,140,240,.4); }
html[data-theme="dark"] .cl-breadcrumb__sep,
html[data-theme="dark"] .cl-post-meta__sep { color: rgba(255,255,255,.25); }
html[data-theme="dark"] .cl-toc__link:hover { background: rgba(255,255,255,.06); }
html[data-theme="dark"] .cl-toc__link--active { background: rgba(47,140,240,.16); }
html[data-theme="dark"] .cl-author-box { background: linear-gradient(135deg, #131c33 0%, var(--cl-white) 100%); }
html[data-theme="dark"] .cl-share__btn--copy:hover { background: var(--cl-bg-off); }
html[data-theme="dark"] .cl-share__btn--copy.is-copied { color: #6fd6c8; }
html[data-theme="dark"] .cl-share__btn--x { background: #1c1f26; }
html[data-theme="dark"] .cl-prose blockquote { background: rgba(47,140,240,.08); }
html[data-theme="dark"] .cl-prose code { background: rgba(47,140,240,.14); }
html[data-theme="dark"] .cl-prose thead tr { background: rgba(47,140,240,.12); }

/* ─── 8. Content pages: PMP strategy (/chien-luoc) and PMI mindset ───────────
   Both pages carry their own token set on the page root; remap it, then fix
   the hard-coded pale surfaces. */
html[data-theme="dark"] .strategy-page {
    --strategy-blue:        #3b82f0;
    --strategy-blue-bright: #5a9bff;
    --strategy-blue-light:  #8db8ff;
    --strategy-orange-soft: rgba(254,129,21,.14);
}
html[data-theme="dark"] .pm-page {
    --pm-heading:      #e7ebf3;
    --pm-heading-soft: #6db4ff;
}
html[data-theme="dark"] .strategy-page,
html[data-theme="dark"] .pm-page { background: var(--cl-bg); }
html[data-theme="dark"] .strategy-nav,
html[data-theme="dark"] .pm-jump { background: rgba(9,14,24,.92); border-bottom-color: var(--cl-border); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
html[data-theme="dark"] .strategy-nav a:hover,
html[data-theme="dark"] .pm-jump a:hover { background: rgba(47,140,240,.14); }
html[data-theme="dark"] .strategy-section--soft,
html[data-theme="dark"] .pm-section--soft,
html[data-theme="dark"] .exam-journey { background: #0c1322; }
html[data-theme="dark"] .strategy-hero { background: radial-gradient(circle at 12% 80%, rgba(254,129,21,.12), transparent 30%), radial-gradient(circle at 85% 20%, rgba(50,127,247,.2), transparent 34%), #0a101c; }
html[data-theme="dark"] .pm-hero { background: radial-gradient(circle at 80% 20%, rgba(77,163,255,.14), transparent 28%), radial-gradient(circle at 12% 90%, rgba(143,224,211,.08), transparent 30%), #0a101c; }
html[data-theme="dark"] .pm-section--future { background: linear-gradient(135deg, #0a101c, #141d33); }

/* Cards */
html[data-theme="dark"] .strategy-stats article,
html[data-theme="dark"] .strategy-domain-chart,
html[data-theme="dark"] .strategy-pace-card,
html[data-theme="dark"] .strategy-method article,
html[data-theme="dark"] .strategy-traps article,
html[data-theme="dark"] .exam-stage,
html[data-theme="dark"] .exam-blueprint__facts article,
html[data-theme="dark"] .pm-principle,
html[data-theme="dark"] .pm-context-card,
html[data-theme="dark"] .pm-signal-card,
html[data-theme="dark"] .pm-scenario,
html[data-theme="dark"] .pm-official-principles article,
html[data-theme="dark"] .pm-decision-list article { background: var(--cl-white); border-color: var(--cl-border); box-shadow: 0 10px 28px rgba(0,0,0,.3); }
html[data-theme="dark"] .pm-official-principles article:hover,
html[data-theme="dark"] .pm-decision-list article:hover,
html[data-theme="dark"] .pm-principle:hover { background: #131c33; border-color: rgba(90,155,255,.4); box-shadow: 0 16px 36px rgba(0,0,0,.45); }
html[data-theme="dark"] .strategy-domain-row > div { background: #1b2640; }
html[data-theme="dark"] .exam-stop { border-color: #0c1322; }

/* Callouts / notes */
html[data-theme="dark"] .strategy-callout { color: #ffb877; background: rgba(254,129,21,.1); border-color: rgba(254,129,21,.3); }
html[data-theme="dark"] .strategy-break { color: #ffb877; }
html[data-theme="dark"] .exam-journey__note { color: #ffb877; background: rgba(254,129,21,.1); }
html[data-theme="dark"] .exam-journey__top > span { color: #ffb877; }
html[data-theme="dark"] .pm-note--blue { color: #9cc4ff; background: rgba(47,140,240,.12); border-color: rgba(47,140,240,.3); }
html[data-theme="dark"] .pm-role-note { color: #f5cf85; background: rgba(245,190,111,.1); border-color: rgba(245,190,111,.3); }
html[data-theme="dark"] .pm-role-note i { color: #f5be6f; }
html[data-theme="dark"] .exam-blueprint__icon { background: rgba(90,155,255,.14); }
html[data-theme="dark"] .exam-blueprint__icon--orange { background: rgba(254,129,21,.16); }
html[data-theme="dark"] .exam-stage > span { background: rgba(90,155,255,.14); }

/* Accent text that was tuned for white */
html[data-theme="dark"] .pm-principle--mint > span,
html[data-theme="dark"] .pm-principle--mint small,
html[data-theme="dark"] .pm-context-card--mint .pm-context-card__icon,
html[data-theme="dark"] .pm-context-card--mint li:before,
html[data-theme="dark"] .pm-signal-card--good header > span,
html[data-theme="dark"] .pm-chips span,
html[data-theme="dark"] .pm-answer--right { color: #6fd6c8; }
html[data-theme="dark"] .pm-principle--gold > span,
html[data-theme="dark"] .pm-principle--gold small,
html[data-theme="dark"] .pm-context-card--gold .pm-context-card__icon,
html[data-theme="dark"] .pm-context-card--gold li:before { color: #f0b84f; }
html[data-theme="dark"] .pm-principle--violet > span { color: #b7a3ff; background: rgba(114,87,200,.2); }
html[data-theme="dark"] .pm-principle--violet small { color: #b7a3ff; }
html[data-theme="dark"] .pm-signal-card--warn .pm-chips span { color: #ff9c92; }
html[data-theme="dark"] .pm-official-principles small { color: #8db8ff; }
html[data-theme="dark"] .pm-official-principles article:nth-child(even) small { color: #ff9d52; }
html[data-theme="dark"] .pm-official-principles h3,
html[data-theme="dark"] .pm-decision-list h3 { color: var(--cl-ink); }
html[data-theme="dark"] .pm-official-principles article > b { color: #3a4761; }
html[data-theme="dark"] .pm-decision-list article > span { color: #4a5873; }
html[data-theme="dark"] .pm-decision-list article > i { color: #8db8ff; background: rgba(90,155,255,.14); }
html[data-theme="dark"] .pm-decision-list article:nth-child(even) > i { color: #ff9d52; background: rgba(254,129,21,.14); }
html[data-theme="dark"] .pm-decision-compass { background: radial-gradient(circle at 85% 10%, rgba(254,129,21,.2), transparent 30%), linear-gradient(145deg, #0a101c, #172a52); box-shadow: 0 20px 46px rgba(0,0,0,.4); }

/* Accent cards: deeper blue so white text keeps contrast and they sit with the rest */
html[data-theme="dark"] .strategy-break-map__segment--case,
html[data-theme="dark"] .strategy-pace-card--primary,
html[data-theme="dark"] .exam-stage--case { background: linear-gradient(140deg, #14294f, #2251a6); }
html[data-theme="dark"] .exam-blueprint__total { background: linear-gradient(135deg, #0a101c, #1c4391); box-shadow: 0 20px 48px rgba(0,0,0,.4); }

/* Static CMS pages (/page/:slug) */
html[data-theme="dark"] .cl-static-page__hero { background: radial-gradient(circle at 80% 20%, rgba(47,140,240,.12), transparent 30%), linear-gradient(180deg, #0f1626 0%, var(--cl-bg) 100%); }

/* Exam setup: selected/checked states must out-rank the dark surface rules above
   (same selector + .selected/.is-on would lose on specificity). */
html[data-theme="dark"] .es-chip.selected {
    background: var(--cl-blue); border-color: var(--cl-blue-l); color: #fff;
    box-shadow: 0 0 0 3px rgba(47,140,240,.3), 0 6px 18px rgba(0,0,0,.4);
}
html[data-theme="dark"] .es-chip.selected:hover { box-shadow: 0 0 0 3px rgba(47,140,240,.4), 0 6px 18px rgba(0,0,0,.45); }
html[data-theme="dark"] .es-cat-item.selected,
html[data-theme="dark"] .es-opt.is-on { border-color: var(--cl-blue); }
html[data-theme="dark"] .es-chip:has(input:focus-visible),
html[data-theme="dark"] .es-opt:has(input:focus-visible),
html[data-theme="dark"] .es-cat-item:has(input:focus-visible) { outline-color: rgba(109,180,255,.8); }
