/* Original login preview restoration.
   Loaded after the main stylesheet so the login screen matches login-redesign-preview.html. */

body.locked:not(.is-authed) {
  overflow: hidden !important;
}

body.locked:not(.is-authed) #loginScreen.neo-login-screen {
  --login-bg: #e4ebf4;
  --login-text: #3d4852;
  --login-muted: #6b7280;
  --login-soft-muted: #8290a2;
  --login-accent: #5567d8;
  --login-accent-light: #7584e8;
  --login-accent-deep: #4655c4;
  --login-teal: #23b7ad;
  --login-sky: #64c7ff;
  --login-shadow-dark: rgb(155 171 195 / 0.66);
  --login-shadow-light: rgb(255 255 255 / 0.68);
  --login-shadow-raised: 9px 9px 16px var(--login-shadow-dark), -9px -9px 16px var(--login-shadow-light);
  --login-shadow-raised-hover: 12px 12px 20px rgb(155 171 195 / 0.74), -12px -12px 20px rgb(255 255 255 / 0.74);
  --login-shadow-small: 5px 5px 10px rgb(155 171 195 / 0.62), -5px -5px 10px rgb(255 255 255 / 0.62);
  --login-shadow-inset: inset 6px 6px 10px rgb(155 171 195 / 0.62), inset -6px -6px 10px rgb(255 255 255 / 0.62);
  --login-shadow-inset-deep: inset 10px 10px 20px rgb(155 171 195 / 0.7), inset -10px -10px 20px rgb(255 255 255 / 0.72);
  --login-shadow-inset-small: inset 3px 3px 6px rgb(155 171 195 / 0.6), inset -3px -3px 6px rgb(255 255 255 / 0.62);
  position: relative !important;
  display: grid !important;
  min-height: 100vh !important;
  padding: 48px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 18% 16%, rgb(154 124 255 / 0.13), transparent 30%),
    radial-gradient(circle at 82% 74%, rgb(35 183 173 / 0.14), transparent 32%),
    var(--login-bg) !important;
  color: var(--login-text) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

body.locked:not(.is-authed) #loginScreen.neo-login-screen::before,
body.locked:not(.is-authed) #loginScreen.neo-login-screen::after {
  content: "" !important;
  position: fixed !important;
  display: block !important;
  pointer-events: none !important;
  border-radius: 999px !important;
  background: var(--login-bg) !important;
}

body.locked:not(.is-authed) #loginScreen.neo-login-screen::before {
  width: 204px !important;
  height: 204px !important;
  top: 7vh !important;
  left: 7vw !important;
  box-shadow: var(--login-shadow-inset-deep), inset 0 0 0 18px rgb(97 87 255 / 0.045) !important;
  opacity: 0.72 !important;
}

body.locked:not(.is-authed) #loginScreen.neo-login-screen::after {
  width: 142px !important;
  height: 142px !important;
  right: 8vw !important;
  bottom: 10vh !important;
  box-shadow: var(--login-shadow-raised), inset 0 0 0 16px rgb(35 183 173 / 0.05) !important;
  opacity: 0.74 !important;
}

body.locked:not(.is-authed) #loginScreen .neo-login-shell {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: 416px minmax(300px, 1fr) !important;
  gap: 72px !important;
  align-items: center !important;
  width: min(1032px, 100%) !important;
  min-height: auto !important;
  height: auto !important;
  margin: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.locked:not(.is-authed) #loginScreen .neo-login-card-stack {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.locked:not(.is-authed) #loginForm.neo-login-card {
  position: relative !important;
  display: grid !important;
  gap: 22px !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 672px !important;
  height: auto !important;
  max-height: none !important;
  align-content: start !important;
  overflow: visible !important;
  padding: 40px !important;
  border: 0 !important;
  border-radius: 32px !important;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 0.16), rgb(214 225 238 / 0.16)),
    var(--login-bg) !important;
  box-shadow: var(--login-shadow-raised), inset 1px 1px 0 rgb(255 255 255 / 0.32) !important;
  color: var(--login-text) !important;
  transform: none !important;
}

