:root { --kopi:#2B1A12; --kopi2:#4A2C1D; --krem:#F6EEDF; --krem2:#FBF7EF; --emas:#D9A441; --merah:#B83222; --hijau:#2E7D4F; --abu:#6B5444; --garis:#E6D3B3; }
* { box-sizing:border-box; }
body { margin:0; font-family:'Segoe UI', Roboto, Arial, sans-serif; background:var(--krem); color:var(--kopi); font-size:16px; line-height:1.45; }
.atas { display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--kopi); color:#F3E3C3; border-bottom:4px solid var(--emas); position:sticky; top:0; z-index:5; }
.logo { width:38px; height:38px; border-radius:8px; background:#fff; }
.judul { font-weight:700; color:#F2CF7A; }
.sub { font-size:13px; opacity:.85; }
.atas button { margin-left:auto; }
main { max-width:720px; margin:0 auto; padding:16px; }
.kartu { background:#fff; border-radius:14px; padding:16px; margin-bottom:14px; box-shadow:0 4px 14px rgba(43,26,18,.08); border-top:4px solid var(--emas); }
.kartu h2 { font-size:17px; margin:0 0 10px; }
label { display:block; font-size:14px; color:var(--abu); margin:10px 0 4px; }
input, select, textarea { width:100%; padding:12px; border:1px solid var(--garis); border-radius:10px; font-size:16px; background:var(--krem2); color:var(--kopi); }
textarea { min-height:70px; }
button { font:inherit; border:0; border-radius:10px; padding:12px 16px; background:var(--kopi2); color:#fff; font-weight:600; cursor:pointer; }
button.besar { width:100%; padding:18px; font-size:19px; margin-top:8px; }
button.emas { background:var(--emas); color:var(--kopi); }
button.hijau { background:var(--hijau); }
button.merah { background:var(--merah); }
button.kecil { padding:7px 12px; font-size:14px; background:transparent; color:#F2CF7A; border:1px solid #F2CF7A; }
button.garis { background:#fff; color:var(--kopi2); border:1px solid var(--kopi2); }
button:disabled { opacity:.5; }
.baris { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.baris > * { flex:1; }
.chip { display:inline-block; padding:3px 10px; border-radius:999px; font-size:13px; font-weight:600; background:var(--krem); }
.chip.hadir, .chip.disetujui { background:#E3F2E8; color:var(--hijau); }
.chip.terlambat, .chip.menunggu { background:#FFF3D6; color:#8A5A00; }
.chip.belum\/alpa, .chip.ditolak { background:#FBE4E0; color:var(--merah); }
.chip.izin, .chip.cuti, .chip.libur { background:#E8EEF8; color:#2D4A7A; }
.daftar { list-style:none; padding:0; margin:0; }
.daftar li { padding:10px 0; border-bottom:1px dashed var(--garis); }
.daftar li:last-child { border-bottom:0; }
.kecilan { font-size:13px; color:var(--abu); }
.besar-angka { font-size:30px; font-weight:700; }
.tab { display:flex; gap:6px; overflow-x:auto; margin-bottom:12px; }
.tab button { flex:1; background:#fff; color:var(--kopi2); border:1px solid var(--garis); white-space:nowrap; }
.tab button.aktif { background:var(--kopi2); color:#fff; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { padding:8px 6px; border-bottom:1px solid var(--garis); text-align:left; }
th { color:var(--abu); font-weight:600; }
.selfie { width:56px; height:56px; object-fit:cover; border-radius:10px; cursor:pointer; background:var(--krem); }
.besar-foto { position:fixed; inset:0; background:rgba(0,0,0,.85); display:flex; align-items:center; justify-content:center; z-index:20; }
.besar-foto img { max-width:92vw; max-height:85vh; border-radius:12px; }
.pesan { position:fixed; left:16px; right:16px; bottom:16px; max-width:600px; margin:0 auto; padding:14px 16px; border-radius:12px; background:var(--kopi); color:#fff; z-index:30; box-shadow:0 8px 24px rgba(0,0,0,.25); }
.pesan.galat { background:var(--merah); }
.hilang { display:none !important; }
.muat { text-align:center; color:var(--abu); }
.gulir { overflow-x:auto; }