/* ==========================================================================
   TRACKR — SMART TIME-BASED THEME SYSTEM (LIGHT & DARK MODE)
   Supports automatic 6:00 PM local time switch & user override
   ========================================================================== */

/* ── Light Mode Root Variables (Clean, Minimalist White Mode) ── */
:root.theme-light,
html.theme-light,
body.theme-light {
  --bg-darkest: #f1f5f9;
  --bg-main: #ffffff;
  --bg-surface: #f8fafc;
  --bg-surface-elevated: #ffffff;
  --bg-surface-hover: #f1f5f9;
  --bg-card: #ffffff;

  --border-subtle: rgba(15, 23, 42, 0.08);
  --border-medium: rgba(15, 23, 42, 0.14);
  --border-accent: rgba(2, 132, 199, 0.35);
  --border-yellow: rgba(217, 119, 6, 0.35);
  --border-indigo: rgba(79, 70, 229, 0.35);

  --accent-cyan: #0284c7;
  --accent-cyan-light: #0369a1;
  --accent-yellow: #d97706;
  --accent-indigo: #4f46e5;
  --accent-purple: #7c3aed;
  --accent-emerald: #059669;
  --accent-rose: #e11d48;
  --pr-color: #6366f1;

  --text-primary: #090d16;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-dim: #94a3b8;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 4px 20px -2px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 20px 40px -10px rgba(15, 23, 42, 0.08);
  --shadow-cyan: 0 0 24px rgba(2, 132, 199, 0.15);
  --shadow-yellow: 0 0 20px rgba(217, 119, 6, 0.15);
}

/* ── Smooth transitions when theme flips ── */
body, .navbar, .pro-pricing-card, .trackr-review-card, article, main, header, footer {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

/* ── Light Mode Base Elements ── */
.theme-light body,
body.theme-light {
  background-color: var(--bg-main, #ffffff) !important;
  color: var(--text-primary, #090d16) !important;
}

/* Light mode Navbar */
.theme-light .navbar,
body.theme-light .navbar {
  background: rgba(255, 255, 255, 0.88) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.theme-light .brand-logo,
body.theme-light .brand-logo {
  color: #090d16 !important;
}

.theme-light .brand-icon,
body.theme-light .brand-icon {
  background: #090d16 !important;
}

.theme-light .brand-icon svg,
body.theme-light .brand-icon svg {
  stroke: #ffffff !important;
}

.theme-light .nav-item-link,
body.theme-light .nav-item-link {
  color: #475569 !important;
}


.theme-light .nav-item-link:hover,
body.theme-light .nav-item-link:hover {
  color: #0284c7 !important;
}

/* Light Mode Buttons */
.theme-light .btn-primary,
body.theme-light .btn-primary {
  background: #090d16 !important;
  color: #ffffff !important;
  border: 1px solid #090d16 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

.theme-light .btn-primary:hover,
body.theme-light .btn-primary:hover {
  background: #1e293b !important;
  transform: translateY(-1px);
}

.theme-light .btn-secondary,
body.theme-light .btn-secondary {
  background: #ffffff !important;
  color: #090d16 !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.theme-light .btn-secondary:hover,
body.theme-light .btn-secondary:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
}

.theme-light .btn-yellow,
body.theme-light .btn-yellow {
  background: #090d16 !important;
  color: #ffffff !important;
  border: 1px solid #090d16 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
}

.theme-light .btn-yellow:hover,
body.theme-light .btn-yellow:hover {
  background: #1e293b !important;
}

/* Light Mode Pricing Cards */
.theme-light .pro-pricing-card,
body.theme-light .pro-pricing-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.06) !important;
  color: #090d16 !important;
}

.theme-light .pro-pricing-card.featured,
body.theme-light .pro-pricing-card.featured {
  background: #ffffff !important;
  border: 2px solid #090d16 !important;
  box-shadow: 0 12px 32px -4px rgba(15, 23, 42, 0.12) !important;
}

.theme-light .pricing-card-title,
body.theme-light .pricing-card-title {
  color: #090d16 !important;
}

.theme-light .pricing-card-sub,
body.theme-light .pricing-card-sub {
  color: #64748b !important;
}

.theme-light .price-number,
.theme-light .price-val-green,
body.theme-light .price-number,
body.theme-light .price-val-green {
  color: #090d16 !important;
  text-shadow: none !important;
}

.theme-light .clean-features-list li,
body.theme-light .clean-features-list li {
  color: #334155 !important;
}

.theme-light .clean-features-list li strong,
body.theme-light .clean-features-list li strong {
  color: #090d16 !important;
}

/* Light Mode Review Cards */
.theme-light .trackr-review-card,
body.theme-light .trackr-review-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04) !important;
}

.theme-light .trackr-review-name,
body.theme-light .trackr-review-name {
  color: #090d16 !important;
}

.theme-light .trackr-review-text,
body.theme-light .trackr-review-text {
  color: #334155 !important;
}

.theme-light .trackr-review-date,
body.theme-light .trackr-review-date {
  color: #94a3b8 !important;
}

/* Light Mode Video Containers */
.theme-light .hero-clean-video-wrap,
body.theme-light .hero-clean-video-wrap {
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.08) !important;
  background: #f8fafc !important;
}

