.password-guidance {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start;
  gap: 8px; min-height: 22px; margin-top: 9px;
  font-size: 13px; font-weight: 400; line-height: 1.6; color: var(--text-secondary, #66748b);
}
.password-guidance[hidden], .password-confirmation[hidden], .password-strength[hidden] { display: none; }
.password-strength { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; font-weight: 600; }
.password-strength-bars { display: inline-flex; align-items: center; gap: 3px; }
.password-strength-bars i { width: 4px; height: 14px; border-radius: 2px; background: #d8deea; }
.password-guidance-hint { white-space: nowrap; }
.password-guidance[data-invalid="true"] .password-guidance-hint { color: #c03636; }
.password-guidance[data-level="1"] .password-strength { color: #c03636; }
.password-guidance[data-level="2"] .password-strength { color: #a45311; }
.password-guidance[data-level="3"] .password-strength { color: #18754e; }
.password-guidance[data-level="1"] .password-strength-bars i:first-child,
.password-guidance[data-level="2"] .password-strength-bars i:nth-child(-n+2),
.password-guidance[data-level="3"] .password-strength-bars i { background: currentColor; }
.password-field input[aria-invalid="true"], .password-field input[aria-invalid="true"]:focus {
  border-color: #c03636; box-shadow: 0 0 0 2px rgb(192 54 54 / 10%);
}
.password-confirmation { display: block; white-space: nowrap; min-height: 21px; margin-top: 6px; font-size: 13px; font-weight: 400; line-height: 1.6; color: #c03636; }
.password-confirmation[data-match="true"] { color: #18754e; }
@media (max-width: 380px) {
  .password-guidance, .password-strength { font-size: 12px; }
}