.image-tool-shell{gap:var(--space-5);max-width:var(--ui-content);margin-inline:auto;display:grid}.image-tool-file{justify-content:space-between;align-items:center;gap:var(--space-3);min-width:0;padding:var(--space-3) var(--space-4);border:var(--ui-stroke) solid var(--ui-border);border-radius:var(--ui-radius-card);color:var(--ui-secondary);display:flex}.image-tool-file-name{color:var(--ui-ink);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.image-tool-controls{gap:var(--space-4);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.image-tool-field{align-content:start;gap:var(--space-2);color:var(--ui-ink);font-size:var(--ui-label-size);font-weight:var(--ui-label-weight);display:grid}.image-tool-field select,.image-size-input{min-height:var(--ui-control);width:100%;padding:var(--space-2) var(--space-3);border:var(--ui-stroke) solid var(--ui-border);border-radius:var(--ui-radius-control);background:var(--ui-document-paper);color:var(--ui-ink);font:inherit}.image-ratio-lock{align-items:center;gap:var(--space-2);min-height:var(--ui-control);padding-inline:var(--space-3);border:var(--ui-stroke) solid var(--ui-border);border-radius:var(--ui-radius-control);color:var(--ui-ink);font-size:var(--ui-label-size);display:flex}.image-ratio-lock input{inline-size:var(--space-4);block-size:var(--space-4);accent-color:var(--ui-accent)}.image-ratio-lock svg{color:var(--ui-secondary);margin-inline-start:auto}.image-tool-quality{grid-column:1/-1}.image-tool-quality>span{justify-content:space-between;display:flex}.image-tool-quality input{width:100%;accent-color:var(--ui-accent)}.image-tool-field:has(.image-adjust-slider)>span{justify-content:space-between;gap:var(--space-2);display:flex}.image-adjust-slider{width:100%;accent-color:var(--ui-accent)}.image-tool-field:has(.image-adjust-slider) output{color:var(--ui-secondary);font-weight:var(--ui-body-weight)}.image-tool-field small,.image-tool-note{color:var(--ui-secondary);font-size:var(--ui-caption-size);font-weight:400;line-height:var(--ui-caption-leading)}.image-tool-progress{gap:var(--space-2);color:var(--ui-secondary);font-size:var(--ui-label-size);display:grid}.image-tool-progress progress{width:100%;accent-color:var(--ui-accent)}.image-tool-previews{gap:var(--space-4);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.image-tool-previews figure{justify-items:center;gap:var(--space-2);min-width:0;margin:var(--space-0);padding:var(--space-3);border:var(--ui-stroke) solid var(--ui-rule);border-radius:var(--ui-radius-card);background:var(--ui-paper);display:grid}.image-tool-previews img{object-fit:contain;max-width:100%;max-height:45dvh;display:block}.image-tool-previews figcaption{color:var(--ui-secondary);font-size:var(--ui-caption-size);text-align:center}.image-tool-actions{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.image-ico-builder{align-items:center;gap:var(--space-4);grid-template-columns:minmax(0,1fr) minmax(0,2fr);display:grid}.image-ico-preview{min-width:0;min-height:var(--space-16);padding:var(--space-4);border:var(--ui-stroke) solid var(--ui-rule);border-radius:var(--ui-radius-card);background-color:var(--ui-document-paper);background-image:linear-gradient(45deg, var(--ui-rule) 25%, transparent 25%, transparent 75%, var(--ui-rule) 75%), linear-gradient(45deg, var(--ui-rule) 25%, transparent 25%, transparent 75%, var(--ui-rule) 75%);background-position:var(--space-0) var(--space-0), var(--space-4) var(--space-4);background-size:var(--space-4) var(--space-4);place-items:center;display:grid}.image-ico-preview img{width:var(--space-16);height:var(--space-16);object-fit:contain;display:block}.image-ico-size-picker{min-width:0;padding:var(--space-4);border:var(--ui-stroke) solid var(--ui-border);border-radius:var(--ui-radius-card);color:var(--ui-ink);margin:0}.image-ico-size-picker legend{padding-inline:var(--space-2);font-size:var(--ui-label-size);font-weight:var(--ui-label-weight)}.image-ico-size-picker p{margin:var(--space-0) var(--space-0) var(--space-3);color:var(--ui-secondary);font-size:var(--ui-caption-size);line-height:var(--ui-caption-leading)}.image-ico-size-options{gap:var(--space-2);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.image-ico-size-options label{align-items:center;gap:var(--space-2);min-width:0;min-height:var(--ui-control);padding-inline:var(--space-2);border:var(--ui-stroke) solid var(--ui-rule);border-radius:var(--ui-radius-control);color:var(--ui-ink);font-size:var(--ui-label-size);display:flex}.image-ico-size-options input{inline-size:var(--space-4);block-size:var(--space-4);accent-color:var(--ui-accent);flex:none}.image-ico-size-options label:has(input:focus-visible){outline:var(--ui-focus) solid var(--ui-accent);outline-offset:var(--ui-stroke-emphasis)}.image-ico-size-picker:disabled{opacity:var(--ui-disabled-opacity)}.image-border-controls{grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:end}:is(.image-border-width>span,.image-tool-field:has(.image-border-color)>span){justify-content:space-between;gap:var(--space-2);display:flex}.image-border-width output{color:var(--ui-secondary);font-weight:var(--ui-body-weight)}.image-tool-field:has(.image-border-color) output{color:var(--ui-secondary);font-weight:var(--ui-body-weight)}.image-border-color{min-width:0;min-height:var(--ui-control);width:100%;padding:var(--space-1);border:var(--ui-stroke) solid var(--ui-border);border-radius:var(--ui-radius-control);background:var(--ui-document-paper)}.image-border-preview-wrap{width:100%;min-width:0;padding:var(--space-3);border:var(--ui-stroke) solid var(--ui-rule);border-radius:var(--ui-radius-card);background:var(--ui-paper);place-items:center;display:grid}.image-border-preview{box-sizing:border-box;width:100%;max-width:100%;max-height:55dvh;padding:var(--image-border-width);border-radius:var(--ui-radius-control);background:var(--image-border-color);object-fit:contain;display:block}.image-transform-controls{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.image-transform-controls button[aria-pressed=true]{border-color:var(--ui-accent);background:var(--ui-accent-soft);color:var(--ui-accent-ink)}.image-tool-previews figure:has(img[src^=blob\:]){overflow:hidden}.image-tool-previews figure img{transform-origin:50%}.image-transparency-preview{background-color:var(--ui-document-paper);background-image:linear-gradient(45deg, var(--ui-rule) 25%, transparent 25%, transparent 75%, var(--ui-rule) 75%), linear-gradient(45deg, var(--ui-rule) 25%, transparent 25%, transparent 75%, var(--ui-rule) 75%);background-position:var(--space-0) var(--space-0), var(--space-4) var(--space-4);background-size:var(--space-8) var(--space-8)}.image-model-status{gap:var(--space-2);display:grid}.image-model-status progress{width:100%;accent-color:var(--ui-accent)}.image-background-preview{justify-items:center;gap:var(--space-3);padding:var(--space-4);border:var(--ui-stroke) solid var(--ui-rule);border-radius:var(--ui-radius-card);display:grid}.image-background-preview img{object-fit:contain;max-width:100%;max-height:55dvh;display:block}.image-watermark-preview-wrap{min-width:0;padding:var(--space-3);border:var(--ui-stroke) solid var(--ui-rule);border-radius:var(--ui-radius-card);background:var(--ui-paper);place-items:center;display:grid}.image-watermark-preview,.image-watermark-result{object-fit:contain;width:100%;max-width:100%;max-height:55dvh;display:block}@media (width<=640px){.image-tool-controls,.image-tool-previews,.image-border-controls{grid-template-columns:minmax(0,1fr)}.image-tool-quality{grid-column:auto}.image-tool-file{flex-direction:column;align-items:flex-start}.image-ico-builder{grid-template-columns:minmax(0,1fr)}.image-tool-actions>button{flex:auto}}