/* ============================================================================
 * public/actionclone.css —— 「动作克隆」样式
 *
 * ⚠️ 前缀用 `acx-`：`.ac-` 与 `.acl-` **都已被全站占用**（账号与通用库），混用会串样式。
 * ⚠️ 主色沿用站点变量（--primary 等），**品牌色不许换**（项目铁律）。
 * ⚠️ 子页底部必须留 ≥74px（固定 TabBar 实测高度），否则最后一块内容被压住。
 * ========================================================================== */

#sub-actionclone { padding: 0 0 100px; }
/* hidden 会被 display:grid/flex 盖掉 —— 必须补这一条（项目铁律） */
#sub-actionclone [hidden] { display: none !important; }

/* ---------------- 顶部说明 ---------------- */
.acx-hd { padding: 18px 16px 6px; }
.acx-hd h2 { margin: 0 0 6px; font-size: 19px; font-weight: 700; color: var(--text); }
.acx-hd p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text2); }

/* ---------------- 步骤条 ---------------- */
.acx-steps { display: flex; align-items: center; padding: 14px 16px 4px; }
.acx-step { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; }
.acx-step i {
  width: 24px; height: 24px; border-radius: 50%; font-style: normal;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  background: #f1e9e2; color: var(--text2);
}
.acx-step span { font-size: 11px; color: var(--text2); }
.acx-step.on i { background: var(--grad); color: #fff; }
.acx-step.on span { color: var(--text); font-weight: 600; }
.acx-step.done i { background: #ffe3d2; color: var(--primary); }
.acx-steps em { flex: 1 1 auto; height: 2px; background: #f1e9e2; margin: 0 6px 16px; border-radius: 2px; }

/* ---------------- 引导卡 ---------------- */
.acx-sec { padding: 4px 16px 0; }
.acx-gd {
  background: var(--card); border-radius: 16px; padding: 13px 14px;
  box-shadow: 0 2px 12px rgba(160, 120, 90, 0.08);
}
.acx-gd-t { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 9px; }
.acx-gd-cols { display: flex; gap: 10px; }
.acx-gd-ok, .acx-gd-no { flex: 1 1 0; min-width: 0; border-radius: 11px; padding: 9px 10px; }
.acx-gd-ok { background: #f0faf3; }
.acx-gd-no { background: #fdf0f0; }
.acx-gd-ok b, .acx-gd-no b { display: block; font-size: 12px; margin-bottom: 5px; }
.acx-gd-ok b { color: #1a8b4a; }
.acx-gd-no b { color: #c0392b; }
.acx-gd-ok ul, .acx-gd-no ul { margin: 0; padding: 0; list-style: none; }
.acx-gd-ok li, .acx-gd-no li {
  font-size: 11.5px; line-height: 1.65; color: var(--text); padding-left: 11px; position: relative;
}
.acx-gd-ok li::before { content: '·'; position: absolute; left: 2px; color: #1a8b4a; font-weight: 700; }
.acx-gd-no li::before { content: '·'; position: absolute; left: 2px; color: #c0392b; font-weight: 700; }
.acx-gd-spec { margin-top: 9px; font-size: 11.5px; color: var(--text2); }
.acx-gd-hero {
  background: var(--chip-bg); color: var(--primary);
  font-size: 12.5px; font-weight: 600; line-height: 1.6;
  border-radius: 11px; padding: 9px 11px; margin-bottom: 9px;
}
.acx-gd-cases { display: flex; flex-direction: column; gap: 6px; }
.acx-gd-case {
  display: flex; flex-direction: column; gap: 2px;
  background: #fbf6f2; border-radius: 10px; padding: 8px 10px;
}
.acx-gd-case span { font-size: 11.5px; color: var(--text2); }
.acx-gd-case b { font-size: 12.5px; color: var(--text); font-weight: 600; }

/* ---------------- 上传区 ---------------- */
/* 文件输入框：**视觉隐藏但绝不 display:none**（display:none 会让部分浏览器忽略 label 的点击；
   项目铁律：上传框必须藏在 label 里，别用 opacity:0 覆盖 —— 手机点不到） */
.acx-finput {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.acx-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; min-height: 116px; cursor: pointer;
  background: var(--card); border: 1.5px dashed #f0cdb4; border-radius: 16px;
}
.acx-drop b { font-size: 14px; color: var(--primary); font-weight: 600; }
.acx-drop span { font-size: 11.5px; color: var(--text2); }
.acx-drop-img { min-height: 132px; }
.acx-file {
  display: flex; align-items: center; gap: 11px;
  background: var(--card); border-radius: 16px; padding: 12px 13px;
  box-shadow: 0 2px 12px rgba(160, 120, 90, 0.08);
}
.acx-file-ico { font-size: 24px; flex: 0 0 auto; }
.acx-thumb { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; }
.acx-file-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acx-file-main b { font-size: 13px; color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acx-file-main span { font-size: 11.5px; color: var(--text2); }
.acx-again {
  flex: 0 0 auto; border: 0; background: var(--chip-bg); color: var(--primary);
  font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 20px; cursor: pointer;
}

/* ---------------- 档位 ---------------- */
.acx-modes { display: flex; gap: 9px; }
.acx-mode {
  flex: 1 1 0; min-width: 0; cursor: pointer; text-align: left;
  background: var(--card); border: 1.5px solid #f2e4d9; border-radius: 14px;
  padding: 11px 10px; display: flex; flex-direction: column; gap: 3px;
}
.acx-mode b { font-size: 14px; color: var(--text); font-weight: 700; }
.acx-mode span { font-size: 11px; color: var(--text2); line-height: 1.45; }
.acx-mode em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--primary); margin-top: 2px; }
.acx-mode.on { border-color: var(--primary); background: #fff7f2; box-shadow: 0 0 0 3px rgba(249, 89, 1, 0.09); }

/* ---------------- 按钮 ---------------- */
.acx-go {
  display: block; width: 100%; border: 0; cursor: pointer;
  background: var(--grad); color: #fff; font-size: 15px; font-weight: 700;
  padding: 14px; border-radius: 26px; margin-top: 14px;
  text-align: center; text-decoration: none; box-sizing: border-box;
}
.acx-go:disabled { background: #f0e2d8; color: #bda896; cursor: default; }
.acx-ghost {
  border: 1.5px solid #f0cdb4; background: transparent; color: var(--primary);
  font-size: 13px; font-weight: 600; padding: 10px 16px; border-radius: 22px; cursor: pointer;
}
.acx-tips { margin: 11px 0 0; padding: 0 2px; list-style: none; }
.acx-tips li { font-size: 11.5px; line-height: 1.75; color: var(--text2); padding-left: 12px; position: relative; }
.acx-tips li::before { content: '·'; position: absolute; left: 2px; color: var(--primary); font-weight: 700; }

/* ---------------- 运行 / 结果 ---------------- */
.acx-run {
  background: var(--card); border-radius: 18px; padding: 22px 16px 16px; text-align: center;
  box-shadow: 0 2px 12px rgba(160, 120, 90, 0.08);
}
.acx-run-ico { display: flex; justify-content: center; gap: 6px; margin-bottom: 12px; }
.acx-run-ico span {
  width: 9px; height: 9px; border-radius: 50%; background: var(--primary);
  animation: acxDot 1.25s infinite ease-in-out;
}
.acx-run-ico span:nth-child(2) { animation-delay: 0.16s; }
.acx-run-ico span:nth-child(3) { animation-delay: 0.32s; }
@keyframes acxDot { 0%, 80%, 100% { opacity: 0.22; transform: scale(0.75); } 40% { opacity: 1; transform: scale(1); } }
.acx-run-stage { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 11px; }
.acx-run-bar { height: 5px; background: #f4eae2; border-radius: 4px; overflow: hidden; }
.acx-run-bar i { display: block; height: 100%; width: 0; background: var(--grad); border-radius: 4px; transition: width 1s linear; }
.acx-run-note { margin-top: 12px; font-size: 12px; line-height: 1.7; color: var(--text2); }
.acx-run-note b { color: var(--text); }
.acx-run-btns { display: flex; gap: 8px; margin-top: 4px; }
.acx-run-btns .acx-ghost { flex: 1 1 0; }
.acx-run-time { margin: 8px 0 14px; font-size: 12px; color: var(--text2); font-variant-numeric: tabular-nums; }
.acx-done-hd { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 11px; }
.acx-video { width: 100%; max-height: 70vh; border-radius: 14px; background: #000; display: block; }
.acx-done-bar { display: flex; gap: 9px; margin-top: 13px; }
.acx-done-bar .acx-go { flex: 1 1 auto; margin-top: 0; }
.acx-done-note { margin-top: 10px; font-size: 12px; color: var(--text2); }
.acx-done-note b { color: var(--primary); font-variant-numeric: tabular-nums; }   /* 总耗时醒目一点 */
.acx-fail-t { font-size: 15px; font-weight: 700; color: #c0392b; margin-bottom: 8px; }
.acx-fail-m { font-size: 13px; line-height: 1.7; color: var(--text); text-align: left; margin-bottom: 14px; }
.acx-resume {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--chip-bg); border-radius: 14px; padding: 11px 13px;
  font-size: 12.5px; color: var(--text); margin: 10px 16px 0;
}

/* ---------------- toast ---------------- */
.acx-toast {
  position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 12px);
  max-width: 82vw; background: rgba(58, 42, 30, 0.94); color: #fff;
  font-size: 13px; line-height: 1.5; padding: 10px 16px; border-radius: 22px;
  opacity: 0; pointer-events: none; transition: opacity 0.22s, transform 0.22s; z-index: 90;
}
.acx-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------------- 平板 / 桌面 ---------------- */
@media (min-width: 768px) {
  .acx-hd, .acx-steps, .acx-sec, .acx-run, .acx-resume { max-width: 680px; margin-left: auto; margin-right: auto; }
  .acx-resume { margin-top: 10px; }
}