/* ============================================================
   各屏布局
   ============================================================ */

/* ---------- 1. 工作台 ---------- */

.dash { display: grid; gap: var(--sp-8); }

.todo-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.todo-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
@media (hover: hover) { .todo-card:hover { border-color: var(--brand-line); box-shadow: var(--shadow-sm); } }

.todo-card__thumb { width: 64px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); }
.todo-card__body { display: grid; gap: var(--sp-2); align-content: start; min-width: 0; }
.todo-card__gate { display: flex; align-items: center; gap: 5px; font-size: var(--fs-2xs); font-weight: 700; color: var(--warning); --od-icon-size: 13px; }
.todo-card__title { font-size: var(--fs-h3); font-weight: 650; line-height: 1.35; }
.todo-card__why { font-size: var(--fs-xs); color: var(--muted); }
.todo-card__foot { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); }
.todo-card__foot .spacer { flex: 1 1 auto; }

/* 进行中 */
.running-list { display: grid; }
.running-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 220px auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.running-row:last-child { border-bottom: 0; }
.running-row__thumb { width: 44px; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); }
.running-row__title { font-size: var(--fs-body); font-weight: 580; }
.running-row__step { font-size: var(--fs-xs); color: var(--muted); margin-top: 1px; }
.running-row__progress { display: grid; gap: 5px; }
.running-row__pct { font-size: var(--fs-2xs); color: var(--muted); font-family: var(--font-mono); }

/* 用量 */
.usage-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.usage-card { padding: var(--sp-4) var(--sp-5); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-xl); }
.usage-card__label { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--muted); --od-icon-size: 14px; }
.usage-card__value { display: block; font-size: var(--fs-display); font-weight: 680; letter-spacing: -.02em; line-height: 1.2; margin-top: 6px; font-variant-numeric: tabular-nums; }
.usage-card__unit { font-size: var(--fs-sm); font-weight: 560; color: var(--muted); margin-left: 3px; }
.usage-card__cap { display: block; font-size: var(--fs-2xs); color: var(--subtle); margin-top: var(--sp-2); }
.usage-card__bar { margin-top: 6px; }

/* ---------- 2. 项目列表 ---------- */

.proj-toolbar { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }

.proj-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 110px 190px 150px auto;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-3) var(--sp-5);
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
@media (hover: hover) { .proj-row:hover { background: var(--fill-soft); } }
.proj-row:last-of-type { border-bottom: 0; }
.proj-row__thumb { width: 56px; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); }
.proj-row__title { font-size: var(--fs-body); font-weight: 580; }
.proj-row__topic { font-size: var(--fs-xs); color: var(--muted); margin-top: 1px; }
.proj-row__stage { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); }
.proj-head {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 110px 190px 150px auto;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--line);
  background: var(--fill-soft);
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--subtle);
  letter-spacing: .03em;
}

@media (max-width: 1100px) {
  .proj-row, .proj-head { grid-template-columns: 56px minmax(0, 1fr) 190px auto; }
  .proj-row__track-col, .proj-head__track-col, .proj-row__time-col, .proj-head__time-col { display: none; }
}

/* ---------- 3. 项目工作区外壳 ---------- */

.ws { display: grid; grid-template-rows: auto auto minmax(0, 1fr); height: 100%; min-height: 0; }

.ws__head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--page-pad) var(--sp-4);
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.ws__head-text { flex: 1 1 auto; min-width: 0; }
.ws__title { font-size: var(--fs-h1); font-weight: 680; letter-spacing: -.015em; line-height: 1.3; }
.ws__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: 5px; font-size: var(--fs-xs); color: var(--muted); }
.ws__head-actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; position: relative; }

