:root{
  --bg0:#eef3f9;
  --bg1:#f7f9fc;
  --card:#ffffff;
  --card2:#ffffff;
  --line:#d9e3f0;
  --text:#17324d;
  --muted:#617a94;
  --accent:#1d74f5;
  --accent2:#0f9f7a;
  --danger:#d97706;
  --shadow:0 10px 28px rgba(27,56,93,.08);
  --radius:18px;
}

body{
  background:
    radial-gradient(900px 480px at 0% 0%, rgba(29,116,245,.08), transparent 55%),
    radial-gradient(760px 420px at 100% 0%, rgba(15,159,122,.07), transparent 60%),
    linear-gradient(180deg, #f7faff 0%, #eef3f9 100%) !important;
  color: var(--text) !important;
}

.wrap{
  max-width: 1280px !important;
  padding: 24px 16px 40px !important;
}

.heroBanner{
  min-height: 120px;
  border: 1px solid #dbe6f3 !important;
  border-radius: 24px !important;
  background:
    linear-gradient(135deg, rgba(20,84,180,.95), rgba(29,116,245,.92) 48%, rgba(15,159,122,.90)) !important;
  box-shadow: 0 18px 38px rgba(31,79,145,.16) !important;
}
.heroBanner::before{
  background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,0)) !important;
}
.heroTitle{
  color: #fff !important;
  background: none !important;
  filter:none !important;
  text-shadow:none !important;
}
.heroSubtitle{
  color: rgba(255,255,255,.88) !important;
}

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

.modeBar,
.cardLike,
.uxSummaryCard,
.uxMissingCard,
.vinField,
.card,
.startup-hint,
.marketWrap .row,
#marketBox,
.helpModal,
.midCard,
.aiCard{
  background: #fff !important;
  border: 1px solid #dbe6f3 !important;
  color: var(--text) !important;
  box-shadow: var(--shadow) !important;
}

.modeBar{
  padding: 16px 18px !important;
  border-radius: 22px !important;
}
.modeBarLabel,.uxCardHead,.formSectionEyebrow{
  color: #2b6fd6 !important;
}
.modeBarSub,.uxMissingLead,.muted,.sub,#vinInfo,.vinAutoHint,.helpModalSub,.helpTip,.historyTools,.historyList,.aiNote,.vshAsOf{
  color: var(--muted) !important;
}

