/* ==========================================================================
   CARDSAHAYAK GLOBAL PAPER / OBSIDIAN THEME & SWISS LEDGER ARCHITECTURE
   Version: 2026.10 — Unified Archival Paper & Obsidian Financial Terminal
   Applies website-wide across Homepage, Cards, Tools, Deals, Lounges & Insider
   ========================================================================== */

/* ==========================================================================
   1. GLOBAL DESIGN TOKENS (PAPER LIGHT MODE & OBSIDIAN DARK MODE)
   ========================================================================== */
:root,
html[data-theme="light"] {
  --bg-canvas: #FBFBF9;
  --bg-surface: #F3F2EE;
  --bg-elevated: #FFFFFF;
  --bg-surface-hover: #EAE8E1;
  --bg-glass: rgba(251, 251, 249, 0.92);

  --ink-heading: #111315;
  --ink-body: #26292E;
  --ink-secondary: #525866;
  --ink-muted: #68707C;

  --border-hairline: rgba(17, 19, 21, 0.09);
  --border-strong: rgba(17, 19, 21, 0.18);

  --accent-brand: #0F766E;
  --accent-brand-soft: rgba(15, 118, 110, 0.09);
  --accent-gold: #B45309;
  --accent-gold-bg: #FEF3C7;
  --accent-gold-border: rgba(180, 83, 9, 0.28);

  --pos-ink: #065F46;
  --pos-bg: #ECFDF5;
  --pos-border: rgba(6, 95, 70, 0.22);

  --neg-ink: #9F1239;
  --neg-bg: #FFF1F2;
  --neg-border: rgba(159, 18, 57, 0.22);

  --info-ink: #1E40AF;
  --info-bg: #EFF6FF;
  --info-border: rgba(30, 64, 175, 0.2);

  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'Newsreader', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --prose-font: var(--font-serif);
  --prose-size: 18px;
  --prose-lh: 1.78;
  --stage-width: 1120px;
}

html[data-theme="dark"],
html[data-theme="dark"] .swiss-ledger-article,
.swiss-ledger-article[data-theme="dark"] {
  --bg-canvas: #0B0F17;
  --bg-surface: #121824;
  --bg-elevated: #161E2E;
  --bg-surface-hover: #1C263B;
  --bg-glass: rgba(18, 24, 36, 0.94);

  --ink-heading: #F1F5F9;
  --ink-body: #CBD5E1;
  --ink-secondary: #94A3B8;
  --ink-muted: #64748B;

  --border-hairline: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.15);

  --accent-brand: #2DD4BF;
  --accent-brand-soft: rgba(45, 212, 191, 0.12);
  --accent-gold: #FBBF24;
  --accent-gold-bg: rgba(251, 191, 36, 0.14);
  --accent-gold-border: rgba(251, 191, 36, 0.35);

  --pos-ink: #34D399;
  --pos-bg: rgba(16, 185, 129, 0.14);
  --pos-border: rgba(52, 211, 153, 0.28);

  --neg-ink: #FB7185;
  --neg-bg: rgba(244, 63, 94, 0.14);
  --neg-border: rgba(251, 113, 133, 0.28);

  --info-ink: #60A5FA;
  --info-bg: rgba(59, 130, 246, 0.14);
  --info-border: rgba(96, 165, 250, 0.28);

  /* Remap NerdWallet Theme Variables for Obsidian Mode */
  --nw-emerald: #10B981;
  --nw-emerald-hover: #059669;
  --nw-emerald-active: #047857;
  --nw-emerald-light: rgba(16, 185, 129, 0.14);
  --nw-emerald-border: rgba(52, 211, 153, 0.28);
  --nw-emerald-subtle: rgba(16, 185, 129, 0.18);

  --nw-slate-950: #F8FAFC;
  --nw-slate-900: #F1F5F9;
  --nw-slate-800: #E2E8F0;
  --nw-slate-700: #CBD5E1;
  --nw-slate-600: #94A3B8;
  --nw-slate-500: #94A3B8;
  --nw-slate-400: #64748B;
  --nw-slate-200: rgba(255, 255, 255, 0.08);
  --nw-slate-100: #161E2E;
  --nw-slate-50: #0B0F17;

  --nw-gold: #FBBF24;
  --nw-gold-light: rgba(251, 191, 36, 0.14);
  --nw-rose: #FB7185;
  --nw-rose-light: rgba(244, 63, 94, 0.14);
  --nw-blue: #60A5FA;
  --nw-blue-light: rgba(59, 130, 246, 0.14);

  color-scheme: dark;
}

/* ==========================================================================
   2. SINGLE GLOBAL THEME TOGGLE BUTTON (.cs-global-theme-btn)
   ========================================================================== */
.cs-global-theme-btn {
  background: #F4F3EF;
  border: 1px solid rgba(15, 23, 42, 0.12);
  color: #0F172A;
  font-family: var(--font-mono);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  line-height: 1.2;
}
.cs-global-theme-btn:hover {
  background: #EAE8E1;
  border-color: rgba(15, 23, 42, 0.24);
  color: #0F172A;
}

html[data-theme="dark"] .cs-global-theme-btn,
.cs-global-theme-btn.active,
.cs-global-theme-btn[aria-pressed="true"] {
  background: rgba(45, 212, 191, 0.14) !important;
  border-color: rgba(45, 212, 191, 0.4) !important;
  color: #2DD4BF !important;
}
html[data-theme="dark"] .cs-global-theme-btn:hover {
  background: rgba(45, 212, 191, 0.22) !important;
  border-color: rgba(45, 212, 191, 0.6) !important;
}

/* ==========================================================================
   3. SWISS LEDGER ARTICLE SYSTEM (.swiss-ledger-article)
   ========================================================================== */
.swiss-ledger-article {
  background-color: var(--bg-canvas);
  color: var(--ink-body);
  font-family: var(--font-sans);
  min-height: 100vh;
  position: relative;
  overflow-x: clip;
  transition: background-color 0.22s ease, color 0.22s ease;
}

/* Semantic Callout Boxes */
.swiss-ledger-article .swiss-callout {
  background-image: none !important;
  border-radius: 14px;
  border: 1px solid var(--border-strong);
  background-color: var(--bg-surface);
  color: var(--ink-body);
}
.swiss-ledger-article .swiss-callout-pos,
.swiss-ledger-article .swiss-callout-take {
  background-color: var(--pos-bg) !important;
  border-color: var(--pos-border) !important;
}
.swiss-ledger-article .swiss-callout-warn {
  background-color: var(--accent-gold-bg) !important;
  border-color: var(--accent-gold-border) !important;
}
.swiss-ledger-article .swiss-callout-info {
  background-color: var(--info-bg) !important;
  border-color: var(--info-border) !important;
}

/* Chapter Section Card Surface */
.swiss-ledger-article .chapter-section {
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-hairline);
  border-radius: 16px;
  padding: 28px 32px;
  margin-bottom: 32px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Font & Scale Toggles */
.swiss-ledger-article p,
.swiss-ledger-article li,
.swiss-ledger-article .prose-text {
  font-family: var(--prose-font);
  font-size: var(--prose-size);
  line-height: var(--prose-lh);
  color: var(--ink-body);
  font-optical-sizing: auto;
}

.swiss-ledger-article[data-font="sans"],
.swiss-ledger-article[data-font="sans"] p,
.swiss-ledger-article[data-font="sans"] li,
.swiss-ledger-article[data-font="sans"] td,
.swiss-ledger-article[data-font="sans"] th,
.swiss-ledger-article[data-font="sans"] .prose-text,
.swiss-ledger-article[data-font="sans"] .key-takeaway,
.swiss-ledger-article[data-font="sans"] .chapter-section p,
.swiss-ledger-article[data-font="sans"] .chapter-section li {
  font-family: var(--font-sans) !important;
}

.swiss-ledger-article[data-font="serif"] p,
.swiss-ledger-article[data-font="serif"] li,
.swiss-ledger-article[data-font="serif"] .prose-text,
.swiss-ledger-article[data-font="serif"] .key-takeaway,
.swiss-ledger-article[data-font="serif"] .chapter-section p,
.swiss-ledger-article[data-font="serif"] .chapter-section li {
  font-family: var(--font-serif) !important;
}

.swiss-ledger-article[data-scale="large"] p,
.swiss-ledger-article[data-scale="large"] li,
.swiss-ledger-article[data-scale="large"] td,
.swiss-ledger-article[data-scale="large"] th,
.swiss-ledger-article[data-scale="large"] .prose-text,
.swiss-ledger-article[data-scale="large"] .key-takeaway,
.swiss-ledger-article[data-scale="large"] .chapter-section p,
.swiss-ledger-article[data-scale="large"] .chapter-section li,
.swiss-ledger-article[data-scale="large"] .diff-row,
.swiss-ledger-article[data-scale="large"] .decision-list,
.swiss-ledger-article[data-scale="large"] .text-sm,
.swiss-ledger-article[data-scale="large"] .text-base {
  font-size: 20.5px !important;
  line-height: 1.84 !important;
}

/* 30s Skimmer Mode */
.swiss-ledger-article.tldr-active p:not(.key-takeaway):not(.hero-p),
.swiss-ledger-article.tldr-active li:not(.keep-bright),
.swiss-ledger-article.tldr-active .text-dark-700:not(.key-takeaway),
.swiss-ledger-article.tldr-active .text-dark-600 {
  opacity: 0.22 !important;
  filter: blur(0.2px);
  transition: opacity 0.22s ease, filter 0.22s ease;
}
.swiss-ledger-article.tldr-active p:hover,
.swiss-ledger-article.tldr-active li:hover,
.swiss-ledger-article.tldr-active .text-dark-700:hover,
.swiss-ledger-article.tldr-active .text-dark-600:hover {
  opacity: 1 !important;
  filter: none !important;
}
.swiss-ledger-article.tldr-active .key-takeaway,
.swiss-ledger-article.tldr-active .metric-ribbon,
.swiss-ledger-article.tldr-active .mpill,
.swiss-ledger-article.tldr-active .num,
.swiss-ledger-article.tldr-active .fin-table,
.swiss-ledger-article.tldr-active .calc-workbench,
.swiss-ledger-article.tldr-active .diff-container,
.swiss-ledger-article.tldr-active .decision-grid {
  opacity: 1 !important;
  filter: none !important;
}

/* Strict Tabular Numerals */
.swiss-ledger-article .num,
.swiss-ledger-article code,
.swiss-ledger-article table td,
.swiss-ledger-article table th,
.swiss-ledger-article .metric-val,
.swiss-ledger-article output {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: -0.02em;
}

/* Minimalist Ergonomic Top Bar & Editorial Header */
.swiss-ledger-article .site-topbar,
.swiss-ledger-article .ergonomic-bar {
  max-width: var(--stage-width);
  margin: 0 auto;
  padding: 16px 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border-hairline);
  font-size: 13px;
}

.swiss-ledger-article .brand-cluster {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink-heading);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.swiss-ledger-article .brand-mark {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--ink-heading);
  color: var(--bg-canvas);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}

.swiss-ledger-article .breadcrumb-trail {
  color: var(--ink-muted);
  font-weight: 400;
  font-size: 12.5px;
}
.swiss-ledger-article .breadcrumb-trail span {
  margin: 0 5px;
  opacity: 0.5;
}

.swiss-ledger-article .ergonomic-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.swiss-ledger-article .tool-btn,
.swiss-ledger-article .ergo-btn {
  background: var(--bg-surface);
  color: var(--ink-secondary);
  border: 1px solid var(--border-hairline);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-family: var(--font-sans);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.16s ease;
  user-select: none;
  white-space: nowrap;
}
.swiss-ledger-article .tool-btn:hover,
.swiss-ledger-article .ergo-btn:hover {
  background: var(--bg-surface-hover);
  color: var(--ink-heading);
}
.swiss-ledger-article .tool-btn[aria-pressed="true"],
.swiss-ledger-article .tool-btn.active,
.swiss-ledger-article .ergo-btn[aria-pressed="true"],
.swiss-ledger-article .ergo-btn.active {
  background: var(--accent-brand-soft) !important;
  color: var(--accent-brand) !important;
  border-color: var(--accent-brand) !important;
}

/* Swiss Share Strip & Containers */
.swiss-ledger-article .swiss-share-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: -6px 0 28px;
  padding: 10px 18px;
  background: var(--bg-surface);
  border-radius: 10px;
  border: 1px solid var(--border-hairline);
  font-size: 12.5px;
}
.swiss-ledger-article .share-label {
  font-weight: 600;
  color: var(--ink-secondary);
  margin-right: 4px;
}
.swiss-ledger-article .share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 6px;
  background: var(--bg-canvas);
  color: var(--ink-body);
  border: 1px solid var(--border-hairline);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.16s ease;
}
.swiss-ledger-article .share-btn:hover {
  background: var(--bg-surface-hover);
  color: var(--ink-heading);
  border-color: var(--border-strong);
}

.swiss-article-container {
  max-width: var(--stage-width);
  margin: 0 auto;
  padding: 36px 28px 80px;
  width: 100%;
  box-sizing: border-box;
}

.swiss-ledger-article .key-takeaway {
  padding: 16px 20px;
  border-radius: 10px;
  background: var(--bg-surface);
  border-left: 3.5px solid var(--accent-brand);
  font-size: 16.5px !important;
  line-height: 1.68 !important;
  color: var(--ink-heading) !important;
  margin: 24px 0 28px;
}

