* {
    box-sizing: border-box;
}



body {

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

    background:#f5f7fa;

    margin:0;

    padding:30px 15px;

    color:#333;

}





.container {

    max-width:1100px;

    margin:auto;

}






/* HEADER */

.hero {

    background:#0f4c81;

    color:white;

    text-align:center;

    padding:35px 20px;

    border-radius:15px;

    margin-bottom:25px;

}


.hero h1 {

    margin:0;

    font-size:28px;

}



.hero p {

    margin-top:10px;

    line-height:1.5;

}








/* CARD */

.card {


    background:white;


    padding:25px;


    margin-bottom:20px;


    border-radius:15px;


    box-shadow:

    0 5px 15px rgba(0,0,0,0.08);


}



.card h2 {


    margin-top:0;


    color:#0f4c81;


    font-size:22px;


}







/* FORM */


label {


    display:block;


    font-weight:bold;


    margin-top:12px;


    margin-bottom:6px;


}



input,
textarea {


    width:100%;


    padding:12px;


    border:1px solid #ddd;


    border-radius:8px;


    font-size:15px;


}



textarea {


    resize:vertical;


}







.grid {


    display:grid;


    grid-template-columns:

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


    gap:15px;


}







/* BUTTON */


button {


    background:#0f4c81;


    color:white;


    border:none;


    padding:13px 25px;


    border-radius:8px;


    font-size:15px;


    font-weight:bold;


    cursor:pointer;


    margin-top:15px;


}



button:hover {


    background:#08375e;


}



.submit-btn {


    background:#16a34a;


    margin-left:10px;


}



.submit-btn:hover {


    background:#12813a;


}








/* TABLE */


.table-wrapper {


    overflow-x:auto;


}



table {


    width:100%;


    border-collapse:collapse;


    margin-top:20px;


}



th {


    background:#0f4c81;


    color:white;


    padding:12px;


    text-align:center;


}



td {


    border:1px solid #ddd;


    padding:10px;


    text-align:center;


}



td input {


    width:100%;


    min-width:100px;


}






tbody tr:nth-child(even){


    background:#f8fafc;


}



tbody tr:hover{


    background:#eef6ff;


}







/* FILE INPUT */


input[type="file"] {


    background:#fafafa;


    cursor:pointer;


}








/* POPUP */


#popup {


    position:fixed;


    top:25px;


    left:50%;


    transform:translateX(-50%);


    background:#16a34a;


    color:white;


    padding:15px 30px;


    border-radius:10px;


    font-weight:bold;


    display:none;


    z-index:999;


    box-shadow:

    0 5px 20px rgba(0,0,0,.2);


}








/* MOBILE */


@media(max-width:600px){


    body {


        padding:15px 8px;


    }



    .hero h1 {


        font-size:22px;


    }



    .card {


        padding:18px;


    }



    button {


        width:100%;


    }



    .submit-btn {


        margin-left:0;


    }


}