body{
background:#081b2e;
color:white;
text-align:center;
font-family:Segoe UI;
}

h1{
color:#ffd700;
margin:20px;
}

.controls{
position:relative;
}

button{
background:#ffd700;
padding:10px 15px;
margin:5px;
border:none;
border-radius:12px;
box-shadow:0 4px 12px rgba(0,0,0,0.6);
cursor:pointer;
}

button:hover{
transform:scale(1.05);
}

.roster-btn{
position:absolute;
right:20px;
top:0;
}

table{
width:100%;
border-collapse:collapse;
margin-top:20px;
}

th{
background:#123c7a;
color:white;
padding:10px;
}

td{
background:#eaeaea;
color:black;
padding:8px;
border:1px solid #ccc;
}

.late{
background:#ff2b2b;
color:white;
font-weight:bold;
}

.modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
}

.modal-content{
background:white;
color:black;
padding:20px;
margin:5% auto;
width:350px;
border-radius:12px;
}