/* Light Mode Footer */
.theme-light .pro-footer,
body.theme-light .pro-footer {
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
  color: #64748b !important;
}

.theme-light .pro-footer a,
body.theme-light .pro-footer a {
  color: #475569 !important;
}


.theme-light .pro-footer a:hover,
body.theme-light .pro-footer a:hover {
  color: #0284c7 !important;
}

/* ── Interactive Theme Switcher Component in Navbar ── */
.theme-switch-container {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9999px;
  padding: 5px 12px;
  color: var(--text-secondary, #94a3b8);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
  user-select: none;
  font-family: var(--font-sans, inherit);
}

.theme-light .theme-toggle-btn,
body.theme-light .theme-toggle-btn {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #334155;
}

.theme-toggle-btn:hover {
  border-color: var(--accent-cyan, #0284c7);
  transform: translateY(-1px);
}

.theme-toggle-icon {
  font-size: 0.95rem;
  line-height: 1;
}

.theme-toggle-text {
  font-size: 0.78rem;
  letter-spacing: 0.01em;
}

.theme-auto-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(56, 189, 248, 0.15);
  color: var(--accent-cyan, #0284c7);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.theme-light .theme-auto-badge,
body.theme-light .theme-auto-badge {
  background: #e0f2fe;
  color: #0369a1;
}

/* ── Clean White Mode for Blogs & Articles ── */
.theme-light article,
body.theme-light article {
  color: #334155 !important;
}

.theme-light article h1,
body.theme-light article h1 {
  color: #090d16 !important;
}

.theme-light article h2,
.theme-light article h3,
.theme-light article h4,
body.theme-light article h2,
body.theme-light article h3,
body.theme-light article h4 {
  color: #090d16 !important;
}

.theme-light article p,
body.theme-light article p {
  color: #334155 !important;
}

.theme-light article section,
body.theme-light article section {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}

.theme-light article aside,
body.theme-light article aside {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

.theme-light article aside h3,
body.theme-light article aside h3 {
  color: #090d16 !important;
}

.theme-light article aside p,
body.theme-light article aside p {
  color: #475569 !important;
}


.theme-light article table,
body.theme-light article table {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
}

.theme-light article th,
body.theme-light article th {
  background: #f8fafc !important;
  color: #090d16 !important;
  border-bottom: 2px solid #e2e8f0 !important;
}

.theme-light article td,
body.theme-light article td {
  border-bottom: 1px solid #f1f5f9 !important;
}

.theme-light article ol,
.theme-light article ul,
body.theme-light article ol,
body.theme-light article ul {
  color: #334155 !important;
}

.theme-light article code,
body.theme-light article code {
  background: #f1f5f9 !important;
  color: #0284c7 !important;
  border: 1px solid #e2e8f0 !important;
  padding: 2px 6px;
  border-radius: 4px;
}

/* ── Clean White Mode for Documentation (docs.html) ── */
.theme-light .docs-toggle-header,
body.theme-light .docs-toggle-header {
  color: #090d16 !important;
}

.theme-light .docs-toggle-card,
body.theme-light .docs-toggle-card {
  border-bottom: 1px solid #e2e8f0 !important;
}

/* ── Universal Base Card Rules for Docs & Blogs ── */
.workflow-card {
  border-radius: 14px !important;
  padding: 24px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.action-step-card {
  border-radius: 14px !important;
  padding: 22px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.faq-row {
  border-radius: 12px !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.workflow-code-box {
  border-radius: 10px !important;
  padding: 14px 18px !important;
  font-family: var(--font-mono, monospace) !important;
}

.theme-light .workflow-card,
body.theme-light .workflow-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 22px !important;
  color: #334155 !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
}

.theme-light .workflow-card h3,
body.theme-light .workflow-card h3 {
  color: #090d16 !important;
}

.theme-light .workflow-code-box,
body.theme-light .workflow-code-box {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 14px !important;
  color: #090d16 !important;
  font-family: monospace;
}

.theme-light .action-step-card,
body.theme-light .action-step-card {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 20px !important;
}

.theme-light .step-card-label,
body.theme-light .step-card-label {
  color: #090d16 !important;
  font-weight: 800 !important;
}

.theme-light .faq-row,
body.theme-light .faq-row {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
}

.theme-light .faq-row.active,
body.theme-light .faq-row.active {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

.theme-light .faq-toggle-btn,
body.theme-light .faq-toggle-btn {
  color: #090d16 !important;
  padding: 18px 20px !important;
  background: transparent !important;
}

.theme-light .faq-arrow,
body.theme-light .faq-arrow {
  color: #64748b !important;
}

.theme-light .faq-body,
body.theme-light .faq-body {
  color: #475569 !important;
  padding: 0 20px 20px !important;
  line-height: 1.65 !important;
}

/* ── Light Mode Update Callout Banner (docs.html) ── */
.theme-light #docs-update-callout,
body.theme-light #docs-update-callout {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 26px 28px !important;
  margin-bottom: 34px !important;
  text-align: center !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04) !important;
}

.theme-light #docs-update-callout .callout-title,
body.theme-light #docs-update-callout .callout-title,
body.theme-light #docs-update-callout div[style*="font-size: 1.25rem"],
body.theme-light #docs-update-callout span[id="callout-version-tag"] {
  color: #090d16 !important;
}

.theme-light #docs-update-callout #docs-version-time,
body.theme-light #docs-update-callout #docs-version-time {
  color: #64748b !important;
}

.theme-light #toggle-release-notes-btn,
body.theme-light #toggle-release-notes-btn {
  color: #090d16 !important;
}

.theme-light #release-notes-details,
body.theme-light #release-notes-details {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 18px 22px !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03) !important;
}



/* ==========================================================================
   NIGHT / DARK MODE (Obsidian Dark Theme — Activates at 6:00 PM local time)
   ========================================================================== */
:root.theme-dark,
html.theme-dark,
body.theme-dark {
  --bg-darkest: #050608;
  --bg-main: #08090c;
  --bg-surface: #0d1117;
  --bg-surface-elevated: #111620;
  --bg-surface-hover: #161d2b;
  --bg-card: #0f141c;

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.14);
  --border-accent: rgba(56, 189, 248, 0.4);
  --border-yellow: rgba(245, 158, 11, 0.4);
  --border-indigo: rgba(99, 102, 241, 0.4);

  --accent-cyan: #38bdf8;
  --accent-cyan-light: #7dd3fc;
  --accent-yellow: #f59e0b;
  --accent-indigo: #6366f1;
  --accent-purple: #a855f7;
  --accent-emerald: #10b981;
  --accent-rose: #f43f5e;
  --pr-color: #818cf8;

  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-dim: #64748b;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 20px -2px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 20px 40px -10px rgba(0, 0, 0, 0.8);
  --shadow-cyan: 0 0 30px rgba(56, 189, 248, 0.3);
  --shadow-yellow: 0 0 25px rgba(245, 158, 11, 0.3);
}

