/* =====================================================================
   CHUM 2.0
   AUTHENTICATION + ACCOUNT + ADMIN
   PREMIUM ECOMMERCE / LIQUID GLASS
   FILE: public/assets/css/auth.css
   ===================================================================== */


/* =====================================================================
   SHARED VARIABLES
   ===================================================================== */

.chum-auth-page,
.chum-admin-login-page,
.chum-account-page,
.chum-admin-page {
    --auth-primary:
        var(
            --chum-primary,
            #e84164
        );

    --auth-primary-dark:
        #d9365a;

    --auth-navy:
        var(
            --chum-navy,
            #1b1c64
        );

    --auth-text:
        #111820;

    --auth-copy:
        #56636e;

    --auth-muted:
        #7d8993;

    --auth-line:
        rgba(
            31,
            47,
            59,
            0.09
        );

    --auth-glass-border:
        rgba(
            255,
            255,
            255,
            0.96
        );

    --auth-glass-edge:
        rgba(
            30,
            46,
            58,
            0.11
        );

    color:
        var(--auth-text);
}


/* =====================================================================
   AUTH PAGE
   ===================================================================== */

.chum-auth-page,
.chum-admin-login-page {
    position:
        relative;

    width:
        100%;

    min-height:
        calc(
            100dvh - 132px
        );

    padding:
        42px
        28px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    background:
        radial-gradient(
            820px
            480px
            at
            -5%
            0%,
            rgba(
                61,
                210,
                247,
                0.13
            ),
            transparent
            68%
        ),
        radial-gradient(
            700px
            450px
            at
            105%
            100%,
            rgba(
                78,
                142,
                255,
                0.065
            ),
            transparent
            72%
        ),
        linear-gradient(
            180deg,
            #f8fbfc 0%,
            #f3f7f9 100%
        );

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}


/* =====================================================================
   AUTH BACKGROUND DETAIL
   ===================================================================== */

.chum-auth-page::before,
.chum-admin-login-page::before {
    content:
        "";

    position:
        absolute;

    top:
        -240px;

    right:
        -210px;

    width:
        560px;

    height:
        560px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                232,
                65,
                100,
                0.055
            ),
            transparent
            68%
        );

    pointer-events:
        none;
}


/* =====================================================================
   AUTH SHELL
   ===================================================================== */

.chum-auth-shell {
    position:
        relative;

    isolation:
        isolate;

    width:
        min(
            1180px,
            100%
        );

    min-height:
        625px;

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        minmax(
            430px,
            0.82fr
        );

    overflow:
        hidden;

    border:
        1.5px
        solid
        var(--auth-glass-border);

    border-radius:
        30px;

    background:
        rgba(
            255,
            255,
            255,
            0.38
        );

    -webkit-backdrop-filter:
        blur(
            28px
        )
        saturate(
            180%
        );

    backdrop-filter:
        blur(
            28px
        )
        saturate(
            180%
        );

    box-shadow:
        0
        0
        0
        1px
        var(--auth-glass-edge),

        inset
        0
        1px
        0
        #ffffff,

        0
        28px
        70px
        rgba(
            18,
            34,
            46,
            0.11
        );
}


/* glass highlight */

.chum-auth-shell::before {
    content:
        "";

    position:
        absolute;

    z-index:
        8;

    top:
        1px;

    left:
        6%;

    width:
        58%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ffffff,
            transparent
        );

    pointer-events:
        none;
}


/* =====================================================================
   BRAND PANEL
   ===================================================================== */

.chum-auth-brand-panel {
    position:
        relative;

    min-width:
        0;

    padding:
        43px
        47px
        35px;

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    border-right:
        1px
        solid
        rgba(
            33,
            50,
            62,
            0.08
        );

    background:
        radial-gradient(
            550px
            410px
            at
            0%
            0%,
            rgba(
                75,
                212,
                247,
                0.19
            ),
            transparent
            68%
        ),
        radial-gradient(
            420px
            350px
            at
            100%
            100%,
            rgba(
                232,
                65,
                100,
                0.075
            ),
            transparent
            70%
        ),
        linear-gradient(
            145deg,
            rgba(
                241,
                250,
                252,
                0.88
            ),
            rgba(
                255,
                255,
                255,
                0.43
            )
        );
}


/* =====================================================================
   BRAND GLOW
   ===================================================================== */

.chum-auth-brand-panel::before {
    content:
        "";

    position:
        absolute;

    top:
        150px;

    right:
        -130px;

    width:
        360px;

    height:
        360px;

    border:
        1px
        solid
        rgba(
            255,
            255,
            255,
            0.66
        );

    border-radius:
        50%;

    background:
        rgba(
            255,
            255,
            255,
            0.08
        );

    box-shadow:
        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            0.68
        );

    pointer-events:
        none;
}


/* =====================================================================
   BRAND TOP
   ===================================================================== */

.chum-auth-brand-top {
    position:
        relative;

    z-index:
        2;

    min-height:
        70px;

    display:
        flex;

    align-items:
        flex-start;
}


/* =====================================================================
   LOGO
   ===================================================================== */

.chum-auth-logo {
    display:
        inline-flex;

    align-items:
        center;

    text-decoration:
        none;
}


.chum-auth-logo img {
    display:
        block;

    width:
        178px;

    height:
        auto;

    max-width:
        100%;

    filter:
        none !important;
}


/* =====================================================================
   MOBILE LOGO
   ===================================================================== */

.chum-auth-mobile-logo {
    display:
        none;
}


.chum-auth-mobile-logo img {
    width:
        138px;

    height:
        auto;
}


/* =====================================================================
   BRAND COPY
   ===================================================================== */

.chum-auth-brand-copy {
    position:
        relative;

    z-index:
        2;

    max-width:
        570px;

    margin-top:
        47px;
}


