/* ============================================================
   VPNTea · home.css —— 首页专属样式
   Hero 装置细节 / 线路状态列表 / 卖点尾注 / why 网格 / 区块尾链
   ============================================================ */

/* ---------- Hero 装置内部(base.css 之外的补充) ---------- */
.pour-ln{
  stroke:var(--accent);
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-dasharray:7 4;
}
.pour-glow{
  fill:var(--accent);
  opacity:.14;
}
.cup-mouth{
  fill:var(--bg-panel-2);
  stroke:var(--ink);
  stroke-width:1.3;
}
.saucer{fill:var(--bg)}
.rip{
  fill:none;
  stroke:var(--accent);
  stroke-width:1.4;
}
.sig-ln{
  stroke:var(--accent);
  stroke-width:1.6;
  stroke-linecap:round;
}
.flag-badge{
  fill:none;
  stroke:var(--accent);
  stroke-width:1.3;
}
.f-red{fill:var(--flag-red)}
.f-blue{fill:var(--flag-blue)}
.f-wht{fill:var(--flag-white)}

/* ---------- 线路状态(servers.js 动态注入) ---------- */
.server-status{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 14px;
  margin-bottom:26px;
}
.server-status>*{min-width:0}
.server-status:empty{display:none}
.srv-row{
  display:flex;align-items:center;gap:10px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:11px 16px;
  min-width:0;
}
.srv-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--success);
  flex-shrink:0;
  animation:srv-breathe 2.4s ease-in-out infinite;
}
@keyframes srv-breathe{
  0%,100%{opacity:1}
  50%{opacity:.35}
}
@media (prefers-reduced-motion:reduce){
  .srv-dot{animation:none}
}
.srv-flag{
  font-size:15px;line-height:1;flex-shrink:0;
  font-family:var(--font-mono);
}
.srv-name{
  font-weight:600;font-size:13.5px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-width:0;
}
.srv-type{
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;
  letter-spacing:.04em;
  border:1px solid var(--accent);
  color:var(--accent-dark);
  border-radius:var(--r-s);
  padding:1px 7px;
  flex-shrink:0;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.srv-ms{
  margin-left:auto;
  font-family:var(--font-mono);font-size:12.5px;font-weight:600;
  color:var(--accent-dark);
  flex-shrink:0;
}
.srv-bw{
  font-family:var(--font-mono);font-size:12px;
  color:var(--muted);
  flex-shrink:0;
}

/* ---------- 区块尾部说明 + 尾链 ---------- */
.line-foot,.plan-foot,.blog-foot{
  margin-top:26px;
}
.line-foot p,.plan-foot p{
  color:var(--muted);
  font-size:14.5px;line-height:1.85;
  max-width:820px;
  margin-bottom:14px;
}
.line-more{
  display:inline-flex;align-items:center;gap:6px;
  font-size:14.5px;font-weight:700;
  color:var(--accent-dark);
  transition:color .15s;
}
.line-more:hover{color:var(--ink)}
.blog-foot{text-align:left}

/* ---------- why 网格(2×2 非对称留白) ---------- */
.why-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.why-grid>*{min-width:0}
.why-cell{
  padding:26px 26px 24px;
}
.why-cell h3{margin-bottom:10px}
.why-cell h3::before{
  content:"—";
  color:var(--accent);
  margin-right:8px;
  font-weight:400;
}
.why-cell p{
  color:var(--muted);
  font-size:14.5px;line-height:1.85;
}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .why-grid{grid-template-columns:1fr}
  .server-status{grid-template-columns:1fr}
}
@media (max-width:640px){
  .srv-bw{display:none}
  .why-cell{padding:22px 18px 20px}
}