/* 步骤条 */
.stepper {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: var(--sp-3) var(--page-pad);
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.stepper::-webkit-scrollbar { display: none; }

.step {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 1 1 0;
  min-width: 150px;
  padding: 8px var(--sp-3);
  border: 0;
  border-radius: var(--r-lg);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.step:disabled { cursor: not-allowed; }
@media (hover: hover) { .step:not(:disabled):hover { background: var(--fill-hover); } }

.step__mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: var(--panel);
  color: var(--subtle);
  font-size: var(--fs-xs);
  font-weight: 700;
  --od-icon-size: 15px;
}
.step__text { display: grid; gap: 1px; min-width: 0; }
.step__name { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.step__state { font-size: var(--fs-2xs); color: var(--subtle); }
.step__link { flex: none; width: 16px; height: 1.5px; background: var(--line); align-self: center; }

.step[data-status="done"] .step__mark { border-color: var(--success); background: var(--success); color: #fff; }
.step[data-status="done"] .step__name { color: var(--ink-70); }
.step[data-status="current"] { background: var(--brand-soft); }
.step[data-status="current"] .step__mark { border-color: var(--brand); background: var(--brand); color: #fff; }
.step[data-status="current"] .step__name { color: var(--brand-strong); font-weight: 680; }
.step[data-status="current"] .step__state { color: var(--brand-strong); }
.step[data-status="running"] .step__mark { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.step[data-status="failed"] .step__mark { border-color: var(--danger); background: var(--danger); color: #fff; }
.step[data-status="failed"] .step__name { color: var(--danger); }
.step[data-status="failed"] .step__state { color: var(--danger); font-weight: 600; }
.step[data-status="review"] .step__mark { border-color: var(--warning); background: var(--warning); color: #fff; }
.step[data-status="review"] .step__name { color: #a86c13; }
.step[data-status="review"] .step__state { color: #a86c13; font-weight: 600; }
.step[data-status="locked"] .step__mark { border-style: dashed; }

/* 闸门标识：比普通阶段更显眼 */
.step--gate { border: 1.5px solid var(--line-strong); background: var(--fill-soft); }
.step--gate[data-status="current"] { border-color: var(--brand); }
.step--gate[data-status="review"] { border-color: var(--warning); background: var(--warning-soft); }
.step--gate[data-status="done"] { border-color: #c4ead9; background: var(--success-soft); }
.step--gate[data-status="failed"] { border-color: var(--danger); background: var(--danger-soft); }
.step__gate-tag {
  position: absolute;
  top: -8px;
  left: var(--sp-3);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 16px;
  padding: 0 6px;
  border-radius: var(--r-full);
  background: var(--ink);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  --od-icon-size: 10px;
}
.step--gate[data-status="review"] .step__gate-tag { background: var(--warning); }
.step--gate[data-status="current"] .step__gate-tag { background: var(--brand); }

.ws__stage { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }

.readonly-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px var(--page-pad);
  background: var(--fill-hover);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--ink-70);
  --od-icon-size: 15px;
}
.readonly-bar .spacer { flex: 1 1 auto; }

/* 退回确认弹窗里的作废清单 */
.wipe-list { display: grid; gap: 6px; margin-top: var(--sp-3); }
.wipe-item { display: flex; align-items: center; gap: var(--sp-2); padding: 7px var(--sp-3); border-radius: var(--r-md); background: var(--danger-soft); color: #8f3230; font-size: var(--fs-sm); --od-icon-size: 14px; }
.wipe-item__name { flex: 1 1 auto; min-width: 0; }
.wipe-item__note { font-size: var(--fs-2xs); color: #b8403d; }

/* ---------- 4. 闸 1 立项与脚本 ---------- */

.gate1 { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; min-height: 0; }
.gate1__cols {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr) 300px;
  gap: 0;
  min-height: 0;
  overflow: hidden;
}
.gate1__col { padding: var(--sp-5); overflow-y: auto; min-height: 0; }
.gate1__col--left { border-right: 1px solid var(--line); background: var(--panel); }
.gate1__col--right { border-left: 1px solid var(--line); background: var(--panel); }
.gate1__col--main { background: var(--canvas); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--sp-3); overflow: hidden; padding-bottom: var(--sp-5); }

.brief-list { display: grid; gap: var(--sp-4); }
.brief-item { display: grid; gap: 3px; }
.brief-item__label { font-size: var(--fs-2xs); font-weight: 700; color: var(--subtle); letter-spacing: .03em; }
.brief-item__value { font-size: var(--fs-sm); color: var(--ink); line-height: 1.5; }
.brief-form { display: grid; gap: var(--sp-4); }
.brief-form .field__label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.brief-skel { display: grid; gap: var(--sp-5); margin-top: 2px; }
.brief-skel__row { display: grid; gap: 8px; }

.script-toolbar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.script-toolbar .spacer { flex: 1 1 auto; }

/* 脚本来源三选一 */
.gate1__top { display: grid; gap: var(--sp-3); min-width: 0; }
.script-source { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.script-source .spacer { flex: 1 1 auto; }
.script-source .tabs__btn { display: inline-flex; align-items: center; gap: 5px; --od-icon-size: 14px; }
.script-source__hint { font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; max-width: 62ch; }

/* 粘贴文章 → 改写成口播稿 */
.paste-box { display: grid; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--panel); }
.paste-box__input { font-size: var(--fs-sm); line-height: 1.7; max-height: 160px; }
.paste-box__foot { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.paste-cmp { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; --od-icon-size: 14px; }
.paste-cmp__item { display: flex; align-items: baseline; gap: 5px; }
.paste-cmp__k { font-size: var(--fs-2xs); color: var(--subtle); font-weight: 700; }
.paste-cmp__v { font-size: var(--fs-sm); font-weight: 650; color: var(--ink-70); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.paste-cmp__item[data-done="true"] .paste-cmp__v { color: var(--brand-strong); }
.paste-cmp__arrow { display: grid; color: var(--subtle); }

/* 两个写法说明 */
.script-syntax { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--fs-2xs); color: var(--subtle); --od-icon-size: 13px; }
.script-syntax__item { display: inline-flex; align-items: center; gap: 5px; }
.script-syntax code { padding: 1px 5px; border-radius: var(--r-sm); background: var(--fill-hover); font-family: var(--font-mono); font-size: 11px; color: var(--ink-70); }

/* 正文与批注侧栏：有批注时两列，无批注时编辑器全宽 */
.script-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  gap: var(--sp-3);
  overflow: hidden;
}
.script-stage.has-anns {
  grid-template-columns: minmax(0, 1fr) 240px;
}

/* 编辑器：左侧场景序号 + 一层镜像给【画面】上标签 */
.script-wrap {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  min-height: 300px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  background: var(--panel);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.script-wrap:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

.script-gutter { position: relative; overflow: hidden; background: var(--fill-soft); border-right: 1px solid var(--line); }
.script-gutter__inner { position: absolute; inset: 0; }
.script-gutter__no {
  position: absolute;
  right: 7px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 5px;
  border-radius: var(--r-sm);
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}
.script-gutter__no[data-flash="true"] { background: var(--brand); color: #fff; }

.script-main { position: relative; min-width: 0; }
.script-mirror,
.script-editor {
  padding: var(--sp-4) var(--sp-5);
  font-size: 15px;
  line-height: 2;
  letter-spacing: 0;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
}
.script-mirror { position: absolute; inset: 0; overflow: hidden; pointer-events: none; color: transparent; }
.script-line { min-height: 30px; }
.script-line[data-flash="true"] { background: var(--brand-soft); border-radius: var(--r-sm); }
.script-cue { border-radius: var(--r-sm); background: #e8ecf7; box-shadow: 0 0 0 1px #d2daee inset; }

/* 批注高亮：浅色下划线式底色，当前批注用品牌紫 */
.script-ann {
  border-radius: 2px;
  background: linear-gradient(transparent 68%, rgba(91, 92, 226, 0.22) 68%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.script-ann--pending { background: linear-gradient(transparent 68%, rgba(91, 92, 226, 0.28) 68%); }
.script-ann--generating { background: linear-gradient(transparent 68%, rgba(230, 155, 45, 0.35) 68%); }
.script-ann--ready { background: linear-gradient(transparent 68%, rgba(25, 169, 116, 0.3) 68%); }
.script-ann--stale { background: linear-gradient(transparent 68%, rgba(223, 91, 87, 0.32) 68%); }
.script-ann.is-active {
  background: var(--brand-soft);
  box-shadow: 0 0 0 1px rgba(91, 92, 226, 0.35) inset;
}
.script-line--ann { border-radius: var(--r-sm); }

.script-editor {
  position: relative;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  resize: none;
  scrollbar-width: none;
}
.script-editor::-webkit-scrollbar { width: 0; height: 0; }
.script-editor:focus { outline: none; }

/* 划选工具条：贴在选区旁，不占文档流 */
.script-selbar {
  position: absolute;
  z-index: 5;
  display: flex;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(23, 32, 51, 0.12);
}
.script-selbar .btn { --od-icon-size: 14px; }

/* 批注详情 pop：锚定在选中/高亮文字附近 */
.script-ann-pop {
  position: absolute;
  z-index: 6;
  width: min(340px, calc(100% - 24px));
  max-height: min(420px, calc(100% - 16px));
  overflow-x: hidden;
  overflow-y: auto;
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--panel);
  box-shadow: 0 12px 32px rgba(23, 32, 51, 0.16);
}
.script-ann-pop[hidden] { display: none !important; }

/* 批注侧栏：只列条目，详情走正文旁的 pop */
.script-ann-rail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--panel);
  overflow: hidden;
}
.script-ann-rail__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-xs);
  font-weight: 650;
  color: var(--ink-70);
  --od-icon-size: 14px;
}
.script-ann-rail__hint {
  font-weight: 500;
  color: var(--subtle);
}
.script-ann-rail__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  gap: 4px;
  padding: 8px;
  align-content: start;
}
.script-ann-item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  width: 100%;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .script-ann-item:hover { background: var(--canvas); border-color: var(--line); }
}
.script-ann-item.is-active {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.script-ann-item__idx {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-sm);
  background: var(--canvas);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--muted);
}
.script-ann-item.is-active .script-ann-item__idx {
  background: var(--brand);
  color: #fff;
}
.script-ann-item__body {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.script-ann-item__body .badge { --od-icon-size: 12px; justify-self: start; }
.script-ann-item__text {
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.script-ann-panel__head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.script-ann-panel__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: 680;
  color: var(--ink);
  --od-icon-size: 15px;
}
.script-ann-panel__quote {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--brand-soft);
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--ink-70);
}
.script-ann-panel__gen { display: grid; gap: 6px; }
.script-ann-panel__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.script-ann-diff {
  display: grid;
  gap: 8px;
}
.script-ann-diff__col {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--canvas);
}
.script-ann-diff__col--new {
  border-color: #c6e8d8;
  background: var(--success-soft);
}
.script-ann-diff__lab {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--subtle);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}
.script-ann-diff__body {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--ink);
}

.script-stats { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.script-stat { display: flex; align-items: baseline; gap: 5px; font-size: var(--fs-xs); color: var(--muted); }
.script-stat__value { font-size: var(--fs-h3); font-weight: 680; color: var(--ink); font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.script-stat__value[data-over="true"] { color: var(--danger); }
.script-stats .spacer { flex: 1 1 auto; }

.gate1__foot {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--page-pad);
  background: var(--panel);
  border-top: 1px solid var(--line);
}
.gate1__foot .spacer { flex: 1 1 auto; }
.block-reason { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--warning); font-weight: 560; --od-icon-size: 14px; }
.block-reason--ok { color: var(--success); }

/* 音色卡片 */
.voice-list { display: grid; gap: var(--sp-2); }
.voice-card {
  position: relative;
  display: grid;
  gap: 6px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--panel);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
@media (hover: hover) { .voice-card:hover { border-color: var(--brand-line); } }
.voice-card[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); }
.voice-card__top { display: flex; align-items: center; gap: var(--sp-2); }
.voice-card__name { font-size: var(--fs-sm); font-weight: 620; flex: 1 1 auto; min-width: 0; }
.voice-card__desc { font-size: var(--fs-2xs); color: var(--muted); }
.voice-card__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.voice-tag { padding: 1px 6px; border-radius: var(--r-full); background: var(--fill-hover); color: var(--muted); font-size: 10px; font-weight: 600; }
.voice-card[aria-pressed="true"] .voice-tag { background: #e3e4fb; color: var(--brand-strong); }
.voice-card__check { --od-icon-size: 16px; color: var(--brand); }
.try-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  background: var(--panel);
  color: var(--ink-70);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  --od-icon-size: 12px;
}
@media (hover: hover) { .try-btn:hover { border-color: var(--brand); color: var(--brand-strong); } }
.try-btn[data-playing="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---------- 5. 声音 ---------- */

.voice-stage { display: grid; place-items: start center; padding: var(--sp-8) var(--page-pad); overflow-y: auto; height: 100%; min-height: 0; }
.voice-stage__inner { width: min(760px, 100%); display: grid; gap: var(--sp-5); }

.two-step { display: grid; gap: var(--sp-3); }
.vstep {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--panel);
}
.vstep[data-status="running"] { border-color: var(--brand-line); background: var(--brand-soft); }
.vstep[data-status="failed"] { border-color: #f5cfcd; background: var(--danger-soft); }
.vstep__mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line-strong); color: var(--subtle); font-size: var(--fs-xs); font-weight: 700; --od-icon-size: 15px; }
.vstep[data-status="done"] .vstep__mark { background: var(--success); border-color: var(--success); color: #fff; }
.vstep[data-status="running"] .vstep__mark { background: var(--brand); border-color: var(--brand); color: #fff; }
.vstep[data-status="failed"] .vstep__mark { background: var(--danger); border-color: var(--danger); color: #fff; }
.vstep__body { display: grid; gap: 5px; min-width: 0; }
.vstep__name { font-size: var(--fs-body); font-weight: 600; }
.vstep__note { font-size: var(--fs-xs); color: var(--muted); }
.vstep__pct { font-size: var(--fs-sm); font-family: var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums; }

/* 音频播放器 */
.audio-player { display: grid; gap: var(--sp-3); padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--panel); }
.audio-player__row { display: flex; align-items: center; gap: var(--sp-4); }
.playbtn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  --od-icon-size: 19px;
  transition: background var(--dur-fast) var(--ease-out);
}
@media (hover: hover) { .playbtn:hover { background: var(--brand-strong); } }
.playbtn--sm { width: 34px; height: 34px; --od-icon-size: 15px; }
.playbtn--ghost { background: var(--fill-hover); color: var(--ink); }
@media (hover: hover) { .playbtn--ghost:hover { background: var(--line); color: var(--ink); } }

.wave { flex: 1 1 auto; display: flex; align-items: center; gap: 2px; height: 36px; min-width: 0; }
.wave__bar { flex: 1 1 auto; border-radius: 1px; background: var(--line-strong); min-width: 2px; }
.wave__bar[data-on="true"] { background: var(--brand); }

.cap-list { display: grid; max-height: 360px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--panel); }
.cap-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--sp-3);
  padding: 8px var(--sp-4) 8px var(--sp-5);
  border-bottom: 1px solid var(--line);
  transition: background var(--dur-fast) var(--ease-out);
}
.cap-row:last-child { border-bottom: 0; }
.cap-row__main {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--sp-4);
  width: 100%;
  padding: 2px 0;
  border: 0;
  background: transparent;
  text-align: left;
  min-width: 0;
}
button.cap-row__main { cursor: pointer; }
@media (hover: hover) { .cap-row:has(button.cap-row__main):hover { background: var(--fill-soft); } }
.cap-row[data-current="true"] { background: var(--brand-soft); }
.cap-row[data-state="dirty"] { background: var(--warning-soft); }
.cap-row__time { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 2px; }
.cap-row[data-current="true"] .cap-row__time { color: var(--brand-strong); font-weight: 700; }
.cap-row__text { font-size: var(--fs-sm); line-height: 1.6; }
.cap-row__acts { display: flex; align-items: center; gap: 6px; padding-top: 3px; flex: none; }
.cap-row__state { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-2xs); color: var(--muted); white-space: nowrap; --od-icon-size: 13px; }
.cap-row[data-state="done"] .cap-row__state { color: #159e6c; }
.cap-row[data-state="running"] .cap-row__state { color: var(--brand-strong); font-weight: 600; }
.cap-row[data-state="failed"] .cap-row__state { color: var(--danger); font-weight: 600; }
.cap-row[data-state="queued"] .cap-row__state { color: var(--subtle); }

/* ---------- 6. 闸 2 风格与分镜 ---------- */

/* 用 flex 而不是固定 4 行 grid：顶部提示区 display:none 时不会把「三栏/底栏」错位到错误行，避免底栏被压扁裁切 */
.gate2 {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
}
.gate2 > .theme-bar,
.gate2 > .gate2__notices,
.gate2 > .gate2__foot {
  flex: none;
}
.gate2 > .gate2__cols {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

.gate2__notices:empty,
.gate2__notices:not(:has(> :not([hidden]))) { display: none; }
.gate2__notice,
.fix-guide-host {
  padding: 0 var(--page-pad) var(--sp-3);
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.gate2__notice:not([hidden]) + .fix-guide-host:not([hidden]) {
  padding-top: 0;
  border-top: none;
}
.fix-guide {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.fix-guide__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.fix-guide__chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--r-md);
  background: rgba(23, 32, 51, 0.06);
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--ink-70);
  font-variant-numeric: tabular-nums;
}
.fix-guide__chip--target { background: var(--brand-soft); color: var(--brand-strong); }
.fix-guide__hint {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-2xs);
  color: var(--muted);
  line-height: 1.5;
}
.fix-guide__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  flex: none;
  margin-left: auto;
  align-self: center;
}