.swiss-ledger-article .section-h2 {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.5vw, 26px);
  font-weight: 700;
  letter-spacing: -0.024em;
  color: var(--ink-heading);
  margin-top: 48px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-hairline);
  scroll-margin-top: 40px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.swiss-ledger-article .chapter-section .section-h2 {
  margin-top: 4px;
}
.swiss-ledger-article .section-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
  flex-shrink: 0;
}

.swiss-ledger-article .mpill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.82em;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--bg-surface);
  color: var(--ink-heading);
  border: 1px solid var(--border-strong);
  vertical-align: baseline;
  white-space: nowrap;
}
.swiss-ledger-article .mpill.pos {
  background: var(--pos-bg);
  color: var(--pos-ink);
  border-color: var(--pos-border);
}
.swiss-ledger-article .mpill.neg {
  background: var(--neg-bg);
  color: var(--neg-ink);
  border-color: var(--neg-border);
}
.swiss-ledger-article .mpill.gold {
  background: var(--accent-gold-bg);
  color: var(--accent-gold);
  border-color: var(--accent-gold-border);
}

.swiss-ledger-article .eeat-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  font-size: 12px;
  color: var(--ink-secondary);
  margin-bottom: 20px;
}
.swiss-ledger-article .verified-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--pos-bg);
  color: var(--pos-ink);
  border: 1px solid var(--pos-border);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}
.swiss-ledger-article .identity-header,
.swiss-ledger-article .hero-title-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border-hairline);
  margin-bottom: 26px;
}
.swiss-ledger-article .identity-title-block h1 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.028em;
  color: var(--ink-heading);
  text-wrap: balance;
  margin-bottom: 8px;
}
.swiss-ledger-article .identity-subtitle {
  font-size: 15.5px;
  line-height: 1.52;
  color: var(--ink-secondary);
}
.swiss-ledger-article .sovereign-score-box {
  background: var(--bg-surface);
  border: 1px solid var(--accent-gold-border);
  border-radius: 10px;
  padding: 12px 18px;
  text-align: center;
  min-width: 118px;
}
.swiss-ledger-article .metric-ribbon {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--bg-surface);
  border-radius: 12px;
  padding: 20px 22px;
  gap: 20px;
  margin-bottom: 24px;
  border: 1px solid var(--border-hairline);
}
.swiss-ledger-article .metric-cell {
  padding-right: 16px;
  border-right: 1px solid var(--border-hairline);
}
.swiss-ledger-article .metric-cell:last-child {
  border-right: none;
  padding-right: 0;
}
.swiss-ledger-article .metric-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-secondary);
  margin-bottom: 4px;
}
.swiss-ledger-article .metric-val {
  font-size: 21px;
  font-weight: 700;
  color: var(--ink-heading);
  margin-bottom: 4px;
}
.swiss-ledger-article .metric-sub {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-muted);
}
.swiss-ledger-article .decision-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 32px;
}
.swiss-ledger-article .decision-card {
  background: var(--bg-surface);
  border-radius: 12px;
  padding: 20px 22px;
  border: 1px solid var(--border-hairline);
  border-top: 3px solid transparent;
}
.swiss-ledger-article .decision-card.get-it { border-top-color: var(--pos-ink); }
.swiss-ledger-article .decision-card.skip-it { border-top-color: var(--neg-ink); }
.swiss-ledger-article .table-wrap {
  margin: 22px 0 30px;
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: 12px;
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}
.swiss-ledger-article .fin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  text-align: left;
}
.swiss-ledger-article .fin-table th,
.swiss-ledger-article .fin-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-hairline);
}
.swiss-ledger-article .fin-table th {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-secondary);
  background: var(--bg-surface);
}
.swiss-ledger-article details.drawer-item,
.swiss-ledger-article details.spec-drawer {
  border-bottom: 1px solid var(--border-hairline);
  background: transparent;
}
.swiss-ledger-article .drawer-group {
  margin: 26px 0 36px;
  border-top: 1px solid var(--border-hairline);
}
.swiss-ledger-article summary.drawer-summary,
.swiss-ledger-article summary.spec-summary {
  padding: 16px 4px;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-heading);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  transition: color 0.15s ease;
}
.swiss-ledger-article summary.drawer-summary::-webkit-details-marker,
.swiss-ledger-article summary.spec-summary::-webkit-details-marker {
  display: none;
}
.swiss-ledger-article summary.drawer-summary:hover,
.swiss-ledger-article summary.spec-summary:hover {
  color: var(--accent-brand);
}
.swiss-ledger-article .drawer-icon {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--ink-muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.swiss-ledger-article details[open] .drawer-icon {
  transform: rotate(45deg);
  color: var(--ink-heading);
}
.swiss-ledger-article .drawer-body {
  padding: 4px 4px 20px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-secondary);
}
.swiss-ledger-article .score-num {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  color: var(--ink-heading);
  line-height: 1;
}
.swiss-ledger-article .score-num span {
  font-size: 12.5px;
  color: var(--ink-muted);
  font-weight: 400;
}
.swiss-ledger-article .score-tag {
  margin-top: 6px;
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-gold);
  background: var(--accent-gold-bg);
  padding: 2px 7px;
  border-radius: 4px;
}
.swiss-ledger-article .decision-title {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink-heading);
  margin-bottom: 12px;
}
.swiss-ledger-article .decision-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.52;
  color: var(--ink-body);
  padding: 0;
  margin: 0;
}
.swiss-ledger-article .decision-list li {
  position: relative;
  padding-left: 20px;
}
.swiss-ledger-article .decision-list li::before {
  position: absolute;
  left: 0;
  top: 1px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
}
.swiss-ledger-article .decision-card.get-it .decision-list li::before {
  content: "✓";
  color: var(--pos-ink);
}
.swiss-ledger-article .decision-card.skip-it .decision-list li::before {
  content: "✕";
  color: var(--neg-ink);
}
.swiss-ledger-article .jargon {
  border-bottom: 1.5px dashed var(--accent-brand);
  cursor: help;
  position: relative;
  color: var(--ink-heading);
  font-weight: 500;
}
.swiss-ledger-article .jargon-card {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 280px;
  max-width: calc(100vw - 32px);
  background: var(--ink-heading);
  color: var(--bg-canvas);
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.45;
  padding: 10px 14px;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  z-index: 50;
  pointer-events: none;
  transition: all 0.16s ease;
}
.swiss-ledger-article .jargon:hover .jargon-card,
.swiss-ledger-article .jargon:focus .jargon-card {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
#top-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #0F766E, #B45309);
  z-index: 1000;
  transition: width 0.08s linear;
}
.swiss-ledger-article .mobile-glass-pill {
  display: none;
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-strong);
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  z-index: 900;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.swiss-ledger-article .mobile-glass-pill a,
.swiss-ledger-article .mobile-glass-pill button {
  color: var(--ink-heading);
  text-decoration: none;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
}

@media (max-width: 900px) {
  .swiss-article-container { padding: 28px 20px 72px; }
  .swiss-ledger-article .site-topbar,
  .swiss-ledger-article .ergonomic-bar { padding: 14px 20px; }
  .swiss-ledger-article .metric-ribbon { grid-template-columns: 1fr 1fr; gap: 16px; }
  .swiss-ledger-article .metric-cell:nth-child(2) { border-right: none; padding-right: 0; }
  .swiss-ledger-article .decision-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .swiss-article-container { padding: 20px 14px 72px; }
  .swiss-ledger-article .site-topbar,
  .swiss-ledger-article .ergonomic-bar {
    padding: 12px 14px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .swiss-ledger-article .breadcrumb-trail { display: none; }
  .swiss-ledger-article .ergonomic-toolbar {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .swiss-ledger-article .tool-btn,
  .swiss-ledger-article .ergo-btn {
    padding: 7px 6px;
    font-size: 11.5px;
    width: 100%;
    justify-content: center;
  }
  .swiss-ledger-article .identity-header,
  .swiss-ledger-article .hero-title-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .swiss-ledger-article .sovereign-score-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }
  .swiss-ledger-article .metric-ribbon {
    grid-template-columns: 1fr 1fr;
    padding: 14px;
    gap: 12px;
  }
  .swiss-ledger-article .chapter-section {
    padding: 18px 15px;
    border-radius: 14px;
  }
  .swiss-ledger-article .mobile-glass-pill {
    display: inline-flex;
  }
}
@media (max-width: 420px) {
  .swiss-ledger-article .metric-ribbon {
    grid-template-columns: 1fr;
  }
  .swiss-ledger-article .metric-cell {
    border-right: none;
    border-bottom: 1px solid var(--border-hairline);
    padding-right: 0;
    padding-bottom: 10px;
  }
  .swiss-ledger-article .metric-cell:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}

/* ==========================================================================
   4. WEBSITE-WIDE OBSIDIAN DARK MODE (html[data-theme="dark"])
   Covers Homepage, Cards Index/Show/Compare, Tools, Deals, Lounges & Insider
   ========================================================================== */

/* 4.1 Global Canvas & Typography */
html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] body.nerdwallet-theme,
html[data-theme="dark"] body.nova-theme {
  background-color: #0B0F17 !important;
  color: #CBD5E1 !important;
}

html[data-theme="dark"] body.nerdwallet-theme h1,
html[data-theme="dark"] body.nerdwallet-theme h2,
html[data-theme="dark"] body.nerdwallet-theme h3,
html[data-theme="dark"] body.nerdwallet-theme h4,
html[data-theme="dark"] body.nova-theme h1,
html[data-theme="dark"] body.nova-theme h2,
html[data-theme="dark"] body.nova-theme h3,
html[data-theme="dark"] body.nova-theme h4,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
  color: #F1F5F9 !important;
}

html[data-theme="dark"] body.nerdwallet-theme p,
html[data-theme="dark"] body.nova-theme p,
html[data-theme="dark"] p,
html[data-theme="dark"] li {
  color: #CBD5E1;
}

/* 4.2 Top Trust Banner, Main Sticky Navbar, Dropdowns & Mobile Drawer */
html[data-theme="dark"] body > div.bg-white.border-b,
html[data-theme="dark"] nav[aria-label="Main navigation"],
html[data-theme="dark"] body.nerdwallet-theme nav[aria-label="Main navigation"],
html[data-theme="dark"] .sticky-nav,
html[data-theme="dark"] .sticky-header,
html[data-theme="dark"] .nova-navbar-scrolled {
  background: rgba(11, 15, 23, 0.94) !important;
  background-color: rgba(11, 15, 23, 0.94) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] nav[aria-label="Main navigation"] .text-dark-800,
html[data-theme="dark"] nav[aria-label="Main navigation"] .text-dark-600,
html[data-theme="dark"] body.nerdwallet-theme nav .text-dark-800,
html[data-theme="dark"] body.nerdwallet-theme nav .text-dark-600 {
  color: #E2E8F0 !important;
}

html[data-theme="dark"] nav[aria-label="Main navigation"] a:hover,
html[data-theme="dark"] nav[aria-label="Main navigation"] button:hover {
  color: #2DD4BF !important;
}

