/* ==========================================================================
   VPNAY · nodes.css —— 线路列表页(servers.html)专属样式
   只声明本页新增的组件与页头装饰,不重复定义设计系统已有类。
   ========================================================================== */

/* ---------- 页头:线路拓扑描线装饰(纯装饰,aria-hidden) ---------- */
.nodes-topology{
  position:absolute;
  right:0;
  top:0;
  z-index:0;
  width:min(520px,44%);
  pointer-events:none;
}
.nodes-topology svg{width:100%;height:auto}
.page-head > .wrap{position:relative;z-index:1}
.page-head .btn-row{margin-top:26px}
.page-head .fact-strip{margin-top:30px}

/* ---------- 线路分组 ---------- */
.line-group{scroll-margin-top:calc(var(--header-h) + 84px)}
.line-group + .line-group{margin-top:44px}
.line-group > h3{font-size:19px;letter-spacing:-.01em}
.line-group > p{
  margin:10px 0 16px;
  max-width:62em;
  font-size:14.5px;
  line-height:1.8;
  color:var(--muted);
}
.group-jump{margin:20px 0 32px}

/* ---------- 线路类型说明 ---------- */
.type-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.type-grid > *{min-width:0}
.type-card{display:flex;flex-direction:column;gap:12px}
.type-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.type-head h3{font-size:18px}
.type-dot{flex:none;width:10px;height:10px;border-radius:50%;box-shadow:var(--reg-ring)}
.type-dot.is-iepl{background:var(--accent)}
.type-dot.is-relay{background:var(--warn)}
.type-dot.is-direct{background:var(--success)}
.type-card p{margin:0;font-size:14.5px;line-height:1.85;color:var(--muted)}
.type-card .fact-line{margin-top:auto}

/* ---------- 选线建议 ---------- */
.advice-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.advice-grid > *{min-width:0}
.advice-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:20px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-soft);
}
.advice-ico{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:var(--r-md);
  background:var(--accent-08);
  color:var(--accent);
}
.advice-ico svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.advice-card h3{font-size:16px}
.advice-card p{margin:0;font-size:14px;line-height:1.8;color:var(--muted)}
.advice-pick{
  margin-top:auto;
  padding-top:10px;
  border-top:1px dashed var(--border);
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--accent);
}

/* ---------- 覆盖地区徽章墙 ---------- */
.region-wall{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}
.region-badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:40px;
  padding:8px 16px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  box-shadow:0 1px 2px var(--ink-04);
  font-size:14px;
  font-weight:600;
  color:var(--ink);
}
.region-note{
  margin-top:20px;
  max-width:62em;
  font-size:14.5px;
  line-height:1.8;
  color:var(--muted);
}

/* ---------- 收尾入口 ---------- */
.nodes-cta{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  align-items:center;
  justify-content:space-between;
  margin-top:32px;
  padding:24px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-soft);
}
.nodes-cta p{margin:0;max-width:46em;font-size:14.5px;line-height:1.75;color:var(--muted)}
.nodes-cta .btn{flex-shrink:0;white-space:nowrap}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .nodes-topology{display:none}
}
@media (max-width:640px){
  .line-group + .line-group{margin-top:36px}
  .nodes-cta{padding:20px}
  .nodes-cta .btn-row{width:100%}
  .nodes-cta .btn{flex:1 1 auto}
}