#app-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #f8f9fa;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;

  /* 立方体的容器（让方块水平排列） */
  .cube-container {
    display: flex;
    gap: 15px; /* 方块之间的间距 */
  }

  /* 立体小方块 */
  .cube {
    width: 40px;
    height: 40px;
    background: linear-gradient(145deg, #3498db, #2980b9); /* 渐变颜色 */
    border-radius: 5px;
    position: relative;
    animation: jump 1.2s infinite ease-in-out;
  }

  /* 给不同的方块加不同颜色 */
  .cube1 { background: linear-gradient(145deg, #e74c3c, #c0392b); animation-delay: 0s; }
  .cube2 { background: linear-gradient(145deg, #f1c40f, #d4ac0d); animation-delay: 0.2s; }
  .cube3 { background: linear-gradient(145deg, #2ecc71, #27ae60); animation-delay: 0.4s; }

  /* 方块跳跃动画 */
  @keyframes jump {
    0%, 100% {
      transform: translateY(0);
      box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
    }
    50% {
      transform: translateY(-30px);
      box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.3);
    }
  }

  /* 加载文字 */
  .loading-text {
    margin-top: 20px;
    font-size: 18px;
    color: #555;
    font-weight: bold;
    letter-spacing: 2px;
    animation: fade 1.5s infinite ease-in-out;
  }

  /* 文字淡入淡出动画 */
  @keyframes fade {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 1; }
  }
}