.x8-btn { border: none; border-radius: 6px; background: var(--main-color, #0aa9ff); color: #fff; padding: 7px 16px; font-size: 14px; cursor: pointer; transition: filter .15s, box-shadow .15s; }
.x8-btn:hover { filter: brightness(.94); }
.x8-btn:disabled { background: #c3cbd8; cursor: not-allowed; filter: none; }
.x8-btn-lg { padding: 11px 18px; font-size: 15px; width: 100%; letter-spacing: 2px; font-weight: 600; box-shadow: 0 6px 16px rgba(var(--main-color-rgb, 10, 169, 255), .35); }
.x8-btn-lg:hover { box-shadow: 0 8px 20px rgba(var(--main-color-rgb, 10, 169, 255), .45); }
.x8-btn-plain { background: linear-gradient(#fff, #f7f7f9 99%); color: #566079; box-shadow: none; }
.x8-btn-plain:hover { background: linear-gradient(#fff, #ececf0 99%); filter: none; }
.x8-input { width: 100%; height: 34px; border: 1px solid #d8dce3; border-radius: 6px; padding: 0 12px; font-size: 14px; outline: none; }
.x8-input:focus { border-color: var(--x8-inpline-on, var(--main-color, #0aa9ff)); box-shadow: 0 0 0 3px rgba(var(--main-color-rgb, 10, 169, 255), .12); }






.x8-shell { display: flex; flex: 1; min-height: 0; align-items: stretch; gap: 4px; padding: 4px 4px 0; }
.x8-shell > #main-content { flex: 1; min-width: 0; }




.x8-shell > #main-content > .x8-view { min-height: 100%; box-sizing: border-box; }





.x8-bet-main { display: flex; flex: 0 0 auto; min-height: 0; overflow: visible; gap: 4px; align-items: stretch; }


.x8-board { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #fff; }


.x8-board-body { flex: none; overflow: visible; padding: 0; }
.x8-empty { padding: 60px 0; text-align: center; color: #aab2c2; font-size: 14px; }



.x8-side-left { width: 190px; flex: none; background: #fff; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, .1); border-radius: 2px; }



.x8-shell > .x8-side-left { position: sticky; top: 4px; align-self: flex-start; height: 294px; }



.x8-side-hd { flex: none; height: 30px; line-height: 30px; text-align: center; font-size: 13px; font-weight: 700; color: var(--x8-barink, #3f6ca7); background: var(--x8-bargrad, linear-gradient(0deg, #dae8fc, #fff)); border-radius: 0 2px 0 0; }

.x8-side-sub { flex: none; height: 30px; line-height: 28px; margin-top: 3px; padding: 0 10px; font-size: 13px; color: var(--x8-barink, #3f6ca7); background: var(--x8-bargrad, linear-gradient(0deg, #dae8fc, #fff)); }
.x8-side-sub b { color: var(--x8-barink, #3f6ca7); font-size: 13px; font-weight: 400; }


.x8-orders { flex: 1 1 auto; min-height: 0; overflow-y: auto; background: #fff; }
.x8-orders-empty { padding: 22px 0; text-align: center; color: #c5cad5; font-size: 13px; }

.x8-orders-empty .x8-empty-ico { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; color: #c5cad5; border: 1px solid #c5cad5; border-radius: 50%; margin-bottom: 10px; }
.x8-orders-empty .x8-empty-ico svg { width: 28px; height: 28px; }

.x8-order-row { padding: 2px 10px; border-bottom: 0.8px solid #e2e4ea; }
.x8-order-name { font-size: 13px; line-height: 17px; color: #111626; padding-bottom: 2px; word-break: break-all; }
.x8-order-meta { display: flex; justify-content: space-between; font-size: 13px; line-height: 17px; color: #111626; padding-bottom: 2px; }
.x8-order-meta b { color: var(--special-color, #0f81ff); font-weight: 400; }



:root { --x8-odds: Verdana, "microsoft yahei", Arial, sans-serif; }


.x8-board-bar { display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 20px 0 10px; margin-bottom: 6px;
  


  background: var(--x8-bargrad, linear-gradient(0deg, #dae8fc, #fff)); }
.x8-spacer { flex: 1; }

.x8-subtabs { display: flex; border: 0.8px solid var(--x8-line, #c2ccda); background: #fff; }
.x8-subtabs:empty { display: none; }
.x8-subtab { flex: 1; min-width: 0; white-space: nowrap; border: none; border-right: 0.8px solid var(--x8-line, #c2ccda); background: var(--x8-pos-off, linear-gradient(#fff, #e2e4ea 99%)); color: #111626; border-radius: 0; height: 26px; font-size: 13px; cursor: pointer; }
.x8-subtab:last-child { border-right: none; }
.x8-today, .x8-cd { white-space: nowrap; }
.x8-subtab.active { background: var(--x8-pos-on, linear-gradient(#fff, #c1dbfe 99%)); color: var(--x8-pos-on-ink, #0f81ff); font-weight: 400; }




.x8-subtabs.x8-subtabs-pos { border: 0.8px solid var(--x8-line, #c2ccda); background: transparent; margin-bottom: 6px; }
.x8-subtabs-pos .x8-subtab { height: 26px; font-size: 14px; font-weight: 500;
  border-right: 0.8px solid var(--x8-line, #c2ccda);
  background: var(--x8-pos-off, linear-gradient(#fff, #e2e4ea 98%)); color: var(--x8-pos-off-ink, #414654); }
.x8-subtabs-pos .x8-subtab:last-child { border-right: none; }
.x8-subtabs-pos .x8-subtab.active { background: var(--x8-pos-on, linear-gradient(#fff, #c1dbfe 99%)); color: var(--x8-pos-on-ink, #0f81ff); font-weight: 500; }


.x8-today, .x8-cd { font-size: 13px; font-weight: 600; color: var(--x8-barink, #3f6ca7); }
.x8-today-v { font-size: 14px; font-weight: 600; color: #33c58a; }
.x8-today-v.up { color: #33c58a; }
.x8-today-v.down { color: #f82525; }
.x8-cd-v { box-sizing: border-box; display: inline-block; width: 64px; height: 20px; line-height: 20px; padding: 0 5px; border-radius: 2px; text-align: center; font-size: 15px; font-weight: 700; color: #f82525; background: rgba(255, 77, 74, .1); }
.x8-cd-draw { color: #33c58a; background: rgba(51, 197, 138, .1); }

.x8-issue { white-space: nowrap; color: var(--x8-barink, #3f6ca7); font-size: 13px; font-weight: 600; }
.x8-issue-no { font-size: 14px; font-weight: 700; }

.x8-limit-tip { box-sizing: border-box; height: 22px; text-align: right; padding: 4px 12px 0 0; font-size: 12px; color: var(--x8-limitink, #414654); background: #fff; }


.x8-band { height: 25px; line-height: 25px; text-align: center; font-size: 13px; font-weight: 600;
  color: var(--x8-headink, #111626); background: var(--x8-headbg, #ebecf1);
  border: 0.8px solid var(--x8-line, #c2ccda); border-bottom: none; }



.x8-chipbar { display: flex; align-items: center; justify-content: center; gap: 0; height: 44px; padding: 0; background: #fff; }
.x8-chips { display: flex; gap: 10px; }
.x8-chip { width: 44px; height: 44px; border-radius: 50%; border: 3px dashed rgba(255, 255, 255, .75); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 6px rgba(20, 40, 90, .22); }
.x8-chip-0 { background: #e0402c; }
.x8-chip-1 { background: #ef8f1c; }
.x8-chip-2 { background: #6a4fc4; }
.x8-chip-3 { background: #17a34a; }
.x8-btn-warn { background: linear-gradient(#ff9c00, #ff5100); border: 0.8px solid #dd4a00; }


.x8-btn-main, .x8-btn-block { background: var(--x8-btn-pri, linear-gradient(#35a2ff, #0e76e1)); color: var(--x8-btn-pri-ink, #fff); border: 0.8px solid var(--x8-btn-pri-line, transparent); font-size: 13px; font-weight: 500; }
.x8-btn-main { border-radius: 2px; }
.x8-btn-block { border-radius: 3px; }
.x8-amt-label { font-size: 13px; font-weight: 600; color: var(--x8-nameink, #414654); padding: 0 8px 0 21px; }
.x8-amt { box-sizing: border-box; width: 84px; height: 32px; border: 0.8px solid var(--x8-line, #c2ccda); border-radius: 2px; padding: 0 5px; font-size: 13px; outline: none; }

.x8-chipbar .x8-chips { margin-right: 10px; }
.x8-chipbar .x8-btn { box-sizing: border-box; border-radius: 2px; padding: 0; font-size: 14px; font-weight: 500; }
.x8-chipbar .x8-btn-warn { width: 86px; height: 30px; }
.x8-chipbar .x8-btn-main { width: 61px; height: 30px; font-size: 13px; margin-left: 14px; }
.x8-chipbar .x8-btn-plain { width: 59.6px; height: 30px; margin-left: 12px; border: 0.8px solid var(--x8-btn-dis-line, #eef0f3); }
.x8-amt:focus { border-color: var(--x8-inpline-on, var(--main-color, #0aa9ff)); }






.x8-side-right { width: 219px; flex: none; background: #fff; display: flex; flex-direction: column; overflow: visible; }


.x8-rtabs { display: flex; background: var(--x8-bargrad, linear-gradient(0deg, #dae8fc, #fff)); }
.x8-rtab { flex: 1; height: 30px; border: none; background: transparent; color: var(--x8-barink, #3f6ca7); font-size: 13px; font-weight: 600; cursor: pointer; }
.x8-rtab.active { background: var(--x8-pos-on, linear-gradient(#fff 2%, #ffcdb5)); color: var(--x8-pos-on-ink, #ff5200); font-weight: 600; }
.x8-quick { flex: none; overflow: visible; padding: 2px; }

.x8-quick-sec { display: grid; gap: 0; margin-bottom: 6px; border-right: 1px solid #c2ccda; border-bottom: 1px solid #c2ccda; }

.x8-quick-sec.q-num { grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(10, 1fr); grid-auto-flow: column; }
.x8-quick-sec.q-color { grid-template-columns: repeat(3, 1fr); }
.x8-quick-sec.q-attr { grid-template-columns: repeat(4, 1fr); }
.x8-quick-sec.q-zodiac { grid-template-columns: repeat(4, 1fr); }
.x8-quick-sec.q-tail { grid-template-columns: repeat(5, 1fr); }


.x8-qcell { border: none; border-top: 1px solid #c2ccda; border-left: 1px solid #c2ccda; background: linear-gradient(#fff, #f2f4fa 99%); border-radius: 0; height: 24px; font-size: 13px; font-weight: 700; color: #414654; cursor: pointer; padding: 0; }
.x8-quick-sec.q-num .x8-qcell { font-weight: 600; }
.x8-qcell.x8-qc-red { color: #f82525; }
.x8-qcell.x8-qc-blue { color: #116ce1; }
.x8-qcell.x8-qc-green { color: #1bb175; }


.x8-qcell.active { background: #ffb135; background-image: none; }


.x8-quick-fix { flex: none; padding: 4px 6px 8px; border-top: 1px solid #eef1f6; }
.x8-quick-foot { display: flex; align-items: center; gap: 4px; padding: 4px 0; }
.x8-quick-foot .x8-amt { box-sizing: border-box; min-width: 0; flex: 1; height: 22px; padding: 0 6px; font-size: 13px; border-radius: 4px; }
.x8-quick-foot .x8-btn { flex: none; width: 50px; height: 22px; padding: 0; font-size: 12px; border-radius: 3px; }
.x8-btn-block { display: block; width: 100%; height: 32px; margin-top: 4px; padding: 0; font-size: 12px; font-weight: 500; border-radius: 3px; letter-spacing: normal; }



.x8-quick-foot .x8-btn-main, .x8-quick-fix .x8-btn-block, .x8-textbet-ops .x8-btn-main {
  

  background: var(--main-color, #0aa9ff);
  background: var(--x8-dlg-grad, var(--main-color, #0aa9ff));
  border: 0.8px solid var(--main-color, #0aa9ff);
  color: #fff;
}

.x8-quick-foot .x8-btn-plain, .x8-textbet-ops .x8-btn-plain {
  background: linear-gradient(180deg, #fff, #e2e4ea 99%);
  border: 0.8px solid #c5cad5;
  color: #414654;
}

.x8-dragon { flex: none; overflow: visible; border: 0.8px solid var(--x8-line, #c2ccda); border-bottom: none; }

.x8-dragon-off .x8-dragon-name { cursor: default; }


.x8-dragon-loading { padding: 40px 0; text-align: center; color: #c2c9d6; font-size: 12px; border-bottom: 0.8px solid var(--x8-line, #c2ccda); }





.x8-row.x8-hl, .x8-cell-inline.x8-hl { background: var(--x8-pick, #fbbb55) !important; background-image: none !important; }
.x8-cell-inline.x8-hl .x8-cell-slot { background: var(--x8-pick, #fbbb55); }
.x8-row.x8-hl .x8-cell-amt, .x8-cell-inline.x8-hl .x8-cell-amt { background: #fff !important; }


.x8-dragon-row { user-select: none; -webkit-user-select: none; display: flex; align-items: center; box-sizing: border-box; height: 24px; padding: 0; border-bottom: 0.8px solid var(--x8-line, #c2ccda); font-size: 13px; }

.x8-dragon-name { flex: 1 1 auto; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: flex-start; cursor: pointer;
  color: var(--x8-barink, #414654); border-right: 0.8px solid var(--x8-line, #c2ccda); padding: 0 0 0 10px; overflow: hidden; white-space: nowrap;
  background: linear-gradient(180deg, #fff, rgba(var(--main-color-rgb, 10, 169, 255), .10) 99%); }
.x8-dragon-n { flex: 0 0 50px; height: 100%; display: flex; align-items: center; justify-content: center;
  color: #f82525; font-weight: 400; }

.x8-ld-ball { display: inline-flex; flex-direction: column; align-items: center; gap: 0; vertical-align: middle; }
.x8-ld-ball em { font-style: normal; font-size: 10px; line-height: 1.1; color: rgba(255, 255, 255, .8); }




.x8-plate { display: flex; align-items: center; gap: 2px; position: relative; }
.x8-plate-label { opacity: .8; }
.x8-plate-cur { display: flex; align-items: center; gap: 4px; padding: 2px; font-weight: 700; color: #ffe08a; cursor: pointer; }
.x8-plate-tri { width: 0; height: 0; border-top: 5px solid currentColor; border-left: 4px solid transparent; border-right: 4px solid transparent; }
.x8-plate-pop { position: absolute; top: 100%; right: 0; z-index: 50; width: 70px; padding-top: 5px; }
.x8-plate-pop p { margin: 0; height: 30px; line-height: 30px; padding: 0 15px; background: #fff; color: #414654; font-size: 13px; font-weight: 400; text-align: center; cursor: pointer; }
.x8-plate-pop p:first-child { border-radius: 2px 2px 0 0; }
.x8-plate-pop p:last-child { border-radius: 0 0 2px 2px; }
.x8-plate-pop p.active { color: var(--main-color, #0aa9ff); font-weight: 700; }



.x8-play.x8-play-inline { margin: 0 0 6px; background: transparent; border: none; box-shadow: none; padding: 0; }
.x8-board-body > .x8-play.x8-play-inline:last-child { margin-bottom: 0; }


.x8-play-inline .x8-grid { gap: 0; border-right: 1px solid var(--x8-line, #c2ccda); border-bottom: 1px solid var(--x8-line, #c2ccda); }

.x8-play-inline .x8-grid-number { grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(10, auto); grid-auto-flow: column; }

.x8-play-inline .x8-grid-size_parity { grid-template-columns: none; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }



.x8-play-inline .x8-grid-size_parity .x8-cell-slot { width: 34px; }
.x8-play-inline .x8-grid-size_parity .x8-cell-odds { width: 44px; min-width: 44px; }

.x8-play-inline .x8-grid-tail { grid-template-columns: repeat(4, 1fr); }
.x8-play-inline .x8-grid-tail .x8-cell-slot { width: 62px; }
.x8-play-inline .x8-grid-tail .x8-cell-odds { width: 70px; min-width: 70px; }

.x8-play-inline .x8-grid-sum { grid-template-columns: repeat(4, 1fr); }
.x8-play-inline .x8-grid-sum .x8-cell-slot { width: 60px; }
.x8-play-inline .x8-grid-sum .x8-cell-odds { width: 68px; min-width: 68px; }
.x8-play-inline .x8-grid-zodiac { grid-template-columns: repeat(6, 1fr); }
.x8-play-inline .x8-grid-color { grid-template-columns: repeat(3, 1fr); }
.x8-cell-inline { flex-direction: row !important; gap: 0 !important; justify-content: flex-start !important; align-items: stretch !important; padding: 0 !important; min-width: 0; background: #fff !important; border: none !important; border-top: 1px solid var(--x8-line, #c2ccda) !important; border-left: 1px solid var(--x8-line, #c2ccda) !important; border-radius: 0 !important; min-height: 30px; }

.x8-cell-inline:hover { transform: none; background: var(--x8-hover, #c3daf1); }
.x8-cell-inline:hover .x8-cell-slot { background: var(--x8-hover, #c3daf1); }
.x8-cell-inline:hover .x8-cell-amt { background: #fff; }







.x8-row.x8-cell-filled, .x8-row.x8-cell-filled:hover,
.x8-row.x8-cell-picked, .x8-row.x8-cell-picked:hover { background: var(--x8-fill, #fbbb55) !important; }
.x8-row.x8-cell-filled .x8-cell-amt,
.x8-row.x8-cell-picked .x8-cell-amt { background: #fff; }
.x8-cell-inline.x8-cell-filled, .x8-cell-inline.x8-cell-filled:hover,
.x8-cell-inline.x8-cell-picked, .x8-cell-inline.x8-cell-picked:hover { background: var(--x8-fill, #fbbb55) !important; }
.x8-cell-inline.x8-cell-filled .x8-cell-slot, .x8-cell-inline.x8-cell-filled:hover .x8-cell-slot,
.x8-cell-inline.x8-cell-picked .x8-cell-slot, .x8-cell-inline.x8-cell-picked:hover .x8-cell-slot { background: var(--x8-fill, #fbbb55); }
.x8-cell-inline.x8-cell-filled .x8-cell-amt,
.x8-cell-inline.x8-cell-picked .x8-cell-amt { background: #fff; }




.x8-cell-amt[data-typed] { border-color: var(--x8-typed-line, #ffa141) !important; }
.x8-cell-empty { cursor: default; pointer-events: none; background-image: none !important; box-shadow: none !important; }
.x8-cell-empty:hover { transform: none; }

.x8-cell-inline .x8-cell-slot { flex: none; width: 40px; align-self: stretch; display: flex; align-items: center; justify-content: center; background: var(--x8-namebg, #edf4fe); color: var(--x8-nameink, #414654); }
.x8-cell-inline .x8-cell-name { flex: none; margin: 0; }

.x8-cell-inline .x8-cell-odds { flex: 0 0 auto; box-sizing: border-box; width: 60px; min-width: 60px; overflow: hidden; text-align: center; color: #f82525; font-family: var(--x8-odds); font-size: 12px; display: flex; align-items: center; justify-content: center; border-left: 1px solid var(--x8-line, #c2ccda); border-right: 1px solid var(--x8-line, #c2ccda); }
.x8-play-inline .x8-grid-number .x8-cell-name { width: 28px; height: 28px; font-size: 14px; font-weight: 600; }
.x8-play-inline .x8-grid-zodiac .x8-cell-name,
.x8-play-inline .x8-grid-size_parity .x8-cell-name,
.x8-play-inline .x8-grid-tail .x8-cell-name,
.x8-play-inline .x8-grid-color .x8-cell-name,
.x8-play-inline .x8-grid-sum .x8-cell-name { font-size: 13px; white-space: nowrap; }

.x8-cell-inline.x8-wave-red .x8-cell-name,
.x8-cell-inline.x8-wave-blue .x8-cell-name,
.x8-cell-inline.x8-wave-green .x8-cell-name { color: #fff; }
.x8-cell-inline.x8-ink-red .x8-cell-name { color: #d0291a; }
.x8-cell-inline.x8-ink-blue .x8-cell-name { color: #176aae; }
.x8-cell-inline.x8-ink-green .x8-cell-name { color: #178f4a; }
.x8-cell-amt { width: 46px; flex: none; height: 22px; border: 1px solid #d8dce3; border-radius: 3px; background: #eef1f6; font-size: 12px; text-align: center; outline: none; padding: 0 2px; }
.x8-cell-amt:focus { background: #fff; border-color: var(--x8-inpline-on, var(--main-color, #0aa9ff)); }
.x8-cell-amt:disabled { background: #f0f0f0; cursor: not-allowed; }



.x8-cell-inline .x8-cell-amt { box-sizing: border-box; font-family: Arial, sans-serif; flex: 1; min-width: 0; width: auto; height: 23px; align-self: center; margin: 0 5px; border: 0.8px solid var(--x8-line, #c2ccda); border-radius: 4px; background: #fff; padding: 0 2px; }
.x8-cell-inline .x8-cell-amt:focus { background: #fff; }
.x8-cell-inline .x8-cell-amt:disabled { background: var(--x8-inpbg, #c2ccda); border-color: var(--x8-inpline, #bfc9d7); cursor: not-allowed; }

.x8-cell-inline.x8-cell-off { background: var(--x8-cellbg, #f6f7fb) !important; }
.x8-play-inline .x8-zm-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.x8-play-inline .x8-zm-cells { grid-template-columns: 1fr; }


.x8-play { margin-bottom: 14px; background: #fff; border: 1px solid #e9edf4; border-radius: 10px; padding: 13px 15px; box-shadow: 0 2px 6px rgba(20, 40, 90, .05); }

.x8-play-hd { display: flex; align-items: center; gap: 9px; margin: -2px -15px 11px; padding: 0 15px 9px; border-bottom: 1px solid #f0f3f8; }
.x8-play-name { font-size: 15px; font-weight: 700; color: #2c3e50; padding-left: 9px; position: relative; }
.x8-play-name::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 14px; border-radius: 2px; background: var(--main-color, #0aa9ff); }
.x8-play-count { font-size: 11px; font-weight: 600; color: #94a0b4; background: #f2f5fa; border-radius: 9px; padding: 2px 8px; }
.x8-grid { display: grid; gap: 7px; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
.x8-grid-number { grid-template-columns: repeat(var(--x8-grid-cols), 1fr); }
.x8-grid-size_parity { grid-template-columns: repeat(4, 1fr); }
.x8-grid-zodiac { grid-template-columns: repeat(6, 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(4, 1fr); }
.x8-grid-combo { grid-template-columns: repeat(4, 1fr); }
.x8-grid-pair { grid-template-columns: repeat(2, minmax(110px, 160px)); justify-content: center; }

.x8-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: #fff; border: 1px solid #e0e5ee; border-radius: 7px; padding: 9px 4px; cursor: pointer; user-select: none; touch-action: pan-y; transition: transform .12s; }
.x8-cell:hover { border-color: var(--main-color, #0aa9ff); box-shadow: 0 3px 8px rgba(var(--main-color-rgb, 10, 169, 255), .18); transform: translateY(-1px); }
.x8-cell.selected { background: linear-gradient(180deg, var(--main-color, #0aa9ff), rgba(var(--main-color-rgb, 10, 169, 255), .82)); border-color: var(--main-color, #0aa9ff); color: #fff; box-shadow: 0 4px 12px rgba(var(--main-color-rgb, 10, 169, 255), .35); }
.x8-cell.selected .x8-cell-odds { color: rgba(255, 255, 255, .88); }
.x8-cell.disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.x8-cell-name { font-size: 13px; font-weight: 400; }
.x8-cell-odds { font-size: 12px; color: var(--x8-main-ink); font-weight: 700; }
.x8-grid-color .x8-cell { padding: 14px 4px; }


.x8-grid-number { gap: 8px 6px; }
.x8-grid-number .x8-cell { padding: 8px 2px 6px; gap: 3px; }
.x8-grid-number .x8-cell-name { font-size: var(--x8-ball-font); width: var(--x8-ball); height: var(--x8-ball); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; box-shadow: none; }

.x8-wave-red .x8-cell-name { background: #f82525; }
.x8-wave-blue .x8-cell-name { background: #028aff; }
.x8-wave-green .x8-cell-name { background: #1fc26b; }
.x8-grid-number .x8-cell-odds { font-size: 12px; font-weight: 700; }

.x8-grid-number .x8-cell.selected .x8-cell-name { box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(var(--main-color-rgb, 10, 169, 255), .6), inset 0 -3px 5px rgba(0, 0, 0, .22); }




.x8-attr-big:hover { border-color: #d9700f; box-shadow: 0 3px 8px rgba(217, 112, 15, .18); }
.x8-attr-small:hover { border-color: #2378c4; box-shadow: 0 3px 8px rgba(35, 120, 196, .18); }
.x8-attr-odd:hover { border-color: #2e9e5f; box-shadow: 0 3px 8px rgba(46, 158, 95, .18); }
.x8-attr-even:hover { border-color: #9b59b6; box-shadow: 0 3px 8px rgba(155, 89, 182, .18); }
.x8-attr-domestic:hover { border-color: #a8761c; box-shadow: 0 3px 8px rgba(168, 118, 28, .18); }
.x8-attr-wild:hover { border-color: #4a7c3f; box-shadow: 0 3px 8px rgba(74, 124, 63, .18); }

.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-tint-red:hover { border-color: #cf261a; box-shadow: 0 3px 8px rgba(207, 38, 26, .2); }
.x8-tint-blue:hover { border-color: #176aae; box-shadow: 0 3px 8px rgba(23, 106, 174, .2); }
.x8-tint-green:hover { border-color: #178f4a; box-shadow: 0 3px 8px rgba(24, 146, 73, .2); }
.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-number .x8-cell { background: transparent; border-color: transparent; box-shadow: none; padding: 5px 2px; }
.x8-grid-number .x8-cell:hover { background: transparent; border-color: transparent; box-shadow: none; transform: translateY(-2px); }
.x8-grid-number .x8-cell.selected { background: transparent; border-color: transparent; box-shadow: none; }
.x8-grid-number .x8-cell.selected .x8-cell-odds { color: var(--x8-main-ink); }



.x8-grid-tail .x8-cell { padding: 8px 4px 7px; gap: 4px; }
.x8-grid-tail .x8-cell-name { display: flex; align-items: center; gap: 4px; }
.x8-tail-num { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: #fff; box-shadow: 0 2px 5px rgba(40, 60, 95, .18); }
.x8-tail-suffix { font-size: 12px; 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; 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: 22px; line-height: 1; }
.x8-grid-zodiac .x8-cell { padding: 8px 4px; gap: 3px; }
.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: 44px; padding: 3px 9px; border-radius: 7px; 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 3px 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.selected .x8-attr-badge, .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: 0 1px 2px rgba(20, 40, 90, .05); }
.x8-cell:hover { transform: translateY(-2px); }
.x8-grid-number .x8-cell, .x8-grid-number .x8-cell:hover { background-image: none; box-shadow: none; }

.x8-cell-odds { font-variant-numeric: tabular-nums; letter-spacing: .2px; opacity: .85; }
.x8-cell:hover .x8-cell-odds, .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-zm-wrap { display: flex; flex-wrap: wrap; gap: 10px; }
.x8-zm-group { flex: 1 1 auto; min-width: 0; max-width: 460px; border: 1px solid #e6ebf3; border-radius: 9px; padding: 8px 9px 9px; background: #fafbfd; transition: border-color .15s, box-shadow .15s; }
.x8-zm-group:hover { border-color: #d3dcea; box-shadow: 0 2px 8px rgba(20, 40, 90, .06); }
.x8-zm-label { display: block; margin: 0 auto 7px; padding: 2px 0; width: 100%; border-radius: 5px; font-size: 12px; font-weight: 700; text-align: center; letter-spacing: .5px; }
.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: 6px; }
.x8-zm-cells .x8-cell { flex: 1 1 0; width: auto; min-width: 66px; }


.x8-slip-hd { flex: none; padding: 13px 15px; font-size: 15px; font-weight: 700; color: #2c3e50; border-bottom: 1px solid #eef1f6; display: flex; align-items: center; gap: 6px; }
.x8-slip-hd::before { content: ""; width: 3px; height: 15px; border-radius: 2px; background: var(--main-color, #0aa9ff); }
.x8-slip-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 40px 14px; text-align: center; color: #aab2c2; font-size: 13px; }
.x8-slip-empty-icon { font-size: 46px !important; color: #d7dde8; }
.x8-slip-list { flex: 1; overflow-y: auto; padding: 6px 0; }
.x8-slip-row { display: flex; align-items: center; gap: 8px; padding: 9px 15px; border-bottom: 1px solid #f4f6fa; transition: background .15s; }
.x8-slip-row:hover { background: #f9fafc; }
.x8-slip-info { flex: 1; min-width: 0; }
.x8-slip-name { display: block; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x8-slip-meta { display: flex; align-items: center; gap: 6px; margin-top: 2px; }

.x8-slip-play { font-size: 11px; color: #8a93a6; background: #f2f5fa; border-radius: 3px; padding: 1px 5px; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x8-slip-odds { font-size: 12px; color: var(--x8-main-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.x8-slip-amt { width: 76px; height: 32px; border: 1px solid #d8dce3; border-radius: 5px; padding: 0 8px; text-align: right; outline: none; font-variant-numeric: tabular-nums; }

.x8-slip-amt:placeholder-shown { border-color: #ecc98a; background: #fffdf4; }
.x8-slip-amt:focus { border-color: var(--main-color, #0aa9ff); background: #fff; box-shadow: 0 0 0 3px rgba(var(--main-color-rgb, 10, 169, 255), .12); }
.x8-slip-del { width: 24px; height: 24px; border: none; background: #f0f2f6; border-radius: 50%; color: #9aa4b6; font-size: 16px; line-height: 1; cursor: pointer; transition: all .15s; }
.x8-slip-del:hover { background: #e74c3c; color: #fff; }
.x8-slip-foot { flex: none; border-top: 1px solid #eef1f6; background: #fafbfd; padding-top: 2px; }
.x8-slip-quick { display: flex; gap: 6px; padding: 10px 15px 4px; }


.x8-slip-quick .x8-chip { flex: 1; border: 1px solid rgba(var(--main-color-rgb, 10, 169, 255), .3); background: rgba(var(--main-color-rgb, 10, 169, 255), .07); border-radius: 5px; padding: 6px 0; font-size: 13px; font-weight: 600; color: var(--x8-main-ink); cursor: pointer; font-variant-numeric: tabular-nums; }
.x8-slip-quick .x8-chip:hover { border-color: var(--main-color, #0aa9ff); background: rgba(var(--main-color-rgb, 10, 169, 255), .16); }
.x8-chip:active { transform: scale(.95); }

.x8-slip-sum { display: flex; align-items: baseline; justify-content: space-between; padding: 9px 15px; border-top: 1px dashed #e3e8f0; margin-top: 6px; font-variant-numeric: tabular-nums; }
.x8-slip-sum-l { display: flex; flex-direction: column; gap: 1px; }
.x8-slip-sum-n { font-size: 13px; color: #8a93a6; font-weight: 600; }
.x8-slip-sum-tip { font-size: 11px; color: #d98b1f; font-weight: 600; }
.x8-slip-sum-v { font-size: 18px; color: var(--x8-main-ink); font-weight: 700; letter-spacing: .3px; }
.x8-slip-sum-u { font-size: 12px; font-style: normal; font-weight: 600; margin-left: 2px; opacity: .75; }
.x8-slip-ops { display: flex; gap: 8px; padding: 4px 15px 16px; }
.x8-slip-ops .x8-btn-plain { flex: none; width: 72px; }
.x8-slip-ops .x8-btn-lg { flex: 1; }



.lot-info .period { display: flex; align-items: center; }
.lot-info .period > span { width: auto !important; height: auto !important; line-height: normal !important; }
.x8-period-no { color: #ffe08a; font-weight: 400; font-size: 13px; letter-spacing: .5px; margin-left: 8px; }
.x8-period-state { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 11px; font-size: 12px; font-weight: 600; color: #fff; margin-left: 8px; white-space: nowrap; vertical-align: middle; width: auto !important; height: auto !important; line-height: 1.7 !important; }
.x8-period-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.x8-period-state.open { background: rgba(39, 174, 96, .92); }
.x8-period-state.open::before { animation: x8-period-pulse 1.5s infinite; }
.x8-period-state.closed { background: rgba(231, 76, 60, .85); }
.x8-period-cd { font-size: 12px; color: #ffe08a; font-weight: 600; margin-left: 8px; }
@keyframes x8-period-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .65); } 70% { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }




.lot-info .lot-name { display: flex; align-items: center; flex-wrap: nowrap; white-space: nowrap; }
.lot-info .period { flex-wrap: nowrap; white-space: nowrap; }


.x8-last-draw { display: inline-flex; align-items: center; gap: 7px; margin-left: 0; flex-shrink: 0; letter-spacing: normal; }
.x8-last-draw-label { font-size: 11px; font-weight: 400; color: rgba(255, 255, 255, .7); margin-right: 2px; }
.x8-last-draw .x8-ball { width: 28px !important; height: 28px !important; flex: 0 0 28px; border-radius: 50%; font-size: 14px; font-weight: 600; border: none; box-sizing: border-box; }

.x8-last-draw .x8-ld-ball { flex-direction: row; gap: 4px; align-items: center; flex-shrink: 0; }
.x8-last-draw .x8-ld-ball em { font-size: 13px; color: #fff; }
.x8-last-draw-plus { color: rgba(255, 255, 255, .5); font-size: 11px; font-weight: 700; margin: 0 1px; }





body { --x8-gutter: max(0px, calc(100vw - var(--x8-page-w))); }
.x8-modal-mask { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(10, 20, 45, .48); display: flex; align-items: center; justify-content: center; z-index: 9999;
  box-sizing: border-box; padding-right: var(--x8-gutter); }



.layui-layer:not(.layui-layer-tips) { margin-left: calc(var(--x8-gutter) / -2); }
.x8-modal { width: 340px; background: #fff; border-radius: 12px; padding: 22px 24px; box-shadow: 0 20px 50px rgba(6, 15, 42, .3); }
.x8-modal-title { font-size: 17px; font-weight: 700; margin-bottom: 16px; color: #2c3e50; }
.x8-modal-body { font-size: 14px; line-height: 1.6; margin-bottom: 18px; }
.x8-modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; }
.x8-modal-foot .x8-btn { width: auto; padding: 7px 18px; }

.x8-toast { position: fixed; top: 70px; left: calc(50% - var(--x8-gutter) / 2); transform: translateX(-50%) translateY(-12px); background: rgba(20, 30, 55, .9); color: #fff; padding: 9px 20px; border-radius: 6px; font-size: 14px; z-index: 10000; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.x8-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.x8-toast-error, .x8-toast-warn { background: rgba(231, 76, 60, .94); }

.x8-toast-card { position: fixed; top: 200px; left: calc(50% - var(--x8-gutter) / 2); transform: translateX(-50%); width: 140px; height: 154px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #fff; border-radius: 4px; box-shadow: 0 2px 10px rgba(34, 34, 34, .2);
  z-index: 10000; opacity: 0; pointer-events: none; transition: opacity .2s; }
.x8-toast-card.show { opacity: 1; }
.x8-toast-card i { display: block; width: 86px; height: 86px; }
.x8-toast-card svg { width: 100%; height: 100%; }
.x8-toast-card span { margin-top: 2px; font-size: 13px; font-weight: 600; line-height: 24px; color: var(--x8-headink, #111626); }
.x8-toast-card.x8-toast-success i { color: var(--x8-ok, #1fc26b); }
.x8-toast-card.x8-toast-fail i { color: #f82525; }


.x8-cell-combo { background: rgba(var(--main-color-rgb, 10, 169, 255), .05); border-style: dashed; }
.x8-combo-modal { width: 440px; max-width: 94vw; }
.x8-combo-sub { display: flex; justify-content: space-between; font-size: 13px; color: #8a93a6; margin-bottom: 12px; }
.x8-combo-odds { color: var(--x8-main-ink); font-weight: 600; }
.x8-combo-grid { display: grid; gap: 6px; margin-bottom: 10px; max-height: 52vh; overflow-y: auto; }
.x8-combo-zodiac { grid-template-columns: repeat(6, 1fr); }
.x8-combo-tail { grid-template-columns: repeat(5, 1fr); }
.x8-combo-number { grid-template-columns: repeat(7, 1fr); }
.x8-combo-cell { display: flex; align-items: center; justify-content: center; height: 38px; border: 1px solid #e0e5ee; border-radius: 6px; font-size: 14px; font-weight: 600; user-select: none; transition: transform .12s; cursor: pointer; }
.x8-combo-cell:hover { border-color: var(--main-color, #0aa9ff); }
.x8-combo-cell.picked { background: var(--main-color, #0aa9ff); border-color: var(--main-color, #0aa9ff); color: #fff; }
.x8-combo-cell.mute { opacity: .35; cursor: not-allowed; }
.x8-combo-hint { text-align: center; font-size: 13px; color: #8a93a6; margin-bottom: 8px; }









body {
  --x8-dlg-grad: linear-gradient(#35a2ff, #0e76e1);
  --x8-dlg-line: #d6d6d6;
  --x8-dlg-input: #c5cad5;
  --x8-dlg-head: #f3f5f8;
}
@supports (color: color-mix(in srgb, red, blue)) {
  body {
    --x8-dlg-grad: linear-gradient(180deg,
        color-mix(in srgb, var(--main-color, #0aa9ff) 70%, #fff) 1%,
        color-mix(in srgb, var(--main-color, #0aa9ff) 62%, #000) 99%);
    --x8-dlg-line: color-mix(in srgb, var(--main-color, #0aa9ff) 34%, #fff);
    --x8-dlg-input: color-mix(in srgb, var(--main-color, #0aa9ff) 68%, #fff);
    --x8-dlg-head: color-mix(in srgb, var(--main-color, #0aa9ff) 10%, #fff);
  }
}



.x8-panel { width: 860px; max-width: 94vw; max-height: 86vh; background: #fff; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .5); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 50px rgba(6, 15, 42, .3); }
.x8-panel-hd { position: relative; height: 40px; padding: 0; flex: none; text-align: center; background: var(--x8-dlg-grad); }
.x8-panel-title { display: block; height: 40px; line-height: 40px; font-size: 13px; font-weight: 600; color: #fff; }
.x8-panel-close { position: absolute; top: 10px; right: 20px; border: none; background: none; font-size: 20px; line-height: 1; color: #fff; cursor: pointer; }
.x8-panel-body { padding: 16px 18px; overflow-y: auto; }
.x8-panel-inner { margin-top: 6px; }

.x8-tabbar { display: flex; gap: 6px; margin-bottom: 12px; }
.x8-tabbtn { border: 1px solid #dde2ec; background: #fff; color: #566079; padding: 6px 16px; border-radius: 6px; font-size: 14px; cursor: pointer; }
.x8-tabbtn.active { background: var(--main-color, #0aa9ff); border-color: var(--main-color, #0aa9ff); color: #fff; }
.x8-filter-bar { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.x8-inline { width: auto; display: inline-block; height: 34px; }



.x8-table-wrap { background: #fff; overflow: hidden; }
.x8-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.x8-table th, .x8-table td { padding: 6px 10px; text-align: center; white-space: nowrap; border: 0.8px solid #c2ccda; }
.x8-table th { background: #ebecf1; color: #111626; font-weight: 600; }
.x8-table td { color: #414654; }

.x8-table th.x8-td-num, .x8-table td.x8-td-num { text-align: right; font-variant-numeric: tabular-nums; }

.x8-table tbody tr:hover { background: rgba(var(--main-color-rgb, 10, 169, 255), .07); }
.x8-td-empty { text-align: center; color: #aab2c2; padding: 34px 0; }
.x8-badge { padding: 1px 8px; border-radius: 3px; color: #fff; font-size: 12px; }
.x8-badge-orange { background: #e67e22; }
.x8-badge-gray { background: #95a5a6; }
.x8-badge-red { background: #e74c3c; }
.x8-win { color: #27ae60; font-weight: 600; }
.x8-lose { color: #e74c3c; font-weight: 600; }
.x8-muted { color: #aab2c2; }


.x8-pager { display: flex; align-items: center; height: 45px; justify-content: flex-end; font-size: 13px; font-variant-numeric: tabular-nums; }
.x8-pager-info { color: #9aa4b6; margin-right: auto; }
.x8-pgbtn { min-width: 49px; height: 28px; margin: 0 5px; padding: 0 4px; border: 0.8px solid #e2e4ea; border-radius: 4px;
  background: #fff; color: #656b7b; font-size: 13px; line-height: 28px; cursor: pointer; }
.x8-pgbtn:hover:not(:disabled) { border-color: var(--main-color, #0aa9ff); color: var(--main-color, #0aa9ff); }
.x8-pgbtn:disabled { color: #ccd3df; cursor: not-allowed; }
.x8-pager-cur { color: var(--x8-main-ink); font-weight: 600; }

.x8-cards { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.x8-card { flex: 1; min-width: 100px; background: linear-gradient(180deg, rgba(var(--main-color-rgb, 10, 169, 255), .08), rgba(var(--main-color-rgb, 10, 169, 255), .03)); border: 1px solid rgba(var(--main-color-rgb, 10, 169, 255), .12); border-radius: 8px; padding: 13px; text-align: center; }
.x8-card-v { font-size: 19px; font-weight: 700; color: var(--x8-main-ink); }
.x8-card-t { font-size: 12px; color: #8a93a6; margin-top: 4px; }
.x8-sub-title { font-size: 14px; font-weight: 700; color: #2c3e50; margin: 16px 0 8px; display: flex; align-items: center; gap: 7px; }
.x8-sub-title::before { content: ""; width: 3px; height: 14px; border-radius: 2px; background: var(--main-color, #0aa9ff); }

.x8-draw-block { padding: 12px 0; border-bottom: 1px solid #f0f3f8; }
.x8-draw-cz { font-size: 14px; font-weight: 700; color: #2c3e50; margin-bottom: 8px; }
.x8-draw-balls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: #9aa4b6; font-size: 13px; }
.x8-draw-issue { color: #8a93a6; margin-right: 8px; }
.x8-ball { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #eef0f4; border: 1px solid #dcdfe3; font-size: 13px; font-weight: 600; color: #333; }
.x8-ball-special { background: #f9e0b3; border-color: #e6c07a; color: #b9770e; }
.x8-ball-plus { color: #bbb; font-weight: 700; }



.x8-hist-bar { display: flex; align-items: center; gap: 6px; height: 40px; }
.x8-hist-label { flex: none; white-space: nowrap; font-size: 13px; color: #414654; }
.x8-hist-sel { flex: none; width: 120px; height: 24px; padding: 0 6px; font-size: 13px;
  border: 0.8px solid #c2ccda; border-radius: 4px; background: #fff; }




.x8-hist-btn { flex: none; width: 70px; height: 24px; margin-left: 4px; padding: 0; font-size: 12px; border-radius: 3px;
  background: linear-gradient(180deg, rgba(var(--main-color-rgb, 10, 169, 255), .78), var(--main-color, #0aa9ff));
  border: 0.8px solid var(--main-color, #0aa9ff); color: #fff; }
.x8-hist-btn + .x8-hist-btn { width: 90px; }

.x8-hv-red { color: #f82525; }
.x8-hv-blue { color: #012cf9; }



.x8-cztabs { display: flex; gap: 5px; padding: 12px 0 13px; }
.x8-cztab { flex: none; min-width: 94px; height: 26px; padding: 0 8px; font-size: 12px; color: #414654; cursor: pointer;
  border: 0.8px solid #c2ccda; border-radius: 0; background: linear-gradient(180deg, #fff, #e2e4ea 98%); }
.x8-cztab.active { color: #fff;
  background: linear-gradient(180deg, rgba(var(--main-color-rgb, 10, 169, 255), .72), var(--main-color, #0aa9ff));
  border-color: var(--main-color, #0aa9ff); }

.x8-notice-list { height: 400px; overflow-y: auto; }
.x8-notice-none { height: 100%; display: flex; align-items: center; justify-content: center; color: #606266; font-size: 14px; }





@media (min-width: 1265px) {
  .x8-view-wide { margin-right: calc(var(--x8-page-w) - 100vw + 8px); }
}
.x8-rule-body { font-size: 13px; line-height: 1.45; color: #111626; }
.x8-rule-body p { margin: 0; }
.x8-rule-title { font-size: 14px; font-weight: 700; color: #111626; margin: 0 0 6px; }
.x8-rule-sec + .x8-rule-sec { margin-top: 14px; }


.x8-credit-cols { display: flex; gap: 4px; align-items: flex-start; }
.x8-credit-cols > * { flex: 1 1 0; min-width: 0; }
.x8-credit-cols .x8-table th, .x8-credit-cols .x8-table td { padding: 6px 4px; }
.x8-draw-pair { display: inline-flex; align-items: center; gap: 3px; }
.x8-draw-zodiac { font-style: normal; font-size: 13px; color: #414654; }
.x8-hist-table .x8-draw-balls { flex-wrap: nowrap; justify-content: center; gap: 10px; }
.x8-hist-table .x8-ball { width: 24px; height: 24px; border: none; font-size: 13px; font-weight: 600; color: #fff; }
.x8-hist-table .x8-ball-red { background: #f82525; }
.x8-hist-table .x8-ball-blue { background: #028aff; }
.x8-hist-table .x8-ball-green { background: #1fc26b; }


.x8-hist-table th, .x8-hist-table td { padding: 3px 4px; }
.x8-hist-table td:nth-child(n+7) { min-width: 27px; }
.x8-hist-table td:nth-child(12) { min-width: 28px; }


.x8-lz-row { margin-bottom: 18px; }
.x8-lz-hd { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 700; color: #2c3e50; margin-bottom: 8px; }
.x8-lz-streak { font-size: 13px; color: #c0392b; }
.x8-lz-trail { display: flex; flex-wrap: wrap; gap: 6px; }
.x8-lz-chip { min-width: 28px; height: 28px; padding: 0 7px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: #fff; }

.x8-lz-big { background: #c0392b; }
.x8-lz-small { background: #2980b9; }
.x8-lz-odd { background: #e67e22; }
.x8-lz-even { background: #16a085; }
.x8-lz-tie { background: #7f8c8d; }
.x8-lz-red { background: #e74c3c; }
.x8-lz-blue { background: #2980b9; }
.x8-lz-green { background: #27ae60; }

.x8-lz-rank { margin-top: 22px; }
.x8-lz-ranklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 18px; }
.x8-lz-rankrow { display: flex; align-items: center; justify-content: space-between; padding: 5px 10px; background: #fafbfc; border-radius: 6px; font-size: 13px; }
.x8-lz-rankname { color: #2c3e50; }
.x8-lz-rankn { color: #c0392b; font-weight: 600; white-space: nowrap; margin-left: 10px; }
.x8-ball-red { background: #e74c3c; border-color: #c0392b; color: #fff; }
.x8-ball-blue { background: #2980b9; border-color: #21618c; color: #fff; }
.x8-ball-green { background: #27ae60; border-color: #1e8449; color: #fff; }


.x8-linkbtn { border: none; background: none; color: var(--x8-main-ink); font-size: 13px; text-decoration: underline; padding: 0; cursor: pointer; }

.x8-orderno { color: #414654; font-size: 13px; }
.x8-kv-list { display: flex; flex-wrap: wrap; background: #fafbfd; border: 1px solid #eef1f6; border-radius: 8px; overflow: hidden; }
.x8-kv { display: flex; width: 50%; padding: 9px 12px; border-bottom: 1px solid #f0f3f8; font-size: 13px; box-sizing: border-box; }
.x8-kv-k { width: 66px; color: #8a93a6; flex: none; }
.x8-kv-v { color: #2c3e50; font-weight: 600; word-break: break-all; }
.x8-msg-item { padding: 12px 4px; border-bottom: 1px solid #f0f3f8; }
.x8-msg-item.unread { cursor: pointer; }
.x8-msg-hd { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }


.x8-msg-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: #566079;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.x8-msg-del { flex: none; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px;
  background: transparent; color: #c2c8d4; font-size: 16px; line-height: 18px; cursor: pointer; }
.x8-msg-del:hover { background: rgba(229, 77, 66, .1); color: #e54d42; }
.x8-msg-body { font-size: 13px; color: #414654; line-height: 1.6; white-space: pre-wrap; }
.x8-msg-time { font-size: 12px; color: #98a1b3; margin-top: 5px; }
.x8-msg-item.unread .x8-msg-title { font-weight: 700; color: #2c3e50; }
.x8-msg-item.unread .x8-msg-body { color: #2c3e50; }
.x8-msg-item.unread .x8-msg-time { color: #8a93a6; }
.x8-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--main-color, #0aa9ff); flex: none; }
.x8-check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #64708a; }



.x8-view { padding: 8px 4px 12px; background: #fff; }


.x8-view-title { display: flex; align-items: center; justify-content: space-between;
  height: 30px; line-height: 30px; margin: -8px -4px 8px; padding: 0 4px;
  font-size: 13px; font-weight: 600; color: var(--x8-barink, #3f6ca7); background: var(--x8-bargrad, linear-gradient(0deg, #dae8fc, #fff)); }


.x8-play.x8-play-rows { background: #fff; border: 1px solid #e9edf4; border-radius: 6px; padding: 0; overflow: hidden; }
.x8-play.x8-play-rows.x8-play-inline { background: #fff; border: 1px solid #e9edf4; }



.x8-rows-head { height: 25px; line-height: 25px; text-align: center; font-size: 13px; font-weight: 600; color: var(--x8-headink, #111626); background: var(--x8-headbg, #ebecf1); border: 0.8px solid var(--x8-line, #c2ccda); border-bottom: none; }

.x8-rows { display: flex; flex-direction: column; border-top: 0.8px solid var(--x8-line, #c2ccda); }

.x8-row { display: flex; align-items: stretch; height: 30px; border: 0.8px solid var(--x8-line, #c2ccda); border-top: none; cursor: pointer; }
.x8-row.disabled { background: var(--x8-cellbg, #f6f7fb); }
.x8-row:hover { background: #f7f9fc; }
.x8-row.selected { background: rgba(var(--main-color-rgb, 10, 169, 255), .1); }
.x8-row.disabled { pointer-events: none; }

.x8-row-name { flex: none; width: 66px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 400; background: var(--x8-namebg, #edf4fe); color: var(--x8-nameink, #414654); }

.x8-row-odds { flex: none; width: 68px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #f82525; font-family: var(--x8-odds); border-right: 0.8px solid var(--x8-line, #c2ccda); }

.x8-row-nums { flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; padding: 0 5px 0 20px; }
.x8-row-ball { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 14px; font-weight: 600; color: #fff; }

.x8-nb-red { background: #f82525; }
.x8-nb-blue { background: #028aff; }
.x8-nb-green { background: #1fc26b; }
.x8-nb-na { background: #98a2b3; }
.x8-row .x8-cell-amt { box-sizing: border-box; flex: none; width: 59px; height: 23px; align-self: center; margin: 0 5px; border: 0.8px solid var(--x8-line, #c2ccda); border-radius: 4px; background: #fff; }
.x8-row .x8-cell-amt:disabled { background: var(--x8-inpbg, #c2ccda); border-color: var(--x8-inpline, #bfc9d7); }
.x8-row-name.x8-ink-red { color: #f82525; }
.x8-row-name.x8-ink-blue { color: #028aff; }
.x8-row-name.x8-ink-green { color: #1fc26b; }

.x8-order-item { color: var(--special-color, #0f81ff); font-weight: 400; }
.x8-order-meta i { font-style: normal; color: #111626; }

.x8-order-back-row { display: flex; justify-content: center; padding: 5px 0; }
.x8-order-back { width: 58px; height: 20px; padding: 0; border: 0.8px solid rgba(0, 0, 0, .12); border-radius: 2px; box-sizing: border-box;
  background: var(--x8-btn-pri, #0e76e1); color: var(--x8-btn-pri-ink, #fff); font-size: 14px; font-weight: 500; line-height: 14px; cursor: pointer; }



.x8-rows-2 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(6, auto); grid-auto-flow: column; column-gap: 5px; }

.x8-cellstack { display: flex; flex-direction: column; gap: 1px; line-height: 1.5; }

.x8-cellstack i { font-style: normal; font-size: 13px; color: #414654; }
.x8-cellstack i.x8-issue { color: #1fc26b; font-weight: 400; }
.x8-cellstack i.x8-item { color: var(--special-color, #0f81ff); overflow: hidden; text-overflow: ellipsis; }
.x8-odds-red { color: #f82525; font-weight: 400; }
.x8-listsum { display: flex; gap: 40px; justify-content: center; padding: 9px 12px; border: 1px solid #e6eaf1; border-top: none;
  background: #f5f7fb; font-size: 13px; color: #40495a; }


.x8-combo-board { padding: 0; }

.x8-combo-items { display: flex; flex-wrap: wrap; border: 1px solid var(--x8-line, #c2ccda); border-bottom: none; }


.x8-combo-item { flex: 1; min-width: 96px; height: 32px; border: none; border-right: 1px solid #c2ccda;
  background: linear-gradient(180deg, #fff, #e2e4ea 98%); color: #111626; font-size: 14px; cursor: pointer; }
.x8-combo-item:last-child { border-right: none; }
.x8-combo-item.active { background: linear-gradient(180deg, #fff, #c1dbfe 99%); color: #0f81ff; font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--main-color, #0aa9ff); }




.x8-combo-modes { display: flex; margin-top: 6px; border: 0.8px solid var(--x8-line, #c2ccda); }
.x8-combo-mode { flex: 1; height: 26px; border: none; border-right: 0.8px solid var(--x8-line, #c2ccda); background: var(--x8-pos-off, linear-gradient(#fff, #e2e4ea 98%)); color: var(--x8-pos-off-ink, #414654); font-size: 14px; font-weight: 500; cursor: pointer; }
.x8-combo-mode:last-child { border-right: none; }
.x8-combo-mode.active { background: var(--x8-pos-on, linear-gradient(#fff, #c1dbfe 99%)); color: var(--x8-pos-on-ink, #0f81ff); }
.x8-combo-info { display: flex; align-items: center; gap: 14px; padding: 6px 12px; background: #eef1f6; border: 1px solid #c2ccda; border-bottom: none; font-size: 13px; }
.x8-combo-need { color: #414654; }
.x8-combo-info .x8-combo-odds { color: #f82525; font-weight: 700; }
.x8-combo-cnt { color: #3f6ca7; margin-left: auto; }
.x8-combo-pad { display: grid; grid-template-columns: repeat(10, 1fr); border: 1px solid var(--x8-line, #c2ccda); border-right: none; }
.x8-combo-pad-zodiac { grid-template-columns: repeat(6, 1fr); }
.x8-combo-pad-tail { grid-template-columns: repeat(10, 1fr); }
.x8-combo-cell { height: 34px; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--x8-line, #c2ccda); border-bottom: 1px solid var(--x8-line, #c2ccda); font-size: 14px; font-weight: 600; cursor: pointer; background: #fff; color: #40495a; user-select: none; }


.x8-combo-cell.picked,
.x8-combo-cell.picked-dan,
.x8-combo-cell.picked-tuo { background: var(--x8-pick, #fbbb55); color: var(--x8-pick-ink, #111626); }
.x8-combo-cell.picked .x8-combo-ballbox,
.x8-combo-cell.picked-dan .x8-combo-ballbox,
.x8-combo-cell.picked-tuo .x8-combo-ballbox { background: var(--x8-pick, #fbbb55); }
.x8-combo-cell-odds .x8-combo-cellodds { position: relative; }
.x8-combo-dan { box-sizing: border-box; display: none; position: absolute; top: 0; right: 0; z-index: 2; width: 20px; height: 20px;
  border-radius: 0 0 0 20px; background: var(--x8-pos-on-ink, #0f81ff); color: #fff; font-size: 12px; line-height: 20px; text-align: right; padding-right: 2px; }
.x8-combo-cell.picked-dan .x8-combo-dan { display: block; }
.x8-combo-cell.disabled { background: var(--x8-cellbg, #f6f7fb); cursor: not-allowed; }
.x8-combo-na { padding: 40px 0; text-align: center; color: #98a2b3; font-size: 14px; }


.x8-submit-mask { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(10, 20, 45, .32); display: flex; align-items: center; justify-content: center; z-index: 10001; }
.x8-submit-box { min-width: 120px; padding: 22px 30px; background: rgba(20, 30, 55, .92); border-radius: 10px; display: flex; flex-direction: column; align-items: center; gap: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, .3); }
.x8-spinner { width: 34px; height: 34px; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; border-radius: 50%; animation: x8-spin .7s linear infinite; }
.x8-submit-txt { color: #fff; font-size: 14px; letter-spacing: 1px; }
@keyframes x8-spin { to { transform: rotate(360deg); } }




.x8-gcols { display: grid; grid-template-columns: repeat(6, 1fr); column-gap: 5px; }
.x8-gcol { min-width: 0; display: flex; flex-direction: column; }
.x8-gcol .x8-rows-head { border-bottom: none; }
.x8-gcol-body { display: flex; flex-direction: column; border-right: 1px solid var(--x8-line, #c2ccda); border-bottom: 1px solid var(--x8-line, #c2ccda); }

.x8-gcol-body .x8-cell-inline .x8-cell-slot { width: 30px; }
.x8-gcol-body .x8-cell-inline .x8-cell-name { margin: 0; font-weight: 700; }
.x8-gcol-body .x8-cell-inline .x8-cell-odds { width: 49px; min-width: 49px; }
.x8-gcol-body .x8-cell-inline .x8-cell-amt { margin: 0 2px; }


.x8-rep-week + .x8-rep-week { margin-top: 10px; }
.x8-rep-date { display: inline-flex; gap: 10px; }
.x8-rep-date i { font-style: normal; color: #414654; }

a.x8-rep-bet { color: var(--special-color, #1f6fd0); cursor: pointer; text-decoration: none; }
a.x8-rep-bet:hover { text-decoration: underline; }
.x8-rep-bet { color: #1f6fd0; }

.x8-rep-crumb { padding: 0 2px 6px; font-size: 13px; color: #414654; }
.x8-rep-back { border: 0.8px solid #c2ccda; border-radius: 3px; padding: 0 10px; height: 22px; line-height: 20px;
  background: linear-gradient(180deg, #fff, #e2e4ea 99%); font-size: 12px; color: #414654; cursor: pointer; }
.x8-rep-total td { font-weight: 700; background: #f6f7fa; }

.x8-rep-total-plain td { background: none; font-weight: 600; }
.x8-rep-total-plain td:not(.x8-td-num) { text-align: center; }






.x8-combo-pad-number { grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(10, auto); grid-auto-flow: column; column-gap: 5px; row-gap: 0; border: none; }
.x8-combo-pad-number .x8-combo-cell { box-sizing: border-box; height: auto; align-items: stretch; border: 0.8px solid var(--x8-line, #c2ccda); border-top: none; border-radius: 0; }
.x8-combo-pad-number .x8-combo-cell:nth-child(10n+1) { border-top: 0.8px solid var(--x8-line, #c2ccda); }
.x8-combo-cell-odds { height: auto; justify-content: flex-start; padding: 0; gap: 0; font-weight: 400; }
.x8-combo-ballbox { flex: none; width: 40px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: var(--x8-namebg, #edf4fe); }
.x8-combo-cell-odds .x8-combo-cellodds { flex: 1; align-self: stretch; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #f82525; font-weight: 700; font-family: var(--x8-odds); border-left: 0.8px solid var(--x8-line, #c2ccda); }
.x8-combo-cell-odds.picked { background: var(--x8-pick, #fbbb55); }
.x8-combo-cell-odds.picked .x8-combo-cellodds { color: var(--x8-pick-ink, #111626); }

.x8-combo-cellodds-t { flex-direction: column; line-height: 1.4; }
.x8-combo-cellodds-t .x8-combo-tierodds { font-style: normal; display: block; }

.x8-combo-ball { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 14px; font-weight: 600; color: #fff; }




.x8-chzm-box { display: flex; margin-right: 30px; }
.x8-chzm-box:empty { display: none; margin-right: 0; }
.x8-chzm { width: 60px; height: 24px; padding: 0; font-size: 13px; font-weight: 600; cursor: pointer;
  border: 0.8px solid var(--x8-btnline, #c2ccda); background: var(--x8-btn-off, linear-gradient(#fff, #e2e4ea 99%)); color: var(--x8-btn-off-ink, #3f6ca7); }

.x8-chzm-l { border-radius: 4px 0 0 4px; }
.x8-chzm-r { border-left: none; border-radius: 0 4px 4px 0; }
.x8-chzm.active { border-color: var(--x8-btnline-on, #c2ccda); background: var(--x8-btn-on, linear-gradient(#fff 20%, #8dbfff)); color: var(--x8-btn-on-ink, #0f81ff); }


.x8-fam-label { font-size: 13px; font-weight: 600; color: var(--x8-barink, #3f6ca7); white-space: nowrap; }

.x8-combo-headrow { display: grid; grid-template-columns: repeat(5, 1fr); column-gap: 5px; margin-bottom: 0; }
.x8-combo-headcell { box-sizing: border-box; display: flex; height: 25px; background: var(--x8-headbg, #ebecf1); border-left: 0.8px solid var(--x8-line, #c2ccda); border-right: 0.8px solid var(--x8-line, #c2ccda); font-size: 13px; color: var(--x8-headink, #111626); }
.x8-combo-headnum { flex: none; width: 40px; line-height: 25px; text-align: center; }
.x8-combo-headpick { flex: 1; line-height: 25px; text-align: center; border-left: 0.8px solid #c2ccda; }


.x8-combo-headrow-rows { grid-template-columns: 1fr 1fr; column-gap: 5px; margin-bottom: 0; }
.x8-combo-headrow-rows .x8-combo-headcell { box-sizing: border-box; align-items: center; border: 0.8px solid var(--x8-line, #c2ccda); font-weight: 600; }
.x8-combo-headkind, .x8-combo-headnums, .x8-combo-headodds { align-self: stretch; display: inline-flex; align-items: center; justify-content: center; }
.x8-combo-headkind { flex: none; width: 66px; border-right: 0.8px solid var(--x8-line, #c2ccda); }
.x8-combo-headnums { flex: 1; min-width: 0; border-right: 0.8px solid var(--x8-line, #c2ccda); }
.x8-combo-headodds { flex: none; width: 68px; }





.layui-dropdown.x8-userdrop {
  min-width: 102px;                 
  border-radius: 0 0 2px 2px;
  box-shadow: 0 2px 10px rgba(34, 34, 34, .2);
}
.layui-dropdown.x8-userdrop .layui-menu li { padding: 0; }
.layui-dropdown.x8-userdrop .layui-menu-body-title {
  height: 30px; line-height: 18px; padding: 6px 15px;
  text-align: center;               
  font-size: 13px; color: var(--x8-barink, #6c3818);
  box-sizing: border-box;
}

.x8-qcell-empty { background: #fff; cursor: default; pointer-events: none; }



.x8-rows-cols { display: flex; align-items: center; height: 25px; background: var(--x8-headbg, #ebecf1); border: 0.8px solid var(--x8-line, #c2ccda); border-bottom: none; font-size: 13px; color: var(--x8-headink, #111626); }
.x8-rc-name { flex: 1; min-width: 0; text-align: center; }
.x8-rc-odds { flex: none; width: 68px; text-align: center; border-left: 0.8px solid #c2ccda; }
.x8-rc-amt { flex: none; width: 69px; text-align: center; border-left: 0.8px solid #c2ccda; }

.x8-play-rows .x8-row .x8-row-nums:empty { display: none; }


.x8-cols2 { display: flex; gap: 5px; align-items: flex-start; }
.x8-cols2 > * { flex: 1 1 0; min-width: 0; margin-bottom: 0; }
.x8-rows-count .x8-row-name { flex: none; width: 100px; }
.x8-rows-count .x8-row-odds { flex: none; width: 130px; }
.x8-rows-count .x8-row .x8-cell-amt { flex: 1; min-width: 0; width: auto; }
.x8-rows-count .x8-rc-name { flex: none; width: 100px; }
.x8-rows-cols .x8-rc-odds { width: 130px; }
.x8-rows-cols .x8-rc-amt { flex: 1; min-width: 0; width: auto; }





.x8-combo-pad-rows { grid-template-columns: 1fr 1fr; grid-auto-flow: column; column-gap: 5px; row-gap: 0; border: none; }
.x8-combo-pad-rows .x8-combo-cell { box-sizing: border-box; height: 31px; justify-content: flex-start; padding: 0; gap: 0;
  background: #f6f7fb; border: 0.8px solid var(--x8-line, #c2ccda); border-top: none; }
.x8-combo-pad-rows .x8-combo-num { flex: none; align-self: stretch; width: 66px; display: inline-flex; align-items: center; justify-content: center;
  background: #edf4fe; font-size: 13px; font-weight: 400; color: #414654; }
.x8-combo-nums { flex: 1; min-width: 0; align-self: stretch; display: flex; align-items: center; gap: 10px; padding: 0 5px 0 20px;
  border-left: 0.8px solid var(--x8-line, #c2ccda); overflow: hidden; }
.x8-combo-mball { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 14px; font-weight: 600; color: #fff; }
.x8-combo-pad-rows .x8-combo-cellodds { flex: none; align-self: stretch; width: 68px; display: inline-flex; align-items: center; justify-content: center;
  border-left: 0.8px solid var(--x8-line, #c2ccda); }
.x8-combo-pad-rows .x8-combo-cell.picked,
.x8-combo-pad-rows .x8-combo-cell.picked-dan,
.x8-combo-pad-rows .x8-combo-cell.picked-tuo { background: var(--x8-pick, #fbbb55); }
.x8-combo-pad-rows .x8-combo-cell.picked .x8-combo-num,
.x8-combo-pad-rows .x8-combo-cell.picked .x8-combo-cellodds { color: var(--x8-pick-ink, #111626); }



.x8-textbet-label { font-size: 13px; color: #414654; margin-bottom: 6px; }
.x8-textbet { width: 100%; box-sizing: border-box; height: auto; min-height: 200px; padding: 8px 10px;
  font-size: 13px; line-height: 1.6; resize: vertical; }
.x8-textbet-tip { margin-top: 8px; font-size: 12px; line-height: 1.7; color: #8a93a6; }
.x8-textbet-err { min-height: 18px; margin-top: 4px; font-size: 12px; color: #f82525; }
.x8-textbet-ops { display: flex; gap: 8px; margin-top: 6px; }
.x8-textbet-ops .x8-btn { flex: 1; height: 30px; padding: 0; font-size: 13px; border-radius: 3px; }




.x8-betconfirm .x8-panel-body { padding: 10px; background: var(--x8-dlg-foot, #edf3ec); }
.x8-bc-table { border: 0.8px solid var(--x8-line); background: #fff; }
.x8-bc-head, .x8-bc-row, .x8-bc-sum, .x8-bc-bottom { display: flex; align-items: center; min-height: 30px; font-size: 13px; }
.x8-bc-head { height: 30px; }
.x8-bc-head > span { height: 30px; background: var(--x8-headbg); color: var(--x8-headink); font-size: 13px; }
.x8-bc-head > span, .x8-bc-row > span, .x8-bc-sum > span { border-right: 0.8px solid var(--x8-line); }
.x8-bc-head > span:last-child, .x8-bc-row > span:last-child, .x8-bc-sum > span:last-child { border-right: none; }
.x8-bc-row, .x8-bc-sum { border-top: 0.8px solid var(--x8-line); }

.x8-bc-sum { color: #414654; }

.x8-bc-c1 { flex: none; width: 230px; padding: 0 5px; text-align: center; overflow-wrap: anywhere; }
.x8-bc-c2 { flex: none; width: 130px; text-align: center; }
.x8-bc-row .x8-bc-c2, .x8-bc-sum .x8-bc-c2 { color: #f82525; }

.x8-bc-sum .x8-bc-c2 { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
.x8-bc-odds { font-style: normal; margin: 0 3px; }

.x8-bc-c2.x8-bc-odds-new, .x8-bc-odds.x8-bc-odds-new { color: var(--x8-main, #c2264b) !important; font-weight: 700; }

.x8-bc-sub .x8-bc-c2 { color: #606266; }

.x8-bc-subs { max-height: 300px; overflow-y: auto; }



.x8-bc-head > span, .x8-bc-row > span, .x8-bc-sum > span, .x8-bc-bottom > span { box-sizing: border-box; }



.x8-bc-c3, .x8-bc-c4 { display: flex; align-items: center; justify-content: center; }
.x8-bc-c3 { flex: none; width: 150px; }
.x8-bc-c4 { flex: 1; min-width: 0; }
.x8-bc-amt { box-sizing: border-box; width: 140px; height: 22px; padding: 0 15px; font-size: 13px; text-align: left;
  border: 0.8px solid var(--x8-inpline); border-radius: 4px; }

.x8-bc-amtro { box-sizing: border-box; width: 139px; height: 22px; line-height: 22px; padding-left: 15px;
  background: var(--x8-inpbg); border: 0.8px solid var(--x8-line); color: #606266; font-size: 13px; }
.x8-bc-bottom { border-top: 0.8px solid var(--x8-line); background: var(--x8-headbg); color: #414654; font-size: 14px; }
.x8-bc-cnt { flex: none; width: 230px; text-align: center; }
.x8-bc-total { flex: 1; text-align: center; }
.x8-bc-latest { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 14px; color: #606266; cursor: pointer; }
.x8-bc-ops { display: flex; justify-content: center; gap: 12px; margin-top: 14px; }

.x8-bc-ops .x8-btn { height: 30px; padding: 0 5px; font-size: 13px; border-radius: 2px; }
.x8-bc-ops .x8-btn-plain { width: 63px; padding: 0; }


.x8-bc-ops .x8-btn-main {
  background: var(--main-color, #0aa9ff);
  background: var(--x8-dlg-grad, var(--main-color, #0aa9ff));
  border: 0.8px solid var(--main-color, #0aa9ff); color: #fff;
}
.x8-bc-ops .x8-btn-plain { background: linear-gradient(180deg, #fff, #e2e4ea 99%); border: 0.8px solid #c5cad5; color: #414654; }


.x8-cancelask .x8-panel-body { padding: 10px; background: var(--x8-dlg-foot, #edf3ec); }
.x8-ask-line { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px; background: #fff;
  font-size: 14px; color: #606266; }
.x8-ask-icon { flex: none; width: 18px; height: 18px; border-radius: 50%; background: #e6a23c; color: #fff;
  font-style: normal; font-size: 13px; font-weight: 700; line-height: 18px; text-align: center; }
.x8-cancelask .x8-bc-ops { margin: 0; padding: 11px 0; background: var(--x8-dlg-foot, #edf3ec); }

.x8-cancelask .x8-bc-ops .x8-btn { width: 63px; padding: 0; }




.x8-order-table { table-layout: fixed; }

.x8-rep-orders { table-layout: fixed; }
.x8-order-table th, .x8-order-table td { box-sizing: border-box; }
.x8-order-table th { height: 30px; padding: 0 4px; }

.x8-order-table td { height: 34.8px; padding: 0; text-align: center; }
.x8-order-table .x8-cellstack { gap: 0; line-height: 17px; }

.x8-view-tabs { display: flex; align-items: center; gap: 5px; }
.x8-view-tab { box-sizing: border-box; flex: none; min-width: 80px; height: 22px; line-height: normal; padding: 0 8px;
  font-size: 13px; font-weight: 600; color: #414654; cursor: pointer;
  border: 0.8px solid #c2ccda; border-radius: 0; background: linear-gradient(180deg, #fff, #e2e4ea 98%); }
.x8-view-tab.active { color: #fff; cursor: default;
  background: linear-gradient(180deg, rgba(var(--main-color-rgb, 10, 169, 255), .72), var(--main-color, #0aa9ff));
  border-color: var(--main-color, #0aa9ff); }


.x8-order-table tr.x8-void td, .x8-order-table tr.x8-void td * { color: #98a2ae; }
.x8-order-table tr.x8-void td {
  background-image: linear-gradient(transparent calc(50% - 0.5px), #c3cbd6 calc(50% - 0.5px), #c3cbd6 calc(50% + 0.5px), transparent calc(50% + 0.5px));
}
.x8-order-table tr.x8-void td .x8-void-at { color: #f82525; }

.x8-pgnum { min-width: 30px; height: 28px; margin: 0 5px; padding: 0 4px; border: 0.8px solid #e2e4ea; border-radius: 4px;
  background: #fff; font-size: 13px; line-height: 28px; color: #656b7b; cursor: pointer; }
.x8-pgnum.active { background: var(--main-color, #0aa9ff); border-color: var(--main-color, #0aa9ff); color: #fff; }



.x8-op-pop { position: fixed; left: calc(50% - var(--x8-gutter) / 2); top: 50%; transform: translate(-50%, -50%); z-index: 2009; box-sizing: border-box; width: 661.6px; padding: 5px;
  background: #fff; border: 0.8px solid #ebeef5; border-radius: 4px; box-shadow: 0 2px 10px rgba(17, 22, 38, .3);
  font-size: 14px; line-height: 20px; }
.x8-op-head { padding: 5px 28px 5px 3px; font-size: 14px; line-height: 20px; color: #111626; }

.x8-op-close { position: absolute; top: 6px; right: 6px; box-sizing: border-box; width: 22px; height: 22px; padding: 0;
  border: none; background: transparent; font-size: 20px; line-height: 20px; color: #8a95a1; cursor: pointer; }
.x8-op-close:hover { color: #f82525; }
.x8-op-nums { color: #012cf9; }
.x8-op-table { border: 0.8px solid var(--x8-line); }

.x8-op-body { max-height: 241px; overflow-y: auto; }


.x8-op-hd, .x8-op-row { display: flex; align-items: stretch; box-sizing: border-box; min-height: 23.8px; font-size: 14px; }
.x8-op-hd { background: var(--x8-headbg); color: var(--x8-headink); font-weight: 700; }
.x8-op-row { border-top: 0.8px solid var(--x8-line); color: #414654; }

.x8-op-hd span, .x8-op-row span { box-sizing: border-box; min-width: 0; display: flex; align-items: center;
  justify-content: center; text-align: center; border-right: 0.8px solid var(--x8-line); }

.x8-op-hd span:nth-child(1), .x8-op-row span:nth-child(1) { flex: 0 0 40px; }
.x8-op-hd span:nth-child(2), .x8-op-row span:nth-child(2) { flex: 0 0 238px; }
.x8-op-hd span:nth-child(3), .x8-op-row span:nth-child(3) { flex: 0 0 118px; }
.x8-op-hd span:nth-child(4), .x8-op-row span:nth-child(4) { flex: 0 0 88px; }
.x8-op-hd span:nth-child(5), .x8-op-row span:nth-child(5) { flex: 0 0 70px; }
.x8-op-hd span:last-child, .x8-op-row span:last-child { flex: 1; border-right: none; }
.x8-op-res { color: #f82525; }
.x8-op-foot { padding: 3px; font-size: 14px; font-weight: 700; color: #111626; }

.x8-op-cur { cursor: pointer; }





.x8-gs-box { padding: 20px 20px 30px; }
.x8-gs-table { box-sizing: border-box; width: 358px; margin: 0 auto; border: 0.8px solid var(--x8-dlg-line); }
.x8-gs-hd, .x8-gs-row { display: flex; align-items: center; }
.x8-gs-hd { height: 23px; color: #606266; font-size: 14px; font-weight: 700; background: var(--x8-dlg-head); }
.x8-gs-row { box-sizing: border-box; height: 43px; border-top: 0.8px solid var(--x8-dlg-line); }
.x8-gs-c1 { box-sizing: border-box; flex: none; width: 147px; text-align: center; border-right: 0.8px solid var(--x8-dlg-line); align-self: stretch;
  display: flex; align-items: center; justify-content: center; font-size: 14px; color: #606266; }
.x8-gs-row .x8-gs-c1 { font-weight: 700; }
.x8-gs-c2 { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; }
.x8-gs-amt { box-sizing: border-box; width: 80px; height: 32px; padding: 0 15px; font-size: 13px; text-align: left;
  color: #111626; border-radius: 4px; border: 0.8px solid var(--x8-dlg-input); }
.x8-gs-tip { margin-top: 10px; font-size: 14px; color: #f00; }
.x8-gs-ops { display: flex; justify-content: center; margin-top: 16px; }
.x8-gs-save { width: 100px; height: 32px; padding: 0; font-size: 12px; font-weight: 500; border-radius: 3px;
  background: var(--main-color, #0aa9ff);
  background: var(--x8-dlg-grad);
  border: 0.8px solid var(--main-color, #0aa9ff); color: #fff; }


.x8-play-inline .x8-grid-color .x8-cell-slot { width: 60px; }
.x8-play-inline .x8-grid-color .x8-cell-odds { width: 105px; min-width: 105px; }



.x8-play-inline .x8-grid-number,
.x8-play-inline .x8-grid-size_parity,
.x8-play-inline .x8-grid-sum,
.x8-play-inline .x8-grid-tail,
.x8-play-inline .x8-grid-color { border: none; column-gap: 5px; }
.x8-play-inline .x8-grid-number > .x8-cell,
.x8-play-inline .x8-grid-size_parity > .x8-cell,
.x8-play-inline .x8-grid-sum > .x8-cell,
.x8-play-inline .x8-grid-tail > .x8-cell,
.x8-play-inline .x8-grid-color > .x8-cell { border: 1px solid var(--x8-line, #c2ccda) !important; border-top: none !important; }
.x8-play-inline .x8-grid-number > .x8-cell:nth-child(10n + 1),
.x8-play-inline .x8-grid-size_parity > .x8-cell:nth-child(2n + 1),
.x8-play-inline .x8-grid-sum > .x8-cell,
.x8-play-inline .x8-grid-tail > .x8-cell:nth-child(-n + 4),
.x8-play-inline .x8-grid-color > .x8-cell { border-top: 1px solid var(--x8-line, #c2ccda) !important; }




.x8-combo-foot { display: flex; align-items: center; justify-content: space-between; height: 22px; font-size: 12px; color: var(--x8-limitink, #414654); }
.x8-combo-sum { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x8-combo-limit { flex: none; padding-left: 12px; }




.x8-rows-wave .x8-row-name { width: 60px; }


.x8-rows-wave .x8-row-odds { width: 70px; font-size: 13px; border-left: 0.8px solid var(--x8-line, #c2ccda); }

.x8-rows-wave .x8-row .x8-cell-amt { width: 58px; }
.x8-rows-wave .x8-row-nums { flex: 1; min-width: 0; border-left: 0.8px solid var(--x8-line, #c2ccda); padding: 0 5px 0 10px; }
.x8-rows-cols-wave .x8-rc-name { flex: none; width: 60px; text-align: center; }
.x8-rows-cols-wave .x8-rc-odds { flex: none; width: 70px; text-align: center; }
.x8-rows-cols-wave .x8-rc-amt { flex: none; width: 69px; text-align: center; }
.x8-rows-cols-wave .x8-rc-nums { flex: 1; min-width: 0; text-align: center; }



.x8-play-inline .x8-combo-cell { border-radius: 0; }




.x8-modal-mask.x8-mask-plain { background: transparent; align-items: flex-start; }
.x8-mask-plain .x8-panel { box-shadow: 0 20px 50px rgba(6, 15, 42, .18); }
.x8-notbet .x8-panel-body { padding: 10px; background: var(--x8-namebg, #edf4fe); }
.x8-notbet-box { box-sizing: border-box; background: #fff; border-radius: 2px; padding: 10px; margin: 0 4px; min-height: 196px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.x8-notbet-icon { width: 80px; height: 80px; border-radius: 50%; border: 6px solid #f82525; color: #f82525;
  font-size: 46px; font-weight: 700; line-height: 68px; text-align: center; font-family: Arial, sans-serif; }
.x8-notbet-t1 { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--x8-headink, #111626); }
.x8-notbet-t2 { padding-top: 6px; font-size: 13px; color: var(--x8-nameink, #414654); }
.x8-notbet-foot { height: 52px; display: flex; align-items: center; justify-content: center;
  background: var(--x8-dlg-foot, #ecf4fe); }
.x8-notbet-foot .x8-btn { width: 63px; height: 30px; padding: 0; border-radius: 2px; font-size: 13px; font-weight: 500;
  background: var(--x8-btn-pri); color: var(--x8-btn-pri-ink, #fff); }





.x8-chipbar .x8-btn-chipset { width: 59.6px; height: 30px; margin: 0 10px; border: 0.8px solid var(--x8-btn-dis-line, #eef0f3); }

.x8-chipbar .x8-btn-repeat { width: 98px; height: 30px; margin-left: 12px; }



.x8-cs-box { padding: 20px 20px 26px; }
.x8-cs-table { box-sizing: border-box; width: 236px; margin: 0 auto; }
.x8-cs-row { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.x8-cs-dot { flex: none; width: 28px; height: 28px; border-width: 2px; box-shadow: 0 1px 4px rgba(20, 40, 90, .22); cursor: default; }
.x8-cs-amt { flex: 1; min-width: 0; height: 32px; padding: 0 12px; font-size: 13px;
  border-radius: 4px; border: 0.8px solid var(--x8-dlg-input); }
.x8-cs-tip { margin-top: 4px; text-align: center; font-size: 13px; color: #f00; min-height: 18px; }
.x8-cs-ops { display: flex; justify-content: center; gap: 12px; margin-top: 8px; }
.x8-cs-btn { width: 90px; height: 32px; padding: 0; font-size: 13px; font-weight: 500; border-radius: 3px; }
.x8-cs-ops .x8-btn-main { background: var(--x8-dlg-grad); border: 0.8px solid var(--main-color, #0aa9ff); }
.x8-cs-ops .x8-btn-plain { border: 0.8px solid var(--x8-dlg-line); }





.x8-rp-box { padding: 16px 18px 22px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.x8-rp-table { box-sizing: border-box; border: 0.8px solid var(--x8-dlg-line); flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.x8-rp-foot, .x8-rp-silent, .x8-rp-tip, .x8-rp-ops, .x8-rp-empty { flex: none; }

.x8-rp-table .x8-rp-hd { position: sticky; top: 0; z-index: 1; }
.x8-rp-hd, .x8-rp-row, .x8-rp-foot { display: flex; align-items: center; }
.x8-rp-hd { height: 25px; font-size: 13px; font-weight: 700; color: #606266; background: var(--x8-dlg-head); }
.x8-rp-row { min-height: 34px; border-top: 0.8px solid var(--x8-dlg-line); }
.x8-rp-off { background: #f6f7f9; }
.x8-rp-c1 { box-sizing: border-box; flex: 1; min-width: 0; padding: 0 10px; font-size: 13px; color: var(--x8-main-ink, #1c66c9); }
.x8-rp-c2 { box-sizing: border-box; flex: none; width: 108px; text-align: center; font-size: 13px; }
.x8-rp-c3 { box-sizing: border-box; flex: none; width: 108px; display: flex; align-items: center; justify-content: center; }
.x8-rp-c4 { box-sizing: border-box; flex: none; width: 60px; display: flex; align-items: center; justify-content: center; }
.x8-rp-hd .x8-rp-c1 { color: #606266; text-align: center; }
.x8-rp-now { font-size: 13px; font-weight: 700; color: #f82525; font-variant-numeric: tabular-nums; }
.x8-rp-was { margin-right: 6px; font-size: 12px; font-weight: 400; color: #98a0b0; font-variant-numeric: tabular-nums; }
.x8-rp-dead { font-style: normal; font-size: 12px; color: #98a0b0; }
.x8-rp-lim { display: block; font-style: normal; font-size: 12px; line-height: normal; color: #f00; }
.x8-rp-over .x8-rp-amt { border-color: #f00; }
.x8-rp-amt { box-sizing: border-box; width: 84px; height: 24px; padding: 0 6px; font-size: 13px; text-align: center;
  border-radius: 3px; border: 0.8px solid var(--x8-dlg-input); outline: none; font-variant-numeric: tabular-nums; }
.x8-rp-amt:disabled { background: #f0f1f4; }
.x8-rp-ck { width: 16px; height: 16px; accent-color: var(--main-color, #0aa9ff); cursor: pointer; }
.x8-rp-ck:disabled { cursor: not-allowed; }
.x8-rp-foot { box-sizing: border-box; height: 30px; border: 0.8px solid var(--x8-dlg-line); border-top: none;
  font-size: 13px; font-weight: 700; color: #414654; background: var(--x8-dlg-head); }
.x8-rp-f1, .x8-rp-f2 { flex: 1; text-align: center; }
.x8-rp-silent { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; color: #414654; cursor: pointer; }
.x8-rp-tip { margin-top: 6px; font-size: 13px; color: #f00; min-height: 18px; }
.x8-rp-empty { padding: 26px 0; text-align: center; font-size: 14px; color: #98a0b0; }
.x8-rp-ops { display: flex; justify-content: center; gap: 12px; margin-top: 10px; }
.x8-rp-btn { width: 96px; height: 32px; padding: 0; font-size: 13px; font-weight: 500; border-radius: 3px; }
.x8-rp-ops .x8-btn-main { background: var(--x8-dlg-grad); border: 0.8px solid var(--main-color, #0aa9ff); }
.x8-rp-ops .x8-btn-plain { border: 0.8px solid var(--x8-dlg-line); }




.x8-row.x8-qhit, .x8-cell-inline.x8-qhit { background: #ffb135 !important; background-image: none !important; }
.x8-cell-inline.x8-qhit .x8-cell-slot { background: #ffb135; }
.x8-row.x8-qhit .x8-cell-amt, .x8-cell-inline.x8-qhit .x8-cell-amt { background: #fff !important; }


.header-set .x8-bell-no { display: none; }
.header-set.off .x8-bell-yes { display: none; }
.header-set.off .x8-bell-no { display: inline; }
.header-set.off { opacity: .55; }



.custom-tab-box { position: relative; }

.custom-tab-box .custom-tab { overflow: visible; }


.x8-czmore { position: relative; flex: none; height: 36px; display: flex; align-items: stretch; }
.x8-czmore-btn { display: inline-flex; align-items: center; gap: 7px; height: 100%; padding: 0 18px;
  border: none; border-left: 1px solid rgba(255, 255, 255, .25); border-radius: 0;
  background: transparent; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.x8-czmore-btn:hover { background: rgba(255, 255, 255, .16); }

.x8-czmore-btn.open { background: #fff; color: var(--x8-main-ink, #c05d20); border-left-color: transparent; }
.x8-czmore-arrow { width: 0; height: 0; border: 5px solid transparent; border-top-color: currentColor; margin-top: 5px; }
.x8-czmore-btn.open .x8-czmore-arrow { margin-top: -5px; border-top-color: transparent; border-bottom-color: currentColor; }


.x8-czpanel { position: absolute; left: 0; top: 100%; z-index: 60; width: 440px; padding: 12px;
  background: #fff; border: 1px solid var(--x8-line, #c2ccda); box-shadow: 0 6px 18px rgba(0, 0, 0, .16); }
.x8-czpool { min-height: 60px; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px;
  border: 1px solid var(--x8-line, #c2ccda); background: var(--x8-cellbg, #f6f7fb); }
.x8-czpool-empty { color: #9aa3b2; font-size: 13px; line-height: 40px; padding: 0 4px; }


.x8-czpool.drop-on { border-color: var(--x8-pick, #fbbb55); border-style: dashed; background: #fffaf0; }
.custom-tab.drop-on { box-shadow: inset 0 0 0 2px var(--x8-pick, #fbbb55); }
.x8-czpool-item { cursor: move; }


.x8-cz-ghost { position: fixed; z-index: 9999; pointer-events: none; opacity: .92;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--x8-main-ink, #c05d20); border-radius: 3px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .28); font-size: 13px; font-weight: 600; }
.x8-cz-ghost .x8-czbtn { display: none; }   
.x8-czpool-item { position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 14px;
  
  background: var(--x8-pick, #fbbb55); color: var(--x8-pick-ink, #111626); border-radius: 3px;
  font-size: 14px; font-weight: 600; user-select: none; }
.x8-czpool-item.clickable { cursor: pointer; }
.x8-czhint { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px;
  font-size: 13px; color: #7a8496; }
.x8-czops { display: flex; gap: 8px; }

.x8-czpool.editing .x8-czpool-item { padding-right: 34px; }
.x8-cztab-edit { padding-right: 28px !important; }


.x8-czbtn { position: absolute; right: 8px; top: 50%; margin-top: -9px; width: 18px; height: 18px; border-radius: 50%;
  background: #e0403f; color: #fff; cursor: pointer; display: inline-block; }
.x8-czbtn::before, .x8-czbtn::after { content: ''; position: absolute; left: 4px; top: 8px;
  width: 10px; height: 2px; background: #fff; }
.x8-czbtn-add { background: #2f7de1; }
.x8-czbtn-add::after { transform: rotate(90deg); }   
.x8-czbtn-del::after { display: none; }              



.x8-cztab-edit { position: relative; cursor: move; background: rgba(255, 255, 255, .18);
  user-select: none; -webkit-user-select: none; }
.x8-cztab-edit.dragging { opacity: .65; background: #fff; color: var(--x8-main-ink, #c05d20); }



.x8-pair-wrap { margin-top: 6px; }
.x8-pair-zone + .x8-pair-zone { margin-top: 8px; }
.x8-pair-head { box-sizing: border-box; display: flex; align-items: center; gap: 8px; height: 25px; padding: 0 10px;
  background: var(--x8-headbg, #ebecf1); border: 0.8px solid var(--x8-line, #c2ccda); border-bottom: none;
  font-size: 13px; color: var(--x8-headink, #111626); }
.x8-pair-head span { color: #7a8496; font-weight: 400; }
.x8-pair-pad { display: grid; border-left: 0.8px solid var(--x8-line, #c2ccda); }
.x8-pair-cell { box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  border-right: 0.8px solid var(--x8-line, #c2ccda); border-bottom: 0.8px solid var(--x8-line, #c2ccda);
  border-top: 0.8px solid var(--x8-line, #c2ccda); margin-top: -0.8px;
  background: #fff; cursor: pointer; user-select: none; }
.x8-pair-cell.picked { background: var(--x8-pick, #fbbb55); }
.x8-pair-cell.disabled { background: var(--x8-cellbg, #f6f7fb); cursor: not-allowed; }


.x8-pair-cell.taken { background: var(--x8-cellbg, #f6f7fb); cursor: not-allowed; }
.x8-pair-cell.taken .x8-pair-name { background: var(--x8-cellbg, #f6f7fb); color: #b9bec7; }
.x8-pair-cell.taken .x8-combo-ball, .x8-pair-cell.taken .x8-combo-mball { opacity: .3; }



.x8-pair-pad-number { grid-template-columns: repeat(10, 1fr); }

.x8-pair-pad-number .x8-pair-cell { flex-direction: column; gap: 2px; height: 48px; }
.x8-pair-odds { font-size: 11px; line-height: 1; color: #f82525; font-weight: 700; font-family: var(--x8-odds); }
.x8-pair-cell.picked .x8-pair-odds { color: var(--x8-pick-ink, #111626); }
.x8-pair-cell.taken .x8-pair-odds { opacity: .3; }


.x8-pair-pad-input { grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 8px 10px;
  border: 0.8px solid var(--x8-line, #c2ccda); border-top: none; background: #fff; }
.x8-pair-in { box-sizing: border-box; width: 100%; height: 30px; padding: 0 6px; text-align: center;
  border: 0.8px solid var(--x8-line, #c2ccda); border-radius: 2px; background: var(--x8-cellbg, #f6f7fb);
  font-size: 14px; font-weight: 600; color: #40495a; outline: none; }
.x8-pair-in:focus { border-color: var(--x8-pick, #fbbb55); background: #fff; }
.x8-pair-in.bad { border-color: #e0403f; color: #e0403f; }
.x8-pair-in:disabled { cursor: not-allowed; color: #9aa3b2; }



.x8-pair-pad-zodiac, .x8-pair-pad-tail { grid-template-columns: 1fr 1fr; grid-auto-flow: column; column-gap: 5px; border-left: none; }
.x8-pair-pad-zodiac { grid-template-rows: repeat(6, auto); }
.x8-pair-pad-tail { grid-template-rows: repeat(5, auto); }
.x8-pair-pad-zodiac .x8-pair-cell, .x8-pair-pad-tail .x8-pair-cell {
  justify-content: flex-start; height: 50px; border-left: 0.8px solid var(--x8-line, #c2ccda); }
.x8-pair-name { flex: none; width: 56px; align-self: stretch; display: inline-flex; align-items: center; justify-content: center;
  background: var(--x8-namebg, #edf4fe); border-right: 0.8px solid var(--x8-line, #c2ccda); font-size: 14px; font-weight: 600; color: #40495a; }
.x8-pair-cell.picked .x8-pair-name { background: var(--x8-pick, #fbbb55); color: var(--x8-pick-ink, #111626); }
.x8-pair-cell .x8-combo-nums { flex: 1; display: flex; align-items: center; gap: 0; padding: 0 5px 0 8px; }

.x8-pair-mcell { flex: 0 0 68px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; }
.x8-pair-mcell .x8-pair-odds { font-size: 16px; line-height: 21px; }


.x8-pair-mcell-t { flex-direction: row; gap: 3px; }
.x8-pair-modds { display: inline-flex; flex-direction: column; align-items: center;
  font-size: 12px; line-height: 14px; font-weight: 700; color: #f82525; font-family: var(--x8-odds); }
.x8-pair-modds em { font-style: normal; }
.x8-pair-cell.picked .x8-pair-modds { color: var(--x8-pick-ink, #111626); }
.x8-pair-cell.taken .x8-pair-modds { opacity: .3; }


.x8-draw-wait { color: var(--x8-dim, #98a2ae); font-size: 12px; letter-spacing: .5px; }