:root{--bg:#f4f5f7;--card:#fff;--ink:#1d2330;--mute:#6b7280;--line:#e3e6eb;--brand:#2952cc;
--Present:#1f9d55;--Late:#d97706;--Absent:#d33a3a;--Excused:#2b7bd6}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink);font-size:15px}
.top{background:#1d2330;color:#fff;padding:12px 18px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.top a{color:#fff;text-decoration:none}.top b{font-size:17px}
.wrap{max-width:980px;margin:0 auto;padding:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:16px}
h1{font-size:22px;margin:0 0 12px}h2{font-size:17px;margin:0 0 12px}
.uni{font-weight:700;margin:16px 0 8px}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--line);border-radius:9px;padding:10px 12px;margin-bottom:8px;flex-wrap:wrap}
.row small{color:var(--mute);display:block}
.btns{display:flex;gap:6px;flex-wrap:wrap}
button,.btn{font:inherit;font-size:13.5px;border:1px solid var(--line);background:#fff;border-radius:7px;padding:7px 11px;cursor:pointer;color:var(--ink);text-decoration:none;display:inline-block}
button:hover,.btn:hover{background:#f0f2f6}
.primary{background:var(--brand)!important;color:#fff!important;border-color:var(--brand)}
.danger{color:var(--Absent)}
input,textarea,select{font:inherit;width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;margin:4px 0 12px}
label{font-size:13.5px;font-weight:600}
.hint{font-size:13px;color:var(--mute)}
.msg{padding:12px 14px;border-radius:9px;margin:10px 0;font-size:14.5px}
.ok{background:#e7f6ee;color:#14663a}.warn{background:#fff4e0;color:#8a4b00}.err{background:#fdeaea;color:#962323}
table{width:100%;border-collapse:collapse;font-size:14px}
td,th{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--mute)}
.pill{padding:4px 11px;border-radius:99px;font-size:13px;font-weight:700;color:#fff;display:inline-block}
.st{font-weight:700;white-space:nowrap}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:640px){.grid2{grid-template-columns:1fr}}
.narrow{max-width:420px;margin:40px auto}
.drop{border:2px dashed var(--line);border-radius:10px;padding:14px}