/* 工厂人事端 · 后台样式（电脑 Web + 手机 H5 共用骨架） */
:root {
  --side: #1F2A3A;
  --side-hover: #2B3849;
  --accent: #F97316;
  --ink: #1F2937;
  --ink-2: #4B5563;
  --ink-3: #9CA3AF;
  --line: #E5E7EB;
  --bg: #F5F6F8;
  --card: #FFFFFF;
  --radius: 10px;
  --radius-lg: 14px;
  --green: #0F6E56;
  --green-bg: #E1F5EE;
  --red: #A32D2D;
  --red-bg: #FCEBEB;
  --blue: #185FA5;
  --blue-bg: #E6F1FB;
  --amber: #854F0B;
  --amber-bg: #FAEEDA;
  --orange: #B4520E;
  --orange-bg: #FEF0E6;
  /* 内容区最大宽度：宽屏下内容在此宽度内水平居中，窄屏自动占满 */
  --page-max: 1080px;
  /* 页面左右留白（窄屏 / 宽屏都用它算，见 .topbar / .content） */
  --page-pad: max(18px, calc((100% - var(--page-max)) / 2));
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0; padding: 0;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
}

/* ==================== 电脑 Web 布局 ==================== */
.layout { display: flex; min-height: 100vh; }

/* 侧栏宽度不再是死的 172px：左上角要显示**完整**企业名、而且必须一行
 *（老板 2026-09-22 要求），所以让它按内容自己撑开。
 * 下限仍是原来的 172px（名字短就跟以前一模一样）；上限 300px 是为了不把
 * 右侧内容区挤没；万一还有更长的名字，交给 brand-fit 脚本在 13 → 10.5px
 * 之间缩字号兜底。三条路都保持单行，绝不出现省略号。 */
.side {
  min-width: 172px; max-width: 300px;
  background: var(--side); flex-shrink: 0;
  display: flex; flex-direction: column;
}
.side .brand {
  padding: 16px 16px 14px; border-bottom: 1px solid var(--side-hover);
}
/* 企业名称：强制**一行**显示完整全称（2026-09-22 老板要求：不许换行、不许截断）。
 * 名字长了按 ① 侧栏撑宽 → ② brand-fit 缩字号 → ③ 向右溢出 的次序适配，
 * 任何一条都还是单行，任何情况下都不加省略号。 */
