:root {
  --sa-paper: #FFFFFF;
  --sa-paper-2: #FAFAFA;
  --sa-ink: #0A0A0A;
  --sa-ink-2: #141414;
  --sa-signal: var(--sel-teal);
  --sa-signal-lo: var(--sel-teal-deep);
  --sa-signal-hi: var(--sel-teal-soft);
  --sa-signal-ink: var(--sel-teal-ink);
  --sa-line: #E7E9E9;
  --sa-line-soft: #F0F2F1;
  --sa-muted: #5A6362;
  --sa-faint: #6B7574;
  --sa-danger: #D72C0D;
  --sa-danger-bg: #FDECEA;
  --sa-display: 'Rubik', 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif;
  --sa-sans: 'Inter', 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sa-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sa-e: cubic-bezier(.16, 1, .3, 1);
}
[dir="rtl"] { --sa-display: 'IBM Plex Sans Arabic', 'Rubik', system-ui, sans-serif; }

body {
  margin: 0;
  background: var(--sa-paper);
  color: var(--sa-ink);
  font-family: var(--sa-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.mjauth {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  min-height: 100dvh;
}

.selauth-panel {
  display: flex;
  flex-direction: column;
  padding: 26px clamp(20px, 4vw, 56px) 44px;
  background: var(--sa-paper);
}

.selauth-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(24px, 4vh, 46px);
}
.selauth-brandline { text-decoration: none; display: inline-flex; align-items: baseline; }
.selauth-wordmark {
  font-family: var(--sa-display);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--sa-ink);
  line-height: 1;
}
.selauth-brandline::after {
  content: ".";
  font-family: var(--sa-display);
  font-size: 27px;
  font-weight: 600;
  color: var(--sa-signal);
  line-height: 1;
}
.selauth-lang {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border: 1px solid var(--sa-line);
  border-radius: 999px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--sa-muted);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.selauth-lang:hover { border-color: #B8B8B8; color: var(--sa-ink); }
.selauth-lang svg { width: 15px; height: 15px; }

.selauth-body {
  width: 100%;
  max-width: 452px;
  margin-inline: auto;
  margin-block: auto;
  display: flex;
  flex-direction: column;
}

.selauth-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-family: var(--sa-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sa-signal-lo);
  margin-bottom: 14px;
}
.selauth-eyebrow::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--sa-signal);
  box-shadow: 0 0 0 3px rgba(32,178,170,.16);
}
.selauth-title {
  font-family: var(--sa-display);
  font-size: clamp(34px, 4vw, 46px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.025em;
  color: var(--sa-ink);
  margin: 0 0 10px;
}
.selauth-subtitle {
  font-size: 15px;
  line-height: 1.6;
  color: var(--sa-muted);
  margin: 0 0 26px;
}

.selauth-steps { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.selauth-step { display: inline-flex; align-items: center; gap: 9px; }
.selauth-step-dot {
  width: 25px; height: 25px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--sa-paper-2);
  box-shadow: inset 0 0 0 1px var(--sa-line);
  font-family: var(--sa-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--sa-faint);
  transition: background-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.selauth-step-label { font-size: 13px; font-weight: 500; color: var(--sa-faint); }
.selauth-step.is-active .selauth-step-dot { background: var(--sa-ink); color: #fff; box-shadow: none; }
.selauth-step.is-active .selauth-step-label { color: var(--sa-ink); }
.selauth-step.is-done .selauth-step-dot { background: var(--sa-signal); color: #fff; box-shadow: none; }
.selauth-step.is-done .selauth-step-label { color: var(--sa-ink); }
.selauth-step-line { flex: 1; height: 1px; background: var(--sa-line); }

.selauth-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  margin-bottom: 18px;
}
.selauth-alert svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.selauth-alert.is-error { background: var(--sa-danger-bg); color: #8F1D0A; }
.selauth-alert.is-success { background: rgba(32,178,170,.12); color: var(--sa-signal-lo); }
.selauth-alert.is-info { background: var(--sa-paper-2); color: var(--sa-muted); }

.selauth-social { display: grid; gap: 9px; }
.selauth-social.is-row { grid-template-columns: 1fr 1fr; }
.selauth-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 46px;
  padding-inline: 16px;
  border: 1px solid var(--sa-line);
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--sa-ink);
  text-decoration: none;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, transform .3s var(--sa-e);
}
.selauth-social-btn:hover { border-color: #B0B0B0; background: var(--sa-paper-2); }
.selauth-social-btn:active { transform: scale(.99); }
.selauth-social-btn:focus-visible { outline: 2px solid var(--sa-signal); outline-offset: 2px; }
.selauth-social-btn svg, .selauth-social-btn img { width: 19px; height: 19px; display: block; flex: none; }
.selauth-social-btn.is-apple { background: var(--sa-ink); border-color: var(--sa-ink); color: #fff; }
.selauth-social-btn.is-apple:hover { background: #000; border-color: #000; }
.selauth-note { margin: 10px 0 0; font-size: 12.5px; color: var(--sa-faint); }

.selauth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block: 22px;
  font-family: var(--sa-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sa-faint);
  white-space: nowrap;
}
.selauth-divider::before,
.selauth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sa-line-soft);
}

.selauth-form, .selauth-stack { display: flex; flex-direction: column; }
.selauth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.selauth-field { display: flex; flex-direction: column; margin-bottom: 16px; }

.selauth-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sa-ink);
  margin-bottom: 7px;
}
.selauth-label .req { color: var(--sa-signal); }
.selauth-hint {
  margin-inline-start: auto;
  font-family: var(--sa-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sa-faint);
  font-weight: 500;
}
.selauth-hint.is-required { display: none; }

