/* ============================================================================
 * clib-skin-ability-v1.css — 换皮 · 能力五维页「秩序」（配 ability-empty.js）
 * ----------------------------------------------------------------------------
 * 实测：两行"区块标题"被渲染成**整宽横条**（`35 项能力详情…` 占据 1400×36 的框），
 *   与真正的卡片长一样、层级却不对 ⇒ 规格 §二-1「层级只许用字号/字重/字色」，
 *   标题不该披着卡片的外壳。
 * 做法：把这两行还原成"区块标题"（去框去底、按 22px/600 的区块标题档）。
 * 回退：删 index.html 里指向本文件的那一行 <link>。
 * ========================================================================== */

#page-ability .ability-detail-title {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 24px 0 12px !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: #1D1D1F !important;
}

/* ② **去掉"框套框"**：卡片的标题自己也被渲染成一张卡（border 1px #E8E8ED + 白底 + 圆角 18px）。
   规格 §二-1「层级只许用 字号/字重/字色」⇒ 标题还原成标题，不再披外壳。 */
#page-ability .ability-card-title {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: #1D1D1F !important;
}

/* ③ **左右失衡**：左卡 709 宽(白底/18圆角) vs 右卡 675 宽(灰底 #F5F5F7 / 24圆角) ——
   宽、底、圆角三样都不一样。按规格统一：两栏 **1fr 1fr 等宽** · 卡片面 白底 + 1px #E8E8ED + 圆角 18。 */
#page-ability .ability-overview {
  grid-template-columns: 1fr 1fr !important;
  align-items: stretch !important;
}
#page-ability .ability-radar-card,
#page-ability .ability-dims-overview {
  border: 1px solid #E8E8ED !important;
  background: #FFFFFF !important;
  border-radius: 18px !important;
  padding: 20px !important;
}

/* ④ 拆掉"卡里卡"：左卡里那张**无 class** 的内嵌小卡（200×125 · 灰底 #F5F5F7 + 细描边 + 圆角14）
   属于同一类"框套框" ⇒ 拍平成普通内容块（去底、去边、去圆角）。 */
#page-ability .ability-radar-card div:not([class]),
#page-ability .ability-dims-overview div:not([class]) {
  background: transparent !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ⑤ 两栏内容垂直居中同一节奏（左卡之前是"标题 + 空雷达 + 底部信息"，全程靠下） */
#page-ability .ability-radar-card,
#page-ability .ability-dims-overview {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}