/* ═══════════════════════════════════════════════════════════════════════════
   MathExam Pro — site-wide dark mode
   ═══════════════════════════════════════════════════════════════════════════

   Loaded on EVERY front-end page, not just the plugin's own, because the class
   has to reach the theme header, the footer and Elementor content too.

   Two rules govern everything here:

   1. Never invert. A filter-based dark mode wrecks photographs, logos and
      screenshots, and this site is full of question figures.
   2. Clear the surfaces, then set the ink. Wrapper elements are made
      transparent so the dark page shows through, and only real surfaces —
      cards, panels, inputs — are given a colour of their own. That is what
      stops the "dark text on a dark background" problem: the text keeps its
      inherited colour and the thing behind it is what changes.

   Anything the plugin renders is fully under our control and handled properly.
   Theme and Elementor content is handled by the baseline below, which covers
   the common shapes; the contrast audit is what finds the rest.
   ─────────────────────────────────────────────────────────────────────────── */

html.mep-dark {
    /* One palette. Everything below refers to these, so a change here moves
       the whole site and nothing drifts out of step. */
    --mepd-bg:        #0c1219;   /* page */
    --mepd-surface:   #141d27;   /* cards, panels */
    --mepd-surface-2: #101822;   /* headers within a card, inset areas */
    --mepd-raised:    #1c2733;   /* chips, pills, hover */
    --mepd-border:    #243141;
    --mepd-border-2:  #2b3948;
    --mepd-text:      #f4f8fc;   /* body copy — near white, so it reads at a glance */
    --mepd-text-2:    #dbe5ef;   /* secondary */
    --mepd-muted:     #adbccb;   /* meta, captions */
    --mepd-faint:     #8b9aab;
    --mepd-link:      #7ab8ff;
    --mepd-accent:    #48d6b0;

    background: var(--mepd-bg) !important;
    color: var(--mepd-text) !important;
    color-scheme: dark;          /* native scrollbars, form controls, caret */
}

html.mep-dark body {
    background: var(--mepd-bg) !important;
    color: var(--mepd-text) !important;
}

/* ── Clear the surfaces ──────────────────────────────────────────────────────
   Layout wrappers carry white backgrounds from the theme and from Elementor.
   Making them transparent lets the dark page through without touching a single
   colour that means something. Deliberately does NOT include elements whose
   background is the point — buttons, badges, images. */
html.mep-dark :is(
    #page, #content, #main, main, article, aside, section, header, footer,
    .site, .site-content, .site-main, .content-area, .entry-content,
    .elementor, .elementor-section, .elementor-container, .elementor-column,
    .elementor-widget-wrap, .elementor-widget-container, .e-con, .e-con-inner,
    .elementor-location-header, .elementor-location-footer,
    .woocommerce, .woocommerce-page, .tutor-wrap, .tutor-container
) {
    background-color: transparent !important;
    border-color: var(--mepd-border) !important;
}

/* The header and footer are surfaces in their own right — transparent would
   let content scroll under them illegibly. */
html.mep-dark :is(.elementor-location-header, .elementor-location-footer, .site-header, .site-footer) {
    background-color: var(--mepd-bg) !important;
}

/* ── Navigation ──────────────────────────────────────────────────────────────
   The theme paints its menu a dark grey that is invisible on a dark bar. Menu
   links are the one place a blanket colour rule is right: every item is the
   same kind of thing, and the active item is marked by more than its colour. */
html.mep-dark :is(
    .elementor-nav-menu a, .elementor-nav-menu a:visited,
    .menu-item > a, .sub-menu a, nav a, .elementor-item
) {
    color: var(--mepd-text) !important;
}
html.mep-dark :is(.elementor-nav-menu a:hover, .menu-item > a:hover, .elementor-item:hover) {
    color: #fff !important;
}
/* Keep the current page marked out rather than levelling every item. */
html.mep-dark :is(.elementor-item-active, .current-menu-item > a) {
    color: var(--mepd-accent) !important;
}
html.mep-dark :is(.sub-menu, .elementor-nav-menu--dropdown) {
    background-color: var(--mepd-surface) !important;
    border-color: var(--mepd-border) !important;
}
/* The top contact strip and anything else the theme paints light. */
html.mep-dark :is(.elementor-widget-text-editor a, .elementor-icon-list-text, .elementor-icon-list-item a) {
    color: var(--mepd-text-2) !important;
}

/* A one-colour logo drawn in dark ink disappears on a dark bar. Flattening it
   to white keeps the shape exactly and only changes the ink — which is right
   for a monochrome mark and wrong for a photographic one, so it is scoped to
   the header rather than applied to every image. */
/* Matched by the logo's own filename, so it is flattened wherever it appears —
   the theme header, and the Tutor dashboard sidebar, which is a separate image
   element the header selectors never reached. A real course thumbnail is a
   different file and is left alone. */
html.mep-dark img[src*="site_logo"],
html.mep-dark img[src*="cropped-site_logo"],
html.mep-dark .tutor-dashboard-sidebar-logo img,
html.mep-dark :is(.elementor-location-header, .site-header) :is(.elementor-widget-image img, .custom-logo, .site-logo img) {
    filter: brightness(0) invert(1);
}

/* Breadcrumb bands and other light strips the theme lays across the page. */
html.mep-dark :is(.elementor-widget-breadcrumbs, .breadcrumbs, .woocommerce-breadcrumb, .page-header) {
    background: var(--mepd-surface-2) !important;
    background-image: none !important;
    color: var(--mepd-text-2) !important;
}
html.mep-dark :is(.elementor-widget-breadcrumbs a, .breadcrumbs a, .woocommerce-breadcrumb a) {
    color: var(--mepd-link) !important;
}
/* Elementor sections carrying a light gradient as decoration. The gradient is
   on the section itself, so transparency alone does not remove it. */
html.mep-dark .elementor-section[style*="gradient"],
html.mep-dark .e-con[style*="gradient"] { background-image: none !important; }

/* ── Course cards (Tutor LMS) ────────────────────────────────────────────────
   These are real surfaces with their own light background, so they need a dark
   one rather than transparency, and their titles need ink that reads on it. */