.side .brand .n {
  color: #fff; font-size: 13px; font-weight: 600; line-height: 1.45;
  white-space: nowrap;         /* 一行到底 */
  overflow: visible;           /* 不裁切、不出省略号 */
  overflow-wrap: normal;
  word-break: keep-all;        /* 中文也不许在字与字之间断行 */
}
.side .brand .c { color: #7E8899; font-size: 11.5px; margin-top: 3px; }
.side nav { padding: 10px 0; flex: 1; }
.side nav a, .side nav button {
  display: block; width: 100%; text-align: left;
  padding: 9px 16px; font-size: 13.5px; color: #B8C0CE;
  background: none; border: none; border-left: 3px solid transparent;
  font-family: inherit; text-decoration: none;
}
.side nav a.on {
  color: var(--accent); background: var(--side-hover); border-left-color: var(--accent);
}
.side .foot { padding: 12px 16px; border-top: 1px solid var(--side-hover); }
.side .foot button {
  width: 100%; padding: 8px; font-size: 12.5px; font-family: inherit;
  background: none; border: 1px solid #3A4759; border-radius: 6px; color: #B8C0CE;
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  background: var(--side); padding: 10px 18px;
  /* 顶栏背景通栏，但内部内容跟正文同宽居中，视觉上整页对齐 */
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
  display: flex; align-items: center; justify-content: space-between;
}
.topbar .t { color: #fff; font-size: 13.5px; font-weight: 500; }
.topbar .r { color: #8A94A6; font-size: 12px; display: flex; align-items: center; gap: 12px; }
.bell { position: relative; }
.bell .dot {
  position: absolute; top: -4px; right: -6px; background: var(--accent); color: #fff;
  font-size: 10px; padding: 1px 5px; border-radius: 8px; line-height: 1.4;
}

/* 正文：宽屏下内容限宽水平居中，窄屏自动占满（不留白） */
.content {
  padding: 18px; flex: 1;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}

/* ==================== 通用组件 ==================== */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat {
  background: var(--card); border-radius: var(--radius); padding: 14px 16px;
}
.stat .l { font-size: 12.5px; color: var(--ink-2); }
.stat .v { font-size: 24px; font-weight: 600; line-height: 1.35; }
/* 可点击的统计卡片（工作台顶部六张）：悬停轻微阴影，提示"能点进去"。
   只加阴影与指针，padding / 圆角 / 底色一律不动 —— 布局保持原样。 */
.stat.clickable { cursor: pointer; transition: box-shadow .18s ease, transform .18s ease; }
.stat.clickable:hover { box-shadow: 0 4px 14px rgba(17, 24, 39, .13); }
.stat.clickable:active { transform: translateY(1px); }
.stat.clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stat.hot { background: var(--orange-bg); }
.stat.hot .l { color: var(--orange); }
.stat.hot .v { color: var(--orange); }

.panel { background: var(--card); border-radius: var(--radius); overflow: hidden; }
.panel-head {
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.panel-head h2 { margin: 0; font-size: 14px; font-weight: 600; }
.panel-body { padding: 14px 16px; }

.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* 工具条里搜索框的高度 / 边距 / 圆角 / 边框统一由 assets/form.css 出，
   这里只保留「它是个 190px 宽的窄输入框」这一条布局信息。 */

.btn {
  padding: 7px 14px; font-size: 13px; font-family: inherit;
  border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink-2);
  /* ★ 按钮必须自带 cursor:pointer —— 原生 <button> 在浏览器里默认是**箭头**不是手型，
   *   不写它，界面上所有 .btn 看上去都像一段不可点的灰文字。
   *   （老板 2026-09-29 报的「不知道哪些能点」不只是操作列的 .act，这一类同样中招。）
   *   悬停给"描边变深 + 文字变深"，比整体变色克制，不会让工具条花掉。 */
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease, background-color .12s ease;
}
.btn:hover { border-color: var(--ink-3); color: var(--ink); background: #FAFBFC; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn.primary:hover { background: #E0651A; border-color: #E0651A; color: #fff; }
.btn.ghost { background: none; border-color: transparent; color: var(--accent); font-weight: 600; }
.btn.ghost:hover { background: var(--orange-bg); border-color: transparent; color: var(--accent); }
.btn:disabled { opacity: .5; }
.btn:disabled:hover { border-color: var(--line); color: var(--ink-2); background: #fff; cursor: not-allowed; }
/* 明确是"删除"的红字按钮（删除选中 / 删除工厂）：悬停给红底，误点前有明确警告感 */
.btn.del { color: var(--red); }
.btn.del:hover { border-color: var(--red); color: var(--red); background: var(--red-bg); }

.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs button {
  padding: 10px 15px; font-size: 13.5px; font-family: inherit; white-space: nowrap;
  background: none; border: none; border-bottom: 2px solid transparent; color: var(--ink-2);
  cursor: pointer; transition: color .12s ease;
}
.tabs button:hover { color: var(--ink); }
.tabs button.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

/* 表格 */
table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid th {
  background: #F9FAFB; color: var(--ink-2); font-weight: 500;
  text-align: left; padding: 9px 12px; white-space: nowrap;
}
table.grid td { padding: 10px 12px; border-top: 1px solid var(--line); }
table.grid tr:hover td { background: #FCFDFE; }
table.grid td.name { font-weight: 500; }
table.grid td.act { white-space: nowrap; }

/* ---------- 简历行内操作（工作台 / 简历管理 / 面试安排 / 手机端共用） ----------
 * 状态动作现在是"点一下就地更新"，所以做成一排轻量文字操作：
 * 不跳页、不重建列表，点完只有那一行的标签和数字在动。 */
.ops { display: flex; flex-wrap: wrap; gap: 3px 12px; align-items: center; }
.ops .act { font-size: 12.5px; line-height: 1.7; }
.ops .act.pri { font-weight: 600; }
table.grid td.ops { white-space: normal; }

/* ── 列表「操作」列的文字按钮 —— 全站统一（老板 2026-09-29 报障）─────
 * 现象：「进入 / 重置密码 / 看项目 / 删除」这些文字按钮鼠标指上去**没有任何变化** ——
 *   不变手型、不变色、没有下划线，用户根本不知道这些能点。
 *
 * 根因两条，都是"样式挂错了位置"这种**不报错的静默失效**：
 *   ① 原来只有 `.ops .act` 有 :hover 与 cursor，而页面上真正用到 .act 的地方
 *      有一半**不在 .ops 里面** —— 简历管理、服务商管理都是 `<td><span class="act">`，
 *      于是那批按钮连 cursor:pointer 都没有（`table.grid td.act` 只管 `<td class="act">`
 *      这一种写法，管不到它里面的 span）；
 *   ② `.act.del` 从来没有过任何样式 —— 工厂端「企业文化 → 删除」用的是 class，
 *      而两个管理端用的是 inline `style="color:var(--red)"`，同一件事三种写法。
 *
 * ★ 所以这里把规则**改成不依赖外层容器**：`.act` 自己就带手型、颜色、悬停态，
 *   放在 td 里、div 里、ops 里都一样生效。新加列表页时不用再记"要记得套 .ops"。
 *   inline 的那两处已改成 `class="act del"`（inline style 优先级压过 :hover，
 *   留着它悬停就永远不变色）。
 *
 * 配色按老板给的口径：常态就是"能点的蓝"，删除是红；悬停再深一档 + 淡底色 + 下划线，
 * 这样"指到哪一项了"在长列表里也一眼看得出。
 * 守门：qa/test-action-hover.js —— 真浏览器里逐个操作按钮量 cursor 与悬停前后的颜色差。 */
.act {
  color: var(--blue);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  border-radius: 4px;
  padding: 1px 4px;
  margin: 0 -4px;              /* 负外边距抵掉 padding：加了底色也不会把表格挤错行 */
  transition: color .12s ease, background-color .12s ease;
}
.act:hover { color: #0E4478; background: var(--blue-bg); text-decoration: underline; text-underline-offset: 2px; }
.act.del, .act.danger { color: var(--red); }
.act.del:hover, .act.danger:hover { color: #7A1F1F; background: var(--red-bg); }
/* 整格当按钮用的写法（`<td class="act">查看</td>`）：悬停整格给反馈 */
table.grid td.act:hover { background: var(--blue-bg); text-decoration: underline; text-underline-offset: 2px; }
/* 手机端行内操作在隐藏列里也可能是 .act，给触摸设备留一点手指余量 */
@media (hover: none) {
  .act { padding: 3px 6px; margin: 0 -6px; }
}
.m-item .ops { padding-top: 3px; }

/* 统计数字变化时轻轻跳一下，让"这里刚更新过"看得见 */
@keyframes gczp-bump { 0% { transform: translateY(0); } 35% { transform: translateY(-3px); } 100% { transform: translateY(0); } }
.bump { display: inline-block; animation: gczp-bump 420ms ease-out; color: var(--accent); }

.pill { font-size: 11.5px; padding: 3px 9px; border-radius: 11px; font-weight: 600; white-space: nowrap; }
.p-new { background: var(--orange-bg); color: var(--orange); }
.p-view { background: var(--blue-bg); color: var(--blue); }
.p-int { background: var(--amber-bg); color: var(--amber); }
.p-hire { background: var(--green-bg); color: var(--green); }
.p-rej { background: #F1EFE8; color: #5F5E5A; }
.p-dup { background: var(--red-bg); color: var(--red); }

.empty { text-align: center; padding: 46px 20px; color: var(--ink-3); font-size: 13.5px; }

/* 抽屉 */
.drawer-mask {
  position: fixed; left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(17,24,39,.4); z-index: 100; display: none;
}
.drawer-mask.show { display: block; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 92vw;
  background: #fff; z-index: 101; overflow-y: auto;
  transform: translateX(100%); transition: transform .22s;
}
.drawer.show { transform: translateX(0); }
.drawer .dh {
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  position: sticky; top: 0; background: #fff; z-index: 2;
}
.drawer .dh h2 { margin: 0; font-size: 15px; font-weight: 600; }
.drawer .dh .x { background: none; border: none; font-size: 20px; color: var(--ink-3); line-height: 1; }
.drawer .db { padding: 18px; }

.avatar {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: var(--blue-bg); color: var(--blue);
  display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600;
}
.row { display: flex; align-items: center; gap: 12px; }

.kv { font-size: 13px; color: var(--ink-2); line-height: 2; }
.kv b { color: var(--ink); font-weight: 500; display: inline-block; min-width: 74px; }

.box { background: var(--bg); border-radius: var(--radius); padding: 12px 14px; margin: 12px 0; }
.box .lb { font-size: 12.5px; color: var(--ink-2); margin-bottom: 3px; }
.box .vl { font-size: 17px; font-weight: 600; color: var(--blue); }

.thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.thumb {
  width: 68px; height: 68px; border-radius: 8px; background: var(--bg);
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--ink-3); text-align: center; padding: 4px;
}

.drawer .acts { display: flex; gap: 8px; padding: 14px 18px 24px; }
.drawer .acts button {
  flex: 1; padding: 11px; font-size: 13.5px; font-family: inherit; border-radius: 8px;
  border: 1px solid var(--line); background: #fff; color: var(--ink-2);
  cursor: pointer; transition: border-color .12s ease, color .12s ease, background-color .12s ease;
}
.drawer .acts button:hover { border-color: var(--ink-3); color: var(--ink); background: #FAFBFC; }
.drawer .acts button.pri { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.drawer .acts button.pri:hover { background: #E0651A; border-color: #E0651A; color: #fff; }
/* 抽屉里的破坏性动作（删除工厂等）：红字 + 悬停红底，误点前有明确警告感 */
.drawer .acts button.del { color: var(--red); }
.drawer .acts button.del:hover { border-color: var(--red); color: var(--red); background: var(--red-bg); }

/* 弹层 */
.modal-mask {
  position: fixed; left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(17,24,39,.45); z-index: 150;
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.modal {
  background: #fff; border-radius: var(--radius-lg); width: 100%; max-width: 430px;
  max-height: 88vh; overflow-y: auto;
}
.modal .mh {
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
}
.modal .mh h3 { margin: 0; font-size: 15px; font-weight: 600; }
.modal .mh .x { background: none; border: none; font-size: 20px; color: var(--ink-3); line-height: 1; }
.modal .mb { padding: 16px 18px; }
.modal .mf {
  padding: 12px 18px 18px; display: flex; gap: 8px;
}
.modal .mf button {
  flex: 1; padding: 11px; font-size: 13.5px; font-family: inherit; border-radius: 8px;
  border: 1px solid var(--line); background: #fff; color: var(--ink-2);
}
.modal .mf button.pri { flex: 2; background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

/* ---------- 到期续费弹窗（收款二维码方案，老板 2026-09-23）
 * 两个套餐并排、各自挂自己的收款码 —— 默认 430px 放两列太挤，单独放宽。
 * 手机上 max-width 起不了作用，自然占满视口宽度。 */
.modal.modal-renew { max-width: 540px; }
.rn-note {
  font-size: 13px; color: var(--ink-2); line-height: 1.9;
  white-space: pre-wrap; margin-bottom: 12px;
}
.rn-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rn-card {
  border: 1px solid var(--line); border-radius: 10px; padding: 10px;
  background: #fff; cursor: pointer;
}
.rn-card.on { border-color: var(--accent); }
.rn-card.on .rn-hd b { color: var(--accent); }
.rn-hd {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 6px; margin-bottom: 8px;
}
.rn-hd b { font-size: 13px; }
.rn-price { color: var(--accent); font-weight: 700; font-size: 16px; white-space: nowrap; }
.rn-price i { font-style: normal; font-size: 11px; font-weight: 400; color: var(--ink-3); }
/* 二维码框：正方形、等比缩放，图片长宽比不对时不会把卡片撑变形 */
.rn-qr {
  width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden;
  background: #F6F7F9; display: flex; align-items: center; justify-content: center;
}
.rn-qr img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rn-qr-empty {
  border: 1px dashed var(--line); color: var(--ink-3);
  font-size: 11.5px; text-align: center; line-height: 1.7;
}
.rn-sub { font-size: 11.5px; color: var(--ink-3); text-align: center; margin-top: 6px; line-height: 1.6; }
.rn-wait, .rn-done {
  background: #FFF7EF; border: 1px solid #F6D9BE; border-radius: 10px;
  padding: 12px 14px; font-size: 13px; color: var(--ink-2);
  line-height: 1.9; margin-bottom: 12px;
}
.rn-done { background: #F1F8F2; border-color: #CBE3CE; }
.rn-done b { color: #1E7A34; }

/* ---------- 续费：上传付款凭证 + 已上传凭证的展示（老板 2026-09-23 要求 1~12）
 * 样式全部沿用上面这套令牌（--line / --accent / --ink-3 / 10px 圆角），
 * 老板要求 12「整体样式和到期弹窗统一」指的就是这个 —— 别另起一套观感。 */
.rn-brief {
  font-size: 12.5px; color: var(--ink-2); line-height: 1.9;
  background: #F6F7F9; border-radius: 8px; padding: 8px 11px; margin-bottom: 12px;
}
.rn-brief b { color: var(--accent); }

/* 上传框：虚线方框，整块可点 */
.rn-up {
  border: 1px dashed var(--line); border-radius: 10px; background: #F6F7F9;
  padding: 14px; cursor: pointer;
}
.rn-up-tip { text-align: center; line-height: 1.9; }
.rn-up-tip b { display: block; font-size: 13.5px; color: var(--accent); }
.rn-up-tip span { font-size: 11.5px; color: var(--ink-3); }

/* 凭证缩略图：等比缩放并限高，长截图也不会把弹窗顶成瀑布 */
.rn-shot { text-align: center; }
.rn-shot img {
  max-width: 100%; max-height: 260px; border-radius: 8px;
  border: 1px solid var(--line); background: #fff; cursor: zoom-in; display: inline-block;
}
.rn-shot-wrap { margin-bottom: 12px; }
.rn-lab { font-size: 12px; color: var(--ink-3); margin-bottom: 6px; }

/* 驳回提示：回到"待付款"时挂在最上面 */
.rn-rej {
  background: #FDF1F1; border: 1px solid #F0C9C9; border-radius: 10px;
  padding: 12px 14px; font-size: 13px; color: var(--ink-2);
  line-height: 1.9; margin-bottom: 12px;
}
.rn-rej b { color: #B23B3B; }

/* 点图放大。base.css 里那个 .zoom-mask 是给 H5 扫码页用的，
 * factory.html / admin.html 都不引 base.css，所以这里单独一份。
 * 类名不同是故意的：同名两份规则将来只改一处就会出现"这个页面能放大、那个不能"。 */
.rn-zoom {
  position: fixed; left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, .92); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.rn-zoom img { max-width: 100%; max-height: 100%; border-radius: 8px; }

/* ---------- 续费设置：收款二维码上传件 ---------- */
.qr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.qr-pick .qr-box {
  width: 100%; max-width: 200px; aspect-ratio: 1 / 1;
  border: 1px dashed var(--line); border-radius: 10px; background: #F6F7F9;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; margin-bottom: 8px;
}
.qr-pick .qr-box img { width: 100%; height: 100%; object-fit: contain; display: block; }
.qr-pick .qr-box span { font-size: 12px; color: var(--ink-3); }

/* ---------- 续费订单列表 ---------- */
.ro-list { display: flex; flex-direction: column; }
.ro-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 2px; border-bottom: 1px solid var(--line);
}
.ro-row:last-child { border-bottom: 0; }
.ro-main { flex: 1; min-width: 0; }
.ro-t { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.ro-t b { font-size: 13.5px; }
.ro-main .mini { margin-top: 2px; }
.ro-op { display: flex; gap: 8px; flex: 0 0 auto; }
.ro-op .btn { padding: 7px 12px; font-size: 12.5px; }
/* 服务商核款要看的付款凭证（要求 7）：小图先摆出来，点一下看大图。
 *   · max-height 卡住，手机长截图不会把整个列表撑开；
 *   · 没传图的订单显示占位文案，服务商一眼就知道"这单没凭证"。 */
.ro-proof { margin-top: 6px; }
.ro-proof img {
  max-width: 132px; max-height: 96px; border-radius: 6px;
  border: 1px solid var(--line); background: #fff; cursor: zoom-in; display: block;
}
.ro-proof .none { font-size: 11.5px; color: var(--ink-3); }

/* 窄屏：二维码与订单操作都改成竖排，免得挤成一团 */
@media (max-width: 640px) {
  .qr-grid { grid-template-columns: 1fr; }
  .ro-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .ro-op { justify-content: flex-end; }
}

/* ---------- 表单 ----------
 * 表单控件（输入框 / 下拉 / 文本域 / 标签 / 间距 / 栅格）的样式统一定义在
 * assets/form.css —— 那是全站唯一来源，本文件不再重复定义，
 * 免得两处打架、改一处漏一处。这里只留下「分段按钮」这个通用件。 */
.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg button {
  flex: 1 1 0; min-width: 66px; padding: 9px 6px; font-size: 13px; font-family: inherit;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink-2);
}
.seg button.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

.toast {
  position: fixed; left: 50%; bottom: 56px; transform: translateX(-50%);
  background: rgba(31,41,55,.93); color: #fff; font-size: 13.5px;
  padding: 11px 20px; border-radius: 20px; z-index: 300; max-width: 84%;
  text-align: center; line-height: 1.6;
}

/* 登录页 */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #1F2A3A 0%, #2B3849 100%); padding: 20px;
}
.login-card {
  background: #fff; border-radius: 16px; padding: 30px 26px; width: 100%; max-width: 360px;
}
.login-card h1 { margin: 0 0 6px; font-size: 20px; font-weight: 600; }
.login-card .sub { font-size: 13px; color: var(--ink-3); margin-bottom: 22px; }
.login-card .btn-main {
  width: 100%; padding: 13px; border: none; border-radius: 9px; margin-top: 6px;
  background: var(--accent); color: #fff; font-size: 15px; font-weight: 600; font-family: inherit;
}
.login-hint {
  margin-top: 16px; padding: 10px 12px; background: var(--amber-bg);
  color: var(--amber); border-radius: 8px; font-size: 12px; line-height: 1.8;
}

/* ==================== 手机端 ==================== */
.m-page { max-width: 480px; margin: 0 auto; background: var(--card); min-height: 100vh; padding-bottom: 58px; }
.m-top {
  background: var(--side); padding: 13px 16px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 20;
}
.m-top .t { color: #fff; font-size: 15.5px; font-weight: 600; flex-shrink: 0; }
/* 顶栏企业名：跟侧栏同一个要求 —— 一行显示完整全称，不换行、不截断。
 * 左边标题保持原样，名字占满剩余空间；真放不下时由 brand-fit 脚本缩字号。 */
.m-top .r {
  color: #8A94A6; font-size: 13px; text-align: right;
  flex: 1; min-width: 0; margin-left: 10px;
  line-height: 1.4; white-space: nowrap; overflow: visible;
  overflow-wrap: normal; word-break: keep-all;
}
.m-tabs {
  display: flex; border-bottom: 1px solid var(--line); background: #fff;
  position: sticky; top: 0; z-index: 15;
}
.m-tabs button {
  flex: 1; padding: 11px 0; font-size: 13.5px; font-family: inherit;
  background: none; border: none; border-bottom: 2px solid transparent; color: var(--ink-2);
}
.m-tabs button.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

.m-nav {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0;
  width: 100%; max-width: 480px; background: #fff; border-top: 1px solid var(--line);
  display: flex; z-index: 30;
}
.m-nav button {
  flex: 1; padding: 9px 0 11px; font-size: 11.5px; font-family: inherit;
  background: none; border: none; color: var(--ink-3);
}
.m-nav button.on { color: var(--accent); font-weight: 600; }

.m-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 16px; }
.m-stat { background: var(--bg); border-radius: var(--radius); padding: 12px 13px; }
.m-stat .l { font-size: 12px; color: var(--ink-2); }
.m-stat .v { font-size: 21px; font-weight: 600; }
.m-stat.hot { background: var(--orange-bg); }
.m-stat.hot .l, .m-stat.hot .v { color: var(--orange); }

.m-sec { padding: 14px 16px 6px; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.m-sec::before { content: ''; width: 3px; height: 13px; background: var(--accent); border-radius: 2px; }

.m-item {
  margin: 0 16px 9px; padding: 12px 13px;
  background: var(--bg); border-radius: var(--radius);
}
.m-item .r1 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.m-item .nm { font-size: 14.5px; font-weight: 600; }
.m-item .r2 { font-size: 12.5px; color: var(--ink-2); line-height: 1.8; }

/* 手机端「企业资料」：电脑端表单在窄屏下压成单列 */
.m-corp { padding: 0 16px 20px; }
.m-corp .corp-grid { grid-template-columns: 1fr !important; gap: 12px; }
.m-corp .panel { border-radius: var(--radius); }
.m-corp .thumbs { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 700px) {
  .layout { flex-direction: column; }
  .side { width: 100%; flex-direction: row; overflow-x: auto; align-items: center; }
  /* 手机端侧栏变成一排（brand | nav），整条横向滚动。
   * brand 按内容宽度固定，名字一行到底；nav 顺到它右边，滚动就能看到。
   *（以前这里给 .n 写了 white-space: normal，是老板这次要改掉的换行来源） */
  .side .brand { border-bottom: none; border-right: 1px solid var(--side-hover); flex: 0 0 auto; }
  .side nav { display: flex; padding: 0; }
  .side nav a, .side nav button { border-left: none; border-bottom: 3px solid transparent; padding: 12px 14px; white-space: nowrap; }
  .side nav a.on { border-left: none; border-bottom-color: var(--accent); }
  .side .foot { display: none; }
  .content { padding: 12px; }
  .drawer { width: 100%; max-width: 100%; }
}


/* ==========================================================================
   列表分页（pager.js 配套）—— 工厂后台 / 平台后台共用同一套
   配色与圆角跟 .btn / .tabs 保持一致，不引入任何新色值，避免看起来突兀。
   ========================================================================== */
.pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px 14px; flex-wrap: wrap;
  padding: 12px 16px; border-top: 1px solid var(--line);
  background: #fff; font-size: 13px; color: var(--ink-2);
}
.pager .pg-total { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
.pager .pg-total b { color: var(--ink); font-weight: 600; }
.pager .pg-range { margin-left: 2px; }
.pager .pg-ctrls { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.pager .pg-sizes { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }

.pager .pg-btn,
.pager .pg-num,
.pager .pg-sz {
  font-family: inherit; font-size: 12.5px; line-height: 1.5;
  color: var(--ink-2); background: #fff;
  border: 1px solid var(--line); border-radius: 7px; padding: 5px 10px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.pager .pg-num { min-width: 32px; padding: 5px 7px; text-align: center; }
.pager .pg-btn:hover, .pager .pg-num:hover, .pager .pg-sz:hover {
  border-color: var(--accent); color: var(--accent);
}
/* 选中态统一用强调色实心（和 .btn.primary 一样），两个后台表现一致 */
.pager .pg-num.on,
.pager .pg-sz.on {
  background: var(--accent); border-color: var(--accent);
  color: #fff; font-weight: 600;
}
.pager .pg-num.on { cursor: default; }
.pager .pg-btn:disabled { opacity: .45; cursor: not-allowed; }
.pager .pg-btn:disabled:hover { border-color: var(--line); color: var(--ink-2); }
.pager .pg-gap { color: var(--ink-3); padding: 0 2px; user-select: none; }

/* 窄屏（手机后台）：条数选择换到第二行居中，避免把页码挤成两行 */
@media (max-width: 700px) {
  .pager { padding: 10px 14px; justify-content: center; }
  .pager .pg-total { width: 100%; text-align: center; }
  .pager .pg-sizes { width: 100%; justify-content: center; }
}