:root{--bg:#f5f4ee;--bg-2:#ebe9df;--card:#fff;--card-2:#faf9f5;--border:#e0ddd0;--border-strong:#c9c5b5;--fg:#15171a;--fg-2:#5a5d63;--muted:#8b8e94;--accent:#d4ff00;--accent-2:#b4e600;--accent-fg:#15171a;--danger:#ff5e3a;--success:#65a30d;--shadow:0 1px 3px #0000000a,0 8px 24px -8px #00000014;--shadow-lg:0 4px 12px #0000000f,0 16px 40px -12px #0000001f;--header-bg:#f5f4eeb3}[data-theme=dark]{--bg:#0a0b0a;--bg-2:#14161a;--card:#14161a;--card-2:#1a1d22;--border:#26292f;--border-strong:#3a3e44;--fg:#f0f0ee;--fg-2:#a8aaa8;--muted:#6b6e72;--accent:#d4ff00;--accent-2:#b4e600;--accent-fg:#0a0b0a;--danger:#ff5e3a;--success:#84cc16;--shadow:0 1px 3px #0000004d,0 8px 24px -8px #0009;--shadow-lg:0 4px 12px #0006,0 16px 40px -12px #000c;--header-bg:#0a0b0ab3}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;overflow-x:hidden;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);min-height:100vh;transition:background-color .35s,color .35s;font-family:Plus Jakarta Sans,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif}.theme-transition,.theme-transition *{transition:background-color .35s,border-color .35s,color .35s!important}.bg-layer{position:fixed;z-index:-1;overflow:hidden;pointer-events:none;inset:0}.grid-pattern{position:absolute;background-image:linear-gradient(var(--border)1px,transparent 1px),linear-gradient(90deg,var(--border)1px,transparent 1px);opacity:.45;mask-image:radial-gradient(at 50% 0%,#000 0%,#0000 75%);-webkit-mask-image:radial-gradient(at 50% 0%,#000 0%,#0000 75%);background-size:64px 64px;inset:0}.glow{position:absolute;filter:blur(100px);border-radius:50%}.glow-1{background:var(--accent);opacity:.2;width:600px;height:600px;top:-300px;right:-150px}.glow-2{background:var(--danger);opacity:.12;width:500px;height:500px;bottom:-200px;left:-100px}[data-theme=dark] .glow-1{opacity:.11}[data-theme=dark] .glow-2{opacity:.08}header{display:flex;padding:.875rem max(1.25rem,env(safe-area-inset-left,0px));padding-right:max(1.25rem,env(safe-area-inset-right,0px));padding-top:calc(.875rem + env(safe-area-inset-top,0px));border-bottom:1px solid var(--border);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:var(--header-bg);position:sticky;z-index:100;justify-content:space-between;align-items: center;gap:.75rem;top:0}.logo{display:flex;align-items: center;gap:.875rem;min-width:0}.logo-mark{background:var(--fg);display:flex;color:var(--accent);position:relative;border-radius:10px;flex-shrink:0;justify-content:center;align-items: center;width:38px;height:38px}[data-theme=dark] .logo-mark{background:var(--accent);color:var(--fg)}.logo-mark svg{width:22px;height:22px}.logo-text{display:flex;flex-direction:column;min-width:0}.logo-name{letter-spacing:-.02em;font-family:Bricolage Grotesque,PingFang SC,Microsoft YaHei,sans-serif;font-size:1.2rem;font-weight:700;line-height:1}.logo-tag{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.25rem;font-family:JetBrains Mono,PingFang SC,monospace;font-size:.65rem}.header-actions{display:flex;flex-shrink:0;align-items: center;gap:.5rem}.theme-toggle{border:1px solid var(--border);background:var(--card);display:flex;cursor:pointer;color:var(--fg);border-radius:10px;justify-content:center;align-items: center;width:38px;height:38px;transition:all .2s;font-family:inherit}.theme-toggle:hover{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}.theme-toggle svg{width:18px;height:18px}.theme-toggle.hidden,[data-theme=light] .icon-moon,[data-theme=dark] .icon-sun{display:none}.lang-toggle{gap:1px;width:auto;min-width:38px;padding:0 8px}.lang-toggle:hover{transform:none}.lang-label{letter-spacing:.02em;font-family:JetBrains Mono,PingFang SC,monospace;font-size:.72rem;font-weight:700}.lang-caret{opacity:.6;font-size:9px}.lang-dropdown{position:relative}.dropdown-menu{position:absolute;background:var(--card-2);border:1px solid var(--border);z-index:200;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;border-radius:12px;margin-top:6px;padding:6px;transition:opacity .2s,transform .2s,visibility .2s;top:100%;left:0;transform:translateY(-8px)}.dropdown-menu.open{opacity:1;visibility:visible;transform:translateY(0)}.dropdown-item{cursor:pointer;color:var(--fg-2);white-space:nowrap;border-radius:8px;padding:9px 14px;transition:all .15s;font-family:Plus Jakarta Sans,PingFang SC,Microsoft YaHei,sans-serif;font-size:13px;line-height:1.4}.dropdown-item:hover{background:var(--bg-2);color:var(--fg)}.lang-menu{min-width:150px;left:auto;right:0}.lang-item{word-break:keep-all}.lang-item.active{background:var(--accent);color:var(--accent-fg);font-weight:600}.lang-item.active:hover{background:var(--accent);color:var(--accent-fg)}.lang-item.active:after{content:"✓";margin-left:6px}.net-dot{background:var(--success);animation:2s ease-in-out infinite pulse;border-radius:50%;flex-shrink:0;width:8px;height:8px}.net-dot.offline{background:var(--danger);animation:none}main{max-width:1280px;margin:0 auto;padding:2rem}.empty-state{text-align:center;padding:2rem 0}.hero{max-width:760px;margin:0 auto 3rem}.hero-badge{display:inline-flex;background:var(--card);border:1px solid var(--border);color:var(--fg-2);border-radius:100px;align-items: center;gap:.5rem;margin-bottom:1.5rem;padding:.375rem .875rem;font-family:JetBrains Mono,PingFang SC,monospace;font-size:.75rem}.badge-dot{background:var(--accent);box-shadow:0 0 8px var(--accent);animation:2s ease-in-out infinite pulse;border-radius:50%;width:6px;height:6px}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.85)}}.hero-title{letter-spacing:-.035em;overflow-wrap:anywhere;margin:0 0 1.5rem;font-family:Bricolage Grotesque,PingFang SC,Microsoft YaHei,sans-serif;font-size:clamp(2.5rem,6vw,4.5rem);font-weight:700;line-height:1.02}.hero-title em{background:linear-gradient(135deg,#84cc16 0%,#65a30d 45%,#dc2626 100%);color:#0000;-webkit-background-clip:text;background-clip:text;font-style:normal;font-weight:500}[data-theme=dark] .hero-title em{background:linear-gradient(135deg,#d4ff00 0%,#84cc16 45%,#ff5e3a 100%);-webkit-background-clip:text;background-clip:text}.hero-subtitle{color:var(--fg-2);max-width:620px;margin:0 auto;font-size:1.1rem;line-height:1.6}.upload-zone{position:relative;border:2px dashed var(--border-strong);background:var(--card);cursor:pointer;border-radius:24px;max-width:640px;margin:0 auto;padding:3.5rem 2rem;transition:all .3s}.upload-zone:hover,.upload-zone.dragging{border-color:var(--accent);background:var(--card-2);box-shadow:var(--shadow-lg);transform:translateY(-2px)}.upload-zone.dragging{box-shadow:0 0 0 8px #d4ff0026,var(--shadow-lg);border-style:solid}.upload-icon-wrapper{background:var(--bg-2);border:1px solid var(--border);display:flex;color:var(--fg);border-radius:20px;justify-content:center;align-items: center;width:72px;height:72px;margin:0 auto 1.5rem;transition:all .3s}.upload-zone:hover .upload-icon-wrapper,.upload-zone.dragging .upload-icon-wrapper{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);transform:scale(1.05)rotate(-3deg)}.upload-icon-wrapper svg{width:30px;height:30px}.upload-text{margin-bottom:.5rem;font-family:Bricolage Grotesque,PingFang SC,Microsoft YaHei,sans-serif;font-size:1.4rem;font-weight:600}.upload-hint{color:var(--fg-2);margin-bottom:1.5rem;font-size:.9rem}.upload-link{color:var(--fg);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font:inherit;background:0 0;border:none;padding:0}.upload-link:hover{color:var(--success)}[data-theme=dark] .upload-link:hover{color:var(--accent)}.upload-formats{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}.upload-formats span{background:var(--bg-2);border:1px solid var(--border);color:var(--fg-2);letter-spacing:.05em;border-radius:6px;padding:.3rem .75rem;font-family:JetBrains Mono,monospace;font-size:.7rem;font-weight:500}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;max-width:760px;margin:3rem auto 0}.feature-card{text-align:left;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1.25rem;transition:all .3s}.feature-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow);transform:translateY(-2px)}.feature-icon{background:var(--bg-2);display:flex;color:var(--fg);border-radius:10px;justify-content:center;align-items: center;width:36px;height:36px;margin-bottom:.875rem}.feature-card h3{margin:0 0 .375rem;font-family:Bricolage Grotesque,PingFang SC,Microsoft YaHei,sans-serif;font-size:.95rem;font-weight:600}.feature-card p{color:var(--fg-2);margin:0;font-size:.8rem;line-height:1.5}.steps-heading{text-transform:uppercase;letter-spacing:.12em;color:var(--muted);display:flex;align-items: center;gap:.75rem;max-width:760px;margin:3rem auto 1.125rem;font-family:JetBrains Mono,PingFang SC,monospace;font-size:.7rem}.steps-heading:after{content:"";background:var(--border);flex:1;height:1px}.steps{display:grid;grid-template-columns:repeat(4,1fr);text-align:left;gap:1.25rem;max-width:760px;margin:0 auto}.step{border-top:2px solid var(--border-strong);position:relative;padding-top:.875rem}.step:before{content:"";position:absolute;background:var(--accent);width:28px;height:2px;top:-2px;left:0}.step-num{color:var(--muted);letter-spacing:.08em;font-family:JetBrains Mono,monospace;font-size:.68rem}.step h4{margin:.3rem 0;font-family:Bricolage Grotesque,PingFang SC,Microsoft YaHei,sans-serif;font-size:.92rem;font-weight:600}.step p{color:var(--fg-2);margin:0;font-size:.75rem;line-height:1.55}.workbench{animation:.4s fade-in}@keyframes fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.workbench-header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items: center;gap:1rem;margin-bottom:1.5rem}.workbench-title{letter-spacing:-.02em;margin:0;font-family:Bricolage Grotesque,PingFang SC,Microsoft YaHei,sans-serif;font-size:1.5rem;font-weight:600}.workbench-actions{display:flex;flex-wrap:wrap;align-items: center;gap:.75rem}.btn-ghost{background:var(--card);border:1px solid var(--border);cursor:pointer;color:var(--fg);display:inline-flex;border-radius:10px;align-items: center;gap:.5rem;min-height:38px;padding:.55rem .875rem;transition:all .2s;font-family:Plus Jakarta Sans,PingFang SC,Microsoft YaHei,sans-serif;font-size:.875rem;font-weight:500}.btn-ghost:hover{background:var(--bg-2);border-color:var(--border-strong)}.mode-toggle{display:inline-flex;background:var(--bg-2);border:1px solid var(--border);border-radius:12px;gap:4px;padding:4px}.mode-btn{display:inline-flex;cursor:pointer;color:var(--fg-2);white-space:nowrap;background:0 0;border:1px solid #0000;border-radius:9px;justify-content:center;align-items: center;gap:.45rem;min-height:34px;padding:.45rem .85rem;transition:all .2s;font-family:Plus Jakarta Sans,PingFang SC,Microsoft YaHei,sans-serif;font-size:.8rem;font-weight:600}.mode-btn svg{flex-shrink:0;width:15px;height:15px}.mode-btn:hover{color:var(--fg)}.mode-btn.active{background:var(--fg);color:var(--bg);border-color:var(--fg);box-shadow:var(--shadow)}.controls{display:grid;grid-template-columns:1fr 1fr;background:var(--card);border:1px solid var(--border);border-radius:16px;gap:1.25rem 1.5rem;margin-bottom:1.5rem;padding:1.5rem}.control-group{display:flex;flex-direction:column;gap:.75rem;transition:opacity .2s}.control-group.disabled{opacity:.4;pointer-events:none}#formatGroup{grid-column:1/-1}.control-label{text-transform:uppercase;letter-spacing:.1em;color:var(--muted);display:flex;justify-content:space-between;align-items: center;gap:.75rem;font-size:.7rem;font-weight:600}.control-value{color:var(--fg);font-family:JetBrains Mono,PingFang SC,monospace;font-size:.85rem;font-weight:500}.format-buttons{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:.5rem}.format-btn{background:var(--bg-2);border:1px solid var(--border);cursor:pointer;color:var(--fg-2);letter-spacing:.05em;border-radius:10px;min-height:44px;padding:.7rem .5rem;transition:all .2s;font-family:JetBrains Mono,monospace;font-size:.75rem;font-weight:600}.format-btn:hover{border-color:var(--border-strong);color:var(--fg)}.format-btn.active{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}#icoSizesGroup,#ddsModeGroup,#oxipngGroup{grid-column:1/-1;border-top:1px dashed var(--border);padding-top:1.25rem}.ico-sizes-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items: flex-start;gap:.75rem 1.25rem}.size-chips{display:flex;flex-wrap:wrap;gap:.5rem}.size-chip{background:var(--bg-2);border:1px solid var(--border);color:var(--fg-2);cursor:pointer;border-radius:8px;min-height:38px;padding:.5rem .85rem;transition:all .15s;font-family:JetBrains Mono,monospace;font-size:.78rem;font-weight:600}.size-chip:hover{border-color:var(--border-strong);color:var(--fg)}.size-chip.active{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.ico-presets{display:flex;flex-wrap:wrap;gap:.5rem}.preset-btn{border:1px dashed var(--border-strong);color:var(--fg-2);cursor:pointer;background:0 0;border-radius:8px;min-height:34px;padding:.4rem .75rem;transition:all .15s;font-family:Plus Jakarta Sans,PingFang SC,Microsoft YaHei,sans-serif;font-size:.72rem;font-weight:600}.preset-btn:hover{color:var(--fg);border-color:var(--fg)}.option-note{color:var(--muted);margin:.75rem 0 0;font-size:.72rem;line-height:1.5}.slider-container{position:relative;padding:.625rem 0}input[type=range]{-webkit-appearance:none;appearance:none;background:linear-gradient(to right,var(--accent)0%,var(--accent)var(--progress,80%),var(--bg-2)var(--progress,80%),var(--bg-2)100%);outline:none;cursor:pointer;border-radius:2px;width:100%;height:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--fg);cursor:pointer;border:3px solid var(--card);box-shadow:0 0 0 1px var(--border-strong),0 2px 4px #0000001a;border-radius:50%;width:18px;height:18px;transition:transform .15s}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}input[type=range]::-moz-range-thumb{background:var(--fg);cursor:pointer;border:3px solid var(--card);box-shadow:0 0 0 1px var(--border-strong);border-radius:50%;width:18px;height:18px}.resize-controls{display:flex;align-items: center;gap:.5rem}.resize-input{background:var(--bg-2);border:1px solid var(--border);color:var(--fg);outline:none;border-radius:8px;flex:1;width:100%;min-width:0;padding:.55rem .75rem;transition:border-color .2s;font-family:JetBrains Mono,monospace;font-size:.85rem}.resize-input:focus{border-color:var(--accent)}.resize-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.resize-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.resize-input[type=number]{-moz-appearance:textfield}.resize-x{color:var(--muted);flex-shrink:0;font-family:JetBrains Mono,monospace;font-size:.85rem}.lock-btn{background:var(--bg-2);border:1px solid var(--border);cursor:pointer;display:flex;color:var(--fg-2);border-radius:8px;flex-shrink:0;justify-content:center;align-items: center;width:38px;height:38px;transition:all .2s}.lock-btn:hover{color:var(--fg)}.lock-btn.active{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}.preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:1.5rem}.preview-card{background:var(--card);border:1px solid var(--border);overflow:hidden;display:flex;border-radius:16px;flex-direction:column}.preview-header{display:flex;border-bottom:1px solid var(--border);flex-wrap:wrap;justify-content:space-between;align-items: center;gap:.75rem;padding:1rem 1.25rem}.preview-label{display:flex;align-items: center;gap:.5rem;font-family:Bricolage Grotesque,PingFang SC,Microsoft YaHei,sans-serif;font-size:1rem;font-weight:600}.preview-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.preview-dot.original{background:var(--fg-2)}.preview-dot.output{background:var(--accent);box-shadow:0 0 8px var(--accent)}.preview-format-badge{background:var(--bg-2);color:var(--fg-2);letter-spacing:.05em;border-radius:6px;padding:.25rem .6rem;font-family:JetBrains Mono,monospace;font-size:.7rem;font-weight:600}.preview-format-badge.output{background:var(--accent);color:var(--accent-fg)}.preview-image-container{background:var(--bg-2);background-image:linear-gradient(45deg,var(--border)25%,transparent 25%),linear-gradient(-45deg,var(--border)25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--border)75%),linear-gradient(-45deg,transparent 75%,var(--border)75%);display:flex;overflow:hidden;position:relative;background-position:0 0,0 12px,12px -12px,-12px 0;background-size:24px 24px;flex:1;justify-content:center;align-items: center;min-height:280px;max-height:420px;padding:1rem}.preview-image-container img{object-fit:contain;border-radius:4px;max-width:100%;max-height:100%;box-shadow:0 4px 20px #0000001a}.preview-meta{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid var(--border);gap:1rem;padding:1rem 1.25rem}.meta-item{display:flex;flex-direction:column;gap:.25rem;min-width:0}.meta-label{text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-size:.65rem;font-weight:600}.meta-value{color:var(--fg);font-family:JetBrains Mono,PingFang SC,monospace;font-size:.875rem;font-weight:500}.meta-value.savings-positive{color:var(--success)}.meta-value.savings-negative{color:var(--danger)}.meta-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.compare-card{margin-bottom:1.5rem}.compare-readout{color:var(--fg-2);background:var(--bg-2);border:1px solid var(--border);letter-spacing:.04em;text-align:center;white-space:nowrap;border-radius:6px;min-width:172px;padding:.32rem .65rem;font-family:JetBrains Mono,PingFang SC,monospace;font-size:.72rem;font-weight:500}.compare-stage{position:relative;display:flex;background:var(--bg-2);background-image:linear-gradient(45deg,var(--border)25%,transparent 25%),linear-gradient(-45deg,var(--border)25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--border)75%),linear-gradient(-45deg,transparent 75%,var(--border)75%);overflow:hidden;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none;background-position:0 0,0 12px,12px -12px,-12px 0;background-size:24px 24px;justify-content:center;align-items: center;height:clamp(300px,56vh,460px)}.compare-frame{position:relative;border-radius:4px}.compare-frame img{position:absolute;object-fit:contain;pointer-events:none;-webkit-user-drag:none;border-radius:4px;width:100%;height:100%;inset:0;box-shadow:0 4px 20px #0000001f}.compare-frame img.pending{opacity:0}.compare-divider{position:absolute;z-index:5;pointer-events:none;background:#fff;width:2px;top:0;bottom:0;left:50%;transform:translate(-50%);box-shadow:0 0 0 1px #00000047,0 0 14px #00000059}.compare-knob{position:absolute;background:var(--accent);color:var(--accent-fg);border:3px solid var(--card);display:flex;cursor:ew-resize;z-index:6;pointer-events:auto;background-clip:padding-box;border-radius:50%;justify-content:center;align-items: center;width:44px;height:44px;transition:transform .15s;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 4px 16px #0000004d}.compare-knob:after{content:"";position:absolute;border-radius:50%;inset:-14px}.compare-knob:hover{transform:translate(-50%,-50%)scale(1.1)}.compare-knob:active{transform:translate(-50%,-50%)scale(.96)}.compare-knob:focus-visible{outline:2px solid var(--fg);outline-offset:3px}.compare-knob svg{pointer-events:none;width:20px;height:20px}.compare-tag{position:absolute;z-index:6;color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);letter-spacing:.06em;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#0d0f1299;border:1px solid #fff3;border-radius:8px;max-width:46%;padding:.3rem .65rem;font-family:JetBrains Mono,PingFang SC,monospace;font-size:.66rem;font-weight:600;top:12px}.compare-tag.tag-left{left:12px}.compare-tag.tag-right{right:12px}.compare-viz{border-top:1px solid var(--border);display:flex;flex-direction:column;gap:.7rem;padding:1.1rem 1.25rem}.viz-row{display:grid;grid-template-columns:92px 1fr 86px;align-items: center;gap:.75rem}.viz-label{display:flex;color:var(--fg-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-items: center;gap:.45rem;min-width:0;font-size:.75rem;font-weight:600}.viz-track{background:var(--bg-2);border:1px solid var(--border);overflow:hidden;border-radius:7px;height:12px}.viz-fill{border-radius:6px;height:100%;transition:width .6s cubic-bezier(.22,1,.36,1)}.viz-fill.fill-orig{background-image:repeating-linear-gradient(-45deg,var(--muted)0 3px,transparent 3px 7px);width:100%}.viz-fill.fill-out{background:var(--accent);width:0%}.viz-size{text-align:right;color:var(--fg);white-space:nowrap;font-family:JetBrains Mono,monospace;font-size:.78rem;font-weight:500}.viz-footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items: center;gap:.5rem 1rem;margin-top:.2rem}.viz-footer-text{color:var(--fg-2);display:inline-flex;align-items: center;gap:.5rem;font-size:.75rem}.viz-savings{font-family:JetBrains Mono,monospace;font-size:.85rem;font-weight:700}.viz-savings.savings-positive{color:var(--success)}.viz-savings.savings-negative{color:var(--danger)}.mode-tabs{display:flex;background:var(--bg-2);border:1px solid var(--border);border-radius:12px;gap:4px;width:max-content;max-width:100%;margin:0 auto 2rem;padding:4px}.mode-tab{cursor:pointer;color:var(--fg-2);background:0 0;border:1px solid #0000;border-radius:9px;min-height:40px;padding:.55rem 1.4rem;transition:all .2s;font:600 .88rem Plus Jakarta Sans,PingFang SC,Microsoft YaHei,sans-serif}.mode-tab:hover{color:var(--fg)}.mode-tab.active{background:var(--fg);color:var(--bg);border-color:var(--fg)}.results-bar{display:flex;background:var(--card);border:1px solid var(--border);border-radius:14px;flex-wrap:wrap;align-items: center;gap:.75rem 1rem;margin-bottom:1.5rem;padding:.85rem 1.1rem}.results-bar-title{text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-size:.7rem;font-weight:600}.results-hint{color:var(--muted);font-size:.75rem}.result-chips{display:flex;flex-wrap:wrap;flex:1;gap:.5rem;min-width:200px}.result-chip{display:inline-flex;background:var(--bg-2);border:1px solid var(--border);cursor:pointer;color:var(--fg-2);border-radius:9px;align-items: center;gap:.5rem;min-height:36px;padding:.5rem .8rem;transition:all .15s;font:600 .78rem JetBrains Mono,PingFang SC,monospace}.result-chip:hover{border-color:var(--border-strong);color:var(--fg)}.result-chip.active{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.result-chip.fail{border-color:var(--danger);color:var(--danger);cursor:default}.result-chip .chip-size{opacity:.85;font-weight:500}.result-chip .chip-save{font-size:.68rem}.result-chip .chip-save.pos{color:var(--success)}.result-chip .chip-save.neg{color:var(--danger)}.result-chip.active .chip-save.pos,.result-chip.active .chip-save.neg{color:var(--accent-fg)}.chip-spin{border:2px solid var(--border-strong);border-top-color:var(--accent);animation:.8s linear infinite spin;border-radius:50%;flex-shrink:0;width:12px;height:12px}.results-bar-actions{display:flex;flex-wrap:wrap;gap:.5rem}.results-bar-actions .btn-secondary{padding:.5rem .9rem;font-size:.8rem}.format-select{letter-spacing:.05em;color:var(--fg-2);background:var(--bg-2);border:1px solid var(--border);cursor:pointer;outline:none;border-radius:6px;max-width:40vw;padding:.3rem .5rem;font:600 .72rem JetBrains Mono,PingFang SC,monospace}.format-select.output{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}.format-select:focus-visible{outline:2px solid var(--accent)}.compare-controls{display:flex;flex-wrap:wrap;align-items: center;gap:.5rem}.compare-vs{color:var(--muted);font:600 .7rem JetBrains Mono,monospace}.batch-settings{display:grid;grid-template-columns:1fr 1fr;background:var(--card);border:1px solid var(--border);border-radius:16px;gap:1.25rem 1.5rem;margin-bottom:1.5rem;padding:1.5rem}#batchFormatGroup{grid-column:1/-1}.batch-drop{display:flex;border:2px dashed var(--border-strong);background:var(--card);cursor:pointer;color:var(--fg-2);text-align:center;border-radius:14px;justify-content:center;align-items: center;gap:.75rem;margin-bottom:1.5rem;padding:1.4rem;transition:all .25s;font-size:.9rem}.batch-drop:hover,.batch-drop.dragging{border-color:var(--accent);background:var(--card-2)}.batch-drop svg{flex-shrink:0;width:20px;height:20px}.batch-toolbar{display:flex;background:var(--card);border:1px solid var(--border);border-radius:14px;flex-wrap:wrap;justify-content:space-between;align-items: center;gap:1rem;margin-bottom:1rem;padding:.85rem 1.1rem}.batch-stats{color:var(--fg-2);display:flex;flex-wrap:wrap;gap:1.25rem;font:500 .78rem JetBrains Mono,PingFang SC,monospace}.batch-stats b{color:var(--fg);font-weight:700}.batch-progress{background:var(--bg-2);border:1px solid var(--border);overflow:hidden;border-radius:4px;height:6px;margin-bottom:1rem}.batch-progress-fill{background:var(--accent);width:0%;height:100%;transition:width .3s}.batch-list{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.5rem}.batch-row{display:grid;grid-template-columns:52px 1.3fr 2fr .7fr auto;background:var(--card);border:1px solid var(--border);animation:.25s fade-in;border-radius:12px;align-items: center;gap:1rem;padding:.75rem 1rem}.batch-thumb{object-fit:cover;background:var(--bg-2);border:1px solid var(--border);border-radius:8px;width:52px;height:52px}.batch-thumb-fallback{background:var(--bg-2);border:1px solid var(--border);display:flex;color:var(--muted);border-radius:8px;justify-content:center;align-items: center;width:52px;height:52px;font:700 .58rem JetBrains Mono,monospace}.batch-file-info{min-width:0}.batch-file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.85rem;font-weight:600}.batch-file-meta{color:var(--muted);margin-top:.2rem;font:500 .68rem JetBrains Mono,PingFang SC,monospace}.batch-out-badges{display:flex;flex-wrap:wrap;gap:.4rem}.out-badge{display:inline-flex;background:var(--bg-2);border:1px solid var(--border);color:var(--fg-2);border-radius:6px;align-items: center;gap:.35rem;padding:.28rem .55rem;font:600 .68rem JetBrains Mono,PingFang SC,monospace}.out-badge.done{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}.out-badge.fail{border-color:var(--danger);color:var(--danger)}.batch-save{color:var(--success);font:600 .8rem JetBrains Mono,monospace}.batch-save.neg{color:var(--danger)}.batch-row-actions{display:flex;gap:.4rem}.icon-btn{border:1px solid var(--border);background:var(--bg-2);cursor:pointer;display:flex;color:var(--fg-2);border-radius:8px;justify-content:center;align-items: center;width:36px;height:36px;transition:all .15s}.icon-btn:hover{color:var(--fg);border-color:var(--border-strong)}.icon-btn svg{width:15px;height:15px}.batch-empty{text-align:center;color:var(--muted);padding:2rem;font-size:.85rem}@media (max-width:900px){.batch-settings{grid-template-columns:1fr}.batch-row{grid-template-columns:44px 1fr auto;row-gap:.6rem}.batch-out-badges,.batch-save{grid-column:1/-1}}.preview-loading{position:absolute;backdrop-filter:blur(4px);display:flex;color:#fff;z-index:10;animation:.2s fade-in;background:#14161abf;flex-direction:column;justify-content:center;align-items: center;gap:.875rem;inset:0}.spinner{border:2px solid #ffffff26;border-top-color:var(--accent);animation:.8s linear infinite spin;border-radius:50%;width:32px;height:32px}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{letter-spacing:.05em;font-family:JetBrains Mono,PingFang SC,monospace;font-size:.8rem}.action-bar{display:flex;background:var(--card);border:1px solid var(--border);border-radius:16px;justify-content:space-between;align-items: center;gap:1rem;padding:1rem 1.25rem}.action-info{display:flex;flex-direction:column;gap:.25rem;min-width:0}.action-info-label{text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-size:.7rem;font-weight:600}.action-info-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:JetBrains Mono,PingFang SC,monospace;font-size:.95rem;font-weight:500}.action-buttons{display:flex;flex-wrap:wrap;flex-shrink:0;gap:.5rem}.btn-secondary{background:var(--bg-2);border:1px solid var(--border);cursor:pointer;color:var(--fg);display:inline-flex;border-radius:10px;justify-content:center;align-items: center;gap:.5rem;min-height:46px;padding:.75rem 1.25rem;transition:all .2s;font-family:Plus Jakarta Sans,PingFang SC,Microsoft YaHei,sans-serif;font-size:.9rem;font-weight:600}.btn-secondary:hover{background:var(--card-2);border-color:var(--border-strong)}.btn-primary{background:var(--accent);color:var(--accent-fg);cursor:pointer;display:inline-flex;border:none;border-radius:10px;align-items: center;gap:.875rem;min-height:46px;padding:.75rem 1.5rem;transition:all .2s;font-family:Plus Jakarta Sans,PingFang SC,Microsoft YaHei,sans-serif;font-size:.95rem;font-weight:700;box-shadow:0 4px 14px #d4ff004d}.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px #d4ff0066}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-primary:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}.download-divider{background:#0003;width:1px;height:16px}.download-info{opacity:.75;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px;font-family:JetBrains Mono,monospace;font-size:.75rem;font-weight:500}footer{padding:2rem 1rem calc(2rem + env(safe-area-inset-bottom,0px));text-align:center;color:var(--muted);border-top:1px solid var(--border);margin-top:4rem;font-size:.825rem}.footer-content{display:flex;flex-wrap:wrap;justify-content:space-between;align-items: center;gap:1rem;max-width:1280px;margin:0 auto}.footer-stats{display:flex;flex-wrap:wrap;gap:.5rem;font-family:JetBrains Mono,monospace;font-size:.75rem}.toast-container{position:fixed;display:flex;z-index:1000;pointer-events:none;flex-direction:column;gap:.5rem;bottom:2rem;right:2rem}.toast{background:var(--card);border:1px solid var(--border);display:flex;box-shadow:var(--shadow-lg);animation:.3s slide-in;pointer-events:auto;border-radius:12px;align-items: center;gap:.75rem;min-width:280px;max-width:400px;padding:.875rem 1.25rem}.toast.success{border-left:3px solid var(--success)}.toast.error{border-left:3px solid var(--danger)}.toast.info{border-left:3px solid var(--accent)}.toast-icon{flex-shrink:0;width:20px;height:20px}.toast.success .toast-icon{color:var(--success)}.toast.error .toast-icon{color:var(--danger)}.toast.info .toast-icon{color:var(--accent)}.toast-content{overflow-wrap:anywhere;font-size:.875rem;font-weight:500;line-height:1.4}@keyframes slide-in{0%{transform:translate(120%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slide-out{to{transform:translate(120%);opacity:0}}.toast.removing{animation:.3s forwards slide-out}.hidden{display:none!important}@media (max-width:900px){.controls{grid-template-columns:1fr;gap:1.25rem}.preview-grid,.features{grid-template-columns:1fr}.preview-meta{grid-template-columns:1fr 1fr}.action-bar{flex-direction:column;align-items:stretch}.action-buttons{justify-content:stretch}.action-buttons button{flex:1;justify-content:center}.steps{grid-template-columns:repeat(2,1fr)}.viz-row{grid-template-columns:68px 1fr 74px}.ico-sizes-row{flex-direction:column;align-items: flex-start}.dds-mode{min-width:100%}}.dds-modes{display:flex;flex-wrap:wrap;gap:.5rem}.dds-mode{display:flex;background:var(--bg-2);border:1px solid var(--border);cursor:pointer;text-align:left;border-radius:10px;flex-direction:column;flex:1;align-items: flex-start;gap:.2rem;min-width:150px;padding:.7rem .9rem;transition:all .15s;font-family:Plus Jakarta Sans,PingFang SC,Microsoft YaHei,sans-serif}.dds-mode-name{color:var(--fg);font-family:JetBrains Mono,monospace;font-size:.78rem;font-weight:600}.dds-mode-desc{color:var(--muted);font-size:.7rem}.dds-mode:hover{border-color:var(--border-strong)}.dds-mode.active{background:var(--accent);border-color:var(--accent)}.dds-mode.active .dds-mode-name{color:var(--accent-fg)}.dds-mode.active .dds-mode-desc{color:var(--accent-fg);opacity:.75}@media (max-width:640px){main{padding:1rem}header{padding-left:max(1rem,env(safe-area-inset-left,0px));padding-right:max(1rem,env(safe-area-inset-right,0px))}.logo{gap:.6rem}.logo-tag{display:none}.hero-title{font-size:2.25rem}.hero-subtitle{font-size:1rem}.upload-zone{padding:2.5rem 1rem}.preview-meta{grid-template-columns:1fr 1fr}.workbench-header{flex-direction:column;align-items:stretch}.workbench-actions{justify-content:space-between}.workbench-actions .btn-ghost{flex:1;justify-content:center}.mode-btn{padding:.4rem .65rem;font-size:.75rem}.controls,.batch-settings{gap:1.125rem;padding:1.125rem}.format-buttons{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}.dds-mode{min-width:100%}.steps{grid-template-columns:1fr}.toast-container{bottom:1rem;left:1rem;right:1rem}.toast{min-width:0;max-width:none}.resize-input{font-size:16px}.format-select{max-width:44vw;font-size:.78rem}.mode-tabs{width:100%}.mode-tab{flex:1;padding:.55rem .5rem}.results-bar-actions{width:100%}.results-bar-actions .btn-secondary{flex:1}.compare-controls{width:100%}.compare-controls .format-select{flex:1;max-width:none}.compare-readout{order:5;width:100%;min-width:0}.compare-vs{display:none}.compare-card .preview-label{width:100%}.compare-stage{height:clamp(240px,48vh,380px)}.preview-image-container{min-height:220px}.batch-toolbar{flex-direction:column;align-items:stretch}.batch-stats{gap:.5rem 1rem;font-size:.72rem}.batch-toolbar .action-buttons{justify-content:stretch}.batch-toolbar .btn-primary,.batch-toolbar .btn-secondary{flex:1}.mode-btn,.btn-ghost,.btn-secondary,.btn-primary,.result-chip{white-space:normal}}.format-btn.pack-loading{border-color:var(--accent);color:var(--fg);animation:1.2s ease-in-out infinite packPulse;letter-spacing:.02em;font-size:.68rem}@keyframes packPulse{0%,to{box-shadow:0 0 #d4ff0059}50%{box-shadow:0 0 0 5px #d4ff001f}}.install-overlay{position:fixed;z-index:900;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;animation:.25s fade-in;background:#0a0b0a8c;justify-content:center;align-items: center;padding:1rem;inset:0}.install-card{background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-lg);max-height:calc(100vh - 4rem - env(safe-area-inset-bottom,0px));display:flex;border-radius:16px;flex-direction:column;width:100%;max-width:440px;padding:1.5rem}.install-title{margin:0 0 .5rem;font-family:Bricolage Grotesque,PingFang SC,Microsoft YaHei,sans-serif;font-size:1.15rem;font-weight:700}.install-desc{color:var(--fg-2);margin:0 0 1rem;font-size:.8rem;line-height:1.5}.install-list{display:flex;overflow-y:auto;flex-direction:column;gap:.45rem;min-height:0;margin-bottom:1rem;padding-right:.25rem}.pack-row{display:grid;grid-template-columns:minmax(84px,auto)1fr 38px;align-items: center;gap:.6rem}.pack-row-name{color:var(--fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.75rem;font-weight:600}.pack-row-bar{background:var(--bg-2);border:1px solid var(--border);overflow:hidden;border-radius:5px;height:8px}.pack-row-fill{background:var(--accent);border-radius:4px;width:0%;height:100%;transition:width .25s}.pack-row-pct{color:var(--muted);text-align:right;white-space:nowrap;font-family:JetBrains Mono,PingFang SC,monospace;font-size:.7rem;font-weight:600}.pack-row.done .pack-row-pct{color:var(--success)}.pack-row.done .pack-row-name{color:var(--fg)}.pack-row.fail .pack-row-pct{color:var(--danger)}.pack-row.fail .pack-row-fill{background:var(--danger)}.install-overall{display:grid;grid-template-columns:auto 1fr auto;align-items: center;gap:.75rem;margin-bottom:.75rem}.install-overall-label{text-transform:uppercase;letter-spacing:.1em;color:var(--muted);white-space:nowrap;font-size:.68rem;font-weight:600}.install-bar{background:var(--bg-2);border:1px solid var(--border);overflow:hidden;border-radius:6px;height:10px}.install-bar-fill{background:linear-gradient(90deg,var(--accent-2),var(--accent));border-radius:5px;width:0%;height:100%;transition:width .3s}.install-pct{text-align:right;min-width:38px;font-family:JetBrains Mono,monospace;font-size:.8rem;font-weight:700}.install-status{min-height:1.2em;margin:0 0 .75rem;font-size:.8rem}.install-status.ok{color:var(--success);font-weight:600}.install-status.fail{color:var(--danger);font-weight:600}.install-actions{display:flex;justify-content:flex-end;gap:.5rem}.install-actions .btn-secondary{padding:.5rem 1rem;font-size:.82rem}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border-strong);border:2px solid var(--bg);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:var(--muted)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}