/**
 * 全站统一导航条。三个页面(首页/广场/账户)以前各写各的:
 * 首页是「品牌 + 蓝色下划线链接 + 邮箱·点数·我的账户 + 原生下拉」挤成一行,
 * 广场页是「大标题 + 返回首页」, 账户页又是另一套。
 * 结果每换一个页面, 顶部位置和样式都在跳。这里收成一份。
 *
 * 规则:
 *   左边 = 品牌 + 页面入口(当前页高亮)
 *   右边 = 点数 + 账户 + 语言
 * 邮箱不再放在导航里 —— 又长又不是操作项, 挤掉了真正要点的东西, 需要看去账户页。
 */
.nav {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 22px; padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.nav .brand {
  font-family: "Baloo 2", "Noto Sans SC", sans-serif;
  font-weight: 800; font-size: 19px; letter-spacing: -.01em;
  color: var(--ink); text-decoration: none; margin-right: 10px;
}
.nav a.item {
  color: var(--soft); text-decoration: none; font-size: 14px;
  padding: 5px 11px; border-radius: 9px; transition: background .15s, color .15s;
}
.nav a.item:hover { background: var(--line); color: var(--ink); }
.nav a.item.on { background: var(--brand); color: #fff; font-weight: 600; }
.nav .right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* 点数做成一个可点的小药丸, 点了去账户页充值 —— 它本来就是最该被点的东西 */
.nav .credits {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--chip, var(--line)); color: var(--ink);
  padding: 4px 11px; border-radius: 99px; font-size: 13px; font-weight: 700;
  text-decoration: none;
}
.nav .credits small { font-weight: 500; color: var(--muted); font-size: 11.5px }
.nav select {
  font: inherit; font-size: 13px; color: var(--soft);
  background: transparent; border: 1px solid var(--line);
  border-radius: 9px; padding: 4px 8px; cursor: pointer;
}
@media (max-width: 520px) {
  .nav { gap: 4px }
  .nav .brand { font-size: 17px; margin-right: 4px }
  .nav a.item { padding: 5px 8px; font-size: 13.5px }
}