/* Navbar Dropdown Menus & Mobile Navigation Drawer */
html[data-theme="dark"] nav[aria-label="Main navigation"] .absolute.bg-white {
  background-color: #161E2E !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6) !important;
}
html[data-theme="dark"] nav[aria-label="Main navigation"] .absolute.bg-white a:hover {
  background-color: #1C263B !important;
}
html[data-theme="dark"] nav[aria-label="Main navigation"] .md\:hidden.bg-white {
  background-color: #121824 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* 4.3 Primary Light Surfaces -> Obsidian Surface (#121824) */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-white\/80,
html[data-theme="dark"] .bg-white\/90,
html[data-theme="dark"] .bg-white\/95,
html[data-theme="dark"] .bg-gray-50,
html[data-theme="dark"] .bg-gray-50\/30,
html[data-theme="dark"] .bg-gray-50\/50,
html[data-theme="dark"] .bg-gray-50\/70,
html[data-theme="dark"] .bg-gray-50\/80,
html[data-theme="dark"] .bg-gray-50\/90,
html[data-theme="dark"] .bg-slate-50,
html[data-theme="dark"] .bg-slate-50\/50,
html[data-theme="dark"] .bg-slate-50\/70,
html[data-theme="dark"] .bg-slate-50\/80,
html[data-theme="dark"] .bg-gray-100,
html[data-theme="dark"] .bg-slate-100,
html[data-theme="dark"] .glass-modern,
html[data-theme="dark"] .glass-white,
html[data-theme="dark"] .nw-section,
html[data-theme="dark"] .nw-card,
html[data-theme="dark"] .nw-review-card,
html[data-theme="dark"] .nw-specs-bar,
html[data-theme="dark"] .nw-btn-review,
html[data-theme="dark"] .nova-card,
html[data-theme="dark"] .nova-card-flat,
html[data-theme="dark"] .nova-bento-tile,
html[data-theme="dark"] .nova-accordion,
html[data-theme="dark"] .nova-accordion-header,
html[data-theme="dark"] .nova-pill:not(.active):not(.nova-pill-active),
html[data-theme="dark"] .nova-coupon,
html[data-theme="dark"] .nova-mobile-cta,
html[data-theme="dark"] body.nerdwallet-theme .step-card,
html[data-theme="dark"] .step-card,
html[data-theme="dark"] .cat-card,
html[data-theme="dark"] .stack-card,
html[data-theme="dark"] body.nerdwallet-theme .accordion-item,
html[data-theme="dark"] body.nerdwallet-theme .faq-item,
html[data-theme="dark"] body.nerdwallet-theme .accordion-header,
html[data-theme="dark"] body.nerdwallet-theme .faq-header,
html[data-theme="dark"] body.nerdwallet-theme .toc-sidebar,
html[data-theme="dark"] body.nerdwallet-theme .card-showcase,
html[data-theme="dark"] body.nerdwallet-theme .cs-card-module,
html[data-theme="dark"] body.nerdwallet-theme .showcase-benefit,
html[data-theme="dark"] body.nerdwallet-theme .showcase-stat,
html[data-theme="dark"] body.nerdwallet-theme .verdict-card,
html[data-theme="dark"] body.nerdwallet-theme .final-verdict,
html[data-theme="dark"] body.nerdwallet-theme .info-box,
html[data-theme="dark"] body.nerdwallet-theme .dashboard-stat-card,
html[data-theme="dark"] body.nerdwallet-theme #calculator,
html[data-theme="dark"] body.nerdwallet-theme #calculator .bg-gradient-to-br.from-gray-50.to-gray-100,
html[data-theme="dark"] .chapter-section {
  background-image: none !important;
  background-color: #121824 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #CBD5E1 !important;
}

/* 4.4 Nested Cards & Inner Surfaces -> Elevated Obsidian (#161E2E) */
html[data-theme="dark"] .bg-white .bg-white,
html[data-theme="dark"] .bg-white .bg-gray-50,
html[data-theme="dark"] .bg-white .bg-gray-50\/50,
html[data-theme="dark"] .bg-white .bg-gray-50\/80,
html[data-theme="dark"] .bg-white .bg-slate-50,
html[data-theme="dark"] .bg-white .bg-gray-100,
html[data-theme="dark"] .bg-white .bg-slate-100,
html[data-theme="dark"] .chapter-section .bg-white,
html[data-theme="dark"] .chapter-section .bg-gray-50,
html[data-theme="dark"] .chapter-section .bg-slate-50,
html[data-theme="dark"] .nw-review-card .nw-specs-bar,
html[data-theme="dark"] .calc-workbench .calc-ledger,
html[data-theme="dark"] .decision-card,
html[data-theme="dark"] .metric-ribbon,
html[data-theme="dark"] .sovereign-score-box,
html[data-theme="dark"] .tier-item {
  background-color: #161E2E !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* 4.5 NerdWallet Hero Sections & Gradient Neutralization Override in Dark Mode */
html[data-theme="dark"] body.nerdwallet-theme .hero-gradient,
html[data-theme="dark"] body.nerdwallet-theme .min-h-screen > .bg-gradient-to-r,
html[data-theme="dark"] body.nerdwallet-theme section[class*="bg-gradient-to-r"],
html[data-theme="dark"] body.nerdwallet-theme section[class*="bg-gradient-to-br"],
html[data-theme="dark"] body.nerdwallet-theme .compare-hero,
html[data-theme="dark"] body.nerdwallet-theme .from-slate-900.via-indigo-950.to-purple-950,
html[data-theme="dark"] body.nerdwallet-theme .from-emerald-600.via-teal-600.to-cyan-600,
html[data-theme="dark"] body.nerdwallet-theme .from-purple-600.via-violet-600.to-indigo-600,
html[data-theme="dark"] body.nerdwallet-theme .from-orange-900.via-red-900.to-slate-900,
html[data-theme="dark"] body.nerdwallet-theme .from-emerald-900.via-teal-900.to-slate-900,
html[data-theme="dark"] body.nerdwallet-theme .from-indigo-900.via-purple-900.to-slate-900,
html[data-theme="dark"] body.nerdwallet-theme .from-green-900.via-emerald-800.to-teal-900,
html[data-theme="dark"] body.nerdwallet-theme .from-slate-900.via-primary-900.to-indigo-900,
html[data-theme="dark"] body.nerdwallet-theme .from-primary-600.via-indigo-600.to-purple-600,
html[data-theme="dark"] body.nerdwallet-theme .from-rose-600.via-pink-700.to-purple-800 {
  background: linear-gradient(135deg, #0B0F17 0%, #121824 55%, #161E2E 100%) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #F1F5F9 !important;
}

html[data-theme="dark"] body.nerdwallet-theme .hero-gradient .glass-card,
html[data-theme="dark"] body.nerdwallet-theme .hero-gradient .stat-card,
html[data-theme="dark"] body.nerdwallet-theme .from-slate-900.via-primary-900.to-indigo-900 .tip.glass,
html[data-theme="dark"] body.nerdwallet-theme .from-slate-900.via-primary-900.to-indigo-900 a.glass {
  background: #161E2E !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #F1F5F9 !important;
}

/* 4.6 Light Tailwind Gradients -> Dark Surface / Semantic Tints */
html[data-theme="dark"] [class*="from-white"]:not(.bg-clip-text),
html[data-theme="dark"] [class*="via-white"]:not(.bg-clip-text),
html[data-theme="dark"] [class*="to-white"]:not(.bg-clip-text),
html[data-theme="dark"] [class*="from-gray-50"]:not(.bg-clip-text),
html[data-theme="dark"] [class*="from-gray-100"]:not(.bg-clip-text),
html[data-theme="dark"] [class*="from-slate-50"]:not(.bg-clip-text),
html[data-theme="dark"] [class*="from-slate-100"]:not(.bg-clip-text),
html[data-theme="dark"] [class*="to-gray-50"]:not(.bg-clip-text),
html[data-theme="dark"] [class*="to-gray-100"]:not(.bg-clip-text),
html[data-theme="dark"] [class*="to-slate-50"]:not(.bg-clip-text) {
  background-image: none !important;
  background-color: #121824 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] [class*="from-blue-50"]:not(.bg-clip-text),
html[data-theme="dark"] [class*="from-blue-100"]:not(.bg-clip-text),
html[data-theme="dark"] [class*="from-indigo-50"]:not(.bg-clip-text),
html[data-theme="dark"] [class*="from-indigo-100"]:not(.bg-clip-text),
html[data-theme="dark"] [class*="from-primary-50"]:not(.bg-clip-text),
html[data-theme="dark"] [class*="from-primary-100"]:not(.bg-clip-text),
html[data-theme="dark"] [class*="from-cyan-50"]:not(.bg-clip-text),
html[data-theme="dark"] [class*="from-cyan-100"]:not(.bg-clip-text),
html[data-theme="dark"] [class*="from-sky-50"]:not(.bg-clip-text) {
  background-image: none !important;
  background-color: rgba(59, 130, 246, 0.12) !important;
  border-color: rgba(96, 165, 250, 0.25) !important;
}

html[data-theme="dark"] [class*="from-emerald-50"]:not(.bg-clip-text),
html[data-theme="dark"] [class*="from-emerald-100"]:not(.bg-clip-text),
html[data-theme="dark"] [class*="from-green-50"]:not(.bg-clip-text),
html[data-theme="dark"] [class*="from-green-100"]:not(.bg-clip-text),
html[data-theme="dark"] [class*="from-teal-50"]:not(.bg-clip-text),
html[data-theme="dark"] [class*="from-teal-100"]:not(.bg-clip-text) {
  background-image: none !important;
  background-color: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(52, 211, 153, 0.25) !important;
}

html[data-theme="dark"] [class*="from-amber-50"]:not(.bg-clip-text),
html[data-theme="dark"] [class*="from-amber-100"]:not(.bg-clip-text),
html[data-theme="dark"] [class*="from-yellow-50"]:not(.bg-clip-text),
html[data-theme="dark"] [class*="from-orange-50"]:not(.bg-clip-text),
html[data-theme="dark"] [class*="from-orange-100"]:not(.bg-clip-text) {
  background-image: none !important;
  background-color: rgba(251, 191, 36, 0.12) !important;
  border-color: rgba(251, 191, 36, 0.28) !important;
}

html[data-theme="dark"] [class*="from-rose-50"]:not(.bg-clip-text),
html[data-theme="dark"] [class*="from-rose-100"]:not(.bg-clip-text),
html[data-theme="dark"] [class*="from-red-50"]:not(.bg-clip-text) {
  background-image: none !important;
  background-color: rgba(244, 63, 94, 0.12) !important;
  border-color: rgba(251, 113, 133, 0.28) !important;
}

html[data-theme="dark"] [class*="from-purple-50"]:not(.bg-clip-text),
html[data-theme="dark"] [class*="from-purple-100"]:not(.bg-clip-text),
html[data-theme="dark"] [class*="from-violet-50"]:not(.bg-clip-text),
html[data-theme="dark"] [class*="from-violet-100"]:not(.bg-clip-text) {
  background-image: none !important;
  background-color: rgba(167, 139, 250, 0.12) !important;
  border-color: rgba(167, 139, 250, 0.28) !important;
}

/* 4.7 Pastel Background Utilities -> Translucent Obsidian Badges */
html[data-theme="dark"] .bg-emerald-50,
html[data-theme="dark"] .bg-emerald-50\/20,
html[data-theme="dark"] .bg-emerald-50\/30,
html[data-theme="dark"] .bg-emerald-50\/40,
html[data-theme="dark"] .bg-emerald-50\/50,
html[data-theme="dark"] .bg-emerald-50\/70,
html[data-theme="dark"] .bg-emerald-50\/80,
html[data-theme="dark"] .bg-emerald-100,
html[data-theme="dark"] .bg-green-50,
html[data-theme="dark"] .bg-green-100,
html[data-theme="dark"] .bg-teal-50,
html[data-theme="dark"] .bg-teal-100,
html[data-theme="dark"] .bg-accent-50,
html[data-theme="dark"] .bg-accent-100 {
  background-color: rgba(16, 185, 129, 0.14) !important;
  border-color: rgba(52, 211, 153, 0.28) !important;
}

html[data-theme="dark"] .bg-amber-50,
html[data-theme="dark"] .bg-amber-50\/30,
html[data-theme="dark"] .bg-amber-50\/50,
html[data-theme="dark"] .bg-amber-50\/60,
html[data-theme="dark"] .bg-amber-50\/70,
html[data-theme="dark"] .bg-amber-50\/80,
html[data-theme="dark"] .bg-amber-50\/90,
html[data-theme="dark"] .bg-amber-100,
html[data-theme="dark"] .bg-yellow-50,
html[data-theme="dark"] .bg-yellow-100,
html[data-theme="dark"] .bg-orange-50,
html[data-theme="dark"] .bg-orange-50\/30,
html[data-theme="dark"] .bg-orange-100 {
  background-color: rgba(251, 191, 36, 0.14) !important;
  border-color: rgba(251, 191, 36, 0.3) !important;
}

html[data-theme="dark"] .bg-rose-50,
html[data-theme="dark"] .bg-rose-50\/40,
html[data-theme="dark"] .bg-rose-50\/50,
html[data-theme="dark"] .bg-rose-100,
html[data-theme="dark"] .bg-red-50,
html[data-theme="dark"] .bg-red-50\/30,
html[data-theme="dark"] .bg-red-50\/60,
html[data-theme="dark"] .bg-red-100,
html[data-theme="dark"] .bg-pink-100 {
  background-color: rgba(244, 63, 94, 0.14) !important;
  border-color: rgba(251, 113, 133, 0.28) !important;
}

html[data-theme="dark"] .bg-blue-50,
html[data-theme="dark"] .bg-blue-100,
html[data-theme="dark"] .bg-indigo-50,
html[data-theme="dark"] .bg-indigo-50\/70,
html[data-theme="dark"] .bg-indigo-100,
html[data-theme="dark"] .bg-primary-50,
html[data-theme="dark"] .bg-primary-50\/20,
html[data-theme="dark"] .bg-primary-50\/30,
html[data-theme="dark"] .bg-primary-50\/50,
html[data-theme="dark"] .bg-primary-100,
html[data-theme="dark"] .bg-cyan-50,
html[data-theme="dark"] .bg-cyan-50\/40,
html[data-theme="dark"] .bg-cyan-100,
html[data-theme="dark"] .bg-sky-50 {
  background-color: rgba(59, 130, 246, 0.14) !important;
  border-color: rgba(96, 165, 250, 0.28) !important;
}

html[data-theme="dark"] .bg-purple-50,
html[data-theme="dark"] .bg-purple-100,
html[data-theme="dark"] .bg-violet-50,
html[data-theme="dark"] .bg-violet-100 {
  background-color: rgba(167, 139, 250, 0.14) !important;
  border-color: rgba(167, 139, 250, 0.28) !important;
}

html[data-theme="dark"] .bg-gray-200,
html[data-theme="dark"] .bg-gray-300,
html[data-theme="dark"] .bg-slate-200,
html[data-theme="dark"] .bg-slate-300 {
  background-color: rgba(255, 255, 255, 0.12) !important;
}

/* 4.8 Text Color Remapping (Zero Dark-on-Dark Text!) */
html[data-theme="dark"] .text-dark-900,
html[data-theme="dark"] .text-dark-800,
html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-gray-800,
html[data-theme="dark"] .text-slate-950,
html[data-theme="dark"] .text-slate-900,
html[data-theme="dark"] .text-slate-800,
html[data-theme="dark"] .text-brand-900 {
  color: #F1F5F9 !important;
}

html[data-theme="dark"] .text-dark-700,
html[data-theme="dark"] .text-dark-600,
html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] .text-slate-700,
html[data-theme="dark"] .text-slate-600,
html[data-theme="dark"] .blog-content,
html[data-theme="dark"] .deal-description,
html[data-theme="dark"] .deal-description p,
html[data-theme="dark"] .deal-description li {
  color: #CBD5E1 !important;
}

html[data-theme="dark"] .text-dark-500,
html[data-theme="dark"] .text-dark-400,
html[data-theme="dark"] .text-dark-300,
html[data-theme="dark"] .text-gray-500,
html[data-theme="dark"] .text-gray-400,
html[data-theme="dark"] .text-slate-500,
html[data-theme="dark"] .text-slate-400 {
  color: #94A3B8 !important;
}

/* Semantic Text Colors in Obsidian Mode */
html[data-theme="dark"] .text-emerald-600,
html[data-theme="dark"] .text-emerald-700,
html[data-theme="dark"] .text-emerald-800,
html[data-theme="dark"] .text-emerald-900,
html[data-theme="dark"] .text-emerald-950,
html[data-theme="dark"] .text-green-600,
html[data-theme="dark"] .text-green-700,
html[data-theme="dark"] .text-green-800,
html[data-theme="dark"] .text-teal-600,
html[data-theme="dark"] .text-teal-700,
html[data-theme="dark"] .text-teal-800,
html[data-theme="dark"] .text-accent-600,
html[data-theme="dark"] .text-accent-700 {
  color: #34D399 !important;
}

html[data-theme="dark"] .text-amber-600,
html[data-theme="dark"] .text-amber-700,
html[data-theme="dark"] .text-amber-800,
html[data-theme="dark"] .text-amber-900,
html[data-theme="dark"] .text-amber-950,
html[data-theme="dark"] .text-yellow-600,
html[data-theme="dark"] .text-yellow-700,
html[data-theme="dark"] .text-yellow-800,
html[data-theme="dark"] .text-orange-600,
html[data-theme="dark"] .text-orange-700,
html[data-theme="dark"] .text-orange-800 {
  color: #FBBF24 !important;
}

html[data-theme="dark"] .text-rose-600,
html[data-theme="dark"] .text-rose-700,
html[data-theme="dark"] .text-rose-800,
html[data-theme="dark"] .text-rose-900,
html[data-theme="dark"] .text-red-600,
html[data-theme="dark"] .text-red-700,
html[data-theme="dark"] .text-red-800,
html[data-theme="dark"] .text-red-900,
html[data-theme="dark"] .text-pink-600 {
  color: #FB7185 !important;
}

html[data-theme="dark"] .text-primary-600,
html[data-theme="dark"] .text-primary-700,
html[data-theme="dark"] .text-primary-800,
html[data-theme="dark"] .text-primary-900,
html[data-theme="dark"] .text-blue-600,
html[data-theme="dark"] .text-blue-700,
html[data-theme="dark"] .text-blue-800,
html[data-theme="dark"] .text-blue-900,
html[data-theme="dark"] .text-blue-950,
html[data-theme="dark"] .text-indigo-600,
html[data-theme="dark"] .text-indigo-700,
html[data-theme="dark"] .text-indigo-800,
html[data-theme="dark"] .text-indigo-900,
html[data-theme="dark"] .text-indigo-950,
html[data-theme="dark"] .text-cyan-600,
html[data-theme="dark"] .text-cyan-700,
html[data-theme="dark"] .text-cyan-800,
html[data-theme="dark"] .text-cyan-900,
html[data-theme="dark"] .text-cyan-950,
html[data-theme="dark"] .text-sky-600,
html[data-theme="dark"] .text-sky-700,
html[data-theme="dark"] .text-sky-800,
html[data-theme="dark"] .text-sky-900 {
  color: #60A5FA !important;
}

html[data-theme="dark"] .text-purple-600,
html[data-theme="dark"] .text-purple-700,
html[data-theme="dark"] .text-purple-800,
html[data-theme="dark"] .text-purple-900,
html[data-theme="dark"] .text-violet-600,
html[data-theme="dark"] .text-violet-700,
html[data-theme="dark"] .text-violet-800,
html[data-theme="dark"] .text-violet-900 {
  color: #C4B5FD !important;
}

/* 4.9 Tables, Headers, Rows & Borders */
html[data-theme="dark"] table,
html[data-theme="dark"] body.nerdwallet-theme table,
html[data-theme="dark"] body.nova-theme table {
  background-color: #121824 !important;
  color: #CBD5E1 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] thead,
html[data-theme="dark"] thead th,
html[data-theme="dark"] th,
html[data-theme="dark"] body.nerdwallet-theme thead th,
html[data-theme="dark"] body.nova-theme .nova-table th,
html[data-theme="dark"] body.nova-theme .blog-content table th {
  background-color: #161E2E !important;
  color: #94A3B8 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="dark"] tbody,
html[data-theme="dark"] tr,
html[data-theme="dark"] td,
html[data-theme="dark"] body.nerdwallet-theme tbody td,
html[data-theme="dark"] body.nova-theme .nova-table td,
html[data-theme="dark"] body.nova-theme .blog-content table td {
  background-color: #121824 !important;
  color: #CBD5E1 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] tbody tr:hover td,
html[data-theme="dark"] body.nerdwallet-theme tbody tr:hover td,
html[data-theme="dark"] .compare-row:hover {
  background-color: #1C263B !important;
}

html[data-theme="dark"] td strong,
html[data-theme="dark"] td b,
html[data-theme="dark"] th strong,
html[data-theme="dark"] .blog-content strong,
html[data-theme="dark"] .deal-description strong {
  color: #F1F5F9 !important;
}

html[data-theme="dark"] .blog-content blockquote {
  background: #161E2E !important;
  color: #E2E8F0 !important;
}

/* 4.10 Form Controls (Inputs, Selects, Textareas, Sliders) */
html[data-theme="dark"] input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .input-modern,
html[data-theme="dark"] .nova-input,
html[data-theme="dark"] body.nerdwallet-theme input[type="text"],
html[data-theme="dark"] body.nerdwallet-theme input[type="number"],
html[data-theme="dark"] body.nerdwallet-theme input[type="email"],
html[data-theme="dark"] body.nerdwallet-theme input[type="password"],
html[data-theme="dark"] body.nerdwallet-theme select,
html[data-theme="dark"] body.nerdwallet-theme textarea {
  background-color: #161E2E !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #F1F5F9 !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #64748B !important;
}

html[data-theme="dark"] input[type="range"],
html[data-theme="dark"] body.nerdwallet-theme input[type="range"] {
  background: rgba(255, 255, 255, 0.16) !important;
}

/* Pagination in Dark Mode */
html[data-theme="dark"] body.nerdwallet-theme nav[role="navigation"] a,
html[data-theme="dark"] body.nerdwallet-theme nav[role="navigation"] span {
  background: #121824 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #CBD5E1 !important;
}

/* 4.11 Universal Hairline Borders & Dividers in Dark Mode */
html[data-theme="dark"] .border-gray-50,
html[data-theme="dark"] .border-gray-100,
html[data-theme="dark"] .border-gray-100\/50,
html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] .border-gray-200\/60,
html[data-theme="dark"] .border-gray-200\/80,
html[data-theme="dark"] .border-gray-200\/90,
html[data-theme="dark"] .border-gray-300,
html[data-theme="dark"] .border-slate-50,
html[data-theme="dark"] .border-slate-100,
html[data-theme="dark"] .border-slate-200,
html[data-theme="dark"] .border-slate-200\/70,
html[data-theme="dark"] .border-slate-200\/80,
html[data-theme="dark"] .border-slate-200\/90,
html[data-theme="dark"] .border-slate-300,
html[data-theme="dark"] .border-primary-100,
html[data-theme="dark"] .border-primary-200,
html[data-theme="dark"] .border-blue-100,
html[data-theme="dark"] .border-blue-200,
html[data-theme="dark"] .border-indigo-100,
html[data-theme="dark"] .border-indigo-200,
html[data-theme="dark"] .border-emerald-100,
html[data-theme="dark"] .border-emerald-200,
html[data-theme="dark"] .border-green-100,
html[data-theme="dark"] .border-green-200,
html[data-theme="dark"] .border-teal-100,
html[data-theme="dark"] .border-teal-200,
html[data-theme="dark"] .border-amber-100,
html[data-theme="dark"] .border-amber-200,
html[data-theme="dark"] .border-orange-100,
html[data-theme="dark"] .border-orange-200,
html[data-theme="dark"] .border-rose-100,
html[data-theme="dark"] .border-rose-200,
html[data-theme="dark"] .border-red-100,
html[data-theme="dark"] .border-red-200,
html[data-theme="dark"] .border-purple-100,
html[data-theme="dark"] .border-purple-200,
html[data-theme="dark"] .border-cyan-100,
html[data-theme="dark"] .divide-gray-50 > * + *,
html[data-theme="dark"] .divide-gray-100 > * + *,
html[data-theme="dark"] .divide-gray-200 > * + *,
html[data-theme="dark"] .divide-y > * + *,
html[data-theme="dark"] hr {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Hover States on Light Surfaces in Dark Mode */
html[data-theme="dark"] .hover\:bg-gray-50:hover,
html[data-theme="dark"] .hover\:bg-gray-100:hover,
html[data-theme="dark"] .hover\:bg-gray-200:hover,
html[data-theme="dark"] .hover\:bg-slate-50:hover,
html[data-theme="dark"] .hover\:bg-slate-100:hover {
  background-color: #1C263B !important;
}

/* Dark Mode Scrollbars */
html[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #0B0F17;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #1E293B;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #334155;
}
/* ==========================================================================
   CardSahayak — Website-Wide Swiss Obsidian Dark Mode Stylesheet
   Target: All Non-Blog Pages, Credit Cards, Compare, Insider, Deals, Banks,
           Lounges, Static Pages, Shared Components & 7 Smart Tools
   ========================================================================== */

html[data-theme="dark"] {
    color-scheme: dark;

    /* Swiss Obsidian Core Tokens */
    --bg-canvas: #090B0F;
    --bg-surface: #11151E;
    --bg-surface-hover: #171D29;
    --bg-elevated: #151B27;
    --bg-glass: rgba(17, 21, 30, 0.94);

    --ink-heading: #F1F5F9;
    --ink-body: #CBD5E1;
    --ink-secondary: #94A3B8;
    --ink-muted: #64748B;

    --border-hairline: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);

    --accent-brand: #2DD4BF;
    --accent-brand-hover: #14B8A6;
    --accent-brand-soft: rgba(45, 212, 191, 0.12);
    --accent-gold: #FBBF24;
    --accent-gold-soft: rgba(251, 191, 36, 0.14);

    --pos-bg: rgba(16, 185, 129, 0.10);
    --pos-border: rgba(16, 185, 129, 0.25);
    --pos-ink: #34D399;

    --neg-bg: rgba(244, 63, 94, 0.10);
    --neg-border: rgba(244, 63, 94, 0.25);
    --neg-ink: #FB7185;

    --warn-bg: rgba(245, 158, 11, 0.10);
    --warn-border: rgba(245, 158, 11, 0.25);
    --warn-ink: #FBBF24;

    --info-bg: rgba(59, 130, 246, 0.10);
    --info-border: rgba(59, 130, 246, 0.25);
    --info-ink: #60A5FA;

    /* Remap NerdWallet Theme Variables for Dark Mode */
    --nw-emerald: #2DD4BF;
    --nw-emerald-hover: #14B8A6;
    --nw-emerald-light: rgba(45, 212, 191, 0.12);
    --nw-emerald-subtle: rgba(45, 212, 191, 0.18);
    --nw-emerald-border: rgba(45, 212, 191, 0.28);

    --nw-slate-950: #FFFFFF;
    --nw-slate-900: #F1F5F9;
    --nw-slate-800: #E2E8F0;
    --nw-slate-700: #CBD5E1;
    --nw-slate-600: #94A3B8;
    --nw-slate-500: #94A3B8;
    --nw-slate-400: #64748B;
    --nw-slate-200: rgba(255, 255, 255, 0.09);
    --nw-slate-100: #151B27;
    --nw-slate-50: #090B0F;

    --nw-gold: #FBBF24;
    --nw-gold-light: rgba(251, 191, 36, 0.14);
    --nw-rose: #FB7185;
    --nw-rose-light: rgba(244, 63, 94, 0.14);
    --nw-blue: #60A5FA;
    --nw-blue-light: rgba(59, 130, 246, 0.14);

    --nw-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
    --nw-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45);
    --nw-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.55);
    --nw-shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.65);

    /* Remap Nova Theme Variables for Dark Mode */
    --nova-bg: #090B0F;
    --nova-surface: #11151E;
    --nova-surface-subtle: #151B27;
    --nova-surface-muted: #171D29;
    --nova-ink: #F1F5F9;
    --nova-ink-secondary: #CBD5E1;
    --nova-ink-muted: #94A3B8;
    --nova-ink-faint: #64748B;
    --nova-primary: #60A5FA;
    --nova-primary-hover: #3B82F6;
    --nova-primary-soft: rgba(59, 130, 246, 0.14);
    --nova-primary-border: rgba(59, 130, 246, 0.28);
    --nova-emerald: #34D399;
    --nova-emerald-soft: rgba(16, 185, 129, 0.14);
    --nova-amber: #FBBF24;
    --nova-amber-soft: rgba(245, 158, 11, 0.14);
    --nova-rose: #FB7185;
    --nova-rose-soft: rgba(244, 63, 94, 0.14);
    --nova-border: rgba(255, 255, 255, 0.08);
    --nova-border-strong: rgba(255, 255, 255, 0.16);
}

/* ==========================================================================
   1. GLOBAL DOCUMENT, BODY & MAIN CANVAS
   ========================================================================== */
html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] body.nerdwallet-theme,
html[data-theme="dark"] body.nova-theme,
html[data-theme="dark"] main {
    background-color: var(--bg-canvas) !important;
    color: var(--ink-body) !important;
}

html[data-theme="dark"] body.nerdwallet-theme h1,
html[data-theme="dark"] body.nerdwallet-theme h2,
html[data-theme="dark"] body.nerdwallet-theme h3,
html[data-theme="dark"] body.nerdwallet-theme h4,
html[data-theme="dark"] body.nova-theme h1,
html[data-theme="dark"] body.nova-theme h2,
html[data-theme="dark"] body.nova-theme h3,
html[data-theme="dark"] body.nova-theme h4,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
    color: var(--ink-heading) !important;
}

