/* ============================================================
   设置 · 人员管理
   表格放在设置弹窗里；同时给一个「被挡下」的明确状态，不让人对着空面板猜发生了什么。
   ============================================================ */

.set-pane[hidden] { display: none; }

.sa { display: flex; flex-direction: column; gap: var(--sp-5); }

/* ---------- 顶栏 ---------- */
.sa__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  margin: var(--sp-4) 0 var(--sp-4);
}
.sa__bar__l { display: flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-xs); color: var(--ink-600); }
.sa__bar__l b { color: var(--ink-900); font-weight: var(--fw-semibold); }
.sa__bar__l b + b { margin-left: 2px; }
.sa__back {
  display: inline-flex; align-items: center; gap: 4px;
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: var(--fs-xs); color: var(--brand-600);
}
.sa__back:hover { text-decoration: underline; }

/* ---------- 提示 ---------- */
.sa__notice {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: 9px var(--sp-4); margin-bottom: var(--sp-4);
  border-radius: var(--r-md); font-size: var(--fs-xs); line-height: var(--lh-normal);
}
.sa__notice svg { flex: none; margin-top: 1px; }
.sa__notice--ok { background: var(--ok-100); color: var(--ok-700); }
.sa__notice--warn { background: var(--warn-100); color: var(--warn-700); }
.sa__notice--danger { background: var(--danger-100); color: var(--danger-700); }
.sa__notice--info { background: var(--info-100); color: var(--info-700); }

/* ---------- 被挡下 / 空 / 出错 ---------- */
.sa__blocked, .sa__empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  /* 撑够高度并居中：否则在宽弹窗里会缩成一条飘在顶端的横条，像没画完 */
  min-height: min(320px, 42vh);
  padding: var(--sp-9) var(--sp-7);
  border: 1px dashed var(--ink-200); border-radius: var(--r-lg); background: var(--ink-50);
}
.sa__blocked__i {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-full); background: var(--white); box-shadow: var(--sh-xs);
}
.sa__blocked__i, .sa__empty svg { color: var(--ink-300); }
.sa__blocked b, .sa__empty b { margin-top: var(--sp-4); font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--ink-800); }
.sa__empty b { margin-top: var(--sp-3); }
.sa__blocked p, .sa__empty p {
  margin: var(--sp-3) 0 0; max-width: 400px;
  font-size: var(--fs-xs); color: var(--ink-500); line-height: var(--lh-loose);
}

/* ---------- 列表 ---------- */
.sa__tbl td, .sa__tbl th { vertical-align: middle; }
.sa__row--off { opacity: 0.55; }
.sa__who { display: flex; align-items: center; gap: var(--sp-3); }
.sa__av {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-full); background: var(--ink-150); color: var(--ink-600);
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
}
.sa__av.is-adm { background: linear-gradient(150deg, var(--accent-500), var(--accent-600)); color: var(--white); }
.sa__nm { display: flex; flex-direction: column; line-height: 1.3; }
.sa__nm i { font-style: normal; font-size: var(--fs-2xs); color: var(--ink-400); }
.sa__mail { font-size: var(--fs-2xs); color: var(--ink-600); max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 手机号注册上线后这一列可能有两行：主行手机号、副行邮箱（老账号才有邮箱）。
   ⚠ 副行必须是块级独立元素 —— 行内标签不许 display:block 去顶中文（表格排版红线）。 */
.sa__mail2 { display: block; font-style: normal; color: var(--ink-400); }
.sa__role, .sa__st {
  display: inline-block; padding: 2px 8px; border-radius: var(--r-full);
  font-size: var(--fs-2xs); font-weight: var(--fw-medium); white-space: nowrap;
}
.sa__role--adm { background: var(--accent-100); color: var(--accent-700); }
.sa__role--mem { background: var(--ink-100); color: var(--ink-600); }
.sa__st--ok { background: var(--ok-100); color: var(--ok-700); }
.sa__st--warn { background: var(--warn-100); color: var(--warn-700); }
.sa__st--neutral { background: var(--ink-100); color: var(--ink-500); }
.sa__perms { font-size: var(--fs-2xs); color: var(--ink-600); font-variant-numeric: tabular-nums; }
.sa__ops { white-space: nowrap; }
.sa__op {
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 0 8px; margin-right: 4px;
  border: 1px solid var(--ink-200); background: var(--white);
  border-radius: var(--r-sm); cursor: pointer;
  font-family: inherit; font-size: var(--fs-2xs); color: var(--ink-600);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.sa__op:hover { border-color: var(--brand-400); color: var(--brand-700); }
.sa__op--danger:hover { border-color: var(--danger-500); color: var(--danger-600); }

.sa__foot {
  display: flex; align-items: flex-start; gap: 6px;
  margin: var(--sp-5) 0 0; font-size: var(--fs-2xs); color: var(--ink-400); line-height: var(--lh-normal);
}
.sa__foot svg { flex: none; margin-top: 1px; }

/* ---------- 表单 ---------- */
.sa__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.sa__f { display: block; }
.sa__f > span {
  display: block; margin-bottom: 5px;
  font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--ink-700);
}
.sa__f > span i { margin-left: var(--sp-2); font-style: normal; font-size: var(--fs-2xs); font-weight: var(--fw-normal); color: var(--ink-400); }
.sa__f input {
  width: 100%; height: 38px; padding: 0 var(--sp-4);
  border: 1px solid var(--ink-200); border-radius: var(--r-md);
  background: var(--white); font-family: inherit; font-size: var(--fs-sm); color: var(--ink-900);
  outline: 0; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.sa__f input:focus { border-color: var(--brand-500); box-shadow: var(--sh-focus); }
.sa__fh { display: block; margin-top: 6px; font-style: normal; font-size: var(--fs-2xs); color: var(--ink-400); line-height: var(--lh-normal); }

.sa__seg { display: inline-grid; grid-template-columns: repeat(2, 1fr); gap: 3px; padding: 3px; background: var(--ink-100); border-radius: var(--r-md); }
.sa__seg__i {
  height: 30px; padding: 0 var(--sp-5); border: 0; background: transparent;
  border-radius: var(--r-sm); cursor: pointer;
  font-family: inherit; font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--ink-600);
}
.sa__seg__i.is-on { background: var(--white); color: var(--brand-700); font-weight: var(--fw-semibold); box-shadow: var(--sh-xs); }

.sa__fhd {
  display: flex; align-items: baseline; gap: var(--sp-4);
  margin: var(--sp-6) 0 0; padding-bottom: 7px; border-bottom: var(--border-soft);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-900);
}
.sa__fhd span { font-size: var(--fs-2xs); font-weight: var(--fw-normal); color: var(--ink-400); }

