/* Scanner modal */
.scan-overlay{ position: fixed; inset: 0; background: rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; z-index: 2000; }
.scan-modal{ width: min(800px, 92vw); max-height: 92vh; background: var(--surface); border: 1px solid rgba(255,255,255,0.14); box-shadow: var(--shadow); border-radius: 14px; overflow:hidden; display:flex; flex-direction:column; }
.scan-header{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.scan-header h3{ margin:0; }
.scan-close{ background: transparent; color: var(--text); border: 1px solid rgba(255,255,255,0.18); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.scan-body{ background: #000; height: min(52vh, 420px); display:flex; align-items:center; justify-content:center; position:relative; }
.scan-video{ width: 100%; height: 100%; object-fit: cover; }
.scan-footer{ padding: 10px; display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap; gap:8px; }
.scan-footer > *{ flex: 0 0 auto; }

/* Ensure html5-qrcode shaded region centers within container */
#qr-shaded-region{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
}

/* Scanner preview and toast */
.scan-preview{ display:flex; align-items:center; gap:8px; min-height:40px; }
.scan-preview .name{ font-weight:600; }
.scan-toast{ position: fixed; left:50%; top: 18px; transform: translateX(-50%); z-index: 5000; animation: scanToastIn .18s cubic-bezier(.18,.9,.18,1.0); }
.scan-toast-inner{ background: var(--surface); border:1px solid rgba(255,255,255,0.14); box-shadow: 0 14px 38px rgba(0,0,0,.35); border-radius: 14px; padding: 12px 14px; min-width: 260px; display:flex; flex-direction: column; gap: 8px; backdrop-filter: blur(8px) saturate(140%); }
.scan-toast-title{ font-weight: 800; }
.scan-toast-body{ display:flex; align-items:center; gap:10px; }
.scan-toast-body img{ width: 44px; height: 44px; object-fit: cover; border-radius: 8px; }
.scan-toast-actions{ display:flex; justify-content:flex-end; }
.scan-toast.out{ animation: scanToastOut .18s ease-in forwards; }
@keyframes scanToastIn{ from{ opacity:0; transform: translate(-50%, -8px) scale(.96);} to{ opacity:1; transform: translate(-50%, 0) scale(1);} }
@keyframes scanToastOut{ from{ opacity:1; transform: translate(-50%, 0) scale(1);} to{ opacity:0; transform: translate(-50%, -8px) scale(.96);} }

/* Confetti */
.scan-confetti{ position: fixed; left:0; right:0; top:0; height:0; pointer-events:none; z-index: 5001; }
.scan-confetti .piece{ position:absolute; top:0; width:8px; height:14px; border-radius:2px; opacity:0.95; animation: confettiFall 1.2s ease-out forwards, confettiSpin 1.2s linear; }
@keyframes confettiFall{ from{ transform: translateY(0); } to{ transform: translateY(60vh); } }
@keyframes confettiSpin{ from{ rotate: 0deg; } to{ rotate: 360deg; } }


.scan-roi{ position:absolute; width:70%; height:40%; outline:2px solid rgba(255,255,255,0.9); border-radius:8px; pointer-events:none; }

.scan-roi.flash{ outline-color:#33ff88; box-shadow:0 0 8px #33ff88; }