/* ==========================================================================
   VPNMK · ai.css
   AI 工具加速专题页专属样式
   页面头光斑 / 正文段落 / 三列说明卡 / 对照表宽度 / 拓扑连线 /
   代码块 / 选线建议网格 / 价格条与按钮行
   颜色、圆角、阴影一律引用 base.css 的 :root 令牌
   ========================================================================== */

/* ---------- 页面头 ---------- */

.ai-head{position:relative}

.ai-head .page-title{margin-top:18px}

.ai-glow{
  position:absolute;
  right:-140px;
  top:-40px;
  width:520px;
  height:520px;
  border-radius:var(--r-pill);
  background:radial-gradient(circle at 50% 50%,var(--warm-22) 0%,var(--warm-06) 44%,var(--clear) 72%);
  pointer-events:none;
  z-index:-1;
}

/* ---------- 章节容器 ---------- */

.ai-article{position:relative}

.ai-article .toc-tabs + .sec{padding-top:10px}

/* ---------- 正文段落 ---------- */

.ai-p{
  font-size:14.5px;
  line-height:1.8;
  color:var(--text-muted);
  letter-spacing:.005em;
}
.ai-p + .ai-p{margin-top:12px}
.ai-p strong{color:var(--text);font-weight:600}
.ai-p a{
  color:var(--accent-dark);
  text-decoration:underline;
  text-underline-offset:2px;
}
.ai-p a:hover{color:var(--accent)}

.ai-note{
  margin-top:14px;
  font-size:12.5px;
  line-height:1.72;
  color:var(--text-soft);
}

/* ---------- 三列说明卡 ---------- */

.ai-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:18px;
}
.ai-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}

.ai-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}

.ai-card-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  flex:none;
  border-radius:var(--r-sm);
  border:1px solid var(--accent-32);
  background:var(--accent-04);
  color:var(--accent-dark);
}
.ai-card-icon svg{width:18px;height:18px}

.ai-card-k{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.1em;
  color:var(--text-soft);
}

.ai-card h3{letter-spacing:-.02em}

.ai-card p{
  font-size:13.5px;
  line-height:1.78;
  color:var(--text-muted);
}

/* ---------- 拓扑连线 ---------- */

.ai-topo{
  width:100%;
  max-width:820px;
  height:auto;
  margin:36px auto 0;
}
.ai-topo .topo-line-a{stroke:var(--accent-32)}
.ai-topo .topo-line-b{stroke:var(--ink-16)}
.ai-topo .topo-dot-a{fill:var(--accent)}
.ai-topo .topo-dot-b{fill:var(--accent-55)}

/* ---------- 表格 ---------- */

.ai-table{min-width:920px}
.ai-table--narrow{min-width:640px}

.ai-tags{
  display:inline-flex;
  flex-wrap:wrap;
  gap:4px;
}

/* ---------- 代码块 ---------- */

.ai-code{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin-top:4px;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--bg-panel3);
  font-family:var(--font-mono);
  font-size:12.5px;
  line-height:1.8;
  color:var(--text);
}
.ai-code code{
  font-family:inherit;
  font-size:inherit;
  overflow-wrap:normal;
  word-break:normal;
  white-space:pre;
}

/* ---------- 选线建议 ---------- */

.ai-pick-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:18px;
}

.ai-pick{
  display:flex;
  gap:12px;
  min-width:0;
  padding:18px 20px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--bg-panel);
}

.ai-pick-mark{
  display:flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  flex:none;
  border-radius:50%;
  background:var(--accent-10);
  color:var(--accent-dark);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  line-height:1;
}

.ai-pick h3{
  font-size:15.5px;
  letter-spacing:-.015em;
}

.ai-pick p{
  margin-top:5px;
  font-size:13px;
  line-height:1.72;
  color:var(--text-muted);
}

/* ---------- 价格条与按钮行 ---------- */

.ai-price-strip{margin-top:22px}

.ai-cta-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:22px;
}

/* ---------- 响应式 ---------- */

@media (max-width:1080px){
  .ai-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ai-glow{right:-220px}
}

@media (max-width:760px){
  .ai-grid,
  .ai-grid--2,
  .ai-pick-grid{grid-template-columns:minmax(0,1fr)}
  .ai-glow{
    width:380px;
    height:380px;
    right:-180px;
    top:-20px;
  }
  .ai-topo{margin-top:26px}
}