/* SPA→静态视觉桥 · steel-mono · 骨架布局保留，工业冷感外观 */
:root {
  --pink: #5b8db8;
  --blue: #5b8db8;
  --brand: #ffffff;
  --accent: #5b8db8;
  --accent-hover: #7aa8cc;
  --accent-soft: rgba(91, 141, 184, 0.14);
  --steel: #5b8db8;
  --steel-soft: rgba(91, 141, 184, 0.12);
  --portal-accent: #5b8db8;
  --bg: #1e2124;
  --surface: #2a2e33;
  --surface-2: #353a40;
  --text: #ffffff;
  --muted: #b0b8c0;
  --text-muted: #b0b8c0;
  --card: #2a2e33;
  --header-bg: #1e2124;
  --body-bg: #1e2124;
  --line: rgba(255, 255, 255, 0.08);
  color-scheme: dark;
}

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

body,
.page,
.site-wrap,
.app-shell,
.layout,
.main-wrap,
.page-main,
#app,
.steel-shell__content {
  background: var(--bg) !important;
  color: var(--text) !important;
}

.site-header,
.header,
.topbar,
.nav-bar,
.header-main,
.portal-header,
header.site-header,
.header-bar,
.body-mother-adopt > header,
.steel-shell__content > header {
  background: var(--header-bg) !important;
  border-bottom: 2px solid var(--steel) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

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

.brand-icon {
  color: var(--steel) !important;
}

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

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

.nav-search input,
.daphne-header-search input {
  background: var(--surface) !important;
  border-color: color-mix(in srgb, var(--text) 12%, transparent) !important;
  color: var(--text) !important;
}

.nav-search button,
.btn-primary,
.hero-actions .btn:first-child,
button[type="submit"],
.primary-btn,
.btn-accent,
.btn-cta {
  background: var(--steel) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.card,
.movie-card,
.poster-card,
.grid-card,
.media-card,
.item-card,
.wythy-vcard {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

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

.home-hero h1,
.compact-hero h1,
.page-hero h1,
.play-title,
.section-head h2,
.seo-brand-block h2 {
  color: var(--text) !important;
}

.text-gray-900,
.text-gray-800,
.text-gray-700 {
  color: var(--text) !important;
}

.text-gray-600,
.text-gray-500 {
  color: var(--muted) !important;
}

.text-gray-400,
.text-gray-300 {
  color: #8a929a !important;
}

.bg-white {
  background: var(--surface) !important;
}

.bg-gray-50,
.bg-gray-100,
.bg-gray-800,
.bg-gray-900 {
  background: var(--surface-2) !important;
}

.bg-blue-100,
.bg-blue-500\/20 {
  background: var(--accent-soft) !important;
}

.text-blue-600,
.text-blue-400,
.text-blue-500 {
  color: var(--accent) !important;
}

.footer,
.site-footer,
footer,
.body-mother-adopt > footer,
.steel-shell__content > footer {
  background: var(--header-bg) !important;
  color: var(--muted) !important;
  border-top: 1px solid var(--line) !important;
}

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

a {
  color: var(--accent);
}

a:hover {
  color: var(--accent-hover);
}

.gradient-text {
  background: linear-gradient(135deg, #ffffff, #5b8db8) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.daphne-video-body {
  background: var(--bg) !important;
}

.daphne-player-card,
.play-info-card {
  background: var(--surface) !important;
  border: 1px solid var(--line);
}

.mother-play-desc {
  max-width: 80rem;
  margin: 1rem auto 2rem;
  padding: 0 1rem;
  color: var(--muted);
  line-height: 1.75;
}

.mother-related {
  max-width: 80rem;
  margin: 0 auto 3rem;
  padding: 0 1rem;
}

.mother-related h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--text);
}

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

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

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

.body-mother-adopt ::-webkit-scrollbar-track {
  background: var(--bg) !important;
}

.body-mother-adopt ::-webkit-scrollbar-thumb {
  background: #454b52 !important;
}

.body-mother-adopt ::-webkit-scrollbar-thumb:hover {
  background: var(--accent) !important;
}