:root {
  --hb-bg: #050504;
  --hb-bg-2: #0c0905;
  --hb-panel: #15110a;
  --hb-panel-2: #211a0d;
  --hb-gold: #f5c96a;
  --hb-gold-2: #d59b35;
  --hb-gold-3: #8d6425;
  --hb-text: #fff7df;
  --hb-muted: #cdbb88;
  --hb-line: rgba(245, 201, 106, .28);
  --hb-shadow: 0 16px 42px rgba(0, 0, 0, .42);
}

body:has(#app .redEnveBody),
body:has(#app .redEnveBody) #app {
  background: #000 !important;
  color: var(--hb-text) !important;
}

body:has(#app .redEnveBody) .app,
body:has(#app .redEnveBody) .bisd {
  background: #000 !important;
}

body:has(#app .redEnveBody) .redEnveBody {
  min-height: 100vh;
  overflow-x: hidden;
  background:
    linear-gradient(180deg, rgba(245, 201, 106, .10), rgba(245, 201, 106, 0) 260px),
    radial-gradient(circle at 50% 0, rgba(245, 201, 106, .16), rgba(0, 0, 0, 0) 34%),
    linear-gradient(180deg, #060504 0, #0b0906 44%, #020202 100%) !important;
}

body:has(#app .redEnveBody) .redEnveBodyToo {
  position: relative;
}

body:has(#app .redEnveBody) .redEnveBodyMain {
  min-height: 100vh;
  padding-bottom: 44px;
}

body:has(#app .redEnveBody) .redEnveBodyTop {
  position: relative;
  isolation: isolate;
}

body:has(#app .redEnveBody) .redEnveBodyTop .pen {
  position: relative;
  z-index: 0 !important;
  height: 268px !important;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 54%, rgba(5, 5, 4, .88) 100%),
    url("/static/image/generated/hongbao-hero-blackgold-20260608032000.jpg?v=20260608032000") center top / cover no-repeat !important;
  border-bottom: 1px solid var(--hb-line);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .46);
}

body:has(#app .redEnveBody) .redEnveBodyTop .pen img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  opacity: 0 !important;
}

body:has(#app .redEnveBody) .redEnveBodyTop .hongbao,
body:has(#app .redEnveBody) .redEnveBodyTop .jinbi,
body:has(#app .redEnveBody) .redEnveBodyTop .jinbi2,
body:has(#app .redEnveBody) .redEnveBodyTop .jinbi3,
body:has(#app .redEnveBody) .redEnveBodyTop .caidai,
body:has(#app .redEnveBody) .redEnveBodyTop .lcaidai {
  display: none !important;
}

body:has(#app .redEnveBody) .redEnveFont {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 82px !important;
  margin: -178px auto 0 !important;
  animation: none !important;
  visibility: visible !important;
  position: relative;
  z-index: 5;
}

body:has(#app .redEnveBody) .redEnveFont img {
  display: none !important;
}

body:has(#app .redEnveBody) .redEnveFont::before {
  content: "抢红包";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  padding: 0 18px;
  color: var(--hb-gold);
  font-size: 42px;
  font-weight: 900;
  letter-spacing: 0;
  white-space: nowrap;
  text-shadow: 0 2px 0 #3b2609, 0 0 22px rgba(245, 201, 106, .46);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body:has(#app .redEnveBody) .toddyTotal,
body:has(#app .redEnveBody) .receiveTimes,
body:has(#app .redEnveBody) .currReceiveTimes {
  width: min(760px, calc(100% - 42px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  color: var(--hb-text) !important;
  text-align: center;
  position: relative;
  z-index: 5;
}

body:has(#app .redEnveBody) .toddyTotal {
  margin-top: 18px !important;
  margin-bottom: 12px !important;
  font-size: 26px !important;
  color: var(--hb-gold) !important;
}

body:has(#app .redEnveBody) .receiveTimes {
  font-size: 21px !important;
  display: table !important;
  width: auto !important;
  padding: 7px 20px;
  background: rgba(14, 11, 6, .72);
  border: 1px solid rgba(245, 201, 106, .22);
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
}

body:has(#app .redEnveBody) .currReceiveTimes {
  margin-bottom: 24px !important;
  color: var(--hb-muted) !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
}

body:has(#app .redEnveBody) .redEnveBody .yellow,
body:has(#app .redEnveBody) .redEnveBody .yellow2 {
  color: var(--hb-gold) !important;
}

body:has(#app .redEnveBody) .redEnveBody .yellow3 {
  color: var(--hb-muted) !important;
}

body:has(#app .redEnveBody) .redEnveButtons {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(330px, 66vw) !important;
  height: 68px !important;
  margin: 16px auto 28px !important;
  cursor: pointer;
  background: linear-gradient(180deg, #fff0b5 0, #f0bd57 48%, #8e5f1d 100%) !important;
  border: 1px solid rgba(255, 235, 177, .78);
  border-radius: 999px;
  box-shadow: 0 14px 34px rgba(213, 155, 53, .34), inset 0 1px 0 rgba(255, 255, 255, .56);
  transition: transform .18s ease, box-shadow .18s ease !important;
}

body:has(#app .redEnveBody) .redEnveButtons::before {
  content: "立即抢红包";
  color: #120d05;
  font-size: 25px;
  font-weight: 900;
  letter-spacing: 0;
}

body:has(#app .redEnveBody) .redEnveButtons:hover {
  transform: translateY(-1px) scale(1.04) !important;
  box-shadow: 0 18px 42px rgba(213, 155, 53, .42), inset 0 1px 0 rgba(255, 255, 255, .66);
}

body:has(#app .redEnveBody) .activityInfo,
body:has(#app .redEnveBody) .activityDes {
  width: min(1120px, calc(100% - 44px));
  margin-left: auto;
  margin-right: auto;
}

body:has(#app .redEnveBody) .activityInfo {
  margin-top: 32px;
}

body:has(#app .redEnveBody) .h80,
body:has(#app .redEnveBody) .h400,
body:has(#app .redEnveBody) .h250 {
  height: 14px !important;
}

body:has(#app .redEnveBody) .activityInfo .activityTop,
body:has(#app .redEnveBody) .activityDes .activityDesTop {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 270px !important;
  height: 58px !important;
  top: -32px !important;
  background: linear-gradient(180deg, #2b210f 0, #151108 100%) !important;
  border: 1px solid var(--hb-line);
  border-radius: 999px;
  box-shadow: var(--hb-shadow);
}

body:has(#app .redEnveBody) .activityInfo .activityTop::before,
body:has(#app .redEnveBody) .activityDes .activityDesTop::before {
  color: var(--hb-gold);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0;
}

body:has(#app .redEnveBody) .activityInfo .activityTop::before {
  content: "活动详情";
}

body:has(#app .redEnveBody) .activityDes .activityDesTop::before {
  content: "活动细则";
}

body:has(#app .redEnveBody) .activityInfo table,
body:has(#app .redEnveBody) .myRedEnveBoxMain table {
  width: 100% !important;
  overflow: hidden;
  border: 1px solid var(--hb-line) !important;
  border-radius: 18px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  color: var(--hb-text) !important;
  background: rgba(16, 13, 8, .92) !important;
  box-shadow: var(--hb-shadow);
}

body:has(#app .redEnveBody) .activityInfo table tr:first-child,
body:has(#app .redEnveBody) .activityInfo table tr:nth-child(1),
body:has(#app .redEnveBody) .myRedEnveBoxMain table tr:first-child {
  background: linear-gradient(180deg, #2b210f, #171208) !important;
  color: var(--hb-gold) !important;
  font-weight: 900 !important;
}

body:has(#app .redEnveBody) .activityInfo table td,
body:has(#app .redEnveBody) .myRedEnveBoxMain table td {
  min-height: 58px;
  border-top: 1px solid rgba(245, 201, 106, .18) !important;
  border-left: 1px solid rgba(245, 201, 106, .18) !important;
  background: rgba(18, 14, 8, .74) !important;
  color: var(--hb-text) !important;
}

body:has(#app .redEnveBody) .activityInfo table tr:not(:first-child):hover td,
body:has(#app .redEnveBody) .myRedEnveBoxMain table tr:not(:first-child):hover td {
  background: rgba(245, 201, 106, .07) !important;
}

body:has(#app .redEnveBody) .activityInfo .activityBot {
  width: 100% !important;
  height: auto !important;
  margin: 16px auto 10px !important;
  padding: 18px 24px;
  color: var(--hb-text) !important;
  font-size: 16px !important;
  line-height: 1.9;
  background: rgba(16, 13, 8, .78);
  border: 1px solid var(--hb-line);
  border-radius: 18px;
  box-shadow: var(--hb-shadow);
}

body:has(#app .redEnveBody) .activityDes {
  margin-top: 24px;
  margin-bottom: 10px !important;
  background: linear-gradient(180deg, rgba(21, 17, 10, .92), rgba(9, 8, 6, .94)) !important;
  border: 1px solid var(--hb-line);
  border-radius: 18px !important;
  box-shadow: var(--hb-shadow);
}

body:has(#app .redEnveBody) .activityDes .activityDesMain {
  width: 100% !important;
  padding: 42px 36px 14px !important;
  color: var(--hb-text) !important;
  font-size: 16px !important;
  line-height: 1.85;
}

body:has(#app .redEnveBody) .activityDes .activityDesMain p {
  line-height: 1.85 !important;
  margin: 0 0 6px !important;
}

body:has(#app .redEnveBody) .activityDes .activityDesMain p:last-child {
  margin-bottom: 0 !important;
}

body:has(#app .redEnveBody) .botLeft,
body:has(#app .redEnveBody) .botright {
  display: none !important;
}

body:has(#app .redEnveBody) .rightFloat a,
body:has(#app .redEnveBody) .rightFloat .currenTimePeriod {
  background-color: rgba(18, 14, 8, .88) !important;
  border: 1px solid var(--hb-line);
  box-shadow: var(--hb-shadow);
}

body:has(#app .redEnveBody) .rightFloat .myRedEnves {
  background-color: rgba(18, 14, 8, .88) !important;
  filter: sepia(1) saturate(1.25) hue-rotate(352deg) brightness(1.05);
}

body:has(#app .redEnveBody) .interfaceLock {
  background: rgba(0, 0, 0, .72) !important;
  backdrop-filter: blur(3px);
}

body:has(#app .divIndex)::before,
body:has(#app .divIndex) #app::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999998;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(3px);
}

body:has(#app .redEnveBody) .divIndex {
  z-index: 1000000;
  animation: hb-state-pop .2s ease-out both;
}

body:has(#app .redEnveBody) .zhongjiang,
body:has(#app .redEnveBody) .qiangwan,
body:has(#app .redEnveBody) .weikaishi,
body:has(#app .redEnveBody) .henbaoqian {
  position: fixed;
  top: 50%;
  left: 50%;
  right: auto;
  width: min(82vw, 320px);
  height: auto;
  aspect-ratio: 320 / 546;
  margin: 0;
  padding: 0 !important;
  transform: translate(-50%, -50%);
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .5);
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
}

body:has(#app .redEnveBody) .henbaoqian {
  background-image: url("/static/image/henbaoqian.png") !important;
}

body:has(#app .redEnveBody) .qiangwan {
  background-image: url("/static/image/qiangwan.png") !important;
}

body:has(#app .redEnveBody) .weikaishi {
  background-image: url("/static/image/weikaishi.png") !important;
}

body:has(#app .redEnveBody) .zhongjiang {
  width: min(86vw, 430px);
  aspect-ratio: 500 / 620;
  background-image: url("/static/image/zhongjiangla.png") !important;
}

body:has(#app .redEnveBody) .myRedEnveBox {
  background: linear-gradient(180deg, #21190c, #0e0b06) !important;
  border: 1px solid rgba(245, 201, 106, .45);
  border-radius: 18px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .64), inset 0 1px 0 rgba(255, 255, 255, .05);
}

body:has(#app .redEnveBody) .divIndex p,
body:has(#app .redEnveBody) .myRedEnveBoxMain p,
body:has(#app .redEnveBody) .myRedEnveBoxMain .page a,
body:has(#app .redEnveBody) .myRedEnveBoxMain .page .num span {
  color: var(--hb-text) !important;
}

body:has(#app .redEnveBody) .henbaoqian p,
body:has(#app .redEnveBody) .qiangwan p,
body:has(#app .redEnveBody) .weikaishi p,
body:has(#app .redEnveBody) .zhongjiang p {
  position: absolute;
  left: 9%;
  right: 9%;
  margin: 0 !important;
  text-align: center !important;
  color: #fff6d8 !important;
  font-weight: 800;
  line-height: 1.5 !important;
  text-shadow: 0 2px 6px rgba(79, 0, 0, .7);
}

body:has(#app .redEnveBody) .henbaoqian p {
  top: 55%;
  font-size: 18px !important;
}

body:has(#app .redEnveBody) .qiangwan p,
body:has(#app .redEnveBody) .weikaishi p {
  top: 55%;
  font-size: 18px !important;
}

body:has(#app .redEnveBody) .zhongjiang p:first-child {
  top: 58%;
  font-size: 20px !important;
}

body:has(#app .redEnveBody) .zhongjiang p:nth-child(2) {
  top: 65%;
  font-size: 18px !important;
}

body:has(#app .redEnveBody) .zhongjiang .bigFont {
  color: #ffe064 !important;
  font-size: 30px !important;
  padding: 0 4px;
}

body:has(#app .redEnveBody) .henbaoqian .rules {
  position: absolute;
  top: auto !important;
  left: 18%;
  right: 18%;
  bottom: 8%;
  width: auto !important;
  height: 46px;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #ffe67f !important;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
  background: linear-gradient(180deg, #ff4545 0%, #ef202e 54%, #ca1020 100%) !important;
  box-shadow: 0 9px 18px rgba(87, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
}

body:has(#app .redEnveBody) .close {
  width: 54px;
  height: 54px;
  left: 50%;
  right: auto;
  bottom: -58px;
  margin: 0;
  transform: translateX(-50%);
  background: url("/static/image/hongbaocolse.png") center / contain no-repeat !important;
}

body:has(#app .redEnveBody) .close:hover {
  transform: translateX(-50%) rotate(-90deg);
}

body:has(#app .redEnveBody) .myRedEnveBoxMain .page .num span:hover,
body:has(#app .redEnveBody) .myRedEnveBoxMain .page .num span.on {
  background: rgba(245, 201, 106, .18) !important;
  color: var(--hb-gold) !important;
}

body:has(#app .redEnveBody) .myRedEnveBoxMain .page .pageOpt input {
  color: var(--hb-text) !important;
  border: 1px solid var(--hb-line) !important;
  background: rgba(0, 0, 0, .28) !important;
}

@keyframes hb-state-pop {
  from {
    opacity: 0;
    transform: translate(-50%, -48%) scale(.92);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@media screen and (max-width: 768px) {
  body:has(#app .redEnveBody) .redEnveBodyToo,
  body:has(#app .redEnveBody) .redEnveBodyMain,
  body:has(#app .redEnveBody) .redEnveBodyTop .pen {
    width: 100% !important;
  }

  body:has(#app .redEnveBody) .redEnveBodyTop .pen {
    height: 3.9rem !important;
  }

  body:has(#app .redEnveBody) .redEnveBodyMain {
    padding-bottom: .82rem !important;
  }

  body:has(#app .redEnveBody) .redEnveFont {
    height: 1.12rem !important;
    margin-top: -2.55rem !important;
  }

  body:has(#app .redEnveBody) .redEnveFont::before {
    padding: 0 .28rem;
    font-size: .58rem;
  }

  body:has(#app .redEnveBody) .toddyTotal {
    margin-top: .24rem !important;
    font-size: .32rem !important;
  }

  body:has(#app .redEnveBody) .receiveTimes,
  body:has(#app .redEnveBody) .currReceiveTimes {
    font-size: .26rem !important;
  }

  body:has(#app .redEnveBody) .receiveTimes {
    padding: .1rem .26rem;
  }

  body:has(#app .redEnveBody) .redEnveButtons {
    width: 4.6rem !important;
    height: .9rem !important;
    margin: .24rem auto .46rem !important;
  }

  body:has(#app .redEnveBody) .redEnveButtons::before {
    font-size: .32rem;
  }

  body:has(#app .redEnveBody) .activityInfo,
  body:has(#app .redEnveBody) .activityDes {
    width: calc(100% - .42rem);
  }

  body:has(#app .redEnveBody) .activityInfo {
    margin-top: .48rem;
  }

  body:has(#app .redEnveBody) .h80,
  body:has(#app .redEnveBody) .h400,
  body:has(#app .redEnveBody) .h250 {
    height: .18rem !important;
  }

  body:has(#app .redEnveBody) .activityInfo table {
    font-size: .2rem !important;
  }

  body:has(#app .redEnveBody) .activityInfo table td {
    height: .82rem !important;
    padding: .08rem .1rem;
  }

  body:has(#app .redEnveBody) .activityInfo .activityTop,
  body:has(#app .redEnveBody) .activityDes .activityDesTop {
    width: 3.1rem !important;
    height: .68rem !important;
  }

  body:has(#app .redEnveBody) .activityInfo .activityTop::before,
  body:has(#app .redEnveBody) .activityDes .activityDesTop::before {
    font-size: .31rem;
  }

  body:has(#app .redEnveBody) .activityInfo .activityBot,
  body:has(#app .redEnveBody) .activityDes .activityDesMain {
    padding-left: .28rem !important;
    padding-right: .28rem !important;
    font-size: .22rem !important;
  }

  body:has(#app .redEnveBody) .activityInfo .activityBot {
    margin: .22rem auto .12rem !important;
    padding-top: .24rem !important;
    padding-bottom: .24rem !important;
  }

  body:has(#app .redEnveBody) .activityDes {
    margin-top: .22rem;
    margin-bottom: .42rem !important;
  }

  body:has(#app .redEnveBody) .activityDes .activityDesMain {
    padding-top: .52rem !important;
    padding-bottom: .18rem !important;
  }
}