/* ==========================================================================
   VPNOh — tutorial.css
   页面专属样式:zh-CN/quickstart.html(新手指引)
   只补教程页特有的步骤徽标、面板路径提示、步骤动作行与平台小节,
   其余一律复用 base.css / components.css 的既有组件,不重复定义。
   ========================================================================== */

/* 教程文档列:保持单列阅读宽度,整块在版心内居中 */
.qs-doc{margin-inline:auto}

/* 顶部提示卡:比默认 callout 窄,避免在宽屏上横跨整行 */
.qs-callout{max-width:820px;margin-top:var(--sp-6);margin-inline:auto}

/* 步骤序号徽标:与 h2 同排的圆形数字标 */
.qs-step-no{
  display:inline-block;
  width:28px;height:28px;
  margin-right:10px;
  border-radius:50%;
  background:linear-gradient(180deg,var(--accent),var(--accent-dark));
  color:var(--white);
  font-family:var(--font-display);
  font-size:13.5px;font-weight:800;
  line-height:28px;text-align:center;
  vertical-align:middle;
  box-shadow:0 8px 16px -8px rgba(var(--accent-rgb),.7);
}

/* 面板路径提示:描述「面板 → 某处」的路径 */
.qs-path{
  display:inline-flex;align-items:center;
  max-width:100%;
  min-height:26px;padding:0 10px;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--bg-panel-2);
  font-family:var(--font-mono);font-size:12px;
  color:var(--text);
  white-space:nowrap;overflow:hidden;
}

/* 步骤收尾:一条虚线加直达面板的动作按钮 */
.qs-act{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  margin-top:var(--sp-5);
  padding-top:var(--sp-4);
  border-top:1px dashed var(--border);
}
.qs-act .btn{flex-shrink:0;white-space:nowrap}
.qs-hint{font-size:13px;line-height:1.6;color:var(--text-muted)}

/* 平台小节:左侧细紫条,把各平台段落从主线里拎出来 */
.qs-plat{
  margin-top:var(--sp-5);
  padding-left:14px;
  border-left:3px solid rgba(var(--accent-rgb),.3);
}
.qs-plat h3{margin-top:0}
.qs-plat p{margin-bottom:var(--sp-2)}
.qs-plat p:last-child{margin-bottom:0}

/* 正文内链接:与正文区分开,但不抢按钮的视觉权重 */
.qs-doc p a,.qs-doc li a{
  color:var(--accent);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
}
.qs-doc p a:hover,.qs-doc li a:hover{color:var(--accent-dark)}

/* 目录条与第一个步骤标题之间收紧一点 */
.qs-doc > section:first-of-type > h2{margin-top:var(--sp-4)}

@media (max-width:768px){
  .qs-callout{max-width:100%}
  .qs-plat{padding-left:12px}
}

@media (max-width:640px){
  .qs-step-no{width:24px;height:24px;line-height:24px;font-size:12px;margin-right:8px}
  .qs-act{gap:10px}
  .qs-act .btn{width:100%}
}