/* ==========================================================================
   Sveev AI · 顶部悬浮导航（双行结构，版式参考「腾讯云 · 开发者社区」）
   --------------------------------------------------------------------------
   约定：
   1. 全部类名统一使用 tb2- 前缀（含 .tb2-item / .tb2-link / .tb2-caret /
      .tb2-drop / .tb2-drop-link），不再复用通用 .nav-* 类名，
      避免与页面级 bootstrap 的 .nav-link 等同名类冲突。
   2. 交互钩子（login.js 已同步兼容新旧类名）：
      .tb2-item[data-nav] / .tb2-link[data-nav-trigger] / .tb2-drop[data-nav-drop]
      .user-nav / #userNav / [data-user-trigger] / [data-user-dropdown]
      .mobile-hamburger / .mobile-member-btn / .menu-drawer / .member-drawer
   3. 断点：
      ≥1201px 完整双行；
      1200px  收窄间距与搜索框；
      1040px  隐藏搜索框，保留栏目与「发布」；
      ≤960px  切移动端：只留「品牌 + 会员/汉堡」，栏目进既有右侧抽屉。
   ========================================================================== */

/* ---------- 容器：sticky 悬浮（在文档流内，不遮挡内容） ---------- */
.topbar.tb2 {
  position: sticky;
  top: 0;
  z-index: 1100;
  padding: 0;
  background: transparent;
}

.tb2-wrap {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
}

/* ---------- 第一行：品牌 + 频道 + 辅助入口 + 登录/注册 ---------- */
.tb2-strip {
  background: rgba(247, 248, 252, 0.9);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid rgba(31, 35, 64, 0.06);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.tb2-strip__row {
  height: 52px;
  gap: 12px;
}
.tb2 .brand-name {
  font-size: 18px;
}
.tb2-divider {
  flex: none;
  width: 1px;
  height: 16px;
  background: rgba(31, 35, 64, 0.16);
}
.tb2-channel {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-sub);
  white-space: nowrap;
}
.tb2-strip__links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.tb2-strip__link {
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--text-sub);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}
.tb2-strip__link:hover {
  color: var(--accent);
  background: rgba(109, 93, 246, 0.08);
}

/* 登录/注册 + 用户信息：现位于第二行右侧，适配主栏目行高与风格 */
.tb2 .top-user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 0;
}
.tb2 .top-login-btn {
  height: 36px;
  padding: 0 20px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: var(--accent);
  box-shadow: none;
  white-space: nowrap;
}
.tb2 .top-login-btn:hover {
  background: #5a49e8;
  transform: none;
  box-shadow: 0 8px 20px rgba(109, 93, 246, 0.28);
}
/* 用户信息按钮：与第二行白底协调，去掉厚重阴影，统一为简洁描边风格 */
.tb2 .user-nav__btn {
  height: 36px;
  padding: 0 10px 0 4px;
  border-radius: 4px;
  background: #fff;
  border: 1px solid rgba(31, 35, 64, 0.12);
  box-shadow: none;
  transition: border-color 0.2s, background 0.2s;
}
.tb2 .user-nav__btn:hover,
.tb2 .user-nav.is-open .user-nav__btn {
  background: rgba(109, 93, 246, 0.06);
  border-color: var(--accent);
  box-shadow: none;
}
.tb2 .user-nav__btn .avatar {
  width: 26px;
  height: 26px;
  font-size: 12px;
}
.tb2 .user-nav__name {
  font-size: 14px;
  color: var(--text-main);
}

/* ---------- 第二行：主栏目 + 登录/用户信息 ---------- */
.tb2-main {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid rgba(31, 35, 64, 0.08);
  transition: box-shadow 0.3s ease;
}
.tb2-main__row {
  height: 58px;
  gap: 18px;
}

/* 滚动后：加强「悬浮」层次 */
.tb2.is-stuck .tb2-main {
  box-shadow: 0 10px 30px rgba(31, 35, 64, 0.1);
}
.tb2.is-stuck .tb2-strip {
  background: rgba(247, 248, 252, 0.96);
}

/* ---------- 主栏目（专属 tb2-* 类名，与 bootstrap .nav-link 等通用类零冲突） ---------- */
.tb2-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
/* 基础结构样式（原 components.css 的 .nav-item/.nav-link/.nav-drop/.nav-caret，
   因与页面级 CSS 存在同名冲突，迁移至此并更名，仅作用于顶栏） */
