/* SPA→静态视觉桥 · comic-pop · 活力片库：亮黄底 + 正红/正蓝点缀 */
:root {
  --pop-yellow: #ffeb3b;
  --pop-yellow-light: #fff9c4;
  --pop-yellow-bg: #fffde7;
  --pop-yellow-dark: #f9a825;
  --pop-red: #e53935;
  --pop-red-dark: #c62828;
  --pop-red-soft: rgba(229, 57, 53, 0.12);
  --pop-blue: #1565c0;
  --pop-blue-dark: #0d47a1;
  --pop-blue-soft: rgba(21, 101, 192, 0.12);
  --bg-page: var(--pop-yellow-bg);
  --bg-page-2: #fff8e1;
  --card: #ffffff;
  --text: #1a1a2e;
  --text-muted: #5d4037;
  --line: #ffe082;
  --gold: var(--pop-red);
  --gold-dim: var(--pop-red-soft);
  --portal-accent: var(--pop-red);
  --portal-accent-hover: var(--pop-red-dark);
  --portal-accent-light: #ef5350;
  --portal-accent-dark: var(--pop-red-dark);
  --portal-accent-soft: var(--pop-red-soft);
  --portal-page: var(--pop-yellow-bg);
  --portal-footer: #1a237e;
  --portal-footer-mid: #0d1642;
  --pink: var(--pop-red);
  --blue: var(--pop-blue);
  --brand: var(--pop-red);
  --accent: var(--pop-red);
  color-scheme: light;
}

/* 页面底色：亮黄活力片库 */
html,
body {
  background: linear-gradient(180deg, #fffef5 0%, var(--pop-yellow-bg) 38%, var(--bg-page-2) 100%) !important;
  color: var(--text) !important;
}

body.body-tpl-portal {
  background: var(--portal-page) !important;
  color: var(--text) !important;
}

/* 顶栏：彩色条带 — 红蓝渐变 + 黄底品牌区 */
body.body-tpl-portal .site-header--portal {
  background: linear-gradient(90deg, var(--pop-red) 0%, var(--pop-red-dark) 42%, var(--pop-blue) 100%) !important;
  border-bottom: 4px solid var(--pop-yellow) !important;
  box-shadow: 0 4px 20px rgba(229, 57, 53, 0.28) !important;
}

body.body-tpl-portal .header-brand--ref .header-brand__logo {
  background: var(--pop-yellow) !important;
  color: var(--pop-red-dark) !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18) !important;
  border: 2px solid #fff !important;
}

body.body-tpl-portal .header-brand__title {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

body.body-tpl-portal .header-brand__sub {
  color: rgba(255, 255, 255, 0.88) !important;
}

body.body-tpl-portal .header-main-nav__link {
  color: rgba(255, 255, 255, 0.92) !important;
  border-radius: 8px;
}

body.body-tpl-portal .header-main-nav__link:hover {
  color: var(--pop-red-dark) !important;
  background: var(--pop-yellow) !important;
}

body.body-tpl-portal .header-main-nav__link--active {
  color: var(--pop-red-dark) !important;
  font-weight: 700 !important;
  background: var(--pop-yellow) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

body.body-tpl-portal .header-main-nav__ico {
  color: inherit !important;
}

body.body-tpl-portal .header-search--with-btn {
  border-color: rgba(255, 255, 255, 0.5) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.15) !important;
}

body.body-tpl-portal .header-search--with-btn input {
  color: #fff !important;
}

body.body-tpl-portal .header-search--with-btn input::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

body.body-tpl-portal .header-search--with-btn:focus-within {
  border-color: var(--pop-yellow) !important;
  box-shadow: 0 0 0 3px rgba(255, 235, 59, 0.35) !important;
  background: rgba(255, 255, 255, 0.22) !important;
}

body.body-tpl-portal .header-search__submit {
  background: var(--pop-yellow) !important;
  color: var(--pop-red-dark) !important;
  font-weight: 700 !important;
}

body.body-tpl-portal .header-search__submit:hover {
  filter: brightness(1.06);
}

body.body-tpl-portal .header-link-login {
  color: rgba(255, 255, 255, 0.9) !important;
}

body.body-tpl-portal .header-link-login:hover {
  color: var(--pop-yellow) !important;
}

body.body-tpl-portal .header-reg--portal {
  background: var(--pop-yellow) !important;
  color: var(--pop-blue-dark) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
}

/* Hero：黄底漫画风 + 红蓝装饰条 */
.hero-cq--banner {
  background: linear-gradient(135deg, var(--pop-yellow-light) 0%, var(--pop-yellow-bg) 55%, #fff8e1 100%) !important;
  border-bottom: 4px solid var(--pop-red) !important;
  position: relative;
}

.hero-cq--banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    var(--pop-red) 0,
    var(--pop-red) 24px,
    var(--pop-blue) 24px,
    var(--pop-blue) 48px
  );
}

