/* Authentication shell inspired by the supplied split-screen reference. */
:is(.sps-portal-login, .sps-portal-register, .sps-portal-setup) {
    --sps-auth-ink: #10243e;
    --sps-auth-muted: #607286;
    --sps-auth-line: #d4e0eb;
    --sps-auth-blue: #1769d2;
    --sps-auth-blue-dark: #0b4d95;
    --sps-auth-cyan: #0b8ca8;
    --sps-auth-pale: #edf6fb;
    min-height: 100svh;
    overflow: hidden;
    background:
        radial-gradient(circle at 7% 9%, rgba(60, 171, 201, .24), transparent 27rem),
        radial-gradient(circle at 93% 14%, rgba(23, 105, 210, .16), transparent 31rem),
        linear-gradient(135deg, #eaf6f8 0%, #eff6fb 46%, #dcecf7 100%) !important;
}

:is(.sps-portal-login, .sps-portal-register, .sps-portal-setup)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .42;
    background-image:
        linear-gradient(rgba(40, 88, 125, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(40, 88, 125, .04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, #000, transparent 82%);
}

:is(.sps-portal-login, .sps-portal-register, .sps-portal-setup) .sps-auth-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100svh;
    padding: clamp(18px, 3vw, 34px);
}

:is(.sps-portal-login, .sps-portal-register, .sps-portal-setup) .sps-auth-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 450px);
    grid-template-rows: auto;
    align-items: center;
    gap: 20px clamp(30px, 4vw, 54px);
    width: min(1160px, 100%) !important;
    min-height: min(650px, calc(100svh - 44px));
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.sps-auth-showcase {
    position: relative;
    display: grid;
    align-content: center;
    gap: 18px;
    min-width: 0;
    min-height: 520px;
    padding: clamp(22px, 3.2vw, 42px);
    overflow: hidden;
}

.sps-auth-showcase::before {
    content: "";
    position: absolute;
    inset: 8% 2% 2% 4%;
    z-index: -1;
    border: 1px solid rgba(255, 255, 255, .48);
    border-radius: 44% 56% 48% 52% / 42% 38% 62% 58%;
    background: rgba(255, 255, 255, .19);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .48);
    backdrop-filter: blur(8px);
    transform: rotate(-2deg);
}

.sps-auth-orb { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; filter: blur(1px); }
.sps-auth-orb-one { top: 8%; left: 0; width: 180px; height: 180px; background: rgba(24, 155, 186, .14); animation: spsAuthFloat 9s ease-in-out infinite; }
.sps-auth-orb-two { right: 5%; bottom: 12%; width: 130px; height: 130px; border: 24px solid rgba(23, 105, 210, .09); animation: spsAuthFloat 11s ease-in-out infinite reverse; }

.sps-login-brand {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 13px;
    width: max-content;
    max-width: 100%;
    color: var(--sps-auth-ink) !important;
    text-decoration: none;
}

.sps-login-mark {
    display: grid;
    flex: 0 0 54px;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 1px solid rgba(23, 105, 210, .22);
    border-radius: 16px;
    background: rgba(255, 255, 255, .72);
    color: var(--sps-auth-blue-dark);
    font-size: 17px;
    font-weight: 850;
    letter-spacing: -.04em;
    box-shadow: 0 12px 28px rgba(28, 74, 110, .12);
    backdrop-filter: blur(12px);
}

