:root { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
body { margin: 0; background: #0f0f10; color: #eee; }
header { padding: 14px 14px 8px; border-bottom: 1px solid #222; }
h1 { margin: 0 0 10px; font-size: 18px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
button, select, input { padding: 10px 12px; border-radius: 10px; border: 1px solid #333; background: #161617; color: #eee; }
button:disabled, select:disabled, input:disabled { opacity: .5; }
main { padding: 14px; display: grid; gap: 14px; }
.viewer { position: relative; width: 100%; max-width: 720px; margin: 0 auto; }
video { width: 100%; border-radius: 14px; background: #000; }
canvas#overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.focus-ring { position: absolute; width: 60px; height: 60px; border: 2px solid #0f0; border-radius: 50%; pointer-events: none; transform: translate(-50%,-50%) scale(1.4); opacity: 0; transition: opacity .15s, transform .25s; }
.focus-ring.active { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.focus-ring.fade { opacity: 0; transform: translate(-50%,-50%) scale(.9); }
.panel { max-width: 720px; margin: 0 auto; width: 100%; }
.status { display: grid; gap: 6px; margin-bottom: 10px; color: #bbb; }
textarea { width: 100%; height: 180px; border-radius: 14px; border: 1px solid #333; padding: 10px; background: #111; color: #ddd; }
.hint { color: #9aa; font-size: 13px; line-height: 1.4; }
.guess-row { background: #1a1a00; border: 1px solid #665500; border-radius: 10px; padding: 8px 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.guess-text { color: #ffd700; font-weight: bold; word-break: break-all; }
.guess-conf { color: #aa9944; font-size: 12px; }
.btn-accept { padding: 6px 14px; background: #2a5400; border: 1px solid #4a8800; font-size: 13px; }
.btn-accept:disabled { background: #161617; border-color: #333; }
.capture-preview-wrap { max-width: 720px; margin: 0 auto; width: 100%; }
.capture-preview-wrap canvas { width: 100%; border-radius: 14px; background: #000; display: block; }
.capture-label { color: #88aaff; font-size: 13px; padding: 4px 0; text-align: center; }
.version { color: #555; font-size: 11px; text-align: right; margin: 8px 0 0; }