/* Dedicated auth gate. Tokens come from the site design system. */
body.auth-gate {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 88% -12%, color-mix(in srgb, var(--ds-gold) 16%, transparent), transparent 28rem),
    radial-gradient(circle at 6% 108%, color-mix(in srgb, var(--ds-accent) 14%, transparent), transparent 26rem),
    linear-gradient(180deg, var(--ds-canvas), var(--ds-canvas-deep));
}

body.auth-gate .market-theme-toggle {
  inset-inline-start: auto;
  inset-inline-end: .85rem;
}

.auth-stage {
  flex: 1 0 auto;
  width: min(100% - 1.5rem, 78rem);
  margin: clamp(1.5rem, 4vh, 2.75rem) auto clamp(2.5rem, 7vh, 4.5rem);
  display: grid;
  grid-template-columns: minmax(22rem, 0.92fr) minmax(20rem, 1.08fr);
  align-items: stretch;
  gap: 1.1rem;
  min-height: calc(100vh - var(--nc-navbar-height, 4.25rem) - clamp(4rem, 11vh, 7.25rem));
}

.auth-board,
.auth-visual {
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--ds-border);
  border-radius: 1.6rem;
  overflow: hidden;
}

.auth-board {
  display: grid;
  place-items: center;
  padding: clamp(1.1rem, 3vw, 2.1rem);
  background: color-mix(in srgb, var(--ds-surface) 88%, transparent);
  box-shadow: var(--ds-shadow-panel);
}

.auth-card {
  width: min(100%, 28.5rem);
  display: grid;
  gap: 1.15rem;
  min-width: 0;
}

.auth-card__head {
  display: grid;
  gap: .45rem;
}

.auth-card__eyebrow,
.auth-kicker {
  margin: 0;
  color: var(--ds-gold);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .16em;
  line-height: 1.6;
}

.auth-card h1,
.auth-visual__title {
  margin: 0;
  color: var(--ds-ink-strong);
  font-size: clamp(1.45rem, 2.6vw, 2.05rem);
  font-weight: 900;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.auth-card__head p,
.auth-visual__lede,
.auth-hint {
  margin: 0;
  color: var(--ds-muted);
  font-size: .86rem;
  line-height: 1.95;
  overflow-wrap: anywhere;
}

.auth-phone {
  display: inline-block;
  margin-inline: .15rem;
  color: var(--ds-ink-strong);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .45rem;
  padding: .35rem;
  border: 1px solid var(--ds-border);
  border-radius: 1.05rem;
  background: var(--ds-surface-muted);
}

.auth-tab {
  min-height: 2.85rem;
  border: 0;
  border-radius: .8rem;
  padding: .55rem .7rem;
  background: transparent;
  color: var(--ds-muted);
  font: 800 .78rem Vazirmatn, Tahoma, sans-serif;
  line-height: 1.35;
  cursor: pointer;
  transition: background .22s ease, color .22s ease, transform .22s ease;
}

.auth-tab.is-active,
.auth-tab[aria-selected="true"] {
  background: var(--ds-surface-raised);
  color: var(--ds-ink-strong);
  box-shadow: var(--ds-shadow-sm);
}

.auth-tab:hover { color: var(--ds-ink); }
.auth-tab:focus-visible,
.auth-submit:focus-visible,
.password-toggle:focus-visible,
.auth-card__links a:focus-visible {
  outline: 2px solid var(--ds-focus);
  outline-offset: 3px;
}

.auth-panel { display: grid; gap: .9rem; min-width: 0; }
.auth-panel[hidden] { display: none; }

.auth-form {
  display: grid;
  gap: .95rem;
  animation: auth-rise .42s ease both;
}

.auth-gate .field {
  display: grid;
  gap: .4rem;
  margin: 0;
  min-width: 0;
}

.auth-gate .field label {
  color: var(--ds-ink);
  font-size: .78rem;
  font-weight: 850;
  line-height: 1.6;
}

.auth-gate .field :is(input, select, textarea) {
  width: 100%;
  min-height: 3.15rem;
  border: 1px solid var(--ds-border-strong);
  border-radius: .9rem;
  padding: .75rem 1rem;
  background: var(--ds-surface-raised);
  color: var(--ds-ink-strong);
  font: inherit;
  line-height: 1.5;
  outline: 0;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.auth-gate .field input::placeholder { color: color-mix(in srgb, var(--ds-muted) 78%, transparent); }
.auth-gate .field input:hover { border-color: color-mix(in srgb, var(--ds-gold) 45%, var(--ds-border)); }
.auth-gate .field input:focus {
  border-color: var(--ds-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ds-accent) 18%, transparent);
}

.auth-gate .field input[dir="ltr"] {
  text-align: left;
  font-variant-numeric: tabular-nums;
}

.auth-otp-input {
  letter-spacing: .42em;
  text-align: center !important;
  font-size: 1.35rem;
  font-weight: 900;
}

.password-control {
  position: relative;
  min-width: 0;
  direction: ltr;
}
.password-control input {
  padding-inline-end: 4.8rem;
  direction: ltr;
  text-align: left;
}

.password-toggle {
  position: absolute;
  inset-inline-end: .4rem;
  inset-block-start: 50%;
  z-index: 2;
  transform: translateY(-50%);
  min-width: 3.7rem;
  min-height: 2.25rem;
  border: 0;
  border-radius: .65rem;
  padding: .35rem .55rem;
  background: var(--ds-surface-muted);
  color: var(--ds-ink);
  font: 800 .7rem Vazirmatn, Tahoma, sans-serif;
  line-height: 1;
  cursor: pointer;
}

.password-toggle:hover {
  background: var(--ds-gold-soft);
  color: var(--ds-gold);
}

.auth-submit,
.auth-card a.auth-submit {
  display: inline-flex;
  width: 100%;
  min-height: 3.15rem;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border: 0;
  border-radius: .95rem;
  padding: .8rem 1.1rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ds-accent) 88%, #fff), var(--ds-accent-hover));
  color: #fff;
  font: 900 .88rem Vazirmatn, Tahoma, sans-serif;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--ds-accent) 28%, transparent);
  cursor: pointer;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

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

