.logout-memory-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(8, 18, 33, .46);
  backdrop-filter: blur(12px);
}

.saved-login-overlay {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(8, 18, 33, .48);
  backdrop-filter: blur(12px);
  animation: logout-memory-in .18s ease both;
}

.saved-login-overlay.closing {
  animation: saved-login-out .15s ease both;
}

.logout-memory-page {
  width: min(100%, 430px);
  margin: 0 auto;
}

.logout-memory-card,
.saved-login-card,
.saved-login-choice-card {
  width: min(100%, 390px);
  border: 1px solid rgba(148, 181, 255, .42);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(12, 30, 55, .2);
}

.logout-memory-card {
  padding: 24px;
}

.saved-login-choice-card {
  padding: 22px;
}

.logout-memory-card-page {
  animation: logout-memory-in .24s ease both;
}

.logout-memory-profile,
.saved-login-profile {
  display: flex;
  align-items: center;
  gap: 14px;
}

.logout-memory-avatar,
.saved-login-avatar {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #f3f7ff;
  box-shadow: 0 14px 35px rgba(46, 110, 245, .14);
}

.logout-memory-avatar img,
.saved-login-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.logout-memory-profile strong,
.saved-login-profile strong {
  display: block;
  color: #101827;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
}

.logout-memory-profile span,
.saved-login-profile span {
  display: block;
  margin-top: 2px;
  color: #6d7482;
  font-size: 13px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.logout-memory-card h2 {
  margin: 22px 0 8px;
  color: #101827;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 750;
  letter-spacing: 0;
}

.logout-memory-card p,
.saved-login-choice-card p {
  margin: 0;
  color: #626b78;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.saved-login-choice-card h2 {
  margin: 20px 0 8px;
  color: #101827;
  font-size: 22px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: 0;
}

.saved-login-methods {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.saved-login-secondary-methods {
  display: grid;
  gap: 10px;
}

.saved-login-method-toggle {
  min-height: 42px;
  border-radius: 14px;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
}

.saved-login-inline-form {
  display: grid;
  gap: 12px;
}

.saved-login-direct-passkey {
  display: grid;
  gap: 12px;
}

.saved-login-direct-passkey .btn {
  width: 100%;
  min-height: 46px;
  border-radius: 15px;
  justify-content: center;
  font-weight: 800;
}

.saved-login-inline-form .btn {
  width: 100%;
  min-height: 46px;
  border-radius: 15px;
  justify-content: center;
  font-weight: 800;
}

.saved-login-codepad {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: min(300px, 100%);
  justify-content: center;
  justify-items: center;
  margin-inline: auto;
}

.saved-login-codepad input {
  width: 100%;
  height: 58px;
  border: 1px solid #dbe6f5;
  border-radius: 16px;
  background: #fff;
  color: #101827;
  text-align: center;
  font-size: 24px;
  font-weight: 900;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.saved-login-codepad input:focus {
  border-color: rgba(47, 116, 246, .86);
  box-shadow: 0 0 0 4px rgba(47, 116, 246, .12);
}

.saved-login-inline-form.is-code-invalid .saved-login-codepad input {
  border-color: #ef4444;
  box-shadow:
    inset 0 0 0 1px #ef4444,
    0 14px 32px rgba(239, 68, 68, .16);
}

.saved-login-inline-form.is-code-shaking .saved-login-codepad {
  animation: saved-login-code-shake .42s cubic-bezier(.36, .07, .19, .97) both;
}

.saved-login-password-field {
  display: grid;
  gap: 8px;
}

.saved-login-password-field span {
  color: #606b7b;
  font-size: 13px;
  font-weight: 800;
}

.saved-login-password-field input {
  width: 100%;
  min-height: 50px;
  border: 1px solid #dbe6f5;
  border-radius: 16px;
  background: #fff;
  color: #101827;
  padding: 0 14px;
  font-size: 16px;
  font-weight: 700;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.saved-login-password-field input:focus {
  border-color: rgba(47, 116, 246, .86);
  box-shadow: 0 0 0 4px rgba(47, 116, 246, .12);
}

.saved-login-method {
  width: 100%;
  min-height: 66px;
  padding: 12px;
  border: 1px solid #dbe6f5;
  border-radius: 18px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  text-align: left;
  background: #fff;
  color: #101827;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.saved-login-method:hover,
.saved-login-method:focus-visible {
  border-color: rgba(47, 116, 246, .88);
  box-shadow: 0 16px 36px rgba(47, 116, 246, .14);
  outline: none;
  transform: translateY(-1px);
}

.saved-login-method:disabled {
  cursor: not-allowed;
  opacity: .58;
  transform: none;
  box-shadow: none;
}

.saved-login-method.primary {
  border-color: rgba(47, 116, 246, .72);
  background: linear-gradient(180deg, #f7faff, #ffffff);
}

.saved-login-method span {
  width: 34px;
  height: 34px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: #eef4ff;
  color: #2f73f6;
  font-size: 14px;
  font-weight: 900;
}

.saved-login-method strong,
.saved-login-method small {
  grid-column: 2;
  display: block;
}

.saved-login-method strong {
  margin-top: -2px;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.1;
}

.saved-login-method small {
  margin-top: 4px;
  color: #697586;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
}

.saved-login-overlay-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.saved-login-overlay-actions .btn {
  min-height: 42px;
  border-radius: 14px;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
}

.logout-memory-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 22px;
}

.logout-memory-actions .btn {
  justify-content: center;
  min-height: 46px;
  border-radius: 16px;
  font-weight: 700;
  text-decoration: none;
}

.saved-login-card {
  padding: 14px;
  margin: 0 auto 16px;
  cursor: default;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.saved-login-card:hover,
.saved-login-card:focus-within {
  border-color: rgba(47, 116, 246, .86);
  box-shadow: 0 18px 50px rgba(47, 116, 246, .14);
  transform: translateY(-1px);
}

.saved-login-title {
  margin: 0 0 10px;
  color: #7a828f;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.saved-login-main {
  padding: 2px 0 14px;
}

.saved-login-list {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.saved-login-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 8px;
  align-items: center;
}

.saved-login-profile-button {
  width: 100%;
  min-width: 0;
  border: 1px solid #dbe6f5;
  border-radius: 18px;
  display: flex;
  align-items: center;
  padding: 11px 12px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.saved-login-profile-button:hover,
.saved-login-profile-button:focus-visible {
  border-color: rgba(47, 116, 246, .82);
  box-shadow: 0 14px 34px rgba(47, 116, 246, .12);
  outline: none;
  transform: translateY(-1px);
}

.saved-login-profile-button .saved-login-profile {
  min-width: 0;
}

.saved-login-profile-button .saved-login-avatar {
  flex: 0 0 auto;
}

.saved-login-remove {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #f1f5fb;
  color: #667085;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.saved-login-remove:hover,
.saved-login-remove:focus-visible {
  background: #eaf1ff;
  color: #2f73f6;
  box-shadow: 0 10px 24px rgba(47, 116, 246, .12);
  outline: none;
  transform: translateY(-1px);
}

.saved-login-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: center;
}

.saved-login-actions .btn {
  width: 100%;
  min-height: 42px;
  border-radius: 14px;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

.saved-login-status {
  margin-top: 10px;
  border-radius: 14px;
  background: #f3f7ff;
  color: #315aa6;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 650;
}

@media (max-width: 520px) {
  .logout-memory-overlay {
    align-items: end;
    padding: 12px;
  }

  .logout-memory-card {
    width: 100%;
    border-radius: 22px;
    padding: 20px;
  }

  .saved-login-overlay {
    align-items: end;
    padding: 12px;
  }

  .saved-login-choice-card {
    width: 100%;
    border-radius: 22px;
    padding: 18px;
  }

  .logout-memory-card h2 {
    font-size: 20px;
  }

  .saved-login-card {
    width: min(100%, 360px);
    padding: 12px;
    border-radius: 20px;
  }

  .saved-login-actions {
    grid-template-columns: 1fr;
  }

  .saved-login-row {
    grid-template-columns: minmax(0, 1fr) 40px;
  }

  .saved-login-remove {
    width: 40px;
    height: 40px;
  }

  .saved-login-overlay-actions {
    grid-template-columns: 1fr;
  }
}

@keyframes logout-memory-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes saved-login-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(8px) scale(.985);
  }
}

@keyframes saved-login-code-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}