/* ==========================================================================
   KimiVPN — nodes.css
   线路页专属：首屏文案列 + 概览面板 / 线路类型卡 / 用途 tab / 地区徽章墙
   颜色、圆角、阴影一律引用 base.css 的 :root 令牌。
   ========================================================================== */

/* ========================== 首屏 ========================== */
.nodes-hero{
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  gap:44px;
  align-items:start;
}
.nodes-hero-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
}
.nodes-hero h1{margin:20px 0 18px;max-width:14em}
.nodes-hero .lede{max-width:560px}
.nodes-hero .btn-row{margin-top:26px}
.nodes-hero .trust{margin-top:22px}
.nodes-hero .flags{margin-top:18px}

.fact-panel{
  background:var(--panel);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-panel);
  padding:22px 24px;
  min-width:0;
}
.fact-panel h2{
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted-2);
}
.fact-list{margin-top:12px;display:grid}
.fact-list li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  padding:10px 0;
  border-bottom:1px dashed var(--border);
  font-size:14px;
  color:var(--muted);
  min-width:0;
}
.fact-list li:last-child{border-bottom:0}
.fact-list b{
  font-family:var(--font-display);
  font-weight:800;
  font-size:15px;
  letter-spacing:-.01em;
  color:var(--ink);
  white-space:nowrap;
  flex-shrink:0;
}
.fact-foot{
  margin-top:14px;
  font-size:12.5px;
  line-height:1.75;
  color:var(--muted-2);
}

/* ========================== 表格区补充 ========================== */
.nodes-note{
  margin-top:20px;
  font-size:13.5px;
  line-height:1.8;
  color:var(--muted-2);
}
.nodes-note .text-link{font-size:13.5px}
.line-group > h3 .badge{font-weight:600;letter-spacing:.01em}

/* ========================== 线路类型卡 ========================== */
.type-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  margin-top:30px;
  min-width:0;
}
.type-card{
  display:flex;
  flex-direction:column;
  gap:16px;
  background:var(--panel);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-soft);
  padding:24px;
  min-width:0;
}
.type-head{display:flex;align-items:center;gap:12px}
.type-mark{
  width:38px;height:38px;border-radius:11px;
  display:grid;place-items:center;flex-shrink:0;
}
.type-mark svg{
  width:20px;height:20px;
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.type-card h3{font-size:18px;letter-spacing:-.02em}
.type-iepl .type-mark{background:var(--accent-tint);color:var(--accent)}
.type-relay .type-mark{background:var(--warn-tint);color:var(--warn)}
.type-direct .type-mark{background:var(--success-tint);color:var(--success)}

.type-meta{margin:0;display:grid;gap:14px;min-width:0}
.type-meta > div{min-width:0}
.type-meta dt{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted-2);
}
.type-meta dd{
  margin:5px 0 0;
  font-size:14.5px;
  line-height:1.8;
  color:var(--muted);
}

/* ========================== 用途 tab ========================== */
.usecase{margin-top:28px;min-width:0}
.usecase .tabpanel{
  margin-top:18px;
  background:var(--panel);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-soft);
  padding:26px 28px;
  min-width:0;
}
.usecase h3{font-size:19px;margin-bottom:10px}
.usecase p{font-size:15.5px;line-height:1.85;color:var(--muted)}
.usecase ul{margin-top:16px;display:grid;gap:10px}
.usecase li{
  display:flex;
  gap:10px;
  font-size:14.5px;
  line-height:1.75;
  color:var(--muted);
  min-width:0;
}
.usecase li svg{
  width:16px;height:16px;flex-shrink:0;margin-top:4px;
  color:var(--accent);fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
}

/* ========================== 地区徽章墙 ========================== */
.region-wall{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:24px;
}
.region-wall .badge{
  background:var(--panel);
  color:var(--muted);
  box-shadow:0 0 0 1px var(--border-soft) inset;
  font-weight:600;
}
.region-wall .badge:hover{color:var(--accent)}

/* ========================== 响应式 ========================== */
@media (max-width:1024px){
  .nodes-hero{grid-template-columns:minmax(0,1fr);gap:32px}
  .type-grid{grid-template-columns:minmax(0,1fr)}
  .nodes-hero h1{max-width:none}
}
@media (max-width:768px){
  .usecase .tabpanel{padding:20px}
  .fact-panel{padding:18px 20px}
  .type-card{padding:20px}
}