/**
 * 同集群工具 pill 导航（DESIGN.md cluster-nav）
 */
.cluster-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: 0 0 var(--space-md);
}

.cluster-nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-raised);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}

.cluster-nav__link:hover {
  background: var(--color-surface-subtle);
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
  text-decoration: none;
}

.cluster-nav__link--active {
  background: var(--color-link);
  color: var(--color-surface-raised);
  border-color: var(--color-link);
}

.cluster-nav__link--active:hover {
  background: var(--color-accent-hover);
  color: var(--color-surface-raised);
  border-color: var(--color-accent-hover);
}

.cluster-nav--tabs {
  gap: 4px;
  padding: 4px;
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/**
 * 有集群导航时隐藏页内 hbflag，避免顶栏 + Tab + cluster-nav 三层并列。
 */
body:has(.cluster-nav) ul.nav-tabs.hbflag {
  display: none !important;
}

/**
 * 首页 / 目录页已有主搜索，隐藏全局工具条里的第二套搜索。
 */
body:has(.home-root) .site-global-toolbar,
body:has(.daohang-page) .site-global-toolbar {
  display: none;
}

/**
 * 猜你喜欢与关联工具同源时只保留一块。
 */
body:has(.tool-guess-like) .related-tools,
body:has(.tool-guess-like) .growth-more-tools,
body:has(.related-tools) .growth-more-tools {
  display: none !important;
}

.pro-tool-shell-badge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--color-warning-border, #fcd34d);
  border-radius: var(--radius-md, 12px);
  background: var(--color-warning-bg, #fffbeb);
  color: var(--color-warning-text, #78350f);
  font-size: 13px;
  line-height: 1.5;
}

.pro-tool-shell-badge__tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  background: var(--color-warning-bg, #fffbeb);
  border: 1px solid var(--color-warning-border, #fcd34d);
  color: var(--color-warning-text, #78350f);
}

.tool-guess-like {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-md, 12px);
  background: var(--color-surface-raised, #fff);
}

.tool-guess-like__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary, #0b1220);
  margin: 0 0 10px;
}

.tool-guess-like__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tool-guess-like__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--radius-sm, 8px);
  background: var(--color-surface-subtle, #f1f5f9);
  border: 1px solid var(--color-border, #e2e8f0);
  color: var(--color-link, #2563eb);
  font-size: 13px;
  text-decoration: none;
}

.tool-guess-like__links a:hover {
  background: var(--color-info-bg, #eff6ff);
  border-color: var(--color-info-border, #bfdbfe);
}