/* ============================================================
   导航栏 + 手机端全屏菜单
   ============================================================ */

/* ---------- 主题变量：玻璃底色和文字色随内容深浅切换 ----------
   JS 按"导航条中线压住的内容亮度"给导航加减 nav-theme-dark / nav-theme-light 类，
   这里只有两样东西跟着变：--nav-glass（玻璃 RGB）、--nav-fg（文字色）。
   透明度、模糊、边框、阴影全部不动。
   默认（无类）即浅色；深色类一加整组变量翻面 */
.site-nav, .site-nav-top {
    --nav-glass: 251, 251, 253;               /* 浅色玻璃 RGB（原胶囊同款色） */
    --nav-fg: var(--color-text);                        /* 浅色主题文字：近黑 */
    --nav-divider: rgba(0, 0, 0, 0.16);       /* 页名分隔线基色（浅） */
    --nav-hover-bg: rgba(0, 0, 0, 0.06);      /* 下拉菜单项悬停底色（浅） */
    /* 中文光学居中补偿（2026-10-22 实测，不靠肉眼猜）。
       现象：导航条里所有中文都看着偏上，胶囊里的"登录/注册"尤其明显。
       根因是字体度量与几何中心不一致，两层叠加：
         ① 字框本身（canvas TextMetrics）：13px 下 asc 12 / desc 3，字框中心在基线上方 4.5px；
            而行框 20.8px 里的 half-leading 只把字框居中，字框在容器里其实偏上了 0.9px；
         ② 汉字墨迹比字框更靠上：'登录'实测 asc 11 / desc 1，墨迹中心在基线上方 5px，
            比字框中心又偏上 0.5px。
       合计视觉偏上 ≈ 1.4px，取 1.5px 补偿（13px 字 + 33px 胶囊的尺度下已到"看不出来"）。
       用法：需要补偿的元素把内容整体下移这个值，且不改变自身盒高/盒位。 */
    --nav-optical-y: 1.5px;
}
.nav-theme-dark {
    --nav-glass: 34, 34, 34;                  /* 深色玻璃 RGB（原置顶栏同款色） */
    --nav-fg: var(--color-bg);                        /* 深色主题文字：苹果白 */
    --nav-divider: rgba(255, 255, 255, 0.24); /* 分隔线基色（深，Apple keyline 同参数） */
    --nav-hover-bg: rgba(255, 255, 255, 0.1); /* 下拉菜单项悬停底色（深） */
}

/* 两个导航共用基础样式，动画只做 transform 位移。
   注意：这里不能放 backdrop-filter——子元素（下拉菜单）的 backdrop-filter
   只能对"最近带滤镜祖先之后绘制的内容"取样，页面背景不在范围内会失效。
   模糊改由独立的 .nav-glass 子元素承载（见下） */
.site-nav {
    position: fixed;
    top: 0;                   /* 锚定视口（ICB）顶：fixed 布局值归零，视觉偏移全部交给 transform——
                                 移动端地址栏收缩动画期间，带 top 偏移的 fixed 层会被部分内核
                                 （Chromium/ArkWeb）锚定到错误位置（触发显示时整条在屏幕外）；
                                 top:0 + transform 位移让锚定只剩"视口顶"一个稳定基准 */
    left: 0;
    right: 0;
    z-index: var(--z-nav);
    height: var(--nav-height);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);  /*苹果式缓出曲线*/
}

/* 置顶导航：普通流式，随页面滚动，滚走即消失。
   同样不能在这里放 backdrop-filter（会让内部下拉/搜索框的模糊失效），
   玻璃观感由 .nav-glass.nav-glass-bar 承载 */
.site-nav-top {
    height: var(--nav-height);
    position: relative;
    z-index: var(--z-nav);/* 手机端全屏菜单(z-999)打开时，导航条仍浮在菜单上面 */
}

/* 胶囊导航：默认藏在屏幕上方之外（只管布局，玻璃观感由 .nav-glass 负责）。
   ⚠️ 2026-10-16 二次修复：位置动画弃用 transform，改 top 过渡（布局驱动）。
   真机（鸿蒙 ArkWeb/老 Chromium）实测：fixed + transform 位移的合成层在
   地址栏收缩动画期间会被画到错误位置（触发显示时整条在屏幕外），布局值
   本身是对的——问题出在合成器对旧层位置的锚定。top 过渡每帧由主线程
   重算并重绘，"算对就画对"，与合成层锚定彻底无关。代价仅是 0.45s 过渡
   期间该 fixed 元素逐帧重排（脱离文档流、影响面只有它自己，可忽略） */
.site-nav-pill {
    top: -60px;               /* 隐藏态：整条位于视口上方之外（旧版藏 -55.2px，均在屏外，观感一致） */
    margin: 0 auto;
    width: calc(100% - 60px);
    max-width: 960px;
    transition: top 0.45s cubic-bezier(0.22, 1, 0.36, 1);  /* 覆盖 .site-nav 的 transform 过渡：
                                 苹果同款缓出曲线，节奏与旧版 transform 动画完全一致 */
}

/* 玻璃层：独立子元素承载模糊，
   这样下拉菜单不再嵌套在带滤镜的元素里，backdrop-filter 才能正常工作。
   iOS 26 液态玻璃改造（2026-10-15）：更透、更清晰——底色 0.5→0.35、blur 5px→4px。
   模糊是玻璃唯一的 GPU 大头，降半径=滚动更省；损失的"玻璃感"由下方两个
   伪元素（折射边缘 + 顶部高光弧）用零成本的渐变补回来 */
/* 玻璃视觉（底色 / 模糊 / 描边 / 阴影 / 圆角）——"玻璃面"的全部观感参数都在这里。
   手机端搜索浮层 .nav-search-float 也并列进这组选择器：它要和导航胶囊长得一模一样，
   所以共用同一份声明而不是复制一套参数。
   ⚠️ 2026-10-21 修正：浮层原先靠内部多一层 .nav-glass 子元素承载玻璃，结果是
   "HTML 与 CSS 版本一旦不同步就整块透明"（用户实测：胶囊底不见了）。
   现在浮层自身直接吃这组参数，与 HTML 结构解耦 */
.nav-glass,
.nav-search-float {
    border-radius: 980px;
    background: rgba(var(--nav-glass), 0.35);
    -webkit-backdrop-filter: saturate(180%) blur(5px);
    backdrop-filter: saturate(180%) blur(5px);
    /* 基础描边保留作兜底：老浏览器不支持 mask 挖空时，::before 折射环不生效，
       至少还有这一圈均匀亮边（观感=改造前的旧效果，可接受降级） */
    border: 0.3px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        inset 0 1px 1px rgba(160, 160, 160, 0.01),   /*顶部高光 0.25→0.5（用户指令）*/
        inset 0 -1.5px 1.5px rgba(204, 204, 204, 0.01),         /* 内暗边 0.08→0.5（用户指令） */
        0 4px 24px rgba(75, 75, 75, 0.12);
}
/* 定位：只有导航里的玻璃层是"垫在文字下面的绝对定位子元素"；
   搜索浮层本身就是浮起来的那一层，不吃这几条（它自己 position:fixed / z-index:1001） */
.nav-glass {
    position: absolute;
    inset: 0;                 /* 铺满整个胶囊 */
    /* 主题切换时只有这一层底色在渐变：0.24s + Apple localnav 同款缓动曲线，
       这就是"深浅切换非常柔和"的全部来源 */
    transition: background 0.24s cubic-bezier(0.28, 0.11, 0.32, 1);
    z-index: var(--z-behind-1);              /* 垫在导航文字下面，但仍在胶囊自己的层级内 */
    pointer-events: none;     /* 不拦截点击，点击全部落回链接 */
}

