:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f4f5f7;
  color: #17202a;
}
* { box-sizing: border-box; }
body { margin: 0; }
main { width: min(720px, 100%); margin: 0 auto; padding: 28px 18px 60px; }
header { padding: 18px 2px 22px; }
h1 { font-size: clamp(2rem, 7vw, 3.5rem); line-height: 1; margin: 8px 0 16px; letter-spacing: -.04em; }
h2 { margin-top: 0; }
.eyebrow { color: #166534; font-weight: 750; letter-spacing: .12em; font-size: .75rem; }
.card { background: white; border: 1px solid #dde2e7; border-radius: 20px; padding: 24px; box-shadow: 0 14px 40px rgba(21, 34, 50, .07); }
.hidden { display: none !important; }
label { display: flex; gap: 12px; line-height: 1.45; padding: 14px 0; }
input { width: 20px; height: 20px; flex: 0 0 auto; }
button { border: 0; border-radius: 999px; padding: 13px 22px; background: #14532d; color: white; font-weight: 700; font-size: 1rem; cursor: pointer; }
button:disabled { opacity: .45; cursor: not-allowed; }
.camera-shell { position: relative; overflow: hidden; border-radius: 18px; background: #101418; aspect-ratio: 4/3; }
video, canvas { width: 100%; height: 100%; object-fit: cover; }
#guide { position: absolute; inset: 13%; border: 3px solid rgba(255,255,255,.88); border-radius: 16px; box-shadow: 0 0 0 999px rgba(0,0,0,.24); pointer-events: none; }
.actions { display: flex; justify-content: center; gap: 12px; margin-top: 18px; }
#status { min-height: 1.5em; color: #334155; }
#otp-shell { margin: 1.25rem 0; }
#otp-shell label { display: block; margin-bottom: .5rem; padding: 0; font-weight: 700; }
#otp-code { width: 100%; height: auto; padding: .9rem 1rem; border: 1px solid #b9c2cc; border-radius: .65rem; font-size: 1.5rem; letter-spacing: .35rem; text-align: center; }