/* ============================================================
   任务条（剪辑师 / 投流师 / 管理员共用；唯一实现 src/ui/bar.js）
   放在独立文件里而不是 editor.css / buyer.css：三端必须用同一份样式，
   拆到各自文件就迟早又走回去。

   三行固定结构：标题行（含佣金）→ 信息行（单行省略）→ 四步 + n/N + 操作。
   标题独占一行，四步等宽写死，条与条之间才能上下严格对齐。
   ============================================================ */
.bar-list{display:flex;flex-direction:column;gap:11px}
.bar{position:relative;cursor:pointer;border:1px solid var(--line);border-left:5px solid var(--edge-making);
  border-radius:12px;background:var(--panel);padding:14px 16px;
  box-shadow:0 1px 2px rgba(16,24,40,.05),0 2px 10px rgba(16,24,40,.045);
  transition:box-shadow .15s,border-color .15s,background-color .15s}
.bar:hover{background:var(--hover);border-top-color:var(--line2);border-right-color:var(--line2);border-bottom-color:var(--line2);
  box-shadow:inset 0 0 0 1px rgba(59,107,181,.38),0 6px 18px rgba(16,24,40,.07)}
.bar.is-locked:hover{background:var(--hover)}
.bar.st-making{border-left-color:var(--edge-making)}
.bar.st-published{border-left-color:var(--edge-published)}
.bar.st-deployed{border-left-color:var(--edge-deployed)}
.bar.st-success,.bar.st-received{border-left-color:var(--edge-ok);background:var(--ok-bg)}
.bar.st-failed{border-left-color:var(--edge-failed)}
.bar.is-failed{background:var(--bad-bg);border-color:var(--line-red);border-left-color:var(--edge-failed)}
.bar.st-failed:hover,.bar.is-failed:hover{background:var(--bad-bg);border-top-color:var(--line-red);
  border-right-color:var(--line-red);border-bottom-color:var(--line-red);
  box-shadow:inset 0 0 0 1px rgba(192,39,28,.38),0 6px 18px rgba(16,24,40,.07)}
.bar.is-locked{background:var(--soft)}
.bar:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* 三行固定结构：
   ① 顶部行：任务名 + Task ID + 状态 ｜ 右侧接「要求 / 播放 / 佣金」三格定宽数字
   ② 归属行：@账号 · 设备 · 提交时间（单行省略）
   ③ 底部行：四步（进度已含 n/N，不再重复画一个）· 操作
   要求和佣金必须在顶部同一行、并且各自占固定宽度的列：条与条之间这些数字才能在同一列上。 */
