/* ==========================================================================
   VPNUJ — ai.css
   AI 工具加速专题页：页头、请求链路示意、工具卡、延伸链接。
   仅引用 base.css 的 :root 令牌，不新增颜色。
   ========================================================================== */

/* ==========================================================================
   1. 页头
   ========================================================================== */

.ai-head{
  position:relative;
  max-width:100%;
  overflow-x:clip;
  padding-block:28px 8px;
}

.ai-head .hero-glow{top:-230px;right:-150px;}

.ai-inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.ai-title{
  margin:14px 0 0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(34px,4.4vw,58px);
  line-height:1.08;
  letter-spacing:-.03em;
  color:var(--text);
}

.ai-sub{
  margin:14px 0 0;
  max-width:64ch;
  font-size:16.5px;
  line-height:1.68;
  color:var(--text-muted);
}

.ai-sub strong{color:var(--text);font-weight:600;}

.ai-cta{margin-top:22px;}

.ai-facts{
  justify-content:flex-start;
  margin-top:16px;
  text-align:left;
}

/* ==========================================================================
   2. 请求链路示意
   ========================================================================== */

.ai-flow .panel-body{padding:26px 28px 24px;}

.ai-flow-title{
  margin:8px 0 0;
  font-size:clamp(22px,2.2vw,28px);
  letter-spacing:-.02em;
}

.ai-flow-text{
  margin:10px 0 0;
  max-width:66ch;
  font-size:14.5px;
  line-height:1.7;
  color:var(--text-muted);
}

.ai-topo{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  margin-top:18px;
}

.topo-horizon{stroke:var(--border);stroke-width:1;}
.topo-link{stroke:var(--border-strong);stroke-width:1.4;}
.topo-halo{stroke:var(--border);stroke-width:1;}
.topo-dot{fill:var(--text);}
.topo-dot-accent{fill:var(--accent);}
.topo-dot-soft{fill:var(--text-soft);}

.ai-legend{
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  margin:14px 0 0;
  padding:0;
  list-style:none;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.02em;
  color:var(--text-soft);
}

.ai-legend li{display:inline-flex;align-items:center;gap:7px;}

.ai-legend i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--border-strong);
  flex:none;
}

.ai-legend .is-key{color:var(--text);}
.ai-legend .is-key i{background:var(--accent);}

/* ==========================================================================
   3. 正文列
   ========================================================================== */

.prose.ai-doc{max-width:min(100%,880px);}

.ai-doc .toc-tabs{margin:0 0 var(--sp-5);}

.ai-doc section:first-of-type > h2:first-child{margin-top:0;}

/* ==========================================================================
   4. 工具卡
   ========================================================================== */

.tool-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  gap:12px;
  margin-block:var(--sp-4) var(--sp-5);
}

.tool-grid > *{min-width:0;}

.tool-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:18px 18px 17px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-xs);
  transition:transform var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             box-shadow var(--dur-fast) var(--ease);
}

.tool-card::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:2px;
  border-radius:var(--r-md) var(--r-md) 0 0;
  background:var(--border);
  transition:background-color var(--dur-fast) var(--ease);
}

.tool-card:hover{
  transform:translateY(-2px);
  border-color:var(--border-strong);
  box-shadow:var(--shadow-card);
}

.tool-card:hover::before{background:var(--accent);}

.tool-card .tool-tag{
  margin:0;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--text-soft);
}

.tool-card h3{
  margin:0;
  font-size:15.5px;
}

.tool-card p{
  margin:0;
  font-size:13px;
  line-height:1.68;
  color:var(--text-muted);
}

/* ==========================================================================
   5. 延伸链接
   ========================================================================== */

.ai-doc .ai-next{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
  margin:var(--sp-5) 0 var(--sp-4);
  padding:0;
  list-style:none;
}

.ai-doc .ai-next li{margin:0;}

.ai-doc .ai-next a{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:16px 18px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-xs);
  color:var(--text);
  text-decoration:none;
  transition:transform var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             box-shadow var(--dur-fast) var(--ease);
}

.ai-doc .ai-next a:hover{
  transform:translateY(-2px);
  border-color:var(--border-strong);
  box-shadow:var(--shadow-card);
}

.ai-next b{font-size:14.5px;font-weight:600;}

.ai-next span{
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--text-soft);
}

/* ==========================================================================
   6. 响应式
   ========================================================================== */

@media (max-width:760px){
  .ai-head .hero-glow{top:-160px;right:-120px;}
}

@media (max-width:640px){
  .ai-head{padding-block:18px 4px;}
  .ai-title{font-size:clamp(28px,8vw,34px);letter-spacing:-.02em;}
  .ai-sub{font-size:15px;}
  .ai-flow .panel-body{padding:20px 18px 18px;}
  .ai-topo{margin-top:14px;}
  .tool-grid{grid-template-columns:minmax(0,1fr);}
  .ai-doc .ai-next{grid-template-columns:minmax(0,1fr);}
}