.auth-page {
  --auth-layout-height: 709.05px;
  --auth-side-height: 709.05px;
  --auth-benefits-top: 515.05px;
  --auth-next-top: 560.65px;
  --icon-arrow: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAOdEVYdFNvZnR3YXJlAEZpZ21hnrGWYwAAAK1JREFUeAGt0zEOgjAUBuAf4x2IygkcPYGJiU4a48Dg4mDi4Kgn8AA6q5tusqkLnAcCYQX2Bx2AhNAChS9p2uVv+15ThRKQ1EML3LBh/eH4HoSoxPV1p9FsQob1IxHwgmyuAtkg00+vf3s/kvGEPl9CX6y49WrqIFsrbIcgCjFeT1HH5XjGfrPNw8WTT7sDN6ypw/JuN625u24XN2j8zqmP+SXbc0kka5iMVh8jBnBNrd/Igg9BAAAAAElFTkSuQmCC");
  --icon-check: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAOdEVYdFNvZnR3YXJlAEZpZ21hnrGWYwAAAH1JREFUeAG10TsOQFAQheFhN1agVanEAizAbvRarVJlBRqNhoRQEY8W/XjFDZHcB/GXJ/kyxUi4BoLJ8CJu1AwdjPPEj7KqAN22IK3yY0BGaZmjYmrohwHZQBQQFCUxqpaBdd8ywe2S47kE0sANXSENPNAJaWBL2uVfz/2MFoFZLK4JzvSIAAAAAElFTkSuQmCC");
  --icon-email: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAOdEVYdFNvZnR3YXJlAEZpZ21hnrGWYwAAAV9JREFUeAHNlM9LwmAYx7+LOXN2CM28FCrzxyy0Dh3yUF3s/+1WRAgVVNApDWemW2UERYFE28IF9byLTUrdojr4GTtsvO/3+X6fPe+4dwJ/ZAL/AP/9hW4YvpvCojhcRNFaOG8q6L1ZviICH0AuJaGYXeiL1C4V7B7tY7O0AWku4SnQsyx0Hu6wfViBIAQhJ6VPEd00YJgmtNtrSPMJhEPiSJGXp0eonSvorya6z92+E3FSxJK8iNh0BFuVHRQysmvVwaKY1WYdDa2NXDJNkQR7nyvCCAVDKC2vYDYao3h1cnWDcmnddnVP1Y/PTsHRVV5dQ5zW7J0cYKCxDiwOW1SjqsxVPDpji7DqxWweQiAwEJEflnuKPqHjSqU+OdVHwcMD5ordfrgTa1n+8+HpJB6J2bPSoIFjttkwedGmiKxPxUzefuacA1glkQu19eOJLVCT5VT6q4jDb84ONza/gg/NhoNd35Pc8wAAAABJRU5ErkJggg==");
  --icon-eye: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAOdEVYdFNvZnR3YXJlAEZpZ21hnrGWYwAAAgVJREFUeAGtVEtLG1EYPZPJowub1tRHhcZatEgrbVpDaJq+i9hCqbvWRXfd9490L+5EcKPoRlQ0IjoiGcWIGDE+iaARjeIriRqjaPy+KxMMGRTUs7h3Lvd+Z853zp2RUgTcEAYeYnsxBENzuC4ESTiyBq9PgRrwZ2wmj5KI7cevJDHyUFFWjiipGQmM4yCRQJX7oyCoa25MH8y3PUDlsxeoKC3PIpE0T7jof0M9phfn8O/PX3gcLqxEVmExm2nvSLS7TGtIEmqrf8KaczeThD1p8XbyCk+K7JhcmIHbUSmILoLPDfhVrKyv4Vd1DQpInSCJxqMpJrCYTaj9VkOzBeqEHx1KL9473+DHh6os+T2+foTXI2lFBi7iVp4WlwgChueVC7JBhjKqZpnN+P7uK+6YzPCqilgLkrcOJ8ZnprCxvZU+aLufi9dkJJutR/TF5aFUV0WNiNj5/CVK7Y/Rrnip7/NIHxUW4eT0RMyt1G7XUF8GSTddiTJ7ifDFcFGivfAhmjrbSNUkrT/DQpLZRE5oeGIsrWjA7xMhfCI1GRFrYFODoXkkj49RTCo0n/pGBiHLJip0IxRewm8ytcCWp0+iRcm3eHNnC4dkOiM/Nw97iX2MBQNZ8RuhA2uOlW6xVW8LRlkWZjM0Il2Sy8DxM5joHr+MP4PUNTG1MJvajcfEs3Qb/5MzTBAgPfvrcXMAAAAASUVORK5CYII=");
  --icon-lock: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAOdEVYdFNvZnR3YXJlAEZpZ21hnrGWYwAAARJJREFUeAGlkz1rwlAYhU+km/2YmgjpUroVaafStT+gLaWToIJOgqDg4KaDKDjoL3BxEEcRHDOIi6JugoqLH4MORqdodNT3ClHEGMGc8dz38HAOXG6tzDe4Ujd65mK1RLZUxESWcWe1wvv7B/HRdnJn0Qt+h/xodFoQeR69YR/OSBgLdXmZLNVreCBaPp7eey4KF8oSPD//xmRG+rC/HXkiL0BRVRiSG+0WuqMB7onMSJrGsykUqsPeP+3ve5/T1vYnY6hTz9fnF5zTWJ7ScALyidSBrNAYUrOKSiaHJ3o0Cn/53DjqrPUxCurJAhMyFd51ZusysTVFwXb2mK2uE75F0OGCMxrGJQXoThNn5mOY6rwFtBBhY7//cgwAAAAASUVORK5CYII=");
  min-height: 882px;
  color: var(--brand);
  background: var(--surface);
}

