.bmiGrid{
display:grid;
gap:20px;
}

.bmiRow{
display:grid;
grid-template-columns:140px minmax(0, 1fr);
gap:16px;
align-items:center;
}

.bmiLabel{
font-size:0.875rem;
font-weight:500;
color:var(--muted-strong);
}

.inputWrap,
.genderGroup,
.unitGroup{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.bmiBar{
height:10px;
border-radius:999px;
background:linear-gradient(90deg, #38bdf8 0%, #38bdf8 25%, #3ecf8e 25%, #3ecf8e 50%, #f59e0b 50%, #f59e0b 75%, #f87171 75%, #f87171 100%);
margin-top:16px;
position:relative;
}

.bmiMarker{
width:14px;
height:14px;
background:var(--text);
border-radius:50%;
position:absolute;
top:-2px;
left:50%;
transform:translateX(-50%);
transition:left .2s ease;
}

@media (max-width:640px){
.bmiRow{
grid-template-columns:1fr;
}
}