/* =========================
   GLOBAL
========================= */

body{
  min-height:100vh;
  background: linear-gradient(135deg,#eef4ff,#ffffff,#eef4ff);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* =========================
   CONTAINER
========================= */

.login-container{
  width:100%;
  max-width:520px;
  margin:auto;
}

/* =========================
   LOGO
========================= */

.logo-box{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:12px;
}

.logo-img{
  width:90px;
  height:90px;
  object-fit:contain;
  border-radius:16px;
  padding:8px;
  background:white;
  box-shadow:
    0 10px 25px rgba(0,0,0,0.08),
    0 0 0 1px rgba(0,0,0,0.03);
  transition: all 0.3s ease;
}

.logo-img:hover{
  transform: scale(1.05);
}

/* Responsive logo */

@media(max-width:768px){

  .logo-img{
    width:75px;
    height:75px;
  }

}

@media(max-width:480px){

  .logo-img{
    width:65px;
    height:65px;
  }

}

/* =========================
   TEXT
========================= */

.gradient-text{
  color: #39b32c;
  font-weight:700;
  font-size:28px;
}

@media(max-width:576px){
  .gradient-text{
    font-size:24px;
  }
}

/* =========================
   CARD
========================= */

.login-card{

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

  backdrop-filter: blur(14px);

  border-radius:20px;

  padding:35px;

  box-shadow:
    0 10px 40px rgba(0,0,0,0.10),
    0 2px 8px rgba(0,0,0,0.04);

  transition: all 0.3s ease;
}

.login-card:hover{
  transform: translateY(-3px);
}

/* responsive card */

@media(max-width:768px){

  .login-card{
    padding:28px;
  }

}

@media(max-width:480px){

  .login-card{
    padding:22px;
  }

}

/* =========================
   INPUT
========================= */

.form-control{

  padding:12px;

  border-radius:10px;

  font-size:15px;

}

.input-group-text{

  border-radius:10px 0 0 10px;

}

/* =========================
   BUTTON
========================= */

.btn-gradient{

  background: linear-gradient(90deg,#39b32c);

  border:none;

  padding:12px;

  font-weight:600;

  font-size:16px;

  border-radius:12px;

  box-shadow:0 4px 15px rgba(13,110,253,0.3);

  transition: all 0.3s ease;
}



.btn-gradient:active{
  transform: scale(0.98);
}

/* =========================
   SPINNER
========================= */

.spinner-border-sm-custom{
  width:1rem;
  height:1rem;
  border-width:2px;
}

/* =========================
   MOBILE OPTIMIZATION
========================= */

@media(max-width:576px){

  body{
    padding:15px;
  }

  .login-container{
    max-width:100%;
  }

}

/* =========================
   ANIMATION
========================= */

.login-container{
  animation: fadeInUp 0.6s ease;
}

@keyframes fadeInUp{

  from{
    opacity:0;
    transform:translateY(20px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }

}