/* ================================================================
   Auth Experience — premium dark, split-screen.
   Self-contained: does not depend on (or inherit) the app theme.
   ================================================================ */

.auth-root {
  --bg-0: #0B0C0D;
  --bg-1: #0E0F11;
  --bg-2: #131518;
  --surface-1: #181C21;
  --surface-2: #1F242A;
  --line:   rgba(214,179,106,.08);
  --line-2: rgba(255,255,255,.10);
  --text-hi: #F4F2EC;
  --text-2:  #A7A39A;
  --text-3:  #6E6A61;
  --accent:    #D6B36A;   /* warm light gold */
  --accent-hi: #F4D28C;   /* soft amber glow */
  --accent-ink:#E6CC93;
  --bronze:    #A37B45;   /* architectural bronze */
  --ok: #9FB98A;
  --danger: #D98A78;
  --r: 12px;
  --ease: cubic-bezier(.4,0,.2,1);

  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(440px, 42%) 1fr;
  background: var(--bg-0);
  color: var(--text-hi);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ─── LEFT: authentication panel ───────────────────────────────── */
.auth-left {
  position: relative;
  background: var(--bg-1);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 36px 56px 32px;
  overflow-y: auto;
  gap: 24px;
}

.auth-left::before {
  /* faint top-down vignette so content sits on a subtle gradient */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 60% at 50% -10%, rgba(214,179,106,.08), transparent 60%);
  pointer-events: none;
}

.auth-topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
}

.auth-brand { color: #fff; display: flex; align-items: center; }
.auth-brand .brand-logo-auth { height: 34px; width: auto; display: block; }

.auth-lang {
  display: inline-flex;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  overflow: hidden;
  font-size: .72rem;
  font-weight: 600;
}
.auth-lang a {
  padding: 5px 10px;
  color: var(--text-3);
  text-decoration: none;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.auth-lang a:hover { color: var(--text-2); }
.auth-lang a.is-active { color: var(--text-hi); background: var(--surface-1); }

.auth-body {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 392px;
  width: 100%;
  margin: 0 auto;
  padding: 8px 0;
}

.auth-eyebrow {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 14px;
}
.auth-title {
  font-size: 2.1rem;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--text-hi);
}
.auth-sub {
  margin-top: 10px;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--text-2);
}

/* ─── Form ─────────────────────────────────────────────────────── */
.auth-form { margin-top: 30px; display: flex; flex-direction: column; gap: 16px; }

.fld { display: flex; flex-direction: column; gap: 7px; }
.fld-label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .8rem; font-weight: 550; color: var(--text-2);
}
.fld-label a {
  font-size: .78rem; font-weight: 550; color: var(--accent-hi);
  text-decoration: none; transition: color .15s var(--ease);
}
.fld-label a:hover { color: var(--accent-ink); }

.fld-input {
  position: relative;
  display: flex; align-items: center;
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.fld-input:focus-within {
  border-color: var(--accent);
  background: var(--surface-2);
  box-shadow: 0 0 0 4px rgba(214,179,106,.15);
}
.fld-input.has-error {
  border-color: var(--danger);
  box-shadow: 0 0 0 4px rgba(217,138,120,.14);
}
.fld-input > .fld-icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 52px; color: var(--text-3); flex-shrink: 0;
}
.fld-input:focus-within > .fld-icon { color: var(--accent-hi); }
.fld-input input {
  flex: 1;
  height: 52px;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--text-hi);
  font-size: .95rem;
  font-family: inherit;
  padding: 0 6px 0 0;
}
.fld-input input::placeholder { color: var(--text-3); }
.fld-input input:-webkit-autofill {
  -webkit-text-fill-color: var(--text-hi);
  -webkit-box-shadow: 0 0 0 60px var(--surface-1) inset;
  transition: background-color 9999s ease-out;
}
.pw-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 52px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--text-3); flex-shrink: 0;
  transition: color .15s var(--ease);
}
.pw-toggle:hover { color: var(--text-hi); }

.fld-msg { font-size: .76rem; color: var(--danger); display: none; }
.fld-input.has-error + .fld-msg { display: block; }

