:root { --red:#e2001a; --bg:#fff; --fg:#1b1b1b; --muted:#6b6b6b; --line:#e5e5e5; }
* { box-sizing: border-box; }
html, body { margin:0; background:var(--bg); color:var(--fg);
  font:17px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
main { max-width:480px; margin:0 auto; padding:16px; padding-bottom:env(safe-area-inset-bottom); }
h1 { color:var(--red); font-size:26px; margin:8px 0 16px; text-align:center; }
h2 { margin:0 0 8px; }
.hidden { display:none !important; }
label { display:block; font-weight:600; margin-bottom:6px; }
input { width:100%; padding:14px; font-size:18px; border:2px solid var(--line); border-radius:10px; }
input:focus { outline:none; border-color:var(--red); }
button { width:100%; padding:14px; margin-top:10px; font-size:17px; font-weight:600;
  border-radius:10px; border:2px solid var(--red); background:#fff; color:var(--red); }
button.primary { background:var(--red); color:#fff; }
button:active { opacity:.8; }
.err { color:var(--red); min-height:1.4em; }
.hint { text-align:center; color:var(--muted); }
.cam { position:relative; aspect-ratio:1/1; background:#000; border-radius:12px; overflow:hidden; margin:10px 0; }
.cam video { width:100%; height:100%; object-fit:cover; }
.frame { position:absolute; inset:18%; border:3px solid rgba(255,255,255,.85); border-radius:12px; }
.timer { font-size:64px; font-weight:800; text-align:center; font-variant-numeric:tabular-nums; margin:8px 0; }
ol { padding-left:0; list-style:none; margin:0; }
ol li { display:flex; gap:10px; padding:10px 6px; border-bottom:1px solid var(--line); }
ol li .r { width:2em; font-weight:700; color:var(--red); }
ol li .n { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
ol li .t { font-variant-numeric:tabular-nums; font-weight:600; }
ol li.me { background:#fff3f4; }
footer { text-align:center; margin-top:28px; font-size:13px; }
footer a { color:var(--muted); }
#dbg-box button { width:auto; padding:8px 12px; font-size:14px; margin:8px 4px 0; }