/* ==================================================================
 * 居小易 · 后台管理端 视觉规范 v3「克制」（2026-11-11）
 * ------------------------------------------------------------------
 * 目标：现代化商业软件质感 —— 商业化、简洁、去 AI 味。
 *
 * 这一层**只改视觉，不动任何结构/布局/业务逻辑**，在 style.css 之后加载，
 * 靠「同名 token 覆盖 + 组件级细化」一次性给 44 个页面换脸。
 * 回滚：删掉 index.html 里指向本文件的那一行 <link> 即可，其它文件零改动。
 *
 * ── 去 AI 味的六条硬规则（本文件的全部改动都从这六条推导）──
 * ① 背景不许有装饰性渐变。原来 body 右上角挂着一圈淡蓝径向光晕
 *    （radial-gradient 1200×600 #EEF3FF），那是「AI 生成页面」最典型的指纹：
 *    它不承载任何信息，只是让截图看起来"有设计感"。现在换成纯中性底色。
 * ② 主色只有一个，且必须与 APP / 官网同源。原来这里是 #2F6BFF（SaaS 模板亮蓝），
 *    APP 是 #1B3FA8（深靛蓝）—— 同一个人从后台切到手机，会觉得是两个产品。
 *    现在统一 #1B3FA8。亮蓝降级为「链接 / 图表」辅助色，不再做主按钮。
 * ③ 阴影只给浮层。卡片、按钮、表格一律 1px 边框分隔，不靠投影制造层级。
 *    原来按钮 hover 带 rgba(47,107,255,.24) 的彩色投影 —— 颜色渗到阴影里，
 *    是「发光按钮」的来源，全部清掉。
 * ④ 圆角收敛：控件 6px / 卡片 8px / 浮层 12px。不用 9999px 做按钮和页签，
 *    胶囊只留给「标签 / 徽章」这种真正的短文本元素。
 * ⑤ 状态用「浅底 + 深字」的小标签表达，不用彩色边框、不用彩色底卡。
 * ⑥ 图标一律 16px 单色线性，不做彩色圆角底块。
 *
 * 数值全部对齐 4/8 栅格；金额、编号一律 tabular-nums（等宽数字），
 * 这样表格里上下两行的数字能对齐，是"财务系统"和"演示 Demo"的分界线。
 * ================================================================== */

/* ==================== 1. Tokens ==================== */
:root {
  /* ---- 品牌主色：与 APP tokens.scss / 官网 v2.0 同源 ---- */
  --c-primary: #1B3FA8;
  --c-primary-hover: #163590;
  --c-primary-active: #102A72;
  --c-primary-light: #EDF1FC;
  --c-primary-soft: #F6F8FD;
  --c-primary-ring: rgba(27, 63, 168, .16);

  /* ---- 中性灰阶（商业后台 90% 的界面由这一列承担）---- */
  --c-text: #101828;              /* 标题 / 关键数字 */
  --c-text-regular: #475467;      /* 正文 */
  --c-text-secondary: #667085;    /* 辅助说明（对白 4.97:1，达 WCAG AA） */
  --c-text-placeholder: #98A2B3;  /* 仅占位 */
  --c-bg: #F7F8FA;                /* 页面底 */
  --c-bg-card: #FFFFFF;
  --c-border: #EAECF0;            /* 主分隔线 */
  --c-border-light: #F2F4F7;      /* 次级分隔（表格行、卡片内） */
  --c-input-border: #D0D5DD;      /* 输入框描边（比卡片深一档，才看得出可输入） */
  --c-header-border: #EAECF0;

  /* ---- 侧栏：白底 + 灰选中，选中态不再用蓝色整块 ---- */
  --c-sidebar: #FFFFFF;
  --c-sidebar-hover: #F7F8FA;
  --c-sidebar-active-bg: #F2F4F7;
  --c-sidebar-text: #475467;
  --c-sidebar-text-active: #101828;

  /* ---- 状态色：文字档加深（原来的 #12B886 / #F59E0B 压白底只有 2.4~2.9:1）---- */
  --c-success: #067647;
  --c-success-light: #ECFDF3;
  --c-success-text: #067647;
  --c-warning: #B54708;
  --c-warning-light: #FFFAEB;
  --c-warning-text: #B54708;
  --c-danger: #B42318;
  --c-danger-light: #FEF3F2;
  --c-danger-text: #B42318;

  /* ---- 圆角 ---- */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 12px;
  --btn-r: 6px;

  /* ---- 阴影：只有浮层配得上投影 ---- */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-md: 0 4px 12px -2px rgba(16, 24, 40, .08);
  --shadow-lg: 0 12px 32px -8px rgba(16, 24, 40, .14), 0 2px 6px -1px rgba(16, 24, 40, .05);
  --shadow-focus: 0 0 0 3px rgba(27, 63, 168, .14);
}

