/* ============================================================
   VPNBN · tutorial.css
   新手指引页专属样式:页头节奏、步骤卡、编号章、速查卡,
   以及 prose 阅读列内的按钮 / 文字链修正。
   ============================================================ */

/* ------------------------------------------------------------
   页头
   ------------------------------------------------------------ */
.tut-head{padding-top:56px;padding-bottom:44px}
.tut-head h1{margin:0 0 16px;max-width:20em}
.tut-lead{margin:0;max-width:760px;font-size:18px;line-height:1.7;color:var(--text-muted)}
.tut-cta{margin-top:26px}
.tut-facts{margin-top:28px;justify-content:flex-start}
.tut-callout{margin-top:30px;max-width:820px}

/* ------------------------------------------------------------
   阅读列
   ------------------------------------------------------------ */
.tut-body{padding-bottom:var(--sec-y)}
.tut-body .toc-tabs{margin-bottom:30px}

/* ------------------------------------------------------------
   步骤卡
   ------------------------------------------------------------ */
.tut-step{
  margin:0 0 26px;
  padding:28px 30px 30px;
  border-radius:var(--r-card-lg);
  background:var(--bg-panel);
  border:1px solid var(--border);
  box-shadow:0 24px 48px -34px var(--sh-accent-14),inset 0 1px 0 var(--text-invert);
}
.tut-step-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:18px}
.tut-step-num{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:var(--r-node);
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-dark) 100%);
  color:var(--text-invert);
  font-family:var(--font-mono);
  font-size:15px;
  font-weight:700;
  letter-spacing:.02em;
  box-shadow:0 12px 24px -14px var(--sh-accent-28),inset 0 1px 0 var(--hl-soft);
}
.tut-step-title{min-width:0}
.tut-step h2{margin:0;font-size:clamp(22px,2.4vw,28px);letter-spacing:-.02em}
.tut-step-sub{margin:6px 0 0;font-family:var(--font-mono);font-size:12.5px;line-height:1.5;color:var(--text-muted)}
.tut-step-body > p:first-child{margin-top:0}
.tut-step-body pre{margin:16px 0;background:var(--bg);border-color:var(--border-soft)}
.tut-step-body .btn-row{margin-top:20px}
.tut-actions{margin-top:20px}

/* ------------------------------------------------------------
   卡点速查
   ------------------------------------------------------------ */
.tut-quick{margin:4px 0 0}
.tut-quick .card{display:flex;flex-direction:column;gap:8px}
.tut-quick .card h3{margin-top:0}
.tut-quick .card p{margin:0}
.tut-quick .card .textlink{margin-top:auto;padding-top:6px}
.tut-more{margin-top:22px;font-size:15px;color:var(--text-muted)}

/* ------------------------------------------------------------
   prose 内的按钮与文字链修正
   (prose 默认给所有 a 加下划线与强调色,按钮需要保持自身外观)
   ------------------------------------------------------------ */
.tut-body a.btn,
.tut-body a.btn:hover{text-decoration:none}
.tut-body a.btn-main{color:var(--text-invert)}
.tut-body a.btn-ghost{color:var(--accent-dark)}
.tut-body a.textlink{text-decoration:none}
.tut-body a.textlink:hover{text-decoration:underline;text-underline-offset:3px}

/* ------------------------------------------------------------
   窄屏
   ------------------------------------------------------------ */
@media (max-width:1024px){
  .tut-head{padding-top:44px;padding-bottom:36px}
}
@media (max-width:768px){
  .tut-head{padding-top:36px;padding-bottom:30px}
  .tut-lead{font-size:16.5px}
  .tut-step{padding:22px 20px 24px;border-radius:var(--r-card)}
  .tut-step-head{gap:12px;margin-bottom:14px}
  .tut-step-num{width:42px;height:42px;font-size:14px}
  .tut-step h2{font-size:clamp(20px,5vw,24px)}
}
@media (prefers-reduced-motion:reduce){
  .tut-step{transition:none}
}