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


*{
    box-sizing:border-box;
    font-family:'Vazirmatn',sans-serif;
}


:root{

    --bg1:#06111f;
    --bg2:#0b2745;
    --card:rgba(255,255,255,0.08);
    --border:rgba(255,255,255,.18);
    --text:#e7eef7;
    --sub:#b5c4d4;
    --blue:#2196f3;

}



body{

    margin:0;

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;


    background:

    radial-gradient(circle at top,var(--bg2),var(--bg1) 70%);


    color:var(--text);

    overflow:hidden;


}



/* دکمه های تم */

.theme-switch{


    position:absolute;

    top:30px;

    left:30px;


    display:flex;

    gap:10px;


}



.theme-switch button{


    width:48px;

    height:48px;


    border-radius:50%;


    border:

    1px solid rgba(255,255,255,.25);



    background:

    rgba(255,255,255,.12);



    backdrop-filter:blur(15px);



    color:white;


    cursor:pointer;


    font-size:20px;


    transition:.35s;


}



.theme-switch button:hover{


    transform:scale(1.15);


    background:#2196f3;


}



/* کارت اصلی */


.login-container{


    width:450px;


    padding:45px;


    text-align:center;



    border-radius:35px;



    background:

    var(--card);



    backdrop-filter:blur(25px);



    border:

    1px solid var(--border);



    box-shadow:


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



    animation:show .8s ease;



}



@keyframes show{


from{

opacity:0;

transform:translateY(40px);

}


to{

opacity:1;

transform:translateY(0);

}


}



/* لوگو */


.logo{


    font-size:130px;


    line-height:1;


    margin-bottom:20px;



    color:#d4af37;



    text-shadow:


    0 0 15px rgba(212,175,55,.8),


    0 0 50px rgba(33,150,243,.5);



    animation:gearRotate 14s linear infinite;



}




@keyframes gearRotate{


from{

transform:rotate(0deg);

}


to{

transform:rotate(360deg);

}


}





h1{


    margin:5px 0;


    font-size:36px;


    font-weight:900;


}



h2{


    margin-bottom:35px;


    font-size:17px;


    font-weight:400;


    color:var(--sub);


}





.login-box{


    display:flex;

    flex-direction:column;

    gap:15px;


}



input{


    height:55px;


    border-radius:15px;


    padding:0 20px;


    font-size:15px;


    color:white;


    background:

    rgba(0,0,0,.25);



    border:

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



    outline:none;


    transition:.3s;


}



input:focus{


    border-color:#2196f3;


    box-shadow:

    0 0 15px rgba(33,150,243,.4);


}





.login-btn{


    height:55px;


    border:none;


    border-radius:15px;


    margin-top:10px;


    cursor:pointer;



    font-size:18px;


    font-weight:700;



    color:white;



    background:


    linear-gradient(135deg,#1976d2,#42a5f5);



    transition:.35s;


}



.login-btn:hover{


    transform:translateY(-4px);


    box-shadow:

    0 15px 35px rgba(33,150,243,.45);


}





footer{


    margin-top:30px;


    color:#9daebe;


    font-size:14px;
/* LIGHT MODE */

body.light-mode{


    --bg1:#e8eef5;

    --bg2:#ffffff;

    --card:rgba(255,255,255,.75);

    --border:rgba(0,0,0,.15);

    --text:#17212b;

    --sub:#5c6b78;


    color:var(--text);


}



body.light-mode input{


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

    color:#17212b;


}



body.light-mode .theme-switch button{


    color:#17212b;

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


}



body.light-mode footer{

    color:#687786;

}

}