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

body {
  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 48% 34%, rgba(255, 255, 255, 0.12) 0 7%, transparent 19%),
    linear-gradient(180deg, #cfc9ff 0%, #aaa0f2 36%, #7768de 68%, #4b36b8 100%) !important;
  color: #fff;
  font-family: "Segoe UI", Roboto, sans-serif;
}

body::before,
body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: -1;
}

body::before {
  top: 0;
  height: 100vh;
  background:
    radial-gradient(ellipse at 18% 14%, rgba(255, 255, 255, 0.22) 0 14%, transparent 26%),
    radial-gradient(ellipse at 53% 20%, rgba(255, 255, 255, 0.18) 0 10%, transparent 22%),
    radial-gradient(ellipse at 79% 12%, rgba(255, 255, 255, 0.14) 0 13%, transparent 25%),
    linear-gradient(140deg, transparent 0 52%, rgba(66, 43, 184, 0.9) 52% 68%, transparent 68%),
    linear-gradient(152deg, transparent 0 60%, rgba(38, 24, 121, 0.78) 60% 78%, transparent 78%),
    linear-gradient(28deg, transparent 0 18%, rgba(96, 75, 219, 0.7) 18% 34%, transparent 34%),
    linear-gradient(0deg, transparent 0 56%, rgba(230, 242, 225, 0.45) 56% 74%, transparent 74%);
}

body::after {
  bottom: 0;
  height: 42vh;
  background:
    linear-gradient(158deg, transparent 0 14%, #24115e 14% 30%, transparent 30%),
    linear-gradient(26deg, transparent 0 36%, #1c0d49 36% 54%, transparent 54%),
    linear-gradient(170deg, transparent 0 58%, #26105d 58% 73%, transparent 73%),
    linear-gradient(0deg, #150936 0 34%, transparent 34%);
}

.login-container,
.register-container,
.forgot-password-section .container,
.reset-card {
  position: relative;
  z-index: 1;
}

.login-container,
.register-container {
  max-width: 460px !important;
}

.forgot-password-section .col-md-8,
.forgot-password-section .col-lg-6 {
  max-width: 460px;
}

.login-card,
.reset-card,
.forgot-password-section .card {
  background: rgba(39, 24, 103, 0.58) !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  border-radius: 16px !important;
  box-shadow:
    0 24px 70px rgba(16, 8, 58, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.login-card,
.reset-card {
  padding: 32px !important;
}

.rounded-circle {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.reset-header h4,
.card-header h5 {
  color: #fff !important;
}

.text-muted,
.text-white-50,
.card-header h6,
.reset-header p {
  color: rgba(255, 255, 255, 0.86) !important;
}

.form-label,
.form-check-label {
  color: #fff !important;
  font-weight: 600;
}

.input-group {
  border-radius: 999px;
}

.input-group-text,
.form-control,
.btn-outline-secondary,
#togglePassword,
#toggleConfirmPassword,
#togglePass,
#toggleCPass {
  height: 44px;
  background: rgba(24, 12, 69, 0.34) !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
  color: #fff !important;
}

.input-group-text {
  border-radius: 999px 0 0 999px !important;
}

.form-control {
  border-radius: 999px !important;
}

.input-group .form-control:not(:first-child) {
  border-left: 0;
  border-radius: 0 999px 999px 0 !important;
}

.input-group .form-control:not(:last-child) {
  border-radius: 0 !important;
}

.input-group button {
  border-radius: 0 999px 999px 0 !important;
}

.form-control::placeholder {
  color: rgba(255, 255, 255, 0.74);
}

.form-control:focus {
  border-color: #ffffff !important;
  box-shadow: 0 0 0 0.18rem rgba(255, 255, 255, 0.22) !important;
}

.btn-login,
.btn-register,
.btn-success {
  min-height: 48px;
  background: linear-gradient(135deg, #8b5cf6, #6d45d8) !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 14px 34px rgba(27, 11, 69, 0.32);
}

.btn-login:hover,
.btn-register:hover,
.btn-success:hover {
  background: linear-gradient(135deg, #7c3aed, #5b34d6) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

.btn-light {
  border: 1px solid rgba(255, 255, 255, 0.34) !important;
  border-radius: 999px !important;
  background: rgba(24, 12, 69, 0.28) !important;
  color: #fff !important;
}

a {
  color: #fff !important;
}

a:hover {
  color: #ede9fe !important;
}

.alert {
  border: 0 !important;
  border-radius: 12px !important;
}

.form-check-input:checked {
  background-color: #8b5cf6 !important;
  border-color: #8b5cf6 !important;
}

@media (max-width: 576px) {
  body {
    align-items: flex-start !important;
    padding: 18px 12px !important;
  }

  .login-card,
  .reset-card {
    padding: 24px !important;
  }
}