:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:#0a1230; color:#0a1230; display:flex; min-height:100vh; align-items:center; justify-content:center; padding:24px; }
.card { width:100%; max-width:460px; background:#fff; border-radius:20px; padding:28px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.4); }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; margin-bottom:20px; }
.badge { width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg,#1544FD,#20BDFD); }
.hidden { display:none; }
.state { text-align:center; padding:8px 0; }
.state h1 { font-size:1.2rem; margin:.4rem 0; }
.state p { color:#6b7280; }
canvas { display:block; margin:0 auto 16px; border-radius:12px; }
.code { text-align:center; font:20px/1.4 ui-monospace,Menlo,monospace; letter-spacing:.08em; margin-bottom:8px; }
.sas { text-align:center; font-weight:600; margin-bottom:8px; }
.countdown { text-align:center; color:#6b7280; font-size:.85rem; margin-bottom:16px; }
.row { border:1px solid #eef0f4; border-radius:12px; padding:12px 14px; margin-bottom:10px; }
.row label { display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:#8a93a3; margin-bottom:4px; }
.val { display:flex; align-items:center; gap:8px; justify-content:space-between; }
.val code { font:14px/1.4 ui-monospace,Menlo,monospace; word-break:break-all; }
button { border:none; background:#eef3ff; color:#1544FD; border-radius:8px; padding:6px 10px; font-weight:600; cursor:pointer; font-size:.8rem; }
.close-btn { display:block; width:100%; margin-top:16px; padding:10px 18px; font-size:.95rem; background:#fdeeee; color:#c0362c; }
.fields { text-align:left; }
.warning { font-size:.78rem; color:#9a6b00; background:#fff7e0; border-radius:8px; padding:8px 10px; margin-top:8px; text-align:center; }
@media (prefers-color-scheme: dark) {
  .card { background:#141b32; color:#eef0f4; } .row { border-color:#26304f; } .brand { color:#fff; }
  .warning { background:#332a06; color:#e0c46b; }
}