.grid_quote {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	position:relative;
  }

  .grid_quote::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	border-radius:10px;
	/* background: #fef9c3; */
	background: linear-gradient( to top left, #fdfcc4,#fff);
	/* background: url('https://picsum.photos/id/830/5000/3333') center/cover; */
	/* background: url('https://picsum.photos/id/756/5000/3333') center/cover; */
	/* background: url('https://picsum.photos/id/450/4288/2848') center/cover; */
	/* background: url('https://picsum.photos/id/313/3888/2592') center/cover; */
	/* background: url('https://picsum.photos/id/206/2880/1800') center/cover; */
	/* background: url('https://picsum.photos/id/185/3995/2662') center/cover; */
    /* background: url('https://picsum.photos/1200/800?grayscale') center/cover; */
	/* background: url('https://picsum.photos/500/1200?grayscale') center/cover; */
    /* opacity: 0.1;  */
    z-index: -1; /* 将伪元素置于内容下方 */
  }
  
  #grid_quote_show {
	position: relative;
	overflow-x:auto;
	height: 100%;
	padding:0 2em;
	/* background: url('https://picsum.photos/1200/800?grayscale') center/cover; */
	/* opacity: 0.3; */
	/* padding: 20px; */
	/* border-radius: 10px; */
	/* box-shadow: 0 0 10px rgba(0,0,0,0.1); */
  }
  
  #grid_quote_status {
	position: relative;
	overflow: hidden;
	height: 100%;
	/* border-left:solid 1px rgb(202, 198, 198); */
	/* padding:20px; */
	/* background: rgba(255,255,255,0.1); */
	/* border-radius: 10px; */
	/* box-shadow: 0 0 10px rgba(0,0,0,0.1); */
  }
  #grid_quote_status::after {
    content: '';
    position: absolute;
    top: 5%;
    left: 0;
    width: 100%;
    height: 90%;
	
	background:#fff;
	/* background: rgb(254, 255, 212); */
    opacity: 0.5; /* 设置透明度 */
    z-index: -1; /* 将伪元素置于内容下方 */
  }
  
  .carousel-container {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
  }
  
  .carousel-inner {
	display: flex;
	align-items: center;
	height: 100%;
	transition: transform 0.5s ease;
  }
  
  #grid_quote_show .carousel-inner {
	align-items: center; /* 修改这里：flex-start → center */
  }
  
  #grid_quote_show .carousel-item {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center; /* 添加这一行 */
  }
  
  .carousel-item {
	flex: 0 0 100%;
	display: flex;
	position:relative;
	/* height: 100%;  */
  }

  .carousel-item > .quote_icon{
	flex: 0 0 70px;       /* 不放大、不缩小，固定 70px */
	width: 70px;
	height: 70px;
	align-self: flex-start; /* 覆盖父容器的 align-items: center，单独设置顶端对齐 */
  }


  .carousel-item > .quote-text{
	flex: 1 1 0;          /* 占剩余全部宽度 */
	padding-left: 10px;
  }
 
  .carousel-item .quote_site{
	color:#5b9af8;
	font-size: 1.2em;
  }
 
  .carousel-item .quote_content{
	margin-top: 10px;
  }

  .carousel-item > .quote_like{
	top:-5%;
	right:20px;
  }

  #grid_quote_status .carousel-item {
	height: 100%; 
  }

  #grid_quote_status  .carousel-inner{
	
  }

	/* 确保轮播容器有明确宽度 */
	#grid_quote_status .carousel-container {
	  width: 100%;
	  height: 100%;
	  overflow: hidden;
	}

	/* 轮播项正常布局 */
	#grid_quote_status .carousel-item {
	  width: 100%;
	  height: 90%;
	  /* height: 100%; */
	  flex: 0 0 100%;
	  display: flex;
	  flex-direction: column;
	}

	/* 修改 .carousel-link 为自然流式布局 */
	#grid_quote_status .carousel-link {
	  display: flex;
	  flex-wrap: wrap;           /* 允许换行 */
	  align-content: flex-start; /* 多行内容顶部对齐 */
	  justify-content: flex-start; /* 左对齐 */
	  gap: 10px;                 /* 元素间距 */
	  width: 100%;
	  height: 100%;              /* 使用父容器高度 */
	  overflow-x: hidden;        /* 禁止水平滚动 */
	  overflow-y: auto;          /* 允许垂直滚动 */
	  padding: 10px 5px;
	  box-sizing: border-box;
	  
	  /* 自定义垂直滚动条样式 */
	  scrollbar-width: thin;
	  scrollbar-color: #cbd5e1 #f1f5f9;
	}

	/* Webkit浏览器垂直滚动条样式 */
	#grid_quote_status .carousel-link::-webkit-scrollbar {
	  width: 6px;
	}

	#grid_quote_status .carousel-link::-webkit-scrollbar-track {
	  background: #f1f5f9;
	  border-radius: 3px;
	}

	#grid_quote_status .carousel-link::-webkit-scrollbar-thumb {
	  background: #cbd5e1;
	  border-radius: 3px;
	}

	#grid_quote_status .carousel-link::-webkit-scrollbar-thumb:hover {
	  background: #94a3b8;
	}
	/* 修改链接样式 - 自然宽度，向左排列 */
	#grid_quote_status .carousel-link > a {
	  flex: 0 0 auto;             /* 不伸缩，根据内容自适应宽度 */
	  height: 35px;               /* 固定高度 */
	  display: inline-flex;
	  align-items: center;
	  /* padding: 0 12px; */
	  /* background: rgba(255, 255, 255, 0.9); */
	  /* border: 1px solid #e5e7eb; */
	  border-radius: 8px;
	  text-decoration: none;
	  /* color: #333; */
	  font-size: 13px;
	  white-space: nowrap;        /* 单行不换行 */
	  box-sizing: border-box;
	  overflow: hidden;           /* 隐藏溢出 */
	  margin: 0;                  /* 移除margin，使用gap控制间距 */
	  transition: all 0.2s ease;
	  max-width: 100%;            /* 不超过容器宽度 */
	}

	/* 鼠标悬停效果 */
	/* #grid_quote_status .carousel-link > a:hover {
	  background: rgba(255, 255, 255, 1);
	  border-color: #3b82f6;
	  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
	  transform: translateY(-1px);
	} */

	#grid_quote_status .carousel-link > a > img{
		height: 20px;
		width: 20px;
		display: inline-block;
		vertical-align: middle;
		object-fit: contain;
		margin-left:8px;
	}
	
	/* 修改标题文字样式 - 超出宽度显示省略号 */
	#grid_quote_status .carousel-link > a > span {
	  display: inline-block;
	  vertical-align: middle;
	  line-height: 1.4;
	  white-space: nowrap;       /* 单行不换行 */
	  overflow: hidden;          /* 隐藏溢出 */
	  text-overflow: ellipsis;   /* 超出部分显示省略号 */
	  padding-left: 5px;
	  padding-right: 10px;
	  flex: 1;                   /* 占据剩余空间 */
	  min-width: 0;
	}

	/* 为长标题添加工具提示 */
	#grid_quote_status .carousel-link > a {
	  position: relative;
	}

	#grid_quote_status .carousel-link > a:hover::after {
	  content: attr(title);
	  position: absolute;
	  bottom: 100%;
	  left: 50%;
	  transform: translateX(-50%);
	  background: rgba(0, 0, 0, 0.8);
	  color: white;
	  padding: 6px 10px;
	  border-radius: 4px;
	  font-size: 12px;
	  white-space: normal;
	  max-width: 300px;
	  width: max-content;
	  z-index: 1000;
	  margin-bottom: 5px;
	  pointer-events: none;
	  display: block;
	}
  
  .quote-text {
	/* line-height: 1.6; */
	/* font-size: 1.2em; */
	/* color:#be123c; */
	/* color: #1e509c; */
	/* color: rgba(0,0,0,0.6); */
	/* font-weight: bold; */
	/* color:#ec4899; */
	/* font-style: italic; */
  }
  
  .quote-author {
	margin-top: 15px;
	display:flex;
	align-items: center;
	justify-content: flex-end;
	/* font-size: 1em; */
	/* font-weight: bold; */
  }
  .quote-author .line{
	width: 80px;
	height: 1px;
	background-color: #fecdd3;
	margin-right: 10px;
  }
  .quote-author-avatar{ 
	width:30px; 
	height:30px; 
	border-radius:50%; 
	margin-right:10px; 
  }

  .quote-author .quote-author-alias{
	font-size:1.1em;
	color:#bd1c44;
	/* color: #3c75cc; */
  }
  
  .carousel-control {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0,0,0,0.5);
	color: white;
	border: none;
	padding: 10px;
	cursor: pointer;
	z-index: 10;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
  }
  
  .carousel-control.prev {
	left: 10px;
  }
  
  .carousel-control.next {
	right: 10px;
  }
  
  @media (max-width: 768px) {
	.grid_quote {
	  grid-template-columns: 1fr;
	}
	#grid_quote_status {
	  display: none;
	}
	
	/* 响应式调整 */
	#grid_quote_status .carousel-link {
	  gap: 8px;
	  padding: 8px 5px;
	}
	
	#grid_quote_status .carousel-link > a {
	  height: 32px;
	  font-size: 12px;
	  padding: 0 10px;
	}
  }