/* 新建任务：单列、分步、只有两样必填。控件、卡片、空态都用 ui.css，这里只管本页布局和特有组件 */
#view-create:not(.hidden) { display: block; }
.cp { width: min(1040px, 100%); }

/* 卡片头里的步骤号 + 标题 */
.cp-sec-t { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.cp-sec-t h2 { margin: 0; }
.cp-no {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--text); color: #fff; font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums;
}
.cp-opt { font-style: normal; font-size: var(--fs-xs); color: var(--muted); }

/* 拖放框 */
.cp-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1); width: 100%;
  border: 1.5px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--sunk); color: var(--muted); text-align: center;
  transition: border-color var(--ease), background var(--ease), color var(--ease);
}
.cp-drop:hover, .cp-drop.drag, .cp-imgs.drag .cp-drop, .cp-file.drag { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.cp-drop-lg { padding: var(--sp-8) var(--sp-4); }
.cp-drop-lg b { font-size: var(--fs-lg); font-weight: 500; color: var(--text); }
.cp-drop-lg span { font-size: var(--fs-xs); }
.cp-drop-sm { width: 92px; height: 92px; padding: 0; gap: var(--sp-1); font-size: var(--fs-xs); }

/* 选好的视频 */
.cp-file { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2); border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.cp-file + .cp-file { margin-top: var(--sp-2); }
.cp-file + .cp-drop { margin-top: var(--sp-2); }
.cp-file.bad { border-color: var(--fail); }
.cp-file.bad .cp-file-m span { color: var(--fail); }
.cp-file video { width: 54px; height: 96px; object-fit: cover; border-radius: var(--radius); background: var(--monitor); flex-shrink: 0; }
.cp-file-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.cp-file-m b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-file-m span { font-size: var(--fs-xs); color: var(--muted); }

/* 产品图 */
.cp .field + .field { margin-top: var(--sp-3); }
.cp-imgs { display: flex; flex-wrap: wrap; gap: var(--sp-2); border-radius: var(--radius-lg); }
.cp-thumb { position: relative; width: 92px; height: 92px; border-radius: var(--radius); overflow: hidden; background: #fff; border: 1px solid var(--line); }
.cp-thumb img { width: 100%; height: 100%; object-fit: contain; }
.cp-x {
  position: absolute; top: var(--sp-1); right: var(--sp-1); width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .6); color: #fff; font-size: var(--fs-md); line-height: 20px; text-align: center; opacity: 0; transition: opacity var(--ease);
}
.cp-thumb:hover .cp-x, .cp-x:focus-visible { opacity: 1; }
#view-create .hint.bad { color: var(--fail); }
#view-create .hint a { color: var(--accent); }
.cp-row { display: flex; gap: var(--sp-3); }
.cp-row .field { flex: 1; }
.cp input::placeholder, .cp textarea::placeholder { color: var(--faint); }
.cp textarea { resize: vertical; }

/* 模型设置（默认收起） */
.cp-more summary { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-4); cursor: pointer; list-style: none; }
.cp-more summary h2 { margin: 0; font-size: var(--fs-lg); font-weight: 600; }
.cp-more summary::-webkit-details-marker, .cp-extra summary::-webkit-details-marker { display: none; }
.cp-more summary em { margin-left: auto; font-style: normal; font-size: var(--fs-xs); color: var(--muted); }
.cp-more summary::after { content: ""; width: 7px; height: 7px; margin-left: var(--sp-2); border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform var(--ease); }
.cp-more[open] summary::after { transform: rotate(-135deg); }
.cp-more .card-body { border-top: 1px solid var(--line); }
.cp-slots { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

/* 底栏 */
.cp-foot {
  /* main 底部有 16px 内边距，sticky 会停在它上面、下面露缝透出内容；往下伸 16px 盖住 */
  position: sticky; bottom: -16px; display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3);
  padding: var(--sp-3) 0 var(--sp-8); margin-bottom: -16px; background: var(--bg); border-top: 1px solid var(--line); z-index: 2;
}
.cp-foot #cp-need { font-size: var(--fs-sm); color: var(--muted); }
.cp-foot #cp-need .ok { color: var(--ok); display: inline-flex; align-items: center; gap: var(--sp-1); }
.cp-foot .btn-primary { min-width: 140px; }

@media (max-width: 640px) {
  .cp-row { flex-direction: column; gap: var(--sp-3); }
  .cp-slots { grid-template-columns: 1fr; }
}

/* 原子视频：出镜人物和场景 */
.cp-orig { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: var(--fs-xs); color: var(--muted); }
.cp-scene-row { display: flex; align-items: flex-start; gap: var(--sp-2); margin-top: var(--sp-3); }
.cp-scene-lb { flex: none; font-size: var(--fs-sm); color: var(--muted); padding-top: var(--sp-1); }
.cp-scene-row .cp-lib { flex: 1; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.cp-scene-row .cp-pcard { min-height: 0; padding: var(--sp-2) var(--sp-3); aspect-ratio: auto; }
.cp-scene { margin-top: var(--sp-2); }

/* 货库 */
.cp-lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2); }
.cp-pcard {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-1); padding: var(--sp-2); text-align: left;
  border: 1.5px solid var(--line); border-radius: var(--radius-lg); background: #fff;
}
.cp-pcard:hover:not(:disabled) { border-color: var(--line-strong); }
.cp-pcard.on, .cp-pcard.on:hover:not(:disabled) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cp-pimg { height: 110px; border-radius: var(--radius); background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #999; }
.cp-pimg img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cp-pname { font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-ptag { font-size: var(--fs-xs); color: var(--muted); }
.cp-pick { position: absolute; top: var(--sp-3); right: var(--sp-3); width: 22px; height: 22px; border-radius: 50%; background: var(--text); color: #fff; display: flex; align-items: center; justify-content: center; }

/* 货卡：不能用的灰显；就地新建货的小表单 */
.cp-pcard.off, .cp-pcard:disabled { opacity: .55; cursor: not-allowed; }
.cp-pcard.off:hover { border-color: var(--line); }
.cp-pnew { border-style: dashed; }
.cp-np { margin-top: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); }
.cp-np-foot { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }
.cp-np-card { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-3); }
.cp-np-card .field:last-child { grid-column: 1 / -1; }

/* 选货：一行一个货，左边小图、右边货名和状态；选中的右边打勾 */
.cp-lib.prod { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-2); }
.cp-lib.prod .cp-pcard { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--sp-3); row-gap: 2px; align-items: center; padding: var(--sp-2) var(--sp-10) var(--sp-2) var(--sp-2); border-width: 1px; }
.cp-lib.prod .cp-pimg { grid-row: 1 / 3; width: 56px; height: 56px; border: 1px solid var(--line); border-radius: var(--radius); }
.cp-lib.prod .cp-pname { align-self: end; font-size: var(--fs-md); font-weight: 600; }
.cp-lib.prod .cp-ptag { align-self: start; justify-self: start; grid-column: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-lib.prod .cp-pick { top: 50%; right: var(--sp-3); transform: translateY(-50%); }
.cp-lib.prod .cp-pnew .cp-pimg { background: var(--sunk); border-style: dashed; color: var(--muted); }