* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background: #f4f6fb;
  color: #222;
}
/* 顶部固定区：头部 + 横幅 + 周次菜单，滚动时始终留在顶端 */
.sticky-head {
  position: sticky; top: 0; z-index: 50;
  background: #eef2f8;
  box-shadow: 0 3px 10px rgba(27,58,107,.14);
}
.sticky-head .week-bar { padding: 10px 24px 0; margin-bottom: 0; }
.week-bar-spacer { height: 12px; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 9px 26px;
  background: linear-gradient(135deg, #1b3a6b 0%, #2a5fa5 55%, #3b82c4 100%);
  color: #fff; box-shadow: 0 2px 10px rgba(27,58,107,.25);
  position: relative; overflow: hidden;
}
.topbar::after {
  content: ""; position: absolute; right: -40px; top: -60px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.14), transparent 70%);
  pointer-events: none;
}
.brand { display: flex; align-items: center; gap: 12px; z-index: 1; }
.brand-logo {
  flex: 0 0 auto; height: 46px; width: auto; display: block;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.35));
}
.topbar h1 { font-size: 18px; margin: 0; letter-spacing: .5px; font-weight: 600; }
.user-area { display: flex; align-items: center; gap: 10px; font-size: 14px; z-index: 1; flex-wrap: wrap; }
.welcome { font-size: 14px; }
.hint { color: #c7d7ee; font-size: 12px; }
.tag { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; margin-left: 4px; }
.tag-admin { background: #e74c3c; color: #fff; }
.tag-leader { background: #27ae60; color: #fff; }
.tag-member { background: #3498db; color: #fff; }

.btn {
  display: inline-block; padding: 7px 16px; background: #3498db; color: #fff;
  border: none; border-radius: 6px; cursor: pointer; text-decoration: none; font-size: 14px;
}
.btn:hover { background: #2980b9; }
.btn-sm { padding: 4px 12px; font-size: 13px; }
.btn-xs { padding: 2px 8px; font-size: 12px; line-height: 1.4; }
.btn-ghost { background: #95a5a6; }
.btn-ghost:hover { background: #7f8c8d; }
/* 深蓝头部内的按钮：半透明浅底 + 白字 */
.topbar .btn-ghost { background: rgba(255,255,255,.18); color: #fff; }
.topbar .btn-ghost:hover { background: rgba(255,255,255,.32); }

.alert { background: #fdecea; color: #c0392b; padding: 10px 24px; margin: 0; font-size: 14px; }

main { padding: 0 24px 18px; }

/* 周次菜单 */
.week-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.week-list { display: flex; gap: 8px; flex: 1; justify-content: center; min-width: 0; }.week-arrow {
  flex: 0 0 auto; width: 38px; height: 46px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; background: #fff; color: #2a5fa5; font-size: 24px; line-height: 1;
  text-decoration: none; border: 1px solid #e1e6ef; box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transition: all .15s ease; user-select: none;
}
.week-arrow:hover { background: #2a5fa5; color: #fff; border-color: #2a5fa5; }
.week-arrow-off { color: #cdd6e4; cursor: not-allowed; }
.week-arrow-off:hover { background: #fff; color: #cdd6e4; border-color: #e1e6ef; }
.week-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 0 0 auto;
  padding: 7px 14px; border-radius: 8px; background: #fff; text-decoration: none;
  color: #555; font-size: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.06);
  border: 1px solid #e1e6ef; transition: all .15s ease;
}
.week-btn:hover { color: #2a5fa5; border-color: #b9d4ee; }
.week-btn.active { background: linear-gradient(135deg, #2a5fa5, #3b82c4); color: #fff; border-color: #2a5fa5;
  box-shadow: 0 3px 10px rgba(42,95,165,.35); }
.week-btn.active .wk-range { color: #dcebff; }
.wk-label { font-weight: 600; white-space: nowrap; }
.wk-range { font-size: 12px; color: #8a94a6; white-space: nowrap; }
.wk-now { font-style: normal; font-size: 11px; background: #27ae60; color: #fff;
  padding: 0 6px; border-radius: 8px; margin-left: 4px; }

/* 课程表 */
table.schedule { border-collapse: separate; border-spacing: 0; width: 100%; background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.08); }
table.schedule th, table.schedule td {
  border-right: 1px solid #d8dee9; border-bottom: 1px solid #d8dee9; padding: 6px; vertical-align: top;
}
table.schedule th:first-child, table.schedule td:first-child { border-left: 1px solid #d8dee9; }
table.schedule thead th:first-child { border-top: 1px solid #d8dee9; }
table.schedule thead th {
  background: #eef2f8; text-align: center; font-size: 14px; padding: 10px;
  position: sticky; top: calc(var(--sticky-head-h, 130px) - var(--sticky-gap, 4px));
  z-index: 12; border-top: 1px solid #d8dee9;
}
.col-period { width: 70px; }
.col-time { width: 80px; }
table.schedule td.cell-period { text-align: center; vertical-align: middle; font-weight: bold; background: #f8fafc; }
table.schedule td.cell-time { text-align: center; vertical-align: middle; font-size: 12px; color: #555; background: #f8fafc; white-space: nowrap; }
.cell-day { width: 18%; }
.cell-head { text-align: right; min-height: 18px; }
.add-btn {
  border: none; background: #27ae60; color: #fff; width: 22px; height: 22px;
  border-radius: 50%; cursor: pointer; font-size: 14px; line-height: 1;
}
.add-btn:hover { background: #219150; }

/* 上午 / 下午 分隔 */
.section-label { display: block; font-size: 11px; color: #8a94a6; font-weight: normal; line-height: 1.2; margin-bottom: 2px; }
tr.pm-first td { border-top: 2px solid #c9d2e3; }
tr.pm-first .cell-period,
tr.pm-first .cell-time { border-top: 2px solid #c9d2e3; }

.act {
  padding: 6px 8px; margin: 4px 0; border-radius: 5px;
  background: #f7f9fc; border-left: 3px solid #bdc3c7;
}
.act.mine { background: #d4f5e0; border-left-color: #1e8449; }
/* 第一行：组名 + 性质 + 备注 + 操作 */
.act-title {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px;
  padding-bottom: 3px; border-bottom: 1px dashed rgba(0,0,0,.10);
}
.act-title .act-ops { margin-left: auto; flex: 0 0 auto; }
/* 第二行：左（地点/上课教师） 右（上课内容） */
.act-meta { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.act-meta-l { flex: 1 1 100%; min-width: 0; }
.act-meta-r { flex: 1 1 100%; min-width: 0; }
.act-meta .row {
  display: flex; align-items: flex-start; gap: 4px; margin-bottom: 2px;
}
.act-meta .mi {
  flex: 0 0 auto; padding: 0 5px; border-radius: 7px;
  font-size: 10px; line-height: 15px; color: #5b6b82; background: #e6ecf5;
  white-space: nowrap; margin-top: 1px;
}
.act-meta .mv { font-size: 12px; color: #2c3e50; word-break: break-word; min-width: 0; }
.act-meta-r .mv { color: #2a5fa5; }
/* 组长未填写时的占位提示 */
.act-meta .mv-empty { color: #a6b0bf; font-style: italic; }
.act-meta-r .mv-empty { color: #a6b0bf; }

/* 单元格够宽（桌面）时，左右并排 */
@media (min-width: 1180px) {
  .act-meta-l { flex: 1 1 0; }
  .act-meta-r { flex: 1 1 0; }
}
.g-name { font-weight: 600; font-size: 13px; }
.g-note { color: #888; font-size: 12px; }
/* 标题行末尾的备注小字（旧位置保留，现主要用 .act-remark 独立展示） */
.g-remark { color: #9aa6b8; font-size: 11px; font-style: italic; }
/* 有备注的卡片左侧高亮 */
.act:has(.act-remark) { border-left-color: #e67e22; }
.act-remark {
  margin-top: 5px;
  padding: 4px 6px;
  border-radius: 4px;
  background: #fff8e6;
  color: #8a5300;
  font-size: 12px;
  line-height: 1.4;
  word-break: break-word;
}
.act-remark .remark-icon {
  margin-right: 4px;
  color: #e67e22;
}
.g-type {
  display: inline-block; padding: 0 6px; border-radius: 8px;
  font-size: 11px; line-height: 17px; color: #fff; background: #7a8ba6; vertical-align: 1px;
}
.act-ops a { font-size: 12px; color: #3498db; text-decoration: none; margin-left: 4px; }
.act-ops a.del { color: #e74c3c; }

/* 按活动性质筛选（与上报状态同一行，中性配色适配暖黄/浅绿两种底色） */
.filter-label { font-size: 13px; color: #5b6b82; font-weight: 600; white-space: nowrap; }
.filter-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.chip {
  padding: 3px 12px; border-radius: 14px; font-size: 12.5px; cursor: pointer;
  border: 1px solid #cdd5e0; background: #fff; color: #40506a;
  transition: all .15s; line-height: 1.6;
}
.chip:hover { border-color: #3498db; color: #3498db; background: #fff; }
.chip.active { background: #3498db; border-color: #3498db; color: #fff; font-weight: 600; }
.filter-count { font-size: 12.5px; color: #7a8ba6; white-space: nowrap; }
/* 筛选后为空的单元格占位（保持行高稳定） */
.act-empty { display: none; height: 26px; }

/* 弹窗内「兼周课」勾选框行（不用 !important，避免覆盖 JS 的 display 切换） */
.modal label.chk-line { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.modal label.chk-line input[type="checkbox"] { width: 15px; height: 15px; padding: 0; margin: 0; flex: 0 0 auto; cursor: pointer; }

/* 后台 */
.center { display: flex; justify-content: center; }
.login-box {
  background: #fff; padding: 28px 32px; border-radius: 10px; width: 320px;
  box-shadow: 0 2px 10px rgba(0,0,0,.1); margin-top: 40px;
}
.login-box h2 { margin-top: 0; }
.login-box label { display: block; margin: 12px 0 4px; font-size: 14px; }
.login-box input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 6px; }
.login-box .btn { width: 100%; margin-top: 16px; }

.admin-main { max-width: 1180px; margin: 0 auto; }

/* 后台标签页菜单 */
.tab-bar {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-bottom: 18px; padding: 14px 18px;
  background: #eef2f8; border-radius: 12px;
}
.tab-btn {
  padding: 8px 18px; border: none; border-radius: 8px;
  background: #fff; color: #555; font-size: 14px; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transition: all .15s ease;
}
.tab-btn:hover { background: #f7f9fc; color: #3498db; }
.tab-btn.active { background: #3498db; color: #fff; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.panel { background: #fff; padding: 18px 22px; border-radius: 10px; margin-bottom: 18px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.panel h2 { margin-top: 0; font-size: 16px; border-left: 4px solid #3498db; padding-left: 8px; }
.admin-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.admin-table th, .admin-table td { border: 1px solid #e1e6ef; padding: 6px; font-size: 13px; }
.admin-table th { background: #f0f4fa; }
.col-order { white-space: nowrap; width: 64px; text-align: center; }
.admin-table input, .admin-table select { width: 100%; padding: 5px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
.admin-table select.a-role { padding: 5px 2px; font-size: 13px; min-width: 92px; }
.admin-table input.a-name { padding: 5px 6px; }
.admin-table th, .admin-table td { vertical-align: middle; }

/* 后台表格内按钮统一缩小，避免操作列换行 */
.admin-table .btn-sm { padding: 3px 10px; font-size: 12px; }

/* 学科组管理表格：类型列固定宽度 */
#groupTable td:nth-child(4), #groupTable th:nth-child(4) { width: 132px; min-width: 132px; }

/* 组长管理表格列宽 */
#accountTable td:nth-child(3), #accountTable th:nth-child(3) { width: 120px; min-width: 120px; }
#accountTable td:nth-child(4), #accountTable th:nth-child(4) { width: 128px; min-width: 128px; }
#accountTable td:nth-child(5), #accountTable th:nth-child(5) { width: 118px; min-width: 118px; }
#accountTable td:nth-child(6), #accountTable th:nth-child(6) { width: 64px; min-width: 64px; text-align: center; }
#accountTable td:nth-child(7), #accountTable th:nth-child(7) { width: 220px; min-width: 220px; white-space: normal; text-align: left; }
#accountTable td:nth-child(8), #accountTable th:nth-child(8),
#accountTable td:nth-child(9), #accountTable th:nth-child(9),
#accountTable td:nth-child(10), #accountTable th:nth-child(10),
#accountTable td:nth-child(11), #accountTable th:nth-child(11) { white-space: nowrap; text-align: center; }
#accountTable td:nth-child(8), #accountTable th:nth-child(8) { width: 90px; min-width: 90px; }
#accountTable td:nth-child(9), #accountTable th:nth-child(9) { width: 150px; min-width: 150px; }
#accountTable td:nth-child(10), #accountTable th:nth-child(10) { width: 60px; min-width: 60px; }
#accountTable td:nth-child(11), #accountTable th:nth-child(11) { width: 110px; min-width: 110px; }

/* 成员管理表格列宽 */
#memberTable td:nth-child(3), #memberTable th:nth-child(3) { width: 100px; min-width: 100px; }
#memberTable td:nth-child(4), #memberTable th:nth-child(4) { width: 160px; min-width: 160px; }
#memberTable td:nth-child(5), #memberTable th:nth-child(5) { width: 118px; min-width: 118px; }
#memberTable td:nth-child(6), #memberTable th:nth-child(6) { width: 64px; min-width: 64px; text-align: center; }
#memberTable td:nth-child(7), #memberTable th:nth-child(7),
#memberTable td:nth-child(8), #memberTable th:nth-child(8),
#memberTable td:nth-child(9), #memberTable th:nth-child(9) { white-space: nowrap; text-align: center; }
#memberTable td:nth-child(7), #memberTable th:nth-child(7) { width: 90px; min-width: 90px; }
#memberTable td:nth-child(8), #memberTable th:nth-child(8) { width: 150px; min-width: 150px; }
#memberTable td:nth-child(9), #memberTable th:nth-child(9) { width: 110px; min-width: 110px; }

#accountTable td:nth-child(8) label,
#memberTable td:nth-child(7) label,
.admin-table td:nth-child(7) label { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
#accountTable td:nth-child(8) input[type=checkbox],
#memberTable td:nth-child(7) input[type=checkbox],
.admin-table td:nth-child(7) input[type=checkbox] { width: auto; margin: 0; }
.add-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.add-row input, .add-row select { padding: 6px; border: 1px solid #ccc; border-radius: 5px; }

/* 模态框 */
.modal-mask {
  position: fixed; inset: 0; background: rgba(0,0,0,.4);
  display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto; padding: 16px; z-index: 50;
}
.modal { background: #fff; padding: 24px; border-radius: 10px; width: 380px; margin: auto; }
.modal h3 { margin-top: 0; }
.modal label { display: block; margin: 10px 0 4px; font-size: 13px; }
.modal label .req { color: #e74c3c; font-size: 11px; font-weight: normal; margin-left: 4px; }
.modal input, .modal select { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 6px; }
.modal-ops { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.g-display { font-weight: 600; color: #2c3e50; padding: 6px 0; }

/* 手机端：顶部固定区若过高会一直占住屏幕、把课表挤到下面且无法滑出视野。
   这里把横幅内的筛选按钮收成「单行横向滑动」，并允许展开/收起，
   使固定区高度从约 325px 降到约 230px（占屏 29% → 21%）。 */
.filter-toggle { display: none; }

/* 手机端优化：弹窗可滚动，按钮整宽易点 */
@media (max-width: 480px) {
  .modal { width: 100%; max-width: 360px; padding: 18px; }
  .modal-ops { flex-direction: column; }
  .modal-ops .btn { width: 100%; }
  .cell-day { width: auto; }
  table.schedule { font-size: 12px; }
  .topbar { padding: 6px 14px; }
  .topbar h1 { font-size: 15px; }
  .brand-logo { height: 34px; }
  main { padding: 14px 12px; }
  .week-bar { gap: 6px; }
  .week-list { gap: 5px; justify-content: flex-start; overflow-x: auto; padding-bottom: 4px; }
  .week-btn { padding: 6px 9px; font-size: 12px; }
  .wk-range { font-size: 10px; }
  .week-arrow { width: 32px; height: 42px; font-size: 20px; }

  /* --- 顶部固定区瘦身 --- */
  .banner { padding: 7px 10px; gap: 5px 8px; }
  .banner-single .banner-text { font-size: 13.5px; }
  .banner-filter {
    width: 100%; justify-content: flex-start; gap: 6px;
    flex-wrap: nowrap; align-items: center;
  }
  .filter-label { font-size: 12px; flex: 0 0 auto; white-space: nowrap; }

  /* 筛选按钮：单行横向滑动，不再换行堆成 3 行。
     用 flex:1 1 0 + min-width:0 让它在「标签 + 按钮 + 展开」同一行内自适应收窄，
     否则会撑满整行把其它元素挤到下一行。 */
  .filter-chips {
    flex: 1 1 0; min-width: 0; width: auto;
    flex-wrap: nowrap; overflow-x: auto;
    padding-bottom: 2px; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filter-chips::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; padding: 3px 10px; font-size: 12px; }

  /* 展开按钮：只在手机端出现，与筛选行同一行 */
  .filter-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; border: 1px solid #cdd5e0; background: #fff; color: #40506a;
    border-radius: 14px; font-size: 12px; padding: 3px 9px; cursor: pointer;
    white-space: nowrap;
  }
  /* 计数标签收起时隐藏，避免再占一行 */
  .banner-filter .filter-count:empty { display: none; }
  /* 展开状态：允许换行铺满 */
  .banner-filter.expanded { flex-wrap: wrap; }
  .banner-filter.expanded .filter-chips { flex-wrap: wrap; overflow-x: visible; }
  .banner-filter.expanded .filter-toggle { order: 99; }
}

/* 后台子区域 */
.sub-section { padding: 14px; background: #f8fafc; border-radius: 8px; margin-top: 12px; }
.sub-section h3 { margin-top: 0; font-size: 14px; color: #34495e; }
.group-tag { display: inline-block; background: #e8f4fd; color: #2980b9; padding: 2px 8px; border-radius: 12px; font-size: 12px; margin: 2px; }
#accountTbody tr.disabled { opacity: 0.5; }
/* 学科组管理表格随页面自然滚动 */

/* 上报期横幅（内含「按活动性质查看」筛选，整体居中） */
.banner { padding: 10px 24px; font-size: 14px; text-align: center; display: flex;
  align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
.banner .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.banner-text { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.banner-filter { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* 状态标语与筛选栏同一行：状态不加粗底色，整体居中 */
.banner-single .banner-text { font-weight: 600; }
.banner-single .banner-text b { font-weight: 700; }
.banner-single .filter-label { color: #5b6b82; }
.banner-single .chip:not(.active) { background: #fff; }
.banner-single .chip.active { background: #2c7fd1; border-color: #2c7fd1; color: #fff; }
.banner-single .filter-count { color: #7a8ba6; }
.banner-open { background: linear-gradient(90deg, #fff4dc, #fffbf0); color: #8a5100;
  border-bottom: 1px solid #f0d493; }
.banner-open .dot { background: #e8890c; box-shadow: 0 0 0 3px rgba(232,137,12,.25); }
.banner-open b { color: #b34700; font-size: 15px; }
.banner-closed { background: linear-gradient(90deg, #eef9f2, #f8fdfa); color: #1e8449;
  border-bottom: 1px solid #cdeeda; }
.banner-closed .dot { background: #27ae60; box-shadow: 0 0 0 3px rgba(39,174,96,.18); }

/* 系统管理：每项独立成行 */
/* 系统管理：左右两列卡片布局 */
.sys-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin-top: 14px; }
.sys-col + .sys-col { border-left: 1px solid #e3e8f0; padding-left: 36px; }
.sys-col { display: flex; flex-direction: column; gap: 14px; }
.sys-col-title { margin: 0 0 2px; font-size: 15px; font-weight: 600; color: #fff;
  padding: 11px 16px; border-radius: 10px; letter-spacing: .5px; }
.sys-col-title--download { background: linear-gradient(135deg, #2f9e6e, #38b48b); }
.sys-col-title--admin    { background: linear-gradient(135deg, #4b6cb7, #5b7fd6); }

.sys-card { background: #fff; border: 1px solid #e7eaf0; border-radius: 10px;
  padding: 14px 16px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.sys-card-head { font-size: 13.5px; color: #2c3e50; margin-bottom: 11px;
  display: flex; align-items: center; gap: 8px; line-height: 1.45; }
.sys-num { flex: 0 0 auto; width: 21px; height: 21px; border-radius: 50%;
  background: #3498db; color: #fff; font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; }

.sys-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sys-row--inline { width: 100%; }
.sys-row select { flex: 0 1 auto; min-width: 120px; padding: 7px 9px;
  border: 1px solid #cdd5e0; border-radius: 6px; font-size: 13px; background: #fff; }
.sys-row input { flex: 1 1 150px; min-width: 120px; padding: 8px 10px;
  border: 1px solid #cdd5e0; border-radius: 6px; font-size: 13px; }
.sys-row input:focus, .sys-row select:focus { outline: none; border-color: #5b7fd6;
  box-shadow: 0 0 0 2px rgba(91,127,214,.18); }
.sys-sep { color: #8a94a6; font-size: 13px; }

.btn-block { display: block; width: 100%; text-align: center; box-sizing: border-box; }
.btn-primary { background: #3498db; border-color: #3498db; color: #fff; }
.btn-primary:hover { background: #2c81ba; }
.btn-danger { background: #e74c3c; border-color: #e74c3c; color: #fff; }
.btn-danger:hover { background: #c0392b; }

@media (max-width: 820px) {
  .sys-grid { grid-template-columns: 1fr; gap: 22px; }
  .sys-col + .sys-col { border-left: none; padding-left: 0; }
}


/* 账号管理：角色分类筛选 */
.acc-filters { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.acc-filter {
  padding: 6px 14px; border-radius: 18px; border: 1px solid #d5dde8; background: #fff;
  color: #4a5b70; font-size: 13px; cursor: pointer; transition: all .15s ease;
}
.acc-filter em { font-style: normal; color: #8a94a6; font-size: 12px; margin-left: 2px; }
.acc-filter:hover { border-color: #b9d4ee; color: #2a5fa5; }
.acc-filter.active {
  background: linear-gradient(135deg, #2a5fa5, #3b82c4); color: #fff; border-color: #2a5fa5;
  box-shadow: 0 2px 8px rgba(42,95,165,.3);
}
.acc-filter.active em { color: #dcebff; }

/* 账号列表：兼任角色小标识 */
.role-extra { font-size: 11px; color: #2a5fa5; margin-top: 2px; white-space: nowrap; }

/* 成员管理：职务徽章 */
.role-badge {
  display: inline-block; padding: 3px 8px; border-radius: 12px; font-size: 12px;
  white-space: nowrap; font-weight: 500;
}
.role-badge.role-leader {
  background: #e8f0fe; color: #1a4a8c; border: 1px solid #b9d4ee;
}
.role-badge.role-member {
  background: #f0f4f8; color: #5b6b7e; border: 1px solid #d8dee9;
}