:root {
  --biru: #1B3A6B; --biru-muda: #E7EDF6; --tinta: #14181F; --abu: #5B6472;
  --kertas: #F5F6F7; --putih: #FFFFFF; --garis: #DFE3E8;
  --hadir: #166534; --hadir-bg: #E8F5EC; --terlambat: #92610D; --terlambat-bg: #FDF3E0;
  --izin: #1B3A6B; --izin-bg: #E7EDF6; --alpa: #9B2C2C; --alpa-bg: #FDEDED;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, "Segoe UI", sans-serif; color: var(--tinta); background: var(--kertas); line-height: 1.5; }
h1, h2, h3 { margin: 0 0 .5rem; }
.teks-kedua { color: var(--abu); margin: 0 0 1rem; }
.teks-kedua-terang { color: #C9D5EA; margin-left: .75rem; font-size: .9rem; }
.memuat, .galat, .belum { padding: 1rem 16px; }
.galat, .pesan-galat { color: var(--alpa); }
button { font: inherit; cursor: pointer; border: 1px solid var(--garis); background: var(--putih); color: var(--tinta); border-radius: 6px; padding: .45rem .9rem; min-height: 36px; }
button.utama { background: var(--biru); color: #fff; border-color: var(--biru); width: 100%; margin-top: 1rem; }
button.kecil { padding: .2rem .6rem; min-height: 28px; }
button.bahaya { color: var(--alpa); border-color: #F0C0C0; background: var(--alpa-bg); }
input { width: 100%; height: 36px; border: 1px solid var(--garis); border-radius: 6px; padding: 0 .6rem; font: inherit; background: var(--putih); color: var(--tinta); }
input:focus { outline: 2px solid var(--biru); border-color: var(--biru); }
label { display: block; margin: .8rem 0 .25rem; color: var(--abu); font-size: .9rem; }

.masuk { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.kartu-masuk { width: 100%; max-width: 26rem; background: var(--putih); border: 1px solid var(--garis); border-radius: 8px; padding: 1.5rem; }
.kartu-masuk h1 { color: var(--biru); font-size: 1.3rem; }
.kotak-uji { margin-top: 1.5rem; padding: .75rem; background: var(--biru-muda); border-radius: 6px; font-size: .9rem; }
.kotak-uji p { margin: .25rem 0 .5rem; }

.kerangka { display: flex; flex-direction: column; min-height: 100vh; }
.kepala { background: var(--biru); color: #fff; padding: .6rem 16px; display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between; align-items: center; }
.kepala-kanan { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; font-size: .9rem; }
.badan { display: flex; flex: 1; flex-wrap: wrap; }
.menu { width: 12rem; background: var(--putih); border-right: 1px solid var(--garis); padding: .5rem; display: flex; flex-direction: column; gap: 2px; }
.menu button { text-align: left; border: 0; background: transparent; }
.menu button.menu-aktif { background: var(--biru-muda); color: var(--biru); font-weight: 600; }
.isi { flex: 1; min-width: 0; padding: 1rem 16px; }
@media (max-width: 700px) { .menu { width: 100%; flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--garis); } }

table { border-collapse: collapse; width: 100%; background: var(--putih); }
th, td { text-align: left; padding: .5rem .75rem; border-bottom: 1px solid var(--garis); }
th { color: var(--abu); font-weight: 600; font-size: .85rem; }
tbody tr:hover { background: var(--kertas); }
.isi table { display: block; overflow-x: auto; }

.kartu-ringkas { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .75rem; }
.ringkas { background: var(--putih); border: 1px solid var(--garis); border-radius: 8px; padding: .8rem 1rem; display: flex; flex-direction: column; }
.ringkas .angka { font-size: 1.8rem; font-weight: 700; }
.ringkas.hadir { background: var(--hadir-bg); color: var(--hadir); }
.ringkas.terlambat { background: var(--terlambat-bg); color: var(--terlambat); }
.ringkas.izin { background: var(--izin-bg); color: var(--izin); }
.ringkas.alpa { background: var(--alpa-bg); color: var(--alpa); }

.diagnostik { max-width: 48rem; margin: 0 auto; padding: 1rem 16px; }
.ok { color: var(--hadir); }
.fail { color: var(--alpa); font-weight: 600; }