/* ============================================================
   Clash配置教程 · 首页专属样式
   状态条间距 / 平台入口网格 / 生态双栏 / 问答条带
   ============================================================ */

/* Hero 徽标行 */
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--muted);
  border:1px solid var(--border);
  background:var(--panel2);
  padding:5px 12px;
  margin-bottom:18px;
}
.hero-badge .led-dot{flex-shrink:0}

/* 状态栏装饰条与 Hero 的间距 */
.statline-row{
  padding-top:20px;
}

/* 分区引导句 */
.lead{
  font-size:15px;
  line-height:1.85;
  color:var(--text-soft);
  max-width:820px;
  margin-bottom:22px;
}

/* ---------- 平台入口网格 ---------- */
.pf-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:12px;
}
.pf-grid > *{min-width:0}
.pf-cell{
  display:flex;
  flex-direction:column;
  gap:10px;
  border:1px solid var(--border);
  background:var(--panel);
  padding:20px 20px 18px;
  transition:border-color .15s ease,transform .12s ease;
}
.pf-cell:hover{
  border-color:var(--edge);
  transform:translateY(-2px);
}
.pf-ico{
  width:34px;
  height:34px;
  color:var(--text);
  flex-shrink:0;
}
.pf-ico svg{display:block;width:100%;height:100%}
.pf-name{
  font-family:var(--font-mono);
  font-size:15px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--text);
}
.pf-note{
  font-size:13px;
  line-height:1.7;
  color:var(--muted);
}
.pf-go{
  margin-top:auto;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--text);
}

/* 区末链接行 */
.more-line{
  margin-top:20px;
  font-family:var(--font-mono);
  font-size:13px;
}
.more-line a{
  color:var(--text);
  border-bottom:1px solid var(--metal);
}
.more-line a:hover{border-bottom-color:var(--text)}

/* ---------- 生态双栏 ---------- */
.eco-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:14px;
  align-items:start;
}
.eco-grid > *{min-width:0}
.eco-text{
  border:1px solid var(--border);
  background:var(--panel);
  padding:24px 26px;
}
.eco-text p{
  font-size:14px;
  line-height:1.9;
  color:var(--text-soft);
}
.eco-text p + p{margin-top:1em}
.eco-clone{
  border:1px solid var(--border);
  background:var(--panel2);
  padding:20px 22px;
}
.clone-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.clone-lbl{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.2em;
  color:var(--muted);
}
.clone-cmd{
  background:var(--hole);
  border:1px solid var(--border);
  padding:14px 16px;
  margin-bottom:14px;
}
.clone-cmd code{
  display:block;
  font-family:var(--font-mono);
  font-size:12.5px;
  line-height:1.6;
  color:var(--text);
  background:none;
  border:0;
  padding:0;
  white-space:pre;
}
.clone-note{
  margin-top:14px;
  font-size:12px;
  line-height:1.7;
  color:var(--muted);
}

/* ---------- 问答条带 ---------- */
.qa-strip{
  border:1px solid var(--border);
  background:var(--panel);
}
.qa-row{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:8px 24px;
  padding:16px 20px;
  border-bottom:1px solid var(--border);
}
.qa-row:last-child{border-bottom:0}
.qa-row > *{min-width:0}
.qa-q{
  font-size:14px;
  font-weight:600;
  color:var(--text);
}
.qa-a{
  font-size:13px;
  line-height:1.8;
  color:var(--muted);
}
.qa-a a{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text);
  border-bottom:1px solid var(--metal);
  white-space:nowrap;
}
.qa-a a:hover{border-bottom-color:var(--text)}

/* ---------- 响应式 ---------- */
@media (max-width:920px){
  .eco-grid{grid-template-columns:1fr}
  .qa-row{grid-template-columns:1fr}
}
@media (max-width:640px){
  .eco-text{padding:18px 16px}
  .eco-clone{padding:16px 14px}
  .qa-row{padding:14px 16px}
}