:root{--color-primary: #2563eb;--color-primary-dark: #1d4ed8;--color-primary-light: #eff6ff;--color-primary-subtle: #dbeafe;--color-heading: #0f172a;--color-body: #334155;--color-muted: #64748b;--color-border: #e2e8f0;--color-border-dark: #cbd5e1;--color-surface: #ffffff;--color-background: #f8fafc;--color-background-alt: #f1f5f9;--color-success: #16a34a;--color-warning: #d97706;--color-error: #dc2626;--font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--font-size-5xl: 3rem;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--space-20: 5rem;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-2xl: 1.5rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .07), 0 2px 4px -1px rgba(0, 0, 0, .04);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .08), 0 4px 6px -2px rgba(0, 0, 0, .03);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .08), 0 10px 10px -5px rgba(0, 0, 0, .02);--container-max-width: 1240px;--header-height: 4.5rem;--z-header: 100;--z-modal: 1000;--transition-fast: .15s ease-in-out;--transition-normal: .25s ease-in-out}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}ul,ol{list-style:none}a{color:inherit;text-decoration:none}body{font-family:var(--font-family-base);font-size:var(--font-size-base);line-height:1.6;color:var(--color-body);background-color:var(--color-background);direction:rtl;text-align:right;margin:0;padding:0;-webkit-font-smoothing:antialiased}h1,h2,h3,h4,h5,h6{color:var(--color-heading);font-weight:700;line-height:1.3;margin-top:0;margin-bottom:var(--space-4)}h1{font-size:clamp(1.875rem,4vw,var(--font-size-4xl))}h2{font-size:clamp(1.5rem,3vw,var(--font-size-3xl))}h3{font-size:clamp(1.25rem,2vw,var(--font-size-2xl))}p{margin-top:0;margin-bottom:var(--space-4)}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-primary-dark)}:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px}.skip-link{position:absolute;top:-100px;right:var(--space-4);background:var(--color-primary-dark);color:var(--color-surface);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);z-index:9999;transition:top var(--transition-fast)}.skip-link:focus{top:var(--space-4)}details{border:1px solid var(--color-border);border-radius:var(--radius-lg);background-color:var(--color-surface);margin-bottom:var(--space-4);overflow:hidden;transition:border-color var(--transition-fast)}details[open]{border-color:var(--color-primary-subtle);box-shadow:var(--shadow-sm)}summary{padding:var(--space-4) var(--space-6);font-weight:600;color:var(--color-heading);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none}summary::-webkit-details-marker{display:none}summary:after{content:"▼";font-size:var(--font-size-xs);color:var(--color-muted);transition:transform var(--transition-fast)}details[open] summary:after{transform:rotate(180deg);color:var(--color-primary)}details>div{padding:0 var(--space-6) var(--space-4) var(--space-6);color:var(--color-body)}.container{width:100%;max-width:var(--container-max-width);margin-inline:auto;padding-inline:var(--space-4)}.site-header{height:var(--header-height);background-color:#fffffff2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--color-border);position:sticky;top:0;z-index:var(--z-header);display:flex;align-items:center}.header-container{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}.logo{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-xl);font-weight:800;color:var(--color-primary-dark)}.logo-icon{width:28px;height:28px;fill:currentColor}.site-nav ul{display:flex;align-items:center;gap:var(--space-6);list-style:none;margin:0;padding:0}.site-nav a{color:var(--color-body);font-weight:500;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);transition:all var(--transition-fast)}.site-nav a:hover,.site-nav a[aria-current=page]{color:var(--color-primary);background-color:var(--color-primary-light)}.header-actions{display:flex;align-items:center;gap:var(--space-3)}.nav-toggle{display:none;background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);font-size:var(--font-size-lg);color:var(--color-heading);cursor:pointer}.section{padding-block:var(--space-12)}.section-alt{background-color:var(--color-background-alt)}.section-header{text-align:center;max-width:680px;margin-inline:auto;margin-bottom:var(--space-10)}.section-header p{color:var(--color-muted);font-size:var(--font-size-lg)}.hero-section{padding-block:var(--space-10) var(--space-16);background:linear-gradient(180deg,var(--color-primary-light) 0%,var(--color-background) 100%)}.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-10);align-items:center}.hero-content{display:flex;flex-direction:column;gap:var(--space-4)}.hero-badges{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-2)}.site-footer{background-color:var(--color-heading);color:var(--color-surface);padding-block:var(--space-12) var(--space-6);margin-top:var(--space-16)}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--space-10);margin-bottom:var(--space-10)}.footer-brand p{color:var(--color-muted);margin-top:var(--space-3);max-width:360px}.footer-column h4{color:var(--color-surface);font-size:var(--font-size-base);margin-bottom:var(--space-4)}.footer-column ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}.footer-column a{color:#94a3b8;font-size:var(--font-size-sm);transition:color var(--transition-fast)}.footer-column a:hover{color:var(--color-surface)}.footer-bottom{border-top:1px solid #334155;padding-top:var(--space-6);display:flex;align-items:center;justify-content:space-between;color:#94a3b8;font-size:var(--font-size-sm)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:.75rem 1.5rem;font-size:var(--font-size-base);font-weight:600;border-radius:var(--radius-lg);border:1px solid transparent;cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.btn-primary{background-color:var(--color-primary);color:var(--color-surface)}.btn-primary:hover{background-color:var(--color-primary-dark);color:var(--color-surface)}.btn-secondary{background-color:var(--color-surface);color:var(--color-heading);border-color:var(--color-border-dark)}.btn-secondary:hover{background-color:var(--color-background);border-color:var(--color-muted)}.btn-sm{padding:.5rem 1rem;font-size:var(--font-size-sm);border-radius:var(--radius-md)}.badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);background-color:var(--color-surface);color:var(--color-body);border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:500}.badge-primary{background-color:var(--color-primary-light);color:var(--color-primary-dark);border-color:var(--color-primary-subtle)}.badge-warning{background-color:#fef3c7;color:#92400e;border-color:#fde68a}.upload-panel-card{background-color:var(--color-surface);border-radius:var(--radius-2xl);padding:var(--space-6);box-shadow:var(--shadow-xl);border:1px solid var(--color-border);display:flex;flex-direction:column;gap:var(--space-4)}.upload-panel-header{text-align:center}.upload-panel-header h2{font-size:var(--font-size-xl);margin-bottom:var(--space-1)}.upload-panel-header p{color:var(--color-muted);font-size:var(--font-size-sm);margin-bottom:0}.upload-visual-zone{border:2px dashed var(--color-primary);background-color:var(--color-primary-light);border-radius:var(--radius-xl);padding:var(--space-8) var(--space-4);text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3)}.upload-zone-icon{width:48px;height:48px;color:var(--color-primary)}.quick-tools-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2)}.quick-tool-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background-color:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-heading);font-size:var(--font-size-sm);font-weight:500;transition:all var(--transition-fast)}.quick-tool-btn:hover{background-color:var(--color-primary-light);border-color:var(--color-primary);color:var(--color-primary-dark)}.format-tags-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--space-2);font-size:var(--font-size-xs);color:var(--color-muted)}.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-6)}.tool-card{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-4);transition:all var(--transition-fast)}.tool-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-lg);transform:translateY(-2px)}.tool-card-icon{width:44px;height:44px;border-radius:var(--radius-lg);background-color:var(--color-primary-light);color:var(--color-primary);display:flex;align-items:center;justify-content:center}.tool-card-icon svg{width:24px;height:24px}.tool-card-title{font-size:var(--font-size-lg);margin-bottom:var(--space-1)}.tool-card-desc{font-size:var(--font-size-sm);color:var(--color-muted);margin-bottom:0}.tool-card--disabled{opacity:.75;background-color:var(--color-background-alt);border-style:dashed}.tool-card--disabled:hover{transform:none;box-shadow:none;border-color:var(--color-border-dark)}.demo-editor-card{background-color:var(--color-surface);border-radius:var(--radius-2xl);border:1px solid var(--color-border);box-shadow:var(--shadow-xl);overflow:hidden}.demo-editor-topbar{background-color:var(--color-heading);color:var(--color-surface);padding:var(--space-3) var(--space-6);display:flex;align-items:center;justify-content:space-between;font-size:var(--font-size-sm)}.demo-editor-body{display:grid;grid-template-columns:240px 1fr;min-height:420px}.demo-editor-sidebar{background-color:var(--color-background);border-left:1px solid var(--color-border);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4)}.demo-editor-preview{position:relative;overflow:hidden;background-color:#0f172a;display:flex;align-items:center;justify-content:center;--split-pos: 50%}.demo-image-layer{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.demo-image-layer.after{clip-path:polygon(0 0,var(--split-pos) 0,var(--split-pos) 100%,0 100%)}.demo-slider-divider{position:absolute;top:0;bottom:0;right:calc(100% - var(--split-pos));width:2px;background-color:var(--color-surface);box-shadow:0 0 10px #00000080;pointer-events:none;z-index:10}.demo-slider-input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:20;margin:0}.benefits-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-6)}.benefit-card{background-color:var(--color-surface);padding:var(--space-6);border-radius:var(--radius-xl);border:1px solid var(--color-border)}.benefit-icon{width:40px;height:40px;color:var(--color-primary);margin-bottom:var(--space-3)}.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-5)}.step-card{text-align:center;position:relative;padding:var(--space-6) var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-2xl);box-shadow:var(--shadow-sm);transition:transform var(--transition-medium),box-shadow var(--transition-medium),border-color var(--transition-medium)}.step-card:hover{transform:translateY(-3px);box-shadow:0 10px 25px -4px #2563eb1a;border-color:var(--color-primary-light)}.step-number{width:52px;height:52px;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--color-primary-light) 0%,#dbeafe 100%);color:var(--color-primary-dark);font-weight:900;font-size:var(--font-size-xl);display:flex;align-items:center;justify-content:center;margin-inline:auto;margin-bottom:var(--space-4);box-shadow:inset 0 0 0 1px #2563eb33}.cta-banner{background:linear-gradient(135deg,var(--color-primary-dark) 0%,var(--color-primary) 100%);color:var(--color-surface);border-radius:var(--radius-2xl);padding:var(--space-12) var(--space-8);text-align:center;box-shadow:var(--shadow-xl)}.cta-banner h2{color:var(--color-surface)}.cta-banner p{color:var(--color-primary-subtle);max-width:540px;margin-inline:auto;margin-bottom:var(--space-6)}.upload-visual-zone.is-dragover{background-color:var(--color-primary-subtle);border-color:var(--color-primary-dark);transform:scale(1.01);transition:all var(--transition-fast)}.preview-card{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-4);box-shadow:var(--shadow-md)}.preview-image-container{width:fit-content;max-width:100%;max-height:440px;margin-inline:auto;border-radius:var(--radius-lg);overflow:hidden;display:flex;align-items:center;justify-content:center;background:transparent}.preview-image{max-width:100%;max-height:400px;object-fit:contain;display:block}.preview-metadata-panel{display:flex;flex-direction:column;gap:var(--space-3)}.preview-filename{font-size:var(--font-size-base);font-weight:700;color:var(--color-heading);margin:0;word-break:break-all}.preview-metadata-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--space-2);font-size:var(--font-size-sm);background-color:var(--color-background);padding:var(--space-3);border-radius:var(--radius-md)}.meta-item{display:flex;align-items:center;gap:var(--space-2)}.meta-label{color:var(--color-muted);font-weight:500}.meta-value{color:var(--color-heading);font-weight:600}.preview-actions-row{display:flex;gap:var(--space-3);flex-wrap:wrap}.btn-outline-danger{background-color:transparent;color:var(--color-error);border-color:var(--color-error)}.btn-outline-danger:hover{background-color:#fef2f2}.uploader-loading-card{padding:var(--space-8);text-align:center;background-color:var(--color-surface);border:1px dashed var(--color-primary);border-radius:var(--radius-xl)}.spinner{width:36px;height:36px;border:3px solid var(--color-primary-light);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto}@keyframes spin{to{transform:rotate(360deg)}}.uploader-error-card,.uploader-warning-card{padding:var(--space-4);border-radius:var(--radius-lg);margin-top:var(--space-3)}.alert-danger{background-color:#fef2f2;color:#991b1b;border:1px solid #fecaca}.alert-warning{background-color:#fffbeb;color:#92400e;border:1px solid #fde68a}.btn-outline-primary{background-color:transparent;color:var(--color-primary);border-color:var(--color-primary-light)}.btn-outline-primary:hover{background-color:var(--color-primary-light);border-color:var(--color-primary)}.btn-success{background-color:var(--color-success);color:#fff}.btn-success:hover{background-color:#15803d}.card{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-sm)}.form-input{padding:.6rem .8rem;border:1px solid var(--color-border-dark);border-radius:var(--radius-md);font-size:var(--font-size-base);color:var(--color-heading);background-color:var(--color-surface);transition:border-color var(--transition-fast)}.form-input:focus{outline:2px solid var(--color-primary);outline-offset:1px;border-color:var(--color-primary)}.compress-panel-card{margin-top:var(--space-4);text-align:right}.compress-panel-title{margin-top:0;font-size:var(--font-size-xl);color:var(--color-heading)}.compress-notice-text{font-size:var(--font-size-xs);color:var(--color-muted);margin-bottom:var(--space-3)}.compress-form-group{margin-top:var(--space-3)}.compress-slider-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.compress-quality-badge{font-weight:700;color:var(--color-primary);font-size:var(--font-size-lg)}.compress-presets-row{margin-top:var(--space-3);display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center}.compress-preset-label{font-size:var(--font-size-sm);font-weight:600}.compress-meta-box{margin-top:var(--space-4);padding:var(--space-3);background-color:var(--color-bg);border-radius:var(--radius-md);font-size:var(--font-size-sm)}.compress-meta-grid{display:flex;gap:var(--space-4);flex-wrap:wrap}.compress-actions-row{margin-top:var(--space-4);display:flex;gap:var(--space-2);flex-wrap:wrap}.compress-result-card{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--color-border)}.compress-result-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:var(--space-3)}.compress-result-body{display:flex;gap:var(--space-4);flex-wrap:wrap;align-items:center}.compress-result-preview-box{max-width:220px;max-height:220px;overflow:hidden;border-radius:var(--radius-sm);border:1px solid var(--color-border)}.compress-result-info{flex:1;min-width:220px}.convert-panel-card{margin-top:var(--space-4);text-align:right}.convert-panel-title{margin-top:0;font-size:var(--font-size-xl);color:var(--color-heading)}.convert-notice-text{font-size:var(--font-size-xs);color:var(--color-muted);margin-top:4px}.convert-form-group{margin-top:var(--space-4)}.convert-slider-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.convert-quality-badge{font-weight:700;color:var(--color-primary);font-size:var(--font-size-lg)}.convert-format-options{display:flex;gap:var(--space-4);flex-wrap:wrap;align-items:center}.convert-radio-label{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;font-weight:600}.convert-meta-box{margin-top:var(--space-3);padding:var(--space-3);background-color:var(--color-background);border-radius:var(--radius-md);border:1px solid var(--color-border)}.convert-notice-box,.convert-warning-box,.convert-info-box{margin-top:var(--space-3);padding:var(--space-3);border-radius:var(--radius-md);font-size:var(--font-size-xs)}.convert-actions-row{margin-top:var(--space-4);display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center}.convert-result-card{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--color-border)}.convert-result-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:var(--space-3)}.convert-result-body{display:flex;gap:var(--space-4);flex-wrap:wrap;align-items:center}.convert-result-preview-box{max-width:220px;max-height:220px;overflow:hidden;border-radius:var(--radius-sm);border:1px solid var(--color-border)}.convert-result-info{flex:1;min-width:220px}.crop-panel-card{margin-top:var(--space-4);text-align:right}.crop-panel-title{margin-top:0;font-size:var(--font-size-xl);color:var(--color-heading)}.crop-workspace-container{margin-top:var(--space-4);text-align:center;background-color:var(--color-background);padding:var(--space-4);border-radius:var(--radius-lg);border:1px solid var(--color-border)}.crop-image-wrapper{position:relative;display:inline-block;max-width:100%;user-select:none;-webkit-user-select:none;touch-action:none}.crop-source-image{display:block;max-width:100%;height:auto;pointer-events:none}.crop-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.crop-box{position:absolute;border:2px solid var(--color-primary);box-shadow:0 0 0 9999px #00000080;pointer-events:auto;cursor:move;box-sizing:border-box;touch-action:none}.crop-handle{width:10px;height:10px;background-color:#fff;border:2px solid var(--color-primary);border-radius:2px;position:absolute;z-index:14;pointer-events:auto;touch-action:none;box-sizing:border-box}.crop-handle:before{content:"";position:absolute;width:44px;height:44px;top:50%;left:50%;transform:translate(-50%,-50%);z-index:16}.handle-nw{top:-5px;left:-5px;cursor:nwse-resize;z-index:15}.handle-ne{top:-5px;right:-5px;cursor:nesw-resize;z-index:15}.handle-se{bottom:-5px;right:-5px;cursor:nwse-resize;z-index:15}.handle-sw{bottom:-5px;left:-5px;cursor:nesw-resize;z-index:15}.handle-n{top:-5px;left:50%;transform:translate(-50%);cursor:ns-resize}.handle-e{top:50%;right:-5px;transform:translateY(-50%);cursor:ew-resize}.handle-s{bottom:-5px;left:50%;transform:translate(-50%);cursor:ns-resize}.handle-w{top:50%;left:-5px;transform:translateY(-50%);cursor:ew-resize}.watermark-panel-card{margin-top:var(--space-6);text-align:right}.watermark-panel-header,.watermark-result-header{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap;border-bottom:1px solid var(--color-border);padding-bottom:var(--space-3);margin-bottom:var(--space-4)}.watermark-panel-header h2{margin:0;font-size:var(--font-size-xl)}.watermark-panel-header p{margin:4px 0 0;color:var(--color-muted);font-size:var(--font-size-sm)}.watermark-controls-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:var(--space-5);align-items:start}.watermark-settings{display:flex;flex-direction:column;gap:var(--space-3)}.watermark-fieldset{border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2)}.watermark-fieldset legend{font-weight:700;padding-inline:var(--space-2)}.watermark-fieldset label,.watermark-quality-control label{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2);font-size:var(--font-size-sm);font-weight:600}.watermark-fieldset input[type=range],.watermark-quality-control input[type=range]{width:100%;accent-color:var(--color-primary)}.watermark-background-controls{display:flex;flex-direction:column;gap:var(--space-2)}.watermark-position-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)}.watermark-position-grid label{display:block;min-height:44px;cursor:pointer;text-align:center}.watermark-position-grid input{position:absolute;opacity:0}.watermark-image-controls label.btn{min-height:44px;display:grid;place-items:center}.watermark-position-grid span{display:grid;min-height:44px;place-items:center;padding:var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--font-size-xs)}.watermark-position-grid input:checked+span{border-color:var(--color-primary);background:var(--color-primary-light);color:var(--color-primary-dark)}.watermark-position-grid input:focus-visible+span{outline:2px solid var(--color-primary);outline-offset:2px}.watermark-preview-workspace{position:sticky;top:var(--space-4);width:fit-content;max-width:100%;margin-inline:auto;display:flex;align-items:center;justify-content:center;padding:0;background:transparent;border:none;overflow:hidden}.watermark-preview-canvas{display:block;max-width:100%;height:auto;background:transparent;border-radius:var(--radius-md);box-shadow:var(--shadow-md);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.watermark-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)}.watermark-result-card{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--color-border)}.watermark-tab-bar{display:flex;gap:var(--space-1);background:var(--color-background);padding:4px;border-radius:var(--radius-lg);border:1px solid var(--color-border);margin-bottom:var(--space-3)}.watermark-tab-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);min-height:40px;padding:var(--space-1) var(--space-2);border:none;border-radius:var(--radius-md);background:transparent;font-size:var(--font-size-xs);font-weight:700;color:var(--color-muted);cursor:pointer;transition:all var(--transition-fast)}.watermark-tab-btn:hover{color:var(--color-primary-dark)}.watermark-tab-btn.active{background:var(--color-surface);color:var(--color-primary);box-shadow:var(--shadow-sm)}.watermark-tab-btn .tab-badge{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--color-success)}.watermark-tab-panel{display:flex;flex-direction:column;gap:var(--space-3)}.watermark-tab-panel[hidden]{display:none!important}.watermark-quality-control{display:flex;flex-direction:column;gap:var(--space-2)}.collage-tool-panel{display:grid;gap:var(--space-6);max-width:1100px;margin-inline:auto}.collage-upload-card,.collage-settings,.collage-preview-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-sm)}.upload-drop-zone{display:grid;gap:var(--space-2);padding:var(--space-8);border:2px dashed var(--color-primary);border-radius:var(--radius-lg);text-align:center;cursor:pointer}.upload-drop-zone input{position:absolute;inline-size:1px;block-size:1px;opacity:0}.collage-file-list{display:grid;gap:var(--space-2);margin-block:var(--space-4)}.collage-file-row{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md)}.collage-file-order{min-inline-size:2rem;font-weight:700}.collage-file-name{flex:1 1 12rem;overflow-wrap:anywhere}.collage-file-meta{color:var(--color-text-muted)}.collage-file-row button{min-block-size:44px}.collage-settings{display:grid;gap:var(--space-4)}.collage-settings label{display:grid;gap:var(--space-2)}.collage-custom-dimensions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}.collage-preview-card{display:grid;gap:var(--space-4);text-align:center}.collage-preview-card canvas{display:block;max-inline-size:100%;block-size:auto;margin-inline:auto;border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}.collage-preview-card .btn{justify-self:center}.text-center{text-align:center}.text-muted{color:var(--color-muted)}.text-primary{color:var(--color-primary)}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;opacity:0!important;pointer-events:none!important}input[type=file].visually-hidden{display:none!important}.flex-center{display:flex;align-items:center;justify-content:center}@media(max-width:991px){.nav-toggle{display:block}.site-nav{display:none;position:absolute;top:var(--header-height);left:0;right:0;background-color:var(--color-surface);border-bottom:1px solid var(--color-border);padding:var(--space-4);box-shadow:var(--shadow-lg)}.site-nav.is-open{display:block}.site-nav ul{flex-direction:column;align-items:stretch;gap:var(--space-2)}.site-nav a{display:block;padding:var(--space-3)}.hero-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr;gap:var(--space-6)}.steps-grid{grid-template-columns:repeat(2,1fr)}.demo-editor-body{grid-template-columns:1fr}.demo-editor-sidebar{border-left:none;border-bottom:1px solid var(--color-border)}}@media(max-width:639px){.quick-tools-grid,.steps-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:var(--space-3);text-align:center}.hero-badges{flex-direction:column;align-items:flex-start}.tools-grid{grid-template-columns:1fr}.crop-panel-card,.rotate-panel-card,.convert-panel-card,.compress-panel-card,.resize-panel-card{padding:var(--space-3)!important;overflow-x:hidden}.rotate-controls-group{justify-content:center}.rotate-controls-group button{flex:1 1 auto;min-width:120px}.rotate-result-card>div{grid-template-columns:1fr!important}.convert-meta-box,.compress-meta-box,.resize-estimation-box{padding:var(--space-2)!important}}@media(prefers-reduced-motion:reduce){*,:before,:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media(max-width:639px){.watermark-controls-grid{grid-template-columns:1fr}.watermark-preview-workspace{min-height:220px;padding:var(--space-2)}.watermark-panel-card{padding:var(--space-3)}.watermark-position-grid span{padding:var(--space-2) var(--space-1)}}@media(max-width:640px){.collage-upload-card,.collage-settings,.collage-preview-card{padding:var(--space-4)}.collage-custom-dimensions{grid-template-columns:1fr}.collage-file-row button{flex:1 1 auto}}.batch-panel{margin-top:var(--space-6)}.batch-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-4);margin-block:var(--space-5)}.batch-controls label{display:grid;gap:var(--space-2);font-weight:600}.batch-controls input,.batch-controls select{min-height:2.75rem;padding:.5rem;border:1px solid var(--color-border);border-radius:var(--radius-md)}.batch-actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}.batch-progress{display:grid;gap:var(--space-2);margin-block:var(--space-5)}.batch-progress progress{width:100%;min-height:1rem}.batch-results{display:grid;gap:var(--space-3);padding:0;list-style:none}.batch-result-item{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md)}.batch-result-item>span:first-child{flex:1 1 14rem;overflow-wrap:anywhere}@media(max-width:480px){.batch-actions .btn{flex:1 1 100%}}#background-file-input.visually-hidden{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;max-inline-size:none;margin:0;opacity:0;clip:auto;z-index:1}[data-background-tool] .upload-visual-zone{position:relative}[data-background-tool] .upload-visual-zone>label{position:relative;z-index:2}@media(max-width:639px){[data-background-tool] .background-tool-card{padding:var(--space-3)!important}[data-background-tool] .background-controls-panel{grid-template-columns:minmax(0,1fr)!important}[data-background-tool] .background-preview-workspace{min-inline-size:0}}[data-background-tool] .actions-row{flex-wrap:wrap}.tool-content-section{max-width:800px;margin:var(--space-8) auto 0}.privacy-notice{display:grid;grid-template-columns:auto 1fr;gap:var(--space-3);align-items:start;padding:var(--space-4);border:1px solid color-mix(in srgb,var(--color-primary) 22%,var(--color-border));border-radius:var(--radius-lg);background:color-mix(in srgb,var(--color-primary) 7%,var(--color-surface))}.privacy-notice-icon{color:var(--color-primary);inline-size:1.5rem;block-size:1.5rem}.privacy-notice p{margin:0}.image-example-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}.image-example-card{margin:0;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-sm)}.image-example-card img{display:block;width:100%;height:auto;aspect-ratio:16 / 10;object-fit:cover}.image-example-card figcaption{padding:var(--space-3) var(--space-4);color:var(--color-text);font-size:var(--font-size-sm);line-height:1.7}@media(max-width:639px){.image-example-grid{grid-template-columns:1fr}}[data-compress-tool].compress-tool-workspace{max-width:1040px!important}.compress-tool-workspace[data-flow-state=configuring] .upload-visual-zone,.compress-tool-workspace[data-flow-state=configuring] .format-tags-row,.compress-tool-workspace[data-flow-state=configuring] .preview-container,.compress-tool-workspace[data-flow-state=processing] .upload-visual-zone,.compress-tool-workspace[data-flow-state=processing] .format-tags-row,.compress-tool-workspace[data-flow-state=processing] .preview-container,.compress-tool-workspace[data-flow-state=success] .upload-visual-zone,.compress-tool-workspace[data-flow-state=success] .format-tags-row,.compress-tool-workspace[data-flow-state=success] .preview-container{display:none!important}.compress-privacy-notice{margin-top:var(--space-4)}.tool-flow-shell{margin-top:var(--space-5)}.tool-flow-stepper{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);list-style:none;padding:0;margin:0 0 var(--space-4)}.tool-flow-stepper li{padding:.7rem .5rem;text-align:center;border-bottom:3px solid var(--color-border);color:var(--color-muted);font-weight:700}.tool-flow-stepper li[aria-current=step]{color:var(--color-primary);border-color:var(--color-primary)}.tool-flow-panel[hidden]{display:none!important}.tool-flow-panel>h2{margin:0 0 var(--space-3);font-size:var(--font-size-xl)}.tool-flow-panel:focus{outline:none}.compress-processing-indicator{width:3rem;height:3rem;margin:var(--space-5) auto;border:4px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:compress-spin .8s linear infinite}.compress-processing-indicator+p{text-align:center}.compress-result-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)}.compress-memory-warning{color:var(--color-warning);font-size:var(--font-size-xs)}.compress-previous-result{padding:var(--space-3);border-inline-start:3px solid var(--color-primary)}.compress-tool-workspace[data-flow-state=success] .compress-privacy-notice{display:none}[data-resize-tool].resize-tool-workspace{max-width:1120px!important}[data-resize-tool][data-flow-state=configuring] .upload-visual-zone,[data-resize-tool][data-flow-state=configuring] .format-tags-row,[data-resize-tool][data-flow-state=processing] .upload-visual-zone,[data-resize-tool][data-flow-state=processing] .format-tags-row,[data-resize-tool][data-flow-state=processing] .preview-container,[data-resize-tool][data-flow-state=success] .upload-visual-zone,[data-resize-tool][data-flow-state=success] .format-tags-row,[data-resize-tool][data-flow-state=success] .preview-container{display:none}.resize-flow-shell{margin-top:var(--space-5)}.resize-settings-card{display:grid;gap:var(--space-4)}.resize-inputs-grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--space-3);align-items:end}.resize-inputs-grid .form-group,.resize-quality{display:grid;gap:var(--space-2);font-weight:600}.resize-presets-row,.resize-primary-actions,.resize-result-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}.resize-estimation-box{display:flex;flex-wrap:wrap;gap:var(--space-4);padding:var(--space-3);background:var(--color-background);border-radius:var(--radius-md);font-size:var(--font-size-sm)}.resize-memory-warning{flex-basis:100%;color:var(--color-warning);margin:0}.resize-result-card{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:var(--space-5);align-items:center}.resize-result-preview{max-block-size:360px;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-md)}.resize-result-preview img{display:block;width:100%;height:auto;max-block-size:360px;object-fit:contain}.resize-processing-indicator{width:3rem;height:3rem;margin:var(--space-5) auto;border:4px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:resize-spin .8s linear infinite}@keyframes resize-spin{to{transform:rotate(360deg)}}.resize-processing-indicator+p{text-align:center}@media(max-width:700px){.resize-tool-workspace{padding-bottom:calc(5rem + env(safe-area-inset-bottom))}.resize-inputs-grid,.resize-result-card{grid-template-columns:1fr}.resize-inputs-grid>button{justify-self:start}.resize-result-preview,.resize-result-preview img{max-block-size:220px}.resize-primary-actions{position:sticky;bottom:0;z-index:3;margin-inline:calc(var(--space-3) * -1);padding:var(--space-3) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--color-surface) 96%,transparent);border-top:1px solid var(--color-border)}.resize-primary-actions .btn,.resize-result-actions .btn{flex:1 1 100%}}@media(prefers-reduced-motion:reduce){.resize-processing-indicator{animation:none}}[data-resize-tool].resize-tool-workspace,[data-resize-tool] .resize-flow-shell,[data-resize-tool] .tool-flow-panel,[data-resize-tool] .resize-settings-card,[data-resize-tool] .resize-result-info{min-width:0;max-width:100%}[data-resize-tool] .resize-result-info,[data-resize-tool] .resize-estimation-box,[data-resize-tool] .resize-presets-row{overflow-wrap:anywhere}@media(max-width:1100px){body.resize-page .nav-toggle{display:block}body.resize-page .site-nav{display:none;position:absolute;top:var(--header-height);inset-inline:0;background-color:var(--color-surface);border-bottom:1px solid var(--color-border);padding:var(--space-4);box-shadow:var(--shadow-lg)}body.resize-page .site-nav.is-open{display:block}body.resize-page .site-nav ul{flex-direction:column;align-items:stretch;gap:var(--space-2)}body.resize-page .site-nav a{display:block;padding:var(--space-3)}}.tool-page,.compress-page,.resize-page,.convert-page,.crop-page,.rotate-page,.watermark-page,.background-page,.collage-page,.batch-page,.remove-background-page{min-height:calc(100vh - var(--header-height));background:radial-gradient(circle at 12% 8%,rgba(37,99,235,.08),transparent 28rem),var(--color-background)}.tool-hero,.compress-hero,.resize-hero,.convert-hero,.crop-hero,.rotate-hero,.watermark-hero,.background-hero,.collage-hero,.batch-hero,.remove-background-hero,.social-hero,.grid-hero,.svg-hero,.palette-hero{padding:clamp(1rem,2.5vw,1.8rem) var(--space-4) clamp(2rem,4vw,3.2rem);color:var(--color-surface);background:linear-gradient(135deg,#172554 0%,var(--color-primary-dark) 50%,var(--color-primary) 100%);text-align:center}.tool-hero-inner,.compress-hero-inner,.resize-hero-inner,.convert-hero-inner,.crop-hero-inner,.rotate-hero-inner,.watermark-hero-inner,.background-hero-inner,.collage-hero-inner,.batch-hero-inner,.remove-bg-hero-inner,.social-hero-inner,.grid-hero-inner,.svg-hero-inner,.palette-hero-inner{max-width:760px;margin-inline:auto}.tool-hero h1,.compress-hero h1,.resize-hero h1,.convert-hero h1,.crop-hero h1,.rotate-hero h1,.watermark-hero h1,.background-hero h1,.collage-hero h1,.batch-hero h1,.remove-background-hero h1,.social-hero h1,.grid-hero h1,.svg-hero h1,.palette-hero h1{margin-block:0 var(--space-1);color:var(--color-surface);font-size:clamp(1.5rem,3.5vw,2.2rem);letter-spacing:-.04em}.tool-hero-copy,.compress-hero-copy,.resize-hero-copy,.convert-hero-copy,.crop-hero-copy,.rotate-hero-copy,.watermark-hero-copy,.background-hero-copy,.collage-hero-copy,.batch-hero-copy,.remove-bg-hero-copy,.social-hero-copy,.grid-hero-copy,.svg-hero-copy,.palette-hero-copy{max-width:620px;margin-inline:auto;color:#dbeafe;font-size:clamp(.88rem,1.4vw,1.05rem);line-height:1.4}.tool-app-section,.compress-app-section,.resize-app-section,.convert-app-section,.crop-app-section,.rotate-app-section,.watermark-app-section,.background-app-section,.collage-app-section,.batch-app-section,.remove-bg-app-section,.social-app-section,.grid-app-section,.svg-app-section,.palette-app-section{margin-top:-1.6rem}[data-flow-state=configuring] .upload-visual-zone,[data-flow-state=configuring] .format-tags-row,[data-flow-state=configuring] .format-tags,[data-flow-state=configuring] .preview-container,[data-flow-state=processing] .upload-visual-zone,[data-flow-state=processing] .format-tags-row,[data-flow-state=processing] .format-tags,[data-flow-state=processing] .preview-container,[data-flow-state=success] .upload-visual-zone,[data-flow-state=success] .format-tags-row,[data-flow-state=success] .format-tags,[data-flow-state=success] .preview-container{display:none!important}[data-color-palette-tool]:not([data-flow-state]) .palette-workspace,[data-social-resize-tool]:not([data-flow-state]) .social-workspace,[data-instagram-grid-tool]:not([data-flow-state]) .grid-workspace,[data-svg-to-image-tool]:not([data-flow-state]) .svg-tool-grid,[data-add-text-tool]:not([data-flow-state]) .add-text-editor-workspace,[data-remove-bg-tool]:not([data-flow-state]) .remove-bg-workspace{display:none!important}[data-flow-state=configuring]~.privacy-notice,[data-flow-state=processing]~.privacy-notice,[data-flow-state=success]~.privacy-notice,[data-flow-state=configuring] .privacy-notice,[data-flow-state=processing] .privacy-notice,[data-flow-state=success] .privacy-notice{display:none!important}.compress-tool-workspace{max-width:1040px;margin-inline:auto}.compress-upload-card{display:grid;justify-items:center;gap:var(--space-3);padding:clamp(2.5rem,6vw,4.5rem) var(--space-5);border:2px dashed #93c5fd;border-radius:var(--radius-2xl);background:var(--color-surface);box-shadow:var(--shadow-xl);text-align:center;transition:border-color var(--transition-fast),background-color var(--transition-fast),transform var(--transition-fast)}.compress-upload-card.is-dragover{border-color:var(--color-primary);background:var(--color-primary-light);transform:translateY(-2px)}.compress-upload-icon-wrapper{display:grid;place-items:center;inline-size:5rem;block-size:5rem;color:var(--color-primary);background:var(--color-primary-light);border-radius:var(--radius-full);margin-bottom:var(--space-2)}.compress-upload-icon-main{inline-size:2.6rem;block-size:2.6rem}.compress-upload-title{margin:0;font-size:clamp(1.5rem,3.5vw,2.1rem);font-weight:800;color:var(--color-heading)}.compress-upload-subtitle{margin:0;color:var(--color-muted);font-size:var(--font-size-md)}.compress-select-wrapper{margin-top:var(--space-2)}.compress-select-button{min-inline-size:16rem;padding:1.1rem 2rem;font-size:var(--font-size-xl);font-weight:800;justify-content:center;gap:.75rem;border-radius:var(--radius-xl);box-shadow:0 10px 25px -5px #2563eb66}.compress-drag-hint{margin:var(--space-1) 0 0;color:var(--color-muted);font-size:var(--font-size-sm)}.compress-supported-formats{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:var(--space-2);margin-top:var(--space-3);color:var(--color-muted);font-size:var(--font-size-xs)}.compress-supported-formats .format-badge{padding:.3rem .7rem;border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-primary-dark);font-weight:800;background:var(--color-primary-light)}.compress-supported-formats .format-limit{margin-inline-start:var(--space-2);font-weight:600}.compress-privacy-notice{max-width:760px;margin:var(--space-5) auto 0}.info-section,.compress-info-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-6);margin-block-start:clamp(3.5rem,7vw,5.5rem);margin-block-end:clamp(3rem,6vw,4.5rem);clear:both}.compress-info-card{display:flex;align-items:flex-start;gap:var(--space-4);padding:clamp(1.25rem,3vw,1.75rem);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-2xl);box-shadow:0 4px 20px -2px #0000000a;position:relative;overflow:hidden;transition:transform var(--transition-medium),box-shadow var(--transition-medium),border-color var(--transition-medium)}.compress-info-card:before{content:"";position:absolute;top:0;inset-inline-start:0;inline-size:4px;block-size:100%;background:linear-gradient(180deg,var(--color-primary),#60a5fa);border-radius:var(--radius-full)}.compress-info-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px -4px #2563eb1f;border-color:var(--color-primary-light)}.compress-info-number{display:flex;align-items:center;justify-content:center;inline-size:3.25rem;block-size:3.25rem;min-inline-size:3.25rem;border-radius:var(--radius-xl);background:linear-gradient(135deg,var(--color-primary-light) 0%,#dbeafe 100%);color:var(--color-primary-dark);font-size:var(--font-size-xl);font-weight:900;box-shadow:inset 0 0 0 1px #2563eb33;flex-shrink:0}.compress-info-card>div{flex:1;min-width:0}.compress-info-card h2{margin:0 0 var(--space-2) 0;font-size:var(--font-size-lg);font-weight:800;color:var(--color-heading);line-height:1.35}.compress-info-card p{margin:0;color:var(--color-muted);font-size:var(--font-size-sm);line-height:1.6}.compress-flow{margin-top:var(--space-4);padding:clamp(1rem,3vw,1.75rem);border:1px solid var(--color-border);border-radius:var(--radius-2xl);background:var(--color-surface);box-shadow:var(--shadow-xl)}.compress-stepper{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);margin:0 0 var(--space-5);padding:0;list-style:none}.compress-stepper li{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem .5rem;border-bottom:3px solid var(--color-border);color:var(--color-muted);font-size:var(--font-size-sm);font-weight:800}.compress-stepper li[aria-current=step]{border-color:var(--color-primary);color:var(--color-primary)}.compress-editor-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--space-5);align-items:start}.compress-workspace-main{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-background);min-height:380px}.compress-workspace-toolbar{display:flex;align-items:center;gap:var(--space-3)}.compress-add-badge-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.5rem .9rem;border:1px solid var(--color-border);border-radius:var(--radius-full);background:var(--color-surface);color:var(--color-primary);font-weight:700;cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-sm)}.compress-add-badge-btn:hover{border-color:var(--color-primary);background:var(--color-primary-light);transform:translateY(-1px)}.compress-badge-count{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--color-primary);color:#fff;font-size:.75rem;font-weight:800}.compress-workspace-tip{color:var(--color-muted);font-size:var(--font-size-xs)}.compress-cards-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-4);margin-top:var(--space-2)}.compress-image-card-item{position:relative;display:flex;flex-direction:column;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform var(--transition-fast)}.compress-image-card-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.compress-card-delete-btn{position:absolute;top:8px;left:8px;z-index:5;display:grid;place-items:center;width:26px;height:26px;border:0;border-radius:50%;background:#0f172abf;color:#fff;font-size:.85rem;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background var(--transition-fast)}.compress-card-delete-btn:hover{background:var(--color-error)}.compress-card-thumb-wrapper{display:grid;place-items:center;height:190px;background:repeating-conic-gradient(#f1f5f9,#f1f5f9 25%,#fff 0%,#fff 50%) 50% / 16px 16px;overflow:hidden;border-bottom:1px solid var(--color-border)}.compress-card-thumb-img{max-width:100%;max-height:100%;object-fit:contain}.compress-card-placeholder-icon{font-size:3rem;opacity:.4}.compress-card-details{padding:var(--space-3)}.compress-card-name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--font-size-sm);color:var(--color-heading)}.compress-card-meta-text{display:block;margin-top:2px;color:var(--color-muted);font-size:var(--font-size-xs)}.compress-sidebar-panel{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface);box-shadow:var(--shadow-md)}.compress-sidebar-top h2{margin:0 0 4px;font-size:var(--font-size-xl);font-weight:800;color:var(--color-heading)}.compress-sidebar-desc{margin:0;color:var(--color-muted);font-size:var(--font-size-xs);line-height:1.5}.compress-sidebar-body{display:flex;flex-direction:column;gap:var(--space-4)}.compress-slider-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}.compress-slider-header label{font-weight:800;font-size:var(--font-size-sm);color:var(--color-heading)}.compress-quality-badge{color:var(--color-primary);font-size:var(--font-size-lg);font-weight:900}.compress-quality-control input[type=range]{display:block;width:100%;margin-block:var(--space-3) var(--space-1);accent-color:var(--color-primary)}.compress-range-labels{display:flex;justify-content:space-between;color:var(--color-muted);font-size:var(--font-size-xs)}.compress-presets-row{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)}.compress-presets-row .btn{flex:1 1 auto;border:1px solid var(--color-border);color:var(--color-body);background:var(--color-background);font-size:var(--font-size-xs);padding:.4rem .6rem}.compress-presets-row .btn:hover,.compress-presets-row .btn.is-selected{border-color:var(--color-primary);color:var(--color-primary-dark);background:var(--color-primary-light);font-weight:700}.compress-technical-note{display:flex;gap:var(--space-2);padding:var(--space-3);border-radius:var(--radius-md);color:var(--color-muted);background:var(--color-background);font-size:var(--font-size-xs)}.compress-sidebar-bottom{margin-top:var(--space-2)}.compress-sidebar-submit-btn{width:100%;padding:1.05rem var(--space-4);font-size:var(--font-size-lg);font-weight:800;justify-content:center;gap:var(--space-3);border-radius:var(--radius-xl);box-shadow:0 8px 20px -4px #2563eb59}.compress-processing-panel{padding:var(--space-8) var(--space-4);text-align:center}.compress-progress-orb{inline-size:3.8rem;block-size:3.8rem;margin-inline:auto;border:8px solid var(--color-primary-light);border-top-color:var(--color-primary);border-radius:50%;animation:compress-spin .9s linear infinite}@keyframes compress-spin{to{transform:rotate(360deg)}}.compress-success-panel{padding:var(--space-2) var(--space-2);text-align:center}.compress-success-header h2{margin:0 0 var(--space-2);font-size:clamp(1.35rem,3vw,1.8rem);font-weight:800;color:var(--color-heading)}.compress-success-content{max-width:760px;margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}.compress-success-main-action{width:100%;display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}.compress-download-btn-hero{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);padding:.9rem 2rem;font-size:var(--font-size-lg);font-weight:800;border-radius:var(--radius-xl);min-inline-size:16rem;box-shadow:0 8px 24px -4px #2563eb66}.compress-auto-download-notice{display:inline-flex;align-items:center;color:var(--color-success);font-size:var(--font-size-xs);font-weight:600;margin-top:2px}.compress-pulse-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background-color:var(--color-success);box-shadow:0 0 #22c55eb3;animation:compress-pulse 1.6s infinite;margin-inline-end:8px}@keyframes compress-pulse{0%{transform:scale(.95);box-shadow:0 0 #22c55eb3}70%{transform:scale(1);box-shadow:0 0 0 6px #22c55e00}to{transform:scale(.95);box-shadow:0 0 #22c55e00}}.compress-savings-ring-card{display:flex;align-items:center;justify-content:center;gap:var(--space-5);width:100%;max-width:520px;padding:var(--space-5) var(--space-6);background:var(--color-background);border-radius:var(--radius-xl);border:1px solid var(--color-border);text-align:start}.compress-circular-progress{width:110px;height:110px;flex-shrink:0}.compress-svg-chart{width:100%;height:100%;transform:rotate(-90deg)}.compress-svg-chart .circle-bg{fill:none;stroke:#e2e8f0;stroke-width:3.2}.compress-svg-chart .circle-fill{fill:none;stroke:var(--color-primary);stroke-width:3.2;stroke-linecap:round;transition:stroke-dasharray .8s ease-in-out}.compress-svg-chart .circle-text{fill:var(--color-heading);font-size:8.5px;font-weight:900;text-anchor:middle;transform:rotate(90deg);transform-origin:18px 18px}.compress-savings-info-box{display:flex;flex-direction:column;gap:var(--space-1)}.compress-savings-title-text{margin:0;font-size:var(--font-size-md);color:var(--color-heading)}.compress-savings-title-text strong{color:var(--color-primary-dark);font-size:var(--font-size-lg)}.compress-savings-sizes-line{display:flex;align-items:center;gap:var(--space-2);margin-top:4px;font-size:var(--font-size-sm);color:var(--color-muted)}.compress-savings-sizes-line .size-old{text-decoration:line-through;opacity:.7}.compress-savings-sizes-line .size-arrow{color:var(--color-primary);font-weight:800}.compress-savings-sizes-line .size-new{color:var(--color-success);font-weight:800;font-size:var(--font-size-base)}.compress-secondary-actions-row{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3);margin-top:var(--space-2)}.compress-secondary-actions-row .btn{min-inline-size:10rem;justify-content:center}.compress-next-tools-box{width:100%;margin-top:var(--space-6);padding-top:var(--space-6);border-top:1px dashed var(--color-border)}.compress-next-tools-heading{font-size:var(--font-size-lg);font-weight:800;margin-bottom:var(--space-4);color:var(--color-heading);text-align:start}.compress-next-tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--space-3);width:100%}.compress-next-card{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-4) var(--space-3);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);text-decoration:none;color:var(--color-body);font-size:var(--font-size-xs);font-weight:700;text-align:center;transition:all var(--transition-fast)}.compress-next-card:hover{border-color:var(--color-primary);transform:translateY(-2px);box-shadow:var(--shadow-md);color:var(--color-primary-dark)}.next-icon-box{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-md)}.next-icon-box svg{width:22px;height:22px}.next-icon-box.blue{background:#eff6ff;color:#2563eb}.next-icon-box.cyan{background:#ecfeff;color:#0891b2}.next-icon-box.teal{background:#f0fdf4;color:#0d9488}.next-icon-box.amber{background:#fffbeb;color:#d97706}.next-icon-box.indigo{background:#eef2ff;color:#4f46e5}.next-icon-box.purple{background:#faf5ff;color:#9333ea}@media(max-width:860px){.compress-editor-layout{grid-template-columns:1fr}.compress-sidebar-panel{order:2}.compress-workspace-main{order:1;min-height:280px}.compress-info-section{grid-template-columns:1fr}.compress-savings-ring-card{flex-direction:column;text-align:center}.compress-next-tools-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:580px){.compress-next-tools-grid{grid-template-columns:repeat(2,1fr)}.compress-download-btn-hero{width:100%;min-inline-size:0}}@media(prefers-reduced-motion:reduce){.compress-progress-orb,.compress-pulse-dot{animation:none}}.convert-flow{margin-top:var(--space-4);padding:clamp(1rem,3vw,1.75rem);border:1px solid var(--color-border);border-radius:var(--radius-2xl);background:var(--color-surface);box-shadow:var(--shadow-xl)}.convert-stepper{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);margin:0 0 var(--space-5);padding:0;list-style:none}.convert-stepper li{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem .5rem;border-bottom:3px solid var(--color-border);color:var(--color-muted);font-size:var(--font-size-sm);font-weight:800}.convert-stepper li[aria-current=step]{border-color:var(--color-primary);color:var(--color-primary)}.convert-file-item-card{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--space-5);background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-xl);transition:all var(--transition-fast)}.convert-file-item-card.is-processing{background:#faf5ff;border-color:#e9d5ff}.convert-file-item-card.is-success{background:#f0fdf4;border-color:#bbf7d0}.convert-file-info{display:flex;align-items:center;gap:var(--space-3);flex:1;min-width:0}.convert-file-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:var(--radius-md);background:var(--color-primary-light);color:var(--color-primary);flex-shrink:0}.convert-file-icon svg{width:22px;height:22px}.convert-file-icon.spinning svg{animation:convert-spin 1.2s linear infinite}.convert-file-icon.success{background:#dcfce7;color:#16a34a}@keyframes convert-spin{to{transform:rotate(360deg)}}.convert-file-details{display:flex;flex-direction:column;gap:2px;min-width:0}.convert-file-name{font-size:var(--font-size-md);font-weight:800;color:var(--color-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.convert-file-size{font-size:var(--font-size-xs);color:var(--color-muted);font-weight:600}.convert-target-selector-box{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0}.convert-to-label{font-size:var(--font-size-sm);color:var(--color-muted);font-weight:700}.convert-format-select{padding:.5rem 1rem .5rem 2rem;border:2px solid var(--color-primary);border-radius:var(--radius-lg);background:var(--color-surface);color:var(--color-primary-dark);font-size:var(--font-size-base);font-weight:800;cursor:pointer;transition:all var(--transition-fast);outline:none}.convert-format-select:hover,.convert-format-select:focus{border-color:var(--color-primary-dark);box-shadow:0 0 0 3px #2563eb33}.convert-badge{display:inline-flex;align-items:center;padding:.35rem .8rem;border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:800;flex-shrink:0}.convert-badge.badge-ready{background:#dcfce7;color:#15803d;border:1px solid #86efac}.convert-badge.badge-processing{background:#fef3c7;color:#b45309;border:1px solid #fde68a;animation:convert-pulse 1.4s infinite}.convert-badge.badge-success{background:#dbeafe;color:#1d4ed8;border:1px solid #93c5fd}@keyframes convert-pulse{0%,to{opacity:1}50%{opacity:.6}}.convert-remove-btn{display:grid;place-items:center;width:32px;height:32px;border:none;border-radius:50%;background:transparent;color:var(--color-muted);cursor:pointer;flex-shrink:0;transition:all var(--transition-fast)}.convert-remove-btn:hover{background:#fee2e2;color:#dc2626}.convert-remove-btn svg{width:18px;height:18px}.convert-bottom-action-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-5);flex-wrap:wrap}.convert-btn-hero{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:.95rem 2.4rem;font-size:var(--font-size-lg);font-weight:800;border-radius:var(--radius-xl);min-inline-size:14rem;box-shadow:0 8px 24px -4px #2563eb66}.convert-btn-hero svg{width:20px;height:20px}.convert-processing-panel{padding:var(--space-6) var(--space-3);text-align:center}.convert-processing-header h2{margin:0 0 var(--space-2);font-size:clamp(1.4rem,3.5vw,1.9rem);font-weight:800;color:var(--color-heading)}.convert-processing-header p{margin:0 0 var(--space-5);color:var(--color-muted);font-size:var(--font-size-sm)}.convert-progress-orb-wrapper{margin-top:var(--space-4);display:flex;justify-content:center}.convert-progress-orb{inline-size:3.4rem;block-size:3.4rem;border:7px solid var(--color-primary-light);border-top-color:var(--color-primary);border-radius:50%;animation:convert-spin .9s linear infinite}.convert-progress-card,.compress-progress-card{max-width:520px;margin:var(--space-4) auto 0;padding:var(--space-4) var(--space-5);background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-xl);display:flex;flex-direction:column;gap:var(--space-3);text-align:start}.convert-progress-bar-track,.compress-progress-bar-track{width:100%;height:10px;background:#e2e8f0;border-radius:var(--radius-full);overflow:hidden;position:relative}.convert-progress-bar-fill,.compress-progress-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--color-primary),#3b82f6);border-radius:var(--radius-full);transition:width .1s linear}.convert-progress-info,.compress-progress-info{display:flex;align-items:center;justify-content:space-between;font-size:var(--font-size-xs);color:var(--color-muted);font-weight:700}.convert-progress-pct-num,.compress-progress-pct-num{color:var(--color-primary);font-size:var(--font-size-sm);font-weight:900}.convert-success-panel{padding:var(--space-2) var(--space-2);text-align:center}.convert-success-header h2{margin:0 0 var(--space-1);font-size:clamp(1.4rem,3.5vw,1.9rem);font-weight:800;color:var(--color-heading)}.convert-success-header p{margin:0 0 var(--space-4);color:var(--color-muted);font-size:var(--font-size-sm)}.convert-auto-download-notice{display:inline-flex;align-items:center;justify-content:center;color:var(--color-success);font-size:var(--font-size-xs);font-weight:700;margin-top:var(--space-3)}.convert-pulse-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background-color:var(--color-success);box-shadow:0 0 #22c55eb3;animation:convert-pulse-dot 1.6s infinite;margin-inline-end:8px}@keyframes convert-pulse-dot{0%{transform:scale(.95);box-shadow:0 0 #22c55eb3}70%{transform:scale(1);box-shadow:0 0 0 6px #22c55e00}to{transform:scale(.95);box-shadow:0 0 #22c55e00}}.convert-secondary-actions-row{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3);margin-top:var(--space-4)}.convert-secondary-actions-row .btn{min-inline-size:10rem;justify-content:center}.convert-next-tools-box{width:100%;margin-top:var(--space-5);padding-top:var(--space-5);border-top:1px dashed var(--color-border)}.convert-next-tools-heading{font-size:var(--font-size-md);font-weight:800;margin-bottom:var(--space-3);color:var(--color-heading);text-align:start}.convert-next-tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:var(--space-3);width:100%}.convert-next-card{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-2);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);text-decoration:none;color:var(--color-body);font-size:var(--font-size-xs);font-weight:700;text-align:center;transition:all var(--transition-fast)}.convert-next-card:hover{border-color:var(--color-primary);transform:translateY(-2px);box-shadow:var(--shadow-md);color:var(--color-primary-dark)}@media(max-width:640px){.convert-file-item-card{flex-wrap:wrap;gap:var(--space-3)}.convert-target-selector-box{margin-inline-start:auto}.convert-bottom-action-bar{flex-direction:column-reverse}.convert-btn-hero{width:100%}.convert-next-tools-grid{grid-template-columns:repeat(2,1fr)}}.collage-flow{margin-top:var(--space-4)}.collage-stepper{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);margin:0 0 var(--space-5);padding:0;list-style:none}.collage-stepper li{display:flex;align-items:center;justify-content:center;padding:.75rem .5rem;border-bottom:3px solid var(--color-border);color:var(--color-muted);font-size:var(--font-size-sm);font-weight:800}.collage-stepper li[aria-current=step]{border-color:var(--color-primary);color:var(--color-primary)}.collage-editor-layout{display:grid;grid-template-columns:320px 1fr;gap:var(--space-5);align-items:start}.collage-controls-sidebar{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm)}.collage-control-group{display:flex;flex-direction:column;gap:var(--space-2);padding-bottom:var(--space-3);border-bottom:1px dashed var(--color-border)}.collage-control-group:last-child{border-bottom:none;padding-bottom:0}.collage-group-title{font-size:var(--font-size-xs);font-weight:800;color:var(--color-heading)}.collage-template-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2)}.collage-template-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:var(--space-2);background:var(--color-background);border:2px solid var(--color-border);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast)}.collage-template-card:hover,.collage-template-card.is-active{border-color:var(--color-primary);background:#eff6ff}.collage-tpl-preview{display:block;width:44px;height:32px;background:#cbd5e1;border-radius:4px;position:relative}.collage-template-card.is-active .collage-tpl-preview{background:#3b82f6}.collage-tpl-label{font-size:11px;font-weight:700;color:var(--color-body);text-align:center}.collage-slider-row{display:flex;justify-content:space-between;align-items:center;font-size:var(--font-size-xs);font-weight:700;color:var(--color-heading)}.collage-val-badge{color:var(--color-primary);font-weight:800}.collage-dual-field{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}.collage-dual-field label{font-size:11px;font-weight:700;color:var(--color-muted);display:block;margin-bottom:2px}.collage-color-picker-row{display:flex;align-items:center;justify-content:space-between;font-size:var(--font-size-xs);font-weight:700;margin-top:var(--space-2)}.collage-color-picker-row input[type=color]{border:1px solid var(--color-border);border-radius:4px;width:36px;height:28px;cursor:pointer}.collage-main-stage{display:flex;flex-direction:column;gap:var(--space-4)}.collage-canvas-container{display:flex;justify-content:center;align-items:center;padding:var(--space-4);background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-xl);min-height:380px;overflow:hidden}.collage-live-canvas{max-width:100%;max-height:520px;border-radius:var(--radius-md);box-shadow:var(--shadow-md);object-fit:contain}.collage-file-strip{padding:var(--space-3) var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl)}.collage-strip-header{display:flex;justify-content:space-between;align-items:center;font-size:var(--font-size-xs);font-weight:800;color:var(--color-heading);margin-bottom:var(--space-2)}.collage-thumbnails-grid{display:flex;gap:var(--space-2);flex-wrap:wrap}.collage-thumb-item{display:flex;align-items:center;gap:6px;padding:4px 8px;background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:11px;font-weight:700}.collage-thumb-num{background:var(--color-primary);color:#fff;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:10px}.collage-thumb-name{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.collage-thumb-actions{display:flex;gap:2px}.collage-thumb-actions button{border:none;background:transparent;cursor:pointer;color:var(--color-muted);font-size:11px;padding:1px 3px}.collage-thumb-actions button:hover{color:var(--color-primary)}.btn-remove-thumb:hover{color:#dc2626!important}.collage-submit-bar{display:flex;justify-content:flex-end;width:100%}.collage-btn-submit{width:100%;max-width:360px;margin-inline-start:auto;padding:.85rem 1.75rem;font-size:var(--font-size-md);font-weight:800;border-radius:var(--radius-xl);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2)}.collage-btn-submit svg{width:22px;height:22px;flex-shrink:0}.btn svg{width:20px;height:20px;flex-shrink:0}.collage-processing-panel,.collage-success-panel{padding:var(--space-6) var(--space-3);text-align:center;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl)}.collage-file-item-card{max-width:520px;margin:var(--space-4) auto;display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);background:#f0fdf4;border:1px solid #bbf7d0;border-radius:var(--radius-xl)}@media(max-width:900px){.collage-editor-layout{grid-template-columns:1fr}.collage-controls-sidebar{order:2}.collage-main-stage{order:1}}