/* checkbox row */
.auth-row { display: flex; align-items: center; justify-content: space-between; }
.auth-check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.auth-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.auth-check .box {
  width: 18px; height: 18px; border-radius: 5px;
  border: 1px solid var(--line-2); background: var(--surface-1);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s var(--ease); flex-shrink: 0;
}
.auth-check .box svg { width: 12px; height: 12px; opacity: 0; transform: scale(.6); transition: all .15s var(--ease); color: #fff; }
.auth-check input:checked + .box { background: var(--accent); border-color: var(--accent); }
.auth-check input:checked + .box svg { opacity: 1; transform: scale(1); }
.auth-check input:focus-visible + .box { box-shadow: 0 0 0 4px rgba(214,179,106,.22); }
.auth-check span.lbl { font-size: .84rem; color: var(--text-2); }

/* primary CTA */
.auth-cta {
  position: relative;
  height: 52px;
  margin-top: 4px;
  border: 0; border-radius: var(--r);
  background: linear-gradient(180deg, var(--accent-hi), var(--accent) 60%, var(--bronze));
  color: #1A1408; font-size: .95rem; font-weight: 650; font-family: inherit; letter-spacing: .01em;
  cursor: pointer; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 10px 26px -12px rgba(214,179,106,.65);
  transition: transform .12s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}
.auth-cta:hover { filter: brightness(1.05); box-shadow: 0 1px 0 rgba(255,255,255,.34) inset, 0 14px 32px -12px rgba(244,210,140,.7); }
.auth-cta:active { transform: translateY(1px); }
.auth-cta:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.auth-cta[disabled] { opacity: .85; cursor: default; }
.auth-cta svg.arrow { transition: transform .18s var(--ease); }
.auth-cta:hover svg.arrow { transform: translateX(3px); }

.auth-spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(26,20,8,.3); border-top-color: #1A1408;
  animation: authspin .6s linear infinite;
}
@keyframes authspin { to { transform: rotate(360deg); } }

