/* ==========================================================================
   VPNQF · home.css
   Homepage-only styles. Everything else comes from base.css / components.css.
   ========================================================================== */

/* ---- 卖点台账收尾段 ---- */
.ledger-foot{
  max-width:74ch;
  margin:var(--space-6) 0 0;
  padding-top:var(--space-5);
  border-top:1px dashed var(--border);
  font-size:14.5px;
  line-height:1.8;
  color:var(--text-muted);
}

/* ---- 台账行内的附加块回到正文列 ---- */
.ledger-row > .ledger-extra{grid-column:2;}

/* ---- 区块尾部链接行 ---- */
.section-foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 24px;
  margin-top:var(--space-6);
}

/* ---- 线路状态条(数据由 servers.js 注入) ---- */
.status-block{
  margin:0 0 var(--space-6);
  overflow:hidden;
}

.status-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.status-head::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--border);
}

.server-status{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface-1);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}
.server-status:empty{display:none;}

.srv-row{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--surface-2);
  font-size:12.5px;
  line-height:1.4;
}

.srv-dot{
  display:block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--success);
  flex:none;
  animation:srvBreath 2.8s ease-in-out infinite;
}

.srv-flag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:50%;
  overflow:hidden;
  flex:none;
  background:var(--surface-1);
  box-shadow:inset 0 0 0 1px var(--ink-16);
}
.srv-flag svg{display:block;width:18px;height:18px;}

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

.srv-type{
  flex:none;
  padding:2px 7px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--bg-panel);
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.06em;
  color:var(--text-muted);
  white-space:nowrap;
}

.srv-ms{
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:700;
  color:var(--text);
  white-space:nowrap;
  flex:none;
}

.srv-bw{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--text-muted);
  white-space:nowrap;
  flex:none;
}

@keyframes srvBreath{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:.45;transform:scale(.78);}
}

/* ---- 节点说明与套餐建议 ---- */
.nodes-note,
.plan-advice{
  max-width:74ch;
  margin-top:var(--space-5);
}
.nodes-note p:last-child,
.plan-advice p:last-child{margin-bottom:0;}

/* ---- 流量包小标题 ---- */
.pack-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px 14px;
  margin:var(--space-7) 0 var(--space-4);
}
.pack-head h3{margin:0;}
.pack-note{
  font-size:13px;
  line-height:1.6;
  color:var(--text-muted);
}

/* ---- 响应式 ---- */
@media (max-width:900px){
  .server-status{grid-template-columns:minmax(0,1fr);}
}

@media (max-width:640px){
  .srv-name{white-space:normal;overflow:visible;}
  .server-status{padding:10px;}
}

@media (max-width:520px){
  .ledger-row > .ledger-extra{grid-column:1;}
}

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