/* ==========================================================================
   VPNWI · tutorial.css
   使用指南页专属样式:页头、步骤头、面板结构示意、订阅示例、
   校验清单、平台小节、延伸阅读网格、收尾装饰。
   所有颜色与尺寸引用 base.css 的设计令牌。
   ========================================================================== */

/* ===================== 页头 ===================== */
.guide-hero{
  background:var(--hero-bg);
  padding-top:52px;
  padding-bottom:30px;
}
.guide-hero-inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.guide-hero .hero-title{max-width:900px;}
.guide-hero .hero-sub{max-width:660px;}

/* 概览流程条:避免 5 节点 + 4 连线在中等宽度溢出 */
.guide-flow{
  width:100%;
  max-width:940px;
  margin-top:26px;
}

/* ===================== 页头下方的说明区 ===================== */
.guide-note{
  padding-top:30px;
  padding-bottom:22px;
}

/* ===================== 步骤主体 ===================== */
.guide-body{display:block;}
.guide-step{margin-top:56px;}
.guide-step:first-of-type{margin-top:8px;}

.step-head{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:14px;
  margin-bottom:16px;
}
.step-head h2{
  margin:0;
  min-width:0;
}
.step-num{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  flex:none;
  border-radius:var(--r-m);
  background:var(--bg-inset);
  border:1px solid var(--border-soft);
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:600;
  letter-spacing:0;
}

.step-actions{margin-top:20px;}

/* ===================== 面板结构示意 ===================== */
.panel-mock{
  max-width:420px;
  margin:18px 0;
  overflow:hidden;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-l);
  box-shadow:var(--shadow-1);
}
.panel-mock-bar{
  display:flex;
  align-items:center;
  gap:7px;
  height:36px;
  padding:0 12px;
  background:var(--bg-bar);
  border-bottom:1px solid var(--border-soft);
}
.panel-mock-lamp{
  width:8px;
  height:8px;
  flex:none;
  border-radius:50%;
  background:var(--border);
}
.panel-mock-lamp.is-accent{background:var(--accent-2);}
.panel-mock-file{
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.02em;
  color:var(--text-faint);
  white-space:nowrap;
}
.panel-mock-list{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:8px;
}
.panel-mock-list li{
  display:flex;
  align-items:center;
  min-height:34px;
  padding:0 10px;
  border-radius:var(--r-s);
  font-size:13px;
  color:var(--text-muted);
}
.panel-mock-list li.is-on{
  background:var(--tint-accent);
  box-shadow:inset 3px 0 0 var(--accent);
  color:var(--accent);
  font-weight:600;
}

/* ===================== 订阅链接示例 ===================== */
.sub-sample{
  margin:16px 0;
  padding:14px 16px;
  background:var(--bg-panel);
  border:1px solid var(--border-soft);
  border-radius:var(--r-m);
  box-shadow:var(--shadow-1);
}
.sub-sample-label{
  display:block;
  margin-bottom:8px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-faint);
}
.sub-sample code{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--accent);
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* ===================== 校验清单 ===================== */
.check-list{
  margin:18px 0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.check-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14.5px;
  line-height:1.7;
  color:var(--text-muted);
}
.check-list svg{
  width:16px;
  height:16px;
  flex:none;
  margin-top:4px;
  color:var(--accent);
}

/* ===================== 平台小节 ===================== */
.plat-block{
  margin-top:20px;
  padding:20px 22px;
  background:var(--bg-panel);
  border:1px solid var(--border-soft);
  border-radius:var(--r-l);
  box-shadow:var(--shadow-1);
}
.plat-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.plat-head h3{
  margin:0;
  min-width:0;
}
.plat-tag{
  display:inline-flex;
  align-items:center;
  flex:none;
  height:22px;
  padding:0 9px;
  border-radius:var(--r-pill);
  background:var(--tint-accent);
  border:1px solid var(--accent-ring);
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.04em;
}
.plat-block .prose p:last-child{margin-bottom:0;}

/* ===================== 延伸阅读 ===================== */
.next-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
}
.next-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
  padding:20px;
  background:var(--bg-panel);
  border:1px solid var(--border-soft);
  border-radius:var(--r-l);
  box-shadow:var(--shadow-1);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.next-card:hover{
  transform:translateY(-2px);
  border-color:var(--accent-ring);
  box-shadow:var(--shadow-2);
}
.next-ico{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  flex:none;
  border-radius:var(--r-m);
  background:var(--bg-inset);
  color:var(--accent);
}
.next-ico svg{width:19px;height:19px;}
.next-title{
  font-size:15px;
  font-weight:700;
  color:var(--text);
  line-height:1.4;
}
.next-text{
  font-size:13px;
  line-height:1.65;
  color:var(--text-muted);
}
.next-card .post-more{margin-top:auto;}

/* ===================== 收尾 ===================== */
.guide-outro .topo-band{margin-bottom:14px;}

/* ===================== 响应式 ===================== */
@media (max-width:900px){
  .guide-flow{max-width:100%;}
  .guide-flow .flow-strip{
    flex-wrap:wrap;
    justify-content:center;
    row-gap:8px;
  }
  .guide-flow .flow-link{display:none;}
}
@media (max-width:640px){
  .guide-hero{
    padding-top:36px;
    padding-bottom:22px;
  }
  .guide-step{margin-top:40px;}
  .step-head{gap:10px;}
  .step-num{
    width:30px;
    height:30px;
    border-radius:var(--r-s);
    font-size:12.5px;
  }
  .panel-mock{max-width:100%;}
  .plat-block{padding:16px 16px;}
}
@media (prefers-reduced-motion:reduce){
  .next-card{transition:none;}
  .next-card:hover{transform:none;}
}