align(tasks·像素复刻): 视频任务记录/店铺数据记录 两页自绘复刻旧版(panel-image-video-tasks/shop-data-crawl-tasks)——form-box筛选[用户名/提交起止]+panel-box toolbar[全选/批量下载/权限配置/汇总]+任务/店铺卡片网格+旧版状态徽章映射+原生confirm删除+旧式分页(店铺级+卡片9/页)；空态/调试链接复制对齐旧版

admin-frontend-vue/src/pages/tasks/ImageVideoTasksPage.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { formatDateTime } from '@/utils/datetime'
-/** 视频任务记录页：任务卡片网格（播放/下载/复制）+ 筛选 + 批量打包下载 + 明细 + 数据范围授权。 */
+/** 视频任务记录页 · 像素复刻旧版 admin.html panel-image-video-tasks（自绘：form-box 筛选[用户名/提交起止+查询/重置] + panel-box toolbar[全选/批量下载/权限配置/汇总] + 任务卡片网格 + 旧式分页）。
+ *   script 逻辑沿用现有 Vue 实现（批量打包/明细抽屉/权限授权）。 */
 import { computed, onMounted, reactive, ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import { requestVideoZipDownload, fetchImageVideoTasks, fetchImageVideoTaskDetail } from './image-video-api.ts'
@@ -16,12 +17,16 @@ import {
 } from './image-video-selection.ts'
 import { grantedUserIds, type TaskPermissionItem } from './task-permission.ts'
 import { imageVideoDownloadFilename, videoKeysOf } from './image-video-view.ts'
+import { useAdminSessionStore } from '@/stores/admin-session'
 
+const session = useAdminSessionStore()
 const loading = ref(false)
 const tasks = ref<ImageVideoRow[]>([])
 const totalTasks = ref(0)
 const page = ref(1)
 const pageSize = 20
+const jumpPage = ref('')
+const totalPages = computed(() => Math.max(1, Math.ceil(totalTasks.value / pageSize)))
 
 const filter = reactive<ImageVideoFilter & { dateRange: string[] }>({ ...createImageVideoFilter(), dateRange: [] })
 const selection = ref<Set<string>>(new Set())
@@ -38,17 +43,37 @@ const permissionSaving = ref(false)
 const downloading = ref(false)
 const downloadingKey = ref('')
 
+/** 旧版状态 label 映射（admin.js 前缀兜底：RUN/WAIT/PROCESS/POLL → 处理中）。 */
 function statusLabel(status: string): string {
-  const map: Record<string, string> = { PENDING: '排队中', RUNNING: '进行中', SUCCESS: '成功', FAILED: '失败', CANCELLED: '已取消', UNKNOWN: '未知' }
-  return map[status] || status
+  const map: Record<string, string> = {
+    PENDING: '待执行',
+    WAITING: '排队中',
+    RUNNING: '执行中',
+    POLLING: '处理中',
+    SUCCESS: '已完成',
+    COMPLETED: '已完成',
+    DONE: '已完成',
+    FAILED: '失败',
+    ERROR: '失败',
+    CANCELLED: '已取消',
+    CANCELED: '已取消',
+    DELETED: '已删除',
+    STOPPED: '已停止',
+    UNKNOWN: '未知',
+  }
+  const key = (status || '').toUpperCase()
+  if (map[key]) return map[key]
+  if (/^(RUN|WAIT|PROCESS|POLL)/.test(key)) return '处理中'
+  return key || '未知'
 }
 
-function statusType(status: string): 'info' | 'warning' | 'success' | 'danger' | 'primary' {
-  if (status === 'SUCCESS') return 'success'
-  if (status === 'RUNNING') return 'warning'
-  if (status === 'FAILED') return 'danger'
-  if (status === 'CANCELLED') return 'info'
-  return 'info'
+function statusType(status: string): 'pending' | 'running' | 'success' | 'failed' | 'cancelled' {
+  const key = (status || '').toUpperCase()
+  if (key === 'SUCCESS' || key === 'COMPLETED' || key === 'DONE') return 'success'
+  if (key === 'FAILED' || key === 'ERROR') return 'failed'
+  if (key === 'CANCELLED' || key === 'CANCELED') return 'cancelled'
+  if (key === 'PENDING' || key === 'WAITING') return 'pending'
+  return 'running'
 }
 
 const currentVideoKeys = computed(() => {
@@ -101,6 +126,22 @@ function reset() {
   void load()
 }
 
+function changePage(next: number) {
+  if (next < 1 || next > totalPages.value) return
+  page.value = next
+  selection.value = new Set()
+  void load()
+}
+
+function goJump() {
+  const n = Number.parseInt(jumpPage.value, 10)
+  if (Number.isNaN(n)) {
+    ElMessage.warning('请输入页码')
+    return
+  }
+  changePage(Math.min(Math.max(n, 1), totalPages.value))
+}
+
 function toggleSelectAll() {
   selection.value = allSelected.value ? clearVideoSelection() : new Set(currentVideoKeys.value)
 }
@@ -221,7 +262,8 @@ async function savePermission() {
 }
 
 function videoErrorText(task: ImageVideoRow): string {
-  if (task.status === 'FAILED' || task.status === 'CANCELLED') return '任务失败，未生成视频'
+  const key = (task.status || '').toUpperCase()
+  if (key === 'FAILED' || key === 'ERROR' || key === 'CANCELLED') return '任务失败，未生成视频'
   return '视频生成中或暂无结果'
 }
 
@@ -233,100 +275,101 @@ onMounted(load)
 </script>
 
 <template>
-  <div class="page-stack">
-    <div class="page-heading">
-      <div>
-        <h2>视频任务记录</h2>
-        <p>查看图生视频任务卡片、在线预览与下载视频、配置数据范围授权。</p>
+  <div class="iv-view">
+    <section class="form-box">
+      <h3>视频任务记录筛选</h3>
+      <div class="form-row">
+        <div class="form-group" style="min-width: 160px">
+          <label>用户名</label>
+          <input v-model="filter.username" type="text" placeholder="模糊搜索" @keyup.enter="apply" />
+        </div>
+        <div class="form-group" style="min-width: 176px">
+          <label>提交开始</label>
+          <input v-model="filter.dateRange[0]" type="datetime-local" />
+        </div>
+        <div class="form-group" style="min-width: 176px">
+          <label>提交结束</label>
+          <input v-model="filter.dateRange[1]" type="datetime-local" />
+        </div>
+        <button class="btn" type="button" @click="apply">查询</button>
+        <button class="btn btn-secondary" type="button" @click="reset">重置</button>
       </div>
-    </div>
+    </section>
 
-    <el-card shadow="never" style="margin-bottom: 14px">
-      <div class="filter-grid">
-        <div class="f-item">
-          <label>用户名（模糊搜索）</label>
-          <el-input v-model="filter.username" placeholder="输入用户名关键字" clearable @keyup.enter="apply" />
-        </div>
-        <div class="f-item wide">
-          <label>提交时间</label>
-          <el-date-picker v-model="filter.dateRange" type="datetimerange" range-separator="至" start-placeholder="开始" end-placeholder="结束" value-format="YYYY-MM-DDTHH:mm" unlink-panels />
-        </div>
-        <div class="f-item btn-row">
-          <el-button type="primary" @click="apply">查询</el-button>
-          <el-button @click="reset">重置</el-button>
+    <section class="panel-box iv-panel">
+      <div class="iv-toolbar">
+        <div class="iv-toolbar-main">
+          <button v-if="session.isSuperAdmin" class="btn btn-secondary" type="button" @click="openPermission">权限配置</button>
+          <button class="btn iv-batch-btn" type="button" :disabled="selectionCount === 0 || downloading" @click="downloadBatch">
+            批量下载{{ selectionCount ? ` (${selectionCount})` : '' }}
+          </button>
+          <label class="iv-select-all">
+            <input type="checkbox" :checked="allSelected" @change="toggleSelectAll" />
+            全选当前页
+          </label>
         </div>
+        <span class="iv-summary">共 {{ totalTasks }} 个任务 · 本页 {{ currentVideoCount }} 个视频</span>
       </div>
-    </el-card>
 
-    <el-card shadow="never">
-      <div v-loading="loading" class="list-toolbar">
-      <div class="lt-buttons">
-        <el-checkbox :model-value="allSelected" @change="toggleSelectAll">全选当前页</el-checkbox>
-        <el-button :disabled="selectionCount === 0" :loading="downloading" @click="downloadBatch">
-          批量下载{{ selectionCount ? `(${selectionCount})` : '' }}
-        </el-button>
-        <el-button @click="openPermission">权限配置</el-button>
+      <div v-loading="loading" class="task-card-grid">
+        <template v-if="tasks.length">
+          <section v-for="task in tasks" :key="String(task.taskId)" class="iv-card">
+            <header class="iv-card-head">
+              <input type="checkbox" :checked="cardSelected(task)" :disabled="!hasVideos(task)" @change="toggleCard(task)" />
+              <span class="iv-card-title">任务 {{ task.taskId }} · 视频 {{ task.videos.length }}</span>
+              <span class="st-pill" :class="`is-${statusType(task.status)}`">{{ statusLabel(task.status) }}</span>
+            </header>
+
+            <div class="iv-card-info">
+              <div class="iv-info-row"><label>用户名</label><span>{{ task.username || '-' }}</span></div>
+              <div class="iv-info-row"><label>所属分组</label><span>{{ task.groupName || '-' }}</span></div>
+              <div class="iv-info-row"><label>任务模式</label><span>{{ task.mode || '-' }}</span></div>
+              <div class="iv-info-row"><label>生成时间</label><span>{{ formatDateTime(imageVideoGeneratedAt(task)) }}</span></div>
+              <div class="iv-info-row">
+                <label>调试链接</label>
+                <button v-if="task.debugUrl" class="btn btn-sm" type="button" @click="copyLink(task.debugUrl)">复制链接</button>
+                <span v-else>-</span>
+              </div>
+            </div>
+
+            <div v-if="hasVideos(task)" class="iv-video-list">
+              <div v-for="(video, index) in task.videos" :key="`${task.taskId}-${index}`" class="iv-video-row">
+                <input type="checkbox" :checked="selection.has(`${task.taskId}:${index}`)" @change="toggleVideoKey(`${task.taskId}:${index}`)" />
+                <video v-if="video.displayUrl" class="iv-player" :src="video.displayUrl" controls preload="metadata"></video>
+                <span v-else class="iv-no-preview">视频加载失败，可尝试下载</span>
+                <div class="iv-video-ops">
+                  <button
+                    class="btn btn-sm btn-secondary"
+                    type="button"
+                    :disabled="!video.displayUrl"
+                    :aria-busy="downloadingKey === `${task.taskId}:${index}`"
+                    @click="downloadVideo(task, index, video)"
+                  >
+                    下载
+                  </button>
+                  <button v-if="video.displayUrl" class="btn btn-sm" type="button" @click="copyLink(video.displayUrl)">复制链接</button>
+                </div>
+              </div>
+            </div>
+            <div v-else class="iv-empty-note">{{ videoErrorText(task) }}</div>
+          </section>
+        </template>
+        <div v-else-if="!loading" class="empty-tip">暂无符合条件的视频任务</div>
       </div>
-      <span class="list-toolbar-summary">共 {{ totalTasks }} 个任务 · 本页 {{ currentVideoCount }} 个视频</span>
-    </div>
 
-    <div v-if="tasks.length" class="task-card-grid">
-      <section v-for="task in tasks" :key="String(task.taskId)" class="task-card">
-        <header class="task-card-head">
-          <el-checkbox :model-value="cardSelected(task)" :disabled="!hasVideos(task)" @change="toggleCard(task)" />
-          <div class="task-card-title">
-            <span class="task-id">任务 {{ task.taskId }}</span>
-          </div>
-          <el-tag :type="statusType(task.status)" size="small">{{ statusLabel(task.status) }}</el-tag>
-          <el-button type="primary" size="small" @click="openDetail(task)">明细</el-button>
-        </header>
-
-        <div class="task-card-info">
-          <div class="task-info-row"><label>用户名</label><span>{{ task.username || '-' }}</span></div>
-          <div class="task-info-row"><label>所属分组</label><span>{{ task.groupName || '-' }}</span></div>
-          <div class="task-info-row"><label>任务模式</label><span>{{ task.mode || '-' }}</span></div>
-          <div class="task-info-row"><label>生成时间</label><span>{{ formatDateTime(imageVideoGeneratedAt(task)) }}</span></div>
-          <div class="task-info-row">
-            <label>调试链接</label>
-            <el-button v-if="task.debugUrl" text type="primary" size="small" @click="copyLink(task.debugUrl)">复制链接</el-button>
-            <span v-else>-</span>
-          </div>
-        </div>
-
-        <div v-if="hasVideos(task)" class="video-list">
-          <div v-for="(video, index) in task.videos" :key="`${task.taskId}-${index}`" class="video-row">
-            <el-checkbox :model-value="selection.has(`${task.taskId}:${index}`)" @change="toggleVideoKey(`${task.taskId}:${index}`)" />
-            <video v-if="video.displayUrl" class="video-player" :src="video.displayUrl" controls preload="metadata" />
-            <span v-else class="video-no-preview">视频加载失败，可尝试下载</span>
-            <span class="video-index">第 {{ index + 1 }} 个</span>
-            <el-button
-              type="success"
-              size="small"
-              :disabled="!video.displayUrl"
-              :loading="downloadingKey === `${task.taskId}:${index}`"
-              @click="downloadVideo(task, index, video)"
-            >
-              下载
-            </el-button>
-            <el-button v-if="video.displayUrl" text type="primary" size="small" @click="copyLink(video.displayUrl)">复制链接</el-button>
-          </div>
-        </div>
-        <div v-else class="video-empty">{{ videoErrorText(task) }}</div>
-      </section>
-    </div>
-
-    <el-empty v-else-if="!loading" description="暂无视频任务记录" />
-    <div class="table-footer">
-      <el-pagination
-        background
-        layout="prev, pager, next, jumper"
-        :total="totalTasks"
-        :page-size="pageSize"
-        :current-page="page"
-        @current-change="(p: number) => { page = p; selection = new Set(); load() }"
-      />
-    </div>
-    </el-card>
+      <div class="pagination">
+        <span class="page-total">共 {{ totalTasks }} 条</span>
+        <button type="button" :disabled="page <= 1" @click="changePage(page - 1)">上一页</button>
+        <span class="page-cur">第 {{ page }} / {{ totalPages }} 页</span>
+        <button type="button" :disabled="page >= totalPages" @click="changePage(page + 1)">下一页</button>
+        <span class="page-jump">
+          跳至
+          <input v-model="jumpPage" type="text" inputmode="numeric" @keyup.enter="goJump" />
+          页
+          <button type="button" @click="goJump">跳转</button>
+        </span>
+      </div>
+    </section>
 
     <el-drawer v-model="detailVisible" title="任务明细" size="720px">
       <div v-loading="detailLoading">
@@ -338,25 +381,15 @@ onMounted(load)
             <el-descriptions-item label="任务模式">{{ detail.mode || '—' }}</el-descriptions-item>
             <el-descriptions-item label="提交时间">{{ formatDateTime(detail.submittedAt) }}</el-descriptions-item>
             <el-descriptions-item label="生成时间">{{ formatDateTime(imageVideoGeneratedAt(detail)) }}</el-descriptions-item>
-            <el-descriptions-item label="调试链接">
-              <el-button v-if="detail.debugUrl" text type="primary" size="small" @click="copyLink(detail.debugUrl)">复制链接</el-button>
-              <span v-else>—</span>
-            </el-descriptions-item>
             <el-descriptions-item label="执行ID">{{ detail.cozeExecuteId || '—' }}</el-descriptions-item>
             <el-descriptions-item label="错误">{{ detail.errorMessage || '—' }}</el-descriptions-item>
           </el-descriptions>
-          <h4>请求</h4>
-          <pre class="json-block">{{ JSON.stringify(detail.request, null, 2) }}</pre>
-          <h4>提交响应</h4>
-          <pre class="json-block">{{ JSON.stringify(detail.submitResponse, null, 2) }}</pre>
-          <h4>结果</h4>
-          <pre class="json-block">{{ JSON.stringify(detail.result, null, 2) }}</pre>
         </template>
       </div>
     </el-drawer>
 
-    <el-dialog v-model="permissionVisible" title="视频任务数据范围授权" width="620px">
-      <p class="dim">勾选允许查看/操作视频任务的用户（仅数据范围）。当前已授权 {{ permissionGrantedCount }} 人。</p>
+    <el-dialog v-model="permissionVisible" title="视频任务记录权限配置" width="620px">
+      <p class="dim">勾选允许查看视频任务记录的用户（仅数据范围）。当前已授权 {{ permissionGrantedCount }} 人。</p>
       <el-table :data="permissionItems" border size="small" max-height="420">
         <el-table-column prop="id" label="ID" min-width="80" />
         <el-table-column prop="username" label="用户名" min-width="180" />
@@ -375,34 +408,315 @@ onMounted(load)
 </template>
 
 <style scoped>
-.page-heading { display: flex; justify-content: space-between; align-items: center; }
-.actions { display: flex; align-items: center; gap: 12px; }
-.filter-grid { display: flex; flex-wrap: wrap; gap: 12px 18px; }
-.f-item { display: flex; flex-direction: column; gap: 6px; width: 220px; }
-.f-item label { color: var(--el-text-color-secondary); font-size: 12px; }
-.f-item.wide { width: 340px; }
-.f-item.btn-row { flex-direction: row; align-items: flex-end; gap: 8px; width: auto; margin-left: auto; flex: none; }
-.video-summary-row { display: flex; justify-content: space-between; align-items: center; color: var(--el-text-color-secondary); font-size: 13px; }
-.list-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--el-text-color-secondary); font-size: 13px; margin-bottom: 14px; }
-.lt-buttons { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }
-.list-toolbar-summary { white-space: nowrap; }
-.table-footer { display: flex; justify-content: flex-end; margin-top: 14px; }
-.task-card-grid { display: flex; flex-direction: column; gap: 14px; }
-.task-card { border: 1px solid var(--el-border-color); border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(39, 67, 94, 0.04), 0 14px 30px -24px rgba(39, 67, 94, 0.28); overflow: hidden; }
-.task-card-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--el-border-color-lighter); }
-.task-card-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
-.task-id { font-weight: 600; color: var(--el-text-color-primary); }
-.task-card-info { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; padding: 12px 16px; border-bottom: 1px dashed var(--el-border-color-lighter); }
-.task-info-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; min-width: 0; }
-.task-info-row label { flex: none; color: var(--el-text-color-secondary); min-width: 60px; }
-.task-info-row span { color: var(--el-text-color-regular); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.video-list { padding: 6px 16px; }
-.video-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--el-border-color-lighter); }
-.video-row:last-child { border-bottom: 0; }
-.video-player { width: 300px; max-height: 180px; border-radius: 8px; background: #0d1117; }
-.video-no-preview { color: var(--el-text-color-secondary); font-size: 13px; }
-.video-index { color: var(--el-text-color-secondary); font-size: 12.5px; }
-.video-empty { padding: 18px 16px; color: var(--el-text-color-secondary); font-size: 13px; }
-.dim { color: var(--el-text-color-secondary); font-size: 12px; }
-.json-block { background: var(--el-fill-color-lighter); border-radius: 6px; padding: 10px; max-height: 320px; overflow: auto; font-size: 12px; }
+/* 像素复刻旧版 admin.html panel-image-video-tasks（蓝白末层）。 */
+.iv-view {
+  font-family: inherit;
+  color: #24384d;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+.form-box,
+.panel-box {
+  width: 100%;
+  min-width: 0;
+  padding: 20px 22px 24px;
+  border: 1px solid #d8e3ee;
+  border-radius: 14px;
+  background: linear-gradient(145deg, #ffffff, #f9fbfd);
+  box-shadow: 0 1px 2px rgba(39, 67, 94, 0.04), 0 14px 30px -24px rgba(39, 67, 94, 0.28);
+}
+h3 {
+  margin: 0 0 16px;
+  font-size: 15px;
+  font-weight: 650;
+  color: #24384d;
+  letter-spacing: 0.2px;
+}
+.form-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 14px 18px;
+}
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+  margin-bottom: 0;
+}
+.form-group label {
+  color: #5b6f83;
+  font-size: 12.5px;
+  font-weight: 600;
+}
+.form-group input,
+.form-group select {
+  min-width: 0;
+  min-height: 42px;
+  padding: 8px 12px;
+  border: 1px solid #cbd9e6;
+  border-radius: 9px;
+  background: #f8fbfd;
+  color: #24384d;
+  font-size: 13.5px;
+  font-family: inherit;
+  color-scheme: light;
+  outline: none;
+  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
+}
+.form-group input:hover,
+.form-group select:hover {
+  border-color: #9fb7cd;
+}
+.form-group input:focus,
+.form-group select:focus {
+  background: #ffffff;
+  border-color: #5f85ad;
+  box-shadow: 0 0 0 3px rgba(95, 133, 173, 0.16);
+}
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 42px;
+  padding: 9px 18px;
+  border: 1px solid #4f78a5;
+  border-radius: 9px;
+  background: linear-gradient(135deg, #5f85ad, #4f78a5);
+  color: #ffffff;
+  font-family: inherit;
+  font-size: 13.5px;
+  cursor: pointer;
+  box-shadow: 0 8px 18px -14px rgba(79, 120, 165, 0.72);
+  transition: background 160ms ease, box-shadow 160ms ease, transform 120ms ease;
+}
+.btn:hover:not(:disabled) {
+  background: linear-gradient(135deg, #7094ba, #5d83ac);
+  box-shadow: 0 11px 22px -14px rgba(79, 120, 165, 0.8);
+}
+.btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+.btn-secondary {
+  background: #ffffff;
+  color: #5b6f83;
+  border-color: #c7d7e5;
+}
+.btn-secondary:hover:not(:disabled) {
+  color: #2f5d8b;
+  border-color: #95b1cb;
+  background: #edf5fb;
+}
+.btn-sm {
+  min-height: 36px;
+  padding: 7px 12px;
+}
+.iv-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-bottom: 14px;
+}
+.iv-toolbar-main {
+  display: inline-flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.iv-select-all {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 13px;
+  color: #5b6f83;
+  cursor: pointer;
+}
+.iv-summary {
+  color: #5b6f83;
+  font-size: 13px;
+  white-space: nowrap;
+}
+.task-card-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+.iv-card {
+  border: 1px solid #d8e3ee;
+  border-radius: 12px;
+  background: #ffffff;
+  box-shadow: 0 1px 2px rgba(39, 67, 94, 0.04), 0 14px 30px -24px rgba(39, 67, 94, 0.28);
+  overflow: hidden;
+}
+.iv-card-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  border-bottom: 1px solid #e6edf4;
+}
+.iv-card-title {
+  font-weight: 600;
+  color: #24384d;
+  font-size: 13px;
+}
+.iv-card-info {
+  padding: 8px 16px 0;
+}
+.iv-info-row {
+  display: flex;
+  gap: 10px;
+  padding: 4px 0;
+  font-size: 13px;
+}
+.iv-info-row label {
+  flex: none;
+  width: 64px;
+  color: #8293a5;
+}
+.iv-info-row span {
+  color: #40586e;
+  min-width: 0;
+}
+.iv-video-list {
+  padding: 8px 16px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.iv-video-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.iv-player {
+  flex: 1;
+  min-width: 0;
+  max-height: 240px;
+  border-radius: 8px;
+  background: #0f1722;
+}
+.iv-no-preview {
+  flex: 1;
+  padding: 18px 12px;
+  text-align: center;
+  color: #8293a5;
+  font-size: 12.5px;
+  border: 1px dashed #d8e3ee;
+  border-radius: 8px;
+}
+.iv-video-ops {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.iv-empty-note {
+  padding: 16px;
+  color: #8293a5;
+  font-size: 12.5px;
+}
+.st-pill {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  line-height: 1.7;
+  border: 1px solid transparent;
+  white-space: nowrap;
+}
+.st-pill.is-success {
+  color: #3d7158;
+  background: #e8f2eb;
+  border-color: #bdd7c5;
+}
+.st-pill.is-failed {
+  color: #91474f;
+  background: #f8ebeb;
+  border-color: #e4c2c5;
+}
+.st-pill.is-cancelled {
+  color: #5b6f83;
+  background: #f1f6fa;
+  border-color: #d6e2ec;
+}
+.st-pill.is-pending {
+  color: #8a6d3b;
+  background: #fbf4ea;
+  border-color: #e7d3ae;
+}
+.st-pill.is-running {
+  color: #8a6d3b;
+  background: #fbf4ea;
+  border-color: #e7d3ae;
+}
+.empty-tip {
+  padding: 44px 24px;
+  text-align: center;
+  color: #8293a5;
+  font-size: 13.5px;
+}
+.pagination {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  margin-top: 18px;
+  color: #5b6f83;
+  font-size: 13px;
+}
+.pagination button {
+  min-height: 30px;
+  padding: 4px 12px;
+  border: 1px solid #c7d7e5;
+  border-radius: 8px;
+  background: #ffffff;
+  color: #5b6f83;
+  font-family: inherit;
+  font-size: 13px;
+  cursor: pointer;
+}
+.pagination button:hover:not(:disabled) {
+  background: #edf5fb;
+  border-color: #95b1cb;
+  color: #2f5d8b;
+}
+.pagination button:disabled {
+  background: #eef3f7;
+  color: #9baaba;
+  cursor: not-allowed;
+}
+.page-total {
+  margin-right: 4px;
+}
+.page-jump {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.page-jump input {
+  width: 56px;
+  min-height: 30px;
+  padding: 4px 8px;
+  border: 1px solid #cbd9e6;
+  border-radius: 8px;
+  background: #f8fbfd;
+  color: #24384d;
+  font-size: 13px;
+  font-family: inherit;
+}
+.dim {
+  color: #8293a5;
+  font-size: 12px;
+}
+@media (max-width: 1100px) {
+  .task-card-grid {
+    grid-template-columns: 1fr;
+  }
+}
 </style>