.video-generate-hint {
  display: block;
  margin-top: 7px;
  color: #8390a2;
  font-size: 10px;
  line-height: 1.5;
}

.video-task-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
}

.video-task-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e1e8f1;
  border-radius: 9px;
  background: #fbfcfe;
}

.video-task-card video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #101827;
}

.video-task-body { padding: 11px; }
.video-task-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.video-task-title strong { overflow: hidden; color: #3d5270; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.video-task-title > span { flex: none; padding: 3px 7px; border-radius: 999px; background: #eaf8f2; color: #23845e; font-size: 9px; }
.video-task-delete { display: grid; flex: none; width: 26px; height: 26px; padding: 0; place-items: center; border: 1px solid #e2e7ef; border-radius: 6px; background: #fff; color: #78869a; font-size: 18px; line-height: 1; cursor: pointer; }
.video-task-delete:hover { border-color: #e4a7ad; background: #fff5f6; color: #bd4653; }
.video-task-body > p { min-height: 32px; margin: 7px 0 0; overflow: hidden; color: #6f7f94; font-size: 10px; line-height: 1.55; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.video-task-body > small { display: block; margin-top: 7px; color: #8b98a9; font-size: 9px; }

.video-task-state {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 112px;
  padding: 16px;
  background: linear-gradient(135deg, #f7faff, #edf3ff);
}

.video-task-state > span {
  display: grid;
  flex: none;
  width: 35px;
  height: 35px;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--blue);
  font-weight: 700;
  box-shadow: 0 4px 14px #2d6cdf1c;
}

.video-task-state strong { display: block; color: #425976; font-size: 12px; }
.video-task-state p { margin: 5px 0 0; color: #7b899c; font-size: 9px; line-height: 1.5; }
.video-task-card.is-error .video-task-state { background: #fff5f6; }
.video-task-card.is-error .video-task-state > span { color: #c94c5a; }
.video-task-spinner { border: 3px solid #d8e4fb; border-top-color: var(--blue); animation: video-task-spin .8s linear infinite; }
.video-task-card .video-result-meta span { margin-right: auto; }

@keyframes video-task-spin { to { transform: rotate(360deg); } }

@media (max-width: 560px) {
  .video-task-grid { grid-template-columns: 1fr; }
  .video-task-card .video-result-meta { align-items: flex-start; flex-wrap: wrap; }
  .video-task-card .video-result-meta span { width: 100%; }
}