:root{
  --okc-bg:#dfe7f2;
  --okc-surface:#ffffff;
  --okc-surface-2:#f6f9fd;
  --okc-line:#c0cfdf;
  --okc-line-strong:#9eb2c9;
  --okc-text:#172b45;
  --okc-muted:#4f6580;
  --okc-blue:#1f61d8;
  --okc-blue-2:#174fb4;
  --okc-blue-soft:#eaf2ff;
  --okc-amber:#c88a1c;
  --okc-amber-bg:#fff4de;
  --okc-ok:#187f53;
  --okc-ok-bg:#eaf8f0;
  --okc-shadow:0 10px 26px rgba(18,43,72,.08);
}
body{
  background:linear-gradient(180deg,#eef3f8 0%, #dfe7f2 100%) !important;
  color:var(--okc-text) !important;
}
.heroTitle,.heroSubtitle,.modeBarLabel,.cardHeader h2,.uxCardHead,.formSectionTitle,.resultHead h2,.midTitle,.helpModalTitle{
  color:var(--okc-text) !important;
}
.muted,.sub,.modeBarSub,.uxMissingLead,.formSectionText,.helpModalSub,.vshAsOf,.historyTools,.historyList,.aiNote,#vinInfo,.vinAutoHint{
  color:var(--okc-muted) !important;
}
.card,.cardLike,.modeBar,.vinField,.uxSummaryCard,.uxMissingCard,.startup-hint,.midCard,.helpModal,.aiCard,#marketBox,.marketWrap .row{
  background:var(--okc-surface) !important;
  border:1px solid var(--okc-line) !important;
  box-shadow:var(--okc-shadow) !important;
}
.cardHeader{
  background:var(--okc-surface-2) !important;
  border-bottom:1px solid var(--okc-line) !important;
}
.uxMetric{
  background:#f7fbff !important;
  border:1px solid var(--okc-line) !important;
}
.btn{
  color:var(--okc-text) !important;
  border:1px solid var(--okc-line-strong) !important;
  background:#fff !important;
}
.btn.primary,.btn.accent,.btn.good,.modeBtn.active{
  background:linear-gradient(180deg,var(--okc-blue),var(--okc-blue-2)) !important;
  border-color:var(--okc-blue-2) !important;
  color:#fff !important;
}
.btn.danger{
  background:linear-gradient(180deg,#df9a24,#c78312) !important;
  border-color:#c78312 !important;
  color:#fff !important;
}
.modeBtn{
  background:#f5f8fc !important;
  border:1px solid var(--okc-line) !important;
  color:#2b4360 !important;
}
select,input,textarea{
  color:var(--okc-text) !important;
  background:#fff !important;
  border:2px solid #a8bbd0 !important;
}
select:focus,input:focus,textarea:focus{
  border-color:var(--okc-blue) !important;
  box-shadow:0 0 0 4px rgba(31,97,216,.14) !important;
}
.price,.heroPrice,#vshOut{
  color:var(--okc-blue-2) !important;
}
.warn,.smartWarn{
  color:#7a4d09 !important;
  background:var(--okc-amber-bg) !important;
  border:2px solid #dfbc73 !important;
}
.fieldStatus.valid,.fieldOk,.okPill{
  color:var(--okc-ok) !important;
}
.uxStatePill,.statusPill{
  color:#1e3f66 !important;
  background:var(--okc-blue-soft) !important;
  border:1px solid #b8cff3 !important;
}
.uxStatePill.is-ready{ background:var(--okc-ok-bg) !important; color:var(--okc-ok) !important; border-color:#aad9bf !important; }
.uxStatePill.is-warning{ background:var(--okc-amber-bg) !important; color:#7a4d09 !important; border-color:#dfbc73 !important; }
.uxStatePill.is-danger{ background:#fff0ef !important; color:#a23a32 !important; border-color:#edb1aa !important; }
.demoBadge{
  background:#204d9f !important;
  color:#fff !important;
  border:none !important;
  box-shadow:0 8px 20px rgba(16,36,68,.18) !important;
}