/* 液态玻璃·折射边缘（::before）：只画 1px 渐变环——上缘亮白（迎光）、
   两侧渐隐、下缘转暗（背光），模拟玻璃边缘"弯折光线"的透镜感，
   这是 iOS 26 与旧版磨砂玻璃最大的视觉差异。
   实现：伪元素铺满 + padding:1px 留出描边区，双层 mask 把中间掏空、
   只留边缘一环；渐变画在 padding 区域上，不遮挡中央模糊层。
   手机端搜索浮层共用同一条环（border-radius: inherit 自动跟随宿主圆角） */
.nav-glass::before,
.nav-search-float::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;   /* 跟随宿主：胶囊 980px / 置顶栏 0 */
    padding: 1px;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.4) 0%,    /* 上缘：迎光最亮 */
        rgba(255, 255, 255, 0.12) 35%,   /* 两侧过渡渐隐 */
        rgba(255, 255, 255, 0.02) 60%,
        rgba(0, 0, 0, 0.18) 100%         /* 下缘：背光暗边 */
    );
    /* 双 mask 合成"挖空"：content-box 一份 + 整盒一份，异或后只剩 1px 环 */
    -webkit-mask: linear-gradient(var(--color-white) 0 0) content-box, linear-gradient(var(--color-white) 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(var(--color-white) 0 0) content-box, linear-gradient(var(--color-white) 0 0);
    mask-composite: exclude;
}

/* 液态玻璃·顶部镜面高光弧（::after）：从顶边中央散开的椭圆径向渐变，
   只染上半部，是"湿玻璃"光泽的主要来源。
   深浅主题下都用白光——深底玻璃上这道弧反而更出效果，无需跟随 --nav-glass。
   搜索浮层同样共用 */
.nav-glass::after,
.nav-search-float::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        ellipse 80% 120% at 50% -20%,   /* 光源压在顶边外、只露下半弧 */
        rgba(255, 255, 255, 0.22) 0%,
        rgba(255, 255, 255, 0.06) 45%,
        transparent 70%
    );
}

/* 置顶导航的玻璃层：复用 .nav-glass 的模糊参数，只改外形——
   全宽矩形、无圆角、只保留下边缘玻璃边。
   模糊参数与胶囊一致，所有玻璃面观感统一 */
.nav-glass-bar {
    border-radius: 0;
    border: none;
    border-bottom: 0.5px solid rgba(171, 171, 171, 0.3);   /* 下边缘玻璃边：半透明白描边（mask 不支持时的兜底） */
    background: rgba(var(--nav-glass), 0.5);   /* 液态玻璃改造 0.4→0.32：与胶囊同步更透 */
    /* 与胶囊统一（用户指令）：同样的 blur 10px、顶部高光 0.5、内暗边 0.5——
       置顶栏原来只有下暗边，这里补上同款顶部高光，两条导航玻璃观感完全一致 */
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.5),
        inset 0 -1.5px 1.5px rgba(72, 72, 72, 0.01);
}

/* 置顶栏是全宽矩形且贴屏幕顶：折射环只剩"下缘一条"有意义，
   ::before 从整环降级为底部 1px 横线，两端渐隐到屏幕外 */
.nav-glass-bar::before {
    padding: 0 0 1px 0;       /* 挖空后只剩底部 1px */
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.35) 20%,
        rgba(255, 255, 255, 0.35) 80%,
        transparent 100%
    );
}

/* 置顶栏贴屏幕顶，顶部高光弧在屏幕外无意义；
   ::after 改为整栏从上向下的极淡白纱，保持玻璃"湿感" */
.nav-glass-bar::after {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.08) 0%,
        transparent 60%
    );
}

/* 胶囊导航：滚过欢迎语后滑入（JS 给 body 加 .nav-scrolled，维持原状）。
   显示态 = top:12px（与旧版视觉一致）；位置由 top 过渡驱动（见 .site-nav-pill 处说明） */
body.nav-scrolled .site-nav-pill { top: 12px; }

.nav-inner {
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 置顶导航：内容区最大宽度和左右边距（单独可调） */
.site-nav-top .nav-inner {
    max-width: var(--container);
    padding: 0 215px;
}

/* iPad 横屏及以下：置顶导航左右内边距跟随苹果三档渐变留白（--gutter-ramp），
   与首页 Banner/卡片左缘对齐（2026-10-14 起首页同走此网格），
   且渐变值恒 ≤140px，替代固定 215px 后窄屏不再挤压溢出。
   断点取 iPad Pro 12.9" 横屏视口宽度 1366px（11" 横屏 1194px 亦覆盖） */
@media (max-width: 1366px) {
    .site-nav-top .nav-inner {
        padding: 0 var(--gutter-ramp);
    }
}

/* 胶囊导航：内容区最大宽度和左右边距（单独可调） */
.site-nav-pill .nav-inner {
    max-width: var(--container);
    padding-left: 32px;
    padding-right: 10px;
}

/* 左侧组合：网站名 + 页名 横向排列 */
.nav-brand {
    color: var(--nav-fg);       /* 跟随主题：深色内容上变白，浅色内容上变黑 */
    font-size: 17px;
    font-weight: 900;           /* 最粗字重：900；字体栈无 900 档时浏览器自动取最接近的粗档 */
    letter-spacing: -0.01em;    /* 微收紧字距（原 0.02em） */
}

/* 当前页名：与网站名等大，普通深色文字，交给胶囊承载玻璃感 */
.nav-page {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--nav-fg);
    border-left: 1px solid var(--nav-divider);  /* 左侧细分隔线，颜色跟随主题 */
    padding-left: 14px;
    margin-left: 14px;
}

/* 导航栏用户头像：本文件只管尺寸和居中，
   玻璃效果（磨砂包边、玻璃罩）由 components/avatar.css 统一提供 */
.nav-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

/* 手机端隐藏页名
   ⚠️ 断点语义（2026-10-08 P3 卫生债补注）：这里的 768 是**前台面向公众
   页面的通用手机档**——前台 CSS 统一用它（nav / home / profile-manage /
   work_detail_toc / share_preview 共 8 处）；studio 编辑器自己的窄屏刻度
   是 720（studio/css/theme.css 的 --rsp-t 分档，管页面内容缩排）。
   两者刻意不同档：编辑器是工具型界面、窗口窄一档就该收起来；前台是给
   公众看的页面、768=真实手机竖屏起点。本轮只补注释不改断点值。 */
@media (max-width: 768px) {
    .nav-page { display: none; }
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 36px;
    list-style: none;
    height: 100%;               /* 拉满导航条高度：让"当前页"链接能撑到上下边缘 */
}

/* li 拉满高度并纵向居中内容：链接由此获得"整个导航条高"的定位基准，
   细横线才能贴住导航条下边缘；登录胶囊/头像/绝对定位下拉菜单视觉均不受影响 */
.nav-links > li {
    height: 100%;
    display: flex;
    align-items: center;
}

