.auth-overlay {
  --auth-surface: #ffffff;
  --auth-field-bg: #f3f4f6;
  --auth-field-border-focus: #9b5cff;
  --auth-field-border-error: #ef4444;
  --auth-text: #111827;
  --auth-muted: #7c8498;
  --auth-placeholder: #98a2b3;
  --auth-radius-card: 28px;
  --auth-radius-field: 16px;
  --auth-shadow: 0 24px 64px rgba(15, 23, 42, .18);
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transition: opacity .30s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .30s;
  isolation: isolate;
}

.auth-overlay,
.auth-overlay *,
.auth-overlay *::before,
.auth-overlay *::after {
  box-sizing: border-box;
}

.auth-overlay[hidden] { display: none !important; }

.auth-overlay.is-open,
.auth-overlay.listing-payment-modal:not([hidden]) {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.auth-overlay__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 0;
  background: rgba(30, 41, 59, .32);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 0;
  transition: opacity .32s cubic-bezier(.22, .61, .36, 1);
}

.auth-overlay.is-open .auth-overlay__backdrop,
.auth-overlay.listing-payment-modal:not([hidden]) .auth-overlay__backdrop { opacity: 1; }

[data-auth-modal-root].auth-overlay .auth-shell {
  position: relative !important;
  z-index: 2 !important;
  width: min(600px, calc(100vw - 48px)) !important;
  max-width: 600px !important;
  opacity: 0;
  transform: translate3d(0, 12px, 0) scale(.982);
  transition:
    opacity .30s cubic-bezier(.22,.61,.36,1),
    transform .34s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}

[data-auth-modal-root].auth-overlay.is-open > .auth-shell {
  opacity: 1 !important;
  transform: translate3d(0,0,0) scale(1) !important;
}

[data-auth-modal-root].auth-overlay .auth-card {
  position: relative;
  width: 100% !important;
  max-width: none !important;
  height: auto;
  padding: 34px 40px 28px !important;
  border: 0 !important;
  border-radius: var(--auth-radius-card) !important;
  background: var(--auth-surface) !important;
  color: var(--auth-text);
  box-shadow: var(--auth-shadow) !important;
  overflow: visible;
  opacity: 1;
  transform: none;
  transition: height .28s cubic-bezier(.22, .61, .36, 1);
  will-change: height;
}

.auth-card.is-ready {
  opacity: 1;
  transform: none;
}

.auth-card.is-step-transitioning { overflow: hidden; }

.auth-overlay [data-auth-step] {
  width: 100%;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .16s ease, transform .18s cubic-bezier(.22, .61, .36, 1);
}

.auth-overlay [data-auth-step][hidden] { display: none !important; }
.auth-overlay [data-auth-step].is-leaving { opacity: 0; transform: translateY(6px); }
.auth-overlay [data-auth-step].is-entering { opacity: 0; transform: translateY(6px); }

.auth-content,
.auth-email-content {
  position: relative;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
}

.auth-header { margin: 0 0 20px; text-align: center; }
.auth-title {
  max-width: 430px;
  margin: 0 auto;
  color: var(--auth-text);
  font-size: 31px;
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.025em;
  text-align: center;
}
.auth-subtitle {
  max-width: 430px;
  margin: 10px auto 0;
  color: var(--auth-muted);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 500;
  text-align: center;
}
.auth-subtitle[hidden] { display: none !important; }

