/* ============================================================
   会员管理（设置页的一个分组 · 2026-10-08）
   ============================================================
   只放本分组独有的类，前缀 mb__。
   表格骨架 .tbl / 表单 .sa__f / 提示 .sa__notice 复用已有样式，不重复定义。 */

/* ---------- 汇总条 ---------- */
.mb__stats {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) 0 var(--sp-4);
}
.mb__stat { font-size: var(--fs-xs); color: var(--ink-500); display: inline-flex; align-items: baseline; gap: 4px; }
.mb__stat b { font-size: var(--fs-lg); color: var(--ink-900); font-family: var(--font-mono); }
.mb__stat--warn b { color: var(--warn-700, #8a5a00); }
.mb__stat--bad b { color: var(--danger-600, #a32d2d); }
.mb__stat--demo b { color: var(--ink-500); }

/* ---------- 工具条 ---------- */
.mb__bar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.mb__grow { flex: 1; min-width: 0; }
.mb__filters { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.mb__filter {
  font-size: var(--fs-xs); color: var(--ink-500);
  background: none; border: 1px solid var(--line-200);
  border-radius: var(--r-1); padding: 3px var(--sp-3); cursor: pointer;
}
.mb__filter:hover { color: var(--ink-800); border-color: var(--ink-300); }
.mb__filter.is-on { background: var(--ink-900); border-color: var(--ink-900); color: var(--white); }
.mb__search {
  width: 180px; font-size: var(--fs-xs);
  padding: 4px var(--sp-3); border: 1px solid var(--line-200);
  border-radius: var(--r-1); background: var(--white); color: var(--ink-800);
}

/* ---------- 表格 ---------- */
/* 行高要够：这一格里有三行文字（姓名 / 邮箱 / 设备链接），行太矮会挤成一坨 */
/* 🔴 「客户」列以前**没有宽度**：table-layout:fixed 下它一个人吃掉全部剩余宽度，
   窗口越宽这一列越宽 —— 老板看到的「客户列太宽，名称根本用不到这么宽」就是这么来的
   （1920 下能撑到 600px+，一整行后半截全是空白）。
   修法：每一列都定宽 + 整张表封顶，多出来的空间不再灌进客户列。
   ⚠️ 别把 max-width 去掉：去掉就退回原样（宽度全给客户列）。 */
.mb__tbl { width: 100%; max-width: 1360px; table-layout: fixed; }
.mb__tbl td { vertical-align: middle; padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
.mb__ops-cell { white-space: nowrap; }
.mb__row--off { opacity: 0.55; }

.mb__who { display: flex; align-items: center; gap: var(--sp-3); }
.mb__av {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-100); color: var(--brand-700);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
}
.mb__who-t { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.mb__who-t b { font-size: var(--fs-sm); color: var(--ink-900); font-weight: var(--fw-medium); }
.mb__who-t i { font-size: var(--fs-2xs); color: var(--ink-400); font-style: normal; overflow: hidden; text-overflow: ellipsis; }
/* 「演示」标记：内置演示账号与真实客户一眼分开（正式上线前应删掉这些账号） */
.mb__demo {
  margin-left: 5px; padding: 0 4px;
  font-size: var(--fs-2xs); font-weight: 400; line-height: 1.6;
  color: var(--ink-500); background: var(--ink-100);
  border: 1px solid var(--line-200); border-radius: var(--r-sm);
  vertical-align: 1px;
}

.mb__dim { color: var(--ink-400); font-size: var(--fs-xs); }

/* 档位分段按钮：点一下就改档 */
.mb__seg { display: inline-flex; border: 1px solid var(--line-200); border-radius: var(--r-1); overflow: hidden; }
.mb__seg-i {
  font-size: var(--fs-2xs); color: var(--ink-500); white-space: nowrap;
  background: var(--white); border: none; border-right: 1px solid var(--line-200);
  padding: 3px var(--sp-2); cursor: pointer;
}
.mb__seg-i:last-child { border-right: none; }
.mb__seg-i:hover { background: var(--ink-50); color: var(--ink-800); }
.mb__seg-i.is-on { background: var(--brand-600, #0e5748); color: var(--white); }

/* 到期 */
.mb__exp { display: inline-flex; flex-direction: column; line-height: 1.3; font-size: var(--fs-xs); color: var(--ink-700); font-family: var(--font-mono); }
.mb__exp em { font-size: var(--fs-2xs); font-style: normal; color: var(--ink-400); font-family: var(--font-sans); }
.mb__exp--warn { color: var(--warn-700, #8a5a00); }
.mb__exp--bad { color: var(--danger-600, #a32d2d); }

/* 设备 */
.mb__dev { display: inline-flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.mb__dev-n { font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--ink-700); }
.mb__dev-n.is-full { color: var(--danger-600, #a32d2d); font-weight: var(--fw-semibold); }
.mb__lnk {
  font-size: var(--fs-2xs); color: var(--brand-700); background: none; border: none;
  padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.mb__lnk.is-full { color: var(--danger-600, #a32d2d); }
.mb__devbox {
  display: flex; flex-direction: column; gap: var(--sp-2); margin-top: 4px;
  padding: var(--sp-2) var(--sp-3); background: var(--ink-50);
  border: 1px solid var(--line-200); border-radius: var(--r-2);
  min-width: 300px;
}
.mb__devrow { display: flex; align-items: center; gap: var(--sp-2); }
.mb__devfp { font-size: var(--fs-2xs); color: var(--ink-700); }
.mb__devt { font-size: var(--fs-2xs); color: var(--ink-400); font-family: var(--font-mono); }
.mb__devtip { font-size: var(--fs-2xs); color: var(--ink-400); line-height: 1.5; border-top: 1px dashed var(--line-200); padding-top: var(--sp-1); }

/* 状态与操作 */
.mb__st { font-size: var(--fs-2xs); padding: 1px var(--sp-2); border-radius: var(--r-1); }
.mb__st--ok { background: var(--brand-100); color: var(--brand-700); }
.mb__st--warn { background: var(--warn-100, #faeeda); color: var(--warn-700, #8a5a00); }
.mb__st--neutral { background: var(--ink-100); color: var(--ink-500); }
.mb__ops { display: inline-flex; flex-wrap: wrap; gap: 3px; align-items: center; white-space: nowrap; }
.mb__op {
  display: inline-flex; align-items: center; gap: 2px;
  white-space: nowrap;
  font-size: var(--fs-2xs); color: var(--ink-600);
  background: none; border: 1px solid var(--line-200);
  border-radius: var(--r-1); padding: 2px var(--sp-2); cursor: pointer;
}
.mb__op:hover { color: var(--ink-900); border-color: var(--ink-300); }
.mb__op--danger { color: var(--danger-600, #a32d2d); border-color: var(--danger-300, #f7c1c1); }
.mb__op--danger:hover { background: var(--danger-100, #fcebeb); }
.mb__flag { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-2xs); color: var(--danger-600, #a32d2d); }

/* ---------- 新增客户表单 ---------- */
.mb__form { max-width: 560px; }
.mb__form-ft { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--line-200); }

/* ---------- 发券（2026-10-09 客服发券入口） ----------
   「发券」按钮与它展开的那一整行。为什么整行：表格是 table-layout:fixed、列宽写死，
   操作列只有 236px，塞输入框会溢出并把列宽撑坏。 */
.mb__op--ok { color: var(--brand-700); border-color: var(--brand-100); }
.mb__op--ok:hover { background: var(--brand-50); border-color: var(--brand-400); }
.mb__grantrow > td {
  background: var(--brand-50);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px dashed var(--line-200);
}
.mb__grant { display: flex; flex-direction: column; gap: var(--sp-3); }
.mb__grant__hd {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-800);
}
.mb__grant__hd em {
  font-style: normal; font-size: var(--fs-2xs);
  font-weight: var(--fw-regular); color: var(--ink-500);
}
.mb__grant__row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--sp-3); }
.mb__gin-wrap { display: inline-flex; flex-direction: column; gap: 3px; }
.mb__gin-wrap > span { font-size: var(--fs-2xs); color: var(--ink-500); }
.mb__gin-wrap--w { min-width: 260px; }
.mb__gin {
  font-size: var(--fs-xs); color: var(--ink-800); background: var(--white);
  border: 1px solid var(--line-200); border-radius: var(--r-1);
  padding: 5px var(--sp-2); width: 96px;
}
.mb__gin--w { width: 100%; }
.mb__gin:focus { outline: 2px solid var(--brand-100); outline-offset: 1px; border-color: var(--brand-400); }
.mb__grant__tip {
  display: flex; align-items: flex-start; gap: 4px;
  font-size: var(--fs-2xs); color: var(--ink-500); line-height: 1.6;
}