.vf-summary-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.vf-progress-wrap {
  display: grid;
  gap: 0.35rem;
}

.vf-progress-track {
  height: 9px;
  overflow: hidden;
  border: 1px solid rgba(99, 179, 255, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.vf-progress-track span {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--vf-blue), var(--vf-purple));
  transition: width 300ms ease;
}

.vf-progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.vf-job-error {
  border: 1px solid rgba(255, 104, 120, 0.35);
  border-radius: 12px;
  background: rgba(255, 104, 120, 0.08);
  color: #ffd3d8;
  padding: 0.65rem 0.75rem;
  font-size: 0.8rem;
  line-height: 1.45;
}

.vf-primary-action {
  border-color: rgba(99, 179, 255, 0.55);
  background: rgba(99, 179, 255, 0.14);
  color: #d6edff;
}

.vf-danger-button {
  border-color: rgba(255, 104, 120, 0.5);
  background: rgba(255, 104, 120, 0.1);
  color: #ffd3d8;
}

.vf-badge.status-pending,
.vf-badge.status-preparing,
.vf-badge.status-rendering,
.vf-badge.status-uploading {
  border-color: rgba(99, 179, 255, 0.52);
  color: #b9ddff;
}

.vf-badge.status-cancelled {
  border-color: rgba(255, 255, 255, 0.28);
  color: #c3cbc6;
}

/* Keep both Video Factory columns and every render-history child inside the CMS shell. */
.video-factory-page,
.vf-shell,
.vf-grid,
.vf-panel,
.vf-history-list,
.vf-job-card {
  min-width: 0;
  max-width: 100%;
}

.vf-grid {
  width: 100%;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

.vf-grid > *,
.vf-job-header > *,
.vf-progress-meta > * {
  min-width: 0;
}

.vf-job-card {
  overflow: hidden;
}

.vf-history-toolbar {
  width: 100%;
}

.vf-history-toolbar > * {
  min-width: 0;
  flex: 1 1 12rem;
}

.vf-job-title,
.vf-job-meta,
.vf-job-error,
.vf-progress-meta span {
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 760px) {
  .vf-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}