.chum-auth-eyebrow {
    width:
        fit-content;

    min-height:
        28px;

    margin-bottom:
        13px;

    padding:
        0
        10px;

    display:
        inline-flex;

    align-items:
        center;

    border:
        1px
        solid
        rgba(
            232,
            65,
            100,
            0.17
        );

    border-radius:
        999px;

    background:
        rgba(
            255,
            255,
            255,
            0.53
        );

    color:
        var(--auth-primary);

    font-size:
        10px;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


.chum-auth-brand-copy h1 {
    max-width:
        540px;

    margin:
        0;

    color:
        #0b141b;

    font-size:
        clamp(
            38px,
            3.4vw,
            50px
        );

    font-weight:
        820;

    line-height:
        1.02;

    letter-spacing:
        -0.052em;
}


.chum-auth-brand-copy p {
    max-width:
        530px;

    margin:
        18px
        0
        0;

    color:
        #53616c;

    font-size:
        14px;

    line-height:
        1.68;
}


/* =====================================================================
   BENEFITS
   ===================================================================== */

.chum-auth-benefits {
    position:
        relative;

    z-index:
        2;

    max-width:
        520px;

    margin-top:
        auto;

    padding-top:
        42px;

    display:
        grid;

    gap:
        0;
}


.chum-auth-benefits > div {
    min-height:
        64px;

    padding:
        11px
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    border-top:
        1px
        solid
        rgba(
            31,
            47,
            59,
            0.085
        );
}


/* =====================================================================
   BENEFIT ICON
   ===================================================================== */

.chum-auth-benefit-icon {
    width:
        38px;

    height:
        38px;

    flex:
        0
        0
        38px;

    display:
        grid;

    place-items:
        center;

    border:
        1.5px
        solid
        rgba(
            255,
            255,
            255,
            0.96
        );

    border-radius:
        11px;

    background:
        rgba(
            255,
            255,
            255,
            0.19
        );

    -webkit-backdrop-filter:
        blur(
            14px
        )
        saturate(
            170%
        );

    backdrop-filter:
        blur(
            14px
        )
        saturate(
            170%
        );

    box-shadow:
        0
        0
        0
        1px
        rgba(
            37,
            54,
            66,
            0.08
        ),

        inset
        0
        1px
        0
        #ffffff,

        0
        5px
        12px
        rgba(
            22,
            38,
            49,
            0.05
        );

    color:
        var(--auth-primary);
}


.chum-auth-benefit-icon svg {
    width:
        19px;

    height:
        19px;
}


.chum-auth-benefits strong {
    display:
        block;

    margin-bottom:
        3px;

    color:
        #25313a;

    font-size:
        13px;

    font-weight:
        760;
}


.chum-auth-benefits small {
    display:
        block;

    color:
        #72808a;

    font-size:
        11px;

    line-height:
        1.45;
}


/* =====================================================================
   BRAND FOOTER
   ===================================================================== */

.chum-auth-brand-footer {
    position:
        relative;

    z-index:
        2;

    margin-top:
        24px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    color:
        #7a8790;

    font-size:
        10px;
}


.chum-auth-live-dot {
    width:
        7px;

    height:
        7px;

    flex:
        0
        0
        7px;

    border-radius:
        50%;

    background:
        #16a06d;

    box-shadow:
        0
        0
        0
        4px
        rgba(
            22,
            160,
            109,
            0.10
        );
}


/* =====================================================================
   FORM PANEL
   ===================================================================== */

.chum-auth-form-panel {
    position:
        relative;

    min-width:
        0;

    padding:
        48px
        50px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(
            255,
            255,
            255,
            0.68
        );
}


/* =====================================================================
   FORM CARD
   ===================================================================== */

.chum-auth-form-card {
    width:
        100%;

    max-width:
        405px;

    margin:
        0
        auto;
}


/* register slightly wider */

.chum-auth-shell--register
.chum-auth-form-card {
    max-width:
        420px;
}


/* =====================================================================
   FORM HEADING
   ===================================================================== */

.chum-auth-form-heading {
    margin-bottom:
        25px;
}


.chum-auth-form-heading > span {
    color:
        var(--auth-primary);

    font-size:
        10px;

    font-weight:
        820;

    letter-spacing:
        0.085em;

    text-transform:
        uppercase;
}


.chum-auth-form-heading h2 {
    margin:
        6px
        0
        8px;

    color:
        #0d161d;

    font-size:
        38px;

    font-weight:
        820;

    line-height:
        1;

    letter-spacing:
        -0.047em;
}


.chum-auth-form-heading p {
    max-width:
        370px;

    margin:
        0;

    color:
        #68757f;

    font-size:
        13px;

    line-height:
        1.55;
}


/* =====================================================================
   GOOGLE GLASS BUTTON
   ===================================================================== */

.chum-google-button {
    position:
        relative;

    isolation:
        isolate;

    width:
        100%;

    min-height:
        52px;

    padding:
        0
        16px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        11px;

    overflow:
        hidden;

    border:
        1.5px
        solid
        var(--auth-glass-border);

    border-radius:
        13px;

    background:
        rgba(
            255,
            255,
            255,
            0.18
        );

    -webkit-backdrop-filter:
        blur(
            20px
        )
        saturate(
            180%
        );

    backdrop-filter:
        blur(
            20px
        )
        saturate(
            180%
        );

    box-shadow:
        0
        0
        0
        1px
        var(--auth-glass-edge),

        inset
        0
        1px
        0
        #ffffff,

        inset
        0
        -1px
        0
        rgba(
            255,
            255,
            255,
            0.43
        ),

        0
        8px
        19px
        rgba(
            18,
            33,
            44,
            0.075
        );

    color:
        #1e2932;

    cursor:
        pointer;

    font-size:
        13px;

    font-weight:
        720;

    transition:
        transform
        170ms
        ease,
        background
        170ms
        ease,
        box-shadow
        170ms
        ease;
}


.chum-google-button::before {
    content:
        "";

    position:
        absolute;

    top:
        1px;

    left:
        14px;

    right:
        14px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ffffff,
            transparent
        );

    pointer-events:
        none;
}


.chum-google-button:hover {
    transform:
        translateY(
            -2px
        );

    background:
        rgba(
            255,
            255,
            255,
            0.38
        );

    box-shadow:
        0
        0
        0
        1px
        rgba(
            31,
            47,
            59,
            0.14
        ),

        inset
        0
        1px
        0
        #ffffff,

        0
        12px
        25px
        rgba(
            18,
            33,
            44,
            0.10
        );
}


/* =====================================================================
   GOOGLE ICON
   ===================================================================== */

.chum-google-icon {
    width:
        26px;

    height:
        26px;

    flex:
        0
        0
        26px;

    display:
        grid;

    place-items:
        center;

    border:
        1px
        solid
        rgba(
            32,
            48,
            59,
            0.08
        );

    border-radius:
        8px;

    background:
        #ffffff;

    box-shadow:
        0
        2px
        7px
        rgba(
            20,
            32,
            42,
            0.09
        );

    color:
        #4285f4;

    font-size:
        14px;

    font-weight:
        850;
}


