body{margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}button{border:none}button,input,textarea{font-family:inherit;outline:none}*,:after,:before{box-sizing:border-box}.language-picker{align-items:center;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;display:flex;font-size:.875rem;font-weight:500;gap:.5rem;justify-content:center;min-width:60px;padding:.75rem;transition:all .2s ease}.language-picker:hover{background:var(--gray-100);border-color:var(--gray-300);color:var(--text-primary);transform:translateY(-1px)}.language-picker:focus-visible{outline:2px solid var(--primary-500);outline-offset:2px}.language-picker:active{transform:translateY(0)}.language-flag{font-size:1rem;line-height:1}.language-code{font-size:.75rem;font-weight:600;letter-spacing:.025em}[data-theme=dark] .language-picker{background:var(--bg-secondary);border-color:var(--border-color);color:var(--text-secondary)}[data-theme=dark] .language-picker:hover{background:var(--gray-700);border-color:var(--gray-600);color:var(--text-primary)}.mobile-language-toggle{align-items:center;background:#0000;border:none;border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer;display:flex;gap:12px;justify-content:flex-start;padding:8px;transition:all .2s ease;width:100%}.mobile-language-toggle:hover{background:var(--gray-100);border-color:#0000;transform:none}.mobile-language-toggle .language-text{font-size:.9rem;font-weight:500}[data-theme=dark] .mobile-language-toggle:hover{background:#2a2a2a}@media (max-width:480px){.language-picker{gap:.375rem;min-width:50px;padding:.625rem}.language-flag{font-size:.875rem}.language-code{font-size:.7rem}}.custom-tooltip{animation:tooltipFadeIn .2s ease-out forwards;pointer-events:auto;position:fixed;z-index:9999}.custom-tooltip-content{word-wrap:break-word;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-xl);color:var(--text-primary);font-size:.875rem;line-height:1.5;max-width:100%;padding:1rem;white-space:pre-line}@keyframes tooltipFadeIn{0%{opacity:0;transform:scale(.95) translateY(-2px)}to{opacity:1;transform:scale(1) translateY(0)}}@media (max-width:480px){.custom-tooltip{max-width:calc(100vw - 32px)!important}.custom-tooltip-content{font-size:.8125rem;line-height:1.4;padding:.875rem}}.custom-tooltip-content{font-weight:400;text-align:left}@media (prefers-contrast:high){.custom-tooltip-content{border-width:2px;font-weight:500}}@media (prefers-reduced-motion:reduce){.custom-tooltip{animation:none}@keyframes tooltipFadeIn{0%{opacity:0}to{opacity:1}}}.mobile-menu-button{-webkit-tap-highlight-color:transparent;background:#0000;border:none;color:var(--text-primary);gap:12px;justify-content:flex-start;min-height:44px;padding:8px;touch-action:manipulation;width:100%}.mobile-menu-button:focus-visible{outline:2px solid var(--primary-500);outline-offset:2px}.menu-label{font-size:.9rem;font-weight:500;line-height:1}[data-theme=dark] .mobile-menu-button:hover{background:#2a2a2a}.mobile-menu-button.active{color:var(--primary-500)}.mobile-menu-button.active:hover{background:#4553541a}[data-theme=dark] .mobile-menu-button.active:hover{background:#45535433}*{box-sizing:border-box;margin:0;padding:0}:root{--primary-500:#455354;--primary-600:#3a4645;--primary-700:#2f3a37;--gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--gray-900:#111827;--white:#fff;--red-500:#ef4444;--green-500:#10b981;--bg-primary:#f9fafb;--bg-secondary:#fff;--text-primary:#111827;--text-secondary:#6b7280;--border-color:#e5e7eb;--shadow-color:#0000001a;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--shadow-xl:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif}[data-theme=dark]{--bg-primary:#0a0a0a;--bg-secondary:#1a1a1a;--text-primary:#f9fafb;--text-secondary:#9ca3af;--border-color:#2a2a2a;--shadow-color:#00000080}[data-theme=dark] ::selection{background-color:#455354;color:#e7ded3}[data-theme=dark] ::-moz-selection{background-color:#455354;color:#e7ded3}[data-theme=dark] .mobile-tab-option.active,[data-theme=dark] .tab.active{color:#e7ded3}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#f9fafb,#fff);background:linear-gradient(135deg,var(--bg-primary) 0,var(--bg-secondary) 100%);color:#111827;color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-family:var(--font-sans);line-height:1.6;transition:background .3s ease,color .3s ease}.app,body{min-height:100vh}.app{padding:2rem 1rem}.container{margin:0 auto;max-width:1200px}.header{margin-bottom:3rem;text-align:center}.header-top{justify-content:space-between;margin-bottom:.5rem;padding:0 16px;position:relative;width:100%}.header-controls,.header-top{align-items:center;display:flex}.header-controls{gap:12px;position:static}.logo{gap:.75rem}.logo,.theme-toggle{align-items:center;display:flex}.theme-toggle{background:#fff;background:var(--bg-secondary);border:1px solid #e5e7eb;border:1px solid var(--border-color);border-radius:.5rem;border-radius:var(--radius-md);color:#6b7280;color:var(--text-secondary);cursor:pointer;justify-content:center;padding:.75rem;transition:all .2s ease}.theme-toggle:hover{background:#f3f4f6;background:var(--gray-100);border-color:#d1d5db;border-color:var(--gray-300);color:#111827;color:var(--text-primary)}.mobile-menu-container{position:relative}.mobile-menu-button{align-items:center;background:#fff;background:var(--bg-secondary);border:1px solid #e5e7eb;border:1px solid var(--border-color);border-radius:.5rem;border-radius:var(--radius-md);color:#6b7280;color:var(--text-secondary);cursor:pointer;display:flex;justify-content:center;padding:.75rem;transition:all .2s ease}.mobile-menu-button:hover{background:#f3f4f6;background:var(--gray-100);border-color:#d1d5db;border-color:var(--gray-300);color:#111827;color:var(--text-primary)}.mobile-menu-dropdown{animation:mobileSlideIn .3s ease-out;background:#fff;background:var(--bg-secondary);border:1px solid #e5e7eb;border:1px solid var(--border-color);border-radius:12px;box-shadow:0 8px 32px #0000001f;overflow:hidden;position:absolute;right:0;top:calc(100% + 8px);width:180px;z-index:1000}@keyframes mobileSlideIn{0%{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}[data-theme=dark] .mobile-menu-dropdown{box-shadow:0 8px 32px #0006}@media (min-width:769px){.header-top{justify-content:center;margin:0 auto;max-width:1200px;padding:0}.header-controls{position:absolute;right:0}.logo{justify-content:center}.container{padding-left:1rem;padding-right:1rem}.header{margin-bottom:3rem}}.mobile-menu-item{border-bottom:1px solid #e5e7eb;border-bottom:1px solid var(--border-color);padding:12px 16px}.mobile-menu-item:last-child{border-bottom:none}.logo-icon{color:#455354;color:var(--primary-500)}.header h1{color:#111827;color:var(--text-primary);font-size:2.5rem;font-weight:800;letter-spacing:-.025em}.subtitle{color:#6b7280;color:var(--text-secondary);font-size:1.125rem;margin:0 auto;max-width:600px}.main-content{grid-gap:3rem;align-items:stretch;display:grid;gap:3rem;grid-template-columns:1fr 1fr}.form-section{background:#fff;background:var(--bg-secondary);border:1px solid #e5e7eb;border:1px solid var(--border-color);border-radius:1rem;border-radius:var(--radius-xl);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;padding:2rem;transition:background .3s ease,border-color .3s ease}.mobile-only{display:none}.desktop-only{display:flex}.desktop-tabs{background:#f9fafb;background:var(--bg-primary);border-radius:.75rem;border-radius:var(--radius-lg);display:flex;margin-bottom:2rem;padding:.25rem}.mobile-tab-selector{display:none;margin-bottom:2rem;position:relative}.mobile-tab-button{align-items:center;background:#f9fafb;background:var(--bg-primary);border:1px solid #e5e7eb;border:1px solid var(--border-color);border-radius:.75rem;border-radius:var(--radius-lg);color:#111827;color:var(--text-primary);cursor:pointer;display:flex;font-weight:500;justify-content:space-between;padding:1rem 1.25rem;transition:all .2s ease;width:100%}.mobile-tab-button:hover{background:#e5e7eb;background:var(--border-color)}.mobile-tab-current{align-items:center;display:flex;font-size:1rem;gap:.75rem}.mobile-tab-chevron{color:#6b7280;color:var(--text-secondary);transition:transform .3s ease}.mobile-tab-chevron.open{transform:rotate(180deg)}.mobile-tab-dropdown{wwshadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;wwshadow:var(--shadow-lg);background:#fff;background:var(--bg-secondary);border:1px solid #e5e7eb;border:1px solid var(--border-color);border-radius:.75rem;border-radius:var(--radius-lg);left:0;margin-top:.5rem;overflow:hidden;position:absolute;right:0;top:100%;z-index:10}.mobile-tab-option{align-items:center;background:#0000;border:none;border-bottom:1px solid #e5e7eb;border-bottom:1px solid var(--border-color);color:#111827;color:var(--text-primary);cursor:pointer;display:flex;justify-content:space-between;padding:1rem 1.25rem;transition:all .2s ease;width:100%}.mobile-tab-option:last-child{border-bottom:none}.mobile-tab-option:hover{background:#f9fafb;background:var(--bg-primary)}.mobile-tab-option.active{background:#455354;background:var(--primary-500);color:#fff}.mobile-tab-option-content{align-items:center;display:flex;font-size:1rem;font-weight:500;gap:.75rem}.mobile-tab-check{color:#fff}.mobile-tab-button:focus-visible,.mobile-tab-option:focus-visible{outline:2px solid #455354;outline:2px solid var(--primary-500);outline-offset:2px}.tab{align-items:center;background:#0000;border:none;border-radius:.5rem;border-radius:var(--radius-md);color:#6b7280;color:var(--text-secondary);cursor:pointer;display:flex;flex:1 1;font-size:.875rem;font-weight:500;gap:.5rem;justify-content:center;padding:.75rem 1rem;transition:all .2s ease}.tab:hover{background:#e5e7eb;background:var(--border-color);color:#111827;color:var(--text-primary)}.tab.active{background:#fff;background:var(--bg-secondary);border:1px solid #e5e7eb;border:1px solid var(--border-color);box-shadow:0 1px 2px 0 #0000000d;box-shadow:var(--shadow-sm);color:#3a4645;color:var(--primary-600)}.form-content{min-height:300px}.form-group{margin-bottom:1.5rem}.form-row{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:1fr 1fr}.contact-form .form-group:last-of-type{margin-bottom:1rem}label{display:block;font-size:.875rem;font-weight:600;margin-bottom:.5rem}.input,.textarea,label{color:#111827;color:var(--text-primary)}.input,.textarea{background:#fff;background:var(--bg-secondary);border:1px solid #e5e7eb;border:1px solid var(--border-color);border-radius:.5rem;border-radius:var(--radius-md);font-size:1rem;outline:none;padding:.75rem 1rem;transition:all .2s ease;width:100%}.input:focus,.textarea:focus{border-color:#455354;border-color:var(--primary-500);box-shadow:0 0 0 3px #4553541a}.textarea{font-family:inherit;min-height:100px;resize:vertical}.hint{color:#6b7280;color:var(--text-secondary);font-size:.875rem;margin-top:.5rem}.checkbox-label{align-items:center;color:#111827;color:var(--text-primary);cursor:pointer;display:flex;font-weight:500;gap:.75rem;margin-bottom:0}.checkbox{-webkit-appearance:none;appearance:none;background:#fff;background:var(--bg-secondary);border:2px solid #e5e7eb;border:2px solid var(--border-color);border-radius:.375rem;border-radius:var(--radius-sm);cursor:pointer;height:1.125rem;position:relative;transition:all .2s ease;width:1.125rem}.checkbox:checked{background:#455354;background:var(--primary-500);border-color:#455354;border-color:var(--primary-500)}.checkbox:checked:after{color:#fff;content:"✓";font-size:.875rem;font-weight:700;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.checkbox:focus{outline:2px solid #455354;outline:2px solid var(--primary-500);outline-offset:2px}.generate-btn{background:#455354;background:var(--primary-500);border:none;border-radius:.5rem;border-radius:var(--radius-md);color:#fff;color:var(--white);cursor:pointer;font-size:1rem;font-weight:600;margin-top:1rem;padding:1rem 2rem;transition:all .2s ease;width:100%}.customization-section{border-top:1px solid #e5e7eb;border-top:1px solid var(--border-color);margin-top:2rem;padding-top:1.5rem}.customization-toggle{align-items:center;background:#0000;border:none;color:#111827;color:var(--text-primary);cursor:pointer;display:flex;font-size:1rem;font-weight:600;justify-content:space-between;padding:1rem 0;transition:color .2s ease;width:100%}.customization-toggle:hover{color:#455354;color:var(--primary-500)}.customization-toggle-content{align-items:center;display:flex;gap:.5rem}.customization-icon{color:#455354;color:var(--primary-500);transition:color .2s ease}.customization-toggle:hover .customization-icon{color:#3a4645;color:var(--primary-600)}.customization-chevron{color:#6b7280;color:var(--text-secondary);transition:transform .3s ease}.customization-chevron.open{transform:rotate(180deg)}.customization-panel{animation:slideDown .3s ease;padding:1.5rem 0}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.customization-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:1fr 1fr;margin-bottom:2rem}.customization-group{display:flex;flex-direction:column;gap:.5rem}.customization-group.color-group{align-items:flex-start}.customization-group.full-width{grid-column:1/-1}.customization-label{align-items:center;color:#111827;color:var(--text-primary);display:flex;font-size:.875rem;font-weight:600;gap:.375rem;margin-bottom:.25rem}.info-icon{border-radius:50%;color:#6b7280;color:var(--text-secondary);cursor:help;flex-shrink:0;outline:none;padding:2px;transition:all .2s ease}.info-icon:focus,.info-icon:hover{background-color:#f3f4f6;background-color:var(--gray-100);color:#455354;color:var(--primary-500);transform:scale(1.1)}.info-icon:focus{box-shadow:0 0 0 2px #455354;box-shadow:0 0 0 2px var(--primary-500)}[data-theme=dark] .info-icon:focus,[data-theme=dark] .info-icon:hover{background-color:#1f2937;background-color:var(--gray-800)}.error-display,.margin-display,.size-display{color:#6b7280;color:var(--text-secondary);font-size:.75rem;margin-bottom:.5rem}.range-slider{-webkit-appearance:none;appearance:none;background:#e5e7eb;background:var(--border-color);border-radius:3px;cursor:pointer;height:6px;outline:none;width:100%}.range-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#455354;background:var(--primary-500);border-radius:50%;cursor:pointer;height:18px;-webkit-transition:transform .2s ease;transition:transform .2s ease;width:18px}.range-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.range-slider::-moz-range-thumb{background:#455354;background:var(--primary-500);border:none;border-radius:50%;cursor:pointer;height:18px;-moz-transition:transform .2s ease;transition:transform .2s ease;width:18px}.range-slider::-moz-range-thumb:hover{transform:scale(1.1)}.customization-select{background:#fff;background:var(--bg-secondary);border:1px solid #e5e7eb;border:1px solid var(--border-color);border-radius:.5rem;border-radius:var(--radius-md);color:#111827;color:var(--text-primary);cursor:pointer;font-size:.875rem;padding:.5rem .75rem;transition:border-color .2s ease;width:100%}.customization-select:focus{border-color:#455354;border-color:var(--primary-500);outline:none}.color-picker{-webkit-appearance:none;appearance:none;background:#0000;border:2px solid #e5e7eb;border:2px solid var(--border-color);border-radius:.5rem;border-radius:var(--radius-md);cursor:pointer;height:40px;transition:border-color .2s ease;width:60px}.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border:none;border-radius:calc(.5rem - 2px);border-radius:calc(var(--radius-md) - 2px)}.color-picker::-moz-color-swatch{border:none;border-radius:calc(.5rem - 2px);border-radius:calc(var(--radius-md) - 2px)}.color-picker:focus,.color-picker:hover{border-color:#455354;border-color:var(--primary-500);outline:none}.color-presets{border-top:1px solid #e5e7eb;border-top:1px solid var(--border-color);padding-top:1.5rem}.color-controls{grid-gap:1rem;border-bottom:1px solid #e5e7eb;border-bottom:1px solid var(--border-color);display:grid;gap:1rem;grid-template-columns:1fr 1fr;margin-bottom:1.5rem;padding-bottom:1.5rem}.presets-title{color:#111827;color:var(--text-primary);font-size:1rem;font-weight:600;margin-bottom:1rem}.preset-buttons{grid-gap:.75rem;display:grid;gap:.75rem;grid-template-columns:repeat(2,1fr)}.preset-button{align-items:center;background:#f9fafb;background:var(--bg-primary);border:1px solid #e5e7eb;border:1px solid var(--border-color);border-radius:.5rem;border-radius:var(--radius-md);color:#111827;color:var(--text-primary);cursor:pointer;display:flex;font-size:.875rem;gap:.75rem;padding:.75rem;transition:all .2s ease}.preset-button:hover{border-color:#455354;border-color:var(--primary-500);box-shadow:0 1px 2px 0 #0000000d;box-shadow:var(--shadow-sm);transform:translateY(-1px)}.preset-preview{border:1px solid #e5e7eb;border:1px solid var(--border-color);border-radius:.375rem;border-radius:var(--radius-sm);display:flex;height:24px;overflow:hidden;width:24px}.preset-bg,.preset-fg{height:100%;width:50%}.customization-hint{background:#f9fafb;background:var(--bg-primary);border:1px solid #e5e7eb;border:1px solid var(--border-color);border-radius:.5rem;border-radius:var(--radius-md);color:#6b7280;color:var(--text-secondary);font-size:.875rem;margin-top:1rem;padding:1rem}.error-correction-section,.logo-section{border-top:1px solid #e5e7eb;border-top:1px solid var(--border-color);margin-top:1.5rem;padding-top:1.5rem}.logo-section-title{color:#111827;color:var(--text-primary);font-size:1rem;font-weight:600;margin-bottom:1rem}.logo-upload-area{border:2px dashed #e5e7eb;border:2px dashed var(--border-color);border-radius:.75rem;border-radius:var(--radius-lg);padding:2rem;text-align:center;transition:border-color .2s ease,background-color .2s ease}.logo-upload-area:hover{background-color:#f9fafb;background-color:var(--bg-primary);border-color:#455354;border-color:var(--primary-500)}.logo-upload-input{display:none}.logo-upload-label{align-items:center;color:#111827;color:var(--text-primary);cursor:pointer;display:flex;flex-direction:column;gap:.75rem}.logo-upload-icon{color:#455354;color:var(--primary-500);transition:color .2s ease}.logo-upload-label:hover .logo-upload-icon{color:#3a4645;color:var(--primary-600)}.logo-upload-text{font-size:1rem;font-weight:600}.logo-upload-hint{color:#6b7280;color:var(--text-secondary);font-size:.875rem}.logo-preview-section{display:flex;flex-direction:column;gap:1.5rem}.logo-preview-container{background:#f9fafb;background:var(--bg-primary);border:2px solid #e5e7eb;border:2px solid var(--border-color);border-radius:.75rem;border-radius:var(--radius-lg);height:120px;margin:0 auto;overflow:hidden;position:relative;width:120px}.logo-preview-image{height:100%;object-fit:cover;width:100%}.logo-remove-btn{align-items:center;background:#ef4444;background:var(--red-500);border:none;border-radius:50%;box-shadow:0 2px 4px #0003;color:#fff;cursor:pointer;display:flex;height:24px;justify-content:center;position:absolute;right:4px;top:4px;transition:transform .2s ease;width:24px;z-index:10}.logo-remove-btn:hover{transform:scale(1.1)}.logo-controls{display:flex;flex-direction:column;gap:1rem}.logo-control-group{display:flex;flex-direction:column;gap:.5rem}.logo-control-label{color:#111827;color:var(--text-primary);font-size:.875rem;font-weight:600}.logo-background-options,.logo-shape-options,.logo-size-options{display:flex;gap:.5rem}.logo-bg-btn,.logo-shape-btn,.logo-size-btn{background:#fff;background:var(--bg-secondary);border:1px solid #e5e7eb;border:1px solid var(--border-color);border-radius:.5rem;border-radius:var(--radius-md);color:#111827;color:var(--text-primary);cursor:pointer;flex:1 1;font-size:.875rem;padding:.5rem .75rem;transition:all .2s ease}.logo-bg-btn:hover,.logo-shape-btn:hover,.logo-size-btn:hover{border-color:#455354;border-color:var(--primary-500)}.logo-bg-btn.active,.logo-shape-btn.active,.logo-size-btn.active{background:#455354;background:var(--primary-500);border-color:#455354;border-color:var(--primary-500);color:#fff}.generate-btn:hover:not(.disabled){background:#3a4645;background:var(--primary-600);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;box-shadow:var(--shadow-md);transform:translateY(-1px)}.generate-btn:active:not(.disabled){transform:translateY(0)}.generate-btn.disabled{background:#e5e7eb;background:var(--border-color);color:#6b7280;color:var(--text-secondary);cursor:not-allowed}.qr-section{background:#fff;background:var(--bg-secondary);border:1px solid #e5e7eb;border:1px solid var(--border-color);border-radius:1rem;border-radius:var(--radius-xl);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;box-shadow:var(--shadow-lg);padding:2rem;transition:background .3s ease,border-color .3s ease}.qr-container,.qr-section{align-items:center;display:flex;flex-direction:column;justify-content:center}.qr-container{margin-bottom:2rem;min-height:300px}.qr-canvas{border-radius:.75rem;border-radius:var(--radius-lg);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;box-shadow:var(--shadow-md)}.qr-placeholder{align-items:center;color:#6b7280;color:var(--text-secondary);display:flex;flex-direction:column;justify-content:center;text-align:center}.placeholder-icon{margin-bottom:1rem;opacity:.5}.qr-placeholder p{font-size:1.125rem;font-weight:500}.download-buttons{grid-gap:.75rem;display:grid;gap:.75rem;grid-template-columns:1fr 1fr;max-width:320px;width:100%}.download-format-btn{align-items:center;background:#fff;background:var(--bg-secondary);border:1px solid #e5e7eb;border:1px solid var(--border-color);border-radius:.5rem;border-radius:var(--radius-md);color:#111827;color:var(--text-primary);cursor:pointer;display:flex;flex-direction:column;font-size:.75rem;font-weight:500;gap:.5rem;justify-content:center;padding:.875rem .75rem;transition:all .2s ease}.download-format-btn:hover{background:#f9fafb;background:var(--bg-primary);border-color:#455354;border-color:var(--primary-500);box-shadow:0 1px 2px 0 #0000000d;box-shadow:var(--shadow-sm);transform:translateY(-1px)}.download-format-btn:active{transform:translateY(0)}.download-icon{opacity:.7;transition:opacity .2s ease}.download-format-btn:hover .download-icon{opacity:1}[data-theme=dark] .download-format-btn{background:#fff;background:var(--bg-secondary);border-color:#e5e7eb;border-color:var(--border-color)}[data-theme=dark] .download-format-btn:hover{background:#2a2a2a;border-color:#455354;border-color:var(--primary-500)}@media (max-width:768px){.app{padding:1rem}.header h1{font-size:2rem}.main-content{gap:2rem;grid-template-columns:1fr}.form-section,.qr-section{padding:1.5rem}.desktop-tabs{display:none}.mobile-only,.mobile-tab-selector{display:block}.desktop-only{display:none}.container{padding-left:0;padding-right:0}.header{margin-bottom:2rem}.form-row{grid-template-columns:1fr}.download-buttons{max-width:300px}.download-format-btn{font-size:.75rem}.customization-grid{gap:1rem;grid-template-columns:1fr}.preset-buttons{gap:.5rem;grid-template-columns:1fr}.color-controls{gap:.75rem;grid-template-columns:1fr}.preset-button{font-size:.8rem;padding:.5rem}.customization-panel{padding:1rem 0}}@media (max-width:480px){.app{padding:.5rem}.container{padding:0}.header{margin-bottom:2rem}.header h1{font-size:1.75rem}.subtitle{font-size:1rem}.form-section,.qr-section{border-radius:.75rem;border-radius:var(--radius-lg);padding:1rem}.logo{gap:.5rem}.qr-section{min-height:350px}.qr-container{min-height:250px}.download-buttons{gap:.5rem;grid-template-columns:1fr 1fr;max-width:280px}.download-format-btn{font-size:.7rem;gap:.375rem;padding:.75rem .5rem}.customization-section{margin-top:1.5rem}.customization-grid{gap:.75rem}.color-picker{height:35px;width:50px}.customization-hint{font-size:.8rem;padding:.75rem}.logo-upload-area{padding:1.5rem}.logo-preview-container{height:100px;width:100px}.logo-background-options,.logo-shape-options,.logo-size-options{flex-direction:column;gap:.5rem}.logo-bg-btn,.logo-shape-btn,.logo-size-btn{font-size:.8rem;padding:.5rem}}.generate-btn:disabled{cursor:not-allowed;opacity:.7}.download-format-btn:focus-visible,.generate-btn:focus-visible,.input:focus-visible,.tab:focus-visible,.textarea:focus-visible{outline:2px solid #455354;outline:2px solid var(--primary-500);outline-offset:2px}*{transition:border-color .2s ease,box-shadow .2s ease}.seo-content{margin-top:4rem}.content-section,.features-section,.qr-types-section,.use-cases-section{padding:2.5rem}.content-section,.faq-section,.features-section,.qr-types-section,.use-cases-section{background:#fff;background:var(--bg-secondary);border:1px solid #e5e7eb;border:1px solid var(--border-color);border-radius:1rem;border-radius:var(--radius-xl);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;box-shadow:var(--shadow-md);margin-bottom:2rem;transition:background .3s ease,border-color .3s ease}.faq-section{padding:2rem}.content-section h2,.faq-section h3,.features-section h3,.qr-types-section h3,.use-cases-section h3{color:#111827;color:var(--text-primary);font-weight:700;line-height:1.3;margin-bottom:1.5rem}.content-section h2{font-size:2rem;margin-bottom:1rem;text-align:center}.content-section p{color:#6b7280;color:var(--text-secondary);font-size:1.125rem;line-height:1.7;margin:0 auto;max-width:800px;text-align:center}.faq-section h3,.features-section h3,.qr-types-section h3,.use-cases-section h3{font-size:1.5rem;text-align:center}.features-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.feature-item{background:#f9fafb;background:var(--bg-primary);border:1px solid #e5e7eb;border:1px solid var(--border-color);border-radius:.75rem;border-radius:var(--radius-lg);padding:1.5rem;transition:transform .2s ease,box-shadow .2s ease}.feature-item:hover{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;box-shadow:var(--shadow-md);transform:translateY(-2px)}.feature-item h4{align-items:center;color:#111827;color:var(--text-primary);display:flex;font-size:1.125rem;font-weight:600;gap:.5rem;margin-bottom:.75rem}.feature-item p{color:#6b7280;color:var(--text-secondary);line-height:1.6;margin:0}.qr-types-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(2,1fr)}.qr-type{background:#f9fafb;background:var(--bg-primary);border:1px solid #e5e7eb;border:1px solid var(--border-color);border-radius:.75rem;border-radius:var(--radius-lg);padding:1.5rem;transition:transform .2s ease,box-shadow .2s ease}.qr-type:hover{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;box-shadow:var(--shadow-md);transform:translateY(-2px)}.qr-type h4{color:#3a4645;color:var(--primary-600);font-size:1.125rem;font-weight:600;margin-bottom:.75rem}.qr-type p{color:#6b7280;color:var(--text-secondary);line-height:1.6;margin:0}.faq-grid{grid-gap:.75rem;display:grid;gap:.75rem}.faq-item{background:#f9fafb;background:var(--bg-primary);border:1px solid #e5e7eb;border:1px solid var(--border-color);border-radius:.75rem;border-radius:var(--radius-lg);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}.faq-item:hover{box-shadow:0 1px 2px 0 #0000000d;box-shadow:var(--shadow-sm);transform:translateY(-1px)}.faq-question{align-items:center;background:#0000;border:none;cursor:pointer;display:flex;justify-content:space-between;padding:1rem 1.25rem;text-align:left;transition:background-color .2s ease;width:100%}.faq-question:hover{background:#e5e7eb;background:var(--border-color)}.faq-question:focus-visible{outline:2px solid #455354;outline:2px solid var(--primary-500);outline-offset:-2px}.faq-question h4{color:#111827;color:var(--text-primary);flex:1 1;font-size:1.125rem;font-weight:600;margin:0}.faq-chevron{color:#6b7280;color:var(--text-secondary);flex-shrink:0;margin-left:1rem;transition:transform .3s ease}.faq-chevron.open{transform:rotate(180deg)}.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease}.faq-answer.open{max-height:200px;padding:.75rem 1.25rem 1rem}.faq-answer p{color:#6b7280;color:var(--text-secondary);line-height:1.6;margin:0}.use-cases-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:1.5rem}.use-case-card{align-items:flex-start;background:#f9fafb;background:var(--bg-primary);border:1px solid #e5e7eb;border:1px solid var(--border-color);border-radius:.75rem;border-radius:var(--radius-lg);display:flex;gap:1rem;padding:1.5rem;transition:all .3s ease}.use-case-card:hover{border-color:#455354;border-color:var(--primary-500);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;box-shadow:var(--shadow-lg);transform:translateY(-2px)}.use-case-icon{align-items:center;background:#455354;background:var(--primary-500);border-radius:.75rem;border-radius:var(--radius-lg);display:flex;flex-shrink:0;height:48px;justify-content:center;width:48px}.use-case-emoji{font-size:1.5rem}.use-case-content{flex:1 1}.use-case-title{color:#111827;color:var(--text-primary);font-size:1.125rem;font-weight:600;line-height:1.3;margin-bottom:.5rem}.use-case-description{color:#6b7280;color:var(--text-secondary);font-size:.875rem;line-height:1.5;margin:0}[data-theme=dark] .qr-type h4{color:#e7ded3}@media (max-width:768px){.seo-content{margin-top:3rem;padding:0 .5rem}.content-section,.features-section,.qr-types-section,.use-cases-section{padding:1.5rem}.faq-section{padding:1.25rem}.content-section h2{font-size:1.75rem}.faq-section h3,.features-section h3,.qr-types-section h3,.use-cases-section h3{font-size:1.25rem;text-align:center}.features-grid,.qr-types-grid{grid-template-columns:1fr}.faq-item,.feature-item,.qr-type{padding:1.25rem}.use-cases-grid{gap:1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.use-case-card{gap:.875rem;padding:1.25rem}.use-case-icon{height:40px;width:40px}.use-case-emoji{font-size:1.25rem}}@media (max-width:480px){.seo-content{margin-top:2rem}.content-section,.features-section,.qr-types-section,.use-cases-section{margin-bottom:1.5rem;padding:1rem}.faq-section{margin-bottom:1.5rem;padding:.75rem}.content-section h2{font-size:1.5rem}.content-section p{font-size:1rem}.faq-question{padding:.75rem 1rem}.faq-answer.open{padding:.5rem 1rem .75rem}.use-cases-grid{gap:.75rem;grid-template-columns:1fr}.use-case-card{flex-direction:column;gap:.75rem;padding:1rem;text-align:center}.use-case-icon{align-self:center;height:36px;width:36px}.use-case-emoji{font-size:1.125rem}.use-case-title{font-size:1rem;margin-bottom:.375rem}.use-case-description{font-size:.8125rem}}.main-footer{color:#6b7280;color:var(--text-secondary);margin-top:auto;padding:2rem;text-align:center}.main-footer .container{margin:0 auto;max-width:1200px}.main-footer p{font-size:.875rem;margin:0}@media (max-width:768px){.main-footer{padding:1.5rem 1rem}.main-footer p{font-size:.8125rem}}