:root {
  --hijau: #2E7D5B; --hijau-tua: #23634a; --hijau-muda: #e6f2ec;
  --latar: #f3f5f4; --kartu: #fff; --teks: #1d2622; --redup: #5d6b65; --garis: #d9e0dc;
  --kuning: #fff3b0; --merah: #b3261e;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: system-ui, "Segoe UI", Roboto, Arial, sans-serif; background: var(--latar); color: var(--teks); font-size: 16px; line-height: 1.45; }
a { color: var(--hijau); }
button, input, select, textarea { font: inherit; color: inherit; }
.tombol { display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--garis); background: #fff; cursor: pointer; font-weight: 600; text-decoration: none; color: var(--teks); white-space: nowrap; }
.tombol:hover { border-color: var(--hijau); }
.tombol.utama { background: var(--hijau); border-color: var(--hijau); color: #fff; }
.tombol.utama:hover { background: var(--hijau-tua); }
.tombol.kecil { min-height: 34px; padding: 0 10px; border-radius: 9px; font-size: 14px; }
.tombol.bahaya { color: var(--merah); }
.tombol:disabled { opacity: .5; cursor: default; }
.isian { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--garis); border-radius: 10px; background: #fff; }
.isian:focus { outline: 2px solid var(--hijau); outline-offset: -1px; }
label.lbl { display: block; font-size: 14px; font-weight: 600; color: var(--redup); margin: 12px 0 4px; }
.wadah { max-width: 760px; margin: 0 auto; padding: 16px; }
.kartu { background: var(--kartu); border: 1px solid var(--garis); border-radius: 16px; padding: 16px; margin-bottom: 12px; }
.kepala { background: var(--hijau); color: #fff; }
.kepala .wadah { display: flex; align-items: center; gap: 12px; padding-top: 12px; padding-bottom: 12px; }
.kepala h1 { font-size: 18px; margin: 0; flex: 1; }
.kepala .tombol { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.redup { color: var(--redup); }
.kecil { font-size: 14px; }
.baris-flex { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.galat { color: var(--merah); font-weight: 600; }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: #1d2622; color: #fff; padding: 12px 18px; border-radius: 12px; z-index: 100; max-width: calc(100% - 32px); box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.toast.galat { background: var(--merah); color: #fff; }
[hidden] { display: none !important; }