/* ==========================================================================
   VPNDH · ai.css
   AI 工具加速专题页专属样式：页首两栏、工具速览面板、分节节奏、
   工具卡、接入方式卡、表格注脚。
   颜色 / 字体 / 圆角 / 阴影一律引用 base.css 的 :root 令牌。
   ========================================================================== */

/* ---------- 1. 页首 ---------- */
.ai-hero{
  position:relative;
  padding-top:var(--sp-7);
  padding-bottom:var(--sp-8);
}
.ai-hero-inner{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:var(--sp-7);
  align-items:start;
}
.ai-hero-copy{min-width:0}
.ai-hero h1{
  margin:0 0 var(--sp-4);
  font-size:clamp(2.05rem,1.2rem + 2.9vw,3.6rem);
  letter-spacing:-.03em;
}
.ai-hero .lede{margin:0;max-width:56ch}
.ai-updated{
  margin:var(--sp-3) 0 0;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.02em;
  color:var(--text-muted);
}
.ai-cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:var(--sp-5);
}
.ai-hero .trust{margin-top:var(--sp-5)}
.ai-hero .fact-band{margin-top:var(--sp-6)}

/* ---------- 2. 工具速览面板 ---------- */
.ai-panel{
  min-width:0;
  padding:20px;
  background:var(--bg-panel);
  border:1px solid var(--panel-line);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-card),var(--edge-light);
}
.ai-panel-kicker{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 14px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  color:var(--text-muted);
}
.ai-panel-kicker::before{
  content:"";
  flex:none;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 3px var(--accent-12);
}
.ai-panel-list{display:flex;flex-direction:column}
.ai-panel-row{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:9px 2px;
  border-bottom:1px dashed var(--ink-08);
  font-size:13px;
}
.ai-panel-row:last-child{border-bottom:0}
.ai-panel-name{
  flex:none;
  min-width:76px;
  font-weight:600;
  letter-spacing:-.01em;
}
.ai-panel-need{
  flex:1 1 auto;
  min-width:0;
  font-size:12px;
  color:var(--text-muted);
}
.ai-panel-row .tag{flex:none}
.ai-panel-foot{
  margin:14px 0 0;
  padding-top:12px;
  border-top:1px dashed var(--ink-12);
  font-size:11.5px;
  line-height:1.65;
  color:var(--text-muted);
}

/* ---------- 3. 分节节奏 ---------- */
.ai-sec{
  padding-top:var(--sp-7);
  padding-bottom:var(--sp-7);
  border-top:1px dashed var(--ink-12);
}
.ai-sec:first-of-type{
  border-top:0;
  padding-top:var(--sp-6);
}
.ai-sec h2{margin:0 0 var(--sp-3)}
.ai-sec .lede{margin-bottom:var(--sp-5)}
.ai-sec .callout{margin-top:var(--sp-5)}
.ai-sec .steps + .prose{margin-top:var(--sp-6)}
.ai-sec .prose + .ai-cta-row{margin-top:var(--sp-6)}

/* ---------- 4. 工具卡 ---------- */
.ai-tool-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:var(--sp-4);
}
.ai-tool-grid > *{min-width:0}
.ai-tool-card{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.ai-tool-card h3{
  margin:0;
  font-size:15px;
  letter-spacing:-.01em;
}
.ai-tool-card p{
  margin:0;
  font-size:13.5px;
  line-height:1.72;
  color:var(--text-muted);
}
.ai-tool-card .tag{
  margin-top:auto;
  align-self:flex-start;
}

/* ---------- 5. 接入方式卡 ---------- */
.ai-mode-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--sp-4);
}
.ai-mode-grid > *{min-width:0}
.ai-mode{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
  padding:22px;
  background:var(--bg-panel);
  border:1px solid var(--panel-line);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-soft),var(--edge-light);
}
.ai-mode-k{
  margin:0;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--accent);
}
.ai-mode h3{
  margin:0;
  font-size:15.5px;
}
.ai-points{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:13.5px;
  line-height:1.7;
  color:var(--text-muted);
}
.ai-points li{
  display:flex;
  align-items:flex-start;
  gap:8px;
}
.ai-points li::before{
  content:"";
  flex:none;
  width:5px;
  height:5px;
  margin-top:8px;
  border-radius:50%;
  background:var(--accent);
}
.ai-mode code{
  padding:1px 5px;
  border-radius:var(--r-xs);
  background:var(--bg-panel-2);
  font-size:12px;
}
.ai-mode pre{
  margin:0;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--bg-panel-3);
  font-size:12px;
}

/* ---------- 6. 表格注脚 ---------- */
.ai-table-note{
  margin:10px 0 var(--sp-5);
  font-size:12px;
  line-height:1.65;
  color:var(--text-muted);
}

/* ---------- 7. 响应式 ---------- */
@media (max-width:980px){
  .ai-hero{padding-top:var(--sp-6);padding-bottom:var(--sp-7)}
  .ai-hero-inner{
    grid-template-columns:minmax(0,1fr);
    gap:var(--sp-5);
  }
  .ai-panel{order:2}
}
@media (max-width:640px){
  .ai-panel{padding:16px}
  .ai-panel-name{min-width:64px;font-size:12.5px}
  .ai-panel-need{font-size:11.5px}
  .ai-mode{padding:18px}
  .ai-tool-grid{grid-template-columns:minmax(0,1fr)}
}