/* 人人制片厂 · 后台管理样式 */
:root {
  --bg: #f5f6f8;
  --card: #fff;
  --border: #e4e7ec;
  --text: #1f2937;
  --muted: #6b7280;
  --brand: #c8442c;
  --brand-soft: #fdf0ed;
  --ok: #15803d;
  --ok-soft: #f0fdf4;
  --warn: #b45309;
  --warn-soft: #fffbeb;
  --danger: #b91c1c;
  --danger-soft: #fef2f2;
  --info: #1d4ed8;
  --info-soft: #eff6ff;
}

/* ⭐ 2026-10-01:测试期开关关闭/开启时的红条警告
   ⚠️ 见 index.html 的注释 —— 测试期 SEC_CHECK_DISABLED=1(关审核) 与
      PAY_TEST_TINY=1(金额下限降到 0.01 元)都必须在提交微信审核前删掉,
      忘了就是上架事故/真金白银的事故。两条共用同一套样式。 */
#secCheckWarn,
#tinyPayWarn {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  padding: 10px 16px;
  background: var(--danger-soft);
  color: var(--danger);
  border-bottom: 2px solid var(--danger);
  font-size: 13px;
  line-height: 1.7;
}
#secCheckWarn strong,
#tinyPayWarn strong { font-weight: 700; }
#secCheckWarn code,
#tinyPayWarn code {
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(185, 28, 28, .10);
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.6 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* ---------- 登录闸门 ---------- */
#gate {
  position: fixed; inset: 0; background: var(--bg);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
#gate.hidden { display: none; }
.gate-box {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 28px 30px; width: 340px; box-shadow: 0 4px 20px rgba(0,0,0,.06);
}
.gate-box h1 { margin: 0 0 6px; font-size: 18px; }
.gate-box p { margin: 0 0 18px; color: var(--muted); font-size: 13px; }

/* ---------- 布局 ---------- */
header {
  background: var(--card); border-bottom: 1px solid var(--border);
  padding: 12px 20px; display: flex; align-items: center; gap: 14px;
  position: sticky; top: 0; z-index: 20;
}
header h1 { margin: 0; font-size: 16px; font-weight: 600; }
header .spacer { flex: 1; }
header .who { color: var(--muted); font-size: 12px; }

nav {
  background: var(--card); border-bottom: 1px solid var(--border);
  padding: 0 20px;
  position: sticky; top: 49px; z-index: 19;
}
/* ⭐ 2026-10-11 两级导航(见 index.html 的注释):上面一行选组,下面一行是组内 tab。
   ⚠️ 组按钮的规则要写在 `nav button` 之后 —— 靠 `.grp-btn` 更高的特异性覆盖掉 tab 的 padding/下边框。 */
