/* ==========================================================================
   VPNBL · home.css — 首页专属样式
   仅补齐 components.css 未覆盖的首页区块:线路状态网格 / 区块脚注 /
   说明段落组 / 为什么选我们 / 套餐提示。颜色与圆角一律引用 :root 令牌。
   ========================================================================== */

/* --------------------------------------------------------------------------
   线路状态(容器由 servers.js 注入,容器自己长高,禁止绝对定位盖住后文)
   -------------------------------------------------------------------------- */
.server-status{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:0 0 8px;
  overflow:hidden;
  min-width:0;
}
.server-status:empty{display:none}
.srv-row{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;min-width:0;
  border-radius:var(--r-card);
  background:var(--bg-panel);
  border:1px solid var(--border);
  box-shadow:var(--shadow-xs);
}
.srv-dot{
  width:8px;height:8px;border-radius:50%;flex:none;
  background:var(--success);
  box-shadow:0 0 0 3px var(--success-halo);
  animation:blink 2.8s ease-in-out infinite;
}
.srv-flag{width:20px;height:20px;flex:none;display:block}
.srv-name{
  font-size:14px;font-weight:700;color:var(--text);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.srv-type{
  flex:none;
  padding:3px 9px;border-radius:var(--r-pill);
  font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.02em;
  color:var(--accent);background:var(--accent-wash);border:1px solid var(--accent-edge);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.srv-ms,.srv-bw{
  margin-left:auto;flex:none;
  font-family:var(--font-mono);font-size:13px;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--accent-dark);
}
.srv-bw{min-width:5.6ch;text-align:right;color:var(--text-muted);font-weight:600}
.srv-ms{min-width:5.2ch;text-align:right}

/* --------------------------------------------------------------------------
   区块脚注链接(查看全部线路 / 查看完整套餐 / 进入帮助中心 / 查看全部文章)
   -------------------------------------------------------------------------- */
.sec__foot{display:flex;justify-content:center;margin-top:26px}
.sec__more{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:10px 20px;
  border-radius:var(--r-btn);
  border:1px solid var(--accent-edge);
  background:var(--bg-panel);
  font-size:14.5px;font-weight:700;color:var(--accent);
  box-shadow:var(--shadow-xs);
  transition:transform .18s ease,background-color .18s ease,color .18s ease,border-color .18s ease;
}
.sec__more:hover{transform:translateY(-2px);background:var(--accent);color:var(--bg-panel);border-color:var(--accent)}
.sec__more svg{flex:none;color:currentColor}

/* --------------------------------------------------------------------------
   说明段落组(选线说明 / 档位适合谁)
   -------------------------------------------------------------------------- */
.prose-note{
  max-width:900px;margin:30px auto 0;
  padding:24px 26px;
  border-radius:var(--r-card);
  background:var(--bg-panel);
  border:1px solid var(--border);
  box-shadow:var(--shadow-xs);
}
.prose-note h3{margin-bottom:12px}
.prose-note p+p{margin-top:12px}
.prose-note p{font-size:15px;line-height:1.75;color:var(--text-muted)}

/* --------------------------------------------------------------------------
   套餐预览补充提示
   -------------------------------------------------------------------------- */
.plan-hint{
  max-width:900px;margin:24px auto 0;
  padding:14px 18px;
  border-radius:var(--r-card);
  background:var(--accent-wash);
  border:1px solid var(--border);
  border-left:3px solid var(--accent);
  font-size:14.5px;line-height:1.7;color:var(--text);
}

/* --------------------------------------------------------------------------
   为什么选我们:非对称小卡网格
   -------------------------------------------------------------------------- */
.why-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.why-card{
  display:flex;flex-direction:column;gap:8px;
  padding:22px 20px;min-width:0;
  border-radius:var(--r-card);
  background:var(--bg-panel);
  border:1px solid var(--border);
  box-shadow:var(--shadow-xs);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.why-card:hover{transform:translateY(-4px);border-color:var(--accent-edge);box-shadow:var(--shadow-panel)}
.why-card__num{
  font-size:12px;font-weight:700;letter-spacing:.16em;
  color:var(--accent);opacity:.7;
}
.why-card h3{font-size:16.5px;font-weight:800}
.why-card p{font-size:14px;line-height:1.7;color:var(--text-muted)}

/* --------------------------------------------------------------------------
   feature-panels 容器:六个详情面板共用一个网格单元
   -------------------------------------------------------------------------- */
.feature-panels{min-width:0}
.feature-panels>[role="tabpanel"]{padding-top:0}
.feature-panels>[role="tabpanel"][hidden]{display:none}

/* --------------------------------------------------------------------------
   响应式
   -------------------------------------------------------------------------- */
@media (max-width:1100px){
  .why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .server-status{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .why-grid{grid-template-columns:minmax(0,1fr)}
  .prose-note{padding:20px 18px}
  .sec__more{width:100%;justify-content:center}
  .srv-type{display:none}
}
@media (prefers-reduced-motion:reduce){
  .why-card:hover,.sec__more:hover{transform:none}
  .srv-dot{animation:none}
}