/* ============================================================
   VPNTea · AI 工具专题
   请求链路、工具对照、开发环境与故障判断
   ============================================================ */

.ai-hero{
  position:relative;
  overflow-x:clip;
  border-bottom:1px solid var(--border);
  background:
    linear-gradient(90deg,var(--bg) 0%,var(--bg) 58%,var(--bg-panel) 58%,var(--bg-panel) 100%);
}
.ai-hero-grid{
  min-height:680px;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr);
  align-items:center;
  gap:clamp(38px,6vw,86px);
  padding-top:clamp(64px,8vw,104px);
  padding-bottom:clamp(64px,8vw,104px);
}
.ai-hero-grid>*{min-width:0}
.ai-hero-copy .hero-eyebrow{margin-bottom:22px}
.ai-hero-copy h1{
  max-width:700px;
  font-size:clamp(52px,5vw,68px);
  line-height:1.1;
  letter-spacing:-.018em;
}
.ai-hero-copy h1 em{font-style:normal;color:var(--accent)}
.ai-lead{
  max-width:690px;
  margin-top:22px;
  color:var(--muted);
  font-size:17px;
  line-height:1.85;
}
.ai-lead strong{color:var(--ink)}
.ai-facts{
  max-width:700px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--border);
  border-left:1px solid var(--border);
}
.ai-facts li{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:14px 16px;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:var(--bg);
}
.ai-facts span{
  color:var(--accent-dark);
  font-size:10.5px;
  letter-spacing:.12em;
}
.ai-facts b{
  font-size:13.5px;
  overflow-wrap:anywhere;
}

.ai-route-board{
  position:relative;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:calc(var(--r) + 4px);
  padding:28px;
}
.ai-route-board::before{
  content:"";
  position:absolute;
  inset:12px;
  border:1px dashed var(--border);
  border-radius:var(--r);
  pointer-events:none;
}
.ai-board-top,
.ai-route-flow,
.ai-signal-list{
  position:relative;
  z-index:1;
}
.ai-board-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-bottom:20px;
  border-bottom:1px solid var(--border);
}
.ai-board-top>.mono{
  color:var(--muted);
  font-size:11px;
  letter-spacing:.14em;
}
.ai-route-flow{
  display:grid;
  gap:0;
  padding-top:30px;
  padding-bottom:30px;
}
.ai-route-node{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}
.ai-route-node>div{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.ai-route-node b{font-size:14.5px}
.ai-route-node div span{
  color:var(--muted);
  font-size:12.5px;
}
.ai-node-icon{
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  color:var(--ink);
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r);
}
.ai-route-node.is-accent .ai-node-icon{
  color:var(--accent-dark);
  border-color:var(--accent);
  background:var(--bg-panel-2);
}
.ai-route-line{
  display:block;
  width:1px;
  height:34px;
  margin-left:24px;
  background:var(--accent);
}
.ai-signal-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--border);
  border-left:1px solid var(--border);
}
.ai-signal-list div{
  min-width:0;
  padding:13px 14px;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.ai-signal-list dt{
  font-family:var(--font-mono);
  color:var(--accent-dark);
  font-size:10.5px;
  letter-spacing:.12em;
}
.ai-signal-list dd{
  margin-top:4px;
  color:var(--muted);
  font-size:12.5px;
}

.ai-tool-table{
  width:100%;
  min-width:920px;
  font-size:14px;
}
.ai-tool-table caption{
  padding:15px 18px;
  text-align:left;
  background:var(--bg-panel);
  border-bottom:1px solid var(--border);
  font-weight:700;
}
.ai-tool-table th{
  padding:12px 18px;
  text-align:left;
  background:var(--bg-panel);
  border-bottom:1px solid var(--border);
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.08em;
  white-space:nowrap;
}
.ai-tool-table td{
  padding:14px 18px;
  border-bottom:1px solid var(--border);
  vertical-align:top;
  color:var(--muted);
  line-height:1.7;
}
.ai-tool-table tr:last-child td{border-bottom:0}
.ai-tool-table tbody tr:hover{background:var(--bg-panel)}
.ai-tool-table .ai-tool-name{
  color:var(--ink);
  font-family:var(--font-mono);
  font-weight:700;
  white-space:nowrap;
}

.ai-guidance{
  border-top:1px solid var(--border);
}
.ai-guidance-block{
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  gap:30px;
  padding-top:30px;
  padding-bottom:30px;
  border-bottom:1px solid var(--border);
}
.ai-guidance-block>*{min-width:0}
.ai-guidance-mark{
  align-self:start;
  color:var(--accent-dark);
  font-size:11px;
  letter-spacing:.12em;
  border:1px solid var(--accent);
  border-radius:var(--r-s);
  padding:7px 10px;
  text-align:center;
}
.ai-guidance-block h3{margin-bottom:10px}
.ai-guidance-block p{
  color:var(--muted);
  font-size:14.5px;
  line-height:1.9;
}

.ai-compare{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border:1px solid var(--border);
  border-radius:calc(var(--r) + 2px);
  overflow:hidden;
}
.ai-compare>article{
  min-width:0;
  padding:30px;
  background:var(--bg);
}
.ai-compare>article+article{border-left:1px solid var(--border)}
.ai-compare-head{
  display:flex;
  align-items:baseline;
  gap:14px;
  padding-bottom:16px;
  margin-bottom:18px;
  border-bottom:1px solid var(--border);
}
.ai-compare-head span{
  color:var(--accent-dark);
  font-size:11px;
  letter-spacing:.12em;
}
.ai-compare>article>p{
  color:var(--muted);
  font-size:14.5px;
  line-height:1.9;
}

.ai-dev-list{
  display:grid;
  border-top:1px solid var(--border);
}
.ai-dev-row{
  display:grid;
  grid-template-columns:90px minmax(0,1fr);
  gap:26px;
  padding-top:28px;
  padding-bottom:28px;
  border-bottom:1px solid var(--border);
}
.ai-dev-row>*{min-width:0}
.ai-dev-tag{
  align-self:start;
  color:var(--accent-dark);
  font-size:12px;
  letter-spacing:.12em;
  padding-top:3px;
}
.ai-dev-row h3{margin-bottom:9px}
.ai-dev-row p{
  color:var(--muted);
  font-size:14.5px;
  line-height:1.9;
}

.ai-failure-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--border);
  border-left:1px solid var(--border);
}
.ai-failure{
  min-width:0;
  padding:26px;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:var(--bg);
}
.ai-failure-title{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:14px;
}
.ai-failure-title .srv-dot{
  width:8px;
  height:8px;
  margin-top:6px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--accent);
}
.ai-failure-title h3{font-size:17px}
.ai-failure p{
  color:var(--muted);
  font-size:14px;
  line-height:1.85;
}
.ai-failure p+p{margin-top:9px}
.ai-failure p b{color:var(--ink)}

