/* SPA→静态视觉桥 · comic-pop 活力片库 · 亮黄底 + 正红/正蓝 */
:root {
  --comic-yellow: #fff176;
  --comic-yellow-light: #fff9c4;
  --comic-yellow-bg: #fffde7;
  --comic-red: #d32f2f;
  --comic-red-dark: #b71c1c;
  --comic-red-light: #ef5350;
  --comic-blue: #1565c0;
  --comic-blue-dark: #0d47a1;
  --comic-blue-light: #42a5f5;
  --comic-surface: #ffffff;
  --comic-surface2: #fffef5;
  --comic-text: #1a1a1a;
  --comic-muted: #616161;
  --comic-line: rgba(21, 101, 192, 0.18);
  --comic-red-soft: rgba(211, 47, 47, 0.12);
  --comic-blue-soft: rgba(21, 101, 192, 0.12);

  --pink: var(--comic-red);
  --blue: var(--comic-blue);
  --brand: var(--comic-red-dark);
  --accent: var(--comic-red);
  --portal-accent: var(--comic-red);
  --portal-accent-hover: var(--comic-red-dark);
  --portal-accent-light: var(--comic-red-light);
  --portal-accent-dark: var(--comic-red-dark);
  --portal-accent-soft: var(--comic-red-soft);
  --portal-coral: var(--comic-red);
  --portal-coral-soft: var(--comic-red-soft);
  --portal-page: var(--comic-yellow-bg);
  --portal-footer: #fff176;
  --portal-footer-mid: #fff9c4;
  --bg: var(--comic-yellow-bg);
  --bg2: var(--comic-yellow-light);
  --card: var(--comic-surface);
  --text: var(--comic-text);
  --muted: var(--comic-muted);
  --line: var(--comic-line);
  --gold: var(--comic-blue);
  --gold-dim: var(--comic-blue-soft);
  --header-bg: var(--comic-red);
  --body-bg: var(--comic-yellow-bg);
  color-scheme: light;
}

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

body,
.page,
.site-wrap,
.app-shell,
.layout,
.main-wrap,
#app,
.page-main {
  background: transparent !important;
  color: var(--comic-text) !important;
}

body.body-tpl-portal,
body.body-skin-comic-pop {
  --portal-page: var(--comic-yellow-bg);
  background: var(--comic-yellow-bg) !important;
}

/* ── 顶栏提示条：红蓝渐变 ── */
.portal-top-strip--comic {
  color: #fff !important;
  background: linear-gradient(90deg, var(--comic-red-dark), var(--comic-red) 42%, var(--comic-blue)) !important;
  border-bottom: 2px solid var(--comic-yellow) !important;
}

.portal-top-strip--comic .portal-top-strip__dot {
  background: var(--comic-yellow) !important;
  box-shadow: 0 0 0 2px rgba(255, 241, 118, 0.45) !important;
}

/* ── 彩色顶栏 ── */
.site-header,
.header,
.topbar,
.nav-bar,
.header-main,
.portal-header,
header.site-header,
.header-bar {
  background: linear-gradient(135deg, var(--comic-red) 0%, var(--comic-red-dark) 55%, var(--comic-blue-dark)) !important;
  border-bottom: 3px solid var(--comic-yellow) !important;
  box-shadow: 0 6px 24px rgba(183, 28, 28, 0.22) !important;
  color: #fff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.body-tpl-portal .site-header--comic,
body.body-skin-comic-pop .site-header--comic {
  background: linear-gradient(135deg, var(--comic-red) 0%, var(--comic-red-dark) 50%, var(--comic-blue-dark)) !important;
  border-bottom-color: var(--comic-yellow) !important;
}

.header-brand__title,
.brand-text,
.site-brand,
.logo-text {
  color: #fff !important;
}

.header-brand--comic .header-brand__logo,
.header-brand--ref .header-brand__logo {
  background: var(--comic-yellow) !important;
  color: var(--comic-red-dark) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
}

.header-brand__sub {
  color: rgba(255, 255, 255, 0.82) !important;
}

.header-main-nav__link {
  color: rgba(255, 255, 255, 0.92) !important;
}

.header-main-nav__link:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.14) !important;
}

