.lc-wrapper {
  max-width: 900px;
  margin: auto;
  padding: 20px;
  text-align:center;
}

/* CARD */
.lc-box {
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#f5f5f5;
  padding:30px;
  border-radius:25px;
  box-shadow:0 10px 0 #00CCC8;
}

.lc-col {
  width:40%;
  text-align:left;
}

input {
  width:100%;
  padding:12px;
  border-radius:12px;
  border:2px solid #ccc;
}

/* HEART */
.heart {
  display:inline-block;
  font-size:22px;
  animation:pulse 1s infinite;
}

@keyframes pulse {
  0% {transform:scale(1);}
  50% {transform:scale(1.3);}
  100% {transform:scale(1);}
}

/* DIVIDER */
.lc-divider {
  width:10%;
  text-align:center;
  position:relative;
}

.lc-divider::before {
  content:"";
  position:absolute;
  height:100%;
  width:1px;
  background:#ccc;
  left:50%;
}

/* BUTTON */
.lc-btn {
  margin-top:20px;
  padding:14px 40px;
  background:#00CCC8;
  color:#fff;
  border:none;
  border-radius:20px;
  cursor:pointer;
}

/* GENDER */
.lc-gender {
  display:flex;
  gap:10px;
  margin-top:10px;
}

.lc-gender button {
  flex:1;
  padding:10px;
  border:none;
  background:#ddd;
  border-radius:8px;
  cursor:pointer;
  color:#000;
}

/* ✅ ACTIVE = ONLY TEXT COLOR CHANGE */
.lc-gender .active {
  background:#b14d38;
  color:#00CCC8;
}

/* RESULT */
.lc-result-box {
  margin-top:30px;
  background:#fff;
  padding:25px;
  border-radius:20px;
}

.lc-result-flex {
  display:flex;
  justify-content:space-between;
  align-items:center;
}

#report {
  width:50%;
}

/* ACTION */
.lc-actions button {
  margin-top:20px;
  padding:12px;
  width:100%;
  background:#00CCC8;
  color:#fff;
  border:none;
  border-radius:25px;
}

/* MOBILE */
@media(max-width:768px){
  .lc-box{
    flex-direction:column;
    gap:20px;
  }

  .lc-col{
    width:100%;
  }

  .lc-divider{
    display:none;
  }

  .lc-result-flex{
    flex-direction:column;
  }

  #report{
    width:100%;
    margin-top:15px;
  }
}