*{
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}


body{

    margin:0;
    background:#f4f6f9;
    color:#333;

}


header{

    background:#1f4e79;
    color:white;
    padding:25px;
    text-align:center;

}


nav{

    background:#163a5c;
    padding:15px;
    text-align:center;

}


nav a{

    color:white;
    text-decoration:none;
    margin:0 15px;
    font-weight:bold;

}


nav a:hover{

    text-decoration:underline;

}



main{

    padding:30px;

}



.cards{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;

}



.card{

    background:white;
    padding:25px;
    border-radius:10px;
    box-shadow:0 3px 8px rgba(0,0,0,.15);
    text-align:center;

}


.card p{

    font-size:32px;
    font-weight:bold;
    color:#1f4e79;

}



.panel{

    margin-top:30px;
    background:white;
    padding:25px;
    border-radius:10px;
    box-shadow:0 3px 8px rgba(0,0,0,.1);

}



table{

    width:100%;
    border-collapse:collapse;

}



th{

    background:#1f4e79;
    color:white;

}



td,th{

    padding:12px;
    border:1px solid #ddd;

}



button{

    background:#1f4e79;
    color:white;
    border:none;
    padding:10px 15px;
    border-radius:5px;
    cursor:pointer;

}


button:hover{

    background:#163a5c;

}



input,select{

    padding:10px;
    width:100%;
    margin-bottom:10px;

}


.form-box{

    background:white;
    padding:25px;
    border-radius:10px;
    max-width:500px;
    box-shadow:0 3px 8px rgba(0,0,0,.1);

}



.status-good{

    color:green;
    font-weight:bold;

}


.status-warning{

    color:red;
    font-weight:bold;

}