/*
 * 全站导航栏主题（SiteNav）
 * - 主题挂在 html[data-nav-theme="glass|terminal|beam"]，原生模式不设该属性 → 完全走 ui-default 样式
 * - 只改桌面端（>600px，与 ui-default mobile 断点一致）；移动端侧滑菜单保持原生
 * - 高度保持 45px（$nav-item-height），分隔线用 inset box-shadow 绘制，不改变任何尺寸
 * - 会员 / 消息入口沿用站点既有样式（addon/frontend/codefun.css），通用规则用 :not() 排除
 */

/* ==================== 「导航样式」切换入口（所有模式） ==================== */

nav#menu.nav .nav__item.nav__item--navstyle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0 4px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  color: #6b7280;
  line-height: 1;
  transition: background 0.18s ease, color 0.18s ease;
}

nav#menu.nav .nav__item.nav__item--navstyle::before,
nav#menu.nav .nav__item.nav__item--navstyle::after {
  display: none;
}

nav#menu.nav .nav__item.nav__item--navstyle:hover {
  background: rgba(47, 137, 255, 0.08);
  color: #2f89ff;
}

.theme--dark nav#menu.nav .nav__item.nav__item--navstyle {
  color: #9ca3af;
}

@media (max-width: 600px) {
  nav#menu.nav .sn-switch {
    display: none !important;
  }
}

/* 样式选择面板（挂在 body 下的 tether-drop 内） */
#menu-nav-style.sn-menu {
  min-width: 248px;
  padding: 6px;
}

#menu-nav-style .sn-menu__title {
  padding: 6px 10px 8px;
  color: #9ca3af;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  list-style: none;
}

#menu-nav-style .menu__link.sn-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-left: 0;
  border-radius: 8px;
  white-space: normal;
  cursor: pointer;
  transition: background 0.15s ease;
}

#menu-nav-style .menu__link.sn-option:hover {
  background: rgba(142, 150, 170, 0.12);
  text-decoration: none;
}

#menu-nav-style .sn-option__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}

#menu-nav-style .sn-option__name {
  font-size: 13px;
  font-weight: 600;
}

#menu-nav-style .sn-option__desc {
  color: #9ca3af;
  font-size: 12px;
}

#menu-nav-style .sn-option__check {
  flex: 0 0 auto;
  color: #3b82f6;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.15s ease;
}

html:not([data-nav-theme]) #menu-nav-style [data-nav-theme-option='native'] .sn-option__check,
html[data-nav-theme='glass'] #menu-nav-style [data-nav-theme-option='glass'] .sn-option__check,
html[data-nav-theme='terminal'] #menu-nav-style [data-nav-theme-option='terminal'] .sn-option__check,
html[data-nav-theme='beam'] #menu-nav-style [data-nav-theme-option='beam'] .sn-option__check {
  opacity: 1;
}

/* 缩略预览 */
#menu-nav-style .sn-swatch {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 22px;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
}

#menu-nav-style .sn-swatch::after {
  content: '';
  position: absolute;
  left: 6px;
  right: 14px;
  top: 10px;
  height: 3px;
  border-radius: 2px;
}

#menu-nav-style .sn-swatch--glass {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(226, 232, 240, 0.9));
}

#menu-nav-style .sn-swatch--glass::after {
  background: rgba(15, 23, 42, 0.18);
  height: 8px;
  top: 7px;
  border-radius: 4px;
}

#menu-nav-style .sn-swatch--terminal {
  background: #0b0f14;
}

#menu-nav-style .sn-swatch--terminal::after {
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.8);
  top: auto;
  bottom: 3px;
  height: 2px;
}

#menu-nav-style .sn-swatch--beam {
  background: #ffffff;
}

#menu-nav-style .sn-swatch--beam::after {
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  top: auto;
  bottom: 3px;
  height: 2px;
}

#menu-nav-style .sn-swatch--native {
  background: #ffffff;
}

#menu-nav-style .sn-swatch--native::after {
  background: #3b82f6;
  top: 3px;
  height: 2px;
}

/* ==================== 主题变量 ==================== */

