/* ==================================================================
 * 周报网页版 · 样式
 * 分区配色（参照 Excel 周报行3 各区块底色）——共 8 个色系：
 *   base 基础灰 / yell 黄（库存分布、电商需求）/ inv 库存绿 / turn 周转橙 /
 *   cost 成本售价蓝 / need 需求量返单绿 / sale 销量蓝 / amt 销售额金
 *   只用在表头：叶子=浅色(b-*)、分组带=同系深一档(g-*)。数据区不上色
 *   （第四批按反馈去掉直铺色带与斑马纹）；保留：月销量促销绿条(.tint)、
 *   已填写暖底(.edited/.unsaved)、区块左边界线(.blk)。
 * 行高：全表统一（--rowh，app.js 按 002280 实测写入；可拖产品列底边改，
 *   偏好存本机）。单元格内容包在 .cw 里按 calc(--rowh - 7px) 裁切（7 =
 *   上下 padding 3+3 + 下边框 1），被裁掉的内容由 #ftip 悬停浮层显示全文。
 * 多行文本对齐（第六批②③）：.rtg 网格把"标签 值"式多行文本拆成子列
 *   （.rt2/.rt3，数值列 .rn 右对齐）；分城市小字（.cities/.cty）每城市
 *   一个块级行、两列右对齐；表头文字统一居中（先读文件内对应注释）。
 *   跨格对齐（第七批②）：富文本列按 --gc-<列k>（app.js calcGcWidths 实测
 *   写入的子列宽列表）固定网格列宽——同列所有格子共用一套列宽，上下对齐。
 * 管理菜单（第七批①）：导出/清空/恢复收进「管理 ▾」下拉（.adminwrap/
 *   #adminMenu/.am-item），普通用户平时看不到这三个按钮。
 * 层叠顺序（低→高）：td 白底 → 绿条(.tint) → 编辑底色(.edited/.unsaved)
 *   → 十字高亮（.cross*）→ 选区(.sel，ID 选择器提权)。规则书写顺序即
 *   优先级，勿轻动。
 * ================================================================== */
:root {
  --line: #e3e7ee; --line-soft: #eef1f6; --head-bg: #f2f4f8;
  --hover: #f0f5ff; --accent: #2f6bf0; --accent-d: #2459d6; --txt: #1c2330; --muted: #6b7480;
  --h1: 24px;               /* 表头第1行实测高（产品列控件撑高），叶子行 sticky top 用 */
  /* --rowh 由 app.js 实测写入；此处不得给兜底值，否则 var() 的 fallback 失效、
     测量阶段就会裁切内容 */

  /* 表头叶子色（浅） */
  --b-base: #e7e6e6; --b-yell: #ffec73; --b-inv: #e2efda; --b-turn: #fbe5d6;
  --b-cost: #deebf7; --b-need: #c6e0b4; --b-sale: #d9e2f3; --b-amt: #fff2cc;
  /* 分组带色（同系深一档） */
  --g-inv: #c5e0b4; --g-need: #a9ce91; --g-sale: #b4c7e7; --g-amt: #ffe699;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 13px/1.5 "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
  color: var(--txt); background: #f2f5fa;
  display: flex; flex-direction: column;
}
.hidden { display: none !important; }

