:root { --sat: env(safe-area-inset-top, 0px); --sat-min: 0px; }
/* ==================================================================
   全局样式 - PWA
   主色: 暗蓝灰 #252a2e (顶栏) / 红 #f44e48 (强调) / 金 #ffd132 (金额)
   ================================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 14px;
  color: #333;
  background: #f5f5f5;
  overflow-x: hidden;
}
input, textarea, button, select { font-family: inherit; font-size: inherit; }
button { border: none; background: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul, li { list-style: none; }

.hidden { display: none !important; }

/* ============ Loading ============ */
.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #999;
  gap: 12px;
}
.loading-spinner {
  width: 36px; height: 36px;
  border: 3px solid #eee;
  border-top-color: #f44e48;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.global-loading {
  position: fixed;
  z-index: 9999;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.35);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: white;
  gap: 12px;
}

/* ============ Toast ============ */
.toast {
  position: fixed;
  z-index: 9999;
  left: 50%; top: 40%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.75);
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  max-width: 80%;
  text-align: center;
}

/* ============ Topbar ============ */
.topbar {
  position: sticky;
  top: 0; z-index: 100;
  background: #252a2e;
  color: white;
  /* ⭐ iOS PWA safe area: 顶部留出状态栏高度, 内容区仍保持 44px */
  padding: 0 12px;
  padding-top: max(var(--sat, 0px), var(--sat-min));
  height: calc(44px + max(var(--sat, 0px), var(--sat-min)));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  /* 内容贴底对齐, 保证文字在 44px 内容区内居中 */
  padding-bottom: 0;
  box-sizing: border-box;
}
.topbar-back { padding: 8px; cursor: pointer; height: 44px; display: flex; align-items: center; }
.topbar-back img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
.topbar-title { flex: 1; text-align: center; font-size: 17px; font-weight: 500; height: 44px; line-height: 44px; }
.topbar-right { min-width: 32px; text-align: right; font-size: 14px; height: 44px; display: flex; align-items: center; justify-content: flex-end; }

