/* ============================================================================
   鸣山机械官网 · 服务与支持栏目样式（/service-support）
   ----------------------------------------------------------------------------
   2026-09-23 新增。设计依据：《服务与支持-设计规范-v1.md》
   仅由 3 个模板加载（view/{pc,m}/service_index.html、service_knowledge.html、
   article_service.html），不给全站增加负担。

   【为什么所有颜色都写 var(--ms-xxx)】
   ms-case.css 顶部的 :root 是全站唯一的主题令牌真源。本文件**不新增任何色值**，
   只用既有令牌，保证服务页与首页/产品/案例/关于页视觉完全同频（验收清单第 4 条）。

   【工程约束（踩坑记录）】
   1. 根容器必须 `overflow-x:clip` 而不是 `overflow-x:hidden`：
      hidden 会把祖先变成滚动容器，其内部的 position:sticky（锚点导航/横向条）直接失效。
   2. 锚点导航的 sticky top 必须按终端区分：PC 吸顶页头滚动后剩 78px（顶部工具条滚出屏幕），
      m 端固定 56px，PC 模板在 <1024 档只有菜单栏 66px。写死一个值必然有一端被压住。
   3. 所有 section 加 scroll-margin-top：否则点锚点跳过去后标题被吸顶页头盖住。
   4. 动效只允许 color / border-color / opacity / background 级别的微过渡（≤320ms），
      与设计规范 §8「禁止浮夸动画」一致。
   ========================================================================== */

html { scroll-behavior: smooth; }