.theme-bar { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--page-pad); background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.theme-bar__label { display: grid; gap: 0; }
.theme-bar__title { font-size: var(--fs-sm); font-weight: 650; }
.theme-bar__hint { font-size: var(--fs-2xs); color: var(--subtle); }
.theme-bar .spacer { flex: 1 1 auto; }

.theme-cards { display: flex; gap: var(--sp-3); }
.theme-card {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-3);
  padding: 7px 10px 7px 7px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--panel);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
@media (hover: hover) { .theme-card:hover { border-color: var(--brand-line); } }
.theme-card[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); }
.theme-card__preview { width: 42px; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); }
.theme-card__name { font-size: var(--fs-sm); font-weight: 620; }
.theme-card__desc { font-size: var(--fs-2xs); color: var(--muted); }

.gate2__cols {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr) 328px;
  min-height: 0;
  overflow: hidden;
}

/* 左：场景列表 */
.scenecol { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; background: var(--panel); border-right: 1px solid var(--line); }
.scenecol__head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); }
.scenecol__title { font-size: var(--fs-sm); font-weight: 650; flex: 1 1 auto; }
.scenecol__list { overflow-y: auto; min-height: 0; padding: var(--sp-2); }
.scenecol__foot { padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--line); background: var(--fill-soft); }

