.generator{--primary:#e67e22;--primary-dark:#d35400;--primary-light:#f39c12;--primary-ultra-light:rgba(230,126,34,.1);--bg-dark:#f9f9f9;--panel-bg:hsla(0,0%,100%,.95);--panel-border:rgba(0,0,0,.08);--text-primary:#333;--text-secondary:rgba(51,51,51,.75);--text-tertiary:rgba(51,51,51,.5);--accent-success:#27ae60;--accent-warning:#e67e22;--accent-error:#e74c3c;--input-bg:#fff;--input-border:#e0e0e0;--btn-primary:#e67e22;--btn-secondary:#2ecc71;--btn-accent:#9b59b6;--shadow-sm:0 2px 6px rgba(0,0,0,.1);--shadow-md:0 4px 12px rgba(0,0,0,.1);--shadow-soft:0 6px 18px rgba(0,0,0,.15);--shadow-focus:0 0 0 3px rgba(230,126,34,.2);--shadow-button:0 4px 12px rgba(230,126,34,.2);--shadow-premium:0 8px 24px rgba(0,0,0,.1),0 4px 12px rgba(0,0,0,.08);--shadow-transition:0 10px 30px rgba(0,0,0,.15),0 0 10px rgba(230,126,34,.1);--transition:0.2s ease;--border-radius-sm:8px;--border-radius-md:12px;--border-radius-lg:16px;--spacing-xs:8px;--spacing-sm:12px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--spacing-xxl:48px;--font-family:"Inter",-apple-system,sans-serif;--font-size-xs:12px;--font-size-sm:14px;--font-size-md:16px;--font-size-lg:18px;--font-size-xl:24px;--font-size-2xl:36px;--font-size-3xl:48px;--font-size-4xl:64px;--font-weight-light:300;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;background-color:var(--bg-dark);color:var(--text-primary);min-height:100vh;display:flex;flex-direction:column;padding:0;background-image:linear-gradient(135deg,hsla(0,0%,98%,.95),hsla(0,0%,98%,.95));background-size:cover;background-position:50%;font-size:var(--font-size-md);line-height:1.5}.generator *{margin:0;padding:0;box-sizing:border-box;font-family:var(--font-family);-webkit-font-smoothing:antialiased;transition:var(--transition)}.main-content{display:flex;justify-content:center;align-items:flex-start;padding:var(--spacing-xl) 20px;margin-top:40px;position:relative;z-index:5}.action-figure-container{max-width:1200px;width:100%;gap:var(--spacing-xl);margin-top:-40px}.action-figure-container,.panel{display:flex;min-height:600px;position:relative}.panel{flex:1;background-color:var(--panel-bg);padding:var(--spacing-xl);border-radius:var(--border-radius-lg);flex-direction:column;border:1px solid var(--panel-border);box-shadow:var(--shadow-premium);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.panel:hover{box-shadow:var(--shadow-transition);transform:translateY(-4px)}.panel:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(to right,var(--primary-dark),var(--primary),var(--primary-light));border-radius:var(--border-radius-lg) var(--border-radius-lg) 0 0;opacity:.6;transition:opacity .3s ease}.panel:hover:before{opacity:1}.panel-left{justify-content:space-between}.panel-right{justify-content:flex-start}.panel-header{margin-bottom:var(--spacing-xl)}.generator .panel-title{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-sm);background:linear-gradient(to right,var(--text-primary),var(--text-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;position:relative;display:inline-block;letter-spacing:-.01em}.generator .panel-title:after{content:"";position:absolute;bottom:-3px;left:0;width:0;height:2px;background:linear-gradient(to right,var(--primary),transparent);transition:width var(--transition)}.panel:hover .panel-title:after{width:100%}.subtitle{color:var(--text-secondary);font-size:var(--font-size-lg);font-weight:var(--font-weight-regular)}.section-title{margin-bottom:var(--spacing-md);font-size:var(--font-size-md);font-weight:var(--font-weight-medium);color:var(--text-secondary)}.section-title,.status-icon{display:flex;align-items:center}.status-icon{margin-left:var(--spacing-xs);width:20px;height:20px;justify-content:center;font-size:var(--font-size-xs);border-radius:50%}.status-icon.pending{background-color:rgba(0,0,0,.05);color:var(--text-secondary)}.status-icon.success{background-color:rgba(39,174,96,.2);color:var(--accent-success)}.upload-section{position:relative;margin-bottom:var(--spacing-xl)}.upload-title{display:flex;align-items:center;margin-bottom:var(--spacing-md);font-size:var(--font-size-md);font-weight:var(--font-weight-medium);color:var(--text-secondary);position:relative}.upload-title:before{content:"";position:absolute;bottom:-4px;left:0;width:0;height:1px;background-color:var(--primary);transition:width var(--transition)}.upload-section:hover .upload-title:before{width:30px}.upload-container{height:auto}.upload-area,.upload-container{position:relative;min-height:100px}.upload-area{border:2px dashed rgba(0,0,0,.15);border-radius:var(--border-radius-md);padding:var(--spacing-lg);display:flex;justify-content:center;align-items:center;overflow:hidden;cursor:pointer;background-color:rgba(0,0,0,.02);height:250px;max-height:400px;box-shadow:var(--shadow-sm);transition:all var(--transition)}.upload-area.has-image{height:auto;padding:var(--spacing-md);border-color:var(--primary-dark);border-style:solid}.upload-area:hover{border-color:var(--primary);background-color:var(--primary-ultra-light);transform:translateY(-5px);box-shadow:var(--shadow-md)}.upload-area img{max-width:100%;max-height:350px;-o-object-fit:contain;object-fit:contain;border-radius:var(--border-radius-sm);box-shadow:var(--shadow-sm);transition:all var(--transition)}.upload-area:hover img{box-shadow:var(--shadow-md)}.upload-placeholder{position:absolute;width:100%;height:100%;flex-direction:column;text-align:center;padding:var(--spacing-lg);line-height:1.5}.upload-icon,.upload-placeholder{display:flex;justify-content:center;align-items:center}.upload-icon{width:64px;height:64px;background-color:rgba(0,0,0,.05);border-radius:50%;margin-bottom:var(--spacing-lg);border:1px dashed rgba(0,0,0,.15);color:var(--text-secondary);font-size:24px;transition:all var(--transition)}.upload-area:hover .upload-icon{background-color:rgba(230,126,34,.1);border-color:rgba(230,126,34,.3);color:var(--primary);transform:scale(1.05)}.upload-text{font-size:var(--font-size-md);font-weight:var(--font-weight-medium);color:var(--text-secondary);margin-bottom:var(--spacing-xs);transition:all var(--transition)}.upload-area:hover .upload-text{color:var(--text-primary)}.upload-subtext{font-size:var(--font-size-sm);color:var(--text-tertiary);font-weight:var(--font-weight-light);transition:all var(--transition)}.upload-area:hover .upload-subtext{color:var(--text-secondary)}.close-btn{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);background-color:hsla(0,0%,100%,.8);color:var(--text-primary);border:none;border-radius:50%;width:28px;height:28px;display:flex;justify-content:center;align-items:center;cursor:pointer;z-index:10;font-size:18px;line-height:1;opacity:.8;transition:all var(--transition)}.close-btn:hover{background-color:rgba(231,76,60,.8);transform:rotate(90deg);opacity:1}.customize-field{margin-bottom:var(--spacing-md);position:relative}.customize-label{display:flex;align-items:center;color:var(--text-secondary);font-size:var(--font-size-md);margin-bottom:var(--spacing-xs);font-weight:var(--font-weight-medium)}.customize-label .icon{margin-left:var(--spacing-xs);font-size:var(--font-size-sm);color:var(--text-tertiary);cursor:pointer;transition:color var(--transition)}.customize-input,.customize-label .icon:hover{color:var(--text-primary)}.customize-input{width:100%;background-color:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--border-radius-sm);padding:var(--spacing-sm);font-size:var(--font-size-md);transition:all var(--transition)}.customize-input:focus{outline:none;border-color:var(--primary);box-shadow:var(--shadow-focus)}.customize-input:hover{border-color:rgba(0,0,0,.3)}.customize-input::-moz-placeholder{color:var(--text-tertiary)}.customize-input::placeholder{color:var(--text-tertiary)}.customize-helper{font-size:var(--font-size-sm);color:var(--text-tertiary);margin-top:var(--spacing-xs);font-style:italic}.generate-btn{background:linear-gradient(to bottom,var(--primary),var(--primary-dark));color:#fff;border:none;border-radius:var(--border-radius-md);padding:var(--spacing-md) var(--spacing-lg);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);cursor:pointer;display:flex;justify-content:center;align-items:center;position:relative;box-shadow:var(--shadow-button);margin-top:var(--spacing-md);transition:all var(--transition)}.generate-btn:hover{transform:translateY(-4px);background:linear-gradient(180deg,#f39c12,#e67e22);box-shadow:0 6px 16px rgba(230,126,34,.3)}.btn-content{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);z-index:2}.lightning{color:#fff;font-size:17px;transition:transform var(--transition)}.generate-btn:hover .lightning{transform:scale(1.2) rotate(10deg)}.credits{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background-color:hsla(0,0%,100%,.3);border-radius:50%;font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);margin-left:var(--spacing-xs);color:#fff;transition:transform var(--transition)}.generate-btn:hover .credits{transform:scale(1.1)}.output-container{flex:1;flex-direction:column}.output-area,.output-container{display:flex;position:relative;min-height:400px}.output-area{flex:1;width:100%;justify-content:center;align-items:center;color:var(--text-tertiary);text-align:center;border-radius:var(--border-radius-md);overflow:hidden;transition:all var(--transition);border:1px dashed rgba(0,0,0,.1)}.output-area:hover{border-color:rgba(0,0,0,.2);background-color:rgba(0,0,0,.02)}.output-placeholder{padding:var(--spacing-lg);font-size:var(--font-size-md);font-weight:var(--font-weight-light);line-height:1.5;max-width:300px;display:flex;flex-direction:column;align-items:center;justify-content:center}.output-placeholder .icon{font-size:32px;margin-bottom:var(--spacing-lg);opacity:.5}.generated-image-container{position:relative;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;min-height:400px}.generated-image-wrapper{flex:1;position:relative;border-radius:var(--border-radius-md);overflow:hidden;background-color:#f0f0f0;box-shadow:var(--shadow-md);min-height:350px;transition:all var(--transition)}.generated-image-wrapper:hover{box-shadow:var(--shadow-soft);transform:scale(1.01)}.generated-image{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;border-radius:var(--border-radius-md);transition:all var(--transition)}.close-generated{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);background-color:hsla(0,0%,100%,.8);color:var(--text-primary);border:none;border-radius:50%;width:28px;height:28px;display:flex;justify-content:center;align-items:center;cursor:pointer;z-index:10;font-size:18px;transition:all var(--transition);opacity:.7}.close-generated:hover{background-color:rgba(231,76,60,.8);transform:rotate(90deg);opacity:1}.image-actions{display:flex;margin-top:var(--spacing-md)}.image-action-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);background-color:hsla(0,0%,100%,.7);border:1px solid rgba(0,0,0,.1);color:var(--text-secondary);padding:var(--spacing-md);border-radius:var(--border-radius-md);font-size:var(--font-size-md);font-weight:var(--font-weight-medium);cursor:pointer;box-shadow:var(--shadow-sm);transition:all var(--transition)}.image-action-btn:hover{background-color:hsla(0,0%,100%,.9);border-color:rgba(0,0,0,.2);color:var(--text-primary);transform:translateY(-3px);box-shadow:var(--shadow-md)}.image-action-btn i,.image-action-btn svg{font-size:var(--font-size-md);transition:transform var(--transition)}.image-action-btn:hover i,.image-action-btn:hover svg{transform:scale(1.1)}.generation-container{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:hsla(0,0%,100%,.95);z-index:10;border-radius:var(--border-radius-md);text-align:center;padding:var(--spacing-lg)}.progress-bar-container{width:80%;max-width:300px;height:6px;background-color:rgba(0,0,0,.08);border-radius:10px;margin:var(--spacing-xl) 0 var(--spacing-lg);position:relative;overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.1)}.progress-bar{height:100%;width:0;border-radius:10px;position:relative;background:linear-gradient(to right,var(--primary-dark),var(--primary),var(--primary-light));transition:width .5s ease;box-shadow:0 0 8px var(--primary-dark)}.generation-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--text-primary);margin-bottom:var(--spacing-sm);position:relative}.generation-message{color:var(--text-secondary);margin-bottom:var(--spacing-xs);font-size:var(--font-size-md);opacity:.9}.caution-text,.generation-message{line-height:1.5;font-weight:var(--font-weight-light)}.caution-text{margin-top:var(--spacing-sm);color:var(--text-tertiary);font-size:var(--font-size-sm);max-width:320px}.progress-percentage{position:absolute;right:-30px;top:50%;transform:translateY(-50%);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--text-primary)}.browse-text{color:var(--primary-light);cursor:pointer;font-weight:var(--font-weight-medium);position:relative;transition:all var(--transition)}.browse-text:hover{color:var(--primary);text-decoration:underline}.processing-icon{width:80px;height:80px;position:relative;margin-bottom:var(--spacing-xl)}.spinner{width:40px;height:40px;border:3px solid rgba(230,126,34,.05);border-top:3px solid var(--primary);border-radius:50%;margin:0 auto var(--spacing-md);animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@media (max-width:900px){.generator{--font-size-xs:11px;--font-size-sm:13px;--font-size-md:15px;--font-size-lg:17px;--font-size-xl:22px;--font-size-2xl:28px;--font-size-3xl:36px}.hero-title{font-size:var(--font-size-2xl)}.feature-badges{flex-direction:column;align-items:center}.action-figure-container{flex-direction:column;height:auto;min-height:auto;gap:var(--spacing-md);margin-top:0}.panel{padding:var(--spacing-lg);min-height:auto}.panel-left{order:1;min-height:500px}.panel-right{order:2;min-height:500px}.generator.panel-title{font-size:var(--font-size-xl)}.subtitle{font-size:var(--font-size-md)}.panel-header{margin-bottom:var(--spacing-md)}.upload-area{height:220px;padding:var(--spacing-md)}.upload-section{margin-bottom:var(--spacing-xl)}.generated-image-wrapper,.output-area{min-height:350px}.customize-input,.customize-label{font-size:var(--font-size-sm)}.generate-btn{font-size:var(--font-size-md)}}@media (max-width:480px){.generator{--font-size-xs:10px;--font-size-sm:12px;--font-size-md:14px;--font-size-lg:16px;--font-size-xl:20px;--font-size-2xl:24px;--font-size-3xl:28px}.hero-title{font-size:var(--font-size-xl);margin-bottom:var(--spacing-md)}.hero-subtitle{font-size:var(--font-size-md);margin-bottom:var(--spacing-sm)}.hero-description{font-size:var(--font-size-sm);margin-bottom:var(--spacing-lg)}.hero-section{padding:var(--spacing-xl) 15px;min-height:280px}.badge{font-size:var(--font-size-xs);padding:6px 12px}.generator{padding:0}.main-content{padding:12px}.panel{padding:var(--spacing-md);min-height:450px}.generator .panel-title{font-size:var(--font-size-lg)}.subtitle{font-size:var(--font-size-sm)}.panel-header{margin-bottom:var(--spacing-sm)}.upload-area{height:180px}.upload-area,.upload-area.has-image{padding:var(--spacing-sm)}.upload-icon{width:48px;height:48px;font-size:20px;margin-bottom:var(--spacing-sm)}.upload-text{font-size:var(--font-size-sm)}.customize-title,.upload-subtext,.upload-title{font-size:var(--font-size-xs)}.generate-btn{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-sm);margin-top:var(--spacing-sm)}.generation-title{font-size:var(--font-size-md)}.generation-message{font-size:var(--font-size-sm)}.upload-section{margin-bottom:var(--spacing-lg)}.generated-image-wrapper,.output-area{min-height:300px}.customize-field{margin-bottom:var(--spacing-sm)}.customize-input,.customize-label{font-size:var(--font-size-xs)}.customize-input{padding:8px}.customize-helper{font-size:var(--font-size-xs)}}