/* ============================================================
   九章 MCP 验证板教程专属样式
   仅由 9mod-mcpboard 教程页面通过 frontmatter head 引用，
   不影响其他产品线页面与全局主题。
   ============================================================ */

/* ---- 页面顶部模块标签行 ---- */
.jmc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 22px;
}

.jmc-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--vp-c-brand-1);
  background: var(--vp-c-brand-soft);
  border: 1px solid color-mix(in srgb, var(--vp-c-brand-1) 22%, transparent);
  border-radius: 999px;
}

/* ---- 概述信息卡 ---- */
.jmc-infocard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 18px 0 8px;
}

.jmc-infocard-item {
  background: var(--vp-c-bg-alt);
  border: 1px solid var(--vp-c-divider);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--vp-c-text-2);
}

.jmc-infocard-item .jmc-ico {
  font-size: 18px;
  margin-right: 6px;
}

.jmc-infocard-item b {
  display: block;
  margin-bottom: 4px;
  color: var(--vp-c-text-1);
  font-size: 14px;
}

/* ---- 章节徽标（正文 h3 前的小图标，用于分节） ---- */
.jmc-h3-ico { margin-right: 6px; }

/* ---- 下一步导航卡 ---- */
.jmc-next {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: stretch;
  margin: 20px 0 10px;
}

.jmc-next-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 14px 18px;
  border-radius: 12px;
  text-decoration: none !important;
  border: 1px solid var(--vp-c-divider);
  background: var(--vp-c-bg-alt);
  transition: all 0.2s ease;
}

.jmc-next-card:hover {
  border-color: var(--vp-c-brand-2);
  background: var(--vp-c-brand-soft);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px -6px var(--vp-c-brand-1);
}

.jmc-next-card .jmc-next-dir {
  font-size: 12px;
  color: var(--vp-c-brand-1);
  font-weight: 600;
}

.jmc-next-card .jmc-next-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--vp-c-text-1);
  line-height: 1.4;
}

.jmc-next-current {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 10px;
  font-size: 13px;
  color: var(--vp-c-text-2);
  background: var(--vp-c-brand-soft);
  border: 1px solid color-mix(in srgb, var(--vp-c-brand-1) 25%, transparent);
  border-radius: 12px;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .jmc-next { grid-template-columns: 1fr; }
  .jmc-next-current { order: -1; }
}

/* ---- 内联高亮徽章（如 "6656"、"115200" 等关键数值） ---- */
.jmc-badge {
  display: inline-block;
  padding: 0 7px;
  font-weight: 700;
  font-size: 13px;
  color: var(--vp-c-brand-1);
  background: var(--vp-c-brand-soft);
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--vp-c-brand-1) 20%, transparent);
}

/* ---- 步骤代码块：独立复制框增强（九章板教程页） ---- */
.step-code-wrapper {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  box-shadow: 0 2px 8px -4px rgba(0, 0, 0, 0.25);
}

/* 复制按钮常显（原为 hover 才显示） */
.step-code-wrapper .step-copy-btn {
  opacity: 1;
  top: 0.6rem;
  right: 0.6rem;
  padding: 0.3rem 0.8rem;
  background: var(--vp-c-brand-3);
  color: #fff;
  border: none;
  font-weight: 600;
}

.step-code-wrapper .step-copy-btn:hover {
  background: var(--vp-c-brand-2);
}

.step-code-wrapper pre {
  border-radius: 10px;
}