html[data-theme="dark"] body.nerdwallet-theme p,
html[data-theme="dark"] body.nova-theme p {
    color: var(--ink-body) !important;
}

/* ==========================================================================
   2. NAVIGATION, STICKY BARS, FOOTER & MOBILE DRAWERS
   ========================================================================== */
html[data-theme="dark"] header,
html[data-theme="dark"] header.sticky,
html[data-theme="dark"] .sticky-header,
html[data-theme="dark"] .sticky-nav,
html[data-theme="dark"] .glass-white,
html[data-theme="dark"] .mobile-bottom-cta {
    background: var(--bg-glass) !important;
    background-color: var(--bg-surface) !important;
    border-color: var(--border-hairline) !important;
    color: var(--ink-heading) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

html[data-theme="dark"] footer {
    background-color: #06080C !important;
    border-top: 1px solid var(--border-hairline) !important;
    color: var(--ink-secondary) !important;
}

/* Pagination */
html[data-theme="dark"] body.nerdwallet-theme nav[role="navigation"] a,
html[data-theme="dark"] body.nerdwallet-theme nav[role="navigation"] span,
html[data-theme="dark"] nav[role="navigation"] a,
html[data-theme="dark"] nav[role="navigation"] span {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-strong) !important;
    color: var(--ink-body) !important;
}

