[data-tool-view=ImageCompress] .file-drop{border:1px dashed var(--control-line);cursor:pointer;background:var(--soft);text-align:center;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:var(--success-bg)}[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:var(--success)}[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,1.5fr) minmax(300px,1fr);align-items:start;gap:24px;margin-top:.8rem;display:grid}[data-tool-view=ImageCompress] .image-previews{grid-template-columns:1fr;align-content:start;gap:16px;min-width:0;display:grid}[data-tool-view=ImageCompress] figure{min-width:0;margin:0}[data-tool-view=ImageCompress] figcaption{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:240px;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]{border:1px solid var(--control-line);background-color:var(--surface);width:100%;min-width:0;min-height:44px;color:var(--ink);border-radius:7px;padding:.5rem 32px .5rem .5rem;font-size:1rem}[data-tool-view=ImageCompress] .image-settings input[type=range]{width:100%;min-height:44px;accent-color:var(--focus);margin:0}[data-tool-view=ImageCompress] .image-settings .range-label{justify-content:space-between;margin-top:0;display:flex}[data-tool-view=ImageCompress] .image-settings .setting-help{color:var(--muted);margin:.5rem 0 0;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{width:min(100%,240px);accent-color:var(--focus)}[data-tool-view=ImageCompress] .image-result{border:1px solid var(--success-line);background:var(--success-bg);border-radius:10px;flex-direction:column;align-items:stretch;gap:1rem;margin-top:16px;padding:16px;display:flex}[data-tool-view=ImageCompress] .image-result[data-larger=true],[data-tool-view=ImageCompress] .image-result[data-target-met=false]{background:var(--warning-bg);border-color:var(--warning-line)}[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{text-align:center;width:100%}@media (width<=800px){[data-tool-view=ImageCompress] .image-editor{grid-template-columns:1fr}}@media (width<=480px){[data-tool-view=ImageCompress] .image-previews{gap:.65rem}[data-tool-view=ImageCompress] .image-source-info{flex-wrap:wrap}[data-tool-view=ImageCompress] .file-drop{padding:1.5rem .7rem}}[data-tool-view=ImageCompress] .image-settings-fields{grid-template-columns:1fr;gap:16px;display:grid}[data-tool-view=ImageCompress] .setting-field{min-width:0}[data-tool-view=ImageCompress] #compress-image{justify-self:stretch}[data-tool-view=ImageCompress] .image-detail-compare{border:1px solid var(--line);border-radius:10px;min-width:0;margin-top:20px;padding:12px}[data-tool-view=ImageCompress] .image-detail-compare summary{cursor:pointer;align-items:center;min-height:44px;font-weight:600;display:flex}[data-tool-view=ImageCompress] .image-detail-compare [data-detail-status]{color:var(--muted);overflow-wrap:anywhere;margin:8px 0;font-size:.875rem}[data-tool-view=ImageCompress] .detail-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}[data-tool-view=ImageCompress] .detail-columns figcaption{margin-bottom:8px}[data-tool-view=ImageCompress] .detail-viewport{border:1px solid var(--line);background-color:#fff;background-image:conic-gradient(#edf0f2 25%,transparent 0 50%,#edf0f2 0 75%,transparent 0);direction:ltr;background-size:16px 16px;border-radius:6px;height:320px;overflow:auto}[data-tool-view=ImageCompress] .detail-viewport img{object-fit:initial;max-width:none;max-height:none;display:block}[data-tool-view=ImageCompress] [data-low-quality=true]{border-color:var(--warning-line);background:var(--warning-bg)}@media (width<=620px){[data-tool-view=ImageCompress] .detail-columns{grid-template-columns:minmax(0,1fr)}[data-tool-view=ImageCompress] .detail-viewport{height:220px}}[data-tool-view=ImageCompress] .detail-viewport{cursor:grab}[data-tool-view=ImageCompress] .detail-viewport[data-dragging=true]{cursor:grabbing;user-select:none}[data-tool-view=ImageCompress] .image-previews[aria-busy=true] #compressed-preview{opacity:.45}[data-tool-view=ImageCompress] .live-size{font-variant-numeric:tabular-nums;margin:0;font-weight:650}@media (width<=800px){[data-tool-view=ImageCompress] .image-settings{grid-row:1}[data-tool-view=ImageCompress] .image-previews{grid-template-columns:repeat(2,minmax(0,1fr))}[data-tool-view=ImageCompress] .preview-frame{height:180px}}@media (width<=480px){[data-tool-view=ImageCompress] .image-previews{grid-template-columns:1fr}}[data-tool-view=ImageCompress] .image-advanced{border-top:1px solid var(--line);margin-top:12px}[data-tool-view=ImageCompress] .image-advanced summary{cursor:pointer;align-items:center;gap:8px;min-height:44px;font-weight:600;display:flex}[data-tool-view=ImageCompress] .image-advanced summary:before{content:"+";font-size:1.2rem}[data-tool-view=ImageCompress] .image-advanced[open] summary:before{content:"−"}[data-tool-view=ImageCompress] .image-advanced .image-settings-fields{padding-top:8px}[data-tool-view=ImageCompress] .image-goal{border:1px solid var(--control-line);background:var(--surface);border-radius:10px;margin-bottom:16px;padding:16px}[data-tool-view=ImageCompress] .image-goal label{margin-bottom:8px;font-weight:650;display:block}[data-tool-view=ImageCompress] .image-goal input{border:1px solid var(--control-line);background:var(--surface);width:min(100%,280px);min-height:44px;color:var(--ink);border-radius:7px;padding:8px;font-size:16px}[data-tool-view=ImageCompress] .image-goal p{color:var(--muted);margin:8px 0;font-size:13px;line-height:1.6}[data-tool-view=ImageCompress] .tool-heading p{display:none}[data-tool-view=ImageCompress] .image-result{margin-top:0;margin-bottom:16px}@media (width>=801px){[data-tool-view=ImageCompress] .image-previews{grid-template-columns:repeat(2,minmax(0,1fr))}[data-tool-view=ImageCompress] .image-goal{grid-template-columns:minmax(0,1fr) 180px;align-items:center;gap:8px 16px;padding:12px;display:grid}[data-tool-view=ImageCompress] .image-goal label,[data-tool-view=ImageCompress] .image-goal p{margin:0}[data-tool-view=ImageCompress] .image-goal p{grid-column:1/-1}}