.password-requirements-section { margin: 14px 0 10px; text-align: left; }
.password-requirements-title { margin-bottom: 8px; color: #52615a; font-size: 13px; font-weight: 600; }
.password-requirements { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, max-content); gap: 8px; font-size: 12px; line-height: 1.5; }
.password-requirements [data-password-rule="uppercase"] { grid-column: 1; grid-row: 1; }
.password-requirements [data-password-rule="lowercase"] { grid-column: 1; grid-row: 2; }
.password-requirements [data-password-rule="length"] { grid-column: 2; grid-row: 1; }
.password-requirements [data-password-rule] { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid #dce5ec; border-radius: 8px; background: #edf1f5; color: #60758a; font-weight: 500; }
.password-requirements [data-password-rule]::before { content: ''; display: block; flex: 0 0 8px; width: 8px; height: 8px; box-sizing: border-box; border: 1px solid currentColor; border-radius: 50%; }
.password-requirements .is-met { border-color: #b9dfca; background: #eaf7ef; color: #20a667; }
.password-requirements .is-met::before { height: 5px; border-width: 0 0 1.5px 1.5px; border-radius: 0; transform: rotate(-45deg); }
.password-requirements-section.is-inline { margin: 12px 0 6px; text-align: center; }
.password-requirements-section.is-inline .password-requirements { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; }
input.password-field-invalid, .input-group.password-field-invalid { border-color: var(--sc-error-background, #b92f3d) !important; }
.password-field-invalid:focus, .input-group.password-field-invalid:focus-within { outline: none; box-shadow: none; }
.password-validation-feedback::before { display: inline-block; width: 14px; margin-right: 6px; font-size: 16px; font-weight: 700; line-height: 1; text-align: center; }
.password-validation-feedback.is-valid::before { content: '\2713'; color: #20a667; }
.password-validation-feedback.is-invalid::before { content: '\00D7'; color: var(--sc-error-background, #b92f3d); }
.signup_box input:-webkit-autofill, .login-field input:-webkit-autofill, .pass_check_input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--auth-input-fill, #fff) inset !important;
  -webkit-text-fill-color: var(--auth-input-ink, #18211f);
  caret-color: var(--auth-input-ink, #18211f);
}
.signup_box input:autofill, .login-field input:autofill, .pass_check_input:autofill {
  box-shadow: 0 0 0 1000px var(--auth-input-fill, #fff) inset !important;
  color: var(--auth-input-ink, #18211f);
  caret-color: var(--auth-input-ink, #18211f);
}

/*Autofill protection is an interaction guard, not a disabled appearance.
  Apply the same surface in both states so unlocking never changes styling.*/
input.form-control[data-autofill-guard]:not(:disabled) {
  background-color: var(--auth-input-fill, #fff) !important;
  /*Keep the surface white even when browser autofill owns the background.*/
  box-shadow: 0 0 0 1000px var(--auth-input-fill, #fff) inset !important;
  opacity: 1;
  cursor: text;
}