.nav-links a, .nav-links button {
    color: var(--color-nav-text);
    font-size: 13px;
    transition: color 0.2s ease;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
/* 悬停字色规则已删：旧的 .nav-links a:hover { color:#000 } 会穿透到下拉菜单项，
   深色主题下悬停底色是深玻璃+白 10%，字再变黑就不可读。
   下拉项（灵感/头像菜单）悬停只变底色不变字色；顶层链接的悬停反馈
   由下方的透明度 0.8→1 负责；登录胶囊和退出登录各有自己的专属色 */

/* ---------- 顶层链接：灰/白区分 + 悬浮变亮 + 当前页细横线 ----------
   对齐 Apple localnav 的做法："灰"不是另一种颜色，是同色文字的 80% 不透明度；
   悬浮升到 100%（深色主题下即灰字变白字），当前页恒定 100% + 下方 1px 细横线。
   登录胶囊和头像不参与（按钮/图片有自己的视觉），下拉子菜单也不受影响 */
.nav-links > li > a:not(.btn-pill):not(.nav-avatar) {
    color: var(--nav-fg);
    opacity: 0.8;
    position: relative;         /* 给当前页细横线当定位基准 */
    display: flex;              /* 撑满导航条高度（配合 li 的拉伸），文字仍垂直居中 */
    align-items: center;
    height: 100%;
    /* 光学补偿（与胶囊同一个 --nav-optical-y）：本元素是 flex 容器、align-items:center，
       padding-top 增加 p 会把内容中心下移 p/2，所以这里给 2 倍换取 1.5px 的实际下移。
       ⚠️ 只能加在 top 侧：padding-bottom 必须保持 0，当前页细横线是
       bottom:0 的绝对定位伪元素，padding-bottom 一旦非 0 细线就会被顶起来、离底边悬空。 */
    padding-top: calc(var(--nav-optical-y) * 2);
    transition: opacity 0.2s ease, color 0.2s ease;
}
.nav-links > li > a:not(.btn-pill):not(.nav-avatar):hover { opacity: 1; }
/* 当前页：选择器带上与基础规则相同的 :not() 前缀——
   否则 :not() 链的特异性更高，opacity:1 会被 0.8 压住，当前页永远发灰 */
.nav-links > li > a:not(.btn-pill):not(.nav-avatar).current {
    opacity: 1;                 /* 纯白/纯黑全不透明，默认态即最亮态 */
    font-weight: 600;           /* 当前页加粗（当前页不在导航里时 JS 不加 .current，全都不加粗） */
    cursor: default;            /* Apple 同款：当前页不再显示手型 */
}
/* 当前页细横线：绝对定位到链接的 padding box 底边。
   链接加了 padding-top 做光学补偿后，padding-bottom 仍是 0，
   padding box 底边 = border box 底边，细线位置不受影响 */
.nav-links > li > a.current::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;                  /* 与导航条下边缘重合（链接已撑满整条高度） */
    height: 1px;
    border-radius: 1px;         /* Apple 同款：1px 圆头细线 */
    background: var(--nav-fg);  /* 颜色跟随主题文字色 */
    opacity: 0.8;
}

/* 登录按钮：蓝色胶囊 */
.nav-links a.btn-pill {
    background: var(--color-accent);
    /* 不加 !important（2026-10-23 F5）：`.nav-links a`（本文件 292 行）设的是
       color: var(--color-nav-text)，特异性 (0,1,1)；本选择器 (0,2,1) 天然压过它。
       当年加 !important 是"怕压不住"，代价是后面每个想改胶囊色的规则都被迫跟进
       ——见下方 ghost 那段的历史注释。纪律见 base.css 顶部「!important 使用纪律」。 */
    color: var(--color-white);
    /* 左右 16px 固定；上下用光学补偿拆成"上多下少"（总高仍是 12px）——
       胶囊盒的位置/高度完全不变，内容盒整体下移 --nav-optical-y。
       ⚠️ 方向别写反：内容盒 top = 盒顶 + padding-top，所以要文字下移必须
       padding-top 变大、padding-bottom 变小；反过来会把文字推上去（实测踩过一次）。
       为什么不用平移：文字是裸文本节点，没有内联元素可挂 transform，
       改 padding 是唯一不动 HTML 的解法。 */
    padding: calc(6px + var(--nav-optical-y)) 16px calc(6px - var(--nav-optical-y));
    border-radius: 980px;
    /* 悬停阴影的"常态占位"：颜色全透明、半径 0。
       为什么不能省：box-shadow 的 none → 具体值不可插值，浏览器会直接硬切，
       hover 一进去投影就"啪"地出现，没有渐入。给一个同构的透明阴影才能平滑过渡。 */
    box-shadow: 0 0 0 rgba(0, 113, 227, 0);
    /* transition 也不加 !important：能影响它的只有 `.nav-links a` 的
       `transition: color .2s`（(0,1,1)），本选择器 (0,2,1) 已经胜出。
       原注释写"必须带 !important"是误判——!important 不提升特异性，
       这里原本就靠特异性赢，加码纯属心理保险。 */
    transition: background 0.2s ease, box-shadow 0.25s ease;
}
/* 悬停（2026-10-22 重做）：旧版只用 --color-accent-hover(#0077ed)，
   与常态 #0071e3 仅差 6 个色阶，压在玻璃背景上肉眼读不出来，等于没反馈。
   新做法走"亮度 + 投影"双通道：底色拉开一档，再补一层同色淡阴影。
   为什么阴影取蓝色而不是黑色：黑阴影投在蓝色胶囊上会发灰发脏，
   同色阴影相当于给胶囊一圈光，视觉上是"浮起来"而非"变黑"。 */
.nav-links a.btn-pill:hover {
    background: #0066cc;                                  /* 比常态 #0071e3 深一档，浅底上明确可辨 */
    box-shadow: 0 2px 10px rgba(0, 102, 204, 0.38);
}

/* 注册胶囊：白底蓝字（2026-10-22 加）。复用 .btn-pill 而不是另写一整套的理由：
   1) 内边距/圆角/过渡全部继承基础胶囊，两枚按钮才能同高同形、悬停节奏一致；
   2) 顶层链接的灰度规则写成 :not(.btn-pill) 排除式，带上这个类就不会被
      0.8 不透明度压暗、也不会被 JS 打上"当前页"加粗。
   ⚠️ 2026-10-23 F5 更正：旧注释说"background/color 必须带 !important，否则盖不住"，
   那是错的。真实情况是两条选择器特异性同为 (0,2,1)，胜负只由源码顺序决定；
   作者不想赌顺序就上了 !important，而基础胶囊的 color 也带 !important，
   于是形成"你加我也加"的自我延续（审计 F5 点名的正是这一处）。
   现在改成显式多挂一个类名，把特异性抬到 (0,3,1)：胜负由特异性决定，
   不再依赖两条规则的先后，也不需要 !important。
   注：DOM 上这两个类本来就同时存在（nav_items.html 写的是
   class="btn-pill btn-pill-ghost"），选择器加长不改变匹配结果。 */
.nav-links a.btn-pill.btn-pill-ghost {
    background: var(--color-white);
    color: var(--color-accent);
}
/* 悬停（2026-10-22 重做）：旧版是 #fff → #f2f6ff，差 4% 亮度，
   在白玻璃导航上完全读不出来。现改为淡蓝底（用户已确认可接受），
   文字仍是品牌蓝，所以它读起来依旧是"白底按钮"，不会变成第二枚蓝按钮。
   ⚠️ 不能沿用基础胶囊 hover 的深蓝底：白底蓝字会瞬间变蓝底白字，
   语义上跟旁边的"登录"撞车，用户明确否掉过这个方向。
   特异性 (0,4,1) 高于 `.nav-links a.btn-pill:hover` 的 (0,3,1)，稳赢。 */
.nav-links a.btn-pill.btn-pill-ghost:hover {
    background: #eaf1ff;
    box-shadow: 0 2px 10px rgba(0, 113, 227, 0.22);   /* 淡蓝光晕，浅底上"浮起"感 */
}
/* 深色玻璃下的两支微调：导航压在深色内容上时（nav-theme-dark），
   蓝胶囊"变深"是往回退、读作不可点，所以改成"变亮"；
   白胶囊的黑色阴影在 #222 底上等于没有，换成更强的蓝色光晕。 */