.sps-login-brand strong, .sps-login-brand small { display: block; }
.sps-login-brand strong { color: var(--sps-auth-ink) !important; font-size: 17px; font-weight: 800; letter-spacing: -.015em; }
.sps-login-brand small { margin-top: 2px; color: #5d7185 !important; font-size: 11px; }

.sps-auth-showcase-copy { position: relative; z-index: 2; display: grid; gap: 10px; max-width: 650px; }
.sps-auth-eyebrow { width: max-content; max-width: 100%; padding: 6px 10px; border: 1px solid rgba(23, 105, 210, .18); border-radius: 999px; background: rgba(255, 255, 255, .52); color: var(--sps-auth-blue-dark); font-size: 9.5px; font-weight: 820; letter-spacing: .13em; text-transform: uppercase; }
.sps-auth-showcase-copy h2 { max-width: 590px; margin: 0 !important; color: var(--sps-auth-ink) !important; font-size: clamp(34px, 4vw, 50px) !important; line-height: 1.04 !important; font-weight: 820 !important; letter-spacing: -.04em !important; }
.sps-auth-showcase-copy p { max-width: 580px; margin: 0 !important; color: #506a80 !important; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.7; }

.sps-auth-illustration {
    position: relative;
    z-index: 1;
    justify-self: center;
    width: min(410px, 72%);
    max-height: 225px;
    object-fit: contain;
    filter: drop-shadow(0 24px 30px rgba(25, 71, 107, .18));
    animation: spsAuthFloat 8s ease-in-out infinite;
}

.sps-auth-confidence { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 620px; }
.sps-auth-confidence span { display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 44px; padding: 8px 10px; border: 1px solid rgba(23, 105, 210, .14); border-radius: 12px; background: rgba(255, 255, 255, .48); color: #34526d; font-size: 10.5px; font-weight: 680; }
.sps-auth-confidence b { display: grid; flex: 0 0 25px; place-items: center; width: 25px; height: 25px; border-radius: 8px; background: #1769d2; color: #fff; font-size: 9px; }

.sps-auth-panel {
    position: relative;
    display: grid;
    align-content: center;
    gap: 15px;
    width: 100%;
    min-width: 0;
    padding: clamp(24px, 2.8vw, 36px) !important;
    border: 1px solid rgba(255, 255, 255, .78) !important;
    border-radius: 26px !important;
    background: rgba(255, 255, 255, .86) !important;
    box-shadow: 0 26px 70px rgba(28, 67, 103, .17), inset 0 1px 0 #fff !important;
    backdrop-filter: blur(22px) saturate(120%);
}

.sps-auth-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(circle at 100% 0, rgba(55, 170, 192, .10), transparent 35%); pointer-events: none; }
.sps-auth-panel-head { display: grid; justify-items: center; gap: 6px; text-align: center; }
.sps-auth-panel-icon { position: relative; display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 2px; border: 1px solid #c6dcee; border-radius: 13px; background: linear-gradient(145deg, #f9fdff, #e7f3fa); color: var(--sps-auth-blue-dark); box-shadow: 0 9px 22px rgba(28, 74, 110, .09); }
.sps-auth-panel-icon::before { content: "→"; font-size: 21px; font-weight: 780; }
.sps-auth-panel-icon--register::before { content: "+"; }
.sps-auth-panel-icon--setup::before { content: "✓"; }
.sps-auth-panel-icon > span { display: none; }
.sps-auth-panel .sps-kicker { color: var(--sps-auth-blue-dark) !important; font-size: 9px !important; letter-spacing: .14em !important; text-transform: uppercase; }
.sps-auth-panel-head h1 { margin: 0 !important; color: var(--sps-auth-ink) !important; font-size: clamp(25px, 2.5vw, 32px) !important; line-height: 1.12 !important; }
.sps-auth-panel-head p { max-width: 430px; margin: 0 !important; color: var(--sps-auth-muted) !important; font-size: 12.5px; line-height: 1.6; }

.sps-auth-panel .sps-form { display: grid; gap: 13px; }
.sps-auth-panel .sps-form label { display: grid; gap: 6px; min-width: 0; color: #314b64; font-size: 11.5px; font-weight: 720; }
.sps-auth-panel .sps-form label > span { display: block; }
.sps-auth-panel .sps-form :is(input:not([type="hidden"]), select, textarea) { width: 100%; min-width: 0; min-height: 45px !important; padding: 10px 12px !important; border: 1px solid var(--sps-auth-line) !important; border-radius: 11px !important; background: rgba(255, 255, 255, .94) !important; color: var(--sps-auth-ink) !important; font-size: 12.5px; box-shadow: 0 1px 2px rgba(22, 57, 88, .03) !important; }
.sps-auth-panel .sps-form :is(input:not([type="hidden"]), select, textarea):focus { border-color: rgba(23, 105, 210, .68) !important; box-shadow: 0 0 0 4px rgba(23, 105, 210, .11) !important; }
.sps-auth-panel .sps-form input::placeholder { color: #96a5b4; }

.sps-auth-panel .sps-human-check { padding: 10px 11px; border: 1px solid var(--sps-auth-line); border-radius: 11px; background: #f5f9fc; }
.sps-auth-panel .sps-human-check label { grid-template-columns: minmax(0, 1fr) 100px; }
.sps-auth-panel .sps-human-check input { min-height: 40px !important; }

.sps-login-submit-button, .sps-register-submit-button, .sps-setup-submit-button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 47px !important; padding: 11px 16px !important; border: 0 !important; border-radius: 11px !important; background: linear-gradient(135deg, #0b4d95, #1769d2 65%, #0b8ca8) !important; color: #fff !important; font-size: 12.5px; font-weight: 760 !important; box-shadow: 0 12px 26px rgba(12, 79, 159, .22) !important; cursor: pointer; }
.sps-login-submit-button:hover, .sps-register-submit-button:hover, .sps-setup-submit-button:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(12, 79, 159, .27) !important; }

.sps-auth-switch { display: flex; align-items: center; justify-content: center; gap: 7px; padding-top: 14px; border-top: 1px solid #dfe7ee; color: var(--sps-auth-muted); font-size: 11.5px; }
.sps-auth-switch a { color: var(--sps-auth-blue-dark) !important; font-weight: 760; text-decoration: none; }
.sps-auth-switch a:hover { text-decoration: underline; }
.sps-login-public-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sps-login-public-actions a { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 10px; border: 1px solid var(--sps-auth-line); border-radius: 10px; background: rgba(255, 255, 255, .72); color: #31506b !important; font-size: 11px; font-weight: 700; text-align: center; text-decoration: none; }
.sps-login-public-actions a:hover { border-color: #a9c5db; background: #edf6fb; }
.sps-auth-security-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0 !important; color: #718296 !important; font-size: 10.5px; text-align: center; }
.sps-auth-security-note > span { width: 7px; height: 7px; border-radius: 50%; background: #16765c; box-shadow: 0 0 0 4px rgba(22, 118, 92, .09); }

.sps-auth-footer {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 66px;
    padding: 14px 20px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 17px;
    background: linear-gradient(105deg, #0b2944, #0c4560);
    color: #fff;
    box-shadow: 0 14px 34px rgba(16, 49, 73, .14);
}
.sps-auth-footer div, .sps-auth-footer nav { display: flex; align-items: center; gap: 12px; }
.sps-auth-footer strong { color: #fff !important; font-size: 12px; }
.sps-auth-footer span { color: rgba(231, 242, 249, .72); font-size: 10.5px; }
.sps-auth-footer a { color: rgba(242, 249, 253, .82) !important; font-size: 10.5px; font-weight: 680; text-decoration: none; }
.sps-auth-footer a:hover { color: #fff !important; }

@keyframes spsAuthFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

@media (max-width: 1060px) {
    :is(.sps-portal-login, .sps-portal-register, .sps-portal-setup) .sps-auth-card { grid-template-columns: minmax(0, 1fr) minmax(370px, 440px); gap: 20px; }
    .sps-auth-showcase { padding-inline: 24px; }
    .sps-auth-showcase-copy h2 { font-size: clamp(32px, 4vw, 44px) !important; }
    .sps-auth-confidence { grid-template-columns: 1fr; max-width: 310px; }
    .sps-auth-confidence span { min-height: 38px; }
}

@media (max-width: 860px) {
    :is(.sps-portal-login, .sps-portal-register, .sps-portal-setup) { overflow: visible; }
    :is(.sps-portal-login, .sps-portal-register, .sps-portal-setup) .sps-auth-wrap { padding: 16px; }
    :is(.sps-portal-login, .sps-portal-register, .sps-portal-setup) .sps-auth-card { grid-template-columns: 1fr; grid-template-rows: auto; gap: 15px; min-height: auto; }
    .sps-auth-showcase { grid-template-columns: minmax(0, 1fr) 150px; min-height: 210px; padding: 22px; border: 1px solid rgba(255, 255, 255, .56); border-radius: 21px; background: rgba(255, 255, 255, .32); }
    .sps-auth-showcase::before, .sps-auth-orb { display: none; }
    .sps-login-brand, .sps-auth-showcase-copy, .sps-auth-confidence { grid-column: 1; }
    .sps-auth-showcase-copy h2 { font-size: clamp(29px, 6vw, 42px) !important; }
    .sps-auth-showcase-copy p { font-size: 13px; }
    .sps-auth-illustration { grid-column: 2; grid-row: 1 / span 3; align-self: center; width: 100%; max-height: 155px; }
    .sps-auth-confidence { display: none; }
    .sps-auth-panel { justify-self: center; width: min(620px, 100%); }
    .sps-auth-footer { width: min(620px, 100%); justify-self: center; }
}

@media (max-width: 560px) {
    :is(.sps-portal-login, .sps-portal-register, .sps-portal-setup) .sps-auth-wrap { align-items: flex-start; padding: 9px; }
    :is(.sps-portal-login, .sps-portal-register, .sps-portal-setup) .sps-auth-card { gap: 9px; width: 100% !important; }
    .sps-auth-showcase { display: flex; align-items: center; min-height: 0; padding: 13px 14px; border-radius: 17px; }
    .sps-login-mark { flex-basis: 44px; width: 44px; height: 44px; border-radius: 13px; font-size: 14px; }
    .sps-login-brand strong { font-size: 14px; }
    .sps-login-brand small { font-size: 9.5px; }
    .sps-auth-showcase-copy, .sps-auth-confidence, .sps-auth-eyebrow, .sps-auth-illustration { display: none; }
    .sps-auth-panel { gap: 13px; padding: 19px 15px !important; border-radius: 18px !important; }
    .sps-auth-panel-head h1 { font-size: 24px !important; }
    .sps-auth-panel-head p { font-size: 11.5px; }
    .sps-auth-panel .sps-form { gap: 11px; }
    .sps-auth-panel .sps-form :is(input:not([type="hidden"]), select, textarea) { min-height: 44px !important; }
    .sps-auth-switch { flex-wrap: wrap; padding-top: 12px; }
    .sps-auth-footer { align-items: flex-start; flex-direction: column; gap: 8px; padding: 14px 16px; }
    .sps-auth-footer div { align-items: flex-start; flex-direction: column; gap: 2px; }
}

@media (max-width: 360px) {
    .sps-login-public-actions { grid-template-columns: 1fr; }
    .sps-auth-panel .sps-human-check label { grid-template-columns: minmax(0, 1fr) 86px; }
}

@media (prefers-reduced-motion: reduce) {
    .sps-auth-orb, .sps-auth-illustration { animation: none !important; }
}