/* SPA→静态视觉桥 · neon-club · 深靛底 + 品红/青霓虹边线 · 骨架布局保留 */
:root {
  --indigo: #0a0e1f;
  --indigo-mid: #121833;
  --indigo-surface: #171d3a;
  --indigo-elevated: #1e2548;
  --neon-magenta: #ff006e;
  --neon-magenta-soft: #e0408a;
  --neon-cyan: #00f5d4;
  --neon-cyan-soft: #00c4b8;
  --slate: #e8eaf6;
  --slate-soft: #c4c9e8;
  --muted: #8892b8;
  --paper: #171d3a;
  --line: rgba(0, 245, 212, 0.22);
  --line-magenta: rgba(255, 0, 110, 0.28);
  --soft: #121833;
  --radius: 1rem;
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  --pink: var(--neon-magenta);
  --blue: var(--neon-cyan);
  --brand: var(--neon-cyan);
  --accent: var(--neon-magenta);
  --portal-accent: var(--neon-magenta);
  --bg: var(--indigo);
  --surface: var(--indigo-surface);
  --text: var(--slate);
  --card: var(--indigo-surface);
  --header-bg: rgba(10, 14, 31, 0.94);
  --body-bg: var(--indigo);
  color-scheme: dark;
}

html,
body.site-body {
  background: var(--indigo) !important;
  color: var(--slate) !important;
}

.page-main,
.page,
.site-wrap,
.app-shell,
.layout,
.main-wrap,
#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(--line) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35) !important;
  color: var(--slate) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

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

.brand-subtitle {
  color: var(--neon-cyan) !important;
}

.brand-mark {
  background: linear-gradient(135deg, var(--neon-magenta), var(--neon-cyan)) !important;
  box-shadow: none !important;
  border: 1px solid var(--line-magenta);
}

.nav-link,
.main-nav a,
.header-main-nav__link,
.nav a,
.site-nav a {
  color: var(--slate-soft) !important;
}

.nav-link:hover,
.nav-link.is-current,
.main-nav a:hover,
.main-nav a[aria-current="page"],
.header-main-nav__link:hover,
.header-main-nav__link[aria-current="page"] {
  background: rgba(0, 245, 212, 0.1) !important;
  color: var(--neon-cyan) !important;
  box-shadow: inset 0 0 0 1px var(--line);
}

.search-box {
  background: var(--indigo-elevated) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}

.search-box input {
  background: transparent !important;
  color: var(--slate) !important;
}

.search-box input::placeholder {
  color: var(--muted);
}

