.ci-bulk { display: flex; gap: 6px; flex-wrap: wrap; }

.ci-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.ci-item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px 16px;
  align-items: center;
  padding: 12px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--sunken);
}
@media (min-width: 640px) {
  .ci-item { grid-template-columns: 88px minmax(0, 1fr) auto; }
}

.ci-thumb {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background: repeating-conic-gradient(var(--line) 0 25%, var(--surface) 0 50%) 0 0 / 14px 14px;
}
.ci-thumb img { width: 100%; height: 100%; object-fit: cover; }

.ci-info { min-width: 0; }
.ci-info p { margin: 0; }
.ci-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-sizes { font-variant-numeric: tabular-nums; }
.ci-sizes strong { font-size: 1.15rem; }
.ci-saved { color: var(--ok); font-weight: 650; margin-left: 4px; }
.ci-meta { color: var(--muted); font-size: 0.92rem; }
.ci-note { color: var(--muted); font-size: 0.92rem; margin-top: 4px !important; }
.ci-note.is-err { color: var(--err); }

.ci-actions { display: flex; gap: 6px; flex-wrap: wrap; grid-column: 1 / -1; }
@media (min-width: 640px) {
  .ci-actions { grid-column: auto; justify-content: flex-end; }
}

.ci-item.is-working .ci-sizes { color: var(--muted); }
.ci-item.is-working .ci-thumb { opacity: 0.5; }

.ci-status { margin: 0; color: var(--muted); font-size: 0.92rem; }