#loginPage {
  position: relative;
  isolation: isolate;
  min-height: 100svh !important;
  padding: 24px !important;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(2,44,34,.72), rgba(6,78,59,.30)),
    url("../img/background.jpg") center / cover no-repeat !important;
}

#loginPage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 16%, rgba(244,214,117,.22), transparent 26%),
    linear-gradient(to bottom, rgba(0,0,0,.04), rgba(0,0,0,.32));
}

#loginPage .login-container {
  width: min(100%, 440px) !important;
  padding: 30px 30px 27px !important;
  color: #fff;
  text-align: center;
  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 28px !important;
  background: rgba(2,44,34,.58) !important;
  box-shadow: var(--shadow-premium) !important;
  backdrop-filter: blur(19px) saturate(125%);
  -webkit-backdrop-filter: blur(19px) saturate(125%);
  animation: cardReveal .65s ease both;
}

#loginPage .login-logo {
  width: 190px !important;
  height: 150px !important;
  margin: -4px auto 5px !important;
  padding: 0 !important;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  filter: drop-shadow(0 13px 20px rgba(0,0,0,.38));
}

#loginPage .login-title {
  margin: 0 0 7px !important;
  color: #fff !important;
  font-size: 1.42rem !important;
  font-weight: 800 !important;
}

#loginPage .login-subtitle {
  max-width: 330px;
  margin: 0 auto 22px !important;
  color: rgba(255,255,255,.72) !important;
  font-size: .78rem !important;
  line-height: 1.6;
}

#loginPage .login-input-group { margin-bottom: 15px !important; text-align: left; }

#loginPage .login-label {
  margin: 0 0 7px !important;
  color: rgba(255,255,255,.88) !important;
  font-size: .76rem !important;
  font-weight: 600 !important;
}

#loginPage .login-field {
  width: 100%;
  min-height: 48px;
  padding: 12px 15px !important;
  color: #fff !important;
  caret-color: var(--gold-300);
  border: 1px solid rgba(255,255,255,.24) !important;
  border-radius: 14px !important;
  outline: none;
  background: rgba(255,255,255,.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

#loginPage .login-field::placeholder { color: rgba(255,255,255,.54); }

#loginPage .login-field:focus {
  border-color: var(--gold-300) !important;
  box-shadow: 0 0 0 3px rgba(244,214,117,.17) !important;
}

#loginPage .login-btn {
  min-height: 49px;
  margin-top: 5px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 14px !important;
  color: #12311f !important;
  background: linear-gradient(135deg, var(--gold-300), var(--gold-500)) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.22) !important;
}

#loginPage .login-btn:hover { transform: translateY(-2px); filter: brightness(1.04); }

#loginPage .login-error {
  margin: -3px 0 13px !important;
  color: #fff !important;
  border: 1px solid rgba(254,202,202,.38) !important;
  background: rgba(185,28,28,.62) !important;
}

#loginPage .login-note {
  margin-top: 19px !important;
  padding: 13px 14px !important;
  text-align: center !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-left: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.08) !important;
}

#loginPage .login-note p {
  margin: 2px 0 !important;
  color: rgba(255,255,255,.67) !important;
  font-size: .69rem !important;
}

@media (max-width: 520px) {
  #loginPage { padding: 15px !important; }
  #loginPage .login-container { padding: 25px 20px 22px !important; border-radius: 23px !important; }
  #loginPage .login-logo { width: 165px !important; height: 130px !important; }
}