/* ========================================================================
   顶部导航
   固定在顶部的玻璃导航栏。首屏（浅色）时是深色文字，
   滚进夜晚后加上 .on-dark，换成深色玻璃 + 白色 Logo。
   宽度 ≤ 960px 时，中间的链接收起成「菜单」按钮。
   ======================================================================== */

/* ---- 导航栏：--n-* 变量控制浅色 / 深色两套配色 ---- */
.nav{position:fixed;z-index:40;top:0;left:0;right:0;display:flex;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top,0px) + 14px) var(--gutter) 0;pointer-events:none;
  --n-fg:var(--dusk-ink);--n-glass:rgba(255,255,255,.36);--n-line:rgba(255,255,255,.62);--n-hover:rgba(255,255,255,.45);--n-solid:var(--dusk-ink);--n-solid-fg:#fff8fb}
.nav.on-dark{--n-fg:var(--ink);--n-glass:rgba(30,20,50,.58);--n-line:rgba(232,216,255,.14);--n-hover:rgba(255,255,255,.08);--n-solid:var(--ink);--n-solid-fg:var(--night)}
.nav>*{pointer-events:auto}

/* ---- Logo：浅色背景用渐变字标，深色背景用白色字标 ---- */
.brand{flex:1 1 0;display:inline-flex;align-items:center;text-decoration:none}
.brand img{display:block;height:34px;width:auto;max-width:none}
.brand .logo-dark,.nav.on-dark .brand .logo-light{display:none}
.nav.on-dark .brand .logo-dark{display:block}

/* ---- 中间的链接（玻璃胶囊） ---- */
.links{display:flex;gap:2px;padding:5px;border-radius:16px;background:var(--n-glass);border:1px solid var(--n-line);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);transition:background .4s,border-color .4s}
.links a{padding:8px 13px;border-radius:11px;color:var(--n-fg);text-decoration:none;font-size:14px;line-height:1.2;white-space:nowrap;transition:background .2s,color .4s}
.links a:hover{background:var(--n-hover)}

/* ---- 右侧按钮：客服热线 / 下载 App / 手机版菜单 ---- */
.nav-cta{flex:1 1 0;display:flex;justify-content:flex-end;gap:8px}
.nbtn{display:inline-flex;align-items:center;height:42px;padding:0 16px;border-radius:13px;font:500 14px/1 var(--f-sans);text-decoration:none;white-space:nowrap;border:1px solid transparent;background:none;cursor:pointer;transition:background .4s,color .4s,border-color .4s}
.nbtn.ghost{color:var(--n-fg);border-color:currentColor}
.nbtn.solid{background:var(--n-solid);color:var(--n-solid-fg)}
.nbtn.menu{display:none;color:var(--n-fg);background:var(--n-glass);border-color:var(--n-line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}

/* ---- 手机版：收起链接，显示菜单按钮 ---- */
@media (max-width:960px){.links,.nbtn.ghost{display:none}.nbtn.menu{display:inline-flex}.brand{flex:1 1 auto}.nav-cta{flex:none}}

/* ---- 手机版展开菜单 ---- */
.mobile-menu{position:fixed;z-index:39;top:calc(env(safe-area-inset-top,0px) + 66px);left:var(--gutter);right:var(--gutter);display:grid;gap:2px;padding:8px;border-radius:20px;background:rgba(24,16,40,.94);border:1px solid var(--line);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.mobile-menu a{padding:12px 14px;border-radius:12px;color:var(--ink);text-decoration:none}
.mobile-menu a:hover{background:rgba(255,255,255,.06)}