:root{--bg-dark:#0a0a0c;--bg-card:#0f172aa6;--bg-card-hover:#1e293bbf;--border-color:#ffffff14;--border-color-active:#f306;--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-muted:#64748b;--primary-gradient:linear-gradient(135deg, #f30 0%, #b31c00 100%);--cyan-gradient:linear-gradient(135deg, #f60 0%, #f30 100%);--primary-color:#f30;--primary-color-hover:#cc2900;--danger-color:#ef4444;--danger-color-hover:#dc2626;--sans-font:"Plus Jakarta Sans", system-ui, -apple-system, sans-serif;--display-font:"Outfit", system-ui, -apple-system, sans-serif;--shadow-premium:0 20px 40px -15px #000000b3;--shadow-glow:0 0 30px #f303}*{box-sizing:border-box;margin:0;padding:0}body{color:var(--text-primary);font-family:var(--sans-font);-webkit-font-smoothing:antialiased;background:radial-gradient(circle at top,#1e0505 0%,#0a0a0c 100%);min-height:100vh;position:relative;overflow-x:hidden}.glow-bg{filter:blur(120px);opacity:.15;pointer-events:none;z-index:0;border-radius:50%;width:40vw;max-width:500px;height:40vw;max-height:500px;position:absolute}.glow-red{background:#f30;animation:15s ease-in-out infinite alternate floatGlow;top:-10%;left:10%}.glow-darkred{background:#900;animation:20s ease-in-out infinite alternate-reverse floatGlow;bottom:10%;right:10%}@keyframes floatGlow{0%{transform:translate(0)scale(1)}to{transform:translate(5%,10%)scale(1.1)}}#app{z-index:1;flex-direction:column;max-width:1400px;min-height:100vh;margin:0 auto;padding:0 24px;display:flex;position:relative}.app-header{border-bottom:1px solid var(--border-color);-webkit-backdrop-filter:blur(12px);padding:24px 0}.header-container{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}.logo-area{align-items:center;gap:12px;display:flex}.logo-icon{font-size:36px}.logo-text h1{font-family:var(--display-font);letter-spacing:-.5px;color:var(--text-primary);font-size:24px;font-weight:800;line-height:1}.logo-text p{letter-spacing:.5px;text-transform:uppercase;color:var(--text-secondary);margin-top:4px;font-size:11px;font-weight:500}.accent-text{background:var(--primary-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.badge-area{gap:10px;display:flex}.badge{font-family:var(--sans-font);border:1px solid var(--border-color);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:9999px;padding:6px 14px;font-size:12px;font-weight:600}.badge-private{color:#10b981;background:#10b9811a;border-color:#10b98133}.badge-free{color:#f60;background:#ff66001a;border-color:#f603}.main-content{flex-direction:column;flex:1;justify-content:center;padding:48px 0;display:flex}.view-panel{width:100%;animation:.4s cubic-bezier(.16,1,.3,1) forwards fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.hidden{display:none!important}.intro-box{text-align:center;max-width:700px;margin:0 auto 40px}.intro-box h2{font-family:var(--display-font);letter-spacing:-.5px;margin-bottom:16px;font-size:38px;font-weight:700;line-height:1.2}.intro-box p{color:var(--text-secondary);font-size:16px;line-height:1.6}.drop-zone{background:var(--bg-card);text-align:center;cursor:pointer;-webkit-backdrop-filter:blur(16px);max-width:800px;box-shadow:var(--shadow-premium);border:2px dashed #ffffff26;border-radius:24px;margin:0 auto 48px;padding:60px 40px;transition:all .3s cubic-bezier(.25,.8,.25,1);position:relative;overflow:hidden}.drop-zone:hover,.drop-zone.dragover{border-color:var(--primary-color);background:var(--bg-card-hover);box-shadow:var(--shadow-glow);transform:translateY(-2px)}.drop-zone.dragover:after{content:"";pointer-events:none;background:#ff33000d;position:absolute;inset:0}.file-input-hidden{display:none}.upload-icon-wrapper{width:96px;height:96px;color:var(--text-secondary);border:1px solid var(--border-color);background:#ffffff08;border-radius:50%;justify-content:center;align-items:center;margin:0 auto 24px;transition:all .3s;display:flex}.drop-zone:hover .upload-icon-wrapper{color:var(--primary-color);border-color:var(--border-color-active);background:#ff33001a;transform:scale(1.05)}.drop-zone h3{font-family:var(--display-font);margin-bottom:8px;font-size:22px;font-weight:600}.drop-zone .subtext{color:var(--text-secondary);margin-bottom:24px;font-size:14px}.drop-zone .format-info{color:var(--text-muted);font-size:12px}.samples-section{text-align:center;max-width:800px;margin:0 auto}.samples-section h4{color:var(--text-secondary);margin-bottom:16px;font-size:14px;font-weight:500}.samples-grid{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}.sample-card{aspect-ratio:1;cursor:pointer;border:1px solid var(--border-color);border-radius:16px;transition:all .3s;position:relative;overflow:hidden}.sample-card img{object-fit:cover;width:100%;height:100%;transition:transform .3s}.sample-overlay{opacity:0;background:#07090e99;justify-content:center;align-items:center;transition:opacity .3s;display:flex;position:absolute;inset:0}.sample-overlay span{color:var(--text-primary);background:#ff3300d9;border-radius:9999px;padding:6px 14px;font-size:12px;font-weight:600;transition:transform .3s;transform:translateY(10px)}.sample-card:hover{border-color:var(--primary-color);transform:translateY(-4px);box-shadow:0 10px 20px -10px #f306}.sample-card:hover img{transform:scale(1.05)}.sample-card:hover .sample-overlay{opacity:1}.sample-card:hover .sample-overlay span{transform:translateY(0)}.btn{font-family:var(--sans-font);cursor:pointer;border:none;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:12px 24px;font-size:14px;font-weight:600;transition:all .2s cubic-bezier(.2,.8,.2,1);display:inline-flex}.btn-primary{background:var(--primary-gradient);color:#fff;box-shadow:0 4px 14px #f306}.btn-primary:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 6px 20px #f309}.btn-primary:active{transform:translateY(0)}.btn-secondary{color:var(--text-primary);border:1px solid var(--border-color);background:#ffffff0d}.btn-secondary:hover{background:#ffffff14;border-color:#ffffff26}.btn-danger{color:var(--danger-color);background:#ef44441a;border:1px solid #ef444433}.btn-danger:hover{background:var(--danger-color);color:#fff;border-color:var(--danger-color);box-shadow:0 4px 14px #ef444466}.btn-full{width:100%}.btn-upload{padding:14px 32px;font-size:15px}.workspace-grid{grid-template-columns:1.3fr 1fr;align-items:start;gap:32px;max-width:1200px;margin:0 auto;display:grid}@media (width<=968px){.workspace-grid{grid-template-columns:1fr;gap:24px}}.workspace-left{background:var(--bg-card);border:1px solid var(--border-color);-webkit-backdrop-filter:blur(16px);aspect-ratio:4/3;box-shadow:var(--shadow-premium);border-radius:24px;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}@media (width<=480px){.workspace-left{aspect-ratio:1}}.loading-overlay{-webkit-backdrop-filter:blur(12px);z-index:10;text-align:center;background:#07090ed9;justify-content:center;align-items:center;padding:32px;display:flex;position:absolute;inset:0}.loader-content{flex-direction:column;align-items:center;width:100%;max-width:400px;display:flex}.spinner{border:3px solid #ff330026;border-top-color:var(--primary-color);border-radius:50%;width:50px;height:50px;margin-bottom:24px;animation:1s linear infinite spin;box-shadow:0 0 20px #f303}@keyframes spin{to{transform:rotate(360deg)}}.loader-content h3{font-family:var(--display-font);margin-bottom:8px;font-size:20px}.loader-content p{color:var(--text-secondary);margin-bottom:24px;font-size:13px}.progress-bar-container{background:#ffffff0d;border-radius:9999px;width:100%;height:6px;margin-bottom:8px;overflow:hidden}.progress-bar{background:var(--primary-gradient);border-radius:9999px;height:100%;transition:width .3s;box-shadow:0 0 10px #ff330080}.progress-percent{color:var(--primary-color);font-size:13px;font-weight:700}.slider-wrapper{justify-content:center;align-items:center;width:100%;height:100%;padding:24px;display:flex}.slider-container{-webkit-user-select:none;user-select:none;border-radius:16px;justify-content:center;align-items:center;width:100%;height:100%;max-height:100%;display:flex;position:relative;overflow:hidden}.image-layer{background-position:50%;background-repeat:no-repeat;background-size:cover;justify-content:center;align-items:center;width:100%;height:100%;transition:background-color .2s,background-image .2s;display:flex;position:absolute;top:0;left:0}.bg-layer{z-index:1}.fg-layer{z-index:2;clip-path:polygon(0 0,50% 0,50% 100%,0 100%);pointer-events:none}.slider-image{object-fit:contain;width:auto;max-width:100%;height:auto;max-height:100%;display:block}.checkerboard{background-color:#12141c;background-image:linear-gradient(45deg,#1d202e 25%,#0000 25%),linear-gradient(-45deg,#1d202e 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#1d202e 75%),linear-gradient(-45deg,#0000 75%,#1d202e 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px}.slider-divider{z-index:3;cursor:ew-resize;background:#fff6;justify-content:center;align-items:center;width:2px;display:flex;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%);box-shadow:0 0 10px #00000080}.slider-handle-btn{background:var(--text-primary);width:38px;height:38px;color:var(--bg-dark);border-radius:50%;justify-content:center;align-items:center;transition:transform .1s;display:flex;box-shadow:0 4px 10px #0000004d,0 0 0 4px #fff3}.slider-divider:hover .slider-handle-btn,.slider-container:active .slider-handle-btn{background:var(--primary-color);color:#fff;transform:scale(1.1);box-shadow:0 4px 15px #ff330080,0 0 0 4px #ff33004d}.slider-badge{text-transform:uppercase;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:4;border-radius:6px;padding:4px 10px;font-size:11px;font-weight:700;position:absolute;bottom:16px}.original-badge{background:#07090e99;border:1px solid #ffffff1a;left:16px}.processed-badge{color:#f86;background:#ff330040;border:1px solid #f306;right:16px}.control-card{background:var(--bg-card);border:1px solid var(--border-color);-webkit-backdrop-filter:blur(16px);box-shadow:var(--shadow-premium);border-radius:24px;padding:32px}.control-card h3{font-family:var(--display-font);margin-bottom:8px;font-size:22px;font-weight:600}.control-description{color:var(--text-secondary);margin-bottom:24px;font-size:14px;line-height:1.5}.tab-selectors{border:1px solid var(--border-color);background:#ffffff08;border-radius:14px;margin-bottom:24px;padding:4px;display:flex}.tab-btn{color:var(--text-secondary);font-family:var(--sans-font);cursor:pointer;background:0 0;border:none;border-radius:10px;flex:1;padding:10px 0;font-size:13px;font-weight:600;transition:all .2s}.tab-btn:hover{color:var(--text-primary)}.tab-btn.active{color:var(--text-primary);background:#ffffff14;box-shadow:0 2px 8px #0003}.tab-panel{min-height:120px;animation:.3s forwards fadeInPanel;display:none}.tab-panel.active{display:block}@keyframes fadeInPanel{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.section-label{text-transform:uppercase;color:var(--text-muted);letter-spacing:.5px;margin-bottom:12px;font-size:12px;font-weight:600;display:block}.info-alert{background:#ff33000d;border:1px dashed #f303;border-radius:12px;align-items:flex-start;gap:12px;padding:16px;display:flex}.info-icon{font-size:18px}.info-alert p{color:var(--text-secondary);font-size:13px;line-height:1.5}.color-palette{grid-template-columns:repeat(8,1fr);gap:8px;margin-bottom:20px;display:grid}.color-swatch{aspect-ratio:1;cursor:pointer;border:2px solid #0000;border-radius:50%;transition:transform .2s,border-color .2s;position:relative;box-shadow:inset 0 0 0 1px #0000001a,0 2px 4px #0003}.color-swatch:hover{transform:scale(1.1)}.color-swatch.active{border-color:var(--primary-color);transform:scale(1.15)}.custom-color-picker{border-top:1px solid var(--border-color);align-items:center;gap:12px;padding-top:12px;display:flex}.picker-label{color:var(--text-secondary);font-size:13px;font-weight:500}.color-input-wrapper{border:1px solid var(--border-color);background:#ffffff08;border-radius:8px;align-items:center;gap:8px;padding:6px 12px;display:flex}.color-input-wrapper input[type=color]{-webkit-appearance:none;cursor:pointer;background:0 0;border:none;border-radius:4px;width:24px;height:24px}.color-input-wrapper input[type=color]::-webkit-color-swatch-wrapper{padding:0}.color-input-wrapper input[type=color]::-webkit-color-swatch{border:1px solid #ffffff1a;border-radius:4px}.hex-text{color:var(--text-secondary);font-family:monospace;font-size:13px}.bg-images-grid{grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px;display:grid}.bg-image-swatch{border:1px solid var(--border-color);cursor:pointer;background:#ffffff05;border-radius:12px;flex-direction:column;padding:4px;transition:all .2s;display:flex;overflow:hidden}.bg-image-swatch img{aspect-ratio:1.4;object-fit:cover;border-radius:8px;width:100%;margin-bottom:6px}.bg-image-swatch span{color:var(--text-secondary);padding:2px 0 4px;font-size:11px;font-weight:600}.bg-image-swatch:hover{background:#ffffff0d;border-color:#ffffff26}.bg-image-swatch.active{border-color:var(--primary-color);background:#ff33000d}.bg-image-swatch.active span{color:var(--primary-color)}.custom-bg-upload{border-top:1px solid var(--border-color);padding-top:16px}.action-buttons-group{border-top:1px solid var(--border-color);flex-direction:column;gap:12px;margin-top:32px;padding-top:24px;display:flex}.features-section{border-top:1px solid var(--border-color);padding:40px 0 60px}.features-container{grid-template-columns:repeat(3,1fr);gap:24px;display:grid}@media (width<=768px){.features-container{grid-template-columns:1fr;gap:16px}}.feature-card{border:1px solid var(--border-color);background:#ffffff05;border-radius:20px;padding:28px;transition:all .3s}.feature-card:hover{background:#ffffff0a;transform:translateY(-2px)}.feature-icon{margin-bottom:16px;font-size:28px;display:block}.feature-card h3{font-family:var(--display-font);margin-bottom:10px;font-size:18px;font-weight:600}.feature-card p{color:var(--text-secondary);font-size:13px;line-height:1.6}.toast{color:#fff;z-index:100;background:#1e293b;border:1px solid #ffffff1a;border-radius:12px;align-items:center;gap:8px;padding:12px 24px;font-size:14px;font-weight:600;transition:transform .3s cubic-bezier(.175,.885,.32,1.275);display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%)translateY(100px);box-shadow:0 10px 30px #00000080}.toast.show{transform:translate(-50%)translateY(0)}.toast.error{color:#fca5a5;background:#7f1d1d;border-color:#ef44444d}.app-footer{border-top:1px solid var(--border-color);color:var(--text-muted);margin-top:auto;padding:32px 0;font-size:13px}.footer-container{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}.footer-links a{color:var(--text-secondary);text-decoration:none;transition:color .2s}.footer-links a:hover{color:var(--primary-color)}@media (width<=600px){.footer-container{text-align:center;flex-direction:column}}.logo-img{object-fit:contain;background:#fff;border-radius:6px;width:auto;height:38px;padding:2px}