.auth-register-page {
  --auth-layout-height: 806px;
  --auth-side-height: 760.98px;
  --auth-benefits-top: 566.98px;
  --auth-next-top: 612.57px;
  min-height: 946px;
}

.auth-reset-page {
  --auth-layout-height: 631.33px;
  --auth-side-height: 631.33px;
  --auth-benefits-top: 437.32px;
  --auth-next-top: 482.93px;
  min-height: 865px;
}

.auth-header {
  height: 76.8px;
  border-bottom: 0.8px solid rgba(27, 67, 50, 0.08);
  background: var(--surface);
}

.auth-header-inner,
.auth-layout {
  width: min(1280px, calc(100% - 40px));
  max-width: 1280px;
  margin-inline: auto;
}

.auth-header-inner {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 32px;
}

.auth-brand,
.auth-header-actions,
.auth-back-link {
  display: flex;
  align-items: center;
}

.auth-brand {
  gap: 8px;
  color: var(--brand);
}

.auth-header-actions {
  direction: ltr;
  gap: 16px;
}

.auth-language {
  height: 32px;
  padding-inline: 8px;
  color: rgba(27, 67, 50, 0.6);
  background: transparent;
  border: 0;
  font-size: 14px;
  font-weight: 700;
}

.auth-back-link {
  gap: 8px;
  direction: rtl;
  color: var(--brand);
  font-size: 14px;
}

.auth-icon {
  flex: 0 0 auto;
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.icon-arrow { width: 15px; height: 15px; background-image: var(--icon-arrow); }
.icon-check { width: 13px; height: 13px; background-image: var(--icon-check); }
.icon-email { width: 17px; height: 17px; background-image: var(--icon-email); }
.icon-eye { width: 17px; height: 17px; background-image: var(--icon-eye); }
.icon-lock { width: 15px; height: 15px; background-image: var(--icon-lock); }

.auth-main {
  margin-top: 40px;
}

.auth-layout {
  min-height: var(--auth-layout-height);
  display: grid;
  grid-template-columns: 640px 640px;
  align-items: start;
  direction: ltr;
}

.auth-side,
.auth-content {
  direction: rtl;
}

.auth-side {
  position: relative;
  height: var(--auth-side-height);
  overflow: hidden;
  background: var(--canvas);
  border-radius: 20px;
}

.auth-photo-card {
  position: absolute;
  top: 40px;
  left: 40px;
  width: 560px;
  height: 373.33px;
  overflow: hidden;
  border-radius: 26px;
  box-shadow: 0 10px 35px rgba(27, 67, 50, 0.08);
}

.auth-photo-card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.auth-photo-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(27, 67, 50, 0.62), rgba(27, 67, 50, 0.04) 48%);
}