/* ── Base Elements in Dark Mode ── */
.theme-dark body,
body.theme-dark {
  background: #08090c !important;
  background-color: #08090c !important;
  color: #f8fafc !important;
}

/* ── Dark Mode Sticky Navbar ── */
.theme-dark .navbar,
body.theme-dark .navbar,
body.theme-dark header.navbar {
  background: rgba(8, 9, 12, 0.92) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

.theme-dark .nav-item-link,
body.theme-dark .nav-item-link {
  color: #94a3b8 !important;
}

.theme-dark .nav-item-link:hover,
body.theme-dark .nav-item-link:hover {
  color: #38bdf8 !important;
}

.theme-dark .nav-item-link[style*="font-weight: 700"],
body.theme-dark .nav-item-link[style*="font-weight: 700"],
body.theme-dark .nav-item-link.active {
  color: #ffffff !important;
}

/* ── Universal Blue "Get Trackr" Navbar Button Across All Pages ── */
.navbar .btn-primary,
.nav-get-trackr-blue-btn,
#nav-get-trackr-btn {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  border: 1px solid #0284c7 !important;
  color: #ffffff !important;
  padding: 8px 18px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.navbar .btn-primary:hover,
.nav-get-trackr-blue-btn:hover,
#nav-get-trackr-btn:hover {
  background: linear-gradient(135deg, #0369a1 0%, #075985 100%) !important;
  border-color: #0369a1 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 22px rgba(2, 132, 199, 0.5) !important;
  transform: translateY(-1px) !important;
}

body.theme-dark .navbar .btn-primary,
body.theme-dark .nav-get-trackr-blue-btn,
body.theme-dark #nav-get-trackr-btn {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.6) !important;
  color: #ffffff !important;
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.4) !important;
}

body.theme-dark .navbar .btn-primary:hover,
body.theme-dark .nav-get-trackr-blue-btn:hover,
body.theme-dark #nav-get-trackr-btn:hover {
  background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%) !important;
  box-shadow: 0 0 26px rgba(56, 189, 248, 0.65) !important;
}

/* ── Brand Logo Text Contrast ── */
.brand-logo-text {
  color: #090d16 !important;
  font-weight: 800 !important;
  font-size: 1.15rem !important;
  letter-spacing: -0.3px !important;
  transition: color 0.2s ease !important;
}

body.theme-dark .brand-logo-text {
  color: #ffffff !important;
}

/* ── Dark Mode Hero Section ── */
body.theme-dark .hero-title,
.theme-dark .hero-title {
  color: #ffffff !important;
}

body.theme-dark .trackr-hero-badge {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #cbd5e1 !important;
}

body.theme-dark .hero-get-trackr-btn {
  background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%) !important;
  color: #ffffff !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 6px 28px rgba(56, 189, 248, 0.35) !important;
}

body.theme-dark .hero-get-trackr-btn:hover {
  background: linear-gradient(135deg, #7dd3fc 0%, #0284c7 100%) !important;
  box-shadow: 0 10px 36px rgba(56, 189, 248, 0.6) !important;
  transform: translateY(-2px);
}

/* Dark Mode Demo Video Showcase Frame — Seamless, No Outlines */
body.theme-dark [style*="box-shadow: 0 20px 50px"],
body.theme-dark [style*="box-shadow: 0 16px 40px"],
.theme-dark .hero-clean-video-wrap,
.theme-dark .hero-demo-video-wrap,
html.theme-dark .hero-clean-video-wrap,
html.theme-dark .hero-demo-video-wrap,
body.theme-dark .hero-clean-video-wrap,
body.theme-dark .hero-demo-video-wrap,
.theme-dark .hero-clean-video-wrap:hover,
.theme-dark .hero-demo-video-wrap:hover,
html.theme-dark .hero-clean-video-wrap:hover,
html.theme-dark .hero-demo-video-wrap:hover,
body.theme-dark .hero-clean-video-wrap:hover,
body.theme-dark .hero-demo-video-wrap:hover {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  padding: 0 !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.9) !important;
  transform: none !important;
}

