/* ============================================================
   Emirae.Pro — Auth pages (Login + Forgot/Reset password).
   Ported from the design prototype `emirae-login/login.css`.
   Split layout, branded navy panel, centered single-column card,
   password toggle (.jp-pass, ported so auth is self-contained),
   and server-rendered flash / invalid-link banners (.lg-note).
   All rules are scoped under `.uaec-ds` (tokens resolve there);
   generic state classes (.is-active/.is-hidden/.is-on/.has-error)
   are always compound-selected under .lg*/.sr*/.jp-pass*.
   Loaded only on the auth routes, after forms.css.
   ============================================================ */
.uaec-ds { --lg-maxw: 1200px; }
body.emirae-auth-page { background: #eef2f8; }

/* ---------- SHELL — full-height split, vertically centered ---------- */
.uaec-ds .lg { position: relative; overflow: hidden;
  background:
    radial-gradient(760px 380px at 92% -10%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 66%),
    radial-gradient(680px 420px at -8% 108%, color-mix(in srgb, var(--navy-800) 7%, transparent), transparent 62%),
    #eef2f8; }
.uaec-ds .lg__inner { max-width: var(--lg-maxw); margin-inline: auto; padding: 52px 24px 64px;
  min-height: calc(100vh - 72px);
  display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 34px; align-items: stretch; }
@media (max-width: 1040px) { .uaec-ds .lg__inner { gap: 26px; } }
@media (max-width: 900px) { .uaec-ds .lg__inner { grid-template-columns: 1fr; min-height: 0; padding: 30px 22px 52px; gap: 20px; } }
@media (max-width: 560px) { .uaec-ds .lg__inner { padding: 20px 16px 42px; } }

/* ---------- LEFT — branded navy panel ---------- */
.uaec-ds .lg-brand { position: relative; overflow: hidden; display: flex; flex-direction: column;
  border-radius: var(--radius-2xl); padding: 46px 44px; color: #fff;
  background: linear-gradient(158deg, #0b1526 0%, #142441 58%, #1a2f54 100%);
  box-shadow: 0 40px 90px -46px rgba(9,16,36,.72), 0 6px 20px -12px rgba(9,16,36,.36); }
.uaec-ds .lg-brand::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(460px 240px at 100% -8%, color-mix(in srgb, var(--accent) 46%, transparent), transparent 62%),
    radial-gradient(360px 220px at -6% 104%, color-mix(in srgb, var(--blue-stroke) 22%, transparent), transparent 60%); }
.uaec-ds .lg-brand::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(620px 420px at 30% 24%, #000, transparent 78%);
  mask-image: radial-gradient(620px 420px at 30% 24%, #000, transparent 78%); }
.uaec-ds .lg-brand > * { position: relative; z-index: 1; }
@media (max-width: 1040px) { .uaec-ds .lg-brand { padding: 40px 34px; } }
@media (max-width: 900px) { .uaec-ds .lg-brand { padding: 34px 28px; } }
@media (max-width: 560px) { .uaec-ds .lg-brand { padding: 28px 22px; border-radius: var(--radius-xl); } }

.uaec-ds .lg-brand__eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: var(--fs-2xs);
  font-weight: var(--fw-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--navy-tint); }
.uaec-ds .lg-brand__eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--navy-tint); }
.uaec-ds .lg-brand__title { margin: 18px 0 0; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.08;
  letter-spacing: -0.025em; font-weight: var(--fw-bold); color: #fff; text-wrap: balance; }
.uaec-ds .lg-brand__sub { margin: 15px 0 0; font-size: clamp(14px, 1.3vw, 16px); line-height: 1.62;
  color: rgba(255,255,255,.72); max-width: 44ch; }

.uaec-ds .lg-bullets { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.uaec-ds .lg-bullets li { display: flex; align-items: center; gap: 12px; font-size: var(--fs-sm);
  font-weight: var(--fw-medium); color: rgba(255,255,255,.9); }
.uaec-ds .lg-bullets__ic { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 30%, transparent); border: 1px solid color-mix(in srgb, var(--navy-tint) 30%, transparent); color: #fff; }
.uaec-ds .lg-bullets__ic svg { width: 15px; height: 15px; stroke-width: 2.4; }

/* preview card — STRUCTURAL illustration only, no real/fabricated data */
.uaec-ds .lg-preview { margin-top: auto; padding-top: 34px; }
.uaec-ds .lg-preview__card { border-radius: var(--radius-xl); overflow: hidden;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 24px 50px -30px rgba(0,0,0,.6); backdrop-filter: blur(4px); }
.uaec-ds .lg-preview__bar { display: flex; align-items: center; gap: 8px; padding: 11px 15px;
  border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); }
.uaec-ds .lg-preview__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.2); }
.uaec-ds .lg-preview__bartxt { margin-left: 6px; font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.uaec-ds .lg-preview__body { padding: 16px 16px 17px; }
.uaec-ds .lg-preview__eyebrow { font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .09em;
  text-transform: uppercase; color: var(--navy-tint); }
.uaec-ds .lg-preview__row { height: 10px; border-radius: 999px; background: rgba(255,255,255,.14); margin-top: 10px; }
.uaec-ds .lg-preview__row--short { width: 58%; }
.uaec-ds .lg-preview__status { display: inline-flex; align-items: center; gap: 8px; margin-top: 13px;
  padding: 5px 11px; border-radius: 999px; font-size: var(--fs-xs); font-weight: var(--fw-medium);
  color: #d7f5cf; background: color-mix(in srgb, var(--success-500) 20%, transparent); border: 1px solid color-mix(in srgb, var(--success-500) 34%, transparent); }
.uaec-ds .lg-live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--success-500); }
.uaec-ds .lg-live::after { content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--success-500); animation: lgPulse 2s var(--ease) infinite; }
@keyframes lgPulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .uaec-ds .lg-live::after { animation: none; } }
.uaec-ds .lg-offers { margin-top: 15px; display: flex; flex-direction: column; gap: 9px; }
.uaec-ds .lg-offer { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--radius-md);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); }
.uaec-ds .lg-offer__logo { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 82%, #fff), var(--accent)); }
.uaec-ds .lg-offer__logo svg { width: 15px; height: 15px; stroke-width: 2; }
.uaec-ds .lg-offer__body { min-width: 0; flex: 1; }
.uaec-ds .lg-offer__t { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: #fff; }
.uaec-ds .lg-offer__t svg { width: 14px; height: 14px; color: var(--success-500); flex: none; }
.uaec-ds .lg-offer__row { height: 8px; width: 62%; border-radius: 999px; background: rgba(255,255,255,.16); margin-top: 5px; }
@media (max-width: 900px) { .uaec-ds .lg-preview { display: none; } }

/* ---------- RIGHT — form column ---------- */
.uaec-ds .lg-formcol { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.uaec-ds .lg-stack { width: 100%; max-width: 456px; }

.uaec-ds .lg-card { position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-2xl); padding: 38px 40px 34px;
  box-shadow: 0 30px 70px -40px rgba(12,20,44,.4), 0 3px 12px -8px rgba(12,20,44,.12); }
@media (max-width: 560px) { .uaec-ds .lg-card { padding: 28px 22px 26px; border-radius: var(--radius-xl); } }

.uaec-ds .lg-card__head { margin-bottom: 24px; }
.uaec-ds .lg-mark { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.uaec-ds .lg-mark img { height: 30px; width: auto; }
.uaec-ds .lg-mark__eyebrow { font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--text-muted); }
.uaec-ds .lg-card__title { margin: 0; font-size: clamp(22px, 2.4vw, 27px); line-height: 1.15; letter-spacing: -0.02em;
  font-weight: var(--fw-bold); color: var(--text-strong); }
.uaec-ds .lg-card__sub { margin: 8px 0 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--text-secondary); }

/* client-side invalid-credentials alert (JS-toggled, hidden by default) */
.uaec-ds .lg-alert { display: none; align-items: flex-start; gap: 10px; margin-bottom: 20px; padding: 12px 14px;
  border-radius: var(--radius-md); background: var(--error-50);
  border: 1px solid color-mix(in srgb, var(--error-500) 30%, var(--error-50)); animation: lgShake .4s var(--ease); }
.uaec-ds .lg-alert.is-active { display: flex; }
.uaec-ds .lg-alert__ic { flex: none; width: 18px; height: 18px; color: var(--error-500); margin-top: 1px; }
.uaec-ds .lg-alert__ic svg { width: 18px; height: 18px; stroke-width: 2.2; }
.uaec-ds .lg-alert p { margin: 0; font-size: var(--fs-xs); line-height: 1.5; color: color-mix(in srgb, var(--error-500) 88%, #000); }
.uaec-ds .lg-alert p b { font-weight: var(--fw-bold); }
@keyframes lgShake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .uaec-ds .lg-alert { animation: none; } }

/* server-rendered banner (flash message + invalid-link notice, always visible when present) */
.uaec-ds .lg-note { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; padding: 12px 14px;
  border-radius: var(--radius-md); font-size: var(--fs-xs); line-height: 1.5; }
.uaec-ds .lg-note__ic { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.uaec-ds .lg-note__ic svg { width: 18px; height: 18px; stroke-width: 2.2; }
.uaec-ds .lg-note p { margin: 0; }
.uaec-ds .lg-note p b { font-weight: var(--fw-bold); }
.uaec-ds .lg-note--error { background: var(--error-50); border: 1px solid color-mix(in srgb, var(--error-500) 30%, var(--error-50)); color: color-mix(in srgb, var(--error-500) 88%, #000); }
.uaec-ds .lg-note--error .lg-note__ic { color: var(--error-500); }
.uaec-ds .lg-note--success { background: var(--success-50); border: 1px solid color-mix(in srgb, var(--success-700) 26%, var(--success-50)); color: color-mix(in srgb, var(--success-700) 90%, #000); }
.uaec-ds .lg-note--success .lg-note__ic { color: var(--success-700); }

/* password label row with forgot link */
.uaec-ds .lg-labelrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.uaec-ds .lg-labelrow .sr-label { margin-bottom: 0; }
.uaec-ds .lg-forgot { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--accent); transition: color var(--dur) var(--ease); }
.uaec-ds .lg-forgot:hover { color: var(--accent-hover); text-decoration: underline; }

/* remember row */
.uaec-ds .lg-optrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 4px 0 22px; }
.uaec-ds .lg-remember { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.uaec-ds .lg-remember input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.uaec-ds .lg-remember__box { flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--border-strong);
  background: var(--surface); display: grid; place-items: center; color: #fff; transition: all var(--dur) var(--ease); }
.uaec-ds .lg-remember__box svg { width: 13px; height: 13px; stroke-width: 3; opacity: 0; transform: scale(.6); transition: all var(--dur) var(--ease); }
.uaec-ds .lg-remember:has(input:checked) .lg-remember__box { background: var(--accent); border-color: var(--accent); }
.uaec-ds .lg-remember:has(input:checked) .lg-remember__box svg { opacity: 1; transform: scale(1); }
.uaec-ds .lg-remember:has(input:focus-visible) .lg-remember__box { box-shadow: 0 0 0 4px var(--accent-ring); }
/* JS fallback for browsers without :has() — auth.js toggles .is-checked */
.uaec-ds .lg-remember.is-checked .lg-remember__box { background: var(--accent); border-color: var(--accent); }
.uaec-ds .lg-remember.is-checked .lg-remember__box svg { opacity: 1; transform: scale(1); }
.uaec-ds .lg-remember__t { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-secondary); }

/* submit button + spinner */
.uaec-ds .lg-submit { width: 100%; height: 52px; font-size: var(--fs-body); }
.uaec-ds .lg-submit .lg-spin { display: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2.4px solid rgba(255,255,255,.4); border-top-color: #fff; animation: lgSpin .7s linear infinite; }
.uaec-ds .lg-submit.is-loading { pointer-events: none; opacity: .92; }
.uaec-ds .lg-submit.is-loading .lg-submit__label,
.uaec-ds .lg-submit.is-loading svg:not(.lg-spin) { display: none; }
.uaec-ds .lg-submit.is-loading .lg-spin { display: block; }
@keyframes lgSpin { to { transform: rotate(360deg); } }

/* provider hint / back-link under card */
.uaec-ds .lg-hint { margin: 20px 0 0; padding-top: 20px; border-top: 1px solid var(--border);
  font-size: var(--fs-sm); line-height: 1.55; color: var(--text-secondary); text-align: center; }
.uaec-ds .lg-hint a { color: var(--accent); font-weight: var(--fw-bold); }
.uaec-ds .lg-hint a:hover { color: var(--accent-hover); text-decoration: underline; }

/* password policy helper (reset page) */
.uaec-ds .lg-policy { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.uaec-ds .lg-policy li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--text-secondary); }
.uaec-ds .lg-policy li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--border-strong); }

/* secondary actions below the login card */
.uaec-ds .lg-secondary { margin-top: 20px; }
.uaec-ds .lg-secondary__div { display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--text-muted); }
.uaec-ds .lg-secondary__div::before, .uaec-ds .lg-secondary__div::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.uaec-ds .lg-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) { .uaec-ds .lg-actions { grid-template-columns: 1fr; } }
.uaec-ds .lg-action { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border); text-align: left;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.uaec-ds .lg-action:hover { border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); background: var(--accent-soft);
  box-shadow: 0 10px 24px -16px color-mix(in srgb, var(--accent) 60%, transparent); transform: translateY(-2px); }
