.school-bell { max-width: 800px; margin:auto; font-family:Arial; }
.inputs { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:10px; }
label { display:flex; flex-direction:column; font-size:14px; }
input, select { padding:5px; }
.buttons { margin:10px 0; }
button { padding:8px 14px; margin:2px; cursor:pointer; }
#progressBox { width:100%; height:25px; background:#ddd; border-radius:20px; overflow:hidden; margin:12px 0; }
#progressBar { width:0%; height:100%; background:red; transition: width 1s linear; }
#bellAnim { font-size:40px; text-align:center; display:none; animation:ring 0.5s infinite; }
@keyframes ring { 0%{transform:rotate(0)} 25%{transform:rotate(15deg)} 50%{transform:rotate(0)} 75%{transform:rotate(-15deg)} 100%{transform:rotate(0)} }
table { width:100%; border-collapse:collapse; margin-top:10px; }
th,td { border:1px solid #ccc; padding:6px; text-align:center; }
.active-row { background:#ffe5e5; font-weight:bold; }
button#downloadPDF { background:#007bff; color:#fff; border:none; padding:10px 16px; }
button#downloadPDF:hover { background:#0056b3; }
#timerDisplay {
  font-weight: bold;
  color: #ff0000;
}
#progressBox {
  width: 100%;
  height: 25px;
  background: #ddd;
  border-radius: 20px;
  overflow: hidden;
  margin: 5px 0 15px 0;
}
#progressBar {
  width: 0%;
  height: 100%;
  background: red;
  transition: width 1s linear;
}