.imageCompressorWorkspace{width:min(100%,980px);margin:0 auto;display:grid;grid-gap:14px;gap:14px}.compressorGrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);grid-gap:14px;gap:14px;align-items:stretch}.compressorPanel{background:var(--fo-theme-surface)!important;border:1px solid var(--fo-theme-border);border-radius:22px;box-shadow:0 12px 35px rgba(25,29,40,.055);overflow:hidden}.compressorPanelHead{padding:22px 24px;border-bottom:1px solid var(--fo-theme-border);display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.compressorPanelHead h2{margin:5px 0 0;font-size:18px;letter-spacing:-.025em;color:var(--fo-theme-text)}.compressorPanelHead p{margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--fo-theme-muted)}.compressorMetric{font-size:24px;font-weight:800;letter-spacing:-.04em;white-space:nowrap;color:var(--fo-theme-text)}.compressorDrop{min-height:330px;margin:14px;border:1.5px dashed var(--fo-theme-border);border-radius:17px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;cursor:pointer;transition:.18s ease;background:var(--fo-theme-surface-2)}.compressorDrop.isDragging,.compressorDrop:hover{border-color:var(--fo-theme-accent);background:var(--fo-theme-accent-soft);transform:translateY(-1px)}.compressorDrop input{display:none}.compressorDropIcon{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:var(--fo-theme-accent-soft);color:var(--fo-theme-accent);font-size:24px;margin-bottom:14px}.compressorDrop strong{font-size:17px;color:var(--fo-theme-text)}.compressorDrop small{margin-top:7px;color:var(--fo-theme-muted);font-size:12px}.compressorPreview{margin:14px;min-height:330px;border-radius:17px;overflow:hidden;background:var(--fo-theme-surface-2);position:relative;display:grid;grid-template-rows:1fr auto}.compressorPreview img{width:100%;height:270px;object-fit:contain;display:block;background:repeating-conic-gradient(#e9e9e9 0 25%,#f5f5f5 0 50%) 50%/18px 18px}.compressorFilebar{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--fo-theme-surface);border-top:1px solid var(--fo-theme-border)}.compressorFilebar>div{min-width:0;display:grid;grid-gap:3px;gap:3px}.compressorFilebar strong{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fo-theme-text)}.compressorFilebar span{font-size:10px;color:var(--fo-theme-muted)}.compressorFilebar button{margin-left:auto;flex:none}.compressorControls{padding:22px 24px}.compressorControlLabel{font-size:10px;letter-spacing:.13em;font-weight:800;color:var(--fo-theme-muted);text-transform:uppercase}.compressorControlTitle{display:flex;justify-content:space-between;gap:15px;align-items:end;margin:5px 0 18px}.compressorControlTitle h2{margin:0;font-size:19px;letter-spacing:-.03em;color:var(--fo-theme-text)}.compressorRange{width:100%;accent-color:var(--fo-theme-accent);cursor:pointer}.compressorRange:disabled{opacity:.35;cursor:not-allowed}.compressorPresets{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:8px;gap:8px;margin-top:15px}.compressorPreset{min-height:48px;border:1px solid var(--fo-theme-border);background:var(--fo-theme-surface-2);color:var(--fo-theme-text);border-radius:11px;cursor:pointer;font-size:12px;font-weight:700}.compressorPreset:hover:not(:disabled),.compressorPresetActive{border-color:var(--fo-theme-accent);background:var(--fo-theme-accent-soft)}.compressorPresetActive{color:var(--fo-theme-accent)}.compressorPreset:disabled{opacity:.45;cursor:not-allowed}.compressorNote{padding:11px 12px;border-radius:10px;background:var(--fo-theme-surface-2);color:var(--fo-theme-muted);font-size:11px;line-height:1.55;margin:15px 0 0}.compressorActions{display:grid;grid-template-columns:1fr auto;grid-gap:8px;gap:8px;margin-top:20px}.compressorActions button{min-height:46px;border-radius:11px;padding:11px 15px;font-size:12px;font-weight:800;cursor:pointer;border:1px solid var(--fo-theme-border)}.compressorPrimary{background:var(--fo-theme-text);color:var(--fo-theme-bg);border-color:var(--fo-theme-text)!important}.compressorPrimary:hover:not(:disabled){opacity:.88}.compressorSecondary{background:var(--fo-theme-surface);color:var(--fo-theme-text)}.compressorActions button:disabled{opacity:.4;cursor:not-allowed}.compressorPrivacy{display:flex;align-items:center;justify-content:center;gap:9px;padding:5px 0 0;color:var(--fo-theme-muted);font-size:11px}.compressorPrivacy strong{color:var(--fo-theme-text)}.compressorResult{margin:14px 24px 22px;padding:15px;border:1px solid var(--fo-theme-border);border-radius:14px;background:var(--fo-theme-surface-2);display:grid;grid-gap:9px;gap:9px}.compressorResultTop{display:flex;justify-content:space-between;align-items:center;gap:12px}.compressorResultTop strong{font-size:13px;color:var(--fo-theme-text)}.compressorSavings{font-size:20px;font-weight:850;letter-spacing:-.035em;color:var(--fo-theme-accent)}.compressorResultMeta{font-size:11px;color:var(--fo-theme-muted)}.compressorDownload{min-height:44px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:var(--fo-theme-text);color:var(--fo-theme-bg)!important;text-decoration:none;font-size:12px;font-weight:800}.compressorError{margin:14px 24px 22px;padding:13px;border-radius:12px;background:#fff3f3;border:1px solid #eccaca;color:#a43a3a;font-size:12px;font-weight:700}.compressorDarkFix{color:var(--fo-theme-text)}html[data-theme=dark] .compressorPanel{box-shadow:0 15px 40px rgba(0,0,0,.18)}html[data-theme=dark] .compressorPreview img{background:repeating-conic-gradient(#252a31 0 25%,#171b20 0 50%) 50%/18px 18px}html[data-theme=dark] .compressorError{background:#281719;border-color:#563034;color:#ff9d9d}@media(max-width:820px){.compressorGrid{grid-template-columns:1fr}.compressorDrop,.compressorPreview{min-height:270px}.compressorPreview img{height:220px}}@media(max-width:520px){.compressorControls,.compressorPanelHead{padding:18px}.compressorDrop{padding:22px}.compressorDrop,.compressorPreview{margin:10px;min-height:250px}.compressorPreview img{height:200px}.compressorError,.compressorResult{margin-left:18px;margin-right:18px}.compressorActions{grid-template-columns:1fr}.compressorSecondary{order:2}}