@keyframes modalSlideIn{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}.qr-generator-container{width:100%;min-height:calc(100vh - 200px);padding:40px 20px;background:linear-gradient(135deg,#f5f7fa 0,#c3cfe2 100%)}.qr-generator-content{max-width:1400px;margin:0 auto;display:flex;gap:30px;align-items:flex-start}.page-title{font-size:26px;font-weight:700;color:#1f2937;margin:0 0 20px;text-align:center}.qr-options-panel{flex:1;background:#fff;border-radius:16px;padding:25px;box-shadow:0 8px 24px rgba(0,0,0,.08);max-height:calc(100vh - 150px);overflow-y:auto;overflow-x:hidden}.qr-options-panel::-webkit-scrollbar-track{background:#f3f4f6}.qr-options-panel::-webkit-scrollbar-thumb{background:#667eea}.qr-options-panel::-webkit-scrollbar-thumb:hover{background:#764ba2;background:#94a3b8}.option-section{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid #f3f4f6}.option-section:last-of-type{border-bottom:none;padding-bottom:0;margin-bottom:0}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.section-title{font-size:15px;font-weight:700;color:#1f2937;margin:0 0 12px}#eye-color-options .color-input-group,#gradient-options .color-input-group,#stroke-options .color-input-group,.section-header .section-title{margin-bottom:0}.show-more-arrow{font-size:16px;color:#667eea;cursor:pointer;transition:transform .3s ease;flex-shrink:0}.show-more-arrow:hover{color:#764ba2}.show-more-arrow.expanded{transform:rotate(180deg)}.qr-types-grid{display:flex;flex-wrap:wrap;gap:8px}.qr-type-btn{flex:0 0 calc(25% - 6px);padding:8px 6px;background:#fff;border:2px solid #e5e7eb;border-radius:8px;display:flex;align-items:center;gap:6px;cursor:pointer;transition:all .2s ease;font-size:12px;font-weight:600;color:#374151}.qr-type-btn.qr-type-hidden{display:none}.qr-type-btn.qr-type-hidden.show,.shape-btn.shape-hidden.show{display:flex}.qr-type-btn i{font-size:14px;color:#667eea;flex-shrink:0}.qr-type-btn span,.shape-btn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.qr-type-btn span{flex:1;text-align:left}.qr-type-btn:hover{border-color:#667eea;background:rgba(102,126,234,.05);transform:translateY(-1px)}.qr-type-btn.active{border-color:#667eea;background:linear-gradient(135deg,#667eea 0,#764ba2 100%);color:#fff}.qr-type-btn.active i,.qr-type-btn.active span,.size-btn.active .size-label,.size-btn.active .size-value{color:#fff}.shapes-grid{display:flex;flex-wrap:wrap;gap:6px}.shape-btn{flex:0 0 calc(16.666% - 5px);padding:8px 4px;background:#fff;border:2px solid #e5e7eb;border-radius:6px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;transition:all .2s ease;font-size:10px;font-weight:600;color:#374151}.shape-btn.shape-hidden{display:none}.shape-btn .shape-preview{font-size:18px;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.shape-btn span{max-width:100%}.shape-btn:hover{border-color:#667eea;background:rgba(102,126,234,.05);transform:translateY(-1px)}.shape-btn.active{border-color:#667eea;background:rgba(102,126,234,.1)}.size-btn,.size-grid{display:flex;gap:8px}.size-btn{flex:1;padding:10px;background:#fff;border:2px solid #e5e7eb;border-radius:8px;flex-direction:column;align-items:center;gap:4px;cursor:pointer;transition:all .2s ease}.size-btn .size-label{font-size:13px;font-weight:700;color:#374151}.size-btn .size-value{font-size:11px;color:#6b7280}.size-btn:hover{border-color:#667eea;background:rgba(102,126,234,.05)}.size-btn.active{border-color:#667eea;background:linear-gradient(135deg,#667eea 0,#764ba2 100%)}#qr-input-container,.input-group{display:flex;flex-direction:column;gap:10px}.input-group{gap:5px}.input-group label{font-size:12px;font-weight:600;color:#374151}.input-group input,.input-group select,.input-group textarea{width:100%;padding:8px 10px;border:2px solid #e5e7eb;border-radius:6px;font-size:13px;font-family:inherit;color:#1f2937;transition:all .2s ease}.input-group input:focus,.input-group select:focus,.input-group textarea:focus{outline:0;border-color:#667eea;background:rgba(102,126,234,.02)}.input-group textarea{min-height:70px;resize:vertical}.color-options{display:flex;gap:12px}.color-input-group{flex:1;display:flex;flex-direction:column;gap:6px}.color-input-group label{font-size:12px;font-weight:600;color:#1f2937}.color-input-group input[type=color]{width:100%;height:44px;border:0;border-radius:8px;cursor:pointer;padding:0;background:0 0;transition:all .2s ease}.color-input-group input[type=color]::-webkit-color-swatch-wrapper{padding:0;border-radius:8px}.color-input-group input[type=color]::-webkit-color-swatch{border:2px solid #e5e7eb;border-radius:8px;transition:border-color .2s ease}.color-input-group input[type=color]:hover::-webkit-color-swatch{border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,.1)}.color-input-group input[type=color]:focus::-webkit-color-swatch{outline:0;border-color:#667eea;box-shadow:0 0 0 4px rgba(102,126,234,.15)}.advanced-options{display:none;flex-direction:column;gap:15px;margin-top:15px}.advanced-options.show{display:flex}.advanced-group{padding:0;background:0 0;border-radius:0;border:0;margin-bottom:15px}.advanced-group:last-child,.faq-item p:last-child,.help-footer p:last-child,.slider-group:last-child{margin-bottom:0}.toggle-option{display:flex;align-items:center;justify-content:space-between;margin-bottom:0;padding-bottom:10px}.toggle-option label{font-size:13px;font-weight:700;color:#1f2937;letter-spacing:.3px}.toggle-option input[type=checkbox]{width:44px;height:24px;cursor:pointer;position:relative;appearance:none;background:#d1d5db;border-radius:12px;transition:all .3s ease;outline:0}.toggle-option input[type=checkbox]:checked{background:#667eea}.toggle-option input[type=checkbox]::before{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:3px;left:3px;transition:all .3s ease;box-shadow:0 2px 4px rgba(0,0,0,.2)}.toggle-option input[type=checkbox]:checked::before{left:23px}.slider-group{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}.slider-group label{font-size:12px;font-weight:600;color:#1f2937;display:flex;justify-content:space-between;align-items:center}.slider-group label span{font-weight:700;color:#667eea;background:#ede9fe;padding:2px 8px;border-radius:4px;font-size:11px}.slider-group input[type=range]{width:100%;height:8px;border-radius:4px;background:linear-gradient(to right,#e5e7eb 0,#e5e7eb 100%);outline:0;cursor:pointer;transition:all .2s ease}.slider-group input[type=range]:hover{background:linear-gradient(to right,#d1d5db 0,#d1d5db 100%)}.slider-group input[type=range]::-webkit-slider-thumb{appearance:none;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#667eea 0,#764ba2 100%);cursor:pointer;box-shadow:0 2px 6px rgba(102,126,234,.4);transition:all .2s ease}.slider-group input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 3px 10px rgba(102,126,234,.6)}.slider-group input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#667eea 0,#764ba2 100%);cursor:pointer;border:0;box-shadow:0 2px 6px rgba(102,126,234,.4);transition:all .2s ease}.slider-group input[type=range]::-moz-range-thumb:hover{transform:scale(1.1);box-shadow:0 3px 10px rgba(102,126,234,.6)}#eye-color-options,#gradient-options,#stroke-options{margin-top:12px;padding:0;background:0 0;border-radius:0;border:0;display:flex;flex-direction:column;gap:10px}.generate-btn{width:100%;padding:12px 18px;background:linear-gradient(135deg,#667eea 0,#764ba2 100%);border:0;border-radius:8px;color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px rgba(102,126,234,.4);margin-top:20px}.generate-btn i{font-size:16px}.generate-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(102,126,234,.5)}.generate-btn:active{transform:translateY(0)}.qr-preview-panel{flex:0 0 380px;position:sticky;top:100px}.preview-container{background:#fff;border-radius:16px;padding:20px;box-shadow:0 8px 24px rgba(0,0,0,.08)}.preview-title{font-size:18px;font-weight:700;color:#1f2937;margin:0 0 15px;text-align:center}.qr-preview{width:100%;aspect-ratio:1;background:#f9fafb;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:15px;border:2px solid #e5e7eb;padding:15px;overflow:hidden;box-sizing:border-box}.qr-preview svg{max-width:100%;max-height:100%;width:auto;height:auto;display:block}.preview-placeholder{display:flex;flex-direction:column;align-items:center;gap:10px;color:#9ca3af}.preview-placeholder i{font-size:40px}.preview-placeholder p{font-size:13px;font-weight:600;margin:0}.download-btn{width:100%;padding:10px 16px;background:linear-gradient(135deg,#10b981 0,#059669 100%);border:0;border-radius:8px;color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px rgba(16,185,129,.4)}.download-btn i{font-size:14px}.download-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(16,185,129,.5)}.download-btn:active{transform:translateY(0)}.gradient-type-selector{display:flex;gap:10px;margin-bottom:14px}.gradient-type-btn{flex:1;padding:10px 14px;background:#fff;border:2px solid #e5e7eb;border-radius:8px;font-size:13px;font-weight:700;color:#6b7280;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:.5px}.gradient-type-btn:hover{background:#f9fafb;border-color:#667eea;color:#667eea;transform:translateY(-1px)}.gradient-type-btn.active{background:linear-gradient(135deg,#667eea 0,#764ba2 100%);border-color:#667eea;color:#fff;box-shadow:0 4px 12px rgba(102,126,234,.3)}.file-upload-group{margin-bottom:12px}.file-upload-group label{display:block;font-size:13px;font-weight:700;color:#1f2937;margin-bottom:10px}.file-upload-group input[type=file]{width:100%;padding:12px;background:#fff;border:2px dashed #d1d5db;border-radius:10px;font-size:12px;color:#6b7280;cursor:pointer;transition:all .3s ease}.file-upload-group input[type=file]:hover{border-color:#667eea;background:#f9fafb;border-style:solid}.file-upload-group input[type=file]:focus{outline:0;border-color:#667eea;background:#f9fafb;box-shadow:0 0 0 3px rgba(102,126,234,.1)}#logo-preview{margin-top:14px;padding:14px;background:#fff;border:2px solid #e5e7eb;border-radius:10px;display:flex;flex-direction:column;align-items:center;gap:10px}#logo-preview-img{max-width:120px;max-height:120px;object-fit:contain;border-radius:8px;border:2px solid #e5e7eb;padding:8px;background:#f9fafb}.modal,.remove-logo-btn{display:flex;align-items:center}.remove-logo-btn{padding:8px 16px;background:linear-gradient(135deg,#ef4444 0,#dc2626 100%);border:0;border-radius:8px;color:#fff;font-size:12px;font-weight:700;cursor:pointer;transition:all .2s ease;gap:4px}.remove-logo-btn:hover{background:linear-gradient(135deg,#dc2626 0,#b91c1c 100%);transform:translateY(-2px);box-shadow:0 4px 12px rgba(239,68,68,.4)}.remove-logo-btn:active{transform:translateY(0)}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);justify-content:center;z-index:9999}.modal-content{background:#fff;border-radius:16px;padding:0;width:90%;max-width:500px;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:modalSlideIn .3s ease}.modal-close,.modal-header{display:flex;align-items:center}.modal-header{padding:20px 24px;border-bottom:1px solid #e2e8f0;justify-content:space-between}.modal-header h3{margin:0;font-size:18px;font-weight:700;color:#1e293b}.modal-close{width:32px;height:32px;background:#f1f5f9;border:0;border-radius:8px;color:#64748b;cursor:pointer;justify-content:center;transition:all .2s ease}.modal-close:hover{background:#e2e8f0;color:#334155}.modal-body{padding:24px}.modal-body p{margin:0 0 16px;font-size:14px;color:#64748b}.format-options{display:flex;flex-direction:column;gap:12px}.format-btn{padding:16px 20px;background:#f8fafc;border:2px solid #e2e8f0;border-radius:12px;cursor:pointer;display:flex;align-items:center;gap:16px;transition:all .2s ease}.format-btn:hover{background:#f1f5f9;border-color:#667eea;transform:translateX(4px)}.format-btn i{font-size:32px;color:#667eea}.format-btn span{font-size:16px;font-weight:700;color:#1e293b;flex:1;text-align:left}.format-btn small{font-size:12px;color:#64748b;text-align:right}.qr-options-panel::-webkit-scrollbar{width:6px}.qr-options-panel::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}.qr-options-panel::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}@media (max-width:1200px){.qr-preview-panel{flex:0 0 320px}}@media (max-width:992px){.qr-generator-content{flex-direction:column}.qr-preview-panel{flex:1;width:100%;position:static}.preview-container{max-width:400px;margin:0 auto}.qr-options-panel{max-height:none}}@media (max-width:768px){.qr-type-btn,.qr-type-btn.qr-type-hidden.show{flex:0 0 calc(50% - 4px)}.shape-btn,.shape-btn.shape-hidden.show{flex:0 0 calc(33.333% - 4px)}.color-options{flex-direction:column}.size-grid{flex-wrap:wrap}.size-btn{flex:0 0 calc(50% - 4px)}}@media (max-width:480px){.qr-generator-container{padding:20px 12px}.qr-options-panel{padding:18px}.page-title{font-size:20px;margin-bottom:15px}.qr-type-btn,.qr-type-btn.qr-type-hidden.show{flex:0 0 100%}.shape-btn,.shape-btn.shape-hidden.show{flex:0 0 calc(50% - 3px)}}.section-header{cursor:pointer;user-select:none}.section-header .show-more-arrow{transition:transform .3s ease}.section-header .show-more-arrow.expanded{transform:rotate(180deg)}.option-section .color-options.collapsed,.option-section .shapes-grid.collapsed,.option-section .size-grid.collapsed{display:none}.download-buttons{display:flex;gap:10px;margin-bottom:12px;width:100%}.download-format-btn{flex:1;padding:10px 12px;background:linear-gradient(135deg,#667eea 0,#764ba2 100%);border:0;border-radius:8px;color:#fff;font-size:12px;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px rgba(102,126,234,.3)}.download-format-btn i,.help-intro p{font-size:18px}.download-format-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(102,126,234,.4)}.download-format-btn:active{transform:translateY(0)}.help-content{width:100%;background:#fff;padding:60px 20px;margin-top:40px}.help-container{max-width:1200px;margin:0 auto}.faq-section>h3,.help-intro{text-align:center;margin-bottom:50px}.help-intro h2{font-size:32px;font-weight:700;color:#1f2937;margin-bottom:20px;line-height:1.3}.help-intro p{color:#6b7280;line-height:1.7;max-width:900px;margin:0 auto}.faq-section{margin-bottom:50px}.faq-section>h3{font-size:28px;font-weight:700;color:#1f2937;margin-bottom:30px}.faq-item{background:#f9fafb;border-radius:12px;padding:30px;margin-bottom:20px;border-left:4px solid #667eea;transition:all .3s ease}.faq-item:hover{box-shadow:0 8px 24px rgba(102,126,234,.1);transform:translateX(4px)}.faq-item h4{font-size:22px;margin:0 0 15px;line-height:1.4}.faq-item p,.faq-item ul li{font-size:16px;color:#4b5563;line-height:1.8;margin-bottom:15px}.faq-item ul{margin:15px 0;padding-left:20px}.faq-item ul li{margin-bottom:12px;position:relative}.faq-item h4,.faq-item ul li strong{color:#1f2937;font-weight:600}.faq-item ul li::marker{color:#667eea}.help-footer{background:linear-gradient(135deg,#667eea 0,#764ba2 100%);border-radius:16px;padding:40px;text-align:center;color:#fff}.help-footer h3{font-size:28px;font-weight:700;margin:0 0 20px;color:#fff}.help-footer p{font-size:16px;line-height:1.8;margin-bottom:15px;opacity:.95}@media (max-width:768px){.help-content{padding:40px 15px}.help-intro h2{font-size:26px}.help-intro p{font-size:16px}.faq-section>h3,.help-footer h3{font-size:24px}.faq-item{padding:20px}.faq-item h4{font-size:19px}.faq-item p,.faq-item ul li,.help-footer p{font-size:15px}.help-footer{padding:30px 20px}}@media (max-width:480px){.help-intro h2{font-size:22px}.faq-item h4{font-size:17px}.faq-item{padding:15px}}