/* ============================================================
   Clash开源网 · tutorial.css
   教程页专属:页头 / 步骤正文排版 / 步骤间衔接行 / 延伸阅读卡
   只做本页补充,不重复 base.css / components.css 已有组件
   ============================================================ */

/* ---------- 页头 ---------- */
.tut-hero{
  padding-bottom:20px;
}
.tut-path{
  font-size:13px;
  color:var(--ok);
  margin-bottom:14px;
}
.tut-title{
  font-size:clamp(28px,4vw,44px);
  line-height:1.18;
  max-width:900px;
}
.tut-lede{
  margin-top:16px;
  max-width:860px;
  font-size:15px;
  line-height:1.9;
  color:var(--muted);
}
.tut-a{
  color:var(--ok);
  border-bottom:1px solid var(--accent-dark);
}
.tut-a:hover{color:var(--accent)}
.tut-hero .toc-tabs{margin-top:24px}
.tut-hero .callout{margin-top:18px;max-width:860px}
.tut-hero .callout a{
  color:var(--ok);
  border-bottom:1px solid var(--accent-dark);
}
.tut-hero .callout a:hover{color:var(--accent)}

/* ---------- 步骤正文 ---------- */
.tut-body{padding-top:20px}
.tut-steps{max-width:880px}
.tut-steps>li+li{margin-top:52px}

.step-h{
  font-size:21px;
  font-weight:700;
  color:var(--text);
  padding-bottom:10px;
  border-bottom:1px solid var(--border);
}
.tut-steps p{
  margin-top:14px;
  font-size:14.5px;
  line-height:1.9;
  color:var(--text);
}
.tut-steps p strong{color:var(--ok);font-weight:600}
.tut-steps p a,
.tut-steps ul a{
  color:var(--ok);
  border-bottom:1px solid var(--accent-dark);
}
.tut-steps p a:hover,
.tut-steps ul a:hover{color:var(--accent)}
.tut-steps ul{margin-top:12px}
.tut-steps ul>li{
  position:relative;
  margin-top:10px;
  padding-left:20px;
  font-size:14.5px;
  line-height:1.85;
  color:var(--text);
  min-width:0;
}
.tut-steps ul>li::before{
  content:"";
  position:absolute;left:5px;top:.74em;
  width:5px;height:5px;border-radius:50%;
  background:var(--accent);
}
.tut-steps ul>li strong{color:var(--text);font-weight:600}
.tut-steps pre{margin-top:14px}
.tut-steps .callout{margin-top:16px}

/* 步骤末尾的衔接行:等宽小字 + 左侧提交绿短杠 */
.step-next{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:18px;
  font-size:12.5px;
  color:var(--muted);
}
.step-next::before{
  content:"";
  width:18px;height:2px;
  background:var(--accent);
  flex-shrink:0;
}

/* ---------- 延伸阅读 ---------- */
.tut-more .peek{margin-top:0}
.tut-more-grid{margin-top:22px}
.more-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  transition:border-color .15s;
}
.more-card:hover{border-color:var(--accent)}
.more-path{
  font-size:12px;
  color:var(--ok);
}
.more-card h3{
  font-size:16px;
  color:var(--text);
}
.more-card:hover h3{color:var(--ok)}
.more-card p{
  font-size:13.5px;
  line-height:1.75;
  color:var(--muted);
}

/* ---------- 窄屏 ---------- */
@media (max-width:640px){
  .tut-steps>li+li{margin-top:40px}
  .tut-steps>li{padding-left:48px}
}