/* =====================================================================
   DIVIDER
   ===================================================================== */

.chum-auth-divider {
    position:
        relative;

    margin:
        23px
        0;

    text-align:
        center;
}


.chum-auth-divider::before {
    content:
        "";

    position:
        absolute;

    top:
        50%;

    left:
        0;

    width:
        100%;

    height:
        1px;

    background:
        rgba(
            34,
            51,
            63,
            0.095
        );
}


.chum-auth-divider span {
    position:
        relative;

    z-index:
        1;

    padding:
        0
        12px;

    background:
        #f9fbfc;

    color:
        #89949d;

    font-size:
        10px;

    white-space:
        nowrap;
}


/* =====================================================================
   AUTH FORM
   ===================================================================== */

.chum-auth-form {
    width:
        100%;

    display:
        flex;

    flex-direction:
        column;

    gap:
        17px;
}


/* =====================================================================
   FIELD
   ===================================================================== */

.chum-auth-field {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;
}


.chum-auth-field label {
    color:
        #34414b;

    font-size:
        12px;

    font-weight:
        700;
}


/* =====================================================================
   LABEL ROW
   ===================================================================== */

.chum-auth-label-row {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;
}


.chum-auth-label-row a {
    color:
        var(--auth-primary);

    text-decoration:
        none;

    font-size:
        11px;

    font-weight:
        690;
}


.chum-auth-label-row a:hover {
    color:
        var(--auth-primary-dark);
}


/* =====================================================================
   STANDARD INPUT WRAPPER
   ===================================================================== */

.chum-auth-input-wrap,
.chum-password-field {
    position:
        relative;

    width:
        100%;

    height:
        52px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    border:
        1.5px
        solid
        rgba(
            255,
            255,
            255,
            0.98
        );

    border-radius:
        13px;

    background:
        rgba(
            255,
            255,
            255,
            0.30
        );

    -webkit-backdrop-filter:
        blur(
            16px
        )
        saturate(
            165%
        );

    backdrop-filter:
        blur(
            16px
        )
        saturate(
            165%
        );

    box-shadow:
        0
        0
        0
        1px
        rgba(
            34,
            51,
            63,
            0.11
        ),

        inset
        0
        1px
        0
        #ffffff;

    transition:
        background
        170ms
        ease,
        box-shadow
        170ms
        ease,
        transform
        170ms
        ease;
}


/* =====================================================================
   FOCUS INPUT WRAPPER
   ===================================================================== */

.chum-auth-input-wrap:focus-within,
.chum-password-field:focus-within {
    background:
        rgba(
            255,
            255,
            255,
            0.66
        );

    box-shadow:
        0
        0
        0
        1px
        rgba(
            232,
            65,
            100,
            0.38
        ),

        0
        0
        0
        4px
        rgba(
            232,
            65,
            100,
            0.07
        ),

        inset
        0
        1px
        0
        #ffffff;
}


/* =====================================================================
   INPUT ICON
   ===================================================================== */

.chum-auth-input-icon {
    width:
        46px;

    height:
        100%;

    flex:
        0
        0
        46px;

    display:
        grid;

    place-items:
        center;

    color:
        #7a8791;
}


.chum-auth-input-icon svg {
    width:
        19px;

    height:
        19px;
}


/* =====================================================================
   INPUT
   ===================================================================== */

.chum-auth-input-wrap input,
.chum-password-field input {
    min-width:
        0;

    width:
        100%;

    height:
        100%;

    flex:
        1;

    margin:
        0;

    padding:
        0
        14px
        0
        0;

    border:
        0;

    outline:
        0;

    background:
        transparent;

    box-shadow:
        none;

    color:
        #152029;

    font-family:
        inherit;

    font-size:
        14px;

    font-weight:
        500;
}


.chum-auth-input-wrap input::placeholder,
.chum-password-field input::placeholder {
    color:
        #909ba4;

    opacity:
        1;
}


/* =====================================================================
   PASSWORD SHOW BUTTON
   ===================================================================== */

.chum-password-field button {
    height:
        36px;

    min-width:
        54px;

    margin-right:
        7px;

    padding:
        0
        11px;

    border:
        1px
        solid
        rgba(
            31,
            47,
            59,
            0.08
        );

    border-radius:
        9px;

    background:
        rgba(
            255,
            255,
            255,
            0.42
        );

    color:
        #53616c;

    cursor:
        pointer;

    font-size:
        10px;

    font-weight:
        700;

    transition:
        color
        160ms
        ease,
        background
        160ms
        ease;
}


.chum-password-field button:hover {
    background:
        rgba(
            255,
            255,
            255,
            0.80
        );

    color:
        var(--auth-primary);
}


/* =====================================================================
   AUTH SUBMIT
   ===================================================================== */

.chum-auth-submit {
    position:
        relative;

    isolation:
        isolate;

    width:
        100%;

    min-height:
        52px;

    margin-top:
        2px;

    padding:
        0
        18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    overflow:
        hidden;

    border:
        1px
        solid
        rgba(
            255,
            255,
            255,
            0.32
        );

    border-radius:
        13px;

    background:
        linear-gradient(
            135deg,
            #ef4169,
            #dc345b
        );

    box-shadow:
        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            0.31
        ),

        0
        10px
        23px
        rgba(
            219,
            51,
            90,
            0.22
        );

    color:
        #ffffff;

    cursor:
        pointer;

    font-size:
        13px;

    font-weight:
        780;

    transition:
        transform
        170ms
        ease,
        box-shadow
        170ms
        ease;
}


.chum-auth-submit::before {
    content:
        "";

    position:
        absolute;

    top:
        1px;

    left:
        14px;

    right:
        14px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                255,
                255,
                255,
                0.88
            ),
            transparent
        );
}


.chum-auth-submit svg {
    width:
        17px;

    height:
        17px;

    transition:
        transform
        170ms
        ease;
}


.chum-auth-submit:hover {
    transform:
        translateY(
            -2px
        );

    box-shadow:
        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            0.35
        ),

        0
        14px
        29px
        rgba(
            219,
            51,
            90,
            0.28
        );
}


.chum-auth-submit:hover svg {
    transform:
        translateX(
            3px
        );
}


/* =====================================================================
   ERROR / MESSAGE
   ===================================================================== */

.chum-auth-message {
    margin-bottom:
        17px;

    padding:
        12px
        14px;

    border-radius:
        11px;

    font-size:
        11px;

    line-height:
        1.5;
}


