:root{
  --v51-bg:#d9e3ef;
  --v51-surface:#ffffff;
  --v51-surface-soft:#f4f8fd;
  --v51-line:#b8c7d8;
  --v51-line-strong:#96acc3;
  --v51-text:#1a2f49;
  --v51-text-2:#2e4867;
  --v51-muted:#516882;
  --v51-blue:#1f63dd;
  --v51-blue-2:#174fb8;
  --v51-blue-soft:#e9f2ff;
  --v51-amber:#a86b08;
  --v51-amber-bg:#fff3dc;
  --v51-green:#167a53;
  --v51-green-bg:#edf9f2;
  --v51-shadow:0 14px 34px rgba(18,43,72,.08);
}

body{
  background:
    radial-gradient(900px 420px at 0% 0%, rgba(31,99,221,.08), transparent 54%),
    linear-gradient(180deg, #edf3f9 0%, var(--v51-bg) 100%) !important;
  color:var(--v51-text) !important;
}

.wrap{ max-width:1280px !important; }
.heroBanner{
  box-shadow:0 18px 40px rgba(24,64,122,.18) !important;
}
.heroTitle, .heroSubtitle{ text-shadow:none !important; }

.topControls, .startup-hint, .uxOverview, .vinWrap, .vinToggleBar{
  max-width:1280px !important;
}

.card,
.cardLike,
.modeBar,
.vinField,
.uxSummaryCard,
.uxMissingCard,
.startup-hint,
.resultBox,
.midCard,
.helpModal,
.aiCard,
#marketBox,
.marketWrap .row,
.ageChartBox,
.valueComment,
.marketComment,
.marketPositionBox{
  background:var(--v51-surface) !important;
  border:1px solid var(--v51-line) !important;
  box-shadow:var(--v51-shadow) !important;
  color:var(--v51-text) !important;
}

.cardHeader,
.resultHead,
.midHeader,
.aiHead{
  background:linear-gradient(180deg, #f8fbff, #f1f6fc) !important;
  border-bottom:1px solid var(--v51-line) !important;
}

.cardHeader h2,
.resultHead h2,
.midTitle,
.helpModalTitle,
.aiTitle,
.valueCommentTitle,
.ageChartTitle,
.uxCardHead,
.modeBarLabel,
.formSectionTitle{
  color:var(--v51-text) !important;
}

.muted,
.sub,
.modeBarSub,
.uxMissingLead,
.formSectionText,
.helpModalSub,
.vshAsOf,
.historyTools,
.historyList,
.aiNote,
#vinInfo,
.vinAutoHint,
.marketMeta .muted,
.k,
.stat .k{
  color:var(--v51-muted) !important;
}

label,
.formSectionEyebrow{
  color:var(--v51-text-2) !important;
}

.btn{
  border:1px solid var(--v51-line-strong) !important;
  background:#fff !important;
  color:var(--v51-text) !important;
  box-shadow:0 2px 0 rgba(255,255,255,.75), 0 8px 18px rgba(17,34,58,.05) !important;
}
.btn:hover{ filter:brightness(.985); }
.btn.primary,
.btn.accent,
.btn.good,
.modeBtn.active{
  background:linear-gradient(180deg, var(--v51-blue), var(--v51-blue-2)) !important;
  border-color:var(--v51-blue-2) !important;
  color:#fff !important;
}
.btn.danger{
  background:linear-gradient(180deg, #e7a226, #ca8210) !important;
  border-color:#c27b0d !important;
  color:#fff !important;
}
.modeBtn{
  background:#f8fbff !important;
  border:1px solid #c2cfdd !important;
  color:var(--v51-text-2) !important;
}
.modeBtn.active{
  box-shadow:inset 0 -2px 0 rgba(255,255,255,.14), 0 10px 22px rgba(31,99,221,.20) !important;
}

.topActionRow #clearFormBtn{
  display:none !important;
}
.topActionRow{
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
}

select,
input,
textarea{
  background:#fff !important;
  color:var(--v51-text) !important;
  border:2px solid #aabdd2 !important;
}
select::placeholder,
input::placeholder,
textarea::placeholder{
  color:#7388a1 !important;
  opacity:1 !important;
}
select option{
  color:var(--v51-text) !important;
  background:#fff !important;
}
select:focus,
input:focus,
textarea:focus{
  border-color:var(--v51-blue) !important;
  box-shadow:0 0 0 4px rgba(31,99,221,.12) !important;
}

.resultHeroPanel{
  background:linear-gradient(180deg, #ffffff 0%, #f3f8fe 100%) !important;
  border:1px solid #cad8e6 !important;
  box-shadow:none !important;
}
.vshMetaLine{
  color:#607892 !important;
}
.vshMetaItem,
.vshMetaItem b,
#calcIdUi,
#calcDateUi{
  color:#334b66 !important;
}
.vshMetaItem b{
  font-weight:800 !important;
}
.price,
.heroPrice,
#vshOut{
  color:#174fb8 !important;
  text-shadow:none !important;
}
#calcStatus{
  color:#35516f !important;
  font-weight:700 !important;
}
#inputWarn,
#smartWarn,
.warn,
.smartWarn{
  background:var(--v51-amber-bg) !important;
  color:var(--v51-amber) !important;
  border:2px solid #e1bf78 !important;
}
.vehicleState{
  background:#fff !important;
  color:#294664 !important;
  border:1px solid #c5d2e0 !important;
}
.vehicleState.excellent,
.vehicleState.high{
  background:var(--v51-green-bg) !important;
  color:var(--v51-green) !important;
  border-color:#a9d7be !important;
}
.vehicleState.good,
.vehicleState.mid{
  background:#edf5ff !important;
  color:#22548c !important;
  border-color:#b8cff3 !important;
}
.vehicleState.soft,
.vehicleState.low,
.vehicleState.attn{
  background:#fff3dc !important;
  color:#975f06 !important;
  border-color:#e1bf78 !important;
}

