.opal-label-scanner-card{width:min(920px,calc(100vw - 28px));max-height:calc(100dvh - 28px);display:flex;flex-direction:column;overflow:hidden}.opal-label-scanner-body{overflow:auto;display:grid;gap:14px}.opal-label-scanner-stage{position:relative;min-height:320px;border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;background:#07111f;display:grid;place-items:center}.opal-label-scanner-stage video{width:100%;height:100%;min-height:320px;object-fit:cover}.opal-label-scanner-empty{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:8px;color:#dbeafe;text-align:center;background:linear-gradient(135deg,#07111f,#12233e)}.opal-label-scanner-empty .o-icon{width:42px;height:42px}.opal-label-scanner-guide{position:absolute;inset:14%;border:2px solid rgba(255,255,255,.86);border-radius:16px;box-shadow:0 0 0 999px rgba(0,0,0,.25);pointer-events:none}.opal-label-scanner-guide span{position:absolute;left:50%;bottom:-38px;transform:translateX(-50%);white-space:nowrap;color:#fff;background:rgba(0,0,0,.64);padding:6px 10px;border-radius:99px;font-size:12px}.opal-label-scanner-controls{display:flex;gap:8px;flex-wrap:wrap}.opal-label-file-button{position:relative;overflow:hidden}.opal-label-file-button input{position:absolute;inset:0;opacity:0;cursor:pointer}.opal-label-scanner-status{padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--panel2);font-weight:700;color:var(--muted)}.opal-label-scanner-status[data-tone=success]{color:#067647;border-color:#86d3b3;background:#ecfdf3}.opal-label-scanner-status[data-tone=warning]{color:#b54708;border-color:#f5c26b;background:#fffaeb}.opal-label-scanner-status[data-tone=error]{color:#b42318;border-color:#f0a3a0;background:#fef3f2}.opal-label-manual-text{border:1px solid var(--line);border-radius:var(--radius-card);background:var(--panel)}.opal-label-manual-text summary{cursor:pointer;padding:12px 14px;font-weight:800}.opal-label-manual-text textarea{width:calc(100% - 28px);margin:0 14px 10px}.opal-label-manual-text .btn{margin:0 14px 14px}.opal-label-results{border:1px solid var(--line);border-radius:var(--radius-card);padding:14px;background:var(--panel)}@media(max-width:640px){.opal-label-scanner-card{width:100vw;height:100dvh;max-height:100dvh;border-radius:0!important}.opal-label-scanner-stage,.opal-label-scanner-stage video{min-height:260px}.opal-label-scanner-controls .btn{flex:1}.opal-label-scanner-results .grid-2{grid-template-columns:1fr}}

.opal-label-camera-help{display:grid;gap:5px;padding:11px 13px;border:1px solid #f5c26b;border-radius:var(--radius-control);background:#fffaeb;color:#7a2e0e}.opal-label-camera-help[hidden]{display:none!important}.opal-label-camera-help strong,.opal-label-camera-help span{display:block}.opal-label-camera-help span{font-size:12px;line-height:1.45}
.opal-label-matched{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:40px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--panel2)}.opal-label-matched strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.opal-label-matched button{border:0;background:transparent;color:var(--primary);font-weight:800;cursor:pointer}.opal-label-matched[hidden]{display:none!important}

#opalLabelScannerModal [data-label-sector-wrap][hidden]{display:none!important}
#opalLabelScannerModal [data-label-sector-wrap].is-hidden{display:none!important}

/* 2026-07-26 live camera preview visibility fix */
.opal-label-scanner-empty[hidden]{display:none!important}
.opal-label-scanner-stage video{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;min-height:320px;object-fit:cover;opacity:0;visibility:hidden;background:#07111f}
.opal-label-scanner-stage video.is-live,.opal-label-scanner-stage.is-live video{opacity:1;visibility:visible}
.opal-label-scanner-empty{z-index:4}
.opal-label-scanner-stage.is-live .opal-label-scanner-empty{display:none!important}
.opal-label-scanner-guide{z-index:3;display:none;box-shadow:0 0 0 999px rgba(0,0,0,.12)}
.opal-label-scanner-stage.is-live .opal-label-scanner-guide{display:block}
.opal-label-scanner-stage.is-live .opal-label-scanner-guide span{display:block}
@media(max-width:640px){.opal-label-scanner-stage video{min-height:260px}}

/* Scanner mobile controls: prevent clipping and unreadable three-button rows. */
@media (max-width: 760px) {
  .opal-label-scanner-body { gap: 12px; }
  .opal-label-scanner-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    width: 100%;
  }
  .opal-label-scanner-controls > * {
    width: 100%;
    min-width: 0;
    min-height: 50px;
    margin: 0;
    padding: 10px 9px;
    white-space: normal !important;
    line-height: 1.2;
    text-align: center;
  }
  .opal-label-scanner-controls [data-label-camera-start],
  .opal-label-scanner-controls [data-label-capture] {
    grid-column: 1 / -1;
  }
  .opal-label-file-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .opal-label-scanner-status,
  .opal-label-manual-text,
  .opal-label-results { min-width: 0; max-width: 100%; }
  .opal-label-manual-text summary { overflow-wrap: anywhere; }
  #opalLabelScannerModal .modal-foot [data-label-apply] { order: -1; }
}

@media (max-width: 390px) {
  .opal-label-scanner-controls { grid-template-columns: 1fr; }
  .opal-label-scanner-controls > *,
  .opal-label-scanner-controls [data-label-camera-start],
  .opal-label-scanner-controls [data-label-capture] { grid-column: 1; }
  .opal-label-scanner-stage,
  .opal-label-scanner-stage video { min-height: 240px; }
}