:root { color-scheme: light; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: #f4f5f7; color: #1d1f23; }
main { max-width: 480px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.25rem; margin: 0 0 4px; }
.env { font-size: 0.8rem; color: #555; margin: 0 0 12px; }
.card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; }
label { display: block; font-weight: 600; margin-bottom: 6px; }
input[type="password"], input[type="text"] { width: 100%; font: inherit; font-family: ui-monospace, monospace;
  padding: 12px; border: 1px solid #b8bcc4; border-radius: 8px; }
button { width: 100%; font: inherit; font-weight: 600; padding: 14px; border: 0; border-radius: 8px;
  background: #06c755; color: #fff; margin-top: 12px; min-height: 48px; }
button.secondary { background: #59606b; }
button:disabled { opacity: 0.5; }
button:focus-visible, input:focus-visible { outline: 3px solid #1a73e8; outline-offset: 2px; }
.status { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 0.9rem; }
.status dt { color: #555; }
.status dd { margin: 0; }
.stage { position: relative; aspect-ratio: 3 / 4; background: #111; border-radius: 12px; overflow: hidden;
  margin-bottom: 12px; }
.stage video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); /* display-only mirror */ }
.guide { position: absolute; left: 50%; top: 45%; width: 58%; aspect-ratio: 3 / 4; transform: translate(-50%, -50%);
  border: 3px dashed rgba(255, 255, 255, 0.8); border-radius: 50%; pointer-events: none; }
.progress { text-align: center; font-weight: 600; min-height: 1.4em; }
.result { border-left: 6px solid #d93025; }
.result.pass { border-left-color: #06c755; }
.result h2 { margin: 0 0 6px; font-size: 1.2rem; }
pre.diagnostics { white-space: pre-wrap; font-size: 0.75rem; background: #eef0f3; padding: 8px; border-radius: 6px; }
[hidden] { display: none !important; }
body:not([data-state="CAPTURING"]) .stage { display: none; }