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


body{

    min-height:100vh;

    background:
    linear-gradient(
        rgba(5,18,45,.35),
        rgba(5,18,45,.40)
    ),
    url("images/cloud-bg.png");

    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    background-color:#05122d;

    color:white;

}


/* ================= OVERLAY ================= */

.overlay{

    width:100%;

    min-height:100vh;

    padding:20px 60px;

}



/* ================= HEADER ================= */

.header{

    margin-top:30px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}




/* ================= LOGO ================= */


.logo{

    font-size:36px;

    font-weight:700;


    display:flex;


    align-items:center;


    gap:15px;


    transform:translateX(130px);



    color:white;



    text-shadow:


    0 0 15px rgba(0,200,255,.6);

}




/* ================= ADMIN BUTTON ================= */


.admin-btn{


    text-decoration:none;


    color:white;



    padding:12px 25px;



    border-radius:12px;



    background:


    linear-gradient(

        90deg,

        #0066ff,

        #00b7ff

    );



    font-weight:bold;



    box-shadow:


    0 0 20px rgba(0,170,255,.3);


}




/* ================= FORM AREA ================= */


.container{


    display:flex;


    justify-content:center;


    align-items:center;



    padding-top:20px;



    min-height:55vh;


}




/* ================= CARD ================= */


.card{


    width:380px;



    background:


    rgba(20,29,52,.60);




    backdrop-filter:blur(6px);




    border-radius:18px;




    padding:25px;




    border:


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




    box-shadow:


    0 15px 40px rgba(0,0,0,.45);



}





/* ================= TITLE ================= */


.card h2{


    text-align:center;


    font-size:28px;



    margin-bottom:25px;


}




/* ================= INPUT ================= */


.input-group{


    display:flex;


    flex-direction:column;



    margin-bottom:15px;


}



.input-group label{


    margin-bottom:6px;


    font-weight:bold;


}




.input-group input,
.input-group select,
.input-group textarea{


    width:100%;



    padding:11px;



    border-radius:8px;



    border:1px solid #35558f;



    outline:none;



    font-size:15px;



    background:white;



    color:#333;


}




.input-group textarea{


    height:75px;


    resize:none;


}




.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus{


    box-shadow:


    0 0 10px #1d8bff;


}





/* ================= BUTTON ================= */


#submitBtn{


    width:100%;



    padding:13px;



    margin-top:10px;



    border:none;



    border-radius:12px;



    cursor:pointer;



    color:white;



    font-size:17px;



    font-weight:bold;




    background:



    linear-gradient(

        90deg,

        #0066ff,

        #00b7ff

    );



}



#submitBtn:hover{


    transform:translateY(-2px);


}





/* ================= MESSAGE ================= */


#message{


    text-align:center;



    margin-top:15px;



    color:#7CFC00;


}




/* ================= TABLE ================= */


.table-container{


    margin-top:35px;



    background:


    rgba(20,29,52,.70);



    backdrop-filter:blur(8px);



    border-radius:18px;



    padding:25px;


}




table{


    width:100%;



    border-collapse:collapse;


}



thead{


    background:#00bcd4;


}



th,td{


    padding:12px;



    text-align:center;


}





/* ================= MOBILE ================= */


@media(max-width:900px){



    .overlay{


        padding:20px;


    }



    .header{


        flex-direction:column;


        gap:20px;


    }




    .logo{


        transform:none;


        font-size:28px;


    }




    .card{


        width:100%;


    }


}