.skeleton-container { padding: 24px; }
.skeleton-title, .skeleton-paragraph {
  background: #eee;
  border-radius: 4px;
  margin-bottom: 12px;
  animation: skeleton-loading 1.2s infinite linear;
}
.skeleton-title { height: 32px; width: 60%; }
.skeleton-paragraph { height: 16px; width: 100%; }
@keyframes skeleton-loading {
  0% { background-color: #eee; }
  50% { background-color: #f5f5f5; }
  100% { background-color: #eee; }
}
.spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 32px; height: 32px;
  animation: spin 1s linear infinite;
  margin: 40px auto;
}
@keyframes spin { 100% { transform: rotate(360deg); } }
.fade-in { animation: fadeIn 0.6s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.lazy-img { opacity: 0; transition: opacity 0.6s; }
.lazy-img.loaded { opacity: 1; }