/* SPA→静态视觉桥 · harbor-cyan · 浅青灰底 + 深海蓝 + 珊瑚橙 CTA */
:root {
  --pink: #f97316;
  --blue: #0c4a6e;
  --brand: #0c4a6e;
  --accent: #f97316;
  --portal-accent: #075985;
  --bg: #e8f2f4;
  --surface: #ffffff;
  --text: #0f2942;
  --muted: #64748b;
  --card: #ffffff;
  --header-bg: rgba(232, 242, 244, 0.94);
  --body-bg: #e8f2f4;
  --xh-deep: #0c4a6e;
  --xh-deep-2: #075985;
  --xh-gold: #f97316;
  --xh-gold-hot: #fb923c;
  --xh-ink: #0f2942;
  --xh-muted: #64748b;
  --xh-line: rgba(12, 74, 110, 0.12);
  --xh-mist: #dceef0;
  --xh-mist-2: #e8f2f4;
  color-scheme: light;
}

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

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

.site-header,
.header,
.topbar,
.nav-bar,
.header-main,
.portal-header,
header.site-header,
.header-bar {
  background: var(--header-bg) !important;
  border-bottom: 1px solid var(--xh-line) !important;
  color: var(--text) !important;
  backdrop-filter: blur(14px);
}

.brand-text,
.brand-mark,
.site-brand,
.logo-text,
.header-brand__title,
.site-title,
.brand a {
  color: var(--xh-deep) !important;
}

.main-nav a,
.header-main-nav__link,
.nav a,
.site-nav a {
  color: var(--xh-ink) !important;
  font-weight: 650;
}

.main-nav a:hover,
.main-nav a[aria-current="page"],
.header-main-nav__link:hover,
.header-main-nav__link[aria-current="page"],
.nav a:hover,
.nav a.active {
  color: var(--xh-deep) !important;
}

.nav-search button,
.btn-primary,
.hero-actions .btn:first-child,
button[type="submit"],
.primary-btn,
.btn-accent {
  background: var(--accent) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.card,
.movie-card,
.poster-card,
.grid-card,
.media-card,
.item-card {
  background: var(--card) !important;
  border: 1px solid var(--xh-line) !important;
  color: var(--text) !important;
  box-shadow: 0 8px 24px rgba(12, 74, 110, 0.06) !important;
}

.section-title,
.home-h1,
.page-title {
  color: var(--xh-ink) !important;
}

.xh-hero h1,
.xh-hero h2,
.page-hero h1,
.compact-hero h1 {
  color: #fff !important;
}

.footer,
.site-footer {
  background: var(--xh-deep) !important;
  color: rgba(255, 255, 255, 0.82) !important;
}

a {
  color: var(--xh-deep-2);
}

a:hover {
  color: var(--xh-gold-hot);
}

.rank-badge,
.xh-card__score {
  background: linear-gradient(135deg, #f97316, #fb923c) !important;
}

.tag-row span,
.tag-cloud a,
.hero-tags span {
  color: var(--xh-deep-2) !important;
}