/* ============================================================
   WAGA · 唯一顶栏 (waga-topbar.css)
   首页与所有子页面共用「完全相同」的这条顶栏，保证跨页不跳。
   - 纯 CSS、不设任何全局 body/html 规则 → 不污染首页
   - 居中主导航 · 语言切换固定右上 · Animation Tools 悬停下拉
   - 整条 mix-blend-difference：浅底变深、深底变白
   依赖：页面里已有的 .link-line（首页内联 / base.css 均有定义）
   字体回退已内置，不依赖 base.css 的 token
   ============================================================ */

.wtop {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  pointer-events: none;
  mix-blend-mode: difference;
}
.wtop__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 0.75rem;
  color: #fff;
}
@media (min-width: 640px) { .wtop__row { gap: 1rem; padding: 0.85rem 1rem; } }
@media (min-width: 768px) { .wtop__row { padding: 1.5rem 2rem; } }

.wtop a, .wtop button, .wtop__tools, .wtop__menu2 { pointer-events: auto; }

/* —— 左：品牌 —— */
.wtop__brand {
  display: inline-flex; align-items: center; gap: 0.375rem;
  justify-self: start; text-decoration: none; color: #fff;
}
@media (min-width: 640px) { .wtop__brand { gap: 0.75rem; } }
.wtop__brand img { height: 24px; width: auto; filter: invert(1); opacity: 0.9; }
@media (min-width: 640px) { .wtop__brand img { height: 28px; } }
@media (min-width: 768px) { .wtop__brand img { height: 32px; } }
.wtop__brand span {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px; letter-spacing: 0.16em; color: rgba(255,255,255,0.8);
}
@media (min-width: 640px) { .wtop__brand span { font-size: 10px; letter-spacing: 0.24em; } }

/* —— 中：主导航（桌面） —— */
.wtop__nav {
  display: none; align-items: center; gap: 1.25rem;
  justify-self: center;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em;
}
@media (min-width: 1024px) { .wtop__nav { display: flex; } }
.wtop__nav a, .wtop__nav button {
  color: rgba(255,255,255,0.8); text-decoration: none;
  background: none; border: 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  transition: color 0.16s ease;
}
.wtop__nav a:hover, .wtop__nav button:hover { color: #fff; }

/* Animation Tools 悬停下拉（无实心底，混合文字，避免被反色吃掉） */
.wtop__tools { position: relative; }
.wtop__toolsbtn { display: inline-flex; align-items: center; gap: 0.3em; }
.wtop__caret { font-size: 8px; transition: opacity 0.15s ease; }
.wtop__tools:hover .wtop__caret { opacity: 0; }
.wtop__menu2 {
  position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  padding-top: 0.75rem;
  visibility: hidden; opacity: 0;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.wtop__tools:hover .wtop__menu2 { visibility: visible; opacity: 1; }
.wtop__menu2-inner {
  display: flex; flex-direction: column; align-items: center; gap: 0.65rem;
  white-space: nowrap;
  border-top: 1px solid rgba(255,255,255,0.4);
  padding-top: 0.75rem;
}
.wtop__menu2-inner a { text-transform: none; letter-spacing: 0.14em; }

/* —— 中：移动端菜单按钮 —— */
.wtop__menubtn {
  display: inline-block; justify-self: center;
  background: none; border: 0; cursor: pointer; color: rgba(255,255,255,0.8);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px; letter-spacing: 0.16em;
  transition: color 0.16s ease;
}
.wtop__menubtn:hover { color: #fff; }
@media (min-width: 640px) { .wtop__menubtn { font-size: 10px; letter-spacing: 0.18em; } }
@media (min-width: 1024px) { .wtop__menubtn { display: none; } }

/* —— 右：语言切换（固定在原位，不被挤占） —— */
.wtop__lang {
  display: flex; align-items: center; gap: 0.25rem;
  justify-self: end; white-space: nowrap;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px; letter-spacing: 0.04em; color: rgba(255,255,255,0.7);
}
@media (min-width: 640px) { .wtop__lang { gap: 0.375rem; font-size: 10px; letter-spacing: 0.14em; } }
@media (min-width: 768px) { .wtop__lang { gap: 0.5rem; letter-spacing: 0.2em; } }
.wtop__lang button {
  background: none; border: 0; cursor: pointer; color: inherit;
  font: inherit; letter-spacing: inherit; transition: color 0.16s ease;
}
.wtop__lang button:hover { color: #fff; }

/* ============================================================
   移动端全屏菜单（克制小字版）—— 独立于 .wtop，不参与混合，实心黑底
   ============================================================ */
.wtop__overlay {
  position: fixed; inset: 0; z-index: 80;
  display: none; flex-direction: column; justify-content: center;
  gap: 0;
  background: #000; color: #e6e1d6;
  padding: 4rem 2rem;
}
.wtop__overlay.open { display: flex; }
.wtop__close {
  position: absolute; top: 1.5rem; right: 1.5rem;
  background: none; border: 0; cursor: pointer; color: rgba(255,255,255,0.55);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.2em;
}
.wtop__close:hover { color: #fff; }
.wtop__o-link {
  display: block;
  padding: 0.875rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.24em;
  color: rgba(255,255,255,0.85); text-decoration: none;
}
.wtop__o-link:hover { color: #fff; }
.wtop__o-link--last { border-bottom: 0; }
.wtop__o-group { padding: 0.875rem 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.wtop__o-label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.24em;
  color: rgba(255,255,255,0.4);
}
.wtop__o-sub {
  display: block; margin-top: 0.5rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.85); text-decoration: none;
}
.wtop__o-sub:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .wtop__caret, .wtop__menu2 { transition: none; }
}