body.locked:not(.is-authed) #loginForm.neo-login-card {
  gap: 17px !important;
  min-height: 612px !important;
  padding: 34px 40px !important;
}

body.locked:not(.is-authed) #loginForm .neo-auth-stage {
  min-height: 188px !important;
}

body.locked:not(.is-authed) #loginForm .neo-auth-footer {
  min-height: 16px !important;
}

body.locked:not(.is-authed) #loginForm.neo-login-card::before {
  content: "" !important;
  position: absolute !important;
  top: 26px !important;
  right: 30px !important;
  width: 76px !important;
  height: 76px !important;
  border-radius: 999px !important;
  background: var(--login-bg) !important;
  box-shadow: var(--login-shadow-inset-small) !important;
  opacity: 0.55 !important;
  pointer-events: none !important;
}

body.locked:not(.is-authed) #loginForm .neo-brand {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.locked:not(.is-authed) #loginForm .neo-brand-mark {
  display: grid !important;
  width: 60px !important;
  height: 60px !important;
  flex: 0 0 auto !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 35% 30%, rgb(255 255 255 / 0.62), transparent 38%),
    var(--login-bg) !important;
  box-shadow: var(--login-shadow-small), 0 12px 26px rgb(97 87 255 / 0.1) !important;
}

body.locked:not(.is-authed) #loginForm .neo-brand-mark img {
  width: 38px !important;
  height: 38px !important;
  object-fit: contain !important;
}

body.locked:not(.is-authed) #loginForm .neo-brand strong {
  display: block !important;
  color: var(--login-text) !important;
  font-size: 18px !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
  line-height: 1.1 !important;
}

body.locked:not(.is-authed) #loginForm .neo-brand span {
  display: block !important;
  margin-top: 4px !important;
  color: var(--login-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}

body.locked:not(.is-authed) #loginForm .neo-login-kicker {
  display: none !important;
}

body.locked:not(.is-authed) #loginForm .neo-login-headline {
  display: grid !important;
  gap: 10px !important;
  padding-top: 2px !important;
}

body.locked:not(.is-authed) #loginForm .neo-login-headline h1 {
  margin: 0 !important;
  color: var(--login-text) !important;
  font-size: 38px !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
  line-height: 1.12 !important;
  text-shadow: none !important;
}

body.locked:not(.is-authed) #loginForm .neo-login-headline p {
  max-width: 25em !important;
  margin: 0 !important;
  color: var(--login-muted) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;
}

body.locked:not(.is-authed) #loginForm .neo-login-headline p::before {
  content: "" !important;
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  margin-right: 8px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--login-teal), var(--login-sky)) !important;
  box-shadow: 0 4px 10px rgb(35 183 173 / 0.26) !important;
  vertical-align: 1px !important;
}

body.locked:not(.is-authed) #loginForm .neo-auth-tabs {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 6px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--login-bg) !important;
  box-shadow: var(--login-shadow-inset) !important;
}

body.locked:not(.is-authed) #loginForm .neo-auth-tabs::before {
  content: "" !important;
  position: absolute !important;
  top: 6px !important;
  bottom: 6px !important;
  left: 6px !important;
  width: calc((100% - 12px) / 2) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 0.22), rgb(214 225 238 / 0.1)),
    var(--login-bg) !important;
  box-shadow: var(--login-shadow-small), inset 0 1px 0 rgb(255 255 255 / 0.34) !important;
  transition: transform 520ms cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

body.locked:not(.is-authed) #loginForm .neo-auth-tabs.phone-active::before {
  transform: translateX(100%) !important;
}

body.locked:not(.is-authed) #loginForm .neo-auth-tabs button {
  position: relative !important;
  z-index: 1 !important;
  min-height: 42px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--login-muted) !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body.locked:not(.is-authed) #loginForm .neo-auth-tabs button.active {
  color: var(--login-text) !important;
}