.auth-photo-copy {
  position: absolute;
  right: 24px;
  bottom: 24px;
  left: 24px;
  color: var(--canvas);
  text-align: right;
}

.auth-photo-copy h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
}

.auth-photo-copy p {
  max-width: 340px;
  margin: 8px 0 0 auto;
  color: rgba(247, 242, 236, 0.85);
  font-size: 14px;
  line-height: 23px;
}

.auth-benefits {
  position: absolute;
  top: var(--auth-benefits-top);
  right: 40px;
  left: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 0;
  padding: 0 0 0 160px;
  direction: ltr;
  list-style: none;
}

.auth-benefits li {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-inline: 16px;
  color: var(--brand);
  background: var(--surface);
  border-radius: 999px;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  direction: rtl;
}

.auth-next-step {
  position: absolute;
  top: var(--auth-next-top);
  right: 40px;
  left: 40px;
  min-height: 104px;
  padding: 16px;
  color: var(--brand);
  background: var(--surface);
  border-radius: 18px;
  text-align: right;
}

.auth-next-step > span {
  display: block;
  color: var(--accent);
  font-size: 12px;
  line-height: 18px;
}

.auth-next-step p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 21px;
}

.auth-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  direction: ltr;
}

.auth-tags small,
.password-rules small {
  display: inline-flex;
  align-items: center;
  min-height: 17px;
  padding-inline: 8px;
  background: var(--canvas);
  border-radius: 999px;
  font-size: 11px;
  line-height: 17px;
  direction: rtl;
}

.auth-content {
  min-height: var(--auth-layout-height);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 64px;
}

.auth-form-shell {
  width: 440px;
  max-width: 440px;
}

.auth-form-heading {
  text-align: right;
}

.auth-form-heading h1 {
  margin: 0;
  color: var(--brand);
  font-size: 36px;
  font-weight: 700;
  line-height: 54px;
  letter-spacing: -0.4px;
}

.auth-form-heading p {
  margin: 1.3px 0 0;
  color: rgba(27, 67, 50, 0.6);
  font-size: 16px;
  line-height: 26px;
}

.auth-form {
  display: flow-root;
  margin-top: 12.25px;
}

.auth-field {
  margin-top: 8px;
}

.auth-form > .auth-field:first-child {
  margin-top: 24px;
}

.auth-field + .auth-field {
  margin-top: 8px;
}

.auth-field label {
  display: block;
  margin-bottom: 8px;
  color: var(--brand);
  font-size: 14px;
  line-height: 21px;
}

.auth-field-error {
  display: block;
  margin-top: 6px;
  color: #b3261e;
  font-size: 13px;
  line-height: 20px;
}

.auth-field-error[hidden] {
  display: none;
}

.auth-toast {
  position: fixed;
  z-index: 1000;
  top: 1.25rem;
  left: 50%;
  max-width: min(92vw, 32rem);
  padding: 0.75rem 1rem;
  border: 1px solid rgba(196, 81, 61, 0.28);
  border-radius: 0.75rem;
  background: #fff8f5;
  box-shadow: 0 0.75rem 2rem rgba(21, 66, 49, 0.16);
  color: #a94031;
  font-size: 0.82rem;
  line-height: 1.5;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -0.75rem);
  transition: opacity 180ms ease, transform 180ms ease;
}

.auth-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.auth-input-wrap {
  position: relative;
}

