/* ============ 顶部固定层的让位尺寸（切换条 + 固定导航栏） ============
   .navbar 是 position: fixed，完全**不占文档流高度**；而「国内站 / 国际站」切换条
   （js/modules/site-switch.js 注入的 .site-switch-bar）是文档流里的第一行。
   于是「导航栏下方」这段视觉空间在文档流里是零高度，横幅与主内容都得自己让位。

   ⚠ 这些数值**不再硬编码成一个猜出来的 84px**：切换条/导航栏的真实高度随宽度、文案换行、
   语言切换而变（实测：导航栏 box 58 / 60 / 80 / 90px，内容行 30 / 32 / 42px；旧的 84px
   在 768px 处会让横幅顶端被导航栏盖住 6px）。js/modules/site-banners.js 在渲染后量出真实
   高度写进 --bt-bar-h / --bt-nav-inner-h，下面的 calc 自动跟着变；括号里是 JS 未运行时的
   兜底值（与实测一致）。

   ── 变量 ──────────────────────────────────────────────────────────────
   --bt-bar-h         31px 切换条高度：6+6 padding + 18 行高(12px×1.5) + 1px 下边框
                            （窄屏 28px，见 css/responsive.css；**没有切换条时 JS 置 0**）
   --bt-nav-inner-h   32px .navbar-inner（内容行）高度：桌面就是 logo 的 32px
   --bt-nav-pad-min   24px 导航栏**自己**的最小顶部留白 —— 没有切换条时用它，保证导航栏
                            与改动前完全一样（窄屏 14px）
   --bt-nav-pad-bottom 24px 导航栏下留白（窄屏 14px）
   ── 派生量 ────────────────────────────────────────────────────────────
   --bt-banner-offset = 导航栏 box 高度 −「切换条已经占掉的文档流高度」
     = max(切换条高, 最小留白) + 内容行高 + 下留白 − 切换条高
     · 有切换条：32 + 24 = 56px（横幅顶 = 31 + 56 = 87 = 导航栏 box 底边 ✔ 严丝合缝不重叠）
     · 无切换条：24 + 32 + 24 = 80px（横幅顶 = 0 + 80 = 80 = 导航栏 box 底边 ✔） */
:root {
    --bt-bar-h: 31px;
    --bt-nav-inner-h: 32px;
    --bt-nav-pad-min: 24px;
    --bt-nav-pad-bottom: 24px;
    --bt-banner-offset: calc(max(var(--bt-bar-h), var(--bt-nav-pad-min)) + var(--bt-nav-inner-h) + var(--bt-nav-pad-bottom) - var(--bt-bar-h));

    /* ===== 品牌后的版本徽标（.brand-version / .brand-version-inner）=====
       暗色值 = 令牌化之前写死在 css/layout.css 里的原字面量（逐字节等价 → 暗色外观不变）：
         background: linear-gradient(135deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.08) 35%,
                                      rgba(255,255,255,.04) 65%, rgba(255,255,255,.5) 100%)
         box-shadow: 0 0 16px rgba(255,255,255,.08), 0 0 32px rgba(255,255,255,.04)
         .brand-version-inner background: var(--scrim-soft) → rgba(0,0,0,.25)
       ⚠ 这四档以前**两个主题完全相同**，亮色下白色描边在白导航栏上等于消失（=主题盲残留）。
       亮色值在下面的 `:root[data-theme="light"]` 覆盖。 */
    --brand-version-ring: linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.08) 35%, rgba(255, 255, 255, 0.04) 65%, rgba(255, 255, 255, 0.5) 100%);
    --brand-version-glow: 0 0 16px rgba(255, 255, 255, 0.08), 0 0 32px rgba(255, 255, 255, 0.04);
    --brand-version-inner-bg: rgba(0, 0, 0, 0.50);
}

/* 亮色值：描边换成**深色**半透明（白描边在白导航栏上不可见），内层胶囊保持"浅色玻璃"。
   取值理由（真实叠加栈合成；"最差 stop"取描边最不透明的第 1 档，是最保守的口径）：
     · 描边最差 stop = rgba(20,20,26,.35) 叠在白导航栏上 → rgb(172,172,176)；
       内层胶囊 rgba(20,20,26,.06) 再叠上去 → rgb(163,163,167)；
       文字 rgba(20,20,26,.92) 压在上面 → 9.0:1 ✔
     · 暗色侧：内层胶囊 rgba(0,0,0,.50) 叠在描边最亮 stop (rgb(191,191,191)) 上 → rgb(96,96,96)，
       文字 rgba(255,255,255,.95) → 4.76:1 ✔（改前 11px 那格只有 3.22:1 ✗） */
:root[data-theme="light"] {
    --brand-version-ring: linear-gradient(135deg, rgba(20, 20, 26, 0.35) 0%, rgba(20, 20, 26, 0.08) 35%, rgba(20, 20, 26, 0.05) 65%, rgba(20, 20, 26, 0.28) 100%);
    --brand-version-glow: 0 0 16px rgba(20, 20, 26, 0.10), 0 0 32px rgba(20, 20, 26, 0.06);
    --brand-version-inner-bg: rgba(20, 20, 26, 0.06);
}

