:root {
  color-scheme: light;
  --latar: #f5f6f4;
  --kad: #ffffff;
  --teks: #1c2320;
  --lembut: #5d6a64;
  --garis: #dfe3df;
  --utama: #156948;
  --utama-gelap: #0f5138;
  --bahaya: #b3261e;
  --pilih: #e3f3ea;
  --ubah: #fff6d6;
  --t1: #d9a400; --t1-l: #fff5d6;
  --t2: #2f9e5f; --t2-l: #e4f5ea;
  --t3: #c55a11; --t3-l: #fbe9dc;
  --t4: #2f6fb5; --t4-l: #e2edf8;
  --t5: #7a827e; --t5-l: #eef0ee;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--latar); color: var(--teks);
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.btn {
  min-height: 44px; padding: 8px 14px; border: 1px solid var(--garis); border-radius: 10px;
  background: var(--kad); font-weight: 600;
}
.btn:disabled { opacity: .5; cursor: default; }
.btn.utama { background: var(--utama); border-color: var(--utama); color: #fff; }
.btn.bahaya { color: var(--bahaya); }
.btn.kecil { min-height: 36px; padding: 4px 10px; font-size: 14px; }
.btn.penuh { width: 100%; }
a.btn { display: inline-flex; align-items: center; color: inherit; text-decoration: none; }

input[type=text], input[type=password], input[type=search], select {
  width: 100%; min-height: 44px; padding: 8px 12px; font-size: 16px;
  border: 1px solid var(--garis); border-radius: 10px; background: var(--kad);
}
label { display: block; margin-bottom: 12px; font-size: 14px; font-weight: 600; }
label input, label select { margin-top: 4px; font-weight: 400; }
:focus-visible { outline: 2px solid var(--utama); outline-offset: 1px; }

/* Log masuk */
.log-masuk { max-width: 380px; margin: 0 auto; padding: 56px 16px; }
.log-masuk h1 { margin: 0 0 4px; font-size: 26px; }
.log-masuk p { margin: 0 0 24px; color: var(--lembut); }
.ralat { margin: 0 0 12px; color: var(--bahaya); font-size: 14px; }

/* Rangka */
.atas {
  position: sticky; top: 0; z-index: 5; background: var(--utama); color: #fff;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.atas h1 { margin: 0; font-size: 18px; line-height: 1.2; }
.atas small { display: block; font-size: 13px; opacity: .85; font-weight: 400; }
.atas .btn { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; flex: none; }
.isi { max-width: 760px; margin: 0 auto; padding: 12px 16px 120px; }
.lebar .isi { max-width: 960px; }

.lekat { position: sticky; top: 0; z-index: 5; }
.lekat .atas { position: static; }
.tab { display: flex; background: var(--kad); border-bottom: 1px solid var(--garis); }
.tab button { flex: 1; min-width: 0; min-height: 46px; padding: 0 4px; background: none; border: 0; border-bottom: 3px solid transparent; font-weight: 600; font-size: 15px; color: var(--lembut); }
.tab button[aria-current=page] { color: var(--utama); border-bottom-color: var(--utama); }

/* Staf */
.status { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: var(--kad); border: 1px solid var(--garis); font-size: 14px; }
.status.ok { background: var(--pilih); border-color: #b9dfc9; }
.alat { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.alat input { flex: 1; min-width: 0; }
.alat select { flex: 1 1 100%; }
.alat select ~ .btn { flex: 1; justify-content: center; white-space: nowrap; }
.alat .btn[aria-pressed=true] { background: var(--pilih); border-color: var(--utama); color: var(--utama-gelap); }

.kumpulan { margin-bottom: 14px; background: var(--kad); border: 1px solid var(--garis); border-radius: 12px; overflow: hidden; }
.kumpulan > h2 {
  margin: 0; padding: 9px 12px; font-size: 14px; letter-spacing: .03em;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border-left: 6px solid var(--w); background: var(--wl);
}
.kumpulan > h2 span.bil { font-weight: 400; color: var(--lembut); }
.t1 { --w: var(--t1); --wl: var(--t1-l); }
.t2 { --w: var(--t2); --wl: var(--t2-l); }
.t3 { --w: var(--t3); --wl: var(--t3-l); }
.t4 { --w: var(--t4); --wl: var(--t4-l); }
.t5 { --w: var(--t5); --wl: var(--t5-l); }

.baris { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-top: 1px solid var(--garis); min-height: 56px; }
.kumpulan > h2 + .baris { border-top: 0; }
.baris .nama { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.baris .nama small { display: block; color: var(--lembut); font-size: 12px; }
.baris.ada { background: var(--pilih); }
.baris.ubah { background: var(--ubah); }
.baris.dibuang .nama > span { text-decoration: line-through; color: var(--lembut); }
.tanda { flex: none; width: 44px; height: 44px; border: 1px solid var(--garis); border-radius: 10px; background: var(--kad); font-size: 20px; font-weight: 700; }
.tanda[aria-pressed=true] { background: var(--utama); border-color: var(--utama); color: #fff; }
.kuantiti { flex: none; width: 76px !important; text-align: center; padding: 8px 4px !important; }
.label-buang { flex: none; font-size: 13px; color: var(--bahaya); font-weight: 600; }

.bawah {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; background: var(--kad);
  border-top: 1px solid var(--garis); padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
}
.bawah > div { max-width: 760px; margin: 0 auto; display: flex; gap: 8px; }
.lebar .bawah > div { max-width: 960px; }
.bawah .btn { flex: 1; }

/* Admin */
.ringkas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 12px; }
.ringkas div { padding: 8px 10px; background: var(--kad); border: 1px solid var(--garis); border-radius: 10px; font-size: 13px; }
.ringkas div.ok { background: var(--pilih); border-color: #b9dfc9; }
.ringkas b { display: block; font-size: 14px; }
.nilai { flex: none; min-width: 40px; text-align: center; font-weight: 700; padding: 2px 8px; border-radius: 8px; background: var(--latar); }
.tajuk-sub { margin: 18px 0 8px; font-size: 16px; }
details.log { margin-top: 16px; }
details.log summary { min-height: 44px; display: flex; align-items: center; font-weight: 600; cursor: pointer; }
.log-baris { padding: 6px 0; border-top: 1px solid var(--garis); font-size: 14px; }
.log-baris small { color: var(--lembut); }
.kosong { padding: 32px 16px; text-align: center; color: var(--lembut); }
.kad { background: var(--kad); border: 1px solid var(--garis); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.kad h2 { margin: 0 0 10px; font-size: 16px; }
.dua { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.baris .aksi { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; flex: none; }
.medan-pengguna { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 10px; }
.kad.pengguna .aksi { display: flex; flex-wrap: wrap; gap: 8px; }
.nyahaktif { opacity: .55; }

/* Dialog */
dialog { border: 0; border-radius: 14px; padding: 18px; width: min(420px, calc(100vw - 32px)); color: var(--teks); }
dialog::backdrop { background: rgba(0,0,0,.45); }
dialog h2 { margin: 0 0 8px; font-size: 18px; }
dialog p { margin: 0 0 14px; }
dialog .aksi { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
dialog textarea { width: 100%; font-size: 16px; }

#toast {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 20;
  max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 10px;
  background: #1c2320; color: #fff; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s;
}
#toast.nampak { opacity: 1; }