:root {
  --bg: #0f1115;
  --panel: #16181d;
  --panel-2: #1a1d23;
  --panel-3: #12141a;
  --border: #2c3038;
  --border-soft: #24282f;
  --text: #e6e9ef;
  --text-2: #cfd6e3;
  --muted: #8b93a1;
  --muted-2: #6d7684;
  --accent: #4b9cff;
  --accent-dim: #1f4f80;
  --accent-border: #2c6ba8;
  --ok: #57d97a;
  --warn: #ffc061;
  --bad: #ff7b7b;
  --purple: #c9a6ff;
  --shadow: 0 8px 22px rgba(0, 0, 0, .16);
  --radius: 8px;
}

* { box-sizing: border-box; }

[v-cloak] { display: none; }

body {
  margin: 0;
  font: 14px/1.6 -apple-system, "Segoe UI", "Microsoft YaHei", Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  letter-spacing: 0;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------- 顶栏 ---------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  padding: 10px clamp(14px, 2.4vw, 32px);
  background: rgba(22, 24, 29, .98);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255,255,255,.02), 0 8px 22px rgba(0,0,0,.12);
}

.brand { flex: none; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: 0; white-space: nowrap; }
.brand-logo { display: block; width: 27px; height: 27px; border-radius: 8px; }

/* 顶栏导航和分析页的预设标签共用。3px 时相邻两个胶囊几乎贴在一起，认不出是两颗 */
.tabs { flex: 1; min-width: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }

.tab {
  flex: none;
  padding: 6px 11px;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
}
.tab:hover { color: var(--text-2); background: var(--panel-2); }
.tab.active { color: #d9ecff; background: var(--accent-dim); border-color: var(--accent-border); }

.spacer { flex: 1; }

.stat-chip {
  padding: 3px 10px;
  color: var(--muted);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
}
.stat-chip b { color: var(--text); font-weight: 600; }

/* 顶栏右上角那个「用户名 · 号」：点开是一个小菜单（账号设置 / 退出登录）。
   本体是 button，外观靠上面的 .stat-chip 类盖掉（类选择器优先于元素选择器） */
.user-menu { position: relative; display: inline-flex; }

.user-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.5;
  white-space: nowrap;
}
.user-trigger:hover:not(:disabled) {
  color: var(--text-2);
  background: var(--panel-3);
  border-color: #515b6b;
}
.user-caret {
  width: 6px;
  height: 6px;
  flex: none;
  margin: -3px 0 0 1px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .15s, margin .15s;
}
.user-trigger[aria-expanded="true"] .user-caret { margin-top: 3px; transform: rotate(225deg); }

/* 透明遮罩：点空白处收起菜单，省掉给 document 挂全局监听 */
.menu-backdrop { position: fixed; inset: 0; z-index: 40; }

.user-menu-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 41;
  min-width: 168px;
  padding: 4px;
  color: var(--text-2);
  background: #1a1d23;
  border: 1px solid #39404d;
  border-radius: 7px;
  box-shadow: 0 14px 34px rgba(0,0,0,.42);
}
.user-menu-item {
  display: block;
  width: 100%;
  padding: 7px 10px;
  color: var(--text-2);
  background: transparent;
  border: 0;
  border-radius: 5px;
  font-size: 13px;
  text-align: left;
}
.user-menu-item:hover:not(:disabled) { background: #293443; }
.user-menu-item.danger { color: var(--bad); }
.user-menu-item + .user-menu-item { margin-top: 2px; }

/* 「账号设置」弹窗（点菜单里的「账号设置…」打开）。
   遮罩和卡片都固定在视口上：卡片居中，内容多时只有中间那段滚，头和脚一直看得见 */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, .55);
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 61;
  display: flex;
  flex-direction: column;
  /* 620：令牌明文 48 位等宽字一排刚好放得下，不用横向滚 */
  width: 620px;
  max-width: calc(100vw - 28px);
  max-height: min(86vh, 760px);
  color: var(--text-2);
  background: #1a1d23;
  border: 1px solid #39404d;
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  text-align: left;
}

.modal-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft);
}
.modal-head strong { color: var(--text); font-size: 14px; }

.modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  overflow-y: auto;
}

.modal-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--border-soft);
}

/* 弹窗里的账号概览：单独一块底，和下面的列表拉开层次 */
.acct-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--panel-3);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
}
.acct-account { display: flex; flex-direction: column; min-width: 0; }
.acct-account strong { color: var(--text); font-size: 13px; }

/* 三段：概览 / 头条号 / 插件令牌。段内竖向留白统一由 gap 管，段间加一条细线 */
.ws-section { display: flex; flex-direction: column; gap: 8px; }
.ws-section + .ws-section { padding-top: 14px; border-top: 1px solid var(--border-soft); }
.ws-section-head { display: flex; align-items: center; gap: 8px; }
.ws-section-head strong { color: var(--text); font-size: 13px; }
/* 说明文字是配角：太长就省略，别把右边的按钮挤走 */
.ws-section-head .muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 号 / 令牌的列表行 */
.ws-rows { display: flex; flex-direction: column; gap: 6px; }