body.locked:not(.is-authed) #loginForm .neo-auth-stage {
  display: grid !important;
  grid-template: 1fr / 1fr !important;
  min-height: 206px !important;
  align-items: start !important;
}

body.locked:not(.is-authed) #loginForm .neo-auth-pane {
  display: grid !important;
  grid-area: 1 / 1 !important;
  gap: 16px !important;
}

body.locked:not(.is-authed) #loginForm .neo-auth-pane[hidden] {
  display: none !important;
}

body.locked:not(.is-authed) #loginForm .neo-field {
  display: grid !important;
  gap: 8px !important;
  margin: 0 !important;
}

body.locked:not(.is-authed) #loginForm .neo-field > span {
  color: var(--login-text) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body.locked:not(.is-authed) #loginForm .neo-field input,
body.locked:not(.is-authed) #loginForm .neo-code-row input {
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  border: 0 !important;
  border-radius: 16px !important;
  outline: none !important;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 0.1), transparent),
    var(--login-bg) !important;
  box-shadow: var(--login-shadow-inset) !important;
  color: var(--login-text) !important;
  padding: 0 17px !important;
  font-size: 15px !important;
  font-weight: 650 !important;
}

body.locked:not(.is-authed) #loginForm .neo-field input.is-invalid,
body.locked:not(.is-authed) #loginForm .neo-code-row input.is-invalid {
  box-shadow:
    var(--login-shadow-inset),
    0 0 0 2px rgb(218 72 72 / 0.72),
    0 0 0 7px rgb(218 72 72 / 0.09) !important;
}

body.locked:not(.is-authed) #loginForm .neo-password-input {
  position: relative !important;
  display: block !important;
}

body.locked:not(.is-authed) #loginForm .neo-password-input #loginPass {
  padding-right: 52px !important;
}

body.locked:not(.is-authed) #loginForm #toggleLoginPass.neo-password-eye {
  position: absolute !important;
  top: calc(50% + 6px) !important;
  right: 12px !important;
  display: grid !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #7f8da1 !important;
  line-height: 1 !important;
  transform: translateY(-50%) !important;
}

body.locked:not(.is-authed) #loginForm #toggleLoginPass.neo-password-eye:hover,
body.locked:not(.is-authed) #loginForm #toggleLoginPass.neo-password-eye:focus,
body.locked:not(.is-authed) #loginForm #toggleLoginPass.neo-password-eye:active,
body.locked:not(.is-authed) #loginForm #toggleLoginPass.neo-password-eye:focus-visible {
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: translateY(-50%) !important;
}

body.locked:not(.is-authed) #loginScreen .neo-login-card[hidden],
body.locked:not(.is-authed) #loginForm[hidden],
body.locked:not(.is-authed) #registerForm[hidden],
body.locked:not(.is-authed) #forgotForm[hidden] {
  display: none !important;
}

body.locked:not(.is-authed) #loginScreen .neo-login-card-stack > .neo-login-card:not([hidden]) {
  grid-area: 1 / 1 !important;
}

body.locked:not(.is-authed) #loginScreen .neo-login-shell {
  animation: loginOriginalEnter 680ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

body.locked:not(.is-authed) #loginForm.neo-login-card {
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 300ms ease !important;
}

body.locked:not(.is-authed) #loginForm.neo-login-card:hover {
  box-shadow: var(--login-shadow-raised-hover) !important;
  transform: translateY(-2px) !important;
}

body.locked:not(.is-authed) #loginForm .neo-auth-pane:not([hidden]) {
  animation: loginOriginalPaneIn 180ms ease-out both !important;
}

body.locked:not(.is-authed) #loginForm .neo-password-input,
body.locked:not(.is-authed) #loginForm #loginPass,
body.locked:not(.is-authed) #loginForm #toggleLoginPass.neo-password-eye {
  animation: none !important;
  transition: none !important;
}

body.locked:not(.is-authed) #loginForm .neo-password-input,
body.locked:not(.is-authed) #loginForm #loginPass {
  transform: none !important;
}

