:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;color:#102a43;background:#eef4fb}*{box-sizing:border-box}body{margin:0}.shell{max-width:1200px;margin:auto;padding:28px}.narrow{max-width:560px}.hero{display:flex;justify-content:space-between;align-items:flex-end;background:linear-gradient(135deg,#071f49,#1265c6);color:white;padding:28px;border-radius:24px;box-shadow:0 18px 60px #123e7522;margin-bottom:22px}.hero h1{font-size:38px;margin:4px 0}.eyebrow{font-size:12px;font-weight:800;letter-spacing:.15em;opacity:.8}.live{font-weight:800;background:#ffffff20;padding:8px 12px;border-radius:999px}.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:22px}.card,.panel{background:white;border:1px solid #d9e4f2;border-radius:18px;padding:20px;box-shadow:0 10px 30px #163f6712}.card small{color:#6b7f93}.card strong{display:block;font-size:32px;margin-top:6px}.panel-head{display:flex;justify-content:space-between;align-items:center}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:13px;border-bottom:1px solid #e5edf6}button{border:0;border-radius:12px;padding:10px 16px;background:#0c57b8;color:#fff;font-weight:700;cursor:pointer}label{display:block;font-weight:700;margin:16px 0}input{display:block;width:100%;padding:13px;border:1px solid #cbd9e8;border-radius:12px;margin-top:7px;font:inherit}.badge{padding:5px 9px;border-radius:999px;background:#eaf1f9;font-size:12px;font-weight:800}.HADIR{background:#e5f8ee;color:#137a4a}.TERLAMBAT{background:#fff0d5;color:#a76400}.IZIN,.SAKIT{background:#e9efff;color:#3553aa}.ALPA{background:#ffe7e7;color:#a62a2a}pre{white-space:pre-wrap;background:#081a2f;color:#d9ecff;padding:14px;border-radius:14px;min-height:120px}@media(max-width:900px){.grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:600px){.shell{padding:14px}.hero{display:block}.grid{grid-template-columns:repeat(2,1fr)}}