@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&display=swap');


:root{

    --primary:#0F3040;
    --rose:#A56F63;
    --sand:#D99B7F;

}


*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


body{

    direction:rtl;

    font-family:"Vazirmatn",sans-serif;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:25px;


    background:

    radial-gradient(
        circle at top right,
        rgba(217,155,127,.25),
        transparent 35%
    ),

    linear-gradient(
        135deg,
        #0F3040,
        #171923
    );

}



.auth-container{

    width:100%;

    max-width:430px;

}



.auth-card{


    padding:45px 38px;


    border-radius:30px;


    background:

    rgba(255,255,255,.09);


    border:1px solid rgba(255,255,255,.18);


    backdrop-filter:blur(25px);


    box-shadow:

    0 30px 70px rgba(0,0,0,.5);


    animation:show .7s ease;


}



@keyframes show{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



.auth-logo{


    width:85px;

    height:85px;


    margin:0 auto 25px;


    border-radius:50%;


    display:flex;

    justify-content:center;

    align-items:center;


    font-size:38px;


    background:

    linear-gradient(
        135deg,
        var(--rose),
        var(--sand)
    );


}



.auth-card h1{


    text-align:center;


    color:white;


    font-size:30px;


    font-weight:800;


    margin-bottom:18px;


}



.auth-text{


    text-align:center;


    color:#fff;


    opacity:.9;


    line-height:2;


    font-size:15px;


    margin-bottom:35px;


}



.auth-card form{


    display:flex;

    flex-direction:column;

    gap:18px;


}



.auth-card input{


    height:58px;


    padding:0 18px;


    border-radius:18px;


    border:1px solid rgba(255,255,255,.2);


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


    color:white;


    font-family:inherit;


    font-size:15px;


    outline:none;


}



.auth-card input::placeholder{

    color:#ccc;

}



.auth-card input:focus{


    border-color:var(--sand);


    box-shadow:

    0 0 0 5px rgba(217,155,127,.15);


}



.auth-card button{


    height:58px;


    border:none;


    border-radius:18px;


    cursor:pointer;


    color:white;


    font-family:inherit;


    font-size:16px;


    font-weight:800;


    background:

    linear-gradient(
        135deg,
        var(--rose),
        var(--sand)
    );


    transition:.3s;


}



.auth-card button:hover{


    transform:translateY(-4px);


}



.error{


    padding:14px;


    margin-bottom:20px;


    text-align:center;


    color:#ffdede;


    background:rgba(220,38,38,.2);


    border-radius:15px;


}



.bottom-link{


    text-align:center;

    color:#fff;

    margin-top:30px;


}



.bottom-link a{


    color:var(--sand);


    text-decoration:none;


    font-weight:700;


}



@media(max-width:600px){


    .auth-card{

        padding:35px 22px;

    }


}