.auth-page{
    width:min(calc(100% - 40px),620px);
    margin:70px auto;
}

.auth-page.auth-page--login{
    max-width:520px;
    margin-top:90px;
}

.auth-card{
    padding:36px;

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

    background:rgba(255,255,255,.025);
}

.auth-title{
    margin:0 0 12px;
    font-size:42px;
}

.auth-lead{
    margin:0 0 30px;
    color:var(--muted);
}

.auth-message{
    margin-bottom:18px;
    padding:13px 15px;

    border-radius:12px;

    font-size:13px;
}

.auth-message--error{
    border:1px solid rgba(197,92,66,.45);

    color:#f1b5a7;
    background:rgba(197,92,66,.08);
}

.auth-message--success{
    border:1px solid rgba(111,137,120,.55);

    color:#c9ddd0;
    background:rgba(111,137,120,.10);
}

.auth-row{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:14px;

    margin-bottom:14px;
}

.auth-form input{
    width:100%;

    padding:16px;

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

    color:var(--text);
    background:#171c18;

    font:inherit;

    outline:none;
}

.auth-form input::placeholder{
    color:#747c76;
}

.auth-form input:focus{
    border-color:rgba(224,122,95,.65);
}

.auth-field{
    margin-bottom:14px;
}

.auth-field--last{
    margin-bottom:20px;
}

.auth-forgot{
    margin:-2px 2px 20px;
    text-align:right;
}

.auth-forgot a{
    color:var(--muted);
    font-size:14px;
    text-decoration:none;
}

.auth-forgot a:hover{
    color:var(--text);
}

.auth-submit{
    width:100%;

    border:0;

    cursor:pointer;
}

@media (max-width:620px){
    .auth-page,
    .auth-page.auth-page--login{
        width:min(calc(100% - 28px),620px);
        margin:38px auto;
    }

    .auth-card{
        padding:26px 20px;
    }

    .auth-title{
        font-size:34px;
    }

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

.auth-label{
    display:block;
    margin:2px 0 8px;
    color:var(--muted);
    font-size:12px;
    font-weight:700;
}