.nav-theme-dark .nav-links a.btn-pill:hover {
    background: var(--color-accent-hover);                              /* 深底上向亮侧走，才是"被点亮" */
    box-shadow: 0 2px 12px rgba(0, 119, 237, 0.55);
}
/* 特异性 (0,5,1)：高于深色下蓝胶囊 hover 的 (0,4,1)，也高于白胶囊 hover 的 (0,4,1) */
.nav-theme-dark .nav-links a.btn-pill.btn-pill-ghost:hover {
    background: #dbe8ff;                              /* 深底上淡蓝要再压深一点才够反差 */
    box-shadow: 0 2px 12px rgba(0, 113, 227, 0.45);
}
/* 并排间距：.nav-links 的 gap 是 36px（各导航项之间的呼吸），
   登录与注册属于同一组动作，间距收到 10px（-26px 正好抵掉 gap）。
   为什么用负 margin 而不是改 ul 的 gap：gap 是全列表共用的，改它会把
   首页/作品/灵感一起挤紧。
   为什么选择器要带 .nav-links > 前缀：手机全屏菜单是另一个 ul
   （.mobile-menu，gap 为 0），不隔离的话两个胶囊会直接叠在一起。 */
.nav-links > li.nav-auth-signup { margin-left: -26px; }

/* 手机端搜索图标按钮（2026-10-21 加）：只出图标不出输入框，点它唤出悬浮胶囊。
   尺寸/居中/栈层全部对齐下面的汉堡按钮——两个图标同排、视觉重量与间距才一致。
   桌面端隐藏：桌面导航条里是常驻搜索框（.nav-search），不需要这个入口 */
.nav-search-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 32px; height: 32px;
    position: relative;
    z-index: var(--z-nav-control);             /* 与汉堡同层：手机端全屏菜单打开时仍在面板之上 */
    padding: 0;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);   /* 安卓点按不闪蓝框 */
}
/* 图标本体：颜色/透明度规则与汉堡图标同款，悬浮升到 100% */
.nav-search-toggle-icon {
    display: block;
    width: 18px; height: 18px;
    color: var(--nav-fg);
    opacity: 0.8;
    transition: color 0.3s ease, opacity 0.2s ease;
}
.nav-search-toggle:hover .nav-search-toggle-icon { opacity: 1; }
/* 浮层已打开时图标保持实色（相当于"当前激活"）：和链接 hover 的 0.8→1 同一套语言 */
.nav-search-open .nav-search-toggle-icon { opacity: 1; }

/* 汉堡按钮：桌面端隐藏（手机端媒体查询里改为 flex） */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 32px; height: 32px;
    position: relative;
    z-index: var(--z-nav-control);
    padding: 0;
    align-items: center;       /* 手机端 flex 布局时图标水平居中 */
    justify-content: center;   /* 手机端 flex 布局时图标垂直居中 */
}
/* 图标本体：Apple store 汉堡同款——18×18 画布、两根 1.2px 圆头细线（坐标在 base.html 的 points 里），
   默认 80% 不透明、悬浮升到 100%（Apple 同款），颜色跟随主题文字色 */
.nav-toggle-icon {
    display: block;
    width: 18px; height: 18px;
    color: var(--nav-fg);      /* 默认状态：跟随主题文字色（深色内容上白、浅色内容上黑） */
    opacity: 0.8;
    transition: color 0.3s ease;
}
.nav-toggle:hover .nav-toggle-icon { opacity: 1; }
/* 展开/关闭过程中图标颜色改为实色近黑（#1d1d1f）——面板全开后是 #fafafc 实底，
   Apple 同款汉堡/关闭图标均为实色黑，0.8 半透明灰会显得发虚 */
.nav-open .nav-toggle-icon,
.nav-closing .nav-toggle-icon {
    color: var(--color-text);
}

/* 两根线以自身几何中心为变换原点：polyline 的包围盒高度为 0，中心=线段中点
   （默认原点是整幅画布左上角，变形会飞出图标） */
.nav-toggle .bread {
    transform-box: fill-box;
    transform-origin: center;
}

/* 展开：两段式变形，逐帧复刻 Apple 的 SMIL 动画（keyTimes 0;0.5;1，
   keySplines 0.42,0,1,1 / 0,0,0.58,1 = 前半 easeIn、后半 easeOut，dur 0.24s 照抄）：
   第一段两根线同时收拢到画布中线 y=9（top 下移 4px、bottom 上移 3px），
   第二段绕中心交叉旋转 ±45° 并拉长到对角线长度（14 → 11.5×√2 ≈ 16.26，即 scaleX 1.161）。
   帧上的 animation-timing-function 只管"该帧到下一帧"的曲线，与 SMIL 两段 keySplines 一一对应 */
.nav-open .nav-toggle .bread-top {
    animation: nav-bread-top-open 0.24s both;
}
.nav-open .nav-toggle .bread-bottom {
    animation: nav-bread-bottom-open 0.24s both;
}
/* 关闭：反向动画（先交叉收回中线，再回到水平）。挂在 nav-closing 上——
   关闭瞬间 JS 先挂 nav-closing 再摘 nav-open，两个动画各自接管不冲突 */
.nav-closing .nav-toggle .bread-top {
    animation: nav-bread-top-close 0.24s both;
}
.nav-closing .nav-toggle .bread-bottom {
    animation: nav-bread-bottom-close 0.24s both;
}
@keyframes nav-bread-top-open {
    0%   { transform: translateY(0);                                   animation-timing-function: cubic-bezier(0.42, 0, 1, 1); }
    50%  { transform: translateY(4px);                                 animation-timing-function: cubic-bezier(0, 0, 0.58, 1); }
    100% { transform: translateY(4px) rotate(45deg) scaleX(1.161); }
}
@keyframes nav-bread-bottom-open {
    0%   { transform: translateY(0);                                   animation-timing-function: cubic-bezier(0.42, 0, 1, 1); }
    50%  { transform: translateY(-3px);                                animation-timing-function: cubic-bezier(0, 0, 0.58, 1); }
    100% { transform: translateY(-3px) rotate(-45deg) scaleX(1.161); }
}
@keyframes nav-bread-top-close {
    0%   { transform: translateY(4px) rotate(45deg) scaleX(1.161);     animation-timing-function: cubic-bezier(0.42, 0, 1, 1); }
    50%  { transform: translateY(4px);                                 animation-timing-function: cubic-bezier(0, 0, 0.58, 1); }
    100% { transform: translateY(0); }
}
@keyframes nav-bread-bottom-close {
    0%   { transform: translateY(-3px) rotate(-45deg) scaleX(1.161);   animation-timing-function: cubic-bezier(0.42, 0, 1, 1); }
    50%  { transform: translateY(-3px);                                animation-timing-function: cubic-bezier(0, 0, 0.58, 1); }
    100% { transform: translateY(0); }
}

/* ============================================================
   手机端适配
   ============================================================ */
/* 手机端全屏菜单：桌面端隐藏 */
.mobile-menu { display: none; }

/* ---------- 页面幕布(对齐 Apple .globalnav-curtain,参数照抄) ----------
   菜单打开时整页淡入一层半透明灰 + backdrop blur:面板向下生长的同时,
   露出的页面在"动态变模糊变灰";关闭时幕布渐隐,页面从模糊恢复清晰。
   全开稳定态幕后被不透明面板全盖,blur 是否撤掉无观感差(Apple 会撤,纯 GPU 优化),这里常驻 */
.nav-curtain {
    position: fixed;
    inset: 0;
    z-index: var(--z-nav-scrim);                /* 页面(0) < 幕布(998) < 菜单(999) < 导航条(1000) */
    background: rgba(232, 232, 237, 0.4);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.32s cubic-bezier(0.4, 0, 0.6, 1) 80ms, visibility 0.32s step-end 80ms;
}
/* 打开态只挂 nav-open:关闭瞬间随 nav-open 摘除,幕布立即开始渐隐(0.32s/80ms),
   与面板收回(同样 80ms 延迟)同步——Apple 同款节奏 */