/* ==================== 2. 基础 ==================== */
/* ② 去装饰性背景渐变 */
body {
  background: var(--c-bg);
  color: var(--c-text-regular);
}
/* 数字等宽：表格里两行金额的位数能对齐 */
.dyn-table td,
.kpi-num,
.h-card-price,
h1, h2, h3 { font-variant-numeric: tabular-nums; }

/* 滚动条：细、灰、无圆角装饰 */
.content::-webkit-scrollbar { width: 10px; }
.content::-webkit-scrollbar-thumb {
  background: #D0D5DD; border-radius: 0;
  border: 3px solid var(--c-bg); background-clip: padding-box;
}
.content::-webkit-scrollbar-thumb:hover { background: #98A2B3; background-clip: padding-box; border: 3px solid var(--c-bg); }
.content::-webkit-scrollbar-track { background: transparent; }

/* ==================== 3. 顶栏 / 侧栏 / 导航 ==================== */
.topbar, .header {
  border-bottom: 1px solid var(--c-border);
  background: #fff;
}
.sidebar {
  background: #fff;
  border-right: 1px solid var(--c-border);
}

/* 导航项：36px 高、6px 圆角、选中 = 浅灰底 + 深字 + 左侧 2px 主色条
   （原来 40px 高 + 10px 圆角 + 蓝色整块底，一屏 12 个导航项里那一块蓝最扎眼）
   ⚠ 必须带 `.sidebar` 前缀：style.css 第 2300 行写的是
     `.sidebar a,.sidebar .nav-item,.sidebar li>a{ border-radius:10px }`（特异性 0,2,1），
     只写 `.nav-item`（0,1,0）盖不住 —— 这是覆盖层最容易踩的坑。 */
.sidebar .nav-item,
.sidebar a.nav-item,
.sidebar li > a {
  height: 36px;
  margin: 1px 8px;
  padding: 0 8px 0 10px;
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--c-sidebar-text);
  box-shadow: none;
}
.sidebar .nav-item:hover,
.sidebar a.nav-item:hover,
.sidebar li > a:hover {
  background: var(--c-sidebar-hover);
  color: var(--c-text);
}
.sidebar .nav-item.active,
.sidebar a.nav-item.active,
.sidebar li > a.active {
  background: var(--c-sidebar-active-bg);
  color: var(--c-sidebar-text-active);
  font-weight: 500;
  box-shadow: none;
}
/* 只有「最末级」才挂左侧 2px 主色条。
   父子两级同时 active 时（房源 + 出房管理）两条蓝边会叠成一根粗线，
   读起来像「这两项是一个东西」。父级靠浅底 + 蓝色图标就够定位了。 */
.sidebar .nav-item .ico:first-child { color: #667085; opacity: 1; }
.sidebar .nav-item.active .ico:first-child { color: var(--c-primary); }
.sidebar .nav-item:hover .ico:first-child { color: var(--c-text); }

.sidebar .nav-sub a {
  height: 32px;
  margin: 1px 8px;
  padding: 0 8px 0 32px;
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--c-sidebar-text);
  box-shadow: none;
}
.sidebar .nav-sub a:hover { background: var(--c-sidebar-hover); color: var(--c-text); }
.sidebar .nav-sub a.active {
  background: var(--c-sidebar-active-bg);
  color: var(--c-primary);
  font-weight: 500;
  box-shadow: inset 2px 0 0 0 var(--c-primary);
}

/* 顶栏图标按钮：去掉任何圆形底和阴影，hover 只给浅灰底 */
.header-ico, .topbar .ico-btn {
  border-radius: var(--r-sm);
  color: #667085;
}
.header-ico:hover, .topbar .ico-btn:hover { background: var(--c-sidebar-hover); color: var(--c-text); }

/* 页面容器与标题：商业后台的标题是「18px/600 + 一行辅助说明」，
   原来 19px/700 接近营销页的标题权重 */
