.auth-body { background: #0b1220; padding-top: 2rem; }
    .auth-page-frame { width: 100%; display: grid; justify-items: center; gap: 0.25rem; }
    .auth-page-frame > .auth-brand, .auth-page-frame > .auth-header-center { display: none; }
    .auth-page-frame > .auth-brand { margin-bottom: 0.55rem; }
    .auth-page-frame > .auth-header-center { margin-bottom: 1.15rem; }
    .auth-page-frame > .auth-header-center h1 { margin: 0; color: #8da2be; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.19em; text-transform: uppercase; }

    .login-shell {
        width: 100%;
        max-width: 980px;
        margin: 0 auto;
    }

    .login-card {
        display: grid;
        grid-template-columns: minmax(0, 0.92fr) minmax(400px, 1.08fr);
        background: #ffffff;
        border-radius: 24px;
        border: 1px solid rgba(255,255,255,0.15);
        box-shadow: 0 32px 90px rgba(0,0,0,0.35);
        overflow: hidden;
    }

    .login-intro {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 530px;
        padding: 2.6rem 2.55rem;
        overflow: hidden;
        color: #f8fafc;
        background: linear-gradient(145deg, #082641 0%, #062d43 56%, #06494d 100%);
    }

    .login-brand-kicker {
        display: inline-flex;
        align-items: center;
        gap: .55rem;
        color: #9ce4d1;
        font-size: .72rem;
        font-weight: 750;
        letter-spacing: .16em;
        text-transform: uppercase;
    }

    .login-logo { display: block; width: 154px; height: auto; max-width: 100%; margin: 0 0 2rem; }

    .login-brand-kicker::before { content: ""; width: 1.5rem; height: 2px; background: #55d6b4; }

    .login-intro-copy { position: relative; z-index: 1; max-width: 22rem; margin: 3.3rem 0 auto; }
    .login-intro-copy h2 { margin: 0 0 1rem; color: #fff; font-size: clamp(2rem, 3.4vw, 2.8rem); letter-spacing: -.045em; line-height: 1.08; }
    .login-intro-copy p { margin: 0; color: #bfd0de; font-size: .98rem; line-height: 1.7; }

    .login-feature-list { display: grid; gap: .85rem; margin: 2rem 0 0; padding: 0; list-style: none; }
    .login-feature-list li { display: flex; align-items: center; gap: .75rem; color: #e2edf4; font-size: .85rem; }
    .login-feature-check { display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border: 1px solid rgba(135,232,202,.4); border-radius: 50%; color: #8de2c6; font-size: .72rem; }
    .login-feature-icon { display: none; }
    .login-intro-foot { position: relative; z-index: 1; display: flex; align-items: center; gap: .65rem; color: #a7c2ce; font-size: .76rem; }
    .login-intro-foot::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #54d6a9; box-shadow: 0 0 0 4px rgba(84,214,169,.13); }

    .login-eyebrow { margin: 0 0 .45rem; color: #11816e; font-size: .7rem; font-weight: 750; letter-spacing: .15em; text-transform: uppercase; }
    .login-form-wrap h2#login-title { margin: 0 0 .42rem; color: #152238; font-size: 1.75rem; letter-spacing: -.04em; }
    .login-form-wrap .muted { margin: 0 0 1.65rem; color: #748094; font-size: .9rem; }
    .login-shell .flash { margin: 0 0 1rem; }
    .login-shell .login-form-wrap { padding: 3rem 3.25rem; }
    .login-shell .stack { gap: 1.1rem; }
    .login-shell .field-label { gap: .48rem; color: #28384d; font-size: .81rem; }
    .login-shell .field-input { min-height: 3.15rem; border-color: #dbe2e9; border-radius: 10px; padding: .75rem .9rem; }
    .login-shell .field-input:focus { border-color: #188675; box-shadow: 0 0 0 4px rgba(24,134,117,.12); }
    .login-shell .btn-login { min-height: 3.1rem; margin-top: .2rem; border-radius: 10px; background: linear-gradient(110deg, #117b6e, #15977f); box-shadow: 0 7px 15px rgba(17,123,110,.18); letter-spacing: .01em; }
    .login-shell .btn-login:hover { filter: brightness(1.06); transform: translateY(-1px); }
    .login-shell .btn-login:focus-visible, .login-shell button:focus-visible, .login-shell a:focus-visible { outline: 3px solid rgba(21,151,127,.35); outline-offset: 3px; }
    .login-shell .login-location-option { padding: .8rem .9rem; border: 1px solid #e5ecef; border-radius: 10px; background: #f8fbfa; color: #637286; }
    .login-shell .login-location-status { margin-top: -.75rem; }

    @media (max-width: 760px) {
        .auth-body { align-items: flex-start; padding: 1.35rem 1rem 4rem; }
        .auth-page-frame > .auth-header-center { margin-bottom: .8rem; }
        .login-card { grid-template-columns: 1fr; max-width: 480px; margin: auto; border-radius: 20px; }
        .login-intro { min-height: auto; padding: 1.45rem 1.6rem; }
        .login-intro-copy { margin: 1.25rem 0 .4rem; }
        .login-intro-copy h2 { max-width: 18rem; font-size: 1.75rem; }
        .login-intro-copy p { font-size: .88rem; }
        .login-feature-list { grid-template-columns: 1fr 1fr; gap: .55rem; margin-top: 1rem; }
        .login-feature-list li { gap: .45rem; font-size: .73rem; }
        .login-feature-check { flex: 0 0 1.25rem; width: 1.25rem; height: 1.25rem; }
        .login-intro-foot { display: none; }
        .login-shell .login-form-wrap { padding: 1.75rem 1.6rem 1.8rem; }
    }

    @media (max-width: 380px) {
        .login-feature-list { grid-template-columns: 1fr; }
        .login-shell .login-form-wrap { padding: 1.45rem 1.2rem; }
    }

    .login-form-wrap {
        padding: 1.75rem;
    }

    .login-form-wrap h2 {
        margin: 0 0 0.25rem;
        font-size: 1.2rem;
        color: #1b2430;
    }

    .login-form-wrap .muted {
        margin: 0 0 0.9rem;
        color: #677182;
        font-size: 0.86rem;
    }

    .stack {
        display: grid;
        gap: 0.72rem;
    }

    .field-label {
        display: grid;
        gap: 0.35rem;
        font-size: 0.8rem;
        color: #243042;
        font-weight: 600;
    }

    .field-input {
        border: 1px solid #d4dbe6;
        border-radius: 8px;
        min-height: 2.8rem;
        padding: 0.65rem 0.75rem;
        font-family: inherit;
        font-size: 0.9rem;
        font-weight: 400;
        color: #1b2430;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
        background: #ffffff;
    }

    .field-input:focus {
        outline: none;
        border-color: #1976d2;
        box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.18);
    }

    .password-wrap {
        position: relative;
    }

    .password-toggle {
        position: absolute;
        top: 50%;
        right: 0.5rem;
        transform: translateY(-50%);
        border: 0;
        background: transparent;
        color: #4d5a6b;
        width: 2.25rem;
        height: 2.25rem;
        padding: 0;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .password-toggle:hover {
        color: #1b2430;
    }

    .password-toggle svg {
        width: 1.05rem;
        height: 1.05rem;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .password-toggle .icon-eye-off {
        display: none;
    }

    .password-toggle.is-visible .icon-eye {
        display: none;
    }

    .password-toggle.is-visible .icon-eye-off {
        display: block;
    }

    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .btn-login {
        margin-top: 0.2rem;
        width: 100%;
        border: 0;
        border-radius: 8px;
        min-height: 2.85rem;
        padding: 0.7rem 0.85rem;
        font-weight: 700;
        font-size: 0.95rem;
        cursor: pointer;
        color: #ffffff;
        background: linear-gradient(135deg, #1565c0, #1e88e5);
    }

    .btn-login[disabled] {
        opacity: 0.72;
        cursor: not-allowed;
    }

    .btn-login:hover {
        filter: brightness(1.03);
    }

    .login-location-option {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.65rem;
        color: #596579;
        font-size: 0.78rem;
        line-height: 1.45;
    }

    .login-location-option input { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin: 0; accent-color: #1565c0; }

    .login-location-status {
        min-height: 1.1em;
        margin: 0;
        color: #596579;
        font-size: 0.78rem;
    }

    @media (max-width: 400px) {
        .login-shell {
            max-width: 100%;
        }
    }

    /* Screenshot reference: airy mint backdrop and oversized split sign-in card. */
    .auth-body {
        min-height: 100vh;
        padding: 2.5rem 2rem 5.3rem;
        background: linear-gradient(135deg, #eaf5ff 0%, #f7fbff 48%, #effbf8 100%);
    }
    .auth-page-frame { position: relative; z-index: 1; width: 100%; }
    .auth-ip-footer { z-index: 1; }
    .auth-body::before, .auth-body::after {
        content: "";
        position: fixed;
        z-index: 0;
        width: 20rem;
        height: 20rem;
        border-radius: 50%;
        filter: blur(46px);
        opacity: .42;
        pointer-events: none;
        will-change: transform;
    }
    .auth-body::before {
        top: -13rem; right: -9rem; left: auto;
        width: 34rem; height: 34rem;
        filter: none; opacity: 1;
        border: 1px solid rgba(21, 153, 171, .08);
        background: radial-gradient(circle, transparent 0 47%, rgba(40,168,181,.055) 47.4% 65%, transparent 65.4%);
        box-shadow: 0 0 0 2.2rem rgba(41,170,183,.045), 0 0 0 5rem rgba(41,170,183,.032);
        animation: backdrop-rings-float 25s ease-in-out infinite;
    }
    .auth-body::after {
        left: -14rem; right: auto; bottom: -18rem;
        width: 39rem; height: 39rem;
        filter: none; opacity: 1;
        border: 1px solid rgba(31,166,187,.1);
        background: radial-gradient(circle, rgba(106,220,229,.10) 0 43%, transparent 43.5% 51%, rgba(80,205,220,.075) 51.5% 67%, transparent 67.5%);
        box-shadow: 0 0 0 2.2rem rgba(70,190,207,.04);
        animation: backdrop-glow-drift 21s ease-in-out -8s infinite alternate-reverse;
    }
    .login-shell { max-width: 1250px; }
    .login-card {
        position: relative;
        min-height: min(768px, calc(100vh - 9rem));
        grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
        border: 1px solid rgba(204, 220, 235, .9);
        border-radius: 20px;
        box-shadow: 0 24px 65px rgba(26, 66, 102, .19);
    }
    .login-intro {
        isolation: isolate;
        min-height: 100%;
        padding: clamp(2.1rem, 4vw, 3.85rem) clamp(2rem, 4vw, 3.85rem);
        background:
            linear-gradient(145deg, rgba(4, 31, 49, .91) 0%, rgba(6, 45, 67, .82) 56%, rgba(6, 73, 77, .76) 100%),
            url("/images/15428e0c-a611-409c-9f21-2e8af70e9bec.png") center 42% / cover no-repeat;
    }
    .login-intro::after {
        content: "";
        position: absolute;
        z-index: -1;
        top: -14rem;
        right: -12rem;
        width: 28rem;
        height: 28rem;
        border: 1px solid rgba(75,158,205,.16);
        border-radius: 50%;
        background: radial-gradient(circle, transparent 0 48%, rgba(50,128,181,.10) 48.5% 65%, transparent 65.5%);
        box-shadow: 0 0 0 2rem rgba(47,123,174,.08), 0 0 0 4rem rgba(47,123,174,.045);
        animation: panel-ring-loop 28s ease-in-out infinite;
    }
    .login-intro::before {
        content: "";
        position: absolute;
        z-index: -1;
        right: -115px;
        bottom: -210px;
        width: 330px;
        height: 330px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(0,190,163,.08) 0 38%, transparent 38.5% 49%, rgba(0,190,163,.38) 49.5% 70%, rgba(0,190,163,.08) 70.5% 73%, transparent 73.5%);
        animation: panel-circle-loop 11s ease-in-out infinite;
    }
    .login-card::after {
        content: "";
        position: absolute;
        z-index: 2;
        top: 0;
        left: -34%;
        width: 34%;
        height: 2px;
        pointer-events: none;
        background: linear-gradient(90deg, transparent, rgba(71, 226, 204, .9), rgba(255,255,255,.85), transparent);
        animation: card-edge-sweep 9s ease-in-out 1.2s infinite;
    }
    .login-logo { width: 205px; margin-bottom: 2.4rem; }
    .login-brand-kicker { color: #78e5db; letter-spacing: .2em; }
    .login-brand-kicker::before { width: 2rem; height: 3px; border-radius: 4px; background: #19dac2; }
    .login-intro-copy { max-width: 30rem; margin: 3rem 0 auto; }
    .login-intro-copy h2 { max-width: 27rem; margin-bottom: 1.1rem; font-size: clamp(2.5rem, 4.2vw, 3.4rem); line-height: 1.05; letter-spacing: -.045em; }
    .login-intro-copy h2 span { color: #48e5c5; }
    .login-intro-copy p { max-width: 28rem; color: #e0edf6; font-size: 1.04rem; line-height: 1.55; }
    .login-feature-list { gap: .85rem; margin-top: 1.9rem; }
    .login-feature-list li { color: #f2f8fc; font-size: .94rem; }
    .login-feature-check { width: 2.15rem; height: 2.15rem; border: 0; background: linear-gradient(145deg, #0da99d, #087f78); color: #8effdf; font-size: 1.05rem; box-shadow: 0 5px 14px rgba(0,0,0,.16); animation: feature-check-pulse 4.2s ease-in-out infinite; }
    .login-intro-foot { display: none; }
    .login-shell .login-form-wrap { align-self: center; padding: clamp(2.5rem, 5.2vw, 5rem) clamp(2.6rem, 5.2vw, 5.2rem); }
    .login-eyebrow { margin-bottom: .65rem; color: #078a7a; font-size: .78rem; letter-spacing: .2em; }
    .login-form-wrap h2#login-title { color: #101b49; font-size: clamp(2.3rem, 3.2vw, 3rem); letter-spacing: -.045em; }
    .login-form-wrap .muted { margin-bottom: 2rem; color: #7185a4; font-size: 1.05rem; }
    .login-shell .stack { gap: 1.35rem; }
    .login-shell .field-label { gap: .55rem; color: #1e2e4b; font-size: .92rem; }
    .login-shell .field-input { min-height: 3.85rem; border: 1px solid #b9d5fb; border-radius: 11px; padding: .85rem 1rem; background: linear-gradient(110deg, #f1f6ff, #eaf2ff); color: #112044; font-size: 1rem; }
    .login-shell .field-input:focus { border-color: #7eb8ff; box-shadow: 0 0 0 4px rgba(61,139,253,.13); }
    .login-shell .password-toggle { right: .6rem; color: #7186a5; }
    .login-shell .login-location-option { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: .75rem; min-height: 4.3rem; padding: 1rem 1.1rem; border-color: #e0e8f2; border-radius: 12px; background: linear-gradient(110deg, #fafbfd, #f5f8fc); color: #6b7e9d; font-size: .85rem; }
    .login-shell .login-location-option input { width: 1.35rem; height: 1.35rem; flex: 0 0 1.35rem; margin: 0; }
    .login-shell .login-location-status { margin-top: -.95rem; }
    .login-shell .btn-login { position: relative; isolation: isolate; overflow: hidden; min-height: 4.2rem; margin-top: .15rem; border-radius: 12px; background: linear-gradient(105deg, #00877d, #009e88); box-shadow: 0 12px 24px rgba(0, 128, 116, .2); font-size: 1.15rem; }
    .login-shell .btn-login::before { content: ""; position: absolute; z-index: -1; top: -40%; bottom: -40%; left: -35%; width: 24%; transform: skewX(-22deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); animation: button-shimmer 7s ease-in-out 2s infinite; }
    .login-submit-content { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; }
    .login-submit-arrow { font-size: 1.55rem; font-weight: 400; line-height: 1; transition: transform .16s ease; }
    .login-shell .btn-login:hover .login-submit-arrow { transform: translateX(4px); }

    @media (max-width: 760px) {
        .auth-body { padding: 1.25rem 1rem 4rem; }
        .login-card { min-height: 0; }
        .login-intro { min-height: auto; padding: 1.65rem 1.7rem; }
        .login-logo { width: 170px; margin-bottom: 1.35rem; }
        .login-intro-copy { margin: 1.3rem 0 .15rem; }
        .login-intro-copy h2 { max-width: 26rem; font-size: 2.1rem; }
        .login-intro-copy p { font-size: .9rem; }
        .login-feature-list { grid-template-columns: 1fr 1fr; margin-top: 1rem; }
        .login-feature-list li { font-size: .76rem; }
        .login-feature-check { width: 1.55rem; height: 1.55rem; font-size: .8rem; }
        .login-shell .login-form-wrap { padding: 2rem 1.7rem; }
        .login-form-wrap h2#login-title { font-size: 2.1rem; }
    }

    @media (max-width: 380px) {
        .login-feature-list { grid-template-columns: 1fr; }
        .login-shell .login-form-wrap { padding: 1.6rem 1.2rem; }
    }

    @keyframes login-card-enter {
        from { opacity: 0; transform: translateY(18px) scale(.99); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes login-panel-enter {
        from { opacity: 0; transform: translateX(-16px); }
        to { opacity: 1; transform: translateX(0); }
    }
    @keyframes login-form-enter {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes login-feature-enter {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes panel-circle-loop {
        0%, 100% { transform: translate3d(0, 0, 0) scale(.98); }
        50% { transform: translate3d(-14px, -10px, 0) scale(1.04); }
    }
    @keyframes backdrop-glow-drift {
        0% { transform: translate3d(0, 0, 0) scale(.92); }
        50% { transform: translate3d(7vw, 5vh, 0) scale(1.08); }
        100% { transform: translate3d(13vw, -3vh, 0) scale(.98); }
    }
    @keyframes backdrop-rings-float {
        0%, 100% { transform: translate3d(0, 0, 0) scale(.96); }
        50% { transform: translate3d(-1.2rem, 1.4rem, 0) scale(1.04); }
    }
    @keyframes panel-ring-loop {
        0%, 100% { transform: translate3d(0, 0, 0) scale(.97); }
        50% { transform: translate3d(-.6rem, .8rem, 0) scale(1.035); }
    }
    @keyframes card-edge-sweep {
        0%, 18% { left: -34%; opacity: 0; }
        25% { opacity: .8; }
        52% { left: 100%; opacity: .65; }
        60%, 100% { left: 100%; opacity: 0; }
    }
    @keyframes feature-check-pulse {
        0%, 74%, 100% { transform: scale(1); box-shadow: 0 5px 14px rgba(0,0,0,.16); }
        82% { transform: scale(1.07); box-shadow: 0 0 0 6px rgba(38,219,188,.12), 0 7px 18px rgba(0,0,0,.18); }
    }
    @keyframes button-shimmer {
        0%, 66% { left: -35%; opacity: 0; }
        72% { opacity: 1; }
        88% { left: 115%; opacity: .75; }
        100% { left: 115%; opacity: 0; }
    }
    .login-card { animation: login-card-enter .65s cubic-bezier(.2,.75,.25,1) both; }
    .login-intro-copy, .login-logo, .login-brand-kicker { animation: login-panel-enter .55s .12s both; }
    .login-shell .login-form-wrap { animation: login-form-enter .5s .18s both; }
    .login-feature-list li { animation: login-feature-enter .38s both; }
    .login-feature-list li:nth-child(1) { animation-delay: .24s; }
    .login-feature-list li:nth-child(2) { animation-delay: .31s; }
    .login-feature-list li:nth-child(3) { animation-delay: .38s; }
    .login-feature-list li:nth-child(4) { animation-delay: .45s; }
    .login-feature-list li:nth-child(5) { animation-delay: .52s; }
    .login-shell .field-input { transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; }
    .login-shell .btn-login { transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }

    @media (prefers-reduced-motion: reduce) {
        .auth-body::before, .auth-body::after, .login-card, .login-card::after,
        .login-intro::before, .login-feature-check, .login-shell .btn-login::before,
        .login-intro::after, .login-intro-copy, .login-logo,
        .login-brand-kicker, .login-shell .login-form-wrap, .login-feature-list li {
            animation: none !important;
        }
        .login-submit-spinner { animation: none !important; }
        .login-shell .field-input, .login-shell .btn-login, .login-submit-arrow {
            transition: none !important;
        }
    }

    /* Shared field and action details used by the split desktop and mobile login. */
    .login-field { display: grid; min-width: 0; gap: .55rem; }
    #sign-in-card .login-input-wrap, #sign-in-card .password-wrap { position: relative; display: block; width: 100%; min-width: 0; }
    #sign-in-card .field-input { display: block; width: 100%; }
    #sign-in-card .login-input-icon { position: absolute; z-index: 1; top: 50%; left: .85rem; display: none; width: 1.25rem; height: 1.25rem; transform: translateY(-50%); fill: none; stroke: #69809f; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
    #sign-in-card .password-toggle { min-width: 44px; min-height: 44px; }
    .login-location-icon { flex: 0 0 1.5rem; width: 1.5rem; height: 1.5rem; fill: none; stroke: #0b9587; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .login-location-copy { display: grid; flex: 1 1 auto; min-width: 0; gap: .2rem; align-content: center; }
    .login-location-copy strong { font-weight: 600; }
    .login-location-copy small { color: #788ca9; font-size: .82rem; }
    .login-submit-content { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 3.4rem; gap: 1rem; }
    .login-submit-arrow { position: absolute; top: 50%; right: .55rem; display: grid; place-items: center; width: 3.35rem; height: 3.35rem; transform: translateY(-50%); border: 0; border-radius: 50%; background: rgba(0,94,83,.58); color: #fff; font-size: 1.7rem; font-weight: 400; line-height: 1; transition: transform .16s ease; }
    .login-shell .btn-login:hover .login-submit-arrow { transform: translate(4px, -50%); }
    .login-submit-spinner { position: absolute; right: 1.65rem; display: none; width: 1.15rem; height: 1.15rem; border: 2px solid rgba(255,255,255,.9); border-right-color: transparent; border-radius: 50%; animation: login-spinner .7s linear infinite; }
    @keyframes login-spinner { to { transform: rotate(360deg); } }
    #sign-in-card .btn-login.is-loading .login-submit-spinner { display: inline-block; }
    #sign-in-card .btn-login.is-loading .login-submit-arrow { display: none; }
    /* Mobile-first continuous brand surface: no nested card or white form panel. */
    @media (max-width: 760px) {
        #sign-in-card {
            --wm-bg: #06283a;
            --wm-bg-dark: #041f31;
            --wm-teal: #00bfa6;
            --wm-teal-bright: #13d8b0;
            --wm-green: #35d89d;
            --wm-white: #fff;
            --wm-muted: #b7cbd5;
            display: block;
            width: 100%;
            max-width: none;
            min-height: 0;
            margin: 0;
            overflow: visible;
            border: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            backdrop-filter: none;
            animation: none;
        }
        .auth-body.auth-login-active {
            min-height: 100vh;
            min-height: 100dvh;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: flex-start;
            overflow-x: clip;
            padding: calc(28px + env(safe-area-inset-top, 0px)) 0 calc(22px + env(safe-area-inset-bottom, 0px));
            background-color: #041f31;
            background-image:
                linear-gradient(180deg, rgba(4,31,49,.08) 0%, rgba(4,31,49,.22) 34%, rgba(4,31,49,.78) 74%, #041f31 100%),
                linear-gradient(90deg, rgba(4,31,49,.45) 0%, rgba(4,31,49,.25) 100%),
                url("/images/15428e0c-a611-409c-9f21-2e8af70e9bec.png"),
                linear-gradient(145deg, #041f31 0%, #062d41 49%, #064c4a 100%);
            background-position: center, center, center bottom, center;
            background-size: 100% 100%, 100% 100%, cover, 100% 100%;
            background-repeat: no-repeat;
        }
        .auth-body.auth-login-active::before { display: none; }
        .auth-body.auth-login-active .auth-page-frame {
            width: min(100%, 430px);
            max-width: 430px;
            margin: 0 auto;
            justify-items: stretch;
            gap: 0;
        }
        .auth-body.auth-login-active .auth-ip-footer {
            position: static;
            padding: 1.25rem 1rem .2rem;
            color: rgba(229,246,250,.62);
            font-size: .62rem;
        }
        .auth-body.auth-login-active .auth-ip-footer a { color: #7ce6d3; }
        .login-shell { width: 100%; max-width: none; margin: 0; }
        #sign-in-card .login-intro {
            position: relative;
            display: flex;
            min-height: 0;
            padding: 0 clamp(20px, 6vw, 26px) 0;
            overflow: visible;
            border-radius: 0;
            background: transparent;
        }
        #sign-in-card .login-intro::before {
            right: -9rem;
            top: -10rem;
            bottom: auto;
            width: 25rem;
            height: 25rem;
            background: radial-gradient(circle, rgba(0,190,163,.07) 0 38%, transparent 38.5% 49%, rgba(0,190,163,.25) 49.5% 70%, rgba(0,190,163,.05) 70.5% 73%, transparent 73.5%);
        }
        #sign-in-card .login-intro::after { display: none; }
        #sign-in-card .login-logo { width: clamp(132px, 38vw, 162px); margin: 0 0 1.1rem; }
        #sign-in-card .login-brand-kicker { gap: .55rem; color: #54e4d0; font-size: .68rem; letter-spacing: .14em; }
        #sign-in-card .login-brand-kicker::before { width: 1.5rem; height: 2px; flex: 0 0 auto; }
        #sign-in-card .login-intro-copy { max-width: 100%; margin: 1.25rem 0 0; }
        #sign-in-card .login-intro-copy h2 {
            max-width: 100%;
            margin: 0 0 .7rem;
            color: var(--wm-white);
            font-size: clamp(1.9rem, 8.6vw, 2.35rem);
            font-weight: 800;
            line-height: 1.08;
            letter-spacing: -.045em;
            text-wrap: pretty;
        }
        #sign-in-card .login-intro-copy h2 span { color: var(--wm-teal-bright); }
        #sign-in-card .login-intro-copy p { max-width: 330px; margin: 0; color: var(--wm-muted); font-size: .92rem; line-height: 1.5; }
        #sign-in-card .login-feature-list { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .8rem .55rem; margin: 1.3rem 0 0; }
        #sign-in-card .login-feature-list li { min-width: 0; gap: .5rem; color: #f5fbfc; font-size: .73rem; font-weight: 600; line-height: 1.25; }
        #sign-in-card .login-feature-list li:nth-child(5) { display: none; }
        #sign-in-card .login-feature-check { flex: 0 0 2.1rem; width: 2.1rem; height: 2.1rem; border: 1px solid rgba(98,246,220,.15); background: rgba(0,191,166,.21); color: #fff; }
        #sign-in-card .login-feature-icon { display: block; width: 1.15rem; height: 1.15rem; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
        #sign-in-card .login-form-wrap {
            align-self: stretch;
            width: 100%;
            padding: 2.25rem clamp(20px, 6vw, 26px) 1.5rem;
            background: transparent;
            animation: none;
        }
        #sign-in-card .login-eyebrow { margin: 0 0 .55rem; color: #54e4d0; font-size: .72rem; font-weight: 750; letter-spacing: .18em; }
        #sign-in-card .login-form-wrap h2#login-title { margin: 0 0 .5rem; color: var(--wm-white); font-size: clamp(1.75rem, 7.4vw, 2rem); font-weight: 800; line-height: 1.12; letter-spacing: -.04em; }
        #sign-in-card .login-form-wrap > .muted { margin: 0 0 1.25rem; color: var(--wm-muted); font-size: .88rem; line-height: 1.45; }
        #sign-in-card .stack { gap: .9rem; }
        #sign-in-card .login-field { gap: .4rem; }
        #sign-in-card .field-label { gap: .4rem; color: #eff8fa; font-size: .82rem; font-weight: 600; }
        #sign-in-card .login-input-wrap, #sign-in-card .password-wrap { min-width: 0; }
        #sign-in-card .field-input {
            width: 100%;
            min-width: 0;
            min-height: 3.5rem;
            padding: .65rem 1rem .65rem 3rem;
            border: 1px solid rgba(255,255,255,.2);
            border-radius: 14px;
            background: rgba(255,255,255,.105);
            color: #fff;
            font-size: 1rem;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }
        #sign-in-card .field-input:focus { border-color: #13d8b0; box-shadow: 0 0 0 3px rgba(0,210,180,.12); }
        #sign-in-card .login-input-icon { left: .8rem; display: block; width: 1.2rem; height: 1.2rem; color: #c8e7ed; stroke: #c8e7ed; }
        #sign-in-card .password-wrap .field-input { padding-right: 3.35rem; }
        #sign-in-card .password-toggle { right: .35rem; width: 2.75rem; height: 2.75rem; color: #c8e7ed; }
        #sign-in-card .login-location-option {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            min-width: 0;
            min-height: 5rem;
            padding: .8rem .75rem;
            gap: .65rem;
            border: 1px solid rgba(255,255,255,.16);
            border-radius: 14px;
            background: rgba(255,255,255,.08);
            color: #f3fbfc;
            font-size: .82rem;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }
        #sign-in-card .login-location-option input { flex: 0 0 1.4rem; width: 1.4rem; height: 1.4rem; min-width: 22px; min-height: 22px; margin: 0; accent-color: #13d8b0; }
        #sign-in-card .login-location-icon { flex: 0 0 2.25rem; width: 2.25rem; height: 2.25rem; padding: .45rem; border-radius: 50%; background: rgba(0,210,180,.17); stroke: #dffff8; }
        #sign-in-card .login-location-copy { flex: 1 1 auto; min-width: 0; gap: .25rem; }
        #sign-in-card .login-location-copy strong { color: #f5fbfc; font-size: .8rem; font-weight: 600; line-height: 1.35; }
        #sign-in-card .login-location-copy small { color: #b7cbd5; font-size: .75rem; line-height: 1.35; }
        #sign-in-card .login-location-status { min-height: 0; margin: -.25rem 0 0; color: #c6e1e7; font-size: .75rem; }
        #sign-in-card .login-location-status:empty { display: none; }
        #sign-in-card .btn-login {
            min-height: 3.75rem;
            border: 1px solid rgba(255,255,255,.12);
            border-radius: 16px;
            background: linear-gradient(135deg, #00a99d, #13d8a5);
            box-shadow: 0 10px 28px rgba(0,200,170,.22);
            color: #fff;
            font-size: 1.03rem;
            font-weight: 750;
            transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
        }
        #sign-in-card .btn-login:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 13px 31px rgba(0,200,170,.27); }
        #sign-in-card .btn-login:active { transform: translateY(1px) scale(.99); }
        #sign-in-card .login-submit-arrow { right: .45rem; width: 2.6rem; height: 2.6rem; border: 0; border-radius: 50%; background: rgba(0,92,82,.38); color: #fff; font-size: 1.5rem; }
        #sign-in-card .login-submit-spinner { right: 1.2rem; }
        #sign-in-card .btn-login:focus-visible, #sign-in-card .password-toggle:focus-visible { outline: 3px solid rgba(116,255,230,.85); outline-offset: 3px; }
        #sign-in-card::after { display: none; }
    }
    /* Keep narrow mobile viewports full-bleed even when animated rings reach past the page edge. */
    html.auth-login-document { background: linear-gradient(145deg, #041f31 0%, #062d41 49%, #064c4a 100%); }
    @media (max-width: 359px) {
        .auth-body.auth-login-active .auth-page-frame { width: 100%; padding-inline: 18px; }
        #sign-in-card .login-intro { padding-inline: 0; }
        #sign-in-card .login-form-wrap { padding-inline: 0; }
        #sign-in-card .login-intro-copy h2 { font-size: 1.9rem; }
        #sign-in-card .login-feature-list { column-gap: .35rem; }
        #sign-in-card .login-feature-list li { font-size: .69rem; }
        #sign-in-card .login-feature-check { flex-basis: 1.9rem; width: 1.9rem; height: 1.9rem; }
    }
    @media (min-width: 414px) and (max-width: 760px) {
        .auth-body.auth-login-active .auth-page-frame { padding-inline: 12px; }
        #sign-in-card .login-intro { padding-top: 1rem; }
        #sign-in-card .login-form-wrap { padding-top: 2.5rem; }
    }
    @media (max-width: 760px) {
        html.auth-login-document { overflow-x: clip; }
        body.auth-body.auth-login-page {
            box-sizing: border-box;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            margin: 0;
            overflow-x: clip;
        }
        body.auth-body.auth-login-active .auth-page-frame {
            box-sizing: border-box;
            min-width: 0;
        }
        body.auth-body.auth-login-active .auth-page-frame > * { min-width: 0; }
        body.auth-body.auth-login-active .login-shell,
        body.auth-body.auth-login-active #sign-in-card { min-width: 0; }
        #sign-in-card .login-feature-list {
            gap: .65rem .55rem;
            margin-top: 1.25rem;
        }
        #sign-in-card .login-feature-list li {
            min-width: 0;
            min-height: 3.25rem;
            padding: .45rem .55rem;
            gap: .5rem;
            border: 1px solid rgba(171, 244, 234, .14);
            border-radius: 13px;
            background: linear-gradient(135deg, rgba(220, 250, 249, .105), rgba(21, 181, 164, .055));
            box-shadow: inset 0 1px rgba(255, 255, 255, .045);
            color: #f4fbfc;
            font-size: .75rem;
            font-weight: 600;
            line-height: 1.3;
            overflow-wrap: anywhere;
            -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
        }
        #sign-in-card .login-feature-check {
            flex: 0 0 1.95rem;
            width: 1.95rem;
            height: 1.95rem;
            border: 1px solid rgba(105, 255, 226, .25);
            background: linear-gradient(145deg, rgba(0, 210, 180, .42), rgba(0, 119, 115, .46));
            box-shadow: 0 4px 12px rgba(0, 11, 22, .15);
            font-size: 0;
        }
        #sign-in-card .login-feature-icon { width: 1.08rem; height: 1.08rem; }
    }
    @media (prefers-reduced-motion: reduce) {
        #sign-in-card .login-intro::before,
        #sign-in-card .login-intro::after,
        #sign-in-card .login-feature-check,
        #sign-in-card .login-submit-spinner,
        .auth-body.auth-login-active::before,
        .auth-body.auth-login-active::after {
            animation: none !important;
        }
        #sign-in-card .btn-login { transition: none !important; }
    }