:root{
    --red:#ed111b;
    --black:#090a0d;
    --ink:#15171c;
    --muted:#777d87;
    --line:#e5e7eb;
    --bg:#f6f7f9;
    --white:#fff;
}

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    min-height:100%;
}

body{
    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(237,17,27,.08),
            transparent 35%
        ),
        var(--bg);

    color:var(--ink);

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

    -webkit-font-smoothing:antialiased;
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input{
    font:inherit;
}

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

.auth-page{
    width:min(100%,520px);
    min-height:100vh;

    margin:auto;
    padding:28px 18px 40px;

    display:flex;
    flex-direction:column;
    justify-content:center;
}

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

.auth-brand{
    align-self:center;

    margin-bottom:28px;

    font-size:20px;
    font-weight:950;
    letter-spacing:-1.2px;
}

.auth-brand span{
    color:var(--red);
}

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

.auth-card{
    padding:28px 22px;

    border:1px solid var(--line);
    border-radius:26px;

    background:rgba(255,255,255,.96);

    box-shadow:
        0 25px 70px rgba(15,18,24,.08);
}

.register-card{
    padding-top:26px;
}

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

.auth-heading > span{
    display:block;

    margin-bottom:9px;

    color:var(--red);

    font-size:8px;
    font-weight:950;
    letter-spacing:1.6px;
}

.auth-heading h1{
    margin:0;

    font-size:34px;
    line-height:1;
    letter-spacing:-1.7px;
}

.auth-heading p{
    margin:12px 0 25px;

    color:var(--muted);

    font-size:11px;
    line-height:1.55;
}

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

.auth-error{
    margin-bottom:17px;
    padding:12px 13px;

    border:1px solid #ffd3d5;
    border-radius:12px;

    background:#fff1f2;

    color:#c4121a;

    font-size:10px;
    line-height:1.4;
}

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

form{
    display:flex;
    flex-direction:column;
    gap:15px;
}

label{
    display:flex;
    flex-direction:column;
    gap:7px;

    color:#3c4149;

    font-size:10px;
    font-weight:800;
}

label small{
    margin-top:-2px;
    margin-left:4px;

    color:#a0a5ad;

    font-size:8px;
    font-weight:500;
    line-height:1.3;
}

/* =========================================================
   INPUTS
========================================================= */

input{
    width:100%;
    height:49px;

    padding:0 14px;

    border:1px solid #dfe2e7;
    border-radius:13px;

    outline:none;

    background:#fafbfc;

    color:var(--ink);

    font-size:12px;

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

input::placeholder{
    color:#a8adb5;
}

input:hover{
    border-color:#cfd3d9;
}

input:focus{
    border-color:var(--red);

    background:#fff;

    box-shadow:
        0 0 0 3px rgba(237,17,27,.08);
}

/* =========================================================
   TWO COLUMNS
========================================================= */

.form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

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

.password-field{
    position:relative;
    width:100%;
}

.password-field input{
    padding-right:48px;
}

.password-toggle{
    position:absolute;

    top:50%;
    right:9px;

    width:32px;
    height:32px;

    transform:translateY(-50%);

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;

    border:0;
    border-radius:9px;

    background:transparent;

    color:#777d87;

    cursor:pointer;

    font-size:15px;

    transition:
        background .15s ease,
        color .15s ease;
}

.password-toggle:hover{
    background:#f1f2f4;
    color:#15171c;
}

.password-toggle:active{
    transform:translateY(-50%) scale(.94);
}

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

.auth-button{
    width:100%;
    height:50px;

    margin-top:5px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;

    border:0;
    border-radius:14px;

    background:var(--black);
    color:#fff;

    font-size:11px;
    font-weight:850;

    cursor:pointer;

    box-shadow:
        0 10px 25px rgba(9,10,13,.16);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.auth-button span{
    color:#ff5b63;

    font-size:16px;

    transition:
        transform .18s ease;
}

.auth-button:hover{
    transform:translateY(-1px);

    box-shadow:
        0 14px 30px rgba(9,10,13,.2);
}

.auth-button:hover span{
    transform:translateX(3px);
}

.auth-button:active{
    transform:translateY(0);
}

.auth-button:focus-visible{
    outline:3px solid rgba(237,17,27,.18);
    outline-offset:3px;
}

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

.auth-footer{
    margin-top:22px;
    padding-top:19px;

    border-top:1px solid #eceef1;

    display:flex;
    justify-content:center;
    align-items:center;
    gap:5px;

    color:#9298a1;

    font-size:9px;
}

.auth-footer a{
    color:var(--red);
    font-weight:850;

    transition:opacity .15s ease;
}

.auth-footer a:hover{
    opacity:.7;
}

/* =========================================================
   DESKTOP
========================================================= */

@media(min-width:700px){

    .auth-page{
        padding:50px 20px;
    }

    .auth-card{
        padding:36px;
    }

    .auth-heading h1{
        font-size:39px;
    }
}

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

@media(max-width:430px){

    .auth-page{
        padding:20px 14px 30px;
    }

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

    .auth-card{
        padding:24px 17px;

        border-radius:22px;
    }

    .auth-heading h1{
        font-size:30px;
    }

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

    .form-row{
        grid-template-columns:1fr;
    }

    input{
        height:48px;
    }
}

/* =========================================================
   SMALL PHONES
========================================================= */

@media(max-width:360px){

    .auth-page{
        padding-left:10px;
        padding-right:10px;
    }

    .auth-card{
        padding:21px 14px;
    }

    .auth-heading h1{
        font-size:28px;
    }

    .auth-footer{
        flex-direction:column;
        gap:4px;
    }
}