:root {
    --auth-navy: #0f144f;
    --auth-navy-2: #202b78;
    --auth-red: #db0914;
    --auth-ink: #17213d;
    --auth-muted: #667085;
    --auth-line: #dbe2ec;
    --auth-soft: #f4f7fb;
    --auth-success: #16794d;
    --auth-danger: #a9252f;
}

* { box-sizing: border-box; }

body.xp-auth {
    min-height: 100vh;
    margin: 0;
    padding: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--auth-ink);
    background:
        radial-gradient(circle at 8% 10%, rgba(80, 100, 205, .15), transparent 30%),
        radial-gradient(circle at 92% 86%, rgba(219, 9, 20, .09), transparent 25%),
        linear-gradient(145deg, #eef2f8 0%, #f8fafc 52%, #edf1f7 100%);
    font-family: Inter, Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.xp-auth::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .34;
    background-image: linear-gradient(rgba(15, 20, 79, .04) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(15, 20, 79, .04) 1px, transparent 1px);
    background-size: 36px 36px;
    -webkit-mask-image: linear-gradient(to bottom right, #000, transparent 67%);
    mask-image: linear-gradient(to bottom right, #000, transparent 67%);
}

body.xp-auth > .container {
    position: relative;
    z-index: 1;
    width: min(1080px, 100%);
    max-width: 1080px;
    min-height: 650px;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(360px, .92fr) minmax(420px, 1.08fr);
    overflow: hidden;
    border: 1px solid rgba(211, 220, 233, .9);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(19, 31, 68, .18), 0 3px 12px rgba(19, 31, 68, .07);
}

body.xp-auth .image-wapper,
body.xp-auth .form-wapper {
    max-width: none;
    min-width: 0;
    padding: 0;
}

body.xp-auth .image-wapper {
    isolation: isolate;
    position: relative;
    display: flex;
    min-height: 650px;
    color: #fff;
    background-color: var(--auth-navy);
    background-size: cover;
    background-position: center;
}

body.xp-auth .image-wapper::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(155deg, rgb(8 13 62) 5%, rgb(20 29 99 / 37%) 54%, rgb(42 28 94 / 0%) 100%), linear-gradient(to top, rgba(8, 13, 62, .3), rgba(8, 13, 62, .3));
}

body.xp-auth .image-wapper::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 330px;
    height: 330px;
    right: -170px;
    bottom: -155px;
    border: 64px solid rgba(255,255,255,.07);
    border-radius: 50%;
}

.xp-auth-brand {
    width: 100%;
    min-height: 100%;
    padding: 46px 44px 38px;
    display: flex;
    flex-direction: column;
}

.xp-auth-brand-logo {
    width: 170px;
    height: 66px;
    object-fit: contain;
    object-position: left center;
    filter: brightness(0) invert(1);
}

