/* Texas CBE Dark Mode — Global overrides */
/* The browser paints its own furniture — the page scrollbar, form controls, the
   canvas behind a short page — from color-scheme, not from our CSS. Without it the
   main scrollbar stays light against a dark page, which is the white band down the
   right-hand edge. It belongs on the root element, because that is where the browser
   looks. */
html[data-theme="dark"], html:has(body.dark-version) {
  color-scheme: dark;
}
html:not([data-theme="dark"]) {
  color-scheme: light;
}

body.dark-version,
[data-theme="dark"] body {
  background-color: #1a1a2e !important;
  color: #e0e0e0 !important;
  color-scheme: dark;
}

/* Force ALL text visible in dark mode */
body.dark-version *:not(.btn):not(.badge):not(.home-btn-primary):not(.home-btn):not([style*="background" i]) {
  color: inherit;
}

body.dark-version a:not(.btn):not(.home-btn):not(.badge)
:not(.dx-lead-cta):not(.pr-slot):not(.pr-cta):not(.dx-tick):not(.dx-rail-row)
:not(.dx-rail-tile):not(.dx-link):not(.dx-badge) {
  color: #60a5fa;
}

.dark-version .sidenav {
  background: #16213e !important;
}

.dark-version .sidenav .nav-link-text,
.dark-version .sidenav .nav-link {
  color: #ccc !important;
}

.dark-version .sidenav .nav-link.active {
  background: rgba(255,255,255,0.08) !important;
}

.dark-version .sidenav .nav-link.active .nav-link-text {
  color: #fff !important;
}

.dark-version .navbar {
  background: rgba(22, 33, 62, 0.95) !important;
}

.dark-version .card {
  background: #16213e !important;
  color: #e0e0e0 !important;
  border-color: rgba(255,255,255,0.08) !important;
}

.dark-version .card-header {
  background: rgba(255,255,255,0.03) !important;
}

.dark-version h1, .dark-version h2, .dark-version h3,
.dark-version h4, .dark-version h5, .dark-version h6 {
  color: #f0f0f0 !important;
}

.dark-version p, .dark-version span, .dark-version label {
  color: #ccc !important;
}

.dark-version .text-dark {
  color: #e0e0e0 !important;
}

.dark-version .text-muted {
  color: #888 !important;
}

.dark-version .bg-white {
  background: #16213e !important;
}

.dark-version .bg-light {
  background: #1a1a2e !important;
}

.dark-version .form-control {
  background: #0f3460 !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: #e0e0e0 !important;
}

.dark-version .form-control:focus {
  background: #0f3460 !important;
  color: #fff !important;
}

.dark-version .table {
  color: #ccc !important;
}

.dark-version .table thead th {
  color: #999 !important;
}

.dark-version .breadcrumb-item,
.dark-version .breadcrumb-item a,
.dark-version .breadcrumb-item.active {
  color: #aaa !important;
}

.dark-version .footer {
  color: #888 !important;
}

.dark-version .footer a {
  color: #aaa !important;
}

.dark-version .border-bottom {
  border-color: rgba(255,255,255,0.08) !important;
}

.dark-version .shadow-sm,
.dark-version .shadow {
  box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important;
}

.dark-version .progress {
  background: rgba(255,255,255,0.1) !important;
}

.dark-version .icon-shape {
  background: rgba(255,255,255,0.08) !important;
}

.dark-version .alert-warning {
  background: rgba(234,179,8,0.15) !important;
  color: #eab308 !important;
}

.dark-version .alert-success {
  background: rgba(34,197,94,0.15) !important;
  color: #22c55e !important;
}

.dark-version .alert-danger {
  background: rgba(239,68,68,0.15) !important;
  color: #ef4444 !important;
}

/* Front pages (base-auth) dark mode */
.dark-version .home-page,
.dark-version .login-page,
.dark-version .register-page {
  background: #1a1a2e !important;
}

.dark-version .home-page .subject-card,
.dark-version .home-page .feature-card,
.dark-version .home-page .pricing-card {
  background: #16213e !important;
}

.dark-version .home-page .pricing-card.featured {
  border-color: #0071e3 !important;
}

.dark-version .login-card,
.dark-version .register-card {
  background: #16213e !important;
  border-color: rgba(255,255,255,0.08) !important;
}

.dark-version .blur {
  background: rgba(22, 33, 62, 0.9) !important;
}

.dark-version .cbe-theme-toggle {
  border-color: #aaa !important;
}

.dark-version .cbe-theme-icon {
  color: #eab308 !important;
}

.dark-version .dropdown-menu {
  background: #16213e !important;
  border-color: rgba(255,255,255,0.1) !important;
}

.dark-version .dropdown-item {
  color: #ccc !important;
}

.dark-version .dropdown-item:hover {
  background: rgba(255,255,255,0.08) !important;
}

.dark-version .sidebar-submenu {
  border-color: rgba(255,255,255,0.1) !important;
}

/* System Config page */
.dark-version .syscfg-page,
.dark-version .syscfg-header h1,
.dark-version .syscfg-card-header h2 {
  color: #f0f0f0 !important;
}

.dark-version .syscfg-header p,
.dark-version .syscfg-hint,
.dark-version .syscfg-count,
.dark-version .syscfg-desc {
  color: #999 !important;
}

.dark-version .syscfg-card {
  background: #16213e !important;
  border-color: rgba(255,255,255,0.08) !important;
}

.dark-version .syscfg-card-header:hover {
  background: rgba(255,255,255,0.03) !important;
}

.dark-version .syscfg-key {
  color: #e0e0e0 !important;
}

.dark-version .syscfg-input {
  background: #0f3460 !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: #e0e0e0 !important;
}

.dark-version .syscfg-input:focus {
  background: #0f3460 !important;
  color: #fff !important;
}

.dark-version .syscfg-input.readonly {
  background: #1a1a2e !important;
  color: #888 !important;
}

.dark-version .syscfg-eye {
  background: rgba(255,255,255,0.08) !important;
  color: #ccc !important;
}

.dark-version .syscfg-file-btn {
  background: rgba(255,255,255,0.08) !important;
  color: #60a5fa !important;
}

.dark-version .syscfg-file-preview {
  border-color: rgba(255,255,255,0.1) !important;
  background: #0f3460 !important;
}

.dark-version .syscfg-field {
  border-color: rgba(255,255,255,0.06) !important;
}

.dark-version .syscfg-chevron {
  color: #888 !important;
}

.dark-version .syscfg-badge.secret {
  background: rgba(255,59,48,0.15) !important;
  color: #ff6b6b !important;
}

.dark-version .syscfg-badge.locked {
  background: rgba(255,255,255,0.06) !important;
  color: #888 !important;
}

/* Admin tables */
.dark-version .table-responsive,
.dark-version table {
  color: #e0e0e0 !important;
}

.dark-version table thead th {
  color: #999 !important;
  border-color: rgba(255,255,255,0.08) !important;
}

.dark-version table td {
  border-color: rgba(255,255,255,0.06) !important;
}

/* Admin page headers */
.dark-version .admin-users-badge {
  opacity: 0.9;
}

/* Quill editor dark mode */
.dark-version .ql-toolbar {
  background: #16213e !important;
  border-color: rgba(255,255,255,0.1) !important;
}

.dark-version .ql-container {
  background: #0f3460 !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #e0e0e0 !important;
}

.dark-version .ql-editor {
  color: #e0e0e0 !important;
}

.dark-version .ql-toolbar button,
.dark-version .ql-toolbar .ql-picker-label {
  color: #ccc !important;
}

/* Modal dark mode */
.dark-version .modal-content {
  background: #16213e !important;
  color: #e0e0e0 !important;
}

.dark-version .modal-header {
  border-color: rgba(255,255,255,0.1) !important;
}

.dark-version .modal-footer {
  border-color: rgba(255,255,255,0.1) !important;
}

/* ── GLOBAL FORCE: override ALL text/bg in dark mode ── */
html body.dark-version h1, html body.dark-version h2, html body.dark-version h3,
html body.dark-version h4, html body.dark-version h5, html body.dark-version h6 {
  color: #f0f0f0 !important;
}

html body.dark-version p, html body.dark-version span, html body.dark-version label,
html body.dark-version td, html body.dark-version th, html body.dark-version li,
html body.dark-version div, html body.dark-version small, html body.dark-version strong,
html body.dark-version caption {
  color: #d0d0d0 !important;
}

/* The portal's links paint themselves — a filled CTA, a whole banner card, a row in
   the rail — and this rule was repainting them #60a5fa. Both declarations are
   !important, so specificity decided it, and (0,6,3) against a single class was
   never a contest: the CTA lost its white label and the banner anchors handed blue
   down to the title and body inside them. The :not() list is exactly where a link
   that chooses its own colour belongs. */
html body.dark-version a:not(.btn):not(.home-btn):not(.badge):not(.nav-link):not(.dropdown-item):not(.dx-lead-cta):not(.pr-slot):not(.pr-cta):not(.dx-tick):not(.dx-rail-row):not(.dx-rail-tile):not(.dx-link):not(.dx-badge) {
  color: #60a5fa !important;
}

html body.dark-version .card,
html body.dark-version .card-header,
html body.dark-version .card-body,
html body.dark-version .card-footer {
  background: #16213e !important;
  color: #d0d0d0 !important;
  border-color: rgba(255,255,255,0.08) !important;
}

html body.dark-version .container-fluid,
html body.dark-version .container {
  color: #d0d0d0 !important;
}

html body.dark-version input, html body.dark-version select, html body.dark-version textarea {
  background: #0f3460 !important;
  color: #e0e0e0 !important;
  border-color: rgba(255,255,255,0.15) !important;
}

/* Force table text */
html body.dark-version table,
html body.dark-version table td,
html body.dark-version table th,
html body.dark-version table tr,
html body.dark-version .table td,
html body.dark-version .table th {
  color: #d0d0d0 !important;
  border-color: rgba(255,255,255,0.06) !important;
}

body.dark-version .btn-outline-primary {
  color: #60a5fa !important;
  border-color: #60a5fa !important;
}

body.dark-version .btn-outline-danger {
  color: #f87171 !important;
  border-color: #f87171 !important;
}

body.dark-version .btn-outline-secondary {
  color: #ccc !important;
  border-color: #666 !important;
}

body.dark-version .pagination .page-link {
  background: #16213e !important;
  color: #ccc !important;
  border-color: rgba(255,255,255,0.1) !important;
}

body.dark-version .pagination .page-item.active .page-link {
  background: #0071e3 !important;
  color: #fff !important;
}

body.dark-version hr {
  border-color: rgba(255,255,255,0.1) !important;
}

.dark-version .btn-outline-primary {
  color: #60a5fa !important;
  border-color: #60a5fa !important;
}

.dark-version .btn-outline-danger {
  color: #f87171 !important;
  border-color: #f87171 !important;
}

.dark-version .pagination .page-link {
  background: #16213e !important;
  color: #ccc !important;
  border-color: rgba(255,255,255,0.1) !important;
}

.dark-version .pagination .page-item.active .page-link {
  background: #0071e3 !important;
  color: #fff !important;
}

/* Fix black text/logos invisible on dark bg */
.dark-version .text-dark {
  color: #e0e0e0 !important;
}

.dark-version .opacity-6 {
  opacity: 0.9 !important;
}

.dark-version .navbar-brand img,
.dark-version .navbar-logo-img,
.dark-version .home-hero .logo-img,
.dark-version .sidenav-header img {
  filter: brightness(0) invert(1);
}

.dark-version .home-page h1,
.dark-version .home-page h2,
.dark-version .home-page h4,
.dark-version .home-page .tagline,
.dark-version .home-page .sub,
.dark-version .home-section-title h2,
.dark-version .home-section-title p {
  color: #f0f0f0 !important;
}

.dark-version .home-page .subject-card h4,
.dark-version .home-page .feature-card h4,
.dark-version .home-page .pricing-card h4,
.dark-version .home-page .pricing-card .price {
  color: #f0f0f0 !important;
}

.dark-version .home-page .subject-card p,
.dark-version .home-page .feature-card p,
.dark-version .home-page .pricing-card ul li {
  color: #bbb !important;
}

.dark-version .home-page .home-btn-outline {
  color: #60a5fa !important;
  border-color: #60a5fa !important;
}

.dark-version .home-footer {
  border-color: rgba(255,255,255,0.1) !important;
  color: #888 !important;
}

.dark-version .home-footer a {
  color: #aaa !important;
}

/* Auth pages dark mode text fix */
.dark-version .login-card h2,
.dark-version .register-card h2 {
  color: #f0f0f0 !important;
}

.dark-version .login-card .sub,
.dark-version .register-card .sub,
.dark-version .login-card label,
.dark-version .register-card label {
  color: #ccc !important;
}

.dark-version .login-footer,
.dark-version .register-footer {
  color: #999 !important;
  border-color: rgba(255,255,255,0.08) !important;
}

.dark-version .login-footer a,
.dark-version .register-footer a {
  color: #60a5fa !important;
}

.dark-version .form-check-label {
  color: #ccc !important;
}

.dark-version .nav-link-auth {
  color: #e0e0e0 !important;
}

.dark-version .nav-link-auth i {
  color: #ccc !important;
}

.dark-version .navbar-toggler-bar {
  background: #ccc !important;
}

/* Dropdown arrow fix */
.dark-version .dropdown-toggle::after {
  color: #ccc !important;
  border-top-color: #ccc !important;
}

.dark-version .dropdown-toggle span,
.dark-version .dropdown-toggle i {
  color: #e0e0e0 !important;
}

/* ─────────────────────────────────────────────────────────────────────
   Landing page (/) dark-mode fixes.
   The landing template uses inline `style="background: white"` on the
   stat cards, featured-question card, testimonial card, and fq-nav
   buttons. Inline styles beat class selectors, so the earlier
   .dark-version overrides don't reach them. Force them via structural
   selectors with !important.
   ───────────────────────────────────────────────────────────────────── */
