/* =============================================================================
   VPNZM · ai.css
   AI 工具专题页专属样式:首屏折线示意、工具卡片、宽表换行、编号清单与
   开发者代码块的节奏。颜色、字体、圆角一律取自 base.css 的设计令牌。
   ========================================================================== */

/* ---------------------------------------------------------------- hero --- */
.hero.ai-hero{padding-bottom:var(--sec-y)}
.ai-hero .hero-copy{max-width:960px}
.ai-hero .lede{max-width:60ch;margin-inline:auto}

.ai-trace{
  position:relative;z-index:2;
  max-width:900px;
  max-width:900px;
  margin:28px auto 0;
  color:var(--accent-line);
}
.ai-trace svg{width:100%;height:auto;display:block}

/* --------------------------------------------------- section rhythm ------ */
main > .sec + .sec{padding-top:0}

/* --------------------------------------------------------------- cards --- */
.ai-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
}
.ai-card{display:flex;flex-direction:column;gap:8px;min-width:0}
.ai-card-no{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
  color:var(--accent);
}
.ai-card h3{font-size:17px}
.ai-card p{font-size:13.5px;line-height:1.8;color:var(--text-muted)}

/* -------------------------------------------------------------- tables --- */
.ai-table .data-table{min-width:700px}
.ai-table .data-table th{white-space:nowrap}
.ai-table .data-table td{
  white-space:normal;
  line-height:1.65;
  word-break:keep-all;
  min-width:110px;
}

/* ---------------------------------------------------------------- text --- */
.ai-prose{max-width:76ch;font-size:14.5px;line-height:1.85;color:var(--text-muted)}
.ai-prose + .ai-prose{margin-top:12px}
.ai-prose b,.ai-prose strong{color:var(--text)}
.ai-note{
  margin-top:14px;max-width:70ch;
  font-family:var(--font-mono);font-size:11.5px;line-height:1.7;
  color:var(--text-muted);
}
.ai-note a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.ai-note a:hover{color:var(--accent-dark)}

/* ------------------------------------------------------ numbered list ---- */
.ai-ol{display:grid;gap:16px;max-width:78ch;counter-reset:ai-step}
.ai-ol > li{
  position:relative;padding-left:44px;
  font-size:14px;line-height:1.8;color:var(--text-muted);
}
.ai-ol > li::before{
  counter-increment:ai-step;
  content:counter(ai-step,decimal-leading-zero);
  position:absolute;left:0;top:0;
  width:30px;height:30px;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--accent-ghost);
  border:1px solid var(--accent-line);
  color:var(--accent);
  font-family:var(--font-mono);font-size:10.5px;font-weight:700;
}
.ai-ol b{color:var(--text)}

/* ----------------------------------------------------------- tab panels -- */
.ai-panel{display:grid;gap:10px}
.ai-panel h3{font-size:16.5px}
.ai-panel p{font-size:13.5px;line-height:1.8;color:var(--text-muted);max-width:74ch}
.ai-bullets{
  display:grid;gap:8px;max-width:74ch;
  font-size:13.5px;line-height:1.75;color:var(--text-muted);
}
.ai-bullets li{display:flex;gap:9px;align-items:flex-start}
.ai-bullets li::before{
  content:"";flex:none;margin-top:8px;
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);opacity:.55;
}

/* ----------------------------------------------------------------- dev --- */
.ai-dev{display:grid;gap:22px;max-width:900px}
.ai-dev-item h3{font-size:16px;margin-bottom:6px}
.ai-dev-item p{font-size:13.5px;line-height:1.8;color:var(--text-muted);max-width:74ch}
.ai-dev-item p + p{margin-top:10px}
.ai-dev-item p a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.ai-dev-item pre{margin-top:12px}

/* -------------------------------------------------------------- spacing -- */
.ai-block{margin-top:26px}
.ai-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}

@media (max-width:640px){
  .ai-hero .lede{max-width:100%}
  .ai-trace{margin-top:20px}
  .ai-ol > li{padding-left:38px}
  .ai-ol > li::before{width:26px;height:26px;font-size:9.5px}
  .ai-dev-item pre{font-size:11.5px}
}