/* ═══════════════════════════════════════════════════════
   太阳童行 OA 系统 · 样式表
   风格：明亮、克制、信息密度适中（内部管理工具，不花哨）
   ═══════════════════════════════════════════════════════ */

:root{
  --ink:#1b2430;          /* 主文字 */
  --ink-2:#42505f;        /* 次级文字 */
  --muted:#7d8b9a;        /* 弱化文字 */
  --line:#e3e9f0;         /* 分隔线 */
  --line-2:#eef2f7;       /* 更浅的线 */
  --bg:#f2f5f9;           /* 页面底色 */
  --card:#ffffff;
  --brand:#1a6fe0;        /* 主色 */
  --brand-d:#0f57b8;
  --brand-soft:#eaf2fe;
  --green:#12a150;  --green-soft:#e7f7ee;
  --red:#d92d20;    --red-soft:#fdecea;
  --orange:#c47f00; --orange-soft:#fff6e5;
  --purple:#7a4ddb; --purple-soft:#f2ecfe;
  --radius:12px;
  --shadow:0 1px 2px rgba(20,40,70,.05), 0 6px 20px rgba(20,40,70,.06);
  --sidebar-w:228px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:"PingFang SC","Microsoft YaHei","Segoe UI",-apple-system,sans-serif;
  font-size:14px; line-height:1.65; color:var(--ink);
  background:var(--bg);
}
button{font-family:inherit; cursor:pointer;}
a{color:var(--brand); text-decoration:none;}

#app{display:flex; min-height:100vh;}

