/* 第 12 轮 · 庚：首页三个页签、项目列表页、新建项目弹窗、一键成片面板。
   只用 r12-system.css 的变量与甲、乙、戊的组件；本路只加 .r12h-* 前缀的类，不动老的类。 */

/* ── 1. 页体 ─────────────────────────────────────────────────── */

.r12h-page {
  height: 100%;
  overflow-y: auto;
  padding: 16px;
}

.r12h-inner {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.r12h-inner-wide { max-width: 1184px; }

/* 八稿 20：页脚——小号、灰色、居中，跟着内容一起滚，不固定在窗口底。
   内容列本身有 16 的间距，这里再加 8，页脚和最后一块内容之间正好 24。 */
.r12h-footer {
  margin-top: 8px;
  text-align: center;
  color: var(--r12-muted);
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
}

/* 甲给的页脚里可能带链接、段落甚至小标题：字号统一压到小号档，颜色跟着页脚走，
   不让它把原本的层级或字号白名单带偏。选择器多带一层 .r12h-page，
   免得被甲组件里「.r12-footer small」这类后代规则压回去。 */
.r12h-page .r12h-footer * {
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
  color: inherit;
  text-align: inherit;
}

.r12h-footer > *,
.r12h-footer p { margin: 0; }

.r12h-footer a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.r12h-footer a:hover { color: var(--r12-ink); }

.r12h-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 20px 0 4px;
  text-align: center;
}

/* 展示字号（不在四档里，理由见结果单）：首页大标题 30/42 */
.r12h-title {
  font-size: 30px;
  line-height: 42px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--r12-ink);
}

.r12h-tabs { display: flex; }

.r12h-zone {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.r12h-composer {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 七稿 0.8：整卡最小高约 118 照旧。八稿 21：输入卡的附件区 / 输入区 / 按钮行
   三层结构归乙，本路这里只留最小高和圆角，不设 display、justify-content，
   也不给输入框定死高度。 */
.r12h-composer [data-composer] {
  min-height: 118px;
  border-radius: var(--r12-r-composer, 20px);
}

.r12h-skills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.r12h-skill { color: var(--r12-muted); }

/* ── 2. 项目与创作卡片 ───────────────────────────────────────── */

.r12h-cover-card { position: relative; }

/* 甲把媒体区写成行内元素，没有图时撑不出高度；这里让它按比例成块，空封面才不会塌。 */
.r12h-cover-card .r12-card-media { display: block; background: var(--r12-surface-3); }

.r12h-cover-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--r12-faint);
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
}

/* 新建项目卡：封面区正中一个 40 的加号圆 */
.r12h-new-card .r12-card-media { background: var(--r12-surface-2); }

.r12h-new-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--r12-surface-3);
  color: var(--r12-muted);
}

.r12h-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0 7px;
  border-radius: var(--r12-r-pill);
  background: color-mix(in srgb, var(--r12-bg) 76%, transparent);
  color: var(--r12-ink);
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
  font-weight: 500;
}

.r12h-tag svg { width: 12px; height: 12px; }

/* ── 七稿 13：项目卡上的团队标签、新建项目的归属一步 ─────────── */

/* 名字和团队标签同一行；名字过长先省略，标签不被挤掉 */
.r12h-card-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.r12h-card-name-row .r12-card-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.r12h-team-tag {
  flex: none;
  height: 18px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  border-radius: var(--r12-r-pill);
  background: var(--r12-surface-3);
  color: var(--r12-muted);
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
  white-space: nowrap;
}

.r12h-team-dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
}

/* 归属一步：个人 / 团队贴成一排，不另开弹窗 */
.r12h-owner-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.r12h-owner {
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-pill);
  background: var(--r12-surface-3);
  color: var(--r12-ink);
  font-size: var(--r12-fs-ui, 13px);
  line-height: var(--r12-lh-ui, 20px);
  white-space: nowrap;
}

.r12h-owner:hover { border-color: var(--r12-line-strong); }

.r12h-owner[aria-pressed='true'] {
  border-color: var(--r12-selected-border);
  background: var(--r12-selected-bg);
  font-weight: 600;
}