/* ============ Tabbar ============ */
.tabbar {
  position: fixed;
  z-index: 90;
  bottom: 0; left: 0; right: 0;
  height: 52px;
  background: white;
  border-top: 1px solid #eee;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}
.tab-item {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 4px 0 6px;
  cursor: pointer;
  color: #999;
}
.tab-item.active { color: #f44e48; }
.tab-icon {
  width: 24px; height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: 2px;
}
.tab-item.active .tab-icon {
  filter: hue-rotate(340deg) saturate(2);
}
.tab-label { font-size: 11px; }

/* 页面容器底部空出 tabbar 高度 */
#app { min-height: calc(100vh - 52px); padding-bottom: 52px; }
#app.no-tabbar { padding-bottom: 0; }

/* ============ 通用页面元素 ============ */
.empty {
  padding: 60px 20px;
  text-align: center;
  color: #999;
  font-size: 14px;
}
.empty img { width: 120px; margin: 0 auto 12px; opacity: 0.6; }

.card {
  background: white;
  margin: 10px 12px;
  border-radius: 8px;
  overflow: hidden;
}

.list-item {
  display: flex;
  align-items: center;
  padding: 14px 12px;
  border-bottom: 1px solid #f0f0f0;
  background: white;
  cursor: pointer;
}
.list-item:last-child { border-bottom: none; }
.list-item-icon {
  width: 22px; height: 22px;
  margin-right: 12px;
}
.list-item-title { flex: 1; color: #333; }
.list-item-value { color: #999; font-size: 13px; margin-right: 4px; }
.list-item-arrow {
  width: 12px; height: 12px;
  background-image: url(../icons/a_right_cion.png);
  background-size: contain;
  background-repeat: no-repeat;
}

/* ============ 按钮 ============ */
.btn {
  display: block;
  width: 100%;
  padding: 12px 20px;
  border-radius: 6px;
  font-size: 16px;
  color: white;
  background: #f44e48;
  text-align: center;
}
.btn:active { opacity: 0.85; }
.btn-primary { background: linear-gradient(90deg, #ff7a34, #f44e48); }
.btn-blue { background: #1e88e5; }
.btn-disabled { background: #ccc; cursor: not-allowed; }
.btn-outline {
  background: white; color: #f44e48; border: 1px solid #f44e48;
}
.btn-small { padding: 6px 16px; font-size: 13px; display: inline-block; width: auto; }

/* ============ 输入框 ============ */
.input-group { margin-bottom: 16px; }
.input-group label { display: block; color: #666; font-size: 13px; margin-bottom: 6px; }
.input-field {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background: #f9f9f9;
  font-size: 15px;
  outline: none;
}
.input-field:focus { border-color: #f44e48; background: white; }
.input-line {
  width: 100%;
  padding: 14px 0;
  border: none;
  border-bottom: 1px solid #eee;
  outline: none;
  font-size: 15px;
  background: transparent;
}

/* ============ 登录/注册页 ============ */
.auth-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #f44e48 0%, #e6353a 40%, white 40%);
  padding: 40px 24px 24px;
}
.auth-logo {
  width: 80px; height: 80px;
  border-radius: 16px;
  margin: 0 auto 20px;
  background: white;
  padding: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.auth-title {
  color: white;
  text-align: center;
  font-size: 20px;
  margin-bottom: 30px;
}
.auth-card {
  background: white;
  border-radius: 12px;
  padding: 28px 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.auth-card .btn { margin-top: 12px; }
.auth-links {
  margin-top: 20px;
  text-align: center;
  font-size: 13px;
  color: #666;
}
.auth-links a { color: #f44e48; margin: 0 6px; }

.verify-row { display: flex; gap: 8px; align-items: center; }
.verify-row .input-field { flex: 1; }
.verify-row img {
  height: 44px; width: 100px;
  border-radius: 4px; cursor: pointer;
  border: 1px solid #eee;
}

/* ============ 首页 - 购彩 ============ */
.home-header {
  background: url(../icons/a_top_big_bg.png) center/cover, linear-gradient(90deg, #252a2e, #3d434a);
  color: white;
  padding: 16px 14px 16px;
  position: relative;
}
.home-user-row {
  display: flex; align-items: center;
  margin-bottom: 12px;
}
.home-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: white;
  padding: 3px;
  margin-right: 10px;
  overflow: hidden;
}
.home-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.home-user-name { font-size: 15px; }
.home-user-level {
  display: inline-block;
  background: #ffd132; color: #7a4f00;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 11px;
  margin-left: 6px;
}

.home-money-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0;
}
.home-money-left { display: flex; align-items: center; gap: 8px; }
.home-money-icon {
  width: 32px; height: 32px;
  background-image: url(../icons/home_buy_money.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.home-money {
  color: #ffd132;
  font-size: 22px; font-weight: bold;
}
.home-money-btns { display: flex; gap: 8px; }
.home-money-btns .btn-small {
  padding: 6px 18px;
  border-radius: 20px;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,0.6);
  color: white; background: transparent;
}
.home-money-btns .btn-small.filled { background: #ffd132; color: #7a4f00; border-color: #ffd132; }

.home-task {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; margin-top: 6px;
  color: rgba(255,255,255,0.8);
}
.progress {
  flex: 1; height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  overflow: hidden;
  margin: 0 8px;
}
.progress-bar { height: 100%; background: #ffd132; width: 0%; }

.home-section-title {
  padding: 12px 12px 8px;
  font-size: 14px;
  color: #444;
  font-weight: 500;
  border-left: 3px solid #f44e48;
  padding-left: 10px;
  margin: 10px 0 0 12px;
}

.lottery-grid {
  padding: 8px 12px 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.lottery-card {
  background: white;
  padding: 14px 12px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.lottery-card:active { background: #f8f8f8; }
.lottery-icon {
  width: 42px; height: 42px;
  border-radius: 8px;
  object-fit: cover;
  background: #f0f0f0;
}
.lottery-name { font-size: 14px; color: #333; font-weight: 500; }
.lottery-desc { font-size: 11px; color: #999; margin-top: 3px; }

.lottery-row-inline {
  padding: 12px;
  display: flex;
  gap: 20px;
  overflow-x: auto;
  background: white;
  margin: 10px 12px;
  border-radius: 8px;
}
.lottery-row-inline .lottery-inline {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #666;
}

/* 最新中奖横条 */
.win-strip {
  background: white;
  margin: 10px 12px;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.win-strip-icon {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, #ff9a3c, #ff6a00);
  color: white; font-weight: bold;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
}
.win-strip-content { flex: 1; }
.win-strip-title { color: #333; margin-bottom: 3px; }
.win-strip-money { color: #f44e48; font-weight: bold; }
.win-strip-time { color: #999; font-size: 11px; }

/* ============ 我的页 ============ */
.me-header {
  background: url(../icons/a_top_big_bg.png) center/cover, #252a2e;
  padding: 20px 14px 30px;
  color: white;
  text-align: center;
}
.me-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  margin: 0 auto 8px;
  background: white;
  padding: 3px;
  overflow: hidden;
}
.me-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.me-name { font-size: 16px; }
.me-level {
  display: inline-block;
  background: #ffd132; color: #7a4f00;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  margin-left: 6px;
}

.me-money-card {
  background: white;
  margin: -20px 12px 12px;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.me-money-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.me-money-value { color: #f44e48; font-size: 24px; font-weight: bold; }
.me-money-label { color: #999; font-size: 12px; }
.me-money-btns { display: flex; gap: 10px; }
.me-money-btns .btn { flex: 1; padding: 10px; font-size: 14px; margin: 0; }

/* 4 宫格快捷入口 */
.me-quick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 16px 8px;
  background: white;
  margin: 10px 12px;
  border-radius: 8px;
}
.me-quick-item {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #666;
  padding: 6px 0;
  cursor: pointer;
}
.me-quick-item img { width: 36px; height: 36px; }

/* ============ 开奖公告 ============ */
.award-list { padding: 8px 12px; }
.award-card {
  background: white;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 8px;
}
.award-card-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.award-card-name { font-weight: 500; color: #333; }
.award-card-issue { color: #999; font-size: 12px; }
.award-balls {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.award-ball {
  width: 28px; height: 28px;
  background: #f44e48;
  color: white;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: bold;
  font-size: 13px;
}
.award-time { color: #999; font-size: 12px; margin-top: 6px; }

/* ============ 表单页公共 ============ */
.form-page { padding: 12px; }
.form-page .card { padding: 12px 16px; }
.form-row {
  display: flex;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid #f0f0f0;
}
.form-row:last-child { border-bottom: none; }
.form-row-label { width: 90px; color: #666; font-size: 14px; }
.form-row-value { flex: 1; }
.form-row-value input {
  width: 100%; border: none; outline: none;
  font-size: 14px; background: transparent;
}
.form-tip { color: #999; font-size: 12px; padding: 8px 4px; }

/* ============ 客服页面 ============ */
.kf-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh; /* 移动浏览器动态视口高度, 减去底部工具栏 */
  width: 100%;
  background: #ededed;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 100;
  overflow: hidden;
}
.kf-hdr {
  background: #f44e48;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 12px 14px;
  gap: 10px;
  flex-shrink: 0;
  padding-top: calc(12px + var(--sat, 0px));
}
.kf-back {
  font-size: 26px;
  cursor: pointer;
  color: #fff;
  width: 30px;
}
.kf-title-area {
  flex: 1;
  text-align: center;
}
.kf-title {
  font-size: 17px;
  font-weight: 600;
}
.kf-status {
  font-size: 11px;
  opacity: .8;
  margin-top: 2px;
}
.kf-queue-bar {
  background: #fff8e1;
  border-bottom: 1px solid #ffe082;
  padding: 8px 14px;
  font-size: 12px;
  color: #e65100;
  display: none;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.kf-queue-bar.show { display: flex; }

.kf-msgs {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.kf-ts {
  align-self: center;
  background: rgba(0,0,0,.12);
  color: #fff;
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 12px;
  margin: 6px 0 10px;
}
.kf-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
}
.kf-row.mine { flex-direction: row-reverse; }
.kf-av {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  flex-shrink: 0;
  background: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.kf-av.mine { background: #f44e48; }
.kf-bwrap {
  display: flex;
  flex-direction: column;
  max-width: calc(100% - 110px);
}
.kf-row.mine .kf-bwrap { align-items: flex-end; }
.kf-bubble {
  padding: 10px 13px;
  font-size: 15px;
  line-height: 1.6;
  word-break: break-all;
  position: relative;
  border-radius: 4px;
}
.kf-row:not(.mine) .kf-bubble {
  background: #fff;
  color: #1a1a1a;
  border-top-left-radius: 0;
}
.kf-row:not(.mine) .kf-bubble::before {
  content: '';
  position: absolute;
  left: -7px; top: 10px;
  border: 7px solid transparent;
  border-right: 7px solid #fff;
  border-left: 0;
  border-top-width: 5px;
  border-bottom-width: 5px;
}
.kf-row.mine .kf-bubble {
  background: #f44e48;
  color: #fff;
  border-top-right-radius: 0;
}
.kf-row.mine .kf-bubble::after {
  content: '';
  position: absolute;
  right: -7px; top: 10px;
  border: 7px solid transparent;
  border-left: 7px solid #f44e48;
  border-right: 0;
  border-top-width: 5px;
  border-bottom-width: 5px;
}
.kf-sys {
  align-self: center;
  font-size: 12px;
  color: #999;
  background: rgba(0,0,0,.06);
  padding: 4px 12px;
  border-radius: 12px;
  margin: 4px 0 12px;
  max-width: 85%;
  text-align: center;
}
.kf-bubble.img-bubble {
  padding: 3px;
  background: transparent !important;
}
.kf-bubble.img-bubble::before,
.kf-bubble.img-bubble::after {
  display: none;
}
.kf-bubble.img-bubble img {
  max-width: 180px;
  max-height: 200px;
  border-radius: 6px;
  display: block;
  cursor: zoom-in;
}
.kf-faq-panel {
  background: #fff;
  border-top: 1px solid #eee;
  padding: 12px;
  flex-shrink: 0;
  max-height: 60vh;
  overflow-y: auto;
}
.kf-faq-title {
  font-size: 12px;
  color: #999;
  margin-bottom: 8px;
}
.kf-faq-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kf-faq-btn {
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 14px;
  color: #333;
  text-align: left;
  cursor: pointer;
}
.kf-faq-btn:active {
  background: #ffebee;
  border-color: #f44e48;
  color: #f44e48;
}
.kf-faq-transfer {
  background: #fff;
  border: 1.5px solid #f44e48;
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 14px;
  color: #f44e48;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  margin-top: 8px;
}
.kf-input-area {
  background: #f5f5f5;
  border-top: 1px solid #d9d9d9;
  flex-shrink: 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.kf-msgs {
  flex: 1 1 0;
  min-height: 0;  /* ⭐ flex 子元素能溢出时必须的 */
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.kf-input-bar {
  display: flex;
  align-items: flex-end;
  padding: 8px 10px;
  gap: 7px;
}
.kf-icon-btn {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.kf-textarea {
  flex: 1;
  min-height: 36px;
  max-height: 100px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 15px;
  line-height: 1.45;
  outline: none;
  background: #fff;
  resize: none;
  overflow-y: auto;
  font-family: inherit;
}
.kf-send {
  height: 36px;
  padding: 0 16px;
  background: #f44e48;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: none;
  white-space: nowrap;
}
.kf-send.show { display: block; }
.kf-tools {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 16px 16px;
}
.kf-tools.open { display: flex; }
.kf-tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  width: 70px;
}
.kf-tool-icon {
  width: 56px;
  height: 56px;
  background: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.kf-tool-lbl {
  font-size: 12px;
  color: #666;
}
.kf-ended-tip {
  text-align: center;
  padding: 12px;
  color: #999;
  font-size: 13px;
  background: #fff;
  border-top: 1px solid #eee;
}
.img-preview {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
}
.img-preview.show { display: flex; }
.img-preview img {
  max-width: 95%;
  max-height: 90%;
  object-fit: contain;
}
.img-preview-close {
  position: absolute;
  top: 20px;
  right: 20px;
  color: #fff;
  font-size: 32px;
  cursor: pointer;
}

/* 通话全屏 */
#callScreen {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: linear-gradient(160deg, #1a2a3a 0%, #0d1b2a 100%);
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 80px 0 60px;
}
#callScreen.show { display: flex; }
.call-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f44e48, #c0392b);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 0 0 12px rgba(244,78,72,.15), 0 0 0 24px rgba(244,78,72,.07);
  animation: callPulse 2s ease-in-out infinite;
}
.call-name {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  margin-top: 24px;
}
.call-state {
  color: rgba(255,255,255,.55);
  font-size: 14px;
  margin-top: 10px;
}
@keyframes callPulse {
  0%,100% { box-shadow: 0 0 0 12px rgba(244,78,72,.15), 0 0 0 24px rgba(244,78,72,.07); }
  50% { box-shadow: 0 0 0 16px rgba(244,78,72,.18), 0 0 0 32px rgba(244,78,72,.08); }
}
.call-btns {
  display: flex;
  gap: 48px;
  align-items: center;
}
.call-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  background: none;
  border: none;
}
.call-btn-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}
.call-btn-circle.hangup {
  background: #f44e48;
}
.call-btn-lbl {
  color: rgba(255,255,255,.7);
  font-size: 12px;
}

/* 首页悬浮客服按钮 */
.home-kefu-float {
  position: fixed;
  right: 14px;
  bottom: 84px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f44e48, #c0392b);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  box-shadow: 0 6px 16px rgba(244,78,72,.35);
  cursor: pointer;
  z-index: 50;
  border: 2px solid #fff;
}
/* ================================================================
   合买大厅 (buyhe tab) - 严格按 APP 截图风格
   ================================================================ */
.buyhe-page {
  min-height: 100vh;
  background: #f0f0f0;
}
.buyhe-hdr {
  background: #252a2e;
  color: #fff;
  padding: 14px 16px 12px;
  padding-top: calc(var(--sat, 0px) + 14px);
  text-align: center;
}
.buyhe-hdr-title {
  font-size: 17px;
  font-weight: 500;
}
.buyhe-list {
  padding: 8px 12px 20px;
}

/* 合买卡片 */
.buyhe-card {
  background: #fff;
  border-radius: 10px;
  padding: 14px 14px 12px;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.buyhe-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}
.buyhe-card-info {
  flex: 1;
  min-width: 0;
}
.buyhe-card-lot {
  font-size: 15px;
  font-weight: 600;
  color: #222;
  line-height: 1.3;
}
.buyhe-card-period {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}
.buyhe-card-status {
  margin-left: 2px;
  font-weight: 500;
}
.buyhe-card-chase {
  color: #f59e0b;
  margin-left: 4px;
}
.buyhe-card-user {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.buyhe-card-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: #eee;
}
.buyhe-card-user-r {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.buyhe-card-lv {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #fff;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 600;
}
.buyhe-card-uname {
  font-size: 11px;
  color: #444;
}

.buyhe-progress-wrap {
  margin: 0 0 10px;
}
.buyhe-progress-bar {
  width: 100%;
  height: 6px;
  background: #eee;
  border-radius: 3px;
  overflow: hidden;
}
.buyhe-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #f44e48);
  border-radius: 3px;
  transition: width .3s;
}

/* 底部统计+按钮行 */
.buyhe-card-stats {
  display: flex;
  align-items: center;
  gap: 6px;
}
.buyhe-card-stat {
  flex: 1;
  min-width: 0;
}
.buyhe-card-stat-lbl {
  font-size: 11px;
  color: #999;
  line-height: 1.2;
}
.buyhe-card-stat-val {
  font-size: 13px;
  color: #222;
  font-weight: 500;
  margin-top: 2px;
}
.buyhe-card-stat-val.buyhe-price {
  color: #f44e48;
}
.buyhe-card-action {
  flex-shrink: 0;
  margin-left: 4px;
}
.buyhe-btn-buy {
  background: #f59e0b;
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.buyhe-btn-buy:active {
  background: #d97706;
}
.buyhe-btn-disabled {
  background: #e5e5e5;
  color: #999;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 12px;
  cursor: not-allowed;
}

/* 空态 */
.buyhe-empty {
  text-align: center;
  padding: 60px 20px;
  color: #999;
}
.buyhe-empty img {
  width: 120px;
  opacity: .6;
  margin-bottom: 12px;
}

/* ============ 认购弹窗 ============ */
.buyhe-buy-mask {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.buyhe-buy-dialog {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 340px;
  padding: 20px;
  box-sizing: border-box;
}
.buyhe-buy-title {
  font-size: 17px;
  font-weight: 600;
  color: #222;
  text-align: center;
  margin-bottom: 8px;
}
.buyhe-buy-info {
  font-size: 13px;
  color: #666;
  text-align: center;
  line-height: 1.5;
  padding: 6px 0 16px;
  border-bottom: 1px solid #f0f0f0;
}
.buyhe-buy-input-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  margin: 16px 0 6px;
  gap: 0;
}
.buyhe-buy-btn-minus,
.buyhe-buy-btn-plus {
  width: 44px;
  height: 44px;
  background: #f5f5f5;
  border: 1px solid #e5e5e5;
  font-size: 22px;
  color: #666;
  cursor: pointer;
}
.buyhe-buy-btn-minus { border-radius: 6px 0 0 6px; }
.buyhe-buy-btn-plus { border-radius: 0 6px 6px 0; }
.buyhe-buy-btn-minus:active,
.buyhe-buy-btn-plus:active {
  background: #e5e5e5;
}
.buyhe-buy-input {
  width: 100px;
  height: 44px;
  border: 1px solid #e5e5e5;
  border-left: none;
  border-right: none;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #222;
  outline: none;
  -moz-appearance: textfield;
}
.buyhe-buy-input::-webkit-outer-spin-button,
.buyhe-buy-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.buyhe-buy-total {
  text-align: center;
  font-size: 14px;
  color: #f44e48;
  font-weight: 600;
  margin: 4px 0 18px;
}
.buyhe-buy-btns {
  display: flex;
  gap: 10px;
}
.buyhe-buy-cancel,
.buyhe-buy-confirm {
  flex: 1;
  height: 42px;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.buyhe-buy-cancel {
  background: #f0f0f0;
  color: #666;
}
.buyhe-buy-confirm {
  background: #f44e48;
  color: #fff;
}
.buyhe-buy-cancel:active { background: #e0e0e0; }
.buyhe-buy-confirm:active { background: #d43a34; }

/* 兜底: 防止任何 buyhe 卡片里的 img 撑爆布局 */
.buyhe-card img { max-width: 100%; height: auto; }
.buyhe-card .buyhe-card-avatar { width: 32px !important; height: 32px !important; }

/* 投注页占位 */
.bet-placeholder {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}
.bet-placeholder-icon {
  font-size: 64px;
  margin-bottom: 16px;
}
.bet-placeholder-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}
.bet-placeholder-desc {
  font-size: 13px;
  color: #999;
  line-height: 1.7;
  margin-bottom: 30px;
}
.bet-placeholder-back {
  background: #f44e48;
  color: #fff;
  border: none;
  padding: 10px 32px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}

/* ================================================================
   开奖公告 (award tab) - APP 两列 grid 风格
   ================================================================ */
.award-page {
  min-height: 100vh;
  background: #f0f0f0;
}
.award-hdr {
  background: #252a2e;
  color: #fff;
  padding: 14px 16px 12px;
  padding-top: calc(var(--sat, 0px) + 14px);
  text-align: center;
}
.award-hdr-title {
  font-size: 17px;
  font-weight: 500;
}
.award-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 10px 20px;
}
.award-card {
  background: #fff;
  border-radius: 6px;
  padding: 12px 12px 14px;
}
.award-card-name {
  font-size: 14px;
  font-weight: 600;
  color: #222;
}
.award-card-issue {
  font-size: 11px;
  color: #999;
  margin-top: 4px;
}
.award-balls {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.award-ball {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f87171, #dc2626);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(220,38,38,.3);
}
.award-wait {
  font-size: 12px;
  color: #999;
  padding: 4px 0;
}
.award-empty {
  text-align: center;
  padding: 60px 20px;
  color: #999;
  font-size: 14px;
}

/* ================================================================
   首页 (home) 补充: APP 风格分组标题
   ================================================================ */

/* 简化的投注任务(只文字, 无进度条) */
.home-task-simple {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: rgba(255,255,255,.7);
  padding: 10px 0 0;
}

/* 用户信息行样式微调 */
.home-user-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.home-user-name-row {
  font-size: 15px;
  color: #fff;
  font-weight: 500;
}

/* 分组容器 */
.home-section {
  background: #fff;
  margin-top: 8px;
}

/* 分组标题 (APP: 左侧橙色竖线) */
.home-section-title {
  font-size: 14px;
  font-weight: 500;
  color: #222;
  padding: 12px 14px 8px;
  position: relative;
  padding-left: 22px;
}
.home-section-title::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 14px;
  bottom: 10px;
  width: 3px;
  background: #f59e0b;
  border-radius: 2px;
}

/* 高频彩 grid 内边距和 gap */
.home-section .lottery-grid {
  padding: 4px 12px 14px;
}

/* ================================================================
   合买方案详情 (buyhe-detail) - 严格按 APK activity_buyhedetail.xml 复刻
   ================================================================ */
.bhd-page {
  min-height: 100vh;
  background: #f0f0f0;
  padding-bottom: 68px; /* 给底部固定栏空间 */
}
.bhd-content {
  padding: 0;
}

/* 概览卡片 (顶部方案概览) */
.bhd-header {
  background: #fff;
  padding: 14px 14px 10px;
}
.bhd-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}
.bhd-header-info {
  flex: 1;
  min-width: 0;
}
.bhd-lot-name {
  font-size: 16px;
  font-weight: 600;
  color: #222;
}
.bhd-lot-period {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}
.bhd-header-user {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.bhd-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}
.bhd-user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}
.bhd-user-lv {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #fff;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 600;
}
.bhd-user-name {
  font-size: 11px;
  color: #444;
}
.bhd-progress {
  width: 100%;
  height: 6px;
  background: #eee;
  border-radius: 3px;
  overflow: hidden;
  margin: 4px 0 12px;
}
.bhd-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #f44e48);
  border-radius: 3px;
}
.bhd-stats {
  display: flex;
  align-items: center;
  gap: 4px;
}
.bhd-stat {
  flex: 1;
  min-width: 0;
  text-align: center;
}
.bhd-stat-lbl {
  font-size: 11px;
  color: #999;
}
.bhd-stat-val {
  font-size: 13px;
  color: #222;
  font-weight: 500;
  margin-top: 4px;
}
.bhd-stat-val.bhd-price {
  color: #f44e48;
}

/* 分组标题 (橙色竖线) */
.bhd-section-title {
  background: #fff;
  padding: 12px 14px 10px;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #222;
  position: relative;
  padding-left: 22px;
  border-bottom: 1px solid #f0f0f0;
}
.bhd-section-title::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 14px;
  bottom: 10px;
  width: 3px;
  background: #f59e0b;
  border-radius: 2px;
}
.bhd-section-body {
  background: #fff;
  padding: 8px 14px 12px;
}

/* 方案内容 */
.bhd-bet-content {
  font-size: 13px;
  color: #555;
  line-height: 1.7;
  word-break: break-all;
  padding: 4px 6px;
}

/* 表头/表行 (执行情况 + 认购用户) */
.bhd-table-head {
  display: flex;
  align-items: center;
  padding: 6px 6px 6px 14px;
  border-bottom: 1px solid #f0f0f0;
}
.bhd-table-head > div {
  font-size: 12px;
  color: #999;
}
.bhd-table-body {
  padding: 4px 0;
}
.bhd-table-row {
  display: flex;
  align-items: center;
  padding: 8px 6px 8px 14px;
  font-size: 13px;
  color: #333;
}
.bhd-table-row:active { background: #f7f7f7; }

/* 执行情况点击弹窗 */
.bhd-modal-mask {
  position: fixed; left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000;
}
.bhd-modal-box {
  width: 78%; max-width: 340px;
  background: #fff; border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}
.bhd-modal-head {
  padding: 12px 14px;
  border-bottom: 1px solid #eee;
  font-size: 15px; font-weight: 500; color: #222;
  display: flex; align-items: center; justify-content: space-between;
}
.bhd-modal-close {
  color: #999; font-size: 20px; line-height: 1;
  cursor: pointer; padding: 0 4px;
}
.bhd-modal-body { padding: 8px 14px 16px; }
.bhd-modal-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0;
  font-size: 14px;
}
.bhd-modal-lbl { color: #666; }
.bhd-modal-val { color: #222; font-weight: 500; }

/* 底部固定认购栏 */
.bhd-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 58px;
  background: #fafafa;
  border-top: 1px solid #e5e5e5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 100;
}
.bhd-num-row {
  display: flex;
  align-items: stretch;
  height: 40px;
}
.bhd-num-btn {
  width: 40px;
  height: 40px;
  background: #f0f0f0;
  border: 1px solid #e0e0e0;
  font-size: 20px;
  color: #666;
  cursor: pointer;
}
.bhd-num-btn:first-child { border-radius: 4px 0 0 4px; }
.bhd-num-btn:last-child { border-radius: 0 4px 4px 0; }
.bhd-num-input {
  width: 68px;
  height: 40px;
  border: 1px solid #e0e0e0;
  border-left: none;
  border-right: none;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #222;
  outline: none;
  -moz-appearance: textfield;
}
.bhd-num-input::-webkit-outer-spin-button,
.bhd-num-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.bhd-buy-btn {
  flex: 1;
  height: 40px;
  background: #f44e48;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.bhd-buy-btn:active { background: #d43a34; }

/* ================================================================
   开奖记录详情页 (award-detail) - 严格按 APK fragment_awardrecord 复刻
   ================================================================ */
.awd-page {
  min-height: 100vh;
  background: #fff;
}

/* 深色表头 (APK 里 #30373f 深灰) */
.awd-thead {
  display: flex;
  align-items: center;
  background: #30373f;
  color: #e6e8eb;
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
}
.awd-th-period { flex: 2; padding-left: 12px; }
.awd-th-num { flex: 3; text-align: center; }
.awd-th-time { flex: 2; text-align: right; padding-right: 12px; }

/* 表体 */
.awd-tbody {
  padding-bottom: 20px;
}
.awd-tr {
  display: flex;
  align-items: center;
  padding: 10px 10px;
  border-bottom: 1px solid #f0f0f0;
  min-height: 42px;
}
.awd-tr:last-child { border-bottom: none; }
.awd-td-period {
  flex: 2;
  padding-left: 12px;
  font-size: 12px;
  color: #8f929a;
}
.awd-td-num {
  flex: 3;
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.awd-td-time {
  flex: 2;
  text-align: right;
  padding-right: 12px;
  font-size: 12px;
  color: #8f929a;
}

/* 号码红球(比首页开奖公告小一点) */
.awd-ball {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f87171, #dc2626);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(220,38,38,.3);
}

/* 未开奖(绿色) */
.awd-waiting {
  color: #82e012;
  font-size: 12px;
}

/* 空态 / 加载更多 / 到底 */
.awd-empty {
  text-align: center;
  padding: 60px 20px;
  color: #999;
  font-size: 13px;
}
.awd-no-more {
  text-align: center;
  padding: 16px 0;
  color: #ccc;
  font-size: 12px;
}
.awd-loading-more {
  text-align: center;
  padding: 12px 0;
  color: #999;
  font-size: 12px;
  cursor: pointer;
}
.awd-loading-more:active {
  color: #f44e48;
}

/* buyhe 加载更多提示 */
.buyhe-no-more {
  text-align: center;
  padding: 16px 0 24px;
  color: #ccc;
  font-size: 12px;
}
.buyhe-loading-more {
  text-align: center;
  padding: 12px 0 20px;
  color: #999;
  font-size: 12px;
}

/* ================================================================
   我的 tab (me.js) - 严格按 APK fragment_homeme.xml
   ================================================================ */
.me-hdr {
  background: #252a2e;
  color: #fff;
  padding: 16px 14px 12px;
  padding-top: calc(var(--sat, 0px) + 16px);
}
.me-hdr-row1 {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.me-avatar {
  flex-shrink: 0;
}
.me-avatar img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.2);
  object-fit: cover;
  background: #333;
}
.me-hdr-info {
  flex: 1;
  min-width: 0;
}
.me-lv-name {
  display: flex;
  align-items: center;
  gap: 8px;
}
.me-lv {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #fff;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}
.me-name {
  font-size: 15px;
  font-weight: 500;
}
.me-uid {
  font-size: 12px;
  color: rgba(255,255,255,.6);
  margin-top: 4px;
}
.me-task-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255,255,255,.7);
  margin-top: 8px;
}
.me-task-bar {
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,.1);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}
.me-task-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #f44e48);
  border-radius: 2px;
  transition: width .3s;
}
.me-hdr-row2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}
.me-money-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.me-money-icon {
  width: 26px;
  height: 26px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border-radius: 6px;
  flex-shrink: 0;
}
.me-money-val {
  font-size: 22px;
  font-weight: 600;
  color: #fff;
}
.me-btn {
  padding: 8px 20px;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}
.me-btn-recharge { background: #f97316; }
.me-btn-withdraw { background: #3b82f6; }
.me-btn:active { transform: scale(0.97); }

/* 4 快捷入口 */
.me-quick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #fff;
  padding: 14px 4px;
  gap: 4px;
}
.me-quick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 4px 0;
}
.me-quick-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.me-quick-icon img {
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(1);
}
.me-quick-item span {
  font-size: 12px;
  color: #333;
}
.me-quick-item:active { opacity: 0.7; }

/* 列表项 */
.me-list {
  background: #fff;
  margin-top: 8px;
}
.me-list-item {
  display: flex;
  align-items: center;
  padding: 14px 14px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
}
.me-list-item:last-child { border-bottom: none; }
.me-list-item:active { background: #f9f9f9; }
.me-list-icon {
  width: 20px;
  height: 20px;
  margin-right: 12px;
  flex-shrink: 0;
}
.me-list-title {
  flex: 1;
  font-size: 14px;
  color: #222;
}
.me-list-arrow {
  color: #ccc;
  font-size: 18px;
  line-height: 1;
}

/* 退出登录按钮 */
.me-logout-wrap {
  padding: 20px 14px;
}
.me-logout-btn {
  width: 100%;
  height: 42px;
  background: #fff;
  color: #f44e48;
  border: 1px solid #f44e48;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.me-logout-btn:active {
  background: #fef2f2;
}

/* ================================================================
   通用表单页 (person/bank/pwd/recharge/withdraw)
   ================================================================ */
.form-page {
  min-height: 100vh;
  background: #f0f0f0;
}
.form-row {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 0 14px;
  height: 50px;
  border-bottom: 1px solid #f0f0f0;
}
.form-row-avatar { height: 68px; }
.form-lbl {
  font-size: 14px;
  color: #222;
  flex-shrink: 0;
  min-width: 82px;
}
.form-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  color: #333;
  text-align: right;
  background: transparent;
  height: 100%;
  padding-left: 8px;
  padding-right: 8px;
}
.form-input::placeholder { color: #ccc; }
.form-avatar-img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 8px 0 auto;
  background: #eee;
}
.form-arrow {
  color: #ccc;
  font-size: 18px;
  margin-left: 4px;
}
.form-section-title {
  padding: 12px 14px 8px;
  font-size: 13px;
  color: #999;
  background: #f0f0f0;
}
.form-btn-primary {
  width: 100%;
  height: 44px;
  background: #f44e48;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.form-btn-primary:active { background: #d43a34; }
.form-btn-red { background: #f44e48; }

/* 银行卡卡片 (bank.js 有卡时) */
.bank-card {
  background: linear-gradient(135deg, #3b82f6, #1e40af);
  color: #fff;
  margin: 14px;
  padding: 18px 16px;
  border-radius: 10px;
  position: relative;
  box-shadow: 0 4px 12px rgba(59,130,246,.3);
}
.bank-card-name {
  font-size: 14px;
  font-weight: 500;
  opacity: 0.95;
}
.bank-card-no {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 2px;
  margin-top: 20px;
  font-family: monospace;
}
.bank-card-owner {
  font-size: 12px;
  margin-top: 10px;
  opacity: 0.85;
}
.bank-del-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255,255,255,.2);
  color: #fff;
  border: none;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
}

/* ================================================================
   通用记录列表 (recharge-record/withdraw-record/bill/mybets)
   ================================================================ */
.rec-page {
  min-height: 100vh;
  background: #f0f0f0;
}
.rec-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 14px 14px;
  border-bottom: 1px solid #f0f0f0;
}
.rec-item-l {
  flex: 1;
  min-width: 0;
}
.rec-item-r {
  text-align: right;
  flex-shrink: 0;
}
.rec-item-type {
  font-size: 14px;
  color: #222;
  font-weight: 500;
}
.rec-item-time {
  font-size: 11px;
  color: #999;
  margin-top: 6px;
}
.rec-item-money {
  font-size: 15px;
  font-weight: 600;
}
.rec-item-status {
  font-size: 11px;
  margin-top: 6px;
}
.rec-revoke {
  background: #f0f0f0;
  border: none;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 11px;
  color: #666;
  cursor: pointer;
  margin-top: 4px;
}
.rec-empty {
  text-align: center;
  padding: 80px 20px;
  color: #999;
  font-size: 14px;
}
.rec-no-more {
  text-align: center;
  padding: 16px 0 24px;
  color: #ccc;
  font-size: 12px;
}
.rec-loading-more {
  text-align: center;
  padding: 12px 0 20px;
  color: #999;
  font-size: 12px;
  cursor: pointer;
}
.rec-loading-more:active { color: #f44e48; }

/* 我的投注卡片 */
.mb-card {
  background: #fff;
  padding: 12px 14px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
}
.mb-card:active { background: #f9f9f9; }
.mb-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mb-card-lot {
  font-size: 15px;
  color: #222;
  font-weight: 600;
}
.mb-card-status {
  font-size: 13px;
  font-weight: 500;
}
.mb-card-mid {
  font-size: 12px;
  color: #666;
  margin-top: 6px;
}
.mb-card-bot {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #666;
  margin-top: 8px;
  align-items: center;
}
.mb-card-time {
  margin-left: auto;
  color: #999;
}

/* ================================================================
   提现页 (withdraw.js) - APK activity_tixian
   ================================================================ */
.wd-bank {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 16px 14px;
  cursor: pointer;
}
.wd-bank-name {
  font-size: 14px;
  color: #222;
  font-weight: 500;
}
.wd-bank-no {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}
.wd-bank-arrow {
  color: #ccc;
  font-size: 18px;
}
.wd-money-wrap {
  background: #fff;
  padding: 14px 14px 12px;
}
.wd-money-lbl {
  font-size: 14px;
  color: #222;
}
.wd-money-input-row {
  display: flex;
  align-items: center;
  margin-top: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}
.wd-money-yen {
  font-size: 28px;
  color: #f44e48;
  margin-right: 4px;
}
.wd-money-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 28px;
  color: #f44e48;
  font-weight: 600;
  background: transparent;
}
.wd-money-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  font-size: 12px;
  color: #666;
}
.wd-all {
  color: #f44e48;
  cursor: pointer;
  font-weight: 500;
}

/* ================================================================
   首页 banner 轮播 + 修复
   ================================================================ */
.home-banner {
  margin-top: 8px;
  background: #fff;
  overflow: hidden;
  position: relative;
}
.home-banner-track {
  display: flex;
  transition: transform 0.5s ease;
  width: 100%;
}
.home-banner-slide {
  min-width: 100%;
  height: 130px;
  overflow: hidden;
  cursor: pointer;
}
.home-banner-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.home-banner-dots {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.home-banner-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
}
.home-banner-dot.active {
  background: #fff;
}

/* 中奖跑马灯点击态 */
.win-strip-content {
  cursor: pointer;
}
.win-strip-content:active {
  opacity: 0.7;
}

/* ================================================================
   投注页 bet.js - 严格按 APK activity_buydetail.xml
   ================================================================ */
.bet-page {
  background: #f0f0f0;
  min-height: 100vh;
  padding-bottom: 30px;
}

/* 顶部深色区: 期号+倒计时 | 上期开奖 */
.bet-hdr {
  background: #252a2e;
  color: #fff;
  padding: 12px 12px 14px;
  display: flex;
  gap: 10px;
  overflow: hidden;
}
.bet-hdr-l {
  flex: 1;
  min-width: 0;
}
.bet-hdr-r {
  flex: 1;
  min-width: 0;
  text-align: right;
}
.bet-hdr-period {
  font-size: 12px;
  color: #d0d3d8;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bet-hdr-lbl {
  font-size: 11px;
  color: #8f929a;
  margin-bottom: 8px;
}
.bet-cd-row {
  display: flex;
  align-items: center;
  gap: 3px;
}
.bet-cd-blk {
  background: #000;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  min-width: 22px;
  text-align: center;
}
.bet-cd-sep {
  color: #8f929a;
  font-weight: bold;
}
.bet-hdr-balls {
  display: flex;
  gap: 3px;
  justify-content: flex-end;
  margin-top: 4px;
  flex-wrap: wrap;
}
.bet-hdr-ball {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f87171, #dc2626);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 玩法头 */
.bet-played-hdr {
  background: #fff;
  padding: 12px 14px 12px 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
}
.bet-played-hdr::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 14px;
  bottom: 14px;
  width: 3px;
  background: #f59e0b;
  border-radius: 2px;
}
.bet-played-lbl {
  font-size: 14px;
  color: #222;
  font-weight: 500;
}
.bet-played-name {
  flex: 1;
  text-align: right;
  font-size: 13px;
  color: #444;
}
.bet-played-arrow {
  color: #ccc;
  font-size: 18px;
}
.bet-tip {
  background: #fafafa;
  color: #81868b;
  font-size: 12px;
  padding: 10px 14px;
  line-height: 1.5;
}

/* 选号区 */
.bet-select-area {
  background: #fff;
  padding: 10px 12px;
  overflow: hidden;
}
.bet-position {
  padding: 8px 12px 4px;
  border-bottom: 1px solid #f0f0f0;
}
.bet-position:last-child { border-bottom: none; }
.bet-pos-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.bet-pos-label {
  background: #14b8a6;
  color: #fff;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 500;
  flex-shrink: 0;
}
.bet-pos-quick {
  display: flex;
  gap: 3px;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.bet-pos-quick button, .bet-tool-btn {
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  color: #666;
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 3px;
  cursor: pointer;
  min-width: 28px;
}
.bet-pos-quick button:active, .bet-tool-btn:active {
  background: #e5e5e5;
}
.bet-balls-row {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 3px;
  width: 100%;
}
.bet-ball {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 2px 0;
  min-width: 0;
  /* ⚡ GPU 加速: 消除点击时 transform 触发的整层重绘 */
  transform: translateZ(0);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.bet-ball-num {
  /* 用响应式尺寸: 容器宽的 8.5% ~ 34px */
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 34px;
  min-width: 22px;
  border-radius: 50%;
  /* APP 风格立体渐变灰球 */
  background: radial-gradient(circle at 35% 30%, #d5dade 0%, #a8b0b6 60%, #8b939a 100%);
  color: #fff;
  font-size: clamp(10px, 3.2vw, 13px);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  /* ⚡ transition 从 all 精确到 transform+background, 减少不必要的属性动画 */
  transition: transform 0.12s ease-out, background 0.12s ease-out;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15), inset 0 -2px 3px rgba(0,0,0,0.15), inset 0 1px 1px rgba(255,255,255,0.5);
  will-change: transform;
}
.bet-ball.active .bet-ball-num {
  /* APP 风格立体渐变红球 */
  background: radial-gradient(circle at 35% 30%, #ff8b8b 0%, #f44e48 60%, #d63a34 100%);
  transform: scale(1.05);
  box-shadow: 0 2px 4px rgba(220,38,38,.4), inset 0 -2px 3px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.4);
}
.bet-ball-miss {
  font-size: 10px;
  color: #999;
  margin-top: 2px;
}
.bet-ball-miss.max-omit {
  color: #f44e48;
  font-weight: 600;
}

/* 清空/添加按钮 */
.bet-action-row {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  background: #fff;
}
.bet-btn-clear {
  flex: 1;
  height: 40px;
  background: #f97316;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.bet-btn-add {
  flex: 2;
  height: 40px;
  background: #14b8a6;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

/* 投注列表 */
.bet-section-title {
  background: #fff;
  padding: 12px 14px 10px 22px;
  position: relative;
  font-size: 14px;
  font-weight: 500;
  color: #222;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bet-clear-all-btn {
  background: none;
  border: 1px solid #f44e48;
  color: #f44e48;
  font-size: 12px;
  border-radius: 4px;
  padding: 3px 10px;
  cursor: pointer;
  font-weight: 400;
  flex-shrink: 0;
}
.bet-section-title::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 14px;
  bottom: 12px;
  width: 3px;
  background: #f59e0b;
  border-radius: 2px;
}
.bet-list {
  background: #fafafa;
  min-height: 60px;
  padding: 8px 12px;
}
.bet-list-empty {
  text-align: center;
  color: #ccc;
  font-size: 12px;
  padding: 20px 0;
}
.bet-list-item {
  background: #fff;
  border-radius: 4px;
  padding: 10px 12px;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bet-list-item-l {
  flex: 1;
  min-width: 0;
}
.bet-list-item-title {
  font-size: 13px;
  color: #222;
  font-weight: 500;
}
.bet-list-item-content {
  font-size: 11px;
  color: #666;
  margin-top: 4px;
  word-break: break-all;
}
.bet-list-item-r {
  text-align: right;
  flex-shrink: 0;
  margin-left: 10px;
}
.bet-list-item-money {
  font-size: 13px;
  color: #f44e48;
  font-weight: 600;
}
.bet-list-item-del {
  background: none;
  border: none;
  color: #999;
  font-size: 11px;
  cursor: pointer;
  margin-top: 4px;
  padding: 2px 4px;
}

/* 底部表单行 */
.bet-form-row {
  background: #fff;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid #f0f0f0;
  cursor: pointer;
}
.bet-form-lbl {
  font-size: 14px;
  color: #333;
  min-width: 80px;
}
.bet-form-val {
  flex: 1;
  text-align: right;
  font-size: 14px;
  color: #666;
}
.bet-form-arrow {
  color: #ccc;
  font-size: 18px;
}

/* 倍数调整 */
.bet-times {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}
.bet-times-btn {
  width: 32px;
  height: 32px;
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  font-size: 18px;
  color: #666;
  cursor: pointer;
}
.bet-times-btn:first-child { border-radius: 4px 0 0 4px; }
.bet-times-btn:last-child { border-radius: 0 4px 4px 0; }
.bet-times-input {
  width: 50px;
  height: 32px;
  border: 1px solid #e0e0e0;
  border-left: none;
  border-right: none;
  text-align: center;
  font-size: 14px;
  color: #333;
  outline: none;
  -moz-appearance: textfield;
}
.bet-times-input::-webkit-outer-spin-button,
.bet-times-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 追期复选框 */
.bet-checkbox {
  width: 18px;
  height: 18px;
  border: 1.5px solid #ccc;
  border-radius: 3px;
  display: inline-block;
  position: relative;
}
.bet-checkbox.checked {
  background: #f44e48;
  border-color: #f44e48;
}
.bet-checkbox.checked::after {
  content: '✓';
  color: #fff;
  font-size: 14px;
  position: absolute;
  top: -3px;
  left: 2px;
}

/* 总金额 */
.bet-total {
  text-align: center;
  padding: 18px 0 10px;
  font-size: 22px;
  color: #f44e48;
  font-weight: 600;
}

/* 立即投注 */
.bet-submit {
  display: block;
  width: calc(100% - 28px);
  height: 46px;
  margin: 0 14px 20px;
  background: linear-gradient(90deg, #f44e48, #dc2626);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(244,78,72,.3);
}

/* 玩法选择弹窗 */
.bet-picker-mask {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.bet-picker {
  background: #fff;
  width: 100%;
  border-radius: 12px 12px 0 0;
  padding: 16px 14px 20px;
  padding-bottom: calc(env(safe-area-inset-bottom) + 20px);
  max-height: 70vh;
  overflow-y: auto;
}
.bet-picker-title {
  font-size: 14px;
  color: #999;
  margin-bottom: 12px;
}
.bet-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}
.bet-picker-btn {
  padding: 12px 8px;
  background: #f5f5f5;
  color: #333;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}
.bet-picker-btn.active {
  background: #f97316;
  color: #fff;
}
.bet-picker-btns {
  display: flex;
  gap: 12px;
}
.bet-picker-cancel,
.bet-picker-ok {
  flex: 1;
  height: 42px;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.bet-picker-cancel {
  background: #f0f0f0;
  color: #666;
}
.bet-picker-ok {
  background: #f44e48;
  color: #fff;
}

/* 记录项额外描述行 */
.rec-item-desc {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

/* ================================================================
   中奖跑马灯 - 上下翻页 (ViewFlipper 效果)
   覆盖旧的 win-strip 横向样式
   ================================================================ */
.win-strip-flipper {
  flex: 1;
  height: 28px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  margin-left: 10px;
}
.win-strip-item {
  position: absolute;
  left: 0;
  right: 0;
  height: 28px;
  line-height: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 0 4px;
  transition: transform 0.5s ease-in-out;
}
/* item-0 默认在 0px (显示区), item-1 在 28px (下方隐藏) */
#win-item-0 { transform: translateY(0); }
#win-item-1 { transform: translateY(28px); }
/* 翻页后: item-0 上滚到 -28px, item-1 上滚到 0 (显示) */
.win-strip-flipper.flip-1 #win-item-0 { transform: translateY(-28px); }
.win-strip-flipper.flip-1 #win-item-1 { transform: translateY(0); }

.win-strip-item .win-name {
  color: #444;
  font-weight: 500;
}
.win-strip-item .win-lot {
  color: #666;
  font-size: 12px;
}
.win-strip-item .win-money {
  color: #f44e48;
  font-weight: 600;
  margin-left: auto;
}

/* ================================================================
   首页顶部区 (v20260717p 完整版)
   ================================================================ */
.home-hdr {
  background: #252a2e;
  color: #fff;
  padding: 16px 14px 16px;
  padding-top: calc(var(--sat, 0px) + 16px);
}
.home-hdr-row1 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.home-avatar img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.2);
  object-fit: cover;
  background: #333;
}
.home-hdr-info {
  flex: 1;
  min-width: 0;
}
.home-lv-name {
  display: flex;
  align-items: center;
  gap: 8px;
}
.home-name {
  font-size: 15px;
  color: #fff;
  font-weight: 500;
}
.home-hdr-row2 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.home-money-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.home-money-val {
  font-size: 22px;
  font-weight: 600;
  color: #fff;
}
.home-task-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255,255,255,.7);
  margin-top: 12px;
  padding: 0 4px;
}
.home-task-bar {
  height: 3px;
  background: rgba(255,255,255,.1);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 6px;
}
.home-task-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #f44e48);
  border-radius: 2px;
  transition: width .3s;
}

/* 大家在玩(圆图) */
.lottery-row-inline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 4px 8px 8px;
}
.lottery-inline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.lottery-inline-item img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
}
.lottery-inline-item span {
  font-size: 12px;
  color: #333;
}

/* 中奖跑马灯 - 上下翻页 */
.win-strip {
  display: flex !important;
  align-items: center;
  gap: 12px;
  background: #fff;
  margin: 8px 12px 0;
  padding: 10px 14px;
  border-radius: 22px;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  cursor: pointer;
  height: 44px;
  overflow: hidden;
}
.win-strip-icon {
  background: linear-gradient(135deg, #f97316, #f44e48);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.1;
  padding: 6px 8px;
  border-radius: 50%;
  text-align: center;
  min-width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.win-strip-content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  height: 24px;
  position: relative;
}
.win-flipper {
  position: relative;
  height: 24px;
  overflow: hidden; /* v14: 兜底防止极端情况下滑出的 item 视觉溢出 */
}
.win-flipper-item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 13px;
  color: #333;
  line-height: 24px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.win-strip-money {
  color: #f44e48;
  font-weight: 600;
  margin-left: 8px;
}
@keyframes winSlideIn {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes winSlideOut {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-24px); opacity: 0; }
}
.win-slide-in {
  animation: winSlideIn 0.5s ease forwards;
}
.win-slide-out {
  animation: winSlideOut 0.5s ease forwards;
}

/* 分组彩种列表 */
.home-section {
  background: #fff;
  margin-top: 8px;
  padding-bottom: 8px;
}
.home-section-title {
  padding: 12px 14px 8px 20px;
  font-size: 14px;
  color: #333;
  font-weight: 500;
  position: relative;
}
.home-section-title::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 14px;
  bottom: 10px;
  width: 3px;
  background: #f59e0b;
  border-radius: 2px;
}
.lottery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 4px 8px;
}
.lottery-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: #fff;
  cursor: pointer;
  border-radius: 6px;
}
.lottery-card:active { background: #f9f9f9; }
.lottery-card img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.lottery-info {
  min-width: 0;
  flex: 1;
}
.lottery-name {
  font-size: 14px;
  color: #222;
  font-weight: 500;
}
.lottery-desc {
  font-size: 11px;
  color: #999;
  margin-top: 2px;
}

/* 客服浮动 */
.home-kefu-float {
  position: fixed;
  right: 12px;
  bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  background: #f44e48;
  color: #fff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  z-index: 100;
  box-shadow: 0 3px 10px rgba(244,78,72,.4);
  cursor: pointer;
}

/* 底部投注方式选择 */
.bet-mode-list {
  padding: 8px 0 16px;
}
.bet-mode-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  font-size: 14px;
  color: #333;
}
.bet-mode-item:active { background: #f9f9f9; }
.bet-mode-check {
  color: #f44e48;
  font-size: 18px;
  font-weight: bold;
  width: 20px;
  text-align: center;
}

/* 玩法弹窗分组标题 */
.bet-picker-body {
  max-height: 60vh;
  overflow-y: auto;
  margin-bottom: 12px;
}
.bet-picker-group-title {
  font-size: 12px;
  color: #999;
  padding: 8px 4px 6px;
}

/* 银行卡开户地区 */
.bank-card-area {
  font-size: 11px;
  color: rgba(255,255,255,.75);
  margin-top: 4px;
}

/* me tab list icons (SVG 底盘) */
.me-list-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
}

/* ================================================================
   追期弹窗表格 (对齐 APP 图 6)
   ================================================================ */
.bet-chase-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 4px 14px;
  font-size: 14px;
  color: #333;
}
.bet-chase-table {
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}
.bet-chase-thead {
  display: grid;
  grid-template-columns: 2.5fr 1fr 1.2fr 2.5fr;
  padding: 10px 8px;
  color: #999;
  font-size: 12px;
  background: #fafafa;
}
.bet-chase-tbody {
  max-height: 220px;
  overflow-y: auto;
}
.bet-chase-row {
  display: grid;
  grid-template-columns: 2.5fr 1fr 1.2fr 2.5fr;
  padding: 12px 8px;
  font-size: 12px;
  color: #333;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;
}
.bet-chase-endtype {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 4px;
  border-top: 1px solid #f0f0f0;
  font-size: 14px;
  color: #333;
}
.bet-switch {
  width: 42px;
  height: 22px;
  background: #ccc;
  border-radius: 22px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
}
.bet-switch.on {
  background: #22c55e;
}
.bet-switch-dot {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}
.bet-switch.on .bet-switch-dot {
  transform: translateX(20px);
}

/* ================================================================
   PWA 安装引导弹窗
   ================================================================ */
.pwa-install-mask {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: pwaFadeIn 0.2s ease;
}
@keyframes pwaFadeIn { from { opacity: 0 } to { opacity: 1 } }
.pwa-install-box {
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 340px;
  overflow: hidden;
  animation: pwaSlideUp 0.3s ease;
}
@keyframes pwaSlideUp {
  from { transform: translateY(20px); opacity: 0 }
  to { transform: translateY(0); opacity: 1 }
}
.pwa-install-hdr {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 20px 14px;
}
.pwa-install-hdr img {
  width: 52px; height: 52px;
  border-radius: 12px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.pwa-install-title {
  font-size: 17px;
  font-weight: 600;
  color: #222;
}
.pwa-install-subtitle {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}
.pwa-install-body {
  padding: 0 20px 8px;
}
.pwa-ios-guide p, .pwa-ios-guide ol {
  font-size: 14px;
}
.pwa-ios-icon {
  display: inline-flex;
  align-items: center;
  color: #007aff;
  vertical-align: middle;
  margin: 0 2px;
}
.pwa-install-dontshow {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px 16px;
  font-size: 12px;
  color: #999;
  cursor: pointer;
  user-select: none;
}
.pwa-install-dontshow input {
  cursor: pointer;
}
.pwa-install-btns {
  display: flex;
  border-top: 1px solid #f0f0f0;
}
.pwa-install-btn-cancel,
.pwa-install-btn-primary {
  flex: 1;
  padding: 14px 0;
  border: none;
  background: none;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s;
}
.pwa-install-btn-cancel {
  color: #666;
  border-right: 1px solid #f0f0f0;
}
.pwa-install-btn-cancel:active {
  background: #f9f9f9;
}
.pwa-install-btn-primary {
  color: #f44e48;
  font-weight: 600;
}
.pwa-install-btn-primary:active {
  background: #fff5f5;
}

/* ================================================================
   代理中心
   ================================================================ */
.agent-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 20px;
}
.agent-hdr {
  background: linear-gradient(135deg, #f97316, #f44e48);
  color: #fff;
  padding: 20px 16px;
  padding-top: calc(var(--sat, 0px) + 60px);
  margin-top: -46px;
}
.agent-notagent {
  text-align: center;
  padding: 30px 20px 0;
  color: #fff;
}
.agent-notagent > div:first-child { color: #fff; }
.agent-notagent > div:nth-child(2) { color: rgba(255,255,255,0.85); }
.agent-stat-row {
  display: flex;
  gap: 8px;
  padding: 4px 4px 16px;
}
.agent-stat {
  flex: 1;
  background: rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 14px 8px;
  text-align: center;
  backdrop-filter: blur(4px);
}
.agent-stat-val {
  font-size: 22px;
  font-weight: 600;
  color: #fff;
}
.agent-stat-lbl {
  font-size: 11px;
  color: rgba(255,255,255,0.85);
  margin-top: 4px;
}
.agent-invite {
  background: #fff;
  border-radius: 8px;
  padding: 14px;
  color: #333;
}
.agent-invite-title {
  font-size: 13px;
  color: #666;
  margin-bottom: 10px;
}
.agent-invite-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.agent-invite-row input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-size: 12px;
  color: #333;
  background: #fafafa;
  min-width: 0;
}
.agent-invite-row button {
  background: #f44e48;
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
}
.agent-invite-id {
  font-size: 12px;
  color: #666;
  margin-top: 8px;
}
.agent-tabs {
  display: flex;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  margin-top: 8px;
}
.agent-tab {
  padding: 12px 20px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  position: relative;
}
.agent-tab.active {
  color: #f44e48;
  font-weight: 500;
}
.agent-tab.active::after {
  content: '';
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 0;
  height: 2px;
  background: #f44e48;
}

.agent-full-link {
  padding: 24px 20px 30px;
  text-align: center;
  background: #fff;
  margin-top: 8px;
}
.agent-full-btn {
  background: linear-gradient(135deg, #3b82f6, #1e40af);
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(59,130,246,.3);
}
.agent-full-btn:active { transform: translateY(1px); }

/* 顶栏"近期开奖"按钮 */
.topbar-btn-award {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #fff;
  font-size: 13px;
  padding: 4px 8px;
  cursor: pointer;
  user-select: none;
}
.topbar-btn-award:active {
  opacity: 0.7;
}
.topbar-btn-award svg {
  flex-shrink: 0;
}

/* ================================================================
   合买弹窗 (对齐 APK dialog_hemai.xml)
   ================================================================ */
.bet-hemai-dialog {
  background: #fff;
  width: calc(100% - 32px);
  max-width: 360px;
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
  animation: pwaSlideUp 0.25s ease;
}
.bet-hemai-row {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  gap: 8px;
  min-height: 44px;
}
.bet-hemai-lbl {
  font-size: 13px;
  color: #333;
  flex-shrink: 0;
}
.bet-hemai-val {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: #333;
  font-size: 13px;
  text-align: right;
  padding: 4px 0;
}
.bet-hemai-readonly {
  color: #f44e48;
  font-weight: 500;
}
.bet-hemai-hint {
  color: #f97316;
  font-size: 11px;
  flex: 1;
  text-align: right;
}
.bet-hemai-input {
  width: 70px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 13px;
  color: #333;
  outline: none;
  text-align: center;
  flex-shrink: 0;
}
.bet-hemai-input:disabled {
  background: #f5f5f5;
  color: #999;
}
.bet-hemai-input:focus {
  border-color: #f44e48;
}
.bet-hemai-sep {
  height: 1px;
  background: #ececec;
  margin: 0 14px;
}
.bet-hemai-sep-thick {
  height: 8px;
  background: #f0f0f0;
}
.bet-hemai-row-toggle {
  cursor: pointer;
  user-select: none;
}
.bet-hemai-switch {
  width: 42px;
  height: 22px;
  background: #ccc;
  border-radius: 22px;
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
  margin-left: auto;
}
.bet-hemai-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.bet-hemai-switch.checked {
  background: #f44e48;
}
.bet-hemai-switch.checked::after {
  transform: translateX(20px);
}
.bet-hemai-btns {
  display: flex;
  padding: 12px 14px;
  gap: 10px;
  background: #fff;
}
.bet-hemai-btn-cancel,
.bet-hemai-btn-ok {
  flex: 1;
  padding: 10px 0;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}
.bet-hemai-btn-cancel {
  background: #999;
  color: #fff;
}
.bet-hemai-btn-ok {
  background: #f44e48;
  color: #fff;
  flex: 1.2;
}
.bet-hemai-btn-cancel:active { background: #888; }
.bet-hemai-btn-ok:active { background: #d63a34; }

/* 合买内联认购份数行 */
.bet-hemai-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.bet-hemai-inline-input {
  width: 80px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 13px;
  text-align: right;
  outline: none;
}
.bet-hemai-inline-input:focus {
  border-color: #f44e48;
}
.bet-hemai-inline-hint {
  font-size: 11px;
  color: #f97316;
  min-width: 62px;
  text-align: right;
}