/* ==========================================================================
   VPNBu · nodes.css
   服务器节点页专属:首屏排版 / 地区徽章墙 / 线路区块 / 线路类型卡 /
   选线建议面板 / 简化旗面填色令牌
   ========================================================================== */

/* ------------------------------------------------------------- 首屏 */
.node-hero{text-align:center;padding-top:calc(var(--sec-y) * .85)}
.node-hero .eyebrow{margin-bottom:18px}
.node-hero h1{max-width:920px;margin:0 auto}
.node-hero .lead{max-width:740px;margin:18px auto 0;font-size:17px}
.node-hero .cta-row{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
  margin:26px 0 22px;
}
.node-hero .trust{max-width:780px;margin:0 auto}

/* --------------------------------------------------- 地区徽章墙 */
.geo-wall{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin:0 0 14px;
}
.geo-wall span{
  display:inline-flex;align-items:center;gap:8px;
  min-height:34px;padding:6px 15px;border-radius:var(--r-pill);
  background:var(--bg-panel);border:1px solid var(--border);
  font-size:13.5px;font-weight:600;color:var(--text-muted);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.geo-wall span::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--accent);flex:0 0 7px;
}
.geo-note{
  text-align:center;font-size:13px;color:var(--text-faint);
  margin:0;line-height:1.7;
}

/* --------------------------------------------------------- 线路区块 */
.route-block{margin:0 0 42px;min-width:0}
.route-block:last-child{margin-bottom:0}
.route-block h2{margin:0 0 8px}
.route-block .route-sub{
  margin:0 0 18px;color:var(--text-muted);font-size:15px;max-width:760px;
}

/* ----------------------------------------------------- 线路类型卡 */
.lt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.lt-card{
  position:relative;min-width:0;
  background:var(--bg-panel);border:1px solid var(--border);
  border-radius:var(--r-card);padding:24px 22px 20px;
  box-shadow:inset 0 1px 0 var(--hi-line),0 24px 46px -26px var(--accent-shadow);
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.lt-card h3{margin:12px 0 4px}
.lt-card .lt-tagline{
  margin:0 0 14px;font-size:13px;font-weight:700;
  color:var(--accent-dark);letter-spacing:.01em;
}
.lt-card p{color:var(--text-muted);font-size:14.5px;line-height:1.72;margin:0 0 12px}
.lt-card ul{display:grid;gap:9px;margin:14px 0 0}
.lt-card li{display:flex;gap:9px;font-size:14px;color:var(--text-muted);line-height:1.6}
.lt-card li svg{width:16px;height:16px;flex:0 0 16px;margin-top:3px;color:var(--accent)}
.lt-cost-row{margin:16px 0 0}
.lt-cost{
  display:inline-flex;align-items:center;
  min-height:26px;padding:3px 12px;border-radius:var(--r-pill);
  font-size:12px;font-weight:700;letter-spacing:.02em;
}
.lt-cost.c-high{background:var(--accent-soft);color:var(--accent-dark)}
.lt-cost.c-mid{background:var(--warn-soft);color:var(--warn-ink)}
.lt-cost.c-low{background:var(--success-soft);color:var(--success)}

/* ------------------------------------------------------- 选线面板 */
.pick-panel{max-width:860px;margin:0 auto}
.pick-panel h3{margin:0 0 12px}
.pick-panel p{color:var(--text-muted);font-size:15px;line-height:1.78}
.pick-list{display:grid;gap:12px;margin:18px 0 0}
.pick-list li{
  display:flex;gap:12px;align-items:flex-start;
  font-size:14.5px;color:var(--text-muted);line-height:1.65;
  padding:12px 14px;border-radius:var(--r-panel);
  background:var(--bg-panel3);border:1px solid var(--border);
}
.pick-list li .route-type{flex:0 0 auto;margin-top:2px}

/* ------------------------------------------- 简化旗面填色令牌引用 */
.flag-defs{position:absolute;width:0;height:0;overflow:hidden}
.f-white{fill:var(--flag-white)}
.f-red{fill:var(--flag-red)}
.f-blue{fill:var(--flag-blue)}
.f-navy{fill:var(--flag-navy)}
.f-ink{fill:var(--text)}
.f-warn{fill:var(--warn)}
.f-green{fill:var(--success)}
.f-soft{fill:var(--mist)}
.s-white{stroke:var(--flag-white);fill:none}
.s-red{stroke:var(--flag-red);fill:none}
.s-blue{stroke:var(--flag-blue);fill:none;stroke-width:1}

/* ------------------------------------------------------------ 响应式 */
@media (max-width:980px){
  .lt-grid{grid-template-columns:1fr}
}
@media (max-width:768px){
  .node-hero .lead{font-size:16px}
  .geo-wall{justify-content:flex-start}
  .geo-note{text-align:left}
}
@media (max-width:640px){
  .node-hero .cta-row{flex-direction:column;align-items:center}
  .node-hero .cta-row .btn{width:100%;max-width:320px}
  .pick-list li{flex-direction:column;gap:8px}
}