/* SYNCED from resources/css/motaded/login.css — edit the Account copy, then regenerate. */
/* Motaded sign-in (Keycloak login theme).
   Approved design: Figma page "05 · Motaded Account", section "1 · Sign-in · Desktop (approved)".
   Uses only tokens from motaded-tokens.css. Logical properties keep RTL correct without overrides. */

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

html, body { margin: 0; }
body.mtd {
  font-family: var(--mtd-font-sans);
  color: var(--mtd-text-primary);
  background: var(--mtd-bg-canvas);
  -webkit-font-smoothing: antialiased;
}
body.mtd :focus-visible { outline: 2px solid var(--mtd-border-focus); outline-offset: 2px; border-radius: var(--mtd-radius-lg); }

/* ---------------------------------------------------------------- layout */
.mtd-auth {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 760fr) minmax(0, 680fr);
  min-block-size: 100vh;
}
.mtd-auth__main {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--mtd-space-16) var(--mtd-space-10);
}
.mtd-lang {
  z-index: 5;
  position: absolute; inset-block-start: var(--mtd-space-8); inset-inline-end: var(--mtd-space-10);
  font: 500 0.9375rem/1.5 var(--mtd-font-arabic);
  color: var(--mtd-text-secondary);
  background: var(--mtd-bg-surface);
  border: 1px solid var(--mtd-border-default);
  border-radius: var(--mtd-radius-lg);
  padding: var(--mtd-space-1_5) var(--mtd-space-2_5);
  text-decoration: none;
}
.mtd-legal {
  position: absolute; inset-block-end: var(--mtd-space-6); inset-inline: 0;
  text-align: center; font-size: 0.75rem; line-height: 1rem; color: var(--mtd-text-muted);
}
.mtd-legal a { color: inherit; }

/* ---------------------------------------------------------------- sign-in card */
.mtd-card {
  inline-size: min(100%, 440px);
  display: flex; flex-direction: column; align-items: center; gap: var(--mtd-space-4);
  padding: var(--mtd-space-10) var(--mtd-space-10) var(--mtd-space-8);
  background: var(--mtd-bg-surface);
  border: 1px solid var(--mtd-border-default);
  border-radius: 24px;
  box-shadow: var(--mtd-shadow-lg);
  text-align: center;
}
.mtd-card__mark { inline-size: 52px; block-size: 52px; margin-block-end: var(--mtd-space-1); object-fit: contain; }
.mtd-icon { display: inline-block; flex: none; vertical-align: middle; }
.mtd-card h1 { margin: 0; }
.mtd-card p { margin: 0; color: var(--mtd-text-secondary); }
.mtd-card__actions { inline-size: 100%; display: flex; flex-direction: column; gap: var(--mtd-space-4); margin-block-start: var(--mtd-space-2); }
.mtd-hint { font-size: 0.75rem; line-height: 1rem; color: var(--mtd-text-muted); }
.mtd-register {
  display: block; inline-size: 100%; text-align: center;
  font-size: 0.75rem; line-height: 1rem; color: var(--mtd-text-secondary);
}
.mtd-register a { color: var(--mtd-text-link); font-weight: 500; text-decoration: none; }
.mtd-register a:hover { text-decoration: underline; }

/* Nafath option: the primary way in. Never hidden; Subtle style when another primary action owns the screen. */
.mtd-nafath {
  display: flex; align-items: center; gap: var(--mtd-space-4);
  inline-size: 100%; padding: var(--mtd-space-4);
  border: 0; border-radius: var(--mtd-radius-xl);
  background: var(--mtd-action-primary); color: var(--mtd-text-on-action);
  text-align: start; cursor: pointer; text-decoration: none;
  font: inherit;
  transition: background-color 150ms ease;
}
.mtd-nafath:hover { background: var(--mtd-action-primary-hover); }
.mtd-nafath__tile {
  flex: none; inline-size: 44px; block-size: 44px; border-radius: var(--mtd-radius-lg);
  display: grid; place-items: center; background: rgb(255 255 255 / 0.16);
}
.mtd-nafath__text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.mtd-nafath__title { font-size: 1rem; line-height: 1.5rem; font-weight: 600; }
.mtd-nafath__sub { font-size: 0.75rem; line-height: 1rem; color: var(--primary-100); }
.mtd-nafath--subtle { background: var(--mtd-action-primary-subtle); color: var(--mtd-text-link); box-shadow: inset 0 0 0 1px var(--mtd-action-primary); }
.mtd-nafath--subtle:hover { background: var(--mtd-action-primary-subtle); filter: brightness(0.98); }
.mtd-nafath--subtle .mtd-nafath__tile { background: var(--mtd-bg-surface); }
.mtd-nafath--subtle .mtd-nafath__sub { color: var(--mtd-text-secondary); }
[dir="rtl"] .mtd-nafath__arrow { transform: scaleX(-1); }