.auth-input-wrap input {
  width: 100%;
  height: 58px;
  padding: 16px;
  color: var(--brand);
  background: var(--surface);
  border: 1px solid rgba(27, 67, 50, 0.15);
  border-radius: 14px;
  outline: 0;
  font-size: 16px;
  line-height: 24px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-input-wrap input::placeholder {
  color: rgba(27, 67, 50, 0.4);
}

.auth-input-wrap input:focus {
  border-color: rgba(27, 67, 50, 0.48);
  box-shadow: 0 0 0 3px rgba(27, 67, 50, 0.08);
}

.auth-input-wrap input[aria-invalid="true"] {
  border-color: var(--accent);
}

.auth-field-email input {
  padding-right: 48px;
}

.auth-field-email .icon-email {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
}

.password-toggle {
  position: absolute;
  top: 50%;
  left: 10px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  border-radius: 8px;
}

.password-toggle:focus-visible {
  outline: 2px solid rgba(27, 67, 50, 0.42);
  outline-offset: 1px;
}

.password-toggle[aria-pressed="true"] .icon-eye {
  opacity: 0.55;
}

.auth-form-options {
  height: 37px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 3.8px;
  padding-top: 0;
  color: var(--brand);
  font-size: 14px;
  line-height: 21px;
}

.auth-form-options a:hover,
.auth-switch a:hover,
.auth-reset-back a:hover,
.auth-browse a:hover,
.auth-terms a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  line-height: 20px;
}

.auth-check input {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin: 2px 0 0;
  accent-color: var(--brand);
}

