[data-tool-view=ImageCompress] .file-drop{cursor:pointer;text-align:center;background:#fafcfb;border:1px dashed #a9b9c1;border-radius:12px;flex-direction:column;align-items:center;gap:.7rem;padding:2rem 1rem;display:flex}[data-tool-view=ImageCompress] .has-image .file-drop{padding:.75rem}[data-tool-view=ImageCompress] .has-image .file-drop>:not(.button):not(input){display:none}[data-tool-view=ImageCompress] .file-drop:focus-within,[data-tool-view=ImageCompress] .file-drop[data-drag=true]{outline:3px solid var(--focus);outline-offset:3px;background:#f2f7e9}[data-tool-view=ImageCompress] .file-drop>strong{font-size:1.0625rem;font-weight:600}[data-tool-view=ImageCompress] .file-drop>span:not(.button):not(.upload-icon){color:var(--muted);font-size:.875rem}[data-tool-view=ImageCompress] .upload-icon{color:#587a3b}[data-tool-view=ImageCompress] .image-source-info{justify-content:space-between;align-items:center;gap:1rem;padding:1rem 0;display:flex}[data-tool-view=ImageCompress] .image-source-info>div{min-width:0}[data-tool-view=ImageCompress] .image-source-info strong{overflow-wrap:anywhere;font-size:.9375rem;display:block}[data-tool-view=ImageCompress] .image-source-info span{color:var(--muted);font-size:.875rem;display:block}[data-tool-view=ImageCompress] .image-source-info button{flex-shrink:0}[data-tool-view=ImageCompress] .image-editor{grid-template-columns:minmax(0,1fr) 260px;gap:1.5rem;margin-top:.8rem;display:grid}[data-tool-view=ImageCompress] .image-previews{grid-template-columns:1fr 1fr;align-content:start;gap:1rem;min-width:0;display:grid}[data-tool-view=ImageCompress] figure{min-width:0;margin:0}[data-tool-view=ImageCompress] figcaption{grid-template-rows:auto auto;gap:.2rem;margin-bottom:.5rem;font-size:.875rem;display:grid}[data-tool-view=ImageCompress] figcaption span{color:var(--muted)}[data-tool-view=ImageCompress] .preview-frame{border:1px solid var(--line);border-radius:9px;justify-content:center;align-items:center;height:260px;display:flex;overflow:hidden}[data-tool-view=ImageCompress] .checkerboard{background-color:#fff;background-image:conic-gradient(#edf0f2 25%, transparent 0 50%, #edf0f2 0 75%, transparent 0);background-size:16px 16px}[data-tool-view=ImageCompress] .preview-frame img{object-fit:contain;max-width:100%;max-height:100%}[data-tool-view=ImageCompress] .preview-placeholder{color:#536068;text-align:center;background:#fffffff2;border-radius:6px;margin:1rem;padding:.5rem;font-size:.875rem}[data-tool-view=ImageCompress] .preview-note{color:var(--muted);grid-column:1/-1;font-size:.8125rem}[data-tool-view=ImageCompress] .image-settings{border:1px solid var(--line);border-radius:10px;min-width:0;margin:0;padding:1rem}[data-tool-view=ImageCompress] .image-settings legend{padding:0 .4rem;font-size:.875rem}[data-tool-view=ImageCompress] .image-settings select,[data-tool-view=ImageCompress] .image-settings input[type=number]{width:100%;min-width:0;min-height:44px;color:var(--ink);background-color:#fff;border:1px solid #bdc7ca;border-radius:7px;padding:.5rem 32px .5rem .5rem;font-size:1rem}[data-tool-view=ImageCompress] .image-settings input[type=range]{accent-color:#587521;width:100%;min-height:44px;margin:0}[data-tool-view=ImageCompress] .image-settings .range-label{justify-content:space-between;margin-top:1rem;display:flex}[data-tool-view=ImageCompress] .image-settings .setting-help{color:var(--muted);margin:.5rem 0 1rem;font-size:.8125rem;line-height:1.6}[data-tool-view=ImageCompress] .image-settings .button{width:100%}[data-tool-view=ImageCompress] .processing-row{align-items:center;gap:1rem;margin-top:1rem;display:flex}[data-tool-view=ImageCompress] progress{accent-color:#587521;width:min(100%,240px)}[data-tool-view=ImageCompress] .image-result{background:#f4f8ec;border:1px solid #d5e2bd;border-radius:10px;justify-content:space-between;align-items:center;gap:1rem;margin-top:1rem;padding:1.2rem;display:flex}[data-tool-view=ImageCompress] .image-result[data-larger=true],[data-tool-view=ImageCompress] .image-result[data-target-met=false]{background:#fff8e9;border-color:#ead8ae}[data-tool-view=ImageCompress] .image-result strong{font-size:1.1rem}[data-tool-view=ImageCompress] .image-result p{color:var(--muted);margin-top:.2rem;font-size:.875rem}[data-tool-view=ImageCompress] .image-result .button{flex-shrink:0}@media (width<=800px){[data-tool-view=ImageCompress] .image-editor{grid-template-columns:1fr}[data-tool-view=ImageCompress] .preview-frame{height:240px}}@media (width<=480px){[data-tool-view=ImageCompress] .image-previews{gap:.65rem}[data-tool-view=ImageCompress] .preview-frame{height:180px}[data-tool-view=ImageCompress] .image-result{flex-direction:column;align-items:stretch}[data-tool-view=ImageCompress] .image-source-info{flex-wrap:wrap}[data-tool-view=ImageCompress] .file-drop{padding:1.5rem .7rem}}
