:is(login-form, register-form, password-reset-form, .auth-boot-shell) {
  --auth-control-height: var(--touch-target-min-mobile);
  --auth-control-padding-block: var(--space-2);
  --auth-label-weight: var(--font-weight-semibold);
  --auth-cta-bg: var(--quality-auth-primary-bg, var(--color-brand-primary-800));
  --auth-cta-bg-hover: var(--quality-auth-primary-bg-hover, var(--color-brand-primary-900));
  --auth-supporting-text-min: var(--font-size-base);
  --auth-brand-logo-inline: var(--width-max-xs);
  --auth-redesign-radius: var(--radius-xl);
  --auth-redesign-border: var(--color-border);
  --auth-redesign-surface: var(--color-surface-elevated);
  --auth-control-border: var(--color-border);
  --auth-focus-color: var(--color-brand-primary-900);
  --auth-focus-width: 2px;
  --auth-focus-offset: 2px;
  --auth-control-focus: var(--auth-focus-color);
  --touch-target-min: var(--touch-target-min-mobile);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  color: var(--login-ink);
  font-family: var(--font-family-sans);
  overflow-x: clip;
}
:is(login-form, register-form, password-reset-form, .auth-boot-shell)::after { opacity: 0.14; }

:is(login-form, register-form, password-reset-form, .auth-boot-shell) {
  --gradient-primary: var(--color-brand-primary-800);
  position: relative;
  isolation: isolate;
  background: var(--color-surface-page);
}
:is(login-form, register-form, password-reset-form, .auth-boot-shell)::before {
  content: none;
}
:is(login-form, register-form, password-reset-form, .auth-boot-shell)::after {
  content: none;
}
:is(login-form, register-form, password-reset-form) .login-shell,
.auth-boot-shell {
  position: relative;
  z-index: var(--z-local-raised);
  display: grid;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
  align-content: center;
  align-items: start;
  justify-items: center;
  padding-block: clamp(var(--space-3), 2.4vw, var(--space-6));
  padding-top: max(clamp(var(--space-3), 2.4vw, var(--space-6)), env(safe-area-inset-top));
  padding-bottom: max(clamp(var(--space-3), 2.4vw, var(--space-6)), env(safe-area-inset-bottom));
  padding-inline-start: max(var(--app-chrome-gutter), env(safe-area-inset-left));
  padding-inline-end: max(var(--app-chrome-gutter), env(safe-area-inset-right));
  overflow-x: clip;
  overflow-y: visible;
  container-type: inline-size;
  container-name: login-shell;
}
:is(login-form, register-form, password-reset-form) .login-panel,
.auth-boot-shell .login-panel {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  min-width: 0;
  container-type: inline-size;
  container-name: login-panel;
}
:is(login-form, register-form, password-reset-form) :is(.auth-panel-login, .auth-panel-register, .auth-panel-reset),
.auth-boot-shell :is(.auth-panel-login, .auth-panel-register, .auth-panel-reset) {
  position: relative;
  width: 100%;
  max-width: 100%;
  border: var(--auth-border-width) solid var(--auth-redesign-border);
  border-radius: var(--auth-redesign-radius);
  background: var(--auth-redesign-surface);
  box-shadow: var(--auth-panel-shadow);
  overflow: clip;
  isolation: isolate;
  padding: 0;
}
:is(login-form, register-form, password-reset-form) :is(.auth-panel-login, .auth-panel-register, .auth-panel-reset)::before {
  content: none;
}
:is(login-form, register-form, password-reset-form) :is(.auth-panel-login, .auth-panel-register, .auth-panel-reset)::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--space-0-75);
  background: var(--gradient-primary);
  opacity: 0.85;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
:is(login-form, register-form, password-reset-form) :is(.auth-panel-login, .auth-panel-register, .auth-panel-reset) .card-body,
.auth-boot-shell :is(.auth-panel-login, .auth-panel-register, .auth-panel-reset) .card-body {
  position: relative;
  z-index: var(--z-local-raised);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "identity" "content";
  align-items: start;
  align-content: start;
  gap: clamp(var(--space-4), 2.8vw, var(--space-6));
  padding: clamp(var(--space-4), 2.8vw, var(--space-6));
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}
:is(login-form, register-form, password-reset-form) .login-identity-rail,
register-form .login-identity-rail--register,
password-reset-form .login-identity-rail--reset,
login-form .login-identity-rail--login,
.auth-boot-shell .login-identity-rail {
  grid-area: identity;
  display: grid;
  gap: var(--space-4);
  align-content: start;
  align-self: center;
  min-width: 0;
  max-width: 100%;
}
:is(login-form, register-form, password-reset-form) .login-identity-rail > :is(.login-brand, .login-hero-body) {
  margin-bottom: 0;
  max-width: 100%;
}
:is(login-form, register-form, password-reset-form) .auth-flow-content,
.auth-boot-shell .auth-flow-content {
  grid-area: content;
  display: grid;
  gap: var(--space-3);
  width: 100%;
  max-width: 100%;
  justify-self: stretch;
  min-width: 0;
}
:is(login-form, register-form, password-reset-form) .auth-flow-content > *,
:is(login-form, register-form, password-reset-form) .cq-form > * { min-width: 0; }

