.creative-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  padding: 4px 0;
}
.creative-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.creative-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--surface-3, #1c1a26);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.creative-thumb img { width: 100%; height: 100%; object-fit: cover; }
.creative-thumb-empty { color: var(--ink-4); font-size: 11px; }
.creative-body { padding: 10px 12px 12px; }
.creative-name {
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 2px;
}
.creative-meta {
  font-size: 11px; color: var(--ink-4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 8px;
}
.creative-stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 6px 8px; margin-top: 6px;
}
.creative-stats > div {
  display: flex; flex-direction: column; gap: 1px;
  font-size: 11px;
}
.creative-stats span { color: var(--ink-4); font-size: 10.5px; }
.creative-stats b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }

.pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft, rgba(91,91,240,0.12));
  color: var(--accent);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.04em;
}
.muted { color: var(--ink-4); text-align: center; padding: 16px; }
.trunc {
  max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}