/* ==========================================================================
   VPNBL · tutorial.css
   快速上手页(setup.html)专属样式:页头、步骤编号、平台小节、验证清单、
   延伸阅读卡。颜色 / 圆角 / 阴影 / 字体全部引用 base.css 的 :root 令牌,
   不新增硬编码色值,也不重复定义 components.css 里已有的组件。
   ========================================================================== */

/* ---- 页头 ---- */
.tut-hero{padding-block:46px 12px}
.tut-hero h1{margin-top:12px}
.tut-hero .lead{margin-top:14px;max-width:840px}
.tut-hero .callout{margin-top:22px;max-width:940px}
.tut-factrow{margin-top:22px}

/* ---- 正文列与基础排版 ---- */
.tut-body{max-width:980px;margin-inline:auto}
.prose h2{scroll-margin-top:calc(var(--header-h) + 76px)}
.prose h3{scroll-margin-top:calc(var(--header-h) + 76px)}
.prose p{margin-top:14px;line-height:1.78}

/* ---- 步骤块 ---- */
.tut-step{
  margin-top:38px;
  padding-top:38px;
  border-top:1px dashed var(--border);
}
.tut-step:first-of-type{margin-top:0;padding-top:26px;border-top:0}
.tut-step__head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.tut-step__num{
  flex:none;display:grid;place-items:center;
  width:42px;height:42px;
  border-radius:var(--r-card);
  background:linear-gradient(180deg,var(--accent-lift),var(--accent));
  color:var(--bg-panel);
  font-family:var(--font-mono);font-size:17px;font-weight:700;line-height:1;
  box-shadow:var(--shadow-xs),inset 0 0 0 1px var(--ring-inner);
}
.tut-step__num--soft{
  background:var(--bg-panel-2);
  color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--border);
}
.tut-step__head h2{font-size:clamp(21px,2.5vw,29px)}
.tut-step__cta{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px}

/* ---- 锚点跳转胶囊 ---- */
.prose p.tut-jump{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-top:16px;font-size:13.5px;line-height:1.5;color:var(--text-muted);
}
.tut-jump a{
  display:inline-flex;align-items:center;
  min-height:32px;padding:5px 13px;
  border-radius:var(--r-pill);
  border:1px solid var(--border);
  background:var(--bg-panel);
  font-size:13px;font-weight:600;color:var(--accent);
}
.tut-jump a:hover{border-color:var(--accent);background:var(--accent-wash)}

/* ---- 示例订阅串 ---- */
.prose p.tut-code{margin-top:14px}

/* ---- 平台小节卡 ---- */
.tut-plat{
  margin-top:18px;padding:20px 22px 22px;
  border-radius:var(--r-card);
  background:var(--bg-panel);
  border:1px solid var(--border);
  box-shadow:var(--shadow-xs);
}
.tut-plat__head{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.tut-plat__ico{width:22px;height:22px;flex:none;color:var(--accent)}
.tut-plat__head h3{font-size:17.5px}
.tut-plat p{margin-top:12px;font-size:15px;line-height:1.75;color:var(--text-muted)}

.prose p.tut-note{margin-top:16px;font-size:13.5px;line-height:1.7;color:var(--text-muted)}

/* ---- 验证清单 ---- */
.tut-check{display:grid;gap:10px;margin-top:20px}
.tut-check li{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 16px;
  border-radius:var(--r-btn);
  background:var(--bg-panel);
  border:1px solid var(--border);
  font-size:14.5px;line-height:1.6;color:var(--text);
}
.tut-check li::before{
  content:"";flex:none;
  width:6px;height:11px;margin:5px 5px 0 1px;
  border-right:2px solid var(--success);
  border-bottom:2px solid var(--success);
  transform:rotate(45deg);
}

/* ---- 延伸阅读卡 ---- */
.tut-links{
  margin-top:22px;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
}
.tut-link{
  display:flex;flex-direction:column;gap:6px;min-width:0;
  padding:18px 20px;
  border-radius:var(--r-card);
  background:var(--bg-panel);
  border:1px solid var(--border);
  box-shadow:var(--shadow-xs);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.tut-link:hover{transform:translateY(-3px);border-color:var(--accent-edge);box-shadow:var(--shadow-panel)}
.tut-link__name{font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--accent)}
.tut-link__note{font-size:13.5px;line-height:1.62;color:var(--text-muted)}

/* ---- 响应式 ---- */
@media (max-width:900px){
  .tut-step{margin-top:32px;padding-top:32px}
}
@media (max-width:640px){
  .tut-hero{padding-block:30px 8px}
  .tut-step__head{gap:11px}
  .tut-step__num{width:36px;height:36px;font-size:15px}
  .tut-plat{padding:17px 16px 19px}
  .tut-links{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .tut-link:hover{transform:none}
}