@font-face { font-family:'Michroma'; src:url('/public/fonts/michroma-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Chakra'; src:url('/public/fonts/chakra-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Chakra'; src:url('/public/fonts/chakra-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'STM'; src:url('/public/fonts/sharetech-400.woff2') format('woff2'); font-weight:400; font-display:swap; }

:root {
  --void:#04060f; --card:#0a0e1c; --card-2:#0f1527;
  --ink:#e6edff; --dim:#96a6c8; --faint:#68789c;
  --hair:rgba(140,180,255,.22); --hair-soft:rgba(140,180,255,.10);
  --cy:#4fd8ff; --vi:#a77bff; --gr:#4dffb0; --am:#ffc24d; --rd:#ff5d7a;
  --display:'Michroma','Eurostile','Helvetica Neue',sans-serif;
  --body:'Chakra',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'STM',ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --void:#eef2fb; --card:#ffffff; --card-2:#f4f7fd;
    --ink:#0c1226; --dim:#3b4a6b; --faint:#566485;
    --hair:rgba(40,70,140,.28); --hair-soft:rgba(40,70,140,.12);
    --cy:#0a7ea4; --vi:#6a3fd1; --gr:#0b7d52; --am:#8a5a00; --rd:#b3203f;
  }
}
* { box-sizing:border-box; }
html, body { margin:0; background:var(--void); color:var(--ink); font-family:var(--body); }
body { min-height:100vh; display:grid; place-items:center; padding:24px 16px;
  background-image:radial-gradient(1200px 600px at 50% -10%, rgba(79,216,255,.10), transparent 60%); }
main { width:100%; max-width:440px; }
.mark { font-family:var(--display); font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); margin:0 0 22px; }
.mark b { color:var(--ink); font-weight:400; }
.mark b span { color:var(--cy); }
.panel { background:var(--card); border:1px solid var(--hair); border-radius:14px; padding:28px 26px; }
h1 { font-size:22px; font-weight:600; margin:0 0 6px; letter-spacing:.01em; }
p { color:var(--dim); line-height:1.55; margin:0 0 18px; font-size:15px; }
.btn { appearance:none; border:1px solid var(--cy); background:transparent; color:var(--cy); font:600 15px var(--body);
  padding:12px 18px; border-radius:10px; cursor:pointer; width:100%; letter-spacing:.02em; }
.btn:hover:not(:disabled) { background:var(--cy); color:var(--void); }
.btn:focus-visible, input:focus-visible, a:focus-visible { outline:2px solid var(--vi); outline-offset:2px; }
.btn:disabled { opacity:.5; cursor:default; }
.btn.quiet { border-color:var(--hair); color:var(--dim); margin-top:10px; }
.btn.quiet:hover:not(:disabled) { background:var(--card-2); color:var(--ink); }
input { width:100%; font:400 22px var(--mono); letter-spacing:.18em; text-align:center; padding:12px; margin:0 0 12px;
  background:var(--void); color:var(--ink); border:1px solid var(--hair); border-radius:10px; }
.err { color:var(--rd); font-size:14px; min-height:20px; margin:12px 0 0; }
.ok { color:var(--gr); }
.steps { display:flex; gap:6px; margin:0 0 18px; }
.steps i { flex:1; height:3px; border-radius:2px; background:var(--hair); }
.steps i.on { background:var(--cy); }
.qr { background:#fff; padding:8px; border-radius:10px; width:max-content; margin:0 auto 14px; line-height:0; }
.qr svg { width:168px; height:168px; }
code, .mono { font-family:var(--mono); }
.secret { font-family:var(--mono); font-size:14px; letter-spacing:.08em; word-break:break-all; color:var(--ink);
  background:var(--void); border:1px dashed var(--hair); border-radius:8px; padding:8px 10px; margin:0 0 14px; text-align:center; }
.codes { display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; margin:0 0 16px; padding:14px; background:var(--void);
  border:1px solid var(--hair); border-radius:10px; font-family:var(--mono); font-size:15px; letter-spacing:.06em; }
.hidden { display:none !important; }
.foot { margin-top:16px; font-size:12px; color:var(--faint); text-align:center; }
@media (prefers-reduced-motion: no-preference) { .btn { transition:background .15s, color .15s; } }

.codeform { margin-top:14px; }