.auth-submit:active { transform: translateY(0); }

.auth-submit:disabled,
.auth-submit[disabled] {
  cursor: not-allowed;
  border: 1px dashed var(--ds-border-strong);
  background: var(--ds-surface-muted);
  color: var(--ds-muted);
  filter: none;
  transform: none;
  box-shadow: none;
}

.auth-submit--ghost,
.auth-card a.auth-submit--ghost {
  background: var(--ds-surface-muted);
  color: var(--ds-ink-strong);
  box-shadow: none;
  border: 1px solid var(--ds-border);
}

.auth-banner,
.auth-gate .errorlist {
  margin: 0;
  padding: .85rem 1rem;
  border-radius: .9rem;
  font-size: .8rem;
  line-height: 1.85;
  overflow-wrap: anywhere;
}

.auth-banner--info {
  border: 1px solid var(--info-border);
  background: var(--info-bg);
  color: var(--info-text);
}

.auth-banner--warn {
  border: 1px solid var(--warning-border);
  background: var(--warning-bg);
  color: var(--warning-text);
}

.auth-gate .errorlist {
  list-style: none;
  border: 1px solid var(--danger-border);
  background: var(--danger-bg);
  color: var(--danger-text);
}

.auth-gate .errorlist li + li { margin-block-start: .25rem; }

.auth-hint { font-size: .78rem; }

.auth-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem .9rem;
  justify-content: space-between;
  padding-block-start: .15rem;
  border-block-start: 1px solid var(--ds-border);
}

.auth-card__links a {
  color: var(--ds-teal);
  font-size: .8rem;
  font-weight: 850;
  text-decoration: none;
  line-height: 1.7;
}

.auth-card__links a:hover { color: var(--ds-accent); }