html[data-theme="dark"] body.nerdwallet-theme nav[role="navigation"] span[aria-current="page"] span,
html[data-theme="dark"] nav[role="navigation"] span[aria-current="page"] span {
    background-color: var(--accent-brand) !important;
    color: #090B0F !important;
    border-color: var(--accent-brand) !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   3. HERO SECTIONS & HIGH-IMPACT BANNERS (Override nerdwallet-theme #FFFFFF)
   ========================================================================== */
html[data-theme="dark"] body.nerdwallet-theme .min-h-screen > .bg-gradient-to-r,
html[data-theme="dark"] body.nerdwallet-theme section[class*="bg-gradient-to-r"],
html[data-theme="dark"] body.nerdwallet-theme section[class*="bg-gradient-to-br"],
html[data-theme="dark"] body.nerdwallet-theme .compare-hero,
html[data-theme="dark"] body.nerdwallet-theme .from-slate-900.via-indigo-950.to-purple-950,
html[data-theme="dark"] body.nerdwallet-theme .from-emerald-600.via-teal-600.to-cyan-700,
html[data-theme="dark"] body.nerdwallet-theme .from-emerald-600.via-teal-600.to-cyan-600,
html[data-theme="dark"] body.nerdwallet-theme .from-violet-600.via-purple-600.to-indigo-700,
html[data-theme="dark"] body.nerdwallet-theme .from-amber-500.via-orange-500.to-red-500,
html[data-theme="dark"] body.nerdwallet-theme .from-blue-600.via-indigo-600.to-purple-700,
html[data-theme="dark"] body.nerdwallet-theme .from-purple-600.via-violet-600.to-indigo-600,
html[data-theme="dark"] body.nerdwallet-theme .from-slate-900.via-primary-900.to-indigo-900,
html[data-theme="dark"] body.nerdwallet-theme .from-primary-600.via-indigo-600.to-purple-600,
html[data-theme="dark"] body.nerdwallet-theme .from-rose-600.via-pink-700.to-purple-800,
html[data-theme="dark"] .compare-hero,
html[data-theme="dark"] .from-slate-900.via-indigo-950.to-purple-950,
html[data-theme="dark"] .from-emerald-600.via-teal-600.to-cyan-700,
html[data-theme="dark"] .from-emerald-600.via-teal-600.to-cyan-600,
html[data-theme="dark"] .from-violet-600.via-purple-600.to-indigo-700,
html[data-theme="dark"] .from-amber-500.via-orange-500.to-red-500,
html[data-theme="dark"] .from-blue-600.via-indigo-600.to-purple-700,
html[data-theme="dark"] .from-purple-600.via-violet-600.to-indigo-600,
html[data-theme="dark"] .from-slate-900.via-primary-900.to-indigo-900,
html[data-theme="dark"] .from-primary-600.via-indigo-600.to-purple-600,
html[data-theme="dark"] .from-rose-600.via-pink-700.to-purple-800,
html[data-theme="dark"] .from-slate-900.via-emerald-950.to-slate-950,
html[data-theme="dark"] .from-slate-900.via-slate-800.to-indigo-950 {
    background: linear-gradient(135deg, #090B0F 0%, #11151E 55%, #151C2C 100%) !important;
    border-bottom: 1px solid var(--border-hairline) !important;
    color: var(--ink-heading) !important;
}

/* Deep Obsidian Emerald Card for EMI Calculator & Lounge Spend Banner */
html[data-theme="dark"] .from-emerald-600.to-teal-700,
html[data-theme="dark"] .from-emerald-800.to-teal-900 {
    background: linear-gradient(135deg, #06372A 0%, #0D1F1E 55%, #11151E 100%) !important;
    border: 1px solid rgba(45, 212, 191, 0.28) !important;
    color: #F1F5F9 !important;
}

html[data-theme="dark"] .from-emerald-600.to-teal-700 .text-white\/60,
html[data-theme="dark"] .from-emerald-600.to-teal-700 .text-white\/80 {
    color: #CBD5E1 !important;
}

/* Restore light typography inside Hero Sections that nerdwallet-theme forced dark */
html[data-theme="dark"] body.nerdwallet-theme .from-slate-900.via-indigo-950.to-purple-950 h1,
html[data-theme="dark"] body.nerdwallet-theme .from-emerald-600.via-teal-600.to-cyan-700 h1,
html[data-theme="dark"] body.nerdwallet-theme .from-violet-600.via-purple-600.to-indigo-700 h1,
html[data-theme="dark"] body.nerdwallet-theme .from-amber-500.via-orange-500.to-red-500 h1,
html[data-theme="dark"] body.nerdwallet-theme .from-blue-600.via-indigo-600.to-purple-700 h1,
html[data-theme="dark"] body.nerdwallet-theme .from-purple-600.via-violet-600.to-indigo-600 h1,
html[data-theme="dark"] body.nerdwallet-theme .from-slate-900.via-primary-900.to-indigo-900 h1,
html[data-theme="dark"] body.nerdwallet-theme .from-rose-600.via-pink-700.to-purple-800 h1,
html[data-theme="dark"] body.nerdwallet-theme section[class*="bg-gradient-to-"] h1,
html[data-theme="dark"] body.nerdwallet-theme .compare-hero h1 {
    color: var(--ink-heading) !important;
}

html[data-theme="dark"] body.nerdwallet-theme .from-slate-900.via-indigo-950.to-purple-950 p,
html[data-theme="dark"] body.nerdwallet-theme .from-emerald-600.via-teal-600.to-cyan-700 p,
html[data-theme="dark"] body.nerdwallet-theme .from-violet-600.via-purple-600.to-indigo-700 p,
html[data-theme="dark"] body.nerdwallet-theme .from-amber-500.via-orange-500.to-red-500 p,
html[data-theme="dark"] body.nerdwallet-theme .from-blue-600.via-indigo-600.to-purple-700 p,
html[data-theme="dark"] body.nerdwallet-theme .from-purple-600.via-violet-600.to-indigo-600 p,
html[data-theme="dark"] body.nerdwallet-theme .from-slate-900.via-primary-900.to-indigo-900 p,
html[data-theme="dark"] body.nerdwallet-theme .from-rose-600.via-pink-700.to-purple-800 p,
html[data-theme="dark"] body.nerdwallet-theme section[class*="bg-gradient-to-"] p,
html[data-theme="dark"] body.nerdwallet-theme .compare-hero p,
html[data-theme="dark"] body.nerdwallet-theme .from-slate-900.via-primary-900.to-indigo-900 .text-white\/60,
html[data-theme="dark"] body.nerdwallet-theme .from-slate-900.via-primary-900.to-indigo-900 .text-white\/50,
html[data-theme="dark"] body.nerdwallet-theme .from-slate-900.via-primary-900.to-indigo-900 .text-white\/70,
html[data-theme="dark"] body.nerdwallet-theme .from-slate-900.via-primary-900.to-indigo-900 .text-white\/80,
html[data-theme="dark"] body.nerdwallet-theme .from-primary-600.via-indigo-600.to-purple-600 .text-white,
html[data-theme="dark"] body.nerdwallet-theme .from-primary-600.via-indigo-600.to-purple-600 .text-white\/60,
html[data-theme="dark"] body.nerdwallet-theme .from-rose-600.via-pink-700.to-purple-800 .text-pink-100,
html[data-theme="dark"] body.nerdwallet-theme .from-rose-600.via-pink-700.to-purple-800 .text-pink-200 {
    color: var(--ink-body) !important;
}

html[data-theme="dark"] body.nerdwallet-theme .from-slate-900.via-primary-900.to-indigo-900 .tip.glass,
html[data-theme="dark"] .tip.glass,
html[data-theme="dark"] .glass {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--ink-heading) !important;
}

html[data-theme="dark"] body.nerdwallet-theme .from-slate-900.via-primary-900.to-indigo-900 a.glass {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--ink-heading) !important;
}

/* ==========================================================================
   4. NERDWALLET & NOVA THEME COMPONENTS (Homepage, Cards, Reviews)
   ========================================================================== */
html[data-theme="dark"] body.nerdwallet-theme .nw-hero,
html[data-theme="dark"] .nw-hero {
    background: linear-gradient(180deg, #090B0F 0%, #11151E 100%) !important;
    border-bottom: 1px solid var(--border-hairline) !important;
}

html[data-theme="dark"] body.nerdwallet-theme .nw-trust-pill,
html[data-theme="dark"] .nw-trust-pill {
    background: var(--accent-brand-soft) !important;
    border-color: rgba(45, 212, 191, 0.28) !important;
    color: var(--accent-brand) !important;
}

html[data-theme="dark"] body.nerdwallet-theme .nw-cat-tile,
html[data-theme="dark"] .nw-cat-tile {
    background: var(--bg-surface) !important;
    border-color: var(--border-hairline) !important;
    color: var(--ink-heading) !important;
}

html[data-theme="dark"] body.nerdwallet-theme .nw-cat-tile:hover,
html[data-theme="dark"] .nw-cat-tile:hover {
    background: var(--bg-surface-hover) !important;
    border-color: var(--accent-brand) !important;
}

html[data-theme="dark"] body.nerdwallet-theme .nw-cat-icon,
html[data-theme="dark"] .nw-cat-icon {
    background: var(--bg-elevated) !important;
    color: var(--accent-brand) !important;
}

html[data-theme="dark"] body.nerdwallet-theme .nw-cat-label,
html[data-theme="dark"] .nw-cat-label {
    color: var(--ink-heading) !important;
}

html[data-theme="dark"] body.nerdwallet-theme .nw-cat-sub,
html[data-theme="dark"] .nw-cat-sub {
    color: var(--ink-secondary) !important;
}

html[data-theme="dark"] body.nerdwallet-theme .nw-filter-pill,
html[data-theme="dark"] .nw-filter-pill {
    background: var(--bg-surface) !important;
    border-color: var(--border-strong) !important;
    color: var(--ink-body) !important;
}

html[data-theme="dark"] body.nerdwallet-theme .nw-filter-pill:hover,
html[data-theme="dark"] .nw-filter-pill:hover {
    background: var(--bg-surface-hover) !important;
    border-color: var(--accent-brand) !important;
    color: var(--accent-brand) !important;
}

html[data-theme="dark"] body.nerdwallet-theme .nw-filter-pill.active,
html[data-theme="dark"] .nw-filter-pill.active {
    background: var(--accent-brand) !important;
    border-color: var(--accent-brand) !important;
    color: #090B0F !important;
}

/* NW Review Card (`components/card-item.blade.php` & Homepage) */
html[data-theme="dark"] body.nerdwallet-theme .nw-review-card,
html[data-theme="dark"] .nw-review-card {
    background: var(--bg-surface) !important;
    border-color: var(--border-hairline) !important;
    box-shadow: var(--nw-shadow-sm) !important;
}

html[data-theme="dark"] body.nerdwallet-theme .nw-review-card:hover,
html[data-theme="dark"] .nw-review-card:hover {
    border-color: var(--border-strong) !important;
    box-shadow: var(--nw-shadow-md) !important;
}

html[data-theme="dark"] body.nerdwallet-theme .nw-card-ribbon,
html[data-theme="dark"] .nw-card-ribbon {
    background: rgba(45, 212, 191, 0.08) !important;
    border-bottom-color: rgba(45, 212, 191, 0.2) !important;
}

html[data-theme="dark"] body.nerdwallet-theme .nw-ribbon-tag,
html[data-theme="dark"] .nw-ribbon-tag {
    color: var(--accent-brand) !important;
}

html[data-theme="dark"] body.nerdwallet-theme .nw-rating-num,
html[data-theme="dark"] .nw-rating-num,
html[data-theme="dark"] body.nerdwallet-theme .nw-card-title,
html[data-theme="dark"] .nw-card-title,
html[data-theme="dark"] body.nerdwallet-theme .nw-card-title a,
html[data-theme="dark"] .nw-card-title a,
html[data-theme="dark"] body.nerdwallet-theme .nw-spec-value,
html[data-theme="dark"] .nw-spec-value {
    color: var(--ink-heading) !important;
}

html[data-theme="dark"] body.nerdwallet-theme .nw-spec-value.highlight,
html[data-theme="dark"] .nw-spec-value.highlight {
    color: var(--accent-brand) !important;
}

html[data-theme="dark"] body.nerdwallet-theme .nw-specs-bar,
html[data-theme="dark"] .nw-specs-bar {
    background: var(--bg-elevated) !important;
    border-color: var(--border-hairline) !important;
}

html[data-theme="dark"] body.nerdwallet-theme .nw-spec-cell,
html[data-theme="dark"] .nw-spec-cell {
    border-right-color: var(--border-hairline) !important;
}

html[data-theme="dark"] body.nerdwallet-theme .nw-btn-apply,
html[data-theme="dark"] .nw-btn-apply {
    background: var(--accent-brand) !important;
    color: #090B0F !important;
    font-weight: 700 !important;
}

html[data-theme="dark"] body.nerdwallet-theme .nw-btn-apply:hover,
html[data-theme="dark"] .nw-btn-apply:hover {
    background: var(--accent-brand-hover) !important;
    color: #090B0F !important;
}

html[data-theme="dark"] body.nerdwallet-theme .nw-btn-review,
html[data-theme="dark"] .nw-btn-review {
    background: var(--bg-elevated) !important;
    border-color: var(--border-strong) !important;
    color: var(--ink-heading) !important;
}

html[data-theme="dark"] body.nerdwallet-theme .nw-btn-review:hover,
html[data-theme="dark"] .nw-btn-review:hover {
    background: var(--bg-surface-hover) !important;
    border-color: var(--accent-brand) !important;
    color: var(--accent-brand) !important;
}

html[data-theme="dark"] body.nerdwallet-theme .nw-pros-cons-toggle,
html[data-theme="dark"] .nw-pros-cons-toggle {
    border-top-color: var(--border-hairline) !important;
}

html[data-theme="dark"] body.nerdwallet-theme .nw-pros-cons-grid,
html[data-theme="dark"] .nw-pros-cons-grid {
    background: var(--bg-elevated) !important;
    border-color: var(--border-hairline) !important;
}

html[data-theme="dark"] body.nerdwallet-theme .nw-tool-card,
html[data-theme="dark"] .nw-tool-card,
html[data-theme="dark"] body.nerdwallet-theme .nw-guide-card,
html[data-theme="dark"] .nw-guide-card {
    background: var(--bg-surface) !important;
    border-color: var(--border-hairline) !important;
    color: var(--ink-body) !important;
}

html[data-theme="dark"] body.nerdwallet-theme .nw-tool-card:hover,
html[data-theme="dark"] .nw-tool-card:hover,
html[data-theme="dark"] body.nerdwallet-theme .nw-guide-card:hover,
html[data-theme="dark"] .nw-guide-card:hover {
    background: var(--bg-surface-hover) !important;
    border-color: var(--accent-brand) !important;
}

html[data-theme="dark"] body.nerdwallet-theme .nw-tool-title,
html[data-theme="dark"] .nw-tool-title,
html[data-theme="dark"] body.nerdwallet-theme .nw-guide-title,
html[data-theme="dark"] .nw-guide-title,
html[data-theme="dark"] body.nerdwallet-theme .nw-section-title,
html[data-theme="dark"] .nw-section-title {
    color: var(--ink-heading) !important;
}

html[data-theme="dark"] body.nerdwallet-theme .nw-tool-desc,
html[data-theme="dark"] .nw-tool-desc,
html[data-theme="dark"] body.nerdwallet-theme .nw-guide-excerpt,
html[data-theme="dark"] .nw-guide-excerpt,
html[data-theme="dark"] body.nerdwallet-theme .nw-section-sub,
html[data-theme="dark"] .nw-section-sub {
    color: var(--ink-secondary) !important;
}

/* Nova Theme Specific Overrides */
html[data-theme="dark"] body.nova-theme .nova-card,
html[data-theme="dark"] .nova-card,
html[data-theme="dark"] body.nova-theme .nova-bento-card,
html[data-theme="dark"] .nova-bento-card,
html[data-theme="dark"] body.nova-theme .nova-accordion-item,
html[data-theme="dark"] .nova-accordion-item {
    background: var(--bg-surface) !important;
    border-color: var(--border-hairline) !important;
    color: var(--ink-body) !important;
}

html[data-theme="dark"] body.nova-theme .nova-pill,
html[data-theme="dark"] .nova-pill,
html[data-theme="dark"] body.nova-theme .nova-btn-secondary,
html[data-theme="dark"] .nova-btn-secondary {
    background: var(--bg-elevated) !important;
    border-color: var(--border-strong) !important;
    color: var(--ink-heading) !important;
}

/* ==========================================================================
   5. ALL LIGHT TAILWIND BACKGROUNDS & GRADIENTS -> OBSIDIAN SURFACES
   ========================================================================== */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-white\/95,
html[data-theme="dark"] .bg-white\/90,
html[data-theme="dark"] .bg-white\/85,
html[data-theme="dark"] .bg-white\/80,
html[data-theme="dark"] .bg-\[\#FFFFFF\],
html[data-theme="dark"] .bg-\[\#ffffff\],
html[data-theme="dark"] .bg-\[\#F8FAFC\] {
    background-color: var(--bg-surface) !important;
    color: var(--ink-body);
}

html[data-theme="dark"] .bg-slate-50,
html[data-theme="dark"] .bg-slate-50\/50,
html[data-theme="dark"] .bg-slate-50\/80,
html[data-theme="dark"] .bg-gray-50,
html[data-theme="dark"] .bg-gray-50\/50,
html[data-theme="dark"] .bg-gray-50\/80 {
    background-color: var(--bg-canvas) !important;
}

/* Cards/panels inside a surface that use bg-gray-50 or bg-slate-50 as a nested box */
html[data-theme="dark"] .bg-white .bg-gray-50,
html[data-theme="dark"] .bg-white .bg-slate-50,
html[data-theme="dark"] .bg-white .bg-gray-50\/50,
html[data-theme="dark"] .bg-white .bg-slate-50\/50,
html[data-theme="dark"] .nw-review-card .bg-slate-50,
html[data-theme="dark"] .nw-review-card .bg-gray-50,
html[data-theme="dark"] .stack-card .bg-gray-50,
html[data-theme="dark"] .step-card .bg-gray-50,
html[data-theme="dark"] .cat-card .bg-gray-50,
html[data-theme="dark"] #calculator .bg-gray-50 {
    background-color: var(--bg-elevated) !important;
}

html[data-theme="dark"] .bg-slate-100,
html[data-theme="dark"] .bg-slate-100\/80,
html[data-theme="dark"] .bg-slate-200,
html[data-theme="dark"] .bg-slate-200\/60,
html[data-theme="dark"] .bg-gray-100,
html[data-theme="dark"] .bg-gray-100\/80,
html[data-theme="dark"] .bg-gray-200 {
    background-color: var(--bg-elevated) !important;
    color: var(--ink-body) !important;
}

/* Soft tinted 50/100 semantic backgrounds -> Translucent dark semantic tints */
html[data-theme="dark"] .bg-emerald-50,
html[data-theme="dark"] .bg-emerald-50\/40,
html[data-theme="dark"] .bg-emerald-50\/50,
html[data-theme="dark"] .bg-emerald-50\/60,
html[data-theme="dark"] .bg-emerald-100,
html[data-theme="dark"] .bg-emerald-100\/50,
html[data-theme="dark"] .bg-green-50,
html[data-theme="dark"] .bg-green-50\/50,
html[data-theme="dark"] .bg-green-100,
html[data-theme="dark"] .bg-teal-50,
html[data-theme="dark"] .bg-teal-100 {
    background-color: rgba(16, 185, 129, 0.12) !important;
}

html[data-theme="dark"] .bg-amber-50,
html[data-theme="dark"] .bg-amber-50\/50,
html[data-theme="dark"] .bg-amber-50\/60,
html[data-theme="dark"] .bg-amber-50\/80,
html[data-theme="dark"] .bg-amber-100,
html[data-theme="dark"] .bg-yellow-50,
html[data-theme="dark"] .bg-yellow-100,
html[data-theme="dark"] .bg-orange-50,
html[data-theme="dark"] .bg-orange-50\/50,
html[data-theme="dark"] .bg-orange-100 {
    background-color: rgba(245, 158, 11, 0.12) !important;
}

html[data-theme="dark"] .bg-red-50,
html[data-theme="dark"] .bg-red-50\/50,
html[data-theme="dark"] .bg-red-100,
html[data-theme="dark"] .bg-rose-50,
html[data-theme="dark"] .bg-rose-50\/60,
html[data-theme="dark"] .bg-rose-100,
html[data-theme="dark"] .bg-pink-50,
html[data-theme="dark"] .bg-pink-100 {
    background-color: rgba(244, 63, 94, 0.12) !important;
}

html[data-theme="dark"] .bg-blue-50,
html[data-theme="dark"] .bg-blue-50\/50,
html[data-theme="dark"] .bg-blue-100,
html[data-theme="dark"] .bg-sky-50,
html[data-theme="dark"] .bg-sky-100,
html[data-theme="dark"] .bg-cyan-50,
html[data-theme="dark"] .bg-cyan-100,
html[data-theme="dark"] .bg-indigo-50,
html[data-theme="dark"] .bg-indigo-50\/50,
html[data-theme="dark"] .bg-indigo-100,
html[data-theme="dark"] .bg-primary-50,
html[data-theme="dark"] .bg-primary-50\/30,
html[data-theme="dark"] .bg-primary-50\/50,
html[data-theme="dark"] .bg-primary-100 {
    background-color: rgba(59, 130, 246, 0.12) !important;
}

html[data-theme="dark"] .bg-purple-50,
html[data-theme="dark"] .bg-purple-50\/50,
html[data-theme="dark"] .bg-purple-100,
html[data-theme="dark"] .bg-violet-50,
html[data-theme="dark"] .bg-violet-100,
html[data-theme="dark"] .bg-fuchsia-50,
html[data-theme="dark"] .bg-fuchsia-100 {
    background-color: rgba(168, 85, 247, 0.12) !important;
}

/* Light Tailwind Gradients (from-*-50, from-*-100, via-white, to-white, to-*-50, to-*-100) */
html[data-theme="dark"] body.nerdwallet-theme a[class*="from-"][class*="to-"][class*="-50"],
html[data-theme="dark"] body.nerdwallet-theme a[class*="from-"][class*="to-"][class*="-100"],
html[data-theme="dark"] [class*="from-"][class*="-50"],
html[data-theme="dark"] [class*="from-"][class*="-100"],
html[data-theme="dark"] [class*="to-"][class*="-50"],
html[data-theme="dark"] [class*="to-"][class*="-100"],
html[data-theme="dark"] [class*="from-gray-50"],
html[data-theme="dark"] [class*="from-slate-50"],
html[data-theme="dark"] [class*="from-slate-100"],
html[data-theme="dark"] [class*="from-gray-100"],
html[data-theme="dark"] [class*="from-primary-50"],
html[data-theme="dark"] [class*="from-indigo-50"],
html[data-theme="dark"] [class*="from-blue-50"],
html[data-theme="dark"] [class*="from-emerald-50"],
html[data-theme="dark"] [class*="from-green-50"],
html[data-theme="dark"] [class*="from-teal-50"],
html[data-theme="dark"] [class*="from-amber-50"],
html[data-theme="dark"] [class*="from-yellow-50"],
html[data-theme="dark"] [class*="from-orange-50"],
html[data-theme="dark"] [class*="from-red-50"],
html[data-theme="dark"] [class*="from-rose-50"],
html[data-theme="dark"] [class*="from-pink-50"],
html[data-theme="dark"] [class*="from-purple-50"],
html[data-theme="dark"] [class*="from-violet-50"],
html[data-theme="dark"] [class*="from-cyan-50"],
html[data-theme="dark"] [class*="from-sky-50"],
html[data-theme="dark"] [class*="from-white"],
html[data-theme="dark"] [class*="to-white"],
html[data-theme="dark"] [class*="via-white"] {
    background: var(--bg-surface) !important;
    background-image: none !important;
    background-color: var(--bg-surface) !important;
    border-color: var(--border-hairline) !important;
}

/* Page-level wrappers that use min-h-screen with light gradient */
html[data-theme="dark"] .min-h-screen[class*="from-gray-50"],
html[data-theme="dark"] .min-h-screen[class*="from-slate-50"],
html[data-theme="dark"] .min-h-screen[class*="to-white"] {
    background-image: none !important;
    background-color: var(--bg-canvas) !important;
}

/* Semantic pros/cons/alert boxes with light gradients */
html[data-theme="dark"] [class*="from-green-50"],
html[data-theme="dark"] [class*="from-emerald-50"],
html[data-theme="dark"] [class*="from-teal-50"] {
    background-color: rgba(16, 185, 129, 0.08) !important;
    border-color: rgba(16, 185, 129, 0.22) !important;
}

html[data-theme="dark"] [class*="from-red-50"],
html[data-theme="dark"] [class*="from-rose-50"] {
    background-color: rgba(244, 63, 94, 0.08) !important;
    border-color: rgba(244, 63, 94, 0.22) !important;
}

html[data-theme="dark"] [class*="from-amber-50"],
html[data-theme="dark"] [class*="from-yellow-50"],
html[data-theme="dark"] [class*="from-orange-50"] {
    background-color: rgba(245, 158, 11, 0.08) !important;
    border-color: rgba(245, 158, 11, 0.22) !important;
}

html[data-theme="dark"] [class*="from-blue-50"],
html[data-theme="dark"] [class*="from-indigo-50"],
html[data-theme="dark"] [class*="from-primary-50"] {
    background-color: rgba(59, 130, 246, 0.08) !important;
    border-color: rgba(59, 130, 246, 0.22) !important;
}

/* Bank directory wrapper */
html[data-theme="dark"] .from-primary-50.via-white.to-accent-50 {
    background-color: var(--bg-canvas) !important;
}

/* Reward Calculator on Card Show Page */
html[data-theme="dark"] body.nerdwallet-theme #calculator,
html[data-theme="dark"] #calculator {
    background-color: var(--bg-canvas) !important;
    border-color: var(--border-hairline) !important;
}

html[data-theme="dark"] body.nerdwallet-theme #calculator .bg-gradient-to-br.from-gray-50.to-gray-100,
html[data-theme="dark"] #calculator .bg-gradient-to-br.from-gray-50.to-gray-100 {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-hairline) !important;
}

/* ==========================================================================
   6. TYPOGRAPHY & TEXT CONTRAST OVERRIDES
   ========================================================================== */
html[data-theme="dark"] .text-slate-950,
html[data-theme="dark"] .text-slate-900,
html[data-theme="dark"] .text-slate-800,
html[data-theme="dark"] .text-gray-950,
html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-gray-800,
html[data-theme="dark"] .text-dark-900,
html[data-theme="dark"] .text-dark-800,
html[data-theme="dark"] .text-dark-700 {
    color: var(--ink-heading) !important;
}

html[data-theme="dark"] .text-slate-700,
html[data-theme="dark"] .text-slate-600,
html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] .text-dark-600,
html[data-theme="dark"] .text-dark-500 {
    color: var(--ink-body) !important;
}

html[data-theme="dark"] .text-slate-500,
html[data-theme="dark"] .text-slate-400,
html[data-theme="dark"] .text-gray-500,
html[data-theme="dark"] .text-gray-400,
html[data-theme="dark"] .text-dark-400 {
    color: var(--ink-secondary) !important;
}

/* Semantic Dark Text Colors (700/800/900/950) -> Bright Legible Semantic Inks */
html[data-theme="dark"] .text-emerald-950,
html[data-theme="dark"] .text-emerald-900,
html[data-theme="dark"] .text-emerald-800,
html[data-theme="dark"] .text-emerald-700,
html[data-theme="dark"] .text-emerald-600,
html[data-theme="dark"] .text-green-900,
html[data-theme="dark"] .text-green-800,
html[data-theme="dark"] .text-green-700,
html[data-theme="dark"] .text-green-600,
html[data-theme="dark"] .text-teal-900,
html[data-theme="dark"] .text-teal-800,
html[data-theme="dark"] .text-teal-700,
html[data-theme="dark"] .text-teal-600,
html[data-theme="dark"] .text-\[\#00875A\],
html[data-theme="dark"] .text-\[\#006644\] {
    color: var(--pos-ink) !important;
}

html[data-theme="dark"] .text-amber-950,
html[data-theme="dark"] .text-amber-900,
html[data-theme="dark"] .text-amber-800,
html[data-theme="dark"] .text-amber-700,
html[data-theme="dark"] .text-amber-600,
html[data-theme="dark"] .text-yellow-900,
html[data-theme="dark"] .text-yellow-800,
html[data-theme="dark"] .text-yellow-700,
html[data-theme="dark"] .text-yellow-600,
html[data-theme="dark"] .text-orange-900,
html[data-theme="dark"] .text-orange-800,
html[data-theme="dark"] .text-orange-700,
html[data-theme="dark"] .text-orange-600 {
    color: var(--warn-ink) !important;
}

html[data-theme="dark"] .text-red-900,
html[data-theme="dark"] .text-red-800,
html[data-theme="dark"] .text-red-700,
html[data-theme="dark"] .text-red-600,
html[data-theme="dark"] .text-rose-900,
html[data-theme="dark"] .text-rose-800,
html[data-theme="dark"] .text-rose-700,
html[data-theme="dark"] .text-rose-600,
html[data-theme="dark"] .text-pink-900,
html[data-theme="dark"] .text-pink-800,
html[data-theme="dark"] .text-pink-700,
html[data-theme="dark"] .text-pink-600 {
    color: var(--neg-ink) !important;
}

html[data-theme="dark"] .text-blue-900,
html[data-theme="dark"] .text-blue-800,
html[data-theme="dark"] .text-blue-700,
html[data-theme="dark"] .text-blue-600,
html[data-theme="dark"] .text-indigo-950,
html[data-theme="dark"] .text-indigo-900,
html[data-theme="dark"] .text-indigo-800,
html[data-theme="dark"] .text-indigo-700,
html[data-theme="dark"] .text-indigo-600,
html[data-theme="dark"] .text-primary-900,
html[data-theme="dark"] .text-primary-800,
html[data-theme="dark"] .text-primary-700,
html[data-theme="dark"] .text-primary-600,
html[data-theme="dark"] .text-sky-800,
html[data-theme="dark"] .text-sky-700,
html[data-theme="dark"] .text-sky-600,
html[data-theme="dark"] .text-cyan-800,
html[data-theme="dark"] .text-cyan-700,
html[data-theme="dark"] .text-cyan-600 {
    color: var(--info-ink) !important;
}

html[data-theme="dark"] .text-purple-900,
html[data-theme="dark"] .text-purple-800,
html[data-theme="dark"] .text-purple-700,
html[data-theme="dark"] .text-purple-600,
html[data-theme="dark"] .text-violet-900,
html[data-theme="dark"] .text-violet-800,
html[data-theme="dark"] .text-violet-700,
html[data-theme="dark"] .text-violet-600,
html[data-theme="dark"] .text-fuchsia-800,
html[data-theme="dark"] .text-fuchsia-700 {
    color: #C084FC !important;
}

/* Protect high-contrast dark ink on intentionally bright solid gold/amber/emerald badges & buttons */
html[data-theme="dark"] .bg-amber-300,
html[data-theme="dark"] .bg-amber-400,
html[data-theme="dark"] .bg-yellow-300,
html[data-theme="dark"] .bg-yellow-400,
html[data-theme="dark"] .bg-yellow-500.text-white,
html[data-theme="dark"] .bg-yellow-500\/90.text-white,
html[data-theme="dark"] .from-amber-400,
html[data-theme="dark"] .from-amber-400 *,
html[data-theme="dark"] .from-orange-400,
html[data-theme="dark"] .from-orange-400 *,
html[data-theme="dark"] .bg-emerald-400,
html[data-theme="dark"] .bg-emerald-500.text-slate-950 {
    color: #090B0F !important;
}

html[data-theme="dark"] .bg-slate-400,
html[data-theme="dark"] .from-slate-400.to-slate-500,
html[data-theme="dark"] .from-slate-400.to-slate-600 {
    background: var(--bg-elevated) !important;
    background-color: var(--bg-elevated) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--ink-heading) !important;
}

html[data-theme="dark"] .bg-clip-text.text-transparent {
    color: var(--accent-gold) !important;
    -webkit-text-fill-color: var(--accent-gold) !important;
    background: none !important;
}

html[data-theme="dark"] .bg-green-500.text-white,
html[data-theme="dark"] .bg-green-500\/90.text-white {
    background-color: #047857 !important;
    color: #FFFFFF !important;
}

/* Protect crisp white text inside 3D Credit Card Artwork & Solid Primary/Brand Buttons */
html[data-theme="dark"] .nw-card-artwork,
html[data-theme="dark"] .nw-card-artwork *,
html[data-theme="dark"] .card-3d .text-white,
html[data-theme="dark"] .card-visual-inner .text-white {
    color: #FFFFFF !important;
}

html[data-theme="dark"] .bg-primary-600.text-white,
html[data-theme="dark"] .bg-indigo-600.text-white,
html[data-theme="dark"] .bg-emerald-600.text-white,
html[data-theme="dark"] .bg-blue-600.text-white,
html[data-theme="dark"] .bg-purple-600.text-white,
html[data-theme="dark"] .bg-rose-600.text-white,
html[data-theme="dark"] .bg-\[\#00875A\].text-white {
    color: #FFFFFF !important;
}

/* Buttons that use bg-slate-900 or bg-dark-800 in light mode: give them elevated border & light text */
html[data-theme="dark"] a.bg-slate-900,
html[data-theme="dark"] button.bg-slate-900,
html[data-theme="dark"] a.bg-dark-800,
html[data-theme="dark"] button.bg-dark-800,
html[data-theme="dark"] a.bg-gray-900,
html[data-theme="dark"] button.bg-gray-900 {
    background-color: var(--bg-elevated) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--ink-heading) !important;
}

