:root{
  --bg:#0B1220;--sf:#111B2E;--sf2:#1A2742;--garis:#2A3A5C;--teks:#F1F5F9;--teks2:#A9B8D3;
  --biru:#5B9DFF;--hijau:#4ADE80;--kuning:#FACC15;--merah:#F87171;
  --r:28px;--rp:999px;
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--teks);font-size:16px;line-height:1.5}
#splash{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;z-index:9;transition:opacity .4s}
#splash img{width:96px;height:96px;border-radius:24px}
#splash p{margin:0;font-weight:800;font-size:22px;letter-spacing:.08em}
#splash small{color:var(--teks2)}
#splash.hilang{opacity:0;pointer-events:none}
.atas{display:flex;align-items:center;gap:12px;padding:calc(16px + env(safe-area-inset-top)) 16px 12px;position:sticky;top:0;background:var(--bg);z-index:2;border-bottom:1px solid var(--garis)}
.atas h1{margin:0;font-size:18px}
.logo{width:40px;height:40px;border-radius:12px}
.atas .pil{margin-left:auto}
main{max-width:640px;margin:0 auto;padding:16px 16px calc(32px + env(safe-area-inset-bottom))}
.kartu{background:var(--sf);border:1px solid var(--garis);border-radius:var(--r);padding:18px;margin-bottom:14px}
.kartu h2{margin:0 0 4px;font-size:16px}
.kecil{color:var(--teks2);font-size:14px;margin:4px 0 10px}
.tengah{text-align:center}
label{display:block;font-size:14px;color:var(--teks2);margin-bottom:10px}
input{display:block;width:100%;margin-top:6px;min-height:48px;padding:0 14px;border-radius:16px;border:1px solid var(--garis);background:var(--sf2);color:var(--teks);font-size:16px}
input:focus{outline:2px solid var(--biru);outline-offset:1px}
.tombol{min-height:48px;padding:0 20px;border-radius:var(--rp);border:0;background:var(--biru);color:#0B1220;font-weight:700;font-size:15px;cursor:pointer;margin:4px 6px 4px 0}
.tombol.sekunder{background:var(--sf2);color:var(--teks);border:1px solid var(--garis)}
.tombol.utama{background:var(--kuning);color:#0B1220}
.tombol:disabled{opacity:.5;cursor:wait}
.tombol:focus-visible{outline:3px solid var(--kuning);outline-offset:2px}
.hasil{margin:10px 0 0;padding:10px 14px;border-radius:16px;background:var(--sf2);font-size:14px;word-break:break-word}
.hasil.lulus{border-left:4px solid var(--hijau)}
.hasil.gagal{border-left:4px solid var(--merah)}
.hasil.sebagian{border-left:4px solid var(--kuning)}
.hasil a{color:var(--biru)}
.pil{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--rp);background:var(--sf2);font-size:13px;font-weight:700}
.pil i{width:8px;height:8px;border-radius:50%;background:var(--teks2)}
.pil.on i{background:var(--hijau)} .pil.off i{background:var(--merah)}
.ringkasan{white-space:pre-wrap;font-size:12px;color:var(--teks2);background:var(--sf2);padding:12px;border-radius:16px;max-height:260px;overflow:auto}
.daftar{list-style:none;padding:0;margin:10px 0 0;font-size:13px}
.daftar li{padding:8px 0;border-bottom:1px solid var(--garis)}
#toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--sf2);border:1px solid var(--garis);padding:12px 18px;border-radius:var(--rp);font-size:14px;opacity:0;transition:opacity .3s;max-width:90vw;z-index:5}
#toast.tampil{opacity:1}