/* ---------- 顶栏 ---------- */
.topbar {
  background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30;
  box-shadow: 0 1px 4px rgba(16, 24, 40, .05);
}
.toprow { display: flex; align-items: center; gap: 16px; padding: 10px 18px 8px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 9px; }
.brand .logo {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, #4a86ff, #2f6bf0 70%);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700;
  box-shadow: 0 2px 6px rgba(47, 107, 240, .35);
}
.brand h1 { font-size: 15.5px; margin: 0; font-weight: 700; letter-spacing: .2px; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tab {
  padding: 5px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; font-size: 12.5px; cursor: pointer; color: #37404d;
  transition: border-color .12s, background .12s, color .12s;
}
.tab:hover:not(.on):not(.off) { border-color: var(--accent); color: var(--accent); background: #f6f9ff; }
.tab.on {
  background: linear-gradient(180deg, #3d79f2, #2f6bf0); border-color: transparent; color: #fff; font-weight: 600;
  box-shadow: 0 2px 6px rgba(47, 107, 240, .3);
}
.tab.off { opacity: .42; cursor: not-allowed; }
.meta { margin-left: auto; color: var(--muted); font-size: 12px; display: flex; gap: 14px; }
.toolrow { display: flex; align-items: center; gap: 8px; padding: 0 18px 9px; flex-wrap: wrap; }
.btn {
  padding: 6px 13px; border: 1px solid transparent; border-radius: 7px;
  background: linear-gradient(180deg, #3d79f2, #2f6bf0); color: #fff; font-size: 12.5px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(47, 107, 240, .28);
  transition: filter .12s, box-shadow .12s;
}
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: #fff; color: var(--accent); border-color: #c9d8f7; box-shadow: none; }
.btn.ghost:hover { background: #f4f8ff; filter: none; }
.btn.ghost.on {
  background: linear-gradient(180deg, #3d79f2, #2f6bf0); color: #fff; border-color: transparent;
  box-shadow: 0 1px 2px rgba(47, 107, 240, .28);
}
.btn:disabled { opacity: .55; cursor: default; }
.toolsep, .vsep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
.editstat { color: var(--muted); font-size: 12px; }
.editstat.err { color: #c0392b; }
.editstat.ok { color: #1d8a4e; }
.toolhint { color: #98a2b3; font-size: 11.5px; margin-left: auto; }

/* ---------- 管理菜单（第七批①：导出/清空/恢复收进下拉，管理员低频用） ---------- */
.adminwrap { position: relative; display: inline-block; }
#adminMenu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 90;
  background: #fff; border: 1px solid #dfe5ee; border-radius: 10px;
  box-shadow: 0 10px 28px rgba(20, 35, 70, .16);
  padding: 5px; display: flex; flex-direction: column; gap: 2px; min-width: 148px;
}
.am-wrap { display: block; }
.am-item {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  font: inherit; font-size: 12.5px; color: #37404d; padding: 7px 12px; border-radius: 7px;
  cursor: pointer; white-space: nowrap;
}
.am-item:hover { background: #f0f5ff; color: var(--accent); }
.am-item.danger { color: #c0392b; }
.am-item.danger:hover { background: #fdf0ee; }
.am-item:disabled { color: #a8b0bd; cursor: default; }
/* 两击确认「蓄势」态（与 .btn.arm 同义，菜单项版本） */
.am-item.arm, .am-item.arm:hover { background: #fdecea; color: #c0392b; font-weight: 600; }

/* ---------- 生效的列筛选 chips ---------- */
.cfbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 8px; align-items: center; }
.cfchip {
  display: inline-flex; align-items: center; gap: 5px; background: #e8eefb; color: #2c4a8a;
  border-radius: 999px; font-size: 11.5px; padding: 3px 5px 3px 10px;
}
.cfchip b { font-weight: 600; }
.cfx { border: 0; background: transparent; color: #2c4a8a; cursor: pointer; font-size: 13px; line-height: 1; padding: 0 3px; }
.cfx:hover { color: #c0392b; }
.cfclear { border: 0; background: transparent; color: var(--muted); font-size: 11.5px; cursor: pointer; }
.cfclear:hover { text-decoration: underline; color: #c0392b; }

/* ---------- 顶部汇总卡 ---------- */
.kpis { display: flex; gap: 12px; padding: 14px 18px 2px; align-items: stretch; flex-wrap: wrap; }
.kpi {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #fff, #fbfcff);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 20px 12px; min-width: 182px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 18px -12px rgba(16, 24, 40, .15);
}
.kpi::before {
  content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, #4a86ff, #6ea8ff 65%, #a5c8ff);
}
.kpi-top { display: flex; gap: 6px; align-items: baseline; }
.kpi-label { color: var(--muted); font-size: 12.5px; }
.kpi-sub { color: #9aa4b2; font-size: 11px; }
.kpi-val { font-size: 24px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1.28; letter-spacing: .2px; }
.kpi-unit { font-size: 12.5px; margin-left: 4px; color: var(--muted); font-weight: 400; }
.kpi-note { align-self: flex-end; margin-left: auto; color: var(--muted); font-size: 12px; padding-bottom: 10px; }

/* ---------- 表格 ---------- */
.tablewrap { flex: 1; overflow: auto; background: #fff; }
/* 表宽由 app.js applyTableWidth() 设为各列宽之和：
   Chromium 下 table-layout:fixed 必须配显式表宽，否则列宽退化为内容驱动 */
table { border-collapse: separate; border-spacing: 0; table-layout: fixed; background: #fff; }
th, td {
  border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  padding: 3px 8px; height: 76px; vertical-align: middle; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis; user-select: text; font-size: 12.5px;
}
/* 统一行高：td 高度由 --rowh 控制（app.js 实测写入；未写入时 76px） */
#tb td { height: var(--rowh, 76px); }
/* 单元格内容包裹层：按可用高度裁切（7=上下 padding 3+3 + 下边框 1），
   被裁内容由 #ftip 悬停显示全文 */
#tb td .cw {
  display: block; overflow: hidden;
  max-height: calc(var(--rowh, 2000px) - 7px);
  text-overflow: ellipsis;
}
thead th {
  position: sticky; top: 0; z-index: 6; background: var(--head-bg);
  font-weight: 600; color: #37404d; cursor: default; user-select: text;
  height: auto; padding: 5px 8px; line-height: 1.35;
  box-shadow: inset 0 -1px 0 #dde3ec;
}
/* 第六批④：表头统一居中（点名的"换行后居中对齐"）；.num 是数字列的右对齐类，
   th 上的 .num 会被它压过，故用 thead th.num 提高特异度一并居中 */
thead th, thead th.num { text-align: center; }
/* 两级表头：第1行分组带（高度被产品列控件撑高，实测值写入 --h1），第2行叶子贴其下 */
#thg th { height: 24px; padding: 2px 8px; }
#thg th.grp { text-align: center; padding-right: 8px; }
/* 分组带里的补充说明（如 月销量绿底含义）：小字胶囊，随表头可复制 */
#thg th .gnote {
  font-style: normal; font-weight: 400; font-size: 10.5px; color: #3f6b50;
  background: #e2f1e7; border-radius: 999px; padding: 1px 8px; margin-left: 7px;
  display: inline-block; vertical-align: 1px;
}
#thr th { top: var(--h1, 24px); box-shadow: inset 0 -2px 0 #d5dce7; }
/* 文字块右侧留出漏斗按钮区（26px＝按钮 23px + 3px 间隙）：第1行/第2行的表头
   文字都在按钮左侧换行。写在这里而不是 th 上——#thg th 的 padding 会覆盖 th 规则 */
thead th .th1 { display: block; white-space: normal; overflow-wrap: break-word; padding-right: 26px; }
thead th .th2 { display: block; font-size: 11px; color: #66707e; font-weight: 400; padding-right: 26px; }
thead th em { font-style: normal; color: var(--accent); font-size: 10px; }
thead th .arr { color: var(--accent); font-size: 10px; margin-left: 3px; }
thead th.sortable { cursor: pointer; }
thead th.sortable:hover { color: var(--accent); }

/* ---- 表头分区底色（叶子=浅色；分组带=同系深一档；先于十字高亮书写） ---- */
thead th.t-base { background: var(--b-base); }
thead th.t-yell { background: var(--b-yell); }
thead th.t-inv  { background: var(--b-inv); }
thead th.t-turn { background: var(--b-turn); }
thead th.t-cost { background: var(--b-cost); }
thead th.t-need { background: var(--b-need); }
thead th.t-sale { background: var(--b-sale); }
thead th.t-amt  { background: var(--b-amt); }
thead th.g-inv  { background: var(--g-inv); }
thead th.g-need { background: var(--g-need); }
thead th.g-sale { background: var(--g-sale); }
thead th.g-amt  { background: var(--g-amt); }

/* ---- 数据区不上底色（第四批按反馈去掉竖向色带）：整片白，只留区块边界线 ---- */
tbody td { background-color: #fff; }

/* 区块起止加深左边界（表头/数据/分组带通用；组内不加） */
th.blk, td.blk { border-left: 1px solid #cfd7e4; }

/* 隐藏列：col 宽 0 + th/td 挂 .hid——内容不显示（否则零宽格里文字会竖排撑高行） */
.hid, .hid > * { display: none !important; }

/* ---------- 悬停：用叠加层实现，不覆盖绿条/编辑底色 ---------- */
tbody tr:hover td { background-image: linear-gradient(rgba(47, 107, 240, .055), rgba(47, 107, 240, .055)); }
/* 虚拟滚动的上下垫高行：不可见、不响应悬停（高度由 app.js 写入） */
tbody tr.vpad td, tbody tr.vpad:hover td { background-color: transparent !important; background-image: none !important; }

.num { text-align: right; font-variant-numeric: tabular-nums; }
/* 月销量促销绿条：该月有促销活动（tbody 前缀压过其它底色规则） */
tbody td.tint { background-color: #e6f6ea; }

/* 长文本列（同行品牌箱价等整格换行；nowrap 列不折行）——第六批后
   库存库龄分布/销售额同比/同行品牌箱价/实际售价记录/电商需求数量
   改走 .rtg 结构化网格渲染，不再用这里的 .qw 包裹 */
td .qw { display: block; white-space: pre-wrap; overflow-wrap: break-word; text-overflow: clip; }
td .qw.nw { white-space: pre; }

/* ---- 多行文本结构化网格（第六批②③：对齐的列，数值右对齐） ----
   app.js richHTML 生成：每行一条记录、每字段一个 <span>；字段间空格与
   行间 \n 是纯空白文本节点——不参与 grid 布局（不会渲染成空列/空行），
   但 textContent 保留（悬停 #ftip 全文照旧）。q 3 列[段名|数量右|百分比右]；
   ao 3 列[日期|价格右|变化率右，变化值已按反馈删掉]；an/am/bf 2 列[标签|值右] */
td .rtg { display: grid; justify-content: start; }
td .rt2 { grid-template-columns: auto auto; column-gap: 8px; }
td .rt3 { grid-template-columns: auto auto auto; column-gap: 10px; }
td .rtg > span { white-space: nowrap; }
/* 数值子列右对齐（.rtg 网格内与分城市行共用；等宽数字保证上下对齐） */
.rn { text-align: right; font-variant-numeric: tabular-nums; }
/* 跨单元格统一子列宽（第七批②）：网格列宽取自 --gc-<列k>（app.js calcGcWidths
   按全量数据实测每子列最大宽后写入）——同列所有格子共用同一套列宽，
   段名/数字/百分比上下左右严格对齐；特异度 (0,2,1) 压过 .rt3/.rt2 的 auto 版 */
td[data-k="q"]  .rtg { grid-template-columns: var(--gc-q,  auto auto auto); }
td[data-k="ao"] .rtg { grid-template-columns: var(--gc-ao, auto auto auto); }
td[data-k="an"] .rtg { grid-template-columns: var(--gc-an, auto auto); }
td[data-k="am"] .rtg { grid-template-columns: var(--gc-am, auto auto); }
td[data-k="bf"] .rtg { grid-template-columns: var(--gc-bf, auto auto); }

/* 分城市数据：总计下方堆叠 墨/瓜/蒙 小字（只显示非零城市）
   第六批④按反馈"尽可能一个城市一行"：每城市独立块级行（.cty）两列网格，
   整体右对齐与上方总计右边界齐平 */
td .cities {
  display: grid; grid-template-columns: auto auto; justify-content: end;
  column-gap: 6px; font-style: normal; font-size: 11px; line-height: 1.4;
  color: #98a2b3; font-weight: 400;
}
td .cities .cty { white-space: nowrap; }

/* ---------- 十字高亮（WPS 式：点击格子 → 整行+整列淡蓝底，表头同列点亮） ----------
   行/列/交点三层底色；编辑中/绿条格保留自己的底色；后于分区色书写 */
tbody td.crossCol:not(.edited):not(.unsaved):not(.tint) { background-color: #f3f7ff; background-image: none; }
tbody td.crossRowCell:not(.edited):not(.unsaved):not(.tint) { background-color: #e8effd; background-image: none; }
tbody td.crossCell:not(.edited):not(.unsaved):not(.tint) { background-color: #d7e4fa; }
thead th.crossCol { background: #dbe6fb; color: var(--accent); }

/* sticky 最左产品信息列（宽 300，与 app.js PROD_W 对应） */
.sticky { position: sticky; z-index: 5; }
thead .sticky { z-index: 8; }
.c-prod { left: 0; padding: 2px 8px; box-shadow: 2px 0 6px -3px rgba(16, 24, 40, .14); }

/* 产品信息列表头：搜索框 + 全字段筛选 ▾（常驻控件，行内一行） */
#thg th.c-prod { cursor: pointer; padding: 4px 8px; }
.pihead { display: flex; align-items: center; gap: 7px; }
.pihead .pit { flex: 0 0 auto; font-weight: 600; font-size: 12.5px; }
#q {                              /* 搜索框（位于产品信息列表头内） */
  flex: 1 1 auto; min-width: 0; padding: 3px 8px; height: 24px;
  border: 1px solid #cfd7e4; border-radius: 6px;
  font-size: 12px; outline: none; background: #fff;
  transition: border-color .12s, box-shadow .12s;
}
#q:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(47, 107, 240, .13); }
select {
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 12.5px; background: #fff; max-width: 200px;
}

/* ---- 表头内嵌筛选角标（Excel 式漏斗，21px 常驻可见） ----
   第五批按反馈移到表头右下角；点开勾选清单；有生效筛选时按钮点亮；
   文字避让由上方 .th1/.th2 的 padding-right 负责（th 的 padding 会被 #thg th 覆盖） */
.fbtn {
  position: absolute; right: 2px; bottom: 2px; z-index: 3;   /* 压过 .colrz 拖宽条：重叠区点漏斗仍可点 */
  width: 21px; height: 21px; line-height: 1;
  border: 1px solid #cfd7e4; border-radius: 4px; background: #fff; color: #5d6675;
  cursor: pointer; padding: 0; user-select: none;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 1px rgba(16, 24, 40, .06);
  transition: border-color .1s, color .1s, background .1s;
}
.fbtn svg { display: block; }
.fbtn:hover { border-color: var(--accent); color: var(--accent); }
.fbtn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pihead .fbtn { position: static; transform: none; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 5px; }

/* 表头右缘的列宽拖拽条（拖动改该列宽=Excel 同款"拖列右边界"；双击按内容
   自适应宽度；产品列同款）。9px 好抓，漏斗按钮在重叠区优先（z-index 更高） */
.colrz {
  position: absolute; right: 0; top: 0; width: 9px; height: 100%;
  cursor: col-resize; z-index: 2;
}
.colrz::after {
  content: ''; position: absolute; right: 2px; top: 20%; width: 1px; height: 60%;
  background: transparent;
}
.colrz:hover::after, body.colresize .colrz::after { background: var(--accent); }

/* 勾选清单弹层（fixed 定位，避开 sticky 表头/滚动容器裁剪）
   #fdd=列值筛选、#colPanel=「列显示」面板（同款骨架，内容各自填充） */
#fdd, #colPanel {
  position: fixed; z-index: 80; background: #fff; border: 1px solid #d5dbe6;
  border-radius: 10px; box-shadow: 0 12px 34px rgba(16, 24, 40, .2);
  display: flex; flex-direction: column; max-height: 62vh; min-width: 236px;
}
#colPanel { width: 312px; }
.fdd-field { display: flex; align-items: center; gap: 8px; padding: 8px 9px 0; }
.fdd-flabel { color: var(--muted); font-size: 11.5px; flex: 0 0 auto; }
.fdd-field select { flex: 1; min-width: 0; max-width: none; padding: 3px 6px; font-size: 12px; border-radius: 6px; }
.fdd-head { display: flex; gap: 6px; padding: 8px 8px 6px; border-bottom: 1px solid #eef1f6; }
.fdd-head input {
  flex: 1; min-width: 0; padding: 4px 8px; border: 1px solid var(--line);
  border-radius: 6px; font-size: 12px; outline: none;
}
.fdd-head input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(47, 107, 240, .12); }
.fdd-hbtn {
  border: 1px solid var(--line); background: #fff; border-radius: 6px;
  font-size: 11px; padding: 3px 7px; cursor: pointer; color: #4a5568; white-space: nowrap;
}
.fdd-hbtn:hover { border-color: var(--accent); color: var(--accent); }
.fdd-list { overflow: auto; padding: 4px 2px; flex: 1; }
.fdd-i { display: flex; align-items: center; gap: 7px; padding: 3px 9px; font-size: 12px; cursor: pointer; border-radius: 5px; }
.fdd-i:hover { background: #f2f6ff; }
.fdd-i input { margin: 0; accent-color: var(--accent); flex: 0 0 auto; }
.fdd-i span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fdd-i i { color: #9aa4b2; font-style: normal; font-size: 11px; }
.fdd-none { padding: 8px 10px; color: #9aa4b2; font-size: 12px; }
.fdd-foot { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-top: 1px solid #eef1f6; }
.fdd-n { color: var(--muted); font-size: 11px; flex: 1; }
.linkbtn { border: 0; background: transparent; color: var(--accent); font-size: 12px; cursor: pointer; padding: 2px 4px; white-space: nowrap; }
.linkbtn:hover { text-decoration: underline; }

/* ---------- 单元格选区 + 填充柄（Excel 式；第四批新增） ----------
   数据格 td 加 position:relative 作 #fh 的定位锚（产品列无 data-k，不受影响）；
   #tb 前缀=ID 选择器，压过上面的十字高亮规则 */
#tb td[data-k] { position: relative; }
#tb td.sel { background-color: #e6eefe; }
#tb td.sel-t { border-top: 2px solid var(--accent); }
#tb td.sel-b { border-bottom: 2px solid var(--accent); }
#tb td.sel-l { border-left: 2px solid var(--accent); }
#tb td.sel-r { border-right: 2px solid var(--accent); }
#fh {           /* 选区右下角小方块：拖动=平铺填充 */
  position: absolute; right: 0; bottom: 0; width: 7px; height: 7px;
  background: var(--accent); border: 1px solid #fff; border-radius: 1px;
  cursor: crosshair; z-index: 7;
}

/* 底部选区统计条（求和/平均/数字格；与 Excel 状态栏同位：右下角） */
#selstat {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  background: #232c3d; color: #eef2f8; border-radius: 999px; padding: 7px 18px;
  font-size: 12.5px; box-shadow: 0 8px 24px rgba(10, 20, 40, .35);
  pointer-events: none; white-space: nowrap;
}
#selstat b { color: #ffd97a; font-weight: 600; }

/* 轻提示浮条（自动保存/网络不稳等非阻塞通知；中间偏下淡入淡出） */
#toast {
  position: fixed; left: 50%; bottom: 52px; transform: translateX(-50%); z-index: 98;
  background: #28303f; color: #fff; border-radius: 10px; padding: 10px 18px;
  font-size: 13px; box-shadow: 0 10px 30px rgba(10, 20, 40, .32); max-width: 76vw;
}
#toast.err { background: #b3261e; }

/* 表头右键菜单（隐藏该列/只显示该列/显示全部列） */
#hmenu {
  position: fixed; z-index: 90; background: #fff; border: 1px solid #d5dbe6;
  border-radius: 8px; box-shadow: 0 10px 28px rgba(16, 24, 40, .18);
  padding: 4px; min-width: 176px;
}
#hmenu button {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  font: inherit; font-size: 12.5px; color: #37404d; padding: 7px 10px;
  border-radius: 6px; cursor: pointer; white-space: nowrap;
}
#hmenu button:hover { background: #f2f6ff; color: var(--accent); }

/* 拖动调宽中：全页统一光标，防掠过文字时闪回默认箭头 */
body.colresize, body.colresize * { cursor: col-resize !important; }
body.rowresize, body.rowresize * { cursor: row-resize !important; }
body.colresize, body.rowresize { user-select: none; }

/* ---------- 悬停提示（内容被统一行高裁切的格子：鼠标悬停显示全文） ---------- */
#ftip {
  position: fixed; z-index: 95; max-width: 560px; max-height: 72vh; overflow: hidden;
  background: #222b3a; color: #eef2f8; border-radius: 9px; padding: 8px 12px;
  font: 12px/1.65 "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
  white-space: pre-wrap; overflow-wrap: break-word;
  box-shadow: 0 12px 32px rgba(10, 20, 40, .35);
  pointer-events: none;
}

/* 拖动列宽/行高的尺寸气泡（Excel 同款黄底小方框，跟随鼠标；见 app.js showDwtip） */
#dwtip {
  position: fixed; z-index: 96; pointer-events: none; white-space: nowrap;
  background: #fffcdf; color: #3d3525; border: 1px solid #b9ab6a; border-radius: 3px;
  padding: 3px 9px; font: 12px/1.4 "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
  box-shadow: 0 3px 10px rgba(10, 20, 40, .22);
}

/* ---------- 就地编辑（第四批起免开关：双击/选中后回车/直接打字进入；
   改动自动上传，状态见顶栏「已自动保存/待上传」） ---------- */
#tb td[data-col]:hover { outline: 1.5px dashed rgba(47, 107, 240, .55); outline-offset: -2px; cursor: cell; }
tbody td.edited { background-color: #fff3dd; }            /* 有暂存改动的格：暖底 */
tbody td.edited.unsaved { background-color: #ffe4e0; }    /* 本机还没传到服务器的：偏红 */
.cellin {
  width: 100%; height: 24px; border: 1px solid var(--accent); border-radius: 4px;
  font: inherit; text-align: right; padding: 1px 4px; outline: none; background: #fff;
}
.cellin.txt { text-align: left; }   /* 文本列（返单意见）左对齐 */
.cellin.ta {                        /* 文本列多行框：自动换行、随内容长高（至 110px 后内部滚动） */
  height: auto; min-height: 24px; max-height: 110px;
  resize: none; overflow-y: auto; line-height: 1.5; padding: 3px 6px;
  white-space: pre-wrap; overflow-wrap: break-word;
}

/* ---------- 产品信息块（大图 + 右侧多行）
   第1行=编码+型号；第2行=一级分类；第3行=三级分类；第4行=品牌·定位·标签；第5行=供应商 */
.prod { display: flex; align-items: center; gap: 9px; min-height: 64px; }
.pimg {
  flex: 0 0 64px; width: 64px; height: 64px; border: 1px solid #e6e9ef; border-radius: 8px;
  background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.pimg img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; }
.pimg.noimg { color: #c3cad6; font-size: 11px; border-style: dashed; }
.pinfo { display: flex; flex-direction: column; min-width: 0; }
.pinfo > span, .pinfo b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l1 { font-size: 12.5px; color: var(--txt); line-height: 1.4; }
.l1code { font-weight: 700; font-variant-numeric: tabular-nums; }
.l1model { margin-left: 7px; font-weight: 400; }
.l2 { font-size: 11.5px; color: #5d6675; line-height: 1.34; }
.l25 { font-size: 11.5px; color: #7c8698; line-height: 1.34; }
.l3, .l4 { font-size: 11.5px; color: var(--muted); line-height: 1.34; }

/* ---------- 表格滚动条 ---------- */
.tablewrap::-webkit-scrollbar { width: 10px; height: 10px; }
.tablewrap::-webkit-scrollbar-thumb { background: #ccd5e3; border-radius: 6px; border: 2px solid #f4f6fa; }
.tablewrap::-webkit-scrollbar-thumb:hover { background: #b1bfd6; }
.tablewrap::-webkit-scrollbar-corner { background: transparent; }

/* ---------- 未上线模板占位 ---------- */
.placeholder { flex: 1; display: flex; align-items: center; justify-content: center; }
.ph-card { text-align: center; color: var(--muted); }
.ph-ico {
  width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 14px;
  background: #e8eefb; color: var(--accent); font-size: 24px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.ph-card h2 { margin: 0 0 6px; font-size: 17px; color: var(--txt); }
.ph-card p { margin: 0; font-size: 13px; }

/* ---------- 图片预览 ---------- */
.modal {
  position: fixed; inset: 0; background: rgba(10, 20, 40, .55); z-index: 99;
  display: flex; align-items: center; justify-content: center; cursor: zoom-out;
}
.modal img { max-width: 82vw; max-height: 82vh; background: #fff; border-radius: 10px; padding: 8px; }

/* ---------- 公网加密锁屏（内网明文版不显示；app.js boot/showLock 控制显隐） ---------- */
.lock-mask {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: rgba(28, 35, 48, .55); backdrop-filter: blur(3px);
}
.lock-card {
  width: 360px; max-width: calc(100vw - 44px); background: #fff; border-radius: 14px;
  padding: 30px 28px 22px; text-align: center; box-shadow: 0 18px 50px rgba(16, 24, 40, .35);
}
.lock-logo { font-size: 38px; line-height: 1; }
.lock-card h2 { margin: 12px 0 6px; font-size: 19px; color: var(--txt); }
.lock-card p { color: var(--muted); font-size: 13px; margin: 0 0 16px; }
.lock-card input {
  width: 100%; padding: 10px 12px; font-size: 14px; border: 1px solid var(--line);
  border-radius: 9px; outline: none; margin-bottom: 12px;
}
.lock-card input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47, 107, 240, .15); }
.lock-card .btn-primary {
  width: 100%; padding: 10px; font-size: 14px; border: 0; border-radius: 9px;
  background: var(--accent); color: #fff; cursor: pointer; font-weight: 600;
}
.lock-card .btn-primary:hover { background: var(--accent-d); }
.lock-card .btn-primary:disabled { opacity: .55; cursor: default; }
.lock-err { color: #d33; font-size: 12.5px; margin-top: 10px; min-height: 18px; }