/** * Code Maze Dark Mode * * Everything visual hangs off :root[data-theme="dark"], so this file is inert * for visitors who haven't opted in — which is what lets it be served to * everyone from cache as a plain static asset. * * !important appears deliberately and only on surface colours. The Extra theme * prints a customizer stylesheet inline in using selector chains like * `.et-db #et-boc .et-l .et_pb_module` (specificity 1-3-0) with hardcoded * colours. An external override cannot outrank that on specificity alone * without mirroring the whole chain, so this is a deliberate override layer. * * Enlighter code blocks are explicitly left alone — they already ship the * monokai (dark) theme by configuration. */ /* --------------------------------------------------------------------------- 1. Toggle — NOT scoped to dark. It must be visible in both themes. --------------------------------------------------------------------------- */ .cmz-dm-toggle { display: inline-flex !important; align-items: center; gap: 7px; cursor: pointer; } /* Sun / moon glyphs. Both are in the markup and CSS picks one, because the theme is decided in the browser *after* the HTML is cached — swapping them in JS would make the markup theme-dependent and undo the cache safety the whole plugin rests on. They replace the "Dark"/"Light" wording, which the label below keeps for screen readers and for the mobile menu. */ .cmz-dm-glyph { flex: 0 0 auto; display: block; color: currentColor; } /* Light mode: offer the moon. Dark mode: offer the sun. */ .cmz-dm-sun { display: none; } :root[data-theme="dark"] .cmz-dm-moon { display: none; } :root[data-theme="dark"] .cmz-dm-sun { display: block; } /* "New" badge — shown for the first two weeks after release only. PHP decides the fortnight (date-based, so the markup stays identical for every visitor and a cache can still serve one copy). Whether *this* person has already used the toggle is decided in the browser via data-cmz-used, below — a per-visitor decision must never reach the HTML. */ .cmz-dm-toggle { position: relative; } .cmz-dm-new { position: absolute; /* absolute so it cannot reflow the nav bar */ /* Hugs the toggle's own corner rather than sitting at left:100%. Anchored outside the element it could run past the end of the nav on a narrower window, since the toggle is the last item in the bar. */ top: -4px; right: -10px; z-index: 3; padding: 1px 5px; border-radius: 8px; /* The mentor cursor's gold, read from the live nav (rgb(255,185,18)), paired with the mentor's own ink colour for text on gold — 10.4:1. Gold rather than the brand green because the badge sits on a dark bar and needs to catch the eye for a fortnight; green there reads as just another link. */ background: #ffb912; color: #1e1600; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.5; pointer-events: none; /* never intercept the click it is advertising */ white-space: nowrap; } /* Once someone has chosen a theme, the feature is no longer news to them. */ :root[data-cmz-used] .cmz-dm-new { display: none; } /* The wording is kept for assistive tech but hidden on the desktop bar, where the glyph alone reads and horizontal space is tight. */ .cmz-dm-toggle .cmz-dm-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect( 0 0 0 0 ); white-space: nowrap; border: 0; } /* Extra's mobile menu is a stacked list whose links are display:block and fill the row. inline-flex is right for the desktop nav but shrink-wraps the mobile row to its text — 65px against siblings' full width — so the item sits short of its neighbours with a tap target a quarter of the expected size. flex (not inline-flex) keeps the icon and label on one line while filling the row. This must override `display: inline-flex !important` from the base rule, hence !important here too. THE BREAKPOINT IS 1024px BECAUSE THAT IS THE THEME'S, not a round number. Extra switches to the hamburger at `max-width: 1024px` (`#et-mobile-navigation { display: block }`). A guessed 980px left a live dead zone at 981–1024px — hamburger showing, mobile rule not applied — which is exactly the width a tablet or a narrowed desktop window lands in, so the bug survived a check at 375px. Read the host theme's breakpoint; never assume it. */ @media only screen and ( max-width: 1024px ) { .cmz-dm-item .cmz-dm-toggle { display: flex !important; width: 100%; justify-content: flex-start; box-sizing: border-box; } /* In the stacked menu every other row is a phrase, so a lone glyph would read as a stray mark. Restore the wording here only. */ .cmz-dm-item .cmz-dm-toggle .cmz-dm-text { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; } /* The row is full width here, so a corner-anchored badge would sit at the far right of the screen, away from the label it belongs to. Put it inline after the restored wording instead. */ .cmz-dm-item .cmz-dm-new { position: static; margin-left: 8px; top: auto; right: auto; } } /* --------------------------------------------------------------------------- 2. Palette --------------------------------------------------------------------------- */ :root[data-theme="dark"] { /* Neutral, very slightly warm greys. The first palette was blue-tinted (#15181d / text #ced5e0); side by side against Dark Reader it read as colder and harsher, because a blue-cast text on a blue-cast background raises perceived glare even at the same measured contrast. Text is also deliberately dialled back: the old heading (#f2f5f9) was ~16:1, which is where "too bright" comes from. Body now lands ~10:1 and headings ~13:1 — comfortably AAA, considerably easier to sit in front of for an hour of lessons. */ /* The whole ramp moved down a step. Everything keeps its relative position, so the sidebar's depth model (inset < ground < surface) still reads exactly the same — the page just sits darker. */ --cmz-bg: #161618; /* Recessed: things that should sit *below* the ground — count chips, the open topic's lesson list, empty scroll track. */ --cmz-inset: #111113; --cmz-surface: #1f1f22; --cmz-surface-2: #26262a; --cmz-surface-3: #2f2f34; --cmz-border: #2b2b30; --cmz-text: #c9c6c1; --cmz-heading: #e4e0da; --cmz-muted: #96938e; /* Brand green marks identity and action (course-checkout decision, 2026-07-20). The brand value itself is rgb(35,147,113) / #239371, which is tuned for white: on these dark surfaces it measures 4.65:1 on the page background and only 4.27:1 on cards — failing AA. So the hue is kept and the lightness lifted, exactly the inverse of the landing page's #f0b429 → #8a5a00 move. Same hue, so it still reads as one brand colour. #5dc49e is 8.35:1 on the background and 7.67:1 on cards, and already appears in the promo bar's CSS. */ --cmz-brand: #239371; --cmz-link: #5dc49e; --cmz-link-hover: #8bdcc0; /* Button fill. White button text is the house style, and white on the light accent is only 2.13:1 — unreadable. This is the brand hue taken down to 30% lightness, where white text scores 5.12:1 and passes AA, while the fill still holds 3.2:1 against the card surface behind it. */ --cmz-accent-fill: #1d7c60; --cmz-accent-fill-hover: #26956f; /* Tells the browser to render native UI (scrollbars, form controls) dark. */ color-scheme: dark; /* Firefox. color-scheme alone leaves the sidebar's scrollbar as a wide light slab against the panel. */ scrollbar-width: thin; scrollbar-color: #3f3f46 transparent; } /* WebKit/Blink: a thin thumb on an empty track. The transparent border plus background-clip is what keeps the thumb from touching the edges — without it a "thin" scrollbar still reads as a heavy bar. */ :root[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; } :root[data-theme="dark"] ::-webkit-scrollbar-track, :root[data-theme="dark"] ::-webkit-scrollbar-corner { background: transparent; } :root[data-theme="dark"] ::-webkit-scrollbar-thumb { background-color: #3f3f46; border-radius: 6px; border: 2px solid transparent; background-clip: content-box; } :root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background-color: #52525b; background-clip: content-box; } /* --------------------------------------------------------------------------- 2b. Catch-all: nothing may stay white. Enumerating every white container in Tutor and the mentor plugin is whack-a-mole — there is always one more, and the ones that hurt are on gated screens. Dark Reader wins this comparison precisely because it doesn't enumerate: it computes a value for every surface it meets. The same robustness, cheaply: default every plugin-owned surface to *transparent* so the page background shows through, then paint the few that genuinely need elevation further down. An unthemed container then inherits dark instead of sitting there white. The exclusions are the components whose colour carries meaning — buttons, badges, alerts, progress fills, avatars, the green lesson header. They are wrapped in :where() so this rule contributes NO extra specificity, which is what lets the explicit surfaces below simply override it by coming later. Do not move this block after them. */ /* NOTE: each :where() must stay on ONE line. A newline between two :not() groups is a descendant combinator, not whitespace — broken across lines this reads as ":where(A B)" and every exclusion silently stops working. That bug shipped once here and let the rule match buttons it was written to skip. */ /* stylelint-disable-next-line */ /* :not(body) matters more than it looks. Tutor puts a tutor-* class on , so without it this rule matches the body element itself — and at 0,3,0 it outranks ":root[data-theme] body" (0,2,1), blanking the page background to transparent and exposing white html behind every gap. */ :root[data-theme="dark"] [class*="tutor-"]:where(:not(body):not([class*="btn"]):not([class*="badge"]):not([class*="alert"]):not([class*="progress"]):not([class*="avatar"]):not([class*="icon"]):not([class*="ribbon"]):not([class*="check"]):not([class*="label"]):not([class*="color-"]):not(.tutor-course-topic-single-header)), :root[data-theme="dark"] [class*="cmm-"]:where(:not([class*="btn"]):not([class*="sub"]):not([class*="cta"]):not([class*="av"]):not([class*="logo"]):not([class*="spark"])) { background-color: transparent !important; } /* --------------------------------------------------------------------------- 3. Tutor LMS — remapping its own variables does most of the course UI at once. --------------------------------------------------------------------------- */ :root[data-theme="dark"] { /* --tutor-color-white is deliberately NOT remapped. Tutor uses it for two different jobs: white panel backgrounds, and white *text* on coloured fills (the green lesson header is literally `color: var(--tutor-color-white)`). Pointing it at a dark surface fixed the panels and turned that header's text dark-on-green. Backgrounds are handled by the catch-all and the explicit surfaces instead, which leaves white text white where Tutor means it. */ --tutor-color-black: var( --cmz-heading ); --tutor-body-color: var( --cmz-text ); --tutor-color-gray: var( --cmz-surface-2 ); --tutor-color-gray-10: var( --cmz-surface-2 ); --tutor-color-muted: var( --cmz-muted ); --tutor-color-subdued: var( --cmz-muted ); --tutor-color-secondary: var( --cmz-muted ); --tutor-border-color: var( --cmz-border ); --tutor-disabled-bg: var( --cmz-surface-2 ); --tutor-disabled-color: var( --cmz-muted ); } /* Tutor hardcodes #fff on its layout containers rather than using its own variables, so the remap above doesn't reach them. These are layout, not surfaces — make them transparent so the page background shows through instead of a full-height white (then grey) slab. */ :root[data-theme="dark"] .tutor-wrap, :root[data-theme="dark"] .tutor-wrap-parent, :root[data-theme="dark"] .tutor-courses-wrap, :root[data-theme="dark"] .tutor-container { background-color: transparent !important; color: var( --cmz-text ) !important; } /* Floating surfaces that genuinely need a background of their own. */ :root[data-theme="dark"] .tutor-modal-content, :root[data-theme="dark"] .tutor-modal-content-white, :root[data-theme="dark"] .tutor-form-select-dropdown { background-color: var( --cmz-surface ) !important; border-color: var( --cmz-border ) !important; color: var( --cmz-text ) !important; } :root[data-theme="dark"] .tutor-form-select-option:hover { background-color: var( --cmz-surface-3 ) !important; } /* Avatar fallback is a white chip behind the initials. */ :root[data-theme="dark"] .tutor-avatar { background-color: var( --cmz-surface-3 ) !important; } /* Course-detail surfaces (curriculum rows, sidebar widgets, sticky bar). */ :root[data-theme="dark"] .tutor-course-details-widget, :root[data-theme="dark"] .tutor-course-details-instructors, :root[data-theme="dark"] .tutor-card-body, :root[data-theme="dark"] .tutor-is-sticky { background-color: var( --cmz-surface ) !important; border-color: var( --cmz-border ) !important; color: var( --cmz-text ) !important; } :root[data-theme="dark"] .tutor-course-content-list-item { background-color: transparent !important; border-color: var( --cmz-border ) !important; color: var( --cmz-text ) !important; } /* Tutor's text utility classes hardcode their colours rather than reading the variables remapped above — .tutor-color-black on a course price renders near-black on a near-black background, i.e. invisible. */ :root[data-theme="dark"] .tutor-color-black, :root[data-theme="dark"] .tutor-fs-4.tutor-color-black { color: var( --cmz-heading ) !important; } /* Tutor is already configured with the brand green as --tutor-color-primary, so its fills are correct. Only the *text* utility needs lifting, because #239371 as text on these surfaces is 4.27:1 and fails AA. */ :root[data-theme="dark"] .tutor-color-primary { color: var( --cmz-link ) !important; } /* Tutor ships --tutor-color-primary-hover as #395bca — a blue — so a green Tutor button currently turns blue on hover. That is a pre-existing setting and affects light mode too; corrected here for dark, worth fixing at source. */ :root[data-theme="dark"] { --tutor-color-primary-hover: #1b7a5d; } :root[data-theme="dark"] .tutor-color-secondary, :root[data-theme="dark"] .tutor-color-muted, :root[data-theme="dark"] .tutor-color-subdued { color: var( --cmz-muted ) !important; } /* Struck-through "was" price stays muted so the promo price still leads. */ :root[data-theme="dark"] s.cmz-promo-was, :root[data-theme="dark"] s.cmz-promo-was * { color: var( --cmz-muted ) !important; } :root[data-theme="dark"] .tutor-card, :root[data-theme="dark"] .tutor-course-card, :root[data-theme="dark"] .tutor-dashboard-content, :root[data-theme="dark"] .tutor-dashboard-permalinks, :root[data-theme="dark"] .tutor-course-topic, :root[data-theme="dark"] .tutor-accordion-item, :root[data-theme="dark"] .tutor-course-topic-header, :root[data-theme="dark"] .tutor-quiz-wrapper, :root[data-theme="dark"] .tutor-lesson-sidebar, :root[data-theme="dark"] .tutor-course-single-sidebar-wrapper { background-color: var( --cmz-surface ) !important; border-color: var( --cmz-border ) !important; color: var( --cmz-text ) !important; } :root[data-theme="dark"] .tutor-course-topic-header, :root[data-theme="dark"] .tutor-accordion-item-header { background-color: var( --cmz-surface-2 ) !important; } /* ---- Lesson sidebar navigation ------------------------------------------- Painting every row a surface colour and giving each a full border stacked the curriculum into a column of boxes. A navigation list wants one flat ground, hairline separators, and colour reserved for state. Depth here is: sidebar ground (darkest) → topic rows sit on it → the open topic's lessons are slightly raised, so the expanded group reads as one block instead of more rows. */ :root[data-theme="dark"] .tutor-course-topics, :root[data-theme="dark"] .tutor-course-topics-contents, :root[data-theme="dark"] .tutor-course-topic, :root[data-theme="dark"] .tutor-lesson-content-area { background-color: var( --cmz-bg ) !important; color: var( --cmz-text ) !important; border-color: transparent !important; } /* Topic row. NOTE: the clickable row is .tutor-accordion-item-header — NOT .tutor-course-topic-summary, which despite the name is the little "0/6" count chip. An earlier pass styled the chip as though it were the row, which is why a stray hairline appeared under the numbers. */ :root[data-theme="dark"] .tutor-accordion-item-header { background-color: var( --cmz-surface ) !important; color: var( --cmz-text ) !important; border: 0 !important; /* A hairline in a flat colour reads as a drawn line; a low-alpha white reads as an edge between two surfaces, which is what makes Dark Reader's list look calmer than a grid. */ border-bottom: 1px solid rgba( 255, 255, 255, 0.05 ) !important; transition: background-color 0.12s ease; } :root[data-theme="dark"] .tutor-accordion-item-header:hover { background-color: var( --cmz-surface-2 ) !important; } /* The topic holding the current lesson is green, the way the site marks state everywhere else. */ /* The accent *fill*, not the raw brand green: white on #239371 is 3.83:1 and fails AA, which is the same trap the buttons hit. Using the same fill here also means one green for "active/action" across the whole UI. */ :root[data-theme="dark"] .tutor-accordion-item-header.is-active { background-color: var( --cmz-accent-fill ) !important; } :root[data-theme="dark"] .tutor-accordion-item-header.is-active, :root[data-theme="dark"] .tutor-accordion-item-header.is-active .tutor-course-topic-title, :root[data-theme="dark"] .tutor-accordion-item-header.is-active .tutor-course-topic-summary, :root[data-theme="dark"] .tutor-accordion-item-header.is-active i { color: #ffffff !important; } :root[data-theme="dark"] .tutor-accordion-item-header.is-active .tutor-course-topic-summary { background-color: rgba( 0, 0, 0, 0.18 ) !important; } :root[data-theme="dark"] .tutor-course-topic-title { color: var( --cmz-text ) !important; } /* The "0/6" chip sits *below* the row it's on, not level with it. */ :root[data-theme="dark"] .tutor-course-topic-summary { background-color: var( --cmz-inset ) !important; color: var( --cmz-muted ) !important; border: 0 !important; border-radius: 4px !important; padding: 2px 7px !important; } /* The open topic's lesson list is recessed, not raised — it reads as a well cut into the panel, which is what separates it from the topic rows. */ :root[data-theme="dark"] .tutor-accordion-item-body, :root[data-theme="dark"] .tutor-course-topic-single-body { background-color: var( --cmz-inset ) !important; border: 0 !important; } /* Lesson rows: no separators at all inside a group — the raised background already groups them, and hairlines here are what made it look boxy. */ :root[data-theme="dark"] .tutor-course-topic-item, :root[data-theme="dark"] .tutor-course-topic-item a { background-color: transparent !important; color: var( --cmz-text ) !important; border: 0 !important; } :root[data-theme="dark"] .tutor-course-topic-item:hover, :root[data-theme="dark"] .tutor-course-topic-item:hover a { background-color: var( --cmz-surface-2 ) !important; color: var( --cmz-heading ) !important; } :root[data-theme="dark"] .tutor-course-topic-item-title { color: inherit !important; } /* Current lesson: green, the way the rest of the site marks state. */ :root[data-theme="dark"] .tutor-course-topic-item.is-active, :root[data-theme="dark"] .tutor-course-topic-item.is-active a, :root[data-theme="dark"] .tutor-course-topic-item.is-active .tutor-course-topic-item-title { background-color: var( --cmz-surface-2 ) !important; color: var( --cmz-link ) !important; } /* Lesson-type icons and the duration/progress counters are supporting information — muted so the titles lead. */ :root[data-theme="dark"] .tutor-course-topic-item-icon, :root[data-theme="dark"] .tutor-course-topic-item-duration, :root[data-theme="dark"] .tutor-course-topic-title-info { color: var( --cmz-muted ) !important; } :root[data-theme="dark"] .tutor-course-topic-item.is-active .tutor-course-topic-item-icon { color: var( --cmz-link ) !important; } /* Completion circles. These stayed white because the catch-all excludes [class*="check"] — reasonable for pass/fail states, wrong for an empty checkbox, which was reading as a row of bright dots down the sidebar. Empty = recessed and quiet; completed = green, the only state worth drawing the eye. */ :root[data-theme="dark"] .tutor-form-check-input, :root[data-theme="dark"] .tutor-form-check-circle, :root[data-theme="dark"] .tutor-course-topic-item .tutor-form-check-circle { background-color: var( --cmz-inset ) !important; border-color: rgba( 255, 255, 255, 0.18 ) !important; box-shadow: none !important; } :root[data-theme="dark"] .tutor-form-check-circle[checked], :root[data-theme="dark"] .tutor-form-check-input:checked, :root[data-theme="dark"] .tutor-course-topic-item .tutor-form-check-circle[checked] { background-color: var( --cmz-link ) !important; border-color: var( --cmz-link ) !important; } /* The green lesson header bar. Tutor sets its text with --tutor-color-white; this is the belt-and-braces so the title and progress stay white on green even if that variable moves again. */ :root[data-theme="dark"] .tutor-course-topic-single-header, :root[data-theme="dark"] .tutor-course-topic-single-header *, :root[data-theme="dark"] .tutor-topbar-mark-btn { color: #ffffff !important; } :root[data-theme="dark"] .tutor-course-topic-item:hover { background-color: var( --cmz-surface-2 ) !important; } /* --------------------------------------------------------------------------- 4. Document base --------------------------------------------------------------------------- */ /* html carries the background too, so nothing shows through a gap if body is ever neutralised by a broader rule. */ :root[data-theme="dark"], :root[data-theme="dark"] body, :root[data-theme="dark"] #page-container, :root[data-theme="dark"] #main-content, :root[data-theme="dark"] .et-db #et-boc .et-l { background-color: var( --cmz-bg ) !important; color: var( --cmz-text ) !important; } /* The :not() guards keep these away from Enlighter, which renders code lines as
  • inside 
    /
       and colours each token itself. */
:root[data-theme="dark"] p:not( pre p ),
:root[data-theme="dark"] li:not( .EnlighterJS li ):not( .enlighter-default li ):not( pre li ):not( ol[class*="Enlighter"] li ),
:root[data-theme="dark"] dd,
:root[data-theme="dark"] dt,
:root[data-theme="dark"] blockquote,
:root[data-theme="dark"] .post-content,
:root[data-theme="dark"] .et_pb_text,
:root[data-theme="dark"] .et-db #et-boc .et-l .et_pb_text {
	color: var( --cmz-text ) !important;
}

:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] h5,
:root[data-theme="dark"] h6,
:root[data-theme="dark"] h1 a,
:root[data-theme="dark"] h2 a,
:root[data-theme="dark"] h3 a,
:root[data-theme="dark"] h4 a,
:root[data-theme="dark"] h5 a,
:root[data-theme="dark"] h6 a,
:root[data-theme="dark"] .archive h1,
:root[data-theme="dark"] .search h1,
:root[data-theme="dark"] .et-db #et-boc .et-l h1,
:root[data-theme="dark"] .et-db #et-boc .et-l h2,
:root[data-theme="dark"] .et-db #et-boc .et-l h3,
:root[data-theme="dark"] .et-db #et-boc .et-l h4,
:root[data-theme="dark"] .et-db #et-boc .et-l h5,
:root[data-theme="dark"] .et-db #et-boc .et-l h6 {
	color: var( --cmz-heading ) !important;
}

/* Link colour applies only to anchors that are *text* links.
   An anchor styled as a button brings its own background — Tutor's green
   "Next", the gold plan selector, the red "Cancel subscription" — and forcing
   the link colour onto those produced green-on-gold at 1.14:1 and
   green-on-green at 1.8:1. Excluding anything that carries its own background
   (inline or by class) fixes the whole family at once instead of one at a
   time, and it keeps working for buttons that don't exist yet. */
