.qr-reader{width:430px;height:80vh;margin:0 auto;position:relative;border:1px solid #fff;border-radius:10px;overflow:hidden}.qr-reader video{width:100%;height:100%;object-fit:cover}.qr-reader .qr-box{position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items:center;overflow:hidden}.qr-reader .qr-frame{position:relative;z-index:1;animation:pulse 2s infinite}.qr-reader .scan-grid{position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 0),linear-gradient(180deg,rgba(255,255,255,.1) 1px,transparent 0);background-size:20px 20px;animation:moveGrid 2s linear infinite;z-index:0}@keyframes scan{0%{top:0}50%{top:100%}to{top:0}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@keyframes moveGrid{0%{background-position:0 0}to{background-position:20px 20px}}.result-box{color:white;box-shadow:0 0 10px rgba(0,0,0,.5);font-family:Roboto Mono,monospace}.error-box,.result-box{position:absolute;top:1rem;left:1rem;z-index:99999;background-color:rgba(0,0,0,.8);padding:1rem;border-radius:8px;transition:all .3s ease}.error-box{color:red}@media (max-width:426px){.qr-reader{width:100%}}.camera-select{position:absolute;top:10px;right:10px;z-index:1;padding:8px;border-radius:4px;background:rgba(255,255,255,.9);border:1px solid #ccc}