/* ==========================================================================
   Image Compressor
   ========================================================================== */

.ic-range { width: 100%; accent-color: var(--violet); }
.ic-q {
  display: inline-block;
  min-width: 2.6em;
  margin-left: 0.35rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--lilac);
  font-size: 0.8rem;
  text-align: center;
}
.ic-unit { position: relative; }
.ic-unit .input { padding-right: 3rem; }
.ic-unit span { position: absolute; top: 50%; right: 1rem; color: var(--muted); font-size: 0.85rem; transform: translateY(-50%); pointer-events: none; }
.ic-keep { align-self: end; padding-bottom: 0.7rem; }
.ic-hint { margin: -0.6rem 0 0; }
[data-show][hidden] { display: none !important; }

.ic-list { display: flex; flex-direction: column; gap: 0.5rem; max-height: 520px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.ic-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.55rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  animation: fade-up 0.35s var(--ease);
  transition: border-color 0.2s, background-color 0.2s;
}
.ic-item.is-selected { border-color: rgba(139, 92, 246, 0.6); background: var(--surface-2); }
.ic-thumb {
  flex: none;
  width: 56px; height: 56px;
  overflow: hidden;
  border-radius: 10px;
  background: repeating-conic-gradient(rgba(var(--ink), 0.08) 0 25%, transparent 0 50%) 0 0 / 12px 12px;
}
.ic-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ic-info { display: flex; flex: 1; flex-direction: column; gap: 0.1rem; min-width: 0; }
.ic-name { overflow: hidden; color: var(--text); font-size: 0.9rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ic-detail { color: var(--muted); font-size: 0.76rem; }
.ic-status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; color: var(--text-2); font-size: 0.84rem; }
.ic-status b { color: var(--text); }
.ic-note { color: var(--muted); font-size: 0.76rem; }
.ic-bad { color: var(--danger-text); }
.ic-muted { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--muted); }
.ic-spin { width: 13px; height: 13px; border-color: rgba(var(--ink), 0.2); border-top-color: var(--lilac); }
.ic-pill { padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.76rem; font-weight: 700; }
.ic-pill.is-good { background: rgba(52, 211, 153, 0.15); color: var(--success); }
.ic-pill.is-flat { background: var(--surface-3); color: var(--muted); }
.ic-actions { display: flex; flex: none; flex-wrap: wrap; justify-content: flex-end; gap: 0.3rem; }
@media (max-width: 520px) {
  .ic-item { flex-wrap: wrap; }
  .ic-actions { width: 100%; }
}

.ic-compare { display: flex; flex-direction: column; gap: 0.5rem; }
.ic-compare[hidden] { display: none; }
.ic-compare-stage {
  position: relative;
  width: 100%;
  max-height: 420px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: repeating-conic-gradient(rgba(var(--ink), 0.06) 0 25%, transparent 0 50%) 0 0 / 16px 16px;
}
.ic-compare-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ic-after { clip-path: inset(0 0 0 var(--split)); }
.ic-compare-line { position: absolute; top: 0; bottom: 0; left: var(--split); width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); transform: translateX(-1px); pointer-events: none; }
.ic-tag {
  position: absolute;
  top: 0.6rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 600;
  pointer-events: none;
}
.ic-tag-l { left: 0.6rem; }
.ic-tag-r { right: 0.6rem; }
.ic-split { width: 100%; accent-color: var(--violet); }