/* ============ 顶栏（fixed，滚动加深，模板风格） ============ */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 70;
    /* ⚠ v=38 层级口径（用户截图：移动菜单整块被正文压住、条目浮在页面内容上）：
         正文里的浮动件 60/61  <  移动菜单 65  <  导航栏 70
       导航栏必须最高，因为移动菜单的关闭按钮（✕）就在导航栏里；
       移动菜单必须高于正文浮动件，否则固定层的背景会被正文盖住、看着像"菜单是透明的"。 */
    /* 顶部留白 = 切换条高度（至少 --bt-nav-pad-min）：让导航内容行始终从切换条**下方**开始，
       两者不再互相压住（旧写法固定 24px，切换条高 28~31px，会压住 logo 那一行 7~13.5px）。 */
    padding-top: max(var(--bt-bar-h), var(--bt-nav-pad-min));
    padding-bottom: var(--bt-nav-pad-bottom);
    transition: all 300ms var(--ease);
    /* ⚠ v=42 修（用户：「.site-switch-bar 里的链接点不动了」）：
       导航栏是 position: fixed 且从 top:0 起算，它的 padding-top 正好等于切换条高度
       ⇒ 切换条那一整条被包在导航栏的盒子里；层级提到 70（为了压住移动菜单 65）之后，
       导航栏开始"吞掉"切换条上链接的点击 ✗。
       做法：导航栏这个**盒子**不接收指针事件，只有它真正的内容子元素接收 ⇒
         · 内容（logo / 导航项 / 图标按钮）照常可点 ✓
         · 切换条、以及任何落在导航栏 padding 区里的东西都能被点到 ✓
       注意：#mobile-menu 不是 .navbar 的子元素（它在 #site-nav 下，自带 pointer-events），不受影响 ✓。 */
    pointer-events: none;
}

/* 只把指针事件还给导航栏的**内容**（结构：.navbar > 内容容器 / 移动菜单按钮等） */
.navbar > * {
    pointer-events: auto;
}

.navbar.scrolled {
    /* 滚动后切换条已随文档流滚出视口，这里刻意**不加** --bt-bar-h：
       导航栏收回原来的紧凑高度（60px 不透明底 + 模糊），切换条的 0~31px 区间仍被它整块盖住，
       不会在顶部露出一条内容缝。 */
    padding-top: 14px;
    padding-bottom: 14px;
    background: var(--nav-scrolled-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-faint);
}

.navbar-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--margin-mobile);
    padding-right: var(--margin-mobile);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

@media (min-width: 768px) {
    .navbar-inner {
        padding-left: var(--margin-desktop);
        padding-right: var(--margin-desktop);
    }
}

.navbar-left {
    display: flex;
    align-items: center;
    gap: 32px;
}

.brand {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* 品牌前的 Logo 图标：无边框/背景/内边距，与文字对齐（32px） */
.brand-mark {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.brand-mark img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* 品牌后的版本徽标（DeepSeek Harness 式：渐变描边 + 内层玻璃胶囊，renderers.heroBadge 填充）
   ⚠ 描边/外发光/内层胶囊的取值全部走 --brand-version-* token（暗色 = 原字面量，亮色在
      css/layout.css 顶部的 :root[data-theme="light"] 覆盖）—— 以前这四档两主题完全相同，
      亮色下白色描边在白导航栏上等于不存在。 */
.brand-version {
    display: inline-flex;
    align-items: center;
    padding: 1px;
    border-radius: 8px;
    background: var(--brand-version-ring);
    box-shadow: var(--brand-version-glow);
    margin-left: 2px;
}

.brand-version-inner {
    display: inline-block;
    padding: 4px 9px 3px;
    border-radius: 7px;
    background: var(--brand-version-inner-bg);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    color: var(--text-emphasis);
    white-space: nowrap;
}

.nav-links {
    display: none;
    align-items: center;
    gap: 32px;
}

@media (min-width: 768px) {
    .nav-links {
        display: flex;
    }
}

.nav-links a {
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    transition: color var(--transition-fast);
}

.nav-links a:hover {
    color: var(--text);
}

/* ---------------- 页面「维护中」标记（顶栏 / 移动菜单共用） ----------------
   ⚠ 这段样式**必须**留在静态 CSS 里（v=20 的教训）：以前它是 js/components/nav.js 里
   injectNavStateStyle() 动态插的 <style>，而那个函数从来没被调用过 ⇒ 标记完全没有样式，
   在移动菜单里继承 24px 字号、背景透明 ⇒ 看起来就是「新闻维护中」这样一段纯文字（用户反馈）。
   静态样式的好处：首帧即生效、不依赖 JS 时序、也不受 CSP 限制。
   视觉口径（用户要求）：像标签一样、小一点、中规中矩 —— 小圆角药丸 + 状态警示色 token
   （亮/暗主题各自有一份 --status-warn*，自动跟随）。 */
.nav-links a.is-maintenance,
.mobile-menu-item.is-maintenance {
    opacity: .72;                 /* 维护中的入口保留，只是弱化一点 */
}

.nav-maint-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border: 1px solid var(--status-warn-border);
    border-radius: 6px;
    background: var(--status-warn-bg);
    color: var(--status-warn);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 15px;            /* 用行高撑高度而不是 padding，跟中文基线更贴 */
    letter-spacing: .02em;
    white-space: nowrap;
    vertical-align: 1.5px;        /* 顶栏 14px 文字下微抬，视觉居中 */
}

/* 移动菜单项字号大得多（24px）⇒ 标记跟着放大一档，否则小得像错字 */
.mobile-menu-item .nav-maint-tag {
    margin-left: 8px;
    padding: 0 7px;
    font-size: 11.5px;
    line-height: 17px;
    vertical-align: 2.5px;
}

/* 平板抽屉里的那一份（与移动菜单同一类节点，尺寸略小） */
@media (max-width: 1199px) and (min-width: 768px) {
    .mobile-menu-item .nav-maint-tag {
        font-size: 11px;
        line-height: 16px;
    }
}

.navbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 导航图标按钮（爱发电等外链图标） */
.nav-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-subtle);
    background: var(--surface-glass-subtle);
    border-radius: 50%;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.nav-icon:hover {
    border-color: var(--border-strong);
    background: var(--surface-raised);
}