/* Buttons and fields, matching the Filament button/input */
.mtd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--mtd-space-1_5);
  inline-size: 100%; padding: var(--mtd-space-2) var(--mtd-space-4);
  font: 500 0.875rem/1.25rem var(--mtd-font-sans);
  border-radius: var(--mtd-radius-lg); cursor: pointer; text-decoration: none;
  color: var(--mtd-text-primary); background: var(--mtd-bg-surface);
  border: 1px solid var(--mtd-border-strong);
}
.mtd-btn:hover { background: var(--mtd-bg-surface-muted); }
.mtd-btn:disabled,
.mtd-btn[aria-disabled="true"] {
  opacity: 0.72; cursor: not-allowed; pointer-events: none;
}
.mtd-btn--primary { color: var(--mtd-text-on-action); background: var(--mtd-action-primary); border-color: transparent; }
.mtd-btn--primary:hover { background: var(--mtd-action-primary-hover); }
.mtd-btn--danger {
  color: var(--mtd-text-on-action); background: var(--mtd-action-danger, #DC2626); border-color: transparent;
}
.mtd-btn--danger:hover { filter: brightness(0.92); }
.mtd-btn--ghost {
  inline-size: auto; align-self: center;
  color: var(--mtd-text-link); background: transparent; border-color: transparent;
  font-weight: 500; padding-inline: var(--mtd-space-2);
}
.mtd-btn--ghost:hover { text-decoration: underline; background: transparent; }
.mtd-btn__arrow { margin-inline-start: 2px; }
[dir="rtl"] .mtd-btn__arrow { transform: scaleX(-1); }
.mtd-field { display: flex; flex-direction: column; gap: var(--mtd-space-1_5); inline-size: 100%; text-align: start; }
.mtd-field label { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
.mtd-field input {
  font: 400 0.875rem/1.25rem var(--mtd-font-sans); color: var(--mtd-text-primary);
  padding: var(--mtd-space-2) var(--mtd-space-3);
  background: var(--mtd-bg-surface); border: 1px solid var(--mtd-border-strong); border-radius: var(--mtd-radius-lg);
  inline-size: 100%;
}
.mtd-field input:focus { outline: none; box-shadow: 0 0 0 2px var(--mtd-border-focus); border-color: transparent; }
.mtd-field[data-invalid] input { border-color: var(--mtd-action-danger); }
.mtd-field__error { font-size: 0.75rem; line-height: 1rem; color: var(--mtd-status-rejected-fg); }
.mtd-field__control {
  position: relative; display: flex; align-items: stretch; inline-size: 100%;
}
.mtd-field__control input {
  padding-inline-end: calc(var(--mtd-space-3) + 1.75rem);
}
.mtd-field__toggle {
  position: absolute; inset-inline-end: var(--mtd-space-1); inset-block: 0; margin-block: auto;
  display: grid; place-items: center;
  inline-size: 2rem; block-size: 2rem; padding: 0;
  border: 0; border-radius: var(--mtd-radius-md); background: transparent;
  cursor: pointer; color: var(--mtd-text-secondary);
}
.mtd-field__toggle:hover { background: var(--mtd-bg-surface-muted); }
.mtd-field__toggle:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--mtd-border-focus);
}
.mtd-field__toggle .mtd-icon { pointer-events: none; }
.mtd-check {
  display: flex; align-items: center; gap: var(--mtd-space-2);
  font: 400 0.875rem/1.25rem var(--mtd-font-sans); color: var(--mtd-text-primary);
  cursor: pointer; user-select: none;
}
.mtd-check input[type="checkbox"] {
  flex: none; inline-size: 1rem; block-size: 1rem; margin: 0;
  accent-color: var(--mtd-action-primary); cursor: pointer;
}

