*{
    box-sizing:border-box;
}


body{

    margin:0;

    font-family:Arial, Helvetica, sans-serif;

    background:#f4f6f9;

    color:#333;

}



.header{

    background:#1f2937;

    color:white;

    padding:20px;

}



.header h1{

    margin:0;

}



.header a{

    color:white;

    text-decoration:none;

}



.card{

    background:white;

    margin:20px;

    padding:20px;

    border-radius:12px;

    box-shadow:0 3px 10px rgba(0,0,0,0.08);

}




h1,h2,h3{

    color:#1f2937;

}




input,
select,
textarea{


    width:100%;

    padding:10px;

    border:1px solid #ddd;

    border-radius:6px;

}



textarea{

    min-height:100px;

}




button{


    background:#2563eb;

    color:white;

    border:0;

    padding:12px 20px;

    border-radius:6px;

    cursor:pointer;

}



button:hover{

    opacity:0.85;

}




table{


    width:100%;

    border-collapse:collapse;


}



table th{


    background:#1f2937;

    color:white;

    padding:12px;


}



table td{


    padding:10px;

    border-bottom:1px solid #ddd;


}




a{


    color:#2563eb;

}



.dashboard-grid{


    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

    padding:20px;


}




.stat-box{


    background:white;

    padding:25px;

    border-radius:12px;

    box-shadow:0 3px 10px rgba(0,0,0,0.1);


}



.stat-box h2{


    margin:0;

    font-size:35px;


}



.menu{


    background:#111827;

    padding:15px;


}



.menu a{


    color:white;

    margin-right:15px;

    text-decoration:none;


}



@media(max-width:700px){


table{

    display:block;

    overflow-x:auto;

}


.menu a{

    display:block;

    margin:10px 0;

}


.card{

    margin:10px;

}


}