.nav-open .nav-curtain {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;        /* 点击幕布关菜单(Apple onCurtainClick 同款,JS 绑定) */
    transition: opacity 0.32s cubic-bezier(0.4, 0, 0.6, 1) 80ms, visibility 0.32s step-start 80ms;
}

@media (max-width: 768px) {
    .nav-toggle { display: flex; }  /* flex + 上方 align/justify：22px 图标在 32px 按钮内正中 */
    /* 手机端搜索图标：显示并贴到右侧那组里（汉堡左边）。
       margin-left:auto 会把 nav-inner（space-between 三子项）的剩余空间全部吸走——
       否则空隙会被平分到品牌名与图标之间，图标会飘在中段而非紧贴汉堡 */
    .nav-search-toggle {
        display: flex;
        margin-left: auto;
        margin-right: 4px;   /* 两钮各 32 宽、图标 18 居中 → 图标视觉净间距 18px（14 空白 + 4） */
    }
    .site-nav .nav-links,
    .site-nav-top .nav-links { display: none; }  /* 手机端两个导航都只留品牌名 + 搜索图标 + 汉堡钮 */
    /* 手机端隐藏置顶/胶囊导航里的搜索框：输入改由点放大镜唤出的悬浮胶囊承担，
       导航条上只留图标（2026-10-21 前是藏掉输入框、搜索框放在全屏菜单底部） */
    .site-nav .nav-search,
    .site-nav-top .nav-search { display: none; }

    /* iOS Safari 聚焦自动放大：输入框 font-size < 16px 时，Safari 会在聚焦那一刻
       把整页放大（就是"点一下网页变大一点"），这是系统行为、CSS 关不掉。
       唯一的官方替代是 viewport 加 user-scalable=no，但那会剥夺用户双指缩放
       （无障碍上不可接受），所以只在手机档把字号抬到 16px——Apple 官网移动菜单
       的搜索框本身就是 17px，观感一致；桌面端仍是 13px 设计值 */
    .nav-search-input { font-size: 16px; }

    /* 面板：对齐 Apple 同款"高度生长"——初始高度=导航条高（整层藏在导航条背后，
       z 低于导航条 1000），打开时从 48px 长到满屏、内容随之下方露出，
       视觉上就是"面板从导航条向下展开"（Apple 是 nav content 高度过渡，观感等效）。
       时长 --menu-rate 由 JS 按源码公式写入（视口高一半，钳制 240~480ms），未写入回落 320ms；
       80ms 延迟与 cubic-bezier(.4,0,.6,1) 缓动均照抄 Apple */
    .mobile-menu {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: var(--nav-height);   /* 初始=导航条高：藏在导航条背后 */
        z-index: var(--z-nav-menu);   /* 低于导航（1000），汉堡钮始终可点 */
        /* ⚠️ 背景起点必须全透明(Apple: store 页无 scrim 类时 --globalnav-background=none,
           content 动画期间背景从透明渐变到 #fafafc,alpha 0→1)——面板扫过处页面以
           半透明毛玻璃形式可见、越晚越白,这就是"页面动态 blur"的主体;
           若起点写成 .8,中途只透 20%,观感变成"白板滑下"而非"毛玻璃揭示页面" */
        background: rgba(250, 250, 252, 0);
        -webkit-backdrop-filter: saturate(180%) blur(20px);   /* Apple 同款:模糊+提饱和 */
        backdrop-filter: saturate(180%) blur(20px);
        overflow: hidden;            /* 生长过程中裁掉下方内容，展开观感才干净 */
        flex-direction: column;
        justify-content: flex-start; /* Apple 同款：内容顶部对齐（从导航条下方开始排） */
        align-items: stretch;        /* Apple 同款：项全宽、文字左对齐（不再整体居中） */
        gap: 0;                      /* Apple 同款：项距由链接自身 padding 决定（步进 46px），不用 gap */
        list-style: none;
        /* ⚠️ 首末留白必须用首/末项的 margin，不能用本元素的 padding：
           box-sizing:border-box 下 padding 合计（50+84=134px）会把
           height:48px 的声明撑爆（content 盒钳 0，实际视觉高=padding 和），
           面板就"藏不进"导航条、收回时底下悬着一条空玻璃——Apple 原版
           的 padding 在内层 flyout 上、动画层无 padding，这里用 margin 等效 */
        visibility: hidden;          /* 初始不渲染：防止藏在导航条后的 48px 玻璃层露出模糊痕迹 */
        pointer-events: none;
        transition:
            height var(--menu-rate, 320ms) cubic-bezier(0.4, 0, 0.6, 1) 80ms,
            background-color var(--menu-rate, 320ms) cubic-bezier(0.4, 0, 0.6, 1) 80ms,
            visibility var(--menu-rate, 320ms) step-end 80ms;
    }
    /* 首项与导航条下缘留 2px——50px = 导航条 48 + 2（Apple: flyout padding-top 50）；
       gap 已归零，margin 即纯留白 */
    .mobile-menu > *:first-child {
        margin-top: calc(var(--nav-height) + 2px);
    }
    /* 末项之后预留底部空间（Apple 同款 84px）。
       ⚠️ 用伪元素占位而不是末项 margin（旧写法 .mobile-menu > :last-child）：
       2026-10-21 移除面板底部的搜索框后，登录态的末项变成 .nav-user-menu，
       它在本档是 display:contents（不生成盒子），margin-bottom 直接失效、底部留白会掉光；
       伪元素是稳定末位，不依赖"末项是什么元素"。同理它也不吃 .mobile-menu > * 的错峰动画规则 */
    .mobile-menu::after {
        content: "";
        display: block;
        height: 84px;
        flex: 0 0 auto;   /* 面板是 flex 列、可滚动：别让它在空间紧张时被压缩 */
    }
    /* 打开：height 长到满屏（dvh 支持动态视口，回落 vh）。
       ⚠️ visibility 必须在这里覆盖为 0s 立即可见——基础态的 step-end 是关闭方向用的
       （期间可见、结束才隐藏），打开时若继承它，面板会整段隐藏、动画结束才"闪现" */
    .nav-open .mobile-menu {
        height: 100vh;
        visibility: visible;
        pointer-events: auto;
        overflow-y: auto;            /* 内容超出视口时可滚（Apple 打开态同款；过渡期间超出仍被裁剪） */
        background: rgb(250, 250, 252);   /* Apple 同款 #fafafc 全不透明，与导航条连成一体 */
        /* ⚠️ 打开态 height/background 延迟 = 0ms（照抄 Apple: with-flyout-open 的
           transition-delay:0ms 覆盖 animating 的 80ms）——点击立即生长；
           关闭时目标态回落到基础态的 80ms 延迟（先收菜单项、面板稍等再收），
           两个方向延迟不同，这正是 Apple 的开/关节奏差 */
        transition:
            height var(--menu-rate, 320ms) cubic-bezier(0.4, 0, 0.6, 1) 0ms,
            background-color var(--menu-rate, 320ms) cubic-bezier(0.4, 0, 0.6, 1) 0ms,
            visibility 0s;
    }
    @supports (height: 100dvh) {
        .nav-open .mobile-menu { height: 100dvh; }
    }

    /* 菜单项错峰入场：JS 给每项写 --menu-item-n（0 起）、面板写 --menu-item-total。
       打开延迟 = 0.2s + 序号×20ms（照抄 Apple）；单项 0.24s、缓动 cubic-bezier(.4,0,.6,1)；
       初始 translateY(-8px) 轻微下落入场（Apple 同款位移量） */
    .mobile-menu > * {
        opacity: 0;
        transform: translateY(-8px);
        transition:
            opacity 0.24s cubic-bezier(0.4, 0, 0.6, 1) calc(0.2s + var(--menu-item-n, 0) * 20ms),
            transform 0.24s cubic-bezier(0.4, 0, 0.6, 1) calc(0.2s + var(--menu-item-n, 0) * 20ms);
    }
    .nav-open .mobile-menu > * {
        opacity: 1;
        transform: translateY(0);
    }
    /* 关闭逆序收尾（公式照抄 Apple）：延迟归零，时长 = 0.16s + (总数−序号)×20ms、封顶 0.24s——
       最后面的项先收，全部在同一时刻 0.24s 末收完。
       closing 类只在关闭动画期间在位；这里两个长属性覆盖基础简写的对应分量，缓动/属性列表继承不变 */
    .nav-closing .mobile-menu > * {
        transition-delay: 0s;
        transition-duration: min(0.16s + (var(--menu-item-total, 1) - var(--menu-item-n, 0)) * 20ms, 0.24s);
    }
    /* 菜单项文字：Apple store 手机菜单实测规格——28px/600、#333336、
       左对齐、左右留白 48px、上下 padding 9px（每项步进 46px 紧凑排） */
    .mobile-menu a, .mobile-menu button {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 9px 48px;
        font-size: 28px;
        font-weight: 600;
        line-height: 28px;
        letter-spacing: normal;
        text-align: left;
        color: rgb(51, 51, 54);
        background: none;
        border: none;
        cursor: pointer;
        font-family: inherit;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    /* 按下反馈（Apple iOS 触控同款：整体变淡） */
    .mobile-menu a:active, .mobile-menu button:active { opacity: 0.55; }
    /* ⚠️ 2026-10-22 更正：手机全屏菜单里的「登录/注册」不是胶囊。
       胶囊规则全部带 .nav-links 前缀，而手机菜单是独立的 ul.mobile-menu，
       两者的 padding/字号来自 .mobile-menu a（9px 48px / 28px），
       所以这两项在这里就是两个普通大字菜单项，不需要任何间距特调——
       原先按"两个胶囊会粘在一起"的假设加的 margin-top 已删除。 */
    /* 2026-10-21：手机菜单里不再出现「退出登录」（用户要求），退出入口统一收到
       「我的主页」页里的胶囊按钮。原先为了把 form button 拉回菜单规格而写的
       (0,2,2) 覆盖与"苹果红悬停"规则已随 form 一起失效，这里整组删掉——
       留着就是死代码。日后若要恢复该菜单项：form 的 display:none 去掉即可，
       字号/内边距由 .mobile-menu .nav-user-dropdown a 那组规则承接，
       button 需要单独补回 28px 档（详见下方手机菜单块） */
    /* 菜单打开期间：置顶导航条的玻璃层与面板同色融合（Apple: 导航 content 直接
       变 #fafafc，条与菜单无分界线）；胶囊导航若悬浮则整个隐藏（Apple 只有一条导航）。
       nav-closing 期间保持同处理，收回动画播完再恢复 */
    .nav-open .nav-glass-bar,
    .nav-closing .nav-glass-bar,
    .nav-open .site-nav-pill .nav-glass,
    .nav-closing .site-nav-pill .nav-glass {
        background: transparent;
        /* border-color 而非 border-bottom-color：置顶栏只有下边框、胶囊是整圈 0.3px
           描边，简写对两者都生效（覆盖各自基础态的边框色） */
        border-color: transparent;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    /* 液态玻璃的折射环(::before)/高光弧(::after)也要一并关掉——
       不然菜单全开后全屏面板上会浮着一圈亮边和一道光弧 */
    .nav-open .nav-glass-bar::before,
    .nav-closing .nav-glass-bar::before,
    .nav-open .nav-glass-bar::after,
    .nav-closing .nav-glass-bar::after,
    .nav-open .site-nav-pill .nav-glass::before,
    .nav-closing .site-nav-pill .nav-glass::before,
    .nav-open .site-nav-pill .nav-glass::after,
    .nav-closing .site-nav-pill .nav-glass::after {
        content: none;      /* 直接不生成伪元素，比 opacity:0 更省 */
    }
    /* 菜单打开期间胶囊不再整体隐藏：汉堡钮留在原地变形为 ✕ 充当关闭按钮
       （Apple 行为：菜单打开后导航条只剩右上 ✕，品牌字由上方规则淡出）。
       旧写法 display:none 会把唯一的按钮一起藏掉，而置顶导航是普通流式
       早已滚出视口——全屏菜单上就没有任何关闭入口了 */

    /* Apple 同款（源码 .globalnav-list>.globalnav-item:not(.globalnav-menu) .globalnav-link）：
       菜单打开后导航条上除汉堡外的元素（品牌字）淡出隐藏 0.24s，导航条只剩右上 ✕；
       关闭后延迟 80ms 淡入恢复（基础态 transition,照抄 Apple） */
    .nav-brand {
        transition: opacity 0.24s cubic-bezier(0.4, 0, 0.6, 1) 80ms, visibility 0.24s step-start 80ms,
                    color 0.24s cubic-bezier(0.4, 0, 0.6, 1);
    }
    /* 搜索图标跟着品牌名一起淡出：菜单全开后导航条只剩右上 ✕，
       多留一个放大镜会挤在 ✕ 左边破坏 Apple 那个"只剩关闭钮"的观感。
       顺带解决交互互斥——菜单展开时图标变成 visibility:hidden，点不到，
       所以两条浮层（全屏菜单 / 搜索胶囊）不可能同时出现 */
    .nav-open .nav-search-toggle,
    .nav-closing .nav-search-toggle {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.24s cubic-bezier(0.4, 0, 0.6, 1), visibility 0.24s step-end;
    }
    /* ⚠️ 品牌名（网站名）不跟着淡出——2026-10-21 用户要求：菜单面板打开后
       左上角要能看到网站名。Apple 原版是连品牌字一起淡出、只留 ✕，
       但那样整块面板上就没有任何站点标识。面板与导航条同色融合（见下方
       .nav-open .nav-glass-bar），品牌字正好充当面板标题。
       必须同时锁深色：面板底色是 #fafafc，而深色横幅页面上导航条带
       nav-theme-dark 时 --nav-fg = #f5f5f7，不锁的话白底白字整块消失。
       nav-closing 也保持 —— 关闭期间玻璃层仍是白色（见下方同组规则），
       等 nav-closing 摘除、玻璃恢复原色时再交还给 var(--nav-fg) */
    .nav-open .nav-brand,
    .nav-closing .nav-brand {
        opacity: 1;
        visibility: visible;
        color: var(--color-text);
    }
    /* 搜索图标的基础态过渡（与 .nav-brand 同参数：关闭菜单后延迟 80ms 淡入恢复）。
       只在手机档声明，桌面端它 display:none 不需要过渡 */
    .nav-search-toggle {
        transition: opacity 0.24s cubic-bezier(0.4, 0, 0.6, 1) 80ms, visibility 0.24s step-start 80ms;
    }
    .nav-open { overflow: hidden; }
}

/* 减少动画时：关闭导航位移、主题底色过渡、菜单生长/错峰、汉堡变形——
   全部瞬时切换（等效 Apple 的 globalnav-block-transitions 全禁机制） */
@media (prefers-reduced-motion: reduce) {
    .site-nav { transition: none; }
    .nav-glass { transition: none; }
    .mobile-menu,
    .mobile-menu > * { transition: none; }
    .nav-toggle .bread { animation: none !important; }
}

/* ============================================================
   置顶导航栏文字颜色：已并入主题变量（--nav-fg），不再写死白色。
   置顶栏压在深色横幅上时 JS 会给它加 nav-theme-dark，文字自动变白
   ============================================================ */

/* ============================================================
   导航栏搜索框
   ============================================================ */
.nav-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.01);
    border: 0.2px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        inset 0 0.5px 0.5px rgba(255, 255, 255, 0.25),
        inset 0 -1px 1px rgba(0, 0, 0, 0.04);
    border-radius: 980px;
    padding: 6px 14px;
    width: 200px;
    margin-left: 20px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: background 0.25s ease, width 0.3s ease, box-shadow 0.25s ease;
}
.nav-search:focus-within {
    background: rgba(255, 255, 255, 0.85);
    width: 320px;
    box-shadow:
        inset 0 0.5px 0.5px rgba(255, 255, 255, 0.25),
        inset 0 -1px 1px rgba(0, 0, 0, 0.04),
        0 2px 12px rgba(0, 0, 0, 0.08);
}
.nav-search-icon {
    color: var(--nav-fg);       /* 图标跟随主题文字色 */
    opacity: 0.72;              /* 稍淡一档，和链接的 0.8 层次呼应 */
    flex-shrink: 0;
    transition: color 0.2s ease, opacity 0.2s ease;
}
.nav-search-input {
    border: none;
    background: none;
    outline: none;
    font-size: 13px;
    color: #333;
    width: 100%;
    font-family: inherit;
}
.nav-search-input::placeholder {
    color: var(--nav-fg);       /* 提示词跟随主题文字色 */
    opacity: 0.6;
    transition: color 0.2s ease;
}
/* 鼠标点进搜索框后，图标和提示词变成深灰色 */
.nav-search:focus-within .nav-search-icon {
    color: #555;
}
.nav-search:focus-within .nav-search-input::placeholder {
    color: #666;
}

