.generator{--primary:#e9c894;--primary-dark:#c3a778;--primary-light:#f4deb6;--primary-ultra-light:rgba(233,200,148,0.05);--bg-dark:#0f1115;--panel-bg:rgba(23,25,32,0.95);--panel-border:rgba(255,255,255,0.08);--text-primary:#ffffff;--text-secondary:rgba(255,255,255,0.75);--text-tertiary:rgba(255,255,255,0.5);--accent-success:#78c4a6;--accent-warning:#e9c894;--accent-error:#e47878;--input-bg:#1a1c21;--input-border:#2a2e36;--btn-primary:#ffa41c;--btn-secondary:#4caf50;--btn-accent:#9c59eb;--shadow-sm:0 4px 8px rgba(0,0,0,0.2);--shadow-md:0 8px 24px rgba(0,0,0,0.2);--shadow-soft:0 10px 30px rgba(0,0,0,0.25);--shadow-focus:0 0 0 3px rgba(233,200,148,0.2);--shadow-button:0 4px 12px rgba(233,200,148,0.2);--shadow-premium:0 15px 35px rgba(0,0,0,0.3),0 5px 15px rgba(0,0,0,0.2);--shadow-transition:0 20px 40px rgba(0,0,0,0.4),0 0 20px rgba(233,200,148,0.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,rgba(17,24,39,.95),rgba(17,24,39,.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)}.hero-section{background-image:linear-gradient(135deg,rgba(15,17,21,.7),rgba(23,25,32,.8)),url(https://images.unsplash.com/photo-1620336655055-088d06e36bf0?q=80&w=1000&auto=format&fit=crop);background-size:cover;background-position:50%;padding:var(--spacing-xxl) 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:320px;position:relative;z-index:10;box-shadow:var(--shadow-premium);border-bottom:1px solid rgba(255,255,255,.05)}.hero-subtitle{font-size:var(--font-size-lg);color:var(--text-secondary);margin-bottom:var(--spacing-md);font-weight:var(--font-weight-medium)}.hero-title{font-size:var(--font-size-3xl);font-weight:var(--font-weight-extrabold);margin-bottom:var(--spacing-lg);line-height:1.2;max-width:800px;background:linear-gradient(90deg,#fff,#e0e0e0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.02em}.hero-description{font-size:var(--font-size-lg);color:var(--text-secondary);margin-bottom:var(--spacing-xl);max-width:700px;line-height:1.6;font-weight:var(--font-weight-regular)}.feature-badges{display:flex;gap:var(--spacing-md);flex-wrap:wrap;justify-content:center;margin-bottom:var(--spacing-xl)}.badge{padding:var(--spacing-xs) var(--spacing-md);border-radius:50px;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);display:flex;align-items:center;box-shadow:var(--shadow-sm);transition:all .3s ease}.badge:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(0,0,0,.2)}.badge-primary{background-color:var(--btn-primary);color:#fff}.badge-secondary{background-color:var(--btn-secondary);color:#fff}.badge-accent{background-color:var(--btn-accent);color:#fff}.badge i,.badge svg{margin-right:var(--spacing-xs)}.main-content{display:flex;justify-content:center;align-items:flex-start;padding:var(--spacing-xl) 20px;margin-top:40px;position:relative;z-index:5}.container{max-width:1200px;width:100%;gap:var(--spacing-xl);margin-top:-40px}.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);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(255,255,255,.1);color:var(--text-secondary)}.status-icon.success{background-color:rgba(120,196,166,.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(255,255,255,.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(255,255,255,.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;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(255,255,255,.07);border-radius:50%;margin-bottom:var(--spacing-lg);border:1px dashed rgba(255,255,255,.2);color:var(--text-secondary);font-size:24px;transition:all var(--transition)}.upload-area:hover .upload-icon{background-color:rgba(233,200,148,.1);border-color:rgba(233,200,148,.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:rgba(0,0,0,.6);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(228,120,120,.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(255,255,255,.3)}.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:#0d0e10;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,#f2d498,#d3b580);box-shadow:0 6px 16px rgba(233,200,148,.3)}.btn-content{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);z-index:2}.lightning{color:#0d0e10;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:rgba(0,0,0,.15);border-radius:50%;font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);margin-left:var(--spacing-xs);color:#0d0e10;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(255,255,255,.1)}.output-area:hover{border-color:rgba(255,255,255,.2);background-color:rgba(255,255,255,.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:#1c2026;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%;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:rgba(0,0,0,.6);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(228,120,120,.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:rgba(20,22,26,.7);border:1px solid rgba(255,255,255,.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:rgba(40,44,52,.8);border-color:rgba(255,255,255,.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:rgba(15,17,21,.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(255,255,255,.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,.2)}.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(233,200,148,.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}.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)}}