:root{
  --primary:#0f5132;
  --primary-light:#34c38f;
  --gold:#c9a227;
  --dark:#0f2027;
  --bg:#f4f7f6;
  --card:#ffffff;
  --danger:#e74c3c;
  --warning:#f0ad4e;
  --info:#3498db;
  --radius:16px;
  --shadow:0 8px 24px rgba(15,32,39,.08);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);
  color:#233;
}
a{color:inherit}
.badge{display:inline-block;padding:4px 12px;border-radius:999px;font-size:.75rem;font-weight:600}
.badge.tepat{background:#d4f4e2;color:#0f5132}
.badge.terlambat{background:#fff3cd;color:#8a6416}
.badge.izin{background:#dbeafe;color:#1e40af}
.badge.alpa{background:#fde2e1;color:#a4231b}
.btn{display:inline-block;padding:10px 20px;border:none;border-radius:12px;font-weight:600;cursor:pointer;font-size:.9rem;transition:.2s}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:#0c3f27}
.btn-gold{background:var(--gold);color:#fff}
.btn-danger{background:var(--danger);color:#fff}
.btn-outline{background:transparent;border:2px solid var(--primary);color:var(--primary)}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}
table{width:100%;border-collapse:collapse}
table th,table td{padding:10px 12px;text-align:left;border-bottom:1px solid #eef0ef;font-size:.88rem}
table th{background:#f7faf9;font-weight:600;color:#456}
.islamic-border{border-top:4px solid var(--gold)}