body{

    font-family: 'Inter', Arial, sans-serif;

}



.login-wrapper{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
    linear-gradient(
        135deg,
        #667eea,
        #764ba2
    );

    padding:20px;

}



.login-card{


    background:white;

    width:100%;

    max-width:420px;

    padding:40px;

    border-radius:20px;


    box-shadow:
    0 20px 50px rgba(0,0,0,.15);


}



.brand-logo{


    width:70px;

    height:70px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:18px;


    background:
    linear-gradient(
        135deg,
        #667eea,
        #764ba2
    );


    color:white;

    font-size:35px;

    font-weight:bold;

}



.form-control{


    height:48px;

    border-radius:10px;

}



.input-group-text{


    background:#f8f9fa;

    border-radius:10px 0 0 10px;

}



.btn-primary{


    background:
    linear-gradient(
        135deg,
        #667eea,
        #764ba2
    );


    border:none;

    border-radius:10px;


}



.btn-primary:hover{


    opacity:.9;

}

*{
    box-sizing:border-box;
}


body{

    margin:0;

    background:#f5f6fa;

    font-family:Inter,Arial;

}



.app{

    display:flex;

}



.sidebar{

    width:260px;

    min-height:100vh;

    background:
    linear-gradient(
        135deg,
        #667eea,
        #764ba2
    );

    color:white;

    position:fixed;

    transition:.3s;

    overflow:hidden;

}


.sidebar.collapsed{

    width:80px;

}



.brand{

    height:80px;

    display:flex;

    align-items:center;

    gap:15px;

    padding:20px;

    font-size:22px;

    font-weight:bold;

}


.sidebar.collapsed .brand span,
.sidebar.collapsed li span,
.sidebar.collapsed .logout span{

    display:none;

}
.logo{

    width:40px;

    height:40px;

    border-radius:12px;

    background:white;

    color:#764ba2;

    display:flex;

    align-items:center;

    justify-content:center;

}




.sidebar ul{

    list-style:none;

    padding:20px;

}



.sidebar li a{

    display:flex;

    gap:15px;

    padding:14px;

    color:white;

    text-decoration:none;

    border-radius:12px;

    margin-bottom:8px;

}



.sidebar li a:hover{

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

}



.logout{

    position:absolute;

    bottom:30px;

    padding:20px;

}



.logout a{

    color:white;

    text-decoration:none;

}



.main{

    margin-left:260px;

    width:100%;

    transition:.3s;

}



.main.expanded{

    margin-left:80px;

}



.navbar{

    height:80px;

    background:white;

    padding:20px 30px;

    box-shadow:0 2px 10px #ddd;

}



.toggle{

    border:none;

    font-size:24px;

}



.user{

    display:flex;

    gap:12px;

    align-items:center;

}



.avatar{

    width:45px;

    height:45px;

    border-radius:50%;

    background:
    linear-gradient(
        135deg,
        #667eea,
        #764ba2
    );

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:bold;

}



.content{

    padding:30px;

}



.stat-card{

    background:white;

    padding:25px;

    border-radius:20px;

    display:flex;

    justify-content:space-between;

    box-shadow:
    0 10px 30px rgba(0,0,0,.08);

}



.stat-card p{

    color:#777;

}



.icon{

    width:60px;

    height:60px;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #667eea,
        #764ba2
    );

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:25px;

}