:root{--gradient-1: linear-gradient(74deg, #4285F4 0, #9B72CB 9%, #D96570 20%, #D96570 24%, #9B72CB 35%, #4285F4 44%, #9B72CB 50%, #D96570 56%, #FFFFFF 75%, #FFFFFF 100%);--gradient-2: linear-gradient(to right,#3b82f6, #ec4899);--gradient-3: linear-gradient(246deg, #856EFA 0%, #1366EC 64%, #5C99FF 99%);--gradient-4: linear-gradient(78deg, #3B91FF -3.23%, #0D5EFF 51.11%, #C069FF 98.65%);--gradient-5: linear-gradient(to top right,#8b5cf6 , #3b82f6);--gradient-6: linear-gradient(to top right,#f97316,#ec4899,#a855f7);--box-shadow-5: 0 10px 20px -5px rgba(139, 92, 246, .25);--box-shadow-5-hover: 0 10px 25px -5px rgba(139, 92, 246, .35);--color-primary: #3b82f6;--color-text-primary: #0a0a0a;--color-text-gray: #6b7280;--color-black: #000000;--color-white: #ffffff;--border-gray-100: #f6f3f4;--border-gray-200: #e5e7eb;--border-gray-400: #9ca3af;--radius-xs: 3px;--radius-md: 6px;--radius-lg: 12px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-0: 0px;--spacing-1: 2px;--spacing-2: 8px;--spacing-4: 16px;--spacing-6: 24px;--spacing-8: 32px}.border-gray-200{border-color:var(--border-gray-200)}.border-gray-400{border-color:var(--border-gray-400)}.absolute{position:absolute}.relative{position:relative}.w-full{width:100%}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-md{border-radius:var(--radius-md)}.text-white{color:var(--color-white)}.button-style{border-radius:var(--radius-md);background:var(--gradient-5);box-shadow:var(--box-shadow-5);padding:0 var(--spacing-8);font-size:15px;font-weight:500;height:45px;line-height:24px;gap:var(--spacing-2);border:0;color:var(--color-white);letter-spacing:normal;width:100%;cursor:pointer;position:relative}.button-style-small{display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);background:var(--gradient-5);padding:var(--spacing-2) var(--spacing-4);gap:var(--spacing-1);border:0;color:var(--color-white);letter-spacing:normal;width:100%;cursor:pointer;position:relative}.button-style-small-gray{border-radius:var(--radius-md);background:var(--border-gray-200);padding:var(--spacing-2) var(--spacing-4);gap:var(--spacing-2);border:0;color:var(--color-text-primary);letter-spacing:normal;width:100%;cursor:pointer;position:relative}.button-style-small .icon{width:16px;height:16px}.button-animation{transition:all .3s ease}.button-animation:hover{transform:translateY(-2px);box-shadow:var(--box-shadow-5-hover)}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);box-shadow:var(--tw-shadow)}.hover\:shadow-xl:hover{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a)}.hover\:scale-102:hover{--tw-scale-x: 102%;--tw-scale-y: 102%;--tw-scale-z: 102%;scale:var(--tw-scale-x) var(--tw-scale-y);transition:transform .15s}.width-full{width:100%}.text-center{text-align:center}.is-show{display:block!important}.is-hide{display:none}.ai-image-generator .is-loading:after,.ai-image-generator-preview .is-loading:after{content:"";display:block;position:absolute;left:50%;top:50%;width:14px;height:14px;margin-left:-11px;margin-top:-11px;border:3px solid var(--color-loading-bg);border-radius:50%;border-top:3px solid var(--color-loading-top);animation:spin .8s linear infinite}.start-btn,.generate-btn{display:flex;align-items:center;justify-content:center;position:relative}.ai-image-generator{margin:0 auto;background:var(--color-white);width:600px;border-radius:var(--radius-2xl);color:var(--color-text-primary);padding:var(--spacing-8);max-height:100%;position:relative;overflow-y:auto}.ai-image-generator-close{top:16px;right:16px;z-index:10;font-size:28px;background:none;border:none;cursor:pointer;padding:0;margin:0;color:var(--color-text-primary)}.ai-image-generator-item{margin-bottom:var(--spacing-6)}.ai-image-generator label,.dim-label{display:block;font-weight:700;margin-block-end:var(--spacing-2)}.ai-image-generator-card{box-shadow:0 1px 2px #0000001a,0 4px 6px -4px #0000001a;border:1px solid var(--border-gray-100);border-radius:var(--radius-lg);background:var(--color-white);color:var(--color-text-primary);padding:var(--spacing-4);display:flex;flex-direction:column;gap:var(--spacing-2)}.ai-image-generator-card .title{font-size:14px;color:var(--color-text-primary);margin:0}.ai-image-generator-card .label{font-size:12px;color:var(--color-text-gray)}.ai-image-dimensions{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--spacing-2);width:100%;box-sizing:border-box;justify-items:center}.dimension-btn{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%;height:44px;padding:var(--spacing-2);border:1px solid var(--border-gray-200);background:var(--color-white);border-radius:var(--radius-full);cursor:pointer;font-size:14px;gap:var(--spacing-2);transition:border-color .2s,background .2s;box-sizing:border-box;color:var(--color-text-primary)}.dimension-btn.selected,.dimension-btn:hover{border:1px solid var(--color-primary);color:var(--color-primary)}.dimension-btn.selected .ratio-box,.dimension-btn:hover .ratio-box{border-color:var(--color-primary)}.ratio-box{display:block;background:var(--color-white);border:1px solid var(--border-gray-400);border-radius:var(--radius-xs);padding:var(--spacing-1)}.ratio-box-horizontal{height:16px}.ratio-box-vertical{width:14px}.ratio-box-inner{display:block;width:100%;height:100%;background:var(--border-gray-100)}.drag-upload-area{font-size:14px;display:flex;border:2px dashed var(--border-gray-200);border-radius:var(--radius-md);padding:15px 10px;text-align:center;color:var(--color-text-gray);cursor:pointer;transition:border-color .2s;background:#fff;margin-bottom:8px;flex-direction:column;align-items:center}[id^=imgPreviewInUpload]{width:120px}.drag-upload-area-img{display:block;width:100%;height:auto;margin-top:var(--spacing-6)}.drag-upload-area:hover{border-color:var(--border-gray-400)}.drag-upload-area.dragover{border-color:var(--color-primary);background:var(--border-gray-100);color:var(--color-primary)}.drag-upload-area-icon{width:30px;height:30px;fill:var(--color-text-gray);color:var(--color-text-gray)}.ai-image-generator-preview img{width:100%;max-width:100%;height:auto;border-radius:6px;border:1px solid var(--border-gray-100)}.generate-btn:disabled{cursor:not-allowed;opacity:.7}.generate-btn.is-loading,.start-btn.is-loading{pointer-events:none;padding-left:36px}.start-btn.is-loading{pointer-events:auto!important}.generate-btn.is-loading:after,.start-btn.is-loading:after{content:"";display:block;position:absolute;--color-loading-bg: rgba(255,255,255,.2);--color-loading-top:var(--color-white);left:30px;width:14px;height:14px;border:3px solid var(--color-loading-bg);border-radius:50%;border-top:3px solid var(--color-loading-top);animation:spin .8s linear infinite}.ai-image-generator-preview .color-text{font-weight:600;background:var(--gradient-6);color:transparent;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.ai-image-generator-preview img{cursor:pointer;transition:transform .3s ease}.ai-image-generator-preview img:hover{transform:scale(1.02)}.ai-image-generator-error-message{color:#e73838;font-size:12px;margin-top:8px;display:none;background-color:#fffffff2;padding:8px 12px;border-radius:4px;border:1px dashed #e73838;position:relative;z-index:100;width:100%;box-sizing:border-box;text-align:center;font-weight:500}.ai-image-generator-error-message.is-show{animation:errorSlideIn .3s ease-out}.ai-image-generator-error-message.is-hide{animation:errorSlideOut .3s ease-in forwards}.ai-image-generator-field-error{border-color:#e74c3c!important;background-color:#e74c3c0d}.ai-image-generator-error-shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97) both}.ai-image-loading{display:none}.ai-image-loading.is-loading:after{--color-loading-bg: var(--border-gray-100);--color-loading-top: var(--color-primary)}.loading-container{position:relative;min-height:120px;display:flex;align-items:center;justify-content:center}.ai-image-error{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#f00c;color:#fff;padding:10px;border-radius:4px;font-size:12px;text-align:center;z-index:100;max-width:80%}@media screen and (max-width:749px){.ai-image-generator{width:100%;height:100%;max-width:100%;max-height:100%;border-radius:0;padding:var(--spacing-4);overflow:auto;position:relative;z-index:9999999999}.generate-btn{position:fixed;bottom:0;left:0;border-radius:0}.ai-image-dimensions{grid-template-columns:repeat(4,1fr)}.ratio-box-horizontal{height:14px}.ratio-box-vertical{width:12px}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes errorSlideIn{0%{opacity:0;transform:translateY(-10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes errorSlideOut{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-10px) scale(.95);display:none}}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-3px,0,0)}40%,60%{transform:translate3d(3px,0,0)}}@keyframes gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.ai-leave-confirm-modal{display:none;position:fixed;z-index:10011;left:0;top:0;width:100vw;height:100vh;background:#0009;align-items:center;justify-content:center}.ai-leave-confirm-modal-content{background:var(--color-white);padding:var(--spacing-8);border-radius:var(--radius-lg);max-width:400px;width:90%;text-align:center;position:relative;box-shadow:0 10px 30px #0003}.ai-leave-confirm-close{position:absolute;top:16px;right:16px;background:none;border:none;font-size:24px;cursor:pointer;color:var(--color-text-gray)}.ai-leave-confirm-modal-content h3{margin-top:0;margin-bottom:var(--spacing-4);font-size:18px}.ai-leave-confirm-modal-content p{margin-bottom:var(--spacing-6);color:var(--color-text-gray)}.ai-leave-confirm-buttons{display:flex;gap:var(--spacing-4);justify-content:center}.ai-leave-confirm-buttons .btn{flex:1}.ai-generation-workspace{margin-top:16px}.ai-reference-summary{padding:14px;border:1px solid rgba(var(--color-foreground),.1);border-radius:14px;background:rgb(var(--color-background));box-shadow:0 4px 16px rgba(var(--color-foreground),.08)}.ai-reference-summary__heading{display:flex;align-items:center;gap:8px;margin-bottom:10px}.ai-reference-summary__heading h3{margin:0;font-size:1.35rem;font-weight:700}.ai-reference-summary__content{display:flex;align-items:center;gap:12px}.ai-reference-summary__image{width:64px;height:64px;flex:0 0 64px;border-radius:10px;background:rgba(var(--color-foreground),.05);object-fit:cover}.ai-reference-summary__details{display:flex;min-width:0;flex-direction:column;align-items:flex-start;gap:7px}.ai-reference-summary__details strong{color:#16a34a;font-size:1.2rem}.ai-reference-summary__change{padding:7px 14px;border:0;border-radius:7px;color:#a52c49;background:#fdf0f3;font:inherit;font-size:1.15rem;cursor:pointer}.ai-generation-workspace__privacy{margin:7px 0 12px;color:rgba(var(--color-foreground),.65);font-size:1.05rem;text-align:center}.ai-generation-workspace__generate{width:100%;min-height:50px;border:0;border-radius:11px;font-weight:700}.ai-generation-workspace__generate:disabled{cursor:not-allowed;opacity:.55}.ai-generation-progress{box-sizing:border-box;width:100%;height:12px;margin-top:8px;padding:2px;overflow:hidden;border:1px solid #5f75f6;border-radius:999px;background:#5f75f614}.ai-generation-progress[hidden]{display:none}.ai-generation-progress__value{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(135deg,#8257f5,#3f82f7);box-shadow:0 0 8px #5277f559;transition:width .65s ease-out}div.ai-generation-progress__value:empty{display:block}.ai-generation-results>h3{margin:14px 0 10px;font-size:1.45rem;font-weight:500;text-align:center}.ai-generation-results__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.ai-generation-result{overflow:hidden;border:2px solid transparent;border-radius:13px;background:rgb(var(--color-background));box-shadow:0 3px 14px rgba(var(--color-foreground),.09);transition:border-color .16s ease,box-shadow .16s ease}.ai-generation-result.is-selected{border-color:#5277f5;box-shadow:0 0 0 2px #5a6df629,0 8px 22px #546cf629}.ai-generation-result__select{position:relative;display:block;width:100%;padding:5px 5px 30px;border:0;background:transparent;cursor:pointer}.ai-generation-result__select img{display:block;width:100%;aspect-ratio:3 / 4;border-radius:9px;object-fit:cover}.ai-generation-result__state{position:absolute;display:inline-flex;bottom:6px;left:50%;padding:4px 10px;border-radius:999px;color:rgba(var(--color-foreground),.68);background:rgba(var(--color-foreground),.07);font-size:1rem;line-height:1.2;white-space:nowrap;transform:translate(-50%);align-items:center;justify-content:center;gap:3px}.ai-generation-result__state svg{display:block;flex:0 0 auto}.ai-generation-result.is-selected .ai-generation-result__state{color:#fff;background:linear-gradient(135deg,#8257f5,#3f82f7)}.ai-generation-result__actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:0 6px 7px}.ai-generation-result__actions button{min-height:34px;padding:5px;border:0;border-radius:7px;color:rgba(var(--color-foreground),.78);background:rgba(var(--color-foreground),.055);font:inherit;font-size:1.05rem;cursor:pointer}.ai-reference-summary__change:focus-visible,.ai-generation-workspace__generate:focus-visible,.ai-generation-result__select:focus-visible,.ai-generation-result__actions button:focus-visible{outline:2px solid rgb(var(--color-foreground));outline-offset:2px}@media screen and (min-width:750px){.ai-generation-results__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
/*# sourceMappingURL=/cdn/shop/t/8/assets/ai-image-generator.css.map */