.auth-form { display: grid; gap: 12px; margin: 0; }
.auth-field { display: grid; gap: 0; min-width: 0; margin: 0; }
.auth-label { display: block; margin: 0 0 7px; color: #475467; font-size: 12px; line-height: 1.3; font-weight: 600; }

.auth-overlay .auth-input {
  display: block;
  width: 100%;
  height: 56px !important;
  min-height: 56px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border: 2px solid transparent !important;
  border-radius: var(--auth-radius-field) !important;
  background: var(--auth-field-bg) !important;
  color: var(--auth-text) !important;
  font: inherit;
  font-size: 16px !important;
  line-height: 1.2;
  outline: 0 !important;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .22s cubic-bezier(.22,.61,.36,1), background-color .22s ease, box-shadow .22s ease;
}
.auth-overlay .auth-input::placeholder { color: var(--auth-placeholder) !important; opacity: 1; }
.auth-overlay .auth-input:hover:not([aria-invalid="true"]) { background: #eef0f3 !important; }
.auth-overlay .auth-input:focus,
.auth-overlay .auth-input:focus-visible {
  border-width: 2px !important;
  border-color: var(--auth-field-border-focus) !important;
  background: #fff !important;
  outline: 0 !important;
  box-shadow: 0 0 0 1px rgba(139, 92, 246, .08) !important;
}
.auth-overlay .auth-input[aria-invalid="true"],
.auth-overlay .auth-field.is-error .auth-input,
.auth-overlay .auth-input[aria-invalid="true"]:focus,
.auth-overlay .auth-input[aria-invalid="true"]:focus-visible,
.auth-overlay .auth-field.is-error .auth-input:focus,
.auth-overlay .auth-field.is-error .auth-input:focus-visible {
  border-width: 2px !important;
  border-color: var(--auth-field-border-error) !important;
  background: #fff !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.auth-field-error,
.auth-code-error {
  margin: 6px 0 0;
  padding: 0;
  color: var(--auth-field-border-error);
  background: transparent;
  border: 0;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 500;
}
.auth-field-error[hidden], .auth-code-error[hidden] { display: none !important; }
.auth-field-error--timer { color: #667085; }

.auth-password-field { position: relative; min-width: 0; }
.auth-overlay .auth-input--password { padding-right: 52px !important; }
.auth-password-toggle {
  position: absolute;
  top: 50%;
  right: 17px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 26px !important;
  min-width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #98a2b3 !important;
  box-shadow: none !important;
  outline: 0 !important;
  transform: translateY(-50%) !important;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: color .16s ease, background-color .16s ease, opacity .18s ease;
}
.auth-password-toggle:hover,
.auth-password-toggle:focus-visible {
  border: 0 !important;
  background: rgba(17, 24, 39, .045) !important;
  color: #667085 !important;
  box-shadow: none !important;
  outline: 0 !important;
  transform: translateY(-50%) !important;
}
.auth-password-toggle[hidden] { display: none !important; }
.auth-password-toggle svg {
  display: block;
  width: 20px;
  height: 20px;
  transition: opacity .16s ease, transform .20s cubic-bezier(.22, .61, .36, 1);
}
.auth-password-toggle:active svg { transform: scale(.88); opacity: .7; }

.auth-field-meta {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  min-height: 19px;
}
.auth-field-meta .auth-field-error { margin-right: auto; }
.auth-field-meta .auth-secondary-link--right { margin-left: auto !important; flex: 0 0 auto; text-align: right !important; }

.auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 15px !important;
  background: linear-gradient(90deg, #a53ef3, #8b24ed) !important;
  color: #fff !important;
  font-size: 16px !important;
  line-height: 1;
  font-weight: 700 !important;
  text-align: center;
  box-shadow: none !important;
  outline: 0 !important;
  cursor: pointer;
  transition: filter .14s ease, opacity .14s ease;
  transform: none !important;
}
.auth-btn:hover { filter: brightness(1.025); transform: none !important; }
.auth-btn:active { filter: brightness(.985); transform: none !important; }
.auth-btn:focus-visible { outline: 2px solid rgba(139, 92, 246, .35) !important; outline-offset: 2px !important; }
.auth-btn:disabled { opacity: .52; cursor: not-allowed; filter: none; transform: none !important; }

.auth-secondary-link,
.auth-overlay button.auth-secondary-link,
.auth-resend-btn {
  display: inline;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--auth-placeholder) !important;
  font-size: 12.5px !important;
  line-height: 1.35;
  font-weight: 600 !important;
  text-decoration: none;
  box-shadow: none !important;
  outline: 0 !important;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: color .14s ease;
}
.auth-secondary-link:hover,
.auth-secondary-link:focus-visible,
.auth-resend-btn:hover,
.auth-resend-btn:focus-visible {
  color: #667085 !important;
  text-decoration: underline;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}
.auth-secondary-link--center { justify-self: center; text-align: center; }
.auth-secondary-link--right { justify-self: end; margin-left: auto !important; text-align: right; }

.auth-terms { margin: 16px auto 0; color: #98a2b3; font-size: 11.5px; line-height: 1.45; text-align: center; }
.auth-terms a { color: #7c8498; text-decoration: underline; text-underline-offset: 2px; }

.auth-code-group { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; width: 100%; }
.auth-code-cell {
  width: 100%;
  min-width: 0;
  height: 58px;
  margin: 0;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 15px;
  background: var(--auth-field-bg);
  color: var(--auth-text);
  font-size: 26px;
  line-height: 1;
  font-weight: 750;
  text-align: center;
  caret-color: var(--auth-field-border-focus);
  outline: 0;
  box-shadow: none;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, opacity .16s ease, transform .16s ease;
}
.auth-code-cell:focus,
.auth-code-cell:focus-visible {
  border-width: 2px;
  border-color: var(--auth-field-border-focus);
  background: #fff;
  outline: 0;
  box-shadow: 0 0 0 1px rgba(139, 92, 246, .08);
}
.auth-code-group.is-error .auth-code-cell,
.auth-code-group.is-error .auth-code-cell:focus,
.auth-code-group.is-error .auth-code-cell:focus-visible {
  border-width: 2px;
  border-color: var(--auth-field-border-error);
  background: #fff;
  box-shadow: none;
}
.auth-code-group.is-error .auth-code-cell { animation: auth-code-error-in .20s ease both; }
@keyframes auth-code-error-in {
  0% { transform: translateX(0); }
  35% { transform: translateX(-2px); }
  70% { transform: translateX(2px); }
  100% { transform: translateX(0); }
}

.auth-resend { display: flex; align-items: center; justify-content: center; min-height: 20px; margin-top: 14px; color: var(--auth-placeholder); font-size: 12.5px; line-height: 1.35; }
.auth-resend-timer { color: var(--auth-placeholder); }

.auth-back,
.auth-close {
  display: grid;
  place-items: center;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #98a2b3 !important;
  box-shadow: none !important;
  outline: 0 !important;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: color .15s ease, background-color .15s ease;
}
.auth-back:hover,
.auth-back:focus-visible,
.auth-close:hover,
.auth-close:focus-visible {
  border: 0 !important;
  background: rgba(17, 24, 39, .045) !important;
  color: #667085 !important;
  box-shadow: none !important;
  outline: 0 !important;
  transform: none !important;
}
.auth-back svg,
.auth-close svg {
  display: block;
  width: 25px;
  height: 25px;
  fill: none;
}

.auth-back svg {
  transform: translateX(-2px);
}
.auth-back path,
.auth-close path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.auth-card > .auth-close {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 5;
}
.auth-content > .auth-back,
.auth-email-content > .auth-back {
  position: absolute;
  top: -20px;
  left: -22px;
  z-index: 4;
}
.auth-step-controls { position: absolute; top: -20px; left: -22px; z-index: 4; }
.auth-step-controls + .auth-header { padding-inline: 34px; }

.auth-overlay .inline-spinner {
  width: 17px;
  height: 17px;
  margin-right: 8px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 999px;
  animation: auth-spin .7s linear infinite;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }

/* Desktop-only geometry polish. Mobile keeps its established sheet spacing. */
@media (min-width: 769px) {
  [data-auth-modal-root].auth-overlay .auth-card {
    padding-left: 40px !important;
    padding-right: 40px !important;
    padding-top: 34px !important;
  }

  [data-auth-step="password"] .auth-header,
  [data-auth-step="code"] .auth-header,
  [data-auth-step="forgot-email"] .auth-header,
  [data-auth-step="reset-password"] .auth-header {
    margin-top: -2px;
  }
}

@media (max-width: 768px) {
  .auth-overlay {
    place-items: end center;
    padding: 0;
    transition: opacity .28s ease, visibility 0s linear .32s;
  }
  [data-auth-modal-root].auth-overlay .auth-shell {
    width: 100% !important;
    max-width: 100% !important;
    opacity: 0;
    transform: translate3d(0, 34px, 0) !important;
    transition: opacity .24s ease, transform .32s cubic-bezier(.22,.61,.36,1);
  }

  [data-auth-modal-root].auth-overlay.is-open > .auth-shell {
    opacity: 1 !important;
    transform: translate3d(0,0,0) !important;
  }
  [data-auth-modal-root].auth-overlay .auth-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 18px);
    padding: 32px 20px calc(20px + env(safe-area-inset-bottom)) !important;
    border-radius: 24px 24px 0 0 !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 -16px 48px rgba(15, 23, 42, .16) !important;
    opacity: 1;
    transform: none !important;
    transition: height .28s cubic-bezier(.22,.61,.36,1);
  }
  [data-auth-modal-root].auth-overlay .auth-card.is-ready {
    opacity: 1;
    transform: none !important;
  }
  .auth-card.is-step-transitioning { overflow: hidden; }
  .auth-content, .auth-email-content { max-width: none; }
  .auth-header { margin-bottom: 18px; }
  .auth-title { max-width: 360px; font-size: 26px; line-height: 1.08; }
  .auth-subtitle { max-width: 390px; font-size: 14px; }
  .auth-overlay .auth-input { font-size: 16px !important; }
  .auth-code-group { gap: 7px; }
  .auth-code-cell { height: 54px; border-radius: 14px; font-size: 24px; }
  .auth-card > .auth-close { top: 12px; right: 14px; }
  .auth-content > .auth-back,
  .auth-email-content > .auth-back,
  .auth-step-controls { top: -20px; left: -8px; }
}

@media (max-width: 390px) {
  [data-auth-modal-root].auth-overlay .auth-card { padding-inline: 16px !important; }
  .auth-code-group { gap: 5px; }
  .auth-code-cell { height: 50px; border-radius: 13px; font-size: 22px; }
}

/* Open auth must always render above the backdrop even if global UI styles load later. */
[data-auth-modal-root].auth-overlay.is-open {
  opacity: 1 !important;
  visibility: visible !important;
}
[data-auth-modal-root].auth-overlay.is-open > .auth-overlay__backdrop {
  z-index: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
[data-auth-modal-root].auth-overlay.is-open > [data-auth-shell] {
  position: relative !important;
  z-index: 2 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
[data-auth-modal-root].auth-overlay.is-open [data-auth-card] {
  position: relative !important;
  z-index: 1 !important;
  visibility: visible !important;
}

@media (prefers-reduced-motion: reduce) {
  .auth-overlay,
  .auth-overlay__backdrop,
  .auth-card,
  .auth-overlay [data-auth-step],
  .auth-password-toggle svg,
  .auth-code-cell {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  .auth-overlay .inline-spinner { animation-duration: 1.4s; }
}

/* AUTH_MICRO_MOTION_POLISH_V1 */

.auth-password-toggle.is-switching svg {
  opacity: 0;
  transform: scale(.78);
}

.auth-code-group.is-clearing .auth-code-cell {
  opacity: 0;
  transform: scale(.965);
}


/* AUTH_PRIMARY_BUTTON_STATIC_HOVER_V1 */
.auth-btn:hover {
  filter: brightness(1.025);
  transform: none !important;
}

.auth-btn:active {
  filter: brightness(.99);
  transform: none !important;
}\n