body.login-page {
  margin: 0;
  overflow-x: hidden;
  background: #f4f4f4;
}

.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 0.85rem;
}

.login-card {
  width: min(100%, 32rem);
  margin-inline: auto;
  border-radius: 0.75rem;
  overflow: hidden;
  background-color: #ffffff;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.14) !important;
}

.login-card-header {
  padding: 1.75rem 1.1rem 1.45rem;
  background: linear-gradient(90deg, #0e3f73 0%, #1b69bc 100%);
}

.login-title {
  font-size: clamp(0.95rem, 2.2vw, 1.65rem);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.login-subtitle {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.92);
}

.login-card-body {
  padding: 2rem 1.75rem 1.75rem !important;
}

.login-card-body .form-label {
  color: #222222;
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.55rem;
}

.login-card-body .form-control {
  min-height: 3rem;
  border: 1px solid #cfd8e3;
  border-radius: 0.25rem;
  color: #4b5563;
  font-size: 1rem;
  padding: 0.75rem 0.85rem;
}

.login-card-body .form-control::placeholder {
  color: #7b8794;
}

.login-card-body .form-control:focus {
  border-color: #1b69bc;
  box-shadow: 0 0 0 0.2rem rgba(27, 105, 188, 0.12);
}

.login-btn {
  min-height: 3rem;
  border: 0;
  border-radius: 0.25rem;
  background: linear-gradient(90deg, #0e3f73 0%, #1b69bc 100%);
  font-size: 1rem;
  font-weight: 700;
}

.login-btn:hover {
  background: linear-gradient(90deg, #0b355f 0%, #16589d 100%);
}

.alert-success {
  border: 0;
  border-radius: 0.35rem;
  background-color: #edf8f0;
  color: #17633c;
}

@media (max-width: 575.98px) {
  .login-card {
    width: 100%;
  }

  .login-title {
    font-size: 0.92rem;
  }

  .login-card-body {
    padding: 1.5rem 1.2rem !important;
  }
}