:root {
  --site-auth-red: #df1829;
  --site-auth-red-dark: #b31220;
  --site-auth-ink: #1d1f28;
  --site-auth-muted: #6f7280;
  --site-auth-line: #e5e7ec;
  --site-auth-canvas: #f7f7f9;
  --site-auth-success: #168447;
  --site-auth-error: #b42318;
}

.remodal-overlay.auth-modal-layer { background: rgba(19, 21, 29, .72); backdrop-filter: blur(5px); }
.remodal-wrapper.auth-modal-layer { padding: 24px; }
.site-auth-modal[hidden], .site-auth-modal [hidden] { display: none !important; }

.remodal.site-auth-modal {
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 26px;
  box-shadow: 0 32px 90px rgba(16, 18, 26, .28);
  color: var(--site-auth-ink);
  margin: 0;
  max-width: 840px;
  overflow: hidden;
  padding: 0;
  text-align: left;
}
.remodal.site-auth-modal.auth-register-modal { max-width: 930px; }
.site-auth-modal *, .site-auth-modal *::before, .site-auth-modal *::after { box-sizing: border-box; }
.site-auth-modal .remodal-close {
  align-items: center;
  background: var(--site-auth-canvas);
  border: 1px solid var(--site-auth-line);
  border-radius: 50%;
  color: #464955;
  display: flex;
  height: 38px;
  justify-content: center;
  right: 20px;
  top: 20px;
  transition: background .2s ease, color .2s ease, transform .2s ease;
  width: 38px;
}
.site-auth-modal .remodal-close::before { font-size: 25px; height: auto; left: 0; line-height: 34px; top: 0; width: 36px; }
.site-auth-modal .remodal-close:hover,
.site-auth-modal .remodal-close:focus-visible { background: #fff0f1; color: var(--site-auth-red-dark); transform: rotate(4deg); }

.auth-modal-layout { display: grid; grid-template-columns: 265px minmax(0, 1fr); min-height: 610px; }
.auth-modal-aside {
  background:
    radial-gradient(circle at 18% 15%, rgba(223, 24, 41, .42), transparent 31%),
    linear-gradient(155deg, #20232d 0%, #171922 64%, #11131a 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: 32px 28px;
  position: relative;
}
.auth-modal-aside::before {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
  content: "";
  height: 260px;
  position: absolute;
  right: -170px;
  top: 110px;
  width: 260px;
}
.auth-modal-aside::after {
  background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px);
  background-size: 17px 17px;
  bottom: -30px;
  content: "";
  height: 190px;
  left: -20px;
  opacity: .45;
  position: absolute;
  transform: rotate(-7deg);
  width: 230px;
}
.auth-modal-brand {
  align-items: center;
  color: #fff;
  display: inline-flex;
  font: 500 15px/1 "DM Sans", sans-serif;
  gap: 10px;
  position: relative;
  width: fit-content;
  z-index: 1;
}
.auth-modal-brand:hover { color: #fff; }
.auth-modal-brand strong { color: #ff3344; font-size: 20px; font-weight: 900; letter-spacing: -.05em; }
.auth-modal-brand-mark {
  align-items: center;
  background: var(--site-auth-red);
  border-radius: 10px;
  display: inline-flex;
  height: 36px;
  justify-content: center;
  width: 36px;
}
.auth-modal-aside-copy { position: relative; z-index: 1; }
.auth-modal-eyebrow,
.auth-modal-kicker {
  color: var(--site-auth-red);
  display: block;
  font: 800 11px/1.2 "DM Sans", sans-serif;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.auth-modal-aside .auth-modal-eyebrow { color: #ff7b86; }
.auth-modal-aside h2 {
  color: #fff;
  font: 600 29px/1.13 "Space Grotesk", sans-serif;
  letter-spacing: -.04em;
  margin: 12px 0 27px;
}
.auth-modal-aside ul { list-style: none; margin: 0; padding: 0; }
.auth-modal-aside li {
  align-items: center;
  color: #d7d9e0;
  display: flex;
  font: 600 12px/1.4 "DM Sans", sans-serif;
  gap: 9px;
  margin-top: 13px;
}
.auth-modal-aside li i {
  align-items: center;
  background: rgba(40, 191, 105, .15);
  border-radius: 50%;
  color: #7ee0a7;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 8px;
  height: 20px;
  justify-content: center;
  width: 20px;
}

.auth-modal-main { align-self: center; padding: 48px 52px 42px; width: 100%; }
.auth-register-modal .auth-modal-main { padding-bottom: 32px; padding-top: 35px; }
.auth-modal-heading { padding-right: 22px; }
.auth-modal-heading h1 {
  color: var(--site-auth-ink);
  font: 600 34px/1.08 "Space Grotesk", sans-serif;
  letter-spacing: -.045em;
  margin: 9px 0 10px;
}
.auth-register-modal .auth-modal-heading h1 { font-size: 31px; }
.auth-modal-heading p {
  color: var(--site-auth-muted);
  font: 500 14px/1.55 "DM Sans", sans-serif;
  margin: 0;
  max-width: 520px;
}
.auth-modal-form { margin-top: 25px; }
.auth-register-modal .auth-modal-form { margin-top: 19px; }
.auth-field { margin-top: 15px; }
.auth-modal-form > .auth-field:first-of-type { margin-top: 0; }
.auth-field-grid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.auth-field label {
  color: #3d404b;
  display: block;
  float: none;
  font: 700 12px/1.3 "DM Sans", sans-serif;
  margin: 0 0 7px;
}
.auth-input-shell { position: relative; }
.auth-input-shell > i {
  color: #8b8e98;
  font-size: 14px;
  left: 15px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.site-auth-modal .auth-input-shell input {
  appearance: none;
  background: #fff;
  border: 1px solid var(--site-auth-line);
  border-radius: 12px;
  box-shadow: none;
  color: var(--site-auth-ink);
  font: 500 14px/1.2 "DM Sans", sans-serif;
  height: 48px;
  margin: 0;
  outline: 0;
  padding: 0 44px 0 42px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  width: 100%;
}
.site-auth-modal .auth-input-shell input::placeholder { color: #a0a3ad; opacity: 1; }
.site-auth-modal .auth-input-shell input:focus {
  border-color: var(--site-auth-red);
  box-shadow: 0 0 0 4px rgba(223, 24, 41, .1);
}
.site-auth-modal .auth-input-shell input[readonly] { background: #f4f5f7; color: #636672; }
.auth-field.is-invalid .auth-input-shell input { border-color: var(--site-auth-error); box-shadow: 0 0 0 3px rgba(180, 35, 24, .08); }
.auth-password-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: #777b87;
  cursor: pointer;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 8px;
  top: 7px;
  width: 34px;
}
.auth-password-toggle:hover, .auth-password-toggle:focus-visible { background: var(--site-auth-canvas); color: var(--site-auth-ink); }
.auth-field-error {
  color: var(--site-auth-error);
  display: block;
  font: 600 11px/1.35 "DM Sans", sans-serif;
  margin-top: 5px;
}
.auth-feedback {
  background: #fff1f2;
  border: 1px solid #ffc9ce;
  border-radius: 11px;
  color: var(--site-auth-error);
  font: 600 12px/1.45 "DM Sans", sans-serif;
  margin-bottom: 15px;
  padding: 11px 13px;
}
.auth-feedback.is-success { background: #ecfdf3; border-color: #b7ebca; color: var(--site-auth-success); }

.auth-form-options { align-items: center; display: flex; justify-content: space-between; margin: 17px 0 19px; }
.auth-checkbox {
  align-items: flex-start;
  color: #555966;
  cursor: pointer;
  display: flex;
  float: none;
  font: 600 12px/1.4 "DM Sans", sans-serif;
  gap: 9px;
  margin: 0;
}
.auth-checkbox input {
  accent-color: var(--site-auth-red);
  cursor: pointer;
  flex: 0 0 auto;
  height: 16px;
  margin: 1px 0 0;
  width: 16px;
}
.auth-text-link, .auth-modal-switch a, .auth-terms a { color: var(--site-auth-red-dark); font-weight: 800; }
.auth-text-link { font: 700 12px/1.4 "DM Sans", sans-serif; }
.auth-text-link:hover, .auth-modal-switch a:hover, .auth-terms a:hover { color: var(--site-auth-red); text-decoration: underline; }
.auth-terms { margin: 17px 0 5px; }
.auth-terms-error { margin-bottom: 5px; }

.auth-primary-button {
  align-items: center;
  background: var(--site-auth-red);
  border: 1px solid var(--site-auth-red);
  border-radius: 12px;
  color: #fff;
  cursor: pointer;
  display: flex;
  font: 800 14px/1.2 "DM Sans", sans-serif;
  justify-content: center;
  min-height: 50px;
  padding: 0 17px;
  position: relative;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  width: 100%;
}
.auth-primary-button > [data-auth-submit-icon], .auth-primary-button > i:last-child { position: absolute; right: 17px; }
.auth-primary-button:hover, .auth-primary-button:focus-visible {
  background: var(--site-auth-red-dark);
  border-color: var(--site-auth-red-dark);
  box-shadow: 0 10px 24px rgba(179, 18, 32, .22);
  color: #fff;
  transform: translateY(-1px);
}
.auth-primary-button:disabled { cursor: wait; opacity: .72; transform: none; }
.auth-separator { align-items: center; color: #989ba5; display: flex; font: 600 10px/1 "DM Sans", sans-serif; gap: 12px; margin: 20px 0 14px; text-transform: uppercase; }
.auth-separator::before, .auth-separator::after { background: var(--site-auth-line); content: ""; flex: 1; height: 1px; }
.auth-social-button {
  align-items: center;
  background: #fff;
  border: 1px solid var(--site-auth-line);
  border-radius: 12px;
  color: #30333d;
  display: flex;
  font: 700 13px/1.2 "DM Sans", sans-serif;
  gap: 12px;
  justify-content: center;
  min-height: 47px;
  padding: 0 16px;
}
.auth-social-button i { color: #1877f2; font-size: 17px; }
.auth-social-button:hover, .auth-social-button:focus-visible { background: #f6f8fc; border-color: #cfd5df; color: #20232c; }
.auth-modal-switch { color: #737681; font: 600 12px/1.5 "DM Sans", sans-serif; margin: 21px 0 0; text-align: center; }
.auth-recovery-note {
  align-items: center;
  color: #747783;
  display: flex;
  font: 600 11px/1.4 "DM Sans", sans-serif;
  gap: 8px;
  justify-content: center;
  margin: 16px 0 0;
}
.auth-recovery-note i { color: var(--site-auth-success); }
.auth-success-panel { padding: 34px 4px 4px; text-align: center; }
.auth-success-icon {
  align-items: center;
  background: #eaf9f0;
  border-radius: 50%;
  color: var(--site-auth-success);
  display: flex;
  font-size: 24px;
  height: 64px;
  justify-content: center;
  margin: 0 auto 24px;
  width: 64px;
}
.auth-success-panel h2 { color: var(--site-auth-ink); font: 600 31px/1.15 "Space Grotesk", sans-serif; letter-spacing: -.04em; margin: 10px 0; }
.auth-success-panel p { color: var(--site-auth-muted); font: 500 14px/1.6 "DM Sans", sans-serif; margin: 0 auto 25px; max-width: 390px; }
.auth-success-panel .auth-primary-button { text-decoration: none; }

@media (max-width: 780px) {
  .remodal-wrapper.auth-modal-layer { padding: 12px; }
  .remodal.site-auth-modal, .remodal.site-auth-modal.auth-register-modal { border-radius: 21px; max-width: 570px; }
  .auth-modal-layout { display: block; min-height: 0; }
  .auth-modal-aside { min-height: 116px; padding: 20px 24px; }
  .auth-modal-aside-copy { margin-top: 20px; }
  .auth-modal-aside h2 { font-size: 20px; margin: 7px 42px 0 0; }
  .auth-modal-aside ul { display: none; }
  .site-auth-modal .remodal-close { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .2); color: #fff; right: 17px; top: 17px; }
  .site-auth-modal .remodal-close:hover, .site-auth-modal .remodal-close:focus-visible { background: rgba(255, 255, 255, .22); color: #fff; }
  .auth-modal-main, .auth-register-modal .auth-modal-main { padding: 27px 24px 25px; }
  .auth-register-modal .auth-modal-main { max-height: calc(100vh - 155px); overflow-y: auto; }
  .auth-modal-heading h1, .auth-register-modal .auth-modal-heading h1 { font-size: 29px; }
}

@media (max-width: 520px) {
  .remodal-wrapper.auth-modal-layer { padding: 7px; }
  .auth-modal-aside { min-height: 102px; padding: 16px 18px; }
  .auth-modal-brand-mark { height: 31px; width: 31px; }
  .auth-modal-aside-copy { margin-top: 13px; }
  .auth-modal-aside h2 { font-size: 17px; }
  .auth-modal-eyebrow { display: none; }
  .auth-modal-main, .auth-register-modal .auth-modal-main { padding: 24px 18px 22px; }
  .auth-register-modal .auth-modal-main { max-height: calc(100vh - 122px); }
  .auth-modal-heading { padding-right: 0; }
  .auth-modal-heading h1, .auth-register-modal .auth-modal-heading h1 { font-size: 26px; }
  .auth-modal-heading p { font-size: 13px; }
  .auth-field-grid { display: block; }
  .auth-form-options { align-items: flex-start; gap: 10px; }
  .auth-checkbox, .auth-text-link { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-auth-modal *, .site-auth-modal *::before, .site-auth-modal *::after { scroll-behavior: auto !important; transition: none !important; }
}