#page-login {
  background:
    radial-gradient(circle at 50% 12%, rgba(7, 193, 96, 0.08), transparent 30%),
    var(--bg, #f5f5f5);
}

#page-login .login {
  width: min(100% - 40px, 390px);
  margin: auto;
  padding: max(32px, env(safe-area-inset-top)) 0 max(28px, env(safe-area-inset-bottom));
  align-items: center;
}

#page-login .login > img {
  margin-bottom: 8px;
}

#page-login .login h2 {
  margin: 10px 0 6px;
  letter-spacing: 0;
}

#page-login .login .desc {
  margin: 0 0 26px;
}

#page-login .input-group,
#page-login .login > .btn,
#page-login .auth-mode-row,
#page-login .agreement {
  width: 100%;
}

#page-login .input-field {
  min-height: 50px;
  border-radius: 8px;
}

.auth-password-tools {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin: -4px 0 14px;
}

.auth-forgot-link {
  border: 0;
  padding: 4px 0;
  background: transparent;
  color: #57606a;
  font-size: 13px;
  cursor: pointer;
}

.auth-forgot-link:active {
  opacity: 0.55;
}

.auth-mode-row {
  color: #888;
  font-size: 12px;
  text-align: center;
}

.auth-recovery-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 20px;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, 0.42);
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, visibility 180ms ease;
}

.auth-recovery-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.auth-recovery-sheet {
  width: min(100%, 420px);
  padding: 20px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.2);
  transform: translateY(18px);
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.auth-recovery-overlay.is-open .auth-recovery-sheet {
  transform: translateY(0);
}

.auth-recovery-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.auth-recovery-head h3 {
  margin: 0;
  color: #151515;
  font-size: 19px;
  letter-spacing: 0;
}

.auth-recovery-close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #f2f3f5;
  color: #333;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.auth-recovery-desc {
  margin: 0 0 18px;
  color: #73777f;
  font-size: 13px;
  line-height: 1.6;
}

.auth-recovery-field {
  display: block;
  margin-top: 14px;
  color: #30343a;
  font-size: 13px;
  font-weight: 600;
}

.auth-recovery-field input,
.auth-recovery-field textarea {
  box-sizing: border-box;
  width: 100%;
  margin-top: 7px;
  border: 1px solid #e2e4e8;
  border-radius: 8px;
  outline: none;
  background: #f7f8fa;
  color: #17191c;
  font: inherit;
  font-weight: 400;
}

.auth-recovery-field input {
  height: 48px;
  padding: 0 14px;
}

.auth-recovery-field textarea {
  min-height: 82px;
  padding: 12px 14px;
  resize: none;
}

.auth-recovery-field input:focus,
.auth-recovery-field textarea:focus {
  border-color: #07c160;
  background: #fff;
}

.auth-recovery-submit {
  width: 100%;
  min-height: 48px;
  margin-top: 18px;
  border: 0;
  border-radius: 8px;
  background: #111;
  color: #fff;
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
}

.auth-recovery-submit:disabled {
  opacity: 0.55;
  cursor: default;
}

html.auto-night #page-login {
  background: #111;
}

html.auto-night .auth-forgot-link {
  color: #aeb2b8;
}

html.auto-night .auth-recovery-sheet {
  background: #202022;
}

html.auto-night .auth-recovery-head h3,
html.auto-night .auth-recovery-field {
  color: #f6f6f6;
}

html.auto-night .auth-recovery-close,
html.auto-night .auth-recovery-field input,
html.auto-night .auth-recovery-field textarea {
  border-color: #3b3b3e;
  background: #2b2b2e;
  color: #f6f6f6;
}

html.auto-night .auth-recovery-submit {
  background: #f5f5f5;
  color: #111;
}

@media (min-width: 680px) {
  .auth-recovery-overlay {
    align-items: center;
  }
}