/* Image compressor & resizer */
.img-settings .field input[type="range"] { width: 100%; accent-color: var(--accent-color); }
.img-results { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.img-card { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 1rem; padding: 0.75rem; border: 1px solid var(--border-color); border-radius: 8px; background-color: var(--bg-secondary); }
.img-card.busy { opacity: 0.6; }
.img-preview { width: 160px; height: 120px; display: flex; align-items: center; justify-content: center; border-radius: 6px; overflow: hidden; background-color: var(--bg-primary); border: 2px solid transparent; }
.img-preview.original { border-color: var(--accent-color); }
.img-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.img-preview img:not([src]) { display: none; }
.img-info { min-width: 0; }
.img-name { font-weight: 600; overflow-wrap: anywhere; color: var(--text-primary); }
.img-line { margin-top: 0.35rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.img-status { margin: 0.35rem 0 0; min-height: 0; }
.img-card .btn-row { margin-top: 0.5rem; }
.img-card a.btn { text-decoration: none; display: inline-block; }
@media (max-width: 520px) {
    .img-card { grid-template-columns: 1fr; }
    .img-preview { width: 100%; height: 180px; }
}