html[data-nav-theme='glass'] {
  --sn-bg: rgba(255, 255, 255, 0.72);
  --sn-blur: saturate(180%) blur(14px);
  --sn-line: rgba(15, 23, 42, 0.08);
  --sn-fg: #52525b;
  --sn-fg-strong: #09090b;
  --sn-hover-bg: rgba(15, 23, 42, 0.05);
  --sn-active-bg: rgba(15, 23, 42, 0.07);
  --sn-accent: #2563eb;
  --sn-font: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --sn-menu-bg: rgba(255, 255, 255, 0.92);
  --sn-menu-fg: #3f3f46;
  --sn-menu-hover: rgba(15, 23, 42, 0.05);
}

html[data-nav-theme='glass'][data-theme='dark'],
html[data-nav-theme='glass'].theme--dark:not([data-theme='light']) {
  --sn-bg: rgba(13, 17, 23, 0.7);
  --sn-line: rgba(255, 255, 255, 0.08);
  --sn-fg: #a1a1aa;
  --sn-fg-strong: #fafafa;
  --sn-hover-bg: rgba(255, 255, 255, 0.07);
  --sn-active-bg: rgba(255, 255, 255, 0.1);
  --sn-accent: #60a5fa;
  --sn-menu-bg: rgba(22, 27, 34, 0.94);
  --sn-menu-fg: #d4d4d8;
  --sn-menu-hover: rgba(255, 255, 255, 0.07);
}

html[data-nav-theme='terminal'] {
  --sn-bg: #0b0f14;
  --sn-blur: none;
  --sn-line: #1f2937;
  --sn-fg: #9ca3af;
  --sn-fg-strong: #e5e7eb;
  --sn-hover-bg: transparent;
  --sn-active-bg: transparent;
  --sn-accent: #4ade80;
  --sn-font: 'JetBrains Mono', 'SFMono-Regular', ui-monospace, Menlo, Consolas, 'PingFang SC', 'Microsoft YaHei', monospace;
  --sn-menu-bg: #0b0f14;
  --sn-menu-fg: #cbd5e1;
  --sn-menu-hover: rgba(74, 222, 128, 0.08);
}