.tb2-item {
  position: relative;
}
.tb2-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.tb2-caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.2s;
}
.tb2-item.is-open .tb2-caret {
  transform: rotate(180deg);
}
.tb2-drop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 190px;
  background: var(--nx-card, #fff);
  border: 1px solid var(--nx-border, rgba(0, 0, 0, 0.08));
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(20, 30, 60, 0.14);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 300;
}
.tb2-item.is-open .tb2-drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.tb2-drop a {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--nx-text, #1b2436);
  text-decoration: none;
  transition: all 0.15s;
}
.tb2-drop a:hover {
  background: var(--nx-accent-soft, rgba(76, 111, 255, 0.08));
  color: var(--nx-accent, #4c6fff);
}
.tb2 .tb2-link {
  position: relative;
  height: 58px;
  padding: 0 14px;
  border-radius: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-main);
  background: transparent;
}
.tb2 .tb2-link:hover {
  color: var(--accent);
  background: rgba(109, 93, 246, 0.06);
}
.tb2 .tb2-item.is-open > .tb2-link {
  color: var(--accent);
  background: rgba(109, 93, 246, 0.08);
}
.tb2 .tb2-caret {
  margin-left: 2px;
}
.tb2-nav__link.is-current {
  color: var(--accent);
  font-weight: 600;
}
.tb2-nav__link.is-current::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--accent);
}

/* NEW 角标（贴在栏目右上角） */
.tb2-new {
  position: absolute;
  top: 9px;
  right: 0;
  height: 14px;
  line-height: 14px;
  padding: 0 4px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #fff;
  background: linear-gradient(135deg, #ff5f6d, #ff2d55);
  box-shadow: 0 2px 6px rgba(255, 45, 85, 0.35);
  pointer-events: none;
}

/* 下拉面板：桌面端居中于栏目，且不被两层容器裁剪 */
.tb2 .tb2-drop {
  top: calc(100% + 6px);
  left: 50%;
  padding: 6px;
  border-radius: 10px;
  transform: translate(-50%, -6px);
}
.tb2 .tb2-item.is-open .tb2-drop {
  transform: translate(-50%, 0);
}
.tb2 .tb2-drop.tb2-drop-right {
  left: auto;
  right: 0;
  transform: translateY(-6px);
}
.tb2 .tb2-item.is-open .tb2-drop.tb2-drop-right {
  transform: translateY(0);
}

/* ---------- 搜索框 ---------- */
.tb2-main__right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex-shrink: 0;
}
.tb2-search {
  display: flex;
  align-items: center;
  width: 280px;
  height: 36px;
  padding: 0 4px 0 12px;
  border: 1px solid rgba(31, 35, 64, 0.14);
  border-radius: 4px;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.tb2-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(109, 93, 246, 0.12);
}
.tb2-search__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text-main);
  -webkit-appearance: none;
  appearance: none;
}
.tb2-search__input::placeholder {
  color: #9aa0b4;
}
.tb2-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.tb2-search__btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #8a90a2;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.tb2-search__btn:hover {
  color: var(--accent);
  background: rgba(109, 93, 246, 0.08);
}

/* ---------- 发布（复用 nav-item 下拉钩子，做成描边按钮） ---------- */
.tb2 .tb2-publish {
  height: 36px;
  padding: 0 14px;
  gap: 6px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: #fff;
  color: var(--accent);
  font-size: 14px;
}
.tb2 .tb2-publish:hover,
.tb2 .tb2-item.is-open > .tb2-publish {
  background: rgba(109, 93, 246, 0.08);
  color: var(--accent);
}
.tb2-publish__plus {
  font-size: 15px;
  line-height: 1;
}

/* ---------- 键盘可达性 ---------- */
.tb2 .tb2-link:focus-visible,
.tb2-strip__link:focus-visible,
.tb2-search__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 6px;
}

/* ---------- 平板 ---------- */
@media (max-width: 1200px) {
  .tb2-wrap {
    padding: 0 20px;
  }
  .tb2 .tb2-link {
    padding: 0 10px;
    font-size: 14.5px;
  }
  .tb2-nav__link.is-current::after {
    left: 10px;
    right: 10px;
  }
  .tb2-search {
    width: 190px;
  }
}

@media (max-width: 1040px) {
  .tb2-search {
    display: none;
  }
}

/* ---------- 移动端：与站点既有顶栏策略保持一致（栏目收进右侧抽屉） ---------- */
@media (max-width: 960px) {
  .tb2-main {
    display: none;
  }
  .tb2-strip__row {
    height: 60px;
    gap: 10px;
  }
  .tb2-strip__row .brand {
    margin-right: auto;
  }
  .tb2-strip__links {
    display: none;
  }
  .tb2 .brand-name {
    font-size: 17px;
  }
  .tb2-divider {
    height: 14px;
  }
  .tb2-channel {
    font-size: 14px;
  }
  .tb2.is-stuck .tb2-strip {
    box-shadow: 0 8px 24px rgba(31, 35, 64, 0.1);
  }
}

@media (max-width: 640px) {
  .tb2-wrap {
    padding: 0 14px;
  }
  .tb2-divider,
  .tb2-channel {
    display: none;
  }
}

/* 尊重系统「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
  .tb2-strip,
  .tb2-main,
  .tb2 .tb2-drop,
  .tb2-strip__link {
    transition: none;
  }
}