.valueComment{
  background:#f7fbff !important;
  border-color:#d4e2ef !important;
}
.valueCommentTitle{
  color:#1d4e89 !important;
}
.valueCommentBody{
  color:#304a67 !important;
}
.marketComment{
  background:#f4fbf6 !important;
  border-color:#bfdac6 !important;
  color:#28583f !important;
}
.marketPositionBox{
  background:#f8fbff !important;
  border-color:#d4e2ef !important;
  color:#304a67 !important;
}
.ageChartBox{
  background:#ffffff !important;
  border-color:#d4e2ef !important;
}
.ageChartPill{
  background:#fff !important;
  border-color:#c7d6e6 !important;
  color:#35516f !important;
}

.valueRange,
#valueRange{
  background:#eef7ff !important;
  border-color:#c4def6 !important;
}
.valueRangeLabel{
  color:#4670a5 !important;
}
.valueRangeValue{
  color:#1956a8 !important;
}
.pRangeInline,
.pRangeInline b{
  color:#3a5675 !important;
}

.marketWrap::before{
  display:none !important;
}
.marketWrap{
  padding-top:16px !important;
  border-top:1px solid #d4e2ef !important;
}
#marketBox{
  background:linear-gradient(180deg, #ffffff, #f7fbff) !important;
}
.marketActionsGrid .btn.ai{
  color:#8a640d !important;
  background:#fff8e6 !important;
  border-color:#e6cf8e !important;
}
.stat{
  background:#ffffff !important;
  border:1px solid #d3e0eb !important;
}
.stat .v,
#mCount,#mAvg,#mMed,#mRange{
  color:#1a2f49 !important;
}
#marketStatus{
  color:#36516f !important;
  font-weight:700 !important;
}

.startup-hint{
  background:#ffffff !important;
  border:1px solid #c6d4e2 !important;
}
.startup-hint .hintIcon{
  color:var(--v51-blue) !important;
  background:#eaf2ff !important;
}
.startup-hint.ready{
  background:#f0faf4 !important;
  border-color:#b5d8c2 !important;
}
.startup-hint.ready .hintText{
  color:#216344 !important;
}
.startup-hint.busy{
  background:#eef5ff !important;
  border-color:#bdd1ef !important;
}
.startup-hint .hintText{
  color:#35516f !important;
}

.midModal,
.helpOverlay,
.aiModal{
  background:rgba(17,31,51,.26) !important;
  backdrop-filter:blur(8px) !important;
}
.midCard{
  background:#ffffff !important;
  border:1px solid #c8d6e4 !important;
}
.midHeader{
  background:linear-gradient(180deg, #f8fbff, #edf4fb) !important;
}
.midTitle,
.midHeader .btn,
.midClose{
  color:var(--v51-text) !important;
}
.historySearch,
.historySort{
  background:#ffffff !important;
  color:var(--v51-text) !important;
  border:2px solid #aec1d5 !important;
}
.histItem{
  background:#f3f7fc !important;
  border:1px solid #d2deea !important;
  box-shadow:none !important;
}
.histItem:hover{
  background:#eef5ff !important;
  border-color:#b9cff3 !important;
}
.histTitle,
.histTop .t{
  color:var(--v51-text) !important;
}
.histMeta{
  color:#607892 !important;
}
.histPrice,
.histTop .p{
  color:#1760d1 !important;
  background:none !important;
  -webkit-text-fill-color:#1760d1 !important;
  filter:none !important;
}
.historyStarOnly{
  color:#8b6b12 !important;
  background:#fff9ea !important;
  border-color:#ecd38c !important;
}

#helpPanel .helpModalBody,
.helpModalBody,
.aiBody{
  color:var(--v51-text) !important;
}

.demoBadge{
  background:#204ea4 !important;
  color:#fff !important;
  box-shadow:0 10px 24px rgba(16,36,68,.18) !important;
}

.infoBubble{
  color:#203752 !important;
  background:#ffffff !important;
  border-color:#cad8e6 !important;
  box-shadow:0 12px 28px rgba(17,34,58,.12) !important;
}

@media (max-width: 900px){
  .topActionRow{
    grid-template-columns:1fr !important;
  }
  .demoBadge{
    top:22px !important;
    right:18px !important;
  }
}

@media (max-width: 700px){
  .resultHeroPanel{
    padding:14px 12px 12px !important;
  }
  .vshMetaLine{
    gap:4px !important;
  }
  .midCard{
    border-radius:24px !important;
  }
}