.top-nav-pill {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; padding: 0 16px; flex-shrink: 0; position: relative;
}
.top-nav-pill::before {
  content: ""; position: absolute; inset: -6px -16px; z-index: -1;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(3, 8, 20, 0.85), rgba(3, 8, 20, 0.55));
  backdrop-filter: blur(14px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.top-nav-pill a, .top-nav-pill span {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 28px; padding: 0 7px; color: rgba(201, 214, 238, 0.82);
  font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: 0.01em;
  white-space: nowrap; text-decoration: none;
  transition: color 180ms ease, transform 180ms ease, text-shadow 180ms ease; cursor: pointer;
}
.top-nav-pill a::after, .top-nav-pill span::after {
  content: ""; position: absolute; left: 7px; right: 7px; bottom: -4px; height: 1.5px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(77, 171, 247, 0), rgba(77, 171, 247, 0.95), rgba(77, 171, 247, 0));
  transform: scaleX(0.2); transform-origin: center; opacity: 0;
  transition: transform 180ms ease, opacity 180ms ease;
}
.top-nav-pill a:hover, .top-nav-pill span:hover,
.top-nav-pill a.is-active, .top-nav-pill span.is-active {
  color: rgba(244, 249, 255, 0.96); transform: translateY(-1px);
  text-shadow: 0 0 14px rgba(77, 171, 247, 0.15);
}
.top-nav-pill a:hover::after, .top-nav-pill span:hover::after,
.top-nav-pill a.is-active::after, .top-nav-pill span.is-active::after {
  transform: scaleX(1); opacity: 1;
}
@media (max-width: 1080px) { .top-nav-pill { display: none; } }

/* === 白色主题适配 === */
html[data-theme='light'] .top-nav-pill::before {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

html[data-theme='light'] .top-nav-pill a,
html[data-theme='light'] .top-nav-pill span {
  color: #475569 !important;
}

html[data-theme='light'] .top-nav-pill a:hover,
html[data-theme='light'] .top-nav-pill a.is-active,
html[data-theme='light'] .top-nav-pill span:hover,
html[data-theme='light'] .top-nav-pill span.is-active {
  color: #0f172a !important;
  text-shadow: none !important;
}

html[data-theme='light'] .top-nav-pill a::after,
html[data-theme='light'] .top-nav-pill span::after {
  background: linear-gradient(90deg, rgba(14, 165, 233, 0.3), rgba(14, 165, 233, 0.6), rgba(14, 165, 233, 0.3)) !important;
}