*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

body{background:#f0f2f5;color:#333}
.egg-footer,.egg-footer a{color:rgba(0,0,0,.45) !important}

.bmi-container{
  display:flex;flex-direction:column;align-items:center;gap:2rem;
  padding:60px 1rem 2rem;max-width:480px;margin:0 auto;min-height:100dvh;
}

.bmi-card{
  width:100%;background:#fff;
  border-radius:16px;padding:2rem 1.5rem;
  box-shadow:0 2px 12px rgba(0,0,0,.1);
}

.bmi-title{
  font-size:1.6rem;font-weight:700;text-align:center;
  color:#00897B;margin-bottom:.25rem;
}
.bmi-subtitle{
  text-align:center;color:#666;
  font-size:.9rem;margin-bottom:1.5rem;
}

.bmi-form{display:flex;flex-direction:column;gap:1.2rem}

.input-group label{
  display:block;font-size:.85rem;font-weight:600;
  color:#333;margin-bottom:.4rem;
}

.input-wrapper{
  display:flex;align-items:center;gap:.5rem;
  background:#f5f5f5;border-radius:12px;
  padding:.6rem 1rem;border:2px solid #e0e0e0;
  transition:border-color .2s;
}
.input-wrapper:focus-within{border-color:#00897B}

.input-wrapper input{
  flex:1;border:none;outline:none;background:transparent;
  font-size:1.2rem;font-weight:600;color:#222 !important;
  width:100%;-webkit-text-fill-color:#222 !important;
}
.input-wrapper input::placeholder{color:#999 !important;-webkit-text-fill-color:#999 !important}
.input-wrapper input::-webkit-inner-spin-button,
.input-wrapper input::-webkit-outer-spin-button{-webkit-appearance:none}
.input-wrapper input[type=number]{-moz-appearance:textfield}

.unit{
  font-size:.85rem;font-weight:600;
  color:#666;white-space:nowrap;
}

.btn-calc{
  width:100%;padding:.85rem;border:none;border-radius:12px;
  background:#00897B;color:#fff;
  font-size:1.05rem;font-weight:700;cursor:pointer;
  transition:opacity .2s,transform .1s;
}
.btn-calc:hover{opacity:.9}
.btn-calc:active{transform:scale(.98)}
.btn-calc:focus-visible{outline:3px solid #00897B;outline-offset:2px}

.bmi-result{margin-top:1.5rem;animation:fadeIn .4s ease}

@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.result-bmi{display:flex;align-items:baseline;justify-content:center;gap:.5rem;margin-bottom:1rem}
.result-label{font-size:.9rem;color:#666}
.result-value{font-size:2.8rem;font-weight:800;color:#00897B}

.result-bar-container{margin:1rem 0}
.result-bar{
  position:relative;display:flex;height:14px;border-radius:7px;overflow:visible;
}
.bar-segment{height:100%}
.bar-under{flex:18.5;background:#42a5f5;border-radius:7px 0 0 7px}
.bar-normal{flex:6.5;background:#66bb6a}
.bar-over{flex:5;background:#ffa726}
.bar-obese{flex:10;background:#ef5350;border-radius:0 7px 7px 0}
.bar-marker{
  position:absolute;top:-6px;width:6px;height:26px;
  background:#222;border-radius:3px;
  box-shadow:0 1px 4px rgba(0,0,0,.3);
  transition:left .4s ease;
}
.bar-labels{
  position:relative;display:flex;
  padding:6px 0 0;font-size:.7rem;color:#888;
}
.bar-label-item{position:absolute;transform:translateX(-50%)}

.result-category{
  text-align:center;font-size:1.15rem;font-weight:700;
  padding:.5rem 1rem;border-radius:8px;margin:.75rem 0;
}
.result-category.under{background:#e3f2fd;color:#1565c0}
.result-category.normal{background:#e8f5e9;color:#2e7d32}
.result-category.over{background:#fff3e0;color:#e65100}
.result-category.obese{background:#ffebee;color:#c62828}

.result-info{
  text-align:center;font-size:.8rem;
  color:#888;margin-top:.5rem;
}

.weight-ranges{
  margin-top:1.2rem;padding:1rem;
  background:#f8f9fa;border-radius:12px;
}
.weight-ranges-title{
  font-size:.85rem;font-weight:700;color:#333;
  margin-bottom:.6rem;text-align:center;
}
.weight-range-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:.4rem .6rem;border-radius:6px;margin-bottom:.3rem;
  font-size:.85rem;
}
.weight-range-row:last-child{margin-bottom:0}
.weight-range-row.under{background:#e3f2fd}
.weight-range-row.normal{background:#e8f5e9}
.weight-range-row.over{background:#fff3e0}
.weight-range-row.obese{background:#ffebee}
.weight-range-label{font-weight:600;color:#333}
.weight-range-value{font-weight:700;color:#555}
.weight-range-row.under .weight-range-label{color:#1565c0}
.weight-range-row.normal .weight-range-label{color:#2e7d32}
.weight-range-row.over .weight-range-label{color:#e65100}
.weight-range-row.obese .weight-range-label{color:#c62828}
.weight-range-row.current{outline:2px solid #00897B;outline-offset:-1px}

.bmi-table-section{width:100%}
.table-title{
  font-size:1.1rem;font-weight:700;
  color:#333;margin-bottom:.75rem;text-align:center;
}
.table-wrapper{
  background:#fff;border-radius:12px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);overflow:hidden;
}
.bmi-table{width:100%;border-collapse:collapse}
.bmi-table th{
  padding:.6rem 1rem;font-size:.8rem;font-weight:600;
  color:#888;text-align:left;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.bmi-table td{padding:.7rem 1rem;font-size:.9rem;color:#333}
.bmi-table tr:not(:last-child) td{border-bottom:1px solid rgba(0,0,0,.05)}
.row-under td:first-child{border-left:3px solid #42a5f5}
.row-normal td:first-child{border-left:3px solid #66bb6a}
.row-over td:first-child{border-left:3px solid #ffa726}
.row-obese td:first-child{border-left:3px solid #ef5350}

@media(max-width:360px){
  .bmi-card{padding:1.5rem 1rem}
  .result-value{font-size:2.2rem}
}