:root{
    --auth-bg:#f5f7fb;
    --auth-card:#ffffff;
    --auth-text:#111827;
    --auth-muted:#6b7280;
    --auth-line:#e5e7eb;

    --auth-primary:#111827;
    --auth-accent:#2563eb;

    --auth-danger:#b42318;
    --auth-danger-bg:#fef3f2;
    --auth-danger-line:#fecdca;

    --auth-success:#067647;
}

*{
    box-sizing:border-box;
}

html{
    min-height:100%;
}

body{
    margin:0;

    min-height:100vh;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:
        radial-gradient(
            circle at top left,
            rgba(37,99,235,.09),
            transparent 34%
        ),
        var(--auth-bg);

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


/* PAGE */

.auth-page{
    min-height:100vh;

    display:grid;

    place-items:center;

    padding:32px 20px;
}


/* WRAPPER */

.auth-shell{
    width:100%;
    max-width:440px;
}


/* BRAND */

.auth-brand{
    text-align:center;

    margin-bottom:24px;
}

.auth-brand a{
    display:inline-block;

    color:var(--auth-text);

    font-size:22px;
    font-weight:800;

    letter-spacing:-0.03em;

    text-decoration:none;
}

.auth-brand p{
    margin:6px 0 0;

    color:var(--auth-muted);

    font-size:14px;
}


/* CARD */

.auth-card{
    padding:32px;

    background:var(--auth-card);

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

    border-radius:18px;

    box-shadow:
        0 20px 50px rgba(17,24,39,.07);
}


/* TITLE */

.auth-card h1{
    margin:0 0 8px;

    font-size:28px;

    line-height:1.2;

    letter-spacing:-0.03em;
}

.auth-card > p{
    margin:0 0 26px;

    color:var(--auth-muted);

    font-size:15px;
}


/* FORM */

.auth-card form{
    display:grid;

    gap:17px;
}

.auth-card label{
    display:block;

    color:var(--auth-text);

    font-size:14px;

    font-weight:700;
}


/* INPUT */

.auth-card input{
    width:100%;

    margin-top:7px;

    padding:12px 13px;

    border:1px solid #d1d5db;

    border-radius:10px;

    background:#ffffff;

    color:var(--auth-text);

    font:inherit;

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

.auth-card input::placeholder{
    color:#9ca3af;
}

.auth-card input:focus{
    outline:none;

    border-color:var(--auth-accent);

    box-shadow:
        0 0 0 4px rgba(37,99,235,.10);
}


/* BUTTON */

.auth-card button{
    width:100%;

    min-height:47px;

    margin-top:2px;

    padding:12px 16px;

    border:0;

    border-radius:10px;

    background:var(--auth-primary);

    color:#ffffff;

    font:inherit;

    font-weight:800;

    cursor:pointer;

    transition:
        transform .15s ease,
        opacity .15s ease;
}

.auth-card button:hover{
    opacity:.94;
}

.auth-card button:active{
    transform:translateY(1px);
}


/* ALERT */

.auth-alert{
    margin-bottom:20px;

    padding:12px 14px;

    border-radius:10px;

    font-size:14px;
}

.auth-alert-error{
    background:var(--auth-danger-bg);

    color:var(--auth-danger);

    border:1px solid var(--auth-danger-line);
}

.auth-alert-error div + div{
    margin-top:4px;
}


/* FORGOT PASSWORD */

.auth-helper{
    display:flex;

    justify-content:flex-end;

    margin-top:18px;

    font-size:14px;
}

.auth-helper a{
    color:var(--auth-accent);

    font-weight:700;

    text-decoration:none;
}

.auth-helper a:hover{
    text-decoration:underline;
}


/* BOTTOM LINK */

.auth-footer{
    margin-top:20px;

    text-align:center;

    color:var(--auth-muted);

    font-size:14px;
}

.auth-footer a{
    margin-left:3px;

    color:var(--auth-accent);

    font-weight:700;

    text-decoration:none;
}

.auth-footer a:hover{
    text-decoration:underline;
}


/* MOBILE */

@media(max-width:520px){

    .auth-page{
        place-items:start center;

        padding:
            42px
            14px
            24px;
    }

    .auth-card{
        padding:
            24px
            18px;
    }

    .auth-card h1{
        font-size:25px;
    }

    .auth-brand{
        margin-bottom:18px;
    }

}


/* =========================
   SIGNUP PAGE
========================= */

.auth-page-signup{
    padding:18px 20px;

    place-items:center;
}

.signup-shell{
    max-width:580px;
}

.signup-brand{
    margin-bottom:14px;
}

.signup-brand a{
    font-size:21px;
}

.signup-brand p{
    margin-top:3px;
    font-size:13px;
}


/* CARD */

.signup-card{
    padding:22px 24px;

    border-radius:16px;
}


/* HEADING */

.signup-heading{
    padding-bottom:14px;

    margin-bottom:16px;

    border-bottom:1px solid var(--auth-line);

    text-align:center;
}

.signup-heading h1{
    margin:0;

    font-size:25px;
}

.signup-heading p{
    margin:4px 0 0;

    color:var(--auth-muted);

    font-size:14px;
}


/* FORM */

.signup-form{
    gap:13px !important;
}


/* TWO COLUMN ROW */

.signup-grid{
    display:grid;

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

    gap:12px;
}


/* LABEL */

.signup-card label{
    margin:0;

    font-size:13px;
}


/* INPUT */

.signup-card input{
    margin-top:5px;

    padding:10px 11px;

    min-height:42px;
}


/* SMALL NOTE */

.signup-note{
    margin-top:-2px;

    color:var(--auth-muted);

    font-size:11px;

    line-height:1.45;
}


/* BUTTON */

.signup-button{
    width:210px !important;

    min-height:44px !important;

    margin:
        2px
        auto
        0 !important;

    background:#16a34a !important;

    border-radius:9px !important;
}


/* LOGIN LINK */

.signup-login{
    margin-top:15px;

    padding-top:14px;

    border-top:1px solid var(--auth-line);

    text-align:center;

    color:var(--auth-muted);

    font-size:13px;
}

.signup-login a{
    color:var(--auth-accent);

    font-weight:700;

    text-decoration:none;
}


/* SMALLER DESKTOP HEIGHT */

@media (min-width:700px) and (max-height:750px){

    .auth-page-signup{
        padding-top:10px;
        padding-bottom:10px;
    }

    .signup-brand{
        margin-bottom:9px;
    }

    .signup-card{
        padding:
            17px
            22px;
    }

    .signup-heading{
        padding-bottom:10px;
        margin-bottom:12px;
    }

    .signup-heading h1{
        font-size:23px;
    }

    .signup-form{
        gap:9px !important;
    }

    .signup-card input{
        min-height:38px;

        padding:
            8px
            10px;
    }

    .signup-note{
        font-size:10px;
    }

    .signup-button{
        min-height:40px !important;
    }

    .signup-login{
        margin-top:10px;
        padding-top:10px;
    }
}


/* MOBILE */

@media(max-width:600px){

    .auth-page-signup{
        padding:
            24px
            12px;
    }

    .signup-shell{
        max-width:100%;
    }

    .signup-grid{
        grid-template-columns:1fr;
    }

    .signup-card{
        padding:
            20px
            16px;
    }

    .signup-heading h1{
        font-size:23px;
    }

    .signup-button{
        width:100% !important;
    }

}