.topActionRow{
  gap: 10px !important;
}
.btn{
  border: 1px solid #cddbef !important;
  background: #fff !important;
  color: #16324d !important;
  box-shadow: 0 2px 0 rgba(255,255,255,.9), 0 8px 18px rgba(23,50,77,.06) !important;
}
.btn:hover{ filter: brightness(0.98); }
.btn.accent,.btn.primary,.btn.good{
  background: linear-gradient(180deg, #2b7bff, #1763d8) !important;
  color: #fff !important;
  border-color:#1763d8 !important;
}
.btn.danger{
  background: linear-gradient(180deg, #f59e0b, #d97706) !important;
  color: #fff !important;
  border-color:#d97706 !important;
}
.btn.secondary,.btn.link{
  background:#f6f9fe !important;
}

.modeBtn{
  background:#f5f8fd !important;
  color:#33516d !important;
  border:1px solid #d5e0ee !important;
}
.modeBtn.active{
  background:linear-gradient(180deg, #2b7bff, #1763d8) !important;
  color:#fff !important;
  border-color:#1763d8 !important;
}

label{
  color:#4c6883 !important;
  font-weight:700 !important;
}
select,input,textarea{
  background:#fff !important;
  color:#17324d !important;
  border:1px solid #cbd9e8 !important;
  box-shadow: inset 0 1px 2px rgba(17,24,39,.03) !important;
}
select:focus,input:focus,textarea:focus{
  border-color:#2b7bff !important;
  box-shadow:0 0 0 4px rgba(43,123,255,.12) !important;
}
select{
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(76,104,131,.95) 50%),
    linear-gradient(135deg, rgba(76,104,131,.95) 50%, transparent 50%) !important;
}

.startup-hint{
  display:flex;
  align-items:flex-start;
  gap:12px;
  border-radius:18px !important;
}
.startup-hint .hintIcon{
  background:#eef5ff !important;
  color:#1763d8 !important;
}

.uxSummaryGrid{
  grid-template-columns: repeat(5, minmax(120px, 1fr)) !important;
}
.uxMetric{
  background:#f8fbff !important;
  border:1px solid #dce8f4 !important;
}
.uxStatePill{
  border-color:#c6dbff !important;
  background:#edf5ff !important;
  color:#1f4b7b !important;
}
.uxStatePill.is-ready{
  background:#ecfbf6 !important;
  border-color:#bfe9d8 !important;
  color:#0f7f64 !important;
}
.uxStatePill.is-warning{
  background:#fff7e9 !important;
  border-color:#f6d9a2 !important;
  color:#9a5e07 !important;
}
.uxStatePill.is-danger{
  background:#fff0f0 !important;
  border-color:#f3c1c1 !important;
  color:#b64646 !important;
}
.uxMissingChip{
  background:#f4f8fd !important;
  border-color:#d9e4f1 !important;
  color:#264561 !important;
}

.layoutFlow{
  margin-top: 16px !important;
}
.grid{
  display:grid !important;
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, .9fr) !important;
  gap: 20px !important;
  align-items: start !important;
}
.panelInputs,.panelResult{
  position:relative !important;
  z-index:auto !important;
}
.panelResult{
  position: sticky !important;
  top: 16px !important;
}

.cardHeader{
  background:#f8fbff !important;
  border-bottom:1px solid #dde7f2 !important;
  padding:16px 18px !important;
}
.cardHeader h2, .midTitle, .helpModalTitle, .valueCommentTitle, .ageChartTitle{
  color:#17324d !important;
}

.cardBody{
  padding:18px !important;
}
.formGrid{
  gap:14px !important;
}
.formSectionBlock{
  background:#f7fafe;
  border:1px dashed #d6e2ef;
  border-radius:16px;
  padding:14px 15px;
}
.formSectionTitle{
  color:#17324d !important;
  font-weight:800 !important;
}
.formSectionText{
  color:var(--muted) !important;
}

.resultBox{
  background:linear-gradient(180deg, #ffffff, #fbfdff) !important;
  border-radius:20px !important;
}
.resultHeroPanel{
  background:linear-gradient(180deg, #eef6ff, #f8fbff) !important;
  border:1px solid #d5e6fb !important;
  box-shadow:none !important;
}
.price.heroPrice, .price, #vshOut{
  color:#1763d8 !important;
  text-shadow:none !important;
}
.warn,.smartWarn{
  background:#fff8ea !important;
  border:1px solid #f0d8a7 !important;
  color:#8a5b07 !important;
}
.vehicleState{
  background:#fff !important;
}
.valueComment,.marketComment,.marketPositionBox,.ageChartBox{
  background:#f8fbff !important;
  border:1px solid #d9e7f3 !important;
  color:#17324d !important;
}

.helpOverlay,
.midModal,
.aiModal{
  background: rgba(19, 38, 61, .26) !important;
  backdrop-filter: blur(8px) !important;
}

.demoBadge{
  background:#1763d8 !important;
  color:#fff !important;
  border:none !important;
}

@media (max-width: 1080px){
  .grid{
    grid-template-columns: 1fr !important;
  }
  .panelResult{
    position:relative !important;
    top:auto !important;
  }
}

@media (max-width: 760px){
  .wrap{
    padding:16px 12px 28px !important;
  }
  .uxOverview{
    grid-template-columns: 1fr !important;
    padding: 0 !important;
  }
  .uxSummaryGrid{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
  .topControls{
    padding:0 !important;
  }
  .topActionRow .btn.good{
    margin-left: 0 !important;
  }
  .vinInputRow{
    flex-direction:column !important;
  }
}