/* ==========================================================================
   VPNHF · 首页专属样式
   只补设计系统未覆盖的两处:装置内套餐条与套餐卡同名类的解耦、
   以及脚手架 servers.js 注入的线路状态列表。
   颜色/字体/圆角/投影一律引用 base.css 的 :root 令牌。
   ========================================================================== */

/* --------------------------------------------------------------------------
   装置内套餐条:components.css 的 .plan-price / .plan-per 服务于套餐卡,
   这里把首屏索引窗里的同名元素还原成紧凑排版
   -------------------------------------------------------------------------- */

.index-window .win-plan .plan-price{
  display:inline-flex;
  align-items:baseline;
  gap:0;
  margin:0;
  font-family:var(--font-mono);
  font-size:15px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--text);
}

.index-window .win-plan .plan-per{
  margin-left:1px;
  font-size:10px;
  font-weight:400;
  color:var(--text-muted);
}

/* --------------------------------------------------------------------------
   区块内的动作行与说明段
   -------------------------------------------------------------------------- */

.home-more{
  justify-content:center;
  margin-top:26px;
}

.home-note{
  max-width:72ch;
  margin:20px auto 0;
  font-size:14.5px;
  line-height:1.8;
  color:var(--text-muted);
  text-align:left;
}

.home-note strong{
  color:var(--text);
  font-weight:600;
}

/* --------------------------------------------------------------------------
   线路状态列表(servers.js 注入)
   容器留在文档流内占位,注入后自己长高;PC 双列、移动单列
   -------------------------------------------------------------------------- */

#server-status{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 18px;
  width:100%;
  max-width:100%;
  overflow:hidden;
}

#server-status:empty{display:none;}

#server-status > *{min-width:0;}

#server-status :where(.srv-grid,.srv-list,.srv-wrap){display:contents;}

.srv-row{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--bg-panel);
  box-shadow:0 1px 0 var(--white-14) inset;
  font-size:12.5px;
  line-height:1.4;
  color:var(--text-muted);
}

.srv-dot{
  width:6px;
  height:6px;
  flex:none;
  border-radius:50%;
  background:var(--success);
  box-shadow:0 0 0 3px var(--success-10);
  animation:srv-breathe 2.6s ease-in-out infinite;
}

@keyframes srv-breathe{
  0%,100%{opacity:1;}
  50%{opacity:.42;}
}

.srv-flag{
  display:block;
  width:18px;
  height:18px;
  flex:none;
  border-radius:50%;
  overflow:hidden;
  box-shadow:0 0 0 1px var(--ink-10) inset;
}

.srv-flag svg,
.srv-flag img{
  display:block;
  width:100%;
  height:100%;
}

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

.srv-type{
  flex:none;
  padding:2px 7px;
  border-radius:var(--radius-xs);
  background:var(--bg-panel-2);
  font-size:10.5px;
  line-height:1.4;
  white-space:nowrap;
  color:var(--text-muted);
}

.srv-ms{
  flex:none;
  margin-left:auto;
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:11.5px;
  white-space:nowrap;
  color:var(--text-muted);
}

.srv-bw{
  flex:none;
  margin-left:6px;
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:11.5px;
  white-space:nowrap;
  color:var(--accent-dark);
}

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

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