/* SPA→静态视觉桥 · harbor-cyan · 港湾清爽影视站 */
:root {
  --harbor-deep: #0c4a6e;
  --harbor-sea: #0369a1;
  --harbor-sky: #0e7490;
  --harbor-soft: rgba(3, 105, 161, 0.12);
  --coral: #f97316;
  --coral-dark: #ea580c;
  --coral-soft: rgba(249, 115, 22, 0.14);
  --brand: #0369a1;
  --brand-dark: #0c4a6e;
  --page-bg: #e8f2f4;
  --page-bg2: #dfecee;
  --surface: #ffffff;
  --ink: #0f172a;
  --ink-muted: #64748b;
  --card-border: rgba(14, 116, 144, 0.12);
  --pink: #0369a1;
  --blue: #0369a1;
  --accent: #f97316;
  --portal-accent: #0369a1;
  --bg: #e8f2f4;
  --text: #0f172a;
  --muted: #64748b;
  --card: #ffffff;
  --header-bg: rgba(255, 255, 255, 0.94);
  --body-bg: #e8f2f4;
  color-scheme: light;
}

html,
body {
  background: linear-gradient(180deg, #f0f7f8 0%, var(--page-bg) 42%, var(--page-bg2) 100%) !important;
  color: var(--ink) !important;
}

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

.site-header,
.header,
.topbar,
.nav-bar,
header.site-header {
  background: var(--header-bg) !important;
  border-bottom: 1px solid rgba(14, 116, 144, 0.14) !important;
  color: var(--ink) !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(14, 116, 144, 0.06);
}

.site-header.scrolled {
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 8px 32px rgba(12, 74, 110, 0.08) !important;
}

.brand-mark {
  background: linear-gradient(135deg, var(--harbor-deep), var(--harbor-sea)) !important;
  box-shadow: 0 6px 18px rgba(3, 105, 161, 0.28) !important;
  color: #fff !important;
}

.site-header .text-white,
.site-header .group span.text-white,
.site-header .group span.block.text-white {
  color: var(--brand-dark) !important;
}

.site-header .text-night-300,
.site-header .text-xs.text-night-300 {
  color: var(--ink-muted) !important;
}

.main-nav a,
.desktop-nav a,
.site-header nav a {
  color: #334155 !important;
}

.main-nav a:hover,
.desktop-nav a:hover,
.site-header nav a:hover {
  color: var(--brand) !important;
}

.site-header .desktop-search input,
.mobile-panel input[type="search"] {
  background: #f8fafc !important;
  border-color: rgba(14, 116, 144, 0.18) !important;
  color: var(--ink) !important;
}

.site-header .desktop-search input::placeholder,
.mobile-panel input::placeholder {
  color: #94a3b8 !important;
}

.mobile-panel {
  background: #fff !important;
  border-top-color: rgba(14, 116, 144, 0.12) !important;
}

.mobile-panel a {
  color: #334155 !important;
}

.mobile-toggle {
  color: var(--brand-dark) !important;
}

.btn-primary,
.hero-actions .btn-primary,
button[type="submit"].btn-primary,
.filter-button.active,
.category-channel-pill.active {
  background: linear-gradient(135deg, var(--coral-dark), var(--coral)) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.btn-secondary,
.ghost-btn {
  background: #fff !important;
  color: var(--brand-dark) !important;
  border: 1px solid rgba(3, 105, 161, 0.22) !important;
}

.btn-secondary:hover,
.ghost-btn:hover {
  background: var(--harbor-soft) !important;
}

.card,
.movie-card,
.content-card,
.glass-panel,
.overview-card,
.filter-panel-wrap,
.category-card {
  background: var(--surface) !important;
  border-color: var(--card-border) !important;
  color: var(--ink) !important;
  box-shadow: 0 4px 24px rgba(12, 74, 110, 0.06);
}

h1, h2, h3,
.section-title h2,
.text-white {
  color: var(--ink) !important;
}

.text-night-100,
.text-night-200,
.text-night-300,
.text-night-400,
.text-night-500,
.card-desc,
.card-meta,
.play-meta-row {
  color: var(--ink-muted) !important;
}

.text-ocean-400,
.section-more,
.breadcrumb a,
a.section-more {
  color: var(--brand) !important;
}

.section-more:hover,
.breadcrumb a:hover {
  color: var(--harbor-sky) !important;
}

.section-icon {
  background: linear-gradient(135deg, var(--harbor-deep), var(--harbor-sea)) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(3, 105, 161, 0.22) !important;
}

.site-footer,
footer.site-footer {
  background: linear-gradient(180deg, #f0f7f8, #e8f2f4) !important;
  border-top-color: rgba(14, 116, 144, 0.12) !important;
  color: var(--ink-muted) !important;
}

.site-footer .text-white,
.site-footer h3,
.site-footer h4 {
  color: var(--brand-dark) !important;
}

.site-footer .text-night-300,
.site-footer .text-night-400 {
  color: var(--ink-muted) !important;
}

.footer-link {
  color: #475569 !important;
}

.footer-link:hover {
  color: var(--brand) !important;
}

.play-badge span {
  background: rgba(3, 105, 161, 0.92) !important;
}

.type-badge {
  background: rgba(12, 74, 110, 0.88) !important;
  color: #fff !important;
}

.compact-item > span:first-child,
.rank-badge {
  color: var(--brand) !important;
}

.carousel-dot.active {
  background: var(--harbor-sea) !important;
}

.hero-progress__bar {
  background: linear-gradient(90deg, var(--harbor-sea), var(--harbor-sky), var(--coral)) !important;
}

.tag-list span,
.tag-list a,
.pill {
  background: var(--harbor-soft) !important;
  color: var(--brand-dark) !important;
  border-color: rgba(3, 105, 161, 0.18) !important;
}

.cover-wrap {
  background: linear-gradient(135deg, #e2eef2, #d4e8ed) !important;
}

.group-hover\:text-brand:hover,
.group:hover .group-hover\:text-brand {
  color: var(--brand) !important;
}

.player-panel {
  border-color: rgba(14, 116, 144, 0.14) !important;
}