:is(login-form, register-form, password-reset-form, .auth-boot-shell) .login-brand {
  display: grid;
  grid-template-columns: minmax(0, var(--auth-brand-logo-inline)) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2) var(--space-3);
  min-width: 0;
  max-width: 100%;
}
:is(login-form, register-form, password-reset-form, .auth-boot-shell) .login-logo-wrap {
  width: var(--auth-brand-logo-inline);
  min-width: 0;
  height: var(--auth-logo-height);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  border: var(--auth-border-width) solid var(--login-border);
  background: var(--color-surface-elevated);
  box-shadow: var(--auth-logo-shadow);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
:is(login-form, register-form, password-reset-form, .auth-boot-shell) .login-logo {
  width: 100%;
  height: 100%;
  max-height: calc(var(--space-8) + var(--space-1));
  object-fit: contain;
}
:is(login-form, register-form, password-reset-form, .auth-boot-shell) .login-brand-text {
  display: grid;
  gap: var(--space-0-75);
  min-width: 0;
}
:is(login-form, register-form, password-reset-form, .auth-boot-shell) .login-brand-name,
:is(login-form, register-form, password-reset-form, .auth-boot-shell) .login-brand-meta {
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  white-space: normal;
}
:is(login-form, register-form, password-reset-form, .auth-boot-shell) .login-brand-name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-wrap: balance;
  color: var(--login-ink);
}
:is(login-form, register-form, password-reset-form, .auth-boot-shell) .login-brand-meta {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
  color: var(--login-ink-muted);
}

:is(login-form, register-form, password-reset-form, .auth-boot-shell) .login-hero-body {
  display: grid;
  gap: var(--space-1);
  margin-bottom: 0;
}
:is(login-form, register-form, password-reset-form, .auth-boot-shell) .login-kicker {
  text-transform: uppercase;
  letter-spacing: var(--tracking-xs);
  font-size: var(--login-font-kicker);
  font-weight: var(--font-weight-semibold);
  color: var(--login-ink-muted);
  line-height: var(--line-height-snug);
}
:is(login-form, register-form, password-reset-form, .auth-boot-shell) .login-title {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: 0;
  margin: 0;
  max-inline-size: 22ch;
  color: var(--login-ink);
  overflow-wrap: normal;
  text-wrap: balance;
}
:is(login-form, register-form, password-reset-form, .auth-boot-shell) .login-subtitle {
  font-size: var(--login-font-secondary);
  color: var(--login-ink-muted);
  max-width: 42ch;
  margin: 0;
  line-height: var(--line-height-normal);
  text-wrap: pretty;
}


.auth-boot-shell .auth-boot-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: fit-content;
  max-width: 100%;
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  border: var(--auth-border-width) solid color-mix(in srgb, var(--login-border) 88%, transparent);
  background: color-mix(in srgb, var(--glass-bg-solid) 78%, white 22%);
  color: var(--login-ink);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 65%, transparent);
}
.auth-boot-shell .auth-boot-status .spinner-border { flex: 0 0 auto; }
.auth-boot-shell .auth-boot-status__text { overflow-wrap: normal; }

