/* FujAA: dedicated login page (login.php). Full-height split: 3D crew scene | form panel. Phones: scene on top.
   Flat (hairline borders, no drop shadows), light and dark themes from the fujaa.css tokens. */
.fj-auth-body { margin: 0; min-height: 100vh; background: var(--fj-bg); }
.fj-auth { display: grid; min-height: 100vh; min-height: 100dvh; }
@media (min-width: 900px) { .fj-auth { grid-template-columns: minmax(0, 1.25fr) minmax(400px, 1fr); } }

/* ---------------------------------------------------------------- scene */
.fj-auth__scene { position: relative; overflow: hidden; isolation: isolate; min-height: 300px; color: #fff;
  background: linear-gradient(180deg, #cfd9e8 0%, #e9eef5 58%, #9aa6b8 58.2%, #8a96aa 100%); }
@media (max-width: 899.98px) { .fj-auth__scene { height: min(46vh, 380px); min-height: 280px; } }
.fj-auth__stage { position: absolute; inset: 0; z-index: 1; }
.fj-auth__stage canvas { display: block; width: 100% !important; height: 100% !important; }
.fj-auth__poster { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; }
.fj-auth__poster img { width: 120px; height: auto; opacity: .35; }
.fj-auth__stage.is-3d + .fj-auth__poster { display: none; }
.fj-auth__caption { position: absolute; z-index: 2; left: 0; right: 0; top: 0; padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem) 3.5rem; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 15, 36, .72), rgba(5, 15, 36, 0)); }
.fj-auth__tag { margin: 0 0 .35rem; font: 700 .72rem/1 var(--fj-font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--fj-gold-400, #e7c25a); }
.fj-auth__quote { margin: 0; max-width: 34ch; font: 600 clamp(1rem, 1.6vw, 1.25rem)/1.4 var(--fj-font-display); color: #fff; }
@media (max-width: 899.98px) { .fj-auth__caption { display: none; } }

/* ---------------------------------------------------------------- panel */
.fj-auth__panel { display: flex; flex-direction: column; gap: 1.5rem; padding: clamp(1.25rem, 4vw, 3rem) clamp(16px, 5vw, 4rem); background: var(--fj-surface); border-left: 1px solid var(--fj-line); }
@media (max-width: 899.98px) { .fj-auth__panel { border-left: 0; border-top: 1px solid var(--fj-line); } }
.fj-auth__brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--fj-text); text-decoration: none; font: 700 1rem/1.15 var(--fj-font-display); }
.fj-auth__brand img { width: 44px; height: 44px; }
.fj-auth__brand small { display: block; font: 600 .7rem/1.4 var(--fj-font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--fj-muted); }
.fj-auth__card { width: 100%; max-width: 420px; margin: auto 0; }
@media (min-width: 900px) { .fj-auth__card { margin: auto; } }
.fj-auth .fj-auth__title { margin: 0 0 .4rem; font: 800 clamp(1.55rem, 2.3vw, 2.1rem)/1.15 var(--fj-font-display); color: var(--fj-text); text-wrap: balance; }
.fj-auth__lead { margin: 0 0 1.4rem; color: var(--fj-muted); line-height: 1.55; }
.fj-auth .fj-alert { margin-bottom: 1rem; }
.fj-auth__form { display: grid; gap: 1rem; }
.fj-auth__form input:not([type="checkbox"]) { width: 100%; min-height: 48px; font-size: 1rem; border-radius: var(--fj-r-sm); }
.fj-auth__pw { position: relative; }
.fj-auth__pw input { padding-right: 3.2rem; }
.fj-auth__eye { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); display: grid; place-items: center; width: 42px; height: 40px; border: 0; border-radius: var(--fj-r-sm); background: transparent; color: var(--fj-muted); cursor: pointer; }
.fj-auth__eye:hover { color: var(--fj-primary); background: var(--fj-surface-2); }
.fj-auth__eye:focus-visible { outline: 3px solid var(--fj-accent); outline-offset: 1px; }
.fj-auth__eye svg { width: 22px; height: 22px; }
.fj-auth__eye svg.fj-auth__eye-shut, .fj-auth__eye[aria-pressed="true"] svg.fj-auth__eye-open { display: none; }
.fj-auth__eye[aria-pressed="true"] svg.fj-auth__eye-shut { display: block; }
.fj-auth__caps { margin: .3rem 0 0; color: var(--fj-warning, #a35b00); font-weight: 600; }
.fj-auth__submit { min-height: 50px; margin-top: .3rem; border-radius: var(--fj-r-sm); font-size: 1rem; }
.fj-auth__links { margin: 0; text-align: center; font-size: var(--fj-fs-sm); }
.fj-auth__links a, .fj-auth__foot a { color: var(--fj-primary); font-weight: 600; }
.fj-auth__foot { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: center; justify-content: space-between; font-size: var(--fj-fs-sm); color: var(--fj-muted); }
.fj-auth__foot p { margin: 0; }
.fj-auth__back { text-decoration: none; }
.fj-auth__back:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- shared by reset-password and existing-application pages */
.fj-btn--line { --b-bg: transparent; --b-ink: var(--fj-primary); --b-line: var(--fj-line); border-radius: var(--fj-r-sm); }
.fj-btn--line:hover { --b-line: var(--fj-primary); }
.fj-auth__steps { list-style: none; display: flex; gap: .4rem; margin: 0 0 1.4rem; padding: 0; counter-reset: none; }
.fj-auth__steps li { flex: 1; display: flex; align-items: center; gap: .45rem; padding-top: .55rem; border-top: 3px solid var(--fj-line); font: 600 .75rem/1.2 var(--fj-font-body); color: var(--fj-muted); }
.fj-auth__steps li span { display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: var(--fj-r-sm); background: var(--fj-surface-2); color: var(--fj-muted); font-size: .72rem; flex: none; }
.fj-auth__steps li.is-current { border-top-color: var(--fj-accent); color: var(--fj-text); }
.fj-auth__steps li.is-current span { background: var(--fj-accent); color: var(--fj-accent-ink, #1a1300); }
.fj-auth__steps li.is-done { border-top-color: var(--fj-primary); color: var(--fj-text); }
.fj-auth__steps li.is-done span { background: var(--fj-primary); color: #fff; }
@media (max-width: 420px) { .fj-auth__steps li { font-size: 0; gap: 0; } .fj-auth__steps li span { font-size: .72rem; } }
.fj-auth .fj-alert--success { margin-bottom: 1rem; }
.fj-auth__otp { letter-spacing: .5em; font: 700 1.35rem/1 ui-monospace, Consolas, monospace; text-align: center; text-transform: uppercase; }
.fj-auth__meter { display: flex; align-items: center; gap: .6rem; margin-top: .45rem; font-size: var(--fj-fs-xs); color: var(--fj-muted); }
.fj-auth__meter i { flex: 1; height: 4px; border-radius: 2px; background: var(--fj-line); position: relative; overflow: hidden; }
.fj-auth__meter i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; background: var(--fj-danger, #c0392b); transition: width .25s, background .25s; }
.fj-auth__meter[data-level="1"] i::after { width: 25%; }
.fj-auth__meter[data-level="2"] i::after { width: 50%; background: #d4a62a; }
.fj-auth__meter[data-level="3"] i::after { width: 75%; background: #4f9d4f; }
.fj-auth__meter[data-level="4"] i::after { width: 100%; background: #2e7d32; }
.fj-auth__meter span { min-width: 4.5em; text-align: right; }
.fj-auth__badge { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 .9rem; padding: .3rem .65rem; border-radius: var(--fj-r-sm); background: color-mix(in srgb, #2e7d32 12%, var(--fj-surface)); color: #2e7d32; font: 700 .75rem/1 var(--fj-font-body); letter-spacing: .04em; text-transform: uppercase; }
.fj-auth__badge svg { width: 16px; height: 16px; }
.fj-auth__matches { margin: 0 0 1.2rem; border: 1px solid var(--fj-line); border-radius: var(--fj-r-md); overflow: hidden; }
.fj-auth__matches-title { margin: 0; padding: .65rem 1rem; background: var(--fj-surface-2); font: 700 .72rem/1.2 var(--fj-font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--fj-muted); }
.fj-auth__matches dl { margin: 0; }
.fj-auth__matches dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; border-top: 1px solid var(--fj-line); }
.fj-auth__matches dt { color: var(--fj-muted); font-size: var(--fj-fs-sm); }
.fj-auth__matches dd { margin: 0; font: 600 .95rem/1.3 ui-monospace, Consolas, monospace; color: var(--fj-text); }
.fj-auth__actions { display: grid; gap: .6rem; margin-bottom: 1.4rem; }
.fj-auth__actions .fj-btn { min-height: 48px; }
.fj-auth__next { margin: 0 0 1.2rem; padding-left: 1.2rem; display: grid; gap: .45rem; color: var(--fj-muted); font-size: var(--fj-fs-sm); line-height: 1.5; }
.fj-auth__next strong { color: var(--fj-text); }
.fj-auth__next a { color: var(--fj-primary); font-weight: 600; }