*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;
font-family:"Segoe UI",Tahoma,"Noto Naskh Arabic",Arial,sans-serif;background:#0f1b2d;color:#1d2433;padding:16px}
.card{background:#fff;border-radius:14px;max-width:440px;width:100%;padding:28px;box-shadow:0 10px 40px #0005}
.brand{font-size:28px;font-weight:700;color:#0f1b2d;margin-bottom:18px}.brand span{font-size:13px;color:#667;font-weight:400;margin-inline-start:6px}
h1{font-size:20px;margin:0 0 14px}h1 small,label small,li small{display:block;font-size:12px;color:#778;font-weight:400}
label{display:block;margin:12px 0}input{display:block;width:100%;margin-top:6px;padding:10px 12px;font-size:16px;border:1px solid #c6ccd6;border-radius:8px}
button,.button{display:inline-block;margin-top:14px;width:100%;padding:12px;font-size:16px;border:0;border-radius:8px;background:#1f6feb;color:#fff;cursor:pointer;text-align:center;text-decoration:none}
#msg{color:#b42318;min-height:1.2em}.demo{font-size:12px;color:#8a5a00;background:#fff6e0;border-radius:8px;padding:8px;margin-top:18px}
ol{padding-inline-start:20px}li{margin:12px 0}#qr svg{display:block;margin:10px auto;max-width:220px;height:auto}
pre{background:#f3f5f8;padding:12px;border-radius:8px;font-size:16px;line-height:1.7}code{word-break:break-all}