html[data-nav-theme='beam'] {
  --sn-bg: #ffffff;
  --sn-blur: none;
  --sn-line: #e5e7eb;
  --sn-fg: #374151;
  --sn-fg-strong: #111827;
  --sn-hover-bg: transparent;
  --sn-active-bg: transparent;
  --sn-accent: #2563eb;
  --sn-beam: linear-gradient(90deg, #2563eb, #06b6d4);
  --sn-font: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --sn-menu-bg: #ffffff;
  --sn-menu-fg: #374151;
  --sn-menu-hover: #f3f4f6;
}

html[data-nav-theme='beam'][data-theme='dark'],
html[data-nav-theme='beam'].theme--dark:not([data-theme='light']) {
  --sn-bg: #0d1117;
  --sn-line: #21262d;
  --sn-fg: #c9d1d9;
  --sn-fg-strong: #f0f6fc;
  --sn-accent: #58a6ff;
  --sn-beam: linear-gradient(90deg, #58a6ff, #22d3ee);
  --sn-menu-bg: #161b22;
  --sn-menu-fg: #c9d1d9;
  --sn-menu-hover: #21262d;
}

/* ==================== 主题通用骨架（桌面端） ==================== */

@media (min-width: 601px) {
  html[data-nav-theme] nav#menu.nav {
    background: var(--sn-bg);
    box-shadow: inset 0 -1px 0 var(--sn-line);
    font-family: var(--sn-font);
    -webkit-backdrop-filter: var(--sn-blur);
    backdrop-filter: var(--sn-blur);
  }

  html[data-nav-theme] .nav--shadow {
    box-shadow: none;
  }

  html[data-nav-theme] nav#menu.nav .nav__item:not(.nav__item--vip):not(.nav__item--messages):not(.nav__item--navstyle) {
    position: relative;
    padding: 0 16px;
    border-top: 0;
    background: transparent;
    color: var(--sn-fg);
    font-size: 14px;
    font-weight: 500;
    line-height: 45px;
    transition: color 0.18s ease;
  }

  html[data-nav-theme] nav#menu.nav .nav__item:not(.nav__item--vip):not(.nav__item--messages):not(.nav__item--navstyle)::before,
  html[data-nav-theme] nav#menu.nav .nav__item:not(.nav__item--vip):not(.nav__item--messages):not(.nav__item--navstyle)::after {
    content: '';
    position: absolute;
    pointer-events: none;
    box-shadow: none;
    transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease;
  }

  html[data-nav-theme] nav#menu.nav .nav__item:not(.nav__item--vip):not(.nav__item--messages):not(.nav__item--navstyle):hover,
  html[data-nav-theme] nav#menu.nav .nav__item.nav--active:not(.nav__item--vip):not(.nav__item--messages):not(.nav__item--navstyle) {
    color: var(--sn-fg-strong);
    background: transparent;
    text-decoration: none;
  }

  html[data-nav-theme] nav#menu.nav .nav__item:focus-visible {
    outline: 2px solid var(--sn-accent);
    outline-offset: -4px;
    border-radius: 8px;
  }

  html[data-nav-theme] nav#menu.nav .nav__item--navstyle {
    color: var(--sn-fg);
  }

  html[data-nav-theme] nav#menu.nav .nav__item--navstyle:hover {
    color: var(--sn-fg-strong);
    background: var(--sn-menu-hover);
  }

  html[data-nav-theme] nav#menu.nav .nav__item--round {
    border-color: var(--sn-accent);
    color: var(--sn-accent);
  }

  /* ---------- Glass：磨砂 + 胶囊悬停 ---------- */
  html[data-nav-theme='glass'] nav#menu.nav .nav__item:not(.nav__item--vip):not(.nav__item--messages):not(.nav__item--navstyle)::after {
    inset: 8px 5px;
    z-index: -1;
    border-radius: 8px;
    background: var(--sn-hover-bg);
    opacity: 0;
    transform: scale(0.92);
  }

  html[data-nav-theme='glass'] nav#menu.nav .nav__item:not(.nav__item--vip):not(.nav__item--messages):not(.nav__item--navstyle):hover::after {
    opacity: 1;
    transform: scale(1);
  }

  html[data-nav-theme='glass'] nav#menu.nav .nav__item.nav--active:not(.nav__item--vip):not(.nav__item--messages):not(.nav__item--navstyle)::after {
    opacity: 1;
    transform: scale(1);
    background: var(--sn-active-bg);
  }

  html[data-nav-theme='glass'] nav#menu.nav .nav__item.nav--active:not(.nav__item--vip):not(.nav__item--messages):not(.nav__item--navstyle) {
    font-weight: 600;
  }

  html[data-nav-theme='glass'] nav#menu.nav .nav__list-item {
    position: relative;
    z-index: 0;
  }

  /* ---------- Terminal：等宽 + 提示符 + 荧光下划线 ---------- */
  html[data-nav-theme='terminal'] nav#menu.nav .nav__item:not(.nav__item--vip):not(.nav__item--messages):not(.nav__item--navstyle) {
    padding: 0 14px 0 26px;
    font-size: 13px;
    letter-spacing: -0.01em;
  }

  html[data-nav-theme='terminal'] nav#menu.nav .nav__item:not(.nav__item--vip):not(.nav__item--messages):not(.nav__item--navstyle)::before {
    content: '>';
    left: 12px;
    top: 0;
    color: var(--sn-accent);
    font-weight: 700;
    opacity: 0;
    transform: translateX(-4px);
  }

  html[data-nav-theme='terminal'] nav#menu.nav .nav__item:not(.nav__item--vip):not(.nav__item--messages):not(.nav__item--navstyle):hover::before,
  html[data-nav-theme='terminal'] nav#menu.nav .nav__item.nav--active:not(.nav__item--vip):not(.nav__item--messages):not(.nav__item--navstyle)::before {
    opacity: 1;
    transform: translateX(0);
  }

  html[data-nav-theme='terminal'] nav#menu.nav .nav__item:not(.nav__item--vip):not(.nav__item--messages):not(.nav__item--navstyle)::after {
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 1px;
    background: var(--sn-accent);
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.9);
    opacity: 0;
  }

  html[data-nav-theme='terminal'] nav#menu.nav .nav__item.nav--active:not(.nav__item--vip):not(.nav__item--messages):not(.nav__item--navstyle) {
    color: var(--sn-accent);
  }

  html[data-nav-theme='terminal'] nav#menu.nav .nav__item.nav--active:not(.nav__item--vip):not(.nav__item--messages):not(.nav__item--navstyle)::after {
    opacity: 1;
  }

  html[data-nav-theme='terminal'] nav#menu.nav .nav__item.nav__item--messages {
    color: var(--sn-fg);
  }

  html[data-nav-theme='terminal'] nav#menu.nav .nav__item.nav__item--messages:hover {
    background: rgba(74, 222, 128, 0.1);
    color: var(--sn-accent);
  }

  html[data-nav-theme='terminal'] nav#menu.nav .nav__item.nav__item--vip:hover {
    background: rgba(249, 160, 18, 0.16);
  }

  html[data-nav-theme='terminal'] .message-unread-badge {
    border-color: #0b0f14;
  }

  /* ---------- Beam：渐变光束下划线（从中间展开） ---------- */
  html[data-nav-theme='beam'] nav#menu.nav .nav__item:not(.nav__item--vip):not(.nav__item--messages):not(.nav__item--navstyle)::after {
    left: 16px;
    right: 16px;
    bottom: 0;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--sn-beam);
    transform: scaleX(0);
  }

  html[data-nav-theme='beam'] nav#menu.nav .nav__item:not(.nav__item--vip):not(.nav__item--messages):not(.nav__item--navstyle):hover::after {
    transform: scaleX(1);
  }

  html[data-nav-theme='beam'] nav#menu.nav .nav__item.nav--active:not(.nav__item--vip):not(.nav__item--messages):not(.nav__item--navstyle) {
    color: var(--sn-accent);
    font-weight: 600;
  }

  html[data-nav-theme='beam'] nav#menu.nav .nav__item.nav--active:not(.nav__item--vip):not(.nav__item--messages):not(.nav__item--navstyle)::after {
    transform: scaleX(1);
    box-shadow: 0 -2px 10px rgba(37, 99, 235, 0.35);
  }
}