.selauth-control { position: relative; display: flex; align-items: center; }
.selauth-icon {
  position: absolute;
  inset-inline-start: 14px;
  width: 17px; height: 17px;
  color: var(--sa-faint);
  pointer-events: none;
  transition: color .2s ease;
  z-index: 1;
}
.selauth-control:focus-within .selauth-icon { color: var(--sa-signal-lo); }

.selauth-input {
  width: 100%;
  height: 48px;
  padding-inline: 42px 14px;
  border: 1px solid var(--sa-line);
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  color: var(--sa-ink);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.selauth-input::placeholder { color: #B0B0B0; }
.selauth-input:hover { border-color: #C9C9C9; }
.selauth-input:focus {
  outline: none;
  border-color: var(--sa-signal);
  box-shadow: 0 0 0 3px rgba(32,178,170,.18);
}
.selauth-input.has-toggle { padding-inline-end: 46px; }
.selauth-input.is-valid {
  border-color: rgba(32,178,170,.55);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2320B2AA' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 15px;
  background-position: center right 15px;
}
html[dir="rtl"] .selauth-input.is-valid { background-position: center left 15px; }
.selauth-input.has-toggle.is-valid { background-image: none; }
.selauth-input.is-error { border-color: var(--sa-danger); }
.selauth-input.is-error:focus { border-color: var(--sa-danger); box-shadow: 0 0 0 3px rgba(215,44,13,.14); }

.selauth-toggle {
  position: absolute;
  inset-inline-end: 6px;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--sa-faint);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}
.selauth-toggle:hover { color: var(--sa-ink); background: var(--sa-paper-2); }
.selauth-toggle svg { width: 17px; height: 17px; }
.selauth-toggle .icon-off { display: none; }
.selauth-toggle.is-visible .icon-on { display: none; }
.selauth-toggle.is-visible .icon-off { display: block; }

.selauth-help { margin: 7px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--sa-faint); }
.selauth-error { font-size: 12.5px; line-height: 1.45; color: var(--sa-danger); }
.selauth-error:not(:empty) { margin-top: 6px; }
.selauth-counter { margin-top: 6px; font-family: var(--sa-mono); font-size: 11px; color: var(--sa-faint); align-self: flex-end; }
.selauth-counter.is-ok { color: var(--sa-signal-lo); }

.selauth-strength { display: none; align-items: center; gap: 10px; margin-top: 9px; }
.selauth-strength.is-on { display: flex; }
.selauth-strength-track { flex: 1; height: 4px; border-radius: 999px; background: var(--sa-line-soft); overflow: hidden; }
.selauth-strength-fill { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .3s var(--sa-e), background-color .25s ease; }
.selauth-strength-fill.weak { width: 34%; background: var(--sa-danger); }
.selauth-strength-fill.medium { width: 67%; background: #8A8A8A; }
.selauth-strength-fill.strong { width: 100%; background: var(--sa-signal); }
.selauth-strength-label { font-family: var(--sa-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--sa-faint); }

.selauth-reqs { list-style: none; margin: 11px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.selauth-reqs li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--sa-faint); transition: color .2s ease; }
.selauth-reqs .req-ic {
  width: 15px; height: 15px;
  flex: none;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--sa-line);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 9px;
  transition: background-color .2s ease, box-shadow .2s ease;
}
.selauth-reqs li.is-met { color: var(--sa-ink); }
.selauth-reqs li.is-met .req-ic {
  background-color: var(--sa-signal-lo);
  box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.selauth-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.selauth-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--sa-muted); cursor: pointer; }