.r12h-owner .r12h-owner-check { display: none; color: var(--r12-ink); }
.r12h-owner[aria-pressed='true'] .r12h-owner-check { display: inline-flex; }
.r12h-owner .r12h-team-dot { width: 8px; height: 8px; }

/* 新建项目卡：和网格里的项目卡同一套尺寸，只多一圈虚线提示 */
.r12h-new-card { border-style: dashed; }

.r12h-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.r12h-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.r12h-grid-wide { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

.r12-card[hidden] { display: none; }

/* ── 3. 区块标题、分集列表 ───────────────────────────────────── */

.r12h-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.r12h-section-head {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px;
}

.r12h-section-head h2 {
  font-size: var(--r12-fs-title, 15px);
  line-height: var(--r12-lh-title, 22px);
  font-weight: 600;
  color: var(--r12-ink);
}

.r12h-episodes {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-panel);
  background: var(--r12-surface);
}

.r12h-episode {
  height: 44px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 120px 88px;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 0;
  border-bottom: 1px solid var(--r12-line);
  background: transparent;
  color: var(--r12-ink);
  text-align: left;
  transition: background-color var(--r12-dur-2) var(--r12-ease);
}

.r12h-episode:last-child { border-bottom: 0; }
.r12h-episode:hover { background: var(--r12-hover); }

.r12h-episode-no {
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
  color: var(--r12-muted);
}

.r12h-episode-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--r12-fs-ui, 13px);
  line-height: var(--r12-lh-ui, 20px);
  font-weight: 500;
}

.r12h-episode-project {
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
  color: var(--r12-muted);
}

.r12h-episode-state {
  text-align: right;
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
  color: var(--r12-muted);
}

.r12h-episode-state.is-done { color: var(--r12-ok); }
.r12h-episode-state.is-ready { color: var(--r12-running); }
.r12h-episode-state.is-review { color: var(--r12-review); }

/* ── 4. 搜索框 ───────────────────────────────────────────────── */

.r12h-search {
  height: 32px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-control);
  background: var(--r12-surface-3);
  transition: border-color var(--r12-dur-2) var(--r12-ease);
}

.r12h-search:hover { border-color: var(--r12-line-strong); }
.r12h-search:focus-within { outline: 2px solid var(--r12-selected-border); outline-offset: -1px; }

.r12h-search-icon {
  display: flex;
  color: var(--r12-muted);
}

.r12h-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--r12-ink);
  font-size: var(--r12-fs-ui, 13px);
  line-height: var(--r12-lh-ui, 20px);
}

.r12h-search input::placeholder { color: var(--r12-faint); }
.r12h-search input:focus-visible { outline: none; }

/* ── 5. 项目列表页 ───────────────────────────────────────────── */

.r12h-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 2px 0;
}

/* 展示字号：项目列表页的页面标题 20/28 */
.r12h-page-title {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: var(--r12-ink);
}

.r12h-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.r12h-head-actions .r12h-search { width: 220px; }

/* ── 6. 一键成片 ─────────────────────────────────────────────── */

/* 一键成片：面板和它下面那行免责竖着排，不要并排 */
.r12h-oneclick-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.r12h-oneclick {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.r12h-oc-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.r12h-upload {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.r12h-upload > * { flex: none; min-width: 0; width: 100%; }

/* 九稿 23：拖文件到上传区时盖一层浅色遮罩，写「松开上传」 */
.r12h-drop-hint {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r12-r-panel);
  background: color-mix(in srgb, var(--r12-bg) 72%, transparent);
  color: var(--r12-ink);
  font-size: var(--r12-fs-ui, 13px);
  line-height: var(--r12-lh-ui, 20px);
  pointer-events: none;
}

.r12h-drop-hint[hidden] { display: none; }

/* 已收下的文件：名字 + 大小 + 移除（一次只放 1 个） */
.r12h-picked {
  height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px 0 10px;
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-control);
  background: var(--r12-surface-3);
  color: var(--r12-ink);
  font-size: var(--r12-fs-ui, 13px);
  line-height: var(--r12-lh-ui, 20px);
}

