.login-card .login-password-group {
  margin-bottom: 14px;
}

.login-card .login-password-group label {
  margin-bottom: 7px !important;
}

.login-card .login-password-field {
  position: relative;
}

.login-card .login-password-field input {
  padding-right: 60px !important;
}

.login-card .login-password-field input::-ms-reveal {
  display: none;
}

.login-card .login-password-toggle {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: none;
  border-radius: 12px;
  background: color-mix(in srgb,var(--accent) 6%,transparent);
  color: var(--gold);
  cursor: pointer;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}

.login-card .login-password-toggle:hover {
  background: color-mix(in srgb,var(--accent) 16%,transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent);
}

.login-card .login-password-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

.login-card .login-password-toggle svg {
  display: block;
  width: 24px;
  height: 24px;
  pointer-events: none;
}

.login-card .login-password-toggle .login-password-eye-off,
.login-card .login-password-toggle[aria-pressed="true"] .login-password-eye {
  display: none;
}

.login-card .login-password-toggle[aria-pressed="true"] .login-password-eye-off {
  display: block;
}

.login-card .login-password-toggle[hidden] {
  display: none;
}