.header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 64px;
        background: rgba(10, 15, 30, 0.85);
        backdrop-filter: blur(10px);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 24px;
        z-index: 999;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        box-sizing: border-box;
      }

      /* LOGO */
     .header .logo {
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        letter-spacing: 1px;
        cursor: pointer;
        flex-shrink: 0;
      }

      .logo span {
        color: #3b82f6;
      }

      /* 中间导航 */
     .header .nav {
        display: flex;
        gap: 18px;
        flex: 1;
        justify-content: center;
        min-width: 0; /* 防止挤压异常 */
      }

      .nav a {
        color: #cbd5e1;
        text-decoration: none;
        font-size: 14px;
        white-space: nowrap;
      }

      .nav a:hover {
        color: #3b82f6;
      }

      /* 右侧按钮 */
    .header  .actions {
        display: flex;
        gap: 10px;
        flex-shrink: 0; /* 🔥 防止被压缩 */
      }

     .header .btn {
        padding: 8px 14px;
        border-radius: 8px;
        font-size: 13px;
        cursor: pointer;
        border: none;
        transition: 0.2s;
        white-space: nowrap; /* 🔥 防止文字换行 */
      }

      /* 登录按钮 */
     .header .login-btn {
        background: transparent;
        color: #cbd5e1;
        border: 1px solid rgba(255, 255, 255, 0.15);
      }

      .login-btn:hover {
        /* border-color: #3b82f6;
        color: #3b82f6; */
      }

      /* 商城按钮 */
      .shop-btn {
        background: #3b82f6;
        color: #fff;
      }

      .shop-btn:hover {
        background: #2563eb;
      }

	  .actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 用户信息容器 */
.user-info {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 6px 12px;
  border-radius: 999px;

  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(0, 255, 255, 0.3);

  color: #00f5ff;

  font-size: 14px;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition: all 0.2s ease;
}

/* 用户名 */
.user-info .username {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 100px;
  font-weight: 500;
  color: #00f5ff;
}

/* 退出按钮 */
 .header .logout-btn {
  padding: 4px 10px;
  border-radius: 20px;

  border: 1px solid rgba(255, 80, 120, 0.5);
  background: transparent;

  color: #ff4d6d;
  font-size: 12px;

  cursor: pointer;

  transition: all 0.2s ease;
  margin-top:0;
}

.logout-btn:hover {
  background: rgba(255, 77, 109, 0.15);
  border-color: #ff4d6d;
  transform: translateY(-1px);
}

/* 登录按钮（统一风格优化一下） */
.login-btn {
  background: linear-gradient(90deg, #00f5ff, #6c5ce7);
  color: #fff;
  border: none;
  border-radius: 20px;

  padding: 6px 14px;

  cursor: pointer;

  transition: all 0.2s ease;
}

.login-btn:hover {
  /* transform: translateY(-1px); */
  /* box-shadow: 0 0 12px rgba(0, 245, 255, 0.4); */
}

.logo img{
    height:40px;
    width: auto;
}


      /* ===== 响应式优化（关键） ===== */
      @media (max-width: 900px) {
        .nav {
          display: none; /* 小屏隐藏中间导航 */
        }
      }

      body{
        padding-top:64px;
      }