.r12h-picked svg { color: var(--r12-muted); }

.r12h-picked b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.r12h-picked span {
  flex: none;
  color: var(--r12-muted);
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
  font-variant-numeric: tabular-nums;
}

.r12h-picked-x {
  flex: none;
  width: 24px;
  height: 24px;
  margin-left: auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: transparent;
  color: var(--r12-muted);
}

.r12h-picked-x:hover { background: var(--r12-hover); color: var(--r12-ink); }

.r12h-picked-words {
  flex: none;
  color: var(--r12-muted);
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
  font-variant-numeric: tabular-nums;
}

/* 七稿 4：画风下拉的每一项——40 缩略图 + 名字 + 一行说明（超长省略） */
.r12h-style-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 0;
  border-radius: var(--r12-r-media, 6px);
  background: transparent;
  color: var(--r12-ink);
  text-align: left;
}

.r12h-style-item:hover,
.r12h-style-item:focus-visible { background: var(--r12-hover); }
.r12h-style-item[aria-checked='true'] { background: var(--r12-selected-bg); }

/* 下拉里只让列表自己滚：346 + 弹层上下内边距 6×2 + 边框 1×2 = 最高 360 */
.r12h-style-scroll {
  max-height: 346px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.r12h-style-thumb {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--r12-r-media, 6px);
  background: var(--r12-surface-3);
  color: var(--r12-faint);
}

.r12h-style-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.r12h-style-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.r12h-style-copy b {
  font-size: var(--r12-fs-ui, 13px);
  line-height: var(--r12-lh-ui, 20px);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.r12h-style-copy small {
  display: block;
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
  color: var(--r12-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.r12h-style-check {
  flex: none;
  display: flex;
  color: var(--r12-ink);
}

.r12h-upload-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px dashed var(--r12-line-strong);
  border-radius: var(--r12-r-panel);
  background: var(--r12-surface-2);
  transition: border-color var(--r12-dur-2) var(--r12-ease), background-color var(--r12-dur-2) var(--r12-ease);
}

/* 九稿 28：工具页只留一个上传按钮；小说按钮在左，剧本按钮在右。 */
.r12h-upload-box.is-single { grid-template-columns: auto minmax(0, 1fr); }
.r12h-upload-box.is-single.is-script { grid-template-columns: minmax(0, 1fr) auto; }

.r12h-upload-box:hover,
.r12h-upload-box.is-dragging {
  border-color: var(--r12-selected-border);
  background: var(--r12-hover);
}

.r12h-upload-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

.r12h-upload-hint svg { color: var(--r12-faint); }

.r12h-upload-hint b {
  font-size: var(--r12-fs-ui, 13px);
  line-height: var(--r12-lh-ui, 20px);
  font-weight: 600;
  color: var(--r12-ink);
}

.r12h-upload-hint small {
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
  color: var(--r12-muted);
}

.r12h-paste {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 12px;
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-panel);
  background: var(--r12-surface-2);
}

/* 七稿 17：有上传文件时，「粘贴小说」收成一行文字入口 */
.r12h-paste-toggle {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--r12-muted);
  font-size: var(--r12-fs-ui, 13px);
  line-height: var(--r12-lh-ui, 20px);
  text-align: left;
  cursor: pointer;
}

.r12h-paste-toggle:hover { color: var(--r12-ink); }

.r12h-paste-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.r12h-paste-count {
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
  color: var(--r12-muted);
}

/* 甲没交 ZK.r12.textareaHtml 时的兜底外观；甲交了（.r12-textarea 外框）就用甲的，这里不生效。 */
.r12h-paste-input {
  width: 100%;
  min-height: 120px;
  padding: 10px 12px;
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-control);
  background: var(--r12-surface-3);
  color: var(--r12-ink);
  font-size: var(--r12-fs-body, 14px);
  line-height: var(--r12-lh-body, 22px);
  resize: none;
}

