/* Split-screen auth pages (login + MFA). Standalone — these pages do not load
   the portal layout or tailwind, so the base resets live here too. */

:root {
  --navy-950: #07182f;
  --navy-900: #0b2342;
  --teal-600: #0098a8;
  --teal-500: #0cb3b2;
  --teal-400: #38d5cc;
  --ink: #09203e;
  --muted: #687384;
  --line: #d8dee4;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #fff;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; margin: 0; }
a { color: var(--teal-600); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.hidden { display: none !important; }

.login-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  background: white;
}

.login-panel {
  display: flex;
  flex-direction: column;
  padding: clamp(30px, 4vw, 66px) clamp(32px, 7vw, 112px);
  background: linear-gradient(145deg, #fff 0%, #fbfcfd 100%);
}

.login-logo {
  display: block;
  width: min(220px, 58%);
  height: auto;
  margin: 0 0 38px;
}

.login-content {
  width: min(100%, 500px);
  margin: auto 0;
  padding: 18px 0;
}

.login-content h1 {
  margin: 0;
  font-size: clamp(2rem, 2.4vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -.035em;
}

.lead {
  max-width: 430px;
  margin: 18px 0 34px;
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.55;
}

.auth-form { display: grid; gap: 12px; }
.auth-form > label { margin-top: 7px; font-size: .94rem; font-weight: 700; }
.input-wrap { position: relative; }
.input-wrap > svg {
  position: absolute;
  left: 17px;
  top: 50%;
  width: 22px;
  height: 22px;
  color: #69778a;
  transform: translateY(-50%);
  pointer-events: none;
}

.input-wrap input {
  width: 100%;
  height: 54px;
  padding: 0 48px;
  border: 1px solid #cbd3dc;
  border-radius: 10px;
  color: var(--ink);
  background: white;
  transition: border-color .15s, box-shadow .15s;
}

.input-wrap input:focus {
  border-color: var(--teal-600);
  box-shadow: 0 0 0 4px rgba(12,179,178,.1);
  outline: 0;
}

.form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 4px 0 8px;
  color: var(--muted);
}

.check-label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.check-label input { width: 19px; height: 19px; accent-color: var(--teal-600); }

.button {
  width: 100%;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0 22px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

.button:hover { text-decoration: none; transform: translateY(-1px); }
.button-primary {
  color: white;
  background: linear-gradient(135deg, var(--teal-600), var(--teal-500));
  box-shadow: 0 10px 24px rgba(0,152,168,.18);
}
.button-outline { color: var(--teal-600); border-color: var(--teal-600); background: white; }
.button:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.button-icon { width: 20px; height: 20px; margin-right: 9px; }
.spinner { width: 20px; height: 20px; margin-left: 9px; animation: auth-spin 1s linear infinite; }
.spinner circle { opacity: .3; }
.spinner path { opacity: .9; }
@keyframes auth-spin { to { transform: rotate(360deg); } }

.divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  margin: 12px 0;
  color: var(--muted);
}
.divider::before, .divider::after { content: ""; height: 1px; background: var(--line); }

.security-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 30px 0 0;
  color: var(--muted);
  font-size: .82rem;
  text-align: center;
}

.legal-caption {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: .74rem;
  text-align: center;
}

/* Flash messages and validation errors, in the same visual language as the form. */
.auth-alert {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0 0 20px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: .88rem;
  line-height: 1.45;
}
.auth-alert > svg { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 1px; }
.auth-alert strong { display: block; margin-bottom: 2px; font-weight: 700; }
.auth-alert ul { margin: 0; padding: 0; list-style: none; }
.auth-alert li + li { margin-top: 3px; }
.auth-alert-error { color: #93231f; border-color: #f2c4c1; background: #fdf3f2; }
.auth-alert-error > svg { color: #d0453e; }
.auth-alert-success { color: #0b5c53; border-color: #b7e4de; background: #f1fbf9; }
.auth-alert-success > svg { color: var(--teal-600); }

.security-panel {
  position: relative;
  overflow: hidden;
  display: grid;
  min-height: 100vh;
  place-items: center;
  background: radial-gradient(circle at 50% 85%, #08717c 0%, #0b4161 26%, var(--navy-900) 62%, var(--navy-950) 100%);
}

.security-panel::before {
  content: "";
  position: absolute;
  width: 70%;
  height: 70%;
  right: -32%;
  top: -20%;
  border-radius: 50%;
  background: rgba(0,152,168,.25);
}

.security-orbit { position: absolute; border: 1px solid rgba(56,213,204,.28); border-radius: 50%; transform: rotate(-20deg); }
.security-orbit-one { width: 118%; height: 52%; left: -17%; top: 42%; }
.security-orbit-two { width: 135%; height: 68%; left: -24%; top: 37%; }

.glass-card {
  position: relative;
  width: min(390px, 62%);
  aspect-ratio: .9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 30px;
  color: white;
  text-align: center;
  background: linear-gradient(145deg, rgba(255,255,255,.2), rgba(5,35,65,.46));
  box-shadow: 0 35px 70px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.15);
  backdrop-filter: blur(16px);
  transform: rotate(-2deg);
}

.brand-icon-card { position: relative; width: 122px; height: 122px; }
.brand-icon-card > img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 15px 20px rgba(0,0,0,.24)); }
.icon-lock {
  position: absolute;
  right: -6px;
  bottom: 2px;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 50%;
  color: white;
  background: rgba(7,24,47,.84);
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  backdrop-filter: blur(8px);
}
.icon-lock svg { width: 25px; height: 25px; stroke-width: 2.1; }
.glass-card h2 { margin: 20px 0 30px; font-size: clamp(1.2rem, 1.55vw, 1.55rem); line-height: 1.35; font-weight: 500; }
.card-pulse { width: 90px; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--teal-400) 80%, transparent 80%); }