.theme-dark video,
html.theme-dark video,
body.theme-dark video {
  border: none !important;
  outline: none !important;
}

/* ── Dark Mode Sections ── */
body.theme-dark section {
  background-color: transparent;
}

body.theme-dark #how-it-works,
body.theme-dark #reviews,
body.theme-dark section[id="how-it-works"],
body.theme-dark section[id="reviews"],
body.theme-dark section[style*="background: #f8fafc"] {
  background-color: #0d1117 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

body.theme-dark section[style*="background: #ffffff"] {
  background-color: #08090c !important;
}

body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark h4 {
  color: #ffffff !important;
}

body.theme-dark p {
  color: #cbd5e1 !important;
}

/* ── Dark Mode Cards ── */
body.theme-dark .trackr-clean-card {
  background: #111620 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
  color: #cbd5e1 !important;
}

body.theme-dark .trackr-clean-card:hover {
  border-color: rgba(56, 189, 248, 0.4) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6) !important;
}

body.theme-dark .workflow-clean-img-wrap {
  background: #111620 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

body.theme-dark .workflow-step-btn-card.active {
  background: #131d2e !important;
  border-color: #38bdf8 !important;
}

body.theme-dark .step-card-progress-track {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* ── Dark Mode AE Comparison Cards ── */
body.theme-dark [style*="border: 1px solid #fee2e2"] {
  background: #131014 !important;
  border-color: rgba(239, 68, 68, 0.28) !important;
  box-shadow: 0 4px 20px rgba(239, 68, 68, 0.06) !important;
}

body.theme-dark [style*="border: 2px solid #059669"] {
  background: #0d1819 !important;
  border-color: rgba(16, 185, 129, 0.5) !important;
  box-shadow: 0 6px 24px rgba(16, 185, 129, 0.1) !important;
}

/* ── Dark Mode Reviews ── */
body.theme-dark [style*="4.9 / 5 Rating"] {
  color: #ffffff !important;
}

body.theme-dark div[style*="box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04)"] {
  background: #111620 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

body.theme-dark #reviews-prev-btn,
body.theme-dark #reviews-next-btn {
  background: #111620 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

body.theme-dark #reviews-prev-btn:hover,
body.theme-dark #reviews-next-btn:hover {
  background: #1e2638 !important;
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
}

/* ── Dark Mode Pricing ── */
body.theme-dark .trackr-pricing-featured {
  background: linear-gradient(180deg, #131c2a 0%, #0d1420 100%) !important;
  border: 2px solid #38bdf8 !important;
  box-shadow: 0 16px 40px -4px rgba(56, 189, 248, 0.25) !important;
}

body.theme-dark .trackr-pricing-featured h3,
body.theme-dark .trackr-pricing-featured .price-number,
body.theme-dark .trackr-pricing-featured span[style*="font-size: 3.4rem"] {
  color: #ffffff !important;
}

body.theme-dark .trackr-pricing-featured ul,
body.theme-dark .trackr-pricing-featured li {
  color: #cbd5e1 !important;
}

body.theme-dark .trackr-pricing-featured li strong {
  color: #ffffff !important;
}

body.theme-dark .trackr-pricing-featured .btn-primary {
  background: #38bdf8 !important;
  color: #020617 !important;
  border-color: #38bdf8 !important;
}

body.theme-dark .trackr-pricing-featured .btn-primary:hover {
  background: #7dd3fc !important;
  border-color: #7dd3fc !important;
}

body.theme-dark .trackr-pricing-regular {
  background: #111620 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

body.theme-dark .trackr-pricing-regular h3,
body.theme-dark .trackr-pricing-regular span[style*="font-size: 3.4rem"] {
  color: #ffffff !important;
}

body.theme-dark .trackr-pricing-regular ul,
body.theme-dark .trackr-pricing-regular li {
  color: #cbd5e1 !important;
}

body.theme-dark .trackr-pricing-regular .btn-secondary {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

body.theme-dark .trackr-pricing-regular .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: #ffffff !important;
}

/* ── Dark Mode FAQ Accordion ── */
body.theme-dark details {
  background: #111620 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.theme-dark details summary {
  color: #ffffff !important;
}

body.theme-dark details p {
  color: #94a3b8 !important;
}

/* ── Dark Mode Footer ── */
body.theme-dark footer.pro-footer,
.theme-dark footer.pro-footer {
  background: #050608 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #64748b !important;
}

body.theme-dark footer.pro-footer a {
  color: #94a3b8 !important;
}

body.theme-dark footer.pro-footer a:hover {
  color: #38bdf8 !important;
}

body.theme-dark footer.pro-footer span,
body.theme-dark footer.pro-footer div[style*="color: #090d16"] {
  color: #ffffff !important;
}

/* ── Dark Mode for Blogs & Articles ── */
body.theme-dark article,
.theme-dark article {
  color: #cbd5e1 !important;
}

body.theme-dark article h1,
body.theme-dark article h2,
body.theme-dark article h3,
body.theme-dark article h4 {
  color: #ffffff !important;
}

body.theme-dark article p {
  color: #cbd5e1 !important;
}

body.theme-dark article section {
  background: transparent !important;
  border: none !important;
}

body.theme-dark article aside {
  background: transparent;
}

body.theme-dark article code {
  background: #0c1017 !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ── Review Author Names & Proof Badge ── */
.review-author-name {
  color: #090d16;
}
.proof-badge-pill {
  background: #ffffff;
  border: 1px solid #cbd5e1;
}
.proof-badge-text {
  color: #090d16;
}

body.theme-dark .review-author-name,
.theme-dark .review-author-name,
body.theme-dark .review-slide div,
body.theme-dark .review-slide div[style*="font-weight: 800"],
body.theme-dark .trackr-clean-card div[style*="font-weight: 800"],
body.theme-dark .trackr-clean-card .review-author-name {
  color: #ffffff !important;
}

body.theme-dark .proof-badge-pill,
.theme-dark .proof-badge-pill {
  background: #111620 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

body.theme-dark .proof-badge-text,
.theme-dark .proof-badge-text {
  color: #ffffff !important;
}

/* ── Cropped Comparison Videos (Removes 54px Pillarbox Edges) ── */
.comp-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000000;
  border-radius: 10px;
}

.comp-video-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transform-origin: center center;
  display: block;
}

body.theme-dark .comp-method-card.ae-card {
  background: #131014 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  box-shadow: 0 4px 20px rgba(239, 68, 68, 0.1) !important;
}

body.theme-dark .comp-method-card.pr-card {
  background: #0d1819 !important;
  border: 2px solid #10b981 !important;
  box-shadow: 0 6px 28px rgba(16, 185, 129, 0.25) !important;
}

body.theme-dark .comp-video-frame.ae-frame {
  border-color: rgba(239, 68, 68, 0.4) !important;
}

body.theme-dark .comp-video-frame.pr-frame {
  border-color: rgba(16, 185, 129, 0.5) !important;
}

/* ── Dark Mode for Docs (/docs) ── */
body.theme-dark #docs-update-callout {
  background: #0d121c !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  border-radius: 16px !important;
  padding: 26px 28px !important;
  margin-bottom: 34px !important;
  text-align: center !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45) !important;
}

body.theme-dark #docs-update-callout div[style*="font-size: 1.25rem"],
body.theme-dark #docs-update-callout div.callout-title,
body.theme-dark #docs-update-callout span[id="callout-version-tag"] {
  color: #ffffff !important;
}

body.theme-dark #docs-version-time {
  color: #38bdf8 !important;
}

