:root{
    --card:#ffffff;
    --text:#0f172a;
    --muted:#475569;
    --shadow:0 18px 44px rgba(15,23,42,.15);
  }
  
  *{ box-sizing:border-box; }
  
  body{
    margin:0;
    min-height:100vh;
    padding:clamp(14px, 3vw, 24px);
    display:grid;
    place-items:center;
    color:var(--text);
    background:
      radial-gradient(1200px 520px at 18% -8%, #e2e8f0 0%, rgba(226,232,240,0) 60%),
      radial-gradient(900px 420px at 88% 106%, #e0f2fe 0%, rgba(224,242,254,0) 60%),
      #f8fafc;
    font:500 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  }
  
  .bmi-card{
    width:min(100%, 640px);
    background:var(--card);
    border-radius:clamp(16px, 4vw, 22px);
    box-shadow:var(--shadow);
    padding:clamp(12px, 3vw, 16px) clamp(12px, 3vw, 16px) clamp(10px, 2.5vw, 14px);
  }
  
  .bmi-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:2px 4px clamp(8px, 2.2vw, 10px);
  }
  
  .bmi-title{
    font-weight:950;
    letter-spacing:.2px;
    font-size:clamp(16px, 4.2vw, 18px);
  }
  
  .bmi-unitSwitch{
    position:relative;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    width:260px;
    max-width:100%;
    padding:5px;
    border-radius:999px;
    border:1px solid #dbe3ee;
    background:linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
    overflow:hidden;
  }
  
  .bmi-unitSwitch::before{
    content:"";
    position:absolute;
    top:5px;
    left:5px;
    width:calc(50% - 5px);
    height:calc(100% - 10px);
    border-radius:999px;
    background:linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    box-shadow:
      0 10px 24px rgba(109,40,217,.28),
      inset 0 1px 1px rgba(255,255,255,.22);
    transition:transform .28s cubic-bezier(.2,.8,.2,1);
    z-index:0;
  }
  
  .bmi-unitSwitch.is-nonMetric::before{
    transform:translateX(100%);
  }
  
  .bmi-unitBtn{
    position:relative;
    z-index:1;
    border:0;
    background:transparent;
    border-radius:999px;
    padding:14px 18px;
    font-size:15px;
    font-weight:800;
    letter-spacing:-.2px;
    cursor:pointer;
    transition:color .22s ease, transform .18s ease;
  }
  
  .bmi-unitBtn.is-active{
    color:#ffffff;
    background:transparent;
    box-shadow:none;
  }
  
  .bmi-unitBtn:focus-visible{
    outline:2px solid #c4b5fd;
    outline-offset:2px;
  }
  
  .bmi-gaugeWrap{
    position:relative;
    padding:clamp(4px, 1.5vw, 6px) 0 0;
  }
  
  svg{
    width:100%;
    max-width:620px;
    height:auto;
    display:block;
  }
  
  .bmi-summary{
    position:absolute;
    top:clamp(8px, 2vw, 14px);
    left:clamp(8px, 2vw, 14px);
    right:clamp(8px, 2vw, 14px);
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:start;
    pointer-events:none;
  }
  
  .bmi-value{
    text-align:left;
    margin-top:0;
    width:fit-content;
    max-width:100%;
    padding:0;
  }
  
  .bmi-value .bmi-bmi{
    font-size:clamp(28px, 8vw, 44px);
    font-weight:950;
    letter-spacing:-1px;
    margin:0;
    line-height:1.0;
  }
  
  .bmi-value .bmi-status{
    margin:4px 0 0;
    font-size:clamp(12px, 2.8vw, 15px);
    font-weight:900;
  }
  
  .bmi-cta{
    margin-top:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    padding:6px 12px;
    border-radius:999px;
    border:0;
    background:#0f172a;
    color:#ffffff;
    font-size:12px;
    font-weight:800;
    line-height:1;
    text-decoration:none;
    pointer-events:auto;
    cursor:pointer;
  }
  
  .bmi-cta:disabled{
    cursor:not-allowed;
    opacity:.75;
    filter:saturate(.7);
  }
  
  .bmi-visual{
    margin-top:0;
    display:grid;
    place-items:center;
    justify-self:end;
    width:clamp(90px, 20vw, 128px);
    aspect-ratio:1 / 1;
    position:relative;
    padding:0;
  }
  
  .bmi-visualImg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
    opacity:0;
    transform:scale(0.92);
    transition:opacity 220ms ease, transform 260ms ease;
    filter:drop-shadow(0 10px 16px rgba(15,23,42,.14));
  }
  
  .bmi-visualImg.is-active{
    opacity:1;
    transform:scale(1);
  }
  
  @media (prefers-reduced-motion: reduce){
    .bmi-visualImg{
      transition:none;
      transform:none;
    }
  }
  
  .bmi-bottom{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(10px, 2.6vw, 14px);
    margin-top:clamp(10px, 2.4vw, 12px);
    align-items:start;
  }
  
  .bmi-controls{
    display:grid;
    grid-template-columns:1fr;
    gap:clamp(10px, 2.4vw, 12px);
    margin-top:0;
  }
  
  @media (max-width:680px){
    .bmi-bottom{ grid-template-columns:1fr; }
    .bmi-controls{ grid-template-columns:1fr 1fr; }
  }
  
  @media (max-width:560px){
    .bmi-controls{ grid-template-columns:1fr; }
    .bmi-top{
      flex-direction:column;
      align-items:stretch;
    }
    .bmi-unitSwitch{
      width:100%;
    }
  }
  
  .bmi-row{
    padding:clamp(10px, 2.5vw, 12px) clamp(10px, 2.5vw, 12px) clamp(8px, 2vw, 10px);
    border-radius:clamp(12px, 3vw, 16px);
    background:#fafafa;
    border:1px solid #eef0f3;
  }
  
  .bmi-row .bmi-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    margin-bottom:clamp(6px, 1.8vw, 8px);
    font-size:clamp(12px, 2.8vw, 13px);
    color:var(--muted);
  }
  
  .bmi-row .bmi-val{
    font-weight:900;
    font-variant-numeric:tabular-nums;
    color:var(--text);
  }
  
  .bmi-row .bmi-val input[type=number]{
    width:clamp(60px, 18vw, 76px);
    padding:2px 8px;
    border:1px solid #d9e0ea;
    border-radius:8px;
    text-align:right;
    font:inherit;
    font-weight:900;
    font-variant-numeric:tabular-nums;
    color:var(--text);
    background:#ffffff;
  }
  
  .bmi-row .bmi-val input[type=number]:focus{
    outline:2px solid #93c5fd;
    outline-offset:1px;
    border-color:#93c5fd;
  }
  
  input[type=range]{
    width:100%;
  }
  
  .bmi-legend{
    margin-top:0;
    padding:clamp(10px, 2.5vw, 12px);
    border:1px solid #eef0f3;
    border-radius:clamp(12px, 3vw, 16px);
    background:#fafafa;
  }
  
  .bmi-legendHead{
    display:grid;
    grid-template-columns:1fr auto;
    gap:clamp(8px, 2vw, 12px);
    font-weight:900;
    padding:clamp(4px, 1.4vw, 6px) 0 clamp(8px, 2vw, 10px);
    font-size:clamp(12px, 2.8vw, 13px);
  }
  
  .bmi-legendRow{
    display:grid;
    grid-template-columns:1fr auto;
    gap:clamp(8px, 2vw, 12px);
    align-items:center;
    padding:clamp(8px, 2.2vw, 10px) 0;
    border-top:1px dashed rgba(15,23,42,.12);
    font-size:clamp(12px, 2.8vw, 13px);
  }
  
  .bmi-cat{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:750;
  }
  
  .bmi-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    box-shadow:0 8px 18px rgba(0,0,0,.16);
    flex:0 0 auto;
  }
  
  .bmi-range{
    color:var(--muted);
    font-variant-numeric:tabular-nums;
  }
  
  .bmi-wLabel{
    font-size:14px;
    font-weight:950;
    fill:#ffffff;
    letter-spacing:.2px;
    paint-order:stroke;
    stroke:rgba(0,0,0,.25);
    stroke-width:2.5px;
    user-select:none;
  }
  
  @media (max-width:420px){
    .bmi-summary{
      top:10px;
      left:10px;
      right:10px;
    }
  
    .bmi-value{
      padding:0;
    }
  
    .bmi-visual{
      width:88px;
      padding:0;
    }
  
    .bmi-legendHead{
      grid-template-columns:1fr;
      gap:6px;
    }
  
    .bmi-legendRow{
      grid-template-columns:1fr;
      gap:4px;
    }
  
    .bmi-range{
      justify-self:start;
    }
  
    .bmi-unitBtn{
      padding:12px 14px;
      font-size:14px;
    }
  }