/* ==========================================================================
   VPNFH — AI 工具加速专题页（zh-CN/ai.html）
   仅本页使用：hero 工具标签、工具档案卡、顺序列表、双列对照、开发者网格
   颜色 / 圆角 / 阴影一律取自 :root 设计令牌
   ========================================================================== */

/* ---------- hero 工具标签行 ---------- */
.ai-hero-chips{
  justify-content:center;
  margin-top:22px;
}
.ai-hero-chips .badge{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.02em;
}

/* ---------- 事实带上方的一句总结 ---------- */
.ai-lead{
  max-width:720px;
  margin:0 auto var(--sp-5);
  text-align:center;
  font-size:15.5px;
  line-height:1.8;
  color:var(--text-muted);
}

/* ---------- 对照表：列较多，单独放宽最小宽度 ---------- */
.line-table.ai-table{min-width:840px}

/* ---------- 工具档案卡 ---------- */
.tool-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.tool-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:22px;
  border-radius:var(--r-card);
  border:1px solid var(--border);
  background:var(--bg-panel);
  box-shadow:var(--shadow-card-soft);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.tool-card:hover{
  transform:translateY(-2px);
  border-color:var(--accent-line);
  box-shadow:var(--shadow-float);
}
.tool-head{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:6px 10px;
  padding-bottom:14px;
  border-bottom:1px solid var(--border);
}
.tool-idx{
  flex:none;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--accent-dark);
}
.tool-name{
  font-size:18px;
  font-weight:500;
  letter-spacing:-.01em;
  color:var(--text);
}
.tool-kind{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  min-height:22px;
  margin-left:auto;
  padding:0 9px;
  border-radius:var(--r-pill);
  background:var(--bg-panel-2);
  font-size:11.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--text-muted);
}
.tool-spec{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:14px;
}
.tool-row{
  display:grid;
  grid-template-columns:80px minmax(0,1fr);
  gap:12px;
  align-items:baseline;
}
.tool-key{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.03em;
  white-space:nowrap;
  color:var(--text-faint);
}
.tool-val{
  min-width:0;
  font-size:13.5px;
  line-height:1.7;
  color:var(--text-muted);
  overflow-wrap:anywhere;
}

/* ---------- 顺序列表（注册与登录） ---------- */
.ai-steps{
  display:flex;
  flex-direction:column;
  gap:12px;
  counter-reset:ai-step;
}
.ai-steps li{
  position:relative;
  counter-increment:ai-step;
  min-width:0;
  padding:16px 18px 16px 56px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--bg-panel);
  box-shadow:var(--shadow-pill);
  font-size:14px;
  line-height:1.78;
  color:var(--text-muted);
}
.ai-steps li::before{
  content:counter(ai-step,decimal-leading-zero);
  position:absolute;
  left:18px;
  top:16px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--accent-dark);
}
.ai-steps strong{color:var(--text)}

/* ---------- 双列对照 / 开发者网格 ---------- */
.ai-compare{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.ai-dev-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.ai-panel{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}
.ai-panel h3{
  font-size:17px;
  letter-spacing:-.01em;
}
.ai-panel p{
  font-size:14px;
  line-height:1.8;
  color:var(--text-muted);
}
.ai-panel ul{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:2px;
  font-size:13.5px;
  line-height:1.7;
  color:var(--text-muted);
}
.ai-panel li{
  display:flex;
  gap:8px;
  align-items:flex-start;
  min-width:0;
}
.ai-panel li::before{
  content:"";
  width:5px;
  height:5px;
  flex:none;
  margin-top:8px;
  border-radius:50%;
  background:var(--accent);
}

/* ---------- 代码示例与说明 ---------- */
.ai-code{margin-top:20px}
.ai-code-note{
  margin-top:12px;
  font-size:12.5px;
  line-height:1.7;
  color:var(--text-faint);
}

/* ---------- 文字链行 ---------- */
.ai-links{
  display:flex;
  flex-wrap:wrap;
  gap:14px 28px;
  margin-top:24px;
}

/* ---------- 响应式 ---------- */
@media (max-width:1040px){
  .ai-dev-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .tool-grid{grid-template-columns:1fr}
  .ai-compare{grid-template-columns:1fr}
}
@media (max-width:640px){
  .ai-hero-chips{margin-top:18px}
  .tool-card{padding:18px}
  .tool-row{grid-template-columns:1fr;gap:3px}
  .tool-kind{margin-left:0}
  .ai-steps li{padding:14px 14px 14px 48px}
  .ai-steps li::before{left:14px;top:14px}
  .ai-links{gap:12px 20px}
}