/* ---------- 权限勾选 ---------- */
.sa__pg { margin-top: var(--sp-5); }
.sa__pg__h { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.sa__pg__h b { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--ink-800); }
.sa__pg__h span { font-size: var(--fs-2xs); color: var(--ink-400); }
.sa__pg__l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }

.sa__cb { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--sp-3); align-items: start; cursor: pointer; }
.sa__cb input { position: absolute; opacity: 0; pointer-events: none; }
.sa__cb__b {
  width: 18px; height: 18px; margin-top: 1px; display: grid; place-items: center;
  border: 1px solid var(--ink-300); border-radius: var(--r-sm); background: var(--white);
  color: transparent; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.sa__cb input:checked + .sa__cb__b { background: var(--brand-700); border-color: var(--brand-700); color: var(--white); }
.sa__cb input:focus-visible + .sa__cb__b { box-shadow: var(--sh-focus); }
.sa__cb.is-lock { cursor: default; }
.sa__cb.is-lock input:checked + .sa__cb__b { background: var(--accent-600); border-color: var(--accent-600); }
.sa__cb__t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.sa__cb__t b { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--ink-800); }
.sa__cb__t i { font-style: normal; font-size: var(--fs-2xs); color: var(--ink-400); }
.sa__cb__t em { font-style: normal; font-size: var(--fs-2xs); color: var(--ink-300); }

/* ============================================================
   会员档位（2026-10-08 会员机制）
   「会员档位」这一列就是老板的开通入口：编辑里改档位 = 开通/降级。
   配色：免费=中性灰、会员=墨绿、尊享=暖金铜 —— 一眼分得清三档。
   ============================================================ */

.sa__plan { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.sa__plan-b {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  padding: 1px 7px;
  border-radius: var(--r-full);
}
.sa__plan-b--free { background: var(--ink-100); color: var(--ink-600); }
.sa__plan-b--vip { background: var(--brand-100); color: var(--brand-700); }
.sa__plan-b--svip { background: var(--accent-100); color: var(--accent-700); }
.sa__plan-m { font-size: var(--fs-2xs); color: var(--ink-400); font-family: var(--font-mono); }
.sa__plan { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }

/* 设备入口：名额占满时变红 —— 这是客服要处理的信号 */
.sa__plan-dev {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--fs-2xs); color: var(--ink-400);
  background: none; border: 1px dashed var(--line-200);
  border-radius: var(--r-1); padding: 1px var(--sp-2); cursor: pointer;
}
.sa__plan-dev:hover { color: var(--ink-700); border-color: var(--ink-300); }
.sa__plan-dev.is-full { color: var(--danger-600); border-color: var(--danger-300); background: var(--danger-100); border-style: solid; }

/* 展开的设备清单 */
.sa__devbox {
  display: flex; flex-direction: column; gap: var(--sp-2);
  flex-basis: 100%; margin-top: var(--sp-1);
  padding: var(--sp-3); background: var(--ink-50);
  border: 1px solid var(--line-200); border-radius: var(--r-2);
}
.sa__devitem { display: flex; align-items: center; gap: var(--sp-3); }
.sa__devfp { font-size: var(--fs-2xs); color: var(--ink-700); }
.sa__devt { font-size: var(--fs-2xs); color: var(--ink-400); font-family: var(--font-mono); }
.sa__devempty, .sa__devtip { font-size: var(--fs-2xs); color: var(--ink-400); line-height: 1.5; }
.sa__devtip { color: var(--ink-500); border-top: 1px dashed var(--line-200); padding-top: var(--sp-2); }

.sa__planbox { padding: 0 var(--sp-1) var(--sp-5); }
.sa__planbox .sa__seg { margin-bottom: var(--sp-2); }
.sa__f--sub { margin-top: var(--sp-3); }