:root {
  color-scheme: light !important;
  --merito-ink: #0c1d36;
  --merito-ink-2: #243b5a;
  --merito-muted: #64748b;
  --merito-gold: #b98a2d;
  --merito-gold-strong: #a8761f;
  --merito-bg: #ffffff;
  --merito-ivory: #f8f8f5;
  --merito-sky: #eef7ff;
  --merito-surface: #fbfcfd;
  --merito-border: #e6ebf2;
  --merito-border-strong: #d7e0ea;
  --merito-success: #18794e;
  --merito-danger: #b42318;
  --merito-warning: #8a6116;
  --merito-radius: 18px;
  --merito-shadow: 0 14px 38px rgba(12,29,54,.08);

  --bg: var(--merito-ivory) !important;
  --panel: #ffffff !important;
  --panel-strong: #ffffff !important;
  --line: var(--merito-border) !important;
  --text: var(--merito-ink) !important;
  --muted: var(--merito-muted) !important;
  --soft: var(--merito-ink-2) !important;
  --accent: var(--merito-gold) !important;
  --accent-2: var(--merito-ink) !important;
  --warning: var(--merito-warning) !important;
  --danger: var(--merito-danger) !important;
  --radius: var(--merito-radius) !important;
  --shadow: var(--merito-shadow) !important;
}

html, body {
  background: var(--merito-ivory) !important;
  color: var(--merito-ink) !important;
}
html { overflow-x: hidden; }
body {
  background-image: none !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Arial, sans-serif !important;
  max-width: 100vw;
  overflow-x: hidden;
}

.noise, .scan-w, .scan, .orb, .orbs, .particles, .particle,
[class*="noise"], [class*="scan-w"], [class*="particle-field"] {
  display: none !important;
}

.panel, .card, .metric, .list-item, .stance-card,
.passport-groups > div, .delta-grid > div,
.room-card, .quality-card, .checkpoint-card,
.company-card, .candidate-card, .mission-card,
[data-surface], [class*="panel"] {
  background: #ffffff !important;
  background-image: none !important;
  color: var(--merito-ink) !important;
  border-color: var(--merito-border) !important;
  box-shadow: var(--merito-shadow) !important;
}

.hero, [class*="hero"] {
  background-color: var(--merito-surface) !important;
  background-image: none !important;
  color: var(--merito-ink) !important;
}
.hero::before, .hero::after { opacity: .18 !important; }

.topbar, .nav, header {
  background: rgba(255,255,255,.96) !important;
  color: var(--merito-ink) !important;
  border-color: var(--merito-border) !important;
  box-shadow: none !important;
}

h1, h2, h3, h4, strong, .brand, .logo { color: var(--merito-ink) !important; }
p, small, .muted, .sync-state, .feedback, .sub, .meta { color: var(--merito-muted) !important; }
.eyebrow, .positive, .brand-mark { color: var(--merito-gold-strong) !important; }

button, .primary-button, .btn-p, .cta-primary { border-radius: 12px !important; }
.primary-button, .btn-p, .cta-primary, button.primary {
  background: var(--merito-ink) !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: var(--merito-ink) !important;
}
.primary-button:hover, .btn-p:hover, .cta-primary:hover, button.primary:hover { background: var(--merito-ink-2) !important; }
.ghost-button, .btn-o, .cta-secondary, button.alt {
  background: #ffffff !important;
  color: var(--merito-ink) !important;
  border-color: var(--merito-border-strong) !important;
}

input, select, textarea, .inp,
.whatif-form input, .whatif-form select {
  background: #ffffff !important;
  color: var(--merito-ink) !important;
  border-color: var(--merito-border-strong) !important;
}
input:focus, select:focus, textarea:focus, .inp:focus {
  outline: 3px solid var(--merito-ink) !important;
  border-color: var(--merito-gold) !important;
}

.status-ring { background: conic-gradient(var(--merito-gold) var(--progress), #edf1f5 0) !important; }
.status-ring::after { background: #ffffff !important; }
.status-ring span { color: var(--merito-ink) !important; }

.privacy-chip, .simulation-chip, .score-pill,
.pill, [class*="chip"], [class*="badge"] {
  background: var(--merito-sky) !important;
  color: var(--merito-ink) !important;
  border-color: var(--merito-border-strong) !important;
}

.error-banner, .error, [role="alert"] {
  background: #fff5f3 !important;
  color: var(--merito-danger) !important;
  border-color: #f3c3bc !important;
}

.legal, .legal-wrap, .content, article { color: var(--merito-ink) !important; }
footer {
  background: var(--merito-surface) !important;
  color: var(--merito-muted) !important;
  border-color: var(--merito-border) !important;
}

/* M-037: keep the legacy language control away from header/avatar controls. */
[data-mlang-switch] {
  top: auto !important;
  right: 14px !important;
  bottom: 14px !important;
  z-index: 8000 !important;
  background: rgba(255,255,255,.98) !important;
  border: 1px solid var(--merito-border) !important;
  box-shadow: 0 8px 24px rgba(12,29,54,.10) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-mlang-switch] button { color: var(--merito-ink) !important; min-width: 34px; min-height: 30px; }

/* Used by the renderer when a page has no native skip link. */
.merito-skip-link {
  position: fixed;
  left: 12px;
  top: 10px;
  z-index: 100000;
  transform: translateY(-160%);
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--merito-ink);
  color: #fff !important;
  text-decoration: none;
}
.merito-skip-link:focus { transform: translateY(0); }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--merito-ink) !important;
  outline-offset: 3px !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (max-width: 760px) {
  body { min-width: 0 !important; }
  .shell, .wrap, .wrap-w {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .topbar, .nav {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    flex-wrap: wrap !important;
  }
  main, section, .panel, .card, .two-columns, .status-grid {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .two-columns, .status-grid, .g2, .g3, .g4 {
    grid-template-columns: minmax(0,1fr) !important;
  }
  input, select, textarea, button { max-width: 100% !important; }
  [data-mlang-switch] { right: 10px !important; bottom: 10px !important; }
}