.app{justify-content:center;align-items:center;width:100%;min-height:100vh;display:flex}.card{text-align:center;background:#fff;border-radius:12px;width:400px;padding:30px;box-shadow:0 10px 25px #00000026}.card h1{color:#333;margin-bottom:25px}.card input{border:1px solid #ccc;border-radius:8px;outline:none;width:100%;padding:14px;font-size:16px}.card input:focus{border-color:#4caf50}.qr-box{justify-content:center;align-items:center;min-height:280px;margin-top:30px;display:flex}.preview{margin-top:20px}.preview h3{margin-bottom:10px}.preview p{word-break:break-word;color:#444}*{box-sizing:border-box;margin:0;padding:0;font-family:Arial,Helvetica,sans-serif}body{background:#f3f6fb}.scanner-container{justify-content:center;align-items:center;width:100%;min-height:100vh;padding:40px 20px;display:flex}.scanner-card{background:#fff;border-radius:15px;width:100%;max-width:700px;padding:30px;box-shadow:0 10px 30px #0000001f}.scanner-card h1{text-align:center;color:#222;margin-bottom:30px}.scanner-buttons{flex-wrap:wrap;justify-content:center;gap:15px;margin-bottom:25px;display:flex}.result-buttons{flex-wrap:wrap;justify-content:center;gap:15px;margin-top:20px;display:flex}.scanner-btn{color:#fff;cursor:pointer;background:#2563eb;border:none;border-radius:8px;outline:none;padding:12px 24px;font-size:15px;transition:all .3s}.scanner-btn:hover{background:#1d4ed8}.close-btn{background:#ef4444}.close-btn:hover{background:#dc2626}.clear-btn{background:#f59e0b}.clear-btn:hover{background:#d97706}.reader-box{background:#fafafa;border:2px solid #ddd;border-radius:12px;justify-content:center;align-items:center;width:100%;min-height:300px;margin-top:20px;display:flex;overflow:hidden}#reader{width:100%}#reader video{border-radius:10px;width:100%!important}#reader img{max-width:100%}.result-box{background:#f8fafc;border-radius:10px;margin-top:30px;padding:20px}.result-box h2{text-align:center;color:#222;margin-bottom:20px}.result-box textarea{resize:none;background:#fff;border:1px solid #ccc;border-radius:8px;outline:none;width:100%;min-height:120px;padding:15px;font-size:15px}.error-box{color:#b91c1c;text-align:center;background:#fee2e2;border-radius:8px;margin-top:20px;padding:12px;font-weight:600}@media (width<=768px){.scanner-card{padding:20px}.scanner-buttons,.result-buttons{flex-direction:column}.scanner-btn{width:100%}}@media (width<=480px){.scanner-container{padding:15px}.scanner-card h1{font-size:24px}.scanner-btn{padding:12px;font-size:14px}.result-box textarea{min-height:100px}}