.image-tool { padding-block: 24px 48px; }
.image-tool .breadcrumb { margin-bottom: 16px; }
.image-tool h1 { margin-bottom: 10px; }
.image-tool label, .image-tool legend { font-weight: 600; }
#upload { display: block; margin-top: 8px; max-width: 100%; min-height: 44px; }
#upload-help, #quality-help, #image-controls p { font-size: .85rem; color: var(--muted); }
.image-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; margin-top: 20px; }
#image-controls fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
#image-controls label { display: block; margin-top: 12px; }
#image-controls input:not([type=checkbox]), #image-controls select { width: 100%; min-height: 44px; font: inherit; color: var(--ink); background: white; border: 1px solid var(--border); border-radius: 6px; padding: 8px; }
#image-controls input[type=range] { padding: 0; }
#image-controls .check { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.dimensions, .previews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.previews figure { margin: 0; min-width: 0; }
.previews figcaption { font-weight: 600; margin-bottom: 8px; }
.previews img { max-width: 100%; max-height: 360px; object-fit: contain; border: 1px solid var(--border); }
.previews p { overflow-wrap: anywhere; font-size: .9rem; }
.image-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
#image-error { color: #9c2424; }
.tool-guidance { border-top: 1px solid var(--border); margin-top: 24px; padding-top: 16px; }
.tool-guidance summary { cursor: pointer; padding-block: 8px; }
@media(max-width: 760px) { .image-layout { grid-template-columns: 1fr; } }