.nav-icon img {
    width: 18px;
    height: 18px;
}

/* 语言切换（deepseek 式分段按钮：中文/EN 同显，当前语言高亮） */
.lang-toggle {
    display: flex;
    align-items: center;
    height: 32px;
    padding: 3px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-subtle);
    background: var(--surface-glass);
}

.lang-toggle-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 500;
    /* 窄屏（账号页顶栏那条最挤）里 flex 收缩会把「中文」拆成「中/文」两行，
       看起来像排版坏了（用户报「移动端导航栏没自适应」）。文字一律不许换行，
       宽度不够时宁可让旁边的东西缩。 */
    white-space: nowrap;
    color: var(--text-muted);
    transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.lang-toggle-item:hover {
    color: var(--text);
}

.lang-toggle-item.is-active {
    background: var(--surface-container);
    color: var(--text);
    box-shadow: 0 1px 3px var(--shadow-soft);
}

/* ============ 右上角账号区（未登录：登录 / 注册；已登录：头像 + 下拉菜单） ============
   位置与 ChatGPT / 爱发电 的习惯一致：账号在**右上角**，不占左边那排内容链接。
     · 未登录：两枚按钮 —— 「登录」弱样式、「注册」主色实心，一眼知道该点哪个；
     · 已登录：头像 + 昵称 + 小箭头，点开是下拉卡片（用户信息头 + 四个入口 + 退出登录）。
   窄屏（≤900px）隐藏这一块，同样的内容进汉堡菜单（见 .mobile-menu-account）。 */
.nav-account {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-account-login,
.nav-account-signup {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 14px;
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.nav-account-login {
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
}

.nav-account-login:hover {
    color: var(--text);
    background: var(--surface-glass-soft);
}

/* 「注册」这颗按钮用**跨主题反转色**，不用品牌紫（用户口径：亮色主题下黑底白字、
   暗色主题下白底黑字 —— 也就是跟主 CTA / 头像下拉里那颗主按钮同一套观感）。
   --surface-inverse / --accent-ink 这两个令牌本来就是"随主题反转"的一对，别改成固定色。 */
.nav-account-signup {
    color: var(--accent-ink);
    background: var(--surface-inverse);
}

.nav-account-signup:hover {
    background: var(--surface-inverse-hover);
}

.nav-account-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 10px 0 4px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    background: var(--surface-glass-subtle);
    color: var(--text-on-surface);
    font-family: inherit;
    font-size: 13.5px;
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.nav-account-btn:hover {
    border-color: var(--border-strong);
    background: var(--surface-raised);
}

.nav-account-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--surface-glass-soft);
}

/* 头像 + 右上角"有未读消息"的小点。
   用户口径："有消息的时候，导航栏的头像角落是不是可以显示一下，那个就跟红点一样的，
   只不过我们现在是紫色的" —— 常驻显示（不用点开下拉），只表示"有未读"，不显示数字。
   ⚠ 必须包一层定位容器：小点要贴**头像**右上角，直接挂在账号按钮上会飘到昵称/箭头那边。 */
.nav-avatar-wrap {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}
.nav-avatar-dot {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--primary);
    /* 一圈底色描边，让它从头像图片上"浮"起来（导航栏未滚动时是透明底，用 --bg 最稳） */
    box-shadow: 0 0 0 2px var(--bg);
}

.nav-account-avatar-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
}

.nav-account-name {
    max-width: 8.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-account-caret {
    transition: transform var(--transition-fast);
}

.nav-account-btn[aria-expanded="true"] .nav-account-caret {
    transform: rotate(180deg);
}

.nav-account-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: 232px;
    padding: 6px;
    border: 1px solid var(--border-visible);
    border-radius: var(--radius);
    background: var(--surface-container);
    box-shadow: 0 14px 36px var(--shadow-soft);
    z-index: 60;
}

.nav-account-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 11px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border-faint);
}

