:root { --bg:#0f1115; --card:#181b22; --fg:#e8eaf0; --muted:#8b93a7; --ok:#2ecc71; --bad:#e74c3c; --warn:#f1c40f; --accent:#4f8cff; }
* { box-sizing: border-box; }
body { margin:0; font: 15px/1.45 system-ui, -apple-system, Segoe UI, sans-serif; background:var(--bg); color:var(--fg); }
header { padding:16px; display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
h1 { font-size:18px; margin:0; } h2 { font-size:16px; margin:0 0 8px; }
main { padding:0 16px 32px; max-width:720px; margin:0 auto; display:grid; gap:16px; }
.card { background:var(--card); border-radius:12px; padding:16px; }
.muted { color:var(--muted); font-size:13px; }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:8px 0; }
button, .btn { background:var(--accent); color:#fff; border:0; border-radius:8px; padding:10px 14px; font-size:14px; cursor:pointer; }
button.secondary { background:#2a2f3a; } button:disabled { opacity:.5; cursor:default; }
label { display:inline-flex; gap:6px; align-items:center; }
.status { margin-top:8px; font-size:13px; word-break:break-all; }
.stage { position:relative; width:100%; max-width:480px; aspect-ratio:3/4; background:#000; border-radius:12px; overflow:hidden; margin:8px 0; }
video { width:100%; height:100%; object-fit:cover; transform: scaleX(-1); }
.oval { position:absolute; left:50%; top:50%; width:62%; height:62%; transform:translate(-50%,-55%); border:3px solid rgba(255,255,255,.7); border-radius:50%; box-shadow:0 0 0 2000px rgba(0,0,0,.35); pointer-events:none; }
.oval.good { border-color:var(--ok); } .oval.capturing { border-color:var(--warn); }
.hint { position:absolute; left:0; right:0; bottom:12px; text-align:center; font-weight:600; text-shadow:0 1px 3px #000; }
.gate { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:6px; font-size:12px; }
.gate div { background:#20242e; border-radius:6px; padding:6px 8px; } .gate .ok { border-left:3px solid var(--ok);} .gate .bad { border-left:3px solid var(--bad);}
.thumbs { display:flex; gap:6px; margin-top:8px; } .thumbs img { width:90px; border-radius:6px; }
.verdict { display:flex; gap:10px; flex-wrap:wrap; margin:8px 0; }
.badge { padding:8px 12px; border-radius:8px; font-weight:700; background:#2a2f3a; }
.badge.ok { background:var(--ok); color:#042; } .badge.bad { background:var(--bad); color:#fff; } .badge.na { color:var(--muted); }
pre { background:#0b0d12; padding:10px; border-radius:8px; overflow:auto; font-size:12px; max-height:360px; }
code { background:#0b0d12; padding:1px 5px; border-radius:4px; }

dialog { border:0; border-radius:14px; background:var(--card); color:var(--fg); padding:14px; width:min(96vw, 520px); }
dialog::backdrop { background:rgba(0,0,0,.7); }
.dialog-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px; }
.dialog-head select { max-width:60%; background:#20242e; color:var(--fg); border:1px solid #333; border-radius:6px; padding:6px; }
.dialog-actions { justify-content:flex-end; margin-top:10px; }

.prompt { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding-top:8%; pointer-events:none; text-shadow:0 1px 4px #000; }
.arrow { font-size:72px; line-height:1; animation: nudge .9s ease-in-out infinite alternate; }
.arrow.right { transform:scaleX(-1); animation-name: nudge-r; }
@keyframes nudge { from { transform: translateX(-10px);} to { transform: translateX(10px);} }
@keyframes nudge-r { from { transform: scaleX(-1) translateX(-10px);} to { transform: scaleX(-1) translateX(10px);} }
#promptText { font-size:20px; font-weight:700; margin-top:6px; }
select { background:#20242e; color:var(--fg); border:1px solid #333; border-radius:6px; padding:6px; }

.ring { position:absolute; left:50%; top:50%; width:calc(62% + 14px); height:calc(62% + 14px); transform:translate(-50%,-55%); pointer-events:none; overflow:visible; }
.ring ellipse { fill:none; stroke:var(--warn); stroke-width:3; stroke-dasharray:100; stroke-dashoffset:100; transform:rotate(-90deg); transform-origin:50% 50%; transition:stroke-dashoffset .08s linear; }
.ring.done ellipse { stroke:var(--ok); }
.tick { font-size:64px; color:var(--ok); margin-top:4px; }