:is(login-form, register-form) .password-compact,
password-reset-form .input-group.has-validation { align-items: stretch; }
:is(login-form, register-form, password-reset-form) .input-group {
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
}
:is(login-form, register-form, password-reset-form) .input-group > :is(.form-control, .form-select) {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
:is(login-form, register-form, password-reset-form) .input-group > .btn { flex: 0 0 auto; }
:is(login-form, register-form, password-reset-form) .input-group > .invalid-feedback {
  flex: 1 0 100%;
  width: 100%;
  order: 10;
  margin-top: var(--space-1);
}
:is(login-form, register-form) .password-compact,
password-reset-form .input-group:has(#newPassword) {
  overflow: visible;
  border: var(--auth-border-width) solid var(--auth-control-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-elevated);
}
:is(login-form, register-form) .password-compact:focus-within,
password-reset-form .input-group:has(#newPassword):focus-within {
  border-color: var(--auth-control-focus);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--auth-control-focus);
}
login-form .password-compact.is-invalid {
  border-color: var(--color-danger-700);
  box-shadow: var(--auth-danger-ring);
}
login-form .password-compact.is-invalid .password-toggle {
  border-inline-start-color: var(--color-danger-700);
}
:is(login-form, register-form) .password-compact :is(.form-control, .password-toggle),
password-reset-form .input-group:has(#newPassword) :is(.form-control, .btn) {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
:is(login-form, register-form) .password-toggle,
password-reset-form :is(#togglePassword, #toggleConfirmPassword) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min);
  min-width: var(--touch-target-min);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-inline-start: var(--auth-border-width) solid var(--auth-control-border);
  background: var(--color-surface-elevated);
  color: var(--login-ink);
  padding-inline: var(--space-2);
}
:is(login-form, register-form) .password-toggle > i,
password-reset-form :is(#togglePassword, #toggleConfirmPassword) > i { display: block; line-height: 1; }
:is(login-form, register-form, password-reset-form) .auth-toggle-icon,
:is(login-form, register-form, password-reset-form) .auth-inline-icon {
  display: inline-flex;
  width: var(--auth-inline-icon-size);
  height: var(--auth-inline-icon-size);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  vertical-align: var(--auth-icon-baseline-shift);
}
:is(login-form, register-form, password-reset-form) .auth-toggle-icon svg,
:is(login-form, register-form, password-reset-form) .auth-inline-icon svg { display: block; width: 100%; height: 100%; }

login-form .captcha-slot.captcha-reserved,
register-form #captcha-container.captcha-reserved { min-height: var(--space-18); }
register-form #captcha-container,
login-form .captcha-slot,
password-reset-form #captchaContainer {
  max-width: 100%;
}
register-form #captcha-container { min-width: 0; width: 100%; margin: 0; }
register-form #captcha-container[hidden],
register-form #captcha-container[data-captcha-visible="false"] { display: none; }
register-form #captcha-container[data-captcha-visible="true"]:not([hidden]) {
  display: flex;
  justify-content: center;
}

login-form .login-panel-header { display: grid; gap: var(--space-2); text-align: left; align-items: center; }
login-form .login-panel-kicker {
  font-size: var(--login-font-kicker);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--login-ink-muted);
  line-height: 1.35;
}
login-form .login-links {
  margin-top: var(--space-2);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  gap: var(--space-2);
  color: var(--login-ink-muted);
  text-align: center;
  min-width: 0;
  max-width: 100%;
}
login-form .login-links > * { min-width: 0; }
login-form .login-register-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-width: 0;
}
login-form .login-register-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  min-width: 0;
  font-size: var(--login-font-secondary);
  line-height: 1.4;
  color: var(--login-ink-muted);
  white-space: normal;
  overflow-wrap: normal;
}
login-form .login-link,
:is(login-form, register-form, password-reset-form) .login-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
  padding-block: var(--space-1);
  padding-inline: var(--space-2);
  font-size: var(--login-font-link);
  line-height: 1.35;
  font-weight: var(--font-weight-semibold);
  max-width: 100%;
  overflow-wrap: normal;
  word-break: normal;
  white-space: normal;
  color: var(--login-ink);
  text-decoration: none;
  border-bottom: var(--auth-border-width) solid transparent;
}
:is(login-form, register-form, password-reset-form) .login-link:hover,
:is(login-form, register-form, password-reset-form) .login-link:focus {
  color: var(--login-teal);
  border-bottom-color: currentColor;
}
login-form .auth-panel-login .login-links .btn:not(.input-group .btn) { width: fit-content; flex: 0 0 auto; }
login-form :is(#passwordHelp, #capsLockIndicator) { font-size: var(--login-font-secondary); line-height: var(--line-height-normal); }
login-form .invalid-feedback,
login-form #attemptsWarning small,
login-form #attemptsWarning #attemptsText,
login-form #captchaContainer small,
login-form #captchaContainer .btn.btn-link.btn-sm { font-size: var(--font-size-sm); line-height: var(--line-height-normal); }
login-form #captchaContainer .btn.btn-link.btn-sm { font-weight: var(--font-weight-semibold); }

register-form #registerForm {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  width: 100%;
  justify-self: stretch;
  min-width: 0;
  container-type: inline-size;
  container-name: register-form-fields;
}
register-form #registerForm > .register-divider { margin: var(--space-1) 0; }
register-form #registerForm > :is(.step-indicator, .register-step-panel, .register-captcha, #errorMsg, .register-login) { grid-column: 1 / -1; }
register-form .register-step-panel { display: grid; gap: var(--space-3); min-width: 0; }
register-form .register-login { margin-top: var(--space-1); text-align: center; }
register-form .register-field { min-width: 0; }

