@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800;900&display=swap');

/* Shared support CSS: mobile fit, map cleanup, lean typography, and cursor removal. */
:root {
  --font-base: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: var(--font-base);
  --font-body: var(--font-base);
  --font-code: var(--font-base);
  --font-mono: var(--font-base);
}

body,
body * {
  font-family: var(--font-body) !important;
}

:root {
  --lean-bold: 700;
  --lean-strong: 650;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #07111f;
  --bg-2: #0d1b2e;
  --bg-3: #132641;
  --surface: #0d1b2e;
  --surface-2: #132641;
  --panel: #111827;
  --ink: #f8fafc;
  --text: #f8fafc;
  --text-2: #cbd5e1;
  --text-muted: #94a3b8;
  --text-light: #64748b;
  --muted: #94a3b8;
  --line: #203653;
  --border: #203653;
  --border-dark: #315070;
  --case-bg: #07111f;
  --case-panel: #0d1b2e;
  --case-panel-soft: #132641;
  --case-text: #f8fafc;
  --case-muted: #cbd5e1;
  --case-line: #243041;
  --case-navy: #f8fafc;
  --case-shadow: 0 18px 44px rgba(0, 0, 0, .42);
  --shadow: 0 18px 44px rgba(0, 0, 0, .38);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, .45);
  --shadow-lg: 0 18px 54px rgba(0, 0, 0, .5);
}

html[data-theme="dark"],
html[data-theme="dark"] body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