:root[data-theme="dark"] a:not( [style*="background"] ):not( [class*="btn" ] ):not( [class*="button"] ):not( .button ),
:root[data-theme="dark"] a:not( [style*="background"] ):not( [class*="btn"] ):not( [class*="button"] ):not( .button ):visited {
	color: var( --cmz-link ) !important;
}

:root[data-theme="dark"] a:not( [style*="background"] ):not( [class*="btn"] ):not( [class*="button"] ):not( .button ):hover {
	color: var( --cmz-link-hover ) !important;
}

/* Whatever sits inside a button follows the button's own colour, so a nested
    label can't pick the link colour back up. */
:root[data-theme="dark"] .tutor-btn > *,
:root[data-theme="dark"] a[style*="background"] > *,
:root[data-theme="dark"] .button > * {
	color: inherit !important;
}

/* Disabled controls read as unavailable rather than as a light-mode leftover. */
:root[data-theme="dark"] .tutor-btn.disabled,
:root[data-theme="dark"] .tutor-btn[disabled],
:root[data-theme="dark"] .tutor-iconic-btn.disabled,
:root[data-theme="dark"] .tutor-iconic-btn[disabled] {
	background-color: var( --cmz-surface-3 ) !important;
	color: var( --cmz-muted ) !important;
	border-color: var( --cmz-border ) !important;
}

