/* ==========================================================================
   VPNCW · ai.css
   AI 工具加速专题页专属版式（只补充布局，不重复 base/components 组件）
   颜色、字体、圆角全部引用 base.css 的 :root 令牌。
   ========================================================================== */

.ai-page .ai-factor-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
}
.ai-page .ai-factor{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}
.ai-factor-kicker{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.14em;
  color:var(--text-muted);
  text-transform:uppercase;
}
.ai-factor-title{
  font-size:18px;
  line-height:1.3;
  font-weight:500;
  letter-spacing:-.012em;
}
.ai-factor-body{
  font-size:14px;
  line-height:1.72;
  color:var(--text-muted);
}
.ai-callout{ margin-top:20px; }

.ai-tool-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
}
.ai-tool-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}
.ai-tool-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:10px 12px;
}
.ai-tool-index{
  flex:0 0 auto;
  padding-top:4px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  color:var(--accent-dark);
}
.ai-tool-name{
  font-size:20px;
  line-height:1.25;
  font-weight:500;
  letter-spacing:-.012em;
}
.ai-tool-tag{ margin-left:auto; flex:0 0 auto; }
.ai-tool-body{
  font-size:14px;
  line-height:1.72;
  color:var(--text-muted);
}
.ai-tool-note{
  margin-top:auto;
  padding-top:10px;
  border-top:1px solid var(--border);
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.05em;
  color:var(--text-muted);
}
.ai-points{
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:12.5px;
  line-height:1.62;
  color:var(--text-muted);
}
.ai-points li{
  display:flex;
  align-items:flex-start;
  gap:8px;
  min-width:0;
}
.ai-points li::before{
  content:"";
  flex:0 0 auto;
  width:4px;
  height:4px;
  margin-top:7px;
  border-radius:var(--r-pill);
  background:var(--accent-soft);
}

.ai-matrix-note{
  margin-top:12px;
  font-size:12.5px;
  line-height:1.68;
  color:var(--text-muted);
}
.ai-matrix-note a{
  color:var(--accent-dark);
  text-decoration:underline;
  text-underline-offset:3px;
}
.ai-tool-cell{
  font-weight:500;
  white-space:nowrap;
}

.ai-compare{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
}
.ai-compare .panel{ height:100%; }
.ai-compare .panel-body{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ai-dev-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
}
.ai-dev-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}
.ai-dev-title{
  font-size:18px;
  line-height:1.3;
  font-weight:500;
  letter-spacing:-.012em;
}
.ai-dev-body{
  font-size:13.5px;
  line-height:1.7;
  color:var(--text-muted);
}

.ai-step-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
}
.ai-step{
  display:flex;
  align-items:flex-start;
  gap:14px;
  min-width:0;
}
.ai-step-body{ min-width:0; }
.ai-step-title{
  font-size:16px;
  line-height:1.35;
  font-weight:500;
  letter-spacing:-.008em;
}
.ai-step-text{
  margin-top:4px;
  font-size:13px;
  line-height:1.68;
  color:var(--text-muted);
}

.ai-pick-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
}
.ai-pick{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}
.ai-pick-title{
  font-size:18px;
  line-height:1.3;
  font-weight:500;
  letter-spacing:-.012em;
}
.ai-pick-body{
  font-size:13.5px;
  line-height:1.7;
  color:var(--text-muted);
}

.ai-next{ margin-top:24px; }
.ai-next .panel-body{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:18px 24px;
}
.ai-next-copy{
  flex:1 1 360px;
  min-width:0;
}
.ai-next-title{
  font-size:18px;
  line-height:1.35;
  font-weight:500;
  letter-spacing:-.012em;
}
.ai-next-text{
  margin-top:6px;
  font-size:13.5px;
  line-height:1.72;
  color:var(--text-muted);
}
.ai-next-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  flex:0 0 auto;
}
.ai-related{
  margin-top:10px;
  font-size:12.5px;
  line-height:1.7;
  color:var(--text-muted);
}
.ai-related a{
  color:var(--accent-dark);
  text-decoration:underline;
  text-underline-offset:3px;
}

@media (max-width:1040px){
  .ai-page .ai-factor-grid,
  .ai-dev-grid,
  .ai-pick-grid{
    grid-template-columns:minmax(0,1fr);
  }
  .ai-tool-grid,
  .ai-compare,
  .ai-step-grid{
    grid-template-columns:minmax(0,1fr);
  }
}

@media (max-width:768px){
  .ai-next .panel-body{
    flex-direction:column;
    align-items:flex-start;
  }
  .ai-next-links{
    width:100%;
  }
  .ai-next-links .btn{
    flex:1 1 auto;
  }
}

@media (max-width:640px){
  .ai-tool-head{ gap:8px 10px; }
  .ai-tool-tag{ margin-left:0; }
  .ai-tool-name{ font-size:19px; }
  .ai-factor-title,
  .ai-dev-title,
  .ai-pick-title{ font-size:17px; }
  .ai-next-links .btn{ width:100%; }
}