:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);margin:0;padding:0;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;padding:0}a{text-decoration:inherit;color:inherit}.app-header{background:#fff;padding:1rem 0;box-shadow:0 2px 10px #0000001a;position:sticky;top:0;z-index:100}.header-content{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:0 2rem}.logo{display:flex;align-items:center}.brand-name{margin:0;color:#2c3e50;font-size:1.2rem;font-weight:600;letter-spacing:-.5px}@media (max-width: 480px){.brand-name{font-size:1.5rem}.header-content{padding:0 1rem}}.qr-generator-container{display:flex;justify-content:center;gap:2rem;padding:2rem;box-sizing:border-box}@media (max-width: 768px){.qr-generator-container{flex-direction:column;padding:1rem}}.form-container{background:#fff;padding:2rem;border-radius:20px;box-shadow:0 10px 30px #0000001a;flex:1;max-width:400px}@media (max-width: 768px){.form-container{padding:1rem}}h1{color:#2c3e50;margin:1rem 0 2rem;font-weight:600;font-size:1.8rem}.styled-input{width:100%;padding:12px;border:2px solid #e0e0e0;border-radius:10px;font-size:1rem;transition:all .3s;box-sizing:border-box;max-width:100%}.styled-input:focus{border-color:#3498db;outline:none;box-shadow:0 0 0 3px #3498db33}.design-section{position:relative;border:2px solid #e0e0e0;border-radius:12px;padding:2rem 1rem 0;margin:2rem 0}.design-section:before{content:"Design";position:absolute;top:-12px;left:20px;background:#fff;color:#7f8c8d;font-size:.9rem;font-weight:500;padding:0 10px;letter-spacing:1px}.size-slider{width:100%;margin:10px 0;height:8px;background:#e0e0e0;border-radius:4px}.size-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:#3498db;border-radius:50%;cursor:pointer;transition:.3s}.size-value{text-align:center;color:#7f8c8d;font-weight:500;margin-top:8px}.color-pickers{display:flex;gap:10px;box-sizing:border-box;margin-bottom:20px}@media (max-width: 370px){.color-pickers{flex-direction:column}}.color-section{background:#f8f9fa;padding:1.5rem;border-radius:12px;margin:1.5rem 0}.color-section h4{margin:0 0 1.5rem;color:#2c3e50;font-size:1.1rem}.color-options{display:flex;flex-direction:column;gap:8px}.color-option{display:flex;justify-content:space-between;align-items:center;width:100%;padding:12px;border-radius:8px;cursor:pointer;transition:all .2s;background:#fff;box-sizing:border-box;border:2px solid #e0e0e0}.color-option:hover{border-color:#3498db}.color-preview-container{display:flex;align-items:center;gap:8px}.color-preview{width:32px;height:32px;border-radius:6px;transition:transform .2s;flex-shrink:0;outline:#DBDBDB solid 1px}.color-text-label{font-size:.95rem;color:#2c3e50;white-space:nowrap}.color-picker-popup{position:relative;margin:1.5rem 0 1rem;padding:1.5rem;background:#fff;border-radius:12px;box-shadow:0 5px 15px #0000001a}.color-picker-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.hex-input{width:100%;padding:10px;margin-top:1.5rem;border:2px solid #e0e0e0;border-radius:6px;font-family:monospace;font-size:.9rem}.hex-input:focus{outline:none;border-color:#3498db}.reset-button{background:none;border:none;color:#3498db;cursor:pointer;padding:6px 12px;border-radius:4px;font-size:.9rem}.reset-button:hover{background:#f0f4f8}.close-button{width:100%;margin-top:1.5rem;padding:12px;background:#3498db;color:#fff;border:none;border-radius:8px;cursor:pointer;transition:background .2s;font-weight:500}.close-button:hover{background:#2980b9}.logo-upload{background:#f8f9fa;color:#3498db;display:flex;align-items:center;gap:40px;box-sizing:border-box;padding:12px 20px;border-radius:8px;cursor:pointer;transition:all .3s;border:2px dashed #c4d7e6;width:100%;justify-content:center}.logo-upload:hover{background:#e3f0ff;border-color:#3498db}.logo-upload svg{width:20px;height:20px;flex-shrink:0}.logo-upload span{margin-left:10px}.generate-button{width:100%;padding:16px;background:#2ecc71;color:#fff;border:none;border-radius:10px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s}.generate-button:hover{background:#27ae60;transform:translateY(-2px)}.generate-button:disabled{background:#bdc3c7;cursor:not-allowed;transform:none}.qr-preview-container{position:relative;background:#fff;padding:32px;max-width:464px;border-radius:20px;box-shadow:0 10px 30px #0000001a;flex:1;box-sizing:border-box}.qr-preview{position:relative;width:100%;box-sizing:border-box;aspect-ratio:1 / 1;outline:2px solid #e0e0e0;height:0;padding-top:100%}.qr-preview>svg{position:absolute;top:0;left:0;width:100%!important;height:100%!important}.logo-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:10px;background:#fff;border-radius:12px}.logo-overlay img{width:50px}.input-group{margin-bottom:1.5rem}.input-group label{display:block;margin-bottom:.8rem;color:#2c3e50;font-weight:500;font-size:.95rem}.main-footer{text-align:center;color:#718096;margin-bottom:2rem}.footer-text{font-size:.9rem;margin:0}.footer-link{color:#4299e1;text-decoration:none;font-weight:500;transition:color .3s ease}.footer-link:hover{color:#3182ce;text-decoration:underline}@media (max-width: 768px){.footer-text{font-size:.8rem}}