/* Minimal, white, responsive styling for IST BMI Calculator */
/* Only button color variables for themeing */
:root{
  --ist-accent: #0b76ef; /* primary button color - change if needed */
  --ist-bg: #ffffff;
  --ist-text: #111827;
  --ist-muted: #6b7280;
  --ist-radius: 10px;
}

.ist-bmi-wrap{
  max-width: 420px;
  margin: 1rem auto;
  background: var(--ist-bg);
  color: var(--ist-text);
  border-radius: var(--ist-radius);
  box-shadow: 0 1px 6px rgba(16,24,40,0.06);
  padding: 18px;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

.ist-bmi-title{
  margin: 0 0 8px 0;
  font-size: 1.125rem;
}

.ist-bmi-form label{
  display:block;
  margin-bottom:10px;
  font-size:0.95rem;
  color:var(--ist-muted);
}

.input-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
}

.input-row input{
  flex:1;
  padding:10px 12px;
  border:1px solid #e6e9ef;
  border-radius:8px;
  font-size:1rem;
  outline:none;
  background: #fff;
}

.input-row input:focus{
  box-shadow: 0 0 0 3px rgba(11,118,239,0.08);
  border-color: rgba(11,118,239,0.4);
}

.unit{
  font-size:0.9rem;
  color:var(--ist-muted);
  white-space:nowrap;
}

.ist-result{
  margin-top:12px;
  padding:10px;
  border-radius:8px;
  background: #fbfbfd;
  border: 1px solid #f0f3f7;
}

.bmi-score{
  font-weight:600;
  color:var(--ist-text);
}

.bmi-category{
  color:var(--ist-muted);
  margin-top:4px;
}

.ist-button{
  margin-top:12px;
  width:100%;
  padding:10px 12px;
  border:0;
  border-radius:8px;
  background:var(--ist-accent);
  color:#fff;
  font-weight:600;
  cursor:pointer;
}

.ist-button:active{ transform: translateY(1px); }

@media (max-width:480px){
  .ist-bmi-wrap{ padding:14px; margin: 0.75rem; }
  .ist-bmi-title{ font-size:1rem; }
}