.page-view { padding: 20px 24px 32px; }
.h-title, .page-title { font-size: 18px; font-weight: 600; color: var(--c-text); letter-spacing: -.01em; }
.h-sub, .page-sub { font-size: 12.5px; color: var(--c-text-secondary); }

/* 工具条：白底 + 1px 边，不投影（原来带 --shadow-sm，一层浮灰） */
.h-toolbar {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: none;
}

/* ==================== 4. 按钮族 ==================== */
/* 三层级：主（实心）/ 次（白底描边）/ 三（纯文字）。
   统一 32px 高、6px 圆角、13px/500、无渐变、无彩色投影。 */
.btn-primary,
.st-form-save,
.set-card-btn,
.sms-send-btn,
.create-btn,
.btn-add {
  height: 32px !important;
  border-radius: var(--r-sm) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  background-image: none !important;
  box-shadow: none !important;
  letter-spacing: 0;
}
.btn-primary:hover, .st-form-save:hover, .set-card-btn:hover,
.sms-send-btn:hover, .create-btn:hover, .btn-add:hover {
  transform: none !important;
  box-shadow: none !important;
}
/* 主按钮聚焦：3px 主色淡环，不用彩色投影 */
.btn-primary:focus-visible,
.btn-ghost:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus) !important;
}

.btn-ghost {
  height: 32px !important;
  border-radius: var(--r-sm) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  background: #fff !important;
  border: 1px solid var(--c-input-border) !important;
  color: var(--c-text-regular) !important;
  box-shadow: none !important;
}
.btn-ghost:hover {
  background: #FAFBFC !important;
  border-color: #98A2B3 !important;
  color: var(--c-text) !important;
}

/* 表格内的行内操作：默认是「文字按钮」，hover 才出浅底。
   原来账单页一行挂 5 个描边胶囊（记录/退款/开票/详情），一屏 20 行 = 100 个框。 */
.pm-act-btn, .op-btn, .btn-mini, .act-btn, .pd-act-btn, .cu-act-btn,
.task-go-btn, .h-more-btn, .h-eye-btn, .h-btn {
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 8px !important;
  border-radius: var(--r-sm) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--c-text-regular) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  background-image: none !important;
}
.pm-act-btn:hover, .op-btn:hover, .btn-mini:hover, .act-btn:hover,
.pd-act-btn:hover, .cu-act-btn:hover, .task-go-btn:hover,
.h-more-btn:hover, .h-eye-btn:hover, .h-btn:hover {
  background: var(--c-sidebar-hover) !important;
  border-color: var(--c-border) !important;
  color: var(--c-text) !important;
}
/* 行内主操作（记录 / 签约）保留一点分量：浅主色底 */
.act-btn--primary, .pm-act-btn.primary, .op-btn.primary {
  background: var(--c-primary-light) !important;
  color: var(--c-primary) !important;
  border-color: transparent !important;
}
.act-btn--primary:hover, .pm-act-btn.primary:hover, .op-btn.primary:hover {
  background: #E2E8F8 !important;
  color: var(--c-primary-hover) !important;
}
/* 行内危险操作：默认灰，hover 才红（红色常驻会让整列看起来都在报警） */
.pm-act-btn.danger, .op-btn.danger { color: var(--c-text-regular) !important; }
.pm-act-btn.danger:hover, .op-btn.danger:hover {
  background: var(--c-danger-light) !important;
  color: var(--c-danger) !important;
  border-color: transparent !important;
}

/* 价格是这张卡上唯一的金额，但 21px/700 的权重已经接近营销页的「起价」。
   商业后台的价格是「读得清的数字」，不是「吸引点击的卖点」：18px/600 足够。 */
#houseListArea .h-card-price b,
.h-card-price b {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
}
#houseListArea .h-card-price { height: 24px; line-height: 24px; }

/* ==================== 5. 表单控件 ==================== */
input[type="text"], input[type="search"], input[type="number"],
input[type="password"], input[type="date"], input[type="tel"],
input[type="email"], select, textarea,
.h-input, .h-select {
  border: 1px solid var(--c-input-border);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--c-text);
  font-size: 13px;
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus,
.h-input:focus, .h-select:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: var(--shadow-focus);
}
input::placeholder, textarea::placeholder { color: var(--c-text-placeholder); }

