.x8-btn { border: none; border-radius: var(--x8-r-sm); background: var(--x8-main); color: var(--x8-main-on); padding: 0.24rem 0.42667rem; font-size: 0.4rem; cursor: pointer; }
.x8-btn:disabled { background: var(--x8-ink-4); }
.x8-btn-lg { padding: 0.32rem 0.48rem; width: 100%; }
.x8-btn-plain { background: var(--x8-surface-3); color: var(--x8-ink-2); }
.x8-input { width: 100%; height: 1.06667rem; border: 1px solid var(--x8-line-2); border-radius: var(--x8-r-sm); padding: 0 0.26667rem; font-size: 0.4rem; outline: none; }
.x8-input:focus { border-color: var(--x8-main); box-shadow: 0 0 0 0.08rem var(--x8-main-soft); }
select.x8-input { -webkit-appearance: none; appearance: none; height: 1.12rem; padding: 0 1.01333rem 0 0.37333rem; border: 1px solid var(--x8-line); border-radius: 0.26667rem; background-color: var(--x8-surface); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.34667rem center; background-size: 0.34667rem; color: var(--x8-ink); font-weight: 600; cursor: pointer; box-shadow: var(--x8-shadow-1); }
select.x8-input:focus { border-color: var(--x8-main); box-shadow: 0 0 0 0.08rem var(--x8-main-soft); }