.r12h-paste-input::placeholder { color: var(--r12-faint); }
.r12h-paste-input:focus-visible { outline: 2px solid var(--r12-selected-border); outline-offset: -1px; }

/* 共用约定 6：浏览器自带的拉伸角不要了，右下角一段圆弧把手（半径 = 10 − 3） */
.r12h-textarea { position: relative; }

.r12h-textarea-handle {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--r12-faint);
  border-bottom: 1.5px solid var(--r12-faint);
  border-bottom-right-radius: 7px;
  cursor: ns-resize;
  transition: border-color var(--r12-dur-2) var(--r12-ease);
}

.r12h-textarea-handle:hover { border-color: var(--r12-muted); }

.r12h-oc-params { gap: 8px; }
.r12h-oc-params .r12-field { min-width: 0; }

.r12h-ctrl {
  display: flex;
  align-items: center;
}

.r12h-ctrl > * { width: 100%; }

.r12h-oc-foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 2px;
}

.r12h-oc-note {
  min-width: 0;
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
  color: var(--r12-muted);
}

/* 这一步不需要的环节写灰 */
.r12h-oc-note .is-off { color: var(--r12-faint); }

.r12h-oc-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.r12h-oc-estimate {
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
  color: var(--r12-muted);
  font-variant-numeric: tabular-nums;
}

.r12h-oc-foot .r12-btn { flex: none; }

/* 起点分段 */
.r12h-oc-origin { display: flex; }

/* 空着点〔看方案〕：输入区下面一行提示字（用提醒色，不用粉色） */
.r12h-empty-hint {
  margin: 0;
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
  color: var(--r12-error);
}

/* ── 7. 画风选择面板（新建项目第 3 步、一键成片的画风下拉都用它） ── */

.r12h-style-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.r12h-style-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.r12h-style-tools .r12-seg { flex: none; }
.r12h-style-tools .r12h-search { flex: 1; min-width: 160px; }

.r12h-style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 10px;
}

.r12h-style-card {
  text-align: left;
}

.r12h-style-card .r12-card-media { display: block; aspect-ratio: 3 / 4; }

.r12h-style-card .r12-card-meta {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.r12h-style-card[hidden] { display: none; }

/* 九稿 23：一键成片的画风卡片面板——480 宽、每行 4 张、图 96×72、下面一行名字 */
.r12h-style-panel { min-width: 0; }
.r12h-style-panel .r12h-style-picker { gap: 10px; }
.r12h-style-panel .r12h-style-tools { gap: 6px; }
.r12h-style-panel .r12h-style-tools .r12h-search { min-width: 120px; }

.r12h-style-panel .r12h-style-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-height: 268px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.r12h-style-panel .r12h-style-card {
  padding: 4px;
  gap: 2px;
}

.r12h-style-panel .r12h-style-card .r12-card-media {
  display: block;
  width: 96px;
  height: 72px;
  margin: 0 auto;
  aspect-ratio: auto;
}

.r12h-style-panel .r12h-style-card .r12-card-body {
  min-width: 0;
  padding: 0;
}

.r12h-style-panel .r12h-style-card .r12-card-name {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
}

.r12h-style-panel .r12h-style-card .r12-card-meta { display: none; }

.r12h-style-blank {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--r12-faint);
}

.r12h-style-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  color: var(--r12-muted);
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
}

.r12h-style-empty[hidden] { display: none; }

.r12h-style-custom {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-control);
  background: var(--r12-surface-2);
}

.r12h-style-custom[hidden] { display: none; }

.r12h-style-input {
  width: 100%;
  min-height: 64px;
  border: 0;
  background: transparent;
  color: var(--r12-ink);
  font-size: var(--r12-fs-body, 14px);
  line-height: var(--r12-lh-body, 22px);
  resize: none;
}

.r12h-style-input:focus-visible { outline: none; }

.r12h-style-count {
  align-self: flex-end;
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
  color: var(--r12-faint);
}

/* 画风放在下拉里时，弹层自己滚动，网格留一点内边距 */
.r12-menu .r12h-style-picker { padding: 2px; }

/* ── 8. 新建项目（贴边面板，七稿 16 起不再用居中弹窗） ───────── */