body.theme-dark #docs-top-dl-btn,
body.theme-dark #docs-dl-btn,
body.theme-dark .btn-docs-dl {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.5) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  padding: 12px 28px !important;
  border-radius: 10px !important;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.35) !important;
  transition: all 0.25s ease !important;
}

body.theme-dark #docs-top-dl-btn:hover,
body.theme-dark #docs-dl-btn:hover,
body.theme-dark .btn-docs-dl:hover {
  background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%) !important;
  box-shadow: 0 0 28px rgba(56, 189, 248, 0.6) !important;
  transform: translateY(-1px) !important;
}

body.theme-dark #toggle-release-notes-btn {
  color: #cbd5e1 !important;
  transition: color 0.15s ease !important;
}

body.theme-dark #toggle-release-notes-btn:hover {
  color: #ffffff !important;
}

body.theme-dark #toggle-release-notes-btn #release-notes-arrow {
  color: #38bdf8 !important;
}

body.theme-dark #release-notes-details {
  background: #05080e !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 18px 22px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

body.theme-dark #release-notes-details li {
  color: #cbd5e1 !important;
}

body.theme-dark #release-notes-details li strong {
  color: #ffffff !important;
}

body.theme-dark #docs-user-license-banner {
  background: rgba(16, 185, 129, 0.08) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  border-radius: 14px !important;
  padding: 22px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

body.theme-dark #docs-license-key-val {
  color: #ffffff !important;
}

body.theme-dark #docs-user-license-banner .btn-outline {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

body.theme-dark #docs-user-license-banner .btn-outline:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: #38bdf8 !important;
}

body.theme-dark .docs-toggle-header span {
  color: #ffffff !important;
}

body.theme-dark .docs-toggle-header .docs-toggle-arrow {
  color: #38bdf8 !important;
}