html.mep-dark :is(
    .tutor-card, .tutor-course-card, .tutor-course-listing .tutor-card,
    .tutor-card-body, .tutor-card-footer
) {
    background-color: var(--mepd-surface) !important;
    border-color: var(--mepd-border) !important;
}
html.mep-dark :is(.tutor-card-title, .tutor-card-title a, .tutor-course-name a) {
    color: var(--mepd-text) !important;
}
html.mep-dark :is(.tutor-meta, .tutor-meta-value, .tutor-card-footer *) {
    color: var(--mepd-muted) !important;
}

/* ── Ink ─────────────────────────────────────────────────────────────────────
   Headings and body copy only. Not a blanket rule on every element: that is
   what turns coloured buttons and status badges into unreadable mush. */
html.mep-dark :is(h1, h2, h3, h4, h5, h6) { color: var(--mepd-text) !important; }
html.mep-dark :is(p, li, dd, dt, blockquote, figcaption, label, small, th, td) {
    color: var(--mepd-text-2);
}
/* Links, but never links that are buttons. A blanket rule here painted the
   teal "Dashboard" button and the trophy link pale blue on their own coloured
   backgrounds — a button carries its own ink and must be left alone. */
html.mep-dark a:not([class*="btn"]):not([class*="button"]):not(.elementor-button):not(.mep-lb-link):not(.mep-start-link):not(.mep-review-link-btn):not(.mep-bk-go):not(.mep-bk-review) {
    color: var(--mepd-link);
}
html.mep-dark :is(hr) { border-color: var(--mepd-border) !important; }

/* Elementor writes colours inline on its text widgets, which no ordinary rule
   can beat. These are scoped to text widgets so buttons and icons are spared. */
html.mep-dark :is(
    .elementor-widget-text-editor, .elementor-widget-heading,
    .elementor-widget-text-editor *, .elementor-widget-heading *
) {
    color: var(--mepd-text) !important;
}

/* ── Real surfaces ───────────────────────────────────────────────────────── */
html.mep-dark :is(
    .card, .panel, .widget, .entry, .post,
    .elementor-widget-tabs, .elementor-tab-content,
    .woocommerce .cart_totals, .woocommerce-checkout-review-order,
    .tutor-card, .tutor-course-card
) {
    background-color: var(--mepd-surface) !important;
    border-color: var(--mepd-border) !important;
}

/* ── Form controls ───────────────────────────────────────────────────────── */
html.mep-dark :is(input, textarea, select) {
    background-color: var(--mepd-surface) !important;
    color: var(--mepd-text) !important;
    border-color: var(--mepd-border-2) !important;
}
html.mep-dark :is(input, textarea)::placeholder { color: var(--mepd-faint) !important; }

/* ── Tables ──────────────────────────────────────────────────────────────── */
html.mep-dark :is(table) { background-color: transparent !important; }
html.mep-dark :is(thead th) { color: var(--mepd-text) !important; }
html.mep-dark :is(td, th) { border-color: var(--mepd-border) !important; }

/* Images that are really line art on white — question figures, mostly — keep
   their own background so they do not become a glowing white slab. Slightly
   dimmed rather than inverted, so the diagram is still the diagram. */
