/* ============================================================
   Clash客户端官网 · index 页面专属样式
   平台入口网格 / 常见问题精选 / 复制兜底工具类
   仅引用 base.css 设计令牌,不重复定义共享组件。
   ============================================================ */

/* ---------- 平台入口网格 ---------- */
.port-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
  margin-bottom:22px;
}
.port-grid>*{min-width:0}
.port-cell{
  display:flex;
  flex-direction:column;
  gap:10px;
  background:var(--card);
  border:1px solid var(--rule);
  padding-top:20px;
  padding-bottom:18px;
  padding-left:18px;
  padding-right:18px;
}
.port-cell:hover{border-color:var(--cobalt)}
.port-ico{
  display:inline-flex;
  color:var(--cobalt);
  flex-shrink:0;
}
.port-ico svg{display:block}
.port-name{
  font-family:var(--ft-mono);
  font-size:13px;
  letter-spacing:.14em;
  color:var(--cobalt-deep);
}
.port-desc{
  flex:1;
  font-size:13px;
  line-height:1.85;
  color:var(--ink-soft);
}
.port-meta{
  font-family:var(--ft-mono);
  font-size:10.5px;
  letter-spacing:.08em;
  color:var(--ink-soft);
}
.port-go{
  margin-top:2px;
  padding-top:10px;
  border-top:1px dashed var(--rule);
  font-family:var(--ft-mono);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--cobalt);
}
.port-cell:hover .port-go{color:var(--cobalt-deep)}
.port-cell:hover .port-name{color:var(--cobalt)}

@media (max-width:1080px){
  .port-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:720px){
  .port-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){
  .port-grid{grid-template-columns:1fr}
}

/* ---------- 常见问题精选 ---------- */
.qpick{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}
.qpick>*{min-width:0}
.qpick-item{
  background:var(--card);
  border:1px solid var(--rule);
  border-left:3px solid var(--cobalt);
  padding-top:18px;
  padding-bottom:18px;
  padding-left:20px;
  padding-right:20px;
}
.qpick-q{
  font-family:var(--ft-display);
  font-weight:600;
  font-size:15.5px;
  color:var(--ink);
}
.qpick-a{
  margin-top:8px;
  font-size:14px;
  line-height:1.9;
  color:var(--ink-soft);
}
.qpick-go{
  display:inline-block;
  margin-top:12px;
  font-family:var(--ft-mono);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--cobalt-deep);
  border-bottom:1px solid var(--cobalt);
  padding-bottom:2px;
}
.qpick-go:hover{color:var(--cobalt)}
@media (max-width:700px){
  .qpick{grid-template-columns:1fr}
}

/* ---------- 信任背书区间距微调 ---------- */
#provenance .cmd-box{margin-top:22px}
#provenance .fact-belt{margin-top:16px}

/* ---------- 复制兜底暂存元素(JS 创建,避免内联样式) ---------- */
.clip-stage{
  position:fixed;
  left:-9999px;
  top:0;
  width:1px;
  height:1px;
  opacity:0;
}