*{

  margin:0;

  padding:0;

  box-sizing:border-box;

  font-family:'Montserrat', sans-serif;

}



body{

  min-height:100vh;

  display:flex;

  justify-content:center;

  align-items:center;

  background:linear-gradient(135deg,#77aad9,#cfe3f7);

  padding:20px;

}



/* CARD */

.login-card{

  width:100%;

  max-width:380px;

  padding:45px 35px;

  border-radius:25px;

  background:rgba(255,255,255,0.9);

  backdrop-filter:blur(10px);

  box-shadow:0 25px 60px rgba(0,0,0,0.15);

  text-align:center;

}



/* LOGO */

.logo{

  margin-bottom:25px;

}



.logo img{

  width:160px;

  max-width:100%;

}



/* TITLE */

.login-title{

  font-size:22px;

  font-weight:600;

  margin-bottom:30px;

  color:#3b6c9e;

}



/* INPUT GROUP */

.input-group{

  position:relative;

  margin-bottom:20px;

}



/* Left icon (user / lock) */

.input-group i:first-child{

  position:absolute;

  left:15px;

  top:50%;

  transform:translateY(-50%);

  color:#77aad9;

}



/* Input field */

.input-group input{

  width:100%;

  padding:14px 45px 14px 45px; /* left + right space */

  border-radius:12px;

  border:2px solid #77aad9;

  outline:none;

  font-size:14px;

  transition:0.3s;

}



/* 👁 Toggle icon (right side) */

.toggle-password{

  position:absolute;

  right:15px;

  top:50%;

  transform:translateY(-50%);

  cursor:pointer;

  color:#77aad9;

}



.input-group input[name="username"]{

  text-transform: uppercase;

}



/* BUTTON */

.login-btn{

  width:100%;

  padding:14px;

  margin-top:10px;

  border:none;

  border-radius:12px;

  background:linear-gradient(135deg,#77aad9,#4f86b6);

  color:white;

  font-weight:600;

  font-size:15px;

  cursor:pointer;

  transition:0.3s;

}



.login-btn:hover{

  transform:translateY(-2px);

  box-shadow:0 10px 25px rgba(0,0,0,0.2);

}



/* LINKS */

.extra-links{

  margin-top:20px;

  font-size:13px;

}



.extra-links a{

  text-decoration:none;

  color:#4f86b6;

  font-weight:500;

}



/* MOBILE ADJUSTMENTS */

@media (max-width:480px){



  .login-card{

    padding:35px 20px;

    border-radius:20px;

  }



  .logo img{

    width:120px;

  }



  .login-title{

    font-size:18px;

  }



}



/* Fade-in animation */

.login-card{

  opacity:0;

  transform:translateY(30px);

  animation:fadeInUp 0.8s ease forwards;

}



@keyframes fadeInUp{

  to{

    opacity:1;

    transform:translateY(0);

  }

}



/* Password toggle icon */

.toggle-password{

  position:absolute;

  right:15px;

  top:50%;

  transform:translateY(-50%);

  cursor:pointer;

  color:#77aad9;

}



/* Error message */

.error-message{

  margin-top:15px;

  font-size:13px;

  color:#e74c3c;

  min-height:18px;

}