/* ==========================================================================
   VPNDX — nodes.css
   线路 / 节点页专属样式。所有颜色、圆角、阴影一律引用 :root 令牌。
   ========================================================================== */

/* ------------------------------------------------------------ page hero */
.nodes-hero{
  position:relative;
  overflow-x:clip;
  max-width:100%;
  padding-top:52px;
  padding-bottom:36px;
}
.nodes-hero__glow{
  position:absolute;
  left:-10%;
  top:-70px;
  width:min(620px, 92%);
  height:340px;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(ellipse at 32% 42%, color-mix(in srgb, var(--accent) 13%, transparent) 0%, transparent 70%);
}
.nodes-hero .wrap{position:relative;z-index:1}
.nodes-title{
  margin:0 0 22px;
  font-size:clamp(34px, 4.4vw, 58px);
}
.nodes-lede{margin:0 0 22px}
.nodes-facts{margin:0 0 24px}
.nodes-note{
  margin:14px 0 0;
  font-size:13px;
  line-height:1.75;
  color:var(--muted);
  max-width:68em;
}

/* --------------------------------------------------------- region table */
.region-block{margin:0 0 36px}
.region-block:last-child{margin-bottom:0}
.region-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 14px;
  margin:0 0 12px;
}
.region-head h3{
  margin:0;
  font-size:19px;
}
.region-meta{
  font:600 11px/1 var(--font-mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.line-table{min-width:760px}
.line-table td:first-child{font-weight:600}
.line-table .col-stream{color:var(--muted)}

/* line-type tags (static facts, never numbers) */
.tag-line{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:3px 9px;
  border-radius:var(--r-sm);
  font:600 11px/1 var(--font-mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
  color:var(--text);
}
.tag-line--iepl{background:var(--candy-orange)}
.tag-line--relay{
  background:color-mix(in srgb, var(--accent) 14%, var(--panel));
  color:var(--accent-dark);
}
.tag-line--direct{background:var(--candy-blue)}

/* --------------------------------------------------- line-type explainer */
.type-grid{margin-top:8px}
.type-card h3{margin:0 0 10px;font-size:19px}
.type-card p{margin:0 0 14px;font-size:15px;line-height:1.7;color:var(--muted)}
.type-card dl{margin:0;display:grid;gap:12px}
.type-card dt{
  font:600 11px/1 var(--font-mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-dark);
}
.type-card dd{
  margin:5px 0 0;
  font-size:14px;
  line-height:1.65;
  color:var(--text);
}
.compare-title{
  margin:36px 0 12px;
  font-size:17px;
}
.compare-table{min-width:720px}
.compare-table td:first-child{font-weight:600;white-space:nowrap}

/* ------------------------------------------------------- pick-by-purpose */
.pick-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
.pick-grid > *{min-width:0}
.pick-card h3{margin:0 0 10px;font-size:18px}
.pick-card p{margin:0;font-size:15px;line-height:1.7;color:var(--muted)}

/* ------------------------------------------------------------ responsive */
@media (max-width:960px){
  .pick-grid{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width:768px){
  .nodes-hero{padding-top:34px;padding-bottom:26px}
  .nodes-title{font-size:clamp(28px, 7.4vw, 36px)}
  .nodes-hero__glow{height:240px;top:-40px}
  .pick-grid{grid-template-columns:1fr}
  .region-block{margin-bottom:28px}
  .compare-title{margin-top:28px}
}