/* 文章页面自定义样式 */
.w-15 {
  width: 3.75rem;
}
.h-15 {
  height: 3.75rem;
}

/* 文章卡片样式 */
.article-card {
  @apply rounded-lg overflow-hidden shadow-lg bg-white transition-transform duration-200 hover:-translate-y-1 hover:shadow-2xl;
}
.article-card img {
  @apply w-full object-cover;
}
.article-card .card-body {
  @apply p-6;
}
.article-card .card-title {
  @apply text-2xl font-bold mb-2 text-gray-900;
}
.article-card .card-desc {
  @apply text-gray-600 mb-4;
}
.article-card .card-date {
  @apply text-sm text-gray-400;
}

/* 列表项样式 */
.article-list-item {
  @apply flex gap-4 items-center rounded-lg bg-gray-50 p-4 shadow hover:bg-gray-100 transition;
}
.article-list-item img {
  @apply w-24 h-24 object-cover rounded;
}
.article-list-item .item-title {
  @apply text-lg font-bold mb-1 text-gray-900;
}
.article-list-item .item-desc {
  @apply text-gray-600 mb-1;
}
.article-list-item .item-date {
  @apply text-xs text-gray-400;
}

/* section 标题 */
.section-title {
  @apply text-4xl lg:text-5xl font-bold text-gray-900 leading-tight mb-12;
}

/* 响应式间距优化 */
@media (max-width: 1024px) {
  .mb-24 { margin-bottom: 3rem !important; }
}

/* 占位骨架屏样式 */
.skeleton {
  background: linear-gradient(90deg, #f3f3f3 25%, #ececec 37%, #f3f3f3 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
  border-radius: 0.5rem;
}
@keyframes skeleton-loading {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
.skeleton-title {
  height: 2rem;
  width: 60%;
  margin-bottom: 1rem;
}
.skeleton-desc {
  height: 1rem;
  width: 90%;
  margin-bottom: 0.5rem;
}
.skeleton-img {
  height: 8rem;
  width: 100%;
  margin-bottom: 1rem;
}
.skeleton-date {
  height: 1rem;
  width: 30%;
}

/* 你可以根据需要补充其它自定义样式 */
#backToTop, #backToTopBtn, #categoryBackToTop {
  box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10);
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
  border: none;
  outline: none;
  cursor: pointer;
}
#backToTop:hover, #backToTopBtn:hover, #categoryBackToTop:hover {
  background: rgba(0,0,0,0.7);
  box-shadow: 0 8px 24px 0 rgba(0,0,0,0.18);
  transform: translateY(-2px) scale(1.05);
}
#backToTop svg, #backToTopBtn svg, #categoryBackToTop svg {
  display: block;
  margin: 0 auto;
  transition: transform 0.2s;
}
#backToTop:active svg, #backToTopBtn:active svg, #categoryBackToTop:active svg {
  transform: translateY(-2px) scale(1.1) rotate(-10deg);
}