.auth-body {
    min-height: 100vh;
    background: #f3f5f9;
    color: #26344d;
}

.auth-shell {
    display: grid;
    min-height: 100vh;
    grid-template-columns: minmax(0, 1.05fr) minmax(430px, .95fr);
    gap: clamp(24px, 5vw, 76px);
    max-width: 1540px;
    margin: 0 auto;
    padding: clamp(20px, 3vw, 46px);
}

.auth-brand-panel {
    position: relative;
    display: flex;
    min-height: 680px;
    flex-direction: column;
    overflow: hidden;
    padding: clamp(30px, 5vw, 72px);
    border-radius: 28px;
    background: linear-gradient(145deg, #102650 0%, #17346b 58%, #24477c 100%);
    color: #fff;
    isolation: isolate;
}

.auth-brand-panel::before,
.auth-brand-panel::after {
    position: absolute;
    z-index: -1;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 50%;
    content: "";
}

.auth-brand-panel::before {
    right: -210px;
    bottom: -240px;
    width: 620px;
    height: 620px;
    box-shadow: 0 0 0 54px rgb(255 255 255 / 3%), 0 0 0 108px rgb(255 255 255 / 2%);
}

.auth-brand-panel::after {
    right: 12%;
    bottom: 17%;
    width: 14px;
    height: 14px;
    border: 0;
    background: #f15a2a;
    box-shadow: 32px 28px 0 -4px #f7a184, -29px 35px 0 -5px #fff;
}

.auth-brand {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 12px;
    color: inherit;
}

.auth-brand .brand-mark {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: #fff;
    color: #17346b;
    box-shadow: 0 9px 22px rgb(0 0 0 / 15%);
}

.auth-brand .brand-mark i {
    border-color: #f15a2a;
}

.auth-brand .brand-name {
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.55px;
}

.auth-brand .brand-light {
    color: #d7e1f1;
    font-weight: 500;
}

.auth-brand small {
    display: block;
    margin-top: 5px;
    color: #bdcbe0;
    font-size: 8px;
    letter-spacing: 1.1px;
}

.auth-brand-copy {
    max-width: 520px;
    margin: auto 0;
    padding: 80px 0;
}

.auth-brand-copy .eyebrow,
.auth-form-wrap > .eyebrow {
    color: #f28a66;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.45px;
}

.auth-brand-copy h1 {
    margin: 18px 0 16px;
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: clamp(38px, 4.5vw, 62px);
    font-weight: 750;
    letter-spacing: -2.7px;
    line-height: 1.08;
}

.auth-brand-copy > p:last-child {
    max-width: 410px;
    margin: 0;
    color: #d3dced;
    font-size: 15px;
    line-height: 1.75;
}

.auth-brand-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    color: #bfcee2;
    font-size: 10px;
}

.auth-brand-footer span:first-child {
    color: #fff;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.auth-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
}

.auth-form-wrap {
    width: min(100%, 440px);
    padding: clamp(26px, 4vw, 46px);
    border: 1px solid #e6eaf0;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 55px rgb(23 36 75 / 8%);
}

.auth-mobile-brand {
    display: none;
}

.auth-form-wrap > .eyebrow {
    margin: 0 0 10px;
}

.auth-form-wrap h2 {
    margin: 0;
    color: #1c2b49;
    font-family: 'Manrope', sans-serif;
    font-size: clamp(25px, 3vw, 32px);
    font-weight: 750;
    letter-spacing: -1.1px;
    line-height: 1.2;
}

.auth-intro {
    margin: 10px 0 26px;
    color: #78859a;
    font-size: 13px;
    line-height: 1.65;
}

.auth-form {
    display: grid;
    gap: 17px;
}

.auth-form .field {
    display: grid;
    gap: 7px;
    margin: 0;
}

.auth-form .field label {
    color: #35435b;
    font-size: 11px;
    font-weight: 700;
}

