.img-dropzone {
    border: 2px dashed #cbd5e1;
    background: #f8fafc;
    border-radius: 14px;
    cursor: pointer;
    transition: border-color .2s, background .2s, transform .2s;
    user-select: none;
}
.img-dropzone:hover,
.img-dropzone.dragover { border-color: #0d6efd; background: #eef6ff; }
.img-dropzone.dragover { transform: scale(1.005); }
.img-dropzone .dz-icon { font-size: 44px; line-height: 1; }

.thumb-box {
    width: 76px; height: 76px; flex: 0 0 76px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background-color: #f3f4f6;
    background-image:
        linear-gradient(45deg, #e5e7eb 25%, transparent 25%),
        linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e5e7eb 75%),
        linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
    background-size: 12px 12px;
    background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}
.min-w-0 { min-width: 0; }
.file-name {
    max-width: 100%; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
.stat-num { font-variant-numeric: tabular-nums; }
.card-item.is-working { opacity: .7; }

.fmt-badge {
    display: inline-block;
    padding: .12rem .45rem;
    border-radius: 4px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    background: #e5e7eb;
    color: #374151;
}
.fmt-badge.arrow { background: transparent; padding: 0 .25rem; color: #9ca3af; }
.fmt-jpeg { background: #fee2e2; color: #b91c1c; }
.fmt-png  { background: #dbeafe; color: #1d4ed8; }
.fmt-webp { background: #dcfce7; color: #15803d; }
.fmt-avif { background: #ede9fe; color: #6d28d9; }
.fmt-gif  { background: #fef3c7; color: #b45309; }
.fmt-bmp  { background: #f3f4f6; color: #4b5563; }
.fmt-other{ background: #f3f4f6; color: #4b5563; }

.fmt-card {
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    padding: .6rem .5rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .15s;
    user-select: none;
    background: #fff;
}
.fmt-card:hover { border-color: #93c5fd; background: #f0f7ff; }
.fmt-card.active {
    border-color: #0d6efd;
    background: #eef6ff;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, .12);
}
.fmt-card.disabled {
    opacity: .45;
    cursor: not-allowed;
    background: #f9fafb;
}
.fmt-card .fmt-name { font-weight: 600; font-size: .92rem; }
.fmt-card .fmt-desc { font-size: .72rem; color: #6b7280; }

.compare-box {
    position: relative;
    overflow: hidden;
    background: #1f2937;
    line-height: 0;
    border-radius: 8px;
}
.cmp-img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
}
.cmp-before {
    position: absolute;
    top: 0; left: 0;
    clip-path: inset(0 50% 0 0);
}
.cmp-line {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 2px;
    background: #fff;
    pointer-events: none;
    box-shadow: 0 0 8px rgba(0,0,0,0.6);
    transform: translateX(-1px);
}
.cmp-range {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    width: 70%;
}
.cmp-label {
    position: absolute;
    top: 8px;
    padding: 2px 10px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-size: 12px;
    border-radius: 12px;
}
.cmp-label.left  { left: 8px; }
.cmp-label.right { right: 8px; }