.nav-account-head-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.nav-account-head-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-account-head-mail {
    font-size: 12px;
    color: var(--text-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 注册登录维护中：导航右侧那一小块（不是按钮，点了没用，所以做成"状态标签"的样子） */
.nav-auth-maint {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border: 1px solid var(--accent-peach-line, var(--border-subtle));
    border-radius: var(--radius-pill);
    background: var(--accent-peach-bg, var(--surface-glass-soft));
    color: var(--accent-peach, #c2410c);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.nav-auth-maint .material-symbols-outlined {
    font-size: 16px;
    color: inherit;
}

.nav-account-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-on-surface);
    font-family: inherit;
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.nav-account-item:hover {
    background: var(--surface-glass-soft);
    color: var(--text);
}

.nav-account-item .material-symbols-outlined {
    color: var(--text-muted);
}

.nav-account-item:hover .material-symbols-outlined {
    color: var(--primary);
}

/* 「我的消息」右侧的未读数小胶囊（桌面下拉与移动端菜单共用同一个类）。
   margin-left:auto 把它推到行尾；没未读时 JS 会给它加 hidden，不占位。 */
.nav-account-badge {
    margin-left: auto;
    flex: 0 0 auto;
    min-width: 18px;
    padding: 0 6px;
    border-radius: 9999px;
    background: var(--primary);
    color: var(--surface-card, #fff);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* 退出登录：给一点区分色，但不用纯红（红色留给"危险且不可逆"的操作） */
.nav-account-logout {
    color: var(--accent-peach, #e08a5a);
}

.nav-account-logout .material-symbols-outlined {
    color: inherit;
}

/* 移动端菜单按钮（DeepSeek Harness 式汉堡，仅窄屏显示，见 responsive.css）
   ⚠ 底色不能再用"看不见的玻璃"：原来是 var(--surface-glass-subtle)（亮色 5% / 暗色 4% 透明），
   在移动端顶栏上几乎等于没有背景，用户反馈「背景怎么变成透明的了」⇒ 换成实一点的 raised 面。 */
.nav-menu-btn {
    display: none;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: var(--surface-raised);
    border-radius: 50%;
    color: var(--text);
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.nav-menu-btn:hover {
    border-color: var(--border-strong);
    background: var(--surface-raised);
}

/* 三横线图标：点击展开时动画变为 ×（上下线旋转、中线隐去） */
.menu-icon {
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
}

.menu-bar {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 1.6px;
    border-radius: 2px;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: transform 300ms var(--ease), opacity 200ms var(--ease);
}

.menu-bar:nth-child(1) {
    transform: translate(-50%, calc(-50% - 5px));
}

.menu-bar:nth-child(3) {
    transform: translate(-50%, calc(-50% + 5px));
}

.nav-menu-btn.is-active .menu-bar:nth-child(1) {
    transform: translate(-50%, -50%) rotate(45deg);
}

.nav-menu-btn.is-active .menu-bar:nth-child(2) {
    opacity: 0;
}

.nav-menu-btn.is-active .menu-bar:nth-child(3) {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* 移动端菜单：全屏黑底（DeepSeek Harness 官网式）。位于 body 层（z-index 低于导航栏，
   使 logo 与 × 按钮浮在菜单之上），避免被 .navbar.scrolled 的 backdrop-filter 锚定。 */
.mobile-menu {
    display: none;
    position: fixed;
    inset: 0;
    /* 65 = 高于正文里的浮动件（60/61）、低于导航栏（70）。
       ⚠ v=38 实测：原来是 45，比正文浮动件低 ⇒ 固定层的白底被正文盖住，
       菜单条目看起来"浮在页面内容上"（用户截图）。 */
    z-index: 65;
    padding: 0 var(--margin-mobile);
    /* ⚠ 必须带**兜底值**（v=37 修，用户截图：移动菜单整块透明、条目叠在页面内容上）：
       --mobile-menu-bg 定义在 base.css，而 base.css 是被浏览器/CDN 缓存的独立文件 ——
       只要访问者手里还是**旧版 base.css**（那次改动的 ?v= 没提 / 强刷没做），
       var() 解析不出来 ⇒ background 失效 ⇒ 固定层变透明，菜单条目就"浮"在正文上 ✗。
       兜底链：菜单专用色 → 页面底色 --bg → 保险的 #ffffff，任何一层能解析出来都不会透明。 */
    background: var(--mobile-menu-bg, var(--bg, #ffffff));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow-y: auto;
    transition: opacity 220ms var(--ease), visibility 0s 220ms;
}

.mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 220ms var(--ease);
}

.mobile-menu-inner {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding-top: 116px; /* 避开顶部导航栏（含未滚动时的留白） */
}

.mobile-menu-links {
    flex: 1;
}

/* ---------- 移动菜单里的账号区（登录 / 注册 或 用户卡片 + 四个入口 + 退出） ----------
   ⚠ 与右上角那块的取舍：窄屏没有"右上角"可用（那里只剩汉堡按钮），
     所以同一份内容整体搬到菜单最上面 —— 两处都由 nav.js 的 renderAccount() 填。 */
.mobile-menu-account {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-visible);
}

/* ⚠ 账号区**不用** .mobile-menu-item（那是 24px 字号 + 26px 上下留白的大号条目）：
   未登录的"登录/注册"、登录后的 6 个入口按那套排下来要占掉整屏，
   站点导航（新闻/活动中心/更新日志…）全被顶到屏幕外 —— 用户截图报过这问题。
   这里统一做成紧凑卡片：未登录 = 两颗并排按钮；已登录 = 用户行 + 两列入口 + 退出。 */
.mobile-acc-auth {
    display: flex;
    gap: 10px;
    padding: 4px 0 18px;
}

.mobile-acc-btn {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid var(--border-visible);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.mobile-acc-btn:hover,
.mobile-acc-btn:active {
    background: var(--surface-glass-soft);
    border-color: var(--border-strong);
}

/* 登录 = 主操作（实心），和桌面右上角那颗的观感一致 */
.mobile-acc-btn-primary {
    background: var(--surface-inverse);
    color: var(--accent-ink);
    border-color: transparent;
}

.mobile-acc-maint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    border: 1px dashed var(--border-visible);
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    font-size: 14px;
}

.mobile-acc-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 2px 14px;
}

.mobile-acc-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--surface-glass-soft);
}

.mobile-acc-user-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mobile-acc-user-name {
    font-size: 16.5px;
    font-weight: 650;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-acc-user-mail {
    font-size: 12.5px;
    color: var(--text-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 快捷入口：两列小卡片。窄到 320px 也放得下（每列 ≈ 130px）。 */
.mobile-acc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.mobile-acc-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: var(--surface-glass-soft);
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.mobile-acc-item:hover,
.mobile-acc-item:active {
    border-color: var(--border-strong);
    color: var(--primary);
}

.mobile-acc-item .material-symbols-outlined {
    font-size: 18px;
    color: var(--text-muted);
    flex: 0 0 auto;
}

/* ⚠ 只给"文字"那一层加省略号：原来写的是 span:last-child，而「我的消息」末尾多了一枚
   未读数胶囊之后，那条规则就作用到胶囊上了（文字反而溢出）。 */
.mobile-acc-item > span[data-i18n] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-acc-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 42px;
    margin-top: 8px;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: transparent;
    color: var(--accent-peach, #e08a5a);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.mobile-acc-logout .material-symbols-outlined {
    font-size: 18px;
}

.mobile-acc-logout:hover {
    background: var(--surface-glass-soft);
}

/* 大字号菜单项 + 分隔线（参考 DeepSeek Harness 官网移动菜单） */
.mobile-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 26px 0;
    border-bottom: 1px solid var(--border-visible);
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--text);
    opacity: 0;
    transform: translateY(16px);
    transition: color var(--transition-fast), opacity 140ms var(--ease), transform 140ms var(--ease);
}

.mobile-menu-item:hover,
.mobile-menu-item:active {
    color: var(--primary);
}

.mobile-menu.is-open .mobile-menu-item {
    opacity: 1;
    transform: translateY(0);
    transition: color var(--transition-fast), opacity 320ms var(--ease), transform 320ms var(--ease);
}

.mobile-menu.is-open .mobile-menu-item:nth-child(1) {
    transition-delay: 60ms;
}

.mobile-menu.is-open .mobile-menu-item:nth-child(2) {
    transition-delay: 110ms;
}

/* 底部语言切换（参考站：语言分段按钮固定在菜单底部） */
.mobile-menu-footer {
    /* 一行放两样：左边中英文切换、右边主题图标按钮（v=24：原来是上下两行，主题还占三个按钮） */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 24px 0 36px;
}

/* 注意：.lang-toggle 是块级 flex 容器，默认占满整行——需限定为内容宽度，
   否则外边框会被拉成长条（桌面导航栏中它是 flex 子项，不受影响）。 */
.mobile-menu .lang-toggle {
    width: fit-content;
    max-width: fit-content;
    height: 38px;
    padding: 4px;
}

.mobile-menu .lang-toggle-item {
    padding: 0 16px;
    font-size: 13px;
}

/* 全屏菜单（或确认弹窗）打开时隐藏回到顶部按钮 */
body.no-scroll .to-top {
    opacity: 0;
    pointer-events: none;
}

/* 阅读进度条（js/modules/effects.js 控制宽度） */
.scroll-progress {
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 2px;
    width: 0;
    background: linear-gradient(90deg, var(--primary-container), var(--primary));
    pointer-events: none;
}

/* ============ 站点横幅条（导航栏下方、满宽多条紧贴） ============
   渲染逻辑：js/modules/site-banners.js；文案配置：js/site-banners-config.js。
   DOM 位置：`#site-nav` 占位块（nav.js 把 fixed .navbar 挂进去）之后、
   切换条 .site-switch-bar 之后、<main> 之前。

   ⚠ 为什么这里要 margin-top：.navbar 是 **position: fixed**，它完全不占文档流高度，
   所以「导航栏下方」这段视觉空间在文档流里是零高度 —— 切换条（文档流第一行）之后的
   第一个元素会被 fixed 导航栏盖住，必须自己让位。
   让位量用 --bt-banner-offset（= 导航栏 box 高度 − 切换条已占的流高度，算式见文件顶部 :root
   的注释），由 js/modules/site-banners.js 实测的真实高度驱动 —— 不再硬编码 84px，
   因为在 768px 处导航栏 box 是 90px 而不是 84px，横幅顶端会被盖住 6px。 */

.bt-banners {
    position: relative;
    z-index: 40; /* 低于 .main(45)/移动菜单(65)/fixed 导航栏(70)，不抢层 */
    display: block;
    width: 100%;
    margin: var(--bt-banner-offset) 0 0; /* 上边距 = 让开 fixed 导航栏；左右下都为 0 → 满宽贴边 */
    padding: 0;
}

.bt-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 7px 16px;
    border: 0;
    text-align: center;
    font-family: var(--font-sans, var(--font-body, system-ui, sans-serif));
    font-size: 13px;
    line-height: 1.55;
    font-weight: 500;
    color: #ffffff; /* tone 底色都是实色，统一白字 */
    overflow-wrap: anywhere;
    word-break: break-word;
    transition: filter var(--transition-fast);
}

/* 可点整条（配置里给了 href）：悬停轻微提亮，保持白字可读 */
a.bt-banner:hover {
    filter: brightness(1.12);
}

.bt-banner-text {
    display: block;
    min-width: 0;
    max-width: 100%;
}

/* tone 配色（v=41 规范化）—— 分两套，**同一批颜色**：
   ── 七色（红橙黄绿青蓝紫，用户口径：起码七色要支持）──
      red orange yellow green cyan blue purple
   ── 语义别名（写语义更好读，落到的就是上面某个颜色）──
      danger=red  warn=yellow  success=green  info=blue  neutral=灰（无彩，单独一档）
      brand=purple  tip=cyan  amber=橙偏暗（与 orange 分两档，给"注意/时间"用）
   ⚠ 对比度：除 yellow/warn 外一律"实色底 + 白字"，都按 ≥4.5:1 挑过；
     yellow(#eab308) 压白字只有 1.9:1 ✗ ⇒ 它单独用深色字（#1c1917 ≈ 10:1 ✓），
     这也是"warn 不能是红的"之后必须补的一条：黄色提示条本来就该是深字。
   ⚠ 新增 tone 三处同步：本文件 / js/modules/site-banners.js 的 TONES 白名单 / js/banners-admin.js 的 TONES。 */
.bt-banner.is-red,
.bt-banner.is-danger {
    background-color: #E11D48; /* 红：严重故障 / 停机 */
}

.bt-banner.is-orange {
    background-color: #c2410c; /* 橙：变更 / 迁移提醒 */
}

.bt-banner.is-amber {
    background-color: #b45309; /* 琥珀：注意 / 时间类提醒（比 orange 更暗一档） */
}

.bt-banner.is-yellow,
.bt-banner.is-warn {
    background-color: #eab308; /* 黄：警告（原 warn 是玫红 —— 不符合语义，v=41 改） */
    color: #1c1917;            /* 黄底必须压深字：白字只有 1.9:1 ✗ */
}

.bt-banner.is-green,
.bt-banner.is-success {
    background-color: #15803d; /* 绿：成功 / 上线 */
}

.bt-banner.is-cyan,
.bt-banner.is-tip {
    background-color: #0e7490; /* 青：使用技巧 / 说明 */
}

.bt-banner.is-blue,
.bt-banner.is-info {
    background-color: #1d4ed8; /* 蓝：常规信息 / 免责声明 */
}

.bt-banner.is-purple,
.bt-banner.is-brand {
    background-color: #6d28d9; /* 紫：活动 / 推广（与站点主色同族） */
}

.bt-banner.is-neutral {
    background-color: #3f3f46; /* 灰：中性提示（无彩色，不算在七色里，但保留） */
}
/* 末尾的 ✕ 关闭按钮：纯文本字符，不依赖图标字体（避免子集缺字变乱码） */
.bt-banner-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 13px;
    line-height: 1;
    opacity: 0.8;
    cursor: pointer;
    transition: opacity var(--transition-fast), background-color var(--transition-fast);
}

.bt-banner-close:hover {
    opacity: 1;
    background: var(--scrollbar-thumb);
}

/* 窄屏：让位高度不用再单独收紧 —— --bt-bar-h / --bt-nav-inner-h / --bt-nav-pad-bottom
   的窄屏取值在 css/responsive.css 的 ≤640px 里，--bt-banner-offset 会自动跟着变。
   这里只管横幅自身的紧凑排版（左右内边距收紧、字号再小一点，保证长文案不在小屏被挤断）。 */
@media (max-width: 640px) {
    .bt-banner {
        padding: 6px 12px;
        font-size: 12px;
        line-height: 1.5;
    }
}

/* ============ 主内容 ============ */

/* ⚠⚠ 页面外壳的"贴底"契约（2026-10-11 修）
   <body class="min-h-screen flex flex-col relative overflow-x-hidden"> 这几个类名是早期从
   Tailwind 原型抄过来的，而**站点 CSS 里从来没有定义过它们** —— 于是：
     · body 既不是 flex 容器、也没有最小高度；
     · 下面 `.main { flex-grow: 1 }` 一直是空转（flex-grow 只在 flex 容器里生效）。
   实测后果：内容还在加载（<main> 里只有骨架/占位）时，页脚直接跟在上一个元素后面 ——
   表现为「页脚跑到上面来，内容到位了又被顶下去」（用户报：详情页加载时底部栏跑上来，
   而且很多页面都有）。这里把这几个类名在 body 上的唯一用途补成真实规则，
   改动只落在 body 上，其它元素一律不碰。
   ⚠ 故意**不**补 .relative：body 目前没有 position，加它会把一批 absolute 元素
     的定位基准从"初始包含块"改成 body，属于另一种风险，跟本次要修的问题无关。 */
body.min-h-screen { min-height: 100vh; }
body.flex { display: flex; }
body.flex-col { flex-direction: column; }
body.overflow-x-hidden { overflow-x: hidden; }

.main {
    flex-grow: 1;
    position: relative;
    /* ⚠ z-index 10 → 45（与横幅 40 / 导航栏 50 之间的那一档，v=34 修）：
       .main 是唯一层叠上下文，里面的浮层（文档站 ≤900 的抽屉 z 990、901–1199 的
       「本页目录」面板、文章灯箱 z 990）**无论写多大的 z-index 都只能盖住 .main 里的东西**。
       而站点横幅容器是 <body> 的直系兄弟、z-index 40 > 10 ⇒ 横幅会画在抽屉/面板**之上**：
       实测（375px，文档站抽屉打开）横幅把抽屉顶部的搜索框整块盖住，用户报「目录显示不全」✗。
       改到 45 之后：横幅（40）在 .main 之下 ⇒ 抽屉/面板/灯箱都能正常盖住横幅，
       而固定导航栏（70）仍在最上（抽屉顶边本来就在导航栏底边之下，两者不重叠）。
       ⚠ 不要写成 ≥65：导航栏（70）与移动菜单（65）必须继续压在一切内容之上 ——
       v=38 的实测教训：.main 也曾是 45，和移动菜单的 45 **同值**，而 .main 在 DOM 里靠后
       ⇒ 整页正文盖住了固定菜单（用户截图：菜单条目浮在正文上）。现在层级是
       正文 .main 45 < 横幅 40（在 .main 之下）… < 移动菜单 65 < 导航栏 70。 */
    z-index: 45;
    /* 顶部让位：**横幅在场时由横幅容器自己让位**（.bt-banners 的 margin-top: --bt-banner-offset，
       它的顶边恰好落在导航栏盒底边，<main> 紧随其后 ⇒ 自然顶边已经等于固定层底边），
       所以这里不写 padding-top；横幅全被关掉时容器根本不存在（site-banners.js 在
       items.length === 0 时直接 return null）⇒ 由下面 :has 那条的反面兜底让位，见下。 */
    /* padding-top: 60px; */
    padding-bottom: 60px;
}

/* 没有横幅容器时（后台把横幅全关 / 源码里删空）：固定导航栏底下必须自己让位，
   否则首个内容块会钻到导航栏底下（实测 main.top = 0、hero 首个标题被压掉）✗。
   让位量 = **导航栏盒高**，用站点既有的那几个令牌现算（与文档站同一套口径）：
     max(切换条高, 最小上留白) + 内容行高 + 下留白
   · 有切换条：31 + 32 + 24 = 87（桌面）/ 28 + 30 + 14 = 72（≤640）
   · 无切换条（JS 把 --bt-bar-h 置 0）：24 + 32 + 24 = 80 / 14 + 30 + 14 = 58
   ⇒ 断点之间不用各写一份，两侧都由令牌自己变（所以 css/responsive.css 里那条 ≤640 的
      128px 旧估算被删掉了：它是写死的"导航栏盒高"，与横幅叠加时就是多出来的空带）。 */
body:not(:has(#bt-site-banners)) .main {
    padding-top: calc(max(var(--bt-bar-h, 0px), var(--bt-nav-pad-min, 24px))
        + var(--bt-nav-inner-h, 32px) + var(--bt-nav-pad-bottom, 24px));
}

/* 区块：全宽发丝分隔 + 大留白 */
.section {
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--margin-mobile);
    padding-right: var(--margin-mobile);
    /* padding-top: 32px; */
    /* padding-bottom: 32px; */
}

@media (min-width: 768px) {
    .section {
        padding-left: var(--margin-desktop);
        padding-right: var(--margin-desktop);
    }
}

.content-section {
    border-top: 0px solid var(--border-faint);
}

/* ============ 页脚 ============ */

.footer {
    border-top: 1px solid var(--border-faint);
    padding-top: 48px;
    padding-bottom: 48px;
}

.footer-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--margin-desktop);
    padding-right: var(--margin-desktop);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 40px 48px;
}

.footer-brand { flex: 0 1 320px; max-width: 360px; }
/* 栏目组：作为整体待在品牌右侧；它内部再折行，所以折下去的栏目
   仍然与第一栏左对齐、留在右侧区块内（不会跑到品牌下面） */
.footer-cols {
    flex: 3 1 520px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    align-items: start;
    gap: 24px 32px;
}
/* max-width：栏目多到折行时，最后一行的少数栏目不会被拉伸成半屏宽 */
/* 宽度由 .footer-cols 的 grid 轨道统一决定，这里不要再写宽度 —— 写了反而会与轨道冲突 */
.footer-col { min-width: 0; }

@media (min-width: 768px) {
    /* 页脚用 flex 自动排布，不需要在这里写列数 —— 加减栏目都不用改样式 */
}

.footer-logo {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    display: block;
}

.footer-brand p {
    margin-top: 12px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 300;
    max-width: 360px;
    line-height: 1.7;
}

.footer-copy {
    margin-top: 16px !important;
    color: var(--text-faint) !important;
    font-family: var(--font-mono);
    font-size: 12px !important;
}

/* 备案号（仅国内域名显示） */
.footer-icp {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
}
.footer-icp a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
    text-decoration: none;
    transition: color .2s;
}
.footer-icp a:hover { color: var(--text); }
.footer-icp img { vertical-align: middle; }