/* ==================== 下拉面板（tether-drop 挂在 body 下） ==================== */

html[data-nav-theme] .drop.nav__dropdown,
html[data-nav-theme] .drop.dropdown:has(> .drop-content > .menu_more) {
  border-radius: 12px;
  box-shadow: none;
}

html[data-nav-theme] .drop.nav__dropdown .menu,
html[data-nav-theme] .drop .menu.menu_more {
  padding: 6px;
  border-radius: 12px;
  background: var(--sn-menu-bg);
  box-shadow: 0 0 0 1px var(--sn-line), 0 12px 32px -12px rgba(15, 23, 42, 0.28);
  -webkit-backdrop-filter: var(--sn-blur);
  backdrop-filter: var(--sn-blur);
  font-family: var(--sn-font);
}

html[data-nav-theme] .drop.nav__dropdown .menu__link,
html[data-nav-theme] .drop .menu.menu_more .menu__link {
  padding: 8px 10px;
  border-left: 0;
  border-radius: 8px;
  color: var(--sn-menu-fg);
  transition: background 0.15s ease, color 0.15s ease;
}

html[data-nav-theme] .drop.nav__dropdown .menu__link:hover,
html[data-nav-theme] .drop .menu.menu_more .menu__link:hover {
  background: var(--sn-menu-hover);
  color: var(--sn-fg-strong);
  text-decoration: none;
}

html[data-nav-theme] .drop.nav__dropdown .menu__seperator,
html[data-nav-theme] .drop .menu.menu_more .menu__seperator {
  margin: 6px 4px;
  border-top-color: var(--sn-line);
}

html[data-nav-theme='terminal'] .drop.nav__dropdown .menu__link:hover,
html[data-nav-theme='terminal'] .drop .menu.menu_more .menu__link:hover {
  color: var(--sn-accent);
}

html[data-nav-theme='terminal'] #menu-nav-style .sn-option__desc,
html[data-nav-theme='terminal'] #menu-nav-style .sn-menu__title {
  color: #6b7280;
}

@media (prefers-reduced-motion: reduce) {
  html[data-nav-theme] nav#menu.nav .nav__item::before,
  html[data-nav-theme] nav#menu.nav .nav__item::after {
    transition: none !important;
  }
}

/* ==================== 导航项图标（所有模式） ==================== */

nav#menu.nav .nav__item .sn-icon,
.sn-more-menu .sn-icon {
  display: inline-block;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-right: 6px;
  vertical-align: -2px;
  opacity: 0.78;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

nav#menu.nav .nav__item:hover .sn-icon,
nav#menu.nav .nav__item.nav--active .sn-icon {
  opacity: 1;
}

html[data-nav-theme] nav#menu.nav .nav__item:hover .sn-icon {
  transform: translateY(-1px);
}

