/*
 * KDLX dark mode.
 *
 * Activated by [data-kdlx-dark] on <html> (set pre-paint by the inline
 * head script in inc/blog-features/dark-mode.php).
 *
 * Structure:
 *  1. Six preset palettes define --dm-* variables.
 *  2. One block remaps the theme's own vars (--base-*, --contrast-*,
 *     --accent, --kdlx-*) to those variables — this alone darkens every
 *     Customizer-driven surface and all kdlx-* components using them.
 *  3. Targeted overrides for elements with hard-coded light colors.
 *  4. Toggle button styles (light-mode fallbacks included).
 */

/* ---------------------------------------------------------------
   1. Preset palettes
--------------------------------------------------------------- */

html[data-kdlx-dark][data-kdlx-dark-preset="charcoal"] {
	--dm-bg-full: #16171a;
	--dm-surface-full: #212327;
	--dm-surface-2-full: #2c2f35;
	--dm-input-full: #101114;
	--dm-text: #f2f4f7;
	--dm-muted: #b5bac3;
	--dm-faint: #82868f;
	--dm-accent: #4d7cf5;
	--dm-accent-strong: #6f95f7;
	--dm-on-accent: #ffffff;
	--dm-border: rgba(255, 255, 255, 0.09);
	--dm-border-2: rgba(255, 255, 255, 0.17);
}

html[data-kdlx-dark][data-kdlx-dark-preset="midnight"] {
	--dm-bg-full: #0e1622;
	--dm-surface-full: #16202f;
	--dm-surface-2-full: #1f2c40;
	--dm-input-full: #0a1119;
	--dm-text: #e5ecf5;
	--dm-muted: #a3b2c7;
	--dm-faint: #7a8ca3;
	--dm-accent: #6db3ff;
	--dm-accent-strong: #94c8ff;
	--dm-on-accent: #0a1a2e;
	--dm-border: rgba(255, 255, 255, 0.09);
	--dm-border-2: rgba(255, 255, 255, 0.17);
}

html[data-kdlx-dark][data-kdlx-dark-preset="sepia"] {
	--dm-bg-full: #201b15;
	--dm-surface-full: #2a241c;
	--dm-surface-2-full: #363026;
	--dm-input-full: #1a1510;
	--dm-text: #efe4d1;
	--dm-muted: #c4b096;
	--dm-faint: #978468;
	--dm-accent: #e0a95c;
	--dm-accent-strong: #eebd7d;
	--dm-on-accent: #241a08;
	--dm-border: rgba(255, 235, 205, 0.10);
	--dm-border-2: rgba(255, 235, 205, 0.18);
}

html[data-kdlx-dark][data-kdlx-dark-preset="forest"] {
	--dm-bg-full: #131a16;
	--dm-surface-full: #1a241f;
	--dm-surface-2-full: #222f28;
	--dm-input-full: #0e1512;
	--dm-text: #e2ece5;
	--dm-muted: #a4b8ab;
	--dm-faint: #7c9284;
	--dm-accent: #6dc58f;
	--dm-accent-strong: #8fd8ab;
	--dm-on-accent: #0c2014;
	--dm-border: rgba(255, 255, 255, 0.09);
	--dm-border-2: rgba(255, 255, 255, 0.17);
}

html[data-kdlx-dark][data-kdlx-dark-preset="plum"] {
	--dm-bg-full: #1a1620;
	--dm-surface-full: #231d2b;
	--dm-surface-2-full: #2e2739;
	--dm-input-full: #131018;
	--dm-text: #ece6f2;
	--dm-muted: #b3a9c2;
	--dm-faint: #8a7f9c;
	--dm-accent: #b78ef0;
	--dm-accent-strong: #cbaaf6;
	--dm-on-accent: #1f1230;
	--dm-border: rgba(255, 255, 255, 0.09);
	--dm-border-2: rgba(255, 255, 255, 0.17);
}

html[data-kdlx-dark][data-kdlx-dark-preset="amoled"] {
	--dm-bg-full: #000000;
	--dm-surface-full: #121212;
	--dm-surface-2-full: #1f1f1f;
	--dm-input-full: #0a0a0a;
	--dm-text: #ececec;
	--dm-muted: #a8a8a8;
	--dm-faint: #7a7a7a;
	--dm-accent: #4fc3f7;
	--dm-accent-strong: #7fd4fa;
	--dm-on-accent: #001018;
	--dm-border: rgba(255, 255, 255, 0.10);
	--dm-border-2: rgba(255, 255, 255, 0.18);
}

/* ---------------------------------------------------------------
   2. Variable remap — recolors every Customizer-driven surface
--------------------------------------------------------------- */

html[data-kdlx-dark] {
	color-scheme: dark;

	/* Dark intensity: presets define the 100% "full dark" anchors;
	   the customizer slider mixes each background toward a neutral
	   light gray so the whole palette lightens while text stays
	   white and accents keep their saturation.
	   --kdlx-dark-intensity is set inline on <html> (head script). */
	--kdlx-dark-intensity: 90%;
	--dm-light-anchor: #eef0f3;
	--dm-input-anchor: #dfe3e9;

	--dm-bg: color-mix(in srgb, var(--dm-bg-full) var(--kdlx-dark-intensity), var(--dm-light-anchor));
	--dm-surface: color-mix(in srgb, var(--dm-surface-full) var(--kdlx-dark-intensity), var(--dm-light-anchor));
	--dm-surface-2: color-mix(in srgb, var(--dm-surface-2-full) var(--kdlx-dark-intensity), var(--dm-light-anchor));
	--dm-input: color-mix(in srgb, var(--dm-input-full) var(--kdlx-dark-intensity), var(--dm-input-anchor));

	/* GP-style palette vars used by the dynamic CSS. */
	--base: var(--dm-bg);
	--base-2: var(--dm-bg);
	--base-3: var(--dm-surface);
	--contrast: var(--dm-text);
	--contrast-2: var(--dm-muted);
	--contrast-3: var(--dm-faint);
	--accent: var(--dm-accent);
	--accent-1: var(--dm-accent-strong);

	/* Semantic vars used by kdlx-* components (shortcodes.css). */
	--kdlx-card-bg: var(--dm-surface);
	--kdlx-border: var(--dm-border-2);
	--kdlx-accent: var(--dm-accent);
}

/* Browsers without color-mix keep the 100% preset colors. */
@supports not (background-color: color-mix(in srgb, red, blue)) {
	html[data-kdlx-dark] {
		--dm-bg: var(--dm-bg-full);
		--dm-surface: var(--dm-surface-full);
		--dm-surface-2: var(--dm-surface-2-full);
		--dm-input: var(--dm-input-full);
	}
}

/* ---------------------------------------------------------------
   3. Component overrides for hard-coded light colors
--------------------------------------------------------------- */

/* Base text & links — customizer colors are hard-coded #3a3a3a/#1e73be. */
html[data-kdlx-dark] body {
	background-color: var(--dm-bg);
	color: var(--dm-text);
}

html[data-kdlx-dark] h1, html[data-kdlx-dark] h2, html[data-kdlx-dark] h3,
html[data-kdlx-dark] h4, html[data-kdlx-dark] h5, html[data-kdlx-dark] h6,
html[data-kdlx-dark] .entry-title, html[data-kdlx-dark] .entry-title a,
html[data-kdlx-dark] .page-title, html[data-kdlx-dark] .comments-title,
html[data-kdlx-dark] .comment-reply-title {
	color: var(--dm-text);
}

html[data-kdlx-dark] a {
	color: var(--dm-accent);
}

html[data-kdlx-dark] a:hover,
html[data-kdlx-dark] a:focus,
html[data-kdlx-dark] a:active {
	color: var(--dm-accent-strong);
}

