:root{--latar:#0b1220;--kartu:#111a2e;--teks:#e8eef6;--redup:#9aa8bb;--aksen:#4fb3ff;--garis:#22314d;--merah:#ff6b6b}
@media (prefers-color-scheme: light){:root{--latar:#f3f6fb;--kartu:#fff;--teks:#0f1b2d;--redup:#56657a;--aksen:#0a74d6;--garis:#dbe3ee;--merah:#c62828}}
*{box-sizing:border-box}html,body{margin:0;background:var(--latar);color:var(--teks);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.m-kerangka{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.m-kartu{width:100%;max-width:400px;background:var(--kartu);border:1px solid var(--garis);border-radius:20px;padding:28px 24px;box-shadow:0 20px 50px #0004}
.m-logo{display:block;margin:0 auto 8px}h1{text-align:center;margin:0;font-size:26px;letter-spacing:.2px}
.m-sub{text-align:center;color:var(--redup);margin:4px 0 20px}
label{display:block;font-size:13px;color:var(--redup);margin-bottom:6px}
input{width:100%;padding:14px 14px;border-radius:12px;border:1px solid var(--garis);background:transparent;color:var(--teks);font:600 16px ui-monospace,Menlo,monospace;letter-spacing:1px}
input:focus{outline:2px solid var(--aksen);outline-offset:1px}
button{width:100%;margin-top:14px;padding:14px;border:0;border-radius:12px;background:var(--aksen);color:#fff;font:700 16px system-ui,sans-serif;cursor:pointer}
button:disabled{opacity:.6;cursor:wait}.m-pesan{color:var(--merah);margin:10px 0 0;font-size:14px}
.m-catatan{margin:22px 0 0;padding:16px 0 0 18px;border-top:1px solid var(--garis);color:var(--redup);font-size:13px}.m-catatan li{margin:6px 0}