body.dark-version {
  /* Override the landing page's CSS variables so anything using them
     (hero text, muted labels, page bg) flips automatically. */
  --home-bg: #1a1a2e;
  --home-text: #f0f0f0;
  --home-text-muted: #9ca3af;
  --home-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

/* Inline-style white cards on the landing page → dark surface. */
body.dark-version .home-page .home-proof > div > div,
body.dark-version .home-page .fq-slide > div,
body.dark-version .home-page .ts-slide,
body.dark-version .home-page .fq-nav {
  background: #16213e !important;
  color: #e0e0e0 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Featured-question card: the question stem, explanation body, and
   testimonial blockquote all hardcode `color: #1d1d1f` inline. */
body.dark-version .home-page .fq-slide > div p,
body.dark-version .home-page .fq-slide > div .fq-result > div > div,
body.dark-version .home-page .ts-slide blockquote {
  color: #e8e8ea !important;
}

/* Multiple-choice option buttons inside the featured-question card —
   the light borders (#e9ecef, #ccc) disappear on the dark surface. */
body.dark-version .home-page .hq-choice {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

body.dark-version .home-page .hq-choice span {
  color: #e8e8ea !important;
}

body.dark-version .home-page .hq-choice .hq-label {
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #e8e8ea !important;
}

/* Carousel nav buttons. */
body.dark-version .home-page .fq-nav {
  color: #c0c0c4 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

body.dark-version .home-page .fq-nav:hover {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Carousel dots: the inactive dots are #d2d2d7 in light mode. */
body.dark-version .home-page .fq-dot {
  background: rgba(255, 255, 255, 0.18) !important;
}

body.dark-version .home-page .fq-dot.active {
  background: #60a5fa !important;
}

/* "See full page" pill — inline `background:#f5f5f7; color:#1d1d1f`.
   Attribute selector reaches the inline literal. */
body.dark-version .home-page .fq-result a[style*="#f5f5f7" i] {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #e8e8ea !important;
}

/* Testimonial figcaption / decorative quote mark. */
body.dark-version .home-page .ts-slide figcaption {
  color: #a0a0a4 !important;
}

/* FAQ accordion items at the bottom of the landing page also use inline
   `style="background: white"`. Force them and make sure the chevron stays
   visible. The <summary> question text uses var(--home-text), which the
   :root override at the top of this block already flips, so it inherits. */
body.dark-version .home-page .faq-item {
  background: #16213e !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

body.dark-version .home-page .faq-item summary,
body.dark-version .home-page .faq-item summary span,
body.dark-version .home-page .faq-item p {
  color: #e8e8ea !important;
}

/* Question stem `.home-q-grid` outer area & explanation accent border. */
body.dark-version .home-page .fq-result .fq-msg {
  background: rgba(255, 255, 255, 0.04) !important;
}

/* "% OFF · SEASON" badge on the pricing card: inline cream bg (#fef3c7)
   with dark-brown text (#92400e). In dark mode the global text-color
   force pushes the brown to light gray, which fades into the still-cream
   bg. Flip to a warm amber surface + bright amber text. */
body.dark-version .home-page [style*="#fef3c7" i] {
  background: rgba(251, 191, 36, 0.18) !important;
  color: #fcd34d !important;
}

/* Inline SVG diagrams embedded in question_text — the body labels use
   dark-fill presentation attributes that disappear on a dark page.
   Broad whitelist: any svg <text> that isn't already a known light/teal
   accent gets flipped to a light fill. CSS rules beat the presentation
   attribute, and !important wins over any later inline style.

   NOTE: LESSON and BLOG content SVGs carry their OWN light background
   <rect> (see the light-bg override further below) — flipping their
   text to light on a light rect makes text invisible. Those are
   handled separately with .lp-body / .blog-content overrides. */
body.dark-version svg text:not([fill="#0F766E"]):not([fill="#0f766e"]):not([fill="#fff"]):not([fill="#ffffff"]):not([fill="white"]):not([fill="#5eead4"]):not([fill="#60a5fa"]):not([fill="#34c759"]),
html[data-theme="dark"] svg text:not([fill="#0F766E"]):not([fill="#0f766e"]):not([fill="#fff"]):not([fill="#ffffff"]):not([fill="white"]):not([fill="#5eead4"]):not([fill="#60a5fa"]):not([fill="#34c759"]) {
  fill: #f0f0f3 !important;
}

/* LESSON/BLOG content SVGs keep their light-themed rect background in
   dark mode (see rules below that flip the light rect to dark surface),
   so text needs the OPPOSITE treatment: stay bright/light on the dark
   rect. This block matches the specificity of the broad rule above +1
   (adds .lp-body / .blog-content class), so it wins the cascade. */
body.dark-version .lp-body svg text:not([fill="#0F766E"]):not([fill="#0f766e"]):not([fill="#fff"]):not([fill="#ffffff"]):not([fill="white"]):not([fill="#5eead4"]):not([fill="#60a5fa"]):not([fill="#34c759"]),
html[data-theme="dark"] .lp-body svg text:not([fill="#0F766E"]):not([fill="#0f766e"]):not([fill="#fff"]):not([fill="#ffffff"]):not([fill="white"]):not([fill="#5eead4"]):not([fill="#60a5fa"]):not([fill="#34c759"]),
body.dark-version .blog-content svg text:not([fill="#0F766E"]):not([fill="#0f766e"]):not([fill="#fff"]):not([fill="#ffffff"]):not([fill="white"]):not([fill="#5eead4"]):not([fill="#60a5fa"]):not([fill="#34c759"]),
html[data-theme="dark"] .blog-content svg text:not([fill="#0F766E"]):not([fill="#0f766e"]):not([fill="#fff"]):not([fill="#ffffff"]):not([fill="white"]):not([fill="#5eead4"]):not([fill="#60a5fa"]):not([fill="#34c759"]) {
  fill: #f0f0f3 !important;  /* keep light — matches new dark rect bg */
}

/* Flip the light "container" <rect> background inside content SVGs so
   the light-flipped text has a dark backdrop to read against.
   Covers every light-tone background used in the lesson SVG library:
   blue #EFF6FF, purple #F5F3FF, green #F0FDF4, teal #F0FDFA,
   yellow #FEFCE8/#FFFBEB, orange #FFF7F0, gray #f5f5f7/#fafafa,
   sky #f0f9ff, indigo #ede9fe/#e0e7ff, mid-blue #dbeafe,
   mid-green #dcfce7, amber #fef3c7. */
body.dark-version .lp-body svg rect[fill="#EFF6FF"],
body.dark-version .lp-body svg rect[fill="#F5F3FF"],
body.dark-version .lp-body svg rect[fill="#F0FDF4"],
body.dark-version .lp-body svg rect[fill="#F0FDFA"],
body.dark-version .lp-body svg rect[fill="#FEFCE8"],
body.dark-version .lp-body svg rect[fill="#FFFBEB"],
body.dark-version .lp-body svg rect[fill="#FFF7F0"],
body.dark-version .lp-body svg rect[fill="#f5f5f7"],
body.dark-version .lp-body svg rect[fill="#fafafa"],
body.dark-version .lp-body svg rect[fill="#f0f9ff"],
body.dark-version .lp-body svg rect[fill="#ede9fe"],
body.dark-version .lp-body svg rect[fill="#e0e7ff"],
body.dark-version .lp-body svg rect[fill="#dbeafe"],
body.dark-version .lp-body svg rect[fill="#dcfce7"],
body.dark-version .lp-body svg rect[fill="#fef3c7"],
html[data-theme="dark"] .lp-body svg rect[fill="#EFF6FF"],
html[data-theme="dark"] .lp-body svg rect[fill="#F5F3FF"],
html[data-theme="dark"] .lp-body svg rect[fill="#F0FDF4"],
html[data-theme="dark"] .lp-body svg rect[fill="#F0FDFA"],
html[data-theme="dark"] .lp-body svg rect[fill="#FEFCE8"],
html[data-theme="dark"] .lp-body svg rect[fill="#FFFBEB"],
html[data-theme="dark"] .lp-body svg rect[fill="#FFF7F0"],
html[data-theme="dark"] .lp-body svg rect[fill="#f5f5f7"],
html[data-theme="dark"] .lp-body svg rect[fill="#fafafa"],
html[data-theme="dark"] .lp-body svg rect[fill="#f0f9ff"],
html[data-theme="dark"] .lp-body svg rect[fill="#ede9fe"],
html[data-theme="dark"] .lp-body svg rect[fill="#e0e7ff"],
html[data-theme="dark"] .lp-body svg rect[fill="#dbeafe"],
html[data-theme="dark"] .lp-body svg rect[fill="#dcfce7"],
html[data-theme="dark"] .lp-body svg rect[fill="#fef3c7"],
body.dark-version .blog-content svg rect[fill="#EFF6FF"],
body.dark-version .blog-content svg rect[fill="#F5F3FF"],
body.dark-version .blog-content svg rect[fill="#F0FDF4"],
body.dark-version .blog-content svg rect[fill="#F0FDFA"],
body.dark-version .blog-content svg rect[fill="#FEFCE8"],
body.dark-version .blog-content svg rect[fill="#FFFBEB"],
body.dark-version .blog-content svg rect[fill="#FFF7F0"],
body.dark-version .blog-content svg rect[fill="#f5f5f7"],
body.dark-version .blog-content svg rect[fill="#fafafa"],
html[data-theme="dark"] .blog-content svg rect[fill="#EFF6FF"],
html[data-theme="dark"] .blog-content svg rect[fill="#F5F3FF"],
html[data-theme="dark"] .blog-content svg rect[fill="#F0FDF4"],
html[data-theme="dark"] .blog-content svg rect[fill="#F0FDFA"],
html[data-theme="dark"] .blog-content svg rect[fill="#FEFCE8"],
html[data-theme="dark"] .blog-content svg rect[fill="#FFFBEB"],
html[data-theme="dark"] .blog-content svg rect[fill="#FFF7F0"],
html[data-theme="dark"] .blog-content svg rect[fill="#f5f5f7"],
html[data-theme="dark"] .blog-content svg rect[fill="#fafafa"] {
  fill: #16161d !important;  /* dark surface = same as .lp-main card */
}

/* QUESTION-diagram physical-scene SVGs (sun/shadow, ladder, tree — the
   admin/practice question view, NOT scoped to .lp-body/.blog-content) use a
   full-SVG light-gray scene <rect> + tan ground <rect>. The global text-flip
   turns their labels light, leaving light text on a light background. Flip
   these two BACKGROUND colors to dark surfaces so the labels read.
   SAFE / no side effects: audited the whole active question bank — #f5f5f7
   and #e6dfd0 appear ONLY as <rect> backgrounds (never markers/shapes/text),
   and the match is limited to `svg rect[fill=...]`. Right-angle markers use
   fill="white" (16x16 squares) and are deliberately NOT matched here. */
body.dark-version svg rect[fill="#f5f5f7"],
html[data-theme="dark"] svg rect[fill="#f5f5f7"] {
  fill: #16161d !important;   /* scene background -> dark surface */
}
body.dark-version svg rect[fill="#e6dfd0"],
html[data-theme="dark"] svg rect[fill="#e6dfd0"] {
  fill: #2a2620 !important;   /* ground strip -> dark warm, keeps the scene */
}

/* SVGs with an INLINE style background (e.g. style="background:#fafbfc")
   escape the rect-based whitelist above. Override them in dark mode via
   the CSS `background` shorthand. Added 2026-07-05 after quiz SVGs used
   this pattern and stayed light in dark mode. */
body.dark-version .lp-body svg[style*="background:#fafbfc" i],
body.dark-version .lp-body svg[style*="background:#fafafa" i],
body.dark-version .lp-body svg[style*="background:#f5f5f7" i],
body.dark-version .lp-body svg[style*="background:#f8f9fa" i],
body.dark-version .lp-body svg[style*="background:#ffffff" i],
body.dark-version .lp-body svg[style*="background:white" i],
html[data-theme="dark"] .lp-body svg[style*="background:#fafbfc" i],
html[data-theme="dark"] .lp-body svg[style*="background:#fafafa" i],
html[data-theme="dark"] .lp-body svg[style*="background:#f5f5f7" i],
html[data-theme="dark"] .lp-body svg[style*="background:#f8f9fa" i],
html[data-theme="dark"] .lp-body svg[style*="background:#ffffff" i],
html[data-theme="dark"] .lp-body svg[style*="background:white" i] {
  background: #16161d !important;
  border-color: #333 !important;
}

/* Extended: polygons/ellipses/paths and additional light palette colors
   (pink #fce7f3, red #fee2e2, orange #ffedd5, teal #ccfbf1, tan/beige).
   Same treatment as light rects — flip to dark surface in dark mode.
   Added 2026-07-05 after lesson SVGs (triangle-congruence + special-right-triangles)
   used pink/red backgrounds and polygon shapes that the original rect-only
   whitelist missed. Owner-observed unreadable AAS/Beware cards. */
body.dark-version .lp-body svg polygon[fill="#dbeafe"],
body.dark-version .lp-body svg polygon[fill="#dcfce7"],
body.dark-version .lp-body svg polygon[fill="#fef3c7"],
body.dark-version .lp-body svg polygon[fill="#ede9fe"],
body.dark-version .lp-body svg polygon[fill="#fce7f3"],
body.dark-version .lp-body svg polygon[fill="#fee2e2"],
body.dark-version .lp-body svg polygon[fill="#ffedd5"],
body.dark-version .lp-body svg polygon[fill="#ccfbf1"],
body.dark-version .lp-body svg polygon[fill="#e0e7ff"],
body.dark-version .lp-body svg rect[fill="#fce7f3"],
body.dark-version .lp-body svg rect[fill="#fee2e2"],
body.dark-version .lp-body svg rect[fill="#ffedd5"],
body.dark-version .lp-body svg rect[fill="#ccfbf1"],
body.dark-version .lp-body svg rect[fill="rgba(139,115,85,0.08)"],
body.dark-version .lp-body svg rect[fill="#e6dfd0"],
body.dark-version .lp-body svg rect[fill="#cbd5e1"],
body.dark-version .lp-body svg rect[fill="#e5e7eb"],
body.dark-version .lp-body svg rect[fill="#d1d5db"],
body.dark-version .lp-body svg circle[fill="#fafafa"],
body.dark-version .lp-body svg circle[fill="#f5f5f7"],
body.dark-version .lp-body svg circle[fill="#fafbfc"],
body.dark-version .lp-body svg circle[fill="#ffffff"],
body.dark-version .lp-body svg circle[fill="white"],
body.dark-version .lp-body svg circle[fill="#EFF6FF"],
body.dark-version .lp-body svg circle[fill="#F5F3FF"],
body.dark-version .lp-body svg circle[fill="#F0FDF4"],
body.dark-version .lp-body svg circle[fill="#f0f9ff"],
html[data-theme="dark"] .lp-body svg circle[fill="#fafafa"],
html[data-theme="dark"] .lp-body svg circle[fill="#f5f5f7"],
html[data-theme="dark"] .lp-body svg circle[fill="#fafbfc"],
html[data-theme="dark"] .lp-body svg circle[fill="#ffffff"],
html[data-theme="dark"] .lp-body svg circle[fill="white"],
html[data-theme="dark"] .lp-body svg circle[fill="#EFF6FF"],
html[data-theme="dark"] .lp-body svg circle[fill="#F5F3FF"],
html[data-theme="dark"] .lp-body svg circle[fill="#F0FDF4"],
html[data-theme="dark"] .lp-body svg circle[fill="#f0f9ff"] {
  fill: #1f1f28 !important;
  stroke: #f0f0f3 !important;
}
body.dark-version .lp-body svg ellipse[fill="#dbeafe"],
body.dark-version .lp-body svg ellipse[fill="#dcfce7"],
body.dark-version .lp-body svg ellipse[fill="#fef3c7"],
body.dark-version .lp-body svg ellipse[fill="#ede9fe"],
body.dark-version .lp-body svg ellipse[fill="#fce7f3"],
body.dark-version .lp-body svg ellipse[fill="#fee2e2"],
html[data-theme="dark"] .lp-body svg polygon[fill="#dbeafe"],
html[data-theme="dark"] .lp-body svg polygon[fill="#dcfce7"],
html[data-theme="dark"] .lp-body svg polygon[fill="#fef3c7"],
html[data-theme="dark"] .lp-body svg polygon[fill="#ede9fe"],
html[data-theme="dark"] .lp-body svg polygon[fill="#fce7f3"],
html[data-theme="dark"] .lp-body svg polygon[fill="#fee2e2"],
html[data-theme="dark"] .lp-body svg polygon[fill="#ffedd5"],
html[data-theme="dark"] .lp-body svg polygon[fill="#ccfbf1"],
html[data-theme="dark"] .lp-body svg polygon[fill="#e0e7ff"],
html[data-theme="dark"] .lp-body svg rect[fill="#fce7f3"],
html[data-theme="dark"] .lp-body svg rect[fill="#fee2e2"],
html[data-theme="dark"] .lp-body svg rect[fill="#ffedd5"],
html[data-theme="dark"] .lp-body svg rect[fill="#ccfbf1"],
html[data-theme="dark"] .lp-body svg rect[fill="rgba(139,115,85,0.08)"],
html[data-theme="dark"] .lp-body svg rect[fill="#e6dfd0"],
html[data-theme="dark"] .lp-body svg rect[fill="#cbd5e1"],
html[data-theme="dark"] .lp-body svg rect[fill="#e5e7eb"],
html[data-theme="dark"] .lp-body svg rect[fill="#d1d5db"],
html[data-theme="dark"] .lp-body svg ellipse[fill="#dbeafe"],
html[data-theme="dark"] .lp-body svg ellipse[fill="#dcfce7"],
html[data-theme="dark"] .lp-body svg ellipse[fill="#fef3c7"],
html[data-theme="dark"] .lp-body svg ellipse[fill="#ede9fe"],
html[data-theme="dark"] .lp-body svg ellipse[fill="#fce7f3"],
html[data-theme="dark"] .lp-body svg ellipse[fill="#fee2e2"],
body.dark-version .blog-content svg polygon[fill="#dbeafe"],
body.dark-version .blog-content svg polygon[fill="#dcfce7"],
body.dark-version .blog-content svg polygon[fill="#fef3c7"],
body.dark-version .blog-content svg polygon[fill="#ede9fe"],
body.dark-version .blog-content svg polygon[fill="#fce7f3"],
body.dark-version .blog-content svg polygon[fill="#fee2e2"],
html[data-theme="dark"] .blog-content svg polygon[fill="#dbeafe"],
html[data-theme="dark"] .blog-content svg polygon[fill="#dcfce7"],
html[data-theme="dark"] .blog-content svg polygon[fill="#fef3c7"],
html[data-theme="dark"] .blog-content svg polygon[fill="#ede9fe"],
html[data-theme="dark"] .blog-content svg polygon[fill="#fce7f3"],
html[data-theme="dark"] .blog-content svg polygon[fill="#fee2e2"] {
  fill: #1f1f28 !important;  /* slightly lighter than #16161d so shape edges stay visible against card */
  stroke-opacity: 0.85;
}

/* Axes / gridlines drawn in dark strokes stop being visible once the
   rect bg flips to dark. Flip the common dark stroke colors to a light
   tone. Covers axes (#1F2937/#1f2937/#111827/#374151) and the various
   light-purple/blue grid colors used in our precise polyline SVGs. */
body.dark-version .lp-body svg line[stroke="#1F2937"],
body.dark-version .lp-body svg line[stroke="#1f2937"],
body.dark-version .lp-body svg line[stroke="#111827"],
body.dark-version .lp-body svg line[stroke="#374151"],
body.dark-version .lp-body svg line[stroke="#86868b"],
body.dark-version .lp-body svg line[stroke="#9ca3af"],
html[data-theme="dark"] .lp-body svg line[stroke="#1F2937"],
html[data-theme="dark"] .lp-body svg line[stroke="#1f2937"],
html[data-theme="dark"] .lp-body svg line[stroke="#111827"],
html[data-theme="dark"] .lp-body svg line[stroke="#374151"],
html[data-theme="dark"] .lp-body svg line[stroke="#86868b"],
html[data-theme="dark"] .lp-body svg line[stroke="#9ca3af"],
body.dark-version .blog-content svg line[stroke="#1F2937"],
body.dark-version .blog-content svg line[stroke="#1f2937"],
html[data-theme="dark"] .blog-content svg line[stroke="#1F2937"],
html[data-theme="dark"] .blog-content svg line[stroke="#1f2937"] {
  stroke: #a1a1aa !important;  /* mid-gray axes on dark bg */
}

/* Specific dark fills still get an explicit override too — defense in
   depth in case a browser somehow ignores the :not() chain on SVG. */
body.dark-version svg text[fill="#1d1d1f"],
body.dark-version svg text[fill="#374151"],
body.dark-version svg text[fill="#1f2937"],
body.dark-version svg text[fill="#111827"],
body.dark-version svg text[fill="black"],
body.dark-version svg text[fill="#000"],
body.dark-version svg text[fill="#000000"] {
  fill: #f0f0f3 !important;
}

/* Faint container fill on the question box gets a hair brighter so the
   outline is still perceptible against the dark background. */
body.dark-version svg rect[fill="rgba(15,118,110,0.06)"] {
  fill: rgba(94, 234, 212, 0.10) !important;
}

/* ═════════════════════════════════════════════════════════════════
   Blog content — dark-mode fixes for /blog/<slug> pages.
   
   The .blog-content wrapper has hard-coded light colors in
   blog_detail.html (color:#1d1d1f, h2 #111418, etc), and many post
   bodies embed inline-style boxes (background:#f8fafc, #fef3c7, etc)
   with no matching dark variant. In dark mode, those boxes keep
   their light background while the global text-color override flips
   the text light too — producing unreadable light-on-light.
   
   Strategy:
     1) Flip the base .blog-content typography to dark-mode-safe.
     2) For each common inline-style background color used in our
        posts, swap it for a tinted dark surface AND force the text
        inside back to a readable light color.
   ═════════════════════════════════════════════════════════════════ */
body.dark-version .blog-content {
  color: #e8e8ea !important;
}
body.dark-version .blog-content > p:first-of-type {
  color: #c0c0c4 !important;
}
body.dark-version .blog-content p,
body.dark-version .blog-content li,
body.dark-version .blog-content td,
body.dark-version .blog-content th,
body.dark-version .blog-content em {
  color: #e8e8ea !important;
}
body.dark-version .blog-content h2,
body.dark-version .blog-content h3,
body.dark-version .blog-content h4,
body.dark-version .blog-content strong {
  color: #f0f0f3 !important;
}
body.dark-version .blog-content a {
  color: #60a5fa !important;
  border-bottom-color: rgba(96, 165, 250, 0.32) !important;
}
body.dark-version .blog-content a:hover {
  border-bottom-color: #60a5fa !important;
}
body.dark-version .blog-content ul li::before {
  background: #60a5fa !important;
}
body.dark-version .blog-content blockquote {
  background: rgba(59, 130, 246, 0.08) !important;
  border-left-color: #60a5fa !important;
  color: #e8e8ea !important;
}
body.dark-version .blog-content code {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #e8e8ea !important;
}
body.dark-version .blog-content pre {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #e8e8ea !important;
}
body.dark-version .blog-content hr {
  border-top-color: rgba(255, 255, 255, 0.12) !important;
}
body.dark-version .blog-content table td,
body.dark-version .blog-content table th {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Pager cards at bottom — light bg → dark surface. */
body.dark-version .blog-page .pager-card {
  background: #16213e !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark-version .blog-page .pager-title {
  color: #e8e8ea !important;
}
body.dark-version .blog-page .pager-dir {
  color: #60a5fa !important;
}

/* ─────────────────────────────────────────────────────────────
   Inline-style boxes inside .blog-content. Match by the literal
   color value in the style attribute. CSS attribute selectors
   match substrings, so "background:#f8fafc" and
   "background: #f8fafc" both need explicit entries.
   ───────────────────────────────────────────────────────────── */

/* Light gray callout / CTA (#f8fafc, #f0f9ff, #f5f9ff) — blue tint. */
body.dark-version .blog-content [style*="background:#f8fafc" i],
body.dark-version .blog-content [style*="background: #f8fafc" i],
body.dark-version .blog-content [style*="background:#f0f9ff" i],
body.dark-version .blog-content [style*="background: #f0f9ff" i],
body.dark-version .blog-content [style*="background:#f5f9ff" i],
body.dark-version .blog-content [style*="background: #f5f9ff" i],
body.dark-version .blog-content [style*="background:linear-gradient(135deg,#f0f9ff" i],
body.dark-version .blog-content [style*="background: linear-gradient(135deg, #f0f9ff" i] {
  background: rgba(59, 130, 246, 0.10) !important;
  color: #e8e8ea !important;
}

/* Amber / warning (#fef3c7) — warm amber tint. */
body.dark-version .blog-content [style*="background:#fef3c7" i],
body.dark-version .blog-content [style*="background: #fef3c7" i] {
  background: rgba(251, 191, 36, 0.14) !important;
  color: #fef3c7 !important;
}

/* Blue info / table head (#dbeafe) — blue tint. */
body.dark-version .blog-content [style*="background:#dbeafe" i],
body.dark-version .blog-content [style*="background: #dbeafe" i] {
  background: rgba(59, 130, 246, 0.18) !important;
  color: #cce4ff !important;
}

/* Green success / table head (#ecfdf5) — emerald tint. */
body.dark-version .blog-content [style*="background:#ecfdf5" i],
body.dark-version .blog-content [style*="background: #ecfdf5" i] {
  background: rgba(34, 197, 94, 0.14) !important;
  color: #d1fae5 !important;
}

/* Purple (#f3e8ff) — violet tint. */
body.dark-version .blog-content [style*="background:#f3e8ff" i],
body.dark-version .blog-content [style*="background: #f3e8ff" i] {
  background: rgba(168, 85, 247, 0.16) !important;
  color: #e9d5ff !important;
}

/* Faint gray stripe rows (#fafafa) — soft tint. */
body.dark-version .blog-content [style*="background:#fafafa" i],
body.dark-version .blog-content [style*="background: #fafafa" i] {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #e8e8ea !important;
}

/* Children inside an inline-styled box inherit the box's text color
   (avoid double-darkening or stale strong-overrides). */
body.dark-version .blog-content [style*="background:#" i] strong,
body.dark-version .blog-content [style*="background: #" i] strong,
body.dark-version .blog-content [style*="background:#" i] em,
body.dark-version .blog-content [style*="background: #" i] em,
body.dark-version .blog-content [style*="background:linear-gradient" i] strong,
body.dark-version .blog-content [style*="background: linear-gradient" i] strong {
  color: inherit !important;
}

/* Links inside colored boxes stay blue (override box color). */
body.dark-version .blog-content [style*="background:#" i] a,
body.dark-version .blog-content [style*="background: #" i] a,
body.dark-version .blog-content [style*="background:linear-gradient" i] a {
  color: #93c5fd !important;
  border-bottom-color: rgba(147, 197, 253, 0.4) !important;
}

/* ═════════════════════════════════════════════════════════════════
   Blog content — catch-all dark-mode safety net.
   
   Many posts embed inline-style boxes with bg colors and direct text
   colors that our prior color-specific rules don't cover. Add broad
   attribute-selector rules that catch any light background (hex
   starting with d/e/f) and any dark text color (hex starting with
   0-8) inside .blog-content. The narrow per-color rules above still
   win for known palette swaps; this block backstops everything else.
   ═════════════════════════════════════════════════════════════════ */

/* ── Light backgrounds (hex #d?, #e?, #f?) → dark surface tint ── */
body.dark-version .blog-content *[style*="background:#d" i],
body.dark-version .blog-content *[style*="background: #d" i],
body.dark-version .blog-content *[style*="background:#e" i],
body.dark-version .blog-content *[style*="background: #e" i],
body.dark-version .blog-content *[style*="background:#f" i],
body.dark-version .blog-content *[style*="background: #f" i] {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #e8e8ea !important;
}

/* All descendants inside any light-bg inline box inherit light text. */
body.dark-version .blog-content *[style*="background:#d" i] *,
body.dark-version .blog-content *[style*="background: #d" i] *,
body.dark-version .blog-content *[style*="background:#e" i] *,
body.dark-version .blog-content *[style*="background: #e" i] *,
body.dark-version .blog-content *[style*="background:#f" i] *,
body.dark-version .blog-content *[style*="background: #f" i] * {
  color: #e8e8ea !important;
}

/* Links inside any colored box → soft blue (overrides the inherit). */
body.dark-version .blog-content *[style*="background:#d" i] a,
body.dark-version .blog-content *[style*="background: #d" i] a,
body.dark-version .blog-content *[style*="background:#e" i] a,
body.dark-version .blog-content *[style*="background: #e" i] a,
body.dark-version .blog-content *[style*="background:#f" i] a,
body.dark-version .blog-content *[style*="background: #f" i] a {
  color: #93c5fd !important;
}

/* ── Dark inline text colors (#0-#8 hex prefix) → flip to light ── */
body.dark-version .blog-content *[style*="color:#1" i],
body.dark-version .blog-content *[style*="color: #1" i],
body.dark-version .blog-content *[style*="color:#2" i],
body.dark-version .blog-content *[style*="color: #2" i],
body.dark-version .blog-content *[style*="color:#3" i],
body.dark-version .blog-content *[style*="color: #3" i],
body.dark-version .blog-content *[style*="color:#4" i],
body.dark-version .blog-content *[style*="color: #4" i],
body.dark-version .blog-content *[style*="color:#5" i],
body.dark-version .blog-content *[style*="color: #5" i],
body.dark-version .blog-content *[style*="color:#6" i],
body.dark-version .blog-content *[style*="color: #6" i],
body.dark-version .blog-content *[style*="color:#7" i],
body.dark-version .blog-content *[style*="color: #7" i],
body.dark-version .blog-content *[style*="color:#8" i],
body.dark-version .blog-content *[style*="color: #8" i] {
  color: #e8e8ea !important;
}

/* Dark hex starting with #0 — exclude teal/green accents (#0F766E,
   #0c..., #0e...) and pure black-ish. Most common dark-text are
   #0a..., #0d..., #0f..., handled below explicitly to preserve any
   legitimate accent. */
body.dark-version .blog-content *[style*="color:#0a" i],
body.dark-version .blog-content *[style*="color: #0a" i],
body.dark-version .blog-content *[style*="color:#0d" i],
body.dark-version .blog-content *[style*="color: #0d" i],
body.dark-version .blog-content *[style*="color:#0f1" i],
body.dark-version .blog-content *[style*="color: #0f1" i],
body.dark-version .blog-content *[style*="color:#000" i],
body.dark-version .blog-content *[style*="color: #000" i] {
  color: #e8e8ea !important;
}

/* White or near-white inline color (e.g. on dark teal/slate bg) → keep light */
body.dark-version .blog-content *[style*="color:white" i],
body.dark-version .blog-content *[style*="color: white" i],
body.dark-version .blog-content *[style*="color:#fff" i],
body.dark-version .blog-content *[style*="color: #fff" i],
body.dark-version .blog-content *[style*="color:#FFF" i],
body.dark-version .blog-content *[style*="color: #FFF" i] {
  color: #ffffff !important;
}

/* ═════════════════════════════════════════════════════════════════
   ULTIMATE catch-all: any inline `color:` inside .blog-content
   gets flipped to readable light text in dark mode — except pure
   white (already light) and known accent teals/greens. Same for
   pager-card on /blog/<slug>.
   ═════════════════════════════════════════════════════════════════ */
body.dark-version .blog-content [style*="color" i]:not([style*="color:white" i]):not([style*="color: white" i]):not([style*="color:#fff" i]):not([style*="color: #fff" i]):not([style*="color:#FFF" i]):not([style*="color: #FFF" i]):not([style*="color:#ffffff" i]):not([style*="color: #ffffff" i]) {
  color: #e8e8ea !important;
}

/* Stronger pager (Previous / Next) override */
body.dark-version .blog-page .pager-card {
  background: #1a2236 !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: #e8e8ea !important;
}
body.dark-version .blog-page .pager-card *,
body.dark-version .blog-page .pager-title {
  color: #e8e8ea !important;
}
body.dark-version .blog-page .pager-dir {
  color: #93c5fd !important;
}

/* Cover image area & meta gradient header — keep visible */
body.dark-version .blog-page .blog-cover {
  background: rgba(255, 255, 255, 0.03) !important;
}
body.dark-version .blog-page .blog-title {
  color: #f0f0f3 !important;
}
body.dark-version .blog-page .blog-meta,
body.dark-version .blog-page .blog-meta * {
  color: #a0a0a4 !important;
}
body.dark-version .blog-page .blog-kicker {
  background: rgba(96, 165, 250, 0.15) !important;
  color: #93c5fd !important;
}
body.dark-version .blog-page .blog-back {
  color: #93c5fd !important;
}
body.dark-version .blog-page .blog-share a,
body.dark-version .blog-page .blog-lang a {
  color: #93c5fd !important;
}

/* Reading progress bar — keep blue */
body.dark-version #readingProgress {
  background: #60a5fa !important;
}

/* ═════════════════════════════════════════════════════════════════
   FINAL force-readability sweep — covers every descendant of the
   blog article regardless of inline color. Also mirror rules under
   html[data-theme="dark"] so they apply before body.dark-version is
   added by the load-event JS (prevents FOUC washout).
   ═════════════════════════════════════════════════════════════════ */

/* Catch every descendant of .blog-content; spare semantic accents */
body.dark-version .blog-content *:not(a):not(strong):not(h2):not(h3):not(code):not(button) {
  color: #d8d8de !important;
}
html[data-theme="dark"] .blog-content *:not(a):not(strong):not(h2):not(h3):not(code):not(button) {
  color: #d8d8de !important;
}

/* Mirror our blog-page page-chrome rules under [data-theme=dark] too */
html[data-theme="dark"] .blog-page .pager-card {
  background: #1a2236 !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: #e8e8ea !important;
}
html[data-theme="dark"] .blog-page .pager-card *,
html[data-theme="dark"] .blog-page .pager-title {
  color: #e8e8ea !important;
}
html[data-theme="dark"] .blog-page .pager-dir {
  color: #93c5fd !important;
}
html[data-theme="dark"] .blog-content {
  color: #e8e8ea !important;
}
html[data-theme="dark"] .blog-content h2,
html[data-theme="dark"] .blog-content h3,
html[data-theme="dark"] .blog-content strong {
  color: #f0f0f3 !important;
}
html[data-theme="dark"] .blog-content a {
  color: #60a5fa !important;
  border-bottom-color: rgba(96, 165, 250, 0.32) !important;
}

/* Light-bg attribute selectors mirrored too */
html[data-theme="dark"] .blog-content *[style*="background:#d" i],
html[data-theme="dark"] .blog-content *[style*="background: #d" i],
html[data-theme="dark"] .blog-content *[style*="background:#e" i],
html[data-theme="dark"] .blog-content *[style*="background: #e" i],
html[data-theme="dark"] .blog-content *[style*="background:#f" i],
html[data-theme="dark"] .blog-content *[style*="background: #f" i] {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* ═════════════════════════════════════════════════════════════════
   NUCLEAR — every descendant in .blog-content forced to light text.
   Sweeps anything that might still hold an inline color, regardless
   of element type. Light colors on dark accent backgrounds
   (#0F766E etc.) are excluded by the white-text override below.
   ═════════════════════════════════════════════════════════════════ */
body.dark-version .blog-content *,
html[data-theme="dark"] .blog-content *,
body.dark-version .blog-page article *,
html[data-theme="dark"] .blog-page article * {
  color: #e8e8ea !important;
}

/* Re-promote semantic accents above the universal sweep */
body.dark-version .blog-content strong,
body.dark-version .blog-content h1,
body.dark-version .blog-content h2,
body.dark-version .blog-content h3,
body.dark-version .blog-content h4,
html[data-theme="dark"] .blog-content strong,
html[data-theme="dark"] .blog-content h1,
html[data-theme="dark"] .blog-content h2,
html[data-theme="dark"] .blog-content h3,
html[data-theme="dark"] .blog-content h4 {
  color: #f0f0f3 !important;
}
body.dark-version .blog-content a,
html[data-theme="dark"] .blog-content a {
  color: #60a5fa !important;
}
/* White text on intentional dark accent bg (e.g. #0F766E, #1f2937) — keep white */
body.dark-version .blog-content *[style*="color:white" i],
body.dark-version .blog-content *[style*="color: white" i],
body.dark-version .blog-content *[style*="color:#fff" i],
body.dark-version .blog-content *[style*="color: #fff" i],
body.dark-version .blog-content *[style*="color:#FFF" i],
body.dark-version .blog-content *[style*="color: #FFF" i],
body.dark-version .blog-content *[style*="color:#ffffff" i],
body.dark-version .blog-content *[style*="color: #ffffff" i],
html[data-theme="dark"] .blog-content *[style*="color:white" i],
html[data-theme="dark"] .blog-content *[style*="color: white" i],
html[data-theme="dark"] .blog-content *[style*="color:#fff" i],
html[data-theme="dark"] .blog-content *[style*="color: #fff" i],
html[data-theme="dark"] .blog-content *[style*="color:#FFF" i],
html[data-theme="dark"] .blog-content *[style*="color: #FFF" i] {
  color: #ffffff !important;
}

/* ═════════════════════════════════════════════════════════════════
   ROOT FIX — give .blog-page a dark background. Without this, the
   page wrapper stays white and the catch-all light-text rules end
   up rendering "light text on light page" = washed out / "흐림".
   ═════════════════════════════════════════════════════════════════ */
body.dark-version .blog-page,
html[data-theme="dark"] .blog-page {
  background: #1a1a2e !important;
  color: #e8e8ea !important;
}
body.dark-version,
html[data-theme="dark"] body {
  background: #1a1a2e !important;
  color: #e8e8ea !important;
}
body.dark-version .blog-page .container,
html[data-theme="dark"] .blog-page .container {
  background: transparent !important;
}

/* Article wrapper visible too */
body.dark-version .blog-page article,
html[data-theme="dark"] .blog-page article {
  background: transparent !important;
}

/* ═════════════════════════════════════════════════════════════════
   ELEMENT-SPECIFIC overrides — Key Facts, FAQ, Sources boxes.
   These wrappers have inline backgrounds that the attribute-selector
   sweep misses (linear-gradient, white, #f8fafc nested inside aside/
   section/details). Target by class + tag so inline bg loses.
   ═════════════════════════════════════════════════════════════════ */

/* Key Facts box — inline `background: linear-gradient(...)` */
body.dark-version .blog-key-facts,
html[data-theme="dark"] .blog-key-facts {
  background: #16213e !important;
  border-left-color: #60a5fa !important;
}
body.dark-version .blog-key-facts *,
html[data-theme="dark"] .blog-key-facts * {
  color: #e4e4e8 !important;
}
body.dark-version .blog-key-facts strong,
html[data-theme="dark"] .blog-key-facts strong {
  color: #f0f0f3 !important;
}
body.dark-version .blog-key-facts > div:first-child,
html[data-theme="dark"] .blog-key-facts > div:first-child {
  color: #7cc4ff !important;
}

/* FAQ accordion — inline `background: white` */
body.dark-version article details,
html[data-theme="dark"] article details,
body.dark-version .blog-content details,
html[data-theme="dark"] .blog-content details {
  background: #16213e !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}
body.dark-version article details *,
html[data-theme="dark"] article details *,
body.dark-version .blog-content details *,
html[data-theme="dark"] .blog-content details * {
  color: #e4e4e8 !important;
}
body.dark-version article details summary,
html[data-theme="dark"] article details summary,
body.dark-version .blog-content details summary,
html[data-theme="dark"] .blog-content details summary {
  color: #f0f0f3 !important;
}

/* Sources box — inline `background: #f8fafc` */
body.dark-version .blog-sources,
html[data-theme="dark"] .blog-sources {
  background: #16213e !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}
body.dark-version .blog-sources *,
html[data-theme="dark"] .blog-sources * {
  color: #c4c4ca !important;
}
body.dark-version .blog-sources a,
html[data-theme="dark"] .blog-sources a {
  color: #60a5fa !important;
}
body.dark-version .blog-sources > div:first-child,
html[data-theme="dark"] .blog-sources > div:first-child {
  color: #9ca3af !important;
}

/* FAQ section heading (inline color/style) */
body.dark-version article > h2[style],
html[data-theme="dark"] article > h2[style] {
  color: #f0f0f3 !important;
}

/* ═════════════════════════════════════════════════════════════════
   STRONGER box bg + table contrast.
   Prior light-bg attribute rules used rgba(white, 0.06) which is too
   faint vs light text. Bump to solid dark slate (#16213e) for clear
   contrast.
   ═════════════════════════════════════════════════════════════════ */

/* All light-bg inline boxes → solid dark slate */
body.dark-version .blog-content *[style*="background:#d" i],
body.dark-version .blog-content *[style*="background: #d" i],
body.dark-version .blog-content *[style*="background:#e" i],
body.dark-version .blog-content *[style*="background: #e" i],
body.dark-version .blog-content *[style*="background:#f" i],
body.dark-version .blog-content *[style*="background: #f" i],
html[data-theme="dark"] .blog-content *[style*="background:#d" i],
html[data-theme="dark"] .blog-content *[style*="background: #d" i],
html[data-theme="dark"] .blog-content *[style*="background:#e" i],
html[data-theme="dark"] .blog-content *[style*="background: #e" i],
html[data-theme="dark"] .blog-content *[style*="background:#f" i],
html[data-theme="dark"] .blog-content *[style*="background: #f" i] {
  background: #16213e !important;
  color: #e8e8ea !important;
}

/* Table cells (td/th) — same strong override */
body.dark-version .blog-content table th,
body.dark-version .blog-content table td,
html[data-theme="dark"] .blog-content table th,
html[data-theme="dark"] .blog-content table td {
  color: #e8e8ea !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}
body.dark-version .blog-content table th,
html[data-theme="dark"] .blog-content table th {
  background: #1a2942 !important;
  color: #f0f0f3 !important;
}
/* Zebra stripes on body rows */
body.dark-version .blog-content table tbody tr:nth-child(odd) td,
html[data-theme="dark"] .blog-content table tbody tr:nth-child(odd) td {
  background: #16213e !important;
}
body.dark-version .blog-content table tbody tr:nth-child(even) td,
html[data-theme="dark"] .blog-content table tbody tr:nth-child(even) td {
  background: #1a253f !important;
}
/* Strong / em inside table cells stay readable */
body.dark-version .blog-content table strong,
body.dark-version .blog-content table em,
html[data-theme="dark"] .blog-content table strong,
html[data-theme="dark"] .blog-content table em {
  color: #f0f0f3 !important;
}
/* Inline `style="background:..."` on td OVERRIDES the zebra — already
   handled by the big attribute selector above, this is just defensive. */


/* ═══════════════════════════════════════════════════════════════════════════
   Learn pages — /learn, /learn/<subject>, /learn/<subject>/<lesson>
   Dual selector (body.dark-version + html[data-theme="dark"]) matches the
   convention used throughout this file so that FOUC-time and post-load
   toggles both apply. All rules use !important to override page-scoped
   inline styles from the templates' <style> blocks.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── /learn (subject index) ── */
body.dark-version .learn-page,
html[data-theme="dark"] .learn-page { background:#0a0a0f !important; }
body.dark-version .learn-hero h1,
html[data-theme="dark"] .learn-hero h1 { color:#f5f5f7 !important; }
body.dark-version .learn-hero h1 span,
html[data-theme="dark"] .learn-hero h1 span {
  background:linear-gradient(135deg,#60a5fa,#7dd3fc) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
}
body.dark-version .learn-hero p,
html[data-theme="dark"] .learn-hero p { color:#a1a1aa !important; }
body.dark-version .learn-search input[type="search"],
html[data-theme="dark"] .learn-search input[type="search"] {
  background:#16161d !important; color:#f5f5f7 !important;
  border-color:rgba(255,255,255,0.10) !important;
  box-shadow:0 2px 10px rgba(0,0,0,0.4) !important;
}
body.dark-version .learn-search input[type="search"]::placeholder,
html[data-theme="dark"] .learn-search input[type="search"]::placeholder { color:#71717a !important; }
body.dark-version .learn-search input[type="search"]:focus,
html[data-theme="dark"] .learn-search input[type="search"]:focus {
  border-color:#60a5fa !important; box-shadow:0 0 0 4px rgba(96,165,250,0.18) !important;
}
body.dark-version .learn-search .ls-icon,
html[data-theme="dark"] .learn-search .ls-icon { color:#71717a !important; }
body.dark-version .learn-search .ls-clear,
html[data-theme="dark"] .learn-search .ls-clear { background:#27272a !important; color:#a1a1aa !important; }
body.dark-version .learn-search .ls-clear:hover,
html[data-theme="dark"] .learn-search .ls-clear:hover { background:#3f3f46 !important; color:#f5f5f7 !important; }
body.dark-version .learn-section-label,
html[data-theme="dark"] .learn-section-label { color:#a1a1aa !important; }
body.dark-version .learn-section-divider hr,
html[data-theme="dark"] .learn-section-divider hr { background:rgba(255,255,255,0.10) !important; }
body.dark-version .learn-card,
html[data-theme="dark"] .learn-card {
  background:#16161d !important; box-shadow:0 4px 24px rgba(0,0,0,0.4) !important;
}
body.dark-version .learn-card:hover,
html[data-theme="dark"] .learn-card:hover { box-shadow:0 10px 36px rgba(0,0,0,0.55) !important; }
body.dark-version .learn-card h3,
html[data-theme="dark"] .learn-card h3 { color:#f5f5f7 !important; }
body.dark-version .learn-card .desc,
html[data-theme="dark"] .learn-card .desc { color:#a1a1aa !important; }
body.dark-version .learn-card .count,
html[data-theme="dark"] .learn-card .count { color:#e5e5ea !important; }
body.dark-version .learn-card .count.empty,
html[data-theme="dark"] .learn-card .count.empty { color:#71717a !important; }
body.dark-version .learn-card .arrow,
html[data-theme="dark"] .learn-card .arrow { background:rgba(96,165,250,0.14) !important; color:#60a5fa !important; }
body.dark-version .learn-card:hover .arrow,
html[data-theme="dark"] .learn-card:hover .arrow { background:#60a5fa !important; color:#0a0a0f !important; }
body.dark-version .learn-searchcount,
html[data-theme="dark"] .learn-searchcount { color:#a1a1aa !important; }
body.dark-version .learn-searchcount strong,
html[data-theme="dark"] .learn-searchcount strong { color:#f5f5f7 !important; }
body.dark-version .ls-result,
html[data-theme="dark"] .ls-result {
  background:#16161d !important; box-shadow:0 4px 18px rgba(0,0,0,0.4) !important;
}
body.dark-version .ls-result:hover,
html[data-theme="dark"] .ls-result:hover { box-shadow:0 10px 30px rgba(0,0,0,0.55) !important; }
body.dark-version .ls-result h3,
html[data-theme="dark"] .ls-result h3 { color:#f5f5f7 !important; }
body.dark-version .ls-result p,
html[data-theme="dark"] .ls-result p { color:#a1a1aa !important; }

/* ── /learn/<subject> (lesson list) ── */
body.dark-version .ls-page,
html[data-theme="dark"] .ls-page { background:#0a0a0f !important; }
body.dark-version .ls-back,
html[data-theme="dark"] .ls-back { color:#a1a1aa !important; }
body.dark-version .ls-back:hover,
html[data-theme="dark"] .ls-back:hover { color:#f5f5f7 !important; }
body.dark-version .ls-empty,
html[data-theme="dark"] .ls-empty {
  background:#16161d !important; box-shadow:0 4px 24px rgba(0,0,0,0.4) !important;
}
body.dark-version .ls-empty h2,
html[data-theme="dark"] .ls-empty h2 { color:#f5f5f7 !important; }
body.dark-version .ls-empty p,
html[data-theme="dark"] .ls-empty p { color:#a1a1aa !important; }
body.dark-version .ls-item,
html[data-theme="dark"] .ls-item {
  background:#16161d !important; box-shadow:0 4px 22px rgba(0,0,0,0.4) !important;
}
body.dark-version .ls-item:hover,
html[data-theme="dark"] .ls-item:hover { box-shadow:0 8px 28px rgba(0,0,0,0.55) !important; }
body.dark-version .ls-body h3,
html[data-theme="dark"] .ls-body h3 { color:#f5f5f7 !important; }
body.dark-version .ls-body p,
html[data-theme="dark"] .ls-body p { color:#a1a1aa !important; }
body.dark-version .ls-meta,
html[data-theme="dark"] .ls-meta { color:#71717a !important; }
body.dark-version .ls-meta .pill,
html[data-theme="dark"] .ls-meta .pill { background:#27272a !important; color:#e5e5ea !important; }
body.dark-version .ls-arrow,
html[data-theme="dark"] .ls-arrow { background:rgba(96,165,250,0.14) !important; color:#60a5fa !important; }

/* ── /learn/<subject>/<lesson> (lesson content) ── */
body.dark-version .lp-page,
html[data-theme="dark"] .lp-page { background:#0a0a0f !important; }
body.dark-version .lp-toc .lp-toc-label,
html[data-theme="dark"] .lp-toc .lp-toc-label { color:#71717a !important; }
body.dark-version .lp-toc h4,
html[data-theme="dark"] .lp-toc h4 { color:#f5f5f7 !important; }
body.dark-version .lp-toc a,
html[data-theme="dark"] .lp-toc a { color:#a1a1aa !important; }
body.dark-version .lp-toc a::before,
html[data-theme="dark"] .lp-toc a::before { color:#52525b !important; }
body.dark-version .lp-toc a:hover,
html[data-theme="dark"] .lp-toc a:hover { background:#16161d !important; color:#f5f5f7 !important; }
body.dark-version .lp-main,
html[data-theme="dark"] .lp-main {
  background:#16161d !important; box-shadow:0 4px 28px rgba(0,0,0,0.5) !important;
}
body.dark-version .lp-hero,
html[data-theme="dark"] .lp-hero {
  background:linear-gradient(135deg, var(--subj-faint) 0%, #16161d 70%) !important;
  border-bottom-color:rgba(255,255,255,0.06) !important;
}
body.dark-version .lp-hero .breadcrumb,
html[data-theme="dark"] .lp-hero .breadcrumb { color:#a1a1aa !important; }
body.dark-version .lp-hero h1,
html[data-theme="dark"] .lp-hero h1 { color:#f5f5f7 !important; }
body.dark-version .lp-hero .summary,
html[data-theme="dark"] .lp-hero .summary { color:#d4d4d8 !important; }
body.dark-version .lp-hero .meta .pill,
html[data-theme="dark"] .lp-hero .meta .pill {
  background:#27272a !important; border-color:rgba(255,255,255,0.10) !important; color:#e5e5ea !important;
}
body.dark-version .lp-body,
html[data-theme="dark"] .lp-body { color:#e5e5ea !important; }
body.dark-version .lp-body h2,
html[data-theme="dark"] .lp-body h2 { color:#f5f5f7 !important; }
body.dark-version .lp-body h3,
html[data-theme="dark"] .lp-body h3 { color:#f5f5f7 !important; }
body.dark-version .lp-body strong,
html[data-theme="dark"] .lp-body strong { color:#f5f5f7 !important; }
body.dark-version .lp-body a,
html[data-theme="dark"] .lp-body a { color:#60a5fa !important; }
body.dark-version .lp-body ul li,
body.dark-version .lp-body ol li,
html[data-theme="dark"] .lp-body ul li,
html[data-theme="dark"] .lp-body ol li { color:#e5e5ea !important; }
body.dark-version .lp-body blockquote,
html[data-theme="dark"] .lp-body blockquote { color:#d4d4d8 !important; }
body.dark-version .lp-body table th,
body.dark-version .lp-body table td,
html[data-theme="dark"] .lp-body table th,
html[data-theme="dark"] .lp-body table td { border-color:rgba(255,255,255,0.10) !important; color:#e5e5ea !important; }
body.dark-version .lp-body table th,
html[data-theme="dark"] .lp-body table th { background:#27272a !important; }
body.dark-version .lp-body code,
html[data-theme="dark"] .lp-body code {
  background:#27272a !important; color:#fbbf24 !important;
}
body.dark-version .lp-body pre,
html[data-theme="dark"] .lp-body pre {
  background:#0a0a0f !important; color:#e5e5ea !important; border:1px solid rgba(255,255,255,0.08) !important;
}
/* Callouts */
body.dark-version .lp-callout,
html[data-theme="dark"] .lp-callout { background:rgba(96,165,250,0.10) !important; color:#e5e5ea !important; }
body.dark-version .lp-aha,
html[data-theme="dark"] .lp-aha {
  background:linear-gradient(135deg,rgba(245,158,11,0.14),rgba(245,158,11,0.08)) !important;
  color:#fef3c7 !important;
}
body.dark-version .lp-aha .label,
html[data-theme="dark"] .lp-aha .label { color:#fbbf24 !important; }
body.dark-version .lp-warn,
html[data-theme="dark"] .lp-warn { background:rgba(220,38,38,0.12) !important; color:#fecaca !important; }
body.dark-version .lp-warn .label,
html[data-theme="dark"] .lp-warn .label { color:#f87171 !important; }
/* Figures */
body.dark-version .lp-figure figcaption,
html[data-theme="dark"] .lp-figure figcaption { color:#a1a1aa !important; }
body.dark-version .lp-figure img,
html[data-theme="dark"] .lp-figure img { box-shadow:0 6px 24px rgba(0,0,0,0.5) !important; }
/* Practice question CTA */
body.dark-version .lp-practice,
html[data-theme="dark"] .lp-practice {
  background:linear-gradient(135deg, var(--subj-faint), #16161d) !important;
}
body.dark-version .lp-practice h4,
html[data-theme="dark"] .lp-practice h4 { color:#f5f5f7 !important; }
body.dark-version .lp-practice p,
html[data-theme="dark"] .lp-practice p { color:#d4d4d8 !important; }
/* Vocab */
body.dark-version .lp-vocab .term,
html[data-theme="dark"] .lp-vocab .term { background:#27272a !important; }
body.dark-version .lp-vocab .term dd,
html[data-theme="dark"] .lp-vocab .term dd { color:#e5e5ea !important; }
/* Image slot placeholder */
body.dark-version .lp-img-slot-placeholder,
html[data-theme="dark"] .lp-img-slot-placeholder {
  background: repeating-linear-gradient(45deg, #18181b, #18181b 12px, #27272a 12px, #27272a 24px) !important;
  border-color: rgba(255,255,255,0.14) !important; color: #d4d4d8 !important;
}
body.dark-version .lp-img-slot-placeholder .lp-img-slot-label,
html[data-theme="dark"] .lp-img-slot-placeholder .lp-img-slot-label { color: #fbbf24 !important; }
body.dark-version .lp-img-slot-placeholder .lp-img-slot-label code,
html[data-theme="dark"] .lp-img-slot-placeholder .lp-img-slot-label code {
  background: rgba(251,191,36,0.15) !important; color: #fde68a !important;
}
body.dark-version .lp-img-slot-placeholder .lp-img-slot-prompt,
html[data-theme="dark"] .lp-img-slot-placeholder .lp-img-slot-prompt { color: #d4d4d8 !important; }
body.dark-version .lp-img-slot-placeholder .lp-img-slot-caption,
html[data-theme="dark"] .lp-img-slot-placeholder .lp-img-slot-caption {
  color: #a1a1aa !important; border-top-color: rgba(255,255,255,0.10) !important;
}
/* Prev/next nav */
body.dark-version .lp-nav,
html[data-theme="dark"] .lp-nav { border-top-color:rgba(255,255,255,0.08) !important; }
body.dark-version .lp-nav a,
html[data-theme="dark"] .lp-nav a { background:#27272a !important; }
body.dark-version .lp-nav a:hover,
html[data-theme="dark"] .lp-nav a:hover { background:#3f3f46 !important; box-shadow:0 4px 18px rgba(0,0,0,0.5) !important; }
body.dark-version .lp-nav .dir,
html[data-theme="dark"] .lp-nav .dir { color:#a1a1aa !important; }
body.dark-version .lp-nav .nav-title,
html[data-theme="dark"] .lp-nav .nav-title { color:#f5f5f7 !important; }
/* Inline sample quiz */
body.dark-version .lp-quiz,
html[data-theme="dark"] .lp-quiz {
  background:linear-gradient(135deg,var(--subj-faint),#16161d) !important;
}
body.dark-version .lp-quiz-label,
html[data-theme="dark"] .lp-quiz-label { background:#27272a !important; }
body.dark-version .lp-quiz-q,
html[data-theme="dark"] .lp-quiz-q { color:#f5f5f7 !important; }
body.dark-version .lp-choice,
html[data-theme="dark"] .lp-choice {
  background:#27272a !important; border-color:rgba(255,255,255,0.12) !important; color:#e5e5ea !important;
}
body.dark-version .lp-choice.correct,
html[data-theme="dark"] .lp-choice.correct {
  background:rgba(52,199,89,0.16) !important; border-color:#34c759 !important; color:#a7f3d0 !important;
}
body.dark-version .lp-choice.wrong,
html[data-theme="dark"] .lp-choice.wrong {
  background:rgba(255,59,48,0.14) !important; border-color:#ff3b30 !important; color:#fecaca !important;
}
body.dark-version .lp-quiz-msg.ok,
html[data-theme="dark"] .lp-quiz-msg.ok {
  background:rgba(52,199,89,0.16) !important; color:#86efac !important; border-color:rgba(52,199,89,0.4) !important;
}
body.dark-version .lp-quiz-msg.no,
html[data-theme="dark"] .lp-quiz-msg.no {
  background:rgba(255,59,48,0.16) !important; color:#fca5a5 !important; border-color:rgba(255,59,48,0.4) !important;
}
body.dark-version .lp-quiz-explain,
html[data-theme="dark"] .lp-quiz-explain { color:#d4d4d8 !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   Dashboard menu pages — Profile, Admin lesson list, Admin lesson images,
   and other pages with hardcoded light gradients / light chips.
   Each of these templates defines its own <style> block with light colors
   and no dark counterparts; rules here fill that gap centrally.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── /profile ── */
body.dark-version .profile-page .profile-header,
html[data-theme="dark"] .profile-page .profile-header { border-bottom-color:rgba(255,255,255,0.08) !important; }
body.dark-version .profile-page .profile-header h4,
html[data-theme="dark"] .profile-page .profile-header h4 { color:#f5f5f7 !important; }
body.dark-version .profile-page .profile-header p,
html[data-theme="dark"] .profile-page .profile-header p { color:#a1a1aa !important; }
body.dark-version .profile-page .profile-card,
html[data-theme="dark"] .profile-page .profile-card {
  background:#16161d !important; box-shadow:0 4px 24px rgba(0,0,0,0.4) !important;
}
body.dark-version .profile-page .profile-card:hover,
html[data-theme="dark"] .profile-page .profile-card:hover { box-shadow:0 12px 40px rgba(0,0,0,0.5) !important; }
body.dark-version .profile-page .profile-card .card-header,
html[data-theme="dark"] .profile-page .profile-card .card-header {
  background:linear-gradient(135deg, #1a1a24 0%, #16161d 100%) !important;
  border-color:rgba(255,255,255,0.06) !important;
}
body.dark-version .profile-page .profile-card .card-header h5,
html[data-theme="dark"] .profile-page .profile-card .card-header h5 { color:#f5f5f7 !important; }
body.dark-version .profile-page .profile-card .card-header small,
html[data-theme="dark"] .profile-page .profile-card .card-header small { color:#a1a1aa !important; }
body.dark-version .profile-page .form-label,
html[data-theme="dark"] .profile-page .form-label { color:#d4d4d8 !important; }
body.dark-version .profile-page .form-control,
html[data-theme="dark"] .profile-page .form-control {
  background:#0f0f13 !important; color:#e5e5ea !important;
  border-color:rgba(255,255,255,0.10) !important;
}
body.dark-version .profile-page .form-control.bg-light,
html[data-theme="dark"] .profile-page .form-control.bg-light {
  background-color:#1a1a24 !important; color:#a1a1aa !important;
}
body.dark-version .profile-page .form-control:focus,
html[data-theme="dark"] .profile-page .form-control:focus {
  border-color:#fd7e14 !important; box-shadow:0 0 0 3px rgba(253,126,20,0.25) !important;
}
body.dark-version .profile-page .usdc-info-box,
html[data-theme="dark"] .profile-page .usdc-info-box {
  background:linear-gradient(135deg, rgba(6,182,212,0.10) 0%, rgba(59,130,246,0.10) 100%) !important;
  border-color:rgba(6,182,212,0.30) !important; color:#e5e5ea !important;
}
body.dark-version .profile-page .api-info-box,
html[data-theme="dark"] .profile-page .api-info-box {
  background:linear-gradient(135deg, rgba(37,99,235,0.12) 0%, rgba(59,130,246,0.10) 100%) !important;
  border-color:rgba(0,82,255,0.30) !important; color:#e5e5ea !important;
}
body.dark-version .profile-page .api-info-box a,
html[data-theme="dark"] .profile-page .api-info-box a { color:#60a5fa !important; }
body.dark-version .profile-page .telegram-help-icon,
html[data-theme="dark"] .profile-page .telegram-help-icon { color:#a1a1aa !important; }
body.dark-version .profile-page .telegram-help-icon:hover,
html[data-theme="dark"] .profile-page .telegram-help-icon:hover { color:#fb923c !important; }
body.dark-version .profile-page .telegram-connected,
html[data-theme="dark"] .profile-page .telegram-connected { color:#34d399 !important; }
body.dark-version .profile-page .telegram-warning,
html[data-theme="dark"] .profile-page .telegram-warning { color:#fbbf24 !important; }
/* Delete-account red card gets a subtle red-tinted dark bg */
body.dark-version .profile-page .card-header[style*="fef2f2" i],
html[data-theme="dark"] .profile-page .card-header[style*="fef2f2" i] {
  background:linear-gradient(135deg, rgba(239,68,68,0.15) 0%, #16161d 100%) !important;
}

/* ── /admin/lessons (lessons_list.html) ── */
body.dark-version .subj-tab,
html[data-theme="dark"] .subj-tab {
  background:#27272a !important; color:#e5e5ea !important; border-color:rgba(255,255,255,0.10) !important;
}
body.dark-version .subj-tab:hover,
html[data-theme="dark"] .subj-tab:hover { background:#3f3f46 !important; color:#f5f5f7 !important; }
body.dark-version .subj-tab.active,
html[data-theme="dark"] .subj-tab.active { background:#0071e3 !important; color:#fff !important; border-color:#0071e3 !important; }
body.dark-version .subj-tab:not(.active) .count,
html[data-theme="dark"] .subj-tab:not(.active) .count { background:#3f3f46 !important; color:#e5e5ea !important; }
body.dark-version .subj-tab.active .count,
html[data-theme="dark"] .subj-tab.active .count { background:rgba(255,255,255,0.25) !important; color:#fff !important; }

/* ── /admin/lessons/<id>/images (lesson_images.html) ── */
body.dark-version .li-card,
html[data-theme="dark"] .li-card {
  background:#16161d !important; box-shadow:0 4px 18px rgba(0,0,0,0.4) !important;
}
body.dark-version .li-slot-key,
html[data-theme="dark"] .li-slot-key {
  background:#27272a !important; color:#fbbf24 !important;
}
body.dark-version .li-preview-link,
html[data-theme="dark"] .li-preview-link {
  background:#16161d !important; box-shadow:0 4px 16px rgba(0,0,0,0.4) !important;
}
body.dark-version .li-empty-preview,
html[data-theme="dark"] .li-empty-preview {
  background:repeating-linear-gradient(45deg, #18181b, #18181b 12px, #27272a 12px, #27272a 24px) !important;
  border-color:rgba(255,255,255,0.12) !important; color:#a1a1aa !important;
}

/* ── Generic: any hardcoded inline light bg boxes in admin templates ── */
/* Inline "background:#f8fafc" etc. — flip to dark surface */
body.dark-version [style*="background:#f8fafc" i],
body.dark-version [style*="background: #f8fafc" i],
html[data-theme="dark"] [style*="background:#f8fafc" i],
html[data-theme="dark"] [style*="background: #f8fafc" i] {
  background:#1a1a24 !important;
}
body.dark-version [style*="background:#f5f5f7" i],
body.dark-version [style*="background: #f5f5f7" i],
html[data-theme="dark"] [style*="background:#f5f5f7" i],
html[data-theme="dark"] [style*="background: #f5f5f7" i] {
  background:#27272a !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   Inline-style overrides — attribute selectors that catch hardcoded
   light backgrounds and dark text embedded directly in template markup.
   Dashboard hero, admin panels, marketing pills, etc. commonly use
   patterns like style="background:#eef2ff; color:#4338ca" that survive
   the general .card/.bg-white overrides. Flip both halves here.
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Inline text colors --- */
/* Deep-slate text used on cards/heroes → light */
body.dark-version [style*="color: #1d1d1f" i],
body.dark-version [style*="color:#1d1d1f" i],
html[data-theme="dark"] [style*="color: #1d1d1f" i],
html[data-theme="dark"] [style*="color:#1d1d1f" i] { color:#f5f5f7 !important; }
body.dark-version [style*="color: #344767" i],
body.dark-version [style*="color:#344767" i],
html[data-theme="dark"] [style*="color: #344767" i],
html[data-theme="dark"] [style*="color:#344767" i] { color:#f5f5f7 !important; }
body.dark-version [style*="color: #1e293b" i],
body.dark-version [style*="color:#1e293b" i],
html[data-theme="dark"] [style*="color: #1e293b" i],
html[data-theme="dark"] [style*="color:#1e293b" i] { color:#f5f5f7 !important; }
/* Mid-slate secondary text */
body.dark-version [style*="color: #6b7280" i],
body.dark-version [style*="color:#6b7280" i],
html[data-theme="dark"] [style*="color: #6b7280" i],
html[data-theme="dark"] [style*="color:#6b7280" i] { color:#a1a1aa !important; }
body.dark-version [style*="color: #67748e" i],
body.dark-version [style*="color:#67748e" i],
html[data-theme="dark"] [style*="color: #67748e" i],
html[data-theme="dark"] [style*="color:#67748e" i] { color:#a1a1aa !important; }
body.dark-version [style*="color: #6e6e73" i],
body.dark-version [style*="color:#6e6e73" i],
html[data-theme="dark"] [style*="color: #6e6e73" i],
html[data-theme="dark"] [style*="color:#6e6e73" i] { color:#a1a1aa !important; }
/* Pill accent colors: darken tones become brighter */
body.dark-version [style*="color:#4338ca" i],
body.dark-version [style*="color: #4338ca" i],
html[data-theme="dark"] [style*="color:#4338ca" i],
html[data-theme="dark"] [style*="color: #4338ca" i] { color:#a5b4fc !important; }
body.dark-version [style*="color:#047857" i],
body.dark-version [style*="color: #047857" i],
html[data-theme="dark"] [style*="color:#047857" i],
html[data-theme="dark"] [style*="color: #047857" i] { color:#6ee7b7 !important; }
body.dark-version [style*="color:#b45309" i],
body.dark-version [style*="color: #b45309" i],
html[data-theme="dark"] [style*="color:#b45309" i],
html[data-theme="dark"] [style*="color: #b45309" i] { color:#fbbf24 !important; }
body.dark-version [style*="color:#2563eb" i],
body.dark-version [style*="color: #2563eb" i],
html[data-theme="dark"] [style*="color:#2563eb" i],
html[data-theme="dark"] [style*="color: #2563eb" i] { color:#60a5fa !important; }
body.dark-version [style*="color:#1e40af" i],
body.dark-version [style*="color: #1e40af" i],
html[data-theme="dark"] [style*="color:#1e40af" i],
html[data-theme="dark"] [style*="color: #1e40af" i] { color:#93c5fd !important; }

/* --- Inline light backgrounds --- */
/* Light indigo/blue tint pill */
body.dark-version [style*="background:#eef2ff" i],
body.dark-version [style*="background: #eef2ff" i],
html[data-theme="dark"] [style*="background:#eef2ff" i],
html[data-theme="dark"] [style*="background: #eef2ff" i] { background:rgba(129,140,248,0.18) !important; }
/* Light green pill */
body.dark-version [style*="background:#ecfdf5" i],
body.dark-version [style*="background: #ecfdf5" i],
html[data-theme="dark"] [style*="background:#ecfdf5" i],
html[data-theme="dark"] [style*="background: #ecfdf5" i] { background:rgba(52,211,153,0.18) !important; }
body.dark-version [style*="background:#dcfce7" i],
body.dark-version [style*="background: #dcfce7" i],
html[data-theme="dark"] [style*="background:#dcfce7" i],
html[data-theme="dark"] [style*="background: #dcfce7" i] { background:rgba(52,211,153,0.18) !important; }
/* Light amber pill */
body.dark-version [style*="background:#fffbeb" i],
body.dark-version [style*="background: #fffbeb" i],
html[data-theme="dark"] [style*="background:#fffbeb" i],
html[data-theme="dark"] [style*="background: #fffbeb" i] { background:rgba(251,191,36,0.18) !important; }
body.dark-version [style*="background:#fef3c7" i],
body.dark-version [style*="background: #fef3c7" i],
html[data-theme="dark"] [style*="background:#fef3c7" i],
html[data-theme="dark"] [style*="background: #fef3c7" i] { background:rgba(251,191,36,0.20) !important; }
/* Light red/rose pill */
body.dark-version [style*="background:#fef2f2" i],
body.dark-version [style*="background: #fef2f2" i],
html[data-theme="dark"] [style*="background:#fef2f2" i],
html[data-theme="dark"] [style*="background: #fef2f2" i] { background:rgba(248,113,113,0.15) !important; }
/* Panel/section light backgrounds */
body.dark-version [style*="background:#f6f8fc" i],
body.dark-version [style*="background: #f6f8fc" i],
html[data-theme="dark"] [style*="background:#f6f8fc" i],
html[data-theme="dark"] [style*="background: #f6f8fc" i] { background:#1a1a24 !important; }
body.dark-version [style*="background:#f8fafc" i],
body.dark-version [style*="background: #f8fafc" i],
html[data-theme="dark"] [style*="background:#f8fafc" i],
html[data-theme="dark"] [style*="background: #f8fafc" i] { background:#1a1a24 !important; }
body.dark-version [style*="background:#f9fafb" i],
body.dark-version [style*="background: #f9fafb" i],
html[data-theme="dark"] [style*="background:#f9fafb" i],
html[data-theme="dark"] [style*="background: #f9fafb" i] { background:#1a1a24 !important; }
body.dark-version [style*="background:#f3f4f6" i],
body.dark-version [style*="background: #f3f4f6" i],
html[data-theme="dark"] [style*="background:#f3f4f6" i],
html[data-theme="dark"] [style*="background: #f3f4f6" i] { background:#27272a !important; }
body.dark-version [style*="background:#e5e7eb" i],
body.dark-version [style*="background: #e5e7eb" i],
html[data-theme="dark"] [style*="background:#e5e7eb" i],
html[data-theme="dark"] [style*="background: #e5e7eb" i] { background:#3f3f46 !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   Zero-flicker top navbar in dark mode.
   The .blur navbar uses backdrop-filter + semi-transparent bg which can
   render inconsistently during page navigation (blur compositing lag).
   Force a solid dark surface and disable transitions so that first-paint
   after navigation is identical every time.
   ═══════════════════════════════════════════════════════════════════════════ */
body.dark-version .navbar.blur,
html[data-theme="dark"] .navbar.blur,
body.dark-version .blur.blur-rounded,
html[data-theme="dark"] .blur.blur-rounded {
  background: #16213e !important;   /* solid, no bleed-through */
  backdrop-filter: none !important;  /* skip GPU compositing */
  -webkit-backdrop-filter: none !important;
  transition: none !important;
}
/* Also solidify the plain .navbar in case the .blur class ever comes off. */
body.dark-version .navbar,
html[data-theme="dark"] .navbar {
  background: #16213e !important;
  transition: none !important;
}
/* Navbar link icons that carry .text-dark: pin them to a fixed light color
   so no cascade delay during navigation can leave them dark for a frame. */
body.dark-version .navbar .text-dark,
html[data-theme="dark"] .navbar .text-dark,
body.dark-version .navbar-nav .nav-link i,
html[data-theme="dark"] .navbar-nav .nav-link i {
  color: #e0e0e0 !important;
}
/* Kill the theme-toggle button's own hover/border transition so the icon
   doesn't animate at page arrival. */
body.dark-version .cbe-theme-toggle,
html[data-theme="dark"] .cbe-theme-toggle { transition: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   Solid white/near-white CARD surfaces (global).
   dark-mode.css already flips inline dark TEXT to light globally (see the
   [style*="color:#1d1d1f" i] rules), but the most common card backgrounds —
   white / #fff / #ffffff / #f8f9fa / #f5f5f7 — were only darkened when scoped
   to .blog-content or .lp-body. On every other custom page (landing sections,
   guide cards, mock-exam rows via inline styles) that left light text on a
   still-white box = washed out. Darken them globally, mirroring the text flip.
   Matching is `;`-terminated / full-length so tint pills like #fffbeb (which
   contain the substring "#fff") and keywords like whitesmoke are NOT caught.
   ═══════════════════════════════════════════════════════════════════════════ */
body.dark-version [style*="background:#ffffff" i],
body.dark-version [style*="background: #ffffff" i],
body.dark-version [style*="background:#fff;" i],
body.dark-version [style*="background: #fff;" i],
body.dark-version [style*="background:white" i],
body.dark-version [style*="background: white" i],
html[data-theme="dark"] [style*="background:#ffffff" i],
html[data-theme="dark"] [style*="background: #ffffff" i],
html[data-theme="dark"] [style*="background:#fff;" i],
html[data-theme="dark"] [style*="background: #fff;" i],
html[data-theme="dark"] [style*="background:white" i],
html[data-theme="dark"] [style*="background: white" i] {
  /* Background only — never touch border-color here: many of these cards use a
     colored `border-left:4px solid <accent>` stripe we must preserve. */
  background: #16213e !important;
}
body.dark-version [style*="background:#f8f9fa" i],
body.dark-version [style*="background: #f8f9fa" i],
body.dark-version [style*="background:#f5f5f7" i],
body.dark-version [style*="background: #f5f5f7" i],
html[data-theme="dark"] [style*="background:#f8f9fa" i],
html[data-theme="dark"] [style*="background: #f8f9fa" i],
html[data-theme="dark"] [style*="background:#f5f5f7" i],
html[data-theme="dark"] [style*="background: #f5f5f7" i] {
  background: #1a1a24 !important;
}
/* Brand accent text (uppercase labels, links) → brighten for dark surfaces */
body.dark-version [style*="color:#1d4ed8" i],
body.dark-version [style*="color: #1d4ed8" i],
html[data-theme="dark"] [style*="color:#1d4ed8" i],
html[data-theme="dark"] [style*="color: #1d4ed8" i] { color:#93c5fd !important; }
body.dark-version [style*="color:#d97706" i],
body.dark-version [style*="color: #d97706" i],
html[data-theme="dark"] [style*="color:#d97706" i],
html[data-theme="dark"] [style*="color: #d97706" i] { color:#fbbf24 !important; }

/* AMC trademark disclaimer (footer variant, includes/amc_legal_disclaimer.html).
   Its inline background is #f8f9fa (light) which no attribute rule darkens, so
   the globally-inverted light text landed on a light box = washed out. Darken
   the surface and set readable text everywhere the include appears. */
body.dark-version .amc-legal-footer,
html[data-theme="dark"] .amc-legal-footer {
  background: #131a2e !important;
  color: #cbd5e1 !important;
  border-left-color: #dc2626 !important;
}
body.dark-version .amc-legal-footer div[style*="color:#1d1d1f" i],
html[data-theme="dark"] .amc-legal-footer div[style*="color:#1d1d1f" i] {
  color: #f1f5f9 !important;
}
body.dark-version .amc-legal-footer strong,
html[data-theme="dark"] .amc-legal-footer strong { color: #e2e8f0 !important; }


/* ═══ AUTO-GENERATED dark-mode coverage (full apps/templates scan) ═══
   Dark inline TEXT -> lightened (hue kept); light inline BG -> darkened
   (neutral->solid dark, tint->translucent hue). Raw token match so 3-
   digit (#666) and 6-digit forms both hit. Existing scoped rules win. */

/* --- text --- */
body.dark-version [style*="color:#333" i],
body.dark-version [style*="color: #333" i],
html[data-theme="dark"] [style*="color:#333" i],
html[data-theme="dark"] [style*="color: #333" i] { color:#cbd5e1 !important; }
body.dark-version [style*="color:#666" i],
body.dark-version [style*="color: #666" i],
html[data-theme="dark"] [style*="color:#666" i],
html[data-theme="dark"] [style*="color: #666" i] { color:#cbd5e1 !important; }
body.dark-version [style*="color:#555" i],
body.dark-version [style*="color: #555" i],
html[data-theme="dark"] [style*="color:#555" i],
html[data-theme="dark"] [style*="color: #555" i] { color:#cbd5e1 !important; }
body.dark-version [style*="color:#444" i],
body.dark-version [style*="color: #444" i],
html[data-theme="dark"] [style*="color:#444" i],
html[data-theme="dark"] [style*="color: #444" i] { color:#cbd5e1 !important; }
body.dark-version [style*="color:#888" i],
body.dark-version [style*="color: #888" i],
html[data-theme="dark"] [style*="color:#888" i],
html[data-theme="dark"] [style*="color: #888" i] { color:#cbd5e1 !important; }
body.dark-version [style*="color:#9a3412" i],
body.dark-version [style*="color: #9a3412" i],
html[data-theme="dark"] [style*="color:#9a3412" i],
html[data-theme="dark"] [style*="color: #9a3412" i] { color:#f1a288 !important; }
body.dark-version [style*="color:#7c2d12" i],
body.dark-version [style*="color: #7c2d12" i],
html[data-theme="dark"] [style*="color:#7c2d12" i],
html[data-theme="dark"] [style*="color: #7c2d12" i] { color:#eea48b !important; }
body.dark-version [style*="color:#92400e" i],
body.dark-version [style*="color: #92400e" i],
html[data-theme="dark"] [style*="color:#92400e" i],
html[data-theme="dark"] [style*="color: #92400e" i] { color:#f3af86 !important; }
body.dark-version [style*="color:#78350f" i],
body.dark-version [style*="color: #78350f" i],
html[data-theme="dark"] [style*="color:#78350f" i],
html[data-theme="dark"] [style*="color: #78350f" i] { color:#f0ae89 !important; }
body.dark-version [style*="color:#86868b" i],
body.dark-version [style*="color: #86868b" i],
html[data-theme="dark"] [style*="color:#86868b" i],
html[data-theme="dark"] [style*="color: #86868b" i] { color:#cbd5e1 !important; }
body.dark-version [style*="color:#0071e3" i],
body.dark-version [style*="color: #0071e3" i],
html[data-theme="dark"] [style*="color:#0071e3" i],
html[data-theme="dark"] [style*="color: #0071e3" i] { color:#84bcf5 !important; }
body.dark-version [style*="color:#ff6f00" i],
body.dark-version [style*="color: #ff6f00" i],
html[data-theme="dark"] [style*="color:#ff6f00" i],
html[data-theme="dark"] [style*="color: #ff6f00" i] { color:#f5b584 !important; }
body.dark-version [style*="color:#7f1d1d" i],
body.dark-version [style*="color: #7f1d1d" i],
html[data-theme="dark"] [style*="color:#7f1d1d" i],
html[data-theme="dark"] [style*="color: #7f1d1d" i] { color:#e69393 !important; }
body.dark-version [style*="color:#dc2626" i],
body.dark-version [style*="color: #dc2626" i],
html[data-theme="dark"] [style*="color:#dc2626" i],
html[data-theme="dark"] [style*="color: #dc2626" i] { color:#ed8d8d !important; }
body.dark-version [style*="color:#6c757d" i],
body.dark-version [style*="color: #6c757d" i],
html[data-theme="dark"] [style*="color:#6c757d" i],
html[data-theme="dark"] [style*="color: #6c757d" i] { color:#cbd5e1 !important; }
body.dark-version [style*="color:#4b5563" i],
body.dark-version [style*="color: #4b5563" i],
html[data-theme="dark"] [style*="color:#4b5563" i],
html[data-theme="dark"] [style*="color: #4b5563" i] { color:#b4bbc6 !important; }
body.dark-version [style*="color:#166534" i],
body.dark-version [style*="color: #166534" i],
html[data-theme="dark"] [style*="color:#166534" i],
html[data-theme="dark"] [style*="color: #166534" i] { color:#92e7b2 !important; }
body.dark-version [style*="color:#1e3a8a" i],
body.dark-version [style*="color: #1e3a8a" i],
html[data-theme="dark"] [style*="color:#1e3a8a" i],
html[data-theme="dark"] [style*="color: #1e3a8a" i] { color:#92a8e7 !important; }
body.dark-version [style*="color:#334155" i],
body.dark-version [style*="color: #334155" i],
html[data-theme="dark"] [style*="color:#334155" i],
html[data-theme="dark"] [style*="color: #334155" i] { color:#acbacd !important; }
body.dark-version [style*="color:#854d0e" i],
body.dark-version [style*="color: #854d0e" i],
html[data-theme="dark"] [style*="color:#854d0e" i],
html[data-theme="dark"] [style*="color: #854d0e" i] { color:#f2c087 !important; }
body.dark-version [style*="color:#065f46" i],
body.dark-version [style*="color: #065f46" i],
html[data-theme="dark"] [style*="color:#065f46" i],
html[data-theme="dark"] [style*="color: #065f46" i] { color:#84f5d5 !important; }
body.dark-version [style*="color:#57534e" i],
body.dark-version [style*="color: #57534e" i],
html[data-theme="dark"] [style*="color:#57534e" i],
html[data-theme="dark"] [style*="color: #57534e" i] { color:#cbd5e1 !important; }
body.dark-version [style*="color:#78716c" i],
body.dark-version [style*="color: #78716c" i],
html[data-theme="dark"] [style*="color:#78716c" i],
html[data-theme="dark"] [style*="color: #78716c" i] { color:#cbd5e1 !important; }
body.dark-version [style*="color:#5856d6" i],
body.dark-version [style*="color: #5856d6" i],
html[data-theme="dark"] [style*="color:#5856d6" i],
html[data-theme="dark"] [style*="color: #5856d6" i] { color:#9694e5 !important; }
body.dark-version [style*="color:#e11d48" i],
body.dark-version [style*="color: #e11d48" i],
html[data-theme="dark"] [style*="color:#e11d48" i],
html[data-theme="dark"] [style*="color: #e11d48" i] { color:#f08aa0 !important; }
body.dark-version [style*="color:#ff3b30" i],
body.dark-version [style*="color: #ff3b30" i],
html[data-theme="dark"] [style*="color:#ff3b30" i],
html[data-theme="dark"] [style*="color: #ff3b30" i] { color:#f58a84 !important; }
body.dark-version [style*="color:#0a0a0f" i],
body.dark-version [style*="color: #0a0a0f" i],
html[data-theme="dark"] [style*="color:#0a0a0f" i],
html[data-theme="dark"] [style*="color: #0a0a0f" i] { color:#afafca !important; }
body.dark-version [style*="color:#0f766e" i],
body.dark-version [style*="color: #0f766e" i],
html[data-theme="dark"] [style*="color:#0f766e" i],
html[data-theme="dark"] [style*="color: #0f766e" i] { color:#89f0e8 !important; }
body.dark-version [style*="color:#b91c1c" i],
body.dark-version [style*="color: #b91c1c" i],
html[data-theme="dark"] [style*="color:#b91c1c" i],
html[data-theme="dark"] [style*="color: #b91c1c" i] { color:#ee8c8c !important; }
body.dark-version [style*="color:#15803d" i],
body.dark-version [style*="color: #15803d" i],
html[data-theme="dark"] [style*="color:#15803d" i],
html[data-theme="dark"] [style*="color: #15803d" i] { color:#8decb1 !important; }
body.dark-version [style*="color:#374151" i],
body.dark-version [style*="color: #374151" i],
html[data-theme="dark"] [style*="color:#374151" i],
html[data-theme="dark"] [style*="color: #374151" i] { color:#b0bac9 !important; }
body.dark-version [style*="color:#667eea" i],
body.dark-version [style*="color: #667eea" i],
html[data-theme="dark"] [style*="color:#667eea" i],
html[data-theme="dark"] [style*="color: #667eea" i] { color:#8a9def !important; }
body.dark-version [style*="color:#c62828" i],
body.dark-version [style*="color: #c62828" i],
html[data-theme="dark"] [style*="color:#c62828" i],
html[data-theme="dark"] [style*="color: #c62828" i] { color:#e99191 !important; }
body.dark-version [style*="color:#059669" i],
body.dark-version [style*="color: #059669" i],
html[data-theme="dark"] [style*="color:#059669" i],
html[data-theme="dark"] [style*="color: #059669" i] { color:#84f5d2 !important; }
body.dark-version [style*="color:#856404" i],
body.dark-version [style*="color: #856404" i],
html[data-theme="dark"] [style*="color:#856404" i],
html[data-theme="dark"] [style*="color: #856404" i] { color:#f5d884 !important; }
body.dark-version [style*="color:#2a2a4a" i],
body.dark-version [style*="color: #2a2a4a" i],
html[data-theme="dark"] [style*="color:#2a2a4a" i],
html[data-theme="dark"] [style*="color: #2a2a4a" i] { color:#aaaacf !important; }
body.dark-version [style*="color:#52525b" i],
body.dark-version [style*="color: #52525b" i],
html[data-theme="dark"] [style*="color:#52525b" i],
html[data-theme="dark"] [style*="color: #52525b" i] { color:#cbd5e1 !important; }
body.dark-version [style*="color:#0d9488" i],
body.dark-version [style*="color: #0d9488" i],
html[data-theme="dark"] [style*="color:#0d9488" i],
html[data-theme="dark"] [style*="color: #0d9488" i] { color:#85f4ea !important; }
body.dark-version [style*="color:#475569" i],
body.dark-version [style*="color: #475569" i],
html[data-theme="dark"] [style*="color:#475569" i],
html[data-theme="dark"] [style*="color: #475569" i] { color:#b0baca !important; }
body.dark-version [style*="color:#0369a1" i],
body.dark-version [style*="color: #0369a1" i],
html[data-theme="dark"] [style*="color:#0369a1" i],
html[data-theme="dark"] [style*="color: #0369a1" i] { color:#84cdf5 !important; }
body.dark-version [style*="color:#111418" i],
body.dark-version [style*="color: #111418" i],
html[data-theme="dark"] [style*="color:#111418" i],
html[data-theme="dark"] [style*="color: #111418" i] { color:#b1bbc8 !important; }
body.dark-version [style*="color:#3a3a3c" i],
body.dark-version [style*="color: #3a3a3c" i],
html[data-theme="dark"] [style*="color:#3a3a3c" i],
html[data-theme="dark"] [style*="color: #3a3a3c" i] { color:#cbd5e1 !important; }
body.dark-version [style*="color:#4f46e5" i],
body.dark-version [style*="color: #4f46e5" i],
html[data-theme="dark"] [style*="color:#4f46e5" i],
html[data-theme="dark"] [style*="color: #4f46e5" i] { color:#908bef !important; }
body.dark-version [style*="color:#991b1b" i],
body.dark-version [style*="color: #991b1b" i],
html[data-theme="dark"] [style*="color:#991b1b" i],
html[data-theme="dark"] [style*="color: #991b1b" i] { color:#eb8e8e !important; }
body.dark-version [style*="color:#1877f2" i],
body.dark-version [style*="color: #1877f2" i],
html[data-theme="dark"] [style*="color:#1877f2" i],
html[data-theme="dark"] [style*="color: #1877f2" i] { color:#84b5f5 !important; }
body.dark-version [style*="color:#0e7490" i],
body.dark-version [style*="color: #0e7490" i],
html[data-theme="dark"] [style*="color:#0e7490" i],
html[data-theme="dark"] [style*="color: #0e7490" i] { color:#86dcf3 !important; }
body.dark-version [style*="color:#134e4a" i],
body.dark-version [style*="color: #134e4a" i],
html[data-theme="dark"] [style*="color:#134e4a" i],
html[data-theme="dark"] [style*="color: #134e4a" i] { color:#94e5e0 !important; }
body.dark-version [style*="color:#16a34a" i],
body.dark-version [style*="color: #16a34a" i],
html[data-theme="dark"] [style*="color:#16a34a" i],
html[data-theme="dark"] [style*="color: #16a34a" i] { color:#8aefaf !important; }
body.dark-version [style*="color:#be185d" i],
body.dark-version [style*="color: #be185d" i],
html[data-theme="dark"] [style*="color:#be185d" i],
html[data-theme="dark"] [style*="color: #be185d" i] { color:#f089b4 !important; }
body.dark-version [style*="color:#64748b" i],
body.dark-version [style*="color: #64748b" i],
html[data-theme="dark"] [style*="color:#64748b" i],
html[data-theme="dark"] [style*="color: #64748b" i] { color:#b2bbc8 !important; }
body.dark-version [style*="color:#1a7a3e" i],
body.dark-version [style*="color: #1a7a3e" i],
html[data-theme="dark"] [style*="color:#1a7a3e" i],
html[data-theme="dark"] [style*="color: #1a7a3e" i] { color:#92e8b2 !important; }
body.dark-version [style*="color:#a31d11" i],
body.dark-version [style*="color: #a31d11" i],
html[data-theme="dark"] [style*="color:#a31d11" i],
html[data-theme="dark"] [style*="color: #a31d11" i] { color:#f29087 !important; }
body.dark-version [style*="color:#e63946" i],
body.dark-version [style*="color: #e63946" i],
html[data-theme="dark"] [style*="color:#e63946" i],
html[data-theme="dark"] [style*="color: #e63946" i] { color:#f08991 !important; }
body.dark-version [style*="color:#7c3aed" i],
body.dark-version [style*="color: #7c3aed" i],
html[data-theme="dark"] [style*="color:#7c3aed" i],
html[data-theme="dark"] [style*="color: #7c3aed" i] { color:#ae86f4 !important; }
body.dark-version [style*="color:#4c1d95" i],
body.dark-version [style*="color: #4c1d95" i],
html[data-theme="dark"] [style*="color:#4c1d95" i],
html[data-theme="dark"] [style*="color: #4c1d95" i] { color:#b390e9 !important; }
body.dark-version [style*="color:#27272a" i],
body.dark-version [style*="color: #27272a" i],
html[data-theme="dark"] [style*="color:#27272a" i],
html[data-theme="dark"] [style*="color: #27272a" i] { color:#cbd5e1 !important; }
body.dark-version [style*="color:#1b5e20" i],
body.dark-version [style*="color: #1b5e20" i],
html[data-theme="dark"] [style*="color:#1b5e20" i],
html[data-theme="dark"] [style*="color: #1b5e20" i] { color:#98e19d !important; }
body.dark-version [style*="color:#b71c1c" i],
body.dark-version [style*="color: #b71c1c" i],
html[data-theme="dark"] [style*="color:#b71c1c" i],
html[data-theme="dark"] [style*="color: #b71c1c" i] { color:#ed8c8c !important; }
body.dark-version [style*="color:#007aff" i],
body.dark-version [style*="color: #007aff" i],
html[data-theme="dark"] [style*="color:#007aff" i],
html[data-theme="dark"] [style*="color: #007aff" i] { color:#84baf5 !important; }
body.dark-version [style*="color:#0d6efd" i],
body.dark-version [style*="color: #0d6efd" i],
html[data-theme="dark"] [style*="color:#0d6efd" i],
html[data-theme="dark"] [style*="color: #0d6efd" i] { color:#84b2f5 !important; }
body.dark-version [style*="color:#2e7d32" i],
body.dark-version [style*="color: #2e7d32" i],
html[data-theme="dark"] [style*="color:#2e7d32" i],
html[data-theme="dark"] [style*="color: #2e7d32" i] { color:#9edba1 !important; }
body.dark-version [style*="color:#1565c0" i],
body.dark-version [style*="color: #1565c0" i],
html[data-theme="dark"] [style*="color:#1565c0" i],
html[data-theme="dark"] [style*="color: #1565c0" i] { color:#87b9f2 !important; }
body.dark-version [style*="color:#e65100" i],
body.dark-version [style*="color: #e65100" i],
html[data-theme="dark"] [style*="color:#e65100" i],
html[data-theme="dark"] [style*="color: #e65100" i] { color:#f5ac84 !important; }
body.dark-version [style*="color:#6a1b9a" i],
body.dark-version [style*="color: #6a1b9a" i],
html[data-theme="dark"] [style*="color:#6a1b9a" i],
html[data-theme="dark"] [style*="color: #6a1b9a" i] { color:#c88eeb !important; }
body.dark-version [style*="color:#ad1457" i],
body.dark-version [style*="color: #ad1457" i],
html[data-theme="dark"] [style*="color:#ad1457" i],
html[data-theme="dark"] [style*="color: #ad1457" i] { color:#f188b6 !important; }
body.dark-version [style*="color:#e4405f" i],
body.dark-version [style*="color: #e4405f" i],
html[data-theme="dark"] [style*="color:#e4405f" i],
html[data-theme="dark"] [style*="color: #e4405f" i] { color:#ef8b9e !important; }
body.dark-version [style*="color:#0a66c2" i],
body.dark-version [style*="color: #0a66c2" i],
html[data-theme="dark"] [style*="color:#0a66c2" i],
html[data-theme="dark"] [style*="color: #0a66c2" i] { color:#84bdf5 !important; }
body.dark-version [style*="color:#3730a3" i],
body.dark-version [style*="color: #3730a3" i],
html[data-theme="dark"] [style*="color:#3730a3" i],
html[data-theme="dark"] [style*="color: #3730a3" i] { color:#9d99e1 !important; }
body.dark-version [style*="color:#4285f4" i],
body.dark-version [style*="color: #4285f4" i],
html[data-theme="dark"] [style*="color:#4285f4" i],
html[data-theme="dark"] [style*="color: #4285f4" i] { color:#84aff5 !important; }
body.dark-version [style*="color:#006cff" i],
body.dark-version [style*="color: #006cff" i],
html[data-theme="dark"] [style*="color:#006cff" i],
html[data-theme="dark"] [style*="color: #006cff" i] { color:#84b4f5 !important; }
body.dark-version [style*="color:#ff7139" i],
body.dark-version [style*="color: #ff7139" i],
html[data-theme="dark"] [style*="color:#ff7139" i],
html[data-theme="dark"] [style*="color: #ff7139" i] { color:#f5a484 !important; }
body.dark-version [style*="color:#0078d7" i],
body.dark-version [style*="color: #0078d7" i],
html[data-theme="dark"] [style*="color:#0078d7" i],
html[data-theme="dark"] [style*="color: #0078d7" i] { color:#84c3f5 !important; }
body.dark-version [style*="color:#c93400" i],
body.dark-version [style*="color: #c93400" i],
html[data-theme="dark"] [style*="color:#c93400" i],
html[data-theme="dark"] [style*="color: #c93400" i] { color:#f5a284 !important; }
body.dark-version [style*="color:#248a3d" i],
body.dark-version [style*="color: #248a3d" i],
html[data-theme="dark"] [style*="color:#248a3d" i],
html[data-theme="dark"] [style*="color: #248a3d" i] { color:#96e4a9 !important; }
body.dark-version [style*="color:#0f5132" i],
body.dark-version [style*="color: #0f5132" i],
html[data-theme="dark"] [style*="color:#0f5132" i],
html[data-theme="dark"] [style*="color: #0f5132" i] { color:#8feabf !important; }
body.dark-version [style*="color:#424245" i],
body.dark-version [style*="color: #424245" i],
html[data-theme="dark"] [style*="color:#424245" i],
html[data-theme="dark"] [style*="color: #424245" i] { color:#cbd5e1 !important; }
body.dark-version [style*="color:#ef4444" i],
body.dark-version [style*="color: #ef4444" i],
html[data-theme="dark"] [style*="color:#ef4444" i],
html[data-theme="dark"] [style*="color: #ef4444" i] { color:#f58585 !important; }

/* --- backgrounds --- */
body.dark-version [style*="background:#fff7ed" i],
body.dark-version [style*="background: #fff7ed" i],
html[data-theme="dark"] [style*="background:#fff7ed" i],
html[data-theme="dark"] [style*="background: #fff7ed" i] { background:rgba(245,163,61,0.16) !important; }
body.dark-version [style*="background:#f0f0f0" i],
body.dark-version [style*="background: #f0f0f0" i],
html[data-theme="dark"] [style*="background:#f0f0f0" i],
html[data-theme="dark"] [style*="background: #f0f0f0" i] { background:#1a1a24 !important; }
body.dark-version [style*="background:#f1f5f9" i],
body.dark-version [style*="background: #f1f5f9" i],
html[data-theme="dark"] [style*="background:#f1f5f9" i],
html[data-theme="dark"] [style*="background: #f1f5f9" i] { background:rgba(112,153,194,0.16) !important; }
body.dark-version [style*="background:#fef9c3" i],
body.dark-version [style*="background: #fef9c3" i],
html[data-theme="dark"] [style*="background:#fef9c3" i],
html[data-theme="dark"] [style*="background: #fef9c3" i] { background:rgba(245,229,61,0.16) !important; }
body.dark-version [style*="background:#eff6ff" i],
body.dark-version [style*="background: #eff6ff" i],
html[data-theme="dark"] [style*="background:#eff6ff" i],
html[data-theme="dark"] [style*="background: #eff6ff" i] { background:rgba(61,142,245,0.16) !important; }
body.dark-version [style*="background:#fee2e2" i],
body.dark-version [style*="background: #fee2e2" i],
html[data-theme="dark"] [style*="background:#fee2e2" i],
html[data-theme="dark"] [style*="background: #fee2e2" i] { background:rgba(245,61,61,0.16) !important; }
body.dark-version [style*="background:#fce4ec" i],
body.dark-version [style*="background: #fce4ec" i],
html[data-theme="dark"] [style*="background:#fce4ec" i],
html[data-theme="dark"] [style*="background: #fce4ec" i] { background:rgba(235,71,126,0.16) !important; }
body.dark-version [style*="background:#e5e5e7" i],
body.dark-version [style*="background: #e5e5e7" i],
html[data-theme="dark"] [style*="background:#e5e5e7" i],
html[data-theme="dark"] [style*="background: #e5e5e7" i] { background:#1a1a24 !important; }
body.dark-version [style*="background:#dcf5e7" i],
body.dark-version [style*="background: #dcf5e7" i],
html[data-theme="dark"] [style*="background:#dcf5e7" i],
html[data-theme="dark"] [style*="background: #dcf5e7" i] { background:rgba(96,210,146,0.16) !important; }
body.dark-version [style*="background:#fef3cd" i],
body.dark-version [style*="background: #fef3cd" i],
html[data-theme="dark"] [style*="background:#fef3cd" i],
html[data-theme="dark"] [style*="background: #fef3cd" i] { background:rgba(245,204,61,0.16) !important; }
body.dark-version [style*="background:#f8d7da" i],
body.dark-version [style*="background: #f8d7da" i],
html[data-theme="dark"] [style*="background:#f8d7da" i],
html[data-theme="dark"] [style*="background: #f8d7da" i] { background:rgba(225,81,94,0.16) !important; }
body.dark-version [style*="background:#f0f0f3" i],
body.dark-version [style*="background: #f0f0f3" i],
html[data-theme="dark"] [style*="background:#f0f0f3" i],
html[data-theme="dark"] [style*="background: #f0f0f3" i] { background:rgba(142,142,164,0.16) !important; }
body.dark-version [style*="background:#e2e2e7" i],
body.dark-version [style*="background: #e2e2e7" i],
html[data-theme="dark"] [style*="background:#e2e2e7" i],
html[data-theme="dark"] [style*="background: #e2e2e7" i] { background:#1a1a24 !important; }
body.dark-version [style*="background:#f5f7ff" i],
body.dark-version [style*="background: #f5f7ff" i],
html[data-theme="dark"] [style*="background:#f5f7ff" i],
html[data-theme="dark"] [style*="background: #f5f7ff" i] { background:rgba(61,98,245,0.16) !important; }
body.dark-version [style*="background:#d1fae5" i],
body.dark-version [style*="background: #d1fae5" i],
html[data-theme="dark"] [style*="background:#d1fae5" i],
html[data-theme="dark"] [style*="background: #d1fae5" i] { background:rgba(71,235,151,0.16) !important; }
body.dark-version [style*="background:#fff5f5" i],
body.dark-version [style*="background: #fff5f5" i],
html[data-theme="dark"] [style*="background:#fff5f5" i],
html[data-theme="dark"] [style*="background: #fff5f5" i] { background:rgba(245,61,61,0.16) !important; }
body.dark-version [style*="background:#f0f0ff" i],
body.dark-version [style*="background: #f0f0ff" i],
html[data-theme="dark"] [style*="background:#f0f0ff" i],
html[data-theme="dark"] [style*="background: #f0f0ff" i] { background:rgba(61,61,245,0.16) !important; }
body.dark-version [style*="background:#e9ecef" i],
body.dark-version [style*="background: #e9ecef" i],
html[data-theme="dark"] [style*="background:#e9ecef" i],
html[data-theme="dark"] [style*="background: #e9ecef" i] { background:rgba(137,153,169,0.16) !important; }
body.dark-version [style*="background:#fce7f3" i],
body.dark-version [style*="background: #fce7f3" i],
html[data-theme="dark"] [style*="background:#fce7f3" i],
html[data-theme="dark"] [style*="background: #fce7f3" i] { background:rgba(232,74,164,0.16) !important; }
body.dark-version [style*="background:#f5f3ff" i],
body.dark-version [style*="background: #f5f3ff" i],
html[data-theme="dark"] [style*="background:#f5f3ff" i],
html[data-theme="dark"] [style*="background: #f5f3ff" i] { background:rgba(92,61,245,0.16) !important; }
body.dark-version [style*="background:#f5f5f4" i],
body.dark-version [style*="background: #f5f5f4" i],
html[data-theme="dark"] [style*="background:#f5f5f4" i],
html[data-theme="dark"] [style*="background: #f5f5f4" i] { background:#1a1a24 !important; }
body.dark-version [style*="background:#e8f5e9" i],
body.dark-version [style*="background: #e8f5e9" i],
html[data-theme="dark"] [style*="background:#e8f5e9" i],
html[data-theme="dark"] [style*="background: #e8f5e9" i] { background:rgba(113,193,119,0.16) !important; }
body.dark-version [style*="background:#f2f2f7" i],
body.dark-version [style*="background: #f2f2f7" i],
html[data-theme="dark"] [style*="background:#f2f2f7" i],
html[data-theme="dark"] [style*="background: #f2f2f7" i] { background:rgba(129,129,177,0.16) !important; }
body.dark-version [style*="background:#f9f9fb" i],
body.dark-version [style*="background: #f9f9fb" i],
html[data-theme="dark"] [style*="background:#f9f9fb" i],
html[data-theme="dark"] [style*="background: #f9f9fb" i] { background:rgba(133,133,173,0.16) !important; }
body.dark-version [style*="background:#e5e5ea" i],
body.dark-version [style*="background: #e5e5ea" i],
html[data-theme="dark"] [style*="background:#e5e5ea" i],
html[data-theme="dark"] [style*="background: #e5e5ea" i] { background:rgba(142,142,164,0.16) !important; }
body.dark-version [style*="background:#f7f7f9" i],
body.dark-version [style*="background: #f7f7f9" i],
html[data-theme="dark"] [style*="background:#f7f7f9" i],
html[data-theme="dark"] [style*="background: #f7f7f9" i] { background:rgba(138,138,168,0.16) !important; }
body.dark-version [style*="background:#e3f2fd" i],
body.dark-version [style*="background: #e3f2fd" i],
html[data-theme="dark"] [style*="background:#e3f2fd" i],
html[data-theme="dark"] [style*="background: #e3f2fd" i] { background:rgba(65,167,241,0.16) !important; }
body.dark-version [style*="background:#fff3e0" i],
body.dark-version [style*="background: #fff3e0" i],
html[data-theme="dark"] [style*="background:#fff3e0" i],
html[data-theme="dark"] [style*="background: #fff3e0" i] { background:rgba(245,174,61,0.16) !important; }
body.dark-version [style*="background:#f3e5f5" i],
body.dark-version [style*="background: #f3e5f5" i],
html[data-theme="dark"] [style*="background:#f3e5f5" i],
html[data-theme="dark"] [style*="background: #f3e5f5" i] { background:rgba(187,108,198,0.16) !important; }
body.dark-version [style*="background:#f0fdf4" i],
body.dark-version [style*="background: #f0fdf4" i],
html[data-theme="dark"] [style*="background:#f0fdf4" i],
html[data-theme="dark"] [style*="background: #f0fdf4" i] { background:rgba(75,231,123,0.16) !important; }
body.dark-version [style*="background:#fafafd" i],
body.dark-version [style*="background: #fafafd" i],
html[data-theme="dark"] [style*="background:#fafafd" i],
html[data-theme="dark"] [style*="background: #fafafd" i] { background:rgba(109,109,197,0.16) !important; }
body.dark-version [style*="background:#e0f2fe" i],
body.dark-version [style*="background: #e0f2fe" i],
html[data-theme="dark"] [style*="background:#e0f2fe" i],
html[data-theme="dark"] [style*="background: #e0f2fe" i] { background:rgba(61,171,245,0.16) !important; }
body.dark-version [style*="background:#e5e5e5" i],
body.dark-version [style*="background: #e5e5e5" i],
html[data-theme="dark"] [style*="background:#e5e5e5" i],
html[data-theme="dark"] [style*="background: #e5e5e5" i] { background:#1a1a24 !important; }


/* ═══ AUTO-GENERATED dark-mode coverage — BLOG DB content scan (137 posts) ═══
   Inline colors that live in BlogPost.content* (not template files). Same
   transform as the template pass. Existing scoped rules still win. */

/* --- blog text --- */
body.dark-version [style*="color:#880e4f" i],
body.dark-version [style*="color: #880e4f" i],
html[data-theme="dark"] [style*="color:#880e4f" i],
html[data-theme="dark"] [style*="color: #880e4f" i] { color:#f387c0 !important; }
body.dark-version [style*="color:#6366f1" i],
body.dark-version [style*="color: #6366f1" i],
html[data-theme="dark"] [style*="color:#6366f1" i],
html[data-theme="dark"] [style*="color: #6366f1" i] { color:#8588f4 !important; }
body.dark-version [style*="color:#0284c7" i],
body.dark-version [style*="color: #0284c7" i],
html[data-theme="dark"] [style*="color:#0284c7" i],
html[data-theme="dark"] [style*="color: #0284c7" i] { color:#84cff5 !important; }
body.dark-version [style*="color:#0c4a6e" i],
body.dark-version [style*="color: #0c4a6e" i],
html[data-theme="dark"] [style*="color:#0c4a6e" i],
html[data-theme="dark"] [style*="color: #0c4a6e" i] { color:#87cbf2 !important; }
body.dark-version [style*="color:#064e3b" i],
body.dark-version [style*="color: #064e3b" i],
html[data-theme="dark"] [style*="color:#064e3b" i],
html[data-theme="dark"] [style*="color: #064e3b" i] { color:#84f5d7 !important; }
body.dark-version [style*="color:#9333ea" i],
body.dark-version [style*="color: #9333ea" i],
html[data-theme="dark"] [style*="color:#9333ea" i],
html[data-theme="dark"] [style*="color: #9333ea" i] { color:#bf87f3 !important; }
body.dark-version [style*="color:#14532d" i],
body.dark-version [style*="color: #14532d" i],
html[data-theme="dark"] [style*="color:#14532d" i],
html[data-theme="dark"] [style*="color: #14532d" i] { color:#94e5b4 !important; }
body.dark-version [style*="color:#312e81" i],
body.dark-version [style*="color: #312e81" i],
html[data-theme="dark"] [style*="color:#312e81" i],
html[data-theme="dark"] [style*="color: #312e81" i] { color:#a09ddc !important; }
body.dark-version [style*="color:#581c87" i],
body.dark-version [style*="color: #581c87" i],
html[data-theme="dark"] [style*="color:#581c87" i],
html[data-theme="dark"] [style*="color: #581c87" i] { color:#c291e8 !important; }
body.dark-version [style*="color:#6b5b27" i],
body.dark-version [style*="color: #6b5b27" i],
html[data-theme="dark"] [style*="color:#6b5b27" i],
html[data-theme="dark"] [style*="color: #6b5b27" i] { color:#dccd9e !important; }
body.dark-version [style*="color:#292524" i],
body.dark-version [style*="color: #292524" i],
html[data-theme="dark"] [style*="color:#292524" i],
html[data-theme="dark"] [style*="color: #292524" i] { color:#cbd5e1 !important; }

/* --- blog backgrounds --- */
body.dark-version [style*="background:#fafaf9" i],
body.dark-version [style*="background: #fafaf9" i],
html[data-theme="dark"] [style*="background:#fafaf9" i],
html[data-theme="dark"] [style*="background: #fafaf9" i] { background:#1a1a24 !important; }
body.dark-version [style*="background:#f9f9f9" i],
body.dark-version [style*="background: #f9f9f9" i],
html[data-theme="dark"] [style*="background:#f9f9f9" i],
html[data-theme="dark"] [style*="background: #f9f9f9" i] { background:#1a1a24 !important; }
body.dark-version [style*="background:#ede9fe" i],
body.dark-version [style*="background: #ede9fe" i],
html[data-theme="dark"] [style*="background:#ede9fe" i],
html[data-theme="dark"] [style*="background: #ede9fe" i] { background:rgba(96,61,245,0.16) !important; }
body.dark-version [style*="background:#ccfbf1" i],
body.dark-version [style*="background: #ccfbf1" i],
html[data-theme="dark"] [style*="background:#ccfbf1" i],
html[data-theme="dark"] [style*="background: #ccfbf1" i] { background:rgba(66,240,203,0.16) !important; }
body.dark-version [style*="background:#fff8e6" i],
body.dark-version [style*="background: #fff8e6" i],
html[data-theme="dark"] [style*="background:#fff8e6" i],
html[data-theme="dark"] [style*="background: #fff8e6" i] { background:rgba(245,193,61,0.16) !important; }
body.dark-version [style*="background:#ebf5fb" i],
body.dark-version [style*="background: #ebf5fb" i],
html[data-theme="dark"] [style*="background:#ebf5fb" i],
html[data-theme="dark"] [style*="background: #ebf5fb" i] { background:rgba(85,170,221,0.16) !important; }
body.dark-version [style*="background:#f0fdfa" i],
body.dark-version [style*="background: #f0fdfa" i],
html[data-theme="dark"] [style*="background:#f0fdfa" i],
html[data-theme="dark"] [style*="background: #f0fdfa" i] { background:rgba(75,231,195,0.16) !important; }
body.dark-version [style*="background:#fed7aa" i],
body.dark-version [style*="background: #fed7aa" i],
html[data-theme="dark"] [style*="background:#fed7aa" i],
html[data-theme="dark"] [style*="background: #fed7aa" i] { background:rgba(245,160,61,0.16) !important; }
body.dark-version [style*="background:#fdf2f8" i],
body.dark-version [style*="background: #fdf2f8" i],
html[data-theme="dark"] [style*="background:#fdf2f8" i],
html[data-theme="dark"] [style*="background: #fdf2f8" i] { background:rgba(228,78,160,0.16) !important; }
body.dark-version [style*="background:#e0e7ff" i],
body.dark-version [style*="background: #e0e7ff" i],
html[data-theme="dark"] [style*="background:#e0e7ff" i],
html[data-theme="dark"] [style*="background: #e0e7ff" i] { background:rgba(61,103,245,0.16) !important; }
body.dark-version [style*="background:#f5d0fe" i],
body.dark-version [style*="background: #f5d0fe" i],
html[data-theme="dark"] [style*="background:#f5d0fe" i],
html[data-theme="dark"] [style*="background: #f5d0fe" i] { background:rgba(209,61,245,0.16) !important; }
body.dark-version [style*="background:#f6f6f6" i],
body.dark-version [style*="background: #f6f6f6" i],
html[data-theme="dark"] [style*="background:#f6f6f6" i],
html[data-theme="dark"] [style*="background: #f6f6f6" i] { background:#1a1a24 !important; }


/* ═══ AUTO-GENERATED dark-mode coverage — LESSON DB content scan ═══ */
/* --- lesson text --- */
body.dark-version [style*="color:#0ea5e9" i],
body.dark-version [style*="color: #0ea5e9" i],
html[data-theme="dark"] [style*="color:#0ea5e9" i],
html[data-theme="dark"] [style*="color: #0ea5e9" i] { color:#84d2f5 !important; }
body.dark-version [style*="color:#ff6b6b" i],
body.dark-version [style*="color: #ff6b6b" i],
html[data-theme="dark"] [style*="color:#ff6b6b" i],
html[data-theme="dark"] [style*="color: #ff6b6b" i] { color:#f58484 !important; }
/* --- lesson backgrounds --- */


/* ═══ Light GRADIENT backgrounds (global) ═══
   Inline gradients aren't caught by the flat-hex rules. These two light
   gradients appear throughout DB blog content. Saturated brand gradients
   (indigo/emerald/red/amber/violet) are left alone — they read fine on dark. */
body.dark-version [style*="linear-gradient(135deg,#f0f9ff" i],
body.dark-version [style*="linear-gradient(135deg, #f0f9ff" i],
html[data-theme="dark"] [style*="linear-gradient(135deg,#f0f9ff" i],
html[data-theme="dark"] [style*="linear-gradient(135deg, #f0f9ff" i] {
  background: linear-gradient(135deg,#16213e 0%,#1a2b45 100%) !important;
}
body.dark-version [style*="linear-gradient(180deg,#fafaf9" i],
body.dark-version [style*="linear-gradient(180deg, #fafaf9" i],
html[data-theme="dark"] [style*="linear-gradient(180deg,#fafaf9" i],
html[data-theme="dark"] [style*="linear-gradient(180deg, #fafaf9" i] {
  background: linear-gradient(180deg,#16213e,#1c2233) !important;
}

/* ── Inline data charts inside blog posts ────────────────────────────────────
   Blog charts are static SVG in the post body, so their label colour cannot be
   set from the theme the way a template can. Left alone they inherit a dark
   fill and vanish against the dark card. The bars carry their own teal, which
   reads on both backgrounds; only the text needs flipping. */
.blog-chart .chart-label { fill: #475569; }
.blog-chart .chart-value { fill: #0f172a; }
body.dark-version .blog-chart .chart-label { fill: #94a3b8; }
body.dark-version .blog-chart .chart-value { fill: #e2e8f0; }

/* ── Portal surfaces ──────────────────────────────────────────────────────────
   Cards on /districts-news and the shared promo and ticker components paint their
   own background from a class rather than an inline style. The blanket text rule at
   the top of this file deliberately skips elements carrying an inline background —
   they are assumed to have chosen their own palette — but a class-based background
   is invisible to that selector. So the text went light and the card stayed white,
   which is how the deadline ticker ended up a white slab in dark mode.

   These four variables are the fix and the contract: a surface on that page reads
   them instead of naming a colour, and both themes are then one place to change. */
:root {
  --dx-surface: #ffffff;
  --dx-surface-2: #f3f4f6;
  --dx-line: rgba(0, 0, 0, 0.09);
  --dx-ink: #1d1d1f;
  --dx-muted: #6b7280;
  --dx-faint: #9ca3af;
  --dx-link: #0071e3;
}
body.dark-version, [data-theme="dark"] body {
  --dx-surface: #232338;
  --dx-surface-2: #2b2b45;
  --dx-line: rgba(255, 255, 255, 0.13);
  --dx-ink: #e8e8f0;
  --dx-muted: #a9b0c0;
  --dx-faint: #8b93a7;
  /* Brand blue is too dark to read on #1a1a2e; this is the site's dark-mode link. */
  --dx-link: #60a5fa;
}