html[data-kdlx-dark] .entry-meta,
html[data-kdlx-dark] .entry-meta a,
html[data-kdlx-dark] .entry-footer,
html[data-kdlx-dark] .cat-links, html[data-kdlx-dark] .tags-links,
html[data-kdlx-dark] .entry-summary,
html[data-kdlx-dark] .comment-metadata, html[data-kdlx-dark] .comment-metadata a,
html[data-kdlx-dark] .post-navigation,
html[data-kdlx-dark] .kdlx-breadcrumb, html[data-kdlx-dark] .kdlx-breadcrumb span,
html[data-kdlx-dark] .kdlx-post-card-meta,
html[data-kdlx-dark] .kdlx-related-post-meta,
html[data-kdlx-dark] .kdlx-more-posts-date,
html[data-kdlx-dark] .kdlx-bc-current,
html[data-kdlx-dark] .kdlx-author-title,
html[data-kdlx-dark] .kdlx-author-bio {
	color: var(--dm-muted);
}

html[data-kdlx-dark] .entry-meta a:hover,
html[data-kdlx-dark] .kdlx-breadcrumb a:hover {
	color: var(--dm-accent-strong);
}

/* Containers that hard-code light backgrounds. */
html[data-kdlx-dark] .footer-widgets,
html[data-kdlx-dark] .site-footer {
	background-color: var(--dm-surface);
	color: var(--dm-muted);
}

html[data-kdlx-dark] .top-bar {
	background-color: var(--dm-surface);
	color: var(--dm-muted);
}

/* Navigation dropdowns (hard-coded #3f3f3f / #4f4f4f). */
html[data-kdlx-dark] .main-navigation ul ul,
html[data-kdlx-dark] .main-navigation .main-nav ul ul li > a {
	background-color: var(--dm-surface-2);
}

html[data-kdlx-dark] .main-navigation .main-nav ul ul li:not([class*="current-menu-"]) > a:hover,
html[data-kdlx-dark] .main-navigation .main-nav ul ul li:not([class*="current-menu-"]) > a:focus,
html[data-kdlx-dark] .main-navigation .main-nav ul ul li:not([class*="current-menu-"]):hover > a,
html[data-kdlx-dark] .main-navigation .main-nav ul ul li:not([class*="current-menu-"]):focus > a {
	background-color: var(--dm-surface);
	color: var(--dm-text);
}

html[data-kdlx-dark] .main-navigation .main-nav ul ul li[class*="current-menu-"] > a {
	background-color: var(--dm-surface);
	color: var(--dm-accent);
}

html[data-kdlx-dark] .main-navigation a,
html[data-kdlx-dark] .menu-toggle {
	color: var(--dm-text);
}

html[data-kdlx-dark] .main-navigation a:hover {
	color: var(--dm-accent-strong);
}

/* Black-rgba borders → light borders. */
html[data-kdlx-dark] .kdlx-faq-item,
html[data-kdlx-dark] .kdlx-faq .kdlx-faq-item,
html[data-kdlx-dark] .kdlx-related-posts,
html[data-kdlx-dark] .kdlx-more-posts,
html[data-kdlx-dark] .kdlx-more-posts-list li,
html[data-kdlx-dark] .kdlx-post-card,
html[data-kdlx-dark] .kdlx-home-section-heading,
html[data-kdlx-dark] .widget ul li,
html[data-kdlx-dark] .page-header,
html[data-kdlx-dark] .paging-navigation,
html[data-kdlx-dark] .entry-footer,
html[data-kdlx-dark] .comment,
html[data-kdlx-dark] .comment-list .comment,
html[data-kdlx-dark] .comments-area,
html[data-kdlx-dark] hr,
html[data-kdlx-dark] .wp-block-separator,
html[data-kdlx-dark] .entry-content th,
html[data-kdlx-dark] .entry-content td,
html[data-kdlx-dark] table, html[data-kdlx-dark] th, html[data-kdlx-dark] td {
	border-color: var(--dm-border);
}