.auth-steps {
  display: grid;
  gap: .7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.auth-steps li {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: .8rem;
  align-items: start;
  padding: .85rem .9rem;
  border: 1px solid var(--ds-border);
  border-radius: 1rem;
  background: var(--ds-surface-muted);
}

.auth-steps b {
  display: grid;
  width: 2.4rem;
  height: 2.4rem;
  place-items: center;
  border-radius: .8rem;
  background: var(--ds-gold-soft);
  color: var(--ds-gold);
  font-size: .95rem;
}

.auth-steps strong,
.auth-steps span { display: block; overflow-wrap: anywhere; }
.auth-steps strong { color: var(--ds-ink-strong); font-size: .86rem; }
.auth-steps span { margin-block-start: .15rem; color: var(--ds-muted); font-size: .76rem; line-height: 1.8; }

.auth-visual {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: 1fr auto;
  color: #f7f1e4;
  background:
    radial-gradient(ellipse at 18% 0%, color-mix(in srgb, var(--ds-gold) 34%, transparent), transparent 42%),
    radial-gradient(ellipse at 100% 88%, color-mix(in srgb, var(--ds-accent) 38%, transparent), transparent 46%),
    linear-gradient(165deg, #101916 0%, #16352d 46%, #1c1614 100%);
}

.auth-visual__aurora,
.auth-visual__mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.auth-visual__aurora {
  background:
    radial-gradient(circle at 30% 20%, rgb(227 177 94 / .22), transparent 28%),
    radial-gradient(circle at 80% 70%, rgb(158 47 59 / .28), transparent 32%);
  animation: auth-glow 8s ease-in-out infinite alternate;
}

.auth-visual__mesh {
  opacity: .22;
  background-image:
    linear-gradient(rgb(255 255 255 / .08) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / .08) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 50% 40%, #000 35%, transparent 78%);
}

.auth-visual__body {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: 1rem;
  padding: clamp(1.4rem, 4vw, 2.6rem);
}

.auth-visual .auth-kicker { color: #e3b15e; }
.auth-visual__title { color: #fffdf6; max-width: 18ch; }
.auth-visual__lede { color: #d7d0c3; max-width: 38ch; }

.auth-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: .15rem 0 0;
  padding: 0;
  list-style: none;
}

.auth-pills li {
  padding: .42rem .75rem;
  border: 1px solid rgb(255 255 255 / .16);
  border-radius: 999px;
  background: rgb(255 255 255 / .08);
  color: #f3ead8;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.4;
}

.auth-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
  margin-block-start: .35rem;
}

.auth-stat {
  min-width: 0;
  padding: .85rem .8rem;
  border: 1px solid rgb(255 255 255 / .12);
  border-radius: 1rem;
  background: rgb(8 14 12 / .28);
  backdrop-filter: blur(12px);
  animation: auth-float 5.6s ease-in-out infinite;
}

.auth-stat:nth-child(2) { animation-delay: .6s; }
.auth-stat:nth-child(3) { animation-delay: 1.2s; }

.auth-stat small,
.auth-stat span {
  display: block;
  overflow-wrap: anywhere;
}

.auth-stat small {
  color: #e3b15e;
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.auth-stat b {
  display: block;
  margin: .28rem 0 .2rem;
  color: #fff;
  font-size: .95rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.auth-stat span {
  color: #cfc6b6;
  font-size: .7rem;
  line-height: 1.7;
}

.auth-ticker {
  position: relative;
  z-index: 1;
  overflow: hidden;
  direction: ltr;
  border-block-start: 1px solid rgb(255 255 255 / .1);
  background: rgb(0 0 0 / .18);
}

.auth-ticker__track {
  display: flex;
  gap: 1.4rem;
  width: max-content;
  padding: .7rem 1.2rem;
  color: #e8dcc3;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .08em;
  animation: auth-marquee 22s linear infinite;
}

.auth-ticker__track span { white-space: nowrap; }

@keyframes auth-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes auth-glow {
  from { transform: scale(1); opacity: .85; }
  to { transform: scale(1.08); opacity: 1; }
}

@keyframes auth-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes auth-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 980px) {
  .auth-stage {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .auth-visual {
    order: -1;
    min-height: 0;
  }

  .auth-visual__title { max-width: none; font-size: clamp(1.2rem, 6vw, 1.7rem); }
  .auth-visual__lede,
  .auth-pills,
  .auth-stats,
  .auth-ticker { display: none; }
  .auth-visual__body { padding: 1.15rem 1.2rem 1.05rem; gap: .65rem; }
  .auth-stat { animation: none; }
  .auth-board { padding-bottom: 4.2rem; }
}

@media (max-width: 640px) {
  .auth-stage { width: min(100% - 1.25rem, 78rem); margin-block: 1.25rem 2.5rem; }
  .auth-board, .auth-visual { border-radius: 1.15rem; }
  .auth-board { padding: 1rem .9rem 4.2rem; }
  .auth-tabs { grid-template-columns: 1fr; }
  .auth-otp-input { letter-spacing: .28em; font-size: 1.15rem; }
  .auth-card__links { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-form,
  .auth-visual__aurora,
  .auth-stat,
  .auth-ticker__track,
  .auth-submit {
    animation: none;
    transition: none;
  }
}