.scene-item {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--sp-2);
  width: 100%;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.scene-item + .scene-item { margin-top: 2px; }
@media (hover: hover) { .scene-item:hover { background: var(--fill-hover); } }
.scene-item[aria-current="true"] { background: var(--brand-soft); border-color: var(--brand-line); }
.scene-item[data-playing="true"]:not([aria-current="true"]) { background: var(--fill-hover); }
.scene-item[data-fix="true"] { border-color: #f3dcb4; background: var(--warning-soft); }
.scene-item[data-fix="true"][aria-current="true"] { border-color: var(--brand); background: var(--brand-soft); }
.scene-item__no { font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 700; color: var(--subtle); padding-top: 2px; text-align: right; }
.scene-item[aria-current="true"] .scene-item__no { color: var(--brand-strong); }
.scene-item__body { display: grid; gap: 2px; min-width: 0; }
.scene-item__meta { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--subtle); font-family: var(--font-mono); }
.scene-item__tpl { font-family: var(--font-sans); font-weight: 700; letter-spacing: .02em; }
.scene-item__text { font-size: var(--fs-xs); color: var(--ink-70); line-height: 1.45; }
.scene-item[aria-current="true"] .scene-item__text { color: var(--ink); font-weight: 560; }
.scene-item__flags { display: grid; gap: 3px; justify-items: end; padding-top: 3px; }
.rdot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.rdot--done { background: var(--success); }
.rdot--todo { background: var(--line-strong); }
.rdot--error { background: var(--danger); }
.scene-item__err { color: var(--danger); --od-icon-size: 13px; display: grid; }
.scene-item__warn { color: #a86c13; --od-icon-size: 13px; display: grid; }

.sceneops { display: flex; gap: 3px; }
.opbtn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 26px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  --od-icon-size: 14px;
}
@media (hover: hover) { .opbtn:hover { background: var(--fill-hover); color: var(--ink); } }
.opbtn:disabled { color: #c3c9d4; cursor: not-allowed; background: var(--fill-soft); }
.opbtn--danger { color: var(--danger); }
@media (hover: hover) { .opbtn--danger:hover { background: var(--danger-soft); color: #b8403d; } }

/* 中：播放器 */
.playercol { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; background: var(--canvas); overflow: hidden; }
.playercol__toolbar { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); background: var(--panel); flex-wrap: wrap; }
.playercol__toolbar .spacer { flex: 1 1 auto; }
.save-state { display: flex; align-items: center; gap: 5px; font-size: var(--fs-2xs); color: var(--subtle); --od-icon-size: 13px; }
.save-state[data-saving="true"] { color: var(--brand-strong); }

/* 平台安全区开关 */
.safe-ctl { display: flex; align-items: center; gap: var(--sp-2); }
.safe-note {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px var(--sp-4);
  border-top: 1px solid var(--line);
  background: var(--fill-soft);
  font-size: var(--fs-2xs);
  color: var(--subtle);
  line-height: 1.5;
}
.safe-note[data-tone="warning"] { background: var(--warning-soft); color: #8d5c11; }

.playercol__stage { display: grid; place-items: center; min-height: 0; padding: var(--sp-4); overflow: hidden; }

.vplayer { display: grid; gap: var(--sp-3); height: 100%; min-height: 0; justify-items: center; grid-template-rows: minmax(0, 1fr) auto; }
.vframe {
  position: relative;
  height: 100%;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: #0b1220;
  box-shadow: var(--shadow-md);
}
.scene-canvas {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1080px;
  height: 1920px;
  transform-origin: 0 0;
  background: var(--sc-bg);
  color: var(--sc-ink);
  overflow: hidden;
}
.vframe__caption {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 5.5%;
  z-index: 2;
  text-align: center;
  font-size: clamp(11px, 1.15cqw, 15px);
  line-height: 1.45;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .75), 0 0 2px rgba(0, 0, 0, .9);
  font-weight: 650;
  pointer-events: none;
}
.vframe { container-type: inline-size; }
.vframe__caption-inner { display: inline-block; padding: 2px 8px; border-radius: var(--r-sm); background: rgba(10, 15, 25, .42); }
.vframe__caption[data-unsafe="true"] .vframe__caption-inner { background: rgba(176, 68, 30, .72); box-shadow: 0 0 0 1px #ffd9a8; }

.vcontrols { display: grid; gap: 7px; width: 100%; max-width: 420px; }
.vcontrols__row { display: flex; align-items: center; gap: var(--sp-3); }
.vtrack { position: relative; flex: 1 1 auto; height: 22px; display: flex; align-items: center; cursor: pointer; min-width: 0; }
.vtrack__rail { position: absolute; left: 0; right: 0; height: 6px; border-radius: var(--r-full); background: var(--line-strong); overflow: hidden; }
.vtrack__seg { position: absolute; top: 0; bottom: 0; border-right: 1.5px solid var(--panel); }
.vtrack__seg[data-current="true"] { background: rgba(91, 92, 226, .18); }
.vtrack__fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--brand); border-radius: var(--r-full); }
.vtrack__knob { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--panel); border: 2px solid var(--brand); transform: translateX(-50%); box-shadow: var(--shadow-sm); }
.vtime { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }

/* 右：字段表单 */
.formcol { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; background: var(--panel); border-left: 1px solid var(--line); }
.formcol__head { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); display: grid; gap: var(--sp-2); }
.formcol__title-row { display: flex; align-items: center; gap: var(--sp-2); }
.formcol__title { font-size: var(--fs-sm); font-weight: 650; flex: 1 1 auto; min-width: 0; }
.formcol__body { overflow-y: auto; min-height: 0; padding: var(--sp-4); display: grid; gap: var(--sp-4); align-content: start; }

.ffield { display: grid; gap: 5px; }
.ffield--pulse {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--r-md);
  animation: fieldpulse 1.1s var(--ease-out);
}
@keyframes fieldpulse {
  0% { outline-color: var(--brand); background: var(--brand-soft); }
  100% { outline-color: transparent; background: transparent; }
}

/* 本场景旁白 */
.vo-box { display: grid; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--brand-line); border-radius: var(--r-lg); background: var(--brand-soft); }
.vo-box__head { display: flex; align-items: center; gap: var(--sp-2); }
.vo-box__title { display: flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 700; color: var(--brand-strong); --od-icon-size: 14px; }
.vo-box__count { margin-left: auto; font-size: var(--fs-2xs); color: var(--muted); font-family: var(--font-mono); }
.vo-box__foot { font-size: var(--fs-2xs); color: var(--muted); line-height: 1.55; }
.vo-row { display: grid; gap: 4px; }
.vo-row__top { display: flex; align-items: center; gap: var(--sp-2); }
.vo-row__time { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.vo-row__flag { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; padding: 1px 7px; border-radius: var(--r-full); background: var(--warning-soft); color: #8d5c11; font-size: var(--fs-2xs); font-weight: 650; --od-icon-size: 11px; }
.vo-row__text { font-size: var(--fs-sm); line-height: 1.6; resize: none; min-height: 54px; }
.vo-row__ai .input-ai__field { font-size: var(--fs-sm); line-height: 1.6; min-height: 54px; resize: none; }
.list-rows { display: grid; gap: 6px; }
.list-row { display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 5px; align-items: start; }
.dp-row { display: grid; grid-template-columns: minmax(0, 1fr) 84px 28px; gap: 5px; align-items: start; }
.rowdel {
  display: grid;
  place-items: center;
  width: 28px;
  height: 31px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel);
  color: var(--subtle);
  cursor: pointer;
  --od-icon-size: 13px;
}
@media (hover: hover) { .rowdel:hover { background: var(--danger-soft); color: #b8403d; border-color: #f5cfcd; } }
.rowdel:disabled { color: #ccd2dc; cursor: not-allowed; }

.accent-note { display: flex; align-items: center; gap: 5px; font-size: var(--fs-2xs); color: var(--subtle); --od-icon-size: 12px; }

.gate2__foot {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--page-pad);
  background: var(--panel);
  border-top: 1px solid var(--line);
  min-width: 0;
  flex-wrap: wrap;
  row-gap: var(--sp-2);
}
.gate2__foot .block-reason {
  flex: 1 1 200px;
  min-width: 0;
  align-items: flex-start;
}
.gate2__foot .block-reason > span {
  min-width: 0;
  flex: 1 1 auto;
  line-height: 1.45;
}
.gate2__foot .spacer {
  flex: 1 1 8px;
  min-width: 0;
}
.gate2__foot .btn {
  flex: 0 0 auto;
}

/* 骨架屏 */
.sb-skel-list { display: grid; gap: var(--sp-2); padding: var(--sp-2); }
.sb-skel-item { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--sp-2); padding: 8px; }
.sb-skel-lines { display: grid; gap: 5px; }

@media (max-width: 1240px) {
  .gate2__cols { grid-template-columns: 220px minmax(0, 1fr) 290px; }
}
@media (max-width: 1000px) {
  .gate2__cols { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; overflow-y: auto; }
  .scenecol, .formcol { border: 0; border-bottom: 1px solid var(--line); }
  .scenecol__list { max-height: 240px; }
  .playercol__stage { min-height: 460px; }
  .gate1__cols { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  .gate1__col--left, .gate1__col--right { border: 0; border-bottom: 1px solid var(--line); }
  .gate1__col--main { overflow: visible; }
  .script-stage.has-anns { grid-template-columns: minmax(0, 1fr); }
  .script-ann-rail { max-height: 380px; }
  .script-wrap { min-height: 320px; }
  .brand-cols { grid-template-columns: minmax(0, 1fr); }
  .cover-card__body { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 7. 闸 3 成片 ---------- */

.gate3 { height: 100%; overflow-y: auto; min-height: 0; }
.gate3__inner { max-width: 1100px; margin: 0 auto; padding: var(--sp-6) var(--page-pad); display: grid; gap: var(--sp-5); }

.render-grid { display: grid; gap: 7px; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.rcell {
  display: grid;
  gap: 5px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
}
.rcell__top { display: flex; align-items: center; gap: 5px; }
.rcell__no { font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 700; color: var(--subtle); flex: 1 1 auto; }
.rcell__icon { --od-icon-size: 14px; display: grid; }
.rcell__tpl { font-size: var(--fs-2xs); color: var(--muted); }
.rcell__state { font-size: 10px; font-weight: 700; }
.rcell[data-state="reuse"] { background: var(--fill-soft); }
.rcell[data-state="reuse"] .rcell__icon, .rcell[data-state="reuse"] .rcell__state { color: var(--muted); }
.rcell[data-state="running"] { border-color: var(--brand-line); background: var(--brand-soft); }
.rcell[data-state="running"] .rcell__icon, .rcell[data-state="running"] .rcell__state { color: var(--brand-strong); }
.rcell[data-state="done"] .rcell__icon, .rcell[data-state="done"] .rcell__state { color: #117a54; }
.rcell[data-state="done"] { border-color: #c4ead9; background: var(--success-soft); }
.rcell[data-state="failed"] { border-color: #f5cfcd; background: var(--danger-soft); }
.rcell[data-state="failed"] .rcell__icon, .rcell[data-state="failed"] .rcell__state { color: #b8403d; }
.rcell[data-state="queued"] .rcell__icon, .rcell[data-state="queued"] .rcell__state { color: var(--subtle); }

.merge-step { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); border: 1px dashed var(--line-strong); border-radius: var(--r-xl); background: var(--fill-soft); }

.review { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.review__player { display: grid; gap: var(--sp-3); }
.review__frame { position: relative; width: 100%; aspect-ratio: 9/16; border-radius: var(--r-xl); overflow: hidden; background: #0b1220; box-shadow: var(--shadow-md); container-type: inline-size; }
.review__side { display: grid; gap: var(--sp-5); align-content: start; }

.spec-list { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; background: var(--panel); }
.spec-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--sp-4); padding: 10px var(--sp-5); border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.spec-row:last-child { border-bottom: 0; }
.spec-row__k { color: var(--muted); }
.spec-row__v { font-weight: 560; }

.fail-list { display: grid; gap: var(--sp-2); }
.fail-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-4); border: 1px solid #f5cfcd; border-radius: var(--r-lg); background: var(--danger-soft); }
.fail-row__no { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; color: #b8403d; }
.fail-row__title { font-size: var(--fs-sm); font-weight: 580; }
.fail-row__why { font-size: var(--fs-xs); color: #8f3230; }

@media (max-width: 900px) {
  .review { grid-template-columns: minmax(0, 1fr); }
  .review__player { max-width: 300px; }
}

/* 封面卡 */
.cover-card__body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.cover-card__preview { display: grid; gap: 6px; justify-items: center; }
.cover-card__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9/16;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #0b1220;
  box-shadow: var(--shadow-sm);
  container-type: inline-size;
}
.cover-card__ctl { display: grid; gap: var(--sp-4); align-content: start; }
.cover-pick { display: flex; flex-wrap: wrap; gap: 5px; max-height: 104px; overflow-y: auto; padding: 2px; }
.cover-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--panel);
  color: var(--ink-70);
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
@media (hover: hover) { .cover-chip:hover { border-color: var(--brand-line); background: var(--fill-soft); } }
.cover-chip[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-strong); font-weight: 620; }
.cover-chip__no { font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 700; color: var(--subtle); }
.cover-chip[aria-pressed="true"] .cover-chip__no { color: var(--brand-strong); }

/* ---------- 资产 / 作品库 ---------- */

/* 品牌设置 */
.brand-cols { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--sp-5); align-items: start; }
.brand-main { display: grid; gap: var(--sp-4); }
.brand-card__title { display: flex; align-items: center; gap: 6px; font-size: var(--fs-h3); --od-icon-size: 16px; margin-bottom: var(--sp-3); }
.brand-acc { display: flex; align-items: flex-end; gap: var(--sp-4); }
.brand-avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 20px;
  font-weight: 800;
}
.wm-group { display: flex; gap: var(--sp-3); margin-top: var(--sp-2); }
.wm-opt {
  position: relative;
  display: grid;
  gap: 6px;
  padding: var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--panel);
  cursor: pointer;
}
.wm-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.wm-opt:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.wm-opt input:focus-visible ~ .wm-preview { outline: 2px solid var(--brand); outline-offset: 2px; }
.wm-opt__text { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; }
.wm-opt input:checked ~ .wm-opt__text .choice__box { background: var(--brand); border-color: var(--brand); color: #fff; }
.wm-preview {
  position: relative;
  display: block;
  width: 66px;
  aspect-ratio: 9/16;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--sc-bg, #fff);
  overflow: hidden;
}
.wm-preview__mark { position: absolute; top: 8px; display: flex; align-items: center; gap: 3px; }
.wm-preview[data-pos="topLeft"] .wm-preview__mark { left: 7px; }
.wm-preview[data-pos="topRight"] .wm-preview__mark { right: 7px; flex-direction: row-reverse; }
.wm-preview__bar { width: 11px; height: 2px; border-radius: 1px; background: var(--sc-ink-2, #6b7280); }
.wm-preview__word { width: 16px; height: 4px; border-radius: 1px; background: var(--sc-ink-2, #6b7280); }

.brand-side { display: grid; gap: var(--sp-2); justify-items: start; }
.brand-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9/16;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: #0b1220;
  box-shadow: var(--shadow-md);
  container-type: inline-size;
}
.brand-foot { margin-top: var(--sp-5); font-size: var(--fs-2xs); color: var(--subtle); }

.asset-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.asset-card { display: grid; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--panel); }
.asset-card__preview { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); }
.asset-card__name { font-size: var(--fs-sm); font-weight: 620; }
.asset-card__desc { font-size: var(--fs-xs); color: var(--muted); }

.work-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.work-card { display: grid; gap: var(--sp-3); }
.work-card__thumb { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); }
.work-card__name { font-size: var(--fs-sm); font-weight: 600; }
.work-card__meta { font-size: var(--fs-xs); color: var(--muted); }

/* 缩略图：用画面主题色画一个极简封面，不引入外部图片 */
.thumb { position: relative; width: 100%; aspect-ratio: 9/16; overflow: hidden; }
.thumb--wide { aspect-ratio: 16/9; }
.thumb__fill { position: absolute; inset: 0; }
.thumb__lines { position: absolute; inset: 18% 14% auto 14%; display: grid; gap: 11%; }
.thumb__line { height: 7%; min-height: 2px; border-radius: 1px; }