register-form .register-step-copy { display: grid; gap: var(--space-1); }
register-form .register-step-copy h2 { margin: 0; font-size: var(--font-size-base); line-height: var(--line-height-snug); }
register-form .register-step-copy p { margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
register-form .register-step-actions { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); gap: var(--space-2); align-items: center; }
register-form .register-step-actions .btn { width: 100%; }
:is(register-form .register-step-actions, password-reset-form .form-footer) .btn-link { color: var(--login-ink); }
@container register-form-fields (width >= 32rem) {
  register-form #registerForm { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-3); row-gap: var(--space-3); }
  register-form #registerForm > :is(.register-field--name, .register-field--email, .register-field--password, .register-divider, .register-captcha, .register-submit, #errorMsg, .register-login) { grid-column: 1 / -1; }
}

password-reset-form .login-shell { min-height: 0; }
password-reset-form .honeypot-field,
password-reset-form .honeypot-field input,
password-reset-form .honeypot-field label { display: none; }
password-reset-form .security-question-label { overflow-wrap: normal; word-break: normal; }
password-reset-form :is(.reset-email-input, #answer, .password-field) {
  color: var(--color-text-primary);
  background-color: var(--color-surface-elevated);
}
password-reset-form .reset-success-btn,
password-reset-form .reset-success-btn:hover,
password-reset-form .reset-success-btn:focus-visible,
password-reset-form .reset-success-btn:active {
  background-color: var(--color-success-700);
  border-color: var(--color-success-700);
  color: var(--color-text-inverse);
}
password-reset-form .reset-form { min-width: 0; }
password-reset-form .forgot-form-skip { left: calc(var(--space-2) + var(--auth-skip-form-offset)); }

:is(register-form, password-reset-form) .step-indicator {
  position: relative;
  --step-circle-size: clamp(var(--space-10), 4.2vw, var(--space-12));
  --step-total: 3;
  --step-current: 1;
  --step-line-offset: calc(var(--step-circle-size) / 2);
  --step-line-length: calc(100% - var(--step-circle-size));
  --step-progress: calc((var(--step-current) - 1) * var(--step-line-length) / (var(--step-total) - 1));
  container-type: inline-size;
  container-name: auth-stepper;
}
register-form .step-indicator { --step-total: 2; }
:is(register-form, password-reset-form) .step-indicator[data-current-step="2"] { --step-current: 2; }
password-reset-form .step-indicator[data-current-step="3"] { --step-current: 3; }
:is(register-form, password-reset-form) .auth-step-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--step-total), minmax(0, 1fr));
  align-items: start;
  gap: var(--space-2);
}
:is(register-form, password-reset-form) .step-item {
  z-index: var(--z-local-raised);
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: var(--space-1);
}
:is(register-form, password-reset-form) .step-circle {
  width: var(--step-circle-size);
  height: var(--step-circle-size);
  display: inline-grid;
  place-items: center;
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
  cursor: default;
  user-select: none;
  background: var(--color-surface-elevated);
  border: var(--auth-border-width) solid color-mix(in srgb, var(--color-text-secondary) 28%, transparent);
  color: var(--color-text-secondary);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
:is(register-form, password-reset-form) .step-item.is-current .step-circle {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: var(--color-text-inverse);
  box-shadow: var(--auth-step-current-ring);
}
:is(register-form, password-reset-form) .step-item.is-complete .step-circle {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: var(--color-text-inverse);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
:is(register-form, password-reset-form) .step-item:not(.is-complete) .step-circle { pointer-events: none; }
:is(register-form, password-reset-form) .step-label {
  font-size: var(--auth-supporting-text-min);
  color: var(--color-text-secondary);
}
:is(register-form, password-reset-form) .step-item.is-current .step-label,
:is(register-form, password-reset-form) .step-item.is-complete .step-label {
  color: var(--login-ink);
  font-weight: var(--font-weight-medium);
}
:is(register-form, password-reset-form) .step-line,
:is(register-form, password-reset-form) .step-line-progress {
  position: absolute;
  top: calc(var(--step-circle-size) / 2);
  height: var(--space-0-75);
  border-radius: var(--radius-full);
}
:is(register-form, password-reset-form) .step-line {
  left: var(--step-line-offset);
  right: var(--step-line-offset);
  background: var(--bs-border-color);
  z-index: auto;
}
:is(register-form, password-reset-form) .step-line-progress {
  left: var(--step-line-offset);
  width: var(--step-progress);
  background: var(--bs-primary);
  z-index: var(--z-local-raised);
  transition: width var(--dur-normal) var(--ease-out);
}
:is(register-form, password-reset-form) .step-circle:focus-visible,
password-reset-form .password-tools-toggle .form-check-input:focus-visible {
  outline: var(--auth-focus-width) solid var(--auth-focus-color);
  outline-offset: var(--auth-focus-offset);
  box-shadow: none;
}

password-reset-form .password-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  container-type: inline-size;
  container-name: forgot-password-tools;
}
password-reset-form .password-tools-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-height: var(--touch-target-min);
  margin: 0;
}
password-reset-form .password-tools-toggle .form-check-input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}
password-reset-form .password-tools-toggle .form-check-input::before,
password-reset-form .password-tools-toggle .form-check-input::after {
  content: "";
  position: absolute;
  top: 50%;
  border-radius: var(--radius-full);
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
password-reset-form .password-tools-toggle .form-check-input::before {
  left: var(--auth-switch-track-inset);
  width: var(--auth-switch-track-inline);
  height: var(--auth-switch-track-block);
  border: var(--auth-border-width) solid color-mix(in srgb, var(--color-brand-primary-700) 24%, var(--login-border));
  background: color-mix(in srgb, var(--color-surface-elevated) 94%, white);
  transform: translateY(-50%);
}
password-reset-form .password-tools-toggle .form-check-input::after {
  left: var(--auth-switch-thumb-inset);
  width: var(--auth-switch-thumb-size);
  height: var(--auth-switch-thumb-size);
  background: var(--color-brand-primary-900);
  transform: translateY(-50%);
}
password-reset-form .password-tools-toggle .form-check-input:checked::before {
  border-color: var(--color-brand-primary);
  background: var(--color-brand-primary);
}
password-reset-form .password-tools-toggle .form-check-input:checked::after {
  background: var(--color-text-inverse);
  transform: translate(var(--auth-switch-thumb-travel), -50%);
}
password-reset-form .password-tools-toggle .form-check-input:focus-visible::before { box-shadow: var(--focus-ring); }
password-reset-form .password-tools-generate { width: auto; justify-self: start; align-self: flex-start; white-space: nowrap; }
password-reset-form .form-footer { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); flex-wrap: wrap; }
password-reset-form .auth-panel .btn-inline { width: auto; }