/* 右侧筛选面板的「小区」下拉：选项多（19 个小区名）时会被浏览器按最长项撑到 208px，
   而面板只有 230px 宽、一行放两个控件 —— 结果它撑破面板、把内容区顶出 17px 横向滚动。
   ⚠ 这是改造前就存在的布局 bug（v3 只是让滚动容器把它算进了 scrollWidth），
     顺手一起修：给下拉和它的 flex 行都加 min-width:0，允许收缩。 */
.f-sel, .h-select, .month-select, .bp-in { max-width: 100%; }
.f-row, .f-item { min-width: 0; }
.f-row > * { min-width: 0; }

/* ==================== 6. 卡片族 ==================== */
/* 卡片只负责「这是一块内容」：白底 + 1px 边 + 8px 圆角，不投影、不位移 */
.card, .kpi-card, .set-card, .bs-card, .page-card, .st-card,
.task-card, .h-cards-flat, .urge-rule-card, .set-bld-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: none;
}
.kpi-card:hover {
  box-shadow: none;
  transform: none;
  border-color: #D0D5DD;
}
/* KPI 数字：统一深墨色。原来四张卡四种颜色（蓝/绿/橙/红），
   读者会以为颜色有含义，其实只是装饰 —— 颜色只留给「真的需要警示」的那个数 */
.kpi-card .kpi-num { font-size: 24px; font-weight: 600; color: var(--c-text); letter-spacing: -.02em; }
.kpi-card.kpi-blue .kpi-num,
.kpi-card.kpi-green .kpi-num,
.kpi-card.kpi-orange .kpi-num { color: var(--c-text); }
.kpi-card.kpi-red .kpi-num { color: var(--c-danger); }

/* 房源卡：8px 圆角、1px 边、hover 只加深边框（不抬升、不投影） */
#houseListArea .h-card,
.h-card {
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  box-shadow: none;
}
#houseListArea .h-card:hover,
.h-card:hover {
  border-color: #C7CDD8;
  box-shadow: none;
}
/* 新建房源高亮：原来 2px 蓝环 + 28% 蓝投影 + 4 次脉冲，像在闪红灯。
   改成 2px 主色环 + 4 次淡出，只提示一次，不发光。 */
.h-card.jxy-flash {
  box-shadow: 0 0 0 2px var(--c-primary);
  animation: jxy-flash-v3 1.1s ease-in-out 3;
}
@keyframes jxy-flash-v3 {
  0%, 100% { box-shadow: 0 0 0 2px var(--c-primary); }
  50%      { box-shadow: 0 0 0 3px rgba(27, 63, 168, .28); }
}
tr.jxy-flash > td {
  background: var(--c-primary-soft) !important;
  box-shadow: inset 0 0 0 1px rgba(27, 63, 168, .22);
  animation: none;
}
tr.jxy-flash > td:first-child { box-shadow: inset 2px 0 0 0 var(--c-primary); }

/* ==================== 7. 表格 ==================== */
/* 商业后台表格的四条基线：表头浅灰底、行高 44、行分隔 1px、hover 整行浅色 */
.dyn-table { font-size: 13px; }
.dyn-table th, .dyn-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--c-border-light);
  text-align: left;
}
.dyn-table th,
.dyn-table thead th {
  background: #F9FAFB !important;
  color: #475467 !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  letter-spacing: .02em;
  border-bottom: 1px solid var(--c-border) !important;
  white-space: nowrap;
}
/* ⚠ 必须同时写 `.dyn-table thead th`：style.css 第 4561 行是
   `.dyn-table thead th{background:#FAFBFC !important}`，两条都是 !important 时
   按特异性决胜，`.dyn-table th`(0,1,1) 压不过 `.dyn-table thead th`(0,2,1)。
   而 #FAFBFC 同时是「行 hover」色 —— 同色的话 hover 到表头那行看不出反馈。
   表头压深一档到 #F9FAFB，hover 保持 #FAFBFC，才分得开。 */
