/* ==========================================================================
   VPNDU · tutorial.css(教程页专属)
   只放本页独有组件:步骤编号 / 平台导入小卡 / 示例订阅块 / 事实带 / 收尾块
   共享样式一律引用 base.css 与 components.css 的既有类,此处不重复定义
   ========================================================================== */

/* 首屏说明区收窄到与正文同宽,避免 callout 在大屏上被拉成一条长横幅 */
.tut-intro{max-width:900px}

/* 事实带:与正文同宽的浅色条,承载 counter-stats */
.tut-facts{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px 30px;
  margin-top:22px;
  padding:18px 22px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
}
.tut-facts .stat-line{gap:16px 30px}
.tut-facts .stat-line li{font-size:13.5px}

/* 步骤块:细分割线 + 等宽步骤号,标题层级不跳级 */
.tut-step{
  padding-top:32px;
  margin-top:32px;
  border-top:1px solid var(--border);
}
.tut-step:first-of-type{
  border-top:0;
  margin-top:0;
  padding-top:0;
}
.tut-num{
  margin-bottom:10px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--cyan-ink);
}
.tut-step h2{margin-top:0}
.tut-step h3{margin-top:24px;font-size:17px}

/* 平台导入小卡:桌面两列,窄屏单列堆叠 */
.tut-plat{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
  margin-top:20px;
}
.tut-plat-card{
  min-width:0;
  padding:18px 18px 20px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
}
.tut-plat-tag{
  margin-bottom:8px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--text-muted);
}
.tut-plat-card h3{margin-top:0;font-size:16px}
.tut-plat-card p{margin-top:10px;font-size:14px;line-height:1.8;color:var(--text-muted)}

/* 示例订阅块:明显假值,长串靠 pre 自身横滑,不撑破版心 */
.tut-code{
  margin-top:14px;
  padding:12px 14px;
  background:var(--bg-panel2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  font-size:13px;
  color:var(--text);
}
.tut-code code{font-size:13px;color:var(--text)}

/* 步骤内的按钮行 */
.tut-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:22px;
}

/* 收尾块:主线走完后的去向,不做成整页大 CTA 带 */
.tut-next{
  margin-top:34px;
  padding:22px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
}
.tut-next h2{margin-top:0;font-size:20px}
.tut-next p{margin-top:10px;color:var(--text-muted);font-size:14.5px;line-height:1.8}
.tut-next .tut-actions{margin-top:18px}

@media (max-width:640px){
  .tut-plat{grid-template-columns:1fr}
  .tut-facts{padding:16px}
  .tut-next{padding:18px}
}