/* Register/reset only. Page-owned rules outrank legacy V7 without changing login. */
html.hj-local-upgrade { scroll-behavior: auto !important; }
#authMain.auth-page--account-ui {
  max-width: 1120px;
  padding: 48px 32px 56px !important;
  --account-accent: var(--hj-ceramic-b, #ffc2df);
  --account-line: #726670;
}
#authMain.auth-page--account-ui .auth-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  align-items: start;
  gap: 56px;
}
#authMain.auth-page--account-ui .auth-panel {
  min-width: 0;
  min-height: 0;
  padding: 0 !important;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  animation: none !important;
}
#authMain.auth-page--account-ui .auth-panel::after { display: none; }
#authMain.auth-page--account-ui .auth-panel--form { width: 100% !important; }
#authMain.auth-page--account-ui .auth-form-head { margin-bottom: 20px; }
#authMain.auth-page--account-ui .auth-kicker { margin-bottom: 12px; }
#authMain.auth-page--account-ui .auth-form-title {
  font-size: 36px !important;
  line-height: 1.35 !important;
  letter-spacing: .02em !important;
}
#authMain.auth-page--account-ui .auth-form-title em { color: var(--hj-ceramic-a) !important; }
#authMain.auth-page--account-ui :is(.auth-form-sub, .auth-step-copy) {
  margin: 8px 0 0;
  font: 400 15px/1.7 var(--sans) !important;
  color: #beb7bc !important;
  overflow-wrap: anywhere;
}
#authMain.auth-page--account-ui :is(.auth-form, .auth-step-panel-inner) { gap: 16px; }
#authMain.auth-page--account-ui .auth-step-title { margin: 0; font-size: 20px !important; line-height: 1.5 !important; }
#authMain.auth-page--account-ui .auth-step-copy { margin-top: -8px; }
#authMain.auth-page--account-ui .auth-stepper { gap: 12px; margin-bottom: 20px; }
#authMain.auth-page--account-ui .auth-stepper li {
  font: 500 14px/1.5 var(--sans) !important;
  color: #beb7bc !important;
}
#authMain.auth-page--account-ui .auth-stepper li.is-current { color: var(--account-accent) !important; }
#authMain.auth-page--account-ui .auth-label-row { flex-wrap: wrap; align-items: baseline !important; gap: 4px 12px !important; }
#authMain.auth-page--account-ui .auth-label {
  font: 500 15px/1.5 var(--sans) !important;
  color: #f5f1f3 !important;
  letter-spacing: 0 !important;
  text-transform: none;
}
#authMain.auth-page--account-ui .auth-label-hint {
  min-width: 0;
  font: 400 14px/1.5 var(--sans) !important;
  color: #beb7bc !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere;
}
/* Each control owns its outline; a row of two controls isn't one input. */
#authMain.auth-page--account-ui .auth-input-wrap,
#authMain.auth-page--account-ui .auth-field:focus-within .auth-input-wrap {
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#authMain.auth-page--account-ui .auth-input {
  min-height: 52px !important;
  padding: 12px 14px;
  border: 1px solid var(--account-line) !important;
  border-radius: 8px !important;
  background: #0d0b0c !important;
  color: #f5f1f3 !important;
  font: 400 16px/1.5 var(--sans) !important;
  box-shadow: none !important;
}
#authMain.auth-page--account-ui :is(input, button, a, [tabindex]) { scroll-margin-block: 100px; }
#authMain.auth-page--account-ui .auth-input-wrap:has(.auth-input-toggle) .auth-input { padding-right: 66px; }
#authMain.auth-page--account-ui .auth-input::placeholder { color: #a69da5 !important; opacity: 1; }
#authMain.auth-page--account-ui .auth-input[aria-invalid="true"] { border-color: #ff9fab !important; }
#authMain.auth-page--account-ui .auth-input-toggle {
  width: 48px;
  height: 44px;
  border: 0 !important;
  border-radius: 4px;
  background: transparent !important;
  font: 500 14px/1.5 var(--sans) !important;
}
#authMain.auth-page--account-ui :is(.auth-primary, .auth-step-back) {
  min-height: 52px !important;
  padding: 12px 16px;
  border: 1px solid var(--account-accent) !important;
  border-radius: 10px !important;
  background: var(--account-accent) !important;
  color: #1a1016 !important;
  font: 600 16px/1.5 var(--sans) !important;
  letter-spacing: 0 !important;
  white-space: normal;
  box-shadow: none !important;
  transform: none !important;
  scale: 1 !important;
  filter: none !important;
  transition: none !important;
}
#authMain.auth-page--account-ui :is(.auth-code-button, .auth-step-back) {
  background: transparent !important;
  border-color: var(--account-line) !important;
  color: var(--account-accent) !important;
}
#authMain.auth-page--account-ui .auth-code-button { min-width: 0; flex-basis: 154px; padding-inline: 10px; }
#authMain.auth-page--account-ui :is(button, input, select, a, [tabindex]):focus-visible {
  outline: 2px solid var(--account-accent) !important;
  outline-offset: 3px;
}
#authMain.auth-page--account-ui button:active:not(:disabled) { opacity: .8; }
#authMain.auth-page--account-ui button:disabled { opacity: 1 !important; color: #bab2b9 !important; background: #292529 !important; border-color: #726670 !important; cursor: not-allowed; }
#authMain.auth-page--account-ui :is(.auth-status, .auth-field-error, .auth-check, .auth-link-row) { font: 400 14px/1.7 var(--sans) !important; }
/* Keep live regions in the accessibility tree while removing their empty grid slot. */
#authMain.auth-page--account-ui .auth-status:empty { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); }
#authMain.auth-page--account-ui .auth-check { display: grid; grid-template-columns: 20px minmax(0, 1fr); min-height: 44px; align-items: start; gap: 10px; }
#authMain.auth-page--account-ui .auth-check input { min-height: 18px !important; height: 18px; margin-top: 3px; }
#authMain.auth-page--account-ui .auth-checks { gap: 12px; }
#authMain.auth-page--account-ui .auth-link-row { margin-top: 24px; }
#authMain.auth-page--account-ui .auth-link-row a { display: inline-block; padding-block: 10px; text-underline-offset: 4px; }
@media (max-width: 900px) {
  #authMain.auth-page--account-ui { max-width: 560px; padding: 28px 20px 40px !important; }
  #authMain.auth-page--account-ui .auth-layout { display: block !important; }
  #authMain.auth-page--account-ui .auth-panel--story { display: none !important; }
  #authMain.auth-page--account-ui .auth-form-title { font-size: 32px !important; }
  #authMain.auth-page--account-ui .auth-stepper li::before { display: grid; margin: 0 0 6px; }
}
@media (max-width: 480px) {
  #authMain.auth-page--account-ui .auth-email-row { gap: 10px; }
}
@media (max-width: 360px) {
  #authMain.auth-page--account-ui { padding-inline: 16px !important; }
  #authMain.auth-page--account-ui .auth-captcha-row { flex-direction: column; align-items: flex-start; }
  #authMain.auth-page--account-ui .auth-captcha-box { flex-basis: auto; }
  #authMain.auth-page--account-ui .auth-step-actions { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }
  #authMain.auth-page--account-ui .auth-step-actions--single { grid-template-columns: 1fr; }
}