.xp-auth-brand-main { margin: auto 0; }
.xp-auth-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    color: #d8ddff;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.xp-auth-kicker::before {
    content: "";
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: var(--auth-red);
}
.xp-auth-brand h1,
body.xp-auth .image-wapper h1 {
    max-width: 420px;
    margin: 0;
    color: #fff;
    font-family: inherit;
    font-size: clamp(2rem, 3.3vw, 3rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.035em;
    text-shadow: none;
}
.xp-auth-brand-copy {
    max-width: 390px;
    margin: 20px 0 0;
    color: rgba(255,255,255,.74);
    font-size: .94rem;
    line-height: 1.7;
}
.xp-auth-assurances {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
    margin-top: 26px;
}
.xp-auth-assurance {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 11px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 10px;
    color: rgba(255,255,255,.88);
    background: rgba(255,255,255,.07);
    font-size: .72rem;
    font-weight: 700;
}
.xp-auth-assurance i { color: #9eafff; }
.xp-auth-brand-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.55);
    font-size: .7rem;
}
.xp-auth-brand-foot i { color: #62d5a1; }

body.xp-auth .form-wapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px clamp(34px, 5vw, 66px);
    background: #fff;
}
.xp-auth-form-logo {
    display: block;
    width: 150px;
    height: 64px;
    margin: 0 0 24px;
    object-fit: contain;
    object-position: left center;
}
.xp-auth-form-kicker {
    margin-bottom: 8px;
    color: var(--auth-red);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
body.xp-auth .form-header { margin-bottom: 28px; }
body.xp-auth .form-header h2 {
    margin: 0;
    color: var(--auth-ink);
    font-size: clamp(1.65rem, 2.5vw, 2.1rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.025em;
}
body.xp-auth .form-header p {
    margin: 10px 0 0;
    color: var(--auth-muted);
    font-size: .9rem;
    line-height: 1.6;
}
body.xp-auth .form-body { margin: 0; }
body.xp-auth .input-wrapper { position: relative; margin-bottom: 18px; }
body.xp-auth .input-wrapper > label,
body.xp-auth .form-group > label {
    display: block;
    margin: 0 0 7px;
    color: #34405d;
    font-size: .78rem;
    font-weight: 750;
}
body.xp-auth .input-wrapper > input,
body.xp-auth .form-control {
    width: 100%;
    height: 50px;
    padding: 0 14px;
    border: 1px solid var(--auth-line);
    border-radius: 10px;
    color: var(--auth-ink);
    background: #fff;
    font: inherit;
    font-size: .9rem;
    transition: border-color .16s, box-shadow .16s, background .16s;
}
body.xp-auth .input-wrapper > input:hover,
body.xp-auth .form-control:hover { border-color: #b8c3d4; }
body.xp-auth .input-wrapper > input:focus,
body.xp-auth .form-control:focus,
body.xp-auth .auth-otp-digit:focus {
    outline: 0;
    border-color: #536bc5;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(59, 79, 167, .12);
}
body.xp-auth .input-wrapper small {
    display: block;
    margin-top: 7px;
    color: var(--auth-muted);
    font-size: .72rem;
    line-height: 1.45;
}
body.xp-auth .form-body button[type="submit"],
body.xp-auth .xp-auth-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    padding: 12px 18px;
    border: 1px solid var(--auth-navy);
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--auth-navy), var(--auth-navy-2));
    box-shadow: 0 9px 22px rgba(15, 20, 79, .2);
    font: inherit;
    font-size: .86rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, filter .15s;
}
body.xp-auth .form-body button[type="submit"]:hover,
body.xp-auth .xp-auth-primary:hover {
    transform: translateY(-1px);
    color: #fff;
    filter: brightness(1.08);
    box-shadow: 0 12px 26px rgba(15, 20, 79, .25);
}
body.xp-auth .form-body button[type="submit"]:focus {
    outline: 3px solid rgba(49, 94, 234, .24);
    outline-offset: 2px;
}
.xp-auth-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 9px 14px;
    border: 1px solid var(--auth-line);
    border-radius: 9px;
    color: var(--auth-navy);
    background: #fff;
    font-size: .78rem;
    font-weight: 750;
}
.xp-auth-secondary:hover { color: var(--auth-navy); border-color: #aab8cf; background: #f8faff; text-decoration: none; }
body.xp-auth .form-footer {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #edf0f5;
}
body.xp-auth .form-footer p {
    margin: 6px 0;
    color: var(--auth-muted);
    font-size: .78rem;
}
body.xp-auth a { color: var(--auth-navy); font-weight: 750; }
body.xp-auth a:hover { color: var(--auth-red); text-decoration: none; }
.xp-auth-link-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.xp-auth-link-row a { display: inline-flex; align-items: center; gap: 7px; }
.xp-auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    color: #98a2b3;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.xp-auth-divider::before,.xp-auth-divider::after { content: ""; height: 1px; flex: 1; background: #e7ebf1; }
.xp-auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 18px;
    padding: 12px 13px;
    border: 1px solid;
    border-radius: 10px;
    font-size: .78rem;
    line-height: 1.5;
}
.xp-auth-alert i { margin-top: 2px; }
.xp-auth-alert-danger { color: #842029; border-color: #f0b9bd; background: #fff2f3; }
.xp-auth-alert-success { color: #14633f; border-color: #a9dfc5; background: #effaf5; }
.xp-auth-security-note {
    display: flex;
    gap: 9px;
    margin-top: 16px;
    color: #7a8497;
    font-size: .7rem;
    line-height: 1.45;
}
.xp-auth-security-note i { margin-top: 2px; color: #5870c7; }

body.xp-auth .auth-otp {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}
body.xp-auth .auth-otp-digit {
    width: 100%;
    min-width: 0;
    height: 54px;
    padding: 0;
    border: 1px solid var(--auth-line);
    border-radius: 10px;
    text-align: center;
    color: var(--auth-ink);
    background: #f9fafc;
    font: 800 1.15rem/1 "SFMono-Regular", Consolas, monospace;
}
body.xp-auth .auth-otp-digit.is-filled { border-color: #536bc5; color: var(--auth-navy); background: #f1f4ff; }
.xp-auth-qr {
    width: fit-content;
    margin: 0 auto 20px;
    padding: 14px;
    border: 1px solid var(--auth-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(18, 31, 67, .08);
}
.xp-auth-qr img { display: block; width: 184px; height: 184px; }
.xp-auth-steps { counter-reset: auth-step; margin: 0 0 22px; padding: 0; list-style: none; }
.xp-auth-steps li { position: relative; min-height: 30px; margin: 7px 0; padding-left: 38px; color: var(--auth-muted); font-size: .76rem; line-height: 1.45; }
.xp-auth-steps li::before {
    counter-increment: auth-step;
    content: counter(auth-step);
    position: absolute;
    left: 0;
    top: -2px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    color: var(--auth-navy);
    background: #edf1ff;
    font-weight: 800;
}
body.xp-auth progress {
    display: block;
    width: 100%;
    height: 6px;
    margin: 9px 0 0;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    background: #edf0f4;
}
body.xp-auth progress::-webkit-progress-bar { background:#edf0f4; }
body.xp-auth progress::-webkit-progress-value { background:linear-gradient(90deg,#db0914,#e5a21b,#1c9b68); }
body.xp-auth progress::-moz-progress-bar { background:linear-gradient(90deg,#db0914,#e5a21b,#1c9b68); }

/* Candidate access-code journey */
body.xp-candidate-auth {
    min-height: 100vh;
    margin: 0;
    color: var(--auth-ink);
    background: linear-gradient(145deg,#eef2f8,#f9fafc);
    font-family: Inter, Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.xp-candidate-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px clamp(22px,5vw,70px);
    border-bottom: 1px solid #e1e6ef;
    background: rgba(255,255,255,.9);
}
.xp-candidate-top img { width: 145px; height: 55px; object-fit: contain; }
.xp-candidate-date { color: var(--auth-muted); font-size: .75rem; font-weight: 700; }
.xp-candidate-main {
    width: min(1080px, calc(100% - 40px));
    min-height: calc(100vh - 175px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr .88fr;
    align-items: center;
    gap: clamp(35px,7vw,90px);
    padding: 48px 0;
}
.xp-candidate-intro .xp-auth-kicker { color:#5264ab; }
.xp-candidate-intro h1 { margin:0; color:var(--auth-navy); font-size:clamp(2.2rem,4.5vw,4rem); line-height:1.02; font-weight:850; letter-spacing:-.045em; }
.xp-candidate-intro p { max-width:530px; margin:20px 0 0; color:var(--auth-muted); font-size:1rem; line-height:1.75; }
.xp-candidate-points { display:grid; gap:10px; margin-top:26px; }
.xp-candidate-point { display:flex; align-items:center; gap:10px; color:#4f5b73; font-size:.8rem; font-weight:700; }
.xp-candidate-point i { display:grid; place-items:center; width:29px; height:29px; border-radius:8px; color:#fff; background:var(--auth-navy); }
.xp-candidate-card {
    padding: clamp(28px,4vw,44px);
    border:1px solid #dce3ee;
    border-radius:20px;
    background:#fff;
    box-shadow:0 22px 60px rgba(20,33,71,.14);
}
.xp-candidate-card-icon { display:grid; place-items:center; width:48px; height:48px; margin-bottom:20px; border-radius:13px; color:#fff; background:linear-gradient(135deg,var(--auth-navy),#4658b3); box-shadow:0 8px 20px rgba(15,20,79,.2); }
.xp-candidate-card h2 { margin:0; color:var(--auth-ink); font-size:1.55rem; font-weight:800; }
.xp-candidate-card > p { margin:8px 0 24px; color:var(--auth-muted); font-size:.84rem; line-height:1.55; }
.xp-access-code-label { display:block; margin:0 0 8px; color:#34405d; font-size:.78rem; font-weight:750; }
.xp-access-code { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:7px; }
.xp-access-code-digit {
    width:100%;
    min-width:0;
    height:58px;
    padding:0;
    border:1px solid var(--auth-line);
    border-radius:10px;
    color:var(--auth-ink);
    background:#f9fafc;
    text-align:center;
    text-transform:uppercase;
    font:800 1.1rem/1 "SFMono-Regular",Consolas,monospace;
    transition:border-color .16s,box-shadow .16s,background .16s;
}
.xp-access-code-digit:hover { border-color:#b8c3d4; }
.xp-access-code-digit:focus { outline:0; border-color:#536bc5; background:#fff; box-shadow:0 0 0 4px rgba(59,79,167,.12); }
.xp-access-code-digit.is-filled { border-color:#536bc5; color:var(--auth-navy); background:#f1f4ff; }
.xp-candidate-card .btn-primary { width:100%; min-height:50px; border:0; border-radius:10px; background:linear-gradient(135deg,var(--auth-navy),var(--auth-navy-2)); font-weight:800; box-shadow:0 9px 22px rgba(15,20,79,.2); }
.xp-candidate-help { display:flex; align-items:center; justify-content:center; gap:7px; margin-top:17px; color:var(--auth-navy); font-size:.76rem; font-weight:750; }
.xp-candidate-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px clamp(22px,5vw,70px); border-top:1px solid #e1e6ef; color:#7b8597; background:#fff; font-size:.7rem; }

@media (max-width: 820px) {
    body.xp-auth { padding: 18px; align-items: flex-start; }
    body.xp-auth > .container { grid-template-columns: 1fr; min-height: 0; margin: 12px 0; border-radius: 18px; }
    body.xp-auth .image-wapper { min-height: 245px; }
    .xp-auth-brand { padding: 30px; }
    .xp-auth-brand-main { margin: 30px 0 22px; }
    .xp-auth-brand h1, body.xp-auth .image-wapper h1 { font-size: 2rem; }
    .xp-auth-brand-copy { display:none; }
    .xp-auth-assurances { margin-top:18px; }
    body.xp-auth .form-wapper { padding: 38px 30px; }
    .xp-candidate-main { grid-template-columns:1fr; padding:38px 0; }
    .xp-candidate-intro { text-align:center; }
    .xp-candidate-intro p { margin-left:auto; margin-right:auto; }
    .xp-candidate-points { width:fit-content; margin-left:auto; margin-right:auto; text-align:left; }
}
@media (max-width: 480px) {
    body.xp-auth { padding: 0; background:#fff; }
    body.xp-auth > .container { margin:0; border:0; border-radius:0; box-shadow:none; }
    body.xp-auth .image-wapper { min-height:205px; }
    .xp-auth-brand { padding:24px; }
    .xp-auth-brand-main { margin:20px 0 12px; }
    .xp-auth-assurances,.xp-auth-brand-foot { display:none; }
    body.xp-auth .form-wapper { padding:32px 24px 38px; }
    body.xp-auth .auth-otp { gap:5px; }
    body.xp-auth .auth-otp-digit { height:48px; border-radius:8px; }
    .xp-candidate-top,.xp-candidate-footer { padding-left:18px; padding-right:18px; }
    .xp-candidate-main { width:calc(100% - 28px); }
    .xp-access-code { gap:5px; }
    .xp-access-code-digit { height:48px; border-radius:8px; font-size:1rem; }
    .xp-candidate-footer { align-items:flex-start; flex-direction:column; }
}

@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; }
}