/* ============================================================
   手机端搜索悬浮胶囊（2026-10-21 加）
   交互链路：导航条汉堡左侧的放大镜 → 从导航条下缘浮出这条胶囊输入框；
   点胶囊外部 / 右侧 ✕ / Esc 收起。桌面端整块不启用（桌面导航里本来就有常驻搜索框）。
   原实现是"搜索框垫在全屏菜单最后一项"，2026-10-21 按需求改为导航条常驻图标 + 悬浮胶囊。
   ============================================================ */
/* 几何与导航胶囊完全对齐（2026-10-21 第二轮：用户要求"尺寸和胶囊导航栏一样"）：
   胶囊是 fixed 全宽 + width:calc(100% - 60px) + max-width:960px + margin:auto 居中，
   这里照抄同一套——左右各留 30px、最大 960px，和胶囊导航左右边缘严丝合缝。
   高度由 .nav-search-float-form 的 var(--nav-height) 决定，同样等于导航条高 */
.nav-search-float {
    display: none;                 /* 桌面端不渲染；手机档见文件末尾的媒体查询 */
    position: fixed;
    left: 0;
    right: 0;
    width: calc(100% - 60px);
    max-width: 960px;
    margin: 0 auto;
    /* 首帧兜底值；实际 top 由 main.js 的 placeSearchFloat() 按"当前可见导航的下缘 + 8px"写入——
       置顶栏是流式（滚动时会轻微上移）、胶囊导航固定在 top:12px，两者下缘不同，写死必然错位 */
    top: calc(var(--nav-height) + 8px);
    z-index: var(--z-nav-overlay);                 /* 压住页面内容（0）；低于汉堡的 1002，不影响导航条自身点击 */
    /* 与导航胶囊严格同高：必须给固定高度。不写的话高度由表单内容撑开，
       再被那 0.3px 描边（DPR=1 下取整成 1px）顶成 50px，和导航条差 2px 对不齐 */
    height: var(--nav-height);
    /* 玻璃视觉（底色 0.35 / saturate blur 5px / 描边 / 阴影 / 980px 圆角）不在这里写：
       它和导航胶囊共用文件顶部 `.nav-glass, .nav-search-float` 那一组声明，一份参数两处生效。
       这里只补两个主题变量的默认值——浮层挂在 body 下、不在 .site-nav 的作用域里，
       取不到那组变量（深色仍由 JS 镜像的 .nav-theme-dark 覆盖，见下方那条更高特异性的规则） */
    --nav-glass: 251, 251, 253;
    --nav-fg: #1d1d1f;
    opacity: 0;
    transform: translateY(-8px) scale(0.97);   /* 从上方 8px 处轻微落下来，和菜单项入场同方向 */
    pointer-events: none;          /* 收起态必须显式关掉：opacity:0 的元素照样会吃点击 */
    transition:
        opacity 0.22s cubic-bezier(0.4, 0, 0.6, 1),
        transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
/* 深色主题变量（JS 镜像）：同值写在此处而非依赖文件顶部那条 .nav-theme-dark——
   那条特异性 (0,1,0) 与本规则所在的 `.nav-search-float{--nav-glass:…}` 相同且更靠前，
   会输给上面的默认值。用 (0,2,0) 显式压回来 */
.nav-search-float.nav-theme-dark {
    --nav-glass: 34, 34, 34;
    --nav-fg: #f5f5f7;
}
/* 打开态挂在 body 上：两条导航各有一个图标、共用同一条浮层，状态只能放在外层。
   ⚠️ 落定态写 transform:none 而不是 translateY(0) scale(1)：Safari 对
   "元素自身带 transform + backdrop-filter"有已知缺陷（玻璃模糊会整块失效）；
   用 none 让稳定态彻底没有 transform，过渡依然能插值（none ↔ 位移矩阵） */
.nav-search-open .nav-search-float {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
/* 伪元素（折射环 / 高光弧）压回 0 层：::after 在 DOM 顺序上排在表单之后，
   不归零的话那道顶部高光弧会盖在输入文字上（导航里它们是 z-index:-1 垫在最底，不存在这问题） */
.nav-search-float::before,
.nav-search-float::after { z-index: 0; }

/* 表单铺满胶囊：高度直接用 --nav-height，与导航条同高（48px） */
.nav-search-float-form {
    position: relative;
    z-index: 1;                    /* 压在玻璃底色与两个玻璃伪元素之上 */
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;                  /* 撑满浮层内容区（= 导航条高 − 上下各 1px 描边） */
    margin: 0;
    padding: 0 8px 0 20px;         /* 左侧 20 让放大镜避开药丸圆角；右侧 8 给关闭钮外留呼吸 */
}
.nav-search-float-icon {
    flex-shrink: 0;
    color: var(--nav-fg, var(--color-text));
    opacity: 0.55;                 /* 比输入文字淡一档：它是装饰，不是可读内容 */
}
.nav-search-float-input {
    flex: 1 1 auto;
    min-width: 0;                  /* flex 子项默认 min-width:auto 会被内容撑破胶囊，必须归零 */
    border: none;
    background: none;
    outline: none;
    font-family: inherit;
    /* 16px：iOS Safari 对字号 <16px 的输入框会在聚焦瞬间强制放大整页（系统行为，CSS 关不掉）；
       16px 是唯一不牺牲用户双指缩放的解法，与全站其它手机端输入框一致 */
    font-size: 16px;
    color: var(--nav-fg, var(--color-text));
}
.nav-search-float-input::placeholder {
    color: var(--nav-fg, var(--color-text));
    opacity: 0.45;
}
.nav-search-float-close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(127, 127, 127, 0.18);   /* 中性灰：深浅两个主题下都读得出是个按钮 */
    color: var(--nav-fg, var(--color-text));
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.nav-search-float-close:active { opacity: 0.55; }

/* 手机档才启用（与导航/汉堡同一个 768 断点） */
@media (max-width: 768px) {
    .nav-search-float { display: block; }
}

/* ============================================================
   导航栏下拉菜单（灵感 → 案例 / 图库）
   ============================================================ */
.nav-item-dropdown {
    position: relative;
}
.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-15px);
    min-width: 150px;
    padding: 6px;
    margin-top: 18px;/* 与"灵感"文字的间距，由下面的悬停桥盖住 */
    /* 与胶囊玻璃层同一配方：玻璃 RGB 走主题变量（深色内容上翻深）、
       同一组 backdrop-filter，两者都直接模糊页面背景，观感一致 */
    background: rgba(var(--nav-glass), 0.35);
    -webkit-backdrop-filter: saturate(180%) blur(15px);
    backdrop-filter: saturate(180%) blur(15px);
    border: 0.2px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    box-shadow:
        inset 0 0.5px 0.5px rgba(255, 255, 255, 0.1),
        inset 0 -1px 1px rgba(0, 0, 0, 0.06),
        0 4px 24px rgba(0, 0, 0, 0.12);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: var(--z-nav-overlay);
}