.selauth-check input { width: 16px; height: 16px; accent-color: var(--sa-signal); cursor: pointer; }
.selauth-link { font-size: 13.5px; font-weight: 600; color: var(--sa-signal-lo); text-decoration: none; }
.selauth-link:hover { text-decoration: underline; }

.selauth-submit, .selauth-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  height: 50px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .2s ease, transform .35s var(--sa-e), box-shadow .35s var(--sa-e);
}
.selauth-submit {
  background: var(--sa-signal-lo);
  color: #fff;
  box-shadow: 0 1px 2px rgba(10,10,10,.2), 0 14px 30px -14px rgba(10,10,10,.5);
}
.selauth-submit:hover { background: var(--sa-signal-ink); box-shadow: 0 2px 4px rgba(11,127,118,.26), 0 20px 40px -16px rgba(11,127,118,.6); }
.selauth-submit:active { transform: scale(.99); }
.selauth-submit svg { width: 17px; height: 17px; transition: transform .35s var(--sa-e); }
[dir="rtl"] .selauth-submit svg { transform: scaleX(-1); }
.selauth-submit:hover svg { transform: translateX(3px); }
[dir="rtl"] .selauth-submit:hover svg { transform: scaleX(-1) translateX(3px); }
.selauth-ghost { background: #fff; border-color: var(--sa-line); color: var(--sa-ink); }
.selauth-ghost:hover { border-color: #B0B0B0; background: var(--sa-paper-2); }
.selauth-submit:focus-visible, .selauth-ghost:focus-visible, .selauth-input:focus-visible, .selauth-link:focus-visible {
  outline: 2px solid var(--sa-signal);
  outline-offset: 2px;
}
.selauth-actions { display: flex; gap: 10px; margin-top: 4px; }

.selauth-footer { margin-top: 22px; text-align: center; font-size: 13.5px; color: var(--sa-muted); }
.selauth-footer a { font-weight: 600; color: var(--sa-ink); text-decoration: none; border-bottom: 1.5px solid var(--sa-signal); padding-bottom: 1px; }
.selauth-footer a:hover { color: var(--sa-signal-lo); }

.selauth-status-icon {
  width: 62px; height: 62px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
}
.selauth-status-icon svg { width: 28px; height: 28px; }
.selauth-status-icon.is-success { background: var(--sa-signal); }
.selauth-status-icon.is-error { background: var(--sa-danger); }
.selauth-status-icon.is-info { background: var(--sa-ink); }

.selauth-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
  padding: 34px clamp(26px, 3.4vw, 52px) 40px;
  background: var(--sa-ink);
  color: #fff;
  overflow: hidden;
  position: sticky;
  top: 0;
  height: 100dvh;
}
.selauth-brand::after {
  content: "";
  position: absolute;
  inset: -30% -25% auto -25%;
  height: 82%;
  background:
    radial-gradient(46% 54% at 62% 18%, rgba(32,178,170,.30), transparent 68%),
    radial-gradient(40% 46% at 18% 8%, rgba(32,178,170,.14), transparent 70%);
  pointer-events: none;
}
.selauth-brand > * { position: relative; z-index: 1; }

.selauth-brand-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.selauth-brand-logo { display: inline-flex; align-items: baseline; text-decoration: none; }
.selauth-brand-wordmark { font-family: var(--sa-display); font-size: 27px; font-weight: 600; letter-spacing: -.02em; color: #fff; line-height: 1; }
.selauth-brand-logo::after { content: "."; font-family: var(--sa-display); font-size: 27px; font-weight: 600; color: var(--sa-signal); line-height: 1; }

.selauth-brand-mid { display: flex; flex-direction: column; gap: 14px; }
.selauth-brand-glyph {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.09);
  color: var(--sa-signal-hi);
  margin-bottom: 4px;
}
.selauth-brand-glyph svg { width: 21px; height: 21px; }
.selauth-brand-title {
  font-family: var(--sa-display);
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.025em;
  color: #fff;
  margin: 0;
  text-wrap: balance;
}
.selauth-brand-title em { font-style: italic; color: var(--sa-signal-hi); }
.selauth-brand-text { font-size: 15px; line-height: 1.62; color: rgba(255,255,255,.6); margin: 0; max-width: 40ch; }

.selauth-brand-vis {
  position: relative;
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.selauth-bc-head { display: flex; align-items: center; gap: 9px; }
.selauth-bc-thumb {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 7px;
  overflow: hidden;
  background: rgba(255,255,255,.08);
}
.selauth-bc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.selauth-bc-title { margin-inline-end: auto; }
.selauth-bc-title { font-family: var(--sa-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.selauth-bc-live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sa-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--sa-signal-hi); }
.selauth-bc-live::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sa-signal);
  animation: sa-blink 2s ease-in-out infinite;
}
@keyframes sa-blink { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(32,178,170,.55); } 50% { opacity: .4; box-shadow: 0 0 0 5px rgba(32,178,170,0); } }

