.auth-header .ui-brand small {
  display: block;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
}

.auth-header__nav,
.auth-form-actions,
.auth-success-actions,
.auth-login-links {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.auth-header__language {
  min-inline-size: var(--control-height);
  justify-content: center;
}

.auth-main {
  min-block-size: calc(100dvb - var(--header-height));
  padding-block: var(--space-8) var(--space-12);
}

.auth-layout {
  display: grid;
  gap: var(--space-8);
  align-items: start;
}

.auth-card {
  overflow: visible;
}

.auth-card__body {
  padding: var(--space-6);
}

.auth-title {
  max-inline-size: var(--container-reading);
}

.auth-title h1 {
  font-size: var(--text-h2);
}

.auth-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  padding: 0;
  margin: 0;
  list-style: none;
}

.auth-progress li {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-inline-size: 0;
  padding-block-start: var(--space-3);
  border-block-start: 2px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.auth-progress li span {
  font-family: var(--font-en);
  font-weight: var(--weight-bold);
}

.auth-progress li[data-complete="true"] {
  border-block-start-color: var(--color-success);
  color: var(--color-success);
}

.auth-progress li[aria-current="step"] {
  border-block-start-color: var(--color-primary);
  color: var(--color-text-primary);
  font-weight: var(--weight-bold);
}

.auth-alert {
  scroll-margin-block-start: var(--space-8);
}

.auth-form {
  --stack-gap: var(--space-6);
}

.auth-form-grid {
  display: grid;
  gap: var(--space-6);
}

.auth-ltr-input,
.auth-otp-input {
  direction: ltr;
  text-align: start;
  unicode-bidi: isolate;
}

.auth-otp-input {
  font-family: var(--font-mono);
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  letter-spacing: 0.32em;
  text-align: center;
}

.auth-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-block-size: var(--control-height);
  cursor: pointer;
}

.auth-consent input {
  flex: 0 0 auto;
  inline-size: var(--icon-size);
  block-size: var(--icon-size);
  margin-block-start: var(--space-1);
  accent-color: var(--color-primary);
}

.auth-destination {
  margin-block-end: var(--space-6);
  padding: var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-background);
}

.auth-form-actions,
.auth-success-actions {
  flex-wrap: wrap;
  justify-content: space-between;
  margin-block-start: var(--space-4);
}

.auth-secondary-copy {
  margin-block-start: var(--space-4);
  text-align: center;
}

.auth-method {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  padding: var(--space-1);
  margin-block-end: var(--space-6);
  border-radius: var(--radius-md);
  background: var(--color-surface-secondary);
}

.auth-method .ui-button {
  inline-size: 100%;
}

.auth-method .ui-button[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: var(--color-surface);
  color: var(--color-primary);
  transform: none;
}

.auth-login-links {
  flex-wrap: wrap;
  justify-content: space-between;
  margin-block-start: var(--space-6);
}

.auth-static-state {
  border-style: solid;
  background: var(--color-warning-soft);
}

.auth-static-state .ui-state__symbol {
  display: grid;
  place-items: center;
  inline-size: var(--control-height);
  block-size: var(--control-height);
  border: var(--border-width) solid var(--color-warning);
  border-radius: 50%;
  color: var(--color-warning);
}

.auth-aside {
  isolation: isolate;
}

.auth-aside::after {
  content: "";
  position: absolute;
  z-index: -1;
  inline-size: 12rem;
  aspect-ratio: 1;
  inset-inline-end: -5rem;
  inset-block-start: -5rem;
  border: 1px solid var(--color-primary-line);
  border-radius: 50%;
  box-shadow: 0 0 0 3rem rgb(200 27 28 / .025);
}

.auth-aside h2 {
  font-size: var(--text-h2);
}

.auth-flow-list {
  display: grid;
  gap: var(--space-3);
  padding: 0;
  margin: 0;
  list-style: none;
}

.auth-flow-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-block-end: var(--border-width) solid var(--color-border);
  transition: transform var(--motion-normal) var(--ease-emphasized), color var(--motion-fast) var(--ease-standard);
}

@media (hover: hover) {
  .auth-flow-list li:hover { transform: translateX(var(--space-1)); color: var(--color-primary); }
  [dir="rtl"] .auth-flow-list li:hover { transform: translateX(calc(var(--space-1) * -1)); }
}

.auth-flow-list span {
  color: var(--color-primary);
  font: var(--weight-bold) var(--text-caption)/1 var(--font-mono);
}

.auth-privacy-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.auth-privacy-note > span {
  color: var(--color-primary);
  font-size: var(--text-h3);
}

.auth-privacy-note p {
  margin-block-start: var(--space-1);
}

.auth-noscript {
  margin-block: var(--space-6);
}

@media (max-width: 39.99rem) {
  .auth-header__catalog,
  .auth-header__login {
    display: none;
  }

  .auth-header .ui-brand small {
    display: none;
  }

  .auth-card__body {
    padding: var(--space-4);
  }

  .auth-progress li {
    font-size: 0;
  }

  .auth-progress li span {
    font-size: var(--text-caption);
  }

  .auth-form-actions .ui-button,
  .auth-success-actions .ui-button {
    flex: 1 1 auto;
  }

  .auth-login-links {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (min-width: 48rem) {
  .auth-main {
    padding-block: var(--space-12) var(--space-16);
  }

  .auth-card__body {
    padding: var(--space-8);
  }

  .auth-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .auth-layout {
    grid-template-columns: minmax(0, 1.08fr) minmax(18rem, 0.72fr);
    gap: var(--space-12);
    align-items: center;
  }

  .auth-aside {
    padding: var(--space-8);
  }

  .auth-layout[data-authenticated] {
    grid-template-columns: minmax(0, var(--container-reading));
    justify-content: center;
  }
}

@media (min-width: 80rem) {
  .auth-layout {
    max-inline-size: var(--container-content);
  }
}

/* Premium account-access experience */
.auth-main {
  background:
    linear-gradient(90deg, rgb(255 255 255 / .96), rgb(255 255 255 / .7) 58%, rgb(255 255 255 / .18)),
    url("/assets/design-system/hero-refinery.png") 22% center / cover fixed no-repeat;
}
[dir="ltr"] .auth-main {
  background:
    linear-gradient(270deg, rgb(255 255 255 / .96), rgb(255 255 255 / .7) 58%, rgb(255 255 255 / .18)),
    url("/assets/design-system/hero-refinery.png") 78% center / cover fixed no-repeat;
}
.auth-card__body { position: relative; }
.auth-card__body::before {
  content: "";
  position: absolute;
  inset-inline-end: var(--space-8);
  inset-block-start: var(--space-8);
  inline-size: var(--control-height);
  block-size: var(--control-height);
  border-radius: 50%;
  background: var(--color-primary-soft) url("/assets/design-system/mirabedini-mark.jpg") center / 118% auto no-repeat;
  box-shadow: 0 8px 20px rgb(20 22 25 / .08);
}
.auth-title { padding-inline-end: calc(var(--control-height) + var(--space-6)); }
.auth-flow-list li { border-color: rgb(255 255 255 / .16); }
.auth-privacy-note { border-color: rgb(255 255 255 / .2); background: rgb(255 255 255 / .08); }
.auth-progress li[aria-current="step"] { color: var(--color-primary); }

@media (max-width: 63.99rem) {
  .auth-main { background: linear-gradient(rgb(255 255 255 / .88), rgb(255 255 255 / .95)), url("/assets/design-system/hero-refinery.png") 36% center / cover fixed no-repeat; }
}