/* 手势层：命中区包住细条，bar 的定位由镜像的 --van-slider-* 变量控制，不覆写外观。 */
.h5-slider-hit {
  position: relative;
  height: 24px;
  touch-action: none;
  cursor: pointer;
}
.h5-slider-hit .van-slider {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
}
.h5-slider-hit .slider-track {
  position: relative;
  width: 100%;
  height: 100%;
}
.h5-slider-hit .van-slider__button-wrapper {
  transform: translate(-50%, -50%);
  cursor: grab;
}
.h5-slider-hit .van-slider__button-wrapper:active {
  cursor: grabbing;
}
.h5-slider-hit .van-slider__button {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
/* 键盘焦点环（镜像 CSS 没给滑块按钮焦点态） */
.h5-slider-hit .van-slider__button-wrapper:focus-visible {
  outline: 2px solid var(--van-slider-active-background, #1989fa);
  outline-offset: 2px;
  border-radius: 50%;
}

/* 合买页「含追号」提示（本仓库新增，原站没有这条文案）。
   从追号页「发起合买」进来时，认购区间与份数都按整段追号的合计算，用户看不见这一点
   就会误判成「只买一期」，所以补一行说明。只加一个自己的 class，不改被镜像的任何规则；
   颜色跟各主题的次级文字色走，金主题用它的 muted 色 #5b6b8c。 */
.create-together-view .content-chase-tip {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: #5b6b8c;
}
.create-together-view--theme4 .content-chase-tip {
  color: #4b5563;
}
.create-together-view--casino .content-chase-tip {
  color: rgba(233, 243, 255, 0.82);
}

/* ── 合买创建页（D127 重排后）────────────────────────────────────────────
   结构：一张白卡装下全部认购设置（头部概要 → 自购份数步进组 → 拖动条 →
   全额保底开关 → 追号提示），底部工具栏只剩「认购/金额 + 确认按钮」。
   D215：保底份数那一列已删（YG），认购卡里只剩「自购份数」一个输入。
   原来的顶部「我要认购 ___ 元」输入框已删：它和「自购份数」写的是同一个状态
   （buyAmount），两处同时改互相打架；后端契约只有一份份数，界面只给一份输入。
   底部的「单/注」两列也删了 —— 上游契约里没有对应字段，显示的是无来源的数。
   外观沿用 2203.css 白卡语言（95% 宽、8px 圆角、drop-shadow），滑块本体用
   chunk-vendors.css 的 .van-slider 外观（bar + 圆钮），只在 H5Slider.vue 里
   补了手势命中区。三个主题各给一份配色，与既有变体的卡片配色一致。 */
.create-together-view .content-guarantee {
  margin: 12px auto;
  width: 95%;
  padding: 14px 14px 12px;
  background-color: #fff;
  border-radius: 10px;
  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.2));
}
.create-together-view .content-guarantee .guarantee-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.create-together-view .content-guarantee .guarantee-title {
  font-size: 15px;
  font-weight: 700;
}
.create-together-view .content-guarantee .guarantee-total {
  font-size: 12px;
  color: #5b6b8c;
}
.create-together-view .content-guarantee .guarantee-row {
  display: flex;
  gap: 10px;
}
.create-together-view .content-guarantee .guarantee-col {
  flex: 1;
  min-width: 0;
}
.create-together-view .content-guarantee .guarantee-label {
  font-size: 13px;
  margin-bottom: 6px;
}
/* 输入框升级为「− 输入 +」步进组：44px 触达高度（iOS 最小推荐），边框聚焦态，
   数字等宽对齐。D215 后卡里只剩自购份数这一个输入，所以步进组独占整行宽度。 */
.create-together-view .content-guarantee .guarantee-stepper {
  display: flex;
  align-items: stretch;
  height: 44px;
  border: 1px solid #d8dfeb;
  border-radius: 10px;
  overflow: hidden;
  background-color: linen;
}
.create-together-view .content-guarantee .guarantee-stepper:focus-within {
  border-color: #e85a5f;
}
.create-together-view .content-guarantee .stepper-btn {
  width: 38px;
  flex: none;
  border: none;
  background: rgba(0, 0, 0, 0.045);
  color: #5b6b8c;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.create-together-view .content-guarantee .stepper-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.create-together-view .content-guarantee .stepper-btn:active:not(:disabled) {
  background: rgba(0, 0, 0, 0.09);
}
.create-together-view .content-guarantee .guarantee-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: transparent;
  color: inherit;
}
.create-together-view .content-guarantee .guarantee-input::-webkit-outer-spin-button,
.create-together-view .content-guarantee .guarantee-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.create-together-view .content-guarantee .guarantee-hint {
  margin-top: 5px;
  font-size: 11px;
  color: #5b6b8c;
  text-align: center;
}
/* 滑块区：标签行 15px 读数醒目，命中区加高到 32px 好手指推，刻度两端对齐。 */
.create-together-view .content-guarantee .slider-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 14px;
}
.create-together-view .content-guarantee .slider-label {
  font-size: 13px;
}
.create-together-view .content-guarantee .slider-value {
  font-size: 16px;
  font-weight: 700;
  color: red;
}
.create-together-view .content-guarantee .slider-body {
  margin-top: 2px;
}
.create-together-view .content-guarantee .slider-body .h5-slider-hit {
  height: 32px;
}
.create-together-view .content-guarantee .slider-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  font-size: 11px;
  color: #5b6b8c;
  font-variant-numeric: tabular-nums;
}
.create-together-view .content-guarantee .guarantee-switch {
  display: flex;
  align-items: center;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed #e3e8f0;
  font-size: 14px;
}
.create-together-view .content-guarantee .guarantee-switch .guarantee-sub {
  margin-left: 6px;
  font-size: 11px;
  color: #5b6b8c;
}
/* 「确认合买」这条操作栏放回页面流里（YG 要求：不要吸底，放在页面上）。
   原来镜像是 `position: fixed; bottom: 0` —— 它永久盖住表单最后两组（全额保底开关与
   追号提示），而且 iOS 键盘弹起时属于「布局视图」的 fixed 底栏会被整块搬走。
   落回文档流后它跟着内容走、滚到底才出现，形状按站内卡片统一成 14px 圆角 + 左右边距。
   注意：主题变体（--jinlong / --casino）给这条写的背景与上投影特异性更高，
   所以阴影必须 !important，否则还会留着那条「吸底」的上投影。 */
.create-together-view .create-together-view-bottom {
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  margin: 12px 12px 24px !important;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(18, 58, 122, 0.1) !important;
}
/* 底部工具栏：删掉「单/注」后中间空出来，认购份数左对齐、金额居右、按钮加宽到
   128px / 40px（原 32px 高偏挤，主行动按钮给足触达），数字等宽防跳动。 */