.bar-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;min-width:0;line-height:1.5}
.bar-title{flex:1 1 240px;display:flex;align-items:center;gap:8px;min-width:0}
/* 标题占满剩余宽度，把数字组顶到最右；换行时数字组自然回到行首，和账号行左对齐 */
.bar-name{flex:0 1 auto;min-width:0;font-size:14.5px;font-weight:650;letter-spacing:-.1px;line-height:1.5;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-title .ref-chip{flex:0 0 auto}

/* 状态标记：实心矩形块 + 白字，放在任务名之前，一眼看到这根条走到哪了 */
.state-chip{flex:0 0 auto;display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:5px;
  font-size:11px;font-weight:650;color:#fff;letter-spacing:.2px;white-space:nowrap}
.sc-making{background:#8b95a6}
.sc-published{background:#2f6fed}
.sc-deployed{background:#c98200}
.sc-success{background:#1f9d55}
.sc-failed{background:var(--brand)}
.sc-received{background:#0f5c37}

/* 顶部数字组：三格定宽（要求 / 播放 / 佣金），值加粗、标签淡显，整组贴右边 */
.bar-nums{display:flex;align-items:baseline;gap:18px;flex:0 0 auto}
.bar-nums .rq{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.bar-nums .rq-need{width:104px}
.bar-nums .rq-play{width:128px}
.bar-nums .rq-fee{min-width:112px;justify-content:flex-end}
.bar-nums .rq i{font-style:normal;font-size:10.5px;color:var(--txt3)}
.bar-nums .rq b{font-size:12.5px;font-weight:500;color:var(--txt);font-variant-numeric:tabular-nums}
.bar-nums .rq-fee b{font-size:14px;font-weight:700;letter-spacing:-.1px}

/* 归属行：永远一行。超出就省略，不换行——否则不同条的高度会不一样 */
.bar-sub{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-top:9px}
.bar-meta{flex:1 1 320px;min-width:0;font-size:12px;color:var(--txt3);line-height:1.6;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 状态勾选：放在佣金正下方。默认不勾，勾了右边才出现「确认」，避免误点直接改状态 */
.bar-actions{display:flex;align-items:center;gap:14px;flex:0 0 auto;margin-left:auto}
.state-opt{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--txt2);
  cursor:pointer;white-space:nowrap;user-select:none}
.state-opt input{width:13px;height:13px;margin:0;accent-color:var(--brand);cursor:pointer}
.state-opt:hover{color:var(--txt)}
.state-opt.danger span{color:var(--red)}
.state-ok{height:26px;padding:0 12px}
.bar-meta .sep{font-style:normal;color:var(--line2);margin:0 6px}
.bar-meta .bar-kv b{color:var(--txt2);font-weight:500;font-variant-numeric:tabular-nums}

/* Task ID：有就点一下复制，没有就明写「未填」 */
.ref-chip{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:6px;
  border:1px solid var(--line);background:var(--soft2);color:var(--txt2);font-family:var(--mono);
  font-size:11px;line-height:1;cursor:copy}
.ref-chip:hover{border-color:var(--line2);background:var(--panel);color:var(--brand)}
.ref-chip.is-empty{border-style:dashed;color:var(--txt3);background:var(--hover);cursor:default}

.bar-fail{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px;padding:4px 8px;
  border-radius:6px;background:var(--red-d);border:1px solid var(--line-red);font-size:11.5px;color:var(--red)}
.bar-fail i{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.3px}
.bar-fail b{margin-left:auto;font-size:11.5px;white-space:nowrap}
.bar-fail .sub{color:var(--txt3);font-size:10.5px;margin-left:auto}
.bar-fail.muted{background:var(--hover);border-color:var(--line);color:var(--txt3)}
.bar-fail.muted i,.bar-fail.muted b{color:var(--txt3);font-weight:500}

/* 停投提示（已判失败的条由失败行说）：一句话讲清谁停的、要不要我处理 */
.bar-note{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-top:6px;padding:4px 8px;
  border-radius:6px;background:var(--soft);border:1px solid var(--line);font-size:11.5px;color:var(--txt2)}
.bar-note i{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.3px;color:var(--txt3)}

/* 四步等宽：宽度写死，条与条纵向严格对齐；文字超长省略，不挤成两行 */
.bar-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:10px;
  padding-top:9px;border-top:1px solid var(--line-soft)}
/* 剪辑师 / 投流师没有四步进度，底部只留「查看明细」，所以不画分隔线，也不占高度 */
.bar-foot.is-compact{margin-top:4px;padding-top:0;border-top:none;justify-content:flex-end}
/* 整条可点：右下角给一个 chevron + 小字，鼠标移上去变深 */
.bar-more{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:11px;
  color:var(--txt3);white-space:nowrap;user-select:none}
.bar-more .chev{width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .18s,color .15s}
.bar.is-open .bar-more .chev{transform:translateY(1px) rotate(-135deg)}
.bar:hover .bar-more{color:var(--txt2)}
.bar-steps{flex:0 0 auto;display:grid;grid-template-columns:repeat(4,88px);gap:6px;list-style:none;margin:0;padding:0}
.bar-step{display:grid;grid-template-columns:17px minmax(0,1fr);align-items:center;gap:6px;min-width:0}
.bar-step i{font-style:normal;width:17px;height:17px;border-radius:50%;display:grid;
  place-items:center;font-size:9.5px;font-weight:700;background:var(--line-soft);color:var(--txt3)}
.bar-step div{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.bar-step b{font-size:11px;font-weight:500;color:var(--txt3);white-space:nowrap}
.bar-step span{font-size:10px;color:var(--txt3);font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-step.is-active i{background:var(--brand-d);color:var(--brand)}
/* 只有「当前环节」用品牌色，其他环节一律灰字，不抢注意力 */
.bar-step.is-active b,.bar-step.is-active span{color:var(--brand)}
.bar-step.is-done i{background:var(--line-soft);color:var(--txt2)}
.bar-step.is-fail i{background:var(--red-d);color:var(--red)}
.bar-step.is-fail b,.bar-step.is-fail span{color:var(--red)}

.bar-ops{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto}
.bar-ops .seg{flex:0 0 auto}
.bar-ops .seg-b{font-size:11.5px;padding:0 7px;height:28px}
.bar-ops .seg-b:disabled{opacity:.45;cursor:not-allowed}
.bar .rec-sub{margin-top:10px}
.bar .tbl.v4 th{width:auto}
.bar .tbl.v4 th:nth-child(3),.bar .tbl.v4 th:nth-child(4){width:104px}
.bar .tbl.v4 th:nth-child(4){width:120px}
.bar .tbl.v4 td.cap{max-width:300px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .tbl.v4 td.link{max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .tbl.v4 td{padding:8px 10px;font-size:12.5px}
/* 投流师只看两列：标题短一点，链接占剩下的宽度 */
.bar .tbl.v2 td.cap{max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .tbl.v2 td{padding:8px 10px;font-size:12.5px}

/* ---------- v0.17 行动视角：一句人话提示 + 主按钮 ---------- */
.bar-hint{margin-top:6px;font-size:12px;color:var(--txt3);line-height:1.5}
.bar-hint.urgent{color:var(--amber);font-weight:600}
.bar-primary{box-shadow:0 0 0 1px var(--brand)}
.bar-primary.urgent{animation:bar-pulse 2s ease-in-out infinite}
@keyframes bar-pulse{0%,100%{box-shadow:0 0 0 1px var(--brand)}50%{box-shadow:0 0 0 4px var(--brand-d)}}

/* 分段任务注记（C 版）：紫色小行，只在有 stages 数据时出现 */
.bar-stage-note{margin-top:6px;font-size:11.6px;color:var(--purple);background:var(--purple-d);
  border-radius:6px;padding:3px 8px;display:inline-block}