/* 悬停桥：一块看不见的透明区域，盖住菜单上方的空隙，
   鼠标从"灵感"移向菜单时不会中断 hover */
.nav-dropdown::before {
    content: "";
    position: absolute;
    top: -18px;
    left: 0;
    right: 0;
    height: 18px;   /* 高度要盖满 margin-top 的 18px 空隙 */
}

.nav-item-dropdown:hover .nav-dropdown {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.nav-dropdown a {
    display: block;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--nav-fg);   /* 跟随主题：导航翻深色时下拉文字同步变白 */
    text-align: center;
    transition: background 0.15s ease, color 0.15s ease;
}
.nav-dropdown a:hover {
    background: var(--nav-hover-bg);   /* 悬停底色跟随主题（深色主题用白 0.1） */
}

/* 手机端：隐藏下拉菜单，点击灵感直接进灵感页 */
@media (max-width: 768px) {
    .nav-dropdown { display: none; }
}

/* ============================================================
   头像下拉菜单（我的主页 / 设置 / 修改密码 / 退出登录）
   桌面端 hover 展开，复用"灵感"下拉的玻璃配方；
   手机端在全屏菜单里平铺成普通菜单项（见下方媒体查询）
   ============================================================ */
.nav-user-menu { position: relative; }
.nav-user-dropdown { min-width: 130px; }