body.theme-dark .docs-toggle-card {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

body.theme-dark .docs-toggle-card.active {
  border-bottom-color: rgba(56, 189, 248, 0.45) !important;
}

body.theme-dark .workflow-card {
  background: #0d121c !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  padding: 24px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.theme-dark .workflow-card:hover {
  border-color: rgba(56, 189, 248, 0.3) !important;
  transform: translateY(-1px) !important;
}

body.theme-dark .workflow-card h3 {
  color: #ffffff !important;
}

body.theme-dark .workflow-card p {
  color: #94a3b8 !important;
}

body.theme-dark .workflow-code-box {
  background: #05080e !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  color: #38bdf8 !important;
  font-family: var(--font-mono, monospace) !important;
}

body.theme-dark .action-step-card {
  background: #0d121c !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  padding: 22px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.theme-dark .action-step-card:hover {
  border-color: rgba(56, 189, 248, 0.3) !important;
  transform: translateY(-1px) !important;
}

body.theme-dark .step-card-label {
  color: #ffffff !important;
  font-weight: 800 !important;
}

body.theme-dark .action-step-card p {
  color: #94a3b8 !important;
}

body.theme-dark .faq-row {
  background: #0d121c !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.theme-dark .faq-row:hover {
  border-color: rgba(56, 189, 248, 0.3) !important;
}

body.theme-dark .faq-row.active {
  background: #111726 !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
}

body.theme-dark .faq-toggle-btn {
  color: #ffffff !important;
  padding: 18px 20px !important;
  background: transparent !important;
}

body.theme-dark .faq-body {
  color: #cbd5e1 !important;
  padding: 0 20px 20px !important;
  line-height: 1.65 !important;
}

body.theme-dark .faq-arrow {
  color: #94a3b8 !important;
}

body.theme-dark main.container h1 {
  color: #ffffff !important;
}

body.theme-dark main.container p {
  color: #94a3b8 !important;
}

body.theme-dark #license-download-modal > div {
  background: #0d121f !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #f8fafc !important;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.8) !important;
}

body.theme-dark #license-download-modal h3 {
  color: #ffffff !important;
}

body.theme-dark #license-download-modal p {
  color: #94a3b8 !important;
}

body.theme-dark #modal-license-input {
  background: #07090e !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

body.theme-dark #btn-close-license-modal {
  color: #94a3b8 !important;
}

body.theme-dark #btn-modal-verify-submit {
  background: linear-gradient(135deg, #f59e0b, #ea580c) !important;
  color: #0b0f19 !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.35) !important;
}

/* ── Light Mode for License Modal ── */
body.theme-light #license-download-modal > div {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #090d16 !important;
  box-shadow: 0 25px 60px -10px rgba(15, 23, 42, 0.25) !important;
}

body.theme-light #license-download-modal h3 {
  color: #090d16 !important;
}

body.theme-light #license-download-modal p {
  color: #475569 !important;
}

body.theme-light #modal-license-input {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #090d16 !important;
}

body.theme-light #btn-close-license-modal {
  color: #64748b !important;
}

body.theme-light #btn-modal-verify-submit {
  background: #090d16 !important;
  color: #ffffff !important;
  border: 1px solid #090d16 !important;
}

/* ── Dark Mode for Blog Directory (/blog) ── */
body.theme-dark div[style*="border-radius: 16px; padding: 32px"],
body.theme-dark .blog-featured-card {
  background: #0d121c !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  border-radius: 16px !important;
  padding: 32px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
}

body.theme-dark div[style*="border-radius: 16px; padding: 32px"] h2 a,
body.theme-dark .blog-featured-card h2 a {
  color: #ffffff !important;
  transition: color 0.15s ease !important;
}

body.theme-dark div[style*="border-radius: 16px; padding: 32px"] h2 a:hover,
body.theme-dark .blog-featured-card h2 a:hover {
  color: #38bdf8 !important;
}

body.theme-dark div[style*="border-radius: 16px; padding: 32px"] p,
body.theme-dark .blog-featured-card p {
  color: #94a3b8 !important;
}

body.theme-dark div[style*="border-radius: 16px; padding: 32px"] .btn-primary,
body.theme-dark .blog-featured-card .btn-primary {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.5) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.35) !important;
  transition: all 0.2s ease !important;
}

body.theme-dark div[style*="border-radius: 16px; padding: 32px"] .btn-primary:hover,
body.theme-dark .blog-featured-card .btn-primary:hover {
  background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%) !important;
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.55) !important;
  transform: translateY(-1px) !important;
}