html[data-theme="dark"] a.bg-slate-900:hover,
html[data-theme="dark"] button.bg-slate-900:hover,
html[data-theme="dark"] a.bg-dark-800:hover,
html[data-theme="dark"] button.bg-dark-800:hover {
    background-color: var(--accent-brand) !important;
    border-color: var(--accent-brand) !important;
    color: #090B0F !important;
}

/* ==========================================================================
   7. BORDERS, DIVIDERS & OUTLINES
   ========================================================================== */
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-t,
html[data-theme="dark"] .border-b,
html[data-theme="dark"] .border-l,
html[data-theme="dark"] .border-r,
html[data-theme="dark"] .border-y,
html[data-theme="dark"] .border-x,
html[data-theme="dark"] .border-slate-50,
html[data-theme="dark"] .border-slate-100,
html[data-theme="dark"] .border-slate-200,
html[data-theme="dark"] .border-slate-200\/60,
html[data-theme="dark"] .border-slate-200\/80,
html[data-theme="dark"] .border-slate-300,
html[data-theme="dark"] .border-gray-50,
html[data-theme="dark"] .border-gray-100,
html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] .border-gray-200\/80,
html[data-theme="dark"] .border-gray-200\/90,
html[data-theme="dark"] .border-gray-300 {
    border-color: var(--border-hairline) !important;
}

