@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Outfit',sans-serif;background:#fff;min-height:100vh;padding:24px;color:#181C32}.container{max-width:1200px;margin:0 auto;background:white;border-radius:12px;border:1px solid #E1E3EA;overflow:hidden}header{background:#fff;color:#181C32;padding:32px;text-align:center;border-bottom:1px solid #E1E3EA}header h1{font-size:2.25rem;margin-bottom:8px;font-weight:600;color:#181C32}header p{font-size:1rem;color:#7E8299;font-weight:400}.input-section{padding:32px;background:#fff;border-bottom:1px solid #E1E3EA}.form-group{margin-bottom:24px}.form-group label{display:block;margin-bottom:8px;font-weight:500;color:#181C32;font-size:.875rem}#qrCodes{width:100%;padding:12px 16px;border:1px solid #E1E3EA;border-radius:8px;font-size:13px;font-family:'Outfit',sans-serif;resize:vertical;transition:border-color .15s ease;background:#fff;color:#181C32}#qrCodes:focus{outline:none;border-color:#009EF7}.button-group{display:flex;gap:12px;flex-wrap:wrap}.btn{padding:10px 20px;border:1px solid transparent;border-radius:8px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .15s ease;font-family:'Outfit',sans-serif;display:inline-flex;align-items:center;gap:6px}.btn i{font-size:.875rem}.btn-primary{background:#009EF7;color:white;border-color:#009EF7}.btn-primary:hover:not(:disabled){background:#0095E8;border-color:#0095E8}.btn-secondary{background:#50CD89;color:white;border-color:#50CD89}.btn-secondary:hover:not(:disabled){background:#47BE7D;border-color:#47BE7D}.btn:disabled{opacity:.5;cursor:not-allowed}.preview-section{padding:32px;background:#fff}.preview-section h3{margin-bottom:24px;color:#181C32;font-size:1.125rem;font-weight:600}#qrContainer{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:100%}.qr-item{background:#fff;border:1px solid #E1E3EA;border-radius:8px;padding:16px;text-align:center;transition:border-color .15s ease;position:relative}.qr-item:hover{border-color:#009EF7}.qr-item canvas{max-width:100%;height:auto;margin-bottom:12px}.qr-text{font-weight:500;color:#181C32;font-size:.8125rem;word-break:break-all}.page-break{width:100%;height:1px;background:#E1E3EA;margin:24px 0}.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);animation:fadeIn .3s ease}.modal.show{display:flex;align-items:center;justify-content:center}.modal-content{background:#fff;border-radius:12px;border:1px solid #E1E3EA;width:90%;max-width:500px;max-height:90vh;overflow-y:auto;animation:bounceIn .5s ease}.modal-header{padding:16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #E1E3EA;margin-bottom:24px}.modal-header h4{margin:0;font-size:1.125rem;font-weight:600;color:#181C32;display:flex;align-items:center;gap:8px}.modal-header h4 i{font-size:1.25rem;color:#009EF7}.close{font-size:20px;color:#7E8299;cursor:pointer;line-height:1;padding:8px;border-radius:6px;transition:all .15s ease;display:flex;align-items:center;justify-content:center}.close:hover{color:#181C32;background:#F1F1F2}.close i{font-size:18px}.modal-body{padding:0 24px 24px 24px}.qr-preview{text-align:center;margin-bottom:24px;padding:16px;border:1px solid #E1E3EA;border-radius:8px;background:#F9F9F9}.qr-preview canvas{max-width:150px;height:auto;margin-bottom:8px}.qr-preview p{margin:0;font-size:.875rem;color:#181C32;font-weight:500}.download-options{display:flex;flex-direction:column;gap:20px}.option-group label{display:block;margin-bottom:8px;font-weight:500;color:#181C32;font-size:.875rem}.format-buttons,.resolution-buttons{display:flex;gap:8px;flex-wrap:wrap}.format-btn,.resolution-btn{padding:8px 16px;border:1px solid #E1E3EA;border-radius:6px;background:#fff;color:#181C32;font-size:.8125rem;font-weight:500;cursor:pointer;transition:all .15s ease;font-family:'Outfit',sans-serif}.format-btn:hover,.resolution-btn:hover{border-color:#009EF7;color:#009EF7}.format-btn.active,.resolution-btn.active{background:#009EF7;border-color:#009EF7;color:white}.modal-footer{padding:0 24px 24px 24px;display:flex;gap:12px;justify-content:flex-end}.btn-outline{background:transparent;color:#7E8299;border:1px solid #E1E3EA}.btn-outline:hover{background:#F1F1F2;border-color:#D1D3E0;color:#181C32}.qr-download-btn{position:absolute;top:8px;right:8px;width:32px;height:32px;border:1px solid #E1E3EA;border-radius:8px;background:rgba(255,255,255,.95);color:#009EF7;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;opacity:0;transform:scale(.8);backdrop-filter:blur(4px);box-shadow:0 2px 8px rgba(0,0,0,.1)}.qr-item:hover .qr-download-btn{opacity:1;transform:scale(1)}.qr-download-btn:hover{background:#009EF7;color:white;border-color:#009EF7;transform:scale(1.05);box-shadow:0 4px 12px rgba(0,158,247,.3)}.qr-download-btn i{font-size:16px}.pdf-info{background:#F9F9F9;border:1px solid #E1E3EA;border-radius:8px;padding:16px;margin-bottom:24px}.info-item{display:flex;justify-content:space-between;align-items:center}.info-label{font-weight:500;color:#181C32;font-size:.875rem}#totalQrCount{font-weight:600;color:#009EF7;font-size:1rem}.paper-buttons,.layout-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}.paper-btn,.layout-btn{padding:10px 12px;border:1px solid #E1E3EA;border-radius:6px;background:#fff;color:#181C32;font-size:.8125rem;font-weight:500;cursor:pointer;transition:all .15s ease;font-family:'Outfit',sans-serif;text-align:center}.paper-btn:hover,.layout-btn:hover{border-color:#009EF7;color:#009EF7}.paper-btn.active,.layout-btn.active{background:#009EF7;border-color:#009EF7;color:white}.additional-options{display:flex;flex-direction:column;gap:12px}.checkbox-label{display:flex;align-items:center;cursor:pointer;font-size:.875rem;color:#181C32;font-weight:400;padding:8px 0;transition:all .15s ease}.checkbox-label:hover{color:#009EF7}.checkbox-label input[type="checkbox"]{display:none}.checkmark{width:20px;height:20px;border:2px solid #E1E3EA;border-radius:6px;margin-right:12px;position:relative;transition:all .2s ease;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}.checkbox-label:hover .checkmark{border-color:#009EF7;transform:scale(1.05)}.checkbox-label input[type="checkbox"]:checked+.checkmark{background:#009EF7;border-color:#009EF7;transform:scale(1)}.checkbox-label input[type="checkbox"]:checked+.checkmark::after{content:'';width:6px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg);margin-top:-2px}.layout-preview{background:#F9F9F9;border:1px solid #E1E3EA;border-radius:8px;padding:16px;margin-top:20px;text-align:center}.preview-info{font-size:.875rem;color:#7E8299;font-weight:500}#previewText{color:#181C32;font-weight:600}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3) translateY(-50px)}50%{opacity:1;transform:scale(1.05) translateY(0)}70%{transform:scale(.95)}100%{opacity:1;transform:scale(1)}}@media (max-width:768px){body{padding:16px}#qrContainer{grid-template-columns:repeat(2,1fr);gap:12px}.container{border-radius:8px}header{padding:24px}header h1{font-size:1.875rem}.input-section,.preview-section{padding:24px}.paper-buttons,.layout-buttons{grid-template-columns:1fr}.additional-options{gap:16px}}.copyright-footer{background:#fff;border-top:1px solid #E1E3EA;padding:20px 0;margin-top:40px}.copyright-content{max-width:1200px;margin:0 auto;text-align:center;padding:0 24px}.copyright-content p{margin:0;font-size:.875rem;color:#7E8299;font-weight:400}.copyright-content a{color:#009EF7;text-decoration:none;font-weight:500;transition:color .15s ease}.copyright-content a:hover{color:#0095E8;text-decoration:underline}@media (max-width:480px){body{padding:12px}#qrContainer{grid-template-columns:1fr}.button-group{flex-direction:column}.btn{width:100%}header{padding:20px}.input-section,.preview-section{padding:20px}.modal-content{width:95%;margin:20px}.format-buttons,.resolution-buttons{flex-direction:column}.format-btn,.resolution-btn{width:100%;text-align:center}.modal-footer{flex-direction:column}.modal-footer .btn{width:100%}.copyright-footer{margin-top:20px;padding:16px 0}.copyright-content{padding:0 16px}}