/* ==========================================================================
   VPNWI · home.css
   首页专属:静态事实数据条、线路状态网格(servers.js 注入位)、
   区块尾部链接、套餐选档说明、流量包提示、客户端补充说明。
   颜色与尺寸一律引用 base.css 的 :root 设计令牌。
   ========================================================================== */

/* ===================== 静态事实数据条(aria-hidden) ===================== */
.stats-band{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  background:var(--border-soft);
  border:1px solid var(--border-soft);
  border-radius:var(--r-l);
  overflow:hidden;
  box-shadow:var(--shadow-1);
}
.stats-band li{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-width:0;
  padding:16px 12px;
  background:var(--bg-panel);
  text-align:center;
}
.stats-num{
  font-family:var(--font-mono);
  font-size:21px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.02em;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.stats-label{
  font-size:12px;
  line-height:1.5;
  color:var(--text-muted);
}

/* ===================== 线路状态(servers.js 注入) ===================== */
/* 容器留在文档流里占位,只负责夹住网格,不绝对定位、不盖后文 */
.server-status{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:22px;
}
.server-status:empty{display:none;}

.srv-row{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  height:46px;
  padding:0 14px;
  background:var(--bg-panel);
  border:1px solid var(--border-soft);
  border-radius:var(--r-m);
  box-shadow:var(--shadow-1);
}
.srv-dot{
  flex:none;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--success);
  box-shadow:0 0 0 3px var(--success-halo);
  animation:srv-breathe 2.6s ease-in-out infinite;
}
@keyframes srv-breathe{
  0%,100%{opacity:1;}
  50%{opacity:.4;}
}
.srv-flag{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:20px;
  border-radius:4px;
  overflow:hidden;
  background:var(--bg-inset);
  font-size:14px;
  line-height:1;
}
.srv-flag svg{display:block;width:100%;height:100%;}
.srv-name{
  min-width:0;
  font-size:13px;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.srv-type{
  flex:none;
  display:inline-flex;
  align-items:center;
  height:20px;
  padding:0 8px;
  border-radius:6px;
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--text-muted);
  background:var(--bg-subtle);
  border:1px solid var(--border-soft);
  white-space:nowrap;
}
.srv-ms{
  margin-left:auto;
  flex:none;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  color:var(--text);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.srv-bw{
  flex:none;
  min-width:62px;
  text-align:right;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--text-faint);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* ===================== 区块尾部链接 ===================== */
.sec-more{
  margin-top:22px;
  text-align:center;
}
.sec-more a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:36px;
  padding:0 4px;
  font-size:14px;
  font-weight:600;
  color:var(--accent);
}
.sec-more a:hover{color:var(--accent-dark);}

/* ===================== 节点区选线说明 ===================== */
.nodes-guide{
  max-width:820px;
  margin-top:26px;
  font-size:15px;
}
.nodes-guide h3{margin-bottom:10px;}

/* ===================== 套餐区选档说明与流量包提示 ===================== */
.plan-guide{
  max-width:860px;
  margin:24px auto 0;
  font-size:14px;
  line-height:1.8;
  color:var(--text-muted);
  text-align:center;
}
.pack-note{
  margin-top:20px;
  padding:16px 18px;
  border-radius:var(--r-m);
  background:var(--bg-panel);
  border:1px solid var(--border-soft);
  box-shadow:var(--shadow-1);
  font-size:13.5px;
  line-height:1.75;
  color:var(--text-muted);
  text-align:center;
}
.pack-note strong{
  color:var(--text);
  font-weight:600;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:-.01em;
}

/* ===================== 客户端区补充说明 ===================== */
.client-note{
  margin-top:18px;
  font-size:13px;
  line-height:1.75;
  color:var(--text-faint);
  text-align:center;
}

/* ===================== 响应式 ===================== */
@media (max-width:900px){
  .stats-band{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:720px){
  .server-status{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .stats-band li{padding:13px 8px;}
  .stats-num{font-size:18px;}
  .srv-row{height:44px;padding:0 12px;gap:8px;}
  .srv-bw{min-width:54px;}
  .plan-guide{text-align:left;}
}
@media (prefers-reduced-motion:reduce){
  .srv-dot{animation:none;}
}