/* ============================================================
   VPNWS — nodes.css
   服务器 / 线路页专属:装饰层、地区跳转、线路类型卡、
   选线建议卡、覆盖地区墙、对比表间距
   ============================================================ */

/* ---------- 装饰层:统一裁切,装饰绝不撑出横向滚动 ---------- */
.decor-layer{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.hero-orb{
  position:absolute;
  left:50%;
  top:-150px;
  width:min(760px,118vw);
  height:520px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 32%,rgba(184,81,42,.10) 0%,rgba(184,81,42,.03) 46%,rgba(184,81,42,0) 74%);
}
.decor-orb{
  position:absolute;
  width:300px;
  height:300px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(184,81,42,.10) 0%,rgba(184,81,42,0) 70%);
}
.decor-orb--l{left:-130px;top:60px}
.decor-orb--r{right:-140px;top:120px}
.decor-ring{
  position:absolute;
  width:210px;
  height:210px;
  border-radius:50%;
  border:1px dashed var(--border-strong);
  opacity:.75;
}
.decor-ring--l{left:-70px;bottom:60px}
.decor-ring--r{right:-70px;top:70px}

/* 首屏涂鸦:借 .doodle 基础样式,位置按本页重排 */
.nodes-hero .doodle-l{left:1%;top:150px;width:130px;height:122px}
.nodes-hero .doodle-r{right:1%;top:250px;width:130px;height:98px}

/* 分区装饰分隔线 */
.rule-line{
  display:block;
  width:min(420px,78%);
  height:20px;
  margin:var(--sp-7) auto 0;
  color:var(--accent);
  opacity:.5;
}

/* ---------- 首屏:事实带四格 + 地区跳转 ---------- */
.nodes-hero .facts{grid-template-columns:repeat(4,1fr)}

.region-chips{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  position:relative;
  z-index:3;
}
.region-chips a{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 14px;
  border-radius:var(--r-pill);
  border:1px solid var(--border);
  background:var(--bg-panel);
  font-size:13.5px;
  font-weight:600;
  color:var(--text-muted);
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
  box-shadow:var(--hl-edge);
  transition:transform .16s,border-color .16s,color .16s;
}
.region-chips a:hover{
  transform:translateY(-2px);
  border-color:var(--accent);
  color:var(--accent-dark);
}

/* ---------- 线路目录:分组小标题与表格间距 ---------- */
.lines-block{margin-top:var(--sp-7)}
.lines-block h3{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:var(--sp-3);
}
.lines-block h3 .flag{width:22px;height:15px}
.lines-block h3 .flag svg{width:22px;height:15px}
.lines-block > p{
  max-width:72ch;
  margin-bottom:var(--sp-4);
  color:var(--text-muted);
  font-size:16px;
}

/* ---------- 线路类型三卡 ---------- */
.lt-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--sp-5);
  align-items:stretch;
}
.lt-card{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  background:var(--bg-panel-2);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:var(--sp-6) var(--sp-5);
  min-width:0;
  box-shadow:var(--hl-edge);
  transition:transform .16s,box-shadow .16s;
}
.lt-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)}
.lt-card > .chip{align-self:flex-start}
.lt-card h3{font-size:20px;letter-spacing:-.02em}
.lt-card dl{display:flex;flex-direction:column;gap:var(--sp-3)}
.lt-row{display:flex;flex-direction:column;gap:3px;min-width:0}
.lt-row dt{
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--text-soft);
}
.lt-row dd{
  font-size:14.5px;
  line-height:1.75;
  color:var(--text-muted);
  overflow-wrap:anywhere;
}
.lt-compare{margin-top:var(--sp-6)}

/* ---------- 选线建议卡 ---------- */
.pick-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--sp-4);
}
.pick-card{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:var(--sp-5);
  min-width:0;
  box-shadow:var(--hl-edge);
  transition:transform .16s,box-shadow .16s;
}
.pick-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft)}
.pick-card h3{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:17px;
  line-height:1.4;
}
.pick-card h3 svg{width:19px;height:19px;color:var(--accent);flex-shrink:0}
.pick-card p{font-size:14.5px;line-height:1.78;color:var(--text-muted)}
.pick-card .chip{margin-top:auto;align-self:flex-start}

/* ---------- 覆盖地区墙 / 核对说明 ---------- */
.cov-title{
  margin-top:var(--sp-7);
  margin-bottom:var(--sp-4);
  font-size:20px;
}
.cov-wall{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.cov-wall li{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:0 13px;
  border-radius:var(--r-pill);
  border:1px solid var(--border);
  background:var(--bg-panel);
  font-size:13.5px;
  font-weight:600;
  color:var(--text);
  max-width:100%;
  overflow:hidden;
  box-shadow:var(--hl-edge);
}

#verify .panel p+p{margin-top:var(--sp-4)}
#verify .callout{margin-top:var(--sp-5)}

/* ---------- FAQ 尾部 ---------- */
.faq-more{margin-top:var(--sp-5)}

/* ---------- 断点 ---------- */
@media (max-width:960px){
  .nodes-hero .facts{grid-template-columns:repeat(2,1fr)}
  .lt-grid{grid-template-columns:1fr}
  .pick-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .decor-orb,.decor-ring{display:none}
  .rule-line{margin-top:var(--sp-6)}
}
@media (max-width:640px){
  .pick-grid{grid-template-columns:1fr}
  .region-chips a{font-size:13px;padding:0 12px}
  .lines-block{margin-top:var(--sp-6)}
  .cov-title{margin-top:var(--sp-6)}
}