/* ============================================================
   Clash Verge下载 · tutorial.css
   教程页(zh-CN/start.html)专属样式
   ============================================================ */

/* ---- 页头 ---- */
.tut-head{max-width:860px}
.tut-head h1{margin:22px 0 16px}
.tut-head .lede{margin:0;max-width:660px}
.tut-head .toc{margin-top:30px}

/* ---- 正文主体 ---- */
.tut-body{padding-top:0}

.tut-prep{max-width:920px;margin-bottom:44px}
.tut-prep .callout + .tut-prep-note{margin-top:16px}
.tut-prep-note{
  font-size:14.5px;
  line-height:1.8;
  color:var(--text-muted);
}
.tut-prep-note a{color:var(--accent);font-weight:600}

/* ---- 步骤卡 ---- */
.tut-steps{display:grid;gap:28px}
.tut-step{
  scroll-margin-top:calc(var(--nav-h) + 20px);
  min-width:0;
}
.tut-step h2{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
  font-size:clamp(20px,2vw,26px);
}
.tut-step h2::before{
  content:"";
  flex:none;
  width:12px;height:12px;
  border-radius:50%;
  background:var(--accent);
}
.tut-step .prose{font-size:15.5px;line-height:1.9}
.tut-step .prose p{margin:0 0 1em}
.tut-step .prose p:last-child{margin-bottom:0}
.tut-step .prose .table-wrap{margin:1.4em 0}
.tut-step .prose pre{margin:1.2em 0}

/* ---- 结尾面板 ---- */
.tut-end{
  margin-top:48px;
  background:var(--bg-panel2);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  padding:36px 40px;
}
.tut-end > h2{font-size:clamp(19px,1.8vw,22px);margin-bottom:12px}
.tut-end > p{
  color:var(--text-muted);
  font-size:15px;
  line-height:1.85;
  max-width:780px;
}
.tut-end > p a{color:var(--accent);font-weight:600}

/* ---- 原生 details 问答 ---- */
.tut-faq{margin-top:24px;display:grid;gap:10px;max-width:780px}
.tut-faq details{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r-panel);
  padding:0 20px;
}
.tut-faq summary{
  cursor:pointer;
  list-style:none;
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  font-size:14.5px;
  font-weight:600;
  color:var(--text);
}
.tut-faq summary::-webkit-details-marker{display:none}
.tut-faq summary::after{
  content:"+";
  flex-shrink:0;
  font-size:20px;
  font-weight:400;
  color:var(--text-muted);
  line-height:1;
}
.tut-faq details[open] summary::after{content:"−"}
.tut-faq details p{
  margin:0 0 18px;
  font-size:14px;
  line-height:1.8;
  color:var(--text-muted);
}

/* ---- 响应式 ---- */
@media (max-width:640px){
  .tut-end{padding:26px 22px}
  .tut-step h2{font-size:20px}
  .tut-faq details{padding:0 16px}
}