:root {
  --bg: #f5f6f8;
  --panel: #ffffff;
  --line: #e6e8ec;
  --text: #1c1f23;
  --muted: #7a828e;
  --brand: #2b6cf6;
  --brand-soft: #eef4ff;
  --ok: #12a150;
  --warn: #d98200;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 20px rgba(16, 24, 40, 0.05);
}

* { box-sizing: border-box; }

/* ⚠️ 必须给 #root 高度：html/body 是 100%，但 #root 是中间的容器。
   少了这一条，.app{height:100%} 就失效（百分比高度需要父级有确定高度）——
   症状有两个：① 侧栏白条撑不到底部、② .view 没被限高，内容一多就被 body 的 overflow:hidden 裁掉，
   表现为"右侧不能上下滚动"（2026-09-20 阿和反馈）。 */
#root { height: 100%; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;      /* 整页不滚：滚动只发生在右侧内容区 —— 左侧白条永远铺满、不动 */
  background: var(--bg);
  color: var(--text);
  font: 14px/1.6 "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, sans-serif;
}

.app { display: flex; height: 100%; overflow: hidden; }

/* ---------- 侧边栏 ---------- */
.side {
  width: 236px;
  flex: 0 0 236px;
  height: 100%;               /* 白底铺满整条左边：右侧滚到哪都不露底色 */
  overflow-y: auto;
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
}

.brand { display: flex; gap: 10px; align-items: center; padding: 2px 6px 20px; }
.brand-logo { height: 25px; width: auto; display: block; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.35; }
.brand-txt strong { font-size: 13.5px; font-weight: 600; letter-spacing: .3px; }
.brand-txt span { font-size: 11px; color: var(--muted); }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  border: 0; background: transparent; color: var(--text);
  padding: 9px 10px; border-radius: 9px; cursor: pointer;
  font-size: 13.5px; text-align: left; font-family: inherit;
}
.nav-item:hover { background: #f2f4f7; }
.nav-item.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }

/* 分组分隔：低频的「人设」沉到下面（只留一条细线，不放文字） */
.nav-split {
  margin: 14px 10px 6px; padding-top: 12px; border-top: 1px solid var(--line);
}

