h1 { font-family: Arial, Helvetica, sans-serif; }

/* Toast Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out;
}

.animate-fade-out {
  animation: fadeOut 0.3s ease-out;
}

/* Line clamp utilities */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Image loading state */
img {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s ease-in-out infinite;
}

img[src] {
  animation: none;
  background: none;
}

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

/* Card hover effects */
.hover\:-translate-y-1:hover {
  transform: translateY(-0.25rem);
}

/* Smooth transitions */
* {
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Compact mode */
body.compact { font-size: 14px; }
body.compact nav .h-16 { height: 3rem; }
body.compact .p-6 { padding: 1rem; }
body.compact .p-4 { padding: 0.75rem; }
body.compact .px-6 { padding-left: 1rem; padding-right: 1rem; }
body.compact .py-8 { padding-top: 1rem; padding-bottom: 1rem; }

/* Offline banner */
#offline-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 60; }
#offline-banner.hidden { display: none; }