html.mep-dark :is(.mep-question-image img, .mep-fig img) {
    filter: brightness(.92);
    background: #fff;
    border-radius: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   The plugin's own surfaces
   ═══════════════════════════════════════════════════════════════════════════
   These carry the existing body.mep-dark-page work forward: the same rules now
   apply under the site-wide class too, so the exam page keeps behaving exactly
   as it did while every other plugin screen joins it. */

html.mep-dark :is(.mep-list-container, .mep-container, .mep-qb, .mep-prog, .mep-bk-chapters) {
    background: transparent !important;
    color: var(--mepd-text) !important;
}

/* Cards and panels across the plugin */
html.mep-dark :is(
    .mep-table-wrap, .mep-exams-table, .mep-start-card, .mep-history-card,
    .mep-report, .mep-prog-card, .mep-pred, .mep-coh, .mep-qb-pred,
    .mep-bk-card, .mep-bk-ch, .mep-qb-subj, .mep-rev-hero, .mep-sec, .mep-ae
) {
    background-color: var(--mepd-surface) !important;
    border-color: var(--mepd-border) !important;
    color: var(--mepd-text) !important;
}

html.mep-dark :is(
    .mep-td-title strong, .mep-bk-chtitle, .mep-bk-cardtitle, .mep-qb-subj-name,
    .mep-pred-total, .mep-coh-name, .mep-prog-h, .mep-report-title
) { color: var(--mepd-text) !important; }

html.mep-dark :is(
    .mep-td-desc, .mep-bk-chmeta, .mep-bk-cardmeta, .mep-qb-subj-blurb,
    .mep-pred-note, .mep-coh-sub, .mep-coh-note, .mep-td-len, .mep-not-taken,
    .mep-qb-subj-lbl, .mep-pred-lbl, .mep-coh-lbl, .mep-history-date
) { color: var(--mepd-muted) !important; }

/* Rows. The theme stripes tables with a light nth-child rule of its own, which
   is what produced alternating white bands down the exam list — the table was
   dark and every other ROW was not. Rows are cleared explicitly, cells too,
   because the stripe can sit on either. */
html.mep-dark :is(.mep-exams-table, .mep-lbnew) tbody tr,
html.mep-dark :is(.mep-exams-table, .mep-lbnew) tbody tr:nth-child(even),
html.mep-dark :is(.mep-exams-table, .mep-lbnew) tbody tr:nth-child(odd),
html.mep-dark :is(.mep-exams-table, .mep-lbnew) tbody td,
html.mep-dark :is(.mep-exams-table, .mep-lbnew) tbody th {
    background-color: transparent !important;
    color: var(--mepd-text-2) !important;
}
html.mep-dark :is(.mep-exams-table, .mep-lbnew) tbody tr { border-bottom-color: var(--mepd-border) !important; }
html.mep-dark :is(.mep-exams-table, .mep-lbnew) tbody tr:hover,
html.mep-dark :is(.mep-exams-table, .mep-lbnew) tbody tr:hover td {
    background-color: var(--mepd-raised) !important;
}
html.mep-dark .mep-year-row,
html.mep-dark .mep-year-row td { background-color: var(--mepd-surface-2) !important; }
html.mep-dark .mep-year-label { color: var(--mepd-text) !important; }
html.mep-dark .mep-year-count { background-color: var(--mepd-raised) !important; color: var(--mepd-text-2) !important; }
html.mep-dark .mep-row-active,
html.mep-dark .mep-row-active td { background-color: var(--mepd-surface-2) !important; }

/* Inset areas inside cards */
html.mep-dark :is(.mep-pred-sec, .mep-qb-pred-sec, .mep-bk-progbar, .mep-coh-item) {
    background-color: var(--mepd-surface-2) !important;
    border-color: var(--mepd-border) !important;
}
html.mep-dark .mep-coh-item { background-color: transparent !important; border-top-color: var(--mepd-border) !important; }

/* The exam list header bar is already dark navy — it only needs its border to
   stop glowing against a dark page. */
html.mep-dark .mep-exams-table thead th { border-bottom-color: var(--mepd-border) !important; }

/* Tabs */
html.mep-dark .mep-tab { background-color: var(--mepd-surface-2) !important; color: var(--mepd-muted) !important; }
html.mep-dark .mep-tab-active { background-color: var(--mepd-surface) !important; color: var(--mepd-text) !important; border-color: var(--mepd-border) !important; }
html.mep-dark .mep-tabs-wrap { border-bottom-color: var(--mepd-border) !important; }
html.mep-dark .mep-subtabs-wrap { background-color: transparent !important; border-color: var(--mepd-border) !important; }
html.mep-dark .mep-subtab { background-color: var(--mepd-surface) !important; color: var(--mepd-text-2) !important; border-color: var(--mepd-border-2) !important; }

/* ── Question Bank ───────────────────────────────────────────────────────────
   Enumerated from the rendered page rather than guessed: every class inside
   #mep-qb whose text was too dark to read on the dark page. */
html.mep-dark :is(
    .mep-qb-title, .mep-qb-domain, .mep-qb-sklabel, .mep-qb-allh,
    .mep-qb-todaylbl, .mep-qb-ringnum, .mep-qb-segbtn
) { color: var(--mepd-text) !important; }
html.mep-dark :is(
    .mep-qb-exitnav, .mep-qb-todaysub, .mep-qb-alls, .mep-qb-acc
) { color: var(--mepd-muted) !important; }
html.mep-dark :is(.mep-qb-segbtn, .mep-qb-seg) {
    background-color: var(--mepd-surface-2) !important;
    border-color: var(--mepd-border) !important;
}
html.mep-dark .mep-qb-segbtn.active { background-color: var(--mepd-raised) !important; }

/* ── The answer choices (Question Bank solver + bank review) ──────────────────
   The option text is a dark navy set on .mep-qb-opt and inherited by the maths
   inside it, so the whole choice reads faint on the dark card. The normalizer
   cannot reach maths rendered into nested MathJax spans, so these are stated
   precisely. The .ok / .bad / .sel states keep their meaning — green, red,
   blue — as dark tints. */
html.mep-dark :is(.mep-qb-opt, .mep-rev-opt) {
    background-color: var(--mepd-surface) !important;
    border-color: var(--mepd-border) !important;
    color: var(--mepd-text) !important;
}
html.mep-dark :is(.mep-qb-opt, .mep-rev-opt) :is(.mep-qb-optt, .mep-qb-optl, .mep-rev-optt, .mep-rev-optltr, mjx-container, .MathJax) {
    color: var(--mepd-text) !important;
}
html.mep-dark :is(.mep-qb-opt:hover, .mep-rev-opt:hover) { background-color: var(--mepd-raised) !important; border-color: var(--mepd-border-2) !important; }
html.mep-dark :is(.mep-qb-opt.sel, .mep-rev-opt.sel) { border-color: #3d8bfd !important; background-color: var(--mepd-surface-2) !important; }
html.mep-dark .mep-qb-opt.ok  { background-color: #12261b !important; border-color: #1f7a44 !important; }
html.mep-dark .mep-qb-opt.ok  :is(.mep-qb-optt, mjx-container) { color: #d7f0dd !important; }
html.mep-dark .mep-qb-opt.bad { background-color: #2a1414 !important; border-color: #a33636 !important; }
html.mep-dark .mep-qb-opt.bad :is(.mep-qb-optt, mjx-container) { color: #f3c9c9 !important; }
/* The letter chip keeps its state fill (navy/green/red on select). */
html.mep-dark .mep-qb-back { color: var(--mepd-text) !important; background-color: var(--mepd-raised) !important; border-color: var(--mepd-border-2) !important; }
html.mep-dark :is(.mep-qb-markrev, .mep-qb-optr) { color: var(--mepd-muted) !important; }

/* ── Question navigator — difficulty, premium ────────────────────────────────
   In light mode each cell is a flat pastel fill by difficulty; a dark theme
   apes that as loud rows of colour. Instead the tile stays dark and carries a
   quiet tint plus a matching border, so difficulty reads at a glance without
   shouting. Answered right/wrong and the current cell override on top. */
html.mep-dark .qbnav-cell { background-color: #101822 !important; border: 1px solid #243141 !important; color: var(--mepd-text) !important; }
html.mep-dark .qbnav-cell.diff-easy   { background-color: #10241a !important; border-color: #275a3d !important; }
html.mep-dark .qbnav-cell.diff-medium { background-color: #241d0d !important; border-color: #5b4a1c !important; }
html.mep-dark .qbnav-cell.diff-hard   { background-color: #281616 !important; border-color: #5e2c2c !important; }
html.mep-dark .qbnav-cell.ok  { background-color: #123420 !important; border-color: #2f9e6a !important; }
html.mep-dark .qbnav-cell.bad { background-color: #391818 !important; border-color: #cc5555 !important; }
html.mep-dark .qbnav-cell.current { border-color: #3d8bfd !important; box-shadow: 0 0 0 2px rgba(61,139,253,.45) !important; }

/* ── Calculator — kept light ─────────────────────────────────────────────────
   The Desmos panel is its own themed widget; forcing it dark leaves it
   half-broken. It stays on its native light theme, which works, and its own
   navy header still reads. color-scheme:light keeps its native controls light. */
html.mep-dark :is(.mep-qb-calc, .mep-calc-panel) {
    color-scheme: light;
    background-color: #ffffff !important;
    color: #1f2328 !important;
}
html.mep-dark :is(.mep-qb-calc-body, .mep-calc-panel .dcg-container) { background-color: #ffffff !important; }
html.mep-dark :is(.mep-qb-calc, .mep-calc-panel) :is(.mep-dz-surf, .mep-dz-surf2, .mep-dz-ink) { background-color: revert !important; color: revert !important; }
/* The teal "Start practicing" button and the amber Marked / Review chips carry
   their own ink on their own colour: left exactly alone. */

html.mep-dark :is(.mep-qb-bar, .mep-qb-colhead) { background-color: transparent !important; color: var(--mepd-muted) !important; }
html.mep-dark .mep-qb-fsel { background-color: var(--mepd-surface) !important; color: var(--mepd-text) !important; border-color: var(--mepd-border-2) !important; }
html.mep-dark .mep-qb-skill { border-color: var(--mepd-border) !important; }
html.mep-dark .mep-qb-skill:hover { background-color: var(--mepd-raised) !important; }
html.mep-dark .mep-qb-today { background-color: var(--mepd-surface) !important; border-color: var(--mepd-border) !important; }

/* ── Progress ────────────────────────────────────────────────────────────────
   Same method: read off the rendered page. Two lists — text too dark to see,
   and surfaces still light under it. */
html.mep-dark :is(
    .mep-pred-snum, .mep-prog-tn, .mep-lb-rank, .mep-lb-name, .mep-lb-segbtn
) { color: var(--mepd-text) !important; }
html.mep-dark :is(
    .mep-pred-sname, .mep-coh-ctitle, .mep-prog-dl, .mep-lb-ans
) { color: var(--mepd-muted) !important; }
/* Chart furniture: bar tracks, the heat-map cells and the donut hole were all
   light greys sitting on a dark card. */
html.mep-dark :is(
    .mep-prog-stack, .mep-prog-hc, .mep-prog-tbar, .mep-lb-seg, .mep-lb-row
) {
    background-color: var(--mepd-surface-2) !important;
    border-color: var(--mepd-border) !important;
}
html.mep-dark .mep-prog-hole { background-color: var(--mepd-surface) !important; }
html.mep-dark .mep-lb-segbtn { background-color: var(--mepd-raised) !important; }
html.mep-dark .mep-lb-row:nth-child(even) { background-color: var(--mepd-surface) !important; }
/* Bare <b> and <span> inside the progress cards — counts and durations with no
   class of their own, inheriting a dark colour set on their parent. */
html.mep-dark :is(.mep-prog-card, .mep-prog, .mep-pred, .mep-coh) :is(b, strong, span:not([class])) {
    color: var(--mepd-text) !important;
}
/* Colours that carry meaning are kept, but lifted: the same red and blue read
   as muddy against a dark card at the weight they were tuned for on white. */
html.mep-dark :is(.mep-prog-tp, .mep-bk-score) { color: #ff8a80 !important; }
html.mep-dark :is(.mep-lb-acc, .mep-bk-go)     { color: #7ab8ff !important; }
/* A green score keeps its meaning too, lifted the same way. */
html.mep-dark .mep-bk-score[style*="1f9d57"] { color: #7fe0a4 !important; }
html.mep-dark .mep-lb-segbtn { color: var(--mepd-text-2) !important; }
/* The cohort chips are written with inline colours chosen for a white card;
   on a dark one the pale tint becomes the bright part. Inverted deliberately:
   dark tint, bright ink, same meaning. */
html.mep-dark .mep-coh-rank { background: var(--mepd-raised) !important; }
html.mep-dark .mep-coh-item:nth-child(-n+4) .mep-coh-rank { color: #7fe0a4 !important; }
html.mep-dark .mep-coh-col:last-child .mep-coh-rank { color: #ff9b8f !important; }

/* ── My Mistakes ─────────────────────────────────────────────────────────────
   Read off the page: white cards and the dark text on them. */
html.mep-dark :is(
    .mep-rev-stat, .mep-weak, .mep-weak-focus, .mep-rev-hist, .mep-tabs-wrap
) {
    background-color: var(--mepd-surface) !important;
    border-color: var(--mepd-border) !important;
}
html.mep-dark :is(.mep-weak-bar, .mep-weak-sbar) {
    background-color: var(--mepd-surface-2) !important;
}
html.mep-dark :is(
    .mep-rev-statnum, .mep-weak-head, .mep-weak-drow, .mep-weak-dn,
    .mep-rev-hist-head, .mep-rev-hskill
) { color: var(--mepd-text) !important; }
html.mep-dark :is(
    .mep-weak-focus, .mep-weak-s, .mep-weak-sn, .mep-weak-sbar, .mep-weak-sp,
    .mep-rev-hscore, .mep-rev-hdate, .mep-rev-statlbl, .mep-weak-difflabel
) { color: var(--mepd-muted) !important; }
/* Bare <strong>/<b> inside the focus card carry hardcoded near-black ink. */
html.mep-dark :is(.mep-weak-focus, .mep-weak, .mep-rev-hist) :is(strong, b) {
    color: var(--mepd-text) !important;
}
/* Colours that carry meaning, lifted so they read on a dark card. */
html.mep-dark .mep-weak-dp { color: #ff8a80 !important; }
html.mep-dark .mep-weak-dp[style*="1f9d57"] { color: #7fe0a4 !important; }

/* ── Report / review cards (Marked tab, exam report, bank review) ───────────
   The most read screen after an exam, and it was the worst: the question text
   and the explanation were near-white on near-white — 1.03, unreadable. These
   cards carry meaning in their tint (green = the correct choice, yellow = the
   explanation, red = a wrong pick), so the surfaces are darkened to a tinted
   dark rather than neutral, and the ink lifted to read on them. */
html.mep-dark :is(.mep-review-item, .mep-marked-q, .mep-marked-x) {
    background-color: var(--mepd-surface) !important;
    border-color: var(--mepd-border) !important;
}
html.mep-dark .mep-review-header { background-color: var(--mepd-surface-2) !important; }
html.mep-dark :is(.mep-r-question, .mep-r-opt, .mep-review-body) { color: var(--mepd-text) !important; }
html.mep-dark .mep-r-correct-ans { color: var(--mepd-text-2) !important; }
html.mep-dark :is(.mep-r-time, .mep-marked-cat) { color: var(--mepd-muted) !important; }
/* The correct choice: keep it green, but a dark green with light ink. */
html.mep-dark .mep-r-opt-correct {
    background-color: #12261b !important;
    border-color: #1f5133 !important;
    color: #d7f0dd !important;
}
/* A wrong pick, if the markup uses it. */
html.mep-dark .mep-r-opt-wrong {
    background-color: #2a1414 !important;
    border-color: #5a2020 !important;
    color: #f3c9c9 !important;
}
/* The explanation panel: keep the amber sense, dark. */
html.mep-dark .mep-r-explanation {
    background-color: #241d0a !important;
    border-color: #4a3b12 !important;
    color: var(--mepd-text) !important;
}
html.mep-dark .mep-r-passage {
    background-color: #131c26 !important;
    border-color: #26333f !important;
    border-left-color: #3a4a5c !important;
    color: var(--mepd-text) !important;
}
/* Bare emphasis inside these cards carries hardcoded near-black ink. */
html.mep-dark :is(.mep-r-explanation, .mep-r-question, .mep-r-opt, .mep-review-body) :is(strong, b) {
    color: var(--mepd-text) !important;
}
html.mep-dark .mep-r-flag { color: #f0c36d !important; }
/* The marked chip was a pale blue pill; invert to dark pill, bright ink. */
html.mep-dark .mep-marked-chip {
    background-color: var(--mepd-raised) !important;
    color: var(--mepd-link) !important;
}
/* "Hide explanations" toggle sat as near-black on the dark page. */
html.mep-dark .mep-expl-toggle {
    color: var(--mepd-text-2) !important;
    border-color: var(--mepd-border) !important;
}

/* ── Question Bank solver top bar ────────────────────────────────────────────
   The bar is dark; its Back label kept navy ink and its tool buttons a white
   background. */
html.mep-dark .mep-qb-tb-back { color: var(--mepd-text) !important; }
html.mep-dark .mep-qb-tb-btn {
    background-color: var(--mepd-raised) !important;
    border-color: var(--mepd-border-2) !important;
    color: var(--mepd-text) !important;
}
html.mep-dark .mep-qb-tb-scope { color: var(--mepd-muted) !important; }
/* Keyboard-shortcuts and scope tag inside the solver body. */
html.mep-dark #qb-kbd-open { color: var(--mepd-muted) !important; }
html.mep-dark .mep-qb-scopetag { color: var(--mepd-link) !important; }

/* ── Score calculator ────────────────────────────────────────────────────────
   Self-contained: it ships its own inline CSS with hardcoded light colours, so
   the baseline could not reach it and it came through as white cards with navy
   ink. Enumerated from the page. */
html.mep-dark :is(.mepsc-card, .mepsc-tablecard) {
    background-color: var(--mepd-surface) !important;
    border-color: var(--mepd-border) !important;
}
html.mep-dark :is(.mepsc-eq, .mepsc-howto) {
    background-color: var(--mepd-surface-2) !important;
    border-color: var(--mepd-border) !important;
}
html.mep-dark :is(
    .mepsc-body, .mepsc-formula, .mepsc-result, .mepsc-result-top,
    .mepsc-table, .mepsc-tablescroll, .mepsc-eq, .mepsc-howto, .mepsc-howto-head
) { color: var(--mepd-text) !important; }
html.mep-dark :is(.mepsc-hint, .mepsc-opt) { color: var(--mepd-muted) !important; }
html.mep-dark :is(.mepsc-tablecard, .mepsc-tablescroll, .mepsc-table) :is(th, td) {
    color: var(--mepd-text-2) !important;
    border-color: var(--mepd-border) !important;
}
/* Bare emphasis inside the cards carries hardcoded dark ink. */
html.mep-dark :is(.mepsc-card, .mepsc-eq, .mepsc-howto, .mepsc-formula, .mepsc-body) :is(strong, b) {
    color: var(--mepd-text) !important;
}
/* The error box: keep it red, dark. */
html.mep-dark .mepsc-err {
    background-color: #2a1414 !important;
    color: #f3c9c9 !important;
    border-color: #5a2020 !important;
}
/* Its navy and teal headers already carry their own ink on their own colour;
   the result number is teal on a dark panel and reads fine. */

/* ── Header wordmark and the Study Tools dropdown ────────────────────────────
   The logo image is flattened to white in the header; the "MATHTOPIA" wordmark
   beside it is separate text the theme paints dark. The dropdown is a white
   panel with pale links — on a dark bar its items vanished. */
html.mep-dark :is(.site-title, .site-description, .custom-logo-link + *, .elementor-widget-theme-site-logo + * a) {
    color: var(--mepd-text) !important;
}
html.mep-dark :is(
    .sub-menu, .elementor-nav-menu--dropdown, ul.sub-menu,
    .menu-item-has-children > .sub-menu, .hfe-nav-menu__submenu-container
) {
    background-color: var(--mepd-surface) !important;
    border-color: var(--mepd-border) !important;
}
html.mep-dark :is(.sub-menu a, .elementor-nav-menu--dropdown a, .sub-menu .elementor-item) {
    color: var(--mepd-text) !important;
    background-color: transparent !important;
}
html.mep-dark :is(.sub-menu a:hover, .elementor-nav-menu--dropdown a:hover) {
    background-color: var(--mepd-raised) !important;
    color: #fff !important;
}

/* Anything still on white inside the plugin, caught by attribute rather than
   by name, so a component added later is dark before anyone remembers to
   list it here. */
html.mep-dark .mep-list-container [style*="background:#fff"],
html.mep-dark .mep-list-container [style*="background: #fff"],
html.mep-dark .mep-list-container [style*="background-color:#fff"],
html.mep-dark .mep-container [style*="background:#fff"],
html.mep-dark .mep-container [style*="background-color:#fff"] {
    background-color: var(--mepd-surface) !important;
}

/* ── Normalizer hooks ────────────────────────────────────────────────────────
   The script below reads every element's real rendered colour and tags the
   ones still wrong with these classes. CSS does the actual recolouring, scoped
   to dark mode — so the tags are harmless in light mode and revert with no
   cleanup when the lights come back on. This is what reaches the theme and
   third-party content that naming individual classes never could. */
/* The class is deliberately repeated in each selector. It raises specificity
   without the element carrying it twice, so these beat a component's own
   !important rule at ordinary specificity — the disabled selects in the GPA
   calculator, styled light with `.eguc-wrap select:disabled !important`, needed
   exactly this to go dark. An inline style or a rule more specific still than
   (0,3,1) would win, but those are rare. */
html.mep-dark .mep-dz-surf.mep-dz-surf   { background-color: var(--mepd-surface) !important; border-color: var(--mepd-border) !important; }
html.mep-dark .mep-dz-surf2.mep-dz-surf2 { background-color: var(--mepd-surface-2) !important; border-color: var(--mepd-border) !important; }
html.mep-dark .mep-dz-ink.mep-dz-ink     { color: var(--mepd-text) !important; }
/* A light gradient neutralised to a flat dark surface. Saturated gradients —
   the purple hero — are never tagged, so they keep their gradient. */
html.mep-dark .mep-dz-degrad.mep-dz-degrad { background-image: none !important; background-color: var(--mepd-surface) !important; border-color: var(--mepd-border) !important; }

/* ── The toggle itself ───────────────────────────────────────────────────── */
.mep-dark-fab {
    position: fixed; right: 18px; bottom: 18px; z-index: 2147483000;
    width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid #d0d7de; background: #fff; color: #1f2328;
    font-size: 20px; line-height: 1; cursor: pointer; padding: 0;
    box-shadow: 0 6px 20px rgba(15, 28, 45, .18);
    transition: transform .12s, background .12s, border-color .12s;
    /* Clear of the iOS home indicator, as everywhere else pinned to the bottom. */
    margin-bottom: env(safe-area-inset-bottom, 0px);
}
.mep-dark-fab:hover { transform: translateY(-2px); }
.mep-dark-fab:focus-visible { outline: 2px solid #2f7fe0; outline-offset: 2px; }
html.mep-dark .mep-dark-fab {
    background: var(--mepd-surface) !important;
    color: var(--mepd-text) !important;
    border-color: var(--mepd-border-2) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}
@media print { .mep-dark-fab { display: none !important; } }

/* ── Panels the exam's own dark rules do not reach ───────────────────────────
   The start screen is mostly light boxes: the module picker, the explanatory
   note, the mode choices and the green "signed in" strip. */
html.mep-dark :is(
    #mep-app, #mep-app.mep-fs, .mep-start-card, .mep-exam-card,
    .mep-question-area, .mep-screen, .mep-mod-picker
) {
    background-color: var(--mepd-bg) !important;
    color: var(--mepd-text) !important;
}
html.mep-dark :is(
    .mep-mod-row, .mep-mod-note, .mep-mode-choice, .mep-signed-in,
    .mep-question-card, .mep-option, .mep-grid-wrap
) {
    background-color: var(--mepd-surface) !important;
    border-color: var(--mepd-border) !important;
    color: var(--mepd-text) !important;
}
html.mep-dark :is(.mep-option:hover) { background-color: var(--mepd-raised) !important; }
html.mep-dark :is(.mep-mod-note, .mep-grid-hint, .mep-pace-choice) { color: var(--mepd-muted) !important; }
/* The exam's top bar and its fixed bottom nav. */
html.mep-dark :is(.mep-bb-topbar, .mep-bb-navbar, .mep-qb-topbar) {
    background-color: var(--mepd-surface-2) !important;
    border-color: var(--mepd-border) !important;
    color: var(--mepd-text) !important;
}
html.mep-dark :is(.mep-bb-topbar *, .mep-bb-navbar *) { color: var(--mepd-text) !important; }
/* Back and Next are white buttons in light mode, and the exam's own dark rules
   already recolour them — but only once its script has run. Caught at 1.07
   mid-render, which is a flash of white-on-white on the exam's primary
   navigation. Stating it in CSS means it is right from the first paint. */
html.mep-dark :is(#mep-btn-prev, #mep-btn-next, .mep-bb-navbar .mep-btn:not(.mep-btn-primary)) {
    background-color: var(--mepd-raised) !important;
    border-color: var(--mepd-border-2) !important;
    color: var(--mepd-text) !important;
}
html.mep-dark :is(#mep-btn-prev:hover, #mep-btn-next:hover) {
    background-color: var(--mepd-border-2) !important;
}
/* ── Resume banner ───────────────────────────────────────────────────────────
   A cream box with amber ink, which read as a bright slab against everything
   else. Kept amber — it is a warning — but as a dark tint with a warm edge, so
   it belongs to the theme instead of interrupting it. */
html.mep-dark #mep-resume-box, html.mep-dark #mep-expired-box {
    background: #241d0a !important;
    border-color: #6b5410 !important;
}
html.mep-dark #mep-resume-box .mep-resume-text, html.mep-dark #mep-expired-box .mep-resume-text { color: #f0d79a !important; }
html.mep-dark #mep-resume-box .mep-resume-text strong, html.mep-dark #mep-expired-box .mep-resume-text strong { color: #ffdf8a !important; }

/* ── Eliminate (cross-out) buttons ───────────────────────────────────────────
   White circles with grey ink: on a dark card they read as smudges rather than
   controls. Given a real edge and legible letters, with the crossed state in a
   clear blue so it is obvious which choices are struck out. */
/* exam.css forces `.mep-question-area .mep-option, .mep-container .mep-option`
   and their children to #111 with !important — that is what made the whole
   option row, letters and eliminate buttons alike, look hidden on a dark card.
   These match that selector's shape so they win, rather than only carrying
   !important at a lower specificity. */
html.mep-dark .mep-container .mep-option,
html.mep-dark .mep-question-area .mep-option,
html.mep-dark .mep-container .mep-option *,
html.mep-dark .mep-question-area .mep-option * {
    color: var(--mepd-text) !important;
}
/* The question stem is forced to #111 by two rules of its own. */
html.mep-dark :is(.mep-container, .mep-question-area) .mep-question-text,
html.mep-dark #mep-app .mep-question-text { color: var(--mepd-text) !important; }
html.mep-dark .mep-container .mep-option .mep-bb-xout,
html.mep-dark .mep-question-area .mep-option .mep-bb-xout,
html.mep-dark #mep-app .mep-bb-xout {
    background: var(--mepd-surface-2) !important;
    border-color: var(--mepd-border-2) !important;
    color: var(--mepd-text-2) !important;
}
/* The selected option keeps a readable letter chip. */
html.mep-dark .mep-container .mep-option.mep-selected { background: var(--mepd-surface-2) !important; border-color: #3d8bfd !important; }
html.mep-dark .mep-option:hover { background: var(--mepd-raised) !important; }
html.mep-dark #mep-app .mep-bb-xout::after { background: var(--mepd-text-2) !important; }
html.mep-dark #mep-app .mep-bb-xout:hover { border-color: #ff8a80 !important; color: #ff8a80 !important; }
html.mep-dark #mep-app .mep-option.mep-bb-option.mep-crossed .mep-bb-xout {
    border-color: #7ab8ff !important; color: #7ab8ff !important;
}
html.mep-dark #mep-app .mep-option.mep-bb-option.mep-crossed .mep-bb-xout::after { background: #7ab8ff !important; }
/* A struck-through choice reads dimmer, not invisible. */
html.mep-dark #mep-app .mep-option.mep-crossed { opacity: .55 !important; }

/* ── Report screen ───────────────────────────────────────────────────────────
   The score ring was a pale disc on a dark card — the loudest thing on the
   page for the least reason. It becomes a dark disc with a coloured rim, and
   the surrounding stats sit on the card rather than on white. */
html.mep-dark :is(.mep-score-circle, .mep-report-circle) {
    background: var(--mepd-surface-2) !important;
    border: 3px solid var(--mepd-border-2) !important;
    color: var(--mepd-text) !important;
}
html.mep-dark :is(.mep-score-num, .mep-pct-sign) { color: var(--mepd-text) !important; }
html.mep-dark :is(.mep-report, .mep-score-panel, .mep-sections, .mep-test-breakdown, .mep-pace-card) {
    background-color: var(--mepd-surface) !important;
    border-color: var(--mepd-border) !important;
}
html.mep-dark :is(.mep-score-details, .mep-score-fraction, .mep-sec-raw) { color: var(--mepd-text-2) !important; }
html.mep-dark :is(.mep-report-title, .mep-review-heading, .mep-sec-score) { color: var(--mepd-text) !important; }
html.mep-dark :is(.mep-pace-stat, .mep-pace-lbl) { color: var(--mepd-muted) !important; }
html.mep-dark .mep-pace-num { color: var(--mepd-text) !important; }
/* The report is built by JavaScript after the page loads, so switching theme
   only re-applies classes to markup that already exists — every class it emits
   has to be covered here or the panel keeps its light styling until the page
   is rebuilt. That is why toggling to light on the report left it half-dark
   while "Back to Exams" looked perfect. */
html.mep-dark :is(
    .mep-score-panel, .mep-report-card, .mep-badge-box, .mep-protect-box,
    .mep-qotd-exp, .mep-ch-note, .mep-r-num, .mep-r-icon
) {
    background-color: var(--mepd-surface) !important;
    border-color: var(--mepd-border) !important;
    color: var(--mepd-text) !important;
}
html.mep-dark :is(.mep-est-score, .mep-grade-label, .mep-qotd-verdict, .mep-qotd-streakmsg) {
    color: var(--mepd-text) !important;
}
/* The one pair written inline by the builder — a pale blue pill — inverted so
   it reads on a dark card. An inline background needs the attribute selector;
   a class rule alone would lose to it. */
html.mep-dark [style*="#eef3fb"] {
    background-color: var(--mepd-raised) !important;
    color: var(--mepd-link) !important;
}

/* ── Review buttons (exam list + previous attempts) ──────────────────────────
   White fill with navy ink, which the normalizer either flattened to a faint
   navy-on-dark ghost or left as a bright white blob. Restyled as a real dark
   button with a blue outline, filling blue on hover. */
html.mep-dark :is(.mep-review-link-btn, .mep-btn-review) {
    background: var(--mepd-surface-2) !important;
    color: #7ab8ff !important;
    border-color: #35597e !important;
}
html.mep-dark :is(.mep-review-link-btn:hover, .mep-review-link-btn:focus, .mep-btn-review:hover) {
    background: #3d8bfd !important;
    color: #0c1219 !important;
    border-color: #3d8bfd !important;
}

/* ── Grade pills ─────────────────────────────────────────────────────────────
   Pastel fills — the 0% pill was a pale pink slab on the dark card. Each keeps
   its meaning as a dark tint with legible ink. */
html.mep-dark .mep-grade-a { background: #123420 !important; color: #7fe0a4 !important; }
html.mep-dark .mep-grade-b { background: #0c2a4a !important; color: #7ab8ff !important; }
html.mep-dark .mep-grade-c { background: #2a230f !important; color: #e8c66a !important; }
html.mep-dark .mep-grade-f { background: #3a1717 !important; color: #f3a9a9 !important; }
html.mep-dark :is(.mep-score-badge, .mep-bk-score) { filter: none; }

/* ── Your Previous Attempts ──────────────────────────────────────────────── */
html.mep-dark :is(.mep-history-card, .mep-history-inner, .mep-history-tr, .mep-history-td) {
    background-color: var(--mepd-surface) !important;
    border-color: var(--mepd-border) !important;
}
html.mep-dark :is(.mep-history-num, .mep-history-fraction, .mep-history-inner > strong, .mep-history-title) {
    color: var(--mepd-text) !important;
}
html.mep-dark .mep-history-date { color: var(--mepd-muted) !important; }

/* The answer box was a black hole against a dark card. */
html.mep-dark :is(.mep-grid-input, #mep-rev-grid-input, .mep-qb-gridin) {
    background-color: var(--mepd-surface-2) !important;
    border-color: var(--mepd-border-2) !important;
    color: var(--mepd-text) !important;
}

/* ── Cards the audit found still on white ────────────────────────────────────
   The streak card, the weekly goal, Question of the Day and the sub-tab count
   were all painting dark ink on a white background that had not been darkened.
   Found by measurement, not by eye: several were legible-looking at a glance
   and still failed at a contrast of 1.1. */
html.mep-dark :is(
    .mep-streak, .mep-streak-card, .mep-streak-wrap, .mep-streak-flame,
    .mep-goal, .mep-goal-card, .mep-active-wrap,
    .mep-qotd, .mep-qotd-card, .mep-lb-card, .mep-lbnew
) {
    background-color: var(--mepd-surface) !important;
    border-color: var(--mepd-border) !important;
}
/* Cards whose container went dark while their own text stayed near-black —
   the reverse of the usual fault, and invisible until measured. */
html.mep-dark :is(
    .mep-streak-title, .mep-goal-label, .mep-qotd-label, .mep-lb-title,
    .mep-qotd-question, .mep-goal-count, .mep-streak-flame
) {
    color: var(--mepd-text) !important;
}
html.mep-dark :is(.mep-goal, .mep-qotd, .mep-streak, .mep-streak-wrap) :is(strong, b, span:not([class])) {
    color: var(--mepd-text) !important;
}
html.mep-dark :is(.mep-streak-sub, .mep-goal-sub, .mep-qotd-sub) {
    color: var(--mepd-muted) !important;
}
/* The "Most Active" board — darkening its wrapper exposed the dark ink inside,
   which is the usual second wave: fix a surface, and whatever was written on it
   is suddenly the problem. */
html.mep-dark :is(.mep-active-head, .mep-active-name, #mep-you-month, .mep-active-tab.active) {
    color: var(--mepd-text) !important;
}
html.mep-dark :is(.mep-active-tab, .mep-active-row, .mep-active-list) {
    color: var(--mepd-text-2) !important;
}
/* These kept a light background of their own while inheriting light text —
   white on #f6f8fa. Colouring the text without colouring what it sits on is the
   commonest way to make dark mode worse, not better. The odd-row stripe is set
   by the plugin's own inline sheet as ".mep-list-container .mep-active-row:
   nth-child(2n+1)" with !important — a higher specificity than a bare class, so
   the override has to match its shape to win, not just carry !important. */
html.mep-dark .mep-active-tab { background-color: var(--mepd-surface-2) !important; }
html.mep-dark .mep-list-container .mep-active-row,
html.mep-dark .mep-list-container .mep-active-row:nth-child(2n+1),
html.mep-dark .mep-list-container .mep-active-row:nth-child(2n) {
    background-color: var(--mepd-surface-2) !important;
}
html.mep-dark .mep-list-container .mep-active-row:nth-child(2n) { background-color: var(--mepd-surface) !important; }
html.mep-dark :is(.mep-active-name, .mep-active-rank) { color: var(--mepd-text) !important; }
html.mep-dark :is(.mep-active-tabs, .mep-active-row) { border-color: var(--mepd-border) !important; }
html.mep-dark .mep-active-tab.active {
    background-color: var(--mepd-raised) !important;
    color: var(--mepd-text) !important;
}
/* A count pill that was white on white. */
html.mep-dark :is(.mep-subtab-count, .mep-tab-count, .mep-year-count) {
    background-color: var(--mepd-raised) !important;
    color: var(--mepd-text) !important;
}
html.mep-dark .mep-subtab-active .mep-subtab-count { background-color: rgba(255,255,255,.22) !important; }

/* ── Footer and breadcrumb text the theme paints near-black ──────────────── */
html.mep-dark :is(
    .elementor-location-footer span, .elementor-location-footer p,
    .elementor-location-footer div, .site-footer span, .site-footer p,
    .copyright, .copyright *,
    .edublink-copyright-wrapper, .edublink-copyright-wrapper *
) { color: var(--mepd-text-2) !important; }
/* This theme's breadcrumb, found by reading the DOM rather than guessing:
   the trail is .edublink-yoast-breadcrumb and the current page is a bare
   span inside it, so both need naming. */
html.mep-dark :is(
    .breadcrumb_last, .breadcrumbs span, .woocommerce-breadcrumb,
    .edublink-yoast-breadcrumb, .edublink-yoast-breadcrumb span,
    .edublink-breadcrumb-wrapper span
) { color: var(--mepd-text-2) !important; }
html.mep-dark :is(.edublink-yoast-breadcrumb a) { color: var(--mepd-link) !important; }

/* ── Menus the first pass missed ─────────────────────────────────────────────
   The home page header is a different Elementor instance from the inner-page
   one — sticky, and nested a level deeper — so the earlier selectors did not
   reach it. Matching the menu widget itself covers both. */
html.mep-dark :is(
    .elementor-widget-nav-menu a, .elementor-widget-nav-menu .elementor-item,
    .elementor-sticky a, .elementor-sticky .elementor-item,
    .elementor-nav-menu--main a, .hfe-nav-menu a, .menu a,
    /* A third menu markup, found on the Question Bank page: this theme also
       renders plain .nav-link anchors, which neither earlier selector caught. */
    a.nav-link, .navbar a, .main-navigation a
) {
    color: var(--mepd-text) !important;
}
html.mep-dark :is(
    .elementor-widget-nav-menu .elementor-item-active,
    .elementor-nav-menu--main .elementor-item-active
) { color: var(--mepd-accent) !important; }