.sn-more-menu .menu__link {
  display: flex;
  align-items: center;
}

.sn-more-menu .menu__link .sn-icon {
  margin-right: 8px;
}

.sn-more-menu .menu__link.nav--active {
  color: #2563eb;
  font-weight: 600;
}

html[data-nav-theme] .sn-more-menu .menu__link.nav--active {
  color: var(--sn-accent);
}

/* ==================== 单行布局（桌面端，所有模式） ==================== */

/*
 * 原生靠 float 排列：右侧列表放不下时会整体掉到第二行（页面 JS 之后插入会员 / 主题切换时尤其明显）。
 * 改为 flex 单行：右侧不收缩、始终贴右；空间不足时左侧菜单项文字省略收缩，Logo 与「更多」不收缩。
 * .columns 固定 45px，ui-default navigation.page.js 的高度测量折叠因此永远不会触发。
 */
@media (min-width: 601px) {
  html[data-nav-theme] nav#menu.nav > .row {
    max-width: 1440px;
  }

  html nav#menu.nav > .row > .columns {
    display: flex;
    align-items: stretch;
    height: 45px;
    overflow: hidden;
  }

  html nav#menu.nav > .row > .columns::before,
  html nav#menu.nav > .row > .columns::after,
  html nav#menu.nav ol.nav__list--main::before,
  html nav#menu.nav ol.nav__list--main::after,
  html nav#menu.nav ol.nav__list--secondary::before,
  html nav#menu.nav ol.nav__list--secondary::after {
    display: none;
  }

  html nav#menu.nav ol.nav__list--main {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    min-width: 0;
    float: none;
  }

  html nav#menu.nav ol.nav__list--main > .nav__list-item {
    flex: 0 1 auto;
    min-width: 0;
    float: none;
  }

  html nav#menu.nav ol.nav__list--main > .nav__list-item:first-child,
  html nav#menu.nav ol.nav__list--main > .sn-more {
    flex-shrink: 0;
  }

  html nav#menu.nav ol.nav__list--main > .nav__list-item > .nav__item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html nav#menu.nav ol.nav__list--secondary {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: center;
    margin-left: auto;
    float: none;
  }
}

/* ==================== 主栏固定条数 + 「更多」 ==================== */

/*
 * 服务端输出前 7 项到主栏，第 4~7 项同时在「更多」里渲染一份（.sn-dup），按断点二选一显示。
 * 档位按导航行真实宽度设定（主题模式行宽 1440px；原生模式沿用 ui-default 的 1200px）：
 *   主题：≥1440 显示 7 项；1200~1439 显示 5 项；1000~1199 显示 3 项；601~999 显示 3 个纯图标
 *   原生：≥1280 显示 4 项；1000~1279 显示 3 项；601~999 显示 3 个纯图标
 */
@media (min-width: 601px) {
  .sn-more-menu .sn-dup {
    display: none;
  }

  html[data-nav-theme] nav#menu.nav .sn-more.sn-more--le7 {
    display: none;
  }

  html:not([data-nav-theme]) nav#menu.nav ol.nav__list--main > .sn-rank-4,
  html:not([data-nav-theme]) nav#menu.nav ol.nav__list--main > .sn-rank-5,
  html:not([data-nav-theme]) nav#menu.nav ol.nav__list--main > .sn-rank-6 {
    display: none;
  }

  html:not([data-nav-theme]) .sn-more-menu .sn-rank-4,
  html:not([data-nav-theme]) .sn-more-menu .sn-rank-5,
  html:not([data-nav-theme]) .sn-more-menu .sn-rank-6 {
    display: block;
  }

  html:not([data-nav-theme]) nav#menu.nav .sn-more.sn-more--le4 {
    display: none;
  }
}

@media (min-width: 601px) and (max-width: 1439px) {
  html[data-nav-theme] nav#menu.nav ol.nav__list--main > .sn-rank-5,
  html[data-nav-theme] nav#menu.nav ol.nav__list--main > .sn-rank-6 {
    display: none;
  }

  html[data-nav-theme] .sn-more-menu .sn-rank-5,
  html[data-nav-theme] .sn-more-menu .sn-rank-6 {
    display: block;
  }

  html[data-nav-theme] nav#menu.nav .sn-more.sn-more--le7 {
    display: block;
  }

  html[data-nav-theme] nav#menu.nav .sn-more.sn-more--le5 {
    display: none;
  }
}

