.scanner-dialog { width: min(540px, calc(100vw - 24px)); border: 1px solid #e6dcc8; border-radius: 18px; padding: 22px; color: #242b26; background: #fffdf7; }
.scanner-dialog::backdrop { background: rgba(24, 31, 27, .65); }
.scanner-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.scanner-header h2 { margin: 0; }
.scanner-dialog video { width: 100%; max-height: 48vh; border-radius: 10px; background: #222; object-fit: cover; }
.scanner-status { font-weight: 600; }
.scanner-manual { display: flex; gap: 8px; align-items: end; }
.scanner-manual label { flex: 1; }
.scanner-manual input { display: block; width: 100%; box-sizing: border-box; margin-top: 8px; padding: 10px; }
.scanner-dialog button { cursor: pointer; padding: 10px 14px; border: 1px solid #ddcfb4; border-radius: 8px; color: inherit; background: #f7ce62; }
@media print { .scanner-dialog { display: none !important; } }
/* Keep the close control visible on small screens and short desktop windows. */
.scanner-dialog { box-sizing: border-box; max-height: calc(100dvh - 24px); overflow: auto; }
.scanner-header { position: sticky; top: -22px; z-index: 1; padding-block: 8px; background: #fffdf7; }
.scanner-header h2 { overflow-wrap: anywhere; font-size: 1.2rem; }
.scanner-dialog .scanner-close { flex: 0 0 44px; min-height: 44px; padding: 8px; }
.scanner-manual label { min-width: 0; }
.scanner-manual button { flex-shrink: 0; min-height: 44px; }
@media (max-width: 440px) { .scanner-dialog { padding: 16px; } .scanner-header { top: -16px; } .scanner-manual { flex-wrap: wrap; } .scanner-manual label { flex-basis: 100%; } }