*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial;
}
body{
background:#f3f4f6;
display:flex;
justify-content:center;
padding:40px;
}
.container{
width:90%;
max-width:900px;
background:white;
padding:30px;
border-radius:12px;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
}
h1{
text-align:center;
margin-bottom:10px;
}
.subtitle{
text-align:center;
color:#6b7280;
margin-bottom:25px;
}
.stats{
display:flex;
gap:20px;
margin-bottom:25px;
}
.card{
flex:1;
background:#f9fafb;
padding:15px;
border-radius:10px;
text-align:center;
box-shadow:0 4px 10px rgba(0,0,0,0.05);
}
.card h3{
font-size:16px;
color:#6b7280;
margin-bottom:5px;
}
.card p{
font-size:22px;
font-weight:bold;
}
canvas{
margin-top:25px;
}
.input-section{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:10px;
margin-bottom:20px;
}
input{
padding:10px;
border:1px solid #d1d5db;
border-radius:6px;
}
button{
background:#2563eb;
color:white;
border:none;
padding:10px;
border-radius:8px;
cursor:pointer;
font-weight:600;
transition:0.2s;
}
button:hover{
background:#1d4ed8;
transform:scale(1.03);
}
#search{
width:100%;
margin-bottom:20px;
}
table{
width:100%;
border-collapse:collapse;
margin-bottom:30px;
}
th,td{
border-bottom:1px solid #e5e7eb;
padding:10px;
text-align:center;
}
th{
background:#f9fafb;
}
tbody tr:hover{
background:#f1f5f9;
}
.delete-btn{
background:#ef4444;
}
.delete-btn:hover{
background:#dc2626;
}
.edit-btn{
background:#10b981;
}
.edit-btn:hover{
background:#059669;
}
.grade{
padding:5px 10px;
border-radius:6px;
color:white;
font-weight:bold;
}
.A{background:#22c55e;}
.B{background:#3b82f6;}
.C{background:#eab308;}
.D{background:#f97316;}
.F{background:#ef4444;}