.dyn-table tbody tr:hover td { background: #FAFBFC; }
.dyn-table td { color: var(--c-text-regular); }
/* 金额列：深墨色 + 等宽，右对齐由 td 上的 align 决定 */
.dyn-table td.num, .dyn-table td.money { color: var(--c-text); font-variant-numeric: tabular-nums; }

/* 各类专用表格外壳：统一 8px 圆角 + 1px 边，不要投影 */
.rev-table, .be-table, .bp-table, .cp-table, .pt-table,
.lead-table, .approval-table, .supplier-table, .dv-table,
.rs-table, .rp-table, .ct-table, .wk-table, .pay-auth-table {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: none;
}

/* ==================== 8. 页签 ==================== */
/* 从「实心胶囊」改成「下划线式」—— 这是商业后台最通用的页签形态：
   它把「当前在哪一栏」交给一条 2px 的线，而不是一整块蓝。
   ⚠ 必须 !important：style.css 第 2468 行 `.h-tab{border-radius:999px !important; padding:7px 15px !important}`
     用的是 !important，普通覆盖压不住 —— 不写就会留下一个 999px 圆角的"下划线页签"。 */
.h-tab {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 2px !important;
  height: 34px;
  font-size: 13px;
  color: var(--c-text-secondary);
  position: relative;
  transition: color .12s;
}
.h-tab:hover { color: var(--c-text); background: transparent !important; }
.h-tab.active {
  background: transparent !important;
  color: var(--c-primary);
  font-weight: 500;
  border-color: transparent !important;
  box-shadow: inset 0 -2px 0 0 var(--c-primary);
}
.subnav-tab {
  border-radius: 0;
  border: none;
  padding: 0 2px;
  height: 34px;
  font-size: 13px;
  color: var(--c-text-secondary);
}
.subnav-tab.active {
  color: var(--c-primary);
  font-weight: 500;
  box-shadow: inset 0 -2px 0 0 var(--c-primary);
  background: transparent;
}

/* ==================== 9. 标签 / 徽章 ==================== */
/* 浅底 + 深字 + 4px 圆角。不用描边、不用彩色实心底。 */
.tag, .badge, .h-card-tag, .h-card-tag.info, .h-card-tag.ok,
.h-card-tag.warn, .h-card-tag.danger {
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  padding: 0 6px;
  border: none;
}
.h-card-tag { width: auto; min-width: 15px; height: 15px; line-height: 15px; font-size: 10px; padding: 0 3px; }
.tag-primary { background: var(--c-primary-light) !important; color: var(--c-primary) !important; }
.tag-success { background: var(--c-success-light) !important; color: var(--c-success-text) !important; }
.tag-warning { background: var(--c-warning-light) !important; color: var(--c-warning-text) !important; }
.tag-danger  { background: var(--c-danger-light) !important; color: var(--c-danger-text) !important; }
.tag-info    { background: var(--c-primary-light) !important; color: var(--c-primary) !important; }
.tag-light   { background: #F2F4F7 !important; color: var(--c-text-secondary) !important; }

/* ==================== 10. 浮层（唯一允许有阴影的地方） ==================== */
.modal, .dialog, .drawer, .modal-box, .dialog-box, .popover, .dropdown-menu {
  border-radius: var(--r-xl);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-lg);
}
.modal-head, .dialog-head { border-bottom: 1px solid var(--c-border-light); }
.modal-foot, .dialog-foot { border-top: 1px solid var(--c-border-light); }

/* ==================== 11. 分页 ==================== */
.pager a, .pager button, .pager span {
  border-radius: var(--r-sm);
  border: 1px solid var(--c-border);
  min-width: 30px; height: 30px;
  font-size: 13px;
  color: var(--c-text-regular);
  background: #fff;
}
.pager a:hover, .pager button:hover { border-color: #C7CDD8; color: var(--c-text); }
.pager .active, .pager a.active, .pager button.active {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
  font-weight: 500;
}

/* ==================== 12. 其它细节 ==================== */
/* 仪表盘「待办提醒」的左侧分类卡：浅蓝底 → 浅灰底。
   选中态靠 2px 主色左条 + 标题加深，不靠整块淡蓝 —— 一屏四个分类，
   淡蓝底块并排会把「这一块是选中的」和「这一块是强调的」混在一起。
   ⚠ 必须带 `#tabPanes` 前缀：style.css 第 4071 行是
     `#tabPanes .cat-card.cat-active{background:var(--c-primary-light)}`（特异性 1,2,0），
     只写 `.cat-card.cat-active`（0,2,0）压不住，浅蓝底会留着。 */
#tabPanes .cat-card { border-radius: var(--r-md); }
#tabPanes .cat-card.cat-active {
  background: var(--c-sidebar-active-bg);
  border-color: var(--c-border);
  border-left: 2px solid var(--c-primary);
}
#tabPanes .cat-card.cat-active .cat-title { color: var(--c-text); }
#tabPanes .cat-card:hover { background: var(--c-sidebar-hover); }

/* 房源/账单详情弹窗（.bill-detail-* 同时被两个弹窗复用）
   ⚠ 原来 `.bill-detail-amount` 写死 var(--c-danger) —— 金额本身不是警示，
     红色应该只留给「欠款 / 逾期」。28px/700 也压到了标题之上，收到 24px/600。 */
.bill-detail-amount {
  font-size: 24px;
  font-weight: 600;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.bill-detail-amount small { font-size: 13px; font-weight: 400; color: var(--c-text-secondary); }

/* 状态标签：浅底 + 深字 + 4px 圆角（与全站标签统一），不再用实心色块 */
.bill-status {
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  padding: 2px 8px;
  line-height: 18px;
}
.bill-status.paid     { background: var(--c-success-light); color: var(--c-success-text); }
.bill-status.unpaid   { background: var(--c-danger-light);  color: var(--c-danger-text); }
.bill-status.ok       { background: var(--c-success-light); color: var(--c-success-text); }
.bill-status.warn     { background: var(--c-warning-light); color: var(--c-warning-text); }
.bill-status.neutral  { background: #F2F4F7;                color: var(--c-text-secondary); }

/* 详情弹窗的字段表：两列、标签定宽、值左对齐。
   ⚠ 原来每格是 `justify-content: space-between` —— 值贴右边缘，正好顶上右边那格的标签，
     于是「1-1-101」和「户型」挤在一起，读起来像四列。标签定宽后值有固定起点，两列才分得开。 */
.bill-detail-meta {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 4px 16px;
  gap: 0 28px;
}
.bill-detail-meta > div {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  padding: 9px 0;
  font-size: 13px;
  line-height: 20px;
  border-bottom: 1px solid var(--c-border-light);
}
.bill-detail-meta > div + div { border-top: none; }
/* 最后两格（两列布局的最后一行）不要多余的下边框 */
.bill-detail-meta > div:nth-last-child(-n+2) { border-bottom: none; }
.bill-detail-meta span { flex: 0 0 80px; color: var(--c-text-secondary); white-space: nowrap; }
.bill-detail-meta b { flex: 1; min-width: 0; color: var(--c-text); font-weight: 500; word-break: break-all; }

/* 弹窗底部动作区：次按钮排一行，主按钮单独一行靠右 */
.bill-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--c-border-light);
}
/* 按钮里的图标必须跟文字同色 —— 原来 .ico 自带主色，一个灰字按钮配蓝图标，
   看起来像"图标是链接、文字不是"。 */
.btn-ghost .ico, .btn-primary .ico { color: inherit; }

/* 分隔线统一 1px 极浅灰 */
.divider, hr { background: var(--c-border-light); border: none; height: 1px; }

/* 空态：图标压到 48px，颜色再浅一档，不要抢注意力 */
.empty { color: var(--c-text-secondary); }

/* 链接：主色 + 下划线只在 hover 出现（商业系统里常驻下划线太吵） */
a { color: var(--c-primary); }
a:hover { color: var(--c-primary-hover); }

/* 表格/卡片里的次要按钮不再有 hover 位移 */
* { -webkit-tap-highlight-color: transparent; }

/* ==========================================================================
 * 批次145：平台后台（功能开通 / 租户管理 / 平台管理员）
 * --------------------------------------------------------------------------
 * 全部限定在 .pf- 前缀下，不影响租户侧任何既有页面。
 * ========================================================================== */
.pf-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.pf-lbl { font-size: 13px; color: var(--c-text-regular); }
.pf-title { font-size: 14px; font-weight: 600; color: var(--c-text); letter-spacing: -0.2px; }

.pf-plan {
  display: inline-block; font-size: 12px; line-height: 20px; padding: 0 8px;
  border-radius: var(--r-sm); background: var(--c-primary-light); color: var(--c-primary);
  font-weight: 500;
}

/* 顶部说明条：解释「关闭 ≠ 删除」，这是这一页最容易被误解的地方 */
.pf-note {
  font-size: 12px; line-height: 1.8; color: var(--c-text-secondary);
  background: var(--c-bg); border: 1px solid var(--c-border-light);
  border-radius: var(--r-md); padding: 8px 12px; margin-bottom: 14px;
}

.pf-loading { padding: 28px 0; text-align: center; font-size: 13px; color: var(--c-text-secondary); }
.pf-err { padding: 20px 0; font-size: 13px; color: #B42318; }

/* 功能分组 */
.pf-group { border: 1px solid var(--c-border); border-radius: var(--r-md); margin-bottom: 12px; overflow: hidden; }
.pf-group-hd {
  font-size: 12px; font-weight: 500; color: var(--c-text-regular);
  background: #F9FAFB; padding: 8px 14px; border-bottom: 1px solid var(--c-border-light);
}

/* 单个功能行 */
.pf-row {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 14px; border-bottom: 1px solid var(--c-border-light);
}
.pf-row:last-child { border-bottom: none; }
.pf-info { flex: 1; min-width: 0; }
.pf-name {
  font-size: 13px; font-weight: 500; color: var(--c-text); line-height: 1.5;
  display: flex; align-items: center; gap: 6px;
}
.pf-desc { font-size: 12px; color: var(--c-text-secondary); line-height: 1.6; margin-top: 2px; }

/* 「默认」/「已改」标记 */
.pf-tag {
  display: inline-block; font-size: 11px; line-height: 16px; padding: 0 5px;
  border-radius: 4px; background: var(--c-border-light); color: var(--c-text-secondary);
  font-weight: 400;
}
.pf-tag-on { background: var(--c-primary-light); color: var(--c-primary); }

/* 状态徽章 */
.pf-badge { display: inline-block; font-size: 12px; line-height: 20px; padding: 0 7px; border-radius: 4px; }
.pf-badge-ok { background: #ECFDF3; color: #067647; }
.pf-badge-warn { background: #FFFAEB; color: #B54708; }
.pf-badge-mute { background: var(--c-border-light); color: var(--c-text-secondary); }

/* 开关（36×20，主色轨道，白色滑块） */
.pf-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; flex: 0 0 auto; }
.pf-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.pf-switch .pf-track {
  display: block; width: 36px; height: 20px; border-radius: 999px;
  background: #D0D5DD; transition: background .15s ease;
}
.pf-switch .pf-knob {
  position: absolute; left: 2px; top: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.18);
  transition: transform .15s ease; pointer-events: none;
}
.pf-switch input:checked ~ .pf-track { background: var(--c-primary); }
.pf-switch input:checked ~ .pf-knob { transform: translateX(16px); }
.pf-switch input:focus-visible ~ .pf-track { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.pf-switch input:disabled ~ .pf-track { opacity: .5; }

/* 平台后台表格里的操作按钮沿用租户侧的纯文字按钮风格 */
.pf-row .btn-mini, .pf-row .pm-act-btn { height: 26px !important; padding: 0 8px !important; }

/* ==================================================================
 * 批次146：电子签署面板（合同详情 →「电子签署」）
 * 前缀 es- 隔离，不影响租户侧任何样式
 * ================================================================== */
.es-panel {
  margin: 16px 0 0;
  border: 1px solid var(--c-border, #e5e7eb);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--c-bg, #fafbfc);
}
.es-tip { font-size: 13px; line-height: 1.7; color: var(--c-text-secondary, #667085); }
.es-block-hd { margin: 14px 0 8px; font-weight: 600; font-size: 13px; color: var(--c-text, #1d2939); }
.es-links { display: flex; flex-direction: column; gap: 10px; }
.es-link {
  border: 1px solid var(--c-border, #e5e7eb);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--c-bg-card, #fff);
}
.es-link-hd { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--c-text, #1d2939); }
.es-link-open { margin-left: auto; color: var(--c-primary, #165dff); text-decoration: none; font-size: 13px; }
.es-link-open:hover { text-decoration: underline; }
.es-link-copy { flex: none; }
.es-link-url {
  margin-top: 6px;
  font-size: 11px;
  color: var(--c-text-placeholder, #98a2b3);
  word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  line-height: 1.5;
}
.es-link-err { font-size: 12px; color: var(--c-danger-text, #d92d20); margin-top: 4px; }
.es-note { margin-top: 10px; font-size: 12px; color: var(--c-text-placeholder, #98a2b3); line-height: 1.6; }

/* 批次146：网签页如实展示提示条 */
.ns-hint {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--c-warning, #f5c26b);
  background: var(--c-warning-light, #fffaeb);
  color: var(--c-text-regular, #475467);
  font-size: 12.5px;
  line-height: 1.7;
}
.ns-hint strong { color: var(--c-warning-text, #b54708); }