/* V3.20: one continuous illustrated backdrop with a real floating login form. */
.login-page-light {
    position: relative;
    display: block;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    color: #10213d;
    background: #eaf6ff;
}
.login-backdrop { position: fixed; inset: 0; display: block; pointer-events: none; overflow: hidden; }
.login-backdrop img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
.login-data-flow { position: fixed; inset: 0; display: block; width: 100%; height: 100%; overflow: hidden; pointer-events: none; opacity: 0; }
.login-data-flow.is-ready { opacity: 1; }
.login-flow-tracer { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 11 89; animation: login-cable-flow var(--flow-duration, 3s) linear var(--flow-delay, 0s) infinite; animation-play-state: paused; }
.login-data-flow.is-ready:not(.is-paused) .login-flow-tracer { animation-play-state: running; }
.login-flow-glow { stroke: #5ceaff; stroke-width: 8; opacity: .6;  }
.login-flow-tail { stroke: #b2f5ff; stroke-width: 3; opacity: .72; }
.login-flow-core { stroke: #fff; stroke-width: 3.4; stroke-dasharray: 1 99; animation-name: login-cable-head; }
@keyframes login-cable-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
@keyframes login-cable-head { from { stroke-dashoffset: -10; } to { stroke-dashoffset: -110; } }
@media (prefers-reduced-motion: reduce) { .login-data-flow { display: none; } .login-flow-tracer { animation: none; } }
.login-shell {
    position: relative;
    width: min(1540px, 88%);
    min-height: 100vh;
    min-height: 100svh;
    margin: 0 auto;
    padding: clamp(42px, 6vh, 76px) 0;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(400px, 1fr);
    align-items: center;
    gap: clamp(52px, 5.5vw, 108px);
}
.login-showcase { display: flex; flex-direction: column; align-self: stretch; min-width: 0; }
.login-cover-brand { display: flex; align-items: center; gap: 22px; min-height: 44px; }
/* Align the wordmark's visible ink center, rather than the taller mascot's image box. */
.login-product-logo { display: block; width: clamp(158px, 12.7vw, 218px); height: auto; object-fit: contain; flex: none; transform: translateY(-22.74%); }
.login-cover-brand > span { position: relative; display: flex; align-items: center; min-height: 44px; padding-left: 22px; color: #10213d; font-size: clamp(20px, 1.5vw, 27px); font-weight: 650; line-height: 1.3; white-space: nowrap; }
.login-cover-brand > span::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 28px; background: #a7bbd2; transform: translateY(-50%); }
.login-mobile-art { display: none; }
.login-showcase h1 { margin: 28px 0 16px; color: #091a37; font-size: clamp(46px, 3.7vw, 70px); line-height: 1.16; font-weight: 750; letter-spacing: -1.8px; overflow-wrap: anywhere; }
.login-showcase > p { margin: 0; color: #4b6688; font-size: clamp(16px, 1.35vw, 23px); line-height: 1.65; overflow-wrap: anywhere; }
.login-hero-space { flex: 1; min-height: clamp(250px, 22vw, 380px); }
.login-features { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0; margin: 0 0 clamp(0px, 2vh, 24px); list-style: none; }
.login-features li { display: flex; align-items: center; gap: 12px; color: #29476d; font-size: clamp(14px, 1.05vw, 18px); line-height: 1.5; white-space: nowrap; }
.login-features li + li { border-left: 1px solid #b7d0e9; padding-left: clamp(14px, 1.6vw, 28px); }
.login-features svg { width: 28px; height: 28px; fill: none; stroke: #1774f5; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.login-panel-light { display: block; min-height: 0; padding: 0; width: 100%; background: none; }
.login-card-light {
    width: min(500px, 100%);
    max-width: none;
    margin: 0 auto;
    padding: 44px;
    border: 1px solid rgba(255,255,255,.94);
    border-radius: 28px;
    background: rgba(255,255,255,.89);
    box-shadow: 0 28px 64px rgba(43,90,134,.14), inset 0 1px 0 #fff;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}
.login-card-heading { margin-bottom: 30px; }
.login-card-heading > span { color: #1874f6; font-size: 14px; font-weight: 650; line-height: 1.5; }
.login-card-heading h2 { margin: 10px 0 0; color: #10213d; font-size: 32px; line-height: 1.4; font-weight: 400; letter-spacing: -.8px; overflow-wrap: anywhere; }
.login-modern-form { display: flex; flex-direction: column; gap: 22px; }
.login-modern-field { display: block; min-width: 0; }
.login-modern-field > span { display: block; margin-bottom: 10px; color: #22334f; font-size: 15px; font-weight: 600; line-height: 1.5; }
.login-modern-field > span em { color: #ef4444; font-style: normal; }
.login-input-shell { position: relative; }
.login-input-shell > svg { position: absolute; z-index: 2; top: 50%; left: 16px; width: 20px; height: 20px; fill: none; stroke: #1c76f5; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transform: translateY(-50%); pointer-events: none; }
.login-input-shell input { width: 100%; height: 54px; padding: 0 49px 0 46px; border: 1px solid #cddff7; border-radius: 12px; background: rgba(255,255,255,.96); box-shadow: 0 8px 24px rgba(40,83,132,.025); color: #263d5b; font-size: 16px; font-weight: 400; line-height: normal; transition: border-color .18s, box-shadow .18s; }
.login-input-shell input::placeholder { color: #8798ae; }
.login-input-shell input:focus { outline: none; border-color: #3487f6; box-shadow: 0 0 0 3px #3281f512, 0 8px 24px #28538407; }
.login-input-shell input:-webkit-autofill { -webkit-text-fill-color: #263d5b; -webkit-box-shadow: 0 0 0 100px #eaf2ff inset; }
.password-visibility { position: absolute; z-index: 3; top: 50%; right: 9px; width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 8px; color: #788ca7; background: transparent; cursor: pointer; transform: translateY(-50%); }
.password-visibility:hover { color: #1e73ec; background: #eef5ff; }
.password-visibility svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.login-card-light .login-assist { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -3px 0 2px; }
.login-card-light .remember-option { display: inline-flex; align-items: center; gap: 9px; color: #657b99; font-size: 14px; font-weight: 400; cursor: pointer; }
.login-card-light .remember-option input { width: 17px; height: 17px; margin: 0; accent-color: #2563eb; box-shadow: none; cursor: pointer; }
.login-card-light .register-entry { font-size: 14px; }
.login-submit { position: relative; display: flex; width: 100%; min-height: 54px; height: 54px; margin-top: 0; justify-content: center !important; border: 1px solid #2161d8; border-radius: 11px; color: #fff; background: linear-gradient(180deg, #5595ff 0%, #327cf1 48%, #2264df 100%); font-size: 17px; font-weight: 650; letter-spacing: 5px; text-shadow: 0 1px 1px #164caf66; box-shadow: inset 0 1px 0 #ffffff85, inset 0 -2px 0 #174db333, 0 3px 0 #1c54bd, 0 12px 22px #2563eb33; transition: transform .16s, box-shadow .16s, background .16s; }
.login-submit:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; text-shadow: none; transform: none; }
.login-card-light .alert { margin-bottom: 20px; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.login-page-light :is(button, a, input[type="checkbox"]):focus-visible { outline: 3px solid #8cbbfc; outline-offset: 3px; }
/* The existing challenge component owns verification logic and state styles. */
.login-slider-verification { min-width: 0; }

@media (min-width: 1101px) and (max-height: 800px) {
    .login-shell { padding: 38px 0; }
    .login-cover-brand { min-height: 36px; }
    .login-showcase h1 { margin-top: 25px; font-size: clamp(44px, 3.9vw, 64px); }
    .login-hero-space { min-height: 280px; }
    .login-card-light { padding: 36px 38px; }
}
@media (max-width: 1300px) and (min-width: 1101px) {
    .login-shell { width: 92%; grid-template-columns: minmax(0, 1fr) 400px; gap: 46px; }
    .login-cover-brand { gap: 16px; }
    .login-cover-brand > span { padding-left: 16px; font-size: 20px; }
    .login-product-logo { width: 160px; }
    .login-card-light { padding: 34px; }
    .login-features { gap: 10px; }
    .login-features li { gap: 8px; font-size: 13px; }
    .login-features li + li { padding-left: 12px; }
    .login-features svg { width: 23px; height: 23px; }
}
@media (max-width: 1100px) {
    .login-shell { width: min(540px, calc(100% - 48px)); grid-template-columns: minmax(0, 1fr); gap: 18px; align-content: center; padding: 36px 0; }
    .login-showcase { align-items: center; align-self: auto; }
    .login-cover-brand { justify-content: center; gap: 20px; }
    .login-cover-brand > span { padding-left: 20px; font-size: 21px; }
    .login-product-logo { width: 166px; }
    .login-showcase h1, .login-showcase > p, .login-hero-space, .login-features { display: none; }
    .login-panel-light { min-height: 0; }
    .login-card-light { width: 100%; max-width: 500px; padding: 40px; }
}
@media (max-width: 560px) {
    .login-shell { width: calc(100% - 32px); padding: 28px 0; gap: 12px; }
    .login-cover-brand { gap: 14px; }
    .login-product-logo { width: 142px; }
    .login-cover-brand > span { padding-left: 14px; font-size: 19px; }
    .login-card-light { padding: 32px 26px; border-radius: 24px; }
    .login-card-heading { margin-bottom: 26px; }
    .login-card-heading h2 { font-size: 28px; }
    .login-modern-form { gap: 20px; }
    .login-input-shell input { font-size: 16px; }
}
@media (max-width: 360px) {
    .login-shell { width: calc(100% - 24px); }
    .login-cover-brand { gap: 10px; }
    .login-product-logo { width: 128px; }
    .login-cover-brand > span { font-size: 17px; padding-left: 10px; }
    .login-card-light { padding: 28px 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .login-page-light :is(button, a, input) { transition: none; }
}

/* The mobile illustration uses the same artwork and path coordinates as desktop. */
@media (min-width: 1101px) { .login-data-flow[data-login-flow="mobile"] { display: none; } }
@media (max-width: 1100px) {
    .login-data-flow[data-login-flow="desktop"] { display: none; }
    .login-mobile-art { position: relative; display: block; flex: none; width: 100vw; max-width: none; aspect-ratio: 880 / 470; overflow: hidden; margin-top: 8px; border-radius: 0; pointer-events: none; -webkit-mask-image: linear-gradient(transparent, #000 8%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 8%, #000 86%, transparent); }
    .login-mobile-art > img { position: absolute; display: block; width: 190%; height: 200.212766%; max-width: none; left: -9.090909%; top: -74.468085%; }
    .login-mobile-art .login-data-flow { position: absolute; }
    .login-cover-brand > span { min-height: 36px; }
    .login-cover-brand > span::before { height: 24px; }
}
@media (max-width: 560px) {
    .login-shell { padding-top: 22px; }
    .login-card-light { padding: 28px 26px; }
    .login-card-heading { margin-bottom: 22px; }
    .login-modern-form { gap: 18px; }
}

/* Account restrictions are presented separately from form validation. */
.login-page .account-ban-notice {
    width: 460px; max-width: calc(100vw - 32px); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);
    padding: 38px 36px 32px; margin: auto; overflow: auto; box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.98); border-radius: 30px; color: #292b35;
    background: radial-gradient(ellipse at 50% 0, #fff0f2 0, transparent 49%), linear-gradient(160deg,#fff,#fafbfe);
    box-shadow: 0 28px 90px #18243a30, inset 0 1px 0 #fff; text-align: center;
}
.account-ban-notice::backdrop { background: rgba(28,35,49,.27); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.account-ban-notice-close { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; padding: 8px; border: 1px solid #e9e9ed; border-radius: 50%; background: #ffffffb8; color: #9296a0; cursor: pointer; }
.account-ban-notice-close svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.account-ban-notice-symbol { display: grid; place-items: center; width: 76px; height: 76px; margin: 2px auto 24px; border: 1px solid #fff; border-radius: 24px; background: linear-gradient(145deg,#fffafb,#ffe5e9); box-shadow: inset 0 1px 3px #fff,0 10px 25px #d5647421,0 0 0 6px #ffffff85; }
.account-ban-notice-symbol svg { width: 43px; height: 43px; fill: none; stroke: #eb4e62; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.account-ban-notice h2 { margin: 0 0 10px; font-size: 26px; font-weight: 650; letter-spacing: .5px; color: #292b35; }
.account-ban-notice h2[tabindex="-1"]:focus { outline:none; }
.account-ban-notice #accountBanNoticeSummary { margin: 0; color: #9397a2; font-size: 13px; line-height: 1.8; }
.account-ban-notice-reason { margin: 25px 0 26px; padding: 21px 22px; border: 1px solid #f2dde2; border-radius: 18px; background: linear-gradient(150deg,#fffafb,#fff); box-shadow: inset 0 1px 0 #fff; text-align: center; }
.account-ban-notice-reason>span { font-size: 17px; font-weight: 650; color: #c84360; letter-spacing: 1px; }
.account-ban-notice-reason>p { margin: 14px 0 0; max-height: 210px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; color: #626775; line-height: 1.95; text-align: center; }
.account-ban-notice-confirm { width: 100%; min-height: 48px; padding: 12px 20px; border: 1px solid #e85164; border-radius: 15px; background: linear-gradient(180deg,#f47583,#ec576b); color: #fff; font: inherit; font-size: 14px; font-weight: 600; box-shadow: inset 0 1px 1px #ffffff60,0 6px 15px #d9526826; cursor: pointer; }
.account-ban-notice-confirm:hover { background: linear-gradient(180deg,#f06779,#e64c61); }
.login-page .account-ban-notice :is(button,.account-ban-notice-reason):focus-visible { outline: 3px solid #f6a3b0; outline-offset: 3px; }
@media(max-width:560px) { .login-page .account-ban-notice { padding: 32px 24px 26px; border-radius: 27px; } .account-ban-notice h2 { font-size: 24px; } .account-ban-notice-reason { padding: 18px; } }
@media(prefers-reduced-motion:no-preference) { .account-ban-notice[open] { animation: account-ban-notice-enter .24s ease-out; } @keyframes account-ban-notice-enter { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } } }

/* Light glass actions also apply to the public login and account notice. */
.login-page :is(.login-submit,.account-ban-notice-confirm) {
    position:relative; overflow:hidden; min-height:52px; border-radius:16px;
    border:1px solid #bddbff; color:#226bd2;
    background:radial-gradient(ellipse at 13% 4%,#fffffff5 0%,#ffffff50 36%,transparent 67%),linear-gradient(145deg,#f4faffef,#dcecffdc 60%,#ecf6ffef);
    box-shadow:inset 0 1px 0 #fff,inset 1px 0 0 #ffffffdd,inset 0 -1px 0 #ffffffb8,0 9px 20px #548ece26,0 2px 4px #689fd314;
    text-shadow:0 1px 0 #fff; transition:transform .4s cubic-bezier(.2,1.8,.4,1),filter .18s,box-shadow .18s;
}
.login-page .account-ban-notice-confirm { border-color:#f3c6d1; color:#c83d5b; background:radial-gradient(ellipse at 13% 4%,#fff 0%,#ffffff80 36%,transparent 67%),linear-gradient(145deg,#fff9fb,#ffe6ee 60%,#fff3f7); box-shadow:inset 0 1px 0 #fff,inset 1px 0 0 #ffffffdd,0 9px 20px #c85d791f; font-size:15px; }
.login-page :is(.login-submit,.account-ban-notice-confirm)::before { content:""; position:absolute; inset:2px; border-radius:13px; border:1px solid #ffffffa8; pointer-events:none; }
.login-page :is(.login-submit,.account-ban-notice-confirm)::after { content:""; position:absolute; top:5px; left:7px; width:29px; height:21px; border-radius:90% 20% 90% 25%; background:linear-gradient(130deg,#fff,#ffffff00 75%); pointer-events:none; }
.login-page :is(.login-submit,.account-ban-notice-confirm):hover:not(:disabled) { filter:brightness(1.02); transform:translateY(-1px); }
.login-page :is(.login-submit,.account-ban-notice-confirm):active:not(:disabled) { transform:scale(.975,.94); transition-duration:.1s; }
.login-page .login-submit:focus-visible { outline:3px solid #92bdff90; outline-offset:3px; }
@media(prefers-reduced-motion:reduce) { .login-page :is(.login-submit,.account-ban-notice-confirm) { transition:none; } .login-page :is(.login-submit,.account-ban-notice-confirm):is(:hover,:active) { transform:none; } }

.login-attempt-policy{margin:0;font-size:10px;line-height:1.7;color:#98a6ba;text-align:center;font-weight:400}