/* ============================================================
   GPU 工坊（远程生成）· 2026-10-13
   ------------------------------------------------------------
   只服务 #page-ai 里的 #mode-gpu 面板。全部类名 gpu- 前缀，
   不碰任何既有类；本文件在 index.html 里列在 ec-market.css 之后加载。
   ★ 色彩沿用应用既有语言（slate 灰阶 + indigo 主色），不新造一套。
   ============================================================ */

/* ---------- ① 顶部连接状态卡 ---------- */
#mode-gpu .gpu-conn {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px; margin-bottom: 16px;
  border: 1px dashed #cbd5e1; border-radius: 10px; background: #f8fafc;
}
#mode-gpu .gpu-dot {
  width: 8px; height: 8px; border-radius: 999px; flex: 0 0 auto; margin-top: 5px;
  background: #94a3b8;
}
#mode-gpu .gpu-dot.is-on { background: #10b981; }
#mode-gpu .gpu-conn-t { font-size: 11.5px; font-weight: 600; color: #334155; line-height: 1.5; }
#mode-gpu .gpu-conn-s { font-size: 10.5px; color: #64748b; line-height: 1.6; margin-top: 2px; }

/* ---------- ② 「真机四段」待接清单 ---------- */
#mode-gpu .gpu-pending { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
#mode-gpu .gpu-pill {
  font-size: 9.5px; line-height: 1; padding: 3px 6px; border-radius: 999px;
  border: 1px solid #e2e8f0; background: #fff; color: #64748b;
}
#mode-gpu .gpu-pill.is-ready { border-color: #a7f3d0; background: #ecfdf5; color: #047857; }

/* ---------- ③ 任务队列：工具栏 ---------- */
#mode-gpu .gpu-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-bottom: 10px; border-bottom: 1px solid #e2e8f0; margin-bottom: 12px;
}
#mode-gpu .gpu-stat { font-size: 11px; color: #64748b; }
#mode-gpu .gpu-stat b { color: #334155; font-variant-numeric: tabular-nums; }
#mode-gpu .gpu-sbtn {
  font-size: 10.5px; padding: 4px 9px; border-radius: 7px;
  border: 1px solid #e2e8f0; background: #fff; color: #475569; cursor: pointer;
  transition: all .15s;
}
#mode-gpu .gpu-sbtn:hover { border-color: #c7d2fe; color: #4338ca; }
#mode-gpu .gpu-sbtn.is-on { border-color: #4f46e5; background: #f5f3ff; color: #4338ca; font-weight: 600; }

/* ---------- ④ 任务卡 ---------- */
#mode-gpu .gpu-job {
  border: 1px solid #e2e8f0; border-radius: 12px; background: #fff;
  padding: 12px 14px; margin-bottom: 10px; transition: border-color .15s;
}
#mode-gpu .gpu-job:hover { border-color: #cbd5e1; }
#mode-gpu .gpu-job.is-dead { opacity: .62; }
#mode-gpu .gpu-job-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
#mode-gpu .gpu-job-title {
  font-size: 12px; font-weight: 600; color: #1e293b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0;
}
#mode-gpu .gpu-job-meta { font-size: 10.5px; color: #94a3b8; margin-bottom: 8px; }
#mode-gpu .gpu-job-prompt {
  font-size: 11px; color: #475569; line-height: 1.6; margin-bottom: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- ⑤ 状态徽标（按 data-stage 上色） ---------- */
#mode-gpu .gpu-chip {
  flex: 0 0 auto; font-size: 10px; line-height: 1; padding: 4px 8px; border-radius: 999px;
  border: 1px solid #e2e8f0; background: #f8fafc; color: #475569; font-weight: 600;
}
#mode-gpu .gpu-chip[data-stage="queued"]   { border-color: #e2e8f0; background: #f8fafc; color: #64748b; }
#mode-gpu .gpu-chip[data-stage="powering"] { border-color: #fde68a; background: #fffbeb; color: #b45309; }
#mode-gpu .gpu-chip[data-stage="booting"]  { border-color: #bae6fd; background: #f0f9ff; color: #0369a1; }
#mode-gpu .gpu-chip[data-stage="running"]  { border-color: #c7d2fe; background: #eef2ff; color: #4338ca; }
#mode-gpu .gpu-chip[data-stage="fetching"] { border-color: #ddd6fe; background: #f5f3ff; color: #6d28d9; }
#mode-gpu .gpu-chip[data-stage="done"]     { border-color: #a7f3d0; background: #ecfdf5; color: #047857; }
#mode-gpu .gpu-chip[data-stage="failed"]   { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
#mode-gpu .gpu-chip[data-stage="cancelled"]{ border-color: #e2e8f0; background: #f1f5f9; color: #94a3b8; }
#mode-gpu .gpu-demo {
  flex: 0 0 auto; font-size: 9px; line-height: 1; padding: 3px 6px; border-radius: 5px;
  border: 1px dashed #fbbf24; background: #fffbeb; color: #92400e;
}

/* ---------- ⑥ 进度（六段小格 + 条） ---------- */
#mode-gpu .gpu-steps { display: flex; gap: 3px; margin-bottom: 6px; }
#mode-gpu .gpu-steps > s {
  height: 4px; flex: 1 1 0; border-radius: 999px; background: #e2e8f0; text-decoration: none;
}
#mode-gpu .gpu-steps > s.is-on { background: #4f46e5; }
#mode-gpu .gpu-steps > s.is-bad { background: #ef4444; }
#mode-gpu .gpu-steps > s.is-off { background: #cbd5e1; }
#mode-gpu .gpu-stepname {
  display: flex; justify-content: space-between; font-size: 9.5px; color: #94a3b8;
}

/* ---------- ⑦ 产物 ---------- */
#mode-gpu .gpu-out { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
#mode-gpu .gpu-out > a {
  display: block; width: 56px; height: 56px; border-radius: 8px; overflow: hidden;
  border: 1px solid #e2e8f0; background: #f1f5f9;
}
#mode-gpu .gpu-out > a > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- ⑧ 说明脚注 ---------- */
#mode-gpu .gpu-note {
  font-size: 10.5px; color: #94a3b8; line-height: 1.7;
  border-left: 2px solid #e2e8f0; padding-left: 8px; margin-top: 12px;
}
#mode-gpu .gpu-kv { font-size: 10.5px; color: #64748b; line-height: 1.7; }
#mode-gpu .gpu-kv code { font-size: 10px; background: #f1f5f9; padding: 1px 4px; border-radius: 4px; color: #475569; }
#mode-gpu .gpu-refs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
#mode-gpu .gpu-refs > span {
  position: relative; width: 44px; height: 44px; border-radius: 8px; overflow: hidden;
  border: 1px solid #e2e8f0; background: #f1f5f9;
}
#mode-gpu .gpu-refs > span > img { width: 100%; height: 100%; object-fit: cover; display: block; }
#mode-gpu .gpu-refs > span > b {
  position: absolute; top: 1px; right: 2px; font-size: 9px; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.6); cursor: pointer; font-weight: 400;
}