/* ============================================================
   VPNWS — tutorial.css(快速上手页专属样式)
   短版左对齐 hero / 步骤编号 / 平台小节卡 / 验证清单 / 阅读宽度
   只使用 :root 设计令牌,不新造组件
   ============================================================ */

/* ---------- 首屏:左对齐短版 hero + 左上角氛围光斑 ---------- */
.tut-hero{
  position:relative;
  overflow-x:clip;
  max-width:100%;
  padding-top:var(--sp-7);
  padding-bottom:var(--sp-5);
}
.tut-hero::before{
  content:"";position:absolute;inset:-60px 0 auto 0;height:440px;
  background:radial-gradient(ellipse 58% 62% at 24% 0%,var(--accent-glow) 0%,transparent 74%);
  pointer-events:none;z-index:0;
}
.tut-hero .wrap{position:relative;z-index:1}
.tut-hero h1{
  font-size:clamp(30px,4.2vw,50px);
  line-height:1.14;
  max-width:22em;
  margin:var(--sp-3) 0 var(--sp-4);
}
.tut-hero .lead{max-width:62ch}
.tut-hero .cta-row{
  justify-content:flex-start;
  margin:var(--sp-5) 0 var(--sp-5);
}
.tut-hero .callout{max-width:74ch}

/* ---------- 目录条:直接挂在整篇 article 上,自带版心内距 ---------- */
.tut-article .toc-tabs{
  max-width:calc(var(--maxw) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ---------- 步骤分区 ---------- */
.tut-sec{
  padding-top:var(--sp-8);
  padding-bottom:var(--sp-2);
}
.tut-sec > .wrap{max-width:calc(840px + var(--gutter) * 2)}
.tut-step-head{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-bottom:var(--sp-4);
}
.tut-step-num{
  flex-shrink:0;
  width:36px;height:36px;
  border-radius:var(--r-pill);
  display:grid;place-items:center;
  background:var(--accent-soft);
  color:var(--accent-dark);
  font-family:var(--font-mono);
  font-size:15px;font-weight:700;
  letter-spacing:-.02em;
  box-shadow:var(--hl-edge);
}
.tut-step-head h2{
  font-size:clamp(23px,2.6vw,31px);
  letter-spacing:-.02em;
  padding-top:2px;
}
.tut-sec p{margin-bottom:var(--sp-4)}
.tut-sec p:last-child{margin-bottom:0}
.tut-sec strong{color:var(--text)}

/* ---------- 平台小节卡 ---------- */
.tut-plat{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:var(--sp-5);
  box-shadow:var(--hl-edge);
  margin-bottom:var(--sp-4);
  min-width:0;
  transition:transform .16s,box-shadow .16s;
}
.tut-plat:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft)}
.tut-plat h3{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:18px;
  margin-bottom:var(--sp-3);
}
.tut-plat h3 svg{width:20px;height:20px;color:var(--text);flex-shrink:0}
.tut-plat p{font-size:15.5px;color:var(--text-muted);line-height:1.75}
.tut-plat p:last-child{margin-bottom:0}

/* ---------- 操作按钮行 / 文末链接行 ---------- */
.tut-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-4);
  margin-top:var(--sp-5);
}
.tut-links{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-4) var(--sp-5);
  margin-top:var(--sp-4);
}

/* ---------- 验证清单 ---------- */
.tut-check{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  margin:0 0 var(--sp-4);
}
.tut-check li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:16px;
  line-height:1.75;
  color:var(--text-muted);
}
.tut-check li b{color:var(--text);font-weight:600}
.tut-check .ic{
  flex-shrink:0;
  width:22px;height:22px;
  margin-top:4px;
  border-radius:50%;
  display:grid;place-items:center;
  background:var(--accent-soft);
  color:var(--accent-dark);
  font-family:var(--font-mono);
  font-size:12px;font-weight:700;
}

/* ---------- 排查表容器 ---------- */
.tut-sec .table-scroll{margin-top:var(--sp-4)}

/* ---------- 断点 ---------- */
@media (max-width:768px){
  .tut-hero{padding-top:var(--sp-6)}
  .tut-sec{padding-top:var(--sp-7)}
  .tut-step-num{width:32px;height:32px;font-size:13.5px}
  .tut-plat{padding:var(--sp-4)}
}
@media (max-width:640px){
  .tut-hero h1{font-size:30px;letter-spacing:-.02em}
  .tut-hero .cta-row{flex-direction:column;align-items:stretch}
  .tut-step-head{gap:10px}
  .tut-step-num{width:28px;height:28px;font-size:12px}
  .tut-check li{font-size:15px}
  .tut-actions{gap:var(--sp-3)}
}