/* CRM 系统样式表 - 自动从 app.html 提取 */
/* ============================================================
   地址挂靠管理系统 - 统一设计系统
   ============================================================ */
:root {
  /* 主色 */
  --pri: #0f3460;
  --pri-h: #0c2a4e;
  --pri-l: #e8eef6;
  --acc: #e94560;
  --acc-h: #d13850;
  /* 功能色 */
  --green: #52c41a;
  --green-bg: #f6ffed;
  --green-bd: #b7eb8f;
  --red: #f5222d;
  --red-bg: #fff1f0;
  --red-bd: #ffa39e;
  --blue: #1890ff;
  --blue-bg: #e6f4ff;
  --blue-bd: #91caff;
  --orange: #fa8c16;
  --orange-bg: #fff7e6;
  --orange-bd: #ffd591;
  --purple: #722ed1;
  --purple-bg: #f9f0ff;
  --purple-bd: #d3adf7;
  --teal: #13c2c2;
  /* 中性色 */
  --divider: #f0f0f0;
  --bg-input: #fafafa;
  --bg-disabled: #f5f5f5;
  --bd-hover: #bbb;
  --bd-strong: #d9d9d9;
  --bg-card: #f8fafc;
  --bd-card: #eef2f7;
  --bg-row: #fafbfc;
  --bg-row-hover: #f0f4f8;
  --bg-subheader: #f1f5f9;
  --bg-row-alt: #f7fafc;
  --green-h: #389e0d;
  --red-h: #cf1322;
  --red-dark: #991b1b;
  --blue-dark: #1d4ed8;
  --indigo: #6366f1;
  --orange-dark: #92400e;
  --yellow-dark: #ca8a04;

  --text: #1e293b;
  --text-2: #475569;
  --text-3: #64748b;
  --text-4: #94a3b8;
  --bg: #f0f2f5;
  --bg-2: #f8f9fa;
  --bd: #e0e0e0;
  --bd-2: #e8eaed;
  --white: #ffffff;
  /* 灰度体系（Tailwind 风格） */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1e293b;
  --gray-900: #111827;
  --blue-lighter: #eff6ff;
  --blue-light-bd: #bfdbfe;
  /* 登录页专用 */
  --login-dark: #1a1c2e;
  --login-mid: #16213e;
  /* 尺寸 */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow-md: 0 2px 8px rgba(0,0,0,.08);
  --shadow-lg: 0 6px 20px rgba(0,0,0,.12);
  --shadow-xl: 0 20px 60px rgba(0,0,0,.25);
  /* 字体 */
  --ff: 'Microsoft YaHei','PingFang SC','Helvetica Neue',Arial,sans-serif;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-xxl: 22px;

  /* ===== z-index 层级表（★ 2026-09-19 立｜唯一真源｜新增浮层必须在此登记，禁再硬编码）=====
     ⚠️ 历史教训（同一根因两次发作）：批量条 1200 / 框选统计条 9000 / 表格就地浮层 9750
        都**高于弹窗 1000** → 弹窗打开时页面浮条压在弹窗上，遮住底部「取消/确认」，
        严重时点不到确认按钮；09-18 曾用「弹窗内禁用框选」绕过一次，根因未修故复发。
     三层语义（唯一判据）：
       ① 页面级浮层 800~899 —— 只需压过页面内容与吸顶表头(5/6)；
       ② 弹窗 1000 —— 模态（带遮罩）→ 必须压过**全部**页面级浮层；
       ③ 压过所在容器的浮层 1100 / 全屏查看 1200 / 提示类 2000+ —— 各自独立段。
     ⚠️ 页面级段内数值按「原相对高低」一一映射，未改变浮层之间的遮挡关系。 */
  --z-pagepop: 800;      /* 页面级·表头筛选面板 */
  --z-menu: 810;         /* 页面级·右键菜单（列 / 行） */
  --z-batchbar: 820;     /* 页面级·批量操作浮条（订单 / 地址 / 续费 / 客户 4 页共用） */
  --z-hint: 830;         /* 页面级·隐藏列提示浮层 */
  --z-undo: 840;         /* 页面级·撤销提示条 */
  --z-selbar: 850;       /* 页面级·单元格框选统计条 */
  --z-colshead: 860;     /* 页面级·列选择悬浮箭头 */
  --z-tablepop: 870;     /* 页面级·表格就地编辑浮层（客户选择 / 地址菜单 / 逐笔明细） */
  --z-modal: 1000;       /* 弹窗（通用弹窗 / 订单详情）—— 压过一切页面级浮层 */
  --z-float: 1100;       /* 压过所在容器的浮层：弹窗内下拉选择器 / 渠道选择浮层 */
  --z-viewer: 1200;      /* 全屏查看（订单附件大图） */
  --z-toast: 2000;       /* 轻提示 */
  --z-version: 9000;     /* 版本公告条 */
  --z-loading: 99999;    /* 加载遮罩（最高） */
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px}
body{font-family:var(--ff);background:var(--bg);color:var(--text);min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:none;outline:none;font-family:inherit}
input,select,textarea{outline:none;font-family:inherit;font-size:var(--fs)}
table{border-collapse:collapse;width:100%}

/* ===== 全局滚动条 ===== */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#b0b5bd}

/* ===== 加载动画 ===== */
#loading-overlay{position:fixed;inset:0;z-index:99999;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .4s}
/* ★ 2026-08-29：.hide 加 visibility:hidden + 延迟过渡——隐藏后彻底退出命中/渲染，
   杜绝"透明全屏残留层吃掉订单区点击"（用户报告：有子订单但倒三角点不开） */
#loading-overlay.hide{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.loading-spinner{width:40px;height:40px;border:3px solid var(--bd);border-top-color:var(--pri);border-radius:50%;animation:spin .7s linear infinite}
.loading-text{margin-top:16px;color:var(--text-3);font-size:var(--fs)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideIn{from{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}
@keyframes slideOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100%)}}

.content-page{display:none}.content-page.active{display:block}
#main-app{min-height:100vh;display:none}

/* ===== 按钮系统 ===== */
.btn-primary{padding:8px 20px;background:var(--pri);color:var(--white);border-radius:var(--r-md);font-size:var(--fs);font-weight:600;transition:all .2s;white-space:nowrap;border:1px solid var(--pri)}
.btn-primary:hover{background:var(--pri-h);border-color:var(--pri-h);box-shadow:0 2px 8px rgba(15,52,96,.3)}
.btn-primary:active{transform:scale(.97)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn-secondary{padding:8px 20px;background:var(--white);color:var(--text-2);border:1px solid var(--bd);border-radius:var(--r-md);font-size:var(--fs);font-weight:500;transition:all .2s;white-space:nowrap}
.btn-secondary:hover{border-color:var(--pri);color:var(--pri);background:var(--pri-l)}
.btn-secondary:active{transform:scale(.97)}
.btn-danger{padding:6px 14px;background:var(--red-bg);color:var(--red);border:1px solid var(--red-bd);border-radius:var(--r-md);font-size:var(--fs-sm);transition:all .2s}
.btn-danger:hover{background:var(--red);color:var(--white);border-color:var(--red)}
.btn-edit{padding:6px 14px;background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-bd);border-radius:var(--r-md);font-size:var(--fs-sm);transition:all .2s}
.btn-edit:hover{background:var(--blue);color:var(--white);border-color:var(--blue)}
.btn-view{padding:6px 14px;background:var(--green-bg);color:var(--green);border:1px solid var(--green-bd);border-radius:var(--r-md);font-size:var(--fs-sm);transition:all .2s}
.btn-view:hover{background:var(--green);color:var(--white);border-color:var(--green)}
.btn-approve{padding:6px 16px;background:var(--green);color:var(--white);border-radius:var(--r-md);font-size:var(--fs);transition:all .2s}
.btn-approve:hover{background:var(--green-h);box-shadow:0 2px 6px rgba(82,196,26,.3)}
.btn-reject{padding:6px 16px;background:var(--red);color:var(--white);border-radius:var(--r-md);font-size:var(--fs);transition:all .2s}
.btn-reject:hover{background:var(--red-h);box-shadow:0 2px 6px rgba(245,34,45,.3)}
.btn-submit{padding:6px 14px;background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-bd);border-radius:var(--r-md);font-size:var(--fs-sm);transition:all .2s}
.btn-submit:hover{background:var(--blue);color:var(--white);border-color:var(--blue)}
.btn-warning{padding:6px 14px;background:var(--orange-bg);color:var(--orange);border:1px solid var(--orange-bd);border-radius:var(--r-md);font-size:var(--fs-sm);transition:all .2s;white-space:nowrap}
.btn-warning:hover{background:var(--orange);color:var(--white);border-color:var(--orange)}
.btn-logout{width:100%;padding:10px;background:rgba(233,69,96,.2);color:var(--acc);border-radius:var(--r-md);font-size:var(--fs);transition:background .2s}
.btn-logout:hover{background:rgba(233,69,96,.35)}
.detail-btn{background:none;border:1px solid var(--bd);color:var(--blue);cursor:pointer;padding:4px 12px;border-radius:var(--r-sm);font-size:var(--fs-sm);transition:all .2s}
.detail-btn:hover{background:var(--blue);color:var(--white);border-color:var(--blue)}
.add-biz-btn{padding:4px 14px;background:var(--green-bg);color:var(--green);border:1px solid var(--green-bd);border-radius:var(--r-md);font-size:var(--fs-sm);transition:all .2s;white-space:nowrap}
.add-biz-btn:hover{background:var(--green);color:var(--white);border-color:var(--green)}
/* ===== 操作列统一小按钮（2026-09-01：尺寸统一基准，颜色按语义各异）===== */
.op-btn{padding:2px 9px;height:22px;line-height:1;font-size:11px;border-radius:4px;
        border:1px solid transparent;cursor:pointer;white-space:nowrap;
        display:inline-flex;align-items:center;gap:2px;transition:all .15s;box-sizing:border-box}
.op-btn:hover{filter:brightness(.94)}
.op-btn:active{transform:scale(.95)}
.op-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.op-btn-edit{background:var(--blue-bg);color:var(--blue);border-color:var(--blue-bd)}
.op-btn-edit:hover{background:var(--blue);color:var(--white);border-color:var(--blue)}
.op-btn-danger{background:var(--red-bg);color:var(--red);border-color:var(--red-bd)}
.op-btn-danger:hover{background:var(--red);color:var(--white);border-color:var(--red)}
.op-btn-approve{background:var(--green-bg);color:var(--green);border-color:var(--green-bd)}
.op-btn-approve:hover{background:var(--green);color:var(--white);border-color:var(--green)}
.op-btn-warning{background:var(--orange-bg);color:var(--orange);border-color:var(--orange-bd)}
.op-btn-warning:hover{background:var(--orange);color:var(--white);border-color:var(--orange)}
.op-btn-plain{background:var(--white);color:var(--text-2);border-color:var(--bd)}
.op-btn-plain:hover{border-color:var(--pri);color:var(--pri)}

/* ===== 表单 ===== */
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:var(--fs-sm);color:var(--text-2);margin-bottom:6px;font-weight:600}
.form-group label .required,.required{color:red;margin-left:2px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:9px 12px;border:1.5px solid var(--bd);border-radius:var(--r-md);font-size:var(--fs);transition:all .2s;background:var(--bg-input);color:var(--text)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--pri);background:var(--white);box-shadow:0 0 0 3px rgba(15,52,96,.1)}
.form-group input:hover,.form-group select:hover,.form-group textarea:hover{border-color:var(--bd-hover)}
.form-group input:disabled,.form-group select:disabled{background:var(--bg-disabled);color:var(--text-3);cursor:not-allowed}
.form-group textarea{min-height:80px;resize:vertical}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid .form-group{margin-bottom:0}
.form-group.full{grid-column:1/-1}
.form-required{color:var(--red)}
.form-required::after{content:' *';color:var(--red)}

/* ===== 登录页 ===== */
.login-bg{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--login-dark) 0%,var(--login-mid) 40%,var(--pri) 70%,var(--acc) 100%);position:relative;overflow:hidden}
.login-bg::before{content:'';position:absolute;width:600px;height:600px;background:radial-gradient(circle,rgba(233,69,96,.15) 0%,transparent 70%);top:-200px;right:-200px;border-radius:50%}
.login-bg::after{content:'';position:absolute;width:400px;height:400px;background:radial-gradient(circle,rgba(15,52,96,.3) 0%,transparent 70%);bottom:-100px;left:-100px;border-radius:50%}
.login-card{background:rgba(255,255,255,.96);backdrop-filter:blur(20px);border-radius:var(--r-xl);padding:48px 40px;width:440px;max-width:95vw;box-shadow:var(--shadow-xl);position:relative;z-index:1}
.login-logo{text-align:center;margin-bottom:32px}
.logo-icon{font-size:48px;margin-bottom:12px}
.login-logo h1{font-size:var(--fs-xxl);color:var(--text);font-weight:700;margin-bottom:6px}
.login-logo p{font-size:var(--fs-sm);color:var(--text-4);letter-spacing:1px}
/* ★ 2026-09-14：.role-tabs / .role-tab 样式已随登录页角色选择功能移除（改为账号输入框 + 记住账号） */
.login-tip{color:var(--acc);font-size:var(--fs-sm);margin-bottom:8px;min-height:18px}
.btn-login{width:100%;padding:12px;background:linear-gradient(135deg,var(--pri),var(--pri-h));color:var(--white);border:none;border-radius:var(--r-md);font-size:var(--fs-lg);font-weight:600;cursor:pointer;transition:all .3s;letter-spacing:4px;margin-top:8px}
.btn-login:hover{background:linear-gradient(135deg,var(--acc),var(--acc-h));transform:translateY(-1px);box-shadow:0 4px 15px rgba(233,69,96,.4)}
.btn-login:active{transform:translateY(0)}
.btn-login:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.demo-accounts{margin-top:20px;font-size:var(--fs-sm);color:var(--text-4)}
.demo-accounts p{margin-bottom:8px}
.demo-accounts span{display:inline-block;margin:3px 4px 3px 0;padding:4px 10px;background:var(--divider);border-radius:20px;cursor:pointer;transition:background .2s}
.demo-accounts span:hover{background:var(--pri-l);color:var(--pri)}

/* ===== 顶部导航栏 ===== */
/* ★ 3.636（帅哥拍板①A）：导航栏与标签栏同用参考图配色 —— 条底垂直渐变 #3899FF → #87BFFF。
   导航栏里已只剩菜单（品牌/工具区在下方标签栏），故整条按「深底浅字」重排。 */
/* ★ 3.637（帅哥：蓝渐变「有点丑，算了背景还是以前那种白色的」）：导航栏与标签栏**全部回浅色**，
   深底浅字那一套（品牌/导航项/搜索框/铃铛/用户区）一并撤回浅底深字。 */
