/* 公共样式 */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #f7f8fa;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei", sans-serif;
}
#app { min-height: 100vh; }
.page-body {
  padding-bottom: 64px;
}
/* 登录页 */
.login-wrap {
  padding: 60px 24px 0;
  text-align: center;
}
.login-wrap .logo {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  margin-bottom: 12px;
  object-fit: cover;
}
.login-wrap .app-title {
  margin: 0 0 32px;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 2px;
  background: linear-gradient(180deg, #3a3f4a 0%, #1f2329 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #1f2329;
}
.login-form { text-align: left; }
.login-btn-wrap { margin: 24px 16px; }

/* 聊天页 */
.chat-body {
  padding: 12px 12px 70px;
  min-height: calc(100vh - 46px);
}
/* 顶部固定状态栏: 场次倒计时 + 开奖记录, 玻璃透明悬浮, 不随消息滚动被遮挡 */
.top-status {
  position: fixed;
  top: 46px;
  left: 0;
  right: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}
/* 当前场次倒计时条 */
.round-banner {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: #323233;
}
.round-banner.running {
  background: linear-gradient(90deg, rgba(25, 137, 250, 0.14), rgba(25, 137, 250, 0.04));
  color: #1868dc;
}
.round-banner.ended {
  background: rgba(255, 138, 61, 0.12);
  color: #ff8a3d;
}
.round-banner.done {
  background: rgba(150, 151, 153, 0.12);
  color: #969799;
}
.round-label { font-size: 14px; }
.round-cd {
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
  color: #ee0a24;
}
.round-tag { font-size: 13px; }
/* 开奖号码小圆球横向排列, 内容居中 */
.open-strip {
  display: flex; gap: 5px;
  justify-content: center;
  overflow-x: auto; white-space: nowrap;
  padding: 6px 10px;
  -webkit-overflow-scrolling: touch;
}
.open-strip:not(:first-child) { border-top: 1px solid rgba(0, 0, 0, 0.04); }
.open-strip::-webkit-scrollbar { display: none; }
.open-chip {
  flex: none;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 12px; font-weight: 700; line-height: 1;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.msg-row { display: flex; margin-bottom: 14px; align-items: flex-start; }
.msg-row.mine { flex-direction: row-reverse; }
.msg-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: #1989fa; color: #fff; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  overflow: hidden;
}
.msg-avatar-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.msg-content { max-width: 68%; margin: 0 10px; min-width: 0; }
/* 自己的消息: 内容块内整体靠右, 使气泡贴向头像一侧 */
.msg-row.mine .msg-content { text-align: right; }
/* 普通文本气泡: 宽度自适应内容, 避免短消息留大片空白 */
.msg-content .msg-bubble { display: inline-block; max-width: 100%; }
/* 含汇总表格的消息内容放宽宽度, 避免表格被挤压换行 */
.msg-content:has(.ga-summary) { max-width: 88%; }
.msg-content:has(.ga-summary) .msg-bubble { display: block; }
.msg-meta {
  display: flex; align-items: baseline; gap: 6px;
  margin-bottom: 4px; max-width: 100%;
}
.msg-name {
  font-size: 12px; color: #969799;
  flex: 0 1 auto; min-width: 0;
  max-width: 120px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msg-time { font-size: 11px; color: #c8c9cc; flex: 0 0 auto; white-space: nowrap; }
.msg-row.mine .msg-meta { flex-direction: row-reverse; }
.msg-bubble {
  padding: 9px 12px; border-radius: 8px;
  background: #fff; color: #323233; word-break: break-all;
  line-height: 1.5; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.msg-row.mine .msg-bubble { background: #1989fa; color: #fff; }
/* 汇总气泡: 允许内部表格横向滚动, 不撑破布局; 表格背景为白, 文字用深色 */
.msg-bubble:has(.ga-summary) {
  padding: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: #fff; color: #323233;
}
.msg-row.mine .msg-bubble:has(.ga-summary) { background: #fff; color: #323233; }
/* 底部整体容器: 输入栏 + 键盘 */
.chat-footer {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 30; background: #fff;
  border-top: 1px solid #ebedf0;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
  /* 适配 iOS 全面屏底部安全区 */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.chat-input-bar {
  display: flex; padding: 8px; gap: 8px; align-items: center;
  background: #fff;
}
.footer-btn { flex: 0 0 auto; min-width: 52px; }
.input-display {
  flex: 1 1 auto; min-width: 0;
  min-height: 34px; line-height: 22px;
  padding: 6px 12px; background: #f7f8fa; border-radius: 8px;
  color: #323233; font-size: 15px; word-break: break-all;
}
.input-display.placeholder { color: #c8c9cc; font-size: 13px; }
/* 非会员(官方/代理/裁判等): 输入框禁用提示 */
.chat-input-locked .input-display { background: #f2f3f5; color: #969799; font-size: 13px; text-align: center; }

/* 格式校验提示 */
.format-toast {
  white-space: pre-line !important;
  text-align: center;
  line-height: 1.6 !important;
  padding: 14px 18px !important;
}

/* 自定义键盘 */
.custom-keyboard {
  display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(180deg, #eef1f6 0%, #e4e8ef 100%);
  border-top: 1px solid #e2e5ea;
  padding: 12px 10px;
}
/* 快捷积分: 输入含"/"(下注积分阶段)时显示在键盘顶部, 当前选中项高亮 */
.kb-quick {
  display: flex; gap: 8px;
}
.kb-quick-btn {
  flex: 1 1 0; height: 34px;
  border: none; border-radius: 8px;
  background: #fff; color: #323233; font-size: 15px; font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none; appearance: none; font-family: inherit;
  transition: transform 0.06s ease;
}
.kb-quick-btn:active { transform: translateY(1px); background: #f2f3f5; }
.kb-quick-btn.active {
  background: #1989fa; color: #fff; font-weight: 700;
  box-shadow: 0 2px 6px rgba(25,137,250,0.35);
}
/* 右侧功能列: 删除(上) + 发送(下), 与右手拇指区呼应 */
.kb-right {
  flex: 0 0 22%;
  display: flex; flex-direction: column; gap: 8px;
}
.kb-right .kb-del-icon { flex: 0 0 46px; }
/* 发送键 — 横排文字, 占据右列剩余高度 */
.kb-send {
  flex: 1 1 auto; min-height: 46px;
  border: none; border-radius: 10px; cursor: pointer;
  color: #fff; font-size: 18px; font-weight: 700; letter-spacing: 2px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #4aa3ff 0%, #1989fa 100%);
  box-shadow: 0 2px 6px rgba(25,137,250,0.35);
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none; appearance: none;
  -webkit-user-select: none; user-select: none;
  transition: transform 0.06s ease, filter 0.06s ease;
  font-family: inherit;
}
.kb-send:active { filter: brightness(0.94); transform: translateY(1px); }
.kb-send:disabled { opacity: 0.6; }
.kb-send-loading {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.5); border-top-color: #fff;
  animation: kb-spin 0.7s linear infinite;
}
@keyframes kb-spin { to { transform: rotate(360deg); } }
/* 上部: 左汉字 + 右数字 */
.kb-body { display: flex; gap: 10px; }
/* 左侧: 汉字区(上) + 单双区(下)纵向堆叠 */
.kb-left {
  flex: 0 0 38%;
  display: flex; flex-direction: column; gap: 8px;
}
/* 汉字键: 2 列 */
.kb-hans {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  align-content: start;
}
/* 数字区: 3 列 */
.kb-nums {
  flex: 1 1 auto; min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
/* 通用按键 */
.kb-key {
  box-sizing: border-box;
  height: 46px; border: none; border-radius: 10px;
  font-size: 18px; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none; appearance: none;
  transition: transform 0.06s ease, box-shadow 0.06s ease, filter 0.06s ease;
  font-family: inherit;
}
.kb-key:active { transform: translateY(1px); }

/* 汉字键 — 蓝色描边风格 */
.kb-han {
  padding: 0 4px; line-height: 1; letter-spacing: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: #fff; color: #1989fa;
  border: 1px solid #cfe3ff; font-weight: 600;
  box-shadow: 0 2px 4px rgba(25,137,250,0.12);
}
.kb-han:active { background: #eaf4ff; box-shadow: 0 1px 2px rgba(25,137,250,0.12); }
/* 单双群下: 除 单/双 外的汉字键禁用置灰 */
.kb-han:disabled {
  background: #f2f3f5; color: #c8c9cc;
  border-color: #ebedf0; box-shadow: none; cursor: not-allowed;
  opacity: 0.6;
}
.kb-han:disabled:active { transform: none; }

/* 数字键 — 白色立体风格 */
.kb-num {
  background: #fff; color: #323233; font-weight: 600;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
.kb-num:active { background: #f2f3f5; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
/* 斜杠符号键 — 数字风格 + 强调色 */
.kb-slash { color: #1989fa; font-size: 22px; font-weight: 700; }

/* 删除图标键 — 右列, 白色立体风格与数字键统一, 图标柔和红 */
.kb-del-icon {
  width: 100%;
  background: #fff; color: #ee4b3b;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
.kb-del-icon svg { display: block; }
.kb-del-icon:active {
  background: #fff0ee;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* 回到底部锚点按钮 */
.back-bottom {
  position: fixed; right: 14px; z-index: 40;
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: #1989fa;
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
  border: 1px solid #eef1f6;
  cursor: pointer; transition: bottom 0.2s ease, transform 0.06s ease;
  -webkit-tap-highlight-color: transparent;
}
.back-bottom:active { transform: scale(0.92); }
.fade-enter-active, .fade-leave-active { transition: opacity 0.2s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; }

/* 视频面板(顶部悬浮) */
.video-float {
  position: fixed;
  top: 54px;
  left: 10px;
  right: 10px;
  z-index: 100;
  padding: 10px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.24);
}
.video-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 42vh;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(160deg, #242833 0%, #0b0d12 100%);
}
/* 拖动/缩放的变换载体: 铺满舞台, 缩放+平移组合; 舞台 overflow:hidden 负责裁剪 */
.video-canvas {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  transform-origin: center center;
  transition: transform 0.2s ease;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
/* 拖动中: 关闭过渡保证跟手, 开启合成层 */
.video-canvas.dragging {
  transition: none;
  will-change: transform;
}
.video-player {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  display: block;
  -webkit-user-drag: none;
}
/* 顶部渐变栏: 关闭按钮 */
.video-topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 12px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  z-index: 4;
}
.video-close-btn {
  font-size: 18px;
  color: #fff;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  cursor: pointer;
  flex: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}
.video-close-btn:active { background: rgba(0, 0, 0, 0.6); }
/* 缩放控制: 仅 +/-, 左下角小胶囊, 避免遮挡视频右下角文字 */
.video-zoom-control {
  position: absolute;
  left: 8px; bottom: 8px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 4;
  -webkit-tap-highlight-color: transparent;
}
.video-zoom-btn {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}
.video-zoom-btn:active { background: rgba(255, 255, 255, 0.3); }
.video-zoom-val {
  color: #fff; font-size: 12px; min-width: 40px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.video-btns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.video-btn {
  height: 38px;
  line-height: 38px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #4e5969;
  background: #f2f3f5;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.18s, background 0.18s, box-shadow 0.18s, transform 0.08s;
}
.video-btn.active {
  color: #fff;
  background: linear-gradient(135deg, #4facfe 0%, #1989fa 100%);
  box-shadow: 0 4px 10px rgba(25, 137, 250, 0.3);
}
.video-btn:active { transform: scale(0.94); }

/* 视频加载中遮罩 */
.video-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(1px);
  z-index: 3;
  pointer-events: none;
}
.video-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: video-spin 0.8s linear infinite;
}
.video-loading-text {
  font-size: 13px;
  color: #fff;
  letter-spacing: 1px;
}
@keyframes video-spin {
  to { transform: rotate(360deg); }
}
/* 播放提示遮罩: 可点击(自动播放被拦截时点击播放), 位于关闭按钮之下 */
.video-hint {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  z-index: 3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.video-hint-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: 26px;
  line-height: 52px;
  text-align: center;
  font-weight: 700;
}
.video-hint-text {
  color: #fff;
  font-size: 13px;
  letter-spacing: 1px;
  text-align: center;
  max-width: 84%;
  line-height: 1.6;
}

/* 顶部导航栏 */
.nav-bar {
  height: 46px;
  line-height: 46px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #323233;
  background: #fff;
  border-bottom: 1px solid #ebedf0;
  position: sticky;
  top: 0;
  z-index: 10;
}
/* chat.html 导航栏: 群名过长时自动省略, 不会遮挡右侧"在线/视频"按钮
   Vant 默认标题 max-width:60% 且无溢出隐藏, 长标题会压到右侧按钮下 */
.chat-nav .van-nav-bar__left,
.chat-nav .van-nav-bar__right {
  position: static;   /* 回到文档流, 与标题一起参与 flex 布局 */
  flex: none;
  padding: 0 12px;
}
.chat-nav .van-nav-bar__title {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ===== 导航栏右侧操作组: 连接状态 + 视频开关 统一胶囊样式 ===== */
.nav-ops {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.net-pill, .video-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  color: #646566;
  background: #f2f3f5;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}
/* 连接状态点 */
.net-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: #c8c9cc;
}
.net-pill.net-ok .net-dot { background: #07c160; }
.net-pill.net-connecting .net-dot { background: #ff976a; animation: net-pulse 1.2s ease-in-out infinite; }
.net-pill.net-reconnecting .net-dot { background: #ff8a3d; animation: net-pulse 1.2s ease-in-out infinite; }
.net-pill.net-bad .net-dot { background: #ee0a24; }
/* 断开/连接失败: 胶囊整体变红, 一眼可见 */
.net-pill.net-bad {
  color: #ee0a24;
  background: rgba(238, 10, 36, 0.08);
}
.net-label { flex: none; }
/* 消息延迟小标签(嵌在连接胶囊内) */
.net-latency {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 999px;
}
.net-latency.ok { color: #07c160; background: rgba(7, 193, 96, 0.12); }
.net-latency.warn { color: #ff8a3d; background: rgba(255, 138, 61, 0.14); }
.net-latency.bad { color: #ee0a24; background: rgba(238, 10, 36, 0.12); }
/* 视频开关: 可点击, 打开时高亮为蓝色 */
.video-pill { cursor: pointer; }
.video-pill:active { background: #e4e8ef; }
.video-pill .van-icon { font-size: 13px; }
.video-pill.active {
  color: #1989fa;
  background: #e8f3ff;
}
@keyframes net-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
/* 通用列表单元 */
.list-cell {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid #f2f3f5;
  cursor: pointer;
}
.list-cell:active { background: #f7f8fa; }
.cell-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: #1989fa; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; margin-right: 12px; flex: none;
}
.cell-main { flex: 1; min-width: 0; }
.cell-title { font-size: 15px; color: #323233; }
.cell-desc { font-size: 12px; color: #969799; margin-top: 4px; }
/* 群列表: 群名称 + 最新场次 + 最近10期开奖号码 */
.group-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.group-name {
  font-size: 15px;
  color: #323233;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.group-round {
  flex: none;
  font-size: 12px;
  color: #1989fa;
  white-space: nowrap;
}
.group-history-balls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.group-history-empty { color: #c8c9cc; letter-spacing: 0; }
.cell-arrow { color: #c8c9cc; font-size: 20px; margin-left: 8px; }
.empty-tip { text-align: center; color: #969799; padding: 60px 0; }

/* 底部菜单 */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: 52px;
  display: flex;
  background: #fff;
  border-top: 1px solid #ebedf0;
  z-index: 20;
}
.tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #7d7e80;
  font-size: 11px;
  gap: 2px;
}
.tabbar-item.active { color: #1989fa; }
.tabbar-ico { font-size: 20px; line-height: 1; }

/* 表单/按钮 */
.form-card {
  margin: 12px 16px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}
.form-item {
  display: flex; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid #ebedf0;
}
.form-item:last-child { border-bottom: none; }
.form-item label { width: 72px; color: #323233; font-size: 14px; flex: none; }
.form-item input, .form-item select {
  flex: 1; border: none; outline: none; font-size: 14px;
  color: #323233; background: transparent;
}
.form-item .val { flex: 1; text-align: right; color: #646566; }
.btn-primary {
  margin: 16px; width: calc(100% - 32px); height: 44px;
  border: none; border-radius: 22px; background: #1989fa;
  color: #fff; font-size: 16px; cursor: pointer;
}
.btn-danger { background: #ee0a24; }
.section-title { padding: 16px 16px 8px; color: #969799; font-size: 13px; }

/* 报表 */
.report-row {
  display: flex; justify-content: space-between;
  padding: 12px 16px; background: #fff; border-bottom: 1px solid #f2f3f5;
}
.report-row .date { color: #646566; }
.report-row .val { color: #1989fa; font-weight: 600; }

/* ============ 后台主页 admin.html ============ */
.admin-layout { display: flex; min-height: 100vh; background: #f0f2f5; }
.admin-sider {
  width: 200px; flex: none; background: #001529; color: #fff;
  display: flex; flex-direction: column;
}
.admin-logo {
  height: 56px; line-height: 56px; text-align: center;
  font-size: 17px; font-weight: 600; color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.admin-menu { padding: 8px 0; flex: 1; }
.admin-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px; color: #b7bfca; cursor: pointer;
  font-size: 14px; transition: background 0.15s, color 0.15s;
}
.admin-menu-item:hover { color: #fff; background: rgba(255,255,255,0.06); }
.admin-menu-item.active { color: #fff; background: #1989fa; }
.admin-menu-ico { font-size: 16px; }
.admin-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.admin-header {
  height: 56px; flex: none; background: #fff;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.admin-header-title { font-size: 16px; font-weight: 600; color: #323233; }
.admin-user {
  position: relative; display: flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none;
}
.admin-user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: #1989fa; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.admin-user-name { font-size: 14px; color: #323233; }
.admin-user-menu {
  position: absolute; top: 44px; right: 0; z-index: 50;
  min-width: 180px; background: #fff; border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12); overflow: hidden;
}
.admin-user-menu-item { padding: 12px 16px; font-size: 13px; color: #646566; }
.admin-user-menu-item.info { border-bottom: 1px solid #f2f3f5; line-height: 1.8; }
.admin-user-menu-item.logout {
  color: #ee0a24; cursor: pointer; text-align: center; font-size: 14px;
}
.admin-user-menu-item.logout:hover { background: #fef0f0; }
.admin-content { flex: 1; padding: 20px; overflow: auto; }
.admin-panel { background: #fff; border-radius: 10px; padding: 24px; min-height: 300px; }
.admin-stat-grid { display: flex; gap: 16px; flex-wrap: wrap; }
.admin-stat-card {
  flex: 1; min-width: 160px; background: #f7f8fa;
  border-radius: 10px; padding: 18px 20px;
}
.admin-stat-label { font-size: 13px; color: #969799; }
.admin-stat-value { font-size: 22px; font-weight: 700; color: #323233; margin-top: 8px; }
.admin-tip { margin-top: 24px; color: #969799; font-size: 14px; }

/* ============ 群管理页 group-admin.html ============ */
.ga-layout { display: flex; flex-direction: column; height: 100vh; background: #f0f2f5; }
.ga-header {
  height: 52px; flex: none; background: #fff; position: relative;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.ga-header-left { display: flex; align-items: center; gap: 8px; }
.ga-header-left .van-icon { font-size: 18px; cursor: pointer; color: #646566; }
.ga-title { font-size: 16px; font-weight: 600; color: #323233; }
.ga-user { font-size: 14px; color: #646566; display: flex; align-items: center; gap: 12px; }
.ga-user-name { white-space: nowrap; }
.ga-logout {
  display: inline-flex; align-items: center; gap: 4px;
  height: 30px; padding: 0 14px;
  font-size: 13px; color: #646566;
  background: #f2f3f5; border: none; border-radius: 999px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background 0.2s, color 0.2s;
}
.ga-logout:hover { background: #ffece8; color: #ee0a24; }
.ga-logout:active { opacity: 0.85; }
.ga-logout-icon { font-size: 12px; }
.ga-body { flex: 1; display: flex; gap: 12px; padding: 12px; min-height: 0; }
.ga-col {
  background: #fff; border-radius: 14px;
  display: flex; flex-direction: column; min-height: 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.ga-col-list { flex: 0 0 220px; }
.ga-col-info { flex: 1.5 1 0; min-width: 0; }
.ga-col-msg { flex: 1 1 0; min-width: 0; }
.ga-col-head {
  height: 44px; line-height: 44px; padding: 0 16px; flex: none;
  font-size: 14px; font-weight: 600; color: #323233;
  border-bottom: 1px solid #f2f3f5;
  display: flex; align-items: center;
}
.ga-col-head span { color: #969799; font-weight: 400; }
.ga-col-head em { color: #969799; font-weight: 400; font-style: normal; }
/* 当前时间条: 操作区顶部居中, 蓝底白字醒目 */
.ga-op-timebar {
  flex: none;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 0 8px; padding: 9px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, #4a90ff, #1868dc);
  box-shadow: 0 2px 8px -2px rgba(24, 104, 220, 0.45);
}
.ga-op-timebar-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #7ff2b0; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18);
}
.ga-op-timebar-label {
  font-size: 13px; color: rgba(255, 255, 255, 0.82); letter-spacing: 2px;
}
.ga-op-timebar-time {
  font-size: 22px; font-weight: 800; color: #fff;
  font-variant-numeric: tabular-nums; letter-spacing: 1px;
}
.ga-scroll { flex: 1; overflow: auto; padding: 8px; min-height: 0; }
/* 中间列(操作): 空间不足时整列滚动, 保证底部历史记录可见 */
.ga-col-info .ga-scroll { overflow: auto; display: flex; flex-direction: column; }
.ga-info {
  flex: 1 0 auto; min-height: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.ga-info .ga-panel { margin-top: 0; flex: none; }
/* 历史记录面板占满剩余空间, 内容不足时不强撑 */
.ga-info .ga-history {
  flex: 1 1 auto; min-height: 200px;
  display: flex; flex-direction: column;
}
/* 群列表项 */
.ga-group-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px; cursor: pointer;
  transition: background 0.15s;
}
.ga-group-item:hover { background: #f7f8fa; }
.ga-group-item.active { background: #e8f3ff; }
.ga-group-avatar {
  width: 38px; height: 38px; border-radius: 8px; flex: none;
  background: #1989fa; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.ga-group-main { min-width: 0; flex: 1; }
.ga-group-name { font-size: 14px; color: #323233; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ga-group-notice { font-size: 12px; color: #969799; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
/* 群信息 */
.ga-info { padding: 4px; }
.ga-info-avatar {
  width: 56px; height: 56px; border-radius: 12px; margin: 0 auto 16px;
  background: #1989fa; color: #fff; font-size: 24px;
  display: flex; align-items: center; justify-content: center;
}
.ga-info-row { display: flex; padding: 10px 4px; border-bottom: 1px solid #f7f8fa; font-size: 13px; }
.ga-info-row label { width: 72px; flex: none; color: #969799; }
.ga-info-row span { flex: 1; color: #323233; word-break: break-all; }
.ga-info .van-button { margin-top: 16px; }
/* 卡片分区 */
.ga-panel {
  margin-top: 14px; padding: 14px;
  background: #fff; border: 1px solid #f2f3f5; border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}
.ga-panel:first-child { margin-top: 0; }
.ga-panel-title {
  font-size: 14px; font-weight: 600; color: #323233; margin-bottom: 12px;
}
/* ===== 操作面板: 第一行控制(开始/倒计时/结束/和), 第二行开奖(1 2 3 4 单 双) ===== */
.ga-op-board {
  padding: 14px;
  background: #fafbfc;
  border-color: #eef0f3;
  display: flex; flex-direction: column; gap: 24px;
}
.ga-op-row {
  display: grid; gap: 12px; align-items: stretch;
}
/* 控制行: 开始最宽(主操作), 倒计时次之, 结束/和等宽 */
.ga-op-control { grid-template-columns: 2.2fr 1.8fr 1fr 1fr; }
/* 开奖行: 1 2 3 4 单 双 六等分 */
.ga-op-numrow { grid-template-columns: repeat(6, 1fr); }
/* 结束/和: 次级按钮, 字号略小 */
.ga-text-md { font-size: 20px; letter-spacing: 1px; }
/* 长方形卡片 */
.ga-rect-card {
  height: 88px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 14px;
  color: #fff; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.35);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.18s ease, filter 0.18s ease;
}
.ga-rect-text { font-size: 24px; font-weight: 800; letter-spacing: 2px; line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); }
@media (hover: hover) {
  .ga-rect-card:not(.ga-card-countdown):hover {
    transform: translateY(-5px) scale(1.04);
    filter: brightness(1.1);
    box-shadow: 0 18px 30px -10px rgba(0, 0, 0, 0.45);
    z-index: 1;
  }
}
.ga-rect-card:not(.ga-card-countdown):active { transform: translateY(0) scale(0.96); filter: brightness(0.92); }
.ga-rect-card.disabled { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.3); pointer-events: none; }
/* 倒计时长方形卡片: 只读展示 */
.ga-card-countdown {
  cursor: default;
  background: linear-gradient(135deg, #4a9bff 0%, #1878f0 100%);
}
.ga-card-countdown.idle { background: linear-gradient(135deg, #cfd6df 0%, #b8c1cc 100%); box-shadow: none; }
.ga-rect-cd-num { font-size: 34px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); }
.ga-rect-cd-sub { font-size: 12px; opacity: 0.9; margin-top: 3px; }

/* ===== 卡片颜色主题(供长方形卡片复用) ===== */
/* 各色主题 */
.ga-card-start { background: linear-gradient(135deg, #23d07f 0%, #07b25a 100%); }
.ga-card-stop  { background: linear-gradient(135deg, #ff5c6c 0%, #ee0a24 100%); }
.ga-card-he    { background: linear-gradient(135deg, #ffb07a 0%, #ff8a3d 100%); }
.ga-card-num   { background: linear-gradient(135deg, #4a9bff 0%, #1878f0 100%); }
.ga-card-odd   { background: linear-gradient(135deg, #9a5cf0 0%, #7232dd 100%); }
.ga-card-even  { background: linear-gradient(135deg, #2fd982 0%, #07c160 100%); }
@media (hover: hover) {
  .ga-card-start:hover { box-shadow: 0 20px 34px -10px rgba(7, 178, 90, 0.6); }
  .ga-card-stop:hover  { box-shadow: 0 20px 34px -10px rgba(238, 10, 36, 0.55); }
  .ga-card-he:hover    { box-shadow: 0 20px 34px -10px rgba(255, 138, 61, 0.6); }
  .ga-card-num:hover   { box-shadow: 0 20px 34px -10px rgba(24, 120, 240, 0.6); }
  .ga-card-odd:hover   { box-shadow: 0 20px 34px -10px rgba(114, 50, 221, 0.6); }
  .ga-card-even:hover  { box-shadow: 0 20px 34px -10px rgba(7, 193, 96, 0.6); }
}
/* ===== 第三层: 历史记录(简洁精致) ===== */
.ga-history-head {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; margin-bottom: 14px;
}
.ga-history-title {
  font-size: 15px; font-weight: 700; color: #323233;
  position: relative; padding-left: 12px;
}
.ga-history-title::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 15px; border-radius: 2px; background: #1989fa;
}
.ga-history-query {
  display: flex; align-items: center; gap: 6px;
  background: #f7f8fa; border-radius: 10px; padding: 4px 6px;
}
/* 日期选择触发器: 触发 Vant Calendar */
.ga-date-field {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 12px; border-radius: 17px;
  background: #f2f3f5; color: #646566; cursor: pointer;
  font-size: 13px; font-variant-numeric: tabular-nums;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.ga-date-field:hover { background: #e8f3ff; color: #1989fa; }
.ga-date-field.active {
  background: #fff; color: #1989fa;
  box-shadow: inset 0 0 0 1.5px #1989fa;
}
.ga-date-icon { font-size: 16px; }
.ga-date-text { white-space: nowrap; }
.ga-date-arrow { font-size: 12px; opacity: 0.7; }
/* 历史记录: 固定尺寸正方形小格子, 自动换行 */
.ga-history-grid {
  flex: 1; min-height: 0; overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, 40px);
  grid-auto-rows: 40px;
  gap: 8px;
  align-content: flex-start;
}
.ga-history-cell {
  width: 40px; height: 40px;
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  color: #fff;
  font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: default;
  box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.25);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
/* 号码1-4各一色, 格子明显 */
/* 1: 蓝 */
.ga-history-cell.v-1 {
  background: #2f7cf6;
}
/* 2: 橙 */
.ga-history-cell.v-2 {
  background: #ff8f3c;
}
/* 3: 绿 */
.ga-history-cell.v-3 {
  background: #07c160;
}
/* 4: 紫 */
.ga-history-cell.v-4 {
  background: #9a5cf0;
}
/* 和(走水): 灰 */
.ga-history-cell.v-he {
  background: #c8c9cc;
}
@media (hover: hover) {
  .ga-history-cell:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 6px 14px -5px rgba(0, 0, 0, 0.35);
  }
}
.ga-history-empty {
  color: #969799; padding: 28px 0; text-align: center; font-size: 13px;
  border: 1px dashed #dcdfe6; border-radius: 12px; background: #fafbfc;
}
/* 群消息 */
.ga-msg-row { display: flex; margin-bottom: 14px; align-items: flex-start; }
.ga-msg-row.mine { flex-direction: row-reverse; }
/* 裁判指令/开奖消息: 圆形徽章, 靠左, 复用头像+内容区布局 */
.cmd-ball {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  color: #fff; font-size: 20px; font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1;
  box-shadow: 0 4px 12px -3px rgba(0, 0, 0, 0.35);
}
.cmd-start { background: linear-gradient(135deg, #2fd982 0%, #07c160 100%); font-size: 13px; letter-spacing: 1px; }
.cmd-end { background: linear-gradient(135deg, #ff8f3c 0%, #f7631f 100%); font-size: 13px; letter-spacing: 1px; }
.cmd-ball.v-1 { background: linear-gradient(135deg, #4a9bff 0%, #1878f0 100%); }
.cmd-ball.v-2 { background: linear-gradient(135deg, #ffa14a 0%, #ff7a1f 100%); }
.cmd-ball.v-3 { background: linear-gradient(135deg, #2fd982 0%, #07c160 100%); }
.cmd-ball.v-4 { background: linear-gradient(135deg, #b08cff 0%, #9a5cf0 100%); }
.cmd-ball.v-he { background: linear-gradient(135deg, #c8c9cc 0%, #969799 100%); }
.ga-msg-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: #1989fa; color: #fff; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ga-msg-avatar-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.ga-msg-content { max-width: 70%; margin: 0 10px; min-width: 0; }
/* 含汇总表格的消息内容放宽宽度, 避免表格被挤压换行 */
.ga-msg-content:has(.ga-summary) { max-width: 92%; }
.ga-msg-meta { display: flex; gap: 6px; margin-bottom: 4px; align-items: baseline; }
.ga-msg-row.mine .ga-msg-meta { flex-direction: row-reverse; }
.ga-msg-name { font-size: 12px; color: #969799; }
.ga-msg-time { font-size: 11px; color: #c8c9cc; }
.ga-msg-bubble {
  padding: 8px 12px; border-radius: 8px; background: #f2f3f5;
  color: #323233; word-break: break-all; line-height: 1.5;
}
/* 汇总气泡: 允许内部表格横向滚动, 不撑破布局 */
.ga-msg-bubble:has(.ga-summary) { padding: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ga-msg-row.mine .ga-msg-bubble { background: #1989fa; color: #fff; }
/* 汇总消息表格: 轻量卡片式, 无生硬边框, 低调协调, 红绿口径与报表一致(中绿亏红) */
.ga-summary {
  border-collapse: separate; border-spacing: 0; width: 100%; min-width: 240px;
  font-size: 13px; color: #323233; background: #fff; border-radius: 10px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.ga-summary caption {
  caption-side: top; font-weight: 700; font-size: 14px; letter-spacing: 1px;
  padding: 11px 12px 9px; color: #323233; text-align: center;
}
.ga-summary th, .ga-summary td {
  border: none; padding: 9px 10px; text-align: center;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
/* 内容列(下注内容/下注积分)左对齐, 允许换行避免撑破 */
.ga-summary th:nth-child(2), .ga-summary td:nth-child(2) {
  text-align: left; white-space: normal; word-break: break-all;
}
/* 昵称列适当收窄并省略 */
.ga-summary td:first-child {
  max-width: 96px; overflow: hidden; text-overflow: ellipsis; color: #646566;
}
/* 表头: 浅灰底弱化 + 细分隔线 */
.ga-summary thead th {
  background: #f7f8fa; font-weight: 600; color: #646566; font-size: 12px;
  border-bottom: 1px solid #ebedf0;
}
/* 行间细分隔线(比边框更轻盈), 斑马纹极淡 */
.ga-summary tbody td { border-bottom: 1px solid #f2f3f5; }
.ga-summary tbody tr:last-child td { border-bottom: none; }
.ga-summary tbody tr:nth-child(even) td { background: #fafbfc; }
/* 合计行: 浅底 + 加粗, 数值颜色沿用红绿口径 */
.ga-summary tfoot td {
  background: #f7f8fa; font-weight: 700; color: #323233;
  border-top: 1px solid #ebedf0;
}
.ga-summary tfoot td:first-child { color: #969799; }
/* 积分变动列着色: 中(绿)/亏(红)/和(灰)/无(浅灰), 与报表口径一致 */
.ga-summary td.is-win { color: #07c160; font-weight: 600; }
.ga-summary td.is-lose { color: #ee0a24; font-weight: 600; }
.ga-summary td.is-draw { color: #969799; }
.ga-summary td.is-none { color: #c8c9cc; }
/* 汇总气泡内表格背景保持白色, 覆盖 mine 蓝底 */
.ga-msg-row.mine .ga-msg-bubble .ga-summary { color: #323233; }
.ga-msg-row.mine .ga-msg-bubble:has(.ga-summary) { background: #f2f3f5; }
/* chat.html: 我发的汇总消息气泡同样保持浅底 */
.msg-row.mine .msg-bubble .ga-summary { color: #323233; }
.msg-row.mine .msg-bubble:has(.ga-summary) { background: #f2f3f5; }
/* 消息操作: 撤回 */
.ga-msg-ops { margin-top: 4px; }
.ga-msg-row.mine .ga-msg-ops { text-align: right; }
.ga-msg-revoke {
  font-size: 12px; color: #969799; cursor: pointer;
  -webkit-user-select: none; user-select: none;
}
.ga-msg-revoke:hover { color: #ee0a24; }
.ga-msg-revoke:active { opacity: 0.6; }
/* chat.html 消息撤回 */
.msg-actions { margin-top: 4px; }
.msg-row.mine .msg-actions { text-align: right; }
.msg-revoke {
  font-size: 12px; color: #969799; cursor: pointer;
  -webkit-user-select: none; user-select: none;
}
.msg-revoke:hover { color: #ee0a24; }
.msg-revoke:active { opacity: 0.6; }
/* 发送栏 */
.ga-send-bar {
  flex: none; display: flex; gap: 8px; align-items: center;
  padding: 10px 12px; border-top: 1px solid #f2f3f5;
}
.ga-send-input {
  flex: 1; height: 36px; border: 1px solid #ebedf0; border-radius: 8px;
  padding: 0 12px; font-size: 14px; outline: none; color: #323233;
}
.ga-send-input:focus { border-color: #1989fa; }
/* 窄屏兼容: 三列改为上下堆叠, 各自可滚动 */
@media (max-width: 720px) {
  .ga-body { flex-direction: column; overflow: auto; }
  .ga-col-list, .ga-col-info, .ga-col-msg { flex: none; }
  .ga-col-list { max-height: 30vh; }
  .ga-col-info { flex: none; }
  .ga-col-msg { min-height: 50vh; }
}

/* 规则管理页 */
.ra-layout { min-height: 100vh; background: #f7f8fa; }
.ra-header {
  display: flex; align-items: center; justify-content: space-between;
  height: 54px; padding: 0 16px; background: #fff; border-bottom: 1px solid #ebedf0;
  position: sticky; top: 0; z-index: 10;
}
.ra-header-left { display: flex; align-items: center; gap: 10px; }
.ra-header-left .van-icon { font-size: 20px; cursor: pointer; }
.ra-title { font-size: 16px; font-weight: 600; color: #323233; }
.ra-body { padding: 16px; overflow-x: auto; }
.ra-table {
  width: 100%; min-width: 640px; border-collapse: collapse; background: #fff;
  border-radius: 8px; overflow: hidden; font-size: 14px; color: #323233;
}
.ra-table th, .ra-table td {
  border: 1px solid #ebedf0; padding: 10px 12px; text-align: left; word-break: break-all;
}
.ra-table thead th { background: #f7f8fa; font-weight: 600; white-space: nowrap; }
.ra-empty { text-align: center; color: #969799; padding: 24px 0; }
.ra-ops { white-space: nowrap; }
.ra-op { cursor: pointer; font-size: 13px; user-select: none; }
.ra-op.edit { color: #1989fa; margin-right: 12px; }
.ra-op.del { color: #ee0a24; }
.ra-op:active { opacity: 0.6; }
.ra-form { padding: 12px 0; }

/* 我的页面 */
.mine-page { padding-top: 12px; }
.mine-hero {
  margin: 0 16px 16px;
  display: flex; align-items: center; gap: 14px;
  padding: 20px 18px; border-radius: 16px;
  background: linear-gradient(135deg, #4aa3ff 0%, #1989fa 100%);
  box-shadow: 0 6px 16px rgba(25,137,250,0.28);
  color: #fff;
}
.mine-avatar {
  flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 700;
}
.mine-hero-info { flex: 1 1 auto; min-width: 0; }
.mine-nickname {
  font-size: 19px; font-weight: 700; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mine-account { font-size: 13px; opacity: 0.85; margin-top: 4px; }

/* 余额卡片(位于头卡与设置列表之间) */
.mine-balance-card {
  margin: 0 16px 16px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-radius: 16px; background: #fff;
  box-shadow: 0 2px 10px rgba(100,101,102,0.08);
}
.mine-balance-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mine-coin-icon { display: block; flex: 0 0 auto; }
.mine-balance-text { min-width: 0; }
.mine-balance-label { font-size: 13px; color: #969799; }
.mine-balance-num { font-size: 24px; font-weight: 700; color: #f5a623; line-height: 1.2; margin-top: 2px; }
.mine-balance-refresh {
  flex: 0 0 auto; font-size: 20px; color: #1989fa; cursor: pointer;
  padding: 6px;
}
.mine-balance-refresh.spinning { animation: mine-spin 0.6s linear infinite; }
/* 在线人数卡片(余额下方, 官方/代理可见) */
.mine-online-card {
  margin: 0 16px 16px;
  padding: 16px 18px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(100,101,102,0.08);
}
.mine-online-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.mine-online-title {
  font-size: 15px; font-weight: 700; color: #323233;
  position: relative; padding-left: 12px;
}
.mine-online-title::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 15px; border-radius: 2px; background: #1989fa;
}
.mine-online-refresh {
  font-size: 18px; color: #1989fa; cursor: pointer; padding: 4px;
  -webkit-tap-highlight-color: transparent;
}
.mine-online-refresh.spinning { animation: mine-spin 0.6s linear infinite; }
.mine-online-total {
  display: flex; align-items: baseline; justify-content: center; gap: 6px;
  margin-bottom: 12px; padding: 10px 12px; border-radius: 12px;
  background: linear-gradient(135deg, #ecf5ff 0%, #f5faff 100%);
  color: #646566; font-size: 13px;
}
.mine-online-total em {
  font-size: 24px; font-weight: 800; color: #1989fa;
  font-variant-numeric: tabular-nums; font-style: normal; line-height: 1;
}
.mine-online-list { display: flex; flex-direction: column; gap: 10px; }
.mine-online-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-radius: 12px; background: #f7f8fa;
}
.mine-online-name { font-size: 14px; color: #323233; font-weight: 600; }
.mine-online-num {
  display: inline-flex; align-items: center;
  font-size: 22px; font-weight: 800; color: #1989fa;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.mine-online-num .dot {
  width: 8px; height: 8px; border-radius: 50%; background: #07c160;
  margin-right: 6px; box-shadow: 0 0 0 3px rgba(7, 193, 96, 0.15);
}
.mine-online-num .unit { font-size: 12px; font-weight: 500; color: #969799; margin-left: 4px; }
.mine-online-empty { color: #969799; text-align: center; padding: 16px 0; font-size: 13px; }
.mine-group { margin-bottom: 24px; }
.mine-logout { margin: 28px 16px; }
.mine-logout-btn {
  width: 100%; height: 44px; border: none; border-radius: 22px;
  background: #fdf0ef; color: #ee0a24; font-size: 15px; font-weight: 500;
}
.mine-logout-btn:active { opacity: 0.8; }

/* 我的 - 底部编辑面板 */
.ms-sheet { padding: 0 0 4px; }
.ms-sheet-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 12px; border-bottom: 1px solid #f2f3f5;
}
.ms-sheet-title { font-size: 16px; font-weight: 600; color: #323233; }
.ms-sheet-cancel { font-size: 15px; color: #969799; }
.ms-sheet-confirm { font-size: 15px; font-weight: 600; color: #1989fa; }
.ms-sheet-cancel, .ms-sheet-confirm { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ms-sheet-body { padding: 20px 18px 8px; }
.ms-input-wrap {
  display: flex; align-items: center; gap: 10px;
  background: #f7f8fa; border-radius: 12px;
  padding: 0 14px; height: 50px; margin-bottom: 14px;
}
.ms-input-icon { font-size: 18px; color: #969799; flex: 0 0 auto; }
.ms-input {
  flex: 1 1 auto; min-width: 0; border: none; outline: none; background: transparent;
  font-size: 16px; color: #323233; height: 100%;
  -webkit-appearance: none; appearance: none;
}
.ms-input-eye { font-size: 18px; color: #969799; flex: 0 0 auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* 群类型分段选择: 两个互斥按钮, 不依赖原生 select 浮层, 样式可控不错乱 */
.ms-seg-wrap { padding: 6px 8px 6px 14px; }
.ms-seg {
  flex: 1 1 auto; min-width: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
}
.ms-seg-btn {
  height: 38px; border: none; border-radius: 9px; cursor: pointer;
  font-size: 14px; color: #646566; background: #fff; font-family: inherit;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  -webkit-tap-highlight-color: transparent; -webkit-appearance: none; appearance: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.ms-seg-btn.active {
  background: #1989fa; color: #fff; font-weight: 600;
  box-shadow: 0 2px 6px rgba(25,137,250,0.3);
}
.ms-tip { margin: 4px 4px 12px; font-size: 12px; color: #c8c9cc; }
.ms-result-row {
  display: flex; align-items: center; gap: 12px;
  background: #f7f8fa; border-radius: 12px;
  padding: 14px; margin-bottom: 12px;
}
.ms-result-label { flex: 0 0 40px; font-size: 14px; color: #969799; }
.ms-result-val { flex: 1 1 auto; font-size: 17px; font-weight: 600; color: #323233; letter-spacing: 1px; word-break: break-all; }
/* 积分概览: 当前积分/我的积分 一行两个卡片 */
.ms-balance-row {
  display: flex; gap: 10px; margin-bottom: 12px;
}
.ms-balance-col {
  flex: 1 1 0; min-width: 0;
  background: #f7f8fa; border-radius: 12px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.ms-balance-label { font-size: 13px; color: #969799; }
.ms-balance-val { font-size: 20px; font-weight: 700; color: #323233; letter-spacing: 1px; word-break: break-all; }
.mine-dialog-body { padding: 8px 0; }

/* 报表表格 */
.rp-table-wrap { margin: 0 16px 24px; overflow-x: auto; }
.rp-table {
  width: 100%; border-collapse: collapse; background: #fff;
  border-radius: 8px; overflow: hidden; font-size: 14px; color: #323233;
}
.rp-table th, .rp-table td {
  border: 1px solid #ebedf0; padding: 10px 12px; text-align: left; word-break: break-all;
}
.rp-table thead th { background: #f7f8fa; font-weight: 600; white-space: nowrap; }
.rp-table td:first-child { white-space: nowrap; }
.rp-table td:last-child, .rp-table th:last-child { text-align: center; white-space: nowrap; }
.rp-table td.rp-ops { white-space: nowrap; }
.rp-table td.rp-ops .van-button { margin: 2px; }

/* 消息记录: 卡片列表(不影响积分表格) */
.msg-list { padding: 4px 12px 8px; display: flex; flex-direction: column; gap: 10px; }
.msg-card {
  background: #fff; border-radius: 12px; padding: 12px 14px;
  box-shadow: 0 2px 10px rgba(100,101,102,0.06);
  border-left: 3px solid #1989fa;
}
.msg-card-body { display: flex; align-items: baseline; gap: 8px; }
.msg-seq {
  flex: 0 0 auto; font-size: 12px; font-weight: 700; color: #1989fa;
  background: #ecf5ff; border-radius: 6px; padding: 1px 7px;
}
.msg-content {
  flex: 1 1 auto; min-width: 0; font-size: 15px; color: #323233;
  line-height: 1.5; word-break: break-word;
}
.msg-time {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; color: #969799; margin-top: 8px;
}

/* 账号: 卡片列表(不影响消息/积分表格) */
.acc-list { padding: 4px 12px 8px; display: flex; flex-direction: column; gap: 12px; }
.acc-card {
  background: #fff; border-radius: 14px; padding: 14px 16px;
  box-shadow: 0 2px 10px rgba(100,101,102,0.08);
}
.acc-card-head { display: flex; align-items: center; gap: 12px; }
.acc-avatar {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, #4aa3ff 0%, #1989fa 100%); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700;
}
.acc-info { flex: 1 1 auto; min-width: 0; }
.acc-name {
  font-size: 15px; font-weight: 600; color: #323233;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acc-time { font-size: 12px; color: #969799; margin-top: 3px; }
.acc-score { flex: 0 0 auto; text-align: right; }
.acc-score-num { font-size: 20px; font-weight: 700; color: #1989fa; line-height: 1.1; }
.acc-score-label { font-size: 11px; color: #969799; margin-top: 2px; }
.acc-card-ops {
  display: flex; gap: 10px; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid #f2f3f5;
}
.acc-card-ops .van-button { flex: 1 1 0; }

/* mine 余额刷新旋转动画 */
@keyframes mine-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ============ 报表(历史记录) ============ */
/* 总览卡片: 深蓝渐变 + 玻璃质感统计, 净值为主视觉 */
.rp-hero {
  margin: 12px 16px;
  border-radius: 16px;
  padding: 16px;
  color: #fff;
  background: linear-gradient(135deg, #2f6df6 0%, #5a5ff0 100%);
  box-shadow: 0 8px 24px rgba(47, 109, 246, 0.28);
}
.rp-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.rp-hero-user {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.rp-hero-type {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.2);
}
.rp-hero-name {
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rp-hero-date {
  flex: 0 0 auto;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
}
.rp-hero-net {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.rp-hero-net-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  padding-bottom: 3px;
}
.rp-hero-net-label .van-icon { font-size: 15px; }
.rp-hero-net-val {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rp-hero-net-val.pos { color: #7bf1a8; }
.rp-hero-net-val.neg { color: #ffa3a3; }
.rp-hero-stats {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.rp-hero-stat {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 4px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.14);
}
.rp-hero-stat-icon { font-size: 17px; }
.rp-hero-stat-num {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.rp-hero-stat.is-win .rp-hero-stat-num   { color: #b7f5c9; }
.rp-hero-stat.is-loss .rp-hero-stat-num  { color: #ffc4c4; }
.rp-hero-stat.is-net .rp-hero-stat-num   { color: #c9b8ff; }

.rp-user-strip {
  display: flex;
  gap: 8px;
  margin: 0 16px;
  padding-bottom: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.rp-user-strip::-webkit-scrollbar { display: none; }
.rp-user-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid #ebedf0;
  border-radius: 18px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.rp-user-chip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c8c9cc;
  flex: none;
}
.rp-user-chip.lv-0::before { background: #1989fa; }
.rp-user-chip.lv-1::before { background: #ff976a; }
.rp-user-chip.lv-2::before { background: #c8c9cc; }
.rp-user-chip.active {
  background: #1989fa;
  border-color: #1989fa;
}
.rp-user-chip.active::before { background: #fff; }
.rp-user-chip.active .rp-user-chip-name { color: #fff; }
.rp-user-chip.active .rp-user-chip-tag { background: rgba(255,255,255,0.25); color: #fff; }
.rp-user-chip-name {
  font-size: 14px;
  color: #323233;
}
.rp-user-chip-tag {
  flex: none;
  font-size: 11px;
  color: #969799;
  background: #f2f3f5;
  border-radius: 4px;
  padding: 1px 6px;
}

.rp-search { margin: 0 16px; }
.rp-search .van-search { padding: 0; }
.rp-user-chip.expanded {
  background: #ecf5ff;
  border-color: #1989fa;
}
.rp-user-chip.expanded::before { background: #1989fa; }
.rp-user-chip.expanded .rp-user-chip-name { color: #1989fa; }
.rp-user-chip.expanded .rp-user-chip-tag { background: #e8f3ff; color: #1989fa; }
.rp-members {
  margin: 0 16px 12px;
  padding: 10px 12px;
  background: #f7f8fa;
  border-radius: 12px;
}
.rp-members .rp-user-strip { margin: 0; padding-bottom: 0; }

.rp-rec-table { min-width: 0; width: 100%; table-layout: fixed; font-size: 13px; }
.rp-rec-table th, .rp-rec-table td { padding: 8px 6px; word-break: break-all; white-space: normal; vertical-align: top; overflow: hidden; }
.rp-rec-table col.rp-col-date { width: 92px; }
.rp-rec-table col.rp-col-content { width: 60px; }
.rp-rec-table col.rp-col-score { width: 52px; }
.rp-content-cell { white-space: nowrap; word-break: keep-all; overflow-wrap: normal; }
.rp-content-cell .rp-content-main, .rp-content-cell .rp-content-sub { display: block; line-height: 1.35; }
.rp-content-cell .rp-content-sub { color: #969799; }
.rp-reason-cell { word-break: break-all; }
.rp-rec-table td.rp-date-cell, .rp-rec-table th:first-child { white-space: nowrap; word-break: keep-all; overflow-wrap: normal; }
.rp-date-cell .rp-date-d, .rp-date-cell .rp-date-t { display: block; line-height: 1.35; }
.rp-date-cell .rp-date-t { color: #969799; }
.rp-rec-table td:last-child, .rp-rec-table th:last-child { white-space: nowrap; text-align: right; }
.rp-table td.pos { color: #07c160; font-weight: 600; }
.rp-table td.neg { color: #ee0a24; font-weight: 600; }

/* 会员明细行 + 折叠 */
.rp-mlist { margin: 0 16px 16px; }
.rp-mrow {
  background: #fff;
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.rp-mrow-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rp-mrow-avatar {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1989fa, #5a5ff0);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
}
.rp-mrow-main {
  flex: 1 1 auto;
  min-width: 0;
}
.rp-mrow-name {
  font-weight: 600;
  font-size: 14px;
  color: #323233;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 下注/中/亏/净值: 四等分浅色块, 图标 + 数值, 大数字也不会撑破布局 */
.rp-mrow-stats {
  display: flex;
  gap: 6px;
}
.rp-ms {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 4px;
  border-radius: 10px;
  background: #f7f8fa;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
}
.rp-ms .van-icon { font-size: 13px; }
.rp-ms.is-bet   { color: #1989fa; }
.rp-ms.is-win   { color: #07c160; }
.rp-ms.is-loss  { color: #ee0a24; }
.rp-ms.is-net   { color: #7232dd; }
.rp-ms.is-net .pos { color: #07c160; }
.rp-ms.is-net .neg { color: #ee0a24; }
.rp-mrow-toggle {
  flex: 0 0 auto;
  font-size: 18px;
  color: #969799;
  padding: 4px;
  cursor: pointer;
}
.rp-mrow-detail {
  border-top: 1px solid #f2f3f5;
  background: #fafafa;
  padding: 6px 0;
}
.rp-mrow-detail .rp-table-wrap { margin: 0 12px 8px; overflow-x: hidden; }

.rp-selfbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 4px 16px 12px;
  padding: 8px;
  background: #f7f8fa;
  border-radius: 10px;
  color: #1989fa;
  font-size: 13px;
  cursor: pointer;
}

.rp-group-list {
  margin: 0 16px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}
.rp-group-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #f2f3f5;
}
.rp-group-row:last-child { border-bottom: none; }
.rp-group-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}
.rp-group-name {
  font-size: 15px;
  color: #323233;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rp-group-sub {
  flex: none;
  margin-left: 8px;
  font-size: 11px;
  color: #969799;
  background: #f2f3f5;
  border-radius: 4px;
  padding: 1px 6px;
}

/* 数据分析: 群列表卡片 */
.rp-group-title { display: flex; align-items: center; justify-content: space-between; }
.rp-group-card {
  margin: 0 16px 12px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.rp-group-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 12px 4px;
}
.rp-group-head .rp-group-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
}
.rp-group-head .rp-group-sub { margin-left: 0; }
.rp-group-refresh { flex: 0 0 auto; }
.rp-group-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 0 12px 8px;
  font-size: 12px;
  color: #969799;
}
.rp-group-card .rp-table-wrap { margin: 0; }

/* ============ 头像图片(有图用图, 无图兜底字母) ============ */
.mine-avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.admin-user-avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.acc-cell-avatar {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  margin-right: 8px; object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center;
  background: #eef0f3; color: #646566; font-size: 14px; font-weight: 600;
}
.acc-title { display: inline-block; vertical-align: middle; }
.acc-copy-btn {
  display: inline-block; font-size: 11px; color: #1989fa; line-height: 1;
  padding: 3px 8px; margin-left: 8px;
  background: #eef5ff; border-radius: 4px;
  vertical-align: middle; white-space: nowrap; cursor: pointer;
}