.scanner-action { margin-top: .5rem; }
.scanner-panel { border: 1px solid var(--dc-border, #cbd5e1); border-radius: .5rem; margin-top: .75rem; padding: .75rem; }
.scanner-preview { aspect-ratio: 3 / 4; background: #e2e8f0; border-radius: .5rem; max-height: 60vh; overflow: hidden; position: relative; width: 100%; }
.scanner-video { background: transparent; border-radius: .5rem; display: block; height: 100%; inset: 0; object-fit: cover; object-position: center; position: absolute; width: 100%; z-index: 0; }
.scanner-guide { background: transparent; border: 3px solid rgba(255, 255, 255, .9); border-radius: .5rem; box-shadow: 0 0 0 1px rgba(15, 23, 42, .5); inset: 28% 10%; pointer-events: none; position: absolute; z-index: 1; }
.scanner-status { margin: .75rem 0; min-height: 1.5rem; }
.scanner-diagnostics { background: #f8fafc; border: 1px solid var(--dc-border, #cbd5e1); border-radius: .375rem; font: .78rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; margin: .75rem 0; max-height: 18rem; overflow: auto; padding: .625rem; white-space: pre-wrap; word-break: break-word; }
.scanner-panel .dc-button { min-height: 44px; }
@media (orientation: landscape) { .scanner-preview { aspect-ratio: 4 / 3; } }