/* ============ 手机版底部 Tab 导航（与前台 index.php 同一套视觉） ============ */
/* 用户中心全局共享：登录态页面（head.php/foot.php）、匿名页面（head2.php/foot2.php）、
   登录/注册页（login.php/reg.php）统一引用本文件，避免各页内联副本失同步。
   z-index 997：低于遮罩(998)/侧边栏(999)/顶栏(1000)，侧边栏抽屉打开时自然覆盖 Tab 栏 */
.mobile-tabbar {
  display: none;
}

@media (max-width: 768px) {
  .mobile-tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 997;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 0.5px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.05);
    padding: 5px 6px calc(5px + env(safe-area-inset-bottom, 0px));
  }

  .mobile-tabbar .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 3px 0 2px;
    text-decoration: none;
    color: #9ca3af;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    min-height: 48px;
  }

  .mobile-tabbar .tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 28px;
    font-size: 20px;
    line-height: 1;
    border-radius: 14px;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.22s ease, color 0.22s ease;
  }

  .mobile-tabbar .tab-label {
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.5px;
    transition: color 0.2s ease;
  }

  .mobile-tabbar .tab-item:active .tab-icon {
    transform: scale(0.86);
  }

  .mobile-tabbar .tab-item.active {
    color: #4f7cff;
  }
  .mobile-tabbar .tab-item.active .tab-icon {
    color: #4f7cff;
    background: #eaf0ff;
    transform: translateY(-2px) scale(1.06);
    animation: tabIconPop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .mobile-tabbar .tab-item.active .tab-label {
    color: #4f7cff;
    font-weight: 600;
  }

  @keyframes tabIconPop {
    0% { transform: translateY(0) scale(0.7); }
    62% { transform: translateY(-3px) scale(1.12); }
    100% { transform: translateY(-2px) scale(1.06); }
  }
}