.chum-auth-message--error {
    border:
        1px
        solid
        rgba(
            196,
            55,
            82,
            0.20
        );

    background:
        rgba(
            255,
            238,
            242,
            0.78
        );

    color:
        #a12f49;
}


/* =====================================================================
   GOOGLE NOTE
   ===================================================================== */

.chum-google-note {
    margin-top:
        14px;

    padding:
        11px
        12px;

    border:
        1px
        solid
        rgba(
            34,
            51,
            63,
            0.08
        );

    border-radius:
        10px;

    background:
        rgba(
            255,
            255,
            255,
            0.44
        );

    color:
        #6d7983;

    font-size:
        10px;

    line-height:
        1.5;
}


/* =====================================================================
   PASSWORD STATUS
   ===================================================================== */

.chum-auth-password-status {
    margin-top:
        -3px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px
        14px;

    color:
        #7c8992;

    font-size:
        10px;
}


.chum-auth-password-status span {
    display:
        inline-flex;

    align-items:
        center;
}


.chum-auth-password-status .is-valid {
    color:
        #15815a;
}


/* =====================================================================
   AUTH SWITCH
   ===================================================================== */

.chum-auth-switch {
    margin-top:
        20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        6px;

    color:
        #697680;

    font-size:
        11px;
}


.chum-auth-switch a {
    color:
        var(--auth-primary);

    font-weight:
        750;

    text-decoration:
        none;
}


.chum-auth-switch a:hover {
    color:
        var(--auth-primary-dark);
}


/* =====================================================================
   TERMS
   ===================================================================== */

.chum-auth-terms {
    max-width:
        360px;

    margin:
        14px
        auto
        0;

    color:
        #86919a;

    font-size:
        9px;

    line-height:
        1.55;

    text-align:
        center;
}


/* =====================================================================
   ACCOUNT PAGE
   ===================================================================== */

.chum-account-page {
    position:
        relative;

    min-height:
        70vh;

    padding:
        46px
        0
        70px;

    overflow:
        hidden;

    background:
        radial-gradient(
            760px
            400px
            at
            -5%
            0%,
            rgba(
                64,
                211,
                246,
                0.085
            ),
            transparent
            70%
        ),
        linear-gradient(
            180deg,
            #f8fbfc,
            #f3f7f9
        );
}


/* =====================================================================
   ACCOUNT CONTAINER
   ===================================================================== */

.chum-account-container {
    width:
        min(
            1420px,
            calc(
                100% - 64px
            )
        );

    margin:
        0
        auto;
}


/* =====================================================================
   ACCOUNT HEADER
   ===================================================================== */

.chum-account-header {
    position:
        relative;

    isolation:
        isolate;

    min-height:
        115px;

    padding:
        24px
        27px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    overflow:
        hidden;

    border:
        1.5px
        solid
        rgba(
            255,
            255,
            255,
            0.98
        );

    border-radius:
        20px;

    background:
        rgba(
            255,
            255,
            255,
            0.35
        );

    -webkit-backdrop-filter:
        blur(
            22px
        )
        saturate(
            175%
        );

    backdrop-filter:
        blur(
            22px
        )
        saturate(
            175%
        );

    box-shadow:
        0
        0
        0
        1px
        rgba(
            37,
            54,
            66,
            0.085
        ),

        inset
        0
        1px
        0
        #ffffff,

        0
        13px
        31px
        rgba(
            18,
            32,
            43,
            0.065
        );
}


/* =====================================================================
   ACCOUNT PROFILE
   ===================================================================== */

.chum-account-profile {
    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        17px;
}


.chum-account-avatar {
    width:
        62px;

    height:
        62px;

    flex:
        0
        0
        62px;

    display:
        grid;

    place-items:
        center;

    border:
        1px
        solid
        rgba(
            255,
            255,
            255,
            0.30
        );

    border-radius:
        18px;

    background:
        linear-gradient(
            145deg,
            #272d72,
            #171c50
        );

    box-shadow:
        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            0.18
        ),

        0
        9px
        19px
        rgba(
            23,
            28,
            80,
            0.15
        );

    color:
        #ffffff;

    font-size:
        22px;

    font-weight:
        790;
}


.chum-account-profile-copy {
    min-width:
        0;
}


.chum-account-profile-copy > span {
    color:
        var(--auth-primary);

    font-size:
        10px;

    font-weight:
        820;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;
}


.chum-account-profile h1 {
    margin:
        4px
        0
        2px;

    color:
        #111a22;

    font-size:
        28px;

    font-weight:
        800;

    line-height:
        1.1;

    letter-spacing:
        -0.035em;
}


.chum-account-profile p {
    margin:
        0;

    color:
        #707d87;

    font-size:
        11px;
}


/* =====================================================================
   SIGN OUT GLASS BUTTON
   ===================================================================== */

.chum-account-logout {
    min-height:
        44px;

    padding:
        0
        16px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1.5px
        solid
        rgba(
            255,
            255,
            255,
            0.97
        );

    border-radius:
        12px;

    background:
        rgba(
            255,
            255,
            255,
            0.17
        );

    -webkit-backdrop-filter:
        blur(
            17px
        )
        saturate(
            175%
        );

    backdrop-filter:
        blur(
            17px
        )
        saturate(
            175%
        );

    box-shadow:
        0
        0
        0
        1px
        rgba(
            38,
            54,
            66,
            0.11
        ),

        inset
        0
        1px
        0
        #ffffff,

        0
        7px
        16px
        rgba(
            18,
            32,
            43,
            0.07
        );

    color:
        #34414b;

    text-decoration:
        none;

    font-size:
        11px;

    font-weight:
        720;

    transition:
        transform
        170ms
        ease,
        background
        170ms
        ease;
}


.chum-account-logout:hover {
    transform:
        translateY(
            -2px
        );

    background:
        rgba(
            255,
            255,
            255,
            0.42
        );

    color:
        var(--auth-primary);
}


/* =====================================================================
   ACCOUNT GRID
   ===================================================================== */

.chum-account-grid {
    margin-top:
        18px;

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    gap:
        14px;
}


/* =====================================================================
   ACCOUNT CARD
   ===================================================================== */

.chum-account-card {
    position:
        relative;

    min-height:
        210px;

    padding:
        21px;

    display:
        flex;

    flex-direction:
        column;

    border:
        1px
        solid
        #e0e6ea;

    border-radius:
        17px;

    background:
        #ffffff;

    box-shadow:
        0
        5px
        17px
        rgba(
            18,
            32,
            43,
            0.038
        );

    transition:
        transform
        190ms
        ease,
        border-color
        190ms
        ease,
        box-shadow
        190ms
        ease;
}