.search-box button,
.nav-search button,
.btn-primary,
.btn.primary,
button[type="submit"],
.primary-btn {
  background: var(--neon-magenta) !important;
  border: 1px solid var(--line-magenta) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.search-box button:hover,
.btn.primary:hover,
.btn-primary:hover {
  background: var(--neon-magenta-soft) !important;
}

.menu-toggle {
  background: var(--indigo-elevated) !important;
  border: 1px solid var(--line) !important;
}

.menu-toggle span {
  background: var(--neon-cyan) !important;
}

.mobile-panel {
  background: var(--indigo-mid) !important;
  border-top: 1px solid var(--line) !important;
}

.mobile-panel a {
  background: var(--indigo-elevated) !important;
  color: var(--slate-soft) !important;
  border: 1px solid var(--line);
}

.mobile-panel a:hover {
  border-color: var(--neon-cyan);
  color: var(--neon-cyan) !important;
}

/* 卡片与区块 */
.movie-card,
.card,
.poster-card,
.grid-card,
.media-card {
  background: var(--indigo-surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--slate) !important;
  box-shadow: none !important;
}

.movie-card:hover {
  border-color: var(--neon-cyan) !important;
  transform: translateY(-3px);
}

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

.section-head p {
  color: var(--muted) !important;
}

.section-icon,
.spotlight__badge {
  background: var(--indigo-elevated) !important;
  border: 1px solid var(--line-magenta) !important;
  color: var(--neon-magenta) !important;
  box-shadow: none !important;
}

.content-section.alt {
  background: var(--indigo-mid) !important;
}

.quick-categories,
.content-section {
  background: transparent !important;
}

.category-tile {
  background: var(--indigo-surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}

.category-tile:hover {
  border-color: var(--neon-cyan) !important;
}

.category-tile span {
  color: var(--neon-cyan) !important;
}

.category-tile p {
  color: var(--muted) !important;
}

.category-tile:after {
  background: rgba(0, 245, 212, 0.06) !important;
}

.poster-play,
.spotlight__play-icon {
  background: var(--neon-magenta) !important;
  border: 1px solid var(--line-magenta);
}

.card-meta a,
.card-meta span {
  background: var(--indigo-elevated) !important;
  border: 1px solid var(--line) !important;
  color: var(--neon-cyan-soft) !important;
}

.card-body h3 a {
  color: var(--slate) !important;
}

.card-body h3 a:hover {
  color: var(--neon-cyan) !important;
}

.card-body p {
  color: var(--muted) !important;
}

.tag-row span,
.detail-tags span {
  background: var(--indigo-elevated) !important;
  border: 1px solid var(--line);
  color: var(--slate-soft) !important;
}

/* 首页 spotlight */
.hero-wrap {
  background: transparent !important;
}

.spotlight__card {
  background: var(--indigo-surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow) !important;
}

.spotlight__badge {
  background: var(--neon-magenta) !important;
  color: #fff !important;
  border: 1px solid var(--line-magenta) !important;
}

.spotlight__index {
  color: var(--neon-cyan) !important;
}

.spotlight__chips span,
.spotlight__tags span {
  background: var(--indigo-elevated) !important;
  border: 1px solid var(--line) !important;
  color: var(--slate-soft) !important;
}

.spotlight__title {
  color: var(--slate) !important;
}

.spotlight__lead {
  color: var(--muted) !important;
}

.spotlight__nav {
  background: var(--indigo-elevated) !important;
  border: 1px solid var(--line) !important;
  color: var(--neon-cyan) !important;
  box-shadow: none !important;
}

.spotlight__dots button {
  background: var(--indigo-elevated) !important;
  border: 1px solid var(--line);
}

.spotlight__dots button.is-active {
  background: var(--neon-magenta) !important;
  border-color: var(--line-magenta);
}

.btn.ghost {
  background: transparent !important;
  color: var(--neon-cyan) !important;
  border: 1px solid var(--line) !important;
}

.btn.ghost:hover {
  background: rgba(0, 245, 212, 0.08) !important;
}

/* 密集海报墙 */
.movie-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

@media (max-width: 1200px) {
  .movie-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .movie-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

@media (max-width: 600px) {
  .movie-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

@media (max-width: 380px) {
  .movie-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.category-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

@media (max-width: 1024px) {
  .category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 子页 hero */
.page-hero.compact-hero:not(:has(.container)),
.page-hero.compact-hero .container {
  background: var(--indigo-surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--slate) !important;
  box-shadow: none !important;
}

.page-hero .eyebrow,
.page-hero .eyebrow.solo {
  color: var(--neon-magenta) !important;
}

.page-hero p {
  color: var(--muted) !important;
}

/* 播放页 */
.player-box {
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow) !important;
}

.story-card,
.side-card,
.overview-card,
.rank-panel,
.filter-panel {
  background: var(--indigo-surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--slate) !important;
  box-shadow: none !important;
}

.story-card p,
.rank-main p {
  color: var(--slate-soft) !important;
}

.info-table div {
  background: var(--indigo-elevated) !important;
  border: 1px solid var(--line) !important;
}

.info-table span {
  color: var(--muted) !important;
}

.info-table strong {
  color: var(--slate) !important;
}

.side-card a {
  background: var(--indigo-elevated) !important;
  border: 1px solid var(--line) !important;
  color: var(--neon-cyan) !important;
}

.side-card a:hover {
  border-color: var(--neon-cyan) !important;
}

.filter-panel input,
.filter-panel select,
.inline-search input {
  background: var(--indigo-elevated) !important;
  border: 1px solid var(--line) !important;
  color: var(--slate) !important;
}

.filter-panel input:focus,
.filter-panel select:focus {
  border-color: var(--neon-cyan) !important;
}

.rank-item {
  background: var(--indigo-surface) !important;
  border: 1px solid var(--line) !important;
}

.rank-number {
  background: var(--indigo-elevated) !important;
  border: 1px solid var(--line-magenta) !important;
  color: var(--neon-magenta) !important;
}

/* 页脚 */
.site-footer,
.footer,
footer {
  background: var(--indigo-mid) !important;
  border-top: 1px solid var(--line) !important;
  color: var(--muted) !important;
}

.footer-inner h2 {
  color: var(--neon-cyan) !important;
}

.footer-inner p {
  color: var(--muted) !important;
}

.footer-inner a {
  background: var(--indigo-elevated) !important;
  border: 1px solid var(--line) !important;
  color: var(--slate-soft) !important;
}

.footer-inner a:hover {
  border-color: var(--neon-magenta) !important;
  color: var(--neon-magenta) !important;
  background: rgba(255, 0, 110, 0.08) !important;
}

.footer-bottom {
  color: var(--muted) !important;
  border-top: 1px solid var(--line) !important;
}

a {
  color: var(--neon-cyan);
}

a:hover {
  color: var(--neon-magenta);
}

:focus-visible {
  outline-color: var(--neon-cyan) !important;
}

.section-block .section-head a {
  color: var(--neon-cyan) !important;
}

.section-block .section-head a:hover {
  color: var(--neon-magenta) !important;
}