body{
  font-family:Arial;
  margin:0;
  padding:15px;
  background:linear-gradient(135deg,#4facfe,#f5f7fa);
}

.centered{
  max-width:320px;
  margin:80px auto;
  text-align:center;
  background:white;
  padding:25px;
  border-radius:12px;
  box-shadow:0 6px 12px rgba(0,0,0,0.2);
}

.centered input{
  width:85%;
  padding:10px;
  margin-bottom:12px;
  border-radius:6px;
  border:1px solid #ccc;
  font-size:14px;
}

.centered button{
  padding:10px 20px;
  border:none;
  border-radius:6px;
  background:#007bff;
  color:white;
  cursor:pointer;
  font-size:14px;
}

.centered button:hover{
  background:#0056b3;
}

.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  max-width:800px;
  margin:auto;
}

.header h1{
  text-align:left;
  font-size:24px;
}

.logoutBtn{
  padding:8px 16px;
  border:none;
  border-radius:6px;
  background:#ff4d4f;
  color:white;
  cursor:pointer;
}

.logoutBtn:hover{
  background:#d9363e;
}

.users{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:12px;
  max-width:800px;
  margin:20px auto;
}

.users button{
  padding:14px;
  border:none;
  border-radius:8px;
  background:#007bff;
  color:white;
  cursor:pointer;
  font-weight:bold;
}

.users button:hover{
  background:#0056b3;
}

#status{
  text-align:center;
  margin:12px;
  font-weight:bold;
  font-size:14px;
}

.controls{
  text-align:center;
  margin:12px;
}

.controls button{
  padding:8px 14px;
  margin:5px;
  font-weight:bold;
}

table{
  width:100%;
  border-collapse:collapse;
  background:white;
  margin-top:15px;
}

th,td{
  border:1px solid #ccc;
  padding:6px;
  text-align:center;
  font-size:12px;
}

th{
  background:#e8f0ff;
}

.onTime{
  color:green;
  font-weight:bold;
}

.late{
  color:red;
  font-weight:bold;
}

.periodTitle{
  font-weight:bold;
  margin-top:15px;
}

@media print{
  .users,.controls,#status,.logoutBtn,.header{
    display:none;
  }
}