/* 带图标的菜单项：图标 + 文字作为一组整体居中（纯文字时代靠 text-align:center，
   加图标后换成 flex 才能做垂直居中）。a 与 button 分开写：button 那条规则在
   下方、且自带 display:block，靠这条覆盖不了，必须在那条里一起改 */
.nav-user-dropdown a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
}
/* 图标尺寸走 em：桌面 14px 字号 → 16.8px 图标；手机全屏菜单 28px 字号 → 33.6px 图标，
   一个值管两种场景。fill: currentColor 让颜色永远跟着文字（含深色主题翻转）；
   translateY 是光学补偿——SVG 盒居中是几何居中，汉字视觉重心略低于盒中心，图标要抬一点才看着齐 */
.nav-menu-icon {
    flex: 0 0 auto;
    width: 1.2em;
    height: 1.2em;
    fill: currentColor;
    transform: translateY(-0.02em);
}
/* 人形 path 在原 24 网格里墨迹只有 16×16（爱心 20×18.35、门框 20×18），同一盒尺寸下
   实测墨迹 11.2px vs 14px，看着小一圈。模板里已把它的 viewBox 收进墨迹外接框
   （留 0.4 余量防裁边），盒尺寸再按比例缩回 1.06em，三者墨迹宽度就齐到 14px 上下 */
.nav-icon-home {
    width: 1.06em;
    height: 1.06em;
}

/* 退出登录是 button 不是 a，样式对齐下拉里的链接（含图标居中三件套：
   display 必须是 flex，block 会让内联 SVG 走基线对齐、图标整体偏高） */
.nav-user-dropdown form button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    width: 100%;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--nav-fg);   /* 跟随主题，与 .nav-dropdown a 一致 */
    text-align: center;
    transition: background 0.15s ease, color 0.15s ease;
}
.nav-user-dropdown form button:hover {
    background: var(--nav-hover-bg);  /* 悬停底色跟随主题 */
    color: var(--color-danger);   /* 退出悬停变苹果红，与普通导航项区分 */
}

@media (max-width: 768px) {
    /* 手机端全屏菜单：把下拉"拆开"平铺——display:contents 让菜单项
       直接成为全屏菜单的 flex 子项，不再依赖 hover（手机没有 hover） */
    .mobile-menu .nav-user-dropdown {
        display: contents;
        opacity: 1;
        pointer-events: auto;
    }
    /* Apple 同款：菜单是纯文字大字列表——头像图不进菜单，
       "我的主页"还原为普通文字项（头像在导航条上仍是入口） */
    .mobile-menu .nav-avatar { display: none; }
    .mobile-menu .js-user-home-link { display: block; }
    /* 平铺出的下拉项（我的主页/我的喜欢）拉回菜单的字色与缩进。
       2026-10-21 二轮修正，两个根因一次修：
       ① 字色：全屏菜单在两条 nav 之外，--nav-fg 取不到值；且 .nav-dropdown a（0,1,1）
          出现在 .mobile-menu a 之后，同特异性靠后者胜，会把菜单色盖掉；
       ② 内边距：桌面下拉的 .nav-dropdown a 是 padding 8px 16px，同样靠后者胜出，
          左缩进只剩 16px（主菜单是 48px），全列表左边界就对不齐。
       ⚠️ 字号刻意不进 28px 主菜单档：用户 2026-10-21 定这两项是账号次级入口，
       要明显小于主导航——取 17px / 500（苹果正文字号 + 常规字重），
       左右内边距仍 48px 与主菜单共用同一条左边界 */
    .mobile-menu .nav-user-dropdown a {
        color: rgb(51, 51, 54);
        padding: 9px 48px;
        font-size: 17px;
        font-weight: 500;
        line-height: 17px;
    }
    /* 退出登录不进手机菜单（用户 2026-10-21 定）：手机上退出入口统一放在
       「我的主页」页面里，菜单保持纯导航用途，也少一个误触即登出的位置 */
    .mobile-menu .nav-user-dropdown form { display: none; }
    /* 手机全屏菜单 = 纯文字大字列表（苹果手机菜单本无图标，2026-10-21 用户拍板）：
       ① 28px 字号下 .nav-menu-icon 的 1.2em 会涨到 33.6px，比文字还抢眼；
       ② 带图标项的文字必然比纯文字项多缩进"图标宽 + 间距"约 32px，
          全列表左边界就对不齐——而左边界齐平正是这种大字列表的骨架。 */
    .mobile-menu .nav-menu-icon { display: none; }
    /* 账号组（我的主页/我的喜欢）与主导航之间留一道分组空隙：两组性质不同
       （且字号不同），靠留白把层级说清楚，苹果用留白分组而非分隔线。
       ⚠️ 不能挂到 .nav-user-dropdown 上——它在手机档是 display:contents（不生成盒子，
       margin 无效），只能挂到它平铺出来的第一个 a 上 */
    .mobile-menu .nav-user-dropdown > a:first-of-type { margin-top: 12px; }
    /* 带图标的菜单项：手机全屏菜单是左对齐大字列表，桌面那条居中要压回
       flex-start；display 一并重设成 flex——否则 .js-user-home-link 的
       display:block（0,2,0）会把这几个 a 抢回普通块级。
       gap 在图标隐藏后已不产生间距，保留是给"日后要恢复图标"留钩子 */
    .mobile-menu .nav-user-dropdown a,
    .mobile-menu .nav-user-dropdown form button {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.4em;
    }
}