body.theme-dark div[style*="border-radius: 16px; padding: 32px"] div[style*="border-top"],
body.theme-dark .blog-featured-card div[style*="border-top"] {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

body.theme-dark article[style*="border-radius: 14px; padding: 26px"],
body.theme-dark .blog-article-card {
  background: #0d121c !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  padding: 26px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.theme-dark article[style*="border-radius: 14px; padding: 26px"]:hover,
body.theme-dark .blog-article-card:hover {
  border-color: rgba(56, 189, 248, 0.35) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

body.theme-dark article[style*="border-radius: 14px; padding: 26px"] h3 a,
body.theme-dark .blog-article-card h3 a {
  color: #ffffff !important;
  transition: color 0.15s ease !important;
}

body.theme-dark article[style*="border-radius: 14px; padding: 26px"] h3 a:hover,
body.theme-dark .blog-article-card h3 a:hover {
  color: #38bdf8 !important;
}

body.theme-dark article[style*="border-radius: 14px; padding: 26px"] p,
body.theme-dark .blog-article-card p {
  color: #94a3b8 !important;
}

body.theme-dark article[style*="border-radius: 14px; padding: 26px"] div[style*="border-top"],
body.theme-dark .blog-article-card div[style*="border-top"] {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

body.theme-dark article[style*="border-radius: 14px; padding: 26px"] a[style*="color: #0284c7"],
body.theme-dark .blog-article-card a[style*="color: #0284c7"] {
  color: #38bdf8 !important;
}

/* ── Dark Mode Category Badges & Pills ── */
body.theme-dark span[style*="background: #e0f2fe"],
body.theme-dark .blog-featured-card span[style*="background: #e0f2fe"] {
  background: rgba(56, 189, 248, 0.15) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  border-radius: 6px !important;
}

body.theme-dark span[style*="background: #ecfdf5"] {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  border-radius: 6px !important;
}

body.theme-dark span[style*="background: #fef3c7"] {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  border-radius: 6px !important;
}

body.theme-dark span[style*="background: #f3e8ff"] {
  background: rgba(168, 85, 247, 0.15) !important;
  color: #c084fc !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
  border-radius: 6px !important;
}

body.theme-dark span[style*="background: #ffe4e6"] {
  background: rgba(244, 63, 94, 0.15) !important;
  color: #fb7185 !important;
  border: 1px solid rgba(244, 63, 94, 0.3) !important;
  border-radius: 6px !important;
}

/* ── Individual Blog Post Articles (/blog/*.html) in Dark Mode ── */
body.theme-dark article.container {
  color: #cbd5e1 !important;
}

body.theme-dark article header h1 {
  color: #ffffff !important;
}

body.theme-dark article header p {
  color: #cbd5e1 !important;
}

body.theme-dark article header a[href="/blog"] {
  color: #38bdf8 !important;
}

body.theme-dark article header div[style*="color: #64748b"] {
  color: #94a3b8 !important;
}

body.theme-dark article h2 {
  color: #ffffff !important;
}

body.theme-dark article h2[style*="color: #e11d48"] {
  color: #fb7185 !important;
}

body.theme-dark article h2[style*="color: #059669"] {
  color: #34d399 !important;
}

body.theme-dark article h2[style*="color: #0284c7"] {
  color: #38bdf8 !important;
}

body.theme-dark article section[style*="background: #f8fafc"],
body.theme-dark article section[style*="background:#f8fafc"],
body.theme-dark article section.card {
  background: #0d121c !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  padding: 28px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

body.theme-dark article div[style*="background: #f8fafc"],
body.theme-dark article div[style*="background:#f8fafc"] {
  background: #0d121c !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 22px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.theme-dark article div[style*="background: #f8fafc"]:hover,
body.theme-dark article div[style*="background:#f8fafc"]:hover {
  border-color: rgba(56, 189, 248, 0.35) !important;
  transform: translateY(-1px) !important;
}

body.theme-dark article div[style*="background: #f8fafc"] h3,
body.theme-dark article div[style*="background:#f8fafc"] h3 {
  color: #38bdf8 !important;
}

body.theme-dark article div[style*="background: #f8fafc"] p,
body.theme-dark article div[style*="background:#f8fafc"] p {
  color: #cbd5e1 !important;
}

body.theme-dark article div[style*="background: #f8fafc"] h4,
body.theme-dark article div[style*="background:#f8fafc"] h4 {
  color: #38bdf8 !important;
  font-weight: 700 !important;
}

body.theme-dark article div[style*="background: #f8fafc"] h4[style*="color: #059669"] {
  color: #34d399 !important;
}

body.theme-dark article div[style*="background: #f8fafc"] h4[style*="color: #d97706"] {
  color: #fbbf24 !important;
}

body.theme-dark article div[style*="background: #f8fafc"] h4[style*="color: #7c3aed"] {
  color: #c084fc !important;
}

/* Table Wrapper Card in Dark Mode */
body.theme-dark article div[style*="background: #ffffff"],
body.theme-dark article div[style*="background:#ffffff"],
body.theme-dark article div[style*="overflow-x: auto"] {
  background: #0d121c !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
  overflow: hidden !important;
}

body.theme-dark article table {
  background: transparent !important;
  border: none !important;
  color: #cbd5e1 !important;
}

body.theme-dark article table thead tr,
body.theme-dark article table tr[style*="background: #f8fafc"],
body.theme-dark article table tr[style*="background:#f8fafc"],
body.theme-dark article tr[style*="background: #f8fafc"] {
  background: #111726 !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1) !important;
}

body.theme-dark article table th,
body.theme-dark article th {
  background: transparent !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1) !important;
}

body.theme-dark article table td,
body.theme-dark article td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: #cbd5e1 !important;
}

body.theme-dark article table tr:last-child td {
  border-bottom: none !important;
}

body.theme-dark article table td strong,
body.theme-dark article table td[style*="font-weight: 600"],
body.theme-dark article table td[style*="font-weight: 700"],
body.theme-dark article td[style*="color: #059669"] {
  color: #34d399 !important;
}

body.theme-dark article table td[style*="color: #e11d48"] {
  color: #fb7185 !important;
}

body.theme-dark article table td[style*="color: #d97706"] {
  color: #fbbf24 !important;
}

body.theme-dark article table td[style*="color: #64748b"] {
  color: #94a3b8 !important;
}

body.theme-dark article section ol,
body.theme-dark article section ul,
body.theme-dark article section p,
body.theme-dark article p {
  color: #cbd5e1 !important;
}

body.theme-dark article section li strong,
body.theme-dark article li strong {
  color: #ffffff !important;
}

/* Callout Warning & Tip Boxes */
body.theme-dark article div[style*="background: #fff1f2"] {
  background: rgba(244, 63, 94, 0.1) !important;
  border: 1px solid rgba(244, 63, 94, 0.3) !important;
  border-left: 4px solid #f43f5e !important;
  border-radius: 8px !important;
  color: #fecdd3 !important;
  padding: 14px 18px !important;
}

body.theme-dark article div[style*="background: #fff1f2"] strong {
  color: #fda4af !important;
}

body.theme-dark article div[style*="background: #ecfdf5"] {
  background: rgba(16, 185, 129, 0.1) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  border-left: 4px solid #10b981 !important;
  border-radius: 8px !important;
  color: #a7f3d0 !important;
  padding: 14px 18px !important;
}

body.theme-dark article div[style*="background: #ecfdf5"] strong {
  color: #6ee7b7 !important;
}

/* ── Dark Mode for Blog Bottom CTA & Asides ── */
aside.blog-bottom-cta,
.blog-bottom-cta {
  border-radius: 16px !important;
  padding: 34px 28px !important;
  transition: all 0.2s ease !important;
}

body.theme-dark aside.blog-bottom-cta,
body.theme-dark .blog-bottom-cta,
body.theme-dark div.blog-bottom-cta {
  background: linear-gradient(135deg, #0d121c 0%, #111726 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  border-radius: 16px !important;
  padding: 34px 28px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45) !important;
}

body.theme-dark aside h2,
body.theme-dark aside h3,
body.theme-dark .blog-bottom-cta h2,
body.theme-dark .blog-bottom-cta h3 {
  color: #ffffff !important;
  font-weight: 800 !important;
}

body.theme-dark aside p,
body.theme-dark .blog-bottom-cta p {
  color: #94a3b8 !important;
}

body.theme-dark aside .btn-primary,
body.theme-dark .blog-bottom-cta .btn-primary {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.5) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  border-radius: 8px !important;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.35) !important;
  transition: all 0.2s ease !important;
}

body.theme-dark aside .btn-primary:hover,
body.theme-dark .blog-bottom-cta .btn-primary:hover {
  background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%) !important;
  box-shadow: 0 0 28px rgba(56, 189, 248, 0.6) !important;
  transform: translateY(-1px) !important;
}

body.theme-dark aside .btn-secondary,
body.theme-dark .blog-bottom-cta .btn-secondary {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
}

body.theme-dark aside .btn-secondary:hover,
body.theme-dark .blog-bottom-cta .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
  transform: translateY(-1px) !important;
}

