/* ============================
   header.css - 全站共享导航栏样式
   所有页面引入此文件即可获得统一的顶栏外观。
   修改此文件，全站导航栏同步更新。
   ============================ */

/* ============================
   顶栏
   ============================ */
/* 顶栏自带一套调色板变量 + 排版基线,防止被页面自己的主题污染——
   ① 颜色:header 用 var(--ink/--line/--panel...),页面在 :root 改同名变量会带歪顶栏;
   ② 排版:顶栏高度写死 52px,若页面给 body 设了大 line-height(如部位图谱的 1.7),
      顶栏品牌区(标题+标语)会继承变高、撑出 52px 导致标题上移错位。
   在 .topbar 作用域内钉死标准值,顶栏在任何页面都长一个样。 */
.topbar {
  --accent: #d4a853; --accent-dim: rgba(212,168,83,0.15); --accent-h: #e5be6b;
  --bg: #0d0a07; --ink: #fffdf8; --ink-2: rgba(255,253,248,0.72); --ink-3: rgba(255,253,248,0.44);
  --line: rgba(255,253,248,0.09); --panel: rgba(255,253,248,0.045); --panel-dim: rgba(255,253,248,0.02);
  line-height: normal;
}
/* 品牌区标题/标语间距靠下面的 flex gap 控制;清掉页面全局 h1/p 边距的污染
   (部位图谱页给 p 设了 margin:10px,会叠加到品牌标语上、把品牌区撑到 53px 挤出 52px 顶栏) */
.topbar h1, .topbar h2, .topbar h3, .topbar p { margin: 0; }
.topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 28px;
  height: 52px;
  background: rgba(10,8,5,0.88);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(212,168,83,0.15);
  position: sticky;
  top: 0;
  z-index: 200;
}