.uaec-ds .lg-action__ic { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)); color: var(--accent); }
.uaec-ds .lg-action:hover .lg-action__ic { background: #fff; }
.uaec-ds .lg-action__ic svg { width: 18px; height: 18px; stroke-width: 1.8; }
.uaec-ds .lg-action__t { display: block; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); line-height: 1.2; }
.uaec-ds .lg-action__s { display: block; font-size: var(--fs-xs); color: var(--text-secondary); margin-top: 2px; }

/* ---------- SINGLE-COLUMN VARIANT (forgot / reset) ---------- */
.uaec-ds.lg--single .lg__inner { grid-template-columns: 1fr; justify-items: center; align-content: center; }
@media (max-width: 900px) { .uaec-ds.lg--single .lg__inner { min-height: calc(100vh - 72px); } }
.uaec-ds.lg--single .lg-formcol { width: 100%; max-width: 468px; }
.uaec-ds .lg-back { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 20px; font-size: var(--fs-sm);
  font-weight: var(--fw-bold); color: var(--text-secondary); transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.uaec-ds .lg-back svg { width: 17px; height: 17px; stroke-width: 2.2; }
.uaec-ds .lg-back:hover { color: var(--accent); }
.uaec-ds .lg-back:hover svg { transform: translateX(-2px); }

/* icon badge in card head */
.uaec-ds .lg-badge { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px;
  background: linear-gradient(158deg, #142441, #1a2f54); color: #fff;
  box-shadow: 0 14px 30px -14px rgba(9,16,36,.6), inset 0 1px 0 rgba(255,255,255,.1); }
.uaec-ds .lg-badge svg { width: 26px; height: 26px; stroke-width: 1.8; }
.uaec-ds .lg-badge--error { background: linear-gradient(158deg, var(--error-500), var(--error-700)); }

/* ---------- SUCCESS STATE (forgot: check-your-email) ---------- */
.uaec-ds .lg-success__card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-2xl);
  padding: 42px 40px 38px; text-align: center;
  box-shadow: 0 30px 70px -40px rgba(12,20,44,.4), 0 3px 12px -8px rgba(12,20,44,.12); }
