/* 服务页与产品详情的暗色框架，沿用全站主题变量。 */
html[data-theme="dark"] .service-page {
  background: var(--white);
  color: var(--ink);
}

html[data-theme="dark"] .service-hero {
  background: linear-gradient(130deg, var(--white) 25%, #12233d 100%);
  border-color: var(--line);
}

html[data-theme="dark"] .service-hero-media {
  border-color: var(--line);
  background: var(--theme-surface);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .14);
}

/* 图像保留原有颜色；仅其文字说明使用暗色背景。 */
html[data-theme="dark"] .service-hero-media figcaption {
  background: var(--theme-surface);
  color: var(--muted);
}

html[data-theme="dark"] .service-navigation a:hover,
html[data-theme="dark"] .service-navigation a[aria-current="page"] {
  background: var(--theme-soft);
  color: var(--blue);
}

html[data-theme="dark"] .service-card {
  background: var(--theme-surface);
  border-color: var(--line);
}

html[data-theme="dark"] .service-card-heading > span {
  background: var(--theme-soft);
  color: var(--blue);
}

html[data-theme="dark"] .service-use-cases {
  background: var(--pale);
  border-color: var(--line);
}

html[data-theme="dark"] .service-scenario-list li {
  background: var(--theme-surface);
  border-color: var(--line);
  color: var(--ink);
}

html[data-theme="dark"] .service-contact-box {
  background: var(--theme-soft);
  border-color: var(--line);
}

html[data-theme="dark"] .product-page {
  background: var(--white);
  color: var(--ink);
}

/* 不改变产品切片及其原始白底，暗色只应用到加载占位与外侧。 */
html[data-theme="dark"] .product-content {
  box-shadow: 0 0 0 1px var(--line);
}

html[data-theme="dark"] .page-slice .placeholder {
  background: var(--theme-surface);
}

html[data-theme="dark"] .spinner {
  border-color: var(--line);
  border-top-color: var(--blue);
}