/* alerts */
.auth-alert {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 10px; font-size: .85rem;
  margin-bottom: 18px; border: 1px solid transparent;
}
.auth-alert svg { flex-shrink: 0; }
.auth-alert.err  { background: rgba(217,138,120,.10); border-color: rgba(217,138,120,.30); color: #E2A594; }
.auth-alert.ok   { background: rgba(159,185,138,.10); border-color: rgba(159,185,138,.30); color: #B5CDA0; }
.auth-alert.warn { background: rgba(251,191,36,.10);  border-color: rgba(251,191,36,.28);  color: #FCD34D; }

/* secondary actions + divider */
.auth-div {
  display: flex; align-items: center; gap: 14px;
  margin: 24px 0 18px; color: var(--text-3); font-size: .74rem;
  text-transform: uppercase; letter-spacing: .1em;
}
.auth-div::before, .auth-div::after { content: ""; height: 1px; flex: 1; background: var(--line); }

.auth-secondary { display: flex; gap: 10px; }
.auth-ghost {
  flex: 1; height: 44px; border-radius: 10px;
  border: 1px solid var(--line-2); background: transparent;
  color: var(--text-2); font-size: .84rem; font-weight: 550; font-family: inherit;
  cursor: pointer; text-decoration: none;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: all .15s var(--ease);
}
.auth-ghost:hover { background: var(--surface-1); color: var(--text-hi); border-color: var(--line-2); }

/* footer: trust badges + links */
.auth-foot {
  position: relative; z-index: 1;
  max-width: 392px; width: 100%; margin: 0 auto;
  display: flex; flex-direction: column; gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.auth-trust { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.auth-trust span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; color: var(--text-3); font-weight: 500;
}
.auth-trust svg { width: 13px; height: 13px; color: var(--text-2); }
.auth-foot-links { display: flex; gap: 16px; font-size: .74rem; color: var(--text-3); }
.auth-foot-links a { color: var(--text-3); text-decoration: none; transition: color .15s var(--ease); }
.auth-foot-links a:hover { color: var(--text-2); }
.auth-copy { font-size: .72rem; color: var(--text-3); }

/* demo credentials (subtle, app-specific) */
.auth-demo {
  margin-top: 18px; border: 1px dashed var(--line-2); border-radius: 10px;
  background: rgba(255,255,255,.015);
}
.auth-demo summary {
  list-style: none; cursor: pointer; padding: 10px 13px;
  font-size: .76rem; color: var(--text-2); font-weight: 550;
  display: flex; align-items: center; gap: 8px;
}
.auth-demo summary::-webkit-details-marker { display: none; }
.auth-demo summary .chev { transition: transform .18s var(--ease); margin-left: auto; }
.auth-demo[open] summary .chev { transform: rotate(90deg); }
.auth-demo-body { padding: 0 13px 12px; font-size: .76rem; color: var(--text-3); line-height: 1.7; font-feature-settings: "tnum"; }
.auth-demo-body code { color: var(--accent-ink); }

/* ─── RIGHT: operational-intelligence visual ───────────────────── */
.auth-right {
  position: relative;
  background:
    radial-gradient(70% 50% at 72% 30%, rgba(214,179,106,.10), transparent 60%),
    radial-gradient(60% 50% at 30% 100%, rgba(163,123,69,.08), transparent 60%),
    linear-gradient(160deg, #0E0F11 0%, #0C0D0E 55%, #0B0C0D 100%);
  overflow: hidden;
}
/* fine dotted grid */
.auth-right::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(80% 80% at 60% 40%, #000 30%, transparent 78%);
          mask-image: radial-gradient(80% 80% at 60% 40%, #000 30%, transparent 78%);
}
/* faint horizon line */
.auth-right::after {
  content: ""; position: absolute; left: 0; right: 0; top: 62%;
  height: 1px; background: linear-gradient(90deg, transparent, rgba(214,179,106,.28), transparent);
}

.auth-vis {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 56px 60px;
}

.auth-vis-graphic { position: absolute; inset: 0; }
.auth-vis-graphic svg { width: 100%; height: 100%; }

/* architectural light: beams breathing, joints glowing, a light tracing edges */
.beam { transform-origin: 300px 58px; animation: beamglow 8s var(--ease) infinite; }
.beam.b2 { animation-delay: 1.5s; }
.beam.b3 { animation-delay: 3s; }
@keyframes beamglow { 0%,100% { opacity: .35; } 50% { opacity: .8; } }
.ember-core { animation: emberpulse 4s var(--ease) infinite; }
@keyframes emberpulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.joint { animation: jointglow 4.5s var(--ease) infinite; }
.joint.j1 { animation-delay: 0s; }
.joint.j2 { animation-delay: 1s; }
.joint.j3 { animation-delay: 2s; }
.joint.j4 { animation-delay: 3s; }
@keyframes jointglow { 0%,100% { opacity: .4; } 50% { opacity: 1; } }
.trace { filter: drop-shadow(0 0 4px rgba(244,210,140,.8)); }

.auth-vis-top { position: relative; z-index: 2; display: flex; gap: 10px; }
.vis-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px;
  background: rgba(27,31,36,.7); border: 1px solid var(--line-2);
  font-size: .73rem; color: var(--text-2); font-weight: 550;
  backdrop-filter: blur(6px);
}
.vis-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(214,179,106,.18); }

.auth-vis-copy { position: relative; z-index: 2; max-width: 460px; }
.auth-vis-copy h2 {
  font-size: 2.05rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.12;
  color: var(--text-hi);
}
.auth-vis-copy h2 em { font-style: normal; color: var(--accent-hi); }
.auth-vis-copy p { margin-top: 14px; font-size: .98rem; line-height: 1.6; color: var(--text-2); }

.auth-vis-metrics { position: relative; z-index: 2; display: flex; gap: 36px; }
.vis-metric .v { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--text-hi); font-feature-settings: "tnum"; }
.vis-metric .k { margin-top: 3px; font-size: .76rem; color: var(--text-3); }

/* ─── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .auth-root { grid-template-columns: minmax(380px, 48%) 1fr; }
  .auth-vis { padding: 40px; }
  .auth-vis-copy h2 { font-size: 1.7rem; }
}
@media (max-width: 860px) {
  .auth-root { grid-template-columns: 1fr; }
  .auth-right { display: none; }
  .auth-left { border-right: 0; }
}
@media (max-width: 460px) {
  .auth-left { padding: 24px 22px; }
  .auth-body, .auth-foot { max-width: 100%; }
  .auth-title { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .beam, .ember-core, .joint, .trace, .auth-cta svg.arrow { animation: none !important; transition: none !important; }
  .trace { display: none; }
}