:root[data-theme="dark"] hr {
	border-color: var( --cmz-border ) !important;
}

/* ---------------------------------------------------------------------------
   5. Header, navigation, search
   --------------------------------------------------------------------------- */

:root[data-theme="dark"] #main-header,
:root[data-theme="dark"] #et-navigation,
:root[data-theme="dark"] .et-fixed-header #main-header,
:root[data-theme="dark"] #et-secondary-nav,
:root[data-theme="dark"] #et-mobile-navigation,
:root[data-theme="dark"] #et-mobile-navigation nav,
:root[data-theme="dark"] .et_pb_menu__wrap {
	background-color: var( --cmz-surface ) !important;
	border-color: var( --cmz-border ) !important;
}

:root[data-theme="dark"] #et-navigation > ul > li > a,
:root[data-theme="dark"] #et-secondary-nav a,
:root[data-theme="dark"] #et-mobile-navigation a,
:root[data-theme="dark"] #et-info a {
	color: var( --cmz-text ) !important;
}

:root[data-theme="dark"] #et-navigation > ul > li > a:hover,
:root[data-theme="dark"] #et-mobile-navigation a:hover {
	color: var( --cmz-heading ) !important;
}

/* Dropdown panels (the Account submenu lives here). */
:root[data-theme="dark"] #et-navigation ul li ul,
:root[data-theme="dark"] #et-navigation ul.sub-menu,
:root[data-theme="dark"] .nav li ul {
	background-color: var( --cmz-surface-2 ) !important;
	border-color: var( --cmz-border ) !important;
}

