:root {
    --login-walnut: #291711;
    --login-leather: #44271d;
    --login-brass: #c0944d;
    --login-brass-light: #ebca89;
    --login-paper: #f8eedb;
    --login-ink: #392e26;
    --login-muted: #75685b;
    --login-line: #a99370;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--login-ink);
    background-color: #251610;
    background-image:
        radial-gradient(circle at 50% 30%, rgba(225, 190, 130, 0.13), transparent 32%),
        repeating-linear-gradient(3deg, transparent 0, transparent 33px, rgba(235, 202, 137, 0.035) 34px, rgba(7, 3, 2, 0.16) 36px),
        linear-gradient(145deg, #4b2c20 0%, #21110d 70%);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

body::before {
    position: fixed;
    inset: 16px;
    border: 1px solid rgba(225, 184, 111, 0.22);
    border-radius: 17px;
    box-shadow: inset 0 0 0 4px rgba(10, 5, 3, 0.16), inset 0 0 35px rgba(0, 0, 0, 0.26);
    content: "";
    pointer-events: none;
}

.login-stage {
    display: grid;
    min-height: 100vh;
    padding: 56px 22px;
    place-items: center;
}

.login-console {
    position: relative;
    width: min(100%, 510px);
    padding: 40px 42px 31px;
    background-color: var(--login-paper);
    background-image:
        radial-gradient(circle at 18% 2%, rgba(255, 255, 255, 0.85), transparent 35%),
        repeating-linear-gradient(0deg, rgba(96, 66, 38, 0.018) 0, rgba(96, 66, 38, 0.018) 1px, transparent 1px, transparent 4px),
        linear-gradient(155deg, #fffaf0, #eadcc4);
    border: 1px solid #d8bd8b;
    border-radius: 15px;
    box-shadow: 0 28px 65px rgba(4, 2, 1, 0.5), 0 7px 16px rgba(4, 2, 1, 0.32), inset 0 0 0 4px rgba(255, 255, 255, 0.38), inset 0 1px 0 #fff;
}

.login-console::before,
.login-console::after {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle at 35% 30%, #f1d49a, #9a6b31 60%, #573815);
    border: 1px solid #785021;
    border-radius: 50%;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.65), 0 1px 2px rgba(32, 19, 11, 0.45);
    content: "";
    top: 14px;
}

.login-console::before {
    left: 14px;
}

.login-console::after {
    right: 14px;
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 19px;
}

.login-brand__seal {
    display: grid;
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    place-items: center;
    color: #3a2514;
    background: radial-gradient(circle at 34% 28%, #f5dda8, #c99b50 47%, #80571f 100%);
    border: 2px solid #f2d798;
    border-radius: 50%;
    box-shadow: 0 5px 10px rgba(50, 31, 18, 0.36), inset 0 2px 2px rgba(255, 255, 255, 0.7), inset 0 -5px 8px rgba(75, 43, 12, 0.35);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 39px;
    font-weight: 800;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

.login-brand__eyebrow {
    color: #876128;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.login-brand h1 {
    margin: 3px 0 5px;
    color: #33261e;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 31px;
    line-height: 1;
}

.login-brand p {
    margin: 0;
    color: var(--login-muted);
    font-size: 13px;
    line-height: 1.45;
}

.login-console__divider {
    height: 9px;
    margin: 27px 0 25px;
    padding: 2px;
    background: #d5c5aa;
    border: 1px solid #a99677;
    border-radius: 5px;
    box-shadow: inset 0 2px 3px rgba(63, 42, 27, 0.25), 0 1px 0 #fff;
}

.login-console__divider span {
    display: block;
    width: 36%;
    height: 3px;
    margin: 0 auto;
    background: linear-gradient(90deg, #8c632e, #e3bf79, #8c632e);
    border-radius: 2px;
}

.login-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
    padding: 12px 14px;
    color: #77372f;
    background: linear-gradient(180deg, #f6e0d6, #e4bbb1);
    border: 1px solid #b76e64;
    border-left-width: 5px;
    border-radius: 7px;
    box-shadow: inset 0 2px 4px rgba(92, 47, 39, 0.12);
    font-size: 13px;
}

.login-alert__lamp,
.login-submit__lamp {
    flex: 0 0 9px;
    width: 9px;
    height: 9px;
    margin-top: 5px;
    background: radial-gradient(circle at 35% 30%, #ffcdc4, #b94a3f 55%, #642019);
    border: 1px solid #85342c;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(174, 56, 46, 0.42);
}

.login-field {
    margin-bottom: 18px;
}

.login-field label {
    display: block;
    margin: 0 0 7px 2px;
    color: #55463a;
    font-size: 12px;
    font-weight: 750;
}

.login-control {
    display: flex;
    min-height: 49px;
    align-items: center;
    background: linear-gradient(180deg, #ded0b9, #fffaf0 34%);
    border: 1px solid var(--login-line);
    border-radius: 7px;
    box-shadow: inset 0 3px 6px rgba(62, 40, 25, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.75);
}

.login-control > span {
    display: grid;
    width: 45px;
    align-self: stretch;
    place-items: center;
    color: #8c642b;
    border-right: 1px solid #bca98a;
    font-family: Georgia, serif;
    font-weight: 700;
}

.login-control input {
    min-width: 0;
    flex: 1;
    padding: 12px 13px;
    color: var(--login-ink);
    background: transparent;
    border: 0;
    font: inherit;
    outline: 0;
}

.login-control:focus-within {
    border-color: #8d662c;
    box-shadow: inset 0 3px 6px rgba(62, 40, 25, 0.18), 0 0 0 3px rgba(192, 148, 77, 0.24);
}

.password-toggle {
    align-self: stretch;
    padding: 0 13px;
    color: #5e4938;
    background: rgba(213, 196, 166, 0.45);
    border: 0;
    border-left: 1px solid #bca98a;
    border-radius: 0 6px 6px 0;
    cursor: pointer;
    font-size: 11px;
    font-weight: 750;
}

.password-toggle:hover {
    background: rgba(192, 148, 77, 0.24);
}

.login-submit {
    display: flex;
    width: 100%;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 25px;
    color: #fff7e7;
    background: linear-gradient(180deg, #548c73 0%, #2e6d54 56%, #214e3d 100%);
    border: 1px solid #173e2f;
    border-radius: 7px;
    box-shadow: 0 5px 8px rgba(36, 52, 37, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.36);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    letter-spacing: 0.015em;
    text-shadow: 0 1px 1px #173b2e;
}

.login-submit:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.login-submit:active {
    box-shadow: inset 0 3px 6px rgba(20, 50, 37, 0.48);
    transform: translateY(1px);
}

.login-submit__lamp {
    margin: 0;
    background: radial-gradient(circle at 35% 30%, #d8f0ba, #71b162 55%, #285630);
    border-color: #315f37;
    box-shadow: 0 0 6px rgba(109, 179, 91, 0.58);
}

.login-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 25px;
    padding-top: 19px;
    color: var(--login-muted);
    border-top: 1px solid #c7b79d;
    font-size: 11px;
    line-height: 1.45;
}

.login-note > span {
    color: var(--login-brass);
}

.login-note p {
    margin: 0;
}

:focus-visible {
    outline: 3px solid rgba(229, 185, 103, 0.75);
    outline-offset: 3px;
}

@media (max-width: 560px) {
    body::before {
        inset: 8px;
    }

    .login-stage {
        padding: 24px 13px;
    }

    .login-console {
        padding: 34px 23px 25px;
    }

    .login-brand {
        align-items: flex-start;
    }

    .login-brand__seal {
        flex-basis: 56px;
        width: 56px;
        height: 56px;
        font-size: 30px;
    }

    .login-brand h1 {
        font-size: 27px;
    }
}

/* Blue / white / navy material palette. */
:root {
    --login-walnut: #06172d;
    --login-leather: #0a2747;
    --login-brass: #2f7fbe;
    --login-brass-light: #9ed4f7;
    --login-paper: #f5faff;
    --login-ink: #10253d;
    --login-muted: #5d7185;
    --login-line: #8daac2;
}

body {
    background-color: #041225;
    background-image:
        radial-gradient(circle at 50% 30%, rgba(91, 167, 222, 0.18), transparent 34%),
        repeating-linear-gradient(3deg, transparent 0, transparent 33px, rgba(137, 203, 246, 0.04) 34px, rgba(1, 9, 20, 0.18) 36px),
        linear-gradient(145deg, #0f365e 0%, #041225 72%);
}

body::before {
    border-color: rgba(123, 190, 238, 0.28);
    box-shadow: inset 0 0 0 4px rgba(1, 10, 22, 0.2), inset 0 0 35px rgba(0, 0, 0, 0.3);
}

.login-console,
.error-console {
    background-color: #f5faff;
    background-image:
        radial-gradient(circle at 18% 2%, rgba(255, 255, 255, 0.98), transparent 35%),
        repeating-linear-gradient(0deg, rgba(10, 66, 108, 0.016) 0, rgba(10, 66, 108, 0.016) 1px, transparent 1px, transparent 4px),
        linear-gradient(155deg, #ffffff, #dfedf7);
    border-color: #9bbbd3;
    box-shadow: 0 28px 65px rgba(0, 8, 20, 0.52), 0 7px 16px rgba(0, 8, 20, 0.34), inset 0 0 0 4px rgba(255, 255, 255, 0.62), inset 0 1px 0 #fff;
}

.login-console::before,
.login-console::after {
    background: radial-gradient(circle at 35% 30%, #c9eaff, #3786c8 60%, #0c4f88);
    border-color: #17649e;
}

.login-brand__seal {
    color: #ffffff;
    background: radial-gradient(circle at 34% 28%, #b4e0fb, #3786c8 49%, #0b477a 100%);
    border-color: #c5e8fc;
    box-shadow: 0 5px 10px rgba(1, 29, 54, 0.38), inset 0 2px 2px rgba(255, 255, 255, 0.75), inset 0 -5px 8px rgba(2, 40, 72, 0.38);
    text-shadow: 0 1px 1px #073b67;
}

.login-brand__eyebrow,
.error-eyebrow { color: #17649e; }
.login-brand h1,
.error-console h1 { color: #10253d; }
.login-brand p,
.login-note,
.error-copy { color: #5d7185; }

.login-console__divider {
    background: #caddeb;
    border-color: #89a7bf;
    box-shadow: inset 0 2px 3px rgba(5, 42, 73, 0.22), 0 1px 0 #fff;
}

.login-console__divider span { background: linear-gradient(90deg, #0d4d80, #77bde9, #0d4d80); }
.login-field label { color: #294a66; }

.login-control {
    background: linear-gradient(180deg, #d2e3ef, #ffffff 34%);
    border-color: #87a5bd;
    box-shadow: inset 0 3px 6px rgba(5, 42, 73, 0.19), inset 0 -1px 0 rgba(255, 255, 255, 0.85);
}

.login-control > span {
    color: #17649e;
    border-right-color: #adc5d7;
}

.login-control:focus-within {
    border-color: #2474b5;
    box-shadow: inset 0 3px 6px rgba(5, 42, 73, 0.17), 0 0 0 3px rgba(55, 134, 200, 0.24);
}

.password-toggle {
    color: #264861;
    background: rgba(198, 219, 234, 0.52);
    border-left-color: #adc5d7;
}

.password-toggle:hover { background: rgba(55, 134, 200, 0.2); }

.login-submit,
.error-primary {
    color: #ffffff;
    background: linear-gradient(180deg, #4398d7 0%, #2474b5 56%, #0c4f88 100%);
    border-color: #083f6d;
    box-shadow: 0 5px 8px rgba(3, 48, 82, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    text-shadow: 0 1px 1px #073a64;
}

.login-submit__lamp {
    background: radial-gradient(circle at 35% 30%, #d9f1ff, #58a7dc 55%, #145b90);
    border-color: #1a6498;
    box-shadow: 0 0 6px rgba(61, 151, 211, 0.62);
}

.login-note { border-top-color: #b9cfdf; }
.login-note > span { color: #3786c8; }

.error-gauge {
    background: radial-gradient(circle, #f7fbff 0 53%, #8facbf 55% 58%, #092746 60% 100%);
    border-color: #031225;
    box-shadow: 0 6px 13px rgba(2, 31, 57, 0.36), inset 0 2px 3px #fff;
}

.error-gauge__code { color: #154f7d; }
.error-secondary {
    color: #173b59;
    background: linear-gradient(180deg, #ffffff, #d3e3ef);
    border-color: #829fb7;
    box-shadow: 0 3px 5px rgba(4, 37, 65, 0.19), inset 0 1px 0 #fff;
}

.error-detail pre { color: #eaf6ff; background: #041225; }

/* Modern split authentication experience. */
body.wa-modern-auth {
    min-height: 100vh;
    margin: 0;
    color: #102a43;
    background: #f4f8fb;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.wa-modern-auth::before,
body.wa-modern-auth::after { display: none; }

.wa-modern-auth .auth-v2 {
    display: grid;
    grid-template-columns: minmax(440px, 1.08fr) minmax(420px, .92fr);
    min-height: 100vh;
}

.wa-modern-auth .auth-v2-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 48px clamp(42px, 5.2vw, 86px);
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 88% 8%, rgba(181,224,234,.28), transparent 25%),
        radial-gradient(circle at 8% 88%, rgba(0,113,228,.28), transparent 30%),
        linear-gradient(145deg, #082f55 0%, #0f4c81 64%, #0a3c69 100%);
}

.wa-modern-auth .auth-v2-visual::before {
    position: absolute;
    top: 14%;
    right: -160px;
    width: 420px;
    height: 420px;
    border: 70px solid rgba(255,255,255,.055);
    border-radius: 50%;
    content: '';
}

.wa-modern-auth .auth-v2-visual::after {
    position: absolute;
    right: 16%;
    bottom: -200px;
    width: 380px;
    height: 380px;
    background: rgba(181,224,234,.045);
    border: 1px solid rgba(181,224,234,.09);
    border-radius: 50%;
    content: '';
}

.wa-modern-auth .auth-v2-brand,
.wa-modern-auth .auth-v2-mobile-brand {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 13px;
}

.wa-modern-auth .auth-v2-brand__mark {
    display: grid;
    width: 45px;
    height: 45px;
    color: #0f4c81;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(0,0,0,.19);
    font: 800 22px/1 Georgia, serif;
    place-items: center;
}

.wa-modern-auth .auth-v2-brand strong,
.wa-modern-auth .auth-v2-brand small,
.wa-modern-auth .auth-v2-mobile-brand strong,
.wa-modern-auth .auth-v2-mobile-brand small { display: block; }
.wa-modern-auth .auth-v2-brand strong { color: #fff; font-size: 17px; font-weight: 760; letter-spacing: -.02em; }
.wa-modern-auth .auth-v2-brand small { margin-top: 2px; color: rgba(181,224,234,.7) !important; font-size: 8px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }

.wa-modern-auth .auth-v2-visual__content { position: relative; z-index: 1; width: min(100%, 680px); margin: auto 0; padding: 72px 0; }
.wa-modern-auth .auth-v2-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px; color: #b5e0ea; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.wa-modern-auth .auth-v2-eyebrow > span { width: 24px; height: 2px; background: #b5e0ea; border-radius: 4px; }
.wa-modern-auth .auth-v2-visual h1 { margin: 0 0 21px; color: #fff; font-size: clamp(38px, 4.2vw, 65px); font-weight: 760; letter-spacing: -.052em; line-height: 1.03; }
.wa-modern-auth .auth-v2-visual__content > p { max-width: 590px; margin: 0; color: rgba(225,241,250,.74); font-size: 14px; line-height: 1.75; }

.wa-modern-auth .auth-v2-capabilities { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 42px; }
.wa-modern-auth .auth-v2-capabilities > div { min-width: 0; padding: 16px; background: rgba(255,255,255,.07); border: 1px solid rgba(181,224,234,.12); border-radius: 15px; backdrop-filter: blur(10px); }
.wa-modern-auth .auth-v2-capabilities span { display: block; margin-bottom: 16px; color: #b5e0ea; font-size: 9px; font-weight: 850; letter-spacing: .1em; }
.wa-modern-auth .auth-v2-capabilities strong { display: block; overflow: hidden; color: #fff; font-size: 11px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.wa-modern-auth .auth-v2-capabilities small { display: block; margin-top: 5px; color: rgba(225,241,250,.55) !important; font-size: 9px; line-height: 1.45; }
.wa-modern-auth .auth-v2-visual__footer { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; margin: 0; color: rgba(225,241,250,.5); font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.wa-modern-auth .auth-v2-visual__footer > span { width: 7px; height: 7px; background: #60d394; border-radius: 50%; box-shadow: 0 0 0 5px rgba(96,211,148,.1); }

.wa-modern-auth .auth-v2-panel { display: grid; min-height: 100vh; padding: 54px clamp(35px, 6vw, 96px); background: radial-gradient(circle at 80% 10%, rgba(181,224,234,.28), transparent 28%), #f7fafc; place-items: center; }
.wa-modern-auth .auth-v2-form-wrap { width: min(100%, 455px); }
.wa-modern-auth .auth-v2-mobile-brand { display: none; }
.wa-modern-auth .auth-v2-form-header { margin-bottom: 38px; }
.wa-modern-auth .auth-v2-form-kicker { display: block; margin-bottom: 12px; color: #0071e4; font-size: 9px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.wa-modern-auth .auth-v2-form-header h2 { margin: 0 0 10px; color: #102a43; font-size: clamp(29px, 3vw, 39px); font-weight: 760; letter-spacing: -.045em; line-height: 1.12; }
.wa-modern-auth .auth-v2-form-header p { margin: 0; color: #627d98; font-size: 12px; line-height: 1.65; }
.wa-modern-auth .auth-v2-form { display: grid; gap: 23px; }
.wa-modern-auth .login-field { margin: 0; }
.wa-modern-auth .login-field label { display: block; margin: 0 0 8px; color: #334e68; font-size: 10px; font-weight: 760; letter-spacing: .02em; }
.wa-modern-auth .auth-v2-label-row { display: flex; align-items: center; justify-content: space-between; }
.wa-modern-auth .auth-v2-label-row > span { color: #8aa1b4; font-size: 8px; text-transform: uppercase; }
.wa-modern-auth .auth-v2-control { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; min-height: 56px; overflow: hidden; background: #fff; border: 1px solid #d8e5ed; border-radius: 14px; box-shadow: 0 8px 22px rgba(15,76,129,.055); }
.wa-modern-auth .auth-v2-control:focus-within { border-color: #0071e4; box-shadow: 0 0 0 4px rgba(0,113,228,.1), 0 10px 24px rgba(15,76,129,.08); }
.wa-modern-auth .auth-v2-control__icon { display: grid; width: 48px; height: 100%; color: #0071e4; background: #f0f7fc; border: 0; font-size: 14px; font-weight: 800; place-items: center; }
.wa-modern-auth .auth-v2-control__icon--password { font-size: 10px; }
.wa-modern-auth .auth-v2-control input { width: 100%; min-width: 0; height: 54px; padding: 0 14px; color: #102a43; background: transparent; border: 0; box-shadow: none; font: inherit; font-size: 12px; outline: 0; }
.wa-modern-auth .auth-v2-control input::placeholder { color: #9eb0bf; }
.wa-modern-auth .password-toggle { align-self: stretch; min-width: 65px; padding: 0 15px; color: #0f4c81; background: transparent; border: 0; border-left: 1px solid #e4ecf1; cursor: pointer; font: inherit; font-size: 9px; font-weight: 760; }
.wa-modern-auth .password-toggle:hover { background: #f2f8fc; }
.wa-modern-auth .auth-v2-remember-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: -5px; }
.wa-modern-auth .auth-v2-remember { display: inline-flex; align-items: center; gap: 9px; margin: 0; color: #334e68; cursor: pointer; font-size: 10px; font-weight: 720; }
.wa-modern-auth .auth-v2-remember input { width: 16px; height: 16px; margin: 0; accent-color: #0071e4; cursor: pointer; }
.wa-modern-auth .auth-v2-remember-row > small { color: #829ab1 !important; font-size: 8px; text-align: right; }
.wa-modern-auth .auth-v2-submit { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; margin: 2px 0 0; padding: 0 20px; color: #fff; background: #0071e4; border: 1px solid #0071e4; border-radius: 14px; box-shadow: 0 14px 30px rgba(0,113,228,.23); cursor: pointer; font: inherit; font-size: 11px; font-weight: 760; transition: transform .18s ease, box-shadow .18s ease; }
.wa-modern-auth .auth-v2-submit:hover { box-shadow: 0 18px 34px rgba(0,113,228,.3); transform: translateY(-2px); }
.wa-modern-auth .auth-v2-submit > span:last-child { font-size: 19px; font-weight: 400; }
.wa-modern-auth .login-alert { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 13px 14px; color: #9e3543; background: #fff0f1; border: 1px solid #f2cbd0; border-radius: 12px; box-shadow: none; font-size: 10px; line-height: 1.5; }
.wa-modern-auth .login-alert__lamp { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 3px; background: #df5262; border: 0; border-radius: 50%; box-shadow: 0 0 0 4px rgba(223,82,98,.11); }
.wa-modern-auth .auth-v2-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 35px; padding-top: 20px; color: #7890a4; border-top: 1px solid #dce7ee; }
.wa-modern-auth .auth-v2-note > span { display: grid; flex: 0 0 auto; width: 20px; height: 20px; color: #0f4c81; background: #e7f3fa; border-radius: 50%; font-size: 9px; font-weight: 800; place-items: center; }
.wa-modern-auth .auth-v2-note p { margin: 1px 0 0; font-size: 9px; line-height: 1.55; }
.wa-modern-auth :focus-visible { outline: 3px solid rgba(0,113,228,.42); outline-offset: 3px; }

@media (max-width: 1040px) {
    .wa-modern-auth .auth-v2 { grid-template-columns: minmax(360px, .85fr) minmax(430px, 1.15fr); }
    .wa-modern-auth .auth-v2-capabilities { grid-template-columns: 1fr; }
    .wa-modern-auth .auth-v2-capabilities > div:nth-child(n+3) { display: none; }
}

@media (max-width: 800px) {
    .wa-modern-auth .auth-v2 { display: block; }
    .wa-modern-auth .auth-v2-visual { display: none; }
    .wa-modern-auth .auth-v2-panel { min-height: 100vh; padding: 38px 24px; }
    .wa-modern-auth .auth-v2-mobile-brand { display: flex; margin-bottom: 70px; }
    .wa-modern-auth .auth-v2-mobile-brand .auth-v2-brand__mark { color: #fff; background: #0f4c81; box-shadow: 0 9px 20px rgba(15,76,129,.2); }
    .wa-modern-auth .auth-v2-mobile-brand strong { color: #102a43; font-size: 15px; }
    .wa-modern-auth .auth-v2-mobile-brand small { margin-top: 2px; color: #718ca2 !important; font-size: 8px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
}

@media (max-width: 480px) {
    .wa-modern-auth .auth-v2-panel { padding: 28px 18px; place-items: start center; }
    .wa-modern-auth .auth-v2-mobile-brand { margin-bottom: 52px; }
    .wa-modern-auth .auth-v2-form-header { margin-bottom: 30px; }
    .wa-modern-auth .auth-v2-form-header h2 { font-size: 30px; }
    .wa-modern-auth .auth-v2-remember-row { align-items: flex-start; flex-direction: column; gap: 7px; }
    .wa-modern-auth .auth-v2-remember-row > small { text-align: left; }
}

/* ========================================================================
   Glass authentication theme
   Reference palette: #b5e0ea, #0071e4, #0f4c81
   ======================================================================== */
body.wa-glass-auth {
    color: #0a3155;
    background: #0f4c81;
    background-image:
        radial-gradient(circle at 18% 12%, rgba(181, 224, 234, 0.5) 0, rgba(181, 224, 234, 0) 30%),
        radial-gradient(circle at 82% 18%, rgba(0, 113, 228, 0.6) 0, rgba(0, 113, 228, 0) 30%),
        linear-gradient(145deg, #0f4c81 0%, #0071e4 48%, #07345d 100%);
    background-attachment: fixed;
}

body.wa-glass-auth::before {
    inset: 18px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow: inset 0 0 0 1px rgba(181, 224, 234, 0.12);
}

.wa-glass-auth .login-console,
.wa-glass-auth .error-console {
    background: rgba(246, 252, 255, 0.7);
    background-image: none;
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 24px;
    box-shadow: 0 30px 80px rgba(4, 36, 68, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    backdrop-filter: blur(28px) saturate(150%);
}

.wa-glass-auth .login-console::before,
.wa-glass-auth .login-console::after { display: none; }

.wa-glass-auth .login-brand__seal {
    color: #ffffff;
    background: linear-gradient(145deg, #b5e0ea, #0071e4 58%, #0f4c81);
    border: 1px solid rgba(255, 255, 255, 0.82);
    box-shadow: 0 14px 30px rgba(15, 76, 129, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    text-shadow: 0 1px 2px rgba(15, 76, 129, 0.5);
}

.wa-glass-auth .login-brand__eyebrow,
.wa-glass-auth .error-eyebrow { color: #0068d2; }
.wa-glass-auth .login-brand h1,
.wa-glass-auth .error-console h1 { color: #0f4c81; }
.wa-glass-auth .login-brand p,
.wa-glass-auth .login-note,
.wa-glass-auth .error-copy { color: #536f86; }

.wa-glass-auth .login-console__divider {
    height: 5px;
    padding: 0;
    background: rgba(15, 76, 129, 0.09);
    border: 0;
    border-radius: 999px;
    box-shadow: none;
}

.wa-glass-auth .login-console__divider span {
    height: 5px;
    background: linear-gradient(90deg, #b5e0ea, #0071e4, #0f4c81);
}

.wa-glass-auth .login-field label { color: #264d6c; }

.wa-glass-auth .login-control {
    min-height: 52px;
    background: rgba(255, 255, 255, 0.52);
    border: 1px solid rgba(255, 255, 255, 0.86);
    border-radius: 13px;
    box-shadow: 0 8px 22px rgba(15, 76, 129, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.wa-glass-auth .login-control > span {
    color: #0071e4;
    border-right-color: rgba(15, 76, 129, 0.13);
}

.wa-glass-auth .login-control:focus-within {
    border-color: rgba(0, 113, 228, 0.62);
    box-shadow: 0 0 0 4px rgba(0, 113, 228, 0.14), 0 10px 24px rgba(15, 76, 129, 0.12);
}

.wa-glass-auth .password-toggle {
    color: #0f4c81;
    background: rgba(181, 224, 234, 0.28);
    border-left-color: rgba(15, 76, 129, 0.12);
}

.wa-glass-auth .login-submit,
.wa-glass-auth .error-primary {
    color: #ffffff;
    background: linear-gradient(135deg, #0071e4, #0f4c81);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 13px;
    box-shadow: 0 14px 30px rgba(0, 85, 172, 0.25);
    text-shadow: none;
}

.wa-glass-auth .login-submit__lamp {
    background: #b5e0ea;
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 12px rgba(181, 224, 234, 0.8);
}

.wa-glass-auth .login-note { border-top-color: rgba(15, 76, 129, 0.13); }
.wa-glass-auth .login-note > span { color: #0071e4; }

.wa-glass-auth .error-gauge {
    background: rgba(255, 255, 255, 0.44);
    border: 1px solid rgba(255, 255, 255, 0.84);
    box-shadow: 0 14px 34px rgba(15, 76, 129, 0.15);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.wa-glass-auth .error-gauge__code { color: #0f4c81; }
.wa-glass-auth .error-secondary {
    color: #0f4c81;
    background: rgba(255, 255, 255, 0.48);
    border: 1px solid rgba(255, 255, 255, 0.82);
    box-shadow: 0 8px 20px rgba(15, 76, 129, 0.11);
}

.wa-glass-auth .error-detail pre {
    color: #effaff;
    background: rgba(7, 47, 85, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.wa-glass-auth :focus-visible {
    outline-color: rgba(181, 224, 234, 0.95);
}

@media (max-width: 560px) {
    body.wa-glass-auth::before { inset: 8px; }
    .wa-glass-auth .login-console,
    .wa-glass-auth .error-console { border-radius: 19px; }
}
:focus-visible { outline-color: rgba(75, 158, 216, 0.8); }

@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
    }
}

/* Standalone error console uses the same materials as login. */
.error-stage {
    display: grid;
    min-height: 100vh;
    padding: 45px 20px;
    place-items: center;
}

.error-console {
    position: relative;
    width: min(100%, 590px);
    padding: 38px 42px;
    text-align: center;
    background: linear-gradient(155deg, #fffaf0, #e9dbc3);
    border: 1px solid #d5b981;
    border-radius: 15px;
    box-shadow: 0 28px 65px rgba(4, 2, 1, 0.5), inset 0 0 0 4px rgba(255, 255, 255, 0.4);
}

.error-gauge {
    position: relative;
    display: grid;
    width: 108px;
    height: 108px;
    margin: 0 auto 22px;
    place-items: center;
    background: radial-gradient(circle, #f8efdc 0 53%, #a58e6b 55% 58%, #4a2d21 60% 100%);
    border: 2px solid #26150f;
    border-radius: 50%;
    box-shadow: 0 6px 13px rgba(48, 29, 18, 0.35), inset 0 2px 3px #fff;
}

.error-gauge__code {
    color: #71372e;
    font-family: Georgia, serif;
    font-size: 28px;
    font-weight: 800;
}

.error-gauge__lamp {
    position: absolute;
    right: 9px;
    bottom: 13px;
    width: 11px;
    height: 11px;
    background: radial-gradient(circle at 35% 30%, #ffcec5, #b4493f 55%, #68251f);
    border: 1px solid #783027;
    border-radius: 50%;
    box-shadow: 0 0 7px rgba(181, 68, 57, 0.58);
}

.error-eyebrow {
    margin: 0 0 7px;
    color: #8b642d;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.error-console h1 {
    margin: 0;
    color: #392b22;
    font-family: Georgia, serif;
    font-size: 29px;
}

.error-copy {
    max-width: 470px;
    margin: 13px auto 25px;
    color: #74675a;
    font-size: 13px;
    line-height: 1.6;
}

.error-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.error-primary,
.error-secondary {
    min-height: 43px;
    padding: 10px 18px;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
}

.error-primary {
    color: #fff8e8;
    background: linear-gradient(180deg, #548c73, #285f49);
    border: 1px solid #1c4937;
    box-shadow: 0 4px 7px rgba(34, 58, 41, 0.27), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.error-secondary {
    color: #4b3c30;
    background: linear-gradient(180deg, #fffaf0, #d3c3aa);
    border: 1px solid #9d896b;
    box-shadow: 0 3px 5px rgba(52, 34, 22, 0.19), inset 0 1px 0 #fff;
}

.error-detail {
    margin-top: 24px;
    color: #665648;
    text-align: left;
}

.error-detail summary {
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.error-detail pre {
    max-height: 230px;
    overflow: auto;
    padding: 14px;
    color: #ebdfcc;
    background: #251610;
    border-radius: 7px;
    font-size: 11px;
    line-height: 1.5;
    white-space: pre-wrap;
}

@media (max-width: 560px) {
    .error-console {
        padding: 32px 21px;
    }

    .error-actions {
        flex-direction: column;
    }
}

/* Error console palette overrides must follow its structural declarations. */
.error-console {
    background: linear-gradient(155deg, #ffffff, #dfedf7);
    border-color: #9bbbd3;
    box-shadow: 0 28px 65px rgba(0, 8, 20, 0.52), inset 0 0 0 4px rgba(255, 255, 255, 0.55);
}

.error-gauge {
    background: radial-gradient(circle, #f7fbff 0 53%, #8facbf 55% 58%, #092746 60% 100%);
    border-color: #031225;
    box-shadow: 0 6px 13px rgba(2, 31, 57, 0.36), inset 0 2px 3px #fff;
}

.error-gauge__code { color: #154f7d; }
.error-eyebrow { color: #17649e; }
.error-console h1 { color: #10253d; }
.error-copy,
.error-detail { color: #5d7185; }

.error-primary {
    color: #ffffff;
    background: linear-gradient(180deg, #4398d7, #2474b5 56%, #0c4f88);
    border-color: #083f6d;
    box-shadow: 0 4px 7px rgba(3, 48, 82, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.error-secondary {
    color: #173b59;
    background: linear-gradient(180deg, #ffffff, #d3e3ef);
    border-color: #829fb7;
    box-shadow: 0 3px 5px rgba(4, 37, 65, 0.19), inset 0 1px 0 #fff;
}

.error-detail pre { color: #eaf6ff; background: #041225; }