:root {
  --main-color: #2f4f8f;
  --main-accent: #6c7ea6;
  --card-bg: rgba(255, 255, 255, 0.94);
}

html,
body {
  min-height: 100%;
}

.bgc {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 12% 18%, rgba(149, 173, 216, 0.2) 0%, rgba(149, 173, 216, 0) 34%),
    radial-gradient(circle at 88% 84%, rgba(173, 186, 209, 0.18) 0%, rgba(173, 186, 209, 0) 38%),
    linear-gradient(135deg, #1f2937 0%, #334155 52%, #475569 100%);
}

.login-page {
  min-height: 100vh;
}

.login-card-elegant {
  width: 100%;
  max-width: 430px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 20px;
  background: var(--card-bg);
  backdrop-filter: blur(6px);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.24) !important;
}

.login-subtitle {
  color: #5f6f73;
  font-size: 0.95rem;
}

form.login {
  padding: 0;
}

.login-input-group {
  position: relative;
}

.login-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #6f7c81;
  pointer-events: none;
  z-index: 2;
}

#login-card input.form-control {
  height: 46px;
  padding-left: 40px;
  border: 1px solid #d8dee2;
  border-radius: 10px;
  box-shadow: none;
}

#login-card input.form-control:focus {
  border-color: var(--main-color);
  box-shadow: 0 0 0 0.12rem rgba(47, 79, 143, 0.28);
}

.button-color {
  background-color: var(--main-color) !important;
  border-color: var(--main-color) !important;
  border-radius: 10px;
  height: 46px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.button-color:hover {
  background-color: #253f72 !important;
  border-color: #253f72 !important;
  transform: translateY(-1px);
}

.forgotPassword {
  color: #5f6f73;
  font-size: 0.9rem;
  text-decoration: none;
}

.forgotPassword:hover {
  color: var(--main-accent);
  text-decoration: none;
}

@media (max-width: 576px) {
  .login-card-elegant {
    margin: 14px;
    padding: 1.25rem !important;
  }
}