/* 表头排序按钮（C2.288）
 *
 * 账号池与「完成情况」表共用同一套外观，避免两个页面点起来手感不一样：
 * 平时和普通表头没区别，hover 才浮出一个淡 ↕ 说明「这一列能点」，
 * 当前排序列染成品牌绿 + 实心箭头。
 *
 * 箭头一直占位（只是透明）——否则 hover 时突然出现会把表头文字挤歪一格。
 */
.sort-th {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border-radius: 4px;
  padding: 0 3px;
  margin: 0 -3px;
  font: inherit;
  color: inherit;
}
.sort-th:hover {
  color: var(--txt);
  background: var(--hover);
}
.sort-th:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}
.sort-th.is-on {
  color: var(--brand);
  font-weight: 700;
}
.sort-th i {
  font-style: normal;
  font-size: 9px;
  line-height: 1;
  opacity: 0;
}
.sort-th:hover i {
  opacity: 0.4;
}
.sort-th.is-on i {
  opacity: 1;
}