/* =========================================================================
   VPNWu — tutorial.css
   教程页专属：页头装饰弧 / 顶部提示间距 / 步骤分隔与步骤标签 /
   客户端分块 / 动作行与提示 / 提示块内链接
   （共享组件样式一律来自 base.css 与 components.css，此处不重复定义）
   ========================================================================= */

/* ---------------------------------------------------------- 页头装饰弧 */
.tut-arc{
  position:absolute;
  right:0;
  top:6px;
  width:300px;
  height:86px;
  opacity:.75;
  pointer-events:none;
  z-index:0;
}
.tut-arc path{fill:none}

/* ------------------------------------------------------ 顶部提示与正文栏 */
.tut-intro{margin-top:26px}
.article-body{
  max-width:760px;
  min-width:0;
  margin-top:32px;
}

/* -------------------------------------------------------------- 步骤分隔 */
.tut-step{
  position:relative;
  padding-top:34px;
  margin-top:34px;
  border-top:1px dashed var(--border-strong);
}
.tut-step:first-of-type{
  padding-top:0;
  margin-top:0;
  border-top:0;
}
.step-tag{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--accent-dark);
}
.step-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:30px;
  height:22px;
  padding:0 7px;
  border-radius:var(--r-xs);
  background:var(--accent);
  color:var(--ink-deep);
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.02em;
}
.tut-step > h2{margin-top:10px}
.tut-step > .prose{margin-top:14px}

/* ------------------------------------------------------------ 动作行 */
.tut-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 16px;
  margin-top:18px;
}
.tut-actions .btn{
  flex-shrink:0;
  white-space:nowrap;
}
.tut-hint{
  min-width:0;
  font-size:13.5px;
  line-height:1.6;
  color:var(--muted);
}

/* ------------------------------------------------------ 客户端分块 */
.client-block{
  min-width:0;
  margin-top:20px;
  padding:20px 22px 22px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-card);
}
.client-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.client-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  flex:none;
  border-radius:var(--r-sm);
  background:var(--bg-panel-2);
  border:1px solid var(--border-soft);
  color:var(--ink);
}
.client-head h3{
  margin:0;
  font-size:17px;
  letter-spacing:-.01em;
}
.client-block .prose{margin-top:0}
.client-block .prose p{font-size:15.5px;line-height:1.8}

/* -------------------------------------------------- 提示块里的行内链接 */
.callout a{
  color:var(--accent-dark);
  text-decoration:underline;
  text-underline-offset:.18em;
}
.callout a:hover{color:var(--ink)}

/* -------------------------------------------------------------- 响应式 */
@media (max-width:1180px){
  .tut-arc{display:none}
}

@media (max-width:640px){
  .tut-step{padding-top:28px;margin-top:28px}
  .article-body{margin-top:24px}
  .tut-intro{margin-top:20px}
  .client-block{padding:16px 16px 18px}
  .client-head h3{font-size:16px}
  .client-block .prose p{font-size:15px}
  .tut-actions .btn{width:100%}
}