.chum-account-card:hover {
    transform:
        translateY(
            -4px
        );

    border-color:
        rgba(
            232,
            65,
            100,
            0.19
        );

    box-shadow:
        0
        16px
        34px
        rgba(
            18,
            32,
            43,
            0.075
        );
}


/* =====================================================================
   ACCOUNT CARD TOP
   ===================================================================== */

.chum-account-card-top {
    margin-bottom:
        19px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;
}


.chum-account-card-icon {
    width:
        43px;

    height:
        43px;

    display:
        grid;

    place-items:
        center;

    border:
        1px
        solid
        #e2e8ec;

    border-radius:
        12px;

    background:
        #f6f9fa;

    color:
        var(--auth-navy);
}


.chum-account-card-icon svg {
    width:
        21px;

    height:
        21px;
}


.chum-account-empty-count {
    min-width:
        29px;

    height:
        29px;

    padding:
        0
        8px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px
        solid
        #e3e8eb;

    border-radius:
        999px;

    background:
        #f8fafb;

    color:
        #65727c;

    font-size:
        9px;

    font-weight:
        760;
}


/* =====================================================================
   ACCOUNT CARD COPY
   ===================================================================== */

.chum-account-card h2 {
    margin:
        0;

    color:
        #1b2630;

    font-size:
        16px;

    font-weight:
        780;
}


.chum-account-card p {
    margin:
        8px
        0
        20px;

    color:
        #697680;

    font-size:
        11px;

    line-height:
        1.56;
}


.chum-account-card-status {
    margin-top:
        auto;

    color:
        #7b8791;

    font-size:
        10px;

    font-weight:
        650;
}


.chum-account-card-link {
    margin-top:
        auto;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--auth-primary);

    text-decoration:
        none;

    font-size:
        10px;

    font-weight:
        730;
}


.chum-account-card-link span {
    transition:
        transform
        170ms
        ease;
}


.chum-account-card-link:hover span {
    transform:
        translateX(
            3px
        );
}


/* =====================================================================
   ACCOUNT DISCOVER
   ===================================================================== */

.chum-account-discover {
    position:
        relative;

    margin-top:
        18px;

    min-height:
        165px;

    padding:
        28px
        31px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

    overflow:
        hidden;

    border:
        1px
        solid
        rgba(
            255,
            255,
            255,
            0.17
        );

    border-radius:
        19px;

    background:
        radial-gradient(
            480px
            260px
            at
            90%
            10%,
            rgba(
                79,
                211,
                247,
                0.15
            ),
            transparent
            70%
        ),
        linear-gradient(
            120deg,
            #171c50,
            #262c69
        );

    color:
        #ffffff;

    box-shadow:
        0
        17px
        37px
        rgba(
            23,
            28,
            77,
            0.15
        );
}


.chum-account-discover > div {
    position:
        relative;

    z-index:
        2;
}


.chum-account-discover > div > span {
    color:
        #d5edf7;

    font-size:
        9px;

    font-weight:
        780;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;
}


.chum-account-discover h2 {
    max-width:
        700px;

    margin:
        6px
        0
        6px;

    color:
        #ffffff;

    font-size:
        27px;

    font-weight:
        790;

    line-height:
        1.1;

    letter-spacing:
        -0.036em;
}


.chum-account-discover p {
    max-width:
        620px;

    margin:
        0;

    color:
        rgba(
            255,
            255,
            255,
            0.68
        );

    font-size:
        10px;

    line-height:
        1.55;
}


/* =====================================================================
   ACCOUNT DISCOVER GLASS BUTTON
   ===================================================================== */

.chum-account-discover > a {
    position:
        relative;

    z-index:
        2;

    min-width:
        160px;

    min-height:
        47px;

    padding:
        0
        17px;

    flex:
        0
        0
        auto;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    border:
        1.5px
        solid
        rgba(
            255,
            255,
            255,
            0.72
        );

    border-radius:
        12px;

    background:
        rgba(
            255,
            255,
            255,
            0.13
        );

    -webkit-backdrop-filter:
        blur(
            19px
        )
        saturate(
            180%
        );

    backdrop-filter:
        blur(
            19px
        )
        saturate(
            180%
        );

    box-shadow:
        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            0.72
        ),

        0
        8px
        18px
        rgba(
            0,
            0,
            0,
            0.13
        );

    color:
        #ffffff;

    text-decoration:
        none;

    font-size:
        11px;

    font-weight:
        760;

    transition:
        transform
        170ms
        ease,
        background
        170ms
        ease;
}


.chum-account-discover > a:hover {
    transform:
        translateY(
            -2px
        );

    background:
        rgba(
            255,
            255,
            255,
            0.23
        );
}


/* =====================================================================
   ADMIN LOGIN PAGE
   ===================================================================== */

.chum-admin-login-page {
    min-height:
        100dvh;
}


/* =====================================================================
   ADMIN LOGIN CARD
   ===================================================================== */

.chum-admin-login-card {
    position:
        relative;

    isolation:
        isolate;

    width:
        min(
            470px,
            100%
        );

    margin:
        auto;

    padding:
        37px
        38px
        31px;

    overflow:
        hidden;

    border:
        1.5px
        solid
        rgba(
            255,
            255,
            255,
            0.98
        );

    border-radius:
        24px;

    background:
        rgba(
            255,
            255,
            255,
            0.43
        );

    -webkit-backdrop-filter:
        blur(
            27px
        )
        saturate(
            180%
        );

    backdrop-filter:
        blur(
            27px
        )
        saturate(
            180%
        );

    box-shadow:
        0
        0
        0
        1px
        rgba(
            36,
            53,
            65,
            0.10
        ),

        inset
        0
        1px
        0
        #ffffff,

        0
        24px
        58px
        rgba(
            18,
            33,
            44,
            0.11
        );
}


.chum-admin-login-card::before {
    content:
        "";

    position:
        absolute;

    top:
        1px;

    left:
        9%;

    width:
        60%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ffffff,
            transparent
        );
}


/* =====================================================================
   ADMIN LOGIN BRAND
   ===================================================================== */

.chum-admin-login-brand {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;
}


.chum-admin-login-logo {
    display:
        inline-flex;

    text-decoration:
        none;
}


.chum-admin-login-logo img {
    width:
        150px;

    height:
        auto;

    filter:
        none !important;
}


