/* Codex UX polish for 88heiliao.com, 2026-06-02 */
:root {
  --codex-bg: #080808;
  --codex-panel: #111111;
  --codex-panel-2: #171717;
  --codex-border: rgba(255, 138, 24, .24);
  --codex-border-soft: rgba(255, 255, 255, .08);
  --codex-text: #f7f3ed;
  --codex-muted: rgba(247, 243, 237, .68);
  --codex-orange: #ff8a18;
  --codex-orange-2: #ffb04a;
  --codex-yellow: #ffc21a;
  --codex-yellow-2: #ffdc4a;
  --codex-shadow: 0 14px 34px rgba(0, 0, 0, .34);
}

html,
body {
  background: var(--codex-bg) !important;
  color: var(--codex-text);
}

body {
  background-image:
    radial-gradient(circle at 18% -12%, rgba(255, 138, 24, .16), transparent 30rem),
    linear-gradient(180deg, #101010 0, #080808 18rem) !important;
}

a,
.active,
.van-tab__text.active {
  color: var(--codex-orange) !important;
}

.header,
.top,
.van-header,
.van-sticky,
.van-sticky--fixed,
.bottom,
.footer,
.public-box,
.public-list-box,
.module,
.module-main,
.box,
.rank-box,
.topic-box,
.actor-box {
  background-color: rgba(12, 12, 12, .96) !important;
}

.header,
.van-sticky--fixed,
.bottom,
.footer {
  border-color: var(--codex-border-soft) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
}

.header .search .logo.logo-img1,
.header .logo.logo-img1 {
  width: 168px !important;
  height: 58px !important;
  object-fit: contain !important;
  display: block !important;
}

.header .search .logo[style],
.van-header .search .logo[style],
.top .search .logo[style] {
  width: 3.75rem !important;
  height: 1.28rem !important;
  min-width: 3.75rem !important;
  background-size: contain !important;
  background-position: left center !important;
  border-radius: .12rem;
}

.search,
.top .content,
.nav_tab,
.van-tabs__wrap {
  background: transparent !important;
}

.seek,
.vault,
.search-input,
input[type="search"],
input[type="text"],
.form-control {
  background: #151515 !important;
  border: 1px solid var(--codex-border) !important;
  color: var(--codex-text) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02);
}

.seek span,
.vault span,
input::placeholder {
  color: var(--codex-muted) !important;
}

.van-tabs__nav,
.nav_tab_left,
.nav_tab_right {
  background: transparent !important;
}

.van-tab,
.swiper-slide,
.type-slide,
.classify a,
.screen a {
  border-radius: 999px !important;
}

.van-tab--active,
.classify a.active,
.screen a.active {
  background: rgba(255, 138, 24, .13) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 138, 24, .32);
}

.vodlist_thumb,
.pack-packcover,
.module-item-pic,
.public-list-exp,
.topic-pic,
.actor-pic,
.lazyload,
img[data-src] {
  background:
    linear-gradient(135deg, rgba(255, 138, 24, .20), rgba(10, 10, 10, .96)),
    url("/upload/site/20260520-1/88heiliao-logo-v2.svg") center / 62% auto no-repeat !important;
}

.vodlist_thumb,
.module-item-pic,
.public-list-exp,
.pack-packcover {
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1px solid var(--codex-border-soft);
  box-shadow: var(--codex-shadow);
}

.vodlist_thumb img,
.module-item-pic img,
.public-list-exp img,
.pack-packcover img,
.topic-pic img,
.actor-pic img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.vodlist_title,
.module-item-title,
.public-list-title,
.pack-title,
.topic-title,
.actor-title,
.title {
  color: var(--codex-text) !important;
  letter-spacing: 0 !important;
  line-height: 1.45 !important;
}

.vodlist_title,
.module-item-title,
.public-list-title,
.pack-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.9em;
}

.module-heading,
.public-box-title,
.box-title,
.title-box,
.van-cell,
.rank-title {
  color: var(--codex-text) !important;
  border-color: var(--codex-border-soft) !important;
}