body.locked:not(.is-authed) #loginForm .neo-code-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 120px !important;
  gap: 12px !important;
}

body.locked:not(.is-authed) #loginForm .neo-login-options {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 24px !important;
  color: var(--login-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

body.locked:not(.is-authed) #loginForm .neo-text-btn {
  border: 0 !important;
  background: transparent !important;
  color: var(--login-accent) !important;
  cursor: pointer !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: 0 !important;
}

body.locked:not(.is-authed) #loginForm .neo-primary {
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  margin-top: 4px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 18% 18%, rgb(255 255 255 / 0.34), transparent 28%),
    linear-gradient(135deg, var(--login-accent-deep) 0%, var(--login-accent) 48%, var(--login-accent-light) 100%) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 760 !important;
  box-shadow:
    9px 9px 18px rgb(85 103 216 / 0.28),
    -8px -8px 16px rgb(255 255 255 / 0.58),
    inset 1px 1px 0 rgb(255 255 255 / 0.24) !important;
}

body.locked:not(.is-authed) #loginForm .neo-primary.is-loading {
  cursor: wait !important;
  opacity: 0.86 !important;
}

body.locked:not(.is-authed) #loginForm .neo-primary.is-loading::after {
  content: "" !important;
  width: 14px !important;
  height: 14px !important;
  margin-left: 9px !important;
  border: 2px solid rgb(255 255 255 / 0.42) !important;
  border-top-color: #fff !important;
  border-radius: 999px !important;
  animation: loginOriginalSpin 800ms linear infinite !important;
}

body.locked:not(.is-authed) #loginForm .neo-primary.is-success {
  background: linear-gradient(135deg, #1fae86, #32c79a) !important;
}

body.locked:not(.is-authed) #loginForm .neo-secondary {
  min-height: 56px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--login-bg) !important;
  box-shadow: var(--login-shadow-small) !important;
  color: var(--login-text) !important;
  font-size: 12px !important;
  font-weight: 760 !important;
}

body.locked:not(.is-authed) #loginForm .neo-secondary.is-loading,
body.locked:not(.is-authed) #loginForm .neo-secondary.is-countdown,
body.locked:not(.is-authed) #loginForm .neo-secondary:disabled {
  cursor: not-allowed !important;
  opacity: 0.72 !important;
  box-shadow: var(--login-shadow-inset) !important;
}

body.locked:not(.is-authed) #loginForm .neo-secondary.is-sent {
  color: #168a6a !important;
}

body.locked:not(.is-authed) #loginForm .neo-form-error {
  min-height: 0 !important;
  margin: -8px 0 -4px !important;
  color: #c94b4b !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body.locked:not(.is-authed) #loginForm .neo-form-error.is-success {
  color: #168a6a !important;
}

body.locked:not(.is-authed) #loginForm .neo-form-error:empty {
  display: none !important;
}

@keyframes loginOriginalSpin {
  to {
    transform: rotate(1turn);
  }
}

@keyframes loginOriginalEnter {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes loginOriginalSculptureBreath {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.012);
  }
}

@keyframes loginOriginalClockTurn {
  to {
    transform: rotate(1turn);
  }
}

@keyframes loginOriginalCounterTurn {
  to {
    transform: rotate(-1turn);
  }
}

@keyframes loginOriginalDotClock {
  to {
    transform: rotate(1turn);
  }
}

@keyframes loginOriginalPaneIn {
  from {
    opacity: 0.18;
  }

  to {
    opacity: 1;
  }
}

body.locked:not(.is-authed) #loginForm .neo-auth-footer {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 20px !important;
}

body.locked:not(.is-authed) #loginScreen .neo-login-visual {
  position: relative !important;
  display: grid !important;
  min-height: 560px !important;
  place-items: center !important;
  perspective: 900px !important;
}

body.locked:not(.is-authed) #loginScreen .neo-login-shell:has(#registerForm:not([hidden])),
body.locked:not(.is-authed) #loginScreen .neo-login-shell:has(#forgotForm:not([hidden])) {
  position: relative !important;
  align-items: center !important;
  min-height: calc(100vh - 96px) !important;
  height: calc(100vh - 96px) !important;
}

