/* ==========================================================================
   VPNSJ · zh-CN 首页补充样式
   只引用 base.css 的 :root 设计令牌,不新增颜色与圆角取值。
   ========================================================================== */

/* ---- 能力面板里的迷你清单(用在 .spec-frame 内) ---- */
.frame-list{display:flex;flex-direction:column;min-width:0}
.frame-row{
  display:flex;
  align-items:baseline;
  gap:12px;
  padding:7px 0;
  min-width:0;
  border-bottom:1px dashed var(--border);
}
.frame-row:last-child{border-bottom:0}
.frame-key{
  flex:none;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:0.02em;
  color:var(--text-muted);
}
.frame-val{
  margin-left:auto;
  min-width:0;
  font-size:12.5px;
  line-height:1.6;
  color:var(--text);
  text-align:right;
  overflow-wrap:anywhere;
}

/* ---- 旗帜配色:内联 SVG 用 class 上色,避免在属性里写死颜色 ---- */
.fl-red{fill:var(--flag-red)}
.fl-blue{fill:var(--flag-blue)}
.fl-white{fill:var(--flag-white)}
.fl-green{fill:var(--flag-green)}
.fl-edge{fill:none;stroke:var(--border);stroke-width:1}

/* ---- 能力面板的隐藏态显式声明,防止 UA 样式被覆盖 ---- */
.spec-panel[hidden]{display:none}

/* ---- 差异卡片 ---- */
.why-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.why-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
  padding:24px 22px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
}
.why-num{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.08em;
  color:var(--accent);
}
.why-card h3{font-size:16.5px}
.why-card p{font-size:13.5px;line-height:1.8;color:var(--text-muted)}

/* ---- 区块补充说明与尾部链接行 ---- */
.note-block{
  margin-top:var(--sp-5);
  max-width:74ch;
  font-size:14.5px;
  line-height:1.82;
  color:var(--text-muted);
}
.sec-tail{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  margin-top:var(--sp-5);
}
.sec-tail .tail-note{
  font-size:13px;
  line-height:1.7;
  color:var(--text-muted);
  min-width:0;
}

/* ---- 窄屏 ---- */
@media (max-width:1024px){
  .why-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .frame-row{flex-wrap:wrap;gap:4px}
  .frame-val{margin-left:0;text-align:left}
  .sec-tail{gap:10px}
}