/* Email / register / recovery cards are start-aligned (Screen 2+). */
.mtd-card--start { align-items: stretch; text-align: start; }
.mtd-card--start .mtd-card__mark { align-self: start; }
.mtd-back {
  display: inline-flex; align-items: center; gap: var(--mtd-space-1_5);
  align-self: start; margin-block-end: var(--mtd-space-2);
  font: 500 0.875rem/1.25rem var(--mtd-font-sans); color: var(--mtd-text-secondary);
  text-decoration: none;
}
.mtd-back:hover { color: var(--mtd-text-primary); }
[dir="rtl"] .mtd-back__arrow { transform: scaleX(-1); }
.mtd-forgot {
  display: flex; justify-content: flex-end; inline-size: 100%;
  font-size: 0.875rem; line-height: 1.25rem;
}
.mtd-forgot a { color: var(--mtd-text-link); font-weight: 500; text-decoration: none; }
.mtd-forgot a:hover { text-decoration: underline; }
.mtd-nafath[aria-disabled="true"], .mtd-nafath.is-disabled {
  opacity: 0.72; cursor: not-allowed; pointer-events: none;
}

/* Alert — one structure everywhere: icon + title + description (info | warning | danger | success). */
.mtd-alert {
  display: flex; align-items: flex-start; gap: var(--mtd-space-3); inline-size: 100%; text-align: start;
  padding: var(--mtd-space-3) var(--mtd-space-4); border-radius: var(--mtd-radius-lg); border: 1px solid;
}
.mtd-alert--info { background: var(--mtd-status-submitted-bg); border-color: var(--mtd-status-submitted-border); color: var(--mtd-status-submitted-fg); }
.mtd-alert--warning { background: var(--mtd-status-action-bg); border-color: var(--mtd-status-action-border); color: var(--mtd-status-action-fg); }
.mtd-alert--danger { background: var(--mtd-status-rejected-bg); border-color: var(--mtd-status-rejected-border); color: var(--mtd-status-rejected-fg); }
.mtd-alert--success { background: var(--mtd-status-completed-bg); border-color: var(--mtd-status-completed-border); color: var(--mtd-status-completed-fg); }
.mtd-alert__icon { flex: none; margin-block-start: 1px; }
.mtd-alert__body { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.mtd-alert__title,
.mtd-alert__body > strong {
  display: block; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: inherit;
}
.mtd-alert__text,
.mtd-alert__body > span {
  display: block; font-size: 0.875rem; line-height: 1.25rem; font-weight: 400;
}
.mtd-alert--info .mtd-alert__text,
.mtd-alert--info .mtd-alert__body > span { color: var(--info-600); }
.mtd-alert--warning .mtd-alert__text,
.mtd-alert--warning .mtd-alert__body > span { color: var(--warning-700); }
.mtd-alert--danger .mtd-alert__text,
.mtd-alert--danger .mtd-alert__body > span { color: var(--danger-600); }
.mtd-alert--success .mtd-alert__text,
.mtd-alert--success .mtd-alert__body > span { color: var(--success-600); }

/* Verify email (Screen 5): icon tile + link row. Alerts use .mtd-alert only. */
.mtd-card__icon {
  flex: none; inline-size: 56px; block-size: 56px; border-radius: var(--mtd-radius-xl);
  display: grid; place-items: center; align-self: start;
  background: var(--mtd-action-primary-subtle);
}
.mtd-card__icon .mtd-icon { inline-size: 28px; block-size: 28px; }
.mtd-card__icon--success { background: var(--mtd-status-completed-bg); }
.mtd-card__icon--danger { background: var(--mtd-status-rejected-bg); }
.mtd-lede { color: var(--mtd-text-secondary); font-size: 0.875rem; line-height: 1.25rem; text-align: start; }
.mtd-lede .mtd-email { color: var(--mtd-text-primary); font-weight: 500; }

/* Info / Status: remaining required actions list (Figma 182:7986). */
.mtd-action-list {
  list-style: none; margin: 0; padding: var(--mtd-space-3) 14px;
  inline-size: 100%; display: flex; flex-direction: column; gap: var(--mtd-space-2);
  background: var(--mtd-bg-surface-muted, #F3EEE6);
  border-radius: 10px; text-align: start;
}
.mtd-action-list__item {
  display: flex; align-items: flex-start; gap: 10px;
  font: 400 0.875rem/1.25rem var(--mtd-font-sans); color: var(--mtd-text-primary);
}
.mtd-action-list__icon {
  flex: none; margin-block-start: 2px;
  inline-size: 16px; block-size: 16px;
}
[dir="rtl"] .mtd-action-list__icon { transform: scaleX(-1); }

/* Two-step / TOTP setup & OTP challenge (Figma 182:8575 / 182:8938). */
.mtd-totp-steps {
  list-style: none; margin: 0; padding: 0;
  inline-size: 100%; display: flex; flex-direction: column; gap: var(--mtd-space-4);
  text-align: start;
}
.mtd-totp-steps__item {
  display: flex; align-items: flex-start; gap: var(--mtd-space-3);
}
.mtd-totp-steps__num {
  flex: none; inline-size: 24px; block-size: 24px; border-radius: 999px;
  display: grid; place-items: center;
  font: 600 0.75rem/1 var(--mtd-font-sans);
  color: var(--mtd-text-on-action); background: var(--mtd-action-primary);
}
.mtd-totp-steps__body { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--mtd-space-2); }
.mtd-totp-steps__title { margin: 0; font: 600 0.875rem/1.25rem var(--mtd-font-sans); color: var(--mtd-text-primary); }
.mtd-totp-steps__text { margin: 0; font: 400 0.875rem/1.25rem var(--mtd-font-sans); color: var(--mtd-text-secondary); }
.mtd-totp-apps {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--mtd-space-2);
  font: 400 0.75rem/1rem var(--mtd-font-sans); color: var(--mtd-text-muted);
}
.mtd-totp-apps li::after { content: "·"; margin-inline-start: var(--mtd-space-2); color: var(--mtd-text-muted); }
.mtd-totp-apps li:last-child::after { content: none; }
.mtd-totp-qr {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--mtd-space-4);
}
.mtd-totp-qr__img {
  flex: none; inline-size: 160px; block-size: 160px;
  border: 1px solid var(--mtd-border-default); border-radius: var(--mtd-radius-lg);
  background: var(--mtd-bg-surface);
}
.mtd-totp-qr__side { flex: 1; min-inline-size: 12rem; display: flex; flex-direction: column; gap: var(--mtd-space-2); }
.mtd-totp-manual-key {
  margin: 0; font: 400 0.875rem/1.25rem var(--mtd-font-sans); color: var(--mtd-text-secondary);
}
.mtd-totp-manual-key__value {
  display: inline-block; margin-inline-start: 4px;
  font: 600 0.875rem/1.25rem var(--mtd-font-sans); color: var(--mtd-text-primary);
  letter-spacing: 0.04em; word-break: break-all;
}
.mtd-totp-policy {
  margin: 0; font: 400 0.75rem/1rem var(--mtd-font-sans); color: var(--mtd-text-muted);
}
.mtd-totp-qr__toggle a,
.mtd-totp-qr a { color: var(--mtd-text-link); font: 500 0.875rem/1.25rem var(--mtd-font-sans); text-decoration: none; }
.mtd-totp-qr__toggle a:hover,
.mtd-totp-qr a:hover { text-decoration: underline; }

