:root{
  --bg:#f4f6fb; --kad:#ffffff; --teks:#0f172a; --redup:#5b6478; --garis:#e2e6ef;
  --utama:#312e81; --utama-teks:#ffffff; --aksen:#0f766e;
  --ok:#047857; --ok-bg:#ecfdf5; --amaran:#b45309; --amaran-bg:#fffbeb; --bahaya:#b91c1c; --bahaya-bg:#fef2f2;
  --jejari:14px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0b1020; --kad:#141a2e; --teks:#e6e9f2; --redup:#9aa3b8; --garis:#26304a;
    --utama:#818cf8; --utama-teks:#0b1020; --aksen:#2dd4bf;
    --ok:#34d399; --ok-bg:#062a1f; --amaran:#fbbf24; --amaran-bg:#2a1f06; --bahaya:#f87171; --bahaya-bg:#2a0b0b;
  }
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--teks);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--utama)}
.bekas{max-width:720px;margin:0 auto;padding:24px 16px 48px}
.kepala{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.jenama{font-weight:700;font-size:1.05rem;text-decoration:none;color:var(--teks)}
.jenama span{color:var(--aksen)}
h1{font-size:1.6rem;line-height:1.2;margin:.2rem 0 .6rem}
h2{font-size:1.1rem;margin:0 0 .5rem}
p{margin:.4rem 0}
.redup{color:var(--redup)}
.kecil{font-size:.85rem}
.kad{background:var(--kad);border:1px solid var(--garis);border-radius:var(--jejari);padding:20px;margin:14px 0}
.butang{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;
  border-radius:10px;border:0;background:var(--utama);color:var(--utama-teks);font:inherit;font-weight:600;
  text-decoration:none;cursor:pointer}
.butang.sekunder{background:transparent;color:var(--utama);border:1px solid var(--utama)}
.butang:disabled{opacity:.55;cursor:not-allowed}
.butang.penuh{width:100%}
label{display:block;font-weight:600;font-size:.9rem;margin:14px 0 6px}
input[type=text]{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--garis);border-radius:10px;
  background:var(--bg);color:var(--teks);font:inherit}
input[type=text]:focus{outline:2px solid var(--utama);outline-offset:1px}
.awalan{display:flex;align-items:stretch;border:1px solid var(--garis);border-radius:10px;overflow:hidden;background:var(--bg)}
.awalan span{padding:10px 0 10px 12px;color:var(--redup);white-space:nowrap;align-self:center}
.awalan input{border:0;border-radius:0;padding-left:2px;background:transparent}
.mesej{border-radius:10px;padding:12px 14px;margin:12px 0;font-size:.95rem}
.mesej.ok{background:var(--ok-bg);color:var(--ok)}
.mesej.amaran{background:var(--amaran-bg);color:var(--amaran)}
.mesej.bahaya{background:var(--bahaya-bg);color:var(--bahaya)}
.langkah{display:flex;gap:12px;align-items:flex-start}
.langkah b.no{flex:0 0 28px;height:28px;border-radius:50%;background:var(--utama);color:var(--utama-teks);
  display:flex;align-items:center;justify-content:center;font-size:.85rem}
.pengguna{display:flex;align-items:center;gap:10px;font-size:.9rem}
.pengguna img{width:28px;height:28px;border-radius:50%}
.tersembunyi{display:none !important}
code{background:var(--bg);border:1px solid var(--garis);padding:1px 6px;border-radius:6px;font-size:.9em;word-break:break-all}
footer{margin-top:32px;font-size:.8rem;color:var(--redup);text-align:center}