html[data-theme="dark"] .divide-gray-50 > :not([hidden]) ~ :not([hidden]),
html[data-theme="dark"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
html[data-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]),
html[data-theme="dark"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
html[data-theme="dark"] .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--border-hairline) !important;
}

html[data-theme="dark"] .border-emerald-100,
html[data-theme="dark"] .border-emerald-200,
html[data-theme="dark"] .border-green-100,
html[data-theme="dark"] .border-green-200,
html[data-theme="dark"] .border-teal-100,
html[data-theme="dark"] .border-teal-200 {
    border-color: rgba(16, 185, 129, 0.25) !important;
}

html[data-theme="dark"] .border-amber-100,
html[data-theme="dark"] .border-amber-200,
html[data-theme="dark"] .border-amber-200\/80,
html[data-theme="dark"] .border-yellow-100,
html[data-theme="dark"] .border-yellow-200,
html[data-theme="dark"] .border-orange-100,
html[data-theme="dark"] .border-orange-200 {
    border-color: rgba(245, 158, 11, 0.25) !important;
}

html[data-theme="dark"] .border-red-100,
html[data-theme="dark"] .border-red-200,
html[data-theme="dark"] .border-rose-100,
html[data-theme="dark"] .border-rose-200,
html[data-theme="dark"] .border-pink-100,
html[data-theme="dark"] .border-pink-200 {
    border-color: rgba(244, 63, 94, 0.25) !important;
}

html[data-theme="dark"] .border-blue-100,
html[data-theme="dark"] .border-blue-200,
html[data-theme="dark"] .border-indigo-100,
html[data-theme="dark"] .border-indigo-200,
html[data-theme="dark"] .border-primary-100,
html[data-theme="dark"] .border-primary-200,
html[data-theme="dark"] .border-purple-100,
html[data-theme="dark"] .border-purple-200 {
    border-color: rgba(96, 165, 250, 0.25) !important;
}

/* ==========================================================================
   8. FORMS, INPUTS, SELECTS, TEXTAREAS & RANGE SLIDERS
   ========================================================================== */
html[data-theme="dark"] body.nerdwallet-theme input[type="text"],
html[data-theme="dark"] body.nerdwallet-theme input[type="number"],
html[data-theme="dark"] body.nerdwallet-theme input[type="email"],
html[data-theme="dark"] body.nerdwallet-theme input[type="password"],
html[data-theme="dark"] body.nerdwallet-theme input[type="search"],
html[data-theme="dark"] body.nerdwallet-theme input[type="tel"],
html[data-theme="dark"] body.nerdwallet-theme input[type="url"],
html[data-theme="dark"] body.nerdwallet-theme input[type="date"],
html[data-theme="dark"] body.nerdwallet-theme select,
html[data-theme="dark"] body.nerdwallet-theme textarea,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background-color: var(--bg-elevated) !important;
    color: var(--ink-heading) !important;
    border-color: var(--border-strong) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--ink-muted) !important;
}

html[data-theme="dark"] select option {
    background-color: var(--bg-surface) !important;
    color: var(--ink-heading) !important;
}

html[data-theme="dark"] input[type="range"] {
    background: #1E293B !important;
}

html[data-theme="dark"] input[type="range"]::-webkit-slider-thumb {
    background: var(--accent-brand) !important;
    border-color: var(--bg-surface) !important;
}

html[data-theme="dark"] input[type="range"]::-moz-range-thumb {
    background: var(--accent-brand) !important;
    border-color: var(--bg-surface) !important;
}