/* ── Light Mode for Blog Bottom CTA & Asides ── */
.blog-bottom-cta,
aside.blog-bottom-cta {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
}

.blog-bottom-cta h2,
.blog-bottom-cta h3,
aside.blog-bottom-cta h2,
aside.blog-bottom-cta h3 {
  color: #090d16;
}

.blog-bottom-cta p,
aside.blog-bottom-cta p {
  color: #475569;
}

.blog-bottom-cta .btn-primary,
aside.blog-bottom-cta .btn-primary {
  background: #090d16;
  color: #ffffff;
  border: 1px solid #090d16;
}

.blog-bottom-cta .btn-secondary,
aside.blog-bottom-cta .btn-secondary {
  background: #ffffff;
  color: #090d16;
  border: 1px solid #cbd5e1;
}

/* ── Interactive Day/Night Theme Test Simulator Bar ── */
.theme-sim-pill {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 999999;
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(56, 189, 248, 0.35);
  box-shadow: 0 10px 35px -5px rgba(0, 0, 0, 0.5), 0 0 20px rgba(56, 189, 248, 0.2);
  border-radius: 9999px;
  padding: 6px 14px 6px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #f8fafc;
  font-size: 0.82rem;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.theme-sim-pill:hover {
  border-color: #38bdf8;
  box-shadow: 0 12px 40px -5px rgba(0, 0, 0, 0.6), 0 0 26px rgba(56, 189, 248, 0.35);
}

.theme-sim-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.78rem;
  color: #cbd5e1;
}

.theme-sim-mode-tag {
  color: #38bdf8;
  font-weight: 800;
}

.theme-sim-btn-group {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.4);
  padding: 3px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.theme-sim-btn {
  background: transparent;
  border: none;
  border-radius: 9999px;
  padding: 4px 10px;
  color: #94a3b8;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

.theme-sim-btn:hover {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.08);
}

.theme-sim-btn.active {
  background: #38bdf8;
  color: #020617;
  box-shadow: 0 2px 8px rgba(56, 189, 248, 0.4);
}

.theme-sim-close-btn {
  background: transparent;
  border: none;
  color: #64748b;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.2s;
}

.theme-sim-close-btn:hover {
  color: #f8fafc;
}

.theme-sim-minimized {
  padding: 7px 14px;
  cursor: pointer;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 9999px;
  color: #38bdf8;
  font-size: 0.78rem;
  font-weight: 700;
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 999999;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}