/* ==========================================================================
   VPNHF · 新手指引页专属样式
   只承载本页的步骤版式、平台小节与延伸阅读列表
   通用组件一律复用 base.css / components.css,此处不重复定义
   ========================================================================== */

.tut-col{
  max-width:880px;
  min-width:0;
  margin:0 auto;
}

.tut-step{
  min-width:0;
  margin:0 0 46px;
}

.tut-step:last-child{margin-bottom:0;}

.tut-step-head{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin:0 0 18px;
  padding-bottom:14px;
  border-bottom:1px dashed var(--border);
}

.tut-step-num{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  flex:none;
  border-radius:var(--radius-sm);
  background:linear-gradient(140deg, var(--accent) 0%, var(--accent-rose) 100%);
  color:var(--bg-top);
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  box-shadow:0 10px 20px -12px var(--accent-45);
}

.tut-step-head > div{min-width:0;}

.tut-step-head h2{
  margin:0;
  font-size:clamp(21px, 2.3vw, 27px);
  line-height:1.24;
}

.tut-step-meta{
  display:block;
  margin:7px 0 0;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--text-muted);
}

.tut-step .prose{max-width:72ch;}

.tut-step .table-scroll{margin:18px 0;}

.tut-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:20px 0 0;
}

.tut-plat{
  min-width:0;
  margin:20px 0 0;
  padding:18px 18px 16px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--bg-panel);
  box-shadow:var(--shadow-card);
}

.tut-plat-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 10px;
  margin:0 0 12px;
  padding-bottom:10px;
  border-bottom:1px dashed var(--border);
}

.tut-plat-head h3{
  margin:0;
  font-size:17px;
}

.tut-plat p{
  margin:0 0 .8em;
  font-size:14.5px;
  line-height:1.8;
  color:var(--text-muted);
}

.tut-plat p:last-child{margin-bottom:0;}

.tut-next{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:20px 0 0;
  padding:0;
  list-style:none;
}

.tut-next li{min-width:0;}

.tut-next a{
  display:flex;
  flex-direction:column;
  gap:5px;
  height:100%;
  padding:15px 16px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--bg-panel);
  color:var(--text);
  text-decoration:none;
  transition:border-color .16s ease, background-color .16s ease;
}

.tut-next a:hover{
  border-color:var(--accent);
  background:var(--bg-panel-2);
}

.tut-next-title{
  font-size:14px;
  font-weight:700;
  color:var(--accent-dark);
}

.tut-next-text{
  font-size:12.5px;
  line-height:1.68;
  color:var(--text-muted);
}

@media (max-width:768px){
  .tut-next{grid-template-columns:minmax(0,1fr);}
}

@media (max-width:640px){
  .tut-step{margin-bottom:34px;}
  .tut-step-head{gap:10px;}
  .tut-step-num{
    width:32px;
    height:32px;
    font-size:12px;
  }
  .tut-step-head h2{font-size:20px;}
  .tut-plat{padding:14px;}
  .tut-plat-head h3{font-size:16px;}
  .tut-plat p{font-size:14px;}
}