/* 页脚邮件订阅表单（紧凑：紧跟 footerDesc，单行输入框 + 按钮） */
.newsletter-form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    max-width: 300px;
}

.newsletter-input {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    background: var(--surface-low);
    color: var(--text);
    font-size: 14px;
    font-family: var(--font-body);
    transition: border-color var(--transition-fast);
}

.newsletter-input:focus {
    outline: none;
    border-color: var(--primary-container);
}

.newsletter-input::placeholder {
    color: var(--text-faint);
}

.newsletter-btn {
    flex-shrink: 0;
    height: 38px;
    padding: 0 18px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-glass-emphasis);
    background: var(--surface-inverse);
    color: var(--on-inverse);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    transition: opacity var(--transition-fast), background var(--transition-fast);
}

.newsletter-btn:hover:not(:disabled) {
    background: var(--surface-inverse-hover);
    opacity: 1;
}

.newsletter-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.newsletter-msg {
    margin-top: 8px !important;
    font-size: 12px !important;
}

.newsletter-msg.is-ok {
    color: var(--status-ok) !important;
}

.newsletter-msg.is-err {
    color: var(--status-danger) !important;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-col h5 {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 4px;
}

.footer-col a {
    color: var(--text-muted);
    font-size: 14px;
    transition: color var(--transition-fast);
}

.footer-col a:hover {
    color: var(--text);
}

/* 页脚 Cloudflare 致谢（Pages 托管 + Workers/D1 API，均在免费套餐） */
.footer-powered {
    margin-top: 10px !important;
    color: var(--text-faint) !important;
    font-size: 12px !important;
}

/* 不用 inline-flex：flex 框内 SVG 无文字基线会把整框抬高、与前后中文错位；
   保持文字自然基线，图标单独按基线下沉与 12px 小字视觉居中 */
.footer-powered-link {
    color: inherit;
    transition: color var(--transition-fast);
}

.footer-powered-link:hover {
    color: var(--text-muted);
}

.footer-powered-link svg {
    width: 13px;
    height: 13px;
    vertical-align: -2px;
    margin-right: 2px;
}
/* ============ 导航栏：主题切换按钮（明/暗，Phase 3） ============
   外观**完全继承 .nav-icon**（32×32 / 圆形 / 边框 / hover 一致）→ 三态下导航栏高度与布局不变，
   因此 site-banners.js 实测写入的 --bt-banner-offset 不需要重算，横幅与内容不会跳动。
   三态图标：字体子集里已**加法式补进** light_mode / dark_mode / brightness_auto
   （另备选 contrast / wb_sunny / nightlight），连字名以 assets/fonts/icons.txt 为准；
   按钮实际用 brightness_auto（跟随系统）/ light_mode（明亮）/ dark_mode（深色）三态图标，
   由 js/modules/asset-fallback.js 的 ICON 表写入（js/components/nav.js 的初始标记是 auto）。
   补字形的流程见 assets/fonts/SOURCE.txt：**只能按方式 A 往现有子集里追加字形，
   绝不可用完整字体 v2.973 整体重建**（完整字体比子集新，重建会毁掉 11 个在用的旧图标）。
   除图标外，三态仍用边框/透明度标记区分（见下方 [data-theme-state=*] 规则），
   文案仍用 title/aria-label 精确表达。
   颜色全部走 Phase 1 的 token，两种主题下都由令牌决定，不写死颜色。 */
.theme-toggle {
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    font: inherit;
}
.theme-toggle:hover { color: var(--text); }
.theme-toggle .material-symbols-outlined { font-size: 18px; transition: opacity var(--transition-fast); }
.theme-toggle[data-theme-state="light"] { color: var(--text); }
.theme-toggle[data-theme-state="light"] .material-symbols-outlined { opacity: 1; }
.theme-toggle[data-theme-state="dark"] .material-symbols-outlined { opacity: .5; }
.theme-toggle[data-theme-state="auto"] { border-style: dashed; }
.theme-toggle[data-theme-state="auto"] .material-symbols-outlined { opacity: .8; }
/* ============ 亮色主题：导航栏资源适配（Phase 4） ============
   本段全部以 :root[data-theme="light"] 开头 → **暗色下一个字节都不生效**，暗色外观与改动前逐像素一致。

   ① 爱发电图标（js/components/nav.js 输出的 .nav-ifdian-icon）：
      assets/icons/ifdian.svg 内部写死 #ffffff 填充（2 处），暗色导航栏上正常，
      亮色导航栏（浅底）上等于看不见。SVG 内部**不能**改色（改死深色会让暗色下反过来看不见），
      所以在这里按主题压色：brightness(0) 把整张图的非透明像素压成纯黑，透明区域不变。
   ③ 品牌 Logo 是两张 <img>（.brand-logo-dark / .brand-logo-light，都由 nav.js 生成）：
      暗色显示 logo.png（自带深色圆角底），亮色显示 logo-light.png（透明底 + 深色主体）。
      两张图同尺寸、显示尺寸由 .brand-mark img 统一固定 → 切换不会造成布局跳动。
   静态写死的 Logo（activity-admin.html 顶栏的 .brand-mark，不经 nav.js，没有第二张 <img>）
      在亮色下用同一张浅色版替换图片内容：两张 PNG 同为 512×512、显示尺寸由 CSS 固定 → 同样不跳动。 */
:root[data-theme="light"] .nav-ifdian-icon {
    filter: brightness(0);
}

.brand-logo-light {
    display: none;
}

:root[data-theme="light"] .brand-logo-dark {
    display: none;
}

:root[data-theme="light"] .brand-logo-light {
    display: inline-block;
}

:root[data-theme="light"] .admin-topbar-brand .brand-mark img {
    content: url("../assets/logo-light.png");
}


/* ============================================================================
   导航项「待判定」门闸（配套 js/modules/asset-fallback.js 的 BTNavGate）
   ----------------------------------------------------------------------------
   为什么需要：导航项的显隐由公开页状态（/api/lottery/pages）决定，而接口是异步的。
   首帧会先把入口画出来，状态到达后才被 nav.js 摘掉 —— 用户报的「被关闭的入口先显示
   再消失」（例如新闻）就是这个 FOUC。全站强制 CSP 禁止内联脚本，唯一能在**首帧之前**
   动手的位置是 js/modules/asset-fallback.js（<head> 内、所有样式表之前、同步加载）：
   它给 <html> 加上 pg-nav-wait，由下面这条规则**默认隐藏**所有页面导航项；
   nav.js 拿到状态后调用 window.BTNavGate.release() 移除这个类。

   ⚠ 只作用于 [data-nav-page]（=.nav-links 里的新闻/活动中心/赞助与开支/文档
     与 .mobile-menu 的对应项）——首页/品牌/语言/主题按钮**一律不受影响**；
     这些元素本身也是 nav.js 运行时注入的，无 JS 时不存在被隐藏的可能。
   ⚠ 用 visibility 而不是 display：隐藏期间仍占位，导航栏不会在判定完成时整体跳一下。
   ⚠ 兜底是 asset-fallback.js 里的 **6 秒安全超时**（实测教训：**不能**用 window load 兜底 ——
      fetch 不阻塞 load，接口慢时 load 很早就触发，门闸会提前打开、闪烁又回来）。
      接口挂了也必须放行，绝不能把入口永久藏掉。 */
html.pg-nav-wait [data-nav-page] {
    visibility: hidden !important;
}