/*User CSS*/

/* 全局重置 - 确保移动端没有左右间隙 */
@media (max-width: 768px) {
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }
  
  /* 重置所有Bootstrap容器的默认边距 */
  .container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}
/* Header样式覆盖 */
header {
    background-color: #07438a !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    color: #ffffff !important;
  }
  
  /* Header固定状态 - 幻灯片从上滑入效果 */
  header.navbar-sticky-on {
    position: fixed !important;
    top: 0 !important;
    z-index: 1030 !important;
    -webkit-animation: slideInFromTop 0.6s ease-out !important;
    animation: slideInFromTop 0.6s ease-out !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  }
  
  /* 从上方滑入的动画 - 只改变位置，不改变透明度 */
  @keyframes slideInFromTop {
    0% {
      transform: translateY(-100%);
    }
    100% {
      transform: translateY(0);
    }
  }
  
  /* 兼容webkit浏览器 */
  @-webkit-keyframes slideInFromTop {
    0% {
      -webkit-transform: translateY(-100%);
      transform: translateY(-100%);
    }
    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
  }
  
  /* 导航链接行高和颜色 */
  .navbar-nav .nav-link {
    line-height: 30px;
    color: #ffffff !important;
  }
  .navbar-nav .nav-link:hover {
    background-color: #015ac1 !important;
  }
  
  /* 减小导航菜单的左右边距 */
  .navbar-nav.navbar-nav-scroll.mx-auto {
    margin-left: 2rem !important;
    margin-right: 2rem !important;
  }
  
  /* 下拉菜单背景色 */
  .nav-item.dropdown .dropdown-menu {
    background-color: #015ac1 !important;
    color: #ffffff !important;
    border-radius: 0 !important;
  }
  .nav-item.dropdown .dropdown-menu .dropdown-item {
    color: #ffffff !important;
  }
  .nav-item.dropdown .dropdown-menu .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
  }
  
  /* 搜索图标颜色 */
  .nav-search .nav-link {
    color: #ffffff !important;
  }
  .nav-search .nav-link:hover {
    color: #ffffff !important;
    opacity: 0.8;
  }
  
  /* 自定义5列布局 */
  .col-md-2-4 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 20%;
    padding-left: 1px;
    padding-right: 1px;
  }
  
  /* A4图书比例优化 */
  .card-img {
    aspect-ratio: 1/1.414; /* A4比例 */
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
  }

  .card-img-top {
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
  }
  
  /* 移动端操作按钮优化 - 小屏幕一行显示 */
  @media (max-width: 991.98px) {
    .mobile-action-buttons {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      -ms-overflow-style: none;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .mobile-action-buttons::-webkit-scrollbar {
      display: none;
    }
    
    .mobile-action-buttons .btn {
      font-size: 0.7rem;
      padding: 0.2rem 1.0rem;
      border-radius: 0.25rem;
      transition: all 0.2s ease;
      width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      white-space: nowrap;
    }
    
    .mobile-action-buttons .btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }
    
    .mobile-action-buttons .btn-sm {
      font-size: 0.65rem;
      padding: 0.15rem 0.25rem;
      width: 24px;
      height: 24px;
    }
    
    /* 按钮容器 */
    .mobile-action-buttons .d-flex {
      gap: 0.2rem;
      flex-wrap: nowrap;
      overflow-x: auto;
      justify-content: center;
      align-items: center;
    }
    
    /* 确保按钮不换行 */
    .mobile-action-buttons .flex-nowrap {
      flex-wrap: nowrap !important;
    }
    
    /* 防止按钮收缩和扩展 */
    .mobile-action-buttons .flex-shrink-0 {
      flex-shrink: 0 !important;
      flex-grow: 0 !important;
      max-width: 28px !important;
    }
    
    .mobile-action-buttons .btn-sm.flex-shrink-0 {
      max-width: 24px !important;
    }
  }
  
  /* 标题超过2行时自动隐藏 */
  .text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    max-height: 2.4em;
    min-height: 2.4em;
    word-wrap: break-word;
    word-break: break-word;
    -webkit-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
  }
  
  /* 卡片标题样式优化 */
  .card-title {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
  }
  
  /* 响应式搜索框样式 */
  .nav-search .input-group {
    min-width: 200px;
  }
  .nav-search .input-group .form-control {
    border-color: rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
  }
  .nav-search .input-group .form-control::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.7);
  }
  .nav-search .input-group .form-control::-moz-placeholder {
    color: rgba(255, 255, 255, 0.7);
  }
  .nav-search .input-group .form-control:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.7);
  }
  .nav-search .input-group .form-control::-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.7);
  }
  .nav-search .input-group .form-control::placeholder {
    color: rgba(255, 255, 255, 0.7);
  }
  .nav-search .input-group .form-control:focus {
    border-color: rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0.2);
    -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.1);
            box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.1);
    color: #ffffff;
  }
  
  /* 标签页内容样式 */
  .tab-content {
    padding: 10px 0;
    margin-bottom: 0px;
  }
  
  /* 卡片标题动画效果 */
  .card-title a:hover {
    color: var(--bs-primary) !important;
  }
  
  /* 卡片悬停效果 */
  .card {
    -webkit-transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
    transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transition: transform 0.3s ease, box-shadow 0.3s ease, -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
    border-radius: 0px !important;
  }
  .card:hover {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
    -webkit-box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
  }
  /*# sourceMappingURL=style.css.map */
  
  /* 背景样式设置 */
  main {
    background: #54759b url(https://www.guoturen.com/static/bg.png) fixed !important;
  }
  
  /* 排除头部和页脚，只对主要内容区域的container应用白色背景 */
  .container:not(header .container):not(footer .container) {
    background-color: white !important;
  }
  
/* 重写container的内边距 */
.container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
  padding-left: 5px !important;
  padding-right: 5px !important;
}

/* 公告区域布局优化 */
.announcement-container {
  width: 100% !important;
}

.announcement-container .tiny-slider {
  width: 100% !important;
  flex: 1 !important;
}

.announcement-container .tiny-slider-inner {
  width: 100% !important;
}

