.qr-scanner { margin-bottom: 1.5rem; }
.qr-scanner-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.qr-scanner-heading h2 { margin: 0; }
.qr-scanner-body { margin-top: 1.25rem; }
.qr-scanner video { display: block; width: 100%; max-width: 36rem; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface, #e8ece8); border-radius: .65rem; margin: 1rem 0; }
.qr-scanner canvas { display: none; }
.qr-scanner .actions { flex-wrap: wrap; gap: .65rem; }
.qr-scanner-fallback { display: grid; gap: 1.25rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border, #d8dedb); }
.qr-scanner-status { margin: 1rem 0; padding: .85rem 1rem; border-left: 3px solid currentColor; background: var(--surface, #eef1ed); overflow-wrap: anywhere; }
.qr-scanner-status[data-tone="error"] { color: #9a3434; }
.qr-scanner-status[data-tone="success"] { color: #246143; }
.qr-scanner [hidden] { display: none !important; }
.qr-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1.25rem; }
.qr-code-image { display: block; max-width: 100%; height: auto; }
.qr-card .qr-code-image { width: 288px; margin: 1.5rem auto; padding: .5rem; background: #fafbf8; border: 1px solid var(--border, #d8dedb); border-radius: .5rem; }
.qr-card h2 { overflow-wrap: anywhere; }
.qr-feedback-area { position: relative; }
.qr-display-area { width: fit-content; max-width: 100%; margin: 1.5rem auto; position: relative; }
.qr-card .qr-display-area .qr-code-image { margin: 0; }
.qr-celebration { position: absolute; inset: 0; z-index: 2; display: grid; align-content: center; justify-items: center; gap: .45rem; padding: 1rem; border-radius: .65rem; background: rgba(235, 247, 235, .96); color: #246143; text-align: center; pointer-events: none; overflow: hidden; }
.qr-celebration[hidden] { display: none !important; }
.qr-celebration strong { font-size: clamp(1.4rem, 4vw, 2rem); }
.qr-celebration span { position: relative; z-index: 1; overflow-wrap: anywhere; }
.qr-celebration-name { font-weight: 700; }
.qr-confirm-photo { width: clamp(80px, 24vw, 160px); height: clamp(80px, 24vw, 160px); object-fit: cover; border-radius: 50%; border: 3px solid #246143; background: #fff; }
.qr-scanner.has-confirm-photo .qr-feedback-area { min-height: 290px; }
.qr-celebration.is-active strong { animation: qr-confirm-pulse 1s ease-in-out 2; }
.qr-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.qr-confetti i { position: absolute; top: -8%; width: .45rem; height: .85rem; background: #4b8d67; animation: qr-confetti-fall 1.8s ease-out both; }
.qr-confetti i:nth-child(1) { left: 8%; }
.qr-confetti i:nth-child(2) { left: 22%; background: #b18c45; animation-delay: .12s; }
.qr-confetti i:nth-child(3) { left: 36%; animation-delay: .25s; }
.qr-confetti i:nth-child(4) { left: 50%; background: #b18c45; animation-delay: .05s; }
.qr-confetti i:nth-child(5) { left: 64%; animation-delay: .3s; }
.qr-confetti i:nth-child(6) { left: 78%; background: #b18c45; animation-delay: .18s; }
.qr-confetti i:nth-child(7) { left: 92%; animation-delay: .4s; }
.qr-update-status { max-width: 28rem; }
@keyframes qr-confirm-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: .8; } }
@keyframes qr-confetti-fall { from { transform: translateY(0) rotate(0deg); opacity: 0; } 15% { opacity: .85; } to { transform: translateY(26rem) rotate(220deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .qr-celebration.is-active strong, .qr-confetti i { animation: none; }
  .qr-confetti { display: none; }
}
@media (max-width: 767px) {
  .qr-scanner-heading .button { width: 100%; }
  .qr-scanner .actions .button { flex: 1 1 auto; }
}