:root{--bg:#f5f7fa;--surface:#fff;--ink:#111827;--ink2:#374151;--muted:#6b7280;--line:#e3e7ee;--brand:#0519B0;--brand-weak:#eef0fd;--ok:#0f8a4b;--ok-bg:#e8f6ee;--warn:#9a5b00;--warn-bg:#fff4e0;--bad:#c0262d;--bad-bg:#fdecec;--r:10px;color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 Inter,system-ui,sans-serif;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
h1,h2,h3{font-family:'Plus Jakarta Sans',Inter,sans-serif;margin:0;letter-spacing:-.01em}
[hidden]{display:none!important}
button,input,select{font:inherit;color:inherit}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:32px;height:32px;border-radius:8px}
.brand b{font:700 16px 'Plus Jakarta Sans',sans-serif}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
label.f{display:block;font-weight:600;font-size:13px;margin-bottom:6px;color:var(--ink2)}
.in{width:100%;height:42px;padding:0 12px;border:1px solid #cfd5df;border-radius:8px;background:#fff;outline:none;transition:border-color .12s,box-shadow .12s}
.in:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(5,25,176,.12)}
.btn{text-decoration:none;color:var(--ink);height:40px;padding:0 16px;border-radius:8px;border:1px solid #cfd5df;background:#fff;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn:hover{background:#f3f5f9}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:#04158f}
.btn:disabled{opacity:.55;cursor:default}
.btn.sm{height:32px;padding:0 10px;font-size:13px}
.pill{display:inline-block;padding:1px 9px;border-radius:99px;font-size:12px;font-weight:600}
.pill.ok{background:var(--ok-bg);color:var(--ok)}.pill.no{background:var(--warn-bg);color:var(--warn)}
.pill.wajib{background:#e9f0ff;color:#2a5db0}.pill.nowajib{background:#f0f1f5;color:#7a8398}
.note{padding:9px 12px;border-radius:8px;font-size:13px}
.note.ok{background:var(--ok-bg);color:#0b6b3a}.note.warn{background:var(--warn-bg);color:var(--warn)}.note.err{background:var(--bad-bg);color:var(--bad)}.note.info{background:var(--brand-weak);color:#1a2a9a}
.pwwrap{position:relative}.pwwrap .in{padding-right:44px}
.eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:1.125rem;width:34px;height:34px}