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

*{
  box-sizing:border-box;
}

body{

  margin:0;

  font-family:
  'Segoe UI',
  Arial,
  sans-serif;

  background:
  linear-gradient(
    135deg,
    #0f172a,
    #1e3a8a
  );

  min-height:100vh;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  color:white;

  padding:20px;

}

/* ===== LOGO + DATE ===== */

.top-section{

  text-align:center;

  margin-bottom:30px;

}

.top-section img{

  width:220px;

  max-width:85%;

  object-fit:contain;

  filter:
  drop-shadow(
    0 10px 20px
    rgba(0,0,0,0.4)
  );

}

.datetime{

  margin-top:10px;

  font-size:14px;

  opacity:.9;

  letter-spacing:.5px;

  min-height:18px;

  line-height:1.6;

}

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

.login-card{

  width:360px;

  max-width:100%;

  background:white;

  padding:32px;

  border-radius:16px;

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

  text-align:center;

  color:#0f172a;

  animation:
  fadeIn .35s ease-in-out;

}

@keyframes fadeIn{

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

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

}

.login-card h1{

  color:#1e3a8a;

  font-weight:700;

  font-size:22px;

  margin-bottom:22px;

}

/* ===== INPUTS ===== */

.login-card input{

  width:100%;

  padding:13px;

  margin-bottom:15px;

  border-radius:8px;

  border:1px solid #cbd5e1;

  font-size:14px;

  transition:.2s;

}

.login-card input:focus{

  border-color:#2563eb;

  outline:none;

  box-shadow:
  0 0 0 2px rgba(37,99,235,0.15);

}

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

.login-card button{

  width:100%;

  padding:13px;

  border:none;

  border-radius:8px;

  background:
  linear-gradient(
    90deg,
    #1e3a8a,
    #2563eb
  );

  color:white;

  font-size:15px;

  font-weight:600;

  cursor:pointer;

  transition:.25s;

}

.login-card button:hover{

  background:
  linear-gradient(
    90deg,
    #d4af37,
    #facc15
  );

  color:#0f172a;

}

.error{

  margin-top:12px;

  color:#dc2626;

  font-size:12px;

  min-height:16px;

}

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

@media(max-width:480px){

  body{
    padding:30px 18px;
  }

  .top-section img{
    width:170px;
  }

  .datetime{
    font-size:13px;
  }

  .login-card{
    padding:26px;
    border-radius:14px;
  }

  .login-card h1{
    font-size:20px;
  }

}