.wide-page { max-width: 960px; }
#img { display: block; width: 100%; max-height: 72vh; object-fit: contain; background: #000; border-radius: 10px; border: 1px solid var(--line); margin-top: 8px; }
select { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 6px; font: inherit; }
.q-main { font-weight: 600; margin: 14px 0 4px; }
.row-btns { display: flex; gap: 8px; }
.row-btns .btn { width: auto; flex: 1; text-align: center; }
.card { margin: 12px 0; padding: 14px 16px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.card h2 { margin: 4px 0 8px; }
.verdict { margin: 0; font-weight: 700; }
.verdict.ok { color: var(--ok); } .verdict.bad { color: var(--bad); }
#progress { margin-left: auto; }
.stage { position: relative; }
.overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.overlay rect { fill: none; stroke: var(--ok); stroke-width: 3; vector-effect: non-scaling-stroke; }
.overlay circle { fill: var(--bad); stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.overlay circle.hit { fill: var(--ok); }
.stage.pick #img { cursor: crosshair; }
.kicker { margin: 8px 0 0; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); }
#workup p { margin: 2px 0 6px; }
.find { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; margin: 6px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); cursor: pointer; }
.find input { margin-top: 5px; }
.find.hit { border-color: var(--ok); } .find.miss { border-color: var(--bad); border-style: dashed; } .find.over { border-color: var(--bad); }
.find .tag { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.teach { border-left: 3px solid var(--accent); padding-left: 10px; }
#imglink { display: block; }