body.locked:not(.is-authed) #loginScreen .neo-login-shell:has(#registerForm:not([hidden])) .neo-login-visual,
body.locked:not(.is-authed) #loginScreen .neo-login-shell:has(#forgotForm:not([hidden])) .neo-login-visual {
  position: absolute !important;
  top: 50% !important;
  right: 0 !important;
  width: calc(100% - 488px) !important;
  min-height: 560px !important;
  transform: translateY(-50%) !important;
}

body.locked:not(.is-authed) #registerForm.neo-login-card,
body.locked:not(.is-authed) #forgotForm.neo-login-card {
  align-self: center !important;
  max-height: calc(100vh - 96px) !important;
  overflow: hidden !important;
}

body.locked:not(.is-authed) #loginScreen .neo-sculpture {
  position: relative !important;
  width: min(392px, 72vw) !important;
  aspect-ratio: 1 !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 50% 50%, var(--login-bg) 0 29%, transparent 30%),
    conic-gradient(from 28deg, rgb(97 87 255 / 0.13), rgb(35 183 173 / 0.12), rgb(100 199 255 / 0.1), rgb(97 87 255 / 0.13)),
    radial-gradient(circle at 36% 30%, rgb(255 255 255 / 0.32), transparent 32%),
    var(--login-bg) !important;
  box-shadow:
    var(--login-shadow-raised),
    inset 0 0 0 18px rgb(255 255 255 / 0.12),
    inset 0 0 0 34px rgb(97 87 255 / 0.025),
    0 28px 70px rgb(97 87 255 / 0.08) !important;
  animation: loginOriginalSculptureBreath 8s ease-in-out infinite !important;
  transform-style: preserve-3d !important;
}

body.locked:not(.is-authed) #loginScreen .neo-sculpture::before,
body.locked:not(.is-authed) #loginScreen .neo-sculpture::after,
body.locked:not(.is-authed) #loginScreen .neo-sculpture i {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  border-radius: 999px !important;
  background: var(--login-bg) !important;
}

body.locked:not(.is-authed) #loginScreen .neo-sculpture::before {
  inset: 13% !important;
  z-index: 1 !important;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 44%, var(--login-bg) 45% 100%),
    conic-gradient(from 0deg, rgb(255 255 255 / 0.22), rgb(85 103 216 / 0.09), rgb(35 183 173 / 0.1), rgb(255 255 255 / 0.22)) !important;
  box-shadow:
    var(--login-shadow-inset-deep),
    inset 0 0 0 12px rgb(255 255 255 / 0.16),
    inset 0 0 0 28px rgb(100 199 255 / 0.035) !important;
  animation: loginOriginalCounterTurn 48s linear infinite !important;
}

body.locked:not(.is-authed) #loginScreen .neo-sculpture::after {
  inset: 32% !important;
  z-index: 3 !important;
  background:
    radial-gradient(circle at 38% 30%, rgb(255 255 255 / 0.34), transparent 34%),
    var(--login-bg) !important;
  box-shadow:
    var(--login-shadow-raised-hover),
    inset 0 0 0 10px rgb(255 255 255 / 0.12),
    0 18px 38px rgb(97 87 255 / 0.07) !important;
  animation: loginOriginalClockTurn 42s linear infinite reverse !important;
}

body.locked:not(.is-authed) #loginScreen .neo-sculpture i {
  inset: 44% !important;
  z-index: 4 !important;
  box-shadow:
    var(--login-shadow-inset),
    inset 0 0 0 8px rgb(35 183 173 / 0.045) !important;
  animation: loginOriginalClockTurn 56s linear infinite !important;
}

body.locked:not(.is-authed) #loginScreen .neo-sweep,
body.locked:not(.is-authed) #loginScreen .neo-ticks,
body.locked:not(.is-authed) #loginScreen .neo-orbit-path {
  position: absolute !important;
  display: block !important;
  border-radius: 999px !important;
}

