@charset "UTF-8";

/* Tangxin Theater H5 App-ready visual system v2.
 * A restrained cinematic product shell for public mobile pages. It adds no
 * content and does not alter player, SEO or member authorization behavior.
 */

:root {
  --tx-app-bg: #10080c;
  --tx-app-surface: #1a1015;
  --tx-app-surface-raised: #24141b;
  --tx-app-line: rgba(255, 243, 217, .12);
  --tx-app-line-strong: rgba(238, 70, 104, .34);
  --tx-app-text: #fff3d9;
  --tx-app-muted: #b9a8aa;
  --tx-app-accent: #ee4668;
  --tx-app-accent-strong: #c93152;
  --tx-app-success: #51d3b0;
  --tx-app-radius-sm: 10px;
  --tx-app-radius-md: 14px;
  --tx-app-radius-lg: 20px;
  --tx-app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --tx-app-safe-left: env(safe-area-inset-left, 0px);
  --tx-app-safe-right: env(safe-area-inset-right, 0px);
  --tx-app-vh: 100dvh;
}

@media screen and (max-width: 820px) {
  html {
    background: var(--tx-app-bg) !important;
    color-scheme: dark;
    overscroll-behavior-y: none;
  }

  body.home-index-body,
  body.tx-vod-cinema-page,
  body.auth-ui-page {
    background:
      radial-gradient(circle at 82% -8%, rgba(238, 70, 104, .08), transparent 34%),
      var(--tx-app-bg) !important;
    color: var(--tx-app-text) !important;
    font-family: "HarmonyOS Sans SC", "Noto Sans SC", "Microsoft YaHei UI", sans-serif;
    min-height: var(--tx-app-vh);
    overscroll-behavior-y: contain;
  }

  body.home-index-body a,
  body.home-index-body button,
  body.tx-vod-cinema-page a,
  body.tx-vod-cinema-page button,
  body.auth-ui-page a,
  body.auth-ui-page button,
  body.auth-ui-page input {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* App bar: dense, stable and visibly separate from scrolling content. */
  html.tx-h5-dark-sync body.home-index-body #topnav .mobile-head,
  body.tx-vod-cinema-page #topnav .mobile-head,
  body.auth-ui-page #topnav .mobile-head {
    -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
    background: rgba(16, 8, 12, .96) !important;
    border-bottom: 1px solid var(--tx-app-line) !important;
    box-shadow: none !important;
    isolation: isolate;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease !important;
  }

  html.tx-h5-dark-sync body.home-index-body.tx-h5-app-scrolled #topnav .mobile-head,
  body.tx-vod-cinema-page.tx-h5-app-scrolled #topnav .mobile-head,
  body.auth-ui-page.tx-h5-app-scrolled #topnav .mobile-head {
    background: rgba(10, 6, 9, .985) !important;
    border-bottom-color: rgba(238, 70, 104, .22) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .28) !important;
  }

  #topnav .mobile-head .head_a {
    align-items: center !important;
  }

  #topnav .mobile-head .head_logo a,
  #topnav .mobile-head .head_user li.top_ico > a,
  #topnav .mobile-head .head_user li.top_ico > button {
    border-radius: 12px !important;
  }

  #topnav .mobile-head .head_search_capsule {
    background: #1a1015 !important;
    border: 1px solid rgba(255, 243, 217, .14) !important;
    border-radius: 14px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
    transition: border-color .18s ease, box-shadow .18s ease !important;
  }

  #topnav .mobile-head .head_search_capsule:focus-within {
    border-color: rgba(238, 70, 104, .65) !important;
    box-shadow: 0 0 0 3px rgba(238, 70, 104, .12) !important;
  }

  #topnav .mobile-head .head_search_capsule input {
    caret-color: var(--tx-app-accent) !important;
    color: var(--tx-app-text) !important;
  }

  #topnav .mobile-head .head_search_capsule input::placeholder {
    color: #9f8f93 !important;
    opacity: 1;
  }

  #topnav .mobile-head .head_search_capsule button {
    background: linear-gradient(135deg, var(--tx-app-accent), var(--tx-app-accent-strong)) !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 7px 18px rgba(201, 49, 82, .24) !important;
    color: #fff !important;
    font-weight: 750 !important;
  }

  /* Homepage hero: image-first, readable and controlled like a streaming app. */
  body.home-index-body .tx-cinema-hero {
    background: #0d080b !important;
    border-bottom: 1px solid rgba(238, 70, 104, .14) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .22) !important;
  }

  body.home-index-body .tx-cinema-hero__copy {
    -webkit-backdrop-filter: blur(18px) saturate(1.06) !important;
    backdrop-filter: blur(18px) saturate(1.06) !important;
    background: linear-gradient(150deg, rgba(35, 16, 24, .94), rgba(18, 11, 15, .91)) !important;
    border: 1px solid rgba(255, 243, 217, .13) !important;
    border-left: 3px solid var(--tx-app-accent) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .34) !important;
  }

  body.home-index-body .tx-cinema-hero__copy h2 {
    letter-spacing: -.035em;
    text-wrap: balance;
  }

  body.home-index-body .tx-cinema-hero__actions a,
  body.home-index-body .tx-cinema-hero__actions button {
    border-radius: 12px !important;
    min-height: 44px !important;
  }

  body.home-index-body .tx-cinema-hero__nav {
    gap: 8px !important;
  }

  body.home-index-body .tx-cinema-hero__nav-item {
    background: #171015 !important;
    border: 1px solid rgba(255, 243, 217, .12) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    min-height: 44px !important;
    opacity: .78;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease !important;
  }

  body.home-index-body .tx-cinema-hero__nav-item.is-active,
  body.home-index-body .tx-cinema-hero__nav-item[aria-selected="true"] {
    background: #2a111a !important;
    border-color: rgba(238, 70, 104, .76) !important;
    box-shadow: inset 0 -2px 0 var(--tx-app-accent) !important;
    color: var(--tx-app-text) !important;
    opacity: 1;
  }

  /* Content hierarchy: clearer section identity and consistent poster cards. */
  body.home-index-body .home-unified .hu-section-head {
    min-height: 56px !important;
    padding-left: 14px !important;
  }

  body.home-index-body .home-unified .hu-section-head::before {
    background: linear-gradient(180deg, var(--tx-app-accent), #7d1f38);
    border-radius: 999px;
    content: "";
    height: 22px;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
  }

  body.home-index-body .home-unified .hu-section-head h2 {
    color: var(--tx-app-text) !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    letter-spacing: -.025em;
  }

  body.home-index-body .home-unified .pc_more {
    background: #1c1117 !important;
    border: 1px solid var(--tx-app-line) !important;
    border-radius: 10px !important;
    color: var(--tx-app-muted) !important;
    min-height: 36px;
  }

  body.home-index-body .home-unified .vodlist_item,
  body.home-index-body .home-unified .tx-trend-card,
  body.home-index-body .home-unified .tx-search-spotlight__item {
    background: transparent !important;
    border-radius: var(--tx-app-radius-md) !important;
  }

  body.home-index-body .home-unified .vodlist_thumb,
  body.home-index-body .home-unified .zixun_img,
  body.home-index-body .home-unified .tx-trend-card__media,
  body.home-index-body .home-unified .tx-search-spotlight__media {
    background-color: var(--tx-app-surface) !important;
    border: 1px solid rgba(255, 243, 217, .09) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .2) !important;
    overflow: hidden !important;
  }

  body.home-index-body .home-unified .vodlist_title,
  body.home-index-body .home-unified .vodlist_title a {
    color: var(--tx-app-text) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: -.01em;
    line-height: 1.35 !important;
  }

  body.home-index-body .home-unified .vodlist_sub,
  body.home-index-body .home-unified .text_muted {
    color: var(--tx-app-muted) !important;
  }

  body.home-index-body .home-refresh-btn {
    background: #1b1116 !important;
    border: 1px solid rgba(255, 243, 217, .14) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
    color: var(--tx-app-text) !important;
    min-height: 44px !important;
  }

  body.home-index-body .home-refresh-btn .iconfont {
    color: var(--tx-app-accent) !important;
  }

  /* Detail/play cards retain cinema content while adopting the app shell. */
  body.tx-vod-detail-page .vod-detail-hero-box,
  body.tx-vod-detail-page .detail_list_box,
  body.tx-vod-detail-page .vod-detail-story,
  body.tx-vod-detail-page .vod-detail-section {
    background: linear-gradient(145deg, rgba(35, 18, 25, .96), rgba(22, 13, 18, .96)) !important;
    border-color: rgba(255, 243, 217, .1) !important;
    border-radius: var(--tx-app-radius-lg) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .22) !important;
  }

  body.tx-vod-detail-page .vod-detail-hero-box h1 {
    color: var(--tx-app-text) !important;
    font-weight: 850 !important;
    letter-spacing: -.035em;
  }

  body.tx-vod-detail-page .vod-detail-hero-box .btn,
  body.tx-vod-detail-page .vod-detail-hero-box a[class*="btn"],
  body.tx-vod-play-page button,
  body.tx-vod-play-page a[class*="btn"] {
    border-radius: 12px !important;
    min-height: 44px !important;
  }

  body.tx-vod-play-page .player_video,
  body.tx-vod-play-page .MacPlayer,
  body.tx-vod-play-page .player_video iframe {
    background: #000 !important;
  }

  body.auth-ui-page input:not([type="checkbox"]):not([type="radio"]),
  body.auth-ui-page select,
  body.auth-ui-page textarea {
    background: #1a1015 !important;
    border: 1px solid rgba(255, 243, 217, .14) !important;
    border-radius: 12px !important;
    color: var(--tx-app-text) !important;
    min-height: 48px;
  }

  body.auth-ui-page input:focus,
  body.auth-ui-page select:focus,
  body.auth-ui-page textarea:focus {
    border-color: rgba(238, 70, 104, .72) !important;
    box-shadow: 0 0 0 3px rgba(238, 70, 104, .12) !important;
    outline: 0;
  }

  /* Native-like tab bar for future WebView/standalone packaging. */
  body.home-index-body #bottomNav.hidden_mb,
  body.tx-vod-cinema-page #bottomNav.hidden_mb,
  body.auth-ui-page #bottomNav.hidden_mb {
    -webkit-backdrop-filter: blur(20px) saturate(1.08) !important;
    backdrop-filter: blur(20px) saturate(1.08) !important;
    background: rgba(12, 7, 11, .985) !important;
    border-top: 1px solid rgba(255, 243, 217, .12) !important;
    box-shadow: 0 -14px 34px rgba(0, 0, 0, .34) !important;
    height: calc(68px + var(--tx-app-safe-bottom)) !important;
    padding-bottom: var(--tx-app-safe-bottom) !important;
    padding-left: max(4px, var(--tx-app-safe-left)) !important;
    padding-right: max(4px, var(--tx-app-safe-right)) !important;
    z-index: 1200 !important;
  }

  #bottomNav .bottom-nav-item {
    background: transparent !important;
    border: 0 !important;
    border-radius: 12px !important;
    color: #cbbdc0 !important;
    min-height: 58px !important;
    position: relative;
  }

  #bottomNav .bottom-nav-item.active {
    background: #281119 !important;
    color: var(--tx-app-text) !important;
  }

  #bottomNav .bottom-nav-item.active::before {
    background: var(--tx-app-accent);
    border-radius: 0 0 999px 999px;
    box-shadow: 0 0 16px rgba(238, 70, 104, .45);
    content: "";
    height: 3px;
    left: 27%;
    position: absolute;
    right: 27%;
    top: -5px;
  }

  #bottomNav .bottom-nav-icon {
    height: 23px !important;
    width: 23px !important;
  }

  #bottomNav .bottom-nav-text {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .01em;
  }

  :focus-visible {
    outline: 2px solid var(--tx-app-accent) !important;
    outline-offset: 2px !important;
  }
}

@media (display-mode: standalone) and (max-width: 820px) {
  body.home-index-body,
  body.tx-vod-cinema-page,
  body.auth-ui-page {
    min-height: var(--tx-app-vh);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-index-body *,
  body.tx-vod-cinema-page *,
  body.auth-ui-page * {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}