.hero-cq--banner .hero-cq__title {
  color: var(--pop-red-dark) !important;
}

.hero-cq--banner .hero-cq__lead {
  color: var(--text-muted) !important;
}

.hero-cq--banner .hero-cq__stat {
  background: #fff !important;
  border: 2px solid var(--line) !important;
  box-shadow: 4px 4px 0 var(--pop-blue-soft) !important;
}

.hero-cq--banner .hero-cq__stat-icon {
  color: var(--pop-red) !important;
}

.hero-cq--banner .hero-cq__stat-num {
  color: var(--pop-blue-dark) !important;
}

.hero-cq--banner .btn-cq--hero-primary {
  color: #fff !important;
  background: linear-gradient(135deg, var(--pop-red), var(--pop-red-dark)) !important;
  border: 2px solid var(--pop-red-dark) !important;
  box-shadow: 4px 4px 0 var(--pop-blue) !important;
}

.hero-cq--banner .btn-cq--hero-primary:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--pop-blue) !important;
}

.hero-cq--banner .btn-cq--hero-secondary {
  color: var(--pop-blue-dark) !important;
  background: #fff !important;
  border: 2px solid var(--pop-blue) !important;
}

.btn-cq--hero-primary,
.btn-cq--primary,
.primary-btn,
.header-search__submit,
.header-reg--portal {
  background: linear-gradient(135deg, var(--pop-red), var(--pop-red-dark)) !important;
  box-shadow: 0 6px 18px rgba(229, 57, 53, 0.32) !important;
}

body.body-tpl-portal .btn-cq--primary {
  background: linear-gradient(135deg, var(--pop-red-dark), var(--pop-red)) !important;
}

.cq-link-all,
.fsp-link-all {
  color: var(--pop-blue) !important;
  font-weight: 700;
}

.cq-link-all:hover {
  color: var(--pop-red) !important;
}

/* 分类色块：正红/正蓝交替 */
.home-pop-cats__card--red {
  background: linear-gradient(145deg, var(--pop-red), var(--pop-red-dark)) !important;
}

.home-pop-cats__card--teal {
  background: linear-gradient(145deg, var(--pop-blue), var(--pop-blue-dark)) !important;
}

