/* ============================================================
   VPN-LG · tutorial.css
   快速上手页(setup.html)专属排版:页头氛围、步骤骨架、
   平台面板与延伸入口。颜色/圆角/阴影一律引用 base.css 令牌。
   ============================================================ */

/* ---- 页头氛围 ---- */
.tut-head{position:relative}
.tut-halo{
  position:absolute;left:0;right:0;top:-40px;height:300px;
  max-width:100%;overflow:clip;
  pointer-events:none;z-index:-1;
}
.tut-orb{
  position:absolute;left:50%;top:-120px;
  width:460px;height:460px;margin-left:-230px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,var(--accent-10) 0%,var(--accent-06) 42%,transparent 72%);
}
.tut-head .sec-head h1{margin-top:14px}
.tut-head .lede{margin-top:14px}
.tut-head .no-break .hl{height:11px;bottom:-7px}
.tut-callout{max-width:780px;margin:26px auto 0;text-align:left}
.tut-callout p{font-size:13.5px;line-height:1.75;color:var(--text-muted)}

/* ---- 步骤骨架 ---- */
.tut-step{min-width:0}
.tut-step + .tut-step{margin-top:48px;padding-top:48px;border-top:1px solid var(--border)}
.step-no{
  display:inline-flex;align-items:center;
  min-height:24px;padding:0 12px;border-radius:var(--r-pill);
  background:var(--accent-12);color:var(--accent-dark);
  font-family:var(--font-mono);font-size:11.5px;font-weight:700;letter-spacing:.08em;
}
.tut-step h2{margin-top:12px}
.tut-step > .prose{margin-top:16px}
.tut-step .tabs{margin-top:22px}

/* ---- 验收清单 ---- */
.tut-checks{display:flex;flex-direction:column;gap:9px;font-size:14.5px;line-height:1.65}
.prose .tut-checks{list-style:none;padding-left:0}
.tut-checks li{display:flex;gap:9px;align-items:flex-start}
.tut-checks svg{flex:none;margin-top:3px}

/* ---- 平台面板 ---- */
.tut-panel{margin-top:16px}
.tut-panel > h3{margin-bottom:12px;font-size:17px}
.prose .steps{list-style:none;padding-left:0}
.prose .steps > li + li{margin-top:0}
.tut-panel .steps h4{margin-bottom:4px}

/* ---- 延伸入口 ---- */
.tut-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}
.tut-link{
  display:flex;flex-direction:column;gap:6px;
  background:var(--bg-panel);border-radius:var(--r);
  box-shadow:var(--shadow-card);
  padding:16px 18px;min-width:0;
  transition:transform .18s ease,box-shadow .18s ease;
}
.tut-link:hover{transform:translateY(-1px);box-shadow:var(--shadow-float)}
.lk-title{font-size:14.5px;font-weight:700;color:var(--text)}
.tut-link:hover .lk-title{color:var(--accent-dark)}
.lk-desc{font-size:13px;line-height:1.65;color:var(--text-muted)}

@media (max-width:768px){
  .tut-step + .tut-step{margin-top:36px;padding-top:36px}
  .tut-links{grid-template-columns:1fr}
  .tut-orb{width:320px;height:320px;margin-left:-160px}
}