/* 七稿 19：外层锚定面板只负责定尺寸，自己不再滚；里面分「标题+步骤条 / 内容 / 按钮」三块，
   中间内容自己滚，按钮始终留在面板底部。 */
.r12-anchor-panel:has([data-r12h-flow]) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.r12h-flow-panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.r12h-flow-head {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 10px;
  padding: 0 2px 8px;
}

.r12h-flow-head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.r12h-flow-steps { min-width: 0; }

.r12h-flow-head b {
  font-size: var(--r12-fs-title, 15px);
  line-height: var(--r12-lh-title, 22px);
  font-weight: 600;
  color: var(--r12-ink);
}

.r12h-flow-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.r12h-flow-foot {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 12px 2px 0;
  border-top: 1px solid var(--r12-line);
}

.r12h-flow {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 4px;
}

.r12h-flow-step {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.r12h-flow-lead {
  font-size: var(--r12-fs-ui, 13px);
  line-height: var(--r12-lh-ui, 20px);
  color: var(--r12-muted);
}

.r12h-flow-title { width: 100%; }

.r12h-flow-params { gap: 8px; }
.r12h-flow-params .r12-field { min-width: 0; }

.r12h-choice-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.r12h-mode-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.r12h-choice { text-align: left; white-space: normal; }

.r12h-choice-icon {
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: var(--r12-r-media);
  background: var(--r12-surface-3);
  color: var(--r12-muted);
}

.r12h-choice .r12-card-body { padding: 2px 4px 4px; min-width: 0; }
.r12h-choice .r12-card-meta { min-width: 0; white-space: normal; overflow-wrap: anywhere; }

.r12h-mode { min-width: 0; }

.r12h-mode-hit {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "icon name" "meta meta";
  align-items: center;
  gap: 6px 8px;
  padding: 8px 10px;
  border-radius: var(--r12-r-media);
  background: transparent;
  color: var(--r12-ink);
  text-align: left;
  white-space: normal;
  transition: background-color var(--r12-dur-2) var(--r12-ease);
}

.r12h-mode-hit:hover { background: var(--r12-hover); }
.r12h-mode-hit:focus-visible { outline: 2px solid var(--r12-ink); outline-offset: 2px; }
.r12h-mode-hit .r12-card-body { display: contents; }
.r12h-mode-hit .r12h-choice-icon {
  grid-area: icon;
  width: 40px;
  min-width: 40px;
  height: 40px;
  flex: none;
}
.r12h-mode-hit .r12-card-name {
  grid-area: name;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.r12h-mode-hit .r12-card-meta {
  grid-area: meta;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.r12h-mode-extra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding: 8px 6px 4px;
  border-top: 1px solid var(--r12-line);
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
  color: var(--r12-muted);
}

/* 预算上限：点开改，预设 240 / 480 / 960 或自定义 */
.r12h-budget-ctrl { display: inline-flex; }

.r12h-budget {
  height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-pill);
  background: var(--r12-surface-3);
  color: var(--r12-ink);
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--r12-dur-2) var(--r12-ease), background-color var(--r12-dur-2) var(--r12-ease);
}

.r12h-budget:hover { border-color: var(--r12-line-strong); }

.r12h-budget-input {
  width: 88px;
  height: 24px;
  padding: 0 8px;
}

.r12h-flow-gap { flex: 1; }

/* ── 9. 九稿二轮：常用功能、单独功能页 ─────────────────────── */

.r12h-common-tools {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.r12h-tool-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.r12h-tool-card {
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  padding: 12px;
  text-align: left;
}

.r12h-tool-icon { display: flex; color: var(--r12-muted); }

.r12h-tool-name {
  font-size: var(--r12-fs-ui, 13px);
  line-height: var(--r12-lh-ui, 20px);
  font-weight: 600;
  color: var(--r12-ink);
}

.r12h-tool-desc {
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
  color: var(--r12-muted);
  overflow-wrap: anywhere;
}

.r12h-tool-card.is-disabled { color: var(--r12-faint); cursor: not-allowed; }
.r12h-tool-card.is-disabled .r12h-tool-icon,
.r12h-tool-card.is-disabled .r12h-tool-name,
.r12h-tool-card.is-disabled .r12h-tool-desc { color: var(--r12-faint); }
.r12h-tool-card.is-disabled:hover { border-color: var(--r12-line); }

.r12h-tool-head { display: flex; flex-direction: column; gap: 4px; padding: 4px 2px 0; }

.r12h-tool-sub {
  margin: 0;
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
  color: var(--r12-muted);
}

.r12h-tool-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-panel);
  background: var(--r12-surface);
}

