/* QR & Barcode Scanner — stage (video / image + overlay), camera row, result cards. */
.qs-hint { margin: -0.25rem 0 0; }
.qs-hint kbd { font-family: var(--font-mono); font-size: 0.72rem; padding: 0.05rem 0.3rem; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); }
.qs-stage { position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: 420px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; display: grid; place-items: center; min-width: 0; }
.qs-video, .qs-image { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.qs-video { width: 100%; height: 100%; object-fit: contain; }
.qs-overlay { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.qs-image + .qs-overlay { object-fit: contain; }
.qs-video[hidden], .qs-image[hidden], .qs-overlay[hidden], .qs-stage-empty[hidden], #cam-select[hidden], #btn-torch[hidden], #btn-rescan[hidden] { display: none; }
.qs-stage-empty { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; color: var(--text-muted); font-size: 0.8rem; }
.qs-camrow { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; min-width: 0; }
.qs-camrow .select-clean { flex: 1; min-width: 140px; max-width: 260px; }
#btn-torch[aria-pressed="true"] { color: var(--brand); border-color: var(--brand); }
#qs-status:empty { display: none; }
.qs-results { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.qs-card { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: 0.7rem 0.85rem; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.qs-card.is-latest { border-color: var(--brand); }
.qs-card header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.76rem; }
.qs-card dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.25rem 0.75rem; font-size: 0.84rem; }
.qs-card dt { color: var(--text-secondary); font-weight: 600; }
.qs-card dd { margin: 0; font-family: var(--font-mono); overflow-wrap: anywhere; word-break: break-word; color: var(--text-primary); }
.qs-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
@container (max-width: 420px) { .qs-card dl { grid-template-columns: 1fr; } .qs-card dt { margin-top: 0.2rem; } }