.home-pop-cats__card--green {
  background: linear-gradient(145deg, #ef5350, var(--pop-red-dark)) !important;
}

.home-pop-cats__card--purple {
  background: linear-gradient(145deg, #42a5f5, var(--pop-blue)) !important;
}

.home-pop-cats__card--amber {
  background: linear-gradient(145deg, var(--pop-yellow-dark), #ff8f00) !important;
  color: var(--text) !important;
}

.home-pop-cats__card--blue {
  background: linear-gradient(145deg, var(--pop-blue-dark), #283593) !important;
}

.home-pop-cats__card {
  border: 3px solid #fff !important;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.12) !important;
}

.home-pop-cats__card:hover {
  transform: translate(-2px, -3px);
  box-shadow: 6px 6px 0 rgba(21, 101, 192, 0.25) !important;
}

.home-pop-cats__title {
  color: var(--pop-red-dark) !important;
  border-left: 5px solid var(--pop-red) !important;
  padding-left: 12px;
}

/* 卡片：白底 + 红/蓝左边条 */
.tuy-card__badge {
  background: linear-gradient(135deg, var(--pop-red), var(--pop-red-dark)) !important;
  box-shadow: 0 2px 8px rgba(229, 57, 53, 0.35) !important;
}

body.body-tpl-portal .tuy-card__badge {
  background: linear-gradient(135deg, var(--pop-red), var(--pop-red-dark)) !important;
}

.cq-hl-card.fsp-hl-card,
.tuy-card.fsp-hl-card {
  border-radius: 12px !important;
  border: 2px solid var(--line) !important;
  border-left: 5px solid var(--pop-red) !important;
  background: var(--card) !important;
  box-shadow: 0 3px 14px rgba(26, 26, 46, 0.08) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.cq-hl-card.fsp-hl-card:nth-child(even),
.tuy-card.fsp-hl-card:nth-child(even) {
  border-left-color: var(--pop-blue) !important;
}

.cq-hl-card.fsp-hl-card:hover,
.tuy-card.fsp-hl-card:hover {
  transform: translateY(-4px) !important;
  border-color: var(--pop-yellow-dark) !important;
  box-shadow: 0 12px 28px rgba(21, 101, 192, 0.15) !important;
}

.tuy-card__play {
  background: var(--pop-red) !important;
}

.tuy-card__title a:hover {
  color: var(--pop-red) !important;
}

body.body-tpl-portal .tuy-card__pills span {
  background: var(--pop-blue-soft) !important;
  color: var(--pop-blue-dark) !important;
  border: 1px solid rgba(21, 101, 192, 0.2) !important;
}

.cq-tab--active,
body.body-tpl-portal .cq-tab--active,
.filter-chip--active,
body.body-tpl-portal .inner-page--cq .filter-chip--active {
  background: linear-gradient(135deg, var(--pop-red-dark), var(--pop-red)) !important;
  box-shadow: 0 4px 14px rgba(229, 57, 53, 0.32) !important;
}

.filter-chip--active {
  border-color: transparent !important;
  color: #fff !important;
}

.filter-chip {
  border-radius: 999px !important;
  border: 2px solid var(--line) !important;
}

.filter-chip:hover {
  border-color: var(--pop-blue) !important;
  color: var(--pop-blue-dark) !important;
  background: var(--pop-blue-soft) !important;
}

.page-panel,
.page-panel--cq-movies {
  background: var(--card) !important;
  border: 2px solid var(--line) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 12px rgba(249, 168, 37, 0.12) !important;
}

.cq-block__head h2 {
  border-left: 5px solid var(--pop-blue) !important;
  padding-left: 12px;
}

/* 详情页 */
.pill-badge {
  color: var(--pop-red-dark) !important;
  background: var(--pop-red-soft) !important;
  border: 1px solid rgba(229, 57, 53, 0.25) !important;
}

.ghost-btn {
  color: var(--pop-blue-dark) !important;
  border: 2px solid var(--pop-blue) !important;
}

.detail-hero__inner {
  background: linear-gradient(135deg, #fffffffa, var(--pop-yellow-bg)) !important;
  border: 2px solid var(--line) !important;
}

/* 平台特色 */
.tuyona-features__card {
  border: 2px solid var(--line) !important;
  border-top: 4px solid var(--pop-red) !important;
  background: #fff !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.tuyona-features__card:nth-child(2) {
  border-top-color: var(--pop-blue) !important;
}

.tuyona-features__card:nth-child(3) {
  border-top-color: var(--pop-yellow-dark) !important;
}

.tuyona-features__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(21, 101, 192, 0.12) !important;
}

.tuyona-features__card h3 {
  color: var(--pop-red-dark) !important;
}

/* 页脚：深蓝底 + 红黄高光 */
body.body-tpl-portal .footer-tuy__upper {
  background: linear-gradient(180deg, var(--pop-blue-dark) 0%, var(--portal-footer) 100%) !important;
  border-top: 4px solid var(--pop-yellow) !important;
}

body.body-tpl-portal .footer-tuy__h--pink {
  color: var(--pop-yellow) !important;
}

body.body-tpl-portal .footer-tuy__h--blue {
  color: #90caf9 !important;
}

body.body-tpl-portal .footer-tuy__pills > span {
  color: #e3f2fd !important;
  border-color: rgba(144, 202, 249, 0.45) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

body.body-tpl-portal .footer-tuy__cta {
  background: linear-gradient(135deg, var(--pop-red), var(--pop-red-dark)) !important;
  box-shadow: 0 4px 16px rgba(229, 57, 53, 0.38) !important;
}

body.body-tpl-portal .footer-tuy__nav a:hover {
  color: var(--pop-yellow) !important;
}

body.body-tpl-portal .footer-tuy__mid {
  background: var(--portal-footer-mid) !important;
}

body.body-tpl-portal .footer-tuy__mid-links a:hover {
  color: var(--pop-yellow) !important;
}

.footer-tuy__seo {
  background: #060a18 !important;
  color: #78909c !important;
  border-top: 2px solid var(--pop-red-dark) !important;
}

/* 通用覆盖 */
.section-title h1,
.cq-block__head h2,
h1, h2, h3 {
  color: var(--text) !important;
}

a {
  color: var(--pop-blue);
}

a:hover {
  color: var(--pop-red);
}

.nav-search button,
.btn-primary,
.primary-btn {
  background: linear-gradient(135deg, var(--pop-red), var(--pop-red-dark)) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.card,
.movie-card,
.video-card {
  background: var(--card) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

/* 移动端顶栏 */
@media (max-width: 768px) {
  body.body-tpl-portal .header-inner--ref {
    gap: 10px;
  }

  body.body-tpl-portal .header-search--with-btn {
    max-width: none;
    flex: 1 1 100%;
  }

  body.body-tpl-portal .header-main-nav {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body.body-tpl-portal .header-main-nav::-webkit-scrollbar {
    display: none;
  }

  body.body-tpl-portal .header-main-nav__link {
    flex-shrink: 0;
    font-size: 0.8125rem;
    padding: 6px 10px;
  }

  .hero-cq--banner .hero-cq__stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}