@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

:root{
  --bg-1: #0f1724;
  --bg-2: #063a1b;
  --accent: #7be495;
  --accent-2: #56c596;
  --card-bg: rgba(255,255,255,0.06);
  --glass: rgba(255,255,255,0.06);
  --muted: rgba(255,255,255,0.75);
  --danger: #ff7a7a;
  --success: #8ef29a;
  --radius: 14px;
}

*{box-sizing: border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background-image: url(back.jpg);
}

/* centraliza */
main{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:40px 20px;
}

/* cartão principal */
.container{
  width: min(420px, 92vw);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.12));
  border-radius: var(--radius);
  padding: 26px;
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:center;
  box-shadow: 0 10px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  backdrop-filter: blur(8px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.04);
}

/* título */
.title{
  width:100%;
  text-align:center;
  font-weight:700;
  font-size:1.6rem;
  color: #eafaf0;
  letter-spacing:0.6px;
  padding-bottom:8px;
  border-bottom: 1px dashed rgba(255,255,255,0.04);
}

/* inputs */
.input{
  display:flex;
  width:100%;
  gap:12px;
  align-items:center;
  justify-content:space-between;
}
.input label{
  flex:0 0 80px;
  color: rgba(255,255,255,0.9);
  font-weight:600;
  font-size:0.95rem;
}
.input input{
  flex:1;
  height:48px;
  padding:8px 14px;
  border-radius:10px;
  border: none;
  outline:none;
  background: rgba(255,255,255,0.02);
  color: #f3fff6;
  font-size:1.05rem;
  font-weight:600;
  text-align:center;
  transition: box-shadow .18s ease, transform .12s ease, background .18s ease;
  box-shadow: 0 4px 10px rgba(2,6,23,0.45);
}
.input input::placeholder{ color: rgba(255,255,255,0.35); font-weight:500 }
.input input:focus{
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(6,120,92,0.12), 0 0 0 6px rgba(86,197,150,0.06);
  background: rgba(255,255,255,0.03);
}

/* botão principal */
button{
  width:100%;
  height:48px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  font-weight:700;
  font-size:1rem;
  color:#082214;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 18px rgba(6,120,92,0.26);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
button:hover{ transform: translateY(-3px); box-shadow: 0 14px 30px rgba(6,120,92,0.28) }
button:active{ transform: translateY(0) scale(.997) }
button:disabled{ opacity: .6; cursor:not-allowed; transform:none; box-shadow:none }

/* resultado */
.result{
  width:100%;
  min-height:100px;
  border-radius:10px;
  padding:14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.08));
  box-shadow: 0 8px 20px rgba(3,6,23,0.55);
  color:#e8fff0;
  font-size:1rem;
  transition: transform .2s ease, opacity .2s ease;
  user-select: none;
  overflow:hidden;
}

/* valor do IMC grande */
.result .value{
  font-size:2.2rem;
  font-weight:800;
  color: #e9bd20;
  letter-spacing:0.8px;
}

/* categoria com badge */
.result .category{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  font-weight:700;
  font-size:.9rem;
  color:#052014;
  background: linear-gradient(90deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
  align-self:flex-start;
}

/* variações de cor - use classes dinâmicas no HTML (ex: .result.good) */
.result.good { background: linear-gradient(90deg, rgba(126,237,174,0.12), rgba(86,197,150,0.06)); color:#052014 }
.result.normal { background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(0,0,0,0.06)); color: #fdf2cd }
.result.warn { background: linear-gradient(90deg, rgba(255,208,122,0.08), rgba(255,145,77,0.04)); color:#2b1705 }
.result.danger { background: linear-gradient(90deg, rgba(255,120,120,0.08), rgba(255,88,88,0.04)); color:#2b0707 }

/* responsividade */
@media (max-width:420px){
  .title{ font-size:1.25rem }
  .input label{ flex:0 0 68px; font-size:.9rem }
  .input input{ height:44px; font-size:1rem }
  button{ height:44px }
  .result .value{ font-size:1.6rem }
}