html[data-theme="dark"] :where(
  .nav, nav.nav, .top, .topbar, .case-topbar, .sandbox-top,
  .footer, footer, .case-footer,
  .module-card, .project-card, .workflow-card, .metric-card,
  .mini-stat, .card, .visual, .commentary, .panel, .side-panel,
  .case-section, .case-proof-card, .case-metric, .case-tool, .case-step,
  .dash-card, .sandbox-shell, .sandbox-rail, .sandbox-stage,
  .lab-card, .docai-card, .fraud-card, .churn-card, .hr-card,
  .sim-tile, .event-card, .issue-card, .road-item, .ready-row,
  .chat-box, .chat-shell, .chat-panel, .assistant-box,
  .sandbox-return-bar, .sandbox-return-bar__inner,
  .stage-pill, .demo-frame, .board-col, .case-note,
  .message, .message--ai,
  .case-architecture-diagram,
  .filters, .dataset-card, .visual, .visual-head, .visual-body,
  .kpi, .insight, .heat-cell, .cell, .track, .return,
  .cta, .proof, .impact-case, .impact-metric, .impact-outcome
) {
  background-color: var(--bg-2, #0d1b2e) !important;
  border-color: var(--border, #203653) !important;
  color: var(--text, #f8fafc) !important;
}

html[data-theme="dark"] :where(
  .nav__link, .nav__cta, .top a, .top button, .actions a, .actions button,
  .case-nav a, .case-btn, .btn, button, input, select, textarea,
  .tab, .category-btn, .sandbox-link, .sandbox-open, .dash-open,
  .sandbox-return-bar a, .sandbox-return-bar button,
  .stage-pill
) {
  background-color: var(--bg-3, #132641) !important;
  border-color: var(--border-dark, #315070) !important;
  color: var(--text, #f8fafc) !important;
}

html[data-theme="dark"] :where(
  p, li, td, th, label, small, .muted, .case-lede, .case-section p,
  .case-metric span, .case-proof-card p, .section-sub, .sub,
  .metric small, .card .sub, .visual p, .note, .rail-meta
) {
  color: var(--muted, #94a3b8) !important;
}

html[data-theme="dark"] :where(
  h1, h2, h3, h4, strong, b,
  .project-title, .case-hero h1, .case-section h2,
  .case-proof-card strong, .case-metric strong, .dash-card-title,
  .visual h2, .brand, .case-brand, .nav__logo
) {
  color: var(--text, #f8fafc) !important;
}

html[data-theme="dark"] :where(
  table, thead, tbody, tr, td, th,
  .table-scroll, .table-wrap, .df-table, .hr-table
) {
  background-color: transparent !important;
  border-color: var(--border, #243041) !important;
  color: var(--text-2, #cbd5e1) !important;
}

html[data-theme="dark"] :where(th) {
  background-color: var(--bg-2, #0d1b2e) !important;
  color: var(--text-2, #cbd5e1) !important;
}

html[data-theme="dark"] :where(tbody tr:hover) {
  background: rgba(59, 130, 246, .10) !important;
}

html[data-theme="dark"] :where(
  [style*="background:#fff"],
  [style*="background: #fff"],
  [style*="background:#ffffff"],
  [style*="background: #ffffff"],
  [style*="background:white"],
  [style*="background: white"]
) {
  background: var(--bg-2, #111827) !important;
}

html[data-theme="dark"] :where(
  [style*="color:#111827"],
  [style*="color: #111827"],
  [style*="color:#0f172a"],
  [style*="color: #0f172a"],
  [style*="color:var(--text)"]
) {
  color: var(--text, #f8fafc) !important;
}

html[data-theme="dark"] .case-question {
  background: #10213a !important;
  border: 1px solid var(--border-dark, #315070);
}

html[data-theme="dark"] .case-architecture span {
  background: var(--bg-3, #132641) !important;
}

html[data-theme="dark"] :where(.case-narrative-section, .case-architecture-row) {
  border-color: var(--border, #203653) !important;
}

html[data-theme="dark"] :where(.case-narrative--plain .case-section) {
  background: transparent !important;
  background-color: transparent !important;
  border-color: var(--border, #203653) !important;
}

html[data-theme="dark"] :where(.case-narrative-section p, .case-narrative-section li, .case-architecture-action, .case-architecture-outcome) {
  color: var(--text-2, #cbd5e1) !important;
}

html[data-theme="dark"] :where(.case-narrative-section h2, .case-narrative-section h3, .case-architecture-action strong, .case-architecture-outcome strong, .case-narrative-callout) {
  color: var(--text, #f8fafc) !important;
}

html[data-theme="dark"] :where(.case-narrative-callout, .case-architecture-outcome) {
  background: var(--bg-3, #132641) !important;
}

html[data-theme="dark"] .case-architecture-node {
  background: #10213a !important;
  color: #fff !important;
}

html[data-theme="dark"] :where(
  .filters h2, .visual h2, .dataset-card b, .insight b,
  .label, .filter label, .card .label, .card .value,
  .impact-case h2, .impact-case h3, .impact-metric strong,
  .cta h2, .proof strong
) {
  color: var(--text, #f8fafc) !important;
}

html[data-theme="dark"] :where(
  .dataset-card span, .insight span, .heat-cell span, .cell span,
  .impact-outcome, .cta p, .proof span, .impact-org
) {
  color: var(--text-2, #cbd5e1) !important;
}

html[data-theme="dark"] :where(
  select, input[type="date"], input[type="range"], .filter select, .filter input,
  .filter-actions button, .sim-tile
) {
  background-color: var(--bg-3, #132641) !important;
  border-color: var(--border-dark, #315070) !important;
  color: var(--text, #f8fafc) !important;
}

html[data-theme="dark"] :where(.good, .warn, .bad, .heat-cell.high, .heat-cell.mid, .heat-cell.low) {
  background-color: var(--bg-3, #132641) !important;
  border-color: var(--border-dark, #315070) !important;
}

html[data-theme="dark"] :where(svg [fill="#fff"], svg [fill="#ffffff"], svg [fill="white"]) {
  fill: var(--bg-2, #0d1b2e) !important;
}

html[data-theme="dark"] :where(.axis-label) {
  fill: var(--text-2, #cbd5e1) !important;
  color: var(--text-2, #cbd5e1) !important;
}

html[data-theme="dark"] :where(.chart-value) {
  fill: var(--text, #f8fafc) !important;
  color: var(--text, #f8fafc) !important;
}

:where(.report .chip, .visual .pill, .actions-table .pill, .table-scroll .pill, .table-wrap .pill, .pages .tab) {
  border-radius: 9px !important;
}

:where(.return, .return a, .return button) {
  border-radius: 14px !important;
}

html[data-theme="dark"] :where(.return a, .return button) {
  background: var(--bg-3, #132641) !important;
  background-color: var(--bg-3, #132641) !important;
  border-color: var(--border-dark, #315070) !important;
  color: var(--text, #f8fafc) !important;
}

html[data-theme="dark"] :where(
  .demo-page-wrap, .demo-header, #selfbi-wrap, .app-shell,
  .sidebar, .sidebar-brand, .sb-section, .main, .main-top,
  .content, .tab-panel, .hero-card, .stat-cell, .kpi,
  .chart-card, .insight-card, .upload-card, .data-card,
  .profile-card, .field-card, .quality-card, .builder-card,
  .export-card, .preview-card, .empty-card, .vi-box,
  .col-selector, .col-item, .fd-panel, .fp-btn,
  .tw, .toast, .sidebar-card, .status-bar, .tabs-row,
  .tab-btn, .active-filters, .filter-section, .filter-pills,
  .visual-card, .plot-wrap, .js-plotly-plot, .plotly,
  .main-panel, .profile-grid, .quality-grid, .clean-log,
  .data-preview, .table-card, .matrix-card, .relation-card
) {
  background-color: var(--bg-2, #0d1b2e) !important;
  border-color: var(--border, #203653) !important;
  color: var(--text, #f8fafc) !important;
}

html[data-theme="dark"] :where(
  #selfbi-wrap h1, #selfbi-wrap h2, #selfbi-wrap h3, #selfbi-wrap h4,
  #selfbi-wrap .brand-name, #selfbi-wrap .stat-val, #selfbi-wrap .kpi-val,
  #selfbi-wrap .chart-title, #selfbi-wrap .panel-title,
  #selfbi-wrap .col-item, #selfbi-wrap .fp-name,
  #selfbi-wrap .tab-btn, #selfbi-wrap .status-bar,
  #selfbi-wrap .status-value, #selfbi-wrap .status-label
) {
  color: var(--text, #f8fafc) !important;
}

html[data-theme="dark"] :where(
  #selfbi-wrap .brand-sub, #selfbi-wrap .sb-muted, #selfbi-wrap .sb-lbl,
  #selfbi-wrap .stat-lbl, #selfbi-wrap .stat-note, #selfbi-wrap .kpi-lbl,
  #selfbi-wrap .kpi-note, #selfbi-wrap .muted, #selfbi-wrap .fp-val
) {
  color: var(--muted, #94a3b8) !important;
}

html[data-theme="dark"] :where(
  #selfbi-wrap .sb-select, #selfbi-wrap .sb-ghost,
  #selfbi-wrap .fd-search, #selfbi-wrap input,
  #selfbi-wrap select, #selfbi-wrap textarea
) {
  background-color: var(--bg-3, #132641) !important;
  border-color: var(--border-dark, #315070) !important;
  color: var(--text, #f8fafc) !important;
}

html[data-theme="dark"] #selfbi-wrap .file-btn {
  color: #fff !important;
}

html[data-theme="dark"] :where(iframe, #demoFrame) {
  background-color: var(--bg, #07111f) !important;
}

html[data-theme="dark"] #selfbi-wrap .tab-btn.active,
html[data-theme="dark"] #selfbi-wrap .tab-btn:hover {
  background-color: rgba(29, 78, 216, .24) !important;
  border-color: #3b82f6 !important;
  color: #fff !important;
}

html[data-theme="dark"] #selfbi-wrap :where(table, th, td) {
  background-color: transparent !important;
  border-color: var(--border, #203653) !important;
  color: var(--text, #f8fafc) !important;
}

html[data-theme="dark"] #selfbi-wrap :where(.main, .main-top, .content) {
  background-color: #07111f !important;
}

/* Signal Aurora: a shared observability-inspired theme for the portfolio. */
html[data-theme="aurora"] {
  color-scheme: dark;
  --bg: #07151b;
  --bg-2: #0d2329;
  --bg-3: #12363b;
  --surface: #0d2329;
  --surface-2: #163f43;
  --panel: #102a30;
  --ink: #effffd;
  --text: #effffd;
  --text-2: #c2e6e5;
  --text-3: #8fb9b9;
  --text-muted: #8fb9b9;
  --text-light: #5f9294;
  --muted: #8fb9b9;
  --line: #205257;
  --border: #205257;
  --border-dark: #347478;
  --accent: #67e8f9;
  --accent-dark: #22d3ee;
  --accent-light: rgba(103, 232, 249, .14);
  --ai: #c4b5fd;
  --success: #6ee7b7;
  --warning: #fcd34d;
  --error: #fb7185;
  --case-bg: #07151b;
  --case-panel: #0d2329;
  --case-panel-soft: #12363b;
  --case-text: #effffd;
  --case-muted: #c2e6e5;
  --case-line: #205257;
  --shadow: 0 18px 44px rgba(0, 0, 0, .34);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .28);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, .34);
  --shadow-lg: 0 18px 54px rgba(0, 0, 0, .42);
}

html[data-theme="aurora"],
html[data-theme="aurora"] body {
  background:
    radial-gradient(circle at 12% -8%, rgba(103, 232, 249, .14), transparent 30rem),
    radial-gradient(circle at 92% 18%, rgba(110, 231, 183, .08), transparent 26rem),
    #07151b !important;
  background-color: #07151b !important;
  color: var(--text) !important;
}

html[data-theme="aurora"] :where(
  .nav, nav.nav, .top, .topbar, .case-topbar, .sandbox-top,
  .footer, footer, .case-footer,
  .module-card, .project-card, .workflow-card, .metric-card,
  .mini-stat, .card, .visual, .commentary, .panel, .side-panel,
  .case-section, .case-proof-card, .case-metric, .case-tool, .case-step,
  .dash-card, .sandbox-shell, .sandbox-rail, .sandbox-stage,
  .lab-card, .docai-card, .fraud-card, .churn-card, .hr-card,
  .sim-tile, .event-card, .issue-card, .road-item, .ready-row,
  .chat-box, .chat-shell, .chat-panel, .assistant-box,
  .sandbox-return-bar, .sandbox-return-bar__inner,
  .stage-pill, .demo-frame, .board-col, .case-note,
  .message, .message--ai, .case-architecture-diagram,
  .filters, .dataset-card, .visual, .visual-head, .visual-body,
  .kpi, .insight, .heat-cell, .cell, .track, .return,
  .cta, .proof, .impact-case, .impact-metric, .impact-outcome,
  .hero-card, .brief, .drawer, .toast, .evidence-card
) {
  background-color: var(--bg-2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-sm);
}

html[data-theme="aurora"] :where(
  .nav__link, .nav__cta, .top a, .top button, .actions a, .actions button,
  .case-nav a, .case-btn, .btn, button, input, select, textarea,
  .tab, .category-btn, .sandbox-link, .sandbox-open, .dash-open,
  .sandbox-return-bar a, .sandbox-return-bar button, .stage-pill,
  .chip, .filter-actions button, .reset, .theme-btn
) {
  background-color: var(--bg-3) !important;
  border-color: var(--border-dark) !important;
  color: var(--text) !important;
}

html[data-theme="aurora"] :where(
  p, li, td, th, label, small, .muted, .case-lede, .case-section p,
  .case-metric span, .case-proof-card p, .section-sub, .sub,
  .metric small, .card .sub, .visual p, .note, .rail-meta,
  .impact-outcome, .proof span, .issue-desc, .brief p
) {
  color: var(--text-2) !important;
}

html[data-theme="aurora"] :where(
  h1, h2, h3, h4, strong, b, .project-title, .case-hero h1,
  .case-section h2, .case-proof-card strong, .case-metric strong,
  .dash-card-title, .visual h2, .brand, .case-brand, .nav__logo,
  .impact-metric strong, .proof strong, .label, .eyebrow
) {
  color: var(--text) !important;
}

html[data-theme="aurora"] :where(
  .btn-primary, .nav__cta, .case-btn--primary, .btn.primary,
  .chip.active, .tab.active, .category-btn.active,
  .filter-actions .primary, .tab-btn.active
) {
  background: linear-gradient(135deg, #22d3ee, #14b8a6) !important;
  border-color: #67e8f9 !important;
  color: #062228 !important;
  box-shadow: 0 8px 24px rgba(34, 211, 238, .18);
}

html[data-theme="aurora"] :where(
  .accent, .eyebrow, .section-label, .label, .drawer-key,
  .impact-org, .case-kicker, .nav__link--active, .nav-links a.active
) {
  color: var(--accent) !important;
}

html[data-theme="aurora"] :where(
  [style*="background:#fff"], [style*="background: #fff"],
  [style*="background:#ffffff"], [style*="background: #ffffff"],
  [style*="background:white"], [style*="background: white"]
) {
  background: var(--bg-2) !important;
}

html[data-theme="aurora"] :where(
  [style*="color:#111827"], [style*="color: #111827"],
  [style*="color:#0f172a"], [style*="color: #0f172a"]
) {
  color: var(--text) !important;
}

html[data-theme="aurora"] :where(table, thead, tbody, tr, td, th, .table-scroll, .table-wrap, .df-table, .hr-table) {
  background-color: transparent !important;
  border-color: var(--border) !important;
  color: var(--text-2) !important;
}

html[data-theme="aurora"] :where(th) {
  background-color: var(--bg-3) !important;
  color: var(--text) !important;
}

html[data-theme="aurora"] :where(tbody tr:hover, .project-card:hover, .card:hover, .visual:hover) {
  background-color: rgba(103, 232, 249, .08) !important;
}

html[data-theme="aurora"] :where(iframe, #demoFrame) {
  background-color: var(--bg) !important;
}

html[data-theme="aurora"] :where(.good, .warn, .bad, .heat-cell.high, .heat-cell.mid, .heat-cell.low) {
  background-color: var(--bg-3) !important;
  border-color: var(--border-dark) !important;
}

html[data-theme="aurora"] .hero-canvas,
html[data-theme="aurora"] .hero__grid-bg {
  opacity: .72;
}

:where(.breadcrumb) {
  display: none !important;
}

:where(.sub-nav) {
  margin-top: 0 !important;
}

.leaflet-control-attribution {
  display: none !important;
}

.leaflet-bottom.leaflet-right {
  right: 4px !important;
  bottom: 4px !important;
}

.map-credit {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  margin-top: 8px;
  padding: 3px 8px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 999px;
  color: var(--muted, #64748b) !important;
  background: var(--panel, #fff);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
}

:where(
  [style*="font-weight:800"], [style*="font-weight: 800"],
  [style*="font-weight:850"], [style*="font-weight: 850"],
  [style*="font-weight:900"], [style*="font-weight: 900"],
  [style*="font-weight:950"], [style*="font-weight: 950"],
  .brand, .mark, .brand-mark, .nav__logo, .top a, .top button,
  .actions a, .actions button, .kpi b, .metric b, .chart-value,
  .project-metric-val, .mini-stat__value, .customer-score,
  .label, .filter-label, .eyebrow, .project-title, .lab-card-title,
  .visual h2, .filters h2, h1, h2, h3, h4, strong, b
) {
  font-weight: var(--lean-bold) !important;
}

:where(
  .axis-label, .note, .visual-note, .project-tag, .tag, .pill,
  .btn, .chip, .status, .source-chip, .footer-col-title,
  .project-metric-label, .kpi span, .metric span
) {
  font-weight: var(--lean-strong) !important;
}

html.is-sandbox-embed,
html.is-sandbox-embed body,
body.is-sandbox-embed {
  min-width: 0 !important;
  overflow-x: hidden !important;
}

html.is-sandbox-embed :where(
  nav.nav,
  .nav,
  .top:not(.sandbox-top),
  .demo-header,
  .breadcrumb,
  .sub-nav,
  .sandbox-return-bar,
  footer.footer,
  .footer
) {
  display: none !important;
}

html.is-sandbox-embed :where(
  [style*="padding-top:64px"],
  [style*="padding-top: 64px"],
  .demo-page-wrap
) {
  padding-top: 0 !important;
}

html.is-sandbox-embed :where(.container.section, main.container.section, .section) {
  padding-top: 14px !important;
}

html.is-sandbox-embed :where(.wrap, .main, .dashboard, .report, .hr-app, .df-shell) {
  max-width: 100% !important;
}

@media (max-width: 720px) {
  html, body {
    overflow-x: hidden;
  }

  :where(.projects-grid, .project-card, .project-card-body, .project-actions, .project-metrics) {
    min-width: 0;
  }

  :where(.project-card-img) {
    min-height: 0;
  }

  :where(.project-actions) {
    display: grid !important;
    grid-template-columns: 1fr;
  }

  :where(.project-actions a, .project-actions button) {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }

  :where(.project-metrics) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px !important;
  }

  :where(.project-metric-val, .project-metric-label) {
    overflow-wrap: anywhere;
  }

  html.is-sandbox-embed :where(.wrap, .dashboard, .report, .df-shell, .hr-app) {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  html.is-sandbox-embed :where(table, .df-table, .hr-table) {
    min-width: 720px;
  }
}

.topbar:has(.topbar-menu-toggle) .topbar-inner {
  position: relative;
}

.topbar-menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 5px;
  border: 1px solid var(--border, var(--line, #e2e8f0));
  border-radius: 12px;
  background: var(--bg-2, var(--panel, #fff));
  color: var(--text, var(--ink, #0f172a));
}

.topbar-menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

@media (max-width: 760px) {
  .topbar-menu-toggle {
    display: inline-flex;
  }

  .topbar:has(.topbar-menu-toggle) .nav-actions {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 60;
    display: none !important;
    width: 100% !important;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--border, var(--line, #e2e8f0));
    border-radius: 14px;
    background: var(--bg-2, var(--panel, #fff));
    box-shadow: 0 20px 50px rgba(15, 23, 42, .16);
  }

  .topbar:has(.topbar-menu-toggle) .nav-actions.menu-open {
    display: grid !important;
  }

  .topbar:has(.topbar-menu-toggle) .nav-actions :where(a, button) {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }
}

#cursor,
#cursor-ring,
.custom-cursor,
.cursor-dot,
.cursor-ring {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

html[data-theme="dark"] :where(
  .intro,
  .intro .metric,
  .chat-shell,
  .chat-head,
  .sample-panel,
  .messages,
  .composer,
  .msg,
  .msg.bot,
  .msg.bot li
) {
  background: var(--bg-2, #0d1b2e) !important;
  background-color: var(--bg-2, #0d1b2e) !important;
  border-color: var(--border, #203653) !important;
  color: var(--text, #f8fafc) !important;
}

html[data-theme="dark"] :where(.intro .metric, .msg.bot li) {
  background: var(--bg-3, #132641) !important;
}

html[data-theme="dark"] :where(
  .lead,
  .intro .metric span,
  .status,
  .sample-label,
  .msg.bot p,
  .msg.bot li,
  .composer input::placeholder
) {
  color: var(--text-2, #cbd5e1) !important;
}

html[data-theme="dark"] :where(.msg.bot h3) {
  background: rgba(37, 99, 235, .22) !important;
  border-color: #3b82f6 !important;
  color: #dbeafe !important;
}

html[data-theme="dark"] :where(.msg.bot strong, .intro .metric b, .chat-head strong) {
  color: var(--text, #f8fafc) !important;
}

html[data-theme="dark"] :where(.composer input) {
  background: #0b1c33 !important;
  border-color: #4b6b96 !important;
  color: var(--text, #f8fafc) !important;
}

/* Dark-mode hardening for older project templates that ship local inline styles. */
html[data-theme="dark"] :where(
  .hr-app,
  .hr-app section,
  .hr-sidebar,
  .hr-card,
  .hr-chart,
  .hr-filter,
  .hr-check-filter,
  .hr-ai-chart,
  .hr-table-wrap,
  .hr-model-score,
  .hr-model-status,
  .hr-chat-input,
  .hr-upload,
  .hr-ai-output,
  .hr-section-stack details,
  .hr-section-stack summary,
  .hr-doc-panel,
  .etl-card,
  .etl-step,
  .etl-table th,
  .etl-table td,
  .etl-pill,
  .project-card,
  .metric-card,
  .module-card,
  .doc-card,
  .use-case-card,
  .method-step,
  .callout
) {
  background: #10233b !important;
  background-color: #10233b !important;
  border-color: rgba(147, 197, 253, .24) !important;
  color: #f8fbff !important;
}

html[data-theme="dark"] :where(
  .hr-filter-empty,
  .hr-insight,
  .hr-status,
  .hr-step,
  .hr-groq-note,
  .hr-badge,
  .etl-sla-note,
  .callout--info
) {
  background: #162c49 !important;
  background-color: #162c49 !important;
  border-color: rgba(147, 197, 253, .28) !important;
  color: #dbeafe !important;
}

html[data-theme="dark"] :where(
  .hr-input,
  .hr-select,
  .hr-textarea,
  .hr-btn,
  .hr-pill,
  .hr-tab,
  .etl-control select,
  .etl-control input,
  .etl-control input[type="number"]
) {
  background: #0b1b2f !important;
  background-color: #0b1b2f !important;
  border-color: rgba(147, 197, 253, .28) !important;
  color: #f8fbff !important;
}

html[data-theme="dark"] :where(.hr-btn.primary, .hr-tab.on, .btn--primary) {
  background: #2563eb !important;
  border-color: #3b82f6 !important;
  color: #fff !important;
}

html[data-theme="dark"] :where(
  .hr-note,
  .hr-mini-help,
  .hr-filter-note,
  .hr-brand p,
  .hr-label,
  .hr-upload *,
  .hr-ai-output,
  .hr-model-status,
  .hr-doc-section li,
  .etl-metric__label,
  .etl-metric__hint,
  .etl-step__body,
  .etl-control label,
  .etl-table th,
  .breadcrumb,
  .breadcrumb a,
  .sub-nav__link,
  .project-card p,
  .metric-card p,
  .doc-card p,
  .use-case-card p,
  [style*="color:var(--text-muted)"],
  [style*="color: var(--text-muted)"]
) {
  color: #c8d7ea !important;
}

html[data-theme="dark"] :where(
  .hr-insight b,
  .hr-doc-panel b,
  .hr-doc-section strong,
  .hr-kpi b,
  .etl-metric__value,
  .project-card h1,
  .project-card h2,
  .project-card h3,
  .metric-card strong,
  [style*="color:var(--text)"],
  [style*="color: var(--text)"]
) {
  color: #f8fbff !important;
}

html[data-theme="dark"] :where(.hr-table th, .hr-table td, .etl-table th, .etl-table td) {
  border-color: rgba(147, 197, 253, .18) !important;
}

html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: white"],
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"] {
  background: #10233b !important;
  background-color: #10233b !important;
  color: #f8fbff !important;
  border-color: rgba(147, 197, 253, .24) !important;
}

html[data-theme="dark"] [style*="background:var(--surface)"],
html[data-theme="dark"] [style*="background: var(--surface)"],
html[data-theme="dark"] [style*="background:#f8fafc"],
html[data-theme="dark"] [style*="background: #f8fafc"],
html[data-theme="dark"] [style*="background:#f0f4ff"],
html[data-theme="dark"] [style*="background: #f0f4ff"] {
  background: #162c49 !important;
  background-color: #162c49 !important;
  color: #dbeafe !important;
}

html[data-theme="dark"] :where(.hr-model-status, .hr-upload, .hr-ai-output, .hr-chat-input) {
  background: #10233b !important;
  background-color: #10233b !important;
  color: #f8fbff !important;
  border-color: rgba(147, 197, 253, .24) !important;
}

html[data-theme="dark"] :where(.hr-chart svg, .hr-ai-chart svg, svg.hr-chart-svg) {
  background: #10233b !important;
  color: #dbeafe !important;
}

html[data-theme="dark"] #test-results > div {
  background: #10233b !important;
  color: #f8fbff !important;
  border-color: rgba(147, 197, 253, .24) !important;
}

html[data-theme="dark"] #test-results > div span {
  color: #dbeafe !important;
}

html[data-theme="dark"] #test-results > div span:first-child {
  color: #93c5fd !important;
}