body { font-family: Arial, sans-serif; margin: 0; background: #f4f6f8; }
.hidden { display: none !important; }
.center-box { max-width: 320px; margin: 100px auto; padding: 24px; background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); text-align: center; }
.center-box input, .center-box button { width: 100%; padding: 10px; margin: 6px 0; box-sizing: border-box; }
.error { color: #c0392b; }
nav { background: #1a5276; padding: 12px 20px; display: flex; gap: 10px; align-items: center; }
nav button { padding: 8px 12px; cursor: pointer; }
nav span { color: white; margin-right: auto; font-weight: bold; }
section { padding: 20px; }
.selectors { margin-bottom: 16px; display: flex; gap: 8px; }
table { width: 100%; border-collapse: collapse; background: white; }
th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
tr.status-completed { background: #d4efdf; }
tr.status-overdue { background: #f5b7b1; }
.dash-grid { display: flex; gap: 30px; flex-wrap: wrap; align-items: flex-start; }
.modal { position: fixed; top:0; left:0; right:0; bottom:0; background: rgba(0,0,0,0.4); display:flex; align-items:center; justify-content:center; }
.modal-content { background: white; padding: 20px; border-radius: 8px; width: 300px; }
.modal-content input, .modal-content button { width: 100%; padding: 8px; margin: 6px 0; }