/* ==========================================================================
   生成卡密弹窗 —— 「常规生成 / 自定义生成」选项卡
   自包含样式: 不依赖 style.css 的变量改动, 也不去改共享样式表。
   只服务于 public/biz.js 的 openGenerateModal()。
   ========================================================================== */

/* ---- 选项卡切换器 (视觉参考站点设置页 .subtabs, 但样式在此独立定义) ---- */
.gen-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  border-bottom: 1px solid #e4e9f0;
}

.gen-tab {
  padding: 9px 16px;
  font-size: 13.5px;
  line-height: 1.2;
  cursor: pointer;
  color: #6b7686;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 7px 7px 0 0;
  background: transparent;
  white-space: nowrap;
  user-select: none;
}

.gen-tab:hover {
  color: #1f2937;
  background: #f6f8fb;
}

.gen-tab.active {
  color: #2563eb;
  font-weight: 600;
  border-bottom-color: #2563eb;
  background: #eef4ff;
}

/* ---- 面板: 同一时刻只显示一个 ---- */
.gen-pane {
  display: block;
}

/* ---- 「已输入 N 个卡号」实时计数 ---- */
.gen-count {
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #2563eb;
}

/* ---- 自定义生成的中文说明块 ---- */
.gen-note {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #f7f9fc;
  font-size: 12.5px;
  line-height: 1.9;
  color: #4b5563;
}

.gen-note b {
  color: #b42318;
  font-weight: 600;
}

/* ---- 错误提示: 后端 400 也必须看得见, 不能静默失败 ---- */
.gen-err {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid #f5b5b0;
  border-radius: 8px;
  background: #fef2f2;
  color: #b42318;
  font-size: 13px;
  line-height: 1.7;
}

/* ---- 软件权限区块 (单个 / 多个 / 全部) ---- */
.gen-scope:empty {
  display: none;
}

.gen-scope {
  margin-top: 14px;
}

.scope-radios {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin: 6px 0 8px;
}

.scope-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: #1f2937;
  cursor: pointer;
  user-select: none;
}

.scope-opt input { cursor: pointer; }

.scope-note {
  padding: 10px 12px;
  border: 1px solid #cfe3d4;
  border-radius: 8px;
  background: #f2fbf4;
  color: #24603a;
  font-size: 13px;
  line-height: 1.8;
}

.scope-note b { color: #14612f; }

.scope-list {
  max-height: 190px;
  overflow: auto;
  margin-top: 6px;
  border: 1px solid #e4e8f0;
  border-radius: 8px;
  background: #fff;
}

.scope-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 13px;
  border-bottom: 1px solid #f1f3f8;
  cursor: pointer;
}

.scope-item:last-child { border-bottom: 0; }

.scope-item:hover { background: #f7f9fc; }

.scope-item.locked {
  background: #f7f9fc;
  cursor: default;
}

.scope-name { color: #1f2937; }

.scope-key {
  color: #8a93a5;
  font-size: 12px;
}

.scope-lock {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: #e8f0fe;
  color: #1b4dbe;
  font-size: 11.5px;
  white-space: nowrap;
}

.scope-off {
  padding: 1px 7px;
  border-radius: 999px;
  background: #fdeaea;
  color: #b42318;
  font-size: 11.5px;
  white-space: nowrap;
}

/*===========================================================================
  批次20: 卡密模板编辑器「选择软件…」(#ctScopePick) 的授权范围弹窗
  实际 DOM(已核对 biz.js 源码, 前端已落地):
    #scopeModal.mask.b20scope-mask                 ← 全屏遮罩, 完全沿用 .mask
      └ .modal.b20scope-modal                      ← 卡片本体(尺寸写在这里)
          ├ header > h3#scopeTitle + button.x#scopeX                 沿用 .modal > header
          ├ .body
          │   ├ .b20scope-bar > input.inp#scopeSearch
          │   │                 + button.btn.sm#scopeAll + button.btn.sm#scopeClear
          │   │                 + span.gen-count#scopeCount
          │   └ .b20scope-list#scopeList > label.b20scope-item
          │            > input.b20scope-cb + span.b20scope-name + span.b20scope-key
          └ footer > button.btn#scopeCancel + button.btn.primary#scopeOk   沿用 .modal > footer
  因此这里只补三件事; 标题/页脚/输入框/按钮/计数一律复用既有样式, 不重复定义(避免与 .modal/.btn/.inp 打架):
    ① 卡片尺寸 520px / 最大 70vh / 内部滚动
    ② 工具栏一行放下「搜索 + 全选 + 清空 + 计数」
    ③ 列表与列表行(行高 34px / hover 浅灰 / 选中浅蓝)
  色值写字面量、与 style.css 色板一致(本文件保持不依赖 var(), 沿用原文件写法);
  前缀 b20scope- 与「生成卡密」弹窗的 .scope-* 隔离, 不互相污染。
==========================================================================*/

/* ① 卡片: #scopeModal 自身是 .mask 遮罩 —— 尺寸绝不能写在遮罩上(会把它压成 520px 的小条),
   必须写在它内部的卡片上。 */
#scopeModal > .modal {
  width: 520px;
  max-width: calc(100vw - 48px);
  max-height: 70vh;      /* 覆盖 .modal 的 88vh */
  border-radius: 8px;    /* 覆盖 .modal 的 10px */
  overflow: hidden;      /* 让列表自己滚, 而不是整张卡片滚 */
}

/* ② 工具栏: 一行放下「搜索框 + 全选 + 清空 + 计数」 */
.b20scope-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.b20scope-bar #scopeSearch { flex: 1 1 auto; min-width: 0; }
.b20scope-bar #scopeCount { flex: 0 0 auto; margin-top: 0; }   /* .gen-count 自带 margin-top:6px(那是给生成弹窗的纵向布局用的), 这里是一行 toolbar, 必须清零否则整行基线差 3px */

/* ③ 列表: 内部滚动; 行高 34px; 悬停浅灰; 选中浅蓝; 1px 细边框 + 8px 圆角 */
#scopeList {
  max-height: 44vh;
  overflow-y: auto;
  padding: 3px 0;
  border: 1px solid #e3e7ee;
  border-radius: 8px;
  background: #fff;
}
.b20scope-item {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 0 12px;
  font-size: 13px;
  line-height: 1.4;
  color: #1f2530;
  cursor: pointer;
  user-select: none;
}
.b20scope-item:hover { background: #f7f9fc; }
.b20scope-item:has(.b20scope-cb:checked) { background: #eff5ff; }
.b20scope-cb {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #2563eb;
  cursor: pointer;
}
.b20scope-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b20scope-key { flex: 0 0 auto; font-size: 11.5px; color: #9aa3b2; }
.b20scope-empty { padding: 14px 0; text-align: center; font-size: 12.5px; }