.r12h-tool-block-title {
  margin: 0;
  font-size: var(--r12-fs-title, 15px);
  line-height: var(--r12-lh-title, 22px);
  font-weight: 600;
  color: var(--r12-ink);
}

.r12h-tool-run { flex-direction: row; align-items: center; gap: 12px; }

.r12h-tool-progress {
  margin: 0;
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
  color: var(--r12-muted);
  font-variant-numeric: tabular-nums;
}

.r12h-tool-settings .r12-field { min-width: 0; }

.r12h-tool-result {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-panel);
  background: var(--r12-surface);
}

.r12h-tool-result-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.r12h-tool-result-head h2 {
  margin: 0;
  font-size: var(--r12-fs-title, 15px);
  line-height: var(--r12-lh-title, 22px);
  font-weight: 600;
  color: var(--r12-ink);
}

.r12h-tool-result-actions { display: flex; align-items: center; gap: 8px; }

.r12h-tool-script-result {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}

.r12h-tool-episodes {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-control);
  background: var(--r12-surface-2);
}

.r12h-tool-episode {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid var(--r12-line);
  background: transparent;
  color: var(--r12-ink);
  text-align: left;
}

.r12h-tool-episode:last-child { border-bottom: 0; }
.r12h-tool-episode:hover { background: var(--r12-hover); }
.r12h-tool-episode.is-active { background: var(--r12-selected-bg); }

.r12h-tool-episode-no { flex: none; color: var(--r12-muted); font-size: var(--r12-fs-small, 12px); }

.r12h-tool-episode-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--r12-fs-ui, 13px);
  line-height: var(--r12-lh-ui, 20px);
}

.r12h-tool-preview {
  min-width: 0;
  max-height: 420px;
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-control);
  background: var(--r12-surface-2);
}

.r12h-tool-preview pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--r12-ink);
  font-family: inherit;
  font-size: var(--r12-fs-ui, 13px);
  line-height: var(--r12-lh-ui, 20px);
}

.r12h-tool-assets { display: flex; flex-direction: column; gap: 16px; }

.r12h-tool-asset-group h3 {
  margin: 0 0 8px;
  font-size: var(--r12-fs-ui, 13px);
  line-height: var(--r12-lh-ui, 20px);
  font-weight: 600;
  color: var(--r12-ink);
}

.r12h-tool-asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.r12h-tool-asset {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-media, 6px);
  background: var(--r12-surface-2);
  color: var(--r12-ink);
  text-align: left;
  overflow: hidden;
}

.r12h-tool-asset img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.r12h-tool-asset span {
  padding: 0 8px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
}

/* ── 9.1 第三轮：工具页五步、两次确认、任务状态与结果 ─────────── */

.r12h-tool-demo {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-control);
  background: var(--r12-surface-2);
  color: var(--r12-muted);
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
  overflow-wrap: anywhere;
}

.r12h-tool-demo svg { flex: none; margin-top: 2px; }

.r12h-tool-hint {
  min-width: 0;
  color: var(--r12-muted);
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
  overflow-wrap: anywhere;
}

.r12h-tool-error,
.r12h-tool-notice {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--r12-r-control);
  font-size: var(--r12-fs-ui, 13px);
  line-height: var(--r12-lh-ui, 20px);
  overflow-wrap: anywhere;
}