/* ---- 品牌区 ---- */
.topbar-brand { flex: 0 0 auto; }

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-logo-mark {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-cn-main {
  font-family: 'Noto Serif SC', serif;
  font-size: 22px;
  font-weight: 700;
  background: linear-gradient(160deg, #f0d080 0%, #d4a853 45%, #b8892e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 2px;
  line-height: 1;
  filter: drop-shadow(0 1px 4px rgba(212,168,83,0.4));
}
.brand-divider {
  width: 1px;
  height: 28px;
  background: linear-gradient(to bottom, transparent, rgba(212,168,83,0.5) 30%, rgba(212,168,83,0.5) 70%, transparent);
}

/* ---- 标题文字组 ---- */
.brand-text-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.brand-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink, #fffdf8);
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
  letter-spacing: 0.5px;
}
.brand-tagline {
  font-size: 10px;
  color: var(--ink-3, rgba(255,253,248,0.44));
  letter-spacing: 0.6px;
  line-height: 1;
  font-family: 'Outfit', sans-serif;
}
.version-badge {
  font-family: 'Outfit';
  font-size: 10px;
  font-weight: 500;
  background: var(--accent-dim, rgba(212,168,83,0.15));
  color: var(--accent, #d4a853);
  border: 1px solid rgba(212,168,83,0.3);
  padding: 1px 6px;
  border-radius: 20px;
}

/* ---- 导航区 ---- */
.topbar-center {
  flex: 1;
  text-align: center;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}
.topbar-right {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
}

/* ---- 导航按钮 ---- */
.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--ink-2, rgba(255,253,248,0.72));
  border: 1px solid var(--line, rgba(255,253,248,0.09));
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  /* 中文标签绝不换行:不加这条,窗口一窄"社区榜单"会断成"社区/榜单"两行、
     把按钮撑高冲出 52px 顶栏; flex-shrink:0 再保证按钮不被挤压重叠。 */
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-btn:hover {
  background: var(--panel, rgba(255,253,248,0.045));
  color: var(--accent, #d4a853);
  border-color: var(--accent, #d4a853);
}
.nav-btn.active {
  background: var(--accent-dim, rgba(212,168,83,0.15));
  color: var(--accent, #d4a853);
  border-color: rgba(212,168,83,0.4);
}

.nav-btn-highlight {
  background: rgba(212,168,83,0.15);
  color: #d4a853;
  border-color: #d4a853;
  font-weight: 700;
}

/* ---- 汉堡菜单按钮（桌面端隐藏） ---- */
.mobile-menu-btn {
  display: none;
  background: transparent;
  border: 1px solid var(--line, rgba(255,253,248,0.09));
  color: var(--ink-2, rgba(255,253,248,0.72));
  font-size: 18px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.mobile-menu-btn:hover {
  border-color: var(--accent, #d4a853);
  color: var(--accent, #d4a853);
}

/* ---- 上传按钮 ---- */
.upload-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent, #d4a853);
  color: var(--bg, #0d0a07);
  padding: 9px 20px;
  border-radius: 24px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 10px rgba(212,168,83,0.3);
  border: none;
}
.upload-button:hover {
  background: var(--accent-h, #e5be6b);
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(212,168,83,0.4);
}
.upload-button input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* ============================
   中等桌面适配（约 1025–1400px）
   7 个导航项 + 品牌 + 上传按钮在中等宽度窗口里排不下会被截掉右侧(用户反馈的
   "显示不全")。这里收紧间距/字号、隐藏英文标语，让常见笔记本(1280/1366)仍能
   一行横排放下全部导航；比这更窄(≤1024)则交给下面的汉堡菜单，绝不横向截断。
   ============================ */
@media (min-width: 1025px) and (max-width: 1400px) {
  .topbar { gap: 12px; padding: 0 16px; }
  .brand-tagline { display: none; }
  .topbar-center { gap: 6px; }
  .nav-btn { padding: 6px 10px; font-size: 12px; gap: 5px; }
  .upload-button { padding: 8px 14px; font-size: 13px; }
}

/* ============================
   移动端 / 窄窗适配（≤1024px 收起为汉堡菜单）
   原断点 768px 太低:768–1400px 这段"横排放不下、又不收汉堡"的死区里,
   导航尾项(关于有肉)和上传按钮会被截断。抬到 1024px,凡是横排放不下的窗口
   一律用干净的下拉菜单,任何 PC 浏览器(EDGE/搜狗/微信内置)都不再显示不全。
   ============================ */
@media (max-width: 1024px) {
  .topbar {
    padding: 0 10px;
    height: 48px;
    gap: 8px;
    justify-content: space-between;
  }

  .mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .topbar-center {
    position: fixed;
    top: 48px;
    left: 0;
    right: 0;
    background: rgba(10,8,5,0.96);
    backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(212,168,83,0.15);
    padding: 12px 16px;
    display: none;
    flex-direction: column;
    gap: 8px;
    z-index: 199;
  }
  .topbar-center.mobile-open {
    display: flex;
  }
  .topbar-center .nav-btn {
    width: 100%;
    text-align: center;
    padding: 10px 14px;
    font-size: 14px;
  }
  
  .topbar-center .nav-btn-highlight:not(.active) {
    background: var(--panel-dim, rgba(255,253,248,0.02));
    border-color: rgba(255,253,248,0.06);
    color: #d4a853;
    font-weight: 500;
  }

  .brand-lockup { min-width: 0; flex: 1; }
  .brand-cn-main { font-size: 16px; flex-shrink: 0; }
  .brand-title { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand-tagline { display: none; }
  .topbar-right { flex-shrink: 0; margin-left: auto; }
  .upload-button { padding: 6px 10px; font-size: 12px; }
}

@media (max-width: 560px) {
  .brand-text-group { display: none; }
  .brand-divider { display: none; }
}

@media (max-width: 380px) {
  .upload-button { font-size: 0; padding: 6px 12px; }
  .upload-button svg { margin: 0; }
}

/* ============================
   页尾 · 备案号 / 客服 栏（各页 footer 共用）
   ⚠️ 当前号码/微信为【模拟占位】，正式上线前须替换为真实备案号与客服方式
   ============================ */
.footer-legal {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line, rgba(255,253,248,0.09));
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 12px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-3, rgba(255,253,248,0.44));
}
.footer-legal .fl-item { color: inherit; }
.footer-legal a.fl-item { transition: color 0.2s; }
.footer-legal a.fl-item:hover { color: var(--accent, #d4a853); text-decoration: none; }
.footer-legal .fl-item b { color: var(--ink-2, rgba(255,253,248,0.72)); font-weight: 600; }
.footer-legal .fl-sep { color: var(--ink-4, rgba(255,253,248,0.22)); }

@media (max-width: 480px) {
  .footer-legal { flex-direction: column; gap: 4px; }
  .footer-legal .fl-sep { display: none; }
}