:root{
  --bg:#f5f7fa; --panel:#fff; --ink:#1f2933; --muted:#6b7785;
  --line:#e3e8ef; --brand:#2f6fed; --brand-soft:#eaf1ff;
  --danger:#e5484d; --shadow:0 2px 10px rgba(31,41,51,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;}
button{font-family:inherit}

/* 登录 */
#login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:34px 30px;width:360px;max-width:100%;box-shadow:var(--shadow);text-align:center}
.login-card h1{font-size:19px;margin:0 0 4px;letter-spacing:.5px}
.login-sub{color:var(--brand);font-size:14px;font-weight:600;margin:0 0 22px;letter-spacing:1px}
.login-card p{color:var(--muted);font-size:13px;margin:0 0 22px}
.login-card input{width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:10px;
  font-size:15px;outline:none;margin-bottom:14px}
.login-card input:focus{border-color:var(--brand)}
.login-card .btn{letter-spacing:6px}
.btn{border:none;background:var(--brand);color:#fff;padding:12px 18px;border-radius:10px;
  cursor:pointer;font-size:15px;font-weight:600;width:100%;transition:.15s}
.btn:hover{filter:brightness(1.05)}
.btn.ghost{background:#fff;color:var(--brand);border:1px solid var(--brand)}
.btn.danger{background:#fff;color:var(--danger);border:1px solid #f3b6b8}
.err{color:var(--danger);font-size:13px;min-height:18px;margin-top:6px}

/* 顶栏 */
header{background:var(--panel);border-bottom:1px solid var(--line);padding:13px 22px;
  display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:20}
.brand{font-size:17px;font-weight:700;display:flex;align-items:center;gap:8px}
.role-badge{font-size:12px;font-weight:600;padding:3px 10px;border-radius:20px;margin-left:8px}
.role-admin{background:#fff1e6;color:#c2410c}
.role-viewer{background:var(--brand-soft);color:var(--brand)}
.wrap{max-width:1080px;margin:0 auto;padding:22px}

/* 上传卡片（仅管理员） */
.upload{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:18px;box-shadow:var(--shadow)}
.upload h3{margin:0 0 4px;font-size:15px}
.upload .hint{color:var(--muted);font-size:13px;margin:0 0 14px}
#drop{border:2px dashed #c4d0e0;border-radius:12px;padding:34px 16px;text-align:center;color:var(--muted);cursor:pointer;transition:.15s}
#drop.hover{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
#drop .big{font-size:16px;color:var(--ink);font-weight:600;margin-bottom:4px}
.upload .actions{display:flex;gap:10px;margin-top:14px;align-items:center}
.upload .actions .btn{width:auto}
#uploadMsg{font-size:13px;color:var(--muted)}

/* 统计 */
.stats{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0 16px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 16px;box-shadow:var(--shadow);min-width:140px}
.stat .k{font-size:12px;color:var(--muted)}
.stat .v{font-size:20px;font-weight:700;margin-top:2px}

/* 搜索 */
.search{position:relative;margin-bottom:16px}
.search input{width:100%;padding:13px 16px 13px 42px;border:1px solid var(--line);border-radius:10px;font-size:15px;background:#fff;outline:none}
.search input:focus{border-color:var(--brand)}
.search svg{position:absolute;left:14px;top:13px;opacity:.5}

/* 结果 */
.cust{border:1px solid var(--line);background:var(--panel);border-radius:12px;margin-bottom:12px;overflow:hidden;box-shadow:var(--shadow)}
.cust .head{display:flex;align-items:center;padding:13px 16px;cursor:pointer;user-select:none;gap:10px}
.cust .head:hover{background:#fafbfd}
.cust .name{font-weight:700;font-size:15px;flex:1;min-width:0;word-break:break-all}
.cust .htags{display:flex;align-items:center;gap:6px;flex-shrink:0}
.cust .tag{background:var(--brand-soft);color:var(--brand);font-size:12px;font-weight:600;padding:2px 9px;border-radius:20px;white-space:nowrap}
.cust .chev{color:var(--muted);transition:.2s;order:3}
.cust.collapsed .chev{transform:rotate(-90deg)}
.cust .body{display:block}
.cust.collapsed .body{display:none}
table{width:100%;border-collapse:collapse}
td{padding:11px 16px;border-top:1px solid var(--line);font-size:14px;vertical-align:middle}
td.inv{font-family:ui-monospace,Menlo,Consolas,monospace;color:#33415c;letter-spacing:.3px}
td.meta{color:var(--muted);white-space:nowrap}
td.amt{font-weight:600;white-space:nowrap;text-align:right;color:#1f2933}
td.amt.none{color:var(--muted);font-weight:400}
td.seller{color:var(--muted)}
td.act{text-align:right;white-space:nowrap;width:1%}
.mini{border:1px solid var(--line);background:#fff;color:var(--ink);padding:6px 12px;border-radius:7px;cursor:pointer;font-size:13px;margin-left:8px}
.mini.view{color:var(--brand);border-color:#bcd0ff}
.mini:hover{filter:brightness(.97)}
.empty{text-align:center;color:var(--muted);padding:40px;background:#fff;border:1px solid var(--line);border-radius:12px}
mark{background:#fff3bf;color:inherit;padding:0 1px;border-radius:3px}

/* 查看器 */
#viewer{position:fixed;inset:0;background:rgba(15,23,42,.82);display:none;z-index:50;flex-direction:column;align-items:center}
#viewer.show{display:flex}
.vbar{width:100%;max-width:980px;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;color:#fff;gap:12px}
.vbar .vt{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vbar .vr{display:flex;align-items:center;gap:8px}
.vbtn{border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.12);color:#fff;padding:7px 14px;border-radius:8px;cursor:pointer;font-size:13px}
.vbtn:hover{background:rgba(255,255,255,.22)}
.vbtn.dl{background:var(--brand);border-color:var(--brand)}
.vscroll{flex:1;overflow:auto;width:100%;display:flex;justify-content:center;padding:10px 10px 30px}
#vcanvas{background:#fff;box-shadow:0 6px 30px rgba(0,0,0,.4);max-width:96%}
.pagenav{display:flex;align-items:center;gap:10px;color:#fff;font-size:13px}
.pagenav button{border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.12);color:#fff;width:30px;height:30px;border-radius:7px;cursor:pointer;font-size:16px;line-height:1}
.err{color:#ffd2d2;font-size:13px}
.hidden{display:none !important}

/* ---- 微信转发 & toast ---- */
button.mini.wx{color:#07c160;border-color:#a8e2c0}
button.mini.wx:hover{background:#07c160;border-color:#07c160;color:#fff}
.vbtn.wx{color:#07c160;border-color:#a8e2c0}
.vbtn.wx:hover{background:#07c160;border-color:#07c160;color:#fff}
#toast{position:fixed;left:50%;bottom:36px;transform:translateX(-50%) translateY(16px);background:#1f2733;color:#fff;padding:10px 22px;border-radius:8px;font-size:14px;opacity:0;pointer-events:none;transition:all .25s ease;z-index:999;box-shadow:0 6px 24px rgba(0,0,0,.22);max-width:80vw}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.cust .tag.total{background:#e8f7ee;color:#0a7d43}
/* 搜索框清空键 */
.search #qClear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:26px;height:26px;
  border:none;background:#eef1f5;color:var(--muted);border-radius:50%;cursor:pointer;font-size:13px;line-height:1;
  display:none;align-items:center;justify-content:center}
.search #qClear.show{display:flex}
.search #qClear:hover{background:#e2e7ee;color:var(--ink)}
/* 卡片头批量转发按钮 */
.cust .htags .mini.batch{padding:2px 10px;font-size:12px;margin:0}
/* 卡片头客户链接按钮（管理员） */
button.mini.cust{color:#0e7490;border-color:#a5d8dd}
button.mini.cust:hover{background:#0e7490;border-color:#0e7490;color:#fff}
button.mini.custreset{color:#8a6d1a;border-color:#e0cd96}
button.mini.custreset:hover{background:#8a6d1a;border-color:#8a6d1a;color:#fff}
.mrow td{background:#f8fafc;color:var(--muted);font-size:12.5px;font-weight:600;padding:7px 16px;border-top:1px solid var(--line);letter-spacing:.3px}
.mini.danger{color:#c0392b;border-color:#e8b5ad}
.mini.danger:hover{background:#c0392b;border-color:#c0392b;color:#fff}

/* ---- 右上角头像菜单 ---- */
.user-menu{position:relative;flex-shrink:0}
.user-btn{display:flex;align-items:center;gap:9px;border:none;background:transparent;cursor:pointer;
  padding:5px 8px;border-radius:10px;color:var(--ink);transition:.15s;max-width:320px}
.user-btn:hover{background:#f0f4fa}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;flex-shrink:0;
  box-shadow:0 1px 4px rgba(47,111,237,.35)}
.uname{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ucred{color:var(--muted);flex-shrink:0;transition:transform .18s}
.user-btn[aria-expanded="true"] .ucred{transform:rotate(180deg)}
.user-drop{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:0 8px 28px rgba(31,41,51,.14);padding:6px;min-width:148px;z-index:60}
.uitem{display:flex;align-items:center;gap:9px;width:100%;border:none;background:transparent;
  padding:10px 12px;border-radius:8px;cursor:pointer;font-size:14px;color:var(--ink);text-align:left;transition:.12s}
.uitem:hover{background:#f0f4fa;color:var(--brand)}
.uitem svg{color:var(--muted);flex-shrink:0}
.uitem:hover svg{color:var(--brand)}

/* 面板标题行 + 关闭按钮（修改密码等可收起面板） */
.box-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.box-head h3{margin:0}
.box-close{border:none;background:#eef1f5;color:var(--muted);width:28px;height:28px;border-radius:50%;
  cursor:pointer;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:.15s}
.box-close:hover{background:#e2e7ee;color:var(--ink)}

/* ---- 修改密码 ---- */
.pass-row{display:flex;align-items:center;gap:12px;margin:10px 0;max-width:560px}
.pass-row label{flex:0 0 92px;font-size:14px;color:var(--muted)}
.pass-row input{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:9px;
  font-size:14px;font-family:inherit;color:var(--ink);background:#fff}
.pass-row input:focus{outline:none;border-color:var(--brand)}
#passMsg{font-size:13px;color:var(--muted);line-height:1.6}
#passMsg.ok{color:#0a7d43}
#passMsg.err{color:var(--danger)}
#savePassBtn:disabled{opacity:.6;cursor:not-allowed}

/* ---- 手机端适配 ---- */
@media (max-width:640px){
  header{padding:10px 14px}
  .brand{font-size:15px}
  .role-badge{margin-left:4px}
  /* 头像菜单：手机端只显示头像，隐藏公司名 */
  .user-btn{padding:4px;gap:0}
  .uname{display:none}
  .ucred{display:none}
  .avatar{width:32px;height:32px;font-size:14px}
  .wrap{padding:12px 12px 24px}
  .stats{gap:8px;margin:2px 0 12px}
  .stat{flex:1;min-width:0;padding:9px 12px}
  .stat .v{font-size:18px}
  .search{margin-bottom:12px}
  .search svg{left:12px;top:11px;width:16px;height:16px}
  .search input{font-size:16px;padding:12px 14px 12px 38px}
  .cust{border-radius:10px}
  /* 卡片头：客户名独占一行，张数/合计标签换到第二行，避免长客户名挤压 */
  .cust .head{flex-wrap:wrap;row-gap:7px;padding:11px 12px 12px}
  .cust .name{flex:1 1 calc(100% - 30px);font-size:14.5px;line-height:1.45}
  .cust .chev{flex:0 0 auto}
  .cust .htags{order:3;flex-basis:100%}
  .cust .tag{font-size:12px;padding:3px 10px}
  .cust .htags .mini.batch{padding:4px 12px;font-size:12.5px}
  .cust .htags .mini.cust,.cust .htags .mini.custreset{padding:4px 12px;font-size:12.5px}
  .search input{padding-right:40px}
  .search #qClear{width:28px;height:28px}
  /* 发票行改为纵向堆叠，避免横向溢出 */
  table,tbody,tr,td{display:block}
  tr{padding:10px 12px 12px;border-top:1px solid var(--line)}
  tr:first-child{border-top:none}
  td{border-top:none;padding:3px 0}
  td.inv{font-size:13.5px;word-break:break-all}
  td.meta{font-size:13px}
  td.amt{text-align:left;font-size:15px}
  td.seller{font-size:12.5px}
  td.act{margin-top:9px;width:auto}
  .mini{margin:0 8px 8px 0;padding:8px 14px;font-size:13.5px}
  .pager{padding:12px 2px 2px}
  .pager .mini{padding:8px 14px}
  /* 查看器 */
  .vbar{flex-wrap:wrap;padding:10px 12px;gap:8px}
  .vbar .vt{flex:1;min-width:60%}
  .vbtn{padding:6px 10px;font-size:12px}
  .pagenav{font-size:12px}
  .pagenav button{width:26px;height:26px}
  #vcanvas{max-width:100%}
  /* 上传区 / 重复箱 */
  .upload{padding:14px}
  #drop{padding:26px 12px}
  .upload .actions{flex-wrap:wrap}
  .dup-btns{flex-wrap:wrap}
  .dup-title{font-size:15px}
  /* 修改密码：标签换行到输入框上方 */
  .pass-row{flex-direction:column;align-items:stretch;gap:6px;max-width:none}
  .pass-row label{flex:none;font-size:13px}
  .pass-row input{padding:12px}
  /* 客户花名册：表头隐藏，单元格纵向堆叠并带文字标签 */
  #rosterList thead{display:none}
  #rosterList td.c-no{display:none}
  #rosterList td.c-name{font-size:14.5px}
  #rosterList td.c-num{text-align:left;font-weight:400}
  #rosterList td.c-num::before{content:'发票张数：';color:var(--muted);font-size:12.5px}
  #rosterList td.c-num + td.c-num{font-weight:600}
  #rosterList td.c-num + td.c-num::before{content:'合计金额：';color:var(--muted);font-size:12.5px;font-weight:400}
  #rosterList td.c-meta::before{content:'最近上传：';color:var(--muted);font-size:12.5px}
  #rosterList td.c-act{margin-top:8px;width:auto}
  .roster-bar{flex-wrap:wrap}
  .roster-bar .btn{flex:1}
}

/* ---- 分页 ---- */
.pager{display:flex;justify-content:space-between;align-items:center;padding:14px 4px 4px;gap:12px;flex-wrap:wrap}
.pager .pinfo{font-size:13px;color:var(--muted)}
.pager .pctl{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pgn{min-width:30px;height:30px;padding:0 8px;border:1px solid var(--line);background:#fff;border-radius:7px;
  cursor:pointer;font-size:13px;color:var(--ink)}
.pgn:hover{color:var(--brand);border-color:#bcd0ff;background:var(--brand-soft)}
.pgn.cur{background:var(--brand);border-color:var(--brand);color:#fff;cursor:default}
.pgn.cur:hover{background:var(--brand);color:#fff}
.pgn:disabled{opacity:.4;cursor:default;background:#fff}
.pgn.dots{border:none;background:transparent;min-width:24px;letter-spacing:1px;color:var(--muted)}
.pgn.dots:hover{background:transparent;color:var(--brand)}
.psize{height:30px;border:1px solid var(--line);border-radius:7px;background:#fff;font-size:13px;
  color:var(--ink);padding:0 4px;margin-left:6px;outline:none;cursor:pointer}
.pjump{font-size:13px;color:var(--muted);margin-left:4px;display:flex;align-items:center;gap:6px;white-space:nowrap}
.pjumpin{width:54px;height:30px;border:1px solid var(--line);border-radius:7px;text-align:center;
  font-size:13px;outline:none;font-family:inherit}
.pjumpin:focus{border-color:var(--brand)}

/* ---- 重复箱 ---- */
#dupBox{margin-top:16px;border:1px solid #f0d9a0;background:#fffaf0}
.dup-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.dup-title{font-size:16px;font-weight:700;color:#8a6d1a;cursor:pointer;display:flex;align-items:center;gap:8px;user-select:none}
.dup-arrow{font-size:13px;color:#b08d2e}
.dup-btns{display:flex;gap:8px}
#dupList{margin-top:12px}
#dupList table{width:100%;border-collapse:collapse;font-size:13.5px}
#dupList td{padding:8px 10px;border-bottom:1px solid #f2e7c8;vertical-align:middle}
#dupList tr:last-child td{border-bottom:none}
#dupList td.inv{font-family:ui-monospace,Menlo,Consolas,monospace;color:#33415c;letter-spacing:.3px}
#dupList td.meta{color:var(--muted)}
#dupList td.amt{font-weight:600;color:#1f2733;white-space:nowrap}
#dupList .mini.danger{color:#c0392b;border-color:#e8b5ad}
#dupList .mini.danger:hover{background:#c0392b;border-color:#c0392b;color:#fff}
.dup-scroll{max-height:420px;overflow:auto}

/* ---- 客户花名册 ---- */
.stat.clickable{cursor:pointer;transition:.15s}
.stat.clickable:hover{border-color:var(--brand);box-shadow:0 2px 12px rgba(47,111,237,.16)}
.stat.clickable .k{color:var(--brand)}
.stat.clickable .k::after{content:' ›'}
.rtag{display:inline-block;background:var(--brand-soft);color:var(--brand);font-size:12px;font-weight:600;
  padding:2px 10px;border-radius:20px;margin-left:6px;vertical-align:2px}
.roster-bar{display:flex;gap:10px;margin:12px 0 14px;align-items:center}
.roster-bar input{flex:1;min-width:0;padding:10px 14px;border:1px solid var(--line);border-radius:9px;
  font-size:14px;outline:none;background:#fff}
.roster-bar input:focus{border-color:var(--brand)}
.roster-scroll{max-height:62vh;overflow:auto;border:1px solid var(--line);border-radius:10px}
#rosterList table{font-size:13.5px}
#rosterList th{text-align:left;padding:10px 12px;background:#f8fafc;border-bottom:1px solid var(--line);
  font-size:12.5px;color:var(--muted);white-space:nowrap;position:sticky;top:0;z-index:1}
#rosterList td{padding:10px 12px;border-bottom:1px solid #eef1f5;vertical-align:middle}
#rosterList tr:last-child td{border-bottom:none}
#rosterList tbody tr:hover td{background:#fafbfd}
#rosterList td.c-no{color:var(--muted);width:56px;font-family:ui-monospace,Menlo,Consolas,monospace}
#rosterList td.c-name{font-weight:600;word-break:break-all}
#rosterList td.c-num{text-align:right;white-space:nowrap;font-weight:600}
#rosterList td.c-meta{color:var(--muted);white-space:nowrap}
#rosterList td.c-act{text-align:right;white-space:nowrap;width:1%}
#rosterPager .pager{padding-top:12px}
#rosterExport:disabled,#rosterAdd:disabled{opacity:.6;cursor:not-allowed}
.roster-bar #rosterNew{flex:0 1 220px;min-width:150px}
.roster-bar #rosterAdd{flex:0 0 auto}
.mini-tag{display:inline-block;background:#fff7e6;color:#8a6d1a;border:1px solid #e0cd96;
  font-size:11.5px;font-weight:600;padding:1px 7px;border-radius:20px;margin-left:6px;vertical-align:1px}
@media(max-width:640px){
  .roster-bar #rosterNew{flex:1 1 100%}
  .roster-bar #rosterAdd{flex:1 1 auto}
}

/* 坚果云状态横幅：限流/额度等待时全局提示，避免用户误以为卡死 */
.dav-banner{display:flex;align-items:center;gap:10px;padding:12px 16px;margin:0 0 14px;
  background:#fff7e6;border:1px solid #f0d49a;border-left:4px solid #e8a33d;border-radius:10px;
  color:#7a5206;font-size:13.5px;line-height:1.55}
.dav-banner .db-icon{font-size:15px;flex:0 0 auto}
.dav-banner .db-text{flex:1 1 auto}
.dav-banner .db-close{flex:0 0 auto;background:none;border:none;color:#a98544;font-size:19px;
  line-height:1;cursor:pointer;padding:0 2px}
.dav-banner .db-close:hover{color:#7a5206}

/* 回收站批量选择/批量操作 */
.trash-bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:10px 0 6px}
.trash-bar .tsel-all{display:flex;align-items:center;gap:6px;font-size:13px;color:#606266;cursor:pointer;user-select:none}
.trash-bar .tinfo{font-size:13px;color:#909399}
.trash-bar .mini{width:auto;padding:6px 12px}
td.tsel{width:32px;text-align:center}
td.tsel input{cursor:pointer;vertical-align:middle}

/* 搜索结果被截断时的提示条 */
.trunc-hint{margin:0 0 10px;padding:10px 12px;border-radius:8px;font-size:13px;line-height:1.6;background:#fff8e6;border:1px solid #f5d9a0;color:#7a5b1a}
.trunc-hint b{font-weight:600}
.trunc-hint .mini{margin-left:4px}