body{-webkit-font-smoothing:antialiased;font-family:Segoe UI,system-ui,-apple-system,sans-serif}:root{--bg:#fff;--bg-panel:#fff;--bg-card:#fff;--bg-input:#f1f5f9;--border:#e2e8f0;--border-hover:#cbd5e1;--text:#0f172a;--dim:#475569;--dim2:#64748b;--accent:#ea580c;--good:#059669;--bad:#dc2626;--warn:#d97706;--err-bg:#fef2f2;--err-border:#fecaca;--err-text:#dc2626;--overlay:#00000040;--accent-text:#fff;--badge-good-bg:#0596691a;--badge-bad-bg:#dc26261a;--shadow:0 1px 3px #00000014}[data-theme=dark]{--bg:#0d1017;--bg-panel:#151a23;--bg-card:#151a23;--bg-input:#0d1017;--border:#232b3a;--border-hover:#38445c;--text:#e8ecf3;--dim:#8b94a7;--dim2:#5b6478;--accent:#ff6b35;--good:#34d399;--bad:#f87171;--warn:#fbbf24;--err-bg:#3a1418;--err-border:#7f1d1d;--err-text:#fca5a5;--overlay:#000000bf;--accent-text:#0d1017;--badge-good-bg:#34d3991f;--badge-bad-bg:#f871711f;--shadow:none}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100%}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-family:Segoe UI,system-ui,-apple-system,sans-serif}.app{flex-direction:column;min-height:100vh;padding:16px 20px 0;display:flex}.header-right{align-items:center;gap:12px;display:flex}.theme-toggle{background:var(--bg-panel);border:1px solid var(--border);cursor:pointer;border-radius:10px;padding:8px 10px;font-size:16px;line-height:1}.theme-toggle:hover{border-color:var(--border-hover)}.topbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;display:flex}.brand{align-items:center;gap:14px;display:flex}.logo{color:var(--accent);font-size:34px;line-height:1}.brand h1{letter-spacing:.3px;font-size:26px}.brand h1 .accent{color:var(--accent)}.brand p{color:var(--dim);margin-top:2px;font-size:13px}.brand .privacy{color:var(--dim2);font-size:11.5px}.stats{flex-wrap:wrap;gap:10px;display:flex}.chip{background:var(--bg-panel);border:1px solid var(--border);color:var(--dim);border-radius:999px;padding:7px 14px;font-size:13px}.chip b{color:var(--text)}.chip.saved.good{border-color:var(--good);color:var(--good)}.chip.saved.good b{color:var(--good)}.chip.saved.bad{border-color:var(--bad);color:var(--bad)}.chip.saved.bad b{color:var(--bad)}.chip.counter-chip{border-color:var(--good);color:var(--good)}.chip.counter-chip b{color:var(--good)}.main-layout{flex:1;align-items:flex-start;gap:20px;display:flex}.sidebar{background:var(--bg-panel);border:1px solid var(--border);width:280px;box-shadow:var(--shadow);border-radius:14px;flex-direction:column;flex-shrink:0;gap:14px;padding:18px;display:flex;position:sticky;top:16px}.content{flex:1;min-width:0}.sidebar-label{color:var(--dim);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px;font-size:11px;font-weight:600;display:block}.sidebar-label b{color:var(--text);text-transform:none}.sidebar-fmts{flex-direction:column;gap:4px;display:flex}.sidebar-fmt-btn{background:var(--bg-input);border:2px solid var(--border);cursor:pointer;text-align:left;color:var(--text);border-radius:10px;align-items:center;gap:10px;padding:10px 12px;display:flex}.sidebar-fmt-btn:hover{border-color:var(--border-hover)}.sidebar-fmt-btn.on{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 8%, var(--bg-input))}.sfmt-icon{flex-shrink:0;font-size:20px}.sfmt-name{font-size:14px;font-weight:700}.sfmt-desc{color:var(--dim);margin-left:auto;font-size:11px}.sidebar-dims{flex-direction:column;gap:6px;display:flex}.dim-row{align-items:center;gap:8px;display:flex}.dim-row span{color:var(--dim);font-size:12px}.dim-row span:last-child{color:var(--dim2)}.dim-row input{background:var(--bg-input);border:1px solid var(--border);width:80px;color:var(--text);border-radius:6px;padding:6px 8px;font-size:13px}.sidebar-actions{flex-direction:column;gap:6px;display:flex}.sidebar-actions .btn{justify-content:center;width:100%}.big-compress{letter-spacing:.5px;padding:16px!important;font-size:17px!important}.seg{background:var(--bg-input);border:1px solid var(--border);border-radius:9px;padding:3px;display:flex}.seg button{color:var(--dim);cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:7px;padding:7px 14px;font-size:13px;font-weight:600}.seg button.on{background:var(--accent);color:var(--accent-text)}.check{color:var(--text);cursor:pointer;align-items:center;gap:8px;font-size:13px;display:flex}.check input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}input[type=range]{accent-color:var(--accent);width:100%;height:20px}input[type=range]:disabled{opacity:.35}.quality-row{align-items:center;gap:8px;display:flex}.q-min,.q-max{color:var(--dim2);text-align:center;width:24px;font-size:11px}.q-badge{background:var(--accent);color:var(--accent-text);text-align:center;border-radius:8px;min-width:42px;padding:4px 10px;font-size:14px;font-weight:700}.resize-block{border:2px dashed var(--border);border-radius:12px;margin-bottom:14px;padding:14px;transition:border-color .2s}.resize-block.on{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 6%, var(--bg-panel));border-style:solid}.resize-toggle{cursor:pointer;text-align:left;width:100%;color:var(--dim);background:0 0;border:none;align-items:center;gap:14px;padding:0;display:flex}.resize-toggle .rt-icon{font-size:24px}.resize-toggle strong{color:var(--text);font-size:15px;display:block}.resize-toggle span{color:var(--dim);font-size:12.5px}.resize-controls{border-top:1px solid var(--border);flex-direction:column;gap:12px;margin-top:14px;padding-top:14px;display:flex}.resize-controls .dims{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.resize-controls .dims label{color:var(--dim);text-transform:uppercase;letter-spacing:.5px;font-size:12px}.resize-controls .dims input{background:var(--bg-input);border:1px solid var(--border);width:90px;color:var(--text);border-radius:8px;padding:9px 10px;font-size:14px}.resize-controls .dims span{color:var(--dim);font-size:16px}.lock{background:var(--bg-input);border:1px solid var(--border);color:var(--dim);cursor:pointer;border-radius:8px;padding:7px 9px;font-size:14px}.lock.on{border-color:var(--accent);color:var(--accent)}.settings-actions{flex-wrap:wrap;gap:10px;display:flex}.btn{background:var(--bg-input);border:1px solid var(--border);color:var(--text);cursor:pointer;border-radius:10px;align-items:center;gap:7px;padding:11px 18px;font-size:14px;font-weight:600;text-decoration:none;display:inline-flex}.btn:hover:not(:disabled){border-color:var(--border-hover)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}.btn.primary:hover:not(:disabled){filter:brightness(1.1)}.btn.ghost{background:0 0;border-color:#0000}.btn.ghost:hover:not(:disabled){background:var(--bg-input);border-color:var(--border)}.btn.small{border-radius:8px;margin-top:10px;padding:7px 12px;font-size:12.5px}.error-bar{background:var(--err-bg);border:1px solid var(--err-border);color:var(--err-text);border-radius:9px;margin-bottom:16px;padding:9px 14px;font-size:13px}.dropzone{border:2px dashed var(--border);text-align:center;cursor:pointer;background:var(--bg-panel);border-radius:16px;padding:70px 30px;transition:border-color .15s}.dropzone:hover,.dropzone.over{border-color:var(--accent)}.dz-icon{color:var(--accent);margin-bottom:14px;font-size:46px}.dropzone h2{color:var(--dim);margin-bottom:8px;font-size:21px}.dropzone p{color:var(--dim);font-size:14px;line-height:1.6}.grid-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;display:flex}.grid-toolbar .hint{color:var(--dim);font-size:13px}.grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;display:grid}.card{background:var(--bg-card);border:1px solid var(--border);cursor:pointer;box-shadow:var(--shadow);border-radius:13px;flex-direction:column;display:flex;position:relative;overflow:hidden}.card:hover{border-color:var(--border-hover)}.remove{z-index:2;background:var(--overlay);border:1px solid var(--border-hover);width:26px;height:26px;color:var(--text);cursor:pointer;border-radius:50%;font-size:12px;line-height:1;position:absolute;top:8px;right:8px}[data-theme=dark] .remove:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}.remove:hover{background:var(--bad);border-color:var(--bad);color:#fff}.thumb{background:var(--bg-input);justify-content:center;align-items:center;height:150px;display:flex;overflow:hidden}.thumb img{object-fit:contain;max-width:100%;max-height:100%}.card-body{flex-direction:column;flex:1;padding:13px 14px 15px;display:flex}.name{white-space:nowrap;text-overflow:ellipsis;color:var(--dim);margin-bottom:8px;font-size:13.5px;font-weight:600;overflow:hidden}.card-fmts{flex-wrap:wrap;gap:4px;margin-bottom:8px;display:flex}.card-fmts button{background:var(--bg-input);border:1px solid var(--border);color:var(--dim);cursor:pointer;border-radius:6px;padding:3px 8px;font-size:10.5px;font-weight:700}.card-fmts button:hover{border-color:var(--border-hover)}.card-fmts button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}.meta{color:var(--dim);font-size:12.5px;line-height:1.7}.meta b{color:var(--text)}.meta.new{margin-top:2px}.meta-result{color:var(--dim);margin-top:4px;font-size:12px}.meta-result b{font-weight:700}.meta-result b.good{color:var(--good)}.meta-result b.bad{color:var(--bad)}.meta.dim{color:var(--dim2);font-style:italic}.meta.warn{color:var(--warn);margin-top:4px;line-height:1.4}.err{color:var(--bad);margin-top:6px;font-size:12.5px}.badge{border-radius:999px;margin-left:6px;padding:2px 8px;font-size:11.5px;font-weight:700;display:inline-block}.badge.good{background:var(--badge-good-bg);color:var(--good)}.badge.bad{background:var(--badge-bad-bg);color:var(--bad)}.modal-overlay{z-index:100;background:var(--overlay);justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.modal{background:var(--bg-panel);border:1px solid var(--border);border-radius:16px;width:100%;max-width:820px;max-height:90vh;padding:0;position:relative;overflow-y:auto;box-shadow:0 8px 40px #0006}.modal-header{justify-content:space-between;align-items:flex-start;gap:16px;padding:22px 24px 16px;display:flex}.modal-fileinfo{flex:1;min-width:0}.modal-filename{color:var(--text);word-break:break-all;font-size:15px;font-weight:600;line-height:1.4}.modal-filesize{color:var(--dim2);margin-top:3px;font-size:12px}.modal-close{background:var(--bg-input);border:1px solid var(--border);color:var(--dim);cursor:pointer;border-radius:10px;flex-shrink:0;padding:6px 10px;font-size:14px;line-height:1}.modal-close:hover{background:var(--bad);border-color:var(--bad);color:#fff}.modal-stats{grid-template-columns:1fr auto 1fr;gap:20px;padding:16px 24px;display:grid}.ms-col{flex-direction:column;gap:6px;display:flex}.ms-label{color:var(--dim);text-transform:uppercase;letter-spacing:.6px;font-size:11px;font-weight:600}.ms-row{color:var(--text);font-size:14px}.ms-row b{font-weight:700}.ms-row.good{color:var(--good);font-weight:600}.ms-row.dim{color:var(--dim2)}.ms-arrow{color:var(--dim2);align-self:center;font-size:20px}.modal-saving{align-items:baseline;gap:12px;padding:12px 24px 8px;display:flex}.ms-pct{font-size:28px;font-weight:800}.ms-pct.good{color:var(--good)}.ms-pct.bad{color:var(--bad)}.ms-saved-text{color:var(--dim);font-size:14px}.modal-meta-section{padding:8px 24px 4px}.modal-meta-grid{grid-template-columns:auto 1fr;gap:4px 16px;font-size:13px;display:grid}.modal-meta-grid div:nth-child(odd){color:var(--dim2)}.modal-meta-grid div:nth-child(2n){color:var(--text)}.modal-actions{gap:10px;padding:12px 24px 22px;display:flex}.modal-actions .btn.primary{flex:1;justify-content:center}.comparison{aspect-ratio:16/10;background:var(--bg-input);-webkit-user-select:none;user-select:none;border-radius:0;width:calc(100% - 48px);max-height:420px;margin:0 24px;position:relative;overflow:hidden}.comparison-mini{aspect-ratio:auto;width:100%;height:150px;max-height:none;margin:0}.comparison-mini .comp-divider{width:1px}.comparison-mini .comp-handle{width:22px;height:22px;font-size:7px}.comp-img{object-fit:contain;width:100%;height:100%;position:absolute;inset:0}.comp-right{position:absolute;inset:0;overflow:hidden}.comp-divider{background:var(--accent);cursor:col-resize;z-index:5;width:2px;position:absolute;top:0;bottom:0;transform:translate(-50%)}.comp-handle{background:var(--accent);border:3px solid var(--bg-panel);width:34px;height:34px;color:var(--accent-text);border-radius:50%;justify-content:center;align-items:center;font-size:9px;font-weight:700;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.comp-label-left,.comp-label-right{z-index:4;background:var(--overlay);border-radius:5px;padding:2px 8px;font-size:11px;font-weight:600;position:absolute;top:8px}.comp-label-left{color:var(--dim);left:8px}.comp-label-right{color:var(--accent);right:8px}.confirm-overlay{z-index:200;background:var(--overlay);justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.confirm-box{background:var(--bg-panel);border:1px solid var(--border);text-align:center;border-radius:16px;width:100%;max-width:400px;padding:28px 32px;box-shadow:0 8px 40px #00000080}.confirm-box p{color:var(--text);margin-bottom:20px;font-size:15px}.confirm-box h3{color:var(--text);margin-bottom:14px;font-size:18px}.confirm-box ul{text-align:left;color:var(--dim);margin-bottom:18px;padding-left:20px;font-size:13px;line-height:1.8}.confirm-box.wide{max-width:500px}.confirm-actions{justify-content:center;gap:10px;display:flex}.confirm-actions .btn{justify-content:center;min-width:100px}.site-footer{text-align:center;color:var(--dim2);flex-shrink:0;padding-top:16px;padding-bottom:16px;font-size:12px}.drop-overlay{z-index:300;background:color-mix(in srgb, var(--accent) 15%, var(--bg));border:3px dashed var(--accent);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.drop-overlay span{color:var(--accent);background:var(--bg-panel);border-radius:20px;padding:20px 40px;font-size:28px;font-weight:700}@media (width<=768px){.app{padding:12px 12px 0}.topbar{flex-direction:column;align-items:flex-start}.brand h1{font-size:22px}.stats{width:100%}.header-right{justify-content:space-between;width:100%}.main-layout{flex-direction:column}.sidebar{width:100%;position:static}.grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}.thumb{height:120px}.dropzone{padding:40px 20px}.dropzone h2{font-size:18px}.modal{border-radius:0;max-width:100%}.comparison{aspect-ratio:4/3;width:calc(100% - 32px);max-height:300px;margin:0 16px}.settings-actions{flex-direction:column}.settings-actions .btn{justify-content:center;width:100%}.resize-controls .dims{flex-direction:column;align-items:flex-start}.resize-controls .dims input{width:100%}.modal-stats{gap:12px;padding:12px 16px}.modal-header{padding:16px}.modal-actions{padding:12px 16px 18px}}@media (width<=480px){.brand h1{font-size:18px}.logo{font-size:26px}.seg button{padding:6px 10px;font-size:12px}.grid{grid-template-columns:1fr}}