/* Forms. */
html[data-kdlx-dark] input[type="text"],
html[data-kdlx-dark] input[type="email"],
html[data-kdlx-dark] input[type="url"],
html[data-kdlx-dark] input[type="password"],
html[data-kdlx-dark] input[type="search"],
html[data-kdlx-dark] input[type="number"],
html[data-kdlx-dark] input[type="tel"],
html[data-kdlx-dark] input[type="date"],
html[data-kdlx-dark] input[type="datetime-local"],
html[data-kdlx-dark] select,
html[data-kdlx-dark] textarea {
	background-color: var(--dm-input);
	border-color: var(--dm-border-2);
	color: var(--dm-text);
}

html[data-kdlx-dark] input::placeholder,
html[data-kdlx-dark] textarea::placeholder {
	color: var(--dm-faint);
}

html[data-kdlx-dark] input:focus,
html[data-kdlx-dark] select:focus,
html[data-kdlx-dark] textarea:focus {
	border-color: var(--dm-accent);
	outline-color: var(--dm-accent);
}

/* Buttons keep accent. */
html[data-kdlx-dark] .button,
html[data-kdlx-dark] button,
html[data-kdlx-dark] input[type="button"],
html[data-kdlx-dark] input[type="reset"],
html[data-kdlx-dark] input[type="submit"],
html[data-kdlx-dark] .wp-block-button__link,
html[data-kdlx-dark] .kdlx-sc-button {
	background-color: var(--dm-accent);
	color: var(--dm-on-accent);
	border-color: var(--dm-accent);
}

html[data-kdlx-dark] .button:hover,
html[data-kdlx-dark] button:hover,
html[data-kdlx-dark] input[type="submit"]:hover,
html[data-kdlx-dark] .wp-block-button__link:hover,
html[data-kdlx-dark] .kdlx-sc-button:hover {
	background-color: var(--dm-accent-strong);
	border-color: var(--dm-accent-strong);
	color: var(--dm-on-accent);
}

/* Code. */
html[data-kdlx-dark] code,
html[data-kdlx-dark] kbd,
html[data-kdlx-dark] tt,
html[data-kdlx-dark] var,
html[data-kdlx-dark] pre {
	background-color: var(--dm-surface-2);
	border-color: var(--dm-border);
	color: var(--dm-text);
}

html[data-kdlx-dark] blockquote {
	border-color: var(--dm-border-2);
	color: var(--dm-muted);
	background-color: var(--dm-surface);
}

html[data-kdlx-dark] mark,
html[data-kdlx-dark] ins {
	background-color: rgba(255, 213, 79, 0.25);
	color: var(--dm-text);
}

/* --- KDLX components ------------------------------------------ */

/* TOC box + chevron (hard-coded whites). */
html[data-kdlx-dark] .kdlx-toc-toggle {
	background-color: var(--dm-surface-2);
	border-color: var(--dm-border-2);
	color: var(--dm-text);
}

html[data-kdlx-dark] .kdlx-toc-toggle:hover {
	background-color: var(--dm-surface);
	color: var(--dm-accent-strong);
}

html[data-kdlx-dark] .kdlx-toc-box-head {
	border-bottom-color: var(--dm-border);
}

/* Affiliate disclosure — warm light tint → warm dark tint. */
html[data-kdlx-dark] .kdlx-sa-disclosure {
	background-color: rgba(224, 169, 92, 0.10);
	border-color: rgba(224, 169, 92, 0.40);
	color: var(--dm-text);
}

/* Review collapse fade already uses --kdlx-card-bg. */

/* Callouts & takeaways — pastel tints → accent-tinted surfaces. */
html[data-kdlx-dark] .kdlx-callout {
	background-color: color-mix(in srgb, var(--dm-accent) 12%, var(--dm-surface));
	color: var(--dm-text);
}