nav .grp-row { display: flex; gap: 2px; padding-top: 6px; }
nav .grp-btn {
  background: none; border: none; border-bottom: none; padding: 7px 12px;
  border-radius: 7px 7px 0 0; font-size: 13.5px; color: var(--muted);
  cursor: pointer; white-space: nowrap; font-family: inherit;
}
nav .grp-btn:hover { color: var(--text); }
nav .grp-btn.active { background: var(--brand-soft, #f7ebe8); color: var(--brand); font-weight: 600; }
nav .grp-btn .grp-badge {
  display: inline-block; min-width: 17px; padding: 0 5px; margin-left: 6px;
  background: var(--brand); color: #fff; border-radius: 9px; font-weight: 400;
  font-size: 11px; line-height: 17px; text-align: center; vertical-align: 1px;
}
nav .grp-btn .grp-badge.zero { display: none; }
nav .tab-row { border-top: 1px solid var(--border); display: flex; }
nav .tabset { display: none; gap: 4px; }
nav .tabset.active { display: flex; }
nav button {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 11px 14px; font-size: 14px; color: var(--muted);
  cursor: pointer; white-space: nowrap; font-family: inherit;
}
nav button:hover { color: var(--text); }
nav button.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
nav button .badge {
  display: inline-block; min-width: 17px; padding: 0 5px; margin-left: 5px;
  background: var(--brand); color: #fff; border-radius: 9px;
  font-size: 11px; line-height: 17px; text-align: center; vertical-align: 1px;
}
nav button .badge.zero { display: none; }

main { padding: 20px; max-width: 1400px; }
section { display: none; }
section.active { display: block; }

/* ---------- 卡片 / 表格 ---------- */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 8px; margin-bottom: 16px; overflow: hidden;
}
/* ⭐ 2026-09-28 落点提示:从总览「到期待领取收益」点进来时,
   目标卡片(「自由共创需返还」)短暂描一圈品牌色,让运营一眼看到跳到了哪里。
   ⚠️ 类名由 admin.js 的 focusRefundCard() 加/摘(1.8s 后摘掉),不要改成 :target ——
      面板是异步渲染的,没有可用的锚点。 */
.card.flash { animation: cardFlash 1.8s ease-out; }
@keyframes cardFlash {
  0%   { box-shadow: 0 0 0 3px var(--brand); }
  70%  { box-shadow: 0 0 0 3px var(--brand); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.card-head {
  padding: 13px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.card-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.card-head .spacer { flex: 1; }
.card-body { padding: 16px; }
.card-body.tight { padding: 0; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
th { background: #fafbfc; font-weight: 600; color: var(--muted); white-space: nowrap; font-size: 12px; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #fafbfc; }
td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* ⚠️⭐ 2026-09-21 修错位:数字列 td.num 是右对齐,但表头 th 默认左对齐
   → 「贡献值 / 分得金额 / 占比」这类列表头与数据错位(用户实测反馈)。
   表头必须跟数据同对齐方式,否则视觉上像两列。 */
th.num { text-align: right; }
td.nowrap { white-space: nowrap; }
td.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
/* 表头也支持 mono(如「#」列),与 td.mono 同字号对齐 */
th.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }

/* ---------- 标签 ---------- */
.tag {
  display: inline-block; padding: 1px 7px; border-radius: 4px;
  font-size: 12px; line-height: 18px; white-space: nowrap;
}
.tag.grey { background: #f3f4f6; color: var(--muted); }
.tag.ok { background: var(--ok-soft); color: var(--ok); }
.tag.warn { background: var(--warn-soft); color: var(--warn); }
.tag.danger { background: var(--danger-soft); color: var(--danger); }
.tag.info { background: var(--info-soft); color: var(--info); }
.tag.brand { background: var(--brand-soft); color: var(--brand); }

/* ---------- 按钮 / 表单 ---------- */
button.btn {
  font: inherit; padding: 5px 11px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border); background: #fff; color: var(--text);
  white-space: nowrap;
}
button.btn:hover { background: #f9fafb; }
button.btn:disabled { opacity: .5; cursor: not-allowed; }
button.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
button.btn.primary:hover { background: #b03c26; }
button.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
button.btn.danger:hover { background: #991b1b; }
/* 微信绿(#07C160 是微信官方品牌绿)—— 退款/微信相关的操作用它,一眼区分于站内主色 */
button.btn.wx { background: #07C160; border-color: #07C160; color: #fff; }
button.btn.wx:hover { background: #06AD56; border-color: #06AD56; }
button.btn.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
button.btn.ok:hover { background: #12682f; }
button.btn.sm { padding: 3px 8px; font-size: 12px; }

.actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- 「处置 ▾」下拉(2026-09-26) ----------
   三个处置动作收进一个菜单,每项带一行副标题说明后果。
   ⚠️ position: fixed —— 表格容器有 overflow,用 absolute 会被裁掉;
      坐标由 admin.js 的 openDisposalMenu() 按按钮位置算。 */
.dd-menu {
  position: fixed; z-index: 400; min-width: 236px; max-width: 300px;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14); padding: 4px;
}
.dd-item { padding: 7px 10px; border-radius: 6px; cursor: pointer; }
.dd-item:hover { background: var(--bg); }
.dd-item .dd-t { font-size: 13px; color: var(--text); }
.dd-item .dd-s { font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
/* 彻底删除:红色 + 上方分隔线,防误点(全站唯一不可逆的处置) */
.dd-item.danger .dd-t { color: var(--danger); font-weight: 600; }
.dd-item.danger:hover { background: var(--danger-soft); }
.dd-sep { height: 1px; background: var(--border); margin: 4px 2px; }

input, select, textarea {
  font: inherit; padding: 6px 9px; border: 1px solid var(--border);
  border-radius: 6px; background: #fff; color: var(--text); width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }

/* 🔴 2026-10-03(用户要求):number 输入框去掉右边的上下三角(stepper)。
   理由:那个三角和滚轮是一个毛病 —— 只会【误触改值】,而运营全是手动输入数字,
   留着它只有风险没有便利(尤其「真实收益」这种真钱字段)。
   ⚠️ 只去【外观】:`type="number"` 保留 —— 手机端仍弹数字键盘、后端校验逻辑一字不动。 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
label.field { display: block; margin-bottom: 12px; }
label.field > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
label.field > span .req { color: var(--danger); }

.filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filters select, .filters input { width: auto; min-width: 130px; }

/* ---------- 提示 ---------- */
.empty { padding: 40px 16px; text-align: center; color: var(--muted); font-size: 13px; }
.hint { font-size: 12px; color: var(--muted); }
.alert { padding: 10px 13px; border-radius: 6px; margin-bottom: 14px; font-size: 13px; }
.alert.err { background: var(--danger-soft); color: var(--danger); }
.alert.ok { background: var(--ok-soft); color: var(--ok); }
.alert.warn { background: var(--warn-soft); color: var(--warn); }

/* ---------- 概览 ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.stat {
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  padding: 14px 16px; cursor: pointer;
}
.stat:hover { border-color: var(--brand); }
.stat .n { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat .n.zero { color: #cbd5e1; }
.stat .l { font-size: 12px; color: var(--muted); margin-top: 2px; }
.stat .s { font-size: 11px; color: var(--muted); margin-top: 4px; }

/* ---------- 弹窗 ---------- */
.modal-mask {
  position: fixed; inset: 0; background: rgba(17,24,39,.45);
  display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px;
}
.modal {
  background: var(--card); border-radius: 10px; width: 100%; max-width: 520px;
  max-height: 90vh; overflow: auto; box-shadow: 0 10px 40px rgba(0,0,0,.2);
}
.modal-head { padding: 15px 18px; border-bottom: 1px solid var(--border); font-weight: 600; }
.modal-body { padding: 18px; }
.modal-foot { padding: 13px 18px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; }

/* ⭐⭐ 2026-09-28 用户要求:「主题·默认分享标题模板、故事·默认分享标题模板 这个加个颜色
   区分一下,方便查看就可以了」。两套模板原来长得一模一样,运营容易看混,所以:
     · 蓝(--info)= 主题那套   · 红(--brand)= 故事那套(后台主色)
   三重标记(颜色只是其中之一,不只靠颜色区分):
     ① 字段标签本身变色加粗(.field-label-theme / .field-label-story)
     ② 整段左侧色条(.tpl-block-theme / .tpl-block-story)
     ③ 整段浅底色(复用后台已有的 -soft 变量,不新造颜色)
   ⚠️ 只动外观:值收集 / 点变量插入 / 保存逻辑一个字没改。 */
.field-label-theme { color: var(--info); font-weight: 600; }
.field-label-story { color: var(--brand); font-weight: 600; }
.tpl-block { border-left: 3px solid var(--border); border-radius: 0 6px 6px 0; padding: 10px 12px; }
.tpl-block-theme { border-left-color: var(--info); background: var(--info-soft); }
.tpl-block-story { border-left-color: var(--brand); background: var(--brand-soft); }

/* ---------- 总览 · 流程示意图(2026-09-28 用户要求) ----------
   用户原话:「总览里面可能需要可以简单示意一下命题共创、自由共创到结算的流程示意图
             下方空白区域?」
   ⚠️ 纯 HTML/CSS:小色块 + 箭头 + 简短文字。不引外部库、不用图片、不引 SVG。
   ⚠️ 颜色只用后台已有的 -soft 变量(与 .alert / .tag 同一套),不新造颜色;
      箭头线的 #cbd5e1 也是本文件里已有的颜色(.stat .n.zero)。
   ⚠️ 色块含义(卡头里也写了图例):蓝=系统自动推进 · 橙=补救期(可提前结束) ·
      红=等运营人工处理 · 绿=终态。 */
.flow-lane + .flow-lane { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border); }
.flow-lane-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.flow { display: flex; align-items: stretch; flex-wrap: wrap; gap: 10px; }
.flow-node {
  flex: 0 0 auto; min-width: 100px; max-width: 152px;
  border: 1px solid var(--border); border-radius: 8px; background: #fafbfc; padding: 7px 10px;
}
.flow-node .t { font-size: 13px; font-weight: 600; }
.flow-node .s { font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
/* 状态枚举值(mono)—— 与「主题管理」列表里的阶段/状态对齐,运营能直接对号入座 */
.flow-node .e {
  font-size: 11px; color: var(--muted); margin-top: 4px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.flow-node.sys { background: var(--info-soft); }
.flow-node.fix { background: var(--warn-soft); }
.flow-node.man { background: var(--brand-soft); }
.flow-node.end { background: var(--ok-soft); }

/* 箭头:一条横线 + 一个 CSS 三角形箭头(不用字符,避免不同系统字形不一样) */
.flow-arrow {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; min-width: 66px; max-width: 118px; padding: 0 2px;
}
.flow-arrow .lb { font-size: 11px; color: var(--muted); text-align: center; line-height: 1.4; }
/* 多行标签:一行一个 span(不用 <br>,见 admin.js 的 flowArrow) */
.flow-arrow .lb-ln { display: block; }
.flow-arrow .ar { display: flex; align-items: center; width: 100%; }
.flow-arrow .ln { flex: 1; height: 2px; background: #cbd5e1; }
.flow-arrow .hd {
  width: 0; height: 0; border-left: 7px solid #cbd5e1;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.flow-notes { margin-top: 9px; font-size: 12px; color: var(--muted); line-height: 1.75; }
.flow-notes b { color: var(--text); font-weight: 600; }
.flow-notes code {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px;
  background: #f3f4f6; border-radius: 4px; padding: 0 4px;
}

/* ---------- 详情键值 ---------- */
.kv { display: grid; grid-template-columns: 96px 1fr; gap: 6px 12px; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }

/* ---------- toast ---------- */
#toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #1f2937; color: #fff; padding: 10px 18px; border-radius: 8px;
  font-size: 13px; z-index: 200; opacity: 0; transition: opacity .2s;
  pointer-events: none; max-width: 80vw;
}
#toast.show { opacity: 1; }
#toast.err { background: var(--danger); }

/* ---------- 内容管理页(故事/主题/评论) ---------- */
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.toolbar input, .toolbar select { width: auto; min-width: 120px; }
.toolbar input.search { min-width: 200px; }

/* ⭐⭐ 2026-09-28 修「筛选框右边的三角形好像有点掉下来」(用户实测,订单中心) ——
   ----------------------------------------------------------------------------
   现象:同一行里几个筛选控件的【原生高度本来就不一样】(实测 Chromium:
     select 33px / 文本 input 36.4px / 日期 input 38.4px;checkbox 那种行内控件更小)。
   行容器是 `display:flex; align-items:center` → 各控件按【各自中心】对齐,
   于是矮的那个(下拉框)顶边比邻居低 2~3px、底边高 2~3px —— 视觉上就是「掉下来」。
   ⚠️ 下拉框尤其显眼:它里面没文字时,框里只剩一个原生箭头(三角形),
      运营看到的就是「一个孤零零的三角形,还比旁边的框矮一截/歪一点」。
      (订单中心那次两个下拉真的没文字 —— 那是另一个 bug,见 admin.js 的 mkSelect;
       但高度不齐是独立的、所有筛选页都有的问题。)
   修法:给筛选行的 select / input 一个【统一高度】,让顶边与中心都对齐。
     · 取 36px:与文本 input 的原生高度(14px 字号 × 1.6 行高 + 上下 padding 12px +
       上下边框 2px = 36.4px)基本一致 —— 不改变现有观感,只把两个「异类」拉齐。
     · 排除 checkbox/radio:它们是行内小控件,撑成 36px 会很难看(筛选行目前没有,
       但 `.toolbar` 是公用容器,将来别踩)。
   ⚠️ 只动外观:筛选条件、请求参数、导出逻辑一个字没改。 */
.filters select, .toolbar select,
.filters input:not([type=checkbox]):not([type=radio]),
.toolbar input:not([type=checkbox]):not([type=radio]) { height: 36px; }
/* 分隔线(竖条)—— ⭐ 2026-09-28:补 `.filters .sep`。
   原来只写了 `.toolbar .sep`,而订单中心的筛选行容器是 `.filters`
   → 那个 `<span class="sep">` 一条样式都没命中(实测宽高都是 0)= 分隔线根本看不见,
     「清除」与搜索框之间只剩一段空隙,整行看着像少了一块。
   两个容器共用同一条规则(同一种分隔线,不新造样式)。 */
.toolbar .sep, .filters .sep { width: 1px; height: 20px; background: var(--border); margin: 0 2px; }

/* ⭐⭐ 2026-10-05 用户实测:「下拉框右边的向下箭头有点贴着框的边边了」(13 处下拉框都这样)。
   ----------------------------------------------------------------------------
   🔴 实测数据(4 倍像素量出来的,不是目测):
      · 原生 select 箭头【右缘到右边框恒为 3.5px】—— 确实贴边。
      · ⚠️ 关键反直觉结论:`padding-right` 对原生箭头【完全无效】!
        量了 9 / 12 / 14 / 16 / 18 / 20 / 26px 七档,箭头到边框【一直是 3.5px】,
        padding 只把框撑宽(135→152px),箭头纹丝不动。
        ⇒ 「加 padding-right 让箭头离边远一点」这个常见做法在本浏览器上【不成立】,
          别再试这条路(本次实测已排除)。
   ⇒ 唯一有效的做法:【去掉原生箭头 + 自己画一个】——位置/间距/垂直居中全部可控,
     且跨浏览器一致(原生箭头在 Chrome / Safari 下形状与位置本来就不一样)。
   · 箭头形状照 Chrome 原生(10×6 实心三角 #6b7280),观感几乎不变,只是从 3.5px 挪到 10px。
   · `padding-right: 24px` 是给【文字】让位(箭头占 right 10~20px),避免文字钻到箭头底下。
   ⚠️ 只作用于 select —— 别顺手加到 input 上:普通输入框没有箭头,加了会凭空多出一个三角。
   ⚠️ 没有 `background` 简写覆盖:`input, select, textarea` 那条基础规则在前面(用 background:#fff),
      本条在后面 → background-image 生效(改顺序会让箭头消失,别把本条挪到基础规则之前)。 */
select {
  -webkit-appearance: none; appearance: none;
  padding-right: 24px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

/* ⭐⭐ 2026-10-05 用户实测:「主题搜索框右侧那个小三角贴下边框」(故事管理/评论管理/订单中心)。
   ----------------------------------------------------------------------------
   🔴 它是浏览器给 `input[list]` 画的【datalist 原生三角】,不在页面 DOM 里、CSS 没有选择器能选它。
      实测位置 = 输入框竖中心【下方 4.25px】、距右内缘 14px、尺寸 9.2×7.8px(文字本身是居中的)。
   🔴 三条走过的死路(都实测过,别再试):
      · `padding` 推不动它 —— 原生三角锚在内容盒上,加 padding 只把框撑宽(select 那次量过 7 档)。
      · `appearance: none` 藏不掉它 —— 实测与现状【逐像素相同】,再叠自绘会变【两个三角】。
      · `color: transparent`(想让三角跟着变透明 + `-webkit-text-fill-color` 救文字):
        本机 Chromium 里有效,但【用户浏览器里无效】(疑似 Safari 的三角用固定色)——
        线上实测变成【两个三角】。
   ✅ 最终做法:在原生三角的位置【压一块白底 + 自绘箭头】的覆盖层(.dl-cover)——
      物理盖住,与「浏览器为什么画它 / 用什么颜色画」无关;自绘箭头与 select 用同一套(right 9px center)。
      配套的 DOM 在 admin.js 的 mkThemePicker:`span.dl-wrap > input + span.dl-cover`。
   ⚠️ `padding-right: 26px` 是给覆盖层让位(覆盖层占右端 1~25px),否则文字会钻到箭头底下。 */
.dl-wrap { position: relative; display: inline-flex; }
.dl-cover {
  /* ⚠️ 宽度 42px 是【量出来的】,不能想当然:
     · 原生三角的位置 = 5px + padding-right(本机 Chromium 实测);
     · 用户浏览器里这个常数是 ~13.5px(从他截图反推)—— 比本机靠左 8.5px。
     所以覆盖层要够宽,把两种浏览器的落点都罩住:padding 26 → 本机 31px / 用户浏览器 39.5px。
     42px 宽(罩住右端 1~43px)两边都能盖住 ✓。 */
  position: absolute; right: 1px; top: 1px; bottom: 1px; width: 42px;
  background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E") no-repeat right 9px center;
  border-radius: 0 5px 5px 0;
  pointer-events: none;          /* 点击穿透 → 点箭头照样能展开候选 */
}
input[list] { padding-right: 26px; }

.pager { display: flex; gap: 8px; align-items: center; justify-content: flex-end;
  padding: 11px 16px; border-top: 1px solid var(--border); font-size: 13px; }
.pager .info { color: var(--muted); margin-right: auto; }

td.ellip { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.title-cell { max-width: 220px; font-weight: 600; }
td.title-cell .sub { font-weight: 400; color: var(--muted); font-size: 12px; }

.chips { display: flex; gap: 4px; flex-wrap: wrap; }
.chip { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 11px;
  background: #f3f4f6; color: var(--muted); white-space: nowrap; }

.detail-block { margin-bottom: 14px; }
.detail-block > .lbl { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.detail-block .val { background: #fafbfc; border: 1px solid var(--border);
  border-radius: 6px; padding: 9px 11px; font-size: 13px; max-height: 260px; overflow: auto;
  white-space: pre-wrap; word-break: break-word; }

.thumb-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.thumb-row img { width: 64px; height: 64px; object-fit: cover; border-radius: 5px; border: 1px solid var(--border); }

.checkbox-line { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; }
.checkbox-line input { width: auto; }
.checkbox-line span { font-size: 13px; }

.multiselect { border: 1px solid var(--border); border-radius: 6px; max-height: 170px;
  overflow: auto; padding: 8px 10px; background: #fff; }
.multiselect label { display: flex; align-items: center; gap: 7px; padding: 3px 0; font-size: 13px; }
.multiselect input { width: auto; }

/* ⭐ 2026-09-27:勾选框型字段(编辑故事的「署名」)—— 勾选框在左、说明在右,单行 */
label.field.field-check { display: flex; align-items: center; gap: 8px; }
label.field.field-check > span { margin-bottom: 0; }
label.field.field-check input { width: auto; }

/* ---------- 关联主题选择器(⭐ 2026-09-27 改成「方案 A」) ----------
   背景:原来是一个 170px 滚动框塞 57 个主题、不显示状态、不能搜索,
   用户实测把故事关联到了【已删除】的主题(#10020940)——它和进行中的长得一模一样。
   现在:上面「已选」标签一眼看到关联了哪几个(可点 × 摘掉),
        下面搜索 + 默认只列【可关联】的主题(进行中/审核中),
        要挂已结束/已删的得主动勾「显示全部」,且每行带状态徽标。 */
.tp-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; padding: 6px 8px;
  border: 1px dashed var(--border); border-radius: 6px; margin-bottom: 8px; background: #fcfcfd; }
.tp-chips .none { color: var(--muted); font-size: 12px; }
.tp-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--brand-soft);
  color: var(--brand); border: 1px solid #f3d5cf; border-radius: 14px; padding: 2px 9px; font-size: 12px; }
.tp-chip.dead { background: var(--danger-soft); color: var(--danger); border-color: #f5cfcf; }
.tp-chip .x { cursor: pointer; font-weight: 700; opacity: .65; }
.tp-chip .x:hover { opacity: 1; }
.tp-search { margin-bottom: 8px; }
.tp-list { max-height: 190px; overflow: auto; border: 1px solid var(--border);
  border-radius: 6px; background: #fff; }
.tp-row { display: flex; align-items: center; gap: 8px; padding: 6px 9px; cursor: pointer;
  border-bottom: 1px solid #f5f6f8; font-size: 13px; }
.tp-row:last-child { border-bottom: 0; }
.tp-row:hover { background: #fafbfc; }
.tp-row.on { background: var(--brand-soft); }
.tp-row .ck { flex: 0 0 14px; color: var(--brand); font-weight: 700; }
.tp-row .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-row .id { color: var(--muted); font-size: 11px; margin-left: 6px; }
.tp-row.dim { opacity: .5; }
.tp-empty { padding: 14px; text-align: center; color: var(--muted); font-size: 12px; }
.tp-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 7px; font-size: 12px; color: var(--muted); }
/* ⚠️ 这行文字不长但很容易被挤折行(实测:「显示全部状态(含已结算/已删除)」被折成 3 行、
   勾选框和文字错位)。两块都 nowrap,左边占满、右边固定。 */
.tp-foot label { display: flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; min-width: 0; }
.tp-foot > span { flex: 0 0 auto; white-space: nowrap; }

.modal.wide { max-width: 720px; }

/* ---------- 用户管理 ---------- */
/* 用户列表首列:头像色点 + 昵称 + 简介(与内容页的 title-cell 风格一致) */
.u-cell { display: flex; align-items: flex-start; gap: 7px; }
.u-dot {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  color: #fff; font-size: 12px; line-height: 22px; text-align: center;
  margin-top: 1px;
}
/* 详情弹窗里的「最近故事 / 最近贡献值」逐行 */
.detail-block .val .line { padding: 3px 0; }
.detail-block .val .line + .line { border-top: 1px dashed var(--border); }

/* 账号管理 / 操作日志(2026-09-19) */
/* 停用/锁定等弱化状态文字(项目原本没有 .muted) */
.muted { color: #8A857C; }

/* ⭐ 2026-09-25 举报列表里可点的「对象ID」—— 点了跳到对应管理页并自动按 ID 查找 */
.linkbtn { color: var(--brand); cursor: pointer; text-decoration: underline; }
.linkbtn:hover { opacity: .7; }

/* ⭐ 2026-10-02 协议/隐私正文编辑（结构化编辑器）
   一章一个盒子，标题行 + 若干段落；上移/下移/加段/删章都在标题行右侧 */
.sd-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 6px; }
.sd-bar .field { margin: 0; }
.sd-bar input[type="text"] { width: 150px; }
.sd-secs { margin: 10px 0; }
.sd-sec {
  border: 1px solid var(--border); border-radius: 6px;
  padding: 10px 12px; margin-bottom: 10px; background: #FCFBF9;
}
.sd-sechd { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.sd-idx {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: 11px;
  line-height: 20px; text-align: center;
}
.sd-h2 { flex: 1; font-weight: 600; }
.sd-p { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 6px; }
.sd-pin { flex: 1; font-size: 13px; line-height: 1.6; resize: vertical; }
.sd-actions { display: flex; gap: 10px; margin-top: 14px; }
.sd-warn { margin-top: 12px; padding: 8px 10px; background: #FFF7E6; border-radius: 4px; }
/* ⚠️ 用栅格而不是全角空格分隔 —— 否则「操作人」名字长短不同会把右边几列推歪。
   表头行 + 每行同一套列宽；操作列右对齐、两个链接之间留出间距（删除是破坏性
   操作，贴着「查看」容易误点）。 */
.sd-his { margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; }
.sd-his li {
  display: grid;
  /* ⚠️ 末尾那个 1fr 是【占位】列 —— 不加它时「操作人」的 minmax(…,1fr) 会把
     整行的剩余宽度全吸走，中间空出几百像素、右边几列挤成一团。
     加上占位列，五列就紧贴左侧排布。 */
  grid-template-columns: 62px 152px minmax(80px, 200px) 62px 104px 1fr;
  gap: 10px; align-items: center;
  padding: 5px 0; border-bottom: 1px dashed var(--border);
}
.sd-his li:last-child { border-bottom: 0; }
/* 章节数是数字，右对齐才好比大小；表头跟着一起右对齐 */
.sd-his li > span:nth-child(4) { text-align: right; }
.sd-his .sd-his-hd {
  color: var(--muted); font-size: 12px;
  border-bottom: 1px solid var(--border); padding-bottom: 6px;
}
/* ⚠️ 表头「操作」跟着链接一起【左】对齐 —— 五列表头统一左对齐才好扫；
   试过右对齐，视觉上像「表头悬在链接右边、没对上」。 */
.sd-his .sd-his-hd > span:nth-child(5) { text-align: left; }
/* ⚠️ 「查看」用中性色、「删除」才用危险红 —— 项目约定:砖红 --brand 是「强调」
   (如官方发起),危险红 --danger 才是删除/退款/驳回。两个都涂红会让运营
   把「查看」也读成「是不是有问题」。
   间距给到 18px：删除是破坏性操作，贴着「查看」容易误点。 */
.sd-his-ops { display: flex; gap: 18px; justify-content: flex-start; }
.sd-his a { color: var(--muted); }
.sd-his a:hover { color: var(--text); }
.sd-his a.sd-del { color: var(--danger); }
.sd-his a.sd-del:hover { opacity: .75; }