.side-foot { margin-top: auto; padding: 12px 6px 0; border-top: 1px solid var(--line); }
.health { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.health .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); display: inline-block; }
.health.bad { color: #d64545; }
.health.bad .dot { background: #d64545; }

/* 工信部备案号：法定信息，常驻页脚；小字浅色，按品牌语气不抢注意力 */
.beian {
  display: inline-block; margin-top: 12px;
  font-size: 11px; color: #aab1bb; text-decoration: none; letter-spacing: .2px;
}
.beian:hover { color: var(--muted); }

/* 全站提示文字的唯一格式：比正文小、比正文浅、不加符号 */
.hint { font-size: 12px; color: #98a0ab; line-height: 1.7; }

/* ---------- 主区 ---------- */
.main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }

/* 🔴 标题栏用**明确的灰底**（阿和 2026-10-14：「太丑了，还是灰色的底好」）——
   它原来是**透明**的：显示的其实是 body 的灰底，内容区一滚上来、透出的东西变了，
   看着就像"标题栏被吃掉/白底没了"。现在把灰底**写实**（跟内容区同一个 `--bg`），
   不管滚到哪都是同一种灰，跟下面的卡片（白）层次也清楚。 */
.topbar {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 22px 30px 12px;
  background: var(--bg);
}
.topbar h1 { margin: 0; font-size: 20px; letter-spacing: .2px; }
.desc { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; }
.topbar-right { min-height: 24px; }

/* min-height:0 是关键：flex 子项默认 min-height:auto，内容一长就把容器撑破、整页跟着滚 ——
   那正是"右侧滚动、左侧导航跟着动"的原因（阿和 2026-09-20 反馈）。 */
.view { flex: 1; min-height: 0; overflow: auto; padding: 18px 30px 40px; }

/* ---------- 通用块 ---------- */
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 20px; margin-bottom: 16px;
}
.card h2 {
  margin: 0 0 12px; font-size: 14px; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.card h2 .tag { font-weight: 400; font-size: 11.5px; color: var(--muted); }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }

.stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px;
}
.stat .n { font-size: 26px; font-weight: 700; line-height: 1.2; }
.stat .l { color: var(--muted); font-size: 12px; margin-top: 2px; }
.stat .s { color: #a8afb9; font-size: 11.5px; margin-top: 6px; }

/* 页内分栏（创作：出选题 / 写文案） */
/* 空间不够时让筛选条换行（而不是把字挤成竖排）——搜索框会自己掉到下一行右对齐 */
.tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.tabs .tab { white-space: nowrap; }
.tab {
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  padding: 7px 15px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px;
}
.tab:hover { background: #fafbfc; }
.tab.active { background: var(--brand-soft); border-color: #cfe0ff; color: var(--brand); font-weight: 600; }

/* 🔴 用 `align-items: baseline`（2026-10-14 阿和连着报两次「对不齐」）：
   dt 是 12.5px 灰字、dd 是 14px 正文 —— 用 `start` 是**顶对齐**，大小字基线不同，
   看着就是"一行高一行低"。改成基线对齐，字号不同也齐。
   （原来靠 `dt { padding-top: 7px }` 硬凑桌面端，手机端还写成 0，所以手机上特别明显。） */
.kv { display: grid; grid-template-columns: 96px 1fr; gap: 8px 14px; align-items: baseline; }
.kv dt { color: var(--muted); font-size: 12.5px; }
.kv dd { margin: 0; }

label.field { display: block; margin-bottom: 12px; }
/* 表单标签（2026-10-18 改）：
   · 选择器从 `label.field span` 改成 **`.field > span`** —— 素材那层是 `<div class="field">`，
     用 label 限定的话它拿不到样式（会变成默认黑字、没有下间距）← 阿和看出来的
   · 颜色从 --muted(#7a828e) 加深到 **#4a525d**：他说「平台/时长跟上面的提示字颜色太接近」，
     标签得比说明文字更实一点，才看得出哪个是字段名 */
.field > span {
  display: block; font-size: 12.5px; color: #4a525d;
  margin-bottom: 6px; font-weight: 500;
}

input[type="text"], input[type="number"], textarea, select {
  width: 100%; border: 1px solid var(--line); border-radius: 9px;
  padding: 8px 11px; font: inherit; font-size: 13.5px; color: var(--text);
  background: #fff; outline: none;
}
input:focus, textarea:focus, select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
textarea { resize: vertical; min-height: 68px; line-height: 1.65; }

.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 1; min-width: 130px; }
.row > .shrink { flex: 0 0 auto; min-width: 0; }

/* 行内控件底对齐（否则按钮会和输入框错位）
   ① label.field 自带 12px 下边距，底对齐时会把输入框整体顶上去，而按钮没有这层边距
      → 按钮看起来"塌"在输入框下面。行内一律归零。
   ② 按钮上下 padding 是 9px、输入框是 8px，底对齐后按钮顶部会多出 2px。行内统一成 8px。 */
.row label.field { margin-bottom: 0; }
.row > .btn { padding-top: 8px; padding-bottom: 8px; }

/* 表单末尾那颗主按钮（开始写作 / 开始仿写）：跟上面的控件**拉开一档**。
   2026-10-12 阿和：「排版跟按钮要分开点」—— 原来仿写那边写了 margin-top:2px，
   按钮几乎贴着「时长」下拉框。这里统一成一档 16px（两边共用，别再各写一版）。 */
.go-row { margin-top: 16px; }

.btn {
  border: 1px solid var(--line); background: #fff; color: var(--text);
  padding: 9px 16px; border-radius: 9px; cursor: pointer; font: inherit; font-size: 13.5px;
  white-space: nowrap;
}
.btn:hover { border-color: #cfd5de; background: #fafbfc; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.btn.primary:hover { background: #1f5fe0; }
/* quiet = 次要动作（删掉这种），平时不抢眼 */
.btn.quiet { color: var(--muted); }
.btn.quiet:hover { color: var(--text); }
/* danger = 不可逆动作，只有「彻底删除」用它 */
.btn.danger { color: #d64545; border-color: #f0c9c9; }
.btn.danger:hover { background: #fdf3f3; border-color: #e5a9a9; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; background: #f1f3f6; color: var(--muted);
}
.pill.ok { background: #e8f8ef; color: var(--ok); }
.pill.brand { background: var(--brand-soft); color: var(--brand); }
.pill.warn { background: #fdf3e3; color: var(--warn); }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
/* 定宽表：长标题不再挤压右侧列，超出用省略号（原文放 title 提示） */
table.fixed { table-layout: fixed; }
th, td { text-align: left; padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th:first-child, td:first-child { padding-left: 12px; }
th:last-child, td:last-child { padding-right: 12px; }
th { color: var(--muted); font-weight: 500; font-size: 12px; background: #fafbfc; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fafbfc; }
td .sub { color: var(--muted); font-size: 12px; }
td.nowrap { white-space: nowrap; overflow: hidden; }   /* 固定表格里长文本溢出会压到隔壁列，直接裁掉 */
.ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
td .strong { font-weight: 600; }

/* 回收站里的行：整体压暗，跟正常内容一眼分开 */
tbody tr.trash td { color: var(--muted); }
tbody tr.trash .strong { font-weight: 400; }

.empty { color: var(--muted); font-size: 13px; padding: 26px 0; text-align: center; }

.pre {
  white-space: pre-wrap; word-break: break-word;
  background: #fafbfc; border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; font-size: 13px; line-height: 1.75; max-height: 460px; overflow: auto;
}

/* 编辑判断：像编辑写在稿子边上的批注（2026-09-24「贴身编辑」）
   故意做得比正文轻 —— 它是判断，不是内容，不跟稿子抢注意力。 */
.enote {
  white-space: pre-wrap; word-break: break-word;
  background: #fafbfc; border-left: 2px solid var(--brand, #2b6cf6);
  border-radius: 0 10px 10px 0; padding: 12px 15px;
  font-size: 13px; line-height: 1.9; color: var(--text, #1a1f29);
}

/* 参考仿写：拆解结论块（2026-10-09）
   它回答的是「这条为什么火、哪些值得借鉴、我跟它差在哪」—— 是**给人看的东西**，
   所以做成一张浅底卡片，跟稿子（.pre）区分开，别混成一片。 */
.refbox {
  background: #fafbfc; border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; margin-top: 14px;
}
.refbox-t { font-size: 13px; font-weight: 600; color: var(--ink3, #5b6472); margin-bottom: 2px; }
.refbox-t .anchor { margin-left: 8px; font-weight: 400; }
.refbox .kv { margin-top: 10px; }

/* AI 中控对话区：**思考过程可见**（2026-10-19 阿和：「他思考什么、回复什么，我都希望看到」）。
   之前只显示"正在思考…已思考 132 字"，只有字数没有内容，像个卡住的进度条。 */
.ai-think { margin: 0 0 10px; border-left: 2px solid var(--line); padding: 2px 0 2px 10px; }
.ai-think summary {
  cursor: pointer; font-size: 12px; color: var(--muted); list-style: none;
  display: flex; align-items: center; gap: 6px;
}
.ai-think summary::-webkit-details-marker { display: none; }
.ai-think-body {
  margin: 6px 0 0; padding: 0; font-size: 12px; line-height: 1.65; color: var(--muted);
  white-space: pre-wrap; word-break: break-word; max-height: 160px; overflow: auto;
  font-family: inherit;
}
.ai-live { font-size: 13.5px; line-height: 1.7; }

/* 素材选择区（2026-10-18 重做，之前那版被否：「太丑了，而且点击会有选择提示，乱七八糟」）：
   **原生 file 控件藏掉**（绝对定位铺满 + opacity 0，点哪都能选文件），整块做成一块
   虚线引导框；选了之后变成实线 + 文件名 + 大小 + 「换一个」。桌面端还能直接拖文件进来。 */
/* 素材选择区（2026-10-18 三次调整后的定稿）：
   · **宽度 370px** = 上面「平台(180) + 间距(10) + 时长(180)」的右边缘，右边缘必须对齐
     （实测过：原来 400px 比时长框多出 30px，一眼就看出来不齐）
   · **高度 44px**，比下拉框(38)略厚 —— 它是"上传区"不是输入框，厚一点才像
   · **虚线**（未选）/ 实线（已选），跟市面上的上传控件一致
   · 原生 file 控件藏掉（绝对定位铺满 + opacity 0），点哪都能选文件，看不到那个灰框和系统提示 */
.pickedrop {
  position: relative; box-sizing: border-box;
  border: 1.5px dashed var(--line); border-radius: 10px;
  padding: 0 38px 0 14px; max-width: 370px; width: 100%; min-height: 56px;
  display: flex; align-items: center; cursor: pointer;
  transition: border-color .15s, background .15s;
}
/* 「素材」这一组跟上面那行（平台/时长）之间拉开一点，别贴着 —— 阿和 2026-10-18：
   「素材这两个字感觉跟上面贴太紧了」 */
.cutter-field { margin-top: 16px; }
.pickedrop:hover { border-color: var(--brand); background: #f8fbff; }
.pickedrop.drag { border-color: var(--brand); background: #eef5ff; }
.pickedrop input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
/* 一行就够：没选 = 「点这里选视频」；选了 = 文件名 · 大小（文件名太长就省略号，别把框撑高） */
.pd-inner { display: block; width: 100%; min-width: 0; font-size: 13.5px; line-height: 1.4; pointer-events: none; }
.pd-main { color: var(--muted); }
.pd-sub { display: none; }
.pickedrop.has { border-style: solid; border-color: var(--brand); background: #f3f8ff; }
.pd-name {
  display: inline-block; max-width: calc(100% - 62px); vertical-align: bottom;
  color: var(--text); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pd-meta { color: var(--muted); font-size: 12.5px; margin-left: 8px; }
.pd-swap {
  display: inline-block; margin-left: 10px; font-size: 12.5px;
  color: var(--brand); text-decoration: underline; text-underline-offset: 2px;
}
/* 剪的过程中整块变灰、点不动（2026-10-18 阿和：「点开始剪之后还能把素材删掉，这样会出问题」）——
   上传用的文件和参数必须跟点下去那一刻一致。`pointer-events: none` 连隐藏的 input 一起挡住。 */
.pickedrop.locked { opacity: .55; pointer-events: none; cursor: default; }
.pickedrop.locked input[type="file"] { pointer-events: none; }

/* 已选素材右侧的「小叉叉」：点它移除素材（不能触发文件选择器 → z-index 抬高 + 自己处理点击） */
.pd-x {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; padding: 0; line-height: 20px;
  border: 0; border-radius: 50%; background: rgba(15, 23, 42, .07);
  color: var(--muted); font-size: 15px; cursor: pointer; z-index: 3;
  font-family: inherit;
}
.pd-x:hover { background: rgba(15, 23, 42, .13); color: var(--text); }
/* 手机上不要限宽（一屏本来就窄，限了反而怪） */
@media (max-width: 780px) { .pickedrop { max-width: none; } }

/* 指引里的**可点击外链**（2026-10-18 阿和：「官网没有跳转，需要增加立即跳转，放在这段文字最后」）：
   摆在句子末尾当"随手点一下"的落点 —— 品牌色 + 下划线，一眼看出能点。 */
.golink {
  display: inline-block; margin-left: 6px;
  color: var(--brand); font-weight: 600; text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px;
}
.golink:hover { opacity: .75; }

/* 原文链接（参考仿写，2026-10-10）：**直接把网址摆出来** —— 客户回头想找原视频/原笔记，
   一眼就能认出来、能复制；长链接必须能折行，不能撑破版面（手机上尤其）。 */
.srcline {
  font-size: 12.5px; color: var(--muted); line-height: 1.6;
  margin-bottom: 6px; word-break: break-all;
}
.srcline .anchor { word-break: break-all; }

/* ── 运营后台 · AI 地图（2026-10-10 阿和：要可视化看到产品的运作逻辑和节点）──
   刻意**不画连线**：手机上一张流程图会糊成一团。用"大编号 + 细线分隔"排成一条读得下去的线，
   编号顺序就是内容的流转顺序（人设卡 → 灵感 → 创作 → 作品 → 复盘）。 */
/* ⚠️ 类名必须带 aimap- 前缀。第一版我用了 `.steps` / `.step` —— 那是**注册页步骤条**
   （cloud.css 里的 flex 布局）已经在用的名字，结果 6 个环节被旧规则接管、挤成一行 50px。
   教训跟 `.brand` 那次一样：通用词（steps / step / node / loop）不能当新组件的类名。 */
.aimap-steps { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 14px; }
.aimap-step { background: #fafbfc; border: 1px solid var(--line); border-radius: 10px; padding: 10px 11px; min-width: 0; }
.aimap-no { display: block; font-size: 11px; color: #98a0ab; letter-spacing: .6px; }
.aimap-nm { display: block; font-size: 13px; font-weight: 600; margin-top: 3px; line-height: 1.4; }
.aimap-w { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.aimap-loop {
  margin-top: 14px; padding: 12px 15px; border-left: 2px solid var(--brand);
  background: #fafbfc; border-radius: 0 10px 10px 0; font-size: 13px; line-height: 1.8; color: var(--text);
}

.aimap-node { padding: 12px 0; border-top: 1px solid var(--line); }
.aimap-node:first-of-type { border-top: 0; padding-top: 2px; }
.aimap-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.aimap-idx { font-size: 16px; font-weight: 700; color: #ccd3dc; letter-spacing: 1px; }
.aimap-head b { font-size: 14.5px; }
.aimap-meta { margin-left: auto; font-size: 12px; color: var(--muted); }
.aimap-what { margin-top: 5px; font-size: 13px; line-height: 1.8; color: var(--ink3, #5b6472); }

/* 「一共用了几个 AI」：一行一个，不做成大卡片（阿和 2026-10-10：太复杂，简化） */
.aimap-svclist { margin-top: 4px; }
.aimap-svcrow {
  display: grid; grid-template-columns: 168px 1fr 150px; gap: 12px; align-items: baseline;
  padding: 10px 0; border-top: 1px solid var(--line);
}
.aimap-svcrow:first-child { border-top: 0; }
.aimap-svcrow > div > b { font-size: 13px; }
.aimap-svcrow .u { font-size: 12.5px; color: var(--muted); line-height: 1.65; }
.aimap-svcrow .h { font-size: 12.5px; text-align: right; }

/* ── 「怎么剪」（口播剪辑工作包，2026-10-12）──
   类名带 cut- 前缀（吸取 .steps/.brand 撞车的教训：通用词不能当新组件的类名）。 */
.cut-sum {
  font-size: 13.5px; line-height: 1.85; color: var(--text);
  background: #fafbfc; border-left: 2px solid var(--brand);
  border-radius: 0 10px 10px 0; padding: 12px 15px; margin-top: 10px;
}
.cutcuts { margin-top: 8px; }
.cutcut { padding: 10px 0; border-top: 1px solid var(--line); }
.cutcut:first-child { border-top: 0; }
.cutcut .t { display: inline-block; font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; color: var(--brand); margin-right: 8px; }
.cutcut .w { font-size: 13px; }
.cutcut .s { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }

/* 🔴 返回（2026-10-14 第二版）：阿和说「方框对齐了但文字没对齐」，而且
   「这种形式容易被误认为是整个详情页的一部分，但返回按钮应该不算做详情页的一部分」。
   → 挪到**卡片外面**、去掉框（不做成按钮），做成**纯文字导航**：
   文字左缘跟卡片对齐，视觉上属于"导航"而不是"页面内容"。 */
.backline { margin-bottom: 12px; }
.backlink {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 14px; color: var(--brand);
}
.backlink:hover { opacity: .75; }

/* 作品表格里整格可点的标题（客户直觉点标题） */
.opencell { cursor: pointer; }
.opencell:hover .strong { color: var(--brand); }

/* ── 下拉卡片（剪辑指引 / 创作辅助信息 共用，2026-10-14 定稿）──────────
   白卡片（用 .card → 跟其他卡片同宽同边距，自动对齐）
   ＋ 一行可点的标题 ＋ 独立细线 chevron（`FOLDCARD_ARROW`）。
   定稿过程（别退回）：
     · 标题颜色要比正文弱 → `--muted`，不抢视觉；
     · **不要底色框**（试过浅灰底条，阿和：「太丑了」）；
     · 图标**不带圆圈**（试过圆形底，他说「就一个独立的下拉倒三角」）；
     · 图标**紧贴标题**（试过 `margin-left:auto` 推到最右，手机上看不出是一组）。 */
.foldcard-head { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.foldcard-title { font-size: 14px; color: var(--muted); }
.foldcard-head:hover .foldcard-title { color: var(--brand); }
/* ⚠️ 图标**紧跟标题文字**（2026-10-14 阿和：「紧贴文字，坐在最右边怎么看得到」）——
   原来是 margin-left:auto 推到屏幕最右，手机上跟标题隔着半个屏，根本联想不到是一起的 */
/* 🔴 下拉图标的**定稿版**（阿和 2026-10-14 确认后全站统一按这个来）：
   一个**独立的细线 chevron** —— 无圆圈、无底色。
   （圆圈的版本他嫌丑：「下拉的倒三角不需要外面圆圈，就一个独立的下拉倒三角」）
   展开时整块旋转 180°；颜色跟标题走。 */
.foldcard-arrow {
  width: 10px; height: 6px; flex: none; color: var(--muted);
  transition: transform .2s, color .2s;
}
.foldcard-arrow path {
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.foldcard-head:hover .foldcard-arrow { color: var(--brand); }
.foldcard.open .foldcard-arrow { transform: rotate(180deg); }

/* 详情页顶部的返回箭头（放在「内容详情」左边，2026-10-14 阿和定） */
/* 返回箭头：阿和 2026-10-14「再大一点」→ 28px 提到 34px（分两轮放大过：24 → 28 → 34） */
.topback {
  background: none; border: 0; padding: 0 10px 0 0; margin: 0;
  font-family: inherit; font-size: 34px; line-height: 1;
  color: var(--brand); cursor: pointer; vertical-align: -6px;
}
.topback:hover { opacity: .7; }
/* 作品列表的行尾 › 箭头：试过一版，阿和 2026-10-15「不要那个行尾箭头」→ 已撤，别再加回来。
   标题整格可点（`.opencell`）就够了。 */

/* 「剪之前先看这两句」：**桌面永远展开，手机才折起来**（2026-10-15 阿和要求）。
   open 的开关在 app.js 里按屏宽做（<details> 不带 open 时内容不渲染，CSS 盖不住）；
   这里只负责两种形态的**长相**：桌面隐藏折叠头；手机显示折叠头（品牌色 + chevron）。 */
.hintfold { margin-bottom: 14px; }
.hintfold > summary { display: none; }          /* 桌面：看不到折叠头 */
.hintfold > .hint:last-child { margin-bottom: 0 !important; }

/* ── 「详细图文示例」弹窗（2026-10-15 阿和：点按钮出弹窗，每步配图）──
   遮罩 + 居中卡片；手机上卡片占满全屏（客户主要用手机）。 */
.modal { position: fixed; inset: 0; z-index: 110; }
.modal-mask { position: absolute; inset: 0; background: rgba(15, 20, 28, .45); }
.modal-card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  /* 920px（2026-10-18 阿和：「弹窗能不能稍微大一点，不然看不清图片上的标记」）——
     手机上仍然是"满宽减 32px"，桌面才有变化。 */
  width: min(920px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  background: #fff; border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 18px 50px rgba(15, 20, 28, .22);
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  font-size: 15px; font-weight: 600;
}
.modal-x {
  background: none; border: 0; font-size: 22px; line-height: 1;
  color: var(--muted); cursor: pointer; padding: 0 4px; font-family: inherit;
}
.modal-x:hover { color: var(--text); }
.modal-body { overflow-y: auto; padding: 16px 18px 20px; }

/* 弹窗里的步骤块：步骤号 + 示意图 + 说明 */
.wsstep { margin-bottom: 22px; }
.wsstep:last-child { margin-bottom: 0; }
.wsstep-t {
  display: inline-block; background: var(--brand); color: #fff;
  font-size: 12.5px; font-weight: 600; border-radius: 999px;
  padding: 3px 12px; margin-bottom: 8px;
}
/* 图**铺满框内**（阿和 2026-10-18：「把我给你的图铺满在整个框内」）—— 去掉边框，图 100% 宽 */
.wsstep-fig { border-radius: 10px; overflow: hidden; background: #fafbfc; }
.wsstep-fig + .wsstep-fig { margin-top: 10px; }   /* 一步里两张图（选工作空间 + 选模型）时拉开一点 */
.wsstep-fig svg { display: block; width: 100%; height: auto; }
.wsstep-fig img { display: block; width: 100%; height: auto; cursor: zoom-in; }

/* 看大图：**半透明弹窗**（2026-10-18 阿和：「做一个半透明弹窗，不然这个放大后要拖动很麻烦」）。
   要点：图片 `max-width/max-height:100%` —— **整张缩放到屏幕内、不用拖动**；
   想看得更细就在手机上双指缩放（`touch-action: pinch-zoom`）。点任意处关。 */
.shotbox {
  position: fixed; inset: 0; z-index: 130;
  background: rgba(12, 18, 28, .62);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
}
.shotbox img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  border-radius: 10px; background: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  touch-action: pinch-zoom;
}
.shotbox-tip {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  color: #fff; font-size: 12.5px; background: rgba(255, 255, 255, .18);
  padding: 6px 14px; border-radius: 999px; pointer-events: none; white-space: nowrap;
}

/* ⚠️ 「点图放大」做过后被否了（阿和 2026-10-18：「不要放大截图，太丑了」）——
   现在是**完整原图直接铺进弹窗**，红框在原图里只是小小的位置提示，不抢视觉。别再加大图/全屏层。 */
.wsstep-cap { margin-top: 8px; font-size: 13.5px; color: var(--text); line-height: 1.65; }

/* 「复制」小按钮（口播稿 / 正文那一行的右侧，2026-10-14 阿和：手机用户要一键复制） */
.copysmall {
  float: right; background: none; border: 0; padding: 0;
  font-family: inherit; font-size: 12px; color: var(--brand); cursor: pointer;
}
.copysmall:hover { opacity: .7; }
.copysmall[disabled] { opacity: .5; cursor: default; }

.foldcard-body { display: none; margin-top: 12px; }
.foldcard.open .foldcard-body { display: block; }

/* 详情页里这个下拉卡片要跟上面的块（"怎么剪"那块底部有按钮行）**拉开一档**
   （2026-10-14 阿和：「创作辅助信息跟按钮贴在一起了，排版不对」） */
.card.foldcard { margin-top: 18px; }

/* 「怎么剪」块顶部那行摘要（原素材 → 剪完）
   替代原来那个三行 kv 表 —— 阿和 2026-10-14：「上面原素材、剪完、要剪掉这里对不齐」 */
.cutmeta { margin-top: 10px; font-size: 13px; color: var(--muted); }

/* 「建工作空间」的三步说明（2026-10-14） */
.wsm { margin: 10px 0 0; padding-left: 20px; font-size: 13px; line-height: 1.7; }
.wsm > li { margin-bottom: 10px; }
.wsm .hint { margin-top: 2px; }

/* 折叠块（2026-10-14 阿和：「详情页内容太多，客户不太需要看到这么多内容」）
   次要内容收起来 —— 客户主要看的是「AI 判断得对不对」（总评 + 剪点），其他按需展开 */
.fold { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.fold > summary { cursor: pointer; font-size: 13px; color: var(--muted); list-style: none; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: "\25B8 "; }
.fold[open] > summary::before { content: "\25BE "; }
.fold > summary:hover { color: var(--brand); }

/* 剪辑页「剪过的」列表（类名带 cutlist- 前缀，别用通用词） */
.cutlist { margin-top: 6px; }
/* 剪辑列表的一行：左边标题+信息，右边「归档」（2026-10-18 加的，之前这行只有"点进详情"，
   没有任何操作入口 —— 阿和连着两次说"没有归档按钮"）。 */
.cutlist-item { display: flex; align-items: flex-start; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); cursor: pointer; }
.cutlist-item:first-child { border-top: 0; }
.cutlist-body { flex: 1; min-width: 0; }
.cutlist-arch { flex: none; font-size: 12.5px; margin-top: 1px; }
.cutlist-item:hover .cutlist-t { color: var(--brand); }
.cutlist-t { font-size: 13.5px; line-height: 1.5; }
.cutlist-m { font-size: 12px; color: var(--muted); margin-top: 3px; }

/* 每张卡最底下的小字（口径 / 上限 / 没接线的提示词）：不抢眼，但翻到底一定能看到 */
.aimap-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); line-height: 1.85; }
.aimap-foot b { color: var(--text); font-weight: 600; }

/* 提示词：默认收起，点开看全文（一页摆 8 份全文会把页面撑到没法看） */
details.aimap-pw { margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; }
details.aimap-pw > summary {
  cursor: pointer; padding: 9px 12px; font-size: 12.5px; font-weight: 600; color: var(--ink3, #5b6472);
  list-style: none; display: flex; gap: 8px; align-items: baseline;
}
details.aimap-pw > summary::-webkit-details-marker { display: none; }
details.aimap-pw > summary::after { content: '展开'; margin-left: auto; font-size: 12px; color: var(--brand); font-weight: 400; }
details.aimap-pw[open] > summary::after { content: '收起'; }
details.aimap-pw > .pre { margin: 0 12px 12px; max-height: 380px; }
.aimap-pw-at { font-size: 11px; color: #98a0ab; font-weight: 400; }

.anchor { color: var(--brand); text-decoration: none; font-size: 12.5px; }
.anchor:hover { text-decoration: underline; }
/* 次要链接（归档这种不常点的）：别跟主操作抢眼 */
.anchor.quiet { color: var(--muted); margin-left: 10px; }
.anchor.quiet:hover { color: var(--text); }
/* 危险链接（彻底删除） */
.anchor.danger { color: #d64545; margin-left: 10px; }
.anchor.danger:hover { color: #b93a3a; }

/* 详情里的次级分组（主体内容 vs 创作辅助信息）：靠一条细线 + 小标题分层，不用提示语 */
.group { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.group > .gt { font-size: 12px; color: #98a0ab; letter-spacing: .4px; margin-bottom: 10px; }

/* 分段切换（作品详情的 稿件 / 复盘）：整块底色 + 白底选中块，比一排胶囊明显 */
.seg { display: inline-flex; background: #f1f3f6; border-radius: 10px; padding: 3px; gap: 2px; }
.seg button {
  border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13px;
  padding: 6px 18px; border-radius: 8px; cursor: pointer;
}
.seg button:hover { color: var(--text); }
.seg button.active { background: #fff; color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }

/* ── 内容区头部规范（全站统一，阿和 2026-09-16 定；以后开发沿用） ─────────────
   一行工具条 `.toolbar`，左右布局，**不再上下堆叠两组控件**：
     左 = 视图分段器 `.seg.seg-view`：换内容集（作品/已归档、灵感库/回收站）。
          白底卡片 + 品牌色实底选中 —— 做得醒目，入口必须一眼找到。
     右 = 下划线筛选 `.tabs.flat`：同一集合内过滤（全部/初稿/已发布、平台/类型）。
          轻量文字 + 选中下划线 —— 与左边形态不同，一眼分出层级。
   卡片里不再另写标题（数量都在控件上）。 */
.toolbar { display: flex; align-items: center; gap: 20px; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar .tabs { margin: 0; }
.toolbar .tabs.flat { padding-bottom: 1px; }

.seg.seg-view { display: inline-flex; flex: 0 0 auto; flex-direction: row; flex-wrap: nowrap; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); padding: 4px; }
.seg.seg-view button { padding: 7px 20px; font-size: 13.5px; }
.seg.seg-view button.active { background: var(--brand); color: #fff; font-weight: 600; box-shadow: none; }

/* 二级筛选：整行下划线 tab（放在工具条里时下划线只包住自己） */
.tabs.flat { gap: 20px; border-bottom: 1px solid var(--line); }
.tabs.flat .tab {
  border: 0; background: transparent; border-radius: 0; padding: 8px 0 10px;
  color: var(--muted); font-size: 13px;
}
.tabs.flat .tab:hover { background: transparent; color: var(--text); }
.tabs.flat .tab.active {
  color: var(--text); font-weight: 600; background: transparent; border-color: transparent;
  box-shadow: inset 0 -2px 0 var(--brand);
}
.tabs.flat .tab.dim { opacity: .45; }
/* 同一行里分组（平台 / 类型）之间的一条细竖线 */
.tdiv { width: 1px; height: 14px; background: var(--line); margin: 0 2px; align-self: center; }

/* 详情里的"发布附件"（话题标签 / 封面文案）：能直接复制的样子 */
/* 同一类问题一起改（2026-10-14 自查）：`attach` 也是 dt 小字 + dd 正文，同样要基线对齐 */
.attach { display: grid; grid-template-columns: 72px 1fr; gap: 8px 12px; align-items: baseline; margin-top: 12px; }
.attach dt { color: var(--muted); font-size: 12.5px; padding-top: 8px; }
.attach dd { margin: 0; }
.copyline {
  background: #fafbfc; border: 1px solid var(--line); border-radius: 9px;
  padding: 8px 11px; font-size: 13px; line-height: 1.7; word-break: break-word;
  user-select: all;   /* 一点就全选，方便直接复制去发布 */
}

/* 复盘回填：分项小输入框（比一行文本正式；都不是必填，填几个算几个） */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; }
.metric { display: block; }
.metric span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.metric input { padding: 7px 10px; font-size: 13px; }

.toast { font-size: 12.5px; color: var(--muted); }
.toast.ok { color: var(--ok); }
.toast.err { color: #d64545; }

.spinner {
  display: inline-block; width: 13px; height: 13px; vertical-align: -2px;
  border: 2px solid #cfd5de; border-top-color: var(--brand); border-radius: 50%;
  animation: spin .7s linear infinite; margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading { padding: 30px; text-align: center; color: var(--muted); font-size: 13px; }

/* 灵感库筛选条（平台 / 内容类型） */
.filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.filters .fl { font-size: 11.5px; color: var(--muted); margin-right: 2px; }
.chip {
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  padding: 4px 11px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12.5px;
}
.chip:hover { background: #fafbfc; }
.chip.active { background: var(--brand-soft); border-color: #cfe0ff; color: var(--brand); font-weight: 600; }
.chip.zero { opacity: .45; }

/* 卡片底部操作条 */
.bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.bar .spacer { flex: 1; }

/* 表格里的行内下拉（作品列表直接改状态，不用点进详情） */
select.mini {
  width: auto; min-width: 80px; padding: 4px 8px; font-size: 12.5px; border-radius: 8px;
}

/* 表格里的按钮：比卡片里的按钮小一号，免得列被撑破 */
.btn.sm { padding: 6px 11px; font-size: 12.5px; }

/* 表格里的勾选框（全局 input 宽度规则不含 checkbox，这里单列） */
input[type="checkbox"] { width: 14px; height: 14px; margin: 0; accent-color: var(--brand); cursor: pointer; }

/* 刚生成的选题高亮 */
tbody tr.fresh { background: #f4f8ff; }

/* ⚠️ 手机端适配统一写在 cloud.css 末尾（它后加载，能压过这里的桌面规则）。
   原来这里有一段 `@media (max-width:780px)`，把侧栏缩成 62px 小条 —— 已废弃：
   `.nav-item span { display:none }` 根本没生效（导航项文字没有 span 包裹），
   结果是文字全挤在 62px 里。2026-09-29 改成底部导航栏，见 cloud.css。
   新加移动端规则时请加到那边，别在这里加（两处会打架）。 */


/* ══════════ 2026-09-20 新增 ══════════ */

/* 灵感库搜索框（在筛选条最右） */
/* ⚠️ 必须写成 .tabs .insp-search：全局 input[type="text"]{width:100%} 的特异性更高，
   只写 .insp-search 会被它撑满整行（2026-09-20 截图里看到的） */
.tabs .insp-search {
  margin-left: auto; flex: 0 0 auto; width: 168px; padding: 6px 10px; font-size: 12.5px;
  border: 1px solid var(--line); border-radius: 8px;
  font-family: inherit; color: var(--text); background: #fff;
}
.tabs .insp-search:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

/* 从灵感带过来的爆款逻辑（创作页）—— 显眼一点，让客户知道这条确实用上了 */
.frominsp { margin: 10px 0 4px; padding: 10px 12px; background: var(--brand-soft); border-radius: 9px; }
.frominsp-t { font-size: 12px; color: var(--brand); display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.frominsp-b { font-size: 12.5px; color: var(--text); line-height: 1.7; }

/* 首登引导弹层（取名字 → 建人设卡） */
.ovl {
  position: fixed; inset: 0; z-index: 60; padding: 20px;
  background: rgba(16, 24, 40, .38);
  display: flex; align-items: center; justify-content: center;
}
.ovl-card {
  width: 460px; max-width: 100%; max-height: calc(100vh - 40px); overflow: auto;
  background: #fff; border-radius: 14px; padding: 22px 24px;
  box-shadow: 0 12px 40px rgba(16, 24, 40, .22);
}
.ovl-card h2 { margin: 0 0 4px; font-size: 16px; }
.wl-step { padding: 12px 0; border-top: 1px solid var(--line); }
.wl-step.first { border-top: 0; padding-top: 4px; }
.wl-t { font-size: 13.5px; font-weight: 600; margin-bottom: 8px; }

/* 顶部「还没建人设卡」引导条 */
.cardbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 10px 30px 0; padding: 9px 14px;
  background: #fdf7e8; border: 1px solid #f2e2bd; border-radius: 10px;
  font-size: 12.5px; color: #7a5a12;
}
.cardbar .btnlink { color: var(--brand); }
.cardbar .btnlink.quiet { color: var(--muted); margin-left: auto; }

/* 「已派稿」这类淡标：跟 .pill 同形，但更轻 */
.pill.ghost { background: #f1f3f6; color: var(--muted); font-weight: 400; }

@media (max-width: 780px) {
  .cardbar { margin-left: 16px; margin-right: 16px; }
  .insp-search { width: 130px; }
}