/* ==========================================================================
   9. TABLES, COMPARE ROWS & TOOL WIDGETS
   ========================================================================== */
html[data-theme="dark"] table,
html[data-theme="dark"] thead,
html[data-theme="dark"] tbody,
html[data-theme="dark"] tr {
    border-color: var(--border-hairline) !important;
}

html[data-theme="dark"] thead,
html[data-theme="dark"] thead tr,
html[data-theme="dark"] thead th,
html[data-theme="dark"] .comparison-table th {
    background-color: var(--bg-elevated) !important;
    color: var(--ink-heading) !important;
    border-color: var(--border-strong) !important;
}

html[data-theme="dark"] tbody tr {
    background-color: var(--bg-surface) !important;
    color: var(--ink-body) !important;
}

html[data-theme="dark"] tbody tr:nth-child(even) {
    background-color: #0E121A !important;
}

html[data-theme="dark"] tbody tr:hover,
html[data-theme="dark"] .compare-row:hover {
    background-color: var(--bg-surface-hover) !important;
}

html[data-theme="dark"] .compare-row:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

/* Tool & Page Custom Component Classes */
html[data-theme="dark"] body.nerdwallet-theme .step-card,
html[data-theme="dark"] .step-card,
html[data-theme="dark"] .cat-card,
html[data-theme="dark"] .stack-card,
html[data-theme="dark"] .benefit-card,
html[data-theme="dark"] .category-tab:not(.active),
html[data-theme="dark"] body.nerdwallet-theme .toc-sidebar,
html[data-theme="dark"] .toc-sidebar,
html[data-theme="dark"] body.nerdwallet-theme .card-showcase,
html[data-theme="dark"] .card-showcase,
html[data-theme="dark"] body.nerdwallet-theme .cs-card-module,
html[data-theme="dark"] .cs-card-module,
html[data-theme="dark"] body.nerdwallet-theme .showcase-benefit,
html[data-theme="dark"] .showcase-benefit,
html[data-theme="dark"] body.nerdwallet-theme .verdict-card,
html[data-theme="dark"] .verdict-card,
html[data-theme="dark"] body.nerdwallet-theme .final-verdict,
html[data-theme="dark"] .final-verdict,
html[data-theme="dark"] body.nerdwallet-theme .info-box,
html[data-theme="dark"] .info-box,
html[data-theme="dark"] body.nerdwallet-theme .accordion-item,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] body.nerdwallet-theme .faq-item,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] body.nerdwallet-theme .dashboard-stat-card,
html[data-theme="dark"] .dashboard-stat-card {
    background: var(--bg-surface) !important;
    background-color: var(--bg-surface) !important;
    border-color: var(--border-hairline) !important;
    color: var(--ink-body) !important;
}

html[data-theme="dark"] body.nerdwallet-theme .accordion-header,
html[data-theme="dark"] .accordion-header,
html[data-theme="dark"] body.nerdwallet-theme .faq-header,
html[data-theme="dark"] .faq-header {
    background: var(--bg-surface) !important;
    color: var(--ink-heading) !important;
}

html[data-theme="dark"] .step-card:hover,
html[data-theme="dark"] .cat-card:hover,
html[data-theme="dark"] .stack-card:hover,
html[data-theme="dark"] .category-tab:not(.active):hover {
    background-color: var(--bg-surface-hover) !important;
    border-color: var(--accent-brand) !important;
}

html[data-theme="dark"] .step-card.selected,
html[data-theme="dark"] .cat-card.selected {
    background: rgba(45, 212, 191, 0.10) !important;
    border-color: var(--accent-brand) !important;
}

/* Deal Show Article Typography */
html[data-theme="dark"] .deal-description h2,
html[data-theme="dark"] .deal-description h3,
html[data-theme="dark"] .deal-description strong {
    color: var(--ink-heading) !important;
}

html[data-theme="dark"] .deal-description p,
html[data-theme="dark"] .deal-description ul,
html[data-theme="dark"] .deal-description ol,
html[data-theme="dark"] .deal-description li {
    color: var(--ink-body) !important;
}

/* Inline Style Fallbacks for White/Light Surfaces */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background-color:#ffffff"],
html[data-theme="dark"] [style*="background-color: #ffffff"],
html[data-theme="dark"] [style*="background:#f8fafc"],
html[data-theme="dark"] [style*="background: #f8fafc"] {
    background: var(--bg-surface) !important;
    background-color: var(--bg-surface) !important;
    color: var(--ink-body) !important;
}

/* Global Mobile Overflow Safeguard for all Swiss Ledger containers */
.swiss-ledger-article,
.swiss-ledger-article .swiss-article-container,
.swiss-ledger-article .chapter-section,
.swiss-ledger-article .calc-workbench,
.swiss-ledger-article .decision-card,
.swiss-ledger-article .metric-ribbon,
.swiss-ledger-article .table-wrap {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.swiss-ledger-article .chapter-section,
.swiss-ledger-article .calc-workbench {
  overflow: hidden !important;
}


/* ==========================================================================
   CARDSAHAYAK SWISS LEDGER EDITORIAL HEADER & DARK MODE ZERO-WHITE OVERRIDES
   ========================================================================== */

/* 1. Header Layout Block Integrity (Prevents Grid Column Collapse) */
.swiss-ledger-article header#overview,
.swiss-ledger-article .editorial-header {
  display: block !important;
  width: 100% !important;
  margin-bottom: 24px !important;
}

.swiss-ledger-article .eeat-strip,
.swiss-ledger-article .audit-ribbon {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px 12px !important;
  font-size: 12px !important;
  color: var(--ink-secondary) !important;
  margin-bottom: 20px !important;
  width: 100% !important;
}

.swiss-ledger-article .identity-header,
.swiss-ledger-article .hero-title-grid {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  gap: 24px !important;
  align-items: center !important;
  padding-bottom: 28px !important;
  border-bottom: 1px solid var(--border-hairline) !important;
  margin-bottom: 26px !important;
  width: 100% !important;
}

.swiss-ledger-article .metric-ribbon {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  width: 100% !important;
  margin-bottom: 20px !important;
}

.swiss-ledger-article .swiss-share-strip {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin-bottom: 32px !important;
}

@media (max-width: 768px) {
  .swiss-ledger-article .identity-header,
  .swiss-ledger-article .hero-title-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .swiss-ledger-article .metric-ribbon {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
}

/* 2. Top Minimalist Bar Brand Mark in Dark Mode */
html[data-theme="dark"] .brand-mark,
.swiss-ledger-article[data-theme="dark"] .brand-mark {
  background: var(--bg-surface) !important;
  color: var(--ink-heading) !important;
  border: 1px solid var(--border-hairline) !important;
}

/* 3. Obsidian Mode: Universal Tinted Callouts & High Contrast Text */
.swiss-ledger-article[data-theme="dark"] [class*="bg-amber-50"],
.swiss-ledger-article[data-theme="dark"] [class*="bg-amber-100"],
.swiss-ledger-article[data-theme="dark"] [class*="bg-yellow-"] {
  background-color: rgba(251, 191, 36, 0.12) !important;
  border-color: rgba(251, 191, 36, 0.3) !important;
}
.swiss-ledger-article[data-theme="dark"] [class*="bg-amber-"] h1,
.swiss-ledger-article[data-theme="dark"] [class*="bg-amber-"] h2,
.swiss-ledger-article[data-theme="dark"] [class*="bg-amber-"] h3,
.swiss-ledger-article[data-theme="dark"] [class*="bg-amber-"] h4,
.swiss-ledger-article[data-theme="dark"] [class*="bg-amber-"] h5,
.swiss-ledger-article[data-theme="dark"] [class*="bg-amber-"] h6,
.swiss-ledger-article[data-theme="dark"] [class*="bg-amber-"] [class*="text-amber-9"] {
  color: #FBBF24 !important;
}
.swiss-ledger-article[data-theme="dark"] [class*="bg-amber-"] p,
.swiss-ledger-article[data-theme="dark"] [class*="bg-amber-"] li,
.swiss-ledger-article[data-theme="dark"] [class*="bg-amber-"] span,
.swiss-ledger-article[data-theme="dark"] [class*="bg-amber-"] div {
  color: #FDE68A !important;
}

.swiss-ledger-article[data-theme="dark"] [class*="bg-emerald-50"],
.swiss-ledger-article[data-theme="dark"] [class*="bg-emerald-100"],
.swiss-ledger-article[data-theme="dark"] [class*="bg-teal-50"],
.swiss-ledger-article[data-theme="dark"] [class*="bg-teal-100"],
.swiss-ledger-article[data-theme="dark"] [class*="bg-green-"] {
  background-color: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(52, 211, 153, 0.3) !important;
}
.swiss-ledger-article[data-theme="dark"] [class*="bg-emerald-"] h1,
.swiss-ledger-article[data-theme="dark"] [class*="bg-emerald-"] h2,
.swiss-ledger-article[data-theme="dark"] [class*="bg-emerald-"] h3,
.swiss-ledger-article[data-theme="dark"] [class*="bg-emerald-"] h4,
.swiss-ledger-article[data-theme="dark"] [class*="bg-emerald-"] h5,
.swiss-ledger-article[data-theme="dark"] [class*="bg-emerald-"] h6,
.swiss-ledger-article[data-theme="dark"] [class*="bg-emerald-"] [class*="text-emerald-9"],
.swiss-ledger-article[data-theme="dark"] [class*="bg-teal-"] [class*="text-teal-9"] {
  color: #34D399 !important;
}
.swiss-ledger-article[data-theme="dark"] [class*="bg-emerald-"] p,
.swiss-ledger-article[data-theme="dark"] [class*="bg-emerald-"] li,
.swiss-ledger-article[data-theme="dark"] [class*="bg-emerald-"] span,
.swiss-ledger-article[data-theme="dark"] [class*="bg-emerald-"] div,
.swiss-ledger-article[data-theme="dark"] [class*="bg-teal-"] p,
.swiss-ledger-article[data-theme="dark"] [class*="bg-teal-"] li {
  color: #A7F3D0 !important;
}

.swiss-ledger-article[data-theme="dark"] [class*="bg-rose-50"],
.swiss-ledger-article[data-theme="dark"] [class*="bg-rose-100"],
.swiss-ledger-article[data-theme="dark"] [class*="bg-red-50"],
.swiss-ledger-article[data-theme="dark"] [class*="bg-red-100"] {
  background-color: rgba(244, 63, 94, 0.12) !important;
  border-color: rgba(251, 113, 133, 0.3) !important;
}
.swiss-ledger-article[data-theme="dark"] [class*="bg-rose-"] h1,
.swiss-ledger-article[data-theme="dark"] [class*="bg-rose-"] h2,
.swiss-ledger-article[data-theme="dark"] [class*="bg-rose-"] h3,
.swiss-ledger-article[data-theme="dark"] [class*="bg-rose-"] h4,
.swiss-ledger-article[data-theme="dark"] [class*="bg-rose-"] h5,
.swiss-ledger-article[data-theme="dark"] [class*="bg-rose-"] h6,
.swiss-ledger-article[data-theme="dark"] [class*="bg-rose-"] [class*="text-rose-9"],
.swiss-ledger-article[data-theme="dark"] [class*="bg-red-"] [class*="text-red-9"] {
  color: #FB7185 !important;
}
.swiss-ledger-article[data-theme="dark"] [class*="bg-rose-"] p,
.swiss-ledger-article[data-theme="dark"] [class*="bg-rose-"] li,
.swiss-ledger-article[data-theme="dark"] [class*="bg-rose-"] span,
.swiss-ledger-article[data-theme="dark"] [class*="bg-rose-"] div {
  color: #FECDD3 !important;
}

.swiss-ledger-article[data-theme="dark"] [class*="bg-cyan-50"],
.swiss-ledger-article[data-theme="dark"] [class*="bg-cyan-100"],
.swiss-ledger-article[data-theme="dark"] [class*="bg-blue-50"],
.swiss-ledger-article[data-theme="dark"] [class*="bg-blue-100"],
.swiss-ledger-article[data-theme="dark"] [class*="bg-sky-50"],
.swiss-ledger-article[data-theme="dark"] [class*="bg-indigo-50"] {
  background-color: rgba(59, 130, 246, 0.12) !important;
  border-color: rgba(96, 165, 250, 0.3) !important;
}
.swiss-ledger-article[data-theme="dark"] [class*="bg-cyan-"] [class*="text-cyan-9"],
.swiss-ledger-article[data-theme="dark"] [class*="bg-blue-"] [class*="text-blue-9"] {
  color: #60A5FA !important;
}
.swiss-ledger-article[data-theme="dark"] [class*="bg-cyan-"] p,
.swiss-ledger-article[data-theme="dark"] [class*="bg-cyan-"] li,
.swiss-ledger-article[data-theme="dark"] [class*="bg-blue-"] p,
.swiss-ledger-article[data-theme="dark"] [class*="bg-blue-"] li {
  color: #BFDBFE !important;
}

.swiss-ledger-article[data-theme="dark"] [class*="bg-slate-50"],
.swiss-ledger-article[data-theme="dark"] [class*="bg-gray-50"],
.swiss-ledger-article[data-theme="dark"] [class*="bg-zinc-50"] {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-hairline) !important;
  color: var(--ink-body) !important;
}

.swiss-ledger-article[data-theme="dark"] .bg-white,
.swiss-ledger-article[data-theme="dark"] [class*="bg-white/"] {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-hairline) !important;
}

.swiss-ledger-article[data-theme="dark"] code {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--ink-heading) !important;
  border-color: var(--border-hairline) !important;
}