.chum-admin-security-badge {
    min-height:
        27px;

    padding:
        0
        9px;

    display:
        inline-flex;

    align-items:
        center;

    border:
        1px
        solid
        rgba(
            21,
            155,
            103,
            0.16
        );

    border-radius:
        999px;

    background:
        rgba(
            234,
            249,
            242,
            0.70
        );

    color:
        #157653;

    font-size:
        8px;

    font-weight:
        750;
}


/* =====================================================================
   ADMIN LOGIN HEADING
   ===================================================================== */

.chum-admin-login-heading {
    margin:
        37px
        0
        25px;
}


.chum-admin-login-heading > span {
    color:
        var(--auth-primary);

    font-size:
        9px;

    font-weight:
        820;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.chum-admin-login-heading h1 {
    margin:
        6px
        0
        7px;

    color:
        #0e171e;

    font-size:
        34px;

    font-weight:
        820;

    letter-spacing:
        -0.043em;
}


.chum-admin-login-heading p {
    margin:
        0;

    color:
        #6e7a84;

    font-size:
        11px;
}


/* =====================================================================
   ADMIN LOGIN FOOTER
   ===================================================================== */

.chum-admin-login-footer {
    margin-top:
        22px;

    padding-top:
        17px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    border-top:
        1px
        solid
        rgba(
            33,
            50,
            62,
            0.085
        );
}


.chum-admin-login-footer > span {
    color:
        #8a959e;

    font-size:
        9px;
}


.chum-admin-back {
    color:
        #53616c;

    text-decoration:
        none;

    font-size:
        10px;

    font-weight:
        690;
}


.chum-admin-back:hover {
    color:
        var(--auth-primary);
}


/* =====================================================================
   ADMIN PAGE
   ===================================================================== */

.chum-admin-page {
    width:
        100%;

    min-height:
        100dvh;

    display:
        grid;

    grid-template-columns:
        248px
        minmax(
            0,
            1fr
        );

    background:
        #f4f7f9;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}


/* =====================================================================
   ADMIN SIDEBAR
   ===================================================================== */

.chum-admin-sidebar {
    position:
        sticky;

    top:
        0;

    height:
        100dvh;

    padding:
        24px
        15px
        18px;

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    background:
        radial-gradient(
            260px
            240px
            at
            10%
            0%,
            rgba(
                82,
                209,
                245,
                0.11
            ),
            transparent
            75%
        ),
        linear-gradient(
            180deg,
            #161b4d,
            #20265e
        );

    box-shadow:
        10px
        0
        30px
        rgba(
            20,
            26,
            72,
            0.10
        );
}


/* =====================================================================
   ADMIN BRAND
   ===================================================================== */

.chum-admin-brand {
    min-height:
        65px;

    padding:
        0
        10px
        19px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    border-bottom:
        1px
        solid
        rgba(
            255,
            255,
            255,
            0.08
        );

    color:
        #ffffff;

    text-decoration:
        none;
}


.chum-admin-brand img {
    width:
        115px;

    height:
        auto;

    filter:
        brightness(
            0
        )
        invert(
            1
        );
}


.chum-admin-brand > span {
    padding:
        4px
        7px;

    border:
        1px
        solid
        rgba(
            255,
            255,
            255,
            0.12
        );

    border-radius:
        7px;

    background:
        rgba(
            255,
            255,
            255,
            0.08
        );

    color:
        #ffc0cd;

    font-size:
        8px;

    font-weight:
        800;

    text-transform:
        uppercase;
}


/* =====================================================================
   SIDEBAR LABEL
   ===================================================================== */

.chum-admin-sidebar-label {
    margin:
        22px
        11px
        8px;

    color:
        rgba(
            255,
            255,
            255,
            0.35
        );

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


/* =====================================================================
   ADMIN NAV
   ===================================================================== */

.chum-admin-nav {
    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;
}


.chum-admin-nav a {
    min-height:
        43px;

    padding:
        0
        13px;

    display:
        flex;

    align-items:
        center;

    border:
        1px
        solid
        transparent;

    border-radius:
        11px;

    color:
        rgba(
            255,
            255,
            255,
            0.69
        );

    text-decoration:
        none;

    font-size:
        10px;

    font-weight:
        620;

    transition:
        background
        170ms
        ease,
        color
        170ms
        ease,
        border-color
        170ms
        ease;
}


.chum-admin-nav a:hover {
    background:
        rgba(
            255,
            255,
            255,
            0.07
        );

    color:
        #ffffff;
}


.chum-admin-nav a.is-active {
    border-color:
        rgba(
            255,
            255,
            255,
            0.14
        );

    background:
        rgba(
            255,
            255,
            255,
            0.12
        );

    box-shadow:
        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            0.08
        );

    color:
        #ffffff;

    font-weight:
        740;
}


/* =====================================================================
   SIDEBAR FOOTER
   ===================================================================== */

.chum-admin-sidebar-footer {
    margin-top:
        auto;

    padding-top:
        17px;

    border-top:
        1px
        solid
        rgba(
            255,
            255,
            255,
            0.08
        );
}


.chum-admin-sidebar-user {
    padding:
        7px
        9px
        14px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


.chum-admin-sidebar-avatar {
    width:
        34px;

    height:
        34px;

    flex:
        0
        0
        34px;

    display:
        grid;

    place-items:
        center;

    border:
        1px
        solid
        rgba(
            255,
            255,
            255,
            0.16
        );

    border-radius:
        10px;

    background:
        rgba(
            255,
            255,
            255,
            0.10
        );

    color:
        #ffffff;

    font-size:
        11px;

    font-weight:
        760;
}


.chum-admin-sidebar-user strong,
.chum-admin-sidebar-user small {
    display:
        block;
}


.chum-admin-sidebar-user strong {
    color:
        #ffffff;

    font-size:
        9px;

    font-weight:
        710;
}


.chum-admin-sidebar-user small {
    margin-top:
        2px;

    color:
        rgba(
            255,
            255,
            255,
            0.47
        );

    font-size:
        8px;
}


.chum-admin-signout {
    width:
        100%;

    min-height:
        39px;

    padding:
        0
        11px;

    display:
        flex;

    align-items:
        center;

    border:
        1px
        solid
        rgba(
            255,
            255,
            255,
            0.08
        );

    border-radius:
        10px;

    background:
        rgba(
            255,
            255,
            255,
            0.05
        );

    color:
        #f4b6c3;

    text-decoration:
        none;

    font-size:
        9px;

    font-weight:
        680;
}


/* =====================================================================
   ADMIN MAIN
   ===================================================================== */

.chum-admin-main {
    min-width:
        0;

    padding:
        34px;

    background:
        radial-gradient(
            720px
            380px
            at
            100%
            0%,
            rgba(
                75,
                209,
                245,
                0.05
            ),
            transparent
            70%
        ),
        #f4f7f9;
}


/* =====================================================================
   ADMIN TOPBAR
   ===================================================================== */

.chum-admin-topbar {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        30px;

    padding-bottom:
        24px;

    border-bottom:
        1px
        solid
        #e2e7ea;
}


.chum-admin-topbar > div:first-child > span {
    color:
        var(--auth-primary);

    font-size:
        9px;

    font-weight:
        820;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.chum-admin-topbar h1 {
    margin:
        6px
        0
        5px;

    color:
        #101820;

    font-size:
        32px;

    font-weight:
        810;

    line-height:
        1;

    letter-spacing:
        -0.042em;
}


.chum-admin-topbar p {
    margin:
        0;

    color:
        #7a8690;

    font-size:
        10px;
}


/* =====================================================================
   ADMIN USER
   ===================================================================== */

.chum-admin-user {
    display:
        flex;

    align-items:
        center;

    gap:
        13px;
}


.chum-admin-user > div {
    text-align:
        right;
}


.chum-admin-user strong,
.chum-admin-user small {
    display:
        block;
}


.chum-admin-user strong {
    color:
        #27333c;

    font-size:
        10px;
}


.chum-admin-user small {
    margin-top:
        2px;

    color:
        #7f8b94;

    font-size:
        8px;
}


.chum-admin-user-status {
    min-height:
        28px;

    padding:
        0
        9px;

    display:
        inline-flex;

    align-items:
        center;

    border:
        1px
        solid
        rgba(
            21,
            155,
            103,
            0.16
        );

    border-radius:
        999px;

    background:
        #eef9f4;

    color:
        #147d57;

    font-size:
        8px;

    font-weight:
        760;
}


/* =====================================================================
   ADMIN STATS
   ===================================================================== */

.chum-admin-stats {
    margin-top:
        25px;

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    gap:
        13px;
}


.chum-admin-stats article {
    position:
        relative;

    min-height:
        145px;

    padding:
        19px;

    overflow:
        hidden;

    border:
        1px
        solid
        #dfe5e9;

    border-radius:
        15px;

    background:
        #ffffff;

    box-shadow:
        0
        5px
        16px
        rgba(
            18,
            32,
            43,
            0.035
        );

    transition:
        transform
        180ms
        ease,
        box-shadow
        180ms
        ease;
}


.chum-admin-stats article:hover {
    transform:
        translateY(
            -3px
        );

    box-shadow:
        0
        14px
        29px
        rgba(
            18,
            32,
            43,
            0.065
        );
}


.chum-admin-stat-label {
    color:
        #75818b;

    font-size:
        9px;

    font-weight:
        690;
}


.chum-admin-stats strong {
    display:
        block;

    margin-top:
        15px;

    color:
        #17222b;

    font-size:
        21px;

    font-weight:
        800;

    letter-spacing:
        -0.025em;
}


.chum-admin-stats small {
    display:
        block;

    margin-top:
        5px;

    color:
        #8b969f;

    font-size:
        8px;
}


/* =====================================================================
   STAT INDICATOR
   ===================================================================== */

.chum-admin-stat-indicator {
    position:
        absolute;

    top:
        19px;

    right:
        19px;

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;
}


.chum-admin-stat-indicator.is-green {
    background:
        #159b67;

    box-shadow:
        0
        0
        0
        4px
        rgba(
            21,
            155,
            103,
            0.10
        );
}


.chum-admin-stat-indicator.is-blue {
    background:
        #3978d5;

    box-shadow:
        0
        0
        0
        4px
        rgba(
            57,
            120,
            213,
            0.10
        );
}


/* =====================================================================
   ADMIN CONTENT CARD
   ===================================================================== */

.chum-admin-content-card {
    margin-top:
        16px;

    padding:
        24px;

    border:
        1px
        solid
        #dfe5e9;

    border-radius:
        16px;

    background:
        #ffffff;

    box-shadow:
        0
        5px
        17px
        rgba(
            18,
            32,
            43,
            0.035
        );
}


/* =====================================================================
   CONTENT HEADING
   ===================================================================== */

.chum-admin-content-heading {
    padding-bottom:
        19px;

    border-bottom:
        1px
        solid
        #e7ebee;
}


.chum-admin-content-heading span {
    color:
        var(--auth-primary);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;
}


.chum-admin-content-heading h2 {
    margin:
        5px
        0
        5px;

    color:
        #1b2630;

    font-size:
        20px;

    font-weight:
        780;
}


.chum-admin-content-heading p {
    margin:
        0;

    color:
        #87929b;

    font-size:
        9px;
}


/* =====================================================================
   SYSTEM LIST
   ===================================================================== */

.chum-admin-system-list {
    display:
        flex;

    flex-direction:
        column;
}


.chum-admin-system-list > div {
    min-height:
        67px;

    padding:
        10px
        2px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    border-bottom:
        1px
        solid
        #e9edef;
}


.chum-admin-system-list > div:last-child {
    border-bottom:
        0;
}


.chum-admin-system-list > div > div {
    min-width:
        0;
}


.chum-admin-system-list strong {
    display:
        block;

    color:
        #2d3942;

    font-size:
        11px;

    font-weight:
        730;
}


.chum-admin-system-list small {
    display:
        block;

    margin-top:
        3px;

    color:
        #89949d;

    font-size:
        8px;
}


.chum-admin-system-list > div > span {
    min-width:
        65px;

    min-height:
        27px;

    padding:
        0
        9px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        999px;

    font-size:
        8px;

    font-weight:
        760;
}


.chum-admin-system-list .is-online {
    border:
        1px
        solid
        rgba(
            21,
            155,
            103,
            0.13
        );

    background:
        #eef9f4;

    color:
        #147d57;
}


.chum-admin-system-list .is-pending {
    border:
        1px
        solid
        rgba(
            171,
            111,
            22,
            0.14
        );

    background:
        #fff7e9;

    color:
        #966116;
}


/* =====================================================================
   ACCESSIBILITY
   ===================================================================== */

.chum-google-button:focus-visible,
.chum-auth-submit:focus-visible,
.chum-account-logout:focus-visible,
.chum-account-discover > a:focus-visible,
.chum-admin-nav a:focus-visible,
.chum-admin-signout:focus-visible {
    outline:
        3px
        solid
        rgba(
            232,
            65,
            100,
            0.20
        );

    outline-offset:
        3px;
}


/* =====================================================================
   LAPTOP
   ===================================================================== */

@media (
    max-width:
    1180px
) {

    .chum-auth-shell {
        width:
            min(
                1020px,
                100%
            );

        grid-template-columns:
            minmax(
                0,
                0.95fr
            )
            minmax(
                410px,
                0.82fr
            );
    }


    .chum-auth-brand-panel {
        padding:
            38px
            36px
            31px;
    }


    .chum-auth-form-panel {
        padding:
            42px
            35px;
    }


    .chum-account-container {
        width:
            calc(
                100% - 42px
            );
    }


    .chum-account-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }


    .chum-admin-stats {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }

}


/* =====================================================================
   TABLET
   ===================================================================== */

@media (
    max-width:
    860px
) {

    .chum-auth-page {
        padding:
            25px
            17px
            40px;
    }


    .chum-auth-shell {
        max-width:
            650px;

        min-height:
            0;

        grid-template-columns:
            1fr;

        border-radius:
            24px;
    }


    .chum-auth-brand-panel {
        min-height:
            300px;

        padding:
            31px
            31px
            29px;

        border-right:
            0;

        border-bottom:
            1px
            solid
            rgba(
                34,
                51,
                63,
                0.08
            );
    }


    .chum-auth-brand-top {
        min-height:
            45px;
    }


    .chum-auth-brand-copy {
        margin-top:
            30px;
    }


    .chum-auth-brand-copy h1 {
        max-width:
            520px;

        font-size:
            39px;
    }


    .chum-auth-benefits {
        display:
            none;
    }


    .chum-auth-brand-footer {
        margin-top:
            24px;
    }


    .chum-auth-form-panel {
        padding:
            38px
            31px;
    }


    .chum-admin-page {
        grid-template-columns:
            210px
            minmax(
                0,
                1fr
            );
    }


    .chum-admin-main {
        padding:
            25px;
    }

}


/* =====================================================================
   MOBILE
   ===================================================================== */

@media (
    max-width:
    650px
) {

    .chum-auth-page,
    .chum-admin-login-page {
        min-height:
            auto;

        padding:
            14px
            11px
            32px;
    }


    .chum-auth-shell {
        border-radius:
            20px;
    }


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


    .chum-auth-form-panel {
        padding:
            28px
            20px
            25px;

        background:
            rgba(
                255,
                255,
                255,
                0.62
            );
    }


    .chum-auth-mobile-logo {
        margin-bottom:
            32px;

        display:
            block;
    }


    .chum-auth-mobile-logo a {
        display:
            inline-flex;
    }


    .chum-auth-mobile-logo img {
        width:
            137px;
    }


    .chum-auth-form-heading {
        margin-bottom:
            22px;
    }


    .chum-auth-form-heading h2 {
        font-size:
            34px;
    }


    .chum-auth-form-heading p {
        font-size:
            12px;
    }


    .chum-google-button,
    .chum-auth-input-wrap,
    .chum-password-field,
    .chum-auth-submit {
        min-height:
            50px;

        height:
            50px;
    }


    .chum-account-page {
        padding:
            28px
            0
            45px;
    }


    .chum-account-container {
        width:
            calc(
                100% - 24px
            );
    }


    .chum-account-header {
        padding:
            20px;

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .chum-account-avatar {
        width:
            54px;

        height:
            54px;

        flex-basis:
            54px;
    }


    .chum-account-profile h1 {
        font-size:
            23px;
    }


    .chum-account-logout {
        width:
            100%;
    }


    .chum-account-grid {
        grid-template-columns:
            1fr;
    }


    .chum-account-card {
        min-height:
            175px;
    }


    .chum-account-discover {
        padding:
            24px
            21px;

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .chum-account-discover h2 {
        font-size:
            23px;
    }


    .chum-account-discover > a {
        width:
            100%;
    }


    .chum-admin-login-card {
        padding:
            27px
            20px
            23px;

        border-radius:
            20px;
    }


    .chum-admin-login-brand {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .chum-admin-login-logo img {
        width:
            137px;
    }


    .chum-admin-login-heading {
        margin-top:
            29px;
    }


    .chum-admin-login-heading h1 {
        font-size:
            31px;
    }


    .chum-admin-page {
        display:
            block;
    }


    .chum-admin-sidebar {
        display:
            none;
    }


    .chum-admin-main {
        padding:
            20px
            14px
            35px;
    }


    .chum-admin-topbar {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            17px;
    }


    .chum-admin-user {
        width:
            100%;

        justify-content:
            space-between;
    }


    .chum-admin-user > div {
        text-align:
            left;
    }


    .chum-admin-stats {
        grid-template-columns:
            1fr
            1fr;

        gap:
            10px;
    }


    .chum-admin-stats article {
        min-height:
            135px;

        padding:
            16px;
    }


    .chum-admin-content-card {
        padding:
            18px;
    }

}


/* =====================================================================
   SMALL MOBILE
   ===================================================================== */

@media (
    max-width:
    390px
) {

    .chum-admin-stats {
        grid-template-columns:
            1fr;
    }


    .chum-auth-form-panel {
        padding-left:
            16px;

        padding-right:
            16px;
    }

}


/* =====================================================================
   BACKDROP FILTER FALLBACK
   ===================================================================== */

@supports not (
    (
        backdrop-filter:
        blur(
            10px
        )
    )
    or
    (
        -webkit-backdrop-filter:
        blur(
            10px
        )
    )
) {

    .chum-auth-shell,
    .chum-admin-login-card,
    .chum-account-header,
    .chum-auth-input-wrap,
    .chum-password-field,
    .chum-google-button {
        background:
            rgba(
                248,
                251,
                252,
                0.97
            );
    }

}


/* =====================================================================
   REDUCED MOTION
   ===================================================================== */

@media (
    prefers-reduced-motion:
    reduce
) {

    .chum-google-button,
    .chum-auth-submit,
    .chum-auth-input-wrap,
    .chum-password-field,
    .chum-account-card,
    .chum-account-logout,
    .chum-account-discover > a,
    .chum-admin-nav a,
    .chum-admin-stats article {
        transition:
            none !important;
    }

}