/* =============================================================
   VPNEM —— home.css
   首页专属样式:线路状态网格(servers.js 注入)、线路筛选、
   平台图标细节、区块内部间距
   ============================================================= */

/* -------------------------------------------------------------
   1. 线路状态(servers.js 动态注入;容器留在文档流内,不覆盖后文)
   ------------------------------------------------------------- */
.server-status{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  max-width:100%;
  overflow:hidden;
}
.server-status:empty{display:none}

.srv-row{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:10px 14px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
}

.srv-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--success);
  flex:none;
  animation:srv-breathe 2.6s ease-in-out infinite;
}
@keyframes srv-breathe{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.42;transform:scale(.8)}
}

.srv-flag{
  width:20px;
  height:14px;
  border-radius:2.5px;
  box-shadow:0 0 0 1px var(--border);
  flex:none;
  object-fit:cover;
}

.srv-name{
  min-width:0;
  font-size:14px;
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.srv-type{
  flex:none;
  padding:2px 7px;
  border:1px solid var(--border);
  border-radius:var(--r-xs);
  background:var(--white);
  font-family:var(--font-mono);
  font-size:11px;
  line-height:1.4;
  color:var(--muted);
  white-space:nowrap;
}

.srv-ms{
  flex:none;
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--muted);
}

.srv-bw{
  flex:none;
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--text);
}

/* -------------------------------------------------------------
   2. 线路筛选按钮组(home.js 配套)
   ------------------------------------------------------------- */
.filter-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:16px;
}
.filter-btn{
  min-height:34px;
  padding:0 14px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--tint-white-70);
  color:var(--muted);
  font-size:13.5px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
}
.filter-btn:hover{background:var(--white);color:var(--text)}
.filter-btn[aria-pressed="true"]{
  border-color:var(--accent);
  background:var(--white);
  color:var(--accent);
}

/* -------------------------------------------------------------
   3. 平台图标细节(Linux 剪影用 token 上色,不写死颜色)
   ------------------------------------------------------------- */
.i-penguin .pg-body{fill:currentColor}
.i-penguin .pg-belly{fill:var(--bg-panel)}
.i-penguin .pg-eye{fill:currentColor}
.i-penguin .pg-beak{fill:var(--accent-2)}

/* -------------------------------------------------------------
   4. 区块内部间距
   ------------------------------------------------------------- */
.versus + .sched{margin-top:52px}

.sec-note{
  margin-top:20px;
  max-width:78ch;
  font-size:15.5px;
  line-height:1.72;
  color:var(--muted);
}

.more-row{margin-top:26px}

/* -------------------------------------------------------------
   5. 响应式
   ------------------------------------------------------------- */
@media (max-width:960px){
  .server-status{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:768px){
  .versus + .sched{margin-top:36px}
  .srv-bw{margin-left:0}
  .srv-row{flex-wrap:wrap}
}