/* ============================================================
   Clash开源网 · home.css —— 首页专属样式
   状态栏装饰条 / 区块引言 / 平台入口网格 / 信任背书 /
   克隆命令框 / 常见问题精选 / 博客预览收尾
   ============================================================ */

/* ---- 状态栏装饰条 ---- */
.statline{
  margin-top:14px;
  display:flex;align-items:center;gap:0;
  flex-wrap:wrap;
  border:1px solid var(--border);
  border-radius:var(--r);
  background:var(--bg-panel);
  overflow:hidden;
}
.st{
  font-family:var(--font-mono);
  font-size:12px;color:var(--muted);
  padding:8px 16px;
  border-right:1px solid var(--border);
  white-space:nowrap;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;
}
.st:last-child{border-right:0}
.st b{color:var(--ok);font-weight:600;margin-right:8px}
@media (max-width:720px){
  .statline{flex-direction:column;align-items:stretch}
  .st{border-right:0;border-bottom:1px solid var(--border)}
  .st:last-child{border-bottom:0}
}

/* ---- 区块引言 ---- */
.sec-intro{
  margin-top:14px;
  margin-bottom:18px;
  font-size:14px;line-height:1.75;color:var(--muted);
  max-width:720px;
}

/* ---- 平台入口网格 ---- */
.plat-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.plat-grid>*{min-width:0}
.plat{
  display:flex;flex-direction:column;gap:8px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:18px 20px;
  transition:border-color .15s;
}
.plat:hover{border-color:var(--accent)}
.plat-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex-shrink:0;
  color:var(--muted);
  background:var(--bg-panel2);
  border:1px solid var(--border);
  border-radius:var(--r);
  transition:color .15s;
}
.plat:hover .plat-icon{color:var(--ok)}
.plat-name{font-size:15px;font-weight:700;color:var(--text)}
.plat-note{font-size:13px;line-height:1.7;color:var(--muted)}
.plat-go{
  margin-top:auto;
  font-family:var(--font-mono);font-size:12.5px;color:var(--ok);
}
.plat-all{border-style:dashed}
.plat-all:hover{border-style:solid}
@media (max-width:900px){
  .plat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .plat-grid{grid-template-columns:1fr}
}

/* ---- 信任背书 ---- */
.trust-grid{margin-top:6px}
.trust-h{
  font-size:13px;font-weight:600;color:var(--ok);
  margin-bottom:8px;
}
.trust-p{
  font-size:14px;line-height:1.85;color:var(--muted);
  margin-bottom:18px;
}
.trust-p:last-child{margin-bottom:0}
.tx-link{
  color:var(--ok);
  border-bottom:1px solid var(--accent-dark);
  transition:color .15s;
}
.tx-link:hover{color:var(--accent)}

/* ---- 克隆命令框 ---- */
.clone-panel{display:flex;flex-direction:column}
.clone-box{
  display:flex;align-items:center;gap:10px;
  background:var(--bg-panel2);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:10px 12px;
  margin-bottom:14px;
  min-width:0;
}
.clone-box code{
  flex:1;min-width:0;
  font-family:var(--font-mono);font-size:12.5px;color:var(--text);
  overflow-x:auto;white-space:nowrap;
  background:none;border:0;padding:0;
}
.copy-btn{
  flex-shrink:0;
  font-size:12px;color:var(--ok);
  background:none;
  border:1px solid var(--accent-dark);
  border-radius:var(--r-in);
  padding:4px 12px;
  cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
}
.copy-btn:hover{border-color:var(--accent)}
.copy-btn.done{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.clone-chips{margin-bottom:16px}

/* ---- 常见问题精选 ---- */
.qa-lines{
  margin-top:14px;
  border:1px solid var(--border);
  border-radius:var(--r);
  background:var(--bg-panel);
  overflow:hidden;
}
.qa-lines li{
  padding:13px 18px;
  border-top:1px solid var(--border);
  font-size:14px;line-height:1.8;color:var(--muted);
  min-width:0;
}
.qa-lines li:first-child{border-top:0}
.qa-lines li b{color:var(--text);font-weight:600;margin-right:6px}
.qa-lines .tx-link{margin-left:6px;font-family:var(--font-mono);font-size:12.5px;white-space:nowrap}

/* ---- 博客预览收尾 ---- */
.posts-grid{margin-top:6px}
.posts-grid .post-title{font-size:15.5px}
.posts-all{margin-top:18px}
.posts-all .tx-link{font-size:13px}