/* ==========================================================================
   DMFIRST THEME EXACT 1:1 REPLICATION (PIXEL-PERFECT CLONE)
   ========================================================================== */

/* 1. Root Theme Variables */
:root {
  --main-color: #DDB85D !important;
  --main_gradient: linear-gradient(90deg, #DDB85D 0%, #F2CE72 100%) !important;
  --bg_color_L1: #010806 !important;
  --bg_color_L2: #05241b !important;
  --bg_color_L3: #021a14 !important;
  --text_color_L1: #DDB85D !important;
  --text_color_L2: #A7B8B0 !important;
}

/* 2. Global Page Background & Shell (Exact DMFirst #9195a3 desktop frame) */
html, body {
  background-color: #9195a3 !important;
  background: #9195a3 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Segoe UI", Arial, Roboto, "PingFang SC", miui, sans-serif !important;
  margin: 0 !important;
  padding: 0 !important;
}

#app, 
.WinGo__C, 
.saas-lottery-page, 
.lottery-page,
.min-h-screen {
  background-color: #010806 !important;
  background: #010806 !important;
  color: #ffffff !important;
  width: 100% !important;
  max-width: 500px !important;
  margin: 0 auto !important;
  min-height: 100vh !important;
  position: relative !important;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.5) !important;
}

/* 3. Top Navbar / Header */
.van-nav-bar, 
.van-nav-bar__content, 
.NavBar__C, 
.header {
  background-color: #010806 !important;
  border-bottom: none !important;
}

.van-nav-bar__title, 
.van-nav-bar .van-icon, 
.NavBar__C *, 
.header * {
  color: #ffffff !important;
}

.p8-home__header img,
.navbar__content-center img,
.navbar img,
.van-nav-bar img,
.header-logo img,
.WinGo__C-head-logo img,
.WinTrx__C-head-logo img {
  max-height: 1.1rem !important;
  width: auto !important;
  object-fit: contain !important;
}

/* 4. Top Wallet Card */
.Wallet__C-balance, 
.wallet-box {
  background-color: #094438 !important;
  background: #094438 !important;
  background-image: none !important;
  border-radius: 0.45rem !important;
  padding: 0.35rem !important;
  overflow: visible !important;
  height: auto !important;
  margin: 0.25rem 0.3rem !important;
  border: none !important;
  box-shadow: none !important;
}

.Wallet__C-balance .amount, 
.Wallet__C-balance-l1,
.Wallet__C-balance-l1 > div,
[class*="balance-l1"] {
  font-size: 0.68rem !important;
  color: #F2CE72 !important;
  -webkit-text-fill-color: #F2CE72 !important;
  text-shadow: none !important;
  font-weight: 600 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, Roboto, sans-serif !important;
  overflow: visible !important;
  height: auto !important;
  min-height: 1.1rem !important;
  line-height: 1.2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  letter-spacing: 0.01rem !important;
}

.Wallet__C-balance-l1 > div:after {
  top: 50% !important;
  transform: translateY(-50%) !important;
  filter: brightness(1.2) !important;
}

.Wallet__C-balance-l2, 
.Wallet__C-balance .text {
  text-transform: uppercase !important;
  font-size: 0.28rem !important;
  color: #F5F7F3 !important;
  font-weight: 500 !important;
  margin-top: 0.12rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  letter-spacing: 0.05rem !important;
  gap: 0.1rem !important;
}

/* Wallet Action Buttons (Withdraw & Deposit) */
.Wallet__C-balance-b,
.Wallet__C-balance-l3 {
  display: flex !important;
  justify-content: space-between !important;
  margin-top: 0.35rem !important;
  padding: 0 0.1rem !important;
}

