.password-field {
  position: relative;
}

.password-field input {
  padding-right: 92px;
}

.password-field__toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 64px;
  min-height: 30px;
  border: 1px solid rgba(2, 132, 199, 0.20);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.12), rgba(15, 118, 110, 0.10));
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  color: rgba(15, 23, 42, 0.82);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0 10px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease, color 120ms ease, transform 120ms ease;
}

.password-field__toggle:hover {
  border-color: rgba(2, 132, 199, 0.32);
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.20), rgba(15, 118, 110, 0.16));
  color: rgba(15, 23, 42, 0.92);
  box-shadow: 0 4px 10px rgba(2, 132, 199, 0.14);
}

.password-field__toggle:focus-visible {
  outline: 2px solid rgba(2, 132, 199, 0.45);
  outline-offset: 2px;
  border-radius: 8px;
}

.password-field__toggle[aria-pressed="true"] {
  border-color: rgba(2, 132, 199, 0.38);
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.24), rgba(15, 118, 110, 0.20));
  color: rgba(15, 23, 42, 0.94);
}

.password-field__toggle:active {
  transform: translateY(-50%) scale(0.98);
}