.ai-step-list{max-width:800px}
.ai-next-links{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:46px;
}
.ai-next-links a{
  position:relative;
  min-width:0;
  display:grid;
  gap:6px;
  padding:24px 54px 24px 22px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:calc(var(--r) + 2px);
  transition:border-color .15s;
}
.ai-next-links a:hover{border-color:var(--accent)}
.ai-next-links a>span{
  color:var(--accent-dark);
  font-size:10.5px;
  letter-spacing:.12em;
}
.ai-next-links a>strong{font-size:17px}
.ai-next-links a>p{
  color:var(--muted);
  font-size:13.5px;
  line-height:1.7;
}
.ai-next-links a>svg{
  position:absolute;
  right:22px;
  top:50%;
  transform:translateY(-50%);
  color:var(--accent-dark);
}

@media (max-width:1100px){
  .ai-hero{
    background:var(--bg);
  }
  .ai-hero-grid{
    grid-template-columns:1fr;
    min-height:0;
  }
  .ai-route-board{
    max-width:720px;
    width:100%;
    background:var(--bg-panel);
  }
}

@media (max-width:768px){
  .ai-hero-grid{
    padding-top:48px;
    padding-bottom:56px;
  }
  .ai-hero-copy h1{
    font-size:clamp(32px,9vw,40px);
    line-height:1.12;
  }
  .ai-lead{font-size:15.5px}
  .ai-route-board{padding:22px}
  .ai-guidance-block{
    grid-template-columns:1fr;
    gap:14px;
  }
  .ai-guidance-mark{
    justify-self:start;
  }
  .ai-compare{
    grid-template-columns:1fr;
  }
  .ai-compare>article+article{
    border-left:0;
    border-top:1px solid var(--border);
  }
  .ai-failure-grid{
    grid-template-columns:1fr;
  }
  .ai-next-links{
    grid-template-columns:1fr;
  }
}

@media (max-width:560px){
  .ai-facts{
    grid-template-columns:1fr;
  }
  .ai-board-top{
    align-items:flex-start;
    flex-direction:column;
  }
  .ai-signal-list{
    grid-template-columns:1fr;
  }
  .ai-dev-row{
    grid-template-columns:1fr;
    gap:10px;
  }
  .ai-compare>article{
    padding:22px 18px;
  }
  .ai-failure{
    padding:22px 18px;
  }
}