.x8-m-period { display: flex; align-items: center; gap: 0.21333rem; padding: 0.18667rem 0.32rem; background: #34495e; color: #cfd8e2; font-size: 0.34667rem; }
.x8-m-period-no { color: #ffe08a; font-weight: 700; letter-spacing: 0.01333rem; font-variant-numeric: tabular-nums; }
.x8-m-period-state { display: inline-flex; align-items: center; gap: 0.13333rem; padding: 0.05333rem 0.26667rem; border-radius: 0.29333rem; font-size: 0.32rem; font-weight: 600; color: #fff; }
.x8-m-period-state::before { content: ""; width: 0.16rem; height: 0.16rem; border-radius: 50%; background: #fff; }
.x8-m-period-state.open { background: rgba(39, 174, 96, .95); }
.x8-m-period-state.open::before { animation: x8-m-period-pulse 1.5s infinite; }
.x8-m-period-state.closed { background: rgba(231, 76, 60, .92); }

.x8-m-period-cd { color: #ffe08a; font-weight: 600; font-variant-numeric: tabular-nums; }
@keyframes x8-m-period-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); } 70% { box-shadow: 0 0 0 0.13333rem rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
.x8-m-bal { margin-left: auto; font-variant-numeric: tabular-nums; }
.x8-m-bal b { color: #ffd479; }

.x8-m-lastdraw { display: flex; align-items: center; gap: 0.08rem; padding: 0.13333rem 0.32rem; background: #2e4053; }
.x8-m-lastdraw-label { font-size: 0.32rem; color: #9fb0c2; margin-right: 0.10667rem; }
.x8-m-lastdraw .x8-ball { width: 0.48rem !important; height: 0.48rem !important; font-size: 0.26667rem; font-weight: 700; border: none; }
.x8-m-lastdraw-plus { color: #7f8fa0; font-size: 0.32rem; font-weight: 700; margin: 0 1px; }

.x8-m-cztabs, .x8-m-playtabs { display: flex; gap: 0.16rem; padding: 0.18667rem 0.26667rem; background: var(--x8-surface); overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.x8-m-cztabs::-webkit-scrollbar, .x8-m-playtabs::-webkit-scrollbar { display: none; }
.x8-m-cztabs { border-bottom: 1px solid var(--x8-line); }

.x8-m-playtabs { border-bottom: 1px solid var(--x8-line); position: relative; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 0.64rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 0.64rem), transparent); }


.x8-m-tab, .x8-m-ptab { border: 1px solid var(--x8-line-2); background: var(--x8-surface); color: var(--x8-ink-2); padding: 0.18667rem 0.37333rem; border-radius: var(--x8-r-pill); font-size: 0.34667rem; flex: none; cursor: pointer; }
.x8-m-tab.active, .x8-m-ptab.active { background: var(--x8-main); border-color: var(--x8-main); color: var(--x8-main-on); box-shadow: 0 0.05333rem 0.18667rem var(--x8-main-glow); }


.x8-m-board { padding: 0.32rem; padding-bottom: calc(1.76rem + env(safe-area-inset-bottom, 0px)); }
.x8-play { margin-bottom: 0.42667rem; }

.x8-play-hd { display: flex; align-items: center; gap: 0.21333rem; margin-bottom: 0.24rem; padding-bottom: 0.18667rem; border-bottom: 1px solid var(--x8-line); }
.x8-play-name { font-size: 0.4rem; font-weight: 700; color: var(--x8-ink); padding-left: 0.24rem; position: relative; }
.x8-play-name::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 0.08rem; height: 0.37333rem; border-radius: 0.05333rem; background: var(--x8-main); }
.x8-play-count { font-size: 0.29333rem; font-weight: 600; color: var(--x8-ink-3); background: var(--x8-surface-3); border-radius: 0.24rem; padding: 0.05333rem 0.21333rem; }
.x8-grid { display: grid; gap: 0.16rem; grid-template-columns: repeat(auto-fill, minmax(1.6rem, 1fr)); }
.x8-grid-number { grid-template-columns: repeat(var(--x8-grid-cols), 1fr); }
.x8-grid-size_parity { grid-template-columns: repeat(3, 1fr); }
.x8-grid-zodiac { grid-template-columns: repeat(4, 1fr); }
.x8-grid-color { grid-template-columns: repeat(3, 1fr); }
.x8-grid-tail { grid-template-columns: repeat(5, 1fr); }
.x8-grid-sum { grid-template-columns: repeat(5, 1fr); }
.x8-grid-combo { grid-template-columns: repeat(3, 1fr); }


.x8-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.05333rem; min-height: var(--x8-hit-min); background: var(--x8-surface); border: 1px solid var(--x8-line); border-radius: 0.16rem; padding: 0.26667rem 0.10667rem; user-select: none; touch-action: pan-y; cursor: pointer; transition: transform var(--x8-t-fast); }
.x8-cell:active { transform: scale(.96); }
.x8-cell.selected { background: var(--x8-main); border-color: var(--x8-main); color: var(--x8-main-on); }
.x8-cell.selected .x8-cell-odds { color: rgba(255, 255, 255, .88); }
.x8-cell.disabled { opacity: .5; pointer-events: none; }
.x8-cell.disabled:active { transform: none; }
.x8-cell-name { font-size: var(--x8-cell-font); font-weight: 600; }
.x8-cell-odds { font-size: var(--x8-odds-font); color: var(--x8-main-ink); }
.x8-empty { padding: 1.6rem 0; text-align: center; color: var(--x8-ink-3); }



.x8-grid-number { gap: var(--x8-grid-gap); }
.x8-grid-number .x8-cell { background: transparent; border-color: transparent; padding: var(--x8-cell-pad); gap: 0.08rem; }
.x8-grid-number .x8-cell-name { width: var(--x8-ball); height: var(--x8-ball); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: var(--x8-ball-font); font-family: var(--x8-num); box-shadow: var(--x8-ball-shadow); }
.x8-wave-red .x8-cell-name { background: radial-gradient(circle at 36% 30%, var(--x8-red-1) 0%, var(--x8-red-2) 46%, var(--x8-red-3) 100%); }
.x8-wave-blue .x8-cell-name { background: radial-gradient(circle at 36% 30%, var(--x8-blue-1) 0%, var(--x8-blue-2) 46%, var(--x8-blue-3) 100%); }
.x8-wave-green .x8-cell-name { background: radial-gradient(circle at 36% 30%, var(--x8-green-1) 0%, var(--x8-green-2) 46%, var(--x8-green-3) 100%); }
.x8-grid-number .x8-cell.selected { background: transparent; border-color: transparent; }

.x8-grid-number .x8-cell.selected .x8-cell-name { box-shadow: 0 0 0 0.05333rem var(--x8-surface), 0 0 0 0.10667rem var(--x8-main), var(--x8-ball-shadow); }
.x8-grid-number .x8-cell.selected .x8-cell-odds { color: var(--x8-main-ink); font-weight: 600; }


.x8-tint-red { background: #fff3f1; border-color: #f0b0a8; }
.x8-tint-blue { background: #eef5fc; border-color: #a6cbeb; }
.x8-tint-green { background: #eef8f1; border-color: #a3dbb5; }


.x8-tint-red .x8-cell-name { background-color: #d93a2a; }
.x8-tint-blue .x8-cell-name { background-color: #2f7fc4; }
.x8-tint-green .x8-cell-name { background-color: #2ba05e; }
.x8-cell.x8-tint-red.selected { background: linear-gradient(180deg, #e83a2a, #c81508); border-color: #c81508; }
.x8-cell.x8-tint-blue.selected { background: linear-gradient(180deg, #2f88cf, #0f5490); border-color: #0f5490; }
.x8-cell.x8-tint-green.selected { background: linear-gradient(180deg, #2bab5f, #0f7539); border-color: #0f7539; }
.x8-cell.x8-tint-red.selected .x8-cell-name { background-color: #fff; background-image: none; box-shadow: none; color: #cf261a; }
.x8-cell.x8-tint-blue.selected .x8-cell-name { background-color: #fff; background-image: none; box-shadow: none; color: #176aae; }
.x8-cell.x8-tint-green.selected .x8-cell-name { background-color: #fff; background-image: none; box-shadow: none; color: #178f4a; }



.x8-grid-tail .x8-cell { padding: 0.18667rem 0.08rem 0.16rem; gap: 0.08rem; }
.x8-grid-tail .x8-cell-name { display: flex; align-items: center; gap: 0.08rem; }
.x8-tail-num { width: 0.72rem; height: 0.72rem; border-radius: 0.21333rem; display: flex; align-items: center; justify-content: center; font-size: 0.4rem; font-weight: 700; color: #fff; font-family: var(--x8-num); box-shadow: 0 0.05333rem 0.10667rem rgba(40, 60, 95, .18); }
.x8-tail-suffix { font-size: 0.29333rem; font-style: normal; font-weight: 600; }
.x8-tail-0 { background: #eaf0f8; border-color: #b9cde6; }  .x8-tail-0 .x8-tail-num { background: #3a5a80; }  .x8-tail-0 .x8-tail-suffix { color: #3a5a80; }
.x8-tail-1 { background: #e8f2fd; border-color: #a9cdf2; }  .x8-tail-1 .x8-tail-num { background: #1f6bb0; }  .x8-tail-1 .x8-tail-suffix { color: #1f6bb0; }
.x8-tail-2 { background: #e4f4f4; border-color: #a5d8d8; }  .x8-tail-2 .x8-tail-num { background: #17807f; }  .x8-tail-2 .x8-tail-suffix { color: #17807f; }
.x8-tail-3 { background: #e9f5ec; border-color: #aedcbe; }  .x8-tail-3 .x8-tail-num { background: #2e8b57; }  .x8-tail-3 .x8-tail-suffix { color: #2e8b57; }
.x8-tail-4 { background: #f0f5e0; border-color: #cfdfa4; }  .x8-tail-4 .x8-tail-num { background: #6b8f22; }  .x8-tail-4 .x8-tail-suffix { color: #6b8f22; }
.x8-tail-5 { background: #fbf3d9; border-color: #ead79b; }  .x8-tail-5 .x8-tail-num { background: #a5811a; }  .x8-tail-5 .x8-tail-suffix { color: #a5811a; }
.x8-tail-6 { background: #fdeede; border-color: #f0cfa2; }  .x8-tail-6 .x8-tail-num { background: #c2681a; }  .x8-tail-6 .x8-tail-suffix { color: #c2681a; }
.x8-tail-7 { background: #fdece9; border-color: #f3bcb3; }  .x8-tail-7 .x8-tail-num { background: #c0392b; }  .x8-tail-7 .x8-tail-suffix { color: #c0392b; }
.x8-tail-8 { background: #fdeef2; border-color: #f2c2d0; }  .x8-tail-8 .x8-tail-num { background: #c04a6a; }  .x8-tail-8 .x8-tail-suffix { color: #c04a6a; }
.x8-tail-9 { background: #f4ecf7; border-color: #d8bfe4; }  .x8-tail-9 .x8-tail-num { background: #8e44ad; }  .x8-tail-9 .x8-tail-suffix { color: #8e44ad; }

.x8-cell.x8-tail.selected .x8-tail-num { background: #fff; background-image: none; box-shadow: none; }
.x8-cell.x8-tail.selected .x8-tail-suffix { color: rgba(255, 255, 255, .9); }
.x8-cell.x8-tail-0.selected .x8-tail-num { color: #3a5a80; }
.x8-cell.x8-tail-1.selected .x8-tail-num { color: #1f6bb0; }
.x8-cell.x8-tail-2.selected .x8-tail-num { color: #17807f; }
.x8-cell.x8-tail-3.selected .x8-tail-num { color: #2e8b57; }
.x8-cell.x8-tail-4.selected .x8-tail-num { color: #6b8f22; }
.x8-cell.x8-tail-5.selected .x8-tail-num { color: #a5811a; }
.x8-cell.x8-tail-6.selected .x8-tail-num { color: #c2681a; }
.x8-cell.x8-tail-7.selected .x8-tail-num { color: #c0392b; }
.x8-cell.x8-tail-8.selected .x8-tail-num { color: #c04a6a; }
.x8-cell.x8-tail-9.selected .x8-tail-num { color: #8e44ad; }


.x8-zod-emoji { font-size: 0.53333rem; line-height: 1; }
.x8-zod.selected .x8-cell-name { color: #fff; }
.x8-zod-0 { background: #eaf0f8; border-color: #b9cde6; }  .x8-zod-0 .x8-cell-name { color: #3a5a80; }
.x8-zod-1 { background: #f3ede1; border-color: #d9c9ad; }  .x8-zod-1 .x8-cell-name { color: #8a6a45; }
.x8-zod-2 { background: #fdeede; border-color: #f0cfa2; }  .x8-zod-2 .x8-cell-name { color: #c2681a; }
.x8-zod-3 { background: #fdeef2; border-color: #f2c2d0; }  .x8-zod-3 .x8-cell-name { color: #c04a6a; }
.x8-zod-4 { background: #fbf3d6; border-color: #ecdb99; }  .x8-zod-4 .x8-cell-name { color: #a5811a; }
.x8-zod-5 { background: #e9f5ec; border-color: #b3ddc2; }  .x8-zod-5 .x8-cell-name { color: #2e8b57; }
.x8-zod-6 { background: #fdece9; border-color: #f3bcb3; }  .x8-zod-6 .x8-cell-name { color: #c0392b; }
.x8-zod-7 { background: #f2efe4; border-color: #d8d0b3; }  .x8-zod-7 .x8-cell-name { color: #8a7638; }
.x8-zod-8 { background: #fbf3d9; border-color: #ecdca0; }  .x8-zod-8 .x8-cell-name { color: #ac861e; }
.x8-zod-9 { background: #e6f4f4; border-color: #aadada; }  .x8-zod-9 .x8-cell-name { color: #2a8a8a; }
.x8-zod-10 { background: #eef0f3; border-color: #c8ced8; }  .x8-zod-10 .x8-cell-name { color: #566072; }
.x8-zod-11 { background: #f4ecf7; border-color: #d8bfe4; }  .x8-zod-11 .x8-cell-name { color: #8e44ad; }



.x8-attr-big .x8-cell-name, .x8-attr-small .x8-cell-name, .x8-attr-odd .x8-cell-name,
.x8-attr-even .x8-cell-name, .x8-attr-domestic .x8-cell-name, .x8-attr-wild .x8-cell-name,
.x8-tint-red .x8-cell-name, .x8-tint-blue .x8-cell-name, .x8-tint-green .x8-cell-name {
  min-width: 1.01333rem; padding: 0.05333rem 0.18667rem; border-radius: 0.16rem; color: #fff; font-weight: 700; text-align: center;
  background-image: linear-gradient(160deg, rgba(255, 255, 255, .26), rgba(0, 0, 0, .12));
  box-shadow: 0 1px 0.08rem rgba(30, 45, 75, .18);
}
.x8-attr-big .x8-cell-name { background-color: #e08a1e; }
.x8-attr-small .x8-cell-name { background-color: #2f86d4; }
.x8-attr-odd .x8-cell-name { background-color: #35a96a; }
.x8-attr-even .x8-cell-name { background-color: #a465bd; }
.x8-attr-domestic .x8-cell-name { background-color: #c08c2a; }
.x8-attr-wild .x8-cell-name { background-color: #5b8f47; }
.x8-cell.selected .x8-cell-name { color: #fff; }

.x8-cell[class*="x8-attr-"].selected .x8-cell-name { background-color: #fff; background-image: none; box-shadow: none; }
.x8-attr-big.selected .x8-cell-name { color: #c67a15; }
.x8-attr-small.selected .x8-cell-name { color: #2378c4; }
.x8-attr-odd.selected .x8-cell-name { color: #2e9e5f; }
.x8-attr-even.selected .x8-cell-name { color: #9b59b6; }
.x8-attr-domestic.selected .x8-cell-name { color: #a8761c; }
.x8-attr-wild.selected .x8-cell-name { color: #4a7c3f; }




.x8-cell { background-image: linear-gradient(180deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, 0) 62%); box-shadow: var(--x8-shadow-1); }
.x8-grid-number .x8-cell { background-image: none; box-shadow: none; }

.x8-cell-odds { font-family: var(--x8-num); font-variant-numeric: tabular-nums; opacity: .85; }
.x8-cell.selected .x8-cell-odds { opacity: 1; }
.x8-tail .x8-tail-num { background-image: linear-gradient(160deg, rgba(255, 255, 255, .32), rgba(0, 0, 0, .14)); }


.x8-grid-pair { grid-template-columns: repeat(2, minmax(2.4rem, 4rem)); justify-content: center; }
.x8-zm-wrap { display: flex; flex-wrap: wrap; gap: 0.21333rem; }

.x8-zm-group { flex: 1 1 auto; min-width: 0; max-width: 12.26667rem; border: 1px solid var(--x8-line); border-radius: var(--x8-r-md); padding: 0.16rem 0.21333rem 0.18667rem; background: var(--x8-surface-2); }
.x8-zm-label { display: block; width: 100%; margin: 0 auto 0.16rem; padding: 0.05333rem 0; border-radius: 0.13333rem; font-size: 0.32rem; font-weight: 700; text-align: center; letter-spacing: 0.01333rem; }
.x8-zm-label-1 { background: #e9eff8; color: #3a5a80; }
.x8-zm-label-2 { background: #e4f2f2; color: #17807f; }
.x8-zm-label-3 { background: #e9f4ec; color: #2e8b57; }
.x8-zm-label-4 { background: #fbf2da; color: #a5811a; }
.x8-zm-label-5 { background: #fcebe8; color: #c0392b; }
.x8-zm-label-6 { background: #f3ecf7; color: #8e44ad; }
.x8-zm-cells { display: flex; gap: 0.13333rem; }
.x8-zm-cells .x8-cell { flex: 1 1 0; width: auto; min-width: 1.38667rem; }



.x8-m-betbar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; align-items: center; height: calc(1.44rem + env(safe-area-inset-bottom, 0px)); padding: 0 0.32rem env(safe-area-inset-bottom, 0px); background: var(--x8-surface); border-top: 1px solid var(--x8-line); gap: 0.32rem; z-index: 90; box-shadow: 0 -0.05333rem 0.26667rem rgba(20, 40, 90, .06); }
.x8-m-betinfo { flex: 1; font-size: 0.37333rem; color: var(--x8-ink-2); font-variant-numeric: tabular-nums; }
.x8-m-betinfo b { color: var(--x8-main-ink); font-family: var(--x8-num); }
.x8-m-betgo { border: none; background: var(--x8-main); color: var(--x8-main-on); border-radius: 0.16rem; padding: 0.26667rem 0.69333rem; font-size: 0.4rem; font-weight: 600; box-shadow: 0 0.08rem 0.26667rem var(--x8-main-glow); transition: transform var(--x8-t-fast); }
.x8-m-betgo:active { transform: scale(.97); }
.x8-m-betgo:disabled { background: var(--x8-ink-4); box-shadow: none; }


.x8-m-drawer-mask { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 100; }
.x8-m-drawer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 101; background: var(--x8-surface); border-radius: 0.37333rem 0.37333rem 0 0; max-height: 76vh; display: flex; flex-direction: column; box-shadow: var(--x8-shadow-up); padding-bottom: env(safe-area-inset-bottom, 0px); }
.x8-m-drawer-hd { display: flex; align-items: center; justify-content: space-between; padding: 0.37333rem 0.42667rem; border-bottom: 1px solid var(--x8-line); font-size: 0.42667rem; font-weight: 700; color: var(--x8-ink); background: var(--x8-surface-2); }
.x8-m-drawer-hd > span:first-child { display: inline-flex; align-items: center; gap: 0.21333rem; }
.x8-m-drawer-hd > span:first-child::before { content: ""; width: 0.10667rem; height: 0.42667rem; border-radius: 0.05333rem; background: var(--x8-main); }
.x8-m-drawer-close { border: none; background: none; font-size: 0.64rem; color: var(--x8-ink-3); line-height: 1; }
.x8-m-drawer-list { overflow-y: auto; padding: 0.10667rem 0; }
.x8-slip-row { display: flex; align-items: center; gap: 0.26667rem; padding: 0.26667rem 0.42667rem; border-bottom: 1px solid var(--x8-line); }
.x8-slip-info { flex: 1; min-width: 0; }
.x8-slip-name { display: block; font-size: 0.4rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x8-slip-meta { display: flex; align-items: center; gap: 0.16rem; margin-top: 0.05333rem; }

.x8-slip-play { font-size: 0.29333rem; color: var(--x8-ink-3); background: var(--x8-surface-3); border-radius: 0.08rem; padding: 1px 0.13333rem; max-width: 2.45333rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x8-slip-odds { font-size: 0.32rem; color: var(--x8-main-ink); font-family: var(--x8-num); font-variant-numeric: tabular-nums; }
.x8-slip-amt { width: 2.4rem; height: 1.01333rem; border: 1px solid var(--x8-line-2); border-radius: 0.13333rem; padding: 0 0.21333rem; text-align: right; font-size: 0.4rem; outline: none; font-family: var(--x8-num); font-variant-numeric: tabular-nums; }

.x8-slip-amt:placeholder-shown { border-color: #ecc98a; background: #fffdf4; }
.x8-slip-amt:focus { border-color: var(--x8-main); background: var(--x8-surface); box-shadow: 0 0 0 0.08rem var(--x8-main-soft); }
.x8-slip-del { width: 0.74667rem; height: 0.74667rem; border: none; background: var(--x8-surface-3); border-radius: 50%; color: var(--x8-ink-3); font-size: 0.48rem; line-height: 1; }
.x8-m-drawer-quick { display: flex; gap: 0.21333rem; padding: 0.32rem 0.42667rem 0.10667rem; }
.x8-chip { flex: 1; border: 1px solid var(--x8-main-line); background: var(--x8-main-softer); border-radius: 0.16rem; padding: 0.24rem 0; font-size: 0.37333rem; font-weight: 600; color: var(--x8-main-ink); font-family: var(--x8-num); transition: transform var(--x8-t-fast); }
.x8-chip:active { border-color: var(--x8-main); background: var(--x8-main-soft); transform: scale(.95); }
.x8-m-drawer-sum { padding: 0.26667rem 0.42667rem; font-size: 0.4rem; color: var(--x8-main-ink); font-weight: 700; text-align: right; font-family: var(--x8-num); font-variant-numeric: tabular-nums; }
.x8-m-drawer-ops { display: flex; gap: 0.26667rem; padding: 0.21333rem 0.42667rem 0.48rem; }
.x8-m-drawer-ops .x8-btn-plain { flex: none; width: 2.4rem; }
.x8-m-drawer-ops .x8-btn-lg { flex: 1; }
.x8-slip-empty { padding: 0.8rem; text-align: center; color: var(--x8-ink-3); }


.x8-modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 10000; padding: 0.53333rem; }
.x8-modal { width: 100%; max-width: 9.6rem; background: var(--x8-surface); border-radius: 0.26667rem; padding: 0.53333rem; }
.x8-modal-title { font-size: 0.45333rem; font-weight: 700; margin-bottom: 0.37333rem; color: var(--x8-ink); }
.x8-modal-body { font-size: 0.4rem; line-height: 1.6; margin-bottom: 0.42667rem; }
.x8-modal-foot { display: flex; justify-content: flex-end; gap: 0.26667rem; }
.x8-modal-foot .x8-btn { width: auto; padding: 0.21333rem 0.48rem; }
.x8-toast { position: fixed; top: 1.6rem; left: 50%; transform: translateX(-50%) translateY(-0.32rem); background: rgba(0,0,0,.82); color: #fff; padding: 0.26667rem 0.53333rem; border-radius: 0.16rem; font-size: 0.37333rem; z-index: 10001; opacity: 0; pointer-events: none; transition: opacity var(--x8-t-mid), transform var(--x8-t-mid); }
.x8-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.x8-toast-success { background: rgba(46, 158, 91, .94); }
.x8-toast-error, .x8-toast-warn { background: rgba(209, 67, 67, .94); }


.x8-cell-combo { background: var(--x8-main-softer); border-style: dashed; border-color: var(--x8-main-line); }
.x8-combo-modal { max-width: 10.66667rem; width: 100%; }
.x8-combo-sub { display: flex; justify-content: space-between; font-size: 0.34667rem; color: var(--x8-ink-3); margin-bottom: 0.32rem; }
.x8-combo-odds { color: var(--x8-main-ink); font-weight: 600; font-family: var(--x8-num); }
.x8-combo-grid { display: grid; gap: 0.16rem; margin-bottom: 0.26667rem; max-height: 50vh; overflow-y: auto; }
.x8-combo-zodiac { grid-template-columns: repeat(4, 1fr); }
.x8-combo-tail { grid-template-columns: repeat(5, 1fr); }
.x8-combo-number { grid-template-columns: repeat(6, 1fr); }
.x8-combo-cell { display: flex; align-items: center; justify-content: center; height: 1.17333rem; border: 1px solid var(--x8-line); border-radius: 0.16rem; font-size: 0.4rem; font-weight: 600; user-select: none; cursor: pointer; transition: transform var(--x8-t-fast); }
.x8-combo-cell:active { transform: scale(.94); }
.x8-combo-cell.picked { background: var(--x8-main); border-color: var(--x8-main); color: var(--x8-main-on); }
.x8-combo-cell.mute { opacity: .35; }
.x8-combo-hint { text-align: center; font-size: 0.34667rem; color: var(--x8-ink-3); margin-bottom: 0.21333rem; }


.x8-view { padding: 0.37333rem 0.32rem; }
.x8-view-title { font-size: 0.42667rem; font-weight: 700; color: var(--x8-ink); margin-bottom: 0.32rem; }
.x8-filter-bar { display: flex; gap: 0.21333rem; margin-bottom: 0.32rem; flex-wrap: wrap; align-items: center; }
.x8-inline { width: auto; flex: 1; }
.x8-filter-bar .x8-btn { flex: none; }
.x8-table { width: 100%; border-collapse: collapse; font-size: 0.32rem; display: block; overflow-x: auto; white-space: nowrap; border: 1px solid var(--x8-line); border-radius: var(--x8-r-md); box-shadow: var(--x8-shadow-1); }
.x8-table th, .x8-table td { border-bottom: 1px solid var(--x8-line); padding: 0.26667rem; text-align: left; }
.x8-table th { background: var(--x8-surface-3); color: var(--x8-ink-2); font-weight: 600; }

.x8-table th.x8-td-num, .x8-table td.x8-td-num { text-align: right; font-family: var(--x8-num); font-variant-numeric: tabular-nums; }
.x8-table tbody tr:nth-child(even) { background: var(--x8-surface-2); }
.x8-table tbody tr:last-child td { border-bottom: none; }
.x8-td-empty { text-align: center; color: var(--x8-ink-3); padding: 0.8rem 0; }





.x8-table.x8-cardlist { display: block; border: 0; border-radius: 0; box-shadow: none; overflow: visible; white-space: normal; font-size: 0.34667rem; }
.x8-table.x8-cardlist thead { display: none; }
.x8-table.x8-cardlist tbody { display: block; }

.x8-table.x8-cardlist tbody tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0.58667rem; row-gap: 0; margin-bottom: 0.24rem; padding: 0.21333rem 0.34667rem 0.24rem; background: var(--x8-surface); border: 1px solid var(--x8-line); border-radius: 0.26667rem; box-shadow: var(--x8-shadow-1); }
.x8-table.x8-cardlist tbody tr:nth-child(even) { background: var(--x8-surface); }   



.x8-table.x8-cardlist td { display: flex; align-items: baseline; gap: 0.21333rem; padding: 0.08rem 0; line-height: 1.55; border: 0; color: var(--x8-ink); font-weight: 500; text-align: left; word-break: break-all; font-variant-numeric: tabular-nums; }

.x8-table.x8-cardlist td::before { content: attr(data-label); flex: none; width: 1.33333rem; white-space: nowrap; color: var(--x8-ink-3); font-size: 0.29333rem; font-weight: 400; }

.x8-table.x8-cardlist td.x8-wide, .x8-table.x8-cardlist td:not([data-label]) { grid-column: 1 / -1; }

.x8-table.x8-cardlist td.x8-wide { color: var(--x8-ink-2); font-size: 0.32rem; font-weight: 400; }

.x8-table.x8-cardlist td.x8-wide:first-child { padding-bottom: 0.16rem; margin-bottom: 0.10667rem; border-bottom: 1px solid var(--x8-line); }
.x8-table.x8-cardlist td.x8-nil { color: var(--x8-ink-4); font-weight: 400; }        

.x8-table.x8-cardlist td:not([data-label]) { justify-content: flex-end; padding-top: 0.13333rem; }
.x8-table.x8-cardlist td.x8-td-empty { grid-column: 1 / -1; display: block; text-align: center; border: 0; }
.x8-badge { padding: 1px 0.18667rem; border-radius: 0.08rem; color: #fff; font-size: 0.29333rem; }
.x8-badge-orange { background: var(--x8-warn); }
.x8-badge-gray { background: var(--x8-muted); }
.x8-badge-red { background: var(--x8-danger); }
.x8-win { color: var(--x8-ok); font-weight: 600; }
.x8-lose { color: var(--x8-danger); font-weight: 600; }

.x8-amt-in { color: var(--x8-danger); font-weight: 600; }
.x8-amt-out { color: var(--x8-ok); font-weight: 600; }
.x8-muted { color: var(--x8-ink-3); }
.x8-pager { display: flex; align-items: center; gap: 0.32rem; margin-top: 0.32rem; justify-content: flex-end; font-size: 0.34667rem; }
.x8-pager-info { color: var(--x8-ink-3); margin-right: auto; }
.x8-pgbtn { border: 1px solid var(--x8-line-2); background: var(--x8-surface); border-radius: 0.13333rem; padding: 0.18667rem 0.37333rem; font-size: 0.34667rem; }
.x8-pgbtn:disabled { color: var(--x8-ink-4); }
.x8-cards { display: flex; flex-wrap: wrap; gap: 0.21333rem; margin-bottom: 0.21333rem; }
.x8-card { flex: 1; min-width: 2.4rem; background: linear-gradient(180deg, var(--x8-main-softer), var(--x8-surface)); border: 1px solid var(--x8-main-line); border-radius: var(--x8-r-md); padding: 0.32rem; text-align: center; }
.x8-card-v { font-size: 0.48rem; font-weight: 700; color: var(--x8-main-ink); font-family: var(--x8-num); font-variant-numeric: tabular-nums; }
.x8-card-t { font-size: 0.32rem; color: var(--x8-ink-3); margin-top: 0.10667rem; }
.x8-sub-title { font-size: 0.37333rem; font-weight: 700; color: var(--x8-ink); margin: 0.42667rem 0 0.21333rem; }
.x8-slip-sum { padding: 0.24rem 0; font-size: 0.37333rem; color: var(--x8-main-ink); font-weight: 600; font-family: var(--x8-num); font-variant-numeric: tabular-nums; border-top: 1px dashed var(--x8-line); margin-top: 0.16rem; }


.x8-draw-block { padding: 0.32rem 0; border-bottom: 1px solid var(--x8-line); }
.x8-draw-cz { font-size: 0.4rem; font-weight: 700; color: var(--x8-ink); margin-bottom: 0.21333rem; }
.x8-draw-balls { display: flex; align-items: center; gap: 0.16rem; flex-wrap: wrap; color: var(--x8-ink-3); font-size: 0.34667rem; }
.x8-draw-issue { color: var(--x8-ink-3); margin-right: 0.16rem; font-variant-numeric: tabular-nums; }
.x8-ball { display: inline-flex; align-items: center; justify-content: center; width: 0.85333rem; height: 0.85333rem; border-radius: 50%; background: var(--x8-surface-3); border: 1px solid var(--x8-line-2); font-size: 0.34667rem; font-weight: 700; color: var(--x8-ink); font-family: var(--x8-num); box-shadow: inset 0 -0.05333rem 0.10667rem rgba(0, 0, 0, .12); }
.x8-ball-plus { color: var(--x8-ink-4); font-weight: 700; box-shadow: none; }
.x8-ball-red { background: radial-gradient(circle at 36% 30%, var(--x8-red-1), var(--x8-red-3)); border: none; color: #fff; box-shadow: inset 0 -0.05333rem 0.13333rem rgba(0, 0, 0, .22), 0 1px 0.08rem rgba(0, 0, 0, .15); }
.x8-ball-blue { background: radial-gradient(circle at 36% 30%, var(--x8-blue-1), var(--x8-blue-2)); border: none; color: #fff; box-shadow: inset 0 -0.05333rem 0.13333rem rgba(0, 0, 0, .22), 0 1px 0.08rem rgba(0, 0, 0, .15); }
.x8-ball-green { background: radial-gradient(circle at 36% 30%, var(--x8-green-1), var(--x8-green-2)); border: none; color: #fff; box-shadow: inset 0 -0.05333rem 0.13333rem rgba(0, 0, 0, .22), 0 1px 0.08rem rgba(0, 0, 0, .15); }


.x8-panel { position: fixed; inset: 0; z-index: 10000; background: var(--x8-surface); display: flex; flex-direction: column; width: auto !important; max-width: none; }
.x8-panel-hd { display: flex; align-items: center; justify-content: space-between; padding: 0.37333rem 0.42667rem; border-bottom: 1px solid var(--x8-line); flex: none; }
.x8-panel-title { font-size: 0.45333rem; font-weight: 700; color: var(--x8-ink); }
.x8-panel-close { border: none; background: none; font-size: 0.64rem; color: var(--x8-ink-3); line-height: 1; }
.x8-panel-body { padding: 0.37333rem 0.42667rem; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(0.37333rem + env(safe-area-inset-bottom, 0px)); }
.x8-panel-inner { margin-top: 0.16rem; }
.x8-tabbar { display: flex; gap: 0.16rem; margin-bottom: 0.32rem; }
.x8-tabbtn { flex: 1; border: 1px solid var(--x8-line-2); background: var(--x8-surface); color: var(--x8-ink-2); padding: 0.24rem 0; border-radius: 0.13333rem; font-size: 0.37333rem; }
.x8-tabbtn.active { background: var(--x8-main); border-color: var(--x8-main); color: var(--x8-main-on); }
.x8-linkbtn { border: none; background: none; color: var(--x8-main-ink); font-size: 0.34667rem; text-decoration: underline; padding: 0; }
.x8-kv-list { display: flex; flex-wrap: wrap; background: var(--x8-surface-2); border: 1px solid var(--x8-line); border-radius: var(--x8-r-md); overflow: hidden; }
.x8-kv { display: flex; width: 100%; padding: 0.26667rem 0.32rem; border-bottom: 1px solid var(--x8-line); font-size: 0.37333rem; box-sizing: border-box; }
.x8-kv-k { width: 2.13333rem; color: var(--x8-ink-3); flex: none; }
.x8-kv-v { color: var(--x8-ink); font-weight: 600; word-break: break-all; }
.x8-msg-item { padding: 0.34667rem 0.37333rem; margin-bottom: 0.26667rem; background: var(--x8-surface-2); border: 1px solid var(--x8-line); border-radius: var(--x8-r-md); }
.x8-msg-item.unread { cursor: pointer; background: var(--x8-surface); border-color: var(--x8-line-2); }
.x8-msg-hd { display: flex; align-items: center; gap: 0.16rem; margin-bottom: 0.16rem; }

.x8-msg-title { font-size: 0.4rem; font-weight: 600; color: var(--x8-ink-3); }
.x8-msg-body { font-size: 0.37333rem; color: var(--x8-ink-3); line-height: 1.6; white-space: pre-wrap; }
.x8-msg-time { font-size: 0.32rem; color: var(--x8-ink-4); margin-top: 0.16rem; }
.x8-msg-item.unread .x8-msg-title { font-weight: 700; color: var(--x8-ink); }
.x8-msg-item.unread .x8-msg-body { color: var(--x8-ink-2); }
.x8-msg-item.unread .x8-msg-time { color: var(--x8-ink-3); }
.x8-dot { width: 0.21333rem; height: 0.21333rem; border-radius: 50%; background: var(--x8-danger); flex: none; }
.x8-check { display: flex; align-items: center; gap: 0.16rem; font-size: 0.37333rem; color: var(--x8-ink-2); }


.x8-mb-head { display: flex; align-items: center; padding: 0 0.26667rem 0 0.21333rem; }
.x8-mb-back { flex: none; width: 0.64rem; height: 0.64rem; border: none; background: none; padding: 0; display: flex; align-items: center; justify-content: center; }

.x8-mb-back i { display: block; width: 0.64rem; height: 0.64rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 3.5L8.25 11L15.5 18.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }

.x8-mb-side { flex: none; display: flex; align-items: center; margin-left: 0.13333rem; font-size: 0.32rem; white-space: nowrap; }
.x8-mb-side-t { line-height: 0.32rem; }
.x8-mb-arrow { flex: none; width: 0.48rem; height: 0.64rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 24'%3E%3Cpath d='M7.6 8.6L12.45 13.6L17.3 8.6' fill='none' stroke='%23fff' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.x8-mb-side b { font-weight: 400; font-family: var(--x8-num); }
.x8-mb-side b.up { color: #b9f6ca; }
.x8-mb-side b.down { color: #ffd0c0; }
.x8-mb-head .x8-mb-title { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; min-width: 0; font-size: 0.45333rem; }
.x8-mb-title span { position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.x8-mb-title .x8-mb-caret { position: absolute; left: 100%; margin-top: 0.07467rem; margin-left: 0.128rem; border-left-width: 0.16rem; border-right-width: 0.16rem; border-top-width: 0.2rem; }


.x8-mb-title .x8-mb-ret { position: absolute; left: calc(100% + 0.72rem); top: 50%; transform: translateY(-50%);
  padding: 0; border: none; background: none; color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: normal; white-space: nowrap; cursor: pointer; }
.x8-mb-cz { flex: none; margin-left: auto; margin-right: 0.13333rem; font-size: 0.34667rem; white-space: nowrap; }

.x8-mb-caret { flex: none; width: 0; height: 0; border-left: 0.13333rem solid transparent; border-right: 0.13333rem solid transparent; border-top: 0.13333rem solid currentColor; opacity: .9; }




.x8-mb-draw { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "issue cd" "balls cd";
  position: relative; align-items: center; height: 1.94667rem; box-sizing: border-box; padding: 0 0.26667rem; background: #f3f5f8; }

.x8-mb-draw::after,
.x8-mb-bar::before,
.x8-mb-bar::after,
.x8-m-board .x8-play::after { content: " "; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 0.01333rem solid #c5cad5; transform: scaleY(.5); pointer-events: none; }
.x8-mb-bar::before { top: 0; bottom: auto; border-bottom: none; border-top: 0.01333rem solid #c5cad5; }
.x8-m-board .x8-play::after { left: -0.26667rem; right: -0.26667rem; }
.x8-mb-draw-hd { display: contents; }

.x8-mb-issue { grid-area: issue; position: relative; top: -0.04rem; display: flex; align-items: center; font-size: 0.34667rem; color: #858b9c; align-self: end; }

.x8-mb-issue b { padding-right: 0.26667rem; color: #111626; font-weight: 600; font-size: 0.4rem; line-height: 0.58667rem; }
.x8-mb-issue span { font-family: var(--x8-num); line-height: 0.58667rem; }


.x8-mb-cd { grid-area: cd; align-self: center; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  height: 1.33333rem; min-width: 2.66667rem; padding-left: 0.26667rem; border-left: 0.01333rem solid #e2e4ea; text-align: center; font-size: 0.34667rem; color: #858b9c; }
.x8-mb-cd > * { white-space: nowrap; }
.x8-mb-cd span { line-height: 0.53333rem; padding-bottom: 0.21333rem; }
.x8-mb-cd b { font-size: 0.4rem; line-height: normal; color: #f35e5b; font-family: var(--x8-num); font-weight: 600; }
.x8-mb-balls { grid-area: balls; position: relative; top: 0.01333rem; display: flex; align-items: flex-start; flex-wrap: nowrap; align-self: start; margin-top: 0.05333rem; }

.x8-mb-ball { display: flex; flex-direction: column; align-items: center; gap: 0.02667rem; margin-right: 0.24rem; }
.x8-mb-ball em { font-style: normal; font-size: 0.34667rem; line-height: 0.46rem; color: #656b7b; }

.x8-mb-ball.x8-mb-ball-sp em { position: relative; top: 0.016rem; font-size: 0.37333rem; color: #858b9c; }

.x8-mb-ball .x8-ball { width: 0.53333rem !important; height: 0.53333rem !important; font-size: 0.32rem; font-weight: 400; border: none; background-image: none; box-shadow: none; }
.x8-mb-ball .x8-ball-red { background-color: #f35e5b; }
.x8-mb-ball .x8-ball-blue { background-color: #2f86f6; }
.x8-mb-ball .x8-ball-green { background-color: #0eb581; }

.x8-mb-plus { flex: none; width: 0.42667rem; height: 0.42667rem; margin: 0.05333rem 0.21333rem 0 0.05333rem; font-size: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.9 7H12.1M8 2.9V11.1' stroke='%23868d9d' stroke-width='1'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }



.x8-mb-bar { position: relative; display: flex; align-items: center; justify-content: center;
  height: 0.8rem; margin: 0.26667rem 0; padding: 0 0.26667rem; box-sizing: border-box;
  background: #f3f5f8; font-size: 0.34667rem; line-height: 0.8rem; color: #414654; white-space: nowrap; }

.x8-mb-quick { position: absolute; right: 0.05333rem; top: 0; display: flex; align-items: center; justify-content: center; width: 1.6rem; height: 0.8rem; font-size: 0.34667rem; line-height: 0.8rem; color: #858b9c; flex: none; cursor: pointer; }
.x8-mb-quick-ico { flex: none; width: 0.64rem; height: 0.64rem; margin-top: 0.07733rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.4 9.9H15.6L12 14.1Z' fill='%23868d9d'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }




.x8-mb-qk { position: relative; display: grid; grid-template-columns: repeat(7, 1.352rem); justify-content: center;
  padding-top: 0.16rem; margin: 0 -0.26667rem 0.42667rem; border-bottom: 0.02667rem solid #c5cad5; }

.x8-mb-qk::before { content: ''; position: absolute; top: 0; left: 0; right: 0; border-top: 0.01333rem solid #c5cad5; pointer-events: none; }

.x8-mb-qk-cell { box-sizing: border-box; height: 0.74667rem; line-height: 0.74667rem; padding: 0; text-align: center;
  background: #f3f5f8; border: none; border-top: 0.02667rem solid #c5cad5; border-left: 0.02667rem solid #c5cad5;
  font-family: inherit; font-size: 0.34667rem; color: #414654; cursor: pointer; }
.x8-mb-qk-cell:nth-child(7n) { border-right: 0.02667rem solid #c5cad5; }
.x8-mb-qk-cell.active { background: var(--x8-main); color: var(--x8-main-on); }
.x8-mb-sub { display: inline-block; padding: 0.08rem 0.32rem; margin-right: 0.16rem; border-radius: 0.32rem; border: 1px solid var(--x8-line-2); font-size: 0.34667rem; }
.x8-mb-sub.active { background: var(--x8-main); border-color: var(--x8-main); color: var(--x8-main-on); }
.x8-mb-band { margin: 0.26667rem 0 0.16rem; padding: 0.13333rem 0; text-align: center; font-size: 0.34667rem; color: var(--x8-ink-3); background: var(--x8-surface-2); border-radius: 0.08rem; }




.x8-m-board { background: #fff; padding: 0 0.26667rem; box-sizing: border-box; }

.x8-m-board .x8-mb-bar { margin-left: -0.26667rem; margin-right: -0.26667rem; }
.x8-m-board .x8-play { position: relative; margin: 0; padding: 0; background: none; border: none; box-shadow: none; }
.x8-m-board .x8-play-hd { display: none; }


.x8-m-board .x8-grid { grid-template-columns: repeat(5, 1.84rem) !important; justify-content: space-between; row-gap: 0.16rem; column-gap: 0 !important; }
.x8-m-board .x8-grid-size_parity { grid-template-columns: repeat(5, 1.77573rem) !important; }

.x8-m-board .x8-grid-size_parity.x8-grid-n4,
.x8-m-board .x8-grid-sum { grid-template-columns: repeat(4, 2.17573rem) !important; }

.x8-m-board .x8-grid-zodiac { grid-template-columns: repeat(2, 4.58667rem) !important; }
.x8-m-board .x8-grid-tail { grid-template-columns: repeat(5, 1.77573rem) !important; }
.x8-m-board .x8-grid-zodiac .x8-cell-flat { height: 1.06667rem !important; min-height: 1.06667rem !important; }
.x8-m-board .x8-grid-tail .x8-cell-flat,
.x8-m-board .x8-grid-sum .x8-cell-flat { height: 1.10933rem !important; min-height: 1.10933rem !important; }
.x8-m-board .x8-grid-color { grid-template-columns: repeat(3, 2.94933rem) !important; }
.x8-m-board .x8-grid-size_parity .x8-cell-flat,
.x8-m-board .x8-grid-color .x8-cell-flat { height: 1.10933rem !important; min-height: 1.10933rem !important; }
.x8-m-board .x8-cell { border-radius: 0.48rem; padding: 0.18667rem 0.05333rem; }



.x8-m-board .x8-grid-number { grid-template-rows: repeat(10, auto); grid-auto-flow: column; row-gap: 0.05333rem; }



.x8-m-board .x8-grid:not(.x8-grid-number) { row-gap: 0.26667rem; padding-bottom: 0.26667rem; }
.x8-m-board .x8-grid-number { padding-bottom: 0.18667rem; }

.x8-m-board .x8-play.x8-play-rows { padding-bottom: 0.26667rem; }







.x8-cell-flat { height: 1.12rem !important; min-height: 1.12rem !important; box-sizing: border-box !important;
  border-radius: 0.42667rem !important; padding: 0 0.05333rem !important; gap: 0 !important;
  background: #f3f3f3 !important; border: 0.02rem solid #d6d6d6 !important; box-shadow: none !important; }

.x8-cell-flat .x8-cell-name { width: auto !important; height: auto !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; font-size: 0.42667rem; line-height: 0.42667rem; padding-bottom: 0.10667rem; font-weight: 400; font-family: var(--x8-num); color: #362f18; }

.x8-m-board .x8-grid-size_parity .x8-cell-flat .x8-cell-name,
.x8-m-board .x8-grid-color .x8-cell-flat .x8-cell-name,
.x8-m-board .x8-grid-sum .x8-cell-flat .x8-cell-name,
.x8-m-board .x8-grid-tail .x8-cell-flat .x8-cell-name { font-size: 0.4rem; font-weight: 600; line-height: 0.45333rem; }


.x8-cell-flat .x8-cell-odds { font-size: 0.32rem; line-height: 0.32rem; color: #d90000; font-family: var(--x8-num); }





.x8-m-board .x8-cell-flat.x8-ink-red .x8-cell-name { color: #ef5250; }
.x8-m-board .x8-cell-flat.x8-ink-blue .x8-cell-name { color: #2f86f6; }
.x8-m-board .x8-cell-flat.x8-ink-green .x8-cell-name { color: #0eb581; }
.x8-cell-flat:active { background: var(--x8-surface-2) !important; }



.x8-sm-host { position: fixed; inset: 0; z-index: 90; }
.x8-sm { position: absolute; inset: 0; overflow-y: auto; transform: translateX(100%); transition: transform .24s ease-out;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 375 812' preserveAspectRatio='xMidYMid slice'%3E%3Crect width='375' height='812' fill='%23ffffff'/%3E%3Cg fill='none' stroke='%23f5f8fc' stroke-width='30' stroke-linecap='round'%3E%3Cpath d='M-60 150 C 70 60 150 250 420 100'/%3E%3Cpath d='M-60 455 C 40 350 190 560 420 400'/%3E%3Cpath d='M-60 660 C 70 545 150 760 420 600'/%3E%3C/g%3E%3Cg fill='none' stroke='%23f2f6fc' stroke-width='7' stroke-linecap='round'%3E%3Cpath d='M-60 95 C 55 5 160 195 420 55'/%3E%3Cpath d='M-60 215 C 80 115 150 320 420 165'/%3E%3Cpath d='M-60 360 C 35 265 185 455 420 310'/%3E%3Cpath d='M-60 560 C 65 455 145 675 420 495'/%3E%3Cpath d='M-60 735 C 45 640 190 830 420 690'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat; }
.x8-sm.open { transform: translateX(0); }
.x8-sm-head { height: 1.28rem; display: flex; align-items: center; justify-content: flex-end; padding-right: 0.26667rem; }
.x8-sm-close { border: none; background: none; padding: 0.21333rem; line-height: 1; color: #111626; }
.x8-sm-close i { font-size: 0.53333rem; }

.x8-sm-body { padding: 0 5.5% 0.74667rem 21.8%; }
.x8-sm-row { position: relative; display: flex; align-items: center; gap: 0.29333rem; min-height: 1.06667rem; }
.x8-sm-ico { flex: none; width: 0.48rem; text-align: center; font-size: 0.45333rem; color: #9aa2b4; }
.x8-sm-rowbody { flex: 1; display: flex; align-items: center; gap: 0.26667rem; font-size: 0.4rem; color: #111626; }
.x8-sm-stat { min-height: 0.93333rem; }

.x8-sm-stat2 { box-sizing: border-box; height: 1.6rem; min-height: 0; align-items: flex-start; padding-top: 0.29333rem; }
.x8-sm-stat2 .x8-sm-rowbody { align-items: flex-start; }
.x8-sm-stack { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.x8-sm-stack > div { display: flex; align-items: center; gap: 0.26667rem; height: 0.58667rem; }



.x8-sm-stat-pk { padding-top: 0.08rem; height: auto; min-height: 1.6rem; }
.x8-sm-stat-pk .x8-sm-stack > div:first-child { height: 0.48rem; }
.x8-sm-stat-pk .x8-sm-plates { box-sizing: border-box; height: auto; min-height: 0.96rem; padding: 0.13333rem 0; align-items: center; align-content: flex-start; }
.x8-sm-hint { color: #858b9c; }
.x8-sm-num { font-weight: 400; font-family: var(--x8-num); color: #111626; }
.x8-sm-num.up { color: #2fa05e; }
.x8-sm-num.down { color: #e0402c; }
.x8-sm-themes { display: flex; align-items: center; gap: 0.16rem; height: 0.8rem; padding: 0 0 0 0.77333rem; }
.x8-sm-theme { width: 0.58667rem; height: 0.58667rem; border: none; border-radius: 0.08rem; padding: 0; display: flex; align-items: center; justify-content: center; }
.x8-sm-theme i { display: none; font-size: 0.37333rem; color: #fff; }
.x8-sm-theme.active i { display: block; }
.x8-sm-plates { display: flex; flex-wrap: wrap; gap: 0.21333rem; padding: 0; }
.x8-sm-plate { min-width: 1.6rem; height: 0.69333rem; padding: 0 0.37333rem; border-radius: 0.34667rem; border: 1px solid #cdd4e2; background: #fff; color: #5c667d; font-size: 0.34667rem; }
.x8-sm-plate.active { background: #8596be; border-color: #8596be; color: #fff; }

.x8-sm-bell { min-width: 1.22667rem; height: 0.69333rem; padding: 0 0.32rem; border-radius: 0.34667rem; border: 1px solid #cdd4e2; background: #fff; color: #5c667d; font-size: 0.34667rem; }
.x8-sm-bell.on { background: #8596be; border-color: #8596be; color: #fff; }
.x8-sm-menu { border-top: 1px solid #e2e4ea; }
.x8-sm-item::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px solid #e2e4ea; }
.x8-sm-item:active { background: rgba(0, 0, 0, .03); }


.x8-play.x8-play-rows { margin: 0 0 0.26667rem; }
.x8-rows { display: flex; flex-direction: column; border: 1px solid var(--x8-line); border-radius: 0.16rem; overflow: hidden; background: var(--x8-surface); }

.x8-m-board .x8-rc-amt { display: none; }
.x8-m-board .x8-rows-cols { display: flex; align-items: center; height: 0.8rem; padding: 0;
  background: #f3f5f8; font-size: 0.34667rem; color: #414654; }


.x8-m-board .x8-rows-wave { display: table; width: 100%; box-sizing: border-box; margin: 0; padding: 0.26667rem 0; }
.x8-m-board .x8-rows-wave .x8-rows-cols { display: table-row; height: 0.8rem; }
.x8-m-board .x8-rows-wave .x8-rows-cols > span { display: table-cell; vertical-align: middle; text-align: center; line-height: normal;
  border-top: 0.02667rem solid #c5cad5; border-bottom: 0.02667rem solid #c5cad5; border-right: 0.02667rem solid #c5cad5; }
.x8-m-board .x8-rows-wave .x8-rows-cols > .x8-rc-amt { display: none; }
.x8-m-board .x8-rows-wave .x8-rc-name { width: 1.62667rem; border-left: 0.02667rem solid #c5cad5; }
.x8-m-board .x8-rows-wave .x8-rc-odds { width: 1.49333rem; }
.x8-m-board .x8-rows-wave .x8-rows { display: table-row-group; border: 0; border-radius: 0; overflow: visible; background: none; }
.x8-m-board .x8-rows-wave .x8-row { display: table-row; height: auto; padding: 0; background: #fff; color: #000; }
.x8-m-board .x8-rows-wave .x8-row > span { display: table-cell; vertical-align: middle; text-align: center; width: auto;
  height: 0.85333rem; font-size: 0.32rem; font-weight: 400; line-height: 0.42667rem; font-family: inherit;
  border-bottom: 0.02667rem solid #c5cad5; border-right: 0.02667rem solid #c5cad5; }
.x8-m-board .x8-rows-wave .x8-row-name { border-left: 0.02667rem solid #c5cad5; }
.x8-m-board .x8-rows-wave .x8-row-odds { color: inherit; }
.x8-m-board .x8-rows-wave .x8-row > .x8-row-nums { text-align: left; }
.x8-m-board .x8-rows-wave .x8-row-ball { display: inline-block; vertical-align: baseline; line-height: 0.53333rem; text-align: center;
  margin-right: 0.05333rem; font-weight: 400; font-family: inherit; border-radius: 100%; }
.x8-m-board .x8-rows-wave .x8-row-ball:first-child { margin-left: 0.26667rem; }
.x8-m-board .x8-rows-wave .x8-row-ball:last-child { margin-right: 0; }

.x8-m-board .x8-rows-wave .x8-row.selected { background: var(--x8-m-head); color: #fff; }
.x8-m-board .x8-rows-wave .x8-row.selected .x8-row-name { color: #fff; }
.x8-m-board .x8-rows-wave .x8-row.selected .x8-row-ball { background-color: #fff; }
.x8-m-board .x8-rows-wave .x8-row.selected .x8-nb-red { color: #ef5250; }
.x8-m-board .x8-rows-wave .x8-row.selected .x8-nb-blue { color: #2f86f6; }
.x8-m-board .x8-rows-wave .x8-row.selected .x8-nb-green { color: #0eb581; }

.x8-m-board .x8-row { height: 0.872rem; box-sizing: border-box; align-items: center; gap: 0; padding: 0;
  background: #fff; border-bottom: none; }
.x8-m-board .x8-row-name { flex: none; width: 1.66667rem; font-size: 0.32rem; font-weight: 400; }
.x8-m-board .x8-row-odds { flex: none; width: 1.51333rem; font-size: 0.32rem; color: #111626; }
.x8-m-board .x8-row-nums { flex: 1; min-width: 0; }
.x8-m-board .x8-row-ball { width: 0.53333rem; height: 0.53333rem; font-size: 0.32rem; background-image: none; box-shadow: none; }
.x8-m-board .x8-row-ball.x8-nb-red { background-color: #ef5250; }
.x8-m-board .x8-row-ball.x8-nb-blue { background-color: #2f86f6; }
.x8-m-board .x8-row-ball.x8-nb-green { background-color: #0eb581; }
.x8-m-board .x8-row-name.x8-ink-red { color: #ef5250; }
.x8-m-board .x8-row-name.x8-ink-blue { color: #2f86f6; }
.x8-m-board .x8-row-name.x8-ink-green { color: #0eb581; }
.x8-row { display: flex; align-items: center; gap: 0.21333rem; padding: 0.18667rem 0.26667rem; border-bottom: 1px solid var(--x8-line); }
.x8-row:last-child { border-bottom: none; }
.x8-row.selected { background: var(--x8-main-soft); }
.x8-row.disabled { opacity: .5; }
.x8-row-name { flex: none; width: 1.22667rem; font-size: 0.37333rem; font-weight: 600; color: var(--x8-ink-2); }
.x8-row-odds { flex: none; width: 1.22667rem; text-align: right; font-size: 0.34667rem; color: var(--x8-red-3); font-family: var(--x8-num); }
.x8-row-nums { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 0.08rem; }
.x8-row-ball { width: 0.50667rem; height: 0.50667rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 0.26667rem; font-weight: 700; color: #fff; font-family: var(--x8-num); }
.x8-nb-red { background: radial-gradient(circle at 36% 30%, var(--x8-red-1), var(--x8-red-3)); }
.x8-nb-blue { background: radial-gradient(circle at 36% 30%, var(--x8-blue-1), var(--x8-blue-2)); }
.x8-nb-green { background: radial-gradient(circle at 36% 30%, var(--x8-green-1), var(--x8-green-2)); }
.x8-nb-na { background: var(--x8-ink-4); }
.x8-row-name.x8-ink-red { color: var(--x8-red-3); }
.x8-row-name.x8-ink-blue { color: var(--x8-blue-2); }
.x8-row-name.x8-ink-green { color: var(--x8-green-2); }




.x8-mb-pay { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--x8-surface);
  box-shadow: none; border-top: 1px solid #c5cad5; transform: translateY(100%); transition: transform .2s ease-out;
  padding-bottom: env(safe-area-inset-bottom, 0px); }
.x8-mb-pay.open { transform: translateY(0); }

.x8-mb-pay-handle { position: absolute; left: 0; right: 0; top: -0.50667rem; z-index: 1; width: 1.33333rem; height: 0.58667rem; margin: 0 auto;
  border-radius: 0.32rem; box-shadow: 0 0 0 0.33px #cdd1dc, 0 0.05333rem 0.10667rem rgba(17, 22, 38, .1); cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 22'%3E%3Cpath d='M20.1 7.6L24.6 13.6L29.1 7.6' fill='none' stroke='%23111626' stroke-width='2.1'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }

.x8-mb-pay:not(.open) .x8-mb-pay-handle { visibility: hidden; }

.x8-mb-pay.x8-mb-pay-down { border-top-width: 0; background: transparent; }
.x8-mb-pay.x8-mb-pay-down > div { display: none; }
.x8-mb-pay.x8-mb-pay-down .x8-mb-pay-handle { top: -0.58667rem; transform: rotate(180deg); }


.x8-mb-pay-r1 { display: flex; align-items: center; gap: 0.42667rem; height: 1.33333rem; padding: 0 0.26667rem;
  background: #fff; }
.x8-mb-pay-r1 .x8-mb-pen { margin-left: 0.18667rem; }
.x8-mb-pay-r1 .x8-mb-payamt { margin-left: 0.10667rem; }



.x8-mb-coin { width: 0.90667rem; height: 0.90667rem; flex: none; border-radius: 50%; border: none;
  color: #fff; font-size: 0.32rem; font-weight: 400; padding: 0; font-family: var(--x8-num);
  background-repeat: no-repeat; }



.x8-mb-coin.c0 { --coin: #0da668; }
.x8-mb-coin.c1 { --coin: #ff8902; }
.x8-mb-coin.c2 { --coin: #f82525; }
.x8-mb-coin.c3 { --coin: #1e77ff; }






.x8-mb-coin {
  background-color: #f3f5f8;
  background-image:
    radial-gradient(circle closest-side at 50% 50%, var(--coin) 0 71.6%, transparent 71.6%),
    repeating-conic-gradient(from -8.5deg, var(--coin) 0 17deg, #f3f5f8 17deg 32.73deg); }



.x8-mb-pen { flex: none; width: 0.90667rem; height: 0.90667rem; display: block; }



.x8-mb-payamt { box-sizing: border-box; flex: 0 0 auto; width: 2.50667rem; height: 0.96rem;
  border: 1px solid #c5cad5; border-radius: 0.48rem;
  padding: 0; font-size: 0.4rem; outline: none; background: #fff; color: #111626; text-align: center; }

.x8-mb-pay .x8-mb-payamt::placeholder { color: #c5cad5 !important; opacity: 1; }




.x8-mb-pay-r2 { display: flex; align-items: center; gap: 0; height: 1.33333rem; padding: 0 0.26667rem;
  background: #f6f8fa; font-size: 0.4rem; color: #111626; }


.x8-mb-pay-r2 #mPickN { padding: 0 0.10667rem; font-size: 0.50667rem; line-height: normal; color: #f35e5b; font-weight: 400; font-family: var(--x8-num); }


.x8-mb-pick { flex: none; display: flex; align-items: center; padding-right: 0.26667rem; white-space: nowrap; line-height: normal; }
.x8-mb-avail { flex: none; margin-right: auto; font-size: 0.32rem; line-height: normal; color: #414654; }
.x8-mb-avail b { color: #ef5250; font-weight: 400; font-family: var(--x8-num); }
.x8-mb-trash { flex: none; width: 0.90667rem; height: 0.90667rem; display: block; }

.x8-mb-go { flex: none; box-sizing: content-box; margin-left: 0.53333rem; width: 2.50667rem; height: 0.96rem; padding: 0;
  border: 0.02667rem solid #ebe4c6; border-radius: 0.48rem; box-shadow: 0 0.05333rem 0 #c8c0a1;
  background: linear-gradient(#f8f1d6, #e6ddb8); color: #453909; font-size: 0.4rem; }
.x8-mb-go:disabled { border: none; box-shadow: none; background: #e6e8eb; color: #fff; }

.x8-m-board { padding-bottom: 2.56rem; }


.x8-mb-layer-host { position: fixed; inset: 0; z-index: 10002; display: flex; align-items: center; justify-content: center; }

.x8-mb-layer-host.top { align-items: flex-start; top: 1.46667rem; }



.x8-mb-layer-mask { position: absolute; inset: 0; background: rgba(0, 0, 0, .7); }

.x8-mb-cf { position: relative; box-sizing: border-box; width: calc(100vw - 1.33333rem); height: 10.05333rem; max-width: 92%; max-height: 76vh; display: flex; flex-direction: column;
  background: #fff; border-radius: 0.32rem; overflow: hidden; }

.x8-mb-cf-hd { flex: none; box-sizing: content-box; height: 1.06667rem; line-height: 1.06667rem; padding: 0; text-align: center;
  font-size: 0.45333rem; font-weight: 400; color: #111626; border-bottom: 0.02667rem solid #e2e4ea; }


.x8-mb-cf-tip { display: flex; align-items: center; justify-content: center; gap: 0.21333rem;
  height: 0.85333rem; padding: 0; font-size: 0.4rem; line-height: 0.53333rem; color: #323233; }

.x8-mb-cf-chk { flex: none; box-sizing: border-box; width: 0.37333rem; height: 0.37333rem; border-radius: 50%;
  background: var(--x8-main) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.6 7.2L6 9.5L10.4 4.9' fill='none' stroke='%23fff' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }



.x8-mb-cfrow { display: flex; align-items: center; box-sizing: content-box; padding: 0; min-height: 0.90667rem;
  font-size: 0.34667rem; color: #414654; border-bottom: 0.02667rem solid #e5e5e5; }
.x8-mb-cflist .x8-mb-cfrow { background: #fff; }

.x8-mb-cflist .x8-mb-cfrow.x8-mb-cfdup { background: #f9fafb; }
.x8-mb-cflist .x8-mb-cfrow > span { white-space: pre-wrap; word-break: break-word; }
.x8-mb-cfhead { position: relative; flex: none; height: 1.06667rem; min-height: 0; font-size: 0.32rem; color: #333; background: rgba(134, 118, 55, .1);
  border-top: none; border-bottom: none; }

.x8-mb-cfhead::before, .x8-mb-cfhead::after { content: " "; position: absolute; left: 0; right: 0; border-top: 0.01333rem solid #e5e5e5; transform: scaleY(.5); pointer-events: none; }
.x8-mb-cfhead::before { top: 0; }
.x8-mb-cfhead::after { bottom: 0; }




.x8-mb-cfrow .c1 { flex: 0 0 47.18%; min-width: 0; box-sizing: border-box; padding: 0 0.21333rem; text-align: center; }
.x8-mb-cfrow .c2 { flex: 0 0 21.13%; width: auto; text-align: center; color: #ef5250; font-family: var(--x8-num); }
.x8-mb-cfhead .c2 { color: #333; }
.x8-mb-cfrow .c3 { flex: 0 0 31.69%; width: auto; text-align: center; font-family: var(--x8-num); }

.x8-mb-cfrow .c2.x8-mb-odds-new { color: var(--x8-main, #c2264b); font-weight: 700; }
.x8-mb-cflist { flex: 1; overflow-y: auto; }

.x8-mb-cf-sum { flex: none; display: flex; align-items: center; box-sizing: border-box; height: 1.17333rem; padding: 0 0 0 0.4rem;
  border-top: none; background: rgba(134, 118, 55, .1); font-size: 0.32rem; color: #333; white-space: pre; }
.x8-mb-cf-sum b, .x8-mb-cf-sum em, .x8-mb-cf-sum .num { color: #ef5250; font-weight: 400; font-style: normal; }

.x8-mb-cf-sum, .x8-mb-cf-sum b, .x8-mb-cfrow > span { line-height: normal; }

.x8-mb-cf-sum b:first-of-type { margin-right: 0.32rem; }

.x8-mb-cf-ops { display: flex; border-top: none; }
.x8-mb-cfcancel { flex: 1; width: auto; height: 1.17333rem; border: 1px solid #ebedf0; border-radius: 0.05333rem;
  background: #fff; color: #858b9c; font-size: 0.4rem; line-height: 0.48rem; }
.x8-mb-cfgo { flex: 1; height: 1.17333rem; border: 1px solid #768bba; border-radius: 0.05333rem;
  background: linear-gradient(270deg, #8a91b1, #7a89af 50%, #768bba); color: #fff; font-size: 0.4rem; }
.x8-mb-cfgo:disabled { background: var(--x8-ink-4); border-color: var(--x8-ink-4); }

.x8-mb-cf.x8-mb-cs { height: auto; }
.x8-mb-cs-list { padding: 0.48rem 0.8rem 0; }
.x8-mb-cs-row { display: flex; align-items: center; gap: 0.37333rem; margin-bottom: 0.32rem; }
.x8-mb-cs-amt { flex: 1; min-width: 0; box-sizing: border-box; height: 0.96rem; padding: 0 0.32rem;
  border: 1px solid #c5cad5; border-radius: 0.48rem; outline: none; background: #fff;
  font-size: 0.4rem; line-height: normal; color: #111626; font-family: var(--x8-num); }
.x8-mb-cs-tip { min-height: 0.64rem; padding-bottom: 0.21333rem; text-align: center; font-size: 0.34667rem; line-height: 0.64rem; color: #ef5250; }


.x8-mb-layer-host.top { top: 0; padding-top: 1.44rem; box-sizing: border-box; }
.x8-mb-pickpanel { position: relative; width: 100%; background: var(--x8-surface); border-radius: 0 0 0.42667rem 0.42667rem;
  box-sizing: border-box; padding: 0.26667rem 0 0.26667rem 0.37333rem; max-height: 70vh; overflow-y: auto; }
.x8-mb-pickgrid { display: grid; grid-template-columns: repeat(3, 2.936rem); gap: 0.26667rem 0.21333rem; }
.x8-mb-pickitem { box-sizing: border-box; height: 1.01333rem; border-radius: 0.32rem; border: 0.02133rem solid #d6d6d6; background: #f5f5f6;
  box-shadow: 0 0 0.10667rem 0 rgba(0, 0, 0, .1); color: #666; font-size: 0.37333rem; line-height: normal; padding: 0 0.16rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.x8-mb-pickitem.active { background: linear-gradient(#f8f1d6, #e6ddb8); border-color: #ebe4c6; box-shadow: 0 0.05333rem 0 0 #c8c0a1; color: #453909; }




.x8-mb-ptabs { position: relative; display: flex; align-items: center; gap: 0.10667rem; height: 1.17333rem; margin-top: 0.26667rem; padding: 0 0.32rem;
  box-sizing: border-box; background: #f3f5f8; overflow-x: auto; }

.x8-mb-ptabs::after { content: ' '; box-sizing: border-box; position: absolute; right: 0; bottom: 0; left: 0; pointer-events: none;
  border-bottom: 0.01333rem solid #c5cad5; transform: scaleY(.5); }
.x8-mb-ptab { box-sizing: border-box; flex: 1 1 0; min-width: 0; height: 0.72rem; padding: 0; border-radius: 0.32rem;
  border: 0.02667rem solid #d6d6d6; background: #f5f5f6; color: #666; font-size: 0.34667rem; font-weight: 400; white-space: nowrap; cursor: pointer;
  box-shadow: 0 0 0.10667rem 0 rgba(0, 0, 0, .1); }

.x8-mb-ptab.active { background: linear-gradient(#f8f1d6, #e6ddb8); border-color: #ebe4c6; color: #453909;
  box-shadow: 0 0.05333rem 0 0 #c8c0a1; }

.x8-mb-ptabs { scrollbar-width: none; }
.x8-mb-ptabs::-webkit-scrollbar { display: none; }
.x8-mb-ptabs.x8-mb-ptabs-scroll .x8-mb-ptab { flex: none; padding: 0 0.26667rem; }



.x8-cell-flat.x8-hl, .x8-m-board .x8-row.x8-hl { background: var(--x8-pick, #fbbb55) !important; border-color: var(--x8-pick, #fbbb55) !important; }
.x8-cell-flat.selected { background: var(--x8-main) !important; border-color: var(--x8-main) !important; color: #fff !important; }
.x8-cell-flat.x8-ink-red.selected { background: var(--x8-red-3) !important; border-color: var(--x8-red-3) !important; }
.x8-cell-flat.x8-ink-blue.selected { background: var(--x8-blue-2) !important; border-color: var(--x8-blue-2) !important; }
.x8-cell-flat.x8-ink-green.selected { background: var(--x8-green-2) !important; border-color: var(--x8-green-2) !important; }
.x8-cell-flat.selected .x8-cell-name, .x8-cell-flat.selected .x8-cell-odds { color: #fff !important; }
.x8-mb-caret.dark { border-top-color: var(--x8-ink-3); }

.x8-rows-2 { display: flex; }


.x8-m-board .x8-rows-count .x8-rows-cols { display: none; }


.x8-m-board .x8-rows-count .x8-rows { display: grid; grid-template-columns: repeat(3, 2.94933rem);
  justify-content: space-between; row-gap: 0.26667rem; border: 0; border-radius: 0; background: none; overflow: visible; }
.x8-m-board .x8-rows-count .x8-row { display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 1.10933rem; box-sizing: border-box; padding: 0; background: #f3f3f3; border: 0.02rem solid #d6d6d6;
  border-radius: 0.42667rem; }
.x8-m-board .x8-rows-count .x8-row-name { width: auto; font-size: 0.4rem; line-height: 0.45333rem; padding-bottom: 0.10667rem; font-weight: 600;
  color: #362f18; }
.x8-m-board .x8-rows-count .x8-row-odds { width: auto; font-size: 0.32rem; line-height: 0.32rem; color: #d90000; }



.x8-m-board .x8-play-rows .x8-rows-2 { display: grid; grid-template-columns: repeat(2, 4.58667rem);
  grid-template-rows: repeat(var(--x8-rows-n, 6), 1.06667rem); grid-auto-flow: column;
  justify-content: space-between; row-gap: 0.26667rem; border: 0; border-radius: 0; overflow: visible; background: none; }
.x8-m-board .x8-play-rows .x8-rows-2 .x8-row { display: grid; grid-template-columns: 0.90667rem 1fr;
  grid-template-rows: auto auto; align-content: center; align-items: center; height: 1.06667rem; box-sizing: border-box;
  padding: 0 0 0 0.32rem; gap: 0; background: #f3f3f3; border: 0.02667rem solid #d6d6d6; border-radius: 0.42667rem;
  box-shadow: 0 0 0.16rem 0 rgba(0, 0, 0, .1); }
.x8-m-board .x8-play-rows .x8-rows-2 .x8-row-name { grid-column: 1; grid-row: 1; width: auto; justify-self: center;
  padding-bottom: 0.10667rem; font-size: 0.4rem; line-height: 0.45333rem; font-weight: 600; color: #362f18; }
.x8-m-board .x8-play-rows .x8-rows-2 .x8-row-odds { grid-column: 1; grid-row: 2; width: auto; justify-self: center;
  text-align: center; font-size: 0.32rem; line-height: 0.32rem; color: #d90000; }
.x8-m-board .x8-play-rows .x8-rows-2 .x8-row-nums { grid-column: 2; grid-row: 1 / span 2; align-self: center;
  display: flex; flex-wrap: nowrap; justify-content: center; gap: 0; }
.x8-m-board .x8-play-rows .x8-rows-2 .x8-row-ball { margin-right: 0.05333rem; font-weight: 400; font-family: inherit; line-height: 0.53333rem; }
.x8-m-board .x8-play-rows .x8-rows-2 .x8-row-ball:last-child { margin-right: 0; }
.x8-m-board .x8-play-rows .x8-rows-2 .x8-row.selected { background: var(--x8-m-head); }
.x8-m-board .x8-play-rows .x8-rows-2 .x8-row.selected .x8-row-name,
.x8-m-board .x8-play-rows .x8-rows-2 .x8-row.selected .x8-row-odds { color: #fff; }


.x8-np { padding: 0.24rem 0.29333rem; margin-bottom: 0.21333rem; background: var(--x8-surface); border: 1px solid var(--x8-line); border-radius: 0.16rem; }
.x8-np-r1 { display: flex; justify-content: space-between; font-size: 0.29333rem; color: var(--x8-ink-4); font-family: var(--x8-num); }
.x8-np-r2 { display: flex; align-items: baseline; gap: 0.16rem; margin-top: 0.08rem; font-size: 0.34667rem; color: var(--x8-ink-2); }
.x8-np-r2 .issue { color: var(--x8-green-2); font-family: var(--x8-num); }
.x8-np-r2 .plate { margin-left: auto; color: var(--x8-ink-3); font-family: var(--x8-num); }
.x8-np-r3 { margin-top: 0.10667rem; font-size: 0.34667rem; color: var(--x8-ink); }
.x8-np-r3 i { font-style: normal; color: var(--x8-blue-2); margin: 0 0.05333rem; }
.x8-np-r4 { display: flex; justify-content: space-between; margin-top: 0.13333rem; font-size: 0.34667rem; font-family: var(--x8-num); color: var(--x8-ink-2); }
.x8-np-r4 .np-win { color: var(--x8-red-3); }
.x8-np-sum { padding: 0.24rem 0; text-align: center; font-size: 0.34667rem; color: var(--x8-ink-3); }


.x8-wk { margin-bottom: 0.37333rem; border: 1px solid var(--x8-line); border-radius: 0.16rem; overflow: hidden; background: var(--x8-surface); }
.x8-wk-hd { padding: 0.24rem 0.29333rem; background: var(--x8-surface-2); font-size: 0.37333rem; font-weight: 700; color: var(--x8-ink); }
.x8-wk-row { display: flex; align-items: center; padding: 0.21333rem 0.26667rem; border-top: 1px solid var(--x8-line); font-size: 0.32rem; color: var(--x8-ink-2); }
.x8-wk-head { color: var(--x8-ink-3); background: var(--x8-surface-2); }
.x8-wk-sum { background: var(--x8-surface-2); font-weight: 700; }
.x8-wk-row.nil { color: var(--x8-ink-4); }
.x8-wk-row .d { flex: none; width: 1.97333rem; font-family: var(--x8-num); }
.x8-wk-row .d i { font-style: normal; margin-left: 0.10667rem; color: var(--x8-ink-4); font-family: inherit; }
.x8-wk-row .n { flex: none; width: 0.96rem; text-align: right; font-family: var(--x8-num); }
.x8-wk-row .m { flex: 1; min-width: 0; text-align: right; font-family: var(--x8-num); }
.x8-wk-row .p { flex: 1; min-width: 0; text-align: right; }








.main-header.x8-sk-hd { height: 1.46667rem; padding: 0 0.26667rem; }
.main-header.x8-sk-hd.theme-background { background: var(--x8-m-head, var(--main-color)) !important; box-shadow: none; }
.main-header.x8-sk-hd::after { display: none; }
.x8-sk-hd .x8-sk-title { flex: 1; text-align: center; font-size: 0.45333rem; font-weight: 400; color: #fff; }

.x8-sk-hd .x8-sk-back, .x8-sk-hd .x8-sk-pad { flex: none; width: 0.64rem; height: 0.64rem; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.58667rem; }

.x8-sk-hd .x8-sk-back { font-size: 0; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.38 3.62L8.18 11L15.38 18.48' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }



.x8-sk-page { background: #f6f8fa; min-height: calc(100vh - 1.46667rem); padding-bottom: 1.65333rem; }
.x8-sk-empty { padding: 1.6rem 0; text-align: center; font-size: 0.37333rem; color: #969799; }



.x8-sk-noval { display: flex; flex-direction: column; align-items: center; background: #fff; padding-top: 4.8rem; }

.x8-sk-noval .x8-sk-noval-ico { width: 5.38667rem; height: 4.53333rem; background: url("../img/no-pay.png") 50% 50% / contain no-repeat; }

.x8-sk-noval span { padding-top: 1.44rem; font-size: 0.45333rem; font-weight: 600; line-height: normal; color: #111626; }
.x8-sk-more { padding: 0.42667rem 0; text-align: center; font-size: 0.37333rem; color: #969799; }


.x8-sk-recode { display: flex; align-items: center; height: 1.01333rem; padding-left: 0.26667rem; font-size: 0.34667rem; line-height: normal; color: #414654; }

.x8-sk-recode span + span { padding-left: 20px; }


.x8-sk-payhd { display: flex; height: 0.8rem; background: #f3f5f8; font-size: 0.34667rem; line-height: normal; color: #858b9c; }
.x8-sk-payhd > div { display: flex; align-items: center; justify-content: center; border-top: 1px solid #c5cad5; border-bottom: 1px solid #c5cad5; box-sizing: border-box; }
.x8-sk-tr { display: flex; background: #fff; }

.x8-sk-tr > div { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 1.6rem; padding: 0.10667rem 0; font-size: 0.32rem; line-height: 0.42667rem; color: #414654; }




.x8-sk-tr > div::after { content: ' '; white-space: pre; box-sizing: border-box; position: absolute; right: 0; bottom: 0; left: 0; pointer-events: none;
  border-bottom: 1px solid #c5cad5; transform: scaleY(.5); }
.x8-c-order { flex: none; width: 1.86667rem; padding-left: 0.08rem; }
.x8-c-type { flex: none; width: 2.45333rem; }
.x8-c-play { flex: none; width: 1.86667rem; }
.x8-c-price { flex: none; width: 1.73333rem; }
.x8-c-win { flex: 1; min-width: 2.08rem; padding-right: 0.08rem; }

.x8-sk-tr .x8-c-order > div { width: 100%; white-space: pre-wrap; word-break: break-all; color: #858b9c; }

.x8-sk-tr > div { text-align: center; }
.x8-sk-cz { font-weight: 600; color: #111626; }
.x8-sk-dim { color: #858b9c; }
.x8-sk-num { color: #2f86f6; word-break: break-all; }
.x8-sk-odds { color: #f35e5b; }

.x8-sk-tr .x8-c-win > span { padding-right: 0.08rem; }



.x8-sk-rep-th { position: relative; display: flex; align-items: center; height: 0.8rem; background: #f3f5f8; font-size: 0.34667rem; line-height: normal; color: #858b9c; }
.x8-sk-rep-td { position: relative; display: flex; align-items: center; height: 0.74667rem; background: #fff; font-size: 0.34667rem; line-height: normal; color: #414654; }
.x8-sk-rep-th::after, .x8-sk-rep-td::after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; border-bottom: 0.8px solid #c5cad5; transform: scaleY(.5); pointer-events: none; }
.x8-sk-rep-th > span, .x8-sk-rep-td > span { display: flex; align-items: center; justify-content: center; }
.x8-sk-rep-th > span:first-child, .x8-sk-rep-td > span:first-child { flex: none; width: 2.93333rem; }
.x8-sk-rep-th > span:nth-child(2), .x8-sk-rep-td > span:nth-child(2) { flex: 2 1 0; min-width: 0; }
.x8-sk-rep-th > span:nth-child(n+3), .x8-sk-rep-td > span:nth-child(n+3) { flex: 3 1 0; min-width: 0; }
.x8-sk-rep-td .x8-sk-wd { padding-right: 0.21333rem; }

.x8-sk-rep-cz .x8-sk-rep-th > span:first-child, .x8-sk-rep-cz .x8-sk-rep-td > span:first-child { width: 2.66667rem; }
.x8-sk-rep-cz .x8-sk-rep-td { height: 0.90667rem; border-bottom: 0.8px solid #e2e4ea; }
.x8-sk-rep-cz .x8-sk-rep-td::after { display: none; }
.x8-sk-headdate { position: relative; height: 1.04rem; padding-left: 0.4rem; font-size: 0.34667rem; line-height: 1.04rem; color: #858b9c; }
.x8-sk-headdate::after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; border-bottom: 0.8px solid #c5cad5; transform: scaleY(.5); pointer-events: none; }
.x8-sk-blue { color: #2f86f6; }
.x8-sk-red { color: #f35e5b; }


.x8-sk-credit-top { background: #fff; padding: 0.53333rem; margin-bottom: 0.26667rem; }
.x8-sk-credit-top h3 { margin: 0; padding: 0 0 0.53333rem; font-size: 0.53333rem; line-height: normal; font-weight: 400; color: #111626; }
.x8-sk-credit-nums { display: flex; align-items: center; }
.x8-sk-credit-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.x8-sk-credit-cell b { font-size: 0.45333rem; line-height: normal; font-weight: 400; color: #414654; padding-bottom: 0.21333rem; }
.x8-sk-credit-cell i { font-style: normal; font-size: 0.34667rem; line-height: normal; color: #858b9c; }

.x8-sk-credit-line { width: 0.01333rem; height: 0.8rem; margin: 0 0.58667rem; background: #e2e4ea; }


.x8-sk-folds { position: relative; }
.x8-sk-folds::after { content: ''; position: absolute; top: -50%; right: -50%; bottom: -50%; left: -50%; border-top: 0.8px solid #ebedf0; border-bottom: 0.8px solid #ebedf0; transform: scale(.5); pointer-events: none; }
.x8-sk-fold { position: relative; }
.x8-sk-fold + .x8-sk-fold::after { content: ''; position: absolute; top: 0; right: 0.42667rem; left: 0.42667rem; border-top: 0.8px solid #ebedf0; transform: scaleY(.5); pointer-events: none; }
.x8-sk-fold-hd { position: relative; display: flex; height: 1.17333rem; box-sizing: border-box; padding: 0.26667rem 0.42667rem; background: #fff; font-size: 0.37333rem; line-height: 0.64rem; color: #323233; cursor: pointer; }
.x8-sk-fold.open .x8-sk-fold-hd::after { content: ''; position: absolute; right: 0.42667rem; bottom: 0; left: 0.42667rem; border-bottom: 0.8px solid #ebedf0; transform: scaleY(.5); pointer-events: none; }
.x8-sk-fold-t { flex: 1; min-width: 0; }
.x8-sk-fold-arr { flex: none; width: 0.42667rem; height: 0.64rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.43 2.68L10.75 8L5.43 13.32' fill='none' stroke='%23969799' stroke-width='1.36' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.42667rem no-repeat; transform: rotate(90deg); transition: transform .3s; }
.x8-sk-fold.open .x8-sk-fold-arr { transform: rotate(-90deg); }
.x8-sk-fold-bd { display: none; background: #fff; }
.x8-sk-fold.open .x8-sk-fold-bd { display: block; }

.x8-sk-lim-hd, .x8-sk-lim-td { display: flex; align-items: center; height: 1.17333rem; box-sizing: content-box; padding: 0 0.13333rem; font-size: 0.32rem; line-height: 0.48rem; color: #414654; }
.x8-sk-lim-hd { background: #f3f5f8; }
.x8-sk-lim-td { border-bottom: 0.8px solid #f3f5f8; }
.x8-sk-lim-hd > span, .x8-sk-lim-td > span { display: flex; align-items: center; justify-content: center; flex: 1; min-width: 0; text-align: center; }
.x8-sk-lim-hd > span:first-child, .x8-sk-lim-td > span:first-child { flex: none; width: 2.13333rem; }


.x8-sk-pwrow { display: flex; align-items: center; height: 1.22667rem; padding-left: 0.4rem; background: #fff; }
.x8-sk-pwrow + .x8-sk-pwrow { border-top: 0.8px solid #e2e4ea; }
.x8-sk-pwrow label { flex: none; display: flex; align-items: center; width: 2.4rem; height: 0.53333rem; font-size: 0.4rem; line-height: normal; color: #000; }
.x8-sk-pwrow input { flex: 1; min-width: 0; height: 1.17333rem; border: none; outline: none; background: transparent; font-size: 0.4rem; color: #111626; padding: 0; }

.x8-sk-pwrow input::placeholder { color: #858b9c !important; opacity: 1; }
.x8-sk-pwbtn-box { padding: 1.33333rem 1.01333rem 0; }


.x8-sk-pwbtn { width: 100%; height: 1.17333rem; padding: 0; border: 0.8px solid #ebedf0; border-radius: 0.58667rem; font-size: 0.4rem; line-height: 1.2; color: #fff;
  background: var(--x8-dlg-grad, linear-gradient(#35a2ff, #0e76e1)); }


.x8-sk-rules-page { background: #fff; }
.x8-sk-rules { padding: 0.53333rem 0.4rem; font-size: 0.37333rem; line-height: normal; color: #000; }
.x8-sk-rules p { margin: 0; }

.x8-sk-rules .x8-sk-rt { font-family: 宋体; font-size: 13px; letter-spacing: 1px; }
.x8-sk-rules [style*="#e00"] { color: #f00 !important; }
.x8-sk-rules img { max-width: 100%; }

.x8-sk-rules table { border-collapse: separate; border-spacing: 2px; }
.x8-sk-rules table[cellspacing="1"] { border-spacing: 1px; }
.x8-sk-rules table td, .x8-sk-rules table th { border: 0; padding: 2px 0; }
.x8-sk-rules ul { margin: 0; padding: 0; list-style: circle; }
.x8-sk-rules li { margin: 0; padding: 0; }



.x8-sk-hd .x8-sk-title.x8-sk-pick { display: flex; align-items: center; justify-content: center; }
.x8-sk-pick > span { position: relative; }
.x8-sk-triangle { position: absolute; left: 100%; top: 50%; margin: -0.05867rem 0 0 0.128rem; width: 0; height: 0; border-top: 0.2rem solid #fff; border-left: 0.16rem solid transparent; border-right: 0.16rem solid transparent; }


.x8-sk-lot-mask { position: fixed; inset: 0; z-index: 10000; background: rgba(0, 0, 0, .7); display: flex; align-items: center; justify-content: center; }
.x8-sk-lot { width: 92%; height: 11.2rem; box-sizing: border-box; background: #fff; border-radius: 0.32rem; overflow: hidden; }
.x8-sk-lot-hd { position: relative; display: flex; align-items: center; justify-content: center; height: 1.33333rem; border-bottom: 0.01333rem solid #e2e4ea; }
.x8-sk-lot-hd h3 { margin: 0; font-size: 0.45333rem; font-weight: 600; line-height: normal; color: #111626; }
.x8-sk-lot-close { position: absolute; top: 0.34667rem; right: 0.34667rem; width: 0.64rem; height: 0.64rem; padding: 0; border: none; font-size: 0; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.8 5.8L17.2 16.2M17.2 5.8L6.8 16.2' stroke='%23c5cad5' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.x8-sk-lot-body { display: flex; flex-wrap: wrap; align-content: flex-start; max-height: 9.86667rem; box-sizing: border-box; padding: 0.4rem 0.26667rem 0.13333rem; overflow-x: hidden; }
.x8-sk-lot-item { flex: 0 0 30%; height: 0.96rem; box-sizing: border-box; margin: 0 0.13333rem 0.26667rem; padding: 0; border: 0.02667rem solid #d6d6d6; border-radius: 0.32rem;
  background: #f5f5f6; box-shadow: 0 0 0.10667rem rgba(0, 0, 0, .1); font-size: 0.34667rem; line-height: normal; color: #666; }

.x8-sk-lot-item.active { border-color: #ebe4c6; background: linear-gradient(#f8f1d6, #e6ddb8); box-shadow: 0 0.05333rem 0 0 #c8c0a1; color: #453909; }



.x8-panel.x8-panel-notice { position: fixed; inset: auto; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 8rem !important; max-height: 80vh; border-radius: 0 0 0.42667rem 0.42667rem; overflow: hidden; }
.x8-panel-notice .x8-panel-hd { height: 3.89333rem; padding: 0; border: none; align-items: flex-start;
  background: linear-gradient(160deg, color-mix(in srgb, var(--main-color) 82%, #fff) 0%, var(--main-color) 55%, color-mix(in srgb, var(--main-color) 70%, #000) 100%); }
.x8-panel-notice .x8-panel-title { flex: 1; padding-top: 1.44rem; text-align: center; font-size: 0.50667rem; font-weight: 600; color: #fff; letter-spacing: 0.05333rem; }
.x8-panel-notice .x8-panel-close { flex: none; width: 1.17333rem; height: 1.17333rem; display: flex; align-items: center; justify-content: center;
  font-size: 0.58667rem; color: #fff; border: 1px solid rgba(255, 255, 255, .85); border-radius: 50%; margin: 0.21333rem 0.21333rem 0 0; }
.x8-panel-notice .x8-panel-body { padding: 0.53333rem 0.4rem; }



.x8-panel.x8-notice-pop { position: relative; inset: auto; width: 92vw !important; max-width: 9.6rem; max-height: 80vh;
  border-radius: 0.21333rem; overflow: hidden; }
.x8-notice-pop .x8-panel-body { overflow-y: auto; }
.x8-notice-pop .x8-slip-ops { margin-top: 0.32rem; }
.x8-notice-pop .x8-slip-ops .x8-btn { width: 100%; }

.x8-mb-nt-mi .x8-dot { display: inline-block; margin-right: 0.10667rem; vertical-align: middle; }










.x8-mb-nt { position: relative; width: 8rem; display: flex; flex-direction: column; }
.x8-mb-nt-head { position: relative; height: 3.89333rem; flex: none; }


.x8-mb-nt-close { position: absolute; left: 6.82667rem; top: 0; width: 1.17333rem; height: 1.17333rem; padding: 0; border: none; appearance: none; -webkit-appearance: none; cursor: pointer; font-size: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Ccircle cx='22.03' cy='21.07' r='21.2' fill='none' stroke='%23fff' stroke-width='1.55'/%3E%3Cpath d='M13.58 12.58L30.08 29.08M30.38 12.58L13.88 29.08' stroke='%23fff' stroke-width='2.1'/%3E%3C/svg%3E") center / 100% no-repeat; }
.x8-mb-nt-body { height: 9.86667rem; box-sizing: border-box; display: flex; padding-top: 0.53333rem;
  background: #fff; border-radius: 0 0 0.42667rem 0.42667rem; }


.x8-mb-nt-menu { flex: none; width: 2.4rem; box-sizing: content-box; margin-left: -0.26667rem; padding-bottom: 0.26667rem; border-right: 0.8px solid rgba(0, 0, 0, .1); overflow-y: auto; }

.x8-mb-nt-menu::-webkit-scrollbar, .x8-mb-nt-text::-webkit-scrollbar { width: 0; }
.x8-mb-nt-mi { position: relative; box-sizing: border-box; padding: 0.32rem 0 0.32rem 0.26667rem;
  font-size: 0.34667rem; line-height: normal; text-align: center; color: #858b9c; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x8-mb-nt-mi.on { color: #fff; background: var(--x8-dlg-grad, linear-gradient(#35a2ff, #0e76e1)); }

.x8-mb-nt-mi.on::after { content: ''; position: absolute; left: 0; bottom: -0.26667rem; width: 0.26667rem; height: 0.26667rem;
  box-sizing: border-box; border-width: 0.13333rem; border-style: solid;
  border-color: var(--x8-m-head, var(--main-color)) var(--x8-m-head, var(--main-color)) transparent transparent; }
.x8-mb-nt-mi .dot { position: absolute; top: 0.24rem; right: 0.16rem; width: 0.16rem; height: 0.16rem; border-radius: 50%; background: #f82525; z-index: 2; }
.x8-mb-nt-content { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 0 0.4rem; }

.x8-mb-nt-time { font-size: 0.34667rem; line-height: 0.48rem; color: #858b9c; }
.x8-mb-nt-title { margin: 0.10667rem 0 0.16rem; font-size: 0.42667rem; line-height: normal; font-weight: 600; color: #111626; }
.x8-mb-nt-text { flex: 1; min-height: 0; overflow-y: auto; font-size: 0.34667rem; line-height: 0.48rem; color: #414654; white-space: pre-wrap; word-break: break-all; }

.x8-mb-nt-bot { flex: none; height: 0.96rem; display: flex; align-items: center; justify-content: center; padding-right: 2.13333rem; font-size: 0.34667rem; line-height: normal; color: #111626; }
.x8-mb-nt-empty { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 0.34667rem; color: #98a0b0; }



.x8-op-bar { display: flex; align-items: center; justify-content: flex-end; height: 1.17333rem; padding: 0 0.42667rem; background: #fff; }
.x8-op-range { display: flex; align-items: center; font-size: 0.32rem; line-height: 0.48rem; color: #414654; cursor: pointer; }

.x8-op-tri2 { flex: none; width: 0.16rem; height: 0.10667rem; margin-left: 0.16rem; transition: transform .3s ease-in-out;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpolygon points='0,1 12,1 6,7' fill='%23858b9c'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.x8-op-range.open .x8-op-tri2 { transform: rotate(-180deg); }




.x8-op-yhost { position: fixed; inset: 0; z-index: 2001; }
.x8-op-ymask { position: absolute; inset: 0; background: rgba(0, 0, 0, .7); animation: x8-sk-fade-in .3s ease-out both; }
.x8-op-ysheet { position: absolute; right: 0; bottom: 0; left: 0; overflow: hidden; background: #fff; border-radius: 0.42667rem 0.42667rem 0 0; animation: x8-op-slide-up .3s ease-out both; }
.x8-op-yhost.x8-sk-leaving .x8-op-ymask { animation: x8-sk-fade-out .3s ease-in both; }
.x8-op-yhost.x8-sk-leaving .x8-op-ysheet { animation: x8-op-slide-down .3s ease-in both; }
@keyframes x8-op-slide-up { from { transform: translate3d(0, 100%, 0); } to { transform: none; } }
@keyframes x8-op-slide-down { from { transform: none; } to { transform: translate3d(0, 100%, 0); } }
.x8-op-ytool { display: flex; align-items: center; justify-content: space-between; height: 1.28rem; background: #f6f8fa; }
.x8-op-ytool button { height: 100%; padding: 0 0.42667rem; border: none; background: transparent; font-size: 0.37333rem; cursor: pointer; }
.x8-op-ytool button:active { opacity: .7; }
.x8-op-ycancel { color: #858b9c; }
.x8-op-yok { color: var(--x8-m-head, var(--main-color)); }
.x8-op-ycols { position: relative; height: 264px; }
.x8-op-ycol { box-sizing: border-box; height: 100%; padding: 110px 0; overflow-y: auto; scrollbar-width: none; scroll-snap-type: y mandatory; scroll-padding: 110px 0; }
.x8-op-ycol::-webkit-scrollbar { width: 0; }
.x8-op-yitem { display: flex; align-items: center; justify-content: center; height: 44px; font-size: 0.37333rem; color: #111626; scroll-snap-align: start; cursor: pointer; }
.x8-op-ygrad { position: absolute; inset: 0; z-index: 1; pointer-events: none; background-repeat: no-repeat; background-position: top, bottom; background-size: 100% 110px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4)), linear-gradient(0deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4)); }
.x8-op-yframe { position: absolute; top: 50%; right: 0.42667rem; left: 0.42667rem; z-index: 2; height: 44px; transform: translateY(-50%); pointer-events: none; }
.x8-op-yframe::before, .x8-op-yframe::after { content: ''; position: absolute; right: 0; left: 0; border-top: 1px solid #ebedf0; transform: scaleY(.5); }
.x8-op-yframe::before { top: 0; }
.x8-op-yframe::after { bottom: 0; }


.x8-op-tab { position: relative; display: flex; align-items: center; height: 1.17333rem; background: #fff; }
.x8-op-tab::before, .x8-op-tab::after { content: ''; position: absolute; right: 0; left: 0; pointer-events: none; transform: scaleY(.5); }
.x8-op-tab::before { top: 0; border-top: 1px solid #c5cad5; }
.x8-op-tab::after { bottom: 0; border-bottom: 1px solid #c5cad5; }
.x8-op-tab > span { display: inline-block; flex: none; height: 0.72rem; line-height: 0.72rem; font-size: 0.32rem; text-align: center; }
.x8-op-tab .x8-op-c1, .x8-op-tab .x8-op-c2 { width: 1.70667rem; color: #414654; }


.x8-op-choo { width: 1.38667rem; margin-left: 0.16rem; border: 0.02667rem solid #d6d6d6; border-radius: 0.69333rem;
  background: #f5f5f6; box-shadow: 0 0 0.10667rem rgba(0, 0, 0, .1); color: #666; cursor: pointer; }
.x8-op-choo.active { border-color: #ebe4c6; background: linear-gradient(#f8f1d6, #e6ddb8);
  box-shadow: 0 0.05333rem 0 0 #c8c0a1; color: #453909; }



.x8-op-tab .x8-op-choo:nth-child(3) { margin-left: 0.53333rem; margin-right: 0.53333rem; }
.x8-op-tab .x8-op-choo:nth-child(4) { margin-right: 0.53333rem; }


.x8-op-list { background: #fff; }
.x8-op-tr { position: relative; display: flex; align-items: center; height: 1.30667rem; }
.x8-op-tr::after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; pointer-events: none;
  border-bottom: 1px solid #c5cad5; transform: scaleY(.5); }
.x8-op-tr > .x8-op-c1, .x8-op-tr > .x8-op-c2 { flex: none; width: 1.70667rem; text-align: center; font-size: 0.32rem; line-height: 0.32rem; color: #414654; }


.x8-op-numcell { flex: 1; min-width: 0; padding-left: 0.34667rem; }
.x8-op-balls { display: flex; align-items: center; flex-wrap: nowrap; }
.x8-op-ball { flex: none; width: 0.64rem; height: 0.64rem; line-height: 0.64rem; margin-right: 0.16rem; margin-bottom: 0.05333rem;
  border-radius: 50%; font-size: 0.37333rem; color: #fff; text-align: center; }

.x8-op-ball.x8-ball { background-image: none; box-shadow: none; font-weight: 400; }
.x8-op-ball.x8-ball-red { background-color: #ef5250; }
.x8-op-ball.x8-ball-blue { background-color: #2f86f6; }
.x8-op-ball.x8-ball-green { background-color: #0eb581; }

.x8-op-add { flex: none; width: 0.42667rem; height: 0.42667rem; margin: 0 0.10667rem 0 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.9 7H12.1M8 2.9V11.1' stroke='%23868d9d' stroke-width='1'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }

.x8-op-zodiacs { display: flex; align-items: center; min-height: 0.50667rem; }
.x8-op-zodiacs i { flex: none; width: 0.64rem; margin-right: 0.16rem; font-style: normal; font-size: 0.34667rem; line-height: 0.34667rem; color: var(--main-color); text-align: center; }

.x8-op-zodiacs i.x8-op-sp-zodiac { margin-left: 0.53333rem; font-size: 0.37333rem; line-height: 0.37333rem; }


.x8-op-vals { display: flex; align-items: center; flex: 1; min-width: 0; }
.x8-op-val { flex: none; font-size: 0.32rem; color: #323233; text-align: center; }
.x8-op-val:first-child { margin-left: 0.08rem; }
.x8-op-vals-3 .x8-op-val { width: 2.13333rem; }
.x8-op-vals-5 .x8-op-val { width: 1.28rem; }
.x8-op-red { color: #ef5250; }



.x8-cell-odds-tiers { display: flex; flex-direction: column; align-items: center; line-height: 0.32rem; }
.x8-cell-odds-tiers i { font-style: normal; }
.x8-cell-flat.x8-cell-tiered { height: auto !important; min-height: 1.12rem !important; padding: 0.13333rem 0.05333rem !important; }




.x8-m-board .x8-combo-board, .x8-m-board .x8-combo-body { padding: 0; }
.x8-m-board .x8-combo-slot { display: block; }


.x8-m-board .x8-combo-items, .x8-m-board .x8-combo-modes {
  display: flex; align-items: center; gap: 0.13333rem; height: 1.17333rem; padding: 0 0.28rem; margin: 0;
  background: #f3f5f8; border: none; overflow-x: auto; }
.x8-m-board .x8-combo-item, .x8-m-board .x8-combo-mode {
  box-sizing: border-box; flex: 1 0 auto; min-width: 1.49333rem; height: 0.72rem; padding: 0 0.21333rem;
  border: 0.02667rem solid #d6d6d6; border-radius: 0.32rem; background: #f5f5f6; box-shadow: 0 0 0.10667rem 0 rgba(0, 0, 0, .1);
  color: #666; font-size: 0.34667rem; font-weight: 400; white-space: nowrap; }
.x8-m-board .x8-combo-item.active, .x8-m-board .x8-combo-mode.active {
  background: linear-gradient(#f8f1d6, #e6ddb8); border-color: #ebe4c6; box-shadow: 0 0.05333rem 0 0 #c8c0a1;
  color: #453909; font-weight: 400; }

.x8-m-board .x8-combo-modes { gap: 0; padding: 0 0.18667rem 0 0.26667rem; margin: 0 -0.26667rem; }
.x8-m-board .x8-combo-mode { flex: 0 1 20%; width: auto; min-width: 0; padding: 0; margin: 0 0.08rem; }

.x8-m-board .x8-combo-items { position: relative; gap: 0; padding: 0 0.26667rem; margin: 0.26667rem -0.26667rem 0; }
.x8-m-board .x8-combo-item { flex: 1 1 0; min-width: 0; padding: 0; margin: 0 0.05333rem; }
.x8-m-board .x8-combo-items::after { content: ' '; box-sizing: border-box; position: absolute; right: 0; bottom: 0; left: 0;
  pointer-events: none; border-bottom: 0.01333rem solid #c5cad5; transform: scaleY(.5); }


.x8-m-board .x8-combo-headrow { display: none; }


.x8-m-board .x8-combo-pad { display: grid; grid-template-columns: repeat(5, 1.84rem); justify-content: space-between;
  row-gap: 0.05333rem; column-gap: 0; padding: 0.26667rem 0 0; border: none; grid-auto-flow: row; grid-template-rows: none; }

.x8-m-board .x8-combo-pad-number { grid-auto-flow: column; grid-template-rows: repeat(10, auto); }

.x8-m-board .x8-combo-body .x8-combo-foot { display: none; }
.x8-m-board .x8-combo-pad-number { padding-bottom: 0.18667rem; }
.x8-m-board .x8-combo-pad.x8-combo-pad-rows, .x8-m-board .x8-combo-pad.x8-combo-pad-tail { padding-bottom: 0.26667rem; }

.x8-m-board .x8-combo-pad-zodiac { grid-template-columns: repeat(2, 4.58667rem) !important; padding-left: 0; padding-right: 0; }


.x8-m-board .x8-combo-pad .x8-combo-cell {
  box-sizing: border-box; height: 1.12rem; flex-direction: column; align-items: center; justify-content: center;
  gap: 0; padding: 0; border: 0.02rem solid #d6d6d6; border-radius: 0.42667rem; background: #f3f3f3; }
.x8-m-board .x8-combo-pad .x8-combo-ballbox { padding-bottom: 0.10667rem; line-height: 0.42667rem; }
.x8-m-board .x8-combo-pad .x8-combo-ball { display: block; line-height: 0.42667rem; }
.x8-m-board .x8-combo-pad .x8-combo-cellodds { line-height: 0.32rem; font-weight: 400; color: #d90000; }

.x8-m-board .x8-combo-cell.picked, .x8-m-board .x8-combo-cell.picked-dan, .x8-m-board .x8-combo-cell.picked-tuo {
  position: relative; background: linear-gradient(#f8f1d6, #e6ddb8); border-color: #ebe4c6; box-shadow: 0 0.05333rem 0 0 #c8c0a1; }
.x8-m-board .x8-combo-ballbox { flex: none; width: auto; height: auto; background: none; }
.x8-m-board .x8-combo-ball { flex: none; width: auto; height: auto; border-radius: 0; background: none;
  box-shadow: none; font-size: 0.42667rem; font-weight: 400; line-height: 1.1; }
.x8-m-board .x8-combo-cellodds { flex: none; align-self: auto; border: none; font-size: 0.32rem; line-height: 1.1; }
.x8-m-board .x8-combo-cell.picked .x8-combo-ball,
.x8-m-board .x8-combo-cell.picked-dan .x8-combo-ball,
.x8-m-board .x8-combo-cell.picked-tuo .x8-combo-ball,
.x8-m-board .x8-combo-cell.picked .x8-combo-num { color: #362f18 !important; }
.x8-m-board .x8-combo-cell.picked .x8-combo-cellodds,
.x8-m-board .x8-combo-cell.picked-dan .x8-combo-cellodds,
.x8-m-board .x8-combo-cell.picked-tuo .x8-combo-cellodds { color: #d90000 !important; }

.x8-m-board .x8-combo-pad-rows .x8-combo-cell.picked .x8-combo-cellodds,
.x8-m-board .x8-combo-pad-rows .x8-combo-cell.picked-dan .x8-combo-cellodds,
.x8-m-board .x8-combo-pad-rows .x8-combo-cell.picked-tuo .x8-combo-cellodds,
.x8-m-board .x8-combo-pad-tail .x8-combo-cell.picked .x8-combo-cellodds,
.x8-m-board .x8-combo-pad-tail .x8-combo-cell.picked-dan .x8-combo-cellodds,
.x8-m-board .x8-combo-pad-tail .x8-combo-cell.picked-tuo .x8-combo-cellodds { color: #362f18 !important; }



.x8-m-board .x8-combo-pad-rows { grid-template-columns: repeat(2, 4.58667rem); justify-content: space-between;
  grid-auto-flow: column; row-gap: 0.26667rem; column-gap: 0; padding: 0.26667rem 0 0; }

.x8-m-board .x8-combo-pad-rows .x8-combo-cell {
  display: grid; grid-template-columns: 0.90667rem 1fr; grid-template-rows: auto auto; align-content: center; align-items: center;
  height: 1.06667rem; padding: 0 0 0 0.32rem; gap: 0; }

.x8-m-board .x8-combo-num { grid-area: 1 / 1 / 2 / 2; min-width: 0; font-size: 0.4rem; font-weight: 600; line-height: 0.45333rem;
  padding-bottom: 0.10667rem; color: #362f18; text-align: center; }
.x8-m-board .x8-combo-pad-rows .x8-combo-cellodds { grid-area: 2 / 1 / 3 / 2; font-size: 0.32rem; line-height: 0.32rem; text-align: center; }
.x8-m-board .x8-combo-nums { grid-area: 1 / 2 / 3 / 3; display: flex; align-items: center; justify-content: center; gap: 0.05333rem; padding-left: 0; }
.x8-m-board .x8-combo-mball { flex: none; width: 0.53333rem; height: 0.53333rem; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: 0.32rem; font-weight: 400; line-height: 0.53333rem; color: #fff; }

.x8-m-board .x8-combo-mball.x8-nb-red { background: #ef5250; }
.x8-m-board .x8-combo-mball.x8-nb-blue { background: #2f86f6; }
.x8-m-board .x8-combo-mball.x8-nb-green { background: #0eb581; }

.x8-m-board .x8-combo-pad-tail { grid-template-columns: repeat(5, 1.77573rem); row-gap: 0.26667rem; }
.x8-m-board .x8-combo-pad-tail .x8-combo-cell { height: 1.10933rem; }


.x8-m-board .x8-combo-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.21333rem;
  padding: 0.21333rem 0.28rem 0.26667rem; font-size: 0.32rem; color: var(--x8-ink-3); }
.x8-m-board .x8-combo-sum { color: var(--x8-main-ink); }
.x8-m-board .x8-combo-na { padding: 0.8rem 0; text-align: center; color: var(--x8-ink-3); font-size: 0.37333rem; }


.x8-m-board .x8-combo-ball, .x8-m-board .x8-combo-mball, .x8-m-board .x8-combo-tierodds,
.x8-m-board .x8-combo-dan { font-style: normal; }

.x8-m-board .x8-combo-ball.x8-nb-red { color: #ef5250; }
.x8-m-board .x8-combo-ball.x8-nb-blue { color: #2f86f6; }
.x8-m-board .x8-combo-ball.x8-nb-green { color: #0eb581; }
.x8-m-board .x8-combo-cellodds { color: #ef5250; }

.x8-m-board .x8-combo-dan { display: none; }


.x8-m-board .x8-combo-cell.picked-dan .x8-combo-dan {
  display: flex; align-items: flex-start; justify-content: flex-end; box-sizing: border-box;
  position: absolute; left: 0; top: 0; width: 0.53333rem; height: 0.53333rem; margin: 0; padding: 0.01333rem 0.05333rem 0 0;
  background: #c06020; color: #fff; font-size: 0.24rem; line-height: 1; font-weight: 400;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 70% 76%, 45% 66%, 30% 55%, 18% 44%, 9% 31%, 4% 16%);
  pointer-events: none; }

.x8-m-board .x8-combo-tierodds + .x8-combo-tierodds::before { content: '/'; }


.x8-mb-wait { color: var(--x8-dim, #98a2ae); font-size: 0.32rem; padding: 0.16rem 0; }


.x8-sk-user { background: #f6f8fa; min-height: calc(100vh - 1.46667rem); }

.x8-sk-user-top { height: 2.66667rem; box-sizing: border-box; padding-left: 0.53333rem; background: #fff; }
.x8-sk-user-top h3 { margin: 0; padding: 0.4rem 0 0.16rem; font-size: 0.53333rem; font-weight: 600; line-height: normal; color: #111626; }
.x8-sk-user-nums { display: flex; align-items: center; }
.x8-sk-user-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.x8-sk-user-cell b { padding-bottom: 0.10667rem; font-size: 0.45333rem; font-weight: 400; line-height: normal; color: #414654; }
.x8-sk-user-cell i { font-style: normal; font-size: 0.34667rem; line-height: normal; color: #858b9c; }
.x8-sk-user-line { width: 0.02667rem; height: 0.8rem; margin: 0 0.53333rem; background: #e2e4ea; }

.x8-sk-user-link { margin-top: 0.26667rem; }
.x8-sk-urow { position: relative; display: flex; align-items: center; height: 1.22667rem; box-sizing: border-box; padding: 0 0.42667rem; background: #fff; cursor: pointer; }
.x8-sk-urow::after { content: ''; position: absolute; right: 0.42667rem; bottom: 0; left: 0.42667rem; border-bottom: 0.8px solid #ebedf0; transform: scaleY(.5); pointer-events: none; }
.x8-sk-urow:last-child::after { display: none; }
.x8-sk-uic { flex: none; display: flex; align-items: center; height: 0.53333rem; margin-right: 0.26667rem; }
.x8-sk-uic svg { display: block; width: 0.48rem; height: 0.48rem; }
.x8-sk-uic.big svg { width: 0.53333rem; height: 0.53333rem; }
.x8-sk-uic.short svg { height: 0.42667rem; }
.x8-sk-utx { flex: 1; font-size: 0.4rem; line-height: 0.53333rem; color: #111626; }
.x8-sk-uarr { flex: none; width: 0.42667rem; height: 0.42667rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.43 2.68L10.75 8L5.43 13.32' fill='none' stroke='%23969799' stroke-width='1.36' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.x8-sk-user-out { padding: 0.4rem 1.01333rem 0.53333rem; }
.x8-sk-user-out button { display: block; width: 100%; height: 1.17333rem; padding: 0; border: 0.8px solid #e2e4ea; border-radius: 0.58667rem;
  background: #fff; font-size: 0.4rem; line-height: 1.2; letter-spacing: 0; color: #858b9c; }



.x8-sk-urow:active, .x8-sk-fold-hd:active { background: #f2f3f5; }
.x8-sk-user-out button, .x8-sk-pwbtn { position: relative; transition: opacity .2s; }
.x8-sk-user-out button::before, .x8-sk-pwbtn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%;
  background: #000; border: inherit; border-color: #000; border-radius: inherit; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; }
.x8-sk-user-out button:active::before, .x8-sk-pwbtn:active::before { opacity: .1; }
@keyframes x8-sk-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes x8-sk-fade-out { from { opacity: 1; } to { opacity: 0; } }
.x8-mb-layer-host, .x8-sk-lot-mask { animation: x8-sk-fade-in .3s ease-out both; }
.x8-mb-layer-host.x8-sk-leaving, .x8-sk-lot-mask.x8-sk-leaving { animation: x8-sk-fade-out .3s ease-in both; pointer-events: none; }



.x8-sk-betok-mask { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 3002; background: rgba(0, 0, 0, .7); animation: x8-sk-fade-in .3s ease-out both; }
.x8-sk-betok-dlg { position: fixed; top: 45%; left: 50%; z-index: 3003; width: 165px; box-sizing: border-box; padding: 0.8rem 0;
  overflow: hidden; background: #fff; border-radius: 0.42667rem; text-align: center;
  transform: translate3d(-50%, -50%, 0); animation: x8-sk-betok-in .3s both; }
.x8-sk-betok-dlg svg { display: block; width: 1.17333rem; height: 1.17333rem; margin: 0 auto; }
.x8-sk-betok-dlg h3 { margin: 0; padding-top: 0.4rem; font-size: 0.45333rem; font-weight: 400; line-height: normal; color: #111626; }
.x8-sk-betok.x8-sk-leaving .x8-sk-betok-mask { animation: x8-sk-fade-out .3s ease-in both; }
.x8-sk-betok.x8-sk-leaving .x8-sk-betok-dlg { animation: x8-sk-betok-out .3s both; }
@keyframes x8-sk-betok-in { from { transform: translate3d(-50%, -50%, 0) scale(.7); opacity: 0; } to { transform: translate3d(-50%, -50%, 0); opacity: 1; } }
@keyframes x8-sk-betok-out { from { transform: translate3d(-50%, -50%, 0); opacity: 1; } to { transform: translate3d(-50%, -50%, 0) scale(.9); opacity: 0; } }



.x8-sk-noopen-dlg { position: fixed; top: 45%; left: 50%; z-index: 3003; width: 285px; box-sizing: border-box; padding-top: 0.53333rem;
  overflow: hidden; background: #fff; border-radius: 0.42667rem; text-align: center;
  transform: translate3d(-50%, -50%, 0); animation: x8-sk-betok-in .3s both; }
.x8-sk-noopen-dlg svg { display: block; width: 1.17333rem; height: 1.17333rem; margin: 0 auto; color: var(--x8-main); }
.x8-sk-noopen-dlg h3 { margin: 0; padding-top: 0.53333rem; font-size: 0.45333rem; font-weight: 400; line-height: normal; color: #111626; }
.x8-sk-noopen-dlg p { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; margin: 0; padding: 0.26667rem 0.26667rem 0.53333rem;
  font-size: 0.4rem; line-height: normal; color: #858b9c; }
.x8-sk-noopen-foot { border-top: 0.01333rem solid #e2e4ea; }
.x8-sk-noopen-foot button { position: relative; display: block; width: 100%; height: 1.28rem; padding: 0; border: 0; background: #fff;
  font-family: inherit; font-size: 0.42667rem; color: #414654; cursor: pointer; }
.x8-sk-noopen-foot button:active::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .1); }
.x8-sk-noopen.x8-sk-leaving .x8-sk-betok-mask { animation: x8-sk-fade-out .3s ease-in both; }
.x8-sk-noopen.x8-sk-leaving .x8-sk-noopen-dlg { animation: x8-sk-betok-out .3s both; }

.x8-sk-more { padding: 0; line-height: 1.33333rem; }

.x8-sk-fold-bd { overflow: hidden; transition: height .3s ease-in-out; }
.x8-sk-fold.closing .x8-sk-fold-arr { transform: rotate(90deg); }


.x8-sk-toast { position: fixed; top: 50%; left: 50%; z-index: 3500; display: flex; align-items: center; justify-content: center; box-sizing: content-box;
  min-height: 1.17333rem; max-width: 70%; padding: 0.05333rem 0.32rem; background: rgba(0, 0, 0, .7); border-radius: 0.21333rem; color: #fff;
  text-align: center; word-break: break-all; transform: translate3d(-50%, -50%, 0); pointer-events: none; animation: x8-sk-fade-in .3s ease-out both; }
.x8-sk-toast.x8-sk-leaving { animation: x8-sk-fade-out .3s ease-in both; }
.x8-sk-toast i { flex: none; width: 0.42667rem; height: 0.42667rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cmask id='m'%3E%3Crect width='16' height='16' fill='%23fff'/%3E%3Cpath d='M4.9 4.9L11.1 11.1M11.1 4.9L4.9 11.1' stroke='%23000' stroke-width='1.2'/%3E%3C/mask%3E%3Ccircle cx='8' cy='8' r='8' fill='%23fff' mask='url(%23m)'/%3E%3C/svg%3E") center / 100% no-repeat; }
.x8-sk-toast span { margin-left: 0.10667rem; font-size: 0.37333rem; line-height: 0.42667rem; white-space: break-spaces; }

.x8-sk-listload { display: flex; align-items: center; justify-content: center; height: 1.33333rem; font-size: 0.37333rem; color: #969799; }
.x8-sk-listload > span + span { margin-left: 0.21333rem; }
.x8-sk-spin { display: block; width: 0.42667rem; height: 0.42667rem; color: #c8c9cc; animation: x8-sk-rotate 2s linear infinite; }
.x8-sk-spin svg { display: block; width: 100%; height: 100%; }
.x8-sk-spin circle { stroke: currentColor; stroke-width: 3; stroke-linecap: round; animation: x8-sk-circular 1.5s ease-in-out infinite; }
@keyframes x8-sk-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes x8-sk-circular {
  0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; }
  50% { stroke-dasharray: 90, 150; stroke-dashoffset: -40; }
  100% { stroke-dasharray: 90, 150; stroke-dashoffset: -120; }
}

.x8-sk-toast.x8-sk-toast-text { min-width: 2.56rem; min-height: 0; padding: 0.21333rem 0.32rem; }
.x8-sk-toast.x8-sk-toast-text span { margin-left: 0; line-height: 0.53333rem; white-space: pre-wrap; }


.x8-sk-pwbtn.x8-sk-loading { display: flex; align-items: center; justify-content: center; cursor: default; }
.x8-sk-pwbtn.x8-sk-loading::before { display: none; }
.x8-sk-spin.x8-sk-btnspin { width: 20px; height: 20px; color: inherit; }
.x8-sk-btnspin + .x8-sk-btntext { margin-left: 0.10667rem; }

.x8-sk-tr.x8-sk-cancel > div::after { top: 50%; bottom: auto; height: 0.05333rem; box-sizing: border-box; background: red; transform: rotate(0deg); }















.x8-m-board .x8-pair-list {
  position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; padding-top: 0.26667rem; }

.x8-m-board .x8-pair-list:not(:last-child)::after { content: ' '; position: absolute; left: -0.26667rem; right: -0.26667rem; bottom: 0;
  pointer-events: none; border-bottom: 0.02667rem solid #c5cad5; transform: scaleY(.5); }
.x8-m-board .x8-pair-list .x8-pair-cell {
  box-sizing: border-box; display: flex; align-items: center; justify-content: flex-start;
  width: 4.58667rem; height: 1.06667rem; margin: 0 0 0.26667rem; padding: 0 0 0 0.32rem;
  border: 1px solid #d6d6d6; border-radius: 0.42667rem; background: #f3f3f3;
  box-shadow: 0 0 0.16rem rgba(0, 0, 0, .1);
  user-select: none; cursor: pointer; transition: transform var(--x8-t-fast); }
.x8-m-board .x8-pair-list .x8-pair-cell:active { transform: scale(.97); }

.x8-m-board .x8-pair-list .x8-pair-cell.picked { background: linear-gradient(#f8f1d6, #e6ddb8); border-color: #ebe4c6; box-shadow: 0 0.05333rem 0 0 #c8c0a1; }
.x8-m-board .x8-pair-list .x8-pair-cell.disabled { opacity: .45; cursor: default; }


.x8-m-board .x8-pair-list .x8-pair-name {
  flex: none; width: 0.90667rem; text-align: center;
  font-size: 0.4rem; font-weight: 600; line-height: 0.45333rem; padding-bottom: 0.10667rem; color: #362f18; }
.x8-m-board .x8-pair-list .x8-pair-cell.picked .x8-pair-name { color: #362f18; }




.x8-m-board .x8-pair-list .x8-combo-nums {
  box-sizing: border-box; flex: none; display: flex; align-items: center; justify-content: center;
  width: 3.32rem; padding: 0; gap: 0; }

.x8-m-board .x8-pair-list .x8-combo-mball {
  flex: none; box-sizing: border-box; width: 0.53333rem; height: 0.53333rem; margin-right: 0.05333rem;
  border-radius: 100%; font-size: 0.32rem; font-weight: 400; line-height: 0.53333rem;
  text-align: center; font-style: normal; color: #fff;
  background-image: none; box-shadow: none; }
.x8-m-board .x8-pair-list .x8-combo-mball:last-child { margin-right: 0; }
.x8-m-board .x8-pair-list .x8-combo-mball.x8-nb-red { background-color: #ef5250; }
.x8-m-board .x8-pair-list .x8-combo-mball.x8-nb-blue { background-color: #2f86f6; }
.x8-m-board .x8-pair-list .x8-combo-mball.x8-nb-green { background-color: #0eb581; }




.x8-m-board .x8-pair-gtitle {
  position: relative; height: 0.8rem; line-height: 0.8rem; margin: 0.26667rem -0.26667rem 0;
  background: #f3f5f8; color: #414654; font-size: 0.34667rem; text-align: center; }
.x8-m-board .x8-pair-gtitle::before, .x8-m-board .x8-pair-gtitle::after { content: ' '; position: absolute; left: 0; right: 0;
  pointer-events: none; transform: scaleY(.5); }
.x8-m-board .x8-pair-gtitle::before { top: 0; border-top: 0.02667rem solid #c5cad5; }
.x8-m-board .x8-pair-gtitle::after { bottom: 0; border-bottom: 0.02667rem solid #c5cad5; }




.x8-m-board .x8-pair-zone + .x8-pair-zone { margin-top: 0.26667rem; }
.x8-m-board .x8-pair-head {
  height: 0.8rem; line-height: 0.8rem; padding: 0 0.26667rem; margin-bottom: 0.13333rem;
  background: #f3f5f8; color: #414654; font-size: 0.34667rem; }
.x8-m-board .x8-pair-head b { font-weight: 700; margin-right: 0.10667rem; }


.x8-m-board .x8-pair-pad-number {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.05333rem 0.06667rem; }
.x8-m-board .x8-pair-pad-number .x8-pair-cell {
  box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 1.12rem; padding: 0; border: 1px solid #d6d6d6; border-radius: 0.42667rem; background: #f3f3f3;
  box-shadow: 0 0 0.16rem rgba(0, 0, 0, .1);
  user-select: none; cursor: pointer; }
.x8-m-board .x8-pair-pad-number .x8-pair-cell.picked {
  background: var(--main-color); border-color: var(--main-color); }
.x8-m-board .x8-pair-pad-number .x8-pair-cell.taken { opacity: .35; }
.x8-m-board .x8-pair-pad-number .x8-pair-cell.disabled { opacity: .45; cursor: default; }


.x8-m-board .x8-pair-pad-number .x8-combo-ball {
  width: auto; height: auto; border-radius: 0; background: none; background-image: none; box-shadow: none;
  font-size: 0.42667rem; font-weight: 400; line-height: 0.42667rem; font-style: normal; }
.x8-m-board .x8-pair-pad-number .x8-combo-ball.x8-nb-red { color: #ef5250; }
.x8-m-board .x8-pair-pad-number .x8-combo-ball.x8-nb-blue { color: #2f86f6; }
.x8-m-board .x8-pair-pad-number .x8-combo-ball.x8-nb-green { color: #0eb581; }
.x8-m-board .x8-pair-pad-number .x8-pair-odds {
  font-size: 0.32rem; line-height: 0.32rem; margin-top: 0.05333rem; color: #d90000; }
.x8-m-board .x8-pair-pad-number .x8-pair-cell.picked .x8-combo-ball,
.x8-m-board .x8-pair-pad-number .x8-pair-cell.picked .x8-pair-odds { color: #fff !important; }



.x8-pn { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 90; overflow: hidden; }

.x8-pn-nav { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden;
  background: linear-gradient(180deg, #fbfcfd 4%, #f7f9fa 12%, #f6f8f9 21%, #fff 29%, #fefefe 38%, #fbfdfe 46%, #f9fbfc 54%, #f7f8fb 63%, #f3f6fb 71%, #f0f3f8 79%, #eaedf3 88%, #e9edf3 96%); }
.main-content.x8-pn-page { position: relative; z-index: 91; transition: transform .3s; }
body.x8-pn-on .main-content.x8-pn-page { transform: translate3d(-79%, 0, 0) scale(.78); border-radius: 0.42667rem; box-shadow: 0 0 0.26667rem 0 rgba(0, 0, 0, .3); }
.x8-pn-ghost { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 92; transition: transform .3s; }
body.x8-pn-on .x8-pn-ghost { transform: translate3d(-79%, 0, 0); }
.x8-pn-shade { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; transition: transform .3s; }
body.x8-pn-on .x8-pn-shade { transform: scale(.78); }
body.x8-pn-on .x8-pn-shade::after { content: ""; position: absolute; top: 5%; right: -0.66667rem; height: 90%; width: 0.66667rem; border-radius: 0 0.4rem 0.4rem 0; background: rgba(0, 0, 0, .05); }
body.x8-pn-instant .main-content.x8-pn-page, body.x8-pn-instant .x8-pn-ghost, body.x8-pn-instant .x8-pn-shade { transition: none; }

.x8-pn-head { position: relative; width: 100%; height: 1.28rem; }
.x8-pn-x { position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 1.06667rem; height: 1.28rem; cursor: pointer; }
.x8-pn-x svg { display: block; width: 0.53333rem; height: 0.53333rem; }
.x8-pn-body { padding: 0 0.53333rem 0 2.18667rem; }
.x8-pn-row { position: relative; display: flex; align-items: center; height: 1.06667rem; font-size: 0.4rem; color: #111626; }
.x8-pn-row::after { content: " "; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 0.01333rem solid #e2e4ea; transform: scaleY(.5); }
.x8-pn-item { cursor: pointer; }
.x8-pn-ico { display: inline-block; flex: none; width: 0.48rem; height: 0.48rem; margin-right: 0.26667rem; }
.x8-pn-ico svg { display: block; width: 100%; height: 100%; }
.x8-pn-ico-report { width: 0.53333rem; height: 0.53333rem; }
.x8-pn-ico-users, .x8-pn-ico-rule { height: 0.42667rem; }
.x8-pn-ico-perve { height: 0.58667rem; }
.x8-pn-t { line-height: 0.48rem; }
.x8-pn-t20 { line-height: 0.53333rem; }


.x8-pn-perve { height: 1.6rem; }
.x8-pn-imgr { display: flex; align-items: flex-start; height: 1.06667rem; }
.x8-pn-valr { height: 1.01333rem; }
.x8-pn-hint { margin: 0; padding-bottom: 0.16rem; font-size: 0.4rem; line-height: 0.42667rem; color: #858b9c; }
.x8-pn-hint span { padding-left: 0.26667rem; }
.x8-pn-winr { position: relative; height: 0.45333rem; padding-top: 0.16rem; }
.x8-pn-win { position: absolute; left: -0.8rem; top: 0.16rem; height: 0.45333rem; padding-left: 1.22667rem; line-height: 0.45333rem; white-space: nowrap; }
.x8-pn-win.lose { color: #2f86f6; }
.x8-pn-win.win { color: #f35e5b; }
.x8-pn-win svg { position: absolute; left: 0; top: 0; width: 1.09333rem; height: 0.45333rem; }


.x8-pn-colors { height: 0.8rem; }
.x8-pn-sw { display: flex; align-items: center; justify-content: center; width: 0.58667rem; height: 0.58667rem; border-radius: 0.08rem; cursor: pointer; }
.x8-pn-sw + .x8-pn-sw { margin-left: 0.16rem; }
.x8-pn-sw svg { display: block; width: 18px; height: 18px; }


.x8-pn-pk { flex-direction: column; align-items: flex-start; justify-content: center; height: auto; min-height: 1.6rem; }
.x8-pn-pkhd { display: flex; align-items: center; }
.x8-pn-pills { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; width: 100%; }
.x8-pn-pill { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 1.6rem; height: 0.69333rem; margin-top: 0.26667rem;
  border: 0.02667rem solid #c5cad5; border-radius: 1.30667rem; background: #fff; font-size: 0.34667rem; line-height: normal; color: #414654; cursor: pointer; }
.x8-pn-pill.active { color: #fff; background: var(--main-color); border-color: var(--main-color); }
.x8-pn-pknull { width: 1.6rem; height: 0.02667rem; margin-top: 0.26667rem; }

.x8-sk-hd .x8-sk-title.x8-sk-tabs { display: flex; align-items: center; justify-content: center; }
.x8-sk-tabs > span { padding: 0 0.21333rem; line-height: 1.46667rem; color: rgba(255, 255, 255, .6); cursor: pointer; }
.x8-sk-tabs > span.on { color: #fff; font-weight: 600; cursor: default; }
.x8-sk-tabs > i { width: 1px; height: 0.37333rem; background: rgba(255, 255, 255, .5); }

.x8-sk-tr .x8-c-win > span.x8-sk-voidat { white-space: pre-line; }

.x8-sk-tr .x8-c-play.x8-mop-cur { cursor: pointer; }
.x8-mop-mask { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .5); }
.x8-mop { position: relative; box-sizing: border-box; width: 92%; max-height: 80%; display: flex; flex-direction: column; padding: 0.13333rem; background: #fff; border-radius: 0.10667rem; }
.x8-mop-close { position: absolute; top: 0.13333rem; right: 0.13333rem; width: 0.69333rem; height: 0.69333rem; padding: 0; border: none; background: none; font-size: 0.58667rem; line-height: 0.69333rem; color: #858b9c; cursor: pointer; }
.x8-mop-head { flex: none; padding: 0.13333rem 0.8rem 0.13333rem 0.08rem; font-size: 0.37333rem; line-height: 0.53333rem; color: #111626; word-break: break-all; }
.x8-mop-nums { color: #012cf9; }
.x8-mop-table { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border: 1px solid #e2e4ea; }
.x8-mop-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.x8-mop-hd, .x8-mop-row { display: flex; align-items: stretch; box-sizing: border-box; min-height: 0.72rem; font-size: 0.32rem; line-height: normal; }
.x8-mop-hd { flex: none; background: #f3f5f8; color: #414654; font-weight: 600; }
.x8-mop-row { border-top: 1px solid #e2e4ea; color: #414654; }
.x8-mop-hd span, .x8-mop-row span { box-sizing: border-box; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 0.08rem 0.05333rem; text-align: center; word-break: break-all; border-right: 1px solid #e2e4ea; }
.x8-mop-hd span:nth-child(1), .x8-mop-row span:nth-child(1) { flex: 0 0 0.85333rem; }
.x8-mop-hd span:nth-child(2), .x8-mop-row span:nth-child(2) { flex: 1 1 0; }
.x8-mop-hd span:nth-child(3), .x8-mop-row span:nth-child(3) { flex: 0 0 1.6rem; }
.x8-mop-hd span:nth-child(4), .x8-mop-row span:nth-child(4) { flex: 0 0 1.12rem; }

.x8-mop-hd span { white-space: nowrap; padding-left: 0; padding-right: 0; }
.x8-mop-hd span:nth-child(5), .x8-mop-row span:nth-child(5) { flex: 0 0 1.38667rem; }
.x8-mop-hd span:last-child, .x8-mop-row span:last-child { flex: 0 0 1.38667rem; border-right: none; }
.x8-mop-res { color: #f82525; }
.x8-mop-foot { flex: none; padding: 0.13333rem 0.08rem 0.05333rem; font-size: 0.37333rem; font-weight: 600; color: #111626; }