:root{
  --ink:#14505F; --ink-2:#0E3A45; --ink-3:#EAF3F5; --line:#BFD3D8;
  --amber:#BA7517; --amber-bg:#FDF3E7;
  --ok:#2F7A56; --ok-bg:#EAF5EF; --warn:#9A6A0B; --warn-bg:#FDF3E0;
  --err:#A32D2D; --err-bg:#FCEBEB; --muted:#6B7B80; --bg:#F6F9FA;
  --green:#2E7D46; --green-d:#24603A;
  --blue:#1565C0; --blue-d:#0F4C93;
  --radius:10px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg); color:#1E2E33; font-size:14px; line-height:1.6;
  -webkit-text-size-adjust:100%;
}
a{color:var(--ink);text-decoration:none}
a:hover{text-decoration:underline}

/* 顶栏 */
.topbar{
  position:sticky;top:0;z-index:50;background:var(--ink);color:#fff;
  display:flex;align-items:center;gap:12px;padding:0 16px;height:52px;
  box-shadow:0 1px 0 rgba(0,0,0,.08);
}
.brand{color:#fff;font-weight:600;font-size:15px;white-space:nowrap;letter-spacing:.3px}
.brand:hover{text-decoration:none}
.nav{display:flex;gap:6px;overflow-x:auto;flex:1;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
/* 宽屏：顶栏改成「品牌 | 按钮 | 账号」三栏，按钮组相对整页居中（窄屏仍靠左可横滑，否则最左边按钮会被顶出可视区） */
@media (min-width:1100px){
  .topbar{display:grid;grid-template-columns:1fr auto 1fr}
  .nav{justify-content:center;overflow:visible}
  .brand{justify-self:start}
  .topbar .who{justify-self:end}
}
.nav a{
  color:#fff;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.10);
  white-space:nowrap;font-size:13.5px;transition:filter .12s ease;
}
.nav a:hover{filter:brightness(1.14);color:#fff;text-decoration:none}
.nav a.on{box-shadow:inset 0 0 0 2px #fff;font-weight:600}
/* 按业务分组上色：一类 登记/看板｜二类 稽核｜三类 标准｜四类 考勤扣罚｜五类 主数据 */
.nav a.nv1{background:#2E7D46}
.nav a.nv2{background:#A35A00}
.nav a.nv3{background:#1D5F9E}
.nav a.nv4{background:#6A4C93}
.nav a.nv5{background:#46616B}
/* 顶栏身份标签：超级管理员 / 稽核 */
.who-tag{display:inline-block;margin-right:6px;padding:1px 7px;border-radius:999px;
  background:rgba(255,255,255,.18);font-size:11px;letter-spacing:.4px;
  border:1px solid rgba(255,255,255,.32)}
.who-tag.audit{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22)}
.nav a.on.nv1,.nav a.on.nv2,.nav a.on.nv3,.nav a.on.nv4,.nav a.on.nv5{filter:brightness(1.1)}
.topbar .who{font-size:12px;color:rgba(255,255,255,.6);white-space:nowrap}

/* 布局 */
.wrap{max-width:1180px;margin:0 auto;padding:16px 16px 64px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
h1{font-size:20px;margin:0;font-weight:600;letter-spacing:.2px}
h2{font-size:15px;margin:0 0 12px;font-weight:600;color:var(--ink-2)}
.sub{color:var(--muted);font-size:12.5px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:14px}
.card.tight{padding:12px}
.flex{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.grow{flex:1}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px;margin-bottom:14px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.kpi .k{font-size:12px;color:var(--muted)}
.kpi .v{font-size:22px;font-weight:600;color:var(--ink);letter-spacing:.5px;line-height:1.3}
.kpi .v small{font-size:12px;font-weight:400;color:var(--muted);margin-left:2px}
.kpi.amber .v{color:var(--amber)}
.kpi.amber{background:var(--amber-bg);border-color:#F0DCC0}

/* 表单 */
label.f{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px}
label.f .req,.req{color:var(--err)}
input,select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;
  font-size:16px;font-family:inherit;background:#fff;color:#1E2E33;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(20,80,95,.08)}
input[type=checkbox]{width:auto;padding:0}
.field{margin-bottom:14px}
.field-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hint{font-size:12px;color:var(--muted);margin-top:5px}

/* 按钮 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 16px;border-radius:8px;border:1px solid var(--line);background:#fff;
  color:var(--ink);font-size:14px;font-family:inherit;cursor:pointer;white-space:nowrap;
}
.btn:hover{background:var(--ink-3);text-decoration:none}
.btn.primary{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.primary:hover{background:var(--ink-2)}
.btn.amber{background:var(--amber);border-color:var(--amber);color:#fff}
.btn.amber:hover{filter:brightness(.95)}
.btn.danger{color:var(--err);border-color:#EBC4C4}
.btn.danger:hover{background:var(--err-bg)}
.btn.block{width:100%;padding:13px}
.btn.sm{padding:5px 10px;font-size:12.5px}
.btn:disabled{opacity:.5;cursor:not-allowed}
/* 保存按钮三态：默认（墨青）→ 有未保存改动（琥珀）→ 刚保存成功（绿，短暂） */
.btn.dirty,.btn.primary.dirty{background:var(--amber);border-color:var(--amber);color:#fff}
.btn.dirty:hover{filter:brightness(.95)}
.btn.saved,.btn.primary.saved{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.saving{opacity:.65;cursor:progress}

/* 表格 */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
table{width:100%;border-collapse:collapse;font-size:13px;white-space:nowrap}
th{
  background:var(--ink);color:#fff;font-weight:500;text-align:left;
  padding:9px 10px;font-size:12.5px;position:sticky;top:0;
}
td{padding:9px 10px;border-bottom:1px solid #E9F0F2;vertical-align:middle}
tbody tr:nth-child(even){background:#FAFCFD}
tbody tr:hover{background:var(--ink-3)}
tfoot td{background:var(--ink-3);font-weight:600;border-top:2px solid var(--line)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td input,td select{padding:7px 9px;font-size:13px;border-radius:6px}
.bar{display:inline-block;height:7px;border-radius:4px;background:var(--ink);vertical-align:middle;min-width:2px}
.bar.amber{background:var(--amber)}

/* 标记 */
.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11.5px;line-height:1.6}
.badge.ok{background:var(--ok-bg);color:var(--ok)}
.badge.warn{background:var(--warn-bg);color:var(--warn)}
.badge.err{background:var(--err-bg);color:var(--err)}
.badge.gray{background:#EDF1F2;color:var(--muted)}

/* 提示条 */
.msg{padding:11px 14px;border-radius:8px;margin-bottom:12px;font-size:13.5px;border:1px solid}
.msg.ok{background:var(--ok-bg);border-color:#C4E0D1;color:#1F5C40}
.msg.err{background:var(--err-bg);border-color:#EFC9C9;color:#8A2626}
.msg.warn{background:var(--warn-bg);border-color:#EBD6AE;color:#7A5408}
.msg.info{background:var(--ink-3);border-color:var(--line);color:var(--ink-2)}

/* 选项卡 */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto}
.tabs a{padding:9px 14px;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;font-size:13.5px}
.tabs a:hover{text-decoration:none;color:var(--ink)}
.tabs a.on{color:var(--ink);border-bottom-color:var(--ink);font-weight:500}

/* 首页卡片 */
.entry{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.entry a{
  display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;color:#1E2E33;transition:border-color .15s,transform .15s;
}
.entry a:hover{text-decoration:none;border-color:var(--ink);transform:translateY(-1px)}
.entry .t{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:4px}
.entry .d{font-size:12.5px;color:var(--muted);line-height:1.55}
.entry .n{margin-top:10px;font-size:12px;color:var(--amber)}

/* 考勤网格 */
.grid-att{font-size:12px}
.grid-att td{padding:2px 1px;text-align:center;border-bottom:1px solid #F0F5F6}
.grid-att th{padding:4px 1px;font-size:11px}
.grid-att th.tot{min-width:36px}
.cell{width:23px;height:23px;line-height:23px;border-radius:5px;display:inline-block;cursor:pointer;
  user-select:none;font-size:11px;text-align:center;transition:background .12s}
.cell.empty{background:#F2F6F7}
/* 默认上班：淡到不占注意力；休/假才是要一眼看到的 */
.cell.work{background:#F4F8F9;color:#C6D6D9}
.cell.rest{background:#E8F0D9;color:#41631A;font-weight:600;box-shadow:inset 0 0 0 1px #D3E3B7}
.cell.leave{background:#FBEAD3;color:#9A6212;font-weight:600;box-shadow:inset 0 0 0 1px #EBD6AE}
.sticky-col{position:sticky;left:0;background:#fff;z-index:2;box-shadow:1px 0 0 var(--line)}

/* 详情弹层 */
details summary{cursor:pointer;color:var(--ink);font-size:13px}
.empty-state{text-align:center;padding:38px 16px;color:var(--muted)}
.empty-state .big{font-size:15px;color:var(--ink-2);margin-bottom:6px}

@media (max-width:640px){
  .wrap{padding:12px 10px 80px}
  h1{font-size:18px}
  .field-2{grid-template-columns:1fr}
  .card{padding:13px}
  table{font-size:12.5px}
  th,td{padding:8px 8px}
  .topbar{height:48px;padding:0 10px}
  .brand{font-size:14px}
  .nav a{padding:6px 9px;font-size:13px}
  .topbar .who{display:none}
  .kpis{grid-template-columns:1fr 1fr;gap:8px}
  .kpi{padding:10px}
  .kpi .v{font-size:19px}
}

/* ---------------- 业务监控看板（手机优先，为长截图设计） ---------------- */
.b-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:16px}
.b-kpi-item{background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 10px;display:flex;flex-direction:column;gap:1px}
.b-kpi-item .k{font-size:11.5px;color:var(--muted);line-height:1.35}
.b-kpi-val{display:flex;align-items:baseline;gap:2px;line-height:1.15}
.b-kpi-val b{font-size:21px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
.b-kpi-val i{font-size:11px;font-style:normal;color:var(--muted);white-space:nowrap}
.b-kpi-item.alert{background:var(--amber-bg);border-color:#F0DCC0}
.b-kpi-item.alert .b-kpi-val b{color:var(--amber)}

.b-block{margin-bottom:18px;padding:12px 11px 14px;border-radius:12px;border:1px solid transparent}
/* 当日＝绿，当月/自定义＝蓝 */
.b-block.is-day{background:#F3FAF4;border-color:#D3E8D6}
.b-block.is-month{background:#F2F7FD;border-color:#D5E3F5}
.b-block.is-custom{background:#F6F4FB;border-color:#E0DAF3}
.b-block-head{display:flex;align-items:baseline;gap:8px;margin-bottom:11px;padding-bottom:8px;
  border-bottom:2px solid var(--green)}
.b-block.is-month .b-block-head{border-bottom-color:var(--blue)}
.b-block.is-custom .b-block-head{border-bottom-color:#6A5ACD}
.b-block-title{font-size:13px;font-weight:600;color:#fff;letter-spacing:.6px;padding:2px 10px;
  border-radius:6px;background:var(--green);line-height:1.7}
.b-block.is-month .b-block-title{background:var(--blue)}
.b-block.is-custom .b-block-title{background:#6A5ACD}
.b-block-date{font-size:12.5px;color:var(--muted)}
.b-block-total{margin-left:auto;font-size:12.5px;color:var(--muted)}
.b-block-total b{color:var(--ink)}

/* 近 10 天趋势折线（SVG 等比缩放，文字全用 HTML 排，手机上也清楚） */
.tr-card{background:#fff;border:1px solid #DCE7EA;border-radius:9px;padding:9px 10px 6px;margin:0 0 6px}
.tr-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:1px}
.tr-title{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.tr-tag{font-size:11px;padding:1px 7px;border-radius:999px;line-height:1.6;border:1px solid transparent}
.tr-tag.ok{background:#E8F3EA;color:#24603A;border-color:#CFE4D4}
.tr-tag.warn{background:#FDF3E7;color:#9A6A0B;border-color:#EFDCC2}
.tr-tag.bad{background:#FBEAEA;color:#B23B3B;border-color:#EFC9C9}
.tr-tag.flat{background:#F1F5F6;color:#6B7C82;border-color:#DCE7EA}
.tr-meta{margin-left:auto;font-size:11.5px;color:var(--muted);white-space:nowrap}
.tr-svg{display:block;width:100%;height:auto}
.tr-x{display:flex;gap:2px;margin-top:2px;border-top:1px solid #EDF3F4;padding-top:3px}
.tr-xc{flex:1 1 0;min-width:0;text-align:center;line-height:1.3}
.tr-d{display:block;font-size:10px;color:var(--muted)}
.tr-v{display:block;font-size:11.5px;font-weight:600;color:#2E7D46;
  font-variant-numeric:tabular-nums;border-radius:4px}
.tr-xc.is-today .tr-d{color:#1F5B33;font-weight:600}
.tr-xc.is-today .tr-v{background:#2E7D46;color:#fff}

/* 环比：涨绿降红（业务量涨是好事），箭头写死避免歧义 */
.cmp{margin-left:6px;font-weight:600;white-space:nowrap}
.cmp.up{color:#2E7D46}
.cmp.down{color:#C0392B}
.cmp.flat{color:var(--muted)}
.cmp-note{margin-left:5px;font-size:11.5px;color:var(--muted);font-weight:400;white-space:nowrap}

.b-kpi-item.day{background:#F3FAF4;border-color:#D3E8D6}
.b-kpi-item.day .b-kpi-val b{color:var(--green-d)}
.b-kpi-item.month{background:#F2F7FD;border-color:#D5E3F5}
.b-kpi-item.month .b-kpi-val b{color:var(--blue-d)}

/* 门店筛选按钮：全部 + 各门店一排，手机上自动折行 */.store-chips{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 12px}
.store-chip{display:inline-block;padding:6px 15px;border-radius:999px;border:1px solid var(--line);
  background:#fff;color:var(--ink-2);font-size:13px;line-height:1.5;text-decoration:none;
  white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.store-chip:hover{border-color:var(--ink);color:var(--ink)}
.store-chip.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
/* 刷新按钮：填充主色 + 图标，和旁边的「时间段」区分开 */
.btn .rf-ico{display:inline-block;font-size:13px;line-height:1;margin-right:3px;
  vertical-align:1px;font-weight:400}
/* 悬浮刷新：翻到下半页时出现，随手就能刷 */
.fab-refresh{position:fixed;right:16px;bottom:22px;width:46px;height:46px;border-radius:50%;
  border:none;background:var(--ink);color:#fff;font-size:21px;line-height:1;cursor:pointer;
  box-shadow:0 4px 14px rgba(20,80,95,.35);z-index:60;display:none;padding:0;
  transition:transform .15s,background .15s}
.fab-refresh.show{display:block}
.fab-refresh:hover{background:var(--ink-2);transform:translateY(-1px)}
.fab-refresh:active{transform:scale(.94)}
@media (max-width:640px){
  .fab-refresh{right:13px;bottom:16px;width:44px;height:44px;font-size:20px}
}
@media (max-width:640px){
  .store-chips{gap:6px}
  .store-chip{padding:5px 11px;font-size:12.5px}
}

/* ---------------- 看板表格矩阵（行=姓名/门店，列=业务类别） ---------------- */
.mx-title{font-size:12.5px;font-weight:600;color:var(--ink-2);margin:14px 0 6px;padding-left:8px;
  border-left:3px solid var(--blue);line-height:1.25}
/* 标题后面那句口径说明：「笔数按类别 · 预估提成按业务名称」，弱化成灰色小字 */
.mx-hint{margin-left:8px;font-size:11px;font-weight:400;color:var(--muted)}
/* 「存成图片」按钮：贴在 ①② 标题行最右。用 float 而不是 flex ——
   标题是纯文本，做 flex 子项会被按钮挤得换行（「① 门店合/计」） */
.mx-shot{float:right;margin:-2px 0 2px 8px;padding:3px 10px;border-radius:999px;
  border:1px solid var(--line);background:#fff;color:var(--ink-2);
  font-size:11.5px;line-height:1.5;cursor:pointer;white-space:nowrap}
.mx-shot:hover{border-color:var(--ink);color:var(--ink)}
.mx-shot:active{transform:scale(.97)}
/* 按钮比标题行高，浮动会溢出到下一块；而下面的 .mx-wrap 有 overflow-x:auto
   （是个 BFC），BFC 会躲着浮动走 —— 表格会被挤窄 78px。给标题行收一下浮动 */
.mx-title::after{content:"";display:block;clear:both}
/* 存图预览层：手机上只能长按存相册，所以图片要够大、提示要写在最上面 */
.shot-mask{position:fixed;inset:0;background:rgba(16,32,38,.62);z-index:80;
  display:none;padding:16px;overflow:auto;-webkit-overflow-scrolling:touch}
.shot-mask.on{display:block}
.shot-box{max-width:980px;margin:12px auto;background:#fff;border-radius:12px;
  padding:12px 12px 14px;box-shadow:0 12px 40px rgba(0,0,0,.35)}
.shot-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin:0 2px 10px}
.shot-head b{font-size:14px;color:var(--ink)}
.shot-head span{font-size:12px;color:var(--muted)}
.shot-body{background:#F5F8F9;border:1px solid var(--line);border-radius:8px;
  padding:8px;overflow:auto;text-align:center}
.shot-body img{max-width:100%;height:auto;display:inline-block;
  -webkit-touch-callout:default;user-select:auto}
.shot-acts{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
@media (max-width:640px){
  .shot-mask{padding:8px}
  .shot-box{margin:6px auto;padding:10px 10px 12px}
  .shot-acts{justify-content:stretch}
  .shot-acts .btn{flex:1 1 0;text-align:center}
  .mx-shot{font-size:11px;padding:3px 8px}
}
.b-block.is-day .mx-title{border-left-color:var(--green)}
.b-block.is-custom .mx-title{border-left-color:#6A5ACD}
.mx-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;background:#fff;
  border:1px solid var(--line);border-radius:8px}
.mx{width:100%;border-collapse:collapse;font-size:12.5px;table-layout:fixed}
.mx th,.mx td{border-bottom:1px solid #EDF3F4;padding:7px 2px;text-align:center;
  font-variant-numeric:tabular-nums;overflow:hidden}
.mx tbody tr:last-child td{border-bottom:none}
.mx th{background:#F4F8F9;color:var(--ink);font-weight:600;font-size:11px}
/* 表头横排。以前列是「业务名称」（「新开1000M宽带+FTTR」十几个字），只能竖着写、
   还得给 132px 固定高度才不参差；现在列换成「类别」（宽带 / 套餐 / 新开户，两三个字），
   竖排就白占一屏高度了，改回横排 + 自动换行 */
.mx thead th{height:auto;padding:8px 5px;vertical-align:middle;line-height:1.25}
/* 类别列给个基准宽度。整表是 width:100% + fixed，宽度富余时会按各列声明值**等比例**摊开，
   所以这里声明的 70px 其实是「和门店列 84px 的相对比例」：类别只有 4 列时每列能摊到 ~165px，
   列多起来（十几个类别）门店列自动收回到 ~105px —— 两头都不难看，不用按列数写分支 */
.mx-v{width:70px;padding:8px 4px!important;vertical-align:middle}
.mx-v span{display:block;max-width:100%;font-size:11px;letter-spacing:.4px;line-height:1.25;
  padding:0;word-break:break-all}
.mx-name{text-align:left!important;padding-left:10px!important;width:84px;color:#1E2E33;
  font-weight:500;position:sticky;left:0;background:#fff;z-index:1;
  white-space:nowrap;text-overflow:ellipsis}
.mx thead .mx-name{background:#F4F8F9}
/* 合计业务量：2026-10-31 挪到最左边（原来是最后一列），跟门店/姓名贴在一起先看总量。
   宽度要容得下 5 个字的表头，所以比原来的 50px 宽 */
.mx-tot{font-weight:600;color:var(--ink);width:86px;padding:0 6px!important}
/* 姓名后那一列「预估提成」：金额右对齐 + 等宽数字，0 元淡化
   —— 一屏看过去谁有量、谁没量很直接。表头也改横排（跟着判据一起改） */
.mx thead th.mx-est{width:66px;padding:8px 4px!important;font-size:11px;line-height:1.25;
  font-weight:600;color:var(--ink)}
.mx td.mx-est{width:66px;text-align:right;padding-right:7px!important;
  font-weight:600;color:var(--ink-2)}
.mx thead .mx-u{display:block;font-weight:400;color:var(--muted);font-size:10px;line-height:1.1}
.mx tbody td.mx-est.is-0,.mx tr.zero td.mx-est{color:#C2D0D4;font-weight:400}
/* 列少的时候（类别通常 4~6 个）：只剩「姓名 / 预估提成 / 几列类别 / 合计」，
   fixed 布局会把多出来的宽度按比例摊给每一列 —— 「门店」列能涨到 280px、数字被推到
   右半边，隔着半个屏幕看。这种表改成按内容收紧，靠左排，别散开。
   类别超过 6 个（比如按业务名称那会儿）就走整宽 + 横向滚动 */
.mx-slim{table-layout:auto;width:auto}
.mx-slim .mx-name{width:auto;min-width:110px}
.mx-slim .mx-est{width:auto;min-width:86px}
.mx-slim .mx-tot{width:auto;min-width:86px}
.mx-slim .mx-v{width:auto;min-width:66px;padding:8px 6px!important}
/* 空表的框跟着内容走，别让一个整宽的白框里只排了左半边 */
.mx-wrap.is-slim{display:inline-block;max-width:100%;vertical-align:top}
.mx tr.zero td{color:#C2D0D4}
.mx tr.zero .mx-name{color:#93A9AE}
/* 隔行底色：门店合计行整体带板块色、偶数行深一档；员工明细偶数行浅一档
   —— 颜色由板块变量给，当日绿 / 当月蓝 / 自定义紫各一套
   注意：首列 .mx-name 是 sticky，必须一起换底，否则横滑时白块会把斑马纹切断 */
.b-block{--mx-a:#F3F6F7;--mx-s1:#ECF1F2;--mx-s2:#DCE5E7;--mx-h:#DCE6E8}
.b-block.is-day{--mx-a:#F3F9F4;--mx-s1:#EEF5F0;--mx-s2:#E0ECE3;--mx-h:#DCEDE0}
.b-block.is-month{--mx-a:#F3F7FC;--mx-s1:#ECF3FA;--mx-s2:#DCE8F6;--mx-h:#D9E7F7}
.b-block.is-custom{--mx-a:#F8F7FC;--mx-s1:#F3F2FB;--mx-s2:#E9E6F8;--mx-h:#E5E1F6}

/* ① 门店合计：整块打底色，隔行再深一档，和下面的员工明细一眼分开 */
.mx-store tbody tr td{background:var(--mx-s1)}
.mx-store tbody tr:nth-child(even) td{background:var(--mx-s2)}

/* ② 员工明细：白 / 浅色交替 */
.mx-emp tbody tr:nth-child(even) td{background:var(--mx-a)}

@media (hover:hover){
  .mx tbody tr:hover td{background:var(--mx-h)}
}

.mx-group{margin-bottom:11px}
/* 区块头「共 N 笔 · 预估提成 X 元」里的后半段，压一档色，不抢主数字 */
.b-est{font-size:11.5px;color:var(--muted);font-weight:500;white-space:nowrap}
.b-est::before{content:"·";margin:0 5px 0 1px;color:#C6D5D9}
.mx-gh{display:flex;align-items:baseline;gap:8px;padding:7px 2px 5px}.mx-gh-name{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.mx-gh-meta{font-size:11.5px;color:var(--muted);margin-left:auto;white-space:nowrap}
.mx-empty{padding:16px;text-align:center;color:var(--muted);font-size:12px;background:#FBFCFC;
  border:1px dashed #DCE7E9;border-radius:8px}
.mx-empty.sm{padding:10px;font-size:11.5px}

/* 时间段折叠（收起时不占屏，截图更干净） */
.bf{position:relative}
.bf>summary{list-style:none;cursor:pointer;display:inline-block}
.bf>summary::-webkit-details-marker{display:none}
.bf-body{display:flex;gap:6px;flex-wrap:wrap;align-items:flex-end;padding-top:8px;
  flex-basis:100%;width:100%}

.b-foot{text-align:center;font-size:11px;color:#9DB0B5;padding:14px 0 6px;
  border-top:1px solid #EDF3F4;margin-top:8px;line-height:1.7}

@media (min-width:900px){
  /* 看板主体不再单独限宽居中：原来 KPI / 门店按钮 / 区块卡都是 780px 居中，
     而页头标题和右上角按钮是整幅宽，结果左边标题顶到最左、卡片缩在中间，看着就是没对齐。
     现在统一按容器宽度走，标题、卡片、表格左右边界都在同一条竖线上。 */
  .b-block-head{margin-top:4px}
  .mx{font-size:13px}
  /* 桌面宽屏：类别列给到和门店列同一量级，否则整表摊宽后类别列只有 114px、
     门店列却撑到 280px（fixed 布局按声明值等比摊），数字全挤在右半边 */
  .mx-v{width:70px}
  .mx th,.mx td{padding:8px 4px}
}

@media (max-width:640px){
  .b-kpi{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .b-kpi-item{padding:8px 9px}
  .b-kpi-item .k{font-size:11px}
  .b-kpi-val b{font-size:18px}
  .b-block-title{font-size:12px;padding:2px 8px}
  .b-block{padding:10px 9px 12px;border-radius:10px}
  .mx{font-size:12px}
  .mx-name{width:72px;padding-left:8px!important}
  .mx-tot{width:64px}
  .mx thead th.mx-est,.mx td.mx-est{width:52px}
  /* 手机上 390 宽：姓名 72 + 合计 64 + 预估 52 + 4 列类别 ×38 ≈ 340，一屏放得下不用横滑；
     类别超过 5 个还是会溢出，靠 .mx-wrap 横滑兜住 */
  .mx-v{width:38px}
  /* 手机上标题行放不下「① 门店合计 + 口径说明 + 存成图片」三截，
     口径说明让位（页脚里写着一模一样的话），保证按钮跟标题同一行 */
  .mx-hint{display:none}
  /* 门店名 + 「已报 0/7 人 · 合计 0 笔 · 预估提成 0.00 元」在 390 宽下挤不下，
     门店名单独一行，其余信息整行跟在下面 */
  .mx-gh{flex-wrap:wrap;row-gap:1px}
  .mx-gh-meta{white-space:normal;margin-left:0;flex:1 0 100%}
  /* 手机上「共 N 笔 + 环比」放不下，换到下一行整行显示（没环比的保持同行） */
  .b-block-head{flex-wrap:wrap}
  .b-block-total.has-cmp{width:100%;margin-left:0}
  .tr-meta{width:100%;margin-left:0}
  .tr-d{font-size:9px}
  .tr-v{font-size:10.5px}
}

/* ---------------- 业务登记页 ---------------- */
.brand-mini{display:none}

.reg-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.reg-main .card{margin-bottom:0}
.reg-side .card{margin-bottom:12px}
.submit-bar{margin-top:6px}

/* ---- 登记页：名单里找不到自己时，就地补录员工（折叠块） ---- */
.addemp-link{font-size:12px;color:var(--muted);margin:7px 0 0}
.addemp-link a{color:var(--amber);text-decoration:none;
  border-bottom:1px dashed currentColor;padding-bottom:1px}
.addemp{margin-top:12px!important;padding:0;overflow:hidden}
.addemp>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:8px;
  padding:12px 13px;font-size:13px;color:var(--ink-2);user-select:none}
.addemp>summary::-webkit-details-marker{display:none}
.addemp>summary span{font-weight:500}
.addemp>summary b{color:var(--amber);font-weight:600;margin-left:auto;
  font-size:12.5px;white-space:nowrap}
.addemp>summary::after{content:"›";color:var(--amber);font-size:16px;line-height:1;
  transform:rotate(90deg);transition:transform .15s}
.addemp[open]>summary::after{transform:rotate(-90deg)}
.addemp[open]>summary{border-bottom:1px dashed var(--line);background:#FCFDFD}
.addemp-form{padding:9px 13px 13px}
.ae-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px 10px;margin-top:9px}
.ae-grid input{width:100%}
.ae-store{min-height:40px;display:flex;align-items:center;padding:0 10px;
  border:1px solid var(--line);border-radius:9px;background:#F6FAFA;
  font-size:13.5px;color:var(--ink);font-weight:500}
.ae-store.is-empty{color:var(--muted);font-weight:400}
@media (max-width:560px){
  .ae-grid{grid-template-columns:1fr}
  .addemp>summary{font-size:12.5px;padding:11px 12px}
}

.stat-card .stat-k{font-size:12.5px;color:var(--muted)}
.stat-card .stat-v{font-size:30px;font-weight:600;color:var(--ink);line-height:1.15;letter-spacing:.5px}
.stat-card .unit{font-size:13px;font-weight:400;color:var(--muted);margin-left:4px}

.mini-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #F0F5F6;font-size:12.5px}
.mini-row:last-child{border-bottom:none}
.mini-time{color:var(--muted);width:36px;flex:none;font-variant-numeric:tabular-nums}
.mini-biz{color:var(--ink);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini-cust{color:var(--muted);flex:none;font-variant-numeric:tabular-nums}

@media (min-width:900px){
  .reg-grid{grid-template-columns:minmax(0,1fr) 296px;align-items:start;gap:16px}
  .reg-grid:not(:has(.reg-side)){grid-template-columns:minmax(0,1fr)}
  /* 侧栏整块去掉后，表单卡放宽一点，避免右侧大片空白 */
  .reg-grid:not(:has(.reg-side)) .reg-main .card{max-width:900px}
  .reg-grid:not(:has(.reg-side)) .rows-head,
  .reg-grid:not(:has(.reg-side)) .reg-row{grid-template-columns:minmax(0,300px) 220px 160px auto}
  .reg-grid:not(:has(.reg-side)) .ri-x{justify-self:end}
  .reg-side{position:sticky;top:68px}
  .reg-main .card{padding:22px 24px;max-width:760px}
  .reg-main input,.reg-main select{font-size:15px}
  .reg-main .biz-btn{font-size:15px}
}

@media (min-width:640px) and (max-width:899px){
  .reg-side{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
  .reg-side .card{margin-bottom:0}
  .reg-side .card:nth-child(3){grid-column:1 / -1}
}

@media (max-width:899px){
  .reg-side{order:2}
  .reg-main{order:1}
}

@media (max-width:640px){
  .brand-full{display:none}
  .brand-mini{display:inline}
  .reg-main .card{padding:14px 13px}
  .reg-side .card{margin-bottom:10px}
  .stat-card .stat-v{font-size:26px}
  .field{margin-bottom:12px}
  .reg-main .btn.block{padding:15px;font-size:16px}
}

/* ---------------- 登记：两步选择（先门店后员工） ---------------- */
.steps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-bottom:14px}
.step{display:flex;gap:9px;align-items:flex-start;background:#F6FAFB;border:1px solid #D8E7EA;
  border-radius:10px;padding:10px 11px;min-width:0}
.step-no{flex:0 0 auto;width:21px;height:21px;border-radius:50%;background:var(--ink);color:#fff;
  font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;margin-top:3px}
.step-body{flex:1;min-width:0}
.step-body .f{margin-bottom:5px}
.step-body select{width:100%}
.step-body .hint{margin-top:5px;font-size:11.5px;line-height:1.5}
/* 门店选择统一用颜色突显 */
#store,select[name="store_id"]{background:#EAF3F5;border-color:var(--ink);color:var(--ink);
  font-weight:600}
#store:disabled,select[name="store_id"]:disabled{background:#F4F8F9;color:var(--muted);
  border-color:var(--line);font-weight:400}

/* ---------------- 登记：批量多行 ---------------- */
[hidden]{display:none!important}
.ri-lab{display:none}
.rows-head{display:grid;grid-template-columns:minmax(0,1fr) 150px 138px 30px;gap:8px;
  padding:0 0 6px;border-bottom:1px solid var(--line);margin-bottom:4px}
.rows-head span{font-size:11.5px;color:var(--muted)}
.reg-row{display:grid;grid-template-columns:minmax(0,1fr) 150px 138px 30px;gap:8px;
  align-items:center;padding:6px 0;border-bottom:1px dashed #EDF3F4}
.reg-row:last-child{border-bottom:none}
.reg-row .ri{min-width:0}
.reg-row input,.reg-row select{width:100%;font-size:13px;padding:7px 8px;border-radius:6px}
/* 业务多选：按钮只显示「首个业务 +N」，点开在整行下方展开勾选面板 */
.biz-btn{width:100%;text-align:left;font-size:13px;padding:7px 8px;border-radius:6px;background:#fff;
  border:1px solid var(--line);color:var(--muted);cursor:pointer;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;display:flex;align-items:center;gap:4px}
.biz-btn span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.biz-btn:after{content:"▾";font-size:9px;opacity:.55;flex:0 0 auto}
.biz-n{flex:0 0 auto;font-style:normal;font-size:10.5px;line-height:15px;padding:0 5px;
  border-radius:8px;background:var(--ink);color:#fff;letter-spacing:0}
.biz-btn.on{color:var(--ink);font-weight:600;border-color:#BFD3D8;background:#F7FBFC}
.biz-btn.open{border-color:var(--ink);box-shadow:0 0 0 2px rgba(20,80,95,.08)}
.biz-panel{grid-column:1 / 4;margin:2px 0 6px;border:1px solid var(--line);border-radius:9px;
  background:#FBFAF7;max-height:300px;display:flex;flex-direction:column}
.biz-panel-in{padding:8px 10px 2px;overflow:auto;flex:1}
.biz-grp{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.5px;
  margin:8px 0 5px;padding-bottom:2px}
.biz-grp:first-child{margin-top:0}
.biz-chk{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;line-height:1.2;
  padding:5px 10px;margin:0 6px 6px 0;border:1px solid var(--line);border-radius:16px;
  background:#fff;cursor:pointer;user-select:none;color:var(--ink-2,#3d4d55)}
.biz-chk input{width:13px;height:13px;margin:0;flex:0 0 auto;accent-color:var(--ink)}
.biz-chk.sel{background:var(--ink);border-color:var(--ink);color:#fff}
.biz-panel-foot{display:flex;align-items:center;gap:8px;padding:7px 10px;
  border-top:1px dashed var(--line);flex:0 0 auto}
.biz-cnt{flex:1;font-size:12px;color:var(--muted)}
/* 补报原因：只有办理日期不是今天时才整行跳出 */
.ri-reason{grid-column:1 / -1;margin:2px 0 4px;padding:8px 10px;background:#FFFDF8;
  border:1px solid #EFDCC2;border-radius:8px}
.ri-reason .ri-lab{display:block!important;color:#9A6A0B;font-weight:600;margin-bottom:4px}
.ri-reason input{background:#fff;border-color:#EBD6AE}
.row-del{width:26px;height:26px;border-radius:6px;border:1px solid var(--line);background:#fff;
  color:#A8BCC1;cursor:pointer;font-size:15px;line-height:1;padding:0}
.row-del:hover{background:var(--err-bg);color:var(--err);border-color:#EBC4C4}
.row-tools{display:flex;align-items:center;gap:10px;margin-top:11px;flex-wrap:wrap}
.row-tools .sub{font-size:12px}

/* ---------------- 登记核对页 ---------------- */
.cf-list{max-width:780px;margin:0}
.cf-item{background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin-bottom:8px}
/* 同一号码的第二笔起：左侧加一条竖线，视觉上连成一组 */
.cf-item-more{border-top-left-radius:4px;border-bottom-left-radius:4px;
  box-shadow:inset 3px 0 0 #D8E6EA}
.cf-top{display:flex;align-items:center;gap:8px}
.cf-no{width:20px;height:20px;border-radius:5px;background:var(--ink);color:#fff;font-size:11px;
  display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.cf-phone{font-size:14.5px;font-weight:600;color:var(--ink);letter-spacing:.3px;
  font-variant-numeric:tabular-nums}
.cf-biz{font-size:13.5px;color:#1E2E33;margin-top:6px}
.cf-meta{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.6}
.cf-actions{max-width:780px;margin:14px 0 0;display:flex;gap:10px;justify-content:flex-end}

/* ---------------- 主数据：批量维护卡（导出→改→导回） ---------------- */
.md-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:6px}
.md-form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;flex:1 1 320px;min-width:0;margin:0}
.md-file{flex:1 1 240px;min-width:200px;max-width:480px}
.md-file>.f{white-space:normal;line-height:1.45}
@media (max-width:640px){
  .md-row{gap:8px}
  .md-row>.btn{width:100%}
  .md-form{flex:1 1 100%}
  .md-file{flex:1 1 100%;max-width:none}
  .md-file>input[type=file]{width:100%;font-size:12px}
}
/* 手机上三张维护表按各自列宽横向滚动，别被压成一团 */
.tbl-store{min-width:920px;table-layout:fixed}
.tbl-biz{min-width:800px}
.tbl-emp{min-width:1040px}
/* 门店表：主行放渠道信息，浅灰子行放执照 / 酬金账户，省掉十几列横向拖拽 */
.tbl-store{min-width:920px;table-layout:fixed}
.tbl-store .st-main td{border-bottom:none;padding-bottom:5px}
.tbl-store .st-sub td{background:#FAFBFC;border-top:none;padding-top:0;padding-bottom:9px}
.tbl-store .st-sub .f{font-size:11px;color:var(--muted);margin-bottom:2px}
.tbl-store .st-sub input{font-size:12.5px;padding:3px 6px}
/* 按门店隔行换底色（一个门店=主行+子行，两行同色），横向看不错行 */
.tbl-store tbody tr.grp-odd td{background:#FFFFFF}
.tbl-store tbody tr.grp-odd.st-sub td{background:#F7FAFB}
.tbl-store tbody tr.grp-even td{background:#E9F1F3}
.tbl-store tbody tr.grp-even.st-sub td{background:#E1EBEE}

/* ---------------- 提成维护：单价列里直接维护门店价 ---------------- */
.price-cell{white-space:normal;padding-top:7px;padding-bottom:7px;vertical-align:top}
.price-line{display:flex;align-items:center;gap:6px;flex-wrap:wrap;line-height:1.6}
.price-line + .price-line{margin-top:5px;padding-top:5px;border-top:1px dashed #E6EEF0}
.price-line.add{padding-top:6px}
.price-line .in-rate{width:76px;text-align:right;padding:4px 6px;font-size:12.5px}
.price-line .in-date{width:130px;padding:4px 5px;font-size:12px}
.price-line .in-store{width:120px;padding:4px 6px;font-size:12.5px}
.price-line .btn.sm{padding:4px 9px;font-size:12px}
.price-line .sub{font-size:12px}
.badge.generic{background:#EEF3F5;color:#4A6B75}

/* ---------------- 标准页：底薪 / 提成 两块用不同底色分家 ---------------- */
/* 底薪：墨青调（跟顶栏同色系） */
.tint-base{background:#E4F0F2;border-color:#BBD6DB}
.tint-base .table-scroll{background:#F7FCFD;border-color:#CDE2E6}
.tint-base tbody tr:nth-child(even){background:#E2F0F2}
.tint-base tbody tr:hover{background:#D6E8EB}
.tint-base th{background:var(--ink)}
/* 提成：琥珀调（跟强调色同色系） */
.tint-comm{background:#FAEED8;border-color:#E4CD9F}
.tint-comm .table-scroll{background:#FFFBF3;border-color:#EBD9B4}
.tint-comm tbody tr:nth-child(even){background:#F8EBD2}
.tint-comm tbody tr:hover{background:#F2E1C0}
.tint-comm th{background:#8A5A11}
/* 底色块里的输入框压白，别跟着染色发灰 */
.tint-base td input,.tint-comm td input{background:#fff}

/* 分段标注行：底薪按门店、提成分按类别，同类归堆后插一条小标题，一眼看出板块从哪开始。
   —— 2026-10-31 使用方要求「底薪和提成标注板块，按同一类别排列顺序」。 */
tr.grp-row td{background:#EDF4F5;border-top:1px solid #D3E3E6;
  font-weight:700;font-size:12px;color:var(--ink-2);letter-spacing:.3px;padding:6px 10px}
tr.grp-row .n{font-weight:400;color:var(--muted);margin-left:6px}
.tint-base tr.grp-row td{background:#D6E7EA;border-top-color:#B4D2D8;color:#123B44}
.tint-comm tr.grp-row td{background:#F4E3C4;border-top-color:#DFC594;color:#6B4407}
/* 分组行不参与隔行变色/悬停，否则跟小标题混在一起看不出分界 */
.tint-base tr.grp-row:hover td{background:#D6E7EA}
.tint-comm tr.grp-row:hover td{background:#F4E3C4}

/* ---------------- 重复提醒 ---------------- */
.dup-box{border-color:#EFDCC2;background:#FFFDF8}
.dup-head{display:flex;align-items:baseline;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.dup-item{padding:8px 0;border-top:1px dashed #F0DFC8}
.dup-item:first-of-type{border-top:none}
.dup-line{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:13px;color:#1E2E33}
.dup-sub{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.7}
.dup-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}

@media (min-width:640px) and (max-width:899px){
  .rows-head{display:none}
  .ri-lab{display:block;font-size:11px;color:var(--muted);margin-bottom:3px}
  .reg-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:6px;
    padding:8px 24px 8px 0;position:relative}
  .reg-row .ri:nth-child(1){grid-column:1}
  .reg-row .ri:nth-child(2){grid-column:2}
  .reg-row .ri:nth-child(3){grid-column:3}
  .reg-row .ri-x{position:absolute;right:0;top:2px}
  .ri-reason{grid-column:1 / -1}
}

@media (max-width:640px){
  .rows-head{display:none}
  .steps{grid-template-columns:1fr;gap:8px}
  .ri-lab{display:block;font-size:11px;color:var(--muted);margin-bottom:3px}
  .reg-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:5px;
    padding:9px 22px 9px 9px;border:1px solid var(--line);border-radius:9px;
    background:#FCFDFD;margin-bottom:8px;position:relative}
  .reg-row:last-child{margin-bottom:0}
  .reg-row .ri:nth-child(1){grid-column:1}
  .reg-row .ri:nth-child(2){grid-column:2}
  .reg-row .ri:nth-child(3){grid-column:3}
  .reg-row .ri-x{position:absolute;right:2px;top:2px}
  .reg-row input,.reg-row select{font-size:11.5px;padding:6px 4px}
  .biz-btn{font-size:11.5px;padding:6px 4px;gap:2px}
  .biz-chk{font-size:12px;padding:6px 9px;margin:0 5px 5px 0}
  .biz-panel-in{padding:7px 8px 1px}
  .biz-panel-foot{padding:6px 8px}
  .row-date{font-size:11px!important}
  .ri-reason{grid-column:1 / -1}
  .row-del{width:20px;height:20px;font-size:13px;border:none;background:transparent}
  .row-tools{margin-top:2px}
  .cf-actions .btn{flex:1}
  .cf-actions{position:sticky;bottom:0;background:var(--bg);padding:8px 0}
}

/* 备案号页脚 —— 仅当环境变量 SALARY_ICP 有值时才渲染（管局要求：底部注明备案号并链接工信部） */
.icp{text-align:center;padding:14px 12px 24px;font-size:12px;line-height:1.6;color:var(--muted,#7b8794)}
.icp a{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}
.icp a:hover{text-decoration:none;opacity:.8}

/* ---------------- 我的填报（店员自查近10天） ---------------- */
/* 整块上色 + 左侧粗条：一眼看出这块是「核对」，不是上面的「填报」 */
.mine-sec{
  margin-top:20px;padding:14px 16px;border-radius:12px;
  background:#EDF4F5;border:1px solid #D3E2E4;border-left:4px solid var(--ink);
}
.mine-sec .sec-head{display:flex;justify-content:space-between;align-items:baseline;
  gap:8px;flex-wrap:wrap;padding-bottom:4px}
.mine-sec .sec-head h2{margin:0;font-size:17px}
.mine-sec .sec-tag{display:inline-block;margin-right:7px;padding:2px 8px;border-radius:999px;
  background:var(--ink);color:#fff;font-size:11.5px;font-weight:600;vertical-align:2px;letter-spacing:.5px}
.mine-sec .card{margin-bottom:12px}
.mine-sec > .card:last-of-type{margin-bottom:0}
/* 「办理日期」这类四字表头挤一挤就会被截掉，表头一律不折行 */
.mine-sec .mine-tab th{white-space:nowrap}
.mine-sec .mine-tab td:first-child{white-space:nowrap}
@media (max-width:520px){
  .mine-sec{padding:12px 10px 0;border-left-width:3px}
  .mine-sec .sec-head h2{font-size:16px}
}
.mine-bars{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;align-items:end;margin-top:8px}
.mb{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.mb-n{font-size:11.5px;color:var(--ink-2);height:15px;line-height:15px}
.mb-track{width:100%;height:74px;background:#F1F4F4;border-radius:5px;display:flex;align-items:flex-end;overflow:hidden}
.mb-fill{width:100%;background:var(--ink);border-radius:5px 5px 0 0}
.mb-d{font-size:10.5px;color:var(--muted);text-align:center;line-height:1.35;white-space:nowrap}
.mb-d.on{color:var(--ink);font-weight:600}
.mb-d span{font-size:10px;opacity:.72}
/* 对账要看全号：等宽数字 + 手机号一档字号，11 位不折行 */
td.ph{font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px;letter-spacing:.3px;white-space:nowrap;color:var(--ink)}

/* 回看的日期选择条：常用区间一键切 + 自定义起止 */
.range-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0 2px}
.range-bar .pill{padding:5px 12px;border-radius:999px;border:1px solid var(--line);
  background:#fff;font-size:13px;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.range-bar .pill.on{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:600}
.range-form{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0}
.range-form input[type=date]{width:auto;min-width:140px;padding:6px 8px;font-size:14px}
.range-dash{color:var(--muted);font-size:12px}
@media (max-width:520px){
  .range-bar{gap:6px}
  .range-bar .pill{font-size:12px;padding:4px 10px}
  .range-form{width:100%}
  .range-form input[type=date]{flex:1 1 40%;min-width:0;font-size:13px;padding:5px 6px}
  .range-form .btn{flex:1 1 100%}
}
@media (max-width:520px){
  .mine-bars{gap:4px}
  .mb-track{height:58px}
  .mb-d{font-size:9.5px}
  .mb-n{font-size:10.5px}
  /* 手机上对账最要紧的是号码：先把「备注」挤掉，号码才不会被横向截断 */
  .mine-tab th:nth-child(5), .mine-tab td:nth-child(5){display:none}
  .mine-tab th, .mine-tab td{padding-left:5px;padding-right:5px}
  .mine-tab td.ph{font-size:11.5px;letter-spacing:0}
  .mine-tab th:nth-child(2), .mine-tab td:nth-child(2){white-space:normal;line-height:1.3}
}

/* ---------------- 稽核页：同号多笔连续成组 + 逐条判定 ---------------- */
/* 列宽写死 + 等宽数字：三列时间才不会一会儿宽一会儿窄，扫一眼就能对齐着看 */
.tbl-audit{min-width:1090px;table-layout:fixed}
.tbl-audit td,.tbl-audit th{font-variant-numeric:tabular-nums}
.tbl-audit td.biz-date{font-weight:600;color:var(--ink-2);letter-spacing:.2px}
.tbl-audit td.reg-time{color:var(--muted)}
.tbl-audit td.audit-when{color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.tbl-audit td.c-biz{white-space:normal;line-height:1.45}
.audit-row.grp-more td{border-top:none}
.audit-row.grp-more td:first-child{box-shadow:inset 3px 0 0 #CFE1E5}
.audit-row.grp-more .phone-cell{padding-left:16px}
.audit-row.has-multi.grp-first td{border-bottom-color:#C9DDE1}
.phone-cell{white-space:nowrap}
.badge.amber{background:var(--amber-bg);color:var(--amber)}

.judge{width:98px;padding:5px 6px;font-size:12.5px;border-radius:6px;border:1px solid var(--line)}
.judge-正常{border-color:#BFDCCB;background:#F0F8F3;color:#1F5C40}
.judge-返销{border-color:#EFC9C9;background:#FDF1F1;color:#8A2626}
.judge-退订{border-color:#EBD6AE;background:#FDF6E8;color:#7A5408}
.judge-待稽核{border-color:#D6E2E5;background:#F7FAFB;color:#546A70}
.judge.changed{border-color:var(--amber);box-shadow:0 0 0 2px rgba(186,117,23,.22)}

.save-bar{position:sticky;bottom:0;margin-top:12px;z-index:5;box-shadow:0 -2px 10px rgba(20,80,95,.07)}
.save-note{font-size:12.5px;color:var(--muted);margin-top:3px}
.save-note b{color:var(--amber);font-size:14.5px;margin:0 2px}

/* 稽核页手机版：这块手机上看得最多，11 列横滑太难受，改成一条一卡的竖排。
   号码 → 业务 → 办理日期（加粗，最要紧）→ 判定下拉 → 门店员工等小字，从上往下读。 */
@media (max-width:720px){
  .tbl-audit{min-width:0;table-layout:auto;display:block}
  .tbl-audit thead{display:none}
  .tbl-audit tbody{display:block;padding:2px 0 4px}
  .audit-wrap{border:0;background:transparent;overflow:visible}
  .tbl-audit tr.audit-row{
    display:flex;flex-wrap:wrap;align-items:center;gap:3px 10px;
    margin:8px 10px;padding:10px 12px;background:#fff;
    border:1px solid var(--line);border-radius:12px;
    box-shadow:0 1px 3px rgba(20,80,95,.05);
  }
  .tbl-audit tr.audit-row>td{
    display:block;border:0;padding:0;white-space:normal;
    background:none !important;box-shadow:none !important;
  }
  /* 换行用的占位：flex 里只有「占满一整行」的物件才能真正断行，
     光给按钮 flex-grow 是没用的（浏览器先排版、后拉伸，小字早挤进来了） */
  .tbl-audit tr.audit-row::before,
  .tbl-audit tr.audit-row::after{content:"";flex:0 0 100%;height:0;margin:0;padding:0;border:0}
  .tbl-audit tr.audit-row::before{order:5}
  .tbl-audit tr.audit-row::after{order:8}
  /* 第一行：勾选 · 号码 · 办理日期 */
  .tbl-audit td.c-ck{order:1;padding-top:2px}
  .tbl-audit td.phone-cell{order:2;flex:1 1 auto;font-size:14px;letter-spacing:.2px}
  .tbl-audit td.phone-cell b{font-weight:600}
  .tbl-audit td.biz-date{order:3;font-size:13px;margin-left:auto}
  /* 第二行：业务名（整行） */
  .tbl-audit td.c-biz{order:4;flex:1 1 100%;font-size:13.5px;color:#1E2E33;padding-top:1px}
  /* 第三行：判定 + 修正（下拉自带颜色，不再另挂「判定」标签） */
  .tbl-audit td.c-judge{order:6}
  .tbl-audit td.c-judge::before,
  .tbl-audit td.c-fix::before{display:none}
  .tbl-audit td.c-judge .judge{width:106px;padding:7px 8px;font-size:13px}
  .tbl-audit td.c-fix{order:7;margin-left:auto}
  .tbl-audit td.c-fix .btn{padding:6px 12px}
  /* 待稽核的「补报 —」「稽核 —」不占地方。
     选择器必须比上面的 `tr.audit-row>td{display:block}` 更具体，否则压不住 */
  .tbl-audit tr.audit-row>td.is-empty{display:none}
  /* 第四行：门店 / 员工 / 登记 / 补报 / 稽核人，小字带标签 */
  .tbl-audit td.c-store,
  .tbl-audit td.c-emp,
  .tbl-audit td.reg-time,
  .tbl-audit td.c-back,
  .tbl-audit td.audit-when{order:9;font-size:11.5px;color:var(--muted);line-height:1.5}
  .tbl-audit td[data-l]::before{content:attr(data-l);color:#93A5AA;margin-right:3px}
  /* 小字之间留一道浅分隔，门店/员工/登记不至于糊成一串 */
  .tbl-audit td.c-store,
  .tbl-audit td.c-emp,
  .tbl-audit td.reg-time,
  .tbl-audit td.c-back{padding-right:9px;border-right:1px solid #E4EDEF !important}
  .tbl-audit td.reg-time{border-right:0 !important}
  .tbl-audit td.phone-cell::before,
  .tbl-audit td.biz-date::before,
  .tbl-audit td.c-biz::before,
  .tbl-audit td.c-back::before{display:none}   /* 补报徽标已经自带「补报」字样，别再挂标签 */
  /* 同号多笔：整张卡左边一道浅青色条，比行内缩进更好认 */
  .tbl-audit tr.audit-row.has-multi{border-left:3px solid #CFE1E5;padding-left:10px}
  .tbl-audit tr.audit-row.grp-more{opacity:.96}
  .tbl-audit tr.audit-row.grp-more .phone-cell{padding-left:0}
  .tbl-audit tr.empty-row{display:block;margin:8px 10px;background:#fff;border:1px solid var(--line);border-radius:12px}
  .tbl-audit tr.empty-row td{display:block;border:0;padding:0}
  /* 保存条：手机上别太占地方 */
  .save-bar{padding:10px 12px}
  .save-bar .sub{display:none}
  .save-bar .flex{align-items:center}
  .save-bar .btn.primary{width:100%;padding:11px}
}

/* ---------------- 主数据 · 员工表：手机上改卡片，别再横向拖 1040px ----------------
   原来这张表 min-width:1040px，手机上要左右滑才看得到「门店 / 银行卡 / 保存」。
   滑着看很容易把门店名填进「姓名」那格（列都挤在一条线上）。
   720 以下改成一人一卡、字段竖排并带标签，点哪格就是哪格。 */
@media (max-width:720px){
  .emp-wrap{overflow:visible;border:0;background:transparent}
  .tbl-emp{min-width:0;display:block;table-layout:auto}
  .tbl-emp thead{display:none}
  .tbl-emp tbody{display:block}
  .tbl-emp tr{display:grid;grid-template-columns:1fr 1fr;gap:9px 10px;
    margin:9px 10px;padding:11px 12px;background:#fff;
    border:1px solid var(--line);border-radius:12px;
    box-shadow:0 1px 3px rgba(20,80,95,.05)}
  .tbl-emp tr:has(td.c-act) { grid-template-rows:auto }
  .tbl-emp td{display:block;border:0;padding:0;min-width:0}
  .tbl-emp td::before{content:attr(data-l);display:block;font-size:11.5px;
    color:#93A5AA;margin-bottom:3px;letter-spacing:.2px}
  .tbl-emp td.c-full{grid-column:1/-1}
  .tbl-emp td.c-act{grid-column:1/-1;display:flex;justify-content:flex-end;padding-top:2px}
  .tbl-emp td.c-act::before{content:none}
  .tbl-emp input,.tbl-emp select{width:100%!important;font-size:14px;padding:8px 9px}
  /* 姓名是这个人的主标识，加粗一点，别跟门店名混 */
  .tbl-emp td.c-name input{font-weight:600}
  /* 空状态那一行 */
  .tbl-emp td[colspan]{grid-column:1/-1}

  /* 顶部「新增员工」表单：手机上一律两列，别让固定宽度把按钮挤出去 */
  .emp-new{display:grid!important;grid-template-columns:1fr 1fr;gap:9px 10px;align-items:end}
  .emp-new>div{width:auto;min-width:0}
  .emp-new input,.emp-new select{width:100%!important;font-size:14px;padding:8px 9px}
  .emp-new>div:last-child{grid-column:1/-1}
  .emp-new>.btn,.emp-new .btn{width:100%}
}

/* 员工页：按门店筛选的按钮条（人数写在按钮上） */
.emp-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0 0}
.emp-bar .pill{padding:5px 12px;border-radius:999px;border:1px solid var(--line);
  background:#fff;font-size:13px;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.emp-bar .pill b{font-weight:600;margin-left:3px;opacity:.8}
.emp-bar .pill.on{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:600}
.emp-bar .pill.on b{opacity:.95}
@media (max-width:520px){
  .emp-bar{gap:6px}
  .emp-bar .pill{font-size:12px;padding:4px 10px}
}

/* 登记页的「预估提成」已去掉（2026-10-31），相关样式一并删除 */