/* =========================================
   AUTH PAGES
   ========================================= */

.auth-page {

    min-height: 100vh;

    padding:
        150px 5vw
        100px;

    display: flex;

    align-items: center;
}


.auth-shell {

    width:
        min(
            100%,
            1050px
        );

    margin:
        0 auto;

    display: grid;

    grid-template-columns:
        1fr
        480px;

    align-items:
        center;

    gap:
        8vw;
}


.auth-intro {

    max-width:
        580px;
}


.auth-eyebrow {

    display: inline-block;

    color:
        var(--cyan);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        .18em;

    text-transform:
        uppercase;
}


.auth-intro h1 {

    margin-top:
        25px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            65px,
            7vw,
            105px
        );

    line-height:
        .87;

    letter-spacing:
        -.075em;
}


.auth-intro h1 span {

    display:
        block;

    background:
        linear-gradient(
            110deg,
            var(--purple),
            var(--cyan),
            var(--orange)
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}


.auth-intro > p {

    max-width:
        450px;

    margin-top:
        35px;

    color:
        var(--text-soft);

    font-size:
        17px;

    line-height:
        1.8;
}


/* =========================================
   AUTH CARD
   ========================================= */

.auth-card {

    padding:
        35px;

    border:
        1px solid
        var(--border);

    border-radius:
        25px;

    background:
        var(--surface);

    box-shadow:
        0 30px 90px
        rgba(0, 0, 0, .18);
}


.auth-card-heading h2 {

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        34px;

    letter-spacing:
        -.045em;
}


.auth-card-heading p {

    margin-top:
        5px;

    color:
        var(--text-muted);

    font-size:
        13px;
}


/* =========================================
   ERRORS
   ========================================= */

.auth-errors {

    margin-top:
        25px;

    padding:
        14px 16px;

    border:
        1px solid
        rgba(244,114,182,.25);

    border-radius:
        13px;

    background:
        rgba(244,114,182,.07);

    color:
        #f9a8d4;

    font-size:
        13px;
}


.auth-errors p + p {
    margin-top:
        5px;
}


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

.auth-form {

    display:
        grid;

    gap:
        18px;

    margin-top:
        30px;
}


.auth-form label {

    display:
        grid;

    gap:
        8px;
}


.auth-form label span {

    color:
        var(--text-soft);

    font-size:
        12px;

    font-weight:
        600;
}


.auth-form input {

    width:
        100%;

    height:
        50px;

    padding:
        0 15px;

    border:
        1px solid
        var(--border);

    border-radius:
        12px;

    outline:
        none;

    background:
        var(--bg);

    color:
        var(--text);

    font-family:
        "DM Sans",
        sans-serif;

    font-size:
        14px;

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}


.auth-form input:focus {

    border-color:
        var(--purple);

    box-shadow:
        0 0 0 3px
        rgba(167,139,250,.10);
}


.auth-submit {

    width:
        100%;

    min-height:
        50px;

    margin-top:
        5px;

    border:
        0;

    border-radius:
        12px;

    cursor:
        pointer;

    background:
        linear-gradient(
            110deg,
            var(--purple),
            var(--cyan)
        );

    color:
        #08080a;

    font-size:
        13px;

    font-weight:
        700;

    transition:
        transform .25s ease,
        filter .25s ease;
}


.auth-submit:hover {

    transform:
        translateY(-2px);

    filter:
        brightness(1.08);
}


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

.auth-switch {

    margin-top:
        25px;

    color:
        var(--text-muted);

    font-size:
        13px;

    text-align:
        center;
}


.auth-switch a {

    color:
        var(--purple);

    font-weight:
        600;
}


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

.account-page {

    min-height:
        100vh;

    padding:
        160px 5vw
        100px;
}


.account-shell {

    width:
        min(
            100%,
            1180px
        );

    margin-inline:
        auto;
}


.account-header h1 {

    margin-top:
        22px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            55px,
            7vw,
            100px
        );

    line-height:
        .9;

    letter-spacing:
        -.075em;
}


.account-header h1 span {

    color:
        var(--purple);
}


.account-header p {

    margin-top:
        25px;

    color:
        var(--text-soft);

    font-size:
        16px;
}


.account-stats {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        1px;

    margin-top:
        70px;

    border:
        1px solid
        var(--border);

    background:
        var(--border);
}


.account-stat {

    min-height:
        180px;

    padding:
        28px;

    background:
        var(--surface);
}


.account-stat span {

    display:
        block;

    color:
        var(--text-muted);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        .13em;
}


.account-stat strong {

    display:
        block;

    margin-top:
        55px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        32px;
}


.account-content {

    display:
        grid;

    grid-template-columns:
        1.4fr
        .6fr;

    gap:
        20px;

    margin-top:
        20px;
}


.account-panel {

    min-height:
        300px;

    padding:
        30px;

    border:
        1px solid
        var(--border);

    border-radius:
        20px;

    background:
        var(--surface);
}


.account-panel h2 {

    margin-top:
        18px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        32px;
}


.account-empty {

    margin-top:
        35px;

    color:
        var(--text-soft);

    line-height:
        1.8;
}


.account-empty a {

    display:
        block;

    margin-top:
        10px;

    color:
        var(--purple);

    font-weight:
        600;
}


.progress-list {

    margin-top:
        30px;

    border-top:
        1px solid
        var(--border);
}


.progress-row {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        18px 0;

    border-bottom:
        1px solid
        var(--border);
}


.progress-row div {

    display:
        grid;

    gap:
        4px;
}


.progress-row div span {

    color:
        var(--cyan);

    font-size:
        10px;

    font-weight:
        700;
}


.progress-row strong {

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        15px;
}


.progress-row > span {

    color:
        var(--green);

    font-size:
        11px;

    font-weight:
        600;
}


.account-actions p {

    margin-top:
        25px;

    color:
        var(--text-soft);

    font-size:
        14px;

    line-height:
        1.7;
}


.account-actions form {

    margin-top:
        40px;
}


.logout-button {

    background:
        var(--surface-2);

    color:
        var(--text);

    border:
        1px solid
        var(--border);
}


/* =========================================
   AUTH NAV
   ========================================= */

.auth-signup-link {

    padding:
        9px 14px !important;

    border-radius:
        999px;

    background:
        linear-gradient(
            110deg,
            var(--purple),
            var(--cyan)
        );

    color:
        #08080a !important;

    font-weight:
        700 !important;
}


.auth-signup-link::after {

    display:
        none !important;
}


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

@media (max-width: 900px) {

    .auth-shell {

        grid-template-columns:
            1fr;

        max-width:
            600px;
    }


    .account-content {

        grid-template-columns:
            1fr;
    }

}


@media (max-width: 800px) {

    .auth-signup-link {

        width:
            100% !important;

        text-align:
            center;

        padding:
            12px !important;
    }

}


@media (max-width: 600px) {

    .auth-page {

        padding:
            125px 5vw
            70px;
    }


    .auth-card {

        padding:
            25px;

        border-radius:
            20px;
    }


    .auth-intro h1 {

        font-size:
            65px;
    }


    .account-page {

        padding:
            125px 5vw
            70px;
    }


    .account-stats {

        grid-template-columns:
            1fr;
    }


    .account-stat {

        min-height:
            140px;
    }


    .account-stat strong {

        margin-top:
            35px;
    }


    .progress-row {

        align-items:
            flex-start;

        flex-direction:
            column;
    }

}