/* SPA→静态视觉桥 · midnight-gold 深夜影厅 */
:root {
  --gold: #d4af37;
  --gold-dark: #b8942e;
  --blue-accent: #5b8def;
  --blue-muted: #3d5a80;
  --bg-deep: #0a0a12;
  --bg-panel: #12121c;
  --bg-card: #181824;
  --ink: #e8e6e3;
  --muted: #9ca3af;
  --line: rgba(255, 255, 255, 0.08);
  --card: var(--bg-card);
  --shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
  --brand: var(--blue-accent);
  --accent: var(--blue-accent);
  --amber: var(--blue-accent);
  --amber-dark: #4a6fc9;
  --orange: var(--blue-accent);
  --moss: var(--blue-accent);
  --moss-dark: var(--blue-muted);
  --moss-deep: #0d1117;
  --moss-light: var(--bg-panel);
  --moss-muted: var(--muted);
  --soft: var(--bg-panel);
  color-scheme: dark;
}

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

.site-header {
  background: rgba(10, 10, 18, 0.94) !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--ink) !important;
}

.site-header.scrolled {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

.brand-icon {
  background: linear-gradient(135deg, var(--blue-accent), var(--blue-muted)) !important;
  box-shadow: 0 8px 20px rgba(91, 141, 239, 0.25) !important;
}

.brand-text {
  color: var(--ink) !important;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.2px;
}

.nav-link {
  color: #cbd5e1 !important;
}

.nav-link:hover,
.nav-link.active {
  color: var(--blue-accent) !important;
}

.nav-link-soft {
  color: var(--muted) !important;
}

.nav-link-soft:hover {
  color: var(--blue-accent) !important;
}

.header-search {
  border-color: var(--line) !important;
  background: var(--bg-card) !important;
}

.header-search input {
  color: var(--ink) !important;
}

.header-search input::placeholder {
  color: var(--muted) !important;
}

.header-search button,
.btn-primary,
.side-more {
  background: var(--blue-accent) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.header-search button:hover,
.btn-primary:hover,
.side-more:hover {
  background: #4a6fc9 !important;
}

.filter-chip.active {
  background: var(--blue-accent) !important;
  color: #fff !important;
}

.section-heading span,
.side-title span,
.page-hero span {
  color: var(--blue-accent) !important;
  letter-spacing: 0.12em;
}

.section-heading h2,
.side-title h2,
.page-hero h1 {
  color: var(--gold) !important;
}

.section-heading a,
.text-link,
.card-meta a {
  color: var(--blue-accent) !important;
}

.card-title:hover {
  color: var(--gold) !important;
}

.card-title,
.card-title:visited {
  color: var(--ink) !important;
}

.movie-card,
.poster-card,
.hero-side,
.text-panel,
.detail-side,
.filter-board,
.category-card {
  background: var(--bg-card) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line);
}

.band-section {
  background: var(--bg-panel) !important;
}

.rank-section {
  background: var(--bg-deep) !important;
}

.rank-row {
  background: var(--bg-card) !important;
}

.rank-row:hover {
  background: rgba(91, 141, 239, 0.08) !important;
}

.rank-row b {
  color: var(--gold) !important;
}

.category-tile {
  background: var(--bg-card) !important;
  border: 1px solid rgba(91, 141, 239, 0.22) !important;
  box-shadow: var(--shadow) !important;
}

.category-tile span,
.category-tile strong {
  color: var(--gold) !important;
}

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

.category-tile:hover {
  border-color: rgba(91, 141, 239, 0.45) !important;
}

.text-panel.warm {
  background: linear-gradient(135deg, var(--bg-panel), var(--bg-card)) !important;
}

.page-hero {
  background: linear-gradient(120deg, #0d0d14, var(--blue-muted)) !important;
  color: #fff !important;
}

.page-hero.small,
.search-hero {
  background: linear-gradient(120deg, var(--bg-deep), #1a1a28) !important;
}

.page-hero p {
  color: #cbd5e1 !important;
}

.hero-main,
.detail-hero {
  background: var(--bg-deep) !important;
}

.hero-kicker {
  background: rgba(91, 141, 239, 0.85) !important;
}

.hero-dot.active,
.hero-main .hero-dots button.active {
  background: var(--gold) !important;
}

.btn-ghost {
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #fff !important;
}

.btn-link {
  color: var(--gold) !important;
}

.site-footer {
  background: linear-gradient(135deg, #060608, var(--bg-deep)) !important;
  color: #cbd5e1 !important;
}

.site-footer h2,
.site-footer h3 {
  color: var(--gold) !important;
}

.site-footer a:hover {
  color: var(--blue-accent) !important;
}

.filter-input,
.filter-select {
  background: var(--bg-panel) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

.filter-input:focus,
.filter-select:focus {
  border-color: var(--blue-accent) !important;
  box-shadow: 0 0 0 3px rgba(91, 141, 239, 0.15) !important;
}

.filter-chip {
  background: var(--bg-panel) !important;
  color: var(--muted) !important;
}

.filter-chip:hover {
  background: rgba(91, 141, 239, 0.12) !important;
  color: var(--blue-accent) !important;
}

.back-top {
  background: var(--blue-accent) !important;
}

.back-top:hover {
  background: #4a6fc9 !important;
}

.card-desc,
.rank-info p {
  color: var(--muted) !important;
}

.card-meta span,
.rank-info span {
  background: var(--bg-panel) !important;
  color: var(--muted) !important;
}

.card-tags span,
.tag-links a,
.genre-list span {
  background: var(--bg-panel) !important;
  color: var(--muted) !important;
}

.card-duration {
  background: rgba(0, 0, 0, 0.75) !important;
}

.rank-badge {
  background: var(--gold) !important;
  color: #0a0a12 !important;
}

.mobile-nav {
  background: var(--bg-card) !important;
  border-top-color: var(--line) !important;
}

.mobile-menu-btn {
  background: var(--bg-panel) !important;
  color: var(--ink) !important;
}

.info-list div {
  background: var(--bg-panel) !important;
}

.info-list dt {
  color: var(--muted) !important;
}

.info-list dd {
  color: var(--ink) !important;
}

.detail-copy h1 {
  color: var(--gold) !important;
}

.detail-copy p {
  color: #cbd5e1 !important;
}

.primary-btn {
  background: var(--blue-accent) !important;
}

.primary-btn:hover {
  background: #4a6fc9 !important;
}

.ghost-btn {
  background: rgba(255, 255, 255, 0.08) !important;
}

.hero-main .hero-copy .primary-btn,
.hero-main .hero-copy .ghost-btn {
  border-radius: 14px;
  padding: 12px 22px;
  font-weight: 800;
}

.hero-main .hero-copy .primary-btn {
  background: var(--blue-accent) !important;
  color: #fff !important;
}

.hero-main .hero-copy .ghost-btn {
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #fff !important;
}

.hero-tags span,
.detail-tags span {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

.text-panel h2 {
  color: var(--gold) !important;
}

.text-panel p {
  color: #cbd5e1 !important;
}