:root[data-theme="dark"] #et-navigation ul.sub-menu li a:hover {
	background-color: var( --cmz-surface-3 ) !important;
}

/* The top utility strip sits *behind* the navigation, so it recedes rather
   than matching it — at the same colour the two rows read as one slab and the
   header loses its edge. */
:root[data-theme="dark"] #et-info,
:root[data-theme="dark"] #top-header {
	background-color: var( --cmz-inset ) !important;
}

/* Summer-promo strip. It started as a pale amber band — the brightest thing
   on a dark page — and the first fix over-corrected into brown, which read as
   a stripe of a different material sitting on top of the site.
   The bar is chrome, so it takes the navigation's colour and disappears into
   the header. Amber survives where it actually carries meaning: the wording,
   the countdown digits and the code. Colour on the text, not on the panel. */
:root[data-theme="dark"] .cmz-promo-bar {
	background-color: var( --cmz-inset ) !important;
	color: var( --cmz-text ) !important;
	border-color: var( --cmz-border ) !important;
}

:root[data-theme="dark"] .cmz-promo-bar__text,
:root[data-theme="dark"] .cmz-promo-bar__label,
:root[data-theme="dark"] .cmz-promo-bar__unit {
	color: var( --cmz-text ) !important;
}

/* On the recessed bar the digits read as raised keys rather than wells —
   they need to sit above their strip, not level with it. */
:root[data-theme="dark"] .cmz-promo-bar__num {
	background-color: var( --cmz-surface ) !important;
	color: #f7d48e !important;
	border-color: transparent !important;
}

:root[data-theme="dark"] .cmz-promo-bar__code {
	background-color: var( --cmz-surface ) !important;
	color: #f7d48e !important;
	border-color: var( --cmz-border ) !important;
}

:root[data-theme="dark"] .et-search-field,
:root[data-theme="dark"] #et-info .et-top-search .et-search-field {
	background-color: var( --cmz-surface-3 ) !important;
	color: var( --cmz-text ) !important;
	border-color: var( --cmz-border ) !important;
}

:root[data-theme="dark"] #et-trending,
:root[data-theme="dark"] #et-trending a {
	background-color: transparent !important;
	color: var( --cmz-text ) !important;
}

/* ---------------------------------------------------------------------------
   6. Content modules, cards, widgets (Extra / Divi)
   --------------------------------------------------------------------------- */

:root[data-theme="dark"] .module,
:root[data-theme="dark"] .et_pb_module,
:root[data-theme="dark"] .et_extra_other_module,
:root[data-theme="dark"] .page article,
:root[data-theme="dark"] .authors-page .page,
:root[data-theme="dark"] .single .post,
:root[data-theme="dark"] .widget,
:root[data-theme="dark"] .et_pb_widget,
:root[data-theme="dark"] .et-db #et-boc .et-l .et_pb_module,
:root[data-theme="dark"] .et-db #et-boc .et-l .et_extra_other_module {
	background-color: var( --cmz-surface ) !important;
	border-color: var( --cmz-border ) !important;
	color: var( --cmz-text ) !important;
}

/* Sections and rows are layout, not surfaces — keep them transparent so the
   page background shows through rather than stacking three greys. */
:root[data-theme="dark"] .et_pb_section,
:root[data-theme="dark"] .et_pb_row,
:root[data-theme="dark"] .et_pb_column,
:root[data-theme="dark"] .et-db #et-boc .et-l .et_pb_section,
:root[data-theme="dark"] .et-db #et-boc .et-l .et_pb_row {
	background-color: transparent !important;
}

:root[data-theme="dark"] .et_pb_post_title,
:root[data-theme="dark"] .post-meta,
:root[data-theme="dark"] .post-meta a,
:root[data-theme="dark"] .et_pb_module_header {
	color: var( --cmz-muted ) !important;
}

/* ---------------------------------------------------------------------------
   7. Footer
   --------------------------------------------------------------------------- */

/* Extra's footer is #footer (not #main-footer) and already ships a dark
   #232323 — realign it to the palette so it doesn't read as a third grey. */
:root[data-theme="dark"] #footer,
:root[data-theme="dark"] #main-footer,
:root[data-theme="dark"] #footer-bottom,
:root[data-theme="dark"] .footer-widget,
:root[data-theme="dark"] #et-footer-nav {
	background-color: var( --cmz-surface ) !important;
	border-color: var( --cmz-border ) !important;
	color: var( --cmz-text ) !important;
}

:root[data-theme="dark"] #main-footer a,
:root[data-theme="dark"] #footer-bottom a,
:root[data-theme="dark"] .footer-widget a {
	color: var( --cmz-link ) !important;
}

/* ---------------------------------------------------------------------------
   8. Forms
   --------------------------------------------------------------------------- */

:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] input[type="search"],
:root[data-theme="dark"] input[type="url"],
:root[data-theme="dark"] input[type="tel"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select,
:root[data-theme="dark"] .tutor-form-control {
	background-color: var( --cmz-surface-2 ) !important;
	color: var( --cmz-text ) !important;
	border-color: var( --cmz-border ) !important;
}

/* WooCommerce/theme buttons keep their light-grey chrome otherwise — readable,
   but they read as leftovers from the light theme. */
/* Action = brand green, as a fill with WHITE text (5.12:1). An earlier pass
   used the light accent with dark text; it measured well but read as black
   letters on green, which is not the house style. */
:root[data-theme="dark"] .woocommerce .button,
:root[data-theme="dark"] .woocommerce-button,
:root[data-theme="dark"] .woocommerce-Button,
:root[data-theme="dark"] input[type="submit"],
:root[data-theme="dark"] button[type="submit"],
:root[data-theme="dark"] .tutor-btn-primary,
:root[data-theme="dark"] .tutor-btn.tutor-btn-primary {
	background-color: var( --cmz-accent-fill ) !important;
	color: #ffffff !important;
	border-color: var( --cmz-accent-fill ) !important;
}

:root[data-theme="dark"] .woocommerce .button:hover,
:root[data-theme="dark"] .woocommerce-button:hover,
:root[data-theme="dark"] .woocommerce-Button:hover,
:root[data-theme="dark"] input[type="submit"]:hover,
:root[data-theme="dark"] button[type="submit"]:hover,
:root[data-theme="dark"] .tutor-btn-primary:hover,
:root[data-theme="dark"] .tutor-btn.tutor-btn-primary:hover {
	background-color: var( --cmz-accent-fill-hover ) !important;
	color: #ffffff !important;
	border-color: var( --cmz-accent-fill-hover ) !important;
}

/* Tutor's plain .tutor-btn is already the brand green with white text, which
   is 3.83:1 and fails AA — "Buy Now" is exactly that button. Catching the
   base class (not just -primary) puts every solid Tutor button on the darker
   fill, where white passes. */
:root[data-theme="dark"] .tutor-btn:not( [class*="ghost"] ):not( [class*="outline"] ):not( [class*="link"] ):not( .disabled ):not( [disabled] ) {
	background-color: var( --cmz-accent-fill ) !important;
	color: #ffffff !important;
	border-color: var( --cmz-accent-fill ) !important;
}

/* Outline buttons keep a border, but a quiet one — a bright green outline
   turns every secondary control into a box competing with the real CTA. */
:root[data-theme="dark"] .tutor-btn-outline-primary {
	background-color: transparent !important;
	color: var( --cmz-link ) !important;
	border-color: var( --cmz-border ) !important;
}

/* Ghost/link buttons are text, not boxes. Setting a border colour on these
   is what put a green rectangle around "Wishlist" that isn't there in light
   mode — colour them and leave the border alone. */
:root[data-theme="dark"] .tutor-btn-ghost,
:root[data-theme="dark"] .tutor-btn-link,
:root[data-theme="dark"] .tutor-btn-ghost-light {
	background-color: transparent !important;
	color: var( --cmz-link ) !important;
}

:root[data-theme="dark"] ::placeholder {
	color: var( --cmz-muted ) !important;
	opacity: 1;
}

:root[data-theme="dark"] label,
:root[data-theme="dark"] legend {
	color: var( --cmz-text ) !important;
}

/* ---------------------------------------------------------------------------
   9. Tables (TablePress and plain)
   --------------------------------------------------------------------------- */

:root[data-theme="dark"] table:not( .EnlighterJS ):not( .EnlighterJS table ),
:root[data-theme="dark"] .tablepress {
	color: var( --cmz-text ) !important;
	border-color: var( --cmz-border ) !important;
}

:root[data-theme="dark"] th,
:root[data-theme="dark"] .tablepress thead th,
:root[data-theme="dark"] .tablepress tfoot th {
	background-color: var( --cmz-surface-2 ) !important;
	color: var( --cmz-heading ) !important;
	border-color: var( --cmz-border ) !important;
}

:root[data-theme="dark"] td:not( .EnlighterJS td ),
:root[data-theme="dark"] .tablepress tbody td {
	border-color: var( --cmz-border ) !important;
}

:root[data-theme="dark"] .tablepress .odd td {
	background-color: var( --cmz-surface ) !important;
}

:root[data-theme="dark"] .tablepress .even td {
	background-color: var( --cmz-surface-2 ) !important;
}

/* ---------------------------------------------------------------------------
   10. WooCommerce — My Account only. Checkout runs on Lemon Squeezy.
   --------------------------------------------------------------------------- */

:root[data-theme="dark"] .woocommerce-MyAccount-navigation a,
:root[data-theme="dark"] .woocommerce-MyAccount-content,
:root[data-theme="dark"] .woocommerce table.shop_table,
:root[data-theme="dark"] .woocommerce-Address address {
	background-color: var( --cmz-surface ) !important;
	color: var( --cmz-text ) !important;
	border-color: var( --cmz-border ) !important;
}

:root[data-theme="dark"] .woocommerce .woocommerce-info,
:root[data-theme="dark"] .woocommerce .woocommerce-message,
:root[data-theme="dark"] .woocommerce .woocommerce-error {
	background-color: var( --cmz-surface-2 ) !important;
	color: var( --cmz-text ) !important;
}

/* ---------------------------------------------------------------------------
   10b. Logged-in Tutor surfaces — the lesson player, dashboard and tables.

   These are the screens students actually live in, and they were the worst
   failure of the first pass: the broad text rules above lightened the copy
   while these containers kept `background:#fff`, giving near-white text on
   white. Every selector here is taken from Tutor's own stylesheet (the rules
   that declare a white background), not guessed — and each one sets a
   background and a colour *together*, so text can never be lightened onto a
   surface that stayed light.
   --------------------------------------------------------------------------- */

/* The lesson/spotlight player — the single most important screen. */
:root[data-theme="dark"] .tutor-course-spotlight-wrapper,
:root[data-theme="dark"] .tutor-course-single-content-wrapper,
:root[data-theme="dark"] .tutor-course-single-content-wrapper.tutor-course-single-sidebar-open,
:root[data-theme="dark"] .tutor-course-single-sidebar-wrapper,
:root[data-theme="dark"] .tutor-course-single-sidebar-title,
:root[data-theme="dark"] .tutor-lesson-modal-wrap,
:root[data-theme="dark"] .tutor-course-details-page {
	background-color: var( --cmz-bg ) !important;
	color: var( --cmz-text ) !important;
}

/* Dashboard shell, panels and controls. */
:root[data-theme="dark"] .tutor-dashboard,
:root[data-theme="dark"] .tutor-dashboard-content-inner,
:root[data-theme="dark"] .tutor-form-group,
:root[data-theme="dark"] .tutor-dropdown-select-options-container,
:root[data-theme="dark"] .tutor-dropdown-select-selected,
:root[data-theme="dark"] .tutor-qna-single-question,
:root[data-theme="dark"] .tutor-offcanvas,
:root[data-theme="dark"] .tutor-bg-white,
:root[data-theme="dark"] .tutor-large-notification,
:root[data-theme="dark"] .tutor-course-filter-container,
:root[data-theme="dark"] .tutor-modal-steps,
:root[data-theme="dark"] .tutor-course-per-page,
:root[data-theme="dark"] .tutor-search-popup-opener {
	background-color: var( --cmz-surface ) !important;
	color: var( --cmz-text ) !important;
	border-color: var( --cmz-border ) !important;
}

/* Tab strips (Course Info / Reviews / Announcements / …). Giving these a
   surface colour turned them into a pale band floating across the page.
   A tab row is a rule with labels on it, not a panel: keep it transparent,
   carry the whole thing on one hairline, and let the active tab be the only
   thing with colour. */
:root[data-theme="dark"] .tutor-nav-tabs,
:root[data-theme="dark"] .tutor-nav-tabs-container,
:root[data-theme="dark"] .tutor-nav,
:root[data-theme="dark"] .tutor-course-details-tab,
:root[data-theme="dark"] .tutor-nav-item {
	background-color: transparent !important;
	border-color: transparent !important;
}

:root[data-theme="dark"] .tutor-nav-tabs,
:root[data-theme="dark"] .tutor-nav {
	border-bottom: 1px solid var( --cmz-border ) !important;
}

:root[data-theme="dark"] .tutor-nav-link {
	background-color: transparent !important;
	color: var( --cmz-muted ) !important;
	border-color: transparent !important;
}

:root[data-theme="dark"] .tutor-nav-link:hover {
	color: var( --cmz-text ) !important;
}

:root[data-theme="dark"] .tutor-nav-link.is-active,
:root[data-theme="dark"] .tutor-nav-link.active {
	color: var( --cmz-link ) !important;
	border-bottom-color: var( --cmz-link ) !important;
}

/* The selected dashboard menu item sits on a green pill from Tutor, and the
   link-colour rule further up was painting its label green too — green on
   green. A filled item needs a light label, the same way the primary buttons
   do. Tutor already colours the icon with --tutor-color-white, so this just
   brings the text into line with it. */
/* The repeated .active is deliberate, not a typo. The generic link rule near
   the top scores (0,6,1) — four :not() clauses each count as a class — so a
   plain ".tutor-dashboard-menu-item.active > a" at (0,4,1) loses to it even
   with !important on both, and the label stayed green. Repeating the class
   lifts this to (0,7,1) so it wins outright. */
:root[data-theme="dark"] .tutor-dashboard-menu-item.active.active.active > a,
:root[data-theme="dark"] .tutor-dashboard-menu-item.active.active.active > a:hover,
:root[data-theme="dark"] .tutor-dashboard-menu-item.active.active .tutor-dashboard-menu-item-text,
:root[data-theme="dark"] .tutor-dashboard-menu-item.active.active .tutor-dashboard-menu-item-icon,
:root[data-theme="dark"] a.tutor-dashboard-menu-item-link.active.active.active {
	color: #ffffff !important;
}

/* The dashboard's two divider lines are PSEUDO-ELEMENTS, which is why setting
   border-color on their parents did nothing — and only one of them is even a
   border:
     .tutor-frontend-dashboard-header:after  -> a 1px box with a BACKGROUND
     ul.tutor-dashboard-permalinks:before    -> border-right
   Both inherit light-mode greys (#cdcfd5, #dcdfe5) and draw as bright white
   rules across a dark panel. Matched here at higher specificity than Tutor's
   own selectors, and softened to the same low-alpha edge as the lesson nav. */
:root[data-theme="dark"] .tutor-dashboard .tutor-frontend-dashboard-header::after {
	background: rgba( 255, 255, 255, 0.07 ) !important;
}

:root[data-theme="dark"] .tutor-dashboard .tutor-frontend-dashboard-maincontent ul.tutor-dashboard-permalinks::before {
	border-right-color: rgba( 255, 255, 255, 0.07 ) !important;
}

/* Any remaining structural borders in the dashboard, for the same reason. */
:root[data-theme="dark"] .tutor-dashboard-header,
:root[data-theme="dark"] .tutor-dashboard-left-menu,
:root[data-theme="dark"] .tutor-dashboard-content,
:root[data-theme="dark"] .tutor-dashboard-permalinks,
:root[data-theme="dark"] .tutor-dashboard-menu-divider,
:root[data-theme="dark"] .tutor-dashboard-menu-divider-header,
:root[data-theme="dark"] .tutor-dashboard-content-inner .tutor-mycourse-wrap {
	border-color: rgba( 255, 255, 255, 0.07 ) !important;
}

/* Dashboard tables: My Quiz Attempts, Order History. Zebra striping keeps
   rows separable without a light background. */
:root[data-theme="dark"] .tutor-table,
:root[data-theme="dark"] .tutor-table-responsive {
	background-color: transparent !important;
	color: var( --cmz-text ) !important;
	border-color: var( --cmz-border ) !important;
}

:root[data-theme="dark"] .tutor-table thead th,
:root[data-theme="dark"] .tutor-table thead td {
	background-color: var( --cmz-surface-2 ) !important;
	color: var( --cmz-heading ) !important;
	border-color: var( --cmz-border ) !important;
}

:root[data-theme="dark"] .tutor-table tbody tr,
:root[data-theme="dark"] .tutor-table tbody td {
	background-color: var( --cmz-surface ) !important;
	color: var( --cmz-text ) !important;
	border-color: var( --cmz-border ) !important;
}

:root[data-theme="dark"] .tutor-table tbody tr:nth-child( even ) td {
	background-color: var( --cmz-surface-2 ) !important;
}

:root[data-theme="dark"] .tutor-table tbody tr:hover td {
	background-color: var( --cmz-surface-3 ) !important;
}

/* Table cells inherit muted greys from Tutor's utilities; force legibility. */
:root[data-theme="dark"] .tutor-table td a {
	color: var( --cmz-link ) !important;
}

/* The lesson footer action bar (Previous / Mark as complete / Next) and the
   comment thread — both painted with Tutor's white token and both sitting
   below the fold, which is why they survived the earlier passes. */
:root[data-theme="dark"] .tutor-mobile-footer-navigation,
:root[data-theme="dark"] .tutor-course-topic-single-footer,
:root[data-theme="dark"] .tutor-lesson-footer,
:root[data-theme="dark"] #tutor-single-entry-content > .tutor-row:last-child {
	background-color: var( --cmz-surface ) !important;
	border-color: var( --cmz-border ) !important;
	color: var( --cmz-text ) !important;
	box-shadow: none !important;
}