.r12h-tool-error {
  border: 1px solid var(--r12-danger-border, #d45c5c);
  background: var(--r12-danger-soft, rgba(212, 92, 92, .12));
  color: var(--r12-danger, #b54141);
}

.r12h-tool-notice {
  border: 1px solid var(--r12-line);
  background: var(--r12-surface-2);
  color: var(--r12-muted);
}

.r12h-tool-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.r12h-tool-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 5px 10px;
  border: 1px solid var(--r12-line);
  border-radius: 999px;
  background: var(--r12-surface);
  color: var(--r12-muted);
  font-size: var(--r12-fs-small, 12px);
  line-height: var(--r12-lh-small, 18px);
}

.r12h-tool-step span {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--r12-surface-2);
  color: var(--r12-muted);
  font-size: 11px;
}

.r12h-tool-step.is-current {
  border-color: var(--r12-accent, #3377F7);
  color: var(--r12-ink);
}

.r12h-tool-step.is-current span { background: var(--r12-accent, #3377F7); color: #fff; }
.r12h-tool-step.is-done span { background: var(--r12-success-soft, rgba(47, 158, 108, .16)); color: var(--r12-success, #2f9e6c); }
.r12h-tool-step[aria-disabled="true"] { opacity: .55; cursor: default; }

.r12h-tool-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.r12h-tool-actions .r12h-tool-hint { margin-right: auto; }

.r12h-tool-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.r12h-tool-input-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.r12h-tool-project-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.r12h-tool-project-name { flex: 1 1 220px; min-width: 0; max-width: 360px; }

.r12h-tool-stage { min-height: 160px; justify-content: center; }

.r12h-tool-phase {
  margin: 0;
  color: var(--r12-ink);
  font-size: var(--r12-fs-ui, 13px);
  line-height: var(--r12-lh-ui, 20px);
  overflow-wrap: anywhere;
}

.r12h-tool-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-control);
  background: var(--r12-surface-2);
}

.r12h-tool-summary b { color: var(--r12-ink); font-weight: 600; }
.r12h-tool-summary span { color: var(--r12-muted); font-size: var(--r12-fs-small, 12px); }
.r12h-tool-summary .r12-btn { margin-left: auto; }

.r12h-tool-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  min-width: 0;
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-control);
  background: var(--r12-surface-2);
}

.r12h-tool-rows > div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  padding: 8px 12px;
  border-bottom: 1px solid var(--r12-line);
}

.r12h-tool-rows > div:last-child { border-bottom: 0; }
.r12h-tool-rows dt { flex: none; color: var(--r12-muted); font-size: var(--r12-fs-small, 12px); line-height: var(--r12-lh-small, 18px); }
.r12h-tool-rows dd { min-width: 0; margin: 0; color: var(--r12-ink); font-size: var(--r12-fs-ui, 13px); line-height: var(--r12-lh-ui, 20px); text-align: right; overflow-wrap: anywhere; }

.r12h-tool-asset-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  max-width: 560px;
  padding: 10px;
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-panel, 10px);
  background: var(--r12-surface);
  transition: border-color .15s ease, background .15s ease;
}

.r12h-tool-asset-card.is-pending { background: var(--r12-surface-2); color: var(--r12-muted); }
.r12h-tool-asset-card.is-ready { border-color: var(--r12-accent-soft, rgba(51, 119, 247, .32)); }

.r12h-tool-asset-thumb {
  position: relative;
  overflow: hidden;
  border-radius: var(--r12-r-media, 6px);
  background: var(--r12-surface-3, var(--r12-surface-2));
}

.r12h-tool-asset-thumb img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.r12h-tool-asset-thumb.is-gray img { filter: grayscale(1) brightness(.78); opacity: .75; }
.r12h-tool-asset-thumb > span {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
}

.r12h-tool-asset-copy { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.r12h-tool-asset-copy b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--r12-ink); font-size: var(--r12-fs-ui, 13px); }
.r12h-tool-asset-copy small { flex: none; color: var(--r12-muted); font-size: 11px; }

.r12h-tool-prompt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.r12h-tool-prompt > span { color: var(--r12-muted); font-size: 11px; line-height: 16px; }
.r12h-tool-prompt textarea { width: 100%; min-width: 0; resize: vertical; }

