.password-requirements {
  display: grid;
  gap: 0.25rem;
  margin: 0.65rem 0 0;
  padding: 0;
  color: var(--text-muted, #8799b3);
  font-size: 0.8rem;
  list-style: none;
}

.password-requirements li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.password-requirements li::before {
  width: 0.8rem;
  color: currentColor;
  content: "○";
  font-size: 0.9rem;
  line-height: 1;
}

.password-requirements li[data-state="valid"] {
  color: var(--success, #24d96f);
}

.password-requirements li[data-state="valid"]::before {
  content: "✓";
}

.password-requirements li[data-state="invalid"] {
  color: var(--error, #ff6174);
}

.password-requirements li[data-state="invalid"]::before {
  content: "×";
}

.password-confirmation-message {
  display: block;
  margin-top: 0.35rem;
  color: var(--error, #ff6174);
  font-size: 0.8rem;
}

.password-confirmation-message[hidden] {
  display: none;
}