:root{
  --topbar-h: 56px;                        /* 14 * 4 = 56px */
  --container-w: min(1280px, 92vw);        /* max-w-7xl + 两侧留白 */
}

/* 固定顶栏，覆盖在页面最上方 */
.topbar{
  position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h);
  z-index: 9998;
  background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.15));
  backdrop-filter: blur(3px);
}

/* 中间容器 */
.topbar-inner{
  width: var(--container-w); height: 100%;
  margin: 0 auto; padding: 0 1rem;
  display: flex; align-items: center; justify-content: space-between;
  color: rgba(255,255,255,.9);
}

/* 品牌区 */
.brand{ display:flex; align-items:center; gap:.75rem; text-decoration:none; color: inherit; }
.brand-logo{ height: 32px; width: auto; display:block; }
.brand-name{ letter-spacing: .03em; font-weight: 600; color: rgba(255,255,255,.9); }

/* 桌面导航（≥768px 显示） */
.nav-links{
  display: none; align-items: center; gap: 1.5rem;
  color: rgba(255,255,255,.8);
}
.nav-links a{
  color: rgba(255,255,255,.8); text-decoration: none;
}
.nav-links a:hover{ color: #fff; }

/* 语言按钮 */
.lang-block{ display:flex; align-items:center; gap:.5rem; }
.globe{ font-size: .9rem; opacity: .7; }
.lang-btn{
  font-size: .9rem; padding: .25rem .5rem; border-radius: .375rem;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.1); color: #fff;
  opacity: .85; cursor: pointer;
}
.lang-btn:hover{ opacity: 1; }

/* 移动端语言选择（<768px 显示） */
.lang-select{ display:flex; align-items:center; gap:.5rem; }
#langSelect{
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  color: #fff; border-radius: .375rem; padding: .25rem .5rem;
}

/* 响应式显示切换 */
@media (min-width: 768px){
  .nav-links{ display:flex; }
  .lang-select{ display: none; }
}

/* 锚点偏移：避免固定顶栏遮挡滚动定位 */
[id]{ scroll-margin-top: calc(var(--topbar-h) + 12px); }