body{background-color:var(--white);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;width:100%} .tool-container{display:flex;position:relative;max-width:var(--max-width);padding:var(--padding-vertical) var(--padding-horizontal);gap:40px} .tool-form-panel{flex:1;min-width:0} .tool-header{text-align:left} .tool-subtitle{max-width:600px} .tool-subtitle{max-width:100%;margin:0} @media (max-width:1024px){.tool-header{text-align:center} .tool-subtitle{margin:0 auto;max-width:600px} } .content-type-selector{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px} .content-type-btn{background:var(--white);border:1px solid var(--border-light);border-radius:var(--radius-sm);padding:10px 12px;display:flex;align-items:center;gap:8px;cursor:pointer;transition:var(--transition);font-size:0.9rem;color:var(--text)} .content-type-btn:hover{border-color:var(--primary);color:var(--text)} .content-type-btn.active{background:var(--primary-light);border-color:var(--primary);color:var(--primary-dark)} .icon-container{width:20px;height:20px;display:flex;align-items:center;justify-content:center} .svg-icon{width:100%;height:100%;fill:currentColor} @media (prefers-color-scheme:dark){.content-type-btn{background:var(--dark-bg-secondary);border-color:var(--dark-border-light);color:var(--dark-text)} .content-type-btn.active{background:var(--primary-dark);color:var(--white)} } .form-group{margin-bottom:20px} .form-group label{display:block;margin-bottom:8px;font-weight:500;color:var(--text)} .form-control{width:100%;padding:12px 15px;border:1px solid var(--border-light);border-radius:var(--radius-sm);background:var(--white);color:var(--text);transition:var(--transition)} .form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);outline:none} .advanced-options{background:var(--bg-secondary);padding:20px;border-radius:var(--radius-sm);margin-top:20px;border:1px solid var(--border-light);display:none} .advanced-options.visible{display:block} .customization-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:15px;margin:25px 0} .generate-btn{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:white;border:none;padding:15px 25px;border-radius:var(--radius-sm);font-size:1rem;font-weight:600;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;gap:10px;width:auto} .generate-btn:hover{opacity:0.9;transform:translateY(-2px);box-shadow:var(--shadow-md)} .tool-preview-panel{width:380px;position:sticky;top:120px;height:fit-content;max-height:auto;background:var(--white);padding:25px;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);border:1px solid var(--border-light);margin-right:20px;overflow-y:auto} .preview-header{text-align:center;margin-bottom:20px} .preview-header h2{font-size:1.5rem;color:var(--primary);margin-bottom:8px} .preview-header p{color:var(--text-light);font-size:0.9rem} .qr-display-container{position:relative;overflow:visible;background-color:transparent} .qr-display{position:relative;z-index:1;background:transparent !important;box-shadow:none !important;border:0 !important} .qr-frame{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;pointer-events:none;background-size:contain;background-position:center;background-repeat:no-repeat} .qr-display-container.has-scan-text{padding-bottom:75px} @media (max-width:1024px){.customization-section{display:none} .customization-section.visible{display:block} .design-toggle-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;background:var(--primary-light);color:var(--primary-dark);border:1px solid var(--primary);border-radius:var(--radius-sm);cursor:pointer;font-weight:500;transition:var(--transition)} .design-toggle-btn:hover{background:var(--primary);color:white} .design-toggle-btn i{transition:transform 0.3s ease} .design-toggle-btn.active i{transform:rotate(180deg)} .design-toggle-btn{outline:none !important} .design-toggle-btn:focus{box-shadow:none !important} .design-toggle-btn *{pointer-events:none} .qr-display-container.frame-double .qr-scan-text{bottom:-42px !important;--scan-text-bottom:42px} .scan-icon{width:19px;height:19px;margin-right:6px;transform:translateY(-1.5px)} } @media (min-width:1025px){.design-toggle-btn{display:none} } @media (max-width:1024px){.tool-container{flex-direction:column} .tool-preview-panel{width:100%;position:static;margin-right:0;margin-top:0px;margin-bottom:30px;max-height:none} .qr-display-container{padding:20px !important;padding-bottom:20px !important} .qr-display-container.with-frame{aspect-ratio:0 !important} .qr-display-container.has-scan-text{padding-bottom:55px} .qr-display-container.has-scan-text.with-frame{padding-bottom:55px !important} .qr-display{width:200px;height:200px;max-width:200px;max-height:200px;margin:0 auto;display:flex;align-items:center;justify-content:center} .qr-frame{background-size:contain} .qr-scan-text,.qr-scan-text .scan-text{font-size:inherit !important} .qr-scan-text{bottom:-40px !important;--scan-text-bottom:40px !important} .qr-scan-text{height:28px;line-height:29px;padding:0 10px} } .qr-display-container{background:var(--white);border-radius:var(--radius-md);padding:25px;margin:20px 0;border:1px solid var(--border-light);position:relative;overflow:visible} .qr-display{width:100%;height:auto;display:flex;align-items:center;justify-content:center;background:transparent !important;position:relative;overflow:visible;border-radius:0 !important;border:0 !important;aspect-ratio:1/1} .qr-display.circular{border-radius:50%} .frame-style-circle{border-style:solid;box-sizing:border-box;width:100%;height:100%;overflow:hidden;padding:0 !important;margin:0 !important} .qr-display canvas{max-width:100%;max-height:300px;transition:all 0.3s ease} .qr-display canvas{margin:0;padding:0;display:block} .qr-display canvas{border-radius:0} .qr-display{background:transparent !important;box-shadow:none !important;border:0 !important} .preview-options{margin-top:20px;background:var(--bg-secondary);padding:15px;border-radius:var(--radius-sm);border:1px solid var(--border-light)} .preview-options h4{margin-bottom:15px;color:var(--primary-dark);display:flex;align-items:center;gap:8px} .preview-options h4 i{color:var(--primary)} .option-group{margin-bottom:15px} .option-group:last-child{margin-bottom:0} .option-group label{display:block;margin-bottom:8px;font-size:0.9rem} .transparent-toggle{display:flex;align-items:center;gap:8px} .gradient-controls{display:none;margin-top:10px} .gradient-colors{display:flex;gap:10px;margin-bottom:10px} .gradient-direction{width:100%} .download-btn{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:white;border:none;padding:15px 25px;border-radius:var(--radius-sm);font-size:1rem;font-weight:600;cursor:pointer;width:100%;transition:var(--transition);display:inline-flex;align-items:center;justify-content:center;gap:10px;margin-top:20px} .download-btn:hover{opacity:0.9;transform:translateY(-2px);box-shadow:var(--shadow-md)} .download-btn:disabled{background:var(--gray);cursor:not-allowed;transform:none;box-shadow:none} .download-btn .svg-icon{width:20px;height:20px;transform:translateY(-2px)} .customization-section{background:var(--bg-secondary);padding:20px;border-radius:var(--radius-sm);border:1px solid var(--border-light);margin-top:20px;margin-bottom:20px} .customization-section h2{margin-top:0;margin-bottom:15px;color:var(--primary-dark);display:flex;align-items:center;gap:8px;font-size:1.1rem} .customization-section h2 i{color:var(--primary)} .design-options-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:15px} .design-option-group{background:var(--white);border-radius:var(--radius-sm);padding:15px;border:1px solid var(--border-light)} .design-option-group h4{margin-top:0;margin-bottom:12px;font-size:0.95rem;color:var(--primary-dark);display:flex;align-items:center;gap:8px} .design-option-group h4 i{color:var(--primary);font-size:0.9rem} .form-group.compact{margin-bottom:12px} .form-group.compact label{font-size:0.85rem;margin-bottom:5px;color:var(--text-light)} .form-control.compact{padding:8px 10px;font-size:0.85rem} .gradient-controls{display:none;margin-top:10px} .gradient-colors{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px} .tab-content{min-height:180px;position:relative} .tab-pane{display:none;position:absolute;top:0;left:0;width:100%} .tab-pane.active{display:block;position:relative} .design-tabs{display:flex;border-bottom:1px solid var(--border-light);margin-bottom:15px} .design-tab{background:none;border:none;padding:10px 15px;margin-right:5px;cursor:pointer;font-size:0.9rem;color:var(--text-light);border-bottom:2px solid transparent;transition:var(--transition);display:flex;align-items:center;gap:8px} .design-tab:hover{color:var(--primary)} .design-tab.active{color:var(--primary-dark);border-bottom-color:var(--primary);font-weight:500;background-color:var(--primary-light)} .customization-section .svg-icon{width:22px;height:22px} .gradient-controls{display:none;margin-top:15px;padding-top:15px;border-top:1px dashed var(--border-light)} .gradient-colors{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px} .checkbox-option{display:flex;align-items:center;gap:8px;padding:8px 0;cursor:pointer} .checkbox-option input{margin:0;width:16px;height:16px} .checkbox-option span{font-size:0.9rem;color:var(--text)} .color-picker-wrapper{display:flex;align-items:center;gap:10px;margin-bottom:10px} .color-picker{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:40px;height:40px;padding:0;margin:0;border:1px solid var(--border-light) !important;border-radius:6px;background:none;cursor:pointer;outline:none !important;box-shadow:none !important} .color-picker::-moz-color-swatch{border:none !important;border-radius:4px} .color-picker::-webkit-color-swatch{border:none !important;border-radius:4px} .color-picker::-webkit-color-swatch-wrapper{padding:0 !important;border:none !important} .color-picker:focus{outline:none !important;box-shadow:none !important} .color-code{border:none !important;outline:none !important;box-shadow:none !important;background:transparent !important;font-family:monospace;font-size:0.9rem;color:var(--text-light);width:60px;padding:5px 0} .color-picker:focus,.color-code:focus{outline:none !important;box-shadow:none !important;border-color:var(--border-light) !important} .color-code-display{border:1px solid var(--border-light);border-radius:4px;padding:0 8px;height:36px;display:flex;align-items:center;background:var(--white)} .color-code-display:focus-within{border-color:var(--primary) !important;box-shadow:0 0 0 2px var(--primary-light)} .color-hex{color:var(--text-light);font-weight:bold;margin-right:2px} @media (prefers-color-scheme:dark){.color-code{color:var(--dark-text);background:var(--dark-bg-secondary)} .color-code-display{background:var(--dark-bg-secondary);border-color:var(--dark-border-light)} .color-hex{color:var(--dark-text-light)} } .switch-option{display:flex;align-items:center;margin-bottom:15px} .switch{position:relative;display:inline-block;width:50px;height:24px;margin-right:10px} .switch input{opacity:0;width:0;height:0} .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s;border-radius:24px} .slider:before{position:absolute;content:"";height:16px;width:16px;left:4px;bottom:4px;background-color:white;transition:.4s;border-radius:50%} input:checked + .slider{background-color:var(--primary)} input:checked + .slider:before{transform:translateX(26px)} .switch-label{font-size:0.9rem;color:var(--text)} .gradient-options{display:none;margin-top:15px;padding-top:15px;border-top:1px dashed var(--border-light)} .gradient-toggle:checked ~ .gradient-options{display:block} .color-options-row{display:flex;gap:20px;margin-bottom:15px} .color-option-column{flex:1;display:flex;flex-direction:column;gap:15px} .color-option-group{margin-bottom:0} .switch-option{margin-bottom:0} .gradient-options{margin-top:15px;padding-top:15px;border-top:1px dashed var(--border-light)} .form-control.error{border-color:#ff4444;box-shadow:0 0 0 3px rgba(255,68,68,0.2)} .frame-style-selector,.shape-style-selector{display:flex;gap:10px;overflow-x:auto;padding:2px 0;margin-bottom:15px;scrollbar-width:thin;scrollbar-color:var(--primary-light) var(--bg-secondary)} .frame-style-selector::-webkit-scrollbar,.shape-style-selector::-webkit-scrollbar{height:6px} .frame-style-selector::-webkit-scrollbar-track,.shape-style-selector::-webkit-scrollbar-track{background:var(--bg-secondary);border-radius:3px} .frame-style-selector::-webkit-scrollbar-thumb,.shape-style-selector::-webkit-scrollbar-thumb{background-color:var(--primary-light);border-radius:3px} .frame-option,.shape-option{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;cursor:pointer;padding:8px;border-radius:var(--radius-sm);transition:all 0.2s ease;width:80px;position:relative;border:1px solid var(--border-light);background:var(--white);z-index:1} .frame-option.active,.shape-option.active{border:2px solid var(--primary)} .frame-preview{width:50px;height:50px;background-size:contain;background-repeat:no-repeat;background-position:center} .frame-preview.frame-square{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='enable-background:new 0 0 280 280' viewBox='0 0 280 280'%3E%3Cpath d='M272 8v264H8V8h264m8-8H0v280h280V0z'/%3E%3C/svg%3E")} .frame-preview.frame-rounded{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='enable-background:new 0 0 280 280' viewBox='0 0 280 280'%3E%3Cpath d='M265 8c3.9 0 7 3.1 7 7v250c0 3.9-3.1 7-7 7H15c-3.9 0-7-3.1-7-7V15c0-3.9 3.1-7 7-7h250m0-8H15C6.7 0 0 6.7 0 15v250c0 8.3 6.7 15 15 15h250c8.3 0 15-6.7 15-15V15c0-8.3-6.7-15-15-15z'/%3E%3C/svg%3E")} .frame-preview.frame-double{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='enable-background:new 0 0 280 280' viewBox='0 0 280 280'%3E%3Cpath d='M277 3v274H3V3h274m3-3H0v280h280V0z'/%3E%3Cpath d='M272 8v264H8V8h264m3-3H5v270h270V5z'/%3E%3C/svg%3E")} .frame-preview.frame-square-scan{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='enable-background:new 0 0 280 330' viewBox='0 0 280 330'%3E%3Cpath d='M0 0v330h280V0H0zm8 8h264v264H8V8z'/%3E%3C/svg%3E")} .frame-preview.frame-rounded-scan{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='enable-background:new 0 0 280 330' viewBox='0 0 280 330'%3E%3Cpath d='M265 0H15C6.7 0 0 6.7 0 15v300c0 8.3 6.7 15 15 15h250c8.3 0 15-6.7 15-15V15c0-8.3-6.7-15-15-15zM8 15c0-3.9 3.1-7 7-7h250c3.9 0 7 3.1 7 7v250c0 3.9-3.1 7-7 7H15c-3.9 0-7-3.1-7-7V15z'/%3E%3C/svg%3E")} .frame-preview.frame-circle-scan{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='enable-background:new 0 0 280 330' viewBox='0 0 280 330'%3E%3Cpath d='M73 324c-11.6 0-21-9.4-21-21s9.4-21 21-21h134c11.6 0 21 9.4 21 21s-9.4 21-21 21H73z' style='fill:%23110f0f'/%3E%3Cpath d='M207 286c9.4 0 17 7.6 17 17s-7.6 17-17 17H73c-9.4 0-17-7.6-17-17s7.6-17 17-17h134m0-8H73c-13.8 0-25 11.2-25 25s11.2 25 25 25h134c13.8 0 25-11.2 25-25s-11.2-25-25-25z'/%3E%3Cpath d='M140 8c35.3 0 68.4 13.7 93.3 38.7 25 24.9 38.7 58 38.7 93.3s-13.7 68.4-38.7 93.3c-24.9 25-58 38.7-93.3 38.7s-68.4-13.7-93.3-38.7C21.7 208.4 8 175.3 8 140s13.7-68.4 38.7-93.3S104.7 8 140 8m0-8C62.7 0 0 62.7 0 140s62.7 140 140 140 140-62.7 140-140S217.3 0 140 0z'/%3E%3C/svg%3E")} .frame-preview.frame-double-scan{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='enable-background:new 0 0 280 330' viewBox='0 0 280 330'%3E%3Cpath d='M0 0v330h280V0H0zm3 3h274v274H3V3z'/%3E%3Cpath d='M5 275h270V5H5v270zM8 8h264v264H8V8z'/%3E%3C/svg%3E")} .frame-style-square-borders{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='enable-background:new 0 0 280 280' viewBox='0 0 280 280'%3E%3Cpath d='M272 8v264H8V8h264m8-8H0v280h280V0z'/%3E%3C/svg%3E");background-size:100% 100%;background-repeat:no-repeat;border:none !important} .frame-style-rounded-borders{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='enable-background:new 0 0 280 280' viewBox='0 0 280 280'%3E%3Cpath d='M265 8c3.9 0 7 3.1 7 7v250c0 3.9-3.1 7-7 7H15c-3.9 0-7-3.1-7-7V15c0-3.9 3.1-7 7-7h250m0-8H15C6.7 0 0 6.7 0 15v250c0 8.3 6.7 15 15 15h250c8.3 0 15-6.7 15-15V15c0-8.3-6.7-15-15-15z'/%3E%3C/svg%3E");background-size:100% 100%;background-repeat:no-repeat;border:none !important} .frame-style-double-borders{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='enable-background:new 0 0 280 280' viewBox='0 0 280 280'%3E%3Cpath d='M277 3v274H3V3h274m3-3H0v280h280V0z'/%3E%3Cpath d='M272 8v264H8V8h264m3-3H5v270h270V5z'/%3E%3C/svg%3E");background-size:100% 100%;background-repeat:no-repeat;border:none !important} .frame-style-square{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='enable-background:new 0 0 280 330' viewBox='0 0 280 330'%3E%3Cpath d='M0 0v330h280V0H0zm8 8h264v264H8V8z'/%3E%3C/svg%3E");background-size:100% 100%;background-repeat:no-repeat;border:none !important} .frame-style-rounded{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='enable-background:new 0 0 280 330' viewBox='0 0 280 330'%3E%3Cpath d='M265 0H15C6.7 0 0 6.7 0 15v300c0 8.3 6.7 15 15 15h250c8.3 0 15-6.7 15-15V15c0-8.3-6.7-15-15-15zM8 15c0-3.9 3.1-7 7-7h250c3.9 0 7 3.1 7 7v250c0 3.9-3.1 7-7 7H15c-3.9 0-7-3.1-7-7V15z'/%3E%3C/svg%3E");background-size:100% 100%;background-repeat:no-repeat;border:none !important} .frame-style-circle{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='enable-background:new 0 0 280 330' viewBox='0 0 280 330'%3E%3Cpath d='M73 324c-11.6 0-21-9.4-21-21s9.4-21 21-21h134c11.6 0 21 9.4 21 21s-9.4 21-21 21H73z' style='fill:%23110f0f'/%3E%3Cpath d='M207 286c9.4 0 17 7.6 17 17s-7.6 17-17 17H73c-9.4 0-17-7.6-17-17s7.6-17 17-17h134m0-8H73c-13.8 0-25 11.2-25 25s11.2 25 25 25h134c13.8 0 25-11.2 25-25s-11.2-25-25-25z'/%3E%3Cpath d='M140 8c35.3 0 68.4 13.7 93.3 38.7 25 24.9 38.7 58 38.7 93.3s-13.7 68.4-38.7 93.3c-24.9 25-58 38.7-93.3 38.7s-68.4-13.7-93.3-38.7C21.7 208.4 8 175.3 8 140s13.7-68.4 38.7-93.3S104.7 8 140 8m0-8C62.7 0 0 62.7 0 140s62.7 140 140 140 140-62.7 140-140S217.3 0 140 0z'/%3E%3C/svg%3E");background-size:100% 100%;background-repeat:no-repeat;border:none !important} .frame-style-double{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='enable-background:new 0 0 280 330' viewBox='0 0 280 330'%3E%3Cpath d='M0 0v330h280V0H0zm3 3h274v274H3V3z'/%3E%3Cpath d='M5 275h270V5H5v270zM8 8h264v264H8V8z'/%3E%3C/svg%3E");background-size:100% 100%;background-repeat:no-repeat;border:none !important} .frame-style-none{display:none} .frame-style-square-borders,.frame-style-rounded-borders,.frame-style-double-borders,.frame-style-square,.frame-style-rounded,.frame-style-circle,.frame-style-double{width:100%;height:auto;background-size:100% auto;background-repeat:no-repeat;aspect-ratio:1/1;border:none !important} .frame-style-square,.frame-style-rounded,.frame-style-circle,.frame-style-double{aspect-ratio:280/330} .qr-scan-text{position:absolute;bottom:-47px;left:50%;transform:translateX(-50%);min-width:auto;height:50px;line-height:67px;text-align:center;font-family:Arial,sans-serif;font-weight:bold;color:var(--scan-text-color,#ffffff);z-index:10;pointer-events:none;display:none;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 20px;align-items:center;justify-content:center} .qr-display-container.frame-double .qr-scan-text{bottom:-49px} .qr-display-container.frame-square .qr-scan-text,.qr-display-container.frame-rounded .qr-scan-text,.qr-display-container.frame-circle .qr-scan-text,.qr-display-container.frame-double .qr-scan-text{display:flex} .qr-display-container.with-frame:not(.frame-square):not(.frame-rounded):not(.frame-circle):not(.frame-double) .qr-scan-text{display:none !important} .scan-icon{display:inline-flex;align-items:center;margin-right:8px;color:inherit;transform:translateY(-1.5px)} .scan-text{display:inline} .empty-state{text-align:center;color:#999;padding:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center} .empty-state + .qr-frame,.empty-state + .qr-scan-text{display:none !important} .qr-display-container.empty .qr-display{padding-bottom:0;aspect-ratio:1/1} .qr-display-container.empty.has-scan-text{padding-bottom:0 !important} .qr-scan-text.frame-circle-text{bottom:-25px;--scan-text-bottom:25px} .frame-option span,.shape-option span{font-size:0.8rem;text-align:center;white-space:nowrap} .frame-option.active,.shape-option.active{background:var(--primary-light);border:2px solid var(--primary);box-shadow:0 2px 8px rgba(0,0,0,0.1);z-index:1} .frame-option:hover,.shape-option:hover{background:var(--white);transform:translateY(-2px);box-shadow:0 2px 5px rgba(0,0,0,0.1)} .frame-option:active,.shape-option:active{transform:translateY(0)} .frame-preview.no-frame{border:1px dashed var(--border-light);border-radius:50%;display:flex;align-items:center;justify-content:center} .frame-preview.no-frame .fa-times{color:var(--text-light);opacity:0.7;transition:all 0.2s ease} .frame-option.active .frame-preview.no-frame .fa-times{color:var(--primary);opacity:1} .frame-option:hover .frame-preview.no-frame .fa-times{opacity:1;transform:scale(1.1)} .frame-option.active:hover,.shape-option.active:hover{background:var(--primary-light);transform:translateY(-2px) scale(1.02);z-index:2} .frame-preview.frame-circle::after{border-radius:50%} .no-frame{border:1px dashed var(--border-light)} .range-value{text-align:center;font-size:0.9rem;color:var(--text-light);margin-top:5px} input[type="range"]{-webkit-appearance:none;width:100%;height:8px;border-radius:4px;background:var(--border-light);outline:none} input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--primary);cursor:pointer} .frame-option.active .no-frame{border:2px solid var(--primary)} .empty-state + .qr-frame{display:none !important} .qr-scan-text.frame-square-text,.qr-scan-text.frame-rounded-text,.qr-scan-text.frame-double-text,.qr-scan-text.frame-dotted-text{bottom:-50px;--scan-text-bottom:50px} .qr-scan-text.frame-square-text,.qr-scan-text.frame-rounded-text,.qr-scan-text.frame-circle-text,.qr-scan-text.frame-dotted-text,.qr-scan-text.frame-double-text{color:inherit;background-color:inherit} .qr-scan-text.frame-circle-text{width:auto;min-width:120px;left:50%;transform:translateX(-50%);bottom:-40px;--scan-text-bottom:40px;line-height:50px} .qr-scan-text.bottom{bottom:-50px;left:0;width:100%} .qr-scan-text.top{top:-50px;left:0;width:100%} .qr-scan-text.center{top:50%;left:50%;transform:translate(-50%,-50%);width:80%} .qr-scan-text.button{background:#000;color:#fff;padding:17px 20px;border-radius:0px 0px 15px 15px;font-size:24px;height:auto;line-height:40px} .qr-scan-text.round-button{background:#000;color:#fff;border-radius:25px;font-size:24px;height:auto;line-height:40px;display:inline-block;width:auto;min-width:120px} .qr-scan-text.simple-text{background:#000;color:#fff;border-radius:0px 0px 15px 15px;font-size:24px;height:auto;line-height:40px} .qr-scan-text.frame-square-text{background:#000;color:#fff;border-radius:0;font-size:24px;height:auto;line-height:40px;border-top:none} .qr-scan-text.frame-rounded-text{background:#000;color:#fff;border-radius:0 0 15px 15px;font-size:24px;height:auto;line-height:40px;border-top:none} .qr-scan-text.frame-dotted-text{background:#000;color:#fff;border-radius:0;font-size:24px;height:auto;border-top:none} .qr-scan-text.frame-double-text{background:#000;color:#fff;padding:17px 20px;border-radius:0;font-size:24px;height:auto;border-top:none;line-height:45px} .shape-square::after{content:"";width:40px;height:40px;background:#000} .shape-dots::after{content:"";width:40px;height:40px;background:radial-gradient(circle at 5px 5px,#000 3px,transparent 3px),radial-gradient(circle at 15px 5px,#000 3px,transparent 3px),radial-gradient(circle at 25px 5px,#000 3px,transparent 3px),radial-gradient(circle at 35px 5px,#000 3px,transparent 3px),radial-gradient(circle at 5px 15px,#000 3px,transparent 3px),radial-gradient(circle at 15px 15px,#000 3px,transparent 3px),radial-gradient(circle at 25px 15px,#000 3px,transparent 3px),radial-gradient(circle at 35px 15px,#000 3px,transparent 3px),radial-gradient(circle at 5px 25px,#000 3px,transparent 3px),radial-gradient(circle at 15px 25px,#000 3px,transparent 3px),radial-gradient(circle at 25px 25px,#000 3px,transparent 3px),radial-gradient(circle at 35px 25px,#000 3px,transparent 3px),radial-gradient(circle at 5px 35px,#000 3px,transparent 3px),radial-gradient(circle at 15px 35px,#000 3px,transparent 3px),radial-gradient(circle at 25px 35px,#000 3px,transparent 3px),radial-gradient(circle at 35px 35px,#000 3px,transparent 3px);background-size:40px 40px} .shape-rounded::after{content:"";width:40px;height:40px;background:#000;border-radius:4px;position:relative} .form-group label[for="frameColor"]{position:relative} .form-group label[for="frameColor"]:after{content:"(affects frame border and button background)";display:block;font-size:0.8em;color:var(--text-light);font-weight:normal;margin-top:4px} .logo-options-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:10px;margin-bottom:20px} .logo-option{display:flex;flex-direction:column;align-items:center;cursor:pointer;padding:10px;border-radius:var(--radius-sm);transition:all 0.2s ease;border:1px solid var(--border-light);background:var(--white)} .logo-option:hover .logo-preview{transform:scale(1.1);transition:transform 0.3s ease} .logo-option:hover{} .logo-preview{width:50px;height:50px;display:flex;align-items:center;justify-content:center;background:var(--logo-bg-color,#ffffff);border-radius:50%;padding:10px;box-sizing:border-box;transition:all 0.3s ease;position:relative;overflow:hidden;border:1px solid rgba(0,0,0,0.1)} .logo-option.active .logo-preview{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-light)} .logo-option.active.transparent-bg .logo-preview{background:transparent !important;border-color:transparent !important} .logo-preview svg{width:100%;height:100%;max-width:100%;max-height:100%;display:block} .logo-option[data-logo="whatsapp"] .logo-preview svg{color:#25D366} .logo-option[data-logo="paypal"] .logo-preview svg{fill:#003087} .logo-option[data-logo="vcard"] .logo-preview svg{fill:#2c3e50} .logo-option[data-logo="wifi"] .logo-preview svg{color:#3498db} .logo-option[data-logo="location"] .logo-preview svg{fill:#e74c3c} .logo-option[data-logo="email"] .logo-preview svg{fill:#d44638} .logo-option[data-logo="link"] .logo-preview svg{color:#0077b5} .logo-option[data-logo="phone"] .logo-preview svg{fill:#27ae60} .logo-option.active .logo-preview svg{filter:drop-shadow(0 2px 4px rgba(0,0,0,0.2))} .logo-option[data-logo="event"] .logo-preview svg{color:#e74c3c} .logo-option.active{background:var(--primary-light);border:2px solid var(--primary);box-shadow:0 2px 8px rgba(0,0,0,0.1);border-radius:var(--radius-sm)} .no-logo{border:1px dashed var(--border-light);border-radius:50%} .no-logo .svg-icon{color:#1E293B } .logo-upload-section{margin-top:20px;padding-top:20px;border-top:1px solid var(--border-light)} .upload-logo{border-radius:50%} .logo-preview img{max-width:100%;max-height:100%;object-fit:cover;border-radius:50%} .logo-option.active .logo-preview{animation:pulse 1.5s infinite} @keyframes pulse{0%{transform:scale(1)} 50%{transform:scale(1.05)} 100%{transform:scale(1)} } .upload-container{display:flex;align-items:center;gap:10px;margin-bottom:15px} .upload-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;background:var(--primary-light);color:var(--primary-dark);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);border:1px solid var(--primary)} .upload-btn:hover{background:var(--primary);color:white} .upload-btn .svg-icon{width:20px;height:20px;vertical-align:-0.155em} .upload-btn input[type="file"]{display:none} .file-info{font-size:0.9rem;color:var(--text-light)} .logo-settings{background:var(--bg-secondary);padding:15px;border-radius:var(--radius-sm);border:1px solid var(--border-light)} .logo-option[data-logo="whatsapp"] .logo-preview{color:#25D366} .logo-option[data-logo="paypal"] .logo-preview{color:#003087} .logo-option[data-logo="vcard"] .logo-preview{color:#2c3e50} .logo-option[data-logo="wifi"] .logo-preview{color:#3498db} .logo-option[data-logo="location"] .logo-preview{color:#e74c3c} .logo-upload-container{margin-top:15px;padding-top:15px;border-top:1px dashed var(--border-light)} .logo-position-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .position-option{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px;border:1px solid var(--border-light);border-radius:var(--radius-sm);cursor:pointer;background:var(--white);height:60px} .position-option:hover{border-color:var(--primary)} .position-option.active{background:var(--primary-light);border:2px solid var(--primary)} .position-option i{margin:2px} .logo-preview{transition:all 0.3s ease} .logo-option.active .logo-preview{box-shadow:0 0 0 3px var(--primary-light)} .logo-preview i{filter:drop-shadow(0 2px 2px rgba(0,0,0,0.1))} @media (max-width:768px){.content-type-selector{flex-wrap:nowrap;overflow-x:auto;padding-bottom:10px;-webkit-overflow-scrolling:touch} .content-type-btn{flex:0 0 auto;white-space:nowrap} .design-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:10px;-webkit-overflow-scrolling:touch} .design-tab{flex:0 0 auto} .form-group{margin-bottom:0px} .form-group label{display:block} .frame-style-selector,.shape-style-selector,.logo-options-grid{flex-wrap:nowrap;overflow-x:auto;padding-bottom:10px;-webkit-overflow-scrolling:touch} .frame-option,.shape-option,.logo-option{flex:0 0 auto} .logo-options-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:10px} .color-options-row{flex-direction:column;gap:15px} .customization-section{padding:15px} .qr-display-container{padding:15px} .download-btn{width:100%} .form-control{padding:10px 12px} .preview-header p{display:none} } @media (max-width:480px){.qr-display-container{padding:15px;margin:10px 0;background:var(--white);aspect-ratio:auto !important} .qr-display{width:200px;height:200px;max-width:200px;max-height:200px;margin:0 auto;display:flex;align-items:center;justify-content:center} .qr-display canvas{width:100%;height:100%;max-width:100%;max-height:100%} .qr-display-container.has-scan-text{aspect-ratio:280/330;padding-bottom:50px !important} .qr-scan-text{min-width:100px} .qr-frame{border-width:8px} .download-btn{padding:12px 15px;font-size:0.9rem} } @media (max-width:480px){.form-control{padding:10px 12px;font-size:14px} .content-type-btn{padding:8px 10px;font-size:0.8rem} .frame-option,.shape-option{width:60px;padding:5px} .frame-preview,.shape-preview{width:35px;height:35px} input[type="range"]{height:6px} input[type="range"]::-webkit-slider-thumb{width:16px;height:16px} .logo-options-grid{grid-template-columns:repeat(auto-fill,minmax(60px,1fr))} .logo-preview{width:35px;height:35px} } @media (max-width:480px){.tool-preview-panel{padding:15px} .preview-header h2{font-size:1.3rem} .content-type-btn{padding:8px 12px;font-size:0.8rem} .frame-option,.shape-option{width:70px;padding:6px} .frame-preview,.shape-preview{width:40px;height:40px} .logo-options-grid{grid-template-columns:repeat(auto-fill,minmax(70px,1fr))} .logo-preview{width:40px;height:40px;font-size:1rem} } .active-touch{transform:scale(0.95) !important;opacity:0.9 !important} .content-type-btn,.frame-option,.shape-option,.logo-option,.position-option,.design-tab{-webkit-tap-highlight-color:transparent;user-select:none} .download-btn,.generate-btn,.content-type-btn{min-height:44px} .form-control{font-size:16px} @media screen and (-webkit-min-device-pixel-ratio:0){select:focus,textarea:focus,input:focus{font-size:16px} } @media (max-width:600px){.color-options-row{flex-direction:column} .logo-position-grid{grid-template-columns:repeat(2,1fr)} .advanced-options{padding:15px} .customization-section{margin-top:15px;margin-bottom:15px} input[type="range"]{height:6px} input[type="range"]::-webkit-slider-thumb{width:16px;height:16px} } .form-control.error{border-color:#ff4444;background-color:rgba(255,68,68,0.05);box-shadow:0 0 0 3px rgba(255,68,68,0.1)} #vcardOptions .form-control.error{border-color:#ff4444;background-color:rgba(255,68,68,0.05)} @keyframes pulseError{0%{box-shadow:0 0 0 0 rgba(255,68,68,0.4)} 70%{box-shadow:0 0 0 10px rgba(255,68,68,0)} 100%{box-shadow:0 0 0 0 rgba(255,68,68,0)} } .form-control.error:focus{animation:pulseError 1.5s infinite;border-color:#ff4444} @media (prefers-color-scheme:dark){.error-message{color:#ff7777} .form-control.error{border-color:#ff7777;background-color:rgba(255,68,68,0.1)} @keyframes pulseError{0%{box-shadow:0 0 0 0 rgba(255,119,119,0.4)} 70%{box-shadow:0 0 0 10px rgba(255,119,119,0)} 100%{box-shadow:0 0 0 0 rgba(255,119,119,0)} } } .required{color:#ff4444;margin-left:3px} .error-message{color:#ff4444;font-size:0.85rem;margin-top:5px;display:none;background:none !important;padding:12px 0px !important;border-left:0 !important} .form-control.error{border-color:#ff4444;background-color:rgba(255,68,68,0.05)} .general-error-message{background-color:#ffeeee;color:#ff4444;padding:8px 15px;border-radius:var(--radius-sm);margin:15px 0;display:flex;align-items:center;gap:10px;border:1px solid #ffcccc;animation:fadeIn 0.3s ease} .general-error-message .svg-icon{width:22px;height:22px;flex-shrink:0} @keyframes fadeIn{from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} } .download-size-container{margin:20px 0} .size-slider-header{display:flex;justify-content:space-between;margin-bottom:8px} .size-label{font-size:0.85rem;color:var(--text-light);font-weight:500} .size-value{font-weight:600;color:var(--primary-dark);font-family:monospace} .quality-slider{-webkit-appearance:none;width:100%;height:6px;border-radius:3px;background:linear-gradient(to right,#e0e0e0 0%,var(--primary-light) 50%,var(--primary) 100%);outline:none;margin:10px 0} .quality-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--primary);cursor:pointer;border:3px solid white;box-shadow:0 2px 5px rgba(0,0,0,0.2);transition:all 0.2s ease} .quality-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--primary);cursor:pointer;border:3px solid white;box-shadow:0 2px 5px rgba(0,0,0,0.2)} .quality-slider::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 3px 8px rgba(0,0,0,0.3)} .quality-slider-container{position:relative} @media (prefers-color-scheme:dark){.quality-slider{background:linear-gradient(to right,#444 0%,var(--primary-dark) 50%,var(--primary) 100%)} .quality-slider::-webkit-slider-thumb{border-color:var(--dark-bg-secondary)} } .hidden{display:none !important} #download-size-control{transition:opacity 0.3s ease} #download-size-control:not(.hidden){display:block;animation:fadeIn 0.3s ease} canvas{image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;image-rendering:pixelated;-ms-interpolation-mode:nearest-neighbor} .download-size-container{margin:20px 0;padding:15px;background:var(--bg-secondary);border-radius:var(--radius-sm);border:1px solid var(--border-light)} .size-slider-header{display:flex;justify-content:space-between;margin-bottom:8px;font-size:0.9rem} .size-label{color:var(--text-light);font-weight:500} .size-value{font-weight:600;color:var(--primary-dark);font-family:monospace} .quality-slider{-webkit-appearance:none;width:100%;height:6px;border-radius:3px;background:linear-gradient(to right,#e0e0e0 0%,var(--primary-light) 50%,var(--primary) 100%);outline:none;margin:10px 0} .quality-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--primary);cursor:pointer;border:3px solid white;box-shadow:0 2px 5px rgba(0,0,0,0.2);transition:all 0.2s ease} .quality-slider::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 3px 8px rgba(0,0,0,0.3)} canvas{image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;image-rendering:pixelated;-ms-interpolation-mode:nearest-neighbor} @media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){canvas{image-rendering:auto} } .frame-option,.shape-option{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;cursor:pointer;padding:8px;border-radius:var(--radius-sm);transition:all 0.2s ease;width:80px;position:relative;border:1px solid var(--border-light);background:var(--white);z-index:1} .frame-option.active,.shape-option.active{border:2px solid var(--primary)} .frame-preview,.shape-preview{position:relative;display:flex;align-items:center;justify-content:center;width:50px;height:50px;margin-bottom:5px} .frame-option span,.shape-option span{font-size:0.8rem;text-align:center;white-space:nowrap} .frame-option.active,.shape-option.active{background:var(--primary-light);border:2px solid var(--primary);box-shadow:0 2px 8px rgba(0,0,0,0.1);z-index:1} .frame-option:hover,.shape-option:hover{background:var(--white);transform:translateY(-2px);box-shadow:0 2px 5px rgba(0,0,0,0.1)} .frame-option:active,.shape-option:active{transform:translateY(0)} #scanMeTextSize,#scanMeTextSize + .range-value,#scanMeTextSize + .range-value + label{display:none !important;visibility:hidden !important;height:0 !important;width:0 !important;margin:0 !important;padding:0 !important;opacity:0 !important;position:absolute !important;left:-9999px !important} .form-group:has(#scanMeTextSize){display:none !important} div.form-group > label[for="scanMeTextSize"],#scanMeTextSize,#scanMeTextSizeValue{display:none !important} .download-format-selector{display:flex;gap:10px;margin:20px 0;justify-content:center} .format-option{display:flex;align-items:center;gap:8px;padding:10px 15px;border-radius:var(--radius-sm);background:var(--bg-secondary);border:1px solid var(--border-light);cursor:pointer;transition:var(--transition);color:var(--text)} .format-option:hover{border-color:var(--primary)} .format-option.active{background:var(--primary-light);border-color:var(--primary);color:var(--primary-dark);font-weight:500} .format-option .svg-icon{width:18px;height:18px} @media (prefers-color-scheme:dark){.format-option{background:var(--dark-bg-secondary);border-color:var(--dark-border-light);color:var(--dark-text)} .format-option.active{background:var(--primary-dark);color:white} } .mobile-tabs{display:none;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:20px;border-bottom:1px solid var(--border-light)} .mobile-tab{background:var(--bg-secondary);border:none;padding:12px 15px;border-radius:var(--radius-sm) var(--radius-sm) 0 0;cursor:pointer;font-weight:500;display:flex;align-items:center;justify-content:center;gap:8px;transition:var(--transition);color:var(--text-light)} .mobile-tab.active{background:var(--white);color:var(--primary-dark);border-bottom:3px solid var(--primary)} .tab-pane-content.active{display:block} @media (max-width:1024px){.mobile-tabs{display:grid} .tab-pane-content{display:none} .design-toggle-btn{display:none} .customization-section{display:block !important} } @media (max-width:480px){.mobile-tab{font-size:0.9rem;padding:10px 12px} .mobile-tab i{font-size:0.9rem} } .use-cases-section-container{position:relative;background:var(--primary-light)}