:root{--primary-color:#7c3aed;--primary-hover:#6d28d9;--secondary-color:#db2777;--secondary-hover:#be185d;--tertiary-color:#2563eb;--tertiary-hover:#1d4ed8;--bg-color:#0f0a1e;--card-bg:#1a1130;--card-bg-alt:#1e1538;--text-primary:#f1eeff;--text-secondary:#a89fc8;--border-color:#2e2050;--shadow:0 1px 3px #0006, 0 1px 2px #0000004d;--shadow-lg:0 10px 25px -3px #7c3aed40}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.6}.app-container{flex-direction:column;min-height:100vh;display:flex}header{color:#fff;box-shadow:var(--shadow-lg);background-image:url(/Splash.webp);background-position:50%;background-repeat:no-repeat;background-size:cover;padding:2rem 1rem}.header-top{justify-content:space-between;align-items:flex-start;gap:2rem;max-width:1400px;margin:0 auto;display:flex}header h1{text-align:left;color:#fff;text-shadow:0 2px 8px #0009;margin-bottom:.5rem;font-size:2.5rem;font-weight:700}header p{text-align:left;color:#fff;text-shadow:0 1px 6px #0009;font-size:1.1rem}.donate-btn{color:#fff;white-space:nowrap;cursor:pointer;background-color:#fff3;border:2px solid #ffffff4d;border-radius:8px;padding:.75rem 1.5rem;font-size:.95rem;font-weight:600;text-decoration:none;transition:all .3s}.donate-btn:hover{background-color:#ffffff4d;border-color:#ffffff80;transform:translateY(-2px);box-shadow:0 4px 12px #00000026}main{flex:1;width:100%;max-width:1400px;margin:0 auto;padding:2rem 1rem}footer{background-color:var(--card-bg);border-top:1px solid var(--border-color);text-align:center;color:var(--text-secondary);padding:1.5rem;font-size:.9rem}.upload-container{justify-content:center;align-items:center;min-height:400px;display:flex}.upload-box{background:var(--card-bg);border:3px dashed var(--border-color);text-align:center;cursor:pointer;width:100%;max-width:500px;box-shadow:var(--shadow);border-radius:12px;padding:3rem 2rem;transition:all .3s}.upload-box:hover,.upload-box.drag-over{border-color:var(--primary-color);box-shadow:var(--shadow-lg);background-color:#231848;transform:translateY(-2px)}.upload-icon{width:64px;height:64px;color:var(--primary-color);margin-bottom:1rem}.upload-box h2{color:var(--text-primary);margin-bottom:.5rem;font-size:1.5rem}.upload-box p{color:var(--text-secondary);margin-bottom:.5rem}.file-types{color:var(--secondary-color);margin-top:1rem;font-size:.85rem}.editor-container{flex-direction:column;gap:2rem;display:flex}.preview-container{grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:2rem;display:grid}.preview-panel{background:var(--card-bg);border:1px solid var(--border-color);box-shadow:var(--shadow);border-radius:8px;padding:1.5rem}.preview-panel h3{color:var(--text-primary);margin-bottom:1rem;font-size:1.1rem}.image-wrapper{background-color:#110d22;border-radius:8px;justify-content:center;align-items:center;width:100%;height:400px;display:flex;position:relative;overflow:hidden}.image-wrapper img{object-fit:contain;max-width:100%;max-height:100%}.placeholder{color:var(--text-secondary);font-style:italic}.progress-container{flex-direction:column;align-items:center;gap:.75rem;width:80%;display:flex}.progress-bar-track{background:var(--border-color);border-radius:4px;width:100%;height:8px;overflow:hidden}.progress-bar-fill{background:linear-gradient(90deg, var(--primary-color), var(--secondary-color));border-radius:4px;height:100%;transition:width .2s}.progress-label{color:var(--text-secondary);font-size:.9rem}.spinner{border:4px solid var(--border-color);border-top:4px solid var(--primary-color);border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.controls-container{background:var(--card-bg);border:1px solid var(--border-color);box-shadow:var(--shadow);border-radius:8px;padding:2rem}.control-group{margin-bottom:2rem}.control-group label{color:var(--text-primary);margin-bottom:.5rem;font-weight:600;display:block}.slider-wrapper{align-items:center;gap:1rem;margin-bottom:.5rem;display:flex}.slider{background:var(--border-color);appearance:none;border-radius:5px;outline:none;flex:1;height:8px}.slider::-webkit-slider-thumb{appearance:none;background:var(--primary-color);cursor:pointer;width:24px;height:24px;box-shadow:var(--shadow);border-radius:50%;transition:all .2s}.slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.slider::-moz-range-thumb{background:var(--primary-color);cursor:pointer;width:24px;height:24px;box-shadow:var(--shadow);border:none;border-radius:50%;transition:all .2s}.slider::-moz-range-thumb:hover{transform:scale(1.2)}.slider-label{color:var(--text-secondary);min-width:45px;font-size:.9rem}.sensitivity-value{color:var(--text-secondary);margin-top:.5rem;font-size:.9rem}.button-group{flex-wrap:wrap;gap:1rem;display:flex}.btn{cursor:pointer;min-width:150px;box-shadow:var(--shadow);border:none;border-radius:6px;flex:1;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;transition:all .2s}.btn:hover:not(:disabled){box-shadow:var(--shadow-lg);transform:translateY(-2px)}.btn:active:not(:disabled){transform:translateY(0)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background-color:var(--primary-color);color:#fff}.btn-primary:hover:not(:disabled){background-color:var(--primary-hover)}.btn-secondary{background-color:var(--secondary-color);color:#fff}.btn-secondary:hover:not(:disabled){background-color:var(--secondary-hover)}.btn-tertiary{background-color:var(--tertiary-color);color:#fff}.btn-tertiary:hover:not(:disabled){background-color:var(--tertiary-hover)}@media (width<=768px){.header-top{flex-direction:column;align-items:center;gap:1rem}header h1{text-align:center;font-size:1.75rem}header p{text-align:center;font-size:.95rem}.donate-btn{padding:.6rem 1.2rem;font-size:.85rem}main{padding:1rem}.preview-container{grid-template-columns:1fr;gap:1rem}.image-wrapper{height:300px}.upload-box{padding:2rem 1rem}.upload-box h2{font-size:1.25rem}.button-group{flex-direction:column}.btn{min-width:auto}.controls-container{padding:1.5rem}}@media (width<=480px){header{padding:1.5rem 1rem}header h1{font-size:1.5rem}.slider-wrapper{gap:.5rem}.slider-label{min-width:35px;font-size:.85rem}}