.ws-row {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 6px;
}
.ws-row.active { background: #203754; }
/* 编辑中的那一行：整行描边 + 浅色背景，一眼看出在编辑谁 */
.ws-row.editing {
  background: #1b2a3a;
  outline: 1px solid var(--accent);
  outline-offset: 1px;
  box-shadow: 0 0 0 1px rgba(52, 130, 209, .25);
}
.ws-row.editing .ws-row-input {
  background: #0f1a26;
  border-color: var(--accent);
}
.ws-row.editing .ws-row-input:focus { outline: 1px solid var(--accent); }
.ws-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 9px;
  color: var(--text-2);
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 13px;
  text-align: left;
}
.ws-row.active .ws-row-main { color: #d9ecff; }
.ws-row-main:hover:not(:disabled) { background: #293443; }
.ws-row.active .ws-row-main:hover:not(:disabled) { background: #27486d; }
.ws-row.active .ws-row-main::after {
  content: '✓';
  margin-left: auto;
  color: var(--accent);
  font-weight: 700;
}
/* 批量补正文的逐条结果：失败的行标红；标题用省略号收，别把卡片撑宽 */
.capture-log {
  margin-top: 8px;
  padding: 6px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  max-height: 200px;
  overflow: auto;
}
.capture-line { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; font-size: 12px; }
.capture-mark { flex: none; color: #1f7a4d; }
.capture-line.bad .capture-mark { color: #b42318; }
.capture-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.capture-note { flex: none; color: var(--muted); }

/*
 * 「搜索词 ＋ 篇幅要求」这一行。
 *
 * 那个按钮不是「对这条清单做点什么」，而是「把这行文字拿走」——
 * 所以它和右边的按钮组（去百度搜／手工填写／不用这条／删）分开排，免得看成一类。
 */
.search-ask { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.search-suffix { color: var(--muted); font-size: 12px; }

/*
 * 「复制去问 AI」和它会跳到的平台竖着排：按钮在上，平台名紧贴按钮下沿。
 *
 * 不塞进设置弹窗，也不跟在按钮右边：右边还有「设置」，三个东西挤在一行时
 * 平台名会被当成另一个按钮；竖排之后「点这个 → 去那儿」是一组，扫一眼就懂。
 */
.ask-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.ask-target { color: var(--accent); font-size: 12px; line-height: 1.3; white-space: nowrap; }
.ask-target.empty { color: var(--muted); }

/* AI 平台列表：一行一个，默认那条底纹标出来 */
.ai-platform-list {
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  overflow: hidden;
}
.ai-platform-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-soft);
}
.ai-platform-row:last-child { border-bottom: 0; }
.ai-platform-row.default { background: var(--panel-3); }
.ai-platform-name { flex: none; }
/* 网址可能很长，占满中间剩下的宽度并省略，别把右边的按钮挤出去 */
.ai-platform-url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 写法提炼的样本挑选：列表限高滚动，不然几十条会把整张卡片撑得老长 */
.sample-picker {
  margin: 10px 0;
  padding: 12px 14px;
  background: var(--panel-3);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
}
.sample-list { max-height: 240px; overflow: auto; }
.sample-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; }

/*
 * 样本行上的批次标记：这条是哪一批抓来的。
 * flex: none 是关键 —— 标题那格是 flex:1，不锁住的话长批次名会把标题挤没。
 * 名字过长用省略号，完整内容在 title 里悬停看。
 */
.batch-tag {
  flex: none;
  max-width: 160px;
  padding: 1px 8px;
  color: var(--muted);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sample-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-row-edit { flex: none; }
/* 行内编辑：点「编辑」后这一行原地变成输入框，不额外插一行表单 */
.ws-row-input {
  flex: 1;
  min-width: 0;
  min-height: 32px;
  padding: 6px 9px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--bg-1);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
}
.ws-row-input:focus { outline: 1px solid var(--accent); }
.ws-row-input:disabled { opacity: .6; }

.ws-hint { padding: 6px 9px; color: var(--muted); font-size: 12px; }

/*
 * 危险区：清空当前号的数据。
 *
 * 用虚线上边框和上面的「编辑 / 新建」隔开：这是不可撤销的批量删除，
 * 不该和日常操作摆成一排凭手感点。标题用告警色，按钮只是文字变色
 * （实心红按钮太容易点错，这里要的是「看得见但不诱人」）。
 */
.ws-danger {
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-soft);
}
.ws-danger strong { color: var(--bad); }
.ws-danger .muted { display: block; margin-top: 4px; line-height: 1.6; }

/* 新建 / 编辑号的小表单（上下的间距由 .ws-section 的 gap 给） */
.ws-form { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-form > input[type="text"] { flex: 1; min-width: 120px; width: auto; }

/* 生成令牌：输入框吃满剩余宽度，「生成一枚」固定靠右，和下面的列表对齐 */
.ws-token-new { display: flex; gap: 6px; }
.ws-token-new > input[type="text"] { flex: 1; min-width: 0; width: auto; }
.ws-token-new > button { flex: none; }

/* 插件令牌行，三行固定分工，谁也不挤谁：
     第一行 备注（点一下改） + 绑的号 + 右侧操作
     第二行 创建 / 最近使用
     第三行 明文本身（整行给它，能选中、能复制） */
.ws-token {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 10px;
  background: var(--panel-3);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  font-size: 13px;
}
.ws-token:hover { border-color: #343b47; }
/* 撤销过的行淡下去：还在列表里（留痕），但一眼能看出它已经不干活了 */
.ws-token.revoked { opacity: .62; }
.ws-token-top { display: flex; align-items: center; gap: 8px; }
/* 备注和号名都可能很长：各自省略，别把右边的按钮顶出去 */
.ws-token-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 令牌绑在哪个号上：做成强调色胶囊，一眼看出这枚令牌归哪个号 */
.ws-token-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  color: #d9ecff;
  background: var(--accent-dim);
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.ws-token-chip-label {
  color: #9fc6ee;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
}
.ws-token-state { flex: none; color: var(--muted); }
.ws-token-meta { display: flex; flex-wrap: wrap; gap: 6px; }

/* 备注本身就是改名入口：看着是文字，点一下变输入框 */
.ws-token-label {
  padding: 0;
  color: var(--text-2);
  background: transparent;
  border: 0;
  font-size: 13px;
  text-align: left;
}
.ws-token-label:hover:not(:disabled) {
  color: var(--accent);
  background: transparent;
  text-decoration: underline;
}
.ws-token-value { display: flex; align-items: center; gap: 6px; }
.ws-token-value code {
  flex: 1;
  min-width: 0;
  padding: 4px 6px;
  overflow-x: auto;
  white-space: nowrap;
  color: var(--text);
  background: #14171c;
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  /* 等宽字体：令牌里 0/O、1/l 混在一起，不分清很容易抄错 */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  /* 点一下就整串选中，剪贴板 API 不可用时还能手动复制 */
  user-select: all;
}


/* ---------------- 通用控件 ---------------- */

.wrap { padding: 26px clamp(18px, 2.8vw, 40px) 64px; max-width: 1540px; margin: 0 auto; }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.card-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0;
}
.card-title .spacer { flex: 1; }

label.field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /*
   * 右 / 下留白是「这一排挤不挤」的关键：筛选项之间全靠它分隔。
   * 原来 12/8 时四组控件会糊成一片，行与行之间也贴得看不出分组。
   */
  margin: 0 14px 10px 0;
  color: var(--muted);
  font-size: 13px;
}

input, textarea, button {
  font: inherit;
  color: var(--text-2);
  background: #2a2f39;
  border: 1px solid #39404d;
  border-radius: 7px;
  /* 7/10：控件高度到 36px 左右，和下拉框一致，点起来不透不过气 */
  padding: 7px 10px;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .1s;
}
input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(75,156,255,.14); }
input::placeholder, textarea::placeholder { color: var(--muted-2); }
input[type="checkbox"] {
  width: auto;
  padding: 0;
  margin: 0;
  accent-color: var(--accent);
}
input[type="number"] { width: 110px; }
input[type="text"], input[type="search"] { width: 200px; }

button { cursor: pointer; }
button:hover:not(:disabled) { background: #333a46; }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { color: #d9ecff; background: var(--accent-dim); border-color: var(--accent-border); }
button.primary:hover:not(:disabled) { background: #265f99; }
button.danger { color: var(--bad); }
button.tiny { min-height: 30px; padding: 4px 10px; font-size: 12px; }

/* 各处「复制提示词」按钮统一外观：同一档尺寸、带浅边框 + 主题色文字，
   不再每个页面各自 inline 写 margin / padding，免得高矮轻重不一致 */
button.copy-prompt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  /* 配色与 button.primary（「生成提示词」）同一套，界面里蓝色按钮不分家 */
  color: #d9ecff;
  background: var(--accent-dim);
  border-color: var(--accent-border);
}
button.copy-prompt:hover:not(:disabled) {
  background: #265f99;
  border-color: var(--accent-border);
  color: #d9ecff;
}
button.copy-prompt:active:not(:disabled) { transform: translateY(1px); }

/*
 * 主操作按钮（「获取生成正文提示词」「保存」）：比普通按钮大一号。
 *
 * 一屏里按钮不少，靠尺寸 + 主色把「这一步最该点的那个」和统计、工具类按钮分开。
 * 规格写成类而不是行内样式：现在两处用同一档，以后要调整只改这一处，
 * 也不会再出现「上面那个大、下面那个小」的不一致。
 */
button.cta {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  border-radius: 8px;
}

/* 下拉框的菜单完全由页面绘制，避免 Windows 原生菜单露出亮色边框。 */
.app-select {
  position: relative;
  display: inline-block;
  min-width: 150px;
  max-width: 100%;
  color: var(--text-2);
  vertical-align: middle;
}
.app-select-trigger {
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  text-align: left;
}
.app-select-trigger:hover:not(:disabled) { border-color: #515b6b; }
.app-select-trigger:active:not(:disabled) { transform: none; }
.app-select.open .app-select-trigger {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(75,156,255,.14);
}
.app-select-value {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-select-value.placeholder { color: var(--muted-2); }
.app-select-chevron {
  width: 7px;
  height: 7px;
  flex: none;
  margin: -3px 2px 0 4px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .15s, margin .15s;
}
.app-select.open .app-select-chevron {
  margin-top: 3px;
  transform: rotate(225deg);
}
.app-select-menu {
  position: fixed;
  z-index: 1000;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 4px;
  color: var(--text-2);
  background: #1a1d23;
  border: 1px solid #39404d;
  border-radius: 7px;
  box-shadow: 0 14px 34px rgba(0,0,0,.42);
  overscroll-behavior: contain;
}
.app-select-option {
  position: relative;
  min-height: 32px;
  display: flex;
  align-items: center;
  padding: 6px 30px 6px 9px;
  border-radius: 5px;
  line-height: 1.45;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.app-select-option.active { background: #293443; }
.app-select-option.selected { color: #d9ecff; background: #203754; }
.app-select-option.selected.active { background: #27486d; }
.app-select-option.selected::after {
  content: '✓';
  position: absolute;
  right: 10px;
  color: var(--accent);
  font-weight: 700;
}
.app-select-empty { padding: 8px 9px; color: var(--muted); }

textarea {
  width: 100%;
  min-height: 90px;
  resize: vertical;
  line-height: 1.6;
}

.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.row.tight { gap: 8px; }

/* 预设专属的输入框：跟着选中的预设出现 / 消失 */
.preset-fields {
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--panel-3);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
}
.preset-fields .field { margin: 0 0 10px 0; }
.preset-fields .field:last-child { margin-bottom: 0; }

/*
 * 分析范围那一排筛选（作者 / 时间 / 体裁 / 最多送）。
 *
 * 单独给一套 flex + gap，而不是继续靠 label.field 的 margin 分隔。
 *
 * 间距要给得比直觉大：这一排的控件（下拉框、数字框）长得几乎一样，
 * 组内「标签→控件」只有 8px，组间如果不拉到 28px 以上，四组会被看成一片。
 * 用「组内紧、组间松」的对比来划分，而不是靠边框或底色。
 */
.scope-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 28px;
  margin-bottom: 6px;
}
.scope-row > label.field { margin: 0; }

/* 「作者」在赛道分析里是固定值（按平台推荐池统计），做成一个不可点的锁定块 */
.scope-locked {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 12px;
  color: var(--muted);
  background: var(--panel-3);
  border: 1px dashed var(--border);
  border-radius: 7px;
  font-size: 12px;
}

/* 纵向表单共享标签列，长短标签不会挤动输入框。 */
label.field.aligned-field {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 12px;
  margin-right: 0;
}
.aligned-field > .field-label {
  flex: 0 0 132px;
  padding-top: 7px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.aligned-field > input, .aligned-field > textarea { flex: 1; min-width: 0; width: auto; }
.aligned-field > .app-select { min-width: 180px; }
.preset-fields > .field-note { margin-left: 144px; }

/* ---------------- 表格 ---------------- */

.table-wrap { overflow: auto; border: 1px solid var(--border); border-radius: 8px; }

/*
 * 内容列表：表格自己滚，而不是整页跟着变长。
 * 高度按视口算（上下留出筛选栏、卡片标题和分页的位置），最小留 340px 保底；
 * th 本来就是 sticky，滚动容器从页面变成这里之后，表头就会吸在表格顶部。
 */
.items-table {
  max-height: max(340px, calc(100vh - 340px));
}

/* 平台表里的域名：等宽 + 压暗，和中文描述分开，扫一眼能认出是网址 */
.table-wrap code {
  padding: 1px 5px;
  background: #24282f;
  border-radius: 4px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
}

/* 一键采集：标题、支持平台和链接输入保持清楚的层级。 */
.collect-card { padding: 24px 26px; }
.collect-title { margin-bottom: 8px; }
.collect-platforms { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.collect-platform {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; color: var(--text-2); background: var(--panel-3);
  border: 1px solid var(--border-soft); border-radius: 999px;
  font-size: 12px; font-weight: 500; white-space: nowrap; text-decoration: none;
  cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.collect-platform:hover { color: var(--text); border-color: var(--accent); background: var(--panel-2); }
.collect-platform:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.platform-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--ok); }
.platform-dot.toutiao { background: #f17b68; }
.platform-dot.baijiahao { background: #4b9cff; }
.platform-dot.netease { background: #d9435f; }
.platform-dot.tencent { background: #2d9cf0; }

/* 数据页顶部的平台提示：圆点复用上面这套平台色 */
.platform-tip .card-title { margin-bottom: 2px; }
.platform-tip-list {
  display: grid; gap: 6px;
  margin: 10px 0 0; padding: 0; list-style: none;
}
.platform-tip-list li {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
  font-size: 13px; color: var(--text-2);
}
/* 只有平台名是可点的链接，后面的说明文字不参与跳转 */
.platform-tip-link {
  flex: none; color: var(--text); font-weight: 600; text-decoration: none;
}
.platform-tip-link:hover { color: var(--accent); text-decoration: underline; }
.platform-tip-list li span { min-width: 0; color: var(--muted); }
.collect-intro { margin: 0 0 20px; color: var(--muted); font-size: 13px; }
/* 平台采集范围：自动换列展示实际选择器，窄屏下自然排列为单列。 */
.collect-selectors { margin-bottom: 22px; padding: 16px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--panel-3); }
.collect-selectors-title { color: var(--text-2); font-size: 13px; font-weight: 600; }
.collect-selectors dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px 20px; margin: 14px 0; }
.collect-selectors dl > div { min-width: 0; }
.collect-selectors dt { margin-bottom: 5px; color: var(--muted); font-size: 12px; }
.collect-selectors dd { margin: 0; color: var(--text-2); font-size: 13px; overflow-wrap: anywhere; }
.collect-selectors p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.collect-form { align-items: flex-end; gap: 12px; }
.collect-form .field { display: flex; flex-direction: column; gap: 7px; min-width: 160px; margin: 0; }
.collect-form .field.grow { flex: 1; min-width: 220px; }
.collect-form .field label { color: var(--text-2); font-size: 12px; font-weight: 500; }
.collect-form textarea { width: 100%; min-width: 0; min-height: 128px; resize: vertical; line-height: 1.7; }
.collect-submit { min-height: 42px; padding: 8px 18px; color: #fff; background: var(--accent); border-color: var(--accent); font-weight: 600; white-space: nowrap; }
.collect-submit:hover:not(:disabled) { background: #4389dc; }
.link-btn { background: none; border: none; color: var(--accent); padding: 0; cursor: pointer; font: inherit; }
.link-btn:hover { text-decoration: underline; }

/* 采集结果列表：每篇文章独立成卡片；标题行展示平台、标题和操作，错误记录用红色边线标出。 */
.collect-log { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.collect-log-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: clamp(280px, 56vh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 8px 2px 2px;
}
.collect-log-head {
  display: flex; align-items: center; justify-content: flex-start; gap: 12px;
  min-height: 38px; margin-bottom: 2px; padding: 0 2px;
  font-size: 13px; color: var(--muted);
}
.collect-log-head .tiny {
  min-height: 34px; padding: 6px 14px; color: var(--text-2);
  background: var(--panel-2); border-color: #3a414d; border-radius: 9px;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.collect-log-head .app-select { flex: none; width: 240px; min-width: 180px; max-width: 280px; }
.collect-log-head > .tiny { margin-left: auto; }
.collect-log-head .tiny:hover:not(:disabled) {
  color: #fff; background: #343b47; border-color: #596477;
}
.collect-log-head .tiny:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.collect-log-row {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px; background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: 9px;
  font-size: 12px;
}
.collect-log-row.fail { border-left: 2px solid var(--danger); }
.collect-log-row:not(.fail) { border-left: 2px solid var(--ok); }
.collect-log-line { display: flex; align-items: center; gap: 9px; min-height: 30px; }
.collect-log-line .spacer { flex: 1; }
.collect-log-title {
  min-width: 0; padding: 0; color: var(--text); background: none; border: 0;
  font: inherit; font-weight: 600; line-height: 1.55; text-align: left; overflow-wrap: anywhere;
}
.collect-remove-failed { flex: none; color: #f2b8bd; border-color: #6b343b; background: #2a191c; }
.collect-remove-failed:hover:not(:disabled) { color: #fff; border-color: #a34d57; background: #452329; }
button.collect-log-title { cursor: pointer; }
button.collect-log-title:hover { color: #d9ecff; }
button.collect-log-title:focus-visible { border-radius: 3px; outline: 2px solid var(--accent); outline-offset: 3px; }
.collect-source-badge {
  flex: none; padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px;
  color: var(--text-2); background: var(--panel-2); font-size: 11px; line-height: 1.5;
}
.collect-source-badge.sohu { color: #ffbd69; border-color: #73522c; background: #30261a; }
.collect-source-badge.toutiao { color: #ff9b8d; border-color: #70413b; background: #2c201f; }
.collect-source-badge.baijiahao { color: #8bc5ff; border-color: #365a7d; background: #1c2936; }
.collect-source-badge.netease { color: #ff9aaa; border-color: #713b47; background: #302025; }
.collect-source-badge.tencent { color: #88caff; border-color: #355c78; background: #1d2933; }
.collect-log-preview { color: var(--muted); word-break: break-all; }
/* 原文链接独占一行，长地址自动换行，避免挤占标题及操作按钮。 */
.collect-original-link { color: var(--muted); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.collect-original-link a { color: var(--accent); text-decoration: none; }
.collect-original-link a:hover { text-decoration: underline; }
/* 重写操作放在正文对照区外的整行区域，标题输入和 JSON 粘贴不会挤压左右阅读窗口。 */
.collect-rewrite-controls { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; padding: 14px 16px; border: 1px solid var(--accent-border); border-radius: 8px; background: var(--panel-2); }
.collect-rewrite-title-tools { display: flex; align-items: center; gap: 10px; }
/* 标签与输入框一起限宽；输入框填满该区域，复制按钮紧随其后，不被推到整行末尾。 */
.collect-rewrite-title-tools .field { flex: 0 1 820px; min-width: 0; margin: 0; }
.collect-rewrite-title-tools .field > span { flex: none; }
.collect-rewrite-title-tools .field > input { flex: 1; width: auto; min-width: 0; }
.collect-rewrite-title-tools > button { flex: none; min-height: 36px; }
.collect-rewrite-materials-details { font-size: 13px; }
.collect-rewrite-materials-details > summary { cursor: pointer; color: var(--text-2); }
.collect-rewrite-controls .collect-rewrite { margin: 0; padding: 0; border: 0; }
.collect-rewrite-controls .collect-manual-step > summary { padding: 4px 0; }
/* 重写稿与原文分区展示，长文及素材分析各自滚动，避免撑满结果列表。 */
.collect-rewrite { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.collect-rewrite-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.collect-rewrite details { margin: 12px 0; font-size: 13px; }
.collect-rewrite summary { cursor: pointer; color: var(--text-2); }
.collect-rewrite-materials { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow-y: auto; margin-top: 12px; line-height: 1.8; }
.collect-rewrite-error { color: var(--danger); font-size: 13px; }
.collect-rewrite-manual textarea { width: 100%; margin: 10px 0; resize: vertical; line-height: 1.7; }
.collect-rewrite-manual .field { display: flex; flex-direction: column; margin: 16px 0 8px; }
/* 原文和重写流程独立分栏；窄屏回到单列，确保输入框和文章都能完整阅读。 */
.collect-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; margin-top: 18px; }
.collect-workspace.collect-workspace-original-only { grid-template-columns: minmax(0, 1fr); }
.collect-original-panel, .collect-new-panel { min-width: 0; padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-2); }
.collect-new-panel { border-color: var(--accent-border); }
.collect-panel-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.collect-panel-heading > div { display: flex; align-items: center; gap: 10px; }
.collect-panel-heading h3 { margin: 0; font-size: 16px; color: var(--text); }
.collect-panel-tag { padding: 3px 8px; border-radius: 5px; background: var(--panel-3); color: var(--muted); font-size: 11px; }
.collect-panel-tag.new { background: var(--accent-dim); color: var(--accent); }
.collect-panel-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.collect-compare-label { margin: 0; min-height: 18px; }
.collect-compare-actions { min-height: 30px; align-items: center; }
.collect-workspace .collect-log-text { padding: 18px; font-size: 14px; line-height: 1.9; }
.collect-workspace .collect-compare-text {
  /* 两边固定同一阅读窗口高度，滚动条只在正文区内出现，便于逐段对照。 */
  height: clamp(360px, 52vh, 760px);
  min-height: 0;
  max-height: none;
  overflow: auto;
  overscroll-behavior: contain;
  /* 程序按比例同步 scrollTop，浏览器平滑滚动会造成第二次动画叠加。 */
  scroll-behavior: auto;
}
.collect-workspace .collect-rewrite { margin-top: 18px; padding-top: 18px; }
.collect-workspace .collect-rewrite-result { margin-top: 0; padding-top: 0; border-top: 0; }
.collect-manual-step > summary { padding: 0 0 12px; font-weight: 600; }
.collect-manual-step .collect-rewrite-head { margin-top: 12px; }
.collect-workspace .collect-rewrite-head { flex-wrap: wrap; }
.collect-rewrite-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 260px; margin-top: 20px; padding: 24px; border: 1px dashed var(--accent-border); border-radius: 8px; color: var(--muted); text-align: center; line-height: 1.8; }
.collect-rewrite-empty strong { color: var(--text-2); font-size: 15px; }
.collect-rewrite-empty p { margin: 12px 0 4px; }
.collect-log-line { flex-wrap: wrap; }
@media (max-width: 1000px) {
  .collect-workspace { grid-template-columns: minmax(0, 1fr); }
  .collect-original-panel, .collect-new-panel { padding: 16px; }
}
@media (max-width: 600px) {
  .collect-rewrite-title-tools .field { flex: 1; flex-direction: column; align-items: stretch; gap: 6px; }
  .collect-rewrite-title-tools > button { align-self: flex-end; }
}
.collect-toggle { flex: none; padding: 5px 11px; color: #d9ecff; background: var(--accent-dim); border-color: var(--accent-border); white-space: nowrap; }
.collect-toggle:hover:not(:disabled) { background: #285f96; }

/* 展开的正文阅读区：至少占视口高度的 52%，最多占 68%（上限 760px）；超长文章在区内滚动，避免撑长整页。 */
.collect-log-body { margin-top: 4px; }
.collect-log-text {
  /* min-height 保证短文也有足够阅读空间；max-height 限制长文高度，overflow 提供内部滚动。 */
  max-height: min(68vh, 760px); min-height: 52vh; overflow: auto;
  padding: 8px;
  background: #12141a; border: 1px solid var(--border); border-radius: 6px;
  white-space: pre-wrap; word-break: break-word;
  color: var(--text); font-size: 12px; line-height: 1.7;
}
.collect-log-actions { display: flex; justify-content: flex-end; margin-bottom: 6px; }

/* 原文位置的内联图：按 [图N] 标记还原，块级独占一行，宽度随容器，
   防盗链可能裂图，先原样显示再说 */
.collect-log-inline-img {
  display: block;
  max-width: 100%;
  margin: 8px auto;
  background: #1a1d23;
  border: 1px solid var(--border); border-radius: 6px;
}

@media (max-width: 560px) {
  .collect-card { padding: 16px; }
  .collect-title { align-items: flex-start; gap: 10px; }
  .collect-title > .spacer { display: none; }
  .collect-platforms { flex-basis: 100%; }
  .collect-intro { margin-bottom: 16px; }
  .collect-form { align-items: stretch; gap: 12px; }
  .collect-form .field, .collect-form .field.grow { width: 100%; min-width: 0; }
  .collect-submit { width: 100%; }
  .collect-log-row { padding: 9px 10px; }
  .collect-log-line { align-items: flex-start; flex-wrap: wrap; }
  .collect-log-line > .spacer { display: none; }
  .collect-log-title { flex: 1; min-width: 120px; }
  .collect-toggle { margin-left: auto; }
  .collect-log-head { align-items: stretch; flex-wrap: wrap; }
  .collect-log-head > span { flex: 1 0 100%; }
  .collect-log-head .app-select { flex: 1; width: auto; max-width: none; }
  .collect-log-head > .tiny { margin-left: 0; }
}

table { width: 100%; border-collapse: collapse; font-size: 13px; }

th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px;
  color: var(--muted);
  text-align: left;
  font-weight: 500;
  white-space: nowrap;
  background: #1b1f27;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
}
th:hover { color: var(--text-2); }
th.sorted { color: var(--accent); }
th.plain { cursor: default; }
th.plain:hover { color: var(--muted); }

td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-2);
  text-align: left;
  vertical-align: middle;
}

tbody tr:hover { background: #191c22; }
tbody tr.open { background: #191f28; }

th.num, td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.title-cell { max-width: 460px; }
.title-text { color: var(--text); }

/*
 * 内容列表里，标题是整行唯一不勾选的地方：点它展开详情（行的其它位置都是勾选）。
 * 所以这里的高亮是实指 —— 变色就是告诉你「这块能点，动作跟别处不一样」。
 */
.title-text:hover { color: var(--accent); cursor: pointer; }

/*
 * 标题前的小三角，和标题同一个动作，只是更显眼一点。
 * 它和标题都指向展开，不冲突：一个给习惯点标题的人，一个给看不出标题能点的人。
 */
.title-toggle {
  background: transparent;
  border: 0;
  padding: 0 4px 0 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}
.title-toggle:hover { color: var(--accent); }

.muted { color: var(--muted); }
.tiny-text { font-size: 12px; }
.text-bad { color: var(--bad); }
.nowrap { white-space: nowrap; }

.badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
}
.badge.article { color: #8fb8e8; background: #1b2532; }
.badge.thread { color: #e8c98f; background: #2c2618; }
.badge.video { color: #c9a6ff; background: #22182f; }
/* 来源徽章跟一键采集页的平台色保持一致：头条橙红、搜狐绿 */
.badge.home { color: #f17b68; background: #2c201f; }
.badge.sohu { color: var(--ok); background: #16291f; }
.badge.tencent { color: #2d9cf0; background: #1d2933; }
/* 补过正文的标记。用的是和「体裁」同一套胶囊，但颜色跟别处不一样 ——
   它标的是数据状态（能当写法样本了），不是内容属性，得能一眼区分开 */
.badge.full-text { color: #7ddba8; background: #16291f; }
.badge.profile { color: #f17b68; background: #2c201f; }
.badge.idea { color: var(--warn); background: #2c2618; }
.badge.draft { color: #8fb8e8; background: #1b2532; }
.badge.published { color: var(--ok); background: #1d3b25; }
.badge.dropped { color: var(--muted); background: #24282f; }
.badge.ok { color: var(--ok); background: #1d3b25; }
.badge.fail { color: var(--bad); background: #3d1f22; }

.detail-row td { background: var(--panel-3); padding: 12px 16px; }

/* 批次表格：整行可点（勾选），备注列自适应宽度 */
.pick-row { cursor: pointer; }
.ellipsis { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batch-table .cell-input { width: 100%; }

.kv { display: grid; grid-template-columns: 130px 1fr; gap: 6px 14px; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; word-break: break-word; }

/* ---------------- 分页 ---------------- */

.pager { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--muted); font-size: 13px; }

/* ---------------- AI 结果 ---------------- */

.analysis-box {
  max-height: 70vh;
  overflow: auto;
  padding: 16px 20px;
  background: var(--panel-3);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.md { color: var(--text-2); }
.md h1, .md h2, .md h3, .md h4 { color: var(--text); margin: 18px 0 8px; line-height: 1.4; }
.md h1 { font-size: 19px; }
.md h2 { font-size: 17px; border-bottom: 1px solid var(--border-soft); padding-bottom: 6px; }
.md h3 { font-size: 15px; }
.md h4 { font-size: 14px; color: var(--text-2); }
.md p { margin: 8px 0; }
.md ul, .md ol { margin: 8px 0; padding-left: 22px; }
.md li { margin: 3px 0; }
.md strong { color: var(--text); }
.md code {
  padding: 1px 5px;
  background: #24282f;
  border-radius: 4px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12.5px;
}
.md pre {
  padding: 10px 12px;
  overflow: auto;
  background: #0d0f13;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
}
.md pre code { padding: 0; background: transparent; }
.md blockquote {
  margin: 8px 0;
  padding: 4px 12px;
  color: var(--muted);
  border-left: 3px solid var(--border);
}
.md table { margin: 10px 0; font-size: 13px; }
.md th {
  position: static;
  cursor: default;
  background: var(--panel-2);
  border: 1px solid var(--border);
}
.md td { border: 1px solid var(--border-soft); }
.md hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }

/* ---------------- 历史列表 ---------------- */

.history-item {
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  margin-bottom: 6px;
  cursor: pointer;
  background: var(--panel-2);
}
.history-item:hover { border-color: var(--accent-border); }
.history-item.active { border-color: var(--accent-border); background: #191f28; }
/* 数据基准：后面几步都用它，得在一串长得差不多的记录里一眼认出是哪条。
   左侧那道粗条是主要信号 —— 光靠一个小徽章，扫一眼很容易漏掉 */
.history-item.is-baseline {
  border-color: var(--accent-border);
  box-shadow: inset 3px 0 0 var(--accent-border);
}
.history-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.history-scope { color: var(--muted); font-size: 12px; margin-top: 2px; }

/* ---------------- 提示词预览 ---------------- */

.prompt-peek {
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--panel-3);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
}
.prompt-peek > summary {
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}
.prompt-peek > summary:hover { color: var(--text-2); }

/*
 * 写稿素材这一块要比其它折叠区（提示词预览之类）显眼得多。
 * 其它折叠区是「想看再看」，这一块是每次按「按标题写正文」之前都该确认的：
 * 有没有素材、这一轮带走几条，直接决定正文里有多少真东西。
 * 所以给它一条强调色的左边框，标题加粗提亮，条数做成角标。
 * （单独的 .research-peek 规则写在 .prompt-peek 之后，同权重时以后者为准）
 */
.research-peek { border-left: 3px solid var(--accent); }
.research-peek > summary .peek-title {
  margin-right: 6px;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
}
.research-peek > summary .badge { font-weight: 500; }

.prompt-text {
  max-height: 320px;
  overflow: auto;
  margin: 8px 0 0;
  padding: 10px 12px;
  color: var(--text-2);
  background: #0d0f13;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 字段旁边的写法说明与示例 */

.field-note {
  margin: 0 0 10px;
  padding: 10px 12px;
  background: var(--panel-3);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
}
.field-note .prompt-text { margin-top: 6px; }

/* ---------------- 提示条 ---------------- */

.banner {
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 12px;
  font-size: 13px;
}
.banner.info { color: #bcd6f5; background: #16212e; border: 1px solid #24405c; }
.banner.ok { color: #b9edc7; background: #16281c; border: 1px solid #245c33; }
.banner.err { color: #f5bcbc; background: #2a1618; border: 1px solid #5c2429; }

.spin {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--muted-2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty { padding: 30px; text-align: center; color: var(--muted-2); }

/* ---------------- 细节优化与响应式 ---------------- */

:root { color-scheme: dark; }
.login-shell { width: calc(100% - 32px); max-width: 420px; margin: 9vh auto 0; }
.page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin: 0 0 22px; }
.eyebrow { margin: 0 0 4px; font-size: 10px; color: var(--muted); letter-spacing: 0; }
h1 { margin: 0; font-size: 24px; letter-spacing: 0; line-height: 1.45; }
.page-description { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.workflow-hint { font-size: 12px; color: var(--muted); white-space: nowrap; padding-bottom: 3px; }

/* 页头右侧：工作流提示 + 数据页的「刷新数据」，竖排右对齐 */
.page-heading-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.notification { position: fixed; bottom: 24px; right: 24px; z-index: 70; display: flex; align-items: center; gap: 16px; max-width: min(560px, calc(100vw - 32px)); margin: 0; }
.notification button { flex: none; background: transparent; border-color: currentColor; color: inherit; }
/* 采集地址校验失败是阻止操作的错误，必须在视口中央明确展示，不能依赖右下角提示条。 */
.collect-error-backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, .58); }
.collect-error-modal { width: min(620px, calc(100vw - 32px)); max-height: min(78vh, 620px); overflow: hidden; color: var(--text-2); background: #1a1d23; border: 1px solid #6b343b; border-radius: 10px; box-shadow: 0 24px 60px rgba(0, 0, 0, .58); }
.collect-error-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; color: #ffd6d8; border-bottom: 1px solid #4e292e; }
.collect-error-head button { flex: none; color: inherit; background: transparent; border-color: currentColor; }
.collect-error-body { max-height: 48vh; margin: 0; padding: 16px; overflow: auto; color: #f2c6c9; font: inherit; font-size: 13px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.collect-error-foot { display: flex; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid #4e292e; }
/*
 * 筛选区：左边是「筛选条件」，右边是「怎么显示」，中间一条竖线。
 *
 * 原来七项平铺成一行，复选框和「每页」夹在条件中间 —— 它们不筛数据，
 * 看着却像两个漏了标签的条件。分成两组之后，一眼能看出哪些在筛、哪些在显示。
 */
.filter-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 22px;
}
.filter-fields,
.filter-display {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 22px;
}
.filter-display {
  gap: 14px 18px;
  padding-left: 20px;
  border-left: 1px solid var(--border-soft);
}

/*
 * 控件宽度分三档：下拉 / 数字 / 搜索。
 * 不给宽度时它们各宽各的（下拉 150、数字框 90、搜索框 200 多），一排过去像没对齐。
 */
.filter-fields > label.field > .app-select { min-width: 148px; }
/* 内容列表上方的批次下拉。文案带时间/来源/条数/备注，比普通下拉长，给宽一点 */
.items-toolbar { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.items-toolbar .app-select { min-width: 240px; }
.items-toolbar .batch-note-field input { width: min(360px, 32vw); min-width: 200px; }
.items-toolbar > button { margin-bottom: 10px; }
.filter-fields > label.field > input[type="number"] { width: 116px; }
.filter-fields > label.field:has(input[type="search"]) { width: 300px; }
.filter-display > label.field > .app-select { min-width: 104px; }

/*
 * 放不下时两组改成上下排：分隔线从竖线换成横线。
 *
 * 阈值是按实测定的，不是拍的：五个筛选项（148+148+148+116+250）+ 组间距 22
 * + 右边那组 233 ≈ 1153 的卡片内宽，而卡片内宽 = 视口 - 90（实测：视口 1000 → 910）。
 * 所以视口窄于约 1243 时两组就会换行，而换行之后那根竖线落在第二行最左边，
 * 看着像坏了 —— 提前把它换成横线，让「分组」这件事一直成立。
 */
@media (max-width: 1240px) {
  .filter-display {
    width: 100%;
    padding-left: 0;
    padding-top: 14px;
    border-left: none;
    border-top: 1px solid var(--border-soft);
  }
}

@media (max-width: 1200px) {
  .topbar > .stat-chip { display: none; }
  .topbar .user-menu .stat-chip { display: inline-flex; }
}

/* 窄屏：上面那几档固定宽度让位，一律占满所在的那一列 */
@media (max-width: 560px) {
  .filter-fields > label.field > .app-select,
  .filter-display > label.field > .app-select,
  .filter-fields > label.field:has(input[type="search"]) { min-width: 0; width: 100%; }
  .filter-fields > label.field > input[type="number"] { width: 100%; }
}
/* 竖排：标签在上、控件在下。gap 从 6 提到 8，标签才不像贴在控件上 */
.filter-grid label.field { flex-direction: column; align-items: flex-start; margin: 0; gap: 8px; }
.filter-grid input, .filter-grid .app-select { min-height: 36px; }
/*
 * 搜索框和按钮必须排成一行。
 * 原来用 grid 把按钮钉到第二列，宽度只由内容撑开，窄到「搜索」两个字竖着折行，
 * 看着像个坏掉的控件。改成 flex：输入框吃掉剩余宽度，按钮按内容宽度且不换行。
 */
.filter-grid .search-row { display: flex; gap: 6px; width: 100%; }
.filter-grid .search-row input[type="search"] { flex: 1; min-width: 0; }
.filter-grid .search-row button { flex: none; white-space: nowrap; }

/*
 * 筛选区里的复选框。这一排其它字段都是「标签在上、控件在下」，它没有标签，
 * 所以干脆把它做成**控件本体**的样子：和下拉框同高、落在同一条底边上。
 *
 * 原来只靠 align-self + margin-bottom: 10px 去对位，而那个 margin 是早先
 * 「靠 label.field 的 margin 分隔」那套布局留下的 —— 在 flex + gap 的容器里
 * 它等于把整块往上顶 10px，于是复选框落在控件行的上方，和旁边的下拉框错开半行。
 */
.filter-grid label.check-field {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  align-self: flex-end;
  min-height: 36px;
  padding: 0 12px;
  background: var(--panel-3);
  border: 1px solid var(--border);
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
}
.filter-grid label.check-field:hover { border-color: var(--accent-border); }
.count-label { color: var(--muted); font-size: 12px; font-weight: 400; }
tbody tr.selected { background: #192737; }
.title-link { text-align: left; color: var(--text); background: transparent; border: 0; padding: 0; line-height: 1.7; }
.title-link:hover:not(:disabled) { color: var(--accent); background: transparent; }
.article-editor { scroll-margin-top: 100px; }

/*
 * 正文编辑器（TinyMCE）：让它看起来像页面里的一块，而不是一个外来的白框。
 * 皮肤用的是自带的 oxide-dark，这里只补边框和圆角 —— 不覆盖它的内部样式，
 * 否则升级版本时一堆选择器会悄悄失配。
 */
.article-editor .tox-tinymce {
  border: 1px solid var(--border-soft);
  border-radius: 8px;
}
.article-editor .tox .tox-editor-header { border-radius: 7px 7px 0 0; }
.article-editor .tox-tinymce:focus-within { border-color: var(--accent-border); }
/* 编辑器自己的字数统计和状态栏：和页面其余的小字同一档 */
.article-editor .tox-statusbar { font-size: 12px; }
/* 「分析范围」卡片：跨预设流转后滚到它上面。和编辑器同一个值，让出的顶栏高度一致 */
.analyze-card { scroll-margin-top: 100px; }

/*
 * 编辑器里跟在输入框下面的说明文字。
 * 左边距 = 标签列宽 132px + 标签与输入框的间距 12px，正好和输入框左边缘对齐 ——
 * 不缩进的话它会贴着卡片左边，看上去像下一行的标签，也说不清是哪一项的说明。
 * 上边距给负值是为了抵消字段自带的 10px 下边距，不然留白太大、和字段脱开。
 */
.field-hint {
  margin: -5px 0 12px 144px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

/*
 * 写稿素材表。
 * 备注是多行框，行会比别的表格高得多，所以单元格统一顶对齐 ——
 * 表格默认是垂直居中，那样标题和右边的按钮会浮在行中间，很难看。
 * 另外把 textarea 的全局 min-height(90px) 压小：备注常常只有一句话，
 * 空着也占四五行就太浪费了；真正长的时候由 v-autogrow 撑高。
 */
.research-table td { vertical-align: top; }

/* 素材备注框：清单里和素材表里用同一个类，长一样。
   全局 textarea 的 min-height 是 90px，对"常常只有一句话"的备注太占地方；
   真写长了由 v-autogrow 撑高 */
.research-note {
  display: block;
  width: 100%;
  min-height: 38px;
  margin: 0;
}

/*
 * 备注的占位条：整条虚线框可点，比一个小按钮好点中得多。
 * 点一下变成上面的输入框，鼠标移开（失焦）自动保存。
 */
.note-placeholder {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 5px 8px;
  text-align: left;
  color: var(--muted-2);
  background: transparent;
  border: 1px dashed var(--border-soft);
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}
.note-placeholder:hover { color: var(--text-2); border-color: var(--border); }

/* 可点标题右边的展开三角。
   之前这条规则只写在 .research-title 下面，结果清单里那个三角是裸的（没边距、颜色跟正文一样），
   现在改成通用类，凡是带 title-link 的地方都长一样 */
.toggle-caret {
  margin-left: 6px;
  color: var(--muted);
  font-size: 11px;
}

/* 被取消勾选的那条整行压暗，一眼能看出这一轮不带它 */
.research-row-off .title-link { color: var(--muted-2); }

/* 展开的是收录进来的文章正文（常常一整篇），
   所以比别的 prompt-text 给得高得多，字体也换回正文字体 —— 等宽字体读长文太费劲。
   清单里和素材表里都用这个类。
   注意：这个 max-height 会夹住 v-autogrow 设的行内高度，改一处要连 v-autogrow 的值一起改 */
.research-text {
  max-height: 920px;
  font-family: inherit;
  font-size: 13px;
}

/*
 * 待查清单（从正文骨架里解析出来的大纲第二节）。
 * 点「去百度搜」会把某一条设成「正在查的」，之后收录的素材都挂它身上 ——
 * 所以正在查的那条必须有明显的底色和左边框，不然你不知道素材会挂到哪儿。
 */
.checklist {
  margin-bottom: 12px;
  padding: 12px 14px;
  background: var(--panel-3);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
}
.checklist-items { margin: 0; padding: 0; list-style: none; }
/*
 * 一条清单里挤着标题、段落引用、状态徽章和最多四个按钮，
 * 内边距和条目间距给足才不会糊成一片（原来是 6/8 + 2px）。
 */
.checklist-items li {
  padding: 9px 11px;
  border-left: 3px solid transparent;
  border-radius: 6px;
}
.checklist-items li + li { margin-top: 4px; }
.checklist-items li.done { opacity: .72; }
/* 展开的那条给个底色，展开前后一眼能看出区别（没有素材的条目尤其需要） */
.checklist-items li.expanded { background: #1a1e25; }
.checklist-items li.active {
  background: #1b2532;
  border-left-color: var(--accent);
}
/* 划掉不查的：压暗 + 划掉标题，让剩下的条目一眼看清 */
.checklist-items li.skipped { opacity: .42; }
.checklist-items li.skipped .checklist-what { text-decoration: line-through; }

/* 点清单项展开：这条清单收来的素材，用一条竖线挂在它下面 */
.checklist-hits {
  margin: 8px 0 2px 6px;
  padding-left: 12px;
  border-left: 2px solid var(--border-soft);
}
.checklist-hit + .checklist-hit { margin-top: 10px; }
.checklist-what { font-size: 13px; }
/* 手工填写区：和清单条目同一根竖线挂下来，但用虚线框+浅底标成「正在填」 */
.manual-fill {
  margin: 8px 0 2px 6px;
  padding: 12px;
  border: 1px dashed var(--accent-border);
  border-radius: 8px;
  background: #121820;
}
.editor-actions { position: sticky; bottom: 12px; z-index: 5; padding: 12px 14px; margin-top: 12px; background: rgba(26,29,35,.97); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); }
.row > input, .row > .app-select { max-width: 100%; min-width: 0; }
label.field .app-select { max-width: 100%; }
.tab { white-space: nowrap; }
th.sorted::before { content: '↕ '; }
input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.card-title .tiny, .pager .tiny { min-height: 28px; }
.empty { line-height: 1.9; border: 1px dashed var(--border); border-radius: 8px; background: var(--panel-3); }

.banner { box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.card > .card-title:first-child { min-height: 24px; }
.field > input, .field > .app-select, .field > textarea { min-width: 0; }
.table-wrap { box-shadow: inset 0 1px 0 rgba(255,255,255,.02); }
tbody tr { transition: background .14s; }
.pager { justify-content: center; padding-top: 4px; }
button.primary { box-shadow: 0 4px 12px rgba(31,79,128,.22); }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------------------------
 * 写稿素材面板：把留白和控件高度放大一号
 *
 * 这一块是「写稿前最后确认一次素材」的地方，而一条清单里挤着标题、段落引用、
 * 条数徽章、四个操作按钮，下面还有一整行搜索词。按表格那套紧凑参数排
 * （按钮 2px 内边距、条目间距 4px），一眼扫过去分不清哪几个按钮属于哪一条。
 *
 * 所以这里单独放大：按钮做到 30px 高（和别处的下拉框同高，也点得中），
 * 条目内边距、条目间距、标题行与搜索词行之间各加一档。
 * 规则全部限定在 .research-peek 里 —— 别处的表格、筛选区还是原样的紧凑参数。
 * ------------------------------------------------------------------ */
.research-peek { padding: 14px 16px; }
.research-peek .tiny {
  min-height: 30px;
  padding: 5px 11px;
}
/* 条数徽章跟着按钮一起长高：并排的两个控件一高一矮，看着像没对齐 */
.research-peek .badge { padding: 4px 10px; }
.research-peek .row.tight { gap: 10px; }

/* 清单：容器内边距加一档，每条之间也给足，让一条清单像一张小卡片 */
.checklist { padding: 14px 16px; }
.checklist-items li { padding: 15px 14px; }
.checklist-items li + li { margin-top: 12px; }

/*
 * 搜索词那一行。
 * 上边距必须有：原来它紧贴标题行，看着像是标题行多出来的一截，
 * 其实那是「点右边按钮会把这句话发出去」的独立一行。
 * 对齐改成 center —— 加号、说明文字和 30px 高的按钮比高度差太多，
 * 按基线对齐会让整行往上飘。
 */
.checklist .search-ask {
  margin-top: 16px;
  gap: 12px;
  align-items: center;
}

/*
 * 竖排那一组（按钮 + 平台名）比一行文字高。右边的「设置」如果跟着居中，
 * 会掉到复制按钮下沿去，看着像另一排的控件 —— 顶对齐，和按钮齐平。
 */
.checklist .search-ask > button { align-self: flex-start; }

/* 展开的「已收 N 条」和手工填写区：别贴着标题行，和清单那条竖线的间距也放宽一点 */
.checklist-hits { margin: 10px 0 4px 6px; }
.checklist-hit + .checklist-hit { margin-top: 12px; }
.manual-fill { margin: 10px 0 4px 6px; padding: 14px; }

/*
 * 配图清单。
 * 搜索词用等宽 + user-select:all：点一下整段选中，直接 Ctrl+C 拿去搜，
 * 不用小心翼翼地拖选区。缩略图按 3:2 裁，地址是网页链接（渲染不出图）时
 * 由 JS 藏掉，不会留下碎图标。
 */
.image-search-term {
  padding: 1px 6px;
  color: var(--text-2);
  background: #0d0f13;
  border-radius: 4px;
  font-size: 12.5px;
  user-select: all;
}
.image-plan-row { flex-wrap: wrap; gap: 8px; align-items: center; }
.image-plan-thumb {
  width: 72px;
  height: 48px;
  object-fit: cover;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  background: #0d0f13;
}

@media (max-width: 860px) {
  .topbar { align-items: center; flex-wrap: wrap; }
  .topbar .spacer { display: none; }
  .stat-chip { display: none; }
  /* 但账号入口得留着：菜单里有「账号设置」和「退出登录」，窄屏下它是唯一的账号操作入口 */
  .user-menu .stat-chip { display: inline-flex; }
  .tabs { order: 3; flex-basis: 100%; }
  .wrap { padding-top: 14px; }
  .card { padding: 17px; }
  .kv { grid-template-columns: 92px 1fr; }
  .workflow-hint { display: none; }
}

@media (max-width: 560px) {
  body { font-size: 13px; }
  .login-shell { width: auto; max-width: none; margin: 9vh 16px 0; }
  .login-shell > .card { width: 100%; min-width: 0; }
  .login-shell .card-title { align-items: flex-start; }
  .login-shell .card-title .spacer { display: none; }
  .login-shell .card-title .tiny-text { flex-basis: 100%; }
  .topbar { padding: 9px 12px; }
  .wrap { padding: 10px 10px 42px; }
  .card { border-radius: 8px; padding: 14px; margin-bottom: 12px; }
  .card-title { flex-wrap: wrap; }
  label.field { width: 100%; margin-right: 0; }
  label.field > input, label.field > .app-select, label.field > textarea { flex: 1; width: auto; }
  input[type="text"], input[type="search"], input[type="number"] { width: auto; }
  .table-wrap { margin-left: -2px; margin-right: -2px; }
  th, td { padding: 8px; }
  .analysis-box { padding: 12px 14px; }
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .kv dd { margin-bottom: 6px; }
  .page-heading { margin: 4px 2px 16px; }
  h1 { font-size: 21px; }
  .filter-grid label.field { width: calc(50% - 10px); }
  .filter-grid label.field:has(input[type="search"]) { width: 100%; }
  .filter-grid label.field > input, .filter-grid label.field > .app-select { width: 100%; }
  .field > .app-select[style] { min-width: 0 !important; }
  .editor-actions { bottom: 8px; }
  .article-editor { scroll-margin-top: 115px; }
  .analyze-card { scroll-margin-top: 115px; }
  .notification { right: 16px; bottom: 16px; }
  label.field.aligned-field { flex-direction: column; gap: 6px; }
  .aligned-field > .field-label { flex: none; padding-top: 0; }
  label.field.aligned-field > input, label.field.aligned-field > textarea,
  label.field.aligned-field > .app-select { flex: none; width: 100%; }
  .preset-fields > .field-note { margin-left: 0; }
  /* 窄屏下标签移到输入框上方，说明文字的缩进也跟着取消 */
  .field-hint { margin-left: 0; }
}

/* ---------------- 管理后台 ---------------- */

/* 顶栏入口单独一个颜色：它只在管理员登录时出现，和写稿的页签不是一类 */
.admin-tab { color: var(--purple); }
.admin-tab.active { color: var(--text); }

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 6px;
}

.admin-stat {
  padding: 12px 14px;
  background: var(--panel-3);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.admin-stat .num {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
}

.admin-stat .lbl {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

/* 需要盯的数字：快到期的用黄，已经出事的用红 */
.admin-stat.warn .num { color: var(--warn); }
.admin-stat.danger .num { color: var(--bad); }

/* 令牌到期时间输入框：够放「2026-12-31T23:59」就行 */
.admin-time {
  width: 170px;
  padding: 5px 8px;
  font-size: 12px;
}

.admin-table td .tiny + .tiny { margin-left: 4px; }

/* 用户名可点：点一下展开 / 收起这个人的详情 */
.admin-user-link {
  color: var(--accent);
  cursor: pointer;
}
.admin-user-link:hover {
  color: #7fc0ff;
  text-decoration: underline;
}

/* 用户详情：展开在用户行下面，里面再放一张令牌表 */
.admin-detail-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.admin-detail .empty { padding: 16px; }
.admin-detail .table-wrap { margin-top: 4px; }
.admin-detail .admin-table { background: transparent; }

/* 文章列表顶部工具条：批量删除 / 刷新 / 搜索 */
.article-toolbar { margin-bottom: 10px; }

/* 用户列表的「正常 / 已停用」筛选 */
.admin-user-filter { margin-bottom: 10px; }

.seg {
  display: inline-flex;
  padding: 2px;
  background: var(--panel-3);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.seg-btn {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--muted);
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 6px;
}
.seg-btn:hover:not(:disabled) {
  background: var(--panel-2);
  color: var(--text-2);
}
.seg-btn.active,
.seg-btn.active:hover:not(:disabled) {
  background: var(--panel-2);
  color: var(--text);
}
.seg-btn b {
  margin-left: 2px;
  color: var(--accent);
  font-weight: 600;
}

/* 邀请码生成表单：窄屏会自动换行 */
.admin-invite-form {
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.admin-invite-form label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.admin-num {
  width: 76px;
  padding: 5px 8px;
  font-size: 12px;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

/* ---------------- 首页 ---------------- */

.home-hero { position: relative; }

.home-hero::before {
  /* 左侧一道强调色，和工作台里其它「这一步很重要」的卡片保持同一套语言 */
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(var(--accent), var(--purple));
  border-radius: var(--radius) 0 0 var(--radius);
}

.home-hero-title {
  margin: 4px 0 8px;
  font-size: 22px;
  letter-spacing: 0;
  line-height: 1.35;
}

.home-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

/* 首页几个入口：图标 + 文字（+ 箭头）。
   第一个是主操作（蓝底），其余是次级（描边），尺寸统一、悬停有反馈；
   「下载采集」没有箭头 —— 它不跳页，是直接下文件 */
.home-jump-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text-2);
  transition: background .16s, border-color .16s, color .16s, transform .16s, box-shadow .16s;
}

.home-jump-btn svg { flex: none; opacity: .85; }

.home-jump-btn .jump-arrow {
  margin-left: 2px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  transition: transform .16s, color .16s;
}

.home-jump-btn:hover:not(:disabled) {
  border-color: var(--accent-border);
  background: #202734;
  color: var(--text);
  transform: translateY(-1px);
}
.home-jump-btn:hover:not(:disabled) .jump-arrow {
  transform: translateX(3px);
  color: var(--accent);
}

/* 下载插件时按钮先禁掉，避免连点发一堆请求 */
.home-jump-btn:disabled {
  opacity: .6;
  cursor: default;
}

.home-jump-btn.primary {
  color: #eaf3ff;
  background: linear-gradient(135deg, #2f6fb3, #1f4f80);
  border-color: var(--accent-border);
  box-shadow: 0 6px 16px rgba(31, 79, 128, .28);
}
.home-jump-btn.primary svg,
.home-jump-btn.primary .jump-arrow { color: #cfe4ff; opacity: 1; }
.home-jump-btn.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #3a80c9, #265f99);
  border-color: #3f83c8;
  color: #fff;
  box-shadow: 0 8px 20px rgba(31, 79, 128, .36);
}

/* 使用流程：圈号 + 分隔线，读起来像一条流水线 */
.home-flow {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.home-flow li {
  position: relative;
  padding: 7px 0 7px 34px;
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.7;
  border-top: 1px solid var(--border-soft);
}
.home-flow li:first-child { border-top: 0; }

.home-flow li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--accent);
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}
.home-flow li b { color: var(--text); }

/* 免责声明：弱化，但保证能看清 */
.home-disclaimer {
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}
.home-disclaimer li { margin: 4px 0; }
.home-disclaimer b { color: var(--text-2); }

@media (max-width: 560px) {
  .home-hero-title { font-size: 19px; }
  .home-flow li { padding-left: 30px; }
  /* 窄屏下三个入口各占一行，箭头推到最右，点起来不挤 */
  .home-jump-btn { flex: 1 1 100%; }
  .home-jump-btn .jump-arrow { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}