/* ==========================================================================
   VPNPX . tutorial.css  (快速上手页专属样式)
   只做本页新增结构:页面导语 / 步骤卡 / 平台卡 / 收尾链接块
   ========================================================================== */

/* ------------------------------------------------------------- 页面导语 */
.tut-hero{
  position:relative;
  overflow-x:clip;
  max-width:100%;
  padding-top:48px;
  padding-bottom:6px;
}
.tut-title{
  margin:0 0 16px;
  max-width:22ch;
  font-size:clamp(32px,4.2vw,54px);
  line-height:1.1;
}
.tut-lede{
  margin:0 0 24px;
  max-width:64ch;
  font-size:16.5px;
  line-height:1.8;
  color:var(--text-muted);
}
.tut-facts{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}
.tut-facts li{margin:0;max-width:100%;}

.tut-note{margin-top:24px;}

/* --------------------------------------------------------------- 正文容器 */
.tut-body{
  padding-top:28px;
  padding-bottom:24px;
  min-width:0;
}
.tut-body .toc-tabs{margin-bottom:6px;}

/* --------------------------------------------------------------- 步骤卡 */
.tut-step{
  padding-top:36px;
  padding-bottom:36px;
  min-width:0;
}
.tut-step + .tut-step{border-top:1px dashed var(--border);}

.step-head{
  display:flex;
  align-items:flex-start;
  gap:16px;
  margin-bottom:18px;
}
.step-num{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:var(--radius-md);
  border:1px solid var(--violet-a28);
  background:linear-gradient(140deg, var(--accent-a12) 0%, var(--violet-a18) 100%);
  box-shadow:inset 0 1px 0 var(--white-a90);
  font-family:var(--font-mono);
  font-size:15px;
  font-weight:700;
  line-height:1;
  color:var(--accent-dark);
}
.step-head-text{min-width:0;}
.step-head-text h2{
  margin:0 0 6px;
  font-size:clamp(22px,2.5vw,30px);
}
.step-kicker{
  margin:0;
  font-size:13.5px;
  line-height:1.6;
  color:var(--text-muted);
}

.step-body{min-width:0;}
.step-body > p{
  max-width:74ch;
  margin:0 0 14px;
  font-size:15.5px;
  line-height:1.85;
  color:var(--text);
}
.step-body > p:last-child{margin-bottom:0;}
.step-body > p strong{color:var(--accent-dark);}
.step-body pre{
  margin:14px 0;
  max-width:100%;
}
.step-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

/* --------------------------------------------------------------- 平台卡 */
.plat-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:22px;
}
.plat-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
  padding:22px;
  border-radius:var(--radius-lg);
  border:1px solid var(--border-soft);
  background:var(--surface);
  box-shadow:0 20px 44px -38px var(--accent-a35);
}
.plat-head{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.plat-icon-wrap{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid var(--violet-a18);
  background:var(--accent-a10);
  color:var(--accent);
}
.plat-icon-wrap .pi{
  width:19px;
  height:19px;
  color:currentColor;
}
.plat-head h3{
  margin:0;
  font-size:17px;
  letter-spacing:-.01em;
  min-width:0;
}
.plat-card p{
  margin:0;
  font-size:14px;
  line-height:1.8;
  color:var(--text-muted);
}
.plat-card p strong{color:var(--text);}

/* ------------------------------------------------------------- 收尾链接块 */
.tut-next{
  margin-top:34px;
  padding:26px;
  border-radius:var(--radius-lg);
  border:1px solid var(--violet-a28);
  background:linear-gradient(132deg, var(--accent-a10) 0%, var(--violet-a14) 100%);
  min-width:0;
}
.tut-next h2{
  margin:0 0 10px;
  font-size:clamp(20px,2.2vw,26px);
}
.tut-next > p{
  margin:0;
  max-width:70ch;
  font-size:14.5px;
  line-height:1.8;
  color:var(--text-muted);
}
.tut-links{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:18px 0 0;
  padding:0;
  list-style:none;
}
.tut-links li{margin:0;min-width:0;}
.tut-links a{
  display:flex;
  flex-direction:column;
  gap:5px;
  height:100%;
  padding:15px 16px;
  border-radius:var(--radius-md);
  border:1px solid var(--border-soft);
  background:var(--surface);
  color:var(--text);
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease;
}
.tut-links a:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 34px -26px var(--accent-a35);
}
.tut-link-title{
  font-family:var(--font-display);
  font-size:14.5px;
  font-weight:700;
  letter-spacing:-.01em;
}
.tut-link-desc{
  font-size:12.5px;
  line-height:1.65;
  color:var(--text-muted);
}

/* --------------------------------------------------------------- 响应式 */
@media (max-width:900px){
  .plat-grid{grid-template-columns:minmax(0,1fr);}
  .tut-links{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:768px){
  .tut-hero{padding-top:32px;}
  .tut-title{max-width:none;}
  .tut-lede{font-size:15.5px;}
  .step-head{gap:12px;}
  .step-num{
    width:40px;
    height:40px;
    font-size:13.5px;
    border-radius:var(--radius-sm);
  }
  .plat-card{padding:18px;}
  .tut-next{padding:20px;margin-top:26px;}
}
@media (max-width:640px){
  .tut-step{padding-top:28px;padding-bottom:28px;}
  .step-body > p{font-size:15px;}
  .tut-body .toc-tabs{margin-bottom:2px;}
  .step-actions .btn{flex:1 1 160px;}
}