:root[data-theme="dark"] .tutor-actual-comment,
:root[data-theme="dark"] .tutor-comment-textarea {
	background-color: var( --cmz-surface ) !important;
	color: var( --cmz-text ) !important;
}

/* Those speech-bubble arrows are white squares rotated 45deg; left alone they
   stay as bright specks on the dark thread. */
:root[data-theme="dark"] .tutor-actual-comment::before,
:root[data-theme="dark"] .tutor-actual-comment::after,
:root[data-theme="dark"] .tutor-comment-textarea::before,
:root[data-theme="dark"] .tutor-comment-textarea::after {
	background-color: var( --cmz-surface ) !important;
}

/* Progress bar: dark track, brand-green fill. It was rendering as a solid
   white bar. */
:root[data-theme="dark"] .tutor-progress-bar {
	background-color: var( --cmz-surface-3 ) !important;
}

:root[data-theme="dark"] .tutor-progress-filled,
:root[data-theme="dark"] .tutor-progress-value {
	background-color: var( --cmz-link ) !important;
}

/* ---------------------------------------------------------------------------
   10c. Code Maze Mentor panel.

   The mentor's chat panel is styled from inline CSS inside the plugin PHP
   (there is no stylesheet file), with light bubbles on a light panel. Its
   header is already #252520, so only the body needed work.
   --------------------------------------------------------------------------- */

