/* 提成结算系统 —— 简洁、克制、就事论事 */
:root{
--bg:#f5f6f8; --card:#ffffff; --line:#e3e6ea; --text:#1d2329;
--muted:#6b7785; --brand:#2f7cf6; --ok:#1a9d63; --warn:#c47f17;
--danger:#d94a3d; --shadow:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04);
/* 中国股市习惯：涨红跌绿；提成系统里「增加」用红、「减少」用绿 */
--up:#d94a3d; --down:#1a9d63;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.topbar{display:flex;align-items:center;gap:24px;padding:0 20px;height:52px;
background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.brand{font-weight:600;font-size:15px}
.topbar nav{display:flex;gap:4px;flex:1}
.topbar nav a{padding:6px 12px;border-radius:6px;color:var(--text);font-size:13.5px}
.topbar nav a:hover{background:#eef2f7;text-decoration:none}
.me{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.tag{font-size:11px;padding:1px 6px;border-radius:4px;background:#e8f0fe;color:#1a56c4}
.tag.admin{background:#fdeee8;color:#b2441f}
/* 内容区全宽：不限 max-width，也不要 margin auto 居中（老板嫌两侧空太多） */
.page{margin:0;padding:20px 26px 60px}
h1{font-size:19px;margin:0 0 4px}
h2{font-size:15px;margin:26px 0 10px;color:#2c3540}
.sub{color:var(--muted);font-size:13px;margin:0 0 18px}
.flash{padding:10px 14px;border-radius:8px;margin-bottom:14px;font-size:13.5px}
.flash.ok{background:#e8f7f0;color:#0f6b45;border:1px solid #bfe6d4}
.flash.error{background:#fdeceb;color:#a33327;border:1px solid #f5c9c4}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;
padding:14px 16px;box-shadow:var(--shadow)}
.card .label{font-size:12.5px;color:var(--muted)}
.card .value{font-size:22px;font-weight:600;margin-top:4px;font-variant-numeric:tabular-nums}
.card .unit{font-size:12px;color:var(--muted);font-weight:400;margin-left:3px}
.card.accent{background:#f0f6ff;border-color:#cfe0fb}
.card.accent .value{color:#1a56c4}
.card.muted{background:#fbfbfc}
table{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);
border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:13.5px}
th,td{padding:9px 12px;text-align:left;border-bottom:1px solid #eceff3;
border-right:1px solid #f0f2f5}
th:last-child,td:last-child{border-right:none}
/* 表头：底色深一些、字加粗、列之间有隔断，滚动时固定在顶部
（老板要求：像他那套系统的表格那样，看着清爽） */
th{background:#e9eef5;font-weight:600;color:#26313d;font-size:12.5px;
position:sticky;top:0;z-index:6;box-shadow:inset 0 -1px 0 #d8e0ea}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:#fafcff}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.mono{font-family:ui-monospace,Consolas,"Courier New",monospace;font-size:12.5px}
.btn{display:inline-block;padding:7px 14px;border-radius:7px;border:1px solid var(--line);
background:var(--card);color:var(--text);cursor:pointer;font-size:13px}
.btn:hover{background:#f7f9fb;text-decoration:none}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:#2569d8}
/* ⛔ 2026-10-26 老板：「这个点开登录记录的时候为什么感觉有点乱？数字和名字没有在一行里面」
根因：按钮里那个数字用的是通用的 `.hint`，而 `.hint` 带着 **`margin-top:6px`**
（那是给段落间距用的）—— 在 flex 按钮里它把数字往下推了 6px，看着就不在一行。
⇒ 按钮里的 `.hint` 一律去掉外边距、跟文字同一条基线；
选中（蓝底）那档数字要半透明白，不然灰字压在蓝底上看不清。 */
.btn .hint{margin:0 0 0 4px;font-size:11.5px;line-height:1;color:var(--muted);
display:inline-flex;align-items:center;align-self:center;vertical-align:middle}
.btn.primary .hint{color:rgba(255,255,255,.82)}
.btn.warn{background:#fff7e8;border-color:#f0d9a8;color:#8a5b0a}
.btn.danger{background:#fdeceb;border-color:#f5c9c4;color:#a33327}
.btn:disabled{opacity:.55;cursor:not-allowed}
.pill{display:inline-block;font-size:11.5px;padding:2px 8px;border-radius:20px}
.pill.ok{background:#e8f7f0;color:#0f6b45}
.pill.pending{background:#eef2f7;color:#4a5560}
.pill.locked{background:#fff7e8;color:#8a5b0a}
.pill.settled{background:#e8f0fe;color:#1a56c4}
.pill.returned{background:#fdeceb;color:#a33327}
.pill.completed{background:#e8f7f0;color:#0f6b45}
.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.toolbar .spacer{flex:1}
input[type=text],input[type=password],select{
padding:7px 10px;border:1px solid var(--line);border-radius:7px;font-size:13.5px;background:#fff}
.empty{color:var(--muted);text-align:center;padding:40px 0;font-size:13.5px}
.hint{font-size:12.5px;color:var(--muted);margin-top:6px}
.amount-up{color:var(--up)}
.amount-down{color:var(--down)}
/* 登录页 */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#eef1f6}
.login{width:340px;background:var(--card);border:1px solid var(--line);border-radius:12px;
padding:28px 26px;box-shadow:0 4px 16px rgba(16,24,40,.08)}
.login h1{font-size:17px;margin-bottom:18px;text-align:center}
.login label{display:block;font-size:12.5px;color:var(--muted);margin:12px 0 4px}
.login input,.login select{width:100%}
.login .btn{width:100%;margin-top:18px;padding:9px}
.tabs{display:flex;background:#f2f4f7;border-radius:8px;padding:3px;margin-bottom:6px}
.tabs label{flex:1;text-align:center;padding:6px;margin:0;border-radius:6px;cursor:pointer;
font-size:13px;color:var(--muted)}
.tabs input{display:none}
.tabs input:checked + span{font-weight:600;color:var(--text)}
.tabs label:has(input:checked){background:#fff;box-shadow:var(--shadow)}
/* 宽表格：订单页要放淘宝原表的全部列，靠横向滚动而不是砍列 */
/* 表格容器：内容多时自己滚动，这样表头 sticky 才有意义 */
.table-wrap{overflow:auto;max-height:calc(100vh - 235px);
border:1px solid var(--line);border-radius:10px;background:var(--card)}
.table-wrap table{border:none;border-radius:0}
table.wide th,table.wide td{white-space:nowrap;font-size:12.5px;padding:8px 10px}
td.clip{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
td.nowrap,th.nowrap{white-space:nowrap}
/* 分页条：支持直接跳页，不用一页页点 */
.pager{margin-top:14px}
.pager-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 14px}
.pager-form .spacer{flex:1}
.pager-form label{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:5px}
.page-input{width:72px;padding:5px 8px;border:1px solid var(--line);border-radius:6px;
text-align:center;font-size:13px}
/* 上传框 */
.upload-box{display:flex;gap:12px;align-items:center;background:var(--card);
border:1px dashed #c8d0da;border-radius:10px;padding:18px 20px;margin-bottom:8px}
.upload-box input[type=file]{flex:1;font-size:13px}
/* ── 导入块（2026-10-01 老板：两份数据的说明 + 上传框各自成块、**竖着排**）──
背景：老板说「一开始的时候 我以为 才导入一个呢」—— 因为两份数据的标题、
说明、上传框、按钮是散在页面上的，看不出是两件独立的事。
现在每份数据包成一个带框的块：左框=①推广报表、右框=②生意参谋，各自
标题 + 说明 + 选择文件 + 按钮，一眼看清是「两份、各导各的」。 */
.import-block{background:var(--card);border:1px solid var(--line);border-radius:10px;
padding:16px 20px 18px;margin-bottom:16px;box-shadow:var(--shadow)}
.import-block h2{margin:0 0 6px;font-size:15px}
.import-block .hint{margin:0 0 12px}
/* 同一块里两列并排；窄屏自动收成一列 */
.import-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
@media (max-width:1000px){.import-cards{grid-template-columns:1fr}}
.import-cards .import-block{margin-bottom:0}
.import-block .upload-box{margin-bottom:0}
/* 两栏布局（提成组页：左边组员 / 右边待分配） */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
@media (max-width:960px){.two-col{grid-template-columns:1fr}}
.two-col h2{margin-top:0}
/* 进度条（导入用） */
.progress{height:10px;background:#eef1f5;border-radius:6px;overflow:hidden;margin:10px 0}
.progress > i{display:block;height:100%;width:0;background:var(--brand);
border-radius:6px;transition:width .3s}
.progress-text{font-size:13px;color:var(--muted)}
/* 订单列表里的内联编辑（不点进去就能改） */
.inline-fix{display:flex;gap:4px;align-items:center}
.inline-fix input{padding:4px 6px;font-size:12.5px;border:1px solid var(--line);
border-radius:5px;background:#fff}
.inline-fix input:focus{border-color:var(--brand);outline:none}
.inline-fix .btn{padding:4px 10px;font-size:12.5px;white-space:nowrap}
/* 列表里「点一下就能改」的单元格：平时看着像普通文本，鼠标移上去才提示可编辑 */
.cell-form{display:inline-block;width:100%}
.cell-input{width:100%;max-width:110px;padding:3px 6px;text-align:right;
font-size:13.5px;font-variant-numeric:tabular-nums;color:inherit;
background:transparent;border:1px solid transparent;border-radius:5px;cursor:pointer}
.cell-input:hover{background:#f2f6fd;border-color:#d6e2f7}
.cell-input:focus{background:#fff;border-color:var(--brand);outline:none;cursor:text}
/* 去掉数字输入框的上下箭头，免得看着乱 */
.cell-input::-webkit-outer-spin-button,
.cell-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cell-input{-moz-appearance:textfield;appearance:textfield}
/* 页脚：显示版本号，方便老板确认自己用的是哪一版 */
.app-foot{margin:8px 0 26px;padding:0 26px;font-size:12.5px;
color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.app-foot .ver{background:#eef2f7;border-radius:4px;padding:1px 7px;font-size:12px;
color:#42536a;font-family:ui-monospace,Consolas,monospace}
.app-foot .hint{font-size:12px}
/* ── 页面标题栏（左标题 + 右操作）── */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;
gap:16px;flex-wrap:wrap;margin:0 0 12px}
.page-head h1{margin:0 0 4px}
.page-head .sub{margin:0}
.page-head-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* ── 全屏表格：撑满窗口可用宽度，不写死尺寸 ── */
.table-full{width:100%}
.table-full table.wide{width:100%}
/* ── 列显示配置菜单 ── */
.col-picker{position:relative}
.col-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:50;background:#fff;
border:1px solid var(--line);border-radius:8px;padding:10px 12px;min-width:200px;
max-height:440px;overflow:auto;box-shadow:0 10px 28px rgba(20,40,70,.14)}
.col-menu-head{font-size:12.5px;color:var(--muted);margin-bottom:8px;
padding-bottom:6px;border-bottom:1px solid var(--line)}
.col-item{display:block;padding:3px 0;font-size:13.5px;cursor:pointer;white-space:nowrap}
.col-item input{margin-right:6px;vertical-align:middle}
.col-menu-foot{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
/* ── 人工改动标记：红色小三角，鼠标移上去看谁改的、什么时候 ── */
td{position:relative}
.fix-flag{color:#e03e2d;font-size:11px;margin-left:4px;cursor:help;
vertical-align:super;line-height:1}
.fix-detail{display:none;position:absolute;left:0;top:100%;z-index:60;
background:#2b3440;color:#fff;font-size:12px;padding:6px 10px;border-radius:6px;
white-space:nowrap;max-width:560px;box-shadow:0 6px 18px rgba(0,0,0,.22)}
.fix-flag:hover + .fix-detail{display:block}
/* ── 统计卡片行（奖惩页顶部） ── */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:12px;margin-bottom:20px}
.card.stat{padding:14px 16px;margin:0}
.card.stat .label{font-size:12.5px;color:var(--muted);margin-bottom:6px}
.card.stat .value{font-size:20px;font-weight:600;
font-variant-numeric:tabular-nums;line-height:1.2}
.card.stat .hint{font-size:12px;margin-top:4px}
/* 金额方向（记账场景，不是股票行情）：
绿色 = 给员工加钱（奖励），红色 = 从员工那里扣（扣款/退款扣回） */
.amount-up{color:#2f9e5e}
.amount-down{color:#d94a3d}
/* 员工列表里的「每个身份一行」分组选择 */
.role-groups{display:flex;flex-direction:column;gap:4px}
.role-group-row{display:flex;gap:6px;align-items:center;margin:0}
.role-tag{display:inline-block;min-width:104px;font-size:13px;font-weight:500;
color:#26313d;white-space:nowrap}
.role-group-row select{padding:3px 6px;font-size:12.5px;border:1px solid var(--line);
border-radius:5px;max-width:150px}
.role-group-row .btn{padding:3px 9px;font-size:12.5px}
/* ══════════════════════════════════════════════════════════════
左侧菜单布局（2026-09-17 参考老板给的截图改的）
—— 菜单固定在左边、内容区自适应，表格能撑满整个宽度
══════════════════════════════════════════════════════════════ */
body.with-side{display:flex;min-height:100vh;background:#f5f7fa;margin:0}
.side{width:214px;flex:0 0 214px;background:#1f2b3a;color:#c7d2de;
display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
font-size:13.5px}
.side-brand{display:flex;align-items:center;gap:10px;padding:18px 16px 14px}
.side-brand .logo{width:32px;height:32px;border-radius:8px;background:#2f7cf6;
color:#fff;display:grid;place-items:center;font-weight:700;font-size:16px;flex:none}
.side-brand .txt{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.side-brand b{color:#fff;font-size:14.5px;font-weight:600;white-space:nowrap}
.side-brand i{font-style:normal;font-size:11.5px;color:#7b8ea3}
.side-nav{flex:1;padding:6px 8px;overflow-y:auto}
.side-nav a{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:7px;
color:#c7d2de;text-decoration:none;margin-bottom:2px;transition:background .12s}
.side-nav a:hover{background:#2a3849;color:#fff}
.side-nav a.active{background:#2f7cf6;color:#fff}
.side-nav .ico{width:16px;text-align:center;font-size:13px;opacity:.85;flex:none}
.side-user{border-top:1px solid #2e3b4d;padding:12px 16px 14px;font-size:13px}
.side-user .row{display:flex;align-items:center;gap:6px;margin-bottom:9px;flex-wrap:wrap}
.side-user .who{color:#fff;font-weight:500}
.side-user .tag{font-size:11px;padding:1px 6px;border-radius:4px;
background:#3a4759;color:#a9b8c9}
.side-user .tag.admin{background:#33507a;color:#bcd4f5}
.side-user .logout{color:#8fa3b8;text-decoration:none;font-size:12.5px}
.side-user .logout:hover{color:#fff}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.main .page{flex:1}
/* ── 登录页：占满整个视口并居中 ──
注意：登录页不能用带 padding 的 .page（会让 100vh 溢出、把卡片挤歪），
所以这里把 .main / .page 的约束全部放开，由 .login-wrap 自己居中。 */
body:not(.with-side){background:#eef1f6}
body:not(.with-side) .main{min-height:100vh}
body:not(.with-side) .page{max-width:none;padding:0;margin:0;display:flex;
align-items:center;justify-content:center;flex:1}
body:not(.with-side) .login-wrap{width:100%;min-height:100vh;display:flex;
align-items:center;justify-content:center;padding:24px;box-sizing:border-box}
body:not(.with-side) .app-foot{display:none}
/* ── 提成组管理：大类别分区（2026-09-17） ───────────────────────── */
.cat-block{border:1px solid var(--line);border-radius:12px;background:var(--card);
margin-bottom:16px;overflow:hidden}
.cat-block.pending{border-color:#f0c9a0;background:#fffcf8}
.cat-head{display:flex;align-items:center;gap:10px;padding:11px 16px;
background:#eaeff6;border-bottom:1px solid var(--line);font-size:13.5px}
.cat-block.pending .cat-head{background:#fbeed9}
.cat-head strong{font-size:14px;font-weight:500}
.cat-head .hint{font-size:12.5px;color:var(--muted)}
.cat-head .spacer{flex:1}
.cat-head .cnt{font-size:12.5px;color:var(--muted)}
.cat-empty{padding:16px;color:var(--muted);font-size:13px}
.cat-block table{width:100%;border-collapse:collapse}
.cat-block th,.cat-block td{padding:9px 14px;text-align:left;
border-bottom:1px solid #f0f2f5;vertical-align:middle}
.cat-block th{background:#f7f9fc;font-weight:500;font-size:12.5px;color:#4a5560;
border-bottom:1px solid var(--line)}
.cat-block tbody tr:last-child td{border-bottom:none}
.cat-block tbody tr:hover{background:#fafcff}
.cat-block .ops{white-space:nowrap;display:flex;gap:6px}
.cat-block .ops .btn{padding:3px 9px;font-size:12.5px}
/* 大类别的颜色标识：左边缘一道色条 */
.cat-block.k-designer{border-left:3px solid #378add}
.cat-block.k-service{border-left:3px solid #1d9e75}
.cat-block.k-admin{border-left:3px solid #888780}
/* 弹窗（原生 dialog） */
dialog{border:none;border-radius:12px;padding:0;width:430px;max-width:92vw;
box-shadow:0 14px 44px rgba(16,24,40,.2);background:var(--card);color:var(--text)}
dialog::backdrop{background:rgba(18,24,34,.34)}
.dlg-head{padding:16px 20px 0;font-size:15px;font-weight:500}
.dlg-sub{padding:6px 20px 0;font-size:12.5px;color:var(--muted);line-height:1.55}
.dlg-body{padding:12px 20px 4px;display:flex;flex-direction:column;gap:4px}
.dlg-body label{font-size:12.5px;color:var(--muted);margin-top:8px}
.dlg-body input,.dlg-body select{width:100%;padding:8px 10px;border:1px solid var(--line);
border-radius:6px;font-size:13.5px;font-family:inherit;background:#fff;color:var(--text)}
.dlg-body input:focus,.dlg-body select:focus{border-color:var(--brand);outline:none}
.dlg-foot{padding:16px 20px 18px;display:flex;justify-content:flex-end;gap:8px}
/* ── 分成管理页（照老板那套系统做的）2026-09-17 ───────────────── */
.tag{display:inline-block;padding:1px 8px;border-radius:4px;font-size:12px;
background:#eef2f7;color:#42536a;white-space:nowrap}
.tag.blue{background:#e3effd;color:#1f6fd0}
.tag.warn{background:#fdf0dc;color:#a56b12}
.pager{display:flex;align-items:center;gap:8px;padding:12px 4px;flex-wrap:wrap}
.pager .pager-cur{font-size:13px;color:var(--muted);min-width:64px;text-align:center}
.pager select{width:auto;padding:5px 8px}
.pager .btn{padding:4px 10px;font-size:13px}
.pager .btn[disabled]{opacity:.4;cursor:not-allowed}
dialog.wide{width:960px;max-width:96vw}
.mem-bar{display:flex;align-items:center;gap:8px;padding:12px 20px 6px;flex-wrap:wrap}
.mem-bar select{width:150px;padding:7px 10px;border:1px solid var(--line);
border-radius:6px;font-size:13.5px;background:#fff}
.mem-bar input{width:220px;padding:7px 10px;border:1px solid var(--line);
border-radius:6px;font-size:13.5px}
.mem-bar .spacer{flex:1}
.mem-body{padding:6px 20px 0;max-height:52vh;overflow:auto}
.mem-body table{width:100%;border-collapse:collapse}
.mem-body th,.mem-body td{padding:8px 10px;text-align:left;
border-bottom:1px solid #f0f2f5;font-size:13px}
.mem-body th{background:#f7f9fc;font-weight:500;font-size:12.5px;color:#4a5560;
position:sticky;top:0;z-index:1}
.mem-body .empty{text-align:center;color:var(--muted);padding:22px 0}
.radio-row{display:flex;gap:18px;padding:6px 0}
.radio-row .radio{display:flex;align-items:center;gap:5px;font-size:13.5px;
color:var(--text);cursor:pointer}
.radio-row input[type=radio]{width:auto;margin:0}
.input-suffix{display:flex;align-items:center;gap:8px}
.input-suffix input{flex:1}
.input-suffix span{font-size:13px;color:var(--muted)}
.req{color:var(--danger)}
/* 表格操作列的小按钮 */
td.ops{white-space:nowrap}
td.ops .btn{padding:3px 9px;font-size:12.5px;margin:0 4px 0 0}
/* ===========================================================================
视觉精修 v3（2026-09-17 老板说"太丑了，优化下"）
—— 用覆盖写法放在最后，前面的规则不动，要回退只需删掉这一段
=========================================================================== */
/* 1. 配色：整体更清爽，主色更沉稳 */
:root{
--bg:#f5f7fb;
--card:#ffffff;
--line:#e6eaf2;
--text:#101828;
--muted:#667085;
--brand:#2563eb;
--ok:#059669;
--warn:#d97706;
--danger:#dc2626;
--shadow:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
--up:#dc2626;
--down:#059669;
}
body{font-size:13.5px;-webkit-font-smoothing:antialiased}
/* 2. 标题区 */
.page{padding:22px 28px 60px}
h1{font-size:20px;font-weight:600;letter-spacing:-.2px;color:#101828;margin:0 0 6px}
h2{font-size:15px;font-weight:600;color:#1d2939;margin:28px 0 12px}
.sub{color:var(--muted);font-size:12.5px;line-height:1.75;margin:0 0 18px}
.page-head{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:16px}
.page-head > div:first-child{flex:1;min-width:260px}
/* 面包屑：子页面回主页面用。存在感要低，但不能像普通链接那样被忽略。 */
.crumb{font-size:12.5px;margin:0 0 10px}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--blue,#2f7cf6)}
/* 3. 卡片：极轻的立体感 */
.card{border-radius:12px;border:1px solid var(--line);padding:16px 18px;
box-shadow:0 1px 2px rgba(16,24,40,.04)}
.card .value{font-size:24px;font-weight:600;letter-spacing:-.3px}
.card .label{font-size:12px;color:var(--muted)}
/* 4. 表格：行更高、表头更淡、加斑马纹和极轻阴影 */
table{border-radius:12px;font-size:13px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
th,td{padding:11px 14px;border-bottom:1px solid #f1f4f9;
border-right:1px solid #f6f8fc}
th{background:#f8fafc;color:#475467;font-size:12px;font-weight:600;
letter-spacing:.3px;white-space:nowrap;box-shadow:inset 0 -1px 0 #e9eef6}
tbody tr:nth-child(even){background:#fbfcfe}
tbody tr:hover{background:#f3f7fe}
.table-wrap{border-radius:12px}
/* 5. 按钮：统一高度 + 主次分明 */
.btn{display:inline-flex;align-items:center;justify-content:center;height:34px;
padding:0 14px;border-radius:8px;border:1px solid #dbe2ec;background:#fff;
color:#344054;font-size:13px;font-family:inherit;cursor:pointer;line-height:1;
white-space:nowrap;transition:background .15s,border-color .15s,box-shadow .15s}
.btn:hover{background:#f8fafc;border-color:#c7d2e0;text-decoration:none}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;
box-shadow:0 1px 2px rgba(37,99,235,.22)}
.btn.primary:hover{background:#1d4ed8;border-color:#1d4ed8}
.btn.danger{background:#fff;border-color:#fbd3d3;color:var(--danger)}
.btn.danger:hover{background:#fef3f2;border-color:#f6b4b4}
.btn.warn{background:#fff;border-color:#f3ddb4;color:#a3610a}
/* ⚠️ 2026-10-07：`.btn` 是 inline-flex → **会压过 HTML 的 `hidden` 属性**
（UA 样式 `[hidden]{display:none}` 优先级最低，被这里覆盖了）。
症状：JS 里 `btn.hidden = true` 看着赋值成功了，按钮却还杵在那儿
（只在 disabled 变淡）。凡是靠 hidden 控显隐的按钮都得兜这一条。 */
.btn[hidden]{display:none !important}
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
td.ops .btn{height:30px;padding:0 11px;font-size:12.5px;margin-right:6px}
/* 6. 输入控件：统一高度 + 柔和聚焦环 */
/* ⚠️ 必须带 `input:not([type])`（2026-10-01 老板报的 bug）：
属性选择器 `input[type=text]` **只匹配"有 type 且=text"**，
而 `` 这种**不写 type** 的，浏览器虽按 text 渲染、
却匹配不到这条规则 → 退回浏览器默认的深色 inset 边框
（老板原话：「分类和标题这两个输入框为什么和下面的完全不一样？黑色的怪怪的」）。
`:not([type])` 是**纯增量**：只补上漏掉的那类，不影响任何已有选择器。 */
input[type=text],input[type=password],input[type=number],input:not([type]),select,textarea{
height:36px;padding:0 12px;border:1px solid #dbe2ec;border-radius:8px;
font-size:13px;font-family:inherit;background:#fff;color:var(--text);
transition:border-color .15s,box-shadow .15s}
textarea{height:auto;padding:9px 12px;line-height:1.6}
input:focus,select:focus,textarea:focus{
outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
select{appearance:none;padding-right:30px;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 10px center}
.input-suffix input{width:100%}
.toolbar{gap:10px;margin-bottom:16px}
/* 7. 弹窗：更多留白 */
dialog{border-radius:14px;box-shadow:0 24px 60px rgba(16,24,40,.18);width:460px}
dialog::backdrop{background:rgba(16,24,40,.42)}
.dlg-head{padding:22px 26px 0;font-size:16px;font-weight:600;color:#101828}
.dlg-sub{padding:8px 26px 0;font-size:12.5px;color:var(--muted);line-height:1.7}
.dlg-body{padding:12px 26px 2px}
.dlg-body label{display:block;font-size:12.5px;color:#475467;font-weight:500;
margin-top:14px}
.dlg-body input,.dlg-body select{width:100%;margin-top:6px}
.dlg-foot{padding:18px 26px;gap:10px;margin-top:18px;border-top:1px solid #f1f4f9;
background:#fcfdfe;border-radius:0 0 14px 14px}
/* 8. 横排表单行（奖惩页那种） */
.form-row{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.form-row .field{display:flex;flex-direction:column;gap:6px}
.form-row .field > label{font-size:12.5px;color:#475467;font-weight:500}
.form-row .field.grow{flex:1;min-width:200px}
.form-row .field .input-suffix{display:flex;align-items:center;gap:6px}
.form-row .field .input-suffix span{font-size:12.5px;color:var(--muted)}
/* 9. 管理组提示 & 分段隐藏 */
.only-income{display:contents}
.mgmt-tip{margin-top:16px;padding:11px 14px;border-radius:8px;background:#f4f8ff;
border:1px solid #d6e4fb;color:#1e50a0;font-size:12.5px;line-height:1.7}
/* 10. 标签 */
.tag{border-radius:6px;padding:2px 8px;font-size:11.5px;font-weight:500}
.tag.blue{background:#eaf1fe;color:#1d4ed8}
.tag.warn{background:#fef4e6;color:#a3610a}
.pill{border-radius:999px;font-size:11.5px;padding:2px 9px}
/* 11. 分页 */
.pager{padding:14px 2px}
.pager .btn{height:30px;padding:0 10px;font-size:12.5px}
.pager .pager-cur{font-size:12.5px;color:var(--muted)}
/* 12. 侧边栏 —— 保持原来的深色底。
⚠️ 2026-09-17 踩过的坑：曾经把 .side 改成白底，但忘了
.side-brand b / .side-user .who 本来就是白字、.side-nav a:hover 也是白字，
于是变成「浅底白字」，菜单和标题全都看不见了。
**改背景色时必须把所有相关的前景色一起改，不能只改一半。** */
.side-nav a{border-radius:8px;font-size:13px;padding:9px 12px;color:#c7d2de;
transition:background .15s,color .15s}
.side-nav a:hover{background:#2b3a50;color:#fff;text-decoration:none}
.side-nav a.active{background:#2563eb;color:#fff}
/* 次级菜单项（挂在主菜单下面的子页，比如「参数设置」）：
缩进 + 弱化图标，让层级看得出来，但别做成折叠——老板要的是点得到。 */
.side-nav a.sub-nav{padding-left:28px;font-size:12.5px;color:#9fb0c4}
.side-nav a.sub-nav .ico{font-size:13px;opacity:.85}
/* 2026-09-30：员工被授了后台栏目时，「管理后台」这一组里再按
「系统管理 / 订单管理 / 人员绩效 / 宝贝运营」分开显示 ——
以前是一长串**拍平**的，十几项堆一起、没有栏目名，老板说「看着好乱」。
⚠️ 用**不可折叠的小标题**（两层折叠太深、点起来烦），
下面的链接走现成的 `.sub-nav`（缩进 + 弱化图标）。 */
.side-nav .nav-sub{margin:9px 0 2px;padding:0 12px;font-size:11px;
letter-spacing:.5px;color:#6b7f96;font-weight:600}
/* ⭐ 2026-10-06：「客服辅助」这类**分组栏目**的三种形状
（定义见 web/nav.py 顶部 + base.html 的 nav_links 宏）。
老板原话：「先是一个概览，然后下面就是一个客服的功能界面，
然后对应的一个管理员的配置界面，对应的出现」。
· `.nav-grp` = **功能界面**（客服用）—— 跟普通项一样，点一下就去；
· `.nav-sub2` = 组内**小标题**（只剩配置项时的兜底，or 再分层）；
· `.nav-kid` = **配置界面**（管理员用）—— 缩进挂在功能界面下面。
⚠️ 少一个都会让「话术管理」跟「快捷短语」看起来平级，层级看不出来。 */
.side-nav a.nav-grp{padding-left:12px}
.side-nav .nav-sub2{margin:7px 0 2px;padding:0 12px 0 22px;font-size:11px;
letter-spacing:.5px;color:#7d8fa6;font-weight:600}
.side-nav a.nav-kid{padding-left:30px;font-size:12.5px;color:#9fb0c4}
.side-nav a.nav-kid .ico{font-size:13px;opacity:.85}
/* 13. 登录卡片 */
.login{border-radius:14px;box-shadow:0 12px 36px rgba(16,24,40,.1);width:360px}
.login h1{font-size:18px;text-align:center}
/* ===========================================================================
视觉精修 v4（2026-09-17 老板给了参考图："严格完全按照这个样式"）
参考图特征：
· 表格白底、表头是浅灰小字（不是灰底）、无竖线、无斑马纹
· 行高紧凑、信息密度高、横向滚动条是细灰圆角
· 筛选区是一块白底卡片
=========================================================================== */
/* 1. 表格：白底 + 浅灰表头文字 + 只有淡横线 */
.table-wrap{border:none;background:#fff;border-radius:8px;
box-shadow:0 1px 2px rgba(16,24,40,.05);
max-height:calc(100vh - 240px)}
table{border:none;border-radius:0;box-shadow:none;background:#fff;font-size:12.5px}
th,td{padding:10px 12px;border-bottom:1px solid #f0f3f7;border-right:none;
white-space:nowrap;vertical-align:middle}
th{background:#fff;color:#8a94a6;font-size:12px;font-weight:400;letter-spacing:0;
border-bottom:1px solid #e8ecf2;box-shadow:none;
position:sticky;top:0;z-index:6;white-space:nowrap !important}
tbody tr{background:#fff}
tbody tr:nth-child(even){background:#fff}
tbody tr:hover{background:#f8fafc}
tbody tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
/* 2. 细一点的滚动条 */
.table-wrap::-webkit-scrollbar{width:10px;height:10px}
.table-wrap::-webkit-scrollbar-track{background:#f7f9fb;border-radius:5px}
.table-wrap::-webkit-scrollbar-thumb{background:#d5dbe4;border-radius:5px;
border:2px solid #f7f9fb}
.table-wrap::-webkit-scrollbar-thumb:hover{background:#bfc7d4}
/* 3. 筛选区：白底卡片 */
.filter-bar{background:#fff;border:1px solid var(--line);border-radius:8px;
padding:14px 16px;margin-bottom:14px;gap:10px}
.filter-bar input[type=text],.filter-bar select{background:#fff}
/* 4. 开关样式的按钮（参考图顶部那种圆形开关） */
.switch{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;
color:#475467;cursor:pointer;user-select:none}
.switch input{display:none}
.switch .track{width:34px;height:18px;border-radius:9px;background:#d0d5dd;
position:relative;transition:background .18s;flex:none}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;
width:14px;height:14px;border-radius:50%;background:#fff;
transition:transform .18s;box-shadow:0 1px 2px rgba(16,24,40,.2)}
.switch input:checked + .track{background:var(--brand)}
.switch input:checked + .track::after{transform:translateX(16px)}
/* ===========================================================================
视觉精修 v5（2026-09-17 老板纠正）
⚠️ v4 我看错了参考图：以为要去掉竖线、表头改白底。
实际上参考图是**经典网格表格** —— 表头浅灰底（深色字）、
每列之间有竖线、每行之间有横线，四边带外框。
=========================================================================== */
/* 表格：经典网格 */
.table-wrap{border:1px solid #e7eaf0;background:#fff;border-radius:6px;
box-shadow:none;max-height:calc(100vh - 240px)}
table{border:none;border-radius:0;box-shadow:none;background:#fff;font-size:12.5px}
th,td{padding:9px 12px;border-bottom:1px solid #e7eaf0;
border-right:1px solid #e7eaf0;white-space:nowrap;vertical-align:middle;
text-align:left}
th:last-child,td:last-child{border-right:none}
th{background:#f2f4f7;color:#344054;font-size:12.5px;font-weight:600;
letter-spacing:0;box-shadow:none;position:sticky;top:0;z-index:6;
border-bottom:1px solid #e0e4ec}
tbody tr{background:#fff}
tbody tr:nth-child(even){background:#fff}
tbody tr:hover{background:#f7f9fc}
tbody tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
/* 序号列：蓝色 + 方括号（参考图里的【1】【2】） */
tbody td.seq{color:#2563eb;font-weight:500;text-align:left;width:64px}
tbody td.seq::before{content:"【"}
tbody td.seq::after{content:"】"}
/* 第一列如果是链接（订单号 / 用户名），用蓝色 */
tbody td a{color:#2563eb}
/* ===========================================================================
视觉精修 v6（2026-09-17 老板："你做的表格比我给你的那个高了很多"）
—— 用无头浏览器实测改前：
分成管理行高 49px、订单管理 53px、表头 39px，明显比参考图高。
原因：① 单元格上下各 9px 内边距；
② 操作列按钮 30px 高；
③ 订单页格子里的输入框被全局 height:36px 撑到 36px。
目标：控件行 ≈ 34px、纯文本行 ≈ 30px、表头 ≈ 32px。
=========================================================================== */
/* 1. 单元格内边距收紧，字号降到 12px */
th,td{padding:6px 10px;line-height:1.45}
table{font-size:12px}
th{padding:7px 10px;font-size:12px}
table thead th{line-height:1.3}
/* 2. 表格里的输入框：压到 24px，别再被全局 36px 撑高 */
td input[type=text],td input[type=number],td input[type=password],td select{
height:24px;padding:0 6px;font-size:12px;border-radius:5px}
.cell-input{height:24px;padding:0 6px;font-size:12px;max-width:92px;
line-height:22px;vertical-align:middle}
/* 3. 表格里的按钮：统一 24px（原来 30 / 34px 把行撑开了） */
td .btn,td button,td.ops .btn{height:24px;min-height:24px;padding:0 9px;
font-size:12px;border-radius:5px;margin:0 4px 0 0;line-height:22px;
vertical-align:middle}
td.ops{line-height:1}
table .pill{font-size:11px;padding:1px 7px;line-height:1.5}
/* 4. 弹窗里的成员表格也一起压 */
.mem-body th,.mem-body td{padding:6px 10px;font-size:12px}
.mem-body th{font-size:11.5px}
.mem-body .btn{padding:0 8px;height:22px;font-size:11.5px}
/* 5. 分页条紧凑一点 */
.pager{padding:9px 4px}
/* 6. 可编辑格子（里面有输入框）：去掉行盒基线留白，行高才能压到 34px */
td.cell-edit{line-height:1;padding-top:5px;padding-bottom:5px}
td.cell-edit .cell-input{display:block;margin-left:auto}
/* 7. ⚠️ 关键：老规则 `table.wide th,table.wide td`（第 105 行）优先级更高，
一直在把订单管理页的单元格撑成 padding:8px / 12.5px 字号。
这里必须用同样具体的选择器压回去，否则上面所有收紧都不生效。 */
table.wide th,table.wide td{padding:6px 10px;font-size:12px;line-height:1.45}
table.wide thead th{padding:7px 10px;font-size:12px;line-height:1.3}
/* 8. 表格里成对出现的 inline-block（标签 / 链接）不要撑高行盒 */
table td a,table td .pill,table td span{vertical-align:middle}
/* ===========================================================================
视觉精修 v7（2026-09-17 老板三条反馈）
① 数字格子平时别显示输入框边框，点进去改的时候才显示
—— 被 v3 的 `input[type=number]{border:1px solid #dbe2ec}` 盖住了，
原来的 `.cell-input` 本来就是"透明边框、看着像文本"的设计。
② 人工改过的红三角标记不要撑大格子
—— 三角是脚本动态插进格子的 inline 元素，参与行盒布局 → 把格子顶高。
改成绝对定位，不占位置。
③ 表头字号要比数据行稍大、加粗
—— 原来表头和数据行都是 12px，表头又用了偏浅的灰，显得比正文还小。
=========================================================================== */
/* ① 可编辑格子：平时就是普通数字，鼠标移上去才暗示可点 */
td .cell-input,
td.cell-edit .cell-input{
border:1px solid transparent;background:transparent;box-shadow:none;
padding:0 6px;color:inherit}
td .cell-input:hover{background:#f2f6fd;border-color:#d6e2f7}
td .cell-input:focus{background:#fff;border-color:var(--brand);
box-shadow:0 0 0 2px rgba(37,99,235,.12);outline:none}
/* ② 人工改动的红三角：不撑高行 */
td .fix-flag{vertical-align:baseline;font-size:9px;line-height:1;margin-left:3px}
td.cell-edit{position:relative}
td.cell-edit .fix-flag{position:absolute;left:3px;top:50%;
transform:translateY(-50%);margin:0;padding:0;cursor:help}
/* ③ 表头：比数据行稍大一号 + 加粗 + 颜色加深 */
table thead th,table.wide thead th{
font-size:13px;font-weight:700;color:#1d2939;padding:8px 10px}
/* ===========================================================================
视觉精修 v8（2026-09-17 老板三条反馈）
① 表头没钉住 —— 往下翻的时候表头跟着滚走了
② 数据偏了，要居中
③ 表头也要居中，颜色淡一点
=========================================================================== */
/* ① 表头钉不住的真凶：第 46 行 `table{...overflow:hidden}`。
它是早先给表格做圆角用的（圆角要靠 overflow 裁），但圆角早就改由
外层 `.table-wrap` 负责了，这条留着只会坏事 ——
它让 table 成为 sticky 的裁剪边界，表头只能在 table 内部活动，
而 table 本身不滚动 → 等于钉不住。
改成 visible 后，sticky 才会相对 `.table-wrap`（真正的滚动容器）生效。 */
table{overflow:visible}
/* 容器高度要"卡"得刚好，页面本身别产生滚动，否则表头还是会跟着整页走。
这一版把高度按「页头 + 筛选栏 + 分页条 + 底部留白」重新算过。 */
.table-wrap{max-height:calc(100vh - 285px)}
body.with-side .page{padding-bottom:28px}
/* ② 表格数据居中（老板要求） */
table th,table td{text-align:center}
table.wide th,table.wide td{text-align:center}
td.num,th.num{text-align:center;font-variant-numeric:tabular-nums}
td.mono,th.mono{text-align:center}
td.seq{text-align:center}
td .cell-input,td.cell-edit .cell-input{text-align:center}
td.clip{text-align:center}
/* 备注这种长文本居中会很难看，保持左对齐 */
td[data-col="note"],td[data-col="item_title"]{text-align:left}
/* ③ 表头：居中 + 颜色淡一点（原来 #1d2939 太深） */
table thead th,table.wide thead th{
text-align:center;color:#5b6b7f;font-weight:700;font-size:13px}
/* ===========================================================================
视觉精修 v9（2026-09-17）让表头真正钉住
—— v8 把 table 的 overflow 去掉后，表头位置仍然不对（跑到视口顶部、
被容器裁掉）。根子是：多个滚动容器套在一起时，sticky 的参照很不可靠。
换成最稳的经典布局：
整个窗口不滚 → 只剩「内容区」一个滚动容器 → 表头相对它 sticky。
这样无论怎么滚，表头都钉在内容区顶部。
=========================================================================== */
body.with-side{height:100vh;overflow:hidden}
body.with-side .main{height:100vh;min-height:0;overflow:hidden}
/* 内容区：唯一滚动容器（纵向 + 横向都交给它） */
body.with-side .page{flex:1;min-height:0;overflow:auto;padding-bottom:24px}
/* 表格容器不再裁剪，让滚动统一由 .page 负责 */
body.with-side .table-wrap{max-height:none;overflow:visible}
/* 2026-09-30 老板实拍：「后面这边错乱了」——
用户管理是 **15 列**的宽表（列宽合计约 1886px）。桌面端上面那条把
`.table-wrap` 设成 `overflow:visible`（为了表头 sticky），于是**中等宽度的
屏幕（约 1000~1900px）** 上，表格被硬压进容器：`white-space:nowrap` 的格子
互相压住、列看着对不上。
⭐ 给它一个最小宽度：宁可让 `.page`（唯一滚动容器）横向滚动，也不把列压扁。
⚠️ 只有 `.staff-table` 用得上这条，别的表不受影响。
⭐ 2026-10-06：1886 → 1924（「组织归属」列 158 → 196，留着带队名单的宽度）*/
body.with-side table.staff-table{min-width:1924px}
/* ⛔ 2026-10-26 老板连报三次「还是透出来」——
根因是**表格没锁列宽**：`table-layout:auto` 下 `` 只是个建议值，
浏览器按内容算出 41 或 39，而冻结区的 `left` 是按 th 宽度累加的 ⇒ **累计误差**，
最后那几 px 就露出后面的列。
⇒ 锁成 `fixed`，列宽严格按 th 分配，JS 累加才和实际一致。 */
.staff-table{table-layout:fixed}
/* 表头必须有不透明底色，否则下面的数据会透上来 */
body.with-side thead th{background:#f2f4f7;position:sticky;top:0;z-index:6}
body.with-side .app-foot{padding:8px 26px 14px;margin:0}
/* ===========================================================================
视觉精修 v10（2026-09-17 老板两条反馈）
① 表格上方冒出一截滚过去的数据行
—— 内容区 `.page` 原来有 22px 的「上内边距」，表头钉住的位置
（top:0）在某些浏览器内核下按「内容区」算而不是「内边距框」算，
于是这 22px 里会露出滚过去的数据行。
改成：上内边距归零，改用内容流里的占位块做留白 —— 无论哪种算法都不会露。
② 表头再加高一些
=========================================================================== */
body.with-side .page{padding-top:0}
body.with-side .page::before{content:"";display:block;height:18px}
/* 表头再高一点（老板要求）—— 但字号保持 13px，
老板 2026-09-17 补充："这个标题文字不要变大"（要的是行高，不是字大） */
table thead th,table.wide thead th{padding:12px 10px;font-size:13px}
/* 用户状态开关：在表格里窄一点、文字小一号 */
.mem-body .switch{font-size:12px;gap:6px}
.mem-body .switch .track{width:32px;height:17px;border-radius:9px}
.mem-body .switch .track::after{width:13px;height:13px;top:2px;left:2px}
.mem-body .switch input:checked + .track::after{transform:translateX(15px)}
.mem-body .switch .txt{color:#475467;min-width:40px;text-align:left}
/* 表头钉住时要挡住下面的数据（不透明底 + 一道分隔线） */
body.with-side thead th{background:#f2f4f7;
border-bottom:1px solid #d7dee8;box-shadow:0 2px 4px rgba(16,24,40,.04)}
/* ===========================================================================
视觉精修 v11（2026-09-20）设计师排行页
老板要「统计设计师接单情况，帮客服找优秀的设计师」。
=========================================================================== */
/* 名次：前三名金银铜，其他是普通灰色数字 */
.medal{display:inline-flex;align-items:center;justify-content:center;
width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:700;
color:#fff}
.medal.m1{background:linear-gradient(160deg,#f7c948,#e0a400);
box-shadow:0 1px 3px rgba(224,164,0,.45)}
.medal.m2{background:linear-gradient(160deg,#c9d2dc,#98a5b3);
box-shadow:0 1px 3px rgba(152,165,179,.45)}
.medal.m3{background:linear-gradient(160deg,#e0a878,#bf8447);
box-shadow:0 1px 3px rgba(191,132,71,.45)}
.rank-no{color:#98a2b3;font-variant-numeric:tabular-nums}
/* 综合分：分档上色，一眼看出高低 */
.score{display:inline-block;min-width:44px;padding:1px 8px;border-radius:6px;
font-weight:700;font-variant-numeric:tabular-nums;font-size:13px}
.score.s4{background:#e6f4ea;color:#137a45}
.score.s3{background:#e8f0fe;color:#1a56c4}
.score.s2{background:#f4f6f9;color:#667085}
.score.s1{background:#f7f8fa;color:#98a2b3}
/* 表头里可点排序的链接 */
thead th a{color:inherit;text-decoration:none;border-bottom:1px dashed #cbd5e1}
thead th a:hover{color:var(--brand);border-bottom-color:var(--brand);
text-decoration:none}
.caret{font-size:9px;color:var(--brand);margin-left:2px}
/* 折叠的算法说明 */
.explain{background:#fff;border:1px solid #e7eaf0;border-radius:8px;
padding:12px 18px;font-size:13px;color:#475467}
.explain summary{cursor:pointer;font-weight:600;color:#344054;font-size:13.5px}
.explain summary::marker{color:var(--brand)}
.explain-body{margin-top:12px;line-height:1.9}
.explain-body table{margin:10px 0}
.explain-body td{padding:6px 12px 6px 0;text-align:left;border:none;
vertical-align:top;white-space:normal}
.explain-body td:first-child{width:110px;color:#667085;white-space:nowrap}
.explain-body p{margin:8px 0}
/* 概览卡片里的单位字 */
.card.stat .value .unit{font-size:12.5px;font-weight:400;color:var(--muted);
margin-left:3px}
/* 提示条（浅蓝底） */
.notice{background:#f0f6ff;border:1px solid #d3e2fb;border-left:3px solid var(--brand);
border-radius:6px;padding:10px 14px;margin-bottom:14px;font-size:13px;
color:#24405f;line-height:1.9}
.notice strong{color:#123a6b}
/* ===========================================================================
视觉精修 v12（2026-09-20）设计师排行：单量趋势 / 活跃 / 常合作客服
老板问「还有什么其他方式统计设计师数据」，从候选里选了三项。
=========================================================================== */
/* 单量趋势：近 30 天 vs 前 30 天。差 3 单以内算持平，免得噪声看起来像涨跌 */
.trend{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.trend.up{color:#15803d}
.trend.down{color:#c2410c}
.trend.flat{color:#98a2b3;font-weight:400}
/* 封顶角标：到手价超出上限被截断的单数，挂在设计师名字后面 */
.cap-flag{display:inline-block;margin-left:5px;padding:0 5px;border-radius:4px;
background:#fef3c7;color:#92400e;font-size:11px;font-weight:600;
border:1px solid #fde68a;cursor:help;vertical-align:1px;white-space:nowrap}
/* ⭐ 2026-11-02 老板定的两个标签：
「超本金」= 备注/显示的到手金额 超过客户付款金额（更严重，红）
「超比例」= 到手金额 超过这个岗位正常的提成比例（黄） */
.cap-flag.over-paid{background:#fee2e2;color:#b42318;border-color:#fecaca}
/* 常合作客服 */
.cs-partner{font-size:12.5px;color:#475467;white-space:nowrap}
.cs-partner b{color:#344054;font-weight:600}
/* ===========================================================================
视觉精修 v13（2026-09-20）派单：接单大厅 / 建派单 / 派单详情
客服端将来要挂在企业微信侧边栏里（窄，约 400px），所以这些卡片
一律**窄屏优先**：不写死宽度、该换行就换行，电脑上摆宽了也不会散。
=========================================================================== */
.dispatch-bar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.d-card{background:#fff;border:1px solid #e7eaf0;border-radius:10px;
padding:14px 16px;margin-bottom:12px;max-width:760px}
.d-card-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.d-amount{font-size:19px;font-weight:700;color:#c2410c;font-variant-numeric:tabular-nums}
.d-amount i{font-size:12px;font-weight:400;color:var(--muted);font-style:normal;margin-left:2px}
.d-st{margin-left:auto;font-size:12px;padding:1px 8px;border-radius:10px;white-space:nowrap}
.d-st-open{background:#e8f0fe;color:#1a56c4}
.d-st-chosen{background:#fef3c7;color:#92400e}
.d-st-grouped{background:#e6f4ea;color:#137a45}
.d-st-deal{background:#d1fae5;color:#065f46}
.d-st-closed{background:#f4f6f9;color:#667085}
.d-content{margin:9px 0;font-size:13.5px;color:#344054;line-height:1.75;
white-space:pre-wrap;word-break:break-word}
.d-meta{font-size:12.5px;color:#667085}
.d-mine{color:#1a56c4}
.d-actions{display:flex;gap:8px;align-items:center;margin-top:11px;flex-wrap:wrap}
.d-actions form{margin:0}
.d-panel{background:#fff;border:1px solid #e7eaf0;border-radius:10px;
padding:14px 16px;margin-bottom:12px;max-width:760px}
.d-label{font-size:12px;color:#98a2b3;margin-bottom:6px}
.d-label b{color:#344054;font-size:14px}
.d-signup{display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:9px 0;border-bottom:1px solid #f2f4f7;flex-wrap:wrap}
.d-signup:last-child{border-bottom:none}
.d-signup-l{min-width:0}
.d-picked{display:inline-block;margin-left:6px;padding:0 7px;border-radius:4px;
background:#d1fae5;color:#065f46;font-size:11px;font-weight:600;vertical-align:1px}
.d-copy{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.d-copy code{background:#f7f8fa;border:1px solid #e7eaf0;border-radius:6px;
padding:7px 10px;font-size:13px;color:#344054;word-break:break-all;flex:1;min-width:0}
.d-secret{background:#fff9f0;border:1px dashed #f0c98a;border-radius:8px;
padding:10px 12px;margin-top:10px}
.d-note{background:#f7f8fa;border-radius:6px;padding:9px 12px;font-size:12.5px;
color:#667085;margin-bottom:14px}
.d-empty{text-align:center;color:#98a2b3;padding:26px 0;font-size:13px}
.d-form{background:#fff;border:1px solid #e7eaf0;border-radius:10px;
padding:16px;max-width:560px}
.d-form label{display:block;font-size:13px;color:#344054;margin-bottom:14px}
.d-form label i{color:#e24b4a;font-style:normal}
.d-form input,.d-form select,.d-form textarea{width:100%;margin-top:6px;
padding:9px 11px;border:1px solid #d0d5dd;border-radius:7px;font-size:13.5px;
font-family:inherit;color:#101828;background:#fff}
.d-form input:focus,.d-form select:focus,.d-form textarea:focus{
outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.d-form textarea{resize:vertical;line-height:1.6}
.d-form .hint{display:block;margin-top:5px;font-size:12px}
.d-form-foot{display:flex;gap:10px;justify-content:flex-end;padding-top:4px}
@media (max-width:520px){
.d-card,.d-panel,.d-form{max-width:100%}
.d-amount{font-size:17px}
.d-actions .btn{flex:1;text-align:center}
}
/* ===========================================================================
视觉精修 v14（2026-09-20）窄屏：把左侧菜单收起来
派单要挂在企业微信侧边栏里（约 400px 宽），那儿**没有空间摆菜单** ——
内容占满宽度，手机端打开也顺带受益。
⚠️ 2026-09-23 改过：原来这里是 `.side{display:none !important}` ——
手机上**把菜单整个藏掉，等于没有导航**（老板在手机上打开后没法点别的栏目）。
现在菜单改成"抽屉"，见文件末尾「手机端适配 v1.17.9」段。⛔ 别再写回 display:none。
=========================================================================== */
@media (max-width:560px){
html,body{overflow-x:hidden}
.main{margin-left:0 !important;width:100% !important;max-width:100vw}
.page{padding-left:12px;padding-right:12px;box-sizing:border-box;overflow-x:hidden}
.page-head{display:block}
.page-head > div:first-child{flex:none;min-width:0}
.page-head h1{font-size:18px}
.stat-row{grid-template-columns:1fr 1fr}
.d-st{margin-left:0}
.app-foot{flex-wrap:wrap}
.app-foot .hint{display:none}
}
/* ===========================================================================
宝贝推广评估 v1（2026-09-21）
和绩效系统其它页共用 .toolbar/.cards/.card/.pill/.flash/.hint 等基础件，
这里只补推广页专属的几块。
=========================================================================== */
/* 主表：列多，给个横向滚动容器，别把单元格挤成两行 */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
border:1px solid var(--line);border-radius:10px;background:var(--card)}
.promo-table{min-width:1500px;margin:0;border:none}
.promo-table th,.promo-table td{white-space:nowrap;vertical-align:top;
padding:6px 10px;font-size:13px}
/* ⚠️ min-width 必须有：主图/ID/店铺/团队 都是 nowrap，会把可换行的名称列压成竖排 */
.promo-table td.promo-name{white-space:normal;min-width:170px;max-width:220px}
/* ⚠️ 这列是整张表"最高"的元凶（2026-09-30 实测）：窄格子会把解释文字挤成 5~6 行，
一个格子就把整行 17 个格子一起顶起来。放宽到 620px 让文字横向铺开 → 全表矮 15%。
再想矮就得改交互（默认折一行、点开看全），那属于功能改动，不在这里做。 */
.promo-table td.promo-why-cell{white-space:normal;min-width:430px;max-width:620px}
.promo-table tbody tr:hover{background:#fafbfc}
/* 第 1 列主图（2026-09-30）：44 → 34px，这页表本来就高，图片别抢行高 */
.promo-table td.promo-thumb{padding-left:10px;padding-right:6px}
.promo-table .item-thumb{width:34px;height:34px;border-radius:4px}
/* 「为什么给这个建议」 */
.promo-why-cell .reason{font-size:12.5px;color:#344054;line-height:1.45}
.promo-why-cell .why{margin:3px 0 0;padding-left:15px;font-size:12px;
color:#667085;line-height:1.5}
.promo-why-cell .why li{margin-bottom:0}
.promo-reason{margin-top:8px;padding:8px 10px;background:#f8fafc;
border-left:3px solid var(--brand);border-radius:0 6px 6px 0}
/* 独立使用的理由列表（单品详情页用） */
ul.why{margin:8px 0 0;padding-left:20px;font-size:13px;color:#475467;line-height:1.8}
ul.why li{margin-bottom:2px}
/* 设置页 / 导入页的表单 */
.settings-form{background:var(--card);border:1px solid var(--line);
border-radius:10px;padding:18px 20px;max-width:640px;box-shadow:var(--shadow)}
.settings-form label{display:block;font-size:13px;color:#344054;margin-bottom:16px}
.settings-form label span{display:block;margin-bottom:6px;font-weight:600}
.settings-form input,.settings-form select{width:100%;margin-top:2px;padding:9px 11px;
border:1px solid #d0d5dd;border-radius:7px;font-size:13.5px;font-family:inherit;
color:#101828;background:#fff;box-sizing:border-box}
.settings-form input:focus,.settings-form select:focus{outline:none;
border-color:var(--brand);box-shadow:0 0 0 3px rgba(47,124,246,.1)}
.settings-form .hint{display:block;margin-top:5px;font-size:12px;color:var(--muted)}
.settings-form .form-foot{display:flex;gap:10px;justify-content:flex-end;padding-top:4px}
/* 单价/进度条之类的轻量盒子 */
.progress-box{background:var(--card);border:1px solid var(--line);border-radius:10px;
padding:14px 16px;margin-bottom:14px}
.progress-box .bar{height:6px;background:#eef1f5;border-radius:999px;overflow:hidden;margin-top:8px}
.progress-box .bar > i{display:block;height:100%;background:var(--brand);border-radius:999px;
transition:width .3s ease}
/* 行内代码（算账口径里用了 ） */
code{background:#f2f4f7;border:1px solid #e4e7ec;border-radius:4px;
padding:1px 5px;font-size:12.5px;font-family:ui-monospace,Consolas,monospace;color:#344054}
/* 窄屏：表格靠 .table-scroll 横向滚动，内容一律不隐藏 */
@media (max-width:900px){
.promo-table th,.promo-table td{padding:9px 10px;font-size:12.5px}
}
/* ══════════════════════════════════════════════════════════════════
视觉精修 v1.17.2 · 表格列宽可拖（老板：有些列空的很多，想拉长缩小）
回退办法：删掉本段即可（table_resize.js 也要一起去掉）
══════════════════════════════════════════════════════════════════ */
/* 拖过列宽的表改成固定布局 —— 不这样，浏览器会把宽度又"平均分配"回去 */
table.col-resize{table-layout:fixed}
/* 拖窄了别让字压到隔壁格子上（默认宽度就是原来的宽度，所以不拖不会截断） */
table.col-resize th,table.col-resize td{overflow:hidden;text-overflow:ellipsis}
/* 表头右边缘那根拖拽条。
⚠️ th 是 position:sticky，它本身就是"定位祖先"，所以拖拽条用 absolute 就好，
⛔ 千万别给 th 加 position:relative —— 会把 sticky 表头干掉。 */
.col-h{position:absolute;top:0;right:0;width:6px;height:100%;
cursor:col-resize;z-index:4;touch-action:none}
.col-h::after{content:"";position:absolute;left:2px;top:5px;bottom:5px;width:2px;
border-radius:2px;background:transparent;transition:background .12s ease}
.col-h:hover::after{background:#c3cddd}
.col-h.dragging::after{background:var(--brand,#2563eb)}
/* 正在拖的时候，整页都是左右拉伸指针，且不许选中文字 */
body.col-dragging{cursor:col-resize!important;user-select:none!important}
body.col-dragging *{user-select:none!important}
/* ===========================================================================
视觉精修 v1.17.7 —— 设计师排行改卡片式
老板 2026-09-23：「改成一块一块的形式，不要一行的那种，我要适配到企微侧边栏」
⚠️ 卡片必须能在 ~360px 宽的企微侧边栏里正常显示，所以：
· 网格用 auto-fill + minmax —— 宽屏自动多列、窄屏自动一列，不用媒体查询硬切
· 卡片内部一律 flex/grid 分配，不写死宽度
=========================================================================== */
.dc-grid{
display:grid;gap:12px;
/* ⚠️ 必须用 min(330px,100%)：窗口比 330px 还窄时（企微侧边栏 360~400px）
minmax(330px,1fr) 会直接撑破容器，右边内容被切掉 —— 踩过。 */
grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));
}
.dc-card{
/* ⚠️ min-width:0 是必须的：栅格子项默认 min-width:auto，
会被内部 nowrap 的内容（比如「近30天 · 近7天 0」）撑宽 → 整页横向溢出。 */
min-width:0;
container-type:inline-size; /* 让下面的 @container 能按「卡片自己有多宽」判断 */
background:#fff;border:1px solid var(--line);border-radius:10px;
padding:12px 14px;display:flex;flex-direction:column;gap:10px;
transition:box-shadow .15s,border-color .15s;
}
/* ⭐ 按容器宽度（不是视口宽度）判断：卡片自己被挤窄了就变 2 列。
这样挂进企微侧边栏（~360px）时不用管视口，卡片自己会适配。 */
@container (max-width:350px){
.dc-nums{grid-template-columns:repeat(2,1fr);row-gap:10px}
}
.dc-card:hover{border-color:#c9d4e4;box-shadow:0 2px 10px rgba(16,24,40,.06)}
.dc-card.dc-top{border-left:3px solid var(--brand)}
/* 头：名次 + 名字 + 综合分 */
.dc-head{display:flex;align-items:flex-start;gap:10px}
.dc-rank{
flex:none;width:26px;height:26px;border-radius:7px;background:#eef2f7;color:#5a6572;
font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;
font-variant-numeric:tabular-nums;
}
.dc-rank.m1{background:#fff2cc;color:#a06a00}
.dc-rank.m2{background:#eef1f5;color:#5c6570}
.dc-rank.m3{background:#f7e9dd;color:#9a5f2a}
.dc-who{flex:1;min-width:0}
.dc-name{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dc-name strong{font-size:14.5px;color:#1d2836}
.dc-sub{font-size:12px;color:#7a8698;margin-top:3px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-sub b{color:#4a5560;font-weight:600}
.dc-score{flex:none;text-align:center;line-height:1.15}
.dc-score b{display:block;font-size:19px;font-weight:700}
.dc-score span{font-size:11px;color:#98a2b3}
/* 中间四个数字 */
.dc-nums{
display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
background:#f8fafc;border-radius:8px;padding:8px 4px;
}
.dc-n{text-align:center;min-width:0}
.dc-n b{display:block;font-size:16px;font-weight:700;color:#1d2836;
font-variant-numeric:tabular-nums;line-height:1.25}
.dc-n span{font-size:11px;color:#8a94a6;display:block;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-n.dc-warn b,.dc-n.dc-warn span{color:#c9372c}
/* 底部：金额 + 趋势 + 按钮 */
.dc-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dc-amt{font-size:14px;font-weight:700;color:#1d2836;font-variant-numeric:tabular-nums}
.dc-avg{font-size:11.5px;color:#98a2b3}
.dc-foot .spacer{flex:1}
.dc-foot .btn{height:30px;padding:0 12px;font-size:12.5px}
/* 空状态 */
.empty-box{
background:#fff;border:1px solid var(--line);border-radius:10px;
padding:40px 20px;text-align:center;color:#8a94a6;font-size:13.5px;
}
/* 窄屏（企微侧边栏）：一列铺满 + 数字略小 */
@media (max-width:560px){
.dc-grid{grid-template-columns:minmax(0,1fr);gap:10px}
.dc-card{padding:11px 12px}
.dc-n b{font-size:15px}
.dc-score b{font-size:17px}
}
/* 很窄（<380px）：四个数字挤成两行 */
@media (max-width:380px){
.dc-nums{grid-template-columns:repeat(2,1fr);row-gap:10px}
}
/* ==========================================================================
设计师卡片改版 —— 名字下挂状态 + 近1个月/近3个月 两套接单情况（2026-10-02）
老板：「把 最近接单 和 会做的单子 什么的 放到名字下面；
两块接单情况 近1个月的放上面、近3个月的放下面」
⚠️ 新样式一律用 `dw-` 前缀，**绝不改 `dc-nums` / `dc-foot` / `dc-sub`** ——
那几个类「客服数据」页（service_stat.html）也在用，改了会把那一页一起改掉。
⚠️ 卡片在企微侧边栏里只有 ~380px 宽，所有数字必须留得住：
过长的（154,152 / 1,939.50）靠容器查询降字号，⛔ 不能撑破。
========================================================================== */
/* ── 名字下面那行：最近接单 + 在做中 ── */
.dw-sub{
display:flex;align-items:center;gap:4px;flex-wrap:nowrap;
font-size:12px;color:#5a6572;margin-top:3px;min-width:0;
}
.dw-sub b{color:#1d2836;font-weight:600;font-variant-numeric:tabular-nums}
.dw-sub .k{color:#8a94a6;font-size:11px;white-space:nowrap}
.dw-sub em{font-style:normal;font-size:10.5px;color:#98a2b3;white-space:nowrap}
.dw-sub .sp{flex:1;min-width:6px}
.dw-dot{flex:none;width:7px;height:7px;border-radius:50%;background:#cbd3dd}
.dw-dot.ok{background:#1a9d63}
.dw-dot.info{background:var(--brand)}
.dw-dot.warn{background:#c47f17}
.dw-dot.mut{background:#cbd3dd}
/* ── 「会做的单子」那个小名头（标签行前面） ── */
.dw-k{
flex:none;font-size:11px;color:#8a94a6;background:#f2f4f7;
border-radius:4px;padding:0 6px;line-height:1.7;white-space:nowrap;
}
/* ── 接单情况：2 行小表格（行=窗口，列名共用） ── */
.dw-tbl{border:1px solid #eaecf0;border-radius:8px;overflow:hidden}
.dw-tr{
display:grid;align-items:center;
/* ⚠️ 第一列要放得下「近1个月」+ 下面那行日期（08-21 ~ 09-20）。
64px 时日期会差几像素露出来（实测 60 > 56），所以给到 72px。 */
grid-template-columns:72px repeat(4,minmax(0,1fr));
}
.dw-tr + .dw-tr{border-top:1px solid #f0f2f5}
.dw-tr .rl{
display:flex;flex-direction:column;justify-content:center;
padding:4px 0 4px 8px;font-size:11.5px;font-weight:600;color:#5a6572;
line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dw-tr .rl i{font-style:normal;font-size:8.5px;font-weight:400;color:#aab4c0}
.dw-tr .cv{
text-align:center;font-size:13.5px;font-weight:700;color:#1d2836;
font-variant-numeric:tabular-nums;letter-spacing:-.2px;
padding:6px 1px;border-left:1px solid #f0f2f5;
white-space:nowrap;overflow:hidden;
}
.dw-th{background:#fafbfc}
.dw-th .rl{padding:0}
.dw-th span{font-size:10.5px;font-weight:400;color:#98a2b3;padding:4px 1px}
/* 主角：近 1 个月 */
.dw-now{background:#eef4ff}
.dw-now .rl{color:#1d4ed8}
.dw-now .cv{color:#1b4f9c;border-left-color:#dbe7fb}
/* 退款率按高低上色。⚠️ 必须带 `.dw-tr .cv` 前缀（0,3,0），
否则会输给上面的 `.dw-now .cv`（0,2,0），红黄会被盖成蓝的 —— 踩过。 */
.dw-tr .cv.rt.ok{color:#15803d}
.dw-tr .cv.rt.warn{color:#b45309}
.dw-tr .cv.rt.bad{color:#c9372c}
.dw-tr .cv.rt.mut{color:#cbd3dd}
/* ── 底下：案例库那行 + 看他的单 ── */
.dw-foot{
display:flex;align-items:center;gap:6px;flex-wrap:nowrap;
border-top:1px dashed #eaecf0;padding-top:7px;
font-size:11.5px;color:#5a6572;min-width:0;
}
.dw-foot .sp{flex:1;min-width:4px}
.dw-case{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dw-case i{font-style:normal;margin-right:3px}
.dw-case.dim{color:#98a2b3}
/* ⭐ 2026-10-02：这一格从 `em` 改成了**可点的链接**（点开看他的案例），
所以要显式去掉下划线；hover 才出现，提示「这里能点」。 */
.dw-cn{font-style:normal;color:var(--brand);font-size:11px;flex:none;white-space:nowrap;
text-decoration:none;cursor:pointer}
.dw-cn:hover{text-decoration:underline}
.dw-foot .btn{height:26px;padding:0 9px;font-size:11.5px;flex:none}
.dw-eval{
font-size:11px;color:#98a2b3;margin-top:-6px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* 卡片被挤窄（企微侧边栏 / 手机）时，把表格里的字降一档，别撑破 */
@container (max-width:355px){
.dw-tr .cv{font-size:12.5px}
.dw-tr{grid-template-columns:58px repeat(4,minmax(0,1fr))}
.dw-tr .rl{font-size:11px;padding-left:6px}
.dw-tr .rl i{font-size:8.5px}
}
@container (max-width:310px){
.dw-tr .cv{font-size:11.5px}
.dw-sub em{display:none}
}
/* ===========================================================================
视觉精修 v1.17.7（续）—— 订单预警页
⚠️ 四个类别卡片也用 auto-fill + min(240px,100%)：
窄到企微侧边栏那样也不会撑破（跟设计师排行卡片同一个坑，见上面的注释）。
=========================================================================== */
.alert-kinds{
display:grid;gap:12px;margin-bottom:16px;
grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));
}
/* ⭐ 2026-10-02 第 5 类加进来后是 **5 张卡** —— 240px 一列只放得下 4 张，
第 5 张会掉到第二行、右边空一大块（很难看）。这里只在**真的有 5 张**时
把列宽收窄，让 5 张排成一行。
⚠️ 用 `:has()` 而不是直接改上面的规则 —— 4 张卡时（老样子）**一个像素都不动**。
⚠️ 万一浏览器不认 `:has()`（Edge 105 以下），就回落到原来的 4+1 排版，不会坏。 */
.alert-kinds:has(> :nth-child(5)){
grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));
}
.alert-kind{
display:block;min-width:0;
background:#fff;border:1px solid var(--line);border-radius:10px;
padding:12px 14px;text-decoration:none;color:inherit;
transition:border-color .15s,box-shadow .15s;
}
.alert-kind:hover{border-color:#c9d4e4;box-shadow:0 2px 10px rgba(16,24,40,.06)}
.alert-kind.on{border-color:var(--brand);background:#f5f8ff;
box-shadow:inset 0 0 0 1px var(--brand)}
.ak-num{font-size:22px;font-weight:700;color:#1d2836;
font-variant-numeric:tabular-nums;line-height:1.2}
.alert-kind.on .ak-num{color:var(--brand)}
.ak-name{font-size:13.5px;font-weight:600;color:#344054;margin-top:2px}
.ak-desc{font-size:11.5px;color:#98a2b3;margin-top:4px;line-height:1.5}
.alert-title{font-size:15px;font-weight:600;color:#1d2836;margin:18px 0 10px}
.alert-title .hint{font-weight:400;margin-left:8px}
/* 占比徽标：60% 以上标红、50% 以上标橙 */
.ratio-badge{
display:inline-block;padding:1px 7px;border-radius:6px;font-size:12px;
font-weight:600;font-variant-numeric:tabular-nums;
background:#f2f4f7;color:#475467;
}
.ratio-badge.warm{background:#fff4e5;color:#b25e09}
.ratio-badge.hot{background:#fdecea;color:#c9372c}
/* ==========================================================================
视觉精修 v1.17.8 —— 能力标签（2026-09-23）
老板：「根据设计师接单的宝贝名称识别他能做哪些，标签写上去，派单时参考」
⚠️ 用 .skill-tag 而不是 .tag —— 项目里 .tag 是「岗位/身份」的徽标，
全局覆盖那个类会把别处（提成组、员工页）的徽标一起改掉（踩过）。
⚠️ 标签都很短（2~6 个字），所以 nowrap + 小字号，窄屏才排得下。
========================================================================== */
/* ── 标签本体 ── */
.skill-tag{
display:inline-flex;align-items:center;gap:3px;
padding:1px 8px;border-radius:999px;font-size:12px;line-height:1.8;
background:#eef4ff;color:#1d4ed8;border:1px solid #c7dbfe;
white-space:nowrap;
}
.skill-tag b{
font-weight:600;color:#1e40af;font-size:11.5px;
font-variant-numeric:tabular-nums;
}
/* 手工标的：换个颜色，一眼能跟"系统推的"区分开 */
.skill-tag.sk-manual{background:#f0fdf4;color:#15803d;border-color:#bbf7d0}
.skill-tag.sk-manual b{color:#166534}
/* 被去掉的（弹窗里） */
.skill-tag.sk-off{background:#f6f7f9;color:#98a2b3;border-color:#e4e7ec;text-decoration:line-through}
.skill-tag.sk-off button{
background:none;border:none;color:#1d4ed8;cursor:pointer;
font-size:11.5px;padding:0 0 0 4px;text-decoration:none;
}
.skill-tag > button{
background:none;border:none;color:#1d4ed8;cursor:pointer;
font-size:13px;line-height:1;padding:0 0 1px 2px;opacity:.55;
}
.skill-tag > button:hover{opacity:1}
/* ── 设计师排行卡片里那一行 ── */
.dc-tags{
display:flex;flex-wrap:wrap;gap:5px;align-items:center;
margin:8px 0 2px;padding-top:8px;border-top:1px dashed #eaecf0;
}
.dc-tags-none{opacity:.85}
.skill-edit{
margin-left:auto;background:none;border:1px dashed #d0d5dd;border-radius:6px;
color:#667085;font-size:11.5px;padding:1px 7px;cursor:pointer;white-space:nowrap;
}
.skill-edit:hover{color:var(--brand);border-color:var(--brand);border-style:solid}
/* ── 派单详情：报名的人下面那行 ── */
.d-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;align-items:center}
.d-signup .skill-tag{font-size:11.5px;padding:0 7px}
/* ── 员工列表那列（⚠️ 只放纯文字，这一页 3800 多人，别加重）── */
.st-tags{font-size:12.5px;color:#475467;line-height:1.7}
.st-tags-cell{max-width:180px}
/* ── 「能力标签」页的卡片 ── */
.sk-card{
background:#fff;border:1px solid var(--line,#e7eaf0);border-radius:10px;
padding:16px 18px;
}
.sk-card h2{font-size:15px;margin:0 0 12px;padding-left:9px;border-left:3px solid var(--brand,#2563eb)}
.sk-card table{margin:0}
.sk-form label{display:block;font-size:13px;color:#475467;margin:10px 0 5px;font-weight:600}
.sk-form label:first-child{margin-top:0}
.sk-form .input-suffix{max-width:340px}
/* ── 编辑弹窗 ── */
.sk-mask{
position:fixed;inset:0;background:rgba(16,24,40,.45);z-index:9000;
display:none;align-items:center;justify-content:center;padding:16px;
}
.sk-dlg{
background:#fff;border-radius:12px;width:100%;max-width:520px;
max-height:86vh;display:flex;flex-direction:column;overflow:hidden;
box-shadow:0 18px 48px rgba(16,24,40,.22);
}
.sk-head{
display:flex;align-items:center;justify-content:space-between;
padding:13px 16px;border-bottom:1px solid #eaecf0;font-size:15px;
}
.sk-x{background:none;border:none;font-size:20px;line-height:1;color:#98a2b3;cursor:pointer;padding:0 2px}
.sk-x:hover{color:#475467}
.sk-body{padding:14px 16px 18px;overflow:auto}
.sk-sec{margin-bottom:16px}
.sk-sec:last-child{margin-bottom:0}
.sk-lab{font-size:12.5px;color:#667085;font-weight:600;margin-bottom:8px}
.sk-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sk-add{display:flex;gap:8px;flex-wrap:wrap}
.sk-add select{flex:0 0 auto;min-width:150px}
.sk-add input{flex:1;min-width:130px}
/* 窄屏（企微侧边栏 ~400px）：按钮整行，别挤成一条缝 */
@media (max-width:460px){
.sk-add{flex-direction:column}
.sk-add select,.sk-add input,.sk-add button{width:100%}
.dc-tags .skill-edit{margin-left:0}
}
/* ===========================================================================
视觉精修 v1.17.9 · 手机端适配（2026-09-23）
老板在手机上打开线上系统：「这个页面乱码了，能不能手机端、电脑端通用？」
诊断：**不是乱码，是布局没适配** —— 左边 214px 的菜单没收起来，
正文被挤成一条缝。而原来的窄屏规则是 `@media (max-width:560px)`，
老板那台手机的 CSS 宽度约 650px，**根本没触发**；
而且那条规则是"把菜单藏掉"，手机上就没导航了。
这一段的做法：
① 断点提到 1000px（214px 菜单 + 正文，不到 1000 都在受罪）
② 菜单从"占一列"改成"抽屉"：平时滑出屏幕外，点 ☰ 滑进来、点黑幕关掉
③ 顶栏显示当前是谁 + 退出（手机上没地方看这些）
④ 多列表格改成可以横着滑，别把 15 列挤成两行
⚠️ 桌面端（>1000px）**这一整段都不生效**，电脑上的样子一点不变。
=========================================================================== */
/* 顶栏和黑幕：桌面端完全不显示 */
.mbar{display:none}
.nav-backdrop{display:none}
@media (max-width:1000px){
/* ── ① 菜单改成抽屉 ── */
html,body{overflow-x:hidden}
/* ⚠️ 桌面端是「body 固定 100vh、正文在里面自己滚」（为了钉住表头）。
手机上必须改回「整页正常滚」，否则 body 的 overflow:hidden 会把
一屏以下的内容**剪掉且滚不动**。
⛔ 这里 height/overflow 一定要显式写，只写 display:block 是不够的
（那样 100vh+hidden 还在生效）。 */
body.with-side{display:block;height:auto;min-height:100%;overflow:visible}
body.with-side .main{height:auto;min-height:100vh;overflow:visible}
body.with-side .page{overflow:visible;flex:none;min-height:0}
.side{
position:fixed;left:0;top:0;bottom:0;z-index:60;
width:min(76vw,250px);flex:none;height:100vh;
transform:translateX(-105%);transition:transform .18s ease;
box-shadow:0 0 30px rgba(0,0,0,.35);
}
body.nav-open .side{transform:none}
.nav-backdrop{position:fixed;inset:0;background:rgba(16,24,40,.45);z-index:55}
body.nav-open .nav-backdrop{display:block}
/* ── ② 窄屏顶栏 ── */
.mbar{display:flex;align-items:center;gap:10px;
background:#1f2b3a;color:#fff;padding:8px 12px;
position:sticky;top:0;z-index:40}
.mbar-btn{background:none;border:1px solid #3a4759;color:#fff;border-radius:8px;
font-size:16px;line-height:1;padding:6px 11px;cursor:pointer;flex:none}
.mbar-btn:active{background:#2a3849}
.mbar-title{font-weight:600;font-size:15px;white-space:nowrap}
.mbar-user{font-size:12.5px;color:#a9b8c9;margin-left:auto;
max-width:32vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mbar-out{color:#8fa3b8;font-size:12.5px;text-decoration:none;flex:none}
/* ── ③ 正文占满宽度 ── */
body.with-side .page{padding-left:12px;padding-right:12px;box-sizing:border-box}
.page-head{display:block}
.page-head h1{font-size:18px}
.app-foot{flex-wrap:wrap;padding-left:12px;padding-right:12px}
.app-foot .hint{display:none}
/* ── ④ 表格：能横着滑 ──
⚠️ 桌面端 `.table-wrap` 被设成 overflow:visible（为了表头 sticky），
手机上必须改回 auto，否则 15 列的表格会被挤成一堆断行。 */
body.with-side .table-wrap{
overflow-x:auto;-webkit-overflow-scrolling:touch;
max-height:none;overscroll-behavior-x:contain;
}
/* 多列表格给个最小宽度 —— 让它横向滑，而不是把每格压成竖排 */
table.wide{min-width:680px}
/* ── ⑤ 各种格子窄屏堆一列 ── */
.filter-bar,.toolbar{flex-wrap:wrap;gap:8px}
.stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}
.two-col,.grid2{grid-template-columns:1fr}
}
/* 更窄（企微侧边栏 ~400px、小屏手机）：再收一点 */
@media (max-width:460px){
.mbar-title{font-size:14px}
.mbar-user{max-width:26vw}
.side{width:min(82vw,240px)}
table.wide{min-width:600px}
body.with-side .page{padding-left:9px;padding-right:9px}
}
/* ==========================================================================
视觉精修 v1.18.2 · 窄屏下的「显示列」菜单（2026-09-23）
老板在手机上点「显示列」，面板只露出左边一小条 ——
因为它 `position:absolute; right:0` 是往**左**展开 min-width:200px 的浮层，
而窄屏上这个按钮靠屏幕左边 → 菜单整个跑到屏幕左侧外，
再被 `html,body{overflow-x:hidden}`（窄屏那段的）裁掉，只剩几十像素。
修法：窄屏下**不做浮层**，改成文档流里的整行（按钮下面直接展开）——
手机上这样反而更好点：不遮挡内容、不用管溢出、也不用担心被裁。
⚠️ 桌面端（>1000px）这一段完全不生效，电脑上的浮层样子一点不变。
========================================================================== */
@media (max-width:1000px){
.col-picker{position:static;flex:1 1 100%;min-width:0}
.col-menu{
position:static;right:auto;top:auto;
min-width:0;width:auto;max-height:none;margin-top:8px;
box-shadow:none;
}
/* 浮动层里可以 nowrap 让列名一行一个，进了文档流就别硬撑宽度了 */
.col-item{white-space:normal}
}
/* ==========================================================================
视觉精修 v1.18.4 · 表格对齐 + 金额格居中（2026-09-23）
老板：「金额数字这边没有居中，你居中下，其他列也看下，优化下」
① 关键问题：金额格里的 要**在格子里居中**，而不只是"字在框里居中"。
它是 `width:100%; max-width:110px` —— 列一宽，输入框就贴左边，
框里的字再怎么居中，整体看着也是偏的。
② 顺带把对齐规则理一遍并写死优先级：默认全居中；只有长文本列（备注、商品标题）
左对齐 —— 而且**表头也跟着左对齐**，不然头居中、内容靠左，看着是歪的。
========================================================================== */
td.cell-edit,td.cell-edit .cell-input,td.num,th.num{text-align:center}
td .cell-input{
display:block;
margin:0 auto; /* ← 输入框本身在格子里居中（这才是老板说的"没居中"） */
}
td[data-col="note"],th[data-col="note"],
td[data-col="item_title"],th[data-col="item_title"]{text-align:left}
/* 序号列窄，居中更整齐 */
td[data-col="no"],th[data-col="no"]{text-align:center}
/* ==========================================================================
视觉精修 v1.18.6 · 成员弹窗里的「名字」列要能截断（2026-09-23）
老板：「有些名字特别长，他就显示的特别长，整个页面都没了，导致其他的列看不到了」
根因其实在数据：`staff` 表里有 47 个"名字"长度 > 20（最长的 101 字）——
那是**整条备注被当成了一个人名**（解析器遇到"一条备注写了好几个人"的格式时切错了）。
数据要单独治，但**界面必须扛得住**：再长的名字也只能占一格。
做法：名字单独包 ``，超出就省略号，鼠标移上去看全文。
⚠️ 「未授权」标签放在 span **外面**，否则会被一起截掉（那就看不出授权状态了）。
========================================================================== */
.mem-name{
display:inline-block;
max-width:230px; /* 正常名字 5~8 个字，230px 足够；再长就是脏数据了 */
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
vertical-align:bottom;
}
/* 窄屏（企微侧边栏 / 手机）再收一点 */
@media (max-width:560px){
.mem-name{max-width:130px}
}
/* ==========================================================================
视觉精修 v1.18.11 · 订单预警：把「操作」列固定在右侧（2026-09-24）
老板要在这页加「处理结果 / 处理备注」，可表格本来就有 11 列，
加上去 13 列 ≈ 1450px —— 他那台机器内容区只有 ~880px，
结果「保存」按钮被推到屏幕外，要横滑才能点到（截图里看出来了）。
修法：**操作列 sticky 固定在右边**，横滑时它一直跟着 —— 点「处理」永远不用找。
顺手把「处理结果 / 处理备注」也改成弹窗里的输入项，表格只多一列窄按钮。
⚠️ sticky 的三个前提（这页都满足）：表格不能 overflow:hidden、
滚动容器只能一层（.table-wrap）、th 不能有 padding-top。
⚠️ 背景必须不透明，否则下面的字会透出来。
⚠️ 表头那格 z-index 要更高，不然会被表体的固定列盖住。
========================================================================== */
.alert-table th[data-col="ops"],
.alert-table td[data-col="ops"]{
position:sticky;right:0;
background:var(--card);
border-left:1px solid #d8dee8;
}
.alert-table th[data-col="ops"]{z-index:7}
.alert-table td[data-col="ops"]{z-index:2}
/* 鼠标划过整行时，固定那格也要跟着变色，否则看着像"断了一截" */
.alert-table tbody tr:hover td[data-col="ops"]{background:#f7f9fc}
/* ==========================================================================
视觉精修 v1.18.12 · 侧边栏「一级栏目 / 二级栏目」（2026-09-24）
老板：「总览放在第一页，然后我们配置下一级栏目和二级栏目…」
做法：一级栏目 = 可折叠的标题（.nav-group-head），二级 = 缩进在下面。
⚠️ 默认**全部展开**（他怕点两下才到）—— 想收的可以自己点，状态记在 localStorage。
⚠️ 当前页所在的那一组**强制展开**，否则"自己在哪一栏"都看不出来。
⚠️ 一级标题是 |