/* ══════════ 左侧菜单 ══════════ */
#sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  background:#0f1c30;
  color:#c3ceda;
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
}
.brand{display:flex; gap:11px; align-items:center; padding:19px 18px 17px;}
.brand .logo{
  width:38px;height:38px;border-radius:10px;flex:0 0 38px;
  background:linear-gradient(140deg,#3b8ef5,#1a6fe0);
  color:#fff; font-weight:800; font-size:19px;
  display:flex;align-items:center;justify-content:center;
}
.brand .b-name{color:#fff;font-weight:700;font-size:15.5px;letter-spacing:.5px;}
.brand .b-sub{font-size:11.5px;color:#7e8fa3;margin-top:1px;}

#nav{flex:1; overflow-y:auto; padding:4px 10px 20px;}
.nav-group{margin-bottom:2px;}
.nav-group-title{
  font-size:11px; color:#66788c; letter-spacing:1.4px;
  padding:15px 10px 7px; font-weight:700;
}
.nav-item{
  display:flex; align-items:center; gap:9px;
  padding:8.5px 11px; border-radius:8px;
  color:#b7c4d2; font-size:13.5px;
  cursor:pointer; user-select:none;
  margin-bottom:1px;
  transition:background .13s,color .13s;
}
.nav-item:hover{background:rgba(255,255,255,.06); color:#eaf1f9;}
.nav-item.active{background:var(--brand); color:#fff; font-weight:600;
  box-shadow:0 3px 10px rgba(26,111,224,.35);}
.nav-item .ico{width:17px;text-align:center;font-size:14.5px;opacity:.95;}
.nav-item .badge{
  margin-left:auto;background:#d92d20;color:#fff;font-size:10.5px;
  border-radius:9px;padding:0 6px;line-height:16px;font-weight:700;
}
.nav-item.soon{opacity:.42; cursor:not-allowed;}
.nav-item.soon .badge{background:#3d4f63;color:#93a3b5;}
.side-foot{padding:12px 18px 16px;border-top:1px solid rgba(255,255,255,.07);}
.side-foot .ver{font-size:11px;color:#5d6f83;}

/* ══════════ 主体 ══════════ */
#main{flex:1; min-width:0; display:flex; flex-direction:column;}

#topbar{
  height:58px; flex:0 0 58px;
  background:#fff; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 22px; position:sticky; top:0; z-index:20;
}
.crumb{font-size:13.5px;color:var(--muted);}
.crumb .sep{margin:0 8px;color:#c3ccd6;}
.crumb b{color:var(--ink); font-weight:600; font-size:14px;}

.top-right{display:flex;align-items:center;gap:16px;}
.role-switch{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);}
.role-switch select{
  font-family:inherit;font-size:13px;padding:5px 9px;border-radius:8px;
  border:1px solid var(--line);background:#f7f9fc;color:var(--ink);cursor:pointer;
}
.bell{
  position:relative;background:#f4f7fb;border:1px solid var(--line);
  width:36px;height:36px;border-radius:10px;font-size:16px;
}
.bell:hover{background:var(--brand-soft);border-color:#c5dbfa;}
.bell em{
  position:absolute;top:-5px;right:-5px;background:var(--red);color:#fff;
  font-size:10.5px;font-style:normal;font-weight:700;
  border-radius:9px;padding:0 5px;line-height:15px;border:2px solid #fff;
}
.me{display:flex;align-items:center;gap:9px;}
.avatar{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(140deg,#5aa1f7,#1a6fe0);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;
}
.me-name{font-size:13.5px;font-weight:600;line-height:1.25;}
.me-role{font-size:11.5px;color:var(--muted);}

#view{padding:22px 24px 60px; flex:1;}
.loading{padding:60px;text-align:center;color:var(--muted);}

/* ══════════ 通用组件 ══════════ */
.page-title{font-size:19px;font-weight:700;margin:0 0 3px;}
.page-sub{color:var(--muted);font-size:13px;margin:0 0 18px;}
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.card-pad{padding:18px 20px;}
.card-head{
  padding:15px 20px;border-bottom:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.card-head h3{margin:0;font-size:15px;font-weight:650;}
.card-head .hint{font-size:12.5px;color:var(--muted);font-weight:400;}

.grid{display:grid;gap:16px;}
.g4{grid-template-columns:repeat(4,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g2{grid-template-columns:repeat(2,1fr);}
.g-2-1{grid-template-columns:2fr 1fr;}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,1fr);} .g-2-1,.g3{grid-template-columns:1fr;}}

/* 指标卡 */
.kpi{padding:17px 19px;cursor:pointer;transition:box-shadow .15s,transform .15s;position:relative;overflow:hidden;}
.kpi:hover{box-shadow:0 4px 20px rgba(20,40,70,.11); transform:translateY(-1px);}
.kpi .k-label{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px;}
.kpi .k-val{font-size:27px;font-weight:750;margin:7px 0 3px;letter-spacing:-.5px;}
.kpi .k-foot{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px;}
.kpi .k-drill{position:absolute;top:15px;right:16px;font-size:11px;color:#b9c4d0;opacity:0;transition:.15s;}
.kpi:hover .k-drill{opacity:1;color:var(--brand);}
.delta{font-weight:700;}
.delta.up{color:var(--red);}      /* 中国习惯：涨=红 */
.delta.down{color:var(--green);}  /* 跌=绿 */

/* 表格 */
table.tb{width:100%;border-collapse:collapse;font-size:13.5px;}
table.tb th{
  text-align:left;font-weight:600;color:var(--ink-2);font-size:12.5px;
  padding:8px 14px;border-bottom:1px solid var(--line);background:#f8fafd;white-space:nowrap;
}
table.tb td{padding:7px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle;line-height:1.4;}
table.tb tbody tr:hover{background:#f8fbff;}
table.tb tbody tr.clickable{cursor:pointer;}
table.tb tbody tr:last-child td{border-bottom:none;}
.tb-wrap{overflow-x:auto;}
table.tb th.col-person{width:120px;}   /* 「客户」「营员」两列同宽 */
table.tb td.col-person div{white-space:nowrap;}  /* 手机号/人数不折行 */

/* 营种：最多显示 4 行，超出隐藏（鼠标悬停可看全名） */
table.tb td.col-sku > div{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;
  overflow:hidden;line-height:1.35;
}

/* 分页器（订单列表等） */
.pager{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:13px 16px;border-top:1px solid var(--line);
}
.pg-info{font-size:13px;color:var(--muted);}
.pg-info b{color:var(--ink);}
.pg-btns{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.pg{
  min-width:32px;height:32px;padding:0 10px;border:1px solid var(--line);background:#fff;
  color:var(--ink-2);border-radius:8px;font-size:13px;font-weight:600;
  transition:background .12s,border-color .12s,color .12s;
}
.pg:hover:not(:disabled):not(.on){background:var(--brand-soft);border-color:var(--brand);color:var(--brand-d);}
.pg.on{background:var(--brand);border-color:var(--brand);color:#fff;cursor:default;}
.pg:disabled{opacity:.45;cursor:not-allowed;}
.pg-nav{padding:0 12px;}
.pg-gap{color:var(--muted);font-size:13px;padding:0 2px;}

/* 标签 */
.tag{display:inline-block;font-size:11.5px;padding:2px 9px;border-radius:20px;font-weight:600;white-space:nowrap;}
.t-blue{background:var(--brand-soft);color:var(--brand-d);}
.t-green{background:var(--green-soft);color:var(--green);}
.t-red{background:var(--red-soft);color:var(--red);}
.t-orange{background:var(--orange-soft);color:var(--orange);}
.t-purple{background:var(--purple-soft);color:var(--purple);}
.t-gray{background:#eef1f5;color:#6b7embed;}
.t-gray{background:#eef1f5;color:#6b7a89;}
.t-role-boss{background:var(--purple-soft);color:var(--purple);}
.t-role-sales{background:var(--brand-soft);color:var(--brand-d);}
.t-role-product{background:var(--green-soft);color:var(--green);}
.t-role-finance{background:var(--orange-soft);color:var(--orange);}

/* 按钮 */
.btn{
  font-family:inherit;font-size:13px;padding:7px 15px;border-radius:8px;
  border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:550;
  transition:.13s;
}
.btn:hover{background:#f5f8fc;border-color:#cfdae6;}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;}
.btn.primary:hover{background:var(--brand-d);border-color:var(--brand-d);}
.btn.sm{padding:5px 11px;font-size:12.5px;}
.btn.ghost{background:transparent;border-color:transparent;color:var(--brand);padding:4px 7px;}
.btn.ghost:hover{background:var(--brand-soft);}

/* 搜索框 */
.search{
  display:flex;align-items:center;gap:8px;background:#f6f9fc;
  border:1px solid var(--line);border-radius:9px;padding:7px 12px;min-width:250px;
}
.search input{border:none;background:none;outline:none;font-family:inherit;font-size:13.5px;width:100%;color:var(--ink);}
.search .ico{color:#a9b6c4;}

/* 迷你柱状图 */
.spark{display:flex;align-items:flex-end;gap:8px;height:150px;padding:8px 4px 0;}
.spark .bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end;}
.spark .bar{
  width:100%;max-width:44px;border-radius:6px 6px 0 0;
  background:linear-gradient(180deg,#5aa1f7,#1a6fe0);
  transition:opacity .15s; position:relative;
}
.spark .bar:hover{opacity:.82;}
.spark .bar-wrap:hover .bar-lbl{color:var(--brand);font-weight:700;}
.spark .bar-lbl{font-size:11.5px;color:var(--muted);}

/* 列表项 */
.li{display:flex;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line-2);align-items:flex-start;}
.li:last-child{border-bottom:none;}
.li .dot{width:7px;height:7px;border-radius:50%;margin-top:7px;flex:0 0 7px;}
.dot.warn{background:var(--orange);} .dot.info{background:var(--brand);}
.dot.error{background:var(--red);} .dot.ok{background:var(--green);}
.li .li-txt{font-size:13.5px;flex:1;}
.li .li-time{font-size:12px;color:var(--muted);white-space:nowrap;}

/* 进度条 */
.progress{height:7px;background:#eef1f5;border-radius:6px;overflow:hidden;}
.progress > i{display:block;height:100%;background:linear-gradient(90deg,#5aa1f7,#1a6fe0);border-radius:6px;}
.progress.warn > i{background:linear-gradient(90deg,#ffb020,#e08700);}
.progress.danger > i{background:linear-gradient(90deg,#f97066,#d92d20);}

/* 空状态 */
.empty{padding:50px 20px;text-align:center;color:var(--muted);font-size:13.5px;}
.empty .ico{font-size:34px;display:block;margin-bottom:10px;opacity:.5;}

/* ══════════ 详情弹窗 ══════════ */
.mask{
  position:fixed;inset:0;background:rgba(15,25,40,.42);
  opacity:0;pointer-events:none;transition:opacity .2s;z-index:100;
  backdrop-filter:blur(1px);
}
.mask.show{opacity:1;pointer-events:auto;}

.modal{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-46%) scale(.98);
  width:min(760px,92vw);max-height:86vh;background:#fff;border-radius:16px;
  box-shadow:0 20px 60px rgba(10,25,45,.30);z-index:101;
  opacity:0;pointer-events:none;transition:.2s;display:flex;flex-direction:column;
}
.modal.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);}
.modal-head{
  padding:17px 22px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
}
.modal-head b{font-size:16px;}
.modal-head button{
  background:#f2f5f9;border:none;width:30px;height:30px;border-radius:8px;
  font-size:14px;color:var(--ink-2);
}
.modal-head button:hover{background:#e7ecf3;}
.modal-body{padding:20px 22px;overflow-y:auto;}

/* ══════════ 通知抽屉 ══════════ */
.drawer{
  position:fixed;top:0;right:0;height:100vh;width:min(400px,92vw);
  background:#fff;z-index:101;box-shadow:-8px 0 30px rgba(10,25,45,.16);
  transform:translateX(102%);transition:transform .24s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
}
.drawer.show{transform:translateX(0);}
.drawer-head{
  padding:17px 20px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
}
.drawer-head b{font-size:15.5px;}
.drawer-head button{background:#f2f5f9;border:none;width:30px;height:30px;border-radius:8px;color:var(--ink-2);}
.notif-list{flex:1;overflow-y:auto;}
.notif-item{padding:14px 20px;border-bottom:1px solid var(--line-2);display:flex;gap:11px;}
.notif-item.unread{background:#f6faff;}
.notif-item .n-ico{width:30px;height:30px;border-radius:9px;flex:0 0 30px;display:flex;align-items:center;justify-content:center;font-size:14px;}
.n-todo{background:var(--orange-soft);} .n-assign{background:var(--brand-soft);}
.n-reject{background:var(--red-soft);} .n-camp{background:var(--purple-soft);}
.notif-item .n-txt{font-size:13.5px;flex:1;}
.notif-item .n-time{font-size:11.5px;color:var(--muted);margin-top:3px;}
.drawer-foot{padding:12px 20px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);background:#fafcfe;}

/* ══════════ Toast ══════════ */
.toast{
  position:fixed;bottom:30px;left:50%;transform:translate(-50%,20px);
  background:#1b2430;color:#fff;font-size:13.5px;padding:11px 20px;border-radius:10px;
  opacity:0;pointer-events:none;transition:.22s;z-index:200;box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.toast.show{opacity:1;transform:translate(-50%,0);}

/* ══════════ 档案卡布局 ══════════ */
.pf-head{display:flex;gap:16px;align-items:center;padding-bottom:17px;border-bottom:1px solid var(--line-2);margin-bottom:17px;}
.pf-avatar{
  width:58px;height:58px;border-radius:16px;flex:0 0 58px;font-size:23px;font-weight:700;
  background:linear-gradient(140deg,#5aa1f7,#1a6fe0);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.pf-name{font-size:19px;font-weight:700;display:flex;align-items:center;gap:9px;}
.pf-meta{font-size:13px;color:var(--muted);margin-top:4px;}
.pf-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px 22px;font-size:13.5px;margin-bottom:18px;}
.pf-grid .k{color:var(--muted);}
.pf-grid .v{font-weight:600;}
.pf-sec-title{font-size:13px;font-weight:700;color:var(--ink-2);margin:20px 0 10px;display:flex;align-items:center;gap:7px;}
.timeline{position:relative;padding-left:20px;}
.timeline::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--line);}
.tl-item{position:relative;padding-bottom:15px;}
.tl-item::before{content:"";position:absolute;left:-19px;top:5px;width:10px;height:10px;border-radius:50%;background:#fff;border:2.5px solid var(--brand);}
.tl-head{font-size:12.5px;color:var(--muted);margin-bottom:3px;display:flex;gap:9px;align-items:center;flex-wrap:wrap;}
.tl-txt{font-size:13.5px;}

/* ══════════ 提示条 / 行内小控件（员工与归属对照表等） ══════════ */
.tip{
  background:var(--orange-soft);border:1px solid #f2dcb0;border-left:3px solid var(--orange);
  border-radius:10px;padding:12px 15px;font-size:13px;color:#7a5a12;line-height:1.75;
  margin:14px 0 0;
}
.tip b{color:#5d4409;}
.mini-inp,.mini-sel{
  font-family:inherit;font-size:13px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:8px;padding:5px 9px;outline:none;
}
.mini-inp:focus,.mini-sel:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);}
.mini-inp{width:96px;}
.mini-sel{width:100%;max-width:230px;}
.add-box{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding:13px 20px;border-top:1px solid var(--line-2);background:#fafcfe;
  border-radius:0 0 var(--radius) var(--radius);font-size:13px;
}
.add-box b{margin-right:2px;color:var(--ink-2);}

/* ══════════ 退出按钮 ══════════ */
.logout{
  font-family:inherit;font-size:12.5px;color:var(--ink-2);background:#fff;
  border:1px solid var(--line);border-radius:8px;padding:5px 11px;cursor:pointer;
}
.logout:hover{background:#fdecea;border-color:#f5c6c0;color:var(--red);}

/* ══════════ 登录门 ══════════ */
.gate{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#e8f1fd 0%,#f4f8ff 45%,#eef4fb 100%);
  padding:20px;z-index:900;
}
.gate-card{
  background:#fff;border-radius:20px;padding:42px 38px 30px;text-align:center;
  width:100%;max-width:400px;box-shadow:0 18px 60px rgba(20,60,120,.14);
}
.gate-logo{
  width:62px;height:62px;border-radius:18px;margin:0 auto 16px;
  background:linear-gradient(135deg,var(--brand),#3b8bf5);color:#fff;
  font-size:30px;font-weight:700;display:flex;align-items:center;justify-content:center;
}
.gate-name{font-size:19px;font-weight:700;letter-spacing:.5px;}
.gate-sub{font-size:13.5px;color:var(--muted);margin-top:7px;}
.gate-sub b{color:var(--brand);}
.gate-btn{
  display:block;margin:26px auto 0;max-width:280px;padding:13px 0;
  background:var(--brand);color:#fff;text-decoration:none;border-radius:11px;
  font-size:15px;font-weight:600;box-shadow:0 6px 18px rgba(26,111,224,.28);
}
.gate-btn:hover{background:var(--brand-d);}
.gate-hint{
  margin-top:22px;font-size:12.5px;color:var(--muted);line-height:1.9;
  background:#f6f9fd;border-radius:10px;padding:12px 14px;text-align:left;
}
.gate-foot{margin-top:22px;font-size:11.5px;color:#aab7c4;}

/* ══════════ 企业微信对接页 ══════════ */
.wx-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:1100px){.wx-cols{grid-template-columns:1fr;}}
.wx-rows{display:flex;flex-direction:column;}
.wx-row{display:flex;justify-content:space-between;gap:14px;align-items:center;
  padding:10px 20px;border-bottom:1px solid var(--line-2);font-size:13.5px;}
.wx-row:last-child{border-bottom:none;}
.wx-row span{color:var(--muted);white-space:nowrap;}
.wx-row b{font-weight:600;text-align:right;overflow-wrap:anywhere;}
.wx-row code{background:#f2f5f9;padding:2px 7px;border-radius:6px;font-size:12.5px;}
.wx-actions{display:flex;flex-wrap:wrap;gap:9px;align-items:center;
  padding:14px 20px;border-top:1px solid var(--line-2);background:#fafcfe;
  border-radius:0 0 var(--radius) var(--radius);}
.wx-banner{border-radius:10px;padding:13px 16px;font-size:13.5px;line-height:1.8;}
.wx-banner.ok{background:var(--green-soft);color:#0b6b36;border:1px solid #c6ead6;}
.wx-banner.bad{background:var(--red-soft);color:#8c1d16;border:1px solid #f5c6c0;
  overflow-wrap:anywhere;}
.wx-banner.bad span{font-size:12.5px;color:#a3362c;}
.wx-stats{display:flex;gap:10px;padding:0 20px 14px;}
.wx-stats>div{flex:1;text-align:center;background:#f7fafd;border-radius:10px;padding:11px 6px;}
.wx-stats b{display:block;font-size:19px;color:var(--ink);}
.wx-stats span{font-size:12px;color:var(--muted);}
.wx-todo{margin:6px 0 16px;padding:0 20px 0 40px;font-size:13.5px;line-height:2.1;color:var(--ink-2);}
.wx-todo code{background:#f2f5f9;padding:2px 7px;border-radius:6px;font-size:12.5px;}

/* ══════════ 发通知表单 ══════════ */
.wx-form{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-start;
  padding:16px 20px;border-top:1px solid var(--line-2);background:#fafcfe;
  border-radius:0 0 var(--radius) var(--radius);}
.wx-form label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--muted);}
.wx-form .wx-area{width:100%;min-height:74px;resize:vertical;padding:9px 11px;
  font-family:inherit;font-size:13.5px;line-height:1.7;border:1px solid var(--line);
  border-radius:8px;outline:none;}
.wx-form .wx-area:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);}

/* ── 更新记录页（按版本号查）──────────────────────────────── */
.cl-chips{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px 16px;}
.cl-chip{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  padding:7px 11px;border:1px solid var(--line);background:#fff;border-radius:9px;
  text-align:left;transition:background .12s,border-color .12s;max-width:236px;
}
.cl-chip b{font-size:12.5px;color:var(--ink);}
.cl-chip span{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:214px;}
.cl-chip:hover{border-color:var(--brand);background:var(--brand-soft);}
.cl-chip.on{border-color:var(--brand);background:var(--brand);}
.cl-chip.on b,.cl-chip.on span{color:#fff;}

.cl-doc{padding:4px 20px 20px;font-size:13.5px;line-height:1.75;color:var(--ink-2);}
.cl-doc .cl-p{margin:8px 0;}
.cl-doc .cl-h{margin:16px 0 6px;font-size:13.5px;font-weight:700;color:var(--ink);}
.cl-doc .cl-ul{margin:6px 0;padding-left:20px;}
.cl-doc .cl-ul li{margin:3px 0;}
.cl-doc .cl-hr{border:none;border-top:1px solid var(--line-2);margin:14px 0;}
.cl-doc .cl-quote{margin:10px 0;padding:8px 12px;border-left:3px solid var(--brand);
  background:var(--brand-soft);border-radius:0 8px 8px 0;}
.cl-doc .cl-pre{margin:10px 0;padding:10px 12px;background:#f6f8fb;border-radius:8px;
  overflow-x:auto;font-size:12px;line-height:1.6;}
.cl-doc .cl-tb{margin:10px 0;}
.cl-doc .cl-tb table{font-size:12.5px;}
.cl-doc code{background:#eef2f7;padding:1px 5px;border-radius:5px;font-size:12px;}

/* ══════════ 账单管理（v0.8.0）══════════════ */

/* 侧边栏：可折叠类目（账单管理） */
.nav-parent{
  display:flex;align-items:center;gap:9px;
  padding:8.5px 11px;border-radius:8px;margin:6px 0 1px;
  color:#cfdae8;font-size:13.5px;font-weight:600;
  cursor:pointer;user-select:none;
  transition:background .13s,color .13s;
}
.nav-parent:hover{background:rgba(255,255,255,.06);color:#eaf1f9;}
.nav-parent .ico{width:17px;text-align:center;font-size:14.5px;opacity:.95;}
.nav-parent .caret{
  margin-left:auto;font-size:15px;line-height:1;color:#7b8ea3;
  display:inline-block;transition:transform .15s;
}
.nav-parent .caret.open{transform:rotate(90deg);}
.nav-parent.active{color:#fff;background:rgba(255,255,255,.05);}
.nav-sub{padding-left:9px;margin-bottom:2px;border-left:1px solid rgba(255,255,255,.08);margin-left:13px;}
.nav-sub .nav-item{padding-left:12px;}

/* 筛选条 */
.flt{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;padding:15px 16px 12px;}
.flt-i{display:flex;flex-direction:column;gap:5px;min-width:0;}
.flt-i > label{font-size:11.5px;color:var(--muted);font-weight:600;}
.flt-i input,.flt-i select{
  height:33px;padding:0 10px;border:1px solid var(--line);border-radius:8px;
  font-size:13px;color:var(--ink);background:#fff;font-family:inherit;min-width:148px;
}
.flt-i input:focus,.flt-i select:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);
}
.flt-i input:disabled,.flt-i select:disabled{background:#f6f8fb;color:var(--muted);}
.flt-grow{flex:1;min-width:170px;}
.flt-grow input{width:100%;min-width:0;}
.flt-btns{flex-direction:row;align-items:center;gap:8px;}
.flt-tools{
  display:flex;justify-content:flex-end;align-items:center;gap:9px;
  padding:11px 16px 14px;border-top:1px solid var(--line-2);
}
.rng{display:flex;align-items:center;gap:6px;}
.rng input{width:142px;min-width:0;}
.rng span{color:var(--muted);font-size:12px;}

/* 营期时间快选（1~12 月 / 今年法定假期） */
.qk-wrap{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;padding:0 16px 13px;}
.qk-lb{font-size:11.5px;color:var(--muted);font-weight:600;line-height:26px;white-space:nowrap;}
.qk-bar{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0;}
.qk{
  border:1px solid var(--line);background:#fff;border-radius:14px;padding:3px 11px;
  font-size:12px;color:var(--ink-2);cursor:pointer;font-family:inherit;
  line-height:1.45;white-space:nowrap;transition:background .12s,border-color .12s,color .12s;
}
.qk:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft);}
.qk.hol{color:var(--brand);border-color:var(--brand-line,#cfdff5);background:var(--brand-soft);}
.qk.on{border-color:var(--brand);background:var(--brand);color:#fff;font-weight:600;}

/* 状态分段按钮 */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;height:33px;background:#fff;}
.seg-b{
  border:none;background:transparent;padding:0 13px;height:100%;
  font-size:12.5px;color:var(--ink-2);cursor:pointer;font-family:inherit;
}
.seg-b + .seg-b{border-left:1px solid var(--line);}
.seg-b:hover:not(:disabled){background:var(--brand-soft);}
.seg-b.on{background:var(--brand);color:#fff;font-weight:600;}
.seg-b:disabled{cursor:default;opacity:.6;}

/* 账单表格（列多，紧凑 + 数字右对齐） */
.tb-bill{font-size:12.5px;}
.tb-bill th,.tb-bill td{padding:7px 10px;white-space:nowrap;}
.tb-bill thead th{font-size:11.5px;}
.tb-bill th.num,.tb-bill td.num{text-align:right;font-variant-numeric:tabular-nums;}
.tb-bill td .sub{color:var(--muted);font-size:11.5px;font-weight:400;}

/* 营期账单列表里的「营种简称」输入框（v0.17.0，6 个汉字宽） */
.tb-bill .bs-in{
  width:98px; height:30px; padding:0 8px;
  border:1px solid var(--line); border-radius:7px; background:#fff;
  font-size:12.5px; font-family:inherit; color:var(--ink);
}
.tb-bill .bs-in:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);}
.tb-bill .bs-in.auto{color:var(--ink-2);background:#fbfcfe;}   /* 自动抓取来的默认值（还没人改过）*/
.th-off{font-size:10px;color:var(--muted);font-weight:400;}
.todo{color:var(--red);}
.dim{color:#c3ccd6;}
.neg{color:var(--red);}
.pos{color:var(--green);}

/* 危险按钮 */
.btn.danger{color:var(--red);border-color:#f3c8c4;}
.btn.danger:hover{background:var(--red-soft);border-color:#eab0aa;}

/* ══════════ 账单明细（v0.9.0：9 个分区）══════════════ */

/* 【平台收入】横排 5 列 */
.pfin{margin:0 16px 4px;}
.pfin-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  border:1px solid var(--line);border-bottom:none;}
.pfin-row:last-child{border-bottom:1px solid var(--line);}
.pfin-row > div{padding:9px 12px;border-right:1px solid var(--line);
  font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pfin-row > div:last-child{border-right:none;}
.pfin-row.head{background:#f6f8fb;color:var(--ink-2);font-weight:600;font-size:12.5px;}
.pfin-row:not(.head) > div{background:#fafbfd;font-weight:700;font-variant-numeric:tabular-nums;}
.pf-link{margin-left:4px;color:var(--brand);cursor:pointer;font-weight:500;font-size:12px;}
.pf-link:hover{text-decoration:underline;}
.pfin-note{padding:9px 16px 14px;font-size:12px;color:var(--muted);}

/* 分区卡片 */
.sec-card{margin-bottom:16px;}
.sec-rebate{padding:10px 16px 2px;font-size:12.5px;color:var(--ink-2);}
.sec-rebate input{width:78px;height:30px;padding:0 9px;margin:0 4px;
  border:1px solid var(--line);border-radius:8px;font-size:13px;font-family:inherit;text-align:right;}
.sec-foot{display:flex;align-items:center;gap:12px;padding:11px 16px 14px;
  border-top:1px solid var(--line-2);}
.sec-total{font-size:13px;font-weight:700;color:var(--ink);}
.sec-foot .btn{margin-left:auto;}

/* ★ v0.51.0 整单审核：贴在底部「收入合计」栏的最右边 */
.bill-sum > .bs-audit{
  margin-left:auto;                       /* 推到最右 */
  flex-direction:row; align-items:center; gap:10px;
  padding-left:20px; border-left:1px solid var(--line);
}
.bill-sum > .bs-audit .bs-audit-t{font-size:12.5px;font-weight:700;color:var(--ink);}
.bill-sum > .bs-audit .bs-audit-hint{font-size:11.5px;color:var(--muted);max-width:230px;line-height:1.35;}
.bill-sum > .bs-audit .btn{margin-left:2px;}

/* ── ★ v0.50.0 账单「审核」───────────────────────────────── */
/* 分区底部的审核条：状态 + 驳回理由 + 审核通过/驳回 按钮 */
.sec-audit{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 16px 13px; border-top:1px dashed var(--line);
  background:#fbfcfe;
}
.sec-audit .au-state{display:inline-flex;align-items:center;}
.sec-audit .au-reason{
  font-size:12px; color:var(--red); max-width:520px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sec-audit .au-by{font-size:11.5px;color:var(--muted);}
.sec-audit .au-btns{margin-left:auto;display:flex;gap:8px;}
/* 已审核的分区：整块加一层浅绿底 + 顶部状态条，一眼看出「锁了」 */
.sec-card.sec-locked{box-shadow:inset 3px 0 0 var(--green);}
.sec-card.sec-locked .sec-grid input,
.sec-card.sec-locked .sec-grid select{background:#f6f8fa;color:#5b6a7a;}
.sec-card.sec-locked .tb-wrap{border-color:#e4e9ee;}
.lock-tag{font-size:11.5px;color:var(--green);font-weight:600;margin-left:8px;}
/* 列表里收支格下面的小字状态 */
.tb-bill td .sub.au-ok{color:var(--green);}
.tb-bill td .sub.au-wait{color:var(--orange);}

/* 底部汇总 */
.bill-sum{display:flex;flex-wrap:wrap;gap:26px;padding:15px 18px;}
.bill-sum > div{display:flex;flex-direction:column;gap:3px;}
.bill-sum span{font-size:11.5px;color:var(--muted);}
.bill-sum b{font-size:18px;font-weight:750;letter-spacing:-.3px;}

/* 弹窗内容：**复用 OA 原有的 .mask / .modal**（本文件上面那套，客户档案弹窗在用），
   这里只补「账单明细」表单自己的样式。
   ⚠️ 别再定义 .modal / .modal-head / .modal-body —— 会跟原有那套打架。 */

/* 弹窗里的小工具栏（导师模块：薪资明细弹窗顶部按钮） */
.md-tools{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 12px;}
.md-foot{display:flex;justify-content:flex-end;gap:9px;margin-top:18px;
  padding-top:14px;border-top:1px solid var(--line);}
.md-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;}
.md-f{display:flex;flex-direction:column;gap:5px;min-width:0;}
.md-f > span{font-size:11.5px;color:var(--muted);font-weight:600;}
.md-f input{height:33px;padding:0 10px;border:1px solid var(--line);border-radius:8px;
  font-size:13px;font-family:inherit;color:var(--ink);background:#fff;min-width:0;}
.md-f input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);}
.md-hint{margin:14px 0 0;font-size:12px;color:var(--muted);line-height:1.7;}
@media (max-width:640px){ .md-grid{grid-template-columns:1fr;} }

/* ══════════ 【平台收入】7 列表格 + 汇总行（v0.11.0）══════════
   ⚠️ 类名用 plat-*：`pf-grid` 已被员工页的两列信息网格占用（本文件上面），
      撞名会把 <table> 变成 display:grid，表头和数据列直接错位（真踩过）。 */
.plat-grid td{font-variant-numeric:tabular-nums;}
.plat-grid td:first-child,.plat-grid th:first-child{padding-left:14px;}
.plat-foot{display:block;padding:0 !important;}
.plat-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
.plat-sum > div{display:flex;flex-direction:column;gap:4px;padding:12px 16px;
  border-right:1px solid var(--line-2);min-width:0;}
.plat-sum > div:last-child{border-right:none;}
.plat-sum span{font-size:11.5px;color:var(--muted);white-space:nowrap;}
.plat-sum b{font-size:17px;font-weight:750;font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media (max-width:760px){ .plat-sum{grid-template-columns:repeat(2,minmax(0,1fr));} }

/* 明细弹窗底部的合计行 */
.md-total{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  text-align:center;font-size:13.5px;font-weight:700;color:var(--ink);}

/* ══════════ 出团管理（v0.13.0）══════════════════════════════ */
/* 「指派」按钮：没指派 = 灰色虚线；指派了 = 正常显示人员（窄列用省略号，悬浮看全） */
.trip-assign{
  width:100%; height:30px; padding:0 8px; border:1px solid var(--line); border-radius:7px;
  background:#fff; color:var(--ink); font-size:12.5px; font-family:inherit;
  text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.trip-assign.empty{color:var(--muted); background:#f6f8fb; border-style:dashed;}
.trip-assign:hover{border-color:var(--brand); color:var(--brand);}
.trip-assign.empty:hover{background:var(--brand-soft);}

/* ★ 出团管理表：20 列，不能再被容器压窄 —— table.tb 是 width:100%（会牺牲列宽）。
   这里改成「按内容排 + 放不下就横向滚动」，并**直接给控件定宽**（v0.15.0）：
   · 只有【客户 / 营种简称 / 活动场地】给 6 个汉字宽（12.5px×6 = 75px + 内边距 16 + 边框 2 → 98px）
   · 其余文本框回到上一版的紧凑宽度（64px），下拉 96px
   · 「副带」列最宽（15 个汉字 = 187.5px）—— 由表头 218px 给到指派按钮 */
#tripTable{width:max-content; min-width:100%;}
#tripTable th,#tripTable td{white-space:nowrap;}
#tripTable td .cell{min-width:0;}                 /* 覆盖 .sec-grid .cell 的 min-width:64px */
#tripTable td input.cell{width:64px;}
#tripTable td input[data-f="marketer"],
#tripTable td input[data-f="pname_short"],
#tripTable td input[data-f="venue"]{width:98px;}
#tripTable td select.cell{width:96px;}
/* ★ v0.33.0/0.34.0：自动识别出来的默认值（类别 / 销售·客户简称）—— 淡蓝底斜体，用户一改就变人工值、底色消失 */
#tripTable td .cell-auto{background:#f5faff;color:#2c5f9e;font-style:italic;}

/* ══ 拼团小字（v0.18.0）：有拼团常显；没拼团只在鼠标悬浮时浮出入口 ══ */
#tripTable td.signup-td{vertical-align:top;}
.join-wrap{width:112px;overflow:hidden;}
.trip-join{
  display:block;width:100%;margin-top:2px;padding:0;border:none;background:transparent;
  font-size:11.5px;font-family:inherit;text-align:left;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.trip-join.has{color:var(--ink-2);}
.trip-join.add{color:var(--muted);opacity:0;}
#tripTable tr[data-row]:hover .trip-join.add{opacity:1;}
.trip-join:hover{color:var(--brand);text-decoration:underline;}

/* 「登记拼团」弹窗：一行 = 同行名称 + 人数 + 删 */
.join-r{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.join-r .jr-n{flex:1;min-width:0;}
.join-r .jr-c{width:88px;}
.md-in{
  height:33px;padding:0 10px;border:1px solid var(--line);border-radius:8px;
  font-size:13px;font-family:inherit;color:var(--ink);background:#fff;min-width:0;
}
.md-in:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);}

/* ══════════ 账单明细 v0.10.0：表内直接录 + 底部固定保存条 ══════════ */

/* 表内输入框 */
.sec-grid td{padding:4px 6px;vertical-align:middle;}
.sec-grid th{padding:8px 10px;}
.sec-grid .cell{
  width:100%; min-width:64px; height:30px; padding:0 8px;
  border:1px solid var(--line); border-radius:7px; background:#fff;
  font-size:12.5px; font-family:inherit; color:var(--ink);
}
.sec-grid td.num .cell{text-align:right;font-variant-numeric:tabular-nums;}
.sec-grid .cell:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);}
.sec-grid .cell:disabled{background:#f6f8fb;color:var(--ink-2);}
.sec-grid .calc-in,.sec-grid .der-in{background:#f2f6fb;color:var(--ink-2);font-weight:700;}

/* 序号列 + 删行 */
.sec-grid .seqcol{width:64px;text-align:center;white-space:nowrap;}
.sec-grid .rowno{font-size:12px;color:var(--muted);margin-left:2px;font-variant-numeric:tabular-nums;}
.row-del{
  border:none;background:transparent;font-size:13px;line-height:1;
  padding:3px 4px;border-radius:6px;opacity:.55;
}
.row-del:hover{background:var(--red-soft);opacity:1;}
.sec-grid tr[data-row]:hover{background:#fafcff;}
.sec-grid .blank-tip td{padding:0;}
.sec-grid .blank-tip .empty{padding:16px;}

.calc{font-weight:700;font-variant-numeric:tabular-nums;}

/* 凭证上传 */
.up-td{min-width:132px;}
.up-img,.up-pdf{display:flex;align-items:center;gap:6px;}
.up-strip{display:flex;gap:4px;overflow-x:auto;max-width:150px;scroll-behavior:smooth;}
.up-strip::-webkit-scrollbar{height:4px;}
.up-thumb{flex:0 0 auto;width:38px;height:38px;border-radius:6px;overflow:hidden;
  border:1px solid var(--line);background:#f6f8fb;display:block;}
.up-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.up-empty{font-size:11.5px;color:#c3ccd6;padding:10px 4px;}
.up-navs{display:flex;flex-direction:column;gap:1px;}
.up-nav{border:none;background:#eef2f7;border-radius:4px;font-size:9px;line-height:1;padding:2px 3px;color:var(--ink-2);}
.up-nav:hover{background:var(--brand-soft);}
.up-file{font-size:12px;color:var(--brand);white-space:nowrap;}

/* 小号按钮 */
.btn.xs{height:26px;padding:0 8px;font-size:11.5px;border-radius:7px;}
.btn.sm.primary + .btn.sm.primary{margin-left:0;}
.sec-foot .btn.xs{margin-left:0;}

/* 底部固定的「打印 / 保存」条 */
.bill-bar{
  position:fixed; left:var(--sidebar-w); right:0; bottom:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:10px 24px; background:rgba(255,255,255,.96);
  border-top:1px solid var(--line);
  box-shadow:0 -4px 18px rgba(20,40,70,.07);
  backdrop-filter:blur(6px);
}
.bill-bar-spacer{height:74px;}
.bb-left{display:flex;align-items:center;gap:12px;font-size:13px;min-width:0;}
.bb-left b{white-space:nowrap;}
.bb-sum{color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bb-right{display:flex;gap:9px;flex-shrink:0;}
@media (max-width:820px){
  .bill-bar{left:0;padding:10px 14px;}
  .bb-sum{display:none;}
}

/* ══════════ ★ v0.52.0 账单打印：固定字号，默认排成 A4 一页 ══════════
   说明：
   · Chrome 打印对话框里的「缩放」**不能由页面预设**（浏览器安全限制）→ 改用**固定的小字号**打印，
     效果 = 以前手动把缩放调到 40% 的样子，且**每次打印都一样**（不随内容变）。
   · 纸张 A4、边距最小（@page 定的），背景色照打（print-color-adjust）。
   · ⚠️ 明细特别多的账单（>40 行）自然会分成 2 页 —— 这是正常的，不硬压。
   · 所有字号都挂在 `--pf`（打印基准字号）上，改这一个值整体缩放。 */
:root{ --pf: 5px; }                        /* 打印基准字号（= 用户「缩放40%」时的实际字号；≤20 行明细基本一页，见 CHANGELOG v0.52.0） */

@page { size: A4 portrait; margin: 5mm; }

@media print{
  /* ① 只留账单内容，把所有交互元素藏掉 */
  #sidebar,#topbar,.bill-bar,.bill-bar-spacer,.row-del,.up-btn,.up-navs,
  .sec-foot .btn,.card-head .hint,.flt,.flt-tools,.sec-audit .au-btns,
  .bs-audit .btn,.pg,.loading{display:none !important;}

  html,body{background:#fff !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}

  /* ② 宽度按 A4 内容区排（198mm），不做整体缩放 */
  #view{padding:0 !important;width:auto;}
  #view > .page-title{font-size:calc(var(--pf) + 1.5px) !important;margin:0 0 2px !important;}
  #view > .page-sub{font-size:calc(var(--pf) - 0.5px) !important;margin:0 0 5px !important;}

  /* ③ 卡片收紧 */
  .card{box-shadow:none !important;border:1px solid #bbb !important;border-radius:0 !important;
        margin:0 0 calc(var(--pf) * 0.45) !important;break-inside:avoid;}
  .card-head{padding:calc(var(--pf) * 0.35) calc(var(--pf) * 0.8) !important;}
  .card-head h3{font-size:calc(var(--pf) + 2px) !important;}
  .sec-rebate{font-size:calc(var(--pf) - 0.5px) !important;
              padding:calc(var(--pf) * 0.25) calc(var(--pf) * 0.8) !important;}
  .sec-rebate input{height:auto !important;width:32px !important;
                    font-size:calc(var(--pf) - 0.5px) !important;
                    border:none !important;background:transparent !important;}

  /* ④ 明细表格：字小、行紧 */
  .tb-wrap{max-height:none !important;overflow:visible !important;}
  .sec-grid th{padding:calc(var(--pf) * 0.12) calc(var(--pf) * 0.45) !important;
               font-size:calc(var(--pf) - 0.8px) !important;background:#eef2f7 !important;}
  .sec-grid td{padding:0 calc(var(--pf) * 0.45) !important;
               font-size:var(--pf) !important;line-height:calc(var(--pf) * 1.35) !important;}
  .sec-grid .cell,.sec-grid .calc-in,.sec-grid .der-in{
    border:none !important;background:transparent !important;box-shadow:none !important;
    -webkit-appearance:none;appearance:none;
    height:auto !important;min-height:0 !important;
    padding:0 calc(var(--pf) * 0.25) !important;
    font-size:var(--pf) !important;color:var(--ink) !important;line-height:inherit !important;
  }
  .sec-grid .rowno{font-size:calc(var(--pf) - 0.8px) !important;}
  /* ★ v0.52.1 凭证列（上传类）整列不打印 —— 缩略图会把每一行撑高一倍，是超页的主因 */
  .sec-grid th[data-upl="1"],.sec-grid td[data-upl="1"]{display:none !important;}

  /* ⑤ 分区底部 / 审核条 / 汇总条 */
  .sec-foot{padding:calc(var(--pf) * 0.2) calc(var(--pf) * 0.8) calc(var(--pf) * 0.3) !important;}
  .sec-total{font-size:calc(var(--pf) + 0.5px) !important;}
  .sec-audit{padding:calc(var(--pf) * 0.2) calc(var(--pf) * 0.8) !important;
             gap:calc(var(--pf) * 0.7) !important;background:#fafbfd !important;}
  .sec-audit .tag,.sec-audit .au-reason,.sec-audit .au-by{font-size:calc(var(--pf) - 0.5px) !important;}
  .bill-sum{padding:calc(var(--pf) * 0.7) calc(var(--pf) * 0.9) !important;
            gap:calc(var(--pf) * 1.9) !important;flex-wrap:nowrap !important;}
  .bill-sum span{font-size:calc(var(--pf) - 1px) !important;}
  .bill-sum b{font-size:calc(var(--pf) + 3.5px) !important;}
  .bill-sum > .bs-audit{padding-left:calc(var(--pf) * 1.1) !important;gap:calc(var(--pf) * 0.7) !important;}
  .bill-sum > .bs-audit .bs-audit-t,
  .bill-sum > .bs-audit .bs-audit-hint{font-size:calc(var(--pf) - 1px) !important;}
  .bill-sum > .bs-audit .bs-audit-hint{display:none !important;}   /* 提示文字不打印 */

  /* ★ 「还没有明细」的占位块默认 padding 50px → 打印时压到最小（这是最大的浪费） */
  .empty{padding:calc(var(--pf) * 0.55) 10px !important;
         font-size:calc(var(--pf) - 0.5px) !important;}
  .empty .ico{display:none !important;}
  /* 平台收入的三块数字 + 那行长说明 */
  .plat-sum > div{padding:calc(var(--pf) * 0.45) calc(var(--pf) * 0.8) !important;gap:1px !important;}
  .plat-sum span{font-size:calc(var(--pf) - 1px) !important;}
  .plat-sum b{font-size:calc(var(--pf) + 1.5px) !important;}
  .pfin-note{display:none !important;}        /* 口径说明不用打在纸上 */
  .pf-link{display:none !important;}
  /* ★★ 空分区（没有明细）：只留分区名一行 —— 表头/占位/总计0元/审核条都不打
     （一张账单常有 2~5 个空分区，这一项能省 100px 上下） */
  .sec-card.sec-empty .sec-grid{display:none !important;}
  .sec-card.sec-empty .sec-foot,
  .sec-card.sec-empty .sec-audit,
  .sec-card.sec-empty .sec-rebate{display:none !important;}
  .sec-card.sec-empty .card-head{padding:calc(var(--pf) * 0.12) calc(var(--pf) * 0.8) !important;}

  /* ⑥ 其它页面（非账单）也别打出一堆控件 */
  table.tb th{padding:calc(var(--pf) * 0.12) calc(var(--pf) * 0.55) !important;
              font-size:calc(var(--pf) - 0.5px) !important;}
  table.tb td{padding:0 calc(var(--pf) * 0.55) !important;font-size:calc(var(--pf) - 0.5px) !important;}
  .tag{font-size:calc(var(--pf) - 1px) !important;padding:0 5px !important;}
}

/* ══════════ 供应商账单的 tab 条（v0.20.0）══════════ */
.sup-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:-4px 0 14px;}
.sup-tab{background:none;border:none;border-bottom:2px solid transparent;padding:8px 16px 9px;
  font-size:13.5px;color:var(--muted);cursor:pointer;font-family:inherit;}
.sup-tab:hover{color:var(--brand);}
.sup-tab.on{color:var(--brand);font-weight:600;border-bottom-color:var(--brand);}
/* 必填星号（供应商新增弹窗） */
.req{color:#e24b4a;font-style:normal;margin-right:3px;}

/* ══════════ 仓库模块（v0.22.0）══════════ */
.wh-thumb{width:34px;height:34px;object-fit:cover;border-radius:6px;
  border:1px solid var(--line);display:inline-block;vertical-align:middle;}
.wh-thumb.big{width:88px;height:88px;}
.wh-img{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border:1px dashed var(--line);border-radius:6px;color:var(--muted);font-size:15px;
  background:#fafbfc;vertical-align:middle;}
/* 物品分类多选盒子 */
.wh-catbox{max-height:150px;overflow:auto;border:1px solid var(--line);border-radius:8px;
  padding:8px 10px;background:#fbfcfd;}
.wh-catrow{display:flex;flex-wrap:wrap;gap:6px 14px;padding:4px 0;font-size:12.5px;
  border-bottom:1px dashed var(--line-2);}
.wh-catrow:last-child{border-bottom:none;}
.wh-catrow label{display:inline-flex;align-items:center;gap:5px;cursor:pointer;}
/* 多规格行 */
.wh-spec-row{display:flex;gap:8px;align-items:center;margin-bottom:6px;}
.wh-spec-row .wh-sp{flex:1 1 auto;min-width:0;}
.wh-spec-row .wh-spr{width:96px;flex:0 0 auto;}
/* 商品图片上传区 */
.wh-upbox{display:flex;align-items:center;gap:12px;
  border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:#fbfcfd;}

/* ══════════ 拖拽上传（v0.60.0）══════════
   任何挂了 .dz 的上传区，拖文件进去就传：拖入时整块高亮 + 盖一层提示字。 */
.dz{position:relative;}
.dz.dz-on{background:var(--brand-soft);box-shadow:inset 0 0 0 2px var(--brand);border-radius:6px;}
.dz.dz-on::after{
  content:attr(data-dz-hint);position:absolute;inset:0;z-index:5;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;color:var(--brand);letter-spacing:.3px;
  background:rgba(255,255,255,.88);border-radius:6px;
  pointer-events:none;text-align:center;padding:0 6px;}
/* 上传中：格子变灰、点不动 */
.up-loading{opacity:.55;pointer-events:none;}
/* CMS 遗留的「纯文件名」凭证：打不开，只显示个名字，别再出破图 */
.up-bare{display:inline-flex;align-items:center;max-width:152px;font-size:11.5px;line-height:1.4;
  color:var(--ink-2);background:#f1f4f8;border:1px solid var(--line);border-radius:6px;
  padding:3px 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* PDF 缩略方块（在「图片」格里也能一眼看出这是个 PDF） */
.up-thumb.pdf{display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:700;color:#fff;background:#d9534f;letter-spacing:.5px;}
.up-thumb.pdf:hover{background:#c9403c;}

/* ══════════ 宽版弹窗（v0.23.0：记账单填充表格列多，需要宽一点）══════════ */
.modal.wide{width:min(1180px,96vw);}

/* ══════════ 固定高度表格：可视 10 行 + 表头固定（v0.24.0）══════════
   用途：列多的宽表格（如营期账单列表）—— 页面不被撑长，
   表头在滚动时始终可见，分页条固定在表格下方不跟着滚。 */
.tb-wrap.fix10{max-height:540px;overflow:auto;}          /* 540px = 表头 38 + 10 行 × 50（实测量出来的） */
.tb-wrap.fix10 table.tb thead th{
  position:sticky;top:0;z-index:2;
  background:#f8fafd;                                    /* 必须有底色，否则行会透上来 */
  box-shadow:inset 0 -1px 0 var(--line);                 /* collapse 下边框会丢，用阴影补 */
}
.tb-wrap.fix10 table.tb tbody tr:last-child td{border-bottom:1px solid var(--line-2);}

/* ══════════ 长线营种报名统计表（v0.25.0）══════════ */
.lt-table{width:max-content;min-width:100%;}
.lt-table th,.lt-table td{white-space:nowrap;}
.lt-table td.lt-name{vertical-align:middle;background:#fbfcfe;font-size:12.5px;
  max-width:130px;overflow:hidden;text-overflow:ellipsis;}
.lt-table td.lt-short{vertical-align:middle;background:#fbfcfe;padding:6px 8px;}
.lt-table .lt-sin{width:98px;}                       /* 营种简称：6 个汉字 */
.lt-table .lt-bend{width:186px;}                     /* B端信息：15 个汉字 */
.lt-table .lt-sel{width:76px;padding:4px 6px;border:1px solid var(--line);border-radius:6px;
  background:#fff;font-size:12px;color:var(--ink);}
.lt-grp{width:70px;padding:4px 6px;border:1px dashed var(--line);border-radius:6px;background:#fafbfc;
  color:var(--muted);font-size:12px;cursor:pointer;}
.lt-grp.on{border-style:solid;border-color:#0F6E56;background:#E1F5EE;color:#0F6E56;}
.lt-table td.num.lt-hit{font-weight:600;color:var(--ink);}
.lt-pairs{cursor:pointer;font-size:12px;line-height:1.5;max-width:130px;overflow:hidden;}
.lt-pairs:hover{background:#f2f7ff;border-radius:6px;}
.lt-pair i{color:var(--muted);font-style:normal;}    /* 名称灰色显示 */
.lt-pair-empty{color:var(--muted);opacity:.6;}
/* 季节关键词下面的小字（区间）*/
.qk .qk-sub{display:block;font-size:10px;color:var(--muted);font-weight:400;line-height:1.1;}
.qk.on .qk-sub{color:var(--brand);}

/* ══════════ 长线营统计：表头 + 表尾总计都固定，中间滚动全部数据（v0.25.1）══════════ */
.lt-wrap{max-height:calc(100vh - 330px);min-height:340px;overflow:auto;}
.lt-wrap thead th{position:sticky;top:0;z-index:3;background:#f8fafd;
  box-shadow:inset 0 -1px 0 var(--line);}
.lt-wrap tfoot tr{height:34px;}
.lt-wrap tfoot td{position:sticky;z-index:2;font-size:12.5px;
  border-top:1px solid var(--line);padding:6px 14px;white-space:nowrap;}
.lt-wrap tfoot tr:nth-child(1) td{bottom:68px;background:#FFF7E6;}   /* 独立营 */
.lt-wrap tfoot tr:nth-child(2) td{bottom:34px;background:#EAF3FB;}   /* 亲子营 */
.lt-wrap tfoot tr:nth-child(3) td{bottom:0;background:#EAF7EF;font-weight:700;}  /* 合计人数 */
.lt-ft-label{font-weight:700;color:var(--ink);text-align:center;}
.lt-table td.lt-when{font-size:12.5px;}
.lt-table td.lt-when .lt-days{display:inline-block;margin-left:6px;padding:0 5px;border-radius:4px;
  background:#eef4fb;color:#185FA5;font-size:11px;}

/* 横向滚动时固定：左边「营种名称 + 营种简称」，右边「合计」（v0.25.1）*/
.lt-wrap thead th.lt-fix1{position:sticky;left:0;z-index:5;background:#f8fafd;}
.lt-wrap thead th.lt-fix2{position:sticky;left:130px;z-index:5;background:#f8fafd;
  box-shadow:2px 0 4px -2px rgba(10,25,45,.16);}
.lt-wrap tbody td.lt-name{position:sticky;left:0;z-index:2;background:#fbfcfe;}
.lt-wrap tbody td.lt-short{position:sticky;left:130px;z-index:2;background:#fbfcfe;
  box-shadow:2px 0 4px -2px rgba(10,25,45,.12);}
.lt-wrap thead th.lt-total{position:sticky;right:0;z-index:5;background:#f8fafd;
  box-shadow:-2px 0 4px -2px rgba(10,25,45,.16);}
.lt-wrap tbody td.lt-total{position:sticky;right:0;z-index:2;background:#fbfcfe;
  box-shadow:-2px 0 4px -2px rgba(10,25,45,.12);}
.lt-wrap tfoot td.lt-total{position:sticky;right:0;z-index:3;
  box-shadow:-2px 0 4px -2px rgba(10,25,45,.16);}   /* 总计行的「合计」也钉在右边 */
.lt-wrap tfoot td.lt-ft-label{position:sticky;left:0;}

/* 前两列固定宽度（实测 130 / 114），营期时间列收窄并允许换行（曾被长期次名撑到 553px）*/
.lt-table th.lt-fix1,.lt-table td.lt-name{width:130px;max-width:130px;}
.lt-table th.lt-fix2,.lt-table td.lt-short{width:114px;max-width:114px;}
.lt-table td.lt-when{white-space:normal;}
.lt-table .lt-when-in{width:198px;white-space:normal;line-height:1.5;}

/* 营种之间：只把分隔线加粗一点（v0.26.3，替换掉之前那条深色横条）*/
.lt-table tr.lt-gstart > td{border-top:2px solid #c9d2dc;}

/* ── 账号管理（★ v0.39.0）：左岗位列表 + 右页面权限 ── */
.acc-wrap{display:flex;gap:16px;align-items:flex-start}
.acc-left{width:190px;flex:0 0 190px;border:1px solid #e6ebf1;border-radius:8px;padding:8px;background:#fafcfe}
.acc-left-h{font-size:12px;color:#7d8b9a;padding:4px 6px 8px}
.acc-post{padding:7px 9px;border-radius:6px;cursor:pointer;margin-bottom:4px}
.acc-post:hover{background:#eef5fd}
.acc-post.on{background:#e3f0ff;box-shadow:inset 3px 0 0 #2c7be5}
.acc-post-n{font-size:13px;font-weight:600;color:#22303c}
.acc-post-m{font-size:11.5px;color:#8795a3;margin-top:2px}
.acc-right{flex:1;min-width:0;border:1px solid #e6ebf1;border-radius:8px;padding:12px 14px}
.acc-right-h{font-size:14px;font-weight:700;display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:4px}
.acc-tip{font-size:12px;color:#8795a3;margin-bottom:10px}
.acc-grp{font-size:12px;font-weight:700;color:#5b6b7c;margin:12px 0 3px;padding-bottom:3px;border-bottom:1px solid #eef2f6}
.acc-row{display:flex;align-items:center;justify-content:space-between;padding:3px 0;border-bottom:1px dashed #f2f5f8}
.acc-mn{font-size:13px}
.acc-lv{display:flex;gap:4px}
.btn.xs{padding:1px 8px;font-size:11.5px;line-height:1.7;min-width:34px}
/* ══════════ ★ v0.54.0 报名概况弹窗（出团表「报名人数」点开）══════════ */
.signup-link{background:none;border:none;padding:0;font:inherit;font-size:12.5px;color:var(--brand);
  cursor:pointer;text-decoration:underline dotted;text-underline-offset:2px;line-height:1.4;}
.signup-link:hover{text-decoration:underline;font-weight:600;}
.eo-head{border-bottom:1px solid var(--line-2);padding-bottom:2px;}
.eo-pname{font-size:13.5px;color:#5b6b7c;margin-bottom:8px;}
.eo-pname b{color:var(--ink);font-size:14px;}
.eo-pname .eo-tag{display:inline-block;margin-left:6px;background:#eef4fb;color:#3b6ea5;
  border-radius:4px;padding:0 6px;font-size:11.5px;}
.eo-flt{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-bottom:10px;font-size:13px;}
.eo-flt label{display:inline-flex;align-items:center;gap:6px;color:#5b6b7c;}
.eo-flt select{max-width:230px;}
.eo-stat{display:flex;gap:24px;flex-wrap:wrap;align-items:center;background:#f7f9fc;
  border:1px solid #e9eef5;border-radius:8px;padding:8px 12px;font-size:12.5px;color:#5b6b7c;}
.eo-stat b{color:var(--ink);font-size:13.5px;}
.eo-stat .eo-dim{color:#8795a3;font-size:11.5px;margin-left:4px;}
.eo-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:12px 0 8px;}
.eo-tab{background:none;border:none;border-bottom:2px solid transparent;padding:7px 14px 8px;
  font-size:13px;color:var(--muted);cursor:pointer;font-family:inherit;}
.eo-tab:hover{color:var(--brand);}
.eo-tab.on{color:var(--brand);font-weight:600;border-bottom-color:var(--brand);}
.eo-foot{font-size:11.5px;color:#8795a3;padding:8px 2px 0;line-height:1.7;}
/* 报名概况表的「操作」列别被挤成竖排 */
#eoBody .tb th:last-child,#eoBody .tb td:last-child{white-space:nowrap;min-width:84px;}
#eoBody .tb th:first-child,#eoBody .tb td:first-child{white-space:nowrap;}
#eoBody .tb .btn.xs{white-space:nowrap;}
/* ══════════ ★ v0.55.0 外部团（非系统团：学校定制团这类不走信多帮的团）══════════ */
.tp-range{display:flex;gap:4px;align-items:flex-start;}
.tp-ext{flex:0 0 auto;margin-top:2px;font-size:10px;line-height:1.5;color:#8a6d3b;
  background:#fdf6e7;border:1px solid #efe0c2;border-radius:3px;padding:0 4px;white-space:nowrap;}
.tp-dates{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:2px;}
.tp-dates input[type="date"]{width:100%;min-width:0;height:21px;font-size:11px;padding:0 2px;
  border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--ink);}
/* ⚠️ 出团表里 `#tripTable td input.cell{width:64px}` 优先级更高，会把日期框压成 64px → 这里显式盖回来 */
#tripTable td .tp-dates input.cell[type="date"]{width:100%;min-width:0;}
/* Chrome 的日期框内部有最小宽度 → 再压一层，保证「2026/01/05」不被截断 */
.tp-dates input[type="date"]::-webkit-datetime-edit{font-size:11px;padding:0;}
.tp-dates input[type="date"]::-webkit-calendar-picker-indicator{margin-left:0;padding:0;width:14px;}

/* ★ v0.54.1：一笔单多个营员 →「营员名称 / 性别 / 年龄」一人一行，三列按行对齐 */
#eoBody .tb td.eo-cams{padding-top:7px;padding-bottom:7px;vertical-align:top;}
#eoBody .tb td.eo-cams .eo-cam{line-height:1.6;white-space:nowrap;}
#eoBody .tb th:nth-child(5),#eoBody .tb th:nth-child(6),#eoBody .tb th:nth-child(7){white-space:nowrap;}
/* 订单详情 */
.ob-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 20px;font-size:13px;}
.ob-grid > div{display:flex;gap:6px;min-width:0;}
.ob-grid span{color:#8795a3;flex:0 0 68px;}
.ob-grid b{font-weight:600;word-break:break-all;}
.ob-sec{font-size:12.5px;font-weight:700;color:#5b6b7c;margin:14px 0 5px;
  padding-bottom:3px;border-bottom:1px solid #eef2f6;}
.ob-rem{margin:0;padding-left:20px;font-size:12.5px;line-height:1.9;color:#3d4b5a;}

/* ★ v0.53.0：账单那一行的说明 + 岗位头的「可整单审核」开关 */
.acc-bills-tip{font-size:11.5px;color:#8795a3;margin-left:8px}
.acc-sw{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#5b6b7c;
  border:1px solid #dfe6ee;border-radius:999px;padding:1px 10px 1px 8px;cursor:pointer;
  background:#f7f9fc;user-select:none}
.acc-sw.on{border-color:#f0c36d;background:#fff8e8;color:#a5691a;font-weight:600}
.acc-sw input{margin:0;cursor:pointer}

/* ★ v0.43.0：本店的人不显示门店筛选框，改成这把锁（一眼看出「只能看本店」） */
.store-lock{height:34px;line-height:34px;font-size:13px;color:#2c5f9e;font-weight:600;
  background:#f5faff;border:1px solid #cfe2f7;border-radius:6px;padding:0 10px}

/* ══════════ ★ v0.56.1 营种门店归属页：信多帮真值列 ══════════ */
.ps-rel{font-size:12.5px;line-height:1.9;}
.ps-rel.ok{color:#2f7a4d;}
.ps-rel.diff{color:#b3312c;font-weight:600;}
.ps-rel.missing{color:#a5691a;}
.ps-rel.none{color:#8795a3;}

/* ══════════ ★ v0.59.0 出团「名单」打印（出团管理表 → 🖨 名单）══════════
   版式（A4 / 绿框 / 深色表头 / 斑马纹 / 抬头）**写死**，用户只能勾「显示哪些列」。
   预览和打印共用同一段 HTML（.rs-sheet）。 */
.rs-wrap{display:flex;gap:14px;align-items:flex-start;}
.rs-side{flex:0 0 330px;max-height:66vh;overflow:auto;padding-right:4px;}
.rs-preview{flex:1 1 auto;min-width:0;height:66vh;overflow:auto;background:#eef1f4;
  border:1px solid var(--line);border-radius:8px;padding:12px;}
.rs-scale{transform:scale(.52);transform-origin:top left;width:210mm;}
.rs-sec{margin-bottom:14px;}
.rs-sec-t{font-size:12.5px;font-weight:700;color:#5b6b7c;margin-bottom:5px;padding-bottom:3px;
  border-bottom:1px solid #eef2f6;}
.rs-grp{font-size:11.5px;font-weight:700;color:#8795a3;margin:7px 0 3px;}
.rs-cols{display:flex;flex-wrap:wrap;gap:2px 12px;}
.rs-ck{font-size:12.5px;display:inline-flex;align-items:center;gap:4px;cursor:pointer;}
.rs-blanks{display:flex;flex-wrap:wrap;gap:6px;}
.rs-blank{display:inline-flex;align-items:center;gap:2px;background:#f7f9fc;border:1px solid var(--line);
  border-radius:6px;padding:2px 4px;}
.rs-blank input{width:64px;border:none;background:transparent;font-size:12.5px;padding:1px 2px;}
.rs-blank-x{border:none;background:none;color:#b3312c;cursor:pointer;font-size:12px;padding:0 2px;}

/* —— A4 纸面 —— */
#rosterPrint{display:none;}
.rs-sheet{width:210mm;min-height:297mm;box-sizing:border-box;background:#fff;color:#1c2a39;
  padding:9mm 8mm;font-family:"Microsoft YaHei","PingFang SC",sans-serif;
  box-shadow:0 2px 10px rgba(0,0,0,.14);}
.rs-head{position:relative;display:flex;align-items:center;gap:12px;
  border:2.5px solid #B81820;border-radius:6px;padding:8px 12px;}
.rs-logo-img{flex:0 0 auto;height:38px;width:auto;display:block;}
/* 红/黄/蓝品牌条（取自 logo 配色），压在抬头框下面 */
.rs-rule{height:3px;margin:5px 0 0;border-radius:2px;
  background:linear-gradient(90deg,#B81820 0%,#B81820 60%,#F0B028 60%,#F0B028 78%,#0068B8 78%,#0068B8 100%);}
.rs-title{font-size:32px;font-weight:900;letter-spacing:4px;color:#B81820;line-height:1.2;}
/* ★ v0.60.1：营种名称/营期不再单独加小方框 —— 抬头已经是红框，套框重复。
   改成纯文字，在抬头框里垂直居中、右对齐。 */
.rs-meta{position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-size:12px;line-height:1.75;color:#8E1119;text-align:right;max-width:46%;}
.rs-tb{width:100%;border-collapse:collapse;table-layout:auto;margin-top:6px;}
.rs-tb th{background:#96131A;color:#fff;font-size:inherit;font-weight:600;padding:7px 5px;
  border:1px solid #B81820;white-space:nowrap;}
.rs-tb td{border:1px solid #E8C2C4;height:27px;padding:0 5px;font-size:inherit;text-align:center;
  white-space:nowrap;      /* 不换行、不省略号 → 列宽自动撑开，内容完整显示 */}
.rs-tb tbody tr:nth-child(even) td{background:#FCF3F4;}
.rs-foot{margin-top:5px;font-size:11px;color:#9A7B7D;}

/* 列很多（>12 列）时：允许换行，宁可多占两行也不裁掉内容 */
.rs-tb.rs-tb-w th,.rs-tb.rs-tb-w td{white-space:normal;word-break:break-all;line-height:1.25;
  height:auto;padding:3px 4px;}

@media print{
  body.print-roster > *:not(#rosterPrint){display:none !important;}
  body.print-roster #rosterPrint{display:block !important;}
  body.print-roster .rs-sheet{width:auto;min-height:0;padding:0;box-shadow:none;}
  .rs-tb tbody tr{break-inside:avoid;}
  .rs-tb thead{display:table-header-group;}
}

/* ═══════════════════════════════════════════════════════════════════════
   ★★ v0.62.0 手机端适配（第 1 期：地基）
   ───────────────────────────────────────────────────────────────────────
   断点约定（全站统一用这三个）：
     ≤767px        手机    ← 本节的规则都在这里（iPad 竖屏 768px 仍算平板，保留常驻侧栏）
     768 ~ 1100px  平板    （沿用原有 .g4 变 2 列那套）
     >1100px       桌面    （原样不动）

   第 1 期只解决「能不能用」：不再横向溢出、正文不再被侧栏挤成一条缝、点得准、不做全屏按钮。
   宽表/账单那种「好不好用」的改造放第 2、3 期。

   ⚠️ 手机端规则**集中写在本节**，方便一处维护；不要再散落到上面去改。
   ═══════════════════════════════════════════════════════════════════════ */

/* 汉堡按钮：桌面隐藏 */
.nav-toggle{display:none;}
#sideMask{display:none;}

@media (max-width:767px){

  /* ── ① 左侧菜单：固定侧栏 → 抽屉（正文从 162px 恢复到满屏）─────────
     position:fixed 会让它脱离 #app 的 flex 布局，所以 #main 自动占满整宽。
     不用改任何 HTML 结构，也不用把 30 个页面挨个改一遍。 */
  #sidebar{
    position:fixed; left:0; top:0; height:100vh; height:100dvh;
    width:min(280px,84vw); flex:0 0 auto;
    z-index:120;
    transform:translateX(-102%);
    transition:transform .24s cubic-bezier(.4,0,.2,1);
    box-shadow:8px 0 30px rgba(10,25,45,.30);
    will-change:transform;
  }
  #sidebar.open{transform:translateX(0);}
  #nav{padding-bottom:28px;}
  .nav-item{padding:11px 12px; font-size:14.5px;}       /* 手指点得准 */
  .nav-group-title{padding:14px 10px 6px;}

  #sideMask{display:block; z-index:119;}
  body.nav-open{overflow:hidden;}                        /* 抽屉开着时锁住页面滚动 */

  /* ── ② 顶栏瘦身 ─────────────────────────────────────────────── */
  #topbar{height:52px; flex:0 0 52px; padding:0 10px; gap:8px;}
  .tb-left{display:flex; align-items:center; gap:8px; min-width:0;}
  .nav-toggle{
    display:inline-flex; flex-direction:column; justify-content:center; gap:4px;
    width:40px; height:40px; flex:0 0 40px; padding:0 10px;
    background:#f4f7fb; border:1px solid var(--line); border-radius:10px;
  }
  .nav-toggle i{display:block; height:2px; border-radius:2px; background:var(--ink-2);}
  .nav-toggle:active{background:var(--brand-soft);}
  /* 面包屑只留「当前页名」，分组名和斜杠都收掉 */
  .crumb{font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .crumb #crumbGroup, .crumb .sep{display:none;}
  .crumb b{font-size:14.5px;}
  /* 右上角：只留头像和铃铛，「当前身份」标签文字收掉 */
  .top-right{gap:9px; flex:0 0 auto;}
  .role-switch{gap:0;}
  .role-switch > label{display:none;}
  .role-switch select{max-width:112px; font-size:12.5px; padding:6px 6px;
    text-overflow:ellipsis;}
  .bell{width:38px;height:38px;flex:0 0 38px;}
  .me-txt{display:none;}
  .avatar{width:32px;height:32px;flex:0 0 32px;font-size:13px;}
  #logoutBtn{padding:7px 10px;}

  /* ── ③ 正文留白收紧（手机屏幕寸土寸金）─────────────────────── */
  #view{padding:14px 12px 84px;}
  .page-title{font-size:17.5px;}
  .page-sub{font-size:12.5px; margin-bottom:12px;}
  .card-head{padding:12px 13px; flex-wrap:wrap; gap:8px;}
  .card-pad{padding:13px 13px;}
  .grid{gap:11px;}

  /* ── ④ 触控尺寸：手指点得准（iOS 建议 ≥44px，这里取 40/34 折中）── */
  #view .btn, .modal .btn{min-height:40px; padding:9px 14px; white-space:nowrap;}
  #view .btn.sm, .modal .btn.sm{min-height:36px; padding:8px 12px;}
  #view .btn.xs, .modal .btn.xs{min-height:34px; padding:7px 11px;}
  #view select, #view .flt-i input, #view .flt-i select, .modal select, .modal input{min-height:40px;}
  #view input[type=checkbox], .modal input[type=checkbox]{width:18px; height:18px;}
  /* 表格里那种「删除 / 上传」小图标按钮：给足可点面积但不撑高行 */
  .row-del, .up-btn{min-width:34px; min-height:34px;}
  .pg button, .pg a{min-width:36px; min-height:36px;}

  /* ── ⑤ 输入框字号 ≥16px：根治 iOS 一聚焦就自动放大页面 ────────
     （iPhone 上 computed font-size < 16px 时，Safari 会强制缩放整个页面，
       这是手机上「手感发飘、点一下页面乱跳」最常见的原因）
     ⚠️ 必须带上 #view / #modal 这种 id 前缀，否则被 `.search input{font-size:13.5px}` 压过。
     表格里那种一格一格的内联编辑器故意**不含在内**（太窄，放大字号会撑破列宽）。 */
  #view .search input, #view .flt-i input, #view .flt-i select,
  #modal input:not([type=date]):not([type=time]):not([type=checkbox]):not([type=radio]),
  #modal select, #modal textarea{font-size:16px;}
  #view .btn, #view .tag, #modal .btn{font-size:13.5px;}   /* 按钮字号别跟着变 */

  /* ── ⑥ 弹窗：居中卡片 → 全屏面板（手机上 92vw 的浮窗又矮又挤）──── */
  .modal, .modal.wide{
    top:0; left:0; right:auto;
    width:100%; max-width:none;
    height:100vh; height:100dvh; max-height:none;
    border-radius:0; transform:none;
  }
  .modal.show{transform:none;}
  .modal-head{padding:12px 14px; position:sticky; top:0; background:#fff; z-index:3;}
  .modal-head b{font-size:15.5px;}
  .modal-body{padding:14px 14px 28px;}
  .md-grid{grid-template-columns:1fr; gap:11px;}
  /* 通知抽屉在手机上占满整宽 */
  .drawer{width:100%;}
  /* 底部固定按钮条要避开 iPhone 的底部横条 */
  .md-foot{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));}

  /* ── ⑦ 筛选区：手机上每行少放几个，别挤成一坨 ─────────────────── */
  .flt{padding:12px 12px 10px; gap:9px 10px;}
  .flt-i{flex:1 1 132px; min-width:110px;}
  .flt-grow{flex:1 1 100%; min-width:0;}
  .flt-btns{flex:1 1 100%;}
  /* 「起 ~ 止」这种日期区间独占一行：原来 .rng input 写死 142px，
     挤在半列里只剩 72px → Chrome 只能显示成「年,」看不出选的是哪天 */
  .flt-rng{flex:1 1 100%; min-width:0;}
  .flt-rng .rng{width:100%;}
  .flt-rng .rng input{flex:1 1 0; width:auto; min-width:0;}
  .qk-wrap{flex-wrap:wrap; gap:6px;}
  .qk-wrap .qk{min-height:34px;}

  /* ── ⑧ 表格：容器横向滚动照旧，只是字号和固定高度松一点 ───────── */
  .tb-wrap, .lt-wrap{-webkit-overflow-scrolling:touch;}
  table.tb{font-size:12.5px;}
  table.tb th, table.tb td{padding:8px 8px;}
  .tb-wrap.fix10{max-height:62vh;}
  .tb-wrap.fix10 table.tb thead th{position:sticky;}
  table.tb input.cell{min-width:52px;}

  /* ── ⑨ 指标卡：手机上两列 ──────────────────────────────────── */
  .kpi .k-val{font-size:23px;}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .g2{grid-template-columns:1fr;}

  /* ── ⑩ 底部固定操作条（账单保存/打印）：贴底 + 拇指够得到 ──────── */
  .bill-bar{left:0; right:0; padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));}
  .bb-left b{font-size:12.5px;}

  /* ── ⑪ 超宽表容器（★ v0.65.0 起出团表/长线营都已改卡片流，见 ⑬ ⑰）── */
  .lt-wrap{overflow-x:auto;}

  /* ── ⑫ 账号管理：左右两栏在手机上竖着排（原来是 190px 固定 + 右侧被挤爆）── */
  .acc-wrap{flex-direction:column; gap:10px;}
  .acc-left{width:100%; flex:0 0 auto;}
  .acc-lv{flex-wrap:wrap;}                 /* 权限档位按钮允许换行 */
  .acc-row{flex-wrap:wrap; gap:6px;}
  .acc-right{padding:11px 12px;}
  .acc-right-h{font-size:13.5px;}

  /* ── ⑬ ★★ 手机端「卡片流」通用类 .mcard（v0.63.0 出团表 / v0.64.0 随队记账）───────
     同一份 <tr>/<td> DOM，只换个长相：
       · 一个 <tr> = 一张卡；每个 <td> 用 td::before 把列名（data-label）显示出来
       · 只有 data-pri="1" 的字段常显，其余先藏起来 → 点卡片展开
     为什么这么做：collectTrips / 保存 / 排序 / 拼团 / 指派 / 名单 / 新增定制团
     **全部照旧生效**，一行业务逻辑都不用改（这是刻意选的方案，别改成另写一套卡片渲染）。 */
  .mcard{display:block; border:0; font-size:13px;}
  .mcard thead{display:none;}
  .mcard tbody{display:block;}
  .mcard tbody tr{
    display:flex; flex-direction:column; position:relative;
    background:#fff; border:1px solid var(--line); border-radius:12px;
    box-shadow:0 1px 2px rgba(20,40,70,.05);
    margin-bottom:10px; padding:11px 12px 7px;
  }
  .mcard tbody tr:last-child{margin-bottom:0;}
  .mcard tbody tr.blank-tip{display:block; padding:0; border:0; box-shadow:none;}
  .mcard tbody tr.blank-tip td{display:block;}

  .mcard tbody td{
    display:flex; align-items:center; gap:8px;
    border:none; padding:2.5px 0; min-width:0; height:auto;
  }
  .mcard tbody td::before{
    content:attr(data-label); flex:0 0 74px;
    font-size:11.5px; color:var(--muted); line-height:1.4;
  }
  .mcard tbody td > *{flex:1 1 auto; min-width:0;}

  /* 卡片正面的顺序：营种名称当标题 */
  .mcard tbody td[data-col="pname"]{order:1; padding-right:62px;}
  .mcard tbody td[data-col="period_text"]{order:2;}
  .mcard tbody td[data-col="store_name"]{order:3;}
  .mcard tbody td[data-col="signup"]{order:4;}
  .mcard tbody td[data-col="progress"]{order:5;}
  .mcard tbody td[data-col="marketer"]{order:6;}
  .mcard tbody td[data-col="_roster"]{order:7; margin-top:5px;}

  /* 营种名称 = 卡片标题（不显示列名前缀） */
  .mcard tbody td[data-col="pname"]::before,
  .mcard tbody td[data-col="seq"]::before,
  .mcard tbody td[data-col="_roster"]::before{content:none;}
  .mcard tbody td[data-col="pname"]{font-size:15px; font-weight:600; line-height:1.35;}
  .mcard tbody td[data-col="pname"] span{white-space:normal;}

  /* 序号 + 🗑 放在右上角当小徽标，不占一整行 */
  .mcard tbody td[data-col="seq"]{
    order:0; position:absolute; top:8px; right:9px; padding:0; gap:3px;
  }
  .mcard tbody td[data-col="seq"] .rowno{font-size:11.5px; color:var(--muted);}
  .mcard .row-del{min-width:30px; min-height:30px; font-size:12px;}

  /* 非正面字段：默认收起；点卡片展开。order:50 = 展开后排在正面字段**下面**
     （不加这个，展开后它们会按 DOM 顺序跑到标题前面去）
     ⚠️ 必须排除 [data-title] —— 标题格只带 data-title 不带 data-pri，别把它一起藏了 */
  .mcard tbody td:not([data-pri]):not([data-title]){display:none; order:50;}
  .mcard tbody tr.card-open td:not([data-pri]){display:flex;}
  .mcard tbody tr.card-open{background:#fcfdfe;}

  /* 卡片底部的「展开 / 收起」提示（可点区域是整个卡片） */
  .mcard tbody tr::after{
    content:'▾ 点一下展开全部'; order:99;
    text-align:center; font-size:11.5px; color:var(--brand);
    border-top:1px dashed var(--line); margin-top:7px; padding-top:5px;
  }
  .mcard tbody tr.card-open::after{content:'▴ 收起';}
  .mcard tbody tr.blank-tip::after{content:none;}

  /* 卡片里的输入控件现在是整行宽 → 放心用 16px（顺带根治 iOS 聚焦放大） */
  .mcard tbody td input.cell,
  .mcard tbody td select.cell{font-size:16px; min-height:36px; width:100%;}
  .mcard tbody td .tp-dates{flex:1 1 auto; min-width:0; gap:6px;}
  .mcard tbody td .tp-dates input[type=date]{flex:1 1 0; min-width:0; height:36px; font-size:15px;}

  /* 报名人数：数字一行，拼团备注换到下一行 */
  .mcard tbody td.signup-td{flex-wrap:wrap;}
  .mcard tbody td.signup-td .join-wrap{flex:1 1 100%;}

  /* 名单按钮铺满一行，拇指好点 */
  .mcard tbody td.op-td .btn{width:100%;}

  /* 卡片标题格（身上带 data-title="1"）：不显示列名前缀、字号加大 */
  .mcard tbody td[data-title="1"]{order:1;}
  .mcard tbody td[data-title="1"]::before{content:none;}
  .mcard tbody td[data-title="1"]{font-size:15px; font-weight:600; line-height:1.35;}
  .mcard tbody td[data-title="1"] span{white-space:normal;}

  /* 随队记账（★ v0.64.0）卡片正面的顺序 */
  .mcard tbody td[data-col="lx_period"]{order:1; padding-right:0;}
  .mcard tbody td[data-col="lx_name"]{order:2;}
  .mcard tbody td[data-col="lx_amount"]{order:3;}
  .mcard tbody td[data-col="lx_status"]{order:4;}
  .mcard tbody td[data-col="lx_ops"]{order:5; margin-top:5px; gap:8px; flex-wrap:wrap;}
  .mcard tbody td[data-col="lx_ops"]::before{content:none;}
  .mcard tbody td[data-col="lx_ops"] .btn{flex:1 1 40%; min-width:0;}
  /* 记账单里的小字（期次 / 备注）跟主文字错开显示 */
  .mcard tbody td .sub{display:block; font-size:11.5px; color:var(--muted);}

  /* ── ⑭ ★ v0.64.0 出团名单弹窗：左右两栏 → 上下 ──────────────────
     原来左栏写死 330px，手机上预览区只剩几十像素，等于看不见。 */
  .rs-wrap{flex-direction:column; gap:10px;}
  .rs-side{flex:1 1 auto; width:100%; max-height:none; padding-right:0;}
  .rs-preview{width:100%; height:auto; max-height:58vh;}
  /* 预览缩放：用 zoom 而**不是** transform ——
     transform 不会改变布局尺寸，左边会留出一大块横向空白还得滑动；zoom 会真的缩放。 */
  .rs-preview .rs-scale{transform:none; zoom:.40;}

  /* ── ⑮ 报名概况 / 订单详情弹窗：两列 → 一列 ───────────────────── */
  .ob-grid{grid-template-columns:1fr;}
  .ob-grid span{flex:0 0 74px;}

  /* ── ⑯ ★ v0.64.0 报名概况（手机）：13 列宽表 → 卡片流 ───────────── */
  #eoBody .tb-wrap{max-height:none !important;}   /* 原来 46vh 是给桌面表定的，卡片太挤 */
  .eo-pname{font-size:12.5px;}
  .eo-flt{gap:8px 12px; font-size:12.5px;}
  /* ⚠️ 标签文字是纯文本节点，光给 width:100% 会被下拉挤成「营 / 期」竖排 —— 必须 nowrap */
  .eo-flt label{width:100%; white-space:nowrap;}
  .eo-flt select{flex:1 1 auto; max-width:none; min-width:0; width:auto;}
  .eo-stat{gap:12px; padding:8px 10px; font-size:12.5px;}
  .eo-tabs{overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .eo-tab{padding:8px 11px; white-space:nowrap;}
  /* 卡片正面顺序 */
  .mcard tbody td[data-col="eo_member"]{order:1; padding-right:0;}
  .mcard tbody td[data-col="eo_camper"]{order:2;}
  .mcard tbody td[data-col="eo_num"]{order:3;}
  .mcard tbody td[data-col="eo_status"]{order:4;}
  .mcard tbody td[data-col="eo_ops"]{order:5; margin-top:5px;}
  .mcard tbody td[data-col="eo_ops"]::before{content:none;}
  .mcard tbody td[data-col="eo_ops"] .btn{width:100%;}
  /* 营员名称那一格：一笔单多个营员 → 一人一行 */
  .mcard tbody td.eo-cams{flex-wrap:wrap;}
  .mcard tbody td.eo-cams::before{align-self:flex-start;}
  .mcard tbody td.eo-cams .eo-cam{flex:1 1 100%;}

  /* ── ⑰ ★★ v0.65.0 长线营统计表（25 列）→ 卡片流 ──────────────────
     跟出团表/随队记账同一套通用类 .mcard（同一份 DOM，只换长相）。
     这一节只补「桌面那套横向滚动规则需要抵消」的地方：
       · .lt-table 是 width:max-content + 全 nowrap + sticky left/right 冻结列
       · 卡片里这些全部要作废，否则格子在卡内乱飘、文字被截成省略号。 */
  /* ① 容器：桌面是「表头/表尾固定 + 中间滚动」，手机上交还给页面整体滚 */
  #ltBody{max-height:none; min-height:0; overflow:visible;}
  /* ② 作废桌面冻结列（sticky left/right + 阴影 + 灰底） */
  .mcard tbody td.lt-name,
  .mcard tbody td.lt-short,
  .mcard tbody td.lt-total{position:static; box-shadow:none; background:transparent;}
  .mcard tbody td.lt-name{max-width:none; overflow:visible; text-overflow:clip; padding-right:0;}
  .mcard tbody td.lt-short{padding:0;}
  .mcard tbody td.lt-short .lt-sin{width:100%;}
  .mcard tbody td .lt-bend{width:100%;}
  /* ③ 卡片里允许换行（桌面为了横向对齐一律 nowrap，长营种名会被截断） */
  .mcard tbody td{white-space:normal;}
  .mcard tbody .lt-when .lt-when-in{white-space:normal;}
  /* ④ 线下散拼 / 机构包团：桌面限宽 130px 会被裁 */
  .mcard tbody .lt-pairs{max-width:none; overflow:visible; font-size:13px;}
  /* ⑤ 卡片正面顺序：营种名称（标题）/ 营期时间 / 状态 / 合计；
        门店明细、线下散拼、机构包团、B端 都点开再看 */
  .mcard tbody td[data-col="lt_when"]{order:2;}
  .mcard tbody td[data-col="lt_status"]{order:3;}
  .mcard tbody td[data-col="lt_total"]{order:4; font-size:15px;}
  .mcard tbody td[data-col="lt_grp"] .lt-grp{width:100%; min-height:36px;}
  .mcard tbody td[data-col="lt_status"] .lt-sel{width:100%;}

  /* ⑥ 营类合计：桌面钉在表格底部（tfoot），手机端改成表格上方的汇总卡 ——
        卡片流下 tfoot 的列数跟 tbody 对不齐会散架。 */
  .lt-sums{display:flex; flex-direction:column; gap:8px; margin-bottom:10px;}
  .lt-sum{background:#fff; border:1px solid var(--line); border-left:3px solid var(--brand);
    border-radius:10px; padding:9px 11px;}
  .lt-sum-h{display:flex; align-items:baseline; gap:8px; font-size:13.5px;}
  .lt-sum-h span{margin-left:auto; font-size:11.5px; color:var(--muted); font-weight:400;}
  .lt-sum-k{display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:5px;
    font-size:12.5px; color:var(--muted);}
  .lt-sum-k b{color:var(--ink);}
  .lt-sum-k .k-total b{color:var(--brand); font-size:15px;}
  .lt-sum-st{margin-top:5px; font-size:11.5px; color:var(--muted); line-height:1.7;}
  .lt-sum-st b{color:var(--ink);}

  /* ── ⑱ ★ v0.65.0 营期账单（手机）：只给看 ────────────────────────
     JS 侧已经按 BILL_RO 不渲染任何填报/审核入口（加行/删行/上传/保存/审核/返佣/状态）；
     这里只把「只读的输入框」在视觉上也做平（disabled 的灰底在手机上很扎眼）。 */
  .sec-grid input.cell:disabled,
  .sec-grid input.cell[readonly],
  .sec-grid select:disabled,
  .sec-grid .up-btn:disabled{
    background:transparent; border-color:transparent; color:var(--ink);
    -webkit-text-fill-color:var(--ink); opacity:1;
  }
  .sec-card .sec-foot{padding:8px 12px;}
  /* 勾选框列：手机上没有「批量删除」按钮，勾了也没用 → 整列收掉（th/td 一起，表格会自动补位） */
  table.tb th.ck-col, table.tb td.ck-col{display:none;}
}