/* Sign in, create account, forgot / reset password (boards: Login, LoginCheckout, Forgot).
   Full-viewport split screen without the site header and footer. */

.ax { min-height: 100vh; display: flex; flex-wrap: wrap; background: #F6F8FA; color: #14212B; font-size: 16px; line-height: 1.55; }

/* Brand panel */
.ax-brand { flex: 1 1 480px; min-width: 0; background: #0F2433; color: #fff; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 40px 48px; }
.ax-ring { position: absolute; width: 620px; height: 620px; right: -240px; bottom: -220px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 210deg, #FFD21F, #F39A2B, #E0245E, #C13FD6, #3B5BDB, #19C6D9, #0E9F8E, #4CB848, #A6D23A, #FFD21F);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 46px), #000 calc(100% - 45px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 46px), #000 calc(100% - 45px)); opacity: .9; }
.ax-logo { position: relative; align-self: flex-start; background: #fff; border-radius: 12px; padding: 10px 12px; display: flex; }
.ax-logo img { height: 44px; width: auto; display: block; max-width: none; }
.ax-mid { position: relative; display: flex; flex-direction: column; gap: 22px; max-width: 460px; }
.ax-mid--forgot { gap: 18px; max-width: 440px; }
.ax-brand .ax-title { margin: 0; font-family: Sora, sans-serif; font-size: 38px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: #fff; }
.ax-mid--forgot .ax-title { font-size: 36px; }
.ax-lead { margin: 0; color: #C5D5E1; font-size: 16.5px; }
.ax-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 16px; color: #DCE7EF; }
.ax-list li { display: flex; gap: 12px; align-items: center; }
.ax-tile { width: 32px; height: 32px; border-radius: 9px; color: #0F2433; display: flex; align-items: center; justify-content: center; flex: none; }
.ax-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 15.5px; color: #DCE7EF; }
.ax-steps li { display: flex; gap: 12px; align-items: center; }
.ax-steps .ax-n { width: 30px; height: 30px; border-radius: 50%; background: #23394A; color: #C5D5E1; font: 700 13px Sora, sans-serif;
  display: flex; align-items: center; justify-content: center; flex: none; }
.ax-steps .is-done .ax-n { background: #4CB848; color: #0F2433; }
.ax-steps .is-current .ax-n { background: #FFD21F; color: #0F2433; }
.ax-steps .is-current .ax-l { font-weight: 600; }
.ax-qr { position: relative; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.ax-qr img { width: 76px; height: 76px; border-radius: 10px; background: #fff; padding: 4px; display: block; }
.ax-qr span { font-size: 14px; color: #C5D5E1; max-width: 220px; }
.ax-brand-help { position: relative; font-size: 14px; color: #C5D5E1; }
.ax-brand-help a { color: inherit; text-decoration: none; }

/* Form panel */
.ax-main { flex: 1 1 520px; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.ax-card { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 22px; }
.ax-tabs { display: flex; background: #E9EEF2; border-radius: 10px; padding: 4px; gap: 4px; }
.ax-tabs a { flex: 1; text-align: center; font: 600 15px var(--font-body); border-radius: 7px; padding: 10px; color: #4B5965; text-decoration: none; line-height: 1.55; }
.ax-tabs a[aria-current="page"] { background: #fff; color: #14212B; }
.ax-tabs a:hover { color: #14212B; }
.ax-form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.ax-form--tight { gap: 14px; }
.ax-head { display: flex; flex-direction: column; gap: 4px; }
.ax-card .ax-h { margin: 0; font-family: Sora, sans-serif; font-size: 28px; font-weight: 700; line-height: 1.2; color: #14212B; }
.ax-sub { margin: 0; color: #4B5965; }
.ax-notice { display: flex; gap: 10px; align-items: center; background: #FFF8D6; border: 1px solid #F3E2A2; border-radius: 12px; padding: 10px 12px; font-size: 14px; color: #5C4A10; }
.ax-notice svg { flex: none; }
.ax-field { display: flex; flex-direction: column; gap: 6px; }
.ax-field label, .ax-label { font-size: 14px; font-weight: 600; color: #14212B; }
.ax-field label .ax-opt { font-weight: 400; color: #4B5965; }
.ax-row { display: flex; justify-content: space-between; gap: 12px; }
.ax-row a { font-size: 14px; font-weight: 500; }
.ax-input { width: 100%; box-sizing: border-box; font: 15px var(--font-body); color: #14212B; border: 1px solid #CBD5DE; border-radius: 8px; padding: 12px; background: #fff; line-height: 1.55; }
.ax-input:focus { border-color: #2384BA; outline: 3px solid rgba(35, 132, 186, .25); outline-offset: 0; }
.ax-pw { display: flex; align-items: center; border: 1px solid #CBD5DE; border-radius: 8px; background: #fff; padding-right: 6px; }
.ax-pw:focus-within { border-color: #2384BA; outline: 3px solid rgba(35, 132, 186, .25); }
.ax-pw .ax-input { flex: 1; min-width: 0; border: 0; outline: none; }
.ax-pw .ax-input:focus { outline: none; }
.ax-pw button { font: 600 13px var(--font-body); color: #1B6A96; background: transparent; border: 0; padding: 8px; cursor: pointer; }
.ax-hint { font-size: 13px; color: #4B5965; }
.ax-check { display: flex; gap: 10px; align-items: center; font-size: 14px; margin: 0; }
.ax-check--top { align-items: flex-start; }
.ax-check input { width: 18px; height: 18px; accent-color: #1B6A96; margin: 0; flex: none; }
.ax-check--top input { margin-top: 2px; }
.ax-btn { display: block; width: 100%; box-sizing: border-box; background: #1B6A96; color: #fff !important; text-decoration: none; text-align: center;
  font: 600 16px var(--font-body); line-height: 1.55; border: 0; border-radius: 8px; padding: 13px; cursor: pointer; }
.ax-btn:hover { background: #155A80; }
.ax-note { margin: 0; text-align: center; font-size: 14px; color: #4B5965; }
.ax-note a { font-weight: 600; color: #1B6A96; text-decoration: underline; }
.ax-back { text-align: center; font-size: 14.5px; font-weight: 600; text-decoration: none; }
.ax-alert { margin: 0; border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.ax-alert--error { background: #FDE8EF; border: 1px solid #F3C5D3; color: #8C0E33; }
.ax-alert--ok { background: #E8F6E4; border: 1px solid #BFE3B5; color: #1F5E14; }
.ax-recaptcha { min-height: 78px; }

/* Forgot states */
.ax-icon { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; flex: none; }
.ax-icon--lock { background: #E0F7F8; color: #0B6E6E; }
.ax-icon--mail { background: #FFF8D6; color: #8A6100; }
.ax-icon--key { background: #F6E8FB; color: #8E2BA8; }
.ax-done-icon { width: 64px; height: 64px; border-radius: 50%; background: #E8F6E4; color: #1F7A4D; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 8px #F3FBF0; }
.ax-stack { display: flex; flex-direction: column; gap: 16px; }
.ax-stack--start { align-items: flex-start; }
.ax-stack--start .ax-btn { align-self: stretch; }
.ax-box { background: #fff; border: 1px solid #E2E8EE; border-radius: 12px; padding: 14px 16px; font-size: 14.5px; color: #4B5965; display: flex; flex-direction: column; gap: 6px; }
.ax-box strong { color: #14212B; }
.ax-links { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; line-height: 1.55; }
.ax-links form { margin: 0; }
.ax-link-btn { font: 600 14.5px var(--font-body); color: #1B6A96; background: transparent; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
.ax-reqs { margin: 0; padding: 12px 14px; list-style: none; display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid #E2E8EE; border-radius: 10px; font-size: 14px; }
.ax-reqs li { display: flex; gap: 8px; align-items: center; color: #4B5965; }
.ax-reqs li .ok { display: none; }
.ax-reqs li.is-met { color: #2F7D1F; }
.ax-reqs li.is-met .ok { display: block; }
.ax-reqs li.is-met .no { display: none; }
.ax-reqs .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }