/* SPA→静态视觉桥 · harbor-cyan · m72 骨架 · 浅青灰底 + 深海蓝 + 珊瑚橙 CTA */
:root {
  --orange: #e86f4a;
  --pink: #c45a3a;
  --purple: #0d3b5c;
  --ink: #1a3344;
  --muted: #5a7280;
  --paper: #eef4f6;
  --line: rgba(13, 59, 92, 0.14);
  --shadow: 0 24px 70px rgba(13, 59, 92, 0.1);

  --harbor-deep: #0a2538;
  --harbor-base: #0d3b5c;
  --harbor-mid: #145a7a;
  --harbor-light: #1a6b8a;
  --harbor-surface: #eef4f6;
  --harbor-paper: #f7fafb;
  --coral: #e86f4a;
  --coral-light: #f07850;
  --coral-dim: #c45a3a;
  --text-on-dark: #e8f2f6;
  --text-muted-dark: #a8c0cc;

  --pink: var(--coral);
  --blue: var(--harbor-light);
  --brand: var(--harbor-base);
  --accent: var(--coral);
  --bg: var(--paper);
  --card: #ffffff;
  --header-bg: rgba(238, 244, 246, 0.96);
  --body-bg: var(--paper);
  color-scheme: light;
}

html,
body.site-body {
  background: linear-gradient(180deg, #eef4f6 0%, #f7fafb 32%, #f7fafb 100%) !important;
  color: var(--ink) !important;
}

.topbar,
header.topbar {
  background: linear-gradient(90deg, rgba(238, 244, 246, 0.97), rgba(247, 250, 251, 0.97)) !important;
  border-bottom-color: var(--line) !important;
}

.brand,
.footer-brand {
  background: linear-gradient(90deg, #0d3b5c, #145a7a) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

.brand-mark {
  background: linear-gradient(135deg, #145a7a, #0d3b5c) !important;
  box-shadow: 0 10px 24px rgba(13, 59, 92, 0.22) !important;
  color: #fff !important;
}

.nav-link:hover,
.nav-link.active {
  background: var(--harbor-base) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(13, 59, 92, 0.18) !important;
}

.primary-btn,
.quick-search button,
.reset-filter,
.topbar-search button {
  background: var(--coral) !important;
  box-shadow: 0 14px 32px rgba(232, 111, 74, 0.22) !important;
  color: #fff !important;
}

.primary-btn:hover,
.topbar-search button:hover {
  background: var(--coral-dim) !important;
  box-shadow: 0 16px 38px rgba(232, 111, 74, 0.3) !important;
}

.section-icon,
.poster-badge,
.rank-item strong {
  background: var(--coral) !important;
  box-shadow: 0 12px 28px rgba(232, 111, 74, 0.18) !important;
}

.hero,
.category-hero,
.detail-hero,
.watch-stage {
  background: var(--harbor-deep) !important;
}

.footer {
  background: linear-gradient(135deg, #0a2538, #0d3b5c) !important;
}

.footer a:hover {
  color: var(--coral-light) !important;
}

.breadcrumb a,
.rank-item em,
.rank-card strong,
.channel-row a,
.search-box span {
  color: var(--harbor-light) !important;
}

.movie-card,
.featured-card,
.quick-search,
.filter-panel,
.detail-content article,
.detail-content aside {
  border-color: var(--line) !important;
}