body.locked:not(.is-authed) #loginScreen .neo-sweep {
  inset: 6% !important;
  z-index: 2 !important;
  background: conic-gradient(from 0deg, transparent 0 62%, rgb(255 255 255 / 0.42) 67%, rgb(100 199 255 / 0.12) 70%, transparent 76% 100%) !important;
  opacity: 0.5 !important;
  mix-blend-mode: soft-light !important;
  animation: loginOriginalClockTurn 18s linear infinite !important;
}

body.locked:not(.is-authed) #loginScreen .neo-ticks {
  inset: -4% !important;
  z-index: 0 !important;
  background: repeating-conic-gradient(from 0deg, rgb(85 103 216 / 0.16) 0 1deg, transparent 1deg 15deg) !important;
  mask-image: radial-gradient(circle, transparent 0 48%, #000 49% 51%, transparent 52%) !important;
  opacity: 0.62 !important;
  animation: loginOriginalCounterTurn 72s linear infinite !important;
}

body.locked:not(.is-authed) #loginScreen .neo-orbit-path {
  inset: 10% !important;
  z-index: 4 !important;
  animation: loginOriginalClockTurn 28s linear infinite !important;
}

body.locked:not(.is-authed) #loginScreen .neo-orbit-path::before {
  content: "" !important;
  position: absolute !important;
  width: 44px !important;
  height: 44px !important;
  right: 5% !important;
  top: 7% !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 34% 28%, rgb(255 255 255 / 0.42), transparent 36%),
    linear-gradient(145deg, rgb(228 235 244), rgb(213 224 238 / 0.9)) !important;
  box-shadow: var(--login-shadow-small), 0 10px 22px rgb(35 183 173 / 0.08) !important;
}

body.locked:not(.is-authed) #loginScreen .neo-visual-word {
  display: none !important;
}

body.locked:not(.is-authed) #loginScreen .neo-visual-dot {
  position: absolute !important;
  left: 12% !important;
  top: 19% !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--login-teal), var(--login-sky)) !important;
  box-shadow: 5px 5px 10px rgb(50 139 135 / 0.34), -5px -5px 10px rgb(255 255 255 / 0.62) !important;
  transform-origin: 220px 230px !important;
  animation: loginOriginalDotClock 12s linear infinite !important;
}

body.locked:not(.is-authed) #registerForm.neo-login-card,
body.locked:not(.is-authed) #forgotForm.neo-login-card {
  max-height: calc(100vh - 64px) !important;
}

@media (max-width: 900px) {
  body.locked:not(.is-authed),
  body.locked:not(.is-authed) #app {
    height: auto !important;
    min-height: 100svh !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.locked:not(.is-authed) #loginScreen.neo-login-screen {
    height: auto !important;
    max-height: none !important;
    min-height: 100svh !important;
    overflow: auto !important;
    padding: 20px 20px calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.locked:not(.is-authed) #loginScreen .neo-login-shell {
    grid-template-columns: 1fr !important;
    width: min(480px, 100%) !important;
    gap: 24px !important;
    margin: 0 auto !important;
  }

  body.locked:not(.is-authed) #loginScreen .neo-login-visual {
    display: none !important;
  }

  body.locked:not(.is-authed) .site-record-link {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 900px) and (max-height: 760px) {
  body.locked:not(.is-authed) .site-record-link {
    position: static !important;
    display: block !important;
    width: max-content !important;
    max-width: calc(100vw - 32px) !important;
    margin: -44px auto 16px !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    transform: none !important;
    text-align: center !important;
  }
}

@media (min-width: 901px) {
  body.locked:not(.is-authed) #loginScreen .neo-login-visual {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    z-index: 1 !important;
    width: 100% !important;
    min-height: 560px !important;
    transform: none !important;
    pointer-events: none !important;
  }

  body.locked:not(.is-authed) #loginScreen .neo-login-shell {
    grid-template-columns: 416px minmax(300px, 1fr) !important;
    gap: 96px !important;
  }
}