.join-form{margin-top:30px;max-width:520px}.join-form>label{display:block;margin-bottom:8px}.join-form>div{display:flex;gap:9px}.join-form input{margin:0;text-transform:uppercase;letter-spacing:3px;font-weight:800}.join-form small{display:block;color:var(--muted);margin-top:7px}.room-code-box{text-align:center;background:var(--mint);border-radius:15px;padding:13px;margin:0 auto 20px}.room-code-box small{display:block;color:var(--muted)}.room-code-box strong{display:block;font-size:30px;letter-spacing:7px;margin-top:3px}@media(max-width:500px){.join-form>div{flex-direction:column}}
.join-form>div button{white-space:nowrap}.scanner-dialog{width:min(560px,calc(100% - 28px));max-width:none}.scanner-status{color:var(--muted);margin:0 0 16px}.scanner-camera{position:relative;overflow:hidden;border-radius:18px;background:#102e28;aspect-ratio:4/3}.scanner-camera video{width:100%;height:100%;display:block;object-fit:cover}.scanner-frame{position:absolute;inset:15%;border:3px solid #fff;border-radius:18px;box-shadow:0 0 0 999px rgba(5,22,19,.35)}
.qr-caption-option { display: flex; align-items: center; gap: 10px; text-align: left; }
.qr-caption-option input { width: auto; margin: 0; }
.qr-export-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.qr-export-actions > * { flex: 1; text-align: center; }
#qr-image { height: auto; }
@media print {
  body.printing-qr { background: white !important; }
  body.printing-qr > :not(#share-dialog) { display: none !important; }
  body.printing-qr #share-dialog { position: static !important; display: block !important; width: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: white !important; overflow: visible !important; }
  body.printing-qr #share-dialog::backdrop { display: none; }
  body.printing-qr #share-dialog > :not(#qr-image) { display: none !important; }
  body.printing-qr #qr-image { display: block !important; width: 100mm !important; max-width: 100% !important; height: auto !important; margin: 0 auto !important; }
}