.r12h-tool-expand {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--r12-accent, #3377F7);
  font-size: 11px;
  line-height: 18px;
  cursor: pointer;
}

.r12h-tool-asset-run {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
  padding-top: 6px;
  border-top: 1px solid var(--r12-line);
}

/* 生成开始只做一次短促反馈，不用循环动画或假百分比遮盖等待。 */
@keyframes r12h-tool-run-in {
  from { border-color: var(--r12-accent, #3377F7); opacity: .82; }
  to { border-color: var(--r12-line); opacity: 1; }
}
.r12h-tool-asset-card:has(.r12h-tool-status[data-status="running"]) {
  animation: r12h-tool-run-in 480ms var(--r12-ease, ease-out) 1;
}
[data-motion="reduced"] .r12h-tool-asset-card { animation: none; }

.r12h-tool-status {
  flex: none;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--r12-surface-2);
  color: var(--r12-muted);
  font-size: 11px;
  line-height: 18px;
}

.r12h-tool-status[data-status="running"] { color: var(--r12-accent, #3377F7); background: var(--r12-accent-soft, rgba(51, 119, 247, .12)); }
.r12h-tool-status[data-status="succeeded"] { color: var(--r12-success, #2f9e6c); background: var(--r12-success-soft, rgba(47, 158, 108, .14)); }
.r12h-tool-status[data-status="cancelled"] { color: var(--r12-faint); }
.r12h-tool-status[data-status="queued"] { color: var(--r12-warning, #b5811f); }

.r12h-tool-count { color: var(--r12-muted); font-size: var(--r12-fs-small, 12px); line-height: var(--r12-lh-small, 18px); font-variant-numeric: tabular-nums; }
.r12h-tool-asset-run .r12-btn { margin-left: auto; }

.r12h-tool-counts-line {
  margin: 0;
  color: var(--r12-ink);
  font-size: var(--r12-fs-ui, 13px);
  line-height: var(--r12-lh-ui, 20px);
  overflow-wrap: anywhere;
}

.r12h-tool-counts-line b { font-weight: 600; }

.r12h-tool-confirm {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-panel);
  background: var(--r12-surface-2);
}

.r12h-tool-confirm h3 { margin: 0; color: var(--r12-ink); font-size: var(--r12-fs-ui, 13px); line-height: var(--r12-lh-ui, 20px); font-weight: 600; }

.r12h-tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  min-width: 0;
}

.r12h-tool-inline { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; }

.r12h-tool-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  min-width: 0;
}

.r12h-tool-result-card span { white-space: normal; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  .r12h-tool-asset-card { transition: none; }
}

/* 工具页生成的剧本在项目「剧本预览」里用两列排：左侧分集，右侧正文。 */
.r12f-tool-original p {
  max-height: 240px;
  margin: 0;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.r12f-novel-preview-grid {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}

@media (max-width: 900px) {
  .r12f-novel-preview-grid { grid-template-columns: minmax(0, 1fr); }
  .r12h-tool-summary .r12-btn { margin-left: 0; }
  .r12h-tool-actions { justify-content: flex-start; }
  .r12h-tool-rows > div { gap: 10px; }
}

/* ── 10. 窄屏 ─────────────────────────────────────────────────── */

@media (max-width: 900px) {
  /* 展示字号：窄屏下的首页大标题 24/34 */
  .r12h-title { font-size: 24px; line-height: 34px; }
  .r12h-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r12h-choice-row { grid-template-columns: minmax(0, 1fr); }
  .r12h-mode-row { grid-template-columns: minmax(0, 1fr); }
  .r12h-oc-params { flex-wrap: wrap; }
  .r12h-oc-params .r12-field { flex: 1 1 44%; }
  .r12h-episode { grid-template-columns: 32px minmax(0, 1fr) 88px; }
  .r12h-episode-project { display: none; }
  .r12h-tool-script-result { grid-template-columns: minmax(0, 1fr); }
  .r12h-tool-card { padding: 10px; }
  .r12h-tool-cards { gap: 8px; }
}