*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #f9f9fc;--surface: rgba(0, 0, 0, .03);--surface-hover: rgba(0, 0, 0, .06);--border: rgba(0, 0, 0, .09);--border-accent: rgba(124, 58, 237, .3);--accent: #7c3aed;--accent-light: #6d28d9;--accent-grad: linear-gradient(135deg, #6366f1, #a855f7);--progress-grad: linear-gradient(90deg, #6366f1, #ec4899);--text: #111827;--text-sub: #4b5563;--text-muted: #9ca3af;--success: #059669;--success-bg: rgba(5, 150, 105, .1);--success-border: rgba(5, 150, 105, .22);--warn: #b45309;--warn-bg: rgba(180, 83, 9, .08);--warn-border: rgba(180, 83, 9, .22);--error: #dc2626;--error-bg: rgba(220, 38, 38, .08);--error-border: rgba(220, 38, 38, .22);--modal-bg: #ffffff;--modal-border: rgba(0, 0, 0, .1);--dropdown-bg: #ffffff;--dropdown-shadow: 0 12px 40px rgba(0, 0, 0, .12);--mobile-bar-bg: rgba(249, 249, 252, .95);--slider-track: rgba(0, 0, 0, .1);--thumb-bg: rgba(0, 0, 0, .04);--img-wrap-bg: rgba(0, 0, 0, .03);--progress-track: rgba(0, 0, 0, .08);--modal-shadow: 0 24px 80px rgba(0, 0, 0, .15);--body-bg-a: rgba(99, 102, 241, .05);--body-bg-b: rgba(168, 85, 247, .05);--body-bg-c: rgba(124, 58, 237, .04);--font: "Inter", system-ui, -apple-system, sans-serif;--radius: 12px;--radius-sm: 8px;--trans: .18s ease}[data-theme=dark]{--bg: #09090f;--surface: rgba(255, 255, 255, .04);--surface-hover: rgba(255, 255, 255, .07);--border: rgba(255, 255, 255, .08);--border-accent: rgba(124, 58, 237, .35);--accent: #7c3aed;--accent-light: #a78bfa;--accent-grad: linear-gradient(135deg, #6366f1, #a855f7);--progress-grad: linear-gradient(90deg, #6366f1, #ec4899);--text: #e2e8f0;--text-sub: #94a3b8;--text-muted: #64748b;--success: #10b981;--success-bg: rgba(16, 185, 129, .1);--success-border: rgba(16, 185, 129, .2);--warn: #f59e0b;--warn-bg: rgba(245, 158, 11, .1);--warn-border: rgba(245, 158, 11, .2);--error: #f87171;--error-bg: rgba(248, 113, 113, .1);--error-border: rgba(248, 113, 113, .2);--modal-bg: #130f27;--modal-border: rgba(255, 255, 255, .1);--dropdown-bg: #1a1528;--dropdown-shadow: 0 12px 40px rgba(0, 0, 0, .55);--mobile-bar-bg: rgba(9, 9, 15, .94);--slider-track: rgba(255, 255, 255, .1);--thumb-bg: rgba(255, 255, 255, .04);--img-wrap-bg: rgba(255, 255, 255, .02);--progress-track: rgba(255, 255, 255, .07);--modal-shadow: 0 24px 80px rgba(0, 0, 0, .6);--body-bg-a: rgba(99, 102, 241, .07);--body-bg-b: rgba(168, 85, 247, .07);--body-bg-c: rgba(124, 58, 237, .05)}html{font-size:16px;scroll-behavior:smooth}body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh;background-image:radial-gradient(ellipse at 15% 50%,var(--body-bg-a) 0%,transparent 55%),radial-gradient(ellipse at 85% 15%,var(--body-bg-b) 0%,transparent 55%),radial-gradient(ellipse at 50% 100%,var(--body-bg-c) 0%,transparent 50%);background-attachment:fixed;transition:background-color .25s ease,color .25s ease}.container{max-width:900px;margin:0 auto;padding:0 24px}.site-header{padding:36px 0 0}.header-layout{position:relative;display:flex;justify-content:center;align-items:flex-start;padding-bottom:4px}.header-center{text-align:center}.logo{display:inline-flex;align-items:center;gap:10px;margin-bottom:10px}.logo-icon{width:28px;height:28px;color:var(--accent-light)}.logo-text{font-size:22px;font-weight:700;letter-spacing:-.5px;background:var(--accent-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.tagline{color:var(--text-sub);font-size:14px;letter-spacing:.1px}.header-right{position:absolute;right:0;top:0;display:flex;align-items:center;gap:6px}.theme-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text-sub);cursor:pointer;transition:all var(--trans);font-family:var(--font);flex-shrink:0}.theme-btn:hover{border-color:var(--accent-light);color:var(--accent-light);background:var(--surface-hover)}.theme-btn svg{display:block}.lang-switcher{position:relative}.lang-btn{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:20px;border:1px solid var(--border);background:var(--surface);color:var(--text-sub);font-size:12px;font-weight:600;cursor:pointer;transition:all var(--trans);font-family:var(--font);white-space:nowrap;line-height:1;height:32px}.lang-btn:hover{border-color:var(--accent-light);color:var(--accent-light);background:var(--surface-hover)}.lang-chevron{transition:transform var(--trans)}.lang-btn[aria-expanded=true] .lang-chevron{transform:rotate(180deg)}.lang-dropdown{position:absolute;right:0;top:calc(100% + 6px);min-width:170px;max-height:300px;overflow-y:auto;background:var(--dropdown-bg);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--dropdown-shadow);z-index:500;list-style:none;padding:4px;animation:dropdownIn .14s ease}@keyframes dropdownIn{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.lang-dropdown[hidden]{display:none}.lang-option{padding:8px 12px;border-radius:5px;font-size:13px;color:var(--text-sub);cursor:pointer;transition:background var(--trans),color var(--trans)}.lang-option:hover{background:var(--surface-hover);color:var(--text)}.lang-option.active{color:var(--accent-light);font-weight:600;background:#7c3aed1a}.lang-option:focus{outline:none;background:var(--surface-hover);color:var(--text)}.main-content{padding:28px 0 48px}.upload-section{margin-bottom:16px}.upload-zone{border:2px dashed var(--border);border-radius:var(--radius);padding:52px 24px;text-align:center;cursor:pointer;transition:border-color var(--trans),background var(--trans),box-shadow var(--trans),transform var(--trans);background:var(--surface);outline:none}.upload-zone:hover,.upload-zone:focus-visible,.upload-zone.drag-over{border-color:var(--accent);border-style:solid;background:#7c3aed0f;box-shadow:0 0 0 4px #7c3aed14,0 0 32px #7c3aed1a}.upload-zone.drag-over{transform:scale(1.005)}.upload-icon{color:var(--accent-light);margin-bottom:18px;display:flex;justify-content:center}.upload-icon svg{width:52px;height:52px}.upload-title{font-size:20px;font-weight:600;margin-bottom:8px}.upload-subtitle{color:var(--text-sub);font-size:14px;margin-bottom:20px}.upload-formats{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.format-badge{background:#7c3aed1a;border:1px solid rgba(124,58,237,.25);color:var(--accent-light);padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;letter-spacing:.4px}.controls-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px 24px;margin-bottom:16px}.controls-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:20px}.control-group{display:flex;flex-direction:column;gap:10px}.control-label{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:600;color:var(--text-sub);text-transform:uppercase;letter-spacing:.6px;cursor:default}.control-value{font-size:17px;font-weight:700;color:var(--accent-light);text-transform:none;letter-spacing:0}.quality-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;outline:none;cursor:pointer;background:linear-gradient(to right,#6366f1 0%,#a855f7 var(--val, 85%),var(--slider-track) var(--val, 85%),var(--slider-track) 100%)}.quality-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 0 0 3px #6366f159;transition:box-shadow var(--trans)}.quality-slider::-webkit-slider-thumb:hover{box-shadow:0 0 0 5px #6366f166}.quality-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;cursor:pointer;border:none;box-shadow:0 0 0 3px #6366f159}.slider-hints{display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted);margin-top:2px}.ratio-buttons{display:flex;gap:6px;flex-wrap:wrap}.ratio-btn{padding:6px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:transparent;color:var(--text-sub);font-size:13px;font-weight:500;cursor:pointer;transition:all var(--trans);font-family:var(--font);line-height:1}.ratio-btn:hover{border-color:var(--accent-light);color:var(--accent-light)}.ratio-btn.active{background:var(--accent-grad);border-color:transparent;color:#fff;font-weight:600}.action-bar{display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid var(--border);gap:12px;flex-wrap:wrap}.stats{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-sub)}.stat-item{display:flex;align-items:center;gap:4px}.stat-number{font-weight:600;color:var(--text)}.stat-number.accent{color:var(--success)}.stat-divider{color:var(--text-muted)}.action-buttons{display:flex;gap:8px;align-items:center}.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--radius-sm);border:1px solid transparent;font-size:14px;font-weight:600;cursor:pointer;transition:all var(--trans);font-family:var(--font);white-space:nowrap;line-height:1}.btn:disabled{opacity:.38;cursor:not-allowed}.btn:disabled:hover{transform:none!important;box-shadow:none!important;opacity:.38!important}.btn-primary{background:var(--accent-grad);color:#fff;box-shadow:0 2px 12px #7c3aed40}.btn-primary:not(:disabled):hover{opacity:.92;box-shadow:0 4px 20px #7c3aed73;transform:translateY(-1px)}.btn-primary:not(:disabled):active{transform:translateY(0)}.btn-secondary{background:var(--surface);border-color:var(--border);color:var(--text-sub)}.btn-secondary:not(:disabled):hover{background:var(--surface-hover);border-color:var(--border-accent);color:var(--text)}.btn-sm{padding:6px 12px;font-size:13px}.btn-icon{padding:7px;border-radius:6px;background:transparent;border:1px solid transparent;color:var(--text-muted);cursor:pointer;transition:all var(--trans);display:inline-flex;align-items:center;justify-content:center;font-family:var(--font);line-height:0}.btn-icon:hover{background:var(--surface-hover);border-color:var(--border);color:var(--text)}.btn-icon.btn-danger:hover{background:var(--error-bg);border-color:var(--error-border);color:var(--error)}.btn-icon.btn-download:hover,.btn-icon.btn-view:hover{background:#6366f11a;border-color:#6366f133;color:var(--accent-light)}.image-list-section{min-height:80px}.image-list{display:flex;flex-direction:column;gap:10px}.empty-state{text-align:center;padding:48px 24px;color:var(--text-muted);font-size:14px;display:flex;flex-direction:column;align-items:center;gap:14px}.empty-state .empty-icon svg{width:56px;height:56px;opacity:.3}.empty-state.hidden{display:none}.image-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;display:flex;gap:14px;align-items:flex-start;transition:border-color var(--trans),background var(--trans)}.image-item:hover{border-color:var(--border-accent)}.image-item.done{border-color:var(--success-border)}.image-item.error{border-color:var(--error-border)}.item-thumb{width:72px;height:72px;border-radius:var(--radius-sm);object-fit:cover;flex-shrink:0;background:var(--thumb-bg);cursor:pointer;transition:opacity var(--trans);display:block}.item-thumb:hover{opacity:.82}.item-body{flex:1;min-width:0}.item-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px}.item-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px;color:var(--text-sub);margin-bottom:5px}.item-size-before{color:var(--text-muted);text-decoration:line-through}.item-arrow{color:var(--text-muted)}.item-size-after{font-weight:600;color:var(--text)}.item-badge{padding:2px 7px;border-radius:20px;font-size:11px;font-weight:700}.badge-good{background:var(--success-bg);color:var(--success);border:1px solid var(--success-border)}.badge-ok{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-border)}.badge-zero{background:var(--surface-hover);color:var(--text-muted);border:1px solid var(--border)}.item-dimensions{font-size:12px;color:var(--text-muted);margin-top:2px}.item-status{font-size:13px;color:var(--text-muted)}.item-status.is-error{color:var(--error)}.item-progress{margin-top:8px}.progress-bg{height:4px;background:var(--progress-track);border-radius:2px;overflow:hidden}.progress-fill{height:100%;border-radius:2px;background:var(--progress-grad);background-size:200% 100%;transition:width .25s ease;width:0%}.progress-fill.animating{animation:shimmer 1.6s linear infinite}@keyframes shimmer{0%{background-position:200% center}to{background-position:-200% center}}.progress-text{font-size:11px;color:var(--text-muted);margin-top:3px}.item-actions{display:flex;flex-direction:column;gap:3px;align-items:flex-end;flex-shrink:0;margin-top:2px}.seo-content{border-top:1px solid var(--border);padding:64px 0 80px}.seo-block{margin-bottom:52px}.seo-section-title{font-size:17px;font-weight:700;color:var(--text);margin-bottom:18px;display:flex;align-items:center;gap:10px}.seo-section-title:before{content:"";display:inline-block;width:3px;height:17px;background:var(--accent-grad);border-radius:2px;flex-shrink:0}.seo-features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.seo-feat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 16px;display:flex;flex-direction:column;gap:10px;transition:border-color var(--trans),background var(--trans),transform var(--trans)}.seo-feat-card:hover{border-color:var(--border-accent);background:var(--surface-hover);transform:translateY(-2px)}.seo-feat-icon{color:var(--accent-light);display:flex}.seo-feat-text{font-size:13px;color:var(--text-sub);line-height:1.6}.seo-formats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.seo-format-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;display:flex;flex-direction:column;gap:5px;transition:border-color var(--trans),background var(--trans)}.seo-format-card:hover{border-color:var(--border-accent);background:var(--surface-hover)}.seo-format-name{font-size:16px;font-weight:800;color:var(--accent-light);letter-spacing:.4px}.seo-format-desc{font-size:12px;color:var(--text-muted);line-height:1.5}.seo-steps-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}.seo-step{display:flex;align-items:center;gap:18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;transition:border-color var(--trans),background var(--trans)}.seo-step:hover{border-color:var(--border-accent);background:var(--surface-hover)}.seo-step-num{font-size:28px;font-weight:800;background:var(--accent-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;flex-shrink:0;min-width:32px;text-align:center}.seo-step-text{font-size:14px;color:var(--text-sub);line-height:1.6}.seo-privacy-card{display:flex;gap:22px;align-items:flex-start;background:#7c3aed0d;border:1px solid var(--border-accent);border-radius:var(--radius);padding:24px 28px}.seo-privacy-icon{color:var(--accent-light);display:flex;flex-shrink:0;margin-top:2px}.seo-privacy-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:8px}.seo-privacy-text{font-size:13px;color:var(--text-sub);line-height:1.75}.site-footer{border-top:1px solid var(--border);padding:20px 0;text-align:center;color:var(--text-muted);font-size:13px}.modal-overlay{position:fixed;inset:0;background:#0000008c;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}.modal-overlay[hidden]{display:none}.modal{background:var(--modal-bg);border:1px solid var(--modal-border);border-radius:16px;max-width:820px;width:100%;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--modal-shadow);animation:modalIn .22s cubic-bezier(.34,1.35,.64,1)}@keyframes modalIn{0%{opacity:0;transform:scale(.94) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--border)}.modal-title{font-size:15px;font-weight:600}.modal-close{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:6px;display:flex;transition:color var(--trans);font-family:var(--font);line-height:0}.modal-close:hover{color:var(--text)}.modal-body{padding:22px;overflow-y:auto}.compare-container{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:start}.compare-side{display:flex;flex-direction:column;gap:10px}.compare-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--text-sub);text-align:center}.compare-img-wrap{background:var(--img-wrap-bg);border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border)}.compare-img{width:100%;object-fit:contain;max-height:52vh;display:block}.compare-info{text-align:center;font-size:13px;color:var(--text-sub);line-height:1.7}.compare-divider{width:1px;background:var(--border);align-self:stretch;margin-top:28px}.mobile-bottom-bar{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--mobile-bar-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--border);padding:10px 20px;z-index:50;align-items:center;justify-content:space-between;gap:12px}.mobile-quality-label{font-size:14px;color:var(--text-sub)}.mobile-quality-label strong{color:var(--text)}.notification{position:fixed;top:20px;right:20px;padding:11px 18px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;z-index:200;max-width:320px;animation:notifIn .25s ease;pointer-events:none}@keyframes notifIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.notif-error{background:var(--error-bg);border:1px solid var(--error-border);color:var(--error)}.notif-info{background:#6366f11a;border:1px solid rgba(99,102,241,.25);color:var(--accent-light)}[dir=rtl] .header-layout{flex-direction:row-reverse}[dir=rtl] .header-right,[dir=rtl] .lang-dropdown{right:auto;left:0}[dir=rtl] .slider-hints,[dir=rtl] .item-meta,[dir=rtl] .action-bar,[dir=rtl] .action-buttons{flex-direction:row-reverse}[dir=rtl] .item-actions{align-items:flex-start}[dir=rtl] .seo-content ul,[dir=rtl] .seo-content ol{padding-left:0;padding-right:22px}[dir=rtl] .notification{right:auto;left:20px}@media(max-width:768px){.container{padding:0 16px}.site-header{padding-top:24px}.upload-zone{padding:36px 16px}.upload-title{font-size:17px}.controls-grid{grid-template-columns:1fr;gap:18px}.action-bar{flex-direction:column;align-items:stretch}.action-buttons{flex-direction:row}.action-buttons .btn{flex:1;justify-content:center}.main-content{padding-bottom:72px}.mobile-bottom-bar{display:flex}.image-item{gap:10px;padding:12px}.item-thumb{width:60px;height:60px}.item-actions{flex-direction:row;align-self:center;gap:2px}.compare-container{grid-template-columns:1fr;gap:14px}.compare-divider{display:none}.seo-features-grid,.seo-formats-grid{grid-template-columns:repeat(2,1fr)}.seo-privacy-card{padding:20px;gap:16px}.seo-content{padding:48px 0 60px}}@media(max-width:480px){.upload-zone{padding:28px 12px}.controls-panel{padding:16px}.item-thumb{width:52px;height:52px}.item-meta{font-size:12px;gap:4px}.ratio-buttons{gap:4px}.ratio-btn{padding:5px 10px;font-size:12px}.seo-features-grid,.seo-formats-grid{grid-template-columns:repeat(2,1fr);gap:8px}.seo-privacy-card{flex-direction:column;gap:12px;padding:18px}.seo-block{margin-bottom:36px}.lang-btn span:not([class]){display:none}.header-right{gap:4px}}.hidden{display:none!important}