/* ==========================================================================
   VPNAY — tutorial.css
   使用教程页（guides.html）专属样式：页头、步骤排版、平台导入块、下一步卡组。
   所有取值引用 base.css 的 :root 令牌，组件内不散落硬编码颜色。
   ========================================================================== */

/* ---------- 页头 ---------- */
.tut-head{padding-top:56px;padding-bottom:8px}
.tut-title{margin-top:16px}
.tut-lead{margin-top:16px;max-width:46em;font-size:17px;line-height:1.75;color:var(--muted)}
.tut-facts{margin-top:22px}
.tut-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* ---------- 正文列 ---------- */
.tut-article{max-width:900px}

/* ---------- 步骤 ---------- */
.tut-step{padding-top:8px;padding-bottom:8px}
.tut-step + .tut-step{
  margin-top:36px;
  padding-top:36px;
  border-top:1px dashed var(--border-strong);
}
.tut-step h2{font-size:clamp(22px,2.4vw,28px)}
.tut-step p{margin-top:14px;font-size:15.5px;line-height:1.8;color:var(--ink)}
.tut-step p.tut-muted{font-size:15px;color:var(--muted)}

/* ---------- 顺序清单 ---------- */
.tut-check{list-style:none;display:grid;gap:10px;margin-top:16px}
.tut-check li{
  position:relative;
  padding-left:24px;
  font-size:15px;
  line-height:1.75;
  color:var(--muted);
  min-width:0;
}
.tut-check li::before{
  content:'';
  position:absolute;
  left:0;
  top:8px;
  width:9px;
  height:9px;
  border-radius:2px;
  border:1.5px solid var(--accent-22);
  background:var(--accent-08);
}

/* ---------- 平台导入块 ---------- */
.tut-plat{
  margin-top:22px;
  padding:20px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-card);
  min-width:0;
}
.tut-plat h3{display:flex;align-items:center;gap:10px;font-size:17px}
.tut-plat-ico{
  flex:none;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:var(--r-sm);
  background:var(--accent-08);
  color:var(--accent);
}
.tut-plat-ico svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.tut-plat p{margin-top:12px;font-size:14.5px;line-height:1.75;color:var(--muted)}
.tut-plat-meta{
  margin-top:14px;
  padding-top:12px;
  border-top:1px dashed var(--border-strong);
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted);
}

/* ---------- 下一步卡组 ---------- */
.tut-next{
  margin-top:24px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:16px;
}
.tut-faq{margin-top:24px}

/* ---------- 窄屏 ---------- */
@media (max-width:640px){
  .tut-head{padding-top:40px}
  .tut-lead{font-size:16px}
  .tut-step + .tut-step{margin-top:28px;padding-top:28px}
  .tut-plat{padding:16px}
  .tut-step p{font-size:15px}
}