/* 问题卡片响应式布局 - 小屏幕使用12列 */
@media (max-width: 575.98px) {
  .question-card-container {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* 页脚链接防止换行 */
.footer-nav-link {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 0.9rem !important;
}

/* 页脚列在小屏幕下的调整 - 始终保持2列布局 */
@media (max-width: 768px) {
  .footer-nav-col {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

@media (max-width: 576px) {
  .footer-nav-col {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

/* Tiny Slider 轮播样式优化 */
.tiny-slider .card {
  border: none;
  border-radius: 0;
}

.tiny-slider .card-img-overlay {
  background: linear-gradient(to bottom, transparent 30%, rgba(153, 239, 241, 0.3) 50%, rgba(33, 99, 232, 0.25) 70%)
}

/* Tiny Slider 响应式高度 */
.tiny-slider .card {
  height: 544px !important;
}

@media (max-width: 992px) {
  .tiny-slider .card {
    height: 380px !important;
  }
}

@media (max-width: 480px) {
  .tiny-slider .card {
    height: 480px !important;
  }
}


  /* 分类导航容器基础样式 */
.category-navigation-container {
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
}

/* 分类按钮容器 - 包含一二三级分类 */
.category-buttons-container {
    background: white;
    border-radius: 0.375rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    overflow: hidden;
    transition: all 0.3s ease;
}

/* 当整个容器没有内容时高度为0 */
.category-buttons-container:empty {
    height: 0;
    padding: 0;
    margin: 0;
    border: none;
}

/* 一级分类区域 */
.first-level-section {
    padding: 0.5rem;
    border-bottom: 0px solid #e9ecef;
}

/* 二级分类区域 */
.second-level-section {
    padding-bottom: 0.5rem;
    border-bottom: 0px solid #e9ecef;
}

/* 三级分类区域 */
.third-level-section {
    padding-bottom: 0.5rem;
    border-bottom: 0px solid #e9ecef;
}

/* 一级分类按钮样式 */
.first-level-btn {
    position: relative !important;
    overflow: visible !important;
    z-index: 1 !important;
    padding-bottom: 0rem !important;
    margin-top: -1.8rem !important;
}

/* 面包屑区域 */
.breadcrumb-area {
    border-top: 0px solid #e9ecef;
    padding: 0.5rem;
    background: white;
    border-radius: 0.375rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* 平滑过渡效果 */
.category-buttons-container,
.breadcrumb-area {
    transition: all 0.3s ease;
}

.btn {  
  border-radius: 0px !important;
}

/* 按钮样式优化 */
.btn-xs {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    border-radius: 12px;
    white-space: nowrap;
}


/* 排序按钮组样式 */
.btn-group .btn-xs {
    text-decoration: none;
    display: inline-block;
}

.btn-group .btn-xs:hover {
    text-decoration: none;
}

  /* 响应式设计 */
  @media (max-width: 768px) {
    .category-navigation-container {
      padding: 0.5rem;
    }
    
    .first-level-section,
    .second-level-section,
    .third-level-section,
    .breadcrumb-area {
      padding: 0.5rem;
    }
    .navbar-nav.navbar-nav-scroll.mx-auto {
      margin-left: 0rem !important;
      margin-right: 0rem !important;
      background-color: #015ac1 !important;
    }
  }
  .logo-text-vertical {
    writing-mode: vertical-rl; 
    text-orientation: upright; 
    font-size: 12px; 
    font-weight: bold; 
    color: #fb7885; 
    background-color: #dc3545; 
    padding: 4px 5px 6px 3px; 
    border-radius: 4px; 
    line-height: 1.0; 
    text-align: center; 
    display: flex; 
    align-items: center; 
    justify-content: flex-start; 
    min-width: 20px; 
    min-height: 30px;
  }
.logo-icon-small {
    width: 32px;
    height: 34px;
    background: linear-gradient(45deg, #dc3545, #e74c3c);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    flex-shrink: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-icon-small::before {
    content: 'G';
    color: white;
    font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
    font-size: 24px;
    line-height: 1;
}

.logo-text-small {
    font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
    font-size: 1.25rem;
    font-weight: bold;
    color: #ffffff;
    letter-spacing: 1px;
    bottom: 6px;
    line-height: 1;
    position: relative;
}

.logo-text-small::after {
    content: 'GuotuRen.com';
    position: absolute;
    bottom: -12px;
    left: 0;
    font-size: 8px;
    font-weight: normal;
    color: #ffffff;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* 深色模式样式 */
.dark-mode-item .logo-text-small {
    color: #ff6b6b;
}

.dark-mode-item .logo-text-small::after {
    color: #fff;
}

/* 导航栏活动状态样式 - 移除前面的点，设置背景色 */
header .navbar-nav .nav-link.active:before {
    content: none !important;
}

header .navbar-nav .nav-link:hover {
  background-color: #015ac1 !important;
  color: white !important;
  padding: 2px 16px;
}

header .navbar-nav .nav-link {
  color: white !important;
  padding: 2px 16px;
}

header .navbar-nav .nav-link.active {
    background-color: #015ac1 !important;
    color: white !important;
    padding: 2px 16px;
}

header .navbar-nav .nav-link.active:hover {
    background-color: #015ac1 !important;
    color: white !important;
    padding: 2px 16px;
}

/* 强制统一右侧按钮样式 */
header .navbar .nav.flex-nowrap .nav-item .btn-sm {
    height: 31px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    /* 强制统一右侧按钮样式 */
header .navbar .nav.flex-nowrap .nav-item .btn {
    margin-bottom: 0px !important;
}

/* 确保搜索框和按钮高度一致 */
.nav-search .input-group-sm {
    height: 31px !important;
}

.detail-title-note {
    color: #aaa;
    border-left: 1px solid #efebe9;
    padding-left: 12px;
    margin-left: 1px;
}

.detail-left-note {
  margin-left: 12px;
  margin-top: 8px;
}

	/* 右侧边栏粘性定位样式 */
	.sticky-sidebar {
		position: sticky !important;
		top: 80px !important;
		z-index: 100;
		height: fit-content;
		max-height: calc(100vh - 80px);
		overflow-y: auto;
	}

	/* 左侧边栏粘性定位样式 */
	.col-md-1 .sticky-sidebar {
		position: sticky !important;
		top: 80px !important;
		z-index: 100;
	}

	/* 响应式调整 */
	@media (max-width: 991.98px) {

		.sticky-sidebar {
			position: static !important;
		}
	}

	/* 右侧边栏导航样式优化 */
	.sticky-sidebar .nav-pills .nav-link {
		border-radius: 0.375rem;
		margin-bottom: 0.5rem;
		transition: all 0.2s ease;
	}

	.sticky-sidebar .nav-pills .nav-link:hover {
		background-color: rgba(0, 123, 255, 0.1);
	}

	.sticky-sidebar .nav-pills .nav-link.active {
		background-color: #007bff;
		color: white;
	}

	/* 文章标题区域样式优化 */
	.article-header-card {
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	}

	.article-header-card .badge {
		font-size: 0.875rem;
		font-weight: 500;
	}

	.article-header-card h1 {
		font-size: 1.75rem;
		line-height: 1.4;
		max-width: 100%;
	}

	@media (min-width: 768px) {
		.article-header-card h1 {
			font-size: 2rem;
		}
	}

	@media (min-width: 992px) {
		.article-header-card h1 {
			font-size: 2.25rem;
		}
	}

	.text-white-25 {
		color: rgba(255, 255, 255, 0.25) !important;
	}

	.article-meta .avatar {
		flex-shrink: 0;
	}

	/* 文章标题换行样式 */
	.first-level-btn {
		white-space: normal !important;
		word-wrap: break-word !important;
		word-break: break-word !important;
		overflow-wrap: break-word !important;
		height: auto !important;
		min-height: 44px;
		font-weight: 700 !important;
	}

		/* 文章内容样式 */
	.detail_content {
		text-align: justify;
		word-wrap: break-word;
		word-break: break-word;
		overflow-wrap: break-word;
		white-space: normal;
		max-width: 100%;
	}
	
	/* 允许HTML标签正常渲染 */
	.detail_content p {
		text-align: justify;
		text-indent: 32px;
        line-height: 30px;
        font-size: 16px;
		margin-bottom: 1rem;
		word-wrap: break-word;
		word-break: break-word;
		overflow-wrap: break-word;
	}
	
	/* 尊重内联样式 */
	.detail_content p[style*="text-align: center"] {
		text-align: center !important;
	}
	
	.detail_content p[style*="text-align: right"] {
		text-align: right !important;
	}
	
	.detail_content p[style*="text-align: left"] {
		text-align: left !important;
	}
	
	.detail_content strong,
	.detail_content b {
		font-weight: bold;
	}
	
	.detail_content br {
		display: block;
		margin: 0.5rem 0;
	}
	
	/* 确保链接和URL能够自动换行 */
	.detail_content a {
		word-wrap: break-word;
		word-break: break-all;
		overflow-wrap: break-word;
	}
	
	/* 确保所有内联元素都能换行 */
	.detail_content * {
		max-width: 100%;
		word-wrap: break-word;
		overflow-wrap: break-word;
	}

	/* 免责声明等提示信息两端对齐 */
	.tips,
	.tips p,
	.tips div {
		text-align: justify !important;
	}

	/* 文章标题样式 */
	.article-header-card h1 {
		text-align: center;
		max-width: 100%;
		font-size: 20px !important;
		font-weight: 600 !important;
	}

	.first-level-btn:hover {
		white-space: normal !important;
	}

	/* 文章元数据样式 */
	.article-meta .d-flex>* {
		display: flex;
		align-items: center;
		height: 20px;
	}

	.article-meta i {
		font-size: 12px !important;
		line-height: 1;
		margin: 0;
	}

	.article-meta .gap-3 {
		gap: 0.75rem !important;
	}
  
  .navbar-nav .nav-item:last-child .nav-link {
    padding-right: 15px !important;
  }

    
    /* 搜索建议样式 */
  #searchSuggestions {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      z-index: 1050;
      border: 1px solid rgba(0,0,0,.15);
      border-radius: 0.375rem;
      box-shadow: 0 0.5rem 1rem rgba(0,0,0,.175);
  }

  .suggestion-item {
      display: flex;
      align-items: center;
      padding: 0.5rem 1rem;
      text-decoration: none;
      color: #212529;
      transition: background-color 0.15s ease-in-out;
  }

  .suggestion-item:hover,
  .suggestion-item.active {
      background-color: #07438a;
      color: #ebecec;
  }

  .suggestion-text {
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }

  /* 内容页标题栏样式 */
  .content-title-bar {
      background-color: #07438a !important;
      padding: 15px 0 10px 0 !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      transition: all 0.3s ease-in-out;
  }

  .content-title-bar .content-title h4 {
      font-size: 0.95rem;
      font-weight: 600;
      color: #ffffff !important;
      margin: 0;
      white-space: normal;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 90%;
      flex: 1;
      line-height: 1.3;
      max-height: 2.6em;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
  }

  .content-title-bar .content-actions {
      display: flex;
      justify-content: flex-end;
  }

  .content-title-bar .content-actions .btn {
      font-size: 0.9rem;
      padding: 0.1rem 0.8rem;
      border-color: rgba(255, 255, 255, 0.3);
      color: #ffffff;
      white-space: nowrap;
      flex-shrink: 0;
      font-weight: 500;
  }
  
  .content-title-bar .content-actions .btn:hover {
      background-color: rgba(255, 255, 255, 0.9);
      border-color: rgba(255, 255, 255, 0.5);
      color: #07438a;
  }

  .content-title-bar .content-actions .btn i {
      font-size: 1rem;
  }

/* 功能按钮动画效果 */
.social-widget-area .col-4 a {
    transition: all 0.3s ease;
    transform: translateY(0);
}

.social-widget-area .col-4 a:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.social-widget-area .col-4 a i {
    transition: all 0.3s ease;
}

.social-widget-area .col-4 a:hover i {
    transform: scale(1.1);
}

/* 分享图标竖排样式 */
.nav.text-white-force {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.nav.text-white-force .nav-item {
    width: 100%;
    display: flex;
    justify-content: center;
}

.nav.text-white-force .nav-link {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    margin: 0.25rem 0;
}

.nav.text-white-force .nav-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.nav.text-white-force .nav-link i {
    font-size: 1.2rem;
}

  /* 发表文章按钮悬停效果 */
  .social-widget-area .col-4 a.bg-primary:hover {
      background-color: #0d6efd !important;
      box-shadow: 0 8px 25px rgba(13, 110, 253, 0.3);
  }

  /* 上传文档按钮悬停效果 */
  .social-widget-area .col-4 a.bg-success:hover {
      background-color: #198754 !important;
      box-shadow: 0 8px 25px rgba(25, 135, 84, 0.3);
  }

  /* 提出问题按钮悬停效果 */
  .social-widget-area .col-4 a.bg-info:hover {
      background-color: #0dcaf0 !important;
      box-shadow: 0 8px 25px rgba(13, 202, 240, 0.3);
  }

  /* 当header变为sticky时，隐藏导航栏，显示标题栏 */
  header.navbar-sticky-on .navbar {
      display: none !important;
  }

  /* 隐藏标签云导航栏 */
  header.navbar-sticky-on .tag-header-bar {
      display: none !important;
  }

  header.navbar-sticky-on .content-title-bar {
      display: block !important;
  }

  /* 小屏幕下隐藏粘性标题栏 */
  @media (max-width: 768px) {
      .content-title-bar {
          display: none !important;
      }
      
      header.navbar-sticky-on .content-title-bar {
          display: none !important;
      }

    .g-2, .gy-2 {
        --bs-gutter-y: 1.8rem !important;
    }
    .g-2, .gx-2 {
        --bs-gutter-x: 0.5rem !important;
    }
  }

  /* 确保标题栏在sticky状态下正确显示 - 添加滑入动画 */
  .navbar-sticky-on .content-title-bar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1030;
      width: 100%;
      /* 和header使用相同的滑入动画 */
      -webkit-animation: slideInFromTop 0.8s ease-out !important;
      animation: slideInFromTop 0.8s ease-out !important;
  }
  
  /* content-title-bar 初始隐藏在顶部外 */
  .content-title-bar:not(.d-none) {
      -webkit-animation: slideInFromTop 0.8s ease-out;
      animation: slideInFromTop 0.8s ease-out;
  }

  /* 搜索框聚焦时显示建议 */
  #searchInput:focus + .btn + #searchSuggestions {
      display: block !important;
  }

  .grayscale {
    filter: grayscale(100%) !important;
  }

  /* 分层灰度控制 - 仅图片区域灰度 */
  .card-image-grayscale .card-img-top,
  .card-image-grayscale .card-img-top i {
    filter: grayscale(100%) !important;
    transition: filter 0.3s ease;
  }

  /* 悬停时恢复彩色 */
  .card-image-grayscale:hover .card-img-top,
  .card-image-grayscale:hover .card-img-top i {
    filter: grayscale(90%) !important;
  }

  /* 文档类型图标在灰度模式下保持可见 */
  .card-image-grayscale .filetype-icon i {
    filter: grayscale(50%) !important;
    opacity: 0.8;
  } 

    /* 绝对定位的flex元素超出范围隐藏 */
    .d-flex.justify-content-between.align-items-center.position-absolute {
      overflow: hidden !important;
  }

  h1, .h1 {
    font-size: 24px !important;
  }

  h2, .h2 {
    font-size: 22px !important;
  }
  
  h3, .h3 {
    font-size: 20px !important;
  }

  h4, .h4 {
    font-size: 18px !important;
  }
  
  h5, .h5 {
    font-size: 16px !important;
  }
  
  h6, .h6 {
    font-size: 14px !important;
  }
  
  h7, .h7 {
    font-size: 12px !important;
  }

  h8, .h8 {
    font-size: 10px !important;
  }

  h9, .h9 {
    font-size: 8px !important;
  }

  .doc-preview-container {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    min-height: 600px;
}

.doc-info-card {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px 20px 10px 20px;
    margin-bottom: 15px;
}

.doc-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 15px;
}

.doc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 15px 0;
    font-size: 14px;
    color: #6c757d;
}

.doc-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.file-type-badge {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
}

.pdf-badge { background-color: #dc3545; color: white; }
.word-badge { background-color: #28a745; color: white; }
.excel-badge { background-color: #ffc107; color: black; }
.ppt-badge { background-color: #17a2b8; color: white; }
.other-badge { background-color: #6c757d; color: white; }

.preview-btn {
    background: linear-gradient(45deg, #28a745, #1e7e34);
    border: none;
    color: white;
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.preview-btn:hover {
    background: linear-gradient(45deg, #1e7e34, #155724);
    color: white;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(40,167,69,0.3);
}

.doc-page-container {
    width: 100%;
    display: block;
}

.doc-page-container img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

.file-type-badge {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.price-display .badge {
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 6px;
}

.price-display .bg-success {
    background-color: #28a745 !important;
}

.price-display .bg-primary {
    background-color: #007bff !important;
}

.price-display .bg-warning {
    background-color: #ffc107 !important;
    color: #000 !important;
}

.related-docs {
    margin-top: 30px;
}

.related-doc-card {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.related-doc-card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.doc-stats {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    margin: 20px 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    text-align: center;
}

.stat-item {
    padding: 10px;
}

.stat-number {
    font-size: 24px;
    font-weight: bold;
    color: #007bff;
    display: block;
}

.stat-label {
    font-size: 12px;
    color: #6c757d;
    margin-top: 5px;
}

/* 文章目录样式 */
#toc-container {
  max-height: 400px;
  overflow-y: auto;
}

.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc-list li {
  margin-bottom: 0.5rem;
}

.toc-list a {
  color: #6c757d;
  text-decoration: none !important;
  padding: 0.25rem 0.5rem;
  display: block;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
  border-radius: 0 6px 6px 0;
  font-size: 0.85rem;
  line-height: 1.4;
}

.toc-list a:hover {
  color: #007bff;
  text-decoration: none !important;
  border-left-color: #007bff;
  background: rgba(0, 123, 255, 0.05);
  transform: translateX(2px);
}

.toc-list a.active {
  color: #007bff;
  text-decoration: none !important;
  border-left-color: #007bff;
  background: rgba(0, 123, 255, 0.1);
  font-weight: 500;
}

.toc-list .toc-h1 {
  font-size: 0.9rem;
  color: #2c3e50;
  margin-bottom: 0.25rem;
}

.toc-list .toc-h2 {
  font-size: 0.85rem;
  margin-left: 0.75rem;
  color: #495057;
}

.toc-list .toc-h3 {
  font-size: 0.8rem;
  margin-left: 1.5rem;
  color: #6c757d;
}

.toc-list .toc-h4 {
  font-size: 0.75rem;
  margin-left: 2.25rem;
  color: #6c757d;
}

.toc-list .toc-h5 {
  font-size: 0.7rem;
  margin-left: 3rem;
  color: #6c757d;
}

.toc-list .toc-h6 {
  font-size: 0.65rem;
  margin-left: 3.75rem;
  color: #6c757d;
}

#tns1 > .tns-item {
  font-size: 13px !important;
}

/* 目录滚动条样式 */
#toc-container::-webkit-scrollbar {
  width: 4px;
}

#toc-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 2px;
}

#toc-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 2px;
}

#toc-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 文章内容中的标题样式 */
.detail_content h1,
.detail_content h2,
.detail_content h3,
.detail_content h4,
.detail_content h5,
.detail_content h6 {
  scroll-margin-top: 80px; /* 为固定导航栏留出空间 */
}

/* 标题锚点样式 */
.heading-anchor {
  display: block;
  scroll-margin-top: 80px;
  font-weight: bold;
  color: #07438a;
}

.heading-anchor:hover {
  color: #007bff;
  border-bottom-color: #007bff;
}

/* 响应式优化 */
@media (max-width: 991px) {
  .sticky-sidebar {
      position: static !important;
  }
}

.create-question-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.main-content {
  background: #fff;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.sidebar {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  height: fit-content;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
font-weight: 600;
  margin-bottom: 8px;
display: block;
}

.form-control {
  border: 1px solid #ddd;
  border-radius: 4px;
}

.form-control:focus {
border-color: #007bff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}

.btn-primary {
  background: #007bff;
  padding: 12px 30px;
  border-radius: 4px;
  font-weight: 600;
}

.btn-primary:hover {
  background: #0056b3;
}

.btn-secondary {
background: #6c757d;
  border: none;
  padding: 12px 30px;
  border-radius: 4px;
font-weight: 600;
}

.category-option {
  padding: 5px 10px;
}

.category-option.level-1 {
  font-weight: bold;
  color: #333;
}

.category-option.level-2 {
  padding-left: 20px;
  color: #666;
}

.category-option.level-3 {
  padding-left: 40px;
  color: #999;
}

.editor-container {
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.alert {
  padding: 12px 16px;
  margin-bottom: 20px;
  border-radius: 4px;
}

.alert-danger {
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
}

.alert-success {
  background: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
}

.smt {
  scroll-margin-top: 100px !important;
} 


   /* 问题列表样式 */
   .question-card {
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
}

.question-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #007bff;
}

.question-title {
    color: #2c3e50;
    font-weight: 600;
    line-height: 1.4;
    /* 支持多行显示 */
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    max-height: calc(1.4em * 3) !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.question-meta {
    font-size: 0.875rem;
    color: #6c757d;
}

.question-stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.8rem;
}

 .stat-number {
     font-weight: 600;
     color: #007bff;
     font-size: 1rem;
 }

.question-status {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.status-badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
    border-radius: 10px;
    white-space: nowrap;
}

.status-solved {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.status-unsolved {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.status-closed {
    background-color: #e2e3e5;
    color: #495057;
    border: 1px solid #d6d8db;
}

.status-best-answer {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
    animation: bestAnswerPulse 2s ease-in-out infinite;
}

@keyframes bestAnswerPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7);
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(255, 193, 7, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
    }
}

.question-content {
    color: #495057;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.author-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.small-avatar {
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
    min-height: 10px !important;
}

.author-avatar.small-avatar {
    width: 15px !important;
    height: 15px !important;
}

.category-badge {
    background-color: #e3f2fd;
    color: #1976d2;
    border: 1px solid #bbdefb;
}

.second-level-section {
    margin-bottom: 1rem;
}

.third-level-section {
    margin-bottom: 1rem;
}

.first-level-btn {
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
}

.first-level-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 空状态样式 */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
}

.empty-state i {
    font-size: 4rem;
    color: #dee2e6;
    margin-bottom: 1rem;
}

.empty-state p {
    color: #6c757d;
    font-size: 1.1rem;
    margin-bottom: 0;
}

/* 响应式优化 */
@media (max-width: 768px) {
    .question-stats {
        gap: 10px;
    }

    .stat-item {
        font-size: 0.8rem;
    }

    .question-status {
        gap: 5px;
    }

    .status-badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }
    .navbar-sticky-on .navbar-nav .nav-link {
      line-height: 30px !important;
    }
}


@media (max-width: 991.98px) {
  /* 小屏幕用户按钮只显示图标 */
  .btn.dropdown-toggle .d-none.d-sm-inline {
  display: none !important;
}

.btn.dropdown-toggle {
  padding: 0.375rem 0.5rem !important;
  min-width: auto;
}

}

@media (max-width: 767.98px) {
/* 小屏幕水平横向菜单样式 */
.navbar-nav.nav-fill {
  display: flex;
  flex-direction: row;
  background-color: #1e3a8a;
  width: 100%;
  flex-wrap: wrap;
  margin: 0px 0;
  border-radius: 8px;
  padding: 5px 0;
}

.navbar-nav.nav-fill .nav-item {
  min-width: 0;
}

.navbar-nav.nav-fill .nav-link {
  font-size: 13px;
  font-weight: 500;
  color: white;
  transition: all 0.3s ease;
  border-radius: 6px;
  text-align: center;
  display: block;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 5px 0px!important;
}

.navbar-nav.nav-fill .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  text-decoration: none;
}

.navbar-nav.nav-fill .nav-link.active {
  background-color: #3b82f6;
  color: white;
  font-weight: 600;
  padding: 5px 0px;
}

/* 小屏幕用户信息区域调整 */
.nav.flex-nowrap {
  flex-wrap: wrap;
  align-items: center;
}

.nav-item.dropdown {
  min-width: auto;
}

.nav-link.dropdown-toggle {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}

.dropdown-menu {
  font-size: 0.875rem;
  min-width: 200px;
}

/* 调整用户头像和文字大小 */
.avatar-xs {
  width: 24px;
  height: 24px;
  font-size: 0.75rem;
}

/* 小屏幕用户按钮只显示图标 */
.btn.dropdown-toggle .d-none.d-sm-inline {
  display: none !important;
}

.btn.dropdown-toggle {
  padding: 0.375rem 0.5rem !important;
  min-width: auto;
}

/* 调整通知按钮 */
.nav-item.dropdown .nav-link {
  padding: 0.5rem;
}

/* 调整搜索区域 */
.nav-item.dropdown.nav-search .nav-link {
  padding: 0.5rem;
}

/* 小屏幕搜索框调整 */
.nav-item.dropdown.nav-search .dropdown-menu {
  width: 90vw;
  max-width: 500px;
  left: 50% !important;
  transform: translateX(-50%);
  margin-left: 0;
  margin-right: 10px;
  border-radius: 8px;
}
.nav-item.dropdown.nav-search .dropdown-menu .form-control {
  width: 100%;
  border-radius: 6px;
  padding: 0.75rem;
  font-size: 1rem;
  height: auto;
}

.nav-item.dropdown.nav-search .dropdown-menu .btn {
  border-radius: 6px;
  padding: 0.75rem 1rem;
}
}

/* 相关文档标题样式 */
.related-docs-title {
  border-left: 5px solid #0085EE;
  padding-left: 16px;
  color: #333333;
  font-size: 18px;
  padding-right: 33px;
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .related-docs-title {
      font-size: 16px;
      padding-left: 12px;
      padding-right: 20px;
  }
}

@media (max-width: 576px) {
  .related-docs-title {
      font-size: 15px;
      padding-left: 10px;
      padding-right: 15px;
  }
}

/* 付费内容样式 - 通用样式 */
.paid-content-preview {
    position: relative;
    min-height: 200px;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-indent:0px!important;
}

.paid-content-preview:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.paid-content-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #cff4fc;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.paid-content-overlay {
    text-align: center;
    width: 100%;
    margin: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.paid-content-icon {
    font-size: 3rem;
    color: #6c757d;
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.paid-content-title {
    color: #495057;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-align: center;
    width: 100%;
}

.paid-content-desc {
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    text-align: center;
    width: 100%;
    line-height: 1.5;
}

.paid-content-price {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
}

.price-amount {
    font-size: 2rem;
    font-weight: 700;
    color: #dc3545;
    text-align: center;
}

.price-unit {
    font-size: 1.2rem;
    color: #6c757d;
    text-align: center;
}

.paid-content-btn {
    padding: 0.75rem 2rem !important;
    font-weight: 600 !important;
    border-radius: 25px !important;
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3) !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    text-align: center !important;
    width: auto !important;
}

.paid-content-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(13, 110, 253, 0.4);
}

/* 问题详情页面样式 */

/* 基础样式 */
.content-section {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
}

.content-section:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.section-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #495057;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.section-title.mb-0 { margin-bottom: 0; }
.section-title i { color: #667eea; }

.question-content {
  font-size: 1rem;
  line-height: 1.7;
  color: #495057;
  margin-bottom: 1.5rem;
}

.question-title-fallback {
  padding: 2rem;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border-radius: 8px;
  border: 2px solid #667eea;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.question-title-fallback h4 {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #6c757d;
}

.question-title-fallback p {
  font-size: 0.9rem;
  opacity: 0.8;
}

.question-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.btn-action {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
}

.btn-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 徽章样式 */
.reward-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: #ff1a1a;
  color: white;
  border-radius: 5px;
  font-weight: 700;
  font-size: 1.1rem;
  transition: all 0.3s ease;
}

.reward-badge:hover {
  transform: translateY(-3px) scale(1.05);
}

.reward-amount {
  font-size: 1.3rem;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.reward-unit {
  font-size: 0.9rem;
  opacity: 0.9;
}

/* 悬赏规则样式 */
.reward-rules-section {
  margin-top: 1.5rem;
}

.reward-rules-card {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border: 1px solid #dee2e6;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.reward-rules-title {
  color: #495057;
  font-weight: 600;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  font-size: 1.1rem;
}

.reward-rules-title i {
  color: #667eea;
}

.reward-rules-content {
  line-height: 1.6;
}

.text-small {
  font-size: 0.7rem;
  line-height: 1.5;
}

.reward-rule-item {
  margin-bottom: 0.8rem;
  display: flex;
  align-items: flex-start;
}

.reward-rule-item:last-child {
  margin-bottom: 0;
}

.rule-number {
  color: #667eea;
  font-weight: 600;
  margin-right: 0.5rem;
  min-width: 1.5rem;
}

.rule-text {
  color: #495057;
  flex: 1;
}

.rule-text strong {
  font-weight: 600;
}

/* 悬赏分成显示样式 */
.reward-info {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.reward-badge-small {
  display: inline-flex;
  align-items: center;
  background: #28a745;
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 5px;
  font-size: 0.75rem;
  font-weight: 600;
  animation: rewardGlow 2s ease-in-out infinite alternate;
}

.reward-badge-small i {
  font-size: 0.7rem;
}

@keyframes rewardGlow {
  0% {
      box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
  }
  100% {
      box-shadow: 0 4px 8px rgba(40, 167, 69, 0.5);
  }
}

.countdown-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, #dc3545, #c82333);
  color: white;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 3px 10px rgba(220, 53, 69, 0.3);
  border: 1px solid #fff;
  transition: all 0.3s ease;
  margin-left: 0.75rem;
}

.countdown-badge:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 20px rgba(220, 53, 69, 0.5);
}

.countdown-badge.text-muted {
  background: linear-gradient(135deg, #6c757d, #5a6268);
  box-shadow: 0 3px 10px rgba(108, 117, 125, 0.3);
}

/* 表单样式 */
.form-group { margin-bottom: 1.5rem; }
.form-label {
  font-weight: 600;
  color: #495057;
  margin-bottom: 0.5rem;
  display: block;
}

.form-control {
  width: 100%;
  border: 1px solid #ced4da;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-control:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-control.textarea {
  min-height: 120px;
  resize: vertical;
}

/* 按钮样式 */
.btn-primary {
  box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3);
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.btn-success {
  background: linear-gradient(135deg, #28a745, #20c997);
  border: none;
  box-shadow: 0 3px 10px rgba(40, 167, 69, 0.3);
  transition: all 0.3s ease;
}

.btn-success:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
}

/* 状态徽章 */
.solved-badge {
  background: #28a745 !important;
  color: white !important;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(40, 167, 69, 0.2);
  border: none;
  transition: all 0.3s ease;
}

.solved-badge:hover {
  background: #218838 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.closed-badge {
  background: #6c757d !important;
  color: white !important;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(108, 117, 125, 0.2);
  border: none;
  transition: all 0.3s ease;
}

.closed-badge:hover {
  background: #5a6268 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

.pending-badge {
  background: #ffc107 !important;
  color: #212529 !important;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2);
  border: none;
  transition: all 0.3s ease;
}

.pending-badge:hover {
  background: #e0a800 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}

/* 提问区域 */
.ask-question-simple { text-align: center; }
.ask-question-title {
  color: #495057;
  font-weight: 600;
  font-size: 1.1rem;
  margin: 0 0 0.75rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.ask-question-title i { color: #007bff; font-size: 1.2em; }
.ask-question-desc {
  color: #6c757d;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.ask-question-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #007bff, #0056b3);
  color: white;
  text-decoration: none;
  padding: 0.875rem 2rem;
  border-radius: 30px;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 6px 20px rgba(0, 123, 255, 0.25);
  transition: all 0.3s ease;
  border: none;
  width: 100%;
  justify-content: center;
}

.ask-question-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 30px rgba(0, 123, 255, 0.4);
  color: white;
  text-decoration: none;
}

/* 追问追答区域 */
.follow-up-section {
  margin-top: 1.5rem;
  padding: 1.5rem;
  border-top: 1px solid #e9ecef;
  background: #f8f9fa;
  border-radius: 8px;
}

.follow-up-header h6 {
  color: #495057;
  font-weight: 600;
  margin: 0 0 1rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.follow-up-header i { color: #007bff; }

.follow-up-item {
  background: white;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid #e9ecef;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.follow-up-question {
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #f1f3f4;
}

.follow-up-reply {
  background: #f8f9fa;
  border-radius: 6px;
  padding: 0.75rem;
  border-left: 2px solid #ffc107;
}

.follow-up-pending {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 6px;
  padding: 0.75rem;
  text-align: center;
}

.follow-up-author {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.author-avatar-small {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e9ecef;
  color: #6c757d;
  font-size: 0.8rem;
}

.author-avatar-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.follow-up-author .author-info h6 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #495057;
}

.follow-up-author .author-info small {
  color: #6c757d;
  font-size: 0.75rem;
}

.follow-up-content {
  color: #495057;
  font-size: 0.9rem;
  line-height: 1.5;
  margin-left: 2rem;
}

.follow-up-form {
  background: white;
  border-radius: 8px;
  padding: 1rem;
  border: 1px solid #e9ecef;
}

.form-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.form-actions .btn {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  border-radius: 6px;
}

/* 回答区域 */
.answers-list { display: flex; flex-direction: column; gap: 1.5rem; }
.answer-item {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
}

.answer-item:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  transform: translateY(-3px);
}

.answer-item.best-answer {
  border: 2px solid #ffc107;
  background: #fff9e6;
}

.answer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e9ecef;
}

.answer-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}

.author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  color: #6c757d;
  font-size: 1rem;
}

.author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-info h6 {
  margin: 0;
  font-weight: 600;
  color: #495057;
  font-size: 0.95rem;
}

.author-info small {
  color: #6c757d;
  font-size: 0.8rem;
}

.best-answer-badge {
  background: #ffc107;
  color: #212529;
  padding: 0.25rem 0.75rem;
  border-radius: 3px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8rem;
}

.answer-content {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #495057;
  margin-bottom: 1rem;
}

.answer-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.answer-actions {
  display: flex;
  gap: 0.75rem;
}

.action-link {
  color: #6c757d;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: all 0.2s ease;
  font-size: 0.85rem;
}

.action-link:hover {
  background: #f8f9fa;
  color: #495057;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 3rem 2rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.empty-icon {
  font-size: 3rem;
  color: #adb5bd;
  margin-bottom: 1rem;
}

.empty-state h6 {
  color: #495057;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.empty-state p {
  color: #6c757d;
  margin-bottom: 1.5rem;
}

/* 侧边栏 */
.sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
.sidebar-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #e9ecef;
  overflow: hidden;
  transition: all 0.3s ease;
}

.sidebar-card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.sidebar-header {
  background: #f8f9fa;
  padding: 1rem;
  border-bottom: 1px solid #e9ecef;
}

.sidebar-header h6 {
  margin: 0;
  font-weight: 600;
  color: #495057;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
}

.sidebar-content { padding: 1rem; }

.related-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid #e9ecef;
}

.related-item:last-child { border-bottom: none; }

.related-link {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: all 0.2s ease;
}

.related-link:hover { color: #007bff; }

.related-title {
  font-size: 0.9rem;
  font-weight: 500;
  color: #495057;
  margin-bottom: 0.25rem;
  line-height: 1.4;
}

.related-meta { display: flex; align-items: center; gap: 0.75rem; }
.related-answers { font-size: 0.8rem; color: #6c757d; }

/* 问题创建页面样式 */
/* 草稿列表样式 */
.draft-list {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  padding: 10px;
  background: #f8f9fa;
}

.draft-item {
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.draft-item:hover {
  border-color: #007bff;
  box-shadow: 0 2px 4px rgba(0,123,255,0.1);
}

.draft-item.current {
  border-color: #28a745;
  background: #f8fff9;
}

.draft-title {
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.draft-meta {
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
}

.draft-meta span {
  margin-right: 10px;
}

.draft-actions {
  display: flex;
  gap: 5px;
}

.draft-actions button {
  font-size: 11px;
  padding: 2px 6px;
}

.draft-loading, .draft-empty {
  text-align: center;
  color: #666;
  padding: 20px;
}

.delete-btn {
  background: #dc3545;
  border-color: #dc3545;
  color: white;
}

.delete-btn:hover {
  background: #c82333;
  border-color: #bd2130;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .content-section { padding: 1.5rem; }
  .answer-item { padding: 1.25rem; }
  .answer-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .answer-footer { flex-direction: column; gap: 0.75rem; align-items: flex-start; }
}

.cover-upload-container {
  position: relative;
}

.cover-preview {
  position: relative;
  display: inline-block;
  margin-bottom: 10px;
}

.cover-upload-area {
  border: 2px dashed #ddd;
  border-radius: 8px;
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #fafafa;
}

.cover-upload-area:hover {
  border-color: #007bff;
  background: #f0f8ff;
}

.cover-upload-area.dragover {
  border-color: #007bff;
  background: #e3f2fd;
}

.upload-placeholder {
  color: #666;
}

.upload-placeholder i {
  margin-bottom: 10px;
}

    /* 右侧sidebar标签样式 */
    .article-tags-sidebar {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        max-height: none;
        overflow: visible;
    }

    .article-tag-sidebar {
        background: #f8f9fa;
        color: #6c757d;
        border: none;
        transition: all 0.2s ease;
        text-decoration: none;
        font-size: 0.65rem;
        padding: 0.25rem 0.5rem;
        border-radius: 12px;
        display: inline-block;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        line-height: 1.3;
        font-weight: 400;
        box-shadow: none;
    }

    .article-tag-sidebar:hover {
        background: #e9ecef;
        color: #495057;
        text-decoration: none;
        transform: none;
        box-shadow: none;
    }

    .article-tag-sidebar:focus {
        color: #495057;
        text-decoration: none;
        box-shadow: 0 0 0 2px rgba(108, 117, 125, 0.2);
        outline: none;
    }

    .article-tag-sidebar:focus:hover {
        color: #495057;
    }

    .no-tags-sidebar {
        color: #adb5bd;
        font-style: normal;
        text-align: center;
        font-size: 0.65rem;
        padding: 0.5rem;
        background: transparent;
        border-radius: 0;
        border: none;
        width: 100%;
    }

    /* 右侧sidebar标题样式 */
    .sticky-sidebar h6 {
        font-size: 0.8rem;
        font-weight: 600;
        margin-bottom: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        color: #6c757d;
        border-bottom: 2px solid #e9ecef;
        padding-bottom: 0.5rem;
        position: relative;
    }

    .sticky-sidebar h6::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 30px;
        height: 2px;
        background: linear-gradient(90deg, #6c757d, #495057);
        border-radius: 1px;
    }

    .paid-content-body {
        padding: 12px 0px;
        background: white;
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .create-doc-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
  }

  .main-content {
      background: #fff;
      border-radius: 8px;
      padding: 30px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }

  .sidebar {
      background: #fff;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      height: fit-content;
      position: sticky;
      top: 20px;
      margin-left: 0;
  }

  @media (max-width: 991.98px) {
      .sidebar {
          position: static;
          margin-top: 20px;
          margin-left: 0;
      }

      .main-content {
      margin-bottom: 20px;
      }
  }

  .upload-area {
      background: #ffffff;
      border: none;
      border-radius: 12px;
      padding: 80px 40px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      margin-bottom: 30px;
  }

  .upload-area::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, transparent 30%, rgba(13, 110, 253, 0.05) 50%, transparent 70%);
      transform: translateX(-100%);
      transition: transform 0.6s ease;
  }

  .upload-area:hover {
      background: #f8f9ff;
      transform: translateY(-3px);
      box-shadow: 0 8px 30px rgba(13, 110, 253, 0.15);
  }

  .upload-area:hover::before {
      transform: translateX(100%);
  }

  .upload-area.dragover {
      background: #e8f2ff;
      transform: scale(1.02);
      box-shadow: 0 12px 40px rgba(13, 110, 253, 0.25);
  }

  .upload-area.dragover::before {
      transform: translateX(100%);
  }

  .upload-area i {
      color: #0d6efd;
      margin-bottom: 20px;
      display: block;
      transition: all 0.3s ease;
      font-size: 3rem;
  }

  .upload-area:hover i {
      transform: scale(1.1);
      color: #0b5ed7;
  }

  .upload-area h4 {
      color: #1f2937;
      font-weight: 600;
      margin-bottom: 12px;
      font-size: 1.5rem;
      transition: all 0.3s ease;
  }

  .upload-area:hover h4 {
      color: #0d6efd;
  }

  .upload-area p {
      color: #6b7280;
      margin-bottom: 8px;
      font-size: 0.95rem;
      transition: all 0.3s ease;
  }

  .upload-area:hover p {
      color: #4b5563;
  }

  .upload-area .text-info {
      color: #0d6efd !important;
      font-weight: 500;
      font-size: 0.9rem;
  }

  .upload-area .text-muted {
      color: #6c757d !important;
  }

  .file-list {
      background: #fff;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
  }

  .file-stats {
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      border-radius: 12px;
      padding: 20px;
      border: 1px solid #dee2e6;
  }

  .stats-container {
      display: flex;
      justify-content: space-around;
      align-items: center;
      gap: 20px;
  }

  .stat-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      min-width: 80px;
  }

  .stat-item i {
      font-size: 1.5rem;
      margin-bottom: 8px;
      display: block;
  }

  .stat-label {
      font-size: 0.85rem;
      color: #6c757d;
      margin-bottom: 4px;
      font-weight: 500;
  }

  .stat-value {
      font-size: 1.8rem;
      font-weight: 700;
      color: #212529;
      line-height: 1;
      margin-bottom: 2px;
  }

  .stat-unit {
      font-size: 0.75rem;
      color: #6c757d;
      font-weight: 500;
  }

  .stat-item .text-primary {
      color: #0d6efd !important;
  }

  .stat-item .text-success {
      color: #198754 !important;
  }

  .stat-item .text-danger {
      color: #dc3545 !important;
  }

  .file-item {
      border: 1px solid #e9ecef;
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 20px;
      background: #fff;
      display: grid;
      grid-template-columns: 9fr 3fr;
      gap: 25px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;
  }

  .file-item:hover {
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
      transform: translateY(-2px);
  }

  .file-item.valid {
      border-color: #28a745;
      background: #f8fff9;
  }

  .file-item.invalid {
      border-color: #dc3545;
      background: #fff8f8;
  }

  .file-item.editing {
      border-color: #007bff;
      background: #f0f8ff;
  }

  .file-content-form {
      margin-top: 15px;
      padding: 20px;
      background: #fff;
      border-radius: 8px;
      border: 1px solid #e9ecef;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  .file-content-section {
      grid-column: 1;
      padding-right: 10px;
  }

  .file-settings {
      grid-column: 2;
      padding: 20px;
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      border-radius: 8px;
      border: 1px solid #dee2e6;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }

  .file-settings h6 {
      color: #495057;
      font-weight: 600;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 2px solid #dee2e6;
  }

  .file-progress {
      grid-column: 1 / -1;
      margin-bottom: 15px;
      padding: 10px;
      background: #e3f2fd;
      border-radius: 4px;
      border-left: 4px solid #2196f3;
  }

  .file-progress.hidden {
      display: none;
  }

  .category-option {
      padding: 5px 10px;
  }

  .category-option.level-1 {
      font-weight: bold;
      color: #333;
  }

  .category-option.level-2 {
      padding-left: 20px;
      color: #666;
  }

  .category-option.level-3 {
      padding-left: 40px;
      color: #999;
  }

  .settings-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px;
      margin-bottom: 10px;
  }

  .settings-row.full {
      grid-template-columns: 1fr;
  }

  .settings-row.two-thirds {
      grid-template-columns: 2fr 1fr;
  }

  .settings-row.half {
      grid-template-columns: 1fr 1fr;
  }

  .settings-row.third {
      grid-template-columns: 1fr 1fr 1fr;
  }

  .form-group {
      margin-bottom: 15px;
  }

  .form-group label {
      font-weight: bold;
      margin-bottom: 5px;
      display: block;
  }

  .form-group label.required::after {
      content: " *";
      color: #dc3545;
      font-weight: bold;
  }

  .form-control.is-invalid {
      border-color: #dc3545;
      box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
  }

  .form-control.is-valid {
      border-color: #28a745;
      box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
  }

  .invalid-feedback {
      display: block;
      width: 100%;
      margin-top: 0.25rem;
      font-size: 0.875em;
      color: #dc3545;
  }

  .form-control {
      width: 100%;
      padding: 10px 14px;
      border: 1px solid #ced4da;
      border-radius: 6px;
      font-size: 14px;
      transition: all 0.15s ease-in-out;
  }

  .form-control:focus {
      outline: none;
      border-color: #007bff;
      box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
  }

  .btn-sm {
      padding: 8px 16px;
      font-size: 13px;
      border-radius: 6px;
      font-weight: 500;
      transition: all 0.15s ease-in-out;
  }

  .btn-sm:hover {
      transform: translateY(-1px);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .file-actions {
      display: flex;
      gap: 10px;
      margin-top: 10px;
  }

  .file-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 1px solid #f1f3f4;
  }

  .file-name {
      font-weight: 600;
      color: #2c3e50;
      font-size: 16px;
  }

  .file-status {
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: bold;
  }

  .status-valid {
      background: #d4edda;
      color: #155724;
  }

  .status-invalid {
      background: #f8d7da;
      color: #721c24;
  }

  .status-checking {
      background: #fff3cd;
      color: #856404;
  }

  .file-details {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px;
      font-size: 14px;
      color: #6c757d;
      margin-bottom: 15px;
  }

  .file-details div {
      padding: 8px 12px;
      background: #f8f9fa;
      border-radius: 6px;
      border-left: 3px solid #007bff;
  }

  .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px;
      margin-bottom: 15px;
  }

  .error-message {
      color: #dc3545;
      font-size: 12px;
      margin-top: 5px;
  }

  .batch-actions {
      position: sticky;
      bottom: 0;
      background: #fff;
      padding: 20px;
      border-top: 1px solid #eee;
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
      z-index: 9999;
  }

  .progress-container {
      margin-bottom: 20px;
  }

  .progress-item {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
  }

  .progress-item .file-name {
      flex: 1;
      margin-right: 10px;
  }

  .progress-item .progress {
      flex: 2;
      margin-right: 10px;
  }

  .progress-item .status {
      min-width: 80px;
      text-align: right;
  }

  /* 响应式设计 - 小屏幕适应 */
  @media (max-width: 768px) {
      .batch-upload-container {
          padding: 10px;
      }

      .file-item {
          grid-template-columns: 1fr;
          gap: 15px;
      padding: 15px;
      }

      .file-content-section {
          padding-right: 0;
      }

      .file-settings {
          grid-column: 1;
          margin-top: 15px;
      }

      .file-details {
          grid-template-columns: 1fr;
          gap: 10px;
      }

      .file-header {
          flex-direction: column;
          align-items: flex-start;
          gap: 10px;
      }

      .file-actions {
          flex-direction: column;
          gap: 8px;
      }

      .btn-sm {
          width: 100%;
          text-align: center;
      }

      .batch-actions {
          padding: 15px 10px;
      }

      .batch-actions .row {
          flex-direction: column;
          gap: 15px;
      }

      .batch-actions .col-md-6 {
          width: 100%;
      }

      .batch-actions .text-right {
          text-align: left !important;
      }

      .upload-area {
          padding: 20px 15px;
      }

      .upload-area h4 {
          font-size: 18px;
      }

      .upload-area p {
      font-size: 14px;
  }

      .file-content-form {
          padding: 15px;
      }

      .file-settings {
          padding: 15px;
      }

      .form-group {
          margin-bottom: 12px;
      }

      .form-control {
          padding: 8px 12px;
          font-size: 16px;
          /* 防止iOS缩放 */
      }

      .file-progress {
          padding: 8px;
      }

      .progress-item {
          flex-direction: column;
          gap: 8px;
      }

      .progress-item .file-name {
          margin-right: 0;
          margin-bottom: 5px;
      }

      .progress-item .progress {
          margin-right: 0;
      }

      .progress-item .status {
          text-align: left;
          min-width: auto;
      }

      .stats-container {
          flex-direction: column;
          gap: 15px;
      }

      .stat-item {
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          min-width: auto;
          width: 100%;
          padding: 10px 15px;
          background: rgba(255, 255, 255, 0.7);
          border-radius: 8px;
      }

      .stat-item i {
          margin-bottom: 0;
          margin-right: 10px;
      }

      .stat-value {
          font-size: 1.4rem;
      }
  }

/* 卡片背景渐变色样式 - 蓝绿渐变 */
.card.card-overlay-bottom {
  overflow: hidden;
}

.card.card-overlay-bottom:before {
  content: "";
  position: absolute;
  height: 50%;
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 150, 136, 0.8)));
  background-image: linear-gradient(180deg, transparent, rgba(0, 150, 136, 0.8));
  z-index: 1;
}

.card .card-img-overlay {
  z-index: 2;
}

.card-bg-scale {
  z-index: 99;
}

.card-bg-scale::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  -webkit-transition: all 1s !important;
  transition: all 1s !important;
  z-index: -2;
}

.card-bg-scale:hover::after {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  -webkit-transition: all 1s !important;
  transition: all 1s !important;
}

/* 政策公告样式 */
.policy-announcement-card {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 1px solid #dee2e6;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  overflow: hidden;
  height: 560px;
  display: flex;
  flex-direction: column;
}

.policy-announcement-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.policy-header {
  background: linear-gradient(135deg, #4f9ef8 0%, #2163e8 100%);
  color: white;
  padding: 0.5rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
  min-height: 80px;
}

.policy-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  position: relative;
  z-index: 2;
  line-height: 1.4;
  text-align: center;
  color: white;
}

.policy-subtitle {
  font-size: 0.85rem;
  opacity: 0.9;
  margin-top: 0.5rem;
  position: relative;
  z-index: 2;
  text-align: center;
}

.policy-content {
  padding: 0 0.8rem;
  background: linear-gradient(58deg, #e5feffa8, #b2d6ff42);
  flex-direction: column;
  justify-content: center;
}

.policy-item {
  display: flex;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f1f3f4;
  transition: all 0.2s ease;
}

.policy-item:last-child {
  border-bottom: none;
}

.policy-item:hover {
  background: #f8f9fa;
  margin: 0 -1.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  border-radius: 8px;
}

.policy-bullet {
  width: 6px;
  height: 6px;
  border: 2px solid #FF6142;
  /* background: linear-gradient(135deg, #ff6b6b, #ee5a24); */
  border-radius: 50%;
  margin-right: 0.5rem;
  flex-shrink: 0;
}

.policy-item-text {
  flex: 1;
  font-size: 0.9rem;
  color: #495057;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 中间突破显示的policy-header样式 */
.policy-content .policy-header {
  margin: 0.4rem -1.2rem;
  padding: 0.8rem 1rem;
  background: linear-gradient(135deg, #399db6 0%, #007bff 100%) !important;
  min-height: 66px;
}

.policy-content .policy-header .policy-title {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}

.policy-item-date {
  color: #6c757d;
  font-size: 0.8rem;
  font-weight: 500;
  margin-left: 1rem;
  flex-shrink: 0;
}

.policy-item-link {
  color: inherit;
}

.policy-item-link:hover {
  color: #667eea;
  text-decoration: none;
}

.policy-item-link-header {
  color: inherit;
  text-decoration: none;
}

.policy-item-link-header:hover {
  color: #fff9d8;
  text-decoration: none;
}

/* 主英雄区域固定高度 - 确保左中右完全对齐 */
.card-grid .row {
  align-items: stretch;
}

.card-grid .row .col-lg-4,
.card-grid .row .col-lg-6,
.card-grid .row .col-lg-2 {
  display: flex;
  flex-direction: column;
}

/* 响应式设计 - 小屏幕自适应高度 */
@media (max-width: 991.98px) {
  .card-grid .row .col-lg-4,
  .card-grid .row .col-lg-6,
  .card-grid .row .col-lg-2 {
    height: auto;
  }
  
  /* 992px断点特殊处理 - 防止中间区域溢出 */
  .policy-announcement-card {
    height: auto !important;
  }
  
  .policy-content {
    max-height: 280px;
  }
}

@media (max-width: 767.98px) {
  .card-grid .row .col-lg-4,
  .card-grid .row .col-lg-6,
  .card-grid .row .col-lg-2 {
    height: auto;
  }
}

.card-grid .row .col-lg-4 .card,
.card-grid .row .col-lg-6 .policy-announcement-card {
  height: 100%;
  flex: 1;
}

.card-grid .row .col-lg-2 .social-widget-area {
  flex: 0 0 auto;
  margin-bottom: 1rem;
}

.card-grid .row .col-lg-2 > div:last-child {
  flex: 1;
  overflow-y: auto;
}

/* 小卡片样式 */
.policy-announcement-card.small-card {
  height: 300px;
}

.policy-announcement-card.small-card .policy-header {
  min-height: 80px;
  padding: 1rem;
}

.policy-announcement-card.small-card .policy-content {
  padding: 1rem;
}

  @media (max-width: 480px) {
      .batch-upload-container {
          padding: 5px;
      }

      .file-item {
          padding: 12px;
          margin-bottom: 15px;
      }

      .upload-area {
          padding: 15px 10px;
      }

      .upload-area h4 {
          font-size: 16px;
      }

      .upload-area i {
          font-size: 2.5rem !important;
      }

      .file-content-form {
          padding: 12px;
      }

      .file-settings {
          padding: 12px;
      }

      .file-settings h6 {
          font-size: 14px;
          margin-bottom: 15px;
      }

      .form-group label {
          font-size: 14px;
      }

      .btn-sm {
          padding: 10px 12px;
          font-size: 14px;
      }

      .file-name {
          font-size: 14px;
      }

      .file-details div {
          padding: 6px 10px;
          font-size: 13px;
      }
  }

/* 站点栏目样式 */
.site-categories {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
}

.site-categories h6 {
  color: #495057;
  font-weight: 600;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  border-bottom: 2px solid #dee2e6;
  padding-bottom: 0.5rem;
}

.site-categories .nav-link {
  color: #6c757d;
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
  transition: all 0.2s ease;
  border-radius: 4px;
}

.site-categories .nav-link:hover {
  color: #007bff;
  background-color: rgba(0, 123, 255, 0.1);
  text-decoration: none;
}

.site-categories .nav-item {
  margin-bottom: 0.25rem;
}

/* 站点栏目卡片悬停效果 */
.site-category-card {
  transition: all 0.3s ease;
  cursor: pointer;
}

.site-category-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.site-category-card a {
  text-decoration: none;
  color: inherit;
}

.site-category-card a:hover {
  text-decoration: none;
  color: inherit;
}

/* 文章标签样式美化 */
.article-tags-main {
  margin: 20px 0;
  padding: 15px 15px;
  border-top: 1px solid #e9ecef;
  border-bottom: 1px solid #e9ecef;
  text-align: center;
}

.article-tags-main h6 {
  font-weight: 600;
  color: #6c757d;
  margin-bottom: 12px;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.article-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.article-tag-link {
  display: inline-block;
  padding: 6px 12px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  color: #495057;
  text-decoration: none;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid #dee2e6;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.article-tag-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.5s;
}

.article-tag-link:hover {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  color: white;
  border-color: #007bff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
  text-decoration: none;
}

.article-tag-link:hover::before {
  left: 100%;
}

/* 不同标签等级的颜色和大小 */
.article-tag-link.tags1 {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border-color: #2196f3;
  color: #0d47a1;
  font-size: 0.65rem;
  padding: 4px 8px;
  font-weight: 400;
}

.article-tag-link.tags2 {
  background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
  border-color: #9c27b0;
  color: #4a148c;
  font-size: 0.7rem;
  padding: 5px 9px;
  font-weight: 400;
}

.article-tag-link.tags3 {
  background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
  border-color: #4caf50;
  color: #1b5e20;
  font-size: 0.75rem;
  padding: 5px 10px;
  font-weight: 500;
}

.article-tag-link.tags4 {
  background: linear-gradient(135deg, #fff3e0 0%, #ffcc80 100%);
  border-color: #ff9800;
  color: #e65100;
  font-size: 0.8rem;
  padding: 6px 12px;
  font-weight: 500;
}

.article-tag-link.tags5 {
  background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%);
  border-color: #e91e63;
  color: #880e4f;
  font-size: 0.85rem;
  padding: 6px 13px;
  font-weight: 600;
}

.article-tag-link.tags6 {
  background: linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 100%);
  border-color: #009688;
  color: #004d40;
  font-size: 0.9rem;
  padding: 7px 14px;
  font-weight: 600;
}

.article-tag-link.tags7 {
  background: linear-gradient(135deg, #f1f8e9 0%, #dcedc8 100%);
  border-color: #8bc34a;
  color: #33691e;
  font-size: 0.95rem;
  padding: 7px 15px;
  font-weight: 600;
}

.article-tag-link.tags8 {
  background: linear-gradient(135deg, #e8eaf6 0%, #c5cae9 100%);
  border-color: #3f51b5;
  color: #1a237e;
  font-size: 1rem;
  padding: 8px 16px;
  font-weight: 700;
}

.article-tag-link.tags9 {
  background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
  border-color: #ffc107;
  color: #ff6f00;
  font-size: 1.05rem;
  padding: 8px 17px;
  font-weight: 700;
  box-shadow: 0 2px 4px rgba(255, 193, 7, 0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .article-tags-main {
    margin: 15px 0;
    padding: 12px 0;
  }
  
  .article-tags-list {
    gap: 6px;
  }
  
  .article-tag-link {
    padding: 4px 10px;
    font-size: 0.75rem;
  }
  
  /* 移动端标签大小调整 */
  .article-tag-link.tags1 { font-size: 0.6rem; padding: 3px 6px; }
  .article-tag-link.tags2 { font-size: 0.65rem; padding: 4px 7px; }
  .article-tag-link.tags3 { font-size: 0.7rem; padding: 4px 8px; }
  .article-tag-link.tags4 { font-size: 0.75rem; padding: 5px 9px; }
  .article-tag-link.tags5 { font-size: 0.8rem; padding: 5px 10px; }
  .article-tag-link.tags6 { font-size: 0.85rem; padding: 6px 11px; }
  .article-tag-link.tags7 { font-size: 0.9rem; padding: 6px 12px; }
  .article-tag-link.tags8 { font-size: 0.95rem; padding: 7px 13px; }
  .article-tag-link.tags9 { font-size: 1rem; padding: 7px 14px; }
  
  /* 分类按钮手机端紧凑样式 */
  .category-btn-mobile {
    padding: 0.25rem 0.25rem !important;
    font-size: 0.75rem !important;
    border-radius: 0rem !important;
    margin: 0rem !important;
  }
  
  /* 一级分类按钮手机端样式 */
  .first-level-btn {
    padding: 0.5rem 0.8rem !important;
  }
  
  .first-level-btn .first-level-icon {
    display: none !important;
  }
  .first-level-section, .second-level-section, .third-level-section, .breadcrumb-area {
    padding: 0.15rem !important;
  }
  /* 一级分类间距手机端样式 */
  .first-level-section .row {
    --bs-gutter-x: 0rem !important;
    --bs-gutter-y: 0.5rem !important;
  }
  
  .second-level-section .row {
    gap: 0rem !important;
  }
  
  .third-level-section .d-flex {
    gap: 0rem !important;
  }
  
  .third-category-item {
    margin: 0rem !important;
  }
}

@media (max-width: 576px) {
  .article-tags-main h6 {
    font-size: 0.8rem;
    margin-bottom: 3px;
  }
  
  .article-tag-link {
    padding: 3px 8px;
    font-size: 0.7rem;
  }
  
  /* 小屏幕标签大小调整 */
  .article-tag-link.tags1 { font-size: 0.55rem; padding: 2px 5px; }
  .article-tag-link.tags2 { font-size: 0.6rem; padding: 3px 6px; }
  .article-tag-link.tags3 { font-size: 0.65rem; padding: 3px 7px; }
  .article-tag-link.tags4 { font-size: 0.7rem; padding: 4px 8px; }
  .article-tag-link.tags5 { font-size: 0.75rem; padding: 4px 9px; }
  .article-tag-link.tags6 { font-size: 0.8rem; padding: 5px 10px; }
  .article-tag-link.tags7 { font-size: 0.85rem; padding: 5px 11px; }
  .article-tag-link.tags8 { font-size: 0.9rem; padding: 6px 12px; }
  .article-tag-link.tags9 { font-size: 0.95rem; padding: 6px 13px; }
  
  /* 超小屏幕分类按钮更紧凑样式 */
  .category-btn-mobile {
    padding: 0.26rem 0.25rem !important;
    font-size: 0.7rem !important;
    border-radius: 0rem !important;
    margin: 0rem !important;
  }
  
  /* 一级分类按钮超小屏幕样式 */
  .first-level-btn {
    padding: 0.5rem 0.5rem !important;
  }
  
  .first-level-btn .first-level-icon {
    display: none !important;
  }
  
  /* 一级分类间距超小屏幕样式 */
  .first-level-section .row {
    --bs-gutter-x: 0rem !important;
    --bs-gutter-y: 0.5rem !important;
  }
  
  .second-level-section .row {
    gap: 0rem !important;
  }
  
  .third-level-section .d-flex {
    gap: 0rem !important;
  }
  
  .third-category-item {
    margin: 0rem !important;
  }
}
   /* 小屏幕优化样式 */
   @media (max-width: 768px) {

    .category-btn-mobile {
        font-size: 0.75rem;
        padding: 0.3rem 0.6rem;
        white-space: nowrap;
    }
    
    /* Tab导航优化 */
    .nav-pills {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .nav-pills .nav-link {
        text-align: center;
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
        border-radius: 0.375rem;
    }
    
    .nav-pills .nav-link i {
        font-size: 0.8rem;
    }
    
    /* 用户信息卡片优化 */
    .user-info-card {
        margin-bottom: 1rem;
    }
    
    .user-info-card .card-body {
        padding: 1rem;
    }
    
    .user-info-card .row {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .user-info-card .col-md-8,
    .user-info-card .col-md-4 {
        width: 100%;
        max-width: 100%;
    }
    
    /* 表单优化 */
    .form-label {
        font-size: 0.85rem;
        font-weight: 500;
    }
    
    .form-control,
    .form-select {
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
    }
    
    .btn {
        font-size: 0.85rem;
        padding: 0.5rem 1rem;
    }
    
    /* 卡片内边距优化 */
    .card-body {
        padding: 1rem;
    }
    
    .card-header {
        padding: 0.75rem 1rem;
    }
    
    /* 统计卡片优化 */
    .stats-card {
        margin-bottom: 0.5rem;
    }
    
    .stats-card .card-body {
        padding: 0.75rem;
        text-align: center;
    }
    
    .stats-card h4 {
        font-size: 1.25rem;
    }
    
    .stats-card h6 {
        font-size: 0.8rem;
    }
}

/* 超小屏幕优化 */
@media (max-width: 576px) {
    .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    .first-level-btn {
        font-size: 0.75rem;
        padding: 0.3rem 0.6rem;
    }
    
    .category-btn-mobile {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }
    
    .nav-pills .nav-link {
        font-size: 0.8rem;
        padding: 0.4rem 0.6rem;
    }
    
    .form-control,
    .form-select {
        font-size: 0.8rem;
        padding: 0.4rem 0.6rem;
    }
    
    .btn {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
    
    .card-body {
        padding: 0.75rem;
    }
    
    .card-header {
        padding: 0.5rem 0.75rem;
    }
}

/* ==================== 标签字母导航响应式样式 ==================== */
/* 通用字母导航优化 - 覆盖可能冲突的样式 */
.letter-nav-btn {
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important; /* 覆盖可能影响宽度的样式 */
    max-width: none !important;
    font-size: 1rem !important;
}

.letter-nav-btn .badge {
    font-size: 0.7rem !important;
}

.letter-nav-btn:hover {
    background-color: var(--bs-success) !important;
    color: white !important;
}

/* 小屏幕优化 - 字母导航栏 */
@media (max-width: 768px) {
    .letter-nav-btn {
        font-size: 1.2rem !important;
        padding: 0.25rem 0.5rem !important;
        min-width: 2rem !important;
        height: 2rem !important;
        width: auto !important; /* 确保宽度不受其他样式影响 */
    }
    
    .letter-nav-btn .badge {
        font-size: 0.6rem !important;
        padding: 0.15rem 0.3rem !important;
    }
    
    .letter-nav-btn .ms-1 {
        margin-left: 0.1rem !important;
    }
    
    /* 字母导航容器优化 - 确保一行显示多个并居中 */
    .d-flex.flex-wrap.justify-content-center.gap-2 {
        gap: 0.25rem !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        align-items: center !important;
    }
    
    /* 字母导航卡片内边距优化 */
    .card-body.py-3 {
        padding: 0.75rem 0.5rem !important;
    }
}

/* 超小屏幕优化 */
@media (max-width: 576px) {
    .letter-nav-btn {
        font-size: 1.1rem !important;
        padding: 0.2rem 0.4rem !important;
        min-width: 1.8rem !important;
        height: 1.8rem !important;
        width: auto !important; /* 确保宽度不受其他样式影响 */
    }
    
    .letter-nav-btn .badge {
        font-size: 0.55rem !important;
        padding: 0.1rem 0.25rem !important;
    }
    
    /* 进一步减少间距 - 确保一行显示更多字母并居中 */
    .d-flex.flex-wrap.justify-content-center.gap-2 {
        gap: 0.15rem !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        align-items: center !important;
    }
    
    .card-body.py-3 {
        padding: 0.5rem 0.25rem !important;
    }
}

.dropdown-menu-width {
   min-width: 10rem !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.9);
    }
}


.download-btn {
  background: linear-gradient(45deg, #007bff, #0056b3);
  border: none;
  color: white;
  padding: 8px 15px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: all 0.6s ease;
}

.download-btn:hover {
  background: linear-gradient(45deg, #0056b3, #004085);
  color: white;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,123,255,0.3);
}

/* 下载按钮样式 */
.download-btn {
    background: rgba(13, 110, 253, 0.3) !important;
    border: none !important;
    border-radius: 5px !important;
}

/* 下载图标大小设置 */
.download-btn i {
    font-size: 0.7rem; /* 可以调整这个值来改变图标大小 */
}

/* 确保卡片悬停时下载按钮显示 */
.library-card {
    transition: all 0.3s ease;
}

.library-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}

/* 文档卡片悬停下载按钮样式 */
.library-card:hover .download-overlay {
  display: block !important;
  animation: fadeIn 0.3s ease-in-out;
}

/* 下载按钮样式 */
.download-overlay {
  display: none !important;
  z-index: 30;
  position: relative;
}

.download-overlay a {
  pointer-events: auto;
  transition: all 0.3s ease;
  position: relative;
  z-index: 31;
}

/* 下载图标动画 */
.download-overlay a i {
  transition: transform 0.3s ease;
}

/* 当鼠标直接悬停在按钮上时，进一步放大 */
.library-card:hover .download-overlay a:hover {
transform: scale(1.3) translateY(-3px);
box-shadow: 0 8px 20px rgba(13, 110, 253, 0.4);
background: rgba(13, 110, 253, 0.9) !important;
}

/* 悬停时图标旋转动画 */
.library-card:hover .download-overlay a:hover i {
transform: rotate(360deg) scale(1.3);
}

/* 文档卡片标题悬停效果 - 模拟btn-link的悬停效果 */
.library-card:hover .btn-link {
  background-size: 100% 6% !important;
  background-repeat: no-repeat !important;
  background-position: 0 100% !important;
  text-decoration: none !important;
}

/* 问题卡片布局优化 - 使用Flexbox确保对齐 */
.question-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.question-card .card-body {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
}

.question-title {
  flex-shrink: 0 !important;
  margin-bottom: 0.5rem !important;
  line-height: 1.4 !important;
}

.question-content {
  flex-grow: 1 !important;
  margin-bottom: 0.5rem !important;
}

.question-meta {
  margin-top: auto !important;
  flex-shrink: 0 !important;
}

/* 防止按钮晃动 */
.download-overlay a {
  will-change: transform;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* 移动端完全隐藏下载按钮 */
@media (max-width: 767px) {
    .desktop-only {
        display: none !important;
    }
}

/* 桌面端悬停显示 */
@media (min-width: 768px) {
    .library-card:hover .desktop-only {
        display: block !important;
    }
}
/* 置顶/推荐标识 - 右上角圆形图标 */
.card-featured {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 15px;
  height: 15px;
  background: rgba(255, 255, 255, 0.55);
  color: #dc3545;
  border-radius: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.3s ease;
}

/* 当鼠标移到卡片上时，图标自动变色放大 */
.library-card:hover .card-featured {
  background: #dc3545;
  color: white;
  transform: scale(1.05);
}

.card-featured i {
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0px 12px 0px;
}

@media (max-width: 768px) {
  .card-featured {
    width: 26px;
    height: 26px;
    top: 6px;
    right: 6px;
  }
  
  .card-featured i {
    font-size: 11px;
  }
}