.mtd-otp-devices {
  border: 0; margin: 0; padding: 0;
  inline-size: 100%; display: flex; flex-direction: column; gap: var(--mtd-space-2);
}
.mtd-otp-device {
  display: flex; align-items: center; gap: var(--mtd-space-3);
  padding: var(--mtd-space-3) var(--mtd-space-4);
  border: 1px solid var(--mtd-border-default); border-radius: var(--mtd-radius-lg);
  background: var(--mtd-bg-surface); cursor: pointer;
  font: 500 0.875rem/1.25rem var(--mtd-font-sans); color: var(--mtd-text-primary);
}
.mtd-otp-device:has(input:checked) {
  background: var(--mtd-bg-surface-muted, #F3EEE6);
  border-color: var(--mtd-action-primary);
}
.mtd-otp-device input {
  flex: none; accent-color: var(--mtd-action-primary);
}
.mtd-inline-form { display: inline; margin: 0; padding: 0; }
.mtd-link-btn {
  appearance: none; border: 0; background: transparent; padding: 0; cursor: pointer;
  color: var(--mtd-text-link); font: 500 0.875rem/1.25rem var(--mtd-font-sans);
}
.mtd-link-btn:hover { text-decoration: underline; }
.visually-hidden {
  position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Terms (Figma 185:9714). */
.mtd-terms-scroll {
  inline-size: 100%; max-block-size: 220px; overflow: auto;
  padding: var(--mtd-space-4); border-radius: var(--mtd-radius-lg);
  background: var(--mtd-bg-surface-muted, #F3EEE6);
  font: 400 0.875rem/1.375rem var(--mtd-font-sans); color: var(--mtd-text-secondary);
  text-align: start;
}
.mtd-terms-scroll h2, .mtd-terms-scroll h3, .mtd-terms-scroll strong {
  color: var(--mtd-text-primary); font-weight: 600;
}
.mtd-terms-note {
  margin: 0; font: 400 0.75rem/1rem var(--mtd-font-sans); color: var(--mtd-text-muted);
  text-align: start; inline-size: 100%;
}

/* Consent / Allow access (Figma 185:10014). */
.mtd-consent-marks {
  display: flex; align-items: center; gap: var(--mtd-space-3); align-self: start;
}
.mtd-consent-marks__tile {
  inline-size: 52px; block-size: 52px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--mtd-action-primary-subtle);
}
.mtd-consent-marks__swap { flex: none; }
.mtd-consent-list {
  list-style: none; margin: 0; padding: var(--mtd-space-3) 14px;
  inline-size: 100%; display: flex; flex-direction: column; gap: var(--mtd-space-2);
  background: var(--mtd-bg-surface-muted, #F3EEE6); border-radius: 10px; text-align: start;
}
.mtd-consent-list__item {
  display: flex; align-items: flex-start; gap: 10px;
  font: 400 0.875rem/1.25rem var(--mtd-font-sans); color: var(--mtd-text-primary);
}
.mtd-consent-list__icon { flex: none; margin-block-start: 2px; }

/* Select authenticator (Figma 186:10763). */
.mtd-auth-choices {
  display: flex; flex-direction: column; gap: var(--mtd-space-2); inline-size: 100%;
}
.mtd-auth-choice {
  display: flex; align-items: center; gap: var(--mtd-space-3);
  inline-size: 100%; padding: var(--mtd-space-3) var(--mtd-space-4);
  border: 1px solid var(--mtd-border-default); border-radius: var(--mtd-radius-lg);
  background: var(--mtd-bg-surface); cursor: pointer; text-align: start;
  font: inherit; color: inherit;
}
.mtd-auth-choice:hover { background: var(--mtd-bg-surface-muted); }
.mtd-auth-choice__icon {
  flex: none; inline-size: 40px; block-size: 40px; border-radius: 10px;
  display: grid; place-items: center; background: var(--mtd-action-primary-subtle);
}
.mtd-auth-choice__text { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 2px; }
.mtd-auth-choice__title { font: 600 0.875rem/1.25rem var(--mtd-font-sans); color: var(--mtd-text-primary); }
.mtd-auth-choice__help { font: 400 0.75rem/1rem var(--mtd-font-sans); color: var(--mtd-text-secondary); }
.mtd-auth-choice__arrow { flex: none; }
[dir="rtl"] .mtd-auth-choice__arrow { transform: scaleX(-1); }

/* Passkey list + device code. */
.mtd-passkey-list {
  list-style: none; margin: 0; padding: 0; inline-size: 100%;
  display: flex; flex-direction: column; gap: var(--mtd-space-2);
}
.mtd-passkey-list__item {
  display: flex; align-items: center; gap: var(--mtd-space-3);
  padding: var(--mtd-space-3) var(--mtd-space-4);
  border: 1px solid var(--mtd-border-default); border-radius: var(--mtd-radius-lg);
  background: var(--mtd-bg-surface-muted, #F3EEE6);
}
.mtd-passkey-list__icon { flex: none; }
.mtd-passkey-list__text { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 2px; text-align: start; }
.mtd-passkey-list__title { font: 500 0.875rem/1.25rem var(--mtd-font-sans); color: var(--mtd-text-primary); }
.mtd-passkey-list__meta { font: 400 0.75rem/1rem var(--mtd-font-sans); color: var(--mtd-text-muted); }
.mtd-device-code {
  inline-size: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--mtd-space-3);
  padding: var(--mtd-space-4); border-radius: var(--mtd-radius-lg);
  background: var(--mtd-bg-surface-muted, #F3EEE6);
}
.mtd-device-code__value {
  flex: 1; min-inline-size: 0;
  font: 600 1.5rem/2rem var(--mtd-font-sans); letter-spacing: 0.12em;
  color: var(--mtd-text-primary); word-break: break-all;
}
.mtd-action-list--danger .mtd-action-list__item { color: var(--mtd-text-primary); }

/* Identity AIA screens (Confirm it’s you / Edit profile / Change email / Change password) */
.mtd-signed-as {
  inline-size: 100%; display: flex; flex-direction: column; gap: 2px;
  padding: var(--mtd-space-3) var(--mtd-space-4);
  background: var(--mtd-bg-surface-muted, #F3EEE6);
  border-radius: var(--mtd-radius-lg); text-align: start;
}
.mtd-signed-as__label { font: 500 0.75rem/1rem var(--mtd-font-sans); color: var(--mtd-text-secondary); }
.mtd-signed-as__email { font: 500 0.875rem/1.25rem var(--mtd-font-sans); color: var(--mtd-text-primary); word-break: break-all; }

.mtd-readonly {
  inline-size: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--mtd-space-3);
  padding: var(--mtd-space-3) var(--mtd-space-4);
  background: var(--mtd-bg-surface-muted, #F3EEE6);
  border-radius: var(--mtd-radius-lg); text-align: start;
}
.mtd-readonly__text { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 2px; }
.mtd-readonly__label { font: 500 0.75rem/1rem var(--mtd-font-sans); color: var(--mtd-text-secondary); }
.mtd-readonly__value { font: 500 0.875rem/1.25rem var(--mtd-font-sans); color: var(--mtd-text-primary); word-break: break-all; }
.mtd-readonly__action {
  flex: none; color: var(--mtd-text-link); font: 500 0.875rem/1.25rem var(--mtd-font-sans);
  text-decoration: none;
}
.mtd-readonly__action:hover { text-decoration: underline; }

.mtd-field-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--mtd-space-3);
  inline-size: 100%;
}
.mtd-req { color: var(--danger-600, #DC2626); margin-inline-start: 2px; }
.mtd-field__hint {
  margin: var(--mtd-space-1) 0 0;
  font: 400 0.75rem/1rem var(--mtd-font-sans); color: var(--mtd-text-muted);
}

.mtd-pw-reqs {
  list-style: none; margin: calc(var(--mtd-space-2) * -1) 0 0; padding: var(--mtd-space-3);
  border: 1px solid var(--mtd-border-default); border-radius: var(--mtd-radius-lg);
  background: var(--mtd-bg-surface);
  display: flex; flex-direction: column; gap: var(--mtd-space-2);
  text-align: start;
}
.mtd-pw-reqs li {
  display: flex; align-items: center; gap: var(--mtd-space-2);
  font: 400 0.75rem/1rem var(--mtd-font-sans); color: var(--mtd-text-secondary);
}
.mtd-pw-reqs__icon { flex: none; inline-size: 16px; block-size: 16px; display: none; }
.mtd-pw-reqs__icon--pending {
  display: inline-block; border-radius: 999px;
  border: 1.5px solid var(--mtd-border-strong, #D2C8B8);
}
.mtd-pw-reqs li.is-pending { color: var(--mtd-text-muted); }
.mtd-pw-reqs li.is-pending .mtd-pw-reqs__icon--pending { display: inline-block; }
.mtd-pw-reqs li.is-pending .mtd-pw-reqs__icon--met,
.mtd-pw-reqs li.is-pending .mtd-pw-reqs__icon--unmet { display: none; }
.mtd-pw-reqs li.is-met { color: var(--mtd-status-completed-fg, #15803D); }
.mtd-pw-reqs li.is-met .mtd-pw-reqs__icon--met { display: inline-block; }
.mtd-pw-reqs li.is-met .mtd-pw-reqs__icon--pending,
.mtd-pw-reqs li.is-met .mtd-pw-reqs__icon--unmet { display: none; }
.mtd-pw-reqs li.is-unmet { color: var(--mtd-text-secondary); }
.mtd-pw-reqs li.is-unmet .mtd-pw-reqs__icon--unmet { display: inline-block; }
.mtd-pw-reqs li.is-unmet .mtd-pw-reqs__icon--pending,
.mtd-pw-reqs li.is-unmet .mtd-pw-reqs__icon--met { display: none; }

@media (max-width: 900px) {
  .mtd-field-row { grid-template-columns: 1fr; }
}
.mtd-card__links {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--mtd-space-2); inline-size: 100%;
  font: 500 0.875rem/1.25rem var(--mtd-font-sans);
}
.mtd-card__links a { color: var(--mtd-text-link); text-decoration: none; }
.mtd-card__links a:hover { text-decoration: underline; }
.mtd-card__sep { color: var(--mtd-text-muted); user-select: none; }

/* ---------------------------------------------------------------- showcase (left panel) */
.mtd-showcase {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--primary-950); color: var(--white);
  min-block-size: 100vh;
}
.mtd-showcase__watermark { position: absolute; inset-block-start: 60px; inset-inline-start: 40px; inline-size: 720px; block-size: 720px; opacity: 0.06; z-index: -1; pointer-events: none; object-fit: contain; }
.mtd-showcase__brand { position: absolute; inset-block-start: 48px; inset-inline-start: 64px; display: flex; align-items: center; gap: 10px; font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; }
.mtd-showcase__brand img { inline-size: 36px; block-size: 36px; }

.mtd-stage { position: absolute; inset-inline: 0; inset-block-start: 290px; block-size: 360px; }
/* Decorative product cards are approved image exports; only positioning/tilt live in CSS. */
.mtd-preview {
  position: absolute; inset-inline-start: 50%; inset-block-start: 20px;
  inline-size: 320px; margin: 0; padding: 0; border: 0; background: transparent;
  border-radius: var(--mtd-radius-xl);
  transform-origin: center top;
  transition: transform 600ms cubic-bezier(.45, 0, .55, 1), opacity 600ms cubic-bezier(.45, 0, .55, 1);
}
.mtd-preview__img {
  /* Shadow/radius come from the approved PNG export. */
  display: block; inline-size: 100%; block-size: auto;
}
/* Positions mirror the Figma slides: active front and larger, neighbours tilted and translucent. */
.mtd-preview.is-active { transform: translateX(-50%) scale(1.3); opacity: 1; z-index: 3; }
.mtd-preview.is-next   { transform: translateX(10%)  rotate(6deg)  translateY(-20px); opacity: 0.5; z-index: 2; }
.mtd-preview.is-prev   { transform: translateX(-110%) rotate(-6deg); opacity: 0.5; z-index: 2; }
.mtd-preview.is-hidden { transform: translateX(-50%) scale(0.9) translateY(50px); opacity: 0; z-index: 1; }
[dir="rtl"] .mtd-preview.is-active { transform: translateX(50%) scale(1.3); }
[dir="rtl"] .mtd-preview.is-next   { transform: translateX(-10%) rotate(-6deg) translateY(-20px); }
[dir="rtl"] .mtd-preview.is-prev   { transform: translateX(110%) rotate(6deg); }
[dir="rtl"] .mtd-preview.is-hidden { transform: translateX(50%) scale(0.9) translateY(50px); }

/* Tabs, progress, caption */
.mtd-tabs { position: absolute; inset-block-start: 716px; inset-inline: 0; display: flex; justify-content: center; gap: 8px; }
.mtd-tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 12px; border-radius: 999px; border: 0; cursor: pointer;
  font: 500 0.875rem/1.25rem var(--mtd-font-sans); color: var(--primary-100); background: rgb(255 255 255 / 0.08);
}
.mtd-tab img { inline-size: 18px; block-size: 18px; }
.mtd-tab[aria-selected="true"] { background: var(--white); color: var(--primary-950); }
.mtd-progress { position: absolute; inset-block-start: 770px; inset-inline: 0; display: flex; justify-content: center; gap: 6px; }
.mtd-progress span { inline-size: 16px; block-size: 4px; border-radius: 2px; background: rgb(255 255 255 / 0.2); transition: inline-size 300ms ease, background-color 300ms ease; }
.mtd-progress span.is-active { inline-size: 40px; background: var(--primary-300); }
.mtd-caption { position: absolute; inset-block-start: 796px; inset-inline: 32px; text-align: center; }
.mtd-caption h2 { margin: 0; font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; }
.mtd-caption p { margin: 4px 0 0; color: var(--primary-200); font-size: 0.875rem; line-height: 1.25rem; }

/* ---------------------------------------------------------------- mobile: showcase becomes the top band, card becomes a sheet */
@media (max-width: 900px) {
  .mtd-auth { grid-template-columns: 1fr; }
  .mtd-showcase { min-block-size: 0; block-size: 470px; }
  .mtd-showcase__watermark { inline-size: 440px; block-size: 440px; inset-inline-start: -20px; inset-block-start: 20px; }
  .mtd-showcase__brand { inset-block-start: 24px; inset-inline-start: 24px; font-size: 1rem; }
  .mtd-showcase__brand svg { inline-size: 28px; block-size: 28px; }
  .mtd-stage { inset-block-start: 62px; block-size: 260px; }
  .mtd-preview.is-active { transform: translateX(-50%) scale(0.95); }
  .mtd-preview.is-next { transform: translateX(42%) rotate(6deg) scale(0.85); opacity: 0.4; }
  .mtd-preview.is-prev { transform: translateX(-142%) rotate(-6deg) scale(0.85); opacity: 0.4; }
  [dir="rtl"] .mtd-preview.is-active { transform: translateX(50%) scale(0.95); }
  [dir="rtl"] .mtd-preview.is-next { transform: translateX(-42%) rotate(-6deg) scale(0.85); opacity: 0.4; }
  [dir="rtl"] .mtd-preview.is-prev { transform: translateX(142%) rotate(6deg) scale(0.85); opacity: 0.4; }
  [dir="rtl"] .mtd-preview.is-hidden { transform: translateX(50%) scale(0.9) translateY(50px); }
  .mtd-tabs { inset-block-start: 372px; gap: 6px; }
  .mtd-tab { padding: 8px 9px; }
  .mtd-tab span { display: none; }
  .mtd-tab[aria-selected="true"] { padding-inline: 10px 12px; }
  .mtd-tab[aria-selected="true"] span { display: inline; }
  .mtd-progress { inset-block-start: 420px; }
  .mtd-caption { display: none; }
  .mtd-auth__main { margin-block-start: -24px; padding: 0; place-items: stretch; z-index: 1; }
  .mtd-card { inline-size: 100%; border-radius: 28px 28px 0 0; border: 0; box-shadow: none; padding: var(--mtd-space-8) var(--mtd-space-6) var(--mtd-space-16); align-items: stretch; text-align: start; }
  .mtd-card__mark { display: none; }
  .mtd-hint { text-align: start; }
  .mtd-auth__main { background: var(--mtd-bg-surface); border-radius: 28px 28px 0 0; display: flex; flex-direction: column; }
  .mtd-lang { inset-block-start: 20px; inset-inline-end: 24px; color: var(--white); background: rgb(255 255 255 / 0.1); border-color: transparent; font-size: 0.8125rem; padding: 2px 10px; }
  .mtd-legal { position: static; padding-block-end: var(--mtd-space-6); }
}

@media (prefers-reduced-motion: reduce) {
  .mtd-preview, .mtd-progress span { transition: none; }
}