:root { --hijau:#0f766e; --hijau-tua:#115e59; --abu:#64748b; --garis:#dbe3e1; --bg:#f4f7f6; --merah:#b91c1c; --kuning:#b45309; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:#0f172a; }
header.atas { background:var(--hijau); color:#fff; padding:.6rem 1rem; display:flex; justify-content:space-between; align-items:center; gap:.5rem; }
header.atas small { opacity:.85; display:block; }
main { max-width:760px; margin:0 auto; padding:1rem; }
.kartu { background:#fff; border:1px solid var(--garis); border-radius:.75rem; padding:1rem; margin-bottom:.75rem; }
.grid { display:grid; gap:.75rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.angka { font-size:1.7rem; font-weight:700; }
.muted { color:var(--abu); font-size:.9rem; } .tengah { text-align:center; }
.masuk { color:var(--hijau); } .keluar { color:var(--merah); }
label { display:block; margin:.6rem 0 .2rem; font-weight:600; font-size:.9rem; }
input, select, textarea { width:100%; padding:.6rem; border:1px solid #b6c4c1; border-radius:.5rem; font:inherit; background:#fff; }
.baris { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-top:.5rem; }
.lencana { display:inline-block; padding:.1rem .5rem; border-radius:999px; font-size:.78rem; font-weight:600; background:#e2e8f0; }
.lencana.menunggu { background:#fef3c7; color:var(--kuning); } .lencana.disetujui { background:#d1fae5; color:#065f46; }
.lencana.ditolak { background:#fee2e2; color:var(--merah); } .lencana.ditarik { background:#e2e8f0; color:#475569; }
.galat { color:var(--merah); font-weight:600; margin:.5rem 0; } .info { background:#ecfeff; border:1px solid #a5f3fc; padding:.6rem; border-radius:.5rem; }
.tx { display:flex; justify-content:space-between; gap:.75rem; } .tx .kanan { text-align:right; white-space:nowrap; }
table { width:100%; border-collapse:collapse; font-size:.9rem; } th, td { text-align:left; padding:.35rem .4rem; border-bottom:1px solid var(--garis); } td.r, th.r { text-align:right; }
dialog { border:0; border-radius:.75rem; padding:1rem; width:min(92vw,420px); } dialog::backdrop { background:rgba(0,0,0,.4); }
img.bukti { max-width:100%; border-radius:.5rem; }
.login { max-width:380px; margin:12vh auto; padding:0 1rem; }
code.sandi { font-size:1.1rem; background:#fef9c3; padding:.2rem .4rem; border-radius:.3rem; user-select:all; }

.lencana.otomatis { background:#dbeafe; color:#1e40af; display:block; margin-top:.25rem; } .lencana.selisih { background:#fef3c7; color:var(--kuning); margin:.25rem .25rem 0 0; }
.lencana.terlambat { background:#fee2e2; color:var(--merah); margin-top:.25rem; } .peringatan { color:var(--kuning); font-weight:600; font-size:.9rem; margin-top:.25rem; }
[hidden] { display:none !important; }

/* Driver & Panel Super Admin (tanpa atribut style inline: CSP style-src 'self') */
.batang { height:10px; border-radius:5px; background:#e2e8f0; overflow:hidden; } .batang > div { height:10px; border-radius:5px; }
.klik { cursor:pointer; } .coret { text-decoration:line-through; }
.baris-jab { padding:.35rem 0; border-bottom:1px solid var(--garis); } .kiri-kecil { margin-left:.4rem; }

/* Notulen & Pengaturan Super Admin (tanpa atribut style inline) */
.baris-judul { display:flex; justify-content:space-between; align-items:center; gap:.5rem; margin:.25rem 0 .75rem; flex-wrap:wrap; } .baris-judul h3 { margin:0; }
.segmen { display:flex; gap:.4rem; margin-bottom:.6rem; flex-wrap:wrap; }
.chips { display:flex; flex-wrap:wrap; gap:.4rem; margin:.3rem 0; }
.chip { display:inline-block; background:#e8edf0; color:#0f172a; border:0; border-radius:999px; padding:.25rem .7rem; font:inherit; font-size:.85rem; font-weight:600; }
button.chip { cursor:pointer; display:inline-flex; align-items:center; min-height:44px; padding:.45rem .9rem; } .chip.aktif { background:var(--hijau); color:#fff; }
.cuplikan { margin:.3rem 0; font-size:.92rem; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.teks-notulen { white-space:pre-wrap; margin:.2rem 0 .6rem; }
.galeri { display:flex; flex-wrap:wrap; gap:.5rem; margin:.4rem 0; }
button.foto { width:84px; height:84px; padding:0; border:1px solid var(--garis); border-radius:.6rem; background:#e0f2f1; overflow:hidden; cursor:pointer; }
button.foto img.mini { width:100%; height:100%; object-fit:cover; display:block; }
button.unggah { width:100%; border:2px dashed #5aa59c; background:#e6f4f1; color:#0b5d55; border-radius:.7rem; padding:.9rem; font:inherit; font-weight:700; cursor:pointer; margin:.3rem 0; }
.dua { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }

.kecil { font-size:.8rem; }
.baris-set { display:flex; justify-content:space-between; align-items:center; gap:.75rem; padding:.7rem 0; border-bottom:1px solid var(--garis); }
.baris-set:last-child, .baris-set.tanpa-garis { border-bottom:0; }
.nilai-set { display:flex; flex-direction:column; align-items:flex-end; gap:.3rem; text-align:right; }
.kartu.kuning { border-color:#f59e0b; background:#fffbeb; }
.banner { border-radius:.6rem; padding:.7rem .9rem; margin-bottom:.6rem; font-size:.9rem; }
.banner.kuning { background:#fef3c7; color:#92400e; } .banner.merah { background:#fce7f3; color:#9d174d; }
.inisial { display:inline-flex; width:2.2rem; height:2.2rem; align-items:center; justify-content:center; border-radius:.5rem; background:#d9efec; color:#0b5d55; font-weight:700; font-size:.8rem; flex:none; }
input[type=checkbox].sakelar { appearance:none; -webkit-appearance:none; width:2.7rem; height:1.5rem; padding:0; border:0; border-radius:999px; background:#cbd5e1; position:relative; cursor:pointer; flex:none; }
input[type=checkbox].sakelar::after { content:''; position:absolute; top:.15rem; left:.15rem; width:1.2rem; height:1.2rem; border-radius:50%; background:#fff; transition:left .15s; }
input[type=checkbox].sakelar:checked { background:var(--hijau); } input[type=checkbox].sakelar:checked::after { left:1.35rem; }

.lencana.alih { background:#dcf1ee; color:#0f5f58; border:1px solid #9fd3cc; }
.lencana.gelap { background:#1f2937; color:#fff; }
.catatan-audit { background:#e3f3f1; color:#0f5f58; }
.kartu.garis-merah { border:1px solid #e0a5a0; }
.nihil-ringkas { cursor:pointer; } .nihil-ringkas .daftar-nihil { margin-top:.5rem; padding-top:.5rem; border-top:1px dashed var(--garis); overflow-wrap:anywhere; }
.nihil-ringkas .daftar-nihil[hidden] { display:none; }
.lencana.nihil { background:#eef0f3; color:#475467; box-shadow:inset 0 0 0 2px #98a2b3; }
.nihil-ringkas .chevron { margin-left:.4rem; color:#475467; }
.nihil-ringkas .baris-nihil { padding:.4rem 0; border-top:1px solid var(--garis); } .nihil-ringkas .baris-nihil:first-child { border-top:0; }
.tampilkan-lainnya { width:100%; margin-bottom:.75rem; }
.kartu { overflow-x:auto; max-width:100%; }

/* BUG-14: tombol seragam untuk <button> dan <a>; area sentuh minimal 44px. Sekunder = garis & teks teal (tombol unduh). */
.btn, button.btn, a.btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-height:44px; background:var(--hijau); color:#fff; border:1.5px solid var(--hijau); border-radius:.5rem; padding:.6rem 1rem; font:inherit; font-weight:600; line-height:1.2; text-decoration:none; cursor:pointer; }
a.btn:hover, a.btn:visited, a.btn:active { color:#fff; text-decoration:none; }
.btn.sekunder, a.btn.sekunder, button.btn.sekunder { background:#fff; color:var(--hijau); border-color:var(--hijau); }
a.btn.sekunder:hover, a.btn.sekunder:visited, a.btn.sekunder:active { color:var(--hijau); }
.btn.bahaya, button.btn.bahaya { background:var(--merah); border-color:var(--merah); color:#fff; }
.btn:disabled, button.btn:disabled { background:#e2e8f0; border-color:#cbd5e1; color:#64748b; cursor:not-allowed; }
.btn.sibuk, button.btn.sibuk, .btn.sibuk:disabled, button.btn.sibuk:disabled { background:var(--hijau); border-color:var(--hijau); color:#fff; opacity:.6; cursor:progress; }
.putar { width:1em; height:1em; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%; animation:putar .8s linear infinite; }
@keyframes putar { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .putar { animation-duration:2.4s; } }
.toast { position:fixed; left:50%; bottom:5.5rem; transform:translateX(-50%); z-index:60; max-width:calc(100% - 2rem); background:#0f172a; color:#fff; padding:.7rem 1.1rem; border-radius:.6rem; font-weight:600; box-shadow:0 4px 14px rgba(0,0,0,.25); }
.btn.lebar, button.btn.lebar { display:flex; width:100%; margin-top:.75rem; padding:.85rem; }
.btn.kecil, button.btn.kecil { min-height:44px; padding:.35rem .9rem; font-size:.85rem; }
header.atas .btn.sekunder { border-color:#fff; }

/* BUG-16: navigasi bawah (maks 4 tab + Lainnya), tanpa scroll horizontal di 360px */
main { padding-bottom:5.5rem; }
nav.bawah { position:fixed; left:0; right:0; bottom:0; z-index:20; display:flex; gap:.15rem; padding:.35rem .35rem calc(.35rem + env(safe-area-inset-bottom, 0px)); background:#fff; border-top:1px solid var(--garis); box-shadow:0 -2px 8px rgba(15,23,42,.06); }
nav.bawah .tab { position:relative; flex:1 1 0; min-width:0; min-height:56px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.1rem; background:none; border:0; border-radius:.7rem; padding:.25rem 0; font:inherit; color:var(--abu); cursor:pointer; }
nav.bawah .tab.aktif { background:#ccfbf1; color:var(--hijau-tua); font-weight:600; }
nav.bawah .ikon-tab { font-size:1.2rem; line-height:1; }
nav.bawah .nama-tab { font-size:.6875rem; letter-spacing:-.01em; line-height:1.1; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lencana-nav { background:#b91c1c; color:#fff; border-radius:999px; font-size:.68rem; font-weight:700; line-height:1; padding:.18rem .38rem; min-width:1.15rem; text-align:center; }
.lencana-nav[hidden] { display:none; }
nav.bawah .tab .lencana-nav { position:absolute; top:.15rem; left:calc(50% + .35rem); }
.lembar-latar { position:fixed; inset:0; z-index:30; background:rgba(15,23,42,.45); display:flex; align-items:flex-end; justify-content:center; }
.lembar { width:100%; max-width:760px; max-height:80vh; overflow-y:auto; background:#fff; border-radius:1.1rem 1.1rem 0 0; padding:.6rem 1rem calc(5rem + env(safe-area-inset-bottom, 0px)); }
.lembar .pegangan { width:2.5rem; height:.3rem; border-radius:999px; background:#cbd5e1; margin:0 auto .6rem; }
.lembar h3 { margin:.2rem 0; }
.baris-lainnya { display:flex; align-items:center; gap:.8rem; width:100%; min-height:48px; padding:.4rem .2rem; background:none; border:0; border-bottom:1px solid var(--garis); font:inherit; font-weight:600; color:#0f172a; text-align:left; cursor:pointer; }
.baris-lainnya .ikon-lainnya { display:inline-flex; align-items:center; justify-content:center; width:2.2rem; height:2.2rem; border-radius:.6rem; background:#e0f2f1; color:var(--hijau-tua); }
.baris-lainnya .nama-lainnya { flex:1; } .baris-lainnya .panah-lainnya { color:var(--abu); font-size:1.3rem; }

/* Tugas Bendahara: tiga seksi (Setoran masuk, Transfer, Pencocokan) dengan angka menunggu */
.seksi-tugas .judul-seksi { justify-content:space-between; align-items:center; flex-wrap:nowrap; }
.seksi-tugas .judul-seksi h3 { margin:.1rem 0; }
.seksi-tugas .lencana-nav { font-size:.8rem; padding:.3rem .55rem; }

/* Halaman "Buat password baru" (tautan reset): mata tampil/sembunyi 44px, tombol penuh lebar */
.bidang-sandi { display:flex; gap:.4rem; align-items:stretch; }
.bidang-sandi input { flex:1; min-width:0; min-height:44px; margin:0; }
.bidang-sandi .mata { flex:0 0 44px; min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; background:#fff; border:1.5px solid var(--hijau); color:var(--hijau); border-radius:.6rem; font-size:1.15rem; cursor:pointer; }
.petunjuk-sandi { margin:.5rem 0 .25rem; font-size:.9rem; }

/* Layar sukses pendaftaran (BUG-20) */
.sukses-daftar { text-align:center; margin-top:6vh; }
.sukses-daftar .centang { width:64px; height:64px; margin:0 auto .75rem; border-radius:50%; background:var(--hijau); color:#fff; font-size:2.2rem; line-height:64px; font-weight:700; }
.sukses-daftar p { margin:.5rem 0; }
.sukses-daftar .ringkas { text-align:left; background:#f1f5f9; border:1px solid #e2e8f0; border-radius:.6rem; padding:.7rem .9rem; margin:1rem 0; }
.sukses-daftar .baris-ringkas { display:flex; justify-content:space-between; gap:.75rem; padding:.25rem 0; } .sukses-daftar .baris-ringkas strong { text-align:right; word-break:break-word; }
.sukses-daftar .langkah-daftar { text-align:left; color:var(--abu); margin:.5rem 0 1rem; padding-left:1.2rem; }