/* ---------- 页面根 ---------- */
.ms-svpage {
  background: var(--ms-page-bg, #0B1E33);
  color: var(--ms-text, #EAF2FA);
  /* 必须 clip 不能 hidden，否则内部 sticky 全废 */
  overflow-x: clip;
}
.ms-svpage a { text-decoration: none; }

/* ---------- 移动端锚点条（吸顶横向滚动） ---------- */
.ms-sv-anchorbar {
  position: sticky;
  top: 66px;                    /* PC 模板 <1024 档：只有 66px 高的菜单栏；m 模板内联覆盖为 56px */
  z-index: 40;
  background: rgba(6, 20, 36, .95);
  border-bottom: 1px solid var(--ms-line, rgba(122, 168, 214, .17));
}
.ms-sv-anchorbar-in {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 16px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ms-sv-anchorbar-in::-webkit-scrollbar { display: none; }
.ms-sv-anchorbar a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 13px;
  border: 1px solid var(--ms-line, rgba(122, 168, 214, .17));
  border-radius: 9999px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--ms-text-dim, rgba(234, 242, 250, .62));
  white-space: nowrap;
  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease;
}
.ms-sv-anchorbar a.is-active {
  color: #fff;
  border-color: var(--ms-brand, #C81E2D);
  background: rgba(200, 30, 45, .18);
}

/* ---------- PC 侧边锚点导航 ---------- */
.ms-sv-anchor { display: none; }

/* ---------- 骨架（PC 12 列 → 锚点 + 主列） ---------- */
.ms-sv-shell { display: block; }
@media (min-width: 1024px) {
  .ms-sv-anchorbar { display: none; }
  .ms-sv-shell {
    display: grid;
    grid-template-columns: 196px minmax(0, 1fr);
    gap: 44px;
    /* ⚠ 这里**不能**写 align-items: start（2026-09-23 真实浏览器实测后改掉）：
       grid 的 align-items:start 会让两个格子的高度都塌成「内容高度」，
       于是包住侧边导航的 <aside> 只有 265px 高（= 导航自身高度）。
       而 position:sticky 的活动空间完全由**父容器**的高度决定 ——
       父容器只有 265px，锚点就没有任何可吸顶的行程，
       结果就是「CSS 写了 sticky，页面滚动时锚点却跟着一起滚走」。
       实测证据（1280×720，滚到 #intro 之后采样）：
         asideTop=-220  asideBottom=45（高 265）  anchorTop=-220  → 完全没吸住。
       保持默认的 stretch，让 <aside> 铺满整个 5562px 的行高，sticky 才有 5 千多像素的活动空间。 */
    align-items: stretch;
}

/* 冗余保险：即便以后有人给容器改回 align-items:start，也强制场景列撑满行高 */
.ms-sv-shell > aside {
    align-self: stretch;
}
  .ms-sv-anchor {
    display: block;
    position: sticky;
    top: 104px;                 /* 吸顶后剩 78px 菜单栏 + 26px 呼吸 */
    border-left: 1px solid var(--ms-line, rgba(122, 168, 214, .17));
    padding: 4px 0;
  }
}
.ms-sv-anchor a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 10px 0 10px 15px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ms-text-dim, rgba(234, 242, 250, .62));
  transition: color 180ms ease;
}
.ms-sv-anchor a::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 9px;
  bottom: 9px;
  width: 2px;
  border-radius: 2px;
  background: transparent;
  transition: background-color 180ms ease;
}
.ms-sv-anchor a .n {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ms-text-faint, rgba(234, 242, 250, .44));
}
.ms-sv-anchor a:hover { color: #fff; }
.ms-sv-anchor a.is-active { color: #fff; }
.ms-sv-anchor a.is-active::before { background: var(--ms-brand, #C81E2D); }
.ms-sv-anchor a.is-active .n { color: var(--ms-accent-soft, #F2B7BC); }

/* ---------- Banner ---------- */
.ms-sv-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 210px;
  overflow: hidden;
  border-bottom: 1px solid var(--ms-line, rgba(122, 168, 214, .17));
}
.ms-sv-hero__bg { position: absolute; inset: 0; }
.ms-sv-hero__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ms-sv-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(6, 20, 36, .80) 0%,
    rgba(6, 20, 36, .86) 55%,
    rgba(6, 20, 36, .94) 100%);
}
.ms-sv-hero__in { position: relative; width: 100%; padding: 30px 0 28px; }
.ms-sv-hero h1 {
  margin: 12px 0 0;
  font-size: clamp(24px, 4.4vw, 42px);
  line-height: 1.24;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ms-text, #EAF2FA);
}
.ms-sv-hero h1 em {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: clamp(15px, 2.2vw, 20px);
  font-weight: 700;
  color: var(--ms-link, #8FC4EC);
}
.ms-sv-hero__desc {
  max-width: 74ch;
  margin: 16px 0 0;
  font-size: 14.5px;
  line-height: 2;
  color: var(--ms-text-soft, rgba(234, 242, 250, .78));
}
.ms-sv-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.ms-sv-hero__chips a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--ms-line, rgba(122, 168, 214, .17));
  border-radius: 9999px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--ms-text-dim, rgba(234, 242, 250, .62));
  transition: color 180ms ease, border-color 180ms ease;
}
.ms-sv-hero__chips a:hover { color: #fff; border-color: var(--ms-line-strong, rgba(122, 168, 214, .34)); }
.ms-sv-hero__chips i {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background: var(--ms-brand, #C81E2D);
}
.ms-sv-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* ---------- 章节 ---------- */
.ms-sv-sec {
  padding: 46px 0 0;
  scroll-margin-top: 116px;      /* 吸顶页头 66px + 锚点条 48px + 余量 */
}
.ms-sv-sec:first-child { padding-top: 32px; }
/* 页面底部留白。知识库两页的「在线提交表单」区块已被需求移除，而它正是原先
   承担 `--last` 那 64px 下留白的区块，故用一个空占位块把同样的留白补回来。 */
.ms-sv-tailpad { padding-bottom: 64px; }
.ms-sv-sec--last { padding-bottom: 64px; }
@media (min-width: 1024px) {
  /* 2026-09-26：锚点跳转后标题离吸顶页头 186px 的直接成因是「重复预留」——
     html 已有 scroll-padding-top:76px（给页头占位），这里又给 96px，二者相
     加得 172px；再叠上 section 自身 padding-top:62px 与 h2 的 margin-top:14px，
     标题就落在视口 265px 处。
     修法：节间留白从 padding-top 换成相邻 margin（视觉间距不变），
     scroll-margin-top 只留 19px 余量 ⇒ 76+19=95 ≈ 页头 79px + 16px 呼吸。 */
  .ms-sv-sec { padding-top: 0; scroll-margin-top: 19px; }
  .ms-sv-sec + .ms-sv-sec { margin-top: 62px; }
  .ms-sv-sec:first-child { padding-top: 0; margin-top: 32px; }   /* 基础规则的 :first-child 权重更高，必须在此显式归零 */
  /* 栏头（面包屑）再贴近吸顶页头：30px → 16px，与 m 端知识库页同值 */
  .ms-sv-hero__in { padding-top: 16px; }
}

/* 章节头：左对齐（B 端严谨感，不用居中） */
.ms-sv-head { max-width: 82ch; }
.ms-sv-head .ms-cs-eyebrow { margin-bottom: 2px; }

/* ---------- 导语（图文两栏） ---------- */
.ms-sv-intro {
  display: grid;
  gap: 26px;
}
.ms-sv-intro__fig {
  margin: 0;
  position: relative;
  border: 1px solid var(--ms-line, rgba(122, 168, 214, .17));
  border-radius: var(--ms-r-md, 12px);
  overflow: hidden;
  background: var(--ms-surface-3, #0E2438);
}
.ms-sv-intro__fig img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.ms-sv-intro__pts { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.ms-sv-intro__pts li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--ms-text-soft, rgba(234, 242, 250, .78));
}
.ms-sv-intro__pts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 7px;
  height: 2px;
  border-radius: 1px;
  background: var(--ms-brand, #C81E2D);
}
.ms-sv-intro__pts b {
  display: block;
  font-weight: 700;
  color: var(--ms-text, #EAF2FA);
}
@media (min-width: 1024px) {
  .ms-sv-intro { grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr); gap: 34px; align-items: start; }
  .ms-sv-intro__pts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
  /* 后台没配导语配图时，文字列铺满整行，不留空洞 */
  .ms-sv-intro--plain { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 全链路服务体系（纵向链路，五段） ---------- */
.ms-sv-chain { margin: 28px 0 0; }
.ms-sv-chain__item {
  display: grid;
  gap: 14px;
  padding: 22px 0;
  border-top: 1px solid var(--ms-line, rgba(122, 168, 214, .17));
}
.ms-sv-chain__item:first-child { border-top: 0; padding-top: 6px; }
.ms-sv-chain__top { display: flex; align-items: flex-start; gap: 14px; }
.ms-sv-chain__num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--ms-brand, #C81E2D);
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.ms-sv-chain__ttl { min-width: 0; }
.ms-sv-chain__ttl h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--ms-text, #EAF2FA);
}
.ms-sv-chain__ttl p {
  margin: 4px 0 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ms-text-faint, rgba(234, 242, 250, .44));
}
.ms-sv-chain__ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-left: auto;
  border: 1px solid var(--ms-line, rgba(122, 168, 214, .17));
  border-radius: 9px;
  color: var(--ms-link, #8FC4EC);
}
.ms-sv-chain__desc {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--ms-text-soft, rgba(234, 242, 250, .78));
}
.ms-sv-ico { display: block; width: 18px; height: 18px; }
.ms-sv-chain__pts { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.ms-sv-chain__pts li {
  position: relative;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ms-text-dim, rgba(234, 242, 250, .62));
}
.ms-sv-chain__pts li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  width: 5px;
  height: 5px;
  border: 1px solid var(--ms-line-strong, rgba(122, 168, 214, .34));
  border-radius: 9999px;
}
.ms-sv-chain__fig { margin: 0; }
.ms-sv-chain__fig img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid var(--ms-line, rgba(122, 168, 214, .17));
  border-radius: var(--ms-r-sm, 8px);
  background: var(--ms-surface-3, #0E2438);
}
@media (min-width: 768px) {
  .ms-sv-chain__item {
    grid-template-columns: minmax(0, 1fr) 244px;
    gap: 30px;
    align-items: start;
  }
  .ms-sv-chain__fig img { aspect-ratio: 3 / 2; }
}
@media (min-width: 1024px) {
  .ms-sv-chain__item { grid-template-columns: minmax(0, 1fr) 280px; }
}

/* ---------- 客户保障承诺 ---------- */
.ms-sv-promises {
  display: grid;
  gap: 12px;
  margin: 26px 0 0;
}
@media (min-width: 640px) { .ms-sv-promises { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ms-sv-promises { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
.ms-sv-promise {
  display: flex;
  gap: 13px;
  padding: 18px 18px 19px;
  border: 1px solid var(--ms-line, rgba(122, 168, 214, .17));
  border-radius: var(--ms-r-md, 12px);
  background: var(--ms-surface, rgba(255, 255, 255, .045));
  transition: border-color 220ms ease;
}
.ms-sv-promise:hover { border-color: var(--ms-line-strong, rgba(122, 168, 214, .34)); }
.ms-sv-promise__ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(200, 30, 45, .16);
  color: var(--ms-accent-soft, #F2B7BC);
}
.ms-sv-promise h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--ms-text, #EAF2FA);
}
.ms-sv-promise p {
  margin: 7px 0 0;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ms-text-dim, rgba(234, 242, 250, .62));
}

/* ---------- 分类筛选胶囊 ---------- */
.ms-sv-chips {
  display: flex;
  gap: 8px;
  margin: 24px 0 0;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.ms-sv-chips::-webkit-scrollbar { display: none; }
.ms-sv-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--ms-line, rgba(122, 168, 214, .17));
  border-radius: 9999px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--ms-text-dim, rgba(234, 242, 250, .62));
  background: transparent;
  white-space: nowrap;
  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease;
}
.ms-sv-chip:hover { color: #fff; border-color: var(--ms-line-strong, rgba(122, 168, 214, .34)); }
.ms-sv-chip.is-active {
  color: #fff;
  border-color: var(--ms-brand, #C81E2D);
  background: rgba(200, 30, 45, .18);
}
.ms-sv-chip em {
  margin-left: 6px;
  font-style: normal;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ms-text-faint, rgba(234, 242, 250, .44));
}
.ms-sv-chip.is-active em { color: var(--ms-accent-soft, #F2B7BC); }

/* ---------- 知识库卡片 ---------- */
.ms-sv-arts { display: grid; gap: 14px; margin: 24px 0 0; }
@media (min-width: 640px) { .ms-sv-arts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ms-sv-arts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ms-sv-art {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ms-line, rgba(122, 168, 214, .17));
  border-radius: var(--ms-r-md, 12px);
  background: var(--ms-surface, rgba(255, 255, 255, .045));
  overflow: hidden;
  transition: border-color 220ms ease;
}
.ms-sv-art:hover { border-color: var(--ms-line-strong, rgba(122, 168, 214, .34)); }
.ms-sv-art__fig { position: relative; display: block; }
.ms-sv-art__fig img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--ms-surface-3, #0E2438);
}
.ms-sv-art__cat {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 9999px;
  background: rgba(6, 20, 36, .82);
  border: 1px solid var(--ms-line, rgba(122, 168, 214, .17));
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--ms-link, #8FC4EC);
}
.ms-sv-art__body { display: flex; flex-direction: column; flex: 1; padding: 16px 17px 17px; }
.ms-sv-art h3 {
  margin: 0;
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.55;
  color: var(--ms-text, #EAF2FA);
  transition: color 180ms ease;
}
.ms-sv-art:hover h3 { color: var(--ms-accent-soft, #F2B7BC); }
.ms-sv-art p {
  margin: 9px 0 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--ms-text-dim, rgba(234, 242, 250, .62));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ms-sv-art__more {
  margin-top: auto;
  padding-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ms-link, #8FC4EC);
}

/* 区块底部「查看全部」 */
.ms-sv-foot { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

/* ---------- FAQ ---------- */
.ms-sv-faqs { display: grid; gap: 10px; margin: 24px 0 0; }
@media (min-width: 1024px) { .ms-sv-faqs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; align-items: start; } }
.ms-sv-faq {
  border: 1px solid var(--ms-line, rgba(122, 168, 214, .17));
  border-radius: var(--ms-r-sm, 8px);
  background: var(--ms-surface, rgba(255, 255, 255, .045));
  transition: border-color 220ms ease;
}
.ms-sv-faq[open] { border-color: var(--ms-line-strong, rgba(122, 168, 214, .34)); }
.ms-sv-faq summary {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 15px 16px;
  cursor: pointer;
  list-style: none;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ms-text, #EAF2FA);
}
.ms-sv-faq summary::-webkit-details-marker { display: none; }
.ms-sv-faq summary::marker { content: ""; }
.ms-sv-faq summary:focus-visible { outline: 2px solid var(--ms-link, #8FC4EC); outline-offset: 2px; }
.ms-sv-faq__q {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 6px;
  background: rgba(200, 30, 45, .18);
  font-size: 11.5px;
  font-weight: 800;
  color: var(--ms-accent-soft, #F2B7BC);
}
.ms-sv-faq__t { min-width: 0; flex: 1; }
.ms-sv-faq__cv {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--ms-text-faint, rgba(234, 242, 250, .44));
  transition: transform 220ms ease, color 220ms ease;
}
.ms-sv-faq[open] .ms-sv-faq__cv { transform: rotate(180deg); color: var(--ms-link, #8FC4EC); }
.ms-sv-faq__a {
  padding: 0 16px 16px 49px;
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--ms-text-soft, rgba(234, 242, 250, .78));
}
.ms-sv-faq__a p { margin: 0 0 8px; }
.ms-sv-faq__a p:last-child { margin-bottom: 0; }
.ms-sv-faq__a ul { margin: 8px 0 0; padding-left: 18px; }
.ms-sv-faq__a li { margin-bottom: 5px; }
.ms-sv-faq__a a { color: var(--ms-link, #8FC4EC); }
.ms-sv-faq__a strong { color: var(--ms-text, #EAF2FA); }

/* ---------- 联系信息 + 地图 ---------- */
.ms-sv-contact { display: grid; gap: 22px; margin: 24px 0 0; }
@media (min-width: 1024px) { .ms-sv-contact { grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr); gap: 26px; align-items: start; } }
.ms-sv-cinfo { display: grid; gap: 11px; }
@media (min-width: 640px) { .ms-sv-cinfo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ms-sv-cinfo__card {
  padding: 15px 16px 16px;
  border: 1px solid var(--ms-line, rgba(122, 168, 214, .17));
  border-radius: var(--ms-r-sm, 8px);
  background: var(--ms-surface, rgba(255, 255, 255, .045));
}
.ms-sv-cinfo__card h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ms-text-faint, rgba(234, 242, 250, .44));
}
.ms-sv-cinfo__card b {
  display: block;
  margin-top: 9px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ms-text, #EAF2FA);
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}
.ms-sv-cinfo__card small {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ms-text-dim, rgba(234, 242, 250, .62));
}
.ms-sv-cinfo__card a { color: var(--ms-link, #8FC4EC); }
.ms-sv-map {
  margin-top: 11px;
  border: 1px solid var(--ms-line, rgba(122, 168, 214, .17));
  border-radius: var(--ms-r-sm, 8px);
  overflow: hidden;
  background: var(--ms-surface-3, #0E2438);
}
.ms-sv-map iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* ---------- 表单容器：本文件只负责「服务页右栏吸顶」，皮肤一律不在这里 ----------
   2026-09-23 起，在线提交表单的外观（深色卡壳 / 输入框 / 人机验证同排 / 附件控件 /
   隐私声明 / 结果提示条）**全部**由 static/css/ms-form.css 提供，那是全站唯一真源，
   由 view/{pc,m}/head.html 全站加载。
   本文件原先把皮肤锁在 .ms-sv-formcard 下，只有服务与支持栏目的模板加载 ms-svc.css，
   于是同一个组件在案例/新闻/联系我们页拿不到样式 —— 人机验证的输入框与码图上下错行、
   附件控件完全没有样式。这里不再重复定义任何颜色与尺寸，否则组件又会出现两套观感。 */
.ms-sv-formcard { position: static; }
@media (min-width: 1024px) { .ms-sv-formcard { position: sticky; top: 104px; } }

/* ---------- 空态 ---------- */
.ms-sv-empty {
  margin-top: 24px;
  padding: 44px 22px;
  text-align: center;
  border: 1px solid var(--ms-line, rgba(122, 168, 214, .17));
  border-radius: var(--ms-r-md, 12px);
  background: var(--ms-surface-2, rgba(6, 20, 36, .42));
}
.ms-sv-empty p { margin: 0; font-size: 14.5px; color: var(--ms-text-soft, rgba(234, 242, 250, .78)); }

/* ---------- 分页（与全站同底色） ---------- */
.ms-sv-pager { margin-top: 28px; }
.ms-sv-pager .pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding: 0; margin: 0; list-style: none; }
.ms-sv-pager li > a,
.ms-sv-pager li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 11px;
  border: 1px solid var(--ms-line, rgba(122, 168, 214, .17));
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ms-text-dim, rgba(234, 242, 250, .62));
  background: var(--ms-surface, rgba(255, 255, 255, .045));
  transition: color 180ms ease, border-color 180ms ease;
}
.ms-sv-pager li > a:hover { color: #fff; border-color: var(--ms-line-strong, rgba(122, 168, 214, .34)); }
.ms-sv-pager li.active > span { color: #fff; border-color: var(--ms-brand, #C81E2D); background: rgba(200, 30, 45, .22); }
.ms-sv-pager li.disabled > span { opacity: .4; }

/* ---------- 文章详情 ---------- */
.ms-sv-dhead { padding: 30px 0 0; }
.ms-sv-dhead h1 {
  margin: 14px 0 0;
  font-size: clamp(22px, 3.2vw, 32px);
  line-height: 1.36;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ms-text, #EAF2FA);
}
.ms-sv-dmeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  color: var(--ms-text-faint, rgba(234, 242, 250, .44));
}
.ms-sv-dmeta b { font-weight: 600; color: var(--ms-text-dim, rgba(234, 242, 250, .62)); }
.ms-sv-body { margin: 24px 0 0; }
.ms-sv-maincol { min-width: 0; }

.ms-sv-related { margin: 26px 0 0; }
.ms-sv-related h2 {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 800;
  color: var(--ms-text, #EAF2FA);
  display: flex;
  align-items: center;
  gap: 9px;
}
.ms-sv-related h2 span { display: block; width: 3px; height: 15px; border-radius: 2px; background: var(--ms-brand, #C81E2D); }
.ms-sv-related ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.ms-sv-related a {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--ms-line, rgba(122, 168, 214, .17));
  border-radius: var(--ms-r-sm, 8px);
  background: var(--ms-surface, rgba(255, 255, 255, .045));
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ms-text-soft, rgba(234, 242, 250, .78));
  transition: color 180ms ease, border-color 180ms ease;
}
.ms-sv-related a:hover { color: #fff; border-color: var(--ms-line-strong, rgba(122, 168, 214, .34)); }

/* 正文排版（复用 ms-case.css 的 .ms-cs-prose，此处只补服务页需要的细节） */
.ms-sv-body .ms-cs-prose { margin-top: 0; }
.ms-sv-body .ms-cs-prose table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 13.5px; }
.ms-sv-body .ms-cs-prose th,
.ms-sv-body .ms-cs-prose td {
  padding: 9px 12px;
  border: 1px solid var(--ms-line, rgba(122, 168, 214, .17));
  text-align: left;
}
.ms-sv-body .ms-cs-prose th { background: rgba(255, 255, 255, .05); color: var(--ms-text, #EAF2FA); font-weight: 700; }
.ms-sv-body .ms-cs-prose ul,
.ms-sv-body .ms-cs-prose ol { padding-left: 20px; }
.ms-sv-body .ms-cs-prose li { margin-bottom: 6px; }
.ms-sv-body .ms-cs-prose img { max-width: 100%; height: auto; border-radius: var(--ms-r-sm, 8px); }

/* ============================================================================
   Phase W（2026-09-23）：技术知识库版面改造
   ----------------------------------------------------------------------------
   客户原话：
     1)「技术知识库栏目下的，不要使用很大的图片配文字内容，不要图，这里做底色搭配就可以了」
     2)「技术知识库的主目录，全部资料四个字要横排不要竖排，同时把那几个目录……手机端
        排成2排，且在浏览这个栏目下的详细页内容时，这几个要固定显示，且浏览到哪个
        详细页、属于哪个栏目下的菜单项，就要高亮显示这个菜单项」
     3)「知识库的内容页不要配图」

   ⚠ 关于「手机端排成 2 排」的实现方式：
     目录共 6 项（全部资料 + 5 个分类），要正好 2 排就是每排 3 个。
     本文件里**不写 @media** —— 用 auto-fit 的计算结果会随容器宽度浮动
     （390px 宽是 3 列、360px 宽会掉成 2 列 → 变成 3 排，不稳定）。
     所以桌面端在这里定 auto-fit 基准，移动端在 view/m/*.html 自带的
     <style> 里覆盖成固定 3 列。m 模板本来只服务移动端，不需要媒体查询，
     既拿到了确定的 2 排，也不违反「规则不许落进 @media」这条约定。
   ========================================================================== */

/* ---------- 目录胶囊：横排、不换行、可点区域足够大 ---------- */
.ms-sv-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin: 24px 0 0;
  /* 上一版是 flex + overflow-x:auto（横向滚动条）。改成网格后不再滚动，
     overflow 那两条也就没用了，一并去掉避免留下横向滚动条。 */
  overflow: visible;
  padding-bottom: 0;
}
.ms-sv-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;         /* 居中：既保证「全部资料」横排，也避免字数不同的项左右不对齐 */
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  white-space: nowrap;             /* ←「全部资料」竖排的直接原因就是没有这一条：单元格变窄后逐字换行 */
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms-sv-chip em {
  margin-left: 0;                  /* 由父级 gap 统一控制间距 */
  flex: 0 0 auto;
}

/* ---------- 列表卡片：去掉大图，改底色搭配 ----------
   上一版每张卡顶部是一张 16:10 实拍大图（.ms-sv-art__fig > img），
   5 张卡就是 5 张大图，与知识库「工具书」的定位不符，也拖慢列表页。
   现在改用一条深色渐变底衬，把分类名当作底纹文字直接印在上面：
   既不依赖任何图片文件，又能一眼区分分类，仍然是纯 CSS、不增加请求。 */
.ms-sv-art__cover {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 62px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--ms-line, rgba(122, 168, 214, .17));
  background:
    radial-gradient(130% 150% at 100% 0%,
      rgba(200, 30, 45, .18) 0%, rgba(200, 30, 45, 0) 62%),
    linear-gradient(135deg, #16273C 0%, #0B1E33 100%);
}
.ms-sv-art__cover b {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.5;
  color: var(--ms-accent-soft, #F2B7BC);
}
.ms-sv-art__cover i {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--ms-text-faint, rgba(234, 242, 250, .5));
}
.ms-sv-art:hover .ms-sv-art__cover {
  background:
    radial-gradient(130% 150% at 100% 0%,
      rgba(200, 30, 45, .26) 0%, rgba(200, 30, 45, 0) 64%),
    linear-gradient(135deg, #1A2E46 0%, #0B1E33 100%);
}

/* ---------- 内容页：固定显示的目录（sticky） ----------
   复用 .ms-sv-anchor 的 sticky 机制（top:104px、左细线、is-active 红条）。
   ⚠ 这里只补「目录」自己的细节，不重复定义 sticky —— 那套位置计算踩过坑，
     见 .ms-sv-shell 上方关于 grid align-items 的注释。 */
.ms-sv-dir a .n { display: none; }        /* 目录项不带序号，去掉占位 */
.ms-sv-dir a b {
  font-weight: 600;
  color: inherit;
}
.ms-sv-dir a em {
  margin-left: auto;
  font-style: normal;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ms-text-faint, rgba(234, 242, 250, .44));
}
.ms-sv-dir a.is-active em { color: var(--ms-accent-soft, #F2B7BC); }
/* 目录项允许两端对齐（名称 + 篇数），所以要覆盖基线对齐 */
.ms-sv-dir a { justify-content: space-between; }

/* ---------- 内容页：文章标题移入正文区后的排版 ----------
   导航区按客户要求不再显示标题，标题改由正文区承载（仍然是页面唯一的 h1，
   SEO 不受影响）。 */
.ms-sv-artttl {
  margin: 0;
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -.005em;
  color: var(--ms-text, #EAF2FA);
}
.ms-sv-arttop {
  padding: 26px 0 0;
  border-bottom: 1px solid var(--ms-line, rgba(122, 168, 214, .17));
  padding-bottom: 18px;
}

/* ---------- 无图 Banner（知识库列表 / 内容页用） ----------
   客户的第 1 条要求是「不要使用很大的图片配文字内容，这里做底色搭配就可以了」。
   知识库这两页的顶部原来是一张 1600×900 的实拍大图 + 标题压在上面，正是被点名的那种。
   现在去掉 <img>，只留底色：深蓝底 + 右上角一点品牌色晕染，
   视觉上仍是「栏目头」，但不再依赖任何图片文件。 */
.ms-sv-hero--plain {
  background:
    radial-gradient(120% 160% at 100% 0%,
      rgba(200, 30, 45, .16) 0%, rgba(200, 30, 45, 0) 58%),
    linear-gradient(135deg, #16273C 0%, #0B1E33 62%, #061424 100%);
}
/* 无图时不需要那层压暗蒙版（它本来是为图片降对比用的），去掉更干净 */
.ms-sv-hero--plain .ms-sv-hero__bg { display: none; }

/* ---------- 无障碍：减弱动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ms-svpage * { transition-duration: 1ms !important; }
}

/* ============================================================================
   深色底适配层（覆盖 site.css 里为浅色页面设计的原子类）
   ----------------------------------------------------------------------------
   site.css 是预编译产物、全站共用不能改，且 .ms-label / .ms-err / .ms-btn-outline
   这些原子类的颜色是按**白底**页面选的（深蓝字、纯红字）。服务页整页是深底，
   直接沿用会读不出来，所以在 ms-svc.css 里按更高权重覆盖（0,2,0 > 0,1,0），
   只改颜色/描边，不动任何尺寸与圆角，保证跨页观感一致。
   ========================================================================== */

/* 次级按钮：浅色描边 + 浅色字，深底上可读 */
.ms-svpage .ms-btn-outline {
  border-color: var(--ms-line-strong, rgba(122, 168, 214, .34));
  background: rgba(255, 255, 255, .04);
  color: var(--ms-text, #EAF2FA);
}
.ms-svpage .ms-btn-outline:hover {
  border-color: var(--ms-link, #8FC4EC);
  color: #fff;
  background: rgba(143, 196, 236, .1);
}