/* ============================================================
   VPNHP · AI 工具加速专题页专属样式
   ============================================================ */

/* ---- 页首 ---- */
.ai-hero{
  position:relative;overflow:hidden;overflow-x:clip;
  padding-top:64px;padding-bottom:44px;
}
.ai-hero::before{
  content:"";position:absolute;right:-200px;top:-240px;
  width:680px;height:680px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(242,176,74,.34) 0%,rgba(238,140,55,.16) 48%,rgba(232,106,40,0) 72%);
  filter:blur(26px);
}
.ai-hero .container{position:relative}
.ai-lead{display:flex;flex-direction:column;align-items:flex-start;gap:20px;max-width:800px}
.ai-lead h1{font-size:56px}
.ai-lead .hero-desc{max-width:40em}
.ai-facts{margin-top:4px;padding-top:20px;border-top:1px dashed var(--border);width:100%}

/* ---- 缓滚带纵向节奏 ---- */
.ai-ticker{padding-top:6px;padding-bottom:30px}

/* ---- 章节头 ---- */
.sec-head{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:30px;max-width:800px}
.sec-head h2{margin-top:2px}
.sec-head .sec-lead{font-size:15.5px;color:var(--text-muted);line-height:1.75}

/* ---- 三个差异 / 网页与API:纵排档案条 ---- */
.diff-list{display:flex;flex-direction:column}
.diff-item{
  display:grid;grid-template-columns:56px minmax(0,1fr);gap:18px;
  padding-top:22px;padding-bottom:22px;
}
.diff-item + .diff-item{border-top:1px dashed var(--border)}
.diff-idx{
  font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--accent-dark);
  width:40px;height:40px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--accent-line);background:var(--accent-soft);
}
.diff-body{min-width:0;display:flex;flex-direction:column;gap:8px}
.diff-body h3{font-size:18px}
.diff-body p{font-size:14.5px;color:var(--text-muted);line-height:1.8}

/* ---- 工具档案行 ---- */
.tool-list{display:flex;flex-direction:column;gap:14px}
.tool-row{
  display:grid;grid-template-columns:200px minmax(0,1fr);gap:22px;
  background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-m);
  padding:22px 26px;box-shadow:var(--shadow-card);min-width:0;
}
.tool-side{display:flex;flex-direction:column;align-items:flex-start;gap:9px;min-width:0}
.tool-side .t-name{font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:-.01em}
.tool-side .t-tags{display:flex;flex-wrap:wrap;gap:5px}
.tool-main{min-width:0;display:flex;flex-direction:column;gap:10px}
.tool-main h3{font-size:16px}
.tool-main p{font-size:14px;color:var(--text-muted);line-height:1.78}

/* ---- 开发者配置块 ---- */
.dev-block{margin-bottom:28px}
.dev-block h3{font-size:17px;margin-bottom:8px}
.dev-block p{font-size:14.5px;color:var(--text-muted);line-height:1.78;margin-bottom:10px;max-width:46em}

/* ---- 选线建议 ---- */
.advice-list{display:flex;flex-direction:column;gap:14px;margin-bottom:26px}
.advice-item{
  background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-m);
  padding:18px 22px;box-shadow:var(--shadow-card);
  display:flex;flex-direction:column;gap:6px;min-width:0;
}
.advice-item strong{font-size:15px}
.advice-item p{font-size:14px;color:var(--text-muted);line-height:1.75}
.advice-links{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.advice-links a{
  display:inline-flex;align-items:center;min-height:42px;padding:10px 22px;
  border-radius:10px;border:1.5px solid var(--border);background:var(--bg-panel);
  font-size:14.5px;font-weight:600;
  transition:border-color .15s ease,color .15s ease;
}
.advice-links a:hover{border-color:var(--accent);color:var(--accent-dark)}

/* ---- 响应式 ---- */
@media (max-width:960px){
  .ai-lead h1{font-size:46px}
}
@media (max-width:860px){
  .tool-row{grid-template-columns:1fr;gap:12px}
}
@media (max-width:640px){
  .ai-hero{padding-top:44px;padding-bottom:32px}
  .ai-lead h1{font-size:34px}
  .diff-item{grid-template-columns:1fr;gap:10px}
  .diff-idx{width:34px;height:34px;font-size:12px}
  .tool-row{padding:18px}
  .advice-item{padding:16px 18px}
  .advice-links a{flex:1 1 auto;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .ai-hero::before{filter:none}
}