:root[data-theme="dark"] #cmm-panel,
:root[data-theme="dark"] #cmm-panel .cmm-msgs,
:root[data-theme="dark"] #cmm-consent {
	background-color: var( --cmz-surface ) !important;
	color: var( --cmz-text ) !important;
}

/* Assistant bubbles (#f4f4f6) and the user's own bubble. */
:root[data-theme="dark"] #cmm-panel .cmm-msg,
:root[data-theme="dark"] #cmm-panel .cmm-bot,
:root[data-theme="dark"] #cmm-panel .cmm-me {
	background-color: var( --cmz-surface-2 ) !important;
	color: var( --cmz-text ) !important;
}

/* Voice bar, avatars and the mic button. */
:root[data-theme="dark"] #cmm-panel .cmm-voicebar,
:root[data-theme="dark"] #cmm-panel #cmm-mic,
:root[data-theme="dark"] #cmm-panel .cmm-fb-btn.is-on,
:root[data-theme="dark"] #cmm-decline {
	background-color: var( --cmz-surface-3 ) !important;
	color: var( --cmz-text ) !important;
}

:root[data-theme="dark"] #cmm-panel .cmm-voice-av,
:root[data-theme="dark"] #cmm-panel .cmm-vt-av,
:root[data-theme="dark"] #cmm-panel .cmm-chartag img {
	background-color: var( --cmz-surface-3 ) !important;
}

/* Voice names under the avatars: mentor's own #6b7280 is 2.7:1 on the
   darkened voice bar. */
:root[data-theme="dark"] #cmm-panel .cmm-voice-nm,
:root[data-theme="dark"] #cmm-panel .cmm-vt-nm {
	color: var( --cmz-muted ) !important;
}

:root[data-theme="dark"] #cmm-panel .cmm-voice.is-on .cmm-voice-nm,
:root[data-theme="dark"] #cmm-panel .cmm-voice[aria-pressed="true"] .cmm-voice-nm {
	color: var( --cmz-link ) !important;
}

/* Feedback thumbs. The audit flags these on `color`, but they render an emoji,
   so the glyph — not the text colour — is what's seen. Mentor dims them with
   `opacity:.4; filter:grayscale(1)`, which reads as a soft grey thumb on a
   white panel and as very nearly nothing on near-black. Restoring the emoji's
   own colour and lifting the opacity is the fix; the active state already has
   its own background. */
:root[data-theme="dark"] #cmm-panel .cmm-fb-btn {
	opacity: 0.8 !important;
	filter: none !important;
	color: var( --cmz-text ) !important;
}

:root[data-theme="dark"] #cmm-panel .cmm-fb-btn:hover,
:root[data-theme="dark"] #cmm-panel .cmm-fb-btn.is-on {
	opacity: 1 !important;
	background-color: var( --cmz-surface-3 ) !important;
}

:root[data-theme="dark"] #cmm-panel .cmm-fb-label,
:root[data-theme="dark"] #cmm-panel .cmm-freeleft {
	color: var( --cmz-muted ) !important;
}

/* Mentor's own code blocks — not Enlighter, so they need theming here.
   A code block reads best *recessed* below its bubble rather than raised
   above it; sitting on surface-3 made it a lighter slab that looked like a
   different material from the message around it. */
:root[data-theme="dark"] #cmm-panel .cmm-bot pre,
:root[data-theme="dark"] .cmm-log-md pre {
	background-color: var( --cmz-inset ) !important;
	color: var( --cmz-text ) !important;
	border-color: var( --cmz-border ) !important;
}

/* Inline code stays a chip, one step up from the bubble so it reads as
   inline rather than as a block. */
:root[data-theme="dark"] #cmm-panel .cmm-bot code,
:root[data-theme="dark"] .cmm-log-md code {
	background-color: var( --cmz-surface-3 ) !important;
	color: var( --cmz-text ) !important;
	border-color: var( --cmz-border ) !important;
}

/* …but code inside a pre must not double up the chip background. */
:root[data-theme="dark"] #cmm-panel .cmm-bot pre code,
:root[data-theme="dark"] .cmm-log-md pre code {
	background-color: transparent !important;
}

/* The "Change your plan" panel on My Account is built from inline style=""
   attributes with no classes, so an attribute selector is the only handle.
   This is fragile by construction — it breaks if those literals are edited.
   The durable fix is a class in the mentor plugin; logged in the roadmap. */
:root[data-theme="dark"] .woocommerce-MyAccount-content div[style*="#fcfcfc"] {
	background-color: var( --cmz-surface ) !important;
	border-color: var( --cmz-border ) !important;
	color: var( --cmz-text ) !important;
}

:root[data-theme="dark"] .woocommerce-MyAccount-content div[style*="#fcfcfc"] span,
:root[data-theme="dark"] .woocommerce-MyAccount-content div[style*="#fcfcfc"] strong {
	color: var( --cmz-text ) !important;
}

:root[data-theme="dark"] .woocommerce-MyAccount-content a[style*="background:#fff"] {
	background-color: var( --cmz-surface-3 ) !important;
	color: var( --cmz-heading ) !important;
	border-color: var( --cmz-border ) !important;
}

/* ---------------------------------------------------------------------------
   11. Hands off: Enlighter already ships a dark (monokai) theme.

   Note there is deliberately no "reset" rule here. `revert` would roll these
   properties back past *all* author styles — including Enlighter's own monokai
   colours — leaving code blocks unstyled. The correct approach is to never
   match these elements in the first place, which is what the :not() guards on
   the broad text and table rules above do. Enlighter renders code lines as
   
    1.  inside 
      /
        , which is exactly what those guards exclude.
   --------------------------------------------------------------------------- */

/* Inline  outside Enlighter still needs a dark surface.
   The border is deliberately near the surface colour: inherited from light
   mode it drew a bright box around every inline token, and a page of prose
   with a dozen of them read as a row of outlined chips rather than as text.
   #454444 separates the chip from the paragraph without fencing it. */
:root[data-theme="dark"] code:not( [class*="Enlighter"] ):not( [class*="enlighter"] ) {
	background-color: var( --cmz-surface-2 ) !important;
	color: #e6c07b !important;
	border-color: #454444 !important;
}