/* ========== 抽检模式样式：顶部模式切换 / 登录 / 抽检场次 / 大屏横幅 / 抽检数据 ==========
   设计语言与现有页面一致；抽检用绿色系（#10b981）与抢答的靛蓝做区分 */

/* ---------- 模式相关的栏目/按钮显隐 ---------- */
/* 抽检模式下隐藏抢答专属栏目与按钮 */
body.mode-inspect .race-only { display: none !important; }
body.mode-inspect .screen-race-ctrls { display: none !important; }
/* 抢答模式下隐藏抽检专属栏目 */
body.mode-race .insp-only { display: none !important; }

/* ---------- 顶部导航：模式开关（顶部居中，抢答左 / 抽检右，滑块滑动切换） ---------- */
.mode-toggle-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.mode-toggle {
  position: relative;
  display: flex;
  padding: 4px;
  border-radius: 999px;
  border: 1.5px solid rgba(0, 0, 0, 0.05);
  background: linear-gradient(180deg, #eef2f7, #f8fafc);
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, .07);
  transition: transform .25s ease;
}
/* 悬浮动效：开关整组轻微上浮（扁平化，无外阴影） */
.mode-toggle:hover { transform: translateY(-2px); }
.mode-toggle:active { transform: translateY(0) scale(.97); }
/* 滑块：默认停左半段（抢答·靛蓝），抽检模式下沿弹性曲线滑到右半段并变绿 */
.mode-toggle-slider {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  transition: transform .34s cubic-bezier(.34, 1.56, .64, 1), background .3s ease;
  z-index: 0;
  pointer-events: none;
}
body.mode-inspect .mode-toggle-slider {
  transform: translateX(100%);
  background: linear-gradient(135deg, #10b981, #059669);
}
.mode-toggle-seg {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 64px;   /* 文字已精简为两字（抢答/抽检），无图标 */
  border: none;
  background: transparent;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  font-family: inherit;
  color: #64748b;
  cursor: pointer;
  white-space: nowrap;
  transition: color .25s ease, transform .16s ease;
}
/* 悬浮动效：分段文字微浮 */
.mode-toggle-seg:hover { transform: translateY(-1px); }
/* 点击动效：按下回弹 */
.mode-toggle-seg:active { transform: scale(.93); }
.mode-toggle-seg.active { color: #fff; }

/* ---------- 顶部导航：管理员头像按钮（右上角，仅显示头像不显示文字） ---------- */
.user-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #e2e8f0;
  background: #f8fafc;
  cursor: pointer;
  overflow: hidden;
  transition: all .2s;
  white-space: nowrap;
}
.user-chip:hover { border-color: #c7d2fe; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(99, 102, 241, .18); }
.user-chip.on { border-color: #10b981; background: #ecfdf5; box-shadow: 0 0 0 3px rgba(16, 185, 129, .12); }
.chip-ava-fb { font-size: 18px; line-height: 1; color: #475569; }
.user-chip.on .chip-ava-fb { color: #059669; }
.chip-ava-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- 顶部导航：总管理员门店视野选择器（🏬，仅 owner 可见） ---------- */
.store-scope-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 10px;
  padding: 4px 6px 4px 12px;
  border-radius: 999px;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  white-space: nowrap;
}
.store-scope-ico { font-size: 14px; }
.store-scope-wrap select {
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: #4f46e5;
  padding: 2px 8px 2px 2px;
  cursor: pointer;
  max-width: 150px;
}

@media (max-width: 900px) {
  /* 窄屏：模式开关与头像按钮同步压缩 */
  .mode-toggle-seg { min-width: 0; padding: 6px 12px; font-size: 12px; gap: 4px; }
  .user-chip { width: 34px; height: 34px; margin-left: 6px; }
  .store-scope-wrap { margin-left: 6px; padding: 3px 4px 3px 9px; }
  .store-scope-wrap select { font-size: 12px; max-width: 110px; }
}

/* ---------- 登录弹窗：已登录视图 ---------- */
.login-done-box { text-align: center; padding: 20px 0 8px; }
.login-done-name { font-size: 21px; font-weight: 800; color: #1e293b; }
.login-done-store { margin-top: 8px; font-size: 14px; color: #64748b; }

/* ---------- 设置·个人信息卡（头像上传 + 身份信息） ---------- */
.me-info-body { display: flex; align-items: center; gap: 20px; padding: 8px 2px 4px; flex-wrap: wrap; }
.me-avatar-box { text-align: center; }
.me-avatar {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 3px solid #e2e8f0;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  cursor: pointer;
  overflow: hidden;
  transition: all .2s;
}
.me-avatar:hover { border-color: #6366f1; transform: translateY(-2px); box-shadow: 0 4px 14px rgba(99, 102, 241, .28); }
.me-ava-fb { line-height: 1; color: #475569; }
.me-ava-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.me-ava-hint { margin-top: 7px; font-size: 12px; color: #94a3b8; }
.me-ava-hint.ok { color: #059669; font-weight: 700; }
.me-info-fields { flex: 1; min-width: 200px; }
.me-name { font-size: 20px; font-weight: 800; color: #1e293b; }
.me-meta { margin-top: 6px; font-size: 13.5px; color: #64748b; }
.me-meta-sub { font-size: 12px; color: #94a3b8; }

/* ---------- 设置·页面显示与字体比例卡 ---------- */
.ui-scale-body { display: flex; align-items: center; gap: 12px; padding: 6px 2px 10px; }
.ui-scale-edge { font-size: 12px; color: #94a3b8; white-space: nowrap; }
.ui-scale-range { flex: 1; accent-color: #6366f1; cursor: pointer; min-width: 120px; }
.ui-scale-now { font-size: 16px; font-weight: 800; color: #6366f1; white-space: nowrap; }

/* ---------- 抽检场次：列表 / 详情 ---------- */
.insp-row.running { border-color: #34d399 !important; background: #f0fdf4; }
.insp-meta { color: #059669; font-weight: 600; }

/* 进行中实时状态卡（多管理员同步可见） */
.insp-live {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 14px;
  padding: 14px 20px;
  margin-bottom: 18px;
}
.insp-live-item { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #065f46; }
.insp-live-label {
  font-size: 12px;
  color: #047857;
  background: #d1fae5;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- 选择被抽查人弹窗 ---------- */
.insp-target-list { max-height: 46vh; overflow-y: auto; padding-right: 4px; }
.insp-target-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  background: #fff;
  transition: all .16s;
}
.insp-target-row:hover { border-color: #34d399; background: #f0fdf4; transform: translateX(2px); }
.insp-target-row.cur { border-color: #10b981; background: #ecfdf5; }
.insp-target-name { font-weight: 700; color: #1e293b; flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insp-target-store { font-size: 13px; color: #64748b; white-space: nowrap; }
.insp-target-cur { font-size: 12px; color: #059669; font-weight: 700; white-space: nowrap; }
.insp-target-state { font-size: 12px; color: #94a3b8; white-space: nowrap; }
/* 三态：在线（绿）/ 抢答中（紫金，已绑定进行中场次） */
.insp-target-state.on { color: #059669; font-weight: 700; }
.insp-target-state.racing {
  color: #6d28d9;
  font-weight: 700;
  background: linear-gradient(90deg, #ede9fe 0%, #fef3c7 100%);
  border: 1px solid #c4b5fd;
  border-radius: 999px;
  padding: 1px 8px;
}

/* ---------- 抽检大屏：左上角圆形「检核」按钮（与右上角控制按钮同款同尺寸同动效） + 检核信息面板 ---------- */
.insp-badge-btn {
  position: absolute;
  top: 20px;
  left: 18px;
  z-index: 56;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-indent: 2px;   /* 抵消字间距，让「检核」二字视觉居中 */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* 与右上角控制按钮一致：鼠标静止淡出、悬浮放大辉光、按下缩小、点击辉光迸发 */
  opacity: 0;
  visibility: hidden;
  transition: background 0.2s, box-shadow 0.25s, transform 0.15s, opacity 0.25s, visibility 0.25s;
  --glow: rgba(165, 180, 252, 0.6);   /* 点击辉光色（btn-glowburst 用，同 .screen-full-btn） */
  user-select: none;
}
/* 鼠标移动唤醒显示；面板展开（active）时常显 */
.insp-badge-btn.show, .insp-badge-btn.active { opacity: 1; visibility: visible; }
.insp-badge-btn:hover {
  background: rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.55),
              0 0 9px rgba(255, 255, 255, 0.3),
              0 0 18px rgba(165, 180, 252, 0.35);
  transform: scale(1.12);   /* 悬浮放大（同 .screen-full-btn） */
}
.insp-badge-btn:active { transform: scale(0.9); }
.insp-badge-btn.active { background: rgba(2, 6, 23, 0.72); border-color: rgba(255, 255, 255, 0.75); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18); }

/* 检核信息面板：按钮正下方弹出的竖排深色卡片 */
.insp-banner {
  position: absolute;
  top: 68px;
  left: 18px;
  z-index: 55;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 10px 14px 12px;
  border-radius: 16px;
  background: rgba(2, 6, 23, 0.72);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  cursor: default;
  font-size: 14px;
  min-width: 180px;
  max-width: calc(100% - 28px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.insp-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: rgba(255, 255, 255, .62);
  padding-bottom: 6px;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.insp-panel-close {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .75);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}
.insp-panel-close:hover { background: rgba(255, 255, 255, .25); color: #fff; }
.insp-banner-label { font-size: 12px; color: rgba(255, 255, 255, .62); margin-right: 6px; }
.insp-panel-item { display: flex; align-items: center; gap: 8px; padding: 5px 2px; }
.insp-panel-item b { font-weight: 700; letter-spacing: .5px; }
/* 被抽查人：可视化可点击选择块（高亮底色 + 悬浮加深 + 下拉箭头） */
.insp-panel-target {
  cursor: pointer;
  margin: 2px -8px;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  transition: background .15s, border-color .15s;
}
.insp-panel-target:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .35); }
.insp-panel-target b { flex: 1; }
.insp-panel-target.empty b { color: #fbbf24; }
.insp-panel-arrow { color: rgba(255, 255, 255, .55); font-size: 12px; }
.insp-banner-score { font-weight: 800; color: #4ade80; padding-left: 4px; font-size: 16px; }
.insp-banner-score.neg { color: #f87171; }
.insp-banner-warn { font-size: 12px; color: #fbbf24; margin-top: 2px; }

/* ---------- 抽检大屏：判分按钮组（与抢答按钮组分隔线区分） ---------- */
.screen-insp-ctrls {
  display: flex;
  flex-wrap: wrap;                   /* 窄屏整组换行，不横向溢出 stage */
  gap: calc(14px * var(--fb-scale, 1));      /* 与抢答组同系数等比（--fb-scale 由 screen.js 写在 stage 上） */
  padding-left: calc(18px * var(--fb-scale, 1));
  margin-left: calc(4px * var(--fb-scale, 1));
  border-left: 1px solid rgba(255, 255, 255, 0.35);
}
@media (max-width: 768px) {
  /* 抽检按钮组不再窄屏硬切尺寸：--fb-scale 连续缩放已覆盖所有宽度 */
  /* 窄屏：圆形检核按钮左上贴边（与右上控制按钮对称），面板跟在按钮下方自适应宽度 */
  .insp-badge-btn { top: 16px; left: 14px; }
  .insp-banner { top: 62px; left: 14px; font-size: 13px; min-width: 170px; max-width: calc(100% - 20px); }
}

/* ---------- 抽检数据页 ---------- */
/* 按题目视图：绿色题号标签 + 场次来源标签 */
.data-round-no.insp-round-tag { background: #ecfdf5; color: #059669; }
.insp-round-sess {
  font-size: 12px;
  color: #059669;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 2px 10px;
  border-radius: 999px;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}
/* 按人员视图：统计小标签（替换抢答的"名次"位置） */
.insp-person-stat {
  font-size: 12px;
  color: #64748b;
  background: #f1f5f9;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
/* 记录行中的检核人标签 */
.data-rec-insp {
  font-size: 12px;
  color: #0d9488;
  white-space: nowrap;
  flex-shrink: 0;
}
.rr-insp { font-size: 12.5px; color: #0d9488; white-space: nowrap; flex-shrink: 0; }

/* ===== 被抽检次数排名（均衡榜）：次数条 + 平均线 + 差值 ===== */
.insp-bal-bar { display: flex; align-items: center; gap: 8px; min-width: 160px; }
.insp-bal-track { position: relative; flex: 1; height: 12px; background: #e2e8f0; border-radius: 999px; }
.insp-bal-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 999px; background: #94a3b8; transition: width .25s ease; }
.insp-bal-fill.low { background: #16a34a; }
.insp-bal-avg { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 2px dashed #64748b; }
.insp-bal-num { font-variant-numeric: tabular-nums; min-width: 28px; text-align: right; }
.insp-bal-diff { color: #64748b; font-variant-numeric: tabular-nums; }
.insp-bal-diff-low { color: #16a34a; font-variant-numeric: tabular-nums; }