.Wallet__C-balance-b .btn, 
.wallet-btn,
.Wallet__C-balance-l3 > div {
  border-radius: 0.45rem !important;
  font-size: 0.34rem !important;
  font-weight: 700 !important;
  height: 0.85rem !important;
  line-height: 0.85rem !important;
  width: 46% !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

/* Withdraw Button: Elegant emerald green gradient */
.Wallet__C-balance-b .btn.withdraw, 
.wallet-btn.withdraw, 
.Wallet__C-balance-b > div:first-child,
.Wallet__C-balance-l3 > div:first-child {
  background: linear-gradient(180deg, #18b681 0%, #0d9667 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(24, 182, 129, 0.4) !important;
}

/* Deposit Button: Dark forest green with subtle border */
.Wallet__C-balance-b .btn.deposit, 
.wallet-btn.deposit, 
.Wallet__C-balance-b > div:last-child,
.Wallet__C-balance-l3 > div:last-child {
  background: #0a2d21 !important;
  border: 1px solid #1ba275 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* 5. Notice Bar (Single Line with Ellipsis) */
.notice, 
.noticeBar__container,
.lottery-notice {
  background-color: #05241b !important;
  border-radius: 0.4rem !important;
  margin: 0.25rem 0.3rem !important;
  padding: 0.15rem 0.3rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 0.8rem !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.noticeBar__container-body-text, 
.lottery-notice .van-notice-bar__content,
.notice span {
  color: #A7B8B0 !important;
  font-size: 0.28rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 80% !important;
}

.notice .detail, 
.notice-btn, 
.NavBar__C .detail,
.hotIcon {
  background: transparent !important;
  border: none !important;
  color: #DDB85D !important;
  font-size: 0.28rem !important;
  font-weight: 600 !important;
  padding: 0 0.1rem !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.05rem !important;
}

/* 6. Game Time Selector Cards (FIXED OVERFLOW & SIZING) */
.GameList__C,
.timer-cards {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 0.15rem !important;
  padding: 0 0.3rem !important;
  margin: 0.25rem 0 !important;
  background: transparent !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.GameList__C-item, 
.timer-card,
.GameList__C > div,
.timer-cards > div {
  background: #05241b !important;
  background-color: #05241b !important;
  border: none !important;
  border-radius: 0.22rem !important;
  height: 2.1rem !important;
  width: calc((100% - 0.45rem) / 4) !important;
  max-width: calc((100% - 0.45rem) / 4) !important;
  min-width: 0 !important;
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.12rem 0.04rem !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
  color: #A7B8B0 !important;
  box-sizing: border-box !important;
}

.GameList__C-item:not(.active) .van-icon, 
.timer-card:not(.active) .clock-icon,
.GameList__C-item:not(.active) img,
.timer-card:not(.active) img {
  filter: grayscale(1) opacity(0.5) !important;
}

.GameList__C-item.active, 
.timer-card.active {
  background: linear-gradient(180deg, #148A63 0%, #0B573D 100%) !important;
  background-color: #148A63 !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(20, 138, 99, 0.45) !important;
  color: #ffffff !important;
}

.GameList__C-item.active *, 
.timer-card.active * {
  color: #ffffff !important;
  filter: none !important;
  opacity: 1 !important;
}

/* 7. Ticket / Countdown Box (Exact DMFirst Image Asset wingoissue-CkOVY8Dv.png) */
.TimeLeft__C, 
.ticket-box {
  background: url('https://dmfirst.org/assets/png/wingoissue-CkOVY8Dv.png') no-repeat center / 100% 100% !important;
  background-color: transparent !important;
  background-image: url('https://dmfirst.org/assets/png/wingoissue-CkOVY8Dv.png') !important;
  background-size: 100% 100% !important;
  border-radius: 0 !important;
  margin: 0.35rem auto 0 !important;
  width: calc(100% - 0.69333rem) !important;
  max-width: 440px !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: visible !important;
  height: 2.66667rem !important;
  min-height: 2.66667rem !important;
}

.TimeLeft__C::before,
.TimeLeft__C::after {
  display: none !important;
  content: none !important;
}

.TimeLeft__C-rule, 
.how-to-play-btn {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
  color: #ffffff !important;
  border-radius: 0.8rem !important;
  font-size: 0.28rem !important;
  font-weight: 500 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.10rem !important;
  position: absolute !important;
  top: 0.28rem !important;
  left: 0.28rem !important;
  width: 3.6rem !important;
  height: 0.58rem !important;
  margin: 0 !important;
}

.TimeLeft__C-rule svg,
.TimeLeft__C-rule img,
.TimeLeft__C-rule i,
.how-to-play-btn svg,
.how-to-play-btn img,
.TimeLeft__C-rule * {
  background: transparent !important;
  background-color: transparent !important;
  color: #ffffff !important;
  fill: #ffffff !important;
  box-shadow: none !important;
  border: none !important;
}

.TimeLeft__C-name,
.TimeLeft__C-l1 {
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 0.28rem !important;
  position: absolute !important;
  top: 0.95rem !important;
  left: 0.28rem !important;
  height: 0.56rem !important;
  line-height: 0.56rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

.TimeLeft__C-num {
  position: absolute !important;
  bottom: 0.25rem !important;
  top: auto !important;
  left: 0.28rem !important;
  height: 0.66667rem !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.12rem !important;
  overflow: visible !important;
}

.TimeLeft__C-num > div,
.TimeLeft__C-num > p {
  width: 0.64rem !important;
  height: 0.64rem !important;
  min-width: 0.64rem !important;
  min-height: 0.64rem !important;
  border-radius: 50% !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.TimeLeft__C-text,
.TimeLeft__C-r1 {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.30rem !important;
  position: absolute !important;
  top: 0.32rem !important;
  right: 0.28rem !important;
  left: auto !important;
  height: 0.38rem !important;
  line-height: 0.38rem !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: right !important;
}

.TimeLeft__C-time {
  position: absolute !important;
  top: 0.85rem !important;
  right: 0.28rem !important;
  left: auto !important;
  height: 0.70rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0.08rem !important;
}

.TimeLeft__C-id,
.TimeLeft__C-r3 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.32rem !important;
  letter-spacing: normal !important;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto, sans-serif !important;
  text-shadow: none !important;
  position: absolute !important;
  bottom: 0.22rem !important;
  top: auto !important;
  right: 0.28rem !important;
  left: auto !important;
  height: 0.44rem !important;
  line-height: 0.44rem !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: right !important;
}

.TimeLeft__C-time > div, 
.TimeLeft__C-time > div[data-v-3cbad787],
.TimeLeft__C-time > div[data-v-7e8b82da] {
  background-color: #023023 !important;
  background: #023023 !important;
  border: none !important;
  border-radius: 0.06rem !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.44rem !important;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto, sans-serif !important;
  width: 0.48rem !important;
  height: 0.64rem !important;
  min-width: 0.48rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  padding: 0 !important;
  margin: 0 !important;
  clip-path: none !important;
}

.TimeLeft__C-time > div:nth-child(1),
.TimeLeft__C-time > div[data-v-3cbad787]:nth-child(1),
.TimeLeft__C-time > div[data-v-7e8b82da]:nth-child(1) {
  -webkit-clip-path: polygon(0 28%, 28% 0, 100% 0, 100% 100%, 0% 100%) !important;
  clip-path: polygon(0 28%, 28% 0, 100% 0, 100% 100%, 0% 100%) !important;
}

.TimeLeft__C-time > div:nth-child(5),
.TimeLeft__C-time > div[data-v-3cbad787]:nth-child(5),
.TimeLeft__C-time > div[data-v-7e8b82da]:nth-child(5) {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%) !important;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%) !important;
}

.TimeLeft__C-time > div::before,
.TimeLeft__C-time > div::after,
.TimeLeft__C-time span::before,
.TimeLeft__C-time span::after {
  display: none !important;
  content: none !important;
}

.TimeLeft__C-time span,
.TimeLeft__C-time > div:nth-child(3), 
.TimeLeft__C-time > div:nth-child(3)[data-v-3cbad787],
.TimeLeft__C-time > div:nth-child(3)[data-v-7e8b82da] {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 0.44rem !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  filter: none !important;
  width: auto !important;
  min-width: 0.16rem !important;
  padding: 0 0.04rem !important;
  clip-path: none !important;
}

/* 8. Color Betting Buttons (Green, Violet, Red) */
.Betting__C-btn:nth-child(1),
.bet-btn-green,
.Betting__C-btn-green,
.FDB__C-H > div:nth-child(4) {
  background: #18B660 !important;
  background-color: #18B660 !important;
  border-radius: 0.2rem !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.36rem !important;
  box-shadow: 0 4px 12px rgba(24, 182, 96, 0.4) !important;
}

.Betting__C-btn:nth-child(2),
.bet-btn-violet,
.Betting__C-btn-violet,
.FDB__C-H > div:nth-child(1) {
  background: #B659FE !important;
  background-color: #B659FE !important;
  border-radius: 0.2rem !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.36rem !important;
  box-shadow: 0 4px 12px rgba(182, 89, 254, 0.4) !important;
}

.Betting__C-btn:nth-child(3),
.bet-btn-red,
.Betting__C-btn-red,
.FDB__C-H > div:nth-child(3) {
  background: #FF4D4D !important;
  background-color: #FF4D4D !important;
  border-radius: 0.2rem !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.36rem !important;
  box-shadow: 0 4px 12px rgba(255, 77, 77, 0.4) !important;
}

/* 9. Betting Container Background & Number Balls (Exact 5 Balls Per Row: 0-4 and 5-9) */
.Betting__C,
.FDB__C {
  background-color: #031F17 !important;
  border-radius: 0.25rem !important;
  margin: 0.25rem 0.3rem !important;
  padding: 0.35rem !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

.Betting__C-numC,
.Betting__C-numC[data-v-b68febd5],
.Betting__C-numC[data-v-d7ba5957],
.Betting__C-numC[data-v-4aca9bd1] {
  background: #010806 !important;
  background-color: #010806 !important;
  border-radius: 0.26667rem !important;
  padding: 0.17333rem 0.26667rem !important;
  margin-top: 0.26667rem !important;
  height: 3.46667rem !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-content: space-between !important;
  border: none !important;
  box-sizing: border-box !important;
}

.Betting__C-numC > div,
.Betting__C-numC > div[data-v-b68febd5],
.Betting__C-numC > div[data-v-d7ba5957],
.Betting__C-numC > div[data-v-4aca9bd1] {
  flex: 0 0 18% !important;
  width: 18% !important;
  max-width: 1.46667rem !important;
  height: 1.46667rem !important;
  border-radius: 50% !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* Multiplier Buttons */
.Betting__C-multiple-l {
  border: 1px solid #DDB85D !important;
  color: #DDB85D !important;
  background: transparent !important;
  border-radius: 0.15rem !important;
  font-weight: 600 !important;
  font-size: 0.3rem !important;
}

.Betting__C-multiple-r {
  background-color: #05241b !important;
  color: #8A9F96 !important;
  border-radius: 0.15rem !important;
  font-weight: 600 !important;
  font-size: 0.3rem !important;
  border: none !important;
}

.Betting__C-multiple-r.active {
  background: #18B660 !important;
  background-color: #18B660 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(24, 182, 96, 0.4) !important;
}

/* 10. Big / Small Joined Pill Buttons */
.Betting__C-btn-big,
.btn-big,
.FDB__C-H > div:nth-child(2) {
  background: #FFA03A !important;
  background-color: #FFA03A !important;
  color: #ffffff !important;
  border-radius: 0.45rem 0 0 0.45rem !important;
  font-weight: 700 !important;
  font-size: 0.38rem !important;
  box-shadow: 0 3px 10px rgba(255, 160, 58, 0.35) !important;
}

.Betting__C-btn-small,
.btn-small,
.FDB__C-H > div:last-child {
  background: #609BF8 !important;
  background-color: #609BF8 !important;
  color: #ffffff !important;
  border-radius: 0 0.45rem 0.45rem 0 !important;
  font-weight: 700 !important;
  font-size: 0.38rem !important;
  box-shadow: 0 3px 10px rgba(96, 155, 248, 0.35) !important;
}

/* /* 11. History Nav Tabs (Game history, Chart, My history) */
.history,
.history[data-v-b68febd5] {
  width: 100% !important;
  margin-top: 0.15rem !important;
}

.history .nav,
.GameRecord__C-tab,
.tab-record-header {
  display: flex !important;
  justify-content: space-between !important;
  margin: 0.15rem 0.3rem 0.05rem !important;
  gap: 0.2rem !important;
  padding: 0 !important;
}

.history .nav > .nav-container,
.history .nav > .nav-container[data-v-b68febd5] {
  margin-bottom: 0 !important;
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
}

.history .nav-box,
.history .nav-box[data-v-b68febd5] {
  padding: 0 !important;
  margin: 0 !important;
}

.history .nav > .nav-container > div,
.GameRecord__C-tab > div,
.tab-record-header > div {
  background-color: #0a2219 !important;
  background: #0a2219 !important;
  color: #8A9F96 !important;
  border-radius: 0.25rem !important;
  height: 0.8rem !important;
  line-height: 0.8rem !important;
  font-size: 0.3rem !important;
  font-weight: 600 !important;
  text-align: center !important;
  border: none !important;
  flex: 1 !important;
}

.history .nav > .nav-container > div.active,
.GameRecord__C-tab .active,
.tab-record-header .active {
  background: #18B660 !important;
  background-color: #18B660 !important;
  color: #ffffff !important;
  border-radius: 0.25rem !important;
  font-weight: 700 !important;
  box-shadow: 0 3px 12px rgba(24, 182, 96, 0.45) !important;
}

/* 12. Game History Table (Exact DMFirst Replica) */
.record, 
.GameRecord__C,
[class*="GameRecord"] {
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  border: none !important;
  overflow: visible !important;
  max-width: 500px !important;
  margin: 0.1rem 0.3rem 0.5rem !important;
}

.record-head,
.GameRecord__C-head,
.tab-record-head {
  background: #052922 !important;
  background-color: #052922 !important;
  border-radius: 0.25rem 0.25rem 0 0 !important;
  border: none !important;
  height: 0.88rem !important;
  line-height: 0.88rem !important;
  width: 100% !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

.record-head .van-row,
.GameRecord__C-head .van-row,
.record-body .van-row,
.GameRecord__C-body .van-row {
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.record-head .van-col,
.GameRecord__C-head .van-col {
  color: #ddb85d !important;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.26rem !important;
  text-align: center !important;
  padding: 0 !important;
}

/* 4-column exact Vant 24-grid layout (10 / 5 / 5 / 4 = 24 cols) */
.record-head .van-col--10,
.GameRecord__C-head .van-col--10,
.record-body .van-col--10,
.GameRecord__C-body .van-col--10,
.record-head .van-col:nth-child(1),
.record-body .van-col:nth-child(1) {
  flex: 0 0 41.666667% !important;
  width: 41.666667% !important;
  max-width: 41.666667% !important;
  text-align: center !important;
  padding: 0 !important;
}

.record-head .van-col--5:nth-child(2),
.GameRecord__C-head .van-col--5:nth-child(2),
.record-body .van-col--5:nth-child(2),
.GameRecord__C-body .van-col--5:nth-child(2),
.record-head .van-col:nth-child(2),
.record-body .van-col:nth-child(2) {
  flex: 0 0 20.833333% !important;
  width: 20.833333% !important;
  max-width: 20.833333% !important;
  text-align: center !important;
  padding: 0 !important;
}

.record-head .van-col--5:nth-child(3),
.GameRecord__C-head .van-col--5:nth-child(3),
.record-body .van-col--5:nth-child(3),
.GameRecord__C-body .van-col--5:nth-child(3),
.record-head .van-col:nth-child(3),
.record-body .van-col:nth-child(3) {
  flex: 0 0 20.833333% !important;
  width: 20.833333% !important;
  max-width: 20.833333% !important;
  text-align: center !important;
  padding: 0 !important;
}

.record-head .van-col--4,
.GameRecord__C-head .van-col--4,
.record-body .van-col--4,
.GameRecord__C-body .van-col--4,
.record-head .van-col:nth-child(4),
.record-body .van-col:nth-child(4) {
  flex: 0 0 16.666667% !important;
  width: 16.666667% !important;
  max-width: 16.666667% !important;
  text-align: center !important;
  padding: 0 !important;
}

/* Table Rows (Solid DMFirst #094438 - No Lines / No Borders / No Row Clipping) */
.record-body,
.GameRecord__C-body {
  border-radius: 0 0 0.25rem 0.25rem !important;
  overflow: hidden !important;
  border: none !important;
  background: #094438 !important;
  background-color: #094438 !important;
  height: auto !important;
  min-height: auto !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

.record-body > div,
.record-body .van-row,
.GameRecord__C-body > div,
.GameRecord__C-body .van-row {
  height: 1.06667rem !important;
  line-height: 1.06667rem !important;
  display: flex !important;
  align-items: center !important;
  border: none !important;
  border-bottom: none !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
  outline: none !important;
  background-color: #094438 !important;
  background: #094438 !important;
  background-image: none !important;
  width: 100% !important;
}

.record-body > div:nth-child(odd),
.record-body .van-row:nth-child(odd),
.GameRecord__C-body > div:nth-child(odd),
.GameRecord__C-body .van-row:nth-child(odd),
.record-body > div:nth-child(even),
.record-body .van-row:nth-child(even),
.GameRecord__C-body > div:nth-child(even),
.GameRecord__C-body .van-row:nth-child(even) {
  background-color: #094438 !important;
  background: #094438 !important;
  background-image: none !important;
  border: none !important;
  border-bottom: none !important;
}

/* Period Column (Exact DMFirst Scale: 0.28rem, color: #F5F7F3 bright, weight 400) */
.record-body .van-col:first-child,
.GameRecord__C-body .van-col:first-child,
.record-body .van-col:first-child span,
.GameRecord__C-body .van-col:first-child span {
  color: #F5F7F3 !important;
  font-size: 0.28rem !important;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 400 !important;
  padding-left: 0 !important;
  text-align: center !important;
}

/* Number Column (Exact DMFirst Scale: 0.58rem, Roboto Bold 700) */
.numItem, 
.record-body-num,
.GameRecord__C-body-num,
.record-body .van-col:nth-child(2),
.GameRecord__C-body .van-col:nth-child(2),
.record-body .van-col:nth-child(2) > div,
.GameRecord__C-body .van-col:nth-child(2) > div,
.record-body .van-col:nth-child(2) > span,
.GameRecord__C-body .van-col:nth-child(2) > span,
.numcenter > div, 
.numList > div { 
  font-size: 0.58rem !important; 
  font-weight: 700 !important; 
  line-height: 1.06667rem !important;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Numbers Single Color */
.numItem.bg-green, .greenColor, [class*="greenColor"] { 
  color: #18B660 !important; 
  -webkit-text-fill-color: #18B660 !important; 
  background: transparent !important;
}

.numItem.bg-red, .defaultColor, [class*="defaultColor"] { 
  color: #FF4D4D !important; 
  -webkit-text-fill-color: #FF4D4D !important; 
  background: transparent !important;
}

.numItem.bg-violet, .violetColor, [class*="violetColor"] { 
  color: #B659FE !important; 
  -webkit-text-fill-color: #B659FE !important; 
  background: transparent !important;
}

/* Dual Color Gradients for 0 and 5 */
.mixedColor0, 
[class*="mixedColor0"],
.record-body .van-col:nth-child(2) > div.mixedColor0,
.GameRecord__C-body .van-col:nth-child(2) > div.mixedColor0,
.record-body .mixedColor0,
.GameRecord__C-body .mixedColor0 {
  background: linear-gradient(180deg, #FF4D4D 50%, #B659FE 50%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  display: inline-block !important;
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  line-height: 1.06667rem !important;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, Arial, sans-serif !important;
}

.mixedColor5, 
[class*="mixedColor5"],
.record-body .van-col:nth-child(2) > div.mixedColor5,
.GameRecord__C-body .van-col:nth-child(2) > div.mixedColor5,
.record-body .mixedColor5,
.GameRecord__C-body .mixedColor5 {
  background: linear-gradient(180deg, #18B660 50%, #B659FE 50%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  display: inline-block !important;
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  line-height: 1.06667rem !important;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, Arial, sans-serif !important;
}

/* Big Small Column (Exact DMFirst Scale: 0.28rem, color: #F5F7F3 bright, weight 400) */
.record-body .van-col:nth-child(3),
.record-body .van-col:nth-child(3) span,
.GameRecord__C-body .van-col:nth-child(3),
.GameRecord__C-body .van-col:nth-child(3) span {
  color: #F5F7F3 !important;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, Arial, sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.28rem !important;
  text-align: center !important;
}

/* Color Circles Column */
.record-origin-I.green, .GameRecord__C-origin-I.green { background-color: #18B660 !important; width: 0.24rem !important; height: 0.24rem !important; border-radius: 50% !important; }
.record-origin-I.red, .GameRecord__C-origin-I.red { background-color: #FF4D4D !important; width: 0.24rem !important; height: 0.24rem !important; border-radius: 50% !important; }
.record-origin-I.violet, .GameRecord__C-origin-I.violet { background-color: #B659FE !important; width: 0.24rem !important; height: 0.24rem !important; border-radius: 50% !important; }

/* 13. Bottom Pagination (Distinct DMFirst #052922 Bar with Cut Line) */
.record-foot,
.GameRecord__C-foot {
  background-color: #052922 !important;
  background: #052922 !important;
  border-radius: 0.25rem !important;
  margin: 0.25rem 0 0.6rem !important;
  padding: 0.2rem 1.2rem !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border: none !important;
  height: 1.2rem !important;
  box-sizing: border-box !important;
  width: 100% !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

.record-foot-previous, 
.GameRecord__C-foot-previous {
  background-color: #06251b !important;
  background: #06251b !important;
  color: #2b5645 !important;
  border-radius: 0.12rem !important;
  width: 0.76rem !important;
  height: 0.76rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
}

.record-foot-next, 
.GameRecord__C-foot-next {
  background-color: #18B660 !important;
  background: #18B660 !important;
  color: #ffffff !important;
  border-radius: 0.12rem !important;
  width: 0.76rem !important;
  height: 0.76rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(24, 182, 96, 0.4) !important;
}

.record-foot-page, 
.GameRecord__C-foot-page {
  color: #F5F7F3 !important;
  font-weight: 600 !important;
  font-size: 0.30rem !important;
  font-family: Roboto, Arial, sans-serif !important;
}

.record-foot-page, 
.GameRecord__C-foot-page {
  color: #ddb85d !important;
  font-weight: 600 !important;
  font-size: 0.30rem !important;
}

/* 14. Freeze Overlay Timer */
.Betting__C-mark {
  background: transparent !important;
  z-index: 999 !important;
}

.Betting__C-mark > div {
  background-color: #05241b !important;
  color: #FED24E !important;
  border: none !important;
  width: 2.2rem !important;
  height: 2.6rem !important;
  line-height: 2.6rem !important;
  font-size: 2.2rem !important;
  font-weight: bold !important;
  font-family: Arial, sans-serif !important;
  border-radius: 0.2rem !important;
  box-shadow: 0 0 20px rgba(0,0,0,0.85) !important;
}

.Betting__C-mark > div:nth-child(3) {
  background: transparent !important;
  width: 0.5rem !important;
  box-shadow: none !important;
}

.Betting__C-mark p {
  display: none !important;
}

/* 15. Home Page Buttons */
.p8-home__guest-btn--login,
.purple-home__nav-auth__login,
.p8-home__guest-btn.p8-home__guest-btn--login {
  background: linear-gradient(135deg, #12A875 0%, #003527 100%) !important;
  background-color: #12A875 !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 700 !important;
  font-size: 0.38rem !important;
  border-radius: 0.4rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(18, 168, 117, 0.35) !important;
}

.p8-home__guest-btn--register,
.purple-home__nav-auth__register,
.p8-home__guest-btn.p8-home__guest-btn--register {
  background: linear-gradient(90deg, #DDB85D 0%, #F2CE72 100%) !important;
  background-color: #DDB85D !important;
  color: #1c1a3f !important;
  border: none !important;
  font-weight: 800 !important;
  font-size: 0.38rem !important;
  border-radius: 0.4rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(221, 184, 93, 0.35) !important;
}

.pwa-btn, 
.btn.pwa-btn,
.btn--raised {
  background: linear-gradient(90deg, #12A875 0%, #0a8459 100%) !important;
  color: #ffffff !important;
  border-radius: 0.5rem !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(18, 168, 117, 0.4) !important;
}

/* 16. Login and Register Emerald Green Header & Theme */
.login__container-heading,
.register__container-heading,
.heading[data-v-33f88764],
.login__container-heading[data-v-33f88764],
.register__container-heading[data-v-33f88764] {
  background: linear-gradient(179.1deg, rgb(18, 168, 117) 4.65%, rgb(0, 53, 39) 67.68%) !important;
  background-image: linear-gradient(179.1deg, rgb(18, 168, 117) 4.65%, rgb(0, 53, 39) 67.68%) !important;
}

.login__container button.register,
.register[data-v-33f88764],
button.register[data-v-33f88764],
.login__container-button_register,
.register__container-button_login,
.register__container button.login,
button.login[data-v-3fca3b06] {
  border: 1px solid #DDB85D !important;
  color: #DDB85D !important;
  background: transparent !important;
  background-color: transparent !important;
}

.login__container-form button:not(.active):not(.register):not(.login),
.register__container-form button:not(.active):not(.register):not(.login),
button:not(.active):not(.register):not(.login)[data-v-33f88764],
button:not(.active):not(.register):not(.login)[data-v-3fca3b06] {
  background: #6F857B !important;
  background-color: #6F857B !important;
  color: #A7B8B0 !important;
  border: none !important;
}

.login__container-form button.active,
.register__container-form button.active,
button.active[data-v-33f88764],
button.active[data-v-3fca3b06] {
  background: linear-gradient(90deg, #DDB85D 0%, #F2CE72 100%) !important;
  background-image: linear-gradient(90deg, #DDB85D 0%, #F2CE72 100%) !important;
  color: #F5F7F3 !important;
  border: none !important;
}