@media (min-width: 601px) and (max-width: 1279px) {
  html:not([data-nav-theme]) nav#menu.nav ol.nav__list--main > .sn-rank-3 {
    display: none;
  }

  html:not([data-nav-theme]) .sn-more-menu .sn-rank-3 {
    display: block;
  }

  html:not([data-nav-theme]) nav#menu.nav .sn-more.sn-more--le4 {
    display: block;
  }
}

@media (min-width: 601px) and (max-width: 1199px) {
  html[data-nav-theme] nav#menu.nav ol.nav__list--main > .sn-rank-3,
  html[data-nav-theme] nav#menu.nav ol.nav__list--main > .sn-rank-4 {
    display: none;
  }

  html[data-nav-theme] .sn-more-menu .sn-rank-3,
  html[data-nav-theme] .sn-more-menu .sn-rank-4 {
    display: block;
  }

  html[data-nav-theme] nav#menu.nav .sn-more.sn-more--le5 {
    display: block;
  }
}

@media (min-width: 601px) and (max-width: 999px) {
  html nav#menu.nav ol.nav__list--main .sn-label {
    display: none;
  }

  html nav#menu.nav ol.nav__list--main .sn-icon {
    margin-right: 0;
  }
}

/* 移动端侧滑菜单：主栏 7 项全部纵向展示，「更多」里只保留第 8 项起 */
@media (max-width: 600px) {
  .sn-more-menu .sn-dup {
    display: none !important;
  }

  nav#menu.nav .sn-more.sn-more--le7 {
    display: none;
  }
}

/* ==================== 右侧首屏即最终形态（所有模式） ==================== */

/*
 * 会员 / 消息 / 主题切换改由模板服务端输出。其样式原本在 addon/frontend/codefun.css、arrow-up.css，
 * 随 JS bundle 注入（晚于首屏），会导致右侧宽度二次变化并挤压左侧；这里提前给出同值样式，
 * 图标按钮统一固定尺寸，保证首屏到 JS 执行完宽度不变。
 */
nav#menu.nav .nav__item.nav__item--vip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 14px;
  margin: 0 4px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: #f9a012;
  border-radius: 9999px;
  border: none;
  box-shadow: none;
  transition: background 0.18s ease, color 0.18s ease;
}

nav#menu.nav .nav__item.nav__item--vip:hover {
  color: #f9a012;
  background: #fed7aa;
}

nav#menu.nav .nav__item.nav__item--vip .nav__vip-crown {
  display: block;
  flex-shrink: 0;
}

nav#menu.nav .nav__item.nav__item--messages {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0 4px;
  border: 0;
  border-radius: 10px;
  color: #6b7280;
  line-height: 1;
}

nav#menu.nav .nav__item.nav__item--messages .message-unread-badge {
  position: absolute;
  top: 4px;
  right: 4px;
}

nav#menu.nav #theme-toggle.nav__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 36px;
  margin: 0 2px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  line-height: 1;
}

nav#menu.nav #theme-toggle .theme-icon-sun svg,
nav#menu.nav #theme-toggle .theme-icon-moon svg {
  display: block;
  transform: none;
}

nav#menu.nav #theme-toggle .theme-icon-sun,
nav#menu.nav #theme-toggle .theme-icon-moon {
  display: none;
  margin: 0;
}

html:not([data-theme='dark']):not(.theme--dark) nav#menu.nav #theme-toggle .theme-icon-sun,
html[data-theme='light'] nav#menu.nav #theme-toggle .theme-icon-sun,
html[data-theme='dark'] nav#menu.nav #theme-toggle .theme-icon-moon,
html.theme--dark:not([data-theme='light']) nav#menu.nav #theme-toggle .theme-icon-moon {
  display: inline-flex;
}

@media (min-width: 601px) {
  html[data-nav-theme] nav#menu.nav #theme-toggle.nav__item {
    color: var(--sn-fg);
  }

  html[data-nav-theme] nav#menu.nav #theme-toggle.nav__item:hover {
    color: var(--sn-fg-strong);
    background: var(--sn-menu-hover);
  }

  html[data-nav-theme] nav#menu.nav #theme-toggle.nav__item::before,
  html[data-nav-theme] nav#menu.nav #theme-toggle.nav__item::after {
    display: none;
  }
}