/* VPNEQ · 全球节点页(network.html)专属样式层
   只放本页独有结构:页头带、地区徽章墙、线路类型三卡、选线九宫格、收尾条。
   基础令牌 / 按钮 / 卡片 / 表格 / 目录条一律复用 base.css 与 components.css。 */

:root{
  /* 旗帜配色(内容型色值,集中在此,组件内不散落) */
  --flag-red:#C0392B;
  --flag-blue:#1F4E9C;
  --flag-navy:#12306B;
  --flag-white:#FCF8F0;
  --flag-yellow:#E8C33A;
  --flag-green:#1F7A4C;
  --flag-black:#241C15;
  --flag-orange:#D97B29;
}

.fl-red{fill:var(--flag-red)}
.fl-blue{fill:var(--flag-blue)}
.fl-navy{fill:var(--flag-navy)}
.fl-white{fill:var(--flag-white)}
.fl-yellow{fill:var(--flag-yellow)}
.fl-green{fill:var(--flag-green)}
.fl-black{fill:var(--flag-black)}
.fl-orange{fill:var(--flag-orange)}

/* ---------------- 页头 ---------------- */
.nd-head{
  position:relative;overflow-x:clip;
  background:linear-gradient(180deg,var(--hero-top) 0%,var(--hero-bot) 100%);
  border-bottom:1px solid var(--border);
}
.nd-head::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--grain);opacity:.045;mix-blend-mode:multiply;
}
.nd-head .wrap{position:relative;padding-top:52px;padding-bottom:52px}
.nd-head h1{
  margin-top:16px;font-weight:900;letter-spacing:-.03em;
  font-size:clamp(30px,4.4vw,52px);line-height:1.14;max-width:22ch;
}
.nd-head .lead{margin-top:16px;font-size:17.5px;color:var(--text-muted);max-width:64ch}
.nd-head .lead strong{color:var(--text);font-weight:700}
.nd-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px}
.nd-cta .btn{flex-shrink:0;white-space:nowrap}
.nd-note{font-size:12.5px;line-height:1.5;color:var(--text-muted);max-width:24ch}
.nd-facts{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px}
.nd-facts li{display:flex;align-items:flex-start;gap:8px;font-size:14px;color:var(--text-muted)}
.nd-facts .ck{
  width:17px;height:17px;border-radius:50%;background:var(--accent);color:var(--text);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;
}
.nd-facts .ck svg{width:10px;height:10px}
.nd-facts b{color:var(--text);font-weight:700}
.region-badges{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:28px;padding-top:24px;border-top:1px solid var(--border-soft);
}

/* ---------------- 正文骨架 ---------------- */
.page-body{padding-top:28px;padding-bottom:72px}
.nd-sec{padding-top:44px;padding-bottom:44px;border-top:1px solid var(--border-soft)}
.nd-sec:first-of-type{border-top:0;padding-top:8px}
.nd-sec h2{font-size:clamp(22px,2.7vw,30px);font-weight:900;letter-spacing:-.025em}
.nd-sec h3{font-size:17px;font-weight:800;margin-top:26px;letter-spacing:-.02em}
.nd-sec p{margin-top:14px;font-size:15.5px;line-height:1.72;color:var(--text);max-width:80ch}
.nd-sec .table-scroll{margin-top:22px}
.nd-sec .caption{margin-top:14px}
.nd-hint{
  margin-top:18px;padding:14px 18px;border-left:3px solid var(--accent);
  background:var(--bg-panel);border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.nd-hint p{margin:0;font-size:14.5px;color:var(--text)}

/* ---------------- 线路类型三卡 ---------------- */
.type-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:20px;margin-top:26px}
.type-grid > *{min-width:0}
.type-card{
  display:flex;flex-direction:column;gap:14px;
  background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r-md);
  padding:22px;box-shadow:var(--shadow-card),inset 0 1px 0 var(--paper-line);
}
.type-card h3{margin-top:0;font-size:17px;font-weight:800}
.type-card h3::before{
  content:"";display:inline-block;width:10px;height:10px;border-radius:3px;
  background:var(--accent);margin-right:9px;vertical-align:middle;
}
.type-card.is-transit h3::before{background:var(--warn)}
.type-card.is-direct h3::before{background:var(--text-muted)}
.type-card dl{margin:0;display:flex;flex-direction:column;gap:12px}
.type-card dt{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--text-muted);
}
.type-card dd{margin:4px 0 0;font-size:14.5px;line-height:1.68;color:var(--text)}

/* ---------------- 选线建议九宫格 ---------------- */
.pick-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:var(--r-md);
  overflow:hidden;margin-top:26px;
}
.pick-grid > *{min-width:0}
.pick-cell{background:var(--bg-panel);padding:22px;transition:background var(--dur-fast)}
.pick-cell:hover{background:var(--bg-panel2)}
.pick-cell h3{margin:0 0 8px;font-size:16px;font-weight:800}
.pick-cell h3::before{
  content:"";display:inline-block;width:14px;height:2px;border-radius:2px;
  background:var(--accent);margin-right:9px;vertical-align:middle;
}
.pick-cell p{margin:0;font-size:14.5px;line-height:1.68;color:var(--text-muted);max-width:none}

/* ---------------- 收尾条 ---------------- */
.nd-tail{
  margin-top:36px;padding:24px;display:flex;flex-wrap:wrap;gap:18px 24px;
  align-items:center;justify-content:space-between;
  background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:var(--shadow-card),inset 0 1px 0 var(--paper-line);
}
.nd-tail p{margin:0;font-size:15px;line-height:1.6;color:var(--text-muted);max-width:58ch}
.nd-tail .nd-cta{margin-top:0}

/* ---------------- 响应式 ---------------- */
@media (max-width:900px){
  .nd-head h1{max-width:none}
  .nd-sec p{max-width:none}
}
@media (max-width:768px){
  .nd-head .wrap{padding-top:34px;padding-bottom:34px}
  .nd-head .lead{font-size:16px}
  .nd-sec{padding-top:30px;padding-bottom:30px}
  .nd-tail{flex-direction:column;align-items:flex-start}
  .nd-note{max-width:none}
}
@media (max-width:640px){
  .nd-head h1{font-size:30px}
  .type-card,.pick-cell{padding:18px}
  .nd-facts{flex-direction:column;gap:8px}
}