/* ==========================================================================
   VPNGive — 新手指引页专属样式(zh-CN/tutorial.html)
   只补充步骤轨道、客户端小节与延伸阅读网格;颜色/圆角/阴影全部走令牌。
   ========================================================================== */

/* ---------------------------------------------------------------- hero --- */
.tut-hero{position:relative;overflow-x:clip;padding-top:54px;padding-bottom:6px}
.tut-hero h1{margin-top:16px;max-width:16em}
.tut-lede{margin-top:16px;max-width:700px;font-size:15.5px;line-height:1.8;color:var(--muted)}
.tut-lede strong{color:var(--ink);font-weight:700}
.tut-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.tut-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}

/* ---------------------------------------------------------------- body --- */
.tut-body{padding-top:30px;padding-bottom:10px}
.tut-step{padding-top:34px;padding-bottom:34px;border-bottom:1px solid var(--border);min-width:0}
.tut-step:first-of-type{padding-top:26px}
.tut-step:last-of-type{border-bottom:0;padding-bottom:12px}
.step-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.step-no{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:34px;height:34px;border-radius:var(--r-sm);
  background:var(--ink);color:var(--on-dark);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;
  box-shadow:var(--shadow-dark);
}
.step-head h2{min-width:0}
.tut-step .prose{max-width:760px}
.step-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.platform-row{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 6px}

/* ------------------------------------------------------ client blocks --- */
.client-block{padding-top:20px;margin-top:20px;border-top:1px dashed var(--border);min-width:0}
.client-block h3{margin-top:0}
.entry-line{
  display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.03em;color:var(--muted);
}
.entry-line b{color:var(--ink);font-weight:600}

/* --------------------------------------------------------- next cards --- */
.next-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
.next-card{
  display:flex;flex-direction:column;gap:6px;min-width:0;
  padding:16px 17px;border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--panel);box-shadow:var(--inset-light);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.next-card:hover{transform:translateY(-2px);border-color:var(--accent-line);box-shadow:var(--shadow-float)}
.next-k{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;color:var(--muted)}
.next-t{font-size:14.5px;font-weight:700;letter-spacing:-.01em;line-height:1.4;color:var(--ink)}
.next-d{font-size:13px;line-height:1.7;color:var(--muted)}

/* ---------------------------------------------------------- responsive --- */
@media (max-width:760px){
  .tut-hero{padding-top:36px}
  .tut-step{padding-top:26px;padding-bottom:26px}
  .next-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .step-no{width:30px;height:30px;font-size:11px}
  .next-card{transform:none!important}
}