.topnav{position:sticky;top:0;z-index:100;background:var(--white);border-bottom:1px solid var(--gray-200);height:54px;display:flex;align-items:center;padding:0 16px;gap:0;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.topnav-left{display:flex;align-items:center;gap:10px;flex-shrink:0}
.topnav-mobile-btn{display:none;background:none;border:none;font-size:22px;color:var(--gray-700);cursor:pointer;padding:4px 6px;border-radius:6px;line-height:1}
.topnav-mobile-btn:hover{background:var(--gray-100)}
.bottom-nav{display:none} /* 桌面端隐藏，移动端在媒体查询中显示 */
.topnav-brand{display:flex;align-items:center;gap:6px;text-decoration:none;color:var(--gray-900);flex-shrink:0}
.topnav-brand:hover{color:var(--pri)}
.topnav-logo{font-size:20px;line-height:1}
.topnav-name{font-size:14px;font-weight:700;white-space:nowrap}
.topnav-ver{font-size:10px;color:var(--gray-400);font-weight:400;margin-left:2px}
.topnav-env-badge{display:inline-block;font-size:9px;font-weight:700;color:var(--red);border:1px solid var(--red);border-radius:3px;padding:0 5px;line-height:16px;margin-left:4px;vertical-align:middle}
/* ★ 2026-09-03：左上角「有新版本」徽标（点击立即刷新；版本检测 _setNewVerBadge 控制显隐） */
.topnav-newver-badge{display:inline-flex;align-items:center;font-size:9px;font-weight:700;color:#fff;background:var(--red);border-radius:10px;padding:0 7px;line-height:16px;margin-left:4px;vertical-align:middle;cursor:pointer;white-space:nowrap;animation:badge-pulse 2s infinite}
/* ★ 2026-09-14：min-width:0 —— 允许 flex 分配宽度生效（默认 min-width:auto 会被内容撑大 → 挤压右侧搜索/头像）。
   配合 JS 的 layoutTopnav()：放不下的菜单项动态收进「⋯ 更多」。 */
/* ★ 3.636：导航栏内已无左右两块，可用宽度 = 整条 ⇒ 溢出折叠判定自动放宽（layoutTopnav 读 clientWidth）。 */
.topnav-nav{display:flex;align-items:center;gap:2px;margin:0 8px;flex:1;min-width:0;overflow:visible}
/* 参与溢出判定的直接子元素不得被 flex 压缩，否则 offsetWidth 反映的是压缩值、判定失真 */
.topnav-nav > .tn-group,.topnav-nav > .tn-item-flat{flex:0 0 auto}
/* 「⋯ 更多」下拉：被折叠项竖排平铺（不再嵌套二级下拉） */
#tn-more-dropdown{min-width:190px;max-height:70vh;overflow-y:auto}
#tn-more-dropdown .tn-item{margin:1px 0}
/* ★ 2026-09-15（帅哥要求）导航形态切换按钮：展开（平铺）/ 分组下拉 一键切换 */
/* ★ 2026-09-15 修复「点切换后导航炸开」：按钮改 margin-left:auto **钉在导航区最右端**，
   使其在「展开/分组」两种形态下坐标恒定 —— 否则切换后按钮位移，鼠标停在旧坐标上，
   新形态下该坐标若压到某个分组按钮，分组下拉会被 hover 永久展开、竖排悬浮在页面上。 */
.tn-viewtoggle{display:flex;align-items:center;gap:4px;flex:0 0 auto;margin-left:auto;margin-right:2px;padding:5px 10px;font-size:12px;color:var(--gray-600);background:var(--gray-100);border:1px dashed var(--gray-300);border-radius:6px;cursor:pointer;white-space:nowrap;user-select:none;transition:background .15s,color .15s,border-color .15s}
.tn-viewtoggle:hover{background:var(--blue-lighter);color:var(--pri);border-color:var(--pri)}
/* ★ 2026-09-15：形态切换后的一次性护栏 —— 屏蔽期间「hover 自动展开下拉」失效，
   直到鼠标真正移动（>12px）才恢复。防止切换瞬间的「陈旧悬停」把下拉钉死在页面上。 */
.topnav-nav.nav-no-hover-dd .tn-group:hover>.tn-dropdown{display:none}
.tn-group{position:relative}
.tn-tab{display:flex;align-items:center;gap:4px;padding:6px 12px;font-size:13px;color:var(--gray-600);cursor:pointer;border-radius:6px;white-space:nowrap;user-select:none;transition:background .15s,color .15s;font-weight:500}
.tn-tab:hover{background:var(--gray-100);color:var(--gray-900)}
.tn-arrow{font-size:9px;color:var(--gray-400);transition:transform .15s}
.tn-group:not(.collapsed)>.tn-tab{background:var(--blue-lighter);color:var(--pri)}
.tn-group:not(.collapsed)>.tn-tab>.tn-arrow{color:var(--pri);transform:rotate(180deg)}
.tn-dropdown{display:none;position:absolute;top:100%;left:0;min-width:180px;background:var(--white);border:1px solid var(--gray-200);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:110;padding:4px;margin-top:4px}
.tn-group:not(.collapsed)>.tn-dropdown{display:block}
/* ★ 2026-08-27：导航栏分组 hover 自动展开下拉（鼠标移上去显示、移开收起，无需点击）—— 保持原行为。
   2026-09-15 一度改成点击制，属**未经确认的改动**，已按帅哥要求回滚。 */
/* ★ 2026-08-29：透明"桥"盖住菜单与触发器之间的 margin-top 间隙——鼠标慢速穿过时 hover 不断开，修复下拉闪关 */
.tn-dropdown::before{content:'';position:absolute;top:-6px;left:0;right:0;height:6px}
.tn-group:hover>.tn-dropdown{display:block}
.tn-item{display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:13px;color:var(--gray-700);text-decoration:none;border-radius:6px;cursor:pointer;white-space:nowrap;position:relative;transition:background .1s}
.tn-item:hover{background:var(--gray-50)}
.tn-item.active{background:var(--blue-lighter);color:var(--pri);font-weight:600}
/* ★ 平铺菜单项：圆角标签风格，背景区分 */
.tn-item-flat{background:var(--gray-100);border-radius:8px;margin:0 3px;transition:all .15s}
.tn-item-flat:hover{background:var(--gray-300)}
.tn-item-flat.active{background:var(--pri);color:#fff;font-weight:600}
.tn-icon{font-size:15px;flex-shrink:0}
.tn-text{font-size:13px}
.tn-item-badge{background:var(--acc);color:var(--white);border-radius:10px;font-size:10px;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;padding:0 4px;font-weight:600;flex-shrink:0}
.tn-item-badge.urgent{background:var(--red);animation:badge-pulse 1.6s ease-in-out infinite}
.tn-item-badge.normal{background:var(--orange)}
@keyframes badge-pulse{0%,100%{opacity:1}50%{opacity:.65}}
.tn-group-badge{background:var(--acc);color:var(--white);border-radius:10px;font-size:10px;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;padding:0 4px;font-weight:600;margin-left:2px}
.topnav-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
/* ★ 3.636：工具区已常驻标签栏右端（全站唯一一份 DOM，禁复制 —— 复制会让搜索/铃铛按 id 取到隐藏副本）。
   布局：[品牌][标签+＋][工具区靠右]。 */
.nav-tabs > .topnav-right{margin-left:auto}
.nav-tabs > .topnav-left{flex:0 0 auto;gap:8px}
.topnav-search{position:relative;flex-shrink:0}
/* ★ 3.637：回浅底深字。
   ⚠️ 但**保留「聚焦不加宽」** —— 那是 3.636 为解决「加宽会挤压标签区」做的结构改动，与配色无关。 */
.topnav-search input{width:170px;padding:6px 30px 6px 10px;border:1px solid var(--gray-200);border-radius:6px;font-size:12px;background:var(--gray-50);transition:background .15s,border-color .15s,box-shadow .15s;outline:none;color:var(--text)}
.topnav-search input:focus{border-color:var(--pri);background:var(--white);box-shadow:0 0 0 2px rgba(59,130,246,.1)}
.topnav-search input::placeholder{color:var(--gray-400)}
.tn-search-icon{position:absolute;right:8px;top:50%;transform:translateY(-50%);color:var(--gray-400);font-size:12px;pointer-events:none}
.search-results-dropdown{position:absolute;top:100%;left:0;right:0;background:var(--white);border:1px solid var(--gray-200);border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.12);z-index:1000;max-height:400px;overflow-y:auto;margin-top:4px;display:none}
.search-results-dropdown .sr-group{padding:6px 0}
.search-results-dropdown .sr-group-header{padding:4px 12px;font-size:11px;color:var(--gray-400);font-weight:600;text-transform:uppercase}
.search-results-dropdown .sr-item{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;transition:background .15s;font-size:13px;color:var(--text)}
.search-results-dropdown .sr-item:hover{background:var(--gray-100)}
.search-results-dropdown .sr-item .sr-icon{font-size:16px;flex-shrink:0}
.search-results-dropdown .sr-item .sr-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-results-dropdown .sr-item .sr-detail{font-size:11px;color:var(--gray-400);flex-shrink:0}
.search-results-dropdown .sr-empty{padding:20px;text-align:center;color:var(--gray-400);font-size:12px}
.topnav-notif{position:relative;cursor:pointer;font-size:18px;padding:6px 8px;border-radius:6px;line-height:1}
.topnav-notif:hover{background:var(--gray-100)}
.tn-notif-badge{position:absolute;top:-2px;right:0;background:var(--red);color:var(--white);font-size:9px;padding:1px 4px;border-radius:8px;min-width:14px;text-align:center;line-height:14px;font-weight:700}
.tn-notif-dropdown{display:none;position:absolute;top:100%;right:0;width:320px;max-height:400px;overflow-y:auto;background:var(--white);border:1px solid var(--gray-200);border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.15);z-index:1000;margin-top:4px}
.topnav-user{position:relative;display:flex;align-items:center;gap:6px;padding:4px 0 4px 8px;cursor:pointer;border-radius:6px;user-select:none}
.topnav-user:hover{background:var(--gray-100)}
.tn-user-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--pri),var(--acc));display:flex;align-items:center;justify-content:center;color:var(--white);font-weight:700;font-size:12px;flex-shrink:0}
.tn-user-name{font-size:13px;color:var(--gray-700);font-weight:500;white-space:nowrap;max-width:80px;overflow:hidden;text-overflow:ellipsis}
.tn-user-role{font-size:10px;color:var(--gray-400)}
.topnav-user .tn-arrow{font-size:9px;color:var(--gray-400)}
/* ★ 3.625（帅哥拍板①）：用户菜单改为**固定定位**，由 JS 在打开时贴到触发点（标签条头像 / 右上角头像）下方。
   目的：**全站只有这一份菜单 DOM**（两份 HTML 必然走偏——加一项要改两处）。 */
.tn-user-dropdown{display:none;position:fixed;top:60px;right:16px;min-width:190px;background:var(--white);border:1px solid var(--gray-200);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:110;padding:8px}
.tn-user-dropdown.open{display:block}
.tn-user-dropdown-hd{padding:8px 12px}
.tn-ud-name{font-size:14px;font-weight:600;color:var(--gray-900)}
.tn-ud-role{font-size:11px;color:var(--gray-400);margin-top:2px}
.tn-user-divider{height:1px;background:var(--gray-200);margin:6px 0}
.tn-user-logout{display:flex;align-items:center;gap:6px;width:100%;padding:8px 12px;background:none;border:none;font-size:13px;color:var(--gray-700);cursor:pointer;border-radius:6px;text-align:left}
.tn-user-logout:hover{background:#fef2f2;color:var(--red)}
.badge{background:var(--acc);color:var(--white);border-radius:10px;font-size:10px;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;padding:0 4px;font-weight:600}
.nav-badge{display:inline-block;background:var(--red);color:var(--white);font-size:10px;padding:1px 6px;border-radius:10px;margin-left:4px;font-weight:600;min-width:18px;text-align:center}

/* ===== 移动端抽屉 ===== */
.mobile-drawer{position:fixed;left:0;top:0;bottom:0;width:260px;background:linear-gradient(180deg,var(--login-dark),var(--login-mid));z-index:200;transform:translateX(-100%);transition:transform .3s;display:flex;flex-direction:column;overflow:hidden}
.mobile-drawer.mobile-open{transform:translateX(0)}
.drawer-mask{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:199}
.drawer-mask.active{display:block}
.sidebar-nav{flex:1;padding:12px 0;overflow-y:auto}
.sidebar-nav::-webkit-scrollbar{width:4px}
.sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px}
.nav-group-title{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;color:rgba(255,255,255,.4);font-size:11px;font-weight:600;letter-spacing:1px;cursor:pointer;user-select:none;margin-top:4px}
.nav-group-title:hover{color:rgba(255,255,255,.6)}
.nav-group-arrow{font-size:9px;transition:transform .2s}
.nav-group.collapsed .nav-group-arrow{transform:rotate(-90deg)}
.nav-group.collapsed .nav-group-content{display:none}
.nav-item{display:flex;align-items:center;gap:12px;padding:12px 16px;color:rgba(255,255,255,.65);transition:all .2s;border-left:3px solid transparent;white-space:nowrap;position:relative}
.nav-item:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-item.active{background:rgba(233,69,96,.15);color:var(--white);border-left-color:var(--acc)}
.nav-icon{font-size:var(--fs-lg);flex-shrink:0}
.nav-text{font-size:var(--fs);font-weight:500}
.nav-item .badge{flex-shrink:0}
.nav-group-title{position:relative}
.group-badge{position:absolute;right:32px;top:50%;transform:translateY(-50%);z-index:1}
.sidebar-footer{padding:16px;border-top:1px solid rgba(255,255,255,.08)}
.nav-group-title .group-badge{right:32px}
.sidebar-footer .btn-logout{width:100%;padding:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:var(--r-md);color:var(--white);font-size:var(--fs);cursor:pointer;transition:all .2s}
.sidebar-footer .btn-logout:hover{background:rgba(233,69,96,.2);border-color:var(--acc)}
.env-top-banner{display:none;background:linear-gradient(90deg,var(--red),var(--orange));color:var(--white);text-align:center;font-size:var(--fs-sm);font-weight:600;padding:3px 0;letter-spacing:1px}
.env-top-banner.show{display:block}
/* ★ 2026-09-14 P1 授权横幅（对外分发包）：只读=常驻红色不可关 / 即将到期=黄色可关。
   插在 .main-content 内，参与 flex 布局占位（不遮顶部导航、不影响表头吸顶）。 */