.module-heading::before,
.public-box-title::before,
.box-title::before {
  background: linear-gradient(180deg, var(--codex-orange-2), var(--codex-orange)) !important;
  border-radius: 8px;
}

.btn,
.button,
button,
.submit,
.mac_btn,
.van-button {
  background: linear-gradient(180deg, #ff9a22, #e36b00) !important;
  border: 0 !important;
  color: #111 !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
}

.footer,
.bottom,
.tabbar,
.van-tabbar {
  background: linear-gradient(180deg, #15110b, #080808) !important;
  border-top: 1px solid rgba(255, 138, 24, .42) !important;
  color: var(--codex-text) !important;
}

.footer *,
.bottom *,
.tabbar *,
.van-tabbar *,
.bottom a,
.tabbar a,
.van-tabbar-item,
.van-tabbar-item__text,
.van-tabbar-item__text span {
  color: rgba(247, 243, 237, .78) !important;
}

.bottom a.active,
.tabbar a.active,
.van-tabbar-item--active,
.van-tabbar-item--active .van-tabbar-item__text span {
  color: var(--codex-orange) !important;
  font-weight: 900 !important;
}

.tabbar_item__img,
.van-tabbar-item__icon,
.bottom i,
.tabbar i {
  filter: none !important;
  opacity: .95 !important;
}

.codex-page-h1 {
  max-width: 1200px;
  margin: 14px auto 8px;
  padding: 0 14px;
  color: var(--codex-text);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.35;
}

.codex-real-search-tip {
  margin: 8px 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--codex-border);
  border-radius: 8px;
  background: rgba(255, 138, 24, .08);
  color: var(--codex-muted);
  font-size: 13px;
  line-height: 1.5;
}

.codex-img-fallback {
  object-fit: contain !important;
  padding: 12% !important;
  background: linear-gradient(135deg, #ff8a18, #0b0b0b) !important;
}

.hl-mobile-entry {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: .22rem !important;
  margin: .28rem 0 .34rem !important;
}

.hl-mobile-entry a,
.hl-entry-card {
  position: relative;
  display: block !important;
  min-height: 1.52rem;
  padding: .28rem .3rem !important;
  overflow: hidden;
  border-radius: 8px !important;
  border: 1px solid var(--codex-border) !important;
  background: linear-gradient(145deg, rgba(255, 138, 24, .14), rgba(17, 17, 17, .98) 54%) !important;
  color: var(--codex-text) !important;
  text-decoration: none !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
}

.hl-mobile-entry a:nth-child(3),
.hl-entry-card.is-primary {
  background: linear-gradient(145deg, rgba(255, 138, 24, .25), rgba(31, 17, 8, .98) 58%) !important;
}

.hl-mobile-entry strong {
  display: block !important;
  color: var(--codex-text) !important;
  font-size: .36rem !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

.hl-mobile-entry span {
  display: block !important;
  margin-top: .08rem;
  color: var(--codex-muted) !important;
  font-size: .25rem !important;
  line-height: 1.35 !important;
}

.codex-88-ui .van-tabbar__placeholder {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: calc(66px + env(safe-area-inset-bottom)) !important;
}

.codex-88-ui .van-tabbar {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 66px !important;
  height: calc(66px + env(safe-area-inset-bottom)) !important;
  background: linear-gradient(180deg, #15110b, #080808) !important;
  box-shadow: 0 -10px 24px rgba(0, 0, 0, .26) !important;
  z-index: 99999 !important;
}

.codex-88-ui .van-tabbar--fixed {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}

.codex-88-ui .van-tabbar-item {
  display: flex !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  color: rgba(247, 243, 237, .78) !important;
}

.codex-88-ui .van-tabbar-item__icon {
  display: none !important;
}

.codex-88-ui .van-tabbar-item__text span {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: rgba(247, 243, 237, .78) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.codex-88-ui .van-tabbar-item--active .van-tabbar-item__text span {
  color: var(--codex-orange) !important;
  font-weight: 900 !important;
}

.codex-88-ui .van-cell--clickable {
  border-radius: 8px !important;
  margin: .18rem 0 .16rem !important;
  padding-left: .22rem !important;
  padding-right: .22rem !important;
  background: linear-gradient(90deg, rgba(255, 138, 24, .11), rgba(18, 18, 18, .94)) !important;
}

.codex-88-ui .custom-title {
  font-weight: 800 !important;
}

.codex-88-ui .swipers:has(.van-swipe__track:empty),
.codex-88-ui .carousel:has(.swiper-wrapper:empty),
.codex-88-ui .search_hot:has(.hot_span:empty),
.codex-88-ui .hot_title:has(+ .search_hot .hot_span:empty) {
  display: none !important;
}

.codex-88-ui .search_top .hot_title,
.codex-88-ui .search_hot {
  background: transparent !important;
}

.codex-88-ui .play_video {
  background: #000 !important;
  border-bottom: 1px solid var(--codex-border) !important;
}

.codex-88-ui .play_content {
  background: var(--codex-bg) !important;
}

.codex-88-ui .play_nav {
  margin: .22rem .22rem .12rem !important;
  overflow: hidden !important;
  border: 1px solid var(--codex-border-soft) !important;
  border-radius: 8px !important;
  background: rgba(17, 17, 17, .92) !important;
}

.codex-88-ui .play_nav .van-grid-item__content {
  background: transparent !important;
  padding: .18rem .08rem !important;
}

.codex-88-ui .play_nav .van-image {
  width: .72rem !important;
  height: .72rem !important;
}

.codex-88-ui .play_nav_text {
  margin-top: .06rem !important;
  color: var(--codex-muted) !important;
  font-size: .25rem !important;
}

.codex-88-ui .van-nav-bar,
.codex-88-ui .van-nav-bar__content {
  background: #0b0b0b !important;
  border-color: var(--codex-border-soft) !important;
}

.codex-88-ui .van-search,
.codex-88-ui .van-search__content {
  background: transparent !important;
}

.codex-88-ui .van-search__content--round {
  border: 1px solid var(--codex-border) !important;
  background: #151515 !important;
}

.codex-88-ui .van-field__control {
  color: var(--codex-text) !important;
}

@media (max-width: 767px) {
  body {
    background-image:
      radial-gradient(circle at 0 -8%, rgba(255, 138, 24, .16), transparent 13rem),
      linear-gradient(180deg, #101010 0, #080808 12rem) !important;
  }

  .top .content,
  .header .content {
    padding-left: .28rem !important;
    padding-right: .28rem !important;
  }

  .header .search,
  .top .search {
    min-height: 1.28rem !important;
    align-items: center !important;
    gap: .1rem !important;
    background: transparent !important;
    border-bottom: 0 !important;
  }

  .header .search .logo[style],
  .van-header .search .logo[style],
  .top .search .logo[style] {
    width: 2.85rem !important;
    height: .96rem !important;
    min-width: 2.85rem !important;
    flex: 0 0 2.85rem !important;
    margin-right: .06rem !important;
    background-color: transparent !important;
    background-size: contain !important;
    border-radius: 0 !important;
  }

  .seek {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    height: .74rem !important;
    border-radius: 999px !important;
    padding: 0 .18rem !important;
    overflow: hidden !important;
  }

  .vault {
    height: .74rem !important;
    flex: 0 0 auto !important;
  }

  .vault.ml10 {
    display: none !important;
  }

  .nav_tab .van-tabs__nav {
    gap: .08rem !important;
    padding: .08rem .2rem .12rem !important;
  }

  .nav_tab .van-tab:nth-child(n+9) {
    display: none !important;
  }

  .seek span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .van-tabs__wrap {
    height: .88rem !important;
  }

  .van-tab {
    padding: 0 .18rem !important;
    white-space: nowrap !important;
  }

  .codex-page-h1 {
    margin: .22rem .24rem .12rem;
    padding: 0;
    font-size: .42rem;
  }

  .vodlist_title,
  .module-item-title,
  .public-list-title,
  .pack-title {
    font-size: .32rem !important;
    min-height: 2.9em;
  }

  .bottom,
  .tabbar,
  .van-tabbar {
    padding-bottom: env(safe-area-inset-bottom);
    background: linear-gradient(180deg, #15110b, #080808) !important;
  }
}