@media (max-width: 560px) { .uaec-ds .lg-success__card { padding: 34px 24px 30px; } }
.uaec-ds .lg-success__badge { width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 18px; display: grid; place-items: center;
  background: linear-gradient(158deg, color-mix(in srgb, var(--success-500) 88%, #fff), var(--success-700));
  box-shadow: 0 12px 28px -8px color-mix(in srgb, var(--success-700) 60%, transparent), inset 0 1px 0 rgba(255,255,255,.4);
  animation: lgPop .5s var(--ease-out) both; }
.uaec-ds .lg-success__badge svg { width: 30px; height: 30px; stroke-width: 2.6; color: #fff; }
@keyframes lgPop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
.uaec-ds .lg-success__t { margin: 0; font-size: clamp(21px, 2.4vw, 25px); font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--text-strong); }
.uaec-ds .lg-success__s { margin: 9px auto 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-secondary); max-width: 42ch; }
.uaec-ds .lg-success__cta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
@media (max-width: 520px) { .uaec-ds .lg-success__cta { flex-direction: column; } .uaec-ds .lg-success__cta .sr-btn { width: 100%; } }

/* ---------- Password show/hide toggle (ported from join.css) ---------- */
.uaec-ds .jp-pass { position: relative; }
.uaec-ds .jp-pass .sr-input { padding-right: 46px; }
.uaec-ds .jp-pass__toggle { position: absolute; top: 0; right: 0; height: 100%; width: 44px; display: grid; place-items: center;
  background: none; border: none; cursor: pointer; color: var(--text-muted); border-radius: 0 var(--radius-md) var(--radius-md) 0; transition: color var(--dur) var(--ease); }
.uaec-ds .jp-pass__toggle:hover { color: var(--text-secondary); }
.uaec-ds .jp-pass__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.uaec-ds .jp-pass__toggle svg { width: 19px; height: 19px; }
.uaec-ds .jp-pass__toggle .jp-eye-off { display: none; }
.uaec-ds .jp-pass__toggle.is-on .jp-eye { display: none; }
.uaec-ds .jp-pass__toggle.is-on .jp-eye-off { display: block; }