@keyframes fadeInUp {
   from {
    opacity: 0;
    transform: translateY(30px);
   }

   to {
    opacity: 1;
    transform: translateY(0);
   }
  }

  @keyframes fadeIn {
   from {
    opacity: 0;
   }

   to {
    opacity: 1;
   }
  }

  @keyframes slideInLeft {
   from {
    opacity: 0;
    transform: translateX(-30px);
   }

   to {
    opacity: 1;
    transform: translateX(0);
   }
  }

  @keyframes slideInRight {
   from {
    opacity: 0;
    transform: translateX(30px);
   }

   to {
    opacity: 1;
    transform: translateX(0);
   }
  }

  @keyframes pulse {
   0% {
    transform: scale(1);
   }

   50% {
    transform: scale(1.05);
   }

   100% {
    transform: scale(1);
   }
  }

  @keyframes float {
   0% {
    transform: translateY(0px);
   }

   50% {
    transform: translateY(-10px);
   }

   100% {
    transform: translateY(0px);
   }
  }

  @keyframes slideInUp {
   from {
    opacity: 0;
    transform: translateY(50px);
   }

   to {
    opacity: 1;
    transform: translateY(0);
   }
  }

  @keyframes zoomIn {
   from {
    opacity: 0;
    transform: scale(0.9);
   }

   to {
    opacity: 1;
    transform: scale(1);
   }
  }

  @keyframes bounceIn {
   0% {
    opacity: 0;
    transform: scale(0.3);
   }

   50% {
    opacity: 1;
    transform: scale(1.05);
   }

   70% {
    transform: scale(0.9);
   }

   100% {
    opacity: 1;
    transform: scale(1);
   }
  }

  @keyframes lightSpeedIn {
   from {
    opacity: 0;
    transform: translateX(100%) skewX(-30deg);
   }

   60% {
    opacity: 1;
    transform: translateX(-20%) skewX(30deg);
   }

   80% {
    transform: translateX(10%) skewX(-15deg);
   }

   100% {
    opacity: 1;
    transform: translateX(0);
   }
  }

  /* 全局元素动画 */
  .header {
   animation: slideInDown 0.8s ease-out;
  }

  @keyframes slideInDown {
   from {
    opacity: 0;
    transform: translateY(-50px);
   }

   to {
    opacity: 1;
    transform: translateY(0);
   }
  }

  .footer {
   animation: fadeInUp 1s ease-out 1.5s both;
  }

  /* 详情页特有样式 */
  .article-header {
   background: #fff;
   border-radius: 12px;
   padding: 40px;
   margin-bottom: 30px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
   animation: fadeInUp 0.8s ease-out;
   transition: all 0.3s ease;
  }

  .article-header:hover {
   transform: translateY(-5px);
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }

  .article-title {
   font-size: 24px;
   font-weight: 700;
   color: #222;
   line-height: 1.3;
   margin-bottom: 15px;
   animation: slideInLeft 0.6s ease-out 0.2s both;
   position: relative;
  }

  .article-title::after {
   content: '';
   position: absolute;
   bottom: -10px;
   left: 0;
   width: 80px;
   height: 3px;
   background: linear-gradient(90deg, #c41e3a, transparent);
   border-radius: 1.5px;
   animation: growRight 0.8s ease-out 0.5s both;
  }

  @keyframes growRight {
   from {
    width: 0;
   }

   to {
    width: 80px;
   }
  }

  .article-meta {
   display: flex;
   align-items: center;
   gap: 30px;
   font-size: 14px;
   color: #999;
   margin-bottom: 30px;
   padding-bottom: 20px;
   border-bottom: 1px solid #f0f0f0;
   animation: fadeIn 0.8s ease-out 0.4s both;
  }

  .article-author {
   display: flex;
   align-items: center;
   gap: 10px;
   animation: bounceIn 0.6s ease-out 0.5s both;
  }

  .author-avatar {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: linear-gradient(135deg, #c41e3a 0%, #8b0000 100%);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-weight: 600;
   animation: pulse 2s ease-in-out infinite;
   box-shadow: 0 4px 12px rgba(196, 30, 58, 0.3);
  }

  .article-content {
   background: #fff;
   border-radius: 12px;
   padding: 40px;
   margin-bottom: 30px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
   font-size: 16px;
   line-height: 1.8;
   color: #333;
   animation: fadeInUp 0.8s ease-out 0.6s both;
   transition: all 0.3s ease;
  }

  .article-content:hover {
   transform: translateY(-3px);
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  }

  .article-content p {
   margin-bottom: 20px;
   animation: fadeIn 0.8s ease-out;
   transition: all 0.3s ease;
   position: relative;
  }

  .article-content p:hover {
   transform: translateX(8px);
   color: #222;
  }

  .article-content h2 {
   font-size: 24px;
   font-weight: 700;
   color: #222;
   margin: 30px 0 20px;
   animation: slideInLeft 0.6s ease-out;
   position: relative;
   padding-left: 20px;
  }

  .article-content h2::before {
   content: '';
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 4px;
   height: 20px;
   background: linear-gradient(180deg, #c41e3a, #8b0000);
   border-radius: 2px;
   animation: growDown 0.5s ease-out;
  }

  @keyframes growDown {
   from {
    height: 0;
   }

   to {
    height: 20px;
   }
  }

  .article-content h3 {
   font-size: 20px;
   font-weight: 600;
   color: #333;
   margin: 25px 0 15px;
   animation: slideInLeft 0.6s ease-out;
   position: relative;
   padding-left: 15px;
  }

  .article-content h3::before {
   content: '';
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 3px;
   height: 15px;
   background: linear-gradient(180deg, #c41e3a, #8b0000);
   border-radius: 1.5px;
   animation: growDown 0.5s ease-out;
  }

  .article-image {
   width: 100%;
   border-radius: 12px;
   overflow: hidden;
   margin: 30px 0;
   animation: zoomIn 1s ease-out;
   position: relative;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
   transition: all 0.5s ease;
  }

  .article-image:hover {
   transform: translateY(-8px) rotate(1deg);
   box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  }

  .article-image::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
   z-index: 1;
   pointer-events: none;
   transition: all 0.3s ease;
  }

  .article-image:hover::before {
   background: linear-gradient(45deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
  }

  .article-image img {
   width: 100%;
   height: auto;
   object-fit: cover;
   transition: transform 0.8s ease;
  }

  .article-image:hover img {
   transform: scale(1.05) rotate(1deg);
  }

  .article-image-caption {
   font-size: 14px;
   color: #999;
   text-align: center;
   margin-top: 10px;
   animation: fadeIn 0.8s ease-out;
   transition: all 0.3s ease;
  }

  .article-image:hover .article-image-caption {
   color: #666;
   transform: translateY(5px);
  }

  .related-news {
   background: #fff;
   border-radius: 12px;
   padding: 30px;
   margin-bottom: 30px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
   animation: fadeInUp 0.8s ease-out 0.8s both;
   transition: all 0.3s ease;
  }

  .related-news:hover {
   transform: translateY(-5px);
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }

  .related-news h3 {
   font-size: 20px;
   font-weight: 700;
   color: #222;
   margin-bottom: 20px;
   display: flex;
   align-items: center;
   gap: 10px;
   animation: slideInLeft 0.6s ease-out;
   position: relative;
  }

  .related-news h3::after {
   content: '';
   position: absolute;
   bottom: -5px;
   left: 0;
   width: 60px;
   height: 2px;
   background: #c41e3a;
   border-radius: 1px;
   animation: growRight 0.6s ease-out;
  }

  .related-news-list {
   display: flex;
   flex-direction: column;
   gap: 15px;
  }

  .related-news-item {
   display: flex;
   gap: 15px;
   padding: 15px 0;
   border-bottom: 1px solid #f0f0f0;
   transition: all 0.3s ease;
   animation: fadeInUp 0.6s ease-out;
   position: relative;
   overflow: hidden;
  }

  .related-news-item::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: 0;
   width: 0;
   height: 2px;
   background: #c41e3a;
   transition: width 0.3s ease;
  }

  .related-news-item:hover::after {
   width: 100%;
  }

  .related-news-item:hover {
   transform: translateX(10px) scale(1.02);
   background: rgba(245, 245, 245, 0.7);
   border-radius: 8px;
   padding-left: 15px;
  }

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

  .related-news-image {
   width: 100px;
   height: 70px;
   border-radius: 8px;
   overflow: hidden;
   flex-shrink: 0;
   transition: all 0.3s ease;
   position: relative;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .related-news-image::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.2);
   opacity: 0;
   transition: opacity 0.3s ease;
  }

  .related-news-item:hover .related-news-image::before {
   opacity: 1;
  }

  .related-news-item:hover .related-news-image {
   transform: scale(1.1) rotate(3deg);
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  }

  .related-news-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
  }

  .related-news-content {
   flex: 1;
  }

  .related-news-title {
   font-size: 15px;
   font-weight: 600;
   color: #333;
   line-height: 1.4;
   margin-bottom: 5px;
   transition: all 0.3s ease;
  }

  .related-news-item:hover .related-news-title {
   color: #c41e3a;
   transform: translateX(8px);
  }

  .related-news-meta {
   font-size: 13px;
   color: #999;
   transition: all 0.3s ease;
  }

  .related-news-item:hover .related-news-meta {
   color: #666;
   transform: translateX(8px);
  }

  .article-actions {
   background: #fff;
   border-radius: 12px;
   padding: 30px;
   margin-bottom: 30px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
   animation: fadeInUp 0.8s ease-out 1s both;
   transition: all 0.3s ease;
  }

  .article-actions:hover {
   transform: translateY(-5px);
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }

  .action-buttons {
   display: flex;
   gap: 20px;
   margin-bottom: 20px;
  }

  .action-btn {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 12px 20px;
   border: 1px solid #e0e0e0;
   border-radius: 25px;
   background: #fff;
   cursor: pointer;
   transition: all 0.3s ease;
   font-size: 14px;
   color: #666;
   position: relative;
   overflow: hidden;
   animation: slideInUp 0.6s ease-out;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  .action-btn:nth-child(1) {
   animation-delay: 0.1s;
  }

  .action-btn:nth-child(2) {
   animation-delay: 0.2s;
  }

  .action-btn:nth-child(3) {
   animation-delay: 0.3s;
  }

  .action-btn:nth-child(4) {
   animation-delay: 0.4s;
  }

  .action-btn::before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(196, 30, 58, 0.1), transparent);
   transition: left 0.5s ease;
  }

  .action-btn:hover::before {
   left: 100%;
  }

  .action-btn:hover {
   border-color: #c41e3a;
   color: #c41e3a;
   transform: translateY(-4px) scale(1.05);
   box-shadow: 0 6px 16px rgba(196, 30, 58, 0.3);
  }

  .action-btn:active {
   transform: translateY(0) scale(0.98);
  }

  .action-btn.active {
   background: linear-gradient(135deg, #c41e3a 0%, #8b0000 100%);
   border-color: #c41e3a;
   color: #fff;
   animation: pulse 1s ease-in-out;
  }

  .comment-section {
   background: #fff;
   border-radius: 12px;
   padding: 30px;
   margin-bottom: 30px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
   animation: fadeInUp 0.8s ease-out 1.2s both;
   transition: all 0.3s ease;
  }

  .comment-section:hover {
   transform: translateY(-5px);
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }

  .comment-section h3 {
   font-size: 20px;
   font-weight: 700;
   color: #222;
   margin-bottom: 20px;
   animation: slideInLeft 0.6s ease-out;
   position: relative;
  }

  .comment-section h3::after {
   content: '';
   position: absolute;
   bottom: -5px;
   left: 0;
   width: 60px;
   height: 2px;
   background: #c41e3a;
   border-radius: 1px;
   animation: growRight 0.6s ease-out;
  }

  .comment-form {
   margin-bottom: 30px;
   animation: fadeIn 0.8s ease-out;
  }

  .comment-input {
   width: 100%;
   min-height: 120px;
   padding: 15px;
   border: 1px solid #e0e0e0;
   border-radius: 8px;
   resize: vertical;
   font-size: 14px;
   line-height: 1.5;
   margin-bottom: 15px;
   transition: all 0.3s ease;
   position: relative;
   z-index: 1;
   animation: zoomIn 0.6s ease-out;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  .comment-input:focus {
   border-color: #c41e3a;
   box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.1), 0 4px 12px rgba(196, 30, 58, 0.2);
   transform: translateY(-2px) scale(1.01);
  }

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

  .submit-comment {
   background: linear-gradient(135deg, #c41e3a 0%, #8b0000 100%);
   color: #fff;
   border: none;
   padding: 12px 30px;
   border-radius: 25px;
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.3s ease;
   position: relative;
   overflow: hidden;
   animation: bounceIn 0.6s ease-out;
   box-shadow: 0 4px 12px rgba(196, 30, 58, 0.3);
  }

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

  .submit-comment:hover::before {
   left: 100%;
  }

  .submit-comment:hover {
   transform: translateY(-4px) scale(1.05);
   box-shadow: 0 8px 20px rgba(196, 30, 58, 0.4);
  }

  .submit-comment:active {
   transform: translateY(0) scale(0.98);
  }

  .comments-list {
   display: flex;
   flex-direction: column;
   gap: 20px;
  }

  .comment-item {
   display: flex;
   gap: 15px;
   padding: 20px;
   background: #f9f9f9;
   border-radius: 8px;
   transition: all 0.3s ease;
   animation: fadeInUp 0.6s ease-out;
   position: relative;
   overflow: hidden;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  .comment-item::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 4px;
   height: 100%;
   background: linear-gradient(180deg, #c41e3a, #8b0000);
   border-radius: 4px 0 0 4px;
  }

  .comment-item::after {
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   width: 0;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(196, 30, 58, 0.05), transparent);
   transition: width 0.5s ease;
  }

  .comment-item:hover::after {
   width: 100%;
  }

  .comment-item:hover {
   transform: translateY(-8px) rotate(1deg);
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
   background: #f0f0f0;
  }

  .comment-avatar {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background: #e0e0e0;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 600;
   color: #666;
   transition: all 0.3s ease;
   animation: bounceIn 0.6s ease-out;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .comment-item:hover .comment-avatar {
   background: linear-gradient(135deg, #c41e3a 0%, #8b0000 100%);
   color: #fff;
   transform: scale(1.2) rotate(360deg);
   box-shadow: 0 4px 12px rgba(196, 30, 58, 0.3);
  }

  .comment-content {
   flex: 1;
  }

  .comment-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 10px;
   animation: fadeIn 0.8s ease-out;
  }

  .comment-author {
   font-weight: 600;
   color: #333;
   font-size: 14px;
   transition: all 0.3s ease;
  }

  .comment-item:hover .comment-author {
   color: #c41e3a;
   transform: translateX(8px);
  }

  .comment-time {
   font-size: 12px;
   color: #999;
   transition: all 0.3s ease;
  }

  .comment-item:hover .comment-time {
   color: #666;
  }

  .comment-text {
   font-size: 14px;
   line-height: 1.6;
   color: #333;
   margin-bottom: 10px;
   transition: all 0.3s ease;
  }

  .comment-item:hover .comment-text {
   transform: translateX(8px);
   color: #222;
  }

  .comment-reactions {
   display: flex;
   gap: 15px;
   font-size: 12px;
   color: #999;
   animation: fadeIn 0.8s ease-out;
  }

  .comment-reaction {
   display: flex;
   align-items: center;
   gap: 5px;
   cursor: pointer;
   transition: all 0.3s ease;
   padding: 4px 8px;
   border-radius: 12px;
   position: relative;
   overflow: hidden;
   background: rgba(245, 245, 245, 0.5);
  }

  .comment-reaction::before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(196, 30, 58, 0.1), transparent);
   transition: left 0.3s ease;
  }

  .comment-reaction:hover::before {
   left: 100%;
  }

  .comment-reaction:hover {
   color: #c41e3a;
   background: rgba(196, 30, 58, 0.1);
   transform: scale(1.1) translateY(-2px);
   box-shadow: 0 2px 8px rgba(196, 30, 58, 0.2);
  }

  /* 滚动动画 */
  .fade-in-scroll {
   opacity: 0;
   transform: translateY(30px);
   transition: all 0.8s ease;
  }

  .fade-in-scroll.visible {
   opacity: 1;
   transform: translateY(0);
  }

  /* 右侧栏样式 */
  .sidebar {
   animation: slideInRight 0.8s ease-out 1s both;
  }

  .sidebar-section {
   background: #fff;
   border-radius: 12px;
   padding: 25px;
   margin-bottom: 20px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
   transition: all 0.3s ease;
   animation: fadeInUp 0.8s ease-out;
   position: relative;
   overflow: hidden;
  }

  .sidebar-section::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 4px;
   height: 100%;
   background: linear-gradient(180deg, #c41e3a, #8b0000);
   border-radius: 12px 0 0 12px;
  }

  .sidebar-section:first-child {
   animation-delay: 1.1s;
  }

  .sidebar-section:last-child {
   animation-delay: 1.2s;
  }

  .sidebar-section:hover {
   transform: translateY(-8px) scale(1.02);
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  }

  .sidebar-section h3 {
   font-size: 18px;
   font-weight: 700;
   color: #222;
   margin-bottom: 15px;
   display: flex;
   align-items: center;
   gap: 8px;
   animation: slideInLeft 0.6s ease-out;
   position: relative;
   padding-left: 10px;
  }

  .sidebar-section h3::after {
   content: '';
   position: absolute;
   bottom: -5px;
   left: 10px;
   width: 40px;
   height: 2px;
   background: #c41e3a;
   border-radius: 1px;
   animation: growRight 0.6s ease-out;
  }

  .trending-list {
   display: flex;
   flex-direction: column;
   gap: 15px;
  }

  .trending-item {
   display: flex;
   gap: 12px;
   padding: 10px 0;
   border-bottom: 1px solid #f0f0f0;
   transition: all 0.3s ease;
   animation: fadeInUp 0.6s ease-out;
   position: relative;
   overflow: hidden;
  }

  .trending-item:nth-child(1) {
   animation-delay: 0.1s;
  }

  .trending-item:nth-child(2) {
   animation-delay: 0.2s;
  }

  .trending-item:nth-child(3) {
   animation-delay: 0.3s;
  }

  .trending-item:nth-child(4) {
   animation-delay: 0.4s;
  }

  .trending-item:nth-child(5) {
   animation-delay: 0.5s;
  }

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

  .trending-item::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: 0;
   width: 0;
   height: 1px;
   background: #c41e3a;
   transition: width 0.3s ease;
  }

  .trending-item:hover::after {
   width: 100%;
  }

  .trending-item:hover {
   transform: translateX(8px) scale(1.02);
   background: rgba(245, 245, 245, 0.7);
   border-radius: 6px;
   padding-left: 10px;
  }

  .trending-rank {
   width: 24px;
   height: 24px;
   border-radius: 50%;
   background: #c41e3a;
   color: #fff;
   font-size: 12px;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   transition: all 0.3s ease;
   animation: bounceIn 0.6s ease-out;
   box-shadow: 0 2px 8px rgba(196, 30, 58, 0.3);
  }

  .trending-item:hover .trending-rank {
   transform: scale(1.2) rotate(360deg);
   box-shadow: 0 4px 12px rgba(196, 30, 58, 0.4);
  }

  .trending-content {
   flex: 1;
  }

  .trending-title {
   font-size: 14px;
   font-weight: 600;
   color: #333;
   line-height: 1.4;
   margin-bottom: 4px;
   transition: all 0.3s ease;
    overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  }

  .trending-item:hover .trending-title {
   color: #c41e3a;
   transform: translateX(8px);
  }

  .trending-meta {
   font-size: 12px;
   color: #999;
   transition: all 0.3s ease;
  }

  .trending-item:hover .trending-meta {
   color: #666;
   transform: translateX(8px);
  }

  .related-list {
   display: flex;
   flex-direction: column;
   gap: 15px;
  }

  .related-item {
   display: flex;
   gap: 12px;
   padding: 10px 0;
   border-bottom: 1px solid #f0f0f0;
   transition: all 0.3s ease;
   animation: fadeInUp 0.6s ease-out;
   position: relative;
   overflow: hidden;
  }

  .related-item:nth-child(1) {
   animation-delay: 0.1s;
  }

  .related-item:nth-child(2) {
   animation-delay: 0.2s;
  }

  .related-item:nth-child(3) {
   animation-delay: 0.3s;
  }

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

  .related-item::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: 0;
   width: 0;
   height: 1px;
   background: #c41e3a;
   transition: width 0.3s ease;
  }

  .related-item:hover::after {
   width: 100%;
  }

  .related-item:hover {
   transform: translateX(8px) scale(1.02);
   background: rgba(245, 245, 245, 0.7);
   border-radius: 6px;
   padding-left: 10px;
  }

  .related-image {
   width: 80px;
   height: 60px;
   border-radius: 6px;
   overflow: hidden;
   flex-shrink: 0;
   transition: all 0.3s ease;
   position: relative;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .related-image::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.2);
   opacity: 0;
   transition: opacity 0.3s ease;
  }

  .related-item:hover .related-image::before {
   opacity: 1;
  }

  .related-item:hover .related-image {
   transform: scale(1.1) rotate(3deg);
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  }

  .related-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
  }

  .related-info {
   flex: 1;
  }

  .related-title {
   font-size: 14px;
   font-weight: 600;
   color: #333;
   line-height: 1.4;
   margin-bottom: 4px;
   transition: all 0.3s ease;
    overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  }

  .related-item:hover .related-title {
   color: #c41e3a;
   transform: translateX(8px);
  }

  .related-meta {
   font-size: 12px;
   color: #999;
   transition: all 0.3s ease;
  }

  .related-item:hover .related-meta {
   color: #666;
   transform: translateX(8px);
  }

  @media (max-width: 768px) {

   /* 基础设置 */
   .container {
    grid-template-columns: 1fr !important;
    gap: 20px;
   }

   /* 文章区域优化 */
   .article-header,
   .article-content,
   .related-news,
   .article-actions,
   .comment-section {
    padding: 20px;
    border-radius: 10px;
   }

   .article-title {
    font-size: 22px;
    line-height: 1.3;
   }

   .article-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
   }

   /* 文章内容优化 */
   .article-content {
    font-size: 15px;
    line-height: 1.7;
   }

   .article-content h2 {
    font-size: 20px;
    margin: 25px 0 15px;
   }

   .article-content h3 {
    font-size: 18px;
    margin: 20px 0 12px;
   }

   .article-image {
    margin: 20px 0;
   }

   .article-image-caption {
    font-size: 13px;
   }

   /* 操作按钮优化 */
   .action-buttons {
    flex-wrap: wrap;
    gap: 12px;
   }

   .action-btn {
    flex: 1;
    min-width: 100px;
    font-size: 13px;
    padding: 10px 16px;
   }

   /* 相关新闻优化 */
   .related-news h3 {
    font-size: 18px;
   }

   .related-news-item {
    padding: 12px 0;
   }

   .related-news-image {
    width: 80px;
    height: 60px;
   }

   .related-news-title {
    font-size: 14px;
   }

   .related-news-meta {
    font-size: 12px;
   }

   /* 评论区优化 */
   .comment-section h3 {
    font-size: 18px;
   }

   .comment-input {
    min-height: 100px;
    font-size: 14px;
    padding: 12px;
   }

   .submit-comment {
    font-size: 13px;
    padding: 10px 24px;
   }

   .comment-item {
    padding: 16px;
    gap: 12px;
   }

   .comment-avatar {
    width: 40px;
    height: 40px;
   }

   .comment-text {
    font-size: 13px;
    line-height: 1.5;
   }

   /* 右侧栏优化 */
   .sidebar {
    order: -1;
   }

   .sidebar-section {
    padding: 20px;
    margin-bottom: 15px;
   }

   .sidebar-section h3 {
    font-size: 16px;
   }

   .trending-item {
    padding: 8px 0;
    gap: 10px;
   }

   .trending-rank {
    width: 20px;
    height: 20px;
    font-size: 12px;
   }

 

   .related-item {
    padding: 8px 0;
    gap: 10px;
   }

   .related-image {
    width: 70px;
    height: 50px;
   }

   .related-title {
    font-size: 13px;
   }

   .related-meta {
    font-size: 12px;
   }

   /* 动画效果优化 */
   .article-header {
    animation: fadeInUp 0.6s ease-out;
   }

   .article-content {
    animation: fadeInUp 0.6s ease-out 0.2s both;
   }

   .related-news {
    animation: fadeInUp 0.6s ease-out 0.3s both;
   }

   .article-actions {
    animation: fadeInUp 0.6s ease-out 0.4s both;
   }

   .comment-section {
    animation: fadeInUp 0.6s ease-out 0.5s both;
   }

   .sidebar {
    animation: slideInRight 0.6s ease-out 0.1s both;
   }
  }

  /* 小屏幕手机优化 */
  @media (max-width: 480px) {

   /* 基础设置 */
   .container {
    gap: 15px;
   }

   /* 文章区域优化 */
   .article-header,
   .article-content,
   .related-news,
   .article-actions,
   .comment-section {
    padding: 16px;
   }

   .article-title {
    font-size: 18px;
   }

   /* 文章内容优化 */
   .article-content {
    font-size: 14px;
   }

   .article-content h2 {
    font-size: 18px;
   }

   .article-content h3 {
    font-size: 16px;
   }

   /* 操作按钮优化 */
   .action-btn {
    min-width: 80px;
    font-size: 12px;
    padding: 8px 12px;
   }

   /* 相关新闻优化 */
   .related-news-image {
    width: 70px;
    height: 50px;
   }

   /* 评论区优化 */
   .comment-input {
    min-height: 80px;
    font-size: 13px;
   }

   .comment-item {
    padding: 12px;
    gap: 10px;
   }

   .comment-avatar {
    width: 36px;
    height: 36px;
   }

   /* 右侧栏优化 */
   .sidebar-section {
    padding: 16px;
   }

   .sidebar-section h3 {
    font-size: 15px;
   }

   .trending-item {
    gap: 8px;
   }

  

   .related-image {
    width: 60px;
    height: 45px;
   }
  }