/* =============================================================================
   VPNZM · nodes.css
   线路页专属布局:左文案右线路目录、分组线路表、线路类型 tab、选线建议。
   所有颜色/圆角/阴影引用 base.css 的 :root 令牌。
   ========================================================================== */

.nodes-hero{
  padding-top:34px;
  padding-bottom:52px;
}
.nodes-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:38px;
  align-items:center;
}
.nodes-hero-copy{min-width:0;text-align:left}
.nodes-h1{
  margin-top:14px;
  font-size:clamp(34px,5.2vw,64px);
  line-height:1.05;
  letter-spacing:-.03em;
}
.nodes-lede{
  margin-top:16px;
  max-width:58ch;
  font-size:16px;
  line-height:1.78;
  color:var(--text-muted);
}
.nodes-lede strong{color:var(--text);font-weight:700}
.nodes-hero .cta-row{justify-content:flex-start;margin-top:22px}
.nodes-hero .trust{justify-content:flex-start;margin-top:14px}
.nodes-hero-visual{position:relative;min-width:0}
.nodes-halo{
  position:absolute;
  z-index:0;
  width:300px;
  height:300px;
  right:-36px;
  top:-24px;
  border-radius:50%;
  background:radial-gradient(circle,var(--halo-amber) 0%,transparent 68%);
  pointer-events:none;
}
.route-board{
  position:relative;
  z-index:1;
  overflow:hidden;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-deck);
}
.route-board-bar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,var(--bg-panel) 0%,var(--bg-panel-2) 190%);
}
.route-board-title{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--text-muted);
}
.route-board-tag{
  margin-left:auto;
  padding:2px 8px;
  border-radius:var(--r-pill);
  background:var(--accent-ghost);
  border:1px solid var(--accent-line);
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.04em;
  white-space:nowrap;
}
.route-board-body{padding:16px}
.route-flow{
  display:flex;
  align-items:center;
  gap:6px;
  padding:12px;
  background:var(--bg-panel-2);
  border:1px dashed var(--border);
  border-radius:var(--r-md);
  overflow:hidden;
}
.flow-node{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex:none;
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--text-muted);
  white-space:nowrap;
}
.flow-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 3px var(--accent-ghost);
  flex:none;
}
.flow-exit .flow-dot{
  background:var(--success);
  box-shadow:0 0 0 3px var(--success-ghost);
}
.flow-link{
  flex:1;
  min-width:10px;
  height:1px;
  background:repeating-linear-gradient(90deg,var(--border) 0 4px,transparent 4px 8px);
}
.rb-list{display:grid;gap:6px;margin-top:14px}
.rb-row{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  padding:8px 10px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
}
.rb-region{
  flex:none;
  min-width:32px;
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--accent);
}
.rb-cities{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11.5px;
  color:var(--text);
}
.rb-chip{
  flex:none;
  margin-left:auto;
  padding:2px 7px;
  border-radius:var(--r-pill);
  border:1px solid var(--accent-line);
  background:var(--accent-ghost);
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:9px;
  white-space:nowrap;
}
.rb-chip.is-relay{
  border-color:var(--warn-ghost);
  background:var(--warn-ghost);
  color:var(--warn);
}
.rb-chip.is-direct{
  border-color:var(--success-ghost);
  background:var(--success-ghost);
  color:var(--success);
}
.route-board-foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 8px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--border);
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--text-muted);
}
.route-board-foot b{color:var(--text);font-weight:700}
.route-board-foot .sep{color:var(--border)}
.route-flags{
  justify-content:flex-start;
  margin-top:14px;
  padding-top:12px;
}
.nodes-band-wrap{padding-top:18px;padding-bottom:0}
.nodes-band{width:100%}

.nodes-body{padding-top:22px;padding-bottom:72px}
.nodes-sec{padding-top:44px}
.nodes-sec:first-of-type{padding-top:6px}
.nodes-sec h2{margin-top:6px;margin-bottom:12px}
.nodes-sec h3{margin-bottom:8px}
.nodes-p{
  max-width:80ch;
  font-size:14.5px;
  line-height:1.85;
  color:var(--text-muted);
}
.nodes-p + .nodes-p{margin-top:10px}
.nodes-p strong{color:var(--text);font-weight:700}
.nodes-sec .callout{margin-top:16px;max-width:80ch}
.region-wall{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}
.region-wall li{display:flex;min-width:0}
.table-note{
  margin-top:8px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.02em;
  color:var(--text-muted);
}
.data-table.is-wrap td{white-space:normal;word-break:keep-all}
.data-table.is-wrap th{white-space:nowrap}
.tag-iepl{color:var(--accent);border-color:var(--accent-line);background:var(--accent-ghost)}
.tag-relay{color:var(--warn);border-color:var(--warn-ghost);background:var(--warn-ghost)}
.tag-direct{color:var(--success);border-color:var(--success-ghost);background:var(--success-ghost)}
.stream-yes,.stream-part{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  color:var(--text-muted);
}
.stream-yes::before,.stream-part::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  flex:none;
  background:var(--success);
}
.stream-part::before{background:var(--warn)}
.type-panel{
  padding:24px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
}
.type-panel .nodes-p{max-width:76ch}
.type-panel .feature-fact{margin-top:14px}
.type-compare{margin-top:18px}
.pick-list{display:grid;gap:10px;margin-top:18px}
.pick-item{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:14px;
  padding:18px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-soft);
}
.pick-no{
  padding-top:3px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--accent);
}
.pick-body{min-width:0}
.pick-body h3{font-size:16px;margin-bottom:6px}
.pick-body p{font-size:13.5px;line-height:1.78;color:var(--text-muted)}
.pick-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.next-panel{
  margin-top:44px;
  padding:24px;
  background:var(--grad-panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-soft);
}
.next-panel .next-title{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--accent);
}
.next-panel p{margin-top:8px;font-size:13.5px;line-height:1.75;color:var(--text-muted);max-width:72ch}
.next-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.next-links .btn{flex-shrink:0;white-space:nowrap}

@media (max-width:980px){
  .nodes-hero-grid{grid-template-columns:1fr;gap:26px}
  .nodes-hero-copy{max-width:760px}
  .nodes-hero-visual{max-width:620px;margin-inline:auto}
  .nodes-halo{right:-20px;top:-18px}
}
@media (max-width:760px){
  .nodes-hero{padding-top:24px;padding-bottom:38px}
  .nodes-halo{display:none}
  .route-board-body{padding:14px}
  .route-flow{gap:4px;padding:10px}
  .flow-node{font-size:9.5px}
  .rb-cities{font-size:11px}
  .nodes-body{padding-bottom:52px}
  .nodes-sec{padding-top:34px}
  .pick-item{grid-template-columns:36px minmax(0,1fr);gap:10px;padding:16px}
}
@media (max-width:640px){
  .nodes-h1{font-size:34px}
  .nodes-lede{font-size:14.5px}
  .nodes-hero .cta-row{justify-content:stretch}
  .nodes-hero .cta-row .btn{width:100%;max-width:none}
  .nodes-hero .trust{font-size:11px}
  .route-board-bar{padding:10px 12px}
  .route-board-body{padding:12px}
  .route-flow{flex-wrap:wrap}
  .flow-link{display:none}
  .rb-row{flex-wrap:wrap}
  .rb-cities{white-space:normal}
  .rb-chip{margin-left:0}
  .type-panel{padding:18px}
  .next-panel{padding:18px}
}