.bmi-calculator {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap:20px;
  max-width:1200px;
  width:100%;
  margin:0 auto;
  padding:20px;
  box-sizing:border-box;
}
.bmi-field {
  background:#fff;
  border:1px solid #e0e0e0;
  border-radius:8px;
  padding:16px;
  text-align:center;
  box-sizing:border-box;
}
.field-label {
  font-weight:600;
  color:#0073aa;
  margin-bottom:12px;
  display:block;
}
.gender-options {
  display:flex;
  justify-content:center;
  gap:20px;
}
.gender-label input { display:none; }
.gender-label .icon {
  background:#f0f0f0;
  color:#888;
  width:40px;
  height:40px;
  font-size:20px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:4px;
  transition:all .2s;
}
.gender-label input:checked + .icon { background:#0073aa; color:#fff; }
.gender-label input:checked + .icon + .text { color:#0073aa; }
.slider-wrap {
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:center;
  margin-bottom:8px;
}
.slider-wrap .value {
  width:auto;
  text-align:center;
  font-size:24px;
  font-weight:700;
}
input[type=range] {
  -webkit-appearance:none;
  width:100%;
  height:6px;
  border-radius:3px;
  background:#e0e0e0;
  accent-color:#0073aa;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#0073aa;
  border:2px solid #fff;
  box-shadow:0 0 2px rgba(0,0,0,.2);
  cursor:pointer;
}
.bmi-actions {
  grid-column:1/-1;
  display:flex;
  justify-content:center;
  gap:16px;
  margin-top:20px;
  box-sizing:border-box;
}
.btn {
  padding:12px 32px;
  border:none;
  border-radius:50px;
  font-size:16px;
  cursor:pointer;
}
.btn.primary {
  background:#00b2e3;
  color:#fff;
}
.btn.outline {
  background:#e00000;
  color:#fff;
}
.bmi-result {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:200px 1fr;
  width:100%;
  margin-top:20px;
  border:1px solid #ddd;
  border-radius:6px;
  overflow:hidden;
  box-sizing:border-box;
}
.result-value {
  background:#0CC656;
  color:#fff;
  padding:16px;
  text-align:center;
}
.result-text {
  background:#fafafa;
  color:#333;
  padding:16px;
}
@media(max-width:768px) {
  .bmi-calculator { grid-template-columns:1fr; padding:10px; }
  .bmi-actions { flex-direction:column; }
  .btn { width:100%; }
  .bmi-result { grid-template-columns:1fr; }
  .result-value p:last-child { font-size:32px; font-weight:bold; }
}