body {
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(135deg, #74ebd5, #ACB6E5);
  padding: 30px;
}
.box {
  background: #fff;
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
  max-width: 480px;
  margin: auto;
  animation: fadeIn 1s ease;
}
@keyframes fadeIn {
  from {opacity: 0; transform: translateY(-20px);}
  to {opacity: 1; transform: translateY(0);}
}
label { display:block; margin-top:12px; font-weight:600; color:#333; transition:0.3s; }
input, select {
  width:100%; padding:10px; margin-top:6px;
  border:1px solid #ccc; border-radius:8px; outline:none;
  transition:0.3s ease;
}
input:hover, select:hover { border-color:#007bff; box-shadow:0 0 5px rgba(0,123,255,0.5); }
button {
  background:#007bff; color:#fff; border:none;
  padding:10px; border-radius:8px;
  cursor:pointer; margin-top:15px; width:48%;
  transition:0.3s ease;
}
button:hover { background:#0056b3; transform:scale(1.05); }
.btns { display:flex; justify-content:space-between; flex-wrap:wrap; }
.result {
  background:#e8ffe8;
  padding:15px; border-radius:10px; margin-top:20px;
  animation: fadeIn 0.5s ease;
}
.popup {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.5); display: flex;
  justify-content: center; align-items: center;
  visibility: hidden; opacity: 0; transition: all 0.4s ease;
}
.popup.active { visibility: visible; opacity: 1; }
.popup-content {
  background: white; padding: 30px; border-radius: 15px;
  text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.popup-content h3 { color: #007bff; }