* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; background: #f5f6f8; color: #1f2329; font-size: 14px; }
.hidden { display: none !important; }
/* ★ 表单控件必须显式继承字体（2026-09-24 实测发现的真 bug）：
   浏览器规则是"表单控件不继承父级 font-family"，只有 button 被单独修过 →
   结果**所有 input / select / textarea 都在用系统默认 Arial**，日期框甚至是 monospace，
   跟旁边的中文标签（Microsoft YaHei）明显不是一套字体。这一条一改，全站控件统一。 */
button, input, select, textarea, optgroup, option { font-family: inherit; }
button { cursor: pointer; }

/* 登录 */
.login-wrap { display: flex; align-items: center; justify-content: center; height: 100vh;
  background: linear-gradient(135deg, #fff5f2 0%, #eef2ff 100%); }
.login-card { width: 360px; background: #fff; border-radius: 12px; padding: 32px 28px;
  box-shadow: 0 8px 30px rgba(0,0,0,.08); }
.login-logo { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.login-logo span { color: #e1251b; }
.login-sub { color: #8a9099; font-size: 12px; margin-bottom: 22px; }
.login-card input { width: 100%; padding: 11px 12px; border: 1px solid #dfe3e8; border-radius: 6px;
  margin-bottom: 12px; font-size: 14px; outline: none; }
.login-card input:focus { border-color: #e1251b; }
.login-card button { width: 100%; padding: 11px; background: #e1251b; color: #fff; border: 0;
  border-radius: 6px; font-size: 15px; font-weight: 600; }
.login-card button:hover { background: #c81f16; }
.err { color: #e1251b; font-size: 12px; margin-top: 10px; min-height: 16px; }

/* 顶栏 */
.top { height: 56px; background: #fff; border-bottom: 1px solid #e6e8eb; display: flex;
  align-items: center; padding: 0 16px; gap: 12px; position: sticky; top: 0; z-index: 10; flex-wrap: nowrap; overflow-x: auto; }
.brand { font-weight: 700; font-size: 16px; white-space: nowrap; flex-shrink: 0; }
.brand span { color: #e1251b; }
.top-info { margin-left: auto; color: #5a6069; font-size: 12.5px; display: flex; gap: 12px; flex-wrap: nowrap; white-space: nowrap; flex-shrink: 0; }
.top-actions { display: flex; gap: 8px; flex-shrink: 0; white-space: nowrap; }
/* ★ 2026-09-28（规范 §二-17）：顶栏控件统一 28px（原来动作按钮是 33px，比账号筛选/时间范围高 5px）；
   主按钮改主色蓝（基类红是给"删除/危险"用的，顶栏的"立即刷新"不是危险动作）；
   定高时按 §二·补 13 同时清掉上下内边距，否则 13px 中文字会被上下裁掉。 */
.top-actions .btn { height: 28px; box-sizing: border-box; padding: 0 12px; line-height: 26px; }
.top-actions .btn:not(.ghost) { background: #2563eb; color: #fff; }
.top-actions .btn:not(.ghost):hover { opacity: .92; }
.top-actions .btn.ghost { color: #374151; }
.btn { background: #e1251b; color: #fff; border: 0; border-radius: 5px; padding: 7px 12px; font-size: 13px; white-space: nowrap; }
.btn:hover { opacity: .9; }
.btn.ghost { background: #fff; color: #333; border: 1px solid #dfe3e8; }

/* 布局
   侧栏固定（2026-09-20 用户："左侧菜单栏不管网页怎么下拉，始终固定显示"）：
   原来 .side 只是 flex 里的一列、跟着整页滚下去，长页面（天气看板有 4400px 高）滚到中间就没法切菜单了。
   做法：`position: sticky; top: 56px（顶栏高度）; height: calc(100vh - 56px)` + 自己内部滚动
     · sticky 而不是 fixed：不用给 .main 补 margin-left（fixed 会脱离文档流，得手算 220px 偏移，容易错位）
     · 侧栏内容（账号/渠道/分析/维护四组 + 页脚）在矮屏上放不下 → 加 overflow-y auto，自己滚，不顶掉整页 */
.wrap { display: flex; min-height: calc(100vh - 56px); align-items: flex-start; }
.side { width: 220px; flex: 0 0 220px; background: #fff; border-right: 1px solid #e6e8eb; padding: 10px 0 18px;
  position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto; overscroll-behavior: contain; }
/* ================= 左侧菜单栏（2026-09-28 按《UI规范》§二-18 重做：分组面板 + 白卡片行）=================
   为什么这么改（用户原话："B（卡片行界）…但是标题行太不明显"）：
     · B 把每一项做成白卡片之后，原来的分组标题（11.5px / #9aa1a9 浅灰小字）**被卡片彻底盖住**；
     · 解法是把"分组"本身做成一张**浅色面板**（#f4f7fb + 16px 圆角）→ 标题成了面板的名字，被面板边界框住；
     · 侧栏超长时**自己滚**（用户 2026-09-28 明确："不用考虑一屏放下的因素，可以单独给侧边栏加滑动条"），
       所以不用为了塞进一屏去压条目高度。 */
.side-grp { background: #f4f7fb; border-radius: 16px; margin: 0 8px 10px; padding: 6px 6px 8px; }
.side-grp:first-child { margin-top: 10px; }
.side-title { font-size: 12px; font-weight: 700; color: #41506b; padding: 4px 8px 8px; }
/* 组内每一行 = 白卡片（就是 §二-8 的"行=白卡片"，别在侧栏另立一套） */
.nav-item { margin: 0 2px 6px; padding: 8px 10px; cursor: pointer; font-size: 13.5px;
  background: #fff; border: 1px solid #e4ebf6; border-radius: 11px; box-shadow: 0 1px 2px rgba(23, 43, 77, .05); }
.nav-item:last-child { margin-bottom: 2px; }
.nav-item:hover { background: #f8fbff; border-color: #cfe0f7; }
.nav-item.active { background: #f2f7ff; border-color: #bcd7fb; color: #2563eb; font-weight: 600; }
/* 侧栏底部：「运行状态（#sideFoot）」+「账号操作」（从顶栏移下来的低频动作） */
.side-low { border-top: 1px solid #f0f2f5; margin-top: 8px; padding: 10px 14px 0; }
.side-low-t { font-size: 11.5px; color: #9aa1a9; margin-bottom: 6px; }
.side-low-b { display: flex; flex-wrap: wrap; gap: 5px; }
.side-low-b .btn { height: 26px; box-sizing: border-box; padding: 0 10px; line-height: 24px; font-size: 12.5px;
  border-radius: 999px; border: 1px solid #dfe3e8; background: #fff; color: #2563eb; }
.side-low-b .btn:hover { border-color: #bcd7fb; background: #f2f7ff; opacity: 1; }
/* 侧栏那行「四级 · SKU × 渠道」的 .crumb 规则已随该行一起删掉（用户 2026-09-19 口径） */
.side-foot { padding: 10px 14px; color: #9aa1a9; font-size: 11.5px; line-height: 1.55; border-top: 1px solid #f0f2f5; margin-top: 8px; }

.main { flex: 1; padding: 16px 20px 40px; overflow-x: hidden; }
.scope-bar { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.scope-name { font-size: 17px; font-weight: 700; }
.scope-meta { color: #8a9099; font-size: 12px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid #e6e8eb; margin-bottom: 16px; }
.tab { padding: 9px 20px; cursor: pointer; color: #5a6069; font-size: 14px; }
/* ★ 2026-09-28（规范 §二-17）：页签选中态从旧红（#e1251b 字 + 红下划线）改成主色蓝 ——
   顶栏的选中 chip、侧栏的选中行都已经是蓝，留着红就是"最后一块旧红"（§五·5.2 同一类修正）。 */
.tab.active { color: #2563eb; font-weight: 700; border-bottom: 2px solid #2563eb; }

/* 卡片 */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 10px; margin-bottom: 16px; }
.card { background: #fff; border: 1px solid #eceef1; border-radius: 8px; padding: 12px 14px; }
.card .k { font-size: 12px; color: #8a9099; margin-bottom: 6px; display: flex; justify-content: space-between; }
.card .v { font-size: 20px; font-weight: 700; }
.card .cmp { font-size: 12px; margin-top: 6px; color: #8a9099; }
.up { color: #e1251b; } .down { color: #0aa06e; } .flat { color: #8a9099; }
/* 指标好坏语义色（与"涨红跌绿"无关）：绿 = 变好、红 = 变差、灰 = 基本持平 / 体量指标不上色。
   .up/.down 继续留给"状态类"文案（投放中/已暂停、成功/失败），两者不要混用。 */
.good { color: #0aa06e; } .bad { color: #e1251b; } .muted { color: #8a9099; }

.panel { background: #fff; border: 1px solid #eceef1; border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; }
.panel h4 { font-size: 14px; margin-bottom: 10px; }
.panel .note { color: #9aa1a9; font-size: 12px; margin-bottom: 8px; }

/* ================= 数据板内容区：分区浅色面板 + 白卡片行（2026-09-29，《UI规范》§二-21）=================
   用户选定：**方案 3**（汇总卡片区一块 + 明细表区一块，各 16px + 10px 内边距）+ **作用域类**。
   §二-8 只给两件东西：①「行 = 白卡片」11px + 1px #e4ebf6 + 0 1px 2px rgba(23,43,77,.05)；
                       ②「外层 = 浅色面板」#f4f7fb + 16px + 内边距 ≥10px（描边 #e6ecf6，与维护四页一致）。
   ★ 零 DOM 改动：卡片区那块面板就是 `.cards` 这个网格容器**本身**；明细表那块是 `.panel`，
     表格白卡片做在它里面的 `.table-wrap` 上（`.panel` 里本来就有这层）。
   ★ 为什么用作用域：`.panel` 被多个页面复用 —— 全局改会连带改到**天气看板**（`.rpt-page` 深蓝头图那套）
     与**维护四页**（它们已经是这套观感）。作用域化后改动范围 = 数据板；以后想全站统一，把作用域去掉即可。

   ★★ 2026-09-29 修订（用户实测："分时环比、分析报告页面感觉没有以前清爽了"）—— 拆成两类作用域：
     `.bd`     = 卡片区（所有数据板页签都生效）
     `.bd-tbl` = 明细表区（**只给"表格型页签"**：环比/同比/调整建议…）
     **不上浅色面板**：分时环比 / 逐日趋势（面板里有图表 svg）、分析报告（面板里有 .rpt 长文块）。
     理由（实测四条）：① 图表与长文压在 #f4f7fb 灰底上发闷；② 面板内边距 14/16 → 10px 让内容缩进 6px、留白变窄；
     ③ 分析报告一个面板 10 个子块 → 白卡—灰缝—白卡，显碎；④ 分时环比的"口径条"变成灰面板里套白条（双重框）。
     判据在 app.js setActiveNav()，只看 state.view/state.tab（那时内容区还是上一页的 HTML，不能读 DOM）。
   ★ 排版一个字不动：列数 / 卡片间距 10px / 大标题 17px / h4 14px / 表头 13px + #fafbfc /
     表体行距 9·10px / 汇总行 #f6f9fd / 数字等宽（§三）—— 这些都实测过"本来就合规"。 */
/* —— 卡片区：数据板所有页签 —— */
#content.bd .cards { background: #f4f7fb; border: 1px solid #e6ecf6; border-radius: 16px; padding: 10px; }
#content.bd .cards > * { border: 1px solid #e4ebf6; border-radius: 11px; box-shadow: 0 1px 2px rgba(23, 43, 77, .05); }
/* —— 明细表区：只给"表格型页签"（分时环比 / 分析报告 不上，见上）—— */
#content.bd-tbl .panel { background: #f4f7fb; border: 1px solid #e6ecf6; border-radius: 16px; padding: 10px; }
#content.bd-tbl .panel > h4 { margin: 2px 4px 8px; }
/* ★ overflow 必须是 auto：写 hidden 会压掉基类 `.table-wrap{overflow-x:auto}`，
   宽表被裁掉且没有横向滚动条。auto 同样把表格四角裁进 11px 圆角，外观不变。 */
#content.bd-tbl .panel .table-wrap { background: #fff; border: 1px solid #e4ebf6; border-radius: 11px;
  box-shadow: 0 1px 2px rgba(23, 43, 77, .05); overflow-x: auto; }
/* 面板里的"说明条 / 工具条"也是白卡片（否则白底条压在白卡片旁边显脏） */
#content.bd-tbl .panel > .note, #content.bd-tbl .panel > .range-hint, #content.bd-tbl .panel > .range-warn { background: #fff; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { background: #fafbfc; color: #5a6069; font-weight: 600; text-align: right; padding: 9px 10px; border-bottom: 1px solid #eceef1; white-space: nowrap; vertical-align: middle; }
th:first-child, td:first-child { text-align: left; }
/* ★ 2026-09-20：原来没写 vertical-align（浏览器默认 baseline）→ 单元格里放 input/复选框时，
   控件的内边距会把基线抬高，同一行里"文字单元"和"控件单元"就错开了（用户报的对齐问题就是这个）。
   统一 middle：文字、输入框、复选框、按钮都以单元格中线对齐。 */
td { padding: 9px 10px; text-align: right; border-bottom: 1px solid #f2f3f5; vertical-align: middle; }
tr.clickable:hover { background: #fafbfc; cursor: pointer; }
.sku-name { max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }

.report { line-height: 2; font-size: 13.5px; }
.report .line { padding: 2px 0; }
.report .warn { color: #e1251b; }
.report .bad { color: #e1251b; }
.report .muted { color: #6b7480; }
.report .good { color: #0aa06e; }
.report .info { color: #33383f; }
.report .hl { background: #fff1f0; padding: 1px 5px; border-radius: 3px; }

/* ---------- 汇总报告文字部分：三层结构（引流 / 成本 / 成交）----------
   整层好坏靠左侧状态色条；层内"结论词"上色；指标条是数据格，颜色与表格同一套；数字用等宽
   行距按用户要求放大（line-height ≈ 2.05，层与层之间留 10px 间距），避免"太挤" */
.rpt { margin: 4px 0 6px; }
.rpt .rpt-sum {
  font-size: 14px; line-height: 2.05; color: #2f343b; background: #fafbfc;
  border-left: 3px solid #c8cdd4; border-radius: 5px; padding: 13px 16px; margin-bottom: 12px;
}
.rpt .rpt-sum.good { border-left-color: #0aa06e; background: #f3fbf7; }
.rpt .rpt-sum.bad { border-left-color: #e1251b; background: #fdf5f4; }
.rpt .rpt-layer {
  border-left: 3px solid #c8cdd4; background: #fff; border-radius: 5px;
  padding: 13px 16px 15px; margin-top: 10px; box-shadow: 0 1px 0 #f2f3f5;
}
.rpt .rpt-layer:first-of-type { margin-top: 0; }
.rpt .rpt-layer.good { border-left-color: #0aa06e; background: #fbfefc; }
.rpt .rpt-layer.bad { border-left-color: #e1251b; background: #fefbfa; }
.rpt .ly-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rpt .ly-name { font-weight: 700; font-size: 14px; color: #2f343b; }
.rpt .ly-concl { font-weight: 700; font-size: 14px; }
.rpt .ly-concl.good { color: #0aa06e; } .rpt .ly-concl.bad { color: #e1251b; } .rpt .ly-concl.info { color: #5a6069; }
.rpt .ly-sub { color: #9aa1a9; font-size: 12px; }
.rpt .ly-items { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 12px 0 10px; }
.rpt .ly-chip {
  background: #f6f8fb; border: 1px solid #eceef1; border-radius: 4px; padding: 5px 11px;
  font-size: 13px; display: inline-flex; align-items: baseline; gap: 7px;
}
.rpt .ly-chip .ck { color: #8a9099; }
.rpt .ly-chip .cv { font-weight: 700; color: #2f343b; font-variant-numeric: tabular-nums; }
.rpt .ly-chip .cd { font-variant-numeric: tabular-nums; }
.rpt .ly-body { font-size: 13px; color: #5a6069; line-height: 2.05; font-variant-numeric: tabular-nums; }
.rpt .rpt-acc { margin-top: 12px; }
.rpt .rpt-peers { font-size: 12.5px; color: #5a6069; font-weight: 700; margin: 14px 0 6px; }
.rpt .rpt-acc .acc-line {
  border-left: 3px solid #c8cdd4; background: #fcfcfd; border-radius: 5px;
  padding: 11px 16px; font-size: 13px; line-height: 2.05; color: #5a6069; margin-top: 8px;
}
.rpt .rpt-acc .acc-line:first-child { margin-top: 0; }
.rpt .rpt-acc .acc-line.good { border-left-color: #0aa06e; }
.rpt .rpt-acc .acc-line.bad { border-left-color: #e1251b; }
.rpt .rpt-acc .acc-line b { color: #2f343b; }
.rpt .rpt-notes { margin-top: 14px; }
.rpt .rpt-notes .note { margin: 0 0 5px; line-height: 1.95; font-size: 12px; }

/* 文字分析折叠区（默认收起，只留总结）：三层 + 横向点评都放在里面 */
.rpt .rpt-fold { margin: 10px 0 2px; border: 1px solid #eceef1; border-radius: 5px; background: #fcfcfd; }
.rpt .rpt-fold > summary { cursor: pointer; padding: 10px 15px; font-size: 13px; color: #5a6069; user-select: none; list-style: none; }
.rpt .rpt-fold > summary::-webkit-details-marker { display: none; }
.rpt .rpt-fold > summary::before { content: '▸ '; color: #9aa1a9; }
.rpt .rpt-fold[open] > summary::before { content: '▾ '; }
.rpt .rpt-fold > summary:hover { color: #1e6fd9; }
.rpt .rpt-fold[open] > summary { border-bottom: 1px solid #eceef1; background: #f7f9fc; border-radius: 5px 5px 0 0; }
.rpt .rpt-fold-body { padding: 12px 0 6px; }
.rpt .rpt-fold-body .rpt-layer:first-of-type { border-top: 1px solid #f2f3f5; }

/* ---------- SKU 列表页：低效 SKU 筛选 + 归因（纯文字）----------
   一个账号一段；汇总口径时分栏（一个账号一栏），每栏一个默认折叠的块 */
.low-wrap { margin: 10px 0 4px; }
.low-head-line { font-size: 13px; color: #2f343b; line-height: 2.05; }
.low-base { margin: 2px 0 10px; line-height: 1.95; }
.low-concl { margin-bottom: 10px; }
.low-line { font-size: 13px; color: #2f343b; line-height: 2.05; }
.low-items { margin-top: 6px; }
.low-item { border-left: 3px solid #e1251b; background: #fefbfa; border-radius: 5px; padding: 11px 15px 12px; margin-top: 10px; }
.low-head { font-size: 13px; color: #2f343b; line-height: 1.9; }
.low-steps { margin: 6px 0 4px; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: #5a6069; font-variant-numeric: tabular-nums; }
.low-step b { color: #2f343b; font-weight: 600; }
.low-step i { font-style: normal; margin-left: 3px; }
.low-lever { font-size: 13px; color: #2f343b; line-height: 2.0; margin-top: 3px; }
.low-lever b { color: #1e6fd9; }
.low-obj { font-size: 12.5px; color: #5a6069; line-height: 1.95; font-variant-numeric: tabular-nums; }
.low-why { font-size: 13px; color: #2f343b; line-height: 2.0; }
.low-deep { font-size: 12.5px; color: #5a6069; line-height: 1.95; padding-left: 12px; font-variant-numeric: tabular-nums; }
.low-where { font-size: 12.5px; color: #5a6069; line-height: 1.95; margin-top: 2px; }
.low-detail { margin-top: 6px; }
.low-detail > summary { cursor: pointer; font-size: 12px; color: #9aa1a9; list-style: none; user-select: none; }
.low-detail > summary::-webkit-details-marker { display: none; }
.low-detail > summary::before { content: '▸ '; }
.low-detail[open] > summary::before { content: '▾ '; }
.low-detail > summary:hover { color: #1e6fd9; }
.low-detail-body { font-size: 12px; color: #8a9099; line-height: 1.9; padding: 4px 0 0 14px; font-variant-numeric: tabular-nums; }
.st-wrap { margin: 10px 0 4px; }
.st-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(560px, 1fr)); gap: 14px; align-items: start; }
.st-col { min-width: 0; }
.st-fold > summary { line-height: 1.9; }
.st-fold > summary b { color: #1f2329; }
.st-gist { color: #9aa1a9; font-size: 12px; margin-top: 3px; line-height: 1.85; }

/* ---------- 汇总行（表头下面第一行）：一眼看到本层合计 ---------- */
.adj-table tr.sum-row td { font-weight: 700; background: #f6f9fd !important; border-bottom: 2px solid #dfe5ee; }
.adj-table tr.sum-row td.rowlab { color: #1e6fd9; }
table:not(.adj-table) tr.sum-row td { font-weight: 700; background: #f6f9fd; border-bottom: 2px solid #dfe5ee; }
/* `.sum-more*`（"展开汇总的全部指标"折叠区）的样式 2026-09-21 随功能一起删除 ——
   用户口径："每个页面的这个汇总指标没有意义，你直接在顶部的汇总栏下小字标注即可"。
   ⚠️ 注意：`table.adj-table.toprep` 那批样式**不能删** —— 它们还被分析报告的三张表用着（汇总行/二级表/单元表）。 */
td.share { color: #5a6069; }

/* 分析报告口径切换（环比 / 同比） */
.filter-bar .basis-switch { font-size: 12px; color: #8a9099; display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; }
.filter-bar .basis-btn {
  border: 1px solid #dfe3e8; background: #fff; color: #5a6069; border-radius: 4px;
  font-size: 12px; padding: 2px 10px; cursor: pointer; font-family: inherit;
}
.filter-bar .basis-btn:hover { border-color: #9ab7e8; color: #1e6fd9; }
.filter-bar .basis-btn.on { background: #1e6fd9; border-color: #1e6fd9; color: #fff; font-weight: 600; }

.legend { display: flex; gap: 18px; color: #8a9099; font-size: 12px; margin-top: 6px; align-items: center; }
.legend i { display: inline-block; width: 16px; height: 3px; vertical-align: middle; margin-right: 5px; border-radius: 2px; }
/* 曲线图悬停提示 */
.chart-wrap { position: relative; }
.chart-tip { position: absolute; z-index: 30; pointer-events: none; background: rgba(255,255,255,.98);
  border: 1px solid #e6e8eb; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.12); padding: 9px 11px; min-width: 186px; font-size: 12px; }
.chart-tip .tip-title { font-weight: 700; color: #1f2329; margin-bottom: 5px; font-size: 12.5px; }
.chart-tip .tip-row { display: flex; justify-content: space-between; gap: 14px; line-height: 1.75; color: #5a6069; }
.chart-tip .tip-row b { color: #1f2329; font-weight: 600; }
.loading { color: #8a9099; padding: 30px; text-align: center; }
.tag { display: inline-block; background: #f0f2f5; border-radius: 4px; padding: 2px 8px; font-size: 11.5px; color: #5a6069; margin-left: 6px; }
.src { color: #9aa1a9; font-size: 11.5px; }

/* 型号映射表 */
.filter-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.filter-bar input[type=text], .filter-bar #mSearch { padding: 7px 10px; border: 1px solid #dfe3e8; border-radius: 5px; font-size: 13px; width: 240px; outline: none; }
.filter-bar #mSearch:focus { border-color: #e1251b; }
.chk { display: flex; align-items: center; gap: 5px; font-size: 13px; color: #5a6069; cursor: pointer; }
.import-box { background: #fafbfc; border: 1px solid #eceef1; border-radius: 6px; padding: 12px; margin-bottom: 12px; }
/* 型号映射表 → 四要素批量粘贴的预览：有问题的行标红底（一眼看出哪几行不会被写入） */
.model-table tr.row-bad td { background: #fdf5f4; }
.model-table tr.row-bad td .bad { font-weight: 600; }
.import-box textarea { width: 100%; padding: 9px 10px; border: 1px solid #dfe3e8; border-radius: 5px; font-family: Consolas, Monaco, monospace; font-size: 13px; outline: none; resize: vertical; }
.model-table td .model-input { width: 170px; padding: 6px 9px; border: 1px solid #dfe3e8; border-radius: 5px; font-size: 13px; text-align: left; outline: none; }
.model-table td .model-input:focus { border-color: #e1251b; box-shadow: 0 0 0 2px rgba(225,37,27,.08); }
.model-table td .model-input.empty { background: #fff8f7; border-color: #f5c2bd; }
.model-table th { text-align: left; white-space: nowrap; }
.model-table td { text-align: left; vertical-align: middle; padding: 6px 10px; }
.model-table td .model-input { padding: 5px 9px; }
.model-table td .sku-name { max-width: 300px; }   /* 限制商品名列宽，避免整张表被超长标题撑爆 */
.model-table th:nth-child(6), .model-table td:nth-child(6) { text-align: right; }
.model-table th:nth-child(7), .model-table td:nth-child(7) { text-align: left; }
/* 账号列：不换行，过长省略（完整名称看悬停提示）；渠道列也不换行 */
.model-table th:nth-child(3), .model-table td:nth-child(3) { white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.model-table th:nth-child(4), .model-table td:nth-child(4) { white-space: nowrap; }
.model-table th:nth-child(7), .model-table td:nth-child(7) { white-space: nowrap; }
.model-table td:first-child, .model-table th:first-child { padding-left: 12px; }
.model-table .mono { font-family: Consolas, Monaco, monospace; color: #5a6069; }
.model-table a.del { color: #9aa1a9; font-size: 12px; text-decoration: none; }
.model-table a.del:hover { color: #e1251b; }
/* SPU 页签：主行 = 最新时间段；行首小三角展开「其它时间段」、行尾放「＋ 新增时间段」 */
.model-table a.caret-btn { display: inline-block; width: 15px; margin-right: 2px; color: #9aa1a9; font-size: 10px; text-decoration: none; vertical-align: 1px; }
.model-table a.caret-btn:hover { color: #e1251b; }
.model-table .caret-ph { display: inline-block; width: 17px; }
.model-table tr.main-row td { border-top: 1px solid #eceef1; }
.model-table tr.hist-row td { background: #fbfcfd; border-top: 1px dashed #eceef1; }
.model-table a.addp { color: #e1251b; font-size: 12px; text-decoration: none; }
.model-table a.addp:hover { text-decoration: underline; }
.model-table td.nowrap { white-space: nowrap; }
.model-table .mono .src { margin-left: 3px; }
/* SPU 页签列多（SPU/名称/账号/渠道/起止/投放SKU/型号/花费/更新/操作）→ 收紧列宽，尽量一屏放得下，
   别让行尾的「＋ 新增时间段」藏到横向滚动条后面 */
.model-table[data-scope=spu] td .model-input { width: 128px; }
.model-table[data-scope=spu] td .sku-name { max-width: 210px; }
.model-table[data-scope=spu] th, .model-table[data-scope=spu] td { padding-left: 8px; padding-right: 8px; }
.model-table[data-scope=spu] td:first-child, .model-table[data-scope=spu] th:first-child { padding-left: 10px; }
.filter-bar select { padding: 7px 10px; border: 1px solid #dfe3e8; border-radius: 5px; font-size: 13px; background: #fff; outline: none; }
.acct-sel { padding: 6px 10px; border: 1px solid #dfe3e8; border-radius: 5px; font-size: 13px; background: #fff; outline: none; max-width: 220px; }

/* ================= 账号筛选：复选面板（2026-09-28，规范 §二-15 / §二-16）=================
   为什么面板是 `position: fixed` 而不是 absolute：`.top` 是 `overflow-x: auto`
   （一个轴不是 visible 时，另一个轴也按 auto 计算）→ 顶栏里的绝对定位下拉**会被裁掉**。
   所以同样放在这个 DOM 位置，用 JS 按按钮坐标定位（openAcctPanel / placeAcctPanel）。
   数值全对齐规范：控件 28px、主色 #2563eb、行 = 白卡片 11px + #e4ebf6 描边、选中 #f2f7ff + #bcd7fb、
   外层面板 #f4f7fb + 16px。z-index=70：要盖住顶栏（10）与 AI 悬浮球（60），但要**低于弹窗**（99/200）。 */
.acct-pick { position: relative; flex-shrink: 0; }
.ap-btn { height: 28px; box-sizing: border-box; padding: 0 12px; display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid #dfe3e8; border-radius: 14px; background: #fff; font-size: 12.5px; color: #1f2329;
  cursor: pointer; white-space: nowrap; font-family: inherit; }
.ap-btn:hover { border-color: #bcd7fb; color: #2563eb; }
/* ★ 2026-09-28（规范 §二-17）：形状语言 = **筛选 pill、动作方角按钮** —— 账号筛选与时间范围都是"筛选"，
   所以用同一个 14px 圆角；展开中要有状态（原来只有 hover，点开了看不出"正开着"）。 */
.ap-btn[aria-expanded="true"] { border-color: #bcd7fb; background: #f2f7ff; color: #2563eb; }
.ap-btn .ap-caret { font-size: 10px; color: #5a6069; }
.ap-btn.multi { border-color: #bcd7fb; background: #f2f7ff; color: #2563eb; font-weight: 600; }
.ap-btn.multi .ap-caret { color: #2563eb; }
.ap-panel { position: fixed; z-index: 70; width: 300px; background: #f4f7fb; border: 1px solid #e4ebf6; border-radius: 16px;
  box-shadow: 0 14px 34px rgba(23, 43, 77, .16); padding: 10px; font-family: inherit; }
.ap-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 7px; font-size: 12.5px; color: #5a6069; }
.ap-quick a { color: #2563eb; margin-left: 12px; }
.ap-note { padding: 0 4px 7px; font-size: 11.5px; color: #8a9099; }
.ap-list { max-height: 212px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.ap-row { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid #e4ebf6; border-radius: 11px;
  padding: 8px 10px; box-shadow: 0 1px 2px rgba(23, 43, 77, .05); cursor: pointer; font-size: 13px; color: #1f2329; }
.ap-row.on { background: #f2f7ff; border-color: #bcd7fb; }
.ap-row input { margin: 0; width: 14px; height: 14px; accent-color: #2563eb; flex-shrink: 0; }
/* 账号名不许截断（规范 §二-15："不许截成 南京绿灯…"）：面板宽度按最长账号名留够 */
.ap-nm { white-space: nowrap; }
/* ★ 2026-10-04 用户口径（账号面板两种逻辑并存）：**点账号名 = 直接切到这一个账号**（单选，立即生效）；
   复选框那一侧仍是多选 + 「应用」。这里给"名字"一点**可点的样子**（hover 变主色 + 下划线）——
   属于可点反馈，不是提示文字（用户明确说不要加提示）。 */
.ap-nm { cursor: pointer; }
.ap-nm:hover { color: #2563eb; text-decoration: underline; }
.ap-foot { display: flex; align-items: center; justify-content: space-between; padding: 9px 4px 1px; }
.ap-count { font-size: 12.5px; color: #5a6069; }
.ap-count b { color: #2563eb; font-weight: 700; }
/* ★ 规范 §二·补 的坑：`.btn` 基类是红底，别在这里复用；主按钮的底色在自己作用域里写全 */
.ap-apply { height: 28px; box-sizing: border-box; padding: 0 12px; border: 0; border-radius: 5px; background: #2563eb;
  color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.ap-apply:hover { opacity: .92; }
.range-bar { display: flex; align-items: center; gap: 4px; }
.range-btn { padding: 5px 11px; border: 1px solid #e6e8eb; border-radius: 14px; font-size: 12.5px; color: #5a6069; cursor: pointer; background: #fff; white-space: nowrap; }
.range-btn:hover { border-color: #f5c2bd; color: #e1251b; }
.range-btn.active { background: #e1251b; border-color: #e1251b; color: #fff; font-weight: 600; }
.custom-range { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: #5a6069; }

/* ================= 自定义时间区间：双月日历点选（2026-09-28，《UI规范》§二-19）=================
   为什么换成它：原来是两个原生 input[type=date]（要分别选两次），而且**看不出区间有多长**。
   面板用 position:fixed + JS 定位（原因同账号面板：`.top` 是 overflow-x:auto，绝对定位会被裁掉）。
   数值照 §二-8：外层 #f4f7fb + 16px 圆角；日期格白底 8px 圆角；端点 = 主色蓝底白字；区间内 = #f2f7ff + #dbe9fb 描边。 */
.cr-panel { position: fixed; z-index: 70; width: 566px; background: #f4f7fb; border: 1px solid #e4ebf6; border-radius: 16px;
  box-shadow: 0 16px 36px rgba(23, 43, 77, .18); padding: 12px; font-family: inherit; }
.cr-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 10px; }
.cr-echo { flex: 1; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cr-echo i { font-style: normal; font-weight: 400; color: #5a6069; margin-left: 6px; font-size: 12px; }
.cr-nav { display: flex; gap: 6px; }
.cr-nav b { width: 26px; height: 26px; border: 1px solid #dfe3e8; border-radius: 8px; background: #fff; display: flex;
  align-items: center; justify-content: center; font-size: 12px; color: #5a6069; cursor: pointer; font-weight: 400; }
.cr-nav b:hover { border-color: #bcd7fb; color: #2563eb; }
/* 年月定位（2026-09-29，《UI规范》§二-19 追加）：年 / 月两个原生下拉 + 「最早有数据」。
   为什么放头部而不是底部：底部那行要放"点两下选区间…"的长提示 + 取消/确定，
   再塞一个按钮就会挤到换行（实测底部剩余宽度不够）；而它就是"定位"控件，和翻页箭头放一起最顺。
   控件尺寸对齐规范 §二-18 的 28px 体系（和 .cr-nav b 一样高 26px、8px 圆角、浅色描边）。 */
.cr-pick { display: flex; align-items: center; gap: 6px; }
.cr-pick select { height: 26px; box-sizing: border-box; padding: 0 4px; border: 1px solid #dfe3e8; border-radius: 8px;
  background: #fff; color: #41506b; font-size: 12.5px; font-family: inherit; font-variant-numeric: tabular-nums; }
.cr-pick select:hover { border-color: #bcd7fb; }
.cr-pick select:disabled, .cr-pick select option:disabled { color: #b0b6bd; }
.cr-jump { height: 26px; box-sizing: border-box; display: flex; align-items: center; padding: 0 8px; border: 1px solid #dfe3e8;
  border-radius: 8px; background: #fff; color: #5a6069; font-size: 11.5px; font-weight: 400; cursor: pointer; white-space: nowrap; }
.cr-jump:hover { border-color: #bcd7fb; color: #2563eb; }
/* 「有数据的范围」一行小字：让"为什么有些月份点不动"有个明面上的答案（不点也看得见） */
.cr-span { font-size: 11.5px; color: #9aa1a9; padding: 8px 4px 0; line-height: 1.5; }
.cr-span b { color: #5a6069; font-weight: 600; font-variant-numeric: tabular-nums; }
.cr-cals { display: flex; gap: 12px; }
.cr-cal { flex: 1; background: #fff; border: 1px solid #e4ebf6; border-radius: 11px; padding: 8px 8px 10px; }
.cr-m { font-size: 12px; font-weight: 700; color: #41506b; text-align: center; padding-bottom: 6px; }
.cr-wk, .cr-gd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cr-wk span { font-size: 10.5px; color: #9aa1a9; text-align: center; padding: 2px 0; }
.cr-d { height: 28px; display: flex; align-items: center; justify-content: center; font-size: 12px; border-radius: 8px;
  cursor: pointer; font-variant-numeric: tabular-nums; color: #1f2329; }
.cr-d:hover { background: #f2f7ff; box-shadow: inset 0 0 0 1px #bcd7fb; }
.cr-d.mut { color: #c8cdd4; cursor: default; }
.cr-d.mut:hover { background: transparent; box-shadow: none; }
.cr-d.in { background: #f2f7ff; box-shadow: inset 0 0 0 1px #dbe9fb; }
.cr-d.end { background: #2563eb; color: #fff; font-weight: 700; }
.cr-d.end:hover { background: #2563eb; }
.cr-d.dis { color: #d6dae0; cursor: not-allowed; }
.cr-d.dis:hover { background: transparent; box-shadow: none; }
.cr-foot { display: flex; align-items: center; gap: 8px; padding: 10px 4px 2px; }
.cr-hint { font-size: 11.5px; color: #9aa1a9; line-height: 1.5; }
.cr-warn { font-size: 11.5px; color: #b45309; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 999px; padding: 2px 8px; }
.cr-sp { flex: 1; }
.cr-btn { height: 28px; box-sizing: border-box; padding: 0 12px; border: 1px solid #dfe3e8; border-radius: 8px; background: #fff;
  color: #374151; font-size: 13px; cursor: pointer; font-family: inherit; }
.cr-btn.pri { background: #2563eb; border-color: #2563eb; color: #fff; font-weight: 600; }
.cr-btn.pri:hover { opacity: .92; }
/* ★ 2026-09-29（《UI规范》§二-20 报错分级）：`.range-hint` 现在**只用于"口径说明 / 覆盖度提示"**
   （不是报错）→ 换成克制的浅蓝条（原来是琥珀色 #fff8e6，看着像警告，其实多数是在解释口径）。
   真正的报错走居中弹窗（`.err-*`）或居中浮层（`.toast-*`），不再挤在内容区顶部。 */
.range-hint { background: #f4f7fb; border: 1px solid #e4ebf6; color: #41506b; padding: 9px 12px; border-radius: 8px; font-size: 12.5px; margin-bottom: 12px; }
/* 弱警告（数据陈旧 / 缺数据 / 频控）保留琥珀色：它是"要留意"，不是"口径说明" */
.range-warn { background: #fff8e6; border: 1px solid #ffe1a8; color: #8a6d1f; padding: 9px 12px; border-radius: 8px; font-size: 12.5px; margin-bottom: 12px; }

/* ================= 报错分级：居中模态 + 居中浮层（2026-09-29，《UI规范》§二-20）=================
   判据：这一条会不会让你"没法继续"？
     会 → `.err-mask/.err-card`（屏幕正中的模态，遮罩 + 必须点一下）
     不会、只是"这一次没成" → `.toast-wrap/.toast-card`（屏幕正中的浮层，3.5 秒自动消失、可关）
     只是解释口径 → `.range-hint`（留在内容区，**不居中**，居中会挡住正在看的数据）
   ★ 浮层 z-index 240 > 模态 200：因为"在弹窗里操作失败"的浮层必须盖在弹窗上才看得见。
   ★ 遮罩/圆角/描边照 §二-8（卡片 16px + 1px #e4ebf6）；**主按钮仍用主色蓝**，红色只做"图标 + 左侧色条"的语义。 */
.err-mask { position: fixed; inset: 0; z-index: 200; background: rgba(15, 23, 42, .34); display: flex; align-items: center;
  justify-content: center; padding: 16px; }
.err-card { background: #fff; border: 1px solid #e4ebf6; border-radius: 16px; width: min(480px, 92vw); max-height: 70vh;
  display: flex; flex-direction: column; box-shadow: 0 18px 50px -12px rgba(16, 24, 40, .35); }
.err-card.wide { width: min(560px, 92vw); }
.err-head { display: flex; align-items: flex-start; gap: 8px; padding: 14px 16px 6px; font-size: 14px; font-weight: 700; line-height: 1.5; }
.err-head b { flex-shrink: 0; width: 17px; height: 17px; margin-top: 1px; border-radius: 50%; background: #e1251b; color: #fff;
  font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.err-body { padding: 2px 16px 4px; font-size: 12.5px; color: #4a5260; line-height: 1.85; overflow-y: auto; }
.err-det { margin: 8px 0 0; background: #f7f9fc; border: 1px solid #e6ebf2; border-radius: 8px; padding: 8px 10px;
  font-size: 11px; color: #6b7480; font-family: ui-monospace, Consolas, monospace; white-space: pre-wrap; word-break: break-all;
  max-height: 22vh; overflow-y: auto; }
.err-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 16px 14px; flex-wrap: wrap; }
.err-foot .btn { height: 28px; box-sizing: border-box; padding: 0 12px; line-height: 26px; font-size: 13px; }
.err-foot .btn.pri { background: #2563eb; color: #fff; border-color: #2563eb; font-weight: 600; }
.err-foot .btn.pri:hover { opacity: .92; }

.toast-wrap { position: fixed; inset: 0; z-index: 240; display: flex; align-items: center; justify-content: center;
  pointer-events: none; padding: 16px; }
.toast-card { pointer-events: auto; position: relative; background: #fff; border: 1px solid #f3c8c4; border-left: 4px solid #e1251b;
  border-radius: 12px; box-shadow: 0 16px 40px -14px rgba(16, 24, 40, .35); padding: 11px 14px 12px;
  width: min(400px, 86vw); overflow: hidden; }
.toast-card .tt { font-size: 13px; font-weight: 700; margin-bottom: 3px; padding-right: 16px; }
.toast-card .tm { font-size: 12.5px; color: #5a6069; line-height: 1.7; }
.toast-card .tx { position: absolute; right: 9px; top: 7px; color: #9aa1a9; font-size: 13px; cursor: pointer; line-height: 1; }
.toast-card .tx:hover { color: #1f2329; }
.toast-prog { position: absolute; left: 0; bottom: 0; height: 2px; background: #e1251b; width: 100%; transform-origin: left center; }
/* 面包屑 */
.crumbs { font-size: 12.5px; color: #9aa1a9; margin-bottom: 10px; }
.crumbs a { color: #3355ff; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs .sep { margin: 0 6px; color: #c8ccd1; }
/* 深层维度切换 */
.dim-bar { font-size: 12.5px; color: #5a6069; margin-bottom: 10px; }
.dim-btn { display: inline-block; margin-right: 6px; padding: 3px 11px; border: 1px solid #e6e8eb; border-radius: 12px; color: #5a6069; text-decoration: none; font-size: 12.5px; }
.dim-btn:hover { border-color: #f5c2bd; color: #e1251b; }
.dim-btn.on { background: #e1251b; border-color: #e1251b; color: #fff; font-weight: 600; }
.model-table a.lnk { color: #3355ff; font-size: 12px; text-decoration: none; }
td.share { color: #5a6069; font-weight: 600; }
.table-wrap { overflow-x: auto; }
.table-wrap table { min-width: 100%; }

/* ══════════ ★ 2026-09-30（用户要求："去掉 16 列的限制、列间距不变、如果超出视口给左右滑动条"）══════════
   问题：表格是 `table{width:100%}` + 单元格可换行 → 列一多就被**挤扁**（没有滚动条，字挤成两三行）。
   做法：数据区的表格改成**按内容宽度铺开**（`width: max-content`）+ 仍不小于容器（`min-width:100%`），
        单元格不许换行 → 宽度超出容器时由外层 `.table-wrap{overflow-x:auto}` 出**横向滚动条**；
        **内边距不动**（th/td 的 `padding: 9px 10px` 保持原样 = 列间距不变）。
   ⚠️ 必须 `:not(.adj-table)`：分析报告那三张表是 `table-layout:fixed; width:100%` 的定宽表，
      被这条规则覆盖会整张变形（它们本来就不该横向滚动）。 */
#content.bd-tbl .panel .table-wrap table:not(.adj-table) { width: max-content; min-width: 100%; }
#content.bd-tbl .panel .table-wrap table:not(.adj-table) thead th,
#content.bd-tbl .panel .table-wrap table:not(.adj-table) tbody td { white-space: nowrap; }
/* ★ 2026-09-30（用户："多选指标之后原有指标列的宽度被压缩了，保持列宽，新增指标按当前已有列宽展示"）：
   指标列统一钉一个最小宽度 —— 加列时只往右边加一个**同宽度**的列，已有列不会被挤窄
   （表格按 max-content 铺开，宽度超出容器由容器出横向滚动条）。
   数值 + 下面那行「环/同」小字是这个宽度的依据；首列/勾选列/操作列/天气·创意等专有列不带 .mcol。 */
table thead th.mcol, table tbody td.mcol { min-width: 112px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 10px; margin-bottom: 16px; }
.model-table a.lnk:hover { text-decoration: underline; }
.down { color: #0aa06e; }
.filter-bar select { padding: 7px 10px; border: 1px solid #dfe3e8; border-radius: 5px; font-size: 13px; background: #fff; outline: none; }
code { background: #f0f2f5; padding: 1px 5px; border-radius: 3px; font-family: Consolas, Monaco, monospace; font-size: 12px; }

/* 权限相关 */
select.role-sel { padding: 4px 8px; border: 1px solid #dfe3e8; border-radius: 5px; font-size: 12.5px; background: #fff; outline: none; }
button[disabled] { opacity: .5; cursor: not-allowed; }
input.model-input[readonly] { background: #f7f8fa; color: #8a9099; }

/* 分页 */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.pager-btns { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pager .pg, .pager .pg2 { padding: 5px 10px; font-size: 12.5px; min-width: 32px; }
.pager .pg.on, .pager .pg2.on { background: #e1251b; border-color: #e1251b; color: #fff; font-weight: 600; }
.pg-gap { color: #c8ccd1; font-size: 12.5px; padding: 0 2px; }

/* 账号管理 · 投放账户 ID 列 / 用户管理 · 可访问的推广账号列（2026-09-20 v2：改成"复选框 + 弹窗编辑"）
   用户第一轮反馈："账号管理的投放账户 ID 列、用户管理的可访问的推广账号列没有对齐"；
   实测真原因不是 vertical-align 写错，而是**行高不齐**：用户管理那行的勾选区是"多行块 + 按钮"（高 94px），
   旁边"用户名/权限/操作"只有单行文字 → 表格把整行撑到 94px 后，单行文字按中线居中（rowTop+47）、
   多行块贴顶（rowTop+8），两者差 30~39px，看上去就是"没对齐"。
   用户第二轮拍板："你可以改成复选框的模式" → 于是**两列都改成：列里只放"复选框 + 一行文字/链接"**，
   编辑动作挪到弹窗（输入框、勾选清单都不再占表格高度），行高回到一致，对齐问题从根上消失。
   保留的规则：这两张表里所有单元格统一 `vertical-align: top`，纯文字列 padding-top 与第一行控件顶边对齐。 */
/* ★ 最终定案：**顶部对齐 + 统一 padding**（2026-09-20，第 5 轮，读图+测量才定死）
   走过两次弯路，都记在这免得再翻：
     · 用 `vertical-align: middle` → "账号/用户名"是**两行**内容，按整块居中 → 与单行的别列差 10.9px（更歪）
     · 用"顶部对齐但 padding 不一致"（表头 11px、单元格 9/11px 混）→ 不同行高下内容落在不同高度，
       用户管理第一行的"全部账号"比下面两行高一截
   正解：`vertical-align: top` + **表头与单元格同 padding + padding-top == padding-bottom**
       （padding 不对称会让浏览器在某个方向额外居中，行高不同时内容位置就会漂）。
   这样：每格的第一行内容都从"行顶 + 9px"开始 → 同行各列、各行都落在同一条水平线上。 */
table.acc-manage th, table.acc-manage td,
table.user-manage th, table.user-manage td { vertical-align: top; padding-top: 9px; padding-bottom: 9px; }
/* 账号管理 / 用户管理两张表的**统一文字度量**（2026-09-20）
   为什么：各列文字行高/字号不一（正文 17px、日期 15px、复选框行 21px、等宽 12.5px），
   眼睛水平扫过去会看到"中线高低跳动"（实测视觉中心差 1.5px，来源就是 12.5px vs 13px）。
   统一 13px / line-height 20px 后，同一行文字视觉中心完全一致。 */
table.acc-manage, table.user-manage { font-size: 13px; }
table.acc-manage td, table.user-manage td { line-height: 20px; font-size: 13px; }
table.acc-manage td .src, table.user-manage td .src,
table.acc-manage td .accid-cur, table.user-manage td .pins-cur,
table.acc-manage td .accid-miss { font-size: 13px; line-height: 20px; }
table.acc-manage .mono, table.user-manage .mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; line-height: 20px; }
/* 下拉框压扁到与文字行同高（2026-09-20）：原来 24px（padding 2px + 行高 20 + 边框），
   在 20px 行盒里居中后，它的盒中心比文字行中心高 3px —— 这就是"权限"列看起来跟别列不齐的原因。
   减到 20px 高后中心一致（套件里判据是"同行各列视觉中心散开 ≤4px"）。 */
table.user-manage .role-sel { font-size: 13px; line-height: 18px; padding: 0 6px; height: 20px; vertical-align: middle; }
table.acc-manage .lnk, table.user-manage .lnk, table.acc-manage .del, table.user-manage .del { line-height: 20px; }
table.acc-manage .tag, table.user-manage .tag { line-height: 18px; }

/* ★ 这两张表改成**固定列宽**（2026-09-20 读图定位到的"歪"的真身：列起点由内容决定，忽宽忽窄）
   原来 `table-layout: auto` 让每列宽度随内容变：账号管理那行"投放账户 ID"格内容宽 219px、
   表头"投放账户 ID"文字窄，于是**列头与单元格内容的起点对不上**；换行内容多时列还会再变宽，
   看上去就是"这两列跟别列不在一条线上、而且每行还不一样"（用户："所有行……都歪"）。
   修法：`table-layout: fixed` + 显式列宽 → 列起点固定，表头与内容各自对齐在同一条竖线上。 */
table.acc-manage, table.user-manage { table-layout: fixed; }
table.acc-manage th:nth-child(1), table.acc-manage td:nth-child(1) { width: 21%; }
table.acc-manage th:nth-child(2), table.acc-manage td:nth-child(2) { width: 24%; }
table.acc-manage th:nth-child(3), table.acc-manage td:nth-child(3) { width: 10%; }
table.acc-manage th:nth-child(4), table.acc-manage td:nth-child(4) { width: 15%; }
table.acc-manage th:nth-child(5), table.acc-manage td:nth-child(5) { width: 12%; }
table.acc-manage th:nth-child(6), table.acc-manage td:nth-child(6) { width: 18%; }
table.user-manage th:nth-child(1), table.user-manage td:nth-child(1) { width: 18%; }
table.user-manage th:nth-child(2), table.user-manage td:nth-child(2) { width: 13%; }
table.user-manage th:nth-child(3), table.user-manage td:nth-child(3) { width: 27%; }
table.user-manage th:nth-child(4), table.user-manage td:nth-child(4) { width: 20%; }
table.user-manage th:nth-child(5), table.user-manage td:nth-child(5) { width: 22%; }

/* ★ 表头与单元格**逐列对齐**（2026-09-20 最终版，用户："表头和内容没对齐，列之间距离的问题"）
   根因有两条，都是全局样式在"数字表格"里的默认约定不适配这两张表：
     ① 全局 `th, td { text-align: right }` —— 我把单元格改左对齐后**表头没跟着改**，同一条竖线上的起点就不一致；
     ② 就算表头也右对齐，"token 更新时间 / 最近采集 / 创建时间"这几列仍是**左边缘参差**
        （同一列里日期长度不一样），而它们的表头也右对齐 → 表头文字在右边、内容最左的那些却跑到左边，
        实测"表头左边缘 vs 内容左边缘"差 -27 / -68px —— 这就是用户看到的"没对齐"。
   定案：**这两张表的所有列统一左对齐**（表头与单元格同一套），列间距统一 12px。
        时间列不再右对齐的原因：它内容长度不齐（有的是"2026/9/17 10:12:18"、有的是"—"），
        右对齐会让左边缘每一行都不同；左对齐至少保证"表头与内容、每一行"都从同一条竖线开始。 */
table.acc-manage th, table.acc-manage td,
table.user-manage th, table.user-manage td { text-align: left; padding-left: 12px; padding-right: 12px; }
/* 用户管理 · 可访问的推广账号列：仍是"复选框 + 全部账号/N 个账号 + 修改"
   （账号管理那列的复选框已按用户要求去掉，见下面的 .accid-line）
   复选框的垂直偏移：中文没有下伸部，文字**视觉中心**比行盒中心高约 2px；复选框是方块（视觉中心==盒中心），
   所以给 -5px 让它与文字齐平；下拉框压到 20px 高以免它的中心比文字行高 3px。 */
.chk-cell { display: block; line-height: 20px; }
.chk-cell input[type="checkbox"] { width: 14px; height: 14px; margin: 0 6px 0 0; vertical-align: -5px; }
.chk-cell .pins-cur { vertical-align: middle; }
.chk-cell .lnk { vertical-align: middle; }
/* 账号管理 · 投放账户 ID 列（2026-09-20，用户："去掉投放账户ID列的勾选…一个账号又不会有多个投放账号ID"）
   → 这一列只显示「ID（等宽）+ 修改」，不再有复选框。 */
.accid-line { display: inline-flex; align-items: baseline; gap: 8px; line-height: 20px; }
.accid-cur { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
.accid-miss { color: #c0392b; }

/* 导入匹配预览 */
.match-panel { border: 1px solid #f5c2bd; background: #fffdfd; }
.match-table .model-input.mk { width: 170px; }
.match-table select.pick { max-width: 290px; padding: 5px 8px; border: 1px solid #dfe3e8; border-radius: 5px; font-size: 12.5px; background: #fff; outline: none; }
.match-table td { font-size: 12.5px; }
.warn { color: #c98a00; }
.flat { color: #9aa1a9; }

/* 投放调整 */
.adj-table td { font-size: 12.5px; padding: 7px 10px; }
.adj-table th { font-size: 12.5px; }
.adj-table td:nth-child(4), .adj-table td:nth-child(5), .adj-table td:nth-child(6),
.adj-table th:nth-child(4), .adj-table th:nth-child(5), .adj-table th:nth-child(6) { text-align: right; }
.adj-table td:nth-child(7), .adj-table td:nth-child(8), .adj-table th:nth-child(7), .adj-table th:nth-child(8) { text-align: right; }
.adj-ops { white-space: nowrap; }
.btn.tiny { padding: 3px 8px; font-size: 12px; margin-right: 4px; }
.row-err td { background: #fffafa; }
.adj-table td:first-child .sku-name { max-width: 260px; }

/* 调整弹窗 */
.modal-mask { position: fixed; inset: 0; background: rgba(20, 22, 26, .45); display: flex; align-items: center; justify-content: center; z-index: 99; }
.modal { background: #fff; border-radius: 10px; width: 560px; max-width: 94vw; box-shadow: 0 12px 40px rgba(0, 0, 0, .22); overflow: hidden; }
.modal-head { padding: 14px 18px; font-size: 15px; font-weight: 600; border-bottom: 1px solid #eceef1; }
.modal-body { padding: 14px 18px; }
.modal-foot { padding: 12px 18px; border-top: 1px solid #eceef1; text-align: right; }
.modal-foot .btn { margin-left: 8px; }
/* ★ 2026-09-24 按《UI规范.md》统一排版：`.kv` 原来是"标签固定 112px + 控件紧跟"的**横排**，
   跟新建计划向导的"标签在上"不一致（加词/改匹配/删词/批量改价/商品定向这些板子都用它）。
   这里改成**竖排**：标签在上、值在下并占满 —— 只动排版，HTML 结构一行没改。 */
.kv { display: block; padding: 0; margin: 0 0 12px; font-size: 13px; }
.kv > span:first-child { display: block; width: auto; margin-bottom: 5px; color: #5b6472; font-size: 12.5px; font-weight: 600; }
.kv > b { display: block; font-weight: 400; color: #1f2329; line-height: 1.7; }
.kv input[type=number], .kv input[type=text] { padding: 5px 8px; border: 1px solid #dfe3e8; border-radius: 8px; font-size: 13px; outline: none; height: 28px; }
.kv select { height: 28px; border: 1px solid #dfe3e8; border-radius: 8px; font-size: 13px; padding: 0 8px; }
.live-box { background: #f8f9fb; border: 1px solid #eceef1; border-radius: 6px; padding: 9px 12px; font-size: 12.5px; line-height: 1.9; color: #33383f; margin: 4px 0 10px; }
.act-btn { display: inline-block; padding: 3px 11px; border: 1px solid #e6e8eb; border-radius: 12px; font-size: 12.5px; color: #5a6069; cursor: pointer; margin-right: 6px; background: #fff; font-weight: 400; }
.act-btn:hover { border-color: #f5c2bd; color: #e1251b; }
.act-btn.on { background: #e1251b; border-color: #e1251b; color: #fff; font-weight: 600; }
/* 指标单元格下面的 环比/同比 小字 */
.sub { font-size: 11px; line-height: 1.5; color: #9aa1a9; white-space: nowrap; margin-top: 1px; }
.sub .cmp { color: #b9bfc7; margin-right: 2px; }
.sub span.up, .sub span.down, .sub span.flat { font-size: 11px; }
td .sub { font-weight: 400; }
/* 用户管理里的"可访问账号"勾选区：**只在弹窗里用**（表格那列已改成复选框+一行摘要） */
.pins-edit { display: flex; flex-direction: column; gap: 4px; }
.pins-edit .pin-chk { font-size: 13px; line-height: 1.7; }
.pins-edit .pin-chk input[type="checkbox"] { width: 14px; height: 14px; margin: 0; vertical-align: middle; }
/* 通用小弹窗（账户 ID / 账号权限编辑都用它） */
.modal-mask { position: fixed; inset: 0; background: rgba(15, 23, 42, .34); z-index: 200; display: flex; align-items: center; justify-content: center; }
.modal-box { background: #fff; border-radius: 12px; box-shadow: 0 18px 50px -12px rgba(16, 24, 40, .35); width: min(560px, 92vw);
  max-height: 86vh; overflow: auto; padding: 18px 20px 16px; }
.modal-box h4 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.modal-box .modal-sub { font-size: 12.5px; color: #6b7480; line-height: 1.8; margin-bottom: 12px; }
.modal-box .modal-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.modal-box .modal-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.modal-box .modal-foot .btn.primary { background: #e1251b; color: #fff; border: 0; }
.modal-box input[type="text"] { padding: 6px 9px; border: 1px solid #dfe3e8; border-radius: 6px; font-size: 13px; outline: none; }
.modal-box input[type="text"]:focus { border-color: #e1251b; }
/* 渠道页里的内嵌调整区 */
.adj-panel { border: 1px solid #f5c2bd; background: #fffdfd; margin-top: 14px; }
.adj-panel h4 { margin-bottom: 6px; }
.adj-panel .crumbs { margin-bottom: 10px; }

/* 分时环比组合图图例：柱子用方块 */
.legend i.bar { width: 10px; height: 10px; border-radius: 2px; }
.legend .src { color: #b3b8bf; font-size: 11.5px; }
.filter-bar select { margin-right: 10px; }

/* 分时环比悬停提示：每项一行 · 值（环比%） */
.chart-tip .tip-row b em { font-style: normal; font-weight: 500; color: #8a9099; }
.chart-tip .tip-row b em.up { color: #e1251b; }
.chart-tip .tip-row b em.down { color: #0aa06e; }
.chart-tip .tip-row.on { background: #f2f5ff; border-radius: 4px; padding: 0 4px; margin: 0 -4px; }
.chart-tip .tip-row.on b { color: #2a3fa8; }
.chart-tip .tip-foot { margin-top: 6px; padding-top: 5px; border-top: 1px solid #f0f2f5; color: #a8aeb6; font-size: 11px; }
.chart-tip .tip-row { line-height: 1.62; }

/* 分时环比：悬停聚焦（被悬停那根柱子加深，其余变淡）+ 图例排布 */
.chart-wrap rect.bar { transition: opacity .12s ease; }
.chart-wrap.hovering rect.bar { opacity: .4; }
.chart-wrap.hovering rect.bar.hot { opacity: 1; }
.legend .lg { display: inline-flex; align-items: center; }
.legend .src { margin-left: auto; }

/* 分时环比筛选栏：胶囊按钮（维度 / 渠道 / 粒度） */
.filter-bar .fb-title { font-size: 13px; color: #1f2329; margin-right: 4px; }
.filter-bar .fb-label { font-size: 11.5px; color: #9aa1a9; margin: 0 2px 0 8px; }
/* 「分时环比」在单元内那层没有对象可选，直接把完整单元名显示出来（2026-09-23：名字不许截断） */
.filter-bar .fb-cur { font-size: 12.5px; color: #1f2329; font-weight: 600; }
.pills { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pill { border: 1px solid #e6e8eb; background: #fff; color: #5a6069; font-size: 12px; padding: 4px 11px; border-radius: 13px; cursor: pointer; transition: all .12s ease; line-height: 1.5; }
.pill:hover { border-color: #c3cffa; color: #2a3fa8; background: #f7f9ff; }
.pill.on { background: #eef2ff; border-color: #9fb0f0; color: #2a3fa8; font-weight: 600; box-shadow: 0 1px 2px rgba(74,108,247,.12); }
.filter-bar select { margin-right: 0; }

/* 应用名后的版本徽标（京东推广看板 1.0） */
.brand .ver, .login-logo .ver { font-style: normal; font-size: 10.5px; font-weight: 700; color: #e1251b;
  background: #fff2f0; border: 1px solid #ffd8d3; border-radius: 9px; padding: 1px 6px; margin-left: 6px;
  vertical-align: 2px; letter-spacing: .3px; }
.login-logo .ver { font-size: 12px; padding: 2px 8px; vertical-align: 4px; }

/* 表头排序：点表头按该列排序（▲升序 / ▼降序 / ⇅未排序） */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: #e1251b; background: #fdf6f5; }
th.sortable .caret { margin-left: 4px; font-size: 9px; color: #c2c8d0; }
th.sortable:hover .caret { color: #e1251b; }
th.sortable.on { color: #e1251b; }
th.sortable.on .caret { color: #e1251b; }

/* ===== 分析报告 · 顶层三张表（维度做列，横向可滚；首列与表头吸附） ===== */
.adj-table.toprep { font-variant-numeric: tabular-nums; table-layout: fixed; width: 100%; }
.adj-table.toprep th, .adj-table.toprep td { text-align: right; white-space: nowrap; padding: 13px 12px; line-height: 1.6; }
.adj-table.toprep th.rowlab, .adj-table.toprep td.rowlab {
  text-align: left; background: #fff;
  width: 132px; border-right: 1px solid #e6e9ee;
}
/* 表3 的前两列各占 66px，合计 = 132px，使"花费→ROI"与一/二级表逐列对齐 */
.adj-table.toprep th.rowlab.half, .adj-table.toprep td.rowlab.half { width: 66px; }
.adj-table.toprep thead th { background: #f6f8fb; color: #4a5361; font-weight: 600; }
.adj-table.toprep thead th .src { display: block; font-weight: 400; font-size: 10.5px; color: #9aa1a9; }
.adj-table.toprep tbody tr:nth-child(even) td { background: #fbfcfe; }
.adj-table.toprep tbody tr:nth-child(even) td.rowlab { background: #fbfcfe; }
.adj-table.toprep tbody tr:hover td { background: #f3f7ff; }
.adj-table.toprep tbody tr:hover td.rowlab { background: #f3f7ff; }
.adj-table.toprep tr.sum-row td { font-weight: 700; background: #f6f9fd !important; border-top: 2px solid #dfe5ee; }
.adj-table.toprep tr.sum-row td.rowlab { font-weight: 700; }
.adj-table.toprep td .src { font-weight: 400; font-size: 10.5px; color: #9aa1a9; }
.adj-table.toprep td b.up { font-weight: 700; }
.adj-table.toprep td b.good { font-weight: 700; color: #0aa06e; }
.adj-table.toprep td b.bad { font-weight: 700; color: #e1251b; }
.adj-table.toprep td b.muted { font-weight: 700; color: #5a6069; }
.chart-tip .tip-row b em.good { color: #0aa06e; }
.chart-tip .tip-row b em.bad { color: #e1251b; }
.adj-table.toprep .rep-title { margin: 14px 0 6px; }
/* 顶层报告：表与表之间留出明显间距；分节标题再大一点 */
.table-wrap:has(.adj-table.toprep) { margin: 6px 0 22px; }
.rep-title.sec { margin: 30px 0 12px; font-size: 13.5px; }
.rep-title.sec:first-child { margin-top: 8px; }
/* 弹窗内容可能很高（分时折扣 7×24 网格、型号批量粘贴等）→ 弹窗整体限制在视口内、内容区自滚动，
   保证底部「提交 / 取消」按钮永远点得到（短弹窗不受影响）。 */
.modal { max-height: 92vh; display: flex; flex-direction: column; }
.modal-head { flex: 0 0 auto; }
.modal-foot { flex: 0 0 auto; }
.modal-body { overflow: auto; }

/* ---------- 快车 · 分时折扣（7×24 圈选网格）★ 2026-09-30 第六批：按《UI规范.md》§8.8 重做 ----------
   两条用户原话：「中间区域不符合UI规范」→ 中部区原来还是老板子（工具栏/图例/说明都是自造的、还自己编了 6 条色带）；
   「太拥挤了，而且色调不好看，颜色上稍微克制一些」→ 收敛成 **3 档 + 1 特殊**，**深蓝只留给"框选中的格子"**。
   令牌：弹窗 1440 / 格高 32 / 圆角 5 / 格内 12px / 间距 4 / 字段块行距 12 / 分区内边距 16。
   下面这一段的**颜色只表达状态**（未改 / 已改 / 不投放 / 溢价 / 框选），力度由格子里的数字表达。 */
.modal.tr-modal { --tr-line: #e5e8ec; --tr-line2: #eef1f4; --tr-blue: #2563eb; --tr-gray: #8b93a1; }
.modal.tr-modal .modal-body { padding: 16px 18px 12px; }
.modal.tr-modal .pd-sum { font-size: 12.5px; color: #5b6472; margin: 0 0 4px; }
.modal.tr-modal .pd-sum b { color: #1f2329; font-weight: 600; }
.modal.tr-modal .pd-sum .src { font-size: 11.5px; color: var(--tr-gray); }
/* 字段块：标签列 84px 左对齐 + 控件列；**行距 12**（§8.8 ④ 的宽松度令牌） */
.am-trmain .am-gt { font-size: 11px; font-weight: 400; color: var(--tr-gray); letter-spacing: .4px; margin: 10px 0 10px; }
.am-tform { display: grid; grid-template-columns: 84px minmax(0, 1fr); row-gap: 12px; column-gap: 10px; align-items: center; margin-bottom: 4px; }
.am-tform > label { font-size: 12.5px; color: #5b6472; text-align: left; white-space: nowrap; align-self: start; padding-top: 7px; }
.am-tform .am-cell { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.am-tform .am-cell-block { align-items: stretch; }
.am-tform .am-blocknote { margin-left: 0; }
/* 模板药丸（§8.3 药丸：高 28 / 圆角 14 / 选中主色底白字）；radio 本体视觉隐藏但仍在 DOM（套件盯 name=trmode） */
.tr-pill { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 14px;
  border: 1px solid var(--tr-line); background: #fff; font-size: 12.5px; color: #5b6472; cursor: pointer; }
.tr-pill input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.tr-pill:hover { border-color: #bcd7fb; }
.tr-pill.on { background: var(--tr-blue); border-color: var(--tr-blue); color: #fff; font-weight: 600; }
.tr-days { display: inline-flex; gap: 8px; align-items: center; margin-left: 4px; }
.tr-day { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; cursor: pointer; }
.tr-preset { height: 28px; font-size: 12.5px; border: 1px solid var(--tr-line); border-radius: 5px; padding: 0 6px; }
/* 主按钮（应用到选中）= **主色蓝**（原来它是红的，§8.8 ① 必修） */
.am-tform #trApply { background: var(--tr-blue); border-color: var(--tr-blue); color: #fff; font-weight: 600; }
.am-tform #trApply:hover { opacity: .92; color: #fff; }
/* 网格 */
.tr-scroll { overflow: auto; max-width: 100%; border: 0; border-radius: 0; }
.tr-grid { border-collapse: separate; border-spacing: 4px; table-layout: fixed; width: 100%; user-select: none; }
.tr-grid th, .tr-grid td { border: 0; text-align: center; font-size: 12px; padding: 0; }
.tr-grid thead th { background: transparent; color: var(--tr-gray); font-weight: 400; padding: 0 0 2px; font-size: 11px; }
.tr-grid th.tr-block { border-left: 0; color: var(--tr-gray); font-size: 11px; }
.tr-grid th.tr-rowlab { width: 72px; background: transparent; font-weight: 400; font-size: 11px; color: var(--tr-gray); text-align: left; padding-left: 2px; }
.tr-grid th.trrh { cursor: pointer; }
.tr-grid th.trrh:hover { background: #f2f7ff; color: var(--tr-blue); }
.tr-grid th.trh { width: auto; cursor: pointer; font-weight: 400; color: #9aa1a9; font-size: 11.5px; }
.tr-grid th.trh:hover { background: #f2f7ff; color: var(--tr-blue); }
/* 格子：高 32 / 圆角 5 / 描边 1px / 格内 12px；**颜色只表达状态** */
.tr-grid td.trc { height: 32px; border-radius: 5px; border: 1px solid var(--tr-line2); background: #fff; color: #9aa1a9;
  cursor: crosshair; font-variant-numeric: tabular-nums; font-size: 12px; }
.tr-grid td.trc.st-chg { background: #f7faff; border-color: var(--tr-line); color: #1f2329; }
.tr-grid td.trc.st-off { background: #f4f5f7; border-color: var(--tr-line); color: var(--tr-gray); }
.tr-grid td.trc.st-up { background: #fff; border-color: #bcd7fb; color: #5b6472; }
.tr-grid td.trc:hover { background: #f2f7ff; }
.tr-grid td.trc.sel { background: var(--tr-blue); border-color: var(--tr-blue); color: #fff; font-weight: 600; }
.tr-grid td.trc .neq { font-style: normal; font-size: 10px; opacity: .75; margin-left: 1px; }
.tr-grid td.tr-copy { width: 132px; padding: 0 4px; font-size: 11.5px; background: transparent; white-space: nowrap; }
.tr-grid th.tr-copy-h { width: 132px; white-space: nowrap; color: #9aa1a9; font-size: 11.5px; }
.tr-grid td.tr-copy a { margin: 0 4px; color: var(--tr-blue); }
/* 图例小色块（4 个，跟着上面那 4 种状态走；不再有 6 条彩带） */
.tr-lg { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--tr-line2);
  background: #fff; vertical-align: -2px; margin: 0 4px 0 10px; }
.tr-lg.st-chg { background: #f7faff; border-color: var(--tr-line); }
.tr-lg.st-off { background: #f4f5f7; border-color: var(--tr-line); }
.tr-lg.st-up { background: #fff; border-color: #bcd7fb; }
/* 影响段 / 底部两条固定带（与调整弹窗同一套观感）
   ★ 页脚与调整记录条是 `.modal` 的**直接子元素**（在 `.modal-body` 外面）—— 底/边线通栏到底，
     `提交给京东` 的右边界 = 弹窗右 − 18。（写在 body 里的话宽只有 1404、右边距会变成 36，§8.6 第 10 条不过。） */
.modal.tr-modal .am-band { padding: 16px 0 0; border-top: 1px solid var(--tr-line2); margin-top: 4px; }
.modal.tr-modal .am-impact { font-size: 13px; color: #1f2329; line-height: 1.8; font-variant-numeric: tabular-nums; }
.modal.tr-modal .am-impact b { font-weight: 600; color: #1f2329; }
.modal.tr-modal .am-blocknote { font-size: 12px; color: var(--tr-gray); line-height: 1.7; margin: 10px 0 0; }
.modal.tr-modal .modal-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; text-align: left;
  padding: 11px 18px; border-top: 1px solid var(--tr-line); background: #fcfdfe; }
.modal.tr-modal .modal-foot .btn { margin-left: 0; }
.modal.tr-modal .modal-foot .am-grow { flex: 1 1 auto; }
.modal.tr-modal .modal-foot .chk { font-size: 12.5px; color: #5b6472; }
.modal.tr-modal .modal-foot #trHard { flex-basis: 100%; }
.modal.tr-modal .modal-foot #trMsg { flex-basis: 100%; font-size: 12.5px; }
.modal.tr-modal .modal-foot .btn[disabled] { opacity: .5; cursor: not-allowed; }
/* 调整记录条（与调整弹窗同一套：折叠一行 / 明细条内滚动 200px / 行高 26） */
.modal.tr-modal .am-hist { background: #f7f9fb; border-top: 1px solid var(--tr-line); padding: 9px 18px; margin: 0; }
.modal.tr-modal .am-hist-h { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12.5px; color: #5b6472; }
.modal.tr-modal .am-hist-h .am-hist-t { font-weight: 600; }
.modal.tr-modal .am-hist-h .am-grow { flex: 1 1 auto; }
.modal.tr-modal .am-hist-h .am-hist-x { color: var(--tr-gray); font-variant-numeric: tabular-nums; }
.modal.tr-modal .am-hist-h .am-hist-tg { color: var(--tr-blue); white-space: nowrap; }
.modal.tr-modal .am-hist-b { display: none; margin-top: 7px; max-height: 200px; overflow: auto; }
.modal.tr-modal #trHistory.open .am-hist-b { display: block; }
.modal.tr-modal .am-hrow { display: grid; grid-template-columns: 108px 96px minmax(0, 1fr) 92px; column-gap: 10px;
  align-items: center; height: 26px; font-size: 12.5px; border-bottom: 1px solid #f2f4f7; }
.modal.tr-modal .am-hrow .am-ht { color: #9aa1a9; font-variant-numeric: tabular-nums; white-space: nowrap; }
.modal.tr-modal .am-hrow .am-hn { color: #5b6472; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal.tr-modal .am-hrow .am-hv { color: #1f2329; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal.tr-modal .am-hrow .am-hs { text-align: right; white-space: nowrap; }
.modal.tr-modal .am-hrow.am-hhead { color: var(--tr-gray); font-size: 11.5px; }
.modal.tr-modal .am-hrow.am-hhead span { color: var(--tr-gray); font-weight: 400; }
.modal.tr-modal .am-hist-empty { font-size: 12.5px; color: var(--tr-gray); padding: 4px 0; }

/* ---------- AI助理（只读）：右下角按钮 + 右侧抽屉（2026-09-20） ----------
   抽屉而不是居中弹窗：问数时你还要对照页面上的表格，弹窗会把内容挡住。
   账号/时间口径**不在面板里选** —— 直接跟随当前页面（顶栏账号 + 时间筛选），只显示成一行只读徽标。
   视觉沿用现有语义色（.up 红 / .down 绿 / .src 灰），不引任何框架。 */
.ai-fab { position: fixed; right: 18px; bottom: 18px; z-index: 60; border: 0; cursor: pointer;
  background: #1e6fd9; color: #fff; border-radius: 22px; padding: 10px 16px; font-size: 13px;
  box-shadow: 0 6px 18px rgba(30, 111, 217, .35); }
.ai-fab:hover { background: #175bb5; }
.ai-drawer { position: fixed; right: 0; top: 0; bottom: 0; width: 440px; max-width: 96vw; z-index: 61;
  background: #fff; border-left: 1px solid #e4e8ee; box-shadow: -8px 0 26px rgba(20, 22, 26, .12);
  display: flex; flex-direction: column; font-size: 13px; }
.ai-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px 9px; border-bottom: 1px solid #f1f3f6; }
.ai-title { font-weight: 600; font-size: 14px; }
.ai-sub { color: #8a9099; font-weight: 400; font-size: 11.5px; margin-left: 6px; }
/* 上下文徽标：账号 · 时间口径 · 当前层级（只读，跟随页面） */
.ai-ctxline { display: flex; align-items: center; gap: 6px; padding: 7px 14px 9px; border-bottom: 1px solid #f6f8fb; flex-wrap: wrap; }
.ai-chip { background: #eef4fd; color: #175bb5; border-radius: 10px; padding: 1px 8px; font-size: 11.5px; white-space: nowrap; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
.ai-chip.ghost { background: #f4f6f9; color: #5a636f; }
.ai-msgs { flex: 1 1 auto; overflow: auto; padding: 12px 14px; }
.ai-msg { margin-bottom: 12px; line-height: 1.7; }
.ai-who { display: block; font-size: 11px; color: #8a9099; margin-bottom: 3px; }
.ai-msg.user { background: #f2f6fd; border-radius: 10px; padding: 7px 10px; }
.ai-msg.user .ai-who { color: #6b7480; }
.ai-msg.bot { background: #fbfcfe; border: 1px solid #edf0f5; border-radius: 10px; padding: 8px 11px; }
/* 每条回答的"口径回执"：这段是按哪个账号/时间口径算的（切了页面也不变） */
.ai-stamp { font-size: 11px; color: #98a0ab; margin-bottom: 4px; }
.ai-ans { position: relative; }
.ai-ans-text { white-space: pre-wrap; padding-right: 44px; }
.ai-copy { position: absolute; right: 0; top: 0; border: 1px solid #e2e8f0; background: #fff; color: #6b7480;
  border-radius: 6px; font-size: 11px; padding: 1px 6px; cursor: pointer; }
.ai-copy:hover { color: #1e6fd9; border-color: #b9d2f5; }
.ai-num { color: #1e6fd9; text-decoration: underline dotted; cursor: help; }
.ai-bad { color: #c0392b; }
.ai-warn { margin-top: 6px; color: #b26a00; font-size: 12.5px; }
.ai-trace { margin-top: 8px; font-size: 12px; color: #6b7480; }
.ai-trace summary { cursor: pointer; color: #6b7480; }
.ai-next { margin-top: 8px; font-size: 12.5px; }
.ai-next span { color: #1e6fd9; cursor: pointer; text-decoration: underline dotted; margin-right: 10px; }
.ai-empty { color: #6b7480; font-size: 12.5px; line-height: 1.8; padding: 6px 2px; }
.ai-quick { padding: 7px 14px 0; display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid #f6f8fb; }
.ai-q { font-size: 11.5px; }
.ai-input { display: flex; gap: 8px; padding: 9px 14px 4px; align-items: flex-end; }
.ai-input textarea { flex: 1 1 auto; resize: none; font-size: 13px; line-height: 1.6; max-height: 120px; padding: 6px 8px; }
.ai-foot { padding: 4px 14px 10px; line-height: 1.6; color: #8a9099; }
@media (max-width: 700px) { .ai-drawer { width: 100vw; } }

/* ---------- 天气看板（分析模块）—— 2026-09-20 第六版：两个 TAB（全国气温 / 全国湿度） ----------
   ★ 2026-09-29 用户：这里的品类名称去掉、把气温放在前面 → 页签只剩「全国气温 / 全国湿度」两个词，
     品类副标题与 `.wx-tab span` 那两条字号规则一并删除（页签里再没有 span 了）。
   设计史（教训都在这）：v1 整格饱和色（色砖墙）→ v2 白底细色带（数字墙）→ v3 品类卡+矩阵
   （用户："这是你做的东西？能看吗？"）→ v4 排期曲线+机会表（用户："还是很丑"）→
   v5 照搬本地每日流程的观感（工具库 build_weather_report.mjs）→
   v6 用户的下一步要求："TAB 两个：全国湿度（着色用现在的样式）/ 全国气温（含最高和最低），
       保留排版和着色、改成合适的大小（适应浏览器窗口）；湿度 TAB 分析除湿机/干衣机，
       气温 TAB 分析取暖器/电风扇/移动空调/冷风扇"。
   两条硬规则（都是前面几版踩出来的）：
     ① 颜色只表达**一个**可比的量：湿度 TAB 全是湿度色阶，气温 TAB 全是气温色阶，不混着上色
     ② 列宽**弹性**：城市表用 CSS Grid + minmax，跟着浏览器窗口伸缩；只有窗口窄到 1060px
        以下才横向滚动兜底（那时硬挤会把 42 城 × 7 天的格子压得看不清） */
.wx-panel { padding: 0; background: #f4f6fa; }
.wx-panel .filter-bar { background: #fff; border-radius: 8px; margin-bottom: 14px; }
.wx-tabs { display: inline-flex; gap: 4px; background: #eef1f6; border-radius: 9px; padding: 3px; }
.wx-tab { display: flex; align-items: center; padding: 6px 18px; border-radius: 7px;
  cursor: pointer; font-size: 13px; font-weight: 700; color: #5a636f; line-height: 1.3; }
.wx-tab:hover { color: #2563eb; }
.wx-tab.on { background: #fff; color: #1d4ed8; box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }

.rpt-page { width: 100%; margin: 0 auto; color: #0f172a; }
.rpt-page * { box-sizing: border-box; }
.rpt-warn { margin-top: 10px; font-size: 12.5px; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 8px 12px; }

/* ① 头图 + 关键数字卡（照搬本地 hero；气温 TAB 换一套冷色渐变，一眼区分两个 TAB） */
.rpt-page .hero { background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 55%, #2563eb 100%); color: #fff;
  padding: 26px 32px 22px; border-radius: 20px; margin-bottom: 16px;
  box-shadow: 0 10px 32px -12px rgba(30, 58, 138, .45); position: relative; overflow: hidden; }
.rpt-page .hero-temp { background: linear-gradient(135deg, #0f172a 0%, #155e75 55%, #0891b2 100%); box-shadow: 0 10px 32px -12px rgba(8, 145, 178, .45); }
.rpt-page .hero::after { content: ''; position: absolute; right: -100px; top: -100px; width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(125, 211, 252, .22), transparent 70%); }
.rpt-page .hero-top { display: flex; justify-content: space-between; align-items: flex-start; position: relative; z-index: 1; gap: 20px; flex-wrap: wrap; }
.rpt-page .h-title { font-size: clamp(22px, 2vw, 30px); font-weight: 800; letter-spacing: 1px; }
.rpt-page .h-sub { margin-top: 9px; font-size: 13px; color: #bfdbfe; line-height: 1.8; }
/* ★ 2026-09-29 用户："两边的宽度改到一致。"（选了"统一 196px + 卡片始终在标题右侧"）
   改前：4 张统计卡是 `min-width:126px` + 内容撑开 → **同一页里卡片宽度各不相同**
   （气温页 188/188/126/126、湿度页 153/177/126/126），两页的卡片组总宽也不同（658 / 613）。
   三处配套（数都是按用户窗口 1699 宽、头图内容宽 1358 算的）：
     ① `.h-stat` 定宽 **196px** → 8 张卡一样大、两页卡片组都是 814px（196×4 + 10×3）。
        196 的来历：最长标签「7 天最低温最低（呼和浩特）」= 155px，卡片内容宽 = 196-32(padding)-2(border) = 162 → 正好一行。
     ② `.hero-top > div:first-child` 给"标题块"**封顶 500px**（`flex: 0 1 500px`）：
        500 + 20(gap) + 814 = 1334 ≤ 1358 → 卡片就能待在标题**同一排的右侧**（`space-between` 会把它推到最右）。
        为什么封顶而不是硬压（`nowrap` + `min-width:0`）：硬压会溢出；封顶则是"放得下就并排、
        放不下（窗口变窄/手机）就自动换行到标题下方一行"—— `.hero-top` 的 `flex-wrap: wrap` 保持不动，窄屏优雅退回。
     ③ `.h-title` 加 `text-wrap: balance`：标题块封顶后标题会折两行，加了它是让两行**均衡**
        （"全国主要城市气温与冷暖 / 机会 · 未来 7 天"），而不是折成"… · 未来 / 7 天"那种尾巴一两个字。 */
.rpt-page .hero-top > div:first-child { flex: 0 1 500px; min-width: 0; }
.rpt-page .h-title { text-wrap: balance; }
.rpt-page .h-sub b { color: #7dd3fc; font-weight: 600; }
.rpt-page .h-stats { display: flex; gap: 10px; flex: none; flex-wrap: wrap; }
.rpt-page .h-stat { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px;
  padding: 10px 16px; text-align: center; width: 196px; }
.rpt-page .h-stat .v { font-size: 23px; font-weight: 800; }
.rpt-page .h-stat .v.blue { color: #7dd3fc; } .rpt-page .h-stat .v.sky { color: #bae6fd; } .rpt-page .h-stat .v.amber { color: #fcd34d; }
.rpt-page .h-stat .l { font-size: 12px; color: #cbd5e1; margin-top: 3px; }
.rpt-page .h-note { margin-top: 18px; font-size: 13px; color: #e0f2fe; position: relative; z-index: 1; line-height: 1.95; }
.rpt-page .h-note .tag { display: inline-block; background: rgba(2, 132, 199, .85); color: #fff; font-size: 12px;
  padding: 2px 12px; border-radius: 999px; margin-right: 10px; font-weight: 600; }
.rpt-page .h-note .h-rule { display: block; margin-top: 6px; font-size: 12px; color: #93c5fd; }

/* ② 卡片与段落标题 */
.rpt-page .card { background: #fff; border-radius: 20px; box-shadow: 0 1px 3px rgba(16, 24, 40, .05), 0 10px 30px -14px rgba(16, 24, 40, .14); margin-bottom: 16px; overflow: hidden; }
.rpt-page .card-pad { padding: 20px 24px; }
.rpt-page .sec { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.rpt-page .sec h2 { font-size: 19px; font-weight: 800; color: #0f172a; }
.rpt-page .sec .sub { font-size: 12.5px; color: #94a3b8; }
.rpt-page .legend-row { display: flex; align-items: center; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
.rpt-page .legend-bar { display: flex; gap: 4px; }
.rpt-page .lvl { display: flex; flex-direction: column; align-items: center; }
.rpt-page .lvl-swatch { width: 66px; height: 15px; border-radius: 6px; }
.rpt-page .lvl-label { font-size: 10.5px; color: #64748b; margin-top: 4px; font-weight: 600; }
.rpt-page .legend-cap { font-size: 12px; color: #94a3b8; }
.rpt-page .wx-legend { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.rpt-page .wx-legend span { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: #475569; font-weight: 600; }
.rpt-page .wx-legend-ico { width: 20px; height: 20px; }
.rpt-page .grad-bar { width: 150px; height: 13px; border-radius: 7px; border: 1px solid #eef1f6; }
/* 气温图例：v9 起是一条**冷暖连续渐变条**（只有冷暖两个方向），所以给它一条实色带 + 两端标注 */
.rpt-page .grad-bar-t { width: 220px; height: 14px; border-radius: 7px; border: 1px solid #e6ebf2; }
/* 地图：SVG 本身自适应宽度；城市表用弹性列宽，只有窗口很窄时才横向滚动兜底 */
.rpt-page .map-wrap { overflow-x: auto; }
.rpt-page .map-wrap > svg { min-width: 720px; }
.rpt-page .tbl-wrap { overflow-x: auto; }
.rpt-page .tbl-inner { min-width: 1060px; }

/* ③ 大区分块 + 城市行（行 = Grid，列宽弹性） */
.rpt-page .region { margin-bottom: 16px; }
.rpt-page .region:last-child { margin-bottom: 0; }
/* 大区表头两行：第一行 = 大区名 + 区域级分析 + 收起；第二行 = 列头（城市 + 7 个日期，日期吸顶） */
.rpt-page .region-head { background: #f8fafc; border-left: 4px solid #2563eb;
  border-radius: 12px 12px 0 0; cursor: pointer; }
.rpt-temp .region-head { border-left-color: #0891b2; }
.rpt-page .region-head:hover { background: #f1f5f9; }
.rpt-page .rh-top { display: flex; align-items: center; gap: 12px; padding: 8px 20px; flex-wrap: wrap; }
.rpt-page .rh-name { font-size: 14px; font-weight: 800; color: #fff; background: #2563eb; padding: 4px 16px; border-radius: 999px; letter-spacing: 2px; flex: none; }
.rpt-temp .rh-name { background: #0891b2; }
.rpt-page .rh-brief { font-size: 12.5px; color: #475569; line-height: 1.6; flex: 1; min-width: 200px; }
.rpt-page .rh-toggle { margin-left: auto; font-size: 12px; color: #2563eb; flex: none; }
.rpt-page .rh-cols { display: grid; grid-template-columns: 150px 84px repeat(7, minmax(76px, 1fr));
  border-top: 1px solid #eef1f6; position: sticky; top: 0; z-index: 3; background: #f8fafc; }
.rpt-page .rh-cols > div { text-align: center; padding: 6px 0; font-size: 11.5px; font-weight: 700; color: #64748b; letter-spacing: .5px; }
.rpt-page .rh-cols .c-city { text-align: left; padding-left: 14px; }
.rpt-page .rh-cols .c-max { font-size: 11px; color: #94a3b8; }
.rpt-page .rh-cols .c-dateh b { display: block; font-size: 11.5px; color: #334155; font-weight: 700; }
.rpt-page .rh-cols .c-dateh span { display: block; font-size: 10px; color: #a6adb7; font-weight: 400; }
.rpt-page .region-rows { border: 1px solid #eef1f6; border-top: none; border-radius: 0 0 12px 12px; overflow: hidden; display: none; }
.rpt-page .region.region-open .region-rows { display: block; }
/* 城市行：城市 + 汇总列 + 7 个日期格（没有"品类机会"列了） */
.rpt-page .row { display: grid; align-items: stretch; border-bottom: 1px solid #f1f4f9;
  grid-template-columns: 150px 84px repeat(7, minmax(76px, 1fr)); }
.rpt-page .row:last-child { border-bottom: none; }
.rpt-page .c-city { padding: 0 14px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.rpt-page .city { font-size: 14px; font-weight: 700; color: #0f172a; }
.rpt-page .c-sub { font-size: 10.5px; color: #94a3b8; margin-top: 2px; white-space: nowrap; }
.rpt-page .star { color: #d19a00; font-style: normal; margin-left: 4px; font-size: 10px; }
.rpt-page .c-max { display: flex; align-items: center; justify-content: center; }
.rpt-page .badge { display: inline-block; min-width: 50px; text-align: center; font-size: 12.5px; font-weight: 800; padding: 4px 8px; border-radius: 8px; background: #eff6ff; color: #1d4ed8; }
.rpt-page .wx-range { font-size: 12.5px; font-weight: 800; color: #1d4ed8; background: #eff6ff; border-radius: 8px; padding: 4px 8px; white-space: nowrap; }
.rpt-page .c-none { font-size: 11.5px; color: #cbd5e1; }
.rpt-page .cell { text-align: center; padding: 4px 2px 3px; border-left: 1px solid #f1f4f9; position: relative; }
/* 注意：2026-09-20 第七版按用户要求**去掉达标格描边**（.cell-hit 只留类名，不再画框） */
.rpt-page .cell .wx { line-height: 1; margin-bottom: 2px; }
.rpt-page .cell .wx-ico { width: 27px; height: 27px; display: block; margin: 0 auto; }
.rpt-page .cell .val { font-size: 15px; font-weight: 800; line-height: 1.15; }
/* 气温 TAB 的最高/最低：左右结构，大小与着色都区分（左=最高温，大且实；右=最低温，小且淡） */
.rpt-page .valrow { display: flex; align-items: baseline; justify-content: center; gap: 5px; line-height: 1.1; }
.rpt-page .cell .val-max { font-size: 15px; font-weight: 800; }
.rpt-page .cell .val-min { font-size: 10.5px; font-weight: 600; opacity: .7; }
.rpt-no-icons .rpt-page .cell .wx-ico { display: none; }

.rpt-page .chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #e2e8f0; border-radius: 999px;
  padding: 3px 11px 3px 7px; font-size: 12.5px; font-weight: 600; background: #fff; color: #334155; }
.rpt-page .chip i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.rpt-page .chip b { font-weight: 800; color: #0f172a; }
.rpt-page .chip em { font-style: normal; font-size: 11px; color: #64748b; }

/* ⑤ 窄窗口兜底：只有窗口实在窄（<1180px）才让城市表横向滚动 */
@media (max-width: 1180px) {
  .rpt-page .row { grid-template-columns: 140px 76px repeat(7, minmax(70px, 1fr)); }
  .rpt-page .rh-cols { grid-template-columns: 140px 76px repeat(7, minmax(70px, 1fr)); }
  .rpt-page .tbl-inner { min-width: 1000px; }
}
@media (max-width: 980px) {
  .rpt-page .hero { padding: 24px 22px 20px; }
  .rpt-page .card-pad { padding: 18px 16px; }
}

/* ---------- 地域维度 × 实时天气列（2026-09-21 加，两轮定稿）----------
   位置：**「地域」右边独占一列**（不是塞在省名下面）—— 用户口径："加在我框出来的位置"（地域名右侧那一竖条）。
   格式：`天气现象 · 气温 · 今日低温 · 湿度`，例如 `⛈ 33℃ 低 27℃ 湿 63%`。
   定宽用类名 `.wx-col`（**不用 nth-child**）：这张表的列数会随页面变（有无花费占比 / 操作列），nth-child 必然错位。
   `white-space: nowrap` 是刻意的：这条内容比列宽长时宁可"往右边借一点空隙"也不换行 ——
   换行会把这一行的行高顶起来，而**行高不一致正是上次"表头和内容没对齐"的根因**（踩过两次）。
   ★ 类名一律 `wxnow-` 前缀：`.wx-*` 已被「全国天气」报告页占用（`.rpt-page .wx-range` 等），换前缀彻底隔开。 */
/* ★ 2026-09-24 修"表头歪"：全局 `th { text-align: right }` + 内容单元格继承了 `table td` 的右对齐，
   而这里原本只给 `th.wx-col` 设了 left → **表头左对齐、内容右对齐**（实测偏差 6px；创意列更明显 98px）。
   现在把**表头与内容都显式设成 left**（并用 `table thead th.x` / `table tbody td.x` 提高优先级，压过全局 th 规则）。 */
table thead th.wx-col, table tbody td.wx-col { width: 104px; min-width: 104px; font-size: 11.5px; white-space: nowrap; text-align: left; }
table thead th.wx-col { font-weight: 600; }
table thead th.ad-col, table tbody td.ad-col { width: 158px; min-width: 158px; text-align: left; }
table thead th.ad-col { font-weight: 600; }
td.wx-col .wx-now { font-weight: 400; color: #6b7480; display: inline-flex; align-items: center; gap: 3px; }
td.wx-col .wx-now b { color: #3f4650; font-weight: 700; }
td.wx-col .wx-now.wxnow-hot b { color: #d9480f; }
td.wx-col .wx-now.wxnow-cold b { color: #1d4ed8; }
td.wx-col .wxnow-lo { color: #1d4ed8; }
td.wx-col .wxnow-hum { color: #9aa1a9; }
td.wx-col.src { color: #c2c8d0; }
/* 天气现象图标：用户 2026-09-21 要求"图表放大"——它是这一列最先要认出来的信息，
   所以给它 17px（比列内文字大 50%）。`object-fit` 不适用于 emoji，改用行高把它压进行高里，避免撑高单元格。 */
.wxnow-ico { font-size: 17px; line-height: 1; display: inline-block; vertical-align: -1px; }
/* 悬停浮层（自己画的，不用原生 title）：定位 fixed，跟着单元格算位置 */
#wxTipBox { position: fixed; z-index: 400; display: none; max-width: 560px; background: #fff; color: #3f4650;
  border: 1px solid #e2e6ec; border-radius: 8px; box-shadow: 0 12px 32px -10px rgba(15, 23, 42, .35); padding: 10px 12px;
  font-size: 12px; line-height: 1.6; font-weight: 400; text-align: left; white-space: normal; pointer-events: none; }
.wxnow-tip .wxnow-h { font-weight: 700; color: #1f2430; margin-bottom: 2px; }
.wxnow-tip .wxnow-sub { color: #4b5563; margin-bottom: 6px; }
.wxnow-tip table { border-collapse: collapse; table-layout: fixed; font-size: 11.5px; }
/* 逐列统一对齐 + 显式列宽（用户 2026-09-21 反馈两次："列之间未对齐"）。
   第一版错在哪：表头与单元格的**盒子**本来就重合（实测 thLeft == tdLeft），错的是**文字**——
   ① 表头 padding-right 是 0、单元格是 2px（排版盒宽度不一样）；
   ② 数值列右对齐时，表头短文字从**左**边起排、数字贴**右**边 → 看着像错开一格。
   现在的口径：**所有列的表头与内容一律左对齐，左右内边距全部一致（右 16px）**；
   「今日温区」列宽度贴合 `27~33℃`，所以它自己就形成一个整齐的右边界。
   定宽用 `table-layout: fixed` + `<colgroup>`，列宽不再随浮层宽度变化。 */
.wxnow-tip col.wxnow-w1 { width: 92px; }    /* 城市（含「代表」标签） */
.wxnow-tip col.wxnow-w2 { width: 96px; }    /* 天气现象（最长「小毛毛雨 🌧」） */
.wxnow-tip col.wxnow-w3 { width: 70px; }    /* 今日温区（27~33℃，贴合即右边界） */
.wxnow-tip col.wxnow-w4 { width: 70px; }    /* 实况气温 */
.wxnow-tip col.wxnow-w5 { width: 52px; }    /* 湿度 */
.wxnow-tip th, .wxnow-tip td { text-align: left; padding: 2px 16px 2px 0; }
.wxnow-tip th { font-weight: 600; color: #8a9099; padding-bottom: 3px; border-bottom: 1px solid #eef1f5; }
.wxnow-tip th:first-child, .wxnow-tip td:first-child { padding-left: 4px; }
.wxnow-tip tr.is-rep td { background: #f6f8fb; }
.wxnow-tip td.wxnow-t b.wxnow-hot { color: #d9480f; }
.wxnow-tip td.wxnow-t b.wxnow-cold { color: #1d4ed8; }
.wxnow-tip td.wxnow-c { white-space: nowrap; }
.wxnow-tip .wxnow-ico { font-size: 15px; }
.wxnow-tip .wxnow-tag { font-size: 10px; color: #2563eb; background: #eff6ff; border-radius: 4px; padding: 0 4px; margin-left: 4px; }
.wxnow-tip .wxnow-src { color: #9aa1a9; font-size: 11px; margin-top: 5px; }

/* ---------- 创意列（创意图 + 创意标题，2026-09-21 加）----------
   位置：创意维度表里，**天气列之后、花费列之前**（用户口径："放在计划创意维度，花费列之前，汇总列之后"）。
   定宽用类名 `.ad-col`（不用 nth-child：这张表列数随页面变）。缩略图 40×40、`object-fit: cover` 保证方图不变形。
   标题限宽 + 省略号：创意标题长达 60 字，不截断会把这张表撑到横向滚动。 */
table thead th.ad-col, table tbody td.ad-col { width: 158px; min-width: 158px; text-align: left; }
table thead th.ad-col { font-weight: 600; }
td.ad-col .ad-img { display: inline-block; vertical-align: middle; line-height: 0; }
td.ad-col .ad-img img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; border: 1px solid #e6e9ee; background: #f4f6fa; }
td.ad-col .ad-img:hover img { border-color: #2563eb; }
td.ad-col .ad-title { display: inline-block; vertical-align: middle; margin-left: 6px; max-width: 104px; font-size: 11.5px;
  color: #3f4650; white-space: normal; line-height: 1.35; }
td.ad-col .ad-nopic { font-size: 11.5px; color: #6b7480; }
td.ad-col .ad-nopic .src { display: block; }

/* ---------- 关键词层工具条 + 危险按钮（2026-09-23 第 1 批：加词 / 删词 / 改匹配方式） ---------- */
.kw-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 10px; }
/* 翻页条（2026-09-24 深层列表）：与工具条同一行风格，但按钮是灰底描边（不是主色实心，避免抢主操作） */
.pager-bar { margin: 8px 0 4px; }
.pager-bar .btn.ghost { background: #fff; color: #3f4650; border: 1px solid #dfe3e8; font-size: 12.5px; padding: 4px 10px; border-radius: 5px; }
.pager-bar .btn.ghost:hover:not([disabled]) { border-color: #1e6fd9; color: #1e6fd9; }
.pager-bar .pg-num, .pager-bar .pg-size { height: 28px; border: 1px solid #dfe3e8; border-radius: 5px; font-size: 12.5px; padding: 0 6px; }
.pager-bar .pg-num { text-align: right; }
.kw-bar .btn { background: #1e6fd9; color: #fff; border: 0; font-size: 13px; padding: 6px 12px; border-radius: 5px; }
.kw-bar .btn:hover { opacity: .9; }
.btn.danger { background: #fff; color: #d0021b; border: 1px solid #f0c2c7; }
.btn.danger:hover { background: #fff5f5; border-color: #e1251b; color: #c00; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.kw-add-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.kw-add-table th, .kw-add-table td { border-bottom: 1px solid #eef0f3; padding: 4px 6px; text-align: left; }
.kw-add-table input[type=number] { width: 84px; padding: 3px 6px; border: 1px solid #dfe3e8; border-radius: 4px; }
.kw-add-table select { padding: 3px 6px; border: 1px solid #dfe3e8; border-radius: 4px; }
.kw-bar .kw-sel { font-size: 12px; color: #8a9099; margin: 0 2px; }
.kw-selcol { width: 34px; text-align: center; }
.kw-selcol input { cursor: pointer; }
.kw-sug { white-space: nowrap; }
.kw-bar .kw-sel { font-variant-numeric: tabular-nums; }

/* ---------- 商品定向弹窗（2026-09-23 改版：列表优先 / 行内改价 / 底部固定条） ---------- */
.pd-sum { font-size: 12.5px; color: #5b6472; margin: 2px 0 10px; }
.pd-tbl { width: 100%; border-collapse: collapse; }
.pd-tbl th { text-align: left; font-weight: 500; color: #8a9099; font-size: 12px; padding: 8px 10px; border-bottom: 1px solid #eef0f3; background: #fafbfc; }
.pd-tbl td { padding: 9px 10px; border-bottom: 1px solid #f2f4f7; vertical-align: middle; }
.pd-tbl tr.changed td { background: #fffdf7; }
/* ★★ 2026-10-03（用户实测：「填写出价之后会冒出一个橙色的竖条」→ 用户拍板 **去掉竖条**）：
   这两条原来打在第 `:first-child`（= 勾选框列，只有 30px 宽），色条紧贴勾选框、看着像错位的色块；
   用户要求**不要竖条**。→ 竖条两类都删掉，改用"整行底色"表达（与 §八 的浅底口径一致）：
     · 改过  → 浅黄 `#fffdf7`（原有，保留）
     · 勾选中 → 浅蓝 `#f7faff`（原先是蓝竖条，现在没竖条了，必须补一个底色，否则勾选没有视觉反馈）
   两类底色互不冲突；同一行既勾选又改过时，`.changed` 的浅黄更"重"，写在后面压住。 */
.pd-tbl tr.picked td { background: #f7faff; }
.pd-tbl tr.changed td { background: #fffdf7; }
.pd-tbl tr.changed td:first-child, .pd-tbl tr.changed td:nth-child(2),
.pd-tbl tr.picked td:first-child, .pd-tbl tr.picked td:nth-child(2) { box-shadow: none; }
.pd-goods { display: flex; align-items: center; gap: 10px; }
.pd-ph { width: 40px; height: 40px; border-radius: 6px; background: linear-gradient(135deg, #eef2f7, #dde5ee); flex: 0 0 auto; }
.pd-name { font-size: 13px; color: #1f2329; }
.pd-tbl .mono { font-family: Consolas, monospace; font-size: 11.5px; color: #9aa1a9; }
.pd-tbl .cur { color: #8a9099; margin-right: 6px; font-variant-numeric: tabular-nums; }
.pd-num { width: 74px; text-align: right; padding: 5px 7px; border: 1px solid #dfe3e8; border-radius: 5px; font-size: 13px; }
.pd-num:focus { border-color: #1e6fd9; outline: none; }
.pd-more { padding: 2px 8px; }
.pd-grow { flex: 1; }
.pd-footsum { font-size: 12.5px; color: #5b6472; }
.pd-footsum b { color: #1f2329; }
.pd-footsum .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #f0a020; margin-right: 6px; }
.pd-cards { display: flex; gap: 10px; margin: 4px 0 12px; }
.pd-tcard { flex: 1; border: 1px solid #dfe3e8; border-radius: 8px; padding: 9px 12px; cursor: pointer; }
.pd-tcard.on { border-color: #1e6fd9; box-shadow: inset 0 0 0 2px #e8f0ff; }
.pd-tcard b { display: block; font-size: 13px; }
.pd-tcard i { font-style: normal; font-size: 11.5px; color: #8a9099; }
.pd-form { display: grid; grid-template-columns: 96px 1fr 96px 1fr; gap: 10px 12px; align-items: center; margin: 6px 0 4px; }
.pd-form label { color: #5b6472; font-size: 12.5px; text-align: right; }
.pd-form label.req::after { content: "*"; color: #e1251b; margin-left: 2px; }
.pd-form input { padding: 6px 8px; border: 1px solid #dfe3e8; border-radius: 6px; font-size: 13px; width: 100%; }
.pd-preview { background: #f7f9fc; border: 1px solid #e6ecf5; border-radius: 8px; padding: 10px 12px; margin: 10px 0 2px; font-size: 12.5px; }
.pd-empty { text-align: center; padding: 26px 10px; }
.pd-empty-t { font-size: 14px; font-weight: 600; margin-bottom: 6px; }

/* 商品定向弹窗宽度（2026-09-23 用户："把点击修改定向出价按钮弹出的浮窗宽度加宽呢，太拥挤了"；
   ★ 2026-10-03 用户拍板：本批两块板子（商品定向 / 新增商品定向）**统一到 §八，宽度 = 860**。
   `.modal.am`（860）那一整套令牌见 1243 起；这里只定宽度与正文内边距（与页眉/页脚同一左边界 18px）。
   ⚠️ 使用点只有 2 个（app.js:3312 / 3456），`.cd-wide`（人群/创意/地域 1180）不在此列、未动。 */
.modal.pd-wide { width: 860px; }
.modal.pd-wide .modal-body { padding: 12px 18px; }
.modal.pd-wide .pd-name { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ⚠️ 2026-10-03 P2c 删掉了原来的 `.modal.pd-wide .pd-tbl { table-layout: auto; }`：
   它在 860 下特异性与 `.modal.kwm .pd-tbl`(见下方 .kwm 一节) **同为 0,3,0 且排在后面** → 把定宽布局又打回 auto，
   实测列宽变成 26/144.4×5/76（7 列均分），与 §4.2 的 30/1fr/80/68/92/86/76 不符（主控口径：不许加横向滚动，靠定宽表落地）。 */
@media (max-width: 1080px) { .modal.pd-wide { width: 94vw; } }

/* ================================================================================
   ★ 2026-10-03 P2c：「商品定向」+「新增商品定向」统一到《UI规范.md》§八（案 A · 宽度 860）
   --------------------------------------------------------------------------------
   为什么新开一个 `.kwm` 而不是直接挂 `.am`：`.modal.am` 除了令牌，还带**改值型布局**
   （`.pd-form` 84px 栅格 / 右栏 150px / 案① 卡片槽 `--am-cards-h` / `.modal.am .pd-tcard{cursor:default}` 等），
   挂上 `am` 会把这套布局一起带进来。
   `.kwm` 的每一条取值都**逐条照抄** `.modal.am`（= §8.1/8.2/8.3），不新造颜色/字号/圆角；
   `--kwm-soft` 跟 `--am-soft` 一样取 `#f7f9fb`（§8.1 表里写的 `#f7f9fb` 是「调整记录条底色」那一格的口径）。

   ★★ 变量别名（这条不做，调整记录条会掉色）：全局类 `.am-hist-h / .am-hist-x / .am-hist-tg / .am-hist-b /
   .am-hist-empty / .am-hrow`（style.css 1474-1497）读的是 `var(--am-2nd)` / `var(--am-blue)` / `var(--am-gray)` /
   `var(--am-th)` —— 它们**没有 `.am` 前缀**，是全局规则；而本批两块板子只挂 `.kwm`、不挂 `am`
   → 必须在这里把 `--am-*` 别名指到 `--kwm-*`（纯别名、值完全相同）。**不许**去改那批全局规则（会波及其他板子）。 */
.modal.kwm {
  --kwm-fg: #1f2329; --kwm-2nd: #5b6472; --kwm-gray: #8b93a1;
  --kwm-line: #e5e8ec; --kwm-line2: #eef1f4; --kwm-blue: #2563eb;
  --kwm-soft: #f7f9fb; --kwm-foot: #fcfdfe; --kwm-th: #9aa1a9;
  --am-fg: var(--kwm-fg); --am-2nd: var(--kwm-2nd); --am-gray: var(--kwm-gray);
  --am-line: var(--kwm-line); --am-line2: var(--kwm-line2); --am-blue: var(--kwm-blue);
  --am-soft: var(--kwm-soft); --am-foot: var(--kwm-foot); --am-th: var(--kwm-th);
}
/* ① 页眉（12px 18px / 下边线 #e5e8ec）+ 对象行（12.5 / #8b93a1，**修掉错误继承的 font-weight:600**） */
.modal.kwm .modal-head { padding: 12px 18px; font-size: 15px; font-weight: 600; color: var(--kwm-fg); border-bottom: 1px solid var(--kwm-line); }
.modal.kwm .modal-head .src { font-size: 12.5px; color: var(--kwm-gray); font-weight: 400; }
.modal.kwm .modal-body { padding: 12px 18px; }
.modal.kwm .board-x { border-radius: 5px; }
/* ② 分区（band）：padding 12px 0；分区之间 1px #eef1f4；分区标题 11 / #8b93a1 / ls .4px */
.modal.kwm .am-band { padding: 12px 0; }
.modal.kwm .am-band + .am-band { border-top: 1px solid var(--kwm-line2); }
.modal.kwm .am-band:last-child { padding-bottom: 6px; }
.modal.kwm .am-band1 { border-top: 1px solid var(--kwm-line2); margin-top: 8px; }
.modal.kwm .am-gt { font-size: 11px; font-weight: 400; color: var(--kwm-gray); letter-spacing: .4px; margin: 0 0 8px; }
.modal.kwm .am-impact { font-size: 13px; color: var(--kwm-fg); line-height: 1.8; font-variant-numeric: tabular-nums;
  background: var(--kwm-soft); border: 1px solid var(--kwm-line); border-radius: 5px; padding: 8px 10px; }
.modal.kwm .am-impact b { font-weight: 600; color: var(--kwm-fg); }
.modal.kwm .am-impact .u { font-size: 13px; color: var(--kwm-fg); }
.modal.kwm .am-arrow { color: var(--kwm-fg); padding: 0 2px; }
.modal.kwm .am-cell { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.modal.kwm .u { font-size: 12px; color: var(--kwm-gray); }
.modal.kwm .kwm-note { font-size: 12px; color: var(--kwm-gray); line-height: 1.7; margin-top: 8px; }
.modal.kwm .kwm-note b { font-weight: 600; }
/* ③ 控件：高 28 / 描边 1px #e5e8ec / 圆角 5 / 内边距 3px 7px / 字 13（§8.3） */
.modal.kwm input:not([type=checkbox]):not([type=radio]), .modal.kwm select {
  height: 28px; border: 1px solid var(--kwm-line); border-radius: 5px; padding: 3px 7px; font-size: 13px;
  color: var(--kwm-fg); background: #fff; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.modal.kwm .pd-num { width: 92px; text-align: right; }
.modal.kwm input[type=number] { appearance: textfield; -moz-appearance: textfield; }
.modal.kwm input[type=number]::-webkit-outer-spin-button,
.modal.kwm input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
.modal.kwm .chk { font-size: 12.5px; color: var(--kwm-2nd); display: inline-flex; align-items: center; gap: 4px; }
.modal.kwm .chk input[type=checkbox] { width: 13px; height: 13px; margin: 0; accent-color: var(--kwm-blue); }
/* 字段网格（§8.3）：84px 标签列 + 行距 8 + 列距 10；标签**左对齐**、不换行 */
.modal.kwm .kwm-form, .modal.kwm .pd-form { display: grid; grid-template-columns: 84px minmax(0, 1fr); row-gap: 8px; column-gap: 10px; align-items: center; margin: 0; }
.modal.kwm .kwm-form > label, .modal.kwm .pd-form > label { text-align: left; white-space: nowrap; font-size: 12.5px; color: var(--kwm-2nd); }
.modal.kwm .kwm-form > label.req::after, .modal.kwm .pd-form > label.req::after { content: "*"; color: #e1251b; margin-left: 2px; }
.modal.kwm .kwm-form > .am-cell, .modal.kwm .pd-form > .am-cell { grid-column: 2; min-width: 0; }
/* 字段行里的小按钮（如「0.1 软停 / 撤销改动 / 删除选中」）也要吃 §8.3 的控件令牌：高 28 / 圆角 5。
   它们不在页脚 → 上面那条 `.modal-foot .btn` 管不到（实测原来是 32.67 高，三种高度并存）。 */
.modal.kwm .kwm-form .btn, .modal.kwm .pd-form .btn { height: 28px; line-height: 26px; padding: 0 10px; border-radius: 5px; }
.modal.kwm kbd { font-family: inherit; font-size: 12px; color: var(--kwm-gray); background: #fff;
  border: 1px solid var(--kwm-line); border-radius: 3px; padding: 0 4px; }
/* ④ 提交条（页脚）：11px 18px / 上边线 #e5e8ec / 底 #fcfdfe / flex gap 8；
      主按钮**贴右边**（`#pdSubmit` 右边界 = 弹窗右 − 18），`关闭/取消` 在它左侧 8px */
.modal.kwm .modal-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; text-align: left;
  padding: 11px 18px; border-top: 1px solid var(--kwm-line); background: var(--kwm-foot); }
.modal.kwm .modal-foot .btn { margin-left: 0; padding: 0 12px; line-height: 28px; display: inline-flex; align-items: center; justify-content: center; }
.modal.kwm .modal-foot .am-grow { flex: 1 1 auto; }
/* ★ 页脚里同时有「状态位 / 勾选 / 5 个按钮」→ **不许用两个 `.am-grow` 弹性占位**：
   实测两个占位会让换行点漂移（`flex-wrap` 在"占位+按钮"组合下会把主按钮挤到第二行），
   主按钮右边界随内容变化（实测出现过 18 / 91 / 354 三种值）。
   → 改用 `margin-left:auto` 把「☐ 我已核对」及其后一组顶到右边（§8.4-5 明确允许这个做法），
     主按钮永远是页脚最后一个 flex 项 → 右边界恒 = 弹窗右 − 18。 */
.modal.kwm .modal-foot .chk { margin-left: auto; }
.modal.kwm .modal-foot .chk ~ .btn { margin-left: 0; }
.modal.kwm .modal-foot .chk { font-size: 12.5px; color: var(--kwm-2nd); }
.modal.kwm .modal-foot .pd-footsum { font-size: 12.5px; color: var(--kwm-2nd); flex: 0 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; }
.modal.kwm .modal-foot .pd-footsum b { color: var(--kwm-fg); font-weight: 600; }
.modal.kwm .modal-foot .pd-footsum .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #f0a020; margin-right: 6px; }
.modal.kwm .modal-foot .pd-footsum .up { color: #e1251b; }
/* ⑤ 调整记录条（页脚**之下**、默认折叠、条内滚动 200px、行高 26 / 四列 108-96-1fr-124 / 表头 11.5 #9aa1a9） */
.modal.kwm .am-hist { background: var(--kwm-soft); border-top: 1px solid var(--kwm-line); padding: 9px 18px; margin: 0; }
.modal.kwm .am-hist-b { max-height: 200px; overflow: auto; }
.modal.kwm .am-hist-h { font-size: 12.5px; color: var(--kwm-2nd); }
.modal.kwm .am-hrow { grid-template-columns: 108px 96px minmax(0, 1fr) 124px; column-gap: 10px; height: 26px; font-size: 12.5px; }
.modal.kwm .am-hrow .am-ht, .modal.kwm .am-hhead span { color: var(--kwm-th); }
.modal.kwm .am-hrow .am-hn { color: var(--kwm-2nd); }
.modal.kwm .am-hrow .am-hv { color: var(--kwm-fg); }
/* ⑥ 商品定向表（7 列）：860 − 18×2 = 824 可用；固定列 30+80+68+92+86+58 = 434 →「商品 / 定向」自适应 390 */
.modal.kwm .pd-tbl { table-layout: fixed; width: 100%; border-collapse: collapse; }
.modal.kwm .pd-tbl th { text-align: left; font-weight: 500; color: var(--kwm-gray); font-size: 12px;
  padding: 8px 10px; border-bottom: 1px solid var(--kwm-line2); background: #fafbfc; }
.modal.kwm .pd-tbl td { padding: 8px 10px; border-bottom: 1px solid var(--kwm-line2); vertical-align: middle;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal.kwm .pd-tbl tr.changed td { background: #fffdf7; }
/* 同 `.pd-tbl` 那段：**竖条全部去掉**（用户拍板），改用整行底色表达 —— 改过=浅黄、勾选中=浅蓝。
   `.modal.kwm` 这几条特异性更高，所以两边都写、行为一致。 */
.modal.kwm .pd-tbl tr.picked td { background: #f7faff; }
.modal.kwm .pd-tbl tr.changed td { background: #fffdf7; }
.modal.kwm .pd-tbl tr.changed td:first-child, .modal.kwm .pd-tbl tr.changed td:nth-child(2),
.modal.kwm .pd-tbl tr.picked td:first-child, .modal.kwm .pd-tbl tr.picked td:nth-child(2) { box-shadow: none; }
.modal.kwm .pd-goods { display: flex; align-items: center; gap: 10px; min-width: 0; }
.modal.kwm .pd-ph { width: 40px; height: 40px; border-radius: 5px; background: linear-gradient(135deg, #eef2f7, #dde5ee); flex: 0 0 auto; }
.modal.kwm .pd-name { font-size: 13px; color: var(--kwm-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal.kwm .pd-tbl .mono { font-family: Consolas, monospace; font-size: 11.5px; color: var(--kwm-gray); }
.modal.kwm .pd-tbl .src { font-size: 12px; color: var(--kwm-gray); font-family: inherit; }
.modal.kwm .pd-tbl .cur { color: var(--kwm-gray); margin-right: 6px; font-variant-numeric: tabular-nums; }
.modal.kwm .kwm-pic { width: 30px; box-sizing: border-box; text-align: center; padding-left: 0 !important; padding-right: 0 !important; }
.modal.kwm .kwm-pick { width: 13px; height: 13px; margin: 0; accent-color: var(--kwm-blue); }
.modal.kwm .kwm-ops { width: 76px; text-align: right; padding-right: 0 !important; overflow: visible !important; }
/* ★★ 2026-10-03 用户实测报「红框位置未对齐」的根因（实测数字在案）：
   项目老底子是 `th, td { text-align: right }` + `:first-child { left }`（见 style.css:137/138/142），
   而 `.modal.kwm` 只给 `th` 写了 `text-align:left`、**没给 `td`** →
   实测「表头内容左边界 vs 数据内容左边界」差 9~50px（「当前出价」那列差 **50px**，¥5.5 右贴；
   「商品/定向」差 10px；勾选列 td 是 center、th 是 left，差 9px）。
   修法：**逐列显式写对齐**，让表头与数据同一把尺子（列宽本来是齐的，量过 leftDiff 全 0）。 */
.modal.kwm .pd-tbl td { text-align: left; }
/* 出价/改为 两列按数字右对齐（与看板其它表一致）；操作列右贴（配合 .kwm-ops 的 padding-right:0）。
   多单元是 7 列（第 6=改为、第 7=操作），单单元是 6 列（第 6=操作）→ 两条都要写。 */
.modal.kwm .pd-tbl td:nth-child(6), .modal.kwm .pd-tbl td:last-child { text-align: right; }
.modal.kwm .pd-tbl td:nth-child(5) { text-align: right; }   /* 当前出价 */
/* 「当前出价」是数字列 → **表头也跟着右对齐**，否则表头贴左、数字贴右，实测差 50px。
   （口径同 style.css:555-559 那次"表头与单元格逐列对齐"的修法：数字列两边都右、文字列两边都左。） */
.modal.kwm .pd-tbl th:nth-child(5) { text-align: right; }
/* ★★ 2026-10-03（用户实测：「圈出来的部分有缺失」——实测是**输入框里的文字贴到最右边**）：
   上面为对齐表头把出价相关单元格设成 `text-align:right`，**输入框继承了这个对齐** →
   `5.5` 被推到框的最右侧、左边留一大片空白，看上去像"框缺了一截"（高倍放大实测：边框四边都在，
   文字落在 85~99.5px / 框宽 92px）。**输入框的文字必须贴左**（光标从左开始、和用户输入习惯一致）。 */
.modal.kwm .pd-tbl td input, .modal.kwm .pd-tbl td select, .modal.kwm .pd-tbl td textarea { text-align: left; }
/* ★★ 2026-10-03（用户第三次反馈同一处，主控把用户的紧图逐像素摊开才看清）：
   用户的原话是「边框被裁切了，后面框消失了」——**逐像素实测：边框一条都没少**；
   真实观感是：输入框只有 **92px**、而「改为」列有 **115px** → 框只占格子左边约六成，
   右边留 23px 空白，看上去像"框到一半就没了"。
   → 修法不是改边框，而是**让输入框占满单元格**（`width:100%`，配合 td 的 `padding:8px 10px`
   落地为 115−20 = 95px）：框的右边界与格子右边界对齐，视觉上就完整了。
   ⚠️ 只作用于**表格里的**控件（`.pd-tbl td`），不动 §8.3 的通用定宽（date 132 / number 92 / text 170 仍适用于字段块）。 */
.modal.kwm .pd-tbl td input, .modal.kwm .pd-tbl td select { width: 100%; box-sizing: border-box; }
.modal.kwm .pd-tbl .btn, .modal.kwm .pd-tbl .btn.danger { height: 28px; line-height: 26px; padding: 0 10px; border-radius: 5px; }
/* ⑦ 新增商品定向的方式卡（现状段）：圆角 5、选中描边 #bcd7fb */
.modal.kwm .kwm-cards { display: flex; flex-wrap: nowrap; gap: 6px; margin: 0; }
.modal.kwm .pd-tcard { flex: 1 1 0; min-width: 0; border: 1px solid var(--kwm-line); border-radius: 5px;
  padding: 8px 10px; cursor: pointer; background: #fff; }
.modal.kwm .pd-tcard b { display: block; font-size: 13px; color: var(--kwm-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal.kwm .pd-tcard i { font-style: normal; font-size: 11.5px; color: var(--kwm-gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.modal.kwm .pd-tcard.on { border-color: #bcd7fb; box-shadow: inset 0 0 0 1px #bcd7fb; }
/* 空态（京东返回 0 条）：仍保留「＋ 新增商品定向」这条入口（id=data-* 不变） */
.modal.kwm .pd-empty { text-align: center; padding: 6px 10px 10px; }
.modal.kwm .pd-empty-t { font-size: 13px; font-weight: 600; color: var(--kwm-fg); margin-bottom: 6px; }
.modal.kwm .pd-empty .src { font-size: 12px; color: var(--kwm-gray); line-height: 1.7; }

/* ================= 2026-10-03 · 「单元内人群」并入 §八（用户拍板：**1020** + 上下堆叠 + 已绑表 6 列） =================
   为什么单独一节：这块板子原来挂 `.cd-wide`（1180），是**左右分栏**的两列表（.cd-wrap/.cd-col），
   而实测排版是**塌的** —— 模板带的 `cd-stack` 与"想分栏"的规则打架：
       .cd-wrap.cd-stack { flex-direction: column }
       .cd-stack .cd-col { flex: 0 0 auto; width: 100% }   ← 把 .cd-col{flex:1 1 0} 压掉
   实测两个 .cd-col 都是 flexDirection:column + width:1140px → 纵向堆叠、左栏空一片白。
   用户拍板：**放弃左右分栏、改成上下堆叠**（两表各占整宽）。
   ★ 宽度：先定 860（与商品定向一致），但用户实测**「已绑人群」那张表出横向滚动条** →
     实测各列真实需求：状态列要 **106px**（"已暂停（码9）"）、操作列要 **213px**（四个按钮 202 + 3×3 间距）、
     固定列合计 **365px** → 860（可用 824）下把这两列压成 80/146 就会滚。
     → 用户要求**加宽**、一屏展示：本板改用 **1020**（借 `kwm-md`：`.modal.kwm.cd-wide.kwm-md`，
       或人群自己的 `openCrowdPanel` 加 `kwm-md`；**不改 `.cd-wide` 本身**，创意/地域仍 1180）。
     1020 − 18×2 = **984 可用**：固定列 30+92+110+216 = 448 → 人群名列 = **536px**（实测最长名 266px，宽裕）。
   ① 宽度：`.modal.kwm.kwm-md` 特异性 0,3,0 > `.modal.cd-wide` 0,2,0（且同挂 cd-wide 时按顺序后者在前）→ 生效。 */
.modal.kwm.kwm-md { width: 1020px; }
.modal.kwm.kwm-md .modal-body { padding: 12px 18px; }
/* ② 上下堆叠：每段一个块，两张表各自通宽 */
.modal.kwm .cd-wrap { display: block; }
.modal.kwm .cd-wrap .cd-col { width: auto; flex: none; }
.modal.kwm .cd-wrap .cd-col + .cd-col { margin-top: 10px; }
/* ③ 工具行（原 .cd-h）：用 §八 的口径 —— 12.5px 次级字、gap 8、底边线 */
.modal.kwm .cd-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.modal.kwm .cd-h .src { font-size: 12px; color: var(--kwm-gray); }
.modal.kwm .cd-h .am-grow { flex: 1 1 auto; }
/* ④ 表格容器：条内滚动、圆角 5、描边 --kwm-line（原来是 #eef0f3 + 8px 圆角） */
.modal.kwm .cd-tblwrap { max-height: 44vh; overflow: auto; border: 1px solid var(--kwm-line); border-radius: 5px; }
.modal.kwm .cd-q { width: 170px; height: 28px; box-sizing: border-box; border: 1px solid var(--kwm-line);
  border-radius: 5px; padding: 3px 7px; font-size: 13px; }
.modal.kwm .cd-empty { text-align: center; padding: 14px 10px; font-size: 13px; color: var(--kwm-fg); }
.modal.kwm .cd-empty .src { color: var(--kwm-gray); margin-top: 4px; }
.modal.kwm .cd-pager { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.modal.kwm .cd-name { font-size: 12.5px; color: var(--kwm-fg); }
/* ★ 2026-10-03：人群名 + 人群 ID 挤在同一格（两行）时，**ID 那一行必须能省略** ——
   实测那个 `.src mono` 没有约束，会把表格撑出 10px（`table.scrollWidth 980 > clientWidth 967`），
   于是「已绑人群」表底部冒出一条**横向滚动条**（用户报的正是这个"宽度不够"）。
   ID 只有 10 位数字，给它 nowrap + ellipsis 就够，不需要 499px。 */
.modal.kwm .pd-tbl td .cd-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal.kwm .pd-tbl td .src { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal.kwm .cd-coef { font-size: 12.5px; color: var(--kwm-fg); font-variant-numeric: tabular-nums; }
/* ⑤ 绑定溢价列：数字列 → 表头与输入框都右对齐；输入框占满单元格（与商品定向同一口径） */
.modal.kwm .pd-tbl td input.cd-opt-coef { text-align: right; }
/* ⑥ 已绑人群表的操作列：四个按钮不许换行（146px 刚好放 改溢价28+暂停28+启动28+解绑28 + 3×3 gap） */
.modal.kwm .pd-tbl td.kwm-ops { white-space: nowrap; }
.modal.kwm .pd-tbl td.kwm-ops .btn + .btn { margin-left: 3px; }

/* ---------- 第 2 批 · 单元内人群弹窗（2026-09-24）----------
   两栏：左＝已绑人群（改溢价 / 暂停 / 启动 / 删除），右＝可选人群（搜索 / 翻页 / 绑定）。
   只加 .cd-* 前缀，不改任何现有类；宽度沿用 .modal.pd-wide 的做法（窄屏退回 96vw）。 */
.modal.cd-wide { width: 1180px; }
.modal.cd-wide .modal-body { padding: 14px 20px; }
@media (max-width: 1240px) { .modal.cd-wide { width: 96vw; } }
.cd-wrap { display: flex; gap: 16px; align-items: flex-start; }
/* ★ 2026-09-24 重排（用户："把板子的规则应用到全站的板子中"）：原来左=已绑 / 右=可选，右栏**固定 396px**，
   于是 1180 宽的弹窗里"可选人群 278 个"被挤在 590px 的右栏、左栏却常常空着 —— 左右失衡。
   改成**上下两段各占满宽**（.cd-stack）：上=已绑（含批量操作），下=可选（含搜索/溢价/翻页）。
   同时把标题行做成"标题 + 弹性空隙 + 操作控件"的一行（.cd-h 加 flex），跟《UI规范.md》一致。 */
.cd-wrap.cd-stack { flex-direction: column; gap: 14px; align-items: stretch; }
.cd-col { flex: 1 1 0; min-width: 0; }
.cd-col-r { flex: 0 0 396px; }
.cd-stack .cd-col { flex: none; width: 100%; }
.cd-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 13px; font-weight: 600; color: #1f2329; margin-bottom: 8px;
  padding-bottom: 7px; border-bottom: 1px solid #eef3fb; }
.cd-h .pd-grow { flex: 1 1 auto; }
.cd-h .cd-q { font-weight: 400; }
.cd-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.cd-bar .cd-allbox { font-size: 12px; color: #5b6472; display: inline-flex; align-items: center; gap: 4px; }
.cd-q { height: 28px; border: 1px solid #dcdfe4; border-radius: 6px; padding: 0 8px; font-size: 12.5px; width: 148px; }
.cd-num { height: 28px; border: 1px solid #dcdfe4; border-radius: 6px; padding: 0 6px; font-size: 12.5px; width: 62px; }
.cd-unit { height: 28px; border: 1px solid #dcdfe4; border-radius: 6px; font-size: 12.5px; max-width: 220px; }
.cd-tblwrap { max-height: 52vh; overflow: auto; border: 1px solid #eef0f3; border-radius: 8px; }
.cd-tbl { width: 100%; border-collapse: collapse; }
.cd-tbl th { text-align: left; font-weight: 500; color: #8a9099; font-size: 12px; padding: 7px 9px; border-bottom: 1px solid #eef0f3; background: #fafbfc; position: sticky; top: 0; z-index: 1; }
.cd-tbl td { padding: 7px 9px; border-bottom: 1px solid #f2f4f7; vertical-align: middle; font-size: 12.5px; }
.cd-tbl tr:hover td { background: #fcfdfe; }
.cd-tbl .mono { font-family: Consolas, monospace; font-size: 11.5px; }
.cd-name { display: inline-block; max-width: 238px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.cd-coef { font-variant-numeric: tabular-nums; }
.cd-empty { border: 1px dashed #e3e6ea; border-radius: 8px; padding: 16px; font-size: 13px; color: #5b6472; text-align: center; line-height: 1.9; }
.cd-pager { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
/* 统一"标签在上"的字段块（加词板等老板子用；与新建计划向导的排版一致）—— 2026-09-24 按《UI规范.md》 */
.kw-field { margin: 0 0 12px; }
.kw-field > label { display: block; font-size: 12.5px; color: #5b6472; margin-bottom: 5px; font-weight: 600; }
.kw-field > label .src { font-weight: 400; margin-left: 8px; }
.kw-field > textarea, .kw-field > input, .kw-field > select { width: 100%; padding: 7px 9px; border: 1px solid #dfe3e8; border-radius: 8px; font-size: 13px; line-height: 1.6; }
.kw-field > select { width: auto; min-width: 220px; }
.kw-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kw-inline input, .kw-inline select { padding: 5px 8px; border: 1px solid #dfe3e8; border-radius: 8px; font-size: 13px; height: 28px; }
/* 创意板里的"新建创意 / 再加几条"内嵌表单（2026-09-24 第 10 条接入） */
.cr-form { background: #f4f7fb; border: 1px solid #eef3fb; border-radius: 12px; padding: 12px 14px; margin: 0 0 10px; }
.cr-form .kw-field { margin-bottom: 9px; }
.cr-formhead { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 600; color: #1f2937; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #e4ebf6; }
.cr-formhead .src { font-weight: 400; }
.cr-formhead .pd-grow { flex: 1 1 auto; }
/* "用现有创意的图"：缩略图候选（只取 jfs 路径，避免踩"图片地址非法"） */
.cr-imgpick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cr-imgopt { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 92px; cursor: pointer;
  border: 1px solid #e4ebf6; border-radius: 10px; padding: 6px 4px; background: #fff; }
.cr-imgopt:hover { border-color: #bcd7fb; }
.cr-imgopt.on { border-color: #2563eb; background: #f2f7ff; }
.cr-imgopt img { width: 62px; height: 62px; object-fit: cover; border-radius: 7px; }
.cr-imgopt .src { font-size: 10.5px; line-height: 1.3; text-align: center; word-break: break-all; }
/* 地域板右栏：把"提交后投这些"从一坨长文本改成**按大区分组的 chip**（2026-09-24 重排） */
.ar-chipwrap { max-height: 300px; overflow: auto; border: 1px solid #eef3fb; border-radius: 10px; padding: 8px 10px; background: #fbfcfe; }
.ar-chipgroup { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 4px 0; }
.ar-chipgroup + .ar-chipgroup { border-top: 1px dashed #eef3fb; }
.ar-cgname { font-size: 11.5px; color: #8a9099; min-width: 62px; }
.ar-chip { font-size: 12px; background: #fff; border: 1px solid #e4ebf6; border-radius: 999px; padding: 2px 9px; color: #374151; }
.ar-chip.new { background: #f2f7ff; border-color: #bcd7fb; color: #2563eb; font-weight: 600; }
/* "可选人群"表的操作列：原来按钮被挤到最右边、离人群名一大段空白 → 把这一列收窄，按钮紧贴内容 */
.cd-tbl .cd-optrow td:last-child { width: 84px; padding-left: 6px; }
.cd-tbl .cd-optrow td:first-child { padding-right: 16px; }
.cd-tbl .cd-bind { background: #f2f7ff; border-color: #bcd7fb; color: #2563eb; font-weight: 600; }
.cd-tbl .cd-bind:hover { background: #2563eb; color: #fff; border-color: #2563eb; }
.cd-wrap .adj-ops .btn { margin-right: 3px; }
/* 创意弹窗（2026-09-24 第 3 批）：缩略图 + 名称列宽 */
.cr-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid #eef0f3; cursor: zoom-in; display: block; }
.cr-thumb:hover { border-color: #b9c2cc; }
.cr-tbl .cd-name { max-width: 200px; }
/* ---------- 创意板并入 §八（P2f · 2026-10-03）----------
   ⚠️ 全局 `td` 是右对齐（`.cd-tbl td{text-align:right}`）—— 这张表的**文字列必须显式左对齐**，
      只有操作列右对齐；否则"创意名称/标题/类型/状态"全都贴右边（与人群板踩过同一个坑）。 */
.modal.kwm .cr-tbl { table-layout: fixed; }
.modal.kwm .cr-tbl th, .modal.kwm .cr-tbl td { text-align: left; padding: 7px 10px; vertical-align: middle; }
.modal.kwm .cr-tbl th:nth-child(1), .modal.kwm .cr-tbl td:nth-child(1) { padding-left: 12px; padding-right: 0; }
.modal.kwm .cr-tbl th:nth-child(2), .modal.kwm .cr-tbl td:nth-child(2) { padding-left: 4px; }
.modal.kwm .cr-tbl .cr-ops, .modal.kwm .cr-tbl .cr-ops-h { text-align: right; white-space: nowrap; }
.modal.kwm .cr-tbl .cr-ops .btn { margin-left: 3px; }
/* 行内"批量暂停 / 批量启用"选中态：只用底色 + 蓝字，不加左侧色条（与 §八 行状态口径一致） */
.modal.kwm .ar3-head .btn.on { background: var(--kwm-soft); border-color: #bcd7fb; color: var(--kwm-blue); font-weight: 600; }
/* 表格下方展开的表单：`hidden` 用 .hide（§八 里 `.modal.am .hide` 只管 am，这里补 kwm 作用域） */
.modal.kwm .cr-form.hide { display: none !important; }
.modal.kwm .cr-form { margin-top: 10px; border-top: 1px solid var(--kwm-line2); padding-top: 10px; }
/* ---------- 加词板并入 §八（P2g · 2026-10-03）----------
   宽度 **920**：860 那行「统一套用」（出价 + 元 + 匹配方式 + 套用到全部）会换行，
   逐词表的"天低 ~ 天高"也放不下；1180 又太空（用户拍板）。
   逐词表：920 − 两侧 18×2 = **884 可用**（列宽 关键词 auto / 出价 120 / 匹配方式 132 / 建议出价 300）。 */
.modal.kwm .kw-add-table { table-layout: fixed; width: 100%; }
.modal.kwm .kw-add-table th, .modal.kwm .kw-add-table td { text-align: left; padding: 6px 10px; vertical-align: middle; border-bottom: 1px solid var(--kwm-line2); }
.modal.kwm .kw-add-table th { font-size: 11.5px; color: var(--kwm-th); letter-spacing: .4px; background: #fafbfc; border-bottom: 1px solid var(--kwm-line); }
.modal.kwm .kw-add-table td { font-size: 12.5px; color: var(--kwm-fg); }
.modal.kwm .kw-add-table input, .modal.kwm .kw-add-table select { width: 100%; }
.modal.kwm .kw-add-table .kw-word { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ★ 920 这个宽度必须自己加规则（P2g）：`.modal` 的默认宽是 **560**（style.css:601），
   而加词板原来没挂任何空宽类 → 我一直以为它"本来就是宽的"，实测开出来就是 560。
   特异性 0,3,0 高过 `.modal{width:560}`（0,1,0），窄屏退回 94vw（与 `.pd-wide` 同一套做法）。 */
.modal.kwm.kwm-lg { width: 920px; }
.modal.kwm.kwm-lg .modal-body { padding: 12px 18px; }
@media (max-width: 1000px) { .modal.kwm.kwm-lg { width: 94vw; } }
/* 地域弹窗（2026-09-24 第 4 批）：区域树 + 差异预览 */
.ar-tree { max-height: 56vh; padding: 6px 8px; }
.ar-reg { border-bottom: 1px dashed #f0f2f5; padding: 6px 0; }
.ar-reg:last-child { border-bottom: 0; }
.ar-regh { font-size: 12.5px; color: #4a5260; margin-bottom: 4px; }
.ar-regh .btn { margin-left: 6px; }
.ar-prov { display: inline-block; margin: 2px 10px 2px 0; font-size: 12.5px; white-space: nowrap; }
.ar-prov.ar-off { color: #aeb4bd; cursor: not-allowed; }   /* 中国台湾 / 海外地区：看得见、勾不动 */
.ar-prov.ar-off input { cursor: not-allowed; }
.ar-cities { margin: 4px 0 2px 18px; }
.ar-city { display: inline-block; margin: 2px 10px 2px 0; font-size: 12px; color: #5b6472; white-space: nowrap; }
.ar-box { border: 1px solid #eef0f3; border-radius: 8px; padding: 8px 10px; font-size: 12.5px; line-height: 1.9; }
.ar-line { overflow-wrap: anywhere; }
/* ---------- 投放地域板 · 三栏逐级右展（P2e · 2026-10-03）----------
   用户口径：「区级、省级、市级逐个下探，结构为竖行排列，打勾华东则表示华东区域全投，
   点击华东则展开省级」+ 纠正「左右结构，点击华东展开的省级在区域级的右边」。
   → 三栏左右并排，每栏自己竖着排行；点行 = 展开右边一栏，勾选框 = 真正投票的东西（两件事分开）。
   ★ 只用《UI规范.md》§8 的令牌（`--kwm-*`）；**不新增色值/字号/行高**：
     行高 26 · 行内字号 12.5 · 计数 11.5 · 边框 --kwm-line/--kwm-line2 · 激活底色 --kwm-soft · 主题蓝 --kwm-blue。
   ★ 选中/激活**只用底色**（`.on`），不加左侧色条 —— 与 §八 的行状态口径一致（上次 4 条 inset 色条已撤回）。 */
.ar3-tree { display: flex; gap: 10px; align-items: stretch; margin-top: 8px; }
.ar3-tree.ar3-off { opacity: .5; pointer-events: none; }          /* 勾了「全国」→ 三栏只读并说明原因 */
.ar3-col { flex: 1 1 0; min-width: 0; border: 1px solid var(--kwm-line); border-radius: 5px;
  overflow: hidden; display: flex; flex-direction: column; }
/* 列表体固定 300px 高、条内滚动：三栏等高（不管哪一栏只有 0 行），
   否则点开一个只有 2 个省的区，整块板子会跟着塌一截、下面的按钮跟着上下跳。
   ★ 类名用 `ar3-list` 而**不是** `ar3-cb` —— 勾选框的行内元素也叫 `ar3-cb`，
     同名会让"列表体"继承勾选框的 13px 高（实测：列表被压成一条线，行全看不见）。 */
.ar3-list { height: 300px; overflow: auto; padding: 3px 0; }
.ar3-ch { display: flex; align-items: center; gap: 6px; padding: 6px 9px; background: #fafbfc;
  border-bottom: 1px solid var(--kwm-line2); font-size: 11.5px; color: var(--kwm-th); letter-spacing: .4px; }
.ar3-row { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px;
  font-size: 12.5px; color: var(--kwm-fg); cursor: pointer; }
.ar3-row:hover { background: var(--kwm-soft); }
.ar3-row.on { background: var(--kwm-soft); }
.ar3-row.on .ar3-nm { font-weight: 600; color: var(--kwm-blue); }
.ar3-caret { flex: 0 0 8px; font-size: 12px; line-height: 1; color: var(--kwm-gray); }
.ar3-nm { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar3-ct { flex: 0 0 auto; font-size: 11.5px; color: var(--kwm-gray); font-variant-numeric: tabular-nums; }
.ar3-col .ar3-cb { flex: 0 0 auto; width: 13px; height: 13px; margin: 0; accent-color: var(--kwm-blue); }
.ar3-ph { font-size: 12px; color: var(--kwm-gray); padding: 12px 10px; text-align: center; line-height: 1.7; }
.ar3-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 2px; }
.ar3-grow { flex: 1 1 auto; }
.ar3-qwrap { position: relative; display: inline-block; }
.ar3-qbox { position: absolute; left: 0; top: 32px; z-index: 5; width: 210px; max-height: 224px; overflow: auto;
  background: #fff; border: 1px solid var(--kwm-line); border-radius: 5px; box-shadow: 0 4px 14px rgba(31, 35, 41, .10); }
.ar3-qrow { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px;
  font-size: 12.5px; color: var(--kwm-fg); cursor: pointer; }
.ar3-qrow:hover { background: var(--kwm-soft); }
.ar3-qn { font-weight: 600; }
.ar3-qc { font-size: 11.5px; color: var(--kwm-gray); }
.ar3-sel { font-size: 12px; color: var(--kwm-2nd); max-width: 360px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar3-sel b { color: var(--kwm-fg); }
.ar3-msg { font-size: 12px; color: var(--kwm-blue); }
.ar3-curids { margin-top: 2px; overflow-wrap: anywhere; }
/* ★ 2026-10-04：向导第 4 屏也要用这套三栏（用户口径"第4步的指定省市用投放地域设置板子"），
   而 `--kwm-*` 令牌只在 `.modal.kwm` 里定义、向导是 `.modal.am` → 在**三栏自己身上**补一层同值别名。
   为什么不给整个 `.modal.am` 补：那会顺带改掉向导其它元素（按钮/输入框都吃 `var(--kwm-*)` 作为兜底），
   这一轮只想让"三栏这一块"拿到值。值逐条照抄 §8.1/8.2/8.3，不许自造。 */
.modal.am .ar3-tree {
  --kwm-line: #e5e8ec; --kwm-line2: #eef1f4; --kwm-fg: #1f2329; --kwm-2nd: #5b6472;
  --kwm-gray: #8b93a1; --kwm-blue: #2563eb; --kwm-soft: #f7faff; --kwm-th: #9aa1a9;
}
/* 调整弹窗里的"京东建议"档位按钮（2026-09-24 第 5 批：建议出价并进调整弹窗） */
#adjSug .sug-pick { margin: 0 4px 4px 0; }
#adjSug .sug-pick.on { border-color: #2f7d32; background: #f2f9f2; }
#adjFloat { font-variant-numeric: tabular-nums; }
/* ---------------- 「调整」弹窗（2026-09-24 重做：**照商品定向那套样式**）----------------
   商品定向那块是用户认可的观感：顶部一行摘要（.pd-sum）+ 卡片（.pd-cards/.pd-tcard）+
   右对齐标签的表单网格（.pd-form）+ 页脚一排按钮。这里**直接复用 .pd-* 类**，只补 3 个自己的小类。 */
/* ★★★ 2026-09-30 第三批（用户："为什么你做的调整板子和你给的方案就是不一致呢？我不是说命名，
   我是说布局、颜色、清晰度这些的。"）：
   根因 = 上一轮只把**骨架**写进规范、没写**视觉令牌** → 实现里字号/颜色/尺寸/间距各写各的近似值。
   现在《UI规范.md》§八「调整弹窗视觉令牌」是**唯一判据**，下面这些值逐条照抄它，不许再发明近似色/近似字号。
   两条裁决：A = 影响里的数字**不加红绿**（改后值 = #1f2329 / 600）；B = 现状卡**值在上、标签在下**。
   顺序：① 对象行 ② band1（本次修改 + 现状）③ band2（影响 + 分区级说明）④ 页脚（提交条）⑤ 调整记录条。 */
.modal.am {
  width: 860px;
  --am-fg: #1f2329; --am-2nd: #5b6472; --am-gray: #8b93a1;
  --am-line: #e5e8ec; --am-line2: #eef1f4; --am-blue: #2563eb;
  --am-soft: #f7f9fb; --am-foot: #fcfdfe; --am-th: #9aa1a9;
}
.modal.am .modal-head { padding: 12px 18px; font-size: 15px; font-weight: 600; color: var(--am-fg); background: #fff; border-bottom: 1px solid var(--am-line); }
.modal.am .modal-head .src { font-size: 12.5px; color: var(--am-gray); font-weight: 400; }
.modal.am .modal-body { padding: 12px 18px; }
/* 字段网格：84px 标签列 + 行距 8 + 列距 10（§八 8.3）；标签左对齐、不换行、整块统一 84px */
/* ★★ 2026-10-03 并入 §八 踩到的**第三号坑（第 3 屏那条，复核实测定位）**：
   `.pd-form` 里的 `<label>` 是**网格项**。一旦某一行被 `.hide` 藏掉（第 3 屏"投放目标"在"手动出价"下不显示），
   Chrome 的 auto-placement 会把**后面的 `<label>出价 *</label>` 放进"值列"**（实测该 label `w=730`），
   于是它后面那个 `.am-cell` 被挤回 **84px 的标签列** → `input`(92) 撑满 → `.u「元」` 换行 → 按钮再换行，
   整条字段行 `offsetHeight = 84`（§8.6-9 的硬线是 ≤34）。
   → 治本：**每个字段包一层 `.pw-fld`**（`display: contents`，保持上面那两列网格与 84px 标签列不变），
     `.pd-form` 的直接子项只剩"字段块"这一种；隐藏一个字段 = 藏**整层**（标签 + 控件一起），
     后面的字段不会被挪格子。再加一条保险：控件行**显式钉在第 2 列**（`grid-column: 2`）——
     就算将来又有人在网格里插了什么，也不会把控件挤回 84px 那一列。 */
.modal.am .pd-form { grid-template-columns: 84px minmax(0, 1fr); row-gap: 8px; column-gap: 10px; margin: 0; }
.pw-fld { display: contents; }
.modal.am .pd-form .pw-fld > .am-cell, .modal.am .pd-form .pw-fld > .pw-v { grid-column: 2; min-width: 0; }
.modal.am .pd-form label { text-align: left; white-space: nowrap; font-size: 12.5px; color: var(--am-2nd); }
/* 控件：高 28、描边 1px #e5e8ec、圆角 5px、内边距 3px 7px、字 13 */
.modal.am .pd-form input, .modal.am .pd-form select {
  height: 28px; border: 1px solid var(--am-line); border-radius: 5px; padding: 3px 7px;
  font-size: 13px; color: var(--am-fg); font-variant-numeric: tabular-nums; background: #fff;
}
/* ★ 2026-10-03（向导并入 §八 时补的一条通用兜底）：§8.3 的控件令牌原来只挂在 `.modal.am .pd-form` 上，
   于是**不在字段网格里**的控件（关键词明细行、地域搜索框、批量设置的下拉）会掉回基础样式（高 26 / 圆角 9 / 描边默认）。
   向导里这类控件很多 → 补一条**整个 `.modal.am` 作用域**的同值兜底（值同 §8.3，含内边距 3px 7px）。 */
.modal.am input:not([type=checkbox]):not([type=radio]):not([type=file]), .modal.am select {
  height: 28px; border: 1px solid var(--am-line); border-radius: 5px; padding: 3px 7px;
  font-size: 13px; color: var(--am-fg); font-variant-numeric: tabular-nums; background: #fff;
}
/* ★★ 2026-10-03（并入 §八 时踩到的第二号坑）：§8.3 要求控件宽度**显式定**（date 132 / number 92 / text 170），
   而 `.am-cell` 是 flex 容器 → 只写 width 必被拉扯：实测 date 被**拉到 730px**（整行）、
   number 被**压到 67px**（比 92 还窄）。`flex: 0 0 auto` 才是"显式定宽"真正落地的地方（§8.10 表格里那条不是摆设）。 */
.modal.am input:not([type=checkbox]):not([type=radio]):not([type=file]), .modal.am select { flex: 0 0 auto; }
.modal.am input[type=text], .modal.am input:not([type]) { width: 170px; }   /* §8.3：文本框 170 */
.modal.am input[type=date] { width: 132px; }                                 /* §8.3：日期框 132 */
.modal.am input[type=number] { width: 92px; }                                /* §8.3：数字框 92 */
/* ★ 数字框不许露出浏览器原生的上下箭头（§八 8.5） */.modal.am input[type=number] { appearance: textfield; -moz-appearance: textfield; }
.modal.am input[type=number]::-webkit-outer-spin-button,
.modal.am input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
.modal.am .pd-tcard { cursor: default; }        /* 当前值是展示用的卡片，不可点 */
.modal.am .pd-cards { flex-wrap: nowrap; }
/* 动作药丸：圆角 14、padding 0 12px、高 28、12.5；选中 = 主色底 + 白字 600 */
.modal.am .act-btn { height: 28px; line-height: 26px; padding: 0 12px; border-radius: 14px; font-size: 12.5px;
  border: 1px solid var(--am-line); color: var(--am-2nd); background: #fff; }
.modal.am .act-btn.on { background: var(--am-blue); border-color: var(--am-blue); color: #fff; font-weight: 600; }
/* 弹窗底部的两条固定带：页脚（提交条）+ 调整记录条（§八 8.4 第 5、6 条）
   ★ 页脚按钮一组**贴右边**：`.am-grow` 弹性占位把取消/提交顶到右侧（设计稿同款做法）；
     `提交给京东` 右边界 = 弹窗右边界 − 18px（= 页脚右内边距）；取消与提交间距 = 8px
     （基础样式 `.modal-foot .btn { margin-left: 8px }` 会给每个按钮再加 8px → 这里必须清掉，
       否则实际间距会变成 12(gap)+8(margin)=20px）。 */
.modal.am .modal-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; text-align: left;
  padding: 11px 18px; border-top: 1px solid var(--am-line); background: var(--am-foot); }
.modal.am .modal-foot .btn { margin-left: 0; }
/* ★★ 2026-10-03 P2b③：页脚按钮的**文字居中**（向导 `#pwClose/#pwPrev/#pwNext` 三个都要归零）。
   实测四种写法（量的是"文字中心 − 按钮中心"）：
     真机现状 **−0.500px** ｜ 只改 `padding:0 12px` **仍 −0.500（无效）**
     ｜ `padding:0 12px` + `line-height:28px` → **0.000 ✅** ｜ `line-height:14px` → −0.333。
   根因：`.modal.am .btn` 是 `inline-flex + align-items:center`，但 `.btn` 基类给的是 `line-height:1`，
   加上基类 `padding:0 14px` → 行盒高度与按钮高 28 不是整倍数，文字基线偏移半像素。
   高度 28 已由既有规则（`.modal .modal-foot .btn{height:28px}`）定住，这里**只给内边距 + 行高**。
   ⚠️ 只作用于 `.modal.am`（不改全局 `.btn`，那会影响别的板子）；`.modal-foot` 的 `padding:11px 18px`
      与底色 `#fcfdfe` 一个字没动。 */
.modal.am .modal-foot .btn { padding: 0 12px; line-height: 28px; }
.modal.am .modal-foot #adjMsg { flex-basis: 100%; margin: 0; font-size: 12.5px; }
.modal.am .modal-foot #adjMsg:empty { display: none; }
.modal.am .modal-foot #adjHard { flex-basis: 100%; }
.modal.am .modal-foot .am-grow { flex: 1 1 auto; }
.modal.am .modal-foot .chk { font-size: 12.5px; color: var(--am-2nd); }
.modal.am #adjHistory { background: var(--am-soft); border-top: 1px solid var(--am-line); padding: 9px 18px; margin: 0; }
/* 调整记录明细：展开后在**条内滚动**（上限 200px） */
.modal.am .am-hist-b { max-height: 200px; overflow: auto; }

.am-sug .sug-pick { margin: 0 6px 0 0; font-variant-numeric: tabular-nums; }
/* 调整弹窗里的京东三档建议：按钮收紧一点（3 个档位 + 底线/上限灰字要挤在**同一行**的控件列里） */
.modal.am .am-sug .sug-pick { margin: 0 5px 0 0; padding: 3px 7px; font-size: 12px; }
.am-sug .sug-pick.on { border-color: #1e6fd9; background: #f2f7ff; color: #1e6fd9; }
/* 单位（元 / （目标ROI）/ 元/天）与浮动百分比：12 / #8b93a1（§八 8.2 字段级提示） */
.am-unit { font-size: 12px; color: #8b93a1; margin-left: 2px; }
.am-float { font-size: 12px; color: #8b93a1; font-variant-numeric: tabular-nums; }
.am-note { font-size: 12px; color: #8b93a1; line-height: 1.7; }
.am-note:empty { display: none; }
.am-delta { font-size: 13px; color: #1f2329; font-variant-numeric: tabular-nums; }
/* 对象行（京东实时数据 · 计划 · 渠道）：12.5 / #8b93a1（§八 8.2），与下面第一个 band 之间一条浅线 */
.modal.am .pd-sum { font-size: 12.5px; color: var(--am-gray); margin: 0 0 2px; }
.modal.am .pd-sum b { font-weight: 600; color: var(--am-gray); }
.modal.am .pd-sum .mono { font-family: inherit; }
/* 勾选框文字：12.5 / #5b6472（§八 8.2「已核对勾选」） */
.modal.am .chk { font-size: 12.5px; color: var(--am-2nd); }
/* ⚠️ 旧的 .am-submit / .am-hr 已删（第三批：提交条并进 .modal-foot、明细行改用 .am-hrow 表格形态） */
.am-hr { display: none; }
.am-ht { color: #8a9099; font-variant-numeric: tabular-nums; }
.am-hn { color: #5b6472; }
.am-hv { color: #1f2329; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.am-hs { white-space: nowrap; }

/* ---------------- 调整弹窗的骨架分区（2026-09-30：★ 用户定稿的「案②」）----------------
   顺序固定（任何渠道都不许调换）：① 现状（京东实时，只读卡片）② 本次修改（动作 + 字段）③ 影响 ④ 提交条 ⑤ 调整记录。
   · 字段少的动作（统一预算 / 分日预算 / 目标投产比 / 启停）→ **左右分区**：左=本次修改、右=现状（竖排小卡）
   · 字段多到左栏放不下的（例如活动日预算要"活动期 + 每天预算 + 已设活动期"挤一行）
     → JS 里量到溢出就自动切「现状横排在最上面 + 字段整宽」（即案① 单列），**不让它换行破版**
   · 字段级提示（"该天现值 ¥600（其余天按 ¥400）"、"10~9999999 整数"）一律挂在**该行控件右侧同一行**（.u），
     不许另起一行；只有"讲整块"的说明才独占一行，并与标签列左边界对齐（.am-blockhint 左边距 = 96 + 12） */
.am-gt { font-size: 12.5px; font-weight: 600; color: #5b6472; margin: 0 0 7px; }
/* ---------------- band（分区）令牌：§八 8.3 / 8.4 ----------------
   每个 band = `padding: 12px 0` + 分区之间 `border-top: 1px #eef1f4`；分区标题 11px / #8b93a1 / 400 / letter-spacing .4px。
   「影响」是**独立整段**（分区标题 + 一句改前→改后），分区级说明直接接在它下面 —— 同 band、同一条左边界，
   **不再缩进到控件列、也不再加分隔线**（§八 8.5 明确禁止的那两条）。 */
.modal.am .am-band { padding: 12px 0; }
.modal.am .am-band + .am-band { border-top: 1px solid var(--am-line2); }
.modal.am .am-band:last-child { padding-bottom: 6px; }
/* 对象行与第一个 band 之间也放一条浅线（§八 8.4：对象行是独立的一行，不要和 band1 糊在一起） */
.modal.am .am-band1 { border-top: 1px solid var(--am-line2); margin-top: 8px; }
.modal.am .am-gt { font-size: 11px; font-weight: 400; color: var(--am-gray); letter-spacing: .4px; margin: 0 0 8px; }
.am-arrow { padding: 0 2px; }
/* 左栏（本次修改）= 分区标题 + 字段网格；标题在网格外 → 与右栏标题同一水平线 */
.am-lr { display: flex; align-items: flex-start; gap: 16px; }
.am-l { flex: 1 1 auto; min-width: 0; }
/* 右栏「现状」：宽 150px + 左边界 1px #eef1f4 + padding-left 14px（§八 8.3） */
.am-r { flex: 0 0 150px; min-width: 0; border-left: 1px solid var(--am-line2); padding-left: 14px; }
.modal.am.mode-1 .am-r { display: none; }                 /* 案①：右栏不渲染（现状横排在最上面） */
.modal.am .am-top { display: none; }
.modal.am.mode-1 .am-top { display: block; }
/* ★ 案①（单列）：现状横排在最上面，而「现状（京东实时，只读）」这个分区标题**必须与左栏「本次修改」
   同一水平线**（§八 8.6 第 7 条）。
   难点：流里 .am-top（横排卡片，高 60）排在 .am-l 之前，会把左栏整体挤到卡片下面。
   做法（不靠魔法负边距）：把 .am-top 整个**移出流**，band 顶部留一条等高"卡片槽"（高度由 JS 实测写进
   --am-cards-raw，clamp 到 30~120 兜底）——
     · 两个分区标题都在 band 内容区的第一行 → y 天然相同；
     · 卡片横排在标题下面一行（.am-top 绝对定位到 top 35）；左栏的字段从标题下面继续。
   实测：两标题 y 相等（见报告）。 */
/* 案①：band1 顶部预留"卡片条"的位置 —— 真正的高度由 JS 量出来后写到 **字段网格的 padding-top** 上
   （见 measureTopStrip()）；这里只给一个兜底值，防 JS 没跑到时字段压在卡片上 */
.modal.am.mode-1 .am-band1 { position: relative; }
.modal.am.mode-1 .am-top { position: absolute; left: 0; right: 0; top: 35px; padding: 0; }
.modal.am.mode-1 .am-top > .am-gt { position: absolute; left: 0; top: -23px; margin: 0; }
/* 案① 里"现状"这一条 = **只有横排卡片这一份**。
   注意：`.modal.am .am-top { display:none }` 只作用于**案②**（那时用右栏），案① 走 `.mode-1 .am-top { display:block }`。
   曾经这里还有一份 `.am-topright`（竖排小卡）→ 同一批真值在屏幕上出现两次（§8.5 禁止），已删。 */
.modal.am.mode-1 .am-topcards { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; }
/* 卡片槽占的是"标题下面那一条"：**字段网格**要让开同样的高度（不能加在 .am-l 上 ——
   那会把左栏标题一起推下去、两个标题又不在一条线上了；实测踩过） */
.modal.am.mode-1 .am-l > .pd-form { padding-top: var(--am-cards-h, 60px); }
/* 案① 的横排卡片排：间距 6、整排左对齐（§八 8.3 / 8.6 第 11 条） */
.modal.am .am-topcards { flex-wrap: nowrap; gap: 6px; justify-content: flex-start; align-items: flex-start; margin: 0 0 6px; }
/* ★★ 第三批复核（用户对着设计稿看图发现的）：案① 那排「现状」卡被拉伸成了**等宽三等分**（每张卡一半空白）。
   根因 = 基础样式 `.pd-tcard { flex: 1 }` 是**商品定向面板**的写法（那边要等分），调整弹窗的案① 继承了它。
   设计稿写法：卡片放在 flex 里**按内容撑开**（min-width 88、padding 5px 10px、圆角 6、描边 #e5e8ec）。
   ⚠️ 只改 `.modal.am.mode-1` 作用域，**不动 .pd-tcard 的基础样式**（商品定向面板还在用）。
   值/标签字号沿用 B 裁决（13/600 + 11.5 灰、值上标签下）。 */
.modal.am.mode-1 .am-topcards > .pd-tcard {
  flex: 0 0 auto; min-width: 88px; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--am-line); cursor: default;
}
/* 值/标签的字号字重颜色按 B 裁决钉死（基础样式里 b 没有字重、i 的颜色是 #8a9099 的近似灰 —— §八 唯一的灰是 #8b93a1） */
.modal.am.mode-1 .am-topcards > .pd-tcard b { font-size: 13px; font-weight: 600; color: var(--am-fg); }
.modal.am.mode-1 .am-topcards > .pd-tcard i { font-size: 11.5px; color: var(--am-gray); font-style: normal; }
/* 现状小卡（B 裁决）：**值在上、标签在下**，值 13/600 #1f2329（不折行）、标签 11.5 #8b93a1（可折行），卡间距 6 */
.am-rcard { margin: 0 0 6px; }
.am-rv { display: block; font-size: 13px; font-weight: 600; color: var(--am-fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.am-rk { display: block; font-size: 11.5px; color: var(--am-gray); line-height: 1.45; }
.am-rsep { border-top: 1px solid var(--am-line2); margin: 5px 0; }
/* 字段行：控件 + 同行提示；控件之间 gap 6（§八 8.3） */
.am-cell { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* 活动日预算那两段：**竖排**（一段一行）—— 两段横排会超出左栏、把"至 / 元天"挤到第二行去，
   看着就像字段块多了第三条竖线。宽度按 §八 8.3 的令牌：date 132 × 2 + number 92。 */
.am-seclist { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.am-seclist .adj-sec { display: flex; align-items: center; gap: 6px; margin: 0; }
.am-seclist .adj-sec-s, .am-seclist .adj-sec-e { width: 132px; }
.am-seclist .adj-sec-b { width: 92px; }
/* ---------------- ★ 第四批：活动日预算的**点选式日期** + 「已设活动期」药丸行 ----------------
   日期不再是看得见的原生控件：原来的 <input type="date"> **仍留在 DOM 里**（只是视觉隐藏、value 仍是真 ISO 日期），
   因为 inputSecs() / 提交体 / 服务端 validateSections 全读它的 value；
   点触发器 → 打开**顶部时间筛选器那套双月日历**（#crPanel / .cr-* 复用，不另造一套），
   确定后把 from/to 写回 input 并派发 input/change，让现有的 refresh() / 影响句 / 校验照旧跑。
   z-index：顶栏 70（原样不动）｜弹窗内由 JS 设成 240（模态遮罩是 200，70 会被盖住）。 */
.modal.am .am-dp { position: relative; display: inline-block; }
.modal.am .adj-sec-s, .modal.am .adj-sec-e {
  position: absolute; box-sizing: border-box; width: 1px; min-width: 0; height: 1px; padding: 0; margin: -1px;
  border: 0; opacity: 0; pointer-events: none; overflow: hidden;
}
.modal.am .am-dptrig {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: 132px; height: 28px;
  border: 1px solid var(--am-line); border-radius: 5px; background: #fff; font-size: 13px; color: var(--am-fg);
  font-variant-numeric: tabular-nums; cursor: pointer; padding: 0 7px;
}
.modal.am .am-dptrig:hover { border-color: #bcd7fb; }
.modal.am .am-dptrig.on { border-color: var(--am-blue); box-shadow: 0 0 0 2px #e8f0ff; }
/* 日历弹层：**不另造** —— 直接用顶部时间筛选器那套 `#crPanel`（.cr-* 类、同一个 crMonthHtml()）。
   弹窗内打开时 JS 会把它的 z-index 设成 240（顶栏使用时仍是 70，不许改）。 */
/* 「已设活动期」药丸行：手上那两行的镜像 + 可删（右栏「现状」卡才是京东真值、只读） */
.modal.am .am-spill { display: inline-flex; align-items: center; height: 28px; border: 1px solid var(--am-line);
  border-radius: 14px; padding: 0 4px 0 12px; font-size: 12.5px; color: var(--am-2nd); background: #fff; gap: 2px; }
.modal.am .am-spilldel { width: 24px; height: 24px; border: 0; background: transparent; border-radius: 5px; cursor: pointer;
  color: var(--am-gray); font-size: 13px; line-height: 1; padding: 0; }
.modal.am .am-spilldel:hover { color: var(--am-blue); }
.modal.am .am-secs-none { font-size: 12px; color: var(--am-gray); }
/* ---------------- ★ 第五批（案乙）：「已设分日」药丸行 ----------------
   令牌：高 28 / 圆角 14 / 描边 1px #e5e8ec / 内边距 0 10px 0 12px / 12.5px #5b6472 / tabular-nums / 间距 6。
   折叠态严格一行（前 N 个 + 「还有 M 天 ▾」）；点 ✕ 只是**标记待删**（灰底 + 删除线 + 尾写「待删」），不写京东。 */
.modal.am .am-daypill { height: 28px; border-radius: 14px; border: 1px solid var(--am-line); padding: 0 10px 0 12px; gap: 2px;
  font-size: 12.5px; color: var(--am-2nd); background: #fff; font-variant-numeric: tabular-nums; }
.modal.am .am-daypill .am-spilldel { color: #b6bcc4; }
.modal.am .am-daypill .am-spilldel:hover { color: var(--am-blue); }
.modal.am .am-daypill.on-del { background: #f4f5f7; border-color: #e3e5e9; }
.modal.am .am-daypill.on-del .am-dp-v { color: #9aa1a9; text-decoration: line-through; }
.modal.am .am-dp-tag { font-size: 11px; color: #b6bcc4; margin-left: 2px; }
.modal.am .am-daychip { height: 28px; border-radius: 14px; padding: 0 12px; border: 1px dashed #bcd7fb;
  background: #f2f7ff; color: var(--am-blue); cursor: pointer; }
.modal.am .am-daychip:hover { border-style: solid; }
/* 展开成多行时，这一行的**标签要贴第一行的顶**（`.pd-form` 是 align-items:center，否则标签会被摆到纵向中间） */
.modal.am .pd-form > label.am-rowlabel-top { align-self: start; padding-top: 6px; }
/* 字段级提示（灰色小字，同排挂控件右侧）：12 / #8b93a1（§八 8.2）
   ★ `margin-left: 4px` 是必需的：不写的话"值 12/13px + 提示 12px"会贴成一个词
     （实测第 6 屏「复核用-不提交(日预算 200)」、第 3 屏「FGD24SJX近90天」糊在一起）。 */
.u { font-size: 12px; color: var(--am-gray); margin-left: 4px; }
.modal.am .u { font-size: 12px; color: var(--am-gray); }
/* 分区级说明：**与分区标题同一条左边界**、不缩进、无分隔线；12 / #8b93a1 / line-height 1.7（§八 8.2、8.5） */
.modal.am .am-blocknote { margin: 6px 0 0; font-size: 12px; color: var(--am-gray); line-height: 1.7; }
.modal.am .am-blocknote:empty { display: none; }
/* 影响正文（A 裁决）：13 / #1f2329；改后值 600 粗体**同色**；百分比同字号同色、正常字重 */
.modal.am .am-impact { font-size: 13px; color: var(--am-fg); font-variant-numeric: tabular-nums; }
.modal.am .am-impact b { font-weight: 600; color: var(--am-fg); }
.modal.am .am-impact .u, .modal.am .am-impact .am-pct { font-size: 13px; color: var(--am-fg); font-weight: 400; }
.modal.am .am-impact .am-arrow { color: var(--am-fg); }
/* 页脚（提交条）：左 = 勾选，右 = 取消 + 提交；11px 18px / 上边线 #e5e8ec / 底 #fcfdfe（§八 8.3、8.4） */
/* 调整记录：**默认折叠**（一行摘要 + 右侧「展开 ▾」），点开才加载/显示明细 */
.am-hist-h { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12.5px; color: var(--am-2nd); }
.am-hist-h:hover { color: var(--am-blue); }
.am-hist-h .am-hist-t { font-weight: 600; }
.am-hist-h .am-grow { flex: 1 1 auto; }
.am-hist-h .am-hist-x { color: var(--am-gray); font-variant-numeric: tabular-nums; }
.am-hist-h .am-hist-tg { color: var(--am-blue); white-space: nowrap; }
.am-hist-b { display: none; margin-top: 7px; }
#adjHistory.open .am-hist-b { display: block; }
/* ★ 第二批（用户："调整记录不全、改动内容超过行高度的，隐藏显示，对齐行列"）：
   明细做成**表格形态**：四列固定宽（时间 / 动作 / 改动 / 结果+回滚），行高固定 26px，
   内容再长也不许换行或把行撑高 —— "改动"列单行省略号截断，全文放 title（鼠标悬停可看）。 */
.am-hrow { display: grid; grid-template-columns: 108px 96px minmax(0, 1fr) 124px; column-gap: 10px;
  align-items: center; height: 26px; padding: 0; font-size: 12.5px; border-bottom: 1px solid #f2f4f7; }
.am-hrow:last-child { border-bottom: 0; }
.am-hrow .am-ht { color: var(--am-th, #9aa1a9); font-variant-numeric: tabular-nums; white-space: nowrap; }
.am-hrow .am-hn { color: var(--am-2nd, #5b6472); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-hrow .am-hv { color: var(--am-fg, #1f2329); font-variant-numeric: tabular-nums; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-hrow .am-hs { white-space: nowrap; text-align: right; }
/* 结果列里"成功 + 回滚"两个词会贴在一起（看着像"成功回滚"）→ 给回滚链接留个左边距 */
.am-hrow .am-hs .del { margin-left: 8px; }
.am-hhead { height: 22px; border-bottom: 1px solid var(--am-line, #e5e8ec); }
.am-hhead span { color: var(--am-th, #9aa1a9); font-size: 11.5px; font-variant-numeric: normal; }
.am-hist-empty { font-size: 12.5px; color: var(--am-gray, #8b93a1); padding: 4px 0; }

/* ================================================================================
   ★ 2026-10-01 P1：「采纳建议 · 投放调整」统一到《UI规范.md》§八（① 类单条 860 / ② 类明细 1020）
   --------------------------------------------------------------------------------
   令牌**不新造**：全部走 `.modal.am`（1243 起）自带的那套（860 宽 / `--am-*` / 页眉 / 页脚 / band /
   数字框 / 药丸 / 记录条 / 影响句 / `.pd-form` 84px 标签列 / 右栏 150px）。
   本节只加**本块特有的**三条：
     ① 批量宽度 1020（`UI规范.md` §8.9：批量 = 1020，单条 = 860 = `.modal.am` 定义宽）；
     ② 明细表四列固定宽 108 / 1fr / 124 / 150（§8.9）+ 行高 26 + 表头 11.5px `#9aa1a9`、**不上底色**
        （现状那块是 12.5px `rgb(90,96,105)` + 底色 `rgb(250,251,252)`，都不在 §8.1 里）；
     ③ 幅度闸的提示条（浅蓝 `#f2f7ff` + 描边 `#bcd7fb` + 字 `#2563eb`，与 §8.7 chip / §8.8 hover 同一对浅蓝）。
   ⚠️ 明细表**不复用 `.adj-table`**：`.adj-table td { padding:7px 10px }`（589）光内边距就 ≥26px，
      行高必然超标（主控实测提醒）。这里照"调整记录明细"那套已验证 26px 的 `.am-hrow` div 网格做法，
      只在 `.modal.am.sug` 作用域里把列宽覆盖成 §8.9 的四个值。
   ⚠️ 颜色只从 §8.1 取；**黄字 `.warn`（#c98a00）不许再出现在这块板子里**（批量提示已改成分区级说明）。 */
.modal.am.sug-wide { width: 1020px; }        /* §8.9：批量形态宽度 */

/* 明细表（批量）+ 提交结果表：四列 fixed 网格；列宽同时写在每个 span 的 inline width 上 */
.modal.am.sug .sugt-h,
.modal.am.sug .sugt-r { display: grid; grid-template-columns: 108px minmax(0, 1fr) 124px 150px; column-gap: 10px; }
.modal.am.sug .sugt-r { height: 26px; font-size: 12.5px; }        /* §8.9 行高 26 */
.modal.am.sug .sugt-h { height: 22px; margin-bottom: 2px; }
.modal.am.sug .sugt-h span { color: var(--am-th); font-size: 11.5px; }   /* §8.9 表头 11.5px #9aa1a9（无底色） */
.modal.am.sug .sugt-r > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 首列「关键词」必须**单行**（现状被挤成竖排两行 —— 列宽 108 与 nowrap 一起给，别只给一个，§8.9） */
.modal.am.sug .sugt-h > span:first-child,
.modal.am.sug .sugt-r > span:first-child { white-space: nowrap; }

/* 提交结果表（逐条结果，沿用记录条口径） */
.modal.am.sug .sugt-h2,
.modal.am.sug .sugt-r2 { display: grid; grid-template-columns: 70px 104px 104px 84px minmax(0, 1fr); column-gap: 10px; }
.modal.am.sug .sugt-r2 { height: 26px; font-size: 12.5px; }
.modal.am.sug .sugt-h2 { height: 22px; margin-bottom: 2px; }
.modal.am.sug .sugt-h2 span { color: var(--am-th); font-size: 11.5px; }
.modal.am.sug .sugt-r2 > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 「京东建议 ¥1.47」：§8.3 药丸（高 28 / 圆角 14 / padding 0 12px / 12.5px）+ §8.1/§8.7 的浅蓝一对
   （底 #f2f7ff + 描边 #bcd7fb + 字 #2563eb）—— 不许落回 `.btn` 基类的红或蓝实心 */
.modal.am .sug-pick { height: 28px; border-radius: 14px; padding: 0 12px; font-size: 12.5px; font-weight: 400;
  background: #f2f7ff; border: 1px solid #bcd7fb; color: #2563eb; }
.modal.am .sug-pick:hover { border-color: #2563eb; color: #2563eb; }

/* 幅度闸：提示条 = §8.9 的浅蓝（12.5px）+ 手输框 = §8.3 控件令牌（默认 height:28 由 `.modal input` 给） */
.modal.am .am-gate { font-size: 12.5px; color: #2563eb; }
.modal.am .am-footrow { flex-basis: 100%; display: flex; align-items: center; gap: 6px; margin: 2px 0 0; }
.modal.am .am-footrow #adWord { font-size: 13px; width: 110px; }

/* 底部的两条固定带要**通栏**（左右不许有白边）：`.modal` 是 padding:0 的列盒，给记录条一个通栏底即可 */
.modal.am.sug #adjHistory { border-radius: 0 0 14px 14px; }
.modal.am.sug .modal-foot .btn[disabled] { opacity: .5; cursor: not-allowed; }
/* 兜底：万一别处调到了「案① 单列」那套切换，这块板子也**不许**把右栏藏掉（§8.9 单条 = 860 左右分区） */
.modal.am.sug.mode-1 .am-r { display: block; }
.modal.am.sug.mode-1 .am-top { display: none; }

/* ---------------- 「新建计划 · 分步向导」（④ 分步向导型）----------------
   ★★ 2026-10-03 并入《UI规范.md》§八（§8.10 分步向导型，用户拍板**案 A**）。
   案 A = **保留 6 步流程**，把令牌与骨架换成 §八 的真套件原语；容器 = `class="modal am"`、宽 860。

   ★★★ 这一节的头号硬结论（**实测反证过，别走弯路**）：
     `.modal.pw-modal` 那套规则（含 `--pw-*` 令牌 + `.pw-modal .btn/input/...`）用的是**后代选择器**，
     特异性高于 `.modal.am .modal-foot .btn` 这类写法 —— 实测给 `.modal` 同时挂 `am` 与 `pw-modal`：
     按钮圆角**仍是 9px**；**去掉 `pw-modal`** 才立刻变 **5px**（§8.3 的值）。
     → 所以"并入 §八"**不是再叠一层类**，而是**删掉 `--pw-*` 令牌定义与整批 `.pw-modal ...` 覆盖规则**，
       改用 `.modal.am` 自带的令牌 + §八 的骨架原语（`.pd-form` / `.am-cell` / `.am-gt` / `.am-blocknote` /
       `.u` / `.am-impact` / `.modal-foot` + `.am-grow` / `.am-hrow`）。
     → 下面这一段是**内容形态**（列表/选项/chip/记录条/进度点），不是令牌层；值一律取 §8.1/8.2/8.3：
       圆角 5、描边 #e5e8ec、选中态 底 #f7faff + 描边 #bcd7fb + 字 #2563eb、字号 11.5/12/12.5/13。

   ★ 历史（2026-09-24）用户选的"柔和卡片行界"（大圆角 9~16px + 浅蓝投影 + #e4ebf6 描边）
     **已被本批收敛**：§八 只有一套值，不许再出现 9/10/11/12/16px 的自造圆角与自造投影。 */

/* 字段级提示 / 次级文案：12 / #8b93a1（§8.2）—— 短提示挂控件右侧同一行 */
/* ★ 踩坑复核（2026-10-03）：`.hide` 这个类**整个 style.css 里根本没有定义**（grep 过），
   而向导一直靠 `classList.add/remove('hide')` 切「挂已有计划 / 新建计划」两段与勾选框显隐 ——
   也就是说并入 §八之前，这两段**其实是同时可见的**（旧注释还写着"给 .hide 兜底"，那条兜底规则已经没了）。
   这里按向导自己的口径补回来：**只作用在 `.modal.am` 里**（不动其它板子）。
   ⚠️ `!important` 是**必须**的：`.hide` 现在用在 `.pd-form` 的**网格项**上（第 3 屏「投放目标」那一行），
      隐藏时若还占一个网格位，后面的 `<label>出价 *</label>` 会被挤到"标签列"以外的错位格子里
      （实测第 3 屏就是这样破的：出价框掉到第二行、整屏高度多出一截）。 */
.modal.am .hide { display: none !important; }
/* ★★ 2026-10-04（用户实测报「新建一个计划行后面的提示词…本行和下面一行是贴在一起的」）：
   `.pw-row` **整个 style.css 里从来没有定义过** —— 第 1 屏那行「＋ 新建一个计划 / 或挂到已有计划下面 / 提示句」
   于是按 inline 流排：按钮与 `.u` 之间没有间距、整行与下面 `#pwPlanPick` / `#pwNewBox` 之间也没有行距
   （只靠 `.pw-sub` 自己的 margin 顶着）→ 看起来就是"贴在一起"。
   这里按 §8.3/§8.10 补：flex + 列距 8 + 行距 10，并且让 `#pwPlanPick` / `#pwNewBox` 与其它字段块一样留出上距。 */
.pw-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.modal.am #pwPlanPick, .modal.am #pwNewBox { margin-top: 4px; }
/* 开始日期（点选式触发器）：值**靠左**（原来 `justify-content:center` 把 `2026/10/04` 摆中间）。
   只作用在向导的字段格里，不动顶栏时间筛选器与调整弹窗里那几个同款触发器。 */
.modal.am .pd-form .pw-fld .am-dptrig { justify-content: flex-start; }
/* ★★ 第二号坑（2026-10-03，复核量出来的）：`<button>` / `<label>` 是**行内级**元素，
   放在 `.am-cell`（flex 容器）里会各占一个"匿名 flex 项"，行盒按**基线**对齐 → 右下多出约 4.7px：
   实测第 2 屏那条字段行 `offsetHeight = 32.7`、第 6 屏（只有 input+span）是 `28`。
   → 整个 `.modal.am` 里的按钮 / 选项 pill / 勾选框一律 `display: inline-flex`（它们本来就自带居中与内边距），
     行高回归 **28**（§8.6-9 的"每条字段行 ≤ 34"是硬线，这里做到贴着 28）。 */
.modal.am .btn { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.modal.am .chk { display: inline-flex; }
.pw-sub { font-size: 12px; color: var(--am-gray); line-height: 1.7; margin: 5px 0 8px; }
.pw-sub.up { color: #e1251b; } .pw-sub.down { color: #0a9b6a; }
.pw-mut { color: var(--am-gray); }
.pw-dim { color: var(--am-gray); font-size: 12px; margin-left: 6px; }
.pw-inline { font-size: 12px; color: var(--am-gray); margin-left: 6px; }
/* 标签 = 字段块里的标签列（12.5 / #5b6472，左对齐；由 `.modal.am .pd-form label` 提供字号与颜色） */
.pw-label { display: block; font-size: 12.5px; color: var(--am-2nd); margin: 0 0 4px; }
/* 选项 pill / chip 行（gap 6 = §8.3 控件间距） */
.pw-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
/* 「字段标签在上、控件在下」的一组（用 wrapper 的 gap 控距 —— 给 label 加 margin 会把它压进字段网格的 28 行里） */
.pw-stack { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin: 0 0 8px; }
/* ★ 字段块：**每个字段包一层**（`display: contents` → 里面的 `<label>` 与 `.am-cell` 仍是 `.pd-form` 的网格项，
   84px 标签列一如 §8.3；但"藏一个字段"变成藏**整层**，不会再让后面的字段被 auto-placement 挪格子）。
   第 3 屏那条 84px 高的破版就是"只藏了值列、标签列还占着格子"造成的。 */
.pw-fld { display: contents; }
/* 表单外面那块"非字段"内容（列表 / 建议行）与字段网格之间的 8px（= §8.3 row-gap） */
.pw-mt { margin-top: 8px; }
.pw-cardfoot { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; }
.pw-cardfoot .grow { flex: 1 1 auto; }
/* 选项（选建法 / 选地域口径）：高 28 / 圆角 5 / 描边 #e5e8ec；选中 = #f7faff + #bcd7fb + #2563eb */
.pw-opt { display: inline-flex; align-items: center; gap: 6px; width: auto; height: 28px; box-sizing: border-box;
  border: 1px solid var(--am-line); border-radius: 5px; padding: 0 10px; cursor: pointer; background: #fff; }
.pw-opt:hover { border-color: #bcd7fb; }
.pw-opt.on { border-color: #bcd7fb; background: #f7faff; }
.pw-opt b { font-size: 13px; color: var(--am-fg); font-weight: 400; }
.pw-opt.on b { color: #2563eb; font-weight: 600; }
.pw-opt span { font-size: 12px; color: var(--am-gray); }

/* 列表（商品候选 / 地域）：行 = 26 高、单行、圆角 5；面板 = 浅底 + 1px #eef1f4 */
.pw-list { border: 1px solid var(--am-line2); border-radius: 5px; padding: 4px 6px; max-height: 320px; overflow: auto; }
/* ★★ 2026-10-03 P2b④：商品列表 = **真表格**（表头 + 两列 grid `150px 1fr`）。
   规格值照抄：表头 `1px #eef1f4` 下边线、11.5px `#9aa1a9`、letter-spacing .4px（与 §八 记录条表头同一口径）。
   ★ 2026-10-03 §17.110（收口 P2b④ 留下的作用域隐患）：表头与行 grid 从 `.pw-list` 收进**商品列表专属类**
   `.pw-skulist`（挂在 `#pwSkuList` 上）—— 原来 `.pw-list .pw-thead` 会同时命中**地域块**（`#pwAreaList`
   也挂 `.pw-list`），将来谁往地域块里塞一个 `.pw-thead` 就会凭空长出表头。
   ⚠️ `#pwKwDetail` 的表头有自己的一套 `.pw-kwdetail .pw-thead`（见下面 ⑥ 那一段），**与这里无关、不许动**；
   列宽实测仍是 `150px 638.667px`（商品表头 = 商品行），地域块内 `.pw-thead` 节点数 = 0。 */
.pw-skulist .pw-thead { display: grid; grid-template-columns: 150px 1fr; gap: 10px;
  padding: 4px 6px 5px; border-bottom: 1px solid #eef1f4;
  font-size: 11.5px; color: #9aa1a9; letter-spacing: .4px; }
.pw-skulist .pw-thead span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 行 = **两列 grid**（原来 `display:flex` 是假列：实测列宽随内容浮动 140↔141、第 3 列起整组横移 2px）。
   `minmax(0,1fr)` 而不是 `1fr`：型号很长时不许把网格撑破（§八 的通用写法）。
   ⚠️ 只把 **grid 那几条**收进 `.pw-skulist`；`.pw-item` 的外观（高 26 / 下边线 / hover / 选中）仍是通用规则，
   本节里 `.pw-skulist .pw-item`(0,2,0) 的 `display:grid` 照样压过后面的 `.pw-item`(0,1,0) 的 `display:flex`。 */
.pw-skulist .pw-item { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; align-items: center; }
.pw-skulist .pw-item .pw-mi-sku { font-size: 12.5px; color: var(--am-gray); font-variant-numeric: tabular-nums; }
.pw-skulist .pw-item .pw-mi-model { font-weight: 600; color: var(--am-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pw-item { display: flex; gap: 10px; align-items: center; height: 26px; box-sizing: border-box; padding: 0 6px;
  border-bottom: 1px solid #f2f4f7; cursor: pointer; font-size: 12.5px; border-radius: 5px; }
.pw-item:last-child { border-bottom: 0; }
.pw-item:hover { background: #f7faff; }
.pw-item.on { background: #f7faff; box-shadow: inset 0 0 0 1px #bcd7fb; }
.pw-mi-model { font-weight: 600; color: var(--am-fg); min-width: 92px; }
.pw-item.on .pw-mi-model { color: #2563eb; }
/* `.pw-mi-name` / `.pw-mi-num` 已按规格删除（grep 确认全项目再无使用点：短名 / 花费 / 订单 / CPA 四列下线） */
.pw-mi-sku { color: var(--am-gray); font-size: 11.5px; font-variant-numeric: tabular-nums; }
/* 「一键回滚本次创建」放在创建记录条旁边（§8.10）—— 就地收窄，不占一整行 */
#pwRollback { margin-left: 8px; }

/* 地域：大区分组 + 省份 chip（4 列网格） */
.pw-areas { max-height: 292px; }
.pw-agroup { padding: 0 0 6px; margin-bottom: 6px; border-bottom: 1px solid var(--am-line2); }
.pw-agroup:last-child { margin-bottom: 0; border-bottom: 0; }
.pw-agrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px 6px; }
.pw-chk { display: flex; gap: 6px; align-items: center; height: 26px; box-sizing: border-box; padding: 0 7px;
  font-size: 12.5px; cursor: pointer; border-radius: 5px; border: 1px solid transparent; color: var(--am-2nd); }
.pw-chk:hover { background: #f7faff; }
.pw-chk.on { background: #f7faff; border-color: #bcd7fb; color: #2563eb; }

/* 关键词分组（勾选区）+ 已选词明细 */
.pw-kwgroup { padding: 0; margin-bottom: 8px; }
.pw-kwhead { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.pw-kwhead b { font-size: 12.5px; color: var(--am-2nd); font-weight: 600; }
.pw-kwhead .grow { flex: 1 1 auto; }
.pw-areatop { padding: 0 0 6px; margin-bottom: 6px; }
.pw-kwchips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 168px; overflow: auto; }
.pw-kwchip { font-size: 12.5px; color: var(--am-2nd); background: #fff; border: 1px solid var(--am-line);
  border-radius: 5px; padding: 3px 9px; cursor: pointer; user-select: none; }
.pw-kwchip:hover { border-color: #bcd7fb; }
.pw-kwchip.on { background: #f7faff; border-color: #bcd7fb; color: #2563eb; font-weight: 600; }
.pw-kwdetail { margin-top: 8px; border-top: 1px solid var(--am-line2); padding-top: 8px; }
.pw-kwdetail:empty { display: none; }
/* ★★ 2026-10-03 P2b⑥：「已选关键词」= **真表格**（表头 + 五列 grid）。
   规格值照抄：`minmax(0,1fr) 96px 96px 110px 56px`；第 4 列（京东建议）**必须有固定宽** ——
   原来 `.pw-kwsug` 的 `w=0`，一旦有建议价，右邻的「移除」整列右移（实测病根）。
   ⚠️ 行用 `minmax(0,1fr)` 而不是 `1fr`：长词（`.pw-kwword` 带 ellipsis）不许把列撑破。 */
.pw-kwdetail .pw-thead { display: grid; grid-template-columns: minmax(0, 1fr) 96px 96px 110px 56px;
  gap: 10px; padding: 0 6px 5px; border-bottom: 1px solid #eef1f4;
  font-size: 11.5px; color: #9aa1a9; letter-spacing: .4px; }
.pw-kwdetail .pw-thead span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-kwlist { max-height: 216px; overflow: auto; }
.pw-kwdetail .pw-kwrow { display: grid; grid-template-columns: minmax(0, 1fr) 96px 96px 110px 56px;
  gap: 10px; align-items: center; padding: 0 6px; box-sizing: border-box; }
.pw-kwrow { display: flex; align-items: center; gap: 8px; height: 28px; box-sizing: border-box;
  border-bottom: 1px solid #f2f4f7; font-size: 12.5px; }
.pw-kwrow:last-child { border-bottom: 0; }
.pw-kwword { font-size: 12.5px; color: var(--am-fg); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-kwsug { font-size: 12px; color: var(--am-gray); font-variant-numeric: tabular-nums; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
/* 向导内的控件宽度：§8.3 要求**显式定宽**（不定宽会被 flex 拉成整宽）。
   ★ P2b⑥：关键词明细行改成 grid 后，列宽由网格给 → 控件必须 `width:100%` 填满格子
     （原来写死 `88px`，会让 96px 的列里控件只占 88）。 */
.pw-kwrow input, .pw-kwrow select { width: 100%; height: 28px; font-size: 12.5px; }
.pw-kwrow .pw-kwdel { width: 100%; }
#pwUnitName, #pwSkuIn { width: 170px; }
#pwAreaSearch { width: 240px; }
#pwBatchType, #pwBatchPrice, #pwAllPrice, #pwKwBatchPrice { width: 92px; }
/* 出价屏「京东建议出价（成本控制·成交口径）」：由 `.am-blocknote` 降级成**同一行的短 `.u`**（P2b①） */
.pw-sug-t { margin-left: 0; margin-right: 2px; }

/* 页眉右上角的关闭（每一步都能关） */
.pw-x { position: absolute; right: 12px; top: 10px; width: 26px; height: 26px; padding: 0; border: 0;
  background: transparent; color: var(--am-gray); font-size: 15px; line-height: 1; cursor: pointer; border-radius: 5px; }
.pw-x:hover { background: #f7faff; color: var(--am-fg); }

.pw-dots { display: flex; gap: 6px; align-items: center; margin: 0 0 10px; }
.pw-dots i { width: 24px; height: 3px; border-radius: 2px; background: var(--am-line); display: block; }
.pw-dots i.on { background: var(--am-blue); }
.pw-dots span { margin-left: auto; font-size: 12px; color: var(--am-gray); }
/* ★ 进度行右边那句 `第 N/6 步 · <步名>`：**留在 DOM 里但不上屏**（无头测试 / 读屏软件按它认步，
   见 tools\verify_planwizard_ui.js 的 waitStep）+ 紧下面那条 `.am-gt` 才是**看得见**的同名分区标题
   → 既满足 §8.10（`.pw-dots` 保留、屏题用 `.am-gt`），又不会把同一句话在一屏里写两遍。 */
.pw-stepsr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* 屏顶部的**问题句**（用户原话保留）：降到正文层级 13 / #1f2329（§8.2）—— 层级由上面的分区标题 `.am-gt` 承担 */
.pw-t, .pw-q { font-size: 13px; font-weight: 400; color: var(--am-fg); margin: 0 0 8px; }
.pw-body { min-height: 92px; }
/* ★★ 2026-10-04 顺手修的**视觉缺陷**（自查截图时看出来的）：「商品定向」正文最下面那个 `#kwMsg` 是
   **提交后的结果框**（`class="am-impact"`），空的时候仍带 1px 描边 + `#f7f9fb` 底 + `8px 10px` 内边距
   → 开板就是**一个空灰盒子**（实测 rect 824×17、border 0.667px rgb(229,232,236)、bg rgb(247,249,251)），
   看着像"多了一个空输入框"（那是早几轮删「影响」段时留下的容器壳）。
   → 空的就别占位（与 `.pw-sug:empty` / `.modal.am .pw-body > *:empty` 同一套做法）。 */
.modal.kwm .am-impact:empty, .modal.kwm #kwMsg:empty, .modal.kwm .kwm-note:empty { display: none; }
/* ★★ 2026-10-04 用户口径：「注意行间距，第二步和第三步又有行贴在一起了」——
   实测（`tools\out\_fb10_gaps.js` 逐屏量，只数**可见**子块）：
     第 1 屏 `pw-row → pwNewBox` = **10** ✓（上一轮修过），
     第 2 屏 `.pd-form → #pwSkuList` = **0** ⚠️、第 3 屏 `.pd-form → #pwSugOut` = **0** ⚠️（就是用户点的那两屏），
     第 4 屏 `→ #pwAreaBox` = 6、第 6 屏 `→ #pwRunNote` = 6（同一类毛病，只是没那么明显）。
   → 一条规则统一到 **10px**（与第 1 屏同一口径）。为什么不会把间距越加越大：普通流里相邻兄弟的
     `margin-top`/`margin-bottom` 会**取大值合并**（8 与 10 → 10），所以各块原先自带的 6/8px 不会被叠加成 16/18px
     （实测第 5 屏 `pw-cardfoot → pwKwGroups` 是 8 → 改后 10，不是 18）。
   作用域 = `.modal.am .pw-body`，**只有向导用这条**，别的板子不受影响。 */
.modal.am .pw-body > * + * { margin-top: 10px; }
/* 还没写内容的空槽位（`#pwKwMsg` / `#pwKwSel` 这种）别撑出一段空白 —— 与上面 `.pw-sug:empty` 同一套做法。
   ⚠️ 只在**确实是空的**时候生效：写进内容后 `:empty` 自然不再命中，槽位照常出现。 */
.modal.am .pw-body > *:empty { display: none; }

/* 出价屏：历史表现（影响句 13 / #1f2329）+ 京东建议三档（浅蓝一对 pill） */
.pw-ref { font-size: 13px; color: var(--am-fg); font-variant-numeric: tabular-nums; margin: 8px 0 6px; }
.pw-ref b { color: var(--am-fg); font-weight: 600; }
.pw-sug { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--am-gray); margin: 0 0 6px; }
.pw-sug:empty { display: none; }
.pw-sugbtn { height: 28px; border-radius: 14px; border: 1px solid #bcd7fb; background: #f2f7ff; color: #2563eb;
  font-size: 12.5px; font-variant-numeric: tabular-nums; padding: 0 12px; }
.pw-sugbtn.on { border-color: #2563eb; color: #2563eb; font-weight: 600; }
/* ★ P2b⑥：`#pwKwSel`（已选 N 个词）是字段级提示 `.u`，在块级流里会与上一条 `.pw-sub` 贴在一起 → 给一点上距。
   ★ 2026-10-04 起统一到 **10px**（与 `.modal.am .pw-body > * + *` 同一口径）：这条是 `#id` 选择器，
   特异性高于那条块级规则，所以**必须在这里也写 10**，否则它仍按 4px 渲染（实测 gap=4，全屏就它一个不齐）。 */
#pwKwSel { display: block; margin-top: 10px; }

/* 确认屏：确认清单用 `.pd-form` 只读行（标签列 84px）；值 13 / #1f2329
   ★ P2b⑦：`出价` 那一行不再单独用 `.pw-big`（值降级成普通 `.u`，避免"同一行两条灰字"）→ `.pw-big` 规则已删。 */
.pw-v { font-size: 13px; color: var(--am-fg); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ★ 关键词分组那一块（`#pwKwGroups` 挂着 `.pd-form` 只是为了拿到"分区标题 11px / blocknote 12px / chip"那套
   与其它屏同一条左边界，但它**不是字段网格**）→ 必须把 84px 标签列收掉：
   不收掉的话分组名会被塞进 84px 一格，挤成竖排（实测 `scrollWidth 156 > clientWidth 84`）。 */
#pwKwGroups.pd-form { grid-template-columns: minmax(0, 1fr); row-gap: 8px; column-gap: 0; }
#pwKwGroups .pw-kwgroup { min-width: 0; }
#pwKwDetail, #pwKwMsg, #pwKwSel { grid-column: 1 / -1; }
/* `#pwKwDetail` 不是 `.pd-form` 的子项（它挂在 `.pw-body` 下），上面那条只是历史兜底；
   真正让它整宽的是 `.pw-body` 是块级流 —— 这里显式写一句，免得将来有人把它挪进网格里。 */
.pw-body > #pwKwDetail { min-width: 0; }

/* 创建记录条（§8.4-6 口径）：页脚**之下**、默认折叠、条内滚动 200px、明细行高 26、
   四列 108/96/1fr/124、表头 11.5px #9aa1a9。
   ⚠️ `.am-hist` 的底色/上边线在别处是挂在 `#adjHistory` 这个 id 上的 → 这里用**自己的** `.pw-hist` 显式补全，不自造 id。 */
.pw-hist { background: var(--am-soft); border-top: 1px solid var(--am-line); padding: 9px 18px; }
.pw-hist-h { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12.5px; color: var(--am-2nd); }
.pw-hist-h:hover { color: #2563eb; }
.pw-hist-h .pw-hist-t { font-weight: 600; }
.pw-hist-h .pw-hist-x { color: var(--am-gray); font-variant-numeric: tabular-nums; }
.pw-hist-h .pw-hist-tg { margin-left: auto; color: #2563eb; white-space: nowrap; }
.pw-hist-b { display: none; margin-top: 7px; max-height: 200px; overflow: auto; }
.pw-hist.open .pw-hist-b { display: block; }
.pw-hist-hrow { display: grid; grid-template-columns: 108px 96px minmax(0, 1fr) 124px; column-gap: 10px;
  align-items: center; height: 26px; font-size: 12.5px; border-bottom: 1px solid #f2f4f7; }
.pw-hist-hrow:last-child { border-bottom: 0; }
.pw-hist-hrow > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-hist-hrow .pw-ht { color: #9aa1a9; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pw-hist-hrow .pw-hn { color: var(--am-2nd); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-hist-hrow .pw-hv { color: var(--am-fg); }
.pw-hist-hrow .pw-hs { white-space: nowrap; text-align: right; color: var(--am-gray); font-size: 12px; }
.pw-hist-hrow .pw-hs.up { color: #e1251b; }
.pw-hist-hrow .pw-hs.down { color: #0a9b6a; }
.pw-hist-hhead { display: grid; grid-template-columns: 108px 96px minmax(0, 1fr) 124px; column-gap: 10px;
  align-items: center; height: 22px; margin-bottom: 2px; border-bottom: 1px solid var(--am-line); }
.pw-hist-hhead span { color: #9aa1a9; font-size: 11.5px; }
.pw-hist-empty { font-size: 12.5px; color: var(--am-gray); padding: 4px 0; }

/* 页脚里的校验/状态行（12.5 / #e1251b；`:empty` 不占位，保证右边界 = 弹窗右 − 18） */
#pwHint { font-size: 12.5px; color: var(--am-2nd); }
#pwHint.up { color: #e1251b; }
#pwHint:empty { display: none; }

/* ================= 全站板子统一（2026-09-24 用户："把板子的规则应用到全站的板子中"）=================
   做法：先审计（tools/out/_audit_boards.js 逐板开弹窗量尺寸+截图）→ 共性问题上全局修，个性问题逐板修。
   审计出来的三条**共性**（每个板子都中）：
     ① **所有板子的主按钮都是红的** —— 因为项目基类 `.btn` 本身就是 `#e1251b` 红底，
        各板子的"提交给京东 / 确认提交 / 保存修改"都只写了 `class="btn"` → 全站 CTA 是红色。
        按《UI规范.md》硬规则 8，主色应为 `#2563eb`；**危险动作**才用红（`.btn.danger`）。
     ② **所有板子都没有"关闭"按钮**（只有底部取消/提交），与硬规则"每屏可关"不一致。
     ③ **控件高度不统一**：实测各板子 13/20/23/28/29/31/33px 七种高度混用。
   下面的规则一次性把 ①②③ 统一（不动各板子的功能与布局）。 */
/* ① 主按钮 = 主色（危险按钮在后面覆盖，保持红色） */
.modal-foot .btn, .modal-box .modal-foot .btn, .modal .modal-foot .btn { background: #2563eb; color: #fff; border-color: #2563eb; font-weight: 600; }
.modal-foot .btn:hover, .modal-box .modal-foot .btn:hover { opacity: .92; color: #fff; }
.modal-foot .btn.ghost, .modal-box .modal-foot .btn.ghost { background: #fff; color: #374151; border: 1px solid #dfe3e8; font-weight: 400; }
.modal-foot .btn.ghost:hover { color: #2563eb; border-color: #bcd7fb; opacity: 1; }
.modal-foot .btn.danger, .modal-box .modal-foot .btn.danger { background: #fff; color: #e1251b; border: 1px solid #f3c8c4; font-weight: 400; }
/* ③ 弹窗内控件统一 28px（勾选框除外）；表格里的小按钮除外（它们靠 .tiny/.sm 控） */
.modal input:not([type="checkbox"]):not([type="radio"]), .modal select,
.modal-box input:not([type="checkbox"]):not([type="radio"]), .modal-box select { height: 28px; }
.modal .modal-foot .btn, .modal-box .modal-foot .btn { height: 28px; }
/* ② 统一关闭按钮（由 app.js 的 bindBoardCloseX 自动挂到页眉右上角） */
.board-x { position: absolute; right: 12px; top: 10px; width: 26px; height: 26px; padding: 0; border: 0;
  background: transparent; color: #8a9099; font-size: 15px; line-height: 1; cursor: pointer; border-radius: 8px; z-index: 3; }
.board-x:hover { background: #eef3fb; color: #1f2329; }
.modal-head, .modal-box .modal-head, .modal-box > .modal-title { position: relative; }
/* ④ 切换类"芯片按钮"的选中态：原来一律是站点强调红 `#e1251b`（跟主色语境混在一起，看不出"这是主操作"）。
   实测这几个都属"选择/切换"语义（时间范围 / 查看维度 / 弹窗里的动作-值选择）→ 统一改成主色蓝。 */
.range-btn.active { background: #2563eb; border-color: #2563eb; color: #fff; }
.range-btn:hover { border-color: #bcd7fb; color: #2563eb; }
.dim-btn.on { background: #2563eb; border-color: #2563eb; color: #fff; }
.dim-btn:hover { border-color: #bcd7fb; color: #2563eb; }
.act-btn.on { background: #2563eb; border-color: #2563eb; color: #fff; }
.act-btn:hover { border-color: #bcd7fb; color: #2563eb; }

/* ================= 全站：数字一律用等宽变体（2026-09-24 用户选定「方案 2」）=================
   背景：用户问"填写框输入的字体是什么字体" → 实测发现**表单控件不继承 body 字体**（见文件顶部那条修复），
   顺带发现"数字列对不齐"。用户看了 3 张对比图后选 **2 → 同一套微软雅黑 + 数字等宽变体**。
   做法：`font-variant-numeric: tabular-nums` —— **不换字体**（汉字是方块字，等宽/比例宽度一致，所以中文观感零变化），
   只让数字（0-9、, . % ¥）在雅黑里走等宽字形 → 表格列、金额、百分比上下对齐。
   为什么放文件末尾：前面已有 ~20 处零散的 tabular-nums，这里做一次**兜底统一**，覆盖更早的声明。 */
table thead th, table tbody td, table tfoot td,
.cards > *, .card, .sum-row td,
input[type="number"], input[type="date"], .modal.am input, .modal.am select { font-variant-numeric: tabular-nums; }

/* ================= 维护类四个页面：按《UI规范》补「页面级」落地（2026-09-28）=================
   用户原话："给维护的四个菜单，按照UI规范优化一下。"
   背景：规范 §五 那次全局修**只覆盖了弹窗作用域**（`.modal-foot .btn` / `.modal input` / `.modal select`），
   于是这四个**页面**（型号映射表 / 账号管理 / 用户管理 / 调整操作日志）审计出 4 条共性违规：
     ① 主按钮仍是基类红 `#e1251b`（保存修改 / 开始匹配 / 添加 / 新增）；
     ② 表单控件高度 4~7 种混用（实测 35/33/29/21/20/14）；
     ③ 切换类芯片选中是旧靛蓝（`#eef2ff` 底 + `#2a3fa8` 字）；
     ④ 面板是白底 **8px** 圆角，没有规范 §二-8「卡片行界」的行界感。
   做法：**只给这 4 页加作用域类 `.mnt`**（设置在 app.js 的 `setActiveNav()` 里 —— 它已经算好了
   `inModels/inUsers/inAccounts/inAdjustLog`，离开这几页自动摘类，不会漏到别的页面；§二-1 范围不许扩大）。
   下面是同一套规范值：主色 `#2563eb`、控件/按钮 28px（`.tiny` 24px）、外层面板 `#f4f7fb` + 16px、
   表格=白卡片 11px + `1px #e4ebf6` 描边 + 极浅投影（内边距 ≥10px 才不会被 overflow 裁掉投影）。 */
#content.mnt .btn { background: #2563eb; border-color: #2563eb; color: #fff; height: 28px; padding: 0 12px; line-height: 26px; }
#content.mnt .btn.ghost { background: #fff; color: #333; border: 1px solid #dbe3f0; }
#content.mnt .btn.ghost:hover { border-color: #bcd7fb; color: #2563eb; }
#content.mnt .btn.danger { background: #e1251b; border-color: #e1251b; color: #fff; }   /* 危险动作仍为红 */
#content.mnt .btn.tiny { height: 24px; padding: 0 8px; line-height: 22px; }
/* ★ 2026-09-28 修（用户看图："下拉框文字被上下裁切"）：上一条只给了 `height:28px`，
   而基础样式里这些控件带着 `padding:7px` → 内容区只剩 26−14 = **12px**，装不下 13px 的字 → 文字被切。
   正确做法：**上下内边距归零 + 给定行高**，让文字占满内容盒（水平内边距保留 8px）。 */
#content.mnt input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#content.mnt select { height: 28px; padding: 0 8px; line-height: 26px; box-sizing: border-box; }
#content.mnt select { padding-right: 4px; }
#content.mnt input[type="checkbox"], #content.mnt input[type="radio"] { height: auto; padding: 0; }
#content.mnt textarea { box-sizing: border-box; }
#content.mnt .pill.on { background: #2563eb; border-color: #2563eb; color: #fff; }
#content.mnt .panel { background: #f4f7fb; border: 1px solid #e6ecf6; border-radius: 16px; padding: 10px; }
#content.mnt .panel .table-wrap { background: #fff; border-radius: 11px; }
#content.mnt .panel table { background: #fff; border: 1px solid #e4ebf6; border-radius: 11px; box-shadow: 0 1px 2px rgba(16, 32, 64, .04); border-collapse: separate; border-spacing: 0; }

/* ================= 操作日志表格：9 列均分 + 单行省略 + 「详情」看全（2026-09-28 用户选定「方案 4」）=================
   这一段被用户否过两次，把结论记下来免得再犯：
     ① 8 列各自挤窄 → 到处截断、失败原因还溢出列外（用户原话："更难看了"）；
     ② 改成 6 列（时间/操作人合并、账号并进对象）→ 不截断了，但「变更」列一家独大、其余列空得没道理
        （用户："我不要换行或者合并显示，均分列宽，超出的部分省略号展示"）；
     ③ 定稿：**9 列不合并、各列均分、每格单行不换行、超出省略号**。补看方式给了 4 个方案
        （原生悬停 / 悬停浮层 / 点格子展开 / 保留「详情」按钮），用户选**方案 4**
        → 表格本体**不加任何新的**悬停浮层或点格子展开，要完整值就点行尾「详情」。
   布局：`table-layout: fixed` + `width: 100%`；9 列**各 11.11%**（= 均分）——
        用百分比而不是固定 96px：96px 只在用户窗口（1160px，正文 863px）下才是"均分"，
        窗口一变宽，多出来的宽度会全砸到最后一列上（1700px 巡检视口下「操作」列会被撑成一大条空白）。
   横向内边距：`.adj-table td` 是 `7px 10px` → 96 − 20 = 76px 内容盒，装不下「动作」列的 5 个汉字 + "?" 角标
        （实测 5 × 12.5 = 62.5 + 2 + 13 = 77.5px）→ 这里把左右内边距压到 **7px**（内容盒 81.6px，留 4px 余量）。
   ★ 两条必须留的例外（否则功能会坏）：
     · 「操作」列**不给** `overflow: hidden` —— 它装的是真按钮，裁掉就点不到了；
     · 详情行 `td` 必须 `white-space: normal; overflow: visible` —— 它要整段显示未截断的原始值。 */
#content.mnt .log-table { table-layout: fixed; width: 100%; }
#content.mnt .log-table th, #content.mnt .log-table td {
  text-align: left; padding-left: 7px; padding-right: 7px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#content.mnt .log-table td.log-ops { overflow: visible; }
/* 「操作」列只占 1/9（用户窗口下 ≈96px）：要塞「回滚 + 详情」两个按钮
   → 实测 2×(2×11 + 10 + 2) + 4 = 72px < 82px 可用宽，不用再挤。 */
#content.mnt .log-table .log-ops .btn { padding: 0 5px; font-size: 11px; }
#content.mnt .log-ops .btn + .btn { margin-left: 4px; }
#content.mnt .log-t .mono, #content.mnt .log-b, #content.mnt .log-av { font-size: 12px; }
#content.mnt .log-b .dash, #content.mnt .log-av .dash { color: #b9c0cb; }
#content.mnt .log-res .tag2 { display: inline-block; margin-left: 4px; color: #8b93a1; font-size: 11px; }
#content.mnt .log-act .q { display: inline-block; margin-left: 2px; color: #9aa3b2; border: 1px solid #dbe3f0; border-radius: 50%; width: 13px; height: 13px; line-height: 11px; text-align: center; font-size: 10px; vertical-align: 1px; cursor: help; }
/* 「详情」行（方案 4 里唯一的"看全"入口）：全量上下文 + 摘要 + 未截断的原始值。
   ★ 选择器权重：(1 id, 2 class, 2 elem) > 上面的 `#content.mnt .log-table td` (1,2,1) → 一定盖得住。 */
#content.mnt tr.log-detail > td { background: #f7f9fc; padding: 8px 10px; white-space: normal; overflow: visible; }
#content.mnt tr.log-detail .meta { font-size: 12px; color: #5a6069; line-height: 1.6; word-break: break-all; }
#content.mnt tr.log-detail .sum { margin-top: 5px; font-size: 12px; }
#content.mnt tr.log-detail .sum .chip { display: inline-block; background: #eef4ff; color: #2563eb; border: 1px solid #d6e4ff; border-radius: 6px; padding: 0 5px; font-size: 11px; margin-right: 4px; }
#content.mnt tr.log-detail .src { margin-top: 5px; }
#content.mnt tr.log-detail .pre { background: #fff; border: 1px solid #e6ecf6; border-radius: 8px; padding: 8px 10px; margin-top: 4px; max-height: 150px; overflow: auto; white-space: pre-wrap; word-break: break-all; font-size: 12px; line-height: 1.55;
  /* ★ 等宽字体必须在这里**显式写**：详情区是"要对账/复制"的原始值，靠 `.mono` 类被别的规则盖掉了（实测 computed 回来是雅黑）。 */
  font-family: Consolas, "Courier New", monospace; font-variant-numeric: tabular-nums; }
#content.mnt .log-help { margin-top: 10px; }
#content.mnt .log-help summary { cursor: pointer; color: #2563eb; font-size: 12px; }
#content.mnt .log-help .help-list { margin-top: 6px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 16px; font-size: 12px; line-height: 1.5; color: #5a6069; }
#content.mnt .log-help .help-list b { color: #333; }

/* ══════════ ★ 2026-09-30：数据区「指标」面板（自定义选择展示指标 + 列左右调序） ══════════
   用户需求原文："加上自定义选择展示指标、指标列左右可调整列位置"。
   样式照《UI规范》：卡片行界 + 分区浅色面板（硬规则 8/21）、按钮不许被压换行、数字等宽。
   全部作用域在 .mp-* 下（不碰任何既有类名）。z-index:70 与账号复选面板一致：
   压得住顶栏（10）与 AI 悬浮球（60），但低于弹窗（99/200）——「在弹窗里操作失败」的层级关系不变。 */
.mp-bar { display: flex; align-items: center; gap: 8px; margin: 6px 0 8px; }
/* ★ 2026-09-30（用户要求："把指标、环/同小字放在今日累计 VS 昨日同时段行**最右侧**"）：
   标题行与这两个控件同一行，控件靠右；标题可收缩（min-width:0 才能让长标题换行而不是把控件挤出去）。 */
.panel-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.panel-h h4 { margin: 0; flex: 1 1 auto; min-width: 0; }
.panel-h .mp-bar { margin: 0 0 0 auto; flex: 0 0 auto; }
.mp-bar .btn, .mp-panel .btn { height: 30px; padding: 0 11px; border-radius: 6px; border: 1px solid #d5dde5; background: #fff; color: #3d4855; font-size: 12.5px; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; }
.mp-bar .btn:hover, .mp-panel .btn:hover { border-color: #b9c6d4; }
.mp-bar .btn.on { border-color: #1a5fb4; color: #1a5fb4; background: #f2f7fd; font-weight: 600; }
.mp-bar .caret { font-size: 10px; opacity: .75; }
.mp-panel { position: fixed; z-index: 70; width: 580px; max-width: calc(100vw - 24px); background: #fff; border: 1px solid #dbe3ea; border-radius: 10px; box-shadow: 0 10px 28px rgba(28, 40, 55, .16);
  /* ★ 2026-09-30（用户实测报 bug："窗口超出视口外，无法点击确认"）：面板必须**整体限高**，
     头/脚固定、只让中间那截滚动 —— 否则窗口一矮，「应用 / 恢复默认」就被顶到屏幕外点不到。 */
  max-height: calc(100vh - 16px); display: flex; flex-direction: column; }
.mp-panel.hidden { display: none; }
.mp-head { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #eef2f6; }
.mp-head .src { font-size: 11.5px; color: #8a94a0; }
.mp-head .mp-x { margin-left: auto; color: #93a0ad; cursor: pointer; font-size: 14px; }
.mp-body { flex: 1 1 auto; min-height: 0; padding: 8px 12px 4px; overflow-y: auto; }
.mp-gline { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-bottom: 1px dashed #eef2f6; }
.mp-gline:last-child { border-bottom: 0; }
.mp-gline .gk { width: 86px; flex: 0 0 86px; color: #7b8794; font-size: 12px; padding-top: 4px; }
.mp-gline .chips { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.mp-panel .chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #dbe3ea; border-radius: 14px; padding: 3px 9px; font-size: 12px; color: #46525f; background: #fff; cursor: pointer; }
.mp-panel .chip .bx { width: 12px; height: 12px; border: 1px solid #c3ccd6; border-radius: 3px; display: inline-block; position: relative; }
.mp-panel .chip.on { border-color: #1a5fb4; background: #f2f7fd; color: #1a5fb4; font-weight: 600; }
.mp-panel .chip.on .bx { background: #1a5fb4; border-color: #1a5fb4; }
.mp-panel .chip.on .bx::after { content: "✓"; color: #fff; font-size: 9px; position: absolute; left: 2px; top: -2px; }
.mp-panel .chip .na { font-size: 10px; color: #b0b9c3; }
.mp-sec { font-size: 11.5px; color: #66707d; margin: 8px 0 6px; line-height: 1.6; }
.mp-sec b { color: #46525f; }
.mp-ordlist { border: 1px solid #e6ebf0; border-radius: 8px; overflow: hidden; }
.mp-panel .ordrow { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid #f0f3f6; background: #fff; }
.mp-panel .ordrow:last-child { border-bottom: 0; }
.mp-panel .ordrow.drag { background: #f2f7fd; }
.mp-panel .ordrow .n { width: 18px; color: #b0b9c3; font-size: 11px; font-variant-numeric: tabular-nums; }
.mp-panel .ordrow .grip { color: #b0b9c3; cursor: grab; font-size: 13px; letter-spacing: -1px; }
.mp-panel .ordrow .nm { flex: 1; font-size: 12.5px; }
.mp-panel .ordrow .tag { font-size: 10px; color: #1a5fb4; border: 1px solid #b8d2f0; background: #f2f7fd; border-radius: 3px; padding: 0 3px; }
.mp-panel .ordrow .mv { border: 1px solid #dbe3ea; border-radius: 5px; color: #566070; font-size: 12px; padding: 1px 6px; cursor: pointer; background: #fff; font-family: inherit; }
.mp-panel .ordrow .mv.dis { color: #cfd6dd; cursor: default; }
.mp-panel .ordrow .del { border: 0; background: transparent; color: #b0b9c3; font-size: 13px; padding: 0 3px; cursor: pointer; font-family: inherit; }
.mp-foot { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-top: 1px solid #eef2f6; background: #fbfcfd; border-radius: 0 0 10px 10px; }
.mp-foot .btn.pri { background: #1a5fb4; border-color: #1a5fb4; color: #fff; font-weight: 600; }