.frame-container{display:flex;justify-content:center;align-items:flex-start;height:auto;width:100%;padding:0}.frame-with-label{position:relative;width:100%;height:100%;min-height:100px;padding:12px;background:#f8f8f8;border-radius:20px;box-shadow:0 4px 4px rgba(0,0,0,.2);text-align:center}.qr-code-content{width:100%;padding:10px;background-color:white;border-radius:10px;justify-content:center;margin:0 auto}.qr-code-content,.qr-label{display:flex;align-items:center}.qr-label{position:absolute;top:103%;left:50%;transform:translateX(-50%) translateY(20px);background-color:#FFA400;color:#ffffff;padding:10px 20px;font-size:16px;font-weight:700;border-radius:5px;gap:5px;box-shadow:0 4px 8px rgba(0,0,0,.2);white-space:nowrap}.qr-code-content canvas,.qr-code-content img{max-width:100%;height:auto;display:block}.frame-with-label.frame-brackets{border:var(--corner) solid transparent!important;border-image-source:conic-gradient(transparent 10%,var(--bg) 10%,var(--bg) 40%,transparent 40%,transparent 60%,var(--bg) 60%,var(--bg) 90%,transparent 90%)!important;border-image-slice:35!important}.frame-with-label.frame-classic{border:2px solid #ffa400!important}.frame-with-label.frame-dotted{border:4px dotted #ffa400!important}.frame-with-label.frame-default{border:none!important}.frame-container-preview{min-height:150px}.frame-container-preview,.qr-code-preview{width:100%;padding:10px;display:flex;justify-content:center;align-items:center}.qr-code-preview{max-width:150px;background-color:white;border-radius:10px;margin:0 auto}.frame-with-label.frame-warning{border:var(--corner) solid;border-image-source:repeating-linear-gradient(45deg,transparent 0,transparent 4px,var(--bg) 4px,var(--bg) 8px,transparent 8px);border-image-repeat:stretch;border-image-slice:35;background:#f8f8f8}.frame-with-label.frame-brackets{--corner:35px;--bg:#FFA400;border:var(--corner) solid;border-image-source:conic-gradient(transparent 10%,var(--bg) 10%,var(--bg) 40%,transparent 40%,transparent 60%,var(--bg) 60%,var(--bg) 90%,transparent 90%);border-image-slice:.1%;background:#f8f8f8}.frame-with-label.frame-classic{border:2px solid #ffa400;background:#f8f8f8}.frame-with-label.frame-dotted{border:4px dotted #ffa400;background:#f8f8f8}.frame-with-label.frame-default{border:none;background:#f8f8f8;box-shadow:0 4px 4px rgba(0,0,0,.2)}.frame-options{background:#ffffff;border-radius:8px;display:flex;flex-direction:column;height:calc(100% - 40px);margin-top:20px;z-index:2}.frame-styles-container{overflow-y:auto;padding:8px;height:100%;scrollbar-width:thin;scrollbar-color:#0bc1ab #f1f1f1}.frame-styles-container::-webkit-scrollbar{width:4px}.frame-styles-container::-webkit-scrollbar-track{background:#f1f1f1;border-radius:2px}.frame-styles-container::-webkit-scrollbar-thumb{background:#FFA400;border-radius:2px}.frame-styles-container::-webkit-scrollbar-thumb:hover{background:#e69500}.frame-style-option{cursor:pointer;padding:8px 12px;border-radius:6px;margin-bottom:6px;transition:all .3s ease;display:flex;align-items:center;gap:12px;text-align:left}.frame-icon{font-size:20px;min-width:24px;display:flex;align-items:center;justify-content:center;color:#fa9e00;transition:color .3s ease}.frame-style-option[class*="bg-[#FFA400]"] .frame-icon{color:white}.frame-label{font-size:13px;font-weight:500}.frame-preview-mini{display:flex;justify-content:center;align-items:center;overflow:hidden;min-width:32px;min-height:32px}.frame-with-label.frame-warning{--corner:35px;--bg:#FFA400;border:var(--corner) solid transparent!important;border-image-source:repeating-linear-gradient(45deg,transparent 0,transparent 4px,var(--bg) 4px,var(--bg) 8px,transparent 8px)!important;border-image-repeat:stretch!important;border-image-slice:35!important}.frame-style-option.selected-style .frame-icon{color:#fa9e00!important}.frame-with-label.frame-geometric{min-height:100px;display:flex;align-items:center;justify-content:center}.frame-container-preview .frame-with-label.frame-geometric,.frame-with-label.frame-geometric{--s:15px;padding:var(--s);border:calc(2*var(--s)) solid transparent;outline:2px solid #FFA400;outline-offset:calc(-1*var(--s));background:conic-gradient(from 90deg at 1px 1px,transparent 25%,#FFA400 0);background-color:#f8f8f8}.grid.overflow-y-auto{scrollbar-width:thin;scrollbar-color:#FFA400 #f1f1f1}.grid.overflow-y-auto::-webkit-scrollbar{width:4px}.grid.overflow-y-auto::-webkit-scrollbar-track{background:#f1f1f1;border-radius:2px}.grid.overflow-y-auto::-webkit-scrollbar-thumb{background:#FFA400;border-radius:2px}.grid.overflow-y-auto::-webkit-scrollbar-thumb:hover{background:#e69500}.initial-loading-container{position:relative;min-height:600px;background:white;display:flex;justify-content:center;align-items:center;opacity:0;animation:fadeInSmoothly .8s ease-in-out forwards;transition:opacity .8s ease-in-out}@keyframes fadeInSmoothly{0%{opacity:0}to{opacity:1}}.qr-component{opacity:1;transition:opacity .4s ease-in-out;min-height:500px}.qr-component.loading{opacity:0}.qr-content-stable{min-height:600px;position:relative}