:is(login-form, register-form, password-reset-form) password-strength { display: block; margin-top: var(--space-1); min-width: 0; max-width: 100%; }
:is(login-form, register-form, password-reset-form) .password-strength-container { display: grid; gap: var(--space-1); min-width: 0; max-width: 100%; }
:is(login-form, register-form, password-reset-form) .password-strength-container > .d-flex { min-width: 0; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin-bottom: 0; }
:is(login-form, register-form, password-reset-form) .password-strength-bar { min-width: min(var(--auth-strength-meter-min), 100%); }
:is(login-form, register-form, password-reset-form) .password-strength-label {
  flex: 0 0 auto;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}
:is(register-form, password-reset-form) .password-strength-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--auth-strength-item-min)), 1fr));
  gap: var(--space-1) var(--space-2);
  align-items: start;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}
:is(register-form, password-reset-form) .password-strength-item {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  justify-content: start;
  min-width: 0;
  max-width: 100%;
  column-gap: var(--space-1);
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
:is(register-form, password-reset-form) .password-strength-item__label { min-width: 0; max-width: 100%; overflow-wrap: normal; word-break: normal; hyphens: none; }
:is(register-form, password-reset-form) .password-strength-item i { font-size: var(--font-size-xs); margin-top: var(--auth-strength-icon-offset); }
:is(login-form, register-form, password-reset-form) :is(.password-strength-checklist, .password-strength-checklist *) {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
:is(login-form, register-form, password-reset-form) password-strength:has(.password-strength-bar[aria-valuenow="0"]) .password-strength-container > .d-flex { display: none; }

password-reset-form .rate-limit-progress { appearance: none; width: 100%; height: var(--space-1); border: 0; border-radius: var(--radius-full); overflow: hidden; }
password-reset-form .rate-limit-progress::-webkit-progress-bar { background: var(--color-border-light); }
password-reset-form .rate-limit-progress::-webkit-progress-value { background: var(--color-warning-700); transition: inline-size 1s linear; }
password-reset-form .rate-limit-progress::-moz-progress-bar { background: var(--color-warning-700); }

:is(login-form, register-form, password-reset-form) :is(.step-label, .form-text, .invalid-feedback, .form-check-label, .alert, .btn-sm, .password-strength-item) {
  font-size: var(--auth-supporting-text-min);
  line-height: var(--line-height-normal);
}
password-reset-form .password-tools .btn.btn-inline,
password-reset-form .password-tools .btn-sm.btn-inline,
password-reset-form #generatePasswordBtn { width: auto; flex: 0 0 auto; align-self: flex-start; }
password-reset-form:has(#resetFormStep3) .auth-flow-content--reset { row-gap: var(--space-2); }
password-reset-form:has(#resetFormStep3) .auth-flow-content--reset > h2 { margin-bottom: var(--space-2); font-size: var(--font-size-xl); line-height: 1.2; }
password-reset-form:has(#resetFormStep3) .step-indicator { margin-bottom: var(--space-2); }
password-reset-form #resetFormStep3,
password-reset-form #resetFormStep3 #mainFormContent { display: grid; row-gap: var(--space-2); }
password-reset-form #resetFormStep3 :is(.mb-3, .form-footer) { margin-block: 0; }
password-reset-form #resetFormStep3 .password-tools { margin-bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); }

:is(login-form, register-form, password-reset-form) .form-label {
  font-size: var(--login-font-label);
  line-height: var(--line-height-normal);
  font-weight: var(--auth-label-weight);
  color: var(--login-ink);
  margin-bottom: var(--space-1);
}
:is(login-form, register-form, password-reset-form) .form-text,
:is(login-form, register-form, password-reset-form) .invalid-feedback { margin-top: var(--space-1); }
:is(login-form, register-form, password-reset-form) :is(.form-control, .form-select) {
  min-height: var(--auth-control-height);
  padding-block: var(--auth-control-padding-block);
  min-width: 0;
  max-width: 100%;
  border-color: var(--auth-control-border);
  background-color: var(--color-surface-elevated);
  box-shadow: var(--auth-control-inner-shadow);
  text-overflow: ellipsis;
}
:is(login-form, register-form, password-reset-form) :is(.form-control, .form-select):focus {
  border-color: var(--auth-control-focus);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--auth-control-focus);
}
:is(login-form, register-form, password-reset-form) :is(.form-control, .form-select).is-invalid {
  border-color: var(--color-danger-700);
  box-shadow: var(--auth-danger-ring);
}
:is(login-form, register-form, password-reset-form) :is(.form-control, .form-select).is-valid {
  border-color: var(--color-success-700);
  box-shadow: var(--auth-success-ring);
}
:is(login-form, register-form, password-reset-form) :is(.alert, .alert *, .invalid-feedback, .security-question-label) { overflow-wrap: normal; }
:is(login-form, register-form, password-reset-form) :is(.alert-danger, [data-ui-state="error"] .auth-panel) {
  border-color: color-mix(in srgb, var(--color-danger-700) 30%, var(--login-border));
}

:is(login-form, register-form, password-reset-form) .auth-panel .btn:is(.btn-primary, .reset-primary-btn, #registerBtn, #loginBtn, #nextBtn, #verifyBtn, #resetBtn) {
  min-height: var(--auth-control-height);
  padding-block: var(--auth-control-padding-block);
  border-color: var(--auth-cta-bg);
  background: var(--auth-cta-bg);
  background-image: none;
  color: var(--color-text-inverse);
  box-shadow: none;
  user-select: none;
}
:is(login-form, register-form, password-reset-form) .auth-panel .btn:is(.btn-primary, .reset-primary-btn, #registerBtn, #loginBtn, #nextBtn, #verifyBtn, #resetBtn):is(:hover, :focus, :focus-visible, :active) {
  border-color: var(--auth-cta-bg-hover);
  background: var(--auth-cta-bg-hover);
  background-image: none;
  color: var(--color-text-inverse);
}
:is(login-form, register-form, password-reset-form) .auth-panel .btn:is(.btn-primary, .reset-primary-btn, #registerBtn, #loginBtn, #nextBtn, #verifyBtn, #resetBtn):focus-visible {
  outline: var(--auth-focus-width) solid var(--auth-focus-color);
  outline-offset: var(--auth-focus-offset);
  box-shadow: none;
}
:is(login-form, register-form, password-reset-form) .btn :is(.btn-text, #loginBtnText, #registerBtnText) { line-height: 1.2; }
:is(login-form, register-form, password-reset-form) [data-ui-state="success"] :is(#loginBtn, #registerBtn, .reset-success-btn) {
  background-color: var(--color-success-700);
  border-color: var(--color-success-700);
}
:is(login-form, register-form, password-reset-form) .auth-flow-content { display: grid; gap: var(--space-3); }
:is(login-form, register-form, password-reset-form) .login-shell,
:is(login-form, register-form, password-reset-form) .login-panel,
:is(login-form, register-form, password-reset-form) :is(.auth-panel-login, .auth-panel-register, .auth-panel-reset),
:is(login-form, register-form, password-reset-form) :is(.auth-panel-login, .auth-panel-register, .auth-panel-reset) .card-body,
:is(login-form, register-form, password-reset-form) .auth-flow-content {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
:is(login-form, register-form, password-reset-form) :is(.login-title, .login-subtitle, .login-brand-name, .login-brand-meta, .btn) {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}
:is(login-form, register-form, password-reset-form) :is(.btn, button, a[href]) {
  touch-action: manipulation;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: min(var(--touch-target-min), 100%);
  max-width: 100%;
}
:is(login-form, register-form, password-reset-form) :is(.btn, button) :is(.btn-text, .btn-loading) {
  min-width: 0; max-width: 100%; overflow-wrap: normal; white-space: normal;
}
:is(login-form, register-form, password-reset-form) :is(.touch-target, .touch-target-min, .btn.touch-target, .btn.touch-target-min, button.touch-target, a.touch-target, .form-control.touch-target, .form-select.touch-target, .password-toggle, .reset-primary-btn, .reset-success-btn, #registerBtn, #loginBtn) {
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
}
.auth-panel .btn { padding: var(--space-3); }
.auth-panel .btn:not(.input-group .btn) { width: 100%; }

:is(login-form, register-form, password-reset-form) :is(.btn, button, a[href], .form-control, .form-select, .form-check-input):focus-visible {
  outline: var(--auth-focus-width) solid var(--auth-focus-color);
  outline-offset: var(--auth-focus-offset);
  box-shadow: none;
}
:is(login-form, register-form, password-reset-form) :is(.btn, button):active:not(:disabled) { transform: translateY(1px); }
:is(login-form, register-form, password-reset-form) :is(.btn, button):disabled,
:is(login-form, register-form, password-reset-form) :is(.btn, button)[aria-disabled="true"],
:is(login-form, register-form, password-reset-form) [data-ui-state="submitting"] :is(.btn, button),
:is(login-form, register-form, password-reset-form) [data-ui-state="cooldown"] :is(.btn, button),
:is(login-form, register-form, password-reset-form) [aria-busy="true"] :is(.btn, button) {
  cursor: not-allowed;
  transform: none;
  opacity: var(--auth-disabled-control-opacity);
}
:is(login-form, register-form, password-reset-form) [data-ui-state="submitting"] .btn:is(.btn-primary, .reset-primary-btn),
:is(login-form, register-form, password-reset-form) [data-ui-state="cooldown"] .btn:is(.btn-primary, .reset-primary-btn),
:is(login-form, register-form, password-reset-form) [aria-busy="true"] .btn:is(.btn-primary, .reset-primary-btn),
:is(login-form, register-form, password-reset-form) .btn:is(.btn-primary, .reset-primary-btn):disabled {
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  :is(login-form, register-form, password-reset-form) :is(.btn, button, a[href]):hover { text-decoration-thickness: 0.08em; }
  :is(login-form, register-form, password-reset-form) :is(#loginBtn, #registerBtn, .reset-primary-btn, .reset-success-btn):hover:not(:disabled) {
    box-shadow: var(--auth-cta-hover-shadow);
  }
}
@media (prefers-reduced-motion: reduce) {
  .skip-link,
  :is(login-form, register-form, password-reset-form) :is(.step-circle, .step-line-progress, .password-tools-toggle .form-check-input::before, .password-tools-toggle .form-check-input::after) {
    transition: none;
  }
}


@media (width < 768px) {
  :is(login-form, register-form, password-reset-form) {
    --auth-brand-logo-inline: min(100%, var(--auth-mobile-brand-inline));
  }
  :is(login-form, register-form, password-reset-form) .login-shell {
    padding: var(--space-3);
    padding-top: max(var(--space-3), env(safe-area-inset-top));
    padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
    align-content: start;
  }
  :is(login-form, register-form, password-reset-form, .auth-boot-shell) :is(.auth-panel-login, .auth-panel-register, .auth-panel-reset) .card-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "identity" "content";
    row-gap: var(--space-3);
    padding: var(--space-3);
  }
  :is(login-form, register-form, password-reset-form, .auth-boot-shell) .login-brand {
    grid-template-columns: minmax(0, 1fr);
    min-block-size: 0;
  }
  :is(login-form, register-form, password-reset-form, .auth-boot-shell) .login-logo-wrap { width: min(100%, var(--auth-mobile-brand-inline)); height: var(--space-10); }
  :is(login-form, register-form, password-reset-form, .auth-boot-shell) .login-title { font-size: var(--font-size-2xl); line-height: var(--line-height-tight); }
  :is(login-form, register-form, password-reset-form, .auth-boot-shell) .login-subtitle { max-width: 34ch; }
  :is(login-form, register-form, password-reset-form) .auth-flow-content { width: 100%; }
  login-form .login-links,
  login-form .login-register-row { align-items: stretch; }
  login-form .login-link,
  password-reset-form .form-footer .btn-inline,
  password-reset-form .password-tools-generate { width: 100%; }
  register-form #registerForm { grid-template-columns: minmax(0, 1fr); }
  register-form #registerForm > * { grid-column: 1 / -1; }
  register-form .register-step-actions { grid-template-columns: minmax(0, 1fr); }
  password-reset-form .form-footer { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  password-reset-form .password-tools { grid-template-columns: minmax(0, 1fr); }
  password-reset-form .password-tools-generate { width: 100%; justify-self: stretch; justify-content: center; }
  :is(register-form, password-reset-form) .password-strength-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-0-75) var(--space-2); }
  password-reset-form .forgot-form-skip { left: var(--space-2); top: calc(var(--space-2) + var(--touch-target-min) + var(--space-2)); }
}

@media (width >= 768px) and (width < 1366px) {
  :is(login-form, register-form, password-reset-form, .auth-boot-shell) .login-panel { max-width: var(--register-form-max-inline); }
  :is(login-form, register-form, password-reset-form, .auth-boot-shell) :is(.auth-panel-login, .auth-panel-register, .auth-panel-reset) .card-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "identity" "content";
  }
  register-form .login-identity-rail--register,
  password-reset-form .login-identity-rail--reset { max-width: 100%; }
  register-form .auth-flow-content--register,
  password-reset-form .auth-flow-content--reset,
  register-form #registerForm,
  password-reset-form .reset-form { width: 100%; max-width: 100%; justify-self: stretch; }
}

@media (width >= 1366px) and (width < 1920px) {
  :is(login-form, register-form, password-reset-form) .login-shell { align-content: center; }
  :is(login-form, register-form, password-reset-form, .auth-boot-shell) .login-panel { max-width: var(--register-form-max-inline); }
  :is(login-form, register-form, password-reset-form, .auth-boot-shell) :is(.auth-panel-login, .auth-panel-register, .auth-panel-reset) .card-body {
    grid-template-columns: var(--auth-laptop-columns);
    grid-template-areas: "identity content";
    align-items: start;
    column-gap: clamp(var(--space-4), 2.4vw, var(--space-6));
    padding: var(--space-4);
  }
  :is(register-form, password-reset-form) .password-strength-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  password-reset-form .password-tools { grid-template-columns: minmax(0, 1fr) auto; }
  password-reset-form .password-tools-toggle { width: auto; max-width: min(100%, var(--auth-password-tools-laptop-max)); }
  password-reset-form .form-footer { justify-content: flex-start; }
  password-reset-form .form-footer .btn-inline { width: auto; }
  password-reset-form:has(#resetFormStep3) .auth-panel-reset .card-body { padding: var(--space-3); }
  password-reset-form:has(#resetFormStep3) .auth-flow-content--reset,
  password-reset-form:has(#resetFormStep3) #resetFormStep3,
  password-reset-form:has(#resetFormStep3) #resetFormStep3 #mainFormContent { row-gap: var(--space-1); }
  password-reset-form:has(#resetFormStep3) #resetFormStep3 :is(.mb-3, .form-footer) { margin-block: 0; }
  password-reset-form:has(#resetFormStep3) .password-strength-list { gap: var(--space-0-75) var(--space-2); }
}

@media (width >= 1920px) {
  :is(login-form, register-form, password-reset-form) .login-shell { align-content: center; }
  :is(login-form, register-form, password-reset-form, .auth-boot-shell) .login-panel { max-width: var(--register-form-max-inline); }
  :is(login-form, register-form, password-reset-form, .auth-boot-shell) :is(.auth-panel-login, .auth-panel-register, .auth-panel-reset) .card-body {
    grid-template-columns: var(--auth-desktop-columns);
    grid-template-areas: "identity content";
    align-items: start;
    column-gap: var(--space-5);
  }
  password-reset-form .password-tools { grid-template-columns: minmax(0, 1fr) auto; }
  password-reset-form .password-tools-toggle { width: auto; max-width: min(100%, var(--auth-password-tools-desktop-max)); }
  password-reset-form .form-footer { justify-content: flex-start; }
  password-reset-form .form-footer .btn-inline { width: auto; }
}