/* ==========================================================================
   VPNAY — home.css(首页专属样式)
   只补 components.css 未覆盖的部分:线路状态容器、节点说明块、卖点面板容器、
   套餐说明、为什么选择、更多按钮行、首屏延迟数字。全部取值走 :root 令牌。
   ========================================================================== */

/* ---------- 线路状态容器(数据由 servers.js 注入,容器必须夹住网格) ---------- */
#server-status{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
#server-status:empty{display:none}

.server-status{min-width:0}

.srv-row{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:10px 14px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  box-shadow:0 1px 2px var(--ink-04);
  font-size:13px;
  line-height:1.4;
}

.srv-dot{
  position:relative;
  flex:none;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--success);
}
.srv-dot::after{
  content:'';
  position:absolute;
  inset:-3px;
  border-radius:50%;
  border:1px solid var(--success);
  opacity:.5;
  animation:srv-ping 2.6s ease-out infinite;
}
@keyframes srv-ping{
  0%{transform:scale(.7);opacity:.6}
  100%{transform:scale(1.9);opacity:0}
}

.srv-flag{
  flex:none;
  width:20px;
  height:15px;
  border-radius:3px;
  box-shadow:0 0 0 1px var(--border);
  overflow:hidden;
  object-fit:cover;
}
.srv-flag svg,
.srv-flag img{
  display:block;
  width:100%;
  height:100%;
  border-radius:3px;
  object-fit:cover;
}

.srv-name{
  min-width:0;
  font-weight:600;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.srv-type{
  flex:none;
  padding:2px 8px;
  border-radius:var(--r-pill);
  background:var(--accent-08);
  color:var(--accent-2);
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:600;
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
}

.srv-ms{
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:12.5px;
  font-weight:600;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.srv-bw{
  flex:none;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* ---------- 首屏装置里的延迟数字 ---------- */
[data-hero-ms]{font-variant-numeric:tabular-nums}

/* ---------- 节点预览说明块 ---------- */
.nodes-note{margin-top:28px;max-width:860px}
.nodes-note h3{font-size:17px}
.nodes-note p{margin-top:12px;font-size:14.5px;line-height:1.75;color:var(--muted)}
.nodes-note p strong{color:var(--ink);font-weight:700}
.nodes-note .btn{margin-top:18px}

/* ---------- 卖点面板容器 ---------- */
.feature-panels{min-width:0}

/* ---------- 套餐说明 ---------- */
.plan-guide{margin-top:20px}
.plan-guide h3{font-size:17px}
.plan-guide p{margin-top:12px;font-size:14.5px;line-height:1.75;color:var(--muted)}
.plan-guide p strong{color:var(--ink);font-weight:700}

/* ---------- 为什么选择 ---------- */
.why-list{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.why-list li{
  min-width:0;
  padding:20px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-card);
  font-size:14.5px;
  line-height:1.75;
  color:var(--muted);
}
.why-list strong{
  display:block;
  margin-bottom:6px;
  font-family:var(--font-display);
  font-size:15.5px;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--ink);
}

/* ---------- 更多按钮行 ---------- */
.more-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}

/* ---------- 响应式与动效偏好 ---------- */
@media (max-width:900px){
  .why-list{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:768px){
  #server-status{grid-template-columns:minmax(0,1fr)}
}

@media (prefers-reduced-motion:reduce){
  .srv-dot::after{animation:none}
}