@charset "UTF-8";
/* ==========================================================================
   VPNWY · home.css
   首页专属:事实数据条 / 线路状态组件 / 区块内小节奏
   首屏样式全部来自 base.css 与 components.css,本文件不重复定义
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 事实数据条
   -------------------------------------------------------------------------- */
.facts-band{
  position:relative;
  padding-block:var(--sp-6);
  padding-inline:var(--pad-x);
  border-bottom:1px solid var(--border);
  background:var(--bg-panel-2-soft);
}
.facts-band-list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-4) var(--sp-7);
}
.facts-band-list li{
  display:flex;
  align-items:baseline;
  gap:9px;
  min-width:0;
}
.facts-band-num{
  font-family:var(--font-mono);
  font-size:17px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
  color:var(--text);
  white-space:nowrap;
}
.facts-band-label{
  font-size:12.5px;
  color:var(--text-muted);
  white-space:nowrap;
}

/* --------------------------------------------------------------------------
   2. 线路状态组件(servers.js 注入)
   #server-status 的文档流占位与 overflow 防御在 base.css 里
   -------------------------------------------------------------------------- */
.server-status:empty{display:none;}

.server-status .srv-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 20px;
  width:100%;
}
.server-status .srv-row{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  min-height:44px;
  padding:6px 12px;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--bg-panel);
  box-shadow:var(--sh-1);
}
.server-status .srv-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--success);
  box-shadow:0 0 0 3px var(--success-a18);
  flex-shrink:0;
  animation:srv-breath 2.4s ease-in-out infinite;
}
@keyframes srv-breath{
  0%,100%{transform:scale(1);opacity:1;}
  50%{transform:scale(1.4);opacity:.62;}
}
.server-status .srv-flag{
  display:flex;
  align-items:center;
  flex-shrink:0;
}
.server-status .srv-flag svg{
  width:22px;
  height:15px;
  border-radius:3px;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--ink-a06);
}
.server-status .srv-name{
  font-size:13.5px;
  font-weight:500;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
.server-status .srv-type{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:0 9px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--bg-panel-2-soft);
  font-size:11px;
  color:var(--text-muted);
  white-space:nowrap;
  flex-shrink:0;
}
.server-status .srv-ms,
.server-status .srv-bw{
  font-family:var(--font-mono);
  font-size:12px;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
  white-space:nowrap;
  flex-shrink:0;
}
.server-status .srv-ms{
  margin-left:auto;
  color:var(--text);
}
.server-status .srv-bw{
  color:var(--text-muted);
  min-width:62px;
  text-align:right;
}

/* --------------------------------------------------------------------------
   3. 区块内小节奏
   -------------------------------------------------------------------------- */
.sec-note{
  margin-top:var(--sp-5);
  max-width:52em;
  font-size:15px;
  line-height:1.78;
  color:var(--text-muted);
}
.sec-note + .link-more{margin-top:var(--sp-5);}
#network .link-more{margin-top:var(--sp-5);}

/* 卖点区在窄屏的整体节奏 */
#features .feature-browser{margin-top:var(--sp-6);}
#clients .plat-grid{margin-top:var(--sp-6);}
#plans .plan-grid{margin-top:var(--sp-6);}

/* --------------------------------------------------------------------------
   4. 响应式
   -------------------------------------------------------------------------- */
@media (max-width:1080px){
  .facts-band-list{gap:var(--sp-4) var(--sp-6);}
}

@media (max-width:768px){
  .server-status .srv-grid{grid-template-columns:1fr;}
  .server-status .srv-bw{min-width:0;}
}

@media (max-width:640px){
  .facts-band-list{gap:var(--sp-3) var(--sp-5);}
  .facts-band-num{font-size:15px;}
}

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