html[data-kdlx-dark] .kdlx-callout.kdlx-callout-info {
	background-color: color-mix(in srgb, var(--dm-accent) 12%, var(--dm-surface));
}

html[data-kdlx-dark] .kdlx-callout.kdlx-callout-note {
	background-color: color-mix(in srgb, #ffffff 6%, var(--dm-surface));
}

html[data-kdlx-dark] .kdlx-callout.kdlx-callout-tip {
	background-color: rgba(109, 197, 143, 0.10);
	color: #b8e0c6;
}

html[data-kdlx-dark] .kdlx-callout.kdlx-callout-warning {
	background-color: rgba(224, 169, 92, 0.10);
	color: #ecd3a8;
}

html[data-kdlx-dark] .kdlx-callout.kdlx-callout-important {
	background-color: rgba(176, 151, 226, 0.12);
	color: #cfc2ea;
}

html[data-kdlx-dark] .kdlx-callout.kdlx-callout-links {
	background-color: color-mix(in srgb, var(--dm-accent) 12%, var(--dm-surface));
}

html[data-kdlx-dark] .kdlx-callout code {
	background: rgba(255, 255, 255, 0.10);
}

html[data-kdlx-dark] .kdlx-step::before {
	background: color-mix(in srgb, #ffffff 10%, var(--dm-surface));
	color: var(--dm-text);
}

html[data-kdlx-dark] .kdlx-step:not(:last-child)::after {
	background: color-mix(in srgb, #ffffff 12%, var(--dm-surface));
}

html[data-kdlx-dark] .kdlx-takeaways {
	background-color: color-mix(in srgb, var(--dm-accent) 10%, var(--dm-surface));
	color: var(--dm-text);
}

/* Comparison table. */
html[data-kdlx-dark] .kdlx-compare thead th {
	background-color: color-mix(in srgb, var(--dm-accent) 22%, var(--dm-surface));
	border-color: var(--dm-border-2);
	color: var(--dm-text);
}

html[data-kdlx-dark] .kdlx-compare th,
html[data-kdlx-dark] .kdlx-compare td {
	border-color: var(--dm-border);
	color: var(--dm-text);
}

html[data-kdlx-dark] .kdlx-compare tbody tr:nth-child(even) {
	background-color: rgba(255, 255, 255, 0.03);
}

/* Deal box. */
html[data-kdlx-dark] .kdlx-deal {
	background-color: rgba(224, 169, 92, 0.08);
	border-color: rgba(224, 169, 92, 0.5);
}

html[data-kdlx-dark] .kdlx-deal-code {
	background-color: var(--dm-surface-2);
	border-color: #e0a95c;
	color: var(--dm-text);
}

/* Pattern boxes — white cards → dark surfaces. */
html[data-kdlx-dark] .kdlx-toplist-item,
html[data-kdlx-dark] .kdlx-guide-step,
html[data-kdlx-dark] .kdlx-commercial-cta,
html[data-kdlx-dark] .kdlx-review-box {
	background-color: var(--dm-surface);
	border-color: var(--dm-border);
	color: var(--dm-text);
}

html[data-kdlx-dark] .kdlx-toplist-rank,
html[data-kdlx-dark] .kdlx-guide-step-number {
	background-color: var(--dm-accent);
	color: var(--dm-on-accent);
}

/* Toplist price pill — the lime light-mode chip becomes the accent
   button color so every CTA shares one palette accent. */
html[data-kdlx-dark] .kdlx-toplist-price {
	background-color: var(--dm-accent);
	color: var(--dm-on-accent);
}

html[data-kdlx-dark] .kdlx-toplist-price:hover {
	background-color: var(--dm-accent-strong);
	color: var(--dm-on-accent);
}

/* Lime rank numerals → accent. */
html[data-kdlx-dark] .kdlx-toplist-num {
	color: var(--dm-accent);
}

/* Author box (accent border). */
html[data-kdlx-dark] .kdlx-author-box {
	border-color: var(--dm-accent);
	background-color: var(--dm-surface);
}

html[data-kdlx-dark] .kdlx-author-name,
html[data-kdlx-dark] .kdlx-author-name a {
	color: var(--dm-text);
}

html[data-kdlx-dark] .kdlx-author-socials a {
	color: var(--dm-muted);
}

html[data-kdlx-dark] .kdlx-author-socials a:hover {
	color: var(--dm-accent-strong);
}

/* Sidebar ads / inline ads borders. */
html[data-kdlx-dark] .kdlx-sidebar-ad,
html[data-kdlx-dark] .kdlx-inline-ad {
	border-color: var(--dm-border);
}

/* Cards — keep section heading accent underline readable. */
html[data-kdlx-dark] .kdlx-home-section-heading {
	--kdlx-hlc: var(--dm-accent);
}

html[data-kdlx-dark] .kdlx-home-section-more {
	color: var(--dm-accent);
}

/* Review rating stars stay amber — already readable on dark. */

/* Back to top. */
html[data-kdlx-dark] .kdlx-back-to-top {
	background-color: var(--dm-surface-2);
	color: var(--dm-text);
	border-color: var(--dm-border-2);
}

/* Search widget. */
html[data-kdlx-dark] .widget .search-field,
html[data-kdlx-dark] .search-form .search-field {
	background-color: var(--dm-input);
	border-color: var(--dm-border-2);
	color: var(--dm-text);
}

/* ---------------------------------------------------------------
   4. Toggle button (styled for both modes)
--------------------------------------------------------------- */

.kdlx-dark-toggle {
	position: fixed;
	bottom: 86px;
	right: 24px;
	z-index: 9999;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.14);
	background: #ffffff;
	color: #333333;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.kdlx-dark-toggle:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

.kdlx-dark-toggle--left {
	right: auto;
	left: 24px;
}

.kdlx-dark-toggle .kdlx-dark-toggle__sun { display: none; }
.kdlx-dark-toggle .kdlx-dark-toggle__moon { display: inline-block; }

html[data-kdlx-dark] .kdlx-dark-toggle {
	background: var(--dm-surface-2);
	border-color: var(--dm-border-2);
	color: #f0c64c;
}

html[data-kdlx-dark] .kdlx-dark-toggle .kdlx-dark-toggle__sun { display: inline-block; }
html[data-kdlx-dark] .kdlx-dark-toggle .kdlx-dark-toggle__moon { display: none; }

/* On small screens keep clear of the back-to-top button. */
@media (max-width: 768px) {
	.kdlx-dark-toggle {
		width: 42px;
		height: 42px;
		bottom: 78px;
		right: 16px;
	}
	.kdlx-dark-toggle--left {
		right: auto;
		left: 16px;
	}
}

/* ---------------------------------------------------------------
   5. Inline styles inside post content
   Generated/imported posts often hard-code Tailwind light colors
   (background:#F8FAFC, color:#7C2D12…) that CSS alone cannot reach.
   These attribute selectors neutralize ONLY known-light hexes, so
   accent inline colors (#EE4D2D, #059669, #DC2626…) stay intact.
--------------------------------------------------------------- */

/* 5a. Light inline backgrounds → dark surface + readable text. */
html[data-kdlx-dark] .entry-content :is(
	[style*="background:#fff" i],
	[style*="background:#f8fafc" i],
	[style*="background:#f1f5f9" i],
	[style*="background:#e2e8f0" i],
	[style*="background:#f9fafb" i],
	[style*="background:#f3f4f6" i],
	[style*="background:#e5e7eb" i],
	[style*="background:#fafafa" i],
	[style*="background:#f5f5f5" i],
	[style*="background:#e5e5e5" i],
	[style*="background:#f4f4f4" i],
	[style*="background:#fcfcfc" i],
	[style*="background:#fdfdfd" i],
	[style*="background:#efefef" i],
	[style*="background:#fefefe" i],
	[style*="background:#fef2f2" i],
	[style*="background:#fee2e2" i],
	[style*="background:#fecaca" i],
	[style*="background:#ffedd5" i],
	[style*="background:#fed7aa" i],
	[style*="background:#fffbeb" i],
	[style*="background:#fef3c7" i],
	[style*="background:#fefce8" i],
	[style*="background:#fef9c3" i],
	[style*="background:#f7fee7" i],
	[style*="background:#ecfccb" i],
	[style*="background:#f0fdf4" i],
	[style*="background:#dcfce7" i],
	[style*="background:#bbf7d0" i],
	[style*="background:#ecfdf5" i],
	[style*="background:#d1fae5" i],
	[style*="background:#f0fdfa" i],
	[style*="background:#ccfbf1" i],
	[style*="background:#ecfeff" i],
	[style*="background:#cffafe" i],
	[style*="background:#f0f9ff" i],
	[style*="background:#e0f2fe" i],
	[style*="background:#eff6ff" i],
	[style*="background:#dbeafe" i],
	[style*="background:#eef2ff" i],
	[style*="background:#e0e7ff" i],
	[style*="background:#f5f3ff" i],
	[style*="background:#ede9fe" i],
	[style*="background:#faf5ff" i],
	[style*="background:#f3e8ff" i],
	[style*="background:#fdf2f8" i],
	[style*="background:#fce7f3" i],
	[style*="background:#fdf4ff" i],
	[style*="background:#fae8ff" i],
	[style*="background:#fff1f2" i],
	[style*="background:#ffe4e6" i],
	[style*="background:white" i],
	[style*="background-color:#fff" i],
	[style*="background-color:#f8fafc" i],
	[style*="background-color:#f0fdf4" i],
	[style*="background-color:#fef2f2" i],
	[style*="background-color:#fff7ed" i],
	[style*="background-color:white" i]
) {
	background-color: var(--dm-surface) !important;
	background-image: none !important;
	color: var(--dm-text) !important;
}

/* 5b. Light inline borders → dark border. */
html[data-kdlx-dark] .entry-content :is(
	[style*="border"][style*="#e2e8f0" i],
	[style*="border"][style*="#e5e7eb" i],
	[style*="border"][style*="#e5e5e5" i],
	[style*="border"][style*="#ddd" i],
	[style*="border"][style*="#eee" i],
	[style*="border"][style*="#f1f5f9" i],
	[style*="border"][style*="#f3f4f6" i],
	[style*="border"][style*="#d1d5db" i],
	[style*="border"][style*="#cbd5e1" i]
) {
	border-color: var(--dm-border) !important;
}

/* 5c. Dark inline text colors → light text.
   Digit-first hexes (#0-#9…) cover all Tailwind "dark" shades
   (#1F2937, #111827, #7C2D12, #991B1B…); letter-first colors are
   left alone since bright accents stay readable on dark. */
html[data-kdlx-dark] .entry-content :is(
	[style^="color:#0" i],[style^="color:#1" i],[style^="color:#2" i],
	[style^="color:#3" i],[style^="color:#4" i],[style^="color:#5" i],
	[style^="color:#6" i],[style^="color:#7" i],[style^="color:#8" i],
	[style^="color:#9" i],
	[style*=";color:#0" i],[style*=";color:#1" i],[style*=";color:#2" i],
	[style*=";color:#3" i],[style*=";color:#4" i],[style*=";color:#5" i],
	[style*=";color:#6" i],[style*=";color:#7" i],[style*=";color:#8" i],
	[style*=";color:#9" i],
	[style*="; color:#0" i],[style*="; color:#1" i],[style*="; color:#2" i],
	[style*="; color:#3" i],[style*="; color:#4" i],[style*="; color:#5" i],
	[style*="; color:#6" i],[style*="; color:#7" i],[style*="; color:#8" i],
	[style*="; color:#9" i],
	[style*="color:black" i],[style*="color: black" i]
) {
	color: var(--dm-text) !important;
}