/* ==========================================================================
   C6VPN · home.css
   首页专属:线路状态组件容器、两栏说明区、区块尾部链接间距
   只引用 base.css 的令牌,不重复定义共享组件样式。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 线路状态组件(内容由 servers.js 注入,容器在文档流里占位)
   -------------------------------------------------------------------------- */
#server-status.server-status{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 20px;
  margin-block:0 var(--sp-5);
}
#server-status.server-status:empty{display:none}

.srv-row{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:9px 14px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:inset 0 1px 0 var(--hl-1);
  font-size:12.5px;
  color:var(--text);
}
.srv-dot{
  width:6px;
  height:6px;
  flex:none;
  border-radius:50%;
  background:var(--success);
  box-shadow:0 0 0 3px var(--tint-success);
  animation:pulse 3.4s ease-in-out infinite;
}
.srv-flag{
  width:20px;
  height:14px;
  flex:none;
  border-radius:3px;
}
.srv-name{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:500;
}
.srv-type{
  flex:none;
  padding:2px 7px;
  border-radius:var(--r-xs);
  background:var(--tint-accent);
  color:var(--accent-dark);
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.08em;
  white-space:nowrap;
}
.srv-ms,
.srv-bw{
  flex:none;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.02em;
  white-space:nowrap;
}
.srv-ms{color:var(--text-muted)}
.srv-bw{color:var(--accent-dark)}

/* --------------------------------------------------------------------------
   2. 两栏说明区(选线说明 / 线路类型、套餐适用人群)
   -------------------------------------------------------------------------- */
.home-cols{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  margin-top:var(--sp-5);
}
.home-cols .panel{min-width:0}
.home-cols h3{margin-bottom:var(--sp-3)}
.home-cols .sec-lead{margin-top:0;max-width:none}

/* 套餐区里紧跟卡片组的说明面板 */
#plans .panel{margin-top:var(--sp-5)}
#plans .panel .sec-lead{max-width:none}
#plans .sec-head h3{font-size:clamp(19px,1.6vw,22px)}

/* 表格与说明区之间的呼吸 */
#routes .table-scroll + .home-cols{margin-top:var(--sp-5)}

/* --------------------------------------------------------------------------
   3. 窄屏
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  #server-status.server-status{grid-template-columns:minmax(0,1fr)}
  .home-cols{grid-template-columns:minmax(0,1fr)}
}