.auth-form .field input,
.auth-form .field select {
    width: 100%;
    min-height: 46px;
    padding: 0 13px;
    border: 1px solid #dfe5ed;
    border-radius: 9px;
    outline: none;
    background: #fbfcfe;
    color: #25334d;
    font-size: 13px;
    transition: border-color .16s, box-shadow .16s, background .16s;
}

.auth-form .field input:focus,
.auth-form .field select:focus {
    border-color: #e99270;
    outline: none;
    background: #fff;
    box-shadow: 0 0 0 4px #fff0e9;
}

.auth-form .field small {
    color: #8591a4;
    font-size: 10px;
    line-height: 1.55;
}

.auth-form .field [data-valmsg-for] {
    color: #b94a36;
    font-size: 10px;
}

.auth-remember {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #66748a;
    font-size: 11px;
    cursor: pointer;
}

.auth-remember input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: #f15a2a;
}

.auth-submit {
    width: 100%;
    min-height: 47px;
    margin-top: 2px;
    border-radius: 9px;
    background: #f15a2a;
    color: #fff;
    font-size: 12px;
    box-shadow: 0 7px 16px rgb(241 90 42 / 22%);
    transition: background .16s, transform .16s, box-shadow .16s;
}

.auth-submit:hover {
    transform: translateY(-1px);
    background: #d94b20;
    box-shadow: 0 9px 20px rgb(241 90 42 / 27%);
}

.auth-submit span {
    font-size: 17px;
}

.auth-message,
.validation-summary:not(:empty) {
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid #f1c8bd;
    border-radius: 9px;
    background: #fff6f3;
    color: #a6462e;
    font-size: 11px;
    line-height: 1.55;
}

.auth-message.success {
    border-color: #cfe5d8;
    background: #f1f8f3;
    color: #276344;
}

.validation-summary:empty {
    display: none;
}

.validation-summary ul {
    margin: 0;
    padding-left: 18px;
}

.first-admin-setup {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #edf0f4;
}

.first-admin-setup summary {
    color: #40516d;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.first-admin-setup summary::marker {
    color: #f15a2a;
}

.first-admin-setup > p {
    margin: 10px 0 16px;
    color: #8490a2;
    font-size: 10px;
    line-height: 1.55;
}

.first-admin-setup[open] .auth-form {
    gap: 13px;
    margin-top: 14px;
}

.first-admin-setup .auth-submit {
    border: 1px solid #dce4ef;
    background: #f4f7fb;
    color: #17346b;
    box-shadow: none;
}

.first-admin-setup .auth-submit:hover {
    border-color: #cbd7e8;
    background: #eaf0f8;
}

.auth-footnote {
    margin: 20px 0 0;
    color: #929cad;
    font-size: 10px;
    line-height: 1.55;
    text-align: center;
}

@media (max-width: 900px) {
    .auth-shell {
        grid-template-columns: minmax(0, .85fr) minmax(390px, 1.15fr);
        gap: 24px;
        padding: 20px;
    }

    .auth-brand-panel {
        min-height: 620px;
        padding: 34px;
    }

    .auth-brand-copy h1 {
        font-size: 43px;
    }
}

@media (max-width: 700px) {
    .auth-shell {
        display: block;
        min-height: 100vh;
        padding: 0;
    }

    .auth-brand-panel {
        display: none;
    }

    .auth-form-panel {
        min-height: 100vh;
        padding: 22px 16px;
    }

    .auth-form-wrap {
        width: min(100%, 460px);
        padding: 28px 23px;
        border-radius: 18px;
    }

    .auth-mobile-brand {
        display: block;
        margin-bottom: 30px;
    }

    .auth-mobile-brand .auth-brand .brand-mark {
        width: 40px;
        height: 40px;
        background: #17346b;
        color: #fff;
    }

    .auth-mobile-brand .auth-brand .brand-light,
    .auth-mobile-brand .auth-brand .brand-name {
        color: #17346b;
    }

    .auth-intro {
        margin-bottom: 22px;
    }
}

@media (max-width: 380px) {
    .auth-form-wrap {
        padding: 24px 18px;
    }

    .auth-form-wrap h2 {
        font-size: 24px;
    }
}