.auth-submit {
  width: 100%;
  height: 48px;
  display: grid;
  place-items: center;
  padding-inline: 24px;
  color: var(--surface);
  background: var(--brand);
  border: 0;
  border-radius: 12px;
  font-size: 16px;
  line-height: 24px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.auth-submit:hover,
.auth-submit:focus-visible {
  background: var(--brand-deep);
}

.auth-submit:hover {
  transform: translateY(-1px);
}

.auth-status {
  margin: 8px 0 0;
  color: var(--brand);
  font-size: 13px;
  line-height: 20px;
  text-align: center;
}

.auth-status.is-error {
  color: var(--accent);
}

.auth-privacy-note {
  min-height: 51px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 24.4px;
  padding: 16px 12px;
  color: rgba(27, 67, 50, 0.6);
  background: var(--canvas);
  border-radius: 12px;
  font-size: 12px;
  line-height: 19px;
}

.auth-demo,
.auth-switch,
.auth-browse,
.auth-reset-back {
  margin-bottom: 0;
  text-align: center;
}

.auth-demo {
  margin-top: 4.2px;
  color: rgba(27, 67, 50, 0.4);
  font-size: 12px;
  line-height: 18px;
}

.auth-demo bdi {
  font-weight: 400;
}

.auth-switch {
  margin-top: 23.6px;
  color: var(--muted-brand);
  font-size: 14px;
  line-height: 21px;
}

.auth-switch a {
  color: var(--brand);
  font-weight: 500;
}

.auth-browse {
  margin-top: 13px;
  color: rgba(27, 67, 50, 0.42);
  font-size: 12px;
  line-height: 18px;
}

.auth-login-page .auth-submit {
  margin-top: 13.7px;
}

.auth-register-page .auth-form {
  margin-top: 8px;
}

.auth-register-page .auth-field {
  margin-top: 8px;
}

.auth-register-page .auth-field + .auth-field {
  margin-top: 16px;
}

.auth-register-page .auth-form-heading p {
  margin-top: 8px;
}

.auth-register-page .auth-password-field {
  margin-bottom: 8px;
}

.auth-register-page .auth-password-field + .auth-field {
  margin-top: 8px;
}

.password-rules {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-right: 7px;
  color: rgba(27, 67, 50, 0.54);
}

.auth-terms {
  width: 100%;
  min-height: 36px;
  align-items: flex-end;
  margin-top: 8px;
  padding: 0 20px 0 0;
  color: rgba(27, 67, 50, 0.72);
  font-size: 12px;
}

.auth-terms a {
  color: var(--brand);
}

.auth-register-page .auth-submit {
  margin-top: 8px;
}

.register-switch {
  margin-top: 8px;
  padding-top: 8px;
}

.auth-reset-page .auth-content {
  align-items: center;
  padding: 0 56px;
}

.auth-reset-page .auth-form-heading p {
  margin-top: 8px;
}

.auth-reset-page .auth-form {
  margin-top: 8px;
}

.auth-reset-page .auth-field {
  margin-top: 16px;
}

.auth-reset-page .auth-form > .auth-field:first-child {
  margin-top: 16px;
}

.auth-reset-page .auth-submit {
  margin-top: 8px;
}

.auth-reset-back {
  margin-top: 16px;
  padding-top: 0;
  color: var(--brand);
  font-size: 14px;
  line-height: 21px;
}

@media (max-width: 1319.98px) {
  .auth-layout {
    grid-template-columns: 1fr 1fr;
  }

  .auth-photo-card {
    right: 40px;
    width: auto;
  }

  .auth-benefits {
    padding-left: 0;
    flex-wrap: wrap;
  }
}

@media (max-width: 991.98px) {
  .auth-page,
  .auth-register-page,
  .auth-reset-page {
    min-height: 0;
  }

  .auth-header-inner,
  .auth-layout {
    width: min(100% - 32px, 720px);
  }

  .auth-header-inner {
    padding-inline: 8px;
  }

  .auth-layout {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .auth-content {
    width: 100%;
    min-height: 0;
    order: 1;
    padding: 16px 0 0;
  }

  .auth-side {
    width: 100%;
    height: 650px;
    order: 2;
  }

  .auth-photo-card {
    right: 32px;
    left: 32px;
    width: auto;
  }

  .auth-benefits {
    top: 438px;
    right: 32px;
    left: 32px;
    justify-content: center;
  }

  .auth-next-step {
    top: 510px;
    right: 32px;
    left: 32px;
  }

  .auth-main {
    margin-bottom: 32px;
  }

  .auth-reset-page .auth-content {
    padding: 16px 0 0;
  }
}

@media (max-width: 575.98px) {
  .auth-header {
    height: 72px;
  }

  .auth-header-inner {
    height: 71px;
  }

  .auth-header-actions {
    gap: 8px;
  }

  .auth-language {
    padding-inline: 4px;
    font-size: 12px;
  }

  .auth-back-link {
    font-size: 12px;
  }

  .auth-main {
    margin-top: 24px;
  }

  .auth-form-shell {
    width: 100%;
  }

  .auth-form-heading h1 {
    font-size: 29px;
    line-height: 43px;
  }

  .auth-form-heading p {
    font-size: 14px;
    line-height: 24px;
  }

  .auth-side {
    height: 635px;
  }

  .auth-photo-card {
    top: 24px;
    right: 16px;
    left: 16px;
    height: 300px;
  }

  .auth-photo-copy {
    right: 18px;
    bottom: 18px;
    left: 18px;
  }

  .auth-photo-copy h2 {
    font-size: 18px;
  }

  .auth-photo-copy p {
    font-size: 12px;
    line-height: 20px;
  }

  .auth-benefits {
    top: 348px;
    right: 16px;
    left: 16px;
    justify-content: flex-start;
  }

  .auth-benefits li {
    padding-inline: 12px;
    font-size: 11px;
  }

  .auth-next-step {
    top: 456px;
    right: 16px;
    left: 16px;
  }

  .auth-privacy-note {
    padding-inline: 10px;
    font-size: 11px;
  }

  .auth-terms {
    padding-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-page *,
  .auth-page *::before,
  .auth-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: rgba(27, 67, 50, 0.55);
  font-size: 13px;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(27, 67, 50, 0.14);
}

.auth-google {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  color: var(--brand);
  background: var(--surface);
  border: 1px solid rgba(27, 67, 50, 0.18);
  border-radius: 14px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-google:hover,
.auth-google:focus-visible {
  border-color: rgba(27, 67, 50, 0.4);
  box-shadow: 0 0 0 3px rgba(27, 67, 50, 0.08);
}

.auth-google-mark {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}