.button:focus-visible, input:focus-visible, a:focus-visible, button:focus-visible {
  outline: 3px solid rgba(12,179,178,.25);
  outline-offset: 3px;
}

@media (min-width: 521px) and (max-width: 900px) {
  .login-layout { grid-template-columns: 1.08fr .92fr; }
  .login-panel { padding: 24px; }
  .login-logo { width: min(170px, 68%); margin-bottom: 24px; }
  .glass-card { width: 82%; padding: 24px; }
  .brand-icon-card { width: 86px; height: 86px; }
  .icon-lock { width: 39px; height: 39px; }
  .glass-card h2 { margin: 15px 0 22px; font-size: 1.05rem; }
}

@media (max-width: 620px) {
  .login-panel { min-height: 100svh; padding: 22px; }
  .login-logo { width: min(190px, 58%); margin-bottom: 30px; }
  .login-content { margin: auto 0; padding: 16px 0; }
  .login-content h1 { font-size: 1.8rem; }
  .lead { margin: 12px 0 24px; font-size: .92rem; }
  .input-wrap input { height: 50px; }
  .button { min-height: 48px; }
  .form-row { align-items: flex-start; }
  .security-caption { justify-content: flex-start; margin-top: 24px; font-size: .76rem; text-align: left; }
  .legal-caption { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* MFA pages use the same structure and visual rhythm as the login page. */
.mfa-content { width: min(100%, 540px); padding: 14px 0; }
.mfa-content .login-logo { width: min(200px, 54%); margin-bottom: 24px; }
.mfa-content h1 { font-size: clamp(1.75rem, 2.1vw, 2.2rem); }
.mfa-content > .lead { margin: 13px 0 24px; font-size: .92rem; }

.setup-content .login-logo { margin-bottom: 20px; }
.setup-content > .lead { margin-bottom: 20px; }
.setup-form { display: grid; gap: 14px; }
.setup-grid { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 18px; align-items: start; }
.qr-card { display: grid; place-items: center; padding: 7px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 8px 22px rgba(7,24,47,.06); }
.qr-card img, .qr-card canvas { display: block; width: 100%; height: auto; border-radius: 6px; }
.setup-copy h2 { margin: 0 0 4px; font-size: .94rem; }
.setup-copy > p { margin: 0 0 7px; color: var(--muted); font-size: .76rem; line-height: 1.35; }
.mobile-setup-copy { display: none; }
.field-label { display: block; margin: 0 0 5px; font-size: .82rem; font-weight: 700; }
.manual-key, .code-input { width: 100%; border: 1px solid #cbd3dc; border-radius: 10px; color: var(--ink); background: #fff; }
.manual-key { position: relative; height: 42px; display: flex; align-items: center; justify-content: center; padding: 0 52px 0 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .69rem; text-align: center; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.manual-key:hover { border-color: var(--teal-600); background: #f8fdfd; }
.copy-label { position: absolute; right: 10px; color: var(--teal-600); font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: .68rem; font-weight: 700; }
.manual-key.is-copied { border-color: var(--teal-600); background: rgba(12,179,178,.08); }
.code-input { height: 50px; padding: 0 14px; font-size: 1.12rem; font-weight: 700; text-align: center; letter-spacing: .38em; font-variant-numeric: tabular-nums; }
.code-input::placeholder { color: #aab3bf; }
.manual-key:focus, .code-input:focus { border-color: var(--teal-600); box-shadow: 0 0 0 4px rgba(12,179,178,.1); outline: 0; }
.field-hint { margin: 4px 0 0; color: var(--muted); font-size: .7rem; line-height: 1.35; }
.text-link { display: inline-flex; margin-top: 6px; font-size: .74rem; font-weight: 650; }
.code-block { margin-top: 2px; }
.mfa-actions { display: grid; grid-template-columns: 1fr 1.35fr; gap: 12px; margin-top: 10px; }
.mfa-actions .button { min-height: 46px; }
.mfa-content .security-caption { justify-content: flex-start; margin-top: 12px; }

.method-content > .lead { margin-bottom: 22px; }
.method-grid { display: grid; gap: 16px; }
.method-card { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(7,24,47,.06); }
.method-heading { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 12px; }
.method-icon-wrap { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 10px; color: var(--teal-600); background: rgba(12,179,178,.1); }
.method-icon { width: 25px; height: 25px; }
.method-card h2 { margin: 0; font-size: .98rem; }
.method-card p { margin: 3px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.35; }
.method-card .button { min-height: 46px; margin-top: 15px; }
.logout-link { display: inline-block; margin-top: 18px; font-size: .82rem; font-weight: 650; }
.verify-form { display: grid; }
.verify-content .login-logo { margin-bottom: 32px; }
.verify-content > .lead { margin-bottom: 30px; }
.verify-form .recovery-link { margin: 14px 0 0; font-size: .82rem; }
.verify-form .mfa-actions { margin-top: 18px; }

@media (max-height: 820px) and (min-width: 621px) {
  html, body, .login-layout, .login-panel, .security-panel { height: 100vh; min-height: 0; }
  body { overflow: hidden; }
  .login-panel { padding-top: 12px; padding-bottom: 12px; }
  .mfa-content { padding: 4px 0; }
  .mfa-content .login-logo { margin-bottom: 18px; }
  .mfa-content > .lead { margin: 9px 0 17px; }
  .setup-form { gap: 10px; }
  .setup-grid { grid-template-columns: 128px minmax(0, 1fr); gap: 14px; }
  .method-grid { gap: 11px; }
  .method-card { padding: 14px; }
  .method-card .button { min-height: 42px; margin-top: 11px; }
  .logout-link { margin-top: 12px; }
  .verify-content .login-logo { margin-bottom: 24px; }
  .verify-content > .lead { margin-bottom: 22px; }
}

@media (max-width: 620px) {
  .mfa-content .login-logo { width: min(170px, 54%); margin-bottom: 16px; }
  .mfa-content h1 { font-size: 1.65rem; }
  .mfa-content > .lead { margin: 8px 0 15px; }
  .setup-grid { grid-template-columns: 100px minmax(0, 1fr); gap: 10px; }
  .manual-key { font-size: .61rem; }
  .method-card { padding: 13px; }
  .mfa-actions { grid-template-columns: .85fr 1.35fr; }
}

@media (max-width: 360px) {
  .setup-grid { grid-template-columns: 88px minmax(0, 1fr); gap: 8px; }
  .setup-copy > p { font-size: .7rem; }
  .manual-key { font-size: .55rem; }
}

/* Mobile and tablet layouts: the illustrated sidebar is desktop-only. */
@media (max-width: 1024px) {
  html, body { height: auto; min-height: 100%; }
  body { overflow-x: hidden; overflow-y: auto; }
  .login-layout { grid-template-columns: 1fr; min-height: 100svh; }
  .login-panel { width: 100%; min-height: 100svh; padding: clamp(24px, 6vw, 48px); }
  .login-content { width: min(100%, 560px); margin: auto; }
  .security-panel { display: none; }

  .setup-grid { display: block; }
  .qr-card { display: none; }
  .desktop-setup-copy { display: none; }
  .mobile-setup-copy { display: inline; }
  .setup-copy { display: flex; flex-direction: column; }
  .setup-copy h2 { order: 1; font-size: 1rem; }
  .setup-copy > p { order: 2; margin-bottom: 12px; font-size: .82rem; line-height: 1.45; }
  .setup-copy .text-link {
    order: 3;
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    margin: 0 0 14px;
    padding: 0 18px;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(90deg, var(--teal-600), var(--teal-500));
    box-shadow: 0 12px 24px rgba(4,145,157,.16);
    font-size: .95rem;
    font-weight: 750;
    text-decoration: none;
  }
  .setup-copy .field-label { order: 4; }
  .setup-copy .manual-key { order: 5; min-height: 68px; height: auto; flex-direction: column; gap: 5px; padding: 9px 14px; font-size: .9rem; }
  .setup-copy .copy-label { position: static; font-size: .8rem; }
  .setup-copy .field-hint { order: 6; font-size: .74rem; }
}

@media (max-width: 520px) {
  .login-panel { padding: 18px 20px; }
  .login-content { width: 100%; padding: 10px 0; }
  .login-logo { width: min(170px, 52vw); margin-bottom: 22px; }
  .login-content h1 { font-size: 1.72rem; line-height: 1.15; }
  .lead { margin: 10px 0 20px; font-size: .88rem; line-height: 1.45; }
  .auth-form { gap: 10px; }
  .auth-form > label { margin-top: 4px; font-size: .88rem; }
  .input-wrap input { height: 48px; }
  .form-row { flex-wrap: wrap; gap: 10px 16px; font-size: .88rem; }
  .button { min-height: 46px; padding: 0 15px; }
  .divider { gap: 12px; margin: 9px 0; font-size: .9rem; }
  .security-caption { justify-content: flex-start; margin-top: 20px; font-size: .72rem; }

  .mfa-content { padding: 6px 0; }
  .mfa-content .login-logo { width: min(155px, 48vw); margin-bottom: 14px; }
  .mfa-content h1 { font-size: 1.5rem; line-height: 1.16; }
  .mfa-content > .lead { margin: 7px 0 13px; font-size: .8rem; line-height: 1.4; }
  .setup-content .login-logo { margin-bottom: 12px; }
  .setup-content h1 { font-size: 1.4rem; }
  .setup-content > .lead { margin-bottom: 12px; }
  .setup-form { gap: 8px; }
  .setup-copy h2 { font-size: .96rem; }
  .setup-copy > p { margin-bottom: 10px; font-size: .78rem; }
  .setup-copy .text-link { min-height: 48px; margin-bottom: 10px; font-size: .92rem; }
  .field-label { margin-bottom: 3px; font-size: .73rem; }
  .manual-key { min-height: 64px; height: auto; padding: 8px 12px; font-size: .84rem; }
  .copy-label { right: 11px; font-size: .75rem; }
  .field-hint { margin-top: 3px; font-size: .63rem; }
  .text-link { margin-top: 4px; font-size: .78rem; }
  .code-input { height: 48px; font-size: 1rem; }
  .mfa-actions { grid-template-columns: .85fr 1.3fr; gap: 8px; margin-top: 7px; }
  .mfa-actions .button { min-height: 42px; padding: 0 9px; font-size: .78rem; }
  .mfa-content .security-caption { margin-top: 9px; }

  .method-content > .lead { margin-bottom: 14px; }
  .method-grid { gap: 10px; }
  .method-card { padding: 12px; }
  .method-heading { grid-template-columns: 38px minmax(0, 1fr); gap: 10px; }
  .method-icon-wrap { width: 38px; height: 38px; }
  .method-icon { width: 22px; height: 22px; }
  .method-card h2 { font-size: .9rem; }
  .method-card p { font-size: .7rem; }
  .method-card .button { min-height: 41px; margin-top: 10px; font-size: .8rem; }
  .logout-link { margin-top: 10px; font-size: .76rem; }
  .verify-content .login-logo { margin-bottom: 18px; }
  .verify-content > .lead { margin-bottom: 18px; }
  .verify-form .recovery-link { margin-top: 10px; }
  .verify-form .mfa-actions { margin-top: 12px; }
}

@media (max-width: 360px) {
  .login-panel { padding-left: 16px; padding-right: 16px; }
  .setup-content { padding: 0; }
  .setup-content .login-logo { width: min(130px, 45vw); margin-bottom: 8px; }
  .setup-content h1 { font-size: 1.25rem; }
  .setup-content > .lead { margin: 5px 0 9px; font-size: .73rem; }
  .setup-content .setup-form { gap: 6px; }
  .setup-copy > p { margin-bottom: 6px; }
  .setup-copy .text-link { min-height: 44px; margin-bottom: 8px; }
  .setup-content .manual-key { min-height: 58px; height: auto; font-size: .75rem; }
  .setup-content .code-input { height: 44px; }
  .setup-content .mfa-actions { grid-template-columns: 1fr; gap: 6px; margin-top: 4px; }
  .setup-content .mfa-actions .button { min-height: 42px; }
  .setup-content .security-caption { display: none; }
  .setup-content .setup-copy .field-hint { display: none; }
  .mfa-actions .button { font-size: .74rem; }
}

@media (max-height: 520px) and (max-width: 1024px) {
  .login-panel { min-height: auto; }
  .login-content { margin: 0 auto; }
}


body.sandbox-banner-present .login-layout {
  padding-top: var(--sandbox-banner-height, 40px);
}

:root {
  --sandbox-banner-height: 40px;
}

.sandbox-environment-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999998;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  min-height: 40px;
  padding: 0.625rem 1rem;
  background-color: #0A8C9F;
  color: #ffffff;
  pointer-events: auto;
}

.sandbox-environment-banner__label {
  position: absolute;
  left: 1rem;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  pointer-events: none;
}

.sandbox-environment-banner__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}

.sandbox-environment-banner__message {
  margin: 0;
  padding: 0 7rem 0 7.5rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: center;
  color: rgba(255, 255, 255, 0.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

body.sandbox-banner-present .login-layout {
  padding-top: var(--sandbox-banner-height, 40px);
}

@media (max-width: 768px) {
  .sandbox-environment-banner {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    min-height: auto;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
  }

  .sandbox-environment-banner__label {
    position: static;
  }

  .sandbox-environment-banner__badge {
    font-size: 0.6875rem;
    padding: 0.125rem 0.55rem;
  }

  .sandbox-environment-banner__message {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    padding: 0;
    text-align: center;
    width: 100%;
    font-size: 0.8125rem;
    line-height: 1.5;
    font-weight: 500;
  }
}