.create-together-view .create-together-view-bottom .view-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.create-together-view .create-together-view-bottom .bottom-shares {
  display: flex;
  align-items: baseline;
}
.create-together-view .create-together-view-bottom .bottom-count-value {
  font-variant-numeric: tabular-nums;
}
.create-together-view .create-together-view-bottom .bottom-amount {
  display: flex;
  align-items: baseline;
  margin-left: auto;
  margin-right: 12px;
}
.create-together-view .create-together-view-bottom .bottom-amount .bottom-count-value--amount {
  font-variant-numeric: tabular-nums;
}
.create-together-view .create-together-view-bottom .bottom-bet .toBetBtn {
  height: 40px;
  min-width: 128px;
  padding: 0 18px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 20px;
}
.create-together-view--theme4 .content-guarantee .slider-value {
  color: #e03d3e;
}
.create-together-view--theme4 .content-guarantee .guarantee-total,
.create-together-view--theme4 .content-guarantee .guarantee-hint,
.create-together-view--theme4 .content-guarantee .slider-ticks,
.create-together-view--theme4 .content-guarantee .guarantee-switch .guarantee-sub {
  color: #4b5563;
}
.create-together-view--theme4 .content-guarantee .guarantee-switch {
  border-top-color: #e5e7eb;
}
.create-together-view--casino .content-guarantee {
  background: linear-gradient(180deg, #101c3bfa, #0b1123f5);
  border: none;
  box-shadow: 0 12px 24px #0508182e;
  filter: none;
  color: #edf8ff;
}
.create-together-view--casino .content-guarantee .guarantee-stepper {
  background: #54e3ff14;
  border-color: #54e3ff29;
}
.create-together-view--casino .content-guarantee .stepper-btn {
  background: rgba(255, 255, 255, 0.06);
  color: #e9f3ffd1;
}
.create-together-view--casino .content-guarantee .slider-value {
  color: #f8d77d;
}
.create-together-view--casino .content-guarantee .guarantee-total,
.create-together-view--casino .content-guarantee .guarantee-hint,
.create-together-view--casino .content-guarantee .slider-ticks,
.create-together-view--casino .content-guarantee .guarantee-switch .guarantee-sub {
  color: #e9f3ff99;
}
.create-together-view--casino .content-guarantee .guarantee-switch {
  border-top-color: #54e3ff1f;
}
.create-together-view--casino .content-guarantee .guarantee-input {
  color: #f8d77d;
}
.create-together-view--casino[data-v-18c48759] .van-checkbox__icon--checked .van-badge__wrapper {
  background: linear-gradient(180deg, #ffe39b, #cf9930);
  color: #24143b;
}
.create-together-view--jinlong .content-guarantee {
  background: linear-gradient(180deg, #fff, #eef3fb);
  border: 1px solid #c99a2e66;
  box-shadow: 0 12px 24px #123a7a1a;
  filter: none;
  color: #123a7a;
}
.create-together-view--jinlong .content-guarantee .guarantee-stepper {
  background: #e8c15a24;
  border-color: #c99a2e66;
}
.create-together-view--jinlong .content-guarantee .stepper-btn {
  background: rgba(201, 154, 46, 0.1);
  color: #b8860b;
}
.create-together-view--jinlong .content-guarantee .guarantee-stepper:focus-within {
  border-color: #c99a2e;
}
.create-together-view--jinlong .content-guarantee .slider-value {
  color: #b8860b;
}
.create-together-view--jinlong .content-guarantee .guarantee-total,
.create-together-view--jinlong .content-guarantee .guarantee-hint,
.create-together-view--jinlong .content-guarantee .slider-ticks,
.create-together-view--jinlong .content-guarantee .guarantee-switch .guarantee-sub {
  color: #5b6b8c;
}
.create-together-view--jinlong .content-guarantee .guarantee-switch {
  border-top-color: #c99a2e4d;
}
.create-together-view--jinlong .content-guarantee .guarantee-input {
  color: #b8860b;
}
.create-together-view--jinlong[data-v-18c48759] .van-checkbox__icon--checked .van-badge__wrapper {
  background: linear-gradient(135deg, #e8c15a, #c99a2e 58%, #b8860b);
  color: #123a7a;
}

/* ── 合买大厅 tab 切换时「卡片变短/下方空白」的修复 ─────────────────────────
   三层根因（全部实测量化）：
   1. 1947.css 的 .together-list{height: calc(100vh - 182px)} —— 原站
      TogetherCenterView 的自身布局（那页头部总高 182px），列表恒定视口高。
      搬进投注页后头部更高，571px 的固定高让卡少的 tab（「待开奖」1 张卡
      116px）下方拖出 ~455px 空白。改 height:auto + max-height：卡少塌到
      内容高，卡多时仍面板内滚动（overflow-y:auto 靠 max-height 约束）。
   2. swipe-item 类名静态拼的，缺 vant 动态挂的
      .van-tab__panel-wrapper--inactive{height:0}（模板按 ti !== tgTab 补绑）。
   3. 外层容器 class 把 .van-swipe 与 .van-tabs__track 叠在一起 —— 后者的
      height:100% + 前者无高，让轨道高度被锚在固定值上，三个 tab 永远同高。
      去掉叠类（vant 原版结构外层就是 .van-swipe），高度全部交给本块覆盖，
      切换时轨道 = 激活面板的内容高。 */
/* 特异性说明：1947 的原规则是 .together .together-list[data-v-5cee6088]（0,3,0），
   且镜像 CSS 由 useRouteCss **运行时 append 到 head 尾** —— 永远排在 app 打包样式
   之后，同特异性也是它赢（inline 探针实测：list.style.height='auto' 才塌得下去）。
   所以这里的 height 覆盖必须 !important（先例：.betting-theme-sheet 的 max-height）。 */
.betting-view .create-together-hall .van-swipe {
  height: auto !important;
}
.betting-view .create-together-hall .van-swipe__track {
  height: auto !important;
  transition-property: transform, height;
  align-items: flex-start;
}
.betting-view .create-together-hall .van-swipe__track .van-swipe-item {
  height: auto !important;
}
/* 列表上限：原来写的是 calc(100vh - 320px)（实测 636px），比镜像本来的
   `calc(100vh - var(--nav-bar-height) - 138px)`（770px）矮了 134px —— 于是列表在 822 就结束，
   而面板（.together）那块主题渐变底继续铺到屏幕底，看起来就是「底部一块颜色块挡住后面的内容」
   （YG 报的）。这里改回镜像那个算式：列表正好铺到面板底边，卡多时在面板内滚动、卡少时仍塌到内容高。
   面板高度也要一起收：同一个元素叠了三个 scope，1947.css 里首页那条
   `.together[data-v-4fa8baac]{height:calc(100vh - 50px)}` 会一起命中它（实测 906px），
   比本页自己的 `calc(100vh - var(--nav-bar-height) - 98px)`（810px）高 96px —— 那 96px 现在
   被 .betting-view 的 overflow:hidden 裁掉了，但高度口径不该留着错的。 */
.betting-view .together {
  height: calc(var(--vh, 1vh) * 100 - var(--nav-bar-height) - 98px) !important;
}
.betting-view .create-together-hall .together-list {
  height: auto !important;
  max-height: calc(var(--vh, 1vh) * 100 - var(--nav-bar-height) - 138px);
}
.betting-view .create-together-hall .van-swipe__track .van-tab__panel-wrapper--inactive .together-list {
  max-height: 0 !important;
  overflow: hidden;
}

/* 彩种选择弹窗（van-action-sheet）的高度与内边距：
   chunk-vendors.css 里 van-popup 的默认 max-height 是 80%，本彩种 7 个选项刚好放得下，
   但项数多的彩种（原站那个是 10 项：一级 3 + 直选 3 + 组选 4）会顶到上限、最后一行
   紧贴弹窗边缘。放宽到 88vh 并给内容区补下边距，两项都按用户反馈调整。
   这两条是覆盖性的、与被镜像的样式不冲突：只调高度与内边距，不改任何配色/字号/圆角。 */
.betting-theme-sheet {
  max-height: 88vh !important;
}
.betting-theme-sheet .van-action-sheet__content {
  padding-bottom: 24px;
}

/* ── 选号区（betting-content-number）的视觉优化 ────────────────────────────
   用户要求优化这一块的颜色 / 大小 / 间距。照搬镜像 CSS 的原样有三个问题：
     · 挤：10 个球排一行，每球宽 9.6%、相邻只留 0.36% 的 margin，球几乎贴在一起；
     · 小且淡：遗漏数字 12px、颜色 #5b6b8c85（≈52% 透明），在浅底上基本看不清；
     · 层级不清：球与遗漏数字紧贴，「位标题 + 工具按钮」的胶囊也偏矮（32px）。
   所以只动这三件事：把球行改成 10 列 grid + 固定 gap、球按列宽自适应正方形、
   遗漏数字换成可读的次级色并等宽对齐，选中态补一圈光环。**不动结构 / class / 层级**，
   断言仍按原 class 取数；也**排除 casino 深色主题**（那套底色是深蓝紫，浅色系调整会打架）。
   特异性说明：镜像规则写成 `.betting-view .betting-content .betting-content-number[data-v-…]`，
   属性选择器把权重抬到了 (0,4,0)，所以这里必须带 !important 才压得住。 */
.betting-view:not(.betting-view--casino) .betting-content-number .betting-content-balls {
  margin-top: 12px !important;
  padding: 10px 12px 6px !important;
  border-radius: 12px !important;
}
.betting-view:not(.betting-view--casino) .betting-content-number .betting-number-layout-title {
  height: 36px !important;
  margin: 0 0 10px !important;
  padding: 0 8px !important;
  border-radius: 18px !important;
}
.betting-view:not(.betting-view--casino) .betting-content-number .betting-number-layout-title div {
  width: 30px !important;
  height: 30px !important;
  font-size: 12.5px !important;
}
/* 「百位 / 十位 / 个位」不该被上一条压成 30px 方块 —— 给它留出文字宽度 */
.betting-view:not(.betting-view--casino)
  .betting-content-number
  .betting-number-layout-title
  .betting-content-number-title1 {
  width: auto !important;
  padding: 0 4px 0 2px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
}
/* 球行：10 列 grid（数字玩法每行正好 0-9 十个），间距交给 gap，不再用百分比 margin */
.betting-view:not(.betting-view--casino) .betting-content-number .betting-number-layout-grid {
  display: grid !important;
  grid-template-columns: repeat(10, 1fr);
  column-gap: 6px;
  row-gap: 10px;
  margin: 0 !important;
  overflow: visible !important;
}
.betting-view:not(.betting-view--casino) .betting-content-number .betting-number-layout-grid-item {
  width: auto !important;
  margin: 0 !important;
  aspect-ratio: auto !important;
}
.betting-view:not(.betting-view--casino) .betting-content-number .grid-item-title {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  font-size: 16px !important;
  font-weight: 700 !important;
  border-radius: 50% !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.betting-view:not(.betting-view--casino) .betting-content-number .grid-item-title:active {
  transform: scale(0.92);
}
.betting-view:not(.betting-view--casino) .betting-content-number .grid-item-title-selected {
  box-shadow: 0 4px 10px #c99a2e59, inset 0 0 0 1px #ffffff6b !important;
}
.betting-view:not(.betting-view--casino)
  .betting-content-number
  .grid-item-appeared-missed-title {
  height: 16px !important;
  padding-top: 3px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: rgba(90, 104, 132, 0.8) !important;
  font-variant-numeric: tabular-nums;
}

/* ── 把主题配色补回来 ────────────────────────────────────────────────────
   镜像 CSS 自己写了每个主题的球/工具配色，但**权重输了所以从未生效**：
     基础规则 `.betting-view .betting-content .betting-content-number
       .betting-content-balls .betting-content-number-col2 …` = 7 个类
     主题覆盖 `.betting-view.betting-view--jinlong .betting-content-number
       .betting-content-balls …` = 6 个类
   于是鎏金主题下球一直是基础的米色渐变 + 棕字（#c06f12），而不是主题要的白底 + 藏青
   （#123a7a）。这里只是**照抄镜像已经写好的那份主题值**，把选择器补到 8 个类让它们生效，
   没有自创配色。casino 深色主题不在本次范围内（它的底色是深蓝紫，浅色系调整会打架）。 */
.betting-view.betting-view--jinlong
  .betting-content
  .betting-content-number
  .betting-content-balls
  .betting-number-layout-grid-item
  .grid-item-title-unselected {
  background: #fffffffa !important;
  color: #123a7a !important;
  border-color: #c99a2e66 !important;
}
.betting-view.betting-view--jinlong
  .betting-content
  .betting-content-number
  .betting-content-balls
  .betting-number-layout-grid-item
  .grid-item-title-selected {
  background: linear-gradient(135deg, #e8c15a, #c99a2e 58%, #b8860b) !important;
  color: #123a7a !important;
}
.betting-view.betting-view--jinlong
  .betting-content
  .betting-content-number
  .betting-content-balls
  .betting-number-layout-title
  div
  .number-type-item-unselected {
  background: #fffffff5 !important;
  color: #5b6b8c !important;
}
.betting-view.betting-view--jinlong
  .betting-content
  .betting-content-number
  .betting-content-balls
  .betting-number-layout-title
  div
  .number-type-item-selected {
  background: linear-gradient(135deg, #e8c15a, #c99a2e 58%, #b8860b) !important;
  color: #123a7a !important;
}
.betting-view.betting-view--theme4
  .betting-content
  .betting-content-number
  .betting-content-balls
  .betting-number-layout-grid-item
  .grid-item-title-unselected {
  background: #fffffffa !important;
  color: #b45309 !important;
}
.betting-view.betting-view--theme4
  .betting-content
  .betting-content-number
  .betting-content-balls
  .betting-number-layout-grid-item
  .grid-item-title-selected {
  background: linear-gradient(135deg, #e03d3e, #c42f30 58%, #a82526) !important;
  color: #fff !important;
}
/* ── 合买大厅重新设计（D146）─────────────────────────────────────────────
   发起人加头像、下拉刷新提示条、空态。都用 .betting-view .create-together-hall
   前缀：镜像表由 useRouteCss 运行时 append 到 head 尾，同特异性下它赢。 */
.betting-view .create-together-hall .initiator {
  display: flex;
  align-items: center;
  gap: 6px;
}
.betting-view .create-together-hall .initiator-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: #eef2f8;
}
/* 兜底：拿不到头像、或图加载失败时用昵称首字，不留空白 */
.betting-view .create-together-hall .initiator-avatar--text {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #6b7a99;
}
.betting-view .create-together-hall .initiator-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 下拉刷新：提示条的高度由 js 按手指位移驱动 */
/* 限域补偿（D190）：.betting-view .together 的 max-width 此前是从首页 Index.vue 的
   .together.together-jinlong-theme 规则**跨页漏进来**的，首页那批已按页面作用域限域，
   这里显式声明，保证本页读数与限域前逐字一致（width 由镜像给 100%，只缺 max-width）。 */
.betting-view .together {
  max-width: 100%;
}
.betting-view .create-together-hall .together-list {
  position: relative;
  /* 限域补偿（D190）：width/margin/padding 此前同样是从首页 .together .together-list
     漏进来的（实测 padding-left/right = 10px）。!important 是为了压过镜像 1947.css 的
     width:95%（同特异性、镜像表 append 在 head 尾，不加 !important 就输）。 */
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
}
/* vant 的 pull-refresh 头部默认 height:0 + overflow:hidden —— 我们不使用它的 API、
   自己驱动高度，所以必须放开，否则提示条被裁、内容不动。 */
.betting-view .create-together-hall .van-pull-refresh__head {
  height: auto !important;
  overflow: visible !important;
}
.betting-view .create-together-hall .van-pull-refresh__track {
  transform: none !important;
  transition: none !important;
}
/* 列表内容跟随手指下移（下拉位移由 --tg-pull 驱动，松手时靠 transition 回弹） */
.betting-view .create-together-hall .together-list .van-list {
  /* 内容跟随下拉下移（D174 最终方案）：用 **margin-top** 而不是 transform —— transform
     会创建新的包含块，把绝对定位在 .together-list 顶部的提示条一起拽下去。
     这条此前是从首页 `.together .together-list .van-list` 规则**跨页漏进来**的，首页那批
     已按页面作用域限域（D190），必须在这里显式声明，否则下拉时内容不再跟随位移。 */
  margin-top: var(--tg-pull, 0px);
  transition: margin-top 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
/* 顶部浮条：固定贴在列表顶端，高度跟着下拉位移长出来 */
.betting-view .create-together-hall .tg-refresh {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  height: var(--tg-pull, 0px) !important;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  overflow: hidden;
  font-size: 12px;
  color: #9aa3b5;
  transition: height 0.15s ease;
}
.betting-view .create-together-hall .tg-refresh__inner {
  /* 提示做成**看得见的胶囊**：浅底 + 深色粗字 + 图标。原来 12px 灰字挤在 40px 里，
     刷新过程几乎注意不到（YG 要求明显一点）。 */
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 16px;
  background: #eef2f8;
  box-shadow: 0 2px 10px rgba(18, 58, 122, 0.12);
}
.betting-view .create-together-hall .tg-refresh__text {
  font-size: 14px;
  font-weight: 600;
  color: #123a7a;
  letter-spacing: 0.2px;
}
.betting-view .create-together-hall .tg-refresh__done {
  width: 18px;
  height: 18px;
  flex: none;
  color: #b8860b;
}
.betting-view .create-together-hall .tg-refresh__spin {
  width: 20px;
  height: 20px;
  flex: none;
  border: 2.5px solid #c9d4e6;
  border-top-color: #123a7a;
  border-radius: 50%;
  animation: tg-spin 0.8s linear infinite;
}
@keyframes tg-spin {
to { transform: rotate(1turn);
}
}
.betting-view .create-together-hall .tg-empty {
  padding: 36px 0;
  text-align: center;
  font-size: 13px;
  color: #9aa3b5;
}


/* ── 选号提示：已选 N 注，金额 ¥X.XX 元（照 YG 给的原站样式）────────────────
   原站是一个深蓝胶囊，悬浮在选号区下方、底部工具栏之上。

   定位**锚在底栏上，不锚在视口上**（D214）：`.betting-view-bottom` 自带
   `bottom: env(safe-area-inset-bottom)`，刘海机上底栏底边被顶高 34px、顶边随之到
   144px；而原来写死的 `position: fixed; bottom: 118px` 是视口坐标，纹丝不动 ——
   胶囊下半截于是压住底栏第一行（清空 / 发起合买 / 遗漏 / 倍数），YG 真机截图报障
   的就是这一条。改成相对底栏的绝对定位：`bottom: 100%` 贴住底栏顶边
   （`.betting-view-bottom` 是 fixed，就是这里的包含块），`margin-bottom: 8px` 留出
   原来那 8px 间隙 —— safe-area = 0 时与 118px 完全等价，刘海机上自动跟着上移。
   注数 / 金额取 betTipCount / betTipMoney（含倍数口径，见 D204）。 */
.betting-view .bet-count-tip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 100%;
  margin-bottom: 8px;
  /* 必须高于页面里那些 z-index:3000 的元素，否则被压在下面、看着就像没渲染 */
  z-index: 3100;
  padding: 9px 20px;
  border-radius: 20px;
  background: #123a7a;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(18, 58, 122, 0.28);
  pointer-events: none;
}

/* ── 倍数输入（D261）────────────────────────────────────────────────────────────
   镜像给的是 Vant 默认尺寸（输入框 32×28、字号 13），手机上一眼就是个小方块；
   删掉「遗漏 / 冷热」开关后这一列多出 4 个栅格（10 → 14），正好把它放大：
   输入框 58×36、字号 16 加粗、减/加按钮各 36×36，三块用 gap 分开成一组。
   选择器沿用镜像的完整层级并带 !important —— 镜像表是 useRouteCss 运行时 append 的，
   同特异性它后到会赢。配色按三套主题各给一份（尺寸只写一遍）。 */
.betting-view .betting-view-bottom .betting-view-bottom-row1 .bottom-multifold-col .van-stepper {
  display: flex !important;
  align-items: center;
  gap: 6px;
  background: transparent !important;
}
.betting-view .betting-view-bottom .betting-view-bottom-row1 .bottom-multifold-col .van-stepper__input {
  width: 58px !important;
  height: 36px !important;
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 36px !important;
  border-radius: 8px !important;
  font-variant-numeric: tabular-nums;
}
.betting-view .betting-view-bottom .betting-view-bottom-row1 .bottom-multifold-col .van-stepper__minus,
.betting-view .betting-view-bottom .betting-view-bottom-row1 .bottom-multifold-col .van-stepper__plus {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
}
/* 金主题（默认）：淡蓝底 + 藏蓝字 */
.betting-view .betting-view-bottom .betting-view-bottom-row1 .bottom-multifold-col .van-stepper__input,
.betting-view .betting-view-bottom .betting-view-bottom-row1 .bottom-multifold-col .van-stepper__minus,
.betting-view .betting-view-bottom .betting-view-bottom-row1 .bottom-multifold-col .van-stepper__plus {
  background: #eef3fb !important;
  color: #123a7a !important;
}
/* theme4：中性灰底 + 深灰字 */
.betting-view.betting-view--theme4 .betting-view-bottom .betting-view-bottom-row1 .bottom-multifold-col .van-stepper__input,
.betting-view.betting-view--theme4 .betting-view-bottom .betting-view-bottom-row1 .bottom-multifold-col .van-stepper__minus,
.betting-view.betting-view--theme4 .betting-view-bottom .betting-view-bottom-row1 .bottom-multifold-col .van-stepper__plus {
  background: #f3f4f6 !important;
  color: #4b5563 !important;
}
/* casino：半透明白底 + 浅字 */
.betting-view.betting-view--casino .betting-view-bottom .betting-view-bottom-row1 .bottom-multifold-col .van-stepper__input,
.betting-view.betting-view--casino .betting-view-bottom .betting-view-bottom-row1 .bottom-multifold-col .van-stepper__minus,
.betting-view.betting-view--casino .betting-view-bottom .betting-view-bottom-row1 .bottom-multifold-col .van-stepper__plus {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #edf8ff !important;
}

/* ── 登录/注册页配色重做 ────────────────────────────────────────────────────
   镜像表 3295.css 本身是**变量驱动**的（--entrance-page-bg / header-bg /
   input-bg / badge-* / checkbox-checked…），但它给的默认值是**蓝色渐变**
   （#4f8cff → #5671ff → #55b7ff）+ 淡蓝底，跟本站的金/藏蓝主题完全不是一套；
   theme4 那套也被写成了深蓝（应当是深红）。所以这里**只改配色变量**，
   布局、圆角、间距、字号全部沿用镜像 —— 改动面最小、也不会碰坏结构。

   为什么全部带 !important：镜像表由 useRouteCss 在运行时 append 到 head 尾部，
   同特异性下它永远赢（同 D128/D143 那几处覆盖的成因）。
   jinlong（默认）：站点色 —— 藏蓝 #123a7a/#1b4b8f + 金 #c8a25a/#e8c15a，
   底色用 manifest 里的 theme_color #fbf6ea 那一系的米白。 */
.entrance {
  /* 底色收成"一张纸"：一层极淡的金色天光 + 一层米白。原来是三道径向渐变叠在一起，
     卡片四周会拖出一圈脏灰过渡（手机上尤其明显），这是整页显廉价的主因之一。 */
  --entrance-page-bg: radial-gradient(120% 58% at 50% -12%, #f0dfae5c, #0000 62%),
    linear-gradient(180deg, #fbf7ee, #f6f1e6) !important;
  /* 壳不再当第二层白框：卡片自己就是唯一的那块面（壳的 padding/底/阴影在下面归零） */
  --entrance-shell-bg: #0000 !important;
  --entrance-card-bg: #fff !important;
  --entrance-header-bg: radial-gradient(circle at 0% 0%, #ffffff57 0, #fff0 40%),
    linear-gradient(135deg, #1b4b8f, #123a7a 52%, #0f2f66) !important;
  --entrance-header-text: #f7f2d0 !important;
  /* 两个胶囊标签（极速登录/安全验证）降成金色的低调底，别再抢视线 */
  --entrance-badge-bg: #e8c15a2e !important;
  --entrance-badge-text: #f0dfae !important;
  /* 输入框从"灰蓝色块"改成"白底 + 一根细线"：原来的浅灰底 + 投影在米色卡上糊成一片，
     四个字段摞在一起像四个没有边界的洞。 */
  --entrance-input-bg: #fff !important;
  --entrance-input-shadow: 0 0 0 1px #123a7a12 !important;
  --entrance-input-text: #1d2a44 !important;
  --entrance-muted-text: #737a89 !important;
  /* 主按钮：站点金（配藏蓝字，和站内其它金色按钮一致），替掉镜像的蓝渐变 */
  --entrance-primary-btn-bg: linear-gradient(180deg, #e8c15a, #c99a2e) !important;
  --entrance-primary-btn-shadow: 0 14px 26px #c8a25a47 !important;
  /* 次按钮退成白底描边：两个等宽胶囊抢主次是这页第二个显廉价的地方 */
  --entrance-secondary-btn-bg: #fff !important;
  --entrance-secondary-btn-text: #123a7a !important;
  --entrance-checkbox-checked: #c8a25a !important;
}
/* theme4：深红一套（镜像给的是深蓝，与主题不符） */
.entrance--theme4 {
  --entrance-page-bg: radial-gradient(circle at top left, #e03d3e2e, #0000 32%),
    linear-gradient(180deg, #fff5f5, #fdf1f1 42%, #fff9f9) !important;
  --entrance-card-bg: #fff !important;
  --entrance-header-bg: radial-gradient(circle at 0% 0%, #ffffff52 0, #fff0 42%),
    linear-gradient(135deg, #e03d3e, #c62828 52%, #b71c1c) !important;
  --entrance-header-text: #fff !important;
  --entrance-badge-bg: #ffffff47 !important;
  --entrance-badge-text: #fff !important;
  --entrance-input-bg: #fff7f7f5 !important;
  --entrance-input-shadow: 0 10px 22px #b71c1c14 !important;
  --entrance-primary-btn-bg: linear-gradient(135deg, #e03d3e, #c62828 55%, #b71c1c) !important;
  --entrance-primary-btn-shadow: 0 14px 26px #e03d3e47 !important;
  --entrance-secondary-btn-bg: #b71c1c14 !important;
  --entrance-secondary-btn-text: #b71c1c !important;
  --entrance-checkbox-checked: #b71c1c !important;
}
/* casino：镜像那套暗底蓝金本来就对 —— 但上面 `.entrance` 的变量带了 !important，
   会把镜像的暗底值一起压过去（实测：类挂上了、文字变金，底色却还是浅的）。
   所以这里**把 casino 的整套值显式重声明一遍**（值取自镜像 3295.css 的
   .entrance--casino 段），只把主按钮/勾选换成站点金。 */
.entrance--casino {
  --entrance-page-bg: linear-gradient(180deg, #09111f, #0c1630 38%, #08101d) !important;
  --entrance-shell-bg: #080e1cf0 !important;
  --entrance-card-bg: linear-gradient(180deg, rgba(15, 25, 50, 0.985), #090f1efc) !important;
  --entrance-header-bg: radial-gradient(circle at 0% 0%, #ffffff14 0, #fff0 42%),
    linear-gradient(135deg, #183164, #101c3d 55%, #0a1124) !important;
  --entrance-header-text: #f7f2d0 !important;
  --entrance-badge-bg: #e8c15a1f !important;
  --entrance-badge-text: #f6df95 !important;
  --entrance-input-bg: #081020e6 !important;
  --entrance-input-shadow: inset 0 0 0 1px #e8c15a26, 0 10px 22px #0000002e !important;
  --entrance-input-text: #edf8ff !important;
  --entrance-muted-text: #b0c6e6cc !important;
  --entrance-primary-btn-bg: linear-gradient(135deg, #e8c15a, #c99a2e 58%, #b8860b) !important;
  --entrance-primary-btn-shadow: 0 12px 24px #00000059 !important;
  --entrance-secondary-btn-bg: #e8c15a1f !important;
  --entrance-secondary-btn-text: #f6df95 !important;
  --entrance-checkbox-checked: #e8c15a !important;
}
/* ── 参考新安卓端（AuthScreens.kt）的设计语言重排版面 ──────────────────────
   1) HsyCard(tone = GLASS)：玻璃拟态卡片 —— 半透明白底 + 背景模糊 + 极浅描边；
   2) BrandHeader：站名（后台取）+ 一句副标题，随登录/注册切换；
   3) 卡片内「标题 + 一行副标题」的信息层级；
   4) 按钮下方那行弱化说明。
   布局与字段本身不动（字段即上游契约），只做视觉层 —— 逻辑零风险。 */
.entrance .login-shell .login-card {
  /* 白面提到 0.86：0.72 时米色底会透上来，白卡看着发灰；模糊保留（这是这页的材质语言） */
  background: rgba(255, 255, 255, 0.86) !important;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 24px !important;
  /* 阴影染成藏蓝（不用纯黑），顶部补一道内高光：玻璃板才有厚度 */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 24px 48px -20px rgba(15, 47, 102, 0.28),
    0 2px 8px rgba(15, 47, 102, 0.06) !important;
}
.entrance--casino .login-shell .login-card {
  background: rgba(10, 18, 36, 0.72) !important;
  border-color: rgba(232, 193, 90, 0.16);
}
.entrance-card-title {
  padding: 14px 16px 2px;
  color: var(--entrance-input-text, #1d2a44);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.entrance-card-sub {
  padding: 0 16px 6px;
  color: var(--entrance-muted-text, #7a7f8c);
  font-size: 12px;
}
.entrance-submit-note {
  margin-top: 2px;
  color: var(--entrance-muted-text, #7a7f8c);
  font-size: 11px;
  text-align: center;
  letter-spacing: 0.2px;
}
/* ── 注册表单两列（参考新安卓登录页那种紧凑排布）───────────────────────────
   8 个字段行的类名是 user-*-content-row（账号与昵称同名、手机、QQ、密码、确认密码、
   推荐码、验证码），所以用属性选择器就能一次选中全部 → **纯 CSS 两列，完全不动 DOM**：
     账号｜昵称 / 手机｜QQ / 密码｜确认密码 / 推荐码｜验证码
   正好四行。登录那三个字段用 --login 覆盖回整宽（登录要简洁，不需要两列）。 */
/* ⚠ 不要把容器改成 flex：容器里除了字段行还有「记住密码 / 忘记密码」那一行，
   一改 flex 它们就被排成同一行了（实测踩过）。改成只给**字段行**自己 inline-block
   两列 —— 容器保持 block，其它兄弟元素照常各占一行。
   登录态（.entrance-view-content--login）保持整宽：登录只要简洁。 */
/* ── 注册字段的「两列」试过一版，已回退，记下为什么─────────────────────────
   字段行是 vant 栅格：`van-row`（flex 容器）+ `van-col--3`（左图标）+ `van-col--18`
   （输入）+ `van-col--3`（右图标）。给 row 加 display:inline-block / 宽度，会让里面
   按百分比分好的列全部失效 —— 实测结果是图标单独掉到一行、输入框溢出卡片。
   要做两列必须换方法（外层再包一个 wrapper 用 grid，或改 col 的类名），
   不是在这一层改 display 能完成的。 */

/* 「会员资料」这类卡片内标题始终整宽，别被卷进两列里 */
.entrance .login-shell .login-card .entrance-card-title,
.entrance .login-shell .login-card .entrance-card-sub {
  width: 100%;
}
/* 平台 LOGO（品牌常量 BRAND_LOGO）：圆角白底，和站名并排。
   ∞ 字标是横向的（约 2:1），所以盒子也做成 92×46 —— 原来 46×46 的正方盒会把图形压成
   一半宽；高度、圆角、白底与阴影保持原样，只把宽度让出来。 */
.entrance .login-header .entrance-brand-logo {
  width: 92px;
  height: 46px;
  flex: none;
  border-radius: 14px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.94);
  padding: 4px;
  box-shadow: inset 0 0 0 1px rgba(232, 193, 90, 0.35), 0 6px 16px rgba(15, 47, 102, 0.18);
}
/* 字段之间收紧一点，贴近安卓那种紧凑表单的观感（不动结构） */
.entrance .login-shell .login-card .user-name-content-row {
  margin-bottom: 10px;
}
/* 站名（后台「网站名称」）比原来的「欢迎您！」更有信息量；取不到时保留原文案 */
.entrance .login-header .profile-name {
  font-weight: 700;
  letter-spacing: 0.5px;
}
/* 两处镜像写死的颜色（不走变量）：「忘记密码」等链接是 #4f8cff，主按钮文字是白 ——
   金底配白字会糊，改成藏蓝；theme4 那套再改回白（深红底）。 */
.entrance .entrance-submit a {
  color: #123a7a !important;
}
.entrance .entrance-submit .login-btn {
  color: #123a7a !important;
}
.entrance--theme4 .entrance-submit a {
  color: #b71c1c !important;
}
.entrance--theme4 .entrance-submit .login-btn {
  color: #fff !important;
}
.entrance--casino .entrance-submit a {
  color: #e8c15a !important;
}
.entrance--casino .entrance-submit .login-btn {
  color: #123a7a !important;
}

/* ── 视觉重排（D268）────────────────────────────────────────────────────────
   上一版的问题（对着 390×844 截图逐条看的）：
   ① 三道径向渐变叠在米色底上，卡片四周拖出一圈脏灰过渡；
   ② 壳 16px padding + 半透明白 + 玻璃，在卡片外面又套了一层同圆角白框 —— 两块白面叠着，
      边界糊成一片；
   ③ 输入框是浅灰蓝底 + 投影，四个字段摞起来像四个没有边界的洞，字只有 12px（手机上偏小）；
   ④ 输入区 90% 宽、按钮区 94% 宽，两列右边缘差 13px，肉眼一看就不齐；
   ⑤ 主次两个按钮同尺寸同形状，主次不分；
   ⑥ 圆角三套并存：卡片 22 / 输入 18 / 按钮 999。
   这一块把 ①~⑥ 一次性收掉：底色一张纸、只有一块卡面、输入改成白底细线 + 14px 圆角、
   标题 / 字段 / 按钮统一到 84% 宽的同一条竖线、按钮分主次、全页圆角锁成 24/14。
   配色变量仍沿用上面那三套（藏蓝金 / 深红 / 暗底），门禁断言的取值不变。 */

/* 品牌头：贴住卡片顶边（原来 20 的顶角小于卡片 22，左上会漏一丝白），底角收到 18，
   底部补一根金色发丝线收边 —— 深蓝块与白卡之间才有"压出来的边"，不是贴纸。 */
.entrance .login-shell .login-card .login-header {
  border-radius: 24px 24px 18px 18px !important;
  padding: 22px 20px 18px !important;
  box-shadow: inset 0 -1px 0 rgba(232, 193, 90, 0.55);
}
/* ∞ 字标当水印压在头部右下角：品牌延展，弱到不抢标题，但让深蓝块不再是纯色板 */
.entrance .login-shell .login-card .login-header::after {
  content: '';
  position: absolute;
  right: -30px;
  bottom: -30px;
  width: 200px;
  height: 200px;
  background: url('/img/brand-logo.png') center / contain no-repeat;
  opacity: 0.14;
  pointer-events: none;
}
.entrance--casino .login-shell .login-card .login-header::after {
  opacity: 0.2;
}
/* 站名用与首页 hero 同一套金色渐变（同一品牌两处别两种金） */
.entrance .login-header .profile-name {
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  background: linear-gradient(92deg, #fff6da, #f2d9a0 55%, #d9b264);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.entrance .login-header .profile-sub {
  font-size: 12px !important;
  letter-spacing: 0.3px;
  opacity: 0.8;
}

/* 卡片内标题层：与字段同一条 8% 缩进，标题 19/800、副标题 12.5 灰，行距拉开一档 */
.entrance-card-title {
  padding: 24px 8% 6px !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  letter-spacing: -0.2px !important;
  line-height: 1.25 !important;
}
.entrance-card-sub {
  padding: 0 8% 12px !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  letter-spacing: 0.1px;
  color: #6f7686 !important;
}

/* 字段容器：白底 + 一根 1px 线，统一 84% 宽；聚焦时金环亮起（反馈明确，不用放大缩小） */
.entrance .entrance-view-content .user-name-content,
.entrance .entrance-view-content .user-pwd-content,
.entrance .entrance-view-content .user-phone-content,
.entrance .entrance-view-content .user-qq-content,
.entrance .entrance-view-content .user-confirm-pwd-content,
.entrance .entrance-view-content .user-invitation-code-content,
.entrance .entrance-view-content .user-validation-code-content {
  width: 84% !important;
  margin: 12px auto !important;
  border-radius: 14px !important;
  border: 1px solid rgba(18, 58, 122, 0.1) !important;
  background: var(--entrance-input-bg) !important;
  box-shadow: var(--entrance-input-shadow) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.entrance .entrance-view-content .user-name-content:focus-within,
.entrance .entrance-view-content .user-pwd-content:focus-within,
.entrance .entrance-view-content .user-phone-content:focus-within,
.entrance .entrance-view-content .user-qq-content:focus-within,
.entrance .entrance-view-content .user-confirm-pwd-content:focus-within,
.entrance .entrance-view-content .user-invitation-code-content:focus-within,
.entrance .entrance-view-content .user-validation-code-content:focus-within {
  border-color: rgba(200, 162, 90, 0.7) !important;
  box-shadow: 0 0 0 3px rgba(200, 162, 90, 0.16) !important;
  background: #fff !important;
}
.entrance--casino .entrance-view-content .user-name-content:focus-within,
.entrance--casino .entrance-view-content .user-pwd-content:focus-within,
.entrance--casino .entrance-view-content .user-phone-content:focus-within,
.entrance--casino .entrance-view-content .user-qq-content:focus-within,
.entrance--casino .entrance-view-content .user-confirm-pwd-content:focus-within,
.entrance--casino .entrance-view-content .user-invitation-code-content:focus-within,
.entrance--casino .entrance-view-content .user-validation-code-content:focus-within {
  border-color: rgba(232, 193, 90, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(232, 193, 90, 0.14) !important;
  background: #0a1428 !important;
}
/* 字段正文 12px 太小：手机上要凑近看（placeholder 的颜色由变量给，不会被这里带跑） */
.entrance .van-field__control {
  font-size: 15px !important;
  letter-spacing: 0.2px;
}
/* 左侧图标降成 45% 的藏蓝：它是装饰，不该和输入文字争对比度 */
.entrance .entrance-view-content [class$='-content-row'] .input-left-col {
  color: rgba(18, 58, 122, 0.45) !important;
}
.entrance--casino .entrance-view-content [class$='-content-row'] .input-left-col {
  color: rgba(232, 193, 90, 0.5) !important;
}

/* 记住密码 / 忘记密码：与字段同缩进，忘记密码做成链接色 */
.entrance .entrance-view-content .login-assist-row {
  padding-left: 8% !important;
  padding-right: 8% !important;
  padding-bottom: 4px !important;
  height: 28px !important;
  font-size: 12.5px !important;
}
.entrance .entrance-view-content .login-assist-row > div:last-child {
  color: #123a7a !important;
  font-weight: 600;
}
.entrance--casino .entrance-view-content .login-assist-row > div:last-child {
  color: #e8c15a !important;
}

/* 按钮区与字段同宽同竖线；主按钮 52 / 14 圆角 / 17 号字，次按钮退成白底描边 */
.entrance .entrance-submit {
  width: 84% !important;
  margin: 16px auto 0 !important;
}
.entrance .entrance-submit .login-btn {
  height: 52px !important;
  border-radius: 14px !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  transition: transform 0.12s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.entrance .entrance-submit .login-btn:active {
  transform: translateY(1px) scale(0.995) !important;
  filter: brightness(0.97);
}
.entrance .entrance-submit .secondary-btn {
  height: 46px !important;
  border-radius: 14px !important;
  margin-top: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  background: #fff !important;
  border: 1px solid rgba(18, 58, 122, 0.16) !important;
  box-shadow: 0 2px 6px rgba(15, 47, 102, 0.05) !important;
}
.entrance .entrance-submit .secondary-btn:active {
  transform: translateY(1px) scale(0.995) !important;
  background: #f7f8fb !important;
}
.entrance--casino .entrance-submit .secondary-btn {
  background: rgba(232, 193, 90, 0.08) !important;
  border-color: rgba(232, 193, 90, 0.28) !important;
}
.entrance .entrance-submit-note {
  margin-top: 12px !important;
  font-size: 11.5px !important;
  color: #7d8390 !important;
  letter-spacing: 0.3px;
}

/* 入场只做一件事：卡片从下方 16px 升到位（信息层级：先把面端上来，再谈细节）。
   位移与透明度同帧结束，不做渐次延迟——这页是登录，不是发布会。 */
@keyframes entrance-card-rise {
from {
    opacity: 0;
    transform: translateY(16px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.entrance .login-shell {
  animation: entrance-card-rise 0.52s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@media (prefers-reduced-motion: reduce) {
.entrance .login-shell {
    animation: none !important;
}
.entrance .login-card,
  .entrance .login-btn,
  .entrance .secondary-btn,
  .entrance .entrance-view-content > div {
    transition: none !important;
}
}

/* ── 登录卡靠上排（D262 → D269）──────────────────────────────────────────────
   原来 .login-shell 是 `min-height: 100%` + `margin: 0 auto`：壳撑满一屏、卡片贴在最上面，
   大屏上整张卡浮在顶部、下面全空。D262 先改成 flex + `margin: auto` 严格居中；YG 看过之后
   要「往上抬高一点」：居中的卡片在 844 屏上顶部空 100 多 px，视线落点偏低，看起来像悬在半空。
   现在是 flex 容器 + `margin: 5vh auto auto`：上边距给一个随视口走的小值（clamp 兜住
   小屏与大屏两端），左右 auto 居中，**下边距留 auto** 把余量全推到底部 —— 卡片靠上、
   下面留白，视觉重心回到品牌头。仍然不用 `justify-content: center`：内容超过一屏时
   纯居中会把顶部裁掉，而固定上边距 + 底部 auto 在溢出时自然从顶部开始、页面可滚。 */
.entrance {
  display: flex !important;
  flex-direction: column;
}
.entrance .login-shell {
  /* 撑满一屏时 margin: auto 没有余量可分配，先让它回到内容高 */
  min-height: auto !important;
  margin: clamp(16px, 5vh, 52px) auto auto !important;
  max-width: 520px;
  /* 壳不再是"第二层白框"：原来 16px 的 padding + 半透明白 + 玻璃，让卡片外面还套着一层
     同样圆角的白边，两块白面叠在一起，边界糊成一团。现在卡片就是唯一的面。 */
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
}

/* 版式照参考图落：金色描边的深蓝面板、顶部头图、居中标题、浅黄时间胶囊、
   两列档位格子、底部「圆点 + 次按钮 + 金色主按钮」。所有类名以 .activity-popup
   打头，与 /h5/css/*.css 那份原站快照零重叠（已确认快照里没有这个前缀）。

   刻意**没有**任何 display !important —— 首页模板里有一批由 v-show 控制的元素，
   那种写法曾经把隐藏态压成常显（Index.vue 里那条"隐藏态守护"规则就是为它加的）。
   本组件只用 v-if 控制自己的显隐，不需要跟任何人抢优先级。 */
.activity-popup[data-v-e11aa4d6] {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
}
.activity-popup__mask[data-v-e11aa4d6] {
  position: absolute;
  inset: 0;
  background: rgba(3, 10, 24, 0.74);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.activity-popup__panel[data-v-e11aa4d6] {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 342px;
  max-height: calc(100vh - 96px);
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(180deg, #0c2c5e 0%, #071b3c 100%);
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(216, 176, 88, 0.45) inset;
  animation: activity-popup-in-e11aa4d6 0.22s ease-out;
}
@keyframes activity-popup-in-e11aa4d6 {
from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
}
to {
    opacity: 1;
    transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
.activity-popup__panel[data-v-e11aa4d6] {
    animation: none;
}
}

/* 右上角圆形 ✕。用两条伪元素画而不是塞字符：字体里没有 ✕ 的机型上不会变成方框，
   而且它不占 textContent（十几个门禁脚本按 textContent 抓文案，多一个符号就会串味）。 */
.activity-popup__close[data-v-e11aa4d6] {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(5, 16, 36, 0.58);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3) inset;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.activity-popup__close[data-v-e11aa4d6]::before,
.activity-popup__close[data-v-e11aa4d6]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 1.6px;
  border-radius: 2px;
  background: #fff;
}
.activity-popup__close[data-v-e11aa4d6]::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.activity-popup__close[data-v-e11aa4d6]::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.activity-popup__hero[data-v-e11aa4d6] {
  position: relative;
  flex: none;
  background: linear-gradient(150deg, #17478e 0%, #0d2a5c 58%, #071b3c 100%);
}
.activity-popup__hero-img[data-v-e11aa4d6] {
  display: block;
  width: 100%;
  height: 148px;
  object-fit: cover;
}
.activity-popup__hero-text[data-v-e11aa4d6] {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 26px 18px 10px;
  text-align: center;
  background: linear-gradient(180deg, rgba(6, 22, 48, 0) 0%, rgba(6, 22, 48, 0.9) 76%);
}

/* 没有头图时标题不再压在图上：撤掉绝对定位和压暗渐变，改由容器自身撑开高度 */
.activity-popup__hero.is-plain .activity-popup__hero-text[data-v-e11aa4d6] {
  position: static;
  padding: 24px 18px 16px;
  background: none;
}
.activity-popup__title[data-v-e11aa4d6] {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.4px;
  color: #f6d98d;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
.activity-popup__subtitle[data-v-e11aa4d6] {
  margin: 5px 0 0;
  font-size: 12.5px;
  letter-spacing: 1px;
  color: #cfe0fa;
}
.activity-popup__body[data-v-e11aa4d6] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 16px 2px;
  -webkit-overflow-scrolling: touch;
}
.activity-popup__time[data-v-e11aa4d6] {
  margin: 0 0 10px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #fdf3d3;
  font-size: 12px;
  line-height: 1.5;
  color: #8a5a12;
  text-align: center;
}
.activity-popup__paragraph[data-v-e11aa4d6] {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.72;
  color: #cddff8;
}
.activity-popup__items[data-v-e11aa4d6] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
}
.activity-popup__item[data-v-e11aa4d6] {
  padding: 9px 8px;
  border-radius: 10px;
  border: 1px solid rgba(216, 176, 88, 0.34);
  background: linear-gradient(180deg, rgba(31, 76, 148, 0.9) 0%, rgba(14, 40, 84, 0.9) 100%);
  text-align: center;
}
.activity-popup__item-label[data-v-e11aa4d6] {
  font-size: 12px;
  line-height: 1.4;
  color: #dbe7fb;
}
.activity-popup__item-value[data-v-e11aa4d6] {
  margin-top: 3px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  color: #f6d98d;
}
.activity-popup__rule[data-v-e11aa4d6] {
  margin-top: 2px;
  padding-top: 9px;
  border-top: 1px dashed rgba(160, 190, 235, 0.22);
}
.activity-popup__rule p[data-v-e11aa4d6] {
  margin: 0 0 4px;
  font-size: 11px;
  line-height: 1.65;
  color: #92a8c8;
}
.activity-popup__footer[data-v-e11aa4d6] {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(7, 27, 60, 0) 0%, rgba(6, 18, 40, 0.92) 42%);
}
.activity-popup__dots[data-v-e11aa4d6] {
  display: flex;
  align-items: center;
  gap: 6px;
}
.activity-popup__dot[data-v-e11aa4d6] {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(190, 210, 240, 0.34);
  transition: width 0.2s ease, background 0.2s ease;
}
.activity-popup__dot.is-active[data-v-e11aa4d6] {
  width: 16px;
  border-radius: 3px;
  background: #f0c05a;
}
.activity-popup__second[data-v-e11aa4d6] {
  width: 100%;
  padding: 9px 16px;
  border: 1px solid rgba(216, 176, 88, 0.5);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  font-family: inherit;
  font-size: 13.5px;
  color: #e8cc88;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.activity-popup__primary[data-v-e11aa4d6] {
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe8ab 0%, #f2c260 48%, #d7a036 100%);
  box-shadow:
    0 6px 16px rgba(214, 160, 56, 0.3),
    0 1px 0 rgba(255, 255, 255, 0.6) inset;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: #4a2c05;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.activity-popup__second[data-v-e11aa4d6]:active,
.activity-popup__primary[data-v-e11aa4d6]:active {
  transform: translateY(1px);
}

/* ── 首页合买面板：发起人头像与下拉刷新 ────────────────────────────────────
   注意：这个文件原先没有 \3c style> 块，样式必须放在这里才会被打包。
   选择器用 .together .initiator .initiator-avatar（0,3,0）压过镜像 2203 的
   .initiator[data-v-…]（0,2,0）与 .initiator span[data-v-…] —— 镜像表是运行时
   append 到 head 尾的，同特异性下它赢，所以这里必须比它更具体。 */
/* 卡片铺不满的根因（逐层量出来的）：从 body 到 .van-swipe 都是满宽 480，
   唯独 **.van-swipe__track 掉到 340** —— vant 会给 track 写 inline 宽度（按面板数
   乘出来的），那一层一窄，下面的 .van-swipe-item / .van-tab__panel / .together-list
   就全跟着窄，卡片只占左侧一条、右边空出一大块。这里把它整条链解锁成满宽
   （!important 才能压过 track 上的 inline style），左右留白改由列表的 padding 给。 */
/* ── 作用域限域（D190）：以下合买面板规则全部加首页自己的页面作用域前缀 ──────────
   .together / .together-list / .tg-refresh / .initiator 这几个类名**投放页（Betting.vue）
   的合买 tab 也在用**（同一套脚手架的镜像标记），不限定就会跨页命中：实测 /betting/1 的
   .create-together-hall .together-list 吃到本页的 padding 10px、.betting-view .together 吃到
   本页的 width:100%，两页互相顶。前缀取首页模板根元素的 data-v-4e42963c（页页唯一，
   同 src/styles/cash-log-cards.css 的 :is([data-v-…]) 写法）。只加"页面作用域"这一层，
   选择器其余部分与所有 !important 一律不动。
   注意：Teleport 到 body 的图片预览层（.van-image-preview*，见下方）**不能**限域，单独说明。 */
:is([data-v-4e42963c]) .together.together-jinlong-theme {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
:is([data-v-4e42963c]) .together .van-swipe__track,
:is([data-v-4e42963c]) .together .van-swipe-item,
:is([data-v-4e42963c]) .together .van-tab__panel {
  width: 100% !important;
  max-width: 100% !important;
}
:is([data-v-4e42963c]) .together .together-list {
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
}
:is([data-v-4e42963c]) .together .initiator {
  display: flex;
  align-items: center;
  gap: 6px;
}
:is([data-v-4e42963c]) .together .initiator .initiator-avatar {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: #eef2f8;
  overflow: hidden;
}
/* 兜底：拿不到头像/图加载失败时用昵称首字 —— span 是 inline，必须显式 flex 才有尺寸 */
:is([data-v-4e42963c]) .together .initiator .initiator-avatar--text {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #6b7a99;
}
:is([data-v-4e42963c]) .together .initiator .initiator-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:is([data-v-4e42963c]) .together .together-list {
  position: relative;
}
/* vant 的 pull-refresh 头部默认 height:0 + overflow:hidden —— 我们不使用它的 API、
   自己驱动高度，所以必须放开，否则提示条被裁、内容不动。 */
:is([data-v-4e42963c]) .together .van-pull-refresh__head {
  position: static !important;
  height: auto !important;
  overflow: visible !important;
}

/* 列表内容跟随手指下移（下拉位移由 --tg-pull 驱动，松手靠 transition 回弹） */
/* 内容跟随下拉位移用 **margin-top**，不能用 transform —— transform 会创建新的包含块，
   让绝对定位的提示条以它为参照一起下移（实测 barTop 与 listTop 相同、提示条压在首行上）。
   margin 不创建包含块，提示条就稳稳留在 .together-list 顶部（列表之上、header 之下）。 */
:is([data-v-4e42963c]) .together .together-list .van-list {
  margin-top: var(--tg-pull, 0px);
  transition: margin-top 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
/* 提示条是**浮层**：必须脱离文档流，否则它占位把内容顶下去、位移就白做了 */
:is([data-v-4e42963c]) .together .tg-refresh {
  /* 实测（elementFromPoint）定位：vant 的 .van-pull-refresh__head 本身是**绝对定位在
     头部上方**的，把提示条放回流内等于塞回那个被 header 遮住的位置（命中 search-area）。
     所以这里把提示条**直接绝对定位到 .together-list 的顶部**：它落在列表内容之上、
     header 之下（.together-list 的坐标空间里），同时**不随内容下移**。 */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  height: var(--tg-pull, 0px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  overflow: hidden;
  font-size: 12px;
  color: #6b7a99;
  transition: height 0.15s ease;
}
:is([data-v-4e42963c]) .together .tg-refresh__inner {
  /* 提示做成**看得见的胶囊**：浅底 + 深色粗字 + 图标。原来 12px 灰字挤在 40px 里，
     刷新过程几乎注意不到（YG 要求明显一点）。 */
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 16px;
  background: #eef2f8;
  box-shadow: 0 2px 10px rgba(18, 58, 122, 0.12);
}
:is([data-v-4e42963c]) .together .tg-refresh__text {
  font-size: 14px;
  font-weight: 600;
  color: #123a7a;
  letter-spacing: 0.2px;
}
:is([data-v-4e42963c]) .together .tg-refresh__done {
  width: 18px;
  height: 18px;
  flex: none;
  color: #b8860b;
}
:is([data-v-4e42963c]) .together .tg-refresh__spin {
  width: 20px;
  height: 20px;
  flex: none;
  border: 2.5px solid #c9d4e6;
  border-top-color: #123a7a;
  border-radius: 50%;
  animation: tg-spin 0.8s linear infinite;
}
@keyframes tg-spin {
to { transform: rotate(1turn);
}
}
/* 预览层必须是全场最高层：页面里有 z-index:3000 的元素（见 Index.vue 1660/4045/4120），
   镜像给 ImagePreview 的层级不够高，放大后的图片会被它们压住。
   ★ Teleport 到 body，必须全局：预览层由 <Teleport to="body"> 挂到 <body> 下，根本不在本页
   .index 的 DOM 子树里，加 :is([data-v-4e42963c]) 前缀会直接失效（D178 的实现约束）。
   CsChatView 的预览层同样挂在 body 上，两条规则共用这套"最高层 + 不裁剪"的语义。 */
.van-image-preview {
  z-index: 9999 !important;
  position: fixed !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
/* 放大后图片超出容器时不要被裁掉（同样在 body 上的 Teleport 层，保留全局） */
.van-image-preview__swipe,
.van-image-preview__swipe-item,
.van-image-preview__image {
  overflow: visible !important;
}
/* 聊天图片预览：图片用 transform 做缩放/平移，手势期间禁过渡避免跟手迟滞 */
.chat-preview-img {
  max-width: 100%;
  max-height: 100%;
  transform-origin: center center;
  will-change: transform;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
}
/* ── 开奖结果面板的下拉刷新（与合买大厅同款）────────────────────────────── */
.prize .prize-container {
  position: relative;
}
.prize .prize-container .tg-refresh {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  height: var(--pr-pull, 0px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.prize .prize-container .tg-refresh__inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 16px;
  background: #eef2f8;
  box-shadow: 0 2px 10px rgba(18, 58, 122, 0.12);
}
.prize .prize-container .tg-refresh__text {
  font-size: 14px;
  font-weight: 600;
  color: #123a7a;
  letter-spacing: 0.2px;
}
.prize .prize-container .tg-refresh__spin {
  width: 20px;
  height: 20px;
  flex: none;
  border: 2.5px solid #c9d4e6;
  border-top-color: #123a7a;
  border-radius: 50%;
  animation: pr-spin 0.8s linear infinite;
}
.prize .prize-container .tg-refresh__done {
  width: 18px;
  height: 18px;
  flex: none;
  color: #b8860b;
}
@keyframes pr-spin {
to { transform: rotate(1turn);
}
}
/* 内容用 margin-top 让位（margin 不创建包含块，提示条才不会被一起拽下去） */
.prize .prize-container .van-pull-refresh__track {
  margin-top: var(--pr-pull, 0px);
  transition: margin-top 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.prize .prize-container .van-pull-refresh__head {
  height: 0 !important;
  overflow: visible !important;
}
/* ── 「添加到桌面」引导层（此前模板缺失，点了没反应）──────────────────────── */
.install-guide-mask {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(9, 15, 30, 0.48);
}
.install-guide-card {
  width: 100%;
  max-width: 330px;
  padding: 20px 18px 16px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(9, 15, 30, 0.28);
}
.install-guide-title { font-size: 16px; font-weight: 700; color: #1d2a44;
}
.install-guide-desc { margin-top: 6px; font-size: 13px; line-height: 1.6; color: #5b6478;
}
.install-guide-steps { margin: 12px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.9; color: #1d2a44;
}
.install-guide-note { margin-top: 10px; font-size: 12px; line-height: 1.6; color: #8a93a6;
}
.install-guide-close {
  display: block; width: 100%; height: 40px; margin-top: 16px; border: 0; border-radius: 20px;
  background: linear-gradient(135deg, #e8c15a, #c99a2e 58%, #b8860b);
  color: #123a7a; font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer;
}
/* ── 彩聊输入区：工具栏按钮 + 表情面板（照新安卓 ModernComposerAction）─────── */
.chat-tool-btn {
  width: 32px;
  height: 32px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  background: rgba(255, 255, 255, 0.86);
  transition: transform 0.12s ease, background 0.12s ease;
}
.chat-tool-btn:active {
  transform: scale(0.94);
}
.chat-tool-btn--on {
  background: #f0dfae;
}
.chat-emoji-panel {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  margin: 0 12px 8px;
  padding: 10px 8px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12);
}
.chat-emoji-item {
  font-size: 20px;
  line-height: 1;
  text-align: center;
  padding: 5px 0;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
}
.chat-emoji-item:active {
  background: #f2f4f8;
}
/* ── 彩聊：发图 / 合买方案 / 红包 的入口与弹层 ───────────────────────────── */
.chat-file-input {
  display: none;
}
.chat-sheet-mask {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(9, 15, 30, 0.45);
}
.chat-sheet {
  width: 100%;
  max-width: 420px;
  padding: 18px 16px 16px;
  border-radius: 16px 16px 0 0;
  background: #fff;
  box-shadow: 0 -8px 30px rgba(9, 15, 30, 0.22);
  max-height: 78vh;
  overflow-y: auto;
}
.chat-sheet-title {
  font-size: 16px;
  font-weight: 700;
  color: #1d2a44;
}
.chat-sheet-sub {
  margin-top: 4px;
  font-size: 12px;
  color: #8a93a6;
}
.chat-sheet-body {
  margin-top: 12px;
}
.chat-sheet-empty {
  padding: 28px 0;
  text-align: center;
  font-size: 13px;
  color: #9aa3b5;
}
.chat-sheet-item {
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: 12px;
  background: #f7f8fb;
  cursor: pointer;
}
.chat-sheet-item-main {
  font-size: 14px;
  color: #1d2a44;
}
.chat-sheet-item-sub {
  margin-top: 2px;
  font-size: 12px;
  color: #8a93a6;
}
.chat-rp-field {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eef1f6;
}
.chat-rp-label {
  flex: none;
  width: 84px;
  font-size: 13px;
  color: #5b6478;
}
.chat-rp-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  font-size: 15px;
  color: #1d2a44;
  background: transparent;
  font-family: inherit;
}
.chat-sheet-note {
  margin-top: 10px;
  font-size: 12px;
  color: #9aa3b5;
}
.chat-sheet-submit {
  display: block;
  width: 100%;
  height: 42px;
  margin-top: 14px;
  border: 0;
  border-radius: 21px;
  background: linear-gradient(135deg, #e8c15a, #c99a2e 58%, #b8860b);
  color: #123a7a;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.chat-sheet-cancel {
  display: block;
  width: 100%;
  height: 40px;
  margin-top: 10px;
  border: 0;
  border-radius: 20px;
  background: #f2f4f8;
  color: #5b6478;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}
/* ── 彩聊：按微信的形态重做气泡与输入区（YG 要求）─────────────────────────
   微信的三条特征：① 头像 40px **圆角方形**（不是圆形）；② 气泡是**小圆角 + 尖角**、
   最大宽度约 68%、自己的消息靠右且用主色底；③ 输入区是一条浅灰工具条 —— 白色输入框
   在左、主色「发送」按钮在右。镜像 1947 那套是「大圆角无尖角 + 圆形头像 + 图标式发送」，
   这里逐条覆盖（镜像由 useRouteCss 运行时注入，必须 !important）。 */
.chat-message-item .message-avatar-left .avatar,
.chat-message-item .message-avatar-right .avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 6px !important;
  object-fit: cover;
}
.chat-message-item .message .bubble {
  max-width: 68% !important;
  border-radius: 6px !important;
  position: relative;
  padding: 9px 12px !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}
/* 对方：白底 + 极浅描边；小尖角指向头像 */
.chat-message-item .message.received .bubble {
  background: #fff !important;
  border: 1px solid #eceff4 !important;
  color: #1d2a44 !important;
}
.chat-message-item .message.received .bubble::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 12px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 6px 5px 0;
  border-color: transparent #fff transparent transparent;
}
/* 自己：站点主色底 + 深字（微信是绿底白字，这里换成主题色，保持站点一致） */
.chat-message-item .message.sent .bubble {
  background: linear-gradient(135deg, #f0dfae, #e2c377) !important;
  border: 1px solid #e2c377 !important;
  color: #1d2a44 !important;
}
.chat-message-item .message.sent .bubble::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 12px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 6px;
  border-color: transparent transparent transparent #e8cd8a;
}
/* 昵称与时间弱化（微信这两行都很轻） */
.chat-message-item .user-name {
  font-size: 12px !important;
  color: #8a93a6 !important;
}
.chat-message-item .time {
  font-size: 11px !important;
  color: #b0b7c3 !important;
}
/* 输入区：一条浅灰工具条 */
.chat-input-content {
  display: flex !important;
  align-items: center;
  gap: 8px;
  /* 底部安全区**不能靠内边距让**：镜像这条是 `height: 60px; position: fixed;
     bottom: calc(50px + env(safe-area-inset-bottom))` —— 条本身已经有 60px 固定高，
     加 42px 下内边距会把输入框压瘪（实测内容区只剩 18px，YG 说「输入框布局失效」就是这个）。
     它本来就挂在底栏（50px + 安全区）之上，安全区已经算进 bottom 里了。
     这里只补键盘：fixed 元素在 iOS 上不会自己缩（见 D235），键盘弹起时用 max() 把它顶到键盘上沿。 */
  padding: 8px 10px !important;
  bottom: max(calc(50px + env(safe-area-inset-bottom, 0px)), var(--kbh, 0px)) !important;
  background: #f7f8fb !important;
  border-top: 1px solid #eceff4;
}
.chat-input-content .chat-input {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  padding: 8px 12px !important;
  border: 1px solid #eceff4 !important;
  border-radius: 6px !important;
  background: #fff !important;
  font-size: 15px !important;
  line-height: 20px;
  color: #1d2a44;
  resize: none;
}
.chat-tool-btn {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: #eef1f6 !important;
  font-size: 16px !important;
}
.chat-tool-btn--on {
  background: #f0dfae !important;
}
.chat-send-btn {
  flex: none;
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, #e8c15a, #c99a2e 58%, #b8860b);
  color: #123a7a !important;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.chat-send-btn:active {
  opacity: 0.9;
}
/* ── 红包卡：照微信那个红封套（橙红渐变 + 金币 + 祝福语 + 底部「红包」标识）── */
.chat-message-item .redpacket-card {
  width: 220px;
  padding: 0 0 10px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(180deg, #f9a03a 0%, #ee6a4a 62%, #e2543c 100%);
  box-shadow: 0 6px 16px rgba(226, 84, 60, 0.28);
  color: #fff;
  text-align: center;
}
.chat-message-item .redpacket-card__greeting {
  padding: 14px 12px 2px;
  font-size: 14px;
  color: #fff8e8 !important;
}
.chat-message-item .redpacket-card__amount {
  padding: 2px 12px 0;
  font-size: 22px;
  font-weight: 700;
  color: #fff !important;
  letter-spacing: 0.5px;
}
.chat-message-item .redpacket-card__meta {
  margin-top: 8px;
  padding: 0 12px;
  font-size: 11px;
  color: #ffe9d2 !important;
}
/* 图片气泡本体不能带白底/内边距：镜像给 .bubble 是白底 + padding，不抹掉的话
   图片外面会多出一圈白边（截图里看得见）。
   （红包原先也走这条。YG 2026 要求红包与合买卡**根本不套气泡**，那条需求改在
   模板层解决，这里不再需要为红包抹底色。） */
.chat-message-item .message .bubble.image-bubble {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.chat-message-item .message .bubble.image-bubble::before,
.chat-message-item .message .bubble.image-bubble::after {
  display: none;
}
/* ── 按 2026 的界面规范再收一轮（YG 的五条反馈）─────────────────────────────
   ① 红包卡太大 → 收窄到 168px、金额降到 18px、内边距收紧；
   ②③④ 气泡：头像与气泡**顶部对齐**（原先垂直居中，尖角位置看着是歪的）、
      所有 kind 统一圆角与阴影分级、系统消息走灰字居中样式；
   ⑤ 输入区照微信：**输入框在左、工具按钮与发送按钮在右** —— 这里用 flex order
      调整顺序，不改模板（改 DOM 顺序要动那一大段手拼结构，风险不值得）。 */
.chat-message-item .message {
  align-items: flex-start !important;
}
.chat-message-item .message > div {
  align-items: flex-start !important;
}
/* ⑤ 输入区顺序：输入框 → 工具按钮 → 发送 */
.chat-input-content {
  padding: 8px 12px !important;
}
.chat-input-content .chat-input {
  order: 1;
}
.chat-input-content .chat-tool-btn {
  order: 2;
}
.chat-input-content .chat-send-btn,
.chat-input-content .sent-btn {
  order: 3;
}
.chat-input-content .sent-status {
  order: 1;
}
.chat-input-content .chat-tool-btn {
  width: 28px !important;
  height: 28px !important;
  font-size: 15px !important;
  background: transparent !important;
}
.chat-input-content .chat-tool-btn--on {
  background: #eef1f6 !important;
}
/* ①② 红包卡收小：更像微信那个封套比例。
   选择器从 `.chat-message-item .redpacket-card`（红包不再有气泡包裹层）改成
   `.chat-message-item .redpacket-card`，特异性不变、视觉不变。 */
.chat-message-item .redpacket-card {
  width: 168px !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(226, 84, 60, 0.24) !important;
}
.chat-message-item .redpacket-card__greeting {
  padding: 10px 10px 0 !important;
  font-size: 13px !important;
}
.chat-message-item .redpacket-card__amount {
  font-size: 18px !important;
  padding: 1px 10px 0 !important;
}
.chat-message-item .redpacket-card__meta {
  margin-top: 6px !important;
  padding: 0 10px !important;
  font-size: 10px !important;
}
.chat-message-item .redpacket-card__greeting::before {
  font-size: 20px !important;
  margin-bottom: 2px !important;
}
/* ③ 头像与气泡顶部对齐后，尖角跟着气泡第一行走 */
.chat-message-item .message.received .bubble::before,
.chat-message-item .message.sent .bubble::after {
  top: 10px !important;
}
/* ④ 所有气泡统一修饰：一致的圆角、边距与阴影分级（卡片类气泡不带底色） */
.chat-message-item .message .bubble {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
.chat-message-item .message-bubble-content .lottery-header {
  border-radius: 6px !important;
}
/* 系统/未知消息：灰字居中，不用气泡包（原先落在文本分支里跟着一起画气泡） */
.chat-message-item .chat-system-line {
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #9aa3b5;
  padding: 2px 0;
}
/* 气泡外那块白底来自更外层（.message 与其包裹 div），不抹掉的话每条气泡右边
   都拖一小片白（截图里看得很清楚）。消息行本身应当完全透明，白底只属于气泡自己。
   ⚠ 排除两种**自带底色**的卡片：YG 2026 去气泡后，红包卡与合买卡从「气泡里的
   第三层」上移成 `.message > div > div`，正好落进这条规则的射程 —— 不排除的话
   卡片自己的背景（红包模板里的内联渐变 / 合买卡的深蓝）会被这条 !important
   抹成透明，白字写在白底上等于整张卡看不见（实测截图确认过）。
   ⚠⚠ 还必须排除**气泡本体** `.message-text` 与 `.bubble`：自己发的文本消息结构就是
   `.message > div(wrapper) > div.message-text`，同一条规则把气泡自己的藏蓝渐变也抹成了透明，
   而文字色 `.message.sent .message-text{color:#f7f9ff}` 仍然生效 —— 近白字写在透明底上
   等于看不见，界面上只剩一个空白色框（YG 第二次报「发送消息还是空白」，确认是样式问题）。
   优先级算一下就知道为什么是它赢：本条 `> div > div:not():not()` 是 4 类 + 2 元素，
   而气泡那条 `.chat-message-item .message.sent .message-text` 只有 4 类 —— 同为 !important
   时前者 specificity 更高，所以必须在这里排除，而不是给气泡再加 !important。 */
.chat-message-item .message,
.chat-message-item .message > div,
.chat-message-item .message > div > div:not(.message-bubble-content):not(.redpacket-card):not(.message-text):not(.bubble) {
  background: transparent !important;
}
.chat-message-item .message .bubble {
  display: inline-block !important;
  width: auto !important;
}
/* ══ 2026 版视觉重做（design-taste-frontend：产品 UI 部分）══════════════════
   审计结论与处置：
     · 自己气泡原是「金黄渐变 + 深字」→ 浅底上对比不足、和页面糊在一起；
       改「藏蓝渐变 + 白字」（品牌主色，对比约 10:1，过 WCAG AA/AAA）。
     · 尖角气泡是 2013 年的微信语言，且与页面的圆角体系不同族 → 去掉尖角，
       统一到**连续大圆角 18px**（形状一致性锁）。
     · 头像 4px 圆角偏旧 → 12px。
     · 工具按钮原用 emoji（技能 3.D 默认禁用）→ 换简单几何 SVG（本项目无 Vue 图标库），
       图标跟随 currentColor、stroke 统一 1.6。
     · 输入框 6px 与气泡 18px 不同族 → 胶囊输入框（22px）+ 主色胶囊发送键。
     · 红包卡去掉 emoji 徽标，改纯排版层级，宽度收到 176px、圆角 14px。 */
.chat-message-item .message .bubble {
  border-radius: 18px !important;
  padding: 10px 14px !important;
  box-shadow: 0 2px 6px rgba(18, 58, 122, 0.06) !important;
}
/* 尖角全部去掉：连续圆角是现代规范，尖角与页面的圆角体系不同族 */
.chat-message-item .message.received .bubble::before,
.chat-message-item .message.sent .bubble::after {
  display: none !important;
}
.chat-message-item .message.received .bubble {
  background: #fff !important;
  border: 1px solid #eef1f6 !important;
  color: #1d2a44 !important;
}
.chat-message-item .message.sent .bubble {
  background: linear-gradient(135deg, #1b4b8f, #123a7a) !important;
  border: 1px solid #123a7a !important;
  color: #f7f9ff !important;
  box-shadow: 0 2px 8px rgba(18, 58, 122, 0.16) !important;
}
.chat-message-item .message-avatar-left .avatar,
.chat-message-item .message-avatar-right .avatar {
  border-radius: 12px !important;
}
/* ── 消息布局：头像 / 昵称 / 时间 / 气泡 的层级与位置（本轮唯一动的是布局）──────
   昵称与时间放**同一行**，昵称 12px/600 为主、时间 11px/400 更浅为辅（原来是上下
   两行、同字号同灰度，两个小灰字堆着，看不出谁是身份谁是时间）。
   对方的块左对齐于气泡左缘，与头像保持 10px；自己那条已不渲染这一块。 */
.chat-message-item .message .user-info-left,
.chat-message-item .message .user-info-right {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 5px;
}
.chat-message-item .message .user-info-right {
  justify-content: flex-end;
}
.chat-message-item .message .user-name {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #7b8698 !important;
  line-height: 1.2;
}
.chat-message-item .message .time {
  font-size: 11px !important;
  font-weight: 400 !important;
  /* 时间用与昵称同色（#7b8698 在纯白上约 4.7:1，过 WCAG AA），层级靠**字重**区分
     （昵称 600 / 时间 400）。原来用 #aab3c2 只有约 2.4:1，11px 正文级字号不达标。 */
  color: #7b8698 !important;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
/* 消息行间距统一到 14px（原来各块自带边距，疏密不均） */
.chat-message-item {
  margin-bottom: 14px !important;
}
.chat-message-item .message {
  gap: 10px !important;
}
/* 输入区：胶囊输入框 + 主色胶囊发送 + 无底色的 40px 触区图标按钮 */
.chat-input-content {
  padding: 10px 12px !important;
  background: #fff !important;
  border-top: 1px solid #eef1f6 !important;
}
.chat-input-content .chat-input {
  border: 0 !important;
  border-radius: 22px !important;
  background: #f4f6fa !important;
  min-height: 40px;
  padding: 10px 16px !important;
  font-size: 15px !important;
}
.chat-input-content .chat-tool-btn {
  width: 40px !important;
  height: 40px !important;
  background: transparent !important;
  border-radius: 50% !important;
  color: #7b8698 !important;
  /* 这里曾经是 display:flex !important —— !important 压得过 v-show 写在内联上的
     display:none（!important > 内联），于是「不能发言」时工具按钮照样显示。
     本文件是全局样式（\3c style> 无 scoped），特异性只需压过自己，去掉 !important 即可。 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-input-content .chat-tool-btn--on {
  background: #eef2f8 !important;
  color: #123a7a !important;
}
.chat-input-content .chat-send-btn {
  height: 40px;
  padding: 0 18px;
  border-radius: 20px;
  background: linear-gradient(135deg, #1b4b8f, #123a7a);
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
}
.chat-send-btn:active {
  transform: scale(0.97);
}
/* 「+」宫格面板：左对齐三列、52px 圆角图标底 + 12px 标签。
   ⚠ 必须**脱离文档流**：输入区容器是 display:flex，面板若作为普通兄弟元素会被排成
   同一行的 flex item（实测两者 top 相同、aboveInput 为 false），窄屏上直接跑到视口外
   —— 用户看到的就是「点了 + 没反应」。改成 fixed 浮在输入区上方。
   偏移 = tabbar(50) + 输入区(60) + 间距(6)。

   ⚠ 这 116px 里必须带上 safe-area（D214）：输入区自己是
   `bottom: calc(50px + env(safe-area-inset-bottom))`，刘海机上它顶边在 144px 而不是
   110px；面板若只写常量 116px，就会**下半截压住输入栏**（实测 safe-area = 34 时
   间距 -28px，即 60px 高的输入栏被盖掉上面 28px）—— 与投注页选号提示是同一条根因：
   浮动层锚在视口上，被它压的那个栏锚在 safe-area 上。safe-area = 0 时
   `calc(116px + 0)` 与原来的 116px 完全等价。 */
.chat-more-panel,
.chat-emoji-panel {
  position: fixed !important;
  left: 12px;
  right: 12px;
  bottom: calc(116px + env(safe-area-inset-bottom)) !important;
  bottom: calc(116px + constant(safe-area-inset-bottom)) !important;
  z-index: 90;
}
.chat-more-panel {
  display: flex;
  gap: 18px;
  margin: 0;
  padding: 14px 12px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
}
.chat-more-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
.chat-more-item:active .chat-more-icon {
  transform: scale(0.94);
}
.chat-more-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #f4f6fa;
  color: #123a7a;
  transition: transform 0.12s ease;
}
.chat-more-label {
  font-size: 12px;
  color: #5b6478;
}
/* ══ 用 ego 浏览器读线上真实 DOM 后修正的三处偏差 ═══════════════════════════
   真实渲染（已登录的线上站点）给出的实测值，推翻了我先前基于"注入假 DOM"的判断：
     ① `.avatar` borderRadius 是 **0px**（方形）、② `.user-name` 是 **rgb(11,42,91) 深藏蓝**、
     ③ `.bubble` 是**不对称圆角 `4px 14px 14px`**（左上小，天然指向头像）。
   也就是说镜像本来就用"不等圆角"表达方向感，我先前改成 18px 全圆角把这个语言弄丢了；
   而昵称本是深藏蓝（身份该有的重量），我给压成了灰。下面按真实值修正。
   另外合买卡片是四个杂乱颜色：`lottery-header` 内联红 #e23232、`lottery-info` 黑、
   第二段 `lottery-info` **yellowgreen**、卡身白字 —— 全部收到站点体系（藏蓝 / 金 / 深灰）。 */
.chat-message-item .message.received .bubble {
  border-radius: 4px 16px 16px 16px !important;
}
.chat-message-item .message.sent .bubble {
  border-radius: 16px 4px 16px 16px !important;
}
.chat-message-item .message .user-name {
  color: #0b2a5b !important;
  font-weight: 500 !important;
}
/* 卡身配色见文件末尾「合买分享卡」块：那里按 YG 2026 参考图（= 原站
   chat-room-view--jinlong 主题聊天卡）复刻成蓝底白字。原先这里是白底深字，
   与参考图冲突，已移除。 */
.chat-message-item .lottery-header {
  background-color: #123a7a !important;
  color: #fff !important;
}
.chat-message-item .lottery-header .lottery-header-left,
.chat-message-item .lottery-header .lottery-header-left * {
  color: #fff !important;
}
.chat-message-item .lottery-header .lottery-gd-btn {
  background: #e8c15a !important;
  color: #123a7a !important;
  border-radius: 14px !important;
  padding: 2px 10px !important;
  font-weight: 600;
}
.chat-message-item .lottery-info {
  color: #1d2a44 !important;
}
/* 原「第二段描述文字染金」一条随卡片改版移除：描述行（schemeDescribe）不再出现在分享
   卡上（参考图只有 玩法 + 金额 + 号码球 三块），对应节点已不存在 ——
   留下的 `.lottery-info + .lottery-info` 在这个 DOM 里永不命中，删掉免得误导。 */
/* ══ 按微信的对话规范再收一轮（YG 要求 + 用 ego 实测验证）══════════════════
   ① **头像强制正圆**（用户明确要求）：镜像原本是方形（实测 borderRadius 0），
      这里用 50% 强制成圆，并加 object-fit: cover 防止非方图被拉伸变形。
   ② **对话规范照微信**：气泡**无尖角、小圆角**（微信是圆角矩形，约 6-8px，
      既不是 2013 年的尖角、也不是我上一版给的 16px 大圆角）；最大宽度 70%；
      对方身份行（昵称 + 时间）在气泡**上方**、与气泡左缘对齐；自己的消息**只有气泡**，
      不出现昵称与时间（微信的做法）。
   ③ 输入区：**文字被按钮挤到换行** —— 工具按钮没有设 flex: none、输入框没有 min-width: 0，
      在窄屏上 flex 会一起压缩输入框，把 placeholder 挤成两行。下面把容器设成不换行、
      按钮固定不缩、输入框允许收缩但文字保持单行。 */
.chat-message-item .message-avatar-left .avatar,
.chat-message-item .message-avatar-right .avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex: none !important;
}
.chat-message-item .message.received .bubble,
.chat-message-item .message.sent .bubble {
  border-radius: 8px !important;
}
.chat-message-item .message.received .bubble::before,
.chat-message-item .message.sent .bubble::after {
  display: none !important;
}
.chat-message-item .message .bubble {
  max-width: 70% !important;
}
.chat-message-item .message > div,
.chat-message-item .message .user-info-left {
  min-width: 0;
}
/* 输入区：不许换行、按钮不参与压缩、输入框文字保持单行 */
.chat-input-content {
  flex-wrap: nowrap !important;
  overflow: hidden;
}
.chat-input-content .chat-tool-btn,
.chat-input-content .chat-send-btn,
.chat-input-content .sent-btn {
  flex: none !important;
}
.chat-input-content .chat-input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ══ 修「自己发的消息没有气泡」+ 头像错位（YG 截图报的问题）══════════════════
   根因：模板里**自己发送的文本消息用的是 `.message-text`**，而对方走的是 `.bubble`
   —— 也就是说自己那条从来就没有气泡外壳，头像自然也没法和气泡顶部对齐（一个 flex 行里
   一边是 40px 头像、另一边是裸文字，视觉上就是错位的）。这里把两种容器统一成同一套
   气泡外观：同一圆角 8px、同一内边距、同一 70% 上限、同一阴影分级。
   另外 D159 为了去掉红封套外的白边，把红包气泡的背景与内边距抹成了透明 —— 结果连
   **自己发的红包**也变成裸卡。（这条历史在 YG 2026 去气泡后已不适用：红包与合买卡
   现在**没有气泡层**，裸卡就是终态，见文件末尾「合买分享卡」块。） */
.chat-message-item .message .message-text {
  max-width: 70% !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  word-break: break-word;
}
.chat-message-item .message.received .message-text {
  background: #fff !important;
  border: 1px solid #eef1f6 !important;
  color: #1d2a44 !important;
  box-shadow: 0 2px 6px rgba(18, 58, 122, 0.06) !important;
}
.chat-message-item .message.sent .message-text {
  background: linear-gradient(135deg, #1b4b8f, #123a7a) !important;
  border: 1px solid #123a7a !important;
  color: #f7f9ff !important;
  box-shadow: 0 2px 8px rgba(18, 58, 122, 0.16) !important;
}
.chat-message-item .message .message-text-content {
  color: inherit !important;
}
/* 图片：气泡外壳（内层图片自带圆角，气泡只做 8px 的托底与 8px 内边距）。
   红包原先也走这条 —— YG 2026 去气泡后红包不再有外壳，这里只留图片。 */
.chat-message-item .message .bubble.image-bubble {
  background: #fff !important;
  border: 1px solid #eef1f6 !important;
  padding: 8px !important;
  border-radius: 8px !important;
}
/* 红包卡：去掉 emoji 徽标，靠排版分层（祝福语 → 金额 → 状态） */
.chat-message-item .redpacket-card__greeting::before {
  content: none !important;
}
.chat-message-item .redpacket-card {
  width: 176px !important;
  border-radius: 14px !important;
  padding: 14px 12px 12px !important;
  background: linear-gradient(180deg, #e6584a 0%, #d2453a 58%, #bf3a31 100%) !important;
  box-shadow: 0 6px 18px rgba(191, 58, 49, 0.24) !important;
}
.chat-message-item .redpacket-card__greeting {
  padding: 0 !important;
  font-size: 12px !important;
  letter-spacing: 0.3px;
  color: #ffe9e2 !important;
}
.chat-message-item .redpacket-card__amount {
  padding: 6px 0 0 !important;
  font-size: 20px !important;
  font-weight: 700;
  color: #fff !important;
  font-variant-numeric: tabular-nums;
}
.chat-message-item .redpacket-card__meta {
  margin-top: 10px !important;
  padding: 8px 0 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 11px !important;
  color: #ffd9d1 !important;
}
/* 红封套上的金币徽标（用伪元素画，不额外加 DOM） */
.chat-message-item .redpacket-card__greeting::before {
  content: '🧧';
  display: block;
  font-size: 26px;
  line-height: 1.2;
  margin-bottom: 4px;
}

/* ── 聊天布局最终约束：稳定头像列、昵称列和窄屏输入栏 ─────────────────────
   这段放在组件样式末尾，统一覆盖镜像 CSS 与前面历史修正，避免同一规则继续
   在多个区块之间来回改写。 */
.chat-message-item {
  width: 100% !important;
  margin: 0 0 14px !important;
  padding: 0 12px !important;
  box-sizing: border-box;
}
.chat-message-item .message {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  align-items: flex-start !important;
  gap: 10px !important;
  background: transparent !important;
}
.chat-message-item .message-avatar-left,
.chat-message-item .message-avatar-right {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  flex: 0 0 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: #e9eef6 !important;
}
.chat-message-item .message-avatar-left .avatar,
.chat-message-item .message-avatar-right .avatar,
.chat-message-item .chat-avatar-fallback {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  flex: 0 0 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  overflow: hidden !important;
}
.chat-message-item .chat-avatar-fallback {
  color: #52647f !important;
  background: #e9eef6 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}
.chat-message-item .message-avatar-right .chat-avatar-fallback {
  color: #fff !important;
  background: #123a7a !important;
}
.chat-message-item .chat-message-main {
  width: calc(100% - 50px) !important;
  max-width: calc(100% - 50px) !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  background: transparent !important;
}
.chat-message-item .chat-message-main--sent {
  width: 100% !important;
  max-width: 100% !important;
  align-items: flex-end !important;
}
.chat-message-item .message .user-info-left {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  margin: 0 0 5px !important;
}
.chat-message-item .message .user-name {
  min-width: 0 !important;
  max-width: calc(100% - 64px) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.chat-message-item .message .time {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}
.chat-message-item .message .bubble,
.chat-message-item .message .message-text {
  width: fit-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  align-self: flex-start !important;
  box-sizing: border-box !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}
.chat-message-item .message.sent .bubble,
.chat-message-item .message.sent .message-text {
  align-self: flex-end !important;
}
.chat-message-item .message .message-text-content {
  min-width: 0 !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}
.chat-message-item .message .message-bubble-content {
  /* 卡片宽度由自身决定（原站 260px，去气泡后卡片是 .chat-message-main 的直接子元素）。
     原先这里是 width:100%（给"气泡里塞一张卡"那套结构写的）——气泡去掉后它会把卡片
     拉满整列，与参考图的比例不符。这里只做"不溢出"约束。 */
  width: 260px !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.chat-message-item .message .chat-image {
  display: block !important;
  width: auto !important;
  max-width: min(220px, 100%) !important;
  height: auto !important;
  max-height: 220px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
}
.chat-message-item .redpacket-card {
  width: min(176px, 100%) !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.chat-message-item .lottery-header {
  gap: 8px !important;
  min-width: 0 !important;
}
.chat-message-item .lottery-header .lottery-header-left {
  width: auto !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
.chat-message-item .lottery-header .lottery-header-left > div {
  min-width: 0 !important;
}
.chat-message-item .lottery-header .lottery-gd-btn {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}
.chat-message-item .lottery-info {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}
.chat-input-content {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 4px !important;
  width: 100% !important;
  min-width: 0 !important;
  /* 底部安全区由镜像的 `bottom: calc(50px + env(...))` 承担，不能加在这里（60px 固定高会被压瘪）。
     键盘让位见上面那条 `bottom: max(50px + safe-area, var(--kbh))`。 */
  padding: 8px 10px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.chat-input-content .chat-input {
  /* 曾经是 display:block !important：它会盖掉 textarea 上 v-show="canSpeak" 写的
     display:none，于是闸门挡着时输入框仍然占位，和 .sent-status 同处一个 flex 行
     （两者都 flex:1 1 auto），门槛提示就被挤成半行、输入框被压到 100px 出头。
     镜像 1947.css 里 .chat-input 没有任何 display 声明，这里不带 !important 也生效。 */
  display: block;
  width: auto !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 9px 14px !important;
  line-height: 20px !important;
  white-space: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  text-overflow: clip !important;
  resize: none !important;
}
.chat-input-content .chat-tool-btn,
.chat-input-content .chat-send-btn,
.chat-input-content .sent-btn {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}
.chat-input-content .chat-tool-btn {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
}
.chat-input-content .chat-send-btn,
.chat-input-content .sent-btn {
  min-width: 60px !important;
  height: 40px !important;
  padding: 0 14px !important;
}
.chat-input-content .sent-status {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
/* v-show 隐藏态守护（登记为有意偏差，镜像没有这条）：
   v-show 把 display:none 写在元素内联样式上，而**带 !important 的类规则优先级高于内联样式**。
   这正是本次「门槛提示压在输入框上」的机制 —— .chat-input 的 display:block !important
   和 .chat-tool-btn 的 display:flex !important 把 v-show 顶掉了（.sent-btn 没人给它
   display 才正常收起），于是闸门挡着时气泡和输入框同处一个 flex 行、互相挤。
   上面两条已按根因去掉 !important；这里再兜一层，让「内联 display:none」永远赢，
   防止将来有人给这三个元素重新加 display !important 又退回老毛病。
   只命中隐藏态，可见态一个像素都不改。 */
.chat-input-content .chat-input[style*='display: none'],
.chat-input-content .chat-tool-btn[style*='display: none'],
.chat-input-content .sent-btn[style*='display: none'],
.chat-input-content .sent-status[style*='display: none'] {
  display: none !important;
}
.chat-more-panel,
.chat-emoji-panel {
  max-width: calc(100% - 24px) !important;
  box-sizing: border-box !important;
}

/* ══ 合买分享卡：YG 2026 参考图 = **原站聊天卡**的原样复刻 ══════════════════════
   参考图那身「上红下蓝 + 金钮 + 粉色号码球」不是新设计 —— H5 快照里这套规则就在
   `.chat-room-view .chat-message-list .chat-message-item .bubble .message-bubble-content`
   上（public/css/1947.css，scope id `data-v-7117b1a9`），配色由聊天室主题类决定，
   而本页聊天室根类正是 `chat-room-view--jinlong`（见本文件聊天室根节点），
   对应 1947.css 里同主题的 `.message-bubble-content { background:
   linear-gradient(180deg,#1e4f9c,#123a7a) }` 与 `.lottery-gd-btn { background:
   linear-gradient(180deg,#e8c15a,#c99a2e) }`。号码球（`.ball-row` / `.ball` /
   `.ball-red`）与「玩法 + 金额」行同样是原站既有结构，DOM 取证见
   evidence/live/chat_view/dom.html：`<div class="ball-row"><div class="ball-row">
   <div>|</div><div class="ball ball-red">0</div>…` 两组之间一条竖线 —— **那条竖线
   D217 已删**（YG：不需要显示 | 去区分），分组语义改由「一组一行」承担。
   为什么要整块重写：YG 要求这两类消息**不套气泡**，而卡片样式全都挂在 `.bubble`
   祖先上 —— 去掉气泡层等于把它们一起关掉。所以这里按**原站原值**复刻到不带
   `.bubble` 的选择器上，而不是另起一套设计。 */
.chat-message-item .message .message-bubble-content {
  background: linear-gradient(180deg, #1e4f9c, #123a7a);
  border: 1px solid rgba(46, 107, 214, 0.4);
  color: #f7faff;
  font-size: 12px;
  box-sizing: border-box;
  /* 原站是固定 height:106px + overflow:hidden。这里不锁高度：号码球多的卡内容本来
     就超过 106px（会被裁掉一截 = 信息丢失），而本轮之前落库的历史消息没有号码，
     撑到 106px 又会在卡底留一大片空白（两种都实测过）。高度交给内容，溢出仍裁。 */
  max-height: 240px;
  overflow: hidden;
}
/* 卡头是红底（参考图 / 原站模板内联 rgb(226,50,50)）。上一轮把它"收进站点体系"
   改成了藏蓝，与参考图不符 —— 按 YG 最新意图恢复成红。 */
.chat-message-item .message .message-bubble-content .lottery-header {
  background-color: #e23232 !important;
  border-radius: 6px 6px 0 0;
}
.chat-message-item .message .message-bubble-content .lottery-header .lottery-header-left,
.chat-message-item .message .message-bubble-content .lottery-header .lottery-header-left * {
  color: #fff !important;
}
.chat-message-item .message .message-bubble-content .lottery-icon-content {
  display: flex;
  align-items: center;
}
.chat-message-item .message .message-bubble-content .lottery_icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex: none;
}
/* 卡内文字统一白/浅色：底是深蓝，原来那套"黑字 + yellowgreen"是给白卡身配的 */
.chat-message-item .message .message-bubble-content .lottery-info,
.chat-message-item .message .message-bubble-content .lottery-info > div,
.chat-message-item .message .message-bubble-content .lottery-info > div > div {
  color: #fff !important;
}
.chat-message-item .message .message-bubble-content .lottery-info {
  font-size: 12px;
  font-weight: 400;
}
/* 号码球行：外层是容器、每组再套一层（原站的两层 ball-row）。
   外层 gap 取 0、组内留 2px：两层各 2px 的话，参考图那种「7 球 | 4 球」会在
   260px 卡里差几个像素放不下而折行（实测），组与组之间靠那条竖线自带的
   padding-right 拉开就行。 */
.chat-message-item .message .message-bubble-content .ball-row {
  padding: 2px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  align-items: center;
  background: transparent;
}
.chat-message-item .message .message-bubble-content .ball-row .ball-row {
  padding: 0;
  /* D217：**一组一行**。竖线删掉之后（YG：不需要显示 | 去区分），换行就是唯一的「位」
     分隔，所以每组必须独占一行 —— 否则胆码 7 个 + 拖码 4 个只有 220px < 卡片 260px，
     两组会挤在同一行里连成一片，用户分不清哪几个是胆码。卡片高度不固定（只有
     width: 260px + overflow: hidden），多一组就多一行，不会被裁。 */
  flex: 1 1 100%;
}
/* 球本体：原站 `.ball` + `.ball-red` 的值（20px 圆、135° 粉红渐变、白字） */
.chat-message-item .message .message-bubble-content .ball {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-size: 12px;
  color: #fff !important;
  background: linear-gradient(135deg, #ff6b6b, #ff4f5b);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
/* 两段之间的竖线：深蓝底上要用浅色才看得见（原站是黑字，那是配白卡身的） */
.chat-message-item .message .message-bubble-content .ball-row .ball-row > div:first-child {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  line-height: 1;
}
@media (max-width: 350px) {
.chat-message-item {
    padding-left: 8px !important;
    padding-right: 8px !important;
}
.chat-message-item .message-avatar-left,
  .chat-message-item .message-avatar-right,
  .chat-message-item .message-avatar-left .avatar,
  .chat-message-item .message-avatar-right .avatar,
  .chat-message-item .chat-avatar-fallback {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    flex-basis: 36px !important;
}
.chat-message-item .chat-message-main {
    width: calc(100% - 46px) !important;
    max-width: calc(100% - 46px) !important;
}
.chat-input-content {
    gap: 2px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
}
.chat-input-content .chat-tool-btn {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
}
.chat-input-content .chat-send-btn,
  .chat-input-content .sent-btn {
    min-width: 54px !important;
    padding: 0 10px !important;
}
}
/* 底部 tabbar 的安全区内边距改成上下各半（D224）
   「合买大厅底部导航栏下面那块空白」的根因：底栏是 `height: 50px`（content-box）+ Vant 的
   `padding-bottom: env(safe-area-inset-bottom)`，所以在有 home indicator 的机器上整条实际高
   50 + inset（实测 84px）：**图标挤在上面那 50px 里，下面 34px 全是白底** —— 视觉上就成了
   「导航栏下面悬着一块空白」。改成上下各半后：整条高度不变（50 + inset）、图标在整条 bar 里
   居中，同时仍然给 home indicator 留 inset/2 的余量（34 → 17px，够）。
   inset = 0 的机器（多数安卓 WebView）calc 出来就是 0，等于没动。
   镜像表是运行时 append 到 head 尾的，同特异性时它后到会赢，所以这里带 !important（D185 的教训）。 */
.index .index-tabbar {
  padding-top: calc(env(safe-area-inset-bottom) / 2) !important;
  padding-bottom: calc(env(safe-area-inset-bottom) / 2) !important;
}
/* 首页大厅列表的高度改成跟着布局算，不再写死 182px（D225）
   镜像给的是 `height: calc(100vh - 182px)` —— 那个 182 是手数出来的「上方占位 + 底栏」。
   实测（440×956、iPhone 档，占位 88px、底栏内容 50px）：列表本该 818px，可它只有 774px，
   于是**列表底部与底栏上沿之间空出 44px 白带** —— 就是 YG 报的「底部导航栏上方一部分空白」，
   而且这不是「安全区没算」那么简单：inset 34 时白带还剩 10px、inset 0 时才最明显（44px），
   所以有 home indicator 的机器反而不容易看出来。
   改成把这几截都写清楚：视口 - 上方占位(导航栏高 48 + 40) - 底栏内容高 50 - 安全区。
   这样两种 inset 都对（818 / 784），底栏以后改高度也只需要动这一行。
   注：`.together` / `.together-list` 与投注页的大厅**共用类名**（见本文件里跨页污染那段注释），
   所以规则一律带本页 scope 前缀；镜像表运行时 append 到 head 尾、同特异性它后到会赢，故带 !important。 */
/* 前缀用 .index（本页根）而不是 :is([data-v-4fa8baac])：投注页那个 .together 也带 4fa8baac
   （三个 scope 叠在同一个元素上），用 scope 前缀会漏过去、把投注页的列表也改高。 */
.index .together .together-list {
  /* 装到桌面（standalone）时根节点多了 47px 顶部安全区内边距（D236），这里的高度公式也要一起减，
     否则列表会往下多出 47px、压到底栏上沿以下。Safari 里 env 取 0，与原来等价。 */
  height: calc(var(--vh, 1vh) * 100 - var(--nav-bar-height) - 40px - 50px - env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px)) !important;
}
/* ── hero 的品牌徽章改成横向（D267）──────────────────────────────────────────
   镜像给的 .jl-hero__seal 是 54×54 正方块，那是为正方形图标留的；现在的 LOGO 是
   藏蓝 + 金的 ∞ 字标（约 2:1），塞进正方块只剩一半高度、看着像「缩小了一号」。
   这里只把宽度放宽到 108（高度、圆角、白底、金环一律不动），img 本来就是 contain，
   图形正好撑满、上下留白均匀。镜像表运行时 append 到 head 尾、同特异性它后到会赢，
   所以带 !important（与本文件其它覆盖同一条约定）。 */
.home-jinlong-theme .jl-hero__seal[data-v-412c8e14] {
  width: 108px !important;
}

/* ── 首页 hero 的客服入口：图标下面补「在线客服」四个字（D230）──────────────────
   镜像那个 .jl-hero__service 是 40×40 的金色圆角图标块（纯图标，塞字会撑破），所以字放在它下面：
   外面包一层纵向 flex 容器（.jl-hero__service-col），hero 自身仍是原来的横向 flex
   （logo | 文案 | 客服入口），金色块的全部镜像样式一个字不动。
   文字取 hero 副标题同款的白蓝 #e8f0ff（navy 渐变底上对比度 ≈ 12:1，10px 也够看）。 */
.home-jinlong-theme .jl-hero__service-link[data-v-412c8e14] {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}
.home-jinlong-theme .jl-hero__service-text[data-v-412c8e14] {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1;
  color: #e8f0ff;
  white-space: nowrap;
}

/* ── 聊天 tab 的新消息角标（D257）────────────────────────────────────────────
   挂成图标右上角的标准角标，不再压在图标上。父级 .van-tabbar-item__icon 本身就是
   Vant 的 van-badge__wrapper（position: relative），这里再显式声明一次以免主题样式改掉。 */
.index-tabbar-item .van-tabbar-item__icon {
  position: relative;
}
.tabbar-new-dot {
  position: absolute;
  /* 贴在图标的右上**外侧**：Vant 默认的 -50% 位移会让角标压住图标右下角一块，
     手机上一眼看上去像「图标被盖了」。这里往右上多挪 6px，与图标只剩几个像素的
     交界（实测重叠从 80px² 降到 16px²）。 */
  top: -8px;
  right: -14px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ee0a24;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-sizing: border-box;
  pointer-events: none;
}

/* 没有头像时的首字兜底（D265）：54px 圆形，配色沿用金主题的头像环（白边 + 金底蓝字） */
.me-top-avatar-initial {
  width: 54px;
  height: 54px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid #e8c15ad9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e8c15a, #c99a2e 58%, #b8860b);
  color: #123a7a;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 2px #e8c15a99, 0 6px 16px #123a7a59;
}

/* 认购栏粘底：镜像 3074 给的是 `position: sticky; bottom: 0`，但这页的 DOM 里
   认购栏的直系滚动容器是 .container（高度被内容撑开、自己不滚），真正滚动的是外层
   .together-order —— sticky 相对"最近的滚动祖先"生效，于是它从没被激活过：
   实测内容变长后认购栏 top=1582（视口 757），滚动时跟着内容一起上移。
   这里改成 fixed 锚在视口底部（!important：镜像表由 useRouteCss 运行时 append 到
   head 尾，同特异性下它赢），并给内容留出 60px 操作行 + 底部安全区的空间，
   免得最后几行被挡住。 */
/* iOS #app is the stable transformed containing block, sized to the visual viewport.
   Keep the purchase input outside content scrolling; never scrollIntoView here. */
/* Keep the action row above rounded corners/home indicator; the background
   extends to the screen edge and content reserves the same total height. */
.together-order--has-join {
  --together-safe-bottom: env(safe-area-inset-bottom, 0px);
}
html[data-ios-viewport='browser'][data-ios-keyboard] .together-order--has-join {
  --together-safe-bottom: 0px;
}
.together-order--has-join .together-order-bottom {
  position: fixed !important;
  left: 0;
  right: 0;
  bottom: var(--kbh, 0px) !important;
  height: calc(60px + var(--together-safe-bottom)) !important;
  padding-bottom: var(--together-safe-bottom) !important;
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  box-sizing: border-box !important;
  z-index: 20;
  box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.06);
}
.together-order--has-join .together-order-bottom-row {
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.together-order--has-join .container {
  padding-bottom: calc(60px + var(--together-safe-bottom));
}
.together-order[data-v-1dccae7c] .container {
  overflow-y: visible !important;
}
/* 深色/主题态不必额外配色：认购栏的底色本来就取镜像的 #fff 与主题变量 */
/* 已结束（非进行中）时的占位：与倒计时的数字同高同位，不引起布局跳动 */
/* 作用域限域（D190）：.together-order 这个类名**订单详情页（OrderDetail.vue）的根元素也在用**
   （`<div data-v-62bac7b2 class="together-order together-order--jinlong">`），不限域就是一条
   跨页可命中的规则。实测 OrderDetail 页没有 .countdown--closed 元素（它用 van-count-down），
   所以当前没有可见影响，但按同一标准加页面作用域前缀，前缀取本页根元素的 data-v-1dccae7c。 */
:is([data-v-1dccae7c]) .together-order .countdown--closed {
  display: flex;
  align-items: center;
  height: 22px;
  font-size: 13px;
  color: #9aa3b5;
}

/* ── 投注内容（D221）────────────────────────────────────────────────────────
   镜像 3074 给这一块只留了 .order-bet-type / .order-bet-number 两条规则，而重建版的模板用的是
   .order-bet-item-rule / .order-bet-item-content —— 两条选择器谁也没命中，于是「玩法 规则
   N注 M倍 X元」和号码串都以 16px 正文色原样铺开：没有层级、两注之间没有分隔，号码还是一串
   `0,2,4|1,2,3`（窄屏上会被任意折行、竖线还会跑到行首）。这里按页面既有语言重排：
   规则行两端对齐（左：玩法 + 规则胶囊；右：注数×倍数 + 金额），号码按上游分组**一组一行**
   渲染成红球，行间用与 .order-info-list-item-row 一致的浅色细线分隔。

   取值与理由（都按 WCAG AA 4.5:1 核过，白字/白底）：
     · 球体深红 `#d33a35 → #b3201f`：白字对比度 4.74 / 6.68，两端都过 AA。应用里既有的
       `.ball-red`（`#ff6b6b → #ff4f5b`）只有 2.78 / 3.22，11px 白字是不过的 —— 这个新块用
       同色系更深一档，而不是照抄既有球色。
     · 金额深金 `#8a6100`（白底 5.54:1）；品牌金 `#c99a2e` 只有 2.58:1，小字不能用它。
     · 玩法 `#123a7a`（10.98:1）、次级统计 `#5b6b8c`（5.35:1），与页面其它文字同色。

   形状沿用页面既有体系：容器直角 + 细线分隔（`.order-info-list-item-row` 就是 border-bottom
   + 40px 行高），只有球是圆的。深色主题（--casino）只换文字与细线颜色，球体保持同一个红
   （颜色一致性：一个强调色走到底）。 */
:is([data-v-1dccae7c]).together-order .order-bet .order-bet-row-wrap {
  display: flex;
  flex-direction: column;
  padding-right: 12px; /* 镜像给 .order-bet-row 的 margin-right:12px，这里一次性留出来 */
}
:is([data-v-1dccae7c]).together-order .order-bet .order-bet-row {
  /* 镜像规则是 4 类 + 属性（.together-order .container .order-bet .order-bet-row[data-v-…]），
     比这里多一层；且镜像表由 useRouteCss 运行时 append 到 head 尾，同特异性也是它赢。
     所以这两条一定要 !important（本文件里 .together-order-bottom 的先例）。 */
  margin-top: 0 !important;
  margin-right: 0 !important;
  padding: 10px 0;
  border-top: 1px solid rgba(18, 58, 122, 0.08);
}
:is([data-v-1dccae7c]).together-order .order-bet .order-bet-row:first-child {
  border-top: none;
  padding-top: 2px;
}
:is([data-v-1dccae7c]).together-order .order-bet .order-bet-item-rule {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 18px;
}
:is([data-v-1dccae7c]).together-order .order-bet .order-bet-play {
  font-size: 13px;
  font-weight: 700;
  color: #123a7a;
}
:is([data-v-1dccae7c]).together-order .order-bet .order-bet-mode {
  flex: none;
  padding: 1px 6px;
  border-radius: 9px;
  background: rgba(232, 193, 90, 0.16);
  color: #123a7a;
  font-size: 11px;
  font-weight: 600;
}
:is([data-v-1dccae7c]).together-order .order-bet .order-bet-stat {
  margin-left: auto;
  font-size: 12px;
  color: #5b6b8c;
  white-space: nowrap;
}
:is([data-v-1dccae7c]).together-order .order-bet .order-bet-amount {
  margin-left: 8px;
  min-width: 58px;
  text-align: right;
  font-size: 14px;
  font-weight: 800;
  color: #8a6100;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
:is([data-v-1dccae7c]).together-order .order-bet .order-bet-item-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 7px;
}
:is([data-v-1dccae7c]).together-order .order-bet .order-bet-ball-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
:is([data-v-1dccae7c]).together-order .order-bet .order-bet-ball {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #d33a35, #b3201f);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 2px rgba(155, 35, 31, 0.35);
}
/* 深色主题：只换文字与细线，球体仍是同一个红 */
:is([data-v-1dccae7c]).together-order.together-order--casino .order-bet .order-bet-row {
  border-top-color: rgba(84, 227, 255, 0.12);
}
:is([data-v-1dccae7c]).together-order.together-order--casino .order-bet .order-bet-play {
  color: #f8d77d;
}
:is([data-v-1dccae7c]).together-order.together-order--casino .order-bet .order-bet-mode {
  background: rgba(248, 215, 125, 0.14);
  color: #f8d77d;
}
:is([data-v-1dccae7c]).together-order.together-order--casino .order-bet .order-bet-stat {
  color: rgba(233, 243, 255, 0.66);
}
:is([data-v-1dccae7c]).together-order.together-order--casino .order-bet .order-bet-amount {
  color: #f8d77d;
}

/* ── 购彩记录的订单详情：底部弹层（D231）────────────────────────────────────
   从「居中小模态」改成「从底部滑出的 sheet」。配色沿用本页 jinlong（藏蓝 + 金）这一套 token，
   每个颜色都按 WCAG AA 核过（白底 / 白字）：
     · 主色 #123a7a 10.98:1        · 次级文字 #5b6b8c 5.35:1
     · 金额深金 #8a6100 5.54:1（品牌金 #c99a2e 只有 2.58:1，小字不能用）
     · 亏损色 #a33b3b 6.20:1       · 球 #d33a35→#b3201f 上白字 4.74 / 6.68
   形状锁：一张 sheet 只用一套圆角（容器 20px / 胶囊 999px / 小标记 8px）；
   分隔只用「相邻行之间的浅色细线」这一种，不做上下双线。
   动效只做「sheet 上滑 + 遮罩淡入」，全部走 transform / opacity，prefers-reduced-motion 下直接关掉。 */
.bet-sheet-root {
  position: fixed;
  inset: 0;
  z-index: 10000000;
}
.bet-sheet-scrim {
  position: absolute;
  inset: 0;
  background: rgba(9, 17, 33, 0.46);
  animation: bet-sheet-fade 0.18s ease-out both;
}
.bet-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  max-height: 84dvh;
  padding: 8px 16px calc(14px + env(safe-area-inset-bottom));
  border-radius: 20px 20px 0 0;
  background: #fff;
  box-shadow: 0 -14px 36px rgba(18, 58, 122, 0.18);
  animation: bet-sheet-up 0.26s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes bet-sheet-up {
from { transform: translateY(100%);
}
to { transform: translateY(0);
}
}
@keyframes bet-sheet-fade {
from { opacity: 0;
}
to { opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.bet-sheet,
  .bet-sheet-scrim { animation: none;
}
}
.bet-sheet__grabber {
  flex: none;
  width: 36px;
  height: 4px;
  margin: 2px auto 10px;
  border-radius: 2px;
  background: #dbe3ee;
}
.bet-sheet__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bet-sheet__head-main {
  flex: 1;
  min-width: 0;
}
.bet-sheet__lottery {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: #123a7a;
}
.bet-sheet__period {
  margin: 3px 0 0;
  font-size: 12px;
  color: #5b6b8c;
}
/* 状态胶囊：中奖金 / 待开奖蓝 / 其余（未中奖、撤单、失败）灰 —— 都从这一个调色板里取 */
.bet-sheet__status {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.bet-sheet__status.is-win {
  background: rgba(232, 193, 90, 0.18);
  color: #8a6100;
}
.bet-sheet__status.is-pending {
  background: rgba(46, 107, 214, 0.12);
  color: #1e4f9c;
}
.bet-sheet__status.is-muted {
  background: #eef1f6;
  color: #5b6b8c;
}
.bet-sheet__close {
  flex: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: #f2f5fa;
  color: #5b6b8c;
  font-size: 16px;
}
.bet-sheet__close:active {
  transform: scale(0.94);
}
.bet-sheet__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin-top: 14px;
}
/* 两个大数字：金额与输赢并排，输赢靠字号 + 颜色压过金额一档 */
.bet-sheet__money {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, #f7faff, #eef3fb);
}
.bet-sheet__money-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.bet-sheet__money-label {
  font-size: 11px;
  color: #5b6b8c;
}
.bet-sheet__money-value {
  font-size: 17px;
  font-weight: 800;
  color: #123a7a;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bet-sheet__money-value.is-win {
  font-size: 20px;
  color: #8a6100;
}
.bet-sheet__money-value.is-lose {
  font-size: 20px;
  color: #a33b3b;
}
.bet-sheet__rows {
  margin: 14px 0 0;
  padding: 0;
}
.bet-sheet__row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px 0;
}
.bet-sheet__row + .bet-sheet__row {
  border-top: 1px solid rgba(18, 58, 122, 0.08);
}
.bet-sheet__row dt {
  font-size: 12px;
  color: #5b6b8c;
}
.bet-sheet__row dd {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: #123a7a;
}
.bet-sheet__ellipsis {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bet-sheet__copy {
  flex: none;
  padding: 2px 9px;
  border: 1px solid rgba(18, 58, 122, 0.28);
  border-radius: 999px;
  background: #fff;
  color: #123a7a;
  font-size: 11px;
  font-weight: 600;
}
.bet-sheet__copy:active {
  transform: scale(0.96);
}
.bet-sheet__numbers {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(18, 58, 122, 0.08);
}
.bet-sheet__numbers-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: #123a7a;
}
.bet-sheet__ball-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.bet-sheet__ball-row + .bet-sheet__ball-row {
  margin-top: 5px;
}
/* 合买成员（D275）：四列网格，成员左对齐、三个金额/占比列右对齐并用等宽数字，
   行之间只用一根极浅的细线（与这张 sheet 其余分隔同一种语言）。 */
.bet-sheet__members {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid rgba(18, 58, 122, 0.08);
}
.bet-sheet__member {
  display: grid;
  grid-template-columns: 1.4fr 0.7fr 0.9fr 0.9fr;
  gap: 8px;
  align-items: center;
  padding: 9px 0;
  font-size: 12.5px;
  color: #5b6b8c;
  border-bottom: 1px solid rgba(18, 58, 122, 0.07);
}
.bet-sheet__member:last-child {
  border-bottom: none;
}
.bet-sheet__member--head {
  padding: 0 0 6px;
  font-size: 11.5px;
  color: #8a93a6;
}
.bet-sheet__member > span:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.bet-sheet__member-name {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: #1d2a44;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bet-sheet__member-tag {
  flex: none;
  padding: 1px 5px;
  border-radius: 6px;
  background: rgba(200, 162, 90, 0.16);
  color: #8a6100;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
}
.bet-sheet__member .is-win {
  color: #8a6100;
  font-weight: 700;
}
/* 球与合买详情的「投注内容」同一套（同一份 api/number-groups，同一个球色） */
/* 开奖号码用同一颗球的形状、换成金色（投注球是深红）：一处是把两个区块区分开，
   另一处是它在页面里本来就代表「结果」。白字在 #cf9930 上只有 2.6:1，所以开奖球
   用深金底 + 近黑字（#24143b on #cf9930 ≈ 6.4:1）。 */
.bet-sheet__ball--open {
  background: linear-gradient(160deg, #ffe39b, #cf9930);
  color: #24143b !important;
  box-shadow: 0 1px 2px rgba(160, 110, 20, 0.35);
}
.bet-sheet__ball {
  flex: none;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(160deg, #d33a35, #b3201f);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 2px rgba(155, 35, 31, 0.35);
}
.bet-sheet__foot {
  flex: none;
  padding-top: 12px;
}
.bet-sheet__done {
  width: 100%;
  height: 46px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff4d2, #e8c15a 60%, #c99a2e);
  color: #123a7a;
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(201, 154, 46, 0.28);
}
.bet-sheet__done:active {
  transform: scale(0.98);
}

/* ── 充值页视觉重做（D250）────────────────────────────────────────────────────
   判读：交易型单页表单，受众是已经在站内、此刻正要掏钱的人。他们要的是「看得清、
   点得准、敢按下去」，不是视觉惊喜 —— 所以 DESIGN_VARIANCE 3 / MOTION 3 / DENSITY 4：
   不做不对称构图、不做入场动画，只做三件事。

   ① 换掉对比度不达标的按钮。原来主按钮与选中档位都是「金 → 藏蓝 135° 对角渐变」：
      白字落在 #e8c15a 上只有 1.9:1（WCAG 要 4.5），滚到右半边又突然变深蓝，看着像
      渲染坏了。现在主强调色只有一个 —— 站点藏蓝 #123a7a，白字对比 10.98:1，两种态
      都过 AAA。金色 #c99a2e 降级为「货币单位 + 标题竖条」的点缀（在白底上换成同色系
      深金 #8a6100，5.54:1，项目里已用过这个值）。

   ② 统一形状语言（原来格子 4px、按钮大圆角、输入框 4px 三套并存）：
      卡片/格子/输入框 14px，主按钮与「联系客服」次按钮 999px 胶囊。
      选中态一律用「1px 边框 + inset ring + 换底色」表达，不再靠改 border 宽度 ——
      原来 2px 选中边框会让格子实打实变大 2px，一选一跳。

   ③ 建层级：页面底色 → 白卡 → 标题 → 内容。档位从「3 列 + 末尾空一格」改成 6 列网格
      （前三个各占 2 列 = 一行三个，第 4、5 个各占 3 列 = 一行两个），5 个档位正好铺满，
      不留空洞。

   所有覆盖都带 `.me-top-up--refined` 前缀并沿用镜像的选择器层级；镜像表是 useRouteCss
   运行时 append 到 head 尾的，同特异性它后到会赢（D185 的教训），而 .me-top-up-content
   里那几条是 4 类 + 1 属性，所以该带 !important 的地方都带了。 */

/* 变量覆盖：特异性比镜像那条（2 类 + 1 属性）多一个属性，不必 !important */
.me-top-up.me-top-up--jinlong.me-top-up--refined[data-v-20fa2200] {
  --topup-page-bg: #f4f7fd;
  --topup-card-bg: #ffffff;
  --topup-card-shadow: 0 2px 10px rgba(18, 58, 122, 0.05);
  --topup-card-border: rgba(18, 58, 122, 0.12);
  --topup-title-color: #123a7a;
  --topup-text-color: #10233f;
  --topup-muted-color: #445573;
  --topup-accent-color: #c99a2e;
  --topup-selected-bg: #123a7a;
  --topup-selected-text: #ffffff;
  --topup-input-bg: #ffffff;
  --topup-link-color: #123a7a;
}

/* 页面底：一层极淡的藏蓝雾，只压住顶部，越往下越白 —— 给内容区一个「起点」 */
.me-top-up.me-top-up--refined[data-v-20fa2200] {
  background:
    radial-gradient(120% 46% at 50% 0, rgba(18, 58, 122, 0.08), rgba(18, 58, 122, 0) 72%), #f4f7fd !important;
}
.me-top-up--refined .me-top-up-content {
  width: 92% !important;
  padding-top: 16px !important;
  padding-bottom: 24px;
}

/* 分区标题：竖条改成金→蓝的短标，字号压到 14px（16px 时和档位数字抢视线） */
.me-top-up--refined .me-top-up-content .me-top-up-title .me-top-up-title-icon {
  height: 15px !important;
  width: 3px !important;
  border-radius: 2px;
  background: linear-gradient(180deg, #c99a2e, #123a7a) !important;
}
.me-top-up--refined .me-top-up-content .me-top-up-title .me-top-up-title-text {
  font-size: 14px !important;
  letter-spacing: 0.2px;
}

/* ── 存款方式：4 列网格（镜像那套是 20% 宽 + 6.66% 右间距的 flex）────────── */
.me-top-up--refined .me-top-up-content .me-top-up-method {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  /* 格子自己的 margin-bottom 被清零了（原来靠它给下一段留白），所以留白挪到块级 */
  margin-top: 10px !important;
  margin-bottom: 14px !important;
}
.me-top-up--refined .me-top-up-content .me-top-up-method .me-top-up-method-item {
  flex: none !important;
  margin: 0 !important;
  aspect-ratio: 1 / 1;
  border-radius: 14px !important;
  border: 1px solid rgba(18, 58, 122, 0.12) !important;
  background: #ffffff !important;
  box-shadow: 0 2px 10px rgba(18, 58, 122, 0.05) !important;
  transition:
    box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.me-top-up--refined .me-top-up-content .me-top-up-method .me-top-up-method-item-selected {
  border-color: #123a7a !important;
  box-shadow:
    inset 0 0 0 1px #123a7a,
    0 4px 14px rgba(18, 58, 122, 0.12) !important;
}
.me-top-up--refined .me-top-up-content .me-top-up-method .me-top-up-method-item:active {
  transform: scale(0.97);
}
.me-top-up--refined .me-top-up-method-item-name {
  color: #10233f;
  font-size: 12px !important;
  font-weight: 600;
}
.me-top-up--refined
  .me-top-up-content
  .me-top-up-method
  .me-top-up-method-item-selected
  .me-top-up-method-item-name {
  color: #123a7a;
}

/* 图标 404 时的首字兜底（见模板里 hideBrokenIcon 的注释） */
.me-top-up--refined .me-top-up-method-item-icon {
  position: relative;
}
.me-top-up--refined .me-top-up-method-item-icon--broken::after {
  content: attr(data-initial);
  position: absolute;
  inset: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(18, 58, 122, 0.07);
  color: #123a7a;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

/* ── 金额档位：6 列网格，5 档正好铺满两行 ─────────────────────────────── */
.me-top-up--refined .me-top-up-content .me-top-up-amount-convention {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-top: 10px !important;
  margin-bottom: 14px !important;
}
.me-top-up--refined
  .me-top-up-content
  .me-top-up-amount-convention
  .me-top-up-amount-convention-item {
  /* 数字与「元」横排：镜像把它做成 flex column，拆开两个 span 后会竖着叠 */
  flex: none !important;
  flex-direction: row !important;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  grid-column: span 2;
  width: auto !important;
  height: 54px !important;
  margin: 0 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(18, 58, 122, 0.12) !important;
  background: #ffffff !important;
  box-shadow: 0 2px 10px rgba(18, 58, 122, 0.05) !important;
  color: #10233f !important;
  font-variant-numeric: tabular-nums;
  transition:
    box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.18s ease;
}
/* 第 4、5 档各占半行：5 个档位两行铺满，没有空位 */
.me-top-up--refined
  .me-top-up-content
  .me-top-up-amount-convention
  .me-top-up-amount-convention-item:nth-child(4),
.me-top-up--refined
  .me-top-up-content
  .me-top-up-amount-convention
  .me-top-up-amount-convention-item:nth-child(5) {
  grid-column: span 3;
}
.me-top-up--refined
  .me-top-up-content
  .me-top-up-amount-convention
  .me-top-up-amount-convention-item-selected {
  background: #123a7a !important;
  border-color: #123a7a !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(18, 58, 122, 0.2) !important;
}
.me-top-up--refined
  .me-top-up-content
  .me-top-up-amount-convention
  .me-top-up-amount-convention-item:active {
  transform: scale(0.98);
}
.me-top-up--refined .me-top-up-amount-convention-num {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.2px;
}
.me-top-up--refined .me-top-up-amount-convention-unit {
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  opacity: 0.66;
}

/* ── 自定义金额输入框 ─────────────────────────────────────────────────── */
.me-top-up--refined .me-top-up-content .me-top-up-amount-input {
  margin-top: 10px !important;
}
.me-top-up--refined .me-top-up-content .me-top-up-amount-input .me-top-up-amount-input-content {
  height: 54px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(18, 58, 122, 0.14) !important;
  background: #ffffff !important;
  padding: 0 10px 0 4px;
  box-shadow: 0 2px 10px rgba(18, 58, 122, 0.05);
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}
.me-top-up--refined .me-top-up-amount-input-content:focus-within {
  border-color: #123a7a !important;
  box-shadow: 0 0 0 3px rgba(18, 58, 122, 0.12);
}
.me-top-up--refined
  .me-top-up-content
  .me-top-up-amount-input
  .me-top-up-amount-input-content
  input {
  /* 16px 是 iOS 的硬门槛：再小一点，聚焦时 Safari 会自作主张放大整页 */
  font-size: 16px !important;
  font-weight: 700;
  color: #10233f !important;
  padding-left: 16px !important;
}
.me-top-up--refined .me-top-up-content .me-top-up-amount-input .me-top-up-amount-input-content div {
  color: #8a6100 !important;
  font-size: 14px !important;
  font-weight: 700;
  padding: 0 2px !important;
}
.me-top-up--refined .me-top-up-content .me-top-up-amount-input .me-top-up-amount-input-tips {
  margin: 10px 0 0 !important;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(18, 58, 122, 0.05);
  color: #445573 !important;
  font-size: 12.5px;
  line-height: 1.4;
}

/* ── 主按钮：唯一的主强调色，白字 10.98:1 ─────────────────────────────── */
.me-top-up--refined .me-top-up-content .van-button {
  margin-top: 18px;
  height: 54px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: #123a7a !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(18, 58, 122, 0.24) !important;
  transition:
    transform 0.16s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}
.me-top-up--refined .me-top-up-content .van-button:active {
  transform: translateY(1px) scale(0.995);
  box-shadow: 0 6px 16px rgba(18, 58, 122, 0.22) !important;
}
.me-top-up--refined .me-top-up-content .van-button__text {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* ── 联系客服：从「像禁用的灰字」改成有边界的次按钮 ───────────────────── */
.me-top-up--refined .top-up-customer-link {
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin-top: 14px !important;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(18, 58, 122, 0.2);
  background: #ffffff;
  color: #123a7a !important;
  font-size: 14px !important;
  font-weight: 600;
  transition: background-color 0.16s ease;
}
.me-top-up--refined .top-up-customer-link:active {
  background: rgba(18, 58, 122, 0.06);
}

/* ── 顶栏余额：数字 / 眼睛 / 刷新三件套对齐成一组 ─────────────────────── */
.me-top-up--refined .me-top-up-header .van-nav-bar__right {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-right: 12px;
}
.me-top-up--refined .balance-value {
  /* 内联 style 写着 color: rgb(184,134,11)，白底上只有 3.0:1，换成同色系深金 */
  color: #8a6100 !important;
  font-size: 13px !important;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  min-width: 52px;
  text-align: right;
}
.me-top-up--refined .balance-toggle-icon,
.me-top-up--refined .amount-refresh__icon {
  line-height: 1;
}

/* ── 空态 ──────────────────────────────────────────────────────────────── */
.me-top-up--refined .me-top-up-method .van-empty {
  grid-column: 1 / -1;
  padding: 20px 0;
}
.me-top-up--refined .me-top-up-method .van-empty__description {
  color: #445573;
  font-size: 13px;
}

/* 极窄屏（iPhone SE 一代这类 320px）：方式格子降到 3 列，档位数字降一档字号 */
@media (max-width: 350px) {
.me-top-up--refined .me-top-up-content .me-top-up-method {
    grid-template-columns: repeat(3, 1fr);
}
.me-top-up--refined .me-top-up-amount-convention-num {
    font-size: 15px;
}
.me-top-up--refined .me-top-up-method-item-name {
    font-size: 11px !important;
}
}

/* 降低动效：位移与过渡全关，选中态仍靠颜色区分 */
@media (prefers-reduced-motion: reduce) {
.me-top-up--refined .me-top-up-method-item,
  .me-top-up--refined .me-top-up-amount-convention-item,
  .me-top-up--refined .me-top-up-amount-input-content,
  .me-top-up--refined .van-button,
  .me-top-up--refined .top-up-customer-link {
    transition: none !important;
}
.me-top-up--refined .me-top-up-method-item:active,
  .me-top-up--refined .me-top-up-amount-convention-item:active,
  .me-top-up--refined .van-button:active {
    transform: none !important;
}
}

/* 无卡引导按钮（安卓是「先绑定银行卡」那颗 HsySecondaryButton）：
   镜像 2852 里没有这两个类，样式写在组件里，跟着主题走。 */
.withdraw-bind-hint {
  margin: 10px 0 4px;
}
.withdraw-bind-button {
  color: #fff;
  background: linear-gradient(to right, #ff6034, #ee0a24);
  border: 0;
}
.withdraw-bind-button .van-button__text {
  color: #fff;
}

/* 「选择」入口（镜像 9235 里没有这个类）：贴在银行输入框右侧，点开原有的选择面板。 */
.me-add-bank-pick {
  flex: none;
  margin-left: 8px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 13px;
  color: #ee0a24;
  background: #fdeef0;
  cursor: pointer;
  user-select: none;
}

/* 收款码上传行：镜像样式里没有这块（原站微信/支付宝账户页只有两个文本字段）。
   AddWX.vue 有同一份，两页各自独立生效。 */
.me-wallet-qrcode-cell .van-field__value {
  overflow: visible;
}
.me-wallet-qrcode {
  display: flex;
  align-items: center;
  gap: 10px;
}
.me-wallet-qrcode-pick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 32px;
  padding: 2px 8px;
  border: 1px dashed rgba(238, 10, 36, 0.45);
  border-radius: 6px;
  color: #ee0a24;
  font-size: 13px;
  cursor: pointer;
  overflow: hidden;
}
.me-wallet-qrcode-pick input {
  display: none;
}
.me-wallet-qrcode-pick img {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: contain;
}
.me-wallet-qrcode-clear {
  border: 0;
  background: transparent;
  color: #9aa3b5;
  font-size: 13px;
  padding: 0;
}

/* 收款码上传行：镜像样式里没有这块（原站微信/支付宝账户页只有两个文本字段）。
   AddAliPay.vue 有同一份，两页各自独立生效。 */
.me-wallet-qrcode-cell .van-field__value {
  overflow: visible;
}
.me-wallet-qrcode {
  display: flex;
  align-items: center;
  gap: 10px;
}
.me-wallet-qrcode-pick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 32px;
  padding: 2px 8px;
  border: 1px dashed rgba(238, 10, 36, 0.45);
  border-radius: 6px;
  color: #ee0a24;
  font-size: 13px;
  cursor: pointer;
  overflow: hidden;
}
.me-wallet-qrcode-pick input {
  display: none;
}
.me-wallet-qrcode-pick img {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: contain;
}
.me-wallet-qrcode-clear {
  border: 0;
  background: transparent;
  color: #9aa3b5;
  font-size: 13px;
  padding: 0;
}

/* 站内客服会话（D133）：1543 的导航/卡片底座 + 自有聊天区。
   三主题各一份配色，与聊天大厅（Index.vue）的既有配色同源。 */
.cs-chat-page {
  display: flex;
  flex-direction: column;
  /* 必须是**固定高度**而不是 min-height（D251）：min-height 只保证「至少这么高」，
     消息一多整页就长过可视区，输入栏被推到屏幕外 —— iOS 为了露出聚焦的输入框
     会把布局视图整块搬上去，用户看到的就是「整页消失」。固定高度 + 消息区内部滚动
     （.cs-chat-body 本来就是 flex:1 + overflow-y:auto）后，输入栏永远钉在可视底。 */
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
}
.cs-chat-status {
  text-align: center;
  font-size: 12px;
  padding: 6px 0;
  color: #6b7280;
  background: #f3f4f6;
}
/* 顶部提示条（D226）：配色与尺寸照安卓 activity_customer_service.xml 的 cs_tip ——
   琥珀底 #FFF7E6、深琥珀字 #B26A00、12px、居中、最多两行（超出省略号，安卓是
   maxLines=2 + ellipsize=end）。文案是运营在后台配的，所以只做「有就显示、空就整条不渲染」。 */
.cs-chat-tip {
  flex: none;
  padding: 8px 12px;
  background: #fff7e6;
  color: #b26a00;
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cs-chat-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* 左右 14px 是微信聊天区的边距量级（12px 时气泡贴边、头像几乎没有留白） */
  padding: 14px 14px 8px;
}
/* ── 图片预览层（D227）────────────────────────────────────────────────────
   Vant 的规则只给了 `.van-image-preview__image { width: 100% }` —— 原站的图片尺寸是靠
   `.van-image` 组件里的 img 规则收住的；我们这层是手写的，img 没有任何尺寸约束，
   所以一点开就是原始像素（图比屏幕大就直接铺出去，YG 报的「图片点击之后变得很大」）。
   这里补三件事：① 给图片容器确定高度并 flex 居中，img 的 max-* 才有可比对的尺寸；
   ② img 收在容器内（只给 max-*，不给 width/height:100% —— 小图不该被放大）；
   ③ 放大后允许溢出，transform 平移不被裁掉。
   还有一处必须补的高度：Vant 原站那页的滑动项带 `.van-swipe-item`（Swipe 组件的类，
   自身 height:100%），我们手写的只有 `__swipe-item` —— 没有高度就等于内容高，
   图片自然贴在顶上（实测图片矩形 y=0、容器 667px 而非视口 757px）。 */
.van-image-preview__swipe,
.van-image-preview__swipe-item,
.van-image-preview__image {
  overflow: visible !important;
}
.van-image-preview__swipe-item,
.van-image-preview__image {
  height: 100%;
}
.van-image-preview__image {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-preview-img {
  max-width: 100%;
  max-height: 100%;
  transform-origin: center center;
  will-change: transform;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
}
/* ── 消息区（微信式布局）──────────────────────────────────────────────────
   头像 40×40 圆角方形、与昵称/气泡顶部对齐、间距 12px；气泡圆角 6px，靠头像那侧上角
   收成 4px；同一人连续发言压到 4px、换人拉开 16px；昵称与时间轴按微信的「组内第一条
   / 间隔 5 分钟」规则出现（判定在 showTime / showName / isGrouped）。
   配色不照搬微信的绿：这是站内页面，自己说的话沿用站点主题色。
   头像三级兜底：真实头像 → 昵称首字 → 本地 SVG（客服固定用耳机图标，因为上游
   CsWireProtocol.messageData 里没有头像字段，永远拿不到图）。 */
.cs-msg {
  margin-top: 16px;
}
.cs-msg:first-child {
  margin-top: 0;
}
.cs-msg.grouped {
  margin-top: 4px;
}
.cs-msg-time {
  text-align: center;
  font-size: 12px;
  color: #b2b5bd;
  margin: 0 0 8px;
}
.cs-msg-row {
  display: flex;
  align-items: flex-start;
  /* 12px：微信里头像与气泡之间的固定间距（10px 会让两侧看着贴在一起）。
     配合 align-items: flex-start，头像顶边与昵称/气泡顶边齐平 —— 有昵称时头像跟着
     昵称走，没昵称时跟着气泡走，正是微信的对齐方式。 */
  gap: 12px;
}
/* 头像位置照微信：对方在左、自己在右 —— 用 justify-content 而不是 row-reverse。
   row-reverse 会把主轴起点搬到右边，于是自己的头像跑到气泡**左边**（第一版就是
   这样），看着像「谁在跟谁说话」都反了。DOM 顺序保持 [对方头像][中间列][我的头像]，
   两侧各只有一侧真的渲染出头像。 */
.cs-msg.cs .cs-msg-row {
  justify-content: flex-start;
}
.cs-msg.user .cs-msg-row {
  justify-content: flex-end;
}
.cs-msg-avatar {
  width: 40px;
  height: 40px;
  flex: none;
  /* 微信头像是**圆角方形**而不是圆形：40px 头像配 5px 圆角（写 50% 会立刻变
     成另一种 IM 的观感）。底色中性灰，只用来托底（自己的头像图裂掉时不会露白）。 */
  border-radius: 5px;
  background: #eef2f8;
  color: #6b7a99;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  user-select: none;
}
/* 客服侧头像：本地画的耳机图标 + 站点主色的淡底（上游 senderHeadPortrait 恒空，
   见模板注释）。图标吃 currentColor，所以换主题只改这一个 color。 */
.cs-msg.cs .cs-msg-avatar {
  background: #fdeef0;
  color: #e0403f;
}
.cs-msg-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cs-msg-avatar-icon {
  width: 24px;
  height: 24px;
  display: block;
}
/* 昵称首字（真实头像 404 时的兜底，微信默认头像同款形态） */
.cs-msg-avatar-text {
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}
/* 中间列：昵称 + 气泡。宽度上限挂在这里（而不是气泡上），
   昵称才不会跟着气泡的 max-width 一起被挤成两行。 */
.cs-msg-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 两侧各留出一个头像位（40 头像 + 12 间距 = 52，两侧共 104）：微信里自己的气泡
     也不会顶到左边缘，长消息两边同样留白对称。 */
  max-width: calc(100% - 104px);
}
.cs-msg.user .cs-msg-main {
  align-items: flex-end;
}
.cs-msg-name {
  font-size: 12px;
  line-height: 1.2;
  color: #9aa3b5;
  margin-bottom: 5px;
}
.cs-msg-bubble {
  max-width: 100%;
  padding: 10px 14px;
  border-radius: 6px;
  /* 微信正文字号：16px（15px 在手机上偏小，长段客服话术读起来费劲） */
  font-size: 16px;
  line-height: 1.45;
  word-break: break-word;
  white-space: pre-wrap;
}
.cs-msg-bubble.cs {
  background: #fff;
  color: #1f2937;
  /* 微信气泡是**平的**：没有投影、没有渐变。白气泡在浅灰底上要靠一道极淡的描边
     才能分出边界，所以是 1px 边框而不是 box-shadow。 */
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-top-left-radius: 4px;
}
.cs-msg-bubble.user {
  background: linear-gradient(to right, #ff6034, #ee0a24);
  color: #fff;
  border-top-right-radius: 4px;
}
.cs-chat-empty {
  text-align: center;
  font-size: 13px;
  color: #9aa3b5;
  padding: 24px 0;
}
.cs-chat-inputbar {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid #eef0f4;
}
.cs-chat-input {
  flex: 1;
  height: 40px;
  border: 1px solid #e3e8f0;
  border-radius: 20px;
  padding: 0 14px;
  font-size: 14px;
  outline: none;
  background: #f7f8fb;
}
.cs-chat-input:focus {
  border-color: #ee0a24;
}
.cs-chat-send {
  width: 68px;
  height: 40px;
  flex: none;
  border: none;
  border-radius: 20px;
  background: linear-gradient(to right, #ff6034, #ee0a24);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}
.cs-chat-send:disabled {
  opacity: 0.5;
}
/* 主题变体：casino 暗色（与聊天大厅同源），theme4 跟默认仅微调 */
.cs-chat-page.cs-chat-page--casino {
  background: linear-gradient(180deg, #070c17, #101734 34%, #100a23);
}
.cs-chat-page--casino .cs-chat-status {
  background: #0d1833;
  color: #e9f3ffd1;
}
/* 暗色主题下的提示条：同样走琥珀色系（半透明底 + 提亮的字，深底上对比度 ≈ 8:1），
   这样「客服提示」在三个主题里都是同一种颜色语言。 */
.cs-chat-page--casino .cs-chat-tip {
  background: rgba(178, 106, 0, 0.16);
  color: #f0b566;
}
.cs-chat-page--casino .cs-msg-bubble.cs {
  background: #101c3bfa;
  color: #edf8ff;
  border-color: #54e3ff1f;
}
.cs-chat-page--casino .cs-msg-avatar {
  background: #101c3b;
  color: #93a7cc;
}
.cs-chat-page--casino .cs-msg.cs .cs-msg-avatar {
  background: #12203f;
  color: #8ab6ff;
}
.cs-chat-page--casino .cs-msg-name {
  color: #93a7cc;
}
.cs-chat-page--casino .cs-chat-empty,
.cs-chat-page--casino .cs-msg-time {
  color: #e9f3ff99;
}
.cs-chat-page--casino .cs-chat-inputbar {
  background: #0d1833fa;
  border-top-color: #54e3ff1f;
}
.cs-chat-page--casino .cs-chat-input {
  background: #54e3ff14;
  border-color: #54e3ff29;
  color: #edf8ff;
}
.cs-chat-page--casino .cs-chat-send {
  background: linear-gradient(135deg, #2f4f9d, #16254b 58%, #0a1124);
}
.cs-chat-page.cs-chat-page--theme4 .cs-msg-bubble.user {
  background: linear-gradient(135deg, #e03d3e, #e03d3e 58%, #b71c1c);
}
.cs-chat-page.cs-chat-page--theme4 .cs-msg-avatar {
  background: #f3f5f9;
  color: #8a7a7a;
}
.cs-chat-page.cs-chat-page--theme4 .cs-msg.cs .cs-msg-avatar {
  background: #fdecec;
  color: #b71c1c;
}
.cs-chat-page--theme4 .cs-chat-send {
  background: linear-gradient(135deg, #e03d3e, #e03d3e 58%, #b71c1c);
}
/* ── 图片消息与附件按钮（D135）─────────────────────────────────────────────
   这些规则**必须**留在本组件里，不能像初版那样借 5655.css：
   · 5655 是 /customer_service 的原站样式表，public/h5/css 下全是镜像原样字节，
     生成脚本（stage-h5-css）会整张覆盖掉追加内容；
   · 深链直接打开 /cs_chat（PWA 从主屏图标进来、刷新页面）时只加载本页的
     1543，5655 压根不在文档里 —— 图片气泡会退化成原始尺寸的裸 <img>，
     加号按钮也会变回带边框的系统按钮。 */
.cs-chat-attach {
  width: 40px;
  height: 40px;
  flex: none;
  border: 1px solid #e3e8f0;
  border-radius: 20px;
  background: #f7f8fb;
  color: #5b6b8c;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}
.cs-chat-attach:disabled {
  opacity: 0.45;
  cursor: default;
}
/* 图片气泡：去掉文字气泡的内边距/底色/阴影，让图本身成为气泡。
   三条选择器并列是**故意的**：casino / theme4 各自用 0,3,0 的规则给
   .cs-msg-bubble.cs|.user 刷了背景，图片气泡必须用同权重且更靠后来盖住。 */
.cs-msg-bubble.image,
.cs-chat-page--casino .cs-msg-bubble.image,
.cs-chat-page.cs-chat-page--theme4 .cs-msg-bubble.image {
  position: relative;
  padding: 0;
  background: transparent;
  box-shadow: none;
  /* 文字气泡那圈描边对图片是脏的（图片自带边界），这里显式抹掉 */
  border: 0;
  line-height: 0;
  overflow: hidden;
  border-radius: 6px;
  cursor: zoom-in;
}
.cs-msg-image {
  display: block;
  /* 图片消息比文字气泡宽一档（微信同理）：文字那边一屏能读十几字就够，
     截图/凭证这类内容窄了就没法看。上限仍留住左右留白。 */
  max-width: min(220px, 60vw);
  max-height: 260px;
  border-radius: 6px;
  object-fit: cover;
  background: #eef2f8;
}
.cs-chat-page--casino .cs-msg-image {
  background: #101c3b;
}
/* 上传中 / 上传失败：盖在预览图上的一层状态遮罩 */
.cs-msg-image-state {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  text-align: center;
  background: rgba(17, 24, 39, 0.55);
  color: #fff;
  font-size: 12px;
  line-height: 1.3;
  border-radius: 6px;
}
.cs-msg-image-state.failed {
  background: rgba(153, 27, 27, 0.68);
  cursor: pointer;
}
.cs-msg-spin {
  width: 12px;
  height: 12px;
  flex: none;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: cs-spin 0.8s linear infinite;
}
@keyframes cs-spin {
to {
    transform: rotate(1turn);
}
}
.cs-chat-page--casino .cs-chat-attach {
  background: #54e3ff14;
  border-color: #54e3ff29;
  color: #edf8ff;
}
.cs-chat-page.cs-chat-page--theme4 .cs-chat-attach {
  background: #fff;
  border-color: #cbd5e1;
  color: #b71c1c;
}
/* ── 三个资金流水页共用的卡片列表 ────────────────────────────────────────────
   充值明细 /top_up_log · 提款明细 /withdraw_log · 资金明细 /cashLog

   为什么要共用一份：这三页的原站 DOM 是同一套骨架（.me-cash-log-content >
   .me-cash-log-item-list > .me-cash-log-item > van-col 列），YG 要求后两页与充值明细
   一致（2026-10-04）。共用一份就不会再各写各的、改一页漂一页。

   为什么每条都带 :is([data-v-…]) 前缀 —— **这是上一轮跨页污染的根因**：
   旧写法把 `.me-cash-log-content` / `.me-cash-log-item-col--amount` 这类裸类名写在
   组件根级 <style> 里，编译出来就是全局规则。实测（CDP
   CSS.getMatchedStylesForNode）资金明细页的金额列被充值明细页的
   `order:1 / color:#b8860b / font-size:20px` 命中、内容区吃到它的 `padding:12px`。
   三个 data-v 属性是原站各自 SFC 的 __scopeId，页页唯一 —— 用它做前缀既精准命中
   这三页，又不会伸到别的页面去，而且不用改模板。

   为什么整段都带 !important —— 镜像表是运行时 append 到 <head> 末尾的（api/route-css.js），
   同特异度时后到的赢；镜像的卡片规则是「4 个类 + 属性选择器」的完整链，链式对齐后
   仍然它后到。这条经验来自 D185，别"顺手"把 !important 去掉。

   布局：每行 = 一张卡（grid 两列），自上而下
     ① 金额（主角，20px/700/站点金）
     ② 订单号（充值/提款）或 日期｜余额（资金明细）
     ③ 状态/类型 · 日期（辅助信息，最弱）
   表头（.me-cash-log-sub-header）三页都已按 YG 要求删除，卡片式不需要列名。 */

:is([data-v-7eaed191], [data-v-73a218b4], [data-v-134f5909]) .me-cash-log-content {
  box-sizing: border-box !important;
  /* 导航栏之下铺满视口：镜像各页给的是「-130px」「- 导航栏 - 32px」两种写法，那 32px
     原本是表头的高度；表头删了，统一成只减导航栏，三页高度才一致。 */
  height: calc(var(--vh, 1vh) * 100 - var(--nav-bar-height)) !important;
  padding: 12px !important;
  overflow: auto !important;
}

/* 列表本身不画卡片：卡片是每一行 */
:is([data-v-7eaed191], [data-v-73a218b4], [data-v-134f5909]) .me-cash-log-content .me-cash-log-item-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-bottom: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

:is([data-v-7eaed191], [data-v-73a218b4], [data-v-134f5909]) .me-cash-log-content .me-cash-log-item-list .me-cash-log-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 4px 10px !important;
  height: auto !important;
  min-height: 0 !important;
  align-content: start !important;
  padding: 14px !important;
  border-bottom: 0 !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 2px 10px rgba(18, 58, 122, 0.07) !important;
  line-height: 1.45 !important;
}

/* 镜像把每一列钉成 van-col 的百分比宽度并居中；卡片里改为按内容定位 */
:is([data-v-7eaed191], [data-v-73a218b4], [data-v-134f5909]) .me-cash-log-content .me-cash-log-item-list .me-cash-log-item > [class*='van-col'] {
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  text-align: left !important;
}

/* ① 金额：三页的主角，压在卡片首行（含镜像的红色改成站点金） */
:is([data-v-7eaed191], [data-v-73a218b4], [data-v-134f5909]) .me-cash-log-content .me-cash-log-item-list .me-cash-log-item .me-cash-log-item-col--amount {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #b8860b !important;
  font-variant-numeric: tabular-nums;
  line-height: 1.2 !important;
}

/* ② 订单号：身份信息，弱化（充值明细 / 提款明细） */
:is([data-v-7eaed191], [data-v-73a218b4]) .me-cash-log-content .me-cash-log-item-list .me-cash-log-item .me-cash-log-item-col-id {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  display: block !important;
  font-size: 12px !important;
  color: #7b8698 !important;
  word-break: break-all !important;
  text-align: left !important;
}

/* ③ 日期 · 状态：辅助信息，最弱 */
/* 充值明细：时间 + 箭头一行 */
:is([data-v-7eaed191]) .me-cash-log-content .me-cash-log-item-list .me-cash-log-item .me-cash-log-item-col--right {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: #9aa3b5 !important;
  white-space: nowrap !important;
}

/* 提款明细：状态在左（金色点出）、日期在右 */
:is([data-v-73a218b4]) .me-cash-log-content .me-cash-log-item-list .me-cash-log-item .me-cash-log-item-col--center:not([class*='--amount']) {
  grid-column: 1 !important;
  grid-row: 3 !important;
  font-size: 12px !important;
  color: #c99a2e !important;
  text-align: left !important;
}

:is([data-v-73a218b4]) .me-cash-log-content .me-cash-log-item-list .me-cash-log-item .me-cash-log-item-col--right {
  grid-column: 2 !important;
  grid-row: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: #9aa3b5 !important;
  white-space: nowrap !important;
  text-align: right !important;
}

/* 资金明细：② 左「日期」右「余额」；③ 类型一行 */
:is([data-v-134f5909]) .me-cash-log-content .me-cash-log-item-list .me-cash-log-item .me-cash-log-item-col:not([class*='--amount']):not([class*='--center']):not([class*='--balance']) {
  grid-column: 1 !important;
  grid-row: 2 !important;
  font-size: 12px !important;
  color: #7b8698 !important;
  white-space: nowrap !important;
}

:is([data-v-134f5909]) .me-cash-log-content .me-cash-log-item-list .me-cash-log-item .me-cash-log-item-col--balance {
  grid-column: 2 !important;
  grid-row: 2 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #123a7a !important;
  white-space: nowrap !important;
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}

:is([data-v-134f5909]) .me-cash-log-content .me-cash-log-item-list .me-cash-log-item .me-cash-log-item-col--center {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  font-size: 12px !important;
  color: #9aa3b5 !important;
  text-align: left !important;
}

/* 按下反馈（技能 4.5）：轻微缩放，不要位移 */
:is([data-v-7eaed191], [data-v-73a218b4], [data-v-134f5909]) .me-cash-log-content .me-cash-log-item-list .me-cash-log-item:active {
  transform: scale(0.985) !important;
}

/* 列表与卡片都不画线：卡片靠白底 + 轻阴影与页面背景区分（YG 要求） */
:is([data-v-7eaed191], [data-v-73a218b4], [data-v-134f5909]) .me-cash-log-content .me-cash-log-item-list,
:is([data-v-7eaed191], [data-v-73a218b4], [data-v-134f5909]) .me-cash-log-content .me-cash-log-item-list .me-cash-log-item {
  border: 0 !important;
  outline: 0 !important;
}

/* 收尾文案与空态：给足留白，别贴着卡片 */
:is([data-v-7eaed191], [data-v-73a218b4], [data-v-134f5909]) .me-cash-log-content .van-list__finished-text {
  padding: 14px 0 4px !important;
  font-size: 12px !important;
  color: #aab3c2 !important;
  text-align: center !important;
}

:is([data-v-7eaed191], [data-v-73a218b4], [data-v-134f5909]) .me-cash-log-content .van-empty {
  padding: 48px 0 !important;
}

:is([data-v-7eaed191], [data-v-73a218b4], [data-v-134f5909]) .me-cash-log-content .van-empty .van-empty__description {
  color: #7b8698 !important;
  font-size: 13px !important;
}

/* ── 提款明细的状态列（D255）────────────────────────────────────────────────
   这一列以前读的是镜像站的 CASH_TYPE 表，与本项目上游 status 编码错位（上游 4=完成 会
   印成「等待出款」、5=撤销 印成「出款成功」），所以状态长期在说反话。文案已改成优先用
   上游译好的 statusStr（见 withdrawLog.vue 的 statusText），这里只负责三态分色：
   审核中/撤单审核中 → 深金（白底 5.5:1）、完成 → 藏蓝（10.9:1）、驳回/撤销 → 深红（7.6:1）。 */
:is([data-v-73a218b4]) .me-cash-log-content .me-cash-log-item-list .me-cash-log-item .me-cash-log-item-col--status {
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap;
}

:is([data-v-73a218b4]) .me-cash-log-content .me-cash-log-item-list .me-cash-log-item .me-cash-log-item-col--status.is-pending {
  color: #8a6100 !important;
}

:is([data-v-73a218b4]) .me-cash-log-content .me-cash-log-item-list .me-cash-log-item .me-cash-log-item-col--status.is-success {
  color: #123a7a !important;
}

:is([data-v-73a218b4]) .me-cash-log-content .me-cash-log-item-list .me-cash-log-item .me-cash-log-item-col--status.is-failed {
  color: #b3201f !important;
}

/* 没有头像时的首字兜底（D265）：与镜像给 img 的 42px 圆形同尺寸 */
.me-info-avatar-initial {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef3fb;
  color: #123a7a;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

/* ── 资金明细：类型格里并排一枚「彩种」胶囊（D222）────────────────────────
   布局由 src/styles/cash-log-cards.css 的卡片 grid 决定（金额第一行、日期｜余额第二行、
   类型整行第三行），所以这里只做两件事：把类型格改成横向 flex、给胶囊定样式。
   胶囊配色沿用页面既有的层次（金底 16% + 藏蓝字，与卡片、投注内容里的小标记同一套），
   不新造颜色；只有购彩 / 中奖 / 撤单这几类账变有彩种，其余行整枚不渲染。 */
:is([data-v-134f5909]).me-cash-log .me-cash-log-item-col--center {
  display: flex;
  align-items: center;
  gap: 6px;
}
:is([data-v-134f5909]).me-cash-log .me-cash-log-item-type {
  flex: none;
}
:is([data-v-134f5909]).me-cash-log .me-cash-log-item-lottery {
  max-width: 100%;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(232, 193, 90, 0.16);
  color: #123a7a;
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 深色主题只换胶囊的底色与字色 */
:is([data-v-134f5909]).me-cash-log--casino .me-cash-log-item-lottery {
  background: rgba(248, 215, 125, 0.14);
  color: #f8d77d;
}

/* 成员购彩（tab 2）与成员详细（tab 4）改成卡片式后需要的最小样式。
 *
 * 为什么原站那套不够用：原站的 .teams-log-item 是 height:40px 的**一行五格**横排
 * （.teams-log-item-col 靠 van-col--5 分宽、靠 :nth-child 定对齐，见 /h5/css/2431.css），
 * 手机上一行挤五个字段根本读不出来。卡片要纵向堆叠，就必须覆盖 display/height ——
 * 这是原站样式覆盖不到的形态，所以只能在这里补。除布局外一律复用原站类：
 * 金额/操作/状态三格仍走 teams-log-item-col--amount / --action / --status 的既有配色，
 * 主题（theme4 / casino）对 .teams-log-item 的圆角与底色也照样生效。
 * 选择器刻意带上与 2431.css 相同的前缀（.teams-log .teams-log-content .teams-log-item-list），
 * 否则压不过原站那条 .teams-log-item{height:40px}。 */
.teams-log .teams-log-content .teams-log-item-list .teams-log-item.teams-log-item--card[data-v-e7f53553] {
  display: block;
  height: auto;
  padding: 8px 2px;
}
/* 卡片之间给一条分隔线：默认主题下 .teams-log-item 原本靠 40px 固定行高分隔，
   改成自适应高度后行与行会糊在一起。 */
.teams-log .teams-log-content .teams-log-item-list .teams-log-item--card + .teams-log-item--card[data-v-e7f53553] {
  border-top: 1px solid #f2f3f5;
}
.teams-log .teams-log-item--card .teams-log-card-row[data-v-e7f53553] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.teams-log .teams-log-item--card .teams-log-card-name[data-v-e7f53553] {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.teams-log .teams-log-item--card .teams-log-card-account[data-v-e7f53553] {
  flex: 0 0 auto;
  color: #a9a9a9;
}
/* 状态标签：原站只有一个纯文字的状态格（.teams-log-item-col--status 只上红色），
   这里要的是「小圆角标签」，底色按成功/进行中/失败三档分 —— 原站没有这三种底色。 */
.teams-log .teams-log-item--card .teams-log-card-status[data-v-e7f53553] {
  flex: 0 0 auto;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
}
.teams-log .teams-log-item--card .teams-log-card-status--success[data-v-e7f53553] {
  background: #e8f7ee;
  color: #1a9c53;
}
.teams-log .teams-log-item--card .teams-log-card-status--pending[data-v-e7f53553] {
  background: #fff4e5;
  color: #c47f17;
}
.teams-log .teams-log-item--card .teams-log-card-status--fail[data-v-e7f53553] {
  background: #fdecec;
  color: #d0342c;
}
.teams-log .teams-log-item--card .teams-log-card-amount[data-v-e7f53553] {
  font-size: 16px;
  line-height: 26px;
  font-weight: 700;
}
.teams-log .teams-log-item--card .teams-log-card-meta[data-v-e7f53553] {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: #a9a9a9;
  font-size: 11px;
}
.teams-log .teams-log-item--card .teams-log-card-time[data-v-e7f53553] {
  margin-left: auto;
}
.teams-log .teams-log-item--card .teams-log-card-fields[data-v-e7f53553] {
  display: flex;
  gap: 12px;
  margin: 6px 0;
}
.teams-log .teams-log-item--card .teams-log-card-field[data-v-e7f53553] {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  align-items: baseline;
  gap: 6px;
}
.teams-log .teams-log-item--card .teams-log-card-field__label[data-v-e7f53553] {
  flex: 0 0 auto;
  color: #a9a9a9;
}
.teams-log .teams-log-item--card .teams-log-card-field__value[data-v-e7f53553] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 头像：原站这两个 tab 没有头像位（成员列表只有一格昵称文字），是照着 headPortrait 补的；
   取不到或 404 时用首字占位，不留裂图。 */
.teams-log .teams-log-avatar[data-v-e7f53553] {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: 6px;
  border-radius: 50%;
  overflow: hidden;
  background: #f2f3f5;
}
.teams-log .teams-log-avatar img[data-v-e7f53553] {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.teams-log .teams-log-avatar__text[data-v-e7f53553] {
  color: #969799;
  font-size: 12px;
  line-height: 1;
}
/* 成员列表那一格现在是「头像 + 昵称」（原来只有昵称文字），表头四列也跟着从 5/5/5/5/4 变 6/6/6/6。 */
.teams-log .teams-log-item-col--user[data-v-e7f53553] {
  display: flex;
  align-items: center;
  min-width: 0;
}
.teams-log .teams-log-item-col--user .teams-log-user-name[data-v-e7f53553] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 卡片第一行：头像 + 昵称吃掉剩余宽度，右侧两个标签按内容固定。 */
.teams-log .teams-log-item--card .teams-log-card-name[data-v-e7f53553] {
  flex: 1 1 auto;
  min-width: 0;
}
/* 「合买 / 自购」标签：中性灰，与右侧彩色的状态标签区分开。 */
.teams-log .teams-log-item--card .teams-log-card-kind[data-v-e7f53553] {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 11px;
  background: #f2f3f5;
  color: #646566;
}
/* 请求期间的可见 loading：切 tab / 搜索 / 首屏都不能只剩一片空白（原站 markup 里没有这一块）。 */
.teams-log .teams-log-loading[data-v-e7f53553] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-top: 60px;
  color: #969799;
  font-size: 13px;
}
.teams-log .teams-log-loading__icon[data-v-e7f53553] {
  animation: teams-log-spin-e7f53553 1s linear infinite;
}
@keyframes teams-log-spin-e7f53553 {
to {
    transform: rotate(360deg);
}
}
/* 日期弹层：overlay / popup 的外观来自镜像站自带的 van 样式，这里补内部布局与层级
   （触发框与清除按钮仍是原站的 teams-date-filter__* 类，没有改动其外观）。
   层级必须显式写：vant 的 .van-overlay 带 z-index:var(--van-overlay-z-index)（=1），
   .van-popup 却没有 z-index（auto）—— 遮罩因此压在弹层之上，弹层里的日期输入框与
   「清除/确定」按钮全都点不到，点下去命中遮罩反而触发 closeDatePicker 把弹层关掉，
   表现正是「选择日期点了没反应」。这里把遮罩与弹层抬到页面固定头
   （.teams-log-header，z-index:1000）之上，弹层再比遮罩高一层。 */
.teams-log-date-overlay[data-v-e7f53553] {
  z-index: 1200;
}
.teams-log-date-popup[data-v-e7f53553] {
  z-index: 1201;
  padding: 16px 16px 20px;
}
.teams-log-date-popup__title[data-v-e7f53553] {
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}
.teams-log-date-popup__field[data-v-e7f53553] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  font-size: 14px;
}
.teams-log-date-popup__field input[data-v-e7f53553] {
  flex: 1 1 auto;
  padding: 6px 8px;
  border: 1px solid #ebedf0;
  border-radius: 6px;
  background: #fff;
  color: inherit;
  font-size: 14px;
}
.teams-log-date-popup__actions[data-v-e7f53553] {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}
.teams-log-date-popup__btn[data-v-e7f53553] {
  flex: 1 1 0;
  height: 40px;
  border: none;
  border-radius: 20px;
  background: #f2f3f5;
  color: #323233;
  font-size: 14px;
}
.teams-log-date-popup__btn--primary[data-v-e7f53553] {
  background: red;
  color: #fff;
}

/* ══ 资料卡片：银行卡 / 支付宝 / 微信 / USDT 共用一套骨架 ═══════════════════════
   快照表 2876.css 是原站字节、不能改。它给卡片那一族规则各自带了一个
   [data-v-62201d29]，所以这里的容器规则统一挂 `html` 前缀 —— 元素计数 +1 就能稳定
   压过它，与「两张表谁先谁后」无关，也就不需要 !important（.me-wallet-list 受 v-show
   控制，display 这条线一根都不碰，见 Index.vue 末尾的隐藏态守护规则）。

   配色一律走站点变量（--card / --text / --muted / --line / --shadow2 / --brand）：
   默认、theme4、casino_vegas 三套主题各自覆盖它们，卡片不会出现白底白字或黑底黑字。
   快照那身是「橙红渐变 + 白字 + 重投影」，偏偏姓名是 #111827 —— 压在渐变上对比度不足，
   四类账户还长得一模一样，分不出是银行卡还是微信。 */
html .me-wallet[data-v-62201d29] {
  --wallet-card-bg: var(--card, #fff);
  --wallet-list-card-bg: var(--card, #fff);
  --wallet-list-card-text: var(--text, #111827);
  --wallet-list-card-strong: var(--text, #111827);
  --wallet-card-shadow: var(--shadow2, 0 12px 28px rgba(17, 24, 39, 0.1));
}

/* 列表两侧内缩改成与 tab 行同一个 12px：快照是 width:98% 居中，卡片比 tab 宽出一截。
   首尾不贴边由这里的 margin-top 与卡片的 margin-bottom 一起给。 */
html .me-wallet .me-wallet-content .me-wallet-list[data-v-62201d29] {
  width: auto;
  margin: 12px 12px 0;
}

/* 卡片本体：主题面板底 + 14px 圆角 + 主题柔和阴影 + 1px 描边
   （theme4 页面底就是白的，只靠阴影卡片会浮不起来） */
html .me-wallet .me-wallet-content .me-wallet-list .me-wallet-list-item[data-v-62201d29] {
  padding: 14px 16px;
  border: 1px solid var(--line, rgba(17, 24, 39, 0.08));
  border-radius: var(--radius2, 14px);
  margin-bottom: 12px;
  color: var(--text, #111827);
  transition:
    box-shadow 0.16s ease,
    border-color 0.16s ease;
  -webkit-tap-highlight-color: transparent;
}
/* 按下反馈：整块压暗一档 + 描边转主题色，不做位移、不做动画 */
html .me-wallet .me-wallet-content .me-wallet-list .me-wallet-list-item[data-v-62201d29]:active {
  border-color: var(--brand, #ef4444);
  box-shadow:
    var(--wallet-card-shadow),
    inset 0 0 0 999px rgba(17, 24, 39, 0.035);
}

/* 第一层 —— 类型：左边徽标（图标 + 短标签），右边删除键 */
html
  .me-wallet
  .me-wallet-content
  .me-wallet-list
  .me-wallet-list-item
  .me-wallet-list-item-top[data-v-62201d29] {
  gap: 10px;
  padding: 0;
  justify-content: space-between;
}
.me-wallet-list-item-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 2px 10px 2px 2px;
  border-radius: 999px;
  background: var(--acct-tint, rgba(239, 68, 68, 0.1));
  color: var(--acct-color, var(--brand, #ef4444));
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.me-wallet-list-item-badge .van-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--acct-color, var(--brand, #ef4444));
  color: #fff;
  font-size: 13px;
}
/* 四类的区分色：银行卡用站点主色（三套主题各自的主色），另外三类用各自的品牌色 */
.me-wallet-list-item--bank {
  --acct-color: var(--brand, #ef4444);
  --acct-tint: var(--brand-soft, rgba(239, 68, 68, 0.1));
}
.me-wallet-list-item--alipay {
  --acct-color: #1677ff;
  --acct-tint: rgba(22, 119, 255, 0.12);
}
.me-wallet-list-item--wechat {
  --acct-color: #07c160;
  --acct-tint: rgba(7, 193, 96, 0.12);
}
.me-wallet-list-item--usdt {
  --acct-color: #26a17b;
  --acct-tint: rgba(38, 161, 123, 0.12);
}

/* 删除键：快照是白圆（在白卡上等于没有），改成主题描边色的浅圆 + 次级色叉号 */
html
  .me-wallet
  .me-wallet-content
  .me-wallet-list
  .me-wallet-list-item
  .me-wallet-list-item-top
  .me-wallet-list-item-delete[data-v-62201d29] {
  flex: none;
  width: 26px;
  height: 26px;
  background-color: var(--line, rgba(17, 24, 39, 0.08));
  color: var(--muted, #6b7280);
}
.me-wallet-list-item-delete .van-icon {
  font-size: 13px;
}
.me-wallet-list-item-delete:active {
  background-color: var(--brand-soft, rgba(239, 68, 68, 0.1));
  color: var(--brand, #ef4444);
}

/* 第二层 —— 账号 / 卡号（主信息）：正常字号 + 深色；右栏是收款码（有图才渲染，不留空档） */
.me-wallet-list-item-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.me-wallet-list-item-main > .me-wallet-list-item-bank-number {
  flex: 1 1 auto;
}
html
  .me-wallet
  .me-wallet-content
  .me-wallet-list
  .me-wallet-list-item
  .me-wallet-list-item-bank-number[data-v-62201d29] {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  row-gap: 2px;
  min-width: 0;
  padding: 0;
  margin-top: 10px;
  color: var(--text, #111827);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.3px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
/* 分段：银行卡按 4 位一段，段间留白由 gap 给（DOM 里没有空格，读到的仍是整串卡号） */
.me-wallet-list-item-bank-number-group {
  min-width: 0;
  max-width: 100%;
}
/* 单段（手机号、微信名、USDT 地址这类）：最多两行，超出省略，长地址顶不破卡片 */
.me-wallet-list-item-bank-number-group:only-child {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-all;
}
.me-wallet-list-item-qrcode {
  flex: none;
  margin-top: 6px;
  padding: 3px;
  border: 1px solid var(--line, rgba(17, 24, 39, 0.08));
  border-radius: 10px;
  background: #fff;
}
.me-wallet-list-item-qrcode img {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
  /* 图挂了（后端文件被删 / 404）时不摆碎图图标和 alt 文字，只留一个安静的白框。
     这两条只作用在「图没画出来」的状态，正常出图时 img 是替换内容，不受影响。 */
  color: transparent;
  text-indent: -9999px;
  overflow: hidden;
}

/* 第三层 —— 姓名与银行名（次要信息）：小一号 + 次级色。
   银行名那条必须挂满祖先链：快照给它的是 `... .me-wallet-list-item-bank-name[data-v-62201d29]`
   （0,5,0，还带 width:100% 与 flex:auto），光靠类名压不动，会自己占一整行。 */
html .me-wallet .me-wallet-content .me-wallet-list .me-wallet-list-item .me-wallet-list-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
  margin-top: 6px;
}
html
  .me-wallet
  .me-wallet-content
  .me-wallet-list
  .me-wallet-list-item
  .me-wallet-list-item-real-name[data-v-62201d29],
html
  .me-wallet
  .me-wallet-content
  .me-wallet-list
  .me-wallet-list-item
  .me-wallet-list-item-meta
  .me-wallet-list-item-bank-name[data-v-62201d29] {
  flex: none;
  width: auto;
  color: var(--muted, #6b7280);
  font-size: 13px;
  line-height: 1.4;
}
/* 分隔点只在银行名真的渲染出来时出现（那一行是 v-if：只有银行卡有银行名） */
.me-wallet-list-item-bank-name::before {
  content: '·';
  margin: 0 6px;
}

/* 空态：镜像 2876 里没有这一块（原站四种 tab 都有各自的添加按钮，没有空态文案）。
   图标 + 一句话就够了 —— 「+ 添加」入口本来就在紧跟的下一行，不重复放按钮。 */
.me-wallet-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 30px 16px 6px;
  text-align: center;
  font-size: 13px;
  color: var(--muted, #9aa3b5);
}
.me-wallet-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--brand-soft, rgba(239, 68, 68, 0.1));
  color: var(--brand, #ef4444);
}
.me-wallet-empty-icon .van-icon {
  font-size: 22px;
}

/* 四个分类 tab（原站 bundle 2876 的 wallet_methods 是四个切换项，快照里没有留下可复制的
   类名，这里按页面既有观感自建：与添加按钮同一套橙红渐变作为选中态）。
   未选中的底/字改用主题变量，免得三套主题下都是同一块石板灰。 */
.me-wallet-tabs {
  display: flex;
  gap: 8px;
  padding: 10px 12px 2px;
}
.me-wallet-tab {
  flex: 1;
  text-align: center;
  font-size: 13px;
  line-height: 30px;
  color: var(--muted, #5b6b8c);
  background: var(--line, rgba(91, 107, 140, 0.08));
  border-radius: 8px;
}
.me-wallet-tab--active {
  color: #fff;
  background: linear-gradient(to right, rgb(255, 96, 52), rgb(238, 10, 36));
  font-weight: 600;
}

/* 页面重做后的样式全部是自有类（agent-*），三套主题按 <html data-app-theme> 适配
   （useHomeTheme 的 mirrorToHtml 会把这个属性写上去）。 */
.agent-page {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.agent-card {
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}
/* 邀请卡：整页唯一的主角，用站点主色的渐变 + 大号等宽数字 */
.agent-code-card {
  padding: 22px 18px 18px;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, #ff6034, #ee0a24);
  box-shadow: 0 10px 26px rgba(238, 10, 36, 0.22);
}
.agent-code-label {
  font-size: 13px;
  opacity: 0.86;
}
.agent-code-value {
  margin: 8px 0 6px;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 2px;
  line-height: 1.15;
  /* 邀请码是数字，等宽防止位数不同时左右跳动 */
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}
.agent-code-hint {
  font-size: 12px;
  opacity: 0.82;
}
.agent-code-btn {
  display: block;
  width: 100%;
  height: 42px;
  margin-top: 16px;
  border: none;
  border-radius: 21px;
  background: #fff;
  color: #ee0a24;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.agent-code-btn:active {
  opacity: 0.88;
}
/* 推广链接卡：链接通常比一行长，用等宽小字 + 允许断行；user-select:all 让长按能整条选中 */
.agent-link-card {
  padding: 16px;
}
.agent-link-label {
  font-size: 13px;
  color: #6b7280;
}
.agent-link-value {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f6f8fc;
  color: #1f2937;
  font-size: 12px;
  line-height: 1.5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-all;
  user-select: all;
}
.agent-link-btn {
  display: block;
  width: 100%;
  height: 40px;
  margin-top: 12px;
  border: none;
  border-radius: 20px;
  background: linear-gradient(135deg, #ff6034, #ee0a24);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.agent-link-btn:active {
  opacity: 0.88;
}
/* 信息行（账号 / 官网） */
.agent-info-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
}
.agent-info-label {
  flex: none;
  font-size: 14px;
  color: #6b7280;
}
.agent-info-value {
  flex: 1;
  text-align: right;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  word-break: break-all;
}
.agent-mini-btn {
  flex: none;
  border: none;
  border-radius: 12px;
  padding: 5px 12px;
  background: #fdeef0;
  color: #ee0a24;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
/* 奖励说明：浅色提示条，不抢邀请码的注意力 */
.agent-note {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff7f0;
}
.agent-note-icon {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ee0a24;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.agent-note-text {
  font-size: 12px;
  line-height: 1.6;
  color: #8a5a3a;
}
/* 申请代理卡片（非代理态） */
.agent-apply-block {
  padding: 18px 16px 16px;
}
.agent-apply-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}
.agent-apply-sub {
  margin-top: 4px;
  font-size: 12px;
  color: #909399;
}
.agent-apply-line {
  margin-top: 10px;
  font-size: 14px;
  color: #333;
}
/* .agent-apply-reason 的样式由镜像 6797 提供（宽度/边框/圆角/字号/背景），
   这里只补它没有的上边距；两条类名的特异性足以压过镜像表。 */
.agent-apply-block .agent-apply-reason {
  margin-top: 12px;
}
.agent-submit-btn {
  display: block;
  width: 100%;
  height: 42px;
  margin-top: 12px;
  border: none;
  border-radius: 21px;
  background: linear-gradient(135deg, #ff6034, #ee0a24);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.agent-submit-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ── 骨架屏 ────────────────────────────────────────────────────────────── */
/* 形状与真实卡片逐个对齐（卡片内边距、字号、按钮高度都照抄），数据落地时不跳版。
   两套基色：深色卡片上用半透明白，浅色卡片上用灰。 */
.agent-skeleton {
  border-radius: 8px;
  background-color: #eef2f8;
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.045) 37%, rgba(0, 0, 0, 0) 63%);
  background-size: 400% 100%;
  animation: agent-shimmer 1.4s ease infinite;
}
.agent-skeleton--onPrimary {
  background-color: rgba(255, 255, 255, 0.3);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.18) 25%, rgba(255, 255, 255, 0.36) 37%, rgba(255, 255, 255, 0.18) 63%);
}
.agent-skeleton--onNote {
  background-color: #f3e0cf;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.45) 37%, rgba(255, 255, 255, 0) 63%);
}
@keyframes agent-shimmer {
0% { background-position: 100% 50%;
}
100% { background-position: 0 50%;
}
}
/* 邀请卡里的四块：label / 大号邀请码 / 副标题 / 按钮 —— 高度与真实元素一致 */
.agent-sk-label {
  width: 68px;
  height: 13px;
  margin: 0 auto;
}
.agent-sk-code {
  width: 168px;
  height: 34px;
  margin: 12px auto 10px;
  border-radius: 10px;
}
.agent-sk-hint {
  width: 120px;
  height: 12px;
  margin: 0 auto;
}
.agent-sk-btn {
  width: 100%;
  height: 42px;
  margin-top: 16px;
  border-radius: 21px;
}
/* 账号行 */
.agent-sk-row-label {
  width: 32px;
  height: 14px;
  flex: none;
}
.agent-sk-row-value {
  width: 92px;
  height: 14px;
  margin-left: auto;
}
/* 说明条 */
.agent-note--skeleton {
  align-items: flex-start;
}
.agent-sk-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}
.agent-sk-note-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.agent-sk-line {
  width: 100%;
  height: 12px;
}
.agent-sk-line--short {
  width: 62%;
}

/* ── 主题适配 ──────────────────────────────────────────────────────────── */
/* theme4：深红主色 */
[data-app-theme='theme4'] .agent-code-card {
  background: linear-gradient(135deg, #e03d3e, #b71c1c);
  box-shadow: 0 10px 26px rgba(183, 28, 28, 0.22);
}
[data-app-theme='theme4'] .agent-code-btn {
  color: #b71c1c;
}
[data-app-theme='theme4'] .agent-link-value {
  background: #fdf2f2;
}
[data-app-theme='theme4'] .agent-link-btn {
  background: linear-gradient(135deg, #e03d3e, #b71c1c);
}
[data-app-theme='theme4'] .agent-submit-btn {
  background: linear-gradient(135deg, #e03d3e, #b71c1c);
}
[data-app-theme='theme4'] .agent-note {
  background: #fdf2f2;
}
[data-app-theme='theme4'] .agent-note-icon {
  background: #b71c1c;
}
[data-app-theme='theme4'] .agent-note-text {
  color: #7f3b3b;
}
/* casino_vegas：暗底 + 蓝金 */
[data-app-theme='casino_vegas'] .agent-card {
  background: #101c3b;
  box-shadow: none;
}
[data-app-theme='casino_vegas'] .agent-code-card {
  background: linear-gradient(135deg, #2f4f9d, #16254b 58%, #0a1124);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}
[data-app-theme='casino_vegas'] .agent-code-btn {
  background: #12203f;
  color: #8ab6ff;
}
[data-app-theme='casino_vegas'] .agent-info-label {
  color: #93a7cc;
}
[data-app-theme='casino_vegas'] .agent-info-value,
[data-app-theme='casino_vegas'] .agent-apply-title {
  color: #edf8ff;
}
[data-app-theme='casino_vegas'] .agent-apply-line {
  color: #c8d8f0;
}
[data-app-theme='casino_vegas'] .agent-mini-btn {
  background: #12203f;
  color: #8ab6ff;
}
[data-app-theme='casino_vegas'] .agent-link-label {
  color: #93a7cc;
}
[data-app-theme='casino_vegas'] .agent-link-value {
  background: #0a1428;
  color: #edf8ff;
}
[data-app-theme='casino_vegas'] .agent-link-btn {
  background: linear-gradient(135deg, #2f4f9d, #16254b 58%, #0a1124);
  color: #edf8ff;
}
[data-app-theme='casino_vegas'] .agent-note {
  background: #101c3b;
}
[data-app-theme='casino_vegas'] .agent-note-text {
  color: #93a7cc;
}
[data-app-theme='casino_vegas'] .agent-skeleton {
  background-color: #1b2a4d;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.07) 37%, rgba(255, 255, 255, 0) 63%);
}
[data-app-theme='casino_vegas'] .agent-skeleton--onPrimary {
  background-color: rgba(255, 255, 255, 0.22);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.14) 25%, rgba(255, 255, 255, 0.3) 37%, rgba(255, 255, 255, 0.14) 63%);
}
[data-app-theme='casino_vegas'] .agent-skeleton--onNote {
  background-color: #23304f;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.08) 37%, rgba(255, 255, 255, 0) 63%);
}
[data-app-theme='theme4'] .agent-skeleton--onNote {
  background-color: #f2dede;
}
[data-app-theme='casino_vegas'] .agent-submit-btn {
  background: linear-gradient(135deg, #2f4f9d, #16254b 58%, #0a1124);
}

/* 本页样式基本全在镜像表 5655 里（useRouteCss 运行时装上），这里只补两处
   5655 没有的东西：头像加载失败时的首字兜底，以及客服图标在 SVG 下的对齐。
   类名前缀 cs-user-avatar-* / cs-robot-* 是自有命名空间，不会撞镜像规则。 */
.cs-user-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e8edf5;
  color: #6b7a99;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  user-select: none;
}
.cs-page--casino .cs-user-avatar-fallback {
  background: #1b2a4d;
  color: #9fb6dd;
}
/* .robot-icon 是 5655 给的渐变圆（32×32、flex 居中），emoji 换成 SVG 后
   只需要让图标跟着它自己的 color 走 —— 渐变底偏暗，图标保持白色。 */
.avatar.robot .robot-icon svg {
  display: block;
  color: #fff;
}