/* 移动端页面骨架屏 - 延迟加载效果 */
.page-skeleton {
  padding: 16px 14px 24px;
}

.page-skeleton .sk-block {
  margin-bottom: 20px;
}

.page-skeleton .sk-title {
  height: 20px;
  width: 120px;
  margin-bottom: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, #e8e4df 25%, #dfdbd6 50%, #e8e4df 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.2s ease-in-out infinite;
}

.page-skeleton .sk-line {
  height: 16px;
  width: 100%;
  margin-bottom: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, #e8e4df 25%, #dfdbd6 50%, #e8e4df 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.2s ease-in-out infinite;
}

.page-skeleton .sk-line.short {
  width: 75%;
}

.page-skeleton .sk-line.w60 {
  width: 60%;
}

.page-skeleton .sk-card {
  width: 100%;
  height: 100px;
  margin-bottom: 12px;
  border-radius: 8px;
  background: linear-gradient(90deg, #e8e4df 25%, #dfdbd6 50%, #e8e4df 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.2s ease-in-out infinite;
}

.page-skeleton .sk-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.page-skeleton .sk-grid-item {
  width: calc(50% - 6px);
  aspect-ratio: 3/4;
  border-radius: 8px;
  background: linear-gradient(90deg, #e8e4df 25%, #dfdbd6 50%, #e8e4df 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.2s ease-in-out infinite;
}

@keyframes sk-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.page-content-wrap {
  animation: page-fade-in 0.35s ease-out;
}

@keyframes page-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}