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

/* ---------- 主题变量：玻璃底色和文字色随内容深浅切换 ----------
   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: #1d1d1f;                        /* 浅色主题文字：近黑 */
    --nav-divider: rgba(0, 0, 0, 0.16);       /* 页名分隔线基色（浅） */
    --nav-hover-bg: rgba(0, 0, 0, 0.06);      /* 下拉菜单项悬停底色（浅） */
}
.nav-theme-dark {
    --nav-glass: 34, 34, 34;                  /* 深色玻璃 RGB（原置顶栏同款色） */
    --nav-fg: #f5f5f7;                        /* 深色主题文字：苹果白 */
    --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: 1000;
    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: 1000;/* 手机端全屏菜单(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-glass {
    position: absolute;
    inset: 0;                 /* 铺满整个胶囊 */
    border-radius: 980px;
    background: rgba(var(--nav-glass), 0.35);
    /* 主题切换时只有这一层底色在渐变：0.24s + Apple localnav 同款缓动曲线，
       这就是"深浅切换非常柔和"的全部来源 */
    transition: background 0.24s cubic-bezier(0.28, 0.11, 0.32, 1);
    -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);
    z-index: -1;              /* 垫在导航文字下面，但仍在胶囊自己的层级内 */
    pointer-events: none;     /* 不拦截点击，点击全部落回链接 */
}

/* 液态玻璃·折射边缘（::before）：只画 1px 渐变环——上缘亮白（迎光）、
   两侧渐隐、下缘转暗（背光），模拟玻璃边缘"弯折光线"的透镜感，
   这是 iOS 26 与旧版磨砂玻璃最大的视觉差异。
   实现：伪元素铺满 + padding:1px 留出描边区，双层 mask 把中间掏空、
   只留边缘一环；渐变画在 padding 区域上，不遮挡中央模糊层 */
.nav-glass::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(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
}

/* 液态玻璃·顶部镜面高光弧（::after）：从顶边中央散开的椭圆径向渐变，
   只染上半部，是"湿玻璃"光泽的主要来源。
   深浅主题下都用白光——深底玻璃上这道弧反而更出效果，无需跟随 --nav-glass */
.nav-glass::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%;
    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 同款：当前页不再显示手型 */
}
.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);
    color: #fff !important;
    padding: 6px 16px;
    border-radius: 980px;
    transition: background 0.2s ease !important;
}
.nav-links a.btn-pill:hover { background: var(--color-accent-hover); }

/* 汉堡按钮：桌面端隐藏（手机端媒体查询里改为 flex） */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 32px; height: 32px;
    position: relative;
    z-index: 1002;
    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: #1d1d1f;
}

/* 两根线以自身几何中心为变换原点：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: 998;                /* 页面(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 按钮内正中 */
    .site-nav .nav-links,
    .site-nav-top .nav-links { display: none; }  /* 手机端两个导航都只留品牌名和汉堡钮 */
    /* 手机端隐藏置顶/胶囊导航顶部的搜索框：全屏菜单里已有，避免重复与溢出 */
    .site-nav .nav-search,
    .site-nav-top .nav-search { display: none; }

    /* 面板：对齐 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: 999;   /* 低于导航（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） */
    .mobile-menu > :last-child {
        margin-bottom: 84px;
    }
    /* 打开：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; }
    /* 退出登录按下/悬停仍走苹果红，与普通导航项区分 */
    .mobile-menu .nav-user-dropdown form button:hover { color: #d70015; }
    /* 退出登录按钮：桌面规则 .nav-user-dropdown form button（8px 16px 居中）特异性
       (0,1,2) 高于上面的 .mobile-menu button (0,1,1)，会被它压回旧排版——
       这里用更高特异性 (0,2,2) 把它拉回菜单统一规格 */
    .mobile-menu .nav-user-dropdown form button {
        padding: 9px 48px;
        text-align: left;
        font-size: 28px;
        font-weight: 600;
        line-height: 28px;
        color: rgb(51, 51, 54);
    }
    /* 菜单打开期间：置顶导航条的玻璃层与面板同色融合（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;
    }
    .nav-open .nav-brand,
    .nav-closing .nav-brand {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.24s cubic-bezier(0.4, 0, 0.6, 1), visibility 0.24s step-end;
    }
    .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;
}

/* 手机端：搜索框在汉堡菜单底部（Apple 菜单本无搜索框，功能保留垫底），
   左右留白与菜单项一致（48px）；底部 84px 由 .mobile-menu > :last-child 统一给 */
.mobile-search-item {
    list-style: none;
    width: auto;
    margin: 12px 48px 0;
}
.mobile-search-item .nav-search {
    width: 100%;
    margin-left: 0;
}
.mobile-search-item .nav-search:focus-within {
    width: 100%;
}

/* ============================================================
   导航栏下拉菜单（灵感 → 案例 / 图库）
   ============================================================ */
.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: 1001;
}

/* 悬停桥：一块看不见的透明区域，盖住菜单上方的空隙，
   鼠标从"灵感"移向菜单时不会中断 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; }

/* 退出登录是 button 不是 a，样式对齐下拉里的链接 */
.nav-user-dropdown form button {
    display: block;
    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: #d70015;   /* 退出悬停变苹果红，与普通导航项区分 */
}

@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; }
    /* 平铺出的下拉项（我的主页/设置/修改密码）显式锁菜单字色：
       全屏菜单在两条 nav 之外，--nav-fg 取不到值；且 .nav-dropdown a（0,1,1）
       比 .mobile-menu a（0,1,1）靠后，会盖掉菜单默认色，这里用更高特异性压回 */
    .mobile-menu .nav-user-dropdown a { color: rgb(51, 51, 54); }
}