/* =========================================================
   Clash指南 · tutorial.css
   教程页(setup.html)专属:页头、路线条、跳转导航间距、结尾面板
   所有颜色引用 base.css 的 :root 令牌。
   ========================================================= */

/* ---------- 页头 ---------- */
.tut-head{
  position:relative;z-index:1;
  padding-top:56px;
  padding-bottom:8px;
}
.tut-kicker{
  display:inline-block;
  font-family:var(--font-mono);font-size:12px;font-weight:700;
  letter-spacing:.14em;line-height:1;
  color:var(--accent-dark);
  border:var(--bd) solid var(--border);
  padding:6px 10px;
  max-width:100%;overflow:hidden;white-space:nowrap;
}
.tut-title{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(27px,5.2vw,44px);line-height:1.35;
  letter-spacing:.03em;
  margin-top:18px;margin-bottom:14px;
}
.tut-title em{font-style:normal;color:var(--accent)}
.tut-lede{
  color:var(--text-muted);
  font-size:15.5px;line-height:1.9;
  max-width:780px;
}

/* ---------- 四步路线条(装饰) ---------- */
.route{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  margin-top:24px;
}
.route-step{
  font-family:var(--font-mono);font-size:12.5px;font-weight:700;line-height:1;
  color:var(--text-muted);
  background:var(--bg-panel);
  border:var(--bd) solid var(--border);
  padding:9px 13px;
  max-width:100%;overflow:hidden;white-space:nowrap;
}
.route-step b{color:var(--accent);font-weight:700;margin-right:6px}
.route-sep{color:var(--error);font-size:11px;flex-shrink:0}

/* ---------- 跳转导航与提示间距 ---------- */
.tut-toc{margin-top:24px}
.tut-callout{margin-top:20px}

/* ---------- 结尾去向面板 ---------- */
.next-panel{
  position:relative;
  background:var(--bg-panel);
  border:var(--bd) solid var(--accent);
  padding:34px 26px 28px;
  text-align:center;
}
.next-panel .panel-tag{left:50%;transform:translateX(-50%)}
.next-title{
  font-size:22px;font-weight:900;letter-spacing:.05em;
  margin-bottom:12px;
}
.next-sub{
  color:var(--text-muted);font-size:14.5px;line-height:1.9;
  max-width:680px;margin-inline:auto;margin-bottom:22px;
}
.next-sub a{
  color:var(--accent);
  border-bottom:2px solid var(--accent-dark);
}
.next-sub a:hover{background:var(--accent);color:var(--bg)}

/* ---------- 响应式 ---------- */
@media (max-width:640px){
  .tut-head{padding-top:40px}
  .tut-lede{font-size:14.5px}
  .route{gap:8px}
  .route-step{padding:8px 10px;font-size:12px}
  .next-panel{padding:30px 18px 24px}
}