*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: 'Poppins', sans-serif;
}

body{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background: linear-gradient(135deg, #1d2671, #c33764);
}

.container{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}

.login-box{
  width:380px;
  padding:40px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(15px);
  border-radius:15px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  text-align:center;
  color:#fff;
  animation: fadeIn 1s ease;
}

.login-box h2{
  font-size:26px;
  margin-bottom:10px;
}

.login-box p{
  font-size:14px;
  margin-bottom:30px;
  opacity:0.8;
}

.input-box{
  position:relative;
  margin-bottom:25px;
}

.input-box input{
  width:100%;
  padding:12px;
  background: transparent;
  border:1px solid rgba(255,255,255,0.5);
  border-radius:8px;
  outline:none;
  color:#fff;
  font-size:15px;
}

.input-box label{
  position:absolute;
  top:50%;
  left:12px;
  transform:translateY(-50%);
  color:#ddd;
  font-size:14px;
  pointer-events:none;
  transition:0.3s;
}

.input-box input:focus ~ label,
.input-box input:valid ~ label{
  top:-8px;
  background:#c33764;
  padding:0 6px;
  font-size:12px;
  border-radius:4px;
}

button{
  width:100%;
  padding:12px;
  border:none;
  border-radius:8px;
  background: linear-gradient(135deg,#ff512f,#dd2476);
  color:#fff;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  transition:0.3s;
}

button:hover{
  transform:translateY(-2px);
  box-shadow:0 5px 15px rgba(0,0,0,0.4);
}

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