/* SPA→静态视觉桥 · from=m11 · paper-ink 微调 · 骨架类名映射影视站气质 */
:root {
  --gz-orange: #c41e3a;
  --gz-orange-2: #d4455a;
  --gz-ink: #1a1a1a;
  --gz-muted: #6b6560;
  --gz-soft: #f5f0e6;
  --gz-line: rgba(26, 26, 26, 0.1);
  --paper-paper: #f5f0e6;
  --paper-ink: #1a1a1a;
  --paper-vermilion: #c41e3a;
  --brand: var(--paper-vermilion);
  --accent: var(--paper-vermilion);
  --portal-accent: var(--paper-vermilion);
  --bg: var(--paper-paper);
  --surface: #fff;
  --text: var(--paper-ink);
  --muted: var(--gz-muted);
  --card: #fff;
  --header-bg: rgba(250, 247, 240, 0.92);
  --body-bg: var(--paper-paper);
  color-scheme: light;
}

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

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

.site-header,
.header,
.topbar,
.nav-bar,
header.site-header {
  background: var(--header-bg) !important;
  border-bottom: 1px solid var(--gz-line) !important;
  color: var(--text) !important;
}

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

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

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

.nav-search button,
.btn-primary,
.hero-actions .btn:first-child,
button[type="submit"],
.primary-btn,
.btn-accent {
  background: linear-gradient(135deg, var(--paper-vermilion), var(--gz-orange-2)) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.card,
.movie-card,
.poster-card,
.grid-card,
.media-card,
.item-card {
  background: #fff !important;
  border-color: var(--gz-line) !important;
  color: var(--text) !important;
}

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

.footer,
.site-footer,
footer.site-footer {
  background: linear-gradient(180deg, var(--paper-paper), #fff) !important;
  color: var(--muted) !important;
}

a {
  color: var(--paper-vermilion);
}

.page-hero,
.compact-hero,
.hero-section,
.quick-search,
.filter-panel,
.rank-panel,
.soft-panel,
.content-card,
.player-section,
.seo-brand-block {
  background: linear-gradient(180deg, var(--paper-paper), #fff) !important;
  border: 1px solid var(--gz-line) !important;
  box-shadow: 0 18px 40px rgba(26, 26, 26, 0.06) !important;
  color: var(--text) !important;
}

.page-hero h1,
.compact-hero h1,
.hero-copy h1,
.seo-brand-block h1 {
  color: var(--paper-ink) !important;
  background: none !important;
  -webkit-text-fill-color: unset !important;
}

.eyebrow span,
.eyebrow.solo,
.section-icon {
  background: #fff !important;
  color: var(--paper-vermilion) !important;
  border: 1px solid rgba(196, 30, 58, 0.18) !important;
}

.primary-btn,
.ghost-btn,
.card-actions a,
.side-link {
  border-radius: 999px !important;
}

.primary-btn,
.card-actions a,
.side-link {
  background: linear-gradient(135deg, var(--paper-vermilion), var(--gz-orange-2)) !important;
  color: #fff !important;
}

.movie-grid {
  gap: 18px !important;
}

.poster-frame,
.detail-poster {
  background: linear-gradient(135deg, #f0ebe2, #e8dfd0) !important;
}

.rank-badge {
  background: linear-gradient(135deg, var(--paper-vermilion), var(--gz-orange-2)) !important;
}

.category-tile,
.overview-card {
  background: #fff !important;
  border: 1px solid var(--gz-line) !important;
}

.category-tile strong,
.overview-main strong {
  color: var(--paper-vermilion) !important;
  background: none !important;
  -webkit-text-fill-color: unset !important;
}

.filter-panel input,
.filter-panel select,
.nav-search,
.quick-search form {
  border-color: rgba(196, 30, 58, 0.2) !important;
}

.mirror-player-slot {
  margin: 0 auto;
  max-width: min(1280px, calc(100% - 40px));
  padding: 0 0 24px;
}

.mirror-player-slot video,
.mirror-local-player {
  width: 100%;
  border-radius: 16px;
  background: #0c0f17;
  box-shadow: 0 24px 56px rgba(15, 23, 42, 0.28);
}

.mother-play-desc {
  max-width: min(1280px, calc(100% - 40px));
  margin: 0 auto 24px;
  padding: 18px 22px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--gz-line);
  color: #4a4a4a;
  line-height: 1.85;
  font-size: 14.5px;
}

.mother-related {
  max-width: min(1280px, calc(100% - 40px));
  margin: 0 auto 48px;
  padding: 22px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--gz-line);
  box-shadow: 0 12px 32px rgba(26, 26, 26, 0.06);
}

.mother-related h2 {
  margin: 0 0 18px;
  font-size: 18px;
  font-weight: 800;
  color: var(--paper-ink);
}

.mother-cards {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}

.mother-cards--featured {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1180px) {
  .mother-cards {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .mother-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .mother-cards,
  .mother-cards--featured {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (max-width: 460px) {
  .mother-cards,
  .mother-cards--featured {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}