:host{display:block}

/* 原来是一整条半透明色块，底边和页面渐变硬碰硬，屏幕上横着一道接缝。
   改成上实下虚的渐变，并且用同一条 mask 把毛玻璃也一起淡出——
   只淡化背景色而不淡化 blur 的话，接缝会从「色差」变成「糊边」，一样难看。 */
.nav-wrap{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:linear-gradient(180deg,
    rgba(250,247,242,.94) 0%,
    rgba(250,247,242,.88) 58%,
    rgba(250,247,242,0) 100%);
  backdrop-filter:blur(20rpx);
  -webkit-backdrop-filter:blur(20rpx);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);
}
.nav-inner{
  position:relative;display:flex;align-items:center;justify-content:center;
}
.nav-title{
  font-size:var(--fs-md);font-weight:var(--fw-b);color:var(--text);
  letter-spacing:.5rpx;
  max-width:56%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* 返回键做成有边界的圆形，和右上角胶囊在视觉上对称 */
.nav-back{
  position:absolute;left:var(--sp-3);top:50%;transform:translateY(-50%);
  width:60rpx;height:60rpx;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--text);background:rgba(255,255,255,.72);
  box-shadow:0 4rpx 12rpx rgba(70,48,25,.06);
}
.nav-back:active{background:rgba(255,255,255,.95)}