/* Dark pattern adapted from Uiverse.io by chase2k25. */
.login-stage {
  --parallax-x: 0px;
  --parallax-y: 0px;
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  overflow: hidden;
  background: #1b1b1b;
  color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  color-scheme: dark;
}
.entrance-backdrop { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #1b1b1b; }
.entrance-filter { position: absolute; }
.futuristic-pattern, .entrance-halo, .entrance-sheen {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  transition: transform 1.15s cubic-bezier(.18, .65, .25, 1);
}
.futuristic-pattern {
  background: linear-gradient(145deg, #000, rgba(35, 35, 35, .9), #323232);
  filter: url(#advanced-texture);
  transform: translate3d(calc(var(--parallax-x) * -.2), calc(var(--parallax-y) * -.2), 0);
}
.entrance-halo {
  background: radial-gradient(ellipse 31% 55% at 50% 48%, #ffffff24, #ffffff0a 52%, transparent 80%);
  transform: translate3d(calc(var(--parallax-x) * .9), calc(var(--parallax-y) * .9), 0);
}
.entrance-sheen {
  background: linear-gradient(125deg, transparent 20%, #ffffff03 39%, transparent 58%);
  transform: translate3d(calc(var(--parallax-x) * 1.5), calc(var(--parallax-y) * 1.5), 0);
}
/* Dimensional, reversible form adapted from Uiverse.io by Rohankumar620. */
.login-stage .login-sheet { width: 355px; max-width: 100%; margin: 0; padding: 0; border: 0; box-shadow: none; background: none; perspective: 1400px; z-index: 2; }
.login-card { display: grid; transform-style: preserve-3d; transition: transform 1s ease; }
.login-card.is-flipped { transform: rotateY(-180deg); }
.login-face {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 446px;
  padding: 48px 40px;
  border-radius: 15px;
  background: #212121;
  box-shadow: inset 2px 2px 10px #000, inset -1px -1px 5px #ffffff66, 18px 28px 50px #00000030;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.login-front { transform: rotateY(0deg); }
.login-back { transform: rotateY(180deg); }
.login-stage .login-sheet-heading { display: block; margin: 0 0 30px; padding: 0; border: 0; }
.login-stage .login-sheet-heading h1, .login-stage .login-sheet-heading h2 { font: 600 27px/1.2 var(--font, Arial, sans-serif); letter-spacing: -.035em; margin: 0; color: #fff; text-align: center; }
#login-help-title:focus { outline: none; }
.login-stage .field { margin: 0 0 22px; }
.login-stage .field label { font-size: 12px; font-weight: 400; letter-spacing: 0; color: #c9c9c9; margin-bottom: 9px; }
.login-stage .field input {
  width: 100%; min-height: 48px; padding: 11px 12px;
  color: #fff; background: #212121; border-radius: 6px; border: 2px solid #212121;
  box-shadow: 6px 6px 10px #000000db, 1px 1px 10px #ffffff3d;
  font-size: 15px; outline: none;
  transition: transform .35s, box-shadow .35s, border-color .35s;
}
.login-stage .field input::placeholder { color: #999; transition: opacity .3s; }
.login-stage .field input:focus::placeholder { opacity: 0; }
.login-stage .field input:focus { transform: scale(1.025); border-color: #919191; box-shadow: 6px 6px 10px #000, 1px 1px 10px #ffffff40, inset 2px 2px 10px #000, inset -1px -1px 5px #ffffff38; }
.login-stage .field input:autofill { -webkit-text-fill-color: #fff; box-shadow: 0 0 0 1000px #282828 inset, 6px 6px 10px #000000db, 1px 1px 10px #ffffff3d; }
.login-stage .input-password .icon-button { top: 6px; right: 5px; color: #bfbfbf; border-radius: 4px; }
.login-stage .input-password .icon-button:hover { background: #ffffff0d; color: #fff; }
.login-stage .input-password .icon-button:focus-visible, .login-switch:focus-visible { outline: 2px solid #dedede; outline-offset: 4px; }
.login-stage .login-submit {
  width: 100%; min-height: 46px; margin-top: 10px; justify-content: center; gap: 12px;
  background: #212121; border: 2px solid #212121; border-radius: 6px; color: #fff;
  padding: 10px 18px; font-size: 15px; font-weight: 600;
  box-shadow: 6px 6px 10px #000000db, 1px 1px 10px #ffffff3d;
  transition: transform .35s, box-shadow .35s, border-color .35s;
}
.login-stage .login-submit .icon { width: 17px; height: 17px; }
.login-stage .login-submit:hover, .login-stage .login-submit:focus-visible { transform: scale(1.035); background: #212121; border-color: #757575; box-shadow: 6px 6px 10px #000, 1px 1px 10px #ffffff40, inset 2px 2px 10px #000, inset -1px -1px 5px #ffffff38; }
.login-stage .login-submit:focus-visible { outline: 2px solid #dedede; outline-offset: 4px; }
.login-stage .login-submit:active { transform: scale(.99); }
.login-switch { align-self: center; min-height: 44px; padding: 10px 0 0; margin-top: 16px; border: 0; background: none; font-size: 12px; color: #c2c2c2; text-decoration: underline; text-underline-offset: 4px; }
.login-switch:hover { color: #fff; }
.login-help-copy { font-size: 14px; line-height: 1.7; color: #c9c9c9; margin: 0 0 19px; }
.login-back .login-submit { margin-top: 14px; font-size: 13px; }
.login-stage .form-error { font-size: 12px; color: #ffc5bb; background: #3a2927; border-left: 2px solid #d38b7b; padding: 10px 12px; margin-bottom: 20px; border-radius: 3px; }
.login-stage .form-error:empty { display: none; }

@media (max-width: 480px) {
  .login-stage { min-height: 100dvh; padding: 32px 24px; }
  .login-stage .login-sheet { width: 355px; }
  .login-face { min-height: 446px; padding: 38px 30px; }
  .login-stage .field input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .futuristic-pattern, .entrance-halo, .entrance-sheen, .login-card { transition: none !important; }
  .login-stage .field input:focus, .login-stage .login-submit:hover, .login-stage .login-submit:focus-visible, .login-stage .login-submit:active { transform: none; }
}