:root{--bg:#09090f;--bg-card:#ffffff0a;--bg-card-h:#ffffff12;--border:#ffffff14;--border-h:#ffffff2e;--accent-1:#7c3aed;--accent-2:#3b82f6;--accent-3:#06b6d4;--accent-grad:linear-gradient(135deg, var(--accent-1), var(--accent-2));--accent-grad-h:linear-gradient(135deg, #6d28d9, #2563eb);--txt-primary:#f8fafc;--txt-secondary:#94a3b8;--txt-muted:#475569;--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-xl:28px;--shadow-card:0 4px 32px #00000073;--shadow-glow:0 0 40px #7c3aed2e;--transition:.22s cubic-bezier(.4, 0, .2, 1);--transition-bounce:.3s cubic-bezier(.34, 1.56, .64, 1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{background:var(--bg);color:var(--txt-primary);-webkit-font-smoothing:antialiased;min-height:100vh;font-family:Inter,system-ui,-apple-system,sans-serif;overflow-x:hidden}#root{width:100%;min-height:100vh}.bg-orbs{pointer-events:none;z-index:0;position:fixed;inset:0;overflow:hidden}.orb{filter:blur(80px);opacity:.35;border-radius:50%;animation:18s ease-in-out infinite drift;position:absolute}.orb-1{background:radial-gradient(circle,#7c3aed 0%,#0000 70%);width:520px;height:520px;animation-delay:0s;top:-180px;left:-180px}.orb-2{background:radial-gradient(circle,#3b82f6 0%,#0000 70%);width:600px;height:600px;animation-delay:-6s;bottom:-200px;right:-200px}.orb-3{opacity:.15;background:radial-gradient(circle,#06b6d4 0%,#0000 70%);width:400px;height:400px;animation-delay:-12s;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes drift{0%,to{transform:translate(0)scale(1)}33%{transform:translate(40px,-30px)scale(1.05)}66%{transform:translate(-20px,50px)scale(.95)}}.app-shell{z-index:1;flex-direction:column;gap:32px;max-width:1180px;margin:0 auto;padding:32px 24px 64px;display:flex;position:relative}.header{flex-direction:column;align-items:center;gap:8px;padding-top:12px;display:flex}.logo{align-items:center;gap:10px;display:flex}.logo-icon-svg{color:#7c3aed;filter:drop-shadow(0 0 10px #7c3aedb3);flex-shrink:0}.logo-text{background:var(--accent-grad);-webkit-text-fill-color:transparent;letter-spacing:-.03em;-webkit-background-clip:text;background-clip:text;font-size:1.8rem;font-weight:800}.tagline{color:var(--txt-secondary);letter-spacing:.04em;font-size:.875rem}.glass-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(20px);box-shadow:var(--shadow-card);transition:border-color var(--transition), box-shadow var(--transition)}.glass-card:hover{border-color:var(--border-h);box-shadow:var(--shadow-card), var(--shadow-glow)}.drop-zone{border-radius:var(--radius-xl);cursor:pointer;text-align:center;transition:border-color var(--transition), background var(--transition), transform var(--transition-bounce);background:#7c3aed0a;border:2px dashed #7c3aed66;outline:none;justify-content:center;align-items:center;padding:72px 32px;display:flex}.drop-zone:hover,.drop-zone:focus-visible{border-color:var(--accent-1);background:#7c3aed1a;transform:scale(1.005)}.drop-zone.drag-over{background:#06b6d41a;border-color:#06b6d4;transform:scale(1.015);box-shadow:0 0 60px #06b6d433}.drop-inner{pointer-events:none;flex-direction:column;align-items:center;gap:12px;display:flex}.drop-icon-wrap{animation:3s ease-in-out infinite float}.drop-icon-bg{background:linear-gradient(135deg,#7c3aed,#3b82f6);border-radius:14px;justify-content:center;align-items:center;width:64px;height:64px;display:flex;box-shadow:0 8px 32px #7c3aed73}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.drop-title{color:var(--txt-primary);letter-spacing:-.02em;font-size:1.5rem;font-weight:700}.drop-sub{color:var(--txt-secondary);font-size:.9rem}.browse-label{pointer-events:all;cursor:pointer;background:var(--accent-grad);-webkit-text-fill-color:transparent;text-underline-offset:3px;-webkit-background-clip:text;background-clip:text;font-weight:600;text-decoration:underline}.drop-hint{color:var(--txt-muted);letter-spacing:.06em;text-transform:uppercase;margin-top:4px;font-size:.78rem}.editor{grid-template-columns:1fr 360px;align-items:start;gap:24px;display:grid}.preview-panel{flex-direction:column;gap:16px;padding:20px;display:flex}@media (width>=821px){.preview-panel{position:sticky;top:32px}}.panel-header{justify-content:space-between;align-items:center;display:flex}.panel-label{color:var(--txt-muted);text-transform:uppercase;letter-spacing:.1em;font-size:.75rem;font-weight:600}.preview-toggle{border:1px solid var(--border);border-radius:var(--radius-sm);background:#ffffff0f;gap:3px;padding:3px;display:flex}.toggle-btn{color:var(--txt-secondary);cursor:pointer;transition:background var(--transition), color var(--transition);background:0 0;border:none;border-radius:5px;padding:5px 14px;font-family:inherit;font-size:.78rem;font-weight:500}.toggle-btn.active{background:var(--accent-grad);color:#fff}.canvas-wrap{border-radius:var(--radius-md);background:repeating-conic-gradient(#ffffff0a 0% 25%,#0000 0% 50%) 0 0/20px 20px;justify-content:center;align-items:center;min-height:300px;max-height:520px;display:flex;position:relative;overflow:hidden}.preview-img,.result-canvas{object-fit:contain;border-radius:var(--radius-md);max-width:100%;max-height:520px;display:block}.result-canvas{max-width:100%;max-height:520px}.image-meta{flex-wrap:wrap;gap:8px;display:flex}.meta-chip{color:var(--txt-secondary);border:1px solid var(--border);text-overflow:ellipsis;white-space:nowrap;background:#ffffff0f;border-radius:100px;max-width:200px;padding:3px 10px;font-size:.72rem;overflow:hidden}.controls-panel{flex-direction:column;gap:16px;display:flex}.mode-toggle-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);grid-template-columns:1fr 1fr;gap:6px;padding:5px;display:grid}.mode-btn{border-radius:calc(var(--radius-md) - 3px);color:var(--txt-secondary);cursor:pointer;transition:all var(--transition);background:0 0;border:none;justify-content:center;align-items:center;gap:7px;padding:10px 0;font-family:inherit;font-size:.82rem;font-weight:600;display:flex}.mode-btn:hover:not(.active){color:var(--txt-primary);background:#ffffff0d}.mode-btn.active{background:var(--accent-grad);color:#fff;box-shadow:0 4px 16px #7c3aed59}.mode-btn.crop-active{background:linear-gradient(135deg,#0ea5e9,#6366f1);box-shadow:0 4px 16px #6366f159}.crop-backdrop{z-index:3;pointer-events:none;border-radius:var(--radius-md);position:absolute;inset:0;overflow:hidden}.crop-selection{box-sizing:border-box;pointer-events:auto;cursor:grab;border:2px solid #ffffffe6;position:absolute;box-shadow:0 0 0 9999px #00000085}.crop-selection:active{cursor:grabbing}.crop-third{background:#ffffff38;position:absolute}.crop-third-h1{height:1px;top:33.33%;left:0;right:0}.crop-third-h2{height:1px;top:66.66%;left:0;right:0}.crop-third-v1{width:1px;top:0;bottom:0;left:33.33%}.crop-third-v2{width:1px;top:0;bottom:0;left:66.66%}.crop-handle{pointer-events:auto;z-index:5;border:0 solid #fff;width:20px;height:20px;position:absolute}.crop-handle-tl{cursor:nw-resize;border-top-width:4px;border-left-width:4px;top:-4px;left:-4px}.crop-handle-tr{cursor:ne-resize;border-top-width:4px;border-right-width:4px;top:-4px;right:-4px}.crop-handle-bl{cursor:sw-resize;border-bottom-width:4px;border-left-width:4px;bottom:-4px;left:-4px}.crop-handle-br{cursor:se-resize;border-bottom-width:4px;border-right-width:4px;bottom:-4px;right:-4px}.btn.btn-crop{background:linear-gradient(135deg,#0ea5e9,#6366f1);box-shadow:0 4px 20px #6366f166}.btn.btn-crop:hover{box-shadow:0 6px 28px #6366f18c}.crop-quick-row{flex-direction:column;gap:8px;margin-top:14px;display:flex}.crop-quick-btns{flex-wrap:wrap;gap:6px;display:flex}.crop-quick-btn{border:1px solid var(--border);color:var(--txt-secondary);cursor:pointer;transition:all var(--transition);background:0 0;border-radius:100px;padding:5px 12px;font-family:inherit;font-size:.72rem;font-weight:600}.crop-quick-btn:hover{color:#a5b4fc;background:#6366f114;border-color:#6366f1}.section{padding:18px 20px}.section-title{text-transform:uppercase;letter-spacing:.09em;color:var(--txt-secondary);align-items:center;gap:7px;margin-bottom:14px;font-size:.8rem;font-weight:700;display:flex}.s-icon{opacity:.7;flex-shrink:0;width:14px;height:14px}.presets-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.preset-btn{border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;color:var(--txt-primary);transition:all var(--transition);text-align:left;background:#ffffff0a;flex-direction:column;align-items:flex-start;gap:2px;padding:9px 12px;font-family:inherit;font-size:.75rem;font-weight:600;display:flex}.preset-btn span{color:var(--txt-muted);text-transform:uppercase;letter-spacing:.06em;font-size:.65rem;font-weight:400}.preset-btn:hover{border-color:var(--accent-1);color:#fff;background:#7c3aed2e;transform:translateY(-1px)}.preset-btn.active{background:var(--accent-grad);color:#fff;border-color:#0000;box-shadow:0 4px 16px #7c3aed66}.preset-btn.active span{color:#ffffffb3}.dims-row{align-items:flex-end;gap:10px;margin-bottom:16px;display:flex}.dim-field{flex-direction:column;flex:1;gap:6px;display:flex}.field-label{color:var(--txt-muted);letter-spacing:.04em;text-transform:uppercase;font-size:.72rem;font-weight:500}.field-input{border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--txt-primary);width:100%;transition:border-color var(--transition), background var(--transition);-moz-appearance:textfield;background:#ffffff0f;outline:none;padding:10px 12px;font-family:inherit;font-size:.9rem;font-weight:600}.field-input::-webkit-outer-spin-button{-webkit-appearance:none}.field-input::-webkit-inner-spin-button{-webkit-appearance:none}.field-input:focus{border-color:var(--accent-1);background:#7c3aed14}.lock-btn{border:1px solid var(--border);width:36px;height:36px;color:var(--txt-secondary);cursor:pointer;transition:all var(--transition);background:#ffffff0f;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;margin-bottom:1px;padding:0;display:flex}.lock-btn svg{width:16px;height:16px}.lock-btn.locked{background:var(--accent-grad);color:#fff;border-color:#0000;box-shadow:0 0 16px #7c3aed66}.lock-btn:hover:not(.locked){border-color:var(--accent-1);color:var(--txt-primary)}.scale-row{flex-direction:column;gap:8px;display:flex}.slider{appearance:none;cursor:pointer;background:#ffffff1a;border-radius:100px;outline:none;width:100%;height:5px}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent-grad);cursor:pointer;width:18px;height:18px;transition:transform var(--transition-bounce);border-radius:50%;box-shadow:0 0 10px #7c3aed99}.slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.slider::-moz-range-thumb{background:var(--accent-1);cursor:pointer;border:none;border-radius:50%;width:18px;height:18px}.format-grid{gap:8px;margin-bottom:14px;display:flex}.format-btn{border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--txt-secondary);letter-spacing:.06em;cursor:pointer;transition:all var(--transition);background:#ffffff0a;flex:1;padding:9px;font-family:inherit;font-size:.78rem;font-weight:700}.format-btn:hover:not(.active){border-color:var(--accent-2);color:var(--txt-primary);background:#3b82f61a}.format-btn.active{background:var(--accent-grad);color:#fff;border-color:#0000;box-shadow:0 4px 16px #7c3aed59}.quality-row{transition:opacity var(--transition);flex-direction:column;gap:8px;display:flex}.quality-row.disabled{opacity:.35;pointer-events:none}.output-info-card{padding:16px 20px}.info-grid{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.info-item{flex-direction:column;gap:4px;display:flex}.info-label{color:var(--txt-muted);text-transform:uppercase;letter-spacing:.08em;font-size:.65rem;font-weight:600}.info-val{color:var(--txt-primary);font-variant-numeric:tabular-nums;font-size:.88rem;font-weight:700}.info-val.saving{color:#4ade80}.info-val.growing{color:#fb923c}.actions-row{gap:10px;display:flex}.btn{border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-bounce);border:none;flex:1;justify-content:center;align-items:center;gap:7px;padding:12px 18px;font-family:inherit;font-size:.85rem;font-weight:600;display:inline-flex}.btn svg{flex-shrink:0;width:16px;height:16px}.btn-secondary{border:1px solid var(--border);color:var(--txt-secondary);background:#ffffff12}.btn-secondary:hover{color:var(--txt-primary);background:#ffffff1f;transform:translateY(-2px)}.btn-primary{background:var(--accent-grad);color:#fff;flex:1.2;box-shadow:0 4px 20px #7c3aed66}.btn-primary:hover{background:var(--accent-grad-h);transform:translateY(-2px);box-shadow:0 8px 28px #7c3aed8c}.btn-primary:active{transform:translateY(0)}.btn-download{color:#fff;background:linear-gradient(135deg,#06b6d4,#3b82f6);flex:1.2;box-shadow:0 4px 20px #06b6d459}.btn-download:hover{transform:translateY(-2px);box-shadow:0 8px 28px #06b6d480}.btn-download:active{transform:translateY(0)}.btn-new{border-radius:var(--radius-md);color:var(--txt-muted);cursor:pointer;width:100%;transition:all var(--transition);background:0 0;border:1px dashed #ffffff26;padding:10px;font-family:inherit;font-size:.8rem;font-weight:500}.btn-new:hover{border-color:var(--accent-1);color:var(--accent-1);background:#7c3aed14}.btn-ai-prompt{background:var(--accent-grad);border-radius:calc(var(--radius-md) - 3px);flex:1;box-shadow:0 4px 20px #7c3aed66}.btn-ai-prompt:hover{background:var(--accent-grad-h);transform:translateY(-2px);box-shadow:0 8px 28px #7c3aed8c}.btn-ai-prompt:active{transform:translateY(0)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spin{animation:1s linear infinite spin}.footer{text-align:center;color:var(--txt-muted);padding-top:8px;font-size:.78rem}.footer strong{color:var(--txt-secondary)}.toast{border:1px solid var(--border-h);color:var(--txt-primary);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:9999;opacity:0;white-space:nowrap;pointer-events:none;background:#1e1e2df2;border-radius:100px;padding:12px 24px;font-size:.85rem;font-weight:500;transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .3s;position:fixed;bottom:28px;left:50%;transform:translate(-50%)translateY(80px);box-shadow:0 8px 32px #0009}.toast.show{opacity:1;transform:translate(-50%)translateY(0)}@media (width<=820px){.editor{grid-template-columns:1fr}.controls-panel{max-width:100%}.app-shell{padding:20px 16px 48px}.drop-zone{padding:48px 24px}}@media (width<=480px){.presets-grid{grid-template-columns:1fr 1fr}.info-grid{grid-template-columns:1fr 1fr 1fr}.actions-row,.dims-row{flex-wrap:wrap}.lock-btn{align-self:center}}.ai-section .s-icon.ai-sparkle{color:#f59e0b;opacity:1}.ai-hint{color:var(--txt-secondary);margin-bottom:12px;font-size:.76rem;line-height:1.5}.ai-scale-btns{gap:8px;display:flex}.btn.btn-ai{border-radius:var(--radius-sm);color:#fcd34d;cursor:pointer;transition:all var(--transition);background:#f59e0b12;border:1px solid #f59e0b4d;flex:1;justify-content:center;align-items:center;gap:6px;padding:10px 0;font-family:inherit;font-size:.8rem;font-weight:600;display:flex}.btn.btn-ai:hover{color:#fde68a;background:#f59e0b26;border-color:#f59e0b;box-shadow:0 4px 18px #f59e0b38}.ai-change-key{color:var(--txt-secondary);cursor:pointer;transition:color var(--transition);background:0 0;border:none;margin-top:10px;padding:0;font-family:inherit;font-size:.71rem;text-decoration:none;display:block}.ai-change-key:hover{color:var(--txt-primary);text-decoration:underline}.ai-loading{color:var(--txt-secondary);align-items:center;gap:10px;font-size:.82rem;display:flex}.cookie-banner{background-color:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);z-index:1000;flex-direction:column;width:340px;padding:24px;display:flex;position:fixed;bottom:24px;right:24px;box-shadow:0 12px 40px #0009}.cookie-banner-content{flex-direction:column;align-items:center;gap:20px;width:100%;display:flex}@media (width>=768px){.cookie-banner-content{align-items:center}}.cookie-banner-text{color:var(--txt-secondary);text-align:center;margin:0;font-size:.95rem;line-height:1.6}@media (width>=768px){.cookie-banner-text{text-align:center}}.cookie-banner-actions{flex-shrink:0;gap:12px;display:flex}.cookie-btn-decline{border:1px solid var(--border)!important;color:var(--txt-secondary)!important;background-color:#0000!important}.cookie-btn-decline:hover{background-color:var(--bg-card-h)!important;color:var(--txt-primary)!important}.manage-cookies-btn{color:var(--txt-secondary);cursor:pointer;background:0 0;border:none;margin-top:8px;padding:0;font-size:.82rem;text-decoration:underline;transition:color .2s}.manage-cookies-btn:hover{color:var(--txt-primary)}.cookie-modal-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9999;background:#000000bf;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.cookie-modal{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);flex-direction:column;width:100%;max-width:560px;max-height:90vh;display:flex;overflow:hidden;box-shadow:0 16px 48px #00000080}.cookie-modal-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:18px 24px;display:flex}.cookie-modal-header h3{color:var(--txt-primary);margin:0;font-size:1.1rem}.cookie-modal-close{color:var(--txt-secondary);cursor:pointer;background:0 0;border:none;font-size:1.5rem;line-height:1}.cookie-modal-close:hover{color:var(--txt-primary)}.cookie-modal-body{flex-direction:column;gap:20px;padding:24px;display:flex;overflow-y:auto}.cookie-modal-intro{color:var(--txt-secondary);margin:0;font-size:.85rem;line-height:1.5}.cookie-category{border:1px solid var(--border);border-radius:var(--radius-sm);background:#ffffff08;padding:16px}.cookie-category-header{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.cookie-category h4{color:var(--txt-primary);margin:0 0 6px;font-size:.95rem}.cookie-category p{color:var(--txt-secondary);margin:0;font-size:.8rem;line-height:1.4}.cookie-toggle{flex-shrink:0;width:44px;height:24px;display:inline-block;position:relative}.cookie-toggle input{opacity:0;width:0;height:0}.toggle-label{cursor:pointer;background-color:var(--border-h);border-radius:24px;transition:all .3s;position:absolute;inset:0}.toggle-label:before{content:"";background-color:#fff;border-radius:50%;width:18px;height:18px;transition:all .3s;position:absolute;bottom:3px;left:3px}.cookie-toggle input:checked+.toggle-label{background-color:var(--accent-1)}.cookie-toggle input:checked+.toggle-label:before{transform:translate(20px)}.toggle-label.disabled{cursor:not-allowed;opacity:.6}.cookie-modal-footer{border-top:1px solid var(--border);background:#0003;justify-content:space-between;gap:12px;padding:16px 24px;display:flex}.cookie-modal-footer .btn-secondary,.cookie-modal-footer .btn-primary{flex:1}@media (width<=500px){.cookie-modal-footer{flex-wrap:wrap;justify-content:center}}