.header-main-nav__link--active,
.header-main-nav__link[aria-current="page"] {
  color: var(--comic-red-dark) !important;
  background: var(--comic-yellow) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

.header-main-nav__ico {
  color: var(--comic-yellow) !important;
}

.header-main-nav__link--active .header-main-nav__ico {
  color: var(--comic-red-dark) !important;
}

.header-search--comic,
.header-search--with-btn {
  background: #fff !important;
  border: 2px solid var(--comic-yellow) !important;
}

.header-search--with-btn:focus-within {
  border-color: var(--comic-yellow) !important;
  box-shadow: 0 0 0 3px rgba(255, 241, 118, 0.45) !important;
}

.header-search--with-btn input {
  color: var(--comic-text) !important;
}

.header-search--with-btn input::placeholder {
  color: #9e9e9e !important;
}

.header-search__submit {
  background: var(--comic-blue) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.header-search__submit:hover {
  background: var(--comic-blue-dark) !important;
}

.header-reg--portal,
.nav-search button,
.btn-primary,
.primary-btn {
  background: var(--comic-blue) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.header-mobile-toggle {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 2px solid var(--comic-yellow) !important;
  color: #fff !important;
}

/* ── 卡片 ── */
.card,
.movie-card,
.poster-card,
.grid-card,
.media-card,
.item-card,
.fsp-hl-card,
.tuy-card,
.page-panel,
.szst-main-sheet,
.hot-sidebar,
.tuyona-features__card {
  background: var(--comic-surface) !important;
  border-color: var(--comic-line) !important;
  color: var(--comic-text) !important;
}

.fsp-hl-card,
.tuy-card.fsp-hl-card {
  border: 2px solid var(--comic-line) !important;
  border-radius: 12px !important;
}

.fsp-hl-card:hover,
.tuy-card:hover,
.cq-hl-card.fsp-hl-card:hover {
  border-color: var(--comic-red) !important;
  box-shadow: 0 12px 32px rgba(211, 47, 47, 0.16) !important;
}

.tuy-card__badge {
  background: var(--comic-red) !important;
  border-radius: 4px !important;
}

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

.tuy-card__pills span {
  background: var(--comic-yellow-light) !important;
  color: var(--comic-blue-dark) !important;
  border: 1px solid rgba(21, 101, 192, 0.2) !important;
}

/* ── 分类横滑 pill ── */
body.body-skin-comic-pop .home-cat-rail--comic .home-cat-rail__title {
  color: var(--comic-red-dark) !important;
  border-left-color: var(--comic-red) !important;
}

body.body-skin-comic-pop .home-cat-rail__pill--red {
  background: var(--comic-red-soft) !important;
  border: 2px solid var(--comic-red) !important;
}

body.body-skin-comic-pop .home-cat-rail__pill--blue {
  background: var(--comic-blue-soft) !important;
  border: 2px solid var(--comic-blue) !important;
}

body.body-skin-comic-pop .home-cat-rail__pill--yellow {
  background: var(--comic-yellow-light) !important;
  border: 2px solid #f9a825 !important;
}

body.body-skin-comic-pop .home-cat-rail__pill-name {
  color: var(--comic-text) !important;
}

body.body-skin-comic-pop .home-cat-rail__pill-count {
  color: var(--comic-red) !important;
}

body.body-skin-comic-pop .home-cat-rail__pill:hover {
  transform: translateY(-2px) !important;
}

/* ── 区块标题 ── */
.home-cat-rail__title,
.hero-comic__title,
.szst-subhead__title h1,
.cq-block__head h2 {
  color: var(--comic-red-dark) !important;
}

.hero-szst__tagline,
.home-cat-rail__hint,
.home-hot-rail__hint {
  color: var(--comic-muted) !important;
}

body.body-skin-comic-pop .cq-block--comic .cq-block__head--row h2 {
  border-left-color: var(--comic-blue) !important;
}

/* ── 筛选 chip ── */
.filter-chip {
  background: var(--comic-surface) !important;
  border: 2px solid var(--comic-line) !important;
  color: var(--comic-text) !important;
}

.filter-chip:hover {
  border-color: var(--comic-blue) !important;
  color: var(--comic-blue) !important;
}

.filter-chip--active,
.inner-page--cq .filter-chip--active {
  background: var(--comic-red) !important;
  border-color: var(--comic-red) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(211, 47, 47, 0.28) !important;
}

.cq-link-all,
.fsp-link-all,
.home-hot-rail__more {
  color: var(--comic-blue) !important;
  font-weight: 800 !important;
}

.cq-link-all:hover,
.home-hot-rail__more:hover {
  color: var(--comic-red) !important;
}

.section-title h1,
.section-title h2,
.section-head h2,
h1, h2, h3,
.home-h1,
.page-title {
  color: var(--comic-text) !important;
}

.section-title p,
.section-sub,
.cq-block__sub {
  color: var(--comic-muted) !important;
}

/* ── 页脚：黄底 + 红蓝字 ── */
.footer,
.site-footer,
footer,
.footer-tuy__upper--comic {
  background: linear-gradient(180deg, var(--comic-yellow-light) 0%, var(--comic-yellow) 100%) !important;
  color: var(--comic-text) !important;
}

.footer-tuy__logo-text strong {
  color: var(--comic-red-dark) !important;
}

.footer-tuy__logo-text span {
  color: var(--comic-blue-dark) !important;
}

.footer-tuy__intro,
.footer-tuy__copy,
.footer-tuy__contact p {
  color: var(--comic-muted) !important;
}

.footer-tuy__h--comic-red {
  color: var(--comic-red) !important;
}

.footer-tuy__h--comic-blue {
  color: var(--comic-blue) !important;
}

.footer-tuy__h--comic-dark {
  color: var(--comic-red-dark) !important;
}

.footer-tuy__nav a {
  color: var(--comic-text) !important;
}

.footer-tuy__nav a:hover {
  color: var(--comic-red) !important;
}

.footer-tuy__cta {
  background: var(--comic-red) !important;
  box-shadow: 0 4px 16px rgba(211, 47, 47, 0.28) !important;
}

.footer-tuy__pills > span {
  color: var(--comic-blue-dark) !important;
  border-color: var(--comic-blue) !important;
  background: #fff !important;
}

.footer-tuy__mid--comic {
  background: var(--comic-yellow) !important;
  border-top: 2px solid rgba(211, 47, 47, 0.15) !important;
}

.footer-tuy__mid-links a {
  color: var(--comic-text) !important;
}

.footer-tuy__mid-links a:hover {
  color: var(--comic-red) !important;
}

.footer-tuy__seo--comic {
  background: var(--comic-yellow-bg) !important;
  color: var(--comic-muted) !important;
  border-top: 1px solid var(--comic-line) !important;
}

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

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

/* 移动端导航展开 */
@media (max-width: 768px) {
  body.body-skin-comic-pop .header-main-nav.is-open {
    background: #fff !important;
    border: 2px solid var(--comic-red) !important;
  }

  body.body-skin-comic-pop .header-main-nav.is-open .header-main-nav__link {
    color: var(--comic-text) !important;
  }

  body.body-skin-comic-pop .header-main-nav.is-open .header-main-nav__link--active {
    background: var(--comic-yellow-light) !important;
    color: var(--comic-red-dark) !important;
  }
}