/* =====================================================
   LEAF Trip · Liquid Glass Dock
   6 导航、无两侧“耳朵”、整体悬浮毛玻璃
===================================================== */

.nav-wrap{
  position:fixed !important;
  left:50% !important;
  right:auto !important;

  bottom:
    calc(-5px + env(safe-area-inset-bottom)) !important;

  transform:translateX(-50%) !important;

  width:
    min(calc(100% - 34px),446px) !important;

  height:auto !important;
  min-height:0 !important;

  margin:0 !important;
  padding:0 !important;

  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;

  overflow:visible !important;

  z-index:9000 !important;
}

.nav-wrap .nav{
  position:relative !important;

  width:100% !important;
  height:72px !important;

  padding:6px 7px 5px !important;

  display:grid !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  align-items:center !important;
  gap:2px !important;

  border-radius:30px !important;

  background:
    radial-gradient(
      ellipse at 28% -10%,
      rgba(255,255,255,.75),
      transparent 46%
    ),
    radial-gradient(
      ellipse at 80% 110%,
      rgba(180,220,255,.22),
      transparent 54%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.54) 0%,
      rgba(248,252,255,.34) 46%,
      rgba(226,241,255,.27) 100%
    ) !important;

  backdrop-filter:
    blur(40px)
    saturate(220%)
    brightness(1.08) !important;

  -webkit-backdrop-filter:
    blur(40px)
    saturate(220%)
    brightness(1.08) !important;

  border:
    1px solid rgba(255,255,255,.74) !important;

  box-shadow:
    0 16px 44px rgba(40,66,108,.16),
    0 4px 14px rgba(70,115,175,.08),
    inset 0 1.5px 0 rgba(255,255,255,.98),
    inset 1px 0 0 rgba(255,255,255,.36),
    inset -1px 0 0 rgba(176,216,255,.24),
    inset 0 -1.5px 0 rgba(112,172,235,.14),
    inset 0 0 30px rgba(255,255,255,.12)
    !important;

  overflow:hidden !important;
}

/* 玻璃内部高光，不再生成左右椭圆 */
.nav-wrap .nav::before{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  top:1px;

  height:26px;

  border-radius:28px 28px 50% 50%;

  background:
    radial-gradient(
      ellipse at 30% 0%,
      rgba(255,255,255,.86),
      rgba(255,255,255,.12) 52%,
      transparent 74%
    );

  pointer-events:none;
}

.nav-wrap .nav::after{
  display:none !important;
}

.nav-wrap .nav > button{
  position:relative !important;
  z-index:2 !important;

  width:100% !important;
  min-width:0 !important;
  height:59px !important;

  margin:0 !important;
  padding:3px 0 1px !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:3px !important;

  border:0 !important;
  border-radius:22px !important;

  background:transparent !important;

  color:rgba(55,65,74,.58) !important;

  font-size:11.5px !important;
  font-weight:540 !important;
  line-height:1.05 !important;

  transition:
    transform .18s ease,
    color .22s ease,
    background .22s ease,
    box-shadow .22s ease !important;
}

.nav-wrap .nav-ico-shell{
  width:40px !important;
  height:31px !important;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:16px !important;

  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.nav-wrap .nav-svg{
  width:24px !important;
  height:24px !important;

  fill:none;
  stroke:currentColor;

  stroke-width:1.72 !important;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.nav-wrap .nav-date-icon{
  position:relative;

  width:26px !important;
  height:25px !important;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:14px !important;
  font-weight:760 !important;
}

.nav-wrap .nav-date-icon::after{
  content:"";
  position:absolute;
  left:4px;
  right:4px;
  bottom:2px;

  height:1.7px;

  border-radius:2px;
  background:currentColor;
  opacity:.62;
}

.nav-wrap .nav > button.active{
  color:#007AFF !important;
  font-weight:650 !important;

  background:
    radial-gradient(
      circle at 35% 8%,
      rgba(255,255,255,.96),
      rgba(255,255,255,.48) 38%,
      transparent 70%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.64),
      rgba(208,232,255,.35)
    ) !important;

  border:
    1px solid rgba(255,255,255,.68) !important;

  backdrop-filter:
    blur(22px)
    saturate(220%) !important;

  -webkit-backdrop-filter:
    blur(22px)
    saturate(220%) !important;

  box-shadow:
    0 8px 22px rgba(0,122,255,.16),
    inset 0 1.5px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(84,155,235,.18)
    !important;

  transform:translateY(-1px) scale(1.02) !important;
}

.nav-wrap .nav > button:active{
  transform:scale(.90) !important;
}

body{
  padding-bottom:
    calc(82px + env(safe-area-inset-bottom)) !important;
}

@media(max-width:520px){
  .nav-wrap{
    width:calc(100% - 30px) !important;
  }
}