/* ================================================================
   全局底部导航：iOS 液态玻璃
   —— 所有前台页面共用（includes/bottom_nav.php 引入）
   ================================================================ */
.tab-bar{
  position:fixed!important;
  bottom:14px!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  width:calc(100% - 32px)!important;
  max-width:420px!important;
  height:66px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-around!important;
  padding:0 6px!important;
  margin:0!important;
  z-index:1000!important;
  border-radius:24px!important;
  touch-action:none!important;
  background:linear-gradient(180deg,rgba(255,255,255,.80),rgba(255,255,255,.62))!important;
  -webkit-backdrop-filter:blur(14px) saturate(140%)!important;
  backdrop-filter:blur(14px) saturate(140%)!important;
  border:1px solid rgba(255,255,255,.80)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(255,255,255,.45),
    0 12px 36px -16px rgba(15,23,42,.26)!important;
}
/* 顶部高光：液态玻璃的关键 */
.tab-bar::before{
  content:""!important;
  position:absolute!important;
  top:0!important;left:12px!important;right:12px!important;
  height:1px!important;
  border-radius:99px!important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent)!important;
  pointer-events:none!important;
}
.tab-bar::after{display:none!important;content:none!important}

/* 滑动高光块（跟随选中项移动） */
.tab-indicator{
  position:absolute!important;
  top:50%!important;
  left:6px!important;
  height:54px!important;
  width:calc((100% - 12px) / 3)!important;
  transform:translateY(-50%) translateX(0)!important;
  z-index:1!important;
  pointer-events:none!important;
  margin:0!important;padding:0!important;
}
.tab-indicator .glass{
  position:absolute!important;
  inset:0 6px!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.90))!important;
  border:1px solid rgba(255,255,255,1)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 4px 12px -6px rgba(15,23,42,.16)!important;
  transition:transform .28s cubic-bezier(.32,.72,0,1)!important;
  transform-origin:center!important;
}
.tab-indicator .glass::after{display:none!important;content:none!important}
.tab-indicator.dragging .glass{transform:scale(1.06)!important}

.tab-item{
  flex:1!important;
  height:66px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
  position:relative!important;
  z-index:2!important;
  border:none!important;
  background:none!important;
  color:#8e8e93!important;
  text-decoration:none!important;
  font-size:inherit!important;
  line-height:normal!important;
  padding:0!important;margin:0!important;
  filter:none!important;
  box-shadow:none!important;
  border-radius:0!important;
  transition:color .18s ease!important;
}
.tab-item svg{
  width:23px!important;
  height:23px!important;
  display:inline-block!important;
  transition:transform .18s ease!important;
}
.tab-item span{
  font-size:10.5px!important;
  font-weight:600!important;
  display:inline!important;
  letter-spacing:.2px!important;
}
.tab-item.active{color:#2f6bff!important;filter:none!important}
.tab-item.active svg{transform:none!important}
.tab-item:active{opacity:.75!important}
.tab-item.drag-highlight{color:#2f6bff!important}

@supports(padding:max(0px)){
  .tab-bar{bottom:max(14px,env(safe-area-inset-bottom))!important}
}

@media(prefers-reduced-transparency:reduce){
  .tab-bar{background:rgba(255,255,255,.96)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .tab-indicator .glass{background:#eef2ff!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
/* 页面内容不被导航遮住 */
body{padding-bottom:110px}