:root{--bg-dark:#0b0f19;--card-bg:#11182799;--border-color:#ffffff14;--text-primary:#f3f4f6;--text-secondary:#9ca3af;--primary-grad:linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);--primary-color:#8b5cf6;--primary-hover:#7c3aed;--btn-secondary-bg:#ffffff0f;--btn-secondary-hover:#ffffff1f;--font-display:"Outfit", "Inter", system-ui, -apple-system, sans-serif;--font-body:"Inter", system-ui, -apple-system, sans-serif;--shadow-premium:0 20px 40px -15px #00000080;--transition-smooth:all .3s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-dark);color:var(--text-primary);font-family:var(--font-body);min-height:100vh;position:relative;overflow-x:hidden}.bg-glow{filter:blur(140px);opacity:.15;z-index:-1;pointer-events:none;border-radius:50%;width:600px;height:600px;animation:20s ease-in-out infinite alternate drift;position:absolute}.blob-1{background:#8b5cf6;top:-100px;left:-100px}.blob-2{background:#ec4899;animation-delay:-5s;bottom:-100px;right:-100px}.blob-3{opacity:.08;background:#3b82f6;width:400px;height:400px;animation-delay:-10s;top:50%;left:45%}@keyframes drift{0%{transform:translate(0)scale(1)}to{transform:translate(80px,50px)scale(1.1)}}.glass-panel{background:var(--card-bg);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-color);box-shadow:var(--shadow-premium);border-radius:24px}.app-container{flex-direction:column;width:100%;min-height:100vh;display:flex}.app-header{border-bottom:1px solid var(--border-color);z-index:100;-webkit-backdrop-filter:blur(12px);background:#0b0f19b3;padding:1.25rem 2rem;position:sticky;top:0}.header-container{justify-content:space-between;align-items:center;width:100%;max-width:1200px;margin:0 auto;display:flex}.logo{cursor:pointer;align-items:center;gap:.75rem;display:flex}.logo-text{font-family:var(--font-display);letter-spacing:-.03em;background:var(--primary-grad);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:1.5rem;font-weight:800}.logo-text span{-webkit-text-fill-color:white}.nav-links{align-items:center;gap:2rem;display:flex}.nav-links a{color:var(--text-secondary);transition:var(--transition-smooth);font-weight:500;text-decoration:none}.nav-links a:hover{color:var(--text-primary)}.github-link{color:var(--text-secondary);transition:var(--transition-smooth);align-items:center;display:flex}.github-link:hover{color:#fff}.main-content{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:4rem 2rem}.hero-section{text-align:center;margin-bottom:4rem}.hero-title{font-family:var(--font-display);letter-spacing:-.04em;margin-bottom:1.5rem;font-size:3.5rem;font-weight:800;line-height:1.15}.hero-title span{background:var(--primary-grad);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.hero-subtitle{color:var(--text-secondary);max-width:700px;margin:0 auto;font-size:1.2rem;line-height:1.6}.work-container{flex-direction:column;justify-content:center;min-height:500px;margin-bottom:5rem;padding:2rem;display:flex}.upload-panel{justify-content:center;width:100%;display:flex}.drop-zone{text-align:center;cursor:pointer;width:100%;max-width:800px;transition:var(--transition-smooth);background:#8b5cf605;border:2px dashed #8b5cf64d;border-radius:20px;padding:4rem 2rem;position:relative}.drop-zone:hover,.drop-zone.dragover{border-color:var(--primary-color);background:#8b5cf60d;box-shadow:0 0 20px #8b5cf61a}.file-input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;top:0;left:0}.upload-icon{color:var(--primary-color);margin-bottom:1.5rem}.drop-zone h3{margin-bottom:.5rem;font-size:1.4rem;font-weight:600}.drop-zone p{color:var(--text-secondary);margin-bottom:1.5rem;font-size:.95rem}.btn{font-family:var(--font-body);cursor:pointer;transition:var(--transition-smooth);border:none;border-radius:12px;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;display:inline-flex}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--primary-grad);color:#fff}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px #8b5cf666}.btn-secondary{background:var(--btn-secondary-bg);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover:not(:disabled){background:var(--btn-secondary-hover);color:#fff}.btn-large{width:100%;padding:1rem 2rem;font-size:1.1rem}.btn-glow{position:relative}.btn-glow:after{content:"";background:var(--primary-grad);z-index:-1;filter:blur(12px);opacity:.5;transition:var(--transition-smooth);border-radius:12px;position:absolute;inset:0}.btn-glow:hover:not(:disabled):after{opacity:.8}.editor-panel{animation:.4s ease-out fadeIn}.editor-layout{grid-template-columns:1fr 340px;gap:2rem;display:grid}@media (width<=900px){.editor-layout{grid-template-columns:1fr}}.canvas-container{border:1px solid var(--border-color);background:#06080f;border-radius:16px;justify-content:center;align-items:center;min-height:400px;padding:1rem;display:flex;overflow:hidden}.canvas-wrapper{background-image:linear-gradient(90deg,#ffffff08 1px,#0000 1px),linear-gradient(#ffffff08 1px,#0000 1px);background-size:20px 20px;position:relative;box-shadow:0 10px 30px #00000080}#image-canvas{max-width:100%;max-height:60vh;display:block}#mask-canvas{cursor:crosshair;mix-blend-mode:normal;position:absolute;top:0;left:0}.controls-panel{flex-direction:column;gap:1.5rem;display:flex}.control-title{font-family:var(--font-display);font-size:1.4rem;font-weight:600}.control-group{flex-direction:column;gap:.75rem;display:flex}.control-label{color:var(--text-secondary);font-size:.9rem;font-weight:600}.brush-slider-wrapper{align-items:center;gap:1.25rem;display:flex}.slider{-webkit-appearance:none;background:#ffffff1a;border-radius:3px;outline:none;flex:1;height:6px}.slider::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;width:18px;height:18px;transition:var(--transition-smooth);box-shadow:0 0 10px var(--primary-color);background:#fff;border-radius:50%}.slider::-webkit-slider-thumb:hover{background:var(--primary-color);transform:scale(1.25)}.brush-preview{background:#ef4444b3;border:1px solid #fff;border-radius:50%;width:20px;height:20px;transition:width .1s,height .1s}.engine-selector{flex-direction:column;gap:.75rem;display:flex}.engine-opt{border:1px solid var(--border-color);cursor:pointer;transition:var(--transition-smooth);background:#ffffff05;border-radius:12px;padding:1rem}.engine-opt:hover{background:#8b5cf605;border-color:#8b5cf666}.engine-opt.active{border-color:var(--primary-color);background:#8b5cf614}.engine-title{margin-bottom:.25rem;font-size:.95rem;font-weight:600;display:block}.engine-opt.active .engine-title{color:#fff}.engine-desc{color:var(--text-secondary);font-size:.8rem}.actions-row{grid-template-columns:1fr 1fr;gap:.75rem;display:grid}.spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:20px;height:20px;animation:.8s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.btn-loader{justify-content:center;align-items:center;gap:.75rem;display:flex}.result-panel{animation:.4s ease-out fadeIn}.result-layout{grid-template-columns:1fr 340px;gap:2rem;display:grid}@media (width<=900px){.result-layout{grid-template-columns:1fr}}.slider-comparison{border:1px solid var(--border-color);-webkit-user-select:none;user-select:none;border-radius:16px;width:100%;min-height:400px;max-height:60vh;position:relative;overflow:hidden;box-shadow:0 10px 30px #00000080}.comparison-img{width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.comparison-img img{object-fit:contain;background:#06080f;width:100%;height:100%;display:block}.img-before{z-index:1}.img-after{z-index:2}.slider-bar{z-index:3;cursor:ew-resize;background:#fff;width:4px;position:absolute;top:0;bottom:0;left:50%;box-shadow:0 0 10px #00000080}.slider-button{width:40px;height:40px;color:var(--bg-dark);pointer-events:none;background:#fff;border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 4px 15px #0006}.result-controls{flex-direction:column;gap:1.5rem;display:flex}.control-desc{color:var(--text-secondary);font-size:.9rem;line-height:1.5}.result-buttons{flex-direction:column;gap:1rem;display:flex}.features-section{padding-top:4rem}.section-header{text-align:center;margin-bottom:3rem}.section-header h2{font-family:var(--font-display);margin-bottom:.5rem;font-size:2rem;font-weight:800}.section-header p{color:var(--text-secondary)}.features-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;display:grid}.feature-card{transition:var(--transition-smooth);padding:2.5rem 2rem}.feature-card:hover{border-color:#ffffff26;transform:translateY(-5px)}.feature-icon{border-radius:12px;justify-content:center;align-items:center;width:48px;height:48px;margin-bottom:1.5rem;display:flex}.bg-indigo{color:#a78bfa;background:#8b5cf626}.bg-pink{color:#f472b6;background:#ec489926}.bg-blue{color:#60a5fa;background:#3b82f626}.feature-card h3{margin-bottom:.75rem;font-size:1.25rem;font-weight:600}.feature-card p{color:var(--text-secondary);font-size:.95rem;line-height:1.5}.app-footer{border-top:1px solid var(--border-color);text-align:center;color:var(--text-secondary);padding:2rem;font-size:.9rem}.hidden{display:none!important}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.mode-tabs{justify-content:center;gap:1rem;margin-bottom:2rem;display:flex}.mode-tab{border:1px solid var(--border-color);color:var(--text-secondary);cursor:pointer;transition:var(--transition-smooth);background:#ffffff08;border-radius:50px;align-items:center;gap:.5rem;padding:.75rem 2rem;font-weight:600;display:flex}.mode-tab:hover{color:#fff;background:#ffffff14}.mode-tab.active{background:var(--primary-grad);color:#fff;border-color:#0000;box-shadow:0 4px 15px #8b5cf64d}.credits-badge-container{align-items:center;gap:.75rem;display:flex}.credits-badge{color:#f59e0b;transition:var(--transition-smooth);cursor:pointer;background:#f59e0b1a;border:1px solid #f59e0b40;border-radius:50px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.9rem;font-weight:700;display:inline-flex;box-shadow:0 4px 12px #f59e0b1a}.credits-badge:hover{background:#f59e0b2e;transform:translateY(-1px)}.credits-badge svg{animation:2s infinite pulse-coin}@keyframes pulse-coin{0%{transform:scale(1)}50%{filter:drop-shadow(0 0 4px #f59e0b);transform:scale(1.15)}to{transform:scale(1)}}.pro-badge{color:#f472b6;text-transform:uppercase;letter-spacing:.05em;background:linear-gradient(135deg,#ec489926 0%,#8b5cf626 100%);border:1px solid #8b5cf64d;font-size:.75rem}.batch-panel{flex-direction:column;gap:2rem;width:100%;animation:.4s ease-out fadeIn;display:flex}.batch-upload-wrapper{grid-template-columns:1fr 1fr;gap:2rem;display:grid}@media (width<=900px){.batch-upload-wrapper{grid-template-columns:1fr}}.batch-queue-container{flex-direction:column;gap:1rem;max-height:400px;padding-right:.5rem;display:flex;overflow-y:auto}.batch-queue-container::-webkit-scrollbar{width:6px}.batch-queue-container::-webkit-scrollbar-track{background:#ffffff05;border-radius:3px}.batch-queue-container::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}.batch-item{border:1px solid var(--border-color);transition:var(--transition-smooth);background:#ffffff05;border-radius:16px;justify-content:space-between;align-items:center;padding:1rem;display:flex}.batch-item:hover{background:#ffffff0a;border-color:#ffffff1f}.batch-item-info{align-items:center;gap:1rem;display:flex;overflow:hidden}.batch-item-thumbnail{object-fit:cover;border:1px solid #ffffff1a;border-radius:8px;width:50px;height:50px}.batch-item-text{flex-direction:column;display:flex;overflow:hidden}.batch-item-name{white-space:nowrap;text-overflow:ellipsis;color:var(--text-primary);font-size:.9rem;font-weight:600;overflow:hidden}.batch-item-size{color:var(--text-secondary);margin-top:.25rem;font-size:.75rem}.batch-item-status{align-items:center;gap:.5rem;font-size:.8rem;font-weight:600;display:flex}.status-queued{color:var(--text-secondary)}.status-processing{color:#3b82f6}.status-done{color:#10b981}.status-failed{color:#ef4444}.batch-item-remove{color:var(--text-secondary);cursor:pointer;transition:var(--transition-smooth);background:0 0;border:none;border-radius:6px;padding:.25rem}.batch-item-remove:hover{color:#ef4444;background:#ef44441a}.batch-controls{flex-direction:column;gap:1.5rem;display:flex}.batch-progress-wrapper{border:1px solid var(--border-color);background:#ffffff05;border-radius:16px;padding:1.5rem}.batch-progress-info{justify-content:space-between;margin-bottom:.75rem;font-size:.9rem;font-weight:600;display:flex}.batch-progress-bar-bg{background:#ffffff14;border-radius:4px;height:8px;overflow:hidden}.batch-progress-bar-fill{background:var(--primary-grad);border-radius:4px;height:100%;transition:width .3s}.modal-overlay{-webkit-backdrop-filter:blur(12px);z-index:1000;background:#030712cc;justify-content:center;align-items:center;padding:2rem;animation:.3s ease-out fadeInModal;display:flex;position:fixed;inset:0}@keyframes fadeInModal{0%{opacity:0}to{opacity:1}}.modal-container{flex-direction:column;width:100%;max-width:850px;max-height:90vh;animation:.4s cubic-bezier(.16,1,.3,1) slideUpModal;display:flex;overflow:hidden}@keyframes slideUpModal{0%{transform:translateY(20px)scale(.97)}to{transform:translateY(0)scale(1)}}.modal-header{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:1.5rem 2rem;display:flex}.modal-title{font-family:var(--font-display);background:var(--primary-grad);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:1.5rem;font-weight:800}.modal-close{color:var(--text-secondary);cursor:pointer;transition:var(--transition-smooth);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:.5rem;display:flex}.modal-close:hover{color:#fff;background:#ffffff0f}.modal-body{flex:1;padding:2rem;overflow-y:auto}.paywall-layout{grid-template-columns:1.2fr 1fr;gap:2.5rem;display:grid}@media (width<=768px){.paywall-layout{grid-template-columns:1fr}}.paywall-options{flex-direction:column;gap:1.25rem;display:flex}.paywall-card{border:2px solid var(--border-color);cursor:pointer;transition:var(--transition-smooth);background:#ffffff05;border-radius:18px;align-items:flex-start;gap:1rem;padding:1.25rem 1.5rem;display:flex;position:relative}.paywall-card:hover{background:#8b5cf605;border-color:#8b5cf666}.paywall-card.selected{border-color:var(--primary-color);background:#8b5cf614;box-shadow:0 0 15px #8b5cf626}.paywall-card-radio{border:2px solid var(--border-color);width:20px;height:20px;transition:var(--transition-smooth);border-radius:50%;justify-content:center;align-items:center;margin-top:.35rem;display:flex}.paywall-card.selected .paywall-card-radio{border-color:var(--primary-color)}.paywall-card.selected .paywall-card-radio:after{content:"";background:var(--primary-color);border-radius:50%;width:10px;height:10px}.paywall-card-details{flex:1}.paywall-card-title{align-items:center;gap:.5rem;font-size:1.05rem;font-weight:700;display:flex}.paywall-card-badge{color:#fff;text-transform:uppercase;background:#ec4899;border-radius:50px;padding:.15rem .5rem;font-size:.7rem;font-weight:700}.paywall-card-desc{color:var(--text-secondary);margin-top:.25rem;font-size:.85rem;line-height:1.4}.paywall-card-price{color:#fff;align-items:baseline;gap:.25rem;margin-top:.5rem;font-size:1.3rem;font-weight:800;display:flex}.paywall-card-price span{color:var(--text-secondary);font-size:.85rem;font-weight:500}.paywall-checkout{flex-direction:column;gap:1.5rem;display:flex}.cc-container{background:linear-gradient(135deg,#1e1b4b 0%,#311042 100%);border:1px solid #ffffff1a;border-radius:16px;flex-direction:column;justify-content:space-between;height:180px;padding:1.5rem;display:flex;position:relative;overflow:hidden;box-shadow:0 10px 25px #0006}.cc-chip{background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);border-radius:4px;width:35px;height:25px}.cc-number{letter-spacing:.08em;color:#fff;text-shadow:0 2px 4px #00000080;margin:1.5rem 0;font-family:Courier New,Courier,monospace;font-size:1.25rem;font-weight:700}.cc-row{justify-content:space-between;align-items:center;display:flex}.cc-holder-label,.cc-expires-label{text-transform:uppercase;color:#fff6;letter-spacing:.05em;margin-bottom:.15rem;font-size:.65rem}.cc-holder-val,.cc-expires-val{color:#fff;text-transform:uppercase;font-size:.85rem;font-weight:600}.cc-logo{color:#ffffffbf;font-size:1.1rem;font-style:italic;font-weight:900}.checkout-form{flex-direction:column;gap:1rem;display:flex}.form-row{grid-template-columns:1.2fr 1fr;gap:1rem;display:grid}.input-group{flex-direction:column;gap:.35rem;display:flex}.input-label{color:var(--text-secondary);text-transform:uppercase;font-size:.75rem;font-weight:700}.form-input{border:1px solid var(--border-color);color:#fff;font-family:var(--font-body);transition:var(--transition-smooth);background:#ffffff08;border-radius:10px;outline:none;padding:.7rem .9rem;font-size:.9rem}.form-input:focus{border-color:var(--primary-color);background:#8b5cf605}.export-tiers{flex-direction:column;gap:.75rem;margin:1.5rem 0;display:flex}.export-tier-card{border:1px solid var(--border-color);cursor:pointer;transition:var(--transition-smooth);background:#ffffff05;border-radius:12px;justify-content:space-between;align-items:center;padding:1rem;display:flex}.export-tier-card:hover{background:#ffffff0a;border-color:#ffffff26}.export-tier-card.active{border-color:var(--primary-color);background:#8b5cf60f}.export-tier-left{align-items:center;gap:.75rem;display:flex}.export-tier-title{font-size:.95rem;font-weight:600;display:block}.export-tier-desc{color:var(--text-secondary);margin-top:.15rem;font-size:.75rem}.export-tier-badge{border-radius:50px;padding:.2rem .6rem;font-size:.75rem;font-weight:700}.badge-free{color:#34d399;background:#10b98126}.badge-premium{color:#fbbf24;background:#f59e0b26}.export-radio{border:2px solid var(--border-color);border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;display:flex}.export-tier-card.active .export-radio{border-color:var(--primary-color)}.export-tier-card.active .export-radio:after{content:"";background:var(--primary-color);border-radius:50%;width:8px;height:8px}
