:root{--bg:#f5f7f7;--surface:#fff;--fg:#14292a;--muted:#5a6d6d;--line:#d4dfde;--accent:#0b6b69;--accent-fg:#fff;
--rendah:#2e7a4d;--rendah-bg:#e2f1e7;--sedang:#946000;--sedang-bg:#faeed3;--tinggi:#b0281f;--tinggi-bg:#fae0dd;--warn-bg:#faeed3;
--font:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;--serif:Georgia,"Times New Roman",serif;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--bg:#0f1817;--surface:#162220;--fg:#e2ecea;--muted:#9bb0ad;--line:#2a3b39;--accent:#58c2b8;--accent-fg:#06201d;
--rendah:#80d19f;--rendah-bg:#1b3326;--sedang:#f0c062;--sedang-bg:#382c12;--tinggi:#f2928a;--tinggi-bg:#3c1d1a;--warn-bg:#382c12;color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:15.5px/1.55 var(--font)}
.wrap{max-width:980px;margin:0 auto;padding:28px 16px 56px;display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
h1,h2,h3{font-family:var(--serif);font-weight:600;margin:0}h1{font-size:30px;line-height:1.2}h2{font-size:22px}h3{font-size:17px;margin-top:8px}
p{margin:0}.muted{color:var(--muted)}.kecil{font-size:13.5px}
.eyebrow{font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);font-weight:600;margin-bottom:6px}
.kepala{display:grid;gap:6px}
.pita{background:var(--warn-bg);color:var(--sedang);text-align:center;padding:8px 16px;font-weight:600;font-size:14px}
fieldset{border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:14px 16px 16px;margin:0 0 14px}
legend{font-weight:600;padding:0 6px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr));gap:12px 16px}
label{display:grid;gap:4px;font-size:14px}
.satuan{color:var(--muted);font-size:12.5px}
input,select{font:inherit;padding:7px 9px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--fg);width:100%}
input:focus,select:focus,button:focus{outline:2px solid var(--accent);outline-offset:1px}
input.salah{border-color:var(--tinggi);background:var(--tinggi-bg)}
.galat{color:var(--tinggi);font-size:12.5px;min-height:0}
.aksi{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
button{font:inherit;padding:9px 18px;border-radius:6px;border:1px solid var(--line);background:var(--surface);color:var(--fg);cursor:pointer}
button.utama{background:var(--accent);border-color:var(--accent);color:var(--accent-fg);font-weight:600}
button:disabled{opacity:.6;cursor:wait}
section{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.dua{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:14px}
.kartu{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--line);border-radius:10px;padding:16px;display:grid;gap:6px;align-content:start}
.kartu.s-rendah{border-top-color:var(--rendah)}.kartu.s-sedang{border-top-color:var(--sedang)}.kartu.s-tinggi{border-top-color:var(--tinggi)}
.kartu.fase{border-top-color:var(--accent)}
.lab{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.besar{font-family:var(--serif);font-size:32px;font-variant-numeric:tabular-nums}
.tindakan{font-weight:600}
.pil{display:inline-block;justify-self:start;padding:1px 11px;border-radius:99px;font-size:13px;font-weight:600}
.p-rendah{color:var(--rendah);background:var(--rendah-bg)}.p-sedang{color:var(--sedang);background:var(--sedang-bg)}.p-tinggi{color:var(--tinggi);background:var(--tinggi-bg)}
.tag{text-transform:none;letter-spacing:0;background:var(--warn-bg);color:var(--sedang);padding:0 8px;border-radius:99px;font-size:12px}
.bilah{display:grid;grid-template-columns:110px 1fr 56px;gap:10px;align-items:center;font-size:14px}
.trek{height:9px;background:var(--line);border-radius:5px;overflow:hidden}.isi{display:block;height:100%;background:var(--muted)}.isi.puncak{background:var(--accent)}
.angka{text-align:right;font-variant-numeric:tabular-nums}
.tw{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:8px}
table{border-collapse:collapse;width:100%;font-size:14.5px;font-variant-numeric:tabular-nums}
th,td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}tbody tr:last-child td{border-bottom:0}
.sepakat{font-weight:600}
.pemberitahuan{margin:0;padding:10px 14px 10px 30px;background:var(--warn-bg);border-radius:6px;font-size:14px}
.pemberitahuan:empty{display:none}
.peringatan{font-size:13.5px;color:var(--muted);border-left:3px solid var(--line);padding-left:10px}