.selauth-bc-rows { display: flex; flex-direction: column; gap: 8px; }
.selauth-bc-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 11px;
  background: rgba(255,255,255,.04);
}
.selauth-bc-row.is-win { background: rgba(32,178,170,.14); box-shadow: inset 0 0 0 1px rgba(32,178,170,.5); }
.selauth-bc-lab { font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.62); }
.selauth-bc-row.is-win .selauth-bc-lab { color: #fff; }
.selauth-bc-num { font-family: var(--sa-mono); font-size: 13px; font-weight: 700; color: rgba(255,255,255,.55); letter-spacing: -.01em; }
.selauth-bc-row.is-win .selauth-bc-num { color: var(--sa-signal-hi); }
.selauth-bc-bar { grid-column: 1 / -1; height: 4px; border-radius: 999px; background: rgba(255,255,255,.10); overflow: hidden; }
.selauth-bc-bar i { display: block; height: 100%; border-radius: 999px; background: rgba(255,255,255,.3); width: var(--w, 40%); animation: sa-fill 1.4s var(--sa-e) both; }
.selauth-bc-row.is-win .selauth-bc-bar i { background: var(--sa-signal); }
@keyframes sa-fill { from { width: 0; } }

.selauth-brand-proof { display: flex; flex-direction: column; gap: 10px; }
.selauth-fact { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: rgba(255,255,255,.72); }
.selauth-fact svg { width: 16px; height: 16px; flex: none; color: var(--sa-signal-hi); }
.selauth-fact b { color: #fff; font-weight: 600; }

.selauth-proof-avatars { display: flex; align-items: center; }
.selauth-proof-avatars span {
  width: 32px; height: 32px;
  margin-inline-end: -8px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.12);
  box-shadow: 0 0 0 2px var(--sa-ink);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}
.selauth-proof-text { display: flex; flex-direction: column; gap: 2px; }
.selauth-proof-text strong { font-size: 13.5px; font-weight: 600; color: #fff; }
.selauth-proof-text span { font-size: 12.5px; color: rgba(255,255,255,.55); }

@media (max-width: 1024px) {
  .mjauth { grid-template-columns: 1fr; }
  .selauth-brand {
    position: static;
    height: auto;
    order: 2;
    padding-block: 40px 44px;
    gap: 24px;
  }
  .selauth-brand-vis { display: none; }
  .selauth-panel { order: 1; }
}

@media (max-width: 560px) {
  .selauth-panel { padding: 20px 18px 36px; }
  .selauth-grid { grid-template-columns: 1fr; }
  .selauth-social.is-row { grid-template-columns: 1fr; }
  .selauth-title { font-size: 32px; }
  .selauth-steps { gap: 8px; }
  .selauth-step-label { display: none; }
  .selauth-step.is-active .selauth-step-label { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .selauth-bc-live::before, .selauth-bc-bar i { animation: none; }
  .selauth-submit, .selauth-submit svg, .selauth-social-btn { transition: none; }
}