.lic-banner{display:none;align-items:center;justify-content:center;gap:10px;padding:7px 16px;font-size:13px;font-weight:600;line-height:1.5;color:#fff;background:#185FA5}
.lic-banner.show{display:flex}
.lic-banner.danger{background:#E24B4A}
.lic-banner.warn{background:#BA7517}
.lic-banner.info{background:#185FA5}
.lic-banner #lic-banner-text{flex:1 1 auto;text-align:center}
.lic-banner .lic-banner-close{flex:0 0 auto;background:transparent;border:1px solid rgba(255,255,255,.55);color:#fff;border-radius:4px;font-size:13px;line-height:1;padding:2px 7px;cursor:pointer;opacity:.9}
.lic-banner .lic-banner-close:hover{opacity:1;background:rgba(255,255,255,.15)}
@media(max-width:768px){.lic-banner{font-size:12px;padding:6px 10px}.lic-banner #lic-banner-text{text-align:left}}
/* 批量操作 */
.batch-bar{display:none;align-items:center;gap:12px;padding:8px 12px;background:var(--blue-lighter);border:1px solid var(--blue-light-bd);border-radius:var(--r-md);margin-bottom:8px;font-size:13px}
.batch-bar.show{display:flex}
.batch-bar .batch-count{font-weight:600;color:var(--blue-dark)}
.batch-bar button{padding:4px 12px;font-size:12px}
/* ★ 2026-09-10：批量操作栏「底部悬浮」——原来批量栏在表格上方、随内容滚走，
   选了下方的复选框还得滚回顶部才能点批量按钮。改为贴屏幕底部的悬浮条，滚到任意位置都能操作。
   与表头吸顶互不干扰（表头 sticky z-index:5/6）；层级见本文件头部「z-index 层级表」——
   页面级浮层（var(--z-batchbar)）**必须低于弹窗**（var(--z-modal)），否则弹窗打开时本浮条会遮住弹窗底部按钮。 */
.batch-bar-fixed{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:var(--z-batchbar);
  align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
  max-width:calc(100vw - 28px);box-sizing:border-box;
  padding:8px 14px;background:var(--blue-lighter);border:1px solid var(--blue-light-bd);
  border-radius:var(--r-md);box-shadow:0 8px 24px rgba(15,23,42,.18);font-size:13px}
.batch-bar-fixed .batch-count{font-weight:600;color:var(--blue-dark)}
.batch-bar-fixed button{padding:4px 12px;font-size:12px}
/* 悬浮条出现时给内容区底部留白，避免遮住最后一行/分页。
   ⚠️ 必须写成 `.content-area.batch-bar-space`（双类）——单类写法会被后面 `.content-area{padding:24px}` 覆盖 */
.content-area.batch-bar-space{padding-bottom:70px}
/* 隐藏列提示徽标（★ 2026-09-10）：紧挨各页「恢复列」按钮右侧；悬停浮层由 JS 定位（body 级 fixed，避免被容器 overflow 裁切） */
.hc-hint{display:none;margin-left:8px;padding:4px 10px;font-size:12px;line-height:1.4;cursor:default;
  background:var(--blue-lighter);color:var(--blue-dark);border:1px solid var(--blue-light-bd);border-radius:var(--r-md);
  white-space:nowrap;user-select:none}
#hc-hint-tip{position:fixed;z-index:var(--z-hint);display:none;background:#fff;border:1px solid #d0d5dd;
  border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.16);padding:10px 12px;font-size:12px;line-height:1.8;
  color:#374151;max-width:300px;word-break:break-all}
/* ★ 2026-09-11：原为 pointer-events:none（纯展示浮层写法）。该面板已升级为可交互（复选框），
   鼠标穿透会导致复选框永远点不到；交互版样式由 app.misc.js 内联显式声明（含 pointer-events:auto）。*/
/* ★ 3.593（帅哥拍板·方案B）：审批「有结果未查看」红点（订单表格视图 收/支格）
   —— 通过/驳回后有结果就亮，点开查看即消（见 app.orders.js 的 _tvApvMarkRead）。
   层级走文件头「z-index 层级表」：本元素为行内元素、不设 z-index，随单元格自然层叠。 */
.tv-apv-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#ef4444;
  margin-right:4px;vertical-align:middle;box-shadow:0 0 0 2px rgba(239,68,68,.18);flex:none}
th input[type="checkbox"]{cursor:pointer;width:16px;height:16px;accent-color:var(--pri)}

/* ===== 主内容区 ===== */
.main-content{margin-left:0;display:block;width:100%;min-height:calc(100vh - var(--topnav-h))}
.content-area{padding:24px;overflow-x:auto;width:100%}

/* ===== 页面标题区 ===== */
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.page-header h2{font-size:var(--fs-xl);font-weight:700;color:var(--text)}
.page-subtitle{font-size:var(--fs);color:var(--text-4);margin-left:8px}
.page-actions{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
.page-actions .search-box{flex:1;min-width:100px;max-width:280px}
.page-actions .search-box input{width:100%}
.page-actions .btn-primary,.page-actions .filter-select{flex-shrink:0}

/* ===== 搜索 & 筛选 ===== */
.search-box input{padding:8px 12px;border:1.5px solid var(--bd);border-radius:var(--r-md);font-size:var(--fs);width:220px;transition:all .2s;background:#fff}
.search-box input:focus{border-color:var(--pri);box-shadow:0 0 0 3px rgba(15,52,96,.1)}
.search-box input:hover{border-color:var(--bd-hover)}
.filter-select{padding:8px 12px;border:1.5px solid var(--bd);border-radius:var(--r-md);font-size:var(--fs);background:var(--white);color:var(--text);cursor:pointer;transition:border-color .2s}
.filter-select:focus{border-color:var(--pri);box-shadow:0 0 0 3px rgba(15,52,96,.1)}

/* ===== 统计卡片 ===== */
/* ★ 2026-09-10（帅哥选 D）：统计卡最小列宽 200→240、数值字号上限 28→24 —— 让金额少降档/不降档。
   配合 window._fitStatValues() 自适应字号，双保险。改列宽会让每行少放一张卡（8 张卡本来就会换行）。 */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-bottom:24px}
.stat-card{background:var(--white);border-radius:var(--r-lg);padding:20px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow-sm);transition:all .2s;border-left:4px solid var(--bd);overflow:hidden}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.stat-icon{font-size:28px;flex-shrink:0}
.stat-info{flex:1;min-width:80px}
.stat-value{font-size:clamp(16px,2.2vw,24px);font-weight:700;line-height:1.2}
.stat-label{font-size:var(--fs-sm);color:var(--text-4);margin-top:4px}
.stat-card.blue{--c:var(--blue)}.stat-card.green{--c:var(--green)}.stat-card.orange{--c:var(--orange)}.stat-card.red{--c:var(--red)}.stat-card.purple{--c:var(--purple)}.stat-card.teal{--c:var(--teal)}
.stat-card.blue,.stat-card.green,.stat-card.orange,.stat-card.red,.stat-card.purple,.stat-card.teal{border-left-color:var(--c)}
.stat-card.blue .stat-value,.stat-card.green .stat-value,.stat-card.orange .stat-value,.stat-card.red .stat-value,.stat-card.purple .stat-value,.stat-card.teal .stat-value{color:var(--c)}
/* 状态卡选中态 */
.stat-card.card-active{border-left-width:4px;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.12)}
.stat-card.card-active.blue{--c:var(--blue);background:var(--blue-lighter)}
.stat-card.card-active.green{--c:var(--green);background:#f0fdf4}
.stat-card.card-active.red{--c:var(--red);background:#fef2f2}
.stat-card.card-active .stat-value{color:var(--c)}
/* 审批中心状态卡 */
.approval-stat-cards{display:flex;gap:16px;margin-bottom:16px;flex-wrap:wrap}
/* ★ 2026-09-10（帅哥要求）：审批中心统计卡最小宽度 160→220 —— 与看板口径一致；
   容器已是 flex-wrap:wrap（放不下自动换行），移动端有 min-width:unset 覆盖，不受影响。 */
.approval-stat-cards .stat-card{flex:1;min-width:220px;cursor:pointer;padding:14px 20px}
.approval-stat-cards .stat-card .stat-icon{font-size:24px}
.approval-stat-cards .stat-card .stat-value{font-size:clamp(18px,2.2vw,24px)}
.approval-stat-cards .stat-card .stat-label{font-size:12px}
/* 美化筛选下拉框 */
.filter-select-beauty{padding:8px 28px 8px 12px;border:1.5px solid var(--bd);border-radius:var(--r-md);font-size:13px;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;-webkit-appearance:none;cursor:pointer;transition:border-color .2s;min-width:120px;color:var(--text);font-family:inherit}
.filter-select-beauty:hover{border-color:var(--pri)}
.filter-select-beauty:focus{border-color:var(--pri);outline:none;box-shadow:0 0 0 2px rgba(59,130,246,.15)}

/* ===== 仪表盘 ===== */
.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.chart-card{background:var(--white);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow-sm)}
.chart-card h3{font-size:var(--fs-md);font-weight:600;color:var(--text);margin-bottom:16px;border-bottom:1px solid var(--divider);padding-bottom:12px}
.bar-chart{display:flex;flex-direction:column;gap:10px}
.bar-item{display:flex;align-items:center;gap:10px}
.bar-label{width:60px;font-size:var(--fs-sm);color:var(--text-2);text-align:right;flex-shrink:0}
.bar-track{flex:1;height:22px;background:var(--bg-disabled);border-radius:var(--r-sm);overflow:hidden}
.bar-fill{height:100%;border-radius:var(--r-sm);transition:width .6s ease;display:flex;align-items:center;padding-left:8px}
.bar-value{font-size:var(--fs-xs);color:var(--white);font-weight:600;white-space:nowrap}
.pie-chart-container{display:flex;align-items:center;justify-content:center;gap:20px}
.pie-legend{display:flex;flex-direction:column;gap:8px}
.pie-legend-item{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--text-2)}
.pie-dot{width:12px;height:12px;border-radius:3px;flex-shrink:0}
.monthly-summary{display:flex;flex-direction:column;gap:12px}
.summary-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--bg-disabled)}
.summary-row:last-child{border-bottom:none}
.summary-label{font-size:var(--fs);color:var(--text-3)}
.summary-value{font-size:var(--fs-lg);font-weight:600}
.summary-value.green{color:var(--green)}.summary-value.red{color:var(--red)}.summary-value.blue{color:var(--blue)}
.renew-list{display:flex;flex-direction:column;gap:8px}
.renew-item{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--r-md);background:var(--bg-input)}
.renew-days{min-width:44px;text-align:center;font-weight:700;font-size:var(--fs-lg)}
.renew-days.urgent{color:var(--red)}.renew-days.warn{color:var(--orange)}.renew-days.ok{color:var(--green)}
.renew-name{flex:1;font-size:var(--fs);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.renew-sales{font-size:var(--fs-sm);color:var(--text-4);flex-shrink:0}

/* ===== 表格 ===== */
.table-container{background:var(--white);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);overflow-x:auto}
.data-table{width:100%;border-collapse:collapse}
.data-table thead tr{background:var(--bg-2)}
.data-table th{padding:10px 8px;text-align:left;font-size:var(--fs-xs);font-weight:600;color:var(--text-3);white-space:nowrap;word-wrap:normal;border-bottom:1px solid var(--bd);border-right:1px solid var(--bd-2);position:relative;user-select:none}
.data-table td{padding:9px 8px;font-size:var(--fs-sm);color:var(--text);border-bottom:1px solid var(--bd-2);border-right:1px solid var(--bd-2);vertical-align:middle;max-width:150px;word-wrap:break-word;overflow-wrap:break-word}
.data-table td:last-child,.data-table th:last-child{border-right:none}
.data-table tr:last-child td{border-bottom:none}
.data-table tbody tr{transition:background .15s}
.data-table tbody tr:hover td{background:#f8faff}
.data-table tr.dup-row td{background:var(--red-bg)!important}
.data-table tr.dup-row:hover td{background:#ffd8d8!important}
/* ★ 2026-09-17 表格单元格框选 + 选中统计（配套 app.tablesel.js；Excel/WPS 式交互）
   注：选择器带 .data-table 前缀是为了在特异性上压过 tr.dup-row / tr:hover 的背景覆盖 */
.data-table.ts-on td{user-select:none;-webkit-user-select:none;cursor:cell}
.data-table.ts-on td.ts-sel{background:var(--blue-bg)!important;box-shadow:inset 0 0 0 1px var(--blue-bd)}
.data-table.ts-on td.ts-anchor{outline:2px solid var(--blue);outline-offset:-2px}
.ts-bar{position:fixed;right:12px;bottom:14px;z-index:var(--z-selbar);display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--white);border:1px solid var(--bd-strong);border-radius:var(--r-lg);box-shadow:0 8px 24px rgba(15,52,96,.16);font-size:12px;color:var(--text);max-width:min(860px,88vw)}
.ts-bar-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.ts-bar-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ts-bar-name{color:var(--text-3);font-weight:600;white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.ts-bar-v{color:var(--text-2);white-space:nowrap}
.ts-bar-v b{color:var(--blue);font-weight:700;font-size:13px}
.ts-bar-dim{color:var(--text-3)}
/* ★ 2026-09-17（3.519）列选择（WPS 式）：表头上方向下箭头 + 选中列高亮（配套 app.tablesel.js） */
.ts-head-btn{position:fixed;display:none;z-index:var(--z-colshead);width:18px;height:15px;padding:0;line-height:1;
  border:1px solid var(--blue-bd);border-radius:3px;background:var(--blue-bg);color:var(--blue);
  font-size:9px;text-align:center;cursor:pointer;box-shadow:0 1px 3px rgba(15,52,96,.18);user-select:none}
.ts-head-btn:hover{background:#dbeafe;border-color:var(--blue)}
.ts-head-btn-on{background:var(--blue)!important;color:#fff!important;border-color:var(--blue)!important}
#orders-table-view thead th.ts-colhead{background:#dbeafe!important;color:var(--blue)!important}
#orders-table-view td[rowspan] .act-btn{flex:none}
/* ★ 2026-09-17（3.521）表格视图操作列：删除 / 解锁的**多选弹框**（弹窗内下拉选择器为公用 form-group 样式） */
.tv-multi-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;
  padding:6px 8px;background:#f8fafc;border-radius:6px;margin-bottom:6px}
.tv-multi-hd label{cursor:pointer;display:flex;align-items:center;gap:5px}
.tv-multi-count{color:var(--text-3);font-size:12px}
.tv-multi-list{max-height:44vh;overflow:auto;border:1px solid #eef2f7;border-radius:6px;padding:4px}
.tv-multi-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:5px;font-size:12px;
  color:var(--text);cursor:pointer;border-bottom:1px solid #f6f8fb}
.tv-multi-row:last-child{border-bottom:0}
.tv-multi-row:hover{background:var(--blue-bg)}
.tv-multi-off{cursor:not-allowed;opacity:.65}
.tv-multi-off:hover{background:transparent}
.tv-multi-bn{font-weight:600;color:var(--blue);flex:none}
.tv-multi-bt{color:var(--text-3);flex:none}
.tv-multi-why{margin-left:auto;color:#b45309;font-size:11px;text-align:right;max-width:46%}
/* ★ 2026-09-17（3.523）：删除/解锁多选框列表里补「单位名称」（与子订单下拉同一份文案口径） */
.tv-multi-co{color:var(--text-3);flex:none;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ★ 2026-09-17（帅哥反馈⑤"只有按钮没有名称，非常不容易读"）：
   表格视图操作按钮 —— app.css 里原本**没有 .act-btn 基础规则**（只有树形视图的 .td-actions 那份），
   所以表格视图的按钮一直是浏览器默认样式；此处补基础样式 + 配色，并把文字标签一起显示。 */
#orders-table-view .act-btn{display:inline-flex;align-items:center;justify-content:center;gap:2px;height:20px;
  padding:0 5px;border:1px solid transparent;border-radius:4px;font-size:10px;line-height:1;cursor:pointer;
  white-space:nowrap;background:#f1f5f9;color:#334155;transition:background .15s}
#orders-table-view .act-btn:hover{background:#e2e8f0}
#orders-table-view .act-btn:disabled{opacity:.45;cursor:not-allowed}
#orders-table-view .act-green{background:#dcfce7;color:#166534}
#orders-table-view .act-green:hover{background:#bbf7d0}
#orders-table-view .act-blue{background:#dbeafe;color:#1e40af}
#orders-table-view .act-blue:hover{background:#bfdbfe}
#orders-table-view .act-orange{background:#ffedd5;color:#9a3412}
#orders-table-view .act-orange:hover{background:#fed7aa}
#orders-table-view .act-red{background:#fee2e2;color:#991b1b}
#orders-table-view .act-red:hover{background:#fecaca}
#orders-table-view .act-gray{background:#e2e8f0;color:#334155}
#orders-table-view .act-gray:hover{background:#cbd5e1}
/* ★ 2026-09-17（帅哥反馈①"按钮已经超出操作列了"）：
   根因＝`.data-table td{max-width:150px}` 会把操作格截断（按钮往外溢）。
   操作列是**最后一列** → 这里放开宽度上限，并把按钮排紧（2 行 3 列即可容纳，不换到第 3 行）。 */
/* ★ 3.545（帅哥要求④："子订单的 4 个按钮和母订单的 4 个按钮好像还是没对齐大小和位置"）：
   3.544 只对齐了**格子的内边距**（= 按钮的起点），但两组按钮的**文字长度不同** ⇒ 按钮宽度不同
   （母单行第 3 个是「💰收/支」更宽，子订单行是「⇄换址」）⇒ 第 2/3/4 个按钮的起点与终点全都错位，
   在一条竖列上看就是"没对齐大小和位置"。
   ⇒ 改法：按钮组用**等宽网格**（每个按钮占一格，大小一致、逐列对齐）。
   · 用 `minmax(0,1fr)` 而**不是** `1fr`：`1fr` 的最小宽度是 auto，长文字会把列撑开、彼此又不等宽（等于没改）。
   · 只有 3 个按钮的那一行（0 个子订单的占位行）**末尾槽留空** —— 前几个按钮的位置与其它行一致，反而更整齐。
   · 按钮统一 nowrap + 溢出裁切：最大字号档下也不换行、不撑破列。
   🔴 3.679（帅哥拍板）：**4 列 → 2 列**（原话"允许换两行，一行 2 个按钮"）。
     为什么：为"一排放下 4 个"，操作列曾必须留 210px+ ⇒ 整表被撑宽、别的列被挤；
     改 2 列后操作列只需 ~170px（`app.html` 的表头 width 已同步下调 250 → 170），
     按钮反而**更大更好点**。母单行 4 个 / 子订单行 4 个 / 0 子订单占位行 3 个 ⇒ 固定 2 行，行数不再跳变。
     ⚠️ 作用域严格限定 `#orders-table-view` —— **地址表 / 续费表的 `.td-actions` 不受影响**
     （它们仍走 `.data-table td.td-actions{min-width:300px}` 的一排 5 个）。
     ⚠️ 日后按钮数量变化，`app.html` 里操作列的 `width` 要跟着调（当前 170px）。 */
#orders-table-view .tv-ops-wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 4px}
#orders-table-view .tv-ops-wrap .act-btn{min-width:0;overflow:hidden;text-overflow:ellipsis;padding:0 3px}
#orders-table-view td:last-child{max-width:none;white-space:normal}
/* ★ 3.679（帅哥要求②）：表格视图「备注」列 —— 默认只显示 2 行，超出才出现「展开 / 收起」。
   · 两行截断**复用**上面的 `.tv-clamp2`（口径只此一份，禁再写第二份两行截断规则）；
     这里只加两个配套件：展开态变体 + 按钮样式。
   · 展开必须把 `display` 显式改回 `block` 并清掉 `-webkit-line-clamp` ——
     只清 line-clamp 不够（`-webkit-box` 仍会按盒子模型裁切）。
   · 按钮显隐由 JS **实测**决定（`window._rkSyncMore`：`scrollHeight > clientHeight` 才显示），
     默认 `display:none` ⇒ 备注短的行一个多余按钮都不会出现。 */
#orders-table-view .tv-clamp2.rk-open{display:block;-webkit-line-clamp:unset;overflow:visible}
#orders-table-view .rk-more{display:none;margin-top:2px;font-size:calc(10px * var(--tvfs));line-height:1.3;
  color:#1d4ed8;text-decoration:none;border-bottom:1px dashed #93c5fd;cursor:pointer;white-space:nowrap}
#orders-table-view .rk-more:hover{color:#1e40af;border-bottom-style:solid}
/* ★ 2026-09-17（帅哥要求⑥）：单位名称 / 地址最多两行（超出省略号，悬停看全文）
   ★ 3.531（帅哥要求④）：**去掉 `max-height:2.7em`** —— `line-height:1.35` 时 2 行正好 2.7em、零余量，
   浏览器亚像素取整会把第二行下缘切掉（"两行时挡住文字"）。截断交给 `-webkit-line-clamp` 自己算，行高放宽到 1.45。
   🔴 教训：这里**只能有一份** `.tv-clamp2` 规则 —— 3.531 我第一次只加了新规则、没删旧规则，
   旧规则在文件更靠后 ⇒ 覆盖新规则 ⇒ "改了没生效"（是验证脚本的样式断言抓出来的）。 */
#orders-table-view .tv-clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;white-space:normal;word-break:break-word;line-height:1.45;text-align:left}
/* ★ 3.536（帅哥拍板 B）：子订单行的「母订单编号 / 业务员 / 客户昵称」补**浅灰小字** ——
   信息由上方母单行承载（避免同一编号在一屏里出现两处），这里只做"看得见但弱化"，且**不可编辑**
   （编辑入口统一在母单行，避免两处都能改同一个值）。 */
#orders-table-view .tv-sub-gray{color:#9ca3af;font-size:11px;line-height:1.3}
/* ★ 2026-09-17：组首汇总条 —— 与表格列**逐列对齐**（有几个可见列就几个格子，不再算 colspan） */
#orders-table-view tr.tv-grp-bar>td{background:#f8fafc;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);
  padding:5px 8px;font-size:12px;color:#475569;vertical-align:middle}
#orders-table-view tr.tv-grp-bar .tv-grp-caret{text-align:center;padding:2px 2px}
#orders-table-view tr.tv-grp-bar .tv-grp-td{font-weight:600}
#orders-table-view tr.tv-grp-bar .tv-grp-bn{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;word-break:break-word;line-height:1.45}
#orders-table-view tr.tv-grp-bar .tv-grp-bn a{color:var(--blue);text-decoration:underline;font-weight:700}
#orders-table-view tr.tv-grp-bar .tv-grp-cnt{display:inline-block;margin-left:4px;padding:0 4px;border-radius:4px;
  background:#e2e8f0;color:#475569;font-size:10px;font-weight:600}
/* ★ 3.529（帅哥反馈③④）：**金额列改左对齐** —— 3.528 时汇总条右对齐、子订单行左对齐（不一致），
   我把子订单行也改右后又与"其余列都是左对齐"不统一。帅哥拍板**全部左对齐**。
   注：数字右对齐更便于对位数；将来若要改回，把下面一条的 left 改成 right 即可。 */
#orders-table-view tr.tv-grp-bar .num-income,#orders-table-view tr.tv-grp-bar .num-cost,
#orders-table-view tr.tv-grp-bar .num-profit{text-align:left}
/* ★ 3.529（帅哥反馈④）：**表头统一左对齐** —— 右下角的筛选倒三角是绝对定位（right:6px），
   表头居中/右对齐时文字会撞到它；左对齐后文字靠左、倒三角独享右侧。
   首列（勾选框）与末列（操作）保持原样；订单树形视图一并统一（同一页、切换视图不该变口径）。 */
#orders-table-view thead th:not(:first-child):not(:last-child),
#orders-tree-view thead th:not(:first-child):not(:last-child){text-align:left!important}
/* ★ 3.531（帅哥要求⑧）：**全站表头统一左对齐**。
   范围＝**参与筛选/排序的列 = `th[data-col]`** —— 这才是"要给筛选倒三角腾空间"的准确范围
   （筛选倒三角 `.fp-indicator` 是绝对定位在右下角，表头居中/右对齐时文字会撞上去）。
   **不带 `data-col` 的列保持原样**：勾选框列、序号列、操作列、截图/附件类（居中）。
   订单页两视图继续走上面那条更宽的规则（它们所有数据列都左对齐）。 */
.data-table thead th[data-col]{text-align:left!important}
/* ★ 3.544（帅哥实测"同样都是 4 个按钮，位置却没对齐"）：根因＝母单行的操作格内边距 `3px 4px`，
   而数据行的操作格走 `.data-table td{padding:9px 8px}` ⇒ 母单行的按钮**整体偏左上（横向 4px、纵向 6px）**，
   同一列上下两行的按钮不在一条线上，看起来就是"没对齐"（按钮本身是同一份 HTML + 同一份 CSS，不可能自己有差异）。
   修法：与数据行**取同一个值**。⚠️ 不要反向去改 `.data-table td` —— 那是全站 7 张表共用的内边距。
   🔴 以后想让汇总条的按钮"再紧一点"，也必须让这里与 `.data-table td` 保持一致，
      否则错位会重新出现，而且**不报错**、只能靠肉眼发现。 */
#orders-table-view tr.tv-grp-bar .tv-grp-ops{padding:9px 8px}
#orders-table-view tr.tv-grp-bar.tv-grp-closed>td{background:#eef2f7}
#orders-table-view tr.tv-grp-bar.tv-grp-closed .tv-grp-bn a{color:var(--text-3)}
/* ★ 3.533（帅哥拍板）：鼠标停在表格视图某一组订单上 → **整组联动高亮**
   （组内所有子订单行 + 母单行一起变亮），由 window._tvHoverGroup 打/摘 .tv-hover（唯一入口）。
   选择器带 #orders-table-view + tbody ⇒ 特异性高于单行 hover（.data-table tbody tr:hover td）与
   折叠组底色（tr.tv-grp-closed>td），展开/收起两种状态都能覆盖，因此**不需要 !important**；
   框选高亮（.ts-on td.ts-sel）自带 !important，优先级更高，不会被我这条盖掉。 */
#orders-table-view tbody tr.tv-hover>td{background:#fff3e6}
#orders-table-view tbody tr.tv-grp-bar.tv-hover>td{background:#ffe8d1}
/* ★ 2026-09-17（帅哥要求②）：收款 / 支出申请弹窗首屏的切换条（默认选中收款） */
.apply-kind-tabs{display:flex;gap:6px;margin:0 0 12px;padding:4px;background:#f1f5f9;border-radius:8px}
.apply-kind-tab{flex:1;text-align:center;padding:7px 10px;border-radius:6px;font-size:13px;font-weight:600;
  color:#64748b;cursor:pointer;transition:background .15s,color .15s}
.apply-kind-tab:hover{background:#e2e8f0}
.apply-kind-tab.on{background:var(--white);color:var(--blue);box-shadow:0 1px 3px rgba(15,52,96,.12)}
.ts-bar-tip{color:var(--text-3);font-size:11px}
.ts-bar-acts{display:flex;align-items:center;gap:6px;flex-shrink:0}
.ts-bar-btn{padding:4px 10px;font-size:12px;border:1px solid var(--bd-strong);background:var(--bg-input);color:var(--text-2);border-radius:var(--r-md);cursor:pointer;white-space:nowrap}
.ts-bar-btn:hover{border-color:var(--blue);color:var(--blue)}
.ts-bar-x{padding:4px 8px}
.th-sort{cursor:pointer}
.th-sort:hover{color:var(--pri)}
.data-table th{cursor:pointer;position:relative;padding-right:20px}
.data-table th .fp-indicator{position:absolute;right:6px;bottom:5px;width:16px;height:16px;border-radius:3px;background:transparent;display:inline-flex;align-items:center;justify-content:center;transition:all .2s}
.data-table th .fp-indicator::after{content:'';width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--bd-hover);transition:all .2s}
.data-table th:hover .fp-indicator::after{border-top-color:var(--text-3)}
.data-table th .fp-indicator.active{background:var(--blue)}
.data-table th .fp-indicator.active::after{border-top-color:#fff}
.data-table th:hover .fp-indicator.active{background:var(--pri)}
.data-table th .fp-indicator.sort-asc::after{border-top:none;border-bottom:5px solid var(--blue)}
.data-table th .fp-indicator.sort-desc::after{border-top:5px solid var(--blue)}
.data-table th .fp-indicator.sort-asc.active::after,.data-table th .fp-indicator.sort-desc.active::after{border-top-color:#fff}
.data-table th .fp-indicator.sort-asc.active::after{border-top:none;border-bottom:5px solid var(--white)}
/* ★ 3.672（帅哥拍板·方案B）：操作列**全局允许换行** —— 原为 `white-space:nowrap`，
   “按钮多”的页（订单树形 6 个 / 地址 5 个）被它撑到 400px+，把整表撑宽、按钮挤出可视区。
   改为 normal：容器够宽仍单行，不够时自动折行，不再撑宽整表。
   ⚠️ 口径只此一处 —— 各页**禁止**再写 `.td-actions{white-space:...}` 覆盖（会重新分裂成两套）。
   ⚠️ 移动端另有 `td.td-actions{white-space:nowrap!important}`（靠横向滚动看全列，见下方 @media 段），
      那是**独立设计**，与本条不冲突、未改。 */
.td-actions{white-space:normal;vertical-align:middle}.td-actions button{margin:0 2px;vertical-align:middle}
/* ★ 2026-09-08：备注列与操作列之间强视觉分隔（表头 th.td-actions-h / 行 td.td-actions 左侧加深边线），
   防表格横向溢出滚动时两列边界不清 */
.data-table th.td-actions-h,.data-table td.td-actions{border-left:1px solid var(--bd)}
/* ★ 2026-08-24 图标操作按钮：统一尺寸/圆角/hover，操作列整齐（替代五颜六色大小不一的长条按钮） */
.td-actions .act-btn{width:26px;height:26px;padding:0;border:none;border-radius:6px;font-size:13px;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;background:#f1f5f9;transition:background .15s,transform .1s}
.td-actions .act-btn:hover{transform:translateY(-1px)}
.td-actions .act-green:hover{background:#d1fae5}
.td-actions .act-blue:hover{background:#dbeafe}
.td-actions .act-red:hover{background:#fee2e2}
.td-actions .act-orange:hover{background:#ffedd5}
.td-actions .act-gray:hover{background:#e2e8f0}
.td-actions .act-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.td-actions .act-btn+.act-btn{margin-left:2px}
/* 操作列：shrink-to-fit，不吸收多余空间 */
/* ★ 3.674（帅哥二次实测：「依旧放不下、依旧很宽」）：改回**下限**并给足 300px。
   🔴 机理：本列一旦允许换行，就成了“**可压缩列**”（min-content 很小）——
   表格总宽超出容器时，浏览器会**优先压它** ⇒ 按钮叠罗汉。
   上一版用 `max-width` 是无效的：auto 表布局下 max-width **管不住“被压到多小”**（只管上限）。
   ✅ 只有 `min-width` 能保证“至少多宽”。
   300px = 一排放下「详情 / 编辑 / 删除 / 清空 / 收·支」5 个按钮（约 266px）+ 余量。
   ⚠️ 日后按钮数量/字号档变化，这个值要跟着调。
   `width:1px` 是 shrink-to-fit（本列不吸收多余空间），**保留**。 */
.data-table td.td-actions{max-width:none;width:1px;min-width:300px}
/* 操作列表头——始终不换行，shrink-to-fit */
.data-table th:last-child{white-space:nowrap;width:1px}

/* 列宽提示——超长内容列可放宽 */
.data-table td.col-wide{max-width:200px}
/* 短列——序号、复选框等 */
.data-table td.col-narrow{max-width:55px}
/* 短内容列——强制单行不换行（地址表/续费表等宽表） */
.data-table td.col-nowrap{white-space:nowrap}
/* 长文本列——最多 2 行省略，悬停看全（td 内包 .cell-clamp div，兼容 table-layout:auto） */
.data-table td.col-clamp{overflow:hidden}
.data-table td.col-clamp .cell-clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;max-width:100%}
/* ===== 3.635（帅哥需求⑤）：续费提醒行内编辑输入框 =====
   注意：本条注释里不出现任何注释起止标记（3.626 的教训：正文里写标记会把注释提前闭合，
   导致紧随其后的规则被解析器当成选择器的一部分而整条失效）。 */
.renew-ed-input{width:100%;min-width:70px;box-sizing:border-box;padding:2px 4px;font-size:12px;
  font-family:inherit;color:var(--text);background:var(--white);border:1px solid var(--pri);
  border-radius:4px;outline:none}
.renew-ed-input:focus{box-shadow:0 0 0 2px rgba(233,69,96,.15)}


/* 列值样式 */
.num-profit{color:var(--green);font-weight:600}
.num-cost{color:var(--red);font-weight:600}
.num-exp{color:var(--orange);font-weight:600}
.num-income{color:var(--blue);font-weight:600}

/* 子订单折叠 */
/* ★ 2026-09-07：cursor:default——整行不再可点击展开（只由行首 caret 触发），避免"行可点"误导 */
.order-parent-row{background:var(--bg-row);cursor:default;transition:background .1s}
.order-parent-row:hover{background:var(--bg-row-hover)}
/* ★ 2026-09-02：置顶母订单行浅蓝加深（比默认 #fafbfc 深一档，与未收款左侧橙条并存） */
.order-parent-row.pinned{background:#e9f0ff}
.order-parent-row.pinned:hover{background:#dde9ff}
.order-child-row td{padding:7px 8px!important;font-size:var(--fs-sm);background:var(--white);max-width:none;word-wrap:break-word;overflow-wrap:break-word}
.order-child-row:hover td{background:var(--bg-row-alt)}
.order-sub-header td{padding:6px 8px!important;font-size:var(--fs-xs);font-weight:600;color:var(--text-3);background:var(--bg-subheader)!important;border-bottom:1px solid var(--bd-2)!important;white-space:normal;word-wrap:break-word}
.order-sub-header:hover td{background:var(--bg-subheader)!important}
.order-child-row input{width:100%!important;min-width:60px;box-sizing:border-box;border:1px solid var(--bd)!important;border-radius:3px;padding:2px 4px;font-size:var(--fs-sm);background:#fff}
.order-child-row input:focus{border-color:var(--pri)!important;box-shadow:0 0 0 2px rgba(15,52,96,.1)!important}
.caret-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:var(--r-sm);background:var(--divider);border:none;cursor:pointer;font-size:var(--fs-sm);color:var(--text-3);transition:all .15s;margin-right:4px;flex-shrink:0;vertical-align:middle}
.caret-btn:hover{background:var(--bd);color:var(--text)}
.caret-btn .caret-icon{display:inline-block;transition:transform .2s}
.caret-btn.collapsed .caret-icon{transform:rotate(-90deg)}
/* ★ 3.531（帅哥要求⑤）：**只在"已展开"状态上色** —— 展开态（可点它收起）用与「筛选已生效」同款的
   var(--blue) #1890ff 实心块 + 白箭头；**收起态（▶）保持原来的浅灰**（帅哥原话："没展开的倒三角不要显示颜色"）。
   两个视图同一条判据：树形视图 `caret-btn collapsed`＝收起；表格视图汇总条同理。 */
#page-orders .caret-btn:not(.collapsed){background:var(--blue);color:#fff}
#page-orders .caret-btn:not(.collapsed):hover{background:var(--pri);color:#fff}
/* ★ 3.531（帅哥要求④）：**两行文字被挡**的根因＝`line-height:1.35` + `max-height:2.7em` 正好 2 行、
   没有任何余量 → 浏览器亚像素取整就把第二行下缘切掉。这里**去掉 max-height**（截断交给
   `-webkit-line-clamp` 自己算）并把行高放宽到 1.45，两行有呼吸空间。 */
/* ⚠️ 3.536 清理：这里原来**又写了一份** `#orders-table-view .tv-clamp2`（与文件上方 522 行那份完全重复，
   后写覆盖先写 —— 正是"改了没生效"的经典成因）。规则只保留上方那一份（带完整说明），此处留注释防再犯。 */
#orders-table-view tr.tv-grp-bar .tv-grp-bn{line-height:1.45}
/* ★ 3.530：表格视图「双击行内编辑」——可编辑单元格的轻提示 + 行内输入框 */
#orders-table-view [data-edit]{cursor:text}
#orders-table-view [data-edit]:hover{background:var(--blue-bg);box-shadow:inset 0 0 0 1px rgba(24,144,255,.45);border-radius:3px}
#orders-table-view .tv-ed-input{width:100%;max-width:180px;padding:2px 5px;font-size:var(--fs-sm);font-family:inherit;
  border:1px solid var(--blue);border-radius:4px;background:var(--white);color:var(--text);box-sizing:border-box}
#orders-table-view .tv-ed-input:focus{outline:none;box-shadow:0 0 0 2px rgba(24,144,255,.18)}
/* ★ 3.531（帅哥要求③）：客户昵称的「客户选择器」浮层（下拉选择 + 可就地新增客户） */
.tv-cust-pop{position:fixed;z-index:var(--z-tablepop);width:320px;max-height:360px;overflow:auto;background:var(--white);
  border:1px solid var(--bd-strong);border-radius:8px;box-shadow:0 8px 24px rgba(15,52,96,.2);font-size:12px}
.tv-cust-hd{display:flex;align-items:center;gap:6px;padding:6px 8px;border-bottom:1px solid #eef2f7}
.tv-cust-q{flex:1;min-width:0;padding:4px 6px;font-size:12px;font-family:inherit;border:1px solid var(--bd-strong);
  border-radius:5px;box-sizing:border-box}
.tv-cust-q:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 2px rgba(24,144,255,.15)}
.tv-cust-cur{flex:none;color:var(--text-3);font-size:11px;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tv-cust-tip{padding:6px 10px;border-bottom:1px dashed #e5e7eb;color:var(--blue);font-weight:600;cursor:pointer}
.tv-cust-tip:hover{background:var(--blue-bg)}
.tv-cust-empty{padding:8px 10px;color:var(--text-3)}
.tv-cust-list{max-height:220px;overflow:auto}
.tv-cust-it{display:flex;align-items:center;gap:6px;padding:6px 10px;cursor:pointer;border-bottom:1px solid #f3f4f6}
.tv-cust-it:hover{background:#f3f4f6}
.tv-cust-cur-row,.tv-cust-it.tv-cust-cur{background:var(--blue-bg)}
.tv-cust-nn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tv-cust-co{flex:none;color:var(--text-3);font-size:11px;max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tv-cust-amt{flex:none;font-size:11px;color:var(--text-3);min-width:52px;text-align:right}
.tv-cust-create{padding:8px 10px;border-top:1px solid #eef2f7;background:#fafafa}
.tv-cust-cr-hd{font-weight:600;color:#334155;margin-bottom:6px}
.tv-cust-create label{display:flex;flex-direction:column;gap:3px;color:var(--text-3);margin-bottom:5px}
.tv-cust-create input{padding:5px 7px;font-size:12px;font-family:inherit;border:1px solid var(--bd-strong);border-radius:5px;box-sizing:border-box}
.tv-cust-create input:focus{outline:none;border-color:var(--blue)}
.tv-cust-cr-btns{display:flex;gap:8px;margin-top:6px}
.tv-cust-cr-btns button{padding:5px 12px;border-radius:6px;font-size:12px;cursor:pointer;font-family:inherit}
#tvc-save{background:var(--blue);color:#fff;border:none}
#tvc-save:disabled{opacity:.6;cursor:not-allowed}
#tvc-cancel{background:var(--white);color:#555;border:1px solid var(--bd-strong)}
/* ★ 3.532（帅哥要求⑤A）：地址格的**轻量小菜单**（不弹窗）—— 地址类那一格单击弹出：
   「📋 打开地址管理」/「⇄ 修改地址（换址申请）」。位置与"关闭时机"由 _tvPop 统一管。 */
.tv-addr-menu{position:fixed;z-index:var(--z-tablepop);min-width:192px;background:var(--white);border:1px solid var(--bd-strong);
  border-radius:8px;box-shadow:0 8px 24px rgba(15,52,96,.2);padding:4px}
.tv-addr-mi{display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;padding:7px 10px;
  border-radius:6px;font-size:12px;color:var(--text);white-space:nowrap;font-family:inherit}
.tv-addr-mi:hover{background:var(--blue-bg)}
.tv-addr-link{color:#1d4ed8;cursor:pointer;text-decoration:underline;text-decoration-color:#93c5fd;text-underline-offset:2px}
/* ============================================================================
   ★ 2026-09-18（帅哥拍板）订单表格视图「收款 / 支出」的逐笔明细样式
   两个用处：① 格内一行小字（最近一笔的 日期·账号尾号）+「N笔 ▾」入口
             ② 点击「N笔」弹出的**逐笔明细浮层**（走统一的 _tvPop 定位：z-index 与 .tv-addr-menu 同档）
   字号全部跟随表格字号三档 --tvfs，与全表一致（改字号时浮层一起缩放）
   ============================================================================ */
.tv-pe-mini{font-size:calc(11px * var(--tvfs));color:#94a3b8;line-height:1.35;white-space:nowrap}
.tv-pe-more{display:inline-block;font-size:calc(10px * var(--tvfs));line-height:1.3;color:#1d4ed8;
  text-decoration:none;border-bottom:1px dashed #93c5fd;white-space:nowrap;cursor:pointer}
.tv-pe-more:hover{color:#1e40af;border-bottom-style:solid}
.tv-pe-pop{position:fixed;z-index:var(--z-tablepop);min-width:330px;max-width:min(560px,92vw);max-height:60vh;overflow:auto;
  background:var(--white);border:1px solid var(--bd-strong);border-radius:8px;box-shadow:0 8px 24px rgba(15,52,96,.2)}
.tv-pe-hd{padding:8px 10px;font-size:12px;font-weight:600;color:var(--text);
  border-bottom:1px solid var(--bd);position:sticky;top:0;background:var(--white);z-index:1}
.tv-pe-tb{width:100%;border-collapse:collapse;font-size:calc(12px * var(--tvfs))}
.tv-pe-tb th{padding:5px 8px;text-align:left;font-weight:600;color:#64748b;background:#f8fafc;
  font-size:calc(11px * var(--tvfs));border-bottom:1px solid var(--bd)}
.tv-pe-tb td{padding:5px 8px;color:var(--text);border-bottom:1px solid #f1f5f9}
.tv-pe-tb tr:last-child td{border-bottom:0}
.tv-pe-ft{padding:6px 10px;font-size:calc(11px * var(--tvfs));color:#64748b;background:#f8fafc}
/* ★ 2026-09-18（帅哥拍板）：行右键时给"正在右键的那一行"加**外圈边框**（提示这次动的是哪一行）。
   实现：用 td 的 inset 阴影拼出四边 —— **不动 border**（不会触发表格重排/列宽跳动），
   也不占用 td 自身的 box-shadow 背景用途（表格视图的 td 目前没有别的阴影）。
   左右两边只在首/末格画，中间格只画上下 ⇒ 看起来是**整行一个外框**，而不是"每格一个框"。
   范围：只挂订单表格视图（其余表的 td 可能有自己的阴影，避免打架）。 */
#orders-table-view tr.tv-row-ctx>td{box-shadow:inset 0 2px 0 #3b82f6,inset 0 -2px 0 #3b82f6}
#orders-table-view tr.tv-row-ctx>td:first-child{box-shadow:inset 2px 0 0 #3b82f6,inset 0 2px 0 #3b82f6,inset 0 -2px 0 #3b82f6}
#orders-table-view tr.tv-row-ctx>td:last-child{box-shadow:inset -2px 0 0 #3b82f6,inset 0 2px 0 #3b82f6,inset 0 -2px 0 #3b82f6}
.order-bn-tag{font-family:'Consolas','Courier New',monospace;background:var(--bg-disabled);border:1px solid var(--bd);padding:1px 8px;border-radius:var(--r-sm);font-size:var(--fs-sm);color:var(--text-2)}
.biz-count-tag{display:inline-block;background:var(--blue-bg);color:var(--blue);padding:1px 8px;border-radius:10px;font-size:var(--fs-xs);font-weight:600;margin-left:6px}

/* 列宽拖拽 */
.resizable-table th,.resizable-table td{position:relative;overflow:hidden}
.resizable-table th .col-resizer,.resizable-table td .col-resizer{position:absolute;right:0;top:0;bottom:0;width:6px;cursor:col-resize;background:transparent;z-index:1}
.resizable-table th .col-resizer:hover,.resizable-table td .col-resizer:hover{background:rgba(16,185,129,.3)}
.resizable-table th .col-resizer.dragging{background:rgba(16,185,129,.5)}
.col-resizer{position:absolute;top:0;right:0;width:5px;height:100%;cursor:col-resize;z-index:2;background:transparent}
.col-resizer::after{content:'';position:absolute;right:1px;top:15%;height:70%;width:2px;background:var(--gray-300);border-radius:1px;transition:all .2s}
.col-resizer:hover::after,.col-resizer.active::after{background:var(--blue);width:3px}
.sub-col{position:relative}
/* ★ 2026-09-11：分隔线保留（区分列），但光标改回默认——子列并**没有**对应拖拽实现，
   原 cursor:col-resize 只是"看起来能拖"的误导（帅哥反馈"还能拖动"）。 */
.suborder-header .sub-col::after{content:'';position:absolute;right:0;top:25%;height:50%;width:4px;background:transparent;border-right:1px solid var(--gray-300);cursor:default;transition:all .2s}
.suborder-header .sub-col:hover::after{background:var(--gray-400);border-right-color:var(--text-3)}
.suborder-header .sub-col[data-col="action"]::after{display:none}
/* ★ 2026-09-11 修复：去掉子订单表头行 td 的右边框——它是跨列整行容器，右边缘即表格最右端，
   在「操作」列右边多画一条分隔线（帅哥反馈）；该 td 的拖拽手柄也已移除（见 app.core.js）。 */
.order-sub-header td{position:relative;border-left:1px solid #d9dce1!important}
.order-child-row td{border-right:1px solid var(--bd-2)!important;border-left:1px solid var(--bd-2)!important}
.order-parent-row td{border-right:1px solid var(--bd-2)!important;border-left:1px solid var(--bd-2)!important}

/* ===== 筛选面板 ===== */
.filter-popup{position:fixed;z-index:var(--z-pagepop);background:var(--white);border:1px solid var(--gray-300);border-radius:var(--r-md);box-shadow:var(--shadow-lg);width:260px;font-size:var(--fs-sm);user-select:none;max-height:70vh;overflow-y:auto}
.fp-search{padding:8px;border-bottom:1px solid var(--divider)}
.fp-search input{width:100%;padding:6px 8px;border:1px solid var(--bd);border-radius:var(--r-sm);font-size:var(--fs-sm);box-sizing:border-box;outline:none}
.fp-search input:focus{border-color:var(--pri)}
.fp-sort-btns{display:flex;gap:4px;margin-top:6px}
.fp-sort-btn{flex:1;font-size:11px;padding:3px 8px;border:1px solid var(--gray-300);border-radius:var(--r-sm);background:var(--white);cursor:pointer;white-space:nowrap;font-family:inherit;color:var(--gray-700)}
.fp-sort-btn:hover{background:var(--divider)}
.fp-sort-btn.active{background:var(--pri);color:var(--white);border-color:var(--pri)}
.fp-actions{display:flex;gap:4px;padding:6px 8px;border-bottom:1px solid var(--divider);flex-wrap:wrap}
.fp-actions label{display:flex;align-items:center;gap:4px;font-size:var(--fs-sm);cursor:pointer;padding:2px 6px;border-radius:var(--r-sm);background:var(--bg-disabled);white-space:nowrap}
.fp-actions label:hover{background:#e8e8e8}
.fp-actions button{font-size:var(--fs-xs);padding:3px 8px;border:1px solid var(--gray-300);border-radius:var(--r-sm);background:var(--white);cursor:pointer;white-space:nowrap;font-family:inherit}
.fp-actions button:hover{background:var(--divider)}
.fp-list{max-height:260px;overflow-y:auto;padding:2px 0}
.fp-list label{display:flex;align-items:center;gap:6px;padding:4px 8px;cursor:pointer;font-size:var(--fs-sm);transition:background .15s}
.fp-list label:hover{background:#f0f6ff}
.fp-list label .fp-count{color:var(--text-4);font-size:var(--fs-xs);margin-left:auto}
/* ★ 2026-09-15：选项行「仅筛选此项」——对齐 WPS：整行只占一行，鼠标悬停该行时右端浮出绿色按钮。
   按钮 position:absolute 不占布局（避免出现两行/抖动），悬停时覆盖在条数之上，移开即恢复可见。 */
.fp-row{position:relative;display:flex;align-items:center}
.fp-row>label{flex:1;min-width:0}
.fp-row:hover{background:#f0f6ff}
.fp-row>.fp-only{display:none;position:absolute;right:6px;top:50%;transform:translateY(-50%);background:#1D9E75;color:#fff;border:none;border-radius:3px;font-size:11px;line-height:1;padding:4px 8px;cursor:pointer;font-family:inherit;white-space:nowrap}
.fp-row:hover>.fp-only{display:inline-block}
.fp-list .fp-empty{padding:16px;text-align:center;color:var(--text-4);font-size:var(--fs-sm)}
/* ★ 筛选日期树形展开 */
.fp-tree-year,.fp-tree-month{display:flex;align-items:center;padding:2px 0}
.fp-tree-toggle{cursor:pointer;font-size:10px;width:16px;text-align:center;flex-shrink:0;color:var(--text-4);user-select:none}
.fp-tree-children{padding-left:16px;border-left:1px dashed var(--gray-200);margin-left:6px}
/* ★ 2026-09-03 日期树「其他」组：非日期文本值与树并存，杜绝个别脏值让整列退化为平铺 */
.fp-tree-other{margin-top:4px;border-top:1px dashed var(--gray-200);padding-top:2px}
.fp-tree-other .fp-other-title{font-size:var(--fs-xs);color:var(--text-4);padding:4px 8px 0;font-weight:600;display:flex;align-items:center}
.fp-tree-other label{padding-left:16px}
.fp-footer{display:flex;justify-content:space-between;padding:8px;border-top:1px solid var(--divider)}
.fp-footer button{font-size:var(--fs-sm);padding:5px 12px;border-radius:var(--r-sm);cursor:pointer;font-family:inherit}
.fp-footer .fp-btn-clear{background:var(--white);border:1px solid var(--gray-300);color:var(--text-3)}
.fp-footer .fp-btn-clear:hover{background:var(--bg-disabled)}
.fp-footer .fp-btn-ok{background:var(--pri);border:1px solid var(--pri);color:#fff}
.fp-footer .fp-btn-ok:hover{opacity:.9}
.fp-footer .sort-btn{padding:4px 10px;font-size:12px;border-radius:var(--r-sm);border:1px solid var(--gray-300);background:var(--white);color:var(--gray-500);cursor:pointer;transition:all .15s;white-space:nowrap}
.fp-footer .sort-btn:hover{background:var(--gray-100);border-color:var(--gray-400)}
.fp-footer .sort-btn.active{background:var(--blue-lighter);border-color:var(--pri);color:var(--pri)}
.fp-footer .sort-btn.sort-asc{background:var(--blue-lighter);border-color:var(--pri);color:var(--pri)}
.fp-footer .sort-btn.sort-desc{background:var(--blue-lighter);border-color:var(--pri);color:var(--pri)}

/* ===== 分页 ===== */
.pagination{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:16px}
.page-btn{width:32px;height:32px;border-radius:var(--r-md);background:var(--white);border:1px solid var(--bd-strong);color:var(--text-2);font-size:var(--fs);display:flex;align-items:center;justify-content:center;transition:all .2s}
.page-btn:hover{border-color:var(--pri);color:var(--pri)}
.page-btn.active{background:var(--pri);border-color:var(--pri);color:#fff}
.page-info{font-size:var(--fs);color:var(--text-4);padding:0 8px}
.page-size-wrapper{font-size:var(--fs-sm);color:var(--text-4);display:inline-flex;align-items:center;gap:4px;padding:16px 0}
.page-size-wrapper select{padding:4px 6px;border:1px solid var(--bd-strong);border-radius:var(--r-sm);font-size:var(--fs-sm);background:var(--white);cursor:pointer}

/* ===== Tab标签页 ===== */
.renew-tabs,.approval-tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.renew-tab{padding:8px 18px;border-radius:var(--r-md);background:var(--white);border:1.5px solid var(--bd);font-size:var(--fs);color:var(--text-2);transition:all .2s;font-family:inherit;cursor:pointer}
.renew-tab:hover{border-color:var(--pri);color:var(--pri)}
.renew-tab.active{background:var(--pri);border-color:var(--pri);color:#fff}
.approval-tab{padding:8px 18px;border:1px solid var(--bd-2);border-radius:var(--r-md);background:var(--white);color:var(--text-3);font-size:var(--fs);cursor:pointer;transition:all .2s}
.approval-tab:hover{border-color:var(--blue);color:var(--blue)}
.approval-tab.active{background:var(--blue);color:var(--white);border-color:var(--blue)}
.tab-count{display:inline-block;background:var(--red);color:var(--white);font-size:var(--fs-xs);padding:1px 6px;border-radius:10px;margin-left:4px;font-weight:600}
.renew-tab .tab-badge{background:var(--red);color:var(--white);font-size:10px;padding:1px 6px;border-radius:10px;margin-left:6px;font-weight:600;min-width:auto;display:inline-block;line-height:14px}
/* ★ 3.620：**不计入红点**的 tab（公池/需要列异/已列异/无法人联系方式）徽标用蓝色标识 —— 蓝色=不计入红点 */
.renew-tab .tab-badge.tb-blue{background:var(--blue)}
.hidden-row{display:none}

/* ===== 续费红点 ===== */
.renew-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);flex-shrink:0;animation:pulse-dot 2s infinite}
.renew-dot.warn{background:var(--orange);animation:none}
.renew-dot.ok{background:var(--green);animation:none}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.4}}

/* ===== 业绩卡片 ===== */
.performance-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:8px}
.perf-card{background:var(--white);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow-sm);transition:transform .2s;border-top:4px solid var(--pri);text-align:center}
.perf-card:nth-child(1){border-top-color:var(--red)}.perf-card:nth-child(2){border-top-color:var(--orange)}
.perf-card:nth-child(3){border-top-color:var(--green)}.perf-card:nth-child(4){border-top-color:var(--blue)}
.perf-card:nth-child(5){border-top-color:var(--purple)}
.perf-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.perf-rank{font-size:28px;margin-bottom:4px}
.perf-name{font-size:var(--fs-md);font-weight:700;color:var(--text);margin-bottom:4px}
.perf-amount{font-size:var(--fs-xxl);font-weight:700;color:var(--green)}
.perf-orders{font-size:var(--fs-sm);color:var(--text-4);margin-top:4px}

/* ===== 弹窗 ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:var(--z-modal);display:none;align-items:center;justify-content:center;padding:20px;animation:fadeIn .2s}
.modal-overlay.active{display:flex}
.modal-box{background:var(--white);border-radius:var(--r-xl);width:600px;max-width:95vw;max-height:90vh;display:flex;flex-direction:column;box-shadow:var(--shadow-xl);position:relative;margin:auto;animation:slideUp .25s}
.modal-box-wide{width:94vw;max-width:1680px}
/* ★ 2026-08-24 收款/支出选择弹窗：表格横向滚动（列不压缩，小屏滚动看全） */
#pay-app-records-table{min-width:1400px}
#exp-app-records-table{min-width:1500px}
#pay-select-table,#exp-select-table{min-width:1100px}
.modal-box-resizable{resize:both;overflow:auto;min-width:400px;min-height:200px}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--divider);cursor:move;user-select:none}
.modal-header h3{font-size:var(--fs-lg);font-weight:700;color:var(--text)}
.modal-close{background:none;font-size:20px;color:var(--text-4);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .2s}
.modal-close:hover{background:var(--bg-disabled);color:var(--text)}
.modal-body{flex:1;overflow-y:auto;padding:24px}
/* ★ 2026-08-24 抽屉模式：长表单（新增/编辑子订单）右侧滑出，不遮挡表格上下文（成熟 ERP 交互） */
.modal-box-drawer{position:fixed!important;top:0!important;right:0!important;bottom:0!important;height:100vh!important;max-height:100vh!important;width:min(560px,94vw)!important;margin:0!important;border-radius:0!important;resize:none!important;animation:drawerIn .22s ease-out}
.modal-box-drawer .modal-body{flex:1;overflow-y:auto;overscroll-behavior:contain}
@keyframes drawerIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
.modal-footer{padding:16px 24px;border-top:1px solid var(--divider);display:flex;justify-content:flex-end;gap:10px}

/* ===== 详情弹窗 ===== */
.order-detail-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;animation:fadeIn .2s}
.order-detail{background:var(--white);border-radius:var(--r-lg);width:90%;max-width:960px;max-height:85vh;display:flex;flex-direction:column;animation:slideUp .25s}
.order-detail-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--divider)}
.order-detail-header h3{margin:0;font-size:var(--fs-lg);color:var(--text)}
.order-detail-close{background:none;border:none;font-size:22px;cursor:pointer;color:var(--text-4);padding:4px 8px;border-radius:var(--r-sm);line-height:1}
.order-detail-close:hover{background:var(--bg-disabled);color:var(--text)}
.order-detail-body{overflow:auto;padding:20px;flex:1;-webkit-overflow-scrolling:touch}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.detail-item{padding:10px 12px;background:var(--bg-card);border-radius:var(--r-md);border:1px solid var(--bd-card)}
.detail-item.full{grid-column:1/-1}
.detail-label{font-size:var(--fs-xs);color:var(--text-4);margin-bottom:4px;font-weight:500}
.detail-value{font-size:var(--fs);color:var(--text);word-break:break-all}
.detail-value.income{color:var(--green);font-weight:600}
.detail-value.cost{color:var(--red);font-weight:600}
.detail-value.profit{color:var(--blue);font-weight:700}
.detail-section{margin:16px 0 8px;font-size:var(--fs);font-weight:600;color:var(--text-3);border-bottom:1px solid var(--bd-card);padding-bottom:6px}
.item-count{display:inline-block;background:var(--blue-bg);color:var(--blue-dark);padding:2px 8px;border-radius:10px;font-size:var(--fs-xs);font-weight:600}

/* ===== 标签系统 ===== */
.tag{display:inline-block;padding:3px 10px;border-radius:20px;font-size:var(--fs-xs);font-weight:600}
.tag-green{background:var(--green-bg);color:var(--green);border:1px solid var(--green-bd)}
.tag-red{background:var(--red-bg);color:var(--red);border:1px solid var(--red-bd)}
.tag-orange{background:var(--orange-bg);color:var(--orange);border:1px solid var(--orange-bd)}
.tag-blue{background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-bd)}
.tag-gray{background:var(--bg-disabled);color:var(--text-4);border:1px solid var(--bd-strong)}
.tag-purple{background:var(--purple-bg);color:var(--purple);border:1px solid var(--purple-bd)}

/* ===== 卡片组件 ===== */
.card{background:var(--white);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow-sm)}
.card-success{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:var(--r-lg);padding:16px}
.card-error{background:#fef2f2;border:1px solid #fecaca;border-radius:var(--r-lg);padding:16px;color:var(--red-dark)}
.card-info{background:#eef2ff;border:1px solid #c7d2fe;border-radius:var(--r-md);padding:8px 12px;font-size:var(--fs-sm);color:var(--indigo);display:none}

/* ===== 审批卡片 ===== */
.approval-list{display:flex;flex-direction:column;gap:16px}
.approval-card{background:var(--white);border:1px solid var(--bd-2);border-radius:var(--r-lg);padding:16px;box-shadow:var(--shadow-sm);transition:box-shadow .2s}
.approval-card:hover{box-shadow:var(--shadow-md)}
.approval-card.card-rejected{border-left:4px solid var(--red)}
.card-header{margin-bottom:12px}
.card-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.card-meta{font-size:var(--fs-sm);color:var(--text-4);margin-bottom:2px}
.card-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);margin-bottom:12px}
.card-table th{background:var(--bg-2);padding:6px 8px;text-align:left;font-weight:600;color:var(--text-3);border:1px solid var(--bd-2);font-size:var(--fs-xs)}
.card-table td{padding:6px 8px;border:1px solid var(--bd-2);color:var(--text)}
.card-table tr:hover td{background:var(--bg-row)}
.card-summary{display:flex;gap:16px;flex-wrap:wrap;padding:10px 12px;background:var(--bg-2);border-radius:var(--r-md);font-size:var(--fs-sm);color:var(--text-3);margin-bottom:10px}
.card-reject-reason{padding:8px 12px;background:var(--red-bg);border:1px solid var(--red-bd);border-radius:var(--r-md);font-size:var(--fs-sm);color:var(--red-h);margin-bottom:10px}
.card-actions{display:flex;gap:8px;justify-content:flex-end}

/* ===== Toast ===== */
#toast-container{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);z-index:var(--z-toast);display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none}
.toast{padding:12px 20px;border-radius:var(--r-md);color:var(--white);font-size:var(--fs);box-shadow:var(--shadow-md);animation:slideIn .3s ease;display:flex;align-items:center;gap:10px;min-width:200px;pointer-events:auto}
.toast.success{background:var(--green)}.toast.error{background:var(--red)}.toast.warning{background:var(--orange)}.toast.info{background:var(--blue)}
.toast.leaving{animation:slideOut .3s ease forwards}

/* ===== 空数据/加载/错误状态 ===== */
.empty-state{text-align:center;padding:60px 20px;color:var(--text-4)}
.empty-state .empty-icon{font-size:56px;margin-bottom:16px;opacity:.6}
.empty-state .empty-text{font-size:var(--fs);color:var(--text-4);margin-bottom:8px}
.empty-state .empty-sub{font-size:var(--fs-sm);color:var(--bd-hover)}
.skeleton{background:linear-gradient(90deg,var(--divider) 25%,#e8e8e8 50%,var(--divider) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--r-sm)}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ===== 空状态引导（新人友好） ===== */
.empty-guide{text-align:center;padding:60px 20px 50px 20px;color:var(--gray-500);max-width:500px;margin:0 auto}
.empty-guide .eg-icon{font-size:48px;margin-bottom:12px}
.empty-guide .eg-title{font-size:16px;font-weight:700;color:var(--gray-700);margin-bottom:8px}
.empty-guide .eg-desc{font-size:13px;color:var(--gray-400);line-height:1.7;margin-bottom:20px}
.empty-guide .eg-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.empty-guide .eg-step{display:inline-block;background:var(--gray-100);border-radius:8px;padding:6px 12px;font-size:12px;color:var(--gray-500);margin:2px 4px}
.empty-guide .eg-step .eg-num{display:inline-block;width:18px;height:18px;line-height:18px;border-radius:50%;background:var(--pri);color:var(--white);font-size:10px;font-weight:700;text-align:center;margin-right:4px}

/* ===== 使用指南页 ===== */
.guide-page{max-width:800px;margin:0 auto;padding:0 0 40px 0}
.guide-page h3{font-size:18px;color:var(--gray-800);margin:28px 0 12px 0;padding-bottom:6px;border-bottom:1px solid var(--gray-200)}
.guide-page .gp-card{background:var(--white);border:1px solid var(--gray-200);border-radius:12px;padding:20px 24px;margin-bottom:12px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.guide-page .gp-card h4{font-size:15px;color:var(--gray-700);margin-bottom:6px}
.guide-page .gp-card p{font-size:13px;color:var(--gray-500);line-height:1.7}
.guide-page .gp-card .gp-flow{display:flex;align-items:center;gap:8px;margin:12px 0;flex-wrap:wrap}
.guide-page .gp-flow-item{background:var(--blue-lighter);color:var(--blue);border-radius:8px;padding:6px 14px;font-size:12px;font-weight:600}
.guide-page .gp-flow-arrow{color:var(--gray-300);font-size:18px}
.guide-page .gp-role-tag{display:inline-block;padding:2px 10px;border-radius:12px;font-size:11px;font-weight:600;margin:0 2px}
.guide-page .gp-role-admin{background:#fef2f2;color:var(--red)}
.guide-page .gp-role-sales{background:var(--blue-lighter);color:var(--blue)}
.guide-page .gp-role-neiqin{background:#f0fdf4;color:var(--green)}
.guide-page .gp-role-finance{background:#fefce8;color:var(--yellow-dark)}
.guide-page .gp-tip{background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:12px 16px;font-size:12px;color:var(--orange-dark);margin-top:8px}
.guide-page .gp-tip::before{content:'💡 '}

/* ===== 侧边栏遮罩 ===== */
.sidebar-mask{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:99}
.sidebar-mask.active{display:block}

/* ===== 子订单格式 ===== */
.suborder-row > span[data-col], .suborder-header > span[data-col]{text-align:center;flex-shrink:0}
.suborder-row > span[data-col="action"]{text-align:left!important}
.suborder-row > span[data-col="subBn"]{display:flex;flex-direction:column;justify-content:center;align-items:center}
.suborder-row > span[data-col="action"]{display:block}

/* ===== 详情页面行不限制换行 ===== */
.order-sub-header td,.order-child-row td{white-space:normal!important}

/* ===== 响应式设计 ===== */
@media(max-width:1280px){
  .dashboard-grid{grid-template-columns:1fr}
}
@media(max-width:1024px){
  .stats-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
}
@media(max-width:768px){
  /* 顶部导航：移动端显示汉堡按钮，隐藏导航Tab和搜索 */
  .topnav-mobile-btn{display:block}
  .topnav-nav{display:none}
  .topnav-search{display:none}
  .topnav-name{font-size:13px}
  .topnav-ver{display:none}
  /* ★ 3.636：窄屏用汉堡键开抽屉，桌面的「菜单栏开关」与「身份」让位给标签区 */
  .ntab-navbtn{display:none}
  .tn-user-role{display:none}
  .main-content{margin-left:0!important}
  .topbar{padding:0 12px}
  .topbar-right{gap:6px}
  .topbar-update{font-size:10px;padding:2px 6px}
  .topbar-time{font-size:var(--fs-xs)}
  .content-area{padding:12px}
  .page-header{flex-direction:column;align-items:flex-start}
  .page-actions{width:100%;flex-wrap:wrap;gap:6px}
  .search-box input{width:100%}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .form-grid{grid-template-columns:1fr}
  .modal-box{width:95vw;max-width:95vw;min-width:unset}
  .modal-box-resizable{width:95vw;min-width:unset;max-width:95vw}
  .performance-cards{grid-template-columns:repeat(2,1fr)}
  .detail-grid{grid-template-columns:1fr}
  .detail-item{padding:8px 10px;font-size:var(--fs-sm)}
  .order-detail{width:98vw;max-width:98vw}
  .order-detail-body{padding:12px}
  .data-table{font-size:var(--fs-xs)!important}
  .data-table th{padding:5px 4px!important;font-size:var(--fs-xs)!important;white-space:normal;word-break:keep-all;overflow:hidden;line-height:1.3;min-width:60px}
  .data-table td{padding:5px 4px!important;font-size:var(--fs-xs)!important;white-space:nowrap!important;min-width:50px}
  .page-header h2{font-size:17px}
  .env-top-banner{font-size:10px;padding:2px 0}
  .filter-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;max-width:320px;z-index:var(--z-pagepop)}
  .approval-tab{padding:6px 10px;font-size:var(--fs-sm)}
  .table-container{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .page-header h2{font-size:var(--fs-lg)}
  .stat-card{padding:14px 16px}
  /* 底部导航栏 */
  .bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--gray-200);z-index:150;padding:4px 0 env(safe-area-inset-bottom,0);box-shadow:0 -2px 10px rgba(0,0,0,.06)}
  .bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 2px;text-decoration:none;color:var(--gray-500);font-size:10px;gap:2px;min-height:48px;-webkit-tap-highlight-color:transparent;transition:color .15s;position:relative}
  .bottom-nav a .bn-icon{font-size:20px;line-height:1}
  .bottom-nav a.active{color:var(--pri);font-weight:600}
  .bottom-nav a .bn-badge{position:absolute;top:2px;margin-left:14px;background:var(--red);color:#fff;font-size:9px;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:600}
  .main-content{padding-bottom:70px}
}
@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr 1fr}
  .login-card{padding:24px 16px}
  .login-logo{font-size:36px}
  .login-title{font-size:18px}
  .form-group label{font-size:var(--fs-sm)}
  .form-input{font-size:var(--fs);padding:8px 10px}
  .form-group input,.form-group select,.form-group textarea{font-size:16px!important;padding:8px 10px;box-sizing:border-box}
  input[type="date"]{min-height:unset;appearance:none;-webkit-appearance:none}
  .nav-item{padding:10px 12px;font-size:var(--fs)}
  .sidebar-user{padding:10px 12px}
  .content-area{padding:8px}
  .page-header h2{font-size:var(--fs-lg)}
  .stat-card{padding:12px 14px}
  .stat-value{font-size:18px}
  .btn-secondary,.btn-warning{padding:4px 10px;font-size:var(--fs-sm)}
  .modal-header{padding:12px 16px}
  .modal-header h3{font-size:var(--fs-md)}
  .modal-body{padding:16px}
  .detail-section{font-size:var(--fs-sm)}
  .order-detail-header{padding:12px 16px}
  .order-detail-header h3{font-size:var(--fs-md)}
  input,select,textarea{font-size:16px!important} /* 防止iOS自动缩放 */
  /* 移动端表格滚动 - 确保所有表都能横向滑动 */
  .content-area{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:8px}
  .table-container{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -8px;padding:0 8px}
  .data-table{font-size:var(--fs-xs)!important}
  .resizable-table{min-width:1600px!important;width:1600px!important;table-layout:fixed!important}
  .data-table th,.data-table td{padding:5px 4px!important;font-size:var(--fs-xs)!important;vertical-align:middle!important;white-space:nowrap!important}
  .td-actions button{font-size:10px!important;padding:2px 5px!important;min-width:unset!important;margin:1px!important;line-height:1.4!important;height:auto!important;vertical-align:middle!important;letter-spacing:-0.3px}
  /* 仅订单表因按钮多（5个）需固定宽度；其他表内容自适应 */
  .resizable-table{table-layout:auto!important;width:auto!important}
  #orders-tbody .td-actions{min-width:300px!important}
  td.td-actions{display:table-cell!important;white-space:nowrap!important}
  /* 移动端不隐藏任何列，靠滚动查看全部内容，列数多的表能完整显示 */
  .data-table{min-width:1200px}
  /* 审批卡片在移动端 */
  .approval-stat-cards{flex-direction:column;gap:8px}
  .approval-stat-cards .stat-card{min-width:unset}
  .approval-card{padding:12px!important}
  .card-summary{flex-direction:column;gap:4px}
  /* 通知页面 */
  #notifications-list>div{padding:10px 12px!important}
  /* 全局搜索在移动端 */
  .global-search{max-width:160px;margin:0 8px}
  .global-search input{font-size:12px;padding:4px 24px 4px 8px}
  /* 看板快捷操作 */
  #quick-actions{gap:4px!important}
  #quick-actions button{font-size:11px!important;padding:4px 8px!important}
  /* 触控优化：最小44px */
  .btn,.btn-primary,.btn-danger,.btn-secondary,.btn-warning,button{padding:10px 16px;min-height:44px;font-size:var(--fs)}
  .modal-footer button{padding:10px 16px;min-height:44px}
  .form-group input[type="checkbox"]{width:20px;height:20px}
  .page-actions button{padding:8px 12px;min-height:40px;font-size:var(--fs-sm)}
}
/* ===== 设置中心 — 标签页 ===== */
.settings-tabs{display:flex;gap:0;border-bottom:2px solid var(--bd);margin-bottom:20px}
.settings-tab{padding:10px 24px;font-size:14px;font-weight:500;color:var(--gray-500);background:none;border:none;border-bottom:3px solid transparent;cursor:pointer;transition:all .15s;margin-bottom:-2px}
.settings-tab:hover{color:var(--pri);background:var(--gray-50)}
.settings-tab.active{color:var(--pri);border-bottom-color:var(--pri);font-weight:600}
.settings-panel{display:none}
.settings-panel.active{display:block}
.module-tab-active{border:2px solid var(--pri)!important;background:var(--white)!important;font-weight:600!important;color:var(--pri)!important}

/* ===== ★ 2026-09-07：桌面滚动模型统一（≥769px，移动端保持原横滚体验）=====
   目标：内容区(.content-area)成为唯一双向滚动容器 → 表头 sticky top 吸顶 + 末列操作列 sticky right 冻结；
   此前 .content-area/.table-container overflow-x:auto 让 sticky 失去视口滚动上下文（表头随容器走）。 */
@media(min-width:769px){
  /* ① 布局：整页不滚，滚动收敛到 .content-area（顶栏 54px 固定；content-area 占满余量 → 表头吸顶紧贴导航栏）
     桌面隐藏 dev 横幅（.env-top-banner 红橙条不再占位，dev 标识靠 topnav DEV 徽标；移动端横幅保留） */
  #main-app{height:100vh;min-height:0;overflow:hidden}
  .main-content{width:100%;height:calc(100vh - var(--topnav-h));min-height:0;display:flex;flex-direction:column;overflow:hidden}
  .main-content .env-top-banner{display:none!important}
  .content-area{flex:1 1 auto;min-height:0;box-sizing:border-box;overflow:auto;-webkit-overflow-scrolling:touch}
  /* ② 表格容器横向滚动移交给 .content-area（移除自身 overflow，卡片随内容宽度展开） */
  .content-area .table-container{overflow:visible;display:inline-block;min-width:100%;vertical-align:top;float:none}
  /* ③ 表头吸顶（相对 .content-area 竖滚），不透明底防透视
     注意：top 用 -24px 抵消 .content-area 的 padding-top:24——Chrome sticky top:0 贴在 content 盒顶（padding 之内）会留 24px 缝；负值把表头拉到 box 顶紧贴导航栏 */
  .content-area .data-table thead th{position:sticky;top:-24px;z-index:5;background:var(--bg-2);box-shadow:0 1px 0 var(--bd)}
  /* ④ 末列操作列冻结右缘（横滚时按钮始终可见）
     ★ 2026-09-08：冻结列补左侧实线=悬浮区与内容区的固定分隔线（此前仅阴影，备注列从右侧滑过/被盖时无清晰边界） */
  .content-area .data-table th:last-child,
  .content-area .data-table td:last-child{position:sticky;right:0;border-left:1px solid var(--bd)}
  .content-area .data-table td:last-child{background:var(--white);box-shadow:-6px 0 8px -4px rgba(15,23,42,.14)}
  .content-area .data-table thead th:last-child{background:var(--bg-2);z-index:6}
  /* ⑤ 冻结列背景随行状态（hover/异常重复/订单父行/置顶），防穿帮 */
  .content-area .data-table tbody tr:hover td:last-child{background:#f8faff}
  .content-area .data-table tr.dup-row td:last-child{background:var(--red-bg)!important}
  .content-area .data-table tr.dup-row:hover td:last-child{background:#ffd8d8!important}
  .content-area .data-table tr.order-parent-row td:last-child{background:var(--bg-row)}
  .content-area .data-table tr.order-parent-row:hover td:last-child{background:var(--bg-row-hover)}
  .content-area .data-table tr.order-parent-row.pinned td:last-child{background:#e9f0ff}
  .content-area .data-table tr.order-parent-row.pinned:hover td:last-child{background:#dde9ff}
  /* ⑥ 内容区细滚动条（Webkit/Chromium） */
  .content-area::-webkit-scrollbar{width:10px;height:10px}
  .content-area::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:5px;border:2px solid #fff}
  .content-area::-webkit-scrollbar-thumb:hover{background:#94a3b8}
}

/* ============================================================================
   ★ 2026-09-17（3.526）① 通用表头列宽拖拽的「冻结态」  ② 表格字号三档（帅哥要求⑦A）
   字号**只作用于表格**（表头／单元格／操作按钮／标签／汇总条／多选框），不动导航与其它页面元素。
   倍率 --tvfs 挂在 body 的类上：小 .88 ／ 中 1 ／ 大 1.18；按人记在本机（core 的 setTableFontSize）。
   ============================================================================ */
:root{--tvfs:1}
body.tv-fs-s{--tvfs:.88}
body.tv-fs-l{--tvfs:1.18}

/* ① 拖过列宽的表：JS 已把 table-layout 切成 fixed，这里只需放开单元格的 max-width 钳制
      （否则 .data-table td 的 max-width:150px 会把拖宽的列又压回去，看着像"拖了没反应"） */
table.cwk-fixed{table-layout:fixed}
table.cwk-fixed td{max-width:none}

/* ② 表格字号（同一个 --tvfs 驱动；追加在文件末尾 → 同特异性下覆盖前面的固定 px） */
.data-table th{font-size:calc(11px * var(--tvfs))}
.data-table td{font-size:calc(12px * var(--tvfs))}
.data-table .tag{font-size:calc(11px * var(--tvfs))}
.data-table .item-count,.data-table .biz-count-tag{font-size:calc(11px * var(--tvfs))}
.data-table .td-actions .act-btn{font-size:calc(13px * var(--tvfs))}
.data-table .ts-bar{font-size:calc(12px * var(--tvfs))}
.order-sub-header td{font-size:calc(11px * var(--tvfs))}
.card-table th{font-size:calc(11px * var(--tvfs))}
#orders-table-view .act-btn{font-size:calc(10px * var(--tvfs))}
#orders-table-view tr.tv-grp-bar>td{font-size:calc(12px * var(--tvfs))}
#orders-table-view .tv-grp-cnt,#orders-table-view .tv-grp-hint{font-size:calc(11px * var(--tvfs))}
.tv-multi-hd{font-size:calc(13px * var(--tvfs))}
.tv-multi-row{font-size:calc(12px * var(--tvfs))}
.tv-multi-why{font-size:calc(11px * var(--tvfs))}
.col-clamp .cell-clamp,#orders-table-view .tv-clamp2{font-size:inherit}

/* ③ 右上角头像菜单里的「表格字号」三档选择器 */
.tn-fs-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px;font-size:13px;color:#374151}
.tn-fs-btns{display:inline-flex;border:1px solid var(--gray-200);border-radius:6px;overflow:hidden;flex:none}
.tn-fs-btn{border:0;border-right:1px solid var(--gray-200);background:var(--white);color:var(--gray-600);
  font-size:12px;line-height:1;padding:5px 10px;cursor:pointer;font-family:inherit;min-height:0}
.tn-fs-btn:last-child{border-right:0}
.tn-fs-btn:hover{background:var(--gray-100)}
.tn-fs-btn.on{background:var(--pri);color:var(--white);font-weight:600}

/* ===== ★ 3.624（帅哥需求①）：导航栏收起 / 悬停显示 =====
   🔴 高度补偿**唯一真源**：`html.topnav-hidden` 只把 --topnav-h 归零，
      内容区高度一律 calc(100vh - var(--topnav-h) - 标签条36px) ⇒ 不可能再出现"底部被裁"
      （3.615 的事故就是因为在三处各自写死 54/90px）。 */
:root{--topnav-h:54px;--ntabs-h:48px}   /* ★ 3.625：标签条高度**入变量**，禁止再在各处写死 */
html.topnav-hidden{--topnav-h:0px}
html.topnav-hidden .topnav{display:none}
/* ★ 3.637（帅哥：这个删除吧）：屏幕顶部热区 + ▼ **整块已删除** ——
   菜单栏入口只保留标签栏最左的「☰」（显式按钮，比「鼠标移到屏幕顶部」好发现得多）。
   附带收益：3.630 那次「热区盖住头像」的老坑从此不可能复发。 */
/* ★ 3.637：原窄屏媒体查询块里只剩「隐藏热区」一条规则 —— 热区连同本块一并删除。 */

/* ===== ★ 3.614（帅哥要求⑤）：导航下方「最近打开的页面」多标签条 =====
   视觉与顶部导航一致；窄屏横向滑动、隐藏滚动条。
   ★ 3.625 起：布局为 [头像][中段滚动区][＋]，**两端常驻**故不再有 :empty 隐藏一说；
   标签内容仍在（.ntab-strip），由 app.tabs.js 生成。
   🔴 3.626 修复（真 bug，潜伏 11 个版本）：本注释块原来**在首行就提前闭合**，
   后面几行中文说明变成"注释块外的裸文本" ⇒ CSS 解析器把「那段文字 + .nav-tabs」
   **整体当成一个选择器** ⇒ **.nav-tabs 的规则全部失效**（display:flex 没生效，
   三个子元素各占一行 → 帅哥截图看到的"错位"）。
   为何一直没暴露：以前子元素是 inline-flex 的 .ntab，块级父容器里照样能并排，把病盖住了；
   3.625 换成 block 级的头像 / 滚动区后立刻显形。
   ⇒ 铁律（本次连踩两次，务必照做）：
     ① 注释必须**整块闭合**；中文说明一律写进注释里；
     ② 注释正文里**绝不能再出现注释的起止标记**（哪怕用反引号、引号包住也不行）
        —— 3.626 修完第一条后又犯了第二条，同一个故障原地复活（而且起止标记数量又相等了，把旧断言绕了过去）；
     ③ 交付前必须跑**解析级**断言（_verify_3625.js 的 A12：任何规则的选择器都不得含中文）。 */
/* ★ 3.625（帅哥拍板①）：按"浏览器标签栏"参考图改版 —— 整条放大、最左头像、最右「＋」。
   布局 = [头像][标签横向滚动区][＋]；横向滚动**只发生在中段**（头像与＋常驻不滚走）。 */
/* ★ 3.630（帅哥要求①）：整条改**深色**——条底深、未选中标签稍浅、**选中标签纯白**。 */
/* ★ 3.637：标签栏回**白底**（3.630 深色、3.636 蓝渐变都撤掉）；
   布局不变 = [品牌][标签横向滚动区][搜索+铃铛+头像]（品牌与工具区常驻两端、不随标签滚走）。 */
.nav-tabs{position:sticky;top:var(--topnav-h);z-index:99;display:flex;flex-wrap:nowrap;
  align-items:center;gap:8px;
  height:var(--ntabs-h);padding:0 10px;background:var(--white);border-bottom:1px solid #e5e7eb}
/* ★ 3.636（帅哥拍板②）：原「标签条最左头像」已删除 —— 头像改到标签栏**最右**（与姓名·身份同处）。 */
/* ★ 3.628：flex:1 1 auto → flex:0 1 auto —— 中段按内容宽度、**不撑满**，这样「＋」紧跟最后一个标签
   （撑满时它会被顶到整条最右，帅哥指出「不要放到最右边」）。 */
.ntab-strip{flex:0 1 auto;min-width:0;display:flex;align-items:center;gap:6px;height:100%;padding:0 2px;
  overflow-x:auto;overflow-y:hidden;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ntab-strip::-webkit-scrollbar{display:none}
/* ★ 3.637（帅哥拍板②A，配色回浅）：标签栏最左的「菜单栏开关」——
   现在是菜单栏的**唯一入口**（3.637 起屏幕顶部热区已删除）。窄屏隐藏，改用汉堡键开抽屉。 */
.ntab-navbtn{flex:0 0 auto;width:32px;height:32px;padding:0;border:1px solid #e5e7eb;
  border-radius:8px;background:#fff;color:#4b5563;font-size:16px;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.ntab-navbtn:hover{background:#f1f5f9;border-color:#cbd5e1}
.ntab-navbtn.on{background:#e0f2fe;color:#0369a1;border-color:#7dd3fc}
.ntab-plus{flex:0 0 auto;width:34px;height:34px;padding:0;border:1px solid #e5e7eb;border-radius:9px;
  background:#fff;color:#4b5563;font-size:20px;line-height:1;display:flex;align-items:center;
  justify-content:center;cursor:pointer;transition:background .15s,border-color .15s}
.ntab-plus:hover{background:#f1f5f9;border-color:#cbd5e1}
/* 「＋」弹出的「页面速选」浮层（从导航项派生，无第二份页面清单） */
/* ★ 3.630（帅哥要求③）：标签右键菜单（移到最前 / 关闭） */
#ntab-ctx{display:none;position:fixed;z-index:160;min-width:140px;background:#fff;border:1px solid var(--gray-200);
  border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.16);padding:6px}
#ntab-ctx.open{display:block}
.ntab-ctx-i{padding:8px 12px;font-size:13px;color:#374151;cursor:pointer;border-radius:6px;white-space:nowrap}
.ntab-ctx-i:hover{background:#f1f5f9}
#ntab-plus-pop{display:none;position:fixed;z-index:150;min-width:230px;max-height:60vh;overflow-y:auto;
  background:#fff;border:1px solid var(--gray-200);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.14);padding:8px}
#ntab-plus-pop.open{display:block}
.ntpp-item{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:7px;font-size:13px;
  color:#374151;cursor:pointer;white-space:nowrap}
.ntpp-item:hover{background:#f1f5f9}
.ntpp-i{font-size:15px;line-height:1;flex:0 0 auto}
/* ★ 3.630（帅哥要求②）：速选里的**红点数字** —— 与标签条/顶部导航同一套视觉语言（普通橙、紧急红） */
.ntpp-t{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis}
.ntpp-b{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;
  border-radius:9px;background:var(--acc);color:#fff;font-size:11px;font-weight:600;line-height:1;flex:0 0 auto}
.ntpp-b.urgent{background:var(--red)}
.ntpp-b.normal{background:var(--orange)}
/* ★ 3.637：回 3.630 之前的浅色口径 —— 未选中 = 白底灰边灰字，选中 = 浅蓝底蓝边蓝字。 */
.ntab{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;height:34px;padding:0 9px 0 12px;
  border:1px solid #e5e7eb;border-radius:9px;background:#fff;color:#4b5563;font-size:13px;
  cursor:grab;transition:background .15s,border-color .15s,color .15s}
.ntab:active{cursor:grabbing}
.ntab:hover{background:#f1f5f9}
.ntab.dragging{opacity:.45}
.ntab.drag-over{border-color:var(--pri);background:#eff6ff}
.ntab.is-active{background:#e0f2fe;border-color:#7dd3fc;color:#0369a1;font-weight:600}
.ntab.is-active:hover{background:#dbeafe}
.ntab-t{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ★ 3.621（帅哥要求）：标签条加**图标**与**红点**。
   红点样式与顶部导航的 `.tn-item-badge` 一一对应（同一套视觉语言）：
   普通=橙、紧急=红并脉冲（复用已有的 badge-pulse 关键帧）。 */
.ntab-i{font-size:14px;line-height:1;flex:0 0 auto}
.ntab-b{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;
  border-radius:9px;background:var(--acc);color:#fff;font-size:11px;font-weight:600;line-height:1;flex:0 0 auto}
.ntab-b.urgent{background:var(--red);animation:badge-pulse 1.6s ease-in-out infinite}
.ntab-b.normal{background:var(--orange)}
.ntab-x{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border-radius:50%;font-size:15px;line-height:1;color:#9ca3af}
.ntab-x:hover{background:#e5e7eb;color:#374151}
.ntab.is-active .ntab-x{color:#60a5fa}
.ntab.is-active .ntab-x:hover{background:#0369a1;color:#fff}
@media(max-width:768px){
  :root{--ntabs-h:44px}
  .nav-tabs{padding:0 8px;gap:6px}
  .ntab{height:32px;font-size:12px}
  .ntab-t{max-width:110px}
  .ntab-plus{width:32px;height:32px;font-size:18px}
}

/* ★ 3.636：中等屏（769~1200px）标签区最容易不够宽 —— 搜索框再收一档。 */
@media(max-width:1200px){
  .topnav-search input{width:120px}
}

/* ===== ★ 3.615：标签条出现时，内容区高度必须**同步让出 36px** =====
   事故：桌面端 #main-app{height:100vh;overflow:hidden}（整页不滚、滚动收敛到 .content-area），
   而 .main-content 的高度是按"只有顶栏 54px"写死的 calc(100vh - 54px)；
   导航下方新增标签条（占位 36px）后内容区起点下移，底部 36px 被外层 overflow:hidden **裁掉**
   （帅哥实测"底部被剪切了一点"）。
   ⇒ 由 app.tabs.js 在有标签时给 body 加 .ntabs-on，这里同步收窄；无标签时规则不生效，自动回到原状。 */
/* ★ 3.625：36px → var(--ntabs-h)（标签条放大到 48px，写死就会又把底部裁掉） */
body.ntabs-on .main-content{min-height:calc(100vh - var(--topnav-h) - var(--ntabs-h))}
@media(min-width:769px){
  body.ntabs-on .main-content{height:calc(100vh - var(--topnav-h) - var(--ntabs-h));min-height:0}
}