/**
 * 顶部导航条样式（学术发现频道 · 提取自 discover/index.php）
 *
 * CSS 变量（需在引用页面中定义或由 PHP 动态输出）：
 *   --hh-bg    : 导航背景色（默认 #ffffff）
 *   --hh-fg    : 导航文字色（默认 #1f2937）
 *   --hh-h     : 导航高度  （默认 56px）
 *   --accent   : 主题/强调色（默认 #6366f1）
 */

/* ══════════════════════════════════════
   1. 导航条主体
   ══════════════════════════════════════ */
.hh {
  height: var(--hh-h, 56px);
  color: var(--hh-fg, #1f2937);
  line-height: 1.6;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--hh-bg, #ffffff) 92%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  box-shadow: 0 1px 0 rgba(15,23,42,.04),
              0 4px 14px -8px rgba(15,23,42,.08);
}

.hh-inner {
  width: 100%;
  /* max-width 由 PHP 动态输出，此处给出合理默认值 */
  max-width: var(--hh-max-width, 1200px);
  margin: 0 auto;
  padding: 0 28px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.hh-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* ══════════════════════════════════════
   2. Logo / 品牌区域
   ══════════════════════════════════════ */
.hh-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .3px;
  font-style: italic;
  color: #2563eb;
  text-decoration: none;
  transition: opacity .15s;
}
.hh-brand:hover,
.hh-brand:visited,
.hh-brand:active {
  color: #2563eb;
  text-decoration: none;
}

.hh-brand-mark {
  width: 32px; height: 32px;
  border-radius: 9px;
  /* 默认使用图标渐变背景；图片模式由 PHP 动态覆盖 */
  background: linear-gradient(135deg, var(--accent, #6366f1), color-mix(in srgb, var(--accent, #6366f1) 80%, transparent));
  box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--accent, #6366f1) 40%, transparent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.hh-brand-mark svg { width: 17px; height: 17px; }
.hh-brand-mark img {
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: 9px;
}

/* ══════════════════════════════════════
   3. 登录 / 注册按钮（未登录状态）
   ══════════════════════════════════════ */
.hh-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.hh-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 18px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .3px;
  text-decoration: none;
  white-space: nowrap;
  transition: all .2s cubic-bezier(.4, 0, .2, 1);
  position: relative;
  overflow: hidden;
}

/* ── "登录"：幽灵描边按钮（次要） ── */
.hh-nav-login {
  color: #475569;
  background: transparent;
  border: 1px solid #e2e8f0;
}
.hh-nav-login:hover {
  color: #1e293b;
  background: #f8fafc;
  border-color: #cbd5e1;
  box-shadow: 0 2px 6px -2px rgba(15, 23, 42, .08);
}
.hh-nav-login:active {
  box-shadow: none;
}

/* ── "注册"：实色渐变按钮（主要 CTA） ── */
.hh-nav-register {
  color: #fff;
  background: linear-gradient(135deg, var(--accent, #6366f1), color-mix(in srgb, var(--accent, #6366f1) 75%, #8b5cf6));
  border: 1px solid transparent;
  box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--accent, #6366f1) 50%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, .15);
}
.hh-nav-register:hover {
  color: #fff;
  box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--accent, #6366f1) 60%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, .2);
}
.hh-nav-register:active {
  box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--accent, #6366f1) 45%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, .1);
}
/* "注册"按钮内部高光（hover 时滑过） */
.hh-nav-register::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
  transition: left .5s ease;
}
.hh-nav-register:hover::before {
  left: 100%;
}

/* ══════════════════════════════════════
   4. 用户头像 & 下拉菜单（已登录状态）
   ══════════════════════════════════════ */
.hh-user-wrap { position: relative; flex-shrink: 0; }

.hh-user-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: 24px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: var(--hh-fg, #1f2937);
  transition: all .15s;
}
.hh-user-trigger:hover {
  background: rgba(15,23,42,.05);
  border-color: rgba(15,23,42,.06);
}
.hh-user-wrap.is-open .hh-user-trigger {
  background: rgba(15,23,42,.06);
}

.hh-user-avatar {
  position: relative;
  width: 28px; height: 28px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}
.hh-user-avatar.lg { width: 44px; height: 44px; font-size: 18px; }
.hh-user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hh-user-avatar .hh-user-avatar-text { display: none; }
.hh-user-avatar:not(:has(img)) .hh-user-avatar-text,
.hh-user-avatar.avatar-fallback .hh-user-avatar-text { display: inline-block; }

.hh-user-name {
  font-weight: 500;
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hh-user-chevron {
  opacity: .45;
  transition: transform .2s;
  flex-shrink: 0;
}
.hh-user-wrap.is-open .hh-user-chevron {
  transform: rotate(180deg);
  opacity: .85;
}

/* 用户下拉面板 */
.hh-user-dd {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 260px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 36px -8px rgba(15,23,42,.22),
              0 0 0 1px rgba(15,23,42,.06);
  padding: 6px;
  z-index: 200;
  color: #1f2937;
  font-size: 14px;
  animation: hhUserIn .18s cubic-bezier(.16,1,.3,1);
}
@keyframes hhUserIn {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.hh-user-dd-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 14px;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border-radius: 10px;
  margin-bottom: 4px;
}
.hh-user-dd-info { flex: 1; min-width: 0; }
.hh-user-dd-info strong {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.hh-user-dd-info span {
  display: block;
  font-size: 11.5px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hh-user-dd-uid { margin-top: 3px; font-size: 11px; color: #94a3b8; }

.hh-user-dd-list { padding: 4px 0; }
.hh-user-dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  color: #334155;
  text-decoration: none;
  transition: background .12s;
}
.hh-user-dd-item:hover { background: #f1f5f9; color: #0f172a; }

.hh-user-dd-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 6px;
  color: #64748b;
  background: rgba(15,23,42,.04);
  flex-shrink: 0;
}
.hh-user-dd-item:hover .hh-user-dd-icon { background: rgba(15,23,42,.08); color: #475569; }
.hh-user-dd-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.hh-user-dd-foot {
  padding: 4px 0;
  border-top: 1px solid #f1f5f9;
  margin-top: 4px;
}
.hh-user-dd-logout {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  color: #ef4444;
  text-decoration: none;
  transition: background .12s;
}
.hh-user-dd-logout:hover { background: #fef2f2; }

/* ══════════════════════════════════════
   5. 顶部搜索框
   ══════════════════════════════════════ */
.hh-search {
  flex: 1;
  /* max-width 由 PHP 动态输出，默认 420px */
  max-width: var(--hh-search-width, 420px);
  min-width: 120px;
  position: relative;
}
.hh-search-input {
  width: 100%;
  padding: 8px 42px 8px 36px;
  border: 1px solid color-mix(in srgb, var(--accent, #6366f1) 45%, #e5e7eb);
  border-radius: 10px;
  font-size: 13px;
  font-family: inherit;
  color: #1f2937;
  background: #f9fafb;
  transition: all .2s;
}
.hh-search-input::placeholder { color: #9ca3af; }
.hh-search-input:focus {
  outline: none;
  border-color: var(--accent, #6366f1);
  background: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #6366f1) 12%, transparent);
}

.hh-search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: #9ca3af;
  pointer-events: none;
}
.hh-search-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  border-radius: 7px;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--accent, #6366f1), color-mix(in srgb, var(--accent, #6366f1) 75%, #8b5cf6));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--accent, #6366f1) 40%, transparent);
}
.hh-search-btn:hover {
  box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--accent, #6366f1) 55%, transparent);
}
.hh-search-btn svg { width: 14px; height: 14px; }

/* ══════════════════════════════════════
   6. 分类下拉菜单
   ══════════════════════════════════════ */
.hh-cat { position: relative; flex-shrink: 0; }

.hh-cat-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
  white-space: nowrap;
  max-width: 160px;
}
.hh-cat-btn:hover { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; }
.hh-cat-btn.is-open { background: #eef2ff; border-color: #6366f1; color: #4338ca; }

.hh-cat-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hh-cat-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hh-cat-arrow {
  width: 14px; height: 14px;
  flex-shrink: 0;
  color: #9ca3af;
  transition: transform .2s;
}
.hh-cat-btn.is-open .hh-cat-arrow { transform: rotate(180deg); }

/* 下拉面板 */
.hh-cat-drop {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 440px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 10px 40px -8px rgba(15,23,42,.15),
              0 4px 12px -4px rgba(15,23,42,.06);
  z-index: 200;
  overflow: hidden;
}
.hh-cat-drop.is-open { display: flex; }

/* 左侧类型选项卡 */
.hh-cat-left {
  width: 90px;
  flex-shrink: 0;
  background: #f9fafb;
  border-right: 1px solid #f1f5f9;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hh-cat-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 6px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  transition: all .15s;
  border: 1px solid transparent;
  text-decoration: none;
}
.hh-cat-tab:hover { background: #fff; color: #374151; }
.hh-cat-tab.is-active {
  background: #fff;
  color: #4338ca;
  border-color: #e5e7eb;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.hh-cat-tab.is-active.is-wechat { color: #059669; }
.hh-cat-tab[data-panel="wechat"] { color: #059669; }

.hh-cat-tab-icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hh-cat-tab-icon svg { width: 16px; height: 16px; }
.hh-cat-tab-icon.site-icon   { background: #eef2ff; color: #6366f1; }
.hh-cat-tab-icon.wechat-icon { background: #ecfdf5; color: #10b981; }

/* 右侧分类列表 */
.hh-cat-right {
  flex: 1;
  min-width: 0;
  padding: 8px;
  max-height: 360px;
  overflow-y: auto;
}
.hh-cat-panel { display: none; }
.hh-cat-panel.is-show { display: block; }
.hh-cat-panel-title {
  font-size: 10px;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 4px 8px 6px;
}
.hh-cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.hh-cat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: #374151;
  transition: background .1s;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hh-cat-item:hover { background: #f5f3ff; color: #4338ca; }
.hh-cat-item.is-current { background: #eef2ff; color: #4338ca; font-weight: 500; }
.hh-cat-item .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hh-cat-item .cnt {
  margin-left: auto;
  font-size: 11px;
  color: #9ca3af;
  background: #f3f4f6;
  padding: 1px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
.hh-cat-item.is-current .cnt { background: #c7d2fe; color: #4338ca; }

.hh-cat-sep {
  height: 1px;
  background: #f1f5f9;
  margin: 4px 8px;
  grid-column: 1 / -1;
}
.hh-cat-full { grid-column: 1 / -1; }

/* 公众号面板配色 */
.hh-cat-panel-wechat .hh-cat-item .dot { background: #059669 !important; }
.hh-cat-panel-wechat .hh-cat-item:hover { background: #ecfdf5; color: #059669; }
.hh-cat-panel-wechat .hh-cat-item.is-current { background: #ecfdf5; color: #059669; }
.hh-cat-panel-wechat .hh-cat-item.is-current .cnt { background: #a7f3d0; color: #059669; }

/* ══════════════════════════════════════
   7. 响应式适配
   ══════════════════════════════════════ */
@media (max-width: 800px) {
  .hh-inner { padding: 0 16px; }
  .hh-search { display: none; }
  .hh-cat-name { display: none; }
  .hh